@charset "utf-8";



/*

z-index memo

body 0
follen-snow_back 1
snowCover 10
mv 10
follen-snow_front 15
common 20
header 20

follen-snow_back--loading 1
loading: 100 (back)
loading: 
follen-snow_back--loading 1

*/



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

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


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

	--commonSidePadding: 20px;

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

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


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


}



/* init */

html,body{
	position: relative;
	z-index: -1;
}

html{
	background: #000;
}

body{
	background-image: url(../images/bg_body.jpg);
}


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



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


.Gcontainer{
	opacity: 0;
	overflow-x: hidden;
	z-index: 10;
}

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




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

.Ghdr{
	position: absolute;
	top: 0;
	z-index: 100;
}

.Ghdr_item{
	opacity: 0;
}


.Ghdr_item:nth-of-type(1){ --i: 1;}
.Ghdr_item:nth-of-type(2){ --i: 2;}
.Ghdr_item:nth-of-type(3){ --i: 3;}
.Ghdr_item:nth-of-type(4){ --i: 4;}

:root[data-load="end"] .Ghdr_item{
	animation: fadeIn .5s ease-in calc( 1s + ( var(--i) * .5s ) ) alternate forwards;
}

.Ghdr_img{ width: auto;}


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

.Gftr{
	overflow: hidden;
	position: relative;
	padding-top: 300px;
	padding-bottom: 50px;
	/* background-color: #fff; */
	color: var(--darkAccentColor);
	font-family: 'EB Garamond', serif;
	z-index: 15;
}
.Gftr_inr{
	position: relative;
	z-index: 0;
}
.Gftr_sns{
	margin-bottom: 2rem;
}
.Gftr_link{
	margin-bottom: 3rem;
	text-align: center;
}
.Gftr_anchor{
	font-size: 17px;
	font-weight: 500;
}

.Gftr_copy{
	text-align: center;
	font-size: 13px;
	font-weight: 300;
}





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


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

.sec{
	position: relative;
	padding: 120px 20px;
	z-index: 100;
}

.snowCover_wrap > .sec{
	padding: 100px 20px 30px;
	/* background-color: rgba(255,255,255,.6); */
}

.main > .sec:first-child{
	padding-top: 200px;
}



.sec_hdr{}
	.sec_hdr::after{
		content: "";
		display: block;
		margin: 2.5rem auto 5rem;
		width: 65px;
		border-top: 2px solid var(--accentColor);
	}
	.sec_hdr--dark::after{
		border-color: var(--darkAccentColor);
	}
	.sec_hdr--note{
		text-align: center;
	}
	.sec_hdr--note::after{
		display: none;
	}


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


.sec_ttl{
	text-align: center;
}
	.sec_ttl--small{
		padding: 0 20%;
	}
	.sec_ttl--demiSmall{
		padding: 0 10%
	}

	
.sec_ttlImg{
	width: auto;
}
.sec_body{}
.sec_ftr{}



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

.btn{
	display: inline-block;
	cursor: pointer;
}

	.btn--link{
		position: relative;
		padding: 2em calc(2em + 4em) 2em 3em;
		font-size: 14px;
		font-weight: 700;
		background-color: var(--accentColor);
		color: var(--darkTextColor);
		border-radius: 100px;
		caret-color: transparent;
	}

	.btn--link::after{
		content: "";
		position: absolute;
		display: block;
		top: 50%;
		transform: translateY( -50% );
		right: 2em;
		width: 3em;
		height: 1.5em;
		background: url(../images/btn_arrow.png) no-repeat center / contain ;
	}


	.btn--click{
		display: inline-block;
		width: 100%;
		color: #FFF;
		font-size: 18px;
		background-color: var(--darkAccentColor);
		padding: 1.5rem 1rem;
		font-weight: normal;
		text-align: center;
		border: 1px solid #CCC;
		caret-color: transparent;
		transition: .3s;
	}
	
	.btn--click:hover{
		opacity: 0.8;
	}


	.btn--file{
		color: #707070;
		background-color: #fff;
	}

	.btn--submit{}
	.btn--back{
		background-color: transparent;
		color: var(--darkAccentColor)
	}

	.btn--gray{
		background-color: #ccc;
		cursor: normal;
		caret-color: transparent;
	}

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

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

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



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

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

.release_picWrap{
	margin-bottom: 2rem;
	text-align: center;
}
.release_img{}
.release_ttl{
	margin-bottom: 2rem;
	text-align: center;
	font-family: 'Noto Serif JP', serif;
	font-size: 49px;
	font-weight: 300;
}
.release_ftr{
	text-align: center;
}
.release_btn{

}




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

.campaign{}

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

	.campaign_texts::after{
		content: "";
		position: absolute;
		top: -3rem;
		left: -10%;
		width: 120%;
		height: calc( 100% + 7rem);
		background-color: #f5f5f5;
		filter: blur(40px);
		border-radius: 30px;
		z-index: -1;
	}



.campaign_text{
	position: relative;
	line-height: 2;
	font-size: 19px;
	font-weight: 600;
	text-align: center;
	z-index: 15;
}

.campaign_text.serif{
	text-align: center;
	font-weight: 300;
	font-family: 'Noto Serif JP', serif;
}

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

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

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


/* 
.campaign_text.serif strong:after{
	filter: blur(20px);
	content: "";
	position: absolute;
	width: 100%;
	height: 0;
	top: .2em;
	left: 0;
	right: 0;
	z-index: -1;
	display: inline-block;
	border-bottom: 1.4em solid 	#fff;
	transition: .8s;
	border-radius: 2px;
} */



.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: 2rem;
}

.goods_pic{
	text-align: center;
	margin: 1.5rem 0;
}
.goods_img{
	width: auto;
	max-width: 440px;
}
.goods_ftr{
	margin-top: 3rem;
	line-height: 2;
}
.goods_ftr_texts{
	font-size: 14px;
	font-weight: 300;
}
.goods_ftr_text{}



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

.apply{
	margin-top: 5rem;
}
.apply_hdr{
	display: flex;
	align-items: center;
	margin-bottom: 2rem;
}
.apply_ttl{
	padding: .2rem 1rem .3rem;
	margin-right: 1rem;
	color: #FFF;
	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_step{

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

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

	.apply_anchor--hdr{}


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

.step_wrap{}

.step{
	margin-bottom: 3rem;
	padding: .5rem 0 .5rem 2rem;
	border-left: 9px solid #FFF;
	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{
	padding-bottom: 0 !important;
}

	.formArea--confirm{
		color:	var(--darkAccentColor);
	}

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


.formArea_inr{
	padding: 5rem 0;
	background-color: #FFF;
	border: 1px solid #707070;
	border-radius: 15px;
}

.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{
	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 {}

.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;
}



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

.note_sec_ttl{
	width: 350px;
	margin-left: auto;
	margin-right: auto;
}

.note{
	display: none;
	padding: 4rem;
	background-color: #fff;
	border: 1px solid #707070;
	color: var(--darkAccentColor);
	border-radius: 15px;
}
.note.is-active{ display: block;}

.note_ttl{
	margin-bottom: 1rem;
	font-size: 18px;
}

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

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

.modal_content{
	border-radius: 15px;
}

/* 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: var(--accentColor);
	--accordionBgColor: transparent;
	--hoverColor: var(--darkAccentColor);
	--hoverBgColor: var(--accentColor);

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

.snowCover_wrap .rim1_accordionUi{
	--accordionColor: #800000;
	--hoverColor: var(--darkAccentColor);
	--hoverBgColor: var(--accentColor);
}

	.rim1_accordionUi:hover{
		color: var(--hoverColor);
		background-color: var(--hoverBgColor);
		padding: 1rem 2rem;
	}
	.snowCover_wrap .rim1_accordionUi:hover{

	}


	.rim1_accordionUi::before{
		content: "・・・";
		display: inline-block;
		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;
	}

	.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;
	}

	.apply.accordion{
		text-align: center;
	}

	.apply .rim1_accordionUi{
		margin: 1rem auto
	}


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

.tieUp{}

.tieUp_picWrap{
	margin-bottom: 80px;
	text-align: center;
}
.tieUp_img{
	width: auto;
}
.tieUp_movieWrap{
	margin-bottom: 80px;
	max-width: 788px;
}
.tieUp_texts{
	font-size: 22px;
	line-height: 2;
}
.tieUp_phrase{
	margin-bottom: 2em;
	font-size: 18px;
	font-weight: 300;
}
.tieUp_text{}
.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{
	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{
	margin-left: 1.5rem;
}
	.sns_item:first-child{
		margin-left: 0;
	}
.sns_anchor{}
.sns_img{
	width: auto;
}






/*  ===============================
			snow
===============================
1.follen-snow : @snow.css
2.snowCover: contents background
3.snowPilesUp
*/

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


/* wrapper */
.snowCover_wrap{
	position: relative;
	padding: 200px 0;
	color: var(--darkAccentColor)
}

	.snowCover_wrap--anim{
		overflow: hidden;
	}



/* 本体 高さはjs操作 */
.snowCover{
	position: absolute;
	z-index: 15;
	width: 120%;
	height: auto;
	top: 200px;
	left: -10%;
	background: #FFF;
	background-size: 100% 100%;
	animation-iteration-count: infinite;
	animation-duration: 15s;
	transform: scale(1, 1) translate(0, 0);
	opacity: 1;
	filter: blur(5px);
}


/* top and bottom */
	.snowCover::before,
	.snowCover::after{
		content: "";
		position: absolute;
		width: 100%;
		right: 0;
		height: 200px;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 0 0;
		background-image: url("../images/snow.svg");
	}

/* top */
.snowCover::before {
	top: 0;
	margin-top: -200px;
}
/* bottom */
.snowCover::after{
	margin-bottom: -200px;
	bottom: 0;
	transform: scale(-1);
}
	.snowCover--anim{
		opacity: 0.8;
	}
	.snowCover--anim::before,
	.snowCover--anim::after{
		animation: panTheSnow 15s ease-in-out 0s infinite alternate;
	}
/* move sideways */
@keyframes panTheSnow {
	to{   background-position: 0 0; }
	from{ background-position: 100% 0;}
}




/* loading */

.loading .snowCover{
	height: 200vh;
}


/* ftr */

.Gftr .snowCover_wrap{
	position: absolute;
	width: 100%;
	padding-bottom: 0;
	top: 0;
	z-index: -1;
	animation: gftr_wrapSnowUp 60s forwards;
}

.Gftr .snowCover{
	height: 100vw;
	top: 300px;
}
.Gftr .snowCover::before{
	top: 0;
	margin-top: 0;
	background-size: contain;
	animation: gftrSnowUp 30s forwards;
}
.Gftr .snowCover::after{ display: none;}

@keyframes gftrSnowUp {
	from{ top: 0}
	to{ top: -90px}
}
@keyframes gftr_wrapSnowUp {
	from{ top: 0}
	to{ top: -200px}
}




.snowCover_cnt{
	position: relative;
	z-index: 100;
}



/*  ===============================
			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;
}


.loading{
	opacity: 0;
	/* overflow: hidden; */
	position: fixed;
	width: 100%;
	height: calc(var(--vh) * 100) ;
	transition: .5s;
	background-image: url(../images/bg_body.jpg);
}

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

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

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

.loading[data-animation="start"] .snowCover_wrap{
	opacity: 1;
	animation: snowToTop 2s ease .5s 1 alternate both;
}

@keyframes snowToTop {
	from{ transform: translateY( 0px );}
	to{   transform: translateY( -100px );}
}


.loading[data-animation="finished"] .snowCover_wrap{
	animation: snowToLeave 2s linear 2s 1 alternate both;
}

@keyframes snowToLeave { 
	from{ transform: translateY( -100px );}	
	to{   transform: translateY( -600vh );}
}