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

/* [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);}
@media (min-width:768px) and (max-width:1199px){
  .card-grid--4col{grid-template-columns:repeat(2,1fr);}
}

/* ============================================================================
   [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-life-id-design固有（姿勢リスト／対応表／質問例／3点セット事例） */
/* [20261019h] ディレクター「罫線で区切っただけの一覧は手抜き感がある」→ A案＝番号付きの2〜3列（罫線なし）。
   SP＝1列／768px以上＝2列。番号は CSS の連番（01〜）で、項目が1つだけのときは出さない。 */
.attitude-list{list-style:none;max-width:var(--c1-measure);margin:64px auto 0;text-align:left;display:grid;gap:40px;counter-reset:al;}
.attitude-list > .attitude{counter-increment:al;}
.attitude-list > .attitude::before{content:counter(al,decimal-leading-zero);display:block;margin-bottom:12px;font-family:var(--ff-en);font-weight:500;font-size:20px;line-height:1;letter-spacing:.12em;color:var(--c-text-note);}
.attitude-list > .attitude:only-child::before{content:none;}
@media(min-width:768px){
  .attitude-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 56px;}
  .attitude-list:has(> :only-child){grid-template-columns:1fr;max-width:var(--c1-measure-narrow);}
}
/* このページは本文が狭い枠（720px）の中にあるため、3列にはしない（2列のまま）。 */
/* [20260821ar] ディレクター指摘「小見出しのフォントが大きい」。
   house.html「家づくりで大切にしていること」の小見出し（.feature--illust .feature__title）と
   同じ級数に揃える。
   旧＝--c1-fs-h3 ＝ clamp(17px,1.5vw,22px) → 390px:17px / 768〜1024px:17px / 1440px:21.6px
   新＝--fs-h3   ＝ SP16px / 768以上18px（house.html と同一トークン）
   ＝1440pxで 21.6→18px（-17%）、390pxで 17→16px。ウェイト500・字間 --ls-2 は元から同じ。 */
.attitude__title{font-weight:500;font-size:var(--fs-h3);letter-spacing:var(--ls-2);margin-bottom:6px;}
.attitude__text{font-size:var(--fs-body);color:var(--c-text-sub);line-height:var(--lh-body);}

/* 対応表（暮らしの読み取り→デザイン）: 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;}
}

/* I.D.メソッド関係図（人＋場所→翻訳）: house.html#method・bioclimaticと共通の静的図 */
/* [20261015p] house-bioclimatic.html（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);}
}
/* 自ページ（LIFE ID）のボックス＝リンクにしない現在地表示。枠を濃く・ホバー演出なし。 */
.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;}

/* 質問例リスト */
.question-list{list-style:none;max-width:var(--c1-measure-narrow);margin:64px auto;border:1px solid var(--c-line);padding:20px 24px;background:var(--c-bg);text-align:left;}
.question-list__item{position:relative;padding:10px 0 10px 20px;font-size:var(--fs-body);}
.question-list__item::before{content:"";position:absolute;left:2px;top:1.1em;width:8px;height:8px;border:1px solid var(--c-text);border-radius:50%;}

/* 事例カードの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;}

/* ============================================================
   閲覧ゲーティング → 完全非表示化（2026-07-29 AF-1・ディレクター確定）
   「半分表示（ティーザー）にする必要はない・完全非表示でよい」との確定を受け、
   対象2セクション（暮らしの読み取りが、デザインに変わる[対応表]／たとえば、こんなことをお聞きします）は
   WEBでは完全非表示（display:none）とし、内容は BOOK02（コンセプトブック・LIFE ID詳細）へ移行＝冊子側が正。
   その位置には資料DL誘導CTA（.gate-cta）のみ残す。bioclimatic側（→BOOK03）と対。
   ★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-08-10j: 中判（.c1-figure--mid）に実写真を入れる際の必須指定。
   <img width height> は presentational hint として height:1012px を立てるため、
   c1-theme.css の aspect-ratio:16/9 が無効化され、720×1012 の縦長箱になる（実測）。
   c1-theme.css 側は .c1-figure--full > img にのみ height:auto があり --mid には無い。
   共有CSSは本タスクの編集対象外のためページ内で暫定対処。
   → c1-theme.css §.c1-figure--mid への height:auto 追加をPL/PMへ申し送り。 */
.c1-figure--mid > img{height:auto;}

/* 段落ち対策ユーティリティ（基準=docs/22 §9 R08・2026-08-20）。
   本文中の <span class="nowrap"> で文節を一体で送り、最終行3字以下を防ぐ。
   [20261015t] 移植時に `</style><style>` の残骸だけが入り、定義本体が欠けていた（テーマ側で .nowrap が効いていなかった）＝design版どおり補完。 */
.nowrap{white-space:nowrap;}

/* [20261019o] 「対話で、大切にしていること」＝A案「吹き出し4つ → デザインへ」（ディレクター選択）。
   聞く姿勢の4つ＝白い吹き出し（下に小さな尾。左列は左寄り・右列は右寄り）／5つ目「デザインに翻訳する」＝濃い枠で締め、上に下向きの矢印。
   番号は出さない（W-5 例外＝番号による確約表現を避ける。20261019h で付いた番号もここで外す）。
   SP＝1列／768px 以上＝吹き出し 2×2 ＋ 下に横長の1つ。 */
.attitude-list--talk{display:grid !important;grid-template-columns:1fr;gap:30px;max-width:860px !important;margin-left:auto;margin-right:auto;}   /* [20261019u] 幅＝「I.D.メソッドの中での位置づけ」の図（.mtriad 860px）に合わせる（ディレクター指示）。セクションの枠は narrow→通常に */
.attitude-list--talk > .attitude::before{content:none !important;}
.attitude-list--talk > .attitude{position:relative;margin:0;}
.attitude-list--talk > .attitude:not(:last-child){padding:24px 26px 22px;background-color:var(--c-bg);border:1px solid var(--c-text);}   /* background の一括指定は線を描く動き（site-motion）の線を消すため background-color のみ（20261019p） */
.attitude-list--talk > .attitude:not(:last-child)::after{content:"";position:absolute;bottom:-8px;left:34px;width:14px;height:14px;background:var(--c-bg);border-right:1px solid var(--c-text);border-bottom:1px solid var(--c-text);transform:rotate(45deg);}
.attitude-list--talk > .attitude:last-child{margin-top:44px;padding:30px 28px;background-color:var(--c-text);text-align:center;}
.attitude-list--talk > .attitude:last-child .attitude__title{color:#fff;}
.attitude-list--talk > .attitude:last-child .attitude__text{color:rgba(255,255,255,.82);}
.attitude-list--talk > .attitude:last-child::before{content:"" !important;position:absolute;top:-30px;left:calc(50% - 11px);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:14px solid var(--c-text);}   /* [20261019t] 矢印＝塗りの三角（ディレクター選択・下の濃い枠と同じ色） */
@media(min-width:768px){
  .attitude-list--talk{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 28px;}
  .attitude-list--talk > .attitude:nth-child(even):not(:last-child)::after{left:auto;right:34px;transform:rotate(45deg);}
  .attitude-list--talk > .attitude:last-child{grid-column:1 / -1;}
}

/* [20261019q] ディレクター「線にアニメーションはいらない。会話のように、ぽんぽんと上がってくる動きを」。
   一覧に data-sm-skip（線を引く動きの対象外＝枠はふつうの線で最初から表示）＋ .reveal（画面に入ったら .is-in）。
   吹き出しが 1→2→3→4 の順に、下から少し跳ねるように現れ（尾の側を起点に拡大）、最後に「デザインに翻訳する」が矢印と一緒に出る。
   動きを減らす設定の人には共通リビール自体が無効（.wf-reveal が付かない）＝最初から表示。 */
@keyframes lifeTalkPop{0%{opacity:0;transform:translateY(12px);}100%{opacity:1;transform:none;}}   /* [20261019r] 「ポップすぎる」→ 跳ね・拡大をやめ、静かに浮かび上がる形に */
@keyframes lifeTalkUp{0%{opacity:0;transform:translateY(12px);}100%{opacity:1;transform:none;}}
.wf-reveal .attitude-list--talk.reveal{opacity:1;transform:none;transition:none;}
.wf-reveal .attitude-list--talk.reveal > .attitude{opacity:0;}
.attitude-list--talk > .attitude:nth-child(odd):not(:last-child){transform-origin:30px 100%;}
.attitude-list--talk > .attitude:nth-child(even):not(:last-child){transform-origin:calc(100% - 30px) 100%;}
.wf-reveal .attitude-list--talk.reveal.is-in > .attitude:not(:last-child){animation:lifeTalkPop .9s cubic-bezier(.25,.6,.3,1) both;}
.wf-reveal .attitude-list--talk.reveal.is-in > .attitude:nth-child(1){animation-delay:.1s;}
.wf-reveal .attitude-list--talk.reveal.is-in > .attitude:nth-child(2){animation-delay:.45s;}
.wf-reveal .attitude-list--talk.reveal.is-in > .attitude:nth-child(3){animation-delay:.8s;}
.wf-reveal .attitude-list--talk.reveal.is-in > .attitude:nth-child(4){animation-delay:1.15s;}
.wf-reveal .attitude-list--talk.reveal.is-in > .attitude:last-child{animation:lifeTalkUp 1s cubic-bezier(.25,.6,.3,1) 1.7s both;}
/* [20261019y] ディレクター「フォントを『人を読む、土地を読む…』『暮らし方や価値観から…』を参考に」→「英字は付けず、見出しと説明の強弱だけ」。
   見出し＝大きく普通の太さ（--c1-fs-h3・400＝.mel__title と同じ）／説明＝小さめのグレー（--fs-caption）。不動産（20261019w）と同じ組み方。 */
.attitude-list--talk .attitude .attitude__title{font-size:var(--c1-fs-h3);font-weight:400;letter-spacing:.05em;line-height:1.5;margin-bottom:10px;}
.attitude-list--talk .attitude .attitude__text{font-size:var(--fs-caption);line-height:1.9;}