@charset "utf-8";



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

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



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

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

	--commonSidePadding: 40px;
	--sans-serif: 'Noto Sans JP', sans-serif;
	--serif: 'Noto Serif JP', serif;

	--textColor: #FFF;
	--darkTextColor: #0f0f0f;
	--neonColor: #00FFFF;

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


}

body{ font-size: 16px;}


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

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

.main{
	/* overflow: hidden; */
	background-color: #373636;
}

.inr{
	overflow: hidden;
	max-width: var(--cntInrMaxW);
	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: 480px;
		--bigInrMaxW: 100%;

		--commonSidePadding: 20px;
	}

	.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;
	animation: fadeInToTop 1s forwards 0s;
	will-change: opacity , transform , animation;
}

.sec--reception.is-show{
	--x: 200;
	animation: fadeInToRight 1.2s ease-out forwards 0s;
}


.sec--reception .sec_inr--reception{
	--x: 50;
	opacity: 0;
}

.sec--reception.is-show .sec_inr--reception{
	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);
	}


/* pop */
.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-bottom{
	animation-name: fadeInToBottom;
	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;
}

.maskBg .schedule_time,
.maskBg .schedule_anchors,
.maskBg .schedule_anchorImg{
	opacity: 0;
}

.is-show.maskBg .schedule_time,
.is-show.maskBg .schedule_anchors,
.is-show.maskBg .schedule_anchorImg{
	opacity: 1;
	transition: 0s ease .5s;
}


.maskBg--neon::after{
	background-color: var(--neonColor);
}


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


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



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

.Gftr{
	--ftr_color: var(--neonColor);
	overflow: hidden;
	padding: 3rem 1em 5rem;
	color: var(--ftr_color , var(--textColor));
	font-family: var(--serif) , serif;
	z-index: 1;
}

.Gftr_inr{
	z-index: 0;
}

.Gftr_sns{}

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

.Gftr_anchor{
	font-size: 17px;
	text-decoration: none;
}


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


/* sns_list
===============================
*/
.sns_list{
	display: flex;
	justify-content: center;
}
.sns_item{
	width:  2.625em;
	height: 2.625em;
	margin-left: 3rem;
	background: var(--ftr_color);
	border-radius: 10rem;
}
	.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;
}

.sns_anchor::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* background-color: #37BEF0; */
	transform: rotate(45deg);
	z-index: 0;
}

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

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




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



/* box
===============================
*/


.neonBox{
	width: auto;
	color: #ddd;
	background-color: #0005;
	border: 1px solid var(--neonColor);
}



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

.sec{
	position: relative;
	padding: 14rem 0;
	z-index: 10;
	opacity: 0;
}

.sec--reception{
	position: relative;
	background: url(../images/mv.jpg) top center/cover no-repeat;
}


.sec--reception::after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background-color: #dddC;
}


.sec_hdr{
	margin: 0rem auto 8rem;
	text-align: center;
}

	.sec_hdr--reception{
		margin-bottom: 4rem
	}

.sec_inr{
	position: relative;
	z-index: 10;
	margin-left: auto;
	margin-right: auto;
}



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

	.sec--reception{
		--containerWidth: 1300px;
		--sideMargin: calc( ( 100vw - var(--containerWidth) ) / 2 );
		--maxWidth:   calc( var(--sideMargin) + var(--containerWidth) );
		max-width: var(--maxWidth);
		margin-left: 0;
	}

	.sec_inr--reception{
		--inrSideMargin: calc( ( var(--containerWidth) - var(--cntInrMaxW) ) /2 );
		margin-right: var(--inrSideMargin);
	}

}


.sec_ttl{
	margin-bottom: 3rem;
	text-align: center;
}

.sec_ttl:not(.sec_ttl--reception){
	padding-bottom: 1rem;
	display: inline-block;
	width: auto;
	border-bottom: 1px solid #FFF;
}

	.sec_ttl--reception {
		display: flex;
		flex-wrap: wrap;
		text-align: right;
		color: var(--neonColor);
		font-weight: 500;
		font-size: 30px;
	}

	.sec_ttl--col {
		display: block;
		width: 100%;
	}



	.sec_ttlImg{
		width: auto;
	}


.sec_body{}
.sec_ftr{}



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


.btn{
	display: inline-block;
	width: auto;
	padding: 1.5em 3em;
	font-weight: bold;
	font-size: 12px;
	color: var(--darkTextColor);
	background-color: #eee;
	cursor: pointer;
}

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

.btn--white{
	font-size: 18px;
	box-shadow: 2px 2px var(--neonColor);
}


.btn--white{
	font-size: 18px;
	line-height: 1.2;
	text-align: center;
	box-shadow: 2px 2px var(--neonColor);
}

	.btn--white .en{
		font-size: 14px;
	}


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

.label {
	width: auto;
	padding: 0.5em 0.8em;
	line-height: 2.2;
    color: var(--neonColor);
	background-color: #0F0F0F;
}

.label--secTtl {
	padding: 0.2em 0.5em;
	line-height: 2.5;
}





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



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

.mv{
	--ratio: calc( 2160 / 2963 );
	--h: calc( 100vw / var(--ratio) );
	overflow: hidden;
	position: relative;
	width: 100vw;
	height: var(--h);
	min-height: 100svh;
}

.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);
	background-color: #fff;
}

.mv_img{
	width: 100%;
	max-width: 100%;
	vertical-align: top;
	object-fit: cover;
	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_label{
	--x: 200;
	--fz: 14px;

	position: fixed;
	padding: .3em .8em;
	top: calc( var(--fz) * ( -1.15 + -.8 ) ); /* pd left vertical に揃える */
	left: 50px;
	transform-origin: bottom left;
	rotate: 90deg;
	color: var(--neonColor);
	font-family: 'Oswald' , sans-serif;
	font-size: var(--fz);
	background: #0f0f0f;
	transform: translate( 0 , calc( var(--x) * -1vw ) );
}

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


.mv_ttl{
	--x: 200;
	overflow: hidden;
	position: fixed;
	top: 10svh;
	width: 960px;
	max-width: 100%;
	height: auto;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
}


.mv_ttlImg{
	transform: translate( 0 , calc( var(--x) * -1vw ) );
}


	.is-animation .mv_ttlImg{
		transition: .5s ease 0s;
		animation: fadeInToRight 1s cubic-bezier(0.85, 0, 0.15, 1) 5s forwards;
		will-change: opacity , transform , animation;
	}



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

	.mv_label{
		left: 10px;
	}

	.mv_ttl{
		width: 580px;
	}

}

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




/* schedule
===============================
*/

.schedule{}

	.schedule--ticket{
		display: inline-block;
		margin-top: 10rem;
		padding: 3rem;
	}





.schedule_list{
	margin-bottom: 10rem;
}

.schedule_item{
	position: relative;
	margin-top: 3em;
	padding-top: 3rem;
	z-index: 0;
}

.schedule_date,
.schedule_hall{
	text-align: left;
}

.schedule_date{
	margin-bottom: 3rem;
}

.schedule_hall{
	padding-bottom: 3rem;
	border-bottom: 1px solid #BBB;
}

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


.schedule_texts{
	padding-bottom: 3rem;
	border-bottom: 1px solid var(--neonColor);
	font-size: 26px;
}

.schedule_text:not(:first-child){
	margin-top: 1.5rem;
}

.schedule_text--en{
	font-size: 16px;
}

.schedule_notes{
	margin-top: 3rem;
}
	.schedule_notes--en{}

.schedule_notes{
	font-weight: 200;
	line-height: 1.6;
	font-size: 13px;
}

	.schedule_note--en{}

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


/* 国都市ごとのmore */
.schedule_more{
	position: relative;
	padding: .5em 0;
	text-align: right;
	/* display: flex; */
	/* justify-content: flex-end; */
	/* align-items: center; */
	font-family: 'Oswald' , sans-serif;
	border-bottom: 1px solid #FFF;
}



.schedule_time{
	display: inline-block;
	width: auto;
	padding: .3em 0;
	text-align: right;
	line-height: 2;
}

.schedule_anchors{
	position: relative;
	margin-left: 1em;
	z-index: 1;
}

.schedule_anchor{
	display: inline-block;
	padding: .5em;
	text-align: center;
	color: var(--neonColor);
	font-size: 13px;
	background-color: #0005;
	white-space: nowrap;
	transition: .3s;
}


	.schedule_anchor:not(:first-child){
		margin-left: .5em;
	}


	.schedule_anchor:hover{
		/* background-color: #FFF5; */
		translate: -5px;
		box-shadow: 3px 3px 0 #FFF9;
		opacity: .9;
	}




.schedule_anchorImg{
	width: 18px;
}




/* soldout */

.schedule_item.is-soldout::after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: #0005;
	z-index: 0;

	opacity: 0;
	transition: 1s ease-in-out 1.5s;
}



.schedule_soldout{
	position: absolute;
	display: inline-block;
	width: auto;
	padding: .5em 2em;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	margin: auto;
	background-color: #A339;
	white-space: nowrap;
	color: #FFF;
	font-size: 3em;
	font-family: 'Oswald' , sans-serif;
	rotate: -5deg;
	z-index: 1;

	opacity: 0;
	scale: 1.3;

	transition: 1s ease-in-out .2s;
}

/* :not(.is-show) */
.schedule_item.is-soldout.is-show::after{
	opacity: 1;

}

.schedule_item.is-show .schedule_soldout{
	opacity: 1;
	scale: 1;
}





/* reception
===============================
*/

.reception,
.reception_ftr{
	color: var(--darkTextColor);
}



@media screen and (min-width:769px) {
	.reception_boxies{
		display: flex;
		justify-content: flex-end;
	}

	.reception_box--thumb{
		padding-right: 2em;
	}

}

.reception_boxies{
	text-align: right;
}

.reception_box--thumb{
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

.reception_box--main{
}


.reception_texts{
	margin-bottom: 1rem;
	line-height: 2;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 1.5px;
}

.reception_text{}
	.reception_text--ftr{
		font-size: 16px;
	}

.reception_notes{
	margin-bottom: 5rem;
	font-size: 14px;
}

.reception_note{
	font-weight: 200;
	line-height: 1.6;
}

.reception_dl{
	margin-bottom: 5rem;
	font-family: var(--sans-serif);
	font-size: 24px;
	font-weight: 300;
}

.reception_dt{
	display: inline-block;
	width: auto;
	padding-bottom: 0.3em;
	border-bottom: 1px solid;
	font-weight: inherit;
}
.reception_dd{
	margin-top: 1em;
}

.reception_dd--min{
	margin-top: 1.5em;
	font-size: 16px;
}


.reception_ftr{
	margin-top: 2em;
}


.reception_btns{
	display: flex;
	justify-content: flex-end;
	font-family: var(--sans-serif);
}

.reception_btn{
	font-size: 14px;
}







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

.goods{
	line-height: 1.6;
}
.goods_hdr{}

.goods_ttl{
	font-size: 32px;
	font-weight: 300;
	line-height: 1.8;
}

.goods_notes{
	margin-top: 1.2em;
	color: #BBB;
	font-size: 14px;
	font-weight: 200;
}
	.goods_notes--details{
		margin-top: 2em;
	}

	.goods_note--en{
		margin-top: 0;
	}

.goods_note:not(:first-child):not(.goods_note--en){
	margin-top: 1em;
}

.goods_texts--en{
	margin-top: 2em;
	font-size: 18px;
	font-weight: 200;
}

.goods_text--en{}

.goods_dl{
	margin-top: 100px;
}

.goods_term{
	line-height: 1.8;
	font-size: 21px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 8px;
	text-decoration-thickness: 1px;
}

	.goods_term .en{
		font-size: .8em;
		text-underline-offset: 4px;
	}


.goods_desc{
	margin-top: 0.8em;
	font-size: 24px;
	font-weight: 500;
}

	.goods_desc--en{
		margin-top: .8em;
		font-size: 20px;
		font-weight: 300;
	}

.goods_btns{
	margin-top: 100px;
	text-align: center;
}



.goods_pic{
	margin-top: 80px;
}



/* info
===============================
*/

.info{
	padding: 7rem 5rem;
	color: #C0C0C0;
}

.info_btns{
	/* btn--shite の box-shadow 対策 */
	padding: 2px;
	text-align: center;
}

.info_btn{
	display: block;
}

	.info_btn:not(:first-child){
		margin-top: 2em;
	}


.info_hdr{
	margin-bottom: 5rem;
	text-align: center;
}

.info_headings{
	text-align: center;
}

.info_heading{
	font-size: 26px;
	color: #EEE;
}

.info_heading--en{
	margin-top: 1.5rem;
	font-size: 16px;
	color: #DDD;
}



.info_item{
	padding: 5rem 2rem;
	line-height: 1.4;
}

.info_item:not(:first-child){
	border-top: 1px solid #555;
}


.info_ttl{
	font-size: 18px;
	color: #E0E0E0;

}

.info_ttl .en{
	font-size: 16px;
}

.info_texts{
	font-size: 14px;
}

	.info_texts:not(:first-child){
		margin-top: 1.5rem;
	}


.info_text:not(:first-child){
	margin-top: 0.8em;
}

.info_text--en{
	font-size: 13px;
}

.info_notes{
	margin-top: 3rem;
	line-height: 1.6;
	font-weight: 200;
	font-size: 13px;
	color: #CCC;
}

.info_note{}
.info_note--en{}

.info_hr{
	margin: 1.5rem 0;
	box-sizing: content-box;
	height: 0;
	overflow: visible;
	border-top-width: 1px;
	margin: 0;
	clear: both;
	color: var(--neonColor);
}

.info_ftr{
	margin-top: 3rem;
	color: #E0E0E0;
}
.info_ftrText{
	font-size: 16px;
}

	.info_ftrText:not(:first-child){
		margin-top: 1.5rem;
	}

	.info_ftrText--en{
		font-size: 14px;
	}

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

.movie_video{
	width: 100%;
	max-width: 100%;
	display: none;
}
.is-active.movie_video{ display: block;}

.movie_thumb{
	position: relative;
	cursor: pointer;
	z-index: 1;
}


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


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

/* init */
/* 読み込み用svg */
.svg_group{
	display: none;
}

.main:not(.is-active){
	display: none;
}

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

.loading img{
	opacity: 1;
}



.loading{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #4B4B4B;

	z-index: 100;
}

.loading_front{
	position: fixed;
	top:  50%;
	left: 50%;
	translate: -50% -50%;
}
.front_svg{
	width: 100%;
}

.front_ttls,
.front_item {
	opacity: 0;
}

.front{
	position: relative;
}

.front_item{
	position: absolute;
	left: 0;
}




/* object */

.object_item{
	position: absolute;
	width:	100px;
	height:	100px;
	transform-origin: center;
	scale: .00001;
	transition: 2.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.object_item.is-finished{
}



/*

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







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



.fixedSqareAspedctRatio_wrap{
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.fixedSqareAspedctRatio_wrap::before {
	content: "";
	display: block;
	padding-top: 100%;
}

.fixedSqareAspedctRatio {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	margin: auto;
}