/**
 * 固定ページ: BCID（土地を読む）（/house/bioclimatic/）— 分類A（一枚もの）ページ固有CSS（F分類）
 * 正本: design/pages/house-bioclimatic.html の <style id="page-scoped">（128行・末尾.nowrap込み）。
 * .gated{display:none} を含む＝DL資料ゲーティング（docs/19 P21）の要のスタイル。
 */

/* [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確定）＝上記トークン。
   ============================================================================ */

/* house-bioclimatic固有（対応表／3点セット事例） */
/* 対応表（環境の読み取り→設計）: SP=縦積みペア、PC=左右2カラム */
.translate-list{list-style:none;max-width:var(--c1-measure);margin:64px auto 0;text-align:left;}
.translate-pair{border:1px solid var(--c-line);background:var(--c-bg);padding:18px 20px;margin-bottom:16px;}
.translate-pair__from{display:block;font-size:var(--fs-body);font-weight:var(--fw-normal);line-height:1.9;padding-bottom:14px;margin-bottom:14px;border-bottom:1px dashed var(--c-line);}
.translate-pair__to{display:block;font-size:var(--fs-caption);color:var(--c-text-sub);line-height:1.9;}
.translate-pair__label{display:block;font-size:var(--fs-micro);font-weight:var(--fw-normal);color:var(--c-text-note);letter-spacing:.14em;margin-bottom:4px;}
@media(min-width:768px){
  .translate-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;align-items:start;}
  .translate-pair__from{border-bottom:none;border-right:1px dashed var(--c-line);padding:0 28px 0 0;margin:0;}
}

/* 事例カードの3点セット */
.case-points{list-style:none;font-size:var(--fs-caption);margin-top:8px;border-top:1px solid var(--c-line);}
.case-points__item{padding:6px 0;border-bottom:1px solid var(--c-line);}
.case-points__label{font-size:var(--fs-micro);color:var(--c-text-sub);display:block;letter-spacing:.05em;}

/* 環境アイコン（自作インラインSVG線画・48×48グリッド・同一線幅1.5・currentColor）
   2026-07-21 ディレクター指示：サイズ2倍・グレー色（--c-text-sub） */
.bc-ico{width:92px;height:92px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;color:var(--c-text-sub);}
.bc-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;}
.bc-tile__label{font-size:var(--fs-micro);color:var(--c-text-sub);letter-spacing:.1em;line-height:1.5;}

/* 概念図：パッシブ（光・風・熱）を内包し、BCIDがさらに読み解く領域を羅列（アクロマティック） */
.cmap{max-width:var(--c1-measure-narrow);margin:64px auto 0;border:1px solid var(--c-text);background:var(--c-bg-sub);padding:22px 20px;}
.cmap__outer-label{display:block;text-align:center;font-size:var(--c1-fs-h3);font-weight:500;color:var(--c-text);letter-spacing:.12em;line-height:1.5;}
.cmap__outer-en{display:block;text-align:center;font-family:var(--ff-en);font-size:var(--fs-micro);color:var(--c-text-note);letter-spacing:.2em;margin:5px 0 20px;}
.cmap__inner{border:1px solid var(--c-line-dark);background:var(--c-bg);padding:18px 16px;text-align:center;}
.cmap__inner-label{display:block;font-size:var(--fs-caption);color:var(--c-text);letter-spacing:var(--ls-2);}
.cmap__inner-en{display:block;font-family:var(--ff-en);font-size:var(--fs-micro);color:var(--c-text-note);letter-spacing:.2em;margin:5px 0 16px;}
.cmap__row{display:grid;gap:16px 8px;justify-items:center;}
/* 20260810i QA指摘3: ［季節］をパッシブ側へ移動＝内側は3→4項目。列数を4に拡張（92×4+gap）。 */
.cmap__row--3{grid-template-columns:repeat(4,1fr);max-width:428px;margin:0 auto;}
.cmap__plus{margin:18px 0 8px;font-size:var(--fs-caption);color:var(--c-text-sub);letter-spacing:var(--ls-1);line-height:1.8;text-align:center;}
.cmap__row--8{grid-template-columns:repeat(4,1fr);margin-top:6px;}
@media(max-width:479px){
  .cmap__row--8{grid-template-columns:repeat(3,1fr);}
  .cmap__row--3{grid-template-columns:repeat(2,1fr);max-width:216px;} /* 狭幅は2×2＝外側3列とアイコン径を揃える */
}
/* 20260810i QA指摘3: 比較図のアイコンを支給ファイル（illustration/illustration-inbox/bioclimatic/）へ差し替え。
   自作インラインSVG スプライト（#ic-*）は .gated セクション側で継続使用のため残置する。
   支給イラストは黒の線画（無彩色）。加工・着色は行わず素のまま使用する。
   幅は既存 .bc-ico と同じ92pxを上限に、狭幅では列幅まで縮む（横スクロール防止）。 */
.bc-ico-img{display:block;width:100%;max-width:92px;height:auto;aspect-ratio:1/1;object-fit:contain;margin:0 auto;}

/* こんな環境です：feature に環境アイコンを付す（同一アイコンセット） */
.feature--ico{text-align:center;}
.feature--ico .bc-ico{width:108px;height:108px;margin:0 auto 16px;display:block;}

/* I.D.メソッド関係図（人＋場所→翻訳）: mtriad と同トーンの静的図 */
/* ============================================================
   閲覧ゲーティング → 完全非表示化（2026-07-29 AF-1・ディレクター確定）
   「半分表示（ティーザー）にする必要はない・完全非表示でよい」との確定を受け、
   対象2セクション（読み解いているのは、こんな環境です／環境の読み取りが、設計に変わる[対応表]）は
   WEBでは完全非表示（display:none）とし、内容は BOOK03（気候の読本・BCID詳細）へ移行＝冊子側が正。
   その位置には資料DL誘導CTA（.gate-cta）のみ残す。
   ★CMS実装時も本2セクションは出力しない（DL誘導CTAのみ出力）。
   ============================================================ */
.gated{display:none;}
.gate-cta{max-width:var(--c1-measure-narrow);margin:var(--sp-6) auto 0;padding:0 var(--pad-side,16px) var(--sp-6);text-align:center;}
.gate-cta__title{font-size:var(--c1-fs-h3);font-weight:var(--fw-normal);letter-spacing:var(--ls-2);line-height:1.7;margin-bottom:12px;}
.gate-cta__text{font-size:var(--fs-body);color:var(--c-text-sub);line-height:1.9;margin-bottom:28px;}

/* ルビ「ビシッド」を縮小（2026-07-28 クライアント指示：現状比 約60%）。
   rt のブラウザ既定は親文字の50% ＝ .3em で既定比60%。行送りは1.15で見出しの行間を膨らませない。 */
ruby rt{font-size:.3em;letter-spacing:.06em;line-height:1.15;font-weight:var(--fw-normal);color:var(--c-text-sub);}
/* [20261015n] FV（動画の上）のルビ＝白＋本体との間を少し開ける（ディレクター指示）。本文中のルビは従来どおり。 */
.page-hero--overlay .page-hero__title rt{color:#fff;margin-bottom:.5em;}

/* [20261015o] 「I.D.メソッドの中での位置づけ」を house.html #method「人を読む、土地を読む、設計へ翻訳する」と同じボックス型（.mtriad／.mel--box）へ（ディレクター指示）。
   以下は house.html のページ内CSSをそのまま複製（基本形は design-system.css の .mtriad／.mel）。旧 .relmap は撤去。 */
/* I.D.メソッド 3要素：LIFE ID／BCID 併置ラベル */
.mel__brand{display:block;font-size:var(--fs-caption);color:var(--c-text-sub);letter-spacing:.04em;margin-top:7px;}
.mel__title .mel__en{margin-top:3px;}
.mtriad__caption{max-width:var(--c1-measure-narrow);margin:40px auto 0;text-align:center;
  font-size:var(--fs-body-sm);color:var(--c-text);line-height:1.9;letter-spacing:var(--ls-1);}

/* ============================================================
   I.D.メソッド図：ボックス型（2026-07-28 クライアント指示）
   ・house-bioclimatic.html「I.D.メソッドの中での位置づけ」の枠囲み型（.relmap）を踏襲
   ・LIFE ID／BCID＝白背景・クリック可（ボックス全体が<a>）／設計へ翻訳する＝グレー背景・非リンク
   ・深掘りボタン（.btn--small）は廃止＝ボックス自体がリンク
   ・ホバー＝背景色変化＋周囲のボーダーが上→右→下→左の順に一周描かれる線走りアニメ
     （擬似要素4辺方式。SVG stroke-dashoffsetは非等倍スケールで線速がゆがむため不採用）
   ・prefers-reduced-motion: 線は走らせず静止（枠色のみ変化）
   ============================================================ */
.mel--box{
  position:relative;display:block;text-decoration:none;color:var(--c-text);
  border:1px solid var(--c-line);background:var(--c-bg);
  padding:28px 24px 30px;
  transition:background-color .35s ease,border-color .35s ease;
}
.mel--box .mel__no{margin-bottom:2px;}
.mel--box .mel__text{margin-top:10px;}
/* 見出しサイズ＝「設計へ翻訳する」と同一（SP 24px／PC 28px） */
.mel--box .mel__title,
.mtriad__translate .mel__title{font-size:var(--c1-fs-h3);}
/* 線走りアニメ用の4辺（::before/::after ×2要素） */
.mel__line{position:absolute;inset:0;pointer-events:none;}
.mel--box::before,.mel--box::after,
.mel__line::before,.mel__line::after{
  content:"";position:absolute;background:var(--c-text);
}
.mel--box::before{top:-1px;left:-1px;height:1px;width:0;}                 /* 上：左→右 */
.mel--box::after{top:-1px;right:-1px;width:1px;height:0;}                 /* 右：上→下 */
.mel__line::before{bottom:-1px;right:-1px;height:1px;width:0;}            /* 下：右→左 */
.mel__line::after{bottom:-1px;left:-1px;width:1px;height:0;}              /* 左：下→上 */
.mel--box:hover,.mel--box:focus-visible{background:var(--c-bg-sub);outline:none;}
.mel--box:hover::before,.mel--box:focus-visible::before{width:calc(100% + 2px);transition:width .22s linear 0s;}
.mel--box:hover::after,.mel--box:focus-visible::after{height:calc(100% + 2px);transition:height .22s linear .22s;}
.mel--box:hover .mel__line::before,.mel--box:focus-visible .mel__line::before{width:calc(100% + 2px);transition:width .22s linear .44s;}
.mel--box:hover .mel__line::after,.mel--box:focus-visible .mel__line::after{height:calc(100% + 2px);transition:height .22s linear .66s;}
/* ホバー解除時は一気に消す（逆走させない） */
.mel--box::before,.mel--box::after,.mel__line::before,.mel__line::after{transition:width .15s ease,height .15s ease;}
/* 「もっと見る」相当のヒント */
.mel__more{display:inline-block;margin-top:18px;font-size:var(--fs-caption);color:var(--c-text-sub);letter-spacing:var(--ls-1);}
/* 2026-07-29 追加指示3: リンクラベル末尾の矢印を全角＞に。
   2026-08-20（R08・ディレクター指摘）: ::after で付けていたため「＞」だけが次行へ落ちた
   （タブレットでBCID・スマホでLIFE ID＝1字落ち＝常にNG）。原因は「＞」直前の全角スペース
   （U+3000）が改行可能点であること＋::after の直前も改行可能点であること。
   対処＝**矢印を本文側に出し、「詳しく見る　＞」を .nowrap で一体にして送る**
   （house-bioclimatic.html の .relmap__more と同じ手当て・2026-08-19の前例に合わせた）。
   文言・見た目は不変（全角スペース＋＞のまま）。 */
.mel--box:hover .mel__more,.mel--box:focus-visible .mel__more{color:var(--c-text);}
/* [20261027i] ディレクター指示「BCID・LIFE ID の各ページにも概念図をボタン入りで統一」＝house.html（20261027e）の .mel__btn をそのまま移植。
   「現在ご覧のページ」の札（.mel--current）は従来どおり文字のまま。 */
.mel__btn{margin-top:24px;cursor:pointer;}
.mel--box:focus-visible .mel__btn{color:var(--btn-inv-fg);border-color:var(--btn-inv-border);}
.mel--box:focus-visible .mel__btn::before{transform:scale(1);opacity:1;}
.mel--box:focus-visible .mel__btn .btnroll__t{transform:translateY(-100%);}
@media(hover:hover) and (pointer:fine){
  .mel--box:hover .mel__btn{color:var(--btn-inv-fg);border-color:var(--btn-inv-border);}
  .mel--box:hover .mel__btn::before{transform:scale(1);opacity:1;}
  .mel--box:hover .mel__btn .btnroll__t{transform:translateY(-100%);}
  .mel--box:hover .mel__btn::after{animation:btn-bar .55s cubic-bezier(.4,0,.2,1);}
}
@media(prefers-reduced-motion:reduce){
  html:not(.wf-force-motion) .mel--box:hover .mel__btn::after{animation:none;}
  html:not(.wf-force-motion) .mel--box:hover .mel__btn .btnroll__t,
  html:not(.wf-force-motion) .mel--box:focus-visible .mel__btn .btnroll__t{transform:none;}
  html:not(.wf-force-motion) .mel--box:hover .mel__btn,
  html:not(.wf-force-motion) .mel--box:focus-visible .mel__btn{color:inherit;}
  html:not(.wf-force-motion) .mel--box:hover .mel__btn::before,
  html:not(.wf-force-motion) .mel--box:focus-visible .mel__btn::before{transform:scale(.85);opacity:0;}
}
/* 03 設計へ翻訳する＝グレー背景の枠囲み（非リンク） */
.mtriad__translate{border:1px solid var(--c-text);background:var(--c-bg-sub);padding:30px 24px 32px;}
@media(prefers-reduced-motion:reduce){
  html:not(.wf-force-motion) .mel--box::before,
  html:not(.wf-force-motion) .mel--box::after,
  html:not(.wf-force-motion) .mel__line::before,
  html:not(.wf-force-motion) .mel__line::after{display:none;}
  html:not(.wf-force-motion) .mel--box{transition:none;}
  html:not(.wf-force-motion) .mel--box:hover,
  html:not(.wf-force-motion) .mel--box:focus-visible{border-color:var(--c-text);}
}
/* 自ページ（BCID）のボックス＝リンクにしない現在地表示。枠を濃く・ホバー演出なし。 */
.mel--current{border-color:var(--c-text);}
.mel--current:hover{background:var(--c-bg);}
.mel--current::before,.mel--current::after{display:none;}
.mel--current .mel__more{color:var(--c-text-note);}
/* 位置づけセクションは .statement（中央揃え）の中にあるため、house と同じく 01/02 のボックス内は左揃えに戻す（03は中央のまま）。 */
.mtriad .mel--box{text-align:start;}
/* [20261015p] 本文の直後に図が来るため、旧 .relmap と同じく図の上に 64px（ディレクター指摘「翻訳されていきます。の下の余白が0」）。 */
.statement__body + .mtriad{margin-top:64px;}

/* 段落ち対策（QA house-bioclimatic-02）: 「詳しく見る　＞」の「＞」だけが次行へ落ちる。
   原因＝本文の禁則ではなく、「＞」の直前が**全角スペース（U+3000）で改行可能点**になっていたこと。
   対処＝「詳しく見る　＞」を .nowrap で一体にして送る。文言は不変。
   実測（768px）: 「…「LIFE ID」を詳しく見る／＞」→「…「LIFE ID」を／詳しく見る　＞」。
   ※「見る　＞」だけを括る案もあるが「…を詳しく／見る　＞」と語が割れるため、
     「詳しく見る　＞」までを一体にした。

   併せて本文要素全般に text-wrap-style:pretty（最終行のみ調整・他行は素と同一）。
   .section__title は対象外＝段落ちのない見出しまで「、」で改行して1行目が短くなるため
   （house.html で実測・2026-08-19の方針）。 */
.nowrap{white-space:nowrap;}
/* [20261029b] SP（767px以下）では pretty を使わない＝iPhone の Safari は段落全体の行をそろえようとして全行が短くなり、文章が左に寄って見えるため（ディレクター選択＝案B）。 */
@media(min-width:768px){
.section p,.section li,.section dd,.section dt,
.section h3,.section h4,.section figcaption{text-wrap-style:pretty;}
}