section.panel {
	background-color: #faf0c8;
	padding: 0px 5% 80px 5%;
	> div {
		max-width: 1160px;
		margin-inline: auto;
		> figure {
			> img {
				max-width: 100%;
				border-radius: 20px;
				@media (width < 550px) {
					border-radius: 0px;
				}
			}
		}
	}
}
section.breadcrumbs {
	background-color: #faf0c8;
}
section.top {
	padding: 0px 5% 180px 5%;
	background: url(./image/mark.svg) #faf0c8 ;
	background-size: min(30vw, 350px);
	background-repeat: no-repeat;
	background-position: bottom 65% left 80%;
	@media (width < 800px) {
		background-position: top 0% left 90%;
	}
	@media (width < 470px) {
		background-position: top 5% left 95%;
	}
	> div {
		max-width: 800px;
		margin-inline: auto;
		> h2 {
			padding-top: 40px;
			> div {
				font-size: min(3.5rem, 9vw);
				line-height: 1.0;
				color: var(--color-accent);
				font-weight: 800;
				letter-spacing: 0.5rem;
			}
			> p {
				padding-top: 20px;
				font-size: min(1.4rem, 6vw);
				line-height: 1.0;
				color: #846c28;
				font-weight: 600;
				font-family: var(--font-en);
				letter-spacing: 2px;
			}
		}
		> p {
			padding-top: 30px;
			font-size: min(1.1rem, 5vw);
			line-height: 2.2;
			color: var(--color-accent);
			font-weight: 800;
			letter-spacing: 0.2rem;
			&:nth-of-type(1) {
				> span {
					color: #938254;
					font-size: min(1.8rem, 6.5vw);
				}
			}
			@media (width < 370px) {
				letter-spacing: 0.1em;
			}
		}
	}
}
section.case {
	margin-top: -80px;
	padding: 50px 5% 100px 5%;
	background-color: #fff;
	border-radius: 80px 80px 0px 0px;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> div {
			display: grid;
			&:has(> input[type="radio"][id="case1"]:checked) {	/*「フロント」を選択した場合*/
				> div > div > label:nth-of-type(1) {
					background-color: #00ac9a;
					border-radius: 20px 20px 0px 0px;
					@media (width < 700px) {
						border-radius: 0px;
					}
					> div {
						> p {
							color: #fff;
							> small {
								color: #fff;
							}
						}
					}
				}
				> article:nth-of-type(1) {
					display: block;
				}
			}
			&:has(> input[type="radio"][id="case2"]:checked) {	/*「フロント」を選択した場合*/
				> div > div > label:nth-of-type(2) {
					background-color: #00ac9a;
					border-radius: 20px 20px 0px 0px;
					@media (width < 700px) {
						border-radius: 0px;
					}
					> div {
						> p {
							color: #fff;
							> small {
								color: #fff;
							}
						}
					}
				}
				> article:nth-of-type(2) {
					display: block;
				}
			}
			&:has(> input[type="radio"][id="case3"]:checked) {	/*「フロント」を選択した場合*/
				> div > div > label:nth-of-type(3) {
					background-color: #00ac9a;
					border-radius: 20px 20px 0px 0px;
					@media (width < 700px) {
						border-radius: 0px;
					}
					> div {
						> p {
							color: #fff;
							> small {
								color: #fff;
							}
						}
					}
				}
				> article:nth-of-type(3) {
					display: block;
				}
			}
			&:has(> input[type="radio"][id="case4"]:checked) {	/*「フロント」を選択した場合*/
				> div > div > label:nth-of-type(4) {
					background-color: #00ac9a;
					border-radius: 20px 20px 0px 0px;
					@media (width < 700px) {
						border-radius: 0px;
					}
					> div {
						> p {
							color: #fff;
							> small {
								color: #fff;
							}
						}
					}
				}
				> article:nth-of-type(4) {
					display: block;
				}
			}
			&:has(> input[type="radio"][id="case5"]:checked) {	/*「フロント」を選択した場合*/
				> div > div > label:nth-of-type(5) {
					background-color: #00ac9a;
					border-radius: 20px 20px 0px 0px;
					@media (width < 700px) {
						border-radius: 0px;
					}
					> div {
						> p {
							color: #fff;
							> small {
								color: #fff;
							}
						}
					}
				}
				> article:nth-of-type(5) {
					display: block;
				}
			}
			> input[type="radio"] {	/*ラジオボタンは常に非表示*/
				display: none;
			}
			> div {
				grid-area: 1/1/2/3;
				padding-top: 40px;
				> div {
					display: grid;
					grid-template-columns: repeat(5, 1fr);
					border-bottom: 1px solid #00ac9a;
					justify-content: center;
					@media (width < 700px) {
						grid-template-columns: repeat(3, 1fr);
						border-bottom: unset;
					}
					@media (width < 420px) {
						grid-template-columns: repeat(2, 1fr);
					}
					> label {	/*各input[type="radio"]に対応*/
						display: block;
						padding-block: 10px;
						cursor: pointer;
						user-select: none;
						@media (width < 700px) {
							border-bottom: 1px solid #00ac9a;
							padding: 10px;
						}
						&:nth-of-type(6) {
							display: none;
							background-image: linear-gradient(-0deg, transparent 49.5%, #00ac9a 49.5%, #00ac9a 50.5%, transparent 50.5%);
							@media (width < 700px) {
								display: block;
							}
						}
						> div {
							display: grid;
							justify-content: center;
							> p {
								font-size: min(1.3rem,5vw);
								color: #00ac9a;
								font-weight: 600;
								@media (width < 700px) {
									font-size: min(1.1rem,5vw);
								}
								> small {
									text-align: right;
									font-size: min(1.0rem,5vw);
									color: #3e3a39;
									@media (width < 700px) {
										font-size: min(0.9rem,4.5vw);
									}
								}
							}
						}
					}
				}
			}
			> article {
				padding-top: 100px;
				grid-area: 2/1/3/3;
				display: none;
				transition: opacity 0.3s;
				> div.main {
					display: grid;
					max-width: 800px;
					margin-inline: auto;
					> div.step {
						display: grid;
						grid-template-columns: auto 1fr;
						column-gap: 10px;
						align-items: center;
						@media (width < 810px) {
							grid-template-columns: 1fr;
						}
						> p {
							padding: 10px 20px;
							background-color: var(--color-accent);
							font-size: min(1.1rem,5vw);
							line-height: 1.0;
							color: #fff;
							font-weight: 800;
							@media (width < 810px) {
								justify-self: start;
							}
						}
						> h5 {
							text-align: center;
							padding: 5px 10px;
							font-size: min(1.8rem, 6vw);
							line-height: 1.4;
							color: var(--color-accent);
							font-weight: 600;
							letter-spacing: 0.1em;
							> b {
								font-size: min(2.0rem, 6vw);
							}
							> small {
								font-size: min(1.5rem, 5.5vw);
							}
							@media (width < 800px) {
								text-align: left;
							}
						}
					}
					> h3 {
						text-align: right;
						font-size: min(4rem, 10vw);
						line-height: 1.2;
						color: #E3E0D4;
						font-weight: 800;
						padding-bottom: 30px;
					}
					> figure {
						text-align: center;
						margin-bottom: 30px;
						> img {
							border-radius: 20px;
							max-width: 100%;
						}
					}
					> div.link {
						border-radius: 20px;
						display: grid;
						grid-template-columns: 1fr auto;
						column-gap: 10px;
						padding: 10px;
						@media (width < 750px) {
							grid-template-columns: 1fr;
							row-gap: 10px;
							padding: 15px;
						}
						&.standard {
							background-color: #feffd9;
							> div {
								> a {
									> div {
										background: url(./image/arrow_fff.svg)#ffa05e;
										background-size: 16px;
										background-repeat: no-repeat;
										background-position: top 51% right 20px;
									}
								}
							}
						}
						&.light {
							background-color: #d7f4ff;
							> div {
								> a {
									> div {
										background: url(./image/arrow_fff.svg)#4bc1ea;
										background-size: 16px;
										background-repeat: no-repeat;
										background-position: top 51% right 20px;
									}
								}
							}
						}
						> p {
							padding-left: 10px;
							font-size: min(1.1rem, 5vw);
							line-height: 1.8;
							color: var(--color-accent);
							font-weight: 600;
							letter-spacing: 0.1em;
							align-self: center;
							@media (width < 750px) {
								text-align: center;
							}
						}
						> div {
							display: flex;
							justify-content: center;
							> a {
								text-decoration: none;
								&:hover {
									opacity: 0.8;
								}
								> div {
									border-radius: 30px;
									padding: 5px 60px 5px 60px;
									@media (width < 450px) {
										background-position: top 51% right 15px;
										padding: 5px 40px 5px 40px;
									}
									> p {
										font-size: min(1.0rem, 5vw);
										line-height: 2.0;
										color: #fff;
										font-weight: 500;
										letter-spacing: 3px;
									}
								}
							}
						}
					}
					> p {
						text-align: center;
						font-size: min(1.6rem, 6vw);
						line-height: 2.0;
						color: var(--color-accent);
						font-weight: 800;
						letter-spacing: 3px;
						padding-block: 10px;
					}
					> div.block {
						margin-top: 50px;
						border-left: 5px solid #846c28;
						@media (width < 630px) {
							margin-left: 5px;
						}
						> h4 {
							margin-left: 20px;
							font-size: min(1.5rem, 6vw);
							line-height: 1.5;
							color: var(--color-accent);
							font-weight: 600;
							border-bottom: 1px solid #000;
							padding-bottom: 15px;
							@media (width < 630px) {
									margin-left: 10px;
								}
						}
						> div {
							margin-left: 20px;
							@media (width < 630px) {
									margin-left: 10px;
								}
							> p {
								padding-top: 15px;
								text-align: justify;
								font-size: min(1.0rem, 5vw);
								line-height: 1.8;
								color: #333;
								font-weight: 600;
								letter-spacing: 0.1em;
								&.notopspace {
									padding-top: 0px;
								}
								&.points {
									text-indent: -0.5rem;
									padding-left: 0.5rem;
								}
								@media (width < 630px) {
									> br {
										display: none;
									}
								}
							}
						}
					}
					> div.triangle {
						margin-block: 40px;
						justify-self: center;
						width: 25px;
						height: 16px;
						background-color: var(--color-accent);
						clip-path: polygon(100% 0, 0 0, 50% 100%);
					}
				}
				> div.changing {
					background-color: #f2f2f2;
					border-radius: 20px;
					> div {
						max-width: 800px;
						margin-inline: auto;
						display: grid;
						grid-template-columns: 1fr 220px;
						column-gap: 30px;
						padding: 40px 0px;
						@media (width < 630px) {
							grid-template-columns: 1fr;
							padding: 40px 15px 40px 5px;
							row-gap: 30px;
						}
						> div {
							border-left: 5px solid #846c28;
							> h4 {
								margin-left: 20px;
								font-size: min(2.0rem, 7vw);
								line-height: 1.5;
								color: var(--color-accent);
								font-weight: 600;
								padding-bottom: 10px;
								@media (width < 630px) {
									margin-left: 10px;
								}
							}
							> div {
								margin-left: 20px;
								@media (width < 630px) {
									margin-left: 10px;
								}
								> p {
									text-align: justify;
									font-size: min(1.0rem, 5vw);
									line-height: 1.8;
									color: #333;
									font-weight: 600;
									letter-spacing: 0.1em;
									&.notopspace {
										padding-top: 0px;
									}
									@media (width < 630px) {
										> br {
											display: none;
										}
									}
								}
							}
						}
						> figure {
							justify-self: end;
							text-align: center;
							@media (width < 630px) {
								padding: 0px 5px 0px 15px;
								justify-self: center;
							}
							> img {
								max-width: 100%;
							}
						}
					}
				}
			}
		}
	}
}
section.plan {
	padding: 100px 5% 100px 5%;
	background-color: #faf0c8;
	border-radius: 80px 80px 0px 0px;
	> div {
		max-width: 800px;
		margin-inline: auto;
		> h2 {
			text-align: center;
			font-size: min(2.7rem, 9vw);
			line-height: 1.2;
			color: var(--color-accent);
			font-weight: 800;
			letter-spacing: 0.5rem;
			> small {
				font-size: min(2.2rem, 6.5vw);
				color: #333;
			}
		}
		> h3 {
			padding-top: 10px;
			text-align: center;
			font-size: min(1.3rem, 6vw);
			line-height: 1.6;
			color: #333;
			font-weight: 500;
			letter-spacing: 0.1em;
		}
		> div.check {
			display: grid;
			justify-content: center;
			margin-top: 40px;
			padding-top: 40px;
			border-top: 1px solid #808080;
			> div {
				padding-bottom: 20px;
				display: grid;
				grid-template-columns: 35px 1fr;
				column-gap: 30px;
				align-items: center;
				@media (width < 410px) {
					grid-template-columns: 25px 1fr;
					column-gap: 10px;
				}
				> img {
					max-width: 100%;
				}
				> p {
					font-size: min(1.2rem, 5vw);
					line-height: 2.2;
					color: #333;
					font-weight: 600;
					letter-spacing: 0.2rem;
					@media (width < 410px) {
						letter-spacing: 0.1rem;
					}
				}
			}
		}
		> p {
			padding-top: 30px;
			font-size: min(1.0rem, 5vw);
			line-height: 1.8;
			color: #333;
			font-weight: 600;
			letter-spacing: 0.1rem;
			text-align: center;
			@media (width < 610px) {
				text-align: justify;
			}
		}
		> div.links {
			margin-top: 60px;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			@media (width < 610px) {
				grid-template-columns: repeat(1, 1fr);
				row-gap: 20px;
			}
			> div {
				display: grid;
				justify-content: center;
				align-items: center;
				&:nth-of-type(2) {
					> a {
						height: 100%;
						> div {
							height: 100%;
							min-height: 62px;
						}
					}
				}
				> a {
					text-decoration: none;
					&:hover {
						opacity: 0.8;
					}
					> div {
						display: flex;
						align-items: center;
						background: url(./image/arrow_fff.svg)#00ac9a;
						background-size: 16px;
						background-repeat: no-repeat;
						background-position: top 51% right 20px;
						border-radius: 30px;
						padding: 10px 60px 10px 60px;
						@media (width < 610px) {
							background-position: top 51% right 15px;
							padding: 10px 40px 10px 40px;
							min-width: 270px;
						}
						> p {
							font-size: min(1.1rem, 5vw);
							line-height: 1.2;
							color: #fff;
							font-weight: 800;
							letter-spacing: 2px;
						}
					}
				}
			}
		}
	}
}