/* ============================================================
   PRIME ESSENCE — Common Components
   CLAUDE.mdの各要件(ボタン/Sticky CTA/Gallery/Layout)に基づく
   再利用可能な共通コンポーネント群。
   HOME以降の各ページはこれらのクラスを組み合わせて構築する。
   ============================================================ */

/* ------------------------------------------------------------
   1. Buttons (CLAUDE.md 10章)
   Primary: 背景=Chocolate Brown / 文字=White
   Secondary: 背景=Rose BeigeまたはWhite / 文字=Chocolate Brown / 枠線あり
   ホバー: 軽い明度変化、1〜2px移動、または穏やかなフェードのみ
   ------------------------------------------------------------ */
.pe-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pe-space-xs);
	min-height: 58px; /* ブラッシュアップ(提案): 54px→58pxでさらに余裕を持たせ、上質な押しやすさを強調 */
	padding: 18px 42px;
	border-radius: var(--pe-radius-btn); /* ブラッシュアップ(提案): カード類(8px)より控えめな角丸で、端正な印象に */
	border: var(--pe-border-width) solid transparent;
	font-size: var(--pe-fs-sm);
	font-family: var(--pe-font-body);
	font-weight: 500;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: transform var(--pe-transition-fast),
		background-color var(--pe-transition-fast),
		border-color var(--pe-transition-fast),
		opacity var(--pe-transition-fast);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.pe-btn {
		transition: none;
	}
}

.pe-btn:hover {
	transform: translateY(var(--pe-hover-lift));
}

@media (prefers-reduced-motion: reduce) {
	.pe-btn:hover {
		transform: none;
	}
}

.pe-btn--primary {
	background-color: var(--pe-color-text); /* Chocolate Brown */
	color: var(--pe-color-base);
}

.pe-btn--primary:hover {
	background-color: #3d2f2b; /* Chocolate Brownをわずかに深く */
}

.pe-btn--secondary {
	background-color: var(--pe-color-base);
	color: var(--pe-color-text);
	border-color: var(--pe-color-secondary);
}

.pe-btn--secondary:hover {
	background-color: var(--pe-color-bg-soft);
}

.pe-btn--secondary-fill {
	background-color: var(--pe-color-secondary);
	color: var(--pe-color-text);
	border-color: var(--pe-color-secondary);
}

.pe-btn--secondary-fill:hover {
	opacity: 0.9;
}

.pe-btn--block {
	width: 100%;
}

.pe-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* 写真の上に載せるボタン(Hero等)専用の控えめなバリエーション。
   写真より目立たないよう、半透明・細い枠線のみで構成する(項目3/8)。 */
.pe-btn--ghost-on-photo {
	background-color: rgba(255, 255, 255, 0.14);
	color: var(--pe-color-base);
	border-color: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(2px);
}

.pe-btn--ghost-on-photo:hover {
	background-color: rgba(255, 255, 255, 0.22);
}

/* ------------------------------------------------------------
   2. Hero(項目3: 写真・空間・世界観を最優先し、UIや文字は控えめに)
   写真をフルブリードで大きく見せ、テキストは下部のごく一部にとどめる。

   (提案) .pe-hero__media 内は<picture>によるアートディレクションを推奨する。
   縦長の1枚をモバイル/PCで単純に引き伸ばすと、実写真では
   構図が崩れる(顔や被写体が見切れる等)ため、
     <source media="(min-width: 1024px)" srcset="...wide.jpg">
     <img src="...portrait.jpg" alt="">
   のように、breakpointごとに適切な構図の写真を出し分ける。
   運用時はACFでモバイル用・PC用の2枚を登録できるようにする想定。
   ------------------------------------------------------------ */
.pe-hero {
	position: relative;
	overflow: hidden;
	min-height: 100svh;
}

@media (min-width: 1024px) {
	.pe-hero {
		min-height: 92vh;
	}
}

.pe-hero__media {
	position: absolute;
	inset: 0;
}

.pe-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* テキストを読ませるための最小限のグラデーションのみ。
   写真全体を覆わないよう、下から45%程度に留める。 */
.pe-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(23, 15, 13, 0.5) 0%,
		rgba(23, 15, 13, 0.18) 32%,
		rgba(23, 15, 13, 0) 55%
	);
}

.pe-hero__content {
	position: relative;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--pe-space-md) var(--pe-space-md) var(--pe-space-2xl);
}

.pe-hero__eyebrow {
	/* ブラッシュアップ(提案): ここに表示される"PRIME ESSENCE"はロゴタイプそのものであるため、
	   ヘッダー/フッターのロゴと同じくイタリックを使わず、レタースペーシングで上品さを出す */
	font-family: var(--pe-font-heading-en);
	font-weight: 500;
	font-style: normal;
	font-size: var(--pe-fs-sm);
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: var(--pe-space-sm);
}

.pe-hero__title {
	color: var(--pe-color-base);
	/* 最終調整: 見出しの太さを一段強め、写真の上でも視認性を確保する
	   (h1の基本weightは600だが、Heroのみ700にして少しだけ太くする) */
	font-weight: 700;
	margin-bottom: var(--pe-space-md);
}

.pe-hero__body {
	color: rgba(255, 255, 255, 0.9);
	max-width: 28em;
	margin-bottom: var(--pe-space-lg);
	font-size: var(--pe-fs-base);
	/* サブコピーが3文になったため、本文用line-height(2)よりやや詰め、
	   写真の上でも一つの塊として読みやすくする(提案) */
	line-height: 1.7;
}

.pe-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pe-space-sm);
}

/* ------------------------------------------------------------
   3. Tags / Pills(Gallery: 場所・シーン・料金帯・カラー等)
   項目5: より丸みを持たせ、線を細く軽い印象にする。
   塗りではなく、ごく薄い輪郭線のみで構成する。
   ------------------------------------------------------------ */
.pe-tag {
	display: inline-flex;
	align-items: center;
	padding: 5px 16px;
	border-radius: 999px;
	background-color: transparent;
	border: 1px solid var(--pe-color-border);
	color: var(--pe-color-text-muted);
	font-size: var(--pe-fs-xs);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.pe-tag--accent {
	background-color: transparent;
	border: 1px solid var(--pe-color-accent);
	color: var(--pe-color-text);
}

.pe-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pe-space-xs);
	list-style: none;
	padding: 0;
	margin: 0;
}

/* ------------------------------------------------------------
   4. 装飾事例カード(Gallery card)
   項目4: カードの存在感を弱め、写真そのものが主役になるようにする。
   枠線・背景色・強い角丸・目立つ拡大ホバーを廃止し、
   ごくわずかな角丸(--pe-radius-photo)とフェードのみに留める。
   ------------------------------------------------------------ */
.pe-case-card {
	display: block;
}

.pe-case-card__media {
	position: relative;
	aspect-ratio: 4 / 5; /* モバイルでの縦長表示を基本とする(提案) */
	overflow: hidden;
	border-radius: var(--pe-radius-photo);
}

.pe-case-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--pe-transition-slow), opacity var(--pe-transition-slow);
}

@media (prefers-reduced-motion: reduce) {
	.pe-case-card__media img {
		transition: none;
	}
}

.pe-case-card:hover .pe-case-card__media img {
	transform: scale(1.015); /* 気づく程度のごく穏やかな拡大のみ */
}

.pe-case-card__body {
	padding-top: var(--pe-space-sm);
}

.pe-case-card__title {
	font-size: var(--pe-fs-md);
	font-weight: 400;
	color: var(--pe-color-text);
	margin-bottom: var(--pe-space-xs);
}

/* 装飾事例カードのグリッド(GALLERY/EXPLORE WORKS等で使用)
   ブラッシュアップ(提案): 「写真を主役に、さらに大きく」の要望を受け、
   タブレット以上を4列→3列に変更し、1枚あたりの写真面積を拡大している。
   モバイルは高さが伸びすぎないよう2列のまま維持。 */
.pe-gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--pe-space-md);
}

@media (min-width: 768px) {
	.pe-gallery-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--pe-space-lg);
	}
}

/* 装飾事例の横スクロール一覧(カテゴリナビゲーション等) */
.pe-scroll-row {
	display: flex;
	gap: var(--pe-space-sm);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: var(--pe-space-xs);
	-webkit-overflow-scrolling: touch;
}

.pe-scroll-row::-webkit-scrollbar {
	height: 4px;
}

.pe-scroll-row::-webkit-scrollbar-thumb {
	background-color: var(--pe-color-secondary);
	border-radius: var(--pe-radius-sm);
}

.pe-scroll-row > * {
	scroll-snap-align: start;
	flex: 0 0 auto;
}

/* カテゴリナビゲーション用ピル(EXPLORE WORKS / Gallery) */
/* 【C-12 v0.16.0更新・日本語併記】Gallery絞り込みタブに英語(小)+日本語(大)の2段表示を
   追加するため、flex-direction: column + justify-content: centerに変更した(仕様書6章)。
   「すべて」のような対訳の無い単一テキストの項目は、この変更後も引き続き1行で中央表示される
   (アンカー要素直下の単一テキストノードが1つのflexアイテムとして扱われるため、
   見た目は変わらない)。min-heightは44px→56pxに拡張(2行表示に必要な高さを確保するため)。 */
.pe-category-pill {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 10px 20px;
	border-radius: 999px;
	border: 1px solid var(--pe-color-border);
	background-color: var(--pe-color-base);
	color: var(--pe-color-text);
	font-size: var(--pe-fs-sm);
	transition: background-color var(--pe-transition-fast), border-color var(--pe-transition-fast);
}

.pe-category-pill[aria-current="true"],
.pe-category-pill.is-active {
	background-color: var(--pe-color-text);
	border-color: var(--pe-color-text);
	color: var(--pe-color-base);
}

.pe-category-pill__en {
	display: block;
	font-family: var(--pe-font-heading-en);
	font-style: italic;
	font-size: var(--pe-fs-xs);
	color: var(--pe-color-accent);
	margin-bottom: var(--pe-space-2xs);
}

.pe-category-pill__ja {
	display: block;
	font-size: var(--pe-fs-sm);
	color: var(--pe-color-heading);
}

/* 選択中(アクティブ)状態は背景色が反転する(上記参照)ため、英語・日本語とも同じ白系色に
   統一する(通常時のみChampagne Gold/Chocolate Brownで色分けする)。太字・サイズ差のみで
   階層を維持する。 */
.pe-category-pill[aria-current="true"] .pe-category-pill__en,
.pe-category-pill.is-active .pe-category-pill__en,
.pe-category-pill[aria-current="true"] .pe-category-pill__ja,
.pe-category-pill.is-active .pe-category-pill__ja {
	color: var(--pe-color-base);
}

/* シーンカード(EXPLORE WORKS)。写真は将来カテゴリごとに設定できるようにする想定(TODO)。
   現段階ではテキストのみのカードとして構成する。 */
.pe-scene-card {
	width: 260px;
	padding: var(--pe-space-md);
	border: 1px solid var(--pe-color-border);
	border-radius: var(--pe-radius-md);
	background-color: var(--pe-color-base);
}

.pe-scene-card__name {
	font-size: var(--pe-fs-md);
	color: var(--pe-color-heading);
	margin-bottom: var(--pe-space-xs);
}

.pe-scene-card__body {
	font-size: var(--pe-fs-sm);
	color: var(--pe-color-body);
	margin-bottom: var(--pe-space-sm);
}

.pe-scene-card__link {
	font-size: var(--pe-fs-xs);
	color: var(--pe-color-heading);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* ------------------------------------------------------------
   5. FAQ アコーディオン(カテゴリ表示を採用)
   ------------------------------------------------------------ */
.pe-faq-category {
	margin-bottom: var(--pe-space-lg);
}

.pe-faq-category__title {
	font-size: var(--pe-fs-lg);
	margin-bottom: var(--pe-space-sm);
	padding-bottom: var(--pe-space-xs);
	border-bottom: var(--pe-border-width) solid var(--pe-color-border);
}

.pe-faq-item {
	border-bottom: var(--pe-border-width) solid var(--pe-color-border);
}

.pe-faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pe-space-sm);
	width: 100%;
	padding: var(--pe-space-sm) 0;
	background: none;
	border: none;
	text-align: left;
	font-size: var(--pe-fs-base);
	font-weight: 500;
	color: var(--pe-color-text);
	cursor: pointer;
}

.pe-faq-item__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	position: relative;
}

.pe-faq-item__icon::before,
.pe-faq-item__icon::after {
	content: "";
	position: absolute;
	background-color: var(--pe-color-text);
	transition: transform var(--pe-transition-base);
}

.pe-faq-item__icon::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	transform: translateY(-50%);
}

.pe-faq-item__icon::after {
	top: 0;
	left: 50%;
	width: 1px;
	height: 100%;
	transform: translateX(-50%);
}

.pe-faq-item[open] .pe-faq-item__icon::after {
	transform: translateX(-50%) rotate(90deg);
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.pe-faq-item__icon::before,
	.pe-faq-item__icon::after {
		transition: none;
	}
}

.pe-faq-item__answer {
	padding: 0 0 var(--pe-space-sm);
	color: var(--pe-color-body); /* 最終調整: 実際に読む本文のため可読性優先のダークグレー */
	font-size: var(--pe-fs-sm);
}

/* ------------------------------------------------------------
   6. Sticky CTA(CLAUDE.md 7章)
   モバイル: 画面下部固定・白背景・細い境界線・控えめ・閉じる操作あり
   PC: 右下の控えめな追従CTA
   ------------------------------------------------------------ */
.pe-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--pe-z-sticky-cta);
	display: flex;
	gap: var(--pe-space-xs);
	padding: var(--pe-space-xs) var(--pe-space-sm);
	padding-bottom: max(var(--pe-space-xs), env(safe-area-inset-bottom));
	background-color: var(--pe-color-base);
	border-top: var(--pe-border-width) solid var(--pe-color-border);
	transition: transform var(--pe-transition-base);
}

.pe-sticky-cta[hidden],
.pe-sticky-cta.is-hidden {
	transform: translateY(100%);
	/* 【2026-08-15追加・保険】.pe-mobile-menuと同種のリスク(モバイルSafariの
	   ビューポート高さの誤差により、transformで画面外へ動かしたつもりの領域が
	   実際には数px重なって残ることがある)に備え、非表示中はクリックを一切
	   受け付けないようにする(見た目・アニメーションは変更しない)。 */
	pointer-events: none;
}

.pe-sticky-cta__item {
	flex: 1;
}

.pe-sticky-cta__close {
	position: absolute;
	top: -32px;
	right: var(--pe-space-sm);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--pe-color-base);
	border: var(--pe-border-width) solid var(--pe-color-border);
	color: var(--pe-color-text);
	font-size: var(--pe-fs-sm);
	line-height: 1;
	cursor: pointer;
}

/* PCでは画面下部固定ではなく、右下の控えめな追従CTAにする */
@media (min-width: 1024px) {
	.pe-sticky-cta {
		left: auto;
		right: var(--pe-space-lg);
		bottom: var(--pe-space-lg);
		max-width: 280px;
		flex-direction: column;
		border: var(--pe-border-width) solid var(--pe-color-border);
		border-radius: var(--pe-radius-md);
		box-shadow: var(--pe-shadow-subtle);
	}

	.pe-sticky-cta.is-hidden {
		transform: translateY(calc(100% + var(--pe-space-lg)));
	}

	.pe-sticky-cta__close {
		top: 8px;
		right: 8px;
	}
}

/* ------------------------------------------------------------
   7. Budget Guide カード(Small / Standard / Luxury / Signature)
   ------------------------------------------------------------ */
.pe-budget-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pe-space-sm);
}

@media (min-width: 768px) {
	.pe-budget-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.pe-budget-card {
	padding: var(--pe-space-md);
	border: var(--pe-border-width) solid var(--pe-color-border);
	border-radius: var(--pe-radius-md);
	background-color: var(--pe-color-base);
}

.pe-budget-card__label {
	font-family: var(--pe-font-heading-en);
	font-style: italic;
	font-size: var(--pe-fs-md);
	color: var(--pe-color-accent);
	margin-bottom: var(--pe-space-xs);
}

.pe-budget-card__price {
	font-size: var(--pe-fs-lg);
	margin-bottom: var(--pe-space-xs);
}

.pe-budget-card__note {
	font-size: var(--pe-fs-xs);
	color: var(--pe-color-text-muted);
}

/* ------------------------------------------------------------
   8. FLOW ステップ表示(ご依頼の流れ 1〜5)
   ------------------------------------------------------------ */
.pe-flow-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--pe-space-md);
}

.pe-flow-item {
	display: flex;
	align-items: flex-start;
	gap: var(--pe-space-sm);
}

.pe-flow-item__number {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: var(--pe-border-width) solid var(--pe-color-accent);
	font-family: var(--pe-font-heading-en);
	font-style: italic;
	color: var(--pe-color-text);
}

.pe-flow-item__title {
	font-size: var(--pe-fs-md);
	margin-bottom: 2px;
}

@media (min-width: 768px) {
	.pe-flow-list {
		flex-direction: row;
	}

	.pe-flow-item {
		flex-direction: column;
		align-items: center;
		text-align: center;
		flex: 1;
	}
}

/* ------------------------------------------------------------
   9. セクション見出しパターン(共通)
   ------------------------------------------------------------ */
.pe-section-heading {
	text-align: center;
	margin-bottom: var(--pe-space-lg);
}

.pe-section-heading__eyebrow {
	display: block;
	font-family: var(--pe-font-heading-en);
	font-style: italic;
	font-size: var(--pe-fs-sm);
	color: var(--pe-color-accent);
	margin-bottom: var(--pe-space-xs);
}

.pe-section-heading__body {
	max-width: 40em;
	margin-inline: auto;
	color: var(--pe-color-body); /* 最終調整: リード文は本文として可読性優先のダークグレー */
}

/* ------------------------------------------------------------
   10. ヘッダー / グローバルナビゲーション
   写真(Hero)の上には透明で重ね、スクロールしたら白背景に切り替える。
   Hero自体は「写真が主役」のため、ヘッダーは極力控えめにする。
   ------------------------------------------------------------ */
.pe-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--pe-z-header);
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* 【2026-08-16変更】固定値からtokens.cssの--pe-header-heightを参照するように変更。
	   ページ内アンカーのscroll-margin-top計算(.pe-contact-form-anchor等)と
	   値が二重管理にならないようにするため(見た目上の高さ自体は変更なし: 64px/768px以上80px)。 */
	height: var(--pe-header-height);
	padding-inline: var(--pe-space-sm);
	background-color: var(--pe-color-base);
	border-bottom: 1px solid var(--pe-color-border);
	transition: background-color var(--pe-transition-base), border-color var(--pe-transition-base), box-shadow var(--pe-transition-base);
}

@media (min-width: 768px) {
	.pe-header {
		padding-inline: var(--pe-space-lg);
	}
}

/* フロントページのHero上にオーバーレイする間は透明・白文字にする */
.pe-header--transparent {
	background-color: transparent;
	border-bottom-color: transparent;
}

.pe-header--transparent .pe-header__logo,
.pe-header--transparent .pe-nav__link {
	color: var(--pe-color-base);
}

.pe-header--transparent .pe-header__menu-btn span {
	background-color: var(--pe-color-base);
}

/* Heroを過ぎてスクロールしたら白背景+ブランドカラーへ切り替える */
.pe-header.is-scrolled {
	background-color: rgba(255, 255, 255, 0.96);
	border-bottom-color: var(--pe-color-border);
	box-shadow: var(--pe-shadow-subtle);
}

.pe-header.is-scrolled .pe-header__logo,
.pe-header.is-scrolled .pe-nav__link {
	color: var(--pe-color-heading);
}

.pe-header.is-scrolled .pe-header__menu-btn span {
	background-color: var(--pe-color-heading);
}

.pe-header__logo {
	/* ブラッシュアップ(提案): ロゴにイタリックは使用しない。
	   細身のセリフ体をノーマル体+広めのレタースペーシングで組むことで、
	   Retinaディスプレイでも輪郭がぼやけず、上品な印象を保つ。 */
	font-family: var(--pe-font-heading-en);
	font-style: normal;
	font-weight: 500;
	font-size: var(--pe-fs-md);
	letter-spacing: 0.14em;
	color: var(--pe-color-heading);
	transition: color var(--pe-transition-base);
}

@media (min-width: 768px) {
	.pe-header__logo {
		font-size: var(--pe-fs-lg);
	}
}

/* PC: 横並びナビ */
.pe-nav {
	display: none;
}

@media (min-width: 1024px) {
	.pe-nav {
		display: flex;
		gap: var(--pe-space-lg);
	}

	.pe-nav__link {
		font-size: var(--pe-fs-sm);
		letter-spacing: 0.03em;
		color: var(--pe-color-heading);
		transition: color var(--pe-transition-base), opacity var(--pe-transition-fast);
	}

	.pe-nav__link:hover {
		opacity: 0.6;
	}
}

/* モバイル/タブレット: ハンバーガーボタン */
.pe-header__menu-btn {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: none;
	border: none;
	cursor: pointer;
}

@media (min-width: 1024px) {
	.pe-header__menu-btn {
		display: none;
	}
}

.pe-header__menu-btn span {
	display: block;
	width: 22px;
	height: 1px;
	background-color: var(--pe-color-heading);
	transition: background-color var(--pe-transition-base), transform var(--pe-transition-base), opacity var(--pe-transition-base);
}

/* モバイル用フルスクリーンメニュー */
.pe-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: calc(var(--pe-z-header) + 1);
	background-color: var(--pe-color-base);
	display: flex;
	flex-direction: column;
	padding: var(--pe-space-xl) var(--pe-space-lg);
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none; /* 【2026-08-15追加・不具合修正】下記参照 */
	transition: transform var(--pe-transition-base), opacity var(--pe-transition-base);
}

/* 【2026-08-15追加・根本原因の修正】`.pe-mobile-menu`は`display: flex`を明示指定しているため、
   `.pe-form-field`等と同じ原因(著者スタイルシートのdisplay指定がUAスタイルシートの
   [hidden]規則を上書きしてしまう)により、HTML側の`hidden`属性(初期状態・main.jsの
   closeMenu()が付与)があっても実際には`display: none`にならず、`position: fixed; inset: 0`
   のまま(画面全体を覆うボックスとして)レイアウトに存在し続けていた。
   閉じた状態は`transform: translateY(-100%); opacity: 0`という「見た目だけ」の非表示
   (transform/opacityはヒットテストに影響しない)のみに依存していたため、実際の
   ビューポート高さの誤差(モバイルSafariのアドレスバー等によるvh変動)や、開閉アニメーション
   の途中(0.3〜0.4秒程度)には、画面内に完全に収まりきらない「見えないが押せる」領域が
   生じうる状態だった。その内部には内包する「お問い合わせ」リンク(`.pe-mobile-menu__cta`)が
   あり、Guide・FAQ・Service Areaなど複数ページで、メニューとは無関係な場所(画面上部、
   県選択ボタンや検索バー付近等)をクリックしてもContactへ誤遷移する不具合の原因となっていた
   (v0.15.3で個別対応したSticky CTAの重なり問題とは別原因)。
   対応: (1) `[hidden]`属性が実際に`display: none`になるよう明示的に上書きし、
   閉じている間はレイアウトから完全に取り除く(下記参照)。(2) 開閉アニメーション中の
   過渡的な状態も含めて二重に保険をかけるため、`.is-open`が付いていない間は
   `pointer-events: none`にし、`.is-open`の間だけクリックを受け付けるようにした。
   見た目(表示・アニメーション)は一切変更していない。 */
.pe-mobile-menu[hidden] {
	display: none;
}

.pe-mobile-menu.is-open {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.pe-mobile-menu {
		transition: none;
	}
}

.pe-mobile-menu__close {
	align-self: flex-end;
	width: 44px;
	height: 44px;
	background: none;
	border: none;
	font-size: var(--pe-fs-xl);
	color: var(--pe-color-heading);
	cursor: pointer;
}

.pe-mobile-menu__list {
	list-style: none;
	margin: var(--pe-space-lg) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--pe-space-md);
}

.pe-mobile-menu__list a {
	font-family: var(--pe-font-heading-jp);
	font-size: var(--pe-fs-lg);
	color: var(--pe-color-heading);
	display: flex;
	flex-direction: column;
}

/* 【C-12 v0.16.0追加・日本語併記】既存の.pe-section-heading__eyebrowと同じ考え方
   (小さい英語イタリック・Champagne Gold+下に大きい日本語・Chocolate Brown)を
   Mobile Menuの7項目に適用する。新しいデザイントークンは追加していない
   (仕様書3章。--pe-fs-xs・--pe-space-2xs・--pe-color-accent・--pe-color-headingは
   いずれも既存トークン)。 */
.pe-mobile-menu__link-en {
	display: block;
	font-family: var(--pe-font-heading-en);
	font-style: italic;
	font-size: var(--pe-fs-xs);
	color: var(--pe-color-accent);
	margin-bottom: var(--pe-space-2xs);
}

.pe-mobile-menu__link-ja {
	display: block;
	font-family: var(--pe-font-heading-jp);
	font-size: var(--pe-fs-lg);
	color: var(--pe-color-heading);
}

.pe-mobile-menu__cta {
	margin-top: var(--pe-space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--pe-space-sm);
}

html.pe-menu-open {
	overflow: hidden;
}

/* ------------------------------------------------------------
   11. フッター
   ブラッシュアップ(提案): サイトを締めくくる場所として、
   ・bg-soft よりもう一段深いトーン(bg-footer)
   ・ごく細いアクセントの罫線(上端)
   ・余白をさらに広くとる
   ことで「ブランドらしい余韻」を持たせている。派手な演出は加えていない。
   ------------------------------------------------------------ */
.pe-footer {
	background-color: var(--pe-color-bg-footer);
	border-top: 1px solid rgba(200, 170, 110, 0.35); /* Champagne Goldのごく淡い一本線 */
	padding-block: var(--pe-space-3xl) var(--pe-space-xl);
}

.pe-footer__logo {
	/* ブラッシュアップ(提案): ヘッダーロゴと同じくイタリックを廃止し、
	   広めのレタースペーシングで静かな存在感を出す */
	font-family: var(--pe-font-heading-en);
	font-style: normal;
	font-weight: 500;
	font-size: var(--pe-fs-xl);
	letter-spacing: 0.16em;
	color: var(--pe-color-heading);
}

.pe-footer__tagline {
	color: var(--pe-color-body);
	margin-top: var(--pe-space-xs);
	max-width: 28em;
}

.pe-footer__nav {
	list-style: none;
	margin: var(--pe-space-xl) 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--pe-space-sm) var(--pe-space-md);
}

@media (min-width: 768px) {
	.pe-footer__nav {
		grid-template-columns: repeat(4, auto);
		justify-content: flex-start;
	}
}

.pe-footer__nav a {
	font-size: var(--pe-fs-sm);
	color: var(--pe-color-body);
}

.pe-footer__meta {
	padding-top: var(--pe-space-xl);
	border-top: 1px solid var(--pe-color-border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--pe-space-sm) var(--pe-space-lg);
	font-size: var(--pe-fs-xs);
	color: var(--pe-color-text-muted);
}

.pe-footer__social {
	display: flex;
	gap: var(--pe-space-sm);
	margin-top: var(--pe-space-md);
}

.pe-footer__social a {
	font-size: var(--pe-fs-xs);
	color: var(--pe-color-heading);
	border: 1px solid var(--pe-color-border);
	border-radius: 999px;
	padding: 8px 18px;
}

/* ------------------------------------------------------------
   12. 装飾事例 詳細ページ(single-pe_case.php)
   Gallery 管理番号システム(2026-07-27追加)
   ------------------------------------------------------------ */
.pe-case-detail__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--pe-radius-photo);
}

@media (min-width: 768px) {
	.pe-case-detail__media {
		aspect-ratio: 16 / 9;
	}
}

.pe-case-detail__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 管理番号は「お客様が必要なときに確認できる程度」に留め、目立たせすぎない(ユーザー指示5) */
.pe-case-detail__ref {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-size: var(--pe-fs-xs);
	color: var(--pe-color-text-muted);
	margin: 0 0 var(--pe-space-xs);
}

.pe-case-detail__ref-label {
	font-family: var(--pe-font-heading-en);
	font-weight: 500;
	letter-spacing: 0.14em;
}

.pe-case-detail__ref-value {
	color: var(--pe-color-heading);
	font-weight: 500;
	letter-spacing: 0.03em;
}

/* ------------------------------------------------------------
   13. お問い合わせフォーム + 参考にした装飾事例バッジ
   Contact統合フォーム(page-contact.php)は正式実装済み(v0.8.0〜)。
   ------------------------------------------------------------ */
.pe-reference-badge {
	margin-top: var(--pe-space-lg);
	padding: var(--pe-space-sm) var(--pe-space-md);
	border: var(--pe-border-width) solid var(--pe-color-border);
	border-radius: var(--pe-radius-md);
	background-color: var(--pe-color-bg-soft);
}

.pe-reference-badge[hidden] {
	display: none;
}

.pe-reference-badge__label {
	font-size: var(--pe-fs-xs);
	letter-spacing: 0.1em;
	color: var(--pe-color-text-muted);
	margin: 0 0 4px;
}

.pe-reference-badge__title {
	color: var(--pe-color-heading);
	font-weight: 500;
	margin: 0 0 2px;
}

.pe-reference-badge__no {
	font-size: var(--pe-fs-xs);
	color: var(--pe-color-text-muted);
	margin: 0 0 var(--pe-space-xs);
}

/* 「変更する」「外す」の2アクション(ユーザー指示: 参考事例は変更・解除の両方を選べるように) */
.pe-reference-badge__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pe-space-sm);
}

.pe-reference-badge__change,
.pe-reference-badge__clear {
	background: none;
	border: none;
	padding: 0;
	font-size: var(--pe-fs-xs);
	color: var(--pe-color-text-muted);
	text-decoration: underline;
	cursor: pointer;
}

.pe-contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--pe-space-md);
}

/* 送信完了画面(2026-08-12追加。Issue5) ------------------------------------ */
.pe-contact-complete {
	text-align: center;
	padding: var(--pe-space-lg) var(--pe-space-sm);
}

.pe-contact-complete__title {
	margin: 0 0 var(--pe-space-sm);
}

.pe-contact-complete__body {
	max-width: 32em;
	margin: 0 auto;
	color: var(--pe-color-body);
	line-height: var(--pe-lh-base);
}

.pe-contact-complete__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pe-space-sm);
	margin-top: var(--pe-space-md);
}

.pe-form-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: var(--pe-fs-sm);
	color: var(--pe-color-heading);
}

/* 【2026-08-14追加・不具合修正】`.pe-form-field`が`display: flex`を明示指定しているため、
   これがブラウザ標準スタイル(UAスタイルシート)の`[hidden] { display: none }`より
   優先されてしまい、JS側で`element.hidden = true`にしても実際には非表示にならない
   不具合があった(著者スタイルシートの通常優先度ルールは、UAスタイルシートのルールに
   常に勝るため。ブラウザ間の差ではなく、CSS仕様上どのブラウザでも起こりうる)。
   影響範囲: Contact統合フォームの条件付き項目全般(装飾の用途の第2選択・
   「その他」選択時の詳細入力欄等)、および電話番号の必須/任意バッジ切り替え
   (`.pe-form-field__required`/`.pe-form-field__optional`。同じ原因のため下記もあわせて修正)。
   `.pe-sticky-cta[hidden]`・`.pe-reference-badge[hidden]`は既存の実装で個別に対応済みだったが、
   `.pe-form-field`にはこの対応が漏れていた。 */
.pe-form-field[hidden] {
	display: none;
}

.pe-form-field input,
.pe-form-field select,
.pe-form-field textarea {
	font-family: var(--pe-font-body);
	font-size: var(--pe-fs-base);
	color: var(--pe-color-body);
	border: var(--pe-border-width) solid var(--pe-color-border);
	border-radius: var(--pe-radius-sm);
	padding: 12px 16px;
	background-color: var(--pe-color-base);
	transition: border-color var(--pe-transition-fast);
}

.pe-form-field input:focus,
.pe-form-field select:focus,
.pe-form-field textarea:focus {
	outline: none;
	border-color: var(--pe-color-accent);
}

/* Contactフォーム: 質問文と回答欄の視覚的区別(2026-08-12改善。Issue2)
   罫線で囲む「業務フォーム」的な見た目は避け、極めて薄い背景の「面」の切り替えと、
   文字の強弱(太さ・サイズ・色)だけで階層を表現する。Warm Luxuryの余白感は維持し、
   Contactフォーム(.pe-contact-form配下)のみに適用する(Service Area等の他フォームには影響させない)。 */
.pe-contact-form .pe-form-field {
	gap: 10px;
	padding: var(--pe-space-sm) var(--pe-space-sm) var(--pe-space-xs);
	background-color: var(--pe-color-bg-whisper);
	border-radius: var(--pe-radius-md);
}

/* 質問文(ラベル本文)を回答欄よりわずかに強く見せる */
.pe-contact-form .pe-form-field > span:first-child {
	font-weight: 600;
	font-size: var(--pe-fs-base);
	color: var(--pe-color-heading);
}

/* 補足キャプション(help文言)は、質問文よりさらに一段弱く */
.pe-contact-form .pe-form-field > .pe-caption {
	font-size: var(--pe-fs-xs);
	color: var(--pe-color-text-muted);
	opacity: 0.85;
}

/* 「ホテル側への許可確認状況」等、特に重要な設問を控えめに強調する(2026-08-13追加。10-2)
   警告色・警告アイコンは使わず、Soft Blushの背景+細いアクセント罫線+ゆとりのある余白のみで
   「大切なご案内」であることを伝える。他の設問との差は最小限にとどめ、Warm Luxuryのトーンを保つ。 */
.pe-contact-form .pe-form-field--emphasis {
	background-color: var(--pe-color-bg-soft);
	border-left: 4px solid var(--pe-color-accent);
	padding-left: calc(var(--pe-space-sm) + 4px);
}

/* フォーム下部の注意事項(2026-08-13追加。新しい修正指示・項目13)。
   警告色(赤系)・⚠マークは使わず、.pe-form-field--emphasisと同系統の
   ソフトな背景+控えめな罫線のみで「大切なご案内」であることを伝える。
   全カテゴリ共通のブロックと、選択中カテゴリ専用のブロック(タブ切替と連動。
   data-pe-category-fields属性を回答欄と共通の仕組みで流用)を1つの枠内にまとめて表示する。 */
.pe-contact-notices {
	padding: var(--pe-space-md);
	background-color: var(--pe-color-bg-whisper);
	border: var(--pe-border-width) solid var(--pe-color-border);
	border-radius: var(--pe-radius-md);
}

.pe-contact-notices__heading {
	margin: 0 0 var(--pe-space-xs);
	font-size: var(--pe-fs-sm);
	font-weight: 600;
	color: var(--pe-color-heading);
}

.pe-contact-notices__list {
	margin: 0;
	padding-left: 1.2em;
	list-style: disc;
}

.pe-contact-notices__list + .pe-contact-notices__list {
	margin-top: var(--pe-space-xs);
	padding-top: var(--pe-space-xs);
	border-top: var(--pe-border-width) dashed var(--pe-color-border);
}

.pe-contact-notices__list li {
	font-size: var(--pe-fs-xs);
	line-height: 1.7;
	color: var(--pe-color-text-muted);
}

.pe-contact-notices__list--category li {
	color: var(--pe-color-body);
}

/* 「お急ぎのご相談について」共通案内ボックス(2026-08-14追加。Contact最終修正・項目8)。
   .pe-form-field--emphasis / .pe-contact-notices と同系統の、Soft Blush背景+
   Champagne Goldの細いアクセント罫線のみで控えめに強調する(警告色・アイコンは使わない)。
   電話を問い合わせの主動線として強く押し出さないよう、他の案内文と同程度の文字サイズにとどめる。
   カテゴリタブの直後、フォーム入力開始前に、選択中カテゴリに関わらず常に表示する。 */
.pe-contact-urgent {
	padding: var(--pe-space-sm) var(--pe-space-md);
	background-color: var(--pe-color-bg-soft);
	border-left: 4px solid var(--pe-color-accent);
	border-radius: var(--pe-radius-md);
}

.pe-contact-urgent__heading {
	margin: 0 0 4px;
	font-size: var(--pe-fs-sm);
	font-weight: 600;
	color: var(--pe-color-heading);
}

.pe-contact-urgent__body {
	margin: 0;
	font-size: var(--pe-fs-sm);
	color: var(--pe-color-body);
}

.pe-contact-urgent__tel {
	margin: var(--pe-space-xs) 0 0;
	font-size: var(--pe-fs-sm);
}

.pe-contact-urgent__tel-label {
	margin-right: 4px;
	font-size: var(--pe-fs-xs);
	color: var(--pe-color-text-muted);
	letter-spacing: 0.05em;
}

.pe-contact-urgent__tel a {
	font-weight: 600;
	color: var(--pe-color-heading);
}

.pe-contact-urgent__hours {
	margin-left: 4px;
	font-size: var(--pe-fs-xs);
	color: var(--pe-color-text-muted);
}

/* Contact「連絡手段」案内カード(2026-08-16追加。導線整理・項目5)。
   .pe-budget-card・.pe-contact-urgentと同系統の控えめなカード構成(枠線+角丸のみ)。
   長い説明文ではなく、手段ごとの用途を短く示すことを優先する。
   「ご依頼はこちら(フォーム)」のみ、Soft Blush背景+Champagne Goldの左罫線で
   軽く強調し、フォームが第一推奨であることを視覚的に伝える(色そのものは
   .pe-contact-urgentと同じ落ち着いたトーンを流用し、警告色は使わない)。
   【2026-08-16 Safari実機確認後の追加修正】
   ・カードを4枚→3枚(電話カード削除)に変更したため、2列グリッドではなく
     768px以上で3列均等になるよう調整した(他グリッドと同じ768pxブレークポイントに統一)。
   ・__label(「ご依頼はこちら」等の用途)と__value(フォーム/LINE/Instagramという
     連絡手段名)の視覚的な優先順位を入れ替えた。従来は__valueが大きく__labelが
     小さいキャプション扱いだったため、初見のユーザーが「自分はどれを使えばよいか」を
     判断しづらいという指摘があった。__labelを主(大きく・太く・見出し色)、
     __valueを副(小さく・控えめな色)にすることで、用途が先に目に入るようにした。 */
.pe-contact-channels {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pe-space-sm);
	margin-top: var(--pe-space-lg);
	margin-bottom: var(--pe-space-lg);
}

@media (min-width: 768px) {
	.pe-contact-channels {
		grid-template-columns: repeat(3, 1fr);
	}
}

.pe-contact-channel {
	padding: var(--pe-space-md);
	border: var(--pe-border-width) solid var(--pe-color-border);
	border-radius: var(--pe-radius-md);
	background-color: var(--pe-color-base);
}

.pe-contact-channel--primary {
	background-color: var(--pe-color-bg-soft);
	border-left: 4px solid var(--pe-color-accent);
}

.pe-contact-channel__label {
	margin: 0 0 4px;
	font-size: var(--pe-fs-md);
	font-weight: 600;
	color: var(--pe-color-heading);
	letter-spacing: 0.02em;
}

.pe-contact-channel__value {
	margin: 0 0 4px;
	font-size: var(--pe-fs-sm);
	font-weight: 400;
	/* 【2026-08-16変更】従来のtext-muted(グレー)は背景に埋もれて見えるとのご指摘を受け、
	   新しいブランドアクセント(Deep Rose Burgundy)に変更した。用途ラベル(見出し色)より
	   一段落ち着いた重み付けは維持しつつ、連絡手段名自体の視認性を高めている。 */
	color: var(--pe-color-accent-deep);
}

.pe-contact-channel__body {
	margin: 0 0 var(--pe-space-xs);
	font-size: var(--pe-fs-xs);
	color: var(--pe-color-body);
}

.pe-contact-channel__link {
	font-size: var(--pe-fs-sm);
	color: var(--pe-color-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pe-contact-channel__link:hover {
	color: var(--pe-color-accent);
}

/* 「任意」表示は「必須」バッジより控えめに(色を薄く、枠なし) */
.pe-form-field__optional {
	display: inline;
	margin-left: 6px;
	font-size: var(--pe-fs-xs);
	font-weight: 400;
	color: var(--pe-color-text-muted);
}

/* 【2026-08-14追加・不具合修正】電話番号欄の必須/任意バッジ切り替え(data-pe-phone-required/
   data-pe-phone-optional。「その他のご相談」タブ選択時のみ任意になる)で、`.pe-form-field`と
   同じ原因(著者スタイルシートのdisplay指定がUAスタイルシートの[hidden]規則を上書きしてしまう)
   により、hidden属性を切り替えても実際には両方のバッジが表示されたままになる不具合があった。 */
.pe-form-field__required[hidden],
.pe-form-field__optional[hidden] {
	display: none;
}

/* Contact統合フォーム(2026-07-29追加) ------------------------------------ */

/* honeypot: 人間には完全に見えないが、スクリーンリーダーの読み上げ順序を乱さないよう
   display:noneではなく画面外への移動+視覚的な非表示を併用する。tabindex="-1"はHTML側で指定済み。 */
.pe-hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pe-form-field__required {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	font-size: 10px;
	color: #fff;
	background-color: var(--pe-color-accent);
	border-radius: var(--pe-radius-sm);
	vertical-align: middle;
}

.pe-form-field__radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pe-space-sm) var(--pe-space-md);
}

.pe-form-field__radio {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--pe-fs-sm);
	color: var(--pe-color-body);
}

.pe-form-field__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: var(--pe-fs-sm);
}

.pe-form-field__mismatch {
	color: var(--pe-color-accent);
}

.pe-privacy-notice {
	white-space: pre-line;
	max-height: 10em;
	overflow-y: auto;
	padding: var(--pe-space-sm);
	border: var(--pe-border-width) solid var(--pe-color-border);
	border-radius: var(--pe-radius-sm);
}

/* 【2026-08-16追加(v0.15.11)】依頼内容選択タブのアンカー先ラッパー。
   Contact上部案内カードの「フォームへ進む」(#pe-contact-form)の遷移先。
   固定ヘッダー(.pe-header、position: fixed)はドキュメントの高さに影響しないため、
   scroll-margin-topを指定しないとタブの上端がヘッダーの下に隠れてしまう
   (v0.15.10でidをタブ側へ移しただけでは解決しなかった原因)。
   ヘッダー高さ(--pe-header-height)に加え、余白としてさらに--pe-space-smを足し、
   ヘッダー直下に窮屈に張り付かないようにしている。 */
.pe-contact-form-anchor {
	scroll-margin-top: calc(var(--pe-header-height) + var(--pe-space-sm));
}

.pe-contact-form-anchor__label {
	margin: 0 0 var(--pe-space-xs);
	font-size: var(--pe-fs-sm);
	font-weight: 600;
	color: var(--pe-color-heading);
}

.pe-contact-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pe-space-xs);
}

.pe-contact-tabs__btn {
	flex: 1 1 auto;
	padding: 10px 14px;
	font-size: var(--pe-fs-sm);
	color: var(--pe-color-body);
	background-color: var(--pe-color-base);
	border: var(--pe-border-width) solid var(--pe-color-border);
	border-radius: var(--pe-radius-sm);
	cursor: pointer;
	transition: background-color var(--pe-transition-fast), color var(--pe-transition-fast);
}

.pe-contact-tabs__btn.is-active {
	color: #fff;
	background-color: var(--pe-color-accent);
	border-color: var(--pe-color-accent);
}

/* Service Area(2026-07-29追加) -------------------------------------------- */

.pe-area-search {
	display: flex;
	flex-direction: column;
	gap: var(--pe-space-sm);
}

.pe-area-search__input {
	width: 100%;
	padding: 12px 16px;
	font-size: var(--pe-fs-base);
	border: var(--pe-border-width) solid var(--pe-color-border);
	border-radius: var(--pe-radius-sm);
}

.pe-area-prefecture-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pe-space-xs);
}

/* 【2026-08-15追加・不具合修正】`.pe-area-card`は`display: flex`を明示指定しているため、
   これがブラウザ標準スタイルシート(UAスタイルシート)の`[hidden] { display: none }`より
   優先されてしまい、Service Areaの県フィルター・市区町村検索(assets/js/main.jsの
   initServiceAreaSearch()がitem.hiddenを切り替える)を実行しても、実際には非表示に
   ならず全件表示されたままになっていた不具合(`.pe-mobile-menu`・`.pe-form-field`と
   同じ原因)。JS側のロジック・データ構造には問題がない。 */
.pe-area-card[hidden] {
	display: none;
}

.pe-area-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--pe-space-sm);
	padding: var(--pe-space-sm) var(--pe-space-md);
	border: var(--pe-border-width) solid var(--pe-color-border);
	border-radius: var(--pe-radius-sm);
}

.pe-area-card__status {
	font-size: var(--pe-fs-sm);
	padding: 2px 10px;
	border-radius: var(--pe-radius-sm);
	background-color: var(--pe-color-surface, #f4f2ef);
}

.pe-area-card__status--available {
	color: #1a6b3c;
}

.pe-area-card__status--consult {
	color: var(--pe-color-accent);
}

.pe-area-card__status--closed {
	color: var(--pe-color-body-muted, #8a8a8a);
}

/* ------------------------------------------------------------
   13b. Service Area — 市区町村カードのスマートフォン専用レイアウト
   【2026-08-16追加・C-12とは別件のご指摘への追加対応】
   PC(768px以上)は上記13章の内容から一切変更しない(display: flexのまま)。
   スマートフォン(767px以下)のみ、既存の2つの内側div(1つ目: 市区町村名・ふりがな・
   出張費等の情報／2つ目: ステータスバッジ・ボタン)をdisplay: contentsで透過させ、
   .pe-area-card自体をCSS Gridの親として再配置することで、
     1行目: 市区町村名(左) ／ ステータス(右)
     2行目: ふりがな
     3行目: 出張費・ご依頼可能金額
     4行目: 相談ボタン(全幅)
   という縦に圧縮したレイアウトにする。
   page-service-area.php(HTML)・assets/js/main.js(JS)は一切変更していない。
   JS側のinitServiceAreaSearch()はdata-pe-area-item/-prefecture/-name/-kana属性と
   [hidden]プロパティのみを参照しており、内側の要素構造には依存していないことを確認済みのため、
   このCSSのみの変更で県フィルター・検索・表示/非表示の既存ロジックへの影響はない。
   料金データ(出張費・ご依頼可能金額の文言・値)自体も変更していない。
   ------------------------------------------------------------ */
@media (max-width: 767px) {
	.pe-area-card {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"name   status"
			"kana   kana"
			"fee    fee"
			"action action";
		align-items: start;
		row-gap: var(--pe-space-2xs);
		column-gap: var(--pe-space-sm);
		padding: var(--pe-space-sm);
	}

	.pe-area-card > div:first-child,
	.pe-area-card > div:last-child {
		display: contents;
	}

	/* 元のdiv区切りに使われていた<br>はグリッド上では不要な空アイテムになってしまうため
	   非表示にする(情報の削除ではなく、改行の実現方法をCSS Gridの行に置き換えるだけ)。 */
	.pe-area-card br {
		display: none;
	}

	.pe-area-card > div:first-child > strong {
		grid-area: name;
		align-self: center;
	}

	.pe-area-card > div:first-child > span.pe-caption:first-of-type {
		grid-area: kana;
		justify-self: start;
	}

	.pe-area-card > div:first-child > span.pe-caption:nth-of-type(2) {
		grid-area: fee;
		justify-self: start;
	}

	.pe-area-card__status {
		grid-area: status;
		justify-self: end;
		align-self: center;
	}

	.pe-area-card > div:last-child > a.pe-btn {
		grid-area: action;
		width: 100%;
	}
}

/* ------------------------------------------------------------
   14. パンくずリスト(2026-07-29追加)
   CLAUDE.md 15章の技術要件対応。写真より目立たせないよう、
   ごく小さく控えめなキャプション調で表示する。
   ------------------------------------------------------------ */
.pe-breadcrumb {
	margin-bottom: var(--pe-space-md);
}

.pe-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--pe-fs-xs);
	color: var(--pe-color-text-muted);
}

.pe-breadcrumb__item:not(:last-child)::after {
	content: "/";
	margin-left: 6px;
	color: var(--pe-color-border);
}

.pe-breadcrumb__item a {
	color: var(--pe-color-text-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pe-breadcrumb__item a:hover {
	color: var(--pe-color-heading);
}

/* ------------------------------------------------------------
   9b. 本文内の内部リンク(FAQ回答・Guide本文等。2026-08-15追加)
   派手なボタンにはせず、パンくずリンクと同じ「控えめな下線」の
   トーンで、リンクであることが自然に認識できる程度にとどめる。
   ------------------------------------------------------------ */
.pe-inline-link {
	color: var(--pe-color-text-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pe-inline-link:hover {
	color: var(--pe-color-heading);
}

.pe-breadcrumb__item [aria-current="page"] {
	color: var(--pe-color-heading);
}

/* ------------------------------------------------------------
   15. ページネーション(Gallery一覧/2026-07-29追加)
   ------------------------------------------------------------ */
.pe-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--pe-space-xs);
	flex-wrap: wrap;
}

.pe-pagination a,
.pe-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 10px;
	border-radius: var(--pe-radius-sm);
	font-size: var(--pe-fs-sm);
	color: var(--pe-color-text);
}

.pe-pagination a {
	border: var(--pe-border-width) solid var(--pe-color-border);
	transition: background-color var(--pe-transition-fast);
}

.pe-pagination a:hover {
	background-color: var(--pe-color-bg-soft);
}

.pe-pagination .current {
	background-color: var(--pe-color-text);
	color: var(--pe-color-base);
}

/* ------------------------------------------------------------
   16. Aboutページ — Philosophyブロック(2026-07-29追加)
   写真とテキストを交互に配置する、静かで余白の広いレイアウト。
   ------------------------------------------------------------ */
.pe-philosophy-block {
	display: grid;
	gap: var(--pe-space-md);
	align-items: center;
}

@media (min-width: 768px) {
	.pe-philosophy-block {
		grid-template-columns: 1fr 1fr;
		gap: var(--pe-space-xl);
	}

	.pe-philosophy-block--reverse .pe-philosophy-block__media {
		order: 2;
	}
}

.pe-philosophy-block__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--pe-radius-photo);
}

.pe-philosophy-block__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pe-philosophy-block__eyebrow {
	display: block;
	font-family: var(--pe-font-heading-en);
	font-style: italic;
	font-size: var(--pe-fs-sm);
	color: var(--pe-color-accent);
	margin-bottom: var(--pe-space-xs);
}

.pe-philosophy-block__body {
	color: var(--pe-color-body);
	margin-top: var(--pe-space-sm);
}

.pe-keyword-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pe-space-xs);
	list-style: none;
	padding: 0;
	margin: 0;
}

.pe-keyword-list__item {
	padding: 10px 22px;
	border: var(--pe-border-width) solid var(--pe-color-secondary);
	border-radius: 999px;
	font-family: var(--pe-font-heading-en);
	font-size: var(--pe-fs-sm);
	letter-spacing: 0.04em;
	color: var(--pe-color-heading);
}