@charset "utf-8";
/*
  カラコンMooN フロントのデザインシステム（04_front_screens §2-1）— 唯一の正本

  ==================================================================
  【必須】インラインの <style> に戻さないこと
  ==================================================================
    2026-08-24 に一度インラインで実装し、テストを落とした。
    レイアウトの <style> はクラス名の文字列を【全ページのHTML】に混ぜるため、
    assertDontSee('product-images') のような否定の検査が
    「CSS の側で一致して」落ちる（ProductContentRenderTest ほか）。
    外部ファイルなら HTML にクラス名が出ない。
    あわせて、全ページで約12KB を送らずに済み、ブラウザにキャッシュされる。

  ==================================================================
  【必須】ビルド手順を増やさないこと
  ==================================================================
    素の .css である。Tailwind / Vite を有効化しないこと。
    vite.config.js と package.json の Tailwind 4 は Laravel 初期
    スキャフォールドの残骸であり、@vite を呼ぶのは welcome.blade.php（これも残骸）だけ。
    有効化すると Xserver 共用へのデプロイ手順に npm ビルドが増える（09_deployment に無い）。
    管理画面が 2026-08-18 の刷新でも素の CSS を選んだのは同じ理由である。

  ==================================================================
  【必須】admin の CSS を持ち込まないこと
  ==================================================================
    .btn / .msg / .card / .row は front と admin で同じ名前だが別定義である。
    admin 側は --brand / --chip / --shadow 等のトークン前提であり、front に貼ると色が沈む。
    front はライト固定（PC表示制限により実機はスマートフォンであり、
    現行サイトもダークモードを持たない＝トンマナを合わせる）。

  ==================================================================
  配色の出所（2026-08-24 に現行サイト https://www.galmol.com/moon/ で実測）
  ==================================================================
    ヘッダ/フッタ  #000（.global_header の背景色）
    リンク         rgb(219,12,102) = #db0c66（a の色）
    価格           rgb(204,0,0) = #cc0000（.price の色・700）
    カートに入れる rgb(255,125,125) = #ff7d7d・白文字・radius 4px・16px/700
    見出し h2      #444 / 700 ／ h3 の帯 #f5f5f5
    ローズ系       #d6637d #bb0b40 #f4b3c1 #fbe1e7（legacy CSS の頻出色）
    本文           #333 ／ 罫線 #ccc #e5e5e5
    フォント       ヒラギノ角ゴ

    【必須】この配色は「現行サイトと同じトンマナにする」という指示に基づく。
    変えるときは、それ自体が判断である（近藤氏）。
*/
    /* ============================================================
       1. トークン
       ============================================================ */
    :root {
        /* 面 */
        --bg: #fff;
        --band: #f5f5f5;
        --band-2: #fafafa;
        --header: #000;
        /* 文字 */
        --ink: #333;
        --ink-strong: #222;
        --sub: #777;
        --sub-2: #999;
        --on-dark: #fff;
        /* 罫線 */
        --line: #e5e5e5;
        --line-2: #ccc;
        /* ブランド */
        --accent: #db0c66;
        --crimson: #bb0b40;
        --rose: #d6637d;
        --rose-pale: #fbe1e7;
        --cta: #ff7d7d;
        --cta-press: #f26a6a;
        --price: #cc0000;
        /* 状態（意味色。ブランド色と混ぜない） */
        --info: #0b6bab;
        --info-bg: #eef6fb;
        --warn: #a15c00;
        --warn-bg: #fdf3e3;
        --ok: #2c6b2f;
        --ok-bg: #eef7ee;
        --danger: #b3261e;
        --danger-bg: #fdecea;
        /* 余白（4の倍数） */
        --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
        --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;
        /* 角丸 */
        --r1: 4px; --r2: 8px; --r3: 999px;
        /* 影 */
        --shadow: 0 1px 3px rgba(0,0,0,.08);
        /* 寸法 */
        --page: 480px;
        --tap: 44px;   /* タップ領域の下限 */
        /* ## 基底の `input[type=text]` の【内側の高さ】＝ 48px（2026-09-11 実測）——
           ##   font-size 16px × line-height 1.5 ＝ 24px ＋ 上下の padding var(--s3)。
           ## 【必須】`--tap`（44px）と取り違えないこと ——
           ##   あちらは「押せる大きさの下限」、こちらは「入力欄の見た目を揃える値」であり、
           ##   4px 違う。揃えたつもりで揃わない。
           ## 【必須】基底の padding / line-height を変えたらここも直すこと ——
           ##   食い違うと、GMO の iframe の欄だけ高さがずれる（`CheckoutTest` が突き合わせる）。 */
        --field-inner: calc(24px + var(--s3) * 2);
    }

    /* ============================================================
       2. リセットと基本
       ============================================================ */
    *, *::before, *::after { box-sizing: border-box; }

    html { -webkit-text-size-adjust: 100%; }

    body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        line-height: 1.7;
        font-size: 15px;
        font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
                     -apple-system, BlinkMacSystemFont, "Segoe UI",
                     "Noto Sans JP", system-ui, sans-serif;
        /* 下部の固定バーぶん（.sticky-cta）を空けておく */
        padding-bottom: env(safe-area-inset-bottom);
    }

    img { max-width: 100%; height: auto; vertical-align: bottom; }

    a { color: var(--accent); text-decoration: none; }
    a:hover, a:focus-visible { text-decoration: underline; }

    /* 【必須】フォーカスリングを消さないこと（キーボード・支援技術の唯一の手掛かり） */
    :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

    hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }

    /* ============================================================
       3. レイアウト骨格
       ============================================================ */
    .wrap {
        max-width: var(--page);
        margin: 0 auto;
        padding: 0 var(--s4) var(--s8);
    }

    /* --- ヘッダ（現行サイト＝黒帯・ロゴ左・カート/Myページ右） --- */
    header.site {
        background: var(--header);
        color: var(--on-dark);
        position: sticky;
        top: 0;
        z-index: 30;
    }
    .site-bar {
        max-width: var(--page);
        margin: 0 auto;
        padding: var(--s2) var(--s4);
        display: flex;
        align-items: center;
        gap: var(--s3);
    }
    header.site .logo { display: block; flex: 1; min-width: 0; }
    /* ## 【必須】ロゴを縮められる形にしておくこと（2026-09-09）——
       ## **ヘッダの導線が「ログイン・会員登録」になり、320px では【ちょうど】収まる幅になった。**
       ## **ブラウザの最小フォントサイズ設定で1〜2px 増えるだけで溢れる。**
       ## **`.logo` は `flex:1; min-width:0` なので先に潰れるが、`width:auto` の `img` は
       ## 縮まずに【はみ出す】。`max-width` と `object-fit` で、溢れる代わりに縮ませる。** */
    header.site .logo img { height: 34px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
    .site-actions { display: flex; align-items: center; gap: var(--s1); }
    .site-actions a, .site-actions summary {
        color: var(--on-dark);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: var(--tap);
        min-height: var(--tap);
        font-size: .625rem;
        line-height: 1.2;
        letter-spacing: .02em;
        position: relative;
        text-decoration: none;
    }
    .site-actions a:hover, .site-actions a:focus-visible { text-decoration: none; opacity: .8; }
    .site-actions .ic { width: 22px; height: 22px; display: block; }
    /* カートバッジ（04 §2-1「投入点数のバッジ」） */
    .site-actions .badge {
        position: absolute;
        top: 2px;
        right: 4px;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: var(--r3);
        background: var(--accent);
        color: #fff;
        font-size: .625rem;
        font-weight: 700;
        line-height: 17px;
        text-align: center;
    }

    /* --- グローバルナビ（ハンバーガー。JS を書かず <details> で開閉する） --- */
    .gnav { border-top: 1px solid rgba(255,255,255,.15); }
    /* ## **【2026-09-28 指示・近藤氏】開いたときだけ面を明るくする** ——
       ## **【必須】背景は `.gnav-list` ではなく【ここ】に置くこと** ——
       ## **あちらは `max-width: 480px` で中央に置かれており、
       ## 面を持たせると 480px より広い画面で帯の左右にヘッダの黒が残る**
       （**iPhone の横向き〔844px〕は SP として通る** —— PC表示制限は UA で判定し幅では弾かない＝03 §5）。 */
    .gnav[open] { background: var(--band); }
    .gnav > summary {
        /* ## **【必須】黒を明示すること** —— **親が明るくなっても「メニュー」の行は
           ## 閉じているときと同じ見た目に保つ**（開閉で行そのものが動いて見えない）。 */
        background: var(--header);
        list-style: none;
        cursor: pointer;
        color: var(--on-dark);
        font-size: .625rem;
    }
    .gnav > summary::-webkit-details-marker { display: none; }
    /* ## **【2026-09-28 指示・近藤氏】開いたメニューの面を【明るく】する**
       ## **原文「メニューを開いた時にメニュー背景が黒でヘッダーと同化して見づらいので
       ## 背景色を明るめに調整し、・の位置やメニューの配列も１列にして」**

       ## **【必須】`background` を外さないこと** —— **外すとヘッダの黒がそのまま透け、
       ## 開いているのか閉じているのか見分けが付かない**（それが直す前の状態である）。
       ## **【必須】`list-style: none` を外さないこと** —— **`<ul>` の黒点が枠の【外】に出る**
       （直す前は枠の左に「・」が浮いていた）。**`role="list"` は読み上げのためで、点は消さない。**
       ## **【必須】1列であること** —— **2列だと項目名が枠内で折り返し、押す先が小さくなる。** */
    /* ## **【必須】`margin: 0 auto` を落とさないこと**（**2026-09-28 の設計レビューで検出・実測**）——
       ## **`.site-bar`〔ロゴの列〕は `max-width: 480px` ＋ `margin: 0 auto` で中央に置かれている** ——
       ## **ここだけ左寄せにすると、480px より広い画面で【帯が左・ロゴが中央】に割れる。**
       ## **PC表示制限は UA で判定しており幅では弾かない**（03 §5）——
       ## **iPhone の横向き〔844px〕は SP として通る**（実測: 帯 0〜480 / ロゴ 182〜662）。 */
    .gnav-list {
        max-width: var(--page);
        margin: 0 auto;
        padding: var(--s3) var(--s4) var(--s4);
        /* ## **【必須】面の色はここに置かないこと** —— **`.gnav[open]` が持つ**（上の【必須】）。
           ## **ここに置くと 480px より広い画面で帯の左右に黒が残る。** */
        border-top: 1px solid var(--line);
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--s2);
        list-style: none;
    }
    .gnav-list a {
        display: flex;
        align-items: center;
        min-height: var(--tap);
        padding: 0 var(--s3);
        border: 1px solid var(--line-2);
        border-radius: var(--r1);
        background: var(--bg);
        color: var(--ink);
        font-size: .875rem;
        font-weight: 500;
    }
    .gnav-list a:hover, .gnav-list a:focus-visible {
        text-decoration: none;
        border-color: var(--accent);
        background: var(--rose-pale);
        color: var(--accent);
    }
    /* ## **1列になったので幅いっぱいが既定である** —— **`.wide` は何も変えない**
       （Blade 側の `class="wide"` を消すと、2列に戻したときに効かなくなる）。 */
    .gnav-list a.wide { grid-column: 1 / -1; }

    /* --- フッタ --- */
    footer.site {
        margin-top: var(--s8);
        background: var(--header);
        color: #bbb;
        font-size: .8125rem;
    }
    .footer-inner { max-width: var(--page); margin: 0 auto; padding: var(--s6) var(--s4) var(--s8); }
    footer.site a { color: #ddd; }
    .footer-links {
        list-style: none;
        margin: 0 0 var(--s5);
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border-top: 1px solid rgba(255,255,255,.15);
    }
    .footer-links li { border-bottom: 1px solid rgba(255,255,255,.15); }
    .footer-links li:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.15); }
    .footer-links a { display: block; min-height: var(--tap); padding: var(--s3) var(--s2); line-height: 1.4; }
    .footer-note { color: #999; font-size: .75rem; line-height: 1.7; }
    .footer-note strong { color: #ddd; }
    /* ## 【2026-09-10 指示・近藤氏】中央に寄せた（表記も「MooN LENS」に改めた） */
    .footer-copy { margin-top: var(--s5); color: #777; font-size: .6875rem; text-align: center; }

    /* ============================================================
       4. 文字
       ============================================================ */
    h1 {
        font-size: 1.25rem;
        line-height: 1.5;
        margin: var(--s6) 0 var(--s3);
        color: var(--ink-strong);
        font-weight: 700;
    }
    h2 {
        font-size: 1.0625rem;
        margin: var(--s7) 0 var(--s3);
        color: #444;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: var(--s2);
    }
    /* 現行サイトの「■見出し」に相当するアクセント */
    h2::before {
        content: "";
        width: 4px;
        height: 1.1em;
        border-radius: 2px;
        background: var(--accent);
        flex: none;
    }
    h2.plain::before { display: none; }
    h3 {
        font-size: .9375rem;
        margin: var(--s5) 0 var(--s2);
        color: #444;
        font-weight: 700;
        background: var(--band);
        padding: var(--s2) var(--s3);
        border-radius: var(--r1);
    }
    h3.plain { background: none; padding: 0; }

    p { margin: var(--s3) 0; }

    .muted, .sub { color: var(--sub); font-size: .8125rem; }
    .note { color: var(--sub); font-size: .8125rem; margin: var(--s2) 0; }
    .lead { font-size: 1rem; line-height: 1.8; }
    .center { text-align: center; }

    /* ============================================================
       5. 部品
       ============================================================ */
    .card {
        border: 1px solid var(--line);
        border-radius: var(--r2);
        padding: var(--s3);
        margin: var(--s3) 0;
        background: #fff;
    }
    .row { display: flex; gap: var(--s3); align-items: flex-start; }
    .grow { flex: 1; min-width: 0; }

    /* --- ボタン --- */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--s2);
        min-height: var(--tap);
        padding: var(--s3) var(--s5);
        border: 0;
        border-radius: var(--r1);
        background: var(--cta);
        color: #fff;
        font-size: 1rem;
        font-weight: 700;
        font-family: inherit;
        line-height: 1.4;
        text-align: center;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }
    .btn:hover, .btn:focus-visible { text-decoration: none; background: var(--cta-press); }
    .btn:active { transform: translateY(1px); }
    .btn[disabled], .btn:disabled { background: #ccc; color: #fff; cursor: not-allowed; }
    .btn.block { display: flex; width: 100%; }

    /* 副次（枠線） */
    .btn.sub, .btn.secondary, .button {
        background: #fff;
        color: var(--ink);
        border: 1px solid var(--line-2);
        font-weight: 600;
        font-size: .875rem;
        padding: var(--s2) var(--s4);
    }
    .btn.sub:hover, .btn.secondary:hover, .button:hover,
    .btn.sub:focus-visible, .btn.secondary:focus-visible, .button:focus-visible {
        background: var(--band);
    }
    /* 破壊的操作（退会・削除） */
    .btn.button-danger, .button-danger {
        background: #fff;
        color: var(--danger);
        border: 1px solid var(--danger);
        font-weight: 700;
    }
    .btn.button-danger:hover, .button-danger:hover { background: var(--danger-bg); }

    /* クラスの付いていない submit/button も最低限そろえる
       （04 §2-1。画面によって見た目が割れるのを防ぐ） */
    button:not([class]), input[type=submit]:not([class]) {
        min-height: var(--tap);
        padding: var(--s2) var(--s4);
        border: 1px solid var(--line-2);
        border-radius: var(--r1);
        background: #fff;
        color: var(--ink);
        font-size: .9375rem;
        font-family: inherit;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    /* --- 通知（.msg） ---
       【必須】`.msg` を「エラーの見た目」にしないこと。
       60日上限の案内は**利用者の操作ミスではなく制度上の制限**であり、
       赤くすると 04 §4-1-1 の確定に反する。エラーは `.errors` / `.error` が持つ。 */
    .msg {
        border-radius: var(--r1);
        padding: var(--s3);
        margin: var(--s3) 0;
        font-size: .875rem;
        line-height: 1.7;
        background: var(--band);
        color: var(--ink);
        border-left: 3px solid var(--line-2);
    }
    .msg p { margin: var(--s1) 0; }
    .msg.info { background: var(--info-bg); color: var(--info); border-left-color: var(--info); }
    .msg.warn, .msg.warning { background: var(--warn-bg); color: var(--warn); border-left-color: var(--warn); }
    .msg.ok, .msg.sent { background: var(--ok-bg); color: var(--ok); border-left-color: var(--ok); }
    .msg a { color: inherit; text-decoration: underline; }

    /* 入力エラーだけは赤で出す（.msg とは別物） */
    .errors, .error {
        background: var(--danger-bg);
        border-left: 3px solid var(--danger);
        border-radius: var(--r1);
        color: var(--danger);
        font-size: .875rem;
        padding: var(--s3);
        margin: var(--s3) 0;
    }
    .errors ul { margin: 0; padding-left: 1.2em; }

    /* ## 【必須・2026-09-11 指示・近藤氏】取り返しのつかない副作用を伝える一文（赤で強調）——
       ##   ## **原文「会員情報が変更になる旨の注意文言を赤字などで強調表示してください」。**
       ##   ## **【必須】`.errors` と同じ見た目にしないこと** ——
       ##   ##   **あちらは「入力が誤っている」であり、こちらは「このまま進むと何が起きるか」である。**
       ##   ##   **同じ見た目だと、直すべき誤りがあると読んで先へ進めなくなる**（地色を敷かず枠で囲む）。
       ##   ## **【必須】`.muted` に戻さないこと** —— **それが、この一文が見落とされていた形である。** */
    .notice-strong {
        margin: var(--s3) 0;
        padding: var(--s3);
        border: 1px solid var(--danger);
        border-radius: var(--r1);
        color: var(--danger);
        font-size: .875rem;
        line-height: 1.7;
    }
    .notice-strong strong { font-weight: 700; }
    /* 項目直下のエラー（04 §2-4） */
    .field-error { display: block; color: var(--danger); font-size: .8125rem; margin-top: var(--s1); }

    /* --- バッジ --- */
    .badge {
        display: inline-block;
        padding: 2px var(--s2);
        border-radius: var(--r3);
        background: var(--band);
        color: var(--sub);
        font-size: .6875rem;
        font-weight: 700;
        line-height: 1.6;
        white-space: nowrap;
    }
    .badge.outlet { background: var(--rose-pale); color: var(--crimson); }
    .badge.stock { background: var(--warn-bg); color: var(--warn); }
    .badge.type, .lens-type { background: #eef2f6; color: #4a5560; }

    /* ============================================================
       6. フォーム
       ============================================================ */
    label { display: block; font-size: .8125rem; color: var(--sub); margin: var(--s4) 0 var(--s1); }
    label.inline { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; color: var(--ink); font-size: .9375rem; }
    /* 不良品に関するお問い合わせの項目（IN-11。04 §9-2 (a-2)。2026-09-28） */
    .defect-fields { border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s2) var(--s4) var(--s4); margin: var(--s4) 0 0; }
    .defect-fields[hidden] { display: none; }
    .defect-fields legend { padding: 0 var(--s2); font-size: .8125rem; font-weight: 700; color: var(--ink); }
    input[type=file] { display: block; width: 100%; font-size: .8125rem; }

    input[type=text], input[type=tel], input[type=email], input[type=number],
    input[type=date], input[type=password], input[type=search], select, textarea {
        width: 100%;
        /* 【必須】16px を下回らないこと ——
           iOS Safari はフォーカス時に 16px 未満の入力欄でページを自動ズームする */
        font-size: 16px;
        font-family: inherit;
        line-height: 1.5;
        color: var(--ink);
        background: #fff;
        padding: var(--s3);
        min-height: var(--tap);
        border: 1px solid var(--line-2);
        border-radius: var(--r1);
        -webkit-appearance: none;
        appearance: none;
    }
    textarea { min-height: 8em; resize: vertical; }
    select {
        background-image: linear-gradient(45deg, transparent 50%, var(--sub) 50%),
                          linear-gradient(135deg, var(--sub) 50%, transparent 50%);
        background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
        padding-right: var(--s7);
    }
    input[type=checkbox], input[type=radio] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
    input:disabled, select:disabled, textarea:disabled { background: var(--band); color: var(--sub-2); }
    ::placeholder { color: #bbb; }

    .form-actions { margin-top: var(--s6); display: grid; gap: var(--s3); }

    /* ============================================================
       7. カタログ（TP-01 / LS-01 / LS-02 / LS-03 / LS-05）
       ============================================================ */
    .top-block { margin: var(--s7) 0; }

    /* ## **【2026-09-28 指示・近藤氏】棚の見出しを【現行サイトと同じ形】にする**
       ## **原文「セクションのタイトルを現行（添付）の様に修正してください。」**

       ==================================================================
       ## 【必須】現行の実値をそのまま写している。目分量で変えないこと
       ==================================================================
         **現行 `h2.title`**（`old_content/moon/.../sphone/css/common.css:218`）:
         `background: url(ttl_bg.png) repeat left top` / `color: #444` /
         `font-size: 1rem` / `font-weight: bold` / `padding: 1.1rem`。
         ## **背景は 80×80 のドット柄のタイルであり、CSS のグラデーションで近似していない**
         （**同じ画像を `images/ui/section-title-bg.png` として運んだ**。102バイト）。

       ## **【必須】`■` は `::before` で出すこと** —— **現行は見出しの文字列に `■` を書いていたが**
       （`index.tpl:233` の `<h2 class="title" id="last-chance">■在庫限り</h2>`）、
       ## **こちらは見出しを CMS〔MK-09〕で運用が入力する** ——
       ## **運用に `■` を打たせない。** **読み上げにも出さない**（装飾である）。

       ## **【必須】`.wrap` の左右の余白を打ち消して全幅にすること** ——
       ## **現行は画面いっぱいの帯である**（ヒーローと同じ `margin` の打ち消し方）。 */
    .top-block > h2 {
        margin: 0 0 var(--s3);
        padding: 1.1rem var(--s4);
        background: url("../images/ui/section-title-bg.png") repeat left top;
        color: #444;
        font-size: 1rem;
        font-weight: 700;
        /* ## **字間はここで決める** —— **`::before` に `margin` を持たせない**（下の【必須】） */
        gap: .4rem;
    }
    /* ## **【必須】全幅にしないのは `.finder` だけである** ——
       ## **`.finder`〔カラコンを探す〕は角丸のカードの中に在り、
       ## `.wrap` の余白ではなく【カードの padding】の内側に置かれている** ——
       ## **そこで打ち消すと、帯がカードの角丸の外へ1px はみ出す**（2026-09-28 に実測）。
       ## **【必須】`.top-shelf` だけに絞らないこと**（**2026-09-28 の設計レビューで検出**）——
       ## **TOP の NEWS〔`.top-block#news`〕も `.top-block` であり、絞ると
       ## 同じ画面に「全幅の帯」と「`.wrap` の内側の帯」が並ぶ。** */
    .top-block:not(.finder) > h2 { margin: 0 calc(var(--s4) * -1) var(--s3); }
    .top-block.finder > h2 { border-radius: var(--r1); }
    /* ## **【必須】基底の `h2::before`〔§4〕を打ち消すこと**（**2026-09-28 の設計レビューで検出・実測**）——
       ## **基底は `border-radius: 2px` を持ち、`h2` 自身が `display:flex; gap: var(--s2)` である** ——
       ## **打ち消さないと ①印が【角丸】になり②字間が `gap 8px + margin 6.4px` の 14.4px になる**
       （**現行の `■` は角の無い字形で、字間は字送りだけである**）。
       ## **`margin-right` を持たせず、字間は `h2` 側の `gap` で決めること**（二重に足さない）。 */
    .top-block > h2::before {
        content: "";
        display: block;
        flex: none;
        width: .5rem;
        height: .5rem;
        border-radius: 0;
        background: #444;
    }

    /* --- シリーズ／商品のカード一覧 --- */
    /* TOP の「画像で並べる」棚（2026-09-28。GLAM LENS の Brand Lineup の形＝横幅いっぱいで縦に並ぶ。2列も選べる） */
    .image-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); grid-template-columns: 1fr; }
    .image-tiles.is-2col { grid-template-columns: 1fr 1fr; gap: var(--s3); }
    .image-tiles a { display: block; color: inherit; text-decoration: none; }
    .image-tiles img { display: block; width: 100%; height: auto; }
    .image-tile-caption { display: block; margin-top: var(--s1); font-size: .8125rem; text-align: center; color: var(--ink); }
    .series-cards, .color-cards, .outlet-cards, .ranking-cards, .coupon-list, .order-list {
        list-style: none;
        margin: var(--s3) 0;
        padding: 0;
    }
    .series-cards, .outlet-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--s3);
    }

    /* ==================================================================
       ## カラーの一覧（LS-02）は【横1列の行】である（2026-09-03 指示・近藤氏）
       ==================================================================
       ## 原文:「レンズ画像は1/4位にして 商品名 / レンズ画像 カラー 値段 のように
       ## 横１列に並べてください」「それぞれの行を選択して次の画面に遷移する」
       ##
       ## **【必須】`.series-cards` / `.outlet-cards` の2列グリッドに戻さないこと** ——
       ## **あちらは「シリーズを選ぶ」一覧であり、こちらは「もう選んだシリーズの色を選ぶ」一覧である。**
       ## **色は同じシリーズなので写真がよく似ており、大きく2列に並べても選びやすくならない。**
       ##
       ## **【必須】行の【全体】がリンクであること** —— **写真だけ・文字だけを押せる形にしない。**
       ================================================================== */
    .color-cards {
        display: flex;
        flex-direction: column;
        gap: var(--s2);
    }
    .series-card, .outlet-card {
        display: block;
        border: 1px solid var(--line);
        /* ## 角丸を付けない（管理番号35）—— `overflow: hidden` の角丸は中の写真の角を切る */
        border-radius: 0;
        overflow: hidden;
        background: #fff;
        color: var(--ink);
        height: 100%;
    }
    /* ## LS-02 のカラー行（2026-09-03 指示・近藤氏） */
    .color-card {
        display: flex;
        align-items: center;
        gap: var(--s3);
        border: 1px solid var(--line);
        border-radius: 0; /* 管理番号35: 写真の器に角丸を付けない */
        overflow: hidden;
        background: #fff;
        color: var(--ink);
        padding: var(--s2);
    }
    /* ## **写真は行の高さを決める** —— **1/4 くらいの大きさにする**（原文）。
       ## **`flex: 0 0 auto` を外さないこと** —— 外すと色名の長さで写真の幅が動く。 */
    .color-card .thumb, .color-card .thumb-empty {
        flex: 0 0 auto;
        width: 25%;
        max-width: 96px;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        background: var(--band);
    }
    /* ## **色名と価格を横1列に置く** —— **価格は行の右端に寄せる**（縦に揃って読みやすい）。
       ## **2026-09-24 是正: アウトレットの印を【下の段】へ落とした**（近藤氏のご指摘
       ## 「アウトレット商品です。のアイコンがあるとカラー名が折り返されて見づらい」）——
       ## **印は幅を取るので、同じ行に置くとカラー名の取り分が減って折り返す。**
       ## **【必須】カラー名と価格の1行は崩さないこと**（2026-09-03 指示・近藤氏＝04 §3-3-3）。 */
    .color-card .body {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--s1);
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
    }
    .color-card .body-main {
        display: flex;
        align-items: center;
        gap: var(--s2);
        min-width: 0;
    }
    .color-card .color-name { flex: 1 1 auto; min-width: 0; }
    .color-card .price { flex: 0 0 auto; margin: 0; }
    /* ## 印は下の段の左端に置く（`align-self` を外すと帯のように伸びる） */
    .color-card .meta { align-self: flex-start; }
    /* ## 見出しの横に出すレンズ種別（2026-09-03 指示・近藤氏。原文「Phoebe（フィービー）長期」） */
    .series-lens-type {
        display: inline-block;
        margin-left: var(--s2);
        padding: 2px var(--s2);
        border-radius: var(--r1);
        background: var(--band);
        color: var(--sub);
        font-size: .75rem;
        font-weight: 400;
        vertical-align: middle;
    }
    .series-card:hover, .outlet-card:hover, .color-card:hover { text-decoration: none; box-shadow: var(--shadow); }
    .series-card .thumb, .outlet-card .thumb {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        background: var(--band);
    }
    /* 画像が無いときの受け皿（文字だけのカードでも崩れない） */
    .thumb-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        aspect-ratio: 1 / 1;
        background: var(--band);
        color: var(--sub-2);
        font-size: .75rem;
        letter-spacing: .1em;
    }
    .series-card .body, .outlet-card .body { padding: var(--s2) var(--s3) var(--s3); }
    .series-name, .color-name, .product-name {
        display: block;
        font-size: .875rem;
        font-weight: 700;
        line-height: 1.5;
        color: var(--ink-strong);
    }
    .color-count, .lens-type {
        display: inline-block;
        font-size: .6875rem;
        color: var(--sub);
    }
    .lens-type { padding: 1px var(--s2); border-radius: var(--r3); }
    .price {
        display: inline-block;
        color: var(--price);
        font-weight: 700;
        font-size: .9375rem;
    }
    .price .unit { font-size: .75rem; font-weight: 400; color: var(--sub); }
    .unit-price { color: var(--price); font-weight: 700; }

    /* --- ランキング（順位だけ。販売数量は出さない） ---
       ## **【2026-09-24 指示・近藤氏】カードは【シリーズ】である**（04 §3-1-3 (5)）——
       ## **`.ranking-card` という独自のカードをやめ、LS-01・特集と同じ `.series-card` を使う。**
       ## **順位の印はカードの【外】（`li` の直下）に置き、`li` を基準に重ねる。**
       ## **【必須】`.ranking-card` の見た目をここに作り直さないこと** —— **カードが2種類になる。** */
    .ranking-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); counter-reset: rank; }
    /* ## 順位の印を重ねる基準（もとは `.ranking-card` 自身が `position: relative` だった） */
    .ranking-cards > li { position: relative; }
    .ranking-cards .rank {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        min-width: 30px;
        height: 30px;
        padding: 0 var(--s2);
        background: var(--ink-strong);
        color: #fff;
        font-size: .8125rem;
        font-weight: 700;
        line-height: 30px;
        text-align: center;
        border-bottom-right-radius: var(--r2);
    }
    .ranking-cards > li:nth-child(1) .rank { background: #c9a227; }
    .ranking-cards > li:nth-child(2) .rank { background: #9aa0a6; }
    .ranking-cards > li:nth-child(3) .rank { background: #a9743e; }

    /* ==================================================================
       ## 在庫限り・プチMooN の棚は【横スライド】（2026-09-24 指示・近藤氏）
       ==================================================================
       ## **原文「縦幅が１シリーズ分位になるように、横にスライドさせるようにしてください。」**
       ## **射程は名指しの2棚だけである**（**ランキングは縦のまま**）。
       ## **`grid` を上書きするので、`.series-cards` の後ろに置くこと。**
       ## **【必須】`overflow-x` を消さないこと** —— **消すとカードが縦に積み上がり、
       ## 「縦幅が1シリーズ分」という指示そのものが失われる。**
       ## **カード1枚の幅は `flex-basis` で決める** —— **画面幅に対する割合にすると、
       ## 狭い端末で1枚が画面いっぱいになり「横に続きがある」ことが見えない。** */
    .series-cards.is-slide {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        /* ## 端まで送ったときにカードの左端で止める（途中で切れた状態にしない） */
        scroll-snap-type: x mandatory;
        /* ## 棚の左右の余白ぶんだけはみ出させ、端のカードが切れて「続き」が見えるようにする */
        padding-bottom: var(--s2);
        -webkit-overflow-scrolling: touch;
    }
    .series-cards.is-slide > li {
        flex: 0 0 auto;
        width: 46%;
        scroll-snap-align: start;
    }
    /* ## つまみは細く出す（隠すと、横に送れることが分からない端末がある） */
    .series-cards.is-slide::-webkit-scrollbar { height: 4px; }
    .series-cards.is-slide::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r1); }

    /* ==================================================================
       ## 横に送れることを【見て分かる】ようにする矢印（2026-09-25 指示・近藤氏）
       ==================================================================
       ## **原文「横スライドできるとユーザーに分かりやすくスライド左右に←→を付けるなどして
       ## 工夫して下さい。」**
       ## **【必須】矢印は JS が作る。CSS だけで出さないこと** ——
       ## **JS が落ちた日に「押しても何も起きない矢印」が残る**（Blade の【必須】と対）。
       ## **だから `.has-arrows` は JS が足す印であり、この規則は JS が動いた画面にだけ効く。**
       ## **【必須】カードの上に重ねること** —— **棚の外に置くと、指の届く位置から遠くなる
       ## （スマートフォンの画面は横幅いっぱいまでカードが並ぶ）。
       ## **【必須】`--s2` ぶんカードの上下の中央に置くこと** —— **写真の中央に来るようにする。** */
    .shelf-slide-wrap { position: relative; }
    .shelf-arrow {
        position: absolute;
        /* ## 写真の中央あたり（棚の高さの上から 38%）。文字の行に被らせない。
           ## **【必須】この値を動かすときは、金額の行〔税込価格〕と
           ## 税抜の打ち消しの一文に掛からないことを実機で確かめること**（公開前必須要件2）。
           ## **写真は `aspect-ratio: 1/1` であり、棚の高さの上から約6割までが写真である。** */
        top: 38%;
        transform: translateY(-50%);
        /* ## **【必須】`--tap`〔44px〕を下回っている理由を消さないこと** ——
           ## **棚のカードは画面幅の46%〔実測158px〕しかなく、44px の丸は写真の28%を隠す。**
           ## **【2026-09-25 に 36px から 40px へ広げた】**（**指示・近藤氏「白丸だけで見づらい」**）——
           ## **起票時の「36px は折り合いである」という判断を覆した。覆した事実を消さないこと**（CLAUDE.md §10-0）。
           ## **`back-to-top`〔52px。実測。かつて 56px と書いていたのは誤り〕と揃えないこと** ——
           ## **あちらは写真の上に乗らない。** */
        width: 40px; height: 40px;
        padding: 0;
        display: flex; align-items: center; justify-content: center;
        border: 0;
        border-radius: 50%;
        /* ==================================================================
           ## 【必須】半透明の白に戻さないこと（2026-09-25 指示・近藤氏）
           ==================================================================
           ## **原文「左右のスライダー切り替えのボタンが白丸だけで見づらいです」** ——
           ## **不透明度88%の白丸＋`--line`〔薄い灰〕の枠では、写真〔モデルの顔・明るい背景〕の上で丸が沈む。**
           ## **【必須】起票時は【記号そのものが1文字も出ていなかった】** ——
           ## **`::before` で出していたものを、同じ日の設計レビューの是正でこの規則を書き直したときに
           ## 【一緒に落とし】、その状態で本番へ出した。**
           ## **どちらも同じコミットの中なので git では追えない。だからここに残す。**
           ## **いまは記号を JS が HTML に入れる**〔`top-section.blade.php`〕—— **CSS に戻さないこと。**
           ## **【必須】丸は不透明にし、矢印はアクセント色で出すこと** ——
           ## **「押せるもの」だと分かる色は、この画面では `--accent` だけである。**
           ## **【必須】`--brand` と書かないこと** —— **front.css に存在しない**（下の 2546行あたりの記録）。 */
        background: #fff;
        color: var(--accent);
        /* ## **【必須】`font-family: inherit` を落とさないこと** ——
           ## **落とすと矢印が UA のボタン既定フォントで出る**（`back-to-top` / `button:not([class])` と同じ）。 */
        font-family: inherit;
        /* ## **矢印そのものを太く大きく** —— **記号は細い字形で、1rem では線が1本に見える** */
        font-size: 1.375rem;
        font-weight: 700;
        line-height: 1;
        /* ## **影を濃くする** —— **白い丸と明るい写真の境目は、影でしか出ない** */
        box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
        cursor: pointer;
        z-index: 2;
    }
    .shelf-arrow.is-prev { left: 4px; }
    .shelf-arrow.is-next { right: 4px; }
    /* ## 押したことが分かるように、色を反転する（丸がアクセント色・矢印が白） */
    .shelf-arrow:active { background: var(--accent); color: #fff; }
    /* ==================================================================
       ## 【必須】フォーカスリングを消さないこと。`--brand` と書かないこと
       ==================================================================
       ## **`--brand` は front.css に【存在しない】**（同じ間違いを `back-to-top` で一度 踏んでおり、
       ## 下の 2533行あたりにその記録が残っている）——
       ## **未定義の `var()` は outline を `none` に倒し、しかもこの規則が
       ## 全体の `:focus-visible`〔`--accent`〕を特異度で【上書きする】ため、
       ## キーボードで矢印に来ても輪が1つも出なくなる**（2026-09-25 の設計レビューで検出）。
       ## **アクセント色は `--accent` である。** */
    .shelf-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    /* 【必須】順位表示の根拠。消さないこと（景表法。TopPageTest が文言を固定） */
    .ranking-basis { color: var(--sub); font-size: .75rem; margin: 0 0 var(--s3); }

    /* --- カラーで探す（現行サイトの丸アイコン） --- */
    /* ## 【必須・2026-09-11 指示・近藤氏】絞り込みを高くしないこと ——
       ##   ## **原文「検索部分が縦幅が大きくて検索結果が見づらいので…
       ##   ## 検索結果商品が変わったのが見えるようにしたい」**（実測: 面だけで 408px / 画面 812px）。
       ##   ## **【必須】項目を減らして縮めないこと** —— **次の一手が画面から消える**
       ##   ##   〔0件のときも面を出す、と Blade が定めているのと同じ理由〕。
       ##   ## **縮めてよいのは【余白と写真の大きさ】だけである。** */
    .color-filter { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
    .color-filter a { display: flex; flex-direction: column; align-items: center; gap: var(--s1); color: var(--ink); font-size: .6875rem; }
    .color-filter a:hover { text-decoration: none; }
    /* 【必須】ここで高さを固定しないこと —— 丸アイコンは 100x129（円＋英字ラベルが
       焼き込まれている）であり、正方形にすると縦に潰れる。実寸は §13 で当てる */

    /* --- 絞り込み --- */
    .facets { border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s2) var(--s3); margin: var(--s3) 0; background: var(--band-2); }
    /* ## 【必須・2026-09-11】`gap` を広げないこと —— **並び替えの3つが1行に収まらなくなる**
       ##   〔実測 375px: ラベル50 ＋ 57+96+96 ＋ すきま。**余裕は数pxしかない**〕。
       ## 【必須】狭い端末では折り返す。それでよい —— **押せなくなるわけではない。** */
    .facet-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
    .facet-chips a {
        display: inline-flex;
        align-items: center;
        /* ## 【必須】36px を下回らないこと —— タップ領域の下限に近い（`--tap` は 44px）。
           ## 【必須・2026-09-11】左右の余白を詰めたのは、並び替えの3つを【1行】に収めるためである ——
           ##   はみ出すと折り返して、ラベルを同じ行に置いた効果が消える。 */
        min-height: 36px;
        padding: 0 var(--s2);
        border: 1px solid var(--line-2);
        border-radius: var(--r1);
        background: #fff;
        color: var(--ink);
        font-size: .8125rem;
    }
    .facet-chips a:hover { text-decoration: none; background: var(--band); }
    .facet-chips a.current { background: var(--ink-strong); border-color: var(--ink-strong); color: #fff; font-weight: 700; }

    /* --- 商品詳細（LS-03） --- */
    .product-images { list-style: none; margin: var(--s3) 0; padding: 0; display: grid; gap: var(--s2); }
    /* ## 【2026-09-10 指示・近藤氏＝管理番号35】商品画像に角丸を付けない（角丸前提で作った画像ではなく、端が切れる） */
    .product-images img { width: 100%; }
    .product-images .thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); }

    dl.spec { display: grid; grid-template-columns: 7.5em 1fr; gap: 0; font-size: .8125rem; margin: var(--s3) 0; border-top: 1px solid var(--line); }
    dl.spec dt { color: var(--sub); padding: var(--s2) var(--s2) var(--s2) 0; border-bottom: 1px solid var(--line); background: var(--band-2); }
    dl.spec dd { margin: 0; padding: var(--s2) 0 var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
    /* ## 開封後の使用期間の注記（2026-08-25 確定・近藤氏）—— **使用期限の行のすぐ下に置く**。
       ## **【必須】`grid-column: 1 / -1` を外さないこと** —— **`dl.spec` は2列のグリッドであり、
       ## 外すと注記が【項目名の列】に流れ込んで、次の項目名と値の対応が1行ずつずれる。** */
    dl.spec dd.spec-note { grid-column: 1 / -1; padding: var(--s2) 0; color: var(--sub); font-size: .75rem; line-height: 1.6; }

    .powers { display: grid; gap: var(--s3); margin: var(--s3) 0; }
    .power-select { display: grid; gap: var(--s1); }
    .qty { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: end; }

    .buybox { border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s4); margin: var(--s4) 0; background: #fff; box-shadow: var(--shadow); }
    .buybox .total { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--s3); font-weight: 700; }
    .buybox .total .amount { color: var(--price); font-size: 1.25rem; }

    /* 商品LPのブロック（PR-04） */
    .product-contents { margin: var(--s6) 0; }
    .lp-block { margin: var(--s5) 0; }
    .lp-block img { border-radius: 0; }
    .lp-block-notice { background: var(--warn-bg); color: var(--warn); border-radius: var(--r1); padding: var(--s3); }

    .stock { font-size: .75rem; font-weight: 700; color: var(--warn); }
    .outlet { color: var(--crimson); }

    /* ============================================================
       8. カート・チェックアウト
       ============================================================ */
    /* CT-07 の合計インジケータ（cart/merge.blade.php）と、上限を超えたときの帯（limit-bar） */
    .limitbar {
        position: sticky;
        top: 56px;
        z-index: 20;
        border: 1px solid var(--line);
        border-radius: var(--r1);
        padding: var(--s2) var(--s3);
        margin: var(--s3) 0;
        background: var(--band-2);
        font-size: .8125rem;
    }

    .order-summary { border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s3) var(--s4); background: var(--band-2); margin: var(--s4) 0; }
    .order-summary dl { display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s3); margin: 0; font-size: .875rem; }
    .order-summary dt { color: var(--sub); }
    .order-summary dd { margin: 0; text-align: right; }
    .order-summary .total { border-top: 1px solid var(--line); padding-top: var(--s2); margin-top: var(--s2); font-weight: 700; font-size: 1rem; }
    .order-summary .total .amount { color: var(--price); font-size: 1.25rem; }

    .order-items { list-style: none; margin: var(--s3) 0; padding: 0; display: grid; gap: var(--s3); }
    .order-items > li { border-bottom: 1px solid var(--line); padding-bottom: var(--s3); }
    .order-items > li:last-child { border-bottom: 0; padding-bottom: 0; }

    .coupon-list { display: grid; gap: var(--s2); }
    .coupon-name { font-weight: 700; color: var(--ink-strong); }
    .merge-state { font-size: .8125rem; color: var(--sub); }
    .alternatives { list-style: none; margin: var(--s2) 0; padding: 0; display: grid; gap: var(--s2); }

    /* ## 未ログインの方への予告（CT-01。2026-09-09 指示・近藤氏）
       ## 【必須】`.sticky-cta` の【中】に入れないこと —— あちらは画面下部に貼り付くため、
       ##   明細を読むあいだ中 3行を占有する。ここは通常フローに1度だけ出る。 */
    .guest-checkout-note {
        margin: var(--s5) 0 var(--s3);
        padding: var(--s3);
        border: 1px solid var(--line);
        border-radius: var(--r2);
        background: var(--band-2);
    }
    .guest-checkout-note .note { margin: 0; }

    /* ## クーポンのバナー（IN-12 / IN-12-D）—— 画像は【装飾】であり、条件は列から出す */
    .coupon-banner { display: block; margin: 0 0 var(--s2); }
    .coupon-banner img { display: block; width: 100%; height: auto; }
    .coupon-more { margin: var(--s3) 0 0; }

    /* ## クーポンコードとコピーボタン（2026-09-12 指示・近藤氏）——
       ## 【必須】コードは折り返さず、指で触れる大きさのボタンを右に置く。
       ## 【必須】ボタンの高さを 44px 未満にしないこと（指で押す先である）。 */
    .coupon-code {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--s2);
        margin: var(--s2) 0;
    }
    .coupon-code .lead { color: var(--sub); font-size: .8125rem; }
    .coupon-code .code {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 1.125rem;
        font-weight: 700;
        letter-spacing: .04em;
        color: var(--ink-strong);
        background: var(--band);
        border: 1px solid var(--line);
        border-radius: var(--r1);
        padding: var(--s1) var(--s2);
        /* ## 【必須】選べる状態にしておくこと —— コピーできなかった人の退路である */
        user-select: all;
        -webkit-user-select: all;
    }
    .coupon-code .coupon-copy {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: var(--s2) var(--s3);
        white-space: nowrap;
    }
    /* ## 【最重要】`display` を当てた要素は `hidden` だけでは隠れない ——
       ## **UA の `[hidden]{display:none}` は作者オリジンの normal 宣言に【必ず負ける】**
       ## （2026-09-12 に実測: `hidden=true` にしても `display` は `flex` のままだった）。
       ## **これが無いと、JS が落ちた日・コピーできない環境で
       ## 「押しても何も起きないボタン」がそのまま出る**（04 §9-5-5-a が名指しで禁じた形）。
       ## 【必須】`.coupon-copy` に `display` を足すときは、この規則も一緒に見ること。 */
    .coupon-code .coupon-copy[hidden] { display: none; }
    /* ## 【必須】空のときに余白を作らないこと（`:empty` で潰す） */
    .coupon-code .coupon-copy-status { flex-basis: 100%; color: var(--sub); font-size: .75rem; }
    .coupon-code .coupon-copy-status:empty { display: none; }

    /* 下部固定のCTA（現行サイトの固定バーに相当） */
    .sticky-cta {
        position: sticky;
        bottom: 0;
        z-index: 25;
        margin: var(--s5) calc(var(--s4) * -1) 0;
        padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
        background: rgba(255,255,255,.96);
        border-top: 1px solid var(--line);
    }

    /* ============================================================
       9. マイページ
       ============================================================ */
    .mypage-block { border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s4); margin: var(--s4) 0; }
    .mypage-block > h2 { margin-top: 0; }
    .mypage-account { font-size: .875rem; color: var(--sub); }
    .mypage-nav { list-style: none; margin: var(--s4) 0; padding: 0; border-top: 1px solid var(--line); }
    .mypage-nav li { border-bottom: 1px solid var(--line); }
    .mypage-nav a { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); padding: var(--s3) var(--s1); color: var(--ink); font-size: .9375rem; }
    .mypage-nav a:hover { text-decoration: none; background: var(--band-2); }
    .mypage-nav a::after { content: "›"; color: var(--sub-2); font-size: 1.25rem; line-height: 1; }

    .point-balance { font-size: 1.75rem; font-weight: 700; color: var(--ink-strong); }
    .point-balance .unit { font-size: .875rem; font-weight: 400; color: var(--sub); margin-left: var(--s1); }
    .point-history, .order-list { list-style: none; margin: var(--s3) 0; padding: 0; }
    .point-history > li, .order-list > li { border-bottom: 1px solid var(--line); padding: var(--s3) 0; }
    .point-history .amount { font-weight: 700; }
    .at, .ordered-at { color: var(--sub); font-size: .75rem; }
    .order-number { font-weight: 700; color: var(--ink-strong); }
    .order-status, .status {
        display: inline-block;
        padding: 1px var(--s2);
        border-radius: var(--r3);
        background: var(--band);
        color: var(--sub);
        font-size: .6875rem;
        font-weight: 700;
    }

    .rank-summary { display: flex; align-items: baseline; gap: var(--s3); }
    .rank-name { font-size: 1.375rem; font-weight: 700; color: var(--ink-strong); }
    .rank { font-weight: 700; }

    .profile-view { display: grid; grid-template-columns: 7.5em 1fr; gap: 0; font-size: .875rem; border-top: 1px solid var(--line); margin: var(--s3) 0; }
    .profile-view dt { color: var(--sub); padding: var(--s2) var(--s2) var(--s2) 0; border-bottom: 1px solid var(--line); background: var(--band-2); }
    .profile-view dd { margin: 0; padding: var(--s2) 0 var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
    .profile-fixed { color: var(--sub); font-size: .8125rem; }

    .line-account { border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s3); margin: var(--s3) 0; }
    .newsletter-consent { margin: var(--s4) 0; }
    .policy, .retention { font-size: .8125rem; color: var(--sub); }
    .current { font-weight: 700; }
    .sent { color: var(--ok); }

    /* ============================================================
       10. 情報ページ（IN-*）
       ============================================================ */
    .doc { font-size: .9375rem; line-height: 1.9; }
    .doc h2 { font-size: 1rem; }
    .doc h3 { font-size: .9375rem; }
    .doc ul, .doc ol { padding-left: 1.4em; }
    .doc li { margin: var(--s1) 0; }
    /* ## 【2026-09-29】お支払い方法（IN-02）で現行ページの画像を再現した。画像は画面の幅を超えない */
    .doc-figure { display: block; margin: var(--s3) 0; }
    .doc-figure img { display: block; max-width: 100%; height: auto; }
    .doc-figure.is-framed img { border: 1px solid var(--line); }
    .pay-steps li { margin: var(--s3) 0; }
    .doc table { width: 100%; border-collapse: collapse; font-size: .875rem; margin: var(--s3) 0; }
    .doc th, .doc td { border: 1px solid var(--line); padding: var(--s2) var(--s3); text-align: left; vertical-align: top; }
    .doc th { background: var(--band); color: var(--sub); width: 8em; font-weight: 700; }
    .toc { list-style: none; margin: var(--s4) 0; padding: 0; border-top: 1px solid var(--line); }
    .toc li { border-bottom: 1px solid var(--line); }
    .toc a { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); padding: var(--s3) var(--s1); color: var(--ink); }
    .toc a:hover { text-decoration: none; background: var(--band-2); }
    .toc a::after { content: "›"; color: var(--sub-2); font-size: 1.25rem; }

    /* ============================================================
       11. ページャ
       ============================================================ */
    .pager { display: flex; align-items: center; justify-content: center; gap: var(--s2); margin: var(--s6) 0; flex-wrap: wrap; }
    .pager a, .pager span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--tap);
        min-height: var(--tap);
        padding: 0 var(--s3);
        border: 1px solid var(--line-2);
        border-radius: var(--r1);
        color: var(--ink);
        font-size: .875rem;
        background: #fff;
    }
    .pager a:hover { text-decoration: none; background: var(--band); }
    .pager .current { background: var(--ink-strong); border-color: var(--ink-strong); color: #fff; font-weight: 700; }
    .pager .disabled { color: var(--sub-2); background: var(--band); }

    /* ============================================================
       12. 個人輸入代行である旨（法規制。文言は partial の1箇所）
       ============================================================ */
    .personal-import-notice { font-size: .8125rem; line-height: 1.8; }
    .wrap .personal-import-notice {
        border: 1px solid var(--line);
        border-radius: var(--r1);
        background: var(--band-2);
        color: var(--sub);
        padding: var(--s3);
        margin: var(--s4) 0;
    }


/* ============================================================
   13. カタログの追補（TP-01 / LS-01 / LS-02 / LS-03 / LS-05）
   ============================================================ */
/* 【必須】このブロックは §7「カタログ」の定義を意図して上書きする行を含む。
   §7 より【後ろ】に置くこと（順序を入れ替えると上書きが効かなくなる） */

/* --- カードの本体（<span> で組むため display を明示する） ---
   front.css の `.series-card .body` は padding だけを持つ。
   カードは <a> の中なので中身は span であり、display:block が無いと
   padding が縦方向に効かない。 */
/* ## **【2026-09-24】`.ranking-card` は無くなった** —— **TOP の棚は `.series-card` を使う。**
   ## **`.outlet-card` は LS-05（/outlet）だけが使う**（あちらは色ごとのカードのままである）。 */
.series-card .body,
.outlet-card .body { display: block; }

/* 写真とカード本体の境目（現行サイトの罫線に相当） */
.series-card .thumb,
.outlet-card .thumb { border-bottom: 1px solid var(--line); }
/* ## LS-02 のカラー行は横並びであり、写真の下に罫線を引かない（2026-09-03） */

/* 画像の無いシリーズ（k15 / lunatia）の受け皿。文字だけでも高さが揃う */
.thumb-empty { border-bottom: 1px solid var(--line); }

/* カード内の要素を縦に積む（バッジ・色数・価格が横に流れないように） */
.series-card .body > *,
.outlet-card .body > * { display: block; }
.series-card .lens-type,
.outlet-card .badge,
.color-card .badge,
.color-card .lens-type { display: inline-block; }
/* ## **【必須】`.thumb-empty` の下罫線を LS-02 のカラー行に効かせないこと**（横並びである） */
.color-card .thumb-empty { border-bottom: 0; }
.series-card .color-count { margin-right: var(--s2); }
.series-card .price,
.outlet-card .price { margin-top: var(--s1); }
.series-card .meta { margin: var(--s1) 0 0; }

/* --- シリーズLP のヒーロー（現行 moon_new LP の冒頭バナー） --- */
.series-hero {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--band);
    margin: 0 0 var(--s4);
}

/* --- シリーズLP のギャラリー（現行 moon_new LP のスライダー＋サムネイル列）---
   【必須】`.frame` を隠すのは `.is-enhanced` が付いたときだけである。
   `.is-enhanced` を付けるのは JS であり、JS が落ちた日は全ての画像が縦に並んで
   「全部 見える」状態になる（サムネイルも全部 出る）。
   この既定を「最初から1枚だけ表示」に変えないこと —— 変えた瞬間、
   JS が落ちると画像が1枚も出なくなる。 */
.series-images { margin: 0 0 var(--s4); }
.series-images .frames { display: grid; gap: var(--s2); }
.series-images .frame {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--band);
}
.series-images.is-enhanced .frames { display: block; }
.series-images.is-enhanced .frame { display: none; }
.series-images.is-enhanced .frame.is-current { display: block; }

/* ## サムネイルは【1行5列・横スクロール】である（2026-09-04 指示・近藤氏）——
   ## 「現行サイトのように１行５列にして左右にスライドできるようにしてください。
   ##  （現在の表示は場所をとりすぎるので）」

   ## 【必須】`repeat(5, 1fr)` に戻さないこと ——
     ## あれは【折り返す】ため、画像の多いシリーズで縦に何行も積まれる
     （実測: leciel は22枚＝5行）。**指示はまさにその是正である。**

   ## 【必須】`grid-auto-flow: column` を落とさないこと ——
     ## 落とすと既定の row に戻り、`grid-auto-columns` が効いたまま【折り返す】。

   ## 【必須】1枚の幅は「5枚ちょうどが収まる」計算で出すこと ——
     ## `1fr` や固定 px にすると、画面幅によって5枚目が半端に切れる。
     ## 隙間は4つ（5枚のあいだ）であり、`4 * gap` を引く。

   ## 【必須】上下の padding を消さないこと ——
     ## `.is-current` の outline は枠の【外】に 3px 出るため、
     ## overflow の中では上下が切れる。左右は margin で相殺している。 */
.series-images .thumbs {
    list-style: none;
    margin: var(--s2) -3px 0;
    padding: 3px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 4 * var(--s2)) / 5);
    gap: var(--s2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    /* ## 【必須】`scroll-behavior: smooth` を足さないこと（2026-09-04 に実測して外した）——
         ## **アニメーションが進まない環境では、矢印もドットも【1px も動かない】。**
         ## **滑らかさより、必ず動くことを採る。**
         ## **指で流したときの吸着は上の `scroll-snap-type` が担う。** */
}
.series-images .thumbs > li { scroll-snap-align: start; }

/* ## 左右の送り（2026-09-04 追加指示・近藤氏）——
   ##   「まだ画像があるので左右にスライドできることが明確に分かるように ←→ などを表記し」

   ## 【必須】矢印をサムネイルの【上に重ねない】こと ——
     ## 5枚ちょうどで並べているため、重ねると【5枚目が常に矢印の下に隠れる】。
     ## **当初は「上に重ねる」形で書き、2026-09-04 に実機で確かめて改めた** ——
     ## **横に並べると 375px で5枚ぶんの幅が矢印2つぶん狭くなるが、
     ## 5枚目が見えないことのほうが重い。**
   ## 【必須】`minmax(0, 1fr)` の 0 を落とさないこと ——
     ## grid の既定は `auto` であり、中身（22枚ぶんの幅）に押し広げられて
     ## 横スクロールが【効かなくなる】。
   ## 【必須】端では `disabled` にする（消さない）——
     ## 消えると、押そうとした指の先で位置が動く。 */
.thumbs-wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s1);
}
.thumbs-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 40px;
    margin: 0;
    padding: 0 0 2px;
    border: 1px solid var(--line);
    border-radius: var(--r1);
    background: #fff;
    color: var(--ink);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
/* ## 【必須】端で消さないこと（薄くするだけ）—— 消えると押そうとした指の先で位置が動く */
.thumbs-nav:disabled { opacity: .25; cursor: default; }

/* ## ドット（同上）——「サムネの下にも・・・・でサムネ移動できるように」

   ## 【必須】枚数ではなく【ページ数】ぶんである ——
     ## 22枚でドットが22個 並ぶと、それ自体が場所をとる（指示の趣旨と逆になる）。
   ## 【必須】押せる大きさを確保すること —— 見た目は6px でも、当たり判定は 24px 角にする。 */
.thumb-dots {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2px;
    margin: var(--s1) 0 0;
    padding: 0;
}
.thumb-dot {
    display: block;
    width: 24px;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.thumb-dot::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    margin: 7px auto;
    border-radius: 50%;
    background: var(--line);
}
.thumb-dot.is-current::before { background: var(--accent); }
.series-images .thumbs .thumb {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--line);
    background: none;
    cursor: pointer;
}
.series-images .thumbs .thumb.is-current { outline: 2px solid var(--accent); outline-offset: 1px; }
.series-images .thumbs .thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* --- ランキング ---
   ## 【2026-09-03 確定・近藤氏】カードは写真を持つ（04 §3-1-3 (2) 規則3 を覆した）。
   ## 順位（.rank / .rank-ribbon）は position:absolute で【写真の上に】載るため、
   ## 本文側の余白は要らない。
   ## 【必須】写真が無い商品は .thumb-empty に落ちる（高さは同じ aspect-ratio 1/1）——
   ## だから「写真が無い商品だけ順位が本文に重なる」ことは起きない。
   ## **【2026-09-24】「`SeriesImage` を流用しないこと（別の色の写真が付く）」は【解消した】** ——
   ## **カードがシリーズになり、カードの単位と写真の単位が一致した**（`series-card.blade.php` の記録）。 */
.ranking-cards .rank-ribbon {
    position: absolute;
    top: 0;
    left: var(--s3);
    z-index: 1;
    display: block;
    width: 26px;
    height: auto;
}
/* ## **【2026-09-24】`.ranking-card .product-name` の手当ては要らなくなった** ——
   ## **カードが `.series-card` になり、見出しは `.series-name` である。** */

/* --- 絞り込み（LS-01「カラコンを探す」） --- */
.facet-group + .facet-group { margin-top: var(--s3); }
/* ## 使用期間・並び替えは【ラベルとボタンを同じ行】に置く（2026-09-11）——
   ##   見出しだけで1行 使うと、面が2行ぶん高くなる。
   ## 【必須】カラーは対象外である —— **8個 並ぶため同じ行に入らない。** */
.facet-group:has(.facet-chips) {
    display: flex;
    align-items: baseline;
    gap: var(--s1);
}
.facet-group:has(.facet-chips) > .facet-label { flex: 0 0 auto; margin: 0; }
.facet-label {
    margin: 0 0 var(--s2);
    color: var(--sub);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.facet-clear { margin: var(--s2) 0 0; font-size: .75rem; }

/* 丸アイコンは 100x129（円＋英字ラベルが焼き込まれている）。高さを固定すると縦に潰れる。
   ## 【必須・2026-09-11】幅で縮めること。`height` を書かないこと ——
   ##   **英字ラベルが画素として焼き込まれており、縦に潰すと読めなくなる。**
   ## 【必須】これ以上 小さくしないこと —— **44px で英字ラベルがぎりぎり読める**（実測）。 */
.color-filter img { width: 44px; height: auto; }
.color-filter a { gap: 0; }
.color-filter a.current img {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r1);
}

/* --- 商品詳細（LS-03 / LS-02 の1色内包） --- */
/* 代表画像＋サムネイル。0件なら領域そのものを出さない（additive）

   ## ==================================================================
   ## 【必須・2026-09-11 指示・近藤氏】代表画像を全幅にしないこと
   ## ==================================================================
   ##   ## **原文「商品ページからカラーを選択した際のレンズ画像が大きすぎるので
   ##   ## 小さくしたい。（2/3位）」** —— **画面いっぱいのレンズ1枚だけが見えて、
   ##   ## その下の価格・度数・カートが1つも視界に入らなかった。**
   ##   ## **【必須】幅で絞ること。`height` で縮めないこと** ——
   ##   ##   **`.main` は【レンズ単体（正方形）】と【装着画像（7:4）】の
   ##   ##   どちらにもなる**〔代表画像は `is_primary`＝装着画像である＝02 §4-5-1-3〕。
   ##   ##   **高さを固定すると、どちらか一方が必ず歪むか切れる。**

   ## ==================================================================
   ## 【必須・同】サムネイルを `cover` で切らないこと
   ## ==================================================================
   ##   ## **原文「装着画像の両サイドが切れてしまっているので、
   ##   ## 画像をひいて目全体が映るように調整して。」**
   ##   ## **装着画像は 210×120（7:4）であり、正方形に `cover` すると横の43%が落ちる**
   ##   ##   〔カラーサーチのカード（`.lens-card .thumb-model-eye`）と【同じ事象】である〕。
   ##   ## **枠は正方形のまま `contain` にする** ——
   ##   ##   **サムネイルは【レンズ単体と装着画像が混ざる】5枚並びであり、
   ##   ##   枠を 7:4 にするとレンズ単体の側が潰れる。**
   ##   ## **【必須】地色を敷くこと** —— **余白が「読み込み中」に見えないようにする。** */
.product-images .main {
    display: block;
    /* ## 2/3（原文の「2/3位」）。中央に置く —— 左寄せだと右側だけが空いて壊れて見える */
    width: 66%;
    margin-inline: auto;
}
.product-images .thumbs img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--band);
}

/* 買い場（価格〜カート投入）。見出しの上余白を箱の中の寸法に合わせる */
.buybox > :first-child { margin-top: 0; }
.buybox h2 { margin: var(--s5) 0 var(--s2); font-size: 1rem; }
.buybox .price { font-size: 1.375rem; }
.buybox .unit-note { margin: var(--s1) 0 0; }

/* 度数の選択。
   【必須】`.power-select` は <select> そのものに付いている
   （計測の JS が `document.querySelectorAll('.power-select')` で拾う）。
   front.css の `display: grid` は <select> には当てないこと。 */
select.power-select { display: block; width: 100%; }
.power-field + .power-field { margin-top: var(--s3); }
.power-field > label { margin-top: 0; }

.buybox .qty-field { margin-top: var(--s4); }
.buybox .qty-field > label { margin-top: 0; }
.buybox .qty-field input[type=number] { width: 6em; }
.buybox .btn.block { margin-top: var(--s4); }

/* --- アウトレット一覧の空状態（導線を必ず残す） --- */
.empty-state p { color: var(--sub); }


/* ============================================================
   14. カート・チェックアウトの追補（CT-01〜05 / CT-07）
   ============================================================ */
/* ============================================================
   B カート・チェックアウト（CT-01 / CT-02〜05 / CT-07）で足したクラス
   ------------------------------------------------------------
   このブロックは §8「カート・チェックアウト」より後ろに置く（上書きを効かせるため）。
   既存クラス（.limitbar / .order-summary / .sticky-cta / .msg / .field-error）は
   1つも書き換えていない。ここに在るのは追加だけである。
   ============================================================ */

/* --- 見出しの欧文小見出し（.sub-ttl＝和文のリード文とは役割が違う） -------------
   現行は「現在のカゴの中 / Shopping Cart」のように和文見出しの下に
   小さな欧文を敷いており、この1行がページのリズムを作っている。
   【必須】`.muted` で代用しないこと —— 本文の注記に見えて階層が潰れる。 */
.sub-en {
margin: calc(var(--s3) * -1) 0 var(--s5);
color: var(--rose);
font-size: .6875rem;
font-weight: 700;
letter-spacing: .14em;
}

/* --- チェックアウトの手順（1 お届け先 → 2 お支払い → 3 確認） ---
   【必須】この帯を「押せるもの」に見せないこと。戻る導線は各画面の
   「◯◯を修正する」リンクが持つ（誤タップで入力が飛ぶ形にしない）。 */
.steps {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s1);
margin: var(--s4) 0 var(--s6);
padding: 0;
}
.steps li {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s1);
padding: var(--s2) var(--s1) 0;
border-top: 3px solid var(--line);
color: var(--sub-2);
font-size: .75rem;
line-height: 1.4;
text-align: center;
}
.steps li .n {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: var(--r3);
background: var(--line-2);
color: #fff;
font-size: .6875rem;
font-weight: 700;
line-height: 1;
}
.steps li.done { border-top-color: var(--rose); color: var(--sub); }
.steps li.done .n { background: var(--rose); }
.steps li.current { border-top-color: var(--accent); color: var(--ink-strong); font-weight: 700; }
.steps li.current .n { background: var(--accent); }

/* --- 明細の中に入る通知（.msg の詰め版） ---------------------
   【必須】`.msg` の意味色をここで変えないこと。詰めるのは余白だけである
   （60日上限は制度上の制限であって操作ミスではない＝04 §4-1-1）。 */
.msg.tight { margin: var(--s2) 0 0; padding: var(--s2) var(--s3); font-size: .8125rem; }

/* --- 上限バーの超過（赤にしない。琥珀まで） ------------------- */
.limitbar.over { background: var(--warn-bg); border-color: #e8d4ac; }

/* --- カートの明細 ------------------------------------------- */
.line-title { display: block; font-size: .9375rem; font-weight: 700; line-height: 1.5; color: var(--ink-strong); }
/* ## **カートの明細のレンズ写真**（2026-09-24 指示・近藤氏。04 §4-1-3）——
   ## **写真と商品名を横1列に置く**（LS-02 のカラー行と同じ読み方にする）。
   ## **`flex: 0 0 auto` を外さないこと** —— **外すと商品名の長さで写真の幅が動く**（LS-02 と同じ理由）。
   ## **写真が無い明細は `.thumb-empty` に落ちる** —— **同じ `aspect-ratio` なので高さが揺れない。** */
.line-head { display: flex; align-items: center; gap: var(--s3); }
.line-head .line-thumb {
    flex: 0 0 auto;
    width: 64px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--band);
}
/* ## 明細の受け皿は下罫線を出さない（カードの中の横並びである＝LS-02 と同じ手当て） */
.line-head .thumb-empty { width: 64px; border-bottom: 0; font-size: .75rem; }
.line-head .line-title { flex: 1 1 auto; min-width: 0; }
.line-meta { display: flex; flex-wrap: wrap; gap: 0 var(--s3); margin-top: var(--s1); color: var(--sub); font-size: .8125rem; }
.line-price { margin-top: var(--s2); }
.qty-form { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--line); }
.qty-form label { margin: 0; flex: none; }
/* 【必須】`input.` を外さないこと —— 基底の `input[type=number]{width:100%}` は
   詳細度 (0,1,1) であり、`.qty-input` 単独 (0,1,0) では負けて数量欄がカードからはみ出す */
input.qty-input { width: 4.5em; flex: none; }
.line-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.line-actions form { margin: 0; }
.line-actions .btn { flex: 1 1 auto; }

/* --- 空状態（04 §2-4。専用の文言と次の導線を対で持つ） --------- */
.empty-state { text-align: center; padding: var(--s7) var(--s4); }
.empty-state p { margin: var(--s2) 0; }
.empty-state .btn { margin-top: var(--s4); }

/* --- クーポン（CT-01） -------------------------------------- */
.coupon-row { display: flex; gap: var(--s3); align-items: flex-start; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.coupon-row:first-of-type { margin-top: var(--s2); padding-top: 0; border-top: 0; }
.coupon-row form { margin: 0; flex: none; }
.coupon-terms { color: var(--sub); font-size: .75rem; line-height: 1.8; }
.coupon-code-form { display: flex; gap: var(--s2); margin-top: var(--s2); }
.coupon-code-form input { flex: 1; min-width: 0; }

/* --- カートの統合（CT-07） ---------------------------------- */
.merge-presets { display: flex; gap: var(--s2); margin: var(--s5) 0; }
.merge-presets .btn { flex: 1; }
.merge-field { display: grid; gap: var(--s1); margin-top: var(--s3); }
.merge-field label { margin: 0; }
/* 【必須】`input.` を外さないこと（`.qty-input` と同じ理由 —— 基底の
   `input[type=number]{width:100%}` は詳細度 (0,1,1) で、クラス単独 (0,1,0) では負ける） */
input.merge-qty { width: 5em; }
/* 【必須】front.css の `.merge-state` は .8125rem だが、この class が付くのは
   CT-07 の <select> である —— **16px を下回ると iOS がフォーカス時にページを自動ズームする**。
   class は末尾のスクリプトが掴んでいるため改名できない。ここで戻す。 */
select.merge-state { font-size: 16px; color: var(--ink); }

/* --- 支払方法（CT-03） -------------------------------------
   【必須】カード全体をタップ領域にする（44px）。ラジオだけを的にしない。 */
.pay-option { border: 1px solid var(--line-2); border-radius: var(--r2); padding: var(--s3); margin: var(--s3) 0; background: #fff; }
.pay-option.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pay-option.disabled { background: var(--band-2); border-style: dashed; }
.pay-option > .head {
display: flex;
align-items: center;
gap: var(--s3);
min-height: var(--tap);
margin: 0;
color: var(--ink-strong);
font-size: 1rem;
font-weight: 700;
cursor: pointer;
}
.pay-option.disabled > .head { color: var(--sub-2); cursor: default; }
.pay-option > .head .fee { margin-left: auto; color: var(--price); font-size: .875rem; white-space: nowrap; }
.pay-option.disabled > .head .fee { color: var(--sub-2); }
.pay-note { margin: var(--s1) 0 0 calc(20px + var(--s3)); color: var(--sub); font-size: .8125rem; line-height: 1.7; }

/* --- ポイント利用（CT-03） ---------------------------------- */
.point-box .balance { font-size: 1.25rem; font-weight: 700; color: var(--ink-strong); }
.point-box .balance .unit { margin-left: var(--s1); font-size: .8125rem; font-weight: 400; color: var(--sub); }
.point-input-row { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.point-input-row label { margin: 0; flex: none; }
.point-input-row input { width: 8em; }
.point-input-row .unit { color: var(--sub); font-size: .9375rem; }

/* --- 最終確認（CT-04） -------------------------------------- */
.confirm-block { position: relative; }
.confirm-block > h2 { margin-top: 0; padding-right: 5em; }
.confirm-edit { position: absolute; top: var(--s3); right: var(--s3); font-size: .8125rem; }
.confirm-address { font-size: .9375rem; line-height: 1.8; }
.confirm-address .name { font-weight: 700; color: var(--ink-strong); }
.confirm-items { list-style: none; margin: var(--s3) 0; padding: 0; }
.confirm-items > li { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.confirm-items > li:last-child { border-bottom: 0; padding-bottom: 0; }
.confirm-items > li:first-child { padding-top: 0; }

/* --- 完了（CT-05） ------------------------------------------ */
.complete-hero { text-align: center; border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s6) var(--s4); margin: var(--s4) 0; background: var(--band-2); }
.complete-mark {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin: 0 auto var(--s4);
border-radius: var(--r3);
background: var(--rose-pale);
color: var(--crimson);
font-size: 1.75rem;
line-height: 1;
}
.complete-hero .label { display: block; color: var(--sub); font-size: .8125rem; }
.complete-hero .order-number { display: block; margin-top: var(--s1); font-size: 1.5rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-strong); }
.complete-amount { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); text-align: left; font-size: .875rem; color: var(--sub); }
.complete-amount .amount { color: var(--price); font-size: 1.25rem; font-weight: 700; }

/* --- 下部固定CTA の補足行 ----------------------------------- */
.sticky-cta .note { margin: 0 0 var(--s2); text-align: center; }

/* --- カード情報の入力（CT-04 / PP-02）2026-09-04 指示・近藤氏 ---
   ## 「決済方法でクレジットカード番号を入れる画面のUIがひどいです。もっとしっかり作り込んでください。」

   ## 【必須】原因は当店側にあった —— `.gmo-field` に CSS が【1行も無かった】。
     ## `<div>` は GMO が iframe を挿す【器】であり、
     ## 当店の基底の枠は `input[type=text]` 等の【要素セレクタ】なので1つも当たらない。
     ## その結果、同じフォームの中で「カード名義人」だけが枠付き・その上の3つが枠無しになっていた。

   ## 【必須】ここを直すことは、カード番号の扱いに【一切 触れない】 ——
     ## 禁じられているのは「カード番号のデータがどこを通るか」であって、器の見た目ではない。
     ## `<div>` に枠を足すことは `<input>` を置くことではない。

   ## 【必須】`height` を固定しないこと —— iframe の中身が切れる。`min-height` にすること。

   ## 【2026-09-11 是正・近藤氏のご指摘】上の【必須】は【誤りだった】——
     ## 「カード情報入力欄がすごく大きいのでおかしいです」。
     ## ## `<iframe>` は【置換要素】であり、`height` を書かないと HTML の既定値 150px になる。
     ## ## その結果、器（`.gmo-field`）が本来の 48px の【3倍以上】に膨らんでいた。
     ## ## `height: auto` でも直らない —— 置換要素の既定サイズに戻るだけである。
     ## 【必須】したがって iframe には `height` を【書く】。
     ## 【必須】ただし器（`.gmo-field`）の側は `min-height` のままにすること ——
     ##   GMO がエラー文言などで中身を増やしたとき、器だけは伸びられる形を残す。
     ## 【必須】覆した事実そのものを消さないこと（CLAUDE.md §10-0）。 */
.card-input .form-row { margin: var(--s5) 0; }
.card-input .form-row > .lbl,
.card-input .form-row > div > .lbl,
.card-input .form-row > label {
    display: block;
    margin: 0 0 var(--s1);
    color: var(--sub);
    font-size: .8125rem;
}
/* ## 有効期限とセキュリティコードを横1列にする（カードの実物の並び） */
.card-input .form-row.pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
}
/* ## 【必須】基底の `input[type=text]` と【同じ見た目】にすること ——
     ## 同じフォームの中で入力欄が2種類の見た目になっていると、片方が壊れて見える。
   ## 【必須】高さの基準は `--field-inner` である。`--tap` にしないこと（2026-09-11 実測）——
     ## 当店の `input[type=text]` は 50px（内側 48px ＋ 上下の枠 1px）であり、
     ## `--tap`（44px）にすると【4px 低い欄】が同じフォームに並ぶ。 */
.gmo-field {
    display: flex;
    align-items: center;
    min-height: var(--field-inner);
    padding: 0 var(--s3);
    border: 1px solid var(--line-2);
    border-radius: var(--r1);
    background: #fff;
}
/* ## iframe の既定（`border: 2px inset` / `display: inline` / `height: 150px`）を殺す。
     ## 【必須】`height` を書くこと —— 書かないと 150px になる（2026-09-11 実測）。
     ## 【必須】器の `min-height` と【同じ値】にすること ——
     ##   ずれると、器だけが伸びて中の iframe が上に寄る／iframe が器からはみ出す。
     ## 【必須】ここを大きくして解決しないこと ——
     ##   中身が切れるなら、器の `min-height` と【両方】を同じ値で上げる。
     ## 【必須】`--tap` に戻さないこと —— 上の【必須】と同じ理由である。 */
.gmo-field > iframe {
    display: block;
    width: 100%;
    height: var(--field-inner);
    border: 0;
}

/* --- ポイント購入（PP-02）2026-09-04 ---
   ## 【必須】`.point-package` と `.alert-error` は CSS が【1行も無かった】——
     ## 基底の `label { font-size:.8125rem; color: var(--sub) }` が当たり、
     ## 金額が【小さい灰色の文字】で出ていた。押せる選択肢に見えない。
   ## 【必須】`.pay-option`（CT-03 の支払方法）と同じ形にすること ——
     ## 同じ「選ぶ」操作が画面ごとに違う見た目だと、押せるものが分からない。 */
.point-package {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    margin: var(--s3) 0;
    padding: var(--s3);
    border: 1px solid var(--line-2);
    border-radius: var(--r2);
    background: #fff;
    color: var(--ink);
    font-size: 1rem;
    cursor: pointer;
}
.point-package:has(input:checked) {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset;
}
.point-package > input { margin-top: 3px; }
.point-package .body { display: block; }
.point-package .name { display: block; color: var(--ink-strong); font-weight: 700; }
.point-package .meta { display: block; margin-top: 2px; color: var(--sub); font-size: .8125rem; }
.point-package .price { display: block; margin-top: var(--s1); color: var(--price); font-weight: 700; }

/* ## 【必須】`.alert-error` を `.errors` と同じ見た目にすること ——
     ## いまは CSS が無く、支払いが使えない旨が【地の文】で出ていた。 */
.alert-error {
    margin: var(--s3) 0;
    padding: var(--s3);
    border-left: 3px solid var(--accent);
    border-radius: var(--r1);
    background: var(--band-2);
    color: var(--ink-strong);
    font-size: .875rem;
}


/* ============================================================
   15. 認証の追補（AU-01〜06）
   ============================================================ */
/* ============================================================
   15-1. 認証の内訳（AU-01 / AU-02 / AU-02b / AU-04〜06）
   ============================================================
   【必須】ここに「パスワード」を思わせる部品を足さないこと。
   `users` に `password` 列は無い（CLAUDE.md §7-1 / 00_decisions §6）。

   【必須】登録済み／未登録で見た目を変える部品を足さないこと ——
   アドレスの実在が漏れる（06_mail_templates §3-1）。
   ============================================================ */

/* --- 入力欄のまとまり（ラベル・補足・入力・エラーを1つの塊にする）---
   04 §2-4「エラーは項目の直下に出す」の受け皿。
   ラベルと入力が離れると、SP では対応が読み取れない。 */
.field { margin: var(--s5) 0; }
.field > label { margin: 0 0 var(--s1); }
.field > .hint { display: block; color: var(--sub); font-size: .8125rem; margin: 0 0 var(--s1); }
.field > .field-error { margin-top: var(--s1); }

/* 必須／任意の印。**ラベルの文言そのものは変えず、印だけを添える** */
.field .req, .field .opt {
    display: inline-block;
    margin-left: var(--s1);
    padding: 0 var(--s1);
    border-radius: var(--r1);
    font-size: .625rem;
    font-weight: 700;
    line-height: 1.6;
    vertical-align: 1px;
}
.field .req { background: var(--danger-bg); color: var(--danger); }
.field .opt { background: var(--band); color: var(--sub); }

/* --- 認証画面のリード（パスワードレスであることを最初に伝える）--- */
.auth-lead {
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r1);
    background: var(--band-2);
    padding: var(--s3) var(--s4);
    margin: var(--s4) 0;
    font-size: .9375rem;
    line-height: 1.8;
}
.auth-lead p { margin: 0; }
.auth-lead p + p { margin-top: var(--s2); }
.auth-lead strong { color: var(--ink-strong); }

/* --- 登録の3ステップ（AU-01。2026-09-09 指示・近藤氏）---
   【必須】数字を消して箇条書きにしないこと —— 「何回で終わるか」が先に分かることが要点である。
   【必須】ここに「はじめての方はこちら」のリンクを足さないこと —— 行き先は1つである（04 §5-2）。 */
.auth-steps {
    margin: var(--s3) 0 0;
    padding: 0 0 0 1.4em;
    font-size: .875rem;
    line-height: 1.9;
}
.auth-steps li { margin: 0; }
.auth-steps li::marker { color: var(--accent); font-weight: 700; }

/* --- 旧サイトのパスワード欄（既定は閉じる。2026-09-09）---
   【必須】`open` を既定にしないこと —— 新しくご登録の方に「パスワードを入れる画面」に見える。
   【必須】会員かどうかで出し分けないこと —— どなたにも同じ形で閉じて出す（04 §5-2）。 */
.auth-pw {
    border: 1px solid var(--line);
    border-radius: var(--r1);
    background: var(--band-2);
    margin: var(--s4) 0;
}
/* 【必須】開閉できることが見て分かる印を出すこと（2026-09-09 実測で是正）——
   `display: flex` にすると既定の三角が消え、【押せない入力欄】に見えた。 */
.auth-pw > summary {
    cursor: pointer;
    padding: var(--s3) var(--s4);
    min-height: var(--tap);
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: .8125rem;
    color: var(--sub);
    list-style: none;
}
.auth-pw > summary::-webkit-details-marker { display: none; }
.auth-pw > summary::before {
    content: "";
    flex: 0 0 auto;
    width: .5em;
    height: .5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg) translate(-.1em, -.1em);
    transition: transform .15s;
}
.auth-pw[open] > summary::before { transform: rotate(45deg) translate(-.05em, -.15em); }
.auth-pw > summary:hover, .auth-pw > summary:focus-visible { color: var(--ink); }
.auth-pw[open] > summary { border-bottom: 1px solid var(--line); }
.auth-pw .field { padding: var(--s3) var(--s4) var(--s4); margin: 0; }

/* --- 「または」の区切り（メール／LINE の2経路）--- */
.or-divider {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin: var(--s6) 0;
    color: var(--sub-2);
    font-size: .75rem;
    letter-spacing: .08em;
}
.or-divider::before, .or-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* --- LINEログイン（AU-03）---
   ブランド色 #06C755。**CTA（#ff7d7d）と取り違えないこと** ——
   CTA は「カートに入れる」に限る（04 §2-1）。 */
.btn.line {
    background: #06c755;
    color: #fff;
    border: 0;
    font-size: 1rem;
    font-weight: 700;
    padding: var(--s3) var(--s5);
}
.btn.line:hover, .btn.line:focus-visible { background: #05b34c; color: #fff; }

/* --- 確認コード（6桁）---
   桁が読み取れるよう字間を空ける。字間ぶん右に寄るので padding で戻す。 */
.code-field input {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .45em;
    text-align: center;
    padding-left: calc(var(--s3) + .45em);
}

/* --- 同意チェック（AU-02 のメールマガジン購読）---
   【必須】既定は外した状態である（04 §5-2-1）。見た目で「入っているように」見せないこと。
   【必須】文字を縮めないこと —— 要件10（法務確認）の対象の文言である。 */
.consent { margin: var(--s5) 0; }
.consent > label {
    display: flex;
    align-items: center;
    gap: var(--s3);
    min-height: var(--tap);
    margin: 0;
    padding: var(--s2) var(--s3);
    border: 1px solid var(--line-2);
    border-radius: var(--r1);
    background: #fff;
    color: var(--ink);
    font-size: .9375rem;
    line-height: 1.5;
    cursor: pointer;
}
.consent > label:hover { background: var(--band-2); }
.consent input[type=checkbox] { flex: none; }
.consent .consent-note {
    margin: var(--s2) 0 0;
    color: var(--sub);
    font-size: .8125rem;
    line-height: 1.7;
}

/* --- 長いフォームの節（AU-04）---
   節の番号は【CSS のカウンタ】で出す。HTML に文字を足さない
   （足すと `assertSee` / `assertDontSee` の対象が増える）。 */
.sectioned-form { counter-reset: form-section; }
.form-section { margin: var(--s7) 0 0; }
.form-section > h2 { margin-top: 0; counter-increment: form-section; }
.form-section > h2::before {
    content: counter(form-section);
    width: 22px;
    height: 22px;
    border-radius: var(--r3);
    background: var(--accent);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}
.form-section > .muted { margin-top: 0; }

/* --- 受付番号（AU-05）---
   お電話で読み上げていただく値である。1画面で最も大きく出す。 */
.receipt {
    text-align: center;
    padding: var(--s5) var(--s4);
    background: var(--band-2);
}
.receipt .label { display: block; color: var(--sub); font-size: .75rem; letter-spacing: .08em; }
.receipt .number {
    display: block;
    margin-top: var(--s1);
    color: var(--ink-strong);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .08em;
    word-break: break-all;
}

/* --- 画面末尾の補助導線 --- */
.auth-alt { margin-top: var(--s6); border-top: 1px solid var(--line); padding-top: var(--s4); }
.auth-alt p { margin: var(--s2) 0; }


/* ============================================================
   16. マイページの追補（MP-01〜12）
   ============================================================ */
/* ============================================================
   D. マイページ（MP-01〜MP-12）
   ------------------------------------------------------------
   現行サイトの mypage は「白地・グレーの罫線・1行1項目」であり、
   front.css の `.mypage-nav` / `.profile-view` / `.order-list` が既に対応している。
   ここで足すのは【現行にある要素で、front.css がまだ持っていないもの】だけである。

 ①ダッシュボードの要約（現行 index.tpl の「所持ポイント ◯pt」＋ランク欄）
 ②注文カードの右上のステータス箱（現行 .arrowBox の order_status）
 ③失効予告・ランク進捗（現行に無いが新仕様で要る）
 ④PC の「閲覧のみ」の告知（04 §2-2 #4）

   【必須】`.empty-state` / `.field` / `.page-back` / `.msg.tight` / `.form-section` は
   他の担当が既に定義している。**ここで定義し直さないこと**（同名で違う値が2つ並ぶ）。
   ============================================================ */

/* --- ①ダッシュボードの要約 -----------------------------------
   現行は「ようこそ◯◯様／所持ポイント◯pt」を中央に大きく出し、その下にランクを出す。
   新は3つ（ポイント／ランク／クーポン）を横に並べる ——
   **注文件数は出していない**（MP-01 は直近5件しか持っておらず、総数を出せない）。 */
.mypage-summary {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1px;
margin: var(--s4) 0;
border: 1px solid var(--line);
border-radius: var(--r2);
background: var(--line);
overflow: hidden;
}
.mypage-summary .stat {
background: #fff;
padding: var(--s3) var(--s2);
text-align: center;
min-width: 0;
}
.mypage-summary .stat .label {
display: block;
color: var(--sub);
font-size: .6875rem;
line-height: 1.6;
}
.mypage-summary .stat .value {
display: block;
margin-top: var(--s1);
color: var(--ink-strong);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
/* ランク名は「ダイヤモンド」まであるため、はみ出さずに縮める */
overflow-wrap: anywhere;
}
/* ランク名だけは字数が多い。1.25rem だと2行に割れて高さが揃わない */
.mypage-summary .stat .value.text { font-size: 1rem; }

/* 【必須】単位（pt / 枚 / 円）を別のタグに切り出さないこと ——
   `assertSee('0枚')` / `assertSee('100pt')` が【文字列】で見ており、
   `0<span>枚</span>` に分けると HTML 上で連続しなくなって落ちる。
   front.css の `.point-balance .unit` も、この理由で使われていない。 */

.mypage-greeting { margin: var(--s3) 0 0; font-size: .9375rem; }

/* `.msg` の中の箇条書き（MP-10「停止しても届くもの」）。
   front.css の `.msg` は `p` しか面倒を見ておらず、`ul` は既定の余白のままになる。 */
.msg ul { margin: var(--s1) 0; padding-left: 1.4em; }
.msg li { margin: 2px 0; }

/* --- ③失効予告 ------------------------------------------------
   【必須】赤くしないこと —— 失効は制度であり、顧客の操作ミスではない（front.css の `.msg` の注記と同じ）。
   ただし「いつまでか」は約束であり、本文の中で埋もれさせない。 */
.point-expiry {
display: flex;
gap: var(--s2);
align-items: baseline;
margin: var(--s3) 0;
padding: var(--s2) var(--s3);
border-radius: var(--r1);
background: var(--band-2);
border-left: 3px solid var(--rose);
color: var(--ink);
font-size: .8125rem;
line-height: 1.7;
}
.point-expiry .date { font-weight: 700; color: var(--ink-strong); white-space: nowrap; }

/* --- ②注文カード ---------------------------------------------
   現行 `.arrowBox` は「枠のなかに注文番号・日時・金額を積み、右上にステータスの箱」。
   タップ領域は行全体（`<a>`）で、右端に「›」を出す。 */
.order-link {
display: block;
position: relative;
min-height: var(--tap);
padding: var(--s1) var(--s6) var(--s1) 0;
color: var(--ink);
}
.order-link:hover, .order-link:focus-visible { text-decoration: none; }
.order-link::after {
content: "›";
position: absolute;
right: var(--s2);
top: 50%;
transform: translateY(-50%);
color: var(--sub-2);
font-size: 1.25rem;
line-height: 1;
}
.order-link .head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.order-link .foot {
display: flex;
align-items: baseline;
gap: var(--s3);
margin-top: 2px;
flex-wrap: wrap;
}
.order-link .amount { color: var(--price); font-weight: 700; }

/* 状態の色分けは3つだけ（進行中 / 済み / 無効）。
   【必須】`status` の値そのものを class 名にしないこと ——
   HTML のソースに `cancelled` の語が載る（04 §6-2 が原因を顧客に出さないと定めている）。 */
.order-status.is-open { background: var(--info-bg); color: var(--info); }
.order-status.is-done { background: var(--ok-bg); color: var(--ok); }
.order-status.is-void { background: var(--band); color: var(--sub-2); }

/* --- ③ランクの進捗 --------------------------------------------
   【必須】特典ポイントを出さないこと —— RK は承認制であり、額の表示は顧客への約束になる。 */
.rank-hero { text-align: center; padding: var(--s5) 0 var(--s3); }
.rank-hero .label { display: block; color: var(--sub); font-size: .75rem; }
.rank-hero .rank-name { display: block; margin-top: var(--s1); }

/* 【必須】`style="width:◯%"` を書かせないために `<progress>` を使っている。
   ブラウザ既定の見た目は端末ごとに違うため、-webkit / -moz の両方を潰す
   （SP専用だが、開発時に Firefox で見ると別物になる）。 */
.rank-progress { margin: var(--s4) 0; }
.rank-progress progress {
display: block;
width: 100%;
height: 8px;
border: 0;
border-radius: var(--r3);
background: var(--band);
-webkit-appearance: none;
appearance: none;
overflow: hidden;
}
.rank-progress progress::-webkit-progress-bar { background: var(--band); border-radius: var(--r3); }
.rank-progress progress::-webkit-progress-value { background: var(--rose); border-radius: var(--r3); }
.rank-progress progress::-moz-progress-bar { background: var(--rose); border-radius: var(--r3); }
.rank-progress .ends {
display: flex;
justify-content: space-between;
gap: var(--s3);
margin-top: var(--s1);
color: var(--sub);
font-size: .75rem;
}

/* --- クーポン（MP-12）-----------------------------------------
   04 §8-10 の表示必須項目（額面 / 最低利用金額 / 有効期限 / 対象）を1枚に収める。 */
.coupon-card {
border: 1px solid var(--line);
border-left: 3px solid var(--rose);
border-radius: var(--r2);
padding: var(--s3);
background: #fff;
}
.coupon-card .amount {
color: var(--price);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
}
.coupon-card .terms { margin: var(--s1) 0 0; color: var(--sub); font-size: .75rem; line-height: 1.8; }
.coupon-card .until { font-weight: 700; color: var(--ink-strong); }

/* --- ④PC の「閲覧のみ」の告知（04 §2-2 #4）--------------------
   【必須】エラー色にしないこと。**利用者は何も間違えていない。**
   【必須】「スマートフォンでご覧ください」を消さないこと —— 次の手が書いていないと案内にならない。 */
.pc-notice {
display: block;
margin: var(--s3) 0 var(--s5);
padding: var(--s3);
border-radius: var(--r1);
background: var(--info-bg);
color: var(--info);
border-left: 3px solid var(--info);
font-size: .875rem;
line-height: 1.7;
}

/* --- 退会（MP-11）---------------------------------------------
   【必須】脅かさないこと。**失うものは事実として列挙し、赤い面で塗らない。**
   赤くしてよいのは「元に戻せない」という一点だけである。 */
.loss-list { list-style: none; margin: var(--s3) 0; padding: 0; }
.loss-list > li {
padding: var(--s3) 0 var(--s3) var(--s5);
border-bottom: 1px solid var(--line);
position: relative;
font-size: .9375rem;
line-height: 1.8;
}
.loss-list > li::before {
content: "−";
position: absolute;
left: var(--s2);
top: var(--s3);
color: var(--danger);
font-weight: 700;
line-height: 1.8;
}
.loss-list > li:last-child { border-bottom: 0; }
/* 【必須】数字だけを別のタグで囲まないこと（`assertSee('1,200pt が失効します')` が
   文字列で見ている）。**色を付けるのは行の `<strong>` 全体である。** */
.loss-list > li > strong { color: var(--ink-strong); }

.withdraw-agree {
display: flex;
align-items: flex-start;
gap: var(--s2);
margin: var(--s5) 0 var(--s4);
padding: var(--s3);
border: 1px solid var(--line-2);
border-radius: var(--r1);
background: var(--band-2);
color: var(--ink);
font-size: .9375rem;
line-height: 1.6;
}
.withdraw-agree input[type=checkbox] { margin-top: 3px; flex: none; }

/* 退会後も保有するもの・戻せないことの注記 */
.withdraw-keep { margin: var(--s4) 0 0; }

/* --- LINE 連携（MP-09）----------------------------------------- */
.line-account .title { font-weight: 700; color: var(--ink-strong); }
.line-account .linked-at { display: block; margin-top: 2px; color: var(--sub); font-size: .75rem; }
.line-account form { margin: var(--s3) 0 0; }

/* --- ポイント履歴の増減 ----------------------------------------
   【必須】符号を色だけで表さないこと（`+` / `−` の文字を必ず添える）。 */
.point-history > li { display: flex; align-items: baseline; gap: var(--s3); }
.point-history .body { flex: 1; min-width: 0; }
.point-history .type { display: block; }
.point-history .amount { white-space: nowrap; }
.point-history .amount.plus { color: var(--ok); }
.point-history .amount.minus { color: var(--sub); }

/* --- 注文詳細（MP-03）の明細 ----------------------------------- */
.order-items .product-name { display: block; font-weight: 700; color: var(--ink-strong); }
.order-items .powers { display: block; margin-top: 2px; color: var(--sub); font-size: .8125rem; }
.order-items .line-foot {
display: flex;
justify-content: space-between;
gap: var(--s3);
margin-top: var(--s1);
font-size: .875rem;
}
.order-items .line-foot .unit-price { font-weight: 700; }


/* ============================================================
   17. 情報ページの追補（IN-01〜11）
   ============================================================ */
/* ============================================================
   10-1. 情報ページ（IN-*）の追補 — E担当（2026-08-24）
   ------------------------------------------------------------
   現行サイトの `p.sub_ttl`（見出し直下の小さな副見出し）と、
   ご注文の流れ・FAQ・度数一覧・ページ末尾の戻り導線に対応する。
   【必須】色は既存トークンだけで作る（新しい色を増やさない）。
   ============================================================ */

/* 見出し直下の副見出し（現行 `p.sub_ttl`）。
   .muted で代用すると「本文の注記」に見え、見出しのリズムが崩れる */
.sub-ttl {
    margin: calc(var(--s3) * -1) 0 var(--s4);
    color: var(--accent);
    font-size: .8125rem;
    line-height: 1.7;
}

/* 見出し行が上にある表（送料・手数料・ランクなど）。
   既定の `.doc th` は左見出しの定義表用で width:8em を持つため上書きする */
.doc table.grid th {
    width: auto;
    color: var(--ink-strong);
    background: var(--band);
    white-space: nowrap;
}
.doc table.grid td.num,
.doc table.grid th.num { text-align: right; white-space: nowrap; }

/* ご注文の流れ（現行の「↓」で繋いだ縦の手順） */
.flow {
    list-style: none;
    margin: var(--s4) 0;
    padding: 0 0 0 var(--s5);
    border-left: 2px solid var(--line);
    counter-reset: flow;
}
.flow > li {
    position: relative;
    margin: 0 0 var(--s4);
    font-size: .9375rem;
    line-height: 1.8;
}
.flow > li::before {
    counter-increment: flow;
    content: counter(flow);
    position: absolute;
    left: calc(var(--s5) * -1 - 11px);
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: var(--r3);
    background: var(--accent);
    color: var(--on-dark);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}
.flow > li > strong { display: block; color: var(--ink-strong); }
.flow > li .note { margin: var(--s1) 0 0; }
/* 手順に番号を振らない列（決済ごとの分岐など） */
.flow.plain { counter-reset: none; }
.flow.plain > li::before { content: ""; background: var(--line-2); }

/* よくある質問（Q/A） */
.qa { margin: var(--s4) 0; }
.qa > dt {
    margin: var(--s4) 0 0;
    padding: var(--s2) var(--s3);
    background: var(--band);
    border-radius: var(--r1);
    color: #444;
    font-weight: 700;
    font-size: .9375rem;
}
.qa > dd {
    margin: var(--s2) 0 0;
    padding: 0 var(--s3);
    font-size: .9375rem;
    line-height: 1.9;
}

/* 注文可能度数の一覧 */
.power-grid {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin: var(--s3) 0;
    padding: 0;
}
.power-grid > li {
    margin: 0;
    min-width: 4.5em;
    padding: var(--s2) 0;
    border: 1px solid var(--line);
    border-radius: var(--r1);
    background: var(--band-2);
    text-align: center;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

/* ページ末尾の戻り導線 */
.page-back {
    margin: var(--s7) 0 0;
    padding-top: var(--s4);
    border-top: 1px solid var(--line);
    font-size: .875rem;
}

/* IN-07 プライバシーポリシーの本文を、他の情報ページ（.doc）と同じ可読性で組む。
   ------------------------------------------------------------
   【必須】ビュー側の `class="card policy"` の文字列を変えないこと ——
   `PrivacyPolicyTest::policyBody()` が `strpos($html, 'class="card policy"')` で
   本文カードを切り出しており、クラスを1つ足すだけで切り出しに失敗する。
   だから【CSS の側】で `.card.policy`（詳細度 0,2,0）として上書きする。
   `.policy` 単体（0,1,0）の 13px / var(--sub) は、20KB の法定表示を読ませる字ではない。 */
.card.policy { font-size: .9375rem; line-height: 1.9; color: var(--ink); }
.card.policy h2 { font-size: 1rem; }
.card.policy h3 { font-size: .9375rem; }
.card.policy ul, .card.policy ol { padding-left: 1.4em; }
.card.policy li { margin: var(--s1) 0; }


/* ============================================================
   18. エラーページ・共通の追補（SP-02 ほか）
   ============================================================ */
/* ============================================================
   18-1. エラーページの内訳（SP-02。404 / 410 / 419 / 429 / 500）
   ============================================================
   【必須】503（メンテナンス）はこのCSSに依存しない。
   `resources/views/errors/503.blade.php` は共通レイアウトを継承せず、
   スタイルを自分で持つ —— **停止中は DB もキャッシュも当てにできない**
   （View Composer が `Analytics::isVerifiedCrawler()` を呼ぶ）。 */
.error-page { margin: var(--s6) 0 var(--s8); }
.error-page h1 { margin-top: var(--s3); }

/* ステータスコードは「小さく添える」——
   大きな数字を主役にすると、利用者に読ませたい一文が後ろへ下がる */
.error-code {
    display: inline-block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--sub);
    background: var(--band);
    border-radius: var(--r3);
    padding: 2px var(--s3);
}

/* 次の導線。**空状態と同じ作法**（04 §2-4）——
   「見つかりません」だけで行き止まりにしない */
.error-actions {
    list-style: none;
    margin: var(--s5) 0 0;
    padding: 0;
    display: grid;
    gap: var(--s3);
}
.error-actions > li { margin: 0; }


/* ============================================================
   19. TOP（TP-01）の追補 —— ヒーロー / カラコンを探す / バナー / 棚 / フッタ固定メニュー
   ============================================================
   2026-08-25 指示・近藤氏「TOPページを新仕様で今と同じ構成に」。

   【必須】このブロックは §7「カタログ」の定義を意図して上書きする行を含む。
   §7 より【後ろ】に置くこと（順序を入れ替えると上書きが効かなくなる）。

   【必須】新しい色を増やさないこと。
   現行サイトの「カラコンを探す」は小見出しが青（#0085B2）だが、
   本デザインシステムは **同じ役割の `p.sub_ttl` を `--accent`（#db0c66）と決めている**
   （§17 の `.sub-ttl`）。ここでもそれに揃える —— 同じ役割の文字が画面ごとに違う色になると、
   「どちらが正しいのか」を毎回 人が判断することになる。

   【必須】jQuery / bxSlider を持ち込まないこと（front.css 冒頭と同じ理由）。
   ============================================================ */

/* --- TOP の見出し ---
   ~~現行サイトはヒーロー画像から始まり h1 を持たない。
   **SP限定運用では検索が新規流入の主経路であり h1 は残す**が、上余白は詰めて
   ヒーローを画面の上のほうに置く。~~
   ## **【2026-09-28 指示・近藤氏で覆った】上余白の調整はもう効かない** ——
   ## **下のとおり【視覚的に隠す】形になり、余白そのものを持たない。**
   ## **【必須】起票時の記述を消さずに残している**（CLAUDE.md §10-0）——
   ## **「h1 は残す」の判断だけは生きている**（消したのは【見た目】である）。 */
/* ## **【2026-09-28 指示・近藤氏】ヒーローの上の「カラコンMooN」は【出さない】**
   ## **原文「上部ヒーロー上の『カラコンMooN』の文字は不要です。削除して。」**

   ==================================================================
   ## 【必須】`<h1>` そのものは消さないこと。隠すだけである
   ==================================================================
     ## **Blade 側に「【必須】h1 を消さないこと。**
     ## **SP限定運用では検索が新規流入の主経路である」と書いてある** ——
     ## **要素ごと消すと、TOP から見出しが無くなり検索とスクリーンリーダーに響く。**
     ## **見た目だけ消して、機械には残す**（実装側の判断・事後報告）。

     ## **【必須】`display: none` / `visibility: hidden` にしないこと** ——
     ## **どちらも読み上げからも消える**（隠す意味が変わる）。
     **この書き方は「画面からは見えないが読み上げと検索には在る」ための定型である。** */
.top-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- ヒーロースライダー -------------------------------------
   【必須】面は CSS で作る。JS が足すのは「自動送り」と「ドット」だけである
   （JS が落ちても1枚目が見え、指で送れる）。
   `.wrap` の左右 padding を打ち消して現行と同じ全幅にする。 */
.hero { position: relative; margin: 0 calc(var(--s4) * -1) var(--s5); }
.hero-track {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.hero-slide img { display: block; width: 100%; height: auto; }

/* ドットは JS が作る（HTML に書くと JS が落ちた日に「押せない点」が残る） */
.hero-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: var(--s1) 0 0;
    padding: 0;
}
/* 【必須】点そのものは 8px だが、タップ領域は 24px 確保する（見た目と的を分ける） */
.hero-dots .dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: var(--r3);
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.hero-dots .dot::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: var(--r3);
    background: var(--line-2);
}
.hero-dots .dot.current::before { background: var(--accent); }

/* --- 「カラコンを探す」 --------------------------------------
   現行サイトの `search_blc_2024`（薄いグレーの面に小見出し＋枠線のボタン）。 */
.finder {
    border: 1px solid var(--line);
    border-radius: var(--r2);
    background: var(--band-2);
    padding: var(--s4);
}
/* ## **【2026-09-28】`.finder > h2` の余白は §7 の `.top-block > h2` が持つ** ——
   ## **ここに書いても効かない**（同じ specificity で【前】に在るため）。**規則を戻さないこと。** */

/* 「探す」は2列のグリッドである（04 §3-1-2）。
   ボタンが1つだけのグループ（`.is-half`）が横に並び、
   現行サイトの「Last Chance！/ 瞳にやさしい素材」「プチMooN / Pure MooN」を再現する。
   【必須】`gap` で間隔を作ること —— `margin-top` だと2列に並んだとき片方だけずれる。 */
.finder-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s4) var(--s3);
    align-items: start;
}
.finder-group { grid-column: span 2; min-width: 0; }
.finder-group.is-half { grid-column: span 1; }
/* §17 の `.sub-ttl`（現行 `p.sub_ttl`）と同じ役割・同じ色にそろえる */
.finder-label {
    margin: 0 0 var(--s2);
    color: var(--accent);
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.6;
}
/* 【必須】1項目のときは全幅、3項目のときは3等分になること（現行の `oneBtn` / 3列と同じ）。
   `flex: 1 1 30%` は 1個なら伸びて全幅、3個なら3列に落ち着く。 */
.finder-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    list-style: none;
    margin: 0;
    padding: 0;
}
.finder-links > li { display: flex; flex: 1 1 30%; min-width: 0; }
.finder-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: var(--tap);
    padding: var(--s1) var(--s2);
    border: 1px solid var(--line-2);
    border-radius: var(--r1);
    background: #fff;
    color: var(--ink);
    font-size: .8125rem;
    line-height: 1.4;
    text-align: center;
}
.finder-links a:hover, .finder-links a:focus-visible { text-decoration: none; background: var(--band); }
/* 面の中では丸アイコンの下地を白に見せない（`.color-filter` は §7 / §13 が持つ） */
.finder .color-filter { margin-bottom: 0; }

/* --- バナー（`promotions.placement='banner_top'`） ------------ */
.top-banners {
    list-style: none;
    margin: var(--s5) calc(var(--s4) * -1);
    padding: 0;
    display: grid;
    gap: var(--s2);
}
.top-banners img { display: block; width: 100%; height: auto; }

/* --- 棚（`top_sections`） ------------------------------------ */
/* ## **【2026-09-28】`.top-shelf > h2` の余白は §7 の `.top-block:not(.finder) > h2` が持つ** ——
   ## **ここに書いても効かない**〔specificity (0,1,1) 対 (0,2,1)〕。**規則を戻さないこと。** */
/* 【必須】ここに金額を書かせないこと（保存時に拒否する）——
   カードは税込を出すため、税抜のキャッチコピーを写すと同じ画面に食い違う数字が並ぶ */
.shelf-catch {
    margin: 0 0 var(--s3);
    color: var(--sub);
    font-size: .8125rem;
    line-height: 1.7;
}
/* `columns=1`（現行の New Item のような全幅の1枚） */
.series-cards.is-1col,
.outlet-cards.is-1col,
.ranking-cards.is-1col { grid-template-columns: 1fr; }

/* --- フッタ固定メニュー --------------------------------------
   【必須】既定は不可視である。JS が `is-on` を付けたときだけ出す ——
   スクロール量で出す帯であり、JS が落ちると「最初から画面を塞ぐ帯」になる。
   【必須】`.sticky-cta`（カート投入・注文）が在る画面では JS が DOM ごと外す。 */
.footer-fix {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 24;
    display: flex;
    justify-content: center;
    /* ## 【必須】2ボタンは【隙間なく】横に並べること（現行サイトと同じ）——
       ## **帯そのものに余白を入れると、2つのボタンが浮いて別々の要素に見える。** */
    padding: 0 0 env(safe-area-inset-bottom);
    background: rgba(0, 0, 0, .86);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
.footer-fix.is-on { opacity: 1; visibility: visible; pointer-events: auto; }

/* Shareボタン（04 §2-5。現行サイトの `.share_blc` を再現した）。
   【必須】3つを等幅で並べること —— 現行サイトも3等分である。 */
.share-blc { margin: var(--s5) 0; }
.share-ttl {
    margin: 0 0 var(--s2);
    color: var(--sub);
    font-size: .8125rem;
}
.share-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s2);
    list-style: none;
    margin: 0;
    padding: 0;
}
.share-links > li { display: flex; min-width: 0; }
.share-btn {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s1);
    min-width: 0;
    min-height: var(--tap);
    padding: var(--s2) var(--s1);
    border: 1px solid var(--line);
    border-radius: var(--r1);
    background: var(--band);
    color: var(--ink);
    font-family: inherit;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
}
.share-btn:hover, .share-btn:focus-visible { background: var(--band-2); text-decoration: none; }
.share-btn .ic { display: flex; align-items: center; justify-content: center; height: 24px; }
.share-btn .ic img { width: auto; height: 22px; }
/* 現行サイトと同じく、LINE と X はブランド色の枠にする */
.share-btn.line { border-color: #06c755; }
.share-btn.x { border-color: #000; }

/* 「TOPへ戻る」（現行サイトの `#topBtn`）。
   【必須】既定は不可視である —— JS が落ちると「最初から画面の隅を塞ぐ丸」になる。
   【必須】フッタ固定メニューの上へ逃がすこと。逃がす量はここ1箇所が持つ。 */
.back-to-top {
    position: fixed;
    right: var(--s3);
    bottom: calc(var(--s3) + env(safe-area-inset-bottom));
    z-index: 25;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 50%;
    /* ## 【必須】`--brand` という変数は【存在しない】（実測）——
       ## 無い変数を書くと `background` が透明になり、丸が見えないまま「出ている」ことになる。
       アクセント色は `--accent`（現行サイトの #db0c66）である。 */
    background: var(--accent);
    color: var(--on-dark);
    font-family: inherit;
    font-size: .625rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease, bottom .2s ease;
}
.back-to-top .label { font-size: .5625rem; }
.back-to-top.is-on { opacity: .92; visibility: visible; pointer-events: auto; }
.back-to-top:hover, .back-to-top:focus-visible { opacity: 1; }
/* 帯が出ている画面では、その上へ逃がす（帯の高さは実測 64px） */
body.has-fix-bar .back-to-top.is-on { bottom: calc(64px + var(--s2) + env(safe-area-inset-bottom)); }
.footer-fix-link {
    display: flex;
    flex: 1 1 50%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    min-height: var(--tap);
    padding: var(--s2) var(--s2);
    color: #fff;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}
.footer-fix-link .lead { font-size: .6875rem; font-weight: 400; }
/* ## 色は現行サイトの実測値である（赤＝クーポン / 緑＝LINE）——
   ## **緑は LINE のブランド色（#06c755）であり、勝手に変えないこと。** */
.footer-fix-link.coupon { background: #c8102e; }
.footer-fix-link.coupon:hover, .footer-fix-link.coupon:focus-visible { background: #a80d26; text-decoration: none; }
.footer-fix-link.line { background: #06c755; }
.footer-fix-link.line:hover, .footer-fix-link.line:focus-visible { background: #05b34c; text-decoration: none; }
/* 帯が出ている画面では、フッタの末尾が帯に隠れないよう下に逃がす */
body.has-fix-bar footer.site .footer-inner { padding-bottom: calc(var(--s8) + 64px); }

/* ===== LS-01 color-search block (start) ===== */
/* =====================================================================
   ## LS-01 カラーサーチ `/lens?color={色系統}`（04 §3-2-1。2026-08-25 指示・近藤氏）
   ## —— 現行サイト `user_data/color_*.php` の「色の見出し → タイプ → レンズ画像」の再現。
   ## 【必須】既存の `.series-card` / `.color-card` の定義を書き換えないこと（足すだけ）。
   ===================================================================== */
.color-search-nav {
    margin: var(--s2) 0 var(--s3);
    padding: var(--s2) var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--r2);
    background: var(--band);
}
.color-search-nav ul { list-style: none; margin: 0 0 var(--s1); padding: 0; display: grid; gap: var(--s1); }
.color-search-nav ul:last-child { margin-bottom: 0; }
/* ## 色の見出しは1行ずつ・タイプは3つ並び（現行の `lnk_blc` と同じ形） */
.color-search-nav .nav-colors { grid-template-columns: 1fr; }
.color-search-nav .nav-types { grid-template-columns: repeat(3, 1fr); }
.color-search-nav a {
    display: block;
    padding: var(--s2) var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--r1);
    background: #fff;
    color: var(--ink);
    font-size: .8125rem;
    line-height: 1.3;
    text-align: center;
}
.color-search-nav a:hover, .color-search-nav a:focus-visible { text-decoration: none; box-shadow: var(--shadow); }
/* ## タイプは3つ並びで幅が狭い —— 「ハーフタイプ」が1行に収まる大きさにする */
.color-search-nav .nav-types a { padding: var(--s2) var(--s1); font-size: .75rem; }

.color-search-section { margin: var(--s6) 0; }
.color-search-heading {
    margin: var(--s5) 0 var(--s2);
    padding-bottom: var(--s2);
    border-bottom: 2px solid var(--line);
    font-size: 1rem;
}
.color-search-subheading {
    margin: var(--s4) 0 var(--s2);
    font-size: .875rem;
    color: var(--sub);
}

/* ## カード —— 現行の `.lensdetail`（レンズ単体＋装着画像の2枚）。
   ## **2列のグリッドは既存の一覧と揃える**（`.series-cards` と同じ見え方にする） */
.lens-cards {
    list-style: none;
    margin: var(--s3) 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
}
.lens-card {
    display: block;
    height: 100%;
    border: 1px solid var(--line);
    border-radius: 0; /* 管理番号35: 写真の角を切らない */
    overflow: hidden;
    background: #fff;
    color: var(--ink);
}
.lens-card:hover, .lens-card:focus-visible { text-decoration: none; box-shadow: var(--shadow); }

/* ## 【必須】2枚を横に並べる —— **現行サイトの見え方そのものである**（左＝レンズ単体・右＝装着）。
   ## 1枚しか無い商品では、残った1枚が伸びて全幅になる（`flex-grow` に任せる）。

   ## ==================================================================
   ## 【必須・2026-09-11 指示・近藤氏】装着画像を正方形に切り抜かないこと
   ## ==================================================================
   ##   ## **装着画像は【210×120（7:4）】である**（実測: 114件すべて同じ寸法）——
   ##   ## **正方形に `cover` すると【横の43%が落ち、目の両端が切れる】。**
   ##   ## **原文「着画画像の目の両サイドが切れすぎてしまっている。
   ##   ## 正方形ではなくて横長の長方形で目が切れていないようにしてください。」**
   ##
   ##   ## **【必須】列幅は `4 : 7` にすること** —— **この比のときだけ2枚の【高さが揃う】**
   ##   ##   〔レンズ単体は 1:1、装着は 7:4。幅を 4:7 にすると
   ##   ##    高さは 4/11・(7/11)×(4/7)=4/11 で一致する〕。
   ##   ## **揃わないと `.thumb` の下罫線が段違いになり、カードが壊れて見える。**
   ##
   ##   ## **【必須】装着画像は `contain` にすること。`cover` に戻さないこと** ——
   ##   ## **`cover` は「箱に合わせて切る」であり、寸法の違う画像が1枚でも入った日に
   ##   ## また目が切れる。しかも画面は落ちない。**
   ##   ## **レンズ単体は `cover` のままでよい**〔円が中央にある正方形であり、切っても欠けない〕。
   ##
   ##   ## **【必須】`aspect-ratio` と `<img>` の `width`/`height` を食い違わせないこと** ——
   ##   ## **属性は CSS が効く前の場所取りに使われる。** */
.lens-card-images { display: flex; align-items: stretch; }
.lens-card .thumb {
    display: block;
    min-width: 0;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--band);
    border-bottom: 1px solid var(--line);
}
.lens-card .thumb-lens, .lens-card .thumb-empty { flex: 4 1 0; }
.lens-card .thumb-model-eye {
    flex: 7 1 0;
    aspect-ratio: 7 / 4;
    object-fit: contain;
    border-left: 1px solid var(--line);
}
.lens-card-body { display: block; padding: var(--s2) var(--s3) var(--s3); }
.lens-card-body > * { display: block; }
.lens-card .meta { margin: var(--s1) 0 0; font-size: .75rem; color: var(--sub); }
.lens-card .meta > * { display: inline-block; }
.lens-card .meta .lens-type {
    margin-left: var(--s2);
    padding: 1px var(--s2);
    border: 1px solid var(--line);
    border-radius: var(--r1);
}
.lens-card .spec-line { margin: var(--s1) 0 0; font-size: .6875rem; color: var(--sub-2); line-height: 1.5; }
.lens-card .spec-line > * { display: inline-block; margin-right: var(--s2); }
.lens-card .price { margin: var(--s1) 0 0; font-size: .8125rem; font-weight: 700; color: var(--ink-strong); }

/* ==========================================================================
   共通事項（SY-08）に添える画像 —— 2026-08-25 確定C・近藤氏
   ## 【必須】画像は本文の外側に出す（`HtmlWhitelist` に `img` を足さない）。
   ## どの節に何が付くかは `App\Support\CommonSectionImage` の manifest が持つ。
   ## 【必須】原寸で置かないこと —— 現行サイトのカードブランド画像は 640px あり、
   ## SP 幅（375px）でページ全体が横スクロールする。
   ========================================================================== */
.common-section-images {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin: var(--s3) 0 0;
}
.common-section-images img {
    max-width: 100%;
    height: auto;
}

/* マイページのログアウト（2026-08-27 新設）
   ## **【必須】PC でも出す。`/logout` は `/mypage/` 配下ではなく、PC からも通る**（実測）。 */
.mypage-logout{margin:32px 0 8px}

/* ==========================================================================
   IN-13 LINE公式アカウント お友達紹介キャンペーン（2026-09-03 指示・近藤氏）
   ==========================================================================
   ## **現行サイト（旧 `user_data/packages/sphone/css/sass/line_friend.css`）の再現である。**
   ## **【必須】値（緑 #63bf4c / 赤 #DB0C66 / 点線 2px #ccc / 左30%・右70%）は
   ## 現行サイトの実値である。整えたくなったら、まず現行サイトを見ること。**
   ## **【必須】`--cta`（#ff7d7d）を使わないこと** —— **CTA は「カートに入れる」に限る**（04 §2-1）。 */
.lf-steps { margin: var(--s5) 0; }

.lf-step {
    padding: 20px 0;
    /* ## **区切りは【点線】である**（現行サイト） */
    border-bottom: dotted 2px var(--line-2);
}
.lf-step:first-child { padding-top: 0; }

/* ## **【必須】見出しは緑・中央である**（現行サイトの `.in_clm h3`）——
   ## **素の `h3` は帯（`--band`）を敷くので、ここで【必ず外すこと】** ——
   ## **敷いたままだと現行サイトの見た目にならない**（2026-09-03 にブラウザで実測）。 */
.lf-step h3 {
    margin: 0 0 10px;
    padding: 0;
    background: none;
    border-radius: 0;
    color: #63bf4c;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

/* ## **イラストが左30%・本文が右70%** —— **縦積みにしないこと**（現行サイトは並ぶ） */
.lf-row { display: flex; flex-wrap: wrap; align-items: center; }
.lf-ico { width: 30%; margin: 0; }
.lf-ico img { display: block; width: 100%; height: auto; }
.lf-txt { width: 70%; padding-left: 15px; box-sizing: border-box; }
.lf-txt p { margin: 0 0 .6em; line-height: 1.4; }
.lf-txt p:last-child { margin-bottom: 0; }

.lf-cta { text-align: center; margin-top: .8em; }

/* ## **ボタンは現行サイトの形である** —— **角丸8px・最大240px・中央** */
.lf-btn {
    display: inline-block;
    width: 100%;
    max-width: 240px;
    padding: 8px 0;
    box-sizing: border-box;
    border-radius: 8px;
    background: #63bf4c;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}
.lf-btn:hover, .lf-btn:focus-visible { background: #55a840; color: #fff; text-decoration: none; }
.lf-btn:active { transform: translateY(1px); }

/* ## **小見出し（＼ … ／）** —— **現行サイトは回した `|` で作っている** */
.lf-btn span {
    display: block;
    font-size: .75rem;
    font-weight: 500;
    color: #fff;
}
.lf-btn span::before,
.lf-btn span::after {
    content: "|";
    display: inline-block;
    color: #fff;
}
.lf-btn span::before { margin-right: 5px; transform: rotate(-25deg); }
.lf-btn span::after { margin-left: 5px; transform: rotate(25deg); }

/* ## **クーポンの導線だけ赤である**（現行サイトの `.bnr_line.coupon`） */
.lf-btn.coupon { background: #db0c66; }
.lf-btn.coupon:hover, .lf-btn.coupon:focus-visible { background: #b80a56; color: #fff; }

/* ==========================================================================
   LS-08 特集の一覧 `/features`（2026-09-03 指示・近藤氏）
   ==========================================================================
   ## **現行サイト（旧 `user_data/lp_select.php` の `<table>`）の再現である。**
   ## **【必須】2列に並べること** —— **1列の縦並びに戻さないこと。**
   ## **【必須】「詳しく見る」の色 #c17272 は現行サイトの実値である** ——
   ## **`--cta`（#ff7d7d）を使わないこと。CTA は「カートに入れる」に限る**（04 §2-1）。 */
.feature-eyebrow {
    margin: 0;
    text-align: center;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--sub);
}
.feature-title {
    margin: var(--s1) 0 var(--s5);
    text-align: center;
    font-size: 1.375rem;
    line-height: 1.5;
    letter-spacing: .06em;
}

.feature-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s4) var(--s2);
    align-items: start;
    margin: 0 0 var(--s5);
    padding: 0;
    list-style: none;
}
.feature-card { min-width: 0; }

/* ## **吹き出し**（旧 `lp_select_lead01.png` / `lead02.png`）—— **カードの上に置く** */
.feature-bubble { display: block; width: 100%; height: auto; margin-bottom: var(--s1); }

.feature-visual { display: block; }
.feature-visual:hover { text-decoration: none; opacity: .88; }
.feature-visual .thumb {
    display: block;
    width: 100%;
    height: auto;
    /* ## **【必須】`aspect-ratio: 1/1` を当てないこと** ——
       ## **現行サイトの画像は縦長であり、正方形に切ると顔とラベルが切れる。** */
    background: var(--band);
}
.feature-visual .thumb-empty {
    flex-direction: column;
    gap: var(--s1);
    aspect-ratio: 3 / 4;
    padding: var(--s3);
    text-align: center;
}
/* ## **【必須】`display: block` を落とさないこと** ——
   ## **`.thumb-empty` は `letter-spacing` を持つ flex であり、
   ## span のままだと見出しと惹句が【1行に流れて】混ざる**（2026-09-04 にブラウザで実測）。 */
.feature-visual .feature-name {
    display: block;
    width: 100%;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--ink-strong);
    letter-spacing: normal;
}
.feature-visual .feature-catch {
    display: block;
    width: 100%;
    font-size: .75rem;
    color: var(--sub);
    letter-spacing: normal;
}

.feature-lead {
    margin: var(--s2) 0 var(--s3);
    font-size: .8125rem;
    line-height: 1.7;
}

.feature-more { margin: 0; text-align: center; }
.feature-btn {
    display: block;
    width: 100%;
    padding: .5rem 0;
    border-radius: var(--r1);
    background: #c17272;
    color: #fff;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
}
.feature-btn:hover, .feature-btn:focus-visible { background: #a95f5f; color: #fff; text-decoration: none; }
.feature-btn:active { transform: translateY(1px); }

/* ==================================================================
   CT-02 ご登録のお届け先（2026-09-10 指示・近藤氏。04 §4-2-1-1）
   ## 【必須】住所帳（MP-15）用の `.addr-notice` / `.addr-list` / `.addr-card` /
   ##   `.addr-card-body` / `.addr-label` / `.addr-kana` / `.addr-actions` /
   ##   `.addr-pick` / `.addr-or` / `.addr-save` は【画面ごと消した】ので落とした。
   ##   ## 足し直さないこと（`AddressBookRemovedTest` が画面の復活を落とす）。
   ## 【必須】`.card` と混ぜないこと —— ご登録の内容を「確かめて進む」ための区画である。
   ================================================================== */
[data-registered-address] { background: var(--bg-soft, #fafafa); }
.addr-line { color: var(--ink); margin: 0 0 var(--s1); font-size: .875rem; line-height: 1.6; }
.addr-edit { margin: var(--s3) 0 var(--s1); }
.addr-edit .btn { min-height: var(--tap); padding: 0 var(--s3); font-size: .875rem; }

/* ==================================================================
   LS-07 お知らせ（NEWS & TOPICS）と重要なお知らせ（2026-09-09。04 §3-7 / §3-7-1）

   ## 【必須】重要なお知らせの赤は `--danger` である。ブランド色（`--accent` / `--cta`）を使わないこと ——
   ##   **ブランド色は買い物の導線に使っており、混ぜると「押すもの」に見える。**
   ##   **`--danger` は状態の意味色であり、既に「危険・停止」に割り当ててある**（`:root` の注記）。
   ## 【必須】`font-size` を小さくして解決しないこと ——
   ##   **原文「赤字などを用いて誰もが目立つように」であり、目立たなくすると指示に反する。**
   ================================================================== */
.important-notice {
    margin: var(--s4) 0;
    padding: var(--s3) var(--s4);
    background: var(--danger-bg);
    border: 1px solid var(--danger);
    border-radius: var(--r1);
}
.important-notice-heading {
    margin: 0 0 var(--s2);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--danger);
}
.important-notice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.important-notice-list a {
    display: block;
    color: var(--danger);
    font-size: .875rem;
    line-height: 1.6;
    text-decoration: underline;
}
.important-notice-list time { display: block; font-size: .75rem; opacity: .85; }

/* --- お知らせ（一覧・TOP・詳細） --- */
.news-eyebrow { margin: 0; font-size: .75rem; letter-spacing: .12em; color: var(--sub); }
.news-title { margin: var(--s1) 0 var(--s4); }
.news-list { list-style: none; margin: var(--s3) 0; padding: 0; }
.news-list-item { border-bottom: 1px solid var(--line); }
.news-list-item a {
    display: block;
    padding: var(--s3) 0;
    color: var(--ink);
    text-decoration: none;
}
.news-date { display: block; font-size: .75rem; color: var(--sub); }
.news-list-title { display: block; margin-top: var(--s1); font-size: .875rem; line-height: 1.6; }
/* ## 一覧では帯の赤が無いため、重要なお知らせに印を付ける（`front/news/index.blade.php` の注記） */
.news-badge-important {
    display: inline-block;
    margin-top: var(--s1);
    padding: 0 var(--s2);
    border-radius: var(--r3);
    background: var(--danger);
    color: var(--on-dark);
    font-size: .6875rem;
    line-height: 1.6;
}
.news-article { margin: var(--s4) 0; }
.news-article-meta { margin: 0; display: flex; align-items: center; gap: var(--s2); font-size: .75rem; color: var(--sub); }
.news-article-title { margin: var(--s2) 0 var(--s4); font-size: 1.0625rem; line-height: 1.6; }
.news-body { font-size: .9375rem; line-height: 1.8; }
.news-ended {
    margin: 0 0 var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--band);
    color: var(--sub);
    font-size: .8125rem;
    border-radius: var(--r1);
}
.news-link { margin: var(--s4) 0 0; }
.news-back { margin: var(--s6) 0 0; }
/* ## TOP の「NEWS & TOPICS」の見出し（英字を主、日本語を従に置く＝現行サイトの並び） */
.top-block-sub { margin-left: var(--s2); font-size: .75rem; color: var(--sub); font-weight: 400; }

/* ## ~~IN-12-D クーポン詳細の「対象のカラー」~~ —— ## **2026-09-12 に IN-12-D を畳んだため参照0件になった**
   ## （確定・近藤氏＝判断カード1「LPに一本化」）。**規則ごと消した。** */

/* ==================================================================
   ## LP（ランディングページ）`/lp/{slug}`（2026-09-12 指示・近藤氏。04 §9-7）
   ==================================================================
   ## **運用がブロックを積み上げて組むページである** ——
   ## **どの順序でどのブロックが来ても崩れない形にすること。**
   ## **【必須】ブロックの余白をブロックの種別ごとに変えないこと** ——
   ## **並べ替えるたびに詰まったり空いたりする。 */
.lp-body > * { margin: 0 0 var(--s5); }
.lp-body > *:last-child { margin-bottom: 0; }

/* ## 見出し —— **題（`h1`）より小さく、本文より大きい。`page-title` は使わない** */
.lp-heading {
    margin-top: var(--s6);
    font-size: 1.125rem;
    font-weight: 700;
    border-left: 4px solid var(--cta);
    padding-left: var(--s2);
    line-height: 1.5;
}
.lp-body > .lp-heading:first-child { margin-top: 0; }

.lp-text p { margin: 0 0 var(--s3); }
.lp-text p:last-child { margin-bottom: 0; }
.lp-text ul, .lp-text ol { margin: 0 0 var(--s3); padding-left: 1.4em; }

.lp-list { margin: 0 0 var(--s5); padding-left: 1.4em; }
.lp-list li { margin-bottom: var(--s1); }

/* ## 画像 —— **幅いっぱい。`figure` の既定の余白を消す** */
.lp-figure { margin: 0 0 var(--s5); }
.lp-figure img { display: block; width: 100%; height: auto; }
.lp-figure figcaption {
    margin-top: var(--s1);
    font-size: .8125rem;
    color: var(--sub);
}

/* ## ギャラリー（**2026-09-24 指示・近藤氏**。02 §15-5-4）——
   ## **原文「LPの商品一覧を2列にしたい」**
   ## **【必須】2列はここが決める** —— **Blade で枠の数を数えて行に割らないこと**
   ## （枚数が奇数のときに最後の1枚だけ幅が変わる）。 */
.lp-gallery {
    list-style: none;
    margin: 0 0 var(--s5);
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
}
.lp-gallery > li { min-width: 0; }
.lp-gallery img { display: block; width: 100%; height: auto; }
.lp-gallery-caption {
    display: block;
    margin-top: var(--s1);
    font-size: .8125rem;
    color: var(--sub);
}

/* ## **【必須】管理画面の見た目をここに書かないこと**（2026-09-24 に踏んだ）——
   ## **`admin.layouts.app` で描く画面は `front.css` を読まない**（`AdminClassDefinedTest`）。
   ## **ギャラリーの入力欄の見た目は `admin/lp_pages/edit.blade.php` の `<style>` に在る。** */

.lp-actions { margin: var(--s5) 0; }