/* ============================================================
     金蛇水神社 崇敬会DX — LIFFモック
     コンセプト（v3 トンマナ改修）: 白ベース × 黒文字 × 朱赤アクセント／ゴシック統一
     ※旧「金蛇」墨黒×金×明朝版は versions/2026-07-13_v2-金蛇ダーク版 に凍結。
       トークン名は互換維持のため据え置き、値のみ光テーマへ再定義。
       --sumi=黒インク(文字), --washi=白カード, --kin*=中立/朱赤, --shu=朱赤#b12634。
     ============================================================ */
  :root{
    --bg-img:url("../images/bg-gradient.6ce3f081a4f7.jpg");
    --sumi:        #1a1714;   /* 黒インク（本文・見出しの文字色） */
    --sumi-2:      #f4f3f1;   /* 明パネル（旧・暗面2の置換） */
    --sumi-3:      #ecebe9;
    --kinari:      #ffffff;   /* 端末内スクリーン・面の白 */
    --kinari-2:    #eeecea;   /* 明グレー（トラック・タブ地・OFF地） */
    --washi:       #ffffff;   /* カード地（白＋ヘアライン枠） */
    --kin:         #d3d5d8;   /* 中立ライン／矢印（旧・金の構造用途） */
    --kin-bright:  #b12634;   /* 明アクセント→朱赤 */
    --kin-deep:    #b12634;   /* 見出し添え・価格・日付の朱赤アクセント */
    --kin-grad:    linear-gradient(135deg,#c8384a 0%,#b12634 100%); /* 主要CTA・ONの朱赤 */
    --shu:         #b12634;   /* 朱赤（Figma準拠） */
    --shu-bright:  #c8384a;
    --ok:          #3f8f4f;   /* 有効・成功の緑 */
    --danger:      #b45309;   /* 警告・エラー表示（赤・朱は避けた落ち着いた警告色） */
    --muted:       #6b7280;   /* 副次テキストの中立グレー */
    --line:        rgba(0,0,0,.12);
    --line-soft:   rgba(0,0,0,.09);
    /* --- v6 Figma刷新トークン（kanahebisui_LINE 最新版 2026-08） --- */
    --rk-ippan:    #72b65c;   /* 一般会員（旧・応援）＝緑 */
    --rk-sushin:   #204c97;   /* 崇敬会員＝紺 */
    --rk-regular:  #b12634;   /* 正会員＝朱赤 */
    --rk-special:  #6a549a;   /* 特別会員＝紫 */
    --rk-corp:     #303030;   /* 法人会員＝墨黒 */
    --rank:        var(--rk-regular); /* 現在ランク色（rk-クラスで切替） */
    --ui-green:    #8dc391;   /* 選択・トグル・案内ピルの緑 */
    --teal:        #88c1ce;   /* S4特典のアクションボタン淡青 */
    --teal-bg:     #f0f7f8;   /* S4特典のセクション淡青磁地 */
    --btn-gray:    #6b7280;   /* 汎用CTA（会員特典・確認ボタン）のグレー */
    --bg-gray:     #f5f5f5;   /* 情報ボックス・画面地のグレー */
    --ink:         #141414;   /* Figma黒 */
    --mincho: "Zen Kaku Gothic New", sans-serif;  /* 明朝廃止→ゴシック統一 */
    --gothic: "Zen Kaku Gothic New", sans-serif;
    --r: 14px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
  html{ scroll-behavior:smooth; }
  body{
    font-family:var(--gothic);
    background:#ececeb;   /* 外側ギャラリー地：白い端末が映える明グレー */
    color:var(--sumi);
    min-height:100vh;
    padding:48px 24px 96px;
  }
  /* リンク既定：下線なし（ボタン系リンクを含む）。本文中のテキストリンクのみ下線 */
  a{ text-decoration:none; color:inherit; }
  .text-link{ text-decoration:underline; text-decoration-color:currentColor;
    text-underline-offset:3px; color:var(--shu); }

  /* ---------- ランク切替バー ---------- */
  .rankbar{ position:sticky; top:0; z-index:50; margin:-48px -24px 32px; padding:14px 24px;
    background:rgba(16,13,8,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
  .rankbar .rb-label{ font-family:var(--mincho); font-weight:700; font-size:13px; color:var(--kin-bright); letter-spacing:.06em; }
  .rankbar .rb-btns{ display:flex; gap:8px; flex-wrap:wrap; }
  .rankbar button{ font-family:var(--gothic); font-weight:700; font-size:13px; color:#b6ac95; letter-spacing:.04em;
    background:transparent; border:1px solid var(--line); border-radius:999px; padding:7px 15px; cursor:pointer; transition:.15s; }
  .rankbar button:hover{ color:var(--kin-bright); border-color:var(--kin); }
  .rankbar button.on{ background:var(--kin-grad); color:#2a200c; border-color:var(--kin); }
  .rankbar .rb-hint{ font-size:11.5px; color:#7e745f; margin-left:auto; }

  /* 会員証 ランク別意匠（Velvet Rope） */
  .memcard.rk-none{ border-color:rgba(140,130,112,.5); filter:saturate(.6) brightness(.85); }
  .memcard.rk-support{ border-color:#8c8270; }
  .memcard.rk-sushin{ border-color:var(--kin-deep); }
  .memcard.rk-regular{ border-color:var(--kin); }
  .memcard.rk-special{ border-color:var(--kin-bright); box-shadow:0 24px 50px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(224,200,132,.4), 0 0 0 1px rgba(224,200,132,.3); }
  .memcard.rk-nenkito{ border-color:var(--kin); }
  .memcard.rk-corp{ border-color:#c9b896; }

  /* ---------- ギャラリー外装 ---------- */
  .gallery-head{ max-width:1320px; margin:0 auto 44px; }
  .brandline .mark{
    font-family:var(--mincho); font-weight:800; font-size:30px; letter-spacing:.14em;
    color:var(--washi);
  }
  .brandline .mark b{ color:var(--kin-bright); font-weight:800; }
  .gallery-head .sub{
    margin-top:14px; color:#b6ac95; font-size:13.5px; line-height:1.9; max-width:760px;
    letter-spacing:.02em;
  }
  .gallery-head .sub b{ color:var(--kin-bright); font-weight:700; }
  .legend{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
  .legend span{
    font-size:11.5px; letter-spacing:.08em; padding:6px 13px; border-radius:999px;
    border:1px solid var(--line); color:#d8c9a3;
    background:rgba(197,164,92,.06);
  }
  .rule{ max-width:1320px; margin:34px auto 40px; height:1px;
    background:linear-gradient(90deg,transparent,var(--kin),transparent); opacity:.5; }

  /* ---------- リッチメニュー作図 ---------- */
  .section-label{ max-width:1320px; margin:0 auto 22px; }
  .section-label .sl-no{ font-family:var(--mincho); font-weight:700; color:var(--kin-bright); font-size:14px; letter-spacing:.1em; }
  .section-label h2{ font-family:var(--mincho); font-weight:800; font-size:24px; color:var(--washi); letter-spacing:.08em; margin-top:6px; }
  .section-label p{ color:#b6ac95; font-size:13px; line-height:1.9; margin-top:8px; max-width:740px; }
  .richmenu-row{ max-width:1320px; margin:0 auto 48px; display:flex; gap:36px; flex-wrap:wrap; }
  .rm{ flex:1; min-width:430px; container-type:inline-size; }
  .rm-cap{ display:flex; align-items:center; gap:11px; margin-bottom:13px; }
  .rm-cap .tab{ font-family:var(--mincho); font-weight:700; font-size:15px; padding:5px 14px; border-radius:8px; letter-spacing:.06em; }
  .rm-cap .tab.a{ background:rgba(197,164,92,.12); color:var(--kin-bright); border:1px solid var(--line); }
  .rm-cap .tab.b{ background:var(--kin-grad); color:#2a200c; }
  .rm-cap small{ color:#9a9079; font-size:12px; }
  /* リッチメニュー：3列×2行（Figma準拠）。右列＝主役。左2列＝白セル */
  .rm-img{ aspect-ratio:2500/1686; border-radius:14px; overflow:hidden; border:1px solid var(--line);
    display:grid; grid-template-columns:1fr 1fr 1.28fr; grid-template-rows:1fr 1fr; gap:1.5px;
    background:rgba(0,0,0,.12); box-shadow:0 24px 50px -30px rgba(0,0,0,.4); font-family:var(--gothic); }
  .rm-cell{ display:flex; align-items:center; justify-content:center; padding:8px; text-align:center;
    background:#fff; color:#141414; font-size:12.5px; font-weight:700; line-height:1.4; cursor:pointer; }
  /* 主役セルは S0b「崇敬会に入会する」ボタン準拠：白地＋join-iconエンブレム＋黒太字 */
  .rm-hero{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    padding:12px 10px; text-align:center; color:#141414; cursor:pointer; overflow:hidden; background:#fff; }
  .rm-hero b{ font-weight:800; font-size:15px; letter-spacing:.02em; line-height:1.3; color:#141414; }
  .rm-hero small{ font-size:10px; font-weight:600; color:var(--muted); line-height:1.45; }
  .rm-emblem{ width:58px; height:40px; object-fit:contain; }
  .rm-hero--tall .rm-emblem{ width:84px; height:58px; }
  .rm-hero--tall{ grid-column:3; grid-row:1 / span 2; }
  .rm-dark{ display:flex; align-items:center; justify-content:center; padding:8px; text-align:center;
    background:#b12634; color:#fff; font-size:12.5px; font-weight:700; line-height:1.4; cursor:pointer; }
  .rm-cell:hover,.rm-hero:hover,.rm-dark:hover{ filter:brightness(1.05); }

  /* ---------- 端末グリッド ---------- */
  .grid{
    max-width:1320px; margin:0 auto;
    display:grid; grid-template-columns:repeat(auto-fill, minmax(390px,1fr));
    gap:56px 40px; justify-items:center;
  }
  .device-wrap{ width:390px; }
  .device-cap{ margin:0 4px 14px; }
  .device-cap .id{
    font-family:var(--mincho); font-weight:700; font-size:14px; color:#fff;
    background:#1f1c17; letter-spacing:.08em; padding:2px 9px; border:1px solid #1f1c17; border-radius:6px;
  }
  .device-cap .name{
    font-family:var(--mincho); font-weight:700; font-size:17px; color:var(--washi);
    margin-left:10px; letter-spacing:.06em;
  }
  .device-cap .note{ display:block; margin-top:8px; font-size:11.5px; color:#9a9079; line-height:1.7; letter-spacing:.02em; }

  /* ---------- LIFF 端末枠 390×844 ---------- */
  .device{
    width:390px; height:844px; position:relative; border-radius:30px;
    background:var(--kinari); overflow:hidden;
    box-shadow:0 2px 0 rgba(255,255,255,.04), 0 40px 80px -30px rgba(0,0,0,.85),
               0 0 0 1px rgba(197,164,92,.18);
    isolation:isolate;
  }
  .device.flash{ animation:devflash 1.2s ease; }
  @keyframes devflash{
    0%,100%{ box-shadow:0 2px 0 rgba(255,255,255,.04), 0 40px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(197,164,92,.18); }
    25%,55%{ box-shadow:0 2px 0 rgba(255,255,255,.04), 0 40px 80px -30px rgba(0,0,0,.85), 0 0 0 4px var(--kin-bright); }
  }
  [data-goto]{ cursor:pointer; }
  /* 画面内ヘッダー: ‹ は親画面への実リンク、× は LIFF クライアント内でのみ liff.closeWindow() */
  .line-header{
    height:52px; display:flex; align-items:center; justify-content:space-between;
    padding:0 16px; background:#ffffff; border-bottom:1px solid rgba(0,0,0,.06);
    position:relative; z-index:5;
  }
  .lh-back, .lh-close{ font-size:20px; color:#3a352c; width:30px; text-decoration:none;
    background:none; border:0; padding:0; cursor:pointer; font-family:inherit; text-align:left; }
  .lh-title{ font-family:var(--mincho); font-size:14px; font-weight:600; color:#3a352c; letter-spacing:.08em; }
  .screen{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
    background:var(--kinari); }
  .screen::-webkit-scrollbar{ width:0; }
  .screen.on-dark{ background:var(--sumi); }
  .pad{ padding:20px 20px 40px; }
  .safe-bottom{ height:34px; }

  .washi-tex{
    position:absolute; inset:0; pointer-events:none; opacity:.5; z-index:0;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(154,124,58,.05) 0 1px, transparent 1px),
      radial-gradient(circle at 70% 60%, rgba(40,33,22,.04) 0 1px, transparent 1px);
    background-size:7px 7px, 11px 11px;
  }

  /* ===== 共通 ===== */
  .kicker{ font-family:var(--mincho); font-size:12px; color:var(--kin-deep);
    letter-spacing:.28em; margin-bottom:8px; display:flex; align-items:center; gap:9px; }
  .kicker::before{ content:""; width:22px; height:1px; background:var(--kin); display:inline-block; }
  h2.sec{ font-family:var(--mincho); font-weight:700; font-size:20px; color:var(--sumi);
    letter-spacing:.08em; margin-bottom:14px; position:relative; z-index:1; }

  .card{
    background:var(--washi); border-radius:var(--r); padding:16px;
    border:1px solid var(--line-soft); position:relative; z-index:1;
    box-shadow:0 6px 18px -12px rgba(40,33,22,.4);
  }
  .btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; min-height:52px; border:none; border-radius:11px; cursor:pointer;
    font-family:var(--gothic); font-weight:700; font-size:16px; letter-spacing:.06em;
  }
  .btn-gold{ background:var(--kin-grad); color:#2a200c;
    box-shadow:0 8px 22px -10px rgba(154,124,58,.7), inset 0 1px 0 rgba(255,255,255,.4); }
  .btn-sumi{ background:var(--sumi); color:var(--kin-bright); border:1px solid var(--kin); }
  .btn-ghost{ background:transparent; color:var(--sumi); border:1px solid var(--line-soft); font-weight:500; }
  .btn-disabled{ background:#ddd4c0; color:#a59c86; box-shadow:none; cursor:not-allowed; }
  .btn:active{ transform:translateY(1px); }

  /* 金額表示：ゴシック・立体・読みやすく */
  .price{ font-family:var(--gothic); font-style:normal; font-weight:700; font-size:14.5px;
    color:var(--kin-deep); letter-spacing:.02em; white-space:nowrap; }

  .seal{
    position:absolute; width:62px; height:62px; border:2.5px solid var(--shu);
    border-radius:9px; color:var(--shu); font-family:var(--mincho); font-weight:700;
    display:flex; align-items:center; justify-content:center; text-align:center;
    font-size:13px; line-height:1.15; letter-spacing:.04em; transform:rotate(-7deg);
    opacity:.9; writing-mode:vertical-rl;
  }
  .pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
    padding:4px 10px; border-radius:999px; letter-spacing:.06em; }
  .pill-gold{ background:rgba(197,164,92,.16); color:var(--kin-deep); border:1px solid var(--line); }
  .pill-shu{ background:rgba(154,43,30,.1); color:var(--shu); border:1px solid rgba(154,43,30,.25); }
  .pill-ok{ background:rgba(79,122,82,.12); color:var(--ok); border:1px solid rgba(79,122,82,.3); }
  .pill-mute{ background:rgba(40,33,22,.06); color:var(--muted); border:1px solid var(--line-soft); }

  /* 漢字アイコン（絵文字の代替） */
  .kic{ width:42px; height:42px; border-radius:10px; flex:0 0 42px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mincho); font-weight:700; font-size:21px;
    background:rgba(197,164,92,.13); color:var(--kin-deep); }
  .kic.gold{ background:var(--kin-grad); color:#2a200c; }

  /* ===== S0b 未会員LP ===== */
  .hero0{ position:relative; height:300px;
    background:linear-gradient(160deg, #241c10 0%, #14110c 60%, #100d08 100%);
    color:var(--kinari); padding:30px 22px; overflow:hidden; }
  .hero0 .v{ position:relative; z-index:2; }
  .hero0 .crest{ font-family:var(--mincho); font-size:13px; letter-spacing:.4em; color:var(--kin-bright); }
  .hero0 h1{ font-family:var(--mincho); font-weight:800; font-size:33px; line-height:1.3;
    margin-top:16px; color:#fbf6ea; letter-spacing:.08em; }
  .hero0 h1 b{ color:var(--kin-bright); }
  .hero0 p{ margin-top:14px; font-size:13.5px; line-height:2; color:#e7dcc4; max-width:280px; }

  .menu-list{ display:flex; flex-direction:column; gap:11px; }
  .menu-item{ display:flex; align-items:center; gap:14px; padding:15px 16px;
    background:var(--washi); border-radius:12px; border:1px solid var(--line-soft);
    position:relative; z-index:1; }
  .menu-item .tx b{ display:block; font-family:var(--mincho); font-weight:700; font-size:15.5px; color:var(--sumi); letter-spacing:.04em; }
  .menu-item .tx small{ color:var(--muted); font-size:11.5px; }
  .menu-item .arr{ margin-left:auto; color:var(--kin); font-size:18px; }
  .menu-item.feat{ background:var(--sumi); border-color:var(--kin); }
  .menu-item.feat .tx b{ color:var(--kin-bright); }
  .menu-item.feat .tx small{ color:#b3a787; }

  /* ===== S2 会員証 ===== */
  .screen.on-dark .pad{ color:var(--kinari); }
  .memcard{ position:relative; width:100%; aspect-ratio:1.586/1; border-radius:18px;
    padding:22px; overflow:hidden; color:#f3ead2;
    background:linear-gradient(150deg,#241c10 0%,#100d08 55%,#211a0f 100%);
    border:1.5px solid var(--kin);
    box-shadow:0 24px 50px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(224,200,132,.25);
  }
  .memcard .scale-tex{ position:absolute; inset:0; opacity:.16; pointer-events:none;
    background-image:radial-gradient(circle at 50% 0, var(--kin) 0 2px, transparent 2px);
    background-size:18px 16px; mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);}
  .memcard .rank-jp{ font-family:var(--mincho); font-weight:800; font-size:27px; color:var(--washi);
    letter-spacing:.14em; }
  .memcard .shrine{ position:absolute; top:20px; right:22px; text-align:right;
    font-family:var(--mincho); font-size:11px; letter-spacing:.24em; color:var(--kin); }
  .memcard .holder{ position:absolute; left:22px; bottom:22px; }
  .memcard .holder small{ font-size:10px; color:#b3a787; letter-spacing:.18em; }
  .memcard .holder b{ display:block; font-family:var(--mincho); font-weight:700; font-size:20px; color:var(--washi); letter-spacing:.08em; margin-top:2px; }
  .memcard .holder .no{ font-family:var(--mincho); font-size:13px; color:var(--kin); letter-spacing:.1em; }
  .memcard .qr{ position:absolute; right:20px; bottom:20px; width:78px; height:78px;
    border-radius:10px; background:#f3ead2; padding:7px; }
  .memcard .qr svg{ width:100%; height:100%; }
  .gold-foil{ position:absolute; right:-26px; top:-26px; width:120px; height:120px; border-radius:50%;
    background:radial-gradient(circle,rgba(224,200,132,.5),transparent 65%); filter:blur(2px); }

  .valid-row{ display:flex; gap:10px; margin-top:16px; }
  .valid-box{ flex:1; background:var(--sumi-2); border:1px solid var(--line); border-radius:11px; padding:12px 14px; }
  .valid-box small{ font-size:10.5px; color:#a89c80; letter-spacing:.08em; display:block; }
  .valid-box b{ font-family:var(--mincho); font-size:16px; color:var(--kin-bright); letter-spacing:.04em; }
  .cache-note{ margin-top:14px; font-size:11px; color:#9a9079; line-height:1.6;
    background:rgba(197,164,92,.06); border:1px solid var(--line); border-radius:10px; padding:11px 13px; }

  /* ===== S3 マイページ ===== */
  .mp-card-mini{ position:relative; border-radius:16px; padding:18px 20px; color:#f3ead2;
    background:linear-gradient(135deg,#241c10,#15110a); border:1px solid var(--kin);
    overflow:hidden; box-shadow:0 16px 36px -20px rgba(0,0,0,.8); }
  .mp-card-mini .rank-jp{ font-family:var(--mincho); font-weight:800; font-size:21px; color:var(--washi); letter-spacing:.1em; }
  .mp-card-mini .nm{ font-size:12.5px; color:#c6b89a; margin-top:3px; letter-spacing:.06em; }
  .mp-card-mini .go{ position:absolute; right:16px; bottom:14px; font-size:12px; color:var(--kin-bright); font-weight:700; }
  .mp-card-mini .mini-qr{ position:absolute; right:18px; top:16px; width:42px; height:42px; background:#f3ead2; border-radius:7px; padding:4px;}
  .mp-card-mini .mini-qr svg{ width:100%;height:100%; }

  .progress-wrap .lab{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; }
  .progress-wrap .lab b{ font-family:var(--mincho); font-size:14.5px; color:var(--sumi); letter-spacing:.04em; }
  .progress-wrap .lab span{ font-size:11.5px; color:var(--muted); }
  .bar{ height:11px; border-radius:99px; background:var(--kinari-2); overflow:hidden; border:1px solid var(--line-soft); }
  .bar i{ display:block; height:100%; width:62%; border-radius:99px; background:var(--kin-grad);
    box-shadow:0 0 12px rgba(197,164,92,.5); }
  .progress-wrap .hint{ margin-top:10px; font-size:12px; color:var(--shu); font-weight:700; letter-spacing:.03em; }

  .func-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
  .func{ background:var(--washi); border:1px solid var(--line-soft); border-radius:13px;
    padding:15px 14px; position:relative; }
  .func .fic{ width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center;
    font-family:var(--mincho); font-weight:700; font-size:19px; background:rgba(197,164,92,.13); color:var(--kin-deep); }
  .func b{ display:block; font-family:var(--mincho); font-weight:700; font-size:15px; color:var(--sumi); margin-top:2px; letter-spacing:.04em; }
  .func small{ font-size:10.5px; color:var(--muted); }
  .func .lock{ position:absolute; top:11px; right:12px; font-size:12px; color:#bdb39c; }
  .func.hot{ background:var(--sumi); border-color:var(--kin); }
  .func.hot .fic{ background:var(--kin-grad); color:#2a200c; }
  .func.hot b{ color:var(--kin-bright); }
  .func.hot small{ color:#b3a787; }
  .func.off .fic{ opacity:.45; }
  .func.off b{ color:#a59c86; }

  /* ===== S1 入会フォーム ===== */
  .steps{ display:flex; align-items:center; gap:6px; margin-bottom:20px; }
  .step{ flex:1; text-align:center; }
  .step .dot{ width:28px; height:28px; border-radius:50%; margin:0 auto 7px;
    display:flex; align-items:center; justify-content:center; font-family:var(--mincho); font-size:14px;
    background:var(--kinari-2); color:var(--muted); border:1px solid var(--line-soft); }
  .step.active .dot{ background:var(--kin-grad); color:#fff; border-color:var(--shu); font-weight:700; }
  .step.done .dot{ background:var(--sumi); color:var(--kin-bright); border-color:var(--kin); }
  .step small{ font-size:10.5px; color:var(--muted); letter-spacing:.02em; }
  .step.active small{ color:var(--sumi); font-weight:700; }

  .type-choices{ display:flex; flex-direction:column; gap:11px; }
  .type-opt{ display:flex; align-items:flex-start; gap:13px; padding:15px; border-radius:13px;
    border:1.5px solid var(--line-soft); background:var(--washi); cursor:pointer; position:relative; }
  .type-opt.sel{ border-color:var(--kin); background:rgba(197,164,92,.07); box-shadow:0 0 0 3px rgba(197,164,92,.12); }
  .type-opt .radio{ width:20px; height:20px; border-radius:50%; border:2px solid var(--line); margin-top:2px; flex:0 0 20px; position:relative; }
  .type-opt.sel .radio{ border-color:var(--kin); }
  .type-opt.sel .radio::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--kin-grad); }
  .type-opt .ti b{ font-family:var(--mincho); font-weight:700; font-size:15.5px; color:var(--sumi); letter-spacing:.04em; }
  .type-opt .ti .price{ margin-left:9px; }
  .type-opt .ti p{ font-size:11.5px; color:var(--muted); margin-top:5px; line-height:1.7; }
  /* 文節単位の改行制御: 包んだ範囲の途中では改行させない（収まらない場合は範囲ごと次行へ） */
  .nb{ white-space:nowrap; display:inline-block; }
  .type-opt .flow-tag{ margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; }
  /* 「対象：ご来社が可能な方（仙台・仙南エリア）」等の長文ピルが狭幅端末で
     折り返さないよう、可変サイズ+字間圧縮+改行禁止 */
  .type-opt .flow-tag .pill{ white-space:nowrap; letter-spacing:.03em;
    font-size:clamp(9.5px, 3vw, 11px); }

  .field{ margin-bottom:14px; }
  .field label{ font-size:12px; font-weight:700; color:var(--sumi); letter-spacing:.04em; display:flex; gap:6px; align-items:center; margin-bottom:7px; }
  .field label .req{ color:var(--shu); font-size:10px; }
  .field input, .field select, .field textarea{ width:100%; height:46px; border-radius:10px; border:1px solid var(--line-soft);
    /* 16px 未満だと iOS Safari / LINE 内蔵ブラウザがフォーカス時に自動ズームし画面幅からはみ出るため 16px 固定 */
    background:var(--washi); padding:0 13px; font-family:var(--gothic); font-size:16px; color:var(--sumi); }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--kin); box-shadow:0 0 0 3px rgba(197,164,92,.13); }
  .field select{ appearance:none; -webkit-appearance:none; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%233a352c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }

  /* 入力エラー表示（追加タスク: 送信後にどこがエラーか分かるようにする）。
     .field .error / .field small[style*="--danger"] の直下に出るエラー文言。
     .err-block は .field に収まらないラジオボタン群・単体チェックボックス用の
     汎用ラッパー（form_errors.js 参照）で、同じ .error スタイルを適用する。 */
  .field .error, .err-block .error{ color:var(--danger); font-size:11.5px; margin:5px 0 0; line-height:1.6; }
  .field:has(.error) input, .field:has(.error) select, .field:has(.error) textarea{ border-color:var(--danger); }

  /* フォーム先頭に差し込むエラーサマリー（form_errors.js が動的生成） */
  .form-error-summary{ background:#fdf3e7; border:1px solid var(--danger); border-radius:10px;
    padding:12px 14px; margin-bottom:16px; }
  .form-error-summary-title{ font-size:13px; font-weight:700; color:var(--danger); margin:0 0 6px; }
  .form-error-summary-list{ margin:0; padding-left:18px; }
  .form-error-summary-list li{ font-size:12.5px; line-height:1.8; }
  .form-error-summary-list a{ color:var(--danger); text-decoration:underline; }
  /* Stripe Elements（お支払い画面 /front/payment/<pk>/）: カード番号・有効期限・
     セキュリティコードの3分割マウント枠。Stripe.js が iframe を差し込むため
     .field と同じ外枠の見た目を .card-split .se に持たせる。 */
  .card-split{ margin-bottom:14px; }
  .card-split .cs-label{ font-size:12px; font-weight:700; color:var(--sumi); letter-spacing:.04em;
    display:block; margin-bottom:7px; }
  .card-split .se{ border:1px solid var(--line-soft); border-radius:10px; padding:13px 13px; background:var(--washi); }
  .card-split .se.StripeElement--focus{ border-color:var(--kin); box-shadow:0 0 0 3px rgba(197,164,92,.13); }
  .card-split .se.StripeElement--invalid{ border-color:var(--shu); }
  .card-split .cs-cols{ display:flex; gap:10px; margin-top:12px; }
  .card-split .cs-cols > div{ flex:1; }
  .payment-countdown{ font-size:13px; color:var(--muted); margin:4px 0 16px; }

  /* 生年月日「年/月/日」3分割入力（260908 client指摘: type=dateはスマホで使いにくいため代替）。
     1行に収まるよう年欄を広め・月日欄を狭めにする。フォントサイズ16pxはiOS自動ズーム防止のため
     .field input と同じ値を明示指定する。 */
  .ymd-field{ display:flex; align-items:center; gap:6px; }
  /* min-width:0 必須: flex アイテムの既定 min-width:auto だと input の固有幅（size=20 相当）で縮まず 375px 幅で溢れる */
  .ymd-field input{ width:auto; min-width:0; height:46px; text-align:center; font-size:16px;
    border-radius:10px; border:1px solid var(--line-soft); padding:0 4px; }
  .ymd-field input[name$="_year"]{ flex:0 0 5.2em; width:5.2em; }
  .ymd-field input[name$="_month"],
  .ymd-field input[name$="_day"]{ flex:0 0 3.4em; width:3.4em; }
  .ymd-field .ymd-sep{ flex:0 0 auto; color:var(--muted); font-size:13px; white-space:nowrap; }
  .agree{ display:flex; gap:11px; align-items:flex-start; background:var(--washi); border:1px solid var(--line-soft);
    border-radius:12px; padding:14px; margin:6px 0 18px; cursor:pointer; }
  /* 実チェックボックス化: デフォルト未チェック（空枠）。:checked 時のみ従来の金グラデ+✓を表示する。 */
  .agree input.chk{ appearance:none; -webkit-appearance:none; width:22px; height:22px; border-radius:6px;
    border:2px solid var(--kin); flex:0 0 22px; margin:0; position:relative; cursor:pointer;
    background:var(--washi); }
  .agree input.chk:checked{ background:var(--kin-grad); border-color:transparent; }
  .agree input.chk:checked::after{ content:"✓"; position:absolute; inset:0; display:flex;
    align-items:center; justify-content:center; color:#2a200c; font-size:14px; line-height:1; }
  .agree input.chk:focus-visible{ outline:2px solid var(--kin); outline-offset:2px; }
  .agree p{ font-size:12px; color:var(--sumi); line-height:1.7; }

  /* ===== S5 ご祈祷 ===== */
  .pray-card{ background:var(--washi); border:1px solid var(--line-soft); border-radius:14px;
    padding:16px; margin-bottom:13px; position:relative; }
  .pray-card.locked-visible{ border-color:var(--kin); background:rgba(197,164,92,.06); }
  .pray-card .ph{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
  .pray-card .ph b{ font-family:var(--mincho); font-weight:700; font-size:17px; color:var(--sumi); letter-spacing:.05em; }
  .pray-card p{ font-size:12px; color:var(--muted); line-height:1.8; margin:9px 0 14px; }
  .pray-card .badges{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
  .pray-card.hidden-rank{ opacity:.55; }
  .stores-note{ font-size:11px; color:var(--muted); margin-top:18px; text-align:center; letter-spacing:.02em; }
  .stores-note span{ color:var(--kin-deep); font-weight:700; }

  /* ===== S11 相談 ===== */
  .consult-state{ border-radius:14px; padding:18px; margin-bottom:16px; position:relative; overflow:hidden; }
  .consult-state.available{ background:var(--sumi); border:1px solid var(--kin); color:var(--kinari); }
  .consult-state.used{ background:var(--washi); border:1px solid var(--line-soft); color:var(--sumi); }
  .consult-state .st-lab{ font-family:var(--mincho); font-size:12px; letter-spacing:.16em; }
  .consult-state.available .st-lab{ color:var(--kin-bright); }
  .consult-state.used .st-lab{ color:var(--muted); }
  .consult-state .st-main{ font-family:var(--mincho); font-weight:700; font-size:19px; margin-top:6px; letter-spacing:.06em; }
  .consult-state.available .st-main{ color:var(--washi); }
  .consult-state .st-sub{ font-size:12px; margin-top:8px; line-height:1.8; }
  .consult-state.available .st-sub{ color:#c6b89a; }
  .consult-state.used .st-sub{ color:var(--muted); }
  .guard-list{ margin-top:18px; }
  .guard-list .gtitle{ font-size:11.5px; color:var(--muted); letter-spacing:.08em; margin-bottom:10px; font-weight:700; }
  .guard{ display:flex; gap:10px; align-items:flex-start; font-size:12px; color:var(--sumi); line-height:1.7; margin-bottom:10px; }
  .guard .gn{ width:20px; height:20px; border-radius:50%; flex:0 0 20px; background:rgba(197,164,92,.16);
    color:var(--kin-deep); font-family:var(--mincho); font-size:12px; display:flex; align-items:center; justify-content:center; font-weight:600; }

  .flow-note{ text-align:center; font-size:11px; color:var(--muted); margin-top:8px; }

  /* ===== S4 会員特典 ===== */
  .perk{ display:flex; gap:13px; align-items:flex-start; padding:14px 15px; background:var(--washi);
    border:1px solid var(--line-soft); border-radius:12px; margin-bottom:10px; position:relative; }
  .perk .pk-stat{ flex:0 0 auto; }
  .perk .pk-body b{ font-family:var(--mincho); font-weight:700; font-size:15px; color:var(--sumi); letter-spacing:.04em; }
  .perk .pk-body p{ font-size:11.5px; color:var(--muted); line-height:1.7; margin-top:5px; }
  .perk.locked{ opacity:.6; }
  .perk.crown{ background:var(--sumi); border-color:var(--kin); }
  .perk.crown .pk-body b{ color:var(--kin-bright); }
  .perk.crown .pk-body p{ color:#b3a787; }
  .perk-prog{ margin-top:6px; }
  .perk-prog .bar{ height:8px; }
  .perk-prog .bar i{ width:78%; }

  /* ===== S10 厄年診断 ===== */
  .diag-result{ border-radius:16px; padding:22px; text-align:center; color:#f3ead2; position:relative; overflow:hidden;
    background:linear-gradient(155deg,#241c10,#15110a); border:1px solid var(--kin); margin-bottom:16px; }
  .diag-result .dr-lab{ font-family:var(--mincho); font-size:12px; letter-spacing:.2em; color:var(--kin-bright); }
  .diag-result .dr-main{ font-family:var(--mincho); font-weight:800; font-size:34px; color:var(--washi); letter-spacing:.1em; margin:8px 0 4px; }
  /* 「厄年ではありません」など長文は 375px 幅で折り返さないよう縮小 */
  .diag-result .dr-main--long{ font-size:clamp(16px, 4.6vw, 22px); letter-spacing:.02em; white-space:nowrap; }
  .diag-result .dr-sub{ font-size:12px; color:#c6b89a; line-height:1.8; }
  .diag-result .dr-age{ display:inline-block; margin-top:12px; font-size:12px; color:#2a200c;
    background:var(--kin-grad); padding:5px 14px; border-radius:999px; font-weight:700; }
  .kichinichi{ display:flex; flex-direction:column; gap:9px; margin:6px 0 16px; }
  .kichi{ display:flex; align-items:center; justify-content:space-between; padding:13px 15px;
    background:var(--washi); border:1px solid var(--line-soft); border-radius:11px; }
  .kichi .kd{ font-family:var(--mincho); font-weight:700; font-size:15px; color:var(--sumi); letter-spacing:.04em; }
  .kichi .kd span{ font-size:11.5px; color:var(--muted); margin-left:9px; font-family:var(--gothic); font-weight:400; }
  .kichi .ktag{ font-size:11px; color:var(--shu); font-weight:700; }

  /* 本命星・吉方位/凶方位（追加タスク: 厄年・方位診断の修正 #30・C-10） */
  .honmei-star{ display:flex; align-items:center; justify-content:center; gap:10px;
    margin:0 0 16px; padding:12px; background:var(--washi); border:1px solid var(--line-soft); border-radius:11px; }
  .honmei-star .hs-lab{ font-size:11.5px; color:var(--muted); letter-spacing:.1em; }
  .honmei-star .hs-val{ font-family:var(--mincho); font-weight:700; font-size:16px; color:var(--sumi); letter-spacing:.06em; }
  .hoi-block{ margin-bottom:16px; }
  .hoi-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 16px; }
  .hoi-chip{ display:inline-flex; align-items:center; padding:7px 14px; border-radius:999px;
    font-size:12.5px; font-weight:700; letter-spacing:.04em; }
  .hoi-chip span{ font-size:11px; font-weight:400; margin-left:3px; }
  .hoi-chip--kichi{ background:var(--washi); border:1px solid var(--kin); color:var(--sumi); }
  .hoi-chip--kyo{ background:var(--washi); border:1px solid var(--shu); color:var(--shu); }

  /* ===== S12 各種設定 ===== */
  .set-group{ margin-bottom:20px; }
  .set-group .sg-title{ font-size:11.5px; color:var(--muted); letter-spacing:.1em; font-weight:700; margin:0 4px 9px; }
  .set-list{ background:var(--washi); border:1px solid var(--line-soft); border-radius:13px; overflow:hidden; }
  .set-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 16px;
    border-bottom:1px solid var(--line-soft); }
  .set-row:last-child{ border-bottom:none; }
  .set-row .sr-tx b{ font-family:var(--mincho); font-weight:700; font-size:14.5px; color:var(--sumi); letter-spacing:.03em; }
  .set-row .sr-tx small{ display:block; font-size:11px; color:var(--muted); margin-top:3px; }
  .set-row .sr-arr{ color:var(--kin); font-size:18px; }
  .switch{ width:46px; height:27px; border-radius:999px; background:var(--kin-grad); position:relative; flex:0 0 46px; }
  .switch{ cursor:pointer; }
  .switch.off{ background:var(--kinari-2); border:1px solid var(--line-soft); }
  .switch i{ position:absolute; top:3px; left:22px; width:21px; height:21px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.3); transition:.2s; }
  .switch.off i{ left:3px; background:#cfc6b2; }

  /* 会員証 画面を明るく（背景が明色化するので文字色も濃色へ調整） */
  .screen.on-dark.bright{ background:#f3ead2; }
  .screen.on-dark.bright .memcard{ box-shadow:0 24px 50px -18px rgba(0,0,0,.5), inset 0 1px 0 rgba(224,200,132,.4), 0 0 0 6px rgba(224,200,132,.25); }
  /* 会員証カード内（カードは暗色のまま）は元の淡色を維持。カード外の地の文を濃色化 */
  .screen.on-dark.bright .kicker{ color:var(--kin-deep); }
  .screen.on-dark.bright .valid-box{ background:#fff7ea; border-color:var(--line); }
  .screen.on-dark.bright .valid-box small{ color:var(--muted); }
  .screen.on-dark.bright .valid-box b{ color:var(--sumi); }
  .screen.on-dark.bright .cache-note{ background:#fff7ea; border-color:var(--line); color:#6e6552; }
  .screen.on-dark.bright .btn-sumi{ background:var(--sumi); color:var(--kin-bright); }
  .screen.on-dark.bright .btn-ghost{ color:var(--kin-deep) !important; border-color:var(--line) !important; }
  .danger-zone{ border:1px solid rgba(154,43,30,.3); border-radius:13px; overflow:hidden; }
  .danger-zone .set-row b{ color:var(--shu); }
  .modal-hint{ margin-top:12px; font-size:11px; color:var(--muted); text-align:center; line-height:1.7; }

  /* ===== S13 個人/法人切替 ===== */
  .seg{ display:flex; background:var(--kinari-2); border:1px solid var(--line-soft); border-radius:12px; padding:4px; margin-bottom:18px; }
  .seg button{ flex:1; min-height:42px; border:none; border-radius:9px; background:transparent; cursor:pointer;
    font-family:var(--mincho); font-weight:700; font-size:14.5px; color:var(--muted); letter-spacing:.06em; }
  .seg button.on{ background:var(--sumi); color:var(--kin-bright); box-shadow:0 4px 12px -6px rgba(0,0,0,.5); }
  .acct-card{ border-radius:16px; padding:20px; color:#f3ead2; position:relative; overflow:hidden; margin-bottom:16px;
    background:linear-gradient(135deg,#241c10,#15110a); border:1px solid var(--kin); }
  .acct-card .ac-role{ font-family:var(--mincho); font-size:12px; letter-spacing:.18em; color:var(--kin-bright); }
  .acct-card .ac-name{ font-family:var(--mincho); font-weight:800; font-size:23px; color:var(--washi); letter-spacing:.06em; margin:6px 0 3px; }
  .acct-card .ac-no{ font-size:12px; color:#c6b89a; letter-spacing:.06em; }
  .acct-card .ac-meta{ display:flex; gap:18px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
  .acct-card .ac-meta div small{ font-size:10px; color:#a89c80; letter-spacing:.08em; display:block; }
  .acct-card .ac-meta div b{ font-family:var(--mincho); font-size:14px; color:var(--kin-bright); }
  .acct-note{ font-size:11.5px; color:var(--muted); line-height:1.8; background:rgba(197,164,92,.06);
    border:1px solid var(--line); border-radius:11px; padding:13px 15px; }
  .info-strip{ font-size:11.5px; color:var(--sumi); line-height:1.8; background:var(--washi);
    border:1px solid var(--line-soft); border-radius:11px; padding:13px 15px; margin:16px 0; }

  /* ===== S6 オンライン授与所（EC） ===== */
  .ec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .ec-card{ background:var(--washi); border:1px solid var(--line-soft); border-radius:13px; overflow:hidden; position:relative; }
  .ec-thumb{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
    background:#e9e1cf; position:relative; }
  .ec-noimg{ display:flex; flex-direction:column; align-items:center; gap:7px;
    font-family:var(--gothic); font-size:11px; color:#a89c80; letter-spacing:.14em; }
  .ec-noimg::before{ content:""; width:42px; height:34px; border:1.5px solid #c2b69c; border-radius:4px;
    background:linear-gradient(135deg,transparent 45%,#c2b69c 45%,#c2b69c 55%,transparent 55%); }
  .ec-thumb .mem-badge{ position:absolute; top:9px; left:9px; }
  .ec-info{ padding:11px 12px 13px; }
  .ec-info b{ display:block; font-family:var(--mincho); font-weight:700; font-size:13.5px; color:var(--sumi); letter-spacing:.02em; line-height:1.4; }
  .ec-info .price{ font-size:14px; margin-top:7px; display:block; }
  .ec-info .price s{ color:#bdb39c; font-size:11.5px; margin-left:6px; font-weight:400; }

  /* ===== S7 祭事カレンダー ===== */
  .cal-month{ margin-bottom:18px; }
  .cal-mhead{ display:flex; align-items:baseline; gap:10px; margin-bottom:11px; }
  .cal-mhead b{ font-family:var(--mincho); font-weight:800; font-size:22px; color:var(--sumi); letter-spacing:.06em; }
  .cal-mhead span{ font-size:11px; color:var(--muted); letter-spacing:.1em; }
  .cal-mhead .ln{ flex:1; height:1px; background:var(--line-soft); }
  .cal-event{ display:flex; gap:14px; padding:13px 15px; background:var(--washi);
    border:1px solid var(--line-soft); border-radius:12px; margin-bottom:9px; position:relative; }
  .cal-event .ce-date{ text-align:center; flex:0 0 38px; }
  .cal-event .ce-date b{ font-family:var(--mincho); font-weight:700; font-size:19px; color:var(--kin-deep); display:block; line-height:1; }
  .cal-event .ce-date small{ font-size:10px; color:var(--muted); }
  .cal-event .ce-body b{ font-family:var(--mincho); font-weight:700; font-size:15px; color:var(--sumi); letter-spacing:.03em; }
  .cal-event .ce-body p{ font-size:11.5px; color:var(--muted); margin-top:4px; line-height:1.6; }
  .cal-event.feat{ background:var(--sumi); border-color:var(--kin); }
  .cal-event.feat .ce-date b{ color:var(--kin-bright); }
  .cal-event.feat .ce-body b{ color:var(--kin-bright); }
  .cal-event.feat .ce-body p{ color:#b3a787; }

  /* ===== S8 限定情報アーカイブ ===== */
  .media-card{ background:var(--washi); border:1px solid var(--line-soft); border-radius:13px; overflow:hidden; margin-bottom:13px; }
  .media-thumb{ aspect-ratio:16/9; overflow:hidden; background:linear-gradient(150deg,#241c10,#15110a); position:relative;
    display:flex; align-items:center; justify-content:center; }
  .media-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
  .lc-thumb{ width:74px; height:74px; flex:0 0 74px; border-radius:10px; overflow:hidden; object-fit:cover; object-position:center; display:block; }
  .media-thumb .play{ position:relative; z-index:2; width:54px; height:54px; border-radius:50%; background:rgba(224,200,132,.92);
    display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.35); }
  .media-thumb .play::after{ content:""; border-style:solid; border-width:9px 0 9px 15px;
    border-color:transparent transparent transparent #15110a; margin-left:4px; }
  .media-thumb .dur{ position:absolute; right:10px; bottom:10px; font-size:11px; color:#f3ead2;
    background:rgba(0,0,0,.55); padding:2px 8px; border-radius:6px; font-family:var(--mincho); }
  .media-thumb .ribbon{ position:absolute; left:10px; top:10px; }
  .media-card{ display:block; width:100%; cursor:pointer; transition:border-color .15s;
    -webkit-appearance:none; appearance:none; padding:0; text-align:left; font:inherit; }
  .media-card:hover{ border-color:var(--kin); }
  /* 動画カード＋「説明を読む」フッター（button 内に a を置けないため兄弟要素として結合） */
  .media-block{ margin-bottom:13px; }
  .media-block .media-card{ margin-bottom:0; }
  .media-block.has-detail .media-card{ border-radius:13px 13px 0 0; border-bottom:0; }
  .media-detail-link{ display:flex; align-items:center; justify-content:space-between; padding:11px 15px 12px;
    background:var(--washi); border:1px solid var(--line-soft); border-top:1px dashed var(--line-soft);
    border-radius:0 0 13px 13px; font-size:12.5px; color:var(--shu); text-decoration:none; }
  .media-detail-link .ar{ font-size:16px; line-height:1; }
  .media-detail-link:hover{ background:#f6f1e6; }
  .media-card-detail{ margin-bottom:18px; }
  .media-card:hover .play{ transform:scale(1.06); }
  .media-thumb .play{ transition:transform .15s; }
  .media-info{ padding:13px 15px; }
  .media-info b{ display:block; font-family:var(--mincho); font-weight:700; font-size:15px; color:var(--sumi); letter-spacing:.03em; line-height:1.45; }
  .media-info .meta{ font-size:11px; color:var(--muted); margin-top:6px; letter-spacing:.04em; }

  /* 動画モーダル */
  .video-modal{ position:absolute; inset:0; z-index:30; background:rgba(8,6,4,.86); backdrop-filter:blur(3px);
    display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:.2s; }
  .video-modal.show{ opacity:1; pointer-events:auto; }
  .vm-close{ position:absolute; top:16px; right:18px; width:38px; height:38px; border-radius:50%;
    background:rgba(246,240,226,.12); border:1px solid var(--line); color:#f6f0e2; font-size:20px;
    display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .vm-player{ width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; position:relative;
    background:#000; display:flex; align-items:center; justify-content:center; border:1px solid var(--kin); }
  .vm-player .play{ width:58px; height:58px; border-radius:50%; background:rgba(224,200,132,.95);
    display:flex; align-items:center; justify-content:center; }
  .vm-player .play::after{ content:""; border-style:solid; border-width:10px 0 10px 17px;
    border-color:transparent transparent transparent #15110a; margin-left:5px; }
  .vm-bar{ position:absolute; left:0; right:0; bottom:0; padding:10px 12px; display:flex; align-items:center; gap:10px;
    background:linear-gradient(transparent,rgba(0,0,0,.6)); }
  .vm-bar .vm-track{ flex:1; height:4px; border-radius:2px; background:rgba(246,240,226,.3); position:relative; }
  .vm-bar .vm-track i{ position:absolute; left:0; top:0; bottom:0; width:32%; background:var(--kin-bright); border-radius:2px; }
  .vm-bar .vm-time{ font-size:11px; color:#f6f0e2; font-family:var(--mincho); }
  .vm-meta{ width:100%; margin-top:16px; }
  .vm-meta .vm-tag{ margin-bottom:9px; }
  .vm-meta h3{ font-family:var(--mincho); font-weight:800; font-size:18px; color:var(--washi); letter-spacing:.04em; line-height:1.5; }
  .vm-meta p{ font-size:12px; color:#c6b89a; margin-top:9px; line-height:1.8; }

  .letter-card{ display:flex; align-items:center; gap:12px; padding:15px; background:var(--washi); border:1px solid var(--line-soft);
    border-radius:13px; margin-bottom:13px; cursor:pointer; transition:border-color .15s, background .15s; }
  .letter-card:hover{ border-color:var(--kin); background:rgba(197,164,92,.05); }
  .letter-card .lc-body{ flex:1; }
  .letter-card .lc-meta{ font-size:10.5px; color:var(--kin-deep); font-weight:700; letter-spacing:.08em; margin-bottom:6px; }
  .letter-card b{ font-family:var(--mincho); font-weight:700; font-size:14.5px; color:var(--sumi); letter-spacing:.02em; }
  .letter-card p{ font-size:11.5px; color:var(--muted); margin-top:5px; line-height:1.6; }
  .letter-card .lc-arrow{ color:var(--kin); font-size:20px; flex:0 0 auto; }

  /* お便り 記事詳細（画面遷移） */
  .article-hero{ position:relative; border-radius:0; margin:-20px -20px 20px; padding:30px 22px 24px;
    background:linear-gradient(160deg,#241c10,#15110a); color:#f3ead2; }
  .article-hero .ah-meta{ font-family:var(--mincho); font-size:11.5px; color:var(--kin-bright); letter-spacing:.16em; }
  .article-hero h1{ font-family:var(--mincho); font-weight:800; font-size:23px; color:var(--washi); letter-spacing:.06em; line-height:1.55; margin-top:12px; }
  .article-img{ aspect-ratio:16/9; border-radius:12px; background:#e9e1cf; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
  .article-body p{ font-size:13.5px; color:var(--sumi); line-height:2.05; margin-bottom:16px; letter-spacing:.01em; }
  .article-body h3{ font-family:var(--mincho); font-weight:700; font-size:16px; color:var(--sumi); letter-spacing:.04em;
    margin:6px 0 12px; padding-left:11px; border-left:3px solid var(--kin); }
  /* 追加タスク: 本文リッチエディター(Quill)対応タグのLIFF幅向けスタイル */
  .article-body h4{ font-family:var(--mincho); font-weight:700; font-size:14.5px; color:var(--sumi); letter-spacing:.03em; margin:6px 0 10px; }
  .article-body img{ display:block; max-width:100%; height:auto; border-radius:10px; margin:10px 0; }
  .article-body ul,.article-body ol{ margin:0 0 16px 1.2em; font-size:13.5px; color:var(--sumi); line-height:1.9; }
  .article-body li{ margin-bottom:4px; }
  .article-body blockquote{ margin:0 0 16px; padding:10px 14px; border-left:3px solid var(--line); color:rgba(0,0,0,.6); font-size:13px; }
  .article-body a{ color:var(--shu); text-decoration:underline; word-break:break-all; }
  .article-body strong{ font-weight:700; }
  .article-share{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:8px;
    font-size:12px; color:var(--kin-deep); font-weight:700; border:1px solid var(--line); border-radius:11px; padding:13px; }

  /* YouTube埋め込み再生モーダル（S8 動画カード共通） */
  .yt-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; }
  .yt-modal[hidden]{ display:none; }
  .yt-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.82); }
  /* 閉じるボタン分の上余白(56px)を確保し、動画枠は角丸＋余白付きの黒地に載せる */
  .yt-modal-body{ position:relative; width:100%; max-width:720px; padding:56px 0 12px; }
  .yt-modal-frame{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden;
    box-shadow:0 12px 40px rgba(0,0,0,.5); }
  .yt-modal-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .yt-modal-close{ position:absolute; top:4px; right:0; width:44px; height:44px; border:0; border-radius:50%;
    background:rgba(255,255,255,.16); color:var(--washi); font-size:24px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center; }
  .yt-modal-close:hover{ background:rgba(255,255,255,.24); }

  /* ===== S9 限定チャット ===== */
  .chat-hero{ border-radius:16px; padding:26px 22px; text-align:center; color:#f3ead2; margin-bottom:18px;
    background:linear-gradient(155deg,#241c10,#15110a); border:1px solid var(--kin); }
  .chat-hero .ch-mark{ width:64px; height:64px; border-radius:50%; margin:0 auto 14px;
    background:var(--kin-grad); display:flex; align-items:center; justify-content:center;
    font-family:var(--mincho); font-weight:700; font-size:30px; color:#2a200c; }
  .chat-hero h3{ font-family:var(--mincho); font-weight:800; font-size:20px; color:var(--washi); letter-spacing:.08em; }
  .chat-hero p{ font-size:12.5px; color:#c6b89a; line-height:1.9; margin-top:10px; }
  .rule-list{ margin:4px 0 18px; }
  .rule-row{ display:flex; gap:11px; align-items:flex-start; font-size:12.5px; color:var(--sumi); line-height:1.7; margin-bottom:11px; }
  .rule-row .rn{ width:22px; height:22px; border-radius:6px; flex:0 0 22px; background:rgba(197,164,92,.14);
    color:var(--kin-deep); font-family:var(--mincho); font-weight:700; font-size:12px;
    display:flex; align-items:center; justify-content:center; }
  .approve-note{ background:rgba(154,43,30,.07); border:1px solid rgba(154,43,30,.22); border-radius:11px;
    padding:13px 15px; font-size:12px; color:#7d3328; line-height:1.8; margin-top:14px; text-align:center; }

  .ec-card{ cursor:pointer; }

  /* ===== 入会フロー（段階性） ===== */
  .confirm-list{ background:var(--washi); border:1px solid var(--line-soft); border-radius:13px; overflow:hidden; margin-bottom:16px; }
  .confirm-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:14px 16px; border-bottom:1px solid var(--line-soft); }
  .confirm-row:last-child{ border-bottom:none; }
  .confirm-row .cr-k{ font-size:12px; color:var(--muted); letter-spacing:.04em; flex:0 0 auto; }
  .confirm-row .cr-v{ font-family:var(--mincho); font-weight:700; font-size:14.5px; color:var(--sumi); text-align:right; letter-spacing:.03em; }
  .confirm-row .cr-v .price{ font-size:14.5px; }
  /* 予約申込・決済画面の金額内訳（参加費／お志／合計）: dl.profile > .row(dt/dd)。confirm-row と同じ見た目 */
  dl.profile{ margin:14px 0 0; background:var(--washi); border:1px solid var(--line-soft); border-radius:12px; overflow:hidden; }
  dl.profile .row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:12px 16px; border-bottom:1px solid var(--line-soft); }
  dl.profile .row:last-child{ border-bottom:none; }
  dl.profile dt{ font-size:12px; color:var(--muted); letter-spacing:.04em; flex:0 0 auto; }
  dl.profile dd{ margin:0; font-family:var(--mincho); font-weight:700; font-size:14.5px; color:var(--sumi); text-align:right; letter-spacing:.03em; }
  dl.profile dd b{ font-size:16px; color:var(--kin-deep); }
  .success-hero{ text-align:center; border-radius:18px; padding:32px 22px 26px; color:#f3ead2; margin-bottom:18px;
    background:linear-gradient(160deg,#241c10,#15110a); border:1px solid var(--kin); position:relative; overflow:hidden; }
  .success-hero .sh-seal{ width:84px; height:84px; border-radius:50%; margin:0 auto 18px;
    background:var(--kin-grad); display:flex; align-items:center; justify-content:center;
    font-family:var(--mincho); font-weight:800; font-size:38px; color:#2a200c;
    box-shadow:0 0 0 8px rgba(197,164,92,.14), 0 0 0 16px rgba(197,164,92,.07); }
  .success-hero h3{ font-family:var(--mincho); font-weight:800; font-size:20px; color:var(--washi); letter-spacing:.03em; white-space:nowrap; }
  .success-hero p{ font-size:12.5px; color:#c6b89a; line-height:1.9; margin-top:11px; }
  .status-line{ display:flex; align-items:center; justify-content:center; gap:9px; margin:16px 0; }
  .status-line .sl-pill{ font-family:var(--mincho); font-weight:700; font-size:13px; padding:6px 16px; border-radius:999px; letter-spacing:.08em; }
  .apply-card{ background:var(--washi); border:1px solid var(--line-soft); border-radius:14px; padding:18px; margin-bottom:16px; }
  .apply-card .ac-no{ text-align:center; padding-bottom:15px; border-bottom:1px dashed var(--line); margin-bottom:15px; }
  .apply-card .ac-no small{ font-size:11px; color:var(--muted); letter-spacing:.08em; }
  .apply-card .ac-no b{ display:block; font-family:var(--mincho); font-weight:800; font-size:24px; color:var(--kin-deep); letter-spacing:.1em; margin-top:5px; }
  .flow-steps{ counter-reset:fs; }
  .flow-step{ display:flex; gap:13px; align-items:flex-start; padding-bottom:16px; position:relative; }
  .flow-step:not(:last-child)::before{ content:""; position:absolute; left:14px; top:30px; bottom:0; width:2px; background:var(--line); }
  .flow-step .fs-n{ width:29px; height:29px; border-radius:50%; flex:0 0 29px; z-index:1;
    background:var(--kinari-2); color:var(--muted); border:1px solid var(--line-soft);
    display:flex; align-items:center; justify-content:center; font-family:var(--mincho); font-weight:700; font-size:14px; }
  .flow-step.now .fs-n{ background:var(--kin-grad); color:#fff; border-color:var(--shu); }
  .flow-step.done .fs-n{ background:var(--sumi); color:var(--kin-bright); border-color:var(--kin); }
  .flow-step .fs-b b{ font-family:var(--mincho); font-weight:700; font-size:14.5px; color:var(--sumi); letter-spacing:.03em; }
  .flow-step .fs-b p{ font-size:11.5px; color:var(--muted); margin-top:4px; line-height:1.7; }
  .flow-step.now .fs-b b{ color:var(--kin-deep); }
  .interstitial{ text-align:center; padding:24px 8px 8px; }
  .pay-brand{ display:inline-flex; align-items:center; gap:10px; background:var(--sumi); border:1px solid var(--kin);
    border-radius:12px; padding:12px 22px; margin-bottom:20px; }
  .pay-brand .pb-from{ font-family:var(--mincho); color:#b3a787; font-size:14px; }
  .pay-brand .pb-ar{ color:var(--kin); font-size:16px; }
  .pay-brand .pb-to{ font-family:var(--mincho); color:var(--kin-bright); font-weight:700; font-size:16px; letter-spacing:.04em; }
  .amount-box{ background:var(--washi); border:1px solid var(--line-soft); border-radius:13px; padding:18px; margin-bottom:18px; }
  .amount-box .am-row{ display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; }
  .amount-box .am-row.total{ border-top:1px solid var(--line-soft); margin-top:6px; padding-top:13px; }
  .amount-box .am-k{ font-size:13px; color:var(--muted); }
  .amount-box .am-v{ font-family:var(--mincho); font-weight:700; color:var(--sumi); }
  .amount-box .am-row.total .am-v{ font-size:21px; color:var(--kin-deep); }
  .secure-note{ display:flex; gap:9px; align-items:flex-start; font-size:11.5px; color:var(--muted); line-height:1.7;
    background:rgba(197,164,92,.06); border:1px solid var(--line); border-radius:11px; padding:13px 15px; margin-bottom:8px; text-align:left; }
  .secure-note .sn-mark{ font-family:var(--mincho); color:var(--kin-deep); font-weight:700; }

  /* ===== 夏催事（先行スポット） ===== */
  .event-hero{ position:relative; border-radius:16px; overflow:hidden; padding:26px 22px 24px; margin-bottom:18px;
    background:linear-gradient(155deg,#2a1d12 0%,#14110c 60%,#1f1810 100%); border:1px solid var(--kin); color:#f3ead2; }
  .event-hero .eh-tag{ font-family:var(--mincho); font-size:12px; letter-spacing:.3em; color:var(--kin-bright); }
  .event-hero h3{ font-family:var(--mincho); font-weight:800; font-size:30px; color:var(--washi); letter-spacing:.1em; margin:10px 0 4px; }
  .event-hero .eh-date{ font-family:var(--mincho); font-size:15px; color:var(--kin-bright); letter-spacing:.06em; }
  .event-hero .eh-place{ font-size:12px; color:#c6b89a; margin-top:8px; letter-spacing:.04em; }
  .ticket-type{ display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--washi);
    border:1px solid var(--line-soft); border-radius:12px; margin-bottom:10px; }
  .ticket-type .tt-body{ flex:1; }
  .ticket-type .tt-body b{ font-family:var(--mincho); font-weight:700; font-size:15px; color:var(--sumi); letter-spacing:.03em; }
  .ticket-type .tt-body small{ display:block; font-size:11px; color:var(--muted); margin-top:3px; }
  .ticket-type .tt-price{ font-family:var(--mincho); font-weight:700; font-size:15px; color:var(--kin-deep); white-space:nowrap; }
  .ticket-type.onsite{ background:rgba(154,43,30,.05); border-color:rgba(154,43,30,.2); }
  .stepper{ display:flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
  .stepper button{ width:34px; height:34px; border:none; background:var(--washi); color:var(--kin-deep);
    font-size:18px; font-family:var(--mincho); cursor:pointer; }
  .stepper .qty{ width:34px; text-align:center; font-family:var(--mincho); font-weight:700; font-size:15px; color:var(--sumi); }
  .bulk-note{ background:rgba(197,164,92,.08); border:1px solid var(--line); border-radius:11px;
    padding:12px 14px; font-size:11.5px; color:var(--kin-deep); line-height:1.7; margin:4px 0 14px; }
  .bulk-note b{ color:var(--kin-deep); }
  .ticket-stub{ position:relative; background:linear-gradient(155deg,#241c10,#15110a); border:1px solid var(--kin);
    border-radius:16px; padding:22px; color:#f3ead2; margin-bottom:16px; overflow:hidden; }
  .ticket-stub .ts-perf{ position:absolute; left:0; right:0; top:50%; height:0; border-top:2px dashed rgba(197,164,92,.4); }
  .ticket-stub .ts-name{ font-family:var(--mincho); font-weight:800; font-size:20px; color:var(--washi); letter-spacing:.08em; }
  .ticket-stub .ts-meta{ font-size:12px; color:#c6b89a; margin-top:6px; }
  .ticket-stub .ts-code{ margin-top:18px; padding-top:18px; border-top:1px solid var(--line); text-align:center; }
  .ticket-stub .ts-code small{ font-size:10.5px; color:#a89c80; letter-spacing:.1em; }
  .ticket-stub .ts-code b{ display:block; font-family:var(--mincho); font-weight:800; font-size:26px; color:var(--kin-bright); letter-spacing:.18em; margin-top:5px; }
  .ticket-stub .ts-bars{ display:flex; gap:3px; justify-content:center; margin-top:14px; height:42px; align-items:stretch; }
  .ticket-stub .ts-bars i{ width:3px; background:#f3ead2; border-radius:1px; }

  /* ===== 会員状態別カード ===== */
  .statuscard{ position:relative; border-radius:16px; overflow:hidden; color:#f3ead2; margin-bottom:16px;
    background:linear-gradient(150deg,#241c10 0%,#100d08 55%,#211a0f 100%); border:1.5px solid var(--kin);
    box-shadow:0 20px 44px -24px rgba(0,0,0,.85); }
  .statuscard .sc-band{ padding:8px 16px; text-align:center; font-family:var(--mincho); font-weight:700;
    font-size:12px; letter-spacing:.1em; }
  .statuscard .sc-band.warn{ background:linear-gradient(90deg,#e7d098,#c5a45c); color:#2a200c; }
  .statuscard .sc-band.mute{ background:rgba(140,130,112,.95); color:#f6f0e2; }
  .statuscard .sc-band.danger{ background:rgba(154,43,30,.95); color:#f6f0e2; }
  .statuscard .sc-body{ padding:18px 20px 20px; }
  .statuscard .sc-rank{ font-family:var(--mincho); font-weight:800; font-size:23px; color:var(--washi); letter-spacing:.12em; }
  .statuscard .sc-no{ font-size:12px; color:#c6b89a; margin-top:4px; letter-spacing:.06em; }
  .statuscard .sc-exp{ display:flex; gap:18px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
  .statuscard .sc-exp div small{ font-size:10px; color:#a89c80; letter-spacing:.08em; display:block; }
  .statuscard .sc-exp div b{ font-family:var(--mincho); font-size:15px; color:var(--kin-bright); letter-spacing:.04em; }
  .statuscard.dim{ filter:grayscale(.55) brightness(.82); border-color:#8c8270; }
  .statuscard.dim-strong{ filter:grayscale(.85) brightness(.62); border-color:rgba(140,130,112,.6); }
  .renew-card{ background:var(--washi); border:1px solid var(--line-soft); border-radius:13px; padding:16px; margin-bottom:14px; }
  .renew-card b{ font-family:var(--mincho); font-weight:700; font-size:15px; color:var(--sumi); letter-spacing:.03em; }
  .renew-card p{ font-size:12px; color:var(--muted); line-height:1.8; margin:7px 0 0; }

  /* ===== 退会確認モーダル（ボトムシート） ===== */
  /* ビューポート固定（position:absolute だと文書全体基準になり、スクロール位置で
     シートが見切れるため fixed に変更。シートは常に画面下部に全体が見える） */
  .modal-overlay{ position:fixed; inset:0; z-index:1000; background:rgba(20,17,12,.62);
    backdrop-filter:blur(2px); display:flex; align-items:flex-end; justify-content:center; }
  .modal-sheet{ width:100%; max-width:430px; background:var(--kinari); border-top-left-radius:22px; border-top-right-radius:22px;
    padding:20px 20px calc(26px + env(safe-area-inset-bottom)); border-top:2px solid var(--shu);
    box-shadow:0 -20px 50px -20px rgba(0,0,0,.6);
    /* 長文でも画面内に収める。既定はシート全体スクロール */
    max-height:min(85dvh, 85vh); overflow-y:auto; display:flex; flex-direction:column; }
  /* 規約・個人情報モーダル: 見出しと閉じるボタンを固定し、本文のみ内部スクロール */
  #legal-modal .modal-sheet{ overflow:hidden; }
  #legal-modal-body{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .modal-sheet .ms-handle{ width:42px; height:4px; border-radius:2px; background:var(--line); margin:0 auto 18px; }
  .modal-sheet h3{ font-family:var(--mincho); font-weight:800; font-size:19px; color:var(--shu); letter-spacing:.04em; text-align:center; }
  .modal-sheet .ms-lead{ font-size:12.5px; color:var(--sumi); line-height:1.9; margin:12px 0 16px; text-align:center; }
  .ms-warn{ background:rgba(154,43,30,.06); border:1px solid rgba(154,43,30,.2); border-radius:12px; padding:14px 15px; margin-bottom:18px; }
  .ms-warn .mw-row{ display:flex; gap:10px; align-items:flex-start; font-size:12px; color:#7d3328; line-height:1.7; margin-bottom:9px; }
  .ms-warn .mw-row:last-child{ margin-bottom:0; }
  .ms-warn .mw-row .mw-k{ color:var(--shu); font-family:var(--mincho); font-weight:700; flex:0 0 auto; }
  .btn-danger{ background:var(--shu); color:#f6f0e2; }

  /* ===== 反映待ち（同期遅延） ===== */
  .pending-card{ background:var(--sumi); border:1px solid var(--kin); border-radius:14px; padding:20px; color:var(--kinari);
    text-align:center; margin-bottom:16px; }
  .pending-card .dots{ display:flex; gap:7px; justify-content:center; margin-bottom:14px; }
  .pending-card .dots i{ width:10px; height:10px; border-radius:50%; background:var(--kin); animation:pdot 1.2s infinite ease-in-out; }
  .pending-card .dots i:nth-child(2){ animation-delay:.2s; } .pending-card .dots i:nth-child(3){ animation-delay:.4s; }
  @keyframes pdot{ 0%,80%,100%{ opacity:.25; transform:scale(.8);} 40%{ opacity:1; transform:scale(1);} }
  .pending-card b{ font-family:var(--mincho); font-weight:700; font-size:17px; color:var(--washi); letter-spacing:.06em; }
  .pending-card p{ font-size:12px; color:#c6b89a; margin-top:9px; line-height:1.8; }
  .sync-strip{ display:flex; align-items:center; gap:9px; background:var(--washi); border:1px solid var(--line-soft);
    border-radius:11px; padding:12px 14px; font-size:11.5px; color:var(--muted); line-height:1.6; margin-bottom:13px; }
  .sync-strip .ss-dot{ width:9px; height:9px; border-radius:50%; background:var(--ok); flex:0 0 9px;
    box-shadow:0 0 0 3px rgba(79,122,82,.18); }
  .resv-row{ display:flex; align-items:center; gap:12px; background:var(--washi); border:1px solid var(--line-soft);
    border-radius:12px; padding:14px 15px; margin-bottom:10px; }
  .resv-row .rr-body{ flex:1; } .resv-row .rr-body b{ font-family:var(--mincho); font-weight:700; font-size:14.5px; color:var(--sumi); }
  .resv-row .rr-body small{ display:block; font-size:11px; color:var(--muted); margin-top:3px; }

  /* ===== LINE通知フキダシ ===== */
  .line-bg{ background:#8caab6; min-height:100%; padding:18px 14px 40px; }
  .lc-day{ text-align:center; margin:6px 0 16px; }
  .lc-day span{ font-size:11px; color:#f6f0e2; background:rgba(0,0,0,.18); padding:3px 13px; border-radius:999px; }
  .lc-msg{ display:flex; gap:9px; align-items:flex-end; margin-bottom:16px; }
  .lc-ava{ width:38px; height:38px; border-radius:50%; flex:0 0 38px; background:#1a1714;
    display:flex; align-items:center; justify-content:center; font-family:var(--mincho); font-weight:700; font-size:18px; color:#fff; }
  .lc-col{ max-width:255px; }
  .lc-name{ font-size:10.5px; color:#f6f0e2; margin:0 0 4px 3px; }
  .lc-bubble{ background:#fff; border-radius:4px 16px 16px 16px; padding:13px 15px; position:relative; }
  .lc-bubble b{ font-family:var(--gothic); font-weight:700; font-size:14px; color:var(--sumi); letter-spacing:.02em; }
  .lc-bubble p{ font-size:12.5px; color:#3a352c; line-height:1.7; margin-top:6px; }
  .lc-bubble .lc-cta{ display:inline-block; margin-top:11px; font-size:12.5px; font-weight:700; color:var(--ink);
    border-top:1px solid var(--line-soft); padding-top:10px; width:100%; }
  .lc-time{ font-size:10px; color:#f0ece2; margin-left:6px; }

  /* ===== 法人ビュー ===== */
  .corp-meta{ background:var(--washi); border:1px solid var(--line-soft); border-radius:13px; overflow:hidden; margin-bottom:14px; }
  .corp-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line-soft); }
  .corp-row:last-child{ border-bottom:none; }
  .corp-row .cp-k{ font-size:12px; color:var(--muted); }
  .corp-row .cp-v{ font-family:var(--mincho); font-weight:700; font-size:14.5px; color:var(--sumi); text-align:right; }
  .corp-note{ background:rgba(154,43,30,.06); border:1px solid rgba(154,43,30,.2); border-radius:11px;
    padding:13px 15px; font-size:12px; color:#7d3328; line-height:1.8; }

  .gallery-foot{ max-width:1320px; margin:64px auto 0; color:#7e745f; font-size:12px; line-height:2; letter-spacing:.02em; }
  .gallery-foot b{ color:var(--kin); }

  /* 遷移先トースト */
  .toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
    z-index:100; background:var(--sumi); border:1px solid var(--kin); border-radius:13px;
    padding:15px 20px; max-width:520px; width:calc(100% - 48px); box-shadow:0 22px 50px -20px rgba(0,0,0,.9);
    opacity:0; pointer-events:none; transition:.25s; }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  .toast .t-head{ font-family:var(--mincho); font-weight:700; font-size:13px; color:var(--kin-bright); letter-spacing:.06em; }
  .toast .t-url{ font-size:12px; color:#cfc4a8; margin-top:6px; word-break:break-all; line-height:1.6; }
  .toast .t-note{ font-size:11px; color:#9a9079; margin-top:8px; line-height:1.6; }
  @media (max-width:520px){ body{ padding:24px 10px 60px; } .device,.device-wrap{ width:100%; max-width:390px;} }

  /* ============================================================
     v3 光テーマ・オーバーライド層（白ベース × 黒文字 × 朱赤アクセント）
     旧・暗色コンポーネントを白地・黒文字・朱赤へ上書き。
     元定義より後方に置くことで同一詳細度でも優先させる。
     ============================================================ */

  /* --- 外側ギャラリー外装（明地化） --- */
  .rankbar{ background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); }
  .rankbar button{ color:var(--sumi); }
  .rankbar button.on{ color:#fff; }
  .rankbar .rb-hint{ color:var(--muted); }
  .brandline .mark{ color:var(--sumi); }
  .gallery-head .sub{ color:var(--muted); }
  .legend span{ color:var(--muted); background:rgba(177,38,52,.05); border-color:rgba(177,38,52,.16); }
  .section-label h2{ color:var(--sumi); }
  .section-label p{ color:var(--muted); }
  .device-cap .name{ color:var(--sumi); }
  .device-cap .note{ color:var(--muted); }
  .gallery-foot{ color:var(--muted); }
  .gallery-foot b{ color:var(--shu); }

  /* --- 端末クローム（ダークヘッダー／on-dark画面を白へ） --- */
  .screen.on-dark{ background:#fff; }
  .screen.on-dark .pad{ color:var(--sumi); }
  .washi-tex{ display:none; }

  /* --- リッチメニュー作図：タブ見出しのみ光テーマ化（作図本体は基盤CSSで定義） --- */
  .rm-cap .tab.a{ background:rgba(177,38,52,.09); color:var(--shu); border-color:rgba(177,38,52,.2); }
  .rm-cap .tab.b{ background:var(--kin-grad); color:#fff; }

  /* --- アイコンチップ・ピル（金→朱赤の淡地） --- */
  .kic,.func .fic,.guard .gn,.rule-row .rn{ background:rgba(177,38,52,.09); color:var(--shu); }
  .kic.gold,.func.hot .fic{ background:var(--kin-grad); color:#fff; }
  .pill-gold{ background:rgba(177,38,52,.09); color:var(--shu); border-color:rgba(177,38,52,.2); }

  /* --- 選択・フォーカス（金→朱赤） --- */
  .type-opt.sel{ border-color:var(--shu); background:rgba(177,38,52,.05); box-shadow:0 0 0 3px rgba(177,38,52,.1); }
  .type-opt.sel .radio{ border-color:var(--shu); }
  .type-opt.sel .radio::after{ background:var(--kin-grad); }
  .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--shu); box-shadow:0 0 0 3px rgba(177,38,52,.12); }

  /* --- ボタン --- */
  .btn-gold{ background:var(--kin-grad); color:#fff; box-shadow:0 8px 20px -10px rgba(177,38,52,.5); }
  .btn-sumi{ background:#26221f; color:#fff; border:none; }
  .agree input.chk:checked{ background:var(--kin-grad); color:#fff; border:none; }

  /* --- feature 強調面（暗面→白地・朱赤縁、見出しは朱赤=--kin-bright） --- */
  .menu-item.feat,.func.hot,.perk.crown,.cal-event.feat{ background:#fff; border-color:var(--shu); }
  .menu-item.feat .tx small,.func.hot small,.perk.crown .pk-body p,.cal-event.feat .ce-body p{ color:var(--muted); }

  /* --- セグメント／ステップ／決済ブランド（ON＝朱赤） --- */
  .seg button.on{ background:var(--kin-grad); color:#fff; box-shadow:none; }
  .step.done .dot,.flow-step.done .fs-n{ background:var(--kin-grad); color:#fff; border-color:var(--shu); }
  .pay-brand{ background:#fff; border:1px solid var(--line); }
  .pay-brand .pb-from{ color:var(--muted); }
  .pay-brand .pb-ar,.pay-brand .pb-to{ color:var(--shu); }

  /* --- 会員証・アカウント＝朱赤ブランドカード（白文字） --- */
  .memcard,.mp-card-mini,.acct-card,.statuscard{
    background:linear-gradient(135deg,#c1394a 0%,#9e2230 55%,#7d1f2a 100%);
    border:none; box-shadow:0 20px 44px -24px rgba(125,31,42,.7);
  }
  /* S3マイページ・S13アカウント・状態カード（更新期/休会/失効）は署名グラデ写真そのまま（S2会員証と同じ鮮やかさ） */
  .mp-card-mini,.acct-card,.statuscard{
    background:var(--bg-img) left top/cover;
    box-shadow:0 20px 44px -24px rgba(0,0,0,.5);
    text-shadow:0 1px 5px rgba(0,0,0,.38);
  }
  .mp-card-mini,.acct-card,.statuscard{ text-shadow:none; }  /* S3・S13・状態カードは文字影なし */
  /* 休会/失効は状態変化としてグレースケール（背景写真を活かしつつ沈める） */
  .statuscard.dim{ filter:grayscale(.5) brightness(.9); }
  .statuscard.dim-strong{ filter:grayscale(.8) brightness(.72); }
  .memcard .scale-tex{ background-image:radial-gradient(circle at 50% 0,#fff 0 2px,transparent 2px); opacity:.10; }
  .memcard .shrine,.memcard .holder .no{ color:rgba(255,255,255,.85); }
  .memcard .holder small{ color:rgba(255,255,255,.75); }
  .memcard .qr,.mp-card-mini .mini-qr{ background:#fff; }
  .gold-foil{ background:radial-gradient(circle,rgba(255,255,255,.28),transparent 65%); }
  .valid-box{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); }
  .valid-box small{ color:rgba(255,255,255,.7); }
  .valid-box b{ color:#fff; }
  .statuscard .sc-band.warn{ background:var(--kin-grad); color:#fff; }
  .acct-card .ac-role,.mp-card-mini .go{ color:#fff; }
  .acct-card .ac-no,.mp-card-mini .nm,.statuscard .sc-no{ color:rgba(255,255,255,.8); }
  .acct-card .ac-meta div small,.statuscard .sc-exp div small{ color:rgba(255,255,255,.7); }
  .acct-card .ac-meta div b,.statuscard .sc-exp div b{ color:#fff; }
  /* S13アカウント・状態カードは文字色を白で統一 */
  .acct-card .ac-no,.acct-card .ac-meta div small,
  .statuscard .sc-no,.statuscard .sc-exp div small{ color:#fff; }

  /* on-dark「画面を明るく」は既に明地なので整合のみ */
  .screen.on-dark.bright{ background:#fff; }
  .screen.on-dark.bright .valid-box{ background:rgba(255,255,255,.14); }
  .screen.on-dark.bright .valid-box b{ color:#fff; }
  .screen.on-dark.bright .cache-note{ background:#f5f5f4; color:var(--muted); }

  /* --- 情報ヒーロー（暗面→淡地・黒文字・朱赤ラベル） --- */
  .hero0,.diag-result,.chat-hero,.success-hero,.event-hero,.article-hero,.ticket-stub,.pending-card,.consult-state.available{
    background:#faf7f6; border:1px solid var(--line); color:var(--sumi);
  }
  .hero0{ background:linear-gradient(160deg,#fbeef0 0%,#faf7f6 60%,#fff 100%); border:none; }
  .article-hero{ border:none; }
  .hero0 h1,.diag-result .dr-main,.chat-hero h3,.success-hero h3,.event-hero h3,.article-hero h1,.ticket-stub .ts-name,.pending-card b,.consult-state.available .st-main{ color:var(--sumi); }
  .hero0 h1 b{ color:var(--shu); }
  .hero0 p,.diag-result .dr-sub,.chat-hero p,.success-hero p,.event-hero .eh-place,.pending-card p,.consult-state.available .st-sub{ color:var(--muted); }
  .consult-state.available{ border-left:4px solid var(--shu); }
  .diag-result .dr-age,.chat-hero .ch-mark,.success-hero .sh-seal{ background:var(--kin-grad); color:#fff; }
  .event-hero .eh-date,.ticket-stub .ts-code b{ color:var(--shu); }
  .ticket-stub .ts-meta{ color:var(--muted); }
  .article-hero .ah-meta{ color:var(--shu); }
  .pending-card .dots i{ background:var(--shu); }
  .ticket-stub .ts-bars i{ background:var(--sumi); }
  .ticket-stub .ts-perf{ border-top-color:var(--line); }

  /* --- メディアサムネ（暗→淡グレー・朱赤の再生ボタン） --- */
  .media-thumb{ background:#e9e8e6; }
  .media-thumb .play{ background:var(--shu); }
  .media-thumb .play::after{ border-color:transparent transparent transparent #fff; }
  .media-thumb .dur{ color:#fff; }

  /* --- 淡い金地のノート類→中立の淡地 --- */
  .acct-note,.secure-note,.cache-note,.bulk-note,.pray-card.locked-visible{ background:#f7f7f6; }

  /* ============================================================
     S0b 未会員ランディング / S2 デジタル会員証
     Figma「260702_kanahebisui_LINE」忠実再現
     署名グラデ（緑→黄→橙）＋白い蛇社紋（インラインSVG）＋グラス白カード
     ※背景は元・購入ストック写真をCSSグラデで近似（ライセンス回避・非失効・自己完結）
     ============================================================ */
  :root{
    --brand-grad:linear-gradient(135deg,#7cc088 0%,#bccf6c 25%,#e8c95f 46%,#eeb15c 68%,#e37d63 100%);
  }

  /* ---------- S0b ---------- */
  /* 1画面（スクロールなし）にフッターまで収めるため全体をコンパクト化 */
  .fs0{ position:relative; min-height:100%; padding:6px 20px 18px;
    background:var(--bg-img) left top/cover no-repeat; }
  .fs0-hero{ text-align:center; padding:26px 0 22px; }
  .fs0-crest{ width:148px; height:108px; margin:0 auto; display:block;
    filter:drop-shadow(0 2px 12px rgba(0,0,0,.14)); }
  .fs0-title{ font-family:var(--gothic); font-weight:500; color:#fff;
    /* 狭幅端末で「ようこそ崇敬会へ」が折り返さないよう可変サイズ+改行禁止 */
    font-size:clamp(22px, 7.6vw, 30px); white-space:nowrap;
    letter-spacing:.14em; text-indent:.14em;
    margin-top:10px; text-shadow:0 1px 14px rgba(0,0,0,.16); }
  .fs0-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .fs0-card{ background:rgba(255,255,255,.94); backdrop-filter:blur(2px);
    border-radius:14px; padding:12px 14px; min-height:82px; display:flex; flex-direction:column;
    justify-content:space-between; gap:10px; box-shadow:0 12px 26px -18px rgba(0,0,0,.4); cursor:pointer;
    transition:transform .12s; }
  .fs0-card:active{ transform:scale(.98); }
  .fs0-card .ic{ height:28px; width:auto; }
  /* 「オンライン授与所」等が折り返さないよう可変サイズ+改行禁止 */
  .fs0-card b{ font-family:var(--gothic); font-weight:700; font-size:clamp(12px, 3.9vw, 14px);
    color:#141414; letter-spacing:.01em; text-align:center; white-space:nowrap; }
  .fs0-cta{ position:relative; margin-top:24px; background:#fff; border-radius:16px;
    padding:16px 18px; display:flex; align-items:center; gap:14px; cursor:pointer;
    box-shadow:0 16px 32px -20px rgba(0,0,0,.45); transition:transform .12s; }
  .fs0-cta:active{ transform:scale(.99); }
  .fs0-cta .logo{ width:54px; height:38px; flex:0 0 54px; object-fit:contain; }
  .fs0-cta b{ font-family:var(--gothic); font-weight:700; font-size:18px; color:#141414; letter-spacing:.03em; }
  .fs0-cta .arr{ margin-left:auto; font-size:20px; color:#141414; line-height:1; }
  .fs0-ribbon{ position:absolute; top:-12px; left:50%; transform:translateX(-50%);
    background:#8dc391; color:#fff; font-family:var(--gothic); font-size:12px; font-weight:500; letter-spacing:.01em;
    padding:5px 16px; border-radius:15px; white-space:nowrap; box-shadow:0 4px 10px -4px rgba(0,0,0,.25); }
  .fs0-ribbon::after{ content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
    border:7px solid transparent; border-top-color:#8dc391; border-bottom:0; }
  .fs0-foot{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; opacity:.92; }
  .fs0-foot-link{ display:flex; align-items:center; gap:8px; text-decoration:none; }
  .fs0-foot .fc{ width:32px; height:32px; object-fit:contain; filter:drop-shadow(0 1px 6px rgba(0,0,0,.15)); }
  .fs0-foot span{ font-family:var(--gothic); font-weight:400; font-size:16px; letter-spacing:.16em; color:#fff;
    text-shadow:0 1px 8px rgba(0,0,0,.12); }

  /* ---------- S2 ---------- */
  .fs2-top{ background:var(--rank); padding:16px 20px 82px; text-align:center; }
  /* 神社名と種別を2段に分け、長い種別名（応援会員(ともだち) 等）が途中で折り返さないようにする */
  .fs2-top .t{ display:block; font-family:var(--gothic); font-weight:700; font-size:14px; color:#fff; letter-spacing:.04em; }
  .fs2-top .tt{ display:block; margin-top:4px; font-family:var(--gothic); font-weight:700; font-size:19px; color:#fff; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .fs2-body{ padding:0 20px 30px; }
  .fs2-card{ position:relative; margin-top:-68px; border-radius:20px; overflow:hidden;
    aspect-ratio:1.55/1; background:var(--bg-img) left top/cover; padding:20px;
    box-shadow:0 22px 46px -22px rgba(0,0,0,.5); }
  .fs2-card .cn{ position:relative; z-index:1; font-family:var(--gothic); font-weight:500; font-size:12px; color:rgba(255,255,255,.92); letter-spacing:.04em; }
  .fs2-card .badge{ position:relative; z-index:1; display:inline-block; margin-top:6px; border:1.5px solid rgba(255,255,255,.92);
    border-radius:8px; padding:2px 12px; font-family:var(--gothic); font-weight:700; font-size:13px; color:#fff; letter-spacing:.03em; white-space:nowrap; }
  /* 紋章は左上バッジ・右下種別名と重ならないサイズに抑える（375px幅端末でカード高さ約216px） */
  .fs2-card .crest{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:118px; height:86px; opacity:.97; z-index:0; }
  .fs2-card .holder{ position:absolute; right:20px; bottom:16px; text-align:right; z-index:1; max-width:calc(100% - 40px); }
  .fs2-card .holder b{ font-family:var(--gothic); font-weight:700; font-size:17px; color:#fff; letter-spacing:.03em; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .fs2-card .holder .no{ font-family:"Open Sans",var(--gothic); font-size:13px; color:rgba(255,255,255,.9); letter-spacing:.04em; }
  .fs2-info{ display:flex; background:#f5f5f5; border-radius:14px; padding:16px 20px; margin-top:16px; }
  .fs2-info > div{ flex:1; }
  .fs2-info small{ font-size:13px; color:rgba(0,0,0,.55); font-weight:500; }
  .fs2-info b{ display:block; margin-top:8px; font-family:var(--gothic); font-weight:700; font-size:18px; color:#141414; }
  .fs2-info .ok{ display:flex; align-items:center; gap:6px; }
  .fs2-info .ok svg{ width:18px; height:18px; }
  .fs2-note{ font-size:11.5px; color:rgba(0,0,0,.5); line-height:1.75; margin-top:14px; }
  .fs2-shinso b{ margin-top:6px; }
  .fs2-shinso p{ margin:8px 0 0; font-size:12px; line-height:1.7; color:rgba(0,0,0,.6); }
  .fs2-pill{ display:inline-block; border-radius:999px; padding:3px 14px; font-size:13px; font-weight:700; }
  .fs2-pill-ok{ background:var(--rank, #6b7a5a); color:#fff; }
  .fs2-pill-no{ background:#e5e1d8; color:#6a6357; }
  .fs2-btns{ display:flex; gap:12px; margin-top:16px; }
  .fs2-btn{ flex:1; position:relative; display:flex; align-items:center; justify-content:center;
    min-height:56px; background:var(--btn-gray); border:none; border-radius:12px;
    font-family:var(--gothic); font-weight:700; font-size:16px; color:#fff; letter-spacing:.06em;
    cursor:pointer; transition:filter .12s; }
  .fs2-btn:active{ filter:brightness(.92); }
  .fs2-btn .ar{ position:absolute; right:20px; font-weight:700; }
  /* ============================================================
     v6 Figma刷新オーバーライド層（kanahebisui_LINE 最新版 2026-08）
     淡彩デザイン言語: 種別カラー制（一般=緑/崇敬=紺/正=朱/特別=紫/法人=墨）
     ＋UI緑（選択・トグル）＋グレーCTA＋淡青磁（S4）
     v3層より後方＝優先。元定義は温存し値のみ上書き。
     ============================================================ */

  /* --- 種別カラー切替（data-rank-theme 要素に rk-* が付与される） --- */
  .rk-none{     --rank:#9ca3af; }
  .rk-support{  --rank:var(--rk-ippan); }
  .rk-sushin{   --rank:var(--rk-sushin); }
  .rk-regular{  --rank:var(--rk-regular); }
  .rk-special{  --rank:var(--rk-special); }
  .rk-nenkito{  --rank:var(--rk-regular); } /* 年祈祷=S2種別外。暫定で朱（要確認） */
  .rk-corp{     --rank:var(--rk-corp); }

  /* --- 選択状態・フォーカス（朱赤→UI緑） --- */
  .type-opt.sel{ border-color:var(--ui-green); background:#f4faf5; box-shadow:0 0 0 3px rgba(141,195,145,.18); }
  .type-opt.sel .radio{ border-color:var(--ui-green); }
  .type-opt.sel .radio::after{ background:var(--ui-green); }
  .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--ui-green); box-shadow:0 0 0 3px rgba(141,195,145,.2); }
  .agree input.chk:checked{ background:var(--ui-green); }
  .type-opt .price{ color:var(--ink); }

  /* --- 主要CTA（朱赤グラデ→グレー #6b7280、Figma「会員特典」「入力内容を確認する」準拠） --- */
  .btn-gold{ background:var(--btn-gray); color:#fff; box-shadow:none; border-radius:12px; letter-spacing:.06em; }
  .seg button.on{ background:var(--btn-gray); }
  .step.done .dot,.flow-step.done .fs-n{ background:var(--ui-green); border-color:var(--ui-green); }

  /* --- S4 会員特典（v6: 淡青磁リスト＋淡青ボタン） --- */
  .s4-screen{ background:var(--teal-bg); }
  .s4-card{ background:#fff; border-radius:12px; padding:18px 16px; margin-bottom:14px;
    box-shadow:0 3px 10px -8px rgba(0,0,0,.15); }
  .s4-card > b{ display:block; font-family:var(--gothic); font-weight:700; font-size:15px; color:var(--ink);
    letter-spacing:.04em; padding-bottom:8px; border-bottom:1px solid rgba(0,0,0,.07); margin-bottom:10px; }
  .s4-card p{ font-size:12.5px; line-height:1.9; color:rgba(0,0,0,.62); }
  .s4-btn{ position:relative; display:flex; align-items:center; justify-content:center; width:100%;
    min-height:46px; margin-top:14px; background:var(--teal); border:none; border-radius:10px;
    font-family:var(--gothic); font-weight:700; font-size:14px; color:#fff; letter-spacing:.14em; cursor:pointer; }
  .s4-btn:active{ filter:brightness(.94); }
  .s4-btn .ar{ position:absolute; right:16px; }
  .s4-badge{ display:block; margin-top:14px; padding:11px; text-align:center; border:1.5px solid var(--teal);
    border-radius:10px; font-family:var(--gothic); font-weight:700; font-size:13.5px; color:#4d97a8; letter-spacing:.06em; }

  /* --- S5 ご祈祷（v6: 淡緑リスト＋緑ボタン） --- */
  .s5-screen{ background:#d1e7d3; }
  .s5-card{ background:#fff; border-radius:12px; padding:18px 16px; margin-bottom:16px;
    box-shadow:0 3px 10px -8px rgba(0,0,0,.15); }
  .s5-card .ph{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
  .s5-card .ph b{ font-family:var(--gothic); font-weight:700; font-size:15px; color:var(--ink); }
  .s5-card .ph .price{ font-family:"Open Sans",var(--gothic); font-weight:700; font-size:14px; color:var(--ink); }
  .s5-card p{ font-size:12px; line-height:1.9; color:rgba(0,0,0,.55); margin-top:8px; }
  .s5-btn{ position:relative; display:flex; align-items:center; justify-content:center; width:100%;
    min-height:46px; margin-top:14px; background:var(--ui-green); border:none; border-radius:10px;
    font-family:var(--gothic); font-weight:700; font-size:14px; color:#fff; letter-spacing:.14em; cursor:pointer; }
  .s5-btn:active{ filter:brightness(.94); }
  .s5-btn .ar{ position:absolute; right:16px; }
  .s5-screen .stores-note{ background:transparent; border:none; color:rgba(0,0,0,.55); text-align:center; }

  /* --- S7 祭事カレンダー（v6: 暖灰リスト＋灰茶ボタン） --- */
  .s7-screen{ background:#e1dbd9; }
  .s7-month{ display:flex; align-items:baseline; gap:8px; margin:6px 2px 10px; }
  .s7-month b{ font-family:var(--gothic); font-weight:700; font-size:17px; color:var(--ink); }
  .s7-month small{ font-size:11px; color:rgba(0,0,0,.45); letter-spacing:.1em; }
  .s7-card{ background:#fff; border-radius:12px; padding:16px; margin-bottom:14px; overflow:hidden;
    box-shadow:0 3px 10px -8px rgba(0,0,0,.15); }
  .s7-card-row{ display:flex; gap:14px; }
  .s7-card .dt{ flex:0 0 40px; text-align:center; }
  .s7-card .dt b{ display:block; font-family:"Open Sans",var(--gothic); font-weight:700; font-size:22px; color:var(--ink); line-height:1.1; }
  .s7-card .dt small{ font-size:11px; color:rgba(0,0,0,.5); }
  .s7-card .bd{ flex:1; min-width:0; }
  .s7-card .bd b{ font-family:var(--gothic); font-weight:700; font-size:14.5px; color:var(--ink); }
  .s7-card .bd p{ font-size:11.5px; line-height:1.8; color:rgba(0,0,0,.55); margin-top:4px; }
  .s7-btn{ position:relative; display:flex; align-items:center; justify-content:center; width:100%;
    min-height:40px; margin-top:10px; background:#b3a4a1; border:none; border-radius:8px;
    font-family:var(--gothic); font-weight:700; font-size:12.5px; color:#fff; letter-spacing:.14em; cursor:pointer; }
  .s7-btn:active{ filter:brightness(.94); }
  .s7-btn .ar{ position:absolute; right:14px; }

  /* --- S7 行事サムネイル・横スワイプギャラリー（LIFF幅=430px系で崩れない設計） --- */
  .s7-thumb{ width:100%; border-radius:10px; overflow:hidden; margin-bottom:12px; background:#eee; }
  .s7-thumb img{ display:block; width:100%; height:200px; object-fit:contain; background:#2b2723; cursor:zoom-in; }
  .s7-gallery{ position:relative; margin-left:-16px; margin-right:-16px; width:calc(100% + 32px);
    border-radius:0; margin-bottom:10px; }
  .s7-gallery-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; }
  .s7-gallery-track::-webkit-scrollbar{ display:none; }
  .s7-gallery-slide{ flex:0 0 100%; scroll-snap-align:start; }
  .s7-gallery-slide img{ display:block; width:100%; height:200px; object-fit:contain; background:#2b2723; cursor:zoom-in; }
  .s7-gallery-dots{ position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:6px; }
  .s7-dot{ width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.55); }
  .s7-dot.on{ background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.15); }

  /* --- S10 厄年・方位診断（v6: 淡橙×橙 #f89059） --- */
  .s10-screen{ background:#fcd3bd; }
  .s10-screen .kicker{ color:#c2551a; }
  .s10-screen .kicker::before{ background:currentColor; }
  .s10-screen .btn-sumi{ background:#f89059; color:#fff; border:none; border-radius:12px; letter-spacing:.14em; }
  .s10-screen .btn-gold{ background:#f89059; }
  .s10-screen .diag-result{ background:#fff; border:none; border-radius:14px; text-align:center;
    box-shadow:0 3px 10px -8px rgba(0,0,0,.15); }
  .s10-screen .diag-result .dr-lab{ color:var(--ink); font-weight:700; }
  .s10-screen .diag-result .dr-main{ color:#f89059; font-size:34px; letter-spacing:.3em; }
  /* 「厄年ではありません」など長文: 375px 幅でも1行に収める（上の 34px/.3em を上書き） */
  .s10-screen .diag-result .dr-main--long{ font-size:clamp(15px, 4.4vw, 21px); letter-spacing:.06em; white-space:nowrap; }
  .s10-screen .diag-result .dr-sub{ color:rgba(0,0,0,.5); }
  .s10-screen .diag-result .dr-age{ background:#fff; color:#f89059; border:1.5px solid #f89059;
    border-radius:999px; font-weight:700; }
  .s10-screen .kichi{ background:#fff; border:none; border-radius:12px;
    box-shadow:0 3px 10px -8px rgba(0,0,0,.12); }
  .s10-screen .kichi .kd{ color:var(--ink); }
  .s10-screen .kichi .ktag{ background:transparent; border:none; color:var(--ink); font-weight:700; }
  .s10-screen .field input, .s10-screen .field select{ background:#fff; border-color:transparent; }
  .s10-screen .honmei-star{ background:#fff; border:none; box-shadow:0 3px 10px -8px rgba(0,0,0,.15); }
  .s10-screen .honmei-star .hs-lab{ color:rgba(0,0,0,.5); }
  .s10-screen .hoi-chip{ box-shadow:0 3px 10px -8px rgba(0,0,0,.12); }
  .s10-screen .hoi-chip--kichi{ background:#fff; border:none; color:#f89059; }
  .s10-screen .hoi-chip--kyo{ background:#fff; border:none; color:#c2551a; }

  /* --- S11 お悩み相談（v6: 淡桃×桃 #e66ba0） --- */
  .s11-screen{ background:#fae0eb; }
  .s11-screen .kicker{ color:rgba(0,0,0,.5); }
  .s11-screen .consult-state{ background:#faf7f6; border:none; border-radius:14px;
    box-shadow:0 3px 10px -8px rgba(0,0,0,.12); }
  .s11-screen .consult-state.available{ border-left:none; }
  .s11-screen .consult-state.available .st-main{ color:#e66ba0; }
  .s11-screen .btn-gold{ background:#e66ba0; border-radius:12px; }
  .s11-screen .btn-disabled{ background:#f4bdd5; color:#fff; border:none; border-radius:12px; }
  .s11-screen .btn-gold{ position:relative; }
  .s11-screen .btn-gold .ar{ position:absolute; right:16px; }

  /* --- S13 アカウント切替（v6: 淡青#d3dfef×青#91afd7） --- */
  .s13-screen{ background:#d3dfef; }
  .s13-screen .seg{ background:#fff; border:none; border-radius:12px; padding:5px;
    box-shadow:0 3px 10px -8px rgba(0,0,0,.15); }
  .s13-screen .seg button{ font-family:inherit; color:#a3a7af; letter-spacing:.12em; }
  .s13-screen .seg button.on{ background:#91afd7; color:#fff; box-shadow:none; }
  .s13-screen .acct-card{ background:#fff; border:1.5px solid #b9cbe4; color:var(--ink); }
  .s13-screen .acct-card .ac-role{ font-family:inherit; font-weight:700; color:#c8384a; }
  .s13-screen .acct-card .ac-name{ font-family:inherit; color:var(--ink); }
  .s13-screen .acct-card .ac-no{ color:#6b7280; }
  .s13-screen .acct-card .ac-meta{ border-top:none; }
  .s13-screen .acct-card .ac-meta div small{ color:#6b7280; }
  .s13-screen .acct-card .ac-meta div b{ font-family:inherit; color:var(--ink); }
  .s13-screen .btn-sumi{ background:#91afd7; color:#fff; border:none; border-radius:12px;
    letter-spacing:.14em; position:relative; }
  .s13-screen .btn-sumi .ar{ position:absolute; right:16px; }
  .s13-screen .corp-meta{ background:#fff; border:none; }
  .s13-screen .corp-note{ background:#fff; border:none; color:#7d3328; }
  .s13-screen .acct-note{ background:#fff; border:none; color:#4b5563; }

  /* --- 入会フロー（v6: 淡灰#f5f5f5×灰#6b7280×緑#8dc391） --- */
  .flow-screen{ background:#f5f5f5; }
  .flow-screen .confirm-list{ background:#fff; border:none; border-radius:14px;
    box-shadow:0 3px 10px -8px rgba(0,0,0,.12); }
  .flow-screen .confirm-row .cr-v{ font-family:inherit; color:var(--ink); }
  .flow-screen .info-strip{ background:#f2ebec; border:none; border-radius:12px; color:#8d909b; }
  .flow-screen .info-strip b{ color:#c8384a; display:block; margin-bottom:4px; }
  .flow-screen .btn-gold,.flow-screen .btn-sumi{ background:#6b7280; color:#fff; border:none;
    border-radius:12px; letter-spacing:.14em; position:relative; }
  .flow-screen .btn-gold .ar,.flow-screen .btn-sumi .ar{ position:absolute; right:16px; }
  .flow-screen .apply-card{ background:#fff; border:none; border-radius:14px;
    box-shadow:0 3px 10px -8px rgba(0,0,0,.12); }
  .flow-screen .apply-card .ac-no b{ font-family:inherit; color:var(--ink); }
  .flow-screen .flow-step .fs-n{ background:#fff; border:1.5px solid #d5d7db; color:#a3a7af; }
  .flow-screen .flow-step.done .fs-n{ background:#8dc391; border-color:#8dc391; color:#fff; }
  .flow-screen .flow-step.now .fs-n{ background:#fff; border-color:#8dc391; color:#8dc391; }
  .flow-screen .flow-step.now .fs-b b{ color:var(--ink); }
  .flow-screen .flow-step:not(:last-child)::before{ background:#e4e6e9; }
  .flow-screen .price{ color:var(--ink); }
  .flow-screen .am-k{ white-space:nowrap; }
  .flow-screen .amount-box{ background:#fff; border:none; border-radius:14px;
    box-shadow:0 3px 10px -8px rgba(0,0,0,.12); }
  .flow-screen .amount-box .am-v{ font-family:inherit; color:var(--ink); }
  .flow-screen .amount-box .am-row.total .am-v{ color:var(--ink); font-size:24px; }
  .flow-screen .secure-note{ background:#f7f7f6; border:none; border-radius:12px; }
  .flow-screen .secure-note .sn-mark{ font-family:inherit; color:#8d909b; }
  .flow-screen .flow-note{ color:#8d909b; line-height:1.9; }
  /* 完了A（署名グラデ全面） */
  .flowA-screen{ background:var(--bg-img) center/cover; }
  .flowA-hero{ text-align:center; padding:40px 10px 30px; }
  .flowA-hero .fa-crest{ width:150px; height:110px; }
  .flowA-hero h3{ font-size:17px; font-weight:800; color:#fff; letter-spacing:.08em;
    line-height:2; margin-top:60px; }
  .flowA-screen .btn-gold{ background:#fff; color:#6b7280; border:none; border-radius:12px;
    letter-spacing:.14em; position:relative; }
  .flowA-screen .btn-sumi{ background:transparent; color:#fff; border:1.5px solid #fff;
    border-radius:12px; letter-spacing:.14em; position:relative; }
  .flowA-screen .btn-gold .ar,.flowA-screen .btn-sumi .ar{ position:absolute; right:16px; }

  /* --- 夏催事（v6: 淡灰#f5f5f5×灰#6b7280×薄赤#f2ebec×薄ベージュ#faf7f6） --- */
  .natsu-screen{ background:#f5f5f5; }
  .natsu-screen .event-hero{ background:#faf7f6; border:none; box-shadow:none; }
  .natsu-screen .event-hero .eh-tag{ font-family:inherit; color:var(--ink); }
  .natsu-screen .event-hero h3{ font-family:inherit; color:var(--ink); }
  .natsu-screen .event-hero .eh-date{ font-family:inherit; color:var(--ink); font-weight:700; }
  .natsu-screen .ticket-type{ background:#fff; border:none; border-radius:12px;
    box-shadow:0 3px 10px -8px rgba(0,0,0,.12); }
  .natsu-screen .ticket-type .tt-body b{ font-family:inherit; }
  .natsu-screen .ticket-type .tt-price{ font-family:inherit; color:var(--ink); }
  .natsu-screen .ticket-type.onsite{ background:#f2ebec; }
  .natsu-screen .btn-gold,.natsu-screen .btn-sumi{ background:#6b7280; color:#fff; border:none;
    border-radius:12px; letter-spacing:.14em; }
  .natsu-screen .bulk-note{ background:#f2ebec; border:none; border-radius:12px; color:#8d909b; }
  .natsu-screen .bulk-note b{ color:var(--ink); display:block; margin-bottom:3px; }
  .natsu-screen .stepper{ border:none; gap:8px; overflow:visible; }
  .natsu-screen .stepper button{ background:#fff; border:1.5px solid #d5d7db; border-radius:50%; color:#6b7280; }
  .natsu-screen .stepper .qty{ font-family:inherit; }
  .natsu-screen .amount-box{ background:#fff; border:none; border-radius:14px;
    box-shadow:0 3px 10px -8px rgba(0,0,0,.12); }
  .natsu-screen .amount-box .am-v{ font-family:inherit; color:var(--ink); }
  .natsu-screen .amount-box .am-row.total .am-v{ color:var(--ink); font-size:24px; }
  .natsu-screen .field input, .natsu-screen .field select{ background:#fff; border-color:transparent; }
  .natsu-screen .ticket-stub{ background:#faf7f6; border:none; }
  .natsu-screen .ticket-stub .ts-name{ font-family:inherit; color:var(--ink); }
  .natsu-screen .ticket-stub .ts-meta{ color:#8d909b; }
  .natsu-screen .ticket-stub .ts-code{ border-top:2px dashed #e5d9d5; }
  .natsu-screen .ticket-stub .ts-code small{ color:#b0a596; }
  .natsu-screen .ticket-stub .ts-code b{ font-family:inherit; color:var(--ink); }
  .natsu-screen .cache-note{ background:#f6f6f5; border:none; border-radius:12px; color:#8d909b; }
  .natsu-screen .stores-note{ color:#8d909b; }

  /* --- 状態画面（v6: S2会員証ベース＋状態ボックス#f5f5f5×赤#c8384a） --- */
  .fs2-state{ background:#f5f5f5; border-radius:14px; padding:16px 20px; margin-top:16px; }
  .fs2-state .state-pill{ display:block; text-align:center; border:1.5px solid #c8384a; color:#c8384a;
    border-radius:10px; padding:9px; font-size:13.5px; font-weight:700; letter-spacing:.06em; margin-bottom:14px; }
  /* 状態別の配色: warn=休会中(琥珀) / alert=期限切れ・失効(赤=既定) / mute=手続き中(灰) */
  .fs2-state .state-pill.state-warn{ border-color:#b8860b; color:#8a6508; background:#fdf6e3; }
  .fs2-state .state-pill.state-mute{ border-color:#9e9e9e; color:#6f6f6f; background:#f0efec; }
  .fs2-state .state-pill.state-alert{ background:#fdf0f1; }
  .fs2-state .st-rows{ display:flex; }
  .fs2-state .st-rows > div{ flex:1; }
  .fs2-state small{ font-size:13px; color:rgba(0,0,0,.55); font-weight:500; }
  .fs2-state .st-rows b{ display:flex; align-items:center; gap:6px; margin-top:8px;
    font-weight:700; font-size:18px; color:#141414; }
  .fs2-state .st-rows b svg{ width:18px; height:18px; flex:0 0 18px; }
  .fs2-state .st-rows b.gray{ color:#9e9e9e; }
  .fs2-card .state-tag{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    background:#fff; border:1.5px solid #1a1714; color:#1a1714; padding:5px 20px;
    font-weight:700; font-size:14px; letter-spacing:.14em; z-index:3; white-space:nowrap; }
  .fs2-card .dimmer{ position:absolute; inset:0; background:rgba(30,28,26,.55); z-index:2; }
  .proc-card{ background:#fff; border:1.5px solid #c8384a; border-radius:14px; padding:20px; margin-top:16px; }
  .proc-card .pc-title{ text-align:center; color:#c8384a; font-weight:800; font-size:15px;
    letter-spacing:.08em; margin-bottom:12px; }
  .proc-card p{ font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.9; }
  .btn-red,.btn-gray{ display:flex; align-items:center; justify-content:center; width:100%;
    min-height:52px; color:#fff; border:none; border-radius:12px; font-weight:700; font-size:14.5px;
    letter-spacing:.14em; position:relative; cursor:pointer; font-family:inherit; }
  .btn-red{ background:#c8384a; margin-top:14px; }
  .btn-gray{ background:#6b7280; }
  .btn-red .ar,.btn-gray .ar{ position:absolute; right:16px; }

  .flow-screen .set-list{ background:#fff; border-radius:13px; }
  .flow-screen .danger-zone{ border:1.5px solid #e0b9be; }
  .flow-screen .danger-zone .set-row b{ color:var(--ink); }
  .flow-screen .set-row .sr-tx b{ font-family:inherit; }
  .flow-screen .set-row .sr-arr{ color:#a3a7af; }

  .flow-screen .switch{ background:#8dc391; }
  .flow-screen .switch.off{ background:#c8ccd2; border:none; }
  .flow-screen .switch.off i{ background:#5b6472; }
  .flow-screen .sg-title{ color:rgba(0,0,0,.55); }
  .flow-screen .modal-hint{ color:#8d909b; }

  /* --- 反映待ち（v6: 淡灰#f5f5f5×薄ベージュ#faf7f6×緑#3f8f4f） --- */
  .pend-screen{ background:#f5f5f5; }
  .pend-screen .kicker{ color:rgba(0,0,0,.5); }
  .pend-screen .pending-card{ background:#faf7f6; border:none; border-radius:16px; color:var(--ink); }
  .pend-screen .pending-card b{ font-family:inherit; color:var(--ink); }
  .pend-screen .pending-card p{ color:#8d909b; }
  .pend-screen .pending-card .dots i{ background:#1a1714; animation:none; }
  .pend-screen .pending-card .dots i:nth-child(2){ background:#ce7a81; }
  .pend-screen .pending-card .dots i:nth-child(3){ background:#e1aeb2; }
  .pend-screen .sync-strip{ background:#fff; border:none; border-radius:12px; }
  .pend-screen .sync-strip .ss-dot{ background:#3f8f4f; }
  .pend-screen .resv-row{ background:#fff; border:none; border-radius:12px;
    box-shadow:0 3px 10px -8px rgba(0,0,0,.12); }
  .pend-screen .resv-row .rr-body b{ font-family:inherit; color:var(--ink); }
  .pend-screen .pill-gold{ background:#fff; color:var(--ink); border:1px solid #d5d7db; }
  .pend-screen .pill-ok{ background:#e8f1e9; color:#3f8f4f; border:none; }

  /* --- 退会モーダル（v6: 白×薄赤#fbf2f3×赤#c8384a×灰ボタン#6b7280） --- */
  .modal-sheet{ background:#fff; }
  .modal-sheet h3{ font-family:inherit; color:var(--ink); }
  .modal-sheet .ms-warn{ background:#fbf2f3; border:1.5px solid #e0b9be; border-radius:14px; }
  .modal-sheet .ms-warn .mw-row{ color:#c8384a; }
  .modal-sheet .ms-warn .mw-row .mw-k{ color:#c8384a; font-family:inherit; }
  .modal-sheet{ border-top:none; }
  .flow-screen .set-row .sr-tx small{ color:#8d909b; }
  .modal-sheet .btn-danger{ background:#6b7280; color:#fff; border:none; border-radius:12px; letter-spacing:.14em; }
  .modal-sheet .btn-ghost{ background:#fff; color:var(--ink); border:1px solid #d5d7db; border-radius:12px; font-weight:700; letter-spacing:.14em; }
  .modal-sheet .btn-gold{ background:#6b7280; color:#fff; border:none; border-radius:12px; letter-spacing:.14em; }

  /* --- S6 オンライン授与所（v6: クリーム#fbf0d5×金バッジ#d4ad52） --- */
  .s6-screen{ background:#fbf0d5; }
  .s6-note{ font-size:12px; font-weight:700; color:var(--ink); text-align:center; margin-bottom:16px; line-height:1.8; }
  .s6-screen .ec-card{ background:#fff; border:none; border-radius:12px; overflow:hidden;
    box-shadow:0 3px 10px -8px rgba(0,0,0,.15); }
  .s6-screen .ec-thumb{ background:#f1efec; }
  .s6-screen .ec-noimg{ color:#b0a898; }
  .s6-badge{ display:inline-block; background:#d4ad52; color:#fff; font-size:11px; font-weight:700;
    padding:4px 12px; border-radius:999px; letter-spacing:.04em; }
  .s6-screen .ec-info b{ color:var(--ink); }
  .s6-screen .ec-info .price{ color:var(--ink); font-weight:700; }

  /* --- S8 限定情報（v6: 淡紫#e4d5e8×紫#bb96c5） --- */
  .s8-screen{ background:#e4d5e8; }
  .s8-screen .media-card,.s8-screen .letter-card{ background:#fff; border:none; border-radius:12px;
    box-shadow:0 3px 10px -8px rgba(0,0,0,.15); overflow:hidden; }
  .s8-screen .media-thumb{ background:#d5d5d5; border-radius:0; }
  .s8-screen .media-thumb .play{ background:#bb96c5; }
  .s8-screen .ribbon .pill{ background:#bb96c5; color:#fff; border:none; border-radius:999px; }
  .s8-screen .lc-meta{ color:var(--ink); font-weight:700; }
  .s8-screen .media-info b,.s8-screen .lc-body b{ color:var(--ink); }

  /* --- S9 会員コミュニティ（v6: 淡緑#b2d2b9×深緑#51815a） --- */
  .s9-screen{ background:#b2d2b9; }
  .s9-note{ font-size:12.5px; font-weight:700; color:var(--ink); text-align:center; line-height:2; margin-bottom:16px; }
  .s9-card{ background:#fff; border-radius:12px; padding:18px 16px; margin-bottom:16px;
    box-shadow:0 3px 10px -8px rgba(0,0,0,.15); }
  .s9-title{ display:block; font-family:var(--gothic); font-weight:700; font-size:15px; color:var(--ink); margin-bottom:10px; }
  .s9-list{ list-style:none; padding:0; margin:0; }
  .s9-list li{ position:relative; padding-left:14px; font-size:12px; line-height:1.9; color:rgba(0,0,0,.65); margin-bottom:4px; }
  .s9-list li::before{ content:"・"; position:absolute; left:0; }
  .s9-warn{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#d0342c; margin-bottom:10px; }
  .s9-warn .wm{ flex:none; width:18px; height:18px; border-radius:50%; border:2px solid #d0342c;
    display:flex; align-items:center; justify-content:center; font-size:12px; }
  .s9-body{ font-size:12px; line-height:1.9; color:rgba(0,0,0,.65); }
  .s9-oc{ text-align:center; }
  .s9-lead{ font-size:12px; line-height:1.9; color:rgba(0,0,0,.45); margin:8px 0 12px; }
  .s9-keyword{ font-family:var(--gothic); font-weight:700; font-size:26px; color:#51815a; letter-spacing:.14em; margin-bottom:16px; }
  .s9-btn{ position:relative; display:flex; align-items:center; justify-content:center; width:100%;
    min-height:50px; background:#51815a; border:none; border-radius:999px;
    font-family:var(--gothic); font-weight:700; font-size:14px; color:#fff; letter-spacing:.14em; cursor:pointer; }
  .s9-btn:active{ filter:brightness(.94); }
  .s9-btn .ar{ position:absolute; right:20px; }

  /* --- S8-記事 お便り詳細（v6: S8の淡紫パレットを継承） --- */
  .s8-article .article-hero{ background:#fff; border-radius:12px; padding:18px 16px;
    margin:0 0 16px; box-shadow:0 3px 10px -8px rgba(0,0,0,.15); }
  .s8-article .article-hero .ah-meta{ color:#9b6fae; font-weight:700; }
  .s8-article .article-hero h1{ color:var(--ink); }
  .s8-article .article-img{ background:#d5d5d5; border:none; border-radius:12px; margin-bottom:16px; }
  .s8-article .ec-noimg{ color:#9b6fae; }
  .s8-article .ec-noimg::before{ border-color:#bb96c5;
    background:linear-gradient(135deg,transparent 46%,#bb96c5 46% 54%,transparent 54%); }
  .s8-article .article-body{ background:#fff; border-radius:12px; padding:18px 16px; margin:0 0 16px;
    box-shadow:0 3px 10px -8px rgba(0,0,0,.15); }
  .s8-article .article-body h3{ color:#9b6fae; }
  .s8-article .article-body p{ color:rgba(0,0,0,.65); }
  .s8-article .article-share{ background:#bb96c5; color:#fff; border:none; border-radius:999px;
    margin-top:0; font-weight:700; text-align:center; cursor:pointer; }

  /* --- S12 各種設定（v6: 緑トグル） --- */
  .switch{ background:var(--ui-green); }
  .switch.off{ background:#c3c8cf; border:none; }

  /* --- S1 入会フォーム（v6: 署名グラデヒーロー＋説明会注記） --- */
  .s1-hero{ position:relative; background:var(--bg-img) center/cover; text-align:center; padding:34px 20px 22px; }
  .s1-hero .s1-crest{ width:120px; height:88px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.12)); }
  .s1-hero .t{ margin-top:6px; font-family:var(--gothic); font-weight:700; font-size:18px; color:#fff;
    letter-spacing:.3em; text-shadow:0 1px 6px rgba(0,0,0,.22); }
  .s1-pad{ padding-top:18px; }
  .setsumei-note{ display:block; margin-top:8px; font-size:11.5px; font-weight:700; color:var(--shu); }

  /* --- リッチメニュー（v6: 署名グラデ地＋白丸角タイル＋カラーアイコン） --- */
  /* サイズはコンテナ幅比例（cqw）: 実機390px幅時の Figma 比率を保ったままPCプレビューでも拡大 */
  .rm-v6{ aspect-ratio:2500/1686; border:none; background:var(--bg-img) center/cover; gap:2.6cqw; padding:3cqw;
    display:grid; grid-template-rows:1fr 1fr; box-shadow:0 24px 50px -30px rgba(0,0,0,.4); }
  .rm-guest{ grid-template-columns:1fr 1fr 1.15fr; }
  .rm-member{ grid-template-columns:1fr 1fr 1fr; }
  .rm-tile{ background:rgba(255,255,255,.94); border-radius:3.6cqw; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2.2cqw; padding:2cqw; text-align:center; cursor:pointer; }
  .rm-tile b{ font-size:3.3cqw; font-weight:700; color:#141414; line-height:1.35; letter-spacing:.02em; }
  .rm-tile svg{ height:8cqw; width:auto; }
  .rm-tile .mp-ic{ height:9.5cqw; width:auto; }
  .rm-join{ grid-column:3; grid-row:1 / span 2; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:2.8cqw; text-align:center; cursor:pointer; color:#fff; }
  .rm-join .rm-crest{ width:22cqw; height:16cqw; filter:drop-shadow(0 2px 6px rgba(0,0,0,.15)); }
  .rm-join b{ font-size:4cqw; font-weight:700; line-height:1.5; letter-spacing:.06em; text-shadow:0 1px 5px rgba(0,0,0,.2); }
  .rm-join .ar{ font-size:4.6cqw; font-weight:700; }
  .rm-tile:hover,.rm-join:hover{ filter:brightness(1.04); }

  /* --- S3 マイページ（v6: 種別カラーヒーロー＋ご縁リング＋アイコングリッド） --- */
  .s3-hero{ background:var(--rank); color:#fff; text-align:center; padding:24px 20px 96px; }
  .s3-hero .s3-rank{ font-family:var(--gothic); font-weight:700; font-size:22px; letter-spacing:.12em; }
  .s3-hero .s3-nm{ margin-top:10px; font-size:14px; }
  .s3-hero .s3-nm b{ font-size:18px; font-weight:700; letter-spacing:.06em; }
  .s3-hero .s3-nm .no{ font-family:"Open Sans",var(--gothic); font-size:12.5px; color:rgba(255,255,255,.85); margin-left:4px; }
  .s3-hero .s3-open{ display:inline-block; margin-top:10px; font-size:13px; font-weight:700; color:#fff; cursor:pointer; }
  .s3-ring-wrap{ display:flex; justify-content:center; margin-top:-78px; margin-bottom:10px; }
  .s3-ring{ position:relative; width:172px; height:172px; border-radius:50%; padding:7px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    background:conic-gradient(from 210deg,#f2c94c,#a8d08d,#7fb069,#f2994a,#e8896b,#f2c94c);
    box-shadow:0 10px 26px -14px rgba(0,0,0,.35); }
  .s3-ring::after{ content:""; position:absolute; inset:7px; background:#fff; border-radius:50%; z-index:0; }
  .s3-ring > *{ position:relative; z-index:1; }
  .s3-ring small{ font-size:11.5px; color:var(--ink); font-weight:500; }
  .s3-ring b{ font-family:var(--gothic); font-weight:700; font-size:24px; color:var(--ink); margin-top:2px; }
  .s3-ring b span{ font-size:18px; }
  .s3-ring b i{ font-style:normal; font-size:13px; margin-left:2px; }
  .s3-ring .tk{ font-size:11.5px; font-weight:700; color:var(--ink); margin-top:2px; }
  .s3-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .s3-item{ background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:14px; min-height:96px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    box-shadow:0 4px 14px -10px rgba(0,0,0,.18); cursor:pointer; }
  .s3-item.s3-locked{ opacity:.45; filter:grayscale(1); cursor:not-allowed; box-shadow:none; position:relative; pointer-events:none; }
  .s3-item.s3-locked::after{ content:attr(data-lock); font-size:10px; color:#6f6f6f; letter-spacing:.06em; margin-top:-4px; }
  .fs2-btn.fs2-btn-locked{ opacity:.5; filter:grayscale(1); cursor:not-allowed; pointer-events:none; }
  .s3-item .ic{ display:flex; align-items:center; gap:2px; height:32px; }
  .s3-item .ic svg{ height:30px; width:auto; display:block; }
  .s3-item b{ font-family:var(--gothic); font-weight:700; font-size:13.5px; color:var(--ink); letter-spacing:.04em; }


/* ================================================================
   実装ページ層（05_コーディング）: ギャラリー用 .device 枠を外し、
   1画面=1ページとしてスマホ全画面で表示するためのオーバーライド。
   ================================================================ */
body.liff{ display:block; padding:0; margin:0; background:#ececeb; }
body.liff .liff-app{ position:relative; max-width:430px; margin:0 auto;
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  background:var(--kinari); overflow:clip; }
body.liff .line-header{ position:sticky; top:0; z-index:20; flex:0 0 52px; }
/* LINEアプリ内表示: ネイティブヘッダーと重複するため line-header を隠す
   （各 base.html の UA 判定スクリプトが html 要素に付与。PC等の外部ブラウザでは表示） */
.in-liff-client .line-header{ display:none; }
body.liff .screen{ position:relative; inset:auto; top:auto; flex:1; overflow:visible;
  display:flex; flex-direction:column; }
body.liff .screen > *{ flex:0 0 auto; }
body.liff .screen > .fs0,
body.liff .screen > .screen,
body.liff .screen > .line-bg{ flex:1 0 auto; }   /* S0b・LINE通知・入れ子screen: 全面背景を画面下端まで */
body.liff .screen > .screen{ display:flex; flex-direction:column; }
body.liff .screen > .screen > .pad{ flex:1 0 auto; }
body.liff .modal-overlay{ position:fixed; z-index:50; }
body.liff .video-modal{ position:fixed; z-index:60; }
body.liff .toast{ position:fixed; z-index:70; }
body.liff .richmenu-row{ margin:40px auto; }

  /* ギャラリー矢印ナビ（PCでも2枚目以降に到達できるように） */
  .s7-gallery-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:32px; height:32px; border:none; border-radius:50%; cursor:pointer;
    background:rgba(20,20,20,.45); color:#fff; font-size:20px; line-height:1;
    display:flex; align-items:center; justify-content:center; }
  .s7-gallery-nav.prev{ left:8px; }
  .s7-gallery-nav.next{ right:8px; }
  .s7-gallery-nav:active{ background:rgba(20,20,20,.65); }
  .s7-dot{ cursor:pointer; }

  /* 画像の拡大表示（ライトボックス） */
  .img-lightbox{ position:fixed; inset:0; z-index:100; background:rgba(10,8,6,.92);
    display:none; align-items:center; justify-content:center; padding:16px; }
  .img-lightbox.show{ display:flex; }
  .img-lightbox img{ max-width:100%; max-height:92vh; object-fit:contain;
    border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
  .img-lightbox .lb-close{ position:absolute; top:14px; right:16px; width:36px; height:36px;
    border:none; border-radius:50%; background:rgba(255,255,255,.15); color:#fff;
    font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; }

  .img-lightbox .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:40px; height:40px; border:none; border-radius:50%; background:rgba(255,255,255,.15);
    color:#fff; font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .img-lightbox .lb-nav.prev{ left:10px; }
  .img-lightbox .lb-nav.next{ right:10px; }
  .img-lightbox .lb-counter{ position:absolute; bottom:16px; left:0; right:0; text-align:center;
    color:rgba(255,255,255,.85); font-size:12px; letter-spacing:.1em; }

  /* ---------------------------------------------------------------------
     0903 実機不具合修正: .type-opt 内の文字あふれ対策（会員種別の変更）
     --------------------------------------------------------------------- */
  .type-opt .ti{ flex:1; min-width:0; }
  .type-opt .ti p,
  .type-opt .ti .flow-tag{ overflow-wrap:anywhere; }

  /* ---------------------------------------------------------------------
     0903 実機不具合修正: 休会・退会（ボトムシート .modal-sheet 由来の構造を
     ページ直下で使う専用スコープ .ms-page）。
     見た目は v6 上書き層（.modal-sheet 系: 1276行付近）に合わせ、
     base 層（740行付近の朱・明朝の h3）はコピーしない。
     既存の .modal-sheet（ダウングレード確認モーダル等）には影響しない。
     --------------------------------------------------------------------- */
  .ms-page h3{ font-family:inherit; font-weight:800; font-size:19px;
    color:var(--ink); letter-spacing:.04em; text-align:center; }
  .ms-page .ms-lead{ font-size:12.5px; color:var(--sumi); line-height:1.9;
    margin:12px 0 16px; text-align:center; }
  .ms-page .ms-warn{ background:#fbf2f3; border:1.5px solid #e0b9be; border-radius:14px;
    padding:14px 15px; margin-bottom:18px; }
  .ms-page .ms-warn .mw-row{ display:flex; gap:10px; align-items:flex-start;
    font-size:12px; color:#c8384a; line-height:1.7; margin-bottom:9px; }
  .ms-page .ms-warn .mw-row:last-child{ margin-bottom:0; }
  .ms-page .ms-warn .mw-row .mw-k{ color:#c8384a; font-family:inherit; font-weight:700; flex:0 0 auto; }
  .ms-page .ms-warn + p{ margin-top:0; margin-bottom:16px; font-size:11.5px;
    color:var(--muted); line-height:1.8; text-align:center; }
  .ms-page .btn-danger{ background:#6b7280; color:#fff; border:none; border-radius:12px; letter-spacing:.14em; }
  .ms-page .btn-ghost{ background:#fff; color:var(--ink); border:1px solid #d5d7db; border-radius:12px;
    font-weight:700; letter-spacing:.14em; }
  .ms-page .btn-gold{ background:#6b7280; color:#fff; border:none; border-radius:12px; letter-spacing:.14em; }