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

section.facility {
	background-color: #eee;
	> div {
		max-width: 1920px;
		margin: 0 auto;
		display: grid;
		> img {
			grid-area: 1/1/2/2;
			max-width: 100%;
		}
		> a {
			grid-area: 1/1/2/2;
			justify-self: center;
			align-self: end;
			margin-bottom: 30px;
			text-decoration: none;
			@media (width < 1000px) {
				max-width: 300px;
				margin-bottom: 20px;
			}
			@media (width < 650px) {
				max-width: 200px;
				margin-bottom: 10px;
			}
			@media (width < 450px) {
				max-width: 150px;
				justify-self: end;
				margin-right: 10px;
			}
			&:hover {
				opacity: 0.7;
			}
			> img {
				max-width: 100%;
			}
		}
	}
}

section.charm {
	padding: 80px 5%;
	background-color: #ffff53;
	> div {
		max-width: 1000px;
		margin: 0 auto;
		> .text {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			column-gap: 20px;
			row-gap: 20px;
			@media (max-width:619px) {
				grid-template-columns: 1fr;
			}
			> article {
				text-align: center;
				> h2 {
					font-size: 1.7rem;
					line-height: 1.4;
					color: #156df8;
					font-weight: 600;
				}
				> p {
					margin-top: 5px;
					font-size: 1.0rem;
					line-height: 1.4;
					color: #156df8;
				}
				> figure {
					margin-top: 10px;
					> img {
						max-width: 100%;
					}
				}
			}
		}
		> .link {
			margin-top: 50px;
			text-align: center;
			> a {
				display: inline-block;
				&:hover {
					opacity: 0.7;
				}
				> img {
					max-width: 100%;
				}
			}
		}
	}
}


section.entry {
	padding: 80px 5%;
	> div {
		max-width: 1000px;
		margin: 0 auto;
		> p {
			margin-top: 5px;
			font-size: 2.2rem;
			line-height: 1.6;
			color: #222;
			font-weight: 600;
			text-align: center;
			@media (max-width:979px) {
				font-size: 1.5rem;
			}
			@media (max-width:699px) {
				text-align: left;
				> br {
					display: none;
				}
			}
		}
		> .link {
			margin-top: 50px;
			text-align: center;
			> a {
				display: inline-block;
				&:hover {
					opacity: 0.7;
				}
				> img {
					max-width: 100%;
				}
			}
		}
	}
}


section.hundred {
	padding: 80px 5%;
	background-color: #ffff53;
	> div {
		max-width: 1000px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 30px;
		row-gap: 20px;
		@media (max-width:729px) {
			grid-template-columns: 1fr;
		}
		> p {
			margin-top: 5px;
			font-size: 2.2rem;
			line-height: 1.6;
			font-weight: 600;
			text-align: center;
			&:nth-of-type(1) {
				color: #25efc8;
			}
			&:nth-of-type(2) {
				color: #156df8;
			}
			@media (max-width:359px) {
				font-size: 3.0rem;
			}
		}
	}
}


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


section.message {
	padding: 10px 5% 0 5%;
	> div {
		max-width: 800px;
		margin: 0 auto;
		> figure {
			text-align: center;
			> img {
				max-width: 100%;
			}
		}
		> h1 {
			margin-top: 50px;
			font-size: 2.3rem;
			line-height: 1.4;
			color: #000;
			font-weight: 600;
			text-align: center;
		}
		> h2 {
			margin-top: 5px;
			font-size: 2.3rem;
			line-height: 1.4;
			color: #156df8;
			font-weight: 600;
			text-align: center;
			@media (max-width:449px) {
				font-size: 1.7rem;
			}
		}
		> p {
			margin-top: 30px;
			font-size: 1.4rem;
			line-height: 1.8;
			font-weight: 500;
			@media (max-width:449px) {
				font-size: 1.0rem;
			}
		}
		> div {
			text-align: center;
			margin-top: 30px;
			background-color: #eee;
			padding: 20px;
			> ul {
				display: inline-block;
				> li {
					text-align: left;
					font-size: 1.7rem;
					line-height: 1.8;
					font-weight: 600;
					@media (max-width:449px) {
						font-size: 1.0rem;
					}
				}
			}
		}
	}
}


section.know {
	padding: 80px 5% 120px 5%;
	> div {
		max-width: 1000px;
		margin: 0 auto;
		> h2 {
			font-size: 2.3rem;
			line-height: 1.2;
			color: #000;
			font-weight: 600;
			text-align: center;
		}
		> div {
			margin-top: 30px;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			column-gap: 40px;
			row-gap: 40px;
			@media (max-width:1109px) {
				grid-template-columns: 1fr 1fr;
			}
			@media (max-width:729px) {
				grid-template-columns: 1fr;
			}
			> a {
				text-decoration: none;
				box-shadow: 0 0 5px rgba(0,0,0,0.3);
				padding: 20px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				&:hover {
					opacity: 0.7;
				}
				&:nth-of-type(2),
				&:nth-of-type(5) {
					transform: translateY(50px);
					@media (max-width:1109px) {
						transform: translateY(0px);
					}
				}
				> img {
					max-width: 100%;
				}
				> figcaption {
					margin-top: 20px;
					font-size: 1.7rem;
					line-height: 1.2;
					color: #156df8;
					font-weight: 600;
					text-align: center;
					@media (max-width:349px) {
						font-size: 1.4rem;
					}
				}
			}
		}
	}
}