section.top {
	background-color: var(--color-accent);
	> div {
		display: grid;
		max-width: 1920px;
		margin-inline: auto;
		@media (width < 1000px) {
			width: 1000px;
			height: 500px;
		}
		> figure {
			grid-area: 1/1/2/2;
			> img {
				max-width: 100%;
				min-height: 500px;
				@media (width < 900px) {
					margin-left: calc((100vw - 900px) / 2);
				}
			}
		}
		> div.bg {
			position: relative;
			grid-area: 1/1/2/2;
			align-self: center;
			background-color: rgb(200, 210, 220);
			mix-blend-mode: multiply;
			width: 100%;
			height: 40%;
			@media (width < 1000px) {
				height: 30%;
			}
		}
		> div.title {
			grid-area: 1/1/2/2;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-family: var(--font-serif);
			width: min(100vw,1920px);
			position: relative;
			> h1 {
				font-size: min(4rem,14vw);
				line-height: 1.3;
				color: #fff;
				font-weight: 700;
			}
			> p {
				font-size: min(3rem,12vw);
				line-height: 1.3;
				color: #fff;
				font-weight: 700;
				letter-spacing: 2px;
			}
		}
	}
}
section.coursearea {
	padding: 60px 5% 0 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> div.area01 {
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 50px;
			row-gap: 50px;
			@media (width < 850px) {
				grid-template-columns: 1fr;
			}
			> article {
				border-image: url(./image/around.svg);
				border-image-slice: 20;
				border-image-width: 25px;
				border-image-repeat: round;
				display: grid;
				grid-template-columns: 0.4fr 0.6fr;
				grid-template-rows: minmax(auto, 87px) auto;
				@media (width < 1100px) {
					grid-template-rows: minmax(auto, 87px) auto auto;
				}
				&:nth-of-type(1) {
					> figure {
						width: 60%;
						@media (width < 1100px) {
							width: auto;
						}
					}
					> p {
						width: 45%;
						@media (width < 1100px) {
							width: auto;
						}
					}
				}
				&:nth-of-type(2) {
					> figure {
						width: 60%;
						@media (width < 1100px) {
							width: auto;
						}
					}
					> p {
						width: 60%;
						@media (width < 1100px) {
							width: auto;
						}
					}
				}
				&:nth-of-type(3) {
					> figure {
						grid-area: 1 / 1 / 3 / 3;
						width: 60%;
						@media (width < 1100px) {
							grid-area: 3/1/4/3;
							width: auto;
						}
					}
					> p {
						width: 55%;
						@media (width < 1100px) {
							width: auto;
						}
					}
				}
				&:nth-of-type(4) {
					> figure {
						grid-area: 1 / 1 / 3 / 3;
						width: 60%;
						@media (width < 1100px) {
							grid-area: 3/1/4/3;
							width: auto;
						}
					}
					> p {
						width: 55%;
						@media (width < 1100px) {
							width: auto;
						}
					}
				}
				&:nth-of-type(5) {
					> figure {
						width: 60%;
						@media (width < 1100px) {
							width: auto;
						}
					}
					> p {
						width: 60%;
						@media (width < 1100px) {
							width: auto;
						}
					}
				}
				&:nth-of-type(6) {
					> figure {
						width: 60%;
						@media (width < 1100px) {
							width: auto;
						}
					}
					> p {
						width: 60%;
						@media (width < 1100px) {
							width: auto;
						}
					}
				}
				&:nth-of-type(7) {
					grid-template-rows: minmax(auto, 87px) auto auto;
					> figure {
						margin-top: 15%;
						width: 60%;
						grid-area: 2/1/4/3;
						align-self: center;
						@media (width < 1100px) {
							width: auto;
						}
					}
					> p {
						width: 60%;
						@media (width < 1100px) {
							width: auto;
						}
					}
				}
				&:nth-of-type(8) {
					grid-template-rows: minmax(auto, 87px) auto auto;
					> figure {
						width: 100%;
						grid-area: 3/1/4/3;
					}
					> p {
						width: 100%;
					}
				}
				> figure {
					justify-self: end;
					align-self: end;
					grid-area: 2/1/3/3;
					padding: 10px;
					@media (width < 1100px) {
						width: auto;
						grid-area: 3/1/4/3;
					}
					@media (width < 850px) {
						justify-self: center;
						align-self: end;
					}
					> img {
						max-width: 100%;
					}
				}
				> div.coursename {
					margin-top: 30px;
					grid-area: 1/1/2/3;
					background-color: #e5efee;
					mix-blend-mode: multiply;
					padding-inline: 20px;
					display: flex;
					align-items: center;
					column-gap: 20px;
					font-family: var(--font-serif);
					> h3 {
						font-size: min(2.0rem,6vw);
						line-height: 1.8;
						color: var(--color-accent);
						font-weight: 700;
					}
					> p {
						font-size: min(1.2rem,5vw);
						line-height: 1.3;
						color: var(--color-accent);
						font-weight: 500;
					}
				}
				> p {
					grid-area: 2/1/3/3;
					padding: 20px;
					text-align: justify;
					font-size: min(1.0rem,5vw);
					line-height: 1.6;
					color: #222;
					@media (width < 1100px) {
						width: auto;
					}
					@media (width < 550px) {
						padding: 10px 20px 15px 20px;
					}
				}
			}
		}
		> div.area02 {
			padding-top: 50px;
			> article {
				display: grid;
				grid-template-columns: 1fr 1fr;
				column-gap: 50px;
				border-image: url(./image/around.svg);
				border-image-slice: 20;
				border-image-width: 25px;
				border-image-repeat: round;
				@media (width < 850px) {
					grid-template-columns: 1fr;
				}
				> figure {
					padding: 10px;
					display: flex;
					align-items: end;
					@media (width < 1000px) {
						align-items: center;
						padding: 10px;
					}
					@media (width < 850px) {
						padding: 10px 10px 0 10px;
					}
					> img {
						max-width: 100%;
					}
				}
				> div.block {
					padding-top: 100px;
					@media (width < 850px) {
						padding-top: 0px;
					}
					> div.coursename {
						background-color: #e5efee;
						mix-blend-mode: multiply;
						padding-inline: 20px;
						display: flex;
						align-items: center;
						column-gap: 20px;
						font-family: var(--font-serif);
						> h3 {
							font-size: min(2.0rem,6vw);
							line-height: 1.8;
							color: var(--color-accent);
							font-weight: 700;
						}
						> p {
							font-size: min(1.2rem,5vw);
							line-height: 1.3;
							color: var(--color-accent);
							font-weight: 500;
						}
					}
					> p {
						grid-area: 2/1/3/3;
						padding: 20px;
						text-align: justify;
						font-size: min(1.0rem,5vw);
						line-height: 1.6;
						color: #222;
						@media (width < 1100px) {
							width: auto;
						}
						@media (width < 550px) {
							padding: 10px 20px 15px 20px;
						}
					}
				}
			}
		}
	}
}