@charset "utf-8";



/*  ===============================
			ROOT
===============================*/


:root{
	font-size: 88%;
}


.inr{
	padding-left:  7vw;
	padding-right: 7vw;
}


/* init */

body{
	background-size: 50px;
}



/*  ===============================
			GLOBAL
===============================
container
header
navi
footer
other
*/

.Ghdr{
	position: static;
}

.Ghdr_inr{
	display: block;
}

.Glogo{
	position: fixed;
	z-index: 100;
	display: inline-block;
	width: fit-content;
	top:  var(--commonSidePadding);
	left: var(--commonSidePadding);
}

.Glogo_img{
	max-width: 150px;
}


.Gnavi{
	position: fixed;
	display: none;
	justify-content: space-between;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 100%;
	padding: 0 30px;
	background-color: #000c;
	opacity: 1;
	z-index: 100;
}
	.Gnavi::before,
	.Gnavi::after{
		display: none;
	}

	.is-open.Gnavi{
		display: flex;
		left: 0;
	}

.Gnavi_inr{
	opacity: 0;
	height: 100%;
	padding: 10vh 0;
	flex-wrap: wrap;
	align-items: center;
	align-content: space-around;
}


.Ghdr_sns{
	opacity: 0;
	padding-top: 30vh;
	flex-direction: column;
}

	.is-open .Gnavi_inr,
	.is-open .Ghdr_sns{
		animation: blinkOpacity 2s linear 0.5s forwards;
	}


	.Ghdr_sns .sns_item{
		margin-top: 1rem;	
	}



.Gnavi_item{
	width: 100%;
}
	.Gnavi_item_top{
		display: none;
	}

.Gnavi_anchor{
	display: block;
	width: 100%;
	padding: 0vw .5rem;
	color: #37BEF0;
	font-size: 40px;
	line-height: 1.2;
}





.menu_btn {
	position: fixed;
	right: 0;
	top: 0;
	display: block;
	width: 48px;
	height: 48px;
	background-color: #37BEF0;
	z-index: 500;
}




/*  ===============================
		  block , element
===============================*/

/* sec
===============================
.sec
.sec_hdr
.sec_ttl
.sec_ttlImg
.sec_body
.sec_ftr
*/

.sec{
	padding-top: 15vw;
	padding-bottom: 15vw;
}

	.sec:first-child{ padding-top:   20vw;}
	.sec:last-child{ padding-bottom: 30vw;}

	

.sec_hdr{
	margin-bottom: 5rem;
}
	.sec_hdr--release{
		margin-bottom: 7vw;
	}

	.sec_hdr--bonus{
		margin-bottom: 3vw;
	}

	.sec_hdr--digital{
		margin-bottom: 3vw;
	}

.sec_ttlImg{
	width: auto;
	height: 15vw;
	max-height: 80px;
}




/* btn
===============================
*/

.btn--logoIn{
	font-size: min( 18px , 3vw );
}


/* icon
===============================
*/

.icon{
	caret-color: transparent;
}
.icon--humberger{
	caret-color: transparent;
}

.icon--humberger,
.icon--humberger::before,
.icon--humberger::after,
.icon--close::before,
.icon--close::after{
	content: '';
	position: absolute;
	display: block;
	width: 25px;
	height: 2px;
	background-color: #111DAA;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	padding: 0;
	transition: .3s
}

.icon--humberger:before {
	margin-top: -8px;
}

.icon--humberger:after {
	margin-top: 8px;
}

.icon--close::before,
.icon--close::after {
	border-radius: 10px;
	opacity: 1;
}

.icon--close::before {
	transform: rotate(405deg);
}

.icon--close::after {
	transform: rotate(-405deg);
}



/* mv
===============================
*/


/* about
===============================
*/

.about{ display: block;}

.about_thumb{
	width: 80%;
	max-width: 380px;
	margin: 0 auto 3rem;
}

.about_dl{
	width: 100%;
	margin-left: 0;
	padding-left: 0;
}

.about_term{
	font-size: min( 22px , 4.5vw );
}

.about_desc{
	font-weight: 200;
	font-size: min( 16px , 3.8vw );
}


/* release
===============================
*/

.release_ttl{
	margin-top: 7vw;
	line-height: 1;
	font-size: min(50px,8.2vw);
}

.release_ttl span{
	padding-left: 0.2rem;
	font-size: min(28px,5.5vw);
}




/* product */

.product{
	max-width: 350px;
	margin: 5rem auto 0;
}
	.product--big{
		max-width: 500px;
		padding: 1rem 1.5rem 2.5rem;
	}

	.product:first-child{
		margin-top: 2rem;
	}

.product_ttl{
	font-size: min( 24px , 6vw );
}

	.product_ttl--big{
		text-align: center;
	}


	.product_ttl_special{
		display: block;
		width: 14em;
		margin-left: auto;
		margin-right: auto;
	}

.product_body{
	display: block;
	/* margin-bottom: 3rem; */
}
	.product_body{}



.product_bigLead{
	font-size: min( 28px , 5.8vw );
}

.product_lead{
	font-size: min(19px,4vw);
	font-weight: 400;
}






.product_thumbs{
	display: block;
	width: 100%;
	margin-bottom: 8vw;
	padding-right: 0;
}

.product_figure{
	display: block;
	max-width: 350px;
	margin: 0 auto 8vw;
	line-height: 1.8;
	font-size: min( 14px , 3.1vw );
}

	.product_figure--big{
		max-width: none;
	}

.product_caption{
	margin-bottom: 0;
	font-size: min( 14px , 3.1vw );
}

.product_price{
	font-weight: 300;
	font-size: min( 14px , 3.1vw );
}


.product_desc{
	width: 100%;
	/* margin-bottom: 5rem; */
	padding-left: 0;
}
	.product_desc--big{
		margin-bottom: 0;
	}

	.product_songs{
		column-count: 1;
	}

.product_desc_ftr{
	margin-top: 8vw;
}

.product_bullets{
	padding-left: 1rem;
}

	.product_bullet{
		text-indent: -1rem;
	}





/* live
===============================
*/




.live_ttl{
	margin-bottom: min( 4vw , 18px);
}
.live_ttl--big{
	margin-bottom: min( 1.5vw , 14px);

}
.live_ttl--small{
	margin-bottom: min( 3.5vw , 18px);
}



.live_date{
	font-size: min(8vw , 50px);
	margin-bottom: min(2vw,2rem);
}
.live_date span{
	font-size: min(5vw , 34px);
}
.live_location{
	font-size: min(5.5vw , 34px);
}
	
.live_cols{
	display: block;
	margin-bottom: 5vw;
}

.live_texts,
.live_ticket{
	width: 100%;
	max-width: 450px;
	margin-left: auto;
	margin-right: auto;
}


.live_texts{
	margin-bottom: min( 70px , 10vw );
	color: transparent;
	font-size: 14px;
}

.live_text{
	text-align-last: left;
}

.live_ticket{}

.live_anchor{
	max-width: 250px;
	padding: 0.5rem;
	margin-left: auto;
	margin-right: auto;
}

	.live_anchor--fes{
		font-size: min( 4vw , 20px );
	}


/* member card
===============================
*/

.member{
	/* 幅を基準に */
	--w: min( 76vw, 450px );
	--h: calc( var(--w) / var(--wRatio) );

	padding-bottom: 6rem;
}


.card_top img{
	width: calc( var( --w ) * ( 54.76 / 285.89 ) );
}

.card_right img{
	width: calc( var( --w ) * ( 17.6 / 285.89 ) );
}

.card_name{
	--length: 10px;
	padding: 5px var(--length);
	/* height: calc( var(--h) * ( 23 / 418.4 ) ); */
}

.card_song{
	--length: 15px;
	padding: 10px var(--length);
	/* height: calc( var(--h) * ( 56 / 418.4 ) ); */
}

.card_name img,
.card_song img{
	/* width: calc( var( --w ) * ( 17.6 / 285.89 ) ); */

	width: calc( var(--w) * ( var(--imageW) / 650 ) );
}

.card_navi{
	--m: calc( ( 100vw - var(--w) ) / 2 - ( 24px * var(--wRatio) ) - 7vw );
	width:  calc( 24px * var(--hRatio) );
	height: calc( 48px * var(--hRatio) );
}



/* swiper */

.swiper-pagination{
	max-width: 300px;
	left: 0;
	right: 0;
	margin: auto;
	padding: 0 7vw;
}


/* bouns
===============================
*/

.bonus_item{
	flex-basis: calc( 50% - 3vw );

	display: flex;
	flex-direction: column;
	justify-content: space-between;

	margin-bottom: 15vw;
	margin-left:  3vw;
	margin-right: 3vw;
}
	.bonus_item:nth-of-type(odd){
		margin-left: 0
	}

	.bonus_item:nth-of-type(even){
		margin-right: 0;
	}

.bonus_texts{
	margin-bottom: 5vw;
}


.bonus_shop{
	font-size: min(20px,3.7vw);
}

	.bonus_shop span.small{
		font-size: min(14px,3vw);
	}

.bonus_name{
	font-size: min(15px,3.2vw);
}

.bonus_detail{
	font-size: min(14px,3vw);
}


.bonus_btn_wrap{
	margin-bottom: 3vw;
}

.bonus_ftr_text{
	font-size: min(14px,3vw);
}


/* special */

.special{
	margin-top: 15vw;
}

	.special:first-child{
		margin-top: 0;
	}

	.special_hdr{
		margin-top: 2rem;
		margin-bottom: 2rem;
	}

.special_lead{
	font-size: min(20px,4vw);
}

.special_body{
	font-size: min(16px,3.6vw);
	line-height: 1.6;
}

.special_ttl{
	font-size: min(28px,6vw);
}

.special_ttl::after,
.special_ttl::before{
	width:  1em;
	height: 1em;
}

.special_note{
	font-size: min(14px,3vw);
}


.special_thumbs{
	display: block;
}

.special_thumbs:nth-of-type(2){
	transition-delay: .6s;
}
.special_thumbs:nth-of-type(3){
	transition-delay: .9s;
}


.special_thumb{
	margin-bottom: 3vw;
}




/* digital
===============================
*/



/* single */
.single{
}
.single_hdr{}

.single_ttl{
	font-size: min(40px,7vw);
}
.single_artist{
	font-size: min(25px,4vw);
}
.single_thumb{
	margin-top: 2rem;
}

.single_img{
	max-width: 600px;
}

.single_ftr{
	margin-top: 2rem;
}
.single_btn_wrap{
}
.single_anchor{
	font-size: min(16px,5vw);
}




/*  ===============================
			loading
===============================*/

/* timing
===============================
1.background gradient and animation
2.cvg + animation @link https://svgartista.net/
3.

*/

.gradient_bg--front{
	background: radial-gradient(circle closest-corner at center , rgb(13 117 205) 5%, rgb(0 78 187) 20%, rgba(0,0,0,0) 110%);
	background-position: center;
}

@keyframes loading_bg_gradient {
	to{
		background-size: 200%;
	}
	from{
		background-size: 130%;
	}
}


.svg-logo{
	width: 80vw;
	min-width: 245px;
	margin-left: 6vw;
}