/**
 * front-page.php（home）専用CSS
 *
 * 出典: design/pages/home.html の3つの<style>ブロックを結合・移植（docs/29_template-map.md §2-2 F分類）。
 * 元は814+181+552行（3ブロック合計1,548行）。url(assets/img/...) の相対パスのみ
 * 移植先（theme/idworks/assets/css/pages/home.css）からの相対参照 ../../img/ へ機械置換した。
 * それ以外は内容無変更（コメント含め文言はそのまま保持）。
 * 
 * 2026-09-07 wp-engineer 移植（P4-2 第2陣）。
 */

/* ===== ブロック1/3: メインstyle（旧home.html #9-822） ===== */
/* ==========================================================
   共通CSS（3ページ共通・クラシックテーマ流用前提のBEM風命名）
   グレースケールのみ。装飾は構造検証に必要な最小限。
   ========================================================== */
:root{
  --c-text:#1a1a1a;
  --c-text-sub:#666;
  --c-text-note:#888;
  --c-line:#ccc;
  --c-line-dark:#999;
  --c-bg:#fff;
  --c-bg-sub:#f4f4f4;
  --c-ph:#e6e6e6;      /* 写真プレースホルダ */
  --c-btn:#2b2b2b;
  --w-content:1480px; /* 2026-07-15指示: 1080→1480。幅システム本体（--pad-side=3vw/中央寄せ・94vw※96%解釈なら2vw要確認）は assets/global-nav.css */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:40px; --sp-5:64px;
  /* 余白設計（ディレクター指示 2026-07-15 改訂版）:
     余白はワイヤーの承認対象＝この値をそのままデザイン・実装へ引き継ぐ。
     セクション縦paddingの基準=--sp-6。山場（宣言的セクション）は--sp-7〜8で前後に呼吸。
     等間隔にせず「さざなみのように間を空けて情報がやってくる」リズムをつくる。 */
  /* [20261027c] 旧 --sp-6/7/8 の :root 上書き（120/160/200・PC 180/240/300）は廃止。
     design版は tokens.css が後から読まれて無効だったが、WP は home.css が tokens.css より後のため
     この値が生きてしまい、design版(150/180/220)と食い違っていた（ライフヒンツ上が240になる原因）。
     セクション余白は tokens.css の --sp-sec(120/SP72) で決める。 */
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,Meiryo,sans-serif;
  color:var(--c-text);
  background:var(--c-bg);
  line-height:2.05; /* 本文の行間1.9〜2.2目安（指示反映） */
  font-size:15px;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;}
a{color:inherit;}

/* --- ワイヤー用注記（実装時には出ない要素） --- */

/* --- 写真・図プレースホルダ --- */
.ph{
  background:var(--c-ph);
  border:1px dashed var(--c-line-dark);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#777;font-size:12px;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;}
}

/* --- ヘッダー（共通） --- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--c-bg);
  border-bottom:1px solid var(--c-line);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 16px;max-width:var(--w-content);margin:0 auto;
}
.site-header__logo{display:flex;align-items:center;gap:8px;text-decoration:none;}
.site-header__menu-toggle{display:none;}
.site-header__menu-btn{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:10px;cursor:pointer;
  border:1px solid var(--c-line);background:var(--c-bg);
}
.site-header__menu-btn span{display:block;height:2px;background:var(--c-text);}
.global-nav{
  display:none;
  position:absolute;left:0;right:0;top:100%;
  background:var(--c-bg);border-bottom:1px solid var(--c-line);
  padding:8px 16px 16px;
}
.site-header__menu-toggle:checked ~ .global-nav{display:block;}
.global-nav__list{list-style:none;}
.global-nav__item{border-bottom:1px solid var(--c-line);}
.global-nav__link{display:block;padding:12px 4px;text-decoration:none;font-size:14px;}
.global-nav__cta{margin-top:12px;display:grid;gap:8px;}
@media(min-width:768px){
  .site-header__menu-btn{display:none;}
  .global-nav{
    display:flex;position:static;border-bottom:none;padding:0;
    align-items:center;gap:24px;
  }
  .global-nav__list{display:flex;gap:20px;flex-wrap:wrap;}
  .global-nav__item{border-bottom:none;}
  .global-nav__link{padding:4px 0;font-size:13px;white-space:nowrap;}
  .global-nav__cta{margin-top:0;display:flex;gap:8px;}
}

/* --- ボタン --- */
.btn{
  display:block;text-align:center;text-decoration:none;
  border:1px solid var(--c-text);color:var(--c-text);
  padding:14px 24px;font-size:14px;letter-spacing:.08em;
  background:var(--c-bg);
}
.btn--primary{background:var(--c-btn);color:#fff;border-color:var(--c-btn);}
.btn--small{padding:9px 16px;font-size:12px;}
.btn-row{display:grid;gap:12px;margin-top:56px;}
@media(min-width:768px){
  .btn{display:inline-block;min-width:240px;}
  .btn-row{display:flex;justify-content:center;flex-wrap:wrap;}
}

/* --- セクション共通 --- */
.section{padding:var(--sp-sec) var(--pad-side,16px);} /* 基準＝上下120px（SP72）[20261027c] 他ページ(design-system.css)と同じ統一値 */
/* 「さざなみ」の緩急（等間隔にしない） */
.section--read{padding-top:var(--sp-sec);padding-bottom:var(--sp-sec);}    /* 読み物系＝標準に統一 [20261027c] */
.section--declare{padding-top:var(--sp-sec);padding-bottom:var(--sp-sec);} /* 宣言的な山場＝標準に統一 [20261027c] */
.section--sub{background:var(--c-bg-sub);}
.section__inner{max-width:var(--w-content);margin:0 auto;}
.section__inner--narrow{max-width:720px;}
/* [20261027c] 同一背景が続くとき（白→白／グレー→グレー）は前のセクションの下だけ詰める＝合計160。
   他ページの design-system.css と同じルール（home は design-system.css を読まないためここに持つ）。
   トップ固有＝直後が .lp-frag（こだわり＝.section ではないが白背景）の場合も同様に詰める。
   :has() 非対応ブラウザでは120/120のまま（崩れずに広めになるだけ）。 */
.section:not(.section--sub):not(.hero-intro):has(+ .section:not(.section--sub):not(.hero-intro)),
.section--sub:has(+ .section--sub),
.section:not(.section--sub):has(+ .lp-frag){padding-bottom:var(--sp-sec-join-bottom);}
/* セクションの余白は padding だけで決める（末尾要素の下マージンを落とす） */
.section:not(.hero-intro) > .section__inner > :last-child{margin-bottom:0;}
.section__title{
  font-size:22px;line-height:1.5;letter-spacing:.06em;
  margin-bottom:48px;text-align:center; /* 見出しと本文の間もゆったり */
}
.section__lead{margin-bottom:48px;}
.section__foot{margin-top:56px;text-align:center;}
@media(min-width:768px){
  .section__title{font-size:28px;margin-bottom:64px;}
  .section__lead{text-align:center;}
}

/* --- カード（CMS一覧系） --- */
.card-grid{display:grid;gap:20px;}
.card-grid--2col,.card-grid--4col{grid-template-columns:1fr;}
@media(min-width:768px){
  .card-grid--2col{grid-template-columns:repeat(2,1fr);}
  .card-grid--4col{grid-template-columns:repeat(3,1fr);} /* A5: 一覧カードは全サイトPC3列で統一（4列→3列） */
  /* home「見学会・イベント」のみ: PC=4カラム×1行・最大4件
     （A5「全サイトPC3列」へのディレクター指定の例外＝2026-07-15追加指示。SPは縦積みのまま） */
  .card-grid--events4{grid-template-columns:repeat(4,1fr);}
}
.card{text-decoration:none;display:block;}
.card__photo{margin-bottom:10px;}
.card__tag{font-size:11px;color:var(--c-text-sub);border:1px solid var(--c-line-dark);padding:1px 8px;display:inline-block;margin-bottom:6px;}
.card__title{font-size:15px;font-weight:500;line-height:1.6;}
.card__text{font-size:13px;color:var(--c-text-sub);margin-top:4px;}
.card__meta{font-size:12px;color:var(--c-text-sub);margin-top:4px;}

/* --- テキスト行リスト（お知らせ・イベント） --- */
.post-list{list-style:none;border-top:1px solid var(--c-line);}
.post-list__item{border-bottom:1px solid var(--c-line);}
.post-list__link{display:block;padding:14px 4px;text-decoration:none;font-size:14px;}
.post-list__date{font-size:12px;color:var(--c-text-sub);margin-right:10px;}

/* --- 特徴・柱 --- */
.feature-list{display:grid;gap:44px;margin-top:48px;}
@media(min-width:768px){.feature-list--3col{grid-template-columns:repeat(3,1fr);}}
.feature__title{font-size:16px;margin-bottom:6px;}
.feature__text{font-size:14px;color:var(--c-text-sub);}

/* --- 次に読む（導線ルール1：主導線1＋補助2） --- */
.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-size:12px;letter-spacing:.2em;color:var(--c-text-sub);margin-bottom:var(--sp-2);}
.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);
}
.next-read__main-title{font-size:18px;font-weight:500;display:block;}
.next-read__main-desc{font-size:13px;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:13px;}
.next-read__sub-link{color:var(--c-text-sub);}

/* --- フッター前 メソッド3画像ボタン（導線ルール2・全ページ共通） --- */
.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:13px;font-weight:500;background:rgba(255,255,255,.85);
}

/* --- フッター（共通） --- */
.site-footer{background:#2b2b2b;color:#ddd;padding:var(--sp-4) 16px var(--sp-3);}
.site-footer__inner{max-width:var(--w-content);margin:0 auto;}
.site-footer__logo{margin-bottom:var(--sp-3);}
.site-footer__info{font-size:12px;line-height:2;margin-bottom:var(--sp-3);}
.site-footer__nav{list-style:none;font-size:12px;display:grid;grid-template-columns:repeat(2,1fr);gap:6px 16px;margin-bottom:var(--sp-3);}
.site-footer__nav a{color:#ddd;text-decoration:none;}
.site-footer__copy{font-size:10px;color:#999;text-align:center;border-top:1px solid #555;padding-top:var(--sp-2);}
@media(min-width:768px){
  .site-footer__inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);}
  .site-footer__copy{grid-column:1/-1;}
  .site-footer__nav{grid-template-columns:repeat(3,1fr);}
}

/* ==========================================================
   HOME固有
   ========================================================== */
/* --- FV2：1物件目=模型→スケッチ描画→完成写真／以降=左ドリフト＋クロスフェードの無限ループ ---
   （ディレクター指示 2026-07-15改訂。素材: design_comp/FV-img01=模型のみ, FV-img02=模型+スケッチ,
     FV2カンプ切り出し=完成写真。自動再生＋スクロール追従（lerp慣性）の併用。
     スライダーは hadashinoie型＝各スライドがゆっくり左へ動き続けながら次画像がクロスフェード） */
.fv2{height:230vh;position:relative;}
.fv2__pin{
  position:sticky;top:var(--gnav-h,56px);
  height:calc(100svh - var(--gnav-h,56px));
  overflow:hidden;
}
/* 2026-10-15：SP専用の再分岐バー（.fv2__bizbar・A10＝FV上部に48pxの白帯＋「店舗・施設建築をご検討の方へ →」）を撤去。
   非住宅への導線は分岐画面・SPメニューのピル・フッターのピルが担う。FVはSPでもPCと同じく枠いっぱい。 */
.fv2__stage{position:absolute;inset:0;background:#fff;}
/* スライダー枠（2026-07-15夜 ブラウザチェック指示で全面改修＝FV表示エリアの多デバイス統一）
   ■PC（768px〜）:
   - 右余白2.97vwを撤廃＝画像は右端フラッシュ（left:10.86vwの左余白のみ維持。カンプ実測 139/1280）
   - 高さは「VHから逆算」: --fv-frame-h = min(アスペクト高 53.83vw, stage高 − 下余白)
     ・53.83vw = カンプアスペクト1103:666を幅89.14vw（=100vw−10.86vw）へ適用した高さ
     ・下余白 --fv-gap-b = clamp(30px, 4.5vh, 60px) ＝ ヘッダー高＋スライダー高＋下余白 ≦ 100vh を
       全PCサイズで成立させる（1080px高で48.6px／700px高で31.5px＝常に30〜60px）
     ・低背でアスペクト高が入らない場合は高さ優先＝object-fit:coverの追加クロップで吸収
       （SVGドローイングは preserveAspectRatio:slice で同一クロップ＝位置ずれなし）
   ■SP（〜767px・LA CASA型へ転換）:
   - 左余白なし＝VWいっぱいの幅（left:0/right:0）
   - 画面下側配置: 下端はキャプション帯（--fv-cap-h・画像の下の白地表示）の直上
   - 高さ --fv-frame-h = max(100vw, stage高−190px−帯高) ＝ 最低1:1、縦に余裕があれば
     さらに縦長（190px=上部白地のコピー用リザーブ。375×812で1:1.27、414×896で1:1.35）
   - 上部白地（stage高−画像−帯）にキャッチコピー（下の .fv2__copy 参照） */
.fv2__stage{
  --fv-cap-h:clamp(26px, 7.5vw, 34px);                            /* SP: 画像下キャプション帯の高さ */
  --fv-frame-h:max(100vw, calc(100% - 190px - var(--fv-cap-h)));  /* SP: スライダー高（%はstage高基準） */
}
.fv2__frame{
  position:absolute;left:0;right:0;bottom:var(--fv-cap-h);
  height:var(--fv-frame-h);max-height:calc(100% - var(--fv-cap-h));
  overflow:hidden;background:#ddd;
}
@media(min-width:768px){
  .fv2__stage{
    --fv-gap-b:clamp(30px, 4.5vh, 60px);                 /* PC: スライダー下端〜ビューポート下端の余白 */
    --fv-frame-h:min(53.83vw, calc(100% - var(--fv-gap-b)));
  }
  .fv2__frame{left:10.86vw;right:0;top:0;bottom:auto;height:var(--fv-frame-h);max-height:none;}
}
.fv2__layer{position:absolute;inset:0;}
.fv2__layer img{width:100%;height:100%;object-fit:cover;display:block;}
.fv2__model{z-index:1;}
/* スケッチ層: ディレクター支給の新ドローイングSVG（design_comp/FV-drawing-01.svg →
   assets/img/FV-drawing-01.svg にコピー、下のHTMLへインライン展開）。
   viewBox="0 0 3840 2176" ＝ 背景画像 slider-img01.webp（2400×1360=同アスペクト。旧img00.jpgは廃止）と
   同座標系・243パス分解済み（旧FV-drawing.svgのオーバーレイ配置transformは不要）。
   preserveAspectRatio="xMidYMid slice"（= img の object-fit:cover と同一クロップ）で
   画像とパスの位置が常に一致する。
   描画方式（2026-07-15 ディレクター指摘反映・全面変更）:
   全243パスがストロークベースの開いたパス（fill:none・stroke白・round cap。
   st1のみ fill:#EBEBEB 併用×10本）のため、旧「サブパス順次出現（opacity+微scale
   ＝塗りデータ用方式の引き継ぎ）」を撤去し、stroke-dashoffset による
   「線が始点から終点へ走る」本物の描画へ変更（実装はJS側 initSketch/applySketch）。
   stroke-width・cap・色はSVG内<style>（#fv2-draw スコープ済み）のまま上書きしない。
   ここでは初期非表示（opacity:0）のみ＝JS初期化（dasharray設定）完了後に表示 */
.fv2__sketch{z-index:2;}
.fv2__sketch svg{width:100%;height:100%;display:block;}
.fv2__sketch-sub{
  opacity:0;/* JSがdasharray/dashoffset初期化後に1へ（JS未初期化時も非表示＝フラッシュなし） */
}
/* スライドループ層（hadashinoie型「左ドリフト＋クロスフェード」。JSがopacity/transform/z-indexを
   毎フレーム制御＝CSS transitionは使わない）。
   画像は枠より大きく scale(1.08)（左右各4%の余裕）で配置し、スライド寿命中に translateX 0→-3.5% を
   等速で左ドリフト → 画像端が枠内に見えない（枠 .fv2__frame の overflow:hidden でクロップ）。
   ※ディレクター指示の目安は scale1.05程度だが、ドリフト量-3.5%を確実に覆うため1.08（要確認）。
   クロスフェードは「次スライドを上に重ねてフェードイン」方式（下は覆われるまでopacity1のまま）
   ＝切替時の白抜け・ガタつきなし。reduced-motion時はJSがtransformを書かず静止クロスフェードのみ */
.fv2__photo{z-index:3;opacity:0;}
.fv2__slide{z-index:2;opacity:0;}
.fv2__photo,.fv2__slide{transform:scale(1.08);will-change:opacity,transform;}
/* コピー: 最前面の固定レイヤー（stage直下・frameの外）。シャドウ・光彩なし（指示 2026-07-15）。
   PC: カンプ準拠＝左余白とスライダーをまたぐ。実測（1280×1080）: 左端x39=3.05vw／
   グリフ高44px≒fs52px（4.06vw）／行送り89px=lh1.7／1行目上端 ≒ stage上端から26%。
   SP（2026-07-15夜 ブラウザチェック指示・LA CASA型）: FV上部白地エリアに配置し、
   コピー下端が画像上端に20pxだけかかる（底辺アンカー: bottom = 画像高＋帯高 − 20px。
   %基準が同じstage高なので全SPサイズで「少しかかる」量が一定）。
   左Xは3.05vwのまま＝pin→dockのX一致原則維持。
   暗い素材用に .fv2__copy--white を用意（実装時は画像明度で切替） */
.fv2__copy{
  position:absolute;left:3.05vw;bottom:calc(var(--fv-frame-h) + var(--fv-cap-h) - 20px);
  z-index:7;margin:0;
  font-size:clamp(28px,4.06vw,52px);font-weight:500;line-height:1.7;
  letter-spacing:.06em;color:#1a1a1a;
}
@media(min-width:768px){
  .fv2__copy{top:26%;bottom:auto;}
}
.fv2__copy--white{color:#fff;}
/* 物件名キャプション帯（2026-07-15夜 ブラウザチェック追加指示で表示位置をデバイス別に分離。
   マークアップは .fv2__stage 直下＝frameの外の1要素のみ・スライド切替同期は従来どおりJS）
   ■SP: 画像への重ね表示をやめ「画像の下」の白地帯（stage最下部・全幅・高さ--fv-cap-h）。
     文字サイズはVW連動 2.35vw（375pxで8.8px）＝31字キャプションでも一行に収まる
     （一行目安: SP375px≒33字。超過分はellipsis）。帯高もstage内＝100svh内に収まる。
   ■PC: 現行どおり画像右下コーナーへの重ね表示（右端・下端は画像にフラッシュ＝
     bottom:calc(100% − 画像高)）。帯は内容量に応じて左へ伸びる（右アンカー）。
     文字サイズは指示により縮小: fs clamp(10px, 0.94vw, 13px)＝1280pxで12px・1440px以上で13px
     （旧15px→2段階減）／番号 clamp(10px, 0.86vw, 12px)。
     一行収まり目安（帯最大幅≒画像幅89.14vw−番号・余白）: PC1280px fs12px≒約80字／
     PC960px fs10px≒約70字（03「ワタリテラスノイエ｜…平屋」=31字は全サイズ一行OK） */
.fv2__caption{
  position:absolute;left:0;right:0;bottom:0;z-index:8;height:var(--fv-cap-h);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:#fff;padding:0 12px;
  max-width:100%;
}
.fv2__cap-link{
  text-decoration:none;color:var(--c-text);
  font-size:2.35vw;letter-spacing:.02em;line-height:1.6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fv2__cap-sep{padding:0 .4em;color:var(--c-line-dark);}
.fv2__nums{display:flex;gap:6px;font-size:2.35vw;color:#aaa;letter-spacing:.08em;line-height:1.6;flex:none;}
@media(min-width:768px){
  .fv2__caption{
    left:auto;right:0;bottom:calc(100% - var(--fv-frame-h));height:auto;
    justify-content:flex-start;gap:1.4em;
    background:rgba(255,255,255,.95);padding:7px 14px;
  }
  .fv2__cap-link{font-size:clamp(10px,.94vw,13px);letter-spacing:.05em;overflow:visible;}
  .fv2__nums{gap:12px;font-size:clamp(10px,.86vw,12px);}
}
.fv2__num{transition:color .3s ease;cursor:pointer;}
.fv2__num:hover,.fv2__num:focus-visible{color:var(--c-text);} /* [20261103f] 番号クリックでその写真へ切替（ディレクター指示） */
.fv2__num.is-on{color:var(--c-text);border-bottom:1px solid currentColor;}
/* キャプション切替演出（2026-07-17ディレクター指示・同日改訂＝横方向に統一）:
   ①帯の白枠幅が文字量へ「ニュッ」と伸縮（width遷移＝JSがFLIPで実測px→px）
   ②物件名は右へ引っ込み→右から新タイトルが入る（帯は右アンカーのため
     「右端に吸い込まれ・右端から現れる」＝幅の伸縮と同じ方向・連動して見える） */
.fv2__caption{transition:opacity .4s ease, width .45s cubic-bezier(.4,0,.2,1);overflow:hidden;}
.fv2__cap-clip{display:inline-block;overflow:hidden;vertical-align:top;max-width:100%;}
.fv2__cap-inner{display:inline-block;white-space:nowrap;transform:translateX(0);transition:transform .42s cubic-bezier(.22,.61,.36,1);}
.fv2__cap-inner.is-out{transform:translateX(112%);transition-duration:.3s;transition-timing-function:cubic-bezier(.55,0,.55,.2);}
.fv2__cap-inner.is-pre{transform:translateX(112%);transition:none;}
.fv2__replay{
  position:absolute;right:12px;bottom:calc(var(--fv-cap-h) + 10px);z-index:9; /* SP: キャプション帯の上 */
  font-size:11px;color:var(--c-text-note);
  border:1px dashed var(--c-line-dark);background:rgba(255,255,255,.92);
  padding:5px 10px;cursor:pointer;
}
@media(min-width:768px){
  .fv2__replay{bottom:10px;} /* PC: スライダー下余白内 */
}
@media(prefers-reduced-motion:reduce){
  html:not(.wf-force-motion) .fv2{height:auto;}
  html:not(.wf-force-motion) .fv2__pin{position:relative;}
  html:not(.wf-force-motion) .fv2__photo,
  html:not(.wf-force-motion) .fv2__slide{transform:none;}
}

/* --- ブランドメッセージ（第1セクション・カンプ design-home-section1.jpg 準拠 2026-07-15） ---
   カンプ実測（1687×1080px）:
     キャッチコピー左端 x52 = 3.08vw ≒ FVコピー線3.05vw（VW基準・グリッド外に配置）
     写真 x104〜708（幅604px）＝ コンテンツbox左端（(1687-1480)/2=103.5px）から
       12分割グリッドの1〜5カラム（105×5+20×4=605px）にほぼ一致
     リード文左端 x980 ＝ グリッド8カラム目開始（103.5+125×7=978.5px）に一致
     コピー下端559→写真上端635（間76px）／リード上端460 ≒ コピー上端382+78px
   → PC: 12カラムグリッド（ディレクター確定）で 左=写真(col1-5)・右=リード(col8-12)。
     キャッチコピー（ドック）はグリッドに属さずFVコピー線3.05vwへドック（下記機構）。
     ［I.D.メソッドとは］ボタンはカンプに無いため削除（テキストのみのセクション）。
     SP: 縦積み＝コピー→写真→リード。
   ドック機構（LA CASA型・変更なし）: キャッチコピーの本体はFVの固定レイヤー（.fv2__copy）。
   ここには不可視スペーサー #copy-dock（同一タイポグラフィ・visibility:hidden）で
   「着地枠」だけ確保し、JS dockStep が top=min(固定位置, ドック位置) で吸着させる。
   左X はJSがピン中に記憶した copyPin.left（=3.05vw）を使い続けるため、
   スペーサー自体はグリッド列内にあってよい（横位置はJSに影響しない） */
.brand-message{text-align:left;padding-bottom:0;} /* 下部パディングなし＝次セクションとの余白圧縮（ディレクター指示 2026-07-27） */
.brand-message__cols{display:block;} /* SP=縦積み。PCは下のMQで12カラムグリッド化 */
.brand-message__dock{
  visibility:hidden;margin:0 0 56px; /* 不可視スペーサー（場所の確保のみ。表示はJSに依らず常にFVコピー側） */
  font-size:clamp(28px,4.06vw,52px);font-weight:500;line-height:1.7;letter-spacing:.06em;color:#1a1a1a;
}
.brand-message__photo{margin:0;}
.brand-message__photo img{display:block;width:100%;height:auto;}
.brand-message__body{margin-top:48px;} /* SP: 写真→リードの間 */
.brand-message__body p{margin-bottom:2.2em;} /* 段落間の「間」（カンプ=3段落ブロック） */
.brand-message__body p:last-child{margin-bottom:0;}
@media(min-width:768px){
  .brand-message__cols{
    display:grid;grid-template-columns:repeat(12,1fr);gap:var(--grid-gap,20px); /* 12分割グリッド（ディレクター確定） */
    align-items:start;
  }
  .brand-message__left{grid-column:1/6;}  /* 写真=グリッド1〜5カラム（カンプ実測一致） */
  .brand-message__body{grid-column:8/13;margin-top:0;padding-top:78px;} /* リード=8〜12カラム・上端=コピー上端+78px（カンプ実測。推定含む） */
  .brand-message__dock{margin-bottom:72px;} /* カンプ実測: コピー下端→写真上端 76px ≒ 既存72pxを維持 */
}
@media(prefers-reduced-motion:reduce){
  html:not(.wf-force-motion) .brand-message__dock{display:none;} /* reduce時はドック演出なし＝空白を残さない */
}

/* --- デザイン／性能の入口（小さめ2枚） --- */
.entry-pair{display:grid;gap:16px;}
@media(min-width:768px){.entry-pair{grid-template-columns:repeat(2,1fr);}}
.entry-pair__item{border:1px solid var(--c-line);padding:24px 20px;text-align:center;}
.entry-pair__title{font-size:16px;margin-bottom:8px;}
.entry-pair__text{font-size:13px;color:var(--c-text-sub);margin-bottom:16px;}

/* --- I.D.メソッド ヒーローブロック（A6: カード型ではなく画像上テキスト・gap:0） ---
   1段目=I.D.メソッド幅いっぱい／2段目=LIFE ID・バイオの2カラム。画像同士は隙間なし。
   homeのフッター前メソッド3ボタンはこのブロックが兼ねる（homeのみ3ボタン削除） */
.method-hero{padding:0;}
.method-hero__item{position:relative;display:block;text-decoration:none;}
.method-hero__ph{min-height:300px;border:none;}
.method-hero__ph--half{min-height:230px;}
.method-hero__pair{display:grid;grid-template-columns:1fr;gap:0;}
.method-hero__text{
  position:absolute;left:20px;bottom:20px;z-index:2;
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;
}
.method-hero__title{font-size:19px;font-weight:500;letter-spacing:.08em;background:rgba(255,255,255,.85);padding:4px 12px;}
.method-hero__desc{font-size:12px;color:var(--c-text-sub);background:rgba(255,255,255,.85);padding:2px 12px;}
@media(min-width:768px){
  .method-hero__pair{grid-template-columns:1fr 1fr;}
  .method-hero__ph{min-height:440px;}
  .method-hero__ph--half{min-height:330px;}
  .method-hero__title{font-size:24px;}
}

/* --- 拠点情報 --- */
.office{border:1px solid var(--c-line);padding:16px;font-size:14px;}
.office+.office{margin-top:12px;}
.office__name{font-weight:500;}
.office-list{margin:var(--sp-3) 0;}
@media(min-width:768px){
  .office-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
  .office+.office{margin-top:0;}
}

/* --- ご相談への入口（3種） --- */
.cta-triple{display:grid;gap:16px;margin-top:var(--sp-3);}
@media(min-width:768px){.cta-triple{grid-template-columns:repeat(3,minmax(0,1fr));}}
/* 列内でボタンが収縮できるように（グリッド溢れ対策 2026-07-26） */
.cta-triple__item .btn{min-width:min(360px,100%);}
.cta-triple__item{border:1px solid var(--c-line);padding:24px 20px;text-align:center;background:var(--c-bg);}
.cta-triple__title{font-size:16px;margin-bottom:8px;}
.cta-triple__text{font-size:13px;color:var(--c-text-sub);margin-bottom:16px;}

/* --- 店舗・施設建築（biz）バナー --- */
.biz-banner{position:relative;}
.biz-banner__body{padding:72px 0;width:min(94vw,720px);margin:0 auto;text-align:center;}
.biz-banner__title{font-size:17px;margin-bottom:8px;}
.biz-banner__text{font-size:14px;color:var(--c-text-sub);margin-bottom:16px;}

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

/* --- モデルハウス（新設・全幅の自動横スクロールマーキー。neie.jpトップ型／ディレクター指示 2026-07-17） ---
   画面幅いっぱい（section__innerのmax-width外）で写真が横並び・等速で無限ループ。
   ホバーで減速（animation-duration切替）・reduced-motion時は静止。
   トラックは同一アイテム集合を2連結し translateX 0→-50% でシームレスループ（各アイテムに
   margin-rightを持たせ、-50%が正確に1セット分になるようにする＝継ぎ目のガタつきなし）。 */
.modelhouse{position:relative;padding:var(--sp-sec) 0;overflow:hidden;background-color:#f9f9f9;} /* [20261027c] 上下120＋背景＝WORKS帯と同じ #f9f9f9（ディレクター指示 2026-10-27） */
.modelhouse__head{max-width:var(--w-content);margin:0 auto var(--sp-4);padding:0 var(--pad-side,16px);text-align:center;}
.modelhouse__marquee{
  position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
/* 2026-07-18ディレクター指示: 画像3:2・サイズ1.75倍・スピード抑えめ
   （幅1.75倍でトラック長も約1.75倍になるため、体感速度=旧比約65%となるよう 40s→100s。
     ホバー減速は3倍の300s。数値は1箇所で調整可） */
/* 既定はCSSアニメ（JS無効時のフォールバック）。JS有効時は home-anim.js が animation:none にして
   rAFでtranslateXを連続積算駆動＝ホバー減速時も位置がジャンプしない（ディレクター指示 2026-07-27）。 */
.modelhouse__track{display:flex;width:max-content;animation:mh-scroll 100s linear infinite;will-change:transform;}
/* ※旧: hoverで animation-duration:300s に切替→位置ジャンプで別画像に見える不具合。撤去しJS速度変数へ移行。 */
/* 2連結トラックを 0→-50% で流す＝1セット分でシームレスループ（継ぎ目のガタつきなし） */
@keyframes mh-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.modelhouse__ph{aspect-ratio:3/2;height:auto;} /* 3:2固定（旧: 高さclamp指定） */
.modelhouse__cap{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:10px;padding:0 2px;}
.modelhouse__name{font-size:15px;font-weight:500;letter-spacing:.04em;}
.modelhouse__loc{font-size:11px;color:var(--c-text-sub);}
.modelhouse__foot{max-width:var(--w-content);margin:var(--sp-4) auto 0;padding:0 var(--pad-side,16px);text-align:center;}
@media(prefers-reduced-motion:reduce){
  html:not(.wf-force-motion) .modelhouse__track{animation:none;}
}

/* ==========================================================
   トップ方向修正（ディレクター指示 docs/16・2026-07-18）で新設・改修する
   セクション群のCSS。すべてグレースケール・装飾は構造検証に必要な最小限。
   ========================================================== */

/* --- 共通スクロールリビール（IntersectionObserver。JSが html に .wf-reveal を付与した
       ときだけ初期非表示になる＝JS無効／Figma静的版では常に表示。指示§2/§6の
       「opacity0→1＋translateY・時差リビール・reduced-motion対応」を実装） --- */
.wf-reveal .reveal{
  opacity:0;transform:translateY(40px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.wf-reveal .reveal.is-in{opacity:1;transform:none;}
@media(max-width:767px){
  .wf-reveal .reveal{transform:translateY(24px);} /* SP=控えめ（指示§2「SP=控えめアニメ」） */
}

/* --- 3 暮らしの断片（新規・§2。ブランドメッセージ直後）
       PC=散文的な非対称配置（均等3カラム・カード一覧は禁止＝指示§2）。
       配置イメージ: 左上=縦(朝の光)／中央=見出し／右上=横長(食卓)／
                     左下=本文／右下=縦(小さな居場所)／下部=横長(季節の気配)。
       SP=縦積み（見出し→本文→画像4点）。CTAなし。 --- */
.life-hints{padding:calc(var(--sp-sec) + var(--sp-sec-join-bottom)) var(--pad-side,16px) 0;} /* 余韻を受ける山場。padding-bottom=0（ディレクター指示 2026-07-27）
   [20261027c] 上＝160px（=120+40・前の brand-message が下0のため「白→白の連続」＝合計160に合わせた。旧180／WPは240）。
   ディレクター指示 2026-10-27「上240→160」 */
.life-hints__grid{position:relative;max-width:var(--w-content);margin:0 auto var(--sp-sec-join-bottom);} /* 下マージン=40px（SP24）[20261027c] ディレクター指示 2026-10-27「100→40」。次の WORKS 帯の上120と合わせて、ラベルまで160 */
.life-hints__head{
  /* ディレクター指示 2026-07-27: 32px・下マージン80px・中央・通常フロー（ステージ外）。 */
  font-size:32px;line-height:1.9;letter-spacing:.1em;font-weight:var(--fw-normal);
  max-width:var(--w-content);margin:0 auto 80px;text-align:center;
  position:relative;z-index:6;
}
.life-hints__body{color:var(--c-text-sub);position:relative;z-index:6;}
.life-hints__fig{margin:0;}
.life-hints__ph{width:100%;}
/* 縦書きキャプション（カンプ準拠 2026-07-27）: 各写真の脇に独立配置。writing-mode:vertical-rl。
   figure外の独立要素＝写真とは別のパララックス速度を与えられる（JS DRIFT配列参照）。 */
.life-hints__cap{
  margin:0;writing-mode:vertical-rl;
  font-size:clamp(15px,1.15vw,17px);letter-spacing:.16em;line-height:1.9;   /* 2026-10-03 ディレクター指示「15px程度以上に」（旧 clamp(12px,1.15vw,16px)） */
  color:#1a1a1a;white-space:nowrap; /* 文字色=#1a1a1a（ディレクター指示 2026-07-27） */
}
.life-hints__body p{color:#1a1a1a;font-size:18px;} /* 締め文=同色・18px（ディレクター指示 2026-07-27） */
/* 写真ごとの縦横比（カンプ「暮らしの断片.png」実測 2026-07-27。元JPEGは全て既にこの比＝全フレーム使用。
   webpも同比で生成済み＝object-fit:coverでの再クロップ0＝カンプのフレーミングをそのまま保持） */
.life-hints__fig--shoku  .life-hints__ph{aspect-ratio:3/2;}  /* 食卓 右上・横長（カンプ実測1.50） */
.life-hints__fig--asa    .life-hints__ph{aspect-ratio:4/5;}  /* 朝の光 左中・縦（カンプ実測0.80＝元IDW2604-3925-4全フレーム） */
.life-hints__fig--ibasho .life-hints__ph{aspect-ratio:3/2;}  /* 居場所 右下（カンプ実測1.50。※指摘1は492:435≒スクエア寄りだがカンプ実物は3:2＝要ディレクター確認） */
.life-hints__fig--kehai  .life-hints__ph{aspect-ratio:3/2;}  /* 気配 左下・横長（カンプ実測1.50） */

/* ===== 暮らしの断片レイアウト再設計 v4（2026-07-27 カンプ「暮らしの断片.png」忠実再現） =====
   参照カンプ: design_comp/暮らしの断片.png（3330×3844・透過）。stage比＝3330/3844。
   カンプ実測座標（canvas比の%。写真=left/top/width、比=クロップ w/h）:
     食卓 shoku  left50.7% top12.9% w36.0% 比624/430  右上・横長・最大（キャプション左外）
     朝の光 asa  left 7.4% top25.9% w24.8% 比430/556  左中・やや縦
     居場所 ibasho left64.0% top49.25% w28.4% 比492/435 右下・横
     気配 kehai  left13.9% top61.75% w35.9% 比622/425  左下中央寄り・横長
   キャプションは各写真の脇に縦書き独立配置（カンプの食卓例＝写真左外・下端側から立ち上がる）。
   写真x非重複: 交差しうる同列縦並びは (食卓×居場所=右列) (朝の光×気配=左列) のみ。
     静的縦ギャップ 右列≒14.8%(≒254px@1708) / 左列≒8.0%(≒137px) ＞ ドリフト相対振幅（同列同符号・小振幅）
     ⇒ 全進捗で 写真×写真 HIT=0（別列はx非重複で原理上交差なし。JS 101点サンプリングで再検証）。 */

/* --- SP（<768）: 縦積みの左右交互ずらし＋縦書きキャプションを写真脇（側方余白）に添える（はみ出し0）。
       視覚順=カンプの上→下（食卓→朝の光→居場所→気配）。DOM順=見出し→写真4→締め文のa11y維持。 --- */
@media(max-width:767px){
  .life-hints__grid{display:flex;flex-direction:column;}
  /* SPも32px/80px相当に統一（見出しはステージ外フロー）。
     ※狭幅では32px固定だと1行目「探すのは、家になる前の、」がはみ出すため clamp で縮小（実効24〜32px）＝要ディレクター確認 */
  .life-hints__head{width:100%;font-size:clamp(24px,6.6vw,32px);margin:0 auto 64px;z-index:6;text-align:center;}
  .life-hints__item{position:relative;z-index:2;}
  .life-hints__item--shoku {order:2;align-self:flex-end;  width:72vw;margin-top:24px;}
  /* [20261029a] 写真の上の間隔 朝の光56→124／居場所64→80／気配64→160／締め文72→160。縦書きキャプション（15px・1行）が写真より長く、
     視差で動いたときに次の写真・締め文に重なっていた（最大76px）。キャプションは1行のまま（ディレクター指示）、360〜430px（WP実画面）で実測。気配の上は約135pxで重なりが消え、160pxで360px幅でも29px空く（ディレクター指示で200→160） */
  .life-hints__item--asa   {order:3;align-self:flex-start;width:52vw;margin-top:124px;}
  .life-hints__item--ibasho{order:4;align-self:flex-end;  width:64vw;margin-top:80px;}
  .life-hints__item--kehai {order:5;align-self:flex-start;width:72vw;margin-top:160px;}
  .life-hints__body{order:6;align-self:center;width:100%;margin-top:160px;text-align:center;z-index:6;color:var(--c-text-sub);}
  .life-hints__cap{position:absolute;top:24%;font-size:15px;z-index:5;}   /* 2026-10-03: 13→15px（ディレクター指示） */
  /* 右寄せ写真(shoku,ibasho)＝左側の余白へ（写真左外） */
  .life-hints__item--shoku .life-hints__cap,
  .life-hints__item--ibasho .life-hints__cap{right:100%;margin-right:10px;}
  /* 左寄せ写真(asa,kehai)＝右側の余白へ（写真右外） */
  .life-hints__item--asa .life-hints__cap,
  .life-hints__item--kehai .life-hints__cap{left:100%;margin-left:10px;}
}

/* --- PC（≥768）: 絶対配置ステージ（aspect-ratioでカンプをそのままスケール再現）。
       .life-hints__item は display:contents で消し、figure/caption を stage直下に絶対配置
       ＝写真とキャプションに別々のパララックス速度を与えられる。 --- */
@media(min-width:768px){
  /* ===== ステージ見出し帯クロップ（ディレクター指示 2026-07-27・見出しフロー化に伴う再計算） =====
     見出しをステージ外の通常フローへ出したぶん、ステージ上端のカンプ見出し帯（≒上端11.8%）を差し引く。
     新座標 = (旧% − 11.8) / 0.882。left%・width%（横方向）は不変＝写真/キャプションの視覚配置はカンプから変えない。
     クロップ量11.8%は「フロー見出しブロック高さ≒32px×1.9×2行＋下80px≒202px」相当（=旧stage高の11.8%）。
     写真同士の相対px間隔は完全保存＝写真×写真 非重複（HIT=0）はクロップ後も不変。 */
  .life-hints__grid{position:relative;aspect-ratio:3330/3390;} /* 旧3330/3844 の高さを×0.882 */
  .life-hints__item{display:contents;}
  .life-hints__fig{position:absolute;margin:0;}
  .life-hints__cap{position:absolute;z-index:5;}
  .life-hints__fig .life-hints__ph{width:100%;height:auto;}
  /* 写真配置（left/width=不変・top=クロップ再計算） */
  .life-hints__fig--shoku {left:50.51%;width:35.92%;top:0.95%;z-index:2;}   /* (12.64−11.8)/0.882 */
  .life-hints__fig--asa   {left:7.69%; width:23.90%;top:16.05%;z-index:2;}  /* (25.96−11.8)/0.882 */
  .life-hints__fig--ibasho{left:64.14%;width:35.80%;top:40.77%;z-index:2;}  /* (47.76−11.8)/0.882 */
  .life-hints__fig--kehai {left:14.29%;width:35.92%;top:55.28%;z-index:2;}  /* (60.56−11.8)/0.882 */
  /* 縦書きキャプション配置（PL/PM適用値を視覚保存＝left不変・top/bottomのみ同式で再計算） */
  .life-hints__cap--shoku {left:45.8%;bottom:72.22%;}  /* bottom 63.7/0.882（left不変） */
  .life-hints__cap--asa   {left:27.5%;top:4.76%;}      /* (16−11.8)/0.882（PL/PM: top16%を視覚保存） */
  .life-hints__cap--ibasho{left:87%;top:38.21%;}       /* (45.5−11.8)/0.882（PL/PM: left87%保存） */
  .life-hints__cap--kehai {left:46.5%;top:41.04%;}     /* (48−11.8)/0.882（PL/PM: top48%を視覚保存） */
  /* 見出しはフロー化（上のベース規則）＝ここでの absolute 指定は撤去 */
  .life-hints__body{position:absolute;top:88.66%;left:0;right:0;margin:0;text-align:center;z-index:6;color:var(--c-text-sub);} /* (90−11.8)/0.882 */
}
/* 多層ドリフト（2026-07-19再設計: 各要素が別速度・方向混在でtranslateYし、
   静止時から近接する矩形が重なったり離れたりする）。--driftはJSがスクロール進捗から毎フレーム設定。
   リビール着地(is-in)後の transform を translateY(none)→var(--drift) に切替えて両立 */
.life-hints .reveal{will-change:transform,opacity;}
.wf-reveal .life-hints .reveal.is-in{transform:translateY(var(--drift,0px));}

/* --- 8 I.D.Worksの家づくり（全面改修・§4-6）
       見出し＋リード（中央・狭幅）→ 3章の縦にずれる交互配置（カードUI・個別リンク禁止）。 --- */
.housing-lead{max-width:720px;margin:0 auto var(--sp-6);text-align:center;}
.hz-chapters{max-width:var(--w-content);margin:0 auto;}
.hz-ch{display:block;}
.hz-ch + .hz-ch{margin-top:var(--sp-6);}
.hz-ch__num{
  display:block;font-size:13px;letter-spacing:.28em;color:var(--c-text-note);margin-bottom:10px;
}
.hz-ch__title{font-size:clamp(20px,3vw,28px);font-weight:500;line-height:1.5;letter-spacing:.06em;margin-bottom:16px;}
.hz-ch__text{color:var(--c-text-sub);}
.hz-ch__ph{width:100%;margin-top:20px;}
.hz-ch__ph--sm  {aspect-ratio:4/3;}
/* 02の画像＝幅は維持（grid-column 1/8＝7カラム855px）のまま高さだけ圧縮（ディレクター指示 2026-07-28 A-6）。
   4/3（=641px）は01（480×360）・03（855×481）に対して突出していたため、03と同じ 16/9 に揃えて
   「ワイド写真は16:9・アクセント写真(01)は4:3」の規則に統一。トリミングは .is-photo の object-fit:cover が担保。 */
.hz-ch__ph--big {aspect-ratio:16/9;}
.hz-ch__ph--wide{aspect-ratio:16/9;}
@media(min-width:768px){
  .hz-ch{grid-template-columns:repeat(12,1fr);gap:var(--grid-gap,20px);display:grid;align-items:center;}
  .hz-ch + .hz-ch{margin-top:var(--sp-7);} /* 章間は大きめの間（さざなみ） */
  .hz-ch__ph{margin-top:0;}
  /* 01 テキスト＋横長写真（テキスト左・写真右）。2026-08-21ディレクター指示で
     02・03と同じ写真幅（7カラム）に統一。旧: 写真4カラム(8/12)・4:3の「小写真」。 */
  .hz-ch--01 .hz-ch__body {grid-column:1/6;}
  .hz-ch--01 .hz-ch__ph   {grid-column:6/13;}
  /* 02 大写真＋テキスト（大写真左・テキスト右）＝縦位置を少し下げてずらす */
  .hz-ch--02 .hz-ch__ph   {grid-column:1/8; grid-row:1;}
  .hz-ch--02 .hz-ch__body {grid-column:9/13;grid-row:1;}
  .hz-ch--02{margin-top:calc(var(--sp-7) + 40px);}
  /* 03 テキスト＋横長写真（テキスト左・横長写真右） */
  .hz-ch--03 .hz-ch__body {grid-column:1/6;}
  .hz-ch--03 .hz-ch__ph   {grid-column:6/13;}
}
/* 章内のテキスト／写真を少しずらして時差リビール（指示§6「写真とテキストが少しずれて表示」） */
.wf-reveal .hz-ch__ph.reveal{transition-delay:.15s;}

/* --- 7 横スクロール断片「家づくりで、見過ごしたくないこと。」（§7）
       基本（SP／JS無効／reduced-motion）＝ネイティブ横スクロール＋スナップ＋インジケーター。
       PC拡張（JSが .is-pin 付与・非reduced時のみ）＝sticky pinで通常スクロールに連動して
       トラックが横流れ（スクロールジャックはしない）。末尾CTA1本→house.html。 --- */
.lp-frag{padding:var(--sp-sec) 0;}   /* [20261027c] 上120（直前の特徴節が下40＝合計160） */
@media(min-width:768px){ .lp-frag{padding-bottom:calc(var(--sp-sec) - 40px);} } /* 2026-10-03: カード下の --frag-pad(40px) ぶん差し引き＝カード→次セクションを他の節と同じ150pxに */
.lp-frag__head{max-width:var(--w-content);margin:0 auto;padding:0 var(--pad-side,16px);}
.lp-frag__head .section__title{margin-bottom:var(--home-rule-bottom);}
.lp-frag__stage{margin-top:var(--sp-4);}
.lp-frag__pin{}
.lp-frag__track{
  display:flex;gap:16px;list-style:none;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px var(--pad-side,16px) 12px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.lp-frag__track::-webkit-scrollbar{display:none;}
.lp-frag__item{
  flex:0 0 84vw;max-width:440px;scroll-snap-align:center;
  background:#faf9f6;border:1px solid var(--c-line); /* 背景=薄生成り・枠線薄（§7） */
  padding:36px 26px;display:flex;flex-direction:column;justify-content:flex-start;min-height:200px;
}
.lp-frag__num{font-size:12px;letter-spacing:.24em;color:var(--c-text-note);margin-bottom:14px;}
.lp-frag__title{font-size:clamp(18px,2vw,22px);line-height:1.55;letter-spacing:.04em;margin-bottom:12px;}
.lp-frag__sub{font-size:14px;color:var(--c-text-sub);line-height:1.85;}
.lp-frag__dots{display:flex;gap:8px;justify-content:center;margin-top:18px;}
.lp-frag__dot{width:8px;height:8px;border-radius:50%;background:var(--c-line);transition:background .3s ease,transform .3s ease;}
.lp-frag__dot.is-on{background:var(--c-text);transform:scale(1.25);}
.lp-frag__foot{max-width:var(--w-content);margin:var(--sp-5) auto 0;padding:0 var(--pad-side,16px);text-align:center;}
@media(min-width:768px){
  .lp-frag__item{flex-basis:clamp(320px,26vw,400px);max-width:none;}
  .lp-frag__dots{display:none;} /* PCはスワイプではなく横流れ＝ドット不要 */
}
/* PC pinモード（JS付与）: 通常スクロール連動でトラックが横へ流れる。
   ▼2026-07-27 余白詰め（ディレクター指示）: pin高を「全ビューポート(100svh-gnav)」から
   「カード高＋上下パディング」へ変更。実測でpinの縦中央余白が上下各190px（@vh900）＝過剰だったため。
   横スクロールのランウェイ extra()=trackScrollW−pinClientW はpin高に依存しない＝開始/終了位置は不変。
   stage高=pin高+extra も同量だけ縮み、lead→カード間・カード下端→次セクション間の縦余白が解消。 */
.lp-frag.is-pin .lp-frag__pin{
  /* 2026-07-29 item8（AE）: カードを常に「縮小ヘッダー下の残り高」の縦中央へ置く（＝横スクロールは
     カードが画面中央に来てから始まる）。--gnav-h は仕様上つねに非縮小高のため、lp-frag到達時の
     実ヘッダー（縮小・約半分）と食い違う→ ②JSが縮小ヘッダーの実測高を --frag-top に流し込む。
     カード高 > 残り高 の短ウィンドウでは pin高=カード高に切替えて上下クリップを防ぐ（--frag-card-h）。 */
  /* 2026-10-03 ディレクター指摘「768px以上でリード→カード、カード→次セクションの余白が広がりすぎ」:
     旧＝pin高を「画面の残り高さ全部」にしてカードを縦中央に置いていたため、画面が高いほど上下の余白が膨らんだ
     （実測 1440×900 で上95px／下200px、1080px高で上180px／下290px）。
     新＝pin高は「カード高＋上下 --frag-pad」に固定し、粘着位置（top）のほうを計算して
     固定中だけカードが画面の残り高さの縦中央に来るようにする＝流れの中の余白は常に一定。 */
  --frag-pad:40px;
  position:sticky;
  top:max(var(--frag-top, var(--gnav-h,56px)),
          calc(var(--frag-top, var(--gnav-h,56px)) + (100svh - var(--frag-top, var(--gnav-h,56px)) - var(--frag-card-h,0px) - 2 * var(--frag-pad)) / 2));
  height:calc(var(--frag-card-h,0px) + 2 * var(--frag-pad));
  padding:0;
  display:flex;align-items:center;overflow:hidden;
}
.lp-frag.is-pin .lp-frag__track{
  overflow:visible;flex-wrap:nowrap;scroll-snap-type:none;
  transform:translateX(var(--frag-x,0px));transition:none;padding-bottom:0;
}
/* トラック右端にカード0.5枚分の余白（2026-07-27 ディレクター指示）: 6枚目が右端に張り付いた瞬間に
   縦へ切り替わり読む時間がなかった問題の解消。末尾に0.5カード幅の空フレックスアイテムを足すことで
   track.scrollWidth が増え → JS extra()（=scrollWidth−pinClientW）とstage高が自動で再計算され、
   6枚目が右端に0.5枚分の余白を残して止まってから縦スクロールへ移行する。カード幅=clamp(360,30vw,440)の半分。 */
.lp-frag.is-pin .lp-frag__track::after{
  content:"";flex:0 0 clamp(180px,15vw,220px);align-self:stretch;
}
@media(prefers-reduced-motion:reduce){
  html:not(.wf-force-motion) .lp-frag.is-pin .lp-frag__pin{position:static;height:auto;}
  html:not(.wf-force-motion) .lp-frag.is-pin .lp-frag__track{transform:none;overflow-x:auto;flex-wrap:nowrap;}
}

/* --- 導線分岐画面（gate）: トップ直アクセス時の全画面・上下二分割レイヤー ---
   出典: WEB基本計画-260330-01.pdf p1「導線分岐画面」／docs/02_sitemap.md 全体構造（ディレクター確定 2026-07-15）
   ワイヤーでは動きの体感用に簡易JSデモを実装（グレースケール維持・実遷移なし） */
.gate{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;background:transparent;
  height:100vh;height:100svh;
}
.gate--hidden{display:none;}
/* 背景: 全画面1枚の画像（A2第1段階で現れ、第2段階で上へスライドアウト）
   素材=支給 splash-img03.jpg（中間画面カンプ design-FV-splash02.jpg 準拠・2026-07-15支給） */
.gate__bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  transition:transform .85s cubic-bezier(.65,0,.35,1);
}
.gate__bg img{width:100%;height:100%;object-fit:cover;display:block;}
.gate__panel{
  position:relative;z-index:1;flex:1 1 50%;width:100%;
  display:flex;align-items:center;justify-content:center;
  border:none;padding:0;background:none;cursor:pointer;
  font:inherit;color:inherit;overflow:hidden;
  transition:transform .8s ease,flex-basis .8s ease,flex-grow .8s ease;
}
.gate--biz .gate__panel--house{transform:translateY(-120%);flex:0 1 0%;} /* 店舗選択: 上段（住宅側）が上へスライドアウト */
.gate--biz .gate__panel--biz{flex-basis:100%;}                           /* → 非住宅画像のみが全画面に広がる */
.gate__photo{
  position:absolute;inset:0;width:100%;height:100%;overflow:hidden;
  transition:transform .7s cubic-bezier(.65,0,.35,1);
}
.gate__photo img{width:100%;height:100%;object-fit:cover;display:block;}
.gate__panel--biz .gate__photo{transition-delay:.08s;} /* 上下の写真退場に僅かな時差 */
.gate__label{transition:opacity .35s ease;}
/* --- A2 第1段階: 上下の各画像がそれぞれ自身の上端方向へスライドして消える
       （一枚岩で動かさない。各パネル内でクリップされて上へ抜ける）
       → 背景の全画面1枚画像＋ロゴだけが残る --- */
.gate--exit1 .gate__photo{transform:translateY(-103%);}
.gate--exit1 .gate__label{opacity:0;pointer-events:none;}
.gate--exit1 .gate__wfnote{opacity:0;transition:opacity .3s;}
/* --- A2 第2段階: 全画面1枚画像が上にスライドアウト → 住宅サイトFVが現れる。
       ロゴはJSがヘッダーロゴ位置へスライドさせて固定（シームレス接続） --- */
.gate--exit2{pointer-events:none;}
.gate--exit2 .gate__bg{transform:translateY(-103%);}
/* ラベル: splash01カンプ準拠＝白文字・背景ボックスなし（実測: 住宅 fs≒36px/1280・字間.2em、
   説明 fs≒12px、下にワイドシェブロン） */
.gate__label{
  position:relative;z-index:2;
  display:inline-flex;flex-direction:column;align-items:center;gap:14px;
  color:#fff;
}
.gate__name{font-size:24px;font-weight:500;letter-spacing:.2em;text-indent:.2em;}
.gate__desc{font-size:11px;letter-spacing:.1em;line-height:1.9;}
/* ワイドシェブロン（カンプの「∨」。擬似要素2本の斜線） */
.gate__arrow{position:relative;width:46px;height:13px;font-size:0;color:#fff;}
.gate__arrow::before,.gate__arrow::after{
  content:"";position:absolute;top:50%;width:26px;height:1.5px;background:currentColor;
}
.gate__arrow::before{left:0;transform-origin:left center;transform:rotate(26deg);}
.gate__arrow::after{right:0;transform-origin:right center;transform:rotate(-26deg);}
.gate__logo{
  /* X座標はヘッダーロゴと共通変数（global-nav.css :root の --gnav-logo-x）で同一化
     （ディレクター指示 2026-07-15 修正(1): 退場アニメはY方向のみ＝縦一直線に着地）。
     splash01カンプ実測: シンボル x52・上下中央（=ヘッダーと同サイズ・同X） */
  position:absolute;left:var(--gnav-logo-x,16px);top:50%;transform:translateY(-50%);
  z-index:5;display:block;line-height:0;
  color:#fff; /* ロゴ白（写真上・暗背景想定＝currentColorで制御） */
}
/* サイズもヘッダーシンボルと同一基準（--gnav-symbol-h: PC144px/SP48px＝カンプ実測比）
   → 着地時 scale≒1・X移動なしのシームレス接続 */
.gate__logo-svg{height:var(--gnav-symbol-h,48px);width:auto;display:block;}
/* ロゴタイプ（type-01.svg）: splash01カンプ準拠＝右側・上下中央・右端はヘッダーの
   ロゴタイプと同一（--gnav-type-right 実測: 1280pxで右端から45px・h38px）。
   退場時はシンボル同様、Y方向のみでヘッダーのロゴタイプ位置へ着地（JS）。
   SP（ヘッダーにロゴタイプ非表示）は着地先がないためフェードアウト */
.gate__type{
  /* --gnav-type-right-m = global-nav.js のヘッダー実測値（スクロールバー・ガター込みの
     厳密な右端一致用）。未計測時は静的値へフォールバック */
  position:absolute;right:var(--gnav-type-right-m,var(--gnav-type-right,16px));
  top:50%;transform:translateY(-50%);
  z-index:5;display:block;line-height:0;color:#fff;
}
.gate__type-svg{height:var(--gnav-type-h,24px);width:auto;display:block;fill:currentColor;}
.gate__biz-note{
  position:absolute;left:0;right:0;bottom:18%;z-index:6;text-align:center;display:none;
}
.gate--biz-done .gate__biz-note{display:block;}
.gate__biz-note span{
  display:inline-block;background:#2b2b2b;color:#fff;font-size:13px;
  padding:12px 20px;letter-spacing:.08em;
}
.gate__wfnote{position:absolute;left:8px;bottom:8px;right:8px;z-index:7;margin:0;}
body.is-gated{overflow:hidden;}
@media(min-width:768px){
  .gate__name{font-size:36px;} /* splash01カンプ実測（1280px基準） */
  .gate__desc{font-size:12px;}
  .gate__arrow{width:56px;height:15px;}
  .gate__arrow::before,.gate__arrow::after{width:31px;}
  /* .gate__logo の left 上書きは廃止（--gnav-logo-x でヘッダーと常時同一X） */
}

/* ===== ブロック2/3: figma-fidelity（旧home.html #833-1013） ===== */
/* --- 全体：和文=Noto Sans JP（単一ウェイト運用・太字を使わない） --- */
body{ font-family:var(--ff-jp); letter-spacing:var(--ls-body); }
h1,h2,h3,h4,p,a,li,span,figcaption{ font-family:inherit; }

/* --- FV大見出し：Figma＝Noto Sans JP 52px / weight400（bold廃止）/ ls 3.12px(≒.06em) --- */
.fv2__copy{ font-family:var(--ff-jp); font-weight:var(--fw-normal); letter-spacing:.06em; color:var(--c-text); }

/* --- セクション見出し（和文h2）：Figma 32px / weight400 / ls 1.68px / lh1.31 中央 --- */
.section__title{
  /* [20260821ae] 黒字見出しのウェイトを500へ統一（2026-08-21ディレクター指示）。
     home.html は design-system.css を読み込まない自己完結ページ（Figma正）なので、
     共有側の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);
}
@media(min-width:768px){ .section__title{ font-size:var(--fs-h2); } }

/* --- リード：Figma＝Dove Gray #666・15〜16px・行間ゆったり・中央 --- */
.section__lead{ color:var(--c-text-sub); font-size:var(--fs-body); line-height:var(--lh-body); }

/* --- カード：Figma＝タイトルは太字にせず400・写真4:3・タグは細枠 --- */
.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); }
.card__tag{ color:var(--c-text-label); border-color:var(--c-line); letter-spacing:var(--ls-1); }
.card__photo,.ph--card{ aspect-ratio:4/3; }

/* --- ブランドメッセージ本文：Figma＝Cod Gray・15px・行間2.05 --- */
.brand-message__body p{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--c-text); letter-spacing:var(--ls-body); }

/* --- ボタン：Figma＝白地・細枠 Silver#ccc・濃文字・min-width360・padding15/64 --- */
.btn{
  border-color: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); }
@media(min-width:768px){ .btn{ min-width:var(--btn-min-w); padding:var(--btn-pad-y) var(--btn-pad-x); } }

/* --- life-hints 見出し（散文の山場）：Noto・太字にしない --- */
.life-hints__head{ font-family:var(--ff-jp); font-weight:var(--fw-normal); }
.life-hints__body{ color:var(--c-text-sub); }

/* ============================================================
   トップ下部セクション：ディレクター完成カンプ 260727 準拠（2026-07-27）
   Design/Performance → タグライン② → 私たちについて → 拠点情報
   → 来店ご予約・ご相談 → フッター前CTA3連
   ============================================================ */

/* --- Design/Performance：カンプは英字大見出しのみ（和文小ラベルは非表示）。
       ボタンはflex列の align-items:stretch で全幅化していたのを是正＝統一ボタン仕様に統一。 --- */
.entry-pair-band .entry-pair__item .entry-pair__title[data-en]{ font-size:0!important; line-height:0!important; letter-spacing:0!important; }
.entry-pair-band .entry-pair__item .entry-pair__title[data-en]::before{ margin-bottom:14px!important; }
.entry-pair-band .entry-pair__item .btn{
  border:none; color:var(--c-text); background:#fff;
  display:inline-block; align-self:center; width:auto; min-width:min(360px,100%);
}
/* hover文字色バグ修正 2026-08-09: 上の(0,3,0)指定が共有 .btn:hover の色反転(0,2,0)に勝ち、
   四角形拡大で背景が濃色化しても文字が濃色のまま同化していた（home-proposalで同型バグ検出→是正の水平展開）。
   高詳細度で反転色を明示。reduced-motion時は拡大なし＝白地のままなので濃色を維持。 */
.entry-pair-band .entry-pair__item .btn:hover{ color:var(--btn-inv-fg,#fff); }
@media(prefers-reduced-motion:reduce){
  html:not(.wf-force-motion) .entry-pair-band .entry-pair__item .btn:hover{ color:var(--c-text); }
}

/* --- 私たちについて（白背景・中央・短罫線） --- */
.about-intro{ max-width:720px; margin:0 auto; text-align:center; }
.about-intro__title{ margin-bottom:0; }
.about-intro__title::after{ content:""; display:block; width:40px; height:1px; background:var(--c-line-dark,#999); margin:22px auto 0; }
.about-intro__lead{ margin:var(--home-rule-bottom) 0 0; }
.about-intro__btn{ margin-top:44px; display:flex; justify-content:center; }
@media(max-width:767px){ .about-intro__btn .btn{ width:100%; } }   /* [20261023b] SPは他のボタンと同じく横いっぱい */

/* --- 拠点情報（2カラム：写真＋名称＋TEL＋住所＋駐車場＋Googleマップ） --- */
.studios__grid{ display:grid; grid-template-columns:1fr; gap:48px; margin-top:var(--sp-5,64px); }
@media(min-width:768px){ .studios__grid{ grid-template-columns:1fr 1fr; gap:40px; } }
.studio__photo{ aspect-ratio:16/10; overflow:hidden; background:var(--c-ph); }
.studio__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.studio__name{ font-size:20px; font-weight:var(--fw-normal,400); letter-spacing:.06em; margin:24px 0 12px; }
.studio__tel{ font-size:19px; letter-spacing:.04em; margin-bottom:16px; }
.studio__tel a{ text-decoration:none; color:var(--c-text); }
.studio__addr{ font-size:14px; color:var(--c-text-sub); margin-bottom:6px; letter-spacing:.03em; }
.studio__park{ font-size:14px; color:var(--c-text-sub); margin-bottom:22px; letter-spacing:.03em; }
.studio__park a{ color:var(--c-text-sub); text-decoration:underline; text-underline-offset:3px; }
.studio__map{ aspect-ratio:16/9; background:var(--c-ph); overflow:hidden; }
.studio__map iframe{ width:100%; height:100%; border:0; display:block; }

/* --- 地域再生の取り組み（okiza・まるまつ食堂）[20261027p] ---
   拠点紹介の直後に置くため、細い枠でくくり、見出しを枠の上辺に載せて「拠点とは別の話」と区切る。
   バナー＝写真を暗くして中央に各施設のロゴ（白）。ホバーで写真が明るくなる＝押せることを示す。外部サイト・新しいタブ。 */
/* [20261027r] ディレクター選択＝文字a（英字は ABOUT US と同じ級数・字間／和文26px・500）＋罫線b（上下だけ・#ccc）。
   見出しは「英字が上・和文が線の上」の形のまま、線が和文の縦の真ん中を通るよう bottom で置く（--osp-ttl-half＝和文の行の高さの半分） */
.ourspace{ --osp-ttl-half:18px; }
.ourspace__frame{ position:relative; border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); padding:64px 0 48px; }
.ourspace__head{ position:absolute; bottom:calc(100% - var(--osp-ttl-half)); left:50%; transform:translateX(-50%); background:var(--c-bg); padding:0 24px; text-align:center; white-space:nowrap; font-weight:var(--fw-normal,400); }
.ourspace__en{ display:block; font-family:var(--ff-en); font-weight:500; font-size:var(--home-fs-label-en); letter-spacing:.555em; margin-right:-.555em; line-height:1.3; color:var(--home-accent); }
.ourspace__ttl{ display:block; font-size:26px; font-weight:500; letter-spacing:.1em; line-height:1.4; margin-top:10px; }
@media(max-width:767px){
  .ourspace{ --osp-ttl-half:15px; }
  .ourspace__en{ font-size:13px; letter-spacing:.3em; margin-right:-.3em; }
  .ourspace__ttl{ font-size:22px; }
}
.ourspace__lead{ text-align:center; font-size:15px; color:var(--c-text-sub); margin:8px 0 40px; }
.ourspace__grid{ display:grid; grid-template-columns:1fr; gap:32px; }
@media(min-width:768px){ .ourspace__grid{ grid-template-columns:1fr 1fr; gap:40px; } }
/* [20261028a] 上の拠点紹介（地図）との間を広げる（ディレクター指示）＝PC 112→160px／SP は +32px。注記「※外部サイトが新しいタブで開きます」は削除（ディレクター指示） */
.ourspace{ margin-block:48px; }   /* [20261028b] 下（来店予約の写真帯との間）も同じだけ広げる（ディレクター指示）＝PC 120→168px／SP 72→104px */
@media(max-width:767px){ .ourspace{ margin-block:32px; } }
.osp-bn{ display:block; color:var(--c-text); text-decoration:none; }
.osp-bn__photo{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--c-ph); }
.osp-bn__img{ width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.55); transition:filter .5s ease; }
.osp-bn:hover .osp-bn__img, .osp-bn:focus-visible .osp-bn__img{ filter:brightness(.85); }
/* ロゴは transform を使わずに中央へ（inset＋margin:auto）。link-anim.js がリンク内の全 img にホバー拡大（.la-zoom__img＝transform:scale）を
   自動で付けるため、transform で中央寄せすると拡大時に上書きされて右下へずれていく。ロゴは拡大させず、写真だけが寄る */
.osp-bn__logo{ position:absolute; inset:0; margin:auto; height:auto; pointer-events:none; }
.osp-bn .osp-bn__logo{ transform:none !important; }
.osp-bn__logo--okiza{ width:clamp(120px,16vw,220px); max-width:42%; }
/* まるまつ食堂のロゴは白地にグレーのJPG＝いったん「黒ロゴ／白地」に締めてから反転し、スクリーン合成で地を消して白いロゴだけを残す */
.osp-bn__logo--marumatsu{ width:clamp(130px,16vw,220px); filter:grayscale(1) brightness(.6) contrast(6) invert(1); mix-blend-mode:screen; }
.osp-bn__body{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding-top:20px; }
.osp-bn__name{ font-size:20px; letter-spacing:.06em; line-height:1.5; }
.osp-bn__text{ margin-top:6px; font-size:14px; line-height:1.8; color:var(--c-text-sub); letter-spacing:.03em; }
.osp-bn__ext{ flex:none; width:40px; height:40px; border:1px solid var(--c-line); border-radius:50%; display:grid; place-items:center; transition:background .3s,border-color .3s,color .3s; }
.osp-bn__ext svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.4; }
.osp-bn:hover .osp-bn__ext, .osp-bn:focus-visible .osp-bn__ext{ background:var(--c-btn); border-color:var(--c-btn); color:#fff; }

/* --- 来店ご予約・ご相談（全幅・写真背景・白文字・中央） --- */
.consult{
  position:relative; width:100%; padding:84px var(--pad-side,16px);   /* 2026-07-29 P14: 来店ご予約=カンプ(home-3)を正として圧縮。旧 --sp-6:150 → 84px（PC実測 869→738系） */
  background:#2c3327 url(../../img/bottom-consult-bg.webp?v=20260810d) center/cover no-repeat;
  color:#fff; text-align:center; overflow:hidden;
}
@media(max-width:767px){ .consult{ padding-block:56px; } }
.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; }
.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); }   /* 2026-08-20: 本文の行間1.9を継承して half-leading が16.8pxもあったため、他見出しと同じ行間に明示 */
/* 2026-08-20: 罫線付き見出しの余白を統一（旧 上22px）。罫線の幅56pxと白色はダーク地の変種として維持。 */
.consult__title::after{ content:""; display:block; width:56px; height:1px; background:rgba(255,255,255,.6); margin:var(--home-rule-top) auto 0; }
.consult__lead{ margin-top:var(--home-rule-bottom); 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; }

/* --- フッター前 CTA3連（写真背景・暗幕・白文字） --- */
.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:400px; } } /* 2026-07-28 B-2: カンプ home-4 実測=400px（旧360px→実レンダリング372px） */
.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=20260810d); } /* 20260807a: 文字焼き込みストック（"TITLE"/"YOUR PHOTO"・受入#3不適合）→撮影原本 IDW2604-3342（本社・光の差す机上）1200×900へ差替。★最終差替枠 */
.cta-photo--line{ background-image:url(../../img/bottom-cta-line.webp?v=20260810d); }
.cta-photo--event{ background-image:url(../../img/bottom-cta-event.webp?v=20260810d); }
.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登録特典枠＝CTAからは削除（2026-07-28 AC B-2 ディレクター指示。特典訴求は line.html 本体のみ） */
.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 ディレクター指示・全ボタン共通）
   ＝ assets/design-system.css §B-1 と同一内容（home.html は design-system.css を読まないため複製）。
   従来: .btn は inline-block＋line-height 2.05（body継承）で、Noto Sans JP のメトリクス
   （ascent1.160em/descent0.288em＝content-area 1.448em）に対する余剰リーディングが上下非対称に効き、
   さらに home では .btnroll（line-height1.6・vertical-align:top）が短い行ボックスを行頭へ貼るため
   文字が上寄りになっていた。→ flex（PCはinline-flex）＋align-items:center で行ボックスごと中央へ。
   ---------------------------------------------------------------------------- */
.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;} }

/* ============================================================================
   A-10. CTA系ボタンのアイコン（2026-07-28 ディレクター指示・カンプ home-3 / home-4 実測）
   ＝ assets/design-system.css §12-4 と同一内容（共通部品・home用複製）。
   線画 1.5px CSS（viewBox24 × stroke-width1.8 × 枠20px）／アイコン〜文字の間隔 11px／
   グレースケール厳守＝currentColor（文字色と同色）。
   ・封筒 16.0×13.0px ・書類+下矢印 16.0×20.0px ・スマートフォン 12.0×18.5px ・カレンダー ≒16×15px
   ・電話番号頭の受話器（塗り）は .consult__tel svg として実装済み（従来どおり）。
   ---------------------------------------------------------------------------- */
.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;}
.btn__ic--phone{width:22px;height:22px;stroke-width:1.65;}

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

/* --- こだわりカード：イラスト（正方形・白背景・枠線/影なし・カード上部・幅いっぱい）
       番号はイラスト箱の左下へオーバーレイ。見出しとの余白は詰め気味（ディレクター指示 2026-07-27）。 --- */
.lp-frag__illust{ position:relative; width:calc(100% + 52px); margin:-16px -26px 6px; }
.lp-frag__illust img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; }
.lp-frag__item .lp-frag__num{
  position:absolute; left:16px; bottom:10px; margin:0; z-index:2;
  font-size:clamp(30px,4.4vw,44px); line-height:1; letter-spacing:.06em; color:var(--c-text);
  text-shadow:0 0 6px #fff, 0 0 6px #fff, 0 0 10px #fff; /* 枠なしで線画に埋もれないための白ハロー */
}
.lp-frag__item .lp-frag__title{ margin-top:0; }

/* ===== ブロック3/3: figma-design-fix（旧home.html #1015-1566） ===== */

/* ===== FIGMA SKIN（見た目=Figma／動き=WF・ライブ） =====
   旧「FIGMA STATIC」のJS無効化オーバーライドは撤去。
   分岐画面(gate)・FVドローイング/スライダー・モデルハウスマーキー・
   こだわり横流れ・スクロールリビールはすべてWFのJSでライブ動作する。
   ここではFigmaの意匠（写真フィル・英字ラベル・カード意匠）だけを当てる。 */

/* モデルハウス item 基本幅（WF仕様。旧staticの340px固定を撤去） */
.modelhouse__item{flex:0 0 auto;width:min(85vw,clamp(490px,70vw,910px));margin-right:2px;display:block;text-decoration:none;color:inherit;} /* 要素間マージン 20px→2px（ディレクター指示 2026-07-28）。※JSのループ幅 half=track.scrollWidth/2 は margin込みで実測するためgap変更に自動追従＝継ぎ目は不変 */
/* モデルハウス キャプション帯（Figma＝マーキー下・左「Model House｜光風理」／右「山口市古熊」） */
.modelhouse__bar{max-width:var(--w-content);margin:16px auto 0;padding:0 var(--pad-side,16px);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;}
.modelhouse__bar-l{font-family:var(--ff-en);font-size:var(--fs-body-sm);letter-spacing:var(--ls-1);color:var(--c-text);}
.modelhouse__bar-r{font-size:var(--fs-note);color:var(--c-text-sub);letter-spacing:var(--ls-2);}

/* 実画像フィル */
.is-photo{overflow:hidden;background:#ececec;}
.is-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.card__photo.is-photo{aspect-ratio:4/3;}
.hz-ch__ph.is-photo{width:100%;}
.modelhouse__ph.is-photo{aspect-ratio:3/2;height:auto;}
.brand-message__photo img{aspect-ratio:3/2;object-fit:cover;}

/* セクションラベル＝Jost英字（中央）＋和文小ラベル＋短い罫線 */
.section__title{position:relative;}
.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--plain::after,
.hz-title::after{
  content:"";display:block;width:40px;height:1px;
  background:var(--c-line-hair);margin:16px auto 0;
}
.section__title--plain::after{display:none;}
.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;}

/* 家づくり章立て：Figma＝大きな細字Jostナンバー */
.hz-ch__num{font-family:var(--ff-en)!important;font-weight:var(--fw-thin)!important;
  font-size:clamp(44px,6vw,72px)!important;color:var(--c-line-soft)!important;
  line-height:1!important;letter-spacing:0!important;}

/* こだわり：見た目=Figmaカード（白地・薄枠・細字Jostナンバー・高さ300px＝Figma採用値）／
   動き=WF横流れ（PCはsticky pin横スクロール・SPは横スワイプ+ドット）。
   ※WFの.lp-frag__track/.lp-frag__item（横flex）はそのまま。ここでは意匠と高さのみ上書き。 */
.lp-frag__item{
  background:var(--c-bg);border:1px solid var(--c-line-soft);
  padding:48px 40px;min-height:300px;box-sizing:border-box;
  justify-content:flex-start;
}
.lp-frag__num{font-family:var(--ff-en);font-weight:var(--fw-thin);font-size:32px;
  color:var(--c-line-hair);letter-spacing:0;margin-bottom:20px;}
/* 段落ち対策（QA home-IDWorksの特徴04・2026-08-19）: 見出しが語の途中で切れる
   （SP390実測「間取りを、部屋の配置で終／わらせない。」）。
   短い見出しなので文節境界で改行させる＝`word-break:auto-phrase`。
   → 「間取りを、部屋の配置で／終わらせない。」。他の5枚も同時に語境界へ揃う
     （01「答えに／しない。」03「性能値で／決めない。」）。1行目の字数は12→11字で
     詰まり方はほぼ変わらない。※本文には auto-phrase を使わない（全行が縮むため）。
     ここは見出しかつ2行のみなので例外的に採用。 */
.lp-frag__title{font-size:20px;font-weight:var(--fw-normal);letter-spacing:.04em;margin-bottom:12px;line-height:1.6;word-break:auto-phrase;}
.lp-frag__sub{font-size:13px;color:var(--c-text-sub);line-height:1.9;}

/* 段落ち対策（基準＝docs/22 §9 R08・2026-08-20ディレクター確定）:
   **句読点・閉じ括弧・記号（＞など）を含めて最終行が3字以下＝NG／1字落ちは常にNG。**
   <br> で区切られた各セグメントの最終行も対象。

   採る手＝**本文側を <span class="nowrap"> で文節ごとに括る**（決定論的・全ブラウザ同一）。
   text-wrap-style:pretty は Chromium系と比較的新しいSafariでしか効かず、未対応環境では元の
   段落ちに戻る（2026-08-20実測：pretty無効化で .section__lead「…見えてきま／す。」・
   .event-card__title「…暑をさ／く」」が再発）。よって**基準の担保はpretty頼みにしない**。
   pretty の宣言自体は「効く環境ではより良く出る」ための上乗せとして残す。

   R08で対応した箇所（すべて nowrap で担保・2026-08-20）:
     .cta-photo__text 3本＝タブレットで文節の途中で折れていた（ディレクター指摘・
       「…もっ／とわかる」「…の情／報を、」「…いた／だくために」「…みてく／ださい。」）。
       文節ごとに nowrap で括り、改行位置を文節境界に固定（行数はPC/タブレット/SPとも不変）。
     .section__lead      「…見えてきま／す。」  → nowrap「見えてきます。」（7字送り）
     .event-card__title  「…暑をさ／く」」      → nowrap「「氷上に暑をさく」」（カルーセル複製3枚に反映）
     .card__text  「…詰まった住ま／い」（タブレット・カード幅227px）→ nowrap「住まい」
                  「…テラスのある平／屋」（SP・カード幅367px）      → nowrap「ある平屋」
                  「…磨き上げた／平家」（PC1280・カード幅388px）    → nowrap「磨き上げた平家」
     .lp-frag__sub 3件「…変えま／す。」「…考えま／す。」「…つくる／。」→ nowrap で文節送り
       （2026-08-19は「1280pxの狭い帯だけなので見送り」としたが、R08＝2字落ちのため対応へ変更。
        カード幅は clamp(360px,30vw,440px) 由来で296〜316pxのとき発生）
   **対応しないもの**:
     .life-hints__cap の句点1字落ち4件＝**縦書き**のキャプションでデザイン意図
       （2026-08-19ディレクター決定）。R08は横書きの段落ちを対象とし、ここは対象外とする。
     .news-list__item（768pxで4件「…お知らせタイト／ル】」）＝**ダミーテキスト**のため保留。
       お知らせ実データ投入時に再検査する。 */
/* [20261029b] SP（767px以下）では pretty を使わない＝iPhone の Safari は段落全体の行をそろえようとして全行が短くなり、文章が左に寄って見えるため（ディレクター選択＝案B）。 */
@media(min-width:768px){
.section__lead,.event-card__title{text-wrap-style:pretty;}
}
/* 段落ちの語だけを一体で送るためのユーティリティ。適用箇所は本文中の <span class="nowrap"> を参照。 */
.nowrap{white-space:nowrap;}
/* ============================================================================
   セクション見出しの主従反転（2026-08-20 ディレクター指示）
   ----------------------------------------------------------------------------
   指示: 「英字小見出しは interview.html のように赤字にしてフォントを揃える」
         「CASE STUDY=赤／施工事例=大きく黒字見出し」「OB Interview=赤／OBインタビュー=削除／
          住んでから、わかること。=黒字見出し」「model house=赤／モデルハウス=黒字見出し」
   現状: 英字32px黒が主役・和文13pxグレーが小ラベル＝遷移先ページと主従が逆だった。
   目標: 遷移先ページ（c1-theme.css の .c1-label__en ＋ .section__title）と同じ組み方へ。
         英字 = clamp(16px,1.5vw,20px) / Jost 500 / 字間.22em / 赤 #c0392b
         和文 = clamp(26px,2.8vw,40px) / 500 / 黒（--c-text）
   ※home.html は c1-theme.css を読み込まない（Figma正・c1展開の対象外）ため、
     同じ値をこのページ内で定義する。共有CSSは無改変＝?vバンプなし。
   ※例外: 写真の上に白文字で載る Design / Performance の帯は赤にしない
     （design-rules §10-3「写真の上に直接置く小級数テキストに赤は使わない」）。
     フォント・級数のみ他ラベルと揃える。
   ============================================================================ */
:root{
  /* 2026-08-20 ディレクター指示「赤英字をもう少し小さく」。
     基準＝遷移先ページの 英字20px ÷ 見出し40px = **0.50**。
     home の黒字和文見出しは SP28px／PC32px なので、同じ比率になる SP14px／PC16px とする。
     clampだと768〜1280pxで比率が0.44に落ちるため、**見出しと同じ768pxのブレークポイントで切替**
     （.section__title 自身も --fs-h2-sm → --fs-h2 の切替方式）。
     ウェイトは design-rules §10「太字（600以上）禁止・強調は500」により **500を維持**。 */
  --home-fs-label-en: 14px;
  --home-fs-h2:       clamp(26px, 2.8vw, 40px);   /* = c1-theme --c1-fs-h2 */
  --home-accent:      #c0392b;                    /* = c1-theme --c1-accent */
  /* 見出し下の罫線の位置。**調整はこの2行だけ**で全7箇所に効く（2026-08-21）。
     .23em ＝ 和文見出しのインク下端〜ボックス下端の実測値（canvas実測）。
     7.7px ＝ 本文のボックス上端〜インク上端の実測値。
     数値を小さくすると罫線が上へ／大きくすると下へ動く。
     2026-08-21 ディレクター「もう少し上に」→ 32px基準から **28px** へ（4px上へ）。 */
  --home-rule-top:    calc(28px - .23em);
  --home-rule-bottom: 28px;
}
@media(min-width:768px){
  :root{--home-fs-label-en:16px;}   /* 見出し32pxに対して0.50 */
}
/* home独自だった「見出し下の40px罫線」を外す（遷移先ページには無い装飾・2026-08-20ディレクター承認）。
   ※.section__title--plain::after は元から display:none／.hz-title は未使用セレクタ。 */
/* 黒字和文見出し（施工事例／モデルハウス／住んでから、わかること。）は
   **修正前の .section__title と完全に同じ設定**に統一する（2026-08-20ディレクター指示）。
   ＝共有CSS design-system.css の値: font-family:--ff-jp / font-weight:--fw-normal(400) /
     font-size: SP --fs-h2-sm・PC --fs-h2(32px) / line-height:--lh-h2 / letter-spacing:--ls-h2
   （20260820p で入れた clamp(26,2.8vw,40)・500・.04em は撤回）。
   data-en 付きは共有CSSが 13px グレーに固定しているため、同じ値で上書きする。 */
.section__title[data-en]{
  font-family:var(--ff-jp)!important;font-weight:500!important;   /* [20260821ae] 400→500 */
  font-size:var(--fs-h2-sm)!important;color:var(--c-text)!important;
  line-height:var(--lh-h2)!important;letter-spacing:var(--ls-h2)!important;
}
@media(min-width:768px){
  .section__title[data-en]{font-size:var(--fs-h2)!important;}
}
/* 黒字和文見出しと本文の間に罫線＋余白（2026-08-20ディレクター指示）。
   見出し下端 →24px→ 罫線（40×1px） →40px→ 本文 の順で余白を確保する。 */
/* 2026-08-20 ディレクター指示: 罫線は「見出しと本文のちょうど真ん中」。
   総間隔（従来 24+40=64px）を保ったまま **上下32pxずつ** に揃える。 */
/* 2026-08-20 ディレクター指摘「同じマージンでも罫線が少し下寄りに見える」への対応。
   原因＝上下に**行間の半分（half-leading）**という見えない余白が入るため。
     見出し（行間1.31）＝上側に 0.155em ぶん余分（PC32pxで4.96px／SP28pxで4.34px）
     本文（15px・行間1.95）＝下側に 7.13px ぶん余分
   → 2026-08-21 追加補正: canvas の actualBoundingBox でインク実測したところ、見出しの
     グリフ下端〜ボックス下端は **0.23em**（PC32pxで7.3px）で、行間から求めた0.155emでは
     不足していた（実測: 上34.3px / 下32.7px ＝ 1.6〜2.6px 下寄り）。
     上マージン＝calc(32px - .23em)／下マージン＝24px（本文側の内側余白7.7pxを差し引き）。 */
.section__title[data-en]::after,
.section__title--plain::after{
  content:"";display:block;width:40px;height:1px;
  background:var(--c-line-hair);margin:var(--home-rule-top) auto 0;
}
.section__title[data-en],
.section__title--plain{margin-bottom:var(--home-rule-bottom);}
/* 「私たちについて」＝.about-intro__title は margin-bottom:0 ＋ 次のリードの margin-top:40px で
   間隔を作っている。上のルールが効くと余白が二重（80px）になるため元の0を維持する。 */
.about-intro__title[data-en]{margin-bottom:0;}
.sec-label::after{display:none;}   /* 英字ラベル直下の罫線は出さない（罫線は見出しの下1本） */
/* 英字ラベル＝**c1-theme.css の .c1-label__en と同一設定**（2026-08-20ディレクター指示）。
   .c1-label__en の宣言:
     display:block; font-family:var(--ff-en); font-weight:500;
     font-size:var(--c1-fs-label-en)=clamp(16px,1.5vw,20px); letter-spacing:.22em;
     line-height:1.3; color:var(--c1-accent)=#c0392b;
     ＋ @media(max-width:767px){ letter-spacing:.2em }
   home.html は c1-theme.css を読み込まないため、同じ値をここで再現する。 */
.section__title[data-en]::before,
.sec-label .sec-label__en,
.split__label .split__label-en{
  display:block;font-family:var(--ff-en);font-weight:500;
  font-size:var(--home-fs-label-en);letter-spacing:.22em;line-height:1.3;
  color:var(--home-accent);
}
/* ラベル〜見出しの間隔＝.c1-label の margin-bottom と同値（PC18px／SP14px） */
.section__title[data-en]::before{margin-bottom:18px;}
@media(max-width:767px){
  .section__title[data-en]::before{margin-bottom:14px;}
  .split__label .split__label-jp{margin-top:14px;}
}
@media(max-width:767px){
  .section__title[data-en]::before,
  .sec-label .sec-label__en,
  .split__label .split__label-en{letter-spacing:.2em;}
}
/* 素の見出しは共有CSSの値（PC32px/SP28px・**500**・--ls-h2）のまま。
   ウェイトは 20260821ae で共有 .section__title を400→500へ統一した分が効く。 */

/* News / Event（.split__label）＝英字は赤の小ラベル、和文を黒の見出しへ。
   ※元定義（.split__label-en / -jp）はこのブロックより後ろにあるため詳細度を1段上げる。 */

/* 「お知らせ」「見学会・イベント」＝他の黒字和文見出しと**完全に同じ設定**にする
   （2026-08-20ディレクター指示。罫線・マージンは変更しない）。
   ＝共有CSS .section__title と同値: --ff-jp / --fw-normal(400) /
     SP --fs-h2-sm(28px)・PC --fs-h2(32px) / --lh-h2 / --ls-h2 / --c-text
   ※margin-top:18px（英字ラベルとの間隔）は .c1-label と同値のため維持。 */
.split__label .split__label-jp{
  font-family:var(--ff-jp);font-weight:500;   /* [20260821ae] 400→500 */
  font-size:var(--fs-h2-sm);color:var(--c-text);
  line-height:var(--lh-h2);letter-spacing:var(--ls-h2);
  margin-top:18px;
}
@media(min-width:768px){
  .split__label .split__label-jp{font-size:var(--fs-h2);}
}
/* Design / Performance の帯＝写真上の白文字なので赤にしない（級数・字間のみ統一） */
.entry-pair-band .entry-pair__item .entry-pair__title[data-en]::before{
  font-size:var(--home-fs-label-en)!important;letter-spacing:.22em!important;font-weight:500!important;
}
.lp-frag__head{text-align:center;}
/* QA home-IDWorksの特徴03 の <br> 移動（本文側で対応）に伴う副作用の解消（2026-08-19）。
   1文目が独立した結果、SP390で「…ことばかりで／す。」と2字落ちが出た（移動前は2行目が
   「す。それでも私たちは、」11字で問題なし）。最終行だけを調整する text-wrap-style:pretty で
   「…ことばかり／です。」へ。他行の詰まり方は変わらない。 */
.lp-frag__lead{color:var(--c-text-sub);font-size:var(--fs-body);line-height:var(--lh-body);text-align:center;margin-bottom:8px;}
/* [20261029b] SP（767px以下）では pretty を使わない＝iPhone の Safari は段落全体の行をそろえようとして全行が短くなり、文章が左に寄って見えるため（ディレクター選択＝案B）。 */
@media(min-width:768px){ .lp-frag__lead{text-wrap-style:pretty;} }
@media(min-width:768px){ .lp-frag__item{flex-basis:clamp(360px,30vw,440px);} }

/* デザイン/性能：Figma＝全幅（ビューポート端）写真＋暗幕オーバーレイ＋白文字（中央）＋EN */
.entry-pair-band{width:100%;}
.entry-pair{gap:1px!important;}
.entry-pair__item{position:relative;border:none!important;padding:88px 24px!important;
  text-align:center;color:#fff;overflow:hidden;min-height:280px;
  display:flex;flex-direction:column;justify-content:center;}
.entry-pair__item::before{content:"";position:absolute;inset:0;z-index:0;
  background:var(--bgimg) center/cover no-repeat;}
.entry-pair__item::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(26,26,26,.5);}
.entry-pair__item>*{position:relative;z-index:2;}
.entry-pair__item:nth-child(1){--bgimg:url(../../img/design.webp?v=20260810d);} /* 20260807a: Figma書き出しダミー(405×550)→撮影原本 IDW2604-3632-2（モデルハウス光風理）1920×1080。design.html ヒーローと同カット＝入口帯と遷移先の一致。★クライアント支給後の最終差替枠 */
.entry-pair__item:nth-child(2){--bgimg:url(../../img/performance.webp?v=20260810d);} /* 20260807a: 同上。撮影原本 IDW2604-3748（光風理・窓と緑）1920×1080。performance.html ヒーローと同カット。★最終差替枠 */
.entry-pair__title{color:#fff!important;}
.entry-pair__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:#fff;letter-spacing:var(--ls-h2);line-height:1.2;margin-bottom:6px;}
.entry-pair__title[data-en]{font-size:var(--fs-caption)!important;font-weight:var(--fw-normal);letter-spacing:var(--ls-2);}
.entry-pair__text{color:rgba(255,255,255,.85)!important;}
.entry-pair__item .btn{border:none;color:var(--c-text);background:#fff;}

/* --- Housing帯（2026-07-29 P26-AE）: house.htmlヒーロー画像を流用した全幅1カラム帯。
       Design/Performance帯と2pxで一体化（下層ヒーロー確定形 DS8-b と同調＝白文字＋暗幕） --- */
.housing-band{position:relative;width:100%;overflow:hidden;color:#fff;text-align:center;
  padding:var(--sp-6) 24px;min-height:340px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  background:#2a2a2a url(../../img/hero-house.webp) center/cover no-repeat;}
.housing-band::after{content:"";position:absolute;inset:0;z-index:0;background:rgba(26,26,26,.5);}
.housing-band>*{position:relative;z-index:1;}
.housing-band__en{font-family:var(--ff-en);font-weight:var(--fw-normal);font-size:var(--fs-en-title);
  color:#fff;letter-spacing:var(--ls-h2);line-height:1.2;margin-bottom:14px;}
.housing-band__catch{font-family:var(--ff-jp);font-weight:var(--fw-normal);
  font-size:clamp(20px,2.6vw,28px);line-height:1.75;letter-spacing:var(--ls-2);margin-bottom:36px;}
.housing-band__btn{margin:0;}
.housing-band__btn .btn{border:none;color:var(--c-text);background:#fff;}
.entry-pair-band--joined{margin-top:2px;}

/* I.D.Worksの特徴：見出し＋短罫線＋ステートメント（あなたらしい生き方…）＋リード */
.housing-lead__title{font-family:var(--ff-jp);font-weight:500;font-size:var(--fs-h2-sm);letter-spacing:var(--ls-h2);line-height:1.31;}
@media(min-width:768px){.housing-lead__title{font-size:var(--fs-h2);}}
/* 2026-08-20: 罫線付き見出しの余白を統一（旧 上20px/下28px）。 */
/* 次の .housing-lead__statement は他セクションの本文より行間が大きく、PCで見た目が2.9px下寄りに
   なるため、この箇所だけ下マージンを3px詰める（実測に基づく調整）。 */
/* 次の .housing-lead__statement は幅によって行間・級数が変わるため、下マージンを幅別に。
   実測: 内側余白 SP8.7px／広幅11.2px → 下マージン SP25px／1024px以上22px でインク中央になる。 */
.housing-lead__title::after{content:"";display:block;width:40px;height:1px;background:var(--c-line-hair);margin:var(--home-rule-top) auto calc(var(--home-rule-bottom) + 1px);}
@media(min-width:1024px){
  .housing-lead__title::after{margin-bottom:calc(var(--home-rule-bottom) - 2px);}
}
.housing-lead__statement{font-family:var(--ff-jp);font-weight:var(--fw-normal);font-size:clamp(18px,2.2vw,22px);line-height:1.9;letter-spacing:var(--ls-2);color:var(--c-text);margin-bottom:40px;}
.housing-lead__lead{color:var(--c-text-sub);font-size:var(--fs-body);line-height:var(--lh-body);}

/* News / Event ＝ 左英字ラベル＋右コンテンツの2カラム（Figma） */
.split{max-width:var(--w-content);margin:0 auto;padding:0 var(--pad-side,16px);}
.split__grid{display:block;}
/* 2026-08-21 ディレクター指示: タブレットで「お知らせ」「見学会・イベント」が見にくいため、
   **SPと同じ縦並び（見出し→本文→コンテンツ）をタブレット帯（〜1199px）まで拡張**する。
   2カラム（左300px＋gap64px＋右）は **1200px以上のみ**。
   ・768pxでの右カラムが312pxしか取れず詳細行が崩れる問題（20260819の288px下限対応）の根本解決。
   ・「見学会・イベント」の**横スクロールは維持**（.event-scroller 側の実装は無変更）。 */
@media(min-width:1200px){ .split__grid{display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:start;} }
.split__label{margin-bottom:28px;}
/* [20261027c] EVENT：右カラム（.event-scroller）をウィンドウ右端いっぱいまで使う（ディレクター指示 2026-10-27・PC 1200px以上の2カラム時）。
   左ラベルは従来のコンテンツ左端のまま。実装＝このセクションだけ section 右 padding と split の右 padding を0にし、
   左は「従来の左位置（section padding 3vw ＋ 中央寄せの余白 ＋ split padding 3vw）」を padding-left で再現。
   100vw は使わない（スクロールバー幅ぶんのはみ出しを避ける）＝幅は section の実幅(=clientWidth)のまま。
   カード列は内部スクロール（.event-cards）なので横スクロールは出ない。NEWS の .split は不変。 */
@media(min-width:1200px){
  .section--bleed-r{padding-right:0;}
  .section--bleed-r .split{
    max-width:none;margin:0;padding-right:0;
    padding-left:calc(max(0px, (100% - 3vw - var(--w-content)) / 2) + 3vw);
  }
}
.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：News/Event の「一覧へ」リンク直下にあった装飾罫線（64×1px）を削除。
   ※セクション区切りの構造罫線（.news-list__item の border-bottom 等）は対象外＝維持。
   ※「一覧へ」リンク右側の横棒（.split__more::after 32×1px）はボタン意匠の一部＝維持。 */
.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] ここにあった7行は**共通CSS design-system.css の `.news-list` ブロックと一字一句同じ重複**だった。
   共通側を「SP＝日付／カテゴリ縦積み＋タイトル2カラム」へ作り替えたので、**このページ固有の上書きは持たない**
   （重複を残すと共通より後に読まれて旧レイアウトに戻る）。値の正は design-system.css 側の同名ブロック。
   ※お知らせ欄の**幅**は `.split__grid` の右カラムが決めるため、`.news-list` に max-width は置かない。 */

/* Event カード（右・3列） */
.event-cards{display:grid;grid-template-columns:1fr;gap:24px;}
@media(min-width:768px){ .event-cards{grid-template-columns:repeat(3,1fr);} }

/* QA home-event01（2026-08-19）: タブレット768pxで見学会イベント詳細の改行が読みづらい。
   原因＝カード幅はテキストではなく**見せ枚数の式**で決まる。この欄は .split__grid
   （左300px＋gap64px＋右）の2カラムのため、768pxでは右カラムが312pxしか取れない。
   home-anim.css の「2.5枚見せ」= flex:0 0 calc((100% - 2*24px)/2.5 - 8px) を312pxへ適用すると
   カードが138px幅に潰れ、「日 程：常設公開中／（事前予約／制）」「時 間：／10:00~17:00」
   「性能向上リノベ済／中古住宅「氷上に暑／をさく」」のように崩れていた（実測）。
   → 768〜1199pxの帯だけ、2.5枚見せの式に **下限288px** を与える（max()）。
     横スクロールのコンテナなので、下限に張り付いた幅ではカードがコンテナからはみ出すが、
     それは既定の挙動（はみ出し＝送りボタンで見る）。
     288pxの根拠＝詳細行で最長の「日 程：2026年9月8日（火）までの公開」（dt 4.2em＋dd 19字）が
     1行に収まる幅。240pxでは「…までの公／開」と1字落ちが残った（実測）。
     実測: 768px→138px から 288px へ／1024px→214px から 288px へ。
   ※ **1200px以上は一切変更しない**（既定式の値278pxで詳細行が1行に収まることを1280pxで実測確認）。
     「2.5枚見せ・右端はみ出し」はディレクター指示（2026-07-27）のため、PCの見え方は完全に不変。
     SP（767px以下）も既定の 78vw のまま。
   ※ home-anim.css は本 style ブロックより後に読み込まれる（1353行目）ため、同詳細度では後勝ちされる。
     .event-scroller を足して詳細度を 0,3,0 に上げて確実に上書きする。 */
/* 2026-08-21 追記: 上限を1199px→**1279px**へ。2カラム化の境界（ちょうど1200px）では
   右カラム692px→カード250pxとなり「…までの公／開」の1字落ちが再発していた（既存の境界バグ）。
   1280px以上は既定式の278pxで1行に収まることを実測済みのため**PCの見え方は不変**。 */
@media(min-width:768px) and (max-width:1279px){
  .event-scroller .event-cards>.event-card,
  .event-scroller .event-cards>.event-more{flex:0 0 max(288px, calc((100% - 2*24px)/2.5 - 8px));}
}
.event-card{text-decoration:none;color:var(--c-text);display:block;}
.event-card__photo{aspect-ratio:4/3;overflow:hidden;background:#ececec;margin-bottom:14px;}
.event-card__photo img{width:100%;height:100%;object-fit:cover;display:block;}
.event-card__tag{display:inline-block;border:1px solid var(--c-line);color:var(--c-text-label);font-size:var(--fs-note);padding:2px 10px;margin-bottom:12px;}
/* 20260810k 終了ラベル（開催予定が3件に満たないとき終了済みを併載する枠）。
   accentの赤は「罫線・文字色のみ・画面あたり1点」の原則があるためここでは使わず、
   event.html の status-badge--closed と同じ無彩色の弱いトーンで揃える。 */
.event-card__tag--closed{border-color:var(--c-line-dark);color:var(--c-text-sub);}
.event-card__title{font-size:var(--fs-body);font-weight:var(--fw-normal);line-height:1.6;margin-bottom:14px;}
.event-card__row{display:flex;font-size:var(--fs-caption);color:var(--c-text-sub);line-height:1.95;margin:0;}
.event-card__row dt{width:4.2em;letter-spacing:.35em;flex:none;}
.event-card__row dd{flex:1;margin:0;}

/* in design your identity タグライン帯（全幅写真・白極細英字はFigma書き出しに内包） */
.tagline-band{position:relative;width:100%;height:clamp(220px,29vw,500px);overflow:hidden;
  background:#333 center/cover no-repeat;}
.tagline-band--1{background-image:url(../../img/tagline-01.webp?v=20260810d);} /* 正式支給版（文字なし・IDW2604-5155-2・2400×900）2026-07-27 */
/* 帯#2（刷新 2026-07-27）: 背景画像なし＝白背景＋グレータグライン。高さは共通(.tagline-band)のまま。 */
.tagline-band--2{background-image:none;background:#fff;}
.tagline-band__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.tagline-band--2 .tagline-band__chars{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0;
  text-align:center;white-space:nowrap;
  font-family:var(--ff-en);font-weight:var(--fw-thin,200);text-transform:lowercase;
  letter-spacing:.3em;font-size:clamp(15px,2.4vw,36px);color:var(--c-text-sub);
  /* 2026-07-28 A-7（文字サイズ・PL/PM確定）: ディレクター指示「最大36px程度になるように調整」＝拡大の意図
     （旧上限26px→36px。2.4vw＝1500px幅で36px到達・1280px幅で約30.7px。
      開始遅延（IO 0.50vh）と合わせ「気づかないまま表示済み」の解消を狙う変更）。 */
}
.tagline-band--2 .tagline-band__char{display:inline-block;white-space:pre;}

/* ===== SP調整（2026-07-19 ディレクター指示） ===== */
/* 改行制御ユーティリティ：PCは非表示・SPのみ改行（中途半端な折返しの位置を明示制御） */
.br-sp{display:none;}
/* [20261029b] PCだけの改行（design-system.css §12 と同じ・home は design-system.css を読まないため複製） */
@media(max-width:767px){ .br-pc{display:none;} }
/* [20260821cb] .br-tb ＝ **スマホとタブレットで改行／PCでは非表示**。
   .br-sp（767px以下）では届かない範囲用。2カラムになる .entry-pair は
   768px以上でも1枚が半分の幅しかないため、タブレット帯でも語中改行が起きていた。
   上限を 1023px にしたのは実測から:
     .entry-pair__text の1行に必要な幅 ＝ ②約415px／③約362px
     カラムの内寸 ＝ (100vw − 1px) ÷ 2 − 左右パディング48px
     → ②が1行に収まるのは約929px以上、③は約821px以上。
     タブレット横（1024px）では両方とも自然に1行へ収まるので、そこを境にする。 */
.br-tb{display:none;}
@media(max-width:1023px){
  .br-tb{display:inline;}
}
@media(max-width:767px){
  .br-sp{display:inline;}
  /* IDWの特徴（章立て01/02/03）＝SPは必ず「テキスト先・画像後」（DOM順に依存せず統一） */
  .hz-ch{display:flex;flex-direction:column;}
  .hz-ch__body{order:0;}
  .hz-ch__ph{order:1;}
  /* 各セクションのリード文＝SPは左揃え（中央揃えの中途半端な改行を回避） */
  .section__lead,.split__lead,.housing-lead__lead,.lp-frag__lead{text-align:left;}
}
/* 共有global-nav.css（WF兼用）のフッター太字をデザイン方針（太字禁止）に合わせ上書き */
.gfoot__head{font-weight:400;letter-spacing:.16em;}
/* リードコピー＝ボックスmax-width720px・テキスト左揃え・ボックス左右中央（ディレクター指示 2026-07-20・全ページ共通）
   2026-07-27追記: 720px未満の文字量ではボックス幅を文字に追従させ、テキスト自体が中央に寄る（width:fit-content） */
.section__lead,.split__lead,.housing-lead__lead,.lp-frag__lead{
  width:fit-content;max-width:720px;margin-left:auto;margin-right:auto;text-align:left;
}
/* 2026-08-21 ディレクター指示: 「見学会・イベント」の本文はレスポンシブで**左寄せ**に。
   20260821c で縦並びにした帯（〜1199px）では列幅が676〜1055pxになり、上の
   width:fit-content ＋ margin auto によって本文ボックスが列の中央（左に189〜379pxの余白）へ
   寄っていた。見出し（EVENT／見学会・イベント）は左端0pxなので不揃いに見える。
   → 縦並びの帯だけ、ボックスを列の左端に揃える（1200px以上の2カラムは従来どおり）。 */
@media(max-width:1199px){
  .split__label .split__lead{margin-left:0;margin-right:auto;}
}
/* タブレット帯（縦並びの帯）だけ、読点位置の <br> を無効化して「。」で改行させる。 */
@media(min-width:768px) and (max-width:1199px){
  .br-tb-off{display:none;}
}
/* 2026-08-21 ディレクター指示: 「私たちの、すこし面倒なこだわり」に罫線は不要（元に戻す）。
   20260820t で .section__title--plain::after に罫線を復活させた際、このセクションにも
   付いてしまっていた。見出し下の余白もこのセクション固有の元値24pxへ戻す。
   ※「住んでから、わかること。」も --plain だが、そちらは罫線ありのまま（指示どおり）。 */
.lp-frag__head .section__title::after{display:none;}
.lp-frag__head .section__title{margin-bottom:24px;}

/* ============================================================================
   ボタン ホバーアニメーション 新仕様（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);}

/* ③ 四角形拡大（2026-07-29 P26-AE ディレクター指示：円→四角形へ変更・design-system.css と同仕様） */
.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);}   /* ② 文字色反転 */
  .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);}
.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・design-system.css §P07 と同一内容＝home用複製）。
   現行60.7px→45px。min-height:45px＋padding-block圧縮（flex中央でink天地センター維持）。
   .btn--small は対象外。詳細度0,2,0でhomeインラインの単一クラス指定に勝つ。 */
.btn:not(.btn--small){
  min-height:45px;
  padding-block:calc(7.15px + var(--btn-optical,.65px)) calc(7.15px - var(--btn-optical,.65px));
}


/* [20261030e] トップの施工事例カードは説明文を投稿（home_lead）から出すため、nowrap の手当てができない＝最終行の1〜2字落ちを pretty で防ぐ（R08） */
.card-grid--4col .card__text{ text-wrap-style:pretty; }