section.panel {
	padding-top: 10px;
}
section.title {
	padding: 60px 5% 60px 5%;
	> div {
		text-align: center;
		> h1 {
			font-size: 2.4rem;
			line-height: 1.2;
			color: #000;
			font-weight: 600;
		}
	}
}
section.localnav {
	padding: 80px 5% 80px 5%;
	background-color: #fffaeb;
	> div {
		max-width: 1200px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: repeat(3,1fr);
		column-gap: min(30px,2vw);
		row-gap: min(30px,2vw);
		@media (width < 800px) {
			grid-template-columns: repeat(2,1fr);
		}
		@media (width < 400px) {
			grid-template-columns: repeat(1,1fr);
		}
		> a {
			&:hover {
				opacity: 0.7;
			}
			> img {
				max-width: 100%;
				border-radius: 8px;
			}
		}
	}
}
section.current {
	padding: 100px 5% 60px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> h2 {
			font-size: 2.2rem;
			line-height: 1;
			color: #000;
			font-weight: 600;
			text-align: center;
			margin-bottom: 50px;
		}
		> p {
			margin-top: 20px;
			font-size: 1rem;
			line-height: 1.8;
			color: #111;
			text-align: justify;
			> b {
				color: var(--color-accent2);
				font-weight: 500;
			}
		}
		> div.box {
			margin-top: 20px;
			background-color: #eee;
			padding-block: 60px;
			padding-inline: 60px;
			font-size: 1rem;
			line-height: 1.8;
			color: #111;
			@media (width < 750px) {
				padding-inline: 20px;
			}
		}
	}
}
section.link02 {
	padding: 60px 5% 60px 5%;
	background-color: var(--color-accent2);
	text-align: center;
	> a {
		font-size: 1.8rem;
		line-height: 1.3;
		color: #fff;
		background-image: url(./image/arrow01.svg);
		background-repeat: no-repeat;
		background-position: 100% 50%;
		padding-right: 40px;
		&:hover {
			opacity: 0.7;
		}
	}
}
section.application {
	padding: 60px 5% 60px 5%;
	> div {
		max-width: 1200px;
		margin-inline: auto;
		> article {
			border-top: solid 1px #ccc;
			padding-block: 60px;
			padding-inline: 5vw;
			@media (width < 700px) {
				padding-inline: 0;
			}
			> h2 {
				text-align: center;
				font-size: 2.4rem;
				line-height: 1.3;
				color: #111;
				margin-bottom: 60px;
			}
			> p {
				margin-top: 20px;
				font-size: 1rem;
				line-height: 1.8;
				color: #111;
				> b {
					font-weight: 500;
					color: var(--color-accent2);
				}
				a {
					font-weight: 500;
					color: var(--color-accent2);
					text-decoration: underline;
					&:hover {
						text-decoration: none;
					}
				}
			}
			> ul {
				margin-top: 10px;
				&.list1 {
					padding-left: 10px;
					> li {
						padding-left: 25px;
						position: relative;
						&::before {
							content: "";
							position: absolute;
							left: 0;
							top: 0.3em;
							width: 16px;
							height: 16px;
							background-image: url(./image/checkmark01.svg);
							background-size: contain;
							background-repeat: no-repeat;
						}
					}
				}
				&.list2 {
					padding-left: 10px;
					> li {
						padding-left: 25px;
						position: relative;
						&::before {
							content: "";
							position: absolute;
							left: 0;
							top: 0.3em;
							width: 16px;
							height: 16px;
							background-image: url(./image/checkmark02.svg);
							background-size: contain;
							background-repeat: no-repeat;
						}
					}
				}
				> li {
					font-size: 1rem;
					line-height: 1.8;
					color: #111;
				}
			}
			> div.box {
				margin-top: 20px;
				background-color: #eee;
				padding-block: 30px;
				padding-inline: 10px;
				text-align: center;
				font-size: 1.2rem;
				line-height: 1.5;
				color: #111;
			}
		}
	}
}
section.link03 {
	padding: 60px 5% 60px 5%;
	margin-bottom: 60px;
	background-color: var(--color-accent2);
	text-align: center;
	> a {
		&:hover {
			opacity: 0.7;
		}
		> div {
			display: inline-block;
			font-size: 2.4rem;
			line-height: 1.3;
			color: #fff;
			background-image: url(./image/arrow01.svg);
			background-repeat: no-repeat;
			background-position: 100% 70%;
			padding-right: 50px;
			@media (width < 500px) {
				font-size: 1.8rem;
			}
		}
		> p {
			margin-top: 5px;
			font-size: 0.9rem;
			line-height: 1.3;
			color: #fff;
		}
	}
}