@charset "utf-8";

/* fonts */
@font-face {
  font-family: "tasaki serif bold";
  src: url("../fonts/TasakiSerif-Bold.woff2") format("woff2"),
  url("../fonts/TasakiSerif-Bold.woff") format("woff");
}
@font-face {
  font-family: "tasaki serif reg";
  src: url("../fonts/TasakiSerif-Regular.woff2") format("woff2"),
  url("../fonts/TasakiSerif-Regular.woff") format("woff");
}

html{
	margin:0;
	padding:0;
	-webkit-text-size-adjust:100%;
	overscroll-behavior-y: none;
}

body{
	margin:0;
	padding:0;
	width:100%; height:100%;
	height:auto;
	background-color:#fff;
	color:#112c42;
	overscroll-behavior-y: none;

	font-family: "Zen Old Mincho", serif;
	font-weight: 400;
	font-style: normal;
}

/* font-family: 'Josefin Sans', sans-serif; */
/* font-family: "Noto Sans JP"; */


#gl-world{
	position:fixed;
	width:100%;
	height:100%;
	background-color:#fff;
}
.gl-event{
	position:fixed;
	width:100%; height:100%;
	top:0; left:0;
}
.gl-info{
	position:fixed;
	width:100%; height:100%;
	top:0; left:0;
	overflow: hidden;
	pointer-events: none;
}
@media screen and (min-width:769px){
	#gl-world{
		width:24%;
		min-width:440px;
		left:50%;
		transform: translateX(-50%);
	}
	.gl-info{
		width:24%;
		min-width:440px;
		left:50%;
		transform: translateX(-50%);
	}
}


.gl-header{
	position:fixed;
	width:100%; height:0;
	pointer-events: none;
	will-change: opacity;
	opacity:0;
}
.gl-title-blk{
	position:absolute;
	width:114px; height:auto;
	top:35px; left:50%;
	transform:translateX(-50%);
}
.gl-title-white{
	position:absolute;
	width:114px; height:auto;
	top:35px; left:50%;
	transform:translateX(-50%);
	opacity:0;
}
.gl-img-w{
	width:100%; height:auto;
}
.gl-img-w-h{
	width:100%; height:100%;
}
.gl-stepWrapp{
	position:absolute;
	top:0; left:0;
	width:100%;
	opacity:0;
}
.gl-step-blk{
	position:absolute;
	height:7px;
	left:50%; top:90px;
}
.gl-step-blk img{
	position:absolute;
	height:100%; width:auto;
	top:0; left:0;
	transform:translateX(-50%);
}
.gl-step-white{
	position:absolute;
	height:7px;
	left:50%; top:90px;
	opacity:0;
}
.gl-step-white img{
	position:absolute;
	height:100%; width:auto;
	top:0; left:0;
	transform:translateX(-50%);
}

.gl-btn-base{
	position:absolute;
	width:166px; height:44px;
	left:50%; bottom:74px;
	margin-left:-83px;
	border-radius:22px;
	background-color:#ffffff;
	text-align:center;
	font-size:14px;
	pointer-events: auto;
}
@media screen and (max-height:620px){
	.gl-btn-base{
		width:154px; height:38px;
		bottom:40px;
		border-radius:19px;
		margin-left:-77px;
	}
}


/* info */
.gl-info-wrapp{
	position: absolute;
	width:100%; height:100%;
	top:0; left:0;
	display:none;
	opacity:0;
}
.gl-info-s0{
	position: absolute;
	width:100%; height:100%;
	top:0; left:0;
	display:none;
	opacity:0;
}
.gl-s0-mess{
	position:absolute;
	width:100%;
	left:0; bottom:154px;
	text-align:center;
	font-size: 18px;
	line-height:27px;
}
.gl-s0-lead{
	position:absolute;
	width:100%;
	left:0; top:50%;
	transform:translateY(-50%);
	text-align:center;
	font-size: 16px;
	color:#ffffff;
	backface-visibility: hidden;
	white-space: nowrap;
}
.gl-s0-lead-sab{
	position:absolute;
	width:100%;
	left:0; top:50%;
	transform:translateY(-50%);
	text-align:center;
	font-size: 16px;
	line-height:2em;
	color:#ffffff;
}
.gl-s0-lead-sab p{
	opacity:0;
	backface-visibility: hidden;
}
.gl-s0-3-mess{
	position:absolute;
	width:100%;
	top:50%;
	left:0;
	transform:translateY(-194px);
	text-align: center;
	font-size:16px;
}
.gl-s0-3b-mess{
	position:absolute;
	width:100%;
	top:50%; left:0;
	transform:translateY(220px);
	text-align: center;
	font-size:16px;
}
.gl-s0-3-charaA{
	display: block;
	position:absolute;
	width:100%; bottom:-28px;
	font-size:15px;
	line-height:1.4em;
	text-align: center;
	backface-visibility: hidden;
}
.gl-s0-3-charaB{
	display: block;
	position:absolute;
	width:100%; bottom:-28px;
	font-size:15px;
	line-height:1.4em;
	text-align: center;
	backface-visibility: hidden
}
.gl-s0-3-charaBtnSet{
	position:absolute;
	top:50%; left:50%;
}
.gl-s0-3-charaABtn{
	position:absolute;
	width:180px; height:280px;
	top:0; left:0;
	margin-top:-140px; margin-left:-182px;
	pointer-events: auto;
	backface-visibility: hidden
}
.gl-s0-3-charaBBtn{
	position:absolute;
	width:180px; height:280px;
	top:0; left:0;
	margin-top:-140px; margin-left:2px;
	pointer-events: auto;
	backface-visibility: hidden
}
@media screen and (max-height:620px){
	.gl-s0-mess{
		bottom:124px;
	}
	.gl-s0-3-mess{
		transform:translateY(-150px);
	}
	.gl-s0-3b-mess{
		transform:translateY(170px);
	}
	/*.gl-s0-3-charaA{
		width:40%;
		left:10%;
		transform:translateY(120px);
		font-size:13px;
		line-height:1.3em;
	}
	.gl-s0-3-charaB{
		width:40%;
		left:50%;
		transform:translateY(120px);
		font-size:13px;
		line-height:1.3em;
	}*/
}

#gl-info-s0-3Btn{
	display:none;
	opacity:0;
	/*bottom:20px;*/
}
#gl-info-s0-4Btn{
	bottom:30px;
}
.gl-s0-4-mess{
	position:absolute;
	width:100%;
	bottom:90px; left:0;
	text-align: center;
	font-size:16px;
}
.gl-s0-5-name{
	position:absolute;
	width:160px; height:160px;
	left:50%; top:50%;
	margin-left:-80px; margin-top:-80px;
	/*background-color:rgba(255,0,0,0.2);*/
	transform-origin: center center;
}
.gl-s0-5-name-p{
	display:block;
	position:absolute;
	width:100%;
	bottom:-2px;
	font-size:15px;
	text-align: center;
	pointer-events: none;
}
.gl-s0-5-name-p-sab{
	position:absolute;
	width:100%;
	bottom:-2px;
	font-size:15px;
	text-align: center;
	pointer-events: none;
}
.gl-s0-5-mess{
	position:absolute;
	width:100%;
	top:0; left:0;
	transform:translateY(133px);
	text-align: center;
	font-size:16px;
	line-height:1.6em;
	/*color:#fff;*/
}
.gl-s0-6-mess{
	position:absolute;
	width:100%;
	top:50%; left:0;
	transform:translateY(134px);
	text-align: center;
	font-size:16px;
	line-height:1.6em;
}
.gl-s1-0-mess{
	position:absolute;
	width:100%;
	top:23%; left:0;
	text-align: center;
	font-size:16px;
	line-height:1.6em;
	color:#fff;
}
@media screen and (max-height:620px){
	.gl-s0-4-mess{
		bottom:60px;
	}
	.gl-s0-5-mess{
		transform:translateY(123px);
	}
	.gl-s0-5-name-p{
		bottom:-10px;
	}
	.gl-s0-5-name-p-sab{
		bottom:18px;
	}
}

.gl-info-s1{
	position: absolute;
	width:100%; height:100%;
	top:0; left:0;
	display:none;
	opacity:0;
}
.gl-info-s1Name{
	position:absolute;
	width:100%;
	left:0; bottom: 110px;
	font-size:14px;
	color:#fff;
	text-align: center;
}
.gl-info-s1Btn{
	position:absolute;
	width:166px; height:44px;
	left:50%; bottom:40px;
	margin-left:-83px;
	border-radius:22px;
	background-color: #fff;
	text-align:center;
	font-size:14px;
	pointer-events: auto;
}
@media screen and (max-height:620px){
	.gl-info-s1Btn{
		width:156px; height:38px;
		margin-left:-78px;
		border-radius:19px;
		bottom:20px;
	}
}

.gl-info-s2{
	position: absolute;
	width:100%; height:100%;
	top:0; left:0;
	display:none;
	opacity:0;
}
.gl-s2-mess{
	position:absolute;
	width:100%;
	top:50%; left:0;
	transform:translateY(-224px);
	text-align: center;
	font-size:16px;
	color:#fff;
	line-height:1.6em;
}
@media screen and (max-height:660px){
	.gl-s2-mess{
		transform:translateY(-200px);
	}
}
@media screen and (max-height:620px){
	.gl-s2-mess{
		transform:translateY(-155px);
	}
}
.gl-info-s2Name{
	position:absolute;
	width:100%;
	left:0; bottom: 110px;
	font-size:14px;
	color:#fff;
	text-align: center;
}
.gl-s2-nameList{
	display: none;
}
.gl-info-s2Btn{
	position:absolute;
	width:166px; height:44px;
	left:50%; bottom:40px;
	margin-left:-83px;
	border-radius:22px;
	background-color: #fff;
	text-align:center;
	font-size:14px;
	pointer-events: auto;
}
@media screen and (max-height:620px){
	.gl-info-s2Btn{
		width:156px; height:38px;
		bottom:40px;
		margin-left:-78px;
		border-radius:19px;
	}
}

/* 3 */
.gl-info-s3{
	position: absolute;
	width:100%; height:100%;
	top:0; left:0;
	display:none;
	opacity:0;
}
.gl-s3-1-mess{
	position:absolute;
	width:100%;
	top:50%; left:0;
	margin-top:-8px;
	text-align: center;
	font-size:15px;
	color:#fff;
	line-height:1.6em;
}
.gl-s3-mess{
	position:absolute;
	width:100%;
	top:50%; left:0;
	transform:translateY(-210px);
	text-align: center;
	font-size:18px;
	color:#fff;
	line-height:1.6em;
}
.gl-s3-mess2{
	font-size:24px;
	font-family: "tasaki serif reg", serif;
}
.gl-s3-4-mess{
	position:absolute;
	width:100%;
	top:50%; left:0;
	transform:translateY(-50%);
	text-align: center;
	font-size:16px;
	line-height:1.8em;
}
@media screen and (max-height:620px){
	.gl-s3-mess{
		transform:translateY(-150px);
	}
}
.gl-info-s3Name{
	position:absolute;
	width:100%;
	left:0; bottom: 110px;
	font-size:14px;
	color:#fff;
	text-align: center;
}
.gl-s3-nameList{
	display: none;
}
.gl-info-s3Btn{
	position:absolute;
	width:166px; height:44px;
	left:50%; bottom:40px;
	margin-left:-83px;
	border-radius:22px;
	background-color: #fff;
	text-align:center;
	font-size:14px;
	pointer-events: auto;
}
@media screen and (max-height:620px){
	.gl-info-s3Btn{
		width:156px; height:38px;
		bottom:40px;
		margin-left:-78px;
		border-radius:19px;
	}
}
.gl-s3-boxSelect{
	position:absolute;
	width:100%;
	left:0; bottom:24px;
	text-align: center;
	display:none;
	opacity:1;
}
.gl-info-s3BoxBtn{
	display: inline-block;
	width:230px; height:38px;
	margin-top:10px;
	margin-left:auto; margin-right:auto; 
	border-radius:19px;
	background-color: #fff;
	text-align:center;
	font-size:14px;
	pointer-events: auto;
	opacity:0;
}
.gl-info-s3PressBtn{
	position:absolute;
	width:124px; height:124px;
	bottom:40px; left:50%;
	margin-left:-62px;
	border-radius:50%;
	background-color:#fff;
	font-size:14px; line-height:1.5em;
	text-align: center;
	user-select: none;
	pointer-events: auto;
	will-change: transform,opacity;
}
.gl-info-s3PressBtn-s{
	display:block;
	position:relative;
}
.gl-info-s3PressBtnRing{
	display:block;
	position:absolute;
	width:118px; height:118px;
	top:3px; left:3px;
	background-image: conic-gradient(#777 -1deg, #fff -1deg);
    clip-path: circle();
    display: grid;
    place-items: center;
}
.gl-info-s3PressBtnRingCov{
	display:block;
	position:absolute;
	width:114px; height:114px;
	top:5px; left:5px;
	border-radius:50%;
	background-color:#fff;
}
@media screen and (max-height:620px){
	.gl-info-s3PressBtn{
		width:114px; height:114px;
		bottom:40px; left:50%;
		margin-left:-57px;
	}
	.gl-info-s3PressBtnRing{
		width:108px; height:108px;
		top:3px; left:3px;
	}
	.gl-info-s3PressBtnRingCov{
		width:104px; height:104px;
		top:5px; left:5px;
	}
}

.gl-s3-5-mess{
	position:absolute;
	width:100%; top:94px;
	font-size:22px;
	line-height:32px;
	text-align:center;
	color:#fff;
	display: none;
	will-change: opacity,transform;
}
.gl-s3-5-mess span{
	display:inline-block;
	padding-bottom: 5px;
	font-size:18px;
}
@media screen and (max-height:620px){
	.gl-s3-5-mess{
		top:90px;
		font-size:20px;
		line-height:30px;
	}
}


/* OPENING */
.gl-opening{
	position:fixed;
	width:100%; height:100%;
	top:0; left:0;
	display:none;
}
.gl-op-vidWrapp{
	position:absolute;
	width:75%; height:auto;
	top:52%; left:50%;
	transform: translate(-50%,-50%);
	opacity:0;
	will-change: opacity;
}
.gl-op-skip{
	position:absolute;
	width:60px;
	bottom:-44px;
	left:50%;
	transform:translateX(-50%);
}
.gl-op-skip img{
	width:100%; height:auto;
}
@media screen and (min-width:769px){
	.gl-opening{
		width:24%;
		left:50%;
		min-width:440px;
		transform:translateX(-50%);
	}
}
@media screen and (max-height:620px){
	.gl-op-vidWrapp{
		width:65%;
		top:52%; left:50%;
	}
}


/* page */
.gl-pageWrapp{
	position:fixed;
	top:0; left:0;
	width:100%; height:100%;
	overflow: hidden;
	display:none;
}
.gl-page-bg{
	position:absolute;
	top:0; left:0;
	width:100%; height:100%;
	background-color:#000;
	opacity: 0;
	pointer-events: none;
	will-change: opacity;
	backface-visibility: hidden;
	display:none;
}
.gl-page{
	width:100%; height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
}
.gl-pageIn{
	width:100%;
	margin-left:auto; margin-right:auto;
	margin-top:calc(100% - 126px);
	padding-bottom:40px;
	background-color:#E3F0EA;
	border-radius: 20px 20px 0 0;
	overflow-x: hidden;
}
@media screen and (min-width:769px){
	.gl-pageIn{
		width:24%;
		min-width:440px;
		margin-left:auto; margin-right: auto;
	}
}
.gl-page-til{
	padding-top:36px;
	font-size:14px;
	font-weight:700;
	text-align: center;
}
.gl-page-under{
	width:100%;
	padding-top:27px;
}
.gl-page-type{
	font-family:"tasaki serif reg", sans-serif;
	font-size:24px;
	text-align: center;
}
.gl-page-type span{
	font-family: "Zen Old Mincho", serif;
}
.gl-page-imgWrapp{
	position:relative;
	width:200px;
	margin-left:auto; margin-right:auto;
	margin-top:26px;
}
.gl-page-img-j0-a{
	position:absolute;
	left:182px; top:75px;
	will-change: transform;
}
.gl-page-img-j1-a{
	position:absolute;
	left:5px; top:228px;
	/*visibility: hidden;*/
	will-change: transform;
}
.gl-page-img-j2-a{
	position:absolute;
	left:-50px; top:178px;
	will-change: transform;
}
.gl-page-img-j0-b{
	position:absolute;
	left:182px; top:75px;
	will-change: transform;
}
.gl-page-img-j1-b{
	position:absolute;
	left:15px; top:220px;
	will-change: transform;
}
.gl-page-img-j2-b{
	position:absolute;
	left:-45px; top:168px;
	will-change: transform;
}
.gl-page-img-j0-c{
	position:absolute;
	left:182px; top:75px;
	will-change: transform;
}
.gl-page-img-j1-c{
	position:absolute;
	left:15px; top:228px;
	will-change: transform;
}
.gl-page-img-j2-c{
	position:absolute;
	left:-40px; top:188px;
	will-change: transform;
}
.gl-page-txt{
	width:270px;
	margin-left:auto; margin-right:auto;
	margin-top:28px;
	font-size:14px;
	line-height:1.5em;
}
.gl-page-link{
	display: block;
	width:170px; height:40px;
	margin-left:auto; margin-right:auto;
	margin-top:30px;
	border-radius:20px;
	background-color:#fff;
	text-align: center;
	font-size:13px;
	line-height:40px;
	color:#112c42;
}
.gl-page-wTil{
	margin-top:58px;
	margin-left:auto; margin-right:auto;
	font-size:16px;
	line-height:1.5em;
	text-align: center;
}
.gl-dl-set{
	position:relative;
	width:100%; height:434px;
	margin-top:25px;
	/*overflow-x:hidden;*/
}
.gl-dl-roll{
	position:absolute;
	width:100%; height:100%;
	top:0; left:0;
	font-size:0;
	white-space: nowrap;
}
.gl-dl-img{
	display:inline-block;
	position:relative;
	width:200px; height:100%;
}
.gl-dl-mess{
	margin-top:18px;
	margin-left:auto; margin-right:auto;
	font-size:13px;
	text-align: center;
}
.gl-page-foot{
	width:100%;
	text-align: center;
	margin-top:20px;
}
.gl-special-link{
	display:block;
	width:244px; height:44px;
	margin-left:auto; margin-right:auto;
	margin-top:54px;
	border-radius:22px;
	background-color:#ffffff;
	font-size:14px;
	line-height:44px;
}
.gl-replay-link{
	margin-left:auto; margin-right:auto;
	margin-top:26px;
	padding-bottom:2px;
	font-size:12px;
	border-bottom: 1px solid #112c42;
}


.gl-lang-menu{
	position:fixed;
	top:15px; right:15px;
	font-family:"tasaki serif reg", sans-serif;
	font-size:12px;
	color:#112c42;
	white-space: nowrap;
}
.gl-lang-menu-select{
	width:28px; height:12px;
}
.gl-lang-menu-name{
	display:inline-block;
}
.gl-lang-menu-mkWrapp{
	display:block;
	position:absolute;
	width:8px; height:5px;
	right:0; top:6px;
	font-size:0;
}
.gl-lang-menu-lang-1{
	display:block;
	position:absolute;
	left:0; top:30px;
	display:none;
}
.gl-lang-menu-lang-2{
	display:block;
	position:absolute;
	left:0; top:60px;
	display:none;
}


/* LOADING */
#gl-loading{
	position: fixed;
	width:100%; height:100%;
	top:0; left: 0;
	pointer-events: none;
}
.gl-loading-bg{
	position:absolute;
	width:100%; height:100%;
	top:0; left: 0;
	background-image:url(../image/loading_bg.webp);
	background-repeat:no-repeat;
	background-size:100% 100%;
}
.gl-loadingIn{
	position: absolute;
	width:100%; height:100%;
	top:0; left: 0;
	display:none;
}
.gl-loading-til{
	position:absolute;
	top:50%; left:50%;
	transform:translate(-50%,-50%);
}
.gl-loading-tilImg{
	width:285px;
}
.gl-loading-sab{
	margin-top:32px;
	font-size:15px; line-height:27px;
	text-align:center;
}
.gl-loading-balls{
	position:relative;
	width:103px; height:15px;
	margin-left:auto; margin-right:auto;
	margin-top:53px;
}
.gl-loading-ball{
	position: absolute;
	width:15px; height:15px;
	top:0; left:0;
	background-image:url(../image/loading_ball.webp);
	background-repeat:no-repeat;
	background-size:contain;
	will-change: transform,opacity;
}
#gl-loading-ball0{ left:0 }
#gl-loading-ball1{ left:22px }
#gl-loading-ball2{ left:44px }
#gl-loading-ball3{ left:66px }
#gl-loading-ball4{ left:88px }


/* ORIENTATION */
.gl-orientation{
	position:fixed;
	width:100%; height:100%;
	top:0; left:0;
	overflow: hidden;
	pointer-events: none;
	display:none;
}
.gl-orientation-bg{
	position:absolute;
	width:100%; height:100%;
	top:0; left:0;
	background-image:url(../image/orientation.webp);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
}
.gl-orientation p{
	position:absolute;
	top:50%; left:50%;
	transform:translate(-50%,-50%);
	color:#fff;
	font-size:16px;
	line-height: 2em;
	text-align: center;
}

/* PC */
.gl-pc{
	position:fixed;
	width:100%; height:100%;
	top:0; left:0;
	background-image:url(../image/pc/pc_bg.webp);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
	pointer-events: none;
	display:none;
}
.gl-pc-set{
	position:absolute;
	display:flex;
	flex-flow: wrap;
	width:90%;
	max-width:920px;
	top:50%; left:50%;
	transform:translate(-50%,-50%);
	align-items: center;
}
.gl-pc-title{
	width:50%;
}
.gl-pc-title-in{
	width:100%;
}
.gl-pc-qr{
	width:50%;
	text-align: right;
}
.gl-pc-qr-in{
	display:inline-block;
	width:65%;
	text-align: center;
}
.gl-pc-qr-in p{
	margin-top:24px;
	font-size:18px;
}
@media screen and (max-width:1000px){
	.gl-pc-qr-in p{
		margin-top:2.4vw;
		font-size:1.8vw;
	}
}
.gl-pc-foot{
	position:absolute;
	width:100%;
	bottom:30px; left:0;
	pointer-events: auto;
}
.gl-pc-sns{
	display: flex;
	align-items: center;
	justify-content: center;
}
.gl-pc-foot-icon{
	display:block;
	margin:0 18px;
}
.gl-pc-link{
	display: flex;
	align-items: center;
	justify-content: center;
}
.gl-pc-foot-a{
	display:block;
	margin:40px 12px 0 12px;
	font-size:13px;
	white-space: nowrap;
	border-bottom: 1px solid #112c42;
}

/* DUMMY */
.dummy-btn{
	position:fixed;
}
.dummy-btn-1{
	position:absolute;
	width:30px; height:30px;
	top:10px; left:10px;
	background-color:#fff;
	border:solid 2px #000;
	box-sizing:border-box;
	cursor:pointer;
}