@charset "utf-8";

/* =============================================================================
Page Background (Hero〜Message領域に上→下でベージュフェード)
HTML: index.php の <div class="page-bg"></div>
============================================================================= */
.page-bg {
	position: absolute;
	left: 0;
	bottom: 100%;
	width: 100%;
	z-index: -1;
	pointer-events: none;
	background-image: linear-gradient(180deg, transparent 0%, #f3f2e9 100%);
	clip-path: url(#page-bg-clip);
	@media (width > 767px) {/* PC */
		height: 1936rem;
		top: calc(100vh + 1000rem);
		margin-top: -1936rem;
	}
	@media (width <= 767px) {/* SP */
		top: calc(100vh + 700rem);
		margin-top: -620rem;
		height: 620rem;
	}
}

/* =============================================================================
Project BG (project セクション内の背面装飾レイヤー、白→透過グラデーション)
HTML: index.php の <section class="project"> 内先頭の <div class="project-bg"></div>
============================================================================= */
.project-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;
	pointer-events: none;
	background-image: linear-gradient(180deg, #fff 0%, transparent 100%);
	@media (width > 767px) {/* PC */
		height: 1193rem;
		clip-path: url(#project-bg-clip-pc);
	}
	@media (width <= 767px) {/* SP */
		height: 1570rem;
		clip-path: url(#project-bg-clip-sp);
	}
}

/* =============================================================================
Project BG Bottom (project セクション下部の背面装飾、PC専用、波型下辺)
HTML: index.php の <section class="project"> 内末尾の <div class="project-bg-bottom _pc"></div>
============================================================================= */
.project-bg-bottom {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: -1;
	pointer-events: none;
	background-image: linear-gradient(180deg, transparent 0%, #f3f2e9 100%);
	@media (width > 767px) {/* PC */
		height: 517rem;
		clip-path: url(#project-bg-bottom-clip-pc);
	}
}

/* =============================================================================
Hero (Key Visual)
============================================================================= */
.hero {
	display: flex;
	justify-content: center;
	align-items: center;
	@media (width > 767px) {/* PC */
		overflow: hidden;
		height: 100vh;
		padding-bottom: 50rem;
		box-sizing: border-box;
	}
	@media (width <= 767px) {/* SP */
		padding-top: 40rem;
	}
	.hero__inner {
		position: relative;
		margin: 0 auto;
		@media (width > 767px) {/* PC */
			max-width: 1478rem;
			padding: 0 61rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 55rem;
			min-height: 837rem;
		}
		@media (width <= 767px) {/* SP */
			padding: 0 17rem;
			display: flex;
			flex-direction: column;
			gap: 9rem;
		}
	}
	.hero__content {
		@media (width > 767px) {/* PC */
			width: 535rem;
			flex: 0 0 auto;
			order: 1;
			display: flex;
			flex-direction: column;
			gap: 16rem;
			margin-top: 150rem;
		}
		@media (width <= 767px) {/* SP */
			order: 2;
			display: flex;
			flex-direction: column;
			gap: 16rem;
			padding-top: 9rem;
		}
	}
	.hero__visual {
		position: relative;
		@media (width > 767px) {/* PC */
			width: 888rem;
			height: 837rem;
			flex: 0 0 auto;
			order: 2;
		}
		@media (width <= 767px) {/* SP */
			order: 1;
			width: 100%;
			aspect-ratio: 339 / 346;
		}
	}
	.hero__image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		@media (width > 767px) {/* PC */
			max-width: 848rem;
		}
		@media (width <= 767px) {/* SP */
			width: calc(100% - 4rem);
			height: calc(100% - 15rem);
		}
	}

	/* Title "CABIN! to YOU!"
	----------------------------------------------------------------------------- */
	.hero__title {
		font-family: var(--ff-paganini);
		font-weight: 300;
		line-height: 1;
		display: flex;
		flex-direction: column;
		margin: 0;
	}
	.hero__title-line {
		display: block;
	}
	.hero__title-line--cabin,
	.hero__title-line--you {
		background: linear-gradient(90deg, #806E3D 0%, #B5A370 20%, #806E3D 30%, #B5A370 50%, #806E3D 70%, #B5A370 80%, #806E3D 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
	.hero__title-line--cabin {
		@media (width > 767px) {/* PC */
			font-size: 88rem;
			letter-spacing: 13.2rem;
			text-align: left;
		}
		@media (width <= 767px) {/* SP */
			font-size: 64rem;
			letter-spacing: 9.6rem;
			text-align: center;
		}
	}
	.hero__title-line--to {
		color: #7D6711;
		@media (width > 767px) {/* PC */
			font-size: 120rem;
			letter-spacing: 12rem;
			text-align: center;
			text-indent: -20rem;
			margin-top: -20rem;
		}
		@media (width <= 767px) {/* SP */
			font-size: 88rem;
			letter-spacing: 8.8rem;
			text-align: center;
			text-indent: -10rem;
			margin-top: -15rem;
		}
	}
	.hero__title-line--you {
		@media (width > 767px) {/* PC */
			font-size: 88rem;
			letter-spacing: 13.2rem;
			text-align: right;
		}
		@media (width <= 767px) {/* SP */
			font-size: 64rem;
			letter-spacing: 9.6rem;
			text-align: center;
		}
	}

	/* Description
	----------------------------------------------------------------------------- */
	.hero__description {
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		color: #4C4C4C;
		margin: 0;
		text-align: center;
		@media (width > 767px) {/* PC */
			font-size: 22rem;
			letter-spacing: 5.0rem;
			line-height: calc(46.2 / 22);
		}
		@media (width <= 767px) {/* SP */
			font-size: 15rem;
			line-height: calc(27 / 15);
			text-align: justify;
			text-align-last: justify;
		}
	}

	/* Period
	----------------------------------------------------------------------------- */
	.hero__period {
		border-top: 1rem solid #827233;
		border-bottom: 1rem solid #827233;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #7D6711;
		font-family: var(--ff-paganini);
		font-weight: 300;
		@media (width > 767px) {/* PC */
			gap: 18rem;
			padding: 14rem 0;
		}
		@media (width <= 767px) {/* SP */
			gap: 11rem;
			padding: 8rem 0;
		}
	}
	.hero__period-date {
		display: flex;
		align-items: flex-end;
		@media (width > 767px) {/* PC */
			gap: 8rem;
		}
		@media (width <= 767px) {/* SP */
			gap: 6rem;
		}
	}
	.hero__period-year {
		line-height: 1;
		@media (width > 767px) {/* PC */
			font-size: 36rem;
			letter-spacing: 1.8rem;
			padding-bottom: 4rem;
		}
		@media (width <= 767px) {/* SP */
			font-size: 22rem;
			letter-spacing: 1.1rem;
			padding-bottom: 2rem;
		}
	}
	.hero__period-day {
		line-height: 1;
		@media (width > 767px) {/* PC */
			font-size: 64rem;
			letter-spacing: 3.2rem;
		}
		@media (width <= 767px) {/* SP */
			font-size: 40rem;
			letter-spacing: 2rem;
		}
	}
	.hero__period-dow {
		font-weight: 400;
		text-align: center;
		line-height: 1;
		align-self: flex-start;
		@media (width > 767px) {/* PC */
			font-size: 16rem;
			letter-spacing: 1.6rem;
			padding-top: 8rem;
		}
		@media (width <= 767px) {/* SP */
			font-size: 10rem;
			letter-spacing: 1rem;
			padding-top: 5rem;
		}
	}
	.hero__period-divider {
		display: block;
		background-color: #7D6711;
		@media (width > 767px) {/* PC */
			width: 24rem;
			height: 2rem;
		}
		@media (width <= 767px) {/* SP */
			width: 12rem;
			height: 1rem;
		}
	}

	/* Badge (circular link) - Group 21
	----------------------------------------------------------------------------- */
	.hero__badge {
		position: absolute;
		border-radius: 50%;
		overflow: hidden;
		background-color: #414155;
		color: #fff;
		font-family: var(--ff-paganini);
		font-weight: 300;
		line-height: 1;
		@media (width > 767px) {/* PC */
			right: 0;
			bottom: 8rem;
			width: 200rem;
			height: 200rem;
		}
		@media (width <= 767px) {/* SP */
			right: 0;
			bottom: 0;
			width: 100rem;
			height: 100rem;
		}
		@media(hover) {
			& {
				transition: opacity 0.2s;
			}
			&:hover {
				opacity: 0.85;
			}
		}
	}
	.hero__badge-curve {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		@media (width <= 767px) {/* SP */
			transform: scale(1.05);
		}
	}
	.hero__badge-curve-text {
		fill: #fff;
		font-family: var(--ff-paganini);
		font-weight: 300;
		@media (width > 767px) {/* PC */
			font-size: 18px;
			letter-spacing: 2.7px;
		}
		@media (width <= 767px) {/* SP */
			font-size: 9px;
			letter-spacing: 6px;
		}
	}
	.hero__badge-num {
		position: absolute;
		line-height: 1;
		@media (width > 767px) {/* PC */
			left: 43rem;
			top: 47rem;
			font-size: 56rem;
			letter-spacing: 2.8rem;
		}
		@media (width <= 767px) {/* SP */
			left: 21.5rem;
			top: 23.5rem;
			font-size: 28rem;
			letter-spacing: 1.4rem;
		}
	}
	.hero__badge-unit {
		position: absolute;
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		line-height: 1;
		@media (width > 767px) {/* PC */
			left: 109rem;
			top: 70rem;
			font-size: 24rem;
			letter-spacing: 0.72rem;
		}
		@media (width <= 767px) {/* SP */
			left: 54.5rem;
			top: 35rem;
			font-size: 12rem;
			letter-spacing: 0.36rem;
		}
	}
	.hero__badge-sub {
		position: absolute;
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		line-height: 1;
		left: 48rem;
		@media (width > 767px) {/* PC */
			font-size: 22rem;
		}
		@media (width <= 767px) {/* SP */
			left: 24rem;
			font-size: 11rem;
		}
	}
	.hero__badge-sub--1 {
		@media (width > 767px) {/* PC */
			top: 107rem;
			letter-spacing: 5.28rem;
		}
		@media (width <= 767px) {/* SP */
			top: 53.5rem;
			letter-spacing: 2.64rem;
		}
	}
	.hero__badge-sub--2 {
		@media (width > 767px) {/* PC */
			top: 134rem;
			letter-spacing: 9.9rem;
		}
		@media (width <= 767px) {/* SP */
			top: 67rem;
			letter-spacing: 4.95rem;
		}
	}
	.hero__badge::after {
		content: "";
		position: absolute;
		right: 0;
		left: 0;
		margin: auto;
		width: 0;
		height: 0;
		@media (width > 767px) {/* PC */
			border-top: 10rem solid #fff;
			border-left: 10rem solid transparent;
			border-right: 10rem solid transparent;
			bottom: 20rem;
		}
		@media (width <= 767px) {/* SP */
			border-top: 6rem solid #fff;
			border-left: 6rem solid transparent;
			border-right: 6rem solid transparent;
			bottom: 10rem;
		}
	}
}

/* =============================================================================
Side Label (reusable vertical label — attaches to left/right edge)
使い方: <div class="side-label side-label--right">...</div>
位置のオーバーライド: `--side-label-top: 80rem;` を親側で指定
============================================================================= */
.side-label {
	position: absolute;
	top: var(--side-label-top, 0);
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16rem;
	font-family: var(--ff-paganini);
	font-weight: 300;
	color: #161616;
	line-height: 1;
	pointer-events: none;
	@media (width > 767px) {/* PC */
		font-size: 22rem;
		letter-spacing: 2.2rem;
	}
	@media (width <= 767px) {/* SP */
		font-size: 14rem;
		letter-spacing: 1.4rem;
	}
}
.side-label--right {
	@media (width > 767px) {/* PC */
		right: 58rem;
	}
	@media (width <= 767px) {/* SP */
		right: 6rem;
	}
}
.side-label--left {
	@media (width > 767px) {/* PC */
		left: 58rem;
	}
	@media (width <= 767px) {/* SP */
		left: 6rem;
	}
}
.side-label__text {
	writing-mode: vertical-rl;
	background-image: linear-gradient(180deg, #806E3D 0%, #B5A370 20%, #806E3D 30%, #B5A370 50%, #806E3D 70%, #B5A370 80%, #806E3D 100%);
	background-color: #161616;
	background-blend-mode: screen;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.side-label__line {
	display: block;
	width: 1rem;
	height: 56rem;
	background-color: #A8975A;
}

/* =============================================================================
Message
============================================================================= */
.message {
	position: relative;
	text-align: center;
	@media (width > 767px) {/* PC */
		padding: 70rem 0;
		--side-label-top: 200rem;
	}
	@media (width <= 767px) {/* SP */
		padding: 60rem 17rem;
		--side-label-top: 60rem;
	}
	.message__decor {
		position: absolute;
		left: 0;
		width: 100%;
		z-index: 0;
		pointer-events: none;
		overflow: hidden;
		@media (width > 767px) {/* PC */
			top: -350rem;
		}
		@media (width <= 767px) {/* SP */
			top: -200rem;
		}
	}
	.message__decor-svg {
		display: block;
		position: relative;
		overflow: visible;
		.st0 {
			fill: none;
			stroke: #b28f4e;
			stroke-opacity: .2;
			stroke-linecap: round;
			stroke-linejoin: round;
			stroke-dasharray: 1 1;
			stroke-dashoffset: 1;
		}
		&._pc {
			left: -12%;
			width: 1967px;
			height: 1118px;
			.st0 { stroke-width: 7px; }
		}
		&._sp {
			left: -25%;
			width: 683px;
			height: 926px;
			.st0 { stroke-width: 2px; }
		}
	}
	.message__decor-curve {
		position: absolute;
		display: block;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		svg {
			display: block;
			width: 100%;
			height: auto;
			overflow: visible;
		}
		path {
			fill: #B28F4E;
			fill-opacity: 0;
			stroke: #B28F4E;
			stroke-opacity: 0.25;
			stroke-width: 1;
			/* 中央から両端へ伸ばす: 中央に長さ0のダッシュを置いて、徐々に長さ1まで成長させる */
			stroke-dasharray: 0 1;
			stroke-dashoffset: 0.5;
			animation:
				draw-message-curve 4s ease-out 0.3s forwards,
				fill-message-curve 1s ease-in 4.3s forwards,
				hide-message-stroke 0.6s ease-out 5.3s forwards;
		}
		@media (width > 767px) {/* PC */
			width: 1940rem;
		}
		@media (width <= 767px) {/* SP */
			width: 150%;
			margin-left: 50rem;
			margin-top: 40rem;
		}
	}
	.message__inner {
		position: relative;
		z-index: 1;
	}
	.message__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 80rem;
	}
	.message__text {
		display: flex;
		flex-direction: column;
		gap: 32rem;
	}
	.message__title {
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		color: #4C4C4C;
		margin: 0;
		@media (width > 767px) {/* PC */
			font-size: 36rem;
			letter-spacing: 8rem;
			line-height: calc(64.8 / 36);
		}
		@media (width <= 767px) {/* SP */
			font-size: 22rem;
			letter-spacing: 4rem;
			line-height: calc(39.6 / 22);
		}
	}
	.message__description {
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		color: #4C4C4C;
		margin: 0;
		@media (width > 767px) {/* PC */
			font-size: 16rem;
			letter-spacing: 2.5rem;
			line-height: calc(46.4 / 16);
		}
		@media (width <= 767px) {/* SP */
			font-size: 13rem;
			letter-spacing: 2.5rem;
			line-height: calc(37.7 / 13);
		}
	}
	.message__logo {
		display: block;
		width: auto;
		@media (width > 767px) {/* PC */
			height: 385rem;
		}
		@media (width <= 767px) {/* SP */
			height: 235rem;
		}
	}
}

@keyframes draw-message-curve {
	to {
		stroke-dasharray: 1 0;
		stroke-dashoffset: 0;
	}
}
@keyframes fill-message-curve {
	to { fill-opacity: 0.2; }
}
@keyframes hide-message-stroke {
	to { stroke-width: 0; }
}

/* =============================================================================
Concept
============================================================================= */
.concept {
	position: relative;
	@media (width > 767px) {/* PC */
		padding: 50rem 0;
		--side-label-top: 50rem;
	}
	@media (width <= 767px) {/* SP */
		padding: 30rem 30rem;
		--side-label-top: 35rem;
	}
	.concept__decor {
		position: absolute;
		left: 0;
		width: 100%;
		z-index: 0;
		pointer-events: none;
		overflow: hidden;
		@media (width > 767px) {/* PC */
			top: -160rem;
		}
		@media (width <= 767px) {/* SP */
			top: -140rem;
		}
	}
	.concept__decor-svg {
		display: block;
		position: relative;
		overflow: visible;
		width: 100%;
		height: auto;
		@media (width > 767px) {/* PC */
			left: -16%;
		}
		@media (width <= 767px) {/* SP */
			left: -15%;
		}
		.st0 {
			fill: none;
			stroke: #bf9d6d;
			stroke-opacity: .2;
			stroke-linecap: round;
			stroke-linejoin: round;
			stroke-dasharray: 1 1;
			stroke-dashoffset: 1;
		}
		&._pc {
			width: 1889px;
			height: 1486px;
			.st0 { stroke-width: 4px; }
		}
		&._sp {
			width: 566px;
			height: 1442px;
			.st0 { stroke-width: 2px; }
		}
	}
	.concept__decor-curve {
		display: block;
		@media (width > 767px) {/* PC */
			width: 100%;
		}
		@media (width <= 767px) {/* SP */
			width: 150%;
			margin-left: -25%;
		}
		&.type01 {
			position: absolute;
			top: 0;
			left: -10rem;
			width: 100%;
			@media (width <= 767px) {/* SP */
				width: 150%;
				margin-left: -25%;
			}
		}
		svg {
			display: block;
			width: 100%;
			height: auto;
			overflow: visible;
		}
		path {
			fill: #BF9D6D;
			fill-opacity: 0;
			stroke: #BF9D6D;
			stroke-opacity: 0.25;
			stroke-width: 1;
			stroke-dasharray: 0 1;
			stroke-dashoffset: 0.5;
			animation:
				draw-message-curve 4s ease-out 0.3s forwards,
				fill-message-curve 1s ease-in 4.3s forwards,
				hide-message-stroke 0.6s ease-out 5.3s forwards;
		}
	}
	.concept__inner {
		position: relative;
		z-index: 1;
		margin: 0 auto;
		@media (width > 767px) {/* PC */
			max-width: 1127.7rem;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 117rem;
		}
		@media (width <= 767px) {/* SP */
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 48rem;
		}
	}
	.concept__text {
		display: flex;
		flex-direction: column;
		text-align: left;
		@media (width > 767px) {/* PC */
			width: 537rem;
			flex: 0 0 auto;
			gap: 40rem;
		}
		@media (width <= 767px) {/* SP */
			gap: 24rem;
			width: 100%;
		}
	}
	.concept__title {
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		color: #4C4C4C;
		margin: 0;
		@media (width > 767px) {/* PC */
			font-size: 28rem;
			letter-spacing: 6rem;
			line-height: calc(50.4 / 28);
		}
		@media (width <= 767px) {/* SP */
			text-align: center;
			font-size: 22rem;
			letter-spacing: 4rem;
			line-height: calc(39.6 / 22);
		}
	}
	.concept__description {
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		color: #4C4C4C;
		margin: 0;
		@media (width > 767px) {/* PC */
			font-size: 16rem;
			letter-spacing: 2.5rem;
			line-height: calc(46.4 / 16);
		}
		@media (width <= 767px) {/* SP */
			font-size: 13rem;
			letter-spacing: 2.5rem;
			line-height: calc(37.7 / 13);
			text-align: justify;
		}
	}
	.concept__circles {
		position: relative;
		flex: 0 0 auto;
		@media (width > 767px) {/* PC */
			width: 473.7rem;
			height: 420rem;
		}
		@media (width <= 767px) {/* SP */
			width: 303rem;
			height: 286rem;
		}
	}
	.concept__circle {
		position: absolute;
		border-radius: 50%;
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		@media (width > 767px) {/* PC */
			width: 217.9rem;
			height: 218rem;
		}
		@media (width <= 767px) {/* SP */
			width: 145rem;
			height: 145rem;
		}
		&::after {
			content: "";
			position: absolute;
			inset: 5rem;
			border-radius: 50%;
			border: 1rem solid rgba(255, 255, 255, 0.2);
			pointer-events: none;
		}
	}
	.concept__circle--connect {
		background-color: #AD9D68;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	.concept__circle--travel {
		background-color: #A9744A;
		left: 0;
		@media (width > 767px) {/* PC */
			top: 202rem;
		}
		@media (width <= 767px) {/* SP */
			top: 141rem;
		}
	}
	.concept__circle--future {
		background-color: #414155;
		right: 0;
		@media (width > 767px) {/* PC */
			top: 202rem;
		}
		@media (width <= 767px) {/* SP */
			top: 141rem;
		}
	}
	.concept__circle-pre {
		font-family: var(--ff-paganini);
		font-weight: 300;
		line-height: 1;
		@media (width > 767px) {/* PC */
			font-size: 40rem;
			letter-spacing: 6rem;
			margin-top: -20rem;
		}
		@media (width <= 767px) {/* SP */
			font-size: 28rem;
			letter-spacing: 4.2rem;
			margin-top: -10rem;
		}
	}
	.concept__circle-line {
		display: block;
		background-color: #fff;
		width: 1rem;
		@media (width > 767px) {/* PC */
			height: 12rem;
			margin: 2rem 0 7rem;
		}
		@media (width <= 767px) {/* SP */
			height: 10rem;
			margin: 2rem 0 4rem;
		}
	}
	.concept__circle-label {
		font-family: var(--ff-shippori-mincho);
		font-weight: 400;
		line-height: 1;
		@media (width > 767px) {/* PC */
			font-size: 22rem;
			letter-spacing: 2.2rem;
		}
		@media (width <= 767px) {/* SP */
			font-size: 18rem;
			letter-spacing: 1.8rem;
		}
	}
	.concept__circle-sub {
		font-family: var(--ff-shippori-mincho);
		font-weight: 400;
		@media (width > 767px) {/* PC */
			font-size: 16rem;
			letter-spacing: 1.6rem;
			line-height: calc(24 / 16);
			margin-top: 21rem;
		}
		@media (width <= 767px) {/* SP */
			font-size: 11rem;
			letter-spacing: 1.1rem;
			line-height: calc(16.5 / 11);
			margin-top: 8rem;
		}
	}
}

/* =============================================================================
Project
============================================================================= */
.project {
	position: relative;
	@media (width > 767px) {/* PC */
		padding: 320rem 0 240rem;
		--side-label-top: 710rem;
		scroll-margin-top: -200rem;
	}
	@media (width <= 767px) {/* SP */
		padding: 180rem 17rem 60rem;
		--side-label-top: 60rem;
	}
	.project__header {
		text-align: center;
		margin: 0 auto;
		@media (width > 767px) {/* PC */
			margin-bottom: 80rem;
		}
		@media (width <= 767px) {/* SP */
			margin-bottom: 70rem;
		}
	}
	.project__title {
		font-family: var(--ff-paganini);
		font-weight: 300;
		margin: 0;
		line-height: calc(96.8 / 88);
		background-image: linear-gradient(90deg, #806E3D 0%, #B5A370 20%, #806E3D 30%, #B5A370 50%, #806E3D 70%, #B5A370 80%, #806E3D 100%);
		background-color: #161616;
		background-blend-mode: screen;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
		@media (width > 767px) {/* PC */
			font-size: 88rem;
			letter-spacing: 7.04rem;
		}
		@media (width <= 767px) {/* SP */
			font-size: 36rem;
			letter-spacing: 2.88rem;
		}
		b {
			font-weight: 300;
			@media (width > 767px) {/* PC */
			}
			@media (width <= 767px) {/* SP */
				font-size: 80rem;
			}
		}
		span {
			@media (width <= 767px) {/* SP */
				display: block;
				margin-top: -5rem;
			}
		}
	}
	.project__subtitle {
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		color: #7D6811;
		margin: 0;
		@media (width > 767px) {/* PC */
			font-size: 28rem;
			letter-spacing: 4rem;
			line-height: calc(50.4 / 28);
			margin-top: 20rem;
		}
		@media (width <= 767px) {/* SP */
			font-size: 16rem;
			letter-spacing: 3rem;
			line-height: calc(29 / 16);
			margin-top: 16rem;
		}
	}
	.project__description {
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		color: #4C4C4C;
		margin: 0;
		@media (width > 767px) {/* PC */
			font-size: 16rem;
			letter-spacing: 2.5rem;
			line-height: calc(35.2 / 16);
			margin-top: 32rem;
		}
		@media (width <= 767px) {/* SP */
			font-size: 13rem;
			letter-spacing: 2.5rem;
			line-height: calc(37.7 / 13);
			margin-top: 50rem;
		}
	}
	.side-label {
		top: var(--side-label-top);
		@media (width > 767px) {/* PC */
		}
		@media (width <= 767px) {/* SP */
			top: 0;
			right: -10rem;
		}
	}

	/* Grids
	----------------------------------------------------------------------------- */
	.project__big-grid {
		margin: 0 auto;
		@media (width > 767px) {/* PC */
			max-width: 1376rem;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 40rem;
			padding: 8rem; /* 8rem overhang area for icon */
		}
		@media (width <= 767px) {/* SP */
			position: relative;
			display: flex;
			flex-direction: column;
			gap: 34rem;
			padding: 0 10rem;
		}
	}
	.project__small-grid {
		margin: 0 auto;
		@media (width > 767px) {/* PC */
			margin-top: 40rem;
			max-width: 1439rem;
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			gap: 19rem;
			padding: 4rem; /* 4rem overhang area for icon */
		}
		@media (width <= 767px) {/* SP */
			margin-top: 45rem;
			display: flex;
			flex-direction: column;
			gap: 25rem;
			padding: 0 10rem;
		}
	}

	/* Card common
	----------------------------------------------------------------------------- */
	.project__card {
		position: relative;
		background-color: #fff;
		color: #4C4C4C;
		box-sizing: border-box;
		text-decoration: none;
		box-shadow: 7rem 7rem 12rem #00000010;
		@media(hover) {
			& {
				transition: opacity 0.2s;
			}
			&:hover {
				opacity: 0.7;
			}
			&:hover .project__card-border {
				border-width: 3px;
			}
		}
	}
	.project__card-border {
		position: absolute;
		inset: 0;
		border: 1px solid #AD9D68;
		box-sizing: border-box;
		pointer-events: none;
		@media(hover) {
			transition: border-width 0.2s;
		}
	}
	.project__card--big {
		@media (width > 767px) {/* PC */
			display: flex;
			min-height: 344rem;
		}
		@media (width <= 767px) {/* SP */
			display: flex;
			flex-direction: column;
		}
	}
	.project__card--small {
		@media (width > 767px) {/* PC */
			min-height: 242rem;
			padding: 48rem 19rem 24rem;
		}
		@media (width <= 767px) {/* SP */
			padding: 28rem 20rem 24rem;
		}
	}

	/* Number badge (top-left overhang)
	----------------------------------------------------------------------------- */
	.project__card-number {
		position: absolute;
		color: #fff;
		font-family: var(--ff-paganini);
		font-weight: 300;
		line-height: 1;
		display: flex;
		align-items: baseline;
		justify-content: center;
		z-index: 2;
		isolation: isolate;
		/* 下レイヤー: 斜め分割（左下 #A9744A / 右上 #806E3D） */
		background-color: #A9744A;
		background-image:
			/* 上レイヤー: ゴールドシマー（screen blend, 0.7透過） */
			linear-gradient(90deg,
				rgba(181,163,112,0.7) 0%,
				rgba(128,110,61,0.7) 50%,
				rgba(181,163,112,0.7) 100%),
			linear-gradient(to top right, #A9744A 49.9%, #806E3D 50.1%);
		background-blend-mode: screen, normal;
	}
	.project__card--big .project__card-number {
		display: flex;
		justify-content: center;
		align-items: center;
		@media (width > 767px) {/* PC */
			top: -8rem;
			left: -8rem;
			width: 60rem;
			height: 60rem;
			letter-spacing: 2.14rem;
		}
		@media (width <= 767px) {/* SP */
			top: -12rem;
			left: -12rem;
			width: 48rem;
			height: 48rem;
			letter-spacing: 1.7rem;
		}
	}
	.project__card--small .project__card-number {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 48rem;
		height: 48rem;
		letter-spacing: 1.7rem;
		@media (width > 767px) {/* PC */
			top: -4rem;
			left: -4rem;
		}
		@media (width <= 767px) {/* SP */
			top: -12rem;
			left: -12rem;
		}
	}
	/* 桁ごとのサイズ差（Figma: 1桁目が小さく2桁目が大きい） */
	.project__card-number > span {
		display: inline-block;
		line-height: 1;
	}
	.project__card--big .project__card-number > span:nth-child(1) {
		@media (width > 767px) {/* PC */
			font-size: 24rem;
		}
		@media (width <= 767px) {/* SP */
			font-size: 18rem;
		}
	}
	.project__card--big .project__card-number > span:nth-child(2) {
		@media (width > 767px) {/* PC */
			font-size: 32rem;
		}
		@media (width <= 767px) {/* SP */
			font-size: 24rem;
		}
	}
	.project__card--small .project__card-number > span:nth-child(1) {
		font-size: 18rem;
	}
	.project__card--small .project__card-number > span:nth-child(2) {
		font-size: 24rem;
	}

	/* Corner accents (top-right + bottom-left)
	----------------------------------------------------------------------------- */
	.project__card::before,
	.project__card::after {
		content: "";
		position: absolute;
		background-color: #AD9D68;
		pointer-events: none;
	}
	.project__card::before {
		top: -1px;
		right: -1px;
	}
	.project__card::after {
		bottom: -1px;
		left: -1px;
	}
	.project__card--big::before,
	.project__card--big::after {
		width: 28rem;
		height: 28rem;
		@media (width <= 767px) {/* SP */
			width: 20rem;
			height: 20rem;
		}
	}
	.project__card--small::before,
	.project__card--small::after {
		width: 14rem;
		height: 14rem;
	}
	.project__card--big::before,
	.project__card--small::before {
		clip-path: polygon(0 0, 100% 0, 100% 100%);
	}
	.project__card--big::after,
	.project__card--small::after {
		clip-path: polygon(0 0, 100% 100%, 0 100%);
	}

	/* Image area (big only)
	----------------------------------------------------------------------------- */
	.project__card-image {
		flex: 0 0 auto;
		overflow: hidden;
		@media (width > 767px) {/* PC */
			width: 328rem;
			height: 312rem;
			margin: 16rem 0 16rem 20rem;
			display: flex;
			align-items: center;
		}
		@media (width <= 767px) {/* SP */
			width: calc(100% - 20rem);
			aspect-ratio: 321 / 321;
			margin: 0 auto;
			margin-top: -12rem;
			margin-bottom: -35rem;
		}
		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}

	/* Body
	----------------------------------------------------------------------------- */
	.project__card-body {
		@media (width > 767px) {/* PC */
			flex: 1;
			padding: 36rem 10rem 24rem 0rem;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		@media (width <= 767px) {/* SP */
			padding: 4rem 20rem 40rem;
			display: flex;
			flex-direction: column;
		}
	}
	.project__card--small .project__card-body {
		@media (width > 767px) {/* PC */
			padding: 0;
			flex: 1;
		}
		@media (width <= 767px) {/* SP */
			padding: 0;
		}
	}
	.project__card-title {
		font-family: var(--ff-paganini);
		font-weight: 300;
		color: #A8975A;
		margin: 0;
		line-height: 1;
	}
	.project__card--big .project__card-title {
		text-align: center;
		@media (width > 767px) {/* PC */
			font-size: 40rem;
			letter-spacing: 3.2rem;
		}
		@media (width <= 767px) {/* SP */
			font-size: 30rem;
			letter-spacing: 2.4rem;
		}
	}
	.project__card--small .project__card-title {
		text-align: center;
		font-size: 30rem;
		letter-spacing: 2.4rem;
	}
	.project__card-desc {
		text-align: center;
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		color: #4C4C4C;
		margin: 0;
	}
	.project__card--big .project__card-desc {
		text-align: center;
		@media (width > 767px) {/* PC */
			font-size: 26rem;
			letter-spacing: 2.6rem;
			line-height: calc(41.6 / 26);
			margin-top: 24rem;
		}
		@media (width <= 767px) {/* SP */
			font-size: 22rem;
			letter-spacing: 2.9rem;
			line-height: calc(32.4 / 21);
			margin-top: 10rem;
		}
	}
	.project__card--small .project__card-desc {
		@media (width > 767px) {/* PC */
			font-size: 18rem;
			letter-spacing: 0.9rem;
			line-height: calc(32.4 / 18);
			margin-top: 20rem;
		}
		@media (width <= 767px) {/* SP */
			font-size: 13rem;
			letter-spacing: 2.0rem;
			line-height: calc(24.7 / 13);
			margin-top: 5rem;
		}
	}

	/* Link
	----------------------------------------------------------------------------- */
	.project__card-link {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 8rem;
		color: #A8975A;
		font-family: var(--ff-paganini);
		font-weight: 300;
		font-size: 12rem;
		letter-spacing: 2.4rem;
		line-height: 1;
		align-self: center;
		padding-bottom: 3rem;
		@media (width > 767px) {/* PC */
			margin-top: 30rem;
		}
		@media (width <= 767px) {/* SP */
			margin-top: 20rem;
		}
		&:after {
			content: "";
			display: block;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 1px;
			background-color: #A8975A;
		}
	}
	.project__card-link-arrow {
		display: inline-block;
		width: 8rem;
		height: 4rem;
		background: url(/cp10th-anniversary/assets/images/top/arrow-down.svg) no-repeat center / contain;
	}
}

/* =============================================================================
Project Content (10個の詳細セクション、PC専用、SPは別ページ予定)
============================================================================= */
.project-content {
	@media (width > 767px) {/* PC */
		max-width: 1280rem;
		margin: 0 auto;
		padding: 80rem 0 160rem;
		display: flex;
		flex-direction: column;
		gap: 80rem;
	}
	.project-content__item {
		display: flex;
		align-items: center;
		gap: 158rem;
	}
	.project-content__image {
		flex: 0 0 auto;
		width: 570rem;
		height: 570rem;
		display: flex;
		align-items: center;
		justify-content: center;
		img {
			display: block;
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
		}
		&.-type01 {
			@media (width > 767px) {/* PC */
				position: relative;
				left: 10rem;
			}
		}
		&.-type02 {
			@media (width > 767px) {/* PC */
				position: relative;
				left: 20rem;
			}
		}
	}
	.project-content__body {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 32rem;
		padding-top: 8rem;
	}
	#journey-detail {
		@media (width > 767px) {/* PC */
			align-items: flex-start;
			.project-content__image {
				position: sticky;
				top: 40rem;
			}
		}
	}
	.project-content__heading {
		position: relative;
		display: flex;
		align-items: center;
		gap: 8rem;
		@media (width > 767px) {/* PC */
			padding: 10rem 0 0 30rem;
		}
		@media (width <= 767px) {/* SP */
			justify-content: center;
			padding-top: 10rem;
		}
		&::after {
			content: "";
			display: block;
			width: 30rem;
			height: 30rem;
			flex: 0 0 auto;
			position: absolute;
			top: 0;
			left: 0;
			/* 右上-左下 ハイポテヌースの直角三角形 */
			clip-path: polygon(0 0, 100% 0, 0 100%);
			background-color: #AD9D68;
			background-image: linear-gradient(90deg, #806E3D 0%, #B5A370 50%, #806E3D 100%);
			background-blend-mode: screen;
		}
	}
	.project-content__title {
		font-family: var(--ff-paganini);
		font-weight: 300;
		font-size: 48rem;
		letter-spacing: 3.84rem;
		line-height: calc(52.8 / 48);
		margin: 0;
		background-image: linear-gradient(90deg, #806E3D 0%, #B5A370 20%, #806E3D 30%, #B5A370 50%, #806E3D 70%, #B5A370 80%, #806E3D 100%);
		background-color: #161616;
		background-blend-mode: screen;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
	.project-content__headline {
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		font-size: 24rem;
		letter-spacing: 2.4rem;
		line-height: calc(43.2 / 24);
		color: #4C4C4C;
		margin: 0;
		/* paltを無効化してFigma通りの字間に */
		font-feature-settings: normal;
	}
	.project-content__text {
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		line-height: calc(30.8 / 14);
		color: #4C4C4C;
		margin: 0;
		@media (width > 767px) {/* PC */
			font-size: 14rem;
			letter-spacing: 2.5rem;
		}
		@media (width <= 767px) {/* SP */
			font-size: 13rem;
			letter-spacing: 1.5rem;
			text-align: justify;
		}
	}
	.project-content__divider {
		width: 100%;
		height: 1rem;
		background-color: #D9D0B2;
	}
	.project-content__period {
		display: flex;
		flex-direction: column;
		gap: 16rem;
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		color: #4C4C4C;
	}
	.project-content__period-label {
		font-size: 16rem;
		letter-spacing: 1.6rem;
		line-height: 1;
	}
	.project-content__period-dates {
		font-size: 14rem;
		letter-spacing: 0.7rem;
		line-height: calc(26.6 / 14);
		@media (width <= 767px) {/* SP */
			font-size: 13rem;
			letter-spacing: 0.65rem;
			line-height: calc(24.7 / 13);
		}
	}
	.project-content__hotels {
		display: flex;
		flex-wrap: wrap;
		gap: 8rem;
		margin: 0;
		padding: 0;
		list-style: none;
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		font-size: 13rem;
		letter-spacing: 1.3rem;
		line-height: 1;
		a {
			display: inline-flex;
			align-items: center;
			padding: 8rem 16rem;
			border-radius: 999rem;
			background-color: #414155;
			color: #fff;
			text-decoration: none;
			@media(hover) {
				& {
					transition: opacity 0.2s;
				}
				&:hover {
					opacity: 0.8;
				}
			}
		}
	}
	.project-content__note {
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		font-size: 12rem;
		letter-spacing: 0.6rem;
		line-height: calc(18 / 12);
		color: #8C8C8C;
		margin: 0;
	}
	.project-content__note--award {
		@media (width <= 767px) {/* SP */
			text-align: center;
		}
	}
	.project-content__link {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		align-self: flex-start;
		min-width: 260rem;
		height: 48rem;
		padding: 0 20rem;
		border-radius: 40rem;
		background-color: #A9744A;
		color: #fff;
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		font-size: 14rem;
		letter-spacing: 0.7rem;
		line-height: 1;
		text-decoration: none;
		@media (width <= 767px) {/* SP */
			margin-left: auto;
			margin-right: auto;
		}
		@media(hover) {
			& {
				transition: opacity 0.2s;
			}
			&:hover {
				opacity: 0.8;
			}
		}
	}
	.project-content__back {
		align-self: center;
		display: inline-flex;
		align-items: center;
		gap: 20rem;
		padding: 12rem 40rem 12rem 16rem;
		background-color: #fff;
		border: 1rem solid #AA9964;
		border-radius: 104rem;
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		font-size: 14rem;
		letter-spacing: 0.7rem;
		line-height: 1;
		color: #AA9964;
		cursor: pointer;
		margin-top: 32rem;
		.project-content__back-arrow {
			display: block;
			width: 0;
			height: 0;
			border-top: 4rem solid transparent;
			border-bottom: 4rem solid transparent;
			border-right: 4rem solid #A8975A;
		}
	}

	/* Benefits (Section 1 only) */
	.project-content__benefits {
		display: flex;
		flex-direction: column;
		gap: 36rem;
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
	}
	.project-content__bn-label {
		font-size: 16rem;
		letter-spacing: 1.6rem;
		line-height: 1;
		color: #4C4C4C;
	}
	.project-content__bn-block {
		display: flex;
		flex-direction: column;
		@media (width > 767px) {/* PC */
			gap: 24rem;
		}
		@media (width <= 767px) {/* SP */
			gap: 16rem;
		}
	}
	.project-content__bn-banner {
		background-color: #9F934B;
		border-radius: 32rem;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		@media (width > 767px) {/* PC */
			align-self: flex-start;
			padding: 8rem 20rem;
		}
		@media (width <= 767px) {/* SP */
			padding: 6rem 12rem 7rem;
		}
	}
	.project-content__bn-banner-text {
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		line-height: 1;
		@media (width > 767px) {/* PC */
			font-size: 16rem;
			letter-spacing: 0.8rem;
		}
		@media (width <= 767px) {/* SP */
			font-size: 15rem;
			letter-spacing: 0.75rem;
		}
	}
	.project-content__bn-items {
		display: flex;
		@media (width > 767px) {/* PC */
			gap: 15rem;
		}
		@media (width <= 767px) {/* SP */
			flex-direction: column;
			gap: 0;
		}
	}
	.project-content__bn-items--pair {
		@media (width <= 767px) {/* SP */
			.project-content__bn-item + .project-content__bn-item {
				border-top: 1rem solid #DCDCDC;
				padding-top: 16rem;
				margin-top: 16rem;
			}
		}
	}
	.project-content__bn-item {
		display: flex;
		align-items: center;
		@media (width > 767px) {/* PC */
			gap: 16rem;
		}
		@media (width <= 767px) {/* SP */
			gap: 10rem;
		}
	}
	.project-content__bn-badge {
		flex: 0 0 auto;
		width: 56rem;
		height: 56rem;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3rem;
		color: #fff;
		box-sizing: border-box;
	}
	.project-content__bn-badge--outline {
		background-color: transparent;
		border: 1rem solid #9F934B;
		color: #9F934B;
	}
	.project-content__bn-badge--brown {
		background-color: #A9744A;
	}
	.project-content__bn-badge--navy {
		background-color: #414155;
	}
	.project-content__bn-badge-num {
		font-family: var(--ff-paganini);
		font-weight: 300;
		line-height: 1;
		.project-content__bn-badge--outline & {
			font-size: 20rem;
			letter-spacing: 1rem;
		}
		.project-content__bn-badge--brown &,
		.project-content__bn-badge--navy & {
			font-size: 16rem;
			letter-spacing: 0.8rem;
		}
	}
	.project-content__bn-badge-unit {
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		font-size: 12rem;
		letter-spacing: 0.6rem;
		line-height: 1;
	}
	.project-content__bn-item-info {
		display: flex;
		flex-direction: column;
		@media (width > 767px) {/* PC */
			gap: 8rem;
		}
		@media (width <= 767px) {/* SP */
			gap: 6rem;
		}
	}
	.project-content__bn-item-title {
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		font-size: 18rem;
		letter-spacing: 0.9rem;
		line-height: 1;
		color: #4C4C4C;
		margin: 0;
	}
	.project-content__bn-item-sub {
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		font-size: 12rem;
		letter-spacing: 0.6rem;
		line-height: 1;
		color: #4C4C4C;
		margin: 0;
	}
	.project-content__bn-item-meta {
		display: flex;
		align-items: center;
		gap: 6rem;
	}
	.project-content__bn-item-prize {
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		font-size: 12rem;
		letter-spacing: 0.6rem;
		line-height: 1;
		color: #4C4C4C;
	}
	.project-content__bn-item-slots {
		background-color: #fff;
		border: 1rem solid #4C4C4C;
		border-radius: 2rem;
		font-family: var(--ff-shippori-mincho);
		font-weight: 500;
		font-size: 12rem;
		letter-spacing: 0.6rem;
		line-height: 1;
		color: #4C4C4C;
		@media (width > 767px) {/* PC */
			padding: 2rem 6rem 3rem;
		}
		@media (width <= 767px) {/* SP */
			padding: 1rem 6rem 2rem;
		}
	}
	.project-content__bn-award {
		border-top: 1rem dotted #89772F;
		padding-top: 24rem;
	}
	.project-content__bn-award-link {
		display: block;
		img {
			display: block;
			width: 100%;
			height: auto;
		}
	}
}

/* =============================================================================
Project Lightbox (SP時、project__cardクリックで詳細を表示するモーダル)
HTML: index.php の <div class="project-lightbox" id="project-lightbox">
============================================================================= */
.project-lightbox {
	position: fixed;
	inset: 0;
	z-index: 2000;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	&.is-open {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transition: opacity 0.3s ease, visibility 0s linear 0s;
	}
	.project-lightbox__overlay {
		position: absolute;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.project-lightbox__body {
		position: absolute;
		top: 40rem;
		bottom: 40rem;
		left: 5rem;
		right: 5rem;
		background-color: #fff;
		border-radius: 8rem;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 50rem 20rem 40rem;
		box-sizing: border-box;
		transform: translateY(20rem);
		transition: transform 0.3s ease;
	}
	&.is-open .project-lightbox__body {
		transform: translateY(0);
	}
	.project-lightbox__close {
		position: absolute;
		top: 28rem;
		right: 8rem;
		width: 40rem;
		height: 40rem;
		padding: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
		z-index: 1;
		&::before,
		&::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			width: 20rem;
			height: 1rem;
			background-color: #4C4C4C;
		}
		&::before {
			transform: translate(-50%, -50%) rotate(45deg);
		}
		&::after {
			transform: translate(-50%, -50%) rotate(-45deg);
		}
	}
	/* 詳細コンテンツをSPレイアウトに調整（.project-contentの子要素スタイル流用） */
	.project-content {
		display: flex;
		flex-direction: column;
		gap: 24rem;
	}
	.project-content__item {
		flex-direction: column;
		align-items: stretch;
		gap: 24rem;
	}
	@media (width <= 767px) {/* SP */
		.project-content__body {
			display: contents;
		}
		.project-content__heading {
			order: -1;
		}
	}
	.project-content__image {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		@media (width <= 767px) {/* SP */
			margin-top: -39rem;
			margin-bottom: -20rem;
		}
	}
	.project-content__body {
		gap: 20rem;
		padding-top: 0;
	}
	.project-content__title {
		@media (width > 767px) {/* PC */
			font-size: 32rem;
			letter-spacing: 2.5rem;
		}
		@media (width <= 767px) {/* SP */
			font-size: 48rem;
			letter-spacing: 2.5rem;
		}
	}
	.project-content__headline {
		letter-spacing: 1.8rem;
		line-height: calc(32.4 / 18);
		@media (width > 767px) {/* PC */
			font-size: 18rem;
		}
		@media (width <= 767px) {/* SP */
			font-size: 22rem;
			text-align: center;
		}
	}
}

/* =============================================================================
Bnrbox (フッター上のロゴ + プロモーション + 各ホテルサイトへのリンク)
============================================================================= */
.bnrbox {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	@media (width > 767px) {/* PC */
		gap: 95rem;
		padding: 140rem 0 120rem;
	}
	@media (width <= 767px) {/* SP */
		gap: 60rem;
		padding: 120rem 40rem 60rem;
	}
	.bnrbox__bg {
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background-image: linear-gradient(180deg, #f3f2e9 0%, transparent 100%);
		@media (width > 767px) {/* PC */
			top: -200rem;
			clip-path: url(#bnrbox-bg-clip-pc);
		}
		@media (width <= 767px) {/* SP */
			clip-path: url(#bnrbox-bg-clip-sp);
		}
	}
	.bnrbox__decor {
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		overflow: hidden;
		@media (width > 767px) {/* PC */
			top: -380rem;
		}
		@media (width <= 767px) {/* SP */
			top: -100rem;
		}
	}
	.bnrbox__decor-svg {
		display: block;
		position: relative;
		overflow: visible;
		@media (width > 767px) {/* PC */
			left: -15%;
		}
		@media (width <= 767px) {/* SP */
			left: -12%;
		}
		.st0 {
			fill: none;
			stroke: #b28f4e;
			stroke-opacity: .2;
			stroke-linecap: round;
			stroke-linejoin: round;
			stroke-dasharray: 1 1;
			stroke-dashoffset: 1;
		}
		&._pc {
			width: 2022px;
			height: 1437px;
			.st0 { stroke-width: 4px; }
		}
		&._sp {
			width: 427px;
			height: 853px;
			.st0 { stroke-width: 2px; }
		}
	}
	.bnrbox__decor-curve {
		position: absolute;
		display: block;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		svg {
			display: block;
			width: 100%;
			height: auto;
			overflow: visible;
		}
		path {
			fill: #BF9D6D;
			fill-opacity: 0;
			stroke: #BF9D6D;
			stroke-opacity: 0.25;
			stroke-width: 1;
			stroke-dasharray: 0 1;
			stroke-dashoffset: 0.5;
			animation:
				draw-message-curve 4s ease-out 0.3s forwards,
				fill-message-curve 1s ease-in 4.3s forwards,
				hide-message-stroke 0.6s ease-out 5.3s forwards;
		}
		@media (width > 767px) {/* PC */
			width: 2010rem;
		}
		@media (width <= 767px) {/* SP */
			width: 422rem;
		}
	}
	.bnrbox__logo,
	.bnrbox__promos,
	.bnrbox__hotels {
		position: relative;
		z-index: 1;
	}
	.bnrbox__logo {
		display: block;
		width: auto;
		@media (width > 767px) {/* PC */
			height: 339rem;
		}
		@media (width <= 767px) {/* SP */
			height: 235rem;
		}
	}
	.bnrbox__promos {
		display: flex;
		@media (width > 767px) {/* PC */
			gap: 34rem;
		}
		@media (width <= 767px) {/* SP */
			flex-direction: column;
			gap: 12rem;
			width: 100%;
			box-sizing: border-box;
		}
	}
	.bnrbox__promo {
		display: block;
		border-radius: 16rem;
		overflow: hidden;
		@media (width > 767px) {/* PC */
			width: 340rem;
		}
		@media (width <= 767px) {/* SP */
			width: 100%;
		}
		img {
			display: block;
			width: 100%;
			height: auto;
			object-fit: cover;
		}
		@media(hover) {
			& {
				transition: opacity 0.2s;
			}
			&:hover {
				opacity: 0.85;
			}
		}
	}
	.bnrbox__hotels {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16rem;
		width: 100%;
	}
	.bnrbox__hotels-row {
		display: flex;
		justify-content: center;
		gap: 16rem;
		@media (width <= 767px) {/* SP */
			flex-wrap: wrap;
			width: 100%;
		}
		a {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 999rem;
			background-color: #414155;
			color: #fff;
			font-family: var(--ff-shippori-mincho);
			font-weight: 500;
			letter-spacing: 0.7rem;
			line-height: 1;
			text-decoration: none;
			@media (width > 767px) {/* PC */
				width: 260rem;
				height: 48rem;
				font-size: 14rem;
			}
			@media (width <= 767px) {/* SP */
				height: 44rem;
				font-size: 12rem;
				letter-spacing: 0.6rem;
			}
			@media(hover) {
				& {
					transition: opacity 0.2s;
				}
				&:hover {
					opacity: 0.8;
				}
			}
		}
	}
	.bnrbox__hotels-row--president a {
		@media (width <= 767px) {/* SP */
			width: 100%;
		}
	}
	.bnrbox__hotels-row--regular a {
		@media (width <= 767px) {/* SP */
			width: calc(50% - 8rem);
		}
	}
}

/* =============================================================================
SP ページ内リンクのスクロール停止位置調整
============================================================================= */
@media (width <= 767px) {/* SP */
	:where(#message) {
		scroll-margin-top: 0;
	}
	:where(#concept) {
		scroll-margin-top: 40rem;
	}
	:where(#project) {
		scroll-margin-top: -100rem;
	}
	:where(#journey, #stay, #welcome, #local, #memory, #thanks, #morning, #smile, #movie, #connect) {
		scroll-margin-top: 70rem;
	}
	:where(#banner) {
		scroll-margin-top: -20rem;
	}
}