@charset "UTF-8";

/* access */
#pageHeaderWrapper {
	&::after {
		background-image: url(../images/access/main_image.webp);
	}
}

/* map */
#map {
	@media screen and (min-width:769px), print{
		margin-top: 100px;
		.map iframe {
			width: 100%;
			height: 550px;
		}
		.address { margin-top: 35px; }
	}
	@media screen and (max-width:768px){
		.map iframe {
			width: 100%;
			aspect-ratio: 15 / 18;
		}
		.address {
			margin-top: 11px;
			padding-inline: 25px;
		}
	}
}

/* roots */
#roots {
	@media screen and (min-width:769px), print{
		display: flex;
		gap: 70px;
		margin-top: 80px;
		letter-spacing: 0.02em;
		.column {
			width: calc(50% - 35px);
			dl, .note { margin-top: 2em; }
			.root + .root { margin-top: 55px; }
			.caution { margin-top: 88px; }
		}
	}
	@media screen and (max-width:768px){
		padding-inline: 25px;
		.root, .caution {
			margin-top: 80px;
			dl, .note { margin-top: 2em; }
		}
	}
}

/* attractions */
#attractions {
	@media screen and (min-width:769px), print{
		margin-top: 180px;
		.title { font-size: 24px; }
		.attractions { margin-block: 80px 90px; }
		.information {
			display: flex;
			flex-wrap: wrap;
			gap: 70px;
			letter-spacing: 0.04em;
			li { width: calc(50% - 35px); }
		}
		a:hover { text-decoration: underline; }
	}
	@media screen and (max-width:768px){
		margin-top: 85px;
		padding-inline: 25px;
		.title {
			font-size: 20px;
			line-height: 34px;
		}
		.attractions { margin-block: 40px; }
		.information li + li { margin-top: 2em; }
	}
}