@charset "UTF-8";
body#top .c-relatedpages {
	.item-menu {
		display: none;
	}
}
/* -----------------------------------------------------------
	.p-mainvisual
----------------------------------------------------------- */
.p-mainvisual {
	position: relative;
	height: 97svh;
	&::before {
		content: '';
		width: 100%;
		height: 50%;
		background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	@media (max-width: 767px) {
		height: 100%;
	}
	.u-deco-eda {
		position: absolute;
		top: 0;
		right: 0;
		width: 70%;
		mix-blend-mode: multiply;
		@media (max-width: 767px) {
			width: 60%;
		}
		img {
			width: 100%;
		}
	}
	.u-deco-sakura {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 160px;
		mix-blend-mode: multiply;
		@media (max-width: 767px) {
			width: 80px;
			z-index: 10;
			bottom: 12vw;
		}
		img {
			width: 100%;
		}
	}
	.p-mainvisual-wrap {
		display: flex;
		@media (min-width: 1025px) {
			justify-content: space-between;
			padding-right: 40px;
			height: 100%;
		}
		@media (min-width: 768px) and (max-width: 1024px) {
			display: flex;
			flex-direction: column;
			position: relative;
		}
		@media (max-width: 767px) {
			flex-direction: column;
			position: relative;
		}
	}
	.u-deco-img {
		position: absolute;
		left: -22px;
		top: 126px;
		width: 27.2%;
		display: flex;
		justify-content: space-between;
		z-index: 1;
		@media (max-width: 767px) {
			display: none;
		}
		.blur {
			width: 33.2%;
			filter: blur(10px);
			&:nth-child(2) {
				align-self: flex-end;
				margin-top: 143px;
			}
			img {
				border-radius: 9999px;
			}
		}
		.main {
			width: 53.2%;
			position: absolute;
			inset: 0;
			margin: auto;
			img {
				border-radius: 9999px;
			}
		}
	}
	.video {
		width: 50%;
		position: relative;
		z-index: 1;
		margin-left: auto;
		&::after {
			content: "";
			width: 100%;
			height: 50%;
			position: absolute;
			left: 0;
			bottom: 0;
			background: linear-gradient(180deg, rgba(227, 176, 160, 0.00) 70.3%, #E3B0A0 100%);
		}
		@media (min-width: 1025px) {
			order:2;
			margin-top: 64px;
			aspect-ratio: 1/1.06;
			@container (width > 1280px) {
				aspect-ratio: 1/0.95;
			}
		}
		@media (min-width: 768px) and (max-width: 1024px) {
			width: 80%;
			height: 80svh;
			margin-inline: auto;
			padding-top: 120px;
		}
		@media (max-width: 767px) {
			width: 95.9%;
			margin-inline: auto;
			aspect-ratio: 1/0.95;
			margin-top: 72px;
			&::after {
				height: 100%;
			}
		}
		@media (max-width: 480px) {
			aspect-ratio: 1/1.283;
		}
		video {
			border-radius: 9999px 9999px 0 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.p-mainvisual-text {
		align-self: flex-end;
		position: relative;
		z-index: 3;
		transition-delay: 0.8s;
		@media (min-width: 1025px) {
			order:1;
			margin-bottom: 16em;
			padding-left: 8.6%;
		}
		@media (min-width: 768px) and (max-width: 1024px) {
			position: absolute;
			left: 0;
			right: 0;
			bottom: -1em;
			margin: 0 auto;
		}
		@media (max-width: 767px) {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 15vw;
			margin: 0 auto;
		}
		>div {
			@media (max-width: 1024px) {
				text-align: center;
				margin-inline: auto;
			}
		}
		.p-mainvisual-catchcopy1 {
			margin-bottom: 30px;
			width: 329px;
			@media (max-width: 767px) {
				width: 62.3vw;
				margin-bottom: 8px;
			}
		}
		.p-mainvisual-catchcopy2 {
			width: 375px;
			@media (max-width: 767px) {
				width: 60vw;
			}
		}
	}
	.u-catchcopy-en {
		font-family: var(--font-sans);
		line-height: 1;
		font-size: 11vw;
		letter-spacing: 0.04em;
		color: #fff;
		position: absolute;
		bottom: 0;
		left: auto;
		right: auto;
		z-index: 1;
		text-align: center;
		width: 100%;
		transition-delay: 1.5s;
		@media (max-width: 767px) {
			font-size: 10vw;
			bottom: -0.5em;
		}
	}
}

/* -----------------------------------------------------------
	.p-concept
----------------------------------------------------------- */
.p-concept {
	position: relative;
	padding-bottom: 380px;
	background: rgba(255, 255, 255, 0.01);
	overflow: hidden;
	@media (min-width: 768px) and (max-width: 1024px) {
		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;
	}
	.u-deco-sakura {
		position: absolute;
		top: 0;
		right: 0;
		mix-blend-mode: multiply;
		width: 202px;
		@media (min-width: 768px) and (max-width: 1024px) {
			width: 140px;
		}
		@media (max-width: 767px) {
			width: 104px;
		}
	}
	.l-wrap-concept {
		position: relative;
		z-index: 1;
		@media (min-width: 768px) {
			margin-top: 120px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		@media (max-width: 767px) {
			margin-top: 64px;
		}
		.p-concept-text {
			@media (min-width: 768px) {
				width: 50%;
				order:2;
				padding-left: 80px;
			}
			@media (min-width: 768px) and (max-width: 1024px) {
				padding-left: 24px;
			}
			@media (max-width: 767px) {
				margin-bottom: 64px;
			}
			h2 {
				font-family: var(--font-mincho);
				font-weight: 600;
				font-size: calc(32 * var(--rem));
				letter-spacing: 0.16em;
				margin-bottom: 64px;
				@media (min-width: 768px) and (max-width: 1024px) {
					font-size: calc(24 * var(--rem));
					margin-bottom: 40px;
				}
				@media (max-width: 767px) {
					font-size: calc(22 * var(--rem));
					margin-bottom: 24px;
				}
			}
			.p-concept-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-concept-imgs {
			@media (min-width: 768px) {
				width: 50%;
				order:1;
			}
			.imgs {
				width: calc(100% - 160px);
				margin-inline: auto;
				position: relative;
				@media (min-width: 768px) and (max-width: 1024px) {
					width: calc(100% - 48px);
				}
				@media (max-width: 767px) {
					width: calc(100% - 22px);
				}
				span {
					display: block;
					&.main {
						img {
							border-radius: 9999px 9999px 0 0;
						}
					}
					&.sub {
						position: absolute;
						right: -80px;
						bottom: -140px;
						width: 50%;
						@media (min-width: 768px) and (max-width: 1024px) {
							right: -24px;
							bottom: -64px;
						}
						@media (max-width: 767px) {
							right: -20px;
							bottom: -40px;
							width: 37.5%;
						}
						img {
							border-radius: 9999px;
						}
					}
				}
			}
		}
	}
}
/* -----------------------------------------------------------
	.p-feature
----------------------------------------------------------- */
.p-feature {
	background: rgba(255, 255, 255, 0.60);
	.l-wrap-feature {
		padding: 160px 0 240px;
		@media (min-width: 768px) and (max-width: 1024px) {
			padding: 0 0 240px;
		}
		@media (max-width: 767px) {
			padding: 0 0 160px;
		}
		.c-title-basic {
			margin-bottom: 40px;
		}
		.list-feature {
			container-type: inline-size;
			display: grid;
			grid-template-columns: 1fr;		
			@media (min-width: 768px) {
				grid-template-columns: repeat(3, 1fr);
			}
			.item-feature {
				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-feature {
					margin-bottom: 64px;
					@media (max-width: 767px) {
						margin-bottom: 40px;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
					.deco-feature-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-menu
----------------------------------------------------------- */
.p-menu {
	.item-menu {
		width: 100%;
		height: 800px;
		position: relative;
		overflow: hidden;
		padding: 64px;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		color: #fff;
		@media (max-width: 767px) {
			height: 640px;
			padding: 40px 24px;
		}
		.img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			position: absolute;
			top: 0;
			left: 0;
		}
		.text {
			position: relative;
			z-index: 1;
			width: 347px;
			text-align: justify;
			@media (max-width: 767px) {
				width: calc(100% - 104px);
			}
		}
		.inner-outline {
			position: relative;
			z-index: 1;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-end;
			.title-menu {
				padding: 16px 16px 0 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap:24px;
				@media (max-width: 767px) {
					padding: 0 16px 0 0;
				}
				h2 {
					font-family: var(--font-mincho);
					font-size: calc(64 * var(--rem));
					line-height: 1;
					font-weight: 500;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					gap:0.08em;
					@media (max-width: 767px) {
						font-size: calc(40 * var(--rem));
					}
					span {
						display: block;
					}
				}
				.en {
					display: block;
					span {
						writing-mode: vertical-rl;
						display: inline-block;
						text-align: center;
						white-space: pre;
						text-transform: uppercase;
						font-family: var(--font-sans);
						line-height: 0.8;
						font-size: 14px;
						@media (max-width: 767px) {
							font-size: 12px;
						}
					}
				}
			}
			.item-link {
				margin-top: auto;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				gap:0 24px;
				@media (max-width: 767px) {
					gap:0;
				}
				.txt {
					font-family: var(--font-sans);
					font-size: calc(18 * var(--rem));
					@media (max-width: 767px) {
						display: none;
					}
				}
				.arrow {
					width: 80px;
					height: 80px;
					a {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 100%;
						position: relative;
						@media (hover: hover) {
							&:hover {
								img {
									transform: scale(1.5);
								}
							}
						}
						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-beginners
----------------------------------------------------------- */
.p-beginners {
	position: relative;
	background: rgba(255, 255, 255, 0.60);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap:64px;
	padding-bottom: 240px;
	@media (max-width: 767px) {
		gap:0;
		padding-bottom: 160px;
	}
	.u-deco-sakura {
		position: absolute;
		top: 0;
		left: 0;
		mix-blend-mode: multiply;
		width: 158px;
		@media (max-width: 767px) {
			width: 92px;
		}
	}
	.img {
		border-radius: 0 0 0 320px;
		order:2;
		width: 41.7%;
		height: auto;
		@media (max-width: 1024px) {
			position: absolute;
			top:0;
			right: 0;
		}
		@media (max-width: 767px) {
			width: 56.4%;
			border-radius: 0 0 0 104px;
		}
	}
	.deco {
		position: absolute;
		right: 0;
		top: 0;
		line-height: 1;
		@media (max-width: 767px) {
			top: 40px;
			width: 11vw;
		}
	}
	.p-beginners-text {
		oder:1;
		width: calc(58.3% - 64px);
		padding-top: 240px;
		@media (min-width: 1281px) {
			padding-left: 11.1vw;
		}
		@media (min-width: 768px) and (max-width: 1280px) {
			padding-left: 5%;
		}
		@media (max-width: 1024px) {
			width: 100%;
		}
		@media (max-width: 767px) {
			width: 89.6%;
			margin-inline: auto;
			position: relative;
			z-index: 5;
		}
		.title-beginners {
			font-family: var(--font-mincho);
			font-size: calc(32 * var(--rem));
			letter-spacing: 0.16em;
			margin-bottom: 48px;
			@media (max-width: 767px) {
				font-size: calc(22 * var(--rem));
				margin-bottom: 24px;
				margin-top: -37px;
			}
		}
		.inner-text {
			padding-left: 3em;
			letter-spacing: 0.16em;
			line-height: 2;
			margin-bottom: 64px;
			display: flex;
			flex-direction: column;
			gap:2em;
			@media (max-width: 767px) {
				padding-left: 0;
				letter-spacing: 0;
				margin-bottom: 32px;
			}
		}
		.c-link-basic {
			padding-left: 3em;
			@media (max-width: 767px) {
				padding-left: 0;
			}
		}
	}
}