/*----- html body -----*/
html > body {
	background-image: url(./image/background_pc.webp);
	background-attachment: fixed;
	background-size: cover;
	background-position: 50% 0;
	display: grid;
	grid-template-columns: 2fr 700px 1fr;
	overflow: hidden;
	@media (width < 1450px) {
		grid-template-columns: 1fr 700px;
	}
	@media (width < 1200px) {
		grid-template-columns: 1fr 700px 1fr;
	}
	@media (width < 700px) {
		grid-template-columns: 1fr;
	}
}
/*----- pcArea -----*/
section.pcArea {
	position: fixed;
	left: 0;
	top: 0;
	width: calc((100% - 700px) / 3 * 2);
	@media (width < 1450px) {
		width: calc(100% - 700px);
	}
	@media (width < 1200px) {
		display: none;
	}
	> div {
		margin-inline: auto;
		padding-top: calc((100vh - 90px) / 2);
		> figure {
			text-align: center;
			> a {
				text-decoration: none;
				&:hover {
					opacity: 0.8;
				}
				> img {
					max-width: 100%;
				}
			}
		}
	}
}
/*----- main -----*/
main {
	background-color: #e7eaf0;
	grid-column: 2/3;
	@media (width < 700px) {
		grid-column: 1/2;
	}
}
section.panel {
	> figure {
		display: grid;
		> img {
			grid-area: 1/1/2/2;
			max-width: 100%;
		}
		> a {
			grid-area: 1/1/2/2;
			justify-self: center;
			align-self: end;
			width: 80%;
			margin-bottom: 22%;
			&:hover {
				opacity: 0.8;
			}
			> img {
				filter: drop-shadow(4px 4px 8px #000);
				width: 100%;
			}
		}
	}
}
section.block01 {
	> div {
		> div {
			display: grid;
			> figure {
				grid-area: 1/1/2/2;
				> img {
					max-width: 100%;
				}
			}
			> div.button {
				grid-area: 1/1/2/2;
				width: 100%;
				padding-inline: 6%;
				margin-top: 9.5%;
				align-self: start;
				> a {
					text-decoration: none;
					> img {
						width: 100%;
						box-shadow: 0 2px 5px rgba(0,0,0,0.6);
						border-radius: min(20px, 3vw);
						background-color: #ff0;
					}
					&:hover {
						> img {
							animation: assessment 0.7s ease infinite;
						}
					}
				}
			}
			> div.officelink {
				grid-area: 1/1/2/2;
				justify-self: center;
				align-self: start;
				margin-top: 168%;
				> select {
					border-radius: 10px;
					border: none;
					width: min(600px, 80vw);
					height: min(50px, 10vw);
					font-size: min(1.4rem, 5.0vw);
					line-height: 1.4;
					color: #644e36;
					font-weight: 600;
					padding-inline: 10%;
					appearance: none;
					background-image: url(./image/down_triangle.svg);
					background-position: right 15px center;
					background-repeat: no-repeat;
					background-size:  min(30px, 5vw) min(20px, 3vw);
				}
			}
		}
	}
}
section.block02 {
	> div {
		> div {
			display: grid;
			> figure {
				grid-area: 1/1/2/2;
				> img {
					max-width: 100%;
				}
			}
			> div.button {
				grid-area: 1/1/2/2;
				width: 100%;
				padding-inline: 6%;
				margin-top: 290%;
				align-self: center;
				> a {
					text-decoration: none;
					> img {
						width: 100%;
						border: solid 5px #f19731;
						background-color: #f19731;
						box-shadow: 0 2px 5px rgba(0,0,0,0.6);
						border-radius: min(20px, 3vw);
					}
					&:hover {
						> img {
							animation: assessment 0.7s ease infinite;
						}
					}
				}
			}
		}
	}
}
section.block03 {
	margin-top: -1px;
	> div {
		> figure {
			> img {
				max-width: 100%;
			}
		}
	}
}

/*--animation-*/
@keyframes assessment {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.98);
	}
}