/* ============================================================ section-checklist — 課題リスト(チェック付きの箇条書き) ============================================================ Figma: Solution_v1(635:200) 実測日: 2026-08-06(get_design_context の実値。get_metadata は使っていません) ● 色は必ずテーマ変数を経由します(第4章)。新しい色は使いません。 background_lightgrey #F7F7F7 → --color-bg-gray (帯の背景) background_white #FFFFFF → --color-white (ボックスの背景) font_sub #6E7680 → --color-sub (ボックスの枠線) font_black #333333 → --color-text (文字) logo_orange #FB7A0D → --color-orange (強調の文字・見出しの下の線) ⚠ チェックのアイコンだけは色がSVGの中に焼き込まれており、 テーマ変数には追従しません( なので外部のCSS変数が届かないため)。 既存の service-icons/*.svg と同じ性質です。 */ .section-checklist { /* --- 帯の余白 --- 🔴 このモジュールは外枠の padding を持ちます。自分が器(全幅の帯)だからです。 → CLAUDE.md 第5章「自分が器であるモジュールは、外枠の padding を持つ」 ● 左右(Figma: px-[100px]) ● 上下は **テーマの余白設定に追従させます**(Figma の py-[120px] は使いません)。 直値を書くと編集画面のスライダーに追従しません(第4章)。 **カンプと40px違いますが、テーマ共通のルールを優先しています。** */ --band-padding-x: 100px; /* --- 見出しブロック → ボックス(Figma: 635:201 の gap-[48px]) --- */ --gap-heading-to-box: 48px; /* --- 見出し → 下の線(Figma: 635:206 の gap-[8px]) --- */ --gap-heading-to-rule: 8px; /* --- 見出しの下の短い線(Figma: 635:208) --- ⚠ 色は --color-orange です。書き出したSVGで stroke="#FB7A0D" を確認しました。 推測ではありません。section-steps の STEP の下の線と同じ色です。 ⚠ 装飾の線で、状態を示す合図ではないため、 コントラストの基準(1.4.11 の 3:1)の対象になりません(第10章)。 */ --rule-width: 100px; --rule-thickness: 1px; /* --- 白いボックス(Figma: 635:209) --- 🔴 カンプは min-width: 1000px ですが、**max-width として実装しています。** min-width のままだと、狭い画面で器からはみ出します(6-1「変わっても崩れない」)。 広い画面では1000pxで頭打ちになり、カンプと同じ見た目になります。 ⚠ padding はカンプの2段構造(ボックスの上下48px + 内側の左右96px)を 1段にまとめたものです。要素が1つ減るだけで、見た目は同じです。 */ --box-max-width: 1000px; --box-padding-y: 48px; --box-padding-x: 96px; --box-radius: 8px; --box-border: 1px; /* --- 項目(Figma: 635:216 の gap-[32px] / 635:217 の gap-[16px]) --- */ --gap-items: 32px; --gap-icon-to-text: 16px; --icon-size: 30px; /* --- 文字(Figma) --- */ --size-heading: 40px; /* Noto Sans JP Bold 700 / 行間 1.5 / 字間 2% */ --size-item: 20px; /* Noto Sans JP Medium 500 / 行間 1.5 */ /* 見出しの字間。 Figma のスタイル定義は letterSpacing: 2(パーセント)で、 生成されたCSSは tracking-[0.8px](40px の 2%)。 em で書くことで、文字サイズを落としても比率が保たれます (section-intro-cards の大きな小見出しと同じ扱い)。 */ --heading-letter-spacing: 0.02em; } /* 1. 帯 -------------------------------------------------------------------------- 🔴 background-color は「重複だから」と消さないこと。 is-full-bleed の :has() が効かない環境で器が残ったときの**保険**です (REVIEW.md 例外14)。 */ .section-checklist { background-color: var(--color-bg-gray); padding: var(--dnd-section-padding-y) var(--band-padding-x); } /* 2. 中身の器 -------------------------------------------------------------------------- ⚠ max-width は第5章の「共通パーツに幅を持たせない」の例外です。 幅を決めるのではなく上限だけを決めるためで、モジュールが持ってよい指定です。 🔴 直値(1200px)を書かず --container-width を参照します(第4章)。 ⚠ align-items は指定していません。**指定しないこと。** 縦並びの flex で align-items: center を書くと「左右の揃え」の意味になり、 ボックスが内容幅まで縮みます(CLAUDE.md 第5章の罠)。 中央寄せは、見出しは text-align、ボックスは margin: 0 auto で行っています。 */ .section-checklist__inner { display: flex; flex-direction: column; gap: var(--gap-heading-to-box); margin: 0 auto; max-width: var(--container-width); } /* 3. 見出しブロック -------------------------------------------------------------------------- ⚠ text-align: center だけで中央に寄せています。flex を使っていません。 下の線は inline-block なので、この指定だけで一緒に中央へ寄ります。 第5章の「縦並びの flex で align-items が幅を縮める」罠を避けるためです。 */ .section-checklist__head { text-align: center; } /* ⚠ margin-bottom で線との間隔を取っています(第5章の margin-bottom 統一)。 ⚠ white-space: pre-line で入力どおりに改行します。 */ .section-checklist__heading { color: var(--color-text); font-family: var(--font-base); font-size: var(--size-heading); font-weight: 700; letter-spacing: var(--heading-letter-spacing); line-height: 1.5; margin: 0 0 var(--gap-heading-to-rule); white-space: pre-line; } /* 見出しの下の短い線。 ⚠ inline-block にしているのは、親の text-align: center で中央に寄せるためです。 block にすると幅100pxの箱が左端に付きます。 */ .section-checklist__rule { background-color: var(--color-orange); display: inline-block; height: var(--rule-thickness); vertical-align: middle; width: var(--rule-width); } /* 4. 白いボックス(項目の一覧) -------------------------------------------------------------------------- ⚠