@charset "UTF-8";

#contents { overflow: hidden; }
#reserveLink a {
	color: #fff;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ff9900;
	&::before {
		content: "";
		display: block;
		aspect-ratio: 11 / 10;
		background-size: 100%;
		background-repeat: no-repeat;
		background-image: url(../images/icon_reserve.svg);
	}
}
@media screen and (min-width:769px), print{
	#contents {
		padding-top: 100px;
	}
	#reserveLink {
		max-width: 1000px;
		margin-inline: auto;
		position: relative;
		z-index: 9999;
		a {
			width: 200px;
			border-radius: 50%;
			aspect-ratio: 1 / 1;
			flex-direction: column;
			position: absolute;
			transition-duration: .3s;
			transition-property: background-color;
			top: -50px;
			right: -50px;
			&::before {
				width: 55px;
				margin-bottom: 10px;
			}
			& > span {
				width: 80px;
				display: block;
				line-height: 24px;
				letter-spacing: 0;
			}
			&:hover {
				background-color: var(--color-green);
			}
		}
	}
}
@media screen and (max-width:768px){
	#wrapper { padding-bottom: 90px; }
	#reserveLink a {
		left: 0;
		bottom: 0;
		width: 100%;
		height: 90px;
		position: fixed;
		z-index: 9999;
		&::before {
			width: 33px;
			margin-right: 11px;
		}
	}
}

#mainVis {
	@media screen and (min-width:769px), print {
		display: flex;
		align-items: flex-end;
		.logo {
			width: 200px;
			img { width: 147px; }
		}
		.image {
			position: relative;
			width: calc(100% - 200px);
			figcaption {
				top: 100%;
				right: 0;
				font-size: 12px;
				padding-top: 3px;
				position: absolute;
			}
		}
	}
	@media screen and (max-width:768px) {
		padding-inline: 0;
		.logo {
			width: 100px;
			height: 110px;
			position: relative;
			background-color: #fff;
			margin-bottom: -60px;
			display: flex;
			align-items: center;
			justify-content: center;
			img { width: 60px; }
		}
		.image {
			img {
				object-fit: cover;
				aspect-ratio: 15 / 14;
			}
			figcaption {
				font-size: 10.5px;
				text-align: right;
				padding: 5px 25px 0;
			}
		}
	}
}

#introduction {
	.title { color: #505050; }
	.date, .title { font-weight: 600; }
	@media screen and (min-width:769px), print {
		margin-top: 40px;
		padding-bottom: 190px;
		.inner > * { margin-left: 200px; }
		.date { font-size: 20px; }
		.title {
			font-size: 48px;
			line-height: 72px;
			margin-top: 25px;
		}
		.text {
			margin-top: 30px;
			& > * + * { margin-top: 30px; }
		}
	}
	@media screen and (max-width:768px) {
		margin-top: 38px;
		padding-bottom: 140px;
		.date { font-size: 15px; }
		.title {
			font-size: 28px;
			line-height: 45px;
			margin-top: 5px;
		}
		.text {
			margin-top: 37px;
			& > * + * { margin-top: 25px; }
		}
	}
}

#about {
	.title { font-weight: 600; }
	@media screen and (min-width:769px), print {
		.inner { padding-block: 90px 190px; }
		.title {
			font-size: 27px;
			line-height: 45px;
		}
		.text {
			margin-top: 32px;
			& > * + * { margin-top: 30px; }
		}
	}
	@media screen and (max-width:768px) {
		.inner { padding-block: 42px 44px; }
		.title {
			font-size: 21px;
			line-height: 34px;
		}
		.text {
			margin-top: 25px;
			& > * + * { margin-top: 25px; }
		}
	}
}

#spend {
	.image figcaption { text-align: right; }
	.title { font-weight: 600; }
	.list dt {
		font-weight: 600;
		border-bottom: 1px solid #000;
	}
	@media screen and (min-width:769px), print {
		margin-top: -100px;
		.image figcaption {
			font-size: 12px;
			padding-top: 3px;
		}
		.title {
			font-size: 27px;
			margin-top: 64px;
		}
		.text { margin-top: 25px; }
		.list {
			display: flex;
			gap: 50px;
			margin-top: 80px;
			justify-content: space-between;
			li {
				dt {
					font-size: 20px;
					margin-bottom: 32px;
					padding-bottom: 10px;
				}
			}
		}
	}
	@media screen and (max-width:768px) {
		.image {
			margin-inline: -25px;
			img {
				object-fit: cover;
				aspect-ratio: 15 / 14;
			}
			figcaption {
				font-size: 10.5px;
				padding: 4px 25px 0;
			}
		}
		.title {
			font-size: 21px;
			margin-top: 34px;
		}
		.text { margin-top: 24px; }
		.list {
			margin-top: 35px;
			li + li { margin-top: 34px; }
			dt {
				font-size: 17.5px;
				margin-bottom: 17px;
				padding-bottom: 8px;
			}
		}
	}
}

#access {
	.information {
		dl:not(.wide) {
			display: flex;
			flex-wrap: wrap;
		}
		dt { margin-right: 0.5em; }
	}
	@media screen and (min-width:769px), print {
		margin-top: 190px;
		#map iframe { height: 550px; }
		.information {
			display: flex;
			justify-content: space-between;
			margin-top: 80px;
			small { font-size: 100%; }
		}
	}
	@media screen and (max-width:768px) {
		margin-top: 145px;
		#map {
			margin-inline: -25px;
			iframe { aspect-ratio: 1 / 1; }
		}
		.information {
			margin-top: 34px;
			small { font-size: 12px; }
			& > * + * { margin-top: 35px; }
		}
	}
}

#nationwide {
	.title {
		line-height: 1;
		text-align: center;
		span {
			display: block;
			&.ja { font-weight: 600; }
		}
	}
	.list {
		display: flex;
		justify-content: space-between;
	}
	@media screen and (min-width:769px), print {
		margin-top: 190px;
		.title {
			.ja { font-size: 27px; }
			.en { margin-top: 10px; }
		}
		.list {
			gap: 38px;
			margin-top: 50px;
			a:hover { opacity: 0.6; }
		}
	}
	@media screen and (max-width:768px) {
		margin-top: 142px;
		.title {
			.ja { font-size: 21px; }
			.en { margin-top: 9px; }
		}
		.list {
			gap: 25px 5px;
			flex-wrap: wrap;
			margin-top: 50px;
			li { width: calc((100% - 10px) / 3); }
		}
	}
}