/* ==========================================================================
   components.css — 共通の部品（c-*）
   ========================================================================== */

/* ---- アイコン ---- */
.c-icon {
	flex-shrink: 0;
}

/* ---- スキップリンク ---- */
.c-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: calc(var(--z-drawer) + 1);
	padding: 8px 16px;
	background: var(--color-brand);
	color: var(--color-white);
	transform: translateY(-200%);
}

.c-skip-link:focus {
	transform: none;
}

/* ---- ロゴ ---- */
/* ロゴ（画像。Figma 342:294：ヘッダー・ドロワーは横組み SP 117px／PC 164px、フッターは縦組み SP 120px／PC 160px。FB No.29・30） */
.c-logo a,
.c-logo img {
	display: block;
}

.c-logo img {
	width: 117px;
	height: auto;
}

.l-footer__logo img {
	width: 120px;
}

@media (min-width: 1100px) {
	.l-header__logo img {
		width: 164px;
	}

	.l-footer__logo img {
		width: 160px;
	}
}

/* ---- ナビのリンク（ヘッダー・フッター） ---- */
.c-nav-link {
	font-size: var(--fs-nav);
	line-height: var(--lh-nav);
	letter-spacing: var(--ls-nav);
	white-space: nowrap;
	text-underline-offset: 0.3em;
}

.c-nav-link:hover,
.c-nav-link[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

/* ヘッダー（PC）の現在のページは、下線ではなく文字の色で示す（Figma ヘッダー：ミュート色。FB No.43） */
.l-header__nav .c-nav-link[aria-current="page"]:not(:hover) {
	color: var(--color-muted);
	text-decoration: none;
}

/* ---- テキストリンク（下線を追加するホバー。外部リンクはアイコン付き） ---- */
.c-text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-brand);
	font-size: 13px;
	line-height: normal;
	text-underline-offset: 0.25em;
}

.c-text-link:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.c-text-link--on-dark {
	gap: 6px;
	color: var(--color-on-dark-60);
	font-size: 13px;
	letter-spacing: 1px;
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.c-text-link--on-dark:hover {
	color: var(--color-white);
}

@media (min-width: 768px) {
	.c-text-link--on-dark {
		font-size: 14px;
	}
}

/* ---- 見出し（EN＋JPサブ） ---- */
.c-sec-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
	text-align: center;
}

.c-sec-heading__en {
	font-family: var(--ff-en);
	font-size: var(--fs-sec-en);
	font-weight: 400;
	line-height: var(--lh-sec-en);
	letter-spacing: var(--ls-sec-en);
	margin-right: calc(var(--ls-sec-en) * -1); /* 字間のぶん右にずれるのを戻す */
}

.c-sec-heading__ja {
	color: var(--color-muted);
	font-size: var(--fs-label);
	line-height: var(--lh-label);
	letter-spacing: var(--ls-label);
}

.c-sec-heading--on-dark {
	color: var(--color-white);
}

.c-sec-heading--on-dark .c-sec-heading__ja {
	color: var(--color-on-dark-muted);
}

@media (min-width: 768px) {
	.c-sec-heading {
		gap: 10px;
	}
}

/* ---- ［要確定］ラベル ---- */
.c-tbd {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--radius-badge);
	background: var(--color-alert);
	color: var(--color-white);
	font-size: var(--fs-note);
	line-height: var(--lh-note);
	letter-spacing: var(--ls-note);
}

/* ---- バッジ（News・Blog のカテゴリ） ---- */
.c-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--radius-badge);
	background: var(--color-brand-tint);
	color: var(--color-brand);
	font-size: var(--fs-badge);
	line-height: 1.5;
	letter-spacing: var(--ls-badge);
	white-space: nowrap;
}

/* ---- Button（610:1351） ---- */
.c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: var(--btn-h);
	padding: 8px 20px;
	border: 1px solid var(--color-brand);
	border-radius: 0;
	background: var(--color-brand);
	color: var(--color-white);
	text-align: center;
	transition: background-color var(--duration), color var(--duration), border-color var(--duration);
}

.c-btn__label {
	min-width: 0;
}

.c-btn--jp {
	font-family: var(--ff-sans);
	font-size: var(--fs-btn-jp);
	font-weight: 700;
	line-height: normal;
	letter-spacing: var(--ls-btn-jp);
}

.c-btn--en {
	gap: 10px;
	font-family: var(--ff-en);
	font-size: var(--fs-btn-en);
	font-weight: 400;
	line-height: var(--lh-btn);
	letter-spacing: var(--ls-btn-en);
	white-space: nowrap;
}

/* 副次ボタン：ブラウン枠・背景透過（地の色を変えたいときは --btn-secondary-bg。TOP の MENU は白）。ホバーは下の「ホバー（役割別）」 */
.c-btn--secondary {
	background: var(--btn-secondary-bg, transparent);
	color: var(--color-brand);
}

/* 写真・ブラウン地の上の主要：白塗り×ブラウン文字 */
.c-btn--dark.c-btn--primary {
	border-color: var(--color-white);
	background: var(--color-white);
	color: var(--color-brand);
}

/* ==========================================================================
   ホバー（役割別。10/13 改訂：色反転は廃止。「背景」ではなく「役割」で決める。ホバー一覧 636:1363）
   - 色は tokens.css の --hover-*。どのボタンがどの役割かは docs/design-fb-1013.md
   - 固定CTA（LINE・HPB）は例外（1024:1289 のまま。下の「固定CTA」）
   ========================================================================== */

/* 主要（ブラウン塗り）→ #6A4A32。白には反転しない：ヘッダーの RESERVE・RESERVE ONLINE（TOP の MENU・SP ドロワー）・下層の Button Primary・CONTACT の確認／送信 */
.c-btn--primary:hover,
.l-header__reserve:hover,
.p-contact .smf-action .smf-button-control__control:hover {
	border-color: var(--hover-primary-bg);
	background: var(--hover-primary-bg);
	color: var(--color-white);
}

/* 写真・ブラウン地の上の主要（白塗り×ブラウン文字）→ #EFE7DE。ブラウンには反転しない：RESERVE セクション・予約バナー */
.c-btn--dark.c-btn--primary:hover,
.c-reserve-banner__btn:hover {
	border-color: var(--hover-on-photo-primary-bg);
	background: var(--hover-on-photo-primary-bg);
	color: var(--color-brand);
}

/* 副次（ブラウン枠・透過）→ ブラウン8%。文字・枠はそのまま：ALL MENU・下層の Button Secondary・CONTACT の「戻る」 */
.c-btn--secondary:hover,
.p-contact .smf-action .smf-button-control__control[data-action="back"]:hover {
	border-color: var(--color-brand); /* 「戻る」は主要と同じクラスを持つので、枠の色を戻す */
	background: var(--hover-secondary-bg);
	color: var(--color-brand);
}

/* 矢印は、どのボタンもホバーで右へ 4px（ヘッダーの RESERVE も。固定CTA は下の「固定CTA」で同じ動き） */
.c-btn .c-icon--arrow,
.l-header__reserve .c-icon--arrow {
	transition: transform var(--duration);
}

.c-btn:hover .c-icon--arrow,
.l-header__reserve:hover .c-icon--arrow {
	transform: translateX(var(--hover-arrow-x));
}

.c-btn:disabled,
/* Reserve の RESERVE ONLINE（Figma：上下22px。SPは19px） */
.c-btn--lg {
	min-height: 58px;
	padding-block: 19px;
}

@media (min-width: 768px) {
	.c-btn {
		width: min(var(--btn-max), 100%);
		padding-inline: 24px;
	}

	.c-btn--en {
		font-weight: 500;
	}

	.c-btn--lg {
		min-height: 65px;
		padding-block: 22px;
	}
}

/* ボタンを2つ並べる：SPは上にメイン・下にサブ（間隔12px）／TAB以上は左にサブ・右にメイン */
.c-btn-group {
	display: flex;
	flex-direction: column-reverse;
	gap: 12px;
	margin-top: var(--space-block);
}

@media (min-width: 768px) {
	.c-btn-group {
		flex-direction: row;
		justify-content: center;
		gap: 24px;
	}
}

/* ---- SNS ---- */
.c-sns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

/* 公式のカラーアイコン。40×40 の枠の中央に置く（X は 24px・Instagram は 32px。FB No.17）。記事のシェア（.c-share）も同じ */
.c-sns__link,
.c-share__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	transition: opacity var(--duration);
}

.c-sns__link:hover,
.c-share__link:hover {
	opacity: 0.7;
}

.c-sns__icon,
.c-share__icon {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.c-sns__icon--x,
.c-share__icon--x {
	width: 24px;
	height: 24px;
}

.c-sns__icon--instagram {
	width: 32px;
	height: 32px;
}

@media (min-width: 1100px) {
	.c-sns {
		gap: 24px;
	}
}

/* ---- SPドロワー（345:81） ---- */
.c-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--color-bg-base);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--duration), visibility 0s var(--duration);
}

/* 開くときは visibility をすぐ切り替える（直後に閉じるボタンへフォーカスを移すため） */
.c-drawer.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--duration), visibility 0s;
}

.c-drawer__bar {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	padding-inline: 24px;
}

.c-drawer__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -13px;
	color: var(--color-text);
}

.c-drawer__nav {
	padding-top: 16px;
}

.c-drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px;
	border-bottom: 1px solid var(--color-bg-divider);
	font-size: 16px;
	line-height: normal;
	letter-spacing: 0;
}

.c-drawer__link .c-icon {
	color: var(--color-muted);
}

.c-drawer__link[aria-current="page"] span {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.c-drawer__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	margin-top: auto;
	padding: 24px 24px 32px;
	background: var(--color-bg-mid);
}

.c-drawer__hours {
	color: var(--color-muted);
	font-size: 13px;
	line-height: normal;
	letter-spacing: 0;
}

.c-drawer .c-drawer__reserve {
	width: 100%;
	min-height: 0;
	padding-block: 16px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.15em;
	line-height: normal;
}

.c-drawer__foot .c-sns {
	align-self: stretch;
	padding-top: 4px;
}

@media (min-width: 1100px) {
	.c-drawer {
		display: none;
	}
}

/* ---- 固定CTA「LINEで予約」「ホットペッパーで予約」（10/9 新デザイン C案。PC 968:1306／SP 968:1294。CLAUDE.md 7章）
   色は tokens.css の --cta-*。HPB を外した幅（site-info の cta_hpb_pc・cta_hpb_sp）は LINE の1本だけになる（バーは全幅、PC は台座に1本）。
   10/12 No.59：SP（〜767）は LINE の1本だけ（Figma 1056:2488） ---- */
.c-cta {
	position: fixed;
	z-index: var(--z-cta);
	display: flex;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--duration), visibility var(--duration);
}

.c-cta.is-visible {
	opacity: 1;
	visibility: visible;
}

.c-cta__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	border: 1px solid;
	line-height: normal;
	transition: background-color 0.2s; /* Figma 1024:1289：transition .2s */
}

.c-cta__btn .c-icon {
	flex-shrink: 0;
}

.c-cta__btn .c-icon--cta-arrow {
	transition: transform 0.2s;
}

.c-cta__label {
	white-space: nowrap;
}

/* LINEで予約（主）：明るい地に濃い文字 */
.c-cta__btn--line {
	gap: 10px;
	background: var(--cta-accent);
	color: var(--cta-base);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* ホットペッパーで予約（副） */
.c-cta__btn--hpb {
	gap: 4px;
	color: var(--cta-accent);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
}

/* TAB・SP：画面下に全幅。白枠 3px の中にボタン 56px を2本（間 3px。バー全体 62px。Figma 968:1330）。
   iPhone のホームバーの分は、白枠の下にセーフエリアの高さを足して埋める */
.c-cta {
	inset: auto 0 0;
	gap: var(--cta-frame-w);
	padding: var(--cta-frame-w);
	padding-bottom: calc(var(--cta-frame-w) + env(safe-area-inset-bottom));
	background: var(--cta-frame);
	box-shadow: var(--cta-shadow-sp);
}

.c-cta__btn {
	height: var(--cta-btn-h);
}

.c-cta__btn--line {
	flex: 1 1 0;
	border-color: var(--cta-base);
}

.c-cta__btn--hpb {
	flex: 0 0 36%;
	border-color: var(--cta-base);
	background: var(--cta-base);
	line-height: 1.4;
	text-align: center;
}

/* HPB を出さない幅：LINE の1本が全幅（SP は 16px：Figma 1056:2489） */
@media (max-width: 767px) {
	.c-cta--hpb-pc-only .c-cta__btn--hpb {
		display: none;
	}

	.c-cta--hpb-pc-only .c-cta__btn--line {
		font-size: 16px;
	}
}

@media (min-width: 768px) {
	.c-cta--hpb-sp-only .c-cta__btn--hpb {
		display: none;
	}
}

/* ホバー（10/12 No.51。Figma 1024:1289）：色の反転はやめ、押しているボタンだけ同じ色の系統で明るくする（隣のボタンと同じ見た目にしない）。
   LINE＝白地＋矢印が右へ 4px／HPB＝明るい茶色（文字・枠はそのまま）。
   :hover はマウスなどの端末だけ（タップのあとに残らないように）。タップ中（:active）は同じ変化 */
.c-cta__btn--line:active {
	background: var(--cta-line-hover);
}

.c-cta__btn--hpb:active {
	background: var(--cta-hpb-hover);
}

@media (hover: hover) {
	.c-cta__btn--line:hover {
		background: var(--cta-line-hover);
	}

	.c-cta__btn--line:hover .c-icon--cta-arrow {
		transform: translateX(4px);
	}

	.c-cta__btn--hpb:hover {
		background: var(--cta-hpb-hover);
	}
}

/* PC：右下の台座に縦に2本（上：HPB 280×44／下：LINE 280×64。全体 288×119）。
   幅は Figma の固定値（画面の右端に固定する部品のため、画面幅には連動させない） */
@media (min-width: 1100px) {
	.c-cta {
		inset: auto 0 var(--cta-pc-bottom) auto;
		flex-direction: column;
		gap: 3px;
		padding: 3px;
		border: 1px solid var(--cta-edge);
		background: var(--cta-base);
		box-shadow: var(--cta-shadow);
	}

	.c-cta__btn {
		flex: none;
		width: 280px;
	}

	.c-cta__btn--line {
		height: 64px;
		border-color: var(--cta-accent);
		font-size: 16px;
	}

	.c-cta__btn--hpb {
		order: -1;
		height: 44px;
		border-color: var(--cta-accent);
		background: transparent;
		line-height: normal;
	}
}

/* ---- Reserve（342:338／392:901） ---- */
.c-reserve {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--space-section-strong);
	color: var(--color-white);
	text-align: center;
}

.c-reserve__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-reserve::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--color-bg-dark);
	opacity: var(--overlay-dark);
}

.c-reserve__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

.c-reserve__catch {
	font-family: var(--ff-mincho);
	font-size: var(--fs-display-m);
	font-weight: 500;
	line-height: var(--lh-display-m);
	letter-spacing: var(--ls-display-m);
	text-wrap: balance;
}

.c-reserve__hours {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
}

/* SP：「／」を消して2行 */
.c-reserve__sep {
	display: block;
	height: 0;
	overflow: hidden;
}

.c-reserve__cta {
	display: flex;
	justify-content: center;
	width: 100%;
}

.c-reserve__consult {
	padding-top: 24px;
}

.c-reserve__consult .c-icon {
	display: none;
}

.c-reserve__others {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: -16px;
	color: var(--color-on-dark-60);
	font-size: 12px;
	line-height: normal;
	letter-spacing: 1px;
}

.c-reserve__others-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
}

/* TAB 以上：「／」で区切って1行（収まらない幅では「／」の位置で改行） */
@media (min-width: 768px) {
	.c-reserve__inner {
		gap: 0;
	}

	.c-reserve__catch {
		padding-block: 40px;
	}

	.c-reserve__sep {
		display: inline;
		height: auto;
		color: var(--color-on-dark-60);
	}

	.c-reserve__cta {
		padding-top: 80px;
	}

	.c-reserve__consult {
		padding-top: 32px;
	}

	.c-reserve__consult .c-icon {
		display: block;
	}

	.c-reserve__others {
		flex-direction: row;
		gap: 16px;
		margin-top: 0;
		padding-top: 20px;
		font-size: 13px;
	}

	.c-reserve__others-list {
		gap: 8px 0;
	}

	.c-reserve__others-list li + li::before {
		content: "／";
		margin-inline: 16px;
		color: var(--color-on-dark-40);
		font-size: 14px;
	}
}

/* ---- 予約バナー（509:979／509:980） ---- */
.c-reserve-banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 200px;
	padding: 32px var(--gutter);
	background: var(--color-brand);
	color: var(--color-white);
	line-height: normal;
	letter-spacing: 0;
}

.c-reserve-banner__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 0;
	text-align: center;
}

.c-reserve-banner__en {
	font-family: var(--ff-en);
	font-size: 16px;
	letter-spacing: 0.2em;
}

.c-reserve-banner__lead {
	color: var(--color-on-dark-muted);
	font-size: 13px;
}

.c-reserve-banner__hours {
	font-family: var(--ff-en);
	font-size: 14px;
	font-weight: 500;
}

.c-reserve-banner__btn {
	flex-shrink: 0;
	padding: 14px 26px;
	border: 1px solid var(--color-white);
	background: var(--color-white);
	color: var(--color-brand);
	font-family: var(--ff-en);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.2em;
	white-space: nowrap;
	transition: background-color var(--duration), color var(--duration);
}

@media (min-width: 768px) {
	.c-reserve-banner {
		flex-direction: row;
		gap: 64px;
		min-height: 120px;
		padding-block: 24px;
	}

	.c-reserve-banner__text {
		align-items: flex-start;
		text-align: left;
	}

	.c-reserve-banner__en {
		font-size: 18px;
	}

	.c-reserve-banner__lead {
		font-size: 14px;
	}

	.c-reserve-banner__btn {
		padding: 18px 40px;
		font-size: 16px;
	}
}

/* ---- パンくず ---- */
.c-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	color: var(--color-muted);
	font-size: var(--fs-breadcrumb);
	line-height: normal;
	letter-spacing: var(--ls-breadcrumb);
}

.c-breadcrumb__item + .c-breadcrumb__item::before {
	content: "＞";
	margin-inline: 0.8em;
}

.c-breadcrumb a:hover {
	text-decoration: underline;
}

/* ---- ページヘッダー・KVなし（607:1297） ---- */
.c-page-header {
	display: flex;
	flex-direction: column;
	gap: 25px;
	min-height: 150px;
	padding: 16px var(--gutter) 26px;
	background: var(--color-bg-base);
}

@media (min-width: 768px) {
	.c-page-header {
		gap: 29px;
		min-height: 182px;
		padding-top: 40px;
		padding-bottom: 24px;
	}
}

/* ---- 見出しの左寄せ（Salon・News／Blog は SP だけ） ---- */
.c-sec-heading--left,
.c-sec-heading--left-sp {
	align-items: flex-start;
	text-align: left;
}

.c-sec-heading--left .c-sec-heading__en,
.c-sec-heading--left-sp .c-sec-heading__en {
	margin-right: 0;
}

@media (min-width: 768px) {
	.c-sec-heading--left-sp {
		align-items: center;
		text-align: center;
	}
}

/* ---- 写真の上の副次ボタン（KV の VIEW MENU）：白枠（line/button-on-dark）・透過・白文字 → ホバーで白15%。白塗りにはしない（10/13） ---- */
.c-btn--outline-dark {
	border-color: var(--color-line-button-on-dark);
	background: transparent;
	color: var(--color-white);
}

.c-btn--outline-dark:hover {
	background: var(--hover-on-photo-secondary-bg);
	color: var(--color-white);
}

/* ---- 「もっと見る」系のテキストリンク（ホバーで下線を追加。色は変えない） ---- */
.c-more {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--space-block);
}

.c-more__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-brand);
	font-family: var(--ff-en);
	font-size: var(--fs-btn-en);
	line-height: var(--lh-btn);
	letter-spacing: var(--ls-btn-en);
	white-space: nowrap;
	text-underline-offset: 0.3em;
}

.c-more__link:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.c-more__link--jp {
	font-family: var(--ff-sans);
	font-size: var(--fs-label);
	letter-spacing: 0.04em;
}

@media (min-width: 768px) {
	.c-more__link {
		gap: 10px;
		font-weight: 500;
	}
}

/* ---- 外部リンク（下線つき・別窓アイコン）。ホバーで不透明度70%（10/13 ホバー一覧 636:1363 の 04） ---- */
.c-ext-link {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	color: var(--color-brand);
	font-size: 14px;
	line-height: normal;
	letter-spacing: 1px;
}

a.c-ext-link {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	transition: opacity var(--duration);
}

a.c-ext-link:hover {
	opacity: var(--hover-ext-opacity);
}

@media (min-width: 768px) {
	.c-ext-link {
		font-size: 16px;
	}
}

/* ---- メニュー表（TOP・MENU で共用。template-parts/component-menu-list.php） ----
 * SP：タグ → メニュー名 → 「金額・時間」 → 説明 の縦積み（CLAUDE.md 12章の6・FB No.35）
 * TAB：1段目に名称・金額・時間、2段目に説明
 * PC：1行に4列。メニュー名・金額・時間は金額の行に下揃え、説明は上下中央。金額は右揃え（FB No.35）
 * --top：TOP（Figma 202:1340／210:2983）、--table：MENU（734:1146／739:1146。PC は見出し行あり） */
.c-menu-list__items {
	border-bottom: 1px solid var(--color-line-weak);
}

.c-menu-list__cols {
	display: none;
}

.c-menu-list__item {
	display: grid;
	grid-template-columns: max-content max-content minmax(0, 1fr);
	grid-template-areas:
		"head head head"
		"price time ."
		"desc desc desc";
	align-items: baseline;
	gap: 8px 12px;
	padding: 22px 2px;
	border-top: 1px solid var(--color-line-weak);
}

.c-menu-list__item:first-child {
	border-top-color: var(--color-line-strong);
}

.c-menu-list__head {
	display: flex;
	flex-direction: column;
	grid-area: head;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}

.c-menu-list__label {
	font-size: 11px;
	letter-spacing: 0.02em;
	white-space: normal;
}

.c-menu-list__name {
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.9;
	letter-spacing: var(--ls-body);
}

/* VIP：王冠＋2行（「VIPルーム」／内容は80%。FB No.31・34）。王冠は1行目の中央に揃える */
.c-menu-list__name--crown {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: 6px;
}

.c-menu-list__crown {
	grid-row: 1;
	width: 18px;
	height: 18px;
	margin-top: calc((1.9em - 18px) / 2);
}

.c-menu-list__name-main {
	grid-column: 2;
}

.c-menu-list__name-sub {
	grid-column: 2;
	font-size: 0.8125em;
}

.c-menu-list__price {
	display: flex;
	grid-area: price;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 12px;
	white-space: nowrap;
}

.c-menu-list__regular {
	color: var(--color-muted);
	font-size: var(--fs-note);
	line-height: normal;
	letter-spacing: 0;
}

.c-menu-list__amount {
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.c-menu-list__time {
	grid-area: time;
	font-size: 13px;
	line-height: normal;
	letter-spacing: 0;
	white-space: nowrap;
}

.c-menu-list__desc {
	grid-area: desc;
	color: var(--color-muted);
	font-size: var(--fs-body-xs);
	line-height: 1.8;
	letter-spacing: var(--ls-body-xs);
}

/* MENU（SP）：名称は太字 15px・行間1.6、説明は 13px（Figma 739:1148） */
.c-menu-list--table .c-menu-list__item {
	padding: 20px 0;
}

.c-menu-list--table .c-menu-list__name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0;
}

.c-menu-list--table .c-menu-list__amount {
	font-size: 15px;
	font-weight: 400;
}

.c-menu-list--table .c-menu-list__desc {
	color: var(--color-text);
	font-size: 13px;
	letter-spacing: 0;
}

@media (min-width: 768px) {
	.c-menu-list__item {
		grid-template-columns: minmax(0, 1fr) max-content max-content;
		grid-template-areas:
			"head price time"
			"desc desc desc";
		align-items: end;
		gap: 12px 40px;
		padding: 24px 8px;
	}

	.c-menu-list__name {
		font-weight: 700;
	}

	.c-menu-list__price {
		flex-direction: column;
		align-items: flex-end;
		gap: 2px;
		text-align: right;
	}

	.c-menu-list__regular {
		line-height: 1.9;
	}

	.c-menu-list__amount {
		font-weight: 400;
		line-height: 1.8;
		letter-spacing: 0.08em;
	}

	.c-menu-list__time {
		font-size: var(--fs-body);
		line-height: 1.9;
		letter-spacing: var(--ls-body);
	}

	.c-menu-list__desc {
		color: var(--color-text);
		font-size: var(--fs-body);
		line-height: 1.9;
		letter-spacing: var(--ls-body);
	}

	.c-menu-list--table .c-menu-list__name {
		font-size: var(--fs-body);
	}

	.c-menu-list--table .c-menu-list__amount {
		font-size: var(--fs-body);
		line-height: 1.9;
		letter-spacing: 0;
	}

	.c-menu-list--table .c-menu-list__desc {
		font-size: var(--fs-label);
		line-height: 1.8;
	}
}

@media (min-width: 1100px) {
	.c-menu-list__item {
		grid-template-columns: minmax(0, 1fr) minmax(max-content, 110px) minmax(max-content, 70px) minmax(0, 37%);
		grid-template-areas: "head price time desc";
		column-gap: 40px;
		padding: 28px 8px;
	}

	.c-menu-list__desc {
		align-self: center;
	}

	/* MENU（PC）：見出し行（メニュー名／料金（税込）／所要時間／内容）と列をそろえる */
	.c-menu-list--table .c-menu-list__cols,
	.c-menu-list--table .c-menu-list__item {
		display: grid;
		grid-template-columns: minmax(0, 412fr) minmax(max-content, 130fr) minmax(max-content, 96fr) minmax(0, 440fr);
		column-gap: 16px;
	}

	.c-menu-list--table .c-menu-list__cols {
		padding-bottom: 12px;
		border-bottom: 1px solid var(--color-line-strong);
		color: var(--color-muted);
		font-size: 13px;
		line-height: 1.8;
		letter-spacing: 0;
	}

	.c-menu-list--table .c-menu-list__cols span:nth-child(2) {
		text-align: right;
	}

	.c-menu-list--table .c-menu-list__item {
		padding: 20px 0;
	}

	.c-menu-list--table .c-menu-list__item:first-child {
		border-top: 0;
	}
}

/* ---- FAQ（<details>／<summary>） ---- */
.c-faq {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: var(--content-faq);
	margin: var(--space-block) auto 0;
}

.c-faq__item {
	border-radius: var(--radius-card);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.c-faq__q {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px;
	cursor: pointer;
	list-style: none;
}

.c-faq__q::-webkit-details-marker {
	display: none;
}

.c-faq__mark {
	flex-shrink: 0;
	color: var(--color-brand);
	font-family: var(--ff-en);
	font-size: 24px;
	line-height: 1.3;
	letter-spacing: 0;
}

.c-faq__question {
	flex: 1;
	min-width: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: var(--ls-body);
}

.c-faq__q .c-icon {
	margin-left: 2px; /* ＋アイコンとの間隔は16px以上（spec-responsive 4章） */
	color: var(--color-brand);
}

.c-faq__item[open] .c-icon__v {
	display: none;
}

/* ホバーのときだけ下線。スマホでタップしたあとに :hover が残り、最後に開いた質問だけ下線が出たままになっていたため、
   マウスなどの端末に限る（10/9 荒川さん：「どのくらい持ちますか？」だけ下線） */
@media (hover: hover) {
	.c-faq__q:hover .c-faq__question {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.3em;
	}
}

.c-faq__a {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 0 20px 22px;
}

.c-faq__a .c-faq__mark {
	color: var(--color-muted);
}

.c-faq__answer {
	flex: 1;
	min-width: 0;
}

/* 回答の段落の間（Figma PC 13px／SP 12px＝0.8em） */
.c-faq__answer p + p {
	margin-top: 0.8em;
}

@media (min-width: 768px) {
	.c-faq {
		gap: 12px;
	}

	.c-faq__q {
		gap: 20px;
		padding: 28px 32px;
	}

	.c-faq__mark {
		font-size: 22px;
		letter-spacing: 0.22em;
	}

	.c-faq__question {
		font-size: 18px;
		line-height: 1.7;
	}

	.c-faq__a {
		gap: 20px;
		padding: 0 32px 30px;
	}
}

/* ---- 店舗情報の表（Access） ---- */
.c-info-table {
	border-bottom: 1px solid var(--color-line-weak);
	font-size: var(--fs-body);
}

.c-info-table__row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 2px;
	border-top: 1px solid var(--color-line-weak);
}

.c-info-table__row:first-child {
	border-top-color: var(--color-line-strong);
}

.c-info-table dt {
	color: var(--color-muted);
	line-height: var(--lh-body-xs);
	letter-spacing: var(--ls-body-xs);
}

@media (min-width: 768px) {
	.c-info-table__row {
		display: grid;
		grid-template-columns: minmax(0, 21%) minmax(0, 1fr);
		gap: 0;
		padding: 22px 8px;
	}

	.c-info-table dt {
		color: var(--color-text);
		line-height: var(--lh-body);
		letter-spacing: var(--ls-body);
	}
}

/* ---- 見出しと値の表（ABOUT の SALON INFO・COMPANY、運営会社情報で共用。P11 レビューで共通化） ---- */
.c-def-table__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 0;
	border-bottom: 1px solid var(--color-line-weak);
}

.c-def-table dt {
	font-size: var(--fs-label);
	font-weight: 700;
	line-height: 1.3;
}

.c-def-table dd .c-tbd {
	margin-left: 4px;
	vertical-align: 1px;
}

.c-def-table dd a {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

@media (min-width: 768px) {
	.c-def-table__row {
		display: grid;
		grid-template-columns: minmax(0, 19.6%) minmax(0, 1fr);
		gap: 0 24px;
		padding-block: 24px;
	}

	.c-def-table dt {
		padding-top: 0.3em;
		font-size: var(--fs-body);
	}
}

/* ---- お知らせの一覧（TOP・NEWS 一覧で共用） ---- */
.c-news-list {
	border-bottom: 1px solid var(--color-line-weak);
}

.c-news-list__item {
	border-top: 1px solid var(--color-line-weak);
}

.c-news-list__item:first-child {
	border-top-color: var(--color-line-strong);
}

.c-news-list__link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 2px;
}

.c-news-list__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.c-news-list__date {
	color: var(--color-muted);
	font-size: var(--fs-body-xs);
	letter-spacing: var(--ls-body-xs);
	white-space: nowrap;
}

.c-news-list__link:hover .c-news-list__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

@media (min-width: 768px) {
	.c-news-list__link {
		flex-direction: row;
		align-items: center;
		gap: 32px;
		padding: 26px 4px;
	}

	.c-news-list__meta {
		flex-shrink: 0;
		flex-wrap: nowrap;
		gap: 32px;
	}

	.c-news-list__date {
		font-size: var(--fs-body);
		letter-spacing: var(--ls-body);
	}

	.c-news-list__badge {
		min-width: 106px;
		text-align: center;
	}

	.c-news-list__title {
		min-width: 0;
	}
}

/* ---- ブログのカード（TOP・BLOG 一覧で共用） ---- */
.c-post-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	margin-top: var(--space-block);
}

.c-post-card__link {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.c-post-card__thumb {
	overflow: hidden;
	aspect-ratio: 1200 / 630;
	background: var(--color-bg-divider);
	transition: opacity 0.6s, transform 0.6s;
}

.c-post-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 写真のリンクのホバー（10/13 先方要望。マウスなどの端末だけ）：写真が少し薄く・少し小さく。ボタンのホバーは変えていない */
@media (hover: hover) {
	.c-post-card__link:hover .c-post-card__thumb {
		opacity: 0.85;
		transform: scale(0.98);
	}
}

.c-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.c-post-card__date {
	color: var(--color-muted);
	font-size: var(--fs-body-xs);
	line-height: var(--lh-body-xs);
	letter-spacing: var(--ls-body-xs);
	white-space: nowrap;
}

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

.c-post-card__link:hover .c-post-card__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

@media (min-width: 768px) {
	.c-post-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	.c-post-card__link {
		gap: 18px;
	}

	/* TAB：タイトルは2行で打ち切り */
	.c-post-card__title {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
}

@media (min-width: 1100px) {
	.c-post-cards {
		gap: 36px;
	}

	.c-post-card__title {
		display: block;
		overflow: visible;
	}
}

/* ---- ページヘッダー・KVあり（MENU 269:209／269:386）：写真＋黒60%、左寄せ ---- */
.c-page-header--kv {
	position: relative;
	isolation: isolate;
	gap: 0;
	min-height: 280px;
	padding: 19px var(--gutter) 40px;
	overflow: hidden;
	background: var(--color-bg-dark);
	color: var(--color-white);
}

.c-page-header--kv::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--color-bg-dark);
	opacity: 0.6;
}

.c-page-header__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-page-header--kv .c-breadcrumb__list {
	color: var(--color-on-dark-muted);
	font-size: 12px;
}

.c-page-header--kv .c-page-header__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: auto;
	padding-top: 40px;
}

.c-page-header--kv .c-sec-heading {
	gap: 12px;
}

.c-page-header--kv .c-sec-heading__en {
	font-size: 22px;
}

.c-page-header--kv .c-sec-heading__ja {
	font-size: 12px;
	letter-spacing: 0.1em;
}

.c-page-header__lead {
	max-width: 600px;
}

@media (min-width: 768px) {
	.c-page-header--kv {
		min-height: 320px;
		padding-top: 34px;
		padding-bottom: 56px;
	}

	.c-page-header--kv .c-breadcrumb__list {
		font-size: var(--fs-breadcrumb);
	}

	.c-page-header--kv .c-page-header__body,
	.c-page-header--kv .c-sec-heading {
		gap: 16px;
	}

	.c-page-header--kv .c-sec-heading__en {
		font-size: var(--fs-sec-en);
	}

	.c-page-header--kv .c-sec-heading__ja {
		font-size: var(--fs-label);
		letter-spacing: var(--ls-label);
	}
}

@media (min-width: 1100px) {
	.c-page-header--kv {
		min-height: 360px;
		padding-bottom: 64px;
	}
}

/* ---- スタッフの一覧（TOP・ABOUT で共用。template-parts/component-staff-list.php） ----
 * 1人につき1枚。SP：写真 → 名前・役職 → 得意な施術・保有資格 → MESSAGE の縦積み
 * PC（768〜）：左に写真・名前・役職、右に MESSAGE。得意な施術・保有資格は TOP は右上、ABOUT は左下（Figma） */
.c-staff-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.c-staff-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-bottom: 28px;
	background: var(--color-white);
}

.c-staff-card > :not(.c-staff-card__profile),
.c-staff-card__name,
.c-staff-card__position {
	padding-inline: 24px;
}

.c-staff-card__profile {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.c-staff-card__photo {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-bg-divider);
}

.c-staff-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top; /* 4:3 の枠に収まらない写真は、顔が切れないよう上を基準に切る（10/12） */
}

.c-staff-card__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	height: 100%;
	color: var(--color-muted);
	font-size: var(--fs-body-xs);
	line-height: 1.8;
	text-align: center;
}

.c-staff-card__placeholder svg {
	width: min(132px, 37%);
	height: auto;
	fill: var(--color-line-strong);
}

.c-staff-card__name {
	margin-top: 24px;
	color: var(--color-brand);
	font-family: var(--ff-en);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.22em;
}

.c-staff-card__position {
	margin-top: 12px;
	color: var(--color-muted);
	font-size: var(--fs-body-xs);
	line-height: 1.8;
	letter-spacing: var(--ls-body-xs);
}

/* 得意な施術・保有資格（Figma 850:1203） */
.c-staff-card__facts {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.c-staff-card__facts > div {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.c-staff-card__facts .c-badge {
	padding: 6px 12px;
	line-height: normal;
}

.c-staff-card__facts dd {
	font-size: var(--fs-label);
	line-height: 1.9;
	letter-spacing: 0.04em;
}

.c-staff-card__skill {
	display: block;
	font-size: var(--fs-body-xs);
}

.c-staff-card__skill-note {
	display: block;
}

/* MESSAGE ＋ 短い線（Figma 857:1188）。SP の Figma には無いため、768px から出す */
.c-staff-card__message-label {
	display: none;
	flex-direction: column;
	gap: 16px;
	color: var(--color-muted);
	font-family: var(--ff-en);
	font-size: var(--fs-note);
	line-height: normal;
	letter-spacing: 0.15em;
}

.c-staff-card__message-label::after {
	width: 40px;
	height: 1px;
	background: var(--color-brand);
	content: "";
}

.c-staff-card__message {
	font-size: var(--fs-body-xs);
	line-height: 1.9;
	letter-spacing: 0.04em;
}

.c-staff-card__message p + p {
	margin-top: 1.9em; /* 段落の間は1行あける（Figma） */
}

/* ABOUT（SP）：7行で閉じる。下端 64px を白へのグラデーションで隠す（FB No.21。assets/js/page-about.js が .is-collapsed を付ける） */
.c-staff-card__message.is-collapsible {
	position: relative;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.c-staff-card__message.is-collapsed {
	max-height: calc(1.9em * 7);
}

.c-staff-card__message.is-collapsed::after {
	position: absolute;
	inset: auto 0 0;
	height: 64px;
	background: linear-gradient(rgb(255 255 255 / 0), var(--color-white));
	content: "";
}

@media (prefers-reduced-motion: reduce) {
	.c-staff-card__message.is-collapsible {
		transition: none;
	}
}

.c-staff-card__more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 16px;
	padding: 12px 0;
	border: 1px solid rgb(80 48 24 / 0.35);
	border-radius: var(--radius-badge);
	background: none;
	color: var(--color-brand);
	font-size: 13px;
	line-height: 1.9;
	letter-spacing: 0.08em;
	cursor: pointer;
}

.c-staff-card__more[hidden] {
	display: none;
}

/* ABOUT：カードは角丸2px・影つき。名前は本文色（Figma 560:1179） */
.c-staff-list--about .c-staff-card {
	gap: 8px;
	padding-bottom: 20px;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.c-staff-list--about .c-staff-card > :not(.c-staff-card__profile),
.c-staff-list--about .c-staff-card__name,
.c-staff-list--about .c-staff-card__position {
	padding-inline: 20px;
}

.c-staff-list--about .c-staff-card__name {
	margin-top: 20px;
	color: var(--color-text);
	font-size: 20px;
}

.c-staff-list--about .c-staff-card__position {
	margin-top: 8px;
	font-size: 13px;
	letter-spacing: 0;
}

.c-staff-list--about .c-staff-card__facts {
	padding-block: 8px 12px;
}

@media (min-width: 768px) {
	.c-staff-card,
	.c-staff-list--about .c-staff-card {
		display: grid;
		grid-template-columns: minmax(0, 360fr) minmax(0, 464fr);
		grid-template-areas:
			"profile facts"
			"profile message";
		align-content: start;
		gap: 0 64px;
		padding: 56px;
	}

	.c-staff-card > :not(.c-staff-card__profile),
	.c-staff-card__name,
	.c-staff-card__position,
	.c-staff-list--about .c-staff-card > :not(.c-staff-card__profile),
	.c-staff-list--about .c-staff-card__name,
	.c-staff-list--about .c-staff-card__position {
		padding-inline: 0;
	}

	.c-staff-card__profile {
		grid-area: profile;
	}

	.c-staff-card__facts {
		grid-area: facts;
		padding-bottom: 24px;
	}

	.c-staff-card__message-col {
		grid-area: message;
	}

	.c-staff-list--top .c-staff-card {
		width: 100%;
		max-width: var(--content-narrow);
		margin-inline: auto;
	}

	.c-staff-card__name {
		margin-top: 40px;
		font-size: 22px;
	}

	.c-staff-card__position {
		margin-top: 4px;
		font-size: var(--fs-label);
		letter-spacing: 0.16em;
	}

	.c-staff-card__message-label {
		display: flex;
	}

	.c-staff-card__message {
		margin-top: 16px;
		font-size: var(--fs-body);
	}

	/* ABOUT：左に写真・名前・役職・得意な施術・保有資格、右に MESSAGE（全文） */
	.c-staff-list--about .c-staff-card {
		grid-template-columns: minmax(0, 360fr) minmax(0, 584fr);
		grid-template-areas:
			"profile message"
			"facts message";
	}

	.c-staff-list--about .c-staff-card__name {
		margin-top: 24px;
		font-size: 22px;
	}

	.c-staff-list--about .c-staff-card__position {
		font-size: var(--fs-label);
	}

	.c-staff-list--about .c-staff-card__facts {
		padding-block: 16px 12px;
	}
}

@media (min-width: 1100px) {
	.c-staff-list {
		gap: 40px;
	}
}

/* ---- お知らせの一覧：右端に矢印（NEWS 一覧 539:1381） ---- */
.c-news-list--arrow .c-news-list__link {
	position: relative;
	padding-right: 32px;
}

.c-news-list--arrow .c-icon {
	position: absolute;
	top: 50%;
	right: 4px;
	color: var(--color-brand);
	transform: translateY(-50%);
}

@media (min-width: 768px) {
	.c-news-list--arrow .c-news-list__title {
		flex: 1;
	}
}

/* ---- TOP の News・Blog で記事が0件のときの1行（中央揃え：10/9 荒川さん FB）。
   NEWS 一覧・BLOG 一覧は下の .c-empty-state（10/12） ---- */
.c-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	margin-top: 40px;
	text-align: center;
}

.c-empty__text {
	max-width: 36em;
	line-height: var(--lh-body);
}

/* ---- 一覧が0件のときの表示（BLOG 一覧・NEWS 一覧。10/12 No.55・56。
   Figma BLOG PC 1039:1590／SP 1039:1642、NEWS PC 1041:1846／SP 1041:2036）。
   幅 720px（SP はガターの内側いっぱい）・上下に line/weak の罫線 ---- */
.c-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	max-width: 720px;
	margin: 16px auto 0; /* 一覧の上の余白（SP 24px）と合わせて 40px */
	padding-block: 48px;
	border-block: 1px solid var(--color-line-weak);
	text-align: center;
}

.c-empty-state__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.c-empty-state__label {
	color: var(--color-brand);
	font-family: var(--ff-en);
	font-size: 13px;
	line-height: 1.6;
	letter-spacing: 0.2em;
}

.c-empty-state__title {
	font-family: var(--ff-mincho);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: var(--ls-display-s);
}

.c-empty-state__text {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
}

/* 分けた単位の中でだけ折り返す（SP は「、」の後ろで改行） */
.c-empty-state__phrase {
	display: inline-block;
}

.c-empty-state__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 28px;
}

.c-empty-state__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-brand);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.08em;
	white-space: nowrap;
	text-underline-offset: 0.3em;
}

.c-empty-state__divider {
	width: 40px;
	height: 1px;
	background: var(--color-line-weak);
}

.c-empty-state__sns-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--color-muted);
	font-size: 13px;
	line-height: 1.8;
	letter-spacing: var(--ls-label);
	text-underline-offset: 0.3em;
}

.c-empty-state__sns-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

/* テキストリンクのホバーは下線を足す（色は変えない） */
.c-empty-state__link:hover,
.c-empty-state__sns-link:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

@media (min-width: 768px) {
	.c-empty-state {
		gap: 40px;
		margin-top: 24px; /* 一覧の上の余白（PC 40px）と合わせて 64px */
		padding-block: 72px;
	}

	.c-empty-state__head {
		gap: 16px;
	}

	.c-empty-state__title {
		font-size: var(--fs-display-s);
	}

	.c-empty-state__links {
		column-gap: 56px;
	}

	.c-empty-state__link {
		font-size: 16px;
	}

	.c-empty-state__sns-link {
		font-size: var(--fs-label);
	}
}

/* ---- ページネーション（CLAUDE.md 12章の12） ----
 * 非アクティブ #7C6452／現在ページは数字の下に線（1.5px・数字の幅＋2px・下端から5px・#503018） */
.c-pagination {
	margin-top: 24px;
}

.c-pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 0;
}

.c-pagination .page-numbers {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding-inline: 12px; /* 1桁でも幅32px以上になる。下線の長さの計算にも使う */
	color: var(--color-page-inactive);
	font-family: var(--ff-en);
	font-size: 16px;
	line-height: 1;
}

.c-pagination a.page-numbers:hover {
	color: var(--color-brand);
}

.c-pagination .page-numbers.current {
	color: var(--color-brand);
	font-weight: 500;
}

.c-pagination .page-numbers.current::after {
	content: "";
	position: absolute;
	top: calc(50% + 0.35em + 5px); /* 数字の下端から5px下 */
	left: 50%;
	width: calc(100% - 24px + 2px); /* 数字の幅＋2px */
	height: 1.5px;
	background: var(--color-brand);
	transform: translateX(-50%);
}

.c-pagination .prev,
.c-pagination .next {
	color: var(--color-brand);
}

.c-pagination .prev .c-icon {
	transform: rotate(180deg);
}

/* ---- 記事（NEWS 記事・BLOG 記事で共用。Figma 494:709） ---- */
.c-entry {
	padding: 40px var(--gutter) 80px;
}

.c-entry__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: var(--content-article);
	margin-inline: auto;
}

.c-entry__header {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.c-entry__heading {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.c-entry__type {
	color: var(--color-brand);
	font-family: var(--ff-en);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.24em;
}

/* 記事の見出し（NEWS・BLOG）。「赤坂」「NOBOBO」など単語の途中で折り返さない（10/12 FB No.83）。
   和文は1文字ごとに折り返せるため、CSS だけでは「赤｜坂」になる。見出しをスペースの位置で区切り（template-parts/component-entry.php）、
   区切りごとに inline-block にして、スペースの位置で折り返す。1つの区切りが1行より長いとき（スペースのない見出し）は、
   その中で通常の和文の折り返し（line-break: strict で行頭の句読点・小書きの仮名を避ける） */
.c-entry__title {
	font-family: var(--ff-mincho);
	font-size: 22px;
	line-height: 1.45;
	letter-spacing: 0.04em;
	word-break: normal;
	overflow-wrap: anywhere;
	line-break: strict;
}

.c-entry__phrase {
	display: inline-block;
}

.c-entry__date {
	color: var(--color-muted);
	font-size: var(--fs-label);
	line-height: normal;
}

@media (min-width: 768px) {
	.c-entry {
		padding-block: 64px var(--space-section);
	}

	.c-entry__header {
		gap: 32px;
	}

	.c-entry__type {
		font-size: 18px;
	}

	.c-entry__title {
		font-size: 32px;
	}
}

/* ---- シェア（Figma 567:1259） ---- */
.c-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}

.c-share__label {
	width: 100%;
	font-size: var(--fs-label);
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0;
}

.c-share__list {
	display: flex;
	align-items: center;
	gap: 16px;
}

@media (min-width: 768px) {
	.c-share__label {
		width: auto;
	}
}

/* ---- 一覧へ戻る ---- */
.c-back-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-brand);
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	text-underline-offset: 0.3em;
}

.c-back-link .c-icon {
	transform: rotate(180deg);
}

.c-back-link:hover span {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

/* ---- 記事カード：白カード（BLOG 一覧 539:1190・関連記事 464:544） ---- */
.c-post-cards--boxed {
	gap: 24px;
}

.c-post-card--boxed .c-post-card__link {
	height: 100%;
	gap: 14px;
	padding: 20px;
	border-radius: var(--radius-card);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.c-post-card--boxed .c-post-card__date {
	font-size: var(--fs-note);
	letter-spacing: 0;
}

/* タイトルは2行で打ち切る */
.c-post-card--boxed .c-post-card__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* 抜粋は1行で省略（Figma 539:1198。SP 13px／PC 14px・行間1.8：FB No.13） */
.c-post-card--boxed .c-post-card__excerpt {
	overflow: hidden;
	font-size: 13px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.c-post-card--boxed .c-post-card__excerpt {
		font-size: var(--fs-label);
	}
}

.c-post-card--boxed .c-post-card__title {
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.7;
}

.c-post-card__excerpt {
	color: var(--color-muted);
	font-size: var(--fs-label);
	line-height: 1.8;
	letter-spacing: 0;
}

.c-post-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 6px;
	color: var(--color-brand);
	font-family: var(--ff-en);
	font-size: 13px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.04em;
}

.c-post-card__more--jp {
	font-family: var(--ff-sans);
}

.c-post-card--boxed .c-post-card__link:hover .c-post-card__more {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

/* 白カード（BLOG 一覧・関連記事）は、ホバーで見出しに下線を出さない（READ MORE の下線だけ。10/12 No.43） */
.c-post-card--boxed .c-post-card__link:hover .c-post-card__title {
	text-decoration: none;
}

@media (min-width: 768px) {
	.c-post-cards--boxed {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 24px;
	}

	.c-post-card--boxed .c-post-card__title {
		font-size: 18px;
	}
}

@media (min-width: 1100px) {
	.c-post-cards--boxed {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 48px 36px;
	}

	.c-post-card--boxed .c-post-card__title {
		display: -webkit-box;
		overflow: hidden;
	}
}

/* ---- カテゴリの絞り込みタブ（539:1180）。SP はタブの列だけ横スクロール ---- */
.c-tabs {
	margin-inline: calc(var(--gutter) * -1);
	padding-inline: var(--gutter);
	overflow-x: auto;
	scrollbar-width: none;
}

.c-tabs::-webkit-scrollbar {
	display: none;
}

.c-tabs__list {
	display: flex;
	gap: 8px;
	width: max-content;
}

.c-tabs__tab {
	display: block;
	padding: 12px 18px;
	border-radius: var(--radius-badge);
	color: var(--color-muted);
	font-size: var(--fs-label);
	line-height: normal;
	letter-spacing: 0;
	white-space: nowrap;
	transition: background-color var(--duration), color var(--duration);
}

.c-tabs__tab:hover {
	color: var(--color-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

.c-tabs__tab[aria-current="page"] {
	background: var(--color-brand);
	color: var(--color-white);
	font-weight: 500;
	text-decoration: none;
}

@media (min-width: 768px) {
	.c-tabs {
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}

	.c-tabs__list {
		flex-wrap: wrap;
		gap: 12px;
		width: auto;
	}

	.c-tabs__tab {
		padding-inline: 22px;
	}
}

/* ---- 記事：メタ・アイキャッチ・目次（BLOG 記事 464:470） ---- */
.c-entry__date a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.c-entry__sep {
	margin-inline: 0.8em;
	color: var(--color-line-strong);
}

.c-entry__thumb {
	overflow: hidden;
	aspect-ratio: 1200 / 630;
	background: var(--color-bg-divider);
}

.c-entry__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-entry__toc {
	padding: 20px;
	background: var(--color-white);
	font-size: var(--fs-label);
	line-height: 1.6;
	letter-spacing: 0;
}

.c-entry__toc-title {
	font-weight: 500;
}

.c-entry__toc-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 10px;
	padding-left: 1.4em;
	list-style: decimal;
	color: var(--color-brand);
}

.c-entry__toc-list a {
	color: var(--color-brand);
	text-underline-offset: 0.25em;
}

.c-entry__toc-list a:hover {
	text-decoration: underline;
}

@media (min-width: 768px) {
	.c-entry__toc {
		padding: 24px;
	}
}

/* ---- 外部リンクのアイコンを CSS で付けるボタン（SVG を通さない場所用：CONTACT の完了・送信失敗の画面） ---- */
.c-btn--ext::after {
	content: "";
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M6 2H2v10h10V8m0-2.5V2H8.5M12 2 6.5 7.5' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M6 2H2v10h10V8m0-2.5V2H8.5M12 2 6.5 7.5' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- 横スクロールの目印（スクロールバー＋「← 横にスワイプ」。TOP Comparison・MENU オプション〈SP〉。main.js の .js-hscroll） ---- */
/* 標準のスクロールバーは隠す（下の目印と二重に出るため。10/13 荒川さん指摘）。.c-tabs と同じ方式。スクロール自体は変えない */
.js-hscroll {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.js-hscroll::-webkit-scrollbar {
	display: none;
}

.c-hscroll-indicator {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 32px;
}

.c-hscroll-indicator[hidden] {
	display: none;
}

.c-hscroll-indicator__track {
	position: relative;
	width: 100%;
	height: 3px;
	overflow: hidden;
	border-radius: 2px;
	background: var(--color-bg-divider);
}

.c-hscroll-indicator__thumb {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 2px;
	background: var(--color-brand);
}

.c-hscroll-indicator__hint {
	color: var(--color-muted);
	font-size: 13px;
	line-height: normal;
	letter-spacing: 0;
}