section.panel {
	display: grid;
	> figure {
		grid-area: 1/1/2/2;
		> img {
			max-width: 100%;
		}
	}
	> div {
		grid-area: 1/1/2/2;
		max-height: 95vh;
		background-image: url(../common/image/scroll.svg);
		background-repeat: no-repeat;
		background-position: 95% 100%;
		margin-bottom: 30px;
		animation-name: panelarrow;
		animation-duration: 4s;
		pointer-events: none;
		@media (width < 700px) {
			display: none;
		}
	}
}
@keyframes panelarrow {
	0% {
		transform: translateY(0);
	}
	16.6% {
		transform: translateY(-20px);
	}
	33.3% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-20px);
	}
	66.6% {
		transform: translateY(0);
	}
	83.3% {
		transform: translateY(-20px);
	}
	100% {
		transform: translateY(0);
	}
}
section.title {
	padding: 40px 5% 0px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> h2 {
			text-align: center;
			@media (width < 400px) {
				margin-top: -30px;
			}
			> div {
				font-size: 3rem;
				line-height: 1.3;
				color: #000;
				font-weight: 600;
				position: relative;
				z-index: 3;
			}
			> p {
				margin-top: 2px;
				font-size: 1.1rem;
				line-height: 1.3;
				color: var(--color-accent);
				font-weight: 500;
			}
		}
		> p {
			padding-top: 30px;
			font-size: 1.1rem;
            line-height: 2.0;
            color: #333;
            font-weight: 500;
            letter-spacing: 1px;
            text-align: center;
		}
	}
}
section.feel {
	padding: 60px 5% 60px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> div {
			display: grid;
			&:nth-of-type(1) {
				grid-template-columns: repeat(3, 1fr);
				justify-items: center;
				@media (width < 1140px) {
					grid-template-columns: repeat(2, 1fr);
					grid-template-rows: repeat(2, 1fr);
					row-gap: 10px;
					> article {
						&:nth-of-type(1) {
							grid-area: 1/1/2/3;
						}
						&:nth-of-type(2) {
							grid-area: 2/1/3/2;
						}
						&:nth-of-type(3) {
							grid-area: 2/2/3/3;
						}
					}
				}
				@media (width < 630px) {
					grid-template-columns: repeat(1, 1fr);
					grid-template-rows: repeat(3, 1fr);
					row-gap: 20px;
					justify-self: center;
					> article {
						&:nth-of-type(1) {
							grid-area: unset;
						}
						&:nth-of-type(2) {
							grid-area: unset;
						}
						&:nth-of-type(3) {
							grid-area: unset;
						}
					}
				}
			}
			&:nth-of-type(2) {
				grid-template-columns: repeat(2, 1fr);
				justify-items: center;
				position: relative;
				@media (width < 1140px) {
					padding-top: 10px;
				}
				@media (width < 630px) {
					grid-template-columns: repeat(1, 1fr);
					row-gap: 20px;
				}
			}
			> article {
				display: grid;
				> div {
					grid-area: 1/1/2/2;
					justify-items: center;
					&:nth-of-type(1) {
						border-radius: 50%;
						width: 260px;
						height: 260px;
						filter: blur(10px);
						@media (width < 370px) {
							width: 200px;
							height: 200px;
						}
					}
					&.bg01 {
						background-color: #b9e8fc;
					}
					&.bg02 {
						background-color: #b0edb6;
					}
					&.bg03 {
						background-color: #ffd0d3;
					}
					&.bg04 {
						background-color: #ffebae;
					}
					&.bg05 {
						background-color: #decff0;
					}
					&.content {
						align-self: center;
						> figure {
							text-align: center;
							min-height: 80px;
							align-content: center;
							> img {
								max-width: 100%;
								filter: blur(0px);
							}
						}
						&.adjustment {
							> figure {
								min-height: 100px;
							}
						}
						> p {
							filter: blur(0px);
							font-size: min(1.0rem, 4.5vw);
							line-height: 1.6;
							color: #333;
							text-align: center;
							&.bottomspace {
								padding-bottom: 1.6rem;
							}
						}
					}
				}
			}
			> figure {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				@media (width < 630px) {
					position: unset;
					text-align: center;
					transform: unset;
					grid-row: 1/2;
				}
				> img {
					max-width: 100%;
				}
			}
		}
	}
}
section.map {
	padding: 60px 5% 60px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		padding-bottom: 80px;
		border-bottom: 3px solid #000;
		> figure {
			text-align: center;
			> img {
				max-width: 100%;
			}
		}
		> p {
			padding-top: 30px;
			max-width: 650px;
			margin-inline: auto;
			font-size: 1.1rem;
			line-height: 1.6;
			color: #333;
			text-align: justify;
			> a {
				text-decoration: none;
				color: #d00;
				&:hover {
					opacity: 0.7;
				}
			}
		}
	}
}
section.localnav {
	padding: 20px 5% 80px 5%;
	> div {
		max-width: 800px;
		margin-inline: auto;
		@media (width < 1070px) {
			grid-template-columns: repeat(2, 1fr);
		}
		@media (width < 410px) {
			grid-template-columns: repeat(1, 1fr);
		}
		> div {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			column-gap: 15px;
			@media (width < 580px) {
				grid-template-columns: repeat(1, 1fr);
				row-gap: 15px;
			}
			&:nth-of-type(1) {
				> a {
					&:hover {
						> p {
							background-color: #04469b;
							color: #fff;
						}
					}
					> p {
						border: 3px solid #04469b;
						color: #04469b;
					}
				}
			}
			&:nth-of-type(2) {
				padding-top: 15px;
				> a {
					&:hover {
						> p {
							background-color: #4b6428;
							color: #fff;
						}
					}
					> p {
						border: 3px solid #4b6428;
						color: #4b6428;
					}
				}
			}
			> a {
				text-decoration: none;
				&:hover {
					opacity: 0.7;
				}
				> p {
					padding: 10px 20px 10px 20px;

					text-align: center;
					font-size: 1.2rem;
					line-height: 1.3;
					font-weight: 600;
				}
			}
		}
	}
}
section.titletop {
	padding: 0px 0% 0px 0%;
	background-color: #f4f0e8;
	> div {
		background-position: 0% 100%;
		background-repeat: no-repeat;
		background-size: 55% auto;
		padding-block: 100px 80px;
		max-width: 1000px;
		margin-inline: auto;
		@media (width < 700px) {
			background-size: auto 100px;
		}
		@media (width < 580px) {
			background-size: 100% auto;
		}
		> h2 {
			text-align: center;
			@media (width < 400px) {
				margin-top: -30px;
			}
			> div {
				font-size: 3rem;
				line-height: 1.3;
				color: #000;
				font-weight: 600;
				position: relative;
				z-index: 3;
			}
			> p {
				font-size: 1.1rem;
				line-height: 1.3;
				color: #04469b;
				font-weight: 500;
			}
		}
	}
	&.aoinishi {
		> div {
			background-image: url(./image/aoinishi.svg);
		}
	}
	&.maisaka {
		> div {
			background-image: url(./image/maisaka.svg);
		}
	}
	&.shitoro {
		> div {
			background-image: url(./image/shitoro.svg);
		}
	}
	&.barns {
		background-color: #dbe0d4;
		> div {
			background-image: url(./image/barns.svg);
			> h2 {
				> p {
					color: #4b6428;
				}
			}
		}
	}
	&.covaco {
		background-color: #dbe0d4;
		> div {
			background-image: url(./image/covaco.svg);
			> h2 {
				> p {
					color: #4b6428;
				}
			}
		}
	}
	&.camp {
		background-color: #dbe0d4;
		> div {
			background-image: url(./image/camp.svg);
			> h2 {
				> p {
					color: #4b6428;
				}
			}
		}
	}
}
section.content {
	padding: 0px 0% 0px 0%;
	background-color: #f4f0e8;
	&.changecolor {
		background-color: #dbe0d4;
	}
	> div {
		max-width: 1300px;
		margin-inline: auto;
		padding-bottom: 80px;
		border-bottom: 2px solid #000;
		&.noneborder {
			border-bottom: none;
		}
		> figure {
			> img {
				max-width: 100%;
			}
		}
		> div.block {
			padding-top: 60px;
			margin-inline: 5%;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			column-gap: 50px;
			row-gap: 50px;
			@media (width < 830px) {
				column-gap: 20px;
				row-gap: 30px;
			}
			@media (width < 630px) {
				grid-template-columns: repeat(1, 1fr);
				row-gap: 60px;
			}
			> article {
				> figure {
					> img {
						max-width: 100%;
					}
				}
				> p {
					margin-top: 10px;
					font-size: 1.2rem;
					line-height: 1.3;
					color: #333;
				}
			}
		}
		> div.address {
			padding-top: 30px;
			margin-inline: 5%;
			display: grid;
			grid-template-columns: 5.5fr 4.5fr;
			column-gap: 30px;
			@media (width < 1000px) {
				grid-template-columns: 1fr;
				row-gap: 30px;
			}
			> iframe {
				width: 100%;
				min-height: 300px;
				border: 1px solid #333;
			}
			> div {
				align-content: center;
				> h3 {
					font-size: 1.3rem;
					line-height: 1.3;
					color: #333;
					font-weight: 600;
				}
				> h2 {
					font-size: 2.4rem;
					line-height: 1.4;
					color: #333;
					font-weight: 700;
				}
				> p {
					font-size: 1.0rem;
					line-height: 1.3;
					color: #333;
					font-weight: 600;
					text-align: justify;
					> small {
						font-size: 0.8rem;
					}
					> a {
						color: #d00;
						text-decoration: none;
						&:hover {
							opacity: 0.7;
						}
					}
					&:last-of-type {
						padding-top: 20px;
					}
				}
			}
		}
	}
}
section.shares {
	padding: 0px 0% 0px 0%;
	background-color: #dbe0d4;
	> div {
		padding-block: 60px;
		max-width: 1300px;
		margin-inline: auto;
		> h1 {
			text-align: center;
			> div {
				font-size: 4.5rem;
				line-height: 1.0;
				color: #4b6428;
				font-weight: 700;
				position: relative;
				z-index: 3;
			}
			> p {
				font-size: 1.8rem;
				line-height: 1.0;
				color: #4b6428;
				font-weight: 600;
			}
		}
		> div.video {
			margin-inline: 5%;
			> video {
				margin-top: min(60px,10vw);
				width: 100%;
			}
		}
		> div.content {
			margin-inline: 5%;
			> h4 {
				padding-top: 20px;
				font-size: 1.4rem;
				line-height: 1.0;
				color: #4b6428;
				font-weight: 600;
			}
			> p {
				padding-top: 10px;
				font-size: 1.1rem;
				line-height: 1.6;
				color: #333;
			}
		}
		> div.address {
			padding-top: 50px;
			margin-inline: 5%;
			display: grid;
			grid-template-columns: 5.5fr 4.5fr;
			column-gap: 30px;
			@media (width < 1000px) {
				grid-template-columns: 1fr;
				row-gap: 30px;
			}
			> iframe {
				width: 100%;
				min-height: 300px;
				border: 1px solid #333;
			}
			> div {
				align-content: center;
				> h3 {
					font-size: 1.3rem;
					line-height: 1.3;
					color: #333;
					font-weight: 600;
				}
				> h2 {
					font-size: 2.4rem;
					line-height: 1.4;
					color: #333;
					font-weight: 700;
				}
				> p {
					font-size: 1.0rem;
					line-height: 1.3;
					color: #333;
					font-weight: 600;
					text-align: justify;
					> small {
						font-size: 0.8rem;
					}
					> a {
						color: #d00;
						text-decoration: none;
						&:hover {
							opacity: 0.7;
						}
					}
					&:last-of-type {
						padding-top: 20px;
					}
				}
			}
		}
	}
}