/* ----------------------------------------------------------------
 01. Utility
----------------------------------------------------------------- */

/**
 * Reset
 */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	border: 0;
	box-sizing: border-box;
	font-size: 100%;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
h1, h2, h3, h4, h5, h6, p ,li {
	font-feature-settings: 'palt';
	font-weight: 300;
	margin: 0;
	padding: 0;
}

blockquote:before, blockquote:after, q:before, q:after { content: none }
nav, ul, ol, dl { list-style: none }
blockquote, q { quotes: none }
a {
	background: transparent;
	box-sizing: border-box;
	color: inherit;
	display: block;
	font-size: 100%;
	margin: 0;
	padding: 0;
	text-decoration: none;
	vertical-align: baseline;
	outline: none;
}
input[type="text"]:focus {
  outline: none;
}




.mg0{margin:0px!important;}
.mgb0{margin-bottom:0px!important;}
.mgb1em { margin-bottom: 1em !important; }
.mgb2em { margin-bottom: 2em !important; }
.mgb3em { margin-bottom: 3em !important; }
.mgb6em { margin-bottom: 6em !important; }
.mgt0{margin-top:0!important;}
.mgr0{margin-right:0!important;}
.mgr10{margin-right:10px!important;}
.pd0{padding:0px!important;}
.pdb0{padding-bottom:0px!important;}
.pdr0{padding-right:0px!important;}
.pdt0{padding-top:0px!important;}

.tac{text-align:center!important;}
.tal{text-align:left!important;}
.tar{text-align:right!important;}
.taj { text-align: justify!important; }
.fwb{font-weight:700 !important;}
.fwn{font-weight:normal!important;}
.wsn{white-space:nowrap!important;}
.vam{vertical-align:middle!important;}
.vat{vertical-align:top!important;}
.vab{vertical-align:bottom!important;}
.dpb{display:block!important;}
.dpi{display:inline!important;}
.dpn{display:none!important;}
.dpib{display:inline-block!important;}
.psr{position:relative!important;}
.fll{float:left!important;}
.flr{float:right!important;}
.clb{clear:both;}
.tdu{text-decoration:underline;}
.bdn{border:none!important;}
.lh0 { line-height: 0;}
.lh1_6{line-height:1.6;}
.lh1_8{line-height:1.8;}
.ovfh{overflow:hidden;}
.ovfx{overflow-x: hidden;}
input[type="text"], 
input[type="password"], 
textarea, 
select {
    outline: none;
}
*:focus {
  outline: none;
}
.img100 {
	height: auto;
	width: 100%;
}
.imgmodal {
	height: auto;
	margin: 50px auto 0;
	width: 90%;
}

small {
	font-size: .6rem;
}

.op_01 {
    transition:all .15s ease-in-out;
}
.op_01:hover {
    opacity: 0.6;
    transition:all .3s ease-in-out;
}


.only_pc {
	display: none;
}
.only_sp {
	display: inherit;
}
@media only screen and (min-width: 768px) {
  .only_pc {
    display: inherit;
  }
  .only_sp {
    display: none;
  }

}




.hidden_box {
	-webkit-transform: translateY(20px);
	-moz-transform: translateY(20px);
	transform: translateY(20px);
	opacity: 0;
}
.move,
.move:hover {
	transition:all .3s ease-in-out;
}
.move2,
.move2:hover {
	transition:all 0.6s ease-in-out;
}
.move3,
.move3:hover {
	transition:all 1.1s ease-in-out;
}



/* ========== 画像を読み込んでから表示 */
#loader{
    width: 16px;
    height: 16px;
    display: none;
    position: fixed; top: calc(50% - 8px); left: calc(50% - 8px);
    z-index: 10000 !important;
}
#loader img {
	height: auto;
	width: 100%;
}
#fade{
    width: 100%;
    height: 100%;
    display: none;
    background-color: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9999 !important;
}
@media only screen and (min-width: 768px) {
		#loader{
				width: 20px;
				height: 20px;
				display: none;
				position: fixed; top: calc(50% - 10px); left: calc(50% - 10px);
				z-index: 10000 !important;
		}
		#loader img {
			height: auto;
			width: 100%;
		}
}




body {
    font-family: ryo-gothic-plusn, sans-serif;
    font-weight: 100;
    font-style: normal;
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
	overflow-x: hidden;
	padding: 110vh 0 0;
	position: relative;
}
body.under {
    padding: 52px 0;
}
.fwb {
  font-family: ryo-gothic-plusn, sans-serif;
  font-weight: 600;;
  font-style: normal;
}
@media only screen and (min-width: 768px) {
		body {
			font-size: 14px;
            padding: 110vh 0 0;
		}
        body.under {
            padding: 60px 0;
        }
}






.fade-in {
  opacity: 0;
  animation: fadeIn 1.2s ease-in forwards;
  animation-delay: 0.3s;
}
.fade-in.t2 {
  animation-delay: 0.5s;
}
.fade-in.t3 {
  animation-delay: 0.7s;
}
.fade-in.t4 {
  animation-delay: 1.3s;
}
.fade-in.t5 {
  animation-delay: 1.6s;
}
.air { border: none !important; height: 0; line-height: 0; width: 0; margin: 0 !important; padding: 0 !important; background: none !important;}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(2px);
  }
  90% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}





/* Album */

.album_wrap_01 {
    margin: 0 auto 0px;
    padding: 0px 0 0px;
    position: relative;
}
.ttl_c_album {
	display: block;
	margin: 0 auto;
	padding: 40px 0 10px;
	max-width: 451px;
	width: 70.46%;
}

.ul_slide {
    margin: 0 0 30px;
}
@media only screen and (min-width: 768px) {
        .ul_slide {
            margin: 0 0 60px;
        }
}

.ul_slide .slick-track {
    display: flex;
}

.ul_slide .slick-slide {
    height: auto;
}



.ul_slide .slick-prev.slick-disabled,
.ul_slide .slick-next.slick-disabled {
    display: none !important;
}
.ul_slide li {
    -webkit-backdrop-filter: blur(2px);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2px);
    border: solid 1px #ccc;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 10px;
    padding: 10px 10px 124px;
    position: relative;
}

.ul_slide li .jacket {
    margin: 0 auto 15px;
    max-width: 230px;
    width: 100%;
}

.tag_album_01 {
    font-size: .7rem;
    margin: 0 0 10px;
    text-align: center;
}

.tag_album_01 span {
    background: #ececec;
    border-radius: 9px;
    color: #363636;
    display: inline-block;
    height: 18px;
    line-height: 16px;
    min-width: 60px;
    padding: 2px 10px;
}



@keyframes blink{
   0% {opacity:0;}
   100% {opacity:1;}
}


.ul_slide li .ttl_album {
    font-size: 1.07em;
    font-weight: 600;;
	line-height: 1.2;
	margin: 0 0 15px;
	text-align: center;
}
.ttl_album.mh0 {
	line-height: 1.2;
	margin-bottom: 5px;
	min-height: 0 !important;
}
.ul_slide li .ttl_album span {
	font-size: .85rem;
}
.ul_slide li .detail_album {
	height: auto;
    margin: auto;
    width: 80%;
}
.ul_slide li .price {
	font-size: .95rem;
	line-height: 1.4;
	margin: 0 0 20px;
	text-align: center;
}
.ul_slide li .price span {
	font-weight: 600;;
}
.tokuten_wrap {
    background: #ededed;
    font-size: .7rem;
    margin: 0 0 15px;
}
@media only screen and (min-width: 768px) {
        .tokuten_wrap {
            font-size: 10px;
            padding: 5px;
        }
}
.ul_slide li .btn_wrap {
    padding: 0 0 25px;
    position: absolute; bottom: 0; left: 0;
    width: 100%;
}

.btn_01 {
    background: #9e0000;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    min-height: 35px;
    padding: 8px 10px;
    text-align: center;
    text-decoration: none;
}
.btn_01.nolink {
    background: #dedede;
    color: #565656;
    pointer-events: none;
}

.btn_01.size80 {
    max-width: 260px;
    width: 80%;
}
.btn_01.bros {
	background: #454545;
	font-size: 1rem;
	margin: auto;
	max-width: 300px;
	width: 80%;
}
.btn_01.gray {
    background: #454545;
    color: #fff;
}
.btn_01 span {
    background: url("../img/icn_cart.png") no-repeat right;
    background-size: 17px;
    min-height: 17px;
    padding: 0 26px 0 0;
}
.btn_01.nolink span {
    background: url("../img/icn_cart_bla.png") no-repeat right;
    background-size: 17px;
    min-height: 17px;
    padding: 0 26px 0 0;
}
.btn_01.shop {
    border-radius: 17.5px;
}
.slick-dots {
	display: none !important;
}

.slick-prev,
.slick-next	{
    background: url("../img/icn_arrow.png") no-repeat, #9e0000 !important;
	background-size: 10px , 100% !important;
	background-position: center, 0 !important;
    border-radius: 20px;
    height: 40px;
    width: 40px;
    font-size: 0;
    line-height: 0;
    position: absolute;
	transform: rotate(180deg);
    top: 35%;
    display: block;
    left: 1%;
    padding: 0;
    cursor: pointer;
    z-index: 100;
}
.slick-next	{
	transform: rotate(0deg);
    left: inherit;
	right: 1%;
}
.ul_slide li .ttl_album .ttl_pc {
  font-size: 4.3vw;
  line-height: 1.2
}

.bros_wrap {
	background: #1b1b1b;
	font-size: 1.6rem;
	margin: 0 auto 0px;
	padding: 50px 0 50px;
	position: relative;
}
.ttl_bros {
	color: #cdcdcd;
	font-weight: 600;;
	line-height: 0;
	margin: 0 0 20px;
	text-align: center;
}
.bros_logo {
	line-height: 0;
	margin: 0 auto 20px;
	width:26%;
}
.jacket_bros {
	line-height: 0;
	margin: 0 auto 20px;
	width: 50%;
}
.txt_bros {
	color: #cdcdcd;
	font-size: 1rem;
	margin: 0 0 25px;
	text-align: center;
}
.txt_tokuten_bros {
	line-height: 0;
	margin: 0 0 50px;
}

.ul_disc {
    list-style: disc;
    padding-left: 15px;
}
.ul_disc li {
    background: none;
    border: none;
    display: list-item;
    list-style: disc outside;
    margin: 0 0 .5em;
    max-width: 100%;
    padding: 0;
}
.ul_disc li:last-child {
    margin: 0 0 0;
}
@media only screen and (min-width: 768px) {
		.album_wrap_01 {
			align-items: center;
			border-bottom: none;
			margin: 0 auto;
			padding: 0px 0 10px;
		}
		.ul_slide li .ttl_album {
			margin: 0 0 30px;
			position: relative;
		}
		.ttl_c_album {
			margin: 0 auto 40px;
		}
		.ul_slide li {
			padding: 30px 20px 124px;
		}
		.ul_slide li .jacket {
			margin: 0 auto 10%;
			width: 74%;
		}
		.slick-dots {
			display: none;
		}
		.slick-dotted.slick-slider {
			margin-bottom: 10px;
		}
		.btn_01:hover {
			opacity: .6;
		}
		.ul_slide li .ttl_album .ttl_pc {
			font-size: 1.1rem;
			line-height: 1.2;
		}

        .ul_disc li {
            padding: 0;
        }
}







/* Movie */

.ttl_movie {
    line-height: 0;
    margin: 0 auto 25px;
    max-width: 246px;
    width: 39.53%;
}

.movie_wrap {
    padding: 0;
}

.movie_wrap .inner {
	height: 100%;
    margin: auto;
	width: 85%;
}
.ttl_c_movie {
	margin: 0 auto 25px;
	max-width: 252px;
	width: 39.53%;
}

.ul_movie {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: auto;
	max-width: 1000px;
	width: calc(100% - 22px);
}
.ul_movie li {
	flex-basis: auto;
	margin: 0 0 6%;
	position: relative;
	width: 47%;
}
.ul_movie li:first-child ,
.ul_movie li:nth-child(2) {
	flex-basis: auto;
	width: 100%;
}
.ul_movie li .img_wrap {
	margin: 0;
}
.ul_movie li .img_wrap img {
	height: auto;
	width: 100%;
}
.ul_movie li p {
	background: #000;
	color: #fff;
	font-size: 3vw;
	padding: 2% 5%;
	position: absolute; left: 0; bottom: 0;
}
.video_wrap {
	margin: 0 auto 15px;
	max-width: 1000px;
	width: 100%;
}
.video_wrap .inner {
    border-radius: 10px;
	height: 0;
    overflow: hidden;
	padding-top: 62%;
	position: relative;
	width: 100%;
}
.video_wrap .inner:after {
	display: none;
}
.video_wrap .inner iframe {
	height: 100% !important;
	position: absolute; top: 0; left: 0;
	width: 100% !important;
}
@media only screen and (min-width: 768px) {
        .ttl_movie {
            margin: 0 auto 50px;
        }
		.movie_wrap {
			padding: 0 0 60px;
		}
		.movie_wrap:before,
		.movie_wrap:after {
			top: 20px;
		}
		.movie_wrap:after {
			bottom: 20px; left: 0; top: inherit;
		}
		.movie_wrap .inner:before,
		.movie_wrap .inner:after {
			left: 20px;
		}
		.movie_wrap .inner:after {
			left: inherit; right: 20px;
		}

		.ul_movie {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: auto;
			max-width: 1000px;
			width: calc(100% - 42px);
		}
		.ul_movie li p {
			font-size: 14px;
			padding: 2% 5%;
		}
		.ul_movie li:first-child ,
		.ul_movie li:nth-child(2) {
			flex-basis: auto;
			width: 47%;
		}
}




.footer {
	padding: 80px 0 20px;
	position: relative;
	text-align: center;
}

.ul_sns_foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto 75px;
    width: 90%;
}
.ul_sns_foot li {
    width: 25%;
}
.ul_sns_foot li img {
    width: 25%;
}
.ul_sns_foot li:nth-child(1) {
    width: 22%;
}
.ul_sns_foot li:nth-child(2) {
    width: 23%;
}

.logo_official_foot {
    margin: 0 auto 50px;
    max-width: 383.5px;
    width: 59.92%;
}
.logo_bros_foot {
    margin: 0 auto 50px;
    max-width: 232px;
    width: 36.25%;
}

.copy {
	color: #555;
	font-size: .85rem;
	padding: 0px 0 0;
	text-align: center;
}
@media only screen and (min-width: 768px) {
        .footer {
            padding: 160px 0 20px;
        }

        .ul_sns_foot {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 0 auto 100px;
            width: 383.5px;
        }
        .ul_sns_foot li {
            width: 20px;
        }
        .ul_sns_foot li img {
            width: 20px;
        }
        .ul_sns_foot li:nth-child(1) {
            width: 18px;
        }
        .ul_sns_foot li:nth-child(2) {
            width: 19px;
        }

        .logo_official_foot {
            margin: 0 auto 100px;
        }
        .logo_bros_foot {
            margin: 0 auto 100px;
        }

}




/* ----------------------------------------------------------------
 Menu
----------------------------------------------------------------- */

.menu-trigger,
.menu-trigger span,
.drawer-close .menu-trigger,
.drawer-close .menu-trigger span{
    cursor: pointer;
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}
.menu-trigger,
.drawer-close .menu-trigger{
    aspect-ratio: 1 / 1;
    background: #d0d0d0;
    border: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 14%;
    z-index: 9004;
}
.menu-trigger span,
.drawer-close .menu-trigger span{
    position: absolute;
    right: 35%;
    width: 1px;
    height: 50%;
    background-color: #fff;
    border-radius: 4px;
}
.menu-trigger span:nth-of-type(1),
.drawer-close .menu-trigger span:nth-of-type(1){
    top: 25%;
}
.menu-trigger span:nth-of-type(2),
.drawer-close .menu-trigger span:nth-of-type(2){
      right: 50%;
      top: 25%;
}
.menu-trigger span:nth-of-type(3),
.drawer-close .menu-trigger span:nth-of-type(3){
    right: 65%;
    top: 25%;
}
.menu-trigger .txt,
.drawer-close .menu-trigger .txt {
	color: #fff;
	font-size: 85%;
	position: absolute;
	bottom: -20px;
}
.menu-trigger:hover span:nth-child(1),
.menu-trigger:hover span:nth-child(2),
.menu-trigger:hover span:nth-child(3) {
	transform: rotateY(360deg)
}
.drawer-open .menu-trigger:hover span:nth-child(1) {
	transform: none;
}
.sns_wrap li:nth-child(3) {
	-webkit-animation-duration: 1.9s;
	-moz-animation-duration: 1.9s;
	animation-duration: 1.9;
}

@-webkit-keyframes rotate3 {
0% {-webkit-transform: rotateY(0deg); opacity: 100;} 
50% {-webkit-transform: rotateY(20deg); opacity: 100;}
51% {-webkit-transform: rotateY(180deg); opacity: 100;}
100% {-webkit-transform: rotateY(360deg); opacity: 100;}
}
@-moz-keyframes rotate3 {
0% {-moz-transform: rotateY(0deg); opacity: 100;} 
50% {-moz-transform: rotateY(20deg); opacity: 100;}
51% {-moz-transform: rotateY(180deg); opacity: 100;}
100% {-moz-transform: rotateY(360deg); opacity: 100;}
}
@keyframes rotate3 {
0% {transform: rotateY(0deg); opacity: 100;} 
50% {transform: rotateY(20deg); opacity: 100;}
51% {transform: rotateY(180deg); opacity: 100;}
100% {transform: rotateY(360deg); opacity: 100;}
}

.drawer-open .menu-trigger {
    cursor: pointer;
    position: fixed;
    top: 0px;
    right: 0;
    width: 14%;
    z-index: 9004;
}
@media only screen and (min-width: 768px) {
        .menu-trigger,
        .drawer-close .menu-trigger{
            width: 60px;
        }
        .drawer-open .menu-trigger {
            width: 60px;
        }        
}
.drawer-open .menu-trigger span:nth-of-type(1) {
  display: none;
}
@media screen and (max-width: 768px) {

	.drawer-open .menu-trigger span:nth-of-type(1) {
		display: none;
	}
}

.drawer-open .menu-trigger span:nth-of-type(2) {
    height: 50%;
    top: 25%;
    right: 45%;
    transform: rotate(45deg);
    width: 1px;
}
.drawer-open .menu-trigger span:nth-of-type(3) {
    top: 25%;
    height: 50%;
	transform:rotate(-45deg);
	right: 45%;
	width: 1px;
}
.drawer-open .menu-trigger .txt {
	opacity: 0;
}
.drawer-open .menu-trigger:hover span:nth-child(1),
.drawer-open .menu-trigger:hover span:nth-child(2),
.drawer-open .menu-trigger:hover span:nth-child(3){
	-webkit-animation-iteration-count: 0;
	-moz-animation-iteration-count: 0;
	animation-iteration-count: 0;
}

.drawer-nav {
	background: rgba(0,0,0,.9);
	padding: 10% 50px 0;
	width: 400px;
	z-index: 9001;
}
.drawer--right .drawer-nav {
    right: -50%;
}
.drawer-menu {
	color: #fff;
	font-size: 107.1%;
	margin: 0 auto 30px;
	width: 90%
}
.drawer-menu li {
	letter-spacing: 0.2em;
	margin: 0 0 2em;
}
.drawer-menu li .sub {
        padding: 7% 0 0 6%;
}
.drawer-menu li .sub li {
    color: #cdcdcd;
    font-size: .70rem;
    position: relative ;
}
.drawer-menu li .sub li:before {
    background: #cdcdcd;
    content: "";
    height: 1px;
    position: absolute ; top: .7em; left: -6%;
    width: 3%;
}
@media screen and (max-width: 768px) {
	.drawer-nav {
		padding: 20% 5% 0;
		width: 80%;
	}
	.drawer--right .drawer-nav {
			right: -80%;
	}
	.drawer-menu li {
		margin: 0 0 2em;
	}
	.drawer-menu li:last-child {
		margin: 0 0 0;
	}
}


.sns_wrap_02 {
    align-items: center ;
	display: -webkit-flex; 
	display: flex; 
	-webkit-flex-wrap: wrap; 
	flex-wrap: wrap; 
	justify-content: space-between;
	margin: 0 0 30px;
	width: 100%;
} 
.sns_wrap_02 li {
	flex-basis: 23%;
	padding: 10px 0 0;
	text-align: center;
}
.sns_wrap_02 li a {
	display: block;
}
.sns_wrap_02 li a:hover {
	opacity: 0.6;
	z-index: 100
}
.sns_wrap_02 li:nth-child(1) img {
	height: 19px;
	margin: 0;
}
.sns_wrap_02 li:nth-child(2) img {
	height: 21px;
}
.sns_wrap_02 li:nth-child(3) img {
	height: 21px;
}
.sns_wrap_02 li:nth-child(4) img {
    height: 18.5px;
}


.link_wrap_02 {
    align-items: center ;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: auto;
	width: 90%;
}
.link_wrap_02 li {
	flex-basis: auto;
	width: 60%;
}
.link_wrap_02 li:last-child {
	flex-basis: auto;
	width: 30%;
}
.link_wrap_02 li img {
	height: auto;
	width: 100%;
}





.gmenu {
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: fixed; left: 0; top: 0;
    width: 86%;
    z-index: 9002;
}
.gmenu li {
    aspect-ratio: 1 / .8;
    font-size: .6rem;
    font-weight: 600;;
    text-align: center;
    padding: 0 2%;
    position: relative;
    width: 20%;
}
.gmenu li:before {
    background: #ccc;
    content: "";
    height: 60%;
    position: absolute; right: 0; top: 20%;
    width: 1px;
}
.gmenu li:last-child::before {
    display: none;
}
.gmenu li a {
    display: flex;
    align-items: center;      /* ← 縦中央 */
    justify-content: center;  /* ← 横中央 */
    height: 100%;
    line-height: 1.2;
    width: 100%;
}
.gmenu li a.reserve {
    position: relative;
}
.gmenu li a.reserve:before {
    background: rgba(208,208,208,.5);
    border-radius: 7px;
    content: "";
    height: 60%;
    position: absolute; top: 20%; left: 0%;
    width: 100%;
    z-index: -1;
}
@media only screen and (min-width: 768px) {
        .gmenu {
            margin-left: calc(100% - 1060px);
            width: 1000px;
        }
        .gmenu li {
            aspect-ratio: none;
            font-size: 14px;
            font-weight: 100;
            height: 60px;
            text-align: center;
            padding: 0 2%;
            position: relative;
            width: 20%;
        }
        .gmenu li a:hover {
            color:#9e0000;
        }
        .gmenu li:before {
            background: #ccc;
            content: "";
            height: 40%;
            position: absolute; right: 0; top: 30%;
            width: 1px;
        }
        .gmenu li a.reserve:before {
            background: rgba(208,208,208,.5);
            border-radius: 2px;
            content: "";
            height: 40%;
            position: absolute; top: 30%; left: 0%;
            width: 100%;
            z-index: -1;
        }
}



/* ==================== TOP ====================== */


.top_wrap {
    box-sizing: border-box;
    height: calc(100vh - 14vw);
    justify-content: center;
    margin: 0 auto;
    padding: 12vh 0 0;
    position: fixed;
    top: 0;
    width: 100%;
}
.top_wrap.under {
    height: auto;
    margin: 0 auto 50px;
    padding: 120px 0 0; 
    position: relative;
}

.mainttl {
    margin: 0 auto 15px;
    max-width: 360px;
    width: 62.81%;
}

.mainimg {
    margin: 0 auto 15px;
    max-width: 516px;
    width: 80%;
}
.mainttl img ,
.mainimg img {
    height: auto;
    object-fit: contain;
    width: 100%;
}
#elementA {
    will-change: filter, opacity;
}
@media only screen and (min-width: 768px) {
        .top_wrap {
            height: 100vh;
            padding: 8% 0 0;
        }
        .mainttl {
            margin: 0 auto px;
        }

        .mainimg {
            height: auto;
            max-height: calc(100vh - 200px);
            margin: 0 auto 20px;
            object-fit: contain;
            width: auto;
        }
        .mainttl img {
            max-height: 10vh;
        }
        .mainimg img {
            max-height: 60vh;
        }
}





.arrow_top {
    position: absolute;
    right: 2%;
    top: 40vh;
    width: 3%;
}

.arrow_top span {
    position: relative;
    display: inline-block;
}

/* 縦線 */
.arrow_top span:before {
    background: #555;
    content: "";
    height: 100px;
    position: absolute;
    left: -7px;
    top: 0;
    width: 1px;

    /* ★ここがアニメーション */
    animation: arrowStretch 3s infinite;
}

/* 矢印の先 */
.arrow_top span:after {
    background: #555;
    content: "";
    height: 10px;
    position: absolute;
    left: -3px;
    top: 91px;
    transform: rotate(45deg);
    width: 1px;

    /* 先端も一緒に動かす */
    animation: arrowHead 3s infinite;
}
@media only screen and (min-width: 768px) {
        .arrow_top {
            right: 15%;
            top: 42vh;
            width: 12px;
        }
}


/* ------------------------
   アニメーション
------------------------ */

/* 縦線の伸縮 */
@keyframes arrowStretch {
    0% {
        height: 100px;
    }
    20% { /* ↓1秒で伸びる（5秒中の20%） */
        height: 200px;
    }
    60% { /* ↓3秒キープ */
        height: 200px;
    }
    100% { /* ↓1秒で戻る */
        height: 100px;
    }
}

/* 矢印先端の位置も合わせる */
@keyframes arrowHead {
    0% {
        top: 91px;
    }
    20% {
        top: 191px;
    }
    60% {
        top: 191px;
    }
    100% {
        top: 91px;
    }
}

.bnr_wrap_01 {
    line-height: 0;
    margin: 0 auto 100px;
    width: 94%;
}
.bnr_wrap_01 a {
    margin: 0 auto 15px;
}
.bnr_wrap_01 p {
    color: #363636;
    font-size: .75rem;
    text-align: center;
}
@media only screen and (min-width: 768px) {
        .bnr_wrap_01 {
            display: flex ;
            flex-wrap: wrap ;
            justify-content: space-between ;
            margin: 0 auto 200px;
            max-width: 900px;
        }
        .bnr_wrap_01 a {
            margin: 0 0 20px;;
            width: 46%;
        }
        .bnr_wrap_01 p {
            color: #363636;
            font-size: .75rem;
            margin: 0;
            text-align: center;
            width: 46%;
        }
}

.point {
    margin-bottom: 130vh;
    position: relative;
    z-index: 1;
}



.comment_wrap {
    margin: 0 auto 100px;
    max-width: 812px;
    width: 100%;
}
.comment_ttl {
    background: #d0d0d0;
    font-size: 8.5vw;
    font-weight: 600;;
    line-height: 1.2;

    padding: 0 0 50px;
}
.comment_txt {
    background: #d0d0d0;
    margin: 0 0 0 6%;
    padding: 0 0 10px;
    position: relative;
}
.comment_txt p {
    margin: 0 10% 25px;
}
.comment_txt p:first-child {
    margin: -25px 0 50px;
}
.comment_open {
    font-weight: 600;
    margin: 0;
    padding: 0;
    text-align: right;
    position: absolute;
    left: 0;
    bottom: 13px;
}
.comment_open span {
    background: #fff;
    color: #565656;
    padding: 10px 10px 17px;
}
.comment_open.nowOpen span {
    text-indent: -10000px;
    color: #fff;
    position: relative ;
}
.comment_open.nowOpen span:after {
    content: "閉じる";
    color: #565656;
    position: absolute ;
    right: 50%;
}
@media only screen and (min-width: 768px) {
    .comment_wrap {
        margin: 0 auto 300px;
        max-width: 100%;
        width: 100%;
    }
    .comment_ttl {
        font-size: 5.14vw;
        font-weight: 600;;
        line-height: 1.2;

        padding: 0 0 50px;
    }
    .comment_txt {
        background: #d0d0d0;
        margin: 0 0 0 250px;
        padding: 0 30px 30px 0;
        text-align: justify;
    }
    .comment_txt p {
        margin: 0 0 25px 25px;
    }
    .comment_txt p:first-child {
        margin: -25px 0 50px;
    }
}



.album_wrap {
    -webkit-backdrop-filter: blur(2px);
    background: rgba(241,241,241,.95);
    backdrop-filter: blur(2px);
    margin-bottom: 6.25%;
    max-width: 1000px;
    padding: 45px 0 1px;
    position: relative;
}
.album_wrap.bros {
    background: #2f2f30;
    color: #f4f4f4;
    margin-bottom: 100px;
}
@media only screen and (min-width: 768px) {
        .album_wrap.bros {
            margin-bottom: 200px !important;
        }
}
.album_wrap.first {
    padding-top: 75px;
}
.album_wrap.right {
    margin-left: 6.25%;
}
.album_wrap.left {
    margin-right: 6.25%;
}
.album_wrap.under {
    margin: auto;
    min-width: 100%;
    width: 100% ;
}
.album_wrap .jacket_album {
    margin: 0 auto 30px;
    max-width: 230px;
    width: 76.66%;
}
.ttl_product {
    max-width: 250px;
    position: absolute; top: -15px; left: 25.185%;
    width: 49.63%;
}
.tag_album_01.product span {
    background: #fff;
}
.name_album {
    font-size: 1.42rem;
    font-weight: 600;;
    line-height: 1.2;
    margin: 0 0 15px;
    text-align: center;
}
.name_album span {
    font-size: 1.07rem;
}
.price_wrap {
    line-height: 1;
    margin: 0 0 25px;
    text-align: center;
}
.price_wrap .num {
    display: inline-block;
    font-size: .6rem;
    margin: 0 10px 0 0;
}
.price_wrap .price {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 600;;
}
.price_wrap .price span {
    font-size: .85rem;
}
.ttl_detail_01 {
    border-bottom: solid 2px #363636;
    font-weight: 600;;
    margin: 0 auto 15px;
    max-width: 600px;
    padding: 0 0 15px;
    text-align: center;
    width: 93%;
}
.ttl_detail_01.size2 {
    padding: 0 0 5px;
    width: 100%;
}
.ttl_detail_01.bros {
    border-bottom: solid 2px #cdcdcd;
}
.ttl_detail_02 {
    font-weight: 600;;
    margin: 0 auto 50px;
    text-align: center;
    width: 93%;
}
.ttl_detail_02.nowOpen {
    margin: 0 auto 15px;
}
.ttl_detail_02 span {
    padding: 0 0 0 1.4rem;
    position: relative;
}
.ttl_detail_02 span:before {
    background: url(../img/icn_arrow_02.png) no-repeat;
    background-size: contain;
    content: "";
    height: 1rem;
    position: absolute; left: 0; top: -1px;
    transform: rotate(180deg); 
    transition:all .3s ease-in-out;
    width: 1rem;
}
.ttl_detail_02.nowOpen span:before {
    background: url(../img/icn_arrow_02.png) no-repeat;
    background-size: contain;
    transform: rotate(0deg); 
    transition:all .3s ease-in-out;
}
.closeBtnHat {
    display: none;
}
.song_list_01 {
    margin: 0 auto 25px;
    width: 93%;
}
.song_list_01 li {
    border-bottom: solid 1px #363636;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 1rem;
    padding: 0 2% .2rem 2%;
}
.song_list_01 li span {
    font-size: .75rem;
    font-weight: 300;
    margin: 0 0 0 10px;
}
.song_list_01 li:last-child {
    margin: 0;
}
.img_detail {
    margin: 0 auto 15px;
    max-width: 400px;
    width: 93%;
}
.img_detail_02 {
    margin: 0 auto 15px;
    max-width: 300px;
    width: 60%;
}
.img_detail_03 {
    margin: 0 auto 15px;
    max-width: 150px;
    width: 30%;
}
@media only screen and (min-width: 768px) {
    .album_wrap {
        margin-bottom: 100px;
        padding: 75px 0 75px;
    }
    .album_wrap.first {
        padding-top: 75px;
    }
    .album_wrap.right {
        margin: 0 auto 100px;
    }
    .album_wrap.left {
        margin: 0 auto 100px;
    }

    .ttl_product {
        position: absolute; top: -100px; left: calc(50% - 125px);
    }
    .tag_album_01.product span {
        background: #fff;
    }
    .name_album {
        font-size: 30px;
        font-weight: 600;;
        line-height: 1.2;
        margin: 0 0 15px;
        text-align: center;
    }
    .price_wrap {
        line-height: 1;
        margin: 0 0 25px;
        text-align: center;
    }
    .price_wrap .num {
        display: inline-block;
        font-size: .6rem;
        margin: 0 10px 0 0;
    }
    .price_wrap .price {
        font-size: 15px;
        font-weight: 700;
    }
    .price_wrap .price span {
        font-size: .85rem;
    }
    .ttl_detail_01 {
        border-bottom: solid 1px #363636;
        font-size: 20px;
        margin: 0 auto 30px;
        padding: 0 0 10px;
    }
    .ttl_detail_01.size2 {
        max-width: 100%;
        text-align: left;
        width: 100%;
    }
    .ttl_detail_02 {
        margin: 0 auto 50px;
    }
    .ttl_detail_02.nowOpen {
        margin: 0 auto 25px;
    }
    .ttl_detail_02 span {
        padding: 0 0 0 1.4rem;
        position: relative;
    }

    .song_list_01 {
        margin: 0 auto 50px;
        max-width: 500px;
        width: 93%;
    }
    .song_list_01 li {
        border-bottom: solid 1px #ccc;
        line-height: 1.2;
        margin: 0 0 1rem;
        padding: 0 2% .2rem 2%;
    }
    .song_list_01 li:last-child {
        margin: 0;
    }
    .img_detail {
        margin: 0 auto 30px;
    }
    .img_detail_02 {
        margin: 0 auto 30px;
    }
}
.broslogo_01 {
    line-height: 0;
    margin: 0 auto 15px;
    width: 38.66%;
}
.txt_detail {
    margin: 0 auto 15px;
    max-width: 500px;
    width: 93%;
}
.txt_detail.small {
    font-size: .75rem;
}
.switchDetail {
    margin-bottom: 50px;
}

.ttl_special_01 {
    color: #ee0000;
    font-size: 1.1rem;
    margin: 0 0 15px;
    text-align: center;
}
.ttl_special_01 span {
    border: solid 1px #ee0000;
    padding: 1px 10px;
}
#fivetype,
#album01,
#album02,
#album03,
#album04,
#album05,
#early,
#movie,
#tracklist,
#product {
    scroll-margin-top: 80px;
}
#shop {
    scroll-margin-top: 110px;
}



.shop_wrap {
    background: url("../img/bg_store.jpg") repeat-y;
    background-size: contain ;
    margin-bottom: 100px;
    padding: 70px 0;
    position: relative;
    width: 100%;
}
.ttl_shop {
    max-width: 394.21px;
    position: absolute; top: -1.5%; left: 11.16%;
    width: 77.68%;
}
.ul_shop {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto 10px;
    width: 86%;
}
.ul_shop li:nth-child(odd) {
    padding: 0 5% 40px 0;
}
.ul_shop li {
    border-bottom: solid 1px #363636;
    box-sizing: border-box;
    margin-bottom: 5%;
    padding: 0 0 40px 5%;
    position: relative;
    text-align: center;
    width: 50%;
}
.ul_shop li::after {
    display: none;
}
.ul_shop li:nth-child(odd)::after {
    background: #363636;
    content: "";
    display: block;
    height: calc(100% - 20px);
    position: absolute; right: 0; top: 0;
    width: 1px;
}
.ul_shop li .ttl {
    font-size: .75rem;
    margin: 0 0 15px;
}
.ul_shop li .img {
    line-height: 0;
    margin: 0 0 10px;
}
.ttl_shop_01 {
    font-size: .85rem;
    margin: 0 0 1em;
    text-align: center;
}
.img_photocard {
    margin: auto;
    max-width: 200px;
    width: 40%;
}

@media only screen and (min-width: 768px) {
    .shop_wrap {
        margin-bottom: 200px;
        padding: 140px 0 70px;
    }
    .ul_shop {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0 auto 0px;
        max-width: 1000px;
    }
    .ttl_shop {
        position: absolute; top: -30px; left: calc(50% - 197.1px);
        width: 47%;
    }
    .ul_shop li:nth-child(odd) {
        padding: 0 5% 40px;
    }
    .ul_shop li {
        border-bottom: solid 1px #363636;
        box-sizing: border-box;
        margin-bottom: 5%;
        padding: 0 5% 40px;
        position: relative;
        text-align: center;
        width: 25%;
    }
    .ul_shop li::after {
        background: #363636;
        content: "";
        display: block;
        height: calc(100% - 20px);
        position: absolute; right: 0; top: 0;
        width: 1px;
    }
    .ul_shop li:nth-child(4n)::after {
        display: none;
    }
    .ul_shop li .ttl {
        font-size: .85rem;
        margin: 0 0 15px;
    }
    .ul_shop li .img {
        line-height: 0;
        margin: 0 0 10px;
    }
}



.ttl_tracklist {
    margin: 0 auto 40px;
    max-width: 442.7px;
    width: 69.21%;
}
.ul_tracklist {
    margin: 0 auto 100px;
    max-width: 442.7px;
    width: 86%;
}
.ul_tracklist li {
    margin: 0 0 20px;
}
.ul_tracklist li .ttl_wrap {
    padding: 0 20px 0 0;
    position: relative;
}
.ul_tracklist li .ttl_wrap h2 {
    font-weight: bold;
}
.ul_tracklist li .ttl_wrap h2 span {
    font-size: .85rem;
}
.ul_tracklist li .ttl_wrap .link {
    display: block;
    height: 1rem;
    position: absolute; right: 0; top: 0.2rem;
}
.ul_tracklist li .ttl_wrap .link img {
    height: 100%;
    width: auto;
}
@media only screen and (min-width: 768px) {
    .ul_tracklist {
        margin: 0 auto 200px;
    }
}




.ttl_streaming {
    margin: 0 auto 40px;
    max-width: 480px;
    width: 75%;
}
.ul_streaming {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto 0px;
    max-width: 442.7px;
    width: 86%;;
}
.ul_streaming li {
    line-height: 0;
    margin: 0 0 6%;
    width: 47%;
}
.ul_streaming.under {
    margin-bottom: calc(50px - 6%);
}
.ul_streaming li a:hover {
        opacity: .6;
}
@media only screen and (min-width: 768px) {
        .ul_streaming.under {
            margin-bottom: calc(150px - 6%);
        }
}



.contents_wrap {
    margin: 0 auto;
    max-width: 800px;
    width: 83%;
}
.img_kiai_01 {
    margin: 0 auto 1em;
    width: 80%;
}
.ttl_kiai {
    font-size: 1.42rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    margin: 0 auto 1em;
    width: 90%;
}
.ttl_kiai span {
    font-weight: normal;
    font-size: .85rem;
}
@media only screen and (min-width: 768px) {
        .img_kiai_01 {
            margin: 0 auto 1em;
            width: 100%;
        }
}

.ul_note {
    margin: 0;
}
.ul_note li {
    font-size: .85rem;
    margin: 0 0 .5em;
    max-width: 100%;
    padding: 0 0 0 1.3em;
    position: relative;
}
.ul_note li:before {
    content: "※";
    position: absolute; left: 0; top: 0;
}
.ul_disc li:last-child {
    margin: 0 0 0;
}

.fc_red {
    color: #9e0000;
}

.table_01 {
    border-collapse: collapse;
}
.table_01 td {
    border: solid 1px #ccc;
    padding: 10px;
}
.link_blue {
    color: #1558d6;
    text-decoration: underline;
}

.line_01 {
    background: #565656;
    border: none;
    display: block;
    height: .5px;
    margin: 0 auto 3em;
    width: 80%;
}