section.panel {
	margin-top: 10px;
	> div {
		display: grid;
		padding-inline: 30px;
		@media (width < 650px) {
			padding-inline: unset;
		}
		> figure {
			grid-area: 1/1/2/2;
			> img {
				border-radius: 40px;
				max-width: 100%;
				width: 100%;
				@media (width < 650px) {
					border-radius: unset;
				}
			}
		}
		> div {
			padding-inline: 20px;
			grid-area: 1/1/2/2;
			align-self: center;
			justify-self: start;
			@media (width < 1120px) {
				justify-self: center;
				align-self: end;
				padding-bottom: 20px;
			}
			> h2 {
				font-size: min(3.0rem, 6vw);
				line-height: 1.3;
				color: #333;
				font-weight: 900;
				letter-spacing: 0.05em;
				text-align: start;
				font-family: var(--font-serif);
				text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff;
				@media (width < 1120px) {
					text-align: center;
				}
			}
			> p {
				font-size: min(1.3rem, 5.0vw);
				line-height: 1.3;
				color: var(--color-accent);
				font-weight: 800;
				letter-spacing: 0.1em;
				margin-top: 10px;
				text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff;
				> small {
					color: #333;
					font-size: min(1.0rem, 5vw);
				}
				@media (width < 1120px) {
					text-align: center;
				}
				&:nth-of-type(2) {
					padding-top: 10px;
					@media (width < 1120px) {
						display: none;
					}
				}
			}
		}
	}
}
section.subtitle {
	padding: 80px 5% 0px 5%;
	&.gray {
		background-color: #eff1f1;
	}
	&.pink {
		background-color: #f6e8ea;
	}
	> div {
		max-width: 1100px;
		margin-inline: auto;
		> div {
			display: flex;
			align-items: center;
			gap: 15px;
			> div {
				height: 2px;
				width: 12px;
				background-color: #28b4c8;
			}
			> h2 {
				font-size: min(2.2rem, 7vw);
				line-height: 1.3;
				color: #333;
				font-weight: 600;
				font-family: var(--font-serif);
			}
		}
		> p {
			font-size: min(1.0rem, 5.0vw);
			line-height: 1.6;
			color: #28b4c8;
			font-weight: 800;
			padding-top: 10px;
			padding-left: 25px;
		}
	}
}
section.toptext {
	padding: 30px 5% 40px 5%;
	> div {
		max-width: 1100px;
		margin-inline: auto;
		> p {
			font-size: min(1.3rem, 5.5vw);
			line-height: 2.0;
			color: #333;
			font-weight: 600;
			text-align: justify;
		}
	}
}
section.top {
	padding: 0px 5% 0px 5%;
	> div {
		max-width: 1100px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 40px;
		@media (width < 950px) {
			grid-template-columns: repeat(2, 1fr);
			row-gap: 40px;
		}
		@media (width < 600px) {
			grid-template-columns: repeat(1, 1fr);
		}
		> article {
			> figure {
				text-align: center;
				> img {
					border-radius: 10px;
					width: 100%;
					max-width: 100%;
				}
			}
			> div {
				> h3 {
					margin-block: 15px 10px;
					font-size: min(1.2rem, 5.5vw);
					line-height: 1.2;
					font-weight: 800;
					color: #28b4c8;
				}
				> p {
					font-size: min(1.0rem, 5.0vw);
					line-height: 1.8;
					font-weight: 600;
					color: #333;
					text-align: justify;
				}
			}
		}
	}
}
section.bridal01 {
	padding: 50px 5% 100px 5%;
	> div {
		display: grid;
		> div {
			margin-top: 30px;
			justify-self: center;
			> a {
				text-decoration: none;
				&:hover {
					opacity: 0.8;
				}
				> p {
					border-radius: 10px;
					padding: 15px 60px 15px 30px;
					background: url(./image/arrow_fff.svg), #28b4c8;
					background-position: calc(100% - 30px) 50%;
					background-size: 15px;
					background-repeat: no-repeat;
					font-size: min(1.1rem, 7vw);
					line-height: 1.0;
					color: #fff;
					font-weight: 600;
					@media (width < 400px) {
						padding: 15px 40px 15px 20px;
						background-position: calc(100% - 20px) 50%;
					}
				}
			}
		}
	}
}
section.benefits {
	padding: 30px 5% 40px 5%;
	background-color: #eff1f1;
	> div {
		max-width: 1100px;
		margin-inline: auto;
		> p {
			font-size: min(1.3rem, 5.5vw);
			line-height: 2.0;
			color: #333;
			font-weight: 600;
			text-align: justify;
		}
		> div {
			margin-top: 60px;
			max-width: 1000px;
			margin-inline: auto;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			&:nth-of-type(odd) {
				> article {
					padding-left: 30px;
					@media (width < 750px) {
						padding-left: unset;
					}
				}
				> figure {
					@media (width < 750px) {
						order: 2;
					}
				}
			}
			&:nth-of-type(even) {
				> article {
					padding-right: 30px;
					@media (width < 750px) {
						padding-right: unset;
					}
				}
			}
			@media (width < 750px) {
				grid-template-columns: repeat(1, 1fr);
				row-gap: 20px;
			}
			> figure {
				> img {
					border-radius: 10px;
					max-width: 100%;
				}
			}
			> article {
				> figure {
					> img {
						height: 60px;
					}
				}
				> h3 {
					font-size: min(1.2rem, 5.5vw);
					line-height: 2.0;
					color: #28b4c8;
					font-weight: 800;
					padding-block: 10px;
				}
				> p {
					font-size: min(1.0rem, 5vw);
					line-height: 1.8;
					color: #333;
					font-weight: 600;
					text-align: justify;
				}
			}
		}
	}
}
section.special {
	> div {
		display: grid;
		> div.bg {
			grid-area: 1/1/2/2;
			align-self: end;
			background: url(./image/bg.webp) 50% / cover;
			width: 100%;
			height: 85%;
			border-radius: 50px 50px 0 0;
			@media (width < 1040px) {
				height: 90%;
			}
		}
		> div.content {
			padding: 30px 5% 100px 5%;
			grid-area: 1/1/2/2;
			> div {
				max-width: 1100px;
				margin-inline: auto;
				> p {
					font-size: min(1.3rem, 5.5vw);
					line-height: 2.0;
					color: #333;
					font-weight: 600;
					text-align: justify;
					padding-bottom: 50px;
				}
				> div {
					max-width: 1000px;
					margin-inline: auto;
					> div.block01 {
						margin-bottom: 50px;
						filter: drop-shadow(0 0 10px rgba(40,180,200, 0.3));
						display: grid;
						&:nth-of-type(1) {
							grid-template-columns: 1.1fr 1fr;
							@media (width < 1000px) {
							   grid-template-columns: 1fr;
							}
							> figure {
								> img {
									border-radius: 20px 0px 0px 20px;
									@media (width < 1000px) {
										border-radius: 20px 20px 0px 0px;
									}
								}
							}
							> div {
								border-radius: 0px 20px 20px 0px;
								@media (width < 1000px) {
									border-radius: 0px 0px 20px 20px;
								}
							}
						}
						&:nth-of-type(2) {
							grid-template-columns: 1fr 1.1fr;
							@media (width < 1000px) {
							   grid-template-columns: 1fr;
							}
							> figure {
								> img {
									border-radius: 0px 20px 20px 0px;
									@media (width < 1000px) {
										border-radius: 20px 20px 0px 0px;
									}
								}
							}
							> div {
								border-radius: 20px 0px 0px 20px;
								@media (width < 1000px) {
									border-radius: 0px 0px 20px 20px;
									order: 2;
								}
							}
						}
						> figure {
							> img {
								max-width: 100%;
							}
						}
						> div {
							background-color: #fff;
							padding: 40px 30px;
							@media (width < 400px) {
								padding: 20px;
							}
							> h4 {
								display: flex;
								align-items: center;
								column-gap: 10px;
								> div {
									font-size: min(1.2rem, 5.5vw);
									line-height: 1.0;
									color: #28b4c8;
									font-weight: 800;
									border-bottom: 2px solid currentColor;
									padding-bottom: 5px;
								}
								> span {
									font-size: min(0.9rem, 4.5vw);
									line-height: 1.0;
									color: #28b4c8;
									border: solid 1px currentColor;
									padding-block: 2px 5px;
									padding-inline: 5px;
								}
							}
							> h3 {
								margin-top: 20px;
								font-size: min(6.5rem, 18vw);
								line-height: 1.0;
								color: #28b4c8;
								font-weight: 900;
								letter-spacing: -2px;
								> small {
									font-size: min(4.0rem, 10vw);
								}
							}
							> p {
								font-size: min(1.0rem, 4.5vw);
								line-height: 1.8;
								color: #333;
								font-weight: 600;
								&:last-of-type {
									text-align: justify;
								}
								&.paddingtop {
									padding-top: 20px;
								}
							}
							> h5 {
								padding: 5px 10px;
								background-color: #28b4c8;
								font-size: min(1.0rem, 5vw);
								line-height: 1.0;
								color: #fff;
								font-weight: 600;
								display: inline-block;
								margin-block: 20px 5px;
							}
						}
					}
					> div.block02 {
						display: grid;
						grid-template-columns: 1fr 1fr;
						gap: 40px;
						@media (width < 850px) {
							grid-template-columns: 1fr;
						}
						> article {
							filter: drop-shadow(0 0 10px rgba(40,180,200, 0.3));
							background-color: #fff;
							border-radius: 20px;
							overflow: hidden;
							> figure {
								> img {
									max-width: 100%;
								}
							}
							> div {
								background-color: #fff;
								padding: 40px 30px;
								@media (width < 400px) {
									padding: 20px;
								}
								> h4 {
									font-size: min(1.2rem, 5.5vw);
									line-height: 1.0;
									color: #28b4c8;
									font-weight: 800;
									padding-bottom: 3px;
									border-bottom: 2px solid #28b4c8;
									display: inline;
								}
								> h3 {
									margin-top: 10px;
									font-size: min(6.5rem, 18vw);
									line-height: 1.0;
									color: #28b4c8;
									font-weight: 900;
									letter-spacing: -2px;
									> small {
										font-size: min(4.0rem, 10vw);
									}
								}
								> p {
									font-size: min(1.0rem, 4.5vw);
									line-height: 1.8;
									color: #333;
									font-weight: 500;
									&.paddingtop {
										padding-top: 20px;
									}
								}
							}
						}
					}
					> p {
						padding-block: 40px;
						font-size: min(1.0rem, 4.5vw);
						line-height: 1.8;
						color: #333;
						font-weight: 500;
						text-indent: -1rem;
						padding-left: 1rem;
					}
					> div.speciallink {
						display: grid;
						grid-template-columns: 1fr 1fr;
						column-gap: 30px;
						@media (width < 700px) {
							grid-template-columns: 1fr;
							row-gap: 30px;
						}
						> a {
							text-decoration: none;
							&:hover {
								opacity: 0.8;
							}
							> img {
								max-width: 100%;
							}
						}
					}
				}
			}
		}
	}
}
section.request {
	padding: 30px 5% 50px 5%;
	background-color: #eff1f1;
	> div {
		max-width: 1100px;
		margin-inline: auto;
		> p {
			font-size: min(1.2rem, 5.5vw);
			line-height: 2.0;
			color: #333;
			font-weight: 600;
			text-align: justify;
		}
		> div {
			margin-top: 50px;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			@media (width < 1020px) {
				grid-template-columns: 1fr;
			}
			gap: 15px;
			> article {
				background-color: #fff;
				border-radius: 10px;
				border: 1px solid #28b4c8;
				padding: 10px;
				display: flex;
				align-items: center;
				gap: 10px;
				> img {
					width: 25px;
				}
				> p {
					font-size: min(1.1rem, 5vw);
					line-height: 1.4;
					color: #333;
					font-weight: 800;
				}
			}
		}
	}
}
section.bridal02 {
	padding: 50px 5% 50px 5%;
	background-color: #eef9fb;
	> div {
		max-width: 1100px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: 1fr 1.2fr;
		column-gap: 30px;
		@media (width < 920px) {
			grid-template-columns: 1fr;
			justify-items: center;
			row-gap: 10px;
			> p {
				text-align: center;
			}
		}
		> p {
			font-size: min(1.4rem, 5.5vw);
			line-height: 2.0;
			color: #333;
			font-weight: 600;
			letter-spacing: 1px;
		}
		> div {
			> a {
				text-decoration: none;
				&:hover {
					opacity: 0.8;
				}
				> p {
					border-radius: 40px;
					padding: 25px 50px 25px 40px;
					background: url(./image/arrow_fff.svg), linear-gradient(to right, #28d2c8,#00a0e9);
					background-position: calc(100% - 25px) 50%,0%;
					background-size: 25px, 100%;
					background-repeat: no-repeat;
					font-size: min(1.5rem, 6vw);
					line-height: 1.2;
					color: #fff;
					font-weight: 700;
					text-align: center;
					@media (width < 920px) {
						padding: 25px 60px 25px 40px;
						background-position: calc(100% - 30px) 50%,0%;
						background-size: 20px, 100%;
					}
					@media (width < 470px) {
						padding: 10px 60px 10px 30px;
						
					}
				}
			}
		}
	}
}
section.firstTime {
	margin-block: 50px;
	background: linear-gradient(135deg, #28d2c8 45%, #00a0e9 95%);
	> div {
		display: grid;
		grid-template-columns: 1fr 1.5fr;
		column-gap: 10px;
		max-width: 1100px;
		margin-inline: auto;
		@media (width < 1200px) {
			max-width: unset;
			margin-inline: unset;
		}
		@media (width < 890px) {
			grid-template-columns: 1fr;
			row-gap: 20px;
		}
		> figure {
			padding-top: 20px;
			align-self: end;
			justify-self: end;
			display: inline-block;
			@media (width < 890px) {
				text-align: center;
				order: 2;
				margin-left: unset;
			}
			> img {
				max-width: min(100%,750px);
				margin-right: auto;
			}
		}
		> div {
			display: grid;
			margin-left: 5%;
			align-content: center;
			@media (width < 890px) {
				padding-top: 30px;
				margin-right: unset;
				margin-inline: 5%;
			}
			> div.subtitle {
				> div {
					display: flex;
					align-items: center;
					gap: 15px;
					> div {
						height: 2px;
						width: 12px;
						background-color: #fff;
					}
					> h2 {
						font-size: min(2.2rem, 7vw);
						line-height: 1.0;
						color: #fff;
						font-weight: 600;
						font-family: var(--font-serif);
					}
				}
				> p {
					font-size: min(1.0rem, 5.0vw);
					line-height: 1.6;
					color: #fff;
					font-weight: 800;
					padding-top: 10px;
					padding-left: 25px;
				}
			}
			> p {
				margin-block: 30px;
				font-size: min(1.2rem, 5.5vw);
				line-height: 1.8;
				color: #fff;
				font-weight: 800;
				text-align: justify;
				@media (width < 1030px) {
					margin-block: 10px;
				}
				@media (width < 890px) {
					margin-block: 30px;
				}
			}
			> div.bridal {
				justify-self: start;
				> a {
					text-decoration: none;
					&:hover {
						opacity: 0.8;
					}
					> p {
						border-radius: 10px;
						padding: 15px 80px 15px 30px;
						background: url(./image/arrow_fff.svg), rgba(255,255,255,0.3);
						background-position: calc(100% - 40px) 50%;
						background-size: 15px;
						background-repeat: no-repeat;
						font-size: min(1.1rem, 7vw);
						line-height: 1.0;
						color: #fff;
						font-weight: 600;
						@media (width < 890px) {
							padding: 15px 40px 15px 20px;
							background-position: calc(100% - 20px) 50%;
						}
					}
				}
			}
		}
	}
}
section.funeral {
	padding: 80px 5% 0px 5%;
	> div {
		display: grid;
		background: url(./image/funeral.webp), linear-gradient(135deg, #ff8264 45%, #dc2850 95%);
		background-position: 98% 100%, 0%;
		background-size: auto 100%,auto;
		background-repeat: no-repeat;
		max-width: 1100px;
		margin-inline: auto;
		padding: 30px 0 30px 30px;
		@media (width < 980px) {
			padding: 30px 30px 350px 30px;
			background-size: auto 300px,auto;
			background-position: 50% 100%, 0%;
		}
		@media (width < 530px) {
			padding: 20px 20px 60vw 20px;
			background-size: 90% auto,auto;
		}
		> div.subtitle {
			> h2 {
				font-size: min(2.2rem, 7vw);
				line-height: 1.3;
				color: #fff;
				font-weight: 600;
				font-family: var(--font-serif);
				> small {
					font-size: min(1.6rem, 5.5vw);
				}
			}
		}
		> p {
			margin-block: 20px;
			font-size: min(1.2rem, 5.5vw);
			line-height: 1.8;
			color: #fff;
			font-weight: 800;
			text-align: justify;
			@media (width < 980px) {
				margin-block: 20px 40px;
			}
		}
		> div.link {
			justify-self: start;
			> a {
				text-decoration: none;
				&:hover {
					opacity: 0.8;
				}
				> p {
					border-radius: 10px;
					padding: 15px 80px 15px 30px;
					background: url(./image/arrow_fff.svg), rgba(255,255,255,0.3);
					background-position: calc(100% - 40px) 50%;
					background-size: 15px;
					background-repeat: no-repeat;
					font-size: min(1.1rem, 7vw);
					line-height: 1.2;
					color: #fff;
					font-weight: 600;
					@media (width < 890px) {
						padding: 15px 40px 15px 15px;
						background-position: calc(100% - 20px) 50%;
						text-align: center;
					}
				}
			}
		}
	}
}
section.celebration {
	padding: 30px 5% 80px 5%;
	> div {
		display: grid;
		background: url(./image/celebration.webp), linear-gradient(135deg, #ff9b83 15%, #f0c81e 70%);
		background-position: 100% 100%, 0%;
		background-size: auto 100%,auto;
		background-repeat: no-repeat;
		max-width: 1100px;
		margin-inline: auto;
		padding: 30px 0 30px 30px;
		@media (width < 980px) {
			padding: 30px 30px 350px 30px;
			background-size: auto 300px,auto;
			background-position: 50% 100%, 0%;
		}
		@media (width < 530px) {
			padding: 20px 20px 60vw 20px;
			background-size: 90% auto,auto;
		}
		> div.subtitle {
			> h2 {
				font-size: min(2.2rem, 7vw);
				line-height: 1.3;
				color: #fff;
				font-weight: 600;
				font-family: var(--font-serif);
				> small {
					font-size: min(1.6rem, 5.5vw);
				}
			}
		}
		> p {
			margin-block: 20px;
			font-size: min(1.2rem, 5.5vw);
			line-height: 1.8;
			color: #fff;
			font-weight: 800;
			text-align: justify;
			@media (width < 980px) {
				margin-block: 20px 40px;
			}
		}
		> div.link {
			justify-self: start;
			> a {
				text-decoration: none;
				&:hover {
					opacity: 0.8;
				}
				> p {
					border-radius: 10px;
					padding: 15px 80px 15px 30px;
					background: url(./image/arrow_fff.svg), rgba(255,255,255,0.3);
					background-position: calc(100% - 40px) 50%;
					background-size: 15px;
					background-repeat: no-repeat;
					font-size: min(1.1rem, 7vw);
					line-height: 1.2;
					color: #fff;
					font-weight: 600;
					@media (width < 890px) {
						padding: 15px 40px 15px 20px;
						background-position: calc(100% - 20px) 50%;
						text-align: center;
					}
				}
			}
		}
	}
}