/*----- html body -----*/
html > body {
	background-image: url(../image/pc_background.webp);
	background-attachment: fixed;
	background-size: cover;
	background-position: 50% 0;
	display: grid;
	grid-template-columns: 2fr 700px 1fr;
	overflow: hidden;
	@media (width < 1300px) {
		grid-template-columns: 1fr 700px;
	}
	@media (width < 1010px) {
		grid-template-columns: 1fr 700px 1fr;
	}
	@media (width < 700px) {
		grid-template-columns: 1fr;
	}
}
/*----- pcArea -----*/
section.pcArea {
	@media (width < 1010px) {
		display: none;
	}
	> div {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
		padding-inline: 20%;
		> img {
			max-width: 100%;
		}
	}
}
/*----- main -----*/
main {
	background-color: #fff;
	grid-column: 2/3;
	@media (width < 700px) {
		grid-column: 1/2;
	}
}

section.p01 {
	display: grid;
	> figure {
		grid-area: 1/1/2/2;
		> img {
			max-width: 100%;
		}
	}
	> a {
		grid-area: 1/1/2/2;
		align-self: end;
		margin-bottom: 40px;
		margin-inline: 5%;
		&:hover {
			opacity: 0.7;
		}
		> img {
			max-width: 100%;
		}
	}
}
section.p04 {
	padding-block: 20px 50px;
	background-image: url(../image/water.webp);
	background-size: 100% auto;
	background-repeat: repeat-y;
	> figure {
		text-align: center;
		> img {
			max-width: 100%;
		}
	}
}
section.p02 {
	background-color: #a0e9fd;
	> figure {
		> img {
			max-width: 100%;
		}
	}
}
section.p03 {
	background-image: url(../image/water.webp);
	background-size: 100% auto;
	background-repeat: repeat-y;
	> figure {
		> img {
			max-width: 100%;
		}
	}
}
section.p05 {
	display: grid;
	> figure {
		grid-area: 1/1/2/2;
		> img {
			max-width: 100%;
		}
	}
	> a {
		grid-area: 1/1/2/2;
		align-self: start;
		margin-inline: 5%;
		&:hover {
			opacity: 0.7;
		}
		> img {
			max-width: 100%;
		}
	}
}
section.p06 {
	background-image: url(../image/tile.png);
	background-size: 100% auto;
	background-position: 0 30px;
	background-repeat: repeat-y;
	> figure {
		> img {
			max-width: 100%;
		}
	}
}
section.p07 {
	padding: 10px 5% 80px 5%;
	background-image: url(../image/tile.png);
	background-size: 100% auto;
	background-position: 0 30px;
	background-repeat: repeat-y;
	> figure {
		> img {
			max-width: 100%;
		}
	}
}
section.p08 {
	background-image: url(../image/tile.png);
	background-size: 100% auto;
	background-position: 0 30px;
	background-repeat: repeat-y;
	display: grid;
	> figure {
		grid-area: 1/1/2/2;
		> img {
			max-width: 100%;
		}
	}
	> a {
		grid-area: 1/1/2/2;
		align-self: end;
		margin-bottom: 30px;
		margin-inline: 5%;
		&:hover {
			opacity: 0.7;
		}
		> img {
			max-width: 100%;
		}
	}
}
section.map {
	background-color: #a0eaff;
	padding: 0px 5.2%;
	> iframe {
		border: none;
		width: 100%;
		height: 600px;
	}
}

footer {
	background-color: #a0eaff;
	padding: 40px 5% 50px 5%;
	> p {
		margin-top: 30px;
		font-size: 1.6rem;
		line-height: 1.4;
		color: #222;
		@media (width < 700px) {
			font-size: min(1.6rem,3.5vw);
		}
	}
	> div {
		> a {
			text-decoration: none;
			font-size: 1.6rem;
			color: #00a;
			@media (width < 700px) {
				font-size: min(1.6rem,3.5vw);
			}
			&:hover {
				opacity: 0.7;
			}
		}
	}
	> small {
		display: block;
		margin-top: 40px;
		font-size: 1.2rem;
		line-height: 1.3;
		color: #666;
		text-align: center;
		@media (width < 700px) {
			font-size: min(1.2rem,3vw);
		}
	}
}