@charset "utf-8";

.gl-brtb{
	display:none;
}
@media screen and (min-width:1024px){
	.gl-brtb{
		display:inline;
	}
}

.gl-gothic{
	font-family: "Noto Sans JP","Noto Sans",sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}

#gl-world{
	position:fixed;
	width:100%;
	height:calc(100% - 60px);
	height:calc(100lvh - 60px);
	background-color:#222;
	overflow:hidden;
}
#gl-world-in{
	position:absolute;
	width:100%; height:100%;
	top:0; left:0;
}
.gl-world-grad{
	position:fixed;
	width:100%; height:250px;
	left:0; bottom:60px;
	background: linear-gradient(0deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .5) 70%, transparent);
	backface-visibility: hidden;
	opacity:0;
	pointer-events: none;
	/*visibility: hidden;*/
}
/*
slide image
*/
.gl-slide-stage{
	position:absolute;
	width:0; height:0;
	backface-visibility: hidden;
	top:50%; left:50%;
	transform:translate3D(0,0,0);
}
.gl-slide-img{
	position:absolute;
	backface-visibility: hidden;
	top:50%; left:50%;
	transform:translate3D(-50%,-50%,0);
	display:none;
}
/*
text
*/
.gl-page-scroll-text{
	position:fixed;
	width:100%;
	padding:0 20px;
	bottom:calc(86px + 40px);
	backface-visibility: hidden;
	color:#fff;
	box-sizing: border-box;
	opacity:0;
	display:none;

	font-family: "Noto Sans JP","Noto Sans",sans-serif;
	font-style: normal;
	font-weight: 600;
	text-align: center;
	font-size:16px;
	line-height:1.8em;
	letter-spacing: 0;
}
.gl-page-scroll-textEn{
	position:fixed;
	width:100%;
	padding:0 20px;
	bottom:calc(86px + 40px);
	backface-visibility: hidden;
	color:#fff;
	box-sizing: border-box;
	opacity:0;
	display:none;

	font-family: "Noto Sans JP","Noto Sans",sans-serif;
	font-style: normal;
	text-align: center;
	font-weight: 600;
	font-size:16px;
	line-height:1.8em;
	letter-spacing: 0;
}
.gl-page-scroll-textB{ /*キャプション1行*/
	bottom:calc(120px + 40px);
}
.gl-page-scroll-textB2{ /*キャプション2行*/
	bottom:calc(138px + 40px);
}
.gl-page-scroll-textBBt{ /*ボタン*/
	/*bottom:152px;*/
	bottom:calc(86px + 40px);
}
.gl-page-scroll-text h2{
	margin:0 0 6px; padding:0;
	font-size: 18px;
}
.gl-page-scroll-textEn h2{
	margin:0 0 4px; padding:0;
	font-size: 18px;
}
.gl-page-scroll-cap{
	position:fixed;
	width:100%;
	padding:0 20px;
	bottom:calc(82px + 44px);
	backface-visibility: hidden;
	color:#fff;
	box-sizing: border-box;
	opacity:0;
	display:none;

	font-family: "Noto Sans JP","Noto Sans",sans-serif;
	font-style: normal;
	text-align: center;
	/*font-weight: 600;*/
	font-weight: 400;
	font-size:10px;
	line-height:1.8em;
	letter-spacing: 0;
}
@media screen and (min-width:1024px){
	.gl-page-scroll-text{
		padding:0 60px;
		bottom:190px;
		font-size:24px;
		line-height:1.8em;
	}
	.gl-page-scroll-textEn{
		padding:0 60px;
		bottom:190px;
		font-size:24px;
		line-height:1.8em;
	}
	.gl-page-scroll-textB{ /*キャプション1行*/
		bottom:calc(50px + 190px);
	}
	.gl-page-scroll-textB2{ /*キャプション2行*/
		bottom:calc(77px + 190px);
	}
	.gl-page-scroll-text h2{
		margin:0 0 9px; padding:0;
		font-size: 27px;
	}
	.gl-page-scroll-textEn h2{
		margin:0 0 9px; padding:0;
		font-size: 27px;
	}
	.gl-page-scroll-cap{
		padding:0 60px;
		bottom:190px;
		font-size:15px;
		line-height:1.8em;
	}
}

/* for intro */
.gl-page-scroll-textIntro{
	bottom:86px;
}
.gl-page-scroll-textBIntro{
	bottom:120px;
}
.gl-page-scroll-textB2Intro{
	bottom:138px;
}
.gl-page-scroll-capIntro{
	bottom:82px;
}


.gl-func-btn{
	display: flex;
	min-width:190px;
	height:48px;
	margin-top:20px;
	margin-left:auto; margin-right:auto;
	background-color:#00A4E9;
	justify-content: center;
    align-items: center;
	gap:6px;
	border-radius:4px;
	pointer-events: auto;
}
.gl-func-btn p{
	display:inline-block;
	/*color:#33302b;*/
	color:#ffffff;
	font-size:14px;
	font-weight:700;
}
.gl-func-icon{
	width:20px; height:20px;
}
.gl-func-icon svg{
	vertical-align: top;
}
@media screen and (min-width:1024px){
	.gl-func-btn{
		min-width:285px;
		height:72px;
		margin-top:32px;
		gap:15px;
		border-radius:6px;
	}
	.gl-func-btn p{
		font-size:19px;
	}
	.gl-func-icon{
		width:25px; height:25px;
	}
}

.gl-compare-wrapp{
	position:relative;
	width:100%; height:100%;
	background-color:#ffffff;
	overflow:hidden;
}
.gl-compare-now{
	position:absolute;
	width:100%; height:100%;
	top:0; left:0;
	background-image:none;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
	background-color:#ffffff;
}
.gl-compare-old{
	position:absolute;
	width:100%; height:100%;
	top:0; left:0;
	background-image:none;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
	background-color:#ffffff;
	clip-path: inset(50% 0px 0px);
	pointer-events: none;
}
.gl-compare-center{
	position:absolute;
	width:100%;
	left:0; top:0;
	backface-visibility: hidden;
	pointer-events: none;
}
.gl-compare-center-line{
	position:absolute;
	width:100%; height:3px;
	background-color:#00A4E9;
	transform:translateY(-50%);
}
.gl-compare-center-btn{
	position:absolute;
	width:36px; height:36px;
	top:50%; left:50%;
	border-radius:50%;
	border: 3px solid #00A4E9;
	background-color:#fff;
	transform:translate(-50%,-50%);
	box-sizing: border-box;
}
.gl-compare-center-tri1{
	position:absolute;
	background-color: #000;
    height: 6px; width: 9px;
	top:50%; left:50%;
	transform:translate(-50%,calc(-50% - 7px));
    -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.gl-compare-center-tri2{
	position:absolute;
	background-color: #000;
    height: 6px; width: 9px;
	top:50%; left:50%;
	transform:translate(-50%,calc(-50% + 7px)) rotate(180deg);
    -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.gl-arcomp-count{
	display:none;
	position:absolute;
	top:50%; left:50%;
	transform:translate(-50%,-50%);
	text-align: center;
	color:#fff;
	font-size:40px;
	font-family: "Instrument Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	backface-visibility: hidden;
	pointer-events: none;
}
.gl-arcomp-ring{
	position:absolute;
	width:100px; height:100px;
	top:50%; left:50%;
	margin-top:-50px; margin-left:-50px;
	backface-visibility: hidden;
	pointer-events: none;
}
.gl-arcomp-ringBase{
	stroke-dasharray: 290;
	stroke-dashoffset: 0;
}
.gl-arcomp-ringAnim{
	animation: gl-arcomp-circle 5s linear forwards;
	transform: rotate(90deg) scaleX(-100%);
	transform-origin: 50% 50%;
}
@keyframes gl-arcomp-circle{
  to{
	stroke-dashoffset:290;
  }
  from{
	stroke-dashoffset:0;
  }
}

.gl-arcomp-vidWrapp{
	position:absolute;
	width:100%; height:100%;
	top:0; left:0;
	pointer-events: none;
	overflow: hidden;
	backface-visibility: hidden;
	display:none;
	opacity:0;
}

/* object3Dコントローラー */
.gl-obj3d-cont{
	position:absolute;
	width:40px; height:154px;
	right:20px; top:50%;
	transform:translateY(-50%);
	border-radius:20px;
	background-color:#2E2D2B;
	background-image:url(../image/obj3d_cont_line.png);
	background-size:contain;
}
.gl-obj3d-cont-up{
	position:absolute;
	width:40px; height:40px;
	top:0; left:0;
	background-image:url(../image/obj3d_cont_up.png);
	background-size:contain;
}
.gl-obj3d-cont-down{
	position:absolute;
	width:40px; height:40px;
	bottom:0; left:0;
	background-image:url(../image/obj3d_cont_down.png);
	background-size:contain;
}