/*----- 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.top {
	> div {
		display: grid;
		grid-template-rows:  3.7fr 1fr 0.6fr;
    	grid-template-columns: 5% 1fr 5%;
		> figure {
			grid-row: 1 / 4;
			grid-column: 1 / 4;
			> img {
				max-width: 100%;
			}
		}
		> a {
			text-decoration: none;
			grid-row: 2 / 3;
			grid-column: 2 / 3;
			&:hover {
				opacity: 0.7;
			}
			> figure {
				> img {
					max-width: 100%;
					box-shadow: 0 3px 3px rgba(0,0,0,0.3);
				}
			}
		}
	}
}
section.content01 {
	background-color: #B8D200;
	> figure {
		> img {
			max-width: 100%;
		}
	}
}
section.content02 {
	background-color: #4E4449;
	padding: 80px 2% 0 2%;
	> figure {
		> img {
			max-width: 100%;
		}
	}
}
section.content03 {
	background-color: #4E4449;
	padding: 20px 2% 0 2%;
	> figure {
		> img {
			max-width: 100%;
		}
	}
}
section.content04 {
	background-color: #4E4449;
	padding: 40px 2% 0 2%;
	> figure {
		> img {
			max-width: 100%;
		}
	}
}
section.content07 {
	background-color: #4E4449;
	padding: 40px 5% 0 5%;
	> figure {
		> img {
			max-width: 100%;
		}
	}
}
section.content05 {
	background-color: #4E4449;
	padding: 40px 5% 0 5%;
	> figure {
		> img {
			max-width: 100%;
		}
	}
}
section.mailform {
	background-color: #4e4449;
	padding: 20px 3% 0 3%;
	> div {
		div.checkbox.ui {
			height: 45px !important;
			border-color: #666 !important;
			input[type="checkbox"] + label {
				font-size: 1.2rem !important;
			}
		}
		div.submit {
			> figure {
				margin-inline: 5%;
				> img {
					max-width: 100%;
					cursor: pointer;
					transition: 0.2s;
					box-shadow: 0 3px 3px rgba(0,0,0,0.3);
					&:hover {
						opacity: 0.7;
					}
				}
			}
			> div {
				> button {
					border-radius: 50px;
					width: 45%;
				}
			}
		}
		> #submitResult {
			max-width: 700px;
			margin-inline: auto;
			background-color: rgba(255,200,200,0.3);
			font-size: 1rem;
			line-height: 1.6;
			color: #fff;
			padding: 10px 20px;
			border-radius: 3px;
			&:empty {
				display: none;
			}
			> b {
				font-weight: 700;
				font-size: 1rem;
				font-weight: 300;
			}
		}
	}
}
footer {
	background-color: #4E4449;
	padding: 80px 5% 40px 5%;
	> figure {
		> img {
			max-width: 100%;
		}
	}
}