section.panel {
	position: relative;
	z-index: 1;
	background-color: #91d9f8;
	> div {
		max-width: 1920px;
		margin-inline: auto;
		> img {
			max-width: 100%;
		}
	}
}
section.breadcrumbs {
	position: relative;
	z-index: 2;
	background-color: #fff;
	margin-top: -28px;
	border-radius: 50px;
	padding-top: 25px;
	padding-bottom: 25px;
	> div {
		max-width: 1000px;
	}
}
section.top01 {
	padding: min(50px,5vw) 5% 0 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> h2 {
			margin-bottom: 20px;
			font-size: min(2.8rem, 8vw);
			line-height: 1.3;
			color: #333;
			font-weight: 900;
			letter-spacing: 0.1em;
			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-bottom: 20px;
		}
		> h3 {
			font-size: min(1.4rem, 5.5vw);
			line-height: 1.6;
			color: #333;
			font-weight: 800;
			letter-spacing: 0.1em;
			text-align: center;
			> b {
				color: #a72126;
			}
		}
	}
}
section.top02 {
	background-color: #f2f2f2;
	> div {
		padding-top: min(80px,14vw);
		background-color: #fff;
		border-radius: 0 0 50px 50px;
	}
}
section.link {
	background-color: #f2f2f2;
	padding: min(100px,10vw) 5% min(50px,2vw) 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 20px;
		row-gap: 20px;
		@media (width < 1010px) {
			grid-template-columns: repeat(2, 1fr);
		}
		@media (width < 700px) {
			column-gap: 5px;
			row-gap: 5px;
		}
		> div {
			&:nth-of-type(1),
			&:nth-of-type(2) {
				> a {
					> div {
						> div {
							background-color: #72aef7;
						}
					}
				}
			}
			&:nth-of-type(3),
			&:nth-of-type(4) {
				> a {
					> div {
						> div {
							background-color: #dda7ea;
						}
					}
				}
			}
			&:nth-of-type(5){
				> a {
					> div {
						> div {
							background-color: #64c8be;
						}
					}
				}
			}
			&:nth-of-type(6) {
				> a {
					> div {
						height: 80px;
						grid-template-columns: 1fr;
						background: url(./image/down_link02.svg) no-repeat calc(100% - 15px) 50% / 35px, #1f3d7e;
						@media (width < 700px) {
							height: 40px;
							background-position: right 5px top 50%;
							background-size: 20px;
						}
						> p {
							text-align: center;
							padding-right: 20px;
							color: #fff;
							@media (width < 700px) {
								text-align: left;
								padding-left: 10px;
							}
						}
					}
				}
			}
			> a {
				display: grid;
				text-decoration: none;
				&:hover {
					opacity: 0.8;
				}
				> div {
					display: grid;
					grid-template-columns: 80px 1fr;
					background: url(./image/down_link01.svg) no-repeat calc(100% - 15px) 50% / 35px, #fff;
					@media (width < 700px) {
						grid-template-columns: 30px 1fr;
						background-position: right 5px top 50%;
						background-size: 20px;
					}
					> div {
						width: 80px;
						height: 80px;
						display: grid;
						justify-items: center;
						@media (width < 700px) {
							width: 40px;
							height: 40px;
						}
						> img {
							align-self: center;
							width: 35px;
							@media (width < 700px) {
								width: 20px;
							}
						}
					}
					> p {
						align-self: center;
						padding: 10px 10px 10px 20px;
						font-size: min(1.3rem, 6vw);
						font-weight: 600;
						color: #1f3d7e;
						@media (width < 700px) {
							font-size: min(0.8rem, 5vw);
						}
					}
				}
			}
		}
	}
}
section.block {
	background-color: #f2f2f2;
	padding: 0px 5% min(50px,1vw) 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> article {
			padding-block: 60px;
			display: grid;
			grid-template-columns: 1fr 1fr;
			border-bottom: 5px dotted #fff;
			column-gap: 40px;
			row-gap: 20px;
			@media (width < 880px) {
				grid-template-columns: 1fr;
				row-gap: 30px;
			}
			&:nth-of-type(1) {
				> div {
					&:nth-of-type(2) {
						align-self: end;
					}
				}
			}
			&:nth-of-type(2) {
				> div {
					&:nth-of-type(1) {
						@media (width < 880px) {
							order: 4;
						}
					}
				}
			}
			&:nth-of-type(3) {
				> div {
					&:nth-of-type(1) {
						> h3 {
							padding-bottom: 60px;
						}
					}
					&:nth-of-type(2) {
						align-self: end;
						@media (width < 880px) {
							order: 4;
						}
					}
				}
			}
			&:nth-of-type(4) {
				> div {
					&:nth-of-type(1) {
						align-self: center;
						@media (width < 880px) {
							order: 2;
						}
					}
				}
			}
			&:nth-of-type(5) {
				border-bottom: none;
				> div {
					&:nth-of-type(2) {
						align-self: center;
					}
				}
			}
			> div {
				> div.point {
					display: flex;
					align-items: center;
					column-gap: 20px;
					> img {
						width: 140px;
					}
					> h2 {
						font-size: min(1.8rem, 6vw);
						line-height: 1.6;
						color: #1f3d7e;
						font-weight: 800;
						letter-spacing: 0.1em;
					}
				}
				> h3 {
					margin-top: 10px;
					padding-left: 5%;
					font-size: min(1.3rem, 5vw);
					line-height: 1.6;
					color: #333;
					font-weight: 600;
					@media (width < 500px) {
						font-weight: 500;
					}
				}
				> div.item {
					margin-top: 20px;
					display: grid;
					align-items: center;
					> div.line {
						grid-area: 1/1/2/2;
						width: 100%;
						background-color: #ff5074;
						height: 3px;
					}
					> h4 {
						grid-area: 1/1/2/2;
						justify-self: start;
						border-radius: 30px;
						background-color: #ff5074;
						padding-block: 10px;
						min-width: 170px;
						font-size: min(1.4rem, 5.5vw);
						line-height: 1.6;
						color: #fff;
						font-weight: 800;
						letter-spacing: 0.1em;
						text-align: center;
					}
				}
				> p {
					padding-top: 10px;
					font-size: min(1.0rem, 5vw);
					line-height: 1.8;
					color: #333;
					font-weight: 500;
					text-align: justify;
					@media (width < 500px) {
						font-weight: unset;
					}
				}
				> figure {
					> img {
						max-width: 100%;
					}
				}
			}
		}
	}
}
section.create {
	padding: min(100px,15vw) 5% 0px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		background: url(./image/create_bgparts01.svg) no-repeat -8% -8% / 50%, url(./image/create_bgparts02.svg) no-repeat 80% 30% / 140px #eaf3fe;
		border-radius: 40px;
		padding: 50px;
		@media (width < 1020px) {
			padding: 80px 30px 30px 30px;
			background: url(./image/create_bgparts01.svg) no-repeat -50% -2% / 75%, url(./image/create_bgparts02.svg) no-repeat 80% 30% / 140px #eaf3fe;
		}
		> h2 {
			text-align: center;
			font-size: min(1.8rem, 6vw);
			line-height: 1.6;
			color: #1f3d7e;
			font-weight: 800;
			letter-spacing: 0.1em;
		}
		> h4 {
			text-align: center;
			margin-top: 10px;
			padding-left: 5%;
			font-size: min(1.3rem, 5.5vw);
			line-height: 1.6;
			color: #333;
			font-weight: 600;
			letter-spacing: 0.1em;
		}
		> div {
			margin-top: 60px;
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 50px;
			row-gap: 40px;
			@media (width < 1020px) {
				grid-template-columns: 1fr;
				row-gap: 20px;
			}
			> figure {
				> img {
					max-width: 100%;
				}
			}
			> div {
				&:nth-of-type(1) {
					align-self: center;
				}
				> h2 {
					padding-left: 10px;
					border-left: 10px solid #72aef7;
					font-size: min(1.8rem, 6vw);
					line-height: 1.4;
					color: #1f3d7e;
					font-weight: 800;
					letter-spacing: 0.1em;
				}
				> p {
					padding-top: 10px;
					font-size: min(1.0rem, 5vw);
					line-height: 1.8;
					color: #333;
					font-weight: 500;
					text-align: justify;
					@media (width < 500px) {
						font-weight: unset;
					}
				}
			}
		}
	}
}
section.recruitlink {
	padding: min(100px,10vw) 5% min(100px,10vw) 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: min(30px,2vw);
		> div {
			display: grid;
			> a {
				justify-self: center;
				text-decoration: none;
				&:hover {
					opacity: 0.8;
				}
				> figure {
					> img {
						max-width: 100%;
					}
				}
			}
		}
	}
}