/* ============================================================================
   I.D.Works 住宅サイト  デザインシステム  design-system.css
   ----------------------------------------------------------------------------
   目的 : design/pages/home.html（Figmaトップ再現＝デザインの正）から
          「再利用可能なルール」だけを切り出した共通スタイルシート。
          後続の全コンテンツページ（house / design / performance / works …）が
          この1枚を読み込むことで、home と同じ意匠・タイポ・余白を得る。
   出典 : home.html のインライン<style>（構造）＋ #figma-fidelity / #figma-design-fix
          （Figmaスキン層）から抽出。値は tokens.css の CSS変数を参照する。
   前提 : 読み込み順は  global-nav.css → tokens.css → Google Fonts → design-system.css
          （home.html のカスケードと同一。home.html 自体は変更しない＝重複許容）。
   方針 : グレースケール厳守（有彩色なし）／太字を使わずサイズ・字間・余白・色で階層。
   段階 : Phase 3 第3段  作成 2026-07-19  design-assistant（補助・最終決定は人間）
   注記 : ⚠️＝ディレクター確認事項（design-rules.md 参照）
   ============================================================================ */

/* ============================================================================
   0. ベース
   ---------------------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  /* tokens.css が font-family / color / font-size / line-height / letter-spacing を
     var() で定義済み。ここでは text-size-adjust のみ補う。 */
  -webkit-text-size-adjust:100%;
  background:var(--c-bg);
  color:var(--c-text);
}
img{max-width:100%;}
a{color:inherit;}
h1,h2,h3,h4,p,a,li,span,figcaption{font-family:inherit;} /* 和文=Noto Sans JP を継承 */
/* 太字禁止（bold=700 不使用）: 原稿由来の <strong>/<b> は Noto Medium 500 で軽く強調に留める
   （tokens README「500=予備」の範囲。真の太字は使わずセマンティクスだけ残す）。⚠️500採用の可否は要ディレクター確認 */
strong,b{font-weight:500;}

/* ============================================================================
   1. 写真プレースホルダ（WFダミー継続。実写真は後日 .is-photo + <img> へ差替）
   ---------------------------------------------------------------------------- */
.ph{
  background:var(--c-ph);
  border:1px dashed var(--c-line-dark);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--c-text-mute);font-size:var(--fs-note);line-height:1.6;padding:8px;
}
.ph--fv{min-height:420px;}
.ph--wide{min-height:180px;}
.ph--card{aspect-ratio:4/3;}
.ph--figure{min-height:200px;}
.ph--logo{width:120px;height:40px;font-size:10px;border-style:solid;}
.ph--methodbtn{aspect-ratio:16/7;}
@media(min-width:768px){
  .ph--fv{min-height:560px;}
  .ph--wide{min-height:280px;}
}

/* 実画像フィル（Figmaスキン）: クリック可能画像はホバーでズーム（aitohus型・§画像アニメ方針） */
.is-photo{overflow:hidden;background:#ececec;}
.is-photo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);}
a:hover .is-photo img,
.card:hover .is-photo img{transform:scale(1.05);}
@media(prefers-reduced-motion:reduce){
  html:not(.wf-force-motion) .is-photo img{transition:none;}
  html:not(.wf-force-motion) a:hover .is-photo img{transform:none;}
}

/* ============================================================================
   2. ステータス注記（WF注記はマークアップ上は保持しつつ、デザイン版では非表示。
      ディレクター確定方針＝デザイン確認用は注記なし（home是正ラウンドで確定）。
      注記の内容確認はWF側（wireframes/）で行う。表示したい場合は下の display:none を外す）
   ---------------------------------------------------------------------------- */
/* !important＝WF原文の一部注記が style="display:block" を持つため（インライン上書き対策） */
.wf-note,.wf-banner,.wf-label{display:none!important;}

/* 共有global-nav.css（WF兼用のため無改変）の太字をデザイン方針（太字禁止）に合わせて上書き */
.gfoot__head{font-weight:400;letter-spacing:.16em;}

/* ============================================================================
   3. セクション（さざなみリズム＝等間隔にしない。余白は tokens.css の --sp-6/7/8）
   ---------------------------------------------------------------------------- */
.section{padding:var(--sp-sec) var(--pad-side,16px);}          /* 標準（一覧・機能系）＝上下120（SP72）[20261027b] */
.section--read{padding-top:var(--sp-sec);padding-bottom:var(--sp-sec);}    /* 読み物系＝標準に統一 [20261027b] */
.section--declare{padding-top:var(--sp-sec);padding-bottom:var(--sp-sec);} /* 宣言的な山場＝標準に統一 [20261027b] */
.section--sub{background:var(--c-bg-sub);}                    /* 副背景（帯） */

/* ---- [20261027b] コンテンツページのセクション上下余白を統一（ディレクター指示 2026-10-27）----
   ルール:
   1) 基本＝上120px・下120px（SP 72px）。.section／--read／--declare の違いはなくす（山場・詰め・読み物の区別をやめる）。
   2) c1-theme.css の `.c1 .c1-sec--join`（上 --sp-sec-sm＝108）／`.c1 .c1-sec--air`（上 --sp-8＝220）も120へ。
      ※c1-theme.css は変更禁止（docs/22 R09）のため、詳細度を上げて上書きする
        （`body.c1 .section.c1-sec--*` = (0,3,1) > `.c1 .c1-sec--*` = (0,2,0)）。
   3) 同一背景が連続するとき（白→白／グレー→グレー）は、前のセクションの下だけ --sp-sec-join-bottom(40px／SP24px) に詰める。
      次の赤ラベルまでの合計＝120+40＝160。帯の境目が見える箇所（白↔グレー）は「境目→ラベル120」のまま。
      合計を120にしたい場合は tokens.css の --sp-sec-join-bottom を 0px にする（この変数だけ）。
      実装は :has()。:has() 非対応の古いブラウザでは120/120のまま（崩れずに広めになるだけ）。
   4) 変えないもの＝.hero-intro（padding 0）／.page-hero／.consult／.cta-photos／左右 padding。
   5) 20260821ba（帯×c1-sec--air の margin-top 補正）は、air が120になり帯の中が元から上下対称になるため不要＝廃止。 */
body.c1 .section.c1-sec--air,
body.c1 .section.c1-sec--join{padding-top:var(--sp-sec);}
body.c1 .section.c1-sec--close,
body.c1 .section.c1-sec--airb{padding-bottom:var(--sp-sec);}
/* 同一背景の連続＝前の下を詰める。:not(.hero-intro) は padding 0 の導入ブロックを動かさないため。
   白→白＝次が .section--sub でない .section ／ グレー→グレー＝次も .section--sub。 */
.section:not(.section--sub):not(.hero-intro):has(+ .section:not(.section--sub):not(.hero-intro)),
.section--sub:has(+ .section--sub){padding-bottom:var(--sp-sec-join-bottom);}
/* セクション末尾の子要素の下マージンは padding の内側に積まれて「下が広く」見える。
   セクションの余白は padding だけで決めるため、末尾の下マージンを落とす（旧: 帯×air のみ）。 */
.section:not(.hero-intro) > .section__inner > :last-child{margin-bottom:0;}
.section--soft{background:var(--c-bg-soft);}                  /* ごく淡い副背景 */
.section__inner{max-width:var(--w-content);margin:0 auto;}
.section__inner--narrow{max-width:720px;}

/* 見出し（Figmaスキン＝英字ラベル Jost 中央＋和文小ラベル＋短い罫線） */
.section__title{
  /* [20260821ae] 黒字見出しのウェイトを500へ統一（2026-08-21ディレクター指示）。
     .c1 ページは c1-theme.css 側で500になるが、c1を持たない home.html / home-proposal.html は
     この基底定義が効くため、ここも500に揃える。 */
  font-family:var(--ff-jp);font-weight:500;
  font-size:var(--fs-h2-sm);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);
  text-align:center;margin-bottom:48px;position:relative;
}
@media(min-width:768px){ .section__title{font-size:var(--fs-h2);margin-bottom:64px;} }

/* data-en 付き見出し＝Figma型の「Jost英字（大・中央）＋和文小ラベル＋短罫線」に昇格 */
.section__title[data-en]{
  font-size:var(--fs-caption)!important;color:var(--c-text-sub);
  letter-spacing:var(--ls-2);font-weight:var(--fw-normal);line-height:1.6;
}
.section__title[data-en]::before{
  content:attr(data-en);display:block;
  font-family:var(--ff-en);font-weight:var(--fw-normal);
  font-size:var(--fs-en-title);color:var(--c-text);
  letter-spacing:var(--ls-h2);line-height:1.2;margin-bottom:8px;
}
.section__title[data-en]::after,
.section__title--line::after{
  content:"";display:block;width:40px;height:1px;
  background:var(--c-line-hair);margin:16px auto 0;
}
.section__title--plain::after{display:none;} /* 純和文見出し（英字ラベルも罫線もなし） */

.section__lead{
  color:var(--c-text-sub);font-size:var(--fs-body);line-height:var(--lh-body);
  text-align:center;margin-bottom:48px;
}
.section__foot{margin-top:56px;text-align:center;}

/* 独立ラベル（見出しと別要素で英字ラベルを置きたい場合） */
.sec-label{text-align:center;margin-bottom:18px;}
.sec-label__en{display:block;font-family:var(--ff-en);font-weight:var(--fw-normal);
  font-size:var(--fs-en-title);color:var(--c-text);letter-spacing:var(--ls-h2);line-height:1.2;}
.sec-label__jp{display:block;font-size:var(--fs-caption);color:var(--c-text-sub);
  letter-spacing:var(--ls-2);margin-top:8px;}
.sec-label::after{content:"";display:block;width:40px;height:1px;
  background:var(--c-line-hair);margin:16px auto 0;}

/* ============================================================================
   4. ボタン（Figma＝白地・細枠 Silver・濃文字・右端横棒32×1px・min-width360）
      ※横棒とホバースライドは global-nav.css が定義済み。ここは意匠のみ（home と同一）。
   ---------------------------------------------------------------------------- */
.btn{
  display:block;text-align:center;text-decoration:none;
  border:1px solid var(--c-line);color:var(--c-text);background:var(--c-bg);
  font-size:var(--fs-body-sm);letter-spacing:.08em;border-radius:var(--radius);
  padding:var(--btn-pad-y) var(--sp-3);
}
.btn--primary{background:var(--c-btn);color:var(--c-btn-text);border-color:var(--c-btn);}
.btn--small{padding:9px 16px;font-size:var(--fs-note);}
.btn-row{display:grid;gap:12px;margin-top:56px;}
@media(min-width:768px){
  /* min-width は必ず 100%（＝内包カラム幅）でキャップする。
     narrow な複数カラムグリッド（例 .pillar-list=2列/720px）内の .btn が
     360px を強要してカラムを 402px に膨らませ、グリッドが右へはみ出す
     （＝中央ずれ）不具合の再発防止。global-nav.css と同一方針に統一。 */
  .btn{display:inline-block;min-width:min(var(--btn-min-w),100%);padding:var(--btn-pad-y) var(--btn-pad-x);}
  .btn-row{display:flex;justify-content:center;flex-wrap:wrap;}
}

/* ============================================================================
   5. カード（CMS一覧系。Figma＝タイトル400・写真4:3・タグ細枠）
   ---------------------------------------------------------------------------- */
.card-grid{display:grid;gap:var(--grid-gap,20px);}
.card-grid--2col,.card-grid--3col,.card-grid--4col{grid-template-columns:1fr;}
@media(min-width:768px){
  .card-grid--2col{grid-template-columns:repeat(2,1fr);}
  .card-grid--3col{grid-template-columns:repeat(3,1fr);} /* A5: 一覧カードは全サイトPC3列で統一 */
  /* [20260821k] 4件の4カラムは **1200px以上** に限定する（2026-08-21 ディレクター指示:
     「house-bioclimatic-03 タブレットで4つ横並びが小さめ。2行に分けると見やすそう」）。
     従来は 768px から4列だったため、タブレット帯で1枚が
       768px  → 約172px
       1024px → 約236px
       1199px → 約280px
     しか取れず、写真＋タイトル＋3行の要点（敷地の特徴／読み取った環境／設計への反映）が
     入りきらず窮屈だった。768〜1199px は **2列＝2行** にして1枚の幅を倍にする
     （1024pxで約492px）。1200px以上は従来どおり4列（ディレクター指示 2026-07-20 の
     「4件が3列で一段落ちする」解消を維持）。
     ※対象は .card-grid--4col を使う4ページ（house-bioclimatic / house / house-life-id-design
       / realestate）。home.html・home-proposal.html は自ページで3列固定のため影響なし。
       works.html は --3col 使用で影響なし。 */
  .card-grid--4col{grid-template-columns:repeat(2,1fr);}
  .card-grid--events4{grid-template-columns:repeat(4,1fr);} /* home見学会のみの例外 */
}
@media(min-width:1200px){
  .card-grid--4col{grid-template-columns:repeat(4,1fr);}   /* [20260821k] 4列は1200px以上のみ */
}
.card{text-decoration:none;display:block;color:var(--c-text);}
.card__photo{margin-bottom:10px;aspect-ratio:4/3;}
.card__tag{font-size:var(--fs-micro);color:var(--c-text-label);border:1px solid var(--c-line);
  padding:1px 8px;display:inline-block;margin-bottom:6px;letter-spacing:var(--ls-1);}
.card__title{font-weight:var(--fw-normal);font-size:var(--fs-body);letter-spacing:var(--ls-1);line-height:1.7;}
.card__text{color:var(--c-text-sub);font-size:var(--fs-caption);line-height:var(--lh-body);margin-top:4px;}
.card__meta{font-size:var(--fs-note);color:var(--c-text-sub);margin-top:4px;}

/* ============================================================================
   6. Split（左=英字ラベル／右=コンテンツ の2カラム。News/Event等）
   ---------------------------------------------------------------------------- */
.split{max-width:var(--w-content);margin:0 auto;padding:0 var(--pad-side,16px);}
.split__grid{display:block;}
@media(min-width:768px){ .split__grid{display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:start;} }
.split__label{margin-bottom:28px;}
.split__label-en{display:block;font-family:var(--ff-en);font-weight:var(--fw-normal);
  font-size:var(--fs-en-title);color:var(--c-text);letter-spacing:var(--ls-h2);line-height:1.2;}
.split__label-jp{display:block;font-size:var(--fs-caption);color:var(--c-text-sub);
  letter-spacing:var(--ls-2);margin-top:8px;}
/* 2026-07-28 ディレクター指示A-4：「一覧へ」直下の装飾罫線（64×1px）は廃止（home で削除・DSからも撤去）。
   現状 .split は home.html のみが使用（他29ページは未使用）＝見た目の波及なし。 */
.split__lead{color:var(--c-text-sub);font-size:var(--fs-body-sm);line-height:1.9;margin:26px 0 0;}
.split__more{display:inline-block;margin-top:44px;font-size:var(--fs-caption);letter-spacing:var(--ls-2);
  text-decoration:none;color:var(--c-text);}
.split__more::after{content:"";display:inline-block;width:32px;height:1px;background:var(--c-line-dark);
  vertical-align:middle;margin-left:14px;}

/* News リスト（罫線区切り・日付＋カテゴリ枠＋タイトル）
   [20260924e] ディレクター指示「home のお知らせと news 一覧の SP 表示を統一。日付の下にカテゴリを置く」。
   ＝**SPは左列に日付／カテゴリを縦積み・右列にタイトルの2カラム（Grid）、768px以上は従来どおり横1行**。
   変更前はこの共通既定（＝home が使っていた形）が nowrap の flex で、日付とカテゴリが `flex:none` で
   縮まないため **タイトルだけが右端の狭い領域に押し込まれて3〜4行に折り返す**状態だった（WP実データで実測）。
   news.html は page-scoped で2行組み（日付＋カテゴリ／タイトル）に上書きしていたため2ページで表示が食い違っていた。
   → **整っていた news 側の意匠（日付=英数フォント／カテゴリ=11px・枠 --c-line-dark／罫線 --c-line）を共通の既定に採用**し、
     home.html・news.html・news-detail.html の重複定義は削除した。`.news-list` を使うのは home / news / home-proposal の3ページ。
   ⚠️ 左列は **96px 固定**。`auto` にすると**カテゴリ名の長短で行ごとにタイトルの開始位置がズレる**
      （390px実測＝「採用」42.2px〜「施工事例更新」90.6px）。96px は実測の最大値
      （カテゴリ 90.6px／design版の日付ダミー`【20XX.XX.XX】` 89.5px／WP実データの日付 72.7〜76.3px）＋余裕。
      ⚠️ カテゴリ名が7文字以上になったらこの値を見直すこと（現行の4カテゴリは最長6文字）。
   ⚠️ タイトルは `grid-row:1 / span 2` で左列2行ぶんにまたがる。カテゴリ未設定の記事では2行目が空になるが、
      行の高さは内容に従って縮むため崩れない。 */
.news-list{list-style:none;}
.news-list__item{border-bottom:1px solid var(--c-line);}
.news-list__item:first-child{border-top:1px solid var(--c-line);}
.news-list__link{display:grid;grid-template-columns:96px 1fr;column-gap:16px;row-gap:6px;align-items:start;
  padding:20px 4px;text-decoration:none;font-size:var(--fs-body-sm);color:var(--c-text);}
.news-list__date{grid-column:1;grid-row:1;font-size:var(--fs-caption);font-family:var(--ff-en);
  color:var(--c-text-sub);letter-spacing:.06em;}
.news-list__cat{grid-column:1;grid-row:2;justify-self:start;white-space:nowrap;
  font-size:var(--fs-micro);letter-spacing:.1em;color:var(--c-text-note);
  border:1px solid var(--c-line-dark);padding:1px 8px;background:var(--c-bg);}
/* [20260924f] `align-self:center` ＝ **タイトルが1行の記事で、左列（日付＋カテゴリの2段＝59px）に対して
   タイトルが上に張り付いて見える**のを解消（ディレクター指示「タイトルが1列のニュースは中心にしたい」）。
   1行(29px)は上端20px→35pxへ下がって縦中央に並ぶ。2行(57px)は領域59pxとの差が2pxのためほぼ不変、
   3行以上は領域のほうが伸びるため変化なし。⚠️768px以上では `align-self:auto` に戻す（下の @media）。 */
/* [20261002b] タイトル 14px（--fs-body-sm）→本文と同じ 15px（--fs-body）＝非住宅 /news/ の修正（2026-10-02 スタッフ指示）に追随。
   ホバー＝link-anim.js の文字ロール＋下線（TITLE_ONLY。行全体は従来どおり LINK_SKIP） */
.news-list__title{grid-column:2;grid-row:1 / span 2;align-self:center;
  font-size:var(--fs-body);font-weight:var(--fw-normal);
  letter-spacing:var(--ls-body);line-height:var(--lh-body);}
@media(min-width:768px){
  .news-list__link{display:flex;flex-wrap:nowrap;align-items:baseline;gap:12px;padding:22px 8px;}
  /* [20260924f] align-self を既定へ戻す＝親の align-items:baseline が効き、
     日付・カテゴリ・タイトルが従来どおりベースラインで揃う（center のままだと1行でずれる）。 */
  .news-list__title{flex:1;align-self:auto;min-width:0;}
  /* [20261002b] タイトルの開始位置を揃える（非住宅と同じ考え方・角丸にはしない）。
     日付＝固定幅＋等幅数字／カテゴリ札＝SP左列と同じ 96px 固定・中央寄せ（⚠️7文字以上のカテゴリを足したら見直す） */
  .news-list__date{flex:0 0 96px;width:96px;font-variant-numeric:tabular-nums;}
  .news-list__cat{flex:0 0 96px;width:96px;box-sizing:border-box;text-align:center;}
}

/* ============================================================================
   7. 特徴・柱（feature-list）
   ---------------------------------------------------------------------------- */
.feature-list{display:grid;gap:44px;margin-top:48px;}
@media(min-width:768px){
  .feature-list--3col{grid-template-columns:repeat(3,1fr);}
  .feature-list--2col{grid-template-columns:repeat(2,1fr);}
}
/* [20260821ce] ディレクター判断 2-A（2026-08-24）＝共有CSSで直す。
   `.feature__title` に line-height の指定が無く、**本文用の行間をそのまま継いでいた**。
   実測: renovation.html で 17px の見出しに行間34.85px（**級数の2.05倍**）。
   見出しの箱が縦に伸び、直下の本文との間隔（6px）より見出しの内側の空きのほうが大きくなり、
   見出しが本文の塊から浮いて見えていた。
   → 1.7 に締める。about.html で先行適用した値と同じ。
   影響＝`.feature__title` を出力する **event / house-bioclimatic / house / renovation** の4ページ
   （about.html は 20260821bw でページ内CSSに 1.7 を入れ済み＝同値のため見え方は変わらない）。
   共有CSSに置くことで、今後 `.feature-list` を使う新しいページでも同じ不具合が再発しない。 */
.feature__title{font-size:var(--fs-h3);font-weight:var(--fw-normal);letter-spacing:var(--ls-2);line-height:1.7;margin-bottom:6px;}
.feature__text{font-size:var(--fs-body-sm);color:var(--c-text-sub);}

/* ============================================================================
   8. 下層ページ共通（page-hero／statement／pillar／step／faq／mtriad／cta-close）
   ---------------------------------------------------------------------------- */
/* ページ冒頭ヒーロー（gnav.js のスクロール縮小トリガー .page-hero を兼ねる） */
.page-hero{position:relative;}
.page-hero__body{padding:80px 0;width:min(94vw,720px);margin:0 auto;text-align:center;}
.page-hero__title{
  /* [20260821ae] 黒字見出しのウェイトを500へ統一（2026-08-21ディレクター指示） */
  font-family:var(--ff-jp);font-weight:500;
  font-size:26px;letter-spacing:var(--ls-h2);line-height:1.4;margin-bottom:var(--sp-2);
}
.page-hero__catch{font-size:var(--fs-h3);font-weight:var(--fw-normal);line-height:1.8;
  letter-spacing:var(--ls-2);margin-bottom:var(--sp-2);}
.page-hero__lead{text-align:left;color:var(--c-text-sub);font-size:var(--fs-body);line-height:var(--lh-body);}
@media(min-width:768px){
  .page-hero__title{font-size:36px;}
  .page-hero__catch{font-size:22px;}
  .page-hero__lead{text-align:center;}
}
/* 英字ラベル付きヒーロー小見出し（任意） */
.page-hero__en{display:block;font-family:var(--ff-en);font-weight:var(--fw-thin);
  font-size:clamp(28px,4vw,50px);color:var(--c-text);letter-spacing:var(--ls-h2);
  line-height:1.1;margin-bottom:14px;}

/* ---- 下層ページ共通ヒーロー画像帯（2026-07-27 追加・全下層1パターン）----
   タイトルブロック（.page-hero__body / .iv-fv__body）の直下にフル幅の帯。
   余白主導・アクロマティックのデザイン言語に整合。SPも成立。
   リビール＝共通の .reveal 機構（wf-reveal時のみ初期非表示。JS無/reduced-motion=常時表示）に相乗り。
   画像自体は object-fit:cover でトリミング（原寸2400×1350・16:9）。 */
.page-hero__media{
  position:relative;overflow:hidden;
  width:100%;
  height:clamp(320px,42vw,560px);
  margin-top:clamp(24px,4vw,56px);
  background:var(--c-bg-sub);   /* 読込前/余白の下地 */
}
.page-hero__img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
/* wf-reveal 時のみ初期非表示＝フェード＋ごく僅かな寄り（fx-img系と同趣・aitohus風） */
/* [20260928c] transition は「表示へ向かうとき（.is-in）」だけに付ける＝初期非表示へは瞬時に切り替える
   （読み込み中に一度描画された要素が、JSで wf-reveal が付いた瞬間にフェードアウトして見えていた。§11参照）。 */
.wf-reveal .page-hero__media.reveal{opacity:0;transform:none;}
.wf-reveal .page-hero__media.reveal .page-hero__img{
  transform:scale(1.05);will-change:transform;
}
.wf-reveal .page-hero__media.reveal.is-in{opacity:1;transition:opacity 1.1s ease-out;}
.wf-reveal .page-hero__media.reveal.is-in .page-hero__img{transform:scale(1);transition:transform 1.5s cubic-bezier(.22,.61,.36,1);}
@media(prefers-reduced-motion:reduce){
  .wf-reveal .page-hero__media.reveal,
  .wf-reveal .page-hero__media.reveal .page-hero__img{opacity:1;transform:none;transition:none;}
}

/* ============================================================================
   8-b. 下層ヒーロー 確定形（2026-07-27 ディレクター確定・ヒーロー画像を持つ全15ページ）
   ----------------------------------------------------------------------------
   ● 画像の上に重ねるのは「ページタイトル（h1）だけ」。白文字＋暗幕で可読性を確保。
   ● キャッチコピー／リードコピーは画像上に置かず、直下の第1セクション（.hero-intro）へ。
   ● タイトルのみになるぶん高さを圧縮＝clamp(280px,40vh,500px)。
   ● gnav.js のヘッダー縮小トリガーは .page-hero の下端＝この画像帯の下端（従来どおり成立）。
   ---------------------------------------------------------------------------- */
.page-hero--overlay{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(280px,40vh,500px);
  padding:clamp(32px,6vh,72px) var(--pad-side,16px);
  overflow:hidden;
}
.page-hero--overlay .page-hero__media--bg{
  position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:1;
}
.page-hero--overlay .page-hero__media--bg .page-hero__img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.page-hero--overlay .page-hero__media--bg::after{ /* 暗幕＝白文字の可読性確保（.45→.3＝20261015m・design/pages 20261015k に追随） */
  content:"";position:absolute;inset:0;background:rgba(0,0,0,.3);
}
.page-hero--overlay .page-hero__body--onimg{
  position:relative;z-index:2;text-align:center;
  width:min(94vw,900px);padding:0;margin:0 auto;
}
.page-hero--overlay .page-hero__title,
.page-hero--overlay .iv-fv__quote{
  color:#fff;margin-bottom:0;
  font-family:var(--ff-en); /* 英字=Jost指定（2026-07-27 ディレクター確定。和文はスタック後段のNotoへフォールスルー） */
  font-size:clamp(26px,3.2vw,42px);line-height:1.45;
  text-shadow:0 1px 24px rgba(0,0,0,.28);
}
@media(max-width:767px){
  .page-hero--overlay{min-height:clamp(280px,38svh,420px);}
}

/* ============================================================================
   8-c. 第1セクション（ヒーロー直下）＝サブメニュー＋キャッチ＋リード
   ----------------------------------------------------------------------------
   上下パディングは 0（＝直後の本編セクションが自前の padding-top を持つため二重取りしない）。
   .hero-intro__body 側で「ヒーロー下端からの間」を --sp-sec-sm（PC108/SP64）で確保する。
   ---------------------------------------------------------------------------- */
.hero-intro{padding-top:0;padding-bottom:0;}
/* 下パディング＝リード下の余白（次セクションの背景帯と密着させない・2026-07-27 ディレクター指示3-2） */
.hero-intro__body{padding-top:var(--sp-sec-sm);padding-bottom:64px;text-align:center;} /* リード下=64px（2026-07-27 キャッチ→リード48px化に合わせバランス拡大） */
/* キャッチ＝次セクションの見出し（.section__title）と同一の文字サイズ・行間・字間に統一
   （2026-07-27 ディレクター指示3-1。.section__title と同じ宣言を明示的に持たせる） */
.hero-intro__catch{
  font-family:var(--ff-jp);font-weight:var(--fw-normal);
  font-size:var(--fs-h2-sm);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);
  margin:0 0 48px; /* キャッチ→リード=48px（2026-07-27 ディレクター確定・他セクションの見出し→リードと同間隔） */
  /* 和文の折返しを文節単位に（対応ブラウザのみ・非対応は従来どおり）。
     SPではキャッチが原稿の<br>を超えて折り返すため、単語途中での不自然な改行を避ける */
  word-break:auto-phrase;
}
@media(min-width:768px){ .hero-intro__catch{font-size:var(--fs-h2);} }  /* .section__title と同一 */
/* リード＝全ページ共通の「720px 左揃えボックス・ボックスは中央」ルールに合わせる */
.hero-intro__lead{
  color:var(--c-text-sub);font-size:var(--fs-body);line-height:var(--lh-body);
  width:fit-content;max-width:720px;margin-inline:auto;text-align:left;
}
.hero-intro__body .wf-note{max-width:720px;margin-left:auto;margin-right:auto;text-align:left;}

/* ============================================================================
   8-d. サブメニュー（子階層を持つページ群・2026-07-27 ディレクター確定）
   ----------------------------------------------------------------------------
   書式＝縦棒区切りの横並び「｜A｜B｜C｜」。現在地のみアンダーバー（下線）＋濃色。
   PC＝中央寄せ1行（13px）。
   SP＝A案確定（2026-07-27）：1行のまま横スクロール（12px・タップ領域はpaddingで確保）。
       右端に薄いグラデーションフェードで「続きがある」を示唆（末尾まで送ると消える）。
       初期表示は global-nav.js が現在地を左寄りへ自動スクロール（続きが右に見切れる状態）。
       スクロールは .sub-nav__list（内側）が担当し、フェードは .sub-nav（外枠）に固定する。
   ---------------------------------------------------------------------------- */
.sub-nav{
  position:relative;
  margin-top:clamp(24px,3.4vw,44px);
  --fs-sub-nav:13px;   /* 2026-07-27 ディレクター指示3-3：14px→13px（字間 --ls-1 は維持） */
  --sub-nav-fade:56px;
}
.sub-nav__list{
  display:flex;align-items:stretch;justify-content:center;flex-wrap:nowrap;
  list-style:none;margin:0;padding:0;
}
.sub-nav__item{display:flex;align-items:center;white-space:nowrap;}
.sub-nav__item::before,
.sub-nav__list::after{           /* 先頭〜項目間の縦棒／末尾の縦棒 */
  content:"｜";color:var(--c-line-dark);font-size:var(--fs-sub-nav);
  line-height:1;flex:none;display:flex;align-items:center;
}
.sub-nav__link{
  display:inline-block;padding:6px 4px;
  font-size:var(--fs-sub-nav);letter-spacing:var(--ls-1);line-height:1.6;
  color:var(--c-text-sub);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .3s ease,border-color .3s ease;
}
.sub-nav__link:hover{color:var(--c-text);}
.sub-nav__link--current{color:var(--c-text);border-bottom-color:var(--c-text);}

@media(max-width:767px){
  .sub-nav{
    --fs-sub-nav:12px;   /* SPはもう一段小さく（ディレクター確定 2026-07-27） */
    margin-left:calc(var(--pad-side,16px) * -1);
    margin-right:calc(var(--pad-side,16px) * -1);
  }
  .sub-nav__list{
    /* [20260821bv] ディレクター指示（2026-08-24）:
       「この部分のナビはスクロールが不要な場合は基本中央に配置します」。
       旧＝SPは常に flex-start だったため、項目が2つしかない model-house / design では
           左12px・右127px と大きく左に寄っていた（実測390px）。
       新＝`safe center`。収まるときは中央、溢れるときだけ先頭寄せへ自動フォールバックする
           （`center` だけだと溢れた際に左端の項目がスクロールで到達できなくなる）。
       あわせて右パディングの +56px（フェード幅ぶん）を外して左右対称にした。
       中央寄せのときに右だけ56px多いと、その半分＝28px 左へずれてしまうため。
       溢れる場合も、末尾まで送れば global-nav.js が .sub-nav--end を付けて
       フェード自体が消えるので、最後の項目がフェードに隠れることはない。 */
    justify-content:safe center;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;   /* スワイプ慣性 */
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding-left:var(--pad-side,16px);
    padding-right:var(--pad-side,16px);
  }
  .sub-nav__list::-webkit-scrollbar{display:none;}
  .sub-nav__link{padding:10px 6px;}   /* タップ領域（約40px高）を padding で確保 */
  /* 右端フェード＝「続きがある」示唆。末尾まで送ると .sub-nav--end で消える */
  .sub-nav::after{
    content:"";position:absolute;top:0;bottom:0;right:0;width:var(--sub-nav-fade);
    pointer-events:none;opacity:1;transition:opacity .25s ease;
    background:linear-gradient(to right,rgba(255,255,255,0),var(--c-bg,#fff) 78%);
  }
  .sub-nav--end::after{opacity:0;}
}
@media(prefers-reduced-motion:reduce){
  .sub-nav::after{transition:none;}
}

/* ステートメント（宣言文＝山場） */
.statement{text-align:center;}
.statement__copy{
  font-family:var(--ff-jp);font-weight:var(--fw-normal);
  font-size:20px;letter-spacing:var(--ls-2);line-height:1.7;margin-bottom:var(--sp-3);
}
.statement__body{text-align:left;max-width:640px;margin:0 auto;
  color:var(--c-text);font-size:var(--fs-body);line-height:var(--lh-body);}
.statement__body p{margin-bottom:2.2em;}
.statement__body p:last-child{margin-bottom:0;}
@media(min-width:768px){
  .statement__copy{font-size:26px;}
  .statement__body{text-align:center;}
}

/* 柱（2枚並び） */
.pillar-list{display:grid;gap:var(--grid-gap,20px);margin-top:var(--sp-3);}
@media(min-width:768px){.pillar-list{grid-template-columns:repeat(2,1fr);}}
.pillar{border:1px solid var(--c-line);padding:24px 20px;text-align:center;background:var(--c-bg);}
.pillar__title{font-size:var(--fs-h3);font-weight:var(--fw-normal);letter-spacing:var(--ls-2);margin-bottom:10px;}
.pillar__text{font-size:var(--fs-body-sm);color:var(--c-text-sub);text-align:left;margin-bottom:16px;}

/* ステップ（番号付き縦リスト） */
.step-list{list-style:none;counter-reset:step;max-width:520px;margin:var(--sp-3) auto 0;}
.step-list__item{
  counter-increment:step;position:relative;
  padding:10px 0 10px 48px;border-bottom:1px solid var(--c-line);font-size:var(--fs-body);
}
.step-list__item::before{
  content:counter(step);
  position:absolute;left:4px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border:1px solid var(--c-text);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-caption);
  font-family:var(--ff-en);
}
.step-list__note{font-size:var(--fs-note);color:var(--c-text-sub);display:block;}

/* FAQ */
.faq-list{max-width:720px;margin:0 auto;}
.faq{border-bottom:1px solid var(--c-line);padding:16px 0;}

/* ---- [20260821bj] FAQ設問の級数を全ページで統一（2026-08-21 ディレクター指示・B案）----------
   c1-theme.css の `.c1 .faq__q{font-size:var(--c1-fs-h3)}` は clamp のため、1440px で
   **通常モード 21.6px / 密度モード 18.72px** と**同じ設問がページによって2種類に割れて**いた。
     21.6px … showroom(6) / renovation(7) / realestate(6) / consultation(4)
     18.72px… faq(34) / house-quality-support(9) / performance(3)
   → 小見出しの標準トークン **--fs-h3（SP16px / 768以上18px）** に統一する（7ページ69箇所）。
   ＝本日 .attitude__title(ar) / .point-list__title(at) / .base-card__name(bi) などで一貫して
     採ってきた「clamp の飛びを固定トークンへ寄せる」判断と同じ。
   ※c1-theme.css は変更禁止（docs/22 R09）のため、こちら側で詳細度を1段上げて上書きする
     （`body.c1 .faq__q` = (0,3,1) > `.c1 .faq__q` = (0,2,0)）。字間・ウェイトは c1-theme のまま。 */
body.c1 .faq__q{font-size:var(--fs-h3);}
.faq__q{font-size:var(--fs-body);font-weight:var(--fw-normal);letter-spacing:var(--ls-2);margin-bottom:6px;}
.faq__a{font-size:var(--fs-body-sm);color:var(--c-text-sub);}

/* --- FAQアコーディオン（2026-07-28 クライアント指示）
   抜粋FAQ・カテゴリFAQを「質問のみ表示 → クリックで回答展開」に統一するための共通パーツ。
   マークアップ:
     <div class="faq faq--acc">
       <h3 class="faq__qh"><button class="faq__toggle" aria-expanded="false" aria-controls="ID">…<span class="faq__toggle-mark" aria-hidden="true"></span></button></h3>
       <div class="faq__panel" id="ID" role="region" hidden>…</div>
     </div>
   開閉は assets/global-nav.js の共通初期化（data-faq-acc スコープ）が担当。 --- */
.faq--acc{padding:0;}
.faq__qh{margin:0;font-weight:var(--fw-normal);}
.faq__toggle{
  display:flex;align-items:flex-start;gap:16px;width:100%;
  background:none;border:0;padding:16px 0;margin:0;
  font:inherit;color:var(--c-text);text-align:left;cursor:pointer;
  font-size:var(--fs-body);font-weight:var(--fw-normal);
  letter-spacing:var(--ls-2);line-height:1.7;
  transition:color .25s ease;
}
.faq__toggle:hover{color:var(--c-text-sub);}
.faq__toggle:focus-visible{outline:1px solid var(--c-text);outline-offset:2px;}
.faq__toggle-mark{margin-left:auto;flex:0 0 13px;width:13px;height:13px;position:relative;top:.55em;}
.faq__toggle-mark::before,.faq__toggle-mark::after{
  content:"";position:absolute;background:var(--c-text-sub);transition:transform .3s ease,opacity .3s ease;}
.faq__toggle-mark::before{left:0;top:6px;width:13px;height:1px;}
.faq__toggle-mark::after{left:6px;top:0;width:1px;height:13px;}
.faq__toggle[aria-expanded="true"] .faq__toggle-mark::after{transform:scaleY(0);opacity:0;}
/* 2026-07-28 A-2（ディレクター指示）: クリックで「パッと表示」→「回答が下へスライド展開」へ。
   hidden属性のON/OFFは高さを遷移できないため、grid-template-rows 0fr→1fr 方式に変更する。
   ・JS（global-nav.js）が初期化時にパネル中身を .faq__panel-in で包み、hidden属性を外す
     ＝JS無効時は hidden が残り従来どおり閉じたまま（フォールバック維持）
   ・閉時は visibility:hidden を遷移完了後に効かせ、支援技術からも隠す
   ・aria-expanded / aria-controls / ハッシュ自動オープンは不変 */
.faq__panel{
  height:0;overflow:hidden;visibility:hidden;
  transition:height .32s cubic-bezier(.4,0,.2,1),visibility 0s .32s;
}
.faq__panel.is-open{
  visibility:visible;
  transition:height .32s cubic-bezier(.4,0,.2,1);
}
.faq__panel-in{
  padding:0 0 18px;font-size:var(--fs-body-sm);color:var(--c-text-sub);line-height:1.9;
}
.faq__panel-in a{color:var(--c-text);}
.faq__panel-in p + p{margin-top:.8em;}
.faq__panel > p{padding:0 0 18px;font-size:var(--fs-body-sm);color:var(--c-text-sub);line-height:1.9;}
@media(prefers-reduced-motion:reduce){
  html:not(.wf-force-motion) .faq__toggle,
  html:not(.wf-force-motion) .faq__toggle-mark::before,
  html:not(.wf-force-motion) .faq__toggle-mark::after{transition:none;}
  /* reduced-motion＝スライドせず即時開閉 */
  html:not(.wf-force-motion) .faq__panel,
  html:not(.wf-force-motion) .faq__panel.is-open{transition:none;}
}

/* クロージングCTA */
.cta-close{text-align:center;}
.cta-close__sub{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:12px;}

/* I.D.メソッド 3要素→翻訳フロー（カードUIにしない・「翻訳」を中心に置く縦フロー） */
.mtriad{max-width:860px;margin:0 auto;}
.mtriad__pair{display:grid;grid-template-columns:1fr;gap:40px;
  padding-bottom:48px;border-bottom:1px solid var(--c-line);}
@media(min-width:768px){.mtriad__pair{grid-template-columns:1fr 1fr;gap:64px;}}
.mel__no{font-family:var(--ff-en);font-weight:var(--fw-thin);font-size:32px;
  color:var(--c-line-hair);letter-spacing:0;line-height:1;}
.mel__title{font-size:var(--fs-h3-lg);font-weight:var(--fw-normal);line-height:1.5;letter-spacing:var(--ls-2);margin:8px 0 2px;}
.mel__en{display:block;font-family:var(--ff-en);font-size:var(--fs-micro);letter-spacing:.1em;
  color:var(--c-text-note);margin:2px 0 12px;}
.mel__text{font-size:var(--fs-body-sm);color:var(--c-text-sub);}
.mel__link{display:inline-block;margin-top:14px;font-size:var(--fs-caption);text-decoration:none;
  border-bottom:1px solid var(--c-line-dark);padding-bottom:2px;letter-spacing:var(--ls-1);}
.mtriad__arrow{width:1px;height:56px;background:var(--c-line-dark);margin:0 auto;}
.mtriad__translate{text-align:center;max-width:600px;margin:0 auto;}
.mtriad__translate .mel__no{color:var(--c-text-sub);}
.mtriad__translate .mel__title{font-size:24px;}
.mtriad__translate .mel__en{margin-bottom:14px;}
@media(min-width:768px){.mtriad__translate .mel__title{font-size:28px;}}

/* ============================================================================
   9. 導線（次に読む＝主導線1＋補助2／フッター前メソッド3ボタン）
   ---------------------------------------------------------------------------- */
.next-read{padding:var(--sp-6) var(--pad-side,16px);background:var(--c-bg-sub);}
.next-read__inner{max-width:720px;margin:0 auto;text-align:center;}
.next-read__label{font-family:var(--ff-en);font-size:var(--fs-note);letter-spacing:.2em;
  color:var(--c-text-sub);margin-bottom:var(--sp-2);text-transform:uppercase;}
.next-read__main{display:block;text-decoration:none;border:1px solid var(--c-text);
  background:var(--c-bg);padding:24px 16px;margin-bottom:var(--sp-2);color:var(--c-text);}
.next-read__main-title{font-size:var(--fs-h3);font-weight:var(--fw-normal);letter-spacing:var(--ls-2);display:block;}
.next-read__main-desc{font-size:var(--fs-caption);color:var(--c-text-sub);display:block;margin-top:6px;}
.next-read__sub{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;font-size:var(--fs-caption);}
.next-read__sub-link{color:var(--c-text-sub);}

.method-nav{padding:var(--sp-6) var(--pad-side,16px);border-top:1px solid var(--c-line);}
.method-nav__inner{max-width:var(--w-content);margin:0 auto;}
.method-nav__list{display:grid;gap:12px;}
@media(min-width:768px){.method-nav__list{grid-template-columns:repeat(3,1fr);}}
.method-nav__item{display:block;text-decoration:none;position:relative;}
.method-nav__name{position:absolute;inset:auto 0 0 0;padding:8px 12px;
  font-size:var(--fs-caption);font-weight:var(--fw-normal);background:rgba(255,255,255,.85);}

/* ============================================================================
   10. 大型ウォーターマーク（.sec-wm）は 2026-07-29 ディレクター指示により廃止（P12関連）。
       .sec-wm/.sec-wm--light/.sec-wm--sub は削除。.has-wm は home/model-house の各セクションが
       DOM参照（position:relative＋SP横はみ出しクリップ）に依存するため温存する。
   ---------------------------------------------------------------------------- */
.has-wm{position:relative;overflow:hidden;}

/* ============================================================================
   11. スクロールリビール（IntersectionObserver・reduced-motion対応。home と同一規格）
   ---------------------------------------------------------------------------- */
/* [20260928c] ディレクター指摘「document.html の BOOKS／ダウンロードできる資料がページ切り替えの瞬間にフェードアウトする」。
   原因＝共通リビールのJS（各ページ末尾）が走る前に本文が一度描画され、その後 wf-reveal が付いて初期非表示
   （opacity:0）へ切り替わる際、transition が掛かっていたため **0.9秒かけて消える様子**が見えていた
   （全ページ共通。画面の高さによって見える／見えないが変わる）。
   → transition を「.is-in（表示へ向かうとき）」側だけに付け、非表示への切り替えは瞬時にする。
     ふわっと出る動き（速度・距離・イージング）は従来と同一。 */
.wf-reveal .reveal{
  opacity:0;transform:translateY(40px);
  will-change:opacity,transform;
}
.wf-reveal .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);
}

/* ---- [20260821ak] 「赤英字ラベル＋黒字見出し＋直下の本文」を**1セット**でフェードイン ----
   2026-08-21 ディレクター指示（B案・全ページ一括）:
   「model-house.html や home.html のように、赤英字と黒字見出し・その下の本文に
     フェードインの動きを付ける。3つが一体でふわっと出る形で」。
   実装＝ラッパー <div> を足さずに済むよう、**.c1-label に .reveal を1つ付けるだけ**で
   直後の見出しと、そのさらに直後の本文（p）も一緒に動くようにする。
   ・トリガーは .c1-label ひとつ（IntersectionObserver の監視対象も1つで済む）
   ・3要素は同じ transition なので**ズレずに一体で**立ち上がる
   ・3つ目は p に限定（見出し直後の div＝カード一覧やフォーム等を巻き込まないため）
   ・[20260821al] faq のカテゴリ見出しは <div class="faq-category__head"> に包まれていて
     h1〜h4 で受けられないため、受け皿に .faq-category__head を追加した（6箇所）。
   ・home.html は赤英字を .section__title::before で描画しているため、
     見出し自身に .reveal が付けばラベルごと一緒に動く。その場合の「直後の本文」も同様に拾う。 */
.wf-reveal .c1-label.reveal + :is(h1,h2,h3,h4,.faq-category__head),
.wf-reveal .c1-label.reveal + :is(h1,h2,h3,h4,.faq-category__head) + p,
.wf-reveal :is(.section__title,.hero-intro__catch,.split__label-jp,.housing-lead__title).reveal + p{
  opacity:0;transform:translateY(40px);
  will-change:opacity,transform;
}
/* [20260928c] transition は .is-in 側のみ（初期非表示へは瞬時に＝フェードアウトして見える不具合の修正。§11参照） */
.wf-reveal .c1-label.reveal.is-in + :is(h1,h2,h3,h4,.faq-category__head),
.wf-reveal .c1-label.reveal.is-in + :is(h1,h2,h3,h4,.faq-category__head) + p,
.wf-reveal :is(.section__title,.hero-intro__catch,.split__label-jp,.housing-lead__title).reveal.is-in + p{
  opacity:1;transform:none;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);
}
@media(max-width:767px){
  .wf-reveal .c1-label.reveal + :is(h1,h2,h3,h4,.faq-category__head),
  .wf-reveal .c1-label.reveal + :is(h1,h2,h3,h4,.faq-category__head) + p,
  .wf-reveal :is(.section__title,.hero-intro__catch,.split__label-jp,.housing-lead__title).reveal + p{
    transform:translateY(24px);   /* SP=控えめ（既存 .reveal と同値） */
  }
}
@media(prefers-reduced-motion:reduce){
  .wf-reveal .c1-label.reveal + :is(h1,h2,h3,h4,.faq-category__head),
  .wf-reveal .c1-label.reveal + :is(h1,h2,h3,h4,.faq-category__head) + p,
  .wf-reveal :is(.section__title,.hero-intro__catch,.split__label-jp,.housing-lead__title).reveal + p{
    opacity:1;transform:none;transition:none;
  }
}
@media(max-width:767px){
  .wf-reveal .reveal{transform:translateY(24px);} /* SP=控えめ */
}

/* ============================================================================
   12. SPユーティリティ（改行制御／リード左揃え）
   ---------------------------------------------------------------------------- */
.br-sp{display:none;}                      /* PC=非表示 */
/* [20261029b] .br-pc＝PCだけの改行（SP＝767px以下では消して文をつなげる）。
   リード文の <br> はPCで2文を2行に見せるためのもので、SPでは「家です。」だけの短い行を作っていた
   （ディレクター選択＝案B）。改行の前後に空白を置かないこと（SPで文中に空白が出る）。 */
@media(max-width:767px){ .br-pc{display:none;} }
/* [20261029f] .br-xs＝狭いスマホ（389px以下＝iPhone SE／mini・Android の小型機）だけで改行。
   390px以上のスマホでは1行に収まる見出しを、狭い幅で「…家にす／る。」のように割らないために使う。 */
.br-xs{display:none;}
@media(max-width:389px){ .br-xs{display:inline;} }
@media(max-width:767px){
  .br-sp{display:inline;}                   /* SP=改行 */
  /* リード文＝SPは左揃え（中央揃えの中途半端な改行を回避） */
  /* 2026-08-20 ディレクター指示（Notionチェックリスト about-04 ほか12行）:
     NEXTブロックのボタン下説明文 .next-read__main-desc は**SPも中央揃え**にする
     （タブレット以上と同じ）。→ 本セレクタから除外。他のリード文は従来どおりSP左揃え。 */
  .section__lead,.split__lead,.statement__copy,
  .page-hero__lead{text-align:left;}
  .statement{text-align:left;}
}

/* ============================================================================
   13. リード文の左揃えボックス化（全ブレークポイント・ディレクター指示 2026-07-20）
   ----------------------------------------------------------------------------
   見出し下のリード文（.section__lead / .split__lead / .page-hero__lead）を
   「max-width:720px の左揃えボックス・ボックス自体は左右中央（margin-inline:auto）」に統一。
   PCの中央揃え（.section__lead center・@media(min-width:768px)の .page-hero__lead center）を上書き。
   ※対象はリード文クラスのみ。見出し・キャプション・宣言文（.statement）は巻き込まない。
   ※本セクションはファイル末尾に置き、min-width:768px の PC中央指定より後勝ちさせる
     （メディアクエリは詰み込み度を上げないため、等特異度なら後方ソースが勝つ）。
   ---------------------------------------------------------------------------- */
.section__lead,
.split__lead,
.page-hero__lead{
  width:fit-content;      /* 文字量が720px未満ならボックス幅を文字に追従させ、テキスト自体が中央に寄る（ディレクター指示 2026-07-27） */
  max-width:720px;
  margin-inline:auto;     /* ボックスを左右中央に。上下マージンは各クラス既定を維持 */
  text-align:left;        /* テキストは左揃え（全ブレークポイント） */
}

/* ----------------------------------------------------------------------------
   [20260821o] c1ページでも §13 を成立させる（2026-08-21 ディレクター指示
   「section__lead は、左揃えで、塊は中央にしてほしい」）。
   問題: c1-theme.css §7-2 の `.c1 .section__lead{text-align:center}` が、上の §13 を
     PCで打ち消していた（c1-theme.css は design-system.css より後に読み込まれ、
     `.c1 .section__lead`(0,2,0) が `.section__lead`(0,1,0) に勝つ）。
     結果、全279ページのリードがPCで中央揃えになり、2026-07-20/07-27 の確定仕様から外れていた。
   対処: **c1-theme.css は変更禁止（docs/22 R09・2026-08-21ディレクター指示）** のため、
     こちら側の詳細度を1段上げて上書きする。`body.c1 .section__lead` = (0,2,1) で
     `.c1 .section__lead` = (0,2,0) に勝つ。読み込み順に依存しない。
   仕様（2026-07-20 ＋ 07-27）:
     ・text-align:left    … 行は左揃え
     ・width:fit-content  … 文字量が720px未満なら箱が文字幅に追従する
     ・margin-inline:auto … その箱を左右中央に置く ＝「塊は中央」
   ---------------------------------------------------------------------------- */
body.c1 .section__lead{
  width:fit-content;
  max-width:var(--c1-measure, 720px);
  margin-inline:auto;
  text-align:left;
}

/* ============================================================================
   12. フッター前 統一ブロック（全下層ページ共通・2026-07-27 ディレクター指示）
       トップ（home.html）の「来店ご予約」「CTA3連」を共通パーツ化して下層へ注入。
       ※home.html は自前の page-scoped <style> が本ファイルより後に読まれるため見た目不変。
   ---------------------------------------------------------------------------- */
/* --- 12-1. 次コンテンツ誘導（next-read）＝遷移先ヒーロー画像を全幅背景に（ブラー＋暗幕・白文字） ---
   背景画像は各ページが子要素 <div class="next-read__bg" style="background-image:url(assets/img/…)"> で指定
   （url() を HTML の inline style に置く＝相対パスが HTML 基準で解決される。CSS変数経由だと
   ブラウザにより CSS ファイル基準で解決され assets/assets/… と二重化するため不採用）。
   bg要素が無いページ＝無地ダーク（ヒーローなし遷移先のフォールバック）。 */
.next-read--hero{position:relative;overflow:hidden;background:#2b2e28;color:#fff;}
.next-read__bg{
  position:absolute;inset:-24px;z-index:0;   /* inset負値＝blurの白フチを外へ逃がす */
  background-size:cover;background-position:center;background-repeat:no-repeat;
  filter:blur(8px) brightness(.5) grayscale(.15);
  transition:filter .5s ease;
}
.next-read--hero > .next-read__inner{position:relative;z-index:1;}
.next-read--hero .next-read__label{color:rgba(255,255,255,.85);}
.next-read--hero .next-read__main{border-color:rgba(255,255,255,.75);color:#fff;background:transparent;}
.next-read--hero .next-read__main-title{color:#fff;}
.next-read--hero .next-read__main-desc{color:rgba(255,255,255,.85);}
.next-read--hero .next-read__sub{color:rgba(255,255,255,.9);}
.next-read--hero .next-read__sub-link{color:#fff;text-decoration:underline;text-underline-offset:3px;}
@media(hover:hover) and (pointer:fine){
  .next-read--hero:hover .next-read__bg{filter:blur(8px) brightness(.62) grayscale(.15);}   /* ホバーでわずかに明度回復 */
  .next-read--hero .next-read__main:hover{border-color:#fff;background:rgba(255,255,255,.08);}
}
@media(prefers-reduced-motion:reduce){.next-read__bg{transition:none;}}

/* --- 12-2. 来店ご予約・ご相談（全幅・写真背景・白文字・中央）＝home と同一意匠 --- */
.consult{
  position:relative; width:100%; padding:var(--sp-6) var(--pad-side,16px);
  background:#2c3327 url(img/bottom-consult-bg.webp?v=20260727i) center/cover no-repeat;
  color:#fff; text-align:center; overflow:hidden;
}
.consult::before{ content:""; position:absolute; inset:0; background:rgba(22,30,20,.45); z-index:0; }
.consult__inner{ position:relative; z-index:1; max-width:720px; margin:0 auto; }
/* 2026-08-21 ディレクター指示: home.html で確定した「来店ご予約・ご相談」の罫線位置を全ページへ適用。
   ① line-height を明示。従来は本文の行間1.9を継承していて、罫線の上に見えない余白が16.8pxも
      入り、罫線が大きく下寄りに見えていた（他の見出しと同じ --lh-h2 に揃える）。
   ② 罫線の上マージン＝calc(28px - .23em)。.23em＝和文見出しのインク下端〜ボックス下端の実測値。
   ③ 罫線〜本文＝28px（本文側のインクまでの内側余白7.7pxを別途含む）。
   ＝見た目で「上28px／下36px」＝中央よりやや上（2026-08-21ディレクター確認済みの位置）。 */
.consult__title{ font-family:var(--ff-jp); font-weight:var(--fw-normal,400); font-size:clamp(24px,3vw,32px); letter-spacing:.1em;
  line-height:var(--lh-h2); }
.consult__title::after{ content:""; display:block; width:56px; height:1px; background:rgba(255,255,255,.6); margin:calc(28px - .23em) auto 0; }
.consult__lead{ margin-top:28px; font-size:15px; line-height:1.95; color:rgba(255,255,255,.9); }
.consult__tel{ margin-top:44px; }
.consult__tel a{
  display:inline-flex; align-items:center; gap:14px; color:#fff; text-decoration:none;
  font-family:var(--ff-en,inherit); font-weight:var(--fw-normal,400);
  font-size:clamp(30px,4.6vw,44px); letter-spacing:.02em;
}
.consult__tel svg{ width:.82em; height:.82em; flex:none; }
.consult__hours{ margin-top:12px; font-size:14px; color:rgba(255,255,255,.85); letter-spacing:.05em; }
.consult__closing{ margin-top:40px; font-family:var(--ff-jp); font-size:clamp(18px,2.4vw,24px); line-height:1.95; letter-spacing:.05em; }
.consult__btn{ margin-top:36px; display:flex; justify-content:center; }
.consult__btn .btn{ background:#fff; color:var(--c-text); border-color:#fff; }

/* --- 12-3. フッター前 CTA3連（写真背景・暗幕・白文字）＝home と同一意匠 --- */
.cta-photos{ display:grid; grid-template-columns:1fr; gap:0; }
@media(min-width:768px){ .cta-photos{ grid-template-columns:repeat(3,1fr); } }
.cta-photo{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; text-decoration:none; color:#fff; min-height:300px; padding:56px 24px; overflow:hidden;
  background:#333 center/cover no-repeat;
}
@media(min-width:768px){ .cta-photo{ min-height:360px; } }
.cta-photo::after{ content:""; position:absolute; inset:0; background:rgba(20,20,20,.44); z-index:0; transition:background .4s ease; }
.cta-photo>*{ position:relative; z-index:1; }
@media(hover:hover){ .cta-photo:hover::after{ background:rgba(20,20,20,.28); } }
.cta-photo--document{ background-image:url(img/bottom-cta-document.webp?v=20260727i); }
.cta-photo--line{ background-image:url(img/bottom-cta-line.webp?v=20260727i); }
.cta-photo--event{ background-image:url(img/bottom-cta-event.webp?v=20260727i); }
.cta-photo__title{ font-family:var(--ff-jp); font-weight:var(--fw-normal,400); font-size:clamp(20px,2.4vw,24px); letter-spacing:.08em; margin-bottom:20px; }
.cta-photo__text{ font-size:14px; line-height:1.95; color:rgba(255,255,255,.92); margin-bottom:28px; }
/* LINE登録特典（仮置き・2026-07-28 ディレクター指示。特典内容はクライアント確定待ち） */
.cta-photo__bonus{ font-size:13px; letter-spacing:.04em; line-height:1.8; color:#fff;
  border:1px solid rgba(255,255,255,.5); padding:6px 14px; margin:-14px 0 24px; display:inline-block; }
.cta-photo__bonus-note{ font-size:11px; color:rgba(255,255,255,.75); }
.cta-photo .btn{ background:#fff; color:var(--c-text); border-color:#fff; align-self:center; width:auto; min-width:min(360px,100%); } /* [20261023b] 348→360px（ディレクター：例外にせず他のボタンと揃える） */ /* 2026-07-28 A-4: 幅300→348px（カンプ home-4/contents-4 実測348px。横棒占有帯56pxを引いても11文字が1行に収まる最小幅） */

/* ============================================================================
   B-1. ボタン内テキストの天地均等化（2026-07-28 ディレクター指示・全ボタン共通）
   ----------------------------------------------------------------------------
   【従来の不具合】.btn は inline-block ＋ line-height:2.05（body継承）だったため、
     Noto Sans JP のメトリクス（ascent 1.160em / descent 0.288em ＝ content-area 1.448em）
     に対して余剰リーディング 0.30em が上下へ配分され、和文の墨（ink）が視覚的に下寄りに見えた。
     さらに home では .btnroll（line-height:1.6・vertical-align:top）が親の行ボックス（2.05em）
     より低い箱を"行頭"に貼り付けるため、文字が上へ 6px 前後ずれていた。
   【対策】.btn を flex（PCは inline-flex）＋ align-items:center にして
     「行ボックスそのものをボタンの上下中央へ置く」。padding-block は上下同値のまま高さのみ担当。
     行ボックスは line-height:1.4 に詰め、余剰リーディングの非対称配分を最小化する。
     残る非対称はフォントメトリクス由来の 0.112em（14pxで約1.6px＝中心から0.8px下）のみ＝±1px以内。
   【副次】.btn--ic（アイコン付き）もこの flex 中央揃えに相乗りする。
   ---------------------------------------------------------------------------- */
.btn{
  display:flex;align-items:center;justify-content:center;
  /* 光学補正（2026-07-28 B-1・実測）: 行ボックスを中央に置いても、Jost/Noto Sans JP の
     ascent/descent 非対称のぶんだけ墨（ink）が上へ約0.67px寄る（実測 上gap23.2 / 下gap24.5）。
     padding-block を上下 0.65px だけ振り分けて相殺する（ボタン高は不変）。 */
  padding-block:calc(var(--btn-pad-y) + var(--btn-optical,.65px)) calc(var(--btn-pad-y) - var(--btn-optical,.65px));
  /* line-height は body 継承（2.05）のまま＝ボタン高は従来と不変。
     天地の偏りは「行ボックスごと中央へ置く」ことで解消する（高さは変えない）。 */
}
@media(min-width:768px){ .btn{display:inline-flex;} }

/* ============================================================================
   12-4. CTA系ボタンのアイコン（2026-07-28 ディレクター指示 A-10 / B-2）
   ----------------------------------------------------------------------------
   カンプ実測（design_comp/home-3・home-4・contents-3・contents-4 ＝ 3328px幅 ＝ CSS1664px の2倍）:
     ・アイコンは線画（Material Symbols系）／描画線 1.5px CSS（viewBox24 × stroke-width1.8 × 枠20px）
     ・封筒（来店予約）    墨 16.0 × 13.0px  ・書類+下矢印（資料DL） 墨 16.0 × 20.0px
     ・スマートフォン（LINE）墨 12.0 × 18.5px ・カレンダー（見学会）  墨 ≒16 × 15px
     ・アイコン右端〜文字左端 = 11px（実測 23px @2x）
     ・グレースケール厳守＝アイコン色は currentColor（＝ボタンの文字色と同一）
   ---------------------------------------------------------------------------- */
.btn--ic{gap:11px;}
.btn__ic{
  flex:none;width:20px;height:20px;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.btn__ic--dl{width:22px;height:22px;stroke-width:1.65;}     /* 枠22pxぶん線幅を補正＝実線幅1.5pxを維持 */
.btn__ic--phone{width:22px;height:22px;stroke-width:1.65;}

/* 2026-07-28 A-4: 上記の暫定padding規則は「横棒の占有帯を常時確保する」新規則
   （本ファイル下部 §A-4）へ置換済み。 */

/* ============================================================================
   12-5. コンテンツページの「来店ご予約・ご相談」＝コンパクト版
         （2026-07-28 ディレクター指示 B-2・カンプ contents-3 準拠）
   ----------------------------------------------------------------------------
   構成: タイトル → 罫線 → 電話（受話器アイコン） → 営業時間 → ボタン（封筒アイコン）のみ。
   home にある リード2行（「まだ何も決まっていない」〜）と 下部キャッチ（「暮らしのこと、土地のこと。」〜）
   はコンテンツページでは非表示。セクション高さもカンプ（400px）に合わせて圧縮する。
   ※home.html には consult--compact を付けない＝トップは従来のフル版（カンプ home-3）のまま。
   ---------------------------------------------------------------------------- */
.consult--compact .consult__lead,
.consult--compact .consult__closing{display:none;}
/* カンプ contents-3 実測（CSS px換算）: セクション高 400 ／ 上端→タイトル墨 87 ／ 罫線 153.5 ／
   電話 墨189-226 ／ 営業時間 墨249-261.5 ／ ボタン枠 289-331 ／ ボタン下→下端 69 */
.consult--compact{padding-top:60px;padding-bottom:52px;}
.consult--compact .consult__tel{margin-top:24px;}
.consult--compact .consult__tel a{line-height:1.2;}   /* 44pxの行ボックス(2.05)を実文字高に詰める＝カンプの間隔に一致 */
.consult--compact .consult__hours{margin-top:10px;}
.consult--compact .consult__btn{margin-top:24px;}
@media(max-width:767px){
  .consult--compact{padding-top:48px;padding-bottom:44px;}
}

/* ============================================================================
   12-6. CTA3連のカード高さ（2026-07-28 B-2・カンプ実測）
         home = home-4 実測 400px ／ コンテンツページ = contents-4 実測 300px
   ---------------------------------------------------------------------------- */
@media(min-width:768px){
  .cta-photo{ min-height:300px; padding:20px 24px; }   /* contents 版（29ページ）＝カンプ contents-4 実測300px */
}

/* ============================================================================
   ボタン ホバーアニメーション 新仕様（2026-07-28 ディレクター指示 A-3）
   ----------------------------------------------------------------------------
   【文字ロール不動作の原因】ロール構造（.btnroll > .btnroll__t[data-text]）を生成するのは
     home-anim.js、対応CSSは home-anim.css。いずれも home.html しか読み込まないため、
     他29ページの .btn にはロール用DOMが存在せず文字は静止。一方 横棒は全ページ共通の
     global-nav.css（.btn::after ＋ @keyframes btn-bar）にあるため動いていた
     ＝「横棒は動くがテキストがアニメしない」の正体。
     → 生成を assets/global-nav.js（全30ページ）へ移設し、CSSも本ブロックへ共通化して解消。
   【新仕様】ホバーで
     ① 文字が下からロールで入れ替わる（.btnroll__t を -100% 送り、::after の複製が下から入る）
     ② 文字色が反転（--btn-inv-fg）
     ③ 背景が「中央から外周へ広がる円」で反転（--btn-inv-bg ／ ::before の scale 0→1・0.45s）
     白地ボタン → 黒背景＋白文字 ／ 塗り黒ボタン(.btn--primary) → 白背景＋黒文字（グレースケール内）
     横棒（btn-bar）の既存アニメは維持。prefers-reduced-motion では ①③ を無効化。
   ---------------------------------------------------------------------------- */
.btn{
  --btn-inv-bg:#1a1a1a;                     /* 反転後の背景 */
  --btn-inv-fg:#ffffff;                     /* 反転後の文字色 */
  --btn-inv-dur:.45s;
  --btn-bar-w:32px;                          /* 右端の横棒 幅 */
  --btn-bar-gap:24px;                        /* 横棒の右マージン */
  isolation:isolate;
  transition:color .3s ease .08s,border-color .3s ease .08s;
}
/* 塗り黒ボタンは白背景＋黒文字へ反転 */
.btn--primary{--btn-inv-bg:#ffffff;--btn-inv-fg:var(--c-text,#1a1a1a);}

/* 20260810d QA対応: 反転後の背景が白（明色）になるボタンは、枠線まで白にすると
   白地の本文背景に溶けて「ボタンの輪郭が消える」（ディレクターQA指摘1・全ページ共通）。
   反転後の枠線色を --btn-inv-border として分離し、明色反転のときだけ濃色1pxを残す。
   ※既定は従来どおり「枠線＝反転後の背景色」＝白地ボタン（→黒反転）の見た目は不変。 */
.btn{--btn-inv-border:var(--btn-inv-bg);}
.btn--primary{--btn-inv-border:var(--c-text,#1a1a1a);}

/* ③ 四角形拡大（2026-07-29 P26-AE ディレクター指示：円→四角形へ変更）。
   外枠より少し小さい色反転の四角形（幅高85%）が拡大して外枠にフィット。あまり小さくしすぎない。 */
.btn::before{
  content:"";position:absolute;z-index:0;inset:0;
  background:var(--btn-inv-bg);border-radius:inherit;
  transform:scale(.85);transform-origin:center;opacity:0;
  transition:transform var(--btn-inv-dur) cubic-bezier(.4,0,.2,1),opacity calc(var(--btn-inv-dur) * .35) ease;
  pointer-events:none;
}
/* 円より前面に文字・アイコン・横棒を置く（.btnroll / .btn__ic は要素なのでこれで全て被覆） */
.btn>*{position:relative;z-index:1;}
.btn::after{z-index:1;}

/* ① 文字ロール（DOMは global-nav.js が生成） */
.btn .btnroll{display:inline-block;overflow:hidden;vertical-align:top;}
.btn .btnroll__t{
  position:relative;display:inline-block;
  transition:transform .42s cubic-bezier(.19,1,.22,1);will-change:transform;
}
.btn .btnroll__t::after{content:attr(data-text);position:absolute;left:0;top:100%;white-space:nowrap;}

@media(hover:hover) and (pointer:fine){
  .btn:hover{color:var(--btn-inv-fg);border-color:var(--btn-inv-bg);}   /* ② 文字色反転 */
  /* 20260810d QA対応: 枠線は --btn-inv-border（明色反転時は濃色）を採用。
     詳細度(0,3,0)＝home.html 等がページ内<style>で持つ同名ルール(0,2,0)にも確実に勝たせる。 */
  .btn.btn:hover{border-color:var(--btn-inv-border);}
  .btn:hover::before{transform:scale(1);opacity:1;}                     /* ③ 四角形が外枠へフィット拡大 */
  .btn:hover .btnroll__t{transform:translateY(-100%);}                  /* ① 文字が下からロール */
}

/* ============================================================================
   A-4. ボタン内テキストと右端横棒の干渉／不自然な折返しの恒久対策（2026-07-28）
   ----------------------------------------------------------------------------
   原因: 横棒は position:absolute（right:24px / w32px）で「文字の上に重なる構造」だったため、
     左右paddingが横棒の占有帯（gap24+幅32＝56px）を下回る幅帯で必ず重なる。
     ・PCの一般ボタン: padding 64px ≧ 56px ＝ もともと重ならない
     ・CTA3連/来店ご予約: 直前タスクで padding を min(64px,8%) にしたため狭幅帯で不足 → 重なり
     ・SP: padding 24px < 56px ＝ 全ボタンで重なり得た
   対策:
     ① 横棒の占有帯（--btn-bar-w + --btn-bar-gap + 4px の逃げ）を padding で常時確保
        ＝「重ねる構造」自体をやめる。中央寄せの内容は決して横棒へ到達しない。
     ② SPは横棒自体を小さくして文字領域を確保（24px/14px）
     ③ CTA3連は nowrap＋カンプ実測幅348pxに拡張。さらに狭い幅帯では字間・font-size・
        アイコンを段階的に微減し、最終手段として横棒を非表示にする。
   ---------------------------------------------------------------------------- */
.btn::after{right:var(--btn-bar-gap);width:var(--btn-bar-w);}
/* [20261020zd] 文字と横棒のすき間の最低幅＝10px（旧4px。ディレクター「横線との幅が近すぎる」）。
   幅が文字に合わせて決まるボタンでは常にこの値になる。--btn-bar-space で個別調整可。
   スマホで1行に収まらない長い文言は .btn--tight（字間0）を付ける。 */
.btn{--btn-bar-space:10px;}
@media(min-width:768px){ .btn{--btn-bar-space:20px;} }   /* [20261023a] PCは20px（360px幅で長い文言でも余裕を持たせる。足りなければボタンが横に伸びる）。SPは横いっぱいなので10pxのまま */
@media(max-width:1023px){ .btn.btn--tight{letter-spacing:0;white-space:nowrap;--btn-bar-w:24px;--btn-bar-gap:14px;--btn-bar-space:10px;} }   /* nowrap＝無料相談会スタジオボタンが0.4px足りず折れるため。[20261023a] タブレット幅（〜1023px）もカードが細いので同じ扱い＋横棒をSPサイズに */
.btn{padding-inline:max(calc(var(--btn-bar-w) + var(--btn-bar-gap) + var(--btn-bar-space,10px)),var(--sp-3,24px));}
@media(max-width:767px){
  .btn{--btn-bar-w:24px;--btn-bar-gap:14px;}   /* SP=横棒を小さくして文字領域を確保 */
}
@media(min-width:768px){
  .btn{padding-inline:max(calc(var(--btn-bar-w) + var(--btn-bar-gap) + var(--btn-bar-space,10px)),var(--btn-pad-x,64px));}
}
/* .btn--small は横棒帯を持たない（コンパクト運用を維持）。
   ※前タスク(AB)で .btn に padding-block を後置したため .btn--small の 9px 指定が打ち消され
     高さが 44.6px → 56.6px に膨らんでいた。ここで小ボタン用の padding-block を明示して是正する
     （光学補正 0.65px は維持）。 */
.btn--small{
  --btn-bar-w:0px;--btn-bar-gap:0px;
  padding-inline:16px;
  padding-block:calc(9px + var(--btn-optical,.65px)) calc(9px - var(--btn-optical,.65px));
}
.btn--small::after{display:none;}

/* CTA3連・来店ご予約＝カンプ実測幅に合わせつつ、狭幅帯でも1行を維持 */
.cta-photo .btn,.consult__btn .btn{white-space:nowrap;}
@media(min-width:768px){
  .cta-photo .btn,.consult__btn .btn{
    padding-inline:max(calc(var(--btn-bar-w) + var(--btn-bar-gap) + var(--btn-bar-space,10px)),min(var(--btn-pad-x,64px),8%));
  }
}
@media(min-width:768px) and (max-width:1187px){
  /* カード幅が348pxを割る帯域＝字間→font-size→アイコンの順に微減して1行を保つ */
  .cta-photo .btn{font-size:13px;letter-spacing:.02em;--btn-bar-w:24px;--btn-bar-gap:14px;}
  .cta-photo .btn--ic{gap:8px;}
  .cta-photo .btn .btn__ic{width:17px;height:17px;}
  .cta-photo .btn .btn__ic--dl,.cta-photo .btn .btn__ic--phone{width:19px;height:19px;}
}
@media(min-width:768px) and (max-width:899px){
  /* それでも収まらない幅帯は横棒を出さない＝残り全幅を文字に使う */
  .cta-photo .btn{--btn-bar-w:0px;--btn-bar-gap:0px;padding-inline:16px;}
  .cta-photo .btn::after{display:none;}
}

@media(prefers-reduced-motion:reduce){
  html:not(.wf-force-motion) .btn{transition:none;}
  html:not(.wf-force-motion) .btn::before{transition:none;}
  html:not(.wf-force-motion) .btn:hover::before{transform:scale(.85);opacity:0;}
  html:not(.wf-force-motion) .btn .btnroll__t{transition:none;}
  html:not(.wf-force-motion) .btn:hover .btnroll__t{transform:none;}
  html:not(.wf-force-motion) .btn:hover{color:inherit;}
}

/* ============================================================================
   P07. ボタン高さ 45px 統一（2026-07-29 AE ディレクター確定）
   ----------------------------------------------------------------------------
   現行 .btn 高＝lineBox(2.05×14=28.7) + padding-block(15+15) + border(2) = 60.7px。
   カンプ実測42.5px／ディレクター確定「きりのいいところで45px」。
   ・min-height:45px で単一行ボタンを45pxに固定（flex align-items:center で ink 天地センター維持）。
   ・padding-block を圧縮（上下 7.15px ±光学0.65px）＝単一行の自然高≒45pxに寄せ、min-height が保証。
   ・複数行（狭SPの長文ボタン）は自然増で崩さない（min-height のため）。
   ・.btn--small は対象外（コンパクト運用維持・P10）。
   ・詳細度 0,2,0（.btn:not(.btn--small)）で §B-1／home.html インライン等の単一クラス指定に確実に勝つ。 */
.btn:not(.btn--small){
  min-height:45px;
  padding-block:calc(7.15px + var(--btn-optical,.65px)) calc(7.15px - var(--btn-optical,.65px));
}

/* ============================================================================
   B-1. next-read セクション刷新（2026-07-28 ディレクター指示）
   ----------------------------------------------------------------------------
   ・ラベル「次に読む」→「NEXT」（英字ラベル意匠に統一。nav の aria-label は「次に読む」を維持）
   ・「あわせて読む」（補助2リンク行）は削除
   ・説明文 .next-read__main-desc はボタン枠の外＝下のスペースへ移動（HTML側で p 要素化）
   ・主導線は「ボタンとしての共通性」を持たせる＝右端の横棒罫線＋A-3の新ホバーアニメを共有
     （背景が中央から外周へ広がる／文字は下からロール／文字色反転）
   ・next-read--hero は暗背景・白文字のため、反転先は「白背景100%＋黒文字」
   ※ border / background / color は §9・§12-1 の既存指定をそのまま活かすため、ここでは触れない。
   ---------------------------------------------------------------------------- */
.next-read__main{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:min(420px,100%);max-width:100%;
  padding-block:22px;
  padding-inline:max(60px,min(64px,8%));   /* 右端横棒の占有帯(24+32)を常時確保＝A-4と同方針 */
  margin-bottom:18px;
  --btn-inv-bg:#1a1a1a;--btn-inv-fg:#ffffff;--btn-inv-dur:.45s;
  --btn-inv-border:var(--btn-inv-bg);
  transition:color .3s ease .08s,border-color .3s ease .08s;
}
/* 20260810d QA対応: 明色（白）へ反転する側は枠線を濃色に＝白背景に輪郭が溶けない（QA指摘1） */
.next-read--hero .next-read__main{--btn-inv-bg:#ffffff;--btn-inv-fg:var(--c-text,#1a1a1a);--btn-inv-border:var(--c-text,#1a1a1a);}
/* 背景＝四角形拡大（2026-07-29 P26-AE：円→四角形へ統一・.btn と同仕様） */
.next-read__main::before{
  content:"";position:absolute;z-index:0;inset:0;
  background:var(--btn-inv-bg);border-radius:inherit;
  transform:scale(.85);transform-origin:center;opacity:0;
  transition:transform var(--btn-inv-dur) cubic-bezier(.4,0,.2,1),opacity calc(var(--btn-inv-dur) * .35) ease;
  pointer-events:none;
}
/* 右端の横棒罫線＝.btn と同一意匠・同一アニメ（btn-bar を流用） */
.next-read__main::after{
  content:"";position:absolute;z-index:1;right:24px;top:50%;
  width:32px;height:1px;background:currentColor;
}
.next-read__main>*{position:relative;z-index:1;}
.next-read__main-title{display:block;font-size:var(--fs-h3);font-weight:var(--fw-normal);letter-spacing:var(--ls-2);}
/* 文字ロール（DOMは global-nav.js が .next-read__main-title に生成） */
.next-read__main .btnroll{display:inline-block;overflow:hidden;vertical-align:top;}
.next-read__main .btnroll__t{
  position:relative;display:inline-block;
  transition:transform .42s cubic-bezier(.19,1,.22,1);will-change:transform;
}
.next-read__main .btnroll__t::after{content:attr(data-text);position:absolute;left:0;top:100%;white-space:nowrap;}
@media(hover:hover) and (pointer:fine){
  .next-read__main:hover{color:var(--btn-inv-fg);border-color:var(--btn-inv-border);}
  .next-read--hero .next-read__main:hover{background:transparent;}  /* §12-1のhover背景を無効化＝円だけで反転 */
  .next-read__main:hover::before{transform:scale(1);opacity:1;}
  .next-read__main:hover .btnroll__t{transform:translateY(-100%);}
  .next-read__main:hover::after{animation:btn-bar .55s cubic-bezier(.4,0,.2,1);}
}
/* SPは横棒を小さくして文字領域を確保（.btn と同方針・A-4）。
   実測: 375px幅でタイトル1行を維持（320px級では2行になるが横棒との干渉は0）。 */
@media(max-width:767px){
  .next-read__main{padding-inline:max(42px,min(64px,8%));}
  .next-read__main::after{right:14px;width:24px;}
}
/* 説明文＝ボタン枠の下 */
.next-read__main-desc{display:block;margin:0;font-size:var(--fs-caption);color:var(--c-text-sub);line-height:1.9;}
.next-read--hero .next-read__main-desc{color:rgba(255,255,255,.85);}
@media(prefers-reduced-motion:reduce){
  html:not(.wf-force-motion) .next-read__main,
  html:not(.wf-force-motion) .next-read__main::before,
  html:not(.wf-force-motion) .next-read__main .btnroll__t{transition:none;}
  html:not(.wf-force-motion) .next-read__main:hover::before{transform:scale(.85);opacity:0;}
  html:not(.wf-force-motion) .next-read__main:hover .btnroll__t{transform:none;}
  html:not(.wf-force-motion) .next-read__main:hover::after{animation:none;}
}

/* ============================================================================
   QA修正 2026-08-10（Notionチェックリスト・model-house/interview-detail指摘）:
   NEXT（.next-read--hero）ボタンのロールオーバーで文字色と背景が白で被る問題の恒久対策。
   ホバー＝「白面×濃文字」の明確な反転に統一（曖昧な白8%オーバーレイを廃止）。
   ============================================================================ */
@media(hover:hover) and (pointer:fine){
  .next-read--hero .next-read__main:hover{background:#fff;border-color:#fff;}
  .next-read--hero .next-read__main:hover .next-read__main-title{color:#1a1a1a;}
  .next-read--hero .next-read__main:hover .next-read__main-desc{color:#555;}
}

/* ============================================================================
   タグ＝丸（999px）［20261101d］docs/19 P189②＝A（ディレクター「ボタンとの違いが明らかで良い」）
   ----------------------------------------------------------------------------
   役割で形を分ける：**タグ（分類・地名・受付状況）＝丸／ボタン・絞り込み＝角**（design-rules §面）。
   各ページCSS（page-scoped／pages/*.css）の .card__tag{padding:1px 8px} などより後に効かせるため、
   先頭に html を付けて1段だけ強くしている（角丸と左右の余白だけを上書き。色・枠・字は各ページの指定のまま）。
   コラムの丸タグ（column.css .col-list__tag）とそろえた。
   ---------------------------------------------------------------------------- */
html .card__tag,
html .event-card__tag,
html .article__cat,
html .status-badge,
html .status-label{
  border-radius:var(--radius-pill);
  padding-left:12px;padding-right:12px;
}
/* お知らせ一覧のカテゴリは幅固定（96px）＝字がはみ出ないよう左右の余白は詰めたまま */
html .news-list__cat{border-radius:var(--radius-pill);padding-left:8px;padding-right:8px;text-align:center;}