@charset "utf-8";



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

/* variable
===============================
	--bigInrMaxW -
	--cntInrMaxW - pc時inrのmaxwidth inr
*/



/* 1200px < window */
:root{
	--windowMinW: 1160px;
	--windowMaxW: none;
	--cntInrMaxW: 1160px;
	--bigInrMaxW: 1200px;

	--commonSidePadding: 20px;

	color: #FFF;
	letter-spacing: 1px;
	line-height: 1.8;
	--navyTextColor: #0C0D60;
}

:root[lang="ja"] {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}



html,
body,
.loading{
	max-width: var(--windowMaxW);
	min-width: var(--windowMinW);

}

.Ghdr,
.mv,
.main{
	min-width: var(--windowMinW);
}


.inr{
	max-width: var(--cntInrMaxW);
	margin-left: auto;
	margin-right: auto;
}

.inr--mid{
	padding-right: 40px;
	padding-left: 40px;
}

.inr--big{
	max-width: var(--bigInrMaxW);
	margin-left: auto;
	margin-right: auto;
}





/* window = 1025px ~ 1199px */
@media screen and (min-width: 1025px) and (max-width: 1199px) {
	:root{
		--windowMinW: 1200px;
		--windowMaxW: 100%;
		--cntInrMaxW: 1024px;
		--bigInrMaxW: 1200px;
	}
}

/* window = 769px ~ 1024px */
@media screen and (min-width: 769px) and (max-width: 1024px) {
	:root{
		--windowMinW: 1024px;
		--windowMaxW: 100%;
		--cntInrMaxW: 960px;
		--bigInrMaxW: 1024px;
	}
}

/* window < 768px */
@media screen and (max-width: 768px) {
	:root{
		--windowMinW: none;
		--windowMaxW: 100%;
		--cntInrMaxW: 640px;
		--bigInrMaxW: 100%;
	}


	.inr--mid{
		padding-right: 0;
		padding-left: 0;
	}


}


/* init */

body{
	position: relative;
	background: url(../images/bg_body.svg) repeat center /100px #0C0D60;
	z-index: -1;
}



/* fade init */

.sec{}
.fade.is-show,
.sec.is-show{
	animation: fadeInToTop 1s forwards;
	will-change: opacity , transform , animation;
}



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


/* header
===============================
Ghdr
*/


@media screen and (min-width:769px) {
	.Ghdr{
		position: fixed;
		padding-top: 2rem;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
	}
}


.Ghdr_inr{
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--commonSidePadding);

	display: flex;
	justify-content: space-between;
	align-items: center;
}


@media screen and (min-width:769px) {
	.Ghdr_sns{
		display: none !important;
	}
}

@media screen and (min-width:769px) {
	.Ghdr_item{
		opacity: 0;
		animation: fadeInToTop 3s cubic-bezier(0.47, 0, 0.745, 0.715) 2s forwards;
	}	
}


/* navi
===============================
Gnavi
*/

.Gnavi{
	position: relative;
}
	.Gnavi::before,
	.Gnavi::after{
		content: "";
		position: absolute;
		bottom: -10px;
		left: 0px;
		height: 4px;
	}

	.Gnavi::before{
		width: 100%;
		height: 2px;
		background-color: #999999cc;

	}
	.Gnavi::after{
		width: var(--afterW);
		transform: translate( var(--afterX) );
		height: 4px;
		background-color: #FFF;
		transition: .4s ease-in-out 0s;
	}


.Gnavi_inr{
	display: flex;
}
.Gnavi_item{
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
}
.Gnavi_anchor{
	padding: 1rem .5rem;
	cursor: pointer;
}

.Gnavi_img{
	width: auto;
	height: 24px;
}



/* footer
===============================
Gftr
*/

.Gftr{
	padding: 2rem 0;
	background-color: #000;
}

.Gftr_inr{
	
}


.Gftr_copy{
	text-align: center;
	font-size: 12px;
}

/* other
===============================
Glogo
*/

@media screen and (min-width:769px) {
	.Glogo_img{ width: 50%;}
}



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


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

.sec{
	min-height: 5rem;
	padding-top:    7.5rem;
	padding-bottom: 7.5rem;
}
	.sec:first-child{ padding-top:   12rem;}
	.sec:last-child{ padding-bottom: 20rem;}


.sec_hdr{
	text-align: center;
	margin-bottom: 4.5rem;
}
	.sec_hdr--soon{
		margin-bottom: 0;
	}


.sec_ttlImg{ width: auto;}
/* sp専用 .sec_ttlImg--short{} */

.sec_ttl{
	margin-top: 4rem;
	text-align: center;
	font-size: 53px;
	font-weight: bold;
	font-family: 'Oswald', sans-serif;
}

	.sec_ttl--img{
		margin-top: 0;
		font-size: 0;
	}




.sec_ttl--soon{
	font-size: 50px;
	font-weight: 200;
}

.sec_body{}
.sec_ftr{}




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

.btn{
	cursor: pointer;
	caret-color: transparent;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: .5rem;
	text-align: center;
	color: #FFF;
	font-family: 'Oswald', sans-serif;
	background-color: #37BEF0;
	transition: .3s;
}

.btn:hover{
	filter: brightness(1.1);
}



.btn--logoIn{
	font-size: 18px;
	font-weight: 300;

	--bgSize: 2em;
}


	.btn--logoIn::after{
		content: "";
		display: block;
		width: var(--bgSize);
		height: var(--bgSize);
		margin-left: 1em;
		background: url(../images/btn--logoInAfter.png) center /contain;
		transition: .3s;
	}

	.btn--logoIn:hover::after{
		animation: runRotate 1s linear infinite forwards
	}

	@keyframes runRotate {
		from{ transform: rotate(0deg)}
		to{ transform: rotate(360deg)}
	}

.btn--round{
	border-radius: 10px;
	--bgSize: .8em;
}

	.btn--blank::after{
		content: "";
		display: inline-block;
		width: var(--bgSize);
		height: var(--bgSize);
		margin-left: 1em;
		background: url(../images/btn--blank.svg) center /contain;
	}





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

.mv_wrap{

	position: relative;
	height: 100vh;
	background-color: #000;
}


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

.about{
	display: flex;
}
.about_thumb{
	position: relative;
	width: 33.3%;
	z-index: 1;
}

.about_thumb::after{
	content: "";
	display: block;

	width: 100%;
	padding-top: 100%;
	background-color: #0F0F0F99;
	border-radius: 6px;
	z-index: 0;
}


.about_frame,
.about_logo{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto
}

.about_logo{
	width: 55%;
}

.about_dl{
	width: 66.6%;
	padding-left: 15%;
}

.about_term{
	font-size: 24px;
	font-weight: 500;
	margin-bottom: 1.5rem;
}
.about_desc{
	font-size: 17px;
	font-weight: 300;
}


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

.release_ttl{
	color: #37BEF0;
	font-size: 72px;
}

.release_ttl span{
	padding-left: 0.5rem;
	font-size: 42px;
	font-weight: 300;
}


/* product */

.product{
	margin-top: 5rem;
}

.product--big{
	padding: 2.5rem 3rem;
	color: #0f0f0f;
	background-color: rgba(255, 255, 255, .75);
}

.product_ttl{
	margin-bottom: .5rem;
	font-size: 24px;
	font-weight: bold;
	font-family: 'Oswald', sans-serif;
}
	.product_ttl--big{
		margin-bottom: 2rem;
		color: var(--navyTextColor);
	}
	
	.product_ttl_special{
		display: inline-block;
		width: auto;
		padding: 0 .3rem;
		color: #FFF;
		background-color: var(--navyTextColor);
		font-size: min( 20px , 3.5vw );
	}


.product_body{
	display: flex;
}
.product_thumbs{
	display: flex;
	width: 50%;
	padding-right: 1.5rem;
}
	.product_thumbs--big{
		display: block;
		width: 60%;
	}
.product_figure{}

@media screen and (min-width:768px) {
	.product_figure{
		margin-right: 1.5rem;
	}
	.product_figure:last-child{
		margin-right: 0;
	}
}

.product_img{
	margin-bottom: 1rem;
}

	.product_img--big{
		margin-bottom: 0;
	}

.product_caption{
	font-weight: bold;
	/* margin-bottom: .5rem; */
	font-size: 11px;
}
.product_price{
	font-weight: 300;
	font-size: 11px;
}

.product_desc{
	width: 50%;
	display: flex;
	flex-direction: column;
	padding-left: 1.5rem;
	font-size: 14px;
	font-weight: 300;
}
	.product_desc--big{
		display: block;
		width: 40%;
		margin-bottom: 3rem;
	}

.product_desc_ftr{
	margin-top: 3.5rem;
}


.product_bigLead{
	display: inline-block;
	width: auto;
	margin-bottom: 1rem;
	line-height: 1.6;
	font-size: 36px;
	font-weight: bold;
	border-bottom: 3px solid #37BEF0
}

.product_lead{
	font-size: 23px;
	font-weight: bold;
}



.product_desc_hdr{
	position: relative;
	display: flex;
	font-size: 15px;
	align-items: center;
}

.product_desc_hr{
	display: inline-block;
	width: 100%;
	margin-left: 1rem;
	border-top: 0;
	border-bottom-width: 1px;
}
.product_desc_ttl{
	display: inline-block;
	width: auto;
	white-space: nowrap;
	font-weight: bold;
}

.product_songs{
	column-count: 2;
}

.product_song span{
	font-weight: 300;
}

.product_bullets{
	margin-bottom: 2rem;
	font-weight: bold;
}

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

.product_ftr_text{
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.product_ftr_text{
	margin-top: 2rem;
	font-size: min( 14px , 3vw );
	font-weight: 200;
}

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

.live_ttls{
	line-height: 1;
}

.live_ttl,
.live_ttl--big,
.live_ttl--small,
.live_ttl--stage{
	text-align: center;
}

.live_ttl{
	margin-bottom: 1.2rem;
}
.live_ttl--big{
	margin-bottom: .8rem;

}
.live_ttl--small{
	margin-bottom: 1.2rem;
}
.live_ttl--stage{
	margin-bottom: 2rem;
}


.live_ttl img{
	max-height: min(48px,6vw);
}
.live_ttl--big img{
	max-height: min(80px,8.5vw);
}
.live_ttl--small img{
	max-height: min(34px,4.5vw);
}
.live_ttl--stage img{
	max-height: min(70px,8.5vw);
}

.live_date,
.live_location{
	line-height: 1;
	font-family: 'Oswald', sans-serif;
}

.live_date{
	margin-bottom: 2rem;
	text-align: center;
	font-size: 55px;
	font-weight: 500;
}
.live_date span{
	font-size: 34px;
	font-weight: 400;
}

.live_location{
	margin-bottom: 3rem;
	text-align: center;
	font-size: 40px;
	font-weight: 500;
}

.live_cols{
	display: flex;
	margin-bottom: 5rem;
}

@media screen and (min-width:769px) {
	.live_cols{
		padding: 0 4rem;
	}


	.live_texts{
		width: 60%;
		font-size: 15px;
		font-weight: 500;
	}
	.live_ticket{
		width: 40%;
		padding-left: 2rem;
	}
}


.live_texts{
	text-align: center;
}
.live_text{}

.live_ticket{

}

.live_anchor {
	padding: 0.8rem;
}

.live_fesLink{
	font-size: 27px;
	font-weight: 500;
	text-align: center;
}

.live_anchor{}
	.live_anchor--fes{
		display: inline-block;
		width: auto;
		font-size: 27px;
		font-weight: 500;
		padding-left: 2rem;
		padding-right: 2rem;
	}


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

.member{
	padding: 4rem 0 6rem;
	background-color: rgba(0,0,0,.4);
	/* card背景のキャンバスサイズ */
	--wRatio: ( 452 / 662 );
	--hRatio: ( 662 / 452 );
	/* 高さを基準に */

	--w: 452px;
	--h: 662px;

	/*
	--w: calc( var(--h) / var(--hRatio) );
	--h: min(80vh);
	*/
}






/* card */


.card_wrap{
	overflow: hidden;
}
	.is-kill.card_wrap{
		display: none;
	}

.card_cate_list{
	display: flex;
	justify-content: center;
	width: auto;
	margin: auto;
	padding: 1rem;
	text-align: center;
}
.card_cate_item{
	--accentColor: #FFF;
	display: inline-block;
	width: auto;
	padding: .8em 1.5em;
	color: var(--accentColor);
	border: 1px solid var(--accentColor);
	line-height: 1;
}

	.card_cate_item:not(:first-child){
		margin-left: 1rem;
	}
	.card_cate_item:not(.is-active){
		background-color: transparent;
	}

@media screen and (min-width:769px) {
	.card_cate_item:not(.is-active):hover{
		--accentColor: #37BEF0;
	}
}



.card{
	--bottom: 25px;
	position: relative;
	width:  var(--w);
	height: var(--h);
	margin: auto;
	background: url(../images/card/card_bg.png) no-repeat center /contain;
}

.card_chara{
	position: absolute;
	width: 100%;
	z-index: 10;
	filter: brightness(0) ;
	transform: scale(.8);
}

.card_chara:first-child{
	z-index: 11;
}

.is-show .swiper-slide-active .card_chara{
	filter: brightness(1);
	transform: scale(1);
	transition:
		filter .4s var(--function) 1.5s,
		transform 1s var(--function) 1.0s;
}

/* or01 */
.card_chara--or01{
	left: -3%;
}

/* or02 */
.card_chara--gawr{
	left: 19%;
}

.card_chara--hakos{
	left: -19%;

}


.is-show .swiper-slide-active .card_chara--or02{

}
.is-show .swiper-slide-active .card_chara--gawr{
	transform: translateY(-2%) scale(.88) ;
}
.is-show .swiper-slide-active .card_chara--hakos{
	transform: translateY(-2%) scale(.93) ;
}







/* cv01 */

.card_chara--cv01{
	top: 1.5%;
}

.card_chara--choco{
	left: -18%;
}

.card_chara--mel{
	left: 19%;
}

/* cv03 */

.card_chara--koyori{
	top: 4%;
	left: -20%;
}

.card_chara--mio{
	top: -2%;
	left: 15%;
}
.is-show .swiper-slide-active .card_chara--koyori,
.is-show .swiper-slide-active .card_chara--mio{
	transform: scale(.93) ;
}


/* cv03 */
.card_chara--hoshinova{
	left: -5%
}

/* cv07 */
.card_chara--kiara{
	top: 2.5%;
	left: -17%;
}
.card_chara--mumei{
	top: -7%;
	right: 24%;
}

.is-show .swiper-slide-active .card_chara--kiara,
.is-show .swiper-slide-active .card_chara--mumei{
	transform: scale(.94) ;
}



/* or06 */
.card_chara--miko{
	left: -23%;
}
.card_chara--pekora{
	left: 20%;
}


/* or08 */
.card_chara--lamy{
	left: -15%;
}

.card_chara--lui{
	left: 15%;
}




.card_chara--mumei{
	left: -7%;
}








.card_top{
	position: absolute;
	z-index: 15;
	top:  calc( 22px / var(--hRatio));
	left: calc( 22px / var(--hRatio));
	clip-path: inset(100% 0 0 0);
}

.card_top img{
	width: calc( 130px / var( --hRatio ) );
}

.card_right{
	position: absolute;
	margin-left: auto;
	top: calc( 22px / var( --hRatio ) );
	right: calc( 22px / var( --hRatio ) );
	z-index: 15;
	clip-path: inset(0 0 100%  0);
}
.card_right img{
	width: calc( 41px / var( --hRatio ) );
}

.card_bottom{
	position: absolute;
	left: 0;
	bottom: var(--bottom);
	z-index: 15;
	clip-path: inset(0 100% 0 0);
}

.card_copy{
	position: absolute;
	width: 27%;
	bottom: var(--bottom);
	right: calc( 22px / var( --hRatio ) );
	z-index: 15;
	clip-path: inset(0 100% 0 0);
}

.card_copy img{
	object-fit: contain;
}

.card{
	--bottom: 3%;
	--duration: .3s;
	--function: cubic-bezier(0.37, 0, 0.63, 1);
	--delay   : .5s;
}

.swiper-slide-active .card_top{			transition: var(--duration) var(--function) calc( var(--delay) + .3s);}
.swiper-slide-active .card_right{		transition: var(--duration) var(--function) calc( var(--delay) + .0s);}
.swiper-slide-active .card_name{		transition: var(--duration) var(--function) calc( var(--delay) + .5s);}
.swiper-slide-active .card_song{		transition: var(--duration) var(--function) calc( var(--delay) + .6s);}
.swiper-slide-active .card_name img{	transition: var(--duration) var(--function) calc( var(--delay) + .9s);}
.swiper-slide-active .card_song img{ transition: var(--duration) var(--function) calc( var(--delay) + 1.0s);}
.swiper-slide-active .card_copy{		transition: var(--duration) var(--function) calc( var(--delay) + .3s);}


.card_top,
.card_right,
.card_name,
.card_song,
.card_bottom img,
.card_copy{
	transition: 0s;
}

.is-show .swiper-slide-active .card_top,
.is-show .swiper-slide-active .card_bottom,
.is-show .swiper-slide-active .card_right,
.is-show .swiper-slide-active .card_bottom img,
.is-show .swiper-slide-active .card_copy{
	clip-path: inset(0);
}

.is-show .swiper-slide-active .card_name,
.is-show .swiper-slide-active .card_song{
	clip-path: polygon(0 0, calc( 100% - var(--length) ) 0%, 100% calc( 0% + var(--length)  ), 100% 100%, 0 100%);
}

@media screen and (min-width:769px) {
	.swiper-pagination{
		bottom: 2rem !important;
	}
}

.swiper-pagination-bullet{
	background-color: #CCCC;
	opacity: 1;
}
.swiper-pagination-bullet-active{
	background-color: #37BEF0;
}


.card_name{
	--length: 15px;
	padding: calc( var(--length) / 2 ) var(--length);
	background: no-repeat left center /cover;
	clip-path: polygon(0 0, 0 0, 0 10px, 0 100%, 0 100%);
	background-size: 100%;
}
.card_song{
	--length: 20px;
	padding: 10px var(--length);
	background: no-repeat left center /contain;
	clip-path: polygon(0 0, 0 0, 0 10px, 0 100%, 0 100%);
	background-color: #00000099;
}

.card_name,
.card_song{
	width: fit-content;
	line-height: 1;
}

.card_name img{
	--imageW: ;	/* jsで設定 */
}
.card_song img{
	--imageW: ;	/* jsで設定 */
	background-size: contain;
}


.card_name img,
.card_song img{
	width: calc( 1px * var(--imageW) * var(--wRatio) );
	object-fit: contain;
	clip-path: inset(0 100% 0 0);
	vertical-align: middle;
}


.card_navi{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	width:  calc( 70px	/ var(--hRatio) );
	height: calc( 141px	/ var(--hRatio) );
	z-index: 20;
	--m: calc( ( 100vw - var(--w) ) / 2 - ( 70px / var(--hRatio) ) - 2rem );
	cursor: pointer;
	transition: .3s;
}

@media screen and (min-width:769px) {
	.card_navi:hover{
		opacity: 0.7;
	}
}
.card_next{
	right: var(--m);
	transform: scaleX(-1);
}
.card_prev{
	left:  var(--m);
}



/* bonus
===============================
*/

.bonus_list{
	margin-top: 4.5rem;
	display: flex;
	flex-wrap: wrap;
}

.bonus_item{
	flex: 0 0 calc( ( 100% - ( 1.7rem * 4) ) / 3 );
	
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	margin-bottom: 5rem;
	margin-left:  1.7rem;
	margin-right: 1.7rem;
}

@media screen and (min-width:769px) {
	.bonus_item:nth-of-type(3n+1){
		margin-left: 0
	}

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


.bonus_texts{
	width: 100%;
	line-height: 1.6;
	margin-bottom: 2rem;
}
.bonus_btn_group{
	width: 100%;
}

.bonus_shop{
	line-height: 1.3;
	font-size: 22px;
	font-weight: 500;
	color: #37BEF0;
	word-break: break-word;
}
	.bonus_shop span.small{
		font-size: .7em;
		line-height: 1.2;
	}

.bonus_name{
	margin-top: .5rem;
	font-size: 17px;
	font-weight: 400;
}
.bonus_detail{
	margin-top: .3rem;
	font-size: 12px;
}

.bonus_shop,
.bonus_name,
.bonus_detail{
	text-align: center;
}
	.bonus_shop:first-child,
	.bonus_name:first-child,
	.bonus_detail:first-child{}

	.bonus_shop span,
	.bonus_name span,
	.bonus_detail span{
		display: inline-block;
	}

.bonus_btn_wrap{
	margin-bottom: 1.5rem;

}
.bonus_btn_wrap:last-child{
	margin-bottom: 0;
}

.bonus_ftr_text{
	font-size: 14px;
	font-weight: 200;
	text-align: center;
}


/* special */



@media screen and (min-width:769px) {
	.special{ margin-top: 7.5rem;}
	.special:first-child{ margin-top: 5rem;}
}


.special_hdr{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 2rem;
	padding: 0.5rem 0;
}

.special_ttl{
	position: relative;
	font-size: 30px;
	font-weight: bold;
	color: #37BEF0;
}
	.special_ttl::after,
	.special_ttl::before{
		content: "";
		position: relative;
		display: inline-block;
		width: 32px;
		height: 32px;
		background: url(../images/bonus_ttl_pseudo.svg) center /contain no-repeat;
	}
	.special_ttl::before{
		top: -1rem;
		margin-top: -0.5rem;
		margin-right: -0.5rem;
	}

	.special_ttl::after{
		bottom: -1rem;
		margin-bottom: -0.5rem;
		margin-left: -0.5rem;
		transform: scale(-1)
	}

.special_body{
	margin-bottom: 3rem;
	text-align: center;
	font-weight: 400;
	line-height: 2.2;
}

	.special_body:last-child{
		margin-bottom: 0;
	}


@media screen and (min-width:769px) {
	.special_body p{ text-align: center;}
}

.special_lead{
	display: inline-block;
	width: auto;
	margin: auto;
	font-size: 23px;
}

.special_lead span.border{
	margin-right: 1rem;
	margin-bottom: .5rem;
	padding: .3rem .8rem;
	border: 1px solid #FFF;
}

.special_lead span{
	display: inline-block;
}


.special_notes{
	margin-top: 1.5rem;
}

.special_note{
	font-size: 14px;
	font-weight: 200;
}


.special_thumbs{
	display: flex;
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

.special_thumb{
	margin-right: 2rem;
}

	.special_thumb:last-child{
		margin-right: 0;
	}



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



/* single */
.single{
}
.single:not(:first-child){
	margin-top: 5rem;
}

.single_hdr{
	
}
.single_ttl{
	font-size: 43px;
	font-weight: bold;
	text-align: center;
}
.single_artist{
	font-size: 27px;
	text-align: center;
}
.single_thumb{
	margin-top: 2rem;
	text-align: center;
}

.single_img{
	max-width: 600px;
}

.single_ftr{
	margin-top: 2rem;
}
.single_btn_wrap{
}
.single_anchor{
	max-width: 380px;
	margin-left: auto;
	margin-right: auto;
}


/* movie
===============================
*/


.playBox{
	max-width: 788px;
}


/* 


.playBox{
	position: relative;
	cursor: pointer;
	caret-color: transparent;
}

.playBox::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: url(../images/movie_playLogo.svg) no-repeat center /contain;
	width: 25%;
	z-index: 1;
}

.playBox.is-active.playBox::after,
.playBox.is-active .playBox_thumb,
.playBox.is-active .playBox_thumb::after{
	display: none;
	opacity: 0;
	visibility: hidden;
}


.playBox_thumb{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 1;
}
	.playBox_thumb::after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		background-color: #555555cc;
		z-index: 2;
	}


	.is-active{

	}

.playBox:hover::after{
	animation: runRotate 3s linear infinite forwards
} */





/* sns */

.sns_list{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 1.5rem;
}

.sns_item{
	padding: 0 .5rem;
}
.sns_anchor{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	padding: .2rem;
	border-radius: 100px;
	border: 1px solid #37BEF0
}
.sns_img{
	width: auto;
}

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

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

*/



.animation_blink{
	opacity: 0;
	animation: blinkOpacity 2s linear 0s infinite;
}



@keyframes blinkOpacity {
	0.0%,
	2.9%,
	4.0%,
	6.9%,
	8.0%,
	100%{
		opacity: 1;
	}
	3.0%,
	3.5%,
	7.0%,
	7.5%{
		opacity: 0;
	}
}




.loading{
	overflow: hidden;
	position: absolute;
	height: 100vh;
	/* max-height: 741px; */
}
.loading_cnt{
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.loading_arrow{
	width: 60%;
}
.loading_num{
	width: 20%;

	/* 仮 */
	width: 24%;
	margin-top: 4rem;
    padding-left: 5rem;
}


.loading_text{
	font-size: 200px;
	text-align: center;
	color: #FFF;
}
.loading_bg{
	width: 100%;
	max-width: none;
}


/* mv & loading */
.gradient_bg{
	position: relative;
	background: #000;
	z-index: 0;
}

.gradient_bg--front{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	opacity: 1;
	background: radial-gradient(circle closest-corner at center , rgb(13 117 205) 2.5%, rgb(0 78 187) 10%, rgba(0,0,0,0) 45%);
	background-position: center;
	background-repeat: no-repeat;
 	animation: loading_bg_gradient 3s ease-in infinite alternate forwards;
}


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



/* svg */

.svg-logo{
	width: 100%;
	max-width: 600px;
	text-align: center;
	fill: #FFF;
}

.svg-logo_colored{ fill: #3cade4;}

.svg-logo_arrow{
	--duration: .3s;
	--delay: .2s;
	--easing: cubic-bezier(0.47, 0, 0.745, 0.715);
}

.svg-logo_num,
.svg-logo_flower{
	animation-delay: 2.5s;
}




.svg-logo_arrow--top    { animation: fadeFill var(--duration) var(--easing) calc( 0s + var(--delay) ) both;}
.svg-logo_arrow--right  { animation: fadeFill var(--duration) var(--easing) calc( .4s + var(--delay) ) both;}
.svg-logo_arrow--bottom { animation: fadeFill var(--duration) var(--easing) calc( .6s + var(--delay) ) both;}

@keyframes fadeFill {
	from { fill: transparent;}
	to   { fill: #3cade4;}
}





/* show from left to right  */
.show_sec_ttl,
.show_clip{
  clip-path: inset(0 100% 0 0);
  transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1) .3s;
  transition-property: clip-path;
}

.show_clip{ transition-delay: .8s;}

.show_clip:nth-of-type(2){ transition-delay: 1s;}
.show_clip:nth-of-type(3){ transition-delay: 1.2s;}



.sec.is-show .show_sec_ttl,
.sec.is-show .show_clip {
  clip-path: inset(0);
}




.mask-bg {
	position: relative;
	overflow: hidden;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	color: transparent;
	transition: color 0ms 450ms;
}
.mask-bg::after {
	content: '';
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	right: 0;
	top: 0;
	background-color: #3cade4;
	transform: translate(0, 100%);
}

.is-show.mask-bg {
  color: #FFF;
}

.is-show.mask-bg::after {
  animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1) forwards;
}

.is-show.mask-bg:nth-of-type(2)::after{ animation-delay: .125s;}
.is-show.mask-bg:nth-of-type(3)::after{ animation-delay: .25s;}



@keyframes mask-bg {
  0% {
    transform: translate(0, 102%)
  }
  40%, 60% {
    transform: translate(0, 0%)
  }
  100% {
    transform: translate(0, -102%)
  }
}






.main{
	overflow: hidden;
	position: relative;
}

.bodyObj:nth-of-type(1n){ --i: 1}
.bodyObj:nth-of-type(2n){ --i: 9}
.bodyObj:nth-of-type(3n){ --i: 4}
.bodyObj:nth-of-type(4n){ --i: 8}
.bodyObj:nth-of-type(5n){ --i: 3}
.bodyObj:nth-of-type(6n){ --i: 7}
.bodyObj:nth-of-type(8n){ --i: 6}
.bodyObj:nth-of-type(9n){ --i: 5}

.bodyObj{
	position: absolute;
	animation: blinkOpacity calc( 1.5s + 0.1s * var(--i)) linear calc( 0.3s * var(--i) ) infinite;
	z-index: -1;
	--bodyObj: calc( ( 100vw - var(--cntInrMaxW) ) / 2 );
}

.bodyObj.l{ left:  calc( var(--bodyObj) - 50px)}
.bodyObj.r{ right: calc( var(--bodyObj) - 50px)}

.bodyObj.l.colx2{ left:  calc( var(--bodyObj) - 10px)}
.bodyObj.r.colx2{ right: calc( var(--bodyObj) - 10px)}

.bodyObj.l.colx3{ left:  calc( var(--bodyObj) + 30px)}
.bodyObj.r.colx3{ right: calc( var(--bodyObj) + 30px)}


.bodyObj.triangle,
.bodyObj.ranturn{
	width:  30px;
	height: 30px;
}

.bodyObj.circle,
.bodyObj.plus{
	width:  20px;
	height: 20px;
}

.bodyObj.morse{
	width:  40px;
	height:  2px;
}
.bodyObj.dots{
	width:   8px;
	height: 22px;
}

@media screen and (min-width: 1025px) and (max-width: 1199px) {
	.bodyObj.l{ left:  calc( var(--bodyObj))}
	.bodyObj.r{ right: calc( var(--bodyObj))}

	.bodyObj.l.colx2{ left:  calc( var(--bodyObj))}
	.bodyObj.r.colx2{ right: calc( var(--bodyObj))}
}


@media screen and (min-width: 769px) and (max-width: 1024px) {
	.bodyObj{ --bodyObj: calc( 0px );}

	.bodyObj.l{ left:  calc( var(--bodyObj) + 20px)}
	.bodyObj.r{ right: calc( var(--bodyObj) + 20px)}

	.bodyObj.l.colx2{ left:  calc( var(--bodyObj) + 45px)}
	.bodyObj.r.colx2{ right: calc( var(--bodyObj) + 45px)}


	.bodyObj.triangle,
	.bodyObj.ranturn{
		width:  26px;
		height: 26px;
	}
	
	.bodyObj.circle,
	.bodyObj.plus{
	}
	
	.bodyObj.morse{
		width:  30px;
		height:  1px;
	}
	.bodyObj.dots{
		width:   6px;
		height: 18px;
	}

}


@media screen and (max-width: 768px) {
	.bodyObj.l{ left:  calc( 3vw ) }
	.bodyObj.r{ right: calc( 3vw ) }

	.bodyObj.l.colx2{ left:  calc( -30px + 3vw )}
	.bodyObj.r.colx2{ right: calc( -30px + 3vw )}
}




.bodyObj.rotate{ right: 20px}

.bodyObj.triangle{	background: url(../images/bodyObj_triangle.svg);	animation: blinkOpacity 2s linear calc( 0.1s * var(--i ) ) infinite , runAndStopRotate 3s linear 0s infinite }
.bodyObj.circle{	background: url(../images/bodyObj_circle.svg);		animation: blinkOpacity 2s linear calc( 0.1s * var(--i ) ) infinite , runRotate 5s linear 0s infinite }
.bodyObj.plus{		background: url(../images/bodyObj_plus.svg);}
.bodyObj.dots{		background: url(../images/bodyObj_dots.svg);}
.bodyObj.morse{		background: url(../images/bodyObj_morse.svg);}
.bodyObj.ranturn{	background: url(../images/bodyObj_ranturn.svg);}

@keyframes runAndStopRotate{
	0%{  transform: rotate( 0 )}
	3%{ transform: rotate( 360deg )}
	100%{ transform: rotate( 360deg)}
}