@charset "utf-8";



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

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


img{
	width: auto;
}


/* 1200px < window */
:root{
	--windowMinW: 1024px;
	--windowMaxW: none;
	--cntInrMaxW: 1160px;
	--bigInrMaxW: 1200px;
	--secBodyWidth: 960px;
	--InrSideOffset: calc( ( 100vw - var(--secBodyWidth) ) / 2 );

	/* for js */
	--cntWidth: ;
	--windowWidth: ;

	--commonSidePadding: 80px;
	--sans-serif: 'Noto Sans JP', sans-serif;
	--serif: 'Noto Serif JP', serif;
	--en: 'Oswald', sans-serif;;

	--primaryColor: #9D0005;
	--textColor: #0F0F0F;

	font-size: 10px;
	font-family: var(--sans-serif);
	color: var(--textColor);
	letter-spacing: 1px;

	background-color: #CED5D6;
}

body{ font-size: 16px;}


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

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


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




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

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

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

	.inr{
		padding-left:  var(--commonSidePadding);
		padding-right: var(--commonSidePadding);
	}

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



/* init */

body{
	position: relative;
	overflow-x: hidden;
}



/* fade init */

.sec img.is-show{
	opacity: 1;
	transition: 1s ease;
}

.sec img{ opacity: 0;}

.sec{ opacity: 0;}

.sec.is-show{
	--y: 200;
	--x: 200;
	animation: fadeInToTop 1s forwards 0s;
	will-change: opacity , transform , animation;
}

.sec--toRight.is-show{ animation: fadeInToRight 1.2s ease-out forwards 0s;}
.sec--toLeft.is-show{  animation: fadeInToLeft  1.2s ease-out forwards 0s;}


.sec--toLeft .sec_inr,
.sec--toRight .sec_inr{
	--x: 50;
	opacity: 0;
}

.sec--toLeft.is-show .sec_inr,
.sec--toRight.is-show .sec_inr{
	animation: fadeInToTop 1.5s forwards .3s;
}



/*  ===============================
	animation & transition
===============================*/


/* clip-to-bottom
 * clip-to-right
===============================
*/


.clip{
	transition: .5s cubic-bezier(0.37, 0, 0.63, 1);
	transition-property: clip-path;
}

.clip-to-right{
	clip-path: inset( 0 100% 0 0);
}

.clip-to-bottom{
	clip-path: inset(100% 0 0 0);
}

.clip.is-active{
	clip-path: inset(0);
}
	.sec.is-show .clip{
		clip-path: inset(0);
	}


/* loading > mv の間のアニメーション */
.is-loaded .fade{
	--x: 80px;
	--y: 80px;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
	animation-fill-mode: forwards;
	will-change: opcity,translate;
}

.is-loaded .fade-to-top{
	animation-name: fadeInToTop;
	animation-delay: 0s;
}

.is-loaded .fade-to-right{
	animation-delay: .5s;
	animation-name: fadeInToRight;
}




/* maskBg */

.maskBg {
	position: relative;
	overflow: hidden;
	transition: color 0ms 450ms;
}

.maskBg::after {
	content: '';
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	right: 0;
	top: 0;
	background-color: #FFF;
	transform: translate(-102%, 0);
}


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

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



img.schedule_img.is-show{
	opacity: 0;
}
.is-show.maskBg .schedule_img{
	opacity: 1;
	transition: 0s ease .5s;
}



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


@keyframes maskBgToTop {
	0% {
	  transform: translate( 0% , 1002%)
	}
	40%, 60% {
	  transform: translate( 0% , 0%)
	}
	100% {
	  transform: translate( 0% , -1002%)
	}
}



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

/* 必須マーク */
.required{
	color: #D33;
}



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

.btns,
.btn_wrap{
	text-align: center;
}

.btn{
	--chip: 16px;
	--num1: 338.33;
	--num2: 61.45;

	--horizontalRatio: calc(var(--num1) / var(--num2));
	--verticalRatio: calc(var(--num2) / var(--num1));

	--chipBtn: polygon(
		var(--chip) 0,
		100% 0,
		100% calc(100% - var(--chip) ),
		calc(100% - var(--chip) ) 100%,
		0 100%,
		0 var(--chip)
	);

	display: flex;
	justify-content: center;
	align-items: center;
	width: calc( var(--num1) * 1px);
	max-width: 100%;
	height: calc( var(--num1) * var(--verticalRatio) * 1px );

	margin-left: auto;
	margin-right: auto;

	color: #FFF;
	/* 擬似6角形 */
	clip-path: var(--chipBtn);

	background-color: var(--primaryColor);
	cursor: pointer;
}

.btn--secondary{
	color: #fff;
	background: #9d000599;
}

.btn--disable{
	color: #555;
	background: #AAA;
	cursor: no-drop;
}


/* label
===============================
*/

.label{
	display: inline;
	text-align: center;
	padding: .4em .5em;
	color: #FFF;
	line-height: 3.5;
	text-align: center;
	letter-spacing: 5px;
	background-color: #0F0F0FD8;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

	.label--campaign{
		color: #4B4B4B;
		letter-spacing: 0;
		background-color: #FFFFFFD8;
	}

	.label .strong{
		color: var(--primaryColor)
	}

/* logo (ryu)
===============================
*/

.logo{
	position: absolute;
	width: auto;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
}
.logoImg{
	width: auto;
	height: 100%;
}


/* bg_obj , bg_stardust (ryu)
===============================
*/


.bg_obj_wrap {
	position: absolute;
	overflow: hidden;
	width: 100%;
	max-width: 1920px;
	left: 0;
	right: 0;
	/* height = js */
	margin: 0 auto;
}

@media screen and ( min-width: 1200px ) {

	.bg_obj_wrap::before,
	.bg_obj_wrap::after{
		content: "";
		position: absolute;
		display: block;
		width: 1920px;
		height: 100%;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;

		z-index: 2;
	}

	.bg_obj_wrap::before{
		background: linear-gradient( to left , #00003700 95% , #000037 100%);
	}

	.bg_obj_wrap::after{
		background: linear-gradient( to right , #00003700 95% , #000037 100%);
	}
}


.bg_obj {

	/**
	*
	* @param cntWidth    - #mainのwidth jsでリサイズイベントがあると書き換わる
	* @param cntInrMaxW  - .inrのwidth
	* @param cntPadding  - cntInrMaxW から secBodyWidthを引いたinrの余白部分
	* @param sidePadding - cntWidth から cntWidthを引き端からcntInrMaxW両脇のoffset
	* @param sideOffset  - 要素の位置する逆側の側面からの距離px cntPaddingも含む
	* @param areaWidth   - objの表示領域の幅
	*
	*/

	--cntPadding: calc((var(--cntInrMaxW) - var(--secBodyWidth)) / 2);
	--sidePadding: calc((var(--cntWidth) - var(--cntInrMaxW)) / 2);
	--sideOffset: calc(var(--cntWidth) - var(--sidePadding) - var(--cntPadding));
	--width: min(var(--sidePadding), var(--padding));

	width: var(--width);
	height: 100%;
	min-width: 240px;
	max-width: 400px;

	position: absolute;
	z-index: 1;
}



.bg_obj_progress {
	display: none;
}

	.bg_obj--left {
	right: var(--sideOffset);
	}

	.bg_obj--right {
	left: var(--sideOffset);
	}

@media screen and ( max-width: 1200px ) and ( min-width: 769px ) {
	.bg_obj--left {left:}
	.bg_obj--right {right:;}
}






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



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

.Gftr{
	position: relative;
	/* --ftr_color: var(--); */
	padding: 15rem 1em 5rem;
	/* color: var(--ftr_color , var(--textColor)); */
	font-family: var(--en);
	background-color: #CED5D6;
	z-index: 0;
}

.Gftr_inr{}

.Gftr_sns{}

.Gftr_link{
	margin-top: 3rem;
	text-align: center;
}

.Gftr_anchor{
	color: var(--primaryColor);
	font-size: 17px;
	text-decoration: none;
}


.Gftr_copy{
	margin-top: 6rem;
	text-align: center;
	font-size: 13px;
	font-weight: 400;
}


/* sns_list
===============================
*/
.sns_list{
	display: flex;
	justify-content: center;
}
.sns_item{
	--chip: 10px;

	--chipSquare: polygon(
		0 0,
		calc(100% - var(--chip) ) 0,
		100% var(--chip),
		100% 100%,
		0 100%
	);

	width:  2.625em;
	height: 2.625em;
	margin-left: 3rem;
	background: var(--primaryColor);
	clip-path: var(--chipSquare);

}
	.sns_item:first-child{
		margin-left: 0;
	}

.sns_anchor{
	position: relative;
	display: flex;
	height: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
	z-index: 1;
}

@media screen and (min-width:769px) {
	.sns_anchor:hover{
		opacity: .8;
	}
}

.sns_img{
	position: relative;
	z-index: 1;
	fill: #FFF;
	width: auto;
}




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

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

.sec{
	--bodyPosition: 180px;
	--verticalPadding: 110px;
	position: relative;
	padding: var(--verticalPadding) 0;
	opacity: 0;
}

	.sec:first-child{
		padding-top: calc( var(--verticalPadding) * 2 );
	}


.sec_inr{
	position: relative;
	padding-top: 90px;
	padding-bottom: 120px;
}

	.sec_inr--contact{
		padding: 0;
	}


.chipBox{
	--sectionChip: 30px;


	--rightChipSec: polygon(
		0 0,
		calc(100% - var(--sectionChip) ) 0,
		100% var(--sectionChip),
		100% 100%,
		0 100%,
		0 0
	);

	--leftChipSec: polygon(
		var(--sectionChip) 0,
		100% 0,
		100% 100%,
		0 100%,
		0 var(--sectionChip)
	);


	position: relative;
	margin-left: auto;
	margin-right: auto;
}

.chipBox::before{
	--negativeMargin: -50vw;
	--sideOffset: 0;

	content: "";
	position: absolute;
	top: var(--bodyPosition);
	bottom: 0;
	z-index: 0;
	background-color: #fff;
}

.sec:nth-child(odd) .chipBox::before{
	clip-path: var(--rightChipSec);

	left: var(--negativeMargin);
	right: var(--sideOffset);
}
.sec:nth-child(even) .chipBox::before,
.chipBox--right::before{
	clip-path: var(--leftChipSec);

	left:  var(--sideOffset);
	right: var(--negativeMargin);
}



.sec_hdr{
	position: absolute;
	left: 0;
	margin-top: -130px;
}

	.sec--toRight .sec_hdr{
		left: auto;
		right: 0;
	}

.sec_ttl{
	/* 英語タイトルのネガティブマージン */
	--sideOffset: -150px;

	position: absolute;
	width: auto;
	margin-left: var( --sideOffset);
	z-index: 2;
}

	.sec_ttl--release{
		--sideOffset: -100px;
	}

	.sec--toRight .sec_ttl{
		left: auto;
		right: 0;
		margin-left: 0;
		margin-right: var( --sideOffset);
		text-align: right;
	}

.sec_label {
	--horizontalPadding: 1.5rem;

	position: absolute;
	width: 50%;
	padding-left:  var(--horizontalPadding);
	padding-right: var(--horizontalPadding);
	top: 120px;
	line-height: 2;
	text-align: left;
	font-size: 17px;
	font-weight: 500;
	color: #FFF;
	background-color: #0f0f0fD8;
	z-index: 2;
}

	.sec--toRight .sec_label{
		right: 0;
		text-align: right;
	}

	.sec_ttlImg{
		width: auto;
	}


.sec_body{
	position: relative;
	padding-top: var(--bodyPosition);
	z-index: 2;
}
	.sec_body--campaign{
		padding-top: 110px;
	}

.sec_ftr{
	margin-top: 3rem;
}



/* subSec
===============================
-- share
-- line

.subSec
.subSec_inr
.subSec_hdr
.subSec_ttl
.subSec_body
.subSec_ftr

*/


.subSec{
	padding: 150px 0;
}

.page--entry .subSec{
	padding: 50px 10px;
}

	.subSec--line{
		padding-bottom: 100px;
	}

.subSec_inr{
	position: relative;
	padding: 200px calc( var(--commonSidePadding) + 20px ) 140px;
}

	.subSec_inr::before{
		content: "";
		position: absolute;
		background-color: #fff;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
	}


	.page--entry .subSec_inr{
		padding-top:    150px;
		padding-bottom: 150px;
	}

		.subSec_hdr{
			position: absolute;
			top: 0;
			left: 0;
			margin-top: -40px;
			text-align: center;
			z-index: 1;
		}

			.page--entry .subSec_hdr{
		margin-bottom: 3em;
	}

.subSec_ttl{
	text-align: center;
}

.subSec_label{
	position: relative;
	top: -90px;
	width: auto;
	line-height: 1.2;
	font-size: 14px;
}

.subSec_body{
	position: relative;
	z-index: 3;
}

.subSec_ftr{}




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

.mv{
	--ratio: calc( 2160 / 2963 );
	/* --h: calc( 100vw / var(--ratio) ); */
	--h: 100svh;
	overflow: hidden;
	position: fixed;
	width: 100vw;
	height: var(--h);
	top: 0;
	min-height: 100svh;
	background-color: #738084;
	z-index: -2;

}

.mv.is-animation::after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 20vh;
	background: url(../images/mv_mask.png) bottom center/100% 100% no-repeat;
	opacity: 0;
	animation: fadeIn 1s linear 6s forwards;
}


.mv_pic{
	overflow: hidden;
	width: 100%;
	height: var(--h);
}

.mv_img{
	width: 100%;
	height: 100%;
	max-width: 100%;
	vertical-align: middle;
	object-fit: cover;
	object-position: center;
	opacity: 0;
}

.mv_img.is-animation{
	animation:
		fadein 1s 0s forwards,
		moving 4s 1s forwards,
		breathing 8s 5s alternate infinite;
}

@keyframes breathing {
	from{
		scale: 1;
	}
	to{
		scale: 1.15;
	}
}

@keyframes moving {
	0% {
		opacity: .5;
		translate: 0 -20%;
		scale: 3;
	}
	50%{
		translate: 0 -80%;
		opacity: 0;
		scale: 3;
	}
	51%{
		opacity: 0;
		translate: 0;
		scale: 1.3;
	}
	60%{
		opacity: 0;
		scale: 1.3;
	}
	75%{
		opacity: 1;
		scale: 1.3;
	}
	100%{
		opacity: 1;
		scale: 1;
	}
}


/* mv_banner */




.mv_texts{
	--x: 200;
	overflow: hidden;
	position: fixed;
	max-width: 100%;
	height: auto;
	left: 22vw;
	bottom: 10rem;
	margin: auto;
}



.mv_text{
	font-size: 24px;
	font-weight: 500;
	font-family: var(--en);
}

	.mv_text--ja{
		font-family: var(--sans-serif);
		font-size: 14px;
		font-weight: 300;
	}


	.mv_label{
		padding: .3em .5em;
		line-height: 2.8;
	}


		.mv_label.is-animation{
			transition: .5s ease 0s;
			animation: fadeInToRight .5s forwards 5s;
			will-change: opacity , transform , animation;
		}


/* main */
.main{
	overflow: hidden;
	position: relative;
	margin-top: 100svh;
	background-color: #CED5D6;
	z-index: 1;
}




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

.release_pic{
	text-align: center;
}

.release_caption{
	margin-top: 2rem;
	font-family: var(--en);
	font-size: 32px;
	font-weight: 600;
}

.release_btn{
	font-family: var(--en);
	font-size: 15px;
}


/* campaign
===============================
*/

.campaign_texts{
	clip-path: var(--rightChipSec);
	/* clip-path: var(--leftChipSec); */

	display: flex;
	justify-content: center;
	flex-wrap: wrap;

}

.campaign_text{
	text-align: center;
}

.campaign_btn{
	font-size: 12px;
}

.campaign_ftr{
	text-align: center;
}

/* entry
===============================
*/

.entry{
	text-align: center;
}

.entry_pic{
	text-align: center;
}

.entry_item{
	margin-top: 6rem;
}

.entry_ttl{
	padding-bottom: .5rem;
	text-align: center;
	font-size: 19px;
	font-weight: 800;
	color: var(--primaryColor);
	text-decoration: underline;
	text-underline-offset: 7px;
	text-decoration-thickness: 3px;
}

.entry_texts{
	margin-top: 3rem;
	font-size: 20px;
	font-weight: 500;
}

	.entry_text .strong{
		color: var(--primaryColor)
	}

	.entry_text--end{
		text-decoration: line-through;
		color: #aaa;
	}


	.entry_texts--ftr{
		margin-top: 0;
		margin-bottom: 2rem;
		font-size: 16px;
	}

.entry_text{

}

.entry_notes{
	line-height: 1.6;
	margin-top: 3rem;
	font-size: 13px;
	font-weight: 300;
}

.entry_note:not(:first-child){
	margin-top: 0.3em;
}

.entry_ftr{
	margin-top: 10rem;
}

.entry_btn{
	font-size: 12px;
}

.entry_btns--ftr{
	padding: 2em 1em;
	background-color: #EEE;
	margin-top: 1em;
}

/* step
===============================
*/

.step{
	margin-top: 140px;
	line-height: 1.8;
}

.step_ttl{
	width: 200vw;
	padding: 0 1em;
	line-height: 2.5;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 5px;
	background-color: #0f0f0f;
	color: #FFF;
}

.step_list{}

.step_item{
	display: flex;
	margin-top: 6.5rem;
}

.step_num{
	width: 190px;
}

.step_num_img{}

.step_body{
	width: 100%;
	padding-left: 4rem;
}

.step_texts{
	font-size: 16px;
	font-weight: 500;
}

.step_text{}

.step_btnWrap{
	margin-top: 2rem;
}

	.step_btnWrap .btn{
		margin: 0;
	}

.step_notes{
	margin-top: 2rem;
	font-size: 13px;
	font-weight: 300;
}

.step_note{
	margin-top: 1em;
}

	.step_note--indent{
		padding-left: 1.5em;
		margin-top: 0 !important;
	}



/* contact
===============================
*/

.contact{

}

.contact_ttl{
	padding-bottom: .5rem;
	text-align: center;
	font-size: 19px;
	font-weight: 800;
	color: var(--primaryColor);
	text-decoration: underline;
	text-underline-offset: 7px;
	text-decoration-thickness: 3px;
}

.contact_body{
	margin-top: 2rem;
}

.contact_texts{
	margin-top: 2rem;
	font-size: 20px;
	font-weight: 500;
}

.contact_text{}

.contact_notes{
	margin-top: 3rem;
	font-size: 13px;
	font-weight: 400;
}

.contact_note{}



.contact_textarea{
	width: 100%;
	height: 10em;
	margin-top: 5em;
	color: #555;
	text-align: left;
	padding: 1rem 2rem;
	font-size: 12px;
	overflow: scroll;
	border: 1px solid #555;
}

.contact_textarea h3{
	margin-bottom: 1em;
	font-size: 13px;
	font-weight: 500;
}


.contact_textarea .contact_notes:not(:last-child){
	margin-bottom: 3rem;
}

.contact_textarea .contact_note{}



/* form
===============================
*/

.form{
	max-width: 550px;
	margin-left: auto;
	margin-right: auto;
}

.form_list{
	margin-top: 3em;
	text-align: left;
	font-size: 13px;
}
.form_item:not(:first-child){
	margin-top: 2em;
}

.form_item--full{
	width: 100%;
	margin-top: 2rem;
}

.form_flex{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.form_term:not(.form_term--long){
	width: 30%;
}
.form_desc:not(.form_desc--long){
	width: 70%;
	padding-left: 1.5rem;
	text-align: left;
}

.form_term{
	font-weight: 500;
}


	.form_term--long{
		margin-top: 3em;
		margin-bottom: 1em;
	}
	.form_desc--long{}



.form_btns{
	margin-top: 5em;
}

.form_btn{}


.form_btns form:not(:first-child) .form_btn{
	margin-top: 2rem;
}



/* confirm時 */
.entry--confirm .form_term,
.entry--confirm .form_desc{
	text-align: left;
}


.entry--confirm .form_term{
	font-weight: 700;
	margin-bottom: .8em;
}

.entry--confirm .form_desc{
	font-weight: 400;
}

.entry--confirm .form_desc p{
	margin-bottom: 0.8em;
}


/* .entry--confirm .form_term{
} */


/* lyric
===============================
*/

.lyric{
	text-align: center;
}
.lyric_texts{
	line-height: 2;
	text-align: center;
}
.lyric_text:not(:first-child){
	margin-top: 2em;
}

.lyric_more{
	margin-top: 3em;
}


/* accordion */


.lyric_more{
	--accordionColor: #37BEF0;
	--accordionBgColor: transparent;
	--hoverColor: #FFF;
	--hoverBgColor: #37BEF0;

	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
	padding: 1rem 2rem;

	color: var(--accordionColor);
	background-color: var(--accordionBgColor);
	font-size: 14px;
	font-weight: 100;
	transition: .5s;
	cursor: pointer;
}

	.lyric_more::before{
		content: "・・・";
		display: inline-block;
		line-height: 1;
		color: var(--accordionColor);
	}


	.lyric_more::after{
		content: "";
		position: absolute;
		display: inline-block;
		width: 4rem;
		height: 1px;
		left: 0;
		right: 0;
		margin: auto;
		bottom: 1px;
		box-shadow: 0 1px 0 0 var(--accordionColor);
		transition: .5s;
	}

@media screen and (min-width:769px) {
	.lyric_more:hover{
		color: var(--hoverColor);
		background-color: var(--hoverBgColor);
	}

	.lyric_more:hover::before{ color: var(--hoverColor)}
	.lyric_more:hover::after{ box-shadow: none}
}


	.lyric_more.is-active,
	.lyric_more.is-active::before,
	.lyric_more.is-active::after{
		display: block;
		max-height: 0;
		opacity: 0;
		visibility: hidden;
		transition: all 1s, max-height 1s ease-out .8s;
	}



/* tieup
===============================
*/

.tieup{}
.tieup_caption{
	margin-top: 0.5rem;
	text-align: right;
}


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


/* loading (ryu)
===============================
*/


/* op 0 */
/* init anime */
/* .loading,
.loading_body{
	opacity: 0;
} */

.loading img{
	opacity: 1;
}

.loading_ttl{
	width: 18vw;
	max-width: 100%;
}

.loading{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	z-index: 0;
}

.loading_front{
	position: fixed;
	display: flex;
	width: 100vw;
	height: 100%;
	padding: 20px;
	justify-content: space-between;
	align-items: center;
}



/* controls */

.loading_control {
	position: fixed;
	display: flex;
	top: 1em;
	right: 2em;
	cursor: pointer;
	transition: 1s;
	opacity: 0;
	z-index: 1000;
}

.loading_btn {
	margin-right: 1rem;
	padding: 0.5em 0.8em;
	color: #fff;
	background: var(--darkTextColor);
}


.loading:not(.debug) .loading_pause {
	display: none;
}

.loading:not(.debug) .loading_play {
	display: none;
}




/* loading animation */

/* init */

.mv_text {
	position: relative;
	overflow: hidden;
	transition: color 0ms 450ms;
	transition: 1s ease .5s;
}

.mv_text::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 50px;
	left: -2px;
	bottom: 0;
	right: 0;
	top: 0;
	background-color: #FFF;
	transform: translate( 0 , 1002% );
}


@keyframes fadeColor {
	0% {
		color: transparent;
	}
	100% {
		color: #FFF;
	}
}



.mv_label{
	--x: 100;
	opacity: 0;
	color: transparent;
}



/* timeline */
.logding_left,
.logding_right{
	--y: 150;
	transform: translateY( calc( 1% * var(--y) ) );
	animation: 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s forwards;
}
	.logding_left{ animation-name: fadeInToTop;}
	.logding_right{ animation-name: fadeInToBottom;}


.mv_img{
	opacity: 0;
	animation: fadeIn 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s forwards;
}


.mv_text::after {
	animation: maskBgToTop 1.5s cubic-bezier(0.8, 0, 0.170, 1) 2s forwards;
}

.mv_text:nth-of-type(2)::after{ animation-delay: 2.125s;}
.mv_text:nth-of-type(3)::after{ animation-delay: 2.25s;}

.mv_label{
	animation:
		fadeInToRight .5s cubic-bezier(0.47, 0, 0.745, 0.715) 3s forwards,
		fadeColor 1s cubic-bezier(0.47, 0, 0.745, 0.715) 4s forwards;
}