/* works詳細「浅い版」専用（2026-08-10・gen_works_detail.py が生成。手編集せずスクリプトを直すこと）
   深い版 works-detail.html の .gallery／.data-table をそのまま継承。
   ヒーローは深い版 works-detail.html と**同一の統一FVブロック**（§FV統一・20260826b）＝
   design-rules §10-4「全画面B型（事例強調ページ）」。共有CSSは無改変・本ブロック内で完結。
   ========================================================== */
/* ============================================================
   §FV統一（20260826b・ディレクター指示 2026-08-26）
     深い版・浅い版249ページで**同一のCSSテキスト**を使う。ページごとに違うのは
     .works-fv__title の font-size（級数3段階＝style_audit の ALLOWLIST 登録済み）だけ。
     ① グラデーションなし／背景なしの黒文字 ② タイトルは写真下端に重ねる
     ③ **上端基準**（旧＝overlay を bottom:0 に置く下端基準）。
        ボックスの margin-top で「タイトル1行目の上30%だけ」を写真に重ねる
        （.30 × line-height 1.18 = .354em。em はボックス＝タイトルの級数に解決するので、
          級数がどの段でも“1行目の30%”が保たれ、CSSの記述は全ページ同一になる）。
        **2行になっても上端は動かず**、段は下（余白側）へ伸びる。
        旧・下端基準では2行タイトルが写真側へせり上がり、実測で 63.7%（n001・1280px）が
        写真に重なっていた＝写真上の黒文字が読めなくなる問題の直接の原因。
     ④ 並びは WORKSラベル → タイトル（大） → キャッチ → （直下の独立節）TAGS
   ============================================================ */
.works-fv{
  /* 画像の見せ高＝design-rules §10-4「全画面B型」。gnav(約208px)ぶんを引いて初画面に収める */
  --fvb-h:min(calc(100svh - 208px),760px);
  --fvb-labelh:20px;     /* WORKSラベルの行ボックス高 */
  --fvb-labelgap:10px;   /* ラベル下端 → タイトル上端 の間隔 */
  --fvb-amp:80px;        /* 画像パララックスの振幅＝同値だけ画像を上下に伸ばして地を出さない */
  position:relative;
}
.works-fv__media{position:relative;height:var(--fvb-h);overflow:hidden;background:var(--c-bg-sub);}
.works-fv__photo{
  position:absolute;left:0;top:calc(var(--fvb-amp) * -1);
  width:100%;height:calc(100% + var(--fvb-amp) * 2);
  object-fit:cover;display:block;
  transform:translate3d(0,var(--fv-img-y,0px),0);will-change:transform;
}
/* オーバーレイは**通常フロー**（旧: position:absolute;bottom:0）。ボックス側の負のマージンで
   写真に食い込ませ、タイトル以降は下方向へ伸びる＝写真側にせり上がらない。 */
.works-fv__overlay{
  position:relative;z-index:1;
  /* コンテンツ幅(1480px)の左端に合わせる。1480px未満は左右3%(--pad-side) */
  padding-left:max(var(--pad-side),calc((100% - var(--w-content)) / 2));
  padding-right:max(var(--pad-side),calc((100% - var(--w-content)) / 2));
  background:none;color:var(--c-text);display:block;
}
/* ★ font-size は**タイトルの級数**（L/M の2段階＝ページごとに違う唯一の値。style_audit の
   ALLOWLIST 登録済み）。この要素が em の基準になるので、下の margin-top の `-.354em` が
   「タイトル1行分の30%」に解決する。
   20260826c の要点＝引き上げ量を **ラベル1行(20px)＋間隔(10px)＋タイトル1行の30%** にまとめ、
   **ボックスごと**持ち上げる。20260826b は overlay を20pxだけ上げたうえで**タイトルにだけ**
   `-.354em` を掛けていたため、タイトルの行ボックスがラベルまで（L=26.9px>20px）せり上がり、
   実測でラベルとタイトルが **20px＝ラベルの高さ100%** 重なっていた（ディレクター指摘の不具合）。
   ラベルとタイトルが同じ量だけ上がる今の形なら、両者の間隔は常に --fvb-labelgap で不変。 */
.works-fv__box{
  /* WP実装注記（P4-2・wp-engineer）: design/pages 側はページごとに 56px/76px を直書き（gen_works_detail.py
     の fv_title_size()）。249件を1テンプレで再現するため、既定=M（56px・タイトル13字以上）とし、
     mb_strlen(post_title)<=12 のときだけ single-works.php が .works-fv--l を付与して 76px に切替える
     （fields.md「FVタイトルの文字サイズ2段階切替」P80確定・閾値12字）。数値は design版と同一、
     ページ内で複製されていた font-size 直書きを1箇所の修飾子に統合しただけで見た目の差分は無い。 */
  font-size:min(7vw,56px);
  margin-top:calc(-.354em - var(--fvb-labelh) - var(--fvb-labelgap));
  background:none;width:fit-content;max-width:min(760px,100%);padding:0 0 8px;display:block;
  transform:translate3d(0,var(--fv-box-y,0px),0);will-change:transform;
}
.works-fv--l .works-fv__box{font-size:min(9vw,76px);}
.works-fv__label{
  display:block;font-family:var(--ff-en);font-size:14px;font-weight:500;letter-spacing:.3em;
  line-height:var(--fvb-labelh);margin:0 0 var(--fvb-labelgap);
  color:var(--c1-accent);   /* 英字ラベル＝赤アクセント（design-rules §10-3） */
}
.works-fv__title{
  display:block;font-size:1em;font-weight:500;letter-spacing:.04em;
  line-height:1.18;margin:0;color:var(--c-text);
}
/* キャッチ＝タイトルの次の段落・タイトルと左揃え。級数と色は c1-theme の .section__lead と同値
   （L2' リード＝本文15pxよりやや大きい clamp(15,1.35vw,19) ／ グレー #666）＝新しい級数を作らない。 */
.works-fv__catch{
  font-size:var(--c1-fs-lead);font-weight:400;line-height:1.95;letter-spacing:var(--ls-1);
  color:var(--c-text-sub);margin:14px 0 0;max-width:var(--c1-measure);
}
@media(max-width:767px){
  .works-fv{--fvb-h:min(64vh,480px);--fvb-amp:0px;}
  .works-fv__box{padding:0 0 6px;max-width:100%;}
  .works-fv__label{font-size:12px;letter-spacing:.26em;}
  .works-fv__catch{margin-top:12px;}
}
/* 演出停止時（reduced-motion / ?motion=0 / SP）はJSが p=0 のまま＝transformは0px */
@media(prefers-reduced-motion:reduce){
  .works-fv__photo,.works-fv__box{transform:none;transition:none;}
}

/* 関連タグ（20260810o 新設・参照実装 works-detail.html と同仕様） */
.works-tags{padding:var(--sp-5) var(--pad-side);}   /* 56px。§10-5のトークンから選択 */
.works-tags .section__inner{max-width:var(--w-content);margin-inline:auto;}
.works-tags .c1-label{text-align:left;margin-bottom:16px;}
.works-tags__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;
}
.works-tags__list .card__tag{margin-bottom:0;padding:4px 12px;}
@media(max-width:767px){ .works-tags{padding:var(--sp-4) var(--pad-side);} }
/* 20261105zj：タグの下のサブメニュー（施工事例一覧｜オーナーインタビュー）を上へ（ディレクター「高さだけ上げたい」）。
   サブメニュー共通の上余白（clamp 24〜44px）を外し、タグとの間隔＝タグ欄の下余白（PC56px／SP40px）だけにする */
.works-tags + .hero-intro--nav-only .sub-nav{margin-top:0;}
/* 20261105zk【試作】サブメニューを TAGS と同じ高さの右側へ（ディレクター「TAGSと同じ高さにするのはどうかな」）。
   ディレクター「中心なのは変えずに」＝横位置はページ中央のまま、高さだけ TAGS の英字の行に揃える（PC）。
   SP＝幅が足りないためタグの下に中央（間隔40px） */
.works-tags__row{position:relative;}
.works-tags__row > .sub-nav{position:absolute;left:50%;top:-6px;transform:translateX(-50%);margin:0;}
@media(max-width:767px){
  .works-tags__row > .sub-nav{position:relative;left:auto;top:auto;transform:none;margin-top:var(--sp-4);}
}
/* 同（ディレクター「THIS HOUSE'S ID & DESIGN のブロックをずらした分上に」）：サブメニューの段が無くなった分、
   次のブロックを上へ＝タグ欄の下余白を 0 にし、最後の要素（PC＝タグ／SP＝サブメニュー）→見出しを
   従来の「サブメニュー→見出し」と同じ間隔（次のブロックの上余白のみ）にする */
.works-tags{padding-bottom:0;}
/* 同（ディレクター「この幅で揃えたところ見てみたい」＝オーナーインタビュー一覧のサブメニュー→見出しの間隔）。
   インタビュー一覧の実測＝PC 108px／SP 64px に、タグ欄の最後の要素→「THIS HOUSE'S ID & DESIGN」を揃える */
.works-tags + .section{padding-top:45px;}   /* PC＝サブメニュー（TAGS の行）→見出し を 108px に（サブメニュー下端〜タグ下端の差 約63px を引いた値）。「揃えたと思えない 幅が違う」で修正 */
@media(max-width:767px){ .works-tags + .section{padding-top:64px;} }
/* リード＝全ページ共通の「720px 左揃えボックス・ボックスは中央」ルール */
.works-lead{width:fit-content;max-width:720px;margin-inline:auto;}
.works-lead__p{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);text-align:left;}
.works-lead__p + .works-lead__p{margin-top:1.9em;}
/* WP実装注記（P4-2・wp-engineer）: id_story はACF wysiwygのため、CMS入力時は class="works-lead__p"
   の付かない素の <p> になる（編集者に手動クラス付与を求めない＝docs/22 §9 WP実装への申し送り）。
   design版と同一の見た目を保つため、無印 <p> にも同じ指定を当てる（値・見た目とも変更なし）。 */
.works-lead p{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);text-align:left;}
.works-lead p + p{margin-top:1.9em;}

/* 写真ギャラリー（C-1: 1カラム縦積み・大判→小組→大判＝design-rules §9-2）
   大判はコンテンツ幅いっぱいの「帯」＝16:7で切り取り（.c1-figure--full と同じ考え方）。
   小組は 720px カラムで**元の縦横比のまま**（縦位置写真を切らない）。 */
.gallery{max-width:var(--w-content);margin:0 auto;display:grid;grid-template-columns:1fr;gap:56px;}
.gallery__item{width:100%;max-width:720px;margin-inline:auto;}
.gallery__item--full{max-width:none;}
.gallery__img{width:100%;height:auto;display:block;}
.gallery__media{aspect-ratio:16/7;overflow:hidden;background:#ececec;}
.gallery__media img{width:100%;height:100%;object-fit:cover;display:block;}
/* キャプション（gallery.caption・移行249件は空運用＝任意）。定義元＝design/pages/works-detail.html
   （深い版）の同名クラスをそのまま採用（浅い版249ページには実例が無いため）。 */
.gallery__caption{font-size:var(--fs-caption);color:var(--c-text-sub);margin-top:12px;line-height:1.9;letter-spacing:var(--ls-1);}
@media(max-width:767px){
  .gallery{gap:40px;}
  .gallery__media{aspect-ratio:4/3;}
}

/* ============================================================================
   [20261015w] 写真ギャラリー＝Biz（theme/idworks-biz/assets/css/pages/works-detail.css）と同じ並び
   （ディレクター指示「施工事例詳細の写真の並びを Biz と同じに」）
   - 切り取らず縦横比のまま。横長どうし・縦長どうしの2枚組（並び・クラスは functions.php idworks_gallery_arrange()）
   - .is-solo＝組めずに余った1枚＝中央に半分の幅（引き伸ばしによる画質低下を避ける）
   - 改修前（.gallery-sec--before）は一回り狭い 1080px（Biz の .wd-photo--before と同じ）
   - SP（767px以下）の改修前（.gallery--swipe）は横スワイプ。次の写真を少し見せて「横に続く」ことを示す
   旧レイアウト（上の .gallery／.gallery__media＝1枚目16:7・以降720px縦積み）は n062・n161 の個別テンプレが使うため残す。
   ============================================================================ */
.gallery.gallery--natural{gap:var(--grid-gap,20px);align-items:start;}
.gallery--natural > .gallery__item{max-width:none;margin:0;}
.gallery--natural .gallery__caption{margin-top:8px;}
/* [20261030j] 組の高さをそろえるため、横長＝3:2・縦長＝2:3 に固定（はみ出す分は中央で切る）。2枚組写真など極端に横長（.is-wide）は元の比率のまま
   ディレクター「施工事例は横は横、縦は縦で固定してもいい」（n042 05-37 が 965×1600 で隣と高さがずれた） */
.gallery--natural > .is-landscape:not(.is-wide) .gallery__img{aspect-ratio:3/2;object-fit:cover;}
.gallery--natural > .is-portrait .gallery__img{aspect-ratio:2/3;object-fit:cover;}
@media(min-width:768px){
  .gallery.gallery--natural{grid-template-columns:1fr 1fr;}
  .gallery--natural > .gallery__item.is-solo{grid-column:1 / -1;justify-self:center;width:calc((100% - var(--grid-gap,20px)) / 2);}
}
.gallery-sec--before .gallery{max-width:1080px;}
@media(max-width:767px){
  .gallery.gallery--swipe{
    display:flex;align-items:flex-start;gap:12px;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .gallery.gallery--swipe::-webkit-scrollbar{display:none;}
  /* 写真の高さをそろえ、幅は縦横比なり（切り取らない）。横長と縦長が混ざっても下に空白を作らない。 */
  .gallery--swipe > .gallery__item{flex:0 0 auto;width:auto;scroll-snap-align:start;}
  .gallery--swipe .gallery__img{height:56vw;width:auto;max-width:none;}
}

/* データ表（深い版と同一） */
.data-table{max-width:640px;margin:0 auto;width:100%;border-collapse:collapse;font-size:var(--fs-body);}
.data-table th,.data-table td{
  border-bottom:1px solid var(--c-line);
  padding:14px 8px;text-align:left;vertical-align:top;line-height:1.9;
}
.data-table th{width:34%;font-weight:400;color:var(--c-text-sub);white-space:nowrap;}

/* ============================================================================
   新規事例用3ブロック（2026-10-14 ディレクター決定 docs/19 P137）
   ソース＝design/pages/works-detail-n001-blocks-proposal.html の採用案のみ移植
   ブロック3＝案A引用型／ブロック4＝案B クレジット型（顔写真は自動で円形）／ブロック6＝案A n161型
   ============================================================================ */
/* 3ブロック共通：白地（帯なし）。白地どうしが隣り合うときだけ、後ろ側の上余白を詰める（design-rules §10-5） */
.c1 #fv-fix-anchor + .wb-block,
.c1 .wb-block + .wb-block,
.c1 .wb-block + #data{padding-top:var(--sp-sec-sm);}

.wb-who{
  display:block;font-size:var(--fs-caption);letter-spacing:.18em;line-height:1.6;
  color:var(--c-text-note);margin-bottom:14px;
}
.wb-anslabel{
  display:block;font-size:var(--fs-caption);letter-spacing:.18em;line-height:1.6;
  color:var(--c-text-sub);margin-bottom:14px;
}
.wb-anslabel::before{
  content:"";display:inline-block;width:14px;height:1px;background:var(--c1-accent);
  vertical-align:middle;margin-right:10px;transform:translateY(-1px);
}
.wb-answer > p{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);}
.wb-answer > p + p{margin-top:var(--c1-para-gap);}

/* ブロック3「対話から、設計へ」 案A｜引用型 */
.wb3a{max-width:var(--c1-measure-narrow);margin:0 auto;}
.wb3a__pair + .wb3a__pair{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--c-line);}
.wb3a__words{font-size:var(--c1-fs-h3);line-height:1.9;letter-spacing:var(--ls-2);text-indent:-.5em;padding-left:.5em;}
.wb3a__ans{margin-top:var(--sp-4);}

/* ブロック4「チームの言葉」 案B｜クレジット型（最大3列・少人数は中央寄せ）。顔写真は円形に自動切り抜き */
.wb4b{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-5) var(--grid-gap);max-width:980px;margin:0 auto;}
.wb4b__m{flex:0 1 calc((100% - var(--grid-gap) * 2) / 3);min-width:0;border-top:1px solid var(--c-text);padding-top:var(--sp-3);}
.wb4b__head{display:flex;align-items:center;gap:14px;min-height:72px;margin-bottom:var(--sp-2);}
.wb4b__photo{width:72px;height:72px;flex-shrink:0;border-radius:50%;overflow:hidden;}
.wb4b__photo img{width:100%;height:100%;object-fit:cover;display:block;}
.wb4b__role{display:block;font-size:var(--fs-micro);letter-spacing:.18em;line-height:1.6;color:var(--c-text-note);}
.wb4b__name{display:block;font-size:var(--fs-body);line-height:1.6;letter-spacing:var(--ls-body);}
.wb4b__comment{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);}
@media(min-width:768px) and (max-width:1023px){
  .wb4b__m{flex-basis:calc((100% - var(--grid-gap)) / 2);}
}
@media(max-width:767px){
  .wb4b{gap:var(--sp-4);}
  .wb4b__m{flex-basis:100%;}
}

/* ブロック6「住んでみて」 案A｜n161型（works-detail-n161.css の .voice* と同値） */
.voice-list{max-width:var(--c1-measure-narrow);margin:0 auto;display:grid;gap:44px;}
.voice{border-left:3px solid var(--c-line-dark);padding:4px 0 4px 20px;}
.voice__quote{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);}
.voice__speaker{font-size:var(--fs-caption);font-weight:400;color:var(--c-text-sub);margin-top:12px;display:block;}
.voice-lead{max-width:var(--c1-measure-narrow);margin:0 auto 48px;text-align:center;}
.voice-interview{
  max-width:var(--c1-measure-narrow);margin:64px auto 0;border:1px solid var(--c-text);
  background:var(--c-bg);padding:24px 20px;text-align:center;
}
@media(max-width:767px){ .voice-lead{text-align:left;} }