section.panel {
	padding: 40px 5% 0px 5%;
	@media (width < 780px) {
		padding: 40px 0% 0px 0%;
	}
	> div {
		max-width: 1920px;
		margin-inline: auto;
		display: grid;
		> picture {
			grid-area: 1/1/2/2;
			> img {
				width: 100%;
				max-width: 100%;
				@media (width < 650px) {
					min-height: 140px;
					object-fit: cover;
                    object-position: 25% center;
				}
			}
		}
		> div {
			grid-area: 1/1/2/2;
			justify-self: start;
            align-self: end;
			margin-bottom: 2%;
			@media (width < 500px) {
				margin-bottom: 0px;
				align-self: center;
			}
			> figure {
				margin-left: 20%;
				> img {
					width: 12vw;
					@media (width < 780px) {
						width: 160px;
					}
				}
			}
			> p {
				margin-top: 10px;
				text-align: center;
				background-color: #fff;
				font-size: min(1.1rem, 6vw);
				line-height: 1.5;
				color: var(--color-accent2);
				font-weight: 700;
			}

		}
	}
}
section.breadcrumbs {
	background-color: #fff;
}
section.title {
	padding: 60px 5% 0 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		display: grid;
		row-gap: 15px;
		align-content: center;
		> h1 {
			grid-area: 1/1/2/2;
			text-align: center;
			font-size: 3rem;
			line-height: 1.2;
			color: #000;
			font-weight: 700;
		}
		> div {
			grid-area: 1/1/2/2;
			justify-self: end;
			@media (width < 1000px) {
				grid-row: 2/3;
				justify-self: center;
			}
			> a {
				text-decoration: none;
				&:hover {
					opacity: 0.7;
				}
				> img {
					max-width: 100%;
					@media (width < 1000px) {
						width: 200px;
					}
				}
			}
		}
	}
}
section.career {
	padding: 60px 5% 100px 5%;
	> div#careerArea {
		max-width: 1000px;
		margin-inline: auto;
		> div {
			&:has( > ul:empty) {
				> picture {
					display: block;
				}
			}
			> picture {
				display: none;
				text-align: center;
				> img {
					max-width: 100%;
				}
			}
			> ul {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				column-gap: 10px;
				row-gap: 10px;
				> li {
					> a {
						display: inline-block;
						text-decoration: none;
						background-color: var(--color-accent2);
						font-size: 1rem;
						line-height: 1.3;
						color: #fff;
						padding-block: 15px;
						padding-inline: 20px 60px;
						border-radius: 5px;
						background-image: url(./image/link_bottom.svg), linear-gradient(#08d,var(--color-accent2));
						background-repeat: no-repeat;
						background-position: right 10px top 50%, 50% 50%;
						background-size: 24px, 100%;
						white-space: nowrap;
						@media (width < 500px) {
							padding-block: 8px;
						}
						&:hover {
							opacity: 0.7;
						}
					}
				}
			}
			> div {
				> article {
					margin-top: 80px;
					> h3 {
						background-color: #ddd;
						font-size: 1.2rem;
						line-height: 1.3;
						padding-block: 10px;
						padding-inline: 10px;
						text-align: center;
					}
					> div:nth-of-type(1) {
						margin-top: 20px;
						> table {
							border-collapse: collapse;
							width: 100%;
							> tbody {
								> tr {
									> th {
										font-size: min(1rem,4.5vw);
										color: #111;
										font-weight: 500;
										text-align-last: justify;
										border-style: solid none solid none;
										border-width: 2px;
										border-color: #ddd;
										padding-block: 5px;
										padding-inline: 20px;
										white-space: nowrap;
										@media (width < 500px) {
											padding-inline: 5px;
										}
									}
									> td {
										font-size: min(1rem,4.5vw);
										color: #111;
										border-style: solid none solid solid;
										border-width: 2px;
										border-color: #ddd;
										padding-block: 5px;
										padding-inline: 20px;
										@media (width < 500px) {
											padding-inline: 5px;
										}
									}
								}
							}
						}
					}
					> div:nth-of-type(2) {
						margin-top: 20px;
						text-align: center;
						> a {
							text-decoration: none;
							display: inline-block;
							background-color: var(--color-accent2);
							font-size: 1rem;
							line-height: 1.3;
							color: #fff;
							padding-block: 15px;
							padding-inline: 20px 60px;
							background-image: url(./image/link_right.svg);
							background-repeat: no-repeat;
							background-position: right 10px top 50%;
							&:hover {
								opacity: 0.7;
							}
						}
					}
				}
			}
		}
	}
}
section.faq {
	margin-top: 100px;
	background-color: #d9eef7;
	padding: 100px 5%;
	> div {
		background-color: #fff;
		max-width: 1000px;
		margin-inline: auto;
		padding: 100px 50px;
		@media (width < 770px) {
			padding: 10vw 5vw;
		}
		> div {
			max-width: 800px;
			margin-inline: auto;
			> h3 {
				font-size: min(2.0rem, 9vw);
				line-height: 1.0;
				color: #222;
				font-weight: 700;
				margin-block: 0px 40px;
				letter-spacing: 4px;
			}
			> article {
				background-color: #fff;
				border-bottom: 1px solid #999999;
				&:last-of-type {
					margin-bottom: 0px;
				}
				> input[type="checkbox"] {
					display: none;
					&:checked + label > figure {
						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 {
					list-style: none;
					display: grid;
					grid-template-columns: 50px 1fr auto;
					align-items: center;
					column-gap: 10px;
					cursor: pointer;
					padding: 20px 0px;
					@media (width < 500px) {
						padding: 10px 0px;
						grid-template-columns: 35px 1fr auto;
					}
					> img {
						width: 50px;
						@media (width < 500px) {
							width: 35px;
						}
					}
					> h3 {
						color: #000;
						font-size: min(1.6rem, 6vw);
						line-height: 1.4;
						font-weight: 700;
						@media (width < 650px) {
							text-align: justify;
							> br {
								display: none;
							}
						}
					}
					> figure {
						transition: 0.2s;
						> img {
							width: 20px;
						}
					}
				}
				> div {
					overflow: hidden;
					> div {
						display: grid;
						grid-template-columns: 50px 1fr;
						column-gap: 10px;
						padding-bottom: 30px;
						@media (width < 500px) {
							padding-bottom: 20px;
							grid-template-columns: 35px 1fr;
						}
						> img {
							width: 50px;
							@media (width < 500px) {
								width: 35px;
							}
						}
						> p {
							font-size: min(1.2rem, 5vw);
							line-height: 1.6;
							color: #222;
							text-align: justify;
						}
					}
				}
			}	
		}
	}
}
@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;
	}
}