section.panel {
	> div {
		max-width: 1920px;
		margin-inline: auto;
		> picture {
			> img {
				max-width: 100%;
			}
		}
	}
}
section.plantop {
	padding: 50px 5% 50px 5%;
	background: url(./image/bg.webp) 50% / cover;
	> div {
		max-width: 800px;
		margin-inline: auto;
		> figure {
			> img {
				width: 100%;
				max-width: 100%;
			}
		}
		> p {
			padding-top: 30px;
			font-size: 1.6rem;
			line-height: 1.8;
			color: #fff;
			text-align: justify;
			font-family: var(--font-serif);
		}
	}
}
section.charm {
	padding: 50px 5% 0px 5%;
	background: url(./image/charm_bg01.webp) no-repeat -55px top, url(./image/charm_bg02.webp) no-repeat calc(100% + 25px) top, #fbedf4;
	background-size: auto 300px, auto 300px;
	background-repeat: no-repeat;
	@media (width < 780px) {
		background: url(./image/charm_bg01.webp) no-repeat -20% top, url(./image/charm_bg02.webp) no-repeat 110% top, #fbedf4;
		background-size: auto 40vw, auto 40vw;
	}
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> figure {
			text-align: center;
			@media (width < 930px) {
				padding-top: 80px;
			}
			> img {
				max-width: 100%;
			}
		}
		> div.point {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			column-gap: 10px;
			@media (width < 700px) {
				grid-template-columns: repeat(1, 1fr);
			}
			> figure {
				justify-self: center;
				> img {
					max-width: 100%;
				}
			}
		}
	}
}
section.bottomtriangle {
	margin-top: -1px;
	background-color: #fbedf4;
	height: 60px;
	width: 100%;
	clip-path: polygon(100% 0, 0 0, 50% 100%);
	margin-bottom: 20px;
}
section.brackets {
	padding: 60px 5% 30px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		display: grid;
		> div.line {
			grid-area: 1/1/2/2;
			justify-content: center;
			background-color: #333;
			height: 3px;
			width: 100%;
			align-self: center;
		}
		> div.title {
			grid-area: 1/1/2/2;
			justify-self: center;
			display: flex;
			align-items: center;
			gap: 20px;
			background-color: #fff;
			> div.bracket {
				width: 20px;
				height: 50px;
				position: relative;
			}
			> div.bracket.left::before, div.bracket.right::before {
				content: "";
				position: absolute;
				width: 50%;
				height: calc(100% - 6px);
				border: 3px solid #333;
				border-radius: 0px;
			}
			> div.bracket.left::before {
				border-right: none;
				left: 0;
			}
			> div.bracket.right::before {
				border-left: none;
				right: 0;
			}
			> h2 {
				font-size: min(3.0rem, 6vw);
				line-height: 1.6;
				color: #333;
				font-weight: 600;
				text-align: center;
				font-family: var(--font-serif);
			}
		}
	}
}
section.plan01 {
	padding: 50px 5% 50px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> figure {
			text-align: center;
			margin-bottom: -1px;
			> img {
				max-width: 100%;
			}
		}
		> div {
			padding: 0px 5% 0px 5%;
			background-color: #a72126;
			> div.top {
				position: relative;
				> img {
					max-width: 100%;
					@media (width < 780px) {
						display: none;
					}
					&:nth-of-type(1) {
						position: absolute;
						bottom: 5%;
						left: 10%;
					}
					&:nth-of-type(2) {
						position: absolute;
						bottom: 5%;
						right: 2%;
					}
				}
				> h1 {
					padding: 40px 20px 20px 20px;
					text-align: center;
					font-size: 3.5rem;
					line-height: 1.3;
					color: #fff;
					font-weight: 600;
					font-family: var(--font-serif);
				}
			}
			> p {
				padding-block: 10px;
				border-bottom: 2px solid #fff;
				border-top: 2px solid #fff;
				text-align: center;
				font-size: 2.0rem;
				line-height: 1.5;
				color: #fff;
				font-family: var(--font-serif);
			}
			> div.block_sp {
				display: none;
				@media (width < 800px) {
					padding-top: 20px;
					display: grid;
					grid-template-columns: 1.5fr 2fr;
					justify-items: center;
					align-items: end;
				}
				> figure {
					> img {
						max-width: 100%;
					}
				}
			}
			> div.price {
				margin-block: 30px 20px;
				display: grid;
				grid-template-columns: 220px auto;
				@media (width < 720px) {
					grid-template-columns: 1fr;
				}
				> h3 {
					background-color: #cbcfcf;
					align-content: center;
					text-align: center;
					font-size: 2.2rem;
					line-height: 2.0;
					color: #333;
				}
				> div {
					background-color: #fff;
					justify-items: center;
					@media (width < 990px) {
						justify-items: start;
					}
					> article {
						margin-top: 10px;
						padding-block: 10px;
						padding-inline: 30px;
						display: grid;
						grid-template-columns: 1fr auto;
						@media (width < 1120px) {
							width: 98%;
							grid-template-columns: 1fr;
							row-gap: 10px;
							margin-top: 20px;
						}
						&:last-of-type {
							margin-bottom: 10px;
							@media (width < 1120px) {
								margin-bottom: 20px;
							}
						}
						> div {
							display: flex;
							column-gap: 10px;
							flex-wrap: wrap;
							row-gap: 10px;
							&:nth-of-type(1) {
								@media (width < 1120px) {
									display: block;
								}
								> p {
									padding-inline: 20px;
									background-color: #231815;
									text-align: center;
									font-size: 2.0rem;
									line-height: 1.6;
									color: #fff;
									font-weight: 600;
									&:nth-of-type(2) {
										background-color: unset;
									}
									> small {
										font-size: 1.2rem;
										color: #333;
									}
									&:nth-of-type(2) {
										padding-inline: 10px;
									}
									@media (width < 1120px) {
										margin-inline: 5%;
									}
								}
							}
							&:nth-of-type(2) {
								@media (width < 1120px) {
									justify-self: center;
									flex-flow: column;
								}
								> div.block {
									display: flex;
									> p {
										&:nth-of-type(1) {
											background-color: unset;
											padding-inline: 20px 0px;
											text-align: center;
											font-size: 2.0rem;
											line-height: 1.6;
											color: #333;
											font-weight: 600;
											> small {
												font-size: 1.2rem;
												color: #333;
											}
										}
										&:nth-of-type(2) {
											padding-inline: 0px;
											background-color: unset;
											text-align: center;
											font-size: min(2.0rem, 6vw);
											line-height: 1.6;
											color: #333;
											font-weight: 600;
										}
										&.price {
											min-width: 5em;
											text-align: right;
										}
									}
								}
								> p {
									border-radius: 5px;
									padding-inline: 20px;
									background-color: #dcc8a6;
									text-align: center;
									font-size: min(2.0rem, 6vw);
									line-height: 1.6;
									color: #333;
									font-weight: 600;
								}
							}
							> figure {
								text-align: center;
								> img {
									width: 25px;
								}
							}
						}
					}
				}
			}
			> div.recommendation {
				padding-bottom: 30px;
				display: flex;
				justify-content: center;
				align-items: center;
				column-gap: 20px;
				@media (width < 780px) {
				   flex-wrap: wrap;
				   flex-flow: column;;
				   row-gap: 20px;
				}
				> picture {
					> img {
						max-width: 100%;
					}
				}
				> p {
					background-color: #f2dede;
					border-radius: 5px;
					padding: 10px 20px;
					text-align: center;
					font-size: 2.0rem;
					line-height: 1.6;
					color: #a72126;
					font-weight: 600;
					font-family: var(--font-serif);
					@media (width < 850px) {
						min-width: 250px;
						padding-inline: 5%;
					}
				}
			}
		}
	}
}
section.plan02 {
	padding: 50px 5% 50px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> figure {
			text-align: center;
			margin-bottom: -1px;
			> img {
				max-width: 100%;
			}
		}
		> div {
			padding: 0px 5% 0px 5%;
			background-color: #a72126;
			> div.top {
				position: relative;
				> img {
					max-width: 100%;
					@media (width < 800px) {
						display: none;
					}
					&:nth-of-type(1) {
						position: absolute;
						bottom: 5%;
						left: 10%;
					}
					&:nth-of-type(2) {
						position: absolute;
						bottom: 5%;
						right: 2%;
					}
				}
				> h1 {
					padding: 40px 20px 20px 20px;
					text-align: center;
					font-size: min(3.5rem, 8.5vw);
					line-height: 1.3;
					color: #fff;
					font-weight: 600;
					font-family: var(--font-serif);
				}
			}
			> p {
				padding-block: 10px;
				border-bottom: 2px solid #fff;
				border-top: 2px solid #fff;
				text-align: center;
				font-size: 2.0rem;
				line-height: 1.5;
				color: #fff;
				font-family: var(--font-serif);
				&:nth-of-type(2) {
					padding-block: 20px 30px;
					border: 0;
					font-size: 1.7rem;
					font-family: var(--font-sans);
					@media (width < 1020px) {
						 text-align: justify;
						> br {
							display: none;
						}
					}
				}
			}
			> div.block_sp {
				display: none;
				@media (width < 800px) {
					padding-top: 20px;
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					justify-items: center;
					align-items: end;
				}
				> figure {
					> img {
						max-width: 100%;
					}
				}
			}
			> div.recommendation {
				padding-bottom: 30px;
				display: flex;
				justify-content: center;
				align-items: center;
				column-gap: 20px;
				@media (width < 850px) {
				   flex-wrap: wrap;
				   flex-flow: column;;
				   row-gap: 20px;
				}
				> picture {
					text-align: justify;
					> img {
						max-width: 100%;
						@media (width < 850px) {
							width: 220px;
						}
					}
				}
				> div {
					height: 90px;
					background-color: #f2dede;
					border-radius: 5px;
					display: grid;
					align-content: center;
					> p {
						padding: 10px 20px;
						text-align: center;
						font-size: 1.9rem;
						line-height: 1.2;
						color: #a72126;
						font-weight: 600;
						font-family: var(--font-serif);
						> small {
							line-height: 1.0;
							font-size: 1.1rem;
							line-height: 1.0;
						}
						@media (width < 850px) {
							width: 250px;
						}
					}
				}
			}
		}
	}
}
section.link {
	padding: 50px 5% 50px 5%;
	> div {
		max-width: 800px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 40px;
		@media (width < 690px) {
			grid-template-columns: 1fr;
			row-gap: 40px;
		}
		> a {
			text-decoration: none;
			&:hover {
				opacity: 0.8;
			}
			> div {
				display: grid;
				grid-template-rows: 50px auto;
				height: 100%;
				border-radius: 10px;
				border: 2px solid #d6c560;
				background: linear-gradient(to top, #f3eecf, #fffefd);
				> div {
					display: flex;
					justify-content: center;
					align-content: center;
					margin-inline: 5%;
					padding-block: 20px 10px;
					border-bottom: 2px solid #d6c560;
					> h3 {
						text-align: center;
						font-size: 2.0rem;
						line-height: 1.0;
						color: #333;
					}
					> img {
						padding-right: 5px;
						width: 20px;
					}
				}
				> h1 {
					padding-block: 10px;
					align-content: center;
					text-align: center;
					font-size: 4.0rem;
					line-height: 1.0;
					color: #333;
					font-family: var(--font-serif);
				}
			}
			&:nth-of-type(2) {
				> div {
					> div {
						> img {
							width: 30px;
						}
					}
					> h1 {
						background-image: url(./image/link_mark.svg);
						background-size: 28px;
						background-repeat: no-repeat;
						background-position: 95% 50%;
						font-size: 3.0rem;
						line-height: 1.2;
					}
				}
			}
		}
	}
}
section.protop {
	padding-top: 40px;
	background-color: #f3eecf;
	> div {
		> h2 {
			padding-block: 10px;
			background-color: #d6c560;
			text-align: center;
			font-size: 2.6rem;
			line-height: 1.0;
			letter-spacing: 3px;
			color: #333;
			font-family: var(--font-serif);
		}
	}
}
section.pro {
	padding: 30px 5% 60px 5%;
	background-color: #f3eecf;
	> div {
		max-width: 700px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: 200px 1fr;
		column-gap: 30px;
		@media (width < 720px) {
			grid-template-columns: 1fr;
			row-gap: 40px;
		}
		> figure {
			text-align: center;
			> img {
				border: 1px solid #231815;
				max-width: 100%;
				@media (width < 720px) {
					max-width: 250px;
					margin-inline-: auto;
				}
			}
		}
		> div {
			> div.name {
				display: flex;
				align-items: center;
				column-gap: 5px;
				> h3 {
					padding: 5px 10px;
					background-color: #231815;
					text-align: center;
					font-size: 2.2rem;
					line-height: 1.0;
					color: #fff;
					font-family: var(--font-serif);
					> small {
						font-size: 1.6rem;
					}
				}
				> p {
					font-size: 1.8rem;
					line-height: 1.0;
					color: #333;
					font-family: var(--font-serif);
				}
			}
			> div.content {
				padding-top: 10px;
				> article {
					border-bottom: 1px solid #231815;
					padding-block: 5px;
					display: grid;
					grid-template-columns: 70px 1fr;
					column-gap: 10px;
					> p {
						font-size: 1.4rem;
						line-height: 1.6;
						color: #333;
						text-align: justify;
					}
					&:last-of-type {
						border-bottom: none;
					}
				}
			}
		}
	}
}