/* Oshi Yorisoi — サイト共通の見た目（2026-10-14 方針版）。
   ベースは公開中の oshiyori.com の質感：生成り（Paper）・墨（Ink）・ボルドー（Bordeaux）・明朝の見出し・写真・余白。
   高級感60・使いやすさ30・遊び心10。ゲームらしさはマイページのレベル・経験値・枠だけ（青紫・ホログラムは使わない。金色は金の称号だけ）。
   部品の名前は前の試作（os.css）と同じなので、ページ側の id・class・JS はそのまま動く：
   - .w 区切り（.tb は前の版の窓の帯。この版では出さない）＋ .bd 中身 ／ .btn・.btn.hot ボタン
   - .os-bar / .os-tabs ヘッダーとタブ4つ（スマホは画面の下）。lux.js が差し込む
   - マイページの部品：.lvb（レベル）・.exp（経験値）・.slot と .rar-0〜5（香水レベルの枠）・.tier・.tchip（称号）
   スマホ優先。本文はスマホで16px。押せるものは44px以上。 */
@import url("https://fonts.googleapis.com/css2?family=DM+Mono&family=Instrument+Serif:ital@0;1&family=Shippori+Mincho+B1:wght@500;600&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");
:root {
  /* ---- 色（公開中のサイトと同じ） ---- */
  --paper: #EEE9E3;   /* 地 */
  --paper2: #F6F2EC;  /* 少し明るい面（カード・入力欄の地） */
  --shade: #E5DED6;   /* 少し沈んだ面 */
  --ink: #1C1517;     /* 文字 */
  --stone: #6B605C;   /* 補足の文字（地の上で約5:1） */
  --bx: #5A1424;      /* ボルドー：行動のボタン・本人公認・選択中 */
  --bx2: #74202F;
  --line: #D3CAC1; --line2: #BCB0A5;
  /* ---- 文字 ---- */
  --display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --jp: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --en: "Instrument Serif", "Times New Roman", serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;
  /* ---- 前の版のトークン名（ページ固有のCSSが使っている）をこの版の色に ---- */
  --ivory: var(--paper); --ivory2: var(--paper2); --pearl: var(--paper); --pearl2: var(--paper2); --pearl3: var(--shade); --soft: var(--shade); --mist: var(--shade);
  --navy: var(--ink); --night: var(--ink); --night2: var(--bx); --frame: var(--ink); --frame2: var(--line);
  --mute: var(--stone); --dmute: var(--stone);
  --gold: var(--bx); --gold-ink: var(--bx); --gold-hi: #EFE4D6; --deep: var(--bx); --lav-ink: var(--bx); --pink-ink: var(--bx); --hot: var(--bx); --cyan-ink: var(--bx); --rose-ink: var(--bx); --glow: var(--bx);
  --cyan: var(--line2); --pink: var(--bx); --lav: var(--line2); --rose: var(--shade); --lilac: var(--line2); --cool: var(--line2);
  --holo: linear-gradient(90deg, var(--bx), var(--bx2)); --iri: var(--holo); --sheen: var(--holo); --goldline: linear-gradient(90deg, var(--line), var(--line));
  --glass: rgba(246,242,236,.92); --glass2: var(--paper2); --solid: var(--paper2); --win: var(--paper2); --winfg: var(--ink); --t1: var(--ink); --t2: var(--bx);
  --wall1: var(--paper2); --wall2: var(--paper); --dline: var(--line); --dpanel: var(--paper2); --dfg: var(--ink);
  --logo: var(--en); --game: var(--jp); --dot: var(--jp); --ui: var(--mono);
  --pop: none;
  --bar-h: 60px; --tab-h: 0px;
  --ease: cubic-bezier(.22, .61, .21, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body.os { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); font-family: var(--jp); font-size: 16px; line-height: 1.9; letter-spacing: .03em; overflow-x: clip; }
.os h1, .os h2, .os h3, .os h4, .os p, .os figure, .os dl, .os dd { margin: 0; }
.os a { color: inherit; }
.os button { font: inherit; color: inherit; }
.os img { display: block; max-width: 100%; height: auto; }
.os :focus-visible { outline: 2px solid var(--bx); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nb { display: inline-block; }

/* ---------- 区切り（前の版の「窓」） ---------- */
.w { position: relative; min-width: 0; display: flex; flex-direction: column; background: none; border-top: 1px solid var(--line); }
.w.flow { position: relative; }
/* カードにする場所：フォームのある区切り・お店のページ・マイページ */
.w.card, .w.solid, .w:has(form), .os.shop .w { background: var(--paper2); border: 1px solid var(--line); border-radius: 4px; }
.w.dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tb { display: none; }
.w .bd { padding: 40px 0 8px; min-width: 0; font-size: 16px; line-height: 1.9; }
.w.card .bd, .w.solid .bd, .w:has(form) .bd, .os.shop .w .bd { padding: 28px 24px; }
.w h1, .w h2.h, .w h3.h, .h1, .h2 { font-family: var(--display); font-weight: 500; line-height: 1.5; letter-spacing: .06em; text-wrap: balance; }
.w h1, .h1 { font-size: clamp(26px, 6.6vw, 40px); margin: 8px 0 12px; }
.w h2.h, .h2 { font-size: clamp(23px, 5.8vw, 32px); margin: 6px 0 14px; }
.w h3.h { font-size: 20px; margin: 2px 0 8px; }
.w h4 { font-family: var(--display); font-weight: 500; font-size: 17px; margin: 18px 0 6px; }
/* 小さな英字のラベル（公開中のサイトの .lbl） */
.tag, .lbl-m { display: inline-block; font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--stone); letter-spacing: .2em; text-transform: uppercase; line-height: 1.6; background: none; padding: 0; border-radius: 0; }
.w.dark .tag { color: #CFC6BE; }
.sub { color: var(--stone); font-size: 15px; }
.w.dark .sub, .w.dark .note { color: #CFC6BE; }
.note { font-size: 14px; color: var(--stone); line-height: 1.8; }
.row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.en-i { font-family: var(--en); font-style: italic; letter-spacing: .01em; }

/* ---------- ボタン ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 10px 26px; border-radius: 2px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-family: var(--jp); font-size: 15px; font-weight: 500; letter-spacing: .1em; cursor: pointer; text-decoration: none; line-height: 1.4; text-align: center;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.os button.btn { font-family: var(--jp); font-weight: 500; color: var(--ink); }
.btn:hover { background: var(--ink); color: var(--paper); }
.os button.btn:hover { color: var(--paper); }
.btn.hot, .os button.btn.hot { background: var(--bx); border-color: var(--bx); color: #F6F2EC; }
.btn.hot:hover, .os button.btn.hot:hover { background: var(--bx2); border-color: var(--bx2); color: #fff; }
.btn.hot::after { content: "→"; font-family: var(--en); font-size: 1.15em; line-height: 1; transition: transform .4s var(--ease); }
.btn.hot:hover::after { transform: translateX(3px); }
.btn.nx::after { display: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.btn[disabled]:hover { background: transparent; color: var(--ink); }
.btn.hot[disabled]:hover { background: var(--bx); color: #F6F2EC; }
/* 矢印つきの文字リンク（公開中のサイトの .tl） */
.lk, a.tl-a { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; font-size: 15px; letter-spacing: .08em; color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; padding: 6px 0 2px; }
.steps { padding-left: 1.4em; display: grid; gap: 8px; margin: 0; }
.steps li::marker { font-family: var(--en); color: var(--bx); }
.prog { height: 4px; border-radius: 0; background: var(--line); overflow: hidden; border: 0; }
.prog i { display: block; height: 100%; width: 0; background: var(--bx); transition: width .6s var(--ease); }
.shot { width: 100%; border-radius: 2px; background: var(--shade); object-fit: cover; }
.legal { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--stone); }
.legal a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.legal a:hover { color: var(--ink); text-decoration: underline; }

/* 入力欄 */
.w input[type=text], .w input[type=email], .w input[type=password], .w input[type=tel], .w input[type=number], .w input[type=url], .w select, .w textarea,
.lx-in {
  font: inherit; font-size: 16px; width: 100%; min-height: 50px; padding: 10px 14px; border: 1px solid var(--line2); border-radius: 2px; background: #FBF9F6; color: var(--ink); }
.w textarea { min-height: 100px; }
.w input:focus, .w select:focus, .w textarea:focus, .lx-in:focus { outline: none; border-color: var(--bx); box-shadow: 0 0 0 3px rgba(90,20,36,.12); }
input[type=checkbox], input[type=radio] { accent-color: var(--bx); }

/* ---------- 並べ方 ---------- */
.os-stack { width: min(1080px, 100%); margin: 0 auto; padding: calc(var(--bar-h) + 28px + env(safe-area-inset-top, 0px)) 20px calc(56px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 56px; }
.os-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 28px; align-items: start; }
.os-wide { width: min(780px, 100%); margin-inline: auto; }
.os-crumb { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--stone); display: flex; gap: 8px; flex-wrap: wrap; }
.os-crumb a { text-decoration: none; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
.os.focus .os-stack { width: min(880px, 100%); }
.os.shop .w .bd { font-size: 16px; }

/* 六角形チャート（香りの印象） */
.hex { position: relative; width: min(100%, 320px); margin-inline: auto; }
.hex svg { width: 100%; height: auto; overflow: visible; display: block; }
.hex .ax { font-family: var(--jp); font-weight: 500; font-size: 12px; fill: var(--ink); }
.hex .av { font-family: var(--mono); font-size: 12px; fill: var(--bx); }
.hex-note { font-size: 13px; color: var(--stone); text-align: center; margin-top: 6px; line-height: 1.7; }

/* お知らせ（操作の結果など。静かなカード） */
.toast { position: fixed; right: 20px; bottom: calc(var(--tab-h) + 20px + env(safe-area-inset-bottom, 0px)); width: min(360px, calc(100vw - 32px)); background: var(--paper2); border: 1px solid var(--line); border-left: 2px solid var(--bx); border-radius: 2px; padding: 12px 16px 14px; display: grid; gap: 2px; z-index: 60;
  box-shadow: 0 18px 40px rgba(28,21,23,.14); animation: lx-up .5s var(--ease); cursor: pointer; text-align: left; color: var(--ink); font: inherit; text-decoration: none; }
.toast .from { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--bx); }
.toast p { font-size: 15px; line-height: 1.7; margin: 0; }
@keyframes lx-up { from { transform: translateY(10px); opacity: 0; } }

/* ---------- ヘッダー（lux.js が差し込む。2026-10-20 Apple型：左にロゴ、右に 検索・バッグ・≡） ---------- */
.os-bar { position: fixed; left: 0; right: 0; top: 0; height: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0 20px; z-index: 70;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; background: rgba(238,233,227,.93); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); color: var(--ink); border-bottom: 1px solid transparent; transition: border-color .4s var(--ease), background-color .4s var(--ease); }
.os-bar.scrolled, body.solid-bar .os-bar { border-bottom-color: var(--line); }
body.over-hero .os-bar:not(.scrolled) { background: transparent; color: #F6F2EC; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.over-hero .os-bar:not(.scrolled) .logo small { color: rgba(246,242,236,.8); }
.os-bar .logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 44px; justify-content: center; text-decoration: none; color: inherit; font-family: var(--en); font-size: 21px; line-height: 1; white-space: nowrap; }
.os-bar .logo img { display: block; height: 34px; width: auto; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 1px 2px rgba(28,21,23,.18); }
/* 2026-10-21 OSYR：ロゴはボルドー地のゼリー文字の画像（背景ごと切り出した札）。文字だけを抜くとゼリーの透け感が壊れるので抜かない */
.os-bar .logo small { font-family: var(--mono); font-size: 9px; letter-spacing: .36em; text-transform: uppercase; color: var(--stone); }
.os-bar .tray { display: flex; align-items: center; gap: 2px; }
.os-bar .ibtn, .os-bar .mbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 50%; transition: background-color .3s var(--ease); }
.os-bar .ibtn:hover, .os-bar .mbtn:hover { background: rgba(28,21,23,.06); }
.os-bar .ibtn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.os-bar .mbtn i { width: 20px; height: 8px; flex: none; border-top: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; }
.os-bar .smp-tag, .os-smp { font-family: var(--jp); font-weight: 500; font-size: 12px; letter-spacing: .12em; color: var(--bx); border: 1px solid var(--bx); border-radius: 2px; padding: 0 8px; white-space: nowrap; background: var(--paper2); margin-right: 6px; }
.os-tabs { display: none; }
/* 検索（上から下りる） */
.os-search { position: fixed; left: 0; right: 0; top: 0; z-index: 91; background: var(--paper); color: var(--ink); padding: calc(env(safe-area-inset-top, 0px) + 12px) 20px 28px; box-shadow: 0 30px 60px rgba(28,21,23,.16); animation: lx-down .45s var(--ease); max-height: 100svh; overflow: auto; }
.os-search .sw { width: min(680px, 100%); margin: 0 auto; }
.os-search form { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line2); }
.os-search form svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--stone); stroke-width: 1.4; stroke-linecap: round; }
.os-search input { flex: 1; min-width: 0; min-height: 56px; border: 0; background: none; font: inherit; font-size: 20px; color: var(--ink); outline: none; }
.os-search input::-webkit-search-cancel-button { display: none; }
.os-search .sclose { min-height: 44px; border: 0; background: none; font-size: 14px; color: var(--stone); cursor: pointer; white-space: nowrap; }
.os-search .sh { margin: 22px 0 6px; font-size: 13px; color: var(--stone); letter-spacing: .06em; }
.os-search .sres { list-style: none; margin: 0; padding: 0; }
.os-search .sres a { display: flex; align-items: center; min-height: 52px; padding: 8px 0; text-decoration: none; color: var(--ink); font-size: 16px; }
.os-search .sres a::before { content: "→"; font-family: var(--en); color: var(--stone); margin-right: 12px; }
.os-search .sres a:hover { color: var(--bx); }
.os-search .sres small { display: block; font-size: 13px; color: var(--stone); line-height: 1.5; }
.os-scrim.s { z-index: 89; }
@keyframes lx-down { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
.os-search[hidden], .os-scrim[hidden] { display: none; }

/* ---------- MENU（全ページの一覧） ---------- */
.os-scrim { position: fixed; inset: 0; z-index: 88; background: rgba(28,21,23,.32); animation: lx-fade .4s var(--ease); }
.os-menu { position: fixed; right: 0; top: 0; bottom: 0; width: min(440px, 100vw); z-index: 90; overflow: auto; overscroll-behavior: contain; background: var(--paper); color: var(--ink);
  padding: env(safe-area-inset-top, 0px) 24px calc(env(safe-area-inset-bottom, 0px) + 32px); animation: lx-slide .5s var(--ease); box-shadow: -24px 0 60px rgba(28,21,23,.16); }
@keyframes lx-fade { from { opacity: 0; } }
@keyframes lx-slide { from { transform: translateX(24px); opacity: 0; } }
.os-menu .mh { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: var(--bar-h); }
.os-menu .mh b { font-family: var(--en); font-weight: 400; font-size: 21px; }
.os-menu .mx { min-width: 44px; min-height: 44px; border: 0; background: none; cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: .24em; color: var(--ink); padding: 0; }
.os-menu h2 { margin: 30px 0 4px; font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .24em; color: var(--stone); }
.os-menu h2 span { margin-left: 10px; font-family: var(--jp); letter-spacing: .08em; }
.os-menu ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.os-menu li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 2px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
  font-family: var(--display); font-size: 18px; letter-spacing: .06em; line-height: 1.5; }
.os-menu li a::after { content: "→"; font-family: var(--en); font-size: 18px; color: var(--stone); transition: transform .4s var(--ease); }
.os-menu li a:hover::after { transform: translateX(4px); color: var(--bx); }
.os-menu li a small { display: block; font-family: var(--jp); font-size: 13px; letter-spacing: .04em; color: var(--stone); line-height: 1.6; }
.os-menu li a[aria-current="page"] { color: var(--bx); }
.os-menu li.go a { color: var(--bx); }
.os-menu .mf { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 28px; }
.os-menu .mf a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.os-menu .mf a:hover { color: var(--bx); }
html.os-lock, html.os-lock body { overflow: hidden; }

/* ---------- ページの最後：次の一歩と法務リンク ---------- */
.os-foot { width: min(1080px, 100%); margin: 0 auto; padding: 24px 20px calc(40px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 28px; }
.os-next { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 56px 20px; background: var(--ink); color: var(--paper); border-radius: 2px; }
.os-next p.q { font-family: var(--display); font-weight: 500; font-size: clamp(22px, 5.6vw, 30px); line-height: 1.6; letter-spacing: .08em; }
.os-next .sub { color: #CFC6BE; font-size: 14px; }
.os-next .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; width: 100%; }
.os-next .acts .btn { min-height: 54px; padding-inline: 30px; border-color: var(--paper); color: var(--paper); }
.os-next .acts .btn:hover { background: var(--paper); color: var(--ink); }
.os-next .acts .btn.hot { background: var(--bx); border-color: var(--bx); color: #F6F2EC; }
.os-next .acts .btn.hot:hover { background: var(--bx2); color: #fff; }
.os-st { text-align: center; font-size: 13px; color: var(--stone); line-height: 1.8; }
.os-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; font-size: 13px; color: var(--stone); }
.os-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 2px; color: var(--stone); text-decoration: none; }
.os-links a:hover { color: var(--ink); text-decoration: underline; }
.os-copy { text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--stone); margin-top: -10px; }

/* ---------- マイページの部品（控えめなゲームらしさ） ---------- */
.gw-h { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .22em; color: var(--stone); text-transform: uppercase; margin: 6px 0 2px; }
.gw-h::before, .gw-h::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.gw-h.l::before { display: none; }
.newb { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--bx); border: 1px solid var(--bx); border-radius: 2px; padding: 0 6px; line-height: 1.6; vertical-align: 2px; }
/* レベル：ボルドーの印章 */
.lvb { flex: none; display: inline-grid; place-items: center; align-content: center; width: 84px; height: 84px; border-radius: 50%; color: #F6F2EC; line-height: 1;
  background: radial-gradient(circle at 35% 30%, #7A2738, var(--bx) 60%, #44101C); box-shadow: inset 0 0 0 4px var(--bx), inset 0 0 0 5px rgba(246,242,236,.55), 0 10px 24px rgba(90,20,36,.22); }
.lvb small { font-family: var(--mono); font-size: 11px; letter-spacing: .24em; color: rgba(246,242,236,.8); padding-left: .24em; }
.lvb b { font-family: var(--display); font-weight: 500; font-size: 34px; margin-top: 4px; }
/* 経験値 */
.exp { display: grid; gap: 6px; min-width: 0; }
.exp .bar { height: 10px; border-radius: 10px; background: var(--shade); overflow: hidden; position: relative; box-shadow: inset 0 0 0 1px var(--line); }
.exp .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 10px; background: linear-gradient(90deg, #7A2738, var(--bx)); }
.exp .num { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--stone); }
.exp .num b { color: var(--ink); font-weight: 500; font-family: var(--mono); }
/* 香水レベルの枠（0：まだない／1〜5）。上がるほど線が増える。派手にはしない */
.slot { position: relative; border-radius: 4px; background: var(--paper2); border: 1px solid var(--rc, var(--line)); box-shadow: inset 0 0 0 var(--rw, 0px) var(--paper2), inset 0 0 0 calc(var(--rw, 0px) + 1px) var(--rc3, transparent); }
.rar-0 { --rc: var(--line); }
.rar-1 { --rc: var(--line2); }
.rar-2 { --rc: var(--ink); }
.rar-3 { --rc: var(--bx); }
.rar-4 { --rc: var(--bx); --rw: 4px; --rc3: rgba(90,20,36,.5); }
.rar-5 { --rc: var(--bx); --rw: 4px; --rc3: var(--bx); box-shadow: inset 0 0 0 4px var(--paper2), inset 0 0 0 5px var(--bx), 0 12px 30px rgba(90,20,36,.16); }
.tier { display: inline-grid; place-items: center; min-width: 34px; height: 22px; padding: 0 7px; border-radius: 2px; border: 1px solid var(--rc, var(--ink)); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink); line-height: 1; background: var(--paper2); }
.tier.t3, .tier.t4, .tier.t5 { color: var(--bx); border-color: var(--bx); }
.tier.t5 { background: var(--bx); color: #F6F2EC; }
.rar-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--stone); }
.stars { display: inline-flex; gap: 3px; }
.stars i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--bx); background: transparent; }
.stars i.on { background: var(--bx); }
/* やること（クエスト）：落ち着いた手順表示 */
.quests { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: q; border-top: 1px solid var(--line); }
.quests li { counter-increment: q; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.quests li::before { content: counter(q, decimal-leading-zero); font-family: var(--en); font-size: 20px; color: var(--stone); }
.quests li.done::before { content: "✓"; font-family: var(--jp); color: var(--bx); }
.quests li.now::before { color: var(--bx); }
.quests b { font-weight: 500; font-size: 16px; line-height: 1.5; }
.quests small { display: block; font-size: 13px; color: var(--stone); line-height: 1.7; }
.quests .st { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--stone); white-space: nowrap; }
.quests li.done .st, .quests li.now .st { color: var(--bx); }
.quests a.go { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 2px; text-decoration: none; font-size: 14px; letter-spacing: .08em; color: #F6F2EC; background: var(--bx); white-space: nowrap; }
/* 演出：静かな輪と、真ん中に出る短い言葉（lux.js の OS.sparkle / OS.burst） */
.gw-ring { position: fixed; z-index: 119; pointer-events: none; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 1px solid var(--bx); animation: lx-ring 1.1s var(--ease) forwards; }
@keyframes lx-ring { from { transform: scale(.5); opacity: .9; } to { transform: scale(4); opacity: 0; } }
.gw-burst { position: fixed; inset: 0; z-index: 118; display: grid; place-items: center; pointer-events: none; }
.gw-burst b { font-family: var(--en); font-style: italic; font-weight: 400; font-size: clamp(40px, 10vw, 76px); color: var(--bx); letter-spacing: .02em; text-shadow: 0 0 30px var(--paper), 0 0 2px var(--paper); animation: lx-burst 1.8s var(--ease) forwards; }
@keyframes lx-burst { 0% { transform: translateY(8px); opacity: 0; } 25% { transform: none; opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
.gw-glint { position: relative; }
/* 見本の札 */
.smp-b { display: inline-block; font-family: var(--jp); font-weight: 500; font-size: 12px; letter-spacing: .12em; color: var(--bx); border: 1px solid var(--bx); border-radius: 2px; padding: 0 8px; margin-right: 8px; vertical-align: 1px; }

/* ファンの称号（金・銀・銅）。金色を使うのはここだけ */
.tchip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; padding: 2px 12px 2px 3px; border-radius: 999px; border: 1px solid var(--tc, var(--line2)); background: var(--tb, var(--paper2)); color: var(--tf, var(--ink)); font-family: var(--jp); font-size: 14px; font-weight: 500; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tchip > i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--tg); }
.t-gold { --tc: #B8962E; --tb: #FBF6E6; --tf: #4E3A00; --tg: linear-gradient(135deg, #E8CF78, #B8962E 55%, #7E6000); }
.t-silver { --tc: #9AA1AB; --tb: #F5F6F7; --tf: #3B4250; --tg: linear-gradient(135deg, #E3E6EA, #9AA1AB 55%, #5F6672); }
.t-bronze { --tc: #B07A55; --tb: #FAF0E8; --tf: #5C3218; --tg: linear-gradient(135deg, #E5B894, #B07A55 55%, #7A4320); }
.tchip.unk { border-style: dashed; background: var(--paper2); color: var(--stone); padding-right: 16px; }
.tchip.unk > i { opacity: .55; }

/* ---------- PC ---------- */
@media (min-width: 721px) {
  .w .bd { padding-top: 48px; }
  .os-stack { padding-inline: 32px; gap: 72px; }
  .os-foot { padding-inline: 32px; }
}
/* ---------- スマホ ---------- */
@media (max-width: 720px) {
  :root { --bar-h: 52px; --tab-h: 0px; }
  .os-bar { padding-inline: 16px 6px; }
  .os-bar .logo { font-size: 19px; }
  .os-bar .logo small { font-size: 8.5px; }
  .os-menu { width: 100vw; box-shadow: none; }
  .toast { left: 16px; right: 16px; width: auto; }
  .os-stack { gap: 48px; padding-inline: 16px; padding-top: calc(var(--bar-h) + 20px + env(safe-area-inset-top, 0px)); }
  .os-foot { padding-inline: 16px; }
  .os-next { padding: 44px 20px; }
  .os-next .acts .btn { width: 100%; }
  .w.card .bd, .w.solid .bd, .w:has(form) .bd, .os.shop .w .bd { padding: 24px 18px; }
  .lvb { width: 72px; height: 72px; }
  .lvb b { font-size: 29px; }
  .quests li { grid-template-columns: 30px minmax(0, 1fr); }
  .quests li > a.go, .quests li > .st { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .os *, .toast, .os-menu, .os-scrim, .gw-ring, .gw-burst { animation: none !important; transition: none !important; } .gw-ring, .gw-burst { display: none; } }

/* ---------- 共通の部品（この版で追加） ---------- */
/* 見出しの組（英字の小ラベル＋明朝の見出し＋ひとこと） */
.lx-hd { display: grid; gap: 8px; margin-bottom: 28px; }
.lx-hd .h2 { margin: 0; }
.lx-hd p.sub { max-width: 34em; }
/* ブランドのカード（ECの商品カード）：瓶の写真・活動名・ブランド名・状態 */
.bc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
.bc a { display: grid; gap: 4px; text-decoration: none; color: inherit; }
.bc-ph { position: relative; margin: 0 0 10px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--shade); border-radius: 2px; }
.bc-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.bc a:hover .bc-ph img { transform: scale(1.03); }
.bc-tag { position: absolute; left: 8px; top: 8px; font-size: 12px; letter-spacing: .12em; color: var(--bx); background: var(--paper2); border: 1px solid var(--bx); border-radius: 2px; padding: 0 8px; line-height: 1.7; }
.bc-st { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--bx); }
.bc-st.off { color: var(--stone); }
.bc-by { font-size: 14px; color: var(--stone); line-height: 1.6; }
.bc-n { font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1.5; letter-spacing: .04em; word-break: break-word; }
.bc-by .ok { display: inline-block; font-size: 12px; color: var(--bx); border: 1px solid currentColor; border-radius: 2px; padding: 0 6px; margin-right: 8px; line-height: 1.6; vertical-align: 1px; }
.bc-note { margin-top: 18px; font-size: 14px; color: var(--stone); }
.bc-note b { color: var(--bx); font-weight: 500; margin-right: 8px; }
/* 3つの手順 */
.lx-steps { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.lx-steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 12px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.lx-steps .n { font-family: var(--en); font-size: 30px; line-height: 1; color: var(--bx); }
.lx-steps b { font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: .05em; line-height: 1.6; }
.lx-steps small { display: block; grid-column: 2; font-size: 14px; color: var(--stone); line-height: 1.8; }
/* よくある質問 */
.faq-l { display: grid; border-top: 1px solid var(--line); }
.faq-l details { border-bottom: 1px solid var(--line); }
.faq-l summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 12px; min-height: 60px; padding: 14px 0; font-size: 16px; font-weight: 500; line-height: 1.6; }
.faq-l summary::-webkit-details-marker { display: none; }
.faq-l summary::after { content: "+"; font-family: var(--en); font-size: 24px; line-height: 1; color: var(--bx); text-align: center; }
.faq-l details[open] summary::after { content: "−"; }
.faq-l details p { padding: 0 0 20px; font-size: 15px; color: var(--ink); line-height: 1.9; }
@media (min-width: 721px) {
  .bc-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 40px 24px; }
  .lx-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; gap: 28px; }
  .lx-steps li { grid-template-columns: 1fr; border-bottom: 0; border-top: 1px solid var(--ink); padding-top: 22px; }
  .lx-steps small { grid-column: 1; }
}
.os-search input:focus, .os-search input:focus-visible { outline: none; box-shadow: none; }

/* =====================================================================
   2026-10-22 下層ページをトップと同じ世界観に（ChatGPT 指示書＋ユーザーの上書き）。
   lux.js が トップ以外の body.os に .dk を付け、いちばん後ろに背景（トップの動画の最後＝全開の花と瓶）を敷く。
   色はトークンを入れかえるだけで、各ページの部品（var(--ink) などで書いてある）がそのまま暗い地に乗る。
   ボルドー #3A0C16・クリーム #F7F1EA・金 #D9B77E。面は塗りつぶさず、半透明の色ガラス。
   ===================================================================== */
body.dk, body.ap .os-menu, body.ap .os-search {
  --paper: var(--bg0); --paper2: rgba(247,241,234,.06); --shade: rgba(247,241,234,.09);
  --ink: #F7F1EA; --stone: rgba(247,241,234,.74);
  --bx: #D9B77E; --bx2: #E8CC98; --gold-x: #D9B77E; --ink-x: #1D1515;
  --line: rgba(247,241,234,.16); --line2: rgba(247,241,234,.32);
  --glass-x: rgb(var(--gl) / .42);
  /* 前の版のトークン名も、ここで計算しなおす（:root で計算済みの値は明るい色のまま受け継がれるため） */
  --ivory: var(--paper); --ivory2: var(--paper2); --pearl: var(--paper); --pearl2: var(--paper2); --pearl3: var(--shade); --soft: var(--shade); --mist: var(--shade);
  --navy: var(--ink); --night: var(--ink); --night2: var(--bx); --frame: var(--ink); --frame2: var(--line);
  --mute: var(--stone); --dmute: var(--stone);
  --gold: var(--bx); --gold-ink: var(--bx); --gold-hi: rgba(217,183,126,.18); --deep: var(--bx); --lav-ink: var(--bx); --pink-ink: var(--bx); --hot: var(--bx); --cyan-ink: var(--bx); --rose-ink: var(--bx); --glow: var(--bx);
  --cyan: var(--line2); --pink: var(--bx); --lav: var(--line2); --rose: var(--shade); --lilac: var(--line2); --cool: var(--line2);
  --holo: linear-gradient(90deg, var(--bx), var(--bx2)); --iri: var(--holo); --sheen: var(--holo); --goldline: linear-gradient(90deg, var(--line), var(--line));
  --glass: rgb(var(--gl) / .5); --glass2: rgba(247,241,234,.05); --solid: rgb(var(--gl) / .6); --win: rgb(var(--gl) / .5); --winfg: var(--ink); --t1: var(--ink); --t2: var(--bx);
  --wall1: rgb(var(--gl) / .5); --wall2: var(--paper); --dline: var(--line); --dpanel: rgb(var(--gl) / .5); --dfg: var(--ink);
  --surface: rgb(var(--gl) / .5); --on-ink: var(--ink-x);
  color-scheme: dark;
}
body.os.dk { background: var(--bg0); color: var(--ink); }
.os-bgv { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg0); }
.os-bgv::before { content: ""; position: absolute; inset: 0; background: url(/assets/bg/bloom-sp.webp) center top / cover no-repeat; }
.os-bgv::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(var(--gd) / .58), rgb(var(--gd) / .74) 45%, rgb(var(--gd) / .86)); }
@media (min-width: 721px) {
  .os-bgv::before { background-image: url(/assets/bg/bloom-pc.webp); left: 22%; right: -22%; } /* 瓶を右に寄せて、左の文字にかぶらないように */
  .os-bgv::after { background: linear-gradient(90deg, rgb(var(--gd) / .84), rgb(var(--gd) / .62) 50%, rgb(var(--gd) / .5)); }
}
/* ヘッダー：トップと同じ半透明 */
body.dk .os-bar, body.dk .os-bar.scrolled { background: rgb(var(--gl) / .38); color: var(--ink); border-bottom-color: rgba(247,241,234,.12); }
body.dk .os-bar .ibtn:hover, body.dk .os-bar .mbtn:hover { background: rgba(247,241,234,.08); }
/* メニュー・検索：色ガラス（トップでも同じ） */
body.dk .os-menu, body.ap .os-menu, body.dk .os-search, body.ap .os-search { background: rgb(var(--gl) / .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: var(--ink); }
body.dk .os-scrim, body.ap .os-scrim { background: rgba(10,1,4,.5); }
/* 文字の見た目 */
body.dk .tag, body.dk .lbl-m { font-family: var(--en); font-size: 13px; letter-spacing: .24em; color: var(--bx); }
body.dk ::selection { background: rgba(217,183,126,.35); }
/* 区切り：線を消して余白で分ける。カードは色ガラス */
body.dk .w { border-top-color: transparent; }
body.dk .w.card, body.dk .w.solid, body.dk .w:has(form), body.dk.shop .w { background: var(--glass-x); border: 1px solid rgba(247,241,234,.14); border-radius: 20px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body.dk .w.dark { background: rgba(20,2,6,.5); color: var(--ink); border-color: rgba(247,241,234,.14); }
/* ボタン：主ボタン＝金の丸い塗り（文字は墨）、ほかは細い線の丸 */
body.dk .btn { border-radius: 999px; border-color: rgba(247,241,234,.5); color: var(--ink); }
body.dk .btn:hover, body.dk.os button.btn:hover { background: rgba(247,241,234,.1); color: var(--ink); }
body.dk .btn.hot, body.dk.os button.btn.hot { background: var(--bx); border-color: var(--bx); color: var(--ink-x); }
body.dk .btn.hot:hover, body.dk.os button.btn.hot:hover { background: var(--bx2); border-color: var(--bx2); color: var(--ink-x); }
body.dk .btn.hot::after { display: none; }
body.dk .btn[disabled]:hover { background: transparent; color: var(--ink); }
body.dk .btn.hot[disabled]:hover { background: var(--bx); color: var(--ink-x); }
body.dk .lk, body.dk a.tl-a { color: var(--ink); border-bottom-color: rgba(247,241,234,.5); }
/* 入力欄：読みやすさ優先で、地を少し暗く・文字ははっきり */
body.dk .w input[type=text], body.dk .w input[type=email], body.dk .w input[type=password], body.dk .w input[type=tel], body.dk .w input[type=number], body.dk .w input[type=url], body.dk .w select, body.dk .w textarea, body.dk .lx-in {
  background: rgba(16,2,5,.55); border-color: rgba(247,241,234,.3); color: var(--ink); border-radius: 12px; }
body.dk .w input::placeholder, body.dk .w textarea::placeholder, body.dk .lx-in::placeholder { color: rgba(247,241,234,.45); }
body.dk .w input:focus, body.dk .w select:focus, body.dk .w textarea:focus, body.dk .lx-in:focus { border-color: var(--bx); box-shadow: 0 0 0 3px rgba(217,183,126,.18); }
body.dk .w select option { background: var(--bg0); color: var(--ink); }
body.dk :focus-visible { outline-color: var(--bx); }
/* 小物 */
body.dk .toast { background: rgb(var(--gl) / .92); border-color: rgba(247,241,234,.16); border-left-color: var(--bx); color: var(--ink); }
body.dk .bc-tag, body.dk .smp-b, body.dk .os-bar .smp-tag, body.dk .os-smp { background: rgba(20,2,6,.6); }
body.dk .lx-steps li { border-top-color: var(--line); }
/* フッター：トップと同じ色ガラス。大きな「次の一歩」の箱はやめた（各ページに主ボタンがあるため） */
body.dk .os-foot { width: 100%; max-width: none; margin-top: 40px; padding: 28px max(20px, env(safe-area-inset-left, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)); background: rgb(var(--gd) / .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgba(247,241,234,.12); gap: 14px; }
body.dk .os-foot > * { width: min(1080px, 100%); margin-inline: auto; }
body.dk .os-next { display: none; }
body.dk .os-copy { margin-top: 0; }

/* ---------- 下層ページの共通の型（トップと同じ。2026-10-22） ----------
   <main class="sxm"> の中に <section class="sx"> を並べる。1区間＝1画面（短い区間は .sx.fit で高さ自由）。
   スマホは文字を画面の下側、PCは左側。中身は .in（幅をしぼる）。主ボタンは .pill（金の丸）1つ＋ .tl（下線の文字リンク）1つ。
   フォームや表のように読む物は .gl（色ガラスの板）に入れる。 */
body.dk .sxm { position: relative; }
body.dk .sx { min-height: 100svh; display: grid; align-content: end; padding: calc(var(--bar-h) + 28px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 56px max(20px, env(safe-area-inset-left, 0px)); }
body.dk .sx.fit { min-height: 0; padding-top: 72px; padding-bottom: 72px; }
body.dk .sx.first.fit { padding-top: calc(var(--bar-h) + 40px + env(safe-area-inset-top, 0px)); }
body.dk .sx.mid { align-content: center; }
body.dk .sx .in { width: 100%; max-width: 460px; display: grid; gap: 14px; text-shadow: 0 1px 14px rgba(20,2,6,.45); }
body.dk .sx .in.wide { max-width: 720px; }
body.dk .sx .ey { font-family: var(--en); font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--bx); }
body.dk .sx h1, body.dk .sx h2 { font-family: var(--display); font-weight: 500; letter-spacing: .04em; line-height: 1.45; text-wrap: balance; margin: 0; }
body.dk .sx h1 { font-size: clamp(28px, 8vw, 48px); }
body.dk .sx h2 { font-size: clamp(24px, 6.4vw, 38px); }
body.dk .sx h3 { font-family: var(--display); font-weight: 500; font-size: 19px; letter-spacing: .04em; line-height: 1.6; margin: 0; }
body.dk .sx em { font-style: normal; color: var(--bx); }
body.dk .sx p { margin: 0; font-size: 15px; line-height: 1.9; color: var(--stone); }
body.dk .sx p.s, body.dk .sx .s { font-size: 13px; letter-spacing: .06em; }
body.dk .sx ol.nl { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: n; }
body.dk .sx ol.nl > li { display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; counter-increment: n; }
body.dk .sx ol.nl > li::before { content: counter(n, decimal-leading-zero); grid-row: span 2; font-family: var(--en); font-size: 16px; color: var(--bx); line-height: 1.7; }
body.dk .sx ol.nl b { font-family: var(--display); font-weight: 500; font-size: 17px; letter-spacing: .04em; }
body.dk .sx ol.nl span { font-size: 13.5px; line-height: 1.8; color: var(--stone); }
body.dk .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 8px; }
body.dk .pill { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 10px 28px; border: 0; border-radius: 999px; background: var(--bx); color: var(--ink-x); font: 500 15px/1.4 var(--jp); letter-spacing: .06em; text-decoration: none; white-space: nowrap; text-shadow: none; cursor: pointer; transition: background-color .25s var(--ease), transform .25s var(--ease); }
body.dk .pill:hover { background: var(--bx2); }
body.dk .pill:active { transform: scale(.98); }
body.dk .pill[disabled] { opacity: .45; cursor: default; }
body.dk .tl { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(247,241,234,.5); background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--jp); }
body.dk .tl:hover { text-decoration-color: var(--ink); }
body.dk .gl { background: var(--glass-x); border: 1px solid rgba(247,241,234,.14); border-radius: 20px; padding: 22px 20px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); text-shadow: none; }
body.dk .kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 18px; margin: 0; font-size: 14px; line-height: 1.7; }
body.dk .kv dt { color: var(--stone); white-space: nowrap; }
body.dk .kv dd { margin: 0; color: var(--ink); }
body.dk details.more { border-top: 1px solid var(--line); }
body.dk details.more > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 52px; font-size: 15px; color: var(--ink); }
body.dk details.more > summary::-webkit-details-marker { display: none; }
body.dk details.more > summary::after { content: "+"; font-family: var(--en); font-size: 22px; color: var(--bx); }
body.dk details.more[open] > summary::after { content: "−"; }
/* 見えたら、下からふわっと出る（lux.js が .on を付ける） */
body.dk .rv > * { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
body.dk .rv.on > * { opacity: 1; transform: none; }
body.dk .rv.on > :nth-child(2) { transition-delay: .08s; } body.dk .rv.on > :nth-child(3) { transition-delay: .16s; } body.dk .rv.on > :nth-child(4) { transition-delay: .24s; } body.dk .rv.on > :nth-child(5) { transition-delay: .32s; }
@media (min-width: 721px) {
  body.dk .sx { align-content: center; padding-left: max(6vw, 48px); }
  body.dk .sx .in { max-width: 560px; }
  body.dk .sx .in.wide { max-width: 760px; }
  body.dk .sx h1 { font-size: clamp(36px, 4vw, 54px); }
}
@media (prefers-reduced-motion: reduce) { body.dk .rv > * { opacity: 1; transform: none; transition: none; } }
/* 六角形チャート（hex.js）を暗い地で：目盛りは細いクリームの線、点は金 */
body.dk .hex svg polygon:not(.shape) { fill: rgba(247,241,234,.04); stroke: rgba(247,241,234,.22); }
body.dk .hex svg line { stroke: rgba(247,241,234,.14); }
body.dk .hex svg .shape { stroke: var(--bx); }
body.dk .hex svg circle { fill: var(--bg0); stroke: var(--bx); }
body.dk .hex .ax { fill: var(--ink); }
body.dk .hex .av { fill: var(--bx); }

/* =====================================================================
   2026-10-22 男性ページの色（/creators/man/・/shindan/?g=m）
   ボルドーのかわりに深い夜の紺。文字のクリームと金はそのまま。
   ガラスの色は --gl / --gd、地の色は --bg0 を入れかえるだけ。
   ===================================================================== */
:root { --bg0: #3A0C16; --gl: 40 6 14; --gd: 30 4 10; }
.man { --bg0: #172036; --gl: 16 22 40; --gd: 9 13 27; }
body.dk.man, .man body.dk { --paper: var(--bg0); }
/* 2026-10-22 下層ページは、ページごとの花の写真（トップの瓶の絵とは分ける）。lux.js が --fsp / --fpc を入れる */
.os-bgv.flo::before { background-image: var(--fsp); background-position: center; }
.os-bgv.flo::after { background: linear-gradient(rgb(var(--gd) / .30), rgb(var(--gd) / .58) 45%, rgb(var(--gd) / .82)); }
@media (min-width: 721px) {
  .os-bgv.flo::before { background-image: var(--fpc); left: 0; right: 0; background-position: right center; }
  .os-bgv.flo::after { background: linear-gradient(90deg, rgb(var(--gd) / .72), rgb(var(--gd) / .40) 50%, rgb(var(--gd) / .12)); }
}