/* ==========================================================================
   page-top.css — TOP（PC 202:1139／SP 210:2796）
   値の出どころは docs/figma-cache/top.md。レイアウトは spec-responsive.md 4章
   ========================================================================== */

/* セクション見出しと中身の間 */
.p-top-why__list,
.p-top-concerns__list,
.p-top-ba__list,
.p-top-comparison__body,
.p-top-flow__list,
.p-top-staff__list,
.p-top-voice__rating,
.p-top-access__map,
.c-menu-list {
	margin-top: var(--space-block);
}

/* SP のセクション上下は 80px（Figma SP）。TAB 以上は 120px */
.p-top-concerns,
.p-top-ba,
.p-top-comparison,
.p-top-menu,
.p-top-flow,
.p-top-voice,
.p-top-faq,
.p-top-access,
.p-top-news,
.p-top-blog {
	padding-block: 80px;
}

@media (min-width: 768px) {
	.p-top-concerns,
	.p-top-ba,
	.p-top-comparison,
	.p-top-menu,
	.p-top-flow,
	.p-top-voice,
	.p-top-faq,
	.p-top-access,
	.p-top-news,
	.p-top-blog {
		padding-block: var(--space-section);
	}
}

/* ==========================================================================
   KV
   ========================================================================== */
.p-top-kv {
	position: relative;
	isolation: isolate;
	display: flex;
	min-height: calc(667px - var(--header-h)); /* Figma SP 1163:1963 は 667px（ヘッダー込み。写真の枠は 390×603：10/13 FB No.97） */
	overflow: hidden;
	background: var(--color-bg-divider);
	color: var(--color-white);
}

.p-top-kv__slides,
.p-top-kv__slide {
	position: absolute;
	inset: 0;
}

.p-top-kv__slides {
	z-index: -2;
}

.p-top-kv__slide {
	opacity: 0;
	transition: opacity 1.2s ease;
}

.p-top-kv__slide.is-active {
	opacity: 1;
}

.p-top-kv__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 表示中のスライドだけ、ゆっくりズーム（10/13 先方要望。--anim-kv-scale・--anim-kv-dur）。
   assets/js/anim.js が読み込み直後に is-zoom を付ける（1枚目も 1 から始まるように）。
   外れたスライドは、フェードアウト（.p-top-kv__slide の 1.2s）が終わってから一瞬で 1 に戻す（消えていく途中で縮まない）。
   はみ出しは .p-top-kv の overflow: hidden で隠れる。切り替えの間隔・クロスフェードは変えていない */
.js .p-top-kv__img {
	transition: transform 0s linear 1.2s;
}

.js .p-top-kv.is-zoom .p-top-kv__slide.is-active .p-top-kv__img {
	transform: scale(var(--anim-kv-scale));
	transition: transform var(--anim-kv-dur) linear;
}

@media (prefers-reduced-motion: reduce) {
	.js .p-top-kv.is-zoom .p-top-kv__slide.is-active .p-top-kv__img {
		transform: none;
		transition: none;
	}
}

/* SP：写真の上のスクリム（下が濃い縦のグラデーション。10/13 FB No.98・Figma 1163:1966「Scrim (bottom-heavy, vertical)」）。
   KV はヘッダーの下から始まるので、KV の上端から下端まで（＝ヘッダーの下 64px 〜 KV の下端。高さは固定しない）。
   角度・位置は Figma の値のまま（52% から下が同じ濃さなのも Figma どおり）。文字・ボタンを押せるよう pointer-events: none */
.p-top-kv::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(188.08deg, rgb(80 48 24 / 0) 10.07%, rgb(80 48 24 / 0.2) 22.55%, rgb(80 48 24 / 0.8) 51.74%);
	pointer-events: none;
}

/* SP：文字の塊と一時停止ボタンの間は 17px（Figma 1051:1622／1051:1633。10/12 夜にラベルが2行になり、見出し以下が下がった位置） */
.p-top-kv__inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 17px;
	width: 100%;
	padding: 48px max(24px, calc(var(--gutter) - 40px)) 43px;
}

.p-top-kv__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	max-width: 528px;
}

/* 写真の上の文字の影（10/13 FB No.99。Figma の PC・SP とも、ラベル・見出し・リードに同じ効果） */
.p-top-kv__label,
.p-top-kv__title,
.p-top-kv__lead {
	text-shadow: var(--kv-text-shadow);
}

.p-top-kv__label {
	font-family: var(--ff-en);
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: 0.2em;
}

.p-top-kv__title {
	font-family: var(--ff-mincho);
	font-size: var(--fs-kv);
	line-height: var(--lh-kv);
	letter-spacing: var(--ls-kv);
	white-space: nowrap;
}

.p-top-kv__lead {
	max-width: 266px;
	color: rgb(255 255 255 / 0.88);
	font-size: var(--fs-body-xs);
	line-height: 1.8;
	letter-spacing: 0;
}

.p-top-kv__cta {
	width: 100%;
	max-width: 265px;
	padding-top: 20px;
}

.p-top-kv__cta .c-btn {
	width: 100%;
	min-height: 52px;
	padding-block: 15px;
}

.p-top-kv__controls {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* 一時停止・再生（ホバー一覧 636:1363 の「08」）：32×32、白枠70% → ホバーで白塗り×#1C1B18 */
.p-top-kv__toggle {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid rgb(255 255 255 / 0.7);
	border-radius: 50%;
	color: var(--color-white);
	transition: background-color var(--duration), color var(--duration);
}

.p-top-kv__toggle[hidden] {
	display: none;
}

.p-top-kv__toggle:hover {
	background: var(--color-white);
	color: var(--color-text);
}

.p-top-kv__toggle-pause,
.p-top-kv__toggle-play {
	line-height: 0;
}

.p-top-kv__toggle-play {
	display: none;
	margin-left: 1px; /* 三角形の重心を円の中心に合わせる（Figma 708:1322：三角形は x13〜22） */
}

.p-top-kv__toggle.is-paused .p-top-kv__toggle-pause {
	display: none;
}

.p-top-kv__toggle.is-paused .p-top-kv__toggle-play {
	display: block;
}

.p-top-kv__dots {
	display: flex;
	align-items: center;
	gap: 10px;
}

.p-top-kv__dot {
	width: 15px;
	height: 2px;
	background: var(--color-white);
	opacity: 0.45;
	transition: width var(--duration), opacity var(--duration);
}

.p-top-kv__dot.is-active {
	width: 30px;
	opacity: 1;
}

@media (min-width: 768px) {
	.p-top-kv {
		min-height: 640px;
	}

	/* TAB 以上：左→右にブランド色のグラデーション（Figma PC：不透明度60%） */
	.p-top-kv::before {
		background:
			linear-gradient(90deg, rgb(80 48 24) 32.2%, rgb(80 48 24 / 0.15) 63.9%, rgb(80 48 24 / 0.13) 75%, rgb(80 48 24 / 0) 88.5%),
			rgb(231 227 218 / 0.18);
		opacity: 0.6;
	}

	.p-top-kv__inner {
		gap: 30px;
		padding-block: 64px 80px;
	}

	.p-top-kv__copy {
		gap: 0;
	}

	.p-top-kv__label {
		padding-block: 9px;
		font-size: 14px;
		letter-spacing: 0.24em;
	}

	.p-top-kv__title {
		padding-bottom: 30px;
	}

	.p-top-kv__lead {
		max-width: none;
		color: var(--color-white);
		font-size: 18px;
		font-weight: 500;
		line-height: 1.9;
		letter-spacing: var(--ls-body);
	}

	.p-top-kv__cta {
		max-width: none;
		padding-top: 30px;
	}

	.p-top-kv__cta .c-btn {
		width: min(var(--btn-max), 100%);
		min-height: 65px;
		padding-block: 21px;
	}
}

/* TAB：SP 用の画像（780×1400）を横長の枠に入れるため、上下が切れる。スライドごとに見せる高さを変える（10/12。tab_y） */
@media (min-width: 768px) and (max-width: 1099px) {
	.p-top-kv__img {
		object-position: 50% var(--kv-tab-y, 50%);
	}
}

@media (min-width: 1100px) {
	.p-top-kv {
		min-height: 800px;
	}
}

/* ==========================================================================
   Why NOBOBO（ブランド色の背景）
   ========================================================================== */
.p-top-why {
	padding-block: var(--space-section-strong);
	background: var(--color-brand);
}

.p-top-why__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

.p-top-why__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--color-white);
}

.p-top-why__photo {
	aspect-ratio: 342 / 200;
	overflow: hidden;
}

.p-top-why__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-top-why__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 24px 28px;
}

.p-top-why__num {
	color: var(--color-brand);
	font-family: var(--ff-en);
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 0.24em;
}

.p-top-why__title {
	font-family: var(--ff-mincho);
	font-size: var(--fs-display-s);
	line-height: var(--lh-display-s);
	letter-spacing: var(--ls-display-s);
	word-break: keep-all; /* <wbr> の位置でだけ折り返す（10/12） */
	overflow-wrap: anywhere;
}

/* TAB：1列の横組み（画像40%／テキスト60%） */
@media (min-width: 768px) {
	.p-top-why__card {
		flex-direction: row;
	}

	.p-top-why__photo {
		flex: 0 0 40%;
		aspect-ratio: auto;
		min-height: 240px;
	}

	.p-top-why__body {
		flex: 1;
		min-width: 0;
		justify-content: center;
		gap: 16px;
		padding: 32px;
	}

	.p-top-why__num {
		font-size: 13px;
		letter-spacing: 0.2em;
	}
}

/* PC：3列カード */
@media (min-width: 1100px) {
	/* 1100px 付近はカードが狭いため、間隔・余白・見出しを 1440px の値まで滑らかに広げる */
	.p-top-why__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(24px, calc(4.706vw - 27.8px), 40px);
	}

	.p-top-why__card {
		flex-direction: column;
	}

	.p-top-why__photo {
		flex: none;
		aspect-ratio: 347 / 280;
		min-height: 0;
	}

	.p-top-why__body {
		justify-content: flex-start;
		padding: 32px clamp(24px, calc(2.353vw - 1.9px), 32px) 40px;
	}

	.p-top-why__title {
		font-size: clamp(18px, calc(1.176vw + 5.06px), 22px);
	}
}

/* ==========================================================================
   Concerns
   ========================================================================== */
.p-top-concerns__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: var(--content-narrow);
	margin-inline: auto;
}

.p-top-concerns__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px;
	border-radius: var(--radius-card);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.p-top-concerns__item .c-icon {
	color: var(--color-brand);
}

.p-top-concerns__item span {
	min-width: 0;
}

@media (min-width: 768px) {
	.p-top-concerns__list {
		gap: 16px;
	}

	.p-top-concerns__item {
		gap: 18px;
		padding: 26px 32px;
	}
}

/* ==========================================================================
   Before & After
   ========================================================================== */
.p-top-ba__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 14px;
}

.p-top-ba__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.p-top-ba__photos {
	display: flex;
	flex-direction: column;
	background: var(--color-white);
}

.p-top-ba__photo {
	position: relative;
	aspect-ratio: 259 / 150;
	overflow: hidden;
}

.p-top-ba__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-top-ba__label {
	position: absolute;
	top: 8px;
	left: 10px;
	color: var(--color-white);
	font-family: var(--ff-en);
	font-size: 11px;
	line-height: normal;
	letter-spacing: 0.1em;
}

.p-top-ba__text {
	font-size: var(--fs-body-xs);
	line-height: var(--lh-body-xs);
	letter-spacing: var(--ls-body-xs);
}

@media (min-width: 768px) {
	.p-top-ba__list {
		gap: 32px 24px;
	}

	.p-top-ba__card {
		gap: 16px;
	}

	.p-top-ba__label {
		top: 13px;
		left: 15px;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: 0.2em;
	}

	.p-top-ba__text {
		font-size: var(--fs-body);
		line-height: var(--lh-body);
		letter-spacing: var(--ls-body);
	}
}

@media (min-width: 1100px) {
	.p-top-ba__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 28px;
	}
}

/* ==========================================================================
   Comparison（Figma PC 202:1248／SP 210:2888。10/13 FB No.101）
   - 列の順は「項目｜NOBOBO｜セルフ｜一般の美容室」（HTML の順）。NOBOBO の見出しは薄い地＋上辺にブラウンの太い線＋ブラウンの文字
   - TAB・SP は表の外枠だけを横スクロール（白い箱は敷かず、右は画面の端まで）。表の上にピル（横にスワイプで比較）・下に茶色の進捗バー
   - 文字の大きさ・余白は Figma のまま（16px・上下 26px）。セルの文字は上揃え（Figma）
   ========================================================================== */
.p-top-comparison {
	background: var(--color-bg-base);
}

.p-top-comparison__scroll {
	position: relative; /* 中の absolute の要素（ピル）でページを横に広げない（MENU のオプション表と同じ） */
	margin-right: calc(var(--gutter) * -1); /* SP・TAB：右は画面の端まで（Figma 227:186） */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.p-top-comparison__table {
	width: 100%;
	min-width: 966px; /* SP・TAB：128＋238＋300＋300（Figma 550:1180） */
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: 0.04em;
}

.p-top-comparison__col-head {
	width: 128px;
}

.p-top-comparison__col-ours {
	width: 238px;
}

.p-top-comparison__table th,
.p-top-comparison__table td {
	padding: 26px 20px;
	border-bottom: 1px solid var(--color-line-weak);
	color: var(--color-muted);
	font-weight: 400;
	text-align: center;
	vertical-align: top;
}

.p-top-comparison__table thead th,
.p-top-comparison__table thead td {
	padding-block: 22px;
	border-bottom-color: var(--color-line-strong);
}

/* 項目の列：SP・TAB は左右 12px（Figma 550:1191） */
.p-top-comparison__table tbody th,
.p-top-comparison__table thead td {
	padding-inline: 12px;
}

.p-top-comparison__table tbody th {
	color: var(--color-text);
	text-align: left;
}

.p-top-comparison__table .p-top-comparison__ours {
	background: var(--color-accent-tint);
	color: var(--color-text);
}

/* NOBOBO の見出し：薄い地＋上辺にブラウンの 4px の線＋ブラウンの文字（Figma 202:1260）。
   書体は Jost（英字。指示・CLAUDE.md 7章。Figma は Noto Sans JP Bold）。線はセルの内側に引く（表の外にはみ出さない） */
.p-top-comparison__table thead .p-top-comparison__ours {
	padding-top: 26px; /* 22px＋線 4px */
	box-shadow: inset 0 4px 0 var(--color-brand);
	color: var(--color-brand);
	font-family: var(--ff-en);
	font-size: 18px;
	font-weight: 500; /* Jost は 400・500 だけ読み込む（CLAUDE.md 3章の11） */
	line-height: 1.6;
	letter-spacing: 0.2em;
}

/* 横にスワイプで比較（Figma 1174:1634）。表の上、画面の中央に重ねる。指が通るよう pointer-events: none。最初のスワイプで消える（main.js） */
.p-top-comparison__hint {
	position: absolute;
	top: 46%;
	left: calc(50% - var(--gutter) / 2); /* 枠は右の余白ぶん広いので、画面の中央に合わせる */
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px 12px 18px;
	border-radius: 999px;
	background: var(--color-bg-dark);
	color: var(--color-white);
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.06em;
	white-space: nowrap;
	pointer-events: none;
	transform: translate(-50%, -50%);
	transition: opacity var(--duration);
}

.p-top-comparison__hint[hidden] {
	display: none;
}

.p-top-comparison__hint.is-leaving {
	opacity: 0;
}

/* 手のアイコンは左右に小さく揺れる（Figma のレイヤー名「左右に揺れるアニメ」）。動きを減らす設定ではピル自体を出さない（main.js） */
.p-top-comparison__hint-hand {
	display: flex;
	animation: p-top-comparison-hand 1.6s ease-in-out infinite;
}

@keyframes p-top-comparison-hand {
	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(4px);
	}
}

@media (min-width: 1100px) {
	.p-top-comparison__scroll {
		margin-right: 0;
	}

	.p-top-comparison__table {
		min-width: 880px; /* 1100〜1119px だけ横スクロール（いままでどおり） */
	}

	/* PC：項目 220px・NOBOBO 300px・残りを2等分（Figma 202:1254・202:1260） */
	.p-top-comparison__col-head {
		width: 220px;
	}

	.p-top-comparison__col-ours {
		width: 300px;
	}

	.p-top-comparison__table tbody th,
	.p-top-comparison__table thead td {
		padding-inline: 20px;
	}
}

/* ==========================================================================
   Menu（表は components.css の .c-menu-list）
   ========================================================================== */
.p-top-menu {
	background: var(--color-bg-mid);
}

/* 注記（Figma 876:1208／202:1378。オープン記念価格の期間・割引額は設定から：FB No.32・33） */
.p-top-menu__notes {
	margin-top: 32px;
	color: var(--color-muted);
	font-size: var(--fs-note);
	line-height: 1.8;
	letter-spacing: 0.06em;
}

/* ALL MENU（副次）の地は白（Figma 339:271）。ホバーは components.css の「ホバー（役割別）」 */
.p-top-menu {
	--btn-secondary-bg: var(--color-white);
}

@media (min-width: 768px) {
	.p-top-menu__notes {
		margin-top: var(--space-block);
		font-size: var(--fs-body-xs);
		letter-spacing: var(--ls-body-xs);
	}

	.p-top-menu__cta {
		gap: 30px;
		margin-top: 60px;
	}
}

/* ==========================================================================
   Flow
   ========================================================================== */
.p-top-flow__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.p-top-flow__step {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 108px;
}

.p-top-flow__circle {
	flex-shrink: 0;
	width: 84px;
	height: 84px;
	overflow: hidden;
	border: 1px solid var(--color-line-strong);
	border-radius: 50%;
	background: var(--color-bg-divider);
}

/* 丸枠の写真（10/12）。枠いっぱいに表示 */
.p-top-flow__circle img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-top-flow__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.p-top-flow__num {
	color: var(--color-brand);
	font-family: var(--ff-en);
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 0.24em;
	white-space: nowrap;
}

.p-top-flow__title {
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
	text-wrap: pretty;
}

.p-top-flow__text {
	color: var(--color-muted);
	font-size: var(--fs-body-xs);
	line-height: var(--lh-body-xs);
	letter-spacing: var(--ls-body-xs);
}

/* TAB：3列×2段／PC：6列 */
@media (min-width: 768px) {
	.p-top-flow__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 48px 24px;
	}

	.p-top-flow__step {
		flex-direction: column;
		gap: 16px;
		min-height: 0;
		text-align: center;
	}

	.p-top-flow__circle {
		width: 120px;
		height: 120px;
	}

	.p-top-flow__body {
		align-items: center;
		gap: 16px;
	}

	.p-top-flow__num {
		letter-spacing: 0.16em;
	}

	.p-top-flow__title {
		font-size: 18px;
		font-weight: 500;
	}

	.p-top-flow__text {
		color: var(--color-text);
		font-size: var(--fs-body);
		line-height: var(--lh-body);
		letter-spacing: var(--ls-body);
	}
}

@media (min-width: 1100px) {
	/* 1100px 付近は6列が狭いため、間隔と文字を 1440px の値まで滑らかに広げる */
	.p-top-flow__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		column-gap: clamp(12px, calc(3.529vw - 26.8px), 24px);
	}

	.p-top-flow__title {
		font-size: clamp(16px, calc(0.588vw + 9.5px), 18px);
	}

	.p-top-flow__text {
		font-size: clamp(14px, calc(0.588vw + 7.5px), 16px);
	}
}

/* ==========================================================================
   Salon（Staff と同じ背景で続く。PC は上120・下60）
   ========================================================================== */
.p-top-salon {
	padding-block: 80px;
}

.p-top-salon__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
}

.p-top-salon__main {
	aspect-ratio: 342 / 240;
	overflow: hidden;
}

.p-top-salon__main img,
.p-top-salon__thumbs img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-top-salon__thumbs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.p-top-salon__thumbs li {
	aspect-ratio: 165 / 140;
	overflow: hidden;
}

.p-top-salon__more .c-more {
	margin-top: 0;
}

@media (min-width: 768px) {
	.p-top-salon {
		padding-block: var(--space-section) 60px;
	}

	.p-top-salon__main {
		aspect-ratio: 540 / 380;
	}

	.p-top-salon__thumbs {
		gap: 20px;
	}

	.p-top-salon__thumbs li {
		aspect-ratio: 250 / 180;
	}
}

/* PC：2列（左に写真、右に見出し・本文・小写真・リンク） */
@media (min-width: 1100px) {
	.p-top-salon__grid {
		grid-template-columns: minmax(0, 48.2%) minmax(0, 1fr);
		grid-template-areas:
			"main heading"
			"main text"
			"main thumbs"
			"main more";
		grid-template-rows: auto auto auto 1fr;
		gap: 28px 60px;
		align-items: start;
	}

	.p-top-salon__heading {
		grid-area: heading;
	}

	.p-top-salon__main {
		grid-area: main;
		aspect-ratio: 540 / 426;
	}

	.p-top-salon__text {
		grid-area: text;
	}

	.p-top-salon__thumbs {
		grid-area: thumbs;
		padding-bottom: 20px;
	}

	.p-top-salon__more {
		grid-area: more;
	}
}

/* ==========================================================================
   Staff（カードは components.css の .c-staff-list）
   ========================================================================== */
.p-top-staff {
	padding-block: 80px;
}

/* VIEW MORE（→ ABOUT #staff。Figma 871:1186）：カードの右端にそろえる */
.p-top-staff__list .c-more {
	max-width: var(--content-narrow);
	margin: 32px auto 0;
}

@media (min-width: 768px) {
	.p-top-staff {
		padding-block: 60px var(--space-section);
	}

	.p-top-staff__list .c-more {
		margin-top: var(--space-block);
	}
}

/* ==========================================================================
   Voice（評価・件数・本文は［要確定］。CLAUDE.md 12章の1）
   ========================================================================== */
.p-top-voice {
	background: var(--color-bg-base);
}

.p-top-voice__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 12px;
	color: var(--color-muted);
}

.p-top-voice__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	max-width: 640px;
	margin: var(--space-block) auto 0;
}

.p-top-voice__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 42px 40px;
	background: var(--color-white);
}

.p-top-voice__head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.p-top-voice__avatar {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--color-bg-divider);
}

.p-top-voice__who {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	line-height: normal;
}

.p-top-voice__source {
	flex-shrink: 0;
	color: var(--color-muted);
	font-family: var(--ff-en);
	font-size: 13px;
}

.p-top-voice__text {
	color: var(--color-muted);
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: 0;
}

.p-top-voice__more {
	display: flex;
	justify-content: flex-end;
	margin-top: 32px;
}

@media (min-width: 768px) {
	.p-top-voice__rating {
		color: var(--color-text);
	}

	.p-top-voice__list {
		gap: 20px;
	}
}

/* PC：3列 */
@media (min-width: 1100px) {
	.p-top-voice__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px;
		max-width: none;
	}

	.p-top-voice__card {
		padding: clamp(32px, calc(6.471vw - 39.2px), 54px);
	}

	.p-top-voice__more {
		margin-top: var(--space-block);
	}
}

/* ==========================================================================
   Access
   ========================================================================== */
.p-top-access {
	background: var(--color-bg-base);
}

.p-top-access__map {
	background: var(--color-bg-divider);
}

.p-top-access__map iframe {
	display: block;
	width: 100%;
	height: clamp(240px, calc(15.24vw + 180.6px), 400px); /* 390→240 / 1440→400 */
	border: 0;
}

.p-top-access__row {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 32px;
}

.p-top-access__row > * {
	min-width: 0;
}

.p-top-access__photos {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}

.p-top-access__photo {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 342 / 130;
	padding: 12px;
	background: var(--color-bg-divider);
	text-align: center;
}

/* 写真が入った枠（10/9 本画像の第1弾：外観）。枠いっぱいに表示して、はみ出た分は切り取る */
.p-top-access__photo--img {
	padding: 0;
	overflow: hidden;
}

.p-top-access__photo--img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* TAB：情報表を全幅、写真2枚を2列 */
@media (min-width: 768px) {
	.p-top-access__row {
		margin-top: var(--space-block);
	}

	.p-top-access__photos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.p-top-access__photo {
		aspect-ratio: 397 / 180;
	}
}

/* PC：地図の下に2列（情報表／写真） */
@media (min-width: 1100px) {
	.p-top-access__row {
		flex-direction: row;
		align-items: flex-start;
		gap: 56px;
	}

	.p-top-access .c-info-table {
		flex: 0 0 59.3%;
	}

	.p-top-access__photos {
		flex: 1;
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}
}

/* ==========================================================================
   News
   ========================================================================== */
.p-top-news {
	background: var(--color-bg-mid);
}

.p-top-news__row {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.p-top-news__row > * {
	min-width: 0;
}

@media (min-width: 768px) {
	.p-top-news__row {
		gap: var(--space-block);
	}
}

/* PC：2列（見出し／リスト） */
@media (min-width: 1100px) {
	.p-top-news__row {
		flex-direction: row;
		gap: 48px;
	}

	.p-top-news__row .c-sec-heading {
		flex: 0 0 26.8%;
	}

	.p-top-news__row .c-news-list {
		flex: 1;
	}
}

/* ==========================================================================
   Blog
   ========================================================================== */
.p-top-blog {
	background: var(--color-bg-base);
}