@charset "UTF-8";
/**
 * FABLE5 30ページ デザインシステム正本
 * 「工房手控 — 記録の美」統合版
 *
 * 正本ドキュメント: docs/FABLE5_30P_DESIGN_SYSTEM.md
 * 本番テーマ(wp/)から完全隔離。f5- 接頭辞のみ使用。
 *
 * 原則:
 *  - 信頼は証拠から。台帳（所蔵/処置/期間）の精度を美とする
 *  - 静けさは行長・基線・罫線の精度で作る（薄く小さい文字では作らない）
 *  - 帳紫 #5B254A は「表紙」（ヘッダー/フッター/相談帯）専用。本文は生成りと墨
 *  - 朱 #E96200 は落款: 1ページ1箇所（H1肩書き行の印章角）のみ
 *  - 影・カード面・角丸・グラデーション・パララックス・hover拡大は使用しない
 *  - 無内容帯の上限 120px / 390px では2列グリッド禁止
 */

/* ============================================================
   0. トークン
   ============================================================ */
.f5-page {
  /* 紙と墨（既存 tokens.css と同値。追加色は作らない） */
  --f5-paper:     #F5F0E8;
  --f5-paper-alt: #FAFAF7;
  --f5-ink:       #1A1A1A;
  --f5-ink-note:  #6B6B6B;   /* 注記・キャプションの下限色 */
  --f5-cover:     #5B254A;   /* 帳紫=表紙。ヘッダー/フッター/相談帯専用 */
  --f5-cover-ink: #F2EBDF;   /* 表紙上の文字 */
  --f5-shu:       #E96200;   /* 朱=落款。1ページ1箇所 */
  --f5-gold:      #B8985A;   /* 金=罫線・ボタン枠専用 */
  --f5-wakaba:    #7A8B5A;   /* 若葉=一般系の番号・表ラベル罫のみ */
  --f5-gunjo:     #1F3A5F;   /* 群青=寺社系の番号・表ラベル罫のみ */

  /* 罫線（1pxヘアラインのみ） */
  --f5-rule:      rgba(107, 107, 107, 0.35);
  --f5-rule-gold: rgba(184, 152, 90, 0.5);

  /* 書体 */
  --f5-serif: "Noto Serif JP", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", serif;

  /* タイプスケール（PC） */
  --f5-fs-h1:   30px;
  --f5-fs-h2:   26px;
  --f5-fs-h3:   19px;
  --f5-fs-lead: 18px;
  --f5-fs-body: 16px;
  --f5-fs-note: 13px;

  /* 余白スケール（2段階＋内部2段のみ） */
  --f5-sp-section: 96px;   /* 節間（大） */
  --f5-sp-block:   64px;   /* 節間（中）・補助節 */
  --f5-sp-inner:   48px;   /* 節内 */
  --f5-sp-el:      24px;   /* 要素間 */

  /* 判型 */
  --f5-w-wrap:   1040px;   /* コンテナ */
  --f5-w-figure: 880px;    /* 図版段・台帳段 */
  --f5-w-body:   640px;    /* 本文段（全角40字） */

  /* 人格色（既定=一般。寺社は .f5--temple が上書き） */
  --f5-persona: var(--f5-wakaba);
}

.f5--temple { --f5-persona: var(--f5-gunjo); }

/* ============================================================
   1. ベース（.f5-main 配下のみ。ヘッダー/フッターの共有部品には触れない）
   ============================================================ */
.f5-main {
  background: var(--f5-paper);
  color: var(--f5-ink);
  font-family: var(--f5-serif);
  font-size: var(--f5-fs-body);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.f5-main *,
.f5-main *::before,
.f5-main *::after { box-sizing: border-box; }
.f5-main img { max-width: 100%; height: auto; display: block; }
.f5-main p { margin: 0 0 1.6em; }
.f5-main p:last-child { margin-bottom: 0; }
/* style.css のグローバル中央揃え（h1 は !important 付き）を遮断（組版は左基調） */
.f5-main h1, .f5-main h2, .f5-main h3 { text-align: left !important; }

/* focus-visible: outline:none の全廃（機能要件） */
.f5-page a:focus-visible,
.f5-page button:focus-visible {
  outline: 2px solid var(--f5-shu);
  outline-offset: 2px;
}

/* リンク: 本文中は墨＋金の下線。hoverは下線濃度のみ（動かさない） */
.f5-main a {
  color: var(--f5-ink);
  text-decoration: underline;
  text-decoration-color: var(--f5-rule-gold);
  text-underline-offset: 0.28em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.f5-main a:hover { text-decoration-color: var(--f5-gold); }

/* ============================================================
   2. 判型（コンテナ）
   ============================================================ */
.f5-wrap   { max-width: var(--f5-w-wrap);   margin-inline: auto; padding-inline: 32px; }
.f5-figure-w { max-width: calc(var(--f5-w-figure) + 64px); margin-inline: auto; padding-inline: 32px; }
.f5-body-w { max-width: calc(var(--f5-w-body) + 64px);   margin-inline: auto; padding-inline: 32px; }

/* ============================================================
   3. パンくず
   ============================================================ */
.f5-breadcrumb {
  padding-top: 20px;
  font-size: var(--f5-fs-note);
  color: var(--f5-ink-note);
  letter-spacing: 0.04em;
}
.f5-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5em; }
.f5-breadcrumb li + li::before { content: "／"; margin-right: 0.5em; color: var(--f5-rule); }
.f5-breadcrumb a { color: var(--f5-ink-note); text-decoration-color: transparent; }
.f5-breadcrumb a:hover { text-decoration-color: var(--f5-rule-gold); }
.f5-breadcrumb [aria-current="page"] { color: var(--f5-ink); }

/* ============================================================
   4. 題字（H1ブロック）— 肩書き行＋落款・H1・リード・金短罫
   ============================================================ */
.f5-title {
  padding-top: var(--f5-sp-inner);
  padding-bottom: var(--f5-sp-inner);
}
.f5-title__kata {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--f5-fs-note);
  letter-spacing: 0.22em;
  color: var(--f5-ink-note);
  margin-bottom: 14px;
}
/* 落款: 朱の印章角。1ページ1箇所（ここ以外で朱を使わない） */
.f5-title__kata::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--f5-shu);
  flex: none;
}
.f5-title h1 {
  margin: 0;
  font-size: var(--f5-fs-h1);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.6;
}
.f5-title__lead {
  margin-top: 18px;
  max-width: var(--f5-w-body);
  font-size: var(--f5-fs-lead);
  line-height: 1.9;
  letter-spacing: 0.03em;
}
.f5-title::after {
  content: "";
  display: block;
  width: 56px;
  border-top: 1px solid var(--f5-gold);
  margin-top: 28px;
}

/* ============================================================
   5. 節（セクション）— 漢数字＋H2 の単一リズム
   ============================================================ */
.f5-section { padding-block: var(--f5-sp-section) 0; }
.f5-section:last-of-type { padding-bottom: var(--f5-sp-section); }
.f5-section--sub { padding-block: var(--f5-sp-block) 0; }   /* 補助節: 余白半減で序列 */

/* 白磁の交互帯（面切替は罫を伴う） */
.f5-section--alt {
  background: var(--f5-paper-alt);
  border-top: 1px solid var(--f5-rule);
  border-bottom: 1px solid var(--f5-rule);
  padding-block: var(--f5-sp-section);
  margin-top: var(--f5-sp-section);
}
.f5-section--alt + .f5-section { padding-top: var(--f5-sp-section); }

.f5-h2 { margin: 0 0 var(--f5-sp-inner); }
.f5-h2__num {
  display: block;
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--f5-persona);
  margin-bottom: 12px;
}
.f5-h2 h2 {
  margin: 0;
  font-size: var(--f5-fs-h2);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
}
.f5-h2::after {
  content: "";
  display: block;
  width: 40px;
  border-top: 1px solid var(--f5-gold);
  margin-top: 18px;
}
/* 補助節のH2は一段小さく（級差で序列） */
.f5-section--sub .f5-h2 h2 { font-size: 20px; }
.f5-section--sub .f5-h2 { margin-bottom: 32px; }

.f5-main h3 {
  margin: 0 0 16px;
  font-size: var(--f5-fs-h3);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

/* リード（H2直下・本文の前） */
.f5-lead {
  max-width: var(--f5-w-body);
  font-size: var(--f5-fs-lead);
  line-height: 1.9;
  margin-bottom: 40px;
}

/* 本文段: 全角40字 */
.f5-prose { max-width: var(--f5-w-body); }

/* 注記 */
.f5-note {
  font-size: var(--f5-fs-note);
  color: var(--f5-ink-note);
  line-height: 1.8;
  letter-spacing: 0.03em;
}

/* ============================================================
   6. 図版 — 比率固定＋台帳キャプション
   ============================================================ */
.f5-figure { margin: 0; }
.f5-figure__frame {
  position: relative;
  overflow: hidden;
  background: var(--f5-paper-alt);
  border: 1px solid var(--f5-rule);
}
.f5-figure__frame img { width: 100%; height: 100%; object-fit: cover; }
.f5-figure--32 .f5-figure__frame { aspect-ratio: 3 / 2; }   /* 横物 */
.f5-figure--45 .f5-figure__frame { aspect-ratio: 4 / 5; }   /* 縦物（掛軸） */
.f5-figure--43 .f5-figure__frame { aspect-ratio: 4 / 3; }   /* 記録一覧 */

/* ヒーロー図版: グリッド内・高さ上限480px（全幅暗幕・文字載せは廃止） */
.f5-hero { padding-top: 8px; }
.f5-hero .f5-figure__frame { aspect-ratio: 21 / 9; max-height: 480px; }

/* 台帳キャプション */
.f5-figure figcaption {
  margin-top: 12px;
  font-size: var(--f5-fs-note);
  color: var(--f5-ink-note);
  line-height: 1.8;
}
.f5-figure figcaption .f5-cap-ledger {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0;
}
.f5-cap-ledger > div { display: flex; }
.f5-cap-ledger > div + div::before {
  content: "";
  border-left: 1px solid var(--f5-rule);
  margin-inline: 12px;
}
.f5-cap-ledger dt { font-weight: 600; margin-right: 0.6em; }
.f5-cap-ledger dt::after { content: "："; }
.f5-cap-ledger dd { margin: 0; }

/* 畳割り 1:2 / 2:1（写真:本文の不等分割） */
.f5-tatami {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--f5-sp-inner);
  align-items: start;
}
.f5-tatami--photo-wide { grid-template-columns: 2fr 1fr; }

/* ============================================================
   7. 台帳（2列リスト）— 症状表・地域・記録メタの共通様式
   ============================================================ */
.f5-ledger {
  margin: 0;
  border-top: 1px solid var(--f5-rule);
}
.f5-ledger__row {
  display: grid;
  grid-template-columns: minmax(150px, 260px) 1fr;
  gap: 24px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--f5-rule);
}
.f5-ledger__row dt {
  font-weight: 600;
  letter-spacing: 0.04em;
  border-left: 2px solid var(--f5-persona);
  padding-left: 14px;
  line-height: 1.7;
}
.f5-ledger__row dd { margin: 0; line-height: 1.9; }
.f5-ledger__row dd .f5-note { display: block; margin-top: 6px; }

/* ============================================================
   8. 工程（縦一列の台帳リスト・漢数字）
   ============================================================ */
.f5-flow { list-style: none; max-width: var(--f5-w-figure); margin: 0; padding: 0; border-top: 1px solid var(--f5-rule); }
.f5-flow > li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 24px;
  padding: 28px 4px;
  border-bottom: 1px solid var(--f5-rule);
}
.f5-flow__num {
  font-size: 22px;
  letter-spacing: 0.1em;
  color: var(--f5-persona);
  line-height: 1.5;
}
.f5-flow h3 { margin-bottom: 8px; font-size: 17px; }
.f5-flow p { max-width: var(--f5-w-body); margin-bottom: 0; }

/* ============================================================
   9. 品目一覧（修復対象）— カードではなく罫の目録
   ============================================================ */
.f5-items {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--f5-rule);
  border-left: 1px solid var(--f5-rule);
}
.f5-items > li {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border-bottom: 1px solid var(--f5-rule);
  border-right: 1px solid var(--f5-rule);
}
.f5-items > li > div { display: flex; flex-direction: column; flex: 1 1 auto; }
.f5-items h3 {
  margin: 0 0 14px;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--f5-ink);
}
/* 品目名の下の短い罫 = persona色（一般=若葉/寺社=群青）。設計上の「表ラベル罫」 */
.f5-items h3::after {
  content: "";
  display: block;
  width: 28px;
  margin-top: 13px;
  border-top: 2px solid var(--f5-persona);
}
.f5-items p { margin: 0; font-size: var(--f5-fs-body); line-height: 1.9; }
/* 下層リンク: 全項目統一。無い品目は f5-items__nolink で非リンク表記 */
.f5-items__more {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 18px;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--f5-gold);
}
.f5-items__more::after { content: " →"; }
.f5-main .f5-items__more { text-decoration: none; }
.f5-main .f5-items__more:hover { color: var(--f5-ink); }
.f5p-nowrap { white-space: nowrap; }

/* ============================================================
   10. 修復記録 — 0件=節ごと非表示 / 1件=一点 / 3件以上=台帳グリッド
   ============================================================ */
.f5-records { display: grid; gap: var(--f5-sp-inner); }
.f5-records--multi {
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}
/* 記録の画像もクリックで詳細へ（枠いっぱいのリンク面） */
.f5-records .f5-figure__frame a.f5-rec-imglink { display: block; width: 100%; height: 100%; }
/* 「もっと見る」= 施工事例一覧への節末ボタン（金枠・.f5-btn の作法を踏襲） */
.f5-records-more { margin-top: var(--f5-sp-inner); text-align: center; }
.f5-records-more__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85em;
  min-width: 260px;
  padding: 16px 42px;
  border: 1px solid var(--f5-gold);
  color: var(--f5-gold);
  font-size: 15px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  background-color: transparent;
  transition: background-color 320ms cubic-bezier(0.25, 0.1, 0.25, 1),
              color 320ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.f5-main .f5-records-more__link { text-decoration: none; color: var(--f5-gold); }
.f5-records-more__arrow {
  display: inline-block;
  text-indent: 0;
  font-size: 14px;
  transition: transform 320ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.f5-main .f5-records-more__link:hover,
.f5-main .f5-records-more__link:focus-visible {
  background-color: var(--f5-gold);
  color: var(--f5-cover-ink);
}
.f5-main .f5-records-more__link:hover .f5-records-more__arrow,
.f5-main .f5-records-more__link:focus-visible .f5-records-more__arrow {
  transform: translateX(6px);
}
.f5-records .f5-figure figcaption strong {
  display: block;
  font-size: 15px;
  color: var(--f5-ink);
  font-weight: 600;
  margin-bottom: 6px;
}
/* 1件時: 畳割りで大きく */
.f5-records--single .f5-figure { max-width: var(--f5-w-figure); }

/* 修復作品集 — 画像＋タイトルのみ・リンクなし（記録と対のセクション）。
   グリッドは f5-records--multi/pair/single を流用（列指定はそれらの単独セレクタが効く） */
.f5-gallery { display: grid; gap: var(--f5-sp-inner); }
.f5-gallery .f5-figure figcaption { margin-top: 12px; }
.f5-gallery__title {
  display: block;
  font-size: 15px;
  color: var(--f5-ink);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

/* 販促バナー・LINE CTA（各ページに散らして配置）。控えめな幅で中央に */
.f5-promo { margin-block: var(--f5-sp-block); text-align: center; }
.f5-promo__banner { display: inline-block; max-width: 600px; width: 100%; }
.f5-promo__banner img { width: 100%; height: auto; display: block; }

/* LINE相談パネル — 帳紫の小相談帯（金罫の装丁枠・相談帯 .f5-contact と同じ作法） */
.f5-linecta {
  position: relative;
  max-width: 620px;
  margin-inline: auto;
  padding: 52px 44px;
  background: var(--f5-cover);
  color: var(--f5-cover-ink);
  text-align: center;
}
.f5-linecta::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--f5-rule-gold);
  pointer-events: none;
}
.f5-linecta__label {
  position: relative;
  display: block;
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--f5-gold);
  margin-bottom: 20px;
}
.f5-linecta__text {
  position: relative;
  max-width: 30em;
  margin: 0 auto 32px;
  font-size: var(--f5-fs-lead);
  color: var(--f5-cover-ink);
  line-height: 2;
  letter-spacing: 0.04em;
}
.f5-linecta__btn {
  position: relative;
  display: inline-block;
  min-width: 268px;
  padding: 17px 40px;
  background: #06C755;
  border: 1px solid #06C755;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  transition: background-color 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.f5-linecta__btn:hover { background: #05b34c; border-color: #05b34c; }
/* ベーステーマ（style.css/news.css）の a 下線・段落 text-align を遮断（.f5-contact と同じ作法） */
.f5-main .f5-linecta { text-align: center; }
.f5-main .f5-linecta__label,
.f5-main .f5-linecta__text { text-align: center; }
.f5-main .f5-linecta__btn,
.f5-main .f5-linecta__btn:hover { text-decoration: none; color: #FFFFFF; }
@media (max-width: 600px) {
  .f5-promo { margin-block: var(--f5-sp-block); }
  .f5-linecta { padding: 40px 22px; }
  .f5-linecta::before { inset: 8px; }
  .f5-linecta__text { font-size: var(--f5-fs-body); }
  .f5-linecta__btn { min-width: 0; width: auto; padding: 15px 34px; font-size: 15px; }
}

/* ============================================================
   11. FAQ — 現行の強み。体裁維持・Q記号のみ濃く
   ============================================================ */
.f5-faq { border-top: 1px solid var(--f5-rule); max-width: var(--f5-w-figure); }
.f5-faq__item { border-bottom: 1px solid var(--f5-rule); padding: 28px 4px; }
.f5-faq__q {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.04em;
  line-height: 1.8;
}
.f5-faq__q::before { content: "問"; color: var(--f5-persona); font-weight: 600; }
.f5-faq__a {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  margin-top: 14px;
  line-height: 1.9;
}
.f5-faq__a::before { content: "答"; color: var(--f5-ink-note); }
.f5-faq__a p { margin: 0; }

/* ============================================================
   12. 関連ページ・対応地域 — 自然文アンカーの目録（カード禁止）
   ============================================================ */
.f5-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--f5-rule); max-width: var(--f5-w-figure); }
.f5-index > li { border-bottom: 1px solid var(--f5-rule); }
.f5-index a {
  display: block;
  padding: 18px 4px;
  text-decoration: none;
}
.f5-index a .f5-index__t { text-decoration: underline; text-decoration-color: var(--f5-rule-gold); text-underline-offset: 0.28em; text-decoration-thickness: 1px; }
.f5-index a:hover .f5-index__t { text-decoration-color: var(--f5-gold); }
.f5-index__t { display: block; font-weight: 600; letter-spacing: 0.04em; }
.f5-index__d { display: block; margin-top: 4px; font-size: var(--f5-fs-note); color: var(--f5-ink-note); }

/* 対応地域: 県名＋自然文リンクの台帳 */
.f5-areas .f5-ledger__row dd a { margin-right: 1.4em; display: inline-block; }

/* ============================================================
   13. 相談帯（表紙色）— CTAは静かに一回
   ============================================================ */
.f5-contact {
  margin-top: var(--f5-sp-section);
  background: var(--f5-cover);
  border-top: 1px solid var(--f5-rule-gold);
  color: var(--f5-cover-ink);
  padding-block: 72px;
}
.f5-contact .f5-h2__num,
.f5-contact h2 { color: var(--f5-cover-ink); }
.f5-contact .f5-h2::after { border-color: var(--f5-gold); }
/* 帯内リンクの継承色遮断: .f5-main a の墨色が帳紫上で判読不能になるバグの根治 */
.f5-main .f5-contact a { color: var(--f5-cover-ink); text-decoration-color: rgba(184, 152, 90, 0.6); }
.f5-main .f5-contact a:hover { text-decoration-color: var(--f5-gold); }
.f5-main .f5-contact a.f5-btn,
.f5-main .f5-contact a.f5-contact__tel { text-decoration: none; }
.f5-contact__lead { max-width: 640px; margin-bottom: 40px; }
.f5-contact__row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.f5-btn {
  display: inline-block;
  min-width: 180px;
  padding: 14px 28px;
  border: 1px solid var(--f5-gold);
  color: var(--f5-cover-ink);
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.1em;
  transition: background-color 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.f5-btn:hover { background: rgba(184, 152, 90, 0.14); }
.f5-contact__tel {
  font-size: 24px;
  letter-spacing: 0.06em;
  color: var(--f5-cover-ink);
  text-decoration: none;
}
.f5-contact__tel small { display: block; font-size: 13px; letter-spacing: 0.14em; color: rgba(242, 235, 223, 0.85); }
.f5-contact .f5-note { color: rgba(242, 235, 223, 0.75); }

/* 本文側の静かな導線（節末の一文） */
.f5-cta-line { margin-top: 32px; font-size: 15px; }

/* ============================================================
   14. 表紙の綴じ — フッター帳紫統一（design-lab内のみの提案表現）
   ============================================================ */
/* 既存ヘッダーの水平スクロール解消: #headerF が width:100%+padding32px を
   content-box で持ち 1472px に膨張する既存バグの隔離修正（本番修正はCodex仕様書 §既知バグ） */
.f5-page #headerF { box-sizing: border-box; }

/* 既存PCヘッダーは position:absolute（高さ82px）で本文に重なるため、
   本文先頭をヘッダー高さぶん逃がす（パンくず潜り込みの根治） */
@media (min-width: 841px) {
  .f5-page .f5-main { padding-top: 82px; }
}

/* フッター内蔵CTAブロックは相談帯と重複し、JS未読込時に不可視の空洞
   （272〜395px）になるため f5 ページでは出力扱いにしない（Codex仕様書 §フッター） */
.f5-page footer .footer-cta-wrap { display: none; }

/* フッターナビの語中改行禁止（768で「表具屋と/は」等に割れる既存バグ）。
   nowrap 単独では列間0で「表具屋とはサービス」と連結するため最小間隔も保証 */
@media (max-width: 840px) {
  .f5-page footer .bg08F li { white-space: nowrap; padding-right: 1.5em; }
}

/* 601–840px: 既存SPヘッダーのスタイルがこの帯域に存在しないため、
   既存SP実装（#582545・ロゴ147px）を忠実に補間する */
@media (min-width: 601px) and (max-width: 840px) {
  .f5-page .headerSp {
    position: relative;
    z-index: 13;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #582545;
    padding: 8px 16px 8px 16px;
    box-shadow: 0px 4px 4px 0px #00000054; /* 既存SPヘッダーの再現（新規装飾ではない） */
  }
  .f5-page .headerSpLogo img { width: 147px; height: auto; }
  /* 既存390実装（白円35px＋金線）をそのまま使い、absolute+translate の
     位置指定のみフレックス内の静的配置へ戻す（白円の上端欠けの根治） */
  .f5-page .hamburger {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    flex: none;
    margin-right: 10px;
  }
  .f5-page .globalMenuSp { display: none; }
}

.f5-page footer .bg08,
.f5-page footer .bg08F { background: var(--f5-cover) !important; }
.f5-page footer .bg08 { padding-top: 56px !important; }

/* SP固定CTAバー（既存部品の再様式化: 表紙色・金罫） */
.f5-spbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  display: none;
  background: var(--f5-cover);
  border-top: 1px solid var(--f5-rule-gold);
}
.f5-spbar a {
  flex: 1;
  padding: 13px 4px;
  text-align: center;
  color: var(--f5-cover-ink);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-decoration: none;
  font-family: var(--f5-serif);
}
.f5-spbar a + a { border-left: 1px solid rgba(184, 152, 90, 0.35); }

/* ============================================================
   15. 人格差分
   ============================================================ */
/* 寺社: 台帳密度・書面主義。記録キャプション必須・LINE後置 */
.f5--temple .f5-ledger__row { padding-block: 24px; }
.f5--temple .f5-flow__num { font-size: 24px; }

/* 京都: 番号なし・一段組560px・余白一段広く・写真一点 */
.f5--kyoto {
  --f5-sp-section: 128px;
  --f5-w-body: 560px;
}
.f5--kyoto .f5-h2__num { display: none; }
.f5--kyoto .f5-prose { max-width: 560px; }

/* ============================================================
   16. レスポンシブ
   PC ≥1024 / tablet 601–1023 / SP ≤600（390は1カラム徹底）
   ============================================================ */
@media (max-width: 1023px) {
  .f5-page { --f5-sp-section: 80px; }
  .f5-records--multi { grid-template-columns: repeat(2, 1fr); }
  .f5-tatami, .f5-tatami--photo-wide { grid-template-columns: 1fr; }
  .f5-tatami .f5-figure { max-width: 560px; }
}

/* 既存ヘッダーのタブレット崩れ対策（820px以下でSPヘッダーへ切替: design-lab内提案） */
@media (max-width: 840px) {
  .f5-page header .pc { display: none !important; }
  .f5-page header .sp { display: block !important; }
  .f5-items { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .f5-page {
    --f5-fs-h1:   24px;
    --f5-fs-h2:   22px;
    --f5-fs-h3:   17px;
    --f5-fs-lead: 17px;
    --f5-fs-body: 15px;
    --f5-sp-section: 64px;
    --f5-sp-block:   48px;
    --f5-sp-inner:   32px;
  }
  .f5--kyoto { --f5-sp-section: 80px; }

  .f5-wrap, .f5-figure-w, .f5-body-w { padding-inline: 20px; }

  /* 390: 2列グリッド全面禁止 → 全部1カラム */
  .f5-ledger__row { grid-template-columns: 1fr; gap: 8px; padding-block: 16px; }
  .f5-ledger__row dt { border-left: none; padding-left: 0; }
  .f5-ledger__row dt::before {
    content: "";
    display: inline-block;
    width: 14px;
    border-top: 2px solid var(--f5-persona);
    vertical-align: middle;
    margin-right: 10px;
  }
  .f5-items { grid-template-columns: 1fr; }
  .f5-items > li { padding: 24px 20px; }
  .f5-flow > li { grid-template-columns: 44px 1fr; gap: 14px; padding-block: 20px; }
  .f5-flow__num { font-size: 18px; }
  .f5-records--multi { grid-template-columns: 1fr; gap: 40px; }
  /* 修復作品集: スマホは横スライド（記録は縦積みのまま）。次カードを覗かせてスワイプを示唆 */
  .f5-gallery {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .f5-gallery::-webkit-scrollbar { display: none; }
  .f5-gallery > .f5-figure { flex: 0 0 80%; scroll-snap-align: start; margin: 0; }
  .f5-faq__q, .f5-faq__a { grid-template-columns: 26px 1fr; gap: 10px; }

  .f5-hero .f5-figure__frame { aspect-ratio: 4 / 3; max-height: none; }

  .f5-contact { padding-block: 56px; }
  .f5-contact__row { flex-direction: column; align-items: stretch; }
  .f5-btn { min-width: 0; }
  .f5-contact__tel { font-size: 22px; }

  /* SP固定バー表示＋本文下端の逃げ */
  .f5-spbar { display: flex; }
  .f5-page footer .bg08 { padding-bottom: 72px !important; }
}

/* ============================================================
   17. モーション: 出現アニメ・パララックスなし。
   遷移は色のみ300ms。prefers-reduced-motion は tokens.css を継承
   ============================================================ */

/* ============================================================
   18. WordPress implementation additions
   ============================================================ */
.f5-w-figure { max-width: var(--f5-w-figure); }
.f5-mt-inner { margin-top: var(--f5-sp-inner); }
.f5-mt-el { margin-top: var(--f5-sp-el); }
.f5-mt-block { margin-top: var(--f5-sp-block); }
.f5-mt-note { margin-top: 20px; }

.f5-symptoms {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--f5-rule);
  max-width: var(--f5-w-body);
}
.f5-symptoms > li {
  padding: 16px 4px;
  border-bottom: 1px solid var(--f5-rule);
  line-height: 1.8;
}
.f5-symptoms > li::before {
  content: "";
  display: inline-block;
  width: 14px;
  border-top: 2px solid var(--f5-persona);
  vertical-align: middle;
  margin-right: 12px;
}

.f5-records--pair { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
@media (max-width: 600px) {
  .f5-records--pair { grid-template-columns: 1fr; gap: 40px; }
}

.f5-contact a:not(.f5-btn):not(.f5-contact__tel) {
  color: var(--f5-cover-ink);
  text-decoration-color: var(--f5-rule-gold);
}
.f5-contact a:not(.f5-btn):not(.f5-contact__tel):hover { text-decoration-color: var(--f5-gold); }
.f5-contact .f5-contact__links { margin-top: 32px; }
.f5-contact .f5-contact__hours { margin-top: 24px; }

.f5-h2 .f5-h2__t {
  margin: 0;
  font-size: var(--f5-fs-h2);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
}
.f5-main .f5-h3-look {
  margin: 0 0 16px;
  font-size: var(--f5-fs-h3);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.6;
}
.f5-records .f5-figure figcaption .f5-rec-title {
  display: block;
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--f5-ink);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ============================================================
   対応地域ディレクトリ（滋賀全域＋京都区分） v2 2026-07-19
   ページを持つ地域のみ金の下線＋矢印で静かに誘導。
   将来ページが増えてもレジストリ（inc/areas.php）だけで崩れない。
   ============================================================ */
.f5-adir__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.6em;
  row-gap: 10px;
  line-height: 1.9;
}
.f5-adir__link {
  color: var(--f5-ink);
  text-decoration: underline;
  text-decoration-color: var(--f5-rule-gold);
  text-underline-offset: 0.28em;
  text-decoration-thickness: 1px;
}
.f5-adir__link:hover { text-decoration-color: var(--f5-gold); }
.f5-adir__arw {
  margin-left: 0.3em;
  color: var(--f5-gold);
  font-size: 0.85em;
}
.f5-adir__plain { color: var(--f5-ink-note); }
/* 「県内全域に対応」等の要点。muted note より一段はっきり見せる（金の細罫で静かに強調・目立ちすぎない） */
.f5-adir__reach {
  margin: 14px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--f5-gold);
  color: var(--f5-ink);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.03em;
}
.f5-adir__reach .f5-adir__link { font-weight: 600; }
/* 滋賀の市町リスト直後の全域注記は、リストと離して一呼吸置く
   （京都府行は注記単独＝dt との天地揃えを保つため対象外） */
.f5-adir__list + .f5-adir__reach { margin-top: 32px; }
/* 「※ その他の地域も…」の一文を、muted note より少しだけ前へ（枠は付けない） */
.f5-note--lead {
  color: var(--f5-ink);
  font-size: 14px;
  letter-spacing: 0.02em;
}
@media (max-width: 767px) {
  .f5-adir__list { column-gap: 1.2em; row-gap: 8px; }
  .f5-adir__list + .f5-adir__reach { margin-top: 26px; }
}

/* スクリーンリーダー専用（H1 の意味補強。視覚不変） */
.f5-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}