/* works-detail.html のページ内 <style> 1ブロックを結合（design版の出現順を保持）
   2026-09-17 再生成: 旧スクリプトがHTMLコメント内の文字列をタグと誤認し、
   コメントの残骸をCSSへ混入させていたため作り直した。 */
/* 2026-08-09d: パンくずは共有 .bcrumb（biz-c1-dark.css §17）へ統合。
   級数の中間サイズ（12/14/22/28px）はトークン（--bz-fs-*）へ移譲。 */
/* 20260810c ディレクター指示: page-hero下端ボーダーとの間にマージン */
.wd-hero{padding-top:var(--sp-4);}
.wd-hero__meta{display:flex;gap:8px;align-items:center;justify-content:center;margin-bottom:var(--sp-3);flex-wrap:wrap;}
.wd-set{border-top:1px solid var(--c-line);padding:var(--sp-5) 0;}
.wd-set__num{letter-spacing:.24em;color:var(--c-accent);}
.wd-set__t{line-height:1.5;margin:8px 0 var(--sp-3);}
/* 20260810d QA対応: サイト全体の見出し中央揃え統一（20260809d）に合わせ、01〜＋の番号・見出しを中央へ */
.wd-set__num,.wd-set__t{text-align:center;}
.wd-gallery{display:grid;gap:var(--grid-gap);grid-template-columns:1fr;}
.related{display:grid;gap:var(--grid-gap);grid-template-columns:1fr;}
.related__card{text-decoration:none;}
.related__t{margin-top:10px;color:var(--c-text);}
@media(min-width:768px){ .wd-gallery{grid-template-columns:1fr 1fr;} .related{grid-template-columns:repeat(3,1fr);} }
/* 2026-09-30 縦横比保持レイアウト（全事例・single-works.php で付与）。
   並びとクラスは functions.php の idworks_biz_gallery_arrange() が決める：
     通常     = 横長どうし・縦長どうしの2枚組、切り取らず縦横比のまま
     .is-solo = 組めずに余った1枚＝横長・縦長とも中央に半分の幅で1枚（引き伸ばしによる画質低下を避ける）
   design版（biz-c1-dark.css §11）の「先頭・末尾を16:7大判に切り取る」は上司判断で不採用＝ここで打ち消す。
   §11 の :first-child/:last-child と biz-works-img.css の cover を上書きするため、詳細度を上げている */
.wd-gallery.wd-gallery--natural{align-items:start;}
.wd-gallery.wd-gallery--natural > .ph.ph--photo{aspect-ratio:auto;grid-column:auto;}
.wd-gallery.wd-gallery--natural > .ph.ph--photo > img{position:static;width:100%;height:auto;object-fit:initial;}
/* [20261102c] 住宅（20261030j）と同じく、組の高さをそろえるため横長＝3:2・縦長＝2:3 に固定（はみ出す分は中央で切る）。
   ディレクター指摘「縦幅揃っていない」（saito-clinic 01 が 1536×871 で隣の 3:2 とずれた） */
.wd-gallery.wd-gallery--natural > .ph.ph--photo.is-landscape > img{aspect-ratio:3/2;object-fit:cover;}
.wd-gallery.wd-gallery--natural > .ph.ph--photo.is-portrait > img{aspect-ratio:2/3;object-fit:cover;}
/* 2026-10-01 この事例のデータ（住宅 theme/idworks/assets/css/pages/works-detail.css の .data-table と同じ組み・biz の色トークン） */
.data-table{max-width:640px;margin-left:auto;margin-right:auto;width:100%;border-collapse:collapse;font-size:var(--bz-fs-l3);}  /* 2026-10-02 15px→L3（本文と同じ16px） */
.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;color:var(--c-text-sub);}
.data-table th{width:34%;font-weight:400;color:var(--c-text-note);white-space:nowrap;}
/* 2026-10-01 試験（みくりや）: 写真のキャプション＝旧サイトの写真見出し（【外観】【診療棟】等）。
   写真の下に小さく置く。縦横比保持レイアウトでは figure を縦積み（.ph の flex 中央寄せを解除）し、
   キャプションの背後に写真枠の地色が出ないよう地色も外す */
.wd-gallery.wd-gallery--natural > .ph.ph--photo{display:block;background:transparent;}
.wd-gallery .gallery__caption{display:block;margin-top:8px;font-size:12px;line-height:1.6;letter-spacing:.08em;color:var(--c-text-note);text-align:left;}
/* 説明文（本文エディタの内容・2026-10-01）＝従来の <p class="txt">＋2段落目以降 mt-3 と同じ見え方 */
/* 2026-10-02 スタッフ指示「説明欄だけ15px＝下（3点セットの .txt）と合わせて」＝.txt と同じ L3 本文（16px・行間2.05・字間.03em） */
/* [20261016w] 住宅の「この家の“ID”とデザイン」（.works-lead＝幅は中身なり・最大720px・中央の枠に左寄せ）と同じ構成。
   文字は下の3点セットの本文（.txt＝L3 16px・行間2.05・text-sub）と同じ。見出しは .wd-set__num／.wd-set__t を流用 */
.wd-story__body{width:fit-content;max-width:var(--c1-measure);margin-inline:auto;text-align:left;}
.wd-story__body p{font-size:var(--bz-fs-l3);line-height:2.05;letter-spacing:.03em;color:var(--c-text-sub);margin:0;}
.wd-story__body p + p{margin-top:var(--sp-3);}
.wd-story__body a{color:inherit;text-decoration:underline;text-underline-offset:3px;}
/* [20261020a] 見出しなし・住宅 model-house 冒頭の引用調（.mh-quote＝左の縦線2px＋左余白16px・行間2.1）と同じ形 */
.wd-story__body--quote{border-left:2px solid var(--c-line-dark);padding-left:16px;width:auto;}  /* [20261020j] 短い文でも中央に寄せず、下の本文と左端をそろえる（ディレクター指示） */
.wd-story__body--quote p{line-height:2.1;}
/* 「施工事例一覧に戻る」＝住宅 design-system.css の .section__foot（上56px・中央）と同じ間合い */
.wd-back{margin-top:56px;text-align:center;}
.wd-back--solo{margin-top:0;}
/* 2026-10-01 改修前（Before）セクション＝改修後ギャラリーの後ろに置き、幅を一回り狭く（1480→1080px）。 */
.wd-photo--before .section__inner{max-width:calc(1080px + var(--pad-side)*2);}
@media(min-width:768px){
  .wd-gallery.wd-gallery--natural > .ph.ph--photo.is-solo{grid-column:1 / -1;justify-self:center;width:calc((100% - var(--grid-gap)) / 2);}
}

/* [20261015w] SP（767px以下）の改修前（Before）は横スワイプ（ディレクター指示「どちらのサイトも SP の BEFORE は横スワイプ」・住宅と同じ）。
   次の写真を少し見せて「横に続く」ことを示す。PC は従来どおりの2枚組。 */
@media(max-width:767px){
  .wd-photo--before .wd-gallery.wd-gallery--natural{
    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;
  }
  .wd-photo--before .wd-gallery.wd-gallery--natural::-webkit-scrollbar{display:none;}
  /* 写真の高さをそろえ、幅は縦横比なり（切り取らない）。横長と縦長が混ざっても下に空白を作らない。 */
  .wd-photo--before .wd-gallery.wd-gallery--natural > .ph.ph--photo{flex:0 0 auto;width:auto;scroll-snap-align:start;}
  .wd-photo--before .wd-gallery.wd-gallery--natural > .ph.ph--photo > img{height:56vw;width:auto;max-width:none;}
}

/* ==========================================================================
   2026-10-02 余白の強弱（スタッフ決定「案2」・⚠️上司確認待ち）
   共通の .page-hero ~ .section--tight（上下 sp-6）が欄ごとに上下両方へ付くため、欄が続くと
   間が sp-6×2（PC 360px／SP 240px）になっていた。欄の下余白を 0 にして「間＝上余白1つ分」に揃え、
   - 文章のまとまり（説明文 → 3点セット）は詰める＝sp-5（64px）
   - 話題が変わるところ（文章→写真・写真→改修前・→Data・→オーナーの声・→関連する実例）は sp-6（PC180／SP120）
   値はすべて既存トークン。共通（0,2,0）より詳細度を上げるため .page-hero ~ を前置する。
   ========================================================================== */
.page-hero ~ .section--tight.wd-story,
.page-hero ~ .section--tight.wd-sets,
.page-hero ~ .section--tight.wd-photo,
.page-hero ~ .section--tight.wd-data,
.page-hero ~ .section--tight.wd-voice{padding-top:var(--sp-6);padding-bottom:0;}
.page-hero ~ .section--tight.wd-story + .section--tight.wd-sets{padding-top:var(--sp-5);}
/* [20261020i] 説明文（見出しなし・引用調＝20261020a）はメインカットに寄り添わせる＝上を sp-6→sp-5。
   ディレクター「見出しがあった部分周りの余白調整」。住宅 model-house の写真→引用 56px に近い間隔で、下（区切り線まで sp-5）とそろう */
/* (20261020l で説明文の独立節を廃止＝不要になった規則を削除) */
/* [20261020k] 説明文（左の縦線）の直後に横の区切り線が続くと線が重なって見える（ディレクター指示）＝説明文があるときだけ最初の1本を外す。
   間隔は残す（説明文→見出し 128px＝写真→説明文 64px の2倍で、まとまりの区切りを余白で示す） */
/* (20261020l で説明文の独立節を廃止＝不要になった規則を削除) */
.page-hero ~ .section.wd-related{padding-top:var(--sp-6);}


/* [20261016x] 事例詳細の節見出し（この計画について・3点セット・完成後の変化・計画概要）は h3。
   ディレクター指示「h2=40px（2026-08-09 決定）は変えず、大きすぎる節見出しは h3 に」＝h2（L1 PC40/SP26）より一段小さい
   PC 32px（住宅の L1 と同値）／SP 22px。関連する実例・お問い合わせの h2 は L1 のまま */
.wd-story,.wd-sets,.wd-data{--wd-fs-h3:22px;}
@media(min-width:768px){
  .wd-story,.wd-sets,.wd-data{--wd-fs-h3:32px;}
}
h3.wd-set__t,h3.h-sec{font-size:var(--wd-fs-h3);}

/* [20261016y] 英字ラベルを白に（事例詳細のみ・ディレクター確認済み「赤線無しでOK」）
   赤の英字（--c1-accent-ink #e05a4a）は #555 地で 2.0:1 と読みにくい（#1a1a1a 地の時代の選定値のまま）→ 白（7.5:1）。
   A案の「ラベル前の赤い短線」は試したうえで不要（同日ディレクター）。サイト全体への展開は未定（docs/19 P153） */
.page-hero__eyebrow,
.eyebrow,
.wd-set__num{color:var(--c-text);}

/* [20261020l] 説明文＝「計画のはじまり」の見出しの下（ディレクター決定）。
   2026-10-20 ディレクター「文字サイズと色を統一してください」＝下の本文（.txt＝L3 本文）と同じ大きさ・行間・字間・色にそろえる。本文が続くときだけ下に間をとる */
.wd-set__lead{text-align:left;}
.wd-set__lead p{font-size:var(--bz-fs-l3);line-height:2.05;letter-spacing:.03em;font-weight:400;color:var(--c-text-sub);margin:0;}
.wd-set__lead p + p{margin-top:1.6em;}
.wd-set__lead + .txt{margin-top:1.6em;}
/* [20261020l] 先頭写真のすぐ後の「計画のはじまり」等（最初の節）：写真の直下に区切り線が1本だけ浮き、写真→英字ラベルが約240pxあった
   → 最初の1本の線を外し、節の上の余白を sp-6→sp-5（写真→英字ラベル 64+64=128px）。完成後の変化（--outcome）は対象外 */
.page-hero ~ .section--tight.wd-sets:not(.wd-sets--outcome){padding-top:var(--sp-5);}
.page-hero ~ .section--tight.wd-sets:not(.wd-sets--outcome) .wd-set:first-child{border-top:0;}

/* [20261020p] ディレクター「色も揃えてください」：事例ページ上部の札（工事種別・所在地）を業種の札と同じ色に（白文字・白40%の枠・地なし） */
.wd-hero__meta .tag{color:var(--c-text);border-color:var(--c-line-dark);background:transparent;letter-spacing:.12em;padding:2px 10px;}