@charset "UTF-8";
body#beginners .c-relatedpages {
	.item-faq {
		display: none;
	}
}
/* -----------------------------------------------------------
	.p-message
----------------------------------------------------------- */
.p-message {
	position: relative;
	padding-bottom: 240px;
	@media (max-width: 767px) {
		padding-bottom: 120px;
	}
	&::before {
		content: '';
		width: 100%;
		height: 240px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.60) 100%);
		position: absolute;
		bottom: 0;
		left: 0;
	}
	&::after {
		content: '';
		background: url(../images/common/sakura-hana-r.avif) right 0 no-repeat;
		background-size: 100% auto;
		width: 14vw;
		max-width: 202px;
		aspect-ratio: 1/1.884;
		position: absolute;
		bottom: 104px;
		right: 0;
		mix-blend-mode: multiply;
	}
	@media (max-width: 767px) {
		&::after {
			width: 25vw;
			bottom: 64px;
		}
	}
	.l-wrap-message {
		position: relative;
		z-index: 1;
		@media (min-width: 768px) {
			margin-top: 40px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		@media (max-width: 767px) {
			margin-top: 64px;
		}
		.p-message-text {
			@media (min-width: 768px) {
				width: 50%;
				padding-left: 80px;
			}
			@media (min-width: 768px) and (max-width: 1024px) {
				padding-left: 24px;
			}
			@media (max-width: 767px) {
				margin-top: 64px;
			}
			h2 {
				font-family: var(--font-mincho);
				font-weight: 600;
				font-size: calc(32 * var(--rem));
				letter-spacing: 0.16em;
				margin-bottom: 40px;
				@media (min-width: 768px) and (max-width: 1024px) {
					font-size: calc(24 * var(--rem));
				}
				@media (max-width: 767px) {
					font-size: calc(22 * var(--rem));
					margin-bottom: 24px;
				}
			}
			.p-message-text-inner {
				display: flex;
				flex-direction: column;
				gap: 1em;
				.text {
					font-size: calc(20 * var(--rem));
					letter-spacing: 0.16em;
					line-height: 2;
					font-weight: 400;
					@media (min-width: 768px) and (max-width: 1024px) {
						font-size: calc(16 * var(--rem));
						br {
							display: none;
						}
					}
					@media (max-width: 767px) {
						font-size: calc(15 * var(--rem));
					}
				}
			}
		}
		.p-message-imgs {
			text-align: center;
			@media (min-width: 768px) {
				width: 50%;
			}
			img {
				max-width: 480px;
				width: 100%;
				margin-inline: auto;
				border-radius: 9999px 9999px 0 0;
				@media (min-width: 768px) and (max-width: 1024px) {
					width: 90%;
				}
				@media (max-width: 767px) {
					width: 89%;
				}
			}
		}
	}
}

/* -----------------------------------------------------------
	.p-benefit
----------------------------------------------------------- */
.p-benefit {
	background: rgba(255, 255, 255, 0.60);
	padding-bottom: 240px;
	@media (max-width: 767px) {
		padding-bottom: 120px;
	}
	.wrap-benefit {
		h2 {
			text-align: center;
			color: var(--color-title);
			font-family: var(--font-mincho);
			font-size: calc(32 * var(--rem));
			font-weight: 600;
			letter-spacing: 0.16em;
			margin-bottom: 40px;
			@media (min-width: 768px) and (max-width: 1024px) {
				font-size: calc(28 * var(--rem));
			}
			@media (max-width: 767px) {
				font-size: calc(20 * var(--rem));
			}
		}
		.list-benefit {
			@media (min-width: 1025px) {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-template-rows: 1fr;
				grid-column-gap: 80px;
			}
			@media (max-width: 1024px) {
				display: flex;
				flex-direction: column;
			}
			@media (min-width: 768px) and (max-width: 1024px) {
				gap:64px;
			}
			@media (max-width: 767px) {
				gap:40px;
			}
			.item-benefit {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: flex-end;
				@media (max-width: 1024px) {
					align-items: center;
					&:nth-child(even) {
						.title-benefit {
							order:2;
							text-align: right;
						}
						figure {
							order:1;
						}
						.text {
							order:3;
						}
					}
				}
				.title-benefit {
					width: 50%;
					@media (min-width: 768px) and (max-width: 1024px) {
						width: 60%;
					}
					.en {
						color: var(--color-pink);
						font-family: var(--font-sans);
						letter-spacing: 0.04em;
						font-weight: 400;
						display: block;
						line-height: 1;
						margin-bottom: 32px;
						@media (max-width: 767px) {
							font-size: calc(13 * var(--rem));
							margin-bottom: 16px;
						}
					}
					h3 {
						font-family: var(--font-mincho);
						color: var(--color-title);
						letter-spacing: 0.08em;
						line-height: 1.5;
						font-size: calc(24 * var(--rem));
						font-weight: 600;
						@media (min-width: 768px) and (max-width: 1024px) {
							br {
								display: none;
							}
						}
						@media (max-width: 767px) {
							font-size: calc(18 * var(--rem));
						}
					}
				}
				figure {
					width: 50%;
					@media (min-width: 768px) and (max-width: 1024px) {
						width: 40%;
					}
					img {
						border-radius: 9999px;
					}
				}
				.text {
					width: 100%;
					margin-top: 40px;
					letter-spacing: 0.08em;
					@media (min-width: 768px) and (max-width: 1024px) {
						margin-top: 24px;
					}
					@media (max-width: 767px) {
						margin-top: 16px;
					}
				}
			}
		}
	}
}

/* -----------------------------------------------------------
	.p-recomendmenu
----------------------------------------------------------- */
.p-recomendmenu {
	background: rgba(255, 255, 255, 0.60);
	h2 {
		text-align: center;
		color: var(--color-title);
		font-family: var(--font-mincho);
		font-size: calc(32 * var(--rem));
		font-weight: 600;
		letter-spacing: 0.16em;
		margin-bottom: 40px;
		@media (min-width: 768px) and (max-width: 1024px) {
			font-size: calc(28 * var(--rem));
		}
		@media (max-width: 767px) {
			font-size: calc(20 * var(--rem));
		}
	}
	.item-menu {
		width: 100%;
		height: 800px;
		position: relative;
		overflow: hidden;
		padding: 40px;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		color: #fff;
		@media (max-width: 767px) {
			height: 640px;
			padding: 40px 24px;
			gap:24px;
		}
		.img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			position: absolute;
			top: 0;
			left: 0;
		}
		.inner-outline {
			position: relative;
			z-index: 1;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: flex-start;
			gap:40px;
			@media (max-width: 767px) {
				width: calc(100% - 80px);
			}
			.title-menu {
				padding: 16px 16px 0 0;
				display: flex;
				flex-direction: column;
				gap: 24px;
				@media (max-width: 767px) {
					padding: 0 16px 0 0;
				}
				h3 {
					font-family: var(--font-mincho);
					font-size: calc(48 * var(--rem));
					line-height: 1;
					font-weight: 500;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					align-items: center;
					gap:0.08em;
					@media (max-width: 767px) {
						font-size: calc(40 * var(--rem));
					}
					span {
						display: block;
					}
				}
			}
			.text {
				position: relative;
				z-index: 1;
				width: 320px;
				text-align: justify;
				@media (max-width: 767px) {
					width: 100%;
				}
			}
		}
		.item-link {
			margin-top: auto;
			@media (max-width: 767px) {
				width: 80px;
			}
			a {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				gap:0 24px;
				@media (max-width: 767px) {
					gap:0;
				}
				@media (hover: hover) {
					transition: 0.3s;
					&:hover {
						opacity: 0.6;
						img {
							transform: scale(1.5);
						}
					}
				}
			}
			.txt {
				font-family: var(--font-sans);
				font-size: calc(18 * var(--rem));
				@media (max-width: 767px) {
					display: none;
				}
			}
			.arrow {
				width: 80px;
				height: 80px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: relative;
				img {
					transition: 0.3s;
					display: inline-block;
				}
				svg {
					position: absolute;
					top: 0;
					left: 0;
					animation: rotateAnimation 5s linear infinite;
					width: 100%;
					height: 100%;
				}
			}
		}
		&:nth-child(2) {
			.img {
				@media (max-width: 767px) {
					object-position: 55% center;
				}
			}
		}
	}
}

@keyframes rotateAnimation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* -----------------------------------------------------------
	.p-flow
----------------------------------------------------------- */
.p-flow {
	background: rgba(255, 255, 255, 0.60);
	padding: 240px 0;
	@media (max-width: 767px) {
		padding: 120px 0;
	}
	.l-wrap-flow {
		.c-title-basic {
			margin-bottom: 64px;
			@media (max-width: 767px) {
				margin-bottom: 40px;
			}
		}
		.list-flow {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-template-rows: 1fr;
			grid-column-gap: 8px;
			@media (min-width: 768px) and (max-width: 1024px) {
				grid-template-columns: repeat(2, 1fr);
				grid-template-rows: repeat(2, 1fr);
				grid-row-gap: 8px;
			}
			@media (max-width: 767px) {
				grid-template-columns: 1fr;
				grid-template-rows: repeat(2, auto) repeat(2, 1fr);
				grid-column-gap: 0px;
				grid-row-gap: 8px;
			}
			.item-flow {
				border-radius: 8px;
				background: rgba(255, 255, 255, 0.50);
				padding: 24px;
				@media (max-width: 767px) {
					padding-bottom: 32px;
				}
				&:not(:last-child) {
					position: relative;
					&::after {
						content: '';
						background: url(../images/common/icon-arrow-ditail.svg) 0 0 no-repeat;
						background-size: contain;
						width: 24px;
						height: 18px;
						position: absolute;
						top: 100px;
						right: -16px;
						z-index: 1;
					}
					@media (max-width: 767px) {
						&::after {
							top: auto;
							bottom: -12px;
							right: 0;
							left: 0;
							margin: 0 auto;
							rotate: 90deg;
						}
					}
				}
				.number {
					text-align: center;
					font-family: var(--font-sans);
					color: var(--color-pink);
					line-height: 1;
					font-size: calc(32 * var(--rem));
					font-weight: 400;
					letter-spacing: 0.04em;
					margin-bottom: 8px;
					padding-top: 24px;
					@media (max-width: 767px) {
						padding-top: 8px;
					}
				}
				h3 {
					text-align: center;
					font-family: var(--font-mincho);
					color: var(--color-title);
					line-height: 1.5;
					font-weight: 600;
					font-size: calc(22 * var(--rem));
					margin-bottom: 40px;
					@media (max-width: 767px) {
						margin-bottom: 16px;
					}
				}
				.text-flow {
					font-size: calc(15 * var(--rem));
				}
				.box-buttons {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					grid-template-rows: 1fr;
					grid-column-gap: 8px;
					margin-top: 24px;
					@media (min-width: 1025px) and (max-width: 1280px) {
						grid-template-columns: 1fr;
						grid-template-rows: repeat(2, 1fr);
						grid-column-gap: 0px;
						grid-row-gap: 8px;
					}
				}
				.c-link-basic {
					margin: 24px auto 0;
					text-align: center;
					a {
						display: inline-flex;
					}
				}
			}
		}
	}
}

/* -----------------------------------------------------------
	.p-reserve
----------------------------------------------------------- */
.p-reserve {
	background: rgba(255, 255, 255, 0.60);
	padding-bottom: 240px;
	@media (max-width: 767px) {
		padding-bottom: 120px;
	}
	.l-wrap-reserve {
		.c-title-basic {
			margin-bottom: 64px;
			@media (max-width: 767px) {
				margin-bottom: 40px;
			}
		}
		.text-lead {
			margin-bottom: 40px;
			letter-spacing: 0.08em;
			@media (max-width: 767px) {
				margin-bottom: 24px;
			}
		}
		.list-reserve {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: 1fr;
			grid-column-gap: 8px;
			@media (max-width: 767px) {
				grid-template-columns: 1fr;
				grid-template-rows: repeat(2, auto);
				grid-column-gap: 0px;
				grid-row-gap: 8px;
			}
			.item-reserve {
				border-radius: 8px;
				background: rgba(255, 255, 255, 0.50);
				padding: 48px 24px 32px;
				@media (max-width: 767px) {
					padding: 24px;
				}
				h3 {
					text-align: center;
					font-family: var(--font-mincho);
					color: var(--color-title);
					line-height: 1.5;
					font-weight: 600;
					font-size: calc(22 * var(--rem));
					margin-bottom: 24px;
					@media (max-width: 767px) {
						font-size: calc(20 * var(--rem));
						margin-bottom: 16px;
					}
				}
				.inner-line {
					display: flex;
					justify-content: space-between;
					gap: 24px;
					.inner-detail {
						.text-line {
							font-size: calc(15 * var(--rem));
							.show-pc {
								display: block;
								@media (hover: none) and (pointer: coarse) {
									display: none;
								}
							}
						}
						.c-link-basic {
							margin-top: 24px;
							@media (hover: none) and (pointer: coarse) {
								text-align: center;
								a {
									display: inline-flex;
								}
							}
						}
					}
					img {
						width: 140px;
					}
					@media (hover: none) and (pointer: coarse) {
						img {
							display: none;
						}
					}
				}
				.inner-tel {
					.text {
						margin-bottom: 24px;
					}
					.p-reserve__tel {
						font-family: var(--font-sans);
						text-align: center;
						font-weight: 400;
						line-height: 1;
						.p-reserve__tel-label {
							font-size: calc(24 * var(--rem));
							display: inline-block;
							padding-right: 0.5em;
							@media (max-width: 767px) {
								font-size: calc(20 * var(--rem));
							}
						}
						.p-reserve__tel-number {
							font-size: calc(40 * var(--rem));
							@media (max-width: 767px) {
								font-size: calc(36 * var(--rem));
							}
						}
					}
					.p-reserve__reception-time {
						font-family: var(--font-sans);
						text-align: center;
						font-size: calc(14 * var(--rem));
						em {
							font-size: calc(16 * var(--rem));
						}
					}
				}
			}
		}
	}
}

/* -----------------------------------------------------------
	.p-safety
----------------------------------------------------------- */
.p-safety {
	background: rgba(255, 255, 255, 0.60);
	padding-bottom: 240px;
	@media (max-width: 767px) {
		padding-bottom: 120px;
	}
	.l-wrap-safety {
		.c-title-basic {
			margin-bottom: 64px;
			@media (max-width: 767px) {
				margin-bottom: 40px;
			}
		}
		.list-safety {
			container-type: inline-size;
			display: grid;
			grid-template-columns: 1fr;		
			@media (min-width: 768px) {
				grid-template-columns: repeat(3, 1fr);
			}
			.item-safety {
				padding: 40px;
				&:not(:first-child) {
					border-left: 1px dashed var(--color-border);
				}
				@media (min-width: 768px) and (max-width: 1024px) {
					padding: 24px;
				}
				@media (max-width: 767px) {
					padding: 40px 0;
					&:not(:first-child) {
						border-left: none;
						border-top: 1px solid var(--color-border);
					}
				}
				.img-safety {
					margin-bottom: 64px;
					@media (max-width: 767px) {
						margin-bottom: 40px;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
					.deco-safety-number {
						display: none;
						@media (max-width: 767px) {
							display: block;
							width: 20.75%;
							span {
								writing-mode: vertical-rl;
								text-align: start;
								white-space: pre;
								text-transform: uppercase;
								font-family: var(--font-sans);
								line-height: 1;
								font-size: calc(16 * var(--rem));
								scale: -1 -1;
							}
						}
					}
					.imgs {
						width: 100%;
						display: flex;
						justify-content: space-between;
						@media (max-width: 767px) {
							align-items: center;
							width: 79.25%;
						}
						img {
							border-radius: 9999px;
							width: 69.2%;
							@media (min-width: 768px) and (max-width: 1024px) {
								width: 80%;
							}
							@media (max-width: 767px) {
								width: 73.8%;
							}
						}
						figcaption {
							writing-mode: vertical-rl;
							text-align: start;
							display: inline-block;
							white-space: pre;
							text-transform: uppercase;
							font-family: var(--font-sans);
							line-height: 1;
							@media (max-width: 767px) {
								width: 26.2%;
								font-size: calc(16 * var(--rem));
							}
						}
					}
				}
				h3 {
					font-family: var(--font-mincho);
					font-size: calc(24 * var(--rem));
					color: var(--color-title);
					font-weight: 600;
					line-height: 1.5;
					letter-spacing: 0.08em;
					margin-bottom: 32px;
					@media (min-width: 768px) and (max-width: 1024px) {
						font-size: calc(18 * var(--rem));
						margin-bottom: 24px;
					}
					@media (max-width: 767px) {
						font-size: calc(22 * var(--rem));
						line-height: 1.5;
						margin-bottom: 16px;
						text-align: center;
					}
				}
				.text {
					letter-spacing: 0.08em;
					@media (max-width: 767px) {
						font-size: calc(16 * var(--rem));
					}
				}
			}	
		}
	}
}

/* -----------------------------------------------------------
	.p-faq
----------------------------------------------------------- */
.p-faq {
	background: rgba(255, 255, 255, 0.60);
	padding-bottom: 240px;
	@media (max-width: 767px) {
		padding-bottom: 120px;
	}
	.l-wrap-faq {
		.c-title-basic {
			margin-bottom: 64px;
			@media (max-width: 767px) {
				margin-bottom: 40px;
			}
		}
		.container-faq {
			display: flex;
			@media (min-width: 1025px) {
				justify-content: space-between;
			}
			@media (max-width: 1024px) {
				flex-direction: column;
			}
			.outline-faq {
				@media (min-width: 1025px) {
					width: 30%;
				}
				@media (max-width: 1024px) {
					display: contents;
				}
				.text-lead {
					margin-bottom: 40px;
					letter-spacing: 0.08em;
					@media (max-width: 1024px) {
						order:1;
					}
				}
				.c-link-basic {
					@media (max-width: 1024px) {
						order:3;
						text-align: center;
						margin-top: 40px;
						a {
							display: inline-flex;
						}
					}
				}
			}
			.list-faq {
				display: flex;
				flex-direction: column;
				gap:8px;
				@media (min-width: 1025px) {
					width: 65.4%;
				}
				@media (max-width: 1024px) {
					order:2;
				}
				.item-faq {
					border-radius: 8px;
					background: rgba(255, 255, 255, 0.50);
					&::details-content {
						content-visibility: unset;
						display: grid;
						@media (prefers-reduced-motion: no-preference) {
							transition-duration: 400ms;
							transition-property: grid-template-rows;
						}
					}
					&:not([open])::details-content {
						grid-template-rows: 0fr;
					}
					&[open]::details-content {
						grid-template-rows: 1fr;
					}
				}
				summary {
					display: grid;
					grid-template-columns: 60px 1fr 16px;
					gap: 6px;
					align-items: center;
					padding: 24px 32px;
					font-weight: 500;
					font-size: calc(18 * var(--rem));
					line-height: 1.4;
					transition-duration: 300ms;
					cursor: pointer;
					[open] > & {
						.icon {
							transform: scale(1,-1);
						}
					}
					@media (hover: hover) {
						&:hover {
							background: rgba(255, 255, 255, 1);
							border-radius: 8px;
						}
					}
					@media (max-width: 767px) {
						grid-template-columns: 36px 1fr 16px;
						padding: 16px;
						font-size: calc(15 * var(--rem));
					}
					.q {
						background-color: var(--color-red);
						color: #fff;
						font-family: var(--font-sans);
						font-weight: 400;
						border-radius: 9999px;
						font-size: 20px;
						line-height: 40px;
						width: 28px;
						height: 40px;
						text-align: center;
						margin-right: 32px;
						@media (max-width: 767px) {
							font-size: 16px;
							margin-right: 8px;
						}
					}
					.icon {
						transition: transform 0.4s;
					}
				}
				._overflow-hidden {
					overflow: hidden;
				}
				._contents {
					padding: 40px;
					background: rgba(255, 255, 255, 0.5);
					border-radius: 0 0 8px 8px;
					@media (max-width: 767px) {
						padding: 24px;
					}
				}				
			}
		}
	}
}