/* [20260810n] ヒーローキャッチ＝セクション見出しと同一級数（design-system.css §hero-intro の
   「キャッチ＝.section__title と同一の文字サイズ」＝2026-07-27 ディレクター指示3-1）を B確定級数で回復する。
   共有 design-system.css は .hero-intro__catch を旧C-1ペア（--fs-h2-sm 28 / --fs-h2 32）で固定しており、
   c1-theme.css §7-1 は .section__title だけを --c1-fs-h2（clamp 26〜40）へ移したため、
   PCでキャッチ32 < 見出し40、SPでキャッチ28 > 見出し26 と序列が崩れていた（実測）。
   ★恒久対応は c1-theme.css §7-1 への1行追加（全279ページ＋?v一括バンプ）＝PL/PMへ申し送り。
      本タスクは共有CSS不変の方針のため、該当12ページにページ内で同値を当てる。 */
.c1 .hero-intro__catch{font-size:var(--c1-fs-h2);letter-spacing:var(--c1-ls-h2);}

/* ============================================================================
   [20260810n] B確定トンマナ（design-rules §10）一貫性統一バッチ 適用済み
   ・級数   = --c1-fs-h2 / --c1-fs-h3 / --c1-fs-lead / --c1-fs-label-en（§10-2 L1〜L5）
   ・読み幅 = --c1-measure(720) / --c1-measure-narrow(640)（§10-5）
   ・画像幅 = 1480(--w-content) / 980 / 720 の3種のみ（§10-5）
   ・カードgap = --grid-gap(20px)／カード段組コンテナ = 980px（§10-5）
   ・セクション縦余白 = --sp-6/7/8/--sp-sec-sm の4段のみ（§10-5）
   ※本ブロック内に残る「C-1: SP22 / PC28」等のコメントは旧C-1級数時代の記述。
     現行の正は §10（B確定）＝上記トークン。
   ============================================================================ */

/* about固有（英文コピー／会社概要表） */
.statement__en{font-size:var(--fs-caption);letter-spacing:.18em;color:var(--c-text-sub);text-align:center;margin-bottom:var(--sp-4);}

/* ------------------------------------------------------------------
   [2026-08-10 / tag 20260810f] ディレクター指摘対応の page-scoped 追記
   共有CSS（design-system / c1-theme / global-nav）は本タスクでは変更しない。
   ------------------------------------------------------------------ */

/* ③ OUR VALUES 大判図版の中央ずれ修正（共有CSSのバグの当ページ内回避）
   c1-theme.css は .c1-bleed{margin-inline:auto} の【直後】に .c1-figure{margin:0}
   を宣言しており、同詳細度・後勝ちで auto が打ち消される。結果 .c1-bleed.c1-figure は
   常に左寄せになる（2000px幅で実測: 図版 left=59.5px / 本来の中央 left=252.5px）。
   ここでは詳細度(0,2,0)で auto を復帰させるだけに留める。
   ※共有CSS側の恒久修正は about 以外の9ページ（design/house/house-bioclimatic/
     house-life-id-design/house-quality-support/performance/realestate/renovation/works）
     にも同じ症状が出るため、別タスクとしてPL/PMへ申し送り。 */
.c1-bleed.c1-figure{margin-inline:auto;}
/* 同上・大判に実写真を入れる際の必須指定。<img width height> はHTMLの presentational hint として
   height:1012px を立てるため、c1-theme の aspect-ratio:16/7 が無効化され帯が縦に伸びる
   （＝1480×1012の箱になり左右17%がcoverで切れる）。height:auto で 16:7 の帯に戻す。
   ※about.html は c1-figure--full に実写真を入れる最初のページ（他ページは全て .ph プレースホルダ）。 */
.c1-figure--full > img{height:auto;}

/* ② 事業4本柱＝画像入り4枚カード（旧 .pillar-list の2列テキストカードから変更）
   幅は c1-bleed と同じくコンテンツ幅1480pxで中央。section__inner--narrow の兄弟に置く。 */
.biz-cards{
  display:grid;gap:var(--grid-gap,20px);grid-template-columns:1fr;
  max-width:min(var(--w-content),100%);margin:var(--sp-4) auto 0;
}
@media(min-width:600px){ .biz-cards{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1120px){ .biz-cards{grid-template-columns:repeat(4,1fr);} }   /* [20261020zd] 1080→1120px：文字と横棒のすき間10pxを「リノベーション」でも確保するため */   /* [20261020zb] 1400→1080px：4枚目の文言を短くしたため4列を広く保てる（1080px未満はボタン幅が足りず「リノベーション」がはみ出す）。1079px以下は2列 */
.biz-card{display:flex;flex-direction:column;border:1px solid var(--c-line);background:var(--c-bg);}
.biz-card__photo{aspect-ratio:4/3;overflow:hidden;background:var(--c-ph);}
.biz-card__photo img{width:100%;height:100%;object-fit:cover;display:block;}
.biz-card__photo .ph{width:100%;height:100%;min-height:0;border:0;}
.biz-card__body{display:flex;flex-direction:column;flex:1;padding:22px 20px 24px;text-align:center;}
.biz-card__title{font-size:var(--c1-fs-h3);font-weight:var(--fw-normal);letter-spacing:var(--ls-2);margin-bottom:10px;}
.biz-card__text{font-size:var(--fs-body-sm);color:var(--c-text-sub);text-align:left;
  line-height:var(--lh-body);margin-bottom:20px;
  /* 段落ち対策（QA about-01）: コンテンツ幅1480px時に「える」「る」が1〜2字だけ落ちる。
     改行位置は本文中の <br> で確定させて解消。ここは <br> の効かない狭幅域での保険。 */
  
  /* 左揃えのままテキスト塊をカード中央へ（ディレクター指示 2026-08-19）。
     各行は左揃えのまま、ブロック幅を最長行に合わせて左右の余白を均等にする。
     本文中の <br> と対で機能する（<br> がないと fit-content が最長行まで縮まない）。
     幅が足りない狭幅域では自動的に全幅＝従来の左揃えへフォールバックする。 */
  width:fit-content;margin-left:auto;margin-right:auto;}
/* [20261029b] SP（767px以下）では pretty を使わない＝iPhone の Safari は段落全体の行をそろえようとして全行が短くなり、文章が左に寄って見えるため（ディレクター選択＝案B）。 */
@media(min-width:768px){ .biz-card__text{text-wrap-style:pretty;} }
.biz-card__btn{margin-top:auto;text-align:center;}
.biz-card__btn .btn{min-width:min(360px,100%);}   /* [20261020za] 2列のとき幅いっぱいに広がらないよう基準どおり360px・中央（4列ではカード幅に収まる） */

/* ④ 拠点のご案内＝home.html「私たちについて＋拠点情報」の2スタジオ実装を移植。
   クラス名・構造・数値は home.html #page-scoped の .studios__grid / .studio__* と同一。
   （home.html は読み取りのみ・未編集） */
.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; }
/* [20260826ed] ディレクター指示（2026-08-26）「consultation が整っているので、タイポはそちらに統一」。
   正本＝consultation.html の `.studio__name` / `.studio__rows`:
     名     = font-size:var(--c1-fs-h3)（§10-2 L2）・font-weight:500・letter-spacing:var(--ls-2)・line-height:1.6
     情報行 = font-size:var(--fs-caption)（13px＝L4）・color:var(--c-text-sub)
   ※`--c1-fs-h3` は clamp だが、**§10-2 が L2 として定めているトークンそのもの**。
     本日 performance.html 等でやった「clamp→固定」は“同じ役割なのにページ内で級数が割れている”のを揃える措置であり、
     3ページのスタジオ節が揃って L2 を使うのは §10-2 に沿う。中間サイズも作っていない。
   ※**揃えたのは級数・ウェイト・字間・行間・文字色のみ**。揃え（中央/左）・余白・器のレイアウトは
     ページごとの構成が違うため触っていない。 */
.studio__name{ font-size:var(--c1-fs-h3); font-weight:500; letter-spacing:var(--ls-2); line-height:1.6; margin:24px 0 12px; }
/* [20260826ee] ディレクター指示（2026-08-26）「about.html の電話番号は**大きいサイズで保って**」。
   ed で consultation に合わせて 19px→13px にしたが、本指示で**元の19pxへ差し戻す**。
   ＝このページの電話番号は「会社紹介から直接かけられる」導線として意図的に大きい（home.html 由来）。
   ⚠️19px は §10-2 の段（28/18/16/15/13/11）に無い値だが、about は docs/00b 20260810n で
      「home.html からの移植＝数値まで同一」を**意図的に残した逸脱**として記録済みの箇所。
      名・住所・駐車場は ed のまま consultation に統一しており、**電話番号だけ大きさを保つ**。 */
.studio__tel{ font-size:19px; color:var(--c-text); letter-spacing:.04em; margin-bottom:16px; }
.studio__tel a{ text-decoration:none; color:var(--c-text); }
.studio__addr{ font-size:var(--fs-caption); color:var(--c-text-sub); margin-bottom:6px; letter-spacing:var(--ls-body); }
.studio__park{ font-size:var(--fs-caption); color:var(--c-text-sub); margin-bottom:22px; letter-spacing:var(--ls-body); }
.studio__park a{ color:var(--c-text-sub); text-decoration:underline; text-underline-offset:3px; }
/* [20260821df→dg] スタジオごとの詳細ボタン（写真〜地図のあいだ）。
   dg: ディレクター指摘「ボタンの幅が広い」。df では .biz-card__btn に倣って列幅いっぱい
   （width:100%）にしていたが、あちらは高さを揃えたカードの底に敷く用途で事情が違う。
   ここは .btn--small 本来のコンパクト運用に戻し、**内容幅**にする。
   `.btn` は PC で min-width:min(360px,100%) が効くため min-width:0 で解除する。
   スタジオ名・TEL・住所が左揃えなので、ボタンも左揃え＝テキスト列の左端に合わせる。 */
.studio__btn{ margin-bottom:22px; }
/* [20261023a] 文字幅（fit-content）をやめ、他のボタンと同じ仕様に＝SPは横いっぱい・PCは最低360px（ディレクター「例外以外はボタンの大きさ・仕様・動きを揃える」）。 */
.studio__map{ aspect-ratio:16/9; background:var(--c-ph); overflow:hidden; }
.studio__map iframe{ width:100%; height:100%; border:0; display:block; }
/* 2スタジオはコンテンツ幅1480pxで見せる（本文は720pxのまま＝小組→大判のリズム）。
   text-align:left は home.html と同じ見え方にするための復帰指定
   （about側の親が .statement＝design-system §statement で text-align:center のため）。 */
.studios--bleed{max-width:min(var(--w-content),100%);margin-inline:auto;text-align:left;}

/* 会社概要: 2列のシンプルな表。SPでも横スクロール不使用 */
.company-table{width:100%;max-width:var(--c1-measure);margin:0 auto;border-collapse:collapse;font-size:var(--fs-caption);text-align:left;line-height:1.9;}
.company-table th,.company-table td{border-bottom:1px solid var(--c-line);padding:14px 8px;vertical-align:top;}
.company-table th{width:92px;font-weight:var(--fw-normal);color:var(--c-text-sub);white-space:nowrap;letter-spacing:.05em;}
@media(min-width:768px){
  .company-table{font-size:var(--fs-body-sm);}
  .company-table th{width:140px;}
}

/* ⑤ 段落ち対策（QA about-01／about-02）。文言は不変。
   方針（2026-08-19ディレクター指示）＝**段落ちの箇所だけを直す**。
   それ以外の行は従来どおり幅いっぱいまで文字を詰める。
   - `word-break:auto-phrase` は不使用（全行を文節境界で改行し、無関係の行まで短くなる）。
   - `text-wrap:balance` も不使用（全行の長さを均等化してブロックが細る）。
   - 採用＝`text-wrap-style:pretty`。最終行だけを調整し、他行は素とほぼ同一に保つ。
   - pretty で足りない箇所のみ、本文側で語を `.nowrap` で括って押し下げる。

   適用範囲は本文要素全般とする。当初は指摘のあったクラスだけに当てていたが、
   <br> で複数文に分かれた段落では「要素の最終行」ではなく**各文の末尾**に落ちるため、
   クラス単位の指定では取りこぼしが出た（event.html の .hero-intro__lead で判明）。
   pretty は最終行以外を動かさないので、広く当てても他行の詰まり方は変わらない。
   .feature__* / .statement__body は定義元が共有CSS（design-system.css・281ページ参照）
   のため、ここでの指定は当ページ内に限った回避策。共有CSSの改修は ?v 一括バンプを伴う別ラウンド。 */
/* [20261029b] SP（767px以下）では pretty を使わない＝iPhone の Safari は段落全体の行をそろえようとして全行が短くなり、文章が左に寄って見えるため（ディレクター選択＝案B）。 */
@media(min-width:768px){
.section .section__title,.section p,.section li,.section dd,.section dt,
.section h3,.section h4,.section figcaption{text-wrap-style:pretty;}
}
/* 段落ちの語だけを一体で送るためのユーティリティ。適用箇所は本文中の <span class="nowrap"> を参照。 */
.nowrap{white-space:nowrap;}
/* 見出しは pretty の「最終行を長くする」挙動が邪魔になる（2026-08-20ディレクター指摘）。
   1440pxで「デザインと性能を分け／て考えない」と割れていたため、この見出しだけ素の改行に戻す。
   段落ち対策は本文側の nowrap「考えない」で担保する。 */
.section .feature__title{text-wrap-style:auto;}

/* [20260821bw] ディレクター指示（2026-08-24）「フォントサイズを調節し、文字の陳列ではなく
   みやすく改善して下さい」。実測（1440px）で見つかった原因は3つ。
     1. 見出しが **21.6px**。--c1-fs-h3 ＝ clamp(17px,1.5vw,22px) が1440pxで上限近くまで伸びていた。
        → --fs-h3（SP16 / 768以上18px 固定）へ。他ページの小見出しと同じ扱いに揃う。
     2. 見出しの行間が **44.28px＝級数の2.05倍**。共有CSSの .feature__title に line-height の
        指定が無く、本文用の行間をそのまま継いでいた。3行になる「デザインと性能を分けて考えない」が
        133pxまで伸びて、見出しと本文の区別がつかなくなっていた。→ 1.7 に締める。
     3. 4項目が gap 44px の2列に並ぶだけで **区切りが余白しかない**＝「文字の陳列」に見える主因。
        → 各項目に上罫線を引いて粒立てる（本日 realestate / house-quality-support / house-process で
          統一した「罫線で区切る」考え方を、2列グリッドのまま適用したもの）。
   見出し下の余白も 6px → 10px に広げ、締めた行間とのバランスを取る。
   ※級数は §10-2 の L2（--fs-h3）と L3（--fs-body）の2段のみ。新規サイズは作っていない。
   ※.feature-list--2col は about.html だけで使うクラス（機械確認済み）なので、
     ここでの指定が他ページに影響することはない。 */
/* [20260821by] ディレクター指示（2026-08-24）:
     「フォントサイズを調節し、文字の陳列ではなくみやすく改善」→「もう少し他ページを参考に工夫」
     →「番号はつけないでほしい」。
   採用＝**performance.html の `.kb`（用語グリッド）と同じ目地グリッド**。
   `gap:1px` ＋ グリッド自身の背景に `--c-line` を敷き、**セルの隙間そのものを罫線として見せる**。
   枠線は1本も引かず、番号も使わない。
   ・about の項目数は4なので **2列×2行でぴったり埋まり、余りマスが出ない**
     （house-quality-support で5項目に同じ形を当てたときは末尾が余った）。
   ・縦一列をやめて升目にすることで視線が縦だけでなく横にも動く＝「文字の陳列」を構造で解く。
   ・about.html のこのセクションは直後に大判のパノラマ写真が来るので、
     囲み枠のカードを増やさず罫線だけで組む形が写真と競合しない。
   ■級数は §10-2 の L2 と L3 の2段のみ。新規サイズは作っていない。
     ・見出し = --fs-h3（SP16 / 768以上18px 固定）
       ※旧 --c1-fs-h3 は clamp(17,1.5vw,22) で1440pxに21.6pxまで伸びていた。
     ・本文   = --fs-body（15px・据え置き）
   ■見出しの行間 1.7 は据え置き。共有CSSの `.feature__title` に line-height 指定が無く、
     本文用の行間（級数の2.05倍＝44.28px）をそのまま継いでいたのが
     「見出しと本文の区別がつかない」主因だったため。 */
.feature-list--2col{
  gap:1px;background:var(--c-line);
  grid-template-columns:1fr;
}
@media(min-width:768px){
  .feature-list--2col{grid-template-columns:repeat(2,1fr);}
}
.feature-list--2col .feature{
  background:var(--c-bg);padding:26px 24px 28px;
}
@media(min-width:768px){
  .feature-list--2col .feature{padding:30px 28px 32px;}
}
.feature-list--2col .feature__title{
  font-size:var(--fs-h3);
  line-height:1.7;
  margin-bottom:10px;
}
/* 宣言コピー「“私たち”を、家にする。」＝SPでも中央揃え（2026-08-20ディレクター指示・チェックリスト about-03）。
   共有CSS design-system.css §12 は SP で .statement__copy と .statement を左揃えに固定していた
   （2026-07-20「リード文はSP左揃え」指示）。768px以上は中央なので、SPだけ左に寄っていた。
   ※直下の英字 .statement__en は元から常時中央だったため、SPでは和文=左／英字=中央で不一致だった。
   → 和文コピーのみ中央に揃える（本文 .statement__body は従来どおりSP左揃えのまま）。 */
@media(max-width:767px){
  .statement__copy{text-align:center;}
}
/* biz導線ボタン: 1024〜1150pxでカード幅が狭く「…サイト／へ」と1字落ちする。
   .btn の中に <span> を置くと global-nav.js の btnroll がテキストを二重描画するため使えない。
   → 横棒の占有帯を0にして文字に全幅を回し、1行で収める（.cta-photo .btn のSP対応と同手法）。 */
.biz-card__btn .btn{white-space:nowrap;}
/* [20261020z] 小さいボタン（.btn--small）をやめ、基準ボタン（14px・横棒つき）に統一。
   横棒はSPと同じ小さめ（24px）にして文字に幅を回す。4列でカードが細い帯（ボタン幅270px未満＝おおむね1024〜1380px）は
   「店舗・施設建築のサイトへ」と横棒が1行に並ばないため、その幅のときだけ横棒を消す（.cta-photo のSP対応と同じ手法）。 */
.biz-card__btn{container-type:inline-size;}
.biz-card__btn .btn{--btn-bar-w:24px;--btn-bar-gap:14px;padding-inline:calc(var(--btn-bar-w) + var(--btn-bar-gap) + var(--btn-bar-space,10px));}
/* [20261020zb] 4枚目は別サイト（店舗・施設建築）へ移るため、横棒の代わりに「↗」（採用情報 engage ボタンと同じ印）。
   文言を「店舗・施設建築のサイトへ」→「店舗・施設建築」に短くし、4列（1080px〜）でも全ボタンが1行・印つきで並ぶ。
   これにより「幅270px未満で横棒を消す」設定（20261020z）は廃止。 */
.biz-card__btn .btn--ext{padding-inline:16px;}
.biz-card__btn .btn--ext::after{content:"↗";position:static;display:inline-block;width:auto;height:auto;background:none;
  margin-left:8px;font-size:var(--fs-micro);vertical-align:baseline;}
.biz-card__btn .btn--ext:hover::after{animation:none;}
.biz-card__btn .btn{--btn-bar-space:10px;}   /* [20261023a] 4列のカード内は幅がないため例外として10pxのまま（2列＝360px時は下で基準に戻す） */
@container (min-width:360px){   /* [20261020za] 2列＝ボタン360px幅のときは基準と同じ横棒32px・余白64px */
  .biz-card__btn .btn{--btn-bar-w:32px;--btn-bar-gap:24px;--btn-bar-space:20px;padding-inline:max(64px,calc(var(--btn-bar-w) + var(--btn-bar-gap) + var(--btn-bar-space)));}
}

/* [20261026f〜n] 企業理念（会社概要の直前・クライアント要望 10/26）。
   20261026n ディレクター選択「D案：写真の上に理念」（他社の理念ページ調査＝三井ホーム型の中央ステートメントに写真を足した形）。
   ・理念3項目＝画面幅いっぱいの写真（20261026o）の上に白文字・中央。暗幕 .5（白文字の本文 15px を読ませるため FV の .3 より濃い）。
     写真＝photo-inbox/IDW2604-3711-2（サイト未使用を画像照合で確認・長辺1800px・sRGB・JPEG q82＝この機に WebP 変換手段なし）。
   ・写真の上の二層ラベルは白（赤は写真上の小級数に使わない＝design-rules §10-3）。
   ・ビジョン｜行動規範＝写真の下に縦線で左右（768px以上）・SPは余白で上下（20261026q で横線を廃止）。Vision／Behavior は .statement__en と同じ見せ方。
   ・番号なし（20261026k）・理念は2列組にしない（20261026m）。
   中央揃えの折り返しは text-wrap-style:balance（ショートハンド text-wrap は共有CSSの nowrap を打ち消すため使わない）。 */
#corporate-philosophy{padding-top:0;}
.cp-hero{position:relative;overflow:hidden;color:#fff;margin-inline:calc(var(--pad-side,16px) * -1);}   /* [20261026o] 画面幅いっぱい＝.section の左右余白（--pad-side）ぶんはみ出させる（灰色の帯は写真の下から始まる） */
.cp-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cp-hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5);}
.cp-hero__in{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:var(--sp-sec-sm) 6%;text-align:center;}
#corporate-philosophy .cp-hero .c1-label__en,#corporate-philosophy .cp-hero .section__title{color:#fff;}
.cp-list{margin-top:48px;}
.cp-item + .cp-item{margin-top:44px;}
#corporate-philosophy .cp-item__title{font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:var(--ls-2);line-height:1.6;margin:0 0 10px;color:#fff;text-wrap-style:balance;}
#corporate-philosophy .cp-item__text{font-size:var(--fs-body);line-height:var(--lh-body);color:rgba(255,255,255,.9);text-wrap-style:balance;}
.cp-wrap{max-width:1120px;}
.cp-pair{display:grid;gap:0;margin-top:var(--sp-sec-sm);}
.cp-panel{padding:36px 0;text-align:center;}
.cp-panel + .cp-panel{margin-top:24px;}   /* [20261026q] 縦積み（767px以下）は横線をやめ余白で区切る（ディレクター承認・理念3項目と揃える） */
.cp-panel__title{font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:var(--ls-2);line-height:1.7;margin:0 0 16px;}
#corporate-philosophy .cp-panel__en{font-family:var(--ff-en);font-weight:var(--fw-normal);font-size:var(--fs-caption);letter-spacing:.18em;line-height:var(--lh-body);color:var(--c-text-sub);margin:-8px 0 20px;}
#corporate-philosophy .cp-panel__text,#corporate-philosophy .cp-rules li{font-size:var(--fs-body);line-height:var(--lh-body);text-wrap-style:balance;}
.cp-line{display:block;}
.cp-rules{list-style:none;margin:0;padding:0;}
.cp-rules li + li{margin-top:4px;}
@media(min-width:768px){
  .cp-hero__in{padding:var(--sp-6) 6%;}
  .cp-pair{grid-template-columns:repeat(2,1fr);}
  .cp-panel{padding:8px 40px;}
  .cp-panel + .cp-panel{margin-top:0;border-left:1px solid var(--c-line);}
}

/* [20261026zd] 黄金町 okiza の節：事業カード（.biz-card）を2列で流用。ボタンは枠の幅いっぱい・縦に積む。 */
.okz-cards{display:grid;gap:var(--grid-gap);max-width:980px;margin:48px auto 0;}
@media(min-width:768px){.okz-cards{grid-template-columns:repeat(2,1fr);}}
.okz-cards .biz-card__text{margin-bottom:14px;}
.okz-hours{font-size:var(--fs-caption);color:var(--c-text-sub);text-align:left;margin:0 0 18px;}
.okz-btns{display:flex;flex-direction:column;gap:10px;}
.okz-btns .btn{width:100%;min-width:0;}