/* ------------------------------------------------------------------------
 body
------------------------------------------------------------------------ */
body{
	
}
/* ========================================================================
 loading
======================================================================== */
.loading{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	left:0;
	top: 0;
	background-image:url(/tour/_assets/img/loading_bg.webp);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:left bottom;
	z-index: 100;
}
.loading .image{
	width:clamp(1px, 80%, 1080px);
	aspect-ratio: 1280 / 601;
	display: block;
	position:relative;
	background-image:url(/tour/_assets/top/img/top_loading_image.webp);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:cover;
}
.loading .text {
	width: fit-content;
	display:flex;
	position:absolute;
	left:0;
	top:85%;
	color: #fff;
	font-size: clamp(12px, 1.1852vw, 16px);
	line-height:1;
}
.loading .text .word{
	margin-right:2px;
}
.loading .text .dot {
	margin-left:2px;
	position:relative;
	top:-1px;
	animation: dots 0.6s infinite steps(2, start);
}
.loading .text .dot:nth-child(2) {animation-delay: 0.2s;}
.loading .text .dot:nth-child(3) {animation-delay: 0.4s;}
@keyframes dots {
	0% { visibility: visible;}
	79% { visibility: visible;}
	80% { visibility: hidden;}
	100% { visibility: hidden;}
}
@media only screen and (max-width: 980px) {
	.loading .text {
		font-size: 13px;
	}
}
@media only screen and (max-width: 768px) {
	.loading .text {
		top: 87%;
	}
}

/* ========================================================================
 all
======================================================================== */
#all{
	width:100%;
	min-height: 100dvh;
	position: relative;
	clip-path: circle(0px at 50% 50%);
	background-image:url(/tour/_assets/top/img/top_bg.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left bottom;
	z-index:101;
	visibility:hidden;
}
@media only screen and (max-width: 768px) {
	#all{
		background-image:url(/tour/_assets/top/img/top_bg_sp.webp);
		background-size: 100% 100%;
		background-position: center;
	}
}
/* ========================================================================
 gheader
======================================================================== */
#gheader{
	width:82px;
	height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
	position:fixed;
	right:0; top:0;
	z-index: 1;
}
#gheader .copyright{
    margin-bottom: 50%;
    margin-right: 12%;
	display:inline-block;
	color:#fff;
	font-size:12px;
	font-weight:300;
	white-space: nowrap;
	rotate:90deg;
}
#header-logo{
	display:none;
}
#header-logo img{
	width:100%;
	display: block;
}
@media only screen and (max-width: 980px) {

}
@media only screen and (max-width: 768px) {
	#gheader{
		width:100%;
		height:56px;
		display:block;
		position:fixed;
		background: linear-gradient(to right, var(--color-deepblue) 0%, var(--color-lightblue) 100%);
		transition: transform 0.3s 0.3s;
	}
	#gheader.hidden {
		transform: translateY(-56px);
	}
	#header-logo{
		width:138px;
		margin-top:12px;
		margin-left:13px;
		display:block;
	}
	#btMenu{
		width:56px;
		height:56px;
		background-image:none;
	}
	#btMenu:after{
		content:none;
	}
	#btMenu .text{
		margin-top:4px;
		margin-bottom: 6px;
		font-size: 11px;
	}
	#btMenu > div{
		width:32px;
		margin-bottom:4px;
		border-top:solid 1px rgba(255,255,255,0.8);
	}
	#gheader .copyright{
		display:none;
	}
}

/* ========================================================================
 contents
======================================================================== */
.contents{
	width:calc(100% - 82px);
	padding:34px 1.5025% 4% 2.7546%;
	position: relative;
	box-sizing:border-box;
	z-index: 0;
}
@media only screen and (max-width: 980px) {
	.contents{
		padding:34px 1.7% 4% 2.7546%;
	}
}
@media only screen and (max-width: 768px) {
    .contents {
		width: 100%;
        padding: 75px 5% 40px;
    }
}
/* ========================================================================
 grid
======================================================================== */
/* ------------------------------------------------------------------------
 grid-container
------------------------------------------------------------------------ */
.grid-container {
	width:100%;
	aspect-ratio: 600 / 490;
	margin-bottom:50px;
	display: grid;
	row-gap: 2%;
	column-gap: 2%;
	grid-template-rows: repeat(5, 1fr);
	grid-template-columns: repeat(6, 1fr);

	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}
/* ------------------------------------------------------------------------
 grid-panel
------------------------------------------------------------------------ */
.grid-panel {
	display: block;
	position: relative;
	overflow:hidden;
	/* background-color: rgba(255,255,255,1); */
}
#panel1{
	grid-column: 1 / 3;
	grid-row: 1 / 4;
}
#panel2{
	grid-column: 3 / 5;
	grid-row: 1 / 3;
}
#panel5{
	grid-column: 5 / 7;
	grid-row: 2 / 3;
}
#panel6{
	grid-column: 3 / 5;
	grid-row: 3 / 4;
}
#panel10{
	grid-column: 2 / 4;
	grid-row: 4 / 5;
}
#panel12{
	grid-column: 5 / 7;
	grid-row: 4 / 5;
}
/* #panel16{
	grid-column: 4 / 6;
	grid-row: 5 / 6;
}
#panel18{
	grid-column: 1 / 7;
	grid-row: 6 / 7;
} */

@media only screen and (max-width: 980px) {
	.grid-container {
		aspect-ratio: 600 / 1202;
		row-gap: 1.2%;
		column-gap: 2.2%;
		grid-template-columns: repeat(4, 1fr);	/* 2列を均等なwidthで作成 */
		grid-template-rows: repeat(8, 1fr);	/* 12行を均等なheightで作成 */
	}
	#panel1{
		grid-column: 1 / 3;
		grid-row: 1 / 4;
	}
	#panel2{
		grid-column: 3 / 5;
		grid-row: 1 / 3;
	}
	#panel3{
		grid-column: 1 / 2;
		grid-row: 4 / 5;
	}
	#panel4{
		grid-column: 2 / 3;
		grid-row: 4 / 5;
	}
	#panel5{
		grid-column: 1 / 3;
		grid-row: 5 / 6;
	}
	#panel6{
		grid-column: 3 / 5;
		grid-row: 3 / 4;
	}
	#panel7{
		grid-column: 3 / 4;
		grid-row: 4 / 5;
	}
	#panel8{
		grid-column: 4 / 5;
		grid-row: 4 / 5;
	}
	#panel9{
		grid-column: 1 / 2;
		grid-row: 6 / 7;
	}
	#panel10{
		grid-column: 2 / 4;
		grid-row: 6 / 7;
	}
	#panel11{
		grid-column: 4 / 5;
		grid-row: 6 / 7;
	}
	#panel12{
		grid-column: 3 / 5;
		grid-row: 5 / 6;
	}
	#panel13{
		grid-column: 1 / 2;
		grid-row: 7 / 8;
	}
	#panel14{
		grid-column: 2 / 3;
		grid-row: 7 / 8;
	}
	#panel15{
		grid-column: 2 / 3;
		grid-row: 8 / 9;
	}
	/* #panel16{
		grid-column: 3 / 5;
		grid-row: 7 / 8;
	}
	#panel17{
		grid-column: 1 / 2;
		grid-row: 8 / 9;
	} */
}
@media only screen and (max-width: 768px) {
	.grid-container {
		aspect-ratio: 600 / 3743;
		margin-bottom:50px;
		column-gap: 4%;
		row-gap: 0.6%;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(12, 1fr);
	}
	#panel1{
		grid-column: 1 / 3;
		grid-row: 1 / 2;
	}
	#panel2{
		grid-column: 1 / 3;
		grid-row: 2 / 3;
	}
	#panel3{
		grid-column: 1 / 2;
		grid-row: 3 / 4;
	}
	#panel4{
		grid-column: 2 / 3;
		grid-row: 3 / 4;
	}
	#panel5{
		grid-column: 1 / 3;
		grid-row: 4 / 5;
	}
	#panel6{
		grid-column: 1 / 3;
		grid-row: 6 / 7;
	}
	#panel7{
		grid-column: 1 / 2;
		grid-row: 5 / 6;
	}
	#panel8{
		grid-column: 2 / 3;
		grid-row: 5 / 6;
	}
	#panel9{
		grid-column: 1 / 2;
		grid-row: 7 / 8;
	}
	#panel10{
		grid-column: 1 / 3;
		grid-row: 8 / 9;
	}
	#panel11{
		grid-column: 1 / 2;
		grid-row: 10 / 11;
	}
	#panel12{
		grid-column: 1 / 3;
		grid-row: 9 / 10;
	}
	#panel13{
		grid-column: 2 / 3;
		grid-row: 10 / 11;
	}
	#panel14{
		grid-column: 2 / 3;
		grid-row: 7 / 8;
	}
	#panel15{
		grid-column: 1 / 2;
		grid-row: 11 / 12;
	}
}

.grid-panel > img,
.grid-panel > .image,
.grid-panel > .image img{
	width:100%;
	display:block;
}

.bt{
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25); 
}
.bluecover{
	padding:20px;
	margin:auto;
	display:flex;
	justify-content: center;
	align-items: center;
	position:absolute;
	left:0; right:0; top:0; bottom:0;
	box-sizing: border-box;
	font-size:18px;
	font-weight:600;
	line-height:1.6;
	text-align: center;
	background: linear-gradient(to bottom,  rgba(6,46,177,0.8) 0%,rgba(24,162,237,0.8) 100%);
	opacity:0;
	scale:1.25;
	transition:opacity 0.3s ease, scale 0.3s ease-in-out;
}
@media (hover: hover) {
	.bt:hover .bluecover{
		opacity:1;
		scale:1;
	}
}
@media only screen and (max-width: 1500px) {
	.bt.irb-s .bluecover{
		font-size:16px;
	}
}
@media only screen and (max-width: 1280px) {
	.bt.irb-s .bluecover{
		font-size:15px;
	}
}


.bt:after{
	content:"";
	margin:auto;
	display: block;
	position:absolute;
	left:0; right:0; top:0; bottom:0;
	box-sizing: border-box;
	border:solid 2px rgba(255,255,255,1);
	box-shadow: 0 0 6px 0 #fff;
	opacity:0;
	transition:0.3s ease-in-out;
}
@media (hover: hover) {
	.bt:hover:after{
		left:8px; right:8px; top:8px; bottom:8px;
		opacity:1;
	}
}
@media only screen and (max-width: 768px) {
	.bt:after{
		content:none;
	}
}

#panel1{
	overflow: visible;
}
#panel1 .head-logo{
	width:95%;
	margin-top:1%;
	margin-bottom:3.75%;
	display: block;
}
#panel1 .head-illust{
    width: 102%;
	display: block;
    position: relative;
    left: -3%;
}
#panel1 .head-illust img{
	width:100%;
	display:block;
}
@media only screen and (max-width: 768px) {
	#panel1 .head-logo{
		display: none;
	}
	#panel1 .head-illust{
		width: 85.42%;
		margin:0 auto;
		left: auto;
	}
}

/* ------------------------------------------------------------------------
 footer
------------------------------------------------------------------------ */
footer{
	width:100%;
}
footer .footer-head{
	width:100%;
	margin-bottom:1.5%;
	display:flex;
	justify-content:space-between;
}
footer .footer-logo{
	width:430px;
	display:block;
}
footer .btbox{
	display:flex;
}
footer .btbox a{
	margin-left:15px;
	align-self: flex-end;
	font-size: 15px;
}
footer .btbox a:first-child{
	margin-left:0;
}
footer .footer-extralinks{
	width:100%;
	padding-top: 1.5%;
	display:flex;
	justify-content:flex-end;
	border-top:solid 1px rgba(255,255,255,1);
}
footer .footer-extralinks a{
    font-size: 12px;
	margin-left: 1.8em;
}
footer .footer-extralinks a:first-child{
	margin-left:0;
}
footer .copyright{
	width:100%;
	display:none;
	color:rgba(255,255,255,1);
	font-size:12px;
	font-weight:300;
	text-align:center;
}
@media only screen and (max-width: 1280px) {
	footer .footer-logo{
		width:38%;
	}
}
@media only screen and (max-width: 980px) {
	footer .footer-head{
		margin-bottom:2%;
	}
	footer .footer-logo{
		width:42%;
	}
	footer .btbox a{
		padding: 12px 1.5em 13px;
		margin-left:10px;
		font-size: 13px;
	}
	footer .footer-extralinks{
		padding-top:2%;
	}
}
@media only screen and (max-width: 768px) {
	footer .footer-head{
		width:100%;
		margin-bottom:12%;
		flex-direction: column;
	}
	footer .footer-logo{
		width:clamp(0px,100%,420px);
		margin:0 auto 5%;
	}
	footer .btbox{
		width:100%;
		flex-direction: column;
	}
	footer .btbox a{
		width:100%;
		margin-bottom:2%;
		font-size:15px;
		text-align: center;
	}
	footer .btbox a:last-child{
		margin-bottom:0;
	}
	footer .footer-extralinks{
		padding-top:5%;
		margin-bottom:7%;
		justify-content:center;
	}
	footer .footer-extralinks a{
        font-size: 12px;
        letter-spacing: 0;
	}
	footer .copyright{
		display: block;
	}
}