/* ========================================================================
 reset
======================================================================== */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* ========================================================================
 l-cookie-banner
======================================================================== */
.l-cookie-banner {
  background: rgba(0, 0, 0, 0.8);
  bottom: 0;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 9999;
}
@media only screen and (max-width: 980px) {
  .l-cookie-banner {
    padding: 15px;
  }
}
@media print, screen and (min-width: 981px) {
  .l-cookie-banner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 32px;
    padding: 20px 48px 24px;
  }
}
.l-cookie-banner-text {
  font-size: 0.9375rem;
  color: var(--color-white);
  line-height: 1.8;
}
@media only screen and (max-width: 980px) {
  .l-cookie-banner-text {
    margin-bottom: 18px;
  }
}
.l-cookie-banner-text a {
  color: var(--color-white);
  text-decoration: underline;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
@media print, screen and (min-width: 981px) {
  .l-cookie-banner-text a:hover {
    text-decoration-color: transparent;
  }
}
/* ========================================================================
 variables
======================================================================== */
:root {
	--color-deepblue: #062EB1;
	--color-lightblue: #1792D4;
	--color-text-black: #2F495B;
}
/* ========================================================================
 common
======================================================================== */
html.body-fixed{
	overflow-y: scroll;
}
html,body{
	/* overscroll-behavior-y: none; */
}
body{
	width: 100%;
	color: var(--color-text-black);
	font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, system-ui, "sans-serif";
	font-weight: 400;
	letter-spacing: 0.05em;
}
a:link,a:visited{
	color:#fff;
	text-decoration: none;
}
a:hover,a:active{
	text-decoration: none;
}

.forPc{display:block;}
.forSp{display:none;}
@media only screen and (max-width: 980px) {
	html{
		/* overflow-y: scroll; */
	}
	.forPc{display:none;}
	.forSp{display:block;}
}

/* ========================================================================
 button
======================================================================== */
/* ------------------------------------------------------------------------
 bt-bordered
------------------------------------------------------------------------ */
.bt-bordered{
	width: fit-content;
	padding: 1em 2em 1.1em;
	display:block;
	position:relative;
	box-sizing:border-box;
	color:#fff;
	font-size:18px;
	line-height:1.3;
	text-align: center;
	text-decoration:none;
	border:solid 1px #fff;
}
.bt-bordered:before{
	content:"";
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	left:0; top:0;
	z-index:0;
	background: linear-gradient(to right, #062eb1 0%,#1792d4 100%);
	opacity:0;
	transition:opacity 0.2s ease-in-out;
}
@media (hover: hover) {
	.bt-bordered:hover:before{
		opacity:1;
	}
}
.bt-bordered span{
	display:block;
	position:relative;
	z-index:1;
}
.bt-bordered.exlink span:after{
	content: "";
	width: 0.95em;
    height: 0.95em;
	margin-left:0.5em;
	display: inline-block;
	background-image:url(/tour/_assets/img/bt_icon_exlink.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;

}
/* ------------------------------------------------------------------------
 bt-text
------------------------------------------------------------------------ */
.bt-text{
	width: fit-content;
	display: block;
	position: relative;
	color:#fff;
	line-height:1.8 !important;
	text-decoration:none;
}
.bt-text::before {
	content: "";
	width: 100%;
	height: 1px;
	display: block;
	left: 0;
	bottom: 0;
	position: absolute;
	background-color: rgba(255,255,255,1);
	
	transform-origin: right;
	scale: 0 1;
	transition: scale 0.2s ease-in-out;
}
@media (hover: hover) {
	.bt-text:hover::before {
		scale: 1;
		transform-origin: left;
	}
}

/* ========================================================================
 btMenu
======================================================================== */
#btMenu{
	width:82px;
	height:82px;
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position:absolute;
	right:0;
	top:0;
	background-image:url(/tour/_assets/img/header_menu_bg.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#btMenu:after{
	content: "";
	width:100%;
	height:100%;
	display: block;
	position: absolute;
	background-image:url(/tour/_assets/img/header_menu_bg_hover.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	opacity:0;
	transition:opacity 0.2s ease;
}
@media (hover: hover) {
	#btMenu:hover:after{
		opacity:1;
	}
}
#btMenu .text{
	width: fit-content;
	margin-top:6px;
	margin-bottom: 10px;
	display: block;
	font-family: "Anta", sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
	z-index: 1;
}
#btMenu > div{
	width:42px;
	height:0;
	margin-bottom:9px;
	border-top:solid 1px rgba(255,255,255,0.8);
	z-index: 1;
}
/* ========================================================================
 gnav
======================================================================== */
#gnav{
	width:100%;
	height:100dvh;
	position: fixed;
	left:0; top:0;
	z-index:2;

    -ms-overflow-style: none;
    scrollbar-width: none;
	overflow: scroll;

	visibility:hidden;
	opacity:0;
	transition: visibility 0.9s ease, opacity 0.9s ease;
}
#gnav::-webkit-scrollbar {
	display: none;
}
.gnav-open #gnav{
	visibility:visible;
	opacity:1;
}
#gnav .overlay{
	width: 100%;
    height: 100vh;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: rgba(255,255,255,1);
	transform-origin: center top;

	transform:scaleY(0);
	opacity:0;
	transition: opacity 1s cubic-bezier(.645,.045,.355,1) 0s, transform 1s cubic-bezier(.645,.045,.355,1) 0s;
}
.gnav-open #gnav .overlay{
	transform:scaleY(1);
	opacity:1;
}
#gnav .gnav-inner{
	width:100%;
	aspect-ratio: 1280 / 750;
	position:relative;
}
@media only screen and (max-width: 980px) {
	#gnav .gnav-inner{
		width:100%;
		height:100%;
		position: relative;
		overflow:scroll;
	}
}
/* ------------------------------------------------------------------------
 btClose
------------------------------------------------------------------------ */
#gnav .btClose{
	width:7%;
	aspect-ratio:1 / 1;
	display:block;
	position:absolute;
	right:0.8%;
	top: 3.3%;
	box-sizing: border-box;
	/* background-color:rgba(0,0,0,0.1); */
	cursor: pointer;
	z-index: 1;

	opacity:0;
	transition: opacity 0.6s ease 0.6s;
}
.gnav-open #gnav .btClose{
	opacity:1;
}
#gnav .btClose:before,
#gnav .btClose:after{
	content:"";
	width:80%;
	height:0;
	margin:auto;
	position:absolute;
	left:0; right:0;
	top:35%;
	border:solid 1px rgba(255,255,255,0.5);
}
#gnav .btClose:before{rotate:45deg}
#gnav .btClose:after{rotate:-45deg}
#gnav .btClose span{
	width:100%;
	display:block;
	position:absolute;
	left:0;
	bottom:5%;
	font-family: "Anta", sans-serif;
	color:#fff;
	font-size:1.25vw;
	font-weight:400;
	line-height: 1;
	text-align: center;
}
@media only screen and (max-width: 980px) {
	#gnav .btClose span{
        font-size: 10px;
        bottom: 3%;
	}
}
/* ------------------------------------------------------------------------
 gnavList
------------------------------------------------------------------------ */
#gnav .gnavList{
	width:100%;
	height:100%;
	display: block;
	position:absolute;
	left:0; top:0;
	background-image:url(/tour/_assets/img/gnav_bg.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
    z-index: 0;

    transform:translateY(-40%);
	opacity:0;
	transition: opacity 0.6s cubic-bezier(.645,.045,.355,1) 0.4s, transform 1s cubic-bezier(.645,.045,.355,1) 0s;
}
.gnav-open #gnav .gnavList{
	transform:translateY(0%);
	opacity:1;
}

#gnav .gnavList > li{
	position:absolute;
	translate: -50% -100%;
	transition: scale 0.2s ease;
}
@media (hover: hover) {
	#gnav .gnavList > li:hover {
		scale:1.15;
	}
	#gnav .gnavList > #gnav7:hover {
		scale:1;
	}
}

#gnav1{left:55.8594%; top:68.6667%;}
#gnav2{left:16.7188%; top:60.5333%;}
#gnav3{left:73.125%; top:48%;}
#gnav4{left:29.1406%; top:48.1333%;}
#gnav5{left:53.2031%; top:39.0667%;}
#gnav6{left:88.5938%; top:66.9333%;}
#gnav7{left:65.2344%; top:3.7333%;}

#gnav .gnavList > li a {
	min-width: 10vw;
    padding: 0.8em 1.6em 1em;
	margin-bottom: 20px;
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(6, 46, 177, 1) 52%, rgba(39, 155, 213, 1) 100%);

	opacity:0;
    transform:scale(0);
	transition: opacity 0.6s cubic-bezier(.645,.045,.355,1) 0s, transform 0.6s cubic-bezier( 0.68, -0.55, 0.265, 1.55 ) 0s;
}
.gnav-open #gnav .gnavList > li a{
	/* animation: gnavPopup 0.3s ease 0s 1 normal forwards; */
	opacity:1;
    transform:scale(1);
}
.gnav-open #gnav .gnavList > #gnav2 a {transition-delay:0.5s;}
.gnav-open #gnav .gnavList > #gnav4 a {transition-delay:0.65s;}
.gnav-open #gnav .gnavList > #gnav5 a {transition-delay:0.8s;}
.gnav-open #gnav .gnavList > #gnav1 a {transition-delay:0.95s;}
.gnav-open #gnav .gnavList > #gnav3 a {transition-delay:1.1s;}
.gnav-open #gnav .gnavList > #gnav6 a {transition-delay:1.25s;}

#gnav .gnavList > li a:before {
	content:"";
	width:100%;
	height:100%;
	display: block;
	position: absolute;
    left: 0;
    top: 0;
	background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(12, 85, 231, 1) 52%, rgba(72, 216, 248, 1) 100%);
	opacity:0;
	transition:opacity 0.2s ease;
}
#gnav .gnavList > li a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	border-style: solid;
	border-width: 15.5px 7.8px 0 7.8px;
	border-color: #2697d3 transparent transparent;
	translate: -50% 97%;
	transition:border-color 0.2s ease;
}
@media (hover: hover) {
	#gnav .gnavList > li a:hover:before {
		opacity:1;
	}
	#gnav .gnavList > li a:hover:after {
		border-color:#44d1f5 transparent transparent;
	}
}
#gnav .gnavList > li a span{
	width: 100%;
	display: block;
	position: relative;
	color: #ffffff;
	font-size: 1.4vw;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;	
	text-decoration:none;
	white-space: nowrap;
}

#gnav .gnavList #gnav7{
	width:24.375%;
	aspect-ratio:700 / 181;
	display: block;
	left:65.2344%; top:3.9161%;
	background-image:url(/tour/_assets/img/header_logo.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	translate: none;

	opacity:0;
	transition: opacity 0.6s ease 0.6s;
}
.gnav-open #gnav .gnavList #gnav7{
	opacity:1;
}
#gnav .gnavList #gnav7 a{
	width:100%;
	height:100%;
    padding: 0;
	margin-bottom: 0;
	display: block;
	background:none;
	border:none;
}
#gnav .gnavList #gnav7 a:before,
#gnav .gnavList #gnav7 a:after{
	content:none;
}
#gnav .gnavList #gnav7 span{
	display:none;
}

@media only screen and (max-width: 980px) {
	#gnav{
		
	}
	#gnav .overlay {
		background: linear-gradient(to bottom, rgba(56, 88, 193, 1) 0%, rgba(69, 168, 221, 1) 100%);
	}
	#gnav .btClose{
		width:56px;
		right:4%;
		top:11px;
	}
	#gnav .gnavList{
		/* padding:6% 4% 4%; */
		padding:75px 4% 4%;
		aspect-ratio: auto;
		display:flex;
		flex-wrap:wrap;
		justify-content: space-between;
		position:absolute;
		left:0; top:0;
		background:none;
	}
	#gnav .gnavList > li{
		width:32%;
		margin-bottom:3%;
		position:static;
		translate: none;
		transition: none;
	}
	#gnav .gnavList > li a {
        min-width: 0;
        height: 100%;
        padding: 78% 0 5%;
        margin-bottom: 20px;
        display: block;
        display: flex;
        justify-content: center;
        align-items: center;
        background: none;
        background-color: rgba(6, 46, 177, 0.2);
        background-repeat: no-repeat;
        background-size: 66%;
        background-position: center 0%;
        border: none;
		transition: opacity 0.6s cubic-bezier(.645,.045,.355,1) 0s, transform 0.6s cubic-bezier(.645,.045,.355,1) 0s;
	}
	#gnav .gnavList #gnav1 a {background-image: url(/tour/_assets/img/gnav1_image_sp.webp);}
	#gnav .gnavList #gnav2 a {background-image: url(/tour/_assets/img/gnav2_image_sp.webp);}
	#gnav .gnavList #gnav3 a {background-image: url(/tour/_assets/img/gnav3_image_sp.webp);}
	#gnav .gnavList #gnav4 a {background-image: url(/tour/_assets/img/gnav4_image_sp.webp);}
	#gnav .gnavList #gnav5 a {background-image: url(/tour/_assets/img/gnav5_image_sp.webp);}
	#gnav .gnavList #gnav6 a {background-image: url(/tour/_assets/img/gnav6_image_sp.webp);}
	#gnav .gnavList #gnav7 a {background-image: url(/tour/_assets/img/gnav7_image_sp.webp);}

	.gnav-open #gnav .gnavList > #gnav1 a {transition-delay:0.6s;}
	.gnav-open #gnav .gnavList > #gnav2 a {transition-delay:0.75s;}
	.gnav-open #gnav .gnavList > #gnav3 a {transition-delay:0.9s;}
	.gnav-open #gnav .gnavList > #gnav4 a {transition-delay:1.05s;}
	.gnav-open #gnav .gnavList > #gnav5 a {transition-delay:1.2s;}
	.gnav-open #gnav .gnavList > #gnav6 a {transition-delay:1.35s;}
	.gnav-open #gnav .gnavList > #gnav7 a {transition-delay:1.5s;}

	#gnav .gnavList > li a::before,
	#gnav .gnavList > li a::after {
		content: none;
	}
	#gnav .gnavList > li a span{
		width:100%;
		padding:0 15px;
		display: block;
		font-size: 18px;
		box-sizing: border-box;
	}

	#gnav .gnavList #gnav7{
		width:32%;
		aspect-ratio:auto;
		position: static;
		background:none;
	}
	#gnav .gnavList #gnav7 a{
		padding: 80% 0 0;
		margin-bottom: 20px;
		background-color:rgba(6,46,177,0.2);
		background-repeat: no-repeat;
		background-size:66%;
        background-position: center -10%;
	}
	#gnav .gnavList #gnav7 span{
		display:block;
	}
}
@media only screen and (max-width: 768px) {
	#gnav .gnavList > li,
	#gnav .gnavList #gnav7{
		width:48.5%;
	}
}
@media only screen and (max-width: 530px) {
	#gnav .gnavList > li a span{
		font-size:16px;
	}
	#gnav .gnavList > #gnav6 a span{
		font-size:clamp(0px,3.396vw,18px);
	}
}