body {
	background-color: #fff;
}
header {
	background-color: #fff;
	> div.pc {
		background-color: #fff;
		> div.nav {
			> nav {
				background-color: var(--color-accent);
				> ul {
					> li {
						> a {
							> div {
								color: #fff;
								&.on {
									background-color: #fff;
									color: var(--color-accent);
								}
							}
						}
					}
				}
			}
		}
	}
}

section.panel {
	background-color: #eee;
	> div {
		max-width: 1920px;
		margin: 0 auto;
		> img {
			max-width: 100%;
		}
	}
}

section.intro {
	padding: 60px 5% 100px 5%;
	> div {
		max-width: 800px;
		margin-inline: auto;
		> h1 {
			margin-top: 15px;
			font-size: min(3.0rem, 10vw);
			line-height: 1;
			color: #000;
			font-weight: 600;
			text-align: center;
		}
		> p {
			margin-top: 30px;
			font-size: 1.1rem;
			line-height: 1.4;
			color: #222;
			text-align: center;
		}
	}
}
section.mailform {
	padding: 50px 2% 100px 2%;
	> div {
		max-width: 800px;
		margin-inline: auto;
		> form {}
		> #submitResult {
			background-color: var(--color-accent);
			font-size: 1rem;
			line-height: 1.6;
			color: #fff;
			padding: 10px 20px;
			border-radius: 3px;
			&:empty {
				display: none;
			}
		}
	}
}
section.bottom {
	> div {
		> figure {
			> img {
				width: 100%;
				max-width: 100%;
			}
		}
	}
}
section.pagelink {
	background-color: #f9fff8;
	padding: 60px 5% 60px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> div.top {
			display: flex;
			justify-content: center;
			align-items: center;
			column-gap: 20px;
			> h3 {
				text-align: center;
				color: #333;
				font-size: min(2.2rem, 7vw);
				line-height: 1.3;
				font-weight: 800;
				> span {
					> b {
						color: #00ac9a;
					}
				}
				> small {
					font-size: min(1.8rem, 6vw);
				}
			}
		}	
		> div.link {
			margin-top: 30px;
			display: flex;
			flex-wrap: wrap;
			column-gap: 60px;
			row-gap: 40px;
			justify-content: center;
			@media (width < 540px) {
				row-gap: 30px;
			}
			> a {
				text-decoration: none;
				&:hover {
					opacity: 0.8;
				}
				> div {
					padding: 15px 60px 15px 30px;
					@media (width < 540px) {
						padding: 15px 40px 15px 20px;
					}
					> p {
						color: #fff;
						font-size: min(2.2rem, 5vw);
						line-height: 1.3;
						font-weight: 800;
					}
				}
				&:nth-of-type(1) {
					> div {
						border-radius: 10px;
						background: url(./image/arrow_fff.svg) #e89a3d;
						background-size: 10px;
						background-repeat: no-repeat;
						background-position: calc(100% - 30px) 51%;
						@media (width < 540px) {
							background-position: calc(100% - 20px) 51%;
						}

					}
				}
				&:nth-of-type(2) {
					> div {
						border-radius: 10px;
						background: url(./image/arrow_fff.svg) #7ac943;
						background-size: 10px;
						background-repeat: no-repeat;
						background-position: calc(100% - 30px) 51%;
						@media (width < 540px) {
							background-position: calc(100% - 20px) 51%;
						}
					}
				}
			}
		}
	}
}