section.panel {
	> div {
		display: grid;
		> figure {
			grid-area: 1/1/2/2;
			> img {
				max-width: 100%;
				width: 100%;
			}
		}
		> div {
			margin-top: 50px;
			grid-area: 1/1/2/2;
			align-self: center;
			justify-self: center;
			@media (width < 550px) {
				margin-top: 30px;
			}
			> h2 {
				font-size: min(3.5rem, 8vw);
				line-height: 1.3;
				color: #333;
				font-weight: 900;
				letter-spacing: 0.05em;
				text-align: center;
				font-family: var(--font-en);
			}
			> p {
				font-size: min(1.4rem, 6vw);
				line-height: 1.3;
				color: #333;
				font-weight: 800;
				letter-spacing: 0.1em;
				text-align: center;
				margin-top: 20px;
				@media (width < 550px) {
					margin-top: 10px;
				}
			}
		}
	}
}
section.breadcrumbs {
	padding-block: 15px;
	> div {
		max-width: 1000px;
	}
}
section.link {
	background-color: #e9ecf2;
	padding: min(100px,15vw) 5% min(50px,5vw) 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 20px;
		@media (width < 670px) {
			column-gap: 5px;
		}
		> div {
			&:nth-of-type(1) {
				> a {
					> div {
						background-color: #ffa06e;
						> p {
							color: #fff;
						}
					}
				}
			}
			&:nth-of-type(2) {
				> a {
					> div {
						background-color: #fff;
						border: 3px solid #82dca0;
						> p {
							color: #82dca0;
						}
					}
				}
			}
			> a {
				display: grid;
				text-decoration: none;
				&:hover {
					opacity: 0.8;
				}
				> div {
					border-radius: 30px;
					> p {
						padding-block: 20px;
						min-width: 200px;
						align-self: center;
						font-size: min(1.5rem, 6vw);
						font-weight: 600;
						text-align: center;
						color: #0075c1;
						@media (width < 670px) {
							font-size: min(0.8rem, 4.5vw);
							min-width: 0px;
						}
					}
				}
			}
		}
	}
}
section.newgrad {
	background-color: #e9ecf2;
	padding: 100px 5% 100px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		display: grid;
		> h3 {
			margin-bottom: 30px;
			padding-block: 20px;
			align-self: center;
			border-radius: 40px;
			min-width: 380px;
			justify-self: center;
			background-color: #ffa06e;
			font-size: min(1.5rem, 6vw);
			font-weight: 600;
			text-align: center;
			color: #fff;
			@media (width < 500px) {
				min-width: unset;
				padding: 20px 80px;
			}
		}
		> div.block {
			> article {
				margin-bottom: 20px;
				border-radius: 10px;
				background-color: #fff;
				&:last-of-type {
					margin-bottom: 0px;
				}
				> input[type="checkbox"] {
					display: none;
					&:checked + label > figure {
						&:nth-of-type(2) {
							transform: rotate(-45deg);
						}
					}
					&:checked + label + div {
						animation-name: moreToggleOpen;
						animation-duration: 0.3s;
						animation-fill-mode: forwards;
						animation-timing-function: ease-in;
					}
					& + label + div {
						animation-name: moreToggleClose;
						animation-duration: 0.3s;
						animation-fill-mode: forwards;
						animation-timing-function: ease-out;
					}
				}
				> label {
					background-color: #ffa06e;
					border-radius: 10px;
					padding: 15px 30px;
					list-style: none;
					display: grid;
					grid-template-columns: 50px 1fr 24px;
					align-items: center;
					cursor: pointer;
					column-gap: 20px;
					@media (width < 500px) {
						padding: 10px;
						grid-template-columns: min(15vw, 50px) 1fr 18px;
						column-gap: 10px;
					}
					> h3 {
						color: #fff;
						font-size: min(1.0rem, 4.5vw);
						line-height: 1.3;
						font-weight: 700;
					}
					> figure {
						&:nth-of-type(1) {
							> img {
								width: 50px;
								@media (width < 500px) {
									width: min(15vw, 50px);
								}
							}
						}
						&:nth-of-type(2) {
							transition: 0.2s;
							> img {
								width: 24px;
								@media (width < 500px) {
									width: 18px;
								}
							}
						}
					}
				}
				> div {
					overflow: hidden;
					> div {
						background-color: #fff;
						border-radius: 10px;
						padding: 25px 80px 25px 80px;
						@media (width < 500px) {
							padding: 15px 7% 15px 7%;
						}
						> iframe {
							width: 100%;
							height: min(300px, 50vw);
						}
						> p {
							font-size: min(1.0rem, 4.5vw);
							line-height: 1.8;
							font-weight: 500;
							color: #333;
							text-align: justify;
							@media (width < 500px) {
								font-weight: unset;
								line-height: 1.6;
							}
						}
					}
				}
			}
		}
	}
}
section.career {
	background-color: #e9ecf2;
	padding: 100px 5% 130px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		display: grid;
		> h3 {
			margin-bottom: 30px;
			padding-block: 20px;
			align-self: center;
			border-radius: 40px;
			min-width: 380px;
			justify-self: center;
			background-color: #82dca0;
			font-size: min(1.5rem, 6vw);
			font-weight: 600;
			text-align: center;
			color: #fff;
			@media (width < 500px) {
				min-width: unset;
				padding: 20px 80px;
			}
		}
		> div.block {
			> article {
				margin-bottom: 20px;
				border-radius: 10px;
				background-color: #fff;
				&:last-of-type {
					margin-bottom: 0px;
				}
				> input[type="checkbox"] {
					display: none;
					&:checked + label > figure {
						&:nth-of-type(2) {
							transform: rotate(-45deg);
						}
					}
					&:checked + label + div {
						animation-name: moreToggleOpen;
						animation-duration: 0.3s;
						animation-fill-mode: forwards;
						animation-timing-function: ease-in;
					}
					& + label + div {
						animation-name: moreToggleClose;
						animation-duration: 0.3s;
						animation-fill-mode: forwards;
						animation-timing-function: ease-out;
					}
				}
				> label {
					background-color: #82dca0;
					border-radius: 10px;
					padding: 15px 30px;
					list-style: none;
					display: grid;
					grid-template-columns: 50px 1fr 24px;
					align-items: center;
					cursor: pointer;
					column-gap: 20px;
					@media (width < 500px) {
						padding: 10px;
						grid-template-columns: min(15vw, 50px) 1fr 18px;
						column-gap: 10px;
					}
					> h3 {
						color: #fff;
						font-size: min(1.0rem, 5vw);
						line-height: 1.3;
						font-weight: 700;
					}
					> figure {
						&:nth-of-type(1) {
							> img {
								width: 50px;
								@media (width < 500px) {
									width: min(15vw, 50px);
								}
							}
						}
						&:nth-of-type(2) {
							transition: 0.2s;
							> img {
								width: 24px;
								@media (width < 500px) {
									width: 18px;
								}
							}
						}
					}
				}
				> div {
					overflow: hidden;
					> div {
						background-color: #fff;
						border-radius: 10px;
						padding: 25px 80px 25px 80px;
						@media (width < 500px) {
							padding: 15px 7% 15px 7%;
						}
						> iframe {
							width: 100%;
							height: min(300px, 50vw);
						}
						> p {
							font-size: min(1.0rem, 5vw);
							line-height: 1.8;
							font-weight: 500;
							color: #333;
							text-align: justify;
							@media (width < 500px) {
								font-weight: unset;
								line-height: 1.6;
							}
						}
					}
				}
			}
		}
	}
}
@keyframes moreToggleOpen {
	0% {
		max-height: 0px;
	}
	80% {
		max-height: 100px;
	}
	90% {
		max-height: 200px;
	}
	100% {
		max-height: 9999px;
	}
}
@keyframes moreToggleClose {
	0% {
		max-height: 9999px;
	}
	10% {
		max-height: 200px;
	}
	20% {
		max-height: 100px;
	}
	100% {
		max-height: 0px;
	}
}