section.panel {
	padding: 100px 0 60px 0;
	> div {
		text-align: center;
		> h2 {
			font-size: 1.8rem;
			line-height: 1.2;
			color: #464646;
			letter-spacing: 5px;
			font-weight: 700;
			> b {
				color: #ed8099;
			}
			&:nth-of-type(2) {
				margin-top: 20px;
			}
			@media (width < 800px) {
				padding: 5px 20px;
				margin-inline: 20px;
				letter-spacing: 4px;
			}
		}
		> p {
			margin-top: 10px;
			font-size: min(1.0rem, 5vw);
			line-height: 1.0;
			color: #ed8099;
			font-weight: 600;
			letter-spacing: 2px;
		}
	}
}
section.index {
	padding: 40px 5% 0px 5%;
	background-color: #fdf9e5;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: repeat(13,1fr);
		column-gap: 5px;
		row-gap: 3px;
		@media (width < 650px) {
			grid-template-columns: repeat(6,1fr);
		}
		> select {
			border: solid 1px #abc900;
			padding-block: 6px;
			padding-inline: 5px;
			background-color: #fff;
			font-size: 1rem;
			line-height: 1;
			@media (width < 650px) {
				grid-row: 1/2;
				grid-column: 1/7;
			}
		}
		> div {
			padding-block: 10px;
			padding-inline: 5px;
			border: solid 1px #abc900;
			background-color: #ccc;
			user-select: none;
			font-size: 1rem;
			line-height: 1;
			text-align: center;
			&.enable {
				cursor: pointer;
				background-color: #fff;
				&:hover {
					opacity: 0.7;
				}
				&.on {
					background-color: #abc900;
					color: #fff;
				}
			}
			@media (width < 650px) {
				&:nth-of-type(1),
				&:nth-of-type(2),
				&:nth-of-type(3),
				&:nth-of-type(4),
				&:nth-of-type(5),
				&:nth-of-type(6) {
					grid-row: 2/3;
				}
				&:nth-of-type(7),
				&:nth-of-type(8),
				&:nth-of-type(9),
				&:nth-of-type(10),
				&:nth-of-type(11),
				&:nth-of-type(12) {
					grid-row: 3/4;
				}
			}
			&::after {
				content: "月";
			}
		}
	}
}
section.inform {
	padding: 50px 3% 80px 3%;
	margin-bottom: 100px;
	background-color: #fdf9e5;
	> div#informArea {
		max-width: 1000px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 50px;
		row-gap: 50px;
		@media (width < 900px) {
			grid-template-columns: 1fr;
		}
		> article {
			background-color: #fff;
			border-radius: 20px;
			padding-block: 40px;
			padding-inline: 40px;
			display: grid;
			> div {
				grid-area: 1/1/2/2;
				> ce-inform-category {
				}
				> div.date {
					margin-top: 15px;
					font-size: 1.1rem;
					line-height: 1;
					color: #222;
				}
				> div.subject {
					margin-top: 15px;
					font-size: 1.3rem;
					line-height: 1.5;
					font-weight: 600;
					font-family: var(--font-sans);
					&.informCategoryColumn {
						color: #eb8097;
					}
					&.informCategoryNews {
						color: #4a9eba;
					}
				}
				> div.body {
					margin-top: 20px;
					font-size: min(1.1rem,5vw);
					line-height: 1.7;
					color: #222;
					.divnbsp {
						line-height: 65%;
					}
					a {
						text-decoration: underline;
						color: #778C00;
						&:hover {
							opacity: 0.7;
						}
					}
					img {
						max-width: 100%;
					}
				}
				> div.attach {
					margin-top: 20px;
					> a {
						text-decoration: none;
						display: inline-flex;
						align-items: center;
						padding: 2px 10px;
						border: solid 1px #aaa;
						border-radius: 3px;
						column-gap: 10px;
						&:hover {
							opacity: 0.7;
						}
						> div {
							font-size: 0.9rem;
							line-height: 1.7;
							color: #222;
						}
						> span {
							font-size: 0.9rem;
							line-height: 100%;
							color: #fff;
							background-color: #b54b4b;
							padding: 3px 10px 5px 10px;
							border-radius: 3px;
						}
					}
				}
				> div.youtube {
					margin-top: 20px;
					> div {
						position: relative;
						width: 100%;
						height: 0px;
						padding-top: 56.25%;
						> iframe {
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
						}
					}
				}
				> figure {
					margin-top: 20px;
					> img {
						max-width: 100%;
					}
				}
			}
			> figure {
				grid-area: 1/1/2/2;
				justify-self: center;
				margin-top: -50px;
				pointer-events: none;
				> img {
					max-width: 100%;
				}
			}
		}
		> .empty {
			display: none;
			margin-top: 10px;
			font-size: 0.9rem;
			line-height: 100%;
			color: #666;
			font-weight: 300;
			background-color: #eee;
			padding: 50px;
			text-align: center;
		}
	}
}