/**
 * Front page — UNVEIL（エアリーな前回トーン × ベント配置 + セラピスト一覧）
 * 額装ヒーロー / CONCEPT分割 / THERAPIST一覧 / ベントナビ（写真カード）。
 * 写真に無地クリームのスラブは敷かない。テキストは写真の下・クリーム面に置く。
 */

:root {
	--uv-gold: #a8895a;
	--uv-ink: #4a4238;
	--uv-ink-sub: #6a6155;
	--uv-border: #ddd3c2;
	--uv-panel: #faf7f1;
}

/* 共通ラベル */
.uv-label {
	font-family: var(--font-serif-en);
	font-size: clamp(17px, 1.6vw, 24px);
	letter-spacing: 0.22em;
	color: var(--uv-gold);
	margin: 0 0 5px;
	font-weight: 500;
}
.uv-label__jp {
	font-family: var(--font-serif-jp);
	font-size: 11px;
	letter-spacing: 0.26em;
	color: #8b8177;
	margin: 0;
}

/* ===================== 額装ヒーロー ===================== */
.uv-hero-band {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(18px, 3vw, 44px) clamp(14px, 2.4vw, 34px) 0;
	text-align: center;
}
.uv-hero-band__frame {
	position: relative;
	padding: clamp(10px, 1.1vw, 16px);
	background: #efe6d6;
	border: 1px solid rgba(168, 137, 90, 0.55);
}
.uv-hero-band__frame::before {
	content: "";
	position: absolute;
	inset: clamp(10px, 1.1vw, 16px);
	border: 1px solid rgba(168, 137, 90, 0.35);
	pointer-events: none;
}
.uv-hero-band__media {
	height: clamp(340px, 40vw, 520px);
	background-image: var(--uv-bg);
	background-size: cover;
	background-position: center 44%;
}
.uv-hero-band__catch {
	font-family: var(--font-serif-jp);
	font-size: clamp(13px, 1.2vw, 16px);
	letter-spacing: 0.22em;
	color: #8a7350;
	margin: clamp(16px, 2vw, 26px) 0 0;
}

/* ===================== ベント共通コンテナ ===================== */
.uv-bento {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(14px, 2.2vw, 28px) clamp(14px, 2.4vw, 34px);
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 14px;
}
.uv-cell {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	color: var(--uv-ink);
}

/* --- CONCEPT（クリームパネル＋写真の分割・フル幅） --- */
.uv-bento--concept { padding-top: clamp(20px, 3vw, 40px); padding-bottom: 0; }
.uv-concept {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	background: var(--uv-panel);
	border: 1px solid var(--uv-border);
	min-height: clamp(300px, 30vw, 400px);
}
.uv-concept__text {
	padding: clamp(24px, 3vw, 48px) clamp(22px, 2.6vw, 44px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.uv-rule {
	display: block;
	width: 34px; height: 1px;
	background: #c3a877;
	margin: 14px 0 18px;
}
.uv-concept__body p {
	font-family: var(--font-serif-jp);
	font-size: clamp(12px, 0.95vw, 14px);
	line-height: 2;
	letter-spacing: 0.04em;
	color: #5a5145;
	margin: 0 0 12px;
}
.uv-concept__sign { color: #8a7350; font-size: 12.5px; letter-spacing: 0.08em; }
.uv-concept__media {
	background-image: var(--uv-bg);
	background-size: cover;
	background-position: center;
}

/* ===================== THERAPIST 一覧 ===================== */
.uv-therapist-sec {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(20px, 3vw, 40px) clamp(14px, 2.4vw, 34px) clamp(10px, 2vw, 22px);
}
.uv-therapist-sec__banner {
	height: clamp(200px, 24vw, 320px);
	background-image: var(--uv-bg);
	background-size: cover;
	background-position: center 42%;
	border: 1px solid var(--uv-border);
}
.uv-sec-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin: clamp(22px, 3vw, 38px) 0 clamp(18px, 2.4vw, 30px);
}
.uv-sec-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-serif-en);
	font-size: 12px;
	letter-spacing: 0.18em;
	color: var(--uv-ink);
	text-decoration: none;
	white-space: nowrap;
}
.uv-sec-more:hover { color: var(--uv-gold); }
.uv-sec-more .uv-more__arrow { transition: transform 0.4s ease; }
.uv-sec-more:hover .uv-more__arrow { transform: translateX(4px); }

.uv-therapist-cards {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(12px, 1.4vw, 22px);
}

/* ===================== ベントナビ（写真カード） ===================== */
.uv-bento--nav {
	padding-top: clamp(10px, 2vw, 20px);
	padding-bottom: clamp(24px, 4vw, 56px);
	grid-template-areas:
		"system system system system system system option option option option option option"
		"access access access access reservation reservation reservation reservation faq faq faq faq";
}
.uv-system      { grid-area: system; }
.uv-option      { grid-area: option; }
.uv-access      { grid-area: access; }
.uv-reservation { grid-area: reservation; }
.uv-faq         { grid-area: faq; }

.uv-tile {
	display: flex;
	flex-direction: column;
	background: var(--uv-panel);
	border: 1px solid var(--uv-border);
}
.uv-tile__photo {
	position: relative;
	height: clamp(170px, 16vw, 220px);
	overflow: hidden;
}
.uv-tile__photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--uv-bg);
	background-size: cover;
	background-position: center;
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.uv-tile:hover .uv-tile__photo::before { transform: scale(1.05); }

.uv-tile__inner {
	flex: 1;
	padding: clamp(18px, 1.8vw, 26px) clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 28px);
	display: flex;
	flex-direction: column;
}
.uv-tile__desc {
	font-family: var(--font-serif-jp);
	font-size: clamp(11.5px, 0.9vw, 13px);
	line-height: 1.9;
	letter-spacing: 0.03em;
	color: #5a5145;
	margin: 12px 0 18px;
}

/* VIEW MORE（前回のアウトライン） */
.uv-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	margin-top: auto;
	font-family: var(--font-serif-en);
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--uv-ink);
	padding: 9px 20px;
	border: 1px solid rgba(168, 137, 90, 0.6);
	transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.uv-cell:hover .uv-more {
	background: var(--uv-gold);
	color: #fff;
	border-color: transparent;
}
.uv-more__arrow { transition: transform 0.4s ease; }
.uv-cell:hover .uv-more__arrow { transform: translateX(4px); }
.uv-more--dark { margin-top: 20px; }

/* FAQ（写真なし・シルク地） */
.uv-faq {
	background: linear-gradient(135deg, #f6efe2 0%, #ece1cd 100%);
}
.uv-faq .uv-tile__inner { justify-content: center; }

/* ===================== タブレット ===================== */
@media (max-width: 1024px) {
	.uv-therapist-cards { grid-template-columns: repeat(3, 1fr); }
	.uv-bento--nav {
		grid-template-areas:
			"system system system system system system option option option option option option"
			"access access access access access access reservation reservation reservation reservation reservation reservation"
			"faq faq faq faq faq faq faq faq faq faq faq faq";
	}
}

/* ===================== モバイル ===================== */
@media (max-width: 680px) {
	.uv-concept { grid-template-columns: 1fr; min-height: 0; }
	.uv-concept__media { min-height: 200px; order: -1; }
	.uv-hero-band__media { height: 300px; }
	.uv-therapist-cards { grid-template-columns: repeat(2, 1fr); }
	.uv-bento--nav {
		grid-template-columns: 1fr;
		grid-template-areas: "system" "option" "access" "reservation" "faq";
	}
	.uv-therapist-sec__banner { height: 200px; }
}