section.panel {
	position: relative;
	z-index: 1;
	background-color: #bcdff8;
	> 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,3vw) 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: #d5e7fd;
	> div {
		padding-top: min(80px,10vw);
		background-color: #fff;
		border-radius: 0 0 50px 50px;
	}
}
section.message {
	background-color: #d5e7fd;
	padding: min(100px,15vw) 5% 50px 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;
			text-align: center;
			margin-bottom: 40px;
		}
		> figure {
			> img {
				border-radius: 40px;
				max-width: 100%;
			}
		}
		> div {
			padding-inline: 5%;
			> h3 {
				padding-top: 40px;
				font-size: min(1.8rem, 6.0vw);
				line-height: 1.3;
				color: #333;
				font-weight: 900;
				letter-spacing: 0.1em;
				text-align: center;
			}
			> p {
				padding-block: 30px 20px;
				font-size: min(1.0rem, 5vw);
				line-height: 1.6;
				color: #333;
				letter-spacing: 0.1em;
				text-align: justify;
			}
			> h4 {
				font-size: min(1.4rem, 5.5vw);
				line-height: 2.0;
				color: #333;
				font-weight: 500;
				text-align: right;
				> small {
					font-size: min(1.0rem, 5vw);
				}
			}
		}
	}
}
section.content01 {
	padding: 100px 5% 50px 5%;
	background-image: url(./image/bg_parts01.svg);
	background-size: 70% auto;
	background-position: 0% 0%;
	background-repeat: no-repeat;
	> 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);
			&:nth-of-type(2) {
				margin-top: 100px;
			}
		}
		> h3 {
			margin-bottom: 20px;
			ont-size: min(1.4rem, 6vw);
			line-height: 1.3;
			color: #333;
			font-weight: 800;
			letter-spacing: 0.1em;
			text-align: center;
			margin-bottom: 40px;
		}
		> p {
			font-size: min(1.0rem, 5vw);
			line-height: 2.0;
			color: #333;
			font-weight: 500;
			letter-spacing: 0.1em;
			text-align: justify;
			margin-bottom: 40px;
		}
		> picture {
			text-align: center;
			> img {
				width: 100%;
				max-width: 100%;
			}
		}
		> h4 {
			margin-top: 40px;
			font-size: min(1.1rem, 5vw);
			line-height: 1.6;
			color: #333;
			font-weight: 500;
			letter-spacing: 0.1em;
			text-align: justify;
			margin-bottom: 40px;
			padding: 20px 30px;
			background-color: #ebeef0;
		}
	}
}
section.pieces {
	padding: 40px 5% 40px 5%;
	> div {
		position: relative;
		border-radius: 40px;
		border: 4px solid #cccccc;
		background-color: #fff;
		padding: 30px;
		max-width: 1000px;
		margin-inline: auto;
		@media (width < 870px) {
			padding: 40px 30px;
		}
		@media (width < 510px) {
			padding: 40px 45px;
		}
		> h3 {
			text-align: center;
			font-size: min(2.0rem, 7vw);
			line-height: 1.3;
			color: #333;
			font-weight: 800;
			letter-spacing: 0.2em;
		}
		> p {
			text-align: center;
			font-size: min(0.9rem,4.5vw);
			line-height: 1.5;
			color: #333;
			font-weight: 500;
		}
		> figure {
			position: absolute;
			&:nth-of-type(1) {
				top: 15%;
				left: 8%;
				transition-delay: 0.2s;
				@media (width < 960px) {
					left: 4%;
				}
				@media (width < 740px) {
					top: 20%;
					left: 10%;
				}
				@media (width < 650px) {
					left: 5%;
				}
				> img {
					width: 90px;
					@media (width < 650px) {
						width: 15vw;
					}
				}
			}
			&:nth-of-type(2) {
				top: 12%;
				right: 13%;
				transition-delay: 0.25s;
				@media (width < 960px) {
					right: 9%;
				}
				@media (width < 740px) {
					top: 18%;
					right: 10%;
				}
				@media (width < 650px) {
					right: 5%;
				}
				> img {
					width: 80px;
					@media (width < 650px) {
						width: 14vw;
					}
				}
			}
			&:nth-of-type(3) {
				bottom: 10%;
				left: 6%;
				@media (width < 960px) {
					left: 2%;
				}
				@media (width < 740px) {
					bottom: 10%;
					left: 10%;
				}
				@media (width < 650px) {
					left: 4%;
				}
				> img {
					width: 70px;
					@media (width < 650px) {
						width: 11vw;
					}
				}
			}
			&:nth-of-type(4) {
				bottom: 8%;
				right: 8%;
				@media (width < 960px) {
					right: 4%;
				}
				@media (width < 740px) {
					bottom: 8%;
					right: 8%;
				}
				@media (width < 650px) {
					right: 4%;
				}
				> img {
					width: 70px;
					@media (width < 650px) {
						width: 11vw;
					}
				}
			}
		}
		> div {
			padding-block: 40px 20px;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			column-gap: 50px;
			@media (width < 870px) {
				padding-block: 60px 40px;
				grid-template-columns: repeat(1, 1fr);
				row-gap: 20px;
			}
			@media (width < 510px) {
				padding-block: 70px 40px;
			}
			> div {
				&:nth-of-type(1) {
					justify-self: end;
					@media (width < 870px) {
						justify-self: center;
					}
				}
				&:nth-of-type(2) {
					justify-self: start;
					@media (width < 870px) {
						justify-self: center;
					}
				}
				> p {
					text-align: center;
					font-size: min(1.6rem, 6vw);
					line-height: 1.3;
					color: #00a0e9;
					font-weight: 800;
					> b {
						font-size: min(3.0rem, 8vw);
					}
				}
			}
		}
	}
}
section.content02 {
	padding: 0px 5% 150px 5%;
	background-image: url(./image/bg_parts02.svg);
	background-size: 55% auto;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	@media (width < 1020px) {
		background-size: 65% auto;
		background-position: 100% calc(100% - 5vw);
	}
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> div {
			display: grid;
			grid-template-columns: 1fr 1fr;
			row-gap: 50px;
			@media (width < 1020px) {
				grid-template-columns: 1fr;
				row-gap: 50px;
			}
			> article {
				display: grid;
				@media (width < 1020px) {
					justify-content: center;
				}
				&:nth-of-type(1) {
					padding-right: 50px;
					@media (width < 1020px) {
						padding-right: 0px;
					}
				}
				&:nth-of-type(2) {
					> div {
						display: grid;
						> h3 {
							align-self: center;
						}
					}
				}
				&:nth-of-type(3) {
					justify-self: center;
					> figure {
						position: relative;
						z-index: 3;
						@media (width < 470px) {
							margin-inline: 8vw;
						}
						> img {
							max-width: 100%;
						}
					}
					> div {
						position: relative;
						z-index: 2;
						display: grid;
						> h3 {
							align-self: center;
							padding-top: 40px;
							@media (width < 470px) {
								padding-top: 20px;
							}
						}
						> p {
							padding-top: 20px;
							@media (width < 470px) {
								padding-top: 0px;
							}
						}
					}
				}
				&:nth-of-type(4) {
					margin-top: -50px;
					@media (width < 1020px) {
						margin-top: 0px;
					}
					> div {
						display: grid;
						> h3 {
							align-self: center;
						}
						> p {
							padding-top: 20px;
							@media (width < 470px) {
								padding-top: 0px;
							}
						}
					}
				}
				> h2 {
					font-size: min(2.2rem, 7vw);
					line-height: 1.6;
					color: #00a0e9;
					font-weight: 800;
					letter-spacing: 0.1em;
				}
				> p {
					margin-top: 30px;
					font-size: min(1.0rem, 4.5vw);
					line-height: 2.0;
					color: #333;
					font-weight: 500;
					letter-spacing: 0.1em;
					text-align: justify;
				}
				> div {
					position: relative;
					padding: 60px;
					border-radius: 50%;
					background-color: #ebeef0;
					width: 400px;
					height: 400px;
					@media (width < 470px) {
						width: 75vw;
						height: 75vw;
						padding: 40px;
						margin-inline: auto;
					}
					> h3 {
						font-size: min(1.6rem, 6vw);
						line-height: 1.6;
						color: #333;
						font-weight: 800;
						letter-spacing: 0.1em;
						text-align: center;
					}
					> p {
						font-size: min(1.0rem, 5vw);
						line-height: 2.0;
						color: #333;
						font-weight: 500;
						letter-spacing: 0.1em;
						text-align: justify;
						@media (width < 470px) {
							letter-spacing: unset;
							line-height: 1.8;
						}
					}
					&.block {
						> figure {
							position: absolute;
							&:nth-of-type(1) {
								top: 10px;
								right: -50px;
								@media (width < 470px) {
									right: -2vw;
								}
								> img {
									width: 145px;
									@media (width < 470px) {
										width: 20vw;
									}
								}
							}
							&:nth-of-type(2) {
								bottom: 10px;
								left: 0px;
								> img {
									width: 90px;
									@media (width < 470px) {
										width: 15vw;
									}
								}
							}
						}
					}
				}
				> figure {
					margin-bottom: -80px;
					text-align: center;
					justify-self: center;
					@media (width < 470px) {
						margin-bottom: -50px;
					}
					> img {
						width: 300px;
						@media (width < 470px) {
							width: 90vw;
						}
					}
				}
			}
			> figure {
				text-align: center;
				&:nth-of-type(2) {
					margin-top: 40px;
					@media (width < 1020px) {
						margin-top: 0px;
					}
				}
				> img {
					max-width: 100%;
				}
			}
		}
		> figure {
			padding-top: 50px;
			text-align: center;
			> img {
				max-width: 100%;
			}
		}
	}
}
section.base {
	position: relative;
	margin-top: -50px;
	padding: min(200px,30vw) 5% min(100px,10vw) 5%;
	background-color: #e8f7f5;
	border-radius: 50px;
	margin-bottom: 80px;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> div.title {
			position: absolute;
			top: -30px;
			right: 0;
			left: 0;
			margin-inline: auto;
			display: grid;
			> figure {
				grid-area: 1/1/2/2;
				text-align: center;
				> img {
					width: 380px;
					@media (width < 420px) {
						width: 80%;
					}
				}
			}
			> h3 {
				grid-area: 1/1/2/2;
				align-self: top;
				margin-top: 20px;
				font-size: min(1.6rem, 6vw);
				line-height: 1.6;
				color: #fff;
				font-weight: 800;
				letter-spacing: 0.1em;
				text-align: center;
			}
		}
		> div.block01 {
			display: grid;
			> h2 {
				justify-self: center;
				background-color: #fff;
				padding: 10px 20px;
				margin-top: 20px;
				font-size: min(1.6rem, 6vw);
				line-height: 1.6;
				color: #333;
				font-weight: 800;
				letter-spacing: 0.1em;
			}
		}
		> div.block02 {
			margin-top: 20px;
			display: grid;
			max-width: 800px;
			margin-inline: auto;
			&.nogrid {
				display: block;
			}
			@media (width < 700px) {
				display: block;
			}
			> div {
				margin-top: 30px;
				grid-area: 1/1/2/2;
				display: grid;
				background-color: #64c8be;
				border-radius: 50%;
				width: 150px;
				height: 150px;
				@media (width < 530px) {
					width: 27vw;
					height: 27vw;
				}
				> h3 {
					align-self: center;
					justify-self: center;
					font-size: min(1.4rem, 5vw);
					line-height: 1.6;
					color: #fff;
					font-weight: 800;
					letter-spacing: 0.1em;
					text-align: center;
				}
			}
			> figure {
				grid-area: 1/1/2/2;
				justify-self: center;
				@media (width < 700px) {
					margin-top: -30px;
					&.notopspace {
						margin-top: 0px;
					}
				}
				> img {
					max-width: 100%;
				}
			}
		}
		> div.mainbase {
			background-color: #fff;
			border-radius: 40px;
			padding: 40px 60px;
			@media (width < 500px) {
				padding: 30px;
			}
			> h4 {
				background-color: #64c8be;
				font-size: min(1.4rem, 5vw);
				line-height: 1.6;
				color: #fff;
				font-weight: 800;
				letter-spacing: 0.1em;
				text-align: center;
				margin-bottom: 30px;
			}
			> div {
				display: grid;
				grid-template-columns: 1fr 1fr;
				column-gap: 30px;
				row-gap: 10px;
				@media (width < 950px) {
					grid-template-columns: 1fr;
					row-gap: 60px;
				}
				> article {
					display: grid;
					grid-template-rows: subgrid;
  					grid-row: span 4;
					@media (width < 950px) {
						display: block;
					}
					> figure {
						text-align: center;
						> img {
							width: 100%;
							max-width: 100%;
						}
					}
					> p {
						font-size: min(1.2rem, 5vw);
						line-height: 1.4;
						color: #333;
						font-weight: 600;
						letter-spacing: 0.1em;
						> small {
							font-size: min(1.0rem, 5vw);
							font-weight: 500;
						}
						&:nth-of-type(1) {
							margin-top: 10px;
							@media (width < 950px) {
								margin-top: 20px;
							}
						}
						&:nth-of-type(2) {
							margin-bottom: 10px;
							@media (width < 950px) {
								margin-bottom: 20px;
							}
						}
					}
					> a {
						display: grid;
						text-decoration: none;
						&:hover {
							opacity: 0.8;
						}
						> div {
							justify-self: start;
							border-radius: 10px;
							background: url(../common/image/mark_external_fff.svg) no-repeat calc(100% - 15px) 50%, linear-gradient(to left, #ff8c32, #ff5074);
							padding: 15px 40px 15px 30px;
							@media (width < 500px) {
								padding: 15px 40px 15px 20px;
							}
							> p {
								text-align: center;
								font-size: min(1.1rem, 5vw);
								font-weight: 500;
								letter-spacing: 0.1rem;
								color: #fff;
							}
						}
					}
				}
			} 
		}
	}
}