@charset "utf-8";



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

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



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

	--commonSidePadding: 40px;

	color: #FFF;
	letter-spacing: 1px;
	--accentColor: #F0CEC6;
	--darkAccentColor: #B4DF2E;
	--darkTextColor: #4B4B4B;
}



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: 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: 436px;
		--bigInrMaxW: 100%;
	}

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



/* init */

body{
	position: relative;
	background: #000;
	z-index: -1;
}



/* fade init */

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



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


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




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

.Gftr{
	overflow: hidden;
	padding-top: 2rem;
	padding-bottom: 2rem;
	background-color: #E0002E;
	font-family: 'Oswald', serif;
}
.Gftr_inr{
	position: relative;
	z-index: 0;
}
.Gftr_sns{

}
.Gftr_anchor{
	font-size: 18px;
	font-weight: 500;
	text-decoration: none
}

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

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





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


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

.sec,
.sec.formArea:first-child:last-child{
	position: relative;
	padding: 6rem 1.375rem;
	z-index: 10;
}
	.main > .sec:first-child{
		padding-top: 200px;
	}
	.main > .sec:last-child{
		padding-bottom: 200px;
	}


	.sec--note{
		padding: 0;
	}



.sec_hdr{
	margin: 0 auto 5rem;
	text-align: center;
}
	.sec_hdr--dark::after{
		border-color: var(--darkAccentColor);
	}
	.sec_hdr--note{
		margin-bottom: 0 !important;
		text-align: center;
	}
	.sec_hdr--note::after{
		display: none;
	}


.sec_inr{
	margin-left: auto;
	margin-right: auto;
}


.sec_ttl{
	position: relative;
	text-align: center;
	display: inline-block;
	width: auto;
	margin: auto;
	z-index: 9;
}

.sec_ttl:not(.sec_ttl--note){
	transform: translateX( -200% );
	transition: transform .4s cubic-bezier(0,.78,.64,1.18) 0s , opacity 1s;
}
.is-show .sec_ttl:not(.sec_ttl--note){
	transform: translateX( 0% );
}

	.sec_ttl--note{
		width: 350px;
		margin-left: auto;
		margin-right: auto;
		font-weight: 500 !important;
	}

	.sec_ttl::after{
		content: "";
		position: absolute;
		width: 117px;
		height: 117px;
		left: -10%;
		top:  -30%;
		background: url(../images/saw--gray.svg) center /cover no-repeat;
		animation: 6s rotate 0s linear infinite;
		z-index: 8;
	}

	.sec_ttl--campaign::after{
		top: 0;
	}
	.sec_ttl--tieUp::after{
		top: 0;
		left: -5%;
	}

	.sec_ttl--note::after{
		display: none;
	}
	

.sec_ttlImg{
	position: relative;
	width: auto;
	z-index: 9;
}

	.sec_ttlImg--release{
		transform: rotate(-3deg);
	}
	.sec_ttlImg--lyric{
		transform: rotate(6deg);
	}
	.sec_ttlImg--campaign{
		transform: rotate(-7deg);
	}
	.sec_ttlImg--tieUp{
		transform: rotate(-7deg);
	}

.sec_body{}
.sec_ftr{}



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

.btn{
	display: inline-block;
	padding: 1.5rem 3.5rem;
	width: auto;
	text-align: center;
	color: #000;
	font-family: 'Oswald' , 'Noto Sans JP', sans-serif;
	font-weight: bold;
	background: url(../images/btn_bg.jpg) no-repeat center /cover;
	transition: .3s;
	caret-color: transparent;
	cursor: pointer;
}

@media screen and (min-width:769px) {
	.btn:hover{
		filter: brightness(.8);
	}
}

	.btn--black{}
	.btn--file{
		color: #707070;
		background: none;
		border: 1px solid #707070
	}
	.btn--submit{
		color: #FFF;
		background: url(../images/btn_bg--black.jpg) no-repeat center /cover;
	}

	.closeBtn::after,
	.closeBtn::before{
		height: 2px;
	}
	


/* logo
===============================
*/

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



/* saw
===============================
*/

.saw{
	width: 44.3vh;
	height: 44.3vh;
	animation:
		rotate 6s linear 0s infinite,
		fadeIn .5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s forwards;
	opacity: 0;
}



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

.mv{
	position: relative;
	height: 100vh;
	background-color: #000;
	z-index: 9;
	
}
.mv_img{
	object-fit: cover;
	object-position: top center;
	max-width: 100%;
	height: 100vh;
	/* height: calc(var(--vh) * 100); */
	transition: 1s ease;
}

	:root[data-load="loading"] .mv_img{
		opacity: 0;
		filter: blur(5px);
		transform: scale(1.3);
	}
	:root[data-load="end"] .mv_img{
		opacity: 1;
		filter: blur(0);
		transform: scale(1.0);
	}


.mv_pop{
	position: absolute;
	left: 20px;
	bottom: 20px;
}

.mv_pop_item{
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	opacity: 0;
	transition: .5s;
}

.mv_logo--eve{
	height: 12vh;
	top: 9%;
	transition: .5s linear .8s;
}
.mv_logo--title{
	height: 8vh;
	top: 36%;
	transition: .5s linear 1.0s;		
}

.mv_release{
	height: 12.5vh;
	top: 53%;
	transition: .5s linear 1.2s;
}
.mv_text{
	height: 4.55vh;
	top: 79%;
	left: 6%;
	transition: .5s linear 1.4s;
}

.mv_pop_img{
	width: auto;
	height: 100%;
}

.mv_logoImg--eve{
	transform: rotate(-3deg)
}
.mv_logoImg--title{
	transform: rotate(7deg)
}

:root[data-load="end"] .mv_pop_item{
	opacity: 1;
}

.mv_sawImg{
	opacity: 0;
	animation: none;
}


:root[data-load="end"] .mv_sawImg{
	animation:
	rotate 6s linear 0s infinite,
	fadeIn .5s cubic-bezier(0.47, 0, 0.745, 0.715) .5s forwards;
}



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

.release{
	max-width: 487px;
	margin-right: auto;
	margin-left: auto;
}

.release_picWrap{
	margin-bottom: 2rem;
	text-align: center;
}

.release_img{}

.release_ttl{
	margin-bottom: 4rem;
	text-align: center;
	font-size: 27px;
	font-weight: 700;
}

.release_ftr{
	text-align: center;
}
.release_btn{

}




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

.campaign{
	padding: 0;
}
.campaign_ttl{
	margin: 8rem 0 2rem;
	color: #B4DF2E;
	font-family: 'Oswald' , 'Noto Sans JP', sans-serif;
	font-size: 3rem;
	font-weight: bold;
	text-align: center;
}

.campaign_texts{
	position: relative;
	margin-bottom: 100px;
	z-index: 15;
}


.campaign_text{
	position: relative;
	line-height: 2.2;
	font-size: 18px;
	font-weight: 6500;
	text-align: center;
	z-index: 15;
}

.campaign_text strong{
	font-weight: 700;
	font-size: 1.1em;
}

.campaign_text strong{
	position: relative;
	display: inline-block;
	padding: 0 .5rem;

	color: #C80000;
	transition: .5s;
	z-index: 15;
}

.campaign_text.serif .st01,
.campaign_text.serif .st02,
.campaign_text.serif .st03,
.campaign_text.serif .st04,
.campaign_text.serif .st05,
.campaign_text.serif .st08{
	color: inherit;
}





/* goods
===============================
*/

.goods{
	margin: 3rem 0;
}
.goods_hdr{
}
.goods_ttl{
	text-align: center;
	font-size: 21px;
	font-weight: 600;
	margin-bottom: 1.5rem;
}

.goods_pics{
	display: flex;
	justify-content: center;
}

.goods_pic{
	text-align: center;
	margin: 1.5rem 1rem;
}
.goods_img{
	width: auto;
	max-width: 440px;
}
.goods_pic_text{
	margin-top: 1.5rem;
	line-height: 1.6;
	font-size: 1rem;
	font-weight: 300;
}


.goods_ftr{
	margin-top: 3rem;
	line-height: 2;
}
.goods_ftr_texts{
	font-size: 14px;
	font-weight: 300;
}
.goods_ftr_text{}



/* apply
===============================
*/

.apply{
	margin-top: 4rem;
}
	.apply--mail{
		margin-top: 10rem;
	}

.apply_hdr{
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}
.apply_ttl{
	padding: .8rem 1rem;
	margin-right: 1rem;
	color: #000;
	font-size: 17px;
	font-weight: bold;
	background-color: var(--darkAccentColor);
}
.apply_hdr_text{
	font-size: 22px;
	font-weight: bold;
}
.apply_texts{
	text-align-last: left;
	line-height: 1.8;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: .5px;
}
.apply_text{
	margin-bottom: .5rem;
}

.apply_ftr{
	display: block;
	margin-top: 6rem;
	text-align: center;
}

.apply_ftr_text{
	font-size: 14px;
	font-weight: 300;
}

.apply_btn{
	width: 100%;
	max-width: 344px;}


.apply_step{

}
.apply_anchor{
	position: relative;
	transition: .5s;
	padding: 0 .5rem;
	z-index: 15;
}

	.apply_anchor::after{
		content: "";
		position: absolute;
		width: 100%;
		height: 1.6em;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
		display: inline-block;
		border-bottom: 1px solid;
		transition: .8s;
		border-radius: 2px;
	}

	.apply_anchor--mail{}
		.apply_anchor--mail::after{
			top: .1em;
			border-bottom-color: #FFF;
		}


	@media screen and (min-width:769px) {
		.apply_anchor:hover{
			color: #000;
		}
	
		.apply_anchor:hover::after{
			border-bottom: 1.6em solid #FFF;
		}
	}

	.apply_anchor--hdr{}





.apply--modal{
	display: none;
	margin-top: 0;
	padding: 3rem 6rem;
	background-color: rgba(255,255,255,.85);
	color: #000;
}

	.is-active .apply--modal{
		display: block;
	}

.apply_ttl--modal{
	background-color: #FFF;
}


.campaign_hdr--modal{
	margin-bottom: 3rem;
	font-weight: 700;
}

.campaign_ttl--modal{
	margin: 0 0 1.5rem;
	font-family: 'Oswald' , 'Noto Sans JP', sans-serif;
	font-size: 2.5rem;
	text-align: center;
}

.campaign_subTtl--modal{
	font-size: 1.25rem;
	text-align: center;
}



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

.step_wrap{}

.step{
	margin-bottom: 3rem;
	padding: .5rem 0 .5rem 3.5rem;
	border-left: 9px solid #000;
	line-height: 2;
}
.step_num{
	margin-bottom: 1.5rem;
	line-height: 1;
	font-size: 24px;
	font-weight: 900;
}
.step_ttl{
	margin-bottom: 1.5rem;
	font-size: 16px;
	font-weight: 500;
}
.step_texts{
	font-size: 14px;
	font-weight: 300;
}
.step_text{
	margin-bottom: ;
}



/* form , formArea
===============================
*/

.formArea{
	color: #000;
	padding: 0 40px 2rem;
}

	.formArea a{
		text-decoration: underline;
		transition: .3s;
	}
	.formArea  a:hover{ color: red}


.formArea_inr{
	position: relative;
	padding: 5rem 0;

}

.formArea_inr::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 50px;
	background-color: rgba(255,255,255,.85);
	z-index: -2;
}


.formArea_hdr{}
.formArea_ttl{
	text-align: center;
	font-size: 33px;
	font-weight: 900;
}
.formArea_body{}

@media screen and (min-width:769px) {
	.formArea_body{
		width: 780px;
		margin-left: auto;
		margin-right: auto;
	}	
}

.form.disabled{
	opacity: 0.3;
	caret-color: transparent;
}

.form_message{
	margin-top: 2rem;
	font-size: 1.2rem;
	text-align: center;
	padding: 0 20px;
}

.form_error{
	color: #C80000
}

.form_dl{
	margin: 4em 0;
	font-size: 22px;
	font-weight: bold;
}

.form_dl--confirm{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.form_term{
	margin-bottom: 1.5rem;
}
.form_desc{
	margin-bottom: 4rem;
}

.form_dl--confirm .form_term{
	width: 30%;
}
.form_dl--confirm .form_desc{
	width: 70%;
}


.form_term--short,
.form_desc--short{
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
}

.form_desc > label {
	display: block;
	background-color: #fff;
}

.form_desc > label + p,
.rim1_fileUploadedName{
	margin-top: 1rem;
	text-align: center;
	font-size: 17px;
	font-weight: normal;
	color: #707070;
}




.form_btns{
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.form_btn{
	margin-top: 1rem;
}

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


.form input[type="text"],
.form input[type="email"]{
	padding: 1em;
	line-height: 1.4;
	background-color: #fff;
	border: 1px solid #707070;
}



/* note , modal
===============================
*/



.note{
	display: none;
	padding: 3rem 2rem;
	background-color: rgba(255,255,255,.85);
	color: #000;
}
.note.is-active{ display: block;}

.note_ttl{
	margin-bottom: 1rem;
	font-size: 18px;
}
	.note_ttl--big{
		margin-bottom: 3.5rem;
		font-size: 26px;
		text-align: center;
	}
	.note_ttl--big strong{
		font-weight: 500;
	}


.note_text,
.note ul{
	margin-bottom: 2rem;
	font-size: 1rem;
	line-height: 1.6;
}

.note li{
	margin-bottom: .2rem;
	text-indent: -1rem;
	padding-left: 1rem
}


/* modal */

.modal_wrap{
	padding: 0 20px;
}

.modal_content{
	width: 100%;
	max-width: 1024px;
	padding-left: 20px;
	padding-right: 20px;
	min-height: 70vh;

}

.modal_inr{
	min-height: 70vh;
}

.closeBtn_wrap {
	position: absolute;
	right: 20px;
	top: -80px;
}




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

.lyric{
	font-size: 16px;
	font-weight: 300;
	line-height: 2;
}
.lyric_texts{
	text-align: center;
}

.lyric_text{
	margin-bottom: 2rem;
	text-align: center;
}



/* accordion */


.rim1_accordionUi{
	--accordionColor: #BE0027;
	--accordionBgColor: transparent;
	--hoverColor: #FFF;
	--hoverBgColor: #BE0027;

	position: relative;
	margin-left: auto;
	margin-right: auto;
	color: var(--accordionColor);
	background-color: var(--accordionBgColor);
	font-family: 'Oswald', serif;
	font-size: 14px;
	font-weight: 900;
	transition: .5s;
	display: flex;
	flex-direction: column;
	max-width: 350px;
	cursor: pointer;
}

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


	.rim1_accordionUi::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) {
	.rim1_accordionUi:hover{
		color: var(--hoverColor);
		background-color: var(--hoverBgColor);
		padding: 1rem 2rem;
	}
	
	.rim1_accordionUi:hover::before{ color: var(--hoverColor)}
	.rim1_accordionUi:hover::after{ box-shadow: none}
}


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


/* tieUp
===============================
*/

.tieUp{}

.tieUp_picWrap{
	max-width: 788px;
	margin: 0 auto 80px;
	text-align: center;
}
.tieUp_img{
	width: auto;
}
.tieUp_pic_caption{
	margin-top: 0.5rem;
	font-size: 14px;
	font-weight: 200;
	text-align: left;
}

.tieUp_movieWrap{
	margin-bottom: 80px;
	max-width: 788px;
}
.tieUp_texts{
	line-height: 2;
}
.tieUp_phrase{
	margin-bottom: 2em;
	font-weight: 300;
}
.tieUp_ttl{
	color: #BE0027;
	font-family: 'Oswald', serif;
	font-size: 1.25rem;
	font-weight: 700;
}
.tieUp_text{
	font-size: 1.1875rem;
	font-weight: 600;
}
.tieUp_text--sub{
	font-size: 1rem;
	font-weight: 200;
}
.tieUp_strong{
	font-weight: 700;
}
.tieUp_info{
	margin: 100px auto 60px;
	padding: 40px 0;
	border: 1px solid #fff;
	border-width: 1px 0
}
.tieUp_info_ftr{
}
.tieUp_info_copy{
	font-weight: 200;
	font-size: 14px;
}

.tieUp_ftr{
	margin-top: 5rem;
	text-align: center;
}
.tieUp_btn{}

/* info_list
===============================
*/

.info_list{
	display: flex;
	flex-wrap: wrap;
}
.info_term{
	width: 100px;
	font-size: 14px;
	font-weight: 100;
}
.info_desc{
	width: calc(100% - 100px);
	font-size: 19px;
	font-weight: 400;
}

.info_term,
.info_desc{
	margin-bottom: 2rem;
}

.info_aside{
	font-size: 17px;
	font-weight: 200;
}


/* radio
===============================
*/

.radio{}
.radio_lead{
	margin-bottom: 60px;
	font-size: 20px;
	line-height: 2;
}
.radio_btn_wrap{
	margin-bottom: 60px;
	text-align: center;
}
.radio_btn{
}
.radio_picWrap{

}
.radio_img{

}




/* sns_list
===============================
*/
.sns_list{
	display: flex;
	justify-content: center;
}
.sns_item{
	width: 2.625rem;
	height: 2.625rem;
	margin-left: 1.5rem;
	background: url(../images/icon_bg.png) no-repeat center /cover;
}
	.sns_item:first-child{
		margin-left: 0;
	}
.sns_anchor{
	display: flex;
	height: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.sns_img{
	width: auto;
}










/*  ===============================
			revolution
===============================*/


.revolution_wrap_{

}


.revolution_wrap{
	position: relative;
	width: 120%;
	height: 30vw;
	left: -10%;
	margin: 5vw 0;
	padding: 5rem 0;
	animation: rotateAndSkew 14s ease 0s infinite;
	z-index: 16;
	will-change: animation , transform;
}

.revolution{
	position: absolute;
	display: flex;
	justify-content: space-between;
	/* width: 50%; */
	/* left: 10%; */
	/*border: 1px solid #CCC*/
}
	.revolution img{
		max-width: 80%;
	}
.revolution--reverse { transform: scale(-1);}
	.revolution--reverse img{
		transform: scale(1,-1);
	}

@keyframes rotateAndSkew {
	0%{
		transform: rotate(0) skew(0)
	}
	25%  {
		transform: rotate(2deg) skew(2deg)
	}
	50% {
		transform: rotate(0) skew(0deg)
	}
	75%{
		transform: rotate(-2deg) skew(-2deg)
	}
	100%  {
		transform: rotate(0) skew(0deg)
	}
}


.revolution_item:nth-of-type(1){ --i: 0; --fs: 1.0; --ts: 1.1; }
.revolution_item:nth-of-type(2){ --i: 1; --fs: 1.1; --ts: 1.2; }
.revolution_item:nth-of-type(3){ --i: 2; --fs: 1.2; --ts: 1.2; }
.revolution_item:nth-of-type(4){ --i: 3; --fs: 1.2; --ts: 1.1; }
.revolution_item:nth-of-type(5){ --i: 4; --fs: 1.1; --ts: 1.0; }

.revolution_item:nth-of-type(3){ --ftY: calc( var(--tY) * ( var(--i) ) ); --ttY: calc( var(--tY) * ( var(--i) ) );}
.revolution_item:nth-of-type(4){ --ftY: calc( var(--tY) * ( var(--i) - 1 ) ); --ttY: calc( var(--tY) * ( var(--i) - 2 ) );}
.revolution_item:nth-of-type(5){ --ftY: calc( var(--tY) * ( var(--i) - 3 ) ); --ttY: calc( var(--tY) * ( var(--i) - 4 ) );}

.revolution_item{
	position: relative;
	left: -10%;
	width: 20%;
	animation: translateX var(--duration) linear 0s infinite;
	--ftX: 0;
	--ttX: 100%;
	--ftY: 0;
	--ttY: 0;
	--frY: 0;
	--trY: 0;
	--frY: calc( -90deg + ( 180deg / 5  * var(--i) ) );
	--trY: calc( -55deg + ( 180deg / 5  * var(--i) ) );
	--tY: 20px;
	--ftY: calc( var(--tY) * var(--i) );
	--ttY: calc( var(--tY) * ( var(--i) + 1 ) );
	--duration: 3s;
}

.revolution_rotate{								animation: rotate		var(--duration) linear 0s infinite;}
.revolution_scale{								animation: scale		var(--duration) linear 0s infinite;}
.revoluteion_translateY{						animation: translateY	var(--duration) linear 0s infinite;}


.revolution_item,
.revolution_rotate,
.revolution_scale,
.revoluteion_translateY{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: animation , transform;
}


@keyframes translateX {
	0%	{ transform: translateX(var(--ftX));}
	100%{ transform: translateX(var(--ttX));}
}

@keyframes rotate { 
	0%	{ transform: rotateY(var(--frY));}
	100%{ transform: rotateY(var(--trY));}
}

@keyframes translateY { 
	0%	{ transform: translateY(var(--ftY));}
	100%{ transform: translateY(var(--ttY));}
}



@keyframes scale { 
	0%	{ transform: scale( var(--fs) );}
	100%{ transform: scale( var(--ts) );}
}




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

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

*/


:root[data-load="end"] .loading{
	display: none;
}

:root:not([data-load="load"]) .loading{
	opacity: 1;
}


:root:not([data-load="end"]) .Gcntnr{
	opacity: 0;
}

.Gcntnr{
	overflow: hidden;
	opacity: 1;
	transition: 1s;
	animation: 1s fadeInToTop forwards;
}

.loading{
	opacity: 0;
	position: fixed;
	width: 100%;
	height: 100vh;
	/* height: calc(var(--vh) * 100) ; */
	transition: .5s;
	will-change: animation , transition , transform , opacity;
	background-color: #000;
	z-index: 10;
}

	:root.end .loading{
		display: none;
	}

	:root[data-load="loading"] .loading{
		animation: .2s shake 3.5s;
		will-change: animation;
	}

	:root[data-load="loading"] .loading[data-animation="finished"]{
		animation: 2s hideAndZoom .5s linear forwards;
	}

	.loading[data-animation="finished"]{

	}




  @keyframes shake {
	0%, 40% {
	  transform: skew(0deg, 0deg);
	}
	5% {
	  transform: skew(1.2deg, 1.2deg);
	}
	10% {
	  transform: skew(-1deg, -1deg);
	}
	15% {
	  transform: skew(.5deg, .5deg);
	}
	20% {
	  transform: skew(-.3deg, -.3deg);
	}
	25% {
	  transform: skew(.2deg, .2deg);
	}
	30% {
	  transform: skew(-0.1deg, -0.1deg);
	}
	35% {
	  transform: skew(0.1deg, 0.1deg);
	}
  }
  

  /* 2s */
  @keyframes hideAndZoom {
	0%{
		transform: scale(1);
	}
	30%{
		transform: scale(0.9);
	}
	100%{
		transform: scale(5);
	}

	0%{
		opacity: 1;
	}
	80%,100%{
		opacity: 0;
	}

  }


.loading_cnt{
	/* opacity: 0; */
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 1.5s ease 1.5s;
	z-index: 100;
}

.loading_logo{
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 101;
	text-align: center;
	transform: translateY(-200%);
	opacity: 0;
	animation: .3s bound 2.8s forwards;
}

.loading_eve{
	height: 12vh;
	top: 37vh;
}
.loading_title{
	height: 7vh;
	top: 50vh;
}

.loading_logoImg{
	transform: rotate(0deg);
	height: 100%;
	width: auto;
}
	:root[data-load="loading"] .loading_logoImg{
		transition: .1s ease-out 3.5s;
	}

:root[data-load="loading"] .loading_logoImg--eve{
	transform: rotate(-3deg);
}
:root[data-load="loading"] .loading_logoImg--title{
	transform: rotate(8deg);
}



  @keyframes bound {
	0% {
	  transform: translateY(-140px);
	  opacity: 0;
	  top: auto;
	}
	50% {
	  transform: translateX(0);
	}
	65% {
	  transform: translateY(-30px);
	}
	100% {
	  transform: translateX(0);
	}
	20%,100% {
	  opacity: 1;
	}
  }
  


.loading[data-animation="start"] .loading_cnt{
	opacity: 1;
	transition: opacity .5s ease 0.5s;
}


.loading_saw{}


.loading[data-animation="finished"] .loading_saw{
	animation: 1s rotate .2s linear infinite;
	opacity: 1;
}


@keyframes rotate {
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(359deg);
	}
}
 

.paint{
	width:	40vw;
	height:	40vh;
	position: absolute;
	mask: no-repeat center /contain;
	-webkit-mask: no-repeat center /contain;
	transform-origin: center;
	will-change: top,left,transition,animation;
	/* -webkit-backface-visibility: hidden;
	backface-visibility: hidden; */
}

.x--right{
	left: 200%;
}
.x--left{
	left: -200%;
}
.x--center{
	left: 50%;
}
.y--bottom{
	top: 200%
}
.y--top{
	top: -200%
}
.y--center{
	top: 50%;
}

.loading .paint{
	transition: .1s 1.4s;
}
.loading .paint:nth-child(2n){
	transition: .1s 1.3s;
}
.loading .paint:nth-child(4n){
	transition: .1s 1.2s;
}
.loading .paint:nth-child(4n){
	transition: .1s .4s;
}
.loading .paint:nth-child(5n){
	transition: .1s .3s;
}
.loading .paint:nth-child(6n){
	transition: .1s .8s;
}


.paint.paint--left{
	left: -200%;
}
.paint.paint--right{
	left: 200%;	
}

.Gcntnr .paint.is-ready{
	left: 50%;
	opacity: 0;
}

.is-show.paint{
	opacity: 1;
	transition: left .2s cubic-bezier(0.47, 0, 0.745, 0.715) .2s;
}
.is-show.paint.paint--left{
	left: -20%
}
.is-show.paint.paint--right{
	left: 120%
}