@charset "UTF-8";

/* HOME */

#wrapper { padding-top: 0; }
#content { padding-bottom: 0 !important; }
#content > *, #footer { position: relative; }
.pageLink {
	position: relative;
	font-family: var(--sansSerif);
	a {
		display: block;
		position: relative;
		transition-duration: .3s;
		transition-property: color;
		box-sizing: border-box;
		&::before,
		&::after {
			content: "";
			position: absolute;
			z-index: 0;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transition-duration: .3s;
			transition-property: opacity;
		}
		&::after { opacity: 0; }
		&:hover {
			&::before { opacity: 0; }
			&::after { opacity: 1; }
		}
		span {
			display: block;
			position: relative;
			z-index: 1;
		}
	}
}
@media screen and (min-width:769px), print{
	body:not(.reverse) #header {
		background-color: transparent;
		#hLogo {
			path, polygon { fill: #fff; }
			filter: drop-shadow(0 0 3px #000);
		}
		#gNavi {
			.list ul {
				color: #fff;
				filter: drop-shadow(0 0 3px #000);
				a::after { background-color: #fff; }
			}
		}
		.buttons {
			.langMenu {
				color: #fff;
				filter: drop-shadow(0 0 3px #000);
				ul > li > *::after {
					background-color: #fff;
				}
			}
		}
	}

	#content { padding-top: 0 !important; }
	.textBox {
		.title {
			font-size: 24px;
			line-height: 40px;
		}
		.text { margin-top: 35px; }
	}
	.pageLink {
		margin-top: 45px;
		a {
			width: 300px;
			padding: 3px 15px;
		}
	}
}
@media screen and (max-width:768px){
	.textBox {
		padding-inline: 25px;
		.title {
			font-size: 20px;
			line-height: 34px;
		}
		.text { margin-top: 20px; }
	}
	.pageLink {
		margin-top: 30px;
		a { padding: 3px 16px; }
	}
}

#mainVis {
	color: #fff;
	&::before {
		content: "";
		top: 0;
		left: 0;
		z-index: 0;
		width: 100%;
		height: 1000px;
		display: block;
		position: fixed;
		background: url(../images/home/mainvis.webp) no-repeat center center;
	}
	&::after {
		content: "";
		z-index: 1;
		left: 0;
		bottom: 0;
		width: 100%;
		position: absolute;
		background-image: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
		background-size: 100% 100%;
	}
	.inner {
		z-index: 2;
		position: relative;
	}
	.fadeIn { transition-delay: 1s; }
	@media screen and (min-width:769px), print{
		&::before { background-size: cover; }
		&::after { height: 200px; }
		.inner {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 1000px;
			filter: drop-shadow(0 0 3px #000);
			#mainVisTitle {
				font-size: 32px;
				line-height: 48px;
			}
			.text {
				margin-top: 35px;
			}
		}
	}
	@media screen and (max-width:768px){
		&::before {
			max-height: 100vh;
			background-size: auto 100%;
		}
		&::after { height: 150px; }
		.inner {
			padding: 115px 0 135px 25px;
			background-color: rgba(0,0,0,0.25);
			filter: drop-shadow(0 0 1.5px #000);
			#mainVisTitle {
				font-size: 24px;
				line-height: 39px;
			}
			.text { margin-top: 15px; }
		}
	}
}

#room {
	color: #fff;
	display: flex;
	background-color: #000;
	.images img {
		width: 100%;
		object-fit: cover;
	}
	.pageLink {
		a {
			color: #787878;
			&::before {
				background: linear-gradient(90deg, #262626 0%, #000 100%);
			}
			&::after {
				background: linear-gradient(90deg, #64645a 0%, #000 100%);
			}
			&:hover { color: #fff; }
		}
	}
	@media screen and (min-width:769px), print{
		align-items: flex-start;
		flex-direction: row-reverse;
		justify-content: space-between;
		padding-top: 110px;
		.images {
			width: calc(50% - 35px);
			img { height: 200px; }
		}
		.textBox {
			width: 50%;
			padding-top: 60px;
			padding-inline: 35px;
			box-sizing: border-box;
		}
	}
	@media screen and (max-width:768px){
		padding-top: 50px;
		flex-direction: column-reverse;
		.images {
			margin-right: 25px;
			img { height: 150px; }
		}
		.textBox {
			padding-block: 45px 38px;
		}
		.pageLink a {
			color: #fff;
			&::before { opacity: 0 !important; }
			&::after { opacity: 1 !important; }
		}
	}
}

#facility {
	color: #fff;
	background-color: #000;
	&::before {
		content: "";
		left: 0;
		bottom: 0;
		width: 100%;
		display: block;
		background: url(../images/home/bg_facility.webp) no-repeat center center;
		background-size: cover;
		position: absolute;
	}
	.fInner{
		position: relative;
		&::after {
			content: "";
			display: block;
			background: url(../images/home/img_facility.webp) no-repeat center center;
			background-size: 100%;
			aspect-ratio: 13 / 11;
		}
	}
	.pageLink {
		a {
			color: #787878;
			&::before {
				background: linear-gradient(90deg, #262626 0%, #000 100%);
			}
			&::after {
				background: linear-gradient(90deg, #64645a 0%, #000 100%);
			}
			&:hover { color: #fff; }
		}
	}
	@media screen and (min-width:769px), print{
		padding-bottom: 100px;
		&::before { top: 100px; }
		.fInner {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			&::after {
				width: calc(50% + 50px);
				max-width: 650px;
			}
			.textBox {
				display: flex;
				align-items: flex-end;
				flex-direction: column;
				width: calc(50% - 50px);
				box-sizing: border-box;
				padding-inline: 35px;
				padding-bottom: 115px;
				& > * {
					width: 100%;
					max-width: 485px;
				}
			}
		}
		.splide {
			margin-top: -65px;
			img { width: 320px; }
		}
	}
	@media screen and (max-width:768px){
		padding-block: 45px 100px;
		&::before { top: 60px; }
		.fInner {
			&::after {
				margin-top: -15vw;
				margin-left: 50px;
				position: relative;
				pointer-events: none;
			}
		}
		.pageLink a {
			color: #fff;
			&::before { opacity: 0 !important; }
			&::after { opacity: 1 !important; }
		}
		.splide {
			margin-top: -8vw;
			img { width: 160px; }
		}
	}
}

#location {
	background: url(../images/home/bg_location.webp) no-repeat center center;
	background-size: cover;
	.textBox {
		color: #fff;
		.pageLink a {
			color: #689acd;
			&::before {
				background: linear-gradient(90deg, #001d3f 0%, rgba(0, 90, 159, 0) 100%);
			}
			&::after {
				background: linear-gradient(90deg, #0c76bf 0%, rgba(0, 90, 159, 0) 100%);
			}
			&:hover { color: #fff; }
		}
	}
	@media screen and (min-width:769px), print{
		.textBox {
			padding-block: 95px 240px;
			.fadeIn {
				filter: drop-shadow(0 0 3px #000);
			}
		}
	}
	@media screen and (max-width:768px){
		position: relative;
		padding-block: 40px 173px;
		&::before {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.25);
		}
		.inner {
			position: relative;
			.pageLink a {
				color: #fff;
				&::before { opacity: 0 !important; }
				&::after { opacity: 1 !important; }
			}
		}
	}
}

#access {
	background-color: #fff;
	.map iframe { width: 100%; }
	.pageLink a {
		color: #fff;
		&::before {
			background: linear-gradient(90deg, rgba(38, 38, 38, .5) 0%, rgba(0, 0, 0, 0) 100%);
		}
		&::after {
			background: linear-gradient(90deg, rgba(38, 38, 38, .15) 0%, rgba(0, 0, 0, 0) 100%);
		}
		&:hover { color: #000; }
	}
	@media screen and (min-width:769px), print{
		padding-top: 1px;
		.map {
			margin-top: -100px;
			iframe { height: 550px; }
		}
		.text { margin-top: 35px; }
	}
	@media screen and (max-width:768px){
		padding-inline: 25px;
		.map {
			margin-inline: -25px;
			iframe { aspect-ratio: 10 / 11; }
		}
		.text {
			margin-top: 28px;
		}
	}
}

#topics {
	background-color: #fff;
	#topicsInner {
		border-left: solid #000;
		padding-block: 1px;
	}
	@media screen and (min-width:769px), print{
		padding-block: 200px 390px;
		#topicsInner {
			border-left-width: 10px;
			padding-right: 10px;
			.topicsTitle {
				font-size: 20px;
				margin-top: -15px;
			}
			.posts {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				gap: 35px 0;
				margin-block: 50px -5px;
				li {
					letter-spacing: 0;
					width: calc(50% - 35px);
					a:hover {
						.title { text-decoration: underline; }
					}
				}
			}
		}
	}
	@media screen and (max-width:768px){
		padding-block: 100px 200px;
		#topicsInner {
			border-left-width: 5px;
			padding-inline: 20px 25px;
			.topicsTitle {
				font-size: 17.5px;
				margin-top: -12px;

			}
			.posts {
				margin-bottom: -7px;
				li { margin-top: 2em; }
			}
		}
	}
}