/*
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: 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%;
		> div.block {
			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;
				margin-top: 20px;
				display: flex;
				justify-content: center;
				column-gap: 40px;
				@media (width < 1100px) {
					column-gap: 20px;
				}
				> a {
					text-decoration: none;
					&:hover {
						opacity: 0.7;
					}
					> img {
						max-width: 40px;
						@media (width < 1100px) {
							max-width: 35px;
						}
					}
				}
			}
		}
	}
}
/*
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.button01 {
			grid-area: 2/1/3/2;
			align-self: start;
			padding-inline: 5%;
			margin-top: 44%;
			> a {
				text-decoration: none;
				&:hover {
					opacity: 0.7;
				}
				> img {
					max-width: 100%;
				}
			}
		}
		> div.button02 {
			grid-area: 2/1/3/2;
			align-self: end;
			padding-inline: 5%;
			margin-bottom: 8%;
			> a {
				text-decoration: none;
				&:hover {
					opacity: 0.7;
				}
				> img {
					max-width: 100%;
				}
			}
		}
	}
}

section.area01 {
	> div {
		display: grid;
		grid-template-rows: 1fr 1fr;
		> figure {
			grid-area: 1/1/3/2;
			> img {
				max-width: 100%;
			}
		}
		> div.button01 {
			grid-area: 2/1/3/2;
			align-self: end;
			padding-inline: 5%;
			margin-bottom: 50%;
			> a {
				text-decoration: none;
				&:hover {
					opacity: 0.7;
				}
				> img {
					max-width: 100%;
				}
			}
		}
		> div.button02 {
			grid-area: 2/1/3/2;
			align-self: end;
			padding-inline: 5%;
			margin-bottom: 12%;
			> 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.button01 {
			grid-area: 2/1/3/2;
			align-self: end;
			padding-inline: 5%;
			margin-bottom: 52%;
			> a {
				text-decoration: none;
				&:hover {
					opacity: 0.7;
				}
				> img {
					max-width: 100%;
				}
			}
		}
		> div.button02 {
			grid-area: 2/1/3/2;
			align-self: end;
			padding-inline: 5%;
			margin-bottom: 14%;
			> a {
				text-decoration: none;
				&:hover {
					opacity: 0.7;
				}
				> img {
					max-width: 100%;
				}
			}
		}
	}
}
section.area03 {
	> div {
		display: grid;
		grid-template-rows: 1fr 1fr;
		> figure {
			grid-area: 1/1/3/2;
			> img {
				max-width: 100%;
			}
		}
		> div.button01 {
			grid-area: 2/1/3/2;
			align-self: end;
			padding-inline: 5%;
			margin-bottom: 51%;
			> a {
				text-decoration: none;
				&:hover {
					opacity: 0.7;
				}
				> img {
					max-width: 100%;
				}
			}
		}
		> div.button02 {
			grid-area: 2/1/3/2;
			align-self: end;
			padding-inline: 5%;
			margin-bottom: 13%;
			> a {
				text-decoration: none;
				&:hover {
					opacity: 0.7;
				}
				> img {
					max-width: 100%;
				}
			}
		}
	}
}

section.performance {
	padding-top: 10px;
	padding-inline: 5%;
	> div {
		> figure.text {
			padding-inline: 5%;
			> img {
				max-width: 100%;
			}
		}
		> figure.arrow {
			margin-top: 20px;
			width: 50px;
			margin-inline: auto;
			> img {
				max-width: 100%;
			}
		}
		> p {
			margin-top: 10px;
			text-align: center;
			color: #333;
			font-size: min(2.5rem,7vw);
			line-height: 1.6;
			font-weight: 700;
		}
	}
}

section.mailform {
	padding: 20px 3% 0 3%;
	> div {
		div.submit {
			> figure {
				margin-inline: 5%;
				> img {
					max-width: 100%;
					cursor: pointer;
					transition: 0.2s;
					&:hover {
						opacity: 0.7;
					}
				}
			}
			> div {
				> button {
					border-radius: 50px;
					width: 45%;
				}
			}
		}
		> #submitResult {
			max-width: 700px;
			margin-inline: auto;
			background-color: #0C35AD;
			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;
			}
		}
	}
}

section.contact02 {
	padding-top: 10px;
	padding-inline: 5%;
	> div {
		> h3 {
			font-size: min(2.4rem,8vw);
			line-height: 1.3;
			color: #24b26a;
			font-weight: 700;
			text-align: justify;
		}
		> p {
			margin-top: 10px;
			font-size: 1.5rem;
			line-height: 1.5;
			color: #222;
			padding-left: 1em;
			text-indent: -1em;
			text-align: justify;
		}
	}
}
section.notation {
	padding-block: 60px 40px;
	padding-inline: 5%;
	> div {
		> input[type="checkbox"] {
			display: none;
			&:checked + label > figure {
				transform: rotate(-45deg);
			}
			&:checked + label + div {
				animation-name: moreToggleOpen;
				animation-duration: 0.3s;
				animation-fill-mode: forwards;
				animation-timing-function: ease-in;
			}
			& + label + div {
				animation-name: moreToggleClose;
				animation-duration: 0.3s;
				animation-fill-mode: forwards;
				animation-timing-function: ease-out;
			}
		}
		> label {
			list-style: none;
			display: flex;
			justify-content: space-between;
			align-items: center;
			cursor: pointer;
			> h2 {
				flex-grow: 1;
				text-align: center;
				color: #333;
				font-size: 2.0rem;
				line-height: 1.6;
				font-weight: 700;
				letter-spacing: 2px;
				@media (width < 550px) {
					font-size: 1.5rem;
				}
			}
			> figure {
				transition: 0.2s;
				> img {
					width: 20px;
				}
			}
		}
		> div {
			overflow: hidden;
			> article {
				padding-block: 20px;
				border-bottom: 1px solid #adadad;
				> h3 {
					color: #333;
					font-size: min(1.5rem, 6vw);
					line-height: 1.6;
					font-weight: 700;
				}
				> p {
					color: #333;
					font-size: 1.2rem;
					line-height: 1.5;
					font-weight: 500;
					text-align: justify;
					&:nth-of-type(1) {
						padding-top: 10px;
					}
					@media (width < 550px) {
						font-size: 1.0rem;
					}
				}
			}
		}
	}
}

section.privacy {
	padding-block: 60px 40px;
	padding-inline: 5%;
	> div {
		> input[type="checkbox"] {
			display: none;
			&:checked + label > figure {
				transform: rotate(-45deg);
			}
			&:checked + label + div {
				animation-name: moreToggleOpen;
				animation-duration: 0.3s;
				animation-fill-mode: forwards;
				animation-timing-function: ease-in;
			}
			& + label + div {
				animation-name: moreToggleClose;
				animation-duration: 0.3s;
				animation-fill-mode: forwards;
				animation-timing-function: ease-out;
			}
		}
		> label {
			list-style: none;
			display: flex;
			justify-content: space-between;
			align-items: center;
			cursor: pointer;
			> h2 {
				flex-grow: 1;
				text-align: center;
				color: #333;
				font-size: 2.0rem;
				line-height: 1.6;
				font-weight: 700;
				letter-spacing: 2px;
				@media (width < 550px) {
					font-size: 1.5rem;
				}
			}
			> figure {
				transition: 0.2s;
				> img {
					width: 20px;
				}
			}
		}
		> div {
			overflow: hidden;
			> article {
				padding-top: 40px;
				&:nth-of-type(1) {
					> p {
						text-indent: 0em;
						padding-left: 0em;
					}
				}
				&:nth-of-type(2) {
					> p {
						text-indent: 0em;
						padding-left: 0em;
					}
				}
				&:nth-of-type(3) {
					> p {
						text-indent: 0em;
						padding-left: 0em;
					}
				}
				&:nth-of-type(11) {
					> p {
						text-indent: 0em;
						padding-left: 0em;
						text-align: left;
						&:nth-of-type(1) {
							padding-block: 10px;
						}
					}
				}
				> h3 {
					color: #333;
					font-size: min(1.5rem, 5.2vw);
					line-height: 1.6;
					font-weight: 700;
				}
				> p {
					color: #333;
					font-size: 1.2rem;
					line-height: 1.5;
					font-weight: 500;
					text-align: justify;
					text-indent: -0.9em;
  					padding-left: 0.9em;
					&:nth-of-type(1) {
						padding-top: 10px;
					}
					@media (width < 550px) {
						font-size: 1.0rem;
					}
				}
				> div.item {
					padding-left: 1.0em;
					> p {
						color: #333;
						font-size: 1.2rem;
						line-height: 1.5;
						font-weight: 500;
						text-align: justify;
						text-indent: -0.9em;
						padding-left: 0.9em;
						&:nth-of-type(1) {
							padding-top: 10px;
						}
						@media (width < 550px) {
							font-size: 1.0rem;
						}
					}
				}
			}
		}
	}
}
@keyframes moreToggleOpen {
	0% {
		max-height: 0px;
	}
	80% {
		max-height: 100px;
	}
	90% {
		max-height: 200px;
	}
	100% {
		max-height: 9999px;
	}
}
@keyframes moreToggleClose {
	0% {
		max-height: 9999px;
	}
	10% {
		max-height: 200px;
	}
	20% {
		max-height: 100px;
	}
	100% {
		max-height: 0px;
	}
}

/*
footer
*/
footer {
	background-image: url(../image/footer_background.svg);
	padding: 0px 5% 0px 5%;
	div.footerarea {
		text-align: center;
		margin: auto;
		> div.logo {
			padding: 0px 5% 0px 5%;
			text-align: center;
			margin: auto 0;
			> img {
				width: 100%;
			}
		}
		> div.footertext {
			> div.text {
				> p {
					font-size: 1.2rem;
					font-weight: 500;
					line-height: 1.5;
					color: #fff;
					> span.slash {
						@media (width < 360px) {
							display: none;
						}
					}
				}
			}
		}
	}	
	div.copyright {
		padding-bottom: 20px;
		background-size: cover;
		> div {
			padding-inline: 5%;
			text-align: center;
			opacity: 1.0;
			> p {
				font-weight: 500;
				font-size: 1.0rem;
				color: #fff;
			}
		}
	}
}