/*
html body
*/
html > body {
	background-image: url(../image/pc_background.webp);
	background-attachment: fixed;
	background-size: cover;
	background-position: 50% 50%;
	display: grid;
	grid-template-columns: 1fr 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%;
		> div.block {
			max-width: 400px;
			display: grid;
			grid-template-rows: 1fr 1fr;
			> img {
				grid-area: 1/1/3/3;
				max-width: 100%;
			}
			> div {
				grid-area: 2/1/3/3;
				justify-items: center;
				align-self: center;
				display: flex;
				justify-content: center;
				column-gap: 10%;
				@media (width < 1100px) {
					column-gap: 20px;
				}
				> a {
					text-decoration: none;
					&:hover {
						opacity: 0.7;
					}
					> img {
						max-width: 50px;
						@media (width < 1100px) {
							max-width: 40px;
						}
					}
				}
			}
		}
	}
}
/*
main
*/
main {
	background-color: #fff;
	grid-column: 2/3;
	@media (width < 700px) {
		grid-column: 1/2;
	}
}

/*--- main > section ---*/

section.top {
	> div {
		display: grid;
		grid-template-rows: 1fr 1fr;
		> figure {
			grid-area: 1/1/3/2;
			> img {
				max-width: 100%;
			}
		}
		> div.button {
			grid-area: 2/1/3/2;
			align-self: end;
			padding-inline: 15%;
			margin-bottom: 10%;
			> a {
				text-decoration: none;
				&:hover {
					opacity: 0.7;
				}
				> img {
					max-width: 100%;
				}
			}
		}
	}
}

section.area01 {
	> div {
		display: grid;
		grid-template-rows: 0.8fr 1fr ;
		> figure {
			grid-area: 1/1/3/2;
			> img {
				max-width: 100%;
			}
		}
		> div.large {
			grid-area: 2/1/3/2;
			align-self: start;
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 10%;
			padding-inline: 5%;
			margin-top: 2%;
			> article {
				margin-bottom: 20%;
				&:nth-of-type(n+4) {
					> figure {
						display: flex;
						justify-content: center;
						> img {
							width: 90%;
							margin-inline: auto;
							max-height: 235px;
						}
					}
				}
				> figure {
					cursor: pointer;
					> img {
						max-width: 100%;
					}
				}
				> p {
					&:nth-of-type(1) {
						padding-top: 2%;
					}
					text-align: center;
					font-size: min(1.5rem,4vw);
					line-height: 1.4;
					letter-spacing: 1px;
				}
			}
		}
		> div.button {
			grid-area: 2/1/3/2;
			align-self: end;
			padding-inline: 15%;
			margin-bottom: 20%;
			> a {
				text-decoration: none;
				&:hover {
					opacity: 0.7;
				}
				> img {
					max-width: 100%;
				}
			}
		}
	}
}
section.area02 {
	> div {
		display: grid;
		grid-template-rows: 1fr 1fr;
		> figure {
			grid-area: 1/1/3/2;
			> img {
				max-width: 100%;
			}
		}
		> div.button {
			grid-area: 2/1/3/2;
			align-self: end;
			padding-inline: 15%;
			margin-bottom: 24%;
			> a {
				text-decoration: none;
				&:hover {
					opacity: 0.7;
				}
				> img {
					max-width: 100%;
				}
			}
		}
	}
}

/*
footer
*/
footer.main {
	background-image: url(../image/footer_bg.webp);
	background-attachment: fixed;
	background-size: cover;
	> div {
		padding-inline: 5%;
		> figure {
			display: flex;
			justify-content: center;
			margin-inline: auto;
			&:nth-of-type(1) {
				padding-top: 70px;
				width: 40%;
			}
			&:nth-of-type(2) {
				padding-block: 30px 15px;
				width: min(50px,10vw);
				> a {
					text-decoration: none;
					&:hover {
						opacity: 0.7;
					}
					> img {
						max-width: 100%;
					}
				}
			}
			&:nth-of-type(3) {
				width: 70%;
				padding-block: 15px 60px;
				> a {
					text-decoration: none;
					&:hover {
						opacity: 0.7;
					}
					> img {
						max-width: 100%;
					}
				}
			}
			> img {
				max-width: 100%;
			}
		}
		> h2 {
			padding-top: 30px;
			text-align: center;
			font-size: min(1.5rem,5vw);
			line-height: 1.3;
			letter-spacing: 1px;
			font-weight: 700;
			color: #4c4948;
		}
		> p {
			text-align: center;
			font-size: min(1.6rem,6vw);
			line-height: 2.0;
			letter-spacing: 1px;
			color: #4c4948;
		}
	}
}
footer.copyright {
	background-color: #4c4948;
	> div {
		padding: 20px 5%;
		> p {
			text-align: center;
			font-size: min(1.35rem,4vw);
			line-height: 2.0;
			letter-spacing: 1px;
			color: #fff;
		}
	}
}