/* [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固有（ディレクター指示 2026-07-20） */
/* 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＝白背景・クリック可（ボックス全体が）／設計へ翻訳する＝グレー背景・非リンク
・深掘りボタン（.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);}
/* [20261027e] ディレクター指示（2026-10-27）: 01/02 のカードが「クリックできる」と分かりにくい → リンク部分を
既存ボタン（.btn＝枠＋右端の横棒＋ホバーで四角形が満ちる）の形に。カード全体が のため、ボタンは で
（ の入れ子を避ける）。ホバー／フォーカスはカード全体を起点に、.btn:hover と同じ反転・文字ロール・横棒スライドを再現する。
※罫線が一周するアニメ（.mel--box::before/::after・.mel__line）は変更しない。
※文言は「「LIFE ID」を詳しく見る」「「BCID」を詳しく見る」（前の本文と重複する「暮らしや価値観を読み解く」「敷地・気候を読み解く」は削除）。
※.mel__more は house.html では未使用になった（bioclimatic／life-id-design が共有名で使用）。 */
.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);}
}
/* 家づくりの進め方：数字・丸を大きくアクセント＋項目名右に補足テキスト */
.step-accent{list-style:none;counter-reset:step;max-width:var(--c1-measure);margin:var(--sp-3) auto 0;}
/* 2026-07-28（AC C-4 ディレクター指示）: 行間の罫線の前後マージンを拡大。
実測 padding 上下 16px → 24px（+50%）。丸数字の top も同量（14→22px）ずらして位置関係を保持。 */
.step-accent__item{counter-increment:step;position:relative;
padding:24px 0 24px 62px;border-bottom:1px solid var(--c-line);
display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px;}
.step-accent__item::before{content:counter(step);position:absolute;left:0;top:22px;
width:44px;height:44px;border:1px solid var(--c-text);border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:var(--ff-en);font-weight:var(--fw-thin);font-size:var(--fs-h3);color:var(--c-text);}
.step-accent__name{font-size:var(--fs-body);letter-spacing:var(--ls-2);}
.step-accent__note{font-size:var(--fs-caption);color:var(--c-text-sub);line-height:1.6;}
@media(min-width:768px){
.step-accent__item{align-items:center;flex-wrap:nowrap;gap:24px;padding-left:72px;}
.step-accent__name{flex:none;min-width:15em;}
.step-accent__note{flex:1;}
}
/* .evt-band 系（見学会カード横スクロール帯）は該当セクション撤去に伴い削除 2026-07-28 */
/* ============================================================
C-1（2026-07-28 AC ディレクター指示）
「家づくりで大切にしていること」6項目＝縁無し（ボーダーなし）のイラストカード
イラスト＝専用生成の taisetsu-01〜06.webp（2026-07-29 ディレクター支給・一式入替え。旧fuan共用は解消）
============================================================ */
.feature-list--illust{gap:56px 32px;margin-top:8px;}
.feature--illust{border:0;background:none;padding:0;text-align:center;}
.feature__illust{width:min(250px,70%);margin:0 auto 14px;} /* 2026-07-29 ディレクター指示: taisetsu-01〜06一式入替え・PC最大250px */
.feature__illust img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;}
.feature--illust .feature__title{font-size:var(--fs-h3);letter-spacing:var(--ls-2);margin-bottom:8px;}
.feature--illust .feature__text{
font-size:var(--fs-body);color:var(--c-text-sub);line-height:1.9; /* C-1: L3=15pxへ統合 */
text-align:left;max-width:22em;margin-inline:auto;}
@media(max-width:767px){
.feature-list--illust{gap:40px;}
.feature__illust{width:128px;}
.feature--illust .feature__text{max-width:100%;}
}
/* [20260821bu] ディレクター判断 P76-②（2026-08-24）＝「18px固定にして clamp だけ解消」。
意図した級数は当初から18px（下のコメント参照）だったが、--c1-fs-lead は
clamp(15px,1.35vw,19px) のため 1280px で17.3px／1440px で19px と幅により揺れていた。
--fs-h3（SP16 / 768以上18px の固定トークン）へ置換。新規級数は作っていない。 */
/* C-2（2026-07-28 AC）: I.D.メソッドの結び文を h3 化＋18px（太字は使わない） */
.mtriad__caption{font-size:var(--fs-h3);font-weight:var(--fw-normal);}
/* C-5（2026-07-28 AC）: 「デザインも、性能も、その先の安心も」の宣言2段落を h3・18px で強調
（太字禁止＝サイズと余白のみで階層をつける） */
/* [20260821bu] ディレクター判断 P76-②（2026-08-24）＝「18px固定にして clamp だけ解消」。
意図した級数は当初から18px（下のコメント参照）だったが、--c1-fs-lead は
clamp(15px,1.35vw,19px) のため 1280px で17.3px／1440px で19px と幅により揺れていた。
--fs-h3（SP16 / 768以上18px の固定トークン）へ置換。新規級数は作っていない。 */
.statement__accent{
font-size:var(--fs-h3);font-weight:var(--fw-normal);
line-height:1.95;letter-spacing:var(--ls-2);
margin-bottom:2.2em;
}
.statement__body .statement__accent:last-of-type{margin-bottom:2.2em;}
/* [20260821ce] ディレクター判断 1-A（2026-08-24）＝「SPも18pxにする」。
20260821bu で --c1-fs-lead(clamp) → --fs-h3 にした結果、--fs-h3 は SP16/768以上18px のため
**SPだけ16px**となり、本文15pxとの差が1pxしか無く強調として機能していなかった（実測390px）。
→ SPでもPCと同じ18pxに揃える。
※18px は L2（--fs-h3）のPC値そのもので、**新しい級数を作ってはいない**（§10-2「中間サイズを新設しない」）。
※副作用として、SPでは L2見出し(16px) より強調文(18px) の方が大きくなる。
PCでは 強調=L2見出し=18px で同値なので、SPだけ関係が変わる点はディレクターへ報告済み。 */
@media(max-width:767px){
.mtriad__caption,
.statement__accent{font-size:18px;}
}
/* ヒーロー確定形（.page-hero--overlay）は assets/design-system.css へ共通化（2026-07-27） */
/* P23（2026-07-29）のタイトル遅延フェードは 2026-10-16 ディレクター指示で撤去＝他ページと同じ動きに統一（退避=_backup 20261016ht） */
/* 段落ち対策（QA house-05）: 最終行に1〜2字だけ落ちる。文言は不変。
方針（2026-08-19ディレクター指示）＝**段落ちの箇所だけを直す**。
それ以外の行は従来どおり幅いっぱいまで文字を詰める。
- `word-break:auto-phrase`／`text-wrap:balance` は不使用（全行の改行位置が動くため）。
- 採用＝`text-wrap-style:pretty`。最終行だけを調整し、他行は素と同一に保つ。
実測（PC1280・素→pretty）:
house-05 「…寄り添う保証とサポー／ト。」 → 解消
併せて .feature__text「…住み心地の土台で／す。」 → 解消（QA未指摘）
.mtriad__caption「…設計へ翻訳す／る。」 → 解消（QA未指摘）
.step-accent__item「…要所ごとに検査しま／す。」 → 解消（QA未指摘）
4件すべて pretty のみで解消したため .nowrap の追加は不要。
適用範囲は本文要素全般。
で複数文に分かれた段落では「要素の最終行」ではなく
各文の末尾に落ちるため、クラス単位の指定では取りこぼす。
※ .feature__* の定義元は共有CSS（design-system.css・281ページ参照）。ここでの指定は
当ページ内に限った回避策で、共有CSSの改修は ?v 一括バンプを伴う別ラウンド。
※ **.section__title は対象外**（2026-08-19）。SP390で pretty を当てると、段落ちのない見出しまで
「、」で改行して1行目が短くなった（実測: 「人を読む、土地を読む、設計へ／翻訳する」→
「人を読む、土地を読む、／設計へ翻訳する」で1行目が46px短縮、「デザインも、性能も、その先の／
安心も」も60px短縮）。「段落ち以外は幅いっぱいに詰める」方針に反するため除外し、
実際に2字落ちしていた「家づくりで大切にしている／こと」だけ本文側の .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;}
}
/* 段落ちの語だけを一体で送るためのユーティリティ。適用箇所は本文中の を参照。 */
.nowrap{white-space:nowrap;}
/* 宣言コピー＝SPでも中央揃え（2026-08-20ディレクター指示・about.html と統一）。
共有CSS design-system.css §12 は SP で .statement__copy / .statement を左揃えに固定していた
（2026-07-20「リード文はSP左揃え」指示）。768px以上は中央なのでSPだけ左に寄っていた。
→ 宣言コピーのみ中央に揃える（本文 .statement__body は従来どおりSP左揃えのまま）。
共有CSSは無改変＝?vバンプなし。 */
@media(max-width:767px){
.statement__copy{text-align:center;}
}
/* [20261029d] 冒頭キャッチ「そこにしかない住まいをつくる。」はSP見出し24pxで約379pxの幅が要る（本文の枠＝画面幅の94%）。
入る幅（412px以上＝iPhone Plus／Pro Max 等）は1行、それ未満（iPhone 標準・SE 等）。403px前後は余白が1px未満で端末の文字幅の差で割れるため余裕をとっただけ「住まいを／つくる。」で改行する
（ディレクター指示「できそうだったら2行に」2026-10-29）。 */
.br-narrow{display:none;}
@media(max-width:411px){ .br-narrow{display:inline;} }