/* =========================================================================== SP面（スマートフォン） --------------------------------------------------------------------------- このファイルは **SPワーカーだけが書く**。PC面は css/sections.css が正本で、 こちらからは触らない。読み込み順は sections.css の「後」なので、 同じ詳細度なら後勝ちで上書きできる。 【約束1】すべてのルールを SP帯の媒体クエリの中に書く。 媒体クエリの外に1行でも書くと PC が壊れる。ここが唯一絶対の禁則。 【約束2】Figma の SP フレームは 750px 幅で描かれている。CSS px はその 1/2。 design context の px 値は必ず 2 で割ってから書く。 座標・サイズ・フォントサイズ・行間・letter-spacing すべてが対象。 【約束3】DOM は PC と共有する。構造を作り替えず CSS で組み替える。 SP にしか無いブロック（SP08-div）だけ index.html にマーカーを用意してある。 そこに入れたものは **PC帯で display:none** にすること。 【帯の決め方】AGENTS.md の必須ルールに従う。 PC レイアウトは器（service-site方式）なので 768px まで耐える。 1248px までは余白が縮み、そこからは器のほうが縮む。 → SP帯は max-width: 767px（2026-08-25 オーナー指示で 1279 → 767 に変更）。 768〜1279px の中間帯の調整はこのファイル末尾の `@media (min-width: 768px) and (max-width: 1279px)` ブロックに置く。 =========================================================================== */ @media (max-width: 767px) { /* --- ページの器 -------------------------------------------------------- */ /* SP は 375px 基準の設計を**幅いっぱいに比例拡大**する（D22 オーナー判断 2026-08-25。 旧: 375px を中央に置き左右は余白 → 「余白が出ないよう幅いっぱいに」の指示で変更）。 - 倍率は zoom で掛ける。375px ちょうどでは 1 になるので **375px の検証済み幾何は 1px も動かない**（min()/max() と同じ「基準幅では元の値を返す」担保） - **375px 未満も比例縮小する（D23 2026-08-26。当初 D22 は max(1, …) で 1 に 頭打ちだったが、頭打ちにすると body(375px固定) がビューポートより広くなり 横スクロールが発生する。root の overflow-x: clip はビューポートへ hidden として 伝播するため、スクロールバーは消えてもスワイプ/scrollTo では動いてしまう — scrollX=19 を実測。body の clip が守るのは中身のはみ出しだけで、 body 自身のはみ出しは守れない）。縮小の下限は実用上 320/375 = 0.853 （文字 12px → 10.2px）で、AGENTS.md が禁止した PC帯の大縮小とは規模が違う - `100vw / 375px` にしないのは、100vw が**スクロールバーを含む**ため実測より 4〜5%（Windows で約17px）大きくなり右端が切れるから。html を inline-size の クエリコンテナにすると 100cqw = html のコンテンツボックス幅 = スクロールバーを 除いた実表示幅になる - `tan(atan2(長さ, 長さ))` は長さ同士の比を無次元数に落とす標準の書き方 （calc の長さ÷長さ除算より対応ブラウザが広い。Chrome 111+ / Safari 15.4+ / FF 108+） base.css の `body { min-width: var(--w-wide) }` は撤去済み（D21）だが、 min-width: 0 は将来の再発に備えて残す。 */ html { container-type: inline-size; } body { min-width: 0; width: 375px; margin-inline: auto; zoom: tan(atan2(100cqw, 375px)); } /* **PC 側の `min-height` を打ち消す。** PC を器で組み直した際、狭い帯で中身が伸びても切らないよう セクションの `height` を `min-height` に変えた（sections.css）。 ところが `min-height` は `height` に勝つので、SP 側で `height: 530.5px` と 書いても PC の `min-height: 780px` が残っていると 780px になる （実測 2026-08-25: #mv がSPで250px高くなり、以降の全セクションがずれた）。 セクション単位で書き忘れると気づきにくいので、SP帯の先頭で一括して外す。 **`section, header, footer` では効かない。** PC 側は `#mv { min-height }` の ID 指定なので、要素セレクタ（詳細度 0,0,1）では負ける。ID を並べて同格にする。 */ header, footer, #mv, #lead, #cta1, #section1, #section2, #section3, #section4, #section5, #section6, #section7, #flow, #faq, #form, #cta-bar { min-height: 0; } /* --- SP専用ブロック ---------------------------------------------------- */ /* #sp-cta2 は SP にしか無い CTA帯（Figma 361:325 / 690x337 device px）。 PC帯では下の :not() 側で display:none にしてある。 */ /* 以降、セクションごとのスタイルを SPワーカーが追記する。 追記の順序は SECTIONS-SP.md の並び（y昇順）に合わせること。 */ /* ========================================================= * SP01-header（node 250:365 / 750x100 device = CSS 375x50） * PC と同じ DOM を CSS で組み替える。 * **以下の px はすべて design context の device px を 1/2 にした値。** * * 背景(--bg-header)・下罫線(1px --c-border)・blur(4px) は PC と同値 * （Figma SP は backdrop-blur-[8px] / border-b-2 の device 値で、1/2 すると PC と一致する）。 * よってここで上書きするのは寸法と配置だけ。 * * 【高さ】Figma のフレーム高は 100device = 50px だが **49.5px を置く**。 * SP_A では header(y0 h100) の下端 100device に対し main(250:190) の y が 99device で、 * 1device px 食い込んでいる。DOM は縦積みなので隙間を負にできず、 * どちらかに 1device px の誤差が出る。 * - 49.5px … header 自身の高さが 99/100device（-1）／#mv の開始は 99device で一致 * - 50px … 高さは一致するが #mv 以降すべてが +1device 下にずれる * **SP02-main が「直前の #mv の底は 49.5 + 530.5」で送り出しているので前者に合わせる。** * stack-check の許容は 2device px なのでどちらでも通るが、後続16セクションの * 絶対位置が Figma と揃う方を採る。 * ========================================================= */ header { /* PC 側は器（flex + 左右パディング）で組んでいる。SP は実座標の絶対配置なので * 器の指定を全部戻す。**戻し忘れると padding の分だけ中身が右へずれる。** */ display: block; padding-left: 0; padding-right: 0; height: 49.5px; } /* logo（node 361:150 / 378.75x65 device）。 PC の left:364px / margin-left:calc((100% - 1920px)/2)（中央基準トリミング）は 1920px 設計の値なので SP では両方とも外す。 top は Figma の calc(50%+1.5px) を **実値 25.75px** で置く。 header 自身の高さを 49.5px にした都合で 50% が 0.25px ずれるため、 割合ではなくフレーム基準の実座標を写す。 */ header .logo { /* PC 側は器の flex アイテム（position:relative）にしたので、SP では絶対配置に戻す。 * **transform も明示する。** 以前は PC 側の translateY(-50%) が効いている前提で * top を書いていたため、PC を器に変えた時点で 16.25px 下にずれた（実測）。 */ position: absolute; transform: translateY(-50%); left: 7px; /* 14 / 2 */ top: 25.75px; /* (100/2 + 1.5) / 2 */ width: 189.375px; /* 378.75 / 2 */ height: 32.5px; /* 65 / 2 */ margin-left: 0; } /* ロゴ画像（枠 node 361:150 / mark は node 361:153）。image/logo.svg は Wマーク＋文字が一体の全体ロゴ(303x52)。 **2026-08-27 オーナー指示で文字を画像へ一本化した**ので、PC と同じく clip-path は外し、 ロゴ全体を見せる。SP のロゴは PC のロゴをちょうど 0.625倍したもの （189.375/303 = 0.625。文字の left 47→29.375 / 50→31.25 も同じ倍率で一致していた）ので、 枠と同じ 0.625倍の寸法で置けば全体が過不足なく収まる。 svg なので縮小しても文字は潰れない（潰れたのは Wマーク枠へ全体ロゴを詰めた旧実装）。 */ header .logo__mark { width: 189.375px; /* 303 * 0.625 */ height: 32.5px; /* 52 * 0.625 */ } /* CTAボタン（node 361:158 "a.scp0"）。DOM は PC と共有なので .scp1 .scp1--sm のまま使い、 寸法だけ SP に寄せる。グラデーション(#155c96→#2571b0)・白文字・Sans は .scp1 の既定と同値。 left は Figma が calc(50%+220.45px) の自己センタリングなので式のまま 1/2 にする。 **高さは Figma が hug（h 指定なし）なので padding で作る。** SP08-div / SP16-div のように固定高が与えられている場合とは逆で、 .scp1--sm の min-height:47px（PC 1920px 設計）を外さないと 32.85px に収まらない。 padding 14.1x2 + leading 37.506 = 65.7device = 32.85px が Figma の実高。 */ header .scp1 { /* PC 側は器の flex アイテムにしたので、SP では絶対配置に戻す。 * **transform も明示する**（PC 側の translateX(-50%) に依存していた）。 * align-self / margin-top も PC の指定が残らないよう打ち消す。 */ position: absolute; transform: translateX(-50%); margin-top: 0; left: calc(50% + 110.225px); /* 220.45 / 2 */ top: 8.33px; /* 16.66 / 2 */ gap: 7.05px; /* 14.1 / 2 */ min-height: 0; padding: 7.05px 15.51px; /* py 14.1 / px 31.02 の 1/2 */ border-radius: 2.115px; /* 4.23 / 2。--r-btn(3px) は PC 1920px 設計の値 */ font-size: var(--fs-12); /* 24 / 2 */ font-weight: var(--fw-bold); line-height: 18.753px; /* 37.506 / 2 */ letter-spacing: 0.1128px; /* 0.2256 / 2 */ white-space: nowrap; } /* メールアイコン（node 361:159 / 33.84x33.84 device）。共通部品の既定は PC の 24x24 */ header .scp1 .icon-mail { width: 16.92px; /* 33.84 / 2 */ height: 16.92px; } /* ========================================================= * SP02-main（node 250:190 / 750x1061 device = CSS 375x530.5） * PC の #mv と同じ DOM を CSS で組み替える。 * **以下の px はすべて design context の device px を 1/2 にした値。** * 背景色(--bg-subtle)・下罫線(1px --c-border)・書体(serif/semibold)・ * 文字色は PC と同値なので sections.css の指定をそのまま使う。 * ========================================================= */ #mv { height: 530.5px; /* 1061 / 2。border-bottom 込み（box-sizing: border-box） */ } /* 背景写真（node 381:583 "sp_main2 1" / 750x1060 = CSS 375x530）。 実体は image/sp_imageA.jpg で、寸法が完全一致する（SECTIONS-SP.md「アセット」）。 .deco-full の中央基準トリミングは PC 1920px 用の計算なので SP では 0 に戻す。 */ #mv .mv__bg { width: 375px; height: 530px; margin-left: 0; } #mv .mv__bg picture, #mv .mv__bg img { width: 100%; height: 100%; } /* キャッチコピー（node 250:192 / 30→15px, leading 1.6, tracking 0.92→0.46） */ #mv .mv__catch { /* PC 側は器（フロー）で組んでいるので、SP では絶対配置に戻す。 * **margin-top も打ち消す**（PC のフロー用マージンが残ると下にずれる）。 */ position: absolute; margin-top: 0; /* SP の top は PC の translateY(-50%) 前提で書かれている。明示しないと下へずれる */ transform: translateY(-50%); left: 25.5px; /* 51 / 2 */ top: 38.75px; /* 77.5 / 2 */ width: 334.5px; /* (750 - 51 - 30) / 2 */ margin-left: 0; } #mv .mv__catch p { font-size: var(--fs-15); line-height: 24px; /* 15 * 1.6 */ letter-spacing: 0.46px; } /* 見出し（node 250:193 / 50→25px, leading 1.4→35px, tracking 0.92→0.46）。 SP だけ Noto Serif JP Black(900)。PC の SemiBold(600) より重い階調で、 3つの span はすべて同サイズ（PC は 54/50/46 と差を付けている）。 */ #mv .mv__heading { /* PC 側は器（フロー）で組んでいるので、SP では絶対配置に戻す。 * **margin-top も打ち消す**（PC のフロー用マージンが残ると下にずれる）。 */ position: absolute; margin-top: 0; /* SP の top は PC の translateY(-50%) 前提で書かれている。明示しないと下へずれる */ transform: translateY(-50%); left: 25px; /* 50 / 2 */ top: 116.25px; /* 232.5 / 2 */ width: 338.5px; /* (750 - 50 - 23) / 2 */ margin-left: 0; /* **箱側にも置く。** check-attrs はテキスト単位（

を子に持つ要素）の computed style を見るので、span にだけ書くと箱が body既定の 18px/normal のまま 照合され、font-size 不一致＋改行位置の偽陽性（line-height が normal だと 自然折り返し判定が NaN に落ちる）になる（実測 2026-08-25）。 */ font-size: var(--fs-25); line-height: 35px; font-weight: var(--fw-black); letter-spacing: 0.46px; } #mv .mv__heading-brand, #mv .mv__heading-y, #mv .mv__heading-sub { font-size: var(--fs-25); line-height: 35px; /* 25 * 1.4 */ } /* 不安リスト（ul node 361:164 / li 361:165,170,175,180）。 **PC のような重なり配置ではない。** SP の li は flex column で縦に積まれ、 Figma の li 高さ(88.242 / 89.467 / 88.242 / 88.242 device)がそのまま送りになる。 枠線は Figma 1.226 device = 0.613 CSS だが、サブピクセル罫線は端末で消えることが あるので 1px にした（上下で 0.8px の差。ul 全体の高さに対して無視できる）。 */ #mv .mv__list { /* PC 側は器（フロー）で組んでいるので、SP では絶対配置に戻す。 * **margin-top も打ち消す**（PC のフロー用マージンが残ると下にずれる）。 */ position: absolute; margin-top: 0; left: 15px; /* 30 / 2 */ top: 186px; /* 372 / 2 */ width: 345px; /* (750 - 30 - 30) / 2 */ margin-left: 0; padding: 5px 0.61px 10px; /* pt10 / px1.226 / pb20（device）を 1/2 */ } /* アイコン中心(21.45) とテキスト中心(22.14) が li 中心(22.06) にほぼ一致するので align-items: center で置く（Figma との差は 0.7px 以内）。 PC 側の min-height:0 / height:46.5px / padding:20px 23px 0 を上書きする。 */ #mv .mv__list > li { height: 44.12px; /* 88.242 / 2 */ align-items: center; gap: 12.42px; /* (53.77 - 3.19 - 25.737) / 2 */ padding: 0 0 0 1.6px; /* アイコン左 3.19 / 2 */ font-size: var(--fs-sm); /* 28 / 2 */ line-height: 19.79px; /* 39.586 / 2 */ letter-spacing: 0.1px; /* 0.1961 / 2 */ } #mv .mv__list > li:nth-child(2) { height: 44.73px; /* 89.467 / 2。この li だけ Figma が 0.6px 高い */ } /* icon_check（node 361:166 ほか / 25.737x24.512 device）。 PC の 21x20 + margin-top:5px を上書きする（SP は中央揃えなので下げない）。 */ #mv .mv__list .check { width: 12.87px; height: 12.26px; margin-top: 0; } /* PC は node 309:255 が1行想定で nowrap。SP は br.br-sp で「、」の後に折る。 */ #mv .mv__list > li:nth-child(2) p { white-space: normal; } /* リード文（node 361:186 / 36→18px, leading 50→25px, tracking 2→1px, Bold）。 SP では PC の #lead(S03-lead) に相当する文が main の中にあり、改行位置も 3行で異なる（SECTIONS-SP.md「PC との対応で注意が要る3点」#1）。 #lead の DOM は他セクションのマーカー内なので触らず、SP帯で隠して #mv 内の SP専用ブロックに差し替える。**要素は消していない**ので PC は無傷。 */ #lead { display: none; } #mv .mv__lead { position: absolute; left: 16.5px; /* 33 / 2 */ top: 434.5px; /* 869 / 2 */ transform: translateY(-50%); width: 358px; /* 716 / 2 */ z-index: var(--z-body); /* 背景写真(--z-deco)より前に出す */ font-family: var(--ff-serif); font-weight: var(--fw-bold); font-size: var(--fs-body); /* 36 / 2 */ line-height: 25px; /* 50 / 2 */ letter-spacing: 1px; /* 2 / 2 */ color: var(--c-brand); } /* ========================================================= * SP03-cta（node 361:188 / 690x162 device = CSS 345x81） * 共通部品 .cta をそのまま使い、寸法だけ SP に寄せる。 * **以下の px はすべて design context の device px を 1/2 にした値。** * * PC は「タイトル / 補足 / 矢印」を横一列(gap 20px)に並べるが、 * SP は Figma が justify-between で、左に「タイトル＋補足の縦組(gap 30device)」、 * 右端に矢印(60device)を置く。**DOM は PC と共有なので作り替えられない**ため、 * 同じ3要素を grid で 2列x2行に組み替える（左列に2行、右列に矢印が2行ぶち抜き）。 * ========================================================= */ /* y=1079device=539.5 に対し、直前の #mv の底は 49.5 + 530.5 = 580。 SP では #lead が display:none（SP02-main で入替済み）なので、#cta1 は #mv の 直後に来る。差分 -40.5px を margin-top で戻す。PC の margin-top:61px と margin-left:calc(50% - 599px)（1920px設計）は、ここで両方とも上書きする。 position:relative / z-index:--z-body は PC 側の指定をそのまま使う （SP でも cta1 は #mv の底に 40.5px 食い込むので、背景写真より前に出す必要がある）。 */ #cta1 { display: grid; grid-template-columns: 1fr auto; grid-auto-rows: min-content; row-gap: 15px; /* 30 / 2 */ column-gap: 0; align-content: start; width: 345px; /* 690 / 2。box-sizing:border-box なので枠線3pxを含む */ margin-top: -40.5px; margin-left: 15px; /* 左右30device ずつ内側 = CSS 15px */ margin-right: 15px; padding: 20px; /* 40 / 2 */ border-width: 3px; /* 6 / 2 */ box-shadow: var(--shadow-cta-sp); /* 6/6/10 device → 3/3/5 */ } /* タイトル（node 361:192 / 34→17px, leading 30→15px, tracking 2→1px, w388→194px）。 PC は text-align:center だが SP の Figma に text-center は無いので左揃え。 箱の高さ 24device→12px は行間 15px より低い（Figma と同じ「行送りだけ広い箱」）。 */ #cta1 .cta__title { grid-column: 1; grid-row: 1; width: 194px; height: 12px; font-size: var(--fs-17); line-height: 15px; letter-spacing: 1px; text-align: left; } /* 補足（node 361:193 / 22→11px, leading 16→8px, tracking 0.16→0.08px, nowrap）。 Figma の text-center は nowrap の内容幅ぴったりの箱に効いているので視覚差は無い。 grid の既定 stretch のままだと箱が左列(269px)いっぱいに伸びて実際に中央へ ずれてしまうため、justify-self:start で内容幅に戻す。 */ #cta1 .cta__note { grid-column: 1; grid-row: 2; justify-self: start; font-size: var(--fs-11); line-height: 8px; letter-spacing: 0.08px; } /* 矢印（node 361:194 / 箱 60x0 device → 30x0）。PC と同じく CSS で再現する （画像は image/ に未着荷。2026-08-26 オーナー指示で実装）。 左列と同じ高さを 2行ぶち抜きで占め、垂直中央に置く。 参照PNG(ref/SP03-cta.png / 750device幅)の画素実測: 軸 … 長さ60 device px・太さ **1 device px**（2行に 0.50/0.50 で跨る） 矢じり … 腕は上下 ±3 device px・後方3 device px（PC と同じ45°） device px の 1/2 が CSS px なので、軸 0.5px / 腕 1.5px（長さ 1.5√2 = 2.121px）。 **desktop Chrome では 0.5px の背景は 1 CSS px に切り上げて描かれる** （実測: height:0.5px の被覆が 2 device px。border-width も 0.5→1px に丸まる）。 実機の 2倍端末（iOS Safari 等）では 0.5px がそのまま 1 device px の毛筋になるため、 設計値どおり 0.5px を書く。desktop での見え方は 1 device px ぶん太いだけ。 厳密に合わせるには rotate と scaleY(0.5) の合成が要るが、装飾の毛筋1本に 見合わないので採らない。 */ #cta1 .cta__arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 30px; height: 0.5px; } #cta1 .cta__arrow::before, #cta1 .cta__arrow::after { width: 2.121px; /* 1.5 x √2 */ height: 0.5px; } /* ========================================================= * SP04-section1（node 361:197 / 750x969 device = CSS 375x484.5） * PC と同じ DOM を CSS で組み替える。**以下の px はすべて device px の 1/2。** * 3つのテキストブロックは Figma実測どおり絶対配置で、left:50% + translate(-50%) * の自己センタリングなので中央基準トリミングの補正は不要（PC と同じ扱い）。 * 書体・色は PC と同値なので sections.css の指定をそのまま使う。 * ========================================================= */ /* cta1(y=1079,h=162→底1241) → section1(y=1493) の設計上の隙間 = 252device = 126px。 SP では #lead が display:none（SP02-main）なので #cta1 の直後に来る。 #cta1 の実高は 81px（padding20*2 + border3*2 + 12 + gap15 + 8）で Figma の 162device=81px と一致するため、隙間はそのまま margin-top に置ける。 */ #section1 { margin-top: 126px; height: 484.5px; /* 969 / 2 */ } /* 背景装飾（node 361:198 "Frame 2" / 750x880 @y=-333 → CSS 375x440 @-166.5）。 PC(1920x663)とは構成比が違うので、SP の実測値で置き直す。内訳: Rectangle 4 (361:200) 750x737 @y=0 … 上の帯 Rectangle 2 (361:199) 750x135.5 @y=737 … 下向きの三角 Line 2 (361:201) x=375 y=88 h=80 … 中央の縦線 PC 側の margin-left（1920px 設計の中央基準トリミング）は 0 に戻す。 */ #section1 .section1__bg { top: -166.5px; /* -333 / 2 */ width: 375px; height: 440px; /* 880 / 2 */ margin-left: 0; } #section1 .section1__bg-block { height: 368.5px; /* 737 / 2 */ } #section1 .section1__bg-wedge { top: 368.5px; height: 67.75px; /* 135.5 / 2 */ } #section1 .section1__bg-line { left: 187.5px; /* 375 / 2 */ top: 44px; /* 88 / 2 */ height: 40px; /* 80 / 2 */ } /* 見出し（node 361:204 / 750x103 @y=-113 → CSS 375x51.5 @-56.5。中心 -30.75）。 SP は Serif **Bold(700)**（PC は SemiBold(600)）で、3行の内訳が PC と違う: 1行目 34device→17px / leading 1.3 → 22.1px 2行目 44device→22px / leading 1.75 → 38.5px ← .section1__title-mid 3行目 44device→22px / leading 1.3 → 28.6px 2・3行目は PC では1つの

なので、SP専用の .br-sp で折る（PC帯では display:none）。 箱側の font-size は先頭行と同じ値を置く（check-attrs は全文が一致する最も外側の 要素の computed style を見るため。PC の section1__title と同じ扱い）。 */ #section1 .section1__title { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 * transform は SP の top/left が前提にしているので明示する。 */ position: absolute; margin-top: 0; margin-inline: 0; transform: translate(-50%, -50%); left: 50%; top: -30.75px; width: 375px; font-weight: var(--fw-bold); font-size: var(--fs-17); letter-spacing: 1px; /* 2 / 2 */ } #section1 .section1__title p:first-child { font-size: var(--fs-17); line-height: 22.1px; /* 17 * 1.3 */ } #section1 .section1__title p:last-child { font-size: var(--fs-22); line-height: 28.6px; /* 22 * 1.3 */ } #section1 .section1__title-mid { line-height: 38.5px; /* 22 * 1.75。この行だけ leading が広い */ } /* リード文（node 361:203 / 750x365 @y=50 → CSS 375x182.5 @25。中心 116.25）。 26device→13px / leading 1.75 → 22.75px。8行 × 22.75 = 182px で箱高と一致する。 PC は6行なので、2箇所に .br-sp を入れて 8行にしてある。 tracking 0.16device → 0.08px。色・書体・strong の扱いは PC と同値。 */ #section1 .section1__lead { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 * transform は SP の top/left が前提にしているので明示する。 */ position: absolute; margin-top: 0; margin-inline: 0; transform: translate(-50%, -50%); left: 50%; top: 116.25px; width: 375px; font-size: var(--fs-13); line-height: 22.75px; letter-spacing: 0.08px; } /* 見出し2（node 361:202 / 750x314 @y=598 → CSS 375x157 @299。中心 377.5）。 1〜2行目 44device→22px / leading 1.5 → 33px 3行目 30device→15px / leading 1.75 → 26.25px 4〜5行目 44device→22px / leading 1.5 → 33px（--c-brand） 合計 158.25px。1行目と4行目は PC では1行に収まるので .br-sp で折る。 */ #section1 .section1__heading { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 * transform は SP の top/left が前提にしているので明示する。 */ position: absolute; margin-top: 0; margin-inline: 0; transform: translate(-50%, -50%); left: 50%; top: 377.5px; width: 375px; font-size: var(--fs-22); letter-spacing: 0.5px; /* 1 / 2 */ } #section1 .section1__heading p:nth-child(1) { font-size: var(--fs-22); line-height: 33px; /* 22 * 1.5 */ } #section1 .section1__heading p:nth-child(2) { font-size: var(--fs-15); line-height: 26.25px; /* 15 * 1.75 */ } #section1 .section1__heading-accent { font-size: var(--fs-22); line-height: 33px; } /* ========================================================= * SP05-section2（node 361:206 / フレームは 750x1093 device） * PC と同じ DOM を CSS で組み替える。**以下の px はすべて device px の 1/2。** * * 【フレーム高 1093 をそのまま採る】カード列(361:212)は Figma で * `top:480 / left:30 / right:30` の**絶対配置**なのでフレーム高に算入されず、 * 実寸で 480 + 1306.46 = 1786.46 device まで下にはみ出す。 * これは壊れではなく Figma そのままの状態で、clipsContent=false（AGENTS.md）なので * 切らずに見せるのが正しい。**だから CSS でも絶対配置のまま再現し、 * セクションの箱は 1093 device = 546.5px に固定する。** * （通常フローに戻すと箱が 1786 device に膨らみ、stack-check の高さ判定が落ちる。 * はみ出し先は Figma 上でも空白帯なので、見た目はどちらも同じになる。） * → **SP06-section3 の margin-top は 369px**（section3 y=4316 − section2 底 3578 * = 738 device / 2）にすること。その空白帯にカード列がはみ出して入る。 * カード列の底は 4271.46 device なので section3(4316) とは 44.54 device あく。重ならない。 * * 【送り】section1(y=1493,h=969→底2462) → section2(y=2485) の隙間 = 23device = 11.5px。 * PC の margin-top:0 / height:1094px を両方とも上書きする。 * ========================================================= */ #section2 { margin-top: 11.5px; height: 546.5px; /* 1093 / 2。Figma のフレーム高そのもの */ } /* 背景（node 361:207 sp_top_bg001 / マスク窓 750x603 device = CSS 375x301.5 @top0）。 実体は image/sp_top_bg001.jpg で窓と寸法が完全一致するため、PC のような 二重露光の再現は要らない。暗幕 rgba(0,0,0,.5) は PC 側の ::after をそのまま使う。 PC 側の margin-left（1920px 設計の中央基準トリミング）は 0 に戻す。 */ #section2 .section2__bg { width: 375px; height: 301.5px; /* 603 / 2 */ margin-left: 0; } /* は SP画像へ切り替えるために足した器。高さが無いと中の img の height:100% が auto に落ちるので、器にも寸法を持たせる（S02-mv と同じ手当て）。 */ #section2 .section2__bg picture { display: block; width: 100%; height: 100%; } /* 見出し（node 361:290 / 716x177 @y=152.5 中心 → CSS 358x88.5 @76.25）。 50→25px / leading 1.6 → 40px / tracking 0.16→0.08px / Serif **Bold(700)** （PC は SemiBold(600)）。2行 × 40px = 80px を 88.5px の箱に上下中央で置く ＝ Figma の justify-center と同じ状態。PC の left:calc(50% - 325px) は 自己センタリングへ差し替える。 */ #section2 .section2__heading { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 * transform/left は SP の top/left が前提にしているので明示する。 */ position: absolute; margin-top: 0; margin-inline: 0; left: 50%; top: 76.25px; transform: translate(-50%, -50%); display: flex; flex-direction: column; justify-content: center; width: 358px; height: 88.5px; text-align: center; font-weight: var(--fw-bold); font-size: var(--fs-25); line-height: 40px; /* 25 * 1.6 */ letter-spacing: 0.08px; } /* リード文（node 361:289 / 716x132 @y=349 中心 → CSS 358x66 @174.5）。 28→14px / leading 1.6 → 22.4px / tracking 0.16→0.08px。 SP は4行（PC は2行）。増える2箇所は .br-sp で折る（PC帯では display:none）。 箱高 66px < 4行 89.6px は Figma と同じ「行送りだけ広い箱」なので中央に置く。 */ #section2 .section2__lead { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 * transform/left は SP の top/left が前提にしているので明示する。 */ position: absolute; margin-top: 0; margin-inline: 0; transform: translate(-50%, -50%); left: 50%; top: 174.5px; display: flex; flex-direction: column; justify-content: center; width: 358px; height: 66px; font-size: var(--fs-sm); /* 28 / 2 */ line-height: 22.4px; letter-spacing: 0.08px; } /* カード列（node 361:212 / left30 right30 @top480, gap30, ガラス面）。 PC と同じく**絶対配置のまま**で、座標だけ Figma SP の実測値に差し替える。 絶対配置なのでセクション高(546.5px)に算入されず、Figma と同じく下にはみ出す。 背景写真より前に出す z-index: var(--z-body) は PC 側をそのまま使う。 .is-in（width:1200px / margin-inline:auto）は width:auto で打ち消す （残すと left/right/width の3つが過剰指定になり right が無視される）。 */ #section2 .section2__cards { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 */ position: absolute; margin-top: 0; left: 15px; /* 30 / 2 */ right: 15px; top: 240px; /* 480 / 2 */ flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 15px; /* 30 / 2 */ width: auto; margin-inline: 0; } /* カード本体（node 361:213 ほか / 690 幅, padding 35.864, gap 19.128）。 PC は「アイコン箱 / 見出し / 本文」を縦一列に積むが、SP は Figma が 「アイコン箱＋見出しの横並び(gap 19device)」＋「その下に本文」の2段。 **DOM は PC と共有なので作り替えられない**ため、同じ3要素を grid で 2列x2行に組み替える（本文が2列ぶち抜き）。 .card の width:280px / gap:16px / padding:30px を全て上書きする。 */ #section2 .section2__card { display: grid; grid-template-columns: auto 1fr; column-gap: 9.5px; /* 19 / 2 */ row-gap: 9.56px; /* 19.128 / 2 */ width: 345px; /* 690 / 2。box-sizing:border-box なので padding を含む */ padding: 17.93px; /* 35.864 / 2 */ box-shadow: var(--shadow-card-sp); /* 7.173/7.173/11.955 device → 1/2 */ } /* アイコン箱（node 361:215 ほか / 110x110 device = CSS 55x55、1枚目だけ 110x107）。 アイコン(86.075 device = 43.04)の置き位置は Figma が枚ごとに 6.0〜8.4px と ばらつくので、中央揃えではなく実測の ml/mt をそのまま絶対配置で再現する。 PC の flex 中央揃えを打ち消す。 */ #section2 .section2__card-icon-box { grid-column: 1; grid-row: 1; align-self: center; display: block; position: relative; width: 55px; height: 55px; } #section2 .section2__card:first-child .section2__card-icon-box { height: 53.5px; /* 107 / 2。1枚目だけ Figma が 1.5px 低い */ } #section2 .section2__card-icon { position: absolute; width: 43.04px; /* 86.075 / 2 */ height: 43.04px; } /* ml/mt（device）を 1/2 にした実測値。361:216 / 361:235 / 361:262 / 361:278 */ #section2 .section2__card:nth-child(1) .section2__card-icon { left: 6px; top: 4.65px; } #section2 .section2__card:nth-child(2) .section2__card-icon { left: 6.8px; top: 6.01px; } #section2 .section2__card:nth-child(3) .section2__card-icon { left: 8.4px; top: 6.07px; } #section2 .section2__card:nth-child(4) .section2__card-icon { left: 6.1px; top: 5.84px; } /* カード見出し（node 361:230 / 361:257 / 361:273 / 361:287）。 32→16px / tracking 1.1955→0.598px / Serif Bold。**display:block のまま** （sections.css のコメント参照。flex/grid にすると span と地の文が別々に 折り返して文が読めなくなる）。grid アイテムとして1行目の右列に置く。 行間は 1・2枚目が 1.5(=24px)、3・4枚目が 1.6(=25.6px)。 */ #section2 .section2__card-title { grid-column: 2; grid-row: 1; align-self: center; height: auto; font-size: var(--fs-16); line-height: 25.6px; /* 16 * 1.6 */ letter-spacing: 0.6px; /* 1.1955 / 2 */ } /* 1枚目 h77→38.5 / 2枚目 h57x w416→28.5 x 208。どちらも2行(48px)より低い箱に 中央で置く Figma の指定をそのまま再現する（行はアイコン箱の高さで決まる）。 */ #section2 .section2__card:nth-child(1) .section2__card-title { height: 38.5px; line-height: 24px; /* 16 * 1.5 */ } #section2 .section2__card:nth-child(2) .section2__card-title { width: 208px; /* 416 / 2 */ height: 28.5px; line-height: 24px; } /* 3・4枚目は Figma が whitespace-nowrap の1行 */ #section2 .section2__card:nth-child(3) .section2__card-title, #section2 .section2__card:nth-child(4) .section2__card-title { white-space: nowrap; } /* 本文（node 361:231 / 361:258 / 361:274 / 361:288 / 4枚とも h104.007 device）。 26→13px / leading 1.6 → 20.8px / tracking 1.1955→0.598px。 PC の min-height:87px を 0 に戻してから高さを置き直す。2列ぶち抜きの2行目。 */ #section2 .section2__card-body { grid-column: 1 / span 2; grid-row: 2; min-height: 0; height: 52px; /* 104.007 / 2 */ font-size: var(--fs-13); line-height: 20.8px; letter-spacing: 0.6px; } /* ========================================================= * SP06-section3（node 361:298 / 750x2318 device = CSS 375x1159） * PC と同じ DOM を CSS で組み替える。**以下の px はすべて device px の 1/2。** * * 【PC との一番の違い】PC では まとめ文(250:53) と シェブロン(284:91) が * フレーム高からはみ出すため通常フローに置いてある（SECTIONS.md 処理方針5）が、 * **SP では中身が全てフレーム(2318 device = 1159px)の内側に収まる** * （まとめ文の底 1104px / シェブロンの底 1147.5px < 1159px）。 * よって SP ではこの2つも Figma どおり絶対配置に戻し、箱の高さを 1159px に固定する。 * PC の `margin: 1068px auto 0` / `margin: 7px auto 0` は両方ここで打ち消す。 * * 【送り】section2(y=2485,h=1093→底3578) → section3(y=4316) の隙間 = 738device = 369px。 * この空白帯には SP05-section2 のカード列（絶対配置で底 4271.46 device）が * はみ出して入る（PROGRESS-SP.md の SP05→SP06 申し送り）。section3(4316) とは * 44.54 device あくので重ならない。PC の margin-top:-343px を上書きする。 * ========================================================= */ #section3 { margin-top: 369px; height: 1159px; /* 2318 / 2。中身が全て絶対配置なので明示する */ } /* 装飾。PC 側の margin-left（1920px 設計の中央基準トリミング）は 0 に戻す */ #section3 .section3__deco { margin-left: 0; } /* グラデーション矩形（node 361:307 / 630x480 @left120,top543）。値は --g-cta のまま */ #section3 .section3__deco--gradient { left: 60px; /* 120 / 2 */ top: 271.5px; /* 543 / 2 */ width: 315px; /* 630 / 2 */ height: 240px; /* 480 / 2 */ } /* 写真（node 361:308/361:310 "top_image005"）。マスク後の可視範囲は left 26+8=34 / top 507+96=603 / 640x360（device）で、PC(281:81)と device px が同値。 書き出し済み image/top_image005.png(960x540) をその窓に縮小して置く。 */ #section3 .section3__deco--photo1 { left: 17px; /* 34 / 2 */ top: 301.5px; /* 603 / 2 */ width: 320px; /* 640 / 2 */ height: 180px; /* 360 / 2 */ } /* 写真（node 361:311 "top_image006" / 621x424 @left71,top1533）。 PC(350:4)と device px が同値なので、枠・中の画像をそのまま 1/2 にする。 画像は枠に合わせて縮小し全体を見せる（PC と同じ。クリップしない）。 */ #section3 .section3__deco--photo2 { left: 35.5px; /* 71 / 2 */ top: 766.5px; /* 1533 / 2 */ width: 310.5px; /* 621 / 2 */ height: 212px; /* 424 / 2 */ } #section3 .section3__deco--photo2 img { width: 310.5px; /* 621 / 2 */ height: 212px; /* 424 / 2 */ } /* 本文の器。PC 側の margin-left（1920px 設計）は 0 に戻す。 中身が全て絶対配置なので器自体の高さは 0 で、子の座標は #section3 起点と一致する。 */ #section3 .section3__body { margin-left: 0; } /* 見出し（node 361:299 / 711x97 @top120.5 中心 → CSS 355.5x48.5 @60.25）。 40→20px / leading 1.6 → 32px / tracking 0.16→0.08px / Serif **Bold(700)** （PC は SemiBold(600)）。色 --c-brand-dark は PC と同値。 2行 64px を 48.5px の箱に中央で置く Figma の指定は、高さを持たせず translateY(-50%) で中心を合わせれば同じ結果になる（PC と同じ作り）。 */ #section3 .section3__heading { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 * transform/left は SP の top/left が前提にしているので明示する。 */ position: absolute; margin-top: 0; margin-left: 0; transform: translateY(-50%); left: 15px; /* 30 / 2 */ top: 60.25px; /* 120.5 / 2 */ width: 355.5px; /* 711 / 2 */ font-weight: var(--fw-bold); font-size: var(--fs-20); line-height: 32px; /* 20 * 1.6 */ letter-spacing: 0.08px; /* 0.16 / 2 */ } /* 本文1〜3 共通（node 361:300 / 361:301 / 361:302）。 28→14px / leading 1.6 → 22.4px / tracking 1→0.5px。 PC は fs-16 / line-height 1.75 / tracking 1px なので全て上書きする。 3つとも Figma は left/right 指定（PC は固定 width）なので width:auto に戻す。 */ #section3 .section3__text--1, #section3 .section3__text--2, #section3 .section3__text--3 { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 * transform は text--3 だけが使う（下の個別ルール）。ここに書くと * 上端基準の text--1/--2 まで半分持ち上がる（実測で -78/-56px ずれた）。 */ position: absolute; margin-top: 0; margin-left: 0; width: auto; right: 15px; /* 30 / 2 */ font-size: var(--fs-sm); /* 28 / 2 */ line-height: 22.4px; letter-spacing: 0.5px; } /* 本文1（node 361:300 / left30 right30 @top201。上端基準） */ #section3 .section3__text--1 { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 */ position: absolute; margin-top: 0; margin-left: 0; left: 15px; top: 100.5px; /* 201 / 2 */ } /* 本文2（node 361:301 / left30 right30 @top1063。上端基準） */ #section3 .section3__text--2 { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 */ position: absolute; margin-top: 0; margin-left: 0; left: 15px; top: 531.5px; /* 1063 / 2 */ } /* 本文3（node 361:302 / left30 right31 @top1396 中心。縦中央揃え）。 PC は器（フロー）に変えて translateY を外したので、SP 側で明示する。 */ #section3 .section3__text--3 { transform: translateY(-50%); left: 15px; right: 15.5px; /* 31 / 2 */ top: 698px; /* 1396 / 2 */ } /* まとめ文（node 361:303 / 692x180 @top2118 中心 → CSS 346x90 @1059）。 Serif **Bold(700)**（PC は SemiBold(600)）/ tracking 0.16→0.08px / text-center。 1行目 30→15px / leading 1.6 → 24px / --c-ink 2〜3行目 50→25px / leading 1.6 → 40px / --c-brand PC は2行目と3行目が1つの

なので .br-sp で折る（PC帯では display:none）。 箱の font-size は先頭行と同じ値を置く（check-attrs は全文が一致する最も外側の 要素の computed style を見るため。PC の section3__note と同じ扱い）。 3行 104px を 90px の箱に中央で置く Figma の justify-center をそのまま再現する。 */ #section3 .section3__note { position: absolute; left: 50%; top: 1059px; /* 2118 / 2 */ transform: translate(-50%, -50%); display: flex; flex-direction: column; justify-content: center; width: 346px; /* 692 / 2 */ max-width: none; height: 90px; /* 180 / 2 */ margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-15); letter-spacing: 0.08px; } #section3 .section3__note p:first-child { font-size: var(--fs-15); line-height: 24px; /* 15 * 1.6 */ } #section3 .section3__note p:last-child { font-size: var(--fs-25); line-height: 40px; /* 25 * 1.6 */ } /* 下向きシェブロン（node 361:304 / 120x50 @left50%,top2245 → CSS 60x25 @1122.5）。 image/arrow_down.svg は PC と同じものを縮小して使う。 PC の通常フロー（margin: 7px auto 0）を打ち消して絶対配置に戻す。 */ #section3 .section3__arrow { position: absolute; left: 50%; top: 1122.5px; /* 2245 / 2 */ transform: translateX(-50%); width: 60px; /* 120 / 2 */ height: 25px; /* 50 / 2 */ margin: 0; z-index: var(--z-body); /* 装飾より前に出す（本文と同じ層） */ } /* ========================================================= * SP07-section4（node 361:319 / 中身 750x1564 device = CSS 375x782） * PC と同じ DOM を CSS で組み替える。**以下の px はすべて device px の 1/2。** * * 【フレーム寸法の注意】このフレームの外枠は 1920x838 のまま PC 由来で残っている * （SECTIONS-SP.md / visual-sp.config.json の note）。中身は 750x1564 の実コンテンツで、 * design context の `left-[..] right-[..]` は **1920 幅に対する値**なので、 * 右端は `1920 - right` を 750 幅の中で読み替えてから 1/2 にする。 * 361:323 left30 right1190 → 右端 730device → 幅 700device = 350px * 361:324 left30 right1207 → 右端 713device → 幅 683device = 341.5px * * 【PC との一番の違い】SP の section4 には CTAカード(PC 250:58)が無い。 * その内容は SP専用の帯 `#sp-cta2`（node 361:325 / SP08-div）に分かれている。 * → ここでは `.section4__cta` を SP帯で非表示にするだけにし、実装は SP08 に委ねる。 * （PROGRESS-SP.md「共通部品が足りないときの報告」に申し送り済み） * * 【送り】section3(y=4316,h=2318→底6634) → section4(y=6634) の隙間 = 0。 * SP06 で #section3 の高さを 1159px に固定してあるので margin-top は 0 でよい。 * PC の margin-top:38px を打ち消す。 * * 【送り】#sp-cta2（node 361:325 / SP08-div, y=7792）は * section4 の箱の底 7472device の 320device 下。→ SP08 は margin-top: 160px を置く。 * ========================================================= */ /* 箱の高さは **Figma のフレーム高 838device = 419px** に合わせる。 中身(Rectangle 49 = 361:320)は 1564device あってフレームからはみ出しているが、 `clipsContent=false`（AGENTS.md）なので切らずに見せるのが正で、 子は全て絶対配置なので箱を縮めても描画は1pxも動かない。 箱を 782px にすると Figma のフレーム高と 726device ずれて `stack-check --sp` の高さ判定が落ちる（SP05-section2 と同じ構造・同じ判断）。 */ #section4 { margin-top: 0; height: 419px; /* 838 / 2。Figma のフレーム高そのもの */ } /* 背景グラデーション（node 361:320 / 750x1564 @top-1）。値は --g-cta のまま。 PC 側の margin-left（.deco-full の 1920px 設計トリミング）は 0 に戻す。 */ #section4 .section4__bg { /* PC と同じく border-top(1px) のぶん padding box が下がるので、Figma の -1device ではなく -1px を置いて帯の上端をセクション上端にぴったり合わせる （absolute の起点は padding box）。 高さ 782px は箱(419px)を 363px はみ出すが、それが Figma の姿そのもの （Rectangle 49 が section4 フレームから下にあふれている）。 */ top: -1px; width: 375px; height: 782px; margin-left: 0; } /* 装飾線（node 361:321 / 639x0 @left68,top156）。PC(648,156)とは左位置が違う */ #section4 .section4__line { left: 34px; /* 68 / 2 */ top: 78px; /* 156 / 2 */ width: 319.5px; /* 639 / 2 */ margin-left: 0; } /* 見出し（node 361:322 / 750x57 @top117.5 中心。自己センタリング）。 40→20px / leading 57→28.5px / tracking 0.16→0.08px。 書体(Serif SemiBold)・色(--c-on-dark)・text-center は PC と同値。 */ #section4 .section4__heading { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 * transform/left は SP の top/left が前提にしているので明示する。 */ position: absolute; margin-top: 0; margin-inline: 0; transform: translate(-50%, -50%); left: 50%; top: 58.75px; /* 117.5 / 2 */ width: 375px; /* 750 / 2 */ font-size: var(--fs-20); line-height: 28.5px; /* 57 / 2 */ letter-spacing: 0.08px; } /* 本文1・2 共通（node 361:323 / 361:324）。28→14px / leading 1.6 → 22.4px / tracking 2→1px。PC は fs-16 / 1.75 / tracking 2px なので全て上書きする。 PC は left460 の実座標＋中央基準トリミングなので margin-left を 0 に戻す。 */ /* なお #section4 だけ border-top:1px があるため、絶対配置の子は Figma 座標より 1px 下に出る（absolute の起点が padding box になるため）。PC(sections.css)も 同じ作りで、面をまたいで揃えるためここでも補正していない。 */ #section4 .section4__text { left: 15px; /* 30 / 2 */ width: 350px; /* (1920-1190-30) / 2 */ margin-left: 0; font-size: var(--fs-sm); /* 28 / 2 */ line-height: 22.4px; /* 14 * 1.6 */ letter-spacing: 1px; /* 2 / 2 */ } /* 本文1（node 361:323 / h199 @top314.5 中心）。4つの

は Figma でも 1行ずつで、幅350pxに収まる（最長 23字 = 345px）。 */ #section4 .section4__text--1 { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 * transform/left は SP の top/left が前提にしているので明示する。 */ position: absolute; margin-top: 0; margin-left: 0; transform: translateY(-50%); top: 157.25px; /* 314.5 / 2 */ } /* 本文2（node 361:324 / 683x224 @top552 中心）。 **Figma では先頭の太字が1つの段落で、幅683device に対し3行に自然折り返しする。** 箱の高さ 224device = 44.8 x 5行 がその裏付け（3 + 1 + 1 = 5行）。 PC(250:57)は「積み上げれば、」で明示的に改行した2つの

なので、 SP帯だけ先頭2つを display:inline で連結し、Figma と同じ自然折り返しに戻す。 連結時に空白が入らないよう index.html 側でこの2つの

の間の空白を詰めてある （ブロック同士の空白は PC では捨てられるので PC の描画は動かない）。 */ #section4 .section4__text--2 { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 * transform/left は SP の top/left が前提にしているので明示する。 */ position: absolute; margin-top: 0; margin-left: 0; transform: translateY(-50%); top: 276px; /* 552 / 2 */ /* Figma の箱幅は 683device = 341.5px。**+1px しているのは CSS の letter-spacing が 行末の1文字の後ろにも入るため。** 最終行「まず、そこを…第一歩です。」の実測は 342.34px（trailing 1px を含む）で、341.5px の箱では 0.84px あふれて「す。」だけが 6行目に落ちる。1px 足すと Figma と同じ 5行（太字3行 + 1 + 1 = 112px）に収まり、 箱の高さ 224device = 44.8 x 5行 とも一致する（実測 2026-08-25）。 */ width: 342.5px; /* 683 / 2 + 1px */ } #section4 .section4__text--2 p:nth-child(1), #section4 .section4__text--2 p:nth-child(2) { display: inline; } /* CTAカード（PC node 250:58）は SP の section4 には存在しない。 同じ内容は SP専用の帯 #sp-cta2（node 361:325 / SP08-div）が持つ。 */ #section4 .section4__cta { display: none; } /* 写真（node 361:332 "top_image007" / left58,top713）。 マスク2枚(361:335 / 361:338)の可視範囲を合成すると x58..688 / y714..1084 の 630x370device で、**PC(350:5)と device px も内部配置も完全に一致する** （PC: group1 rel(0,71) 200x300 / group2 rel(230,1) 400x300。SP も同値）。 よって image/top_image007.png をそのまま 1/2 に縮小して置く。 */ #section4 .section4__photo { left: 29px; /* 58 / 2 */ top: 356.5px; /* 713 / 2 */ width: 315px; /* 630 / 2 */ height: 185px; /* 370 / 2 */ margin-left: 0; } /* ========================================================= * SP08-div（node 361:325 / 690x337 device = CSS 345x168.5） * **SP専用のCTA帯。PC版には対応セクションが無い**（PC は同じ内容を * #section4 .section4__cta が持ち、SP帯ではそちらを display:none にしてある）。 * index.html の に新規で置いたブロックで、 * PC帯（下の min-width:768px 側）で display:none にしている。 * **以下の px はすべて design context の device px を 1/2 にした値。** * ========================================================= */ /* 直前の #section4 は箱を Figma のフレーム高 838device=419px に固定してある （SP07-section4 の判断。中身の 1564device は絶対配置で下にはみ出している）。 その底は 7472device で、361:325 の y=7792 との差 320device = 160px がそのまま隙間。 #section4 の背景グラデーション(782px)はセクション底から 363px はみ出しているので、 この帯はグラデーションの上に載る。**装飾は .deco = z-index:--z-deco で position:absolute なので、位置指定の無い div のままだと背景の下に潜る。** #cta1 と同じく z-index:--z-body を明示して前に出す。 */ #sp-cta2 { position: relative; z-index: var(--z-body); display: flex; flex-direction: column; align-items: flex-start; gap: 25px; /* 50 / 2 */ width: 345px; /* 690 / 2。左右 30device ずつ内側 */ margin-top: 160px; /* 320 / 2 */ margin-inline: 15px; /* 30 / 2 */ padding: 22px 30px; /* py 44 / px 60 の 1/2 */ background: var(--bg-page); } /* 見出し（node 361:326 / h89 @min-w-full, justify-center）。 28→14px / leading 1.6 / tracking 0.16→0.08px / Serif SemiBold / --c-ink。 Figma は改行を持たない1段落で、内側幅 570device(=285px) に自然折り返しして2行になる （箱の高さ 89device = 44.5px ≒ 22.4px x 2行 がその裏付け）。**明示的な
は入れない。** */ #sp-cta2 .sp-cta2__heading { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 44.5px; /* 89 / 2 */ font-family: var(--ff-serif); font-weight: var(--fw-semibold); font-size: var(--fs-sm); /* 28 / 2 */ letter-spacing: 0.08px; /* 0.16 / 2 */ color: var(--c-ink); word-break: break-word; } #sp-cta2 .sp-cta2__heading p { line-height: 1.6; } /* CTAボタン（node 361:327 "a.scp1"）。共通部品 .scp1 をそのまま使い、寸法だけ SP に寄せる。 グラデーション(#155c96→#2571b0) / 白文字 / Sans は .scp1 の既定と同値。 gap 18.75→9.375 / px 93.75→46.875 / rounded 5.625→2.8125 / 30→15px / leading 57→28.5px / tracking 1.875→0.9375px。 **高さは padding ではなく箱側で確保する**（components.css の .scp1--lg と同じ判断）。 Figma は py-[48.75px] と h-[110px] を同時に持つが、padding どおりに積むと 48.75x2 + 57 = 154.5device になって実寸 110device と合わない。 Figma は固定高が勝つので、CSS でも padding-block を 0 にして 55px を箱で作る。 min-height にするのは、狭い端末で文字が折り返したときに押し出されて伸びるようにするため。 */ #sp-cta2 .scp1 { gap: 9.375px; /* 18.75 / 2 */ min-height: 55px; /* 110 / 2 */ padding: 0 46.875px; /* 93.75 / 2 */ border-radius: 2.8125px; /* 5.625 / 2。--r-btn(3px) は PC 1920px 設計の値 */ font-size: var(--fs-15); /* 30 / 2 */ font-weight: var(--fw-bold); line-height: 28.5px; /* 57 / 2 */ letter-spacing: 0.9375px; /* 1.875 / 2 */ white-space: nowrap; } /* メールアイコン（node 361:328 / 45x45 device）。共通部品の既定は PC の 24x24 */ #sp-cta2 .scp1 .icon-mail { width: 22.5px; /* 45 / 2 */ height: 22.5px; } /* ========================================================= * SP09-section5（node 361:340 / 750x1894 device = CSS 375x947） * PC と同じ DOM を CSS で組み替える。**以下の px はすべて device px の 1/2。** * * 【送り（SP08-div より）】#sp-cta2 の底は Figma 座標 8129device。 * #section5 の y=8276 との差 147device = 73.5px がそのまま隙間になる。 * PC の margin-top:3px を打ち消して 73.5px を置く。 * * 【幅の読み替え】このフレームは 750 幅なので right は `750 - right` で右端を出す。 * 361:341 left32 right78 → 幅 640device = 320px * 361:342 left32 right31 → 幅 687device = 343.5px * 361:371 left33 right26 → 幅 691device = 345.5px * カード内の right は親カード(634device)基準。 * * 【PC との書体差】見出しは PC(250:63)が Serif SemiBold、SP(361:341)は **Serif Bold**。 * 実測どおり SP帯だけ --fw-bold に上げる。 * ========================================================= */ #section5 { margin-top: 73.5px; /* 147 / 2 */ height: 947px; /* 1894 / 2 */ } /* 見出し（node 361:341 / 640x54 @left32,top61 中心）。 50→25px / leading 54→27px / tracking 0.16→0.08px。 PC は left362 の実座標＋中央基準トリミングなので margin-left を 0 に戻す。 */ #section5 .section5__heading { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 * transform/left は SP の top/left が前提にしているので明示する。 */ position: absolute; margin-top: 0; transform: translateY(-50%); left: 16px; /* 32 / 2 */ top: 30.5px; /* 61 / 2 */ width: 320px; /* 640 / 2 */ margin-left: 0; font-weight: var(--fw-bold); /* SP は Serif Bold。PC は SemiBold */ font-size: var(--fs-25); /* 50 / 2 */ line-height: 27px; /* 54 / 2 */ letter-spacing: 0.08px; /* 0.16 / 2 */ } /* リード文（node 361:342 / 687x258 @left32,top129）。 **PC(250:64)と違い translate-y-1/2 を持たない**ので transform を消す。 1行目だけ Sans Bold 32→16px、2〜5行目は Sans Regular 28→14px。 行間は全行 1.8、tracking 2→1px。 font-weight を器に残すのは PC と同じ理由（先頭行の値を器に置き、 2行目以降を :not(:first-child) で regular に戻す作りが sections.css にある）。 */ #section5 .section5__lead { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 */ position: absolute; margin-top: 0; left: 16px; /* 32 / 2 */ top: 64.5px; /* 129 / 2 */ transform: none; width: 343.5px; /* 687 / 2 */ margin-left: 0; font-size: var(--fs-16); /* 32 / 2。先頭行の値を器に置く（PC の font-weight と同じ作り） */ letter-spacing: 1px; /* 2 / 2 */ } #section5 .section5__lead p { line-height: 1.8; } /* 2〜5行目だけ 28→14px。先頭行は器から 16px を継承する。 **器に先頭行の値を置くのは check-attrs が「全文が一致する最も外側の要素」で computed style を見るため**（sections.css の font-weight と同じ扱い）。 */ #section5 .section5__lead p:not(:first-child) { font-size: var(--fs-sm); /* 28 / 2 */ } /* 装飾（node 361:345 "pixta_107605320_M 1"）。可視範囲 left15 / top217 / 360x613（CSS px）。 SP のラフは同じ写真の縦長の別切り抜き（生1864x1242 に mask(283,17)+size(720x1226)＝ 生画像の x 0.152〜0.538 / y 0.014〜1.0）で、PC の top_bg002.jpg（y 0.147〜0.661 の横長帯） には上下の範囲が足りず忠実再現はできない。当初は PROGRESS-SP.md に報告して display:none にしていたが、**2026-08-26 オーナー指示「ラフと比べて修正」を受け、 PC 画像の object-fit:cover 近似で表示する**（blur 5px の装飾写真なので絵柄の差は 視認できない。正式には image/sp_top_bg002.jpg 720x1226 の着荷を待って差し替える）。 object-position 30% は、ラフの切り抜き中心（生画像 x=0.345）を cover のクロップ式（左クロップ = 0.3404x1738.7 - 0 → 411.9/1378.7）で写した値。 blur は Figma の 10device = 5px（PC は 1920設計なので 10px のまま）。 */ #section5 .section5__deco { display: block; left: 15px; top: 217px; width: 360px; height: 613px; margin-left: 0; /* PC の中央基準トリミングを打ち消す */ object-fit: cover; object-position: 30% 50%; filter: blur(5px); } /* カード列（node 361:346 / 634x1158 @left70,top474）。 PC の 2x2 グリッドを SP では縦1列（gap 20→10px）に組み替える。 */ #section5 .section5__cards { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 */ position: absolute; margin-top: 0; left: 35px; /* 70 / 2 */ top: 237px; /* 474 / 2 */ width: 317px; /* 634 / 2 */ height: 579px; /* 1158 / 2 */ margin-left: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; /* 20 / 2 */ } /* カード（node 361:347 / 361:353 / 361:359 / 361:365）。 高さは Figma の実寸で1枚ずつ違う。中身は全て絶対配置なので .check-card の padding / gap は効かない。 **枠線は components.css の 1px のまま上書きしない。** Figma は 1.207device = 0.6035px だが、Chrome は 0 でない border-width を 1px 未満に丸めない（computed が 1px になる。実測 2026-08-25）ので指定しても効かない。 その結果、絶対配置の子は Figma 座標より 1px 右下に出る（absolute の起点が padding box）。 **PC(sections.css)も枠線1px＋Figma座標そのままで同じ 1px を持っている**ので、 面をまたいで揃える判断でここでも補正していない（SP07-section4 の border-top と同じ扱い）。 */ #section5 .check-card { width: 100%; flex: none; } #section5 .check-card:nth-child(1) { height: 125px; } /* 250 / 2 */ #section5 .check-card:nth-child(2) { height: 162px; } /* 324 / 2 */ #section5 .check-card:nth-child(3) { height: 121.5px; } /* 243 / 2 */ #section5 .check-card:nth-child(4) { height: 123px; } /* 246 / 2 */ /* チェックアイコン（node 361:348 ほか / 25.357x24.149 device）。 共通部品 .check の既定は PC の 21x20 なので SP帯だけ寸法を上書きする。 */ #section5 .section5__card-check { left: 17.51px; /* 35.02 / 2 */ width: 12.6785px; /* 25.357 / 2 */ height: 12.0745px; /* 24.149 / 2 */ } #section5 .check-card:nth-child(1) .section5__card-check { top: 24.755px; } /* 49.51 / 2 */ #section5 .check-card:nth-child(2) .section5__card-check { top: 23.545px; } /* 47.09 / 2 */ #section5 .check-card:nth-child(3) .section5__card-check { top: 22.94px; } /* 45.88 / 2 */ #section5 .check-card:nth-child(4) .section5__card-check { top: 23.545px; } /* 47.09 / 2 */ /* カード見出し（node 361:351 / 361:357 / 361:363 / 361:369）。 34→17px / leading 36.707→18.3535px / tracking 1.2075→0.60375px。 */ #section5 .section5__card-title { left: 36.895px; /* 73.79 / 2 */ font-size: var(--fs-17); /* 34 / 2 */ line-height: 18.3535px; /* 36.707 / 2 */ letter-spacing: 0.60375px; /* 1.2075 / 2 */ } /* 361:351 — right239.79 → 幅 (634-73.79-239.79)/2 */ #section5 .check-card:nth-child(1) .section5__card-title { top: 30.395px; /* 60.79 / 2 */ width: 160.21px; } /* 361:357 — right35.79 → 幅 (634-73.79-35.79)/2。translate 無し（PC も無し）。 幅 262.21px に対しテキスト21字 x 17.60375px = 369.7px なので Figma と同じ2行 */ #section5 .check-card:nth-child(2) .section5__card-title { left: 36.895px; top: 18.245px; /* 36.49 / 2 */ width: 262.21px; } /* 361:363 — right239.79 */ #section5 .check-card:nth-child(3) .section5__card-title { top: 28.09px; /* 56.18 / 2 */ width: 160.21px; } /* 361:369 — right263.79 → 幅 (634-73.79-263.79)/2 */ #section5 .check-card:nth-child(4) .section5__card-title { top: 29.94px; /* 59.88 / 2 */ width: 148.21px; } /* カード本文（node 361:352 / 361:358 / 361:364 / 361:370）。 26→13px / leading 1.5 / tracking 1.2075→0.60375px。 */ /* line-height は **器にも置く**。カード1/3/4 の本文は

そのものなので、子

向けの規則だけだと PC の 1.6 が残る（カード2だけ

+

）。 */ #section5 .section5__card-body { left: 18.11px; /* 36.22 / 2 */ font-size: var(--fs-13); /* 26 / 2 */ line-height: 1.5; letter-spacing: 0.60375px; /* 1.2075 / 2 */ } #section5 .section5__card-body p { line-height: 1.5; } /* 361:352 — left36.22 right37.64 → 幅 (634-36.22-37.64)/2 */ #section5 .check-card:nth-child(1) .section5__card-body { top: 50.11px; /* 100.22 / 2 */ width: 280.07px; } /* 361:358 — left35.79 right38.79 → 幅 (634-35.79-38.79)/2 */ #section5 .check-card:nth-child(2) .section5__card-body { left: 17.895px; /* 35.79 / 2 */ top: 64.395px; /* 128.79 / 2 */ width: 279.71px; } /* 361:364 — left35.79 right38.79。translate-y-1/2 あり（PC と同じ） */ #section5 .check-card:nth-child(3) .section5__card-body { left: 17.895px; top: 74.645px; /* 149.29 / 2 */ width: 279.71px; } /* 361:370 — left36.22 right39.01 → 幅 (634-36.22-39.01)/2。 **PC(nth-child(4))は translate-y-1/2 を持つが SP の 361:370 は持たない**ので消す。 */ #section5 .check-card:nth-child(4) .section5__card-body { top: 50.225px; /* 100.45 / 2 */ transform: none; width: 279.385px; } /* まとめ文（node 361:371 / 691x144 @left33,top1761 中心）。 28→14px / leading 1.6 → 22.4px / tracking 1→0.5px。 */ #section5 .section5__note { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 * transform/left は SP の top/left が前提にしているので明示する。 */ position: absolute; margin-top: 0; transform: translateY(-50%); left: 16.5px; /* 33 / 2 */ top: 880.5px; /* 1761 / 2 */ width: 345.5px; /* 691 / 2 */ margin-left: 0; font-size: var(--fs-sm); /* 28 / 2 */ line-height: 1.6; letter-spacing: 0.5px; /* 1 / 2 */ } /* ========================================================= * SP10-section6（node 361:373 / 720x1361 device = CSS 360x680.5） * 反転背景の上に白文字を載せる。**DOM は PC と同じ**（背景・見出し2行・ * 本文2ブロック・装飾画像）ので、CSS で座標と寸法を組み替えるだけ。 * **以下の px はすべて design context の device px を 1/2 にした値。** * * 色・書体は PC と同値なので sections.css の指定をそのまま使う * 背景 --bg-deep / 見出し1行目 --c-ink-deep / 2行目・本文 --c-on-dark * 見出し Serif SemiBold / 本文 Sans Regular * * このセクションだけ **フレームが x=30 / 幅720** で、ページ幅750の内側にある。 * → 器そのものを 360px 幅・左15px にずらす。子の座標はフレーム相対なので * PC の「中央基準トリミング」用 margin-left calc は全て 0 に戻す。 * * 積み上げ: #section5 の箱は 947px（1894/2）に固定済みで底は 10170device。 * #section6 の y=10240 との差 70device = 35px（PROGRESS-SP.md / SP09 の申し送り）。 * PC の margin-top:63px を打ち消す。 * ========================================================= */ #section6 { width: 360px; /* 720 / 2 */ height: 680.5px; /* 1361 / 2 */ margin-top: 35px; /* 10240 - 10170 = 70 device */ margin-left: 15px; /* フレーム x=30 device */ } /* 反転背景（node 361:374 / 653x1141 @left0,top81）。 PC(1200x480 @left360)とは寸法も位置も別物なので全て上書きする。 */ #section6 .section6__bg { left: 0; top: 40.5px; /* 81 / 2 */ width: 326.5px; /* 653 / 2 */ height: 570.5px; /* 1141 / 2 */ margin-left: 0; } /* 見出し（node 361:375 / 652x128 @left40,top81 中心）。 66→33px / leading 1.6 / tracking 0.16→0.08px。 PC と同じく translate-y-1/2 で top を中心として扱う。 高さ(128device)は Figma の hug 前の値で、leading 1.6 の実描画とは合わない。 **PC も同じで height を置いていない**ので、面をまたいで揃える判断で置かない。 */ #section6 .section6__heading { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 * transform/left は SP の top/left が前提にしているので明示する。 */ position: absolute; margin-top: 0; transform: translateY(-50%); left: 20px; /* 40 / 2 */ top: 40.5px; /* 81 / 2 */ width: 326px; /* 652 / 2 */ margin-left: 0; font-size: var(--fs-33); /* 66 / 2 */ letter-spacing: 0.08px; /* 0.16 / 2 */ } /* 本文の共通分（node 361:376 / 361:377）。left41 right99 → 幅 (720-41-99)/2。 28→14px / leading 1.5 / tracking 1→0.5px。 PC は 15px / leading 2 / 幅642 なので全て上書きする。 line-height はコンテナ自体にも指定する（PC 側のコメントと同じ理由。 子

だけだと check-attrs がコンテナの computed style から line-height:normal を 拾って wrapsNaturally が NaN で壊れる）。 */ #section6 .section6__text--1, #section6 .section6__text--2 { left: 20.5px; /* 41 / 2 */ width: 290px; /* 580 / 2 */ margin-left: 0; font-size: var(--fs-sm); /* 28 / 2 */ line-height: 1.5; letter-spacing: 0.5px; /* 1 / 2 */ } #section6 .section6__text--1 p, #section6 .section6__text--2 p { line-height: 1.5; } /* 本文1（node 361:376 / top214）。translate-y-1/2 は持たない。 */ #section6 .section6__text--1 { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 */ position: absolute; margin-top: 0; margin-left: 0; top: 107px; /* 214 / 2 */ } /* 本文2（node 361:377 / top755.5 中心）。translate-y-1/2 は PC と同じなので残す。 */ #section6 .section6__text--2 { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 * transform/left は SP の top/left が前提にしているので明示する。 */ position: absolute; margin-top: 0; margin-left: 0; transform: translateY(-50%); top: 377.75px; /* 755.5 / 2 */ } /* 装飾（node 361:378 "top_image008" / 470x470 @left220,top891）。 PC と同じレイヤー・同じマスク後の可視範囲で、device px が同値（470x470）。 CSS px は 1/2 なので 235x235 で置く（別レイヤーの枠への流用ではない）。 */ #section6 .section6__deco { left: 110px; /* 220 / 2 */ top: 445.5px; /* 891 / 2 */ width: 235px; /* 470 / 2 */ height: 235px; margin-left: 0; } /* ========================================================= * SP11-section7（node 361:382 / 750x2094 device = CSS 375x1047） * **DOM は PC と同じ**（背景・見出し・リード・カード3枚・まとめ文）ので、 * CSS で座標と寸法を組み替えるだけ。 * **以下の px はすべて design context の device px を 1/2 にした値。** * * 色は PC と同値なので sections.css の指定をそのまま使う * 見出し・まとめ文 --c-ink / リード・カード本文 --c-ink-2 * カード番号・見出し --c-brand-dark / カード上段 --bg-tint / カード地 --bg-page * * 【箱の高さ】Figma のフレーム高 2094device = 1047px を採る。中身の実範囲 * （まとめ文 361:388 の底 2797device）ではない。**子は全て絶対配置**なので * 箱を 1047px にしても描画は1pxも動かない。`SP05-section2` のカード列・ * `SP07-section4` と同じ構造・同じ判断（clipsContent=false なので切らない）。 * → PC の .section7__body の padding-top(779.44px) は 0 に戻す。 * * 積み上げ: #section6 の箱は 680.5px（1361/2）に固定済みで底は 11601device。 * #section7 の y=11722 との差 121device = 60.5px（PROGRESS-SP.md / SP10 の申し送り）。 * PC の margin-top:109px を打ち消す。#section6 の margin-left:15px は * 兄弟なので引き継がれない。 * ========================================================= */ #section7 { height: 1047px; /* 2094 / 2 */ margin-top: 60.5px; /* 11722 - 11601 = 121 device */ } /* PC はまとめ文だけが通常フローで、その上端ぶんを padding で押し下げている。 SP はまとめ文も絶対配置（Figma 361:388 が top-[2641px] の絶対座標）なので 押し下げは要らない。 */ #section7 .section7__body { padding-top: 0; } /* 背景 top_bg003（node 361:385 "pixta_127879340_M 1"）。 PC・SP とも同じ生画像 2000x1334 を left:0 に置き、マスクで切り出している。 PC mask-size 1920x912 @(0,257) → 生画像の x[0,1920] y[257,1169] SP mask-size 750x912 @(0,256.6) → 生画像の x[0,750] y[256.6,1168.6] **SP の可視範囲は PC の可視範囲の左端 750/1920 にそのまま含まれる**（y のずれは 0.44device = サブピクセル）。書き出し済みの image/top_bg003.jpg は PC の可視範囲 1920x912 と実寸が一致するので、その左 750px を 1/2 に縮めて出せば SP と同じ絵になる。 → 別レイヤーの枠への流用ではなく、同一レイヤーの同一書き出しの部分表示（AGENTS.md）。 器を 375x456 にして img を 960x456（1920x912 の 1/2）に置き、右側を器で切る。 縦横比は 1920:912 = 960:456 で不変なので check-responsive の比率判定にも掛からない。 */ #section7 .section7__bg { left: 0; top: 0; /* -256.56 + 256.561 = 0.001 */ width: 375px; /* 750 / 2 */ height: 456px; /* 912 / 2 */ margin-left: 0; overflow: hidden; /* 器の切り出し。セクション本体には付けない（AGENTS.md の禁則） */ } #section7 .section7__bg img { width: 960px; /* 1920 / 2 */ height: 456px; /* 912 / 2 */ max-width: none; } /* 見出し（node 361:386 / 663x112 @left calc(50%+13.5), top194 中心）。 50→25px / leading 1.6 / tracking 0.16→0.08px。 **PC は Serif SemiBold だが SP は Serif Bold**（ctx 361:386 = Noto_Serif_JP:Bold）。 CONVENTIONS.md「見出しは Serif SemiBold」の例外にあたる。PROGRESS-SP.md に報告。 高さ(112device)は Figma の hug 前の値で leading 1.6 の実描画（2行=80px）と合わない。 **PC も height を置いていない**ので、面をまたいで揃える判断で置かない。 */ #section7 .section7__heading { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 * transform/left は SP の top/left が前提にしているので明示する。 */ position: absolute; margin-top: 0; margin-inline: 0; transform: translate(-50%, -50%); left: calc(50% + 6.75px); /* 13.5 / 2 */ top: 97px; /* 194 / 2 */ width: 331.5px; /* 663 / 2 */ font-weight: var(--fw-bold); font-size: var(--fs-25); /* 50 / 2 */ line-height: 1.6; letter-spacing: 0.08px; /* 0.16 / 2 */ } /* リード文（node 361:387 / 665x97 @left calc(50%+0.5), top334.5 中心）。 28→14px / leading 1.6 / tracking 0.16→0.08px。 PC は translateY だけで左を実座標で置いているが、SP は Figma どおり -translate-x-1/2 も持つので transform ごと差し替える。 */ #section7 .section7__lead { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 * transform/left は SP の top/left が前提にしているので明示する。 */ position: absolute; margin-top: 0; margin-inline: 0; left: calc(50% + 0.25px); /* 0.5 / 2 */ top: 167.25px; /* 334.5 / 2 */ transform: translate(-50%, -50%); width: 332.5px; /* 665 / 2 */ font-size: var(--fs-sm); /* 28 / 2 */ line-height: 1.6; letter-spacing: 0.08px; /* 0.16 / 2 */ } /* カード列（node 361:460 / flex-col gap30 @left30, top450.44）。 PC は横並び3枚（gap30 / .is-in 1200px 中央）なので、器ごと組み替える。 .is-in の width/margin-inline は SP では効かせない。 */ #section7 .section7__cards { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 */ position: absolute; margin-top: 0; left: 15px; /* 30 / 2 */ right: auto; top: 225.22px; /* 450.44 / 2 */ width: 345px; /* 690 / 2 */ margin-inline: 0; flex-direction: column; align-items: flex-start; gap: 15px; /* 30 / 2 */ } /* カード本体（node 361:389 / 361:414 / 361:441）。高さは Figma のフレーム高を採る （白地 361:390/415/442 の 620 / 664 / 627 との差は 0〜1device のサブピクセル）。 */ #section7 .section7__card { width: 345px; /* 690 / 2 */ box-shadow: var(--shadow-card-lg-sp); } #section7 .section7__card:nth-child(1) { height: 310px; } /* 620 / 2 */ #section7 .section7__card:nth-child(2) { height: 332.5px; } /* 665 / 2 */ #section7 .section7__card:nth-child(3) { height: 313.5px; } /* 627 / 2 */ /* カード上段の淡青（node 361:391 / 361:416 / 361:443 / 690x330.474）。 top はフレーム基準の実測（0.44 / 0.44 / -0.38 device）。 */ #section7 .section7__card-top { width: 345px; /* 690 / 2 */ height: 165.237px; /* 330.474 / 2 */ top: 0.22px; /* 0.44 / 2 */ } #section7 .section7__card:nth-child(3) .section7__card-top { top: -0.19px; /* -0.38 / 2 */ } /* アイコン（node 361:395 / 361:418 / 361:445 / 236.053x181.579）。 PC は 130x100 で位置も別。カードごとに Figma の実測位置が違う。 */ #section7 .section7__card-icon { width: 118.0265px; /* 236.053 / 2 */ height: 90.7895px; /* 181.579 / 2 */ } /* 361:395 — left219.71 / top78.52。中央寄せではないので transform は持たない */ #section7 .section7__card:nth-child(1) .section7__card-icon { left: 109.855px; /* 219.71 / 2 */ top: 39.26px; /* 78.52 / 2 */ } /* 361:418 — left-1/2 + -translate-x-1/2（PC と同じ） */ #section7 .section7__card:nth-child(2) .section7__card-icon { top: 41.075px; /* 82.15 / 2 */ } /* 361:445 — left-1/2 + -translate-x-1/2（PC と同じ） */ #section7 .section7__card:nth-child(3) .section7__card-icon { top: 30.68px; /* 61.36 / 2 */ } /* 番号 01/02/03（node 361:394 / 361:440 / 361:458 / 475.737x49.03 中央）。 54.474→27.237px / leading 58.65→29.325px / tracking 0.2905→0.14525px。 箱(49.03device=24.515px)より行の高さ(29.325px)の方が大きいのは Figma と同じで、 justify-center に相当する align-items:center で上下に均等にはみ出す。 361:440 の left-[345px] は 690 の中央なので PC の left:50% と同値。 */ #section7 .section7__card-num { top: 152.745px; /* 305.49 / 2 */ width: 237.8685px; /* 475.737 / 2 */ height: 24.515px; /* 49.03 / 2 */ font-size: 27.237px; /* 54.474 / 2 */ line-height: 29.325px; /* 58.65 / 2 */ letter-spacing: 0.14525px; /* 0.2905 / 2 */ } #section7 .section7__card:nth-child(3) .section7__card-num { top: 152.34px; /* 304.68 / 2 */ } /* カード見出し（node 361:393 / 361:439 / 361:457 / 475.737x49.02 @left107.13）。 36.316→18.158px / leading 58.65→29.325px / tracking 0.2905→0.14525px。 **SP の ctx には text-center が無い**（PC の 250:91 ほかは持つ）ので左揃えに戻す。 PC の white-space:nowrap はそのまま残す。3枚とも字送り込みの実幅が箱幅と 0.1px 差まで詰まっており、折り返させると Figma の1行が2行になる。 */ #section7 .section7__card-title { left: 53.565px; /* 107.13 / 2 */ top: 199.05px; /* 398.1 / 2 */ width: 237.8685px; /* 475.737 / 2 */ height: 24.51px; /* 49.02 / 2 */ justify-content: flex-start; text-align: left; font-size: 18.158px; /* 36.316 / 2 */ line-height: 29.325px; /* 58.65 / 2 */ letter-spacing: 0.14525px; /* 0.2905 / 2 */ } #section7 .section7__card:nth-child(3) .section7__card-title { top: 198.64px; /* 397.28 / 2 */ } /* カード本文（node 361:392 / 361:417 / 361:444）。inset の左右は 0（PC と同じ）。 26→13px / leading 1.75 / tracking 1.8158→0.9079px。 **3枚目だけ 27.237→13.6185px** と刻みが違う（Figma の実測どおり）。 */ #section7 .section7__card-body { font-size: var(--fs-13); /* 26 / 2 */ letter-spacing: 0.9079px; /* 1.8158 / 2 */ } #section7 .section7__card:nth-child(1) .section7__card-body { top: 238px; /* 476 / 2 */ bottom: 26.5px; /* 53 / 2 */ } #section7 .section7__card:nth-child(2) .section7__card-body { top: 238.09px; /* 476.18 / 2 */ bottom: 19.965px; /* 39.93 / 2 */ } #section7 .section7__card:nth-child(3) .section7__card-body { top: 237.91px; /* 475.82 / 2 */ bottom: 28.09px; /* 56.18 / 2 */ font-size: 13.6185px; /* 27.237 / 2 */ } /* まとめ文（node 361:388 / 680x312 @left-1/2, top2641 中心）。 30→15px / leading 2 / tracking 0.16→0.08px。 PC は通常フロー（margin:0 auto / max-width:778px）だが、SP は Figma が 絶対座標を持つので絶対配置に切り替える。箱の外（底 1398.5px）へはみ出すが、 次セクション #flow は 1424px から始まるので重ならない。 */ #section7 .section7__note { position: absolute; left: 50%; top: 1320.5px; /* 2641 / 2 */ transform: translate(-50%, -50%); width: 340px; /* 680 / 2 */ max-width: none; margin: 0; font-size: var(--fs-15); /* 30 / 2 */ line-height: 2; letter-spacing: 0.08px; /* 0.16 / 2 */ } /* ========================================================= * SP12-section8 / #flow（node 361:461 / 750x1514 device = CSS 375x757） * 「ご相談の流れ」。PC の #flow と同じ DOM を CSS で組み替えるだけ。 * **以下の px はすべて Figma の device px を 1/2 にした値。** * * 色・書体は PC と同値なので sections.css の指定をそのまま使う * 見出し・タイトル・まとめ文 --c-ink / STEPラベル --c-brand-dark * 本文 --c-ink-2 / 地 --bg-subtle / 上罫線・カード枠 --c-border / カード地 --bg-page * 見出しは SP も Serif SemiBold（#section5 / #section7 のような Bold への例外は無い）。 * * 積み上げ: #section7 の箱は 1047px（2094/2）に固定済みで底は 13816device。 * #flow の y=14570 との差 754device = 377px（PROGRESS-SP.md / SP11 の申し送り）。 * PC の margin-top:98px を打ち消す。 * ========================================================= */ #flow { height: 757px; /* 1514 / 2。border-top 込み（box-sizing: border-box） */ margin-top: 377px; /* 14570 - 13816 = 754 device */ } /* 見出し（node 361:462 / x=216 y=121 318x51）。50→25px / leading 51→25.5px / tracking 0.16→0.08px。**PC と同じく text-align は left のまま。** Figma 側は auto-width のテキストで width=318device は文字送りの実幅そのもの。 center にすると Chrome の実描画幅との差だけ右へずれる（PC 実装のコメント参照）。 PC は translate(-50%,-50%) で中央に置いているが、SP の Figma 座標は left calc(50% - 159device) なので横の translate を外して実座標で置く。 */ #flow .flow__heading { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 */ position: absolute; margin-top: 0; margin-left: 0; left: 108px; /* 216 / 2 */ top: 73.25px; /* 箱 60.5px（121/2）+ 高さの半分 12.75px */ transform: translateY(-50%); width: 159px; /* 318 / 2 */ font-size: var(--fs-25); /* 50 / 2 */ line-height: 25.5px; /* 51 / 2 */ letter-spacing: 0.08px; /* 0.16 / 2 */ } /* カード3枚（node 361:463 / 361:470 / 361:476 / 690x275・379・296 @x=30）。 Figma は flex-col gap30 の器（361:484 @y=228）に入っているが、PC が既に 3枚を絶対配置で置いているので DOM は組み替えず top だけ差し替える。 絶対配置どうしなので gap は「次の top との差」として現れる（30device = 15px）。 **枠線は PC の 1px のまま上書きしない。** Figma は 1device = CSS 0.5px だが、 Chrome は 0 でない border-width を 1px 未満に丸めない（SP09-section5 の .check-card と同じ既知の扱い）。その結果 padding box が 0.5px 内側に入るが、 PC(sections.css)も枠線1px＋Figma座標そのままで同じ差を持っているので 面をまたいで揃える判断で補正していない。 高さは height ではなく **min-height** にする。Figma のフレーム高は文字の 実描画（Chrome の行送り）と 1〜2px ずれるため、固定だと最終行が枠線を またいで欠ける。カードは絶対配置なので伸びても後続を押さない。 */ #flow .flow__card { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 */ position: absolute; margin-top: 0; margin-left: 0; left: 15px; /* 30 / 2 */ transform: none; width: 345px; /* 690 / 2 */ padding: 20px; /* 40 / 2 */ } #flow .flow__card:nth-of-type(1) { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 */ position: absolute; margin-top: 0; margin-left: 0; top: 114px; /* 228 / 2 */ min-height: 137.5px; /* 275 / 2 */ } #flow .flow__card:nth-of-type(2) { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 */ position: absolute; margin-top: 0; margin-left: 0; top: 266.5px; /* (228 + 305) / 2 */ min-height: 189.5px; /* 379 / 2 */ } #flow .flow__card:nth-of-type(3) { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 */ position: absolute; margin-top: 0; margin-left: 0; top: 471px; /* (228 + 714) / 2 */ min-height: 148px; /* 296 / 2 */ } /* 【SP と PC で並びが変わる唯一の箇所】 components.css の `.flow-step` は **横並び**（`display:flex` の既定 row）で、 `.flow-step__head` を 326px に固定して左に置き、本文を右に流している。 Figma SP（Frame 22 = 361:464 / 361:471 / 361:477）は `flex-col` で **STEPラベル＋タイトルの上に本文が来る縦積み**なので、SP帯で倒す。 倒さないと本文がカードの残り幅（実測 25px）に押し潰されて61行になる。 `align-items` は row 用の center のままだと縦積みで中央寄せになるので flex-start に戻す。head の 326px 固定も外して内寸いっぱい（303px）にする （Figma の Frame 21 は 326device=163px だが、タイトル 361:468 は 409device と それを超える auto-width で、163px にすると Figma の1行が2行に割れる）。 */ #flow .flow-step { flex-direction: column; align-items: flex-start; } #flow .flow-step__head { width: 100%; } /* STEPラベル（node 361:467 / 361:473 / 361:479 / 326x16）。 22→11px / leading 20.9→10.45px / tracking 2.2→1.1px。 */ #flow .flow-step__num { height: 8px; /* 16 / 2 */ font-size: var(--fs-11); /* 22 / 2 */ line-height: 10.45px; /* 20.9 / 2 */ letter-spacing: 1.1px; /* 2.2 / 2 */ } /* タイトル（node 361:468 / 361:480 / h=64device）。34→17px / leading 33.6→16.8px / tracking 0.16→0.08px。 行送りが文字サイズより小さいのは Figma と同じで、箱（32px）の中で justify-center に相当する上下中央に置かれる（PC と同じ作り）。 */ #flow .flow-step__title { min-height: 32px; /* 64 / 2 */ font-size: var(--fs-17); /* 34 / 2 */ line-height: 16.8px; /* 33.6 / 2 */ letter-spacing: 0.08px; /* 0.16 / 2 */ } /* STEP2タイトル（node 361:474 / h=54device）。 **PC は「相談」22px ＋「（その場で現状を整理）」16px の2行だが、SP は 同じ 34→17px の2スパンが1行に並ぶ**（ctx は1つの

の中に2つの ）。 DOM は2つの

なので flex-direction を row に倒して1行に戻す。 箱は 54device = 27px で、他の2枚（64device = 32px）と刻みが違う。 ctx の w-[810px] は Figma の auto-width の残骸（17px x 13字 = 約222px で カードの内寸 304px に収まる）ので写さない。 `justify-content` は PC の center（column での上下中央）のままだと row では **左右中央**の意味になり、タイトルだけがカードの中で中央寄せになる（実測）。 Figma（361:472 = items-start）どおり flex-start に戻す。 */ #flow .flow-step__title--split { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 27px; /* 54 / 2 */ } #flow .flow-step__title--split p:first-child, #flow .flow-step__title--split p:last-child { font-size: var(--fs-17); /* 34 / 2。PC の 22px / 16px の刻みを SP では使わない */ } /* 本文（node 361:469 / 361:475 / 361:481）。24→12px。 **行送りは3枚とも 1.6**（PC は 1.75 / 1.75 / 32px と枚ごとに違うので打ち消す）。 幅は Figma のテキスト箱の実幅で、折り返し位置がこれで決まる。 */ #flow .flow-step__body { font-size: var(--fs-xs); /* 24 / 2 */ line-height: 1.6; } /* STEP1本文（node 361:469 / 557x113）。tracking 1→0.5px。段落2つで明示改行 */ #flow .flow__card:nth-of-type(1) .flow-step__body { width: 278.5px; /* 557 / 2 */ letter-spacing: 0.5px; /* 1 / 2 */ line-height: 1.6; /* PC の 1.75 を打ち消す（カード側の指定の方が詳細度が高い） */ } /* STEP2本文（node 361:475 / 575x227 = 6行）。tracking 1→0.5px */ #flow .flow__card:nth-of-type(2) .flow-step__body { width: 287.5px; /* 575 / 2 */ letter-spacing: 0.5px; /* 1 / 2 */ line-height: 1.6; /* PC の 1.75 を打ち消す（カード側の指定の方が詳細度が高い） */ } /* STEP3本文（node 361:481 / 591x134）。**tracking だけ 0.16→0.08px** と 他2枚（1device）と違う。Figma の実測どおり。 箱の 134device は 24x1.6 の整数倍ではなく（3.49行ぶん）、実描画の2行より 大きい＝下に余白が残る。カードの min-height 148px がその余白を保つ。 */ #flow .flow__card:nth-of-type(3) .flow-step__body { width: 295.5px; /* 591 / 2 */ letter-spacing: 0.08px; /* 0.16 / 2 */ line-height: 1.6; /* PC の 32px 固定を打ち消す */ } /* まとめ文（node 361:482 / x=101 y=1274 548x139）。32→16px / leading 1.6 / tracking 0.16→0.08px。**PC は左揃え・実座標だが SP は text-center かつ 箱の中心 = ページ中心（101 + 274 = 375device）** なので left:50% で置ける。 PC 用の中央基準トリミング補正（margin-left calc）は SP では 0 に戻す。 3行の改行位置は自然折り返しでは出せない（2行目「「まだ迷っている」という段階でも、」 の実幅が箱幅とほぼ同じ）ので index.html に
を2つ入れた。 */ #flow .flow__note { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 */ position: absolute; margin-top: 0; left: 50%; top: 671.75px; /* 箱 637px（1274/2）+ 高さの半分 34.75px */ transform: translate(-50%, -50%); width: 274px; /* 548 / 2 */ margin-left: 0; text-align: center; font-size: var(--fs-16); /* 32 / 2 */ line-height: 1.6; letter-spacing: 0.08px; /* 0.16 / 2 */ } /* ========================================================= * SP13-section9 / #faq（node 378:485 / 750x1805 device = CSS 375x902.5） * 「よくあるご質問」。PC の #faq と同じ DOM を CSS で組み替えるだけ。 * **以下の px はすべて Figma の device px を 1/2 にした値。** * * 色・書体は PC と同値なので sections.css / components.css の指定をそのまま使う * 見出し・設問 --c-ink / Q.ラベル --c-link-faq / 回答 --c-ink-2 * 地 --bg-page / 区切り --bg-faq * ただし **見出しの階調だけ PC(Serif SemiBold) と違い SP は Serif Bold** * （SP ctx 378:486 = font-['Noto_Serif_JP:Bold']）。#section5 / #section7 と同じ例外。 * * 積み上げ: #flow の箱は 757px（1514/2）に固定済みで底は 16084device。 * #faq の y=16114 との差 30device = 15px（PROGRESS-SP.md / SP12 の申し送り）。 * PC の margin-top:29px を打ち消す。 * ========================================================= */ #faq { margin-top: 15px; /* 16114 - 16084 = 30 device */ /* 箱の高さは Figma の「フレーム高」1805device = 902.5px を採る。 中身の実描画（実測 933.14px）ではない。Figma の各行のコンテナ高は 「py60 + 設問 + gap10 + 回答」の合計より 7〜10device 低い値で止まっており （217 に対し中身は 226、174 に対し 184 …）、Chrome の実描画はその分だけ 下へ伸びて 61.28device はみ出す。**はみ出しは切らない** （`clipsContent=false` / AGENTS.md）。#form の y=18008 との間に 89device の 隙間があるので重ならない。SP07-section4 / SP12-section8 と同じ扱い。 */ height: 902.5px; /* 1805 / 2 */ /* 上 100device→50px（見出し箱の上端）。下 46device→23px （箱の底 1759device と フレーム底 1805device の差）。 */ padding: 50px 0 23px; letter-spacing: 0.08px; /* tracking 0.16 / 2 */ } /* 見出し（node 378:486 / left calc(50%-182) top125.5 365x51）。 50→25px / leading 51→25.5px。**PC と同じく実座標に置いて左揃え**にする （text-align:center だと Chrome の実描画幅との差だけ右へずれる。PC 実装のコメント参照）。 箱の上端 100device=50px は #faq の padding-top で取ってあるので margin-top は 0。 下は 箱の底 75.5px → リスト上端 99.5px（199/2）の差 = 24px。 */ #faq .faq__heading { width: 182.5px; /* 365 / 2 */ margin: 0 0 24px; margin-left: calc(50% - 91px); /* 182 / 2 */ font-weight: var(--fw-bold); /* SP は Bold。PC は SemiBold */ font-size: var(--fs-25); /* 50 / 2 */ line-height: 25.5px; /* 51 / 2 */ letter-spacing: 0.08px; /* 0.16 / 2 */ } /* 箱（node 378:487 / left30 right30 top199）。左右が対称なので中央寄せで置ける （PC は x=364 とページ中央から 2px ずれていたが SP はずれていない）。 **SP には PC に無い区切りが出る。** Figma は gap-px + py-px を持ち、 地の --bg-faq が各 .faq-item（白）の隙間から 1device 幅で覗く＝7行の間の6本の線。 1device = CSS 0.5px。上下の border は PC と同じ 1px のまま触らない （Chrome は 0 でない border-width を 1px 未満に丸めない。SP09 の申し送り）。 */ #faq .faq__list { width: 345px; /* 690 / 2 */ margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: 0.5px; /* gap-px = 1 device */ padding-block: 0.5px; /* py-px = 1 device */ } /* 1行ぶんの器（node 378:488 ほか / py-[30px] gap-[10px]）。 **高さは height ではなく min-height で置く。** Figma のコンテナ高は 「py60 + 設問 + gap10 + 回答」の合計より 7〜10device 低い値で止まっており （実測: 217 に対し中身は 226、174 に対し 184 …）、固定すると最終行が 下の区切り線をまたいで欠ける。逆に中身が Figma 高より短い行 （6件目・7件目）では min-height がそのまま Figma の高さを保つ。 components.css の .faq-item は PC 用に height:141px を持つので必ず外す。 */ #faq .faq-item { height: auto; width: 100%; gap: 5px; /* 10 / 2 */ padding-block: 15px; /* 30 / 2 */ } #faq .faq-item:nth-child(1) { min-height: 108.5px; } /* 217 / 2 */ #faq .faq-item:nth-child(2) { min-height: 87px; } /* 174 / 2 */ #faq .faq-item:nth-child(3) { min-height: 137.5px; } /* 275 / 2 */ #faq .faq-item:nth-child(4) { min-height: 130px; } /* 260 / 2 */ #faq .faq-item:nth-child(5) { min-height: 91.5px; } /* 183 / 2 */ #faq .faq-item:nth-child(6) { min-height: 137.5px; } /* 275 / 2 */ #faq .faq-item:nth-child(7) { min-height: 83px; } /* 166 / 2 */ /* 設問の行（node 378:489 ほか）。gap 10→5px / items-start。 PC は height:30px + align-items:center の1行前提なので両方外す （SP は3件が2行になる）。 */ #faq .faq__q { height: auto; min-height: 15px; /* 30 / 2 */ align-items: flex-start; gap: 5px; /* 10 / 2 */ font-size: var(--fs-sm); /* 28 / 2 = 14 */ } /* Q. ラベル（node 378:490 ほか / 30px / leading 30.6px）。 **7件とも 30.6px で PC のような反復ズレが無い**（PC は1件目だけ 30.6px、 残り6件が 18px で ATTRS-EXCEPTIONS.md に記録してある）。 */ #faq .faq__q-label { font-size: var(--fs-15); /* 30 / 2 */ line-height: 15.3px; /* 30.6 / 2 */ } #faq .faq__q-text { font-size: var(--fs-sm); /* 28 / 2 = 14 */ line-height: 15.3px; /* 30.6 / 2 */ } /* 2行になる3件（378:532 / 378:537 / 378:547）だけ leading が 1.5 に変わる。 Figma 側は行ごとに

が分かれた **明示改行**（親が whitespace-nowrap で 自動折り返しが起きない作り）なので、index.html に
を 入れて位置を固定した。PC 帯では .br-sp が display:none で改行ごと消える。 */ #faq .faq-item:nth-child(3) .faq__q-text, #faq .faq-item:nth-child(4) .faq__q-text, #faq .faq-item:nth-child(6) .faq__q-text { line-height: 1.5; } /* 回答（node 378:492 ほか）。26→13px / leading 1.6 / tracking 0.16→0.08px。 PC は height:50px + display:flex + align-items:center の1行前提なので外す。 */ #faq .faq__a { height: auto; display: block; font-size: var(--fs-13); /* 26 / 2 */ line-height: 1.6; letter-spacing: 0.08px; /* 0.16 / 2 */ } /* ========================================================= * SP14-form / #form（node 378:559 / 750x1831 device = CSS 375x915.5） * 「ひとりで抱えず、まず話を聞かせてください。」+ HubSpot 埋め込み。 * **以下の px はすべて Figma の device px を 1/2 にした値。** * * 色・書体は PC と同値なので sections.css の指定をそのまま使う * 地 --bg-form / 見出し --c-on-dark（Serif SemiBold）/ 本文 --c-border-2 * 注記 --c-muted-2 / 白箱 --bg-page / 箱の見出し --c-muted * * **フォーム本体（ラベル・input・textarea・送信ボタン / node 378:564〜378:581）は * HubSpot が iframe で描画するので、こちらの CSS からは一切変えられない。** * PC 実装（sections.css「HubSpotフォームの見た目合わせ」）と同じく、 * ここで面倒を見るのは「白い箱の位置・幅・余白」と箱の上の見出しだけ。 * * 積み上げ: #faq の箱は 902.5px（1805/2）に固定済みで底は 17919device。 * #form の y=18008 との差 89device = 44.5px。PC は隙間 0px（margin-top 無し）。 * ========================================================= */ #form { margin-top: 44.5px; /* 18008 - 17919 = 89 device */ /* 高さは Figma のフレーム高 1831device = 915.5px。ただし **固定はしない。** PC と同じ理由で、HubSpot の実フォームはモック(4項目)と中身が違い 白い箱に収まらないので、箱と器を中身に追従させる（min-height で下限だけ保つ）。 下の 36px は Figma の「箱の底 1759 → セクション底 1831」= 72device をそのまま残したもの。 */ min-height: 915.5px; /* 1831 / 2 */ padding-bottom: 36px; /* 72 / 2 */ } /* 見出し（node 378:560 / left 50% top146 604x102、上下中央寄せ）。 40→20px / leading 1.6 / tracking 0.16→0.08px。書体は PC と同じ Serif SemiBold。 **Figma は2行の明示改行**（

が2つ）で、箱幅 302px に対し自然折り返しだと 「ひとりで抱えず、まず話を聞か / せてください。」と 14文字目で切れて位置が合わない。 index.html に
を入れて改行位置を固定した（PC帯では消える）。 箱の 51px は2行の実描画 64px より低いが、translateY(-50%) で中心が top146device に 揃うので見た目は Figma と一致する（PC の見出しも 1行 40px に対し箱 102px で同じ作り）。 */ #form .form__heading { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 * transform/left は SP の top/left が前提にしているので明示する。 */ position: absolute; margin-top: 0; margin-inline: 0; transform: translate(-50%, -50%); left: 50%; top: 73px; /* 146 / 2 */ width: 302px; /* 604 / 2 */ height: 51px; /* 102 / 2 */ font-size: var(--fs-20); /* 40 / 2 */ line-height: 1.6; letter-spacing: 0.08px; /* 0.16 / 2 */ } /* 本文（node 378:561 / left 50% top261 702x344）。28→14px / leading 1.6 / tracking 0.16→0.08px。4つの

は PC と同じで、1つ目だけが箱幅 351px に対して 2行に折り返す（36文字 x 14px = 504px）。Figma 側も同じ幅・同じ書体なので 折り返し位置は一致する。 箱の 172px は実描画（5行 x 22.4px = 112px）より高いが、上端そろえなので 見た目に出ない。Figma のフレーム高をそのまま採る（下の注記とは重ならない)。 **line-height は

だけでなくこの器にも置く。** Figma の 378:561 は 器側に書体・字間を持ち、4つの

がいずれも leading-[1.6] なので値としては同じもの。 器に無いと computed が `normal` になり、`check-attrs` の自然折り返し判定 （line-wrap.js の wrapsNaturally）が行高を数値化できず NaN で常に false に倒れて、 1つ目の

の自然折り返しを「改行位置がFigmaと違う」と誤検出する（実測 2026-08-25）。 器の直下にテキストノードは無いので**描画は1pxも変わらない**。 */ #form .form__lead { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 * transform/left は SP の top/left が前提にしているので明示する。 */ position: absolute; margin-top: 0; margin-inline: 0; transform: translateX(-50%); left: 50%; top: 130.5px; /* 261 / 2 */ width: 351px; /* 702 / 2 */ height: 172px; /* 344 / 2 */ font-size: var(--fs-sm); /* 28 / 2 = 14 */ line-height: 1.6; letter-spacing: 0.08px; /* 0.16 / 2 */ } /* PC は 32px 固定。SP は leading-[1.6]。 */ #form .form__lead p { line-height: 1.6; } /* 注記（node 378:562 / left calc(50%+3px) top555 760x28、上下中央寄せ）。 26→13px / leading 28.5→14.25px / tracking 0.16→0.08px。 **PC は左寄せの箱（translateX 無し）だが SP は translate(-50%,-50%) の自己センタリング** なので transform を上書きする。 箱幅 380px は器の 375px より 5px 広く左右に 2.5px ずつはみ出すが、実描画は 24文字 x 13px = 312px の1行で中央に収まる。はみ出しは base.css の `html, body { overflow-x: clip }` で切られる（セクションに overflow は付けない）。 */ #form .form__note { /* PC は器（フロー）で組んでいるので SP では絶対配置に戻す。 * margin は PC のフロー用の値が残ると位置がずれるので打ち消す。 */ position: absolute; margin-top: 0; margin-left: 0; left: calc(50% + 1.5px); /* 3 / 2 */ top: 277.5px; /* 555 / 2 */ transform: translate(-50%, -50%); width: 380px; /* 760 / 2 */ font-size: var(--fs-13); /* 26 / 2 */ line-height: 14.25px; /* 28.5 / 2 */ letter-spacing: 0.08px; /* 0.16 / 2 */ } /* 白い箱（node 378:563 / left calc(50%-0.5px) top643 709x1116）。 PC の 800x721 @ margin-top403 を SP の実寸へ差し替える。 PC と同じく **高さは固定しない**（HubSpot の実フォームは 11項目あり Figma の モック 4項目より背が高い）。min-height に Figma の 558px を残してあるので、 HubSpot が読み込めない環境でも箱は崩れない。 上パディング 35px は Figma の「箱の上端 → 見出しの上端」 = 82.02 - 24.007/2 = 70.02device ÷ 2 ≒ 35px で、**PC と同値**なので触らない。 左右パディングも PC と同じく 0（HubSpot 側が内側余白を持っており二重に入ると細くなる）。 `margin-inline: auto` は PC の `margin: 403px auto 0` を引き継ぐ。 */ #form .form__embed { width: 354.5px; /* 709 / 2 */ min-height: 558px; /* 1116 / 2 */ margin-top: 321.5px; /* 643 / 2 */ } /* 「無料相談フォーム」（node 378:564 / left40.43 top82.02 / 32px / leading 31.209px / tracking 2.2996px）。HubSpot は見出しを描画しないので こちらで出す（PC 実装と同じ）。 */ #form .form__embed-title { padding-inline: 20.215px; /* 40.43 / 2 */ font-size: var(--fs-16); /* 32 / 2 */ line-height: 15.6045px; /* 31.209 / 2 */ letter-spacing: 1.1498px; /* 2.2996 / 2 */ } /* ========================================================= * SP15-footer（node 250:363 / 750x285.6 device = CSS 375x142.8） * **以下の px はすべて design context の device px を 1/2 にした値。** * 背景(--bg-footer)・文字色(--c-muted)・書体(sans/regular)・中央揃えは * PC と同値なので sections.css の指定をそのまま使う。 * PC と違うのは「1行 space-between」→「2行 縦積み中央」の組み替えだけ。 * * 積み上げ: **margin-top は置かない（置けない）。** * 直前の `#form`(SP14-form) が blocked で SP 実装が無く、SP帯でも PC の箱が * そのまま描画される。Figma SP の #form は 1831device=915.5px だが、実描画は * **1781.70〜1814.70px**（HubSpot の iframe が 1151px と 1184px の間で揺れる）。 * つまり footer の上端は Figma より 1732〜1798device 下にあり、 * **その値が実行ごとに 66device 動く。** 整数pxの補正を置いても決定的に合わない。 * さらに補正は負（約 -889px）になるので、置くと footer の暗幕が * HubSpot フォームの上に重なって描画される（見た目が壊れる）。 * → 補正を置かず、`stack-check --sp` の赤は PROGRESS-SP.md に報告して残す。 * PC 側も同じ現象を「★幾何検査が赤くなる（想定内）」として PROGRESS.md に * 記録済みで、S15-footer の margin-top は 0 のままにしてある。 * ========================================================= */ /* .is-in（width:1200px / margin-inline:auto）は SP では効かせない。 padding-top で1行目の上端を作るのは **margin では作れない** ため。 footer__inner は display:block で padding も border も無いので、 子の margin-top は親をすり抜けて（マージン相殺）footer ごと押し下げてしまう。 */ footer .footer__inner { width: 100%; display: block; box-sizing: border-box; height: 142.8px; /* 285.6 / 2 */ padding-top: 40px; /* 1行目の箱の上端 = (97 - 34 / 2) / 2 */ text-align: center; } /* 2行とも Figma では行間が箱の高さと一致しない絶対配置の箱 （383:584 は h=34px に leading 45.6px、250:364 は h=47px に leading 22.8px）。 箱の高さで積み、行はその中で上下中央に置く＝Figma の `flex flex-col justify-center` と同じ組み方にする。 */ footer .footer__text { display: flex; align-items: center; justify-content: center; } /* サイト名（node 383:584 / 750基準で 311.541x34、中心 y=97） */ footer .footer__text:first-child { height: 17px; /* 34 / 2 */ font-size: var(--fs-xs); /* 24 / 2 = 12 */ line-height: 22.8px; /* 45.6 / 2 */ letter-spacing: 0.72px; /* 1.44 / 2 */ } /* リンク行（node 250:364 / 750基準で 743x47、中心 y=173.5） 上端 = (173.5 - 47 / 2) / 2 = 75px。直前の箱の下端が 40 + 17 = 57px なので 18px 空ける。 */ footer .footer__text:last-child { height: 23.5px; /* 47 / 2 */ margin-top: 18px; /* 75 - 57 */ font-size: var(--fs-13); /* 26 / 2 */ line-height: 11.4px; /* 22.8 / 2 */ letter-spacing: 0.36px; /* 0.72 / 2 */ } /* ========================================================= * SP16-div — #cta-bar（node 250:370 / 750x149.18 device = CSS 375x74.59） * PC の S16-ctabar と同じ DOM。位置・寸法・文字だけ SP 値に差し替える。 * device px はすべて 1/2 にしてから書いている。 * 背景 #101c33(--bg-deep) / backdrop-blur 6device = CSS 3px は PC と同値なので * 上書きしていない（PC 側 sections.css の指定がそのまま正しい）。 * * 積み上げ: **margin-top の補正は意図的に置いていない。** 直前の footer 底に * 隙間0で接しており（DOM 実測 footer 底 = #cta-bar 上端、Figma も footer 底 * 20124.6 と #cta-bar 20125 で差 0.4device）、相対位置は Figma どおり。 * `stack-check --sp` の絶対ズレ +1577.41device は **全額が blocked の * SP14-form / SP15-footer の持ち越し**で、SP16 側の CSS では消せない。 * 内訳（2026-08-25 再実測 / CSS px）: * #form 高さ DOM 1814.70 − Figma 915.50 = +899.2 * footer 高さ DOM 77.00 − Figma 142.80 = −65.8 * #faq→#form 隙間 DOM 0.00 − Figma 44.50 = −44.5 * 合計 = +788.9（= 1577.8device） * SP16 由来の項は1つも無い。 * * ここに固定値の margin-top を入れてはいけない。理由は2つとも実測で確定している。 * (1) #cta-bar を footer とフォームに 788px 食い込ませることになる * (2) **#form の高さが決定的でない。** networkidle 待ちの同一条件で * 1814.70 / 1814.70 / 1781.70px を観測（3連続実測）。振れ幅 33px = 66device は * 許容 2device px の33倍で、どんな定数を置いても通らない。 * → SP14-form / SP15-footer が done になれば自動的に解消する。 * （詳細は PROGRESS-SP.md「共通部品が足りないときの報告」の SP16 の行） * ========================================================= */ #cta-bar { height: 74.59px; /* 149.18 / 2 */ } /* リード（node 250:371）。26→13px / leading 49.4→24.7px / tracking 0.32→0.16px。 色は PC の白(--c-on-dark)ではなく #b9c3d4(--c-border-2)。 Figma は

が2つに分かれた明示改行なので index.html に
を入れて位置を固定した（PC帯では .br-sp が display:none で改行ごと消える）。 line-height は PC 側 sections.css の 24.7px と同値になるが、**依存させずに SP 側でも明示する。** 一致は偶然（PC は 1920設計の実測値、SP は 49.4device の 半分）で、PC 側が変わったとき SP が黙って引きずられるのを防ぐ。 */ #cta-bar .ctabar__lead { left: calc(50% - 171.5px); /* -343 / 2 */ top: calc(50% - 0.845px); /* -1.69 / 2 */ width: 171.29px; /* 342.58 / 2 */ font-size: var(--fs-13); /* 26 / 2 */ line-height: 24.7px; /* 49.4 / 2 */ color: var(--c-border-2); } /* CTA（node 250:372）。335x101 device = CSS 167.5x50.5 / rounded 6→3px(--r-btn)。 .scp1--sm の padding(10px 26px)+min-height(47px) は PC 1920 設計の値なので外し、 SP08-div と同じく箱側で高さを作る（Figma は固定高が勝つ）。 */ #cta-bar .ctabar__cta { left: calc(50% + 87.75px); /* 175.5 / 2 */ top: calc(50% - 0.045px); /* -0.09 / 2 */ width: 167.5px; /* 335 / 2 */ min-height: 50.5px; /* 101 / 2 */ padding: 0; } /* SP の CTA にはメールアイコンが無い（design context は 250:373 のテキスト1つだけ）。 flex アイテムごと消えるので gap:10px も効かなくなる。 */ #cta-bar .ctabar__cta .icon-mail { display: none; } /* ラベル（node 250:373）。30→15px / Medium(500) / leading 26.6→13.3px / tracking 0.16→0.08px。実測幅 151px（302/2）は 10文字 x 15px + tracking と一致する。 */ #cta-bar .ctabar__cta-label { font-size: var(--fs-15); /* 30 / 2 */ line-height: 13.3px; /* 26.6 / 2 */ letter-spacing: 0.08px; /* 0.16 / 2 */ } /* PC は「お問い合わせフォームはこちら」、SP は「お問い合わせはこちら」で文言が違う。 CSS では文字を差し替えられないので両方を span で持ち、面ごとに片方を消す （.br-sp / .br-pc と同じ仕組み）。display:none は flex アイテムごと外れるので PC の gap:10px は img + span の1箇所のまま変わらない。 */ #cta-bar .ctabar__cta-label--pc { display: none; } /* SP帯では PC 専用の改行を消す。`.br-sp` の対（PC帯側は下の min-width で処理）。 display:none にすると改行そのものが無くなる（PROGRESS-SP.md / SP02 の実測）。 */ .br-pc { display: none; } } /* --- PC帯では SP専用ブロックを出さない ------------------------------------ 媒体クエリの「外」に置いてよい唯一の例外がこれ。 SP専用ブロックは PC のデザインに存在しないので、PC帯で消しておかないと PC の積み上げ（stack-check）が丸ごとずれる。 min-width 側の媒体クエリで囲ってあるので PC 以外には効かない。 境界は SP帯（max-width: 767px）と対で 768（2026-08-25 に 1280 → 768）。 */ @media (min-width: 768px) { #sp-cta2 { display: none; } /* S02-mv の SP専用ブロック / SP16-div の SP専用ラベル / SP専用の改行。 いずれも PC のデザインには存在しないので PC帯で消しておく（PC の積み上げを1pxも動かさないため）。 .br-sp は display:none にすると改行そのものが無くなるので、隣り合う 2つの .mv__heading-sub は PC では 1つの span と同じに描画される。 */ #mv .mv__lead, .ctabar__cta-label--sp, .br-sp { display: none; } /* は S02-mv(sp_imageA.jpg) と SP05-section2(sp_top_bg001.jpg) で SP画像へ切り替えるために足した器。 器に高さが無いと中の img の height:100% が auto に落ちて PC の背景が潰れる。 */ #mv .mv__bg picture, #section2 .section2__bg picture { display: block; width: 100%; height: 100%; } } /* --- 中間帯（768〜1279px）: 器が縮んだときのカード列の組み替え --------------- service-site方式（D20）。コンテンツは原寸のまま、収まらないカードは折り返す。 1920px はもちろん、この帯に入らない幅（>=1280）には一切影響しない。 なぜ sections.css に書かないか: sections.css は「1920pxデザインの正本 + 器の クランプ」だけを持つ約束。幅条件つきの組み替えは sp.css の媒体クエリに置く （service-site の 900〜1279px ブロックと同じ構成）。 */ @media (min-width: 768px) and (max-width: 1279px) { /* S02-mv → S03-lead: mv の見出し(min(928px, 100%-48px))はこの帯で折り返して 背が伸びる。#lead の margin-top:-197px は「mvの箱=780px固定」前提の値なので、 折り返し量だけ #lead がチェックリストに食い込む（実測 768px で約64px重なった）。 → mv の箱を中身に追従させ（min-height:0）、#lead は「リストの底 + 39px」に 付け替える。39px は 1920px 実測の設計ギャップ（lead top 667 - リスト底 629） そのものなので、折り返しが起きない幅(1248〜1279px)では 1280px 以上と 1px も違わない位置に出る。mv の背景写真は絶対配置の 780px のままなので、 lead/cta1 が写真に重なる見た目（1920px の設計どおり）も変わらない。 */ #mv { min-height: 0; } #lead { margin-top: 38px; } /* S06-section2 → S07-section3: #section3 の margin-top:-343px は 「section2の箱=1094px固定・カード1列」前提。カードが折り返すと カード列に見出しが食い込む（実測 768px で約253px重なった）。 → section2 の箱を中身（カード列の底）に追従させ、section3 は 「カード列の底 + 83.56px」に付け替える。83.56px は 1920px 実測の 設計ギャップ（section3 top 2626 - カード底 2542.44）。 */ #section2 { min-height: 0; } #section3 { margin-top: 83.56px; } /* S07-section3 の写真2枚は、狭い帯では本文と重なる（写真は中央基準で スライドするが本文カラムは gutter で止まるため）。写真は装飾なので、 本文カラムと重ならない幅まで**比率を保って**縮める（文字は縮めない）。 */ /* グラデーション矩形(960x480): 中央基準で左へスライドすると本文1 （右端490px）に被り、濃紺の文字が青地に乗って読めなくなる。 スライドは維持しつつ、左端を 520px（本文右端 + 30px）で頭打ちにする。 クランプが効くのは vw < 1040px のときだけなので、1280px との継ぎ目 （vw 1279 で left 639.5px）は連続する。 */ #section3 .section3__deco--gradient { left: max(calc(960px + (100% - 1920px) / 2), 520px); margin-left: 0; } /* photo1(640x360): 右端 gutter に寄せ、左は本文1の右端(490px) + 隙間30px まで。 544 = gutter 24 + 本文右端 490 + 30。器の高さは img に追従させる */ #section3 .section3__deco--photo1 { left: auto; right: var(--gutter); margin-left: 0; width: min(640px, calc(100% - 544px)); height: auto; } /* photo2(621x424 の枠に 932x636 を縮小して全体表示): 左端 gutter に寄せ、 右は本文2の左端（右端クランプ時 100% - 491px）- 隙間30px まで。 545 = 本文幅 467 + gutter 24 + 30 + gutter 24。 img は枠と同サイズで一緒に縮める（クリップしない） */ #section3 .section3__deco--photo2 { left: var(--gutter); margin-left: 0; width: min(621px, calc(100% - 545px)); aspect-ratio: 621 / 424; height: auto; } #section3 .section3__deco--photo2 img { width: 100%; height: auto; } /* S06-section2: カード4枚(280px固定)。器が 1120px を下回ったら折り返して中央寄せ。 gap 20px は「vw 1248〜1279（器=1200px）で折り返しが起きない」上限 （280*4 + 20*3 = 1180 <= 1200）。 */ #section2 .section2__cards { flex-wrap: wrap; justify-content: center; gap: 20px; } /* S11-section7: カード3枚(380px固定・gap30)。器が 1200px を下回ったら折り返し。 */ #section7 .section7__cards { flex-wrap: wrap; justify-content: center; } } /* S09-section5: 2x2 グリッド(カード525px・中身は絶対配置の固定幅)。 列幅が 495px を下回ると中の本文(463.89px固定)が切れるので、その手前で1列にする。 境界 1067px = 列幅 (vw - 48 - 30) / 2 が 495px になる幅。 カード高さは PC と同じ設計値 171.5px（= (373 - 30) / 2）を4行に並べる。 */ @media (min-width: 768px) and (max-width: 1067px) { #section5 .section5__cards { height: auto; grid-template-columns: minmax(0, 525px); grid-template-rows: repeat(4, 171.5px); justify-content: center; } } /* --- B案（index-b.html / PC_B 309:270）の SP差分 ----------------------------- **SP_B は Figma に存在しない**（page-full metadata で確認）。SP_A のスロットに 合わせた類推実装: A の見出し帯は top 116.25px 中心・3行x35px = 63.75〜168.75px。 B は「1行目(2行に折る) + 2行目」の計3行を同じ帯に流し込む。 書体・サイズ・字間は A の SP 見出し（Black / 25px / lh35 / 0.46px）をそのまま使い、 色だけ PC_B の指定（1行目 --c-brand / 2行目 --c-ink）が継承される。 .mv__heading の基本指定（absolute / translateY / left:25px 等）は上の `#mv .mv__heading` ルールから継承し、ここでは B 専用の差分だけ上書きする。 （このクラスは index-b.html にしか出ないので index.html には効かない） */ @media (max-width: 767px) { #mv .mv__heading--b1 { top: 99.75px; /* 2行ブロック(70px)の中心 = 帯上端 63.75 + 35 */ margin-top: 0; margin-left: 0; /* PC の margin-left: max() を打ち消す（SPは left:25px 基準） */ width: 338.5px; } #mv .mv__heading--b2 { top: 152.25px; /* 1行(35px)の中心 = b1 の底 134.75 + 17.5 */ margin-top: 0; margin-left: 0; width: 338.5px; } /* ul の位置は A と同じ（SPの #mv .mv__list が absolute + top を持つ）。 PC 側 .mv__list--b の margin-top:46.5px だけ確実に打ち消す */ #mv .mv__list--b { margin-top: 0; } }