@charset "utf-8";
/* 推したい株 — 情景UI
   季節の色は body の s-* クラスで差し替える。背景アートは4種の使い回し（ui-rooms.md 1章） */

:root{
  --wall:#f3ece2; --floor:#d8c7b0; --board:#b9946a; --ink:#2f2a24;
  --sky1:#ffd9e2; --sky2:#ffeef2;
  --chip:#fff; --chipOn:#2f2a24;
  --page:#efe7dc;
}
body.s-spring{--wall:#f6efe6;--floor:#dcc9b2;--board:#bd9a70;--sky1:#ffd3de;--sky2:#fff0f4}
body.s-summer{--wall:#eef4f6;--floor:#cfd9dd;--board:#8fb0bd;--sky1:#9ed8f5;--sky2:#e8f7ff}
body.s-autumn{--wall:#f7efe2;--floor:#d9bd94;--board:#b07c46;--sky1:#ffc39a;--sky2:#ffeedb}
body.s-winter{--wall:#eef0f5;--floor:#c9ccd6;--board:#8e93a3;--sky1:#b9c9e8;--sky2:#eef3fb}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 保険。入力欄が16px未満だとiOSが自動ズームし、次のページに移っても解けない。
   ⚠️ CSSの詳細度の都合で、クラス付きの個別指定（.uform input など）が
   これより優先される。新しく入力欄を追加するときは、その指定側でも
   必ず16px以上にすること（このルールだけでは守れない）。 */
input,select,textarea{font-size:16px}
html,body{margin:0}
body{
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  color:var(--ink); background:var(--page); line-height:1.6;
}
a{color:inherit}
#app{width:100%; max-width:520px; margin:0 auto; background:#fff; min-height:100vh;
  box-shadow:0 0 30px #0001}

/* ---------- ダミーデータ警告 ---------- */
.demobar{background:#ffe9a8; color:#7a5a00; font-size:11.5px; font-weight:700;
  padding:7px 12px; line-height:1.5}
.demobar strong{background:#7a5a00; color:#ffe9a8; padding:1px 6px; border-radius:8px;
  margin-right:6px; font-size:10.5px}
/* 実データだが未確認の状態。ダミーとは色を変えて区別する */
.demobar.is-review{background:#dfe8fb; color:#2f4f8f}
.demobar.is-review strong{background:#2f4f8f; color:#dfe8fb}

/* ---------- ヘッダー・ロゴ ---------- */
header{position:relative; padding:12px 12px 10px; border-bottom:1px solid #0001;
  background:radial-gradient(120% 95% at 10% -25%, #fff0f6 0%, #fff 58%), #fff}
.ttl{display:flex; align-items:center; gap:4px; line-height:1}
.logo-link{text-decoration:none; display:inline-block}
/* タイトル脇のおしかぶくん。根元を軸にゆっくり左右へ。
   右下の常駐ボタン（跳ねる oshiBob）とは動きを変えて、飾りだと分かるようにしている。 */
.logo-kabu{flex:none; width:34px; height:34px; margin-left:2px;
  transform-origin:50% 88%; animation:kabuSway 3.8s ease-in-out infinite}
.logo-kabu svg{width:100%; height:100%; display:block}
@keyframes kabuSway{
  0%,100%{transform:rotate(-7deg)}
  50%    {transform:rotate(7deg)}
}
/* トップ以外で出す「トップに戻る」の吹き出し。
   おしかぶくんごと押せるようにして、迷ったときの帰り道にする（2026-08-03 本人指示）。 */
.kabu-home{display:inline-flex; align-items:center; gap:5px; text-decoration:none;
  flex:none; touch-action:manipulation; -webkit-tap-highlight-color:#ff4f9622}
.kabu-bubble{position:relative; flex:none; white-space:nowrap;
  font-size:10.5px; font-weight:800; letter-spacing:.01em; color:#c9366f;
  background:#fff; border:1.5px solid #ffd0e0; border-radius:999px; padding:4px 9px;
  box-shadow:0 2px 7px #ff6b9d26;
  animation:kabuPop 2.6s ease-in-out infinite}
/* 吹き出しの尻尾。おしかぶくんの方を向かせる */
.kabu-bubble::before{content:""; position:absolute; left:-5px; top:50%; margin-top:-4px;
  border:4px solid transparent; border-right-color:#ffd0e0; border-left:0}
.kabu-bubble::after{content:""; position:absolute; left:-3px; top:50%; margin-top:-3px;
  border:3px solid transparent; border-right-color:#fff; border-left:0}
.kabu-home:hover .kabu-bubble{border-color:#ff6b9d; color:#ff4f96}
@keyframes kabuPop{
  0%,100%{transform:translateY(0) scale(1)}
  45%    {transform:translateY(-2.5px) scale(1.045)}
}
/* 画面が狭いとタイトルと競り合う。文字は残しつつ小さくする */
@media (max-width:380px){
  .kabu-bubble{font-size:9.5px; padding:3px 7px}
}
/* ログイン中の目印。おしかぶくんの右端に寄せる。
   ⚠️ 見出しを押しつぶさないこと。名前が長くても幅で止め、はみ出しは … にする。
   ⚠️ 緑の点だけで「ログイン中」を表さないこと。色が見分けにくい人に伝わらないので、
      文字（さん ログイン中）を必ず添える。狭い画面では名前だけ残す。 */
/* 名前を上、種別を下の2行にする（2026-08-03 本人指示）。
   ⚠️ 無料か有料かを色だけで表さないこと。色の見分けにくい人に伝わらない。
      冠（有料）／丸（無料）のマークと、文字の両方を必ず出す。 */
.me-badge{margin-left:auto; flex:0 1 auto; min-width:0; max-width:44%;
  display:inline-flex; flex-direction:column; align-items:flex-end; gap:1px;
  text-decoration:none; line-height:1.3;
  background:#eef1f6; border:1px solid #c9d2df; border-radius:11px; padding:4px 10px}
.me-badge:hover{filter:brightness(.97)}
.me-nm{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:11.5px; font-weight:800; color:#3b4657}
.me-tx{display:flex; align-items:center; gap:3px; white-space:nowrap;
  font-size:9.5px; font-weight:800; color:#5a6474}
.me-ic{width:11px; height:11px; flex:none; fill:currentColor}
/* 有料版は金色。冠のマークと「有料版」の文字で二重に示す */
.me-badge.is-paid{background:linear-gradient(150deg,#fff6df,#fffdf6);
  border-color:#e8c25f; box-shadow:0 1px 6px #e8a41f2e}
.me-badge.is-paid .me-nm{color:#6b4a06}
.me-badge.is-paid .me-tx{color:#8a5c00}
/* タスク管理への入口。会員バッジの右どなりに置く。
   ⚠️ バッジと形はそろえるが、色（緑）とチェックの印で別物だと分かるようにする。
      色だけに頼らず「タスク」の文字も必ず出す。 */
.head-task{flex:none; margin-left:6px;
  display:inline-flex; align-items:center; gap:4px;
  text-decoration:none; line-height:1.3;
  background:linear-gradient(150deg,#eaf7ef,#f8fdfa);
  border:1px solid #67b98a66; border-radius:11px; padding:5px 10px}
.head-task:hover{filter:brightness(.97)}
.ht-ic{width:14px; height:14px; flex:none; display:grid; place-items:center}
.ht-ic svg{width:14px; height:14px; fill:none; stroke:#2f8f5b; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.ht-tx{font-size:11px; font-weight:800; color:#237048; white-space:nowrap}
@media (max-width:430px){
  /* 幅が無いときは文字を落としてアイコンだけにする（見出しを押しつぶさない） */
  .ht-tx{display:none}
  .head-task{padding:5px 7px}
}
@media (max-width:430px){
  .me-badge{max-width:38%; padding:3px 8px}
  .me-nm{font-size:11px}
}
.logo{position:relative; display:inline-flex; align-items:center; gap:9px; padding-right:16px}
.logo-mark{flex:none; width:30px; height:30px; border-radius:10px; display:grid; place-items:center;
  font-size:17px; font-weight:900; color:#fff; transform:rotate(-6deg);
  background:linear-gradient(140deg,#ff6b9d,#ff8f4d 55%,#ffc93c);
  box-shadow:0 3px 10px #ff6b9d55, inset 0 1px 0 #ffffff70}
.logo-text{font-size:25px; font-weight:900; letter-spacing:.03em; line-height:1.1;
  background:linear-gradient(100deg,#ff5f97 0%,#ff8a3d 48%,#ffc42e 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 #fff) drop-shadow(0 3px 7px #ff6b9d33)}
/* グラデ文字が使えない環境では単色に落とす */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .logo-text{color:#ff5f97; -webkit-text-fill-color:#ff5f97}
}
.sp{position:absolute; display:block; pointer-events:none; background:#ffd84d;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  animation:twinkle 2.6s ease-in-out infinite}
.sp1{width:12px; height:12px; right:0;    top:-3px;   animation-delay:0s}
.sp2{width:8px;  height:8px;  right:11px; bottom:-1px; animation-delay:.7s; background:#ff8fb3}
.sp3{width:7px;  height:7px;  left:23px;  top:-6px;   animation-delay:1.4s; background:#7fd2f5}
@keyframes twinkle{
  0%,100%{opacity:.2; transform:scale(.6) rotate(0)}
  50%    {opacity:1;  transform:scale(1.1) rotate(90deg)}
}
/* タグライン。名前だけだと投資推奨サイトに誤読されるため外さないこと（project-idea.md） */
/* タグライン。地の文は控えめに置き、強調する語だけを持ち上げる。
   ⚠️ 全体の opacity を下げると、中の強調も一緒に沈む。地の文だけ色で薄くする */
.tag{font-size:12px; font-weight:700; margin-top:7px; letter-spacing:.01em;
  color:#2f2a2499; display:flex; align-items:baseline; gap:1px; flex-wrap:wrap}
/* 「株主優待」＝ド派手。虹色の文字＋下に光る帯 */
.tag .tg-1{position:relative; font-size:16.5px; font-weight:900; letter-spacing:.02em;
  padding:0 2px;
  background:linear-gradient(92deg,#ff4f96 0%,#ff8a3d 26%,#ffd233 48%,#2fc4a0 70%,#5b8cff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 #ffffffcc)}
.tag .tg-1::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:5px;
  border-radius:999px; opacity:.5;
  background:linear-gradient(92deg,#ff4f96,#ffd233,#5b8cff)}
/* 「推せる」＝やや控えめ。ピンクの太字に、うすい下線を敷くだけ */
.tag .tg-2{font-size:13.5px; font-weight:900; color:#e0417f;
  box-shadow:inset 0 -6px 0 #ff4f9620}
/* 文字に色を敷く書き方が効かないブラウザでは、透明のままだと読めなくなる */
@supports not ((-webkit-background-clip:text) or (background-clip:text)) {
  .tag .tg-1{color:#e0417f; -webkit-text-fill-color:#e0417f; background:none}
}

/* ---------- 月タブ ---------- */
/* ⚠️ すぐ上に検索窓がある。月ボタンが小さいと、狙ったつもりが検索窓に当たり
      スマホのキーボードが出てしまう（2026-08-03 指摘）。
      間隔を空け、指で押せる大きさ（44px目安）を確保する。 */
.months{display:flex; gap:7px; padding:14px 12px 12px; overflow-x:auto; scrollbar-width:none;
  background:#fff; border-bottom:1px solid #0001}
.months::-webkit-scrollbar{display:none}
.months .m{flex:none; border:1px solid #0002; background:var(--chip); color:var(--ink);
  border-radius:999px; padding:0 15px; min-height:40px; font-size:13.5px; font-weight:700;
  display:flex; align-items:center; text-decoration:none; transition:.15s;
  /* 二度押しの拡大と、長押しの選択メニューを止める */
  touch-action:manipulation; -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:#ff4f9622}
.months .m.on{background:var(--chipOn); color:#fff; border-color:var(--chipOn)}

/* ---------- 見出し ---------- */
.roomhead{padding:10px 12px 8px; background:#fff}
.roomhead h1{margin:0; font-size:19px; letter-spacing:.02em}
.roomhead .dates{margin:4px 0 0; font-size:11.5px; opacity:.7}
.roomhead .dates strong{opacity:1}
.roomhead .warn{font-size:10px; opacity:.6; margin-left:3px}
.roomhead .count{margin:5px 0 0; font-size:11px; opacity:.55; font-weight:700}

/* 権利付最終日のやさしい説明（2026-08-04）。開くまで1行で済む details */
.kenri-q{margin:6px 0 0; font-size:12px}
.kenri-q summary{cursor:pointer; display:inline-block; font-weight:700; opacity:.75;
  border-bottom:1px dashed currentColor; -webkit-tap-highlight-color:transparent}
.kenri-q[open] summary{opacity:1}
.kenri-q p{margin:6px 0 0; font-size:12px; line-height:1.7; opacity:.85;
  border-left:3px solid var(--chipOn); padding-left:8px}
/* 優待カード（詳細シート）内の1行注釈。日付の下に小さく置く */
.kenri-tip{display:block; margin-top:2px; font-size:10.5px; font-weight:700;
  line-height:1.5; opacity:.55}

/* ---------- 金額帯（ページを分ける） ---------- */
.bands{display:flex; gap:6px; padding:0 12px 10px; overflow-x:auto; scrollbar-width:none;
  background:#fff}
.bands::-webkit-scrollbar{display:none}
.bd{flex:none; border:1px solid #0002; background:var(--chip); border-radius:999px;
  padding:7px 12px; font-size:13px; font-weight:700; text-decoration:none; transition:.15s;
  display:flex; align-items:center; gap:6px}
.bd .bn{font-size:10.5px; opacity:.55; background:#0000000d; border-radius:999px; padding:1px 6px}
.bd.on{background:var(--chipOn); color:#fff; border-color:var(--chipOn)}
.bd.on .bn{background:#ffffff2e; opacity:.9}
.bd.zero{opacity:.4}

/* ---------- 情景 ----------
   「部屋／窓の外／棚／テーブル／床まわり」の言い方は 2026-08-02 に廃止（本人指示・分かりづらいため）。
   ラベルだけ消すと窓枠・棚板・テーブルの縁が「説明のない家具」として残るので、
   線を全部落として、空から地面へ続く1枚の情景に均した。
   .zone の4段は「同じカテゴリが近くに集まる」ための入れ物として残るが、見た目には出ない。 */
/* ⚠️ 高さを固定にしないこと。
   以前は height:clamp(...) の中に4段を等分で詰めていたため、
   1段に16件以上入ると4段目から先が枠の外へ出て、隣の段に重なるか
   上端で切れて見えなくなっていた（3月の「おでかけ」21件で発覚／2026-08-03）。
   いまは中身の数に合わせて JS が各段の min-height を決め、情景全体が縦に伸びる。
   min-height は「品数が少ない月でも情景に見える」ための下限。 */
.room{position:relative; display:flex; flex-direction:column;
  height:auto; min-height:clamp(340px, 54vh, 560px); overflow:hidden;
  background:linear-gradient(180deg,
    var(--sky1) 0%, var(--sky2) 20%, var(--wall) 52%, var(--floor) 100%)}
/* 地面側をわずかに沈ませて、品物が「置かれている」ように見せる。
   情景が伸びても地面の帯は太らせたくないので px で固定する */
.room::after{content:""; position:absolute; left:0; right:0; bottom:0; height:110px;
  background:linear-gradient(180deg,#0000,#00000012); pointer-events:none}
/* 季節の背景。
   ⚠️ 主役は優待のアイコン。ここが目立つとどれが品物か分からなくなる
      （2026-08-03 本人指示）。次の3点で必ず抑えること。
        1. opacity をこの値より上げない
        2. 品物より必ず後ろ（z-index:0、.zone を 1 に上げてある）
        3. 影を付けない・輪郭線を持たせない（src/scenery.php も参照） */
.scenery{position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.42; mix-blend-mode:multiply}
.scenery svg{width:100%; height:100%; display:block}
/* 地平線の境目を溶かして、背景として沈ませる */
.scenery::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,#ffffff99 0%,#ffffff26 34%,#fff0 62%)}

/* flex-grow を残してあるのは、品数が少ない月に余った高さを分け合わせるため。
   min-height は JS が入れる（絞り込みで見える数が減ったら縮む） */
.zone{position:relative; z-index:1; flex:1 0 auto; min-height:0;
  transition:min-height .35s ease}
.zone.is-empty{flex:0 0 0; min-height:0}
@media (prefers-reduced-motion:reduce){ .zone{transition:none} }
/* 段の切れ目をうっすら。家具ではなく「区切り」として見せる */
.zone + .zone{box-shadow:inset 0 1px 0 #00000012}

/* 分類名。家具の名前（窓の外／棚／…）は消したが、
   「何の集まりか」は分かった方がよいという指摘（2026-08-02）で分類名だけ残した。
   2026-08-04：小さすぎて見出しに見えないとの指摘で、見出しらしく作り直した。
   ⚠️ ただし主役は優待のアイコン（2026-08-03 本人指示）。目立たせすぎないため
      次を守ること。
        1. 文字を14pxより大きくしない
        2. 濃い塗りにしない（すりガラス＋季節色の細い縦棒まで）
        3. pointer-events:none のまま。押せるものと誤解させない */
.zone .lbl{position:absolute; left:8px; top:5px; z-index:2; pointer-events:none;
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:800; letter-spacing:.08em; line-height:1;
  color:var(--ink); padding:5px 11px 5px 8px;
  /* 左上だけ角を丸めず、見出しの起点をはっきりさせる */
  border-radius:4px 999px 999px 4px;
  background:linear-gradient(180deg,#ffffffdc,#ffffffb0);
  /* すりガラス。効かないブラウザでも上の白でちゃんと読める */
  -webkit-backdrop-filter:blur(7px) saturate(1.2);
  backdrop-filter:blur(7px) saturate(1.2);
  box-shadow:0 1px 2px #0000001a, inset 0 0 0 1px #ffffffb3}
/* 季節の色（--board）を細い縦棒に。季節が変わると見出しの色も一緒に変わる */
.zone .lbl::before{content:""; width:3px; height:12px; border-radius:2px;
  background:var(--board); flex:none}
/* 見出しの下に細い線を短く引いて、段の始まりに見せる */
.zone .lbl::after{content:""; position:absolute; left:8px; right:0; bottom:-5px;
  height:1px; background:linear-gradient(90deg, var(--board), #0000)}

/* ---------- 品物 ---------- */
.item{position:absolute; width:46px; height:46px; padding:0; border:0; background:none;
  cursor:pointer; transition:opacity .32s, transform .32s; will-change:transform}
.item .bob{display:block; width:100%; height:100%; position:relative;
  animation:bob var(--dur,2.4s) ease-in-out var(--delay,0s) infinite alternate}
.item svg{width:100%; height:100%; display:block; filter:drop-shadow(0 2px 2px #0003)}
.item .face{position:absolute; left:50%; top:56%; transform:translate(-50%,-50%);
  display:flex; gap:7px; pointer-events:none}
.item .face i{width:4px; height:4px; border-radius:50%; background:#2f2a24; display:block;
  animation:blink 6s var(--delay,0s) infinite}
/* 影。これが無いと品物が宙に浮いて見える（2026-08-02 指摘）。
   .bob ではなく .item に付けるので、アイコンが上下しても影は動かない＝接地して見える。 */
.item::after{content:""; position:absolute; left:50%; bottom:-7px; z-index:-1;
  width:26px; height:6px; transform:translateX(-50%); border-radius:50%;
  background:#00000030; filter:blur(2.5px); pointer-events:none; transition:opacity .32s}
.item.out::after{opacity:0}
@keyframes bob{from{transform:translateY(0) rotate(-4deg)} to{transform:translateY(-7px) rotate(4deg)}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)} 96%{transform:scaleY(.1)}}
/* 条件から外れた品物は「しゅん…」と消える（ui-rooms.md 3章） */
.item.out{opacity:0; transform:scale(.15) translateY(10px); pointer-events:none}
.item.cheer .bob{animation:cheer .55s ease-out}
@keyframes cheer{
  0%{transform:translateY(0) scale(1)}
  35%{transform:translateY(-16px) scale(1.18)}
  60%{transform:translateY(0) scale(.94)}
  100%{transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .item .bob,.item .face i{animation:none}
  .item.cheer .bob{animation:none}
}
/* 読み上げ・検索エンジン向け。画面には出さないが内容は同じ */
.sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------- カテゴリ絞り込み ---------- */
.bar{background:#fff; border-top:1px solid #0001; padding:9px 10px 12px}
.bar .cap{font-size:10px; font-weight:700; opacity:.5; margin-bottom:6px; letter-spacing:.04em}
.chips{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.c{flex:none; border:1px solid #0002; background:var(--chip); border-radius:999px;
  padding:7px 12px; font-size:12.5px; font-weight:700; cursor:pointer; transition:.15s;
  color:var(--ink); white-space:nowrap}
.c.on{background:var(--chipOn); color:#fff; border-color:var(--chipOn)}

/* ---------- 詳細シート ---------- */
.veil{position:fixed; inset:0; background:#0006; opacity:0; pointer-events:none;
  transition:.25s; z-index:50}
.veil.on{opacity:1; pointer-events:auto}
.sheet{position:fixed; left:50%; bottom:0; width:100%; max-width:520px; background:#fff;
  z-index:51; border-radius:18px 18px 0 0;
  padding:14px 16px calc(18px + env(safe-area-inset-bottom));
  transform:translate(-50%,102%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 -8px 24px #0003; max-height:86vh; overflow-y:auto}
.sheet.on{transform:translate(-50%,0)}
.grip{display:block; width:44px; height:5px; border-radius:3px; background:#0002;
  margin:0 auto 12px; border:0; padding:0; cursor:pointer}
.sheet .top{display:flex; gap:12px; align-items:center}
.sheet .ic{width:52px; height:52px; flex:none}
.sheet .ic svg{width:100%;height:100%}
.sheet h2{margin:0; font-size:17px; letter-spacing:.01em}
.sheet .code{font-size:11px; opacity:.55; font-weight:700; margin-top:2px}
.flags{display:flex; flex-wrap:wrap; gap:5px; margin-top:10px}
.flags span{font-size:10.5px; font-weight:700; border-radius:999px; padding:2px 8px;
  background:#0000000d}
.flags .f-long{background:#d9f0d6; color:#2c6b28}
.flags .f-choice{background:#dfe8fb; color:#2f4f8f}
.flags .f-abolish{background:#fbdede; color:#8f2f2f}
.sheet dl{margin:13px 0 0; display:grid; grid-template-columns:auto 1fr; gap:8px 14px;
  font-size:13.5px}
.sheet dt{opacity:.5; font-weight:700; white-space:nowrap}
.sheet dd{margin:0; font-weight:700}
.sheet .amt{font-size:19px}
.sheet .amtsub{font-size:10.5px; font-weight:700; opacity:.55; margin-top:-4px}
/* ---------- お気に入りの登録ボタン（詳細シート内） ---------- */
.favbtns{display:flex; gap:8px; margin-top:13px}
.fav-k7,.fav-n2{flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
  border-radius:999px; padding:10px 8px; font-size:12.5px; font-weight:800; cursor:pointer;
  border:2px solid transparent; transition:.15s}
.fav-k7{color:#7a5a00; background:#fff3cf; border-color:#f0d488}
.fav-k7.on{color:#fff; background:linear-gradient(120deg,#f5b301,#ffd84d); border-color:#e0a72c;
  box-shadow:0 3px 12px #f5b30155}
.fav-n2{color:#2f4f8f; background:#e8eefb; border-color:#c3d2f0}
.fav-n2.on{color:#fff; background:linear-gradient(120deg,#4a6fc4,#7fa0e0); border-color:#3d5ea8}
.fav-k7[disabled],.fav-n2[disabled]{opacity:.45; cursor:default}
.fav-ico{font-size:14px; line-height:1}
.fav-msg{margin:7px 0 0; font-size:10.5px; font-weight:700; min-height:14px; opacity:.7}
.fav-msg.warn{color:#b3261e; opacity:1}
/* ⚠️ display を持つ要素は hidden 属性が効かない。おしかぶくんのパネルで隠せなくなる */
.favbtns[hidden]{display:none}
.fav-msg[hidden]{display:none}

/* ---------- お気に入り画面 ---------- */
.fav{padding:16px 14px 4px}
.fav h1{font-size:20px; margin:0 0 10px}
.fav-lead{font-size:12px; line-height:1.8; opacity:.75; margin:0 0 20px;
  background:#faf8f5; border-radius:10px; padding:10px 12px}
.fav-empty{font-size:12px; line-height:1.8; opacity:.55; text-align:center;
  padding:20px 10px; margin:0}
.fav-note{margin:22px 0 0; font-size:10px; line-height:1.7; opacity:.55}

/* ★ 神７ — 神々しく。ただし文字が読めなくなるところまではやらない */
.kami-sec{position:relative; border-radius:18px; padding:14px 12px 16px; margin-bottom:24px;
  background:radial-gradient(120% 80% at 50% 0%, #fff6d8 0%, #fffdf4 55%, #fff 100%);
  box-shadow:0 0 0 2px #f0d488, 0 6px 26px #f5b30126; overflow:hidden}
/* 後光。ゆっくり回る光条 */
.kami-sec::before{content:""; position:absolute; left:50%; top:-90px;
  width:340px; height:340px; transform:translateX(-50%); pointer-events:none;
  background:conic-gradient(from 0deg, #ffd84d33 0deg, #fff0 22deg, #ffd84d33 45deg,
    #fff0 67deg, #ffd84d33 90deg, #fff0 112deg, #ffd84d33 135deg, #fff0 157deg,
    #ffd84d33 180deg, #fff0 202deg, #ffd84d33 225deg, #fff0 247deg,
    #ffd84d33 270deg, #fff0 292deg, #ffd84d33 315deg, #fff0 337deg, #ffd84d33 360deg);
  animation:halo 26s linear infinite}
@keyframes halo{to{transform:translateX(-50%) rotate(360deg)}}
.kami-head{position:relative; display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px}
.kami-title{font-size:22px; font-weight:900; letter-spacing:.12em;
  background:linear-gradient(100deg,#b8860b,#f5b301 40%,#ffe9a0 60%,#f5b301);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 2px 6px #f5b30159)}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .kami-title{color:#b8860b; -webkit-text-fill-color:#b8860b}
}
.kami-count{font-size:11px; font-weight:800; color:#8a6b00; background:#ffffffcc;
  border-radius:999px; padding:3px 10px; margin-left:auto}
/* 神７の右のお知らせ。お知らせメールは神７だけが対象なので、ここに置く。
   ⚠️ 神７の文字を押しのけないこと。狭い画面では下の行へ回す。 */
.kami-head{flex-wrap:wrap; gap:6px 10px}
.kami-tip{flex:1 1 210px; font-size:10.5px; font-weight:700; line-height:1.65;
  color:#7a6220}
.kami-tip a{color:#a5700a; font-weight:800}
.kami-tip-x{font-style:normal; font-weight:900; white-space:nowrap;
  color:#b8860b; margin-left:3px}
@media (max-width:560px){
  /* 神７ ／ 0 / 7 を1行目に残し、お知らせは2行目いっぱいに */
  .kami-tip{order:3; flex:1 1 100%}
}
.kami-list{position:relative; display:flex; flex-direction:column; gap:9px}

.kami-card{position:relative; display:flex; gap:11px; align-items:center; text-decoration:none;
  border-radius:14px; padding:11px 12px; color:var(--ink);
  background:linear-gradient(135deg,#fffdf6,#fff7e2);
  box-shadow:0 0 0 2px #f0d48899, 0 3px 12px #f5b3011f}
.kami-card .rank{position:absolute; left:-2px; top:-6px; width:22px; height:22px;
  border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:900;
  color:#fff; background:linear-gradient(140deg,#f5b301,#e08b00);
  box-shadow:0 2px 6px #0003}
.kami-card .ic{flex:none; width:46px; height:46px; filter:drop-shadow(0 0 6px #ffd84d99)}
.kami-card .ic svg{width:100%; height:100%}

/* 二軍 */
.nigun-sec{border-radius:14px; padding:12px; background:#f7f9fd;
  box-shadow:inset 0 0 0 1px #0000000f}
.nigun-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.nigun-title{font-size:15px; font-weight:900; letter-spacing:.1em; color:#3d5ea8}
.nigun-count{font-size:11px; font-weight:800; color:#3d5ea8; background:#fff;
  border-radius:999px; padding:3px 10px}
.nigun-list{display:flex; flex-direction:column; gap:7px}
.nigun-card{display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--ink);
  background:#fff; border-radius:11px; padding:9px 11px; box-shadow:0 1px 5px #0000000f}
.nigun-card .ic{flex:none; width:36px; height:36px}
.nigun-card .ic svg{width:100%; height:100%}

/* カード共通の中身 */
.fc-body{min-width:0; flex:1}
.fc-name{font-size:13.5px; font-weight:800; letter-spacing:.01em}
.fc-title{font-size:11.5px; font-weight:700; opacity:.75; margin-top:2px}
.fc-meta{font-size:10.5px; font-weight:700; opacity:.55; margin-top:3px}
.fc-del{flex:none; width:26px; height:26px; border:0; border-radius:50%; cursor:pointer;
  background:#0000000d; font-size:13px; line-height:1; color:var(--ink)}
/* 二軍→神７の昇格、神７→二軍の降格 */
.fc-move{flex:none; border:0; border-radius:999px; padding:6px 10px; cursor:pointer;
  font-size:11px; font-weight:800; line-height:1; white-space:nowrap; margin-right:4px}
.fc-up{color:#7a5a00; background:linear-gradient(120deg,#ffe9a8,#ffd77a);
  box-shadow:0 1px 4px #f5b3013d}
.fc-down{color:#2f4f8f; background:#e8eefb}
.fav-msg.ok{color:#046b3a; opacity:1}
/* 昇格の結果はページ上部に出る。見落とさないよう少し目立たせる */
.fav-page .fav-msg{margin:0 0 12px; font-size:12px; padding:8px 11px; border-radius:9px;
  background:#0000000a}
.fav-page .fav-msg.warn{background:#ffe5e2}
.fav-page .fav-msg.ok{background:#e6f6ee}

/* トップの月カードも同じ扱い。二度押し拡大と長押しの選択メニューを止める */
.room-card,.months .m,.bands a,.chips button{touch-action:manipulation;
  -webkit-user-select:none; user-select:none}

@media (prefers-reduced-motion:reduce){
  .kami-sec::before{animation:none}
}

/* ---------- おしかぶくんに聞く ---------- */
.ask{margin-top:14px}
.ask-btn{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  border:2px solid #ffd0e0; border-radius:14px; padding:9px 11px; cursor:pointer;
  background:linear-gradient(120deg,#fff6f9,#fffdf5);
  box-shadow:0 2px 10px #ff6b9d1f; transition:.15s}
.ask-btn:hover{transform:translateY(-1px); box-shadow:0 5px 14px #ff6b9d2e}
.ask-btn:active{transform:scale(.99)}
.ask-btn[disabled]{opacity:.6; cursor:default; transform:none}
/* 押してもらえる雰囲気を出すため、顔をゆっくり揺らす */
.ask-face{flex:none; width:42px; height:42px; transform-origin:50% 88%;
  animation:kabuSway 3.2s ease-in-out infinite}
.ask-face svg{width:100%; height:100%; display:block}
.ask-txt{flex:1; min-width:0}
.ask-lead{display:block; font-size:13px; font-weight:800}
.ask-sub{display:block; font-size:10px; font-weight:700; opacity:.55; margin-top:2px}
.ask-go{flex:none; font-size:10px; font-weight:800; color:#fff; border-radius:999px;
  padding:4px 10px; background:linear-gradient(120deg,#ff6b9d,#ff8f4d);
  animation:askPulse 1.9s ease-in-out infinite}
@keyframes askPulse{
  0%,100%{transform:scale(1); opacity:.95}
  50%    {transform:scale(1.07); opacity:1}
}
.ask-body{margin-top:10px; background:#fff; border:2px solid #ffd0e0; border-radius:14px;
  padding:12px 13px; font-size:13px; line-height:1.9}
/* ⚠️ バッジは inline-block なので、本文を必ず .ai-text（ブロック）で包むこと。
   包まないと本文がバッジの右隣から始まり、1行目だけ字下がりして見える
   （本人指摘 2026-08-03）。改行の保持もここで行う。 */
.ask-body .ai-tag{display:inline-block; font-size:9.5px; font-weight:800; margin:0 0 8px;
  color:#fff; padding:3px 10px; border-radius:999px; letter-spacing:.03em;
  background:linear-gradient(100deg,#ff6b9d,#ff8f4d 45%,#ffc93c);
  box-shadow:0 2px 6px #ff6b9d40}
.ask-body .ai-text{display:block; clear:both; white-space:pre-wrap}
.ask-body .ai-note{display:block; margin-top:11px; padding-top:9px; font-size:9.5px;
  line-height:1.6; opacity:.55; white-space:normal; border-top:1px dashed #0000001f}

/* ---------- 解説が出たあと ----------
   ボタンの見た目のままだと本文と分離して見え、文字がずれて見える（本人指摘 2026-08-02）。
   枠をレインボーにして、見出しと本文を1枚のパネルに繋げる。 */
.ask.done{position:relative; overflow:hidden; padding:2.5px; border-radius:16px;
  background:linear-gradient(115deg,
    #ff6b9d, #ff8f4d 14%, #ffd84d 28%, #7ad17a 43%, #5bc8f5 58%,
    #7b8ef0 72%, #c47ee0 86%, #ff6b9d);
  background-size:320% 320%;
  animation:rainbowMove 16s linear infinite;
  box-shadow:0 4px 18px #ff6b9d33}
@keyframes rainbowMove{
  from{background-position:0% 50%}
  to  {background-position:320% 50%}
}
/* たまに光が走る */
.ask.done::after{content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(104deg,#fff0 42%,#ffffff8c 49%,#ffffffd0 51%,#ffffff8c 53%,#fff0 60%);
  transform:translateX(-130%);
  animation:askShine 7s cubic-bezier(.4,0,.2,1) infinite}
@keyframes askShine{
  0%,74%   {transform:translateX(-130%)}
  90%,100% {transform:translateX(130%)}
}
.ask.done .ask-btn{position:relative; z-index:1; border:0; box-shadow:none; transform:none;
  opacity:1; cursor:default; border-radius:13.5px 13.5px 0 0; padding:10px 12px 8px;
  background:linear-gradient(120deg,#fffaf3,#fff6fa)}
.ask.done .ask-go{display:none}
.ask.done .ask-lead{font-size:13.5px}
.ask.done .ask-sub{opacity:.5}
.ask.done .ask-face{animation-duration:2.4s}
.ask.done .ask-body{position:relative; z-index:1; margin-top:0; border:0;
  border-radius:0 0 13.5px 13.5px; padding:2px 14px 14px;
  background:linear-gradient(180deg,#fff6fa,#fffdf8 40%,#fff)}

@media (prefers-reduced-motion:reduce){
  .ask-face,.ask-go{animation:none}
  .ask.done{animation:none}
  .ask.done::after{animation:none; opacity:0}
}

.sheet .note{margin-top:13px; font-size:10.5px; line-height:1.6; opacity:.55}
.sheet .note a{opacity:.9}

/* ---------- おしかぶくん ---------- */
/* ボタンは画面の隅に常駐。#app は最大520pxなので、広い画面では中身の右端に寄せる */
.oshi-btn{position:fixed; bottom:14px; right:max(12px, calc(50% - 250px)); z-index:40;
  width:66px; height:66px; padding:0; border:0; background:none; cursor:pointer;
  filter:drop-shadow(0 6px 12px #0003); animation:oshiBob 3s ease-in-out infinite}
.oshi-btn svg{width:100%; height:100%; display:block}
.oshi-btn:active{transform:scale(.93)}
.oshi-pop{position:absolute; top:-4px; left:-18px; font-size:10px; font-weight:800;
  background:#2f2a24; color:#fff; padding:3px 9px; border-radius:999px; white-space:nowrap;
  box-shadow:0 2px 6px #0003}
.oshi-pop::after{content:""; position:absolute; left:16px; bottom:-4px;
  border:5px solid transparent; border-top-color:#2f2a24; border-bottom:0}
/* 名前。初見で「これは誰か」が分かるように（本人指示 2026-08-02） */
.oshi-name{position:absolute; left:50%; bottom:-3px; transform:translateX(-50%);
  font-size:9px; font-weight:800; letter-spacing:.02em; white-space:nowrap;
  background:#fffffff0; color:#2f2a24; padding:2px 7px; border-radius:999px;
  box-shadow:0 1px 4px #0002}
@keyframes oshiBob{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%    {transform:translateY(-7px) rotate(2deg)}
}

.oshi-veil{position:fixed; inset:0; background:#0007; opacity:0; pointer-events:none;
  transition:.25s; z-index:60}
.oshi-veil.on{opacity:1; pointer-events:auto}
.oshi-panel{position:fixed; left:50%; bottom:0; width:100%; max-width:520px; z-index:61;
  background:linear-gradient(180deg,#fff4f8,#fff 42%);
  border-radius:20px 20px 0 0; padding:18px 16px calc(20px + env(safe-area-inset-bottom));
  transform:translate(-50%,103%); transition:transform .3s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 -10px 30px #0004; max-height:88vh; overflow-y:auto}
.oshi-panel.on{transform:translate(-50%,0)}
.oshi-close{position:absolute; right:10px; top:8px; width:32px; height:32px; border:0;
  background:#0000000d; border-radius:50%; font-size:17px; line-height:1; cursor:pointer;
  color:var(--ink)}
.oshi-top{display:flex; align-items:center; gap:10px}
.oshi-face{width:54px; height:54px; flex:none}
.oshi-say{position:relative; background:#fff; border:2px solid #ffd0e0; border-radius:14px;
  padding:8px 12px; font-size:13.5px; font-weight:800; box-shadow:0 2px 8px #ff6b9d1f}
.oshi-say::before{content:""; position:absolute; left:-8px; top:16px;
  border:6px solid transparent; border-right-color:#ffd0e0; border-left:0}

.oshi-card{display:flex; gap:12px; align-items:center; margin-top:14px;
  background:#fff; border-radius:14px; padding:13px; box-shadow:0 2px 10px #0000000f}
.oshi-card.roll{animation:rollIn .35s ease-out}
@keyframes rollIn{
  0%{opacity:0; transform:translateY(10px) scale(.96)}
  100%{opacity:1; transform:none}
}
.oc-ic{width:52px; height:52px; flex:none}
.oc-ic svg{width:100%; height:100%}
.oc-body{min-width:0}
.oc-name{font-size:15px; font-weight:800; letter-spacing:.01em}
.oc-title{font-size:13px; font-weight:700; margin-top:3px}
.oc-meta{font-size:11px; opacity:.6; font-weight:700; margin-top:4px}
.oc-meta b{font-size:13px; opacity:1}

.oshi-act{display:flex; gap:8px; margin-top:13px}
.oshi-re,.oshi-go{flex:1; text-align:center; border-radius:999px; padding:11px 8px;
  font-size:13px; font-weight:800; cursor:pointer; text-decoration:none; border:0}
.oshi-re{color:#fff; background:linear-gradient(120deg,#ff6b9d,#ff8f4d)}
.oshi-go{color:var(--ink); background:#0000000d; display:block}
.oshi-note{margin:12px 0 0; font-size:10px; line-height:1.7; opacity:.55}

@media (prefers-reduced-motion:reduce){
  .oshi-btn{animation:none}
  .logo-kabu{animation:none}
  .kabu-bubble{animation:none}
  .stc:target{animation:none; box-shadow:0 0 0 3px #f0a92c}
  .sp{animation:none}
  .oshi-card.roll{animation:none}
}

/* ---------- トップ ---------- */
.home-main{padding:16px 14px 4px}
.lead{margin:0 0 14px; font-size:14px; line-height:1.8}
.rooms{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
@media (max-width:360px){.rooms{grid-template-columns:repeat(2,1fr)}}
.room-card{position:relative; display:block; text-decoration:none; border-radius:12px;
  padding:12px 10px 11px; border:1px solid var(--rc-line,#0001); transition:.15s;
  background:linear-gradient(180deg,var(--sky2),var(--wall));
  /* 内側の白い光と、ごく浅い影。紙より少し厚みのあるものに見せる */
  box-shadow:inset 0 1px 0 #ffffffd9, 0 1px 3px #00000012}
.room-card:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 #ffffffd9, 0 6px 14px #0000001f}

/* 月の枠の縁取り。⚠️ 「もうすぐ」の虹より必ず控えめにすること。
   一番目立つべきは「もうすぐ」なので、こちらは動かさず、色も抑える。
   ⚠️ mask が使えるときだけ縁取りに差し替える。使えない環境で当てると、
      塗りつぶした四角がカード全体を覆ってしまう。 */
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .room-card{border-color:transparent; background-clip:padding-box}
  .room-card::before{
    content:""; position:absolute; inset:0; border-radius:12px; z-index:0;
    padding:1.3px;                     /* これが縁の太さ */
    background:linear-gradient(148deg,
      var(--rc-e1) 0%, var(--rc-e2) 38%, var(--rc-e1) 62%, var(--rc-e3) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    pointer-events:none;
  }
}
/* --rc-e1〜e3 は縁の色（濃い→光→締め）。季節ごとに金・銀の質感を変える */
.room-card.s-spring{--sky2:#fff0f4;--wall:#f6efe6;
  --rc-line:#eec7d6; --rc-e1:#e6b3c8; --rc-e2:#fff7fb; --rc-e3:#d99bb6}
/* ⚠️ 夏と冬は「もっとそれらしく」との指示（2026-08-03）。
   夏は南の海の水色、冬は氷の青に振ってある。淡いままだと春秋と見分けにくい。 */
.room-card.s-summer{--sky2:#dcf7ff;--wall:#e2f4f2;
  --rc-line:#a9dbe6; --rc-e1:#8fcfdf; --rc-e2:#f4fdff; --rc-e3:#6bb9cd}
.room-card.s-autumn{--sky2:#ffeedb;--wall:#f7efe2;
  --rc-line:#ecc79c; --rc-e1:#e0b27f; --rc-e2:#fff8ed; --rc-e3:#cf9a5e}
.room-card.s-winter{--sky2:#e6f1fd;--wall:#e4eaf4;
  --rc-line:#c3d6ee; --rc-e1:#adc5e4; --rc-e2:#f8fbff; --rc-e3:#93aed4}
.room-card.is-empty{opacity:.5; background:#faf8f5}
/* 「もうすぐ」＝いちばん近い権利確定日の月。虹の枠でいちばん目立たせる。
   枠だけ虹にしたいので、border ではなく擬似要素の背景に虹を敷いて、
   中身を mask で抜いている（border-image だと角丸が効かない）。 */
.room-card.is-soon{border-color:transparent; background-clip:padding-box;
  box-shadow:inset 0 1px 0 #ffffffd9, 0 4px 16px #ff5f9738}
.room-card.is-soon::before{
  content:""; position:absolute; inset:-2px; border-radius:14px; z-index:0;
  padding:2.5px;                      /* これが枠の太さになる */
  background:linear-gradient(115deg,
    #ff5f97 0%, #ff8a3d 16%, #ffd93b 32%, #56d364 48%,
    #35c3f3 64%, #6f7bff 80%, #c86dff 92%, #ff5f97 100%);
  background-size:280% 280%;
  animation:rainbowFlow 5.5s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
/* ⚠️ 外側のにじみを ::after + z-index:-1 でやらないこと。
   .room-card:hover の transform が重ね合わせの文脈を作るので、
   ホバーした瞬間だけカードの上に虹がかぶる。光りは box-shadow で出す。 */
/* 中身が枠より下に潜らないように。
   ⚠️ .rc-badge を巻き込むと position:absolute が上書きされて位置が崩れるので外す。 */
/* ⚠️ .rc-gl も外すこと。ここで position:relative を上書きすると、
   「もうすぐ」の月だけ季節の絵が右上から流れ出て、文の間に居座る。 */
.room-card.is-soon > :not(.rc-badge):not(.rc-gl){position:relative; z-index:1}
@keyframes rainbowFlow{
  0%  {background-position:0% 50%}
  100%{background-position:280% 50%}
}
/* mask が使えない環境では、ただの色付きの枠に落とす */
@supports not ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .room-card.is-soon{border-color:#ff5f97; box-shadow:0 0 0 2px #ff5f9733}
  .room-card.is-soon::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .room-card.is-soon::before{animation:none}
}

.rc-badge{position:absolute; top:-7px; right:6px; z-index:2; font-size:9.5px; font-weight:800;
  color:#fff; border-radius:999px; padding:2px 8px;
  background:linear-gradient(100deg,#ff5f97,#ff8a3d 40%,#ffd93b 70%,#35c3f3);
  background-size:220% 100%; animation:rainbowFlow 5.5s linear infinite;
  box-shadow:0 2px 7px #ff5f9755; text-shadow:0 1px 1px #0000002e}
@media (prefers-reduced-motion:reduce){ .rc-badge{animation:none} }
.rc-m{font-size:22px; font-weight:800; line-height:1.1}
.rc-m span{font-size:12px; margin-left:1px}
/* 月の数字は季節の色にする（2026-08-03 本人指示）。
   ⚠️ 薄い季節色にしないこと。背景が淡いので、パステルにすると読めなくなる。
      濃いめの色を選び、背景（上=--sky2／下=--wall）との明暗差を
      4.5:1 以上あることを確かめてある（最小は春の 4.65:1）。
   ⚠️ 色を付けるのは月の数字だけ。下の「◯件の優待」「権利付最終日」は
      opacity を下げてあるので、色まで付けると薄くなりすぎる。 */
.room-card.s-spring .rc-m{color:#c0356b}
.room-card.s-summer .rc-m{color:#046b7d}   /* 南の海。地との差 最小 5.42:1 */
.room-card.s-autumn .rc-m{color:#a04c17}
.room-card.s-winter .rc-m{color:#164a90}   /* 氷の青。地との差 最小 7.19:1 */

/* 月ごとの季節の絵。カードの右上に薄く置く。
   ⚠️ 飾りなので aria-hidden。絵が出ない環境でも月の数字だけで用が足りる。
   ⚠️ 濃くしないこと。優待のアイコンより目立つと本末転倒になる。 */
.rc-gl{position:absolute; top:6px; right:8px; font-size:15px; line-height:1;
  opacity:.55; pointer-events:none; filter:saturate(.9)}
/* 「もうすぐ」の札は右上（top:-7px）に出る。ぶつからないよう絵を下げる */
.room-card.is-soon .rc-gl{top:13px; z-index:2}
.room-card.is-empty .rc-gl{opacity:.3}
.rc-n{font-size:10.5px; opacity:.7; margin-top:3px; font-weight:700}
.rc-n strong{font-size:13px}
.rc-d{font-size:9.5px; opacity:.55; margin-top:2px; font-weight:700}
.note-block{margin:18px 0 0; font-size:11.5px; line-height:1.8; opacity:.75;
  background:#faf8f5; border-radius:10px; padding:11px 12px}
.total{margin:12px 0 0; font-size:12px; opacity:.6; font-weight:700; text-align:center}

/* ---------- 該当なし ---------- */
.empty-room{padding:44px 16px; text-align:center; font-size:13.5px; opacity:.7}

/* ---------- 文書ページ ---------- */
.doc{padding:16px 16px 4px; font-size:13.5px}
.doc h1{font-size:20px; margin:0 0 16px}
.doc h2{font-size:14.5px; margin:22px 0 6px; padding-left:9px; border-left:4px solid var(--board)}
.doc p{margin:0 0 10px; line-height:1.85}
.doc .todo{opacity:.5}
.doc .warnbox{background:#fff4d6; border-left:3px solid #e0a72c;
  padding:11px 12px; border-radius:0 8px 8px 0}

/* ---------- フッター ---------- */
footer{margin-top:22px; padding:14px 14px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid #0001; background:#faf8f5}
footer .src{margin:0 0 7px; font-size:10.5px; line-height:1.7; opacity:.6}
/* 12週遅延は誤解されると実害が出るので、他の注記より強く見せる */
footer .delay{opacity:.85; background:#fff4d6; border-left:3px solid #e0a72c;
  padding:8px 10px; border-radius:0 8px 8px 0; margin-bottom:10px}
/* ---------- フッターのメニュー ----------
   文字だけのリンクを並べていたら地味で気づかれなかった（2026-08-03指摘）。
   アイコン付きのカードに作り替え、押させたいもの（会員登録・有料版）だけ
   色を付けて目を引かせる。「情景UIの試作（旧）」は不要とのことで削除した。 */
.fnav{display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); gap:8px;
  margin-top:12px}
.fn{display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:11px 6px 9px; border-radius:14px; text-decoration:none; text-align:center;
  background:#faf7f3; border:1px solid #00000008; color:#4a4038;
  transition:transform .15s, box-shadow .15s, background .15s}
.fn:hover,.fn:active{transform:translateY(-2px); box-shadow:0 4px 12px #00000014; background:#fff}
.fn-ic{width:26px; height:26px; display:grid; place-items:center; border-radius:9px;
  background:linear-gradient(135deg,#ffe0ec,#ffe9d6)}
.fn-ic svg{width:16px; height:16px; fill:none; stroke:#c9527d; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.fn-tx{font-size:10.5px; font-weight:800; line-height:1.35}
.fn-tx small{display:block; font-size:8.5px; font-weight:600; color:#9a938a; margin-top:1px}
/* 押してほしい2つ（会員登録・有料版）だけ、派手な色で他と差をつける */
.fn-hot{background:linear-gradient(150deg,#fff0f6,#fff8ec); border-color:#ff9fc244;
  box-shadow:0 2px 10px #ff6b9d22}
.fn-hot .fn-ic{background:linear-gradient(135deg,#ff6b9d,#ff9f45)}
.fn-hot .fn-ic svg{stroke:#fff}
.fn-hot .fn-tx{color:#c9366f}
.fn-hot:hover,.fn-hot:active{box-shadow:0 6px 16px #ff6b9d38}

/* ログアウトは form で囲む（POST にするため）。
   ⚠️ display:contents で、囲みではなくボタン自体を並びの升目にする。
      そうしないと form が1升を占め、中のボタンが左に寄って他と揃わない。 */
.fn-form{display:contents}
.fn-out{border:0; cursor:pointer; font:inherit; width:100%;
  background:#f3f1ee; color:#6b6259}
.fn-out .fn-ic{background:linear-gradient(135deg,#b9b1a6,#d3cbc0)}
.fn-out .fn-ic svg{stroke:#fff}
.fn-out:hover,.fn-out:active{background:#fff}

/* 神７・二軍は「自分で選んだ枠」。星に合わせて金色にし、他のどれとも被らせない。
   ⚠️ 色分けは色だけを頼りにしないこと。見分けが付かない人のために
      アイコンの形（星／人）と補足の文字でも区別が付くようにしてある。 */
.fn-fav{background:linear-gradient(150deg,#fff7e2,#fffdf5); border-color:#f0b32944;
  box-shadow:0 2px 10px #e8a41f22}
.fn-fav .fn-ic{background:linear-gradient(135deg,#f5b423,#ffd76e)}
.fn-fav .fn-ic svg{stroke:#fff; fill:#fff}
.fn-fav .fn-tx{color:#9a6a06}
.fn-fav .fn-tx small{color:#b9903f}
.fn-fav:hover,.fn-fav:active{box-shadow:0 6px 16px #e8a41f3d}

/* マイページは青。ピンク（会員登録・有料版）とも金色（神７）とも別にする */
.fn-me{background:linear-gradient(150deg,#eef6fd,#f8fcff); border-color:#3f8fd044;
  box-shadow:0 2px 10px #3f8fd01f}
.fn-me .fn-ic{background:linear-gradient(135deg,#3f8fd0,#6fc3e8)}
.fn-me .fn-ic svg{stroke:#fff}
.fn-me .fn-tx{color:#1f5f92}
.fn-me:hover,.fn-me:active{box-shadow:0 6px 16px #3f8fd038}

/* タスク管理。金色（神７）・青（マイページ）・ピンク（会員登録／有料版）と被らない緑 */
.fn-task{background:linear-gradient(150deg,#eaf7ef,#f9fdfb); border-color:#3f9f6a44;
  box-shadow:0 2px 8px #3f9f6a1f}
.fn-task .fn-ic{background:linear-gradient(135deg,#3f9f6a,#6fd0a0)}
.fn-task .fn-ic svg{stroke:#fff}
.fn-task .fn-tx{color:#1f6b45}
.fn-task .fn-tx small{color:#4f9070}
.fn-task:hover,.fn-task:active{box-shadow:0 6px 16px #3f9f6a38}

@media (prefers-reduced-motion:reduce){ .fn{transition:none} }

/* ---------- 銘柄を探す窓（全ページの見出し下） ----------
   情景は「権利月から眺める」ための作り。
   「この会社の優待はあるか」を確かめたい人には向かないので、別の入口を用意した（2026-08-03 指摘）。 */
/* ---------- 検索窓の開閉 ----------
   月ボタンの真上に入力欄を置かないための作り。詳しい理由は layout.php の
   layout_search() のコメントに書いてある。 */
.findwrap{margin:10px auto 0; max-width:440px}
.findopen{display:none}          /* JSが動く狭い画面でだけ出す */
.js-find .findopen{display:flex; align-items:center; gap:7px; width:100%;
  min-height:42px; padding:0 16px; border:0; border-radius:999px; cursor:pointer;
  background:#fff; color:#7a736a; font:inherit; font-size:13px; font-weight:700;
  box-shadow:0 3px 12px #00000018; text-align:left;
  touch-action:manipulation; -webkit-user-select:none; user-select:none}
.js-find .findopen svg{width:16px; height:16px; flex:none; fill:none; stroke:#ff4f96;
  stroke-width:2.2; stroke-linecap:round}
.js-find .findbox{display:none}
.js-find .findwrap.is-open .findopen{display:none}
.js-find .findwrap.is-open .findbox{display:flex}
/* 広い画面はマウス操作なので押し間違いが起きない。常に入力欄を出す */
@media (min-width:700px){
  .js-find .findopen{display:none}
  .js-find .findbox{display:flex}
}
/* ⚠️ 枠は白っぽくしないこと。ヘッダーの地がほぼ白なので、
   境目が見えず「入力できる場所」だと気づかれない（2026-08-03 指摘）。
   桃色の枠と、うっすら色を敷いた地で、はっきり囲う。 */
.findbox{display:flex; align-items:center; gap:6px; margin:0; max-width:440px;
  background:#fff; border:2px solid #ffb3cd; border-radius:999px; padding:4px 4px 4px 14px;
  box-shadow:0 2px 10px #ff4f9626, inset 0 0 0 3px #fff5f9}
.findbox:hover{border-color:#ff8ab5}
/* 押せるボタンも同じ考えで、境目を出す */
.js-find .findopen{border:2px solid #ffb3cd;
  box-shadow:0 2px 10px #ff4f9626, inset 0 0 0 3px #fff5f9}
.js-find .findopen:hover{border-color:#ff8ab5}
/* ⚠️ 16px未満にしないこと。iOSが入力欄タップ時に自動ズームし、
   そのズームは他ページへ移動しても解けない。
   この窓は全ページのヘッダーに出るので、ここが14pxだと
   月ページを含むサイト全体が拡大されたままになる（2026-08-03 指摘）。 */
.findbox input{flex:1; min-width:0; border:0; outline:0; background:none; font:inherit;
  font-size:16px; color:#2f2a24; padding:6px 0}
/* プレースホルダは小さくてよい。ズームの判定には使われないため */
.findbox input::placeholder{color:#9a938a; font-size:12.5px}
.findbox button{flex:none; width:34px; height:34px; border:0; border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg,#ff6b9d,#ff4f96); display:grid; place-items:center;
  box-shadow:0 2px 8px #ff4f9655}
.findbox button svg{width:17px; height:17px; fill:none; stroke:#fff; stroke-width:2.2;
  stroke-linecap:round}
.findbox:focus-within{border-color:#ff4f96;
  box-shadow:0 3px 14px #ff4f9659, inset 0 0 0 3px #fff}

/* ---------- 検索結果 ---------- */
.searchmain{padding:16px 14px 26px; max-width:720px; margin:0 auto}
.searchmain .lead{margin:0 0 14px; font-size:14px; line-height:1.8}
.backlink{margin:16px 0 0; font-size:13px}
.hits,.nohits{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.hit{background:#fff; border:1px solid #0000000f; border-radius:14px; overflow:hidden;
  box-shadow:0 2px 10px #00000010}
.hit-h{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding:12px 15px; background:linear-gradient(135deg,#fff0f6,#f6f2ff);
  border-bottom:1px solid #0000000d}
/* 会社名を押すとおしかぶくんが説明する（2026-08-04）。
   button なので、既定の枠と文字寄せを消して見た目を元のままにする */
.hit-ask{width:100%; border:0; text-align:left; cursor:pointer; font:inherit;
  border-bottom:1px solid #0000000d; -webkit-tap-highlight-color:#ff4f9622}
.hit-ask:hover{background:linear-gradient(135deg,#ffe7f1,#efe9ff)}
.hit-ask:focus-visible{outline:2px solid #ff6b9d; outline-offset:-2px}
/* 押せることが分かるよう、右端に小さく置く */
.hit-go{margin-left:auto; flex:none; font-size:10.5px; font-weight:800; color:#b3407a;
  background:#fff; border:1px solid #ffc9dd; border-radius:999px; padding:3px 9px}
.hit-ask:hover .hit-go{background:#ff6b9d; color:#fff; border-color:#ff6b9d}
/* おしかぶくん本体。帯ごと button なので、この絵を押しても開く（2026-08-04）。
   ⚠️ 小さくしすぎると押しどころに見えないので、指で押せる大きさは帯側で確保している */
.hit-kabu{flex:none; width:30px; height:30px; align-self:center; margin-left:2px;
  transform-origin:50% 88%; transition:transform .18s ease}
.hit-kabu svg{width:100%; height:100%; display:block}
.hit-ask:hover .hit-kabu{transform:rotate(-8deg) scale(1.08)}
.hit-ask:active .hit-kabu{transform:rotate(4deg) scale(.96)}
@media (prefers-reduced-motion:reduce){
  .hit-kabu{transition:none}
  .hit-ask:hover .hit-kabu,.hit-ask:active .hit-kabu{transform:none}
}
.hit-name{font-weight:800; font-size:15.5px; color:#2f2a24}
.hit-code{font-size:12px; color:#8b8279; font-variant-numeric:tabular-nums}
.hit-mkt{font-size:11px; color:#8b8279; background:#00000008; border-radius:999px; padding:1px 8px}
.hit-b{display:flex; gap:12px; padding:13px 15px; border-top:1px dashed #00000012}
.hit-b:first-of-type{border-top:0}
.hit-m{flex:none; align-self:flex-start; text-decoration:none; text-align:center;
  min-width:56px; padding:7px 8px; border-radius:11px; font-weight:800; font-size:14px;
  background:linear-gradient(135deg,#ff6b9d,#ff4f96); color:#fff; line-height:1.25;
  box-shadow:0 2px 8px #ff4f9640}
.hit-m span{display:block; font-size:9.5px; font-weight:600; opacity:.9}
.hit-body{flex:1; min-width:0}
.hit-title{margin:0 0 4px; font-weight:700; font-size:14px; line-height:1.65; color:#2f2a24}
.hit-cond{margin:0 0 8px; font-size:12.5px; color:#6b6259; line-height:1.7}
.hit-facts{margin:0 0 8px; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:4px 12px}
.hit-facts div{display:flex; gap:7px; align-items:baseline; font-size:12.5px}
.hit-facts dt{flex:none; color:#8b8279; font-size:11px}
.hit-facts dd{margin:0; font-weight:700; color:#2f2a24; font-variant-numeric:tabular-nums}
.hit-facts b{font-weight:800; color:#d63a3a; font-size:11.5px}
.hit-tags{margin:0 0 6px; display:flex; gap:5px; flex-wrap:wrap}
.hit-tags span{font-size:10.5px; font-weight:700; border-radius:999px; padding:2px 9px}
.hit-tags .f-long{background:#e8f8f1; color:#12a670}
.hit-tags .f-choice{background:#eef0ff; color:#5b53d6}
.hit-tags .f-hold{background:#fff6e3; color:#a97400}
.hit-tags .f-abolish{background:#fdeceb; color:#d63a3a}
.hit-tags .f-cat{background:#00000008; color:#6b6259; font-weight:600}
.hit-src{margin:0; font-size:11px; color:#8b8279; line-height:1.7}
.hit-src a{color:#c93b78}
.nohits li{background:#fff; border:1px solid #0000000f; border-radius:12px; padding:11px 14px;
  display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}

@media (min-width:640px){
  .findbox{max-width:480px}
  .searchmain{padding:20px 18px 34px}
}
/* ---------- 必要金額（金額帯）の説明と応援ボタン ----------
   2026-08-05 から株価そのものは出さず、金額帯の目安だけ出す。
   帯のもとが少し前の株価であることは、隠さず最初に出す（本人指示）。 */
.delaybar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 12px; background:linear-gradient(100deg,#fff6f9,#f7f3ff);
  border-bottom:1px solid #0000000f}
.db-msg{margin:0; flex:1; min-width:190px; font-size:11.5px; line-height:1.65; color:#4a4038}
.db-msg strong{color:#c93b78}
.db-act{display:flex; align-items:center; gap:8px; flex:none}
.cheer{display:inline-flex; align-items:center; gap:5px; border:0; cursor:pointer;
  padding:7px 14px; border-radius:999px; font:inherit; font-size:12.5px; font-weight:800;
  color:#fff; background:linear-gradient(135deg,#ff6b9d,#ff4f96);
  box-shadow:0 3px 10px #ff4f9645; transition:transform .12s, filter .15s, opacity .2s}
.cheer:hover{filter:brightness(1.07)}
.cheer:active{transform:scale(.94)}
.cheer-ic{display:grid; place-items:center; width:15px; height:15px}
.cheer-ic svg{width:100%; height:100%; fill:#fff}
.cheer.done{background:#efe9e2; color:#8b8279; box-shadow:none; cursor:default}
.cheer.done .cheer-ic svg{fill:#c9bfb4}
.cheer[disabled]{opacity:.9}
.cheer.pop{animation:cheerPop .45s ease-out}
@keyframes cheerPop{
  0%{transform:scale(1)} 40%{transform:scale(1.14)} 70%{transform:scale(.97)} 100%{transform:scale(1)}
}
.cheer-n{font-size:12px; color:#6b6259; white-space:nowrap; font-variant-numeric:tabular-nums}
.cheer-n strong{font-size:14px; color:#c93b78; font-weight:800}
@media (prefers-reduced-motion:reduce){ .cheer,.cheer.pop{transition:none; animation:none} }
@media (max-width:400px){
  .delaybar{padding:8px 10px}
  .db-msg{font-size:11px}
  .db-act{width:100%; justify-content:space-between}
}
/* ---------- アイコンの上の社名 ----------
   アイコンだけではどの会社か分からない、という指摘（2026-08-03）。
   幅46pxしかないので全角4文字まで（PHP側の short_name() で切っている）。
   文字色＝必要金額の帯。上の金額帯タブと同じ色にして、凡例を置かずに意味が伝わるようにした。 */
/* ⚠️ 色の選び方。
   最初は 緑／オレンジ／赤 にしたが、オレンジと赤が近すぎて
   「10〜30万」と「30万〜」を見分けられなかった（2026-08-03 指摘）。
   いまは 緑／青／赤 で色相をはっきり離してある。
   さらに、赤緑が見分けにくい人でも困らないよう、
   文字色だけでなく**背景と枠**も帯ごとに変えて手がかりを増やしている。 */
:root{
  --b-low-t:#046b3a;  --b-low-bg:#dcf5e8;  --b-low-bd:#93ddba;
  --b-mid-t:#123f9e;  --b-mid-bg:#e0ebff;  --b-mid-bd:#a8c6f7;
  --b-high-t:#b00b3e; --b-high-bg:#ffe1e9; --b-high-bd:#ffaec4;
  --b-unk-t:#6c645b;  --b-unk-bg:#eeeae5;  --b-unk-bd:#d5cec5;
}
/* ⚠️ このラベルの幅が、情景のレーン幅を決めている（app.js の footprint()）。
   広げるとレーンが減り、縦に伸びる。max-width を外すと長い社名で隣と重なる。 */
.item .nm{position:absolute; left:50%; bottom:100%; margin-bottom:3px;
  transform:translateX(-50%); pointer-events:none; white-space:nowrap;
  max-width:72px; overflow:hidden; text-overflow:ellipsis;
  font-size:9.5px; font-weight:800; letter-spacing:-.02em; line-height:1.3;
  padding:1.5px 6px; border-radius:999px; border:1px solid;
  box-shadow:0 1px 2px #00000012; transition:opacity .32s}
.item[data-band=low]     .nm{color:var(--b-low-t);  background:var(--b-low-bg);  border-color:var(--b-low-bd)}
.item[data-band=mid]     .nm{color:var(--b-mid-t);  background:var(--b-mid-bg);  border-color:var(--b-mid-bd)}
.item[data-band=high]    .nm{color:var(--b-high-t); background:var(--b-high-bg); border-color:var(--b-high-bd)}
.item[data-band=unknown] .nm{color:var(--b-unk-t);  background:var(--b-unk-bg);  border-color:var(--b-unk-bd)}
.item.out .nm{opacity:0}

/* 金額帯タブにも同じ配色を置く。凡例を別に作らなくても意味が伝わる */
.bd.b-low {color:var(--b-low-t);  background:var(--b-low-bg);  border-color:var(--b-low-bd)}
.bd.b-mid {color:var(--b-mid-t);  background:var(--b-mid-bg);  border-color:var(--b-mid-bd)}
.bd.b-high{color:var(--b-high-t); background:var(--b-high-bg); border-color:var(--b-high-bd)}
.bd.b-low .bn {background:#0000000f}
.bd.b-mid .bn {background:#0000000f}
.bd.b-high .bn{background:#0000000f}
/* 選択中は塗りつぶして、いまどこを見ているかを最優先で分からせる */
.bd.b-low.on {background:var(--b-low-t);  border-color:var(--b-low-t);  color:#fff}
.bd.b-mid.on {background:var(--b-mid-t);  border-color:var(--b-mid-t);  color:#fff}
.bd.b-high.on{background:var(--b-high-t); border-color:var(--b-high-t); color:#fff}
.bd.b-low.on .bn,.bd.b-mid.on .bn,.bd.b-high.on .bn{background:#ffffff2e; opacity:.95}
/* ---------- OFUSE（開発費用の支援） ----------
   web版のフッターだけに出す。表示ON/OFFとURLは管理画面の「設定」から。
   上の「応援ボタン」は無料の1タップ、こちらはお金。別物だと分かる見た目にしている。 */
.ofuse{margin:0 0 14px; padding:13px 14px; border-radius:12px;
  background:linear-gradient(135deg,#fff8ee,#fff1f6); border:1px solid #00000010}
.of-msg{margin:0 0 10px; font-size:11.5px; line-height:1.75; color:#4a4038}
.of-msg strong{color:#c93b78}
.of-btn{display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  padding:9px 16px; border-radius:999px; font-size:13px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#ff9f45,#ff6b9d);
  box-shadow:0 3px 12px #ff8a5540; transition:filter .15s, transform .1s}
.of-btn:hover{filter:brightness(1.06)}
.of-btn:active{transform:scale(.97)}
.of-ic{display:grid; place-items:center; width:16px; height:16px}
.of-ic svg{width:100%; height:100%; fill:none; stroke:#fff; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
.of-ex{font-size:11px; opacity:.85}
/* ボタンと、その外の右に並ぶ「育っている株」を横に並べる */
.of-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
/* おしかぶくん（蕪）に似た株が3つ。小・中・大で「すくすく育つ」を出す。
   ⚠️ 蕪の体は白なので、この枠の淡い地に溶ける。輪郭線を必ず残すこと。 */
.of-grow{flex:none; display:block; width:50px; height:34px}
.of-grow svg{width:100%; height:100%; overflow:visible}
.ofs-b{fill:#fdfaf3; stroke:#e0d2b8; stroke-width:1}
.ofs-l1{fill:#7ac074}
.ofs-l2{fill:#5faa5c}
.ofs-l3{fill:#8fd08a}
.ofs-e{fill:#2f2a24}
.ofs-m{fill:none; stroke:#2f2a24; stroke-width:.9; stroke-linecap:round}
/* 根元を軸に、順ぐりにぐんと伸びる */
.ofs-w{transform-box:fill-box; transform-origin:50% 100%;
  animation:ofsGrow 3.2s ease-in-out infinite}
.ofs-w2{animation-delay:.3s}
.ofs-w3{animation-delay:.6s}
@keyframes ofsGrow{
  0%,58%,100%{transform:scale(1,1)}
  18%        {transform:scale(.95,1.14)}
  34%        {transform:scale(1.03,.97)}
}
@media (prefers-reduced-motion:reduce){ .ofs-w{animation:none} }

/* ボタンの右にいる「支援している人」。ハートを両手で差し出している。
   ⚠️ ボタンの地がオレンジ〜ピンクなので、体は白・ハートは黄色にする。
      ここをピンク系にすると背景に溶けて何の絵か分からなくなる。
   ⚠️ .of-ic svg は fill:none / stroke:#fff が当たっているので巻き込まないこと。
      こちらは塗りで描くため、専用のクラスで指定する。 */
.of-person{width:23px; height:23px; flex:none; overflow:visible;
  animation:ofpBob 1.9s ease-in-out infinite}
.ofp-b{fill:#fff}
.ofp-c{fill:#ff9bb8}                     /* ほっぺ */
.ofp-a{fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round}
.ofp-h{fill:#ffe066; transform-box:fill-box; transform-origin:50% 60%;
  animation:ofpBeat 1.9s ease-in-out infinite}
.ofp-s{fill:#fff6c9; animation:ofpTwinkle 1.9s ease-in-out infinite}
.ofp-s:nth-of-type(2){animation-delay:.55s}
@keyframes ofpBob{
  0%,100%{transform:translateY(0) rotate(0)}
  50%    {transform:translateY(-2.5px) rotate(-4deg)}
}
@keyframes ofpBeat{ 0%,100%{transform:scale(1)} 28%{transform:scale(1.2)} 56%{transform:scale(1)} }
@keyframes ofpTwinkle{ 0%,100%{opacity:.25} 50%{opacity:1} }
/* 押そうとしている人には、もう一段はりきってもらう */
.of-btn:hover .of-person{animation-duration:.9s}
.of-btn:hover .ofp-h{animation-duration:.9s}
/* 支援の前に会員登録をすすめる案内。支援後に「反映されない」となるのを防ぐため、
   ボタンのすぐ下で目に入る強さにしておく */
.of-tip{margin:10px 0 0; padding:9px 12px; border-radius:10px; font-size:11.5px;
  line-height:1.8; color:#4a4038; background:#fff7e8;
  box-shadow:inset 0 0 0 1px #f0d48899}
.of-tip strong{color:#a45c00}
.of-tip a{color:#c93b78; font-weight:800}
.of-note{margin:8px 0 0; font-size:10.5px; line-height:1.7; color:#8b8279}
.of-note strong{color:#6b6259}
@media (prefers-reduced-motion:reduce){
  .of-btn{transition:none}
  /* 絵は残し、動きだけ止める */
  .of-person,.ofp-h,.ofp-s{animation:none}
  .ofp-s{opacity:.85}
}
/* ---------- 会員まわり ---------- */
.db-more{margin-left:6px; font-weight:800; color:#c93b78; white-space:nowrap}
.delaybar.is-rt{background:linear-gradient(100deg,#e6f7ee,#e0f4ff)}
.delaybar.is-rt .db-msg strong{color:#046b3a}
.delaybar.is-wait{background:linear-gradient(100deg,#fff8e6,#fff1f6)}
.delaybar.is-wait .db-msg strong{color:#a45c00}

.adslot{margin:0; padding:0; min-height:0}

.docmain{padding:16px 14px 26px; max-width:640px; margin:0 auto}
.docmain h1{font-size:20px; margin:0 0 12px}
.wip-h1{display:inline-block; margin-left:7px; font-size:11px; font-weight:800; color:#a45c00;
  background:#fff3d6; padding:2px 9px; border-radius:999px; vertical-align:middle}
.docmain h2{font-size:15px; margin:22px 0 8px}
.docmain .lead{font-size:13.5px; line-height:1.85; margin:0 0 12px}
.docmain .small{font-size:11.5px; color:#6b6259; line-height:1.8; margin:10px 0 0}
.docmain .notice{background:#fff8e6; border-radius:9px; padding:9px 11px; color:#8a6200}
.bullets{margin:0 0 16px; padding-left:20px; font-size:13px; line-height:1.9}

.uflash{border-radius:10px; padding:11px 13px; margin:0 0 14px; font-size:12.5px; line-height:1.75}
.uflash.is-ok  {background:#dcf5e8; color:#046b3a}
.uflash.is-err {background:#ffe1e9; color:#b00b3e}
.uflash.is-warn{background:#fff3d6; color:#8a6200}

.ucard{background:#fff; border:1px solid #00000010; border-radius:13px; padding:14px 15px;
  margin:0 0 14px; box-shadow:0 2px 8px #00000008}
.ucard h2{margin:0 0 10px; font-size:14px}
.udl{margin:0}
.udl div{display:flex; gap:10px; align-items:baseline; padding:5px 0; border-bottom:1px solid #00000008}
.udl div:last-child{border:0}
.udl dt{flex:none; width:110px; font-size:11.5px; color:#8b8279}
.udl dd{margin:0; font-size:13px; font-weight:700; word-break:break-all}
.plan{display:inline-block; padding:2px 10px; border-radius:999px; font-size:11.5px; font-weight:800;
  background:#eeeae5; color:#6c645b}
.plan.is-paid{background:linear-gradient(135deg,#ff9f45,#ff6b9d); color:#fff}
.udl small{font-weight:500; color:#8b8279; margin-left:6px; font-size:11px}

.uform{display:flex; flex-direction:column; gap:11px; margin:0}
.uform label{display:flex; flex-direction:column; gap:5px}
.uform label > span{font-size:12px; font-weight:700; color:#4a4038}
/* ⚠️ 16px未満だとiOS Safariが入力欄タップ時に自動でズームインし、
   しかもそのズームは他のページへ移動しても解けずに残る
   （スマホでサイト全体が拡大されたまま戻らなくなる／2026-08-03 指摘）。
   会員ページのフォームだけ15pxにしていたのが原因だった。16px以上を必ず守ること。 */
.uform input{font:inherit; font-size:16px; padding:10px 12px; border-radius:10px;
  border:1px solid #0000001f; background:#fff; width:100%}
.uform input:focus{outline:none; border-color:#ff6b9d; box-shadow:0 0 0 3px #ff6b9d26}
/* パスワードの「表示／隠す」。入力欄の中に重ねるので、文字が下へ潜らないよう
   右側を必ず空けておくこと。⚠️ ボタンの文字も16px未満にしない（iOSの自動ズームは
   入力欄が対象だが、ここだけ小さいと押し間違えるため実寸で13px＋広い当たり判定にする） */
.pw-wrap{position:relative; display:block}
.pw-wrap input{padding-right:64px}
.pw-eye{position:absolute; right:5px; top:50%; transform:translateY(-50%);
  min-width:52px; min-height:34px; padding:0 10px; border-radius:8px; cursor:pointer;
  font:inherit; font-size:13px; font-weight:800; line-height:1;
  color:#a8447a; background:#fff0f6; border:1px solid #ff9fc255}
.pw-eye:hover{background:#ffe3ee}
.pw-eye:focus-visible{outline:2px solid #ff6b9d; outline-offset:2px}
.pw-eye[aria-pressed="true"]{color:#5c5148; background:#f2efea; border-color:#0000001f}
/* 一致しない間だけ枠を赤くする。
   ⚠️ :invalid は使わないこと。8文字に満たない入力途中も :invalid になるため、
      1文字目から赤くなってしまう。JavaScript 側で明示的に付けるクラスで判定する */
.uform input.is-mismatch,.uform input.is-mismatch:focus{
  border-color:#e0736b; box-shadow:0 0 0 3px #e0736b22}
.pw-note{font-size:11.5px; font-weight:700; color:#c0392f; line-height:1.7}
.pw-note[hidden]{display:none}
.uform small{font-size:11px; color:#8b8279; line-height:1.7}
.uform-row{flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:14px}
.uform-row label{flex:0 1 auto}
.uform-row input[type=number]{width:90px}
/* お問い合わせ。textarea と select も入力欄と同じ見た目にそろえる。
   ⚠️ font-size は16px以上（iOSの自動ズーム対策。上のコメント参照） */
.uform textarea,.uform select{font:inherit; font-size:16px; padding:10px 12px; border-radius:10px;
  border:1px solid #0000001f; background:#fff; width:100%}
.uform textarea{line-height:1.8; resize:vertical; min-height:150px}
.uform textarea:focus,.uform select:focus{outline:none; border-color:#ff6b9d;
  box-shadow:0 0 0 3px #ff6b9d26}
.uform .lbl{font-size:12px; font-weight:700; color:#4a4038}
.uform .req{color:#b3261e; font-size:10.5px; margin-left:4px}
.uform .hint{font-size:11px; color:#8b8279; line-height:1.7; font-weight:600}
/* ⚠️ 自動投稿よけの欄。人には見せないが、display:none だと埋めない仕掛けもあるため
   画面外へ追い出す方式にする。読み上げには aria-hidden で伏せてある */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.uchk{flex-direction:row !important; align-items:center; gap:8px !important}
.uchk input{width:auto; accent-color:#ff4f96}
.ubtn{align-self:flex-start; border:0; cursor:pointer; font:inherit; font-size:14px; font-weight:800;
  color:#fff; padding:11px 22px; border-radius:999px; text-decoration:none; display:inline-block;
  background:linear-gradient(135deg,#ff6b9d,#ff4f96); box-shadow:0 3px 12px #ff4f9640}
.ubtn:hover{filter:brightness(1.06)}
.ubtn-ghost{background:#efe9e2; color:#6b6259; box-shadow:none}

.upcoming{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.upcoming li{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 11px; border-radius:10px; background:#faf7f3}
.up-d{flex:none; font-size:11px; color:#6b6259}
.up-d strong{font-size:15px; color:#2f2a24}
.up-d.soon{color:#b00b3e} .up-d.soon strong{color:#b00b3e}
.up-n{flex:1; min-width:120px; font-size:13px; font-weight:700}
.up-n small{color:#8b8279; font-weight:500; margin-left:6px; font-size:11px}
.up-x{flex:none; font-size:11.5px; color:#6b6259}

.plans{width:100%; border-collapse:collapse; font-size:12.5px; margin:0 0 14px}
.plans th{background:#faf7f3; padding:9px 8px; text-align:left; font-size:11.5px; color:#6b6259;
  border-bottom:1px solid #00000012}
.plans th:not(:first-child){text-align:center; width:33%}
.plans td{padding:10px 8px; border-bottom:1px solid #0000000a; line-height:1.6}
.plans td:not(:first-child){text-align:center}
.plans .y{color:#046b3a; font-weight:800}
.plans .n{color:#a9a29a}
.plans .wip{display:block; font-size:10px; color:#a45c00; font-weight:700}
.plans .freenote{display:block; font-size:9.5px; color:#8b8279; font-weight:600}
/* 応援の金額 → 期間の段階表。金額の欄だけ左寄せに戻す */
.plans.tiers th:not(:first-child),.plans.tiers td:not(:first-child){width:auto}
.plans.tiers td:first-child{font-weight:800}
.plans.tiers td:last-child{color:#8b8279; font-size:11.5px}
.plans.tiers tr:last-child td{background:#fff8e8}

.steps{margin:0 0 14px; padding-left:20px; font-size:13px; line-height:1.95}
.steps .done{color:#046b3a; font-weight:700}

/* ---------- 応援のしかた（手順カード） ----------
   3手順のうち2番目（コードを貼る）が一番大事。平のリストだと全部同じ重さに見えて
   読み飛ばされるので、手順ごとに色を変えて進み具合が分かるようにした。 */
.stepcards{list-style:none; margin:0 0 16px; padding:0;
  display:flex; flex-direction:column; gap:10px}
.stc{position:relative; display:flex; gap:11px; align-items:flex-start;
  border-radius:13px; padding:13px 14px 13px 12px;
  border-left:5px solid var(--stc-line); background:var(--stc-bg)}
.stc-n{flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:900; color:#fff; background:var(--stc-line);
  box-shadow:0 2px 6px #0000001f}
.stc-b{min-width:0; flex:1}
.stc-t{margin:1px 0 5px; font-size:14px; font-weight:800; line-height:1.5; color:var(--stc-tx)}
.stc-p{margin:0 0 6px; font-size:12.5px; line-height:1.85}
.stc-p:last-child{margin-bottom:0}
.stc-p.done{color:#046b3a; font-weight:700}
.stc-act{margin:8px 0 0}
.ubtn-sm{font-size:12.5px; padding:8px 16px}
/* OFUSE側の画面の順。ふだんは畳んでおき、必要な人だけ開けばよい。
   ⚠️ 畳んだままでも「貼りかたが書いてある」と分かる見出しにすること。
      隠したいのではなく、手順3つの流れを長くしたくないだけ。 */
.howto{margin:8px 0 0; border-radius:9px; background:#fffdf7;
  box-shadow:inset 0 0 0 1px #0000000f}
.howto summary{cursor:pointer; padding:8px 11px; font-size:12px; font-weight:800;
  color:#8a5c00; list-style:none}
.howto summary::-webkit-details-marker{display:none}
.howto summary::before{content:"▸ "; font-weight:900}
.howto[open] summary::before{content:"▾ "}
.howto-l{margin:0; padding:0 12px 10px 30px; font-size:12px; line-height:1.9}
.howto-l li{margin-bottom:4px}
.howto-l em{display:block; font-style:normal; font-size:11px; font-weight:700;
  color:#b00b3e; line-height:1.7}

/* 貼り忘れが一番多い失敗。ここだけ強めに出す */
.stc-warn{margin:9px 0 0; font-size:11.5px; line-height:1.75; color:#8a3b00;
  background:#fff; border-radius:8px; padding:7px 10px;
  box-shadow:inset 0 0 0 1px #0000000f}
.stc-warn strong{color:#b00b3e}

/* 他ページから #code で飛んでくる。上にぴったり付くと見出しが隠れるので余白を取り、
   飛んだ直後だけ光らせて「ここです」と分かるようにする（2026-08-03 指摘） */
.stc[id]{scroll-margin-top:14px}
/* :target は「別のページから飛んできた」ときだけ効く。
   同じページの中で押されたときは JavaScript が .is-flash を付け直す */
.stc:target,.stc.is-flash{animation:stcFlash 2.4s ease-out 1}
@keyframes stcFlash{
  0%,55%{box-shadow:0 0 0 3px #f0a92c, 0 4px 18px #f0a92c55}
  100%  {box-shadow:0 0 0 0 #f0a92c00, 0 0 0 #f0a92c00}
}

/* 1=登録（桃）／2=コード（黄）／3=反映（緑）。進むほど「完了」に近づく色 */
/* OFUSE側のボタン名（ファンレターを送る）。
   どこを押せばメッセージ欄が出るのかを示すので、押すものだと分かる札にする。
   ⚠️ 手順2の地（#fff8e8）と白地の両方に載る。どちらでも読めるよう、
      札の地を濃くして白文字にした。白文字との明暗差 4.91:1、
      まわりの地との差も 4.6〜4.9:1 ある（2026-08-03 測定）。
      薄いオレンジ（#f4756b は 2.76:1）にしないこと。 */
.btn-name{display:inline-block; font-weight:900; color:#fff; background:#c24a10;
  border-radius:7px; padding:1px 8px; margin:0 2px; white-space:nowrap;
  box-shadow:0 1px 4px #c24a1040}

.stc-1{--stc-line:#ff6b9d; --stc-bg:#fff2f7; --stc-tx:#c9366f}
.stc-2{--stc-line:#f0a92c; --stc-bg:#fff8e8; --stc-tx:#8a5c00}
.stc-3{--stc-line:#2fa96b; --stc-bg:#eaf8f1; --stc-tx:#046b3a}
.stc.is-done{--stc-line:#2fa96b; --stc-bg:#eaf8f1; --stc-tx:#046b3a}

/* 有料版の画面だけ、見出しに色の帯を付けて区切りを分かりやすくする */
.doc-page .docmain h2{padding-left:10px; border-left:4px solid #ff9fc2;
  background:linear-gradient(90deg,#fff2f7,#fff0 78%); border-radius:0 8px 8px 0;
  padding-top:5px; padding-bottom:5px}
.mailhint{display:block; margin-top:3px; font-size:11.5px; color:#6b6259}
.mailhint code{background:#f2ede7; padding:2px 7px; border-radius:5px; font-size:11.5px}
.codebox{display:flex; align-items:center; gap:8px; margin:8px 0 6px}
.codebox code{flex:1; font-size:17px; font-weight:800; letter-spacing:.04em;
  background:linear-gradient(135deg,#fff0f6,#fff8ec); border:1.5px dashed #ff9fc2;
  border-radius:10px; padding:9px 13px; color:#c9366f; text-align:center}
/* ⚠️ 押す前の桃色は #ff6b9d〜#ff4f96 だった。12.5px の白文字に対して
   明暗差が 2.68〜3.08:1 しかなく、目安の 4.5:1 を下回っていた（2026-08-03 測定）。
   サイトの桃（#c9366f＝4.95:1）に寄せて濃くしてある。 */
.codecopy{flex:none; border:0; cursor:pointer; font:inherit; font-size:12.5px; font-weight:800;
  color:#fff; padding:9px 15px; border-radius:10px; white-space:nowrap;
  background:linear-gradient(135deg,#d62d72,#c9366f); box-shadow:0 2px 8px #c9366f4d}
/* ⚠️ color:#fff を必ず書くこと。このボタンは「応援のしかた」の手順リスト
   （.steps）の中にあり、`.steps .done{color:#046b3a}` が当たってしまう。
   詳しさが同じで後に書かれているぶんだけ背景は緑になるが、文字色は
   そちらの緑のままになり、緑地に緑文字で「コピーしたよ」が消えていた
   （2026-08-03 指摘）。
   ⚠️ 色だけで知らせないこと。✓ を頭に足して、色が見分けにくい人にも伝える。 */
.codecopy.done{background:#046b3a; color:#fff; box-shadow:0 2px 8px #046b3a40}
.codecopy.done::before{content:"✓ "; font-weight:900}
/* ⚠️ 押した後の「コピーしたよ」はボタンを横に広げる。とても狭い画面で
   横に並べたままだと肝心のコードが潰れるので、その場合だけ縦に積む */
@media (max-width:340px){
  .codebox{flex-wrap:wrap}
  .codebox code,.codecopy{flex:1 1 100%}
}
/* 未登録の人に見せる見本のコード。
   ⚠️ 本物と同じ見た目にしないこと。そのまま貼られると誰にも紐づかない */
.codebox.is-sample code{background:#f4f1ed; border-style:dashed; border-color:#cfc7bd;
  color:#8b8279; font-size:15px}
.code-tag{flex:none; font-size:10.5px; font-weight:800; color:#6b6259;
  background:#e6e0d8; border-radius:6px; padding:4px 9px}
.of-cta{margin:14px 0 0}
/* ---------- 月に入るときの遭遇演出 ----------
   ドラクエの敵に出会ったときのような入り方（2026-08-03 本人指示）。
   ⚠️ 待たされる演出なので、逃げ道（スキップ）を必ず残すこと。 */
.enc-lock{overflow:hidden}
.enc{position:fixed; inset:0; z-index:200; opacity:0; visibility:hidden;
  display:grid; place-items:center; cursor:pointer;
  transition:opacity .18s ease}
.enc.on{opacity:1; visibility:visible}
.enc.out{animation:encOut .6s ease-in forwards}
@keyframes encOut{ to{opacity:0; transform:scale(1.12)} }
/* 最後の「飛び込み」。おしかぶくんが手前に突っ込んで画面を抜ける */
.enc.dive .enc-kabu{animation:encDive .62s cubic-bezier(.5,0,.85,.2) forwards}
.enc.dive .enc-yell,.enc.dive .enc-win{animation:encFadeQuick .3s ease-in forwards}
@keyframes encDive{
  0%  {transform:translateY(0) scale(1) rotate(0)}
  25% {transform:translateY(24px) scale(.86) rotate(-6deg)}
  100%{transform:translateY(-14px) scale(4.6) rotate(12deg); opacity:0}
}
@keyframes encFadeQuick{ to{opacity:0} }

/* 背景。季節ごとに色を変える */
.enc-bg{position:absolute; inset:0; background:var(--enc-bg);
  animation:encFlash .55s ease-out}
.enc.s-spring{--enc-bg:radial-gradient(120% 90% at 50% 30%,#ffe3ef,#ffc7dd 45%,#8a4a68);
  --enc-ac:#ff6b9d}
.enc.s-summer{--enc-bg:radial-gradient(120% 90% at 50% 30%,#d9f6ff,#8fd8f0 45%,#134e63);
  --enc-ac:#00a3c4}
.enc.s-autumn{--enc-bg:radial-gradient(120% 90% at 50% 30%,#ffe9cf,#ffbe7a 45%,#7a3f14);
  --enc-ac:#e0761a}
.enc.s-winter{--enc-bg:radial-gradient(120% 90% at 50% 30%,#eaf4ff,#b9d8f5 45%,#2b4667);
  --enc-ac:#4a7fc4}
/* 出会いがしらの白フラッシュ */
@keyframes encFlash{
  0%  {filter:brightness(4)}
  30% {filter:brightness(1.6)}
  100%{filter:brightness(1)}
}

/* 季節の粒 */
.enc-parts{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.enc-parts i{position:absolute; left:var(--x); top:-8%; font-size:22px; font-style:normal;
  transform:scale(var(--sc)); opacity:.9;
  animation:encFall var(--du) linear var(--dl) infinite}
@keyframes encFall{
  0%  {transform:translateY(0) rotate(0) scale(var(--sc)); opacity:0}
  10% {opacity:.95}
  100%{transform:translateY(112vh) rotate(var(--rz)) scale(var(--sc)); opacity:.15}
}

/* 右下の常駐おしかぶくんが、画面の真ん中まで飛んでくる。
   出発点(--fx/--fy)は、実物のボタンの位置をJSがその場で測って入れる。 */
.enc-stage{position:relative; display:grid; place-items:center; margin-bottom:6vh}
.enc-kabu{width:min(46vw,190px); height:min(46vw,190px); display:block;
  filter:drop-shadow(0 12px 26px #0006);
  animation:encFly 1.05s cubic-bezier(.2,1.35,.3,1) .1s both,
            encHype 1.15s cubic-bezier(.3,1.6,.4,1) 1.15s 2,
            encIdle 1.5s ease-in-out 3.5s infinite}
/* 右下から中央へ。回転しながら大きくなって、勢いよく着地する */
@keyframes encFly{
  0%  {transform:translate(var(--fx,38vw),var(--fy,42vh)) scale(.14) rotate(-40deg); opacity:0}
  15% {opacity:1}
  62% {transform:translate(0,-30px) scale(1.22) rotate(375deg)}
  82% {transform:translate(0,10px) scale(.94) rotate(360deg)}
  100%{transform:translate(0,0) scale(1) rotate(360deg)}
}
/* 着いてから2回、思いきり跳ねる（ひゃっほー！） */
@keyframes encHype{
  0%  {transform:translateY(0) scale(1) rotate(0)}
  35% {transform:translateY(-46px) scale(1.14) rotate(-9deg)}
  70% {transform:translateY(4px) scale(.95) rotate(5deg)}
  100%{transform:translateY(0) scale(1) rotate(0)}
}
@keyframes encIdle{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%    {transform:translateY(-9px) rotate(3deg)}
}
/* 着地の衝撃波 */
.enc-ring{position:absolute; width:min(46vw,190px); height:min(46vw,190px);
  border-radius:50%; border:4px solid #fff; opacity:0;
  animation:encShock .75s ease-out 1.1s both}
@keyframes encShock{
  0%  {transform:scale(.5); opacity:.85}
  100%{transform:scale(2.3); opacity:0}
}
/* 「ひゃっほー！」の掛け声 */
.enc-yell{position:absolute; top:-4%; right:-6%; z-index:2; white-space:nowrap;
  font-size:clamp(20px,6vw,34px); font-weight:900; letter-spacing:.02em; color:#fff;
  text-shadow:0 3px 0 var(--enc-ac), 0 7px 18px #0007;
  opacity:0; animation:encYell .55s cubic-bezier(.2,1.8,.4,1) 1.2s both,
                       encYellBob 1s ease-in-out 1.75s 2}
@keyframes encYell{
  0%  {transform:scale(.2) rotate(-26deg); opacity:0}
  65% {transform:scale(1.3) rotate(8deg); opacity:1}
  100%{transform:scale(1) rotate(-4deg); opacity:1}
}
@keyframes encYellBob{
  0%,100%{transform:scale(1) rotate(-4deg)}
  50%    {transform:scale(1.09) rotate(4deg)}
}
/* 飛んでいる間、実物の常駐ボタンは隠す。2匹いるように見えないため */
.oshi-btn.is-flying{opacity:0; pointer-events:none}

/* メッセージ枠。黒地に白枠の、あの感じ */
.enc-win{position:absolute; left:50%; bottom:9vh; transform:translateX(-50%) translateY(16px);
  width:min(90vw,520px); min-height:74px; box-sizing:border-box;
  background:#0b1020ee; border:3px solid #fff; border-radius:10px;
  padding:15px 18px; color:#fff; opacity:0;
  box-shadow:0 10px 34px #0008, inset 0 0 0 2px #0b1020;
  animation:encWin .34s ease-out 1.35s both}
@keyframes encWin{ to{opacity:1; transform:translateX(-50%) translateY(0)} }
.enc-msg{margin:0; font-size:clamp(15px,4.4vw,20px); font-weight:800; line-height:1.55;
  letter-spacing:.04em; min-height:1.6em}
.enc-cur{position:absolute; right:14px; bottom:9px; font-size:13px; opacity:0}
.enc.typed .enc-cur{animation:encCur .85s steps(1) infinite}
@keyframes encCur{ 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* スキップ。1.2秒たってから出す（すぐ出すと演出が始まる前に消される） */
.enc-skip{position:absolute; right:12px; top:calc(12px + env(safe-area-inset-top));
  border:0; border-radius:999px; padding:8px 14px; cursor:pointer;
  font:inherit; font-size:11.5px; font-weight:800; color:#fff;
  background:#00000059; opacity:0; transition:opacity .3s ease; pointer-events:none}
.enc.skippable .enc-skip{opacity:1}

@media (prefers-reduced-motion:reduce){
  .enc{display:none}
}

/* ---------- OFUSEへ出る前の足止め ----------
   月の演出と同じ「おしかぶくんが真ん中に来る」作り。ただし中身は注意書き。
   ⚠️ 背景を押したら「やめる」。ここで進ませないこと。お金の絡む外部サイトなので、
      進むのはボタンを押したときだけにする。
   ⚠️ prefers-reduced-motion でも消さない（.enc と違うところ）。
      演出ではなく、払う前に読んでほしい注意だから。動きだけを止める。 */
.ofg{position:fixed; inset:0; z-index:210; opacity:0; visibility:hidden;
  display:grid; place-items:center; transition:opacity .18s ease}
.ofg.on{opacity:1; visibility:visible}
.ofg-bg{position:absolute; inset:0; cursor:pointer;
  background:radial-gradient(120% 90% at 50% 28%,#fff4dd,#ffd9a8 45%,#7a4a12)}
.ofg-parts{z-index:1}

.ofg-stage{position:relative; display:grid; place-items:center; margin-bottom:16vh; z-index:2;
  pointer-events:none}
.ofg-kabu{width:min(38vw,150px); height:min(38vw,150px); display:block;
  filter:drop-shadow(0 12px 22px #00000038);
  animation:ofgIn .72s cubic-bezier(.2,1.5,.4,1) both, ofgBob 2.4s ease-in-out .8s infinite}
@keyframes ofgIn{
  0%  {transform:translate(var(--fx,34vw),var(--fy,40vh)) scale(.3) rotate(-24deg); opacity:0}
  60% {transform:translate(0,0) scale(1.14) rotate(6deg); opacity:1}
  100%{transform:translate(0,0) scale(1) rotate(0)}
}
@keyframes ofgBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.ofg-ring{position:absolute; width:min(38vw,150px); height:min(38vw,150px);
  border-radius:50%; border:3px solid #ffffffbb;
  animation:ofgRing 1.5s ease-out .3s infinite}
@keyframes ofgRing{ 0%{transform:scale(.7); opacity:.9} 100%{transform:scale(1.7); opacity:0} }
.ofg-yell{position:absolute; top:-8%; right:-10%; z-index:2; white-space:nowrap;
  font-size:clamp(14px,4vw,19px); font-weight:900; color:#fff; letter-spacing:.04em;
  background:#e8622b; border-radius:999px; padding:6px 14px;
  box-shadow:0 6px 16px #00000033;
  animation:ofgPop .5s cubic-bezier(.2,1.7,.4,1) .55s both}
@keyframes ofgPop{ 0%{transform:scale(.2) rotate(-14deg); opacity:0}
  100%{transform:scale(1) rotate(-7deg); opacity:1} }

.ofg-win{position:absolute; left:50%; bottom:6vh; transform:translateX(-50%) translateY(16px);
  width:min(92vw,540px); box-sizing:border-box;
  background:#0b1020ee; border:3px solid #fff; border-radius:12px;
  padding:16px 18px 14px; color:#fff; opacity:0; z-index:3;
  box-shadow:0 12px 36px #0008, inset 0 0 0 2px #0b1020;
  animation:ofgWin .3s ease-out .5s both}
@keyframes ofgWin{ to{opacity:1; transform:translateX(-50%) translateY(0)} }
.ofg-msg{margin:0 0 13px; font-size:clamp(14px,3.9vw,17px); font-weight:800; line-height:1.9;
  letter-spacing:.02em; min-height:5.4em}
/* 「推し会員コード」だけ札にして目立たせる。これが貼られていないと
   支援を受け取っても有料版を付けられないので、文中で見落とされたら困る。
   ⚠️ 濃い黄色の上に濃い茶の字。暗い枠の中で色だけ変えても目に入らないので、
      背景ごと変えて札にする。文字色との明暗差は十分にとってある。
   ⚠️ 打っている途中は中身が空になる。空のまま余白だけ出ると
      札が先に見えてしまうので、空のときは消しておく。 */
.ofg-hot{display:inline-block; font-weight:900; color:#4a2600;
  background:linear-gradient(100deg,#ffe98a,#ffd93b 30%,#ffab2b 60%,#ffe98a);
  background-size:240% 100%; animation:rainbowFlow 3.2s linear infinite;
  border-radius:9px; padding:1px 9px; margin:0 3px;
  transform:rotate(-1.4deg);
  box-shadow:0 3px 12px #ffb02f5c, inset 0 0 0 1.5px #ffffff8c;
  text-shadow:0 1px 0 #fff6}
.ofg-hot:empty{display:none}
@media (prefers-reduced-motion:reduce){
  .ofg-hot{animation:none; background:#ffd93b; transform:none}
}

.ofg-acts{display:flex; flex-wrap:wrap; gap:9px}
/* ⚠️ 押せるのは読み終わるころ。すぐ押せると読まずに進んでしまう */
.ofg-b{flex:1 1 46%; text-align:center; text-decoration:none; cursor:pointer;
  border:0; border-radius:11px; padding:13px 12px; font:inherit;
  font-size:14px; font-weight:800; line-height:1.4;
  opacity:.35; pointer-events:none; transition:opacity .3s ease, transform .12s ease}
.ofg.ready .ofg-b{opacity:1; pointer-events:auto}
.ofg-b:active{transform:translateY(1px)}
.ofg-code{background:#fff; color:#8a4a12}
.ofg-go{background:linear-gradient(135deg,#ff8a3d,#ffb056); color:#fff}
.ofg-count{margin:11px 0 0; font-size:12px; font-weight:700; color:#ffd9a8; text-align:center}
.ofg-cancel{display:block; margin:9px auto 0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:12px; font-weight:700; color:#ffffff9c;
  text-decoration:underline; padding:6px 10px}
.ofg-cancel:hover{color:#fff}
.ofg-b:focus-visible,.ofg-cancel:focus-visible{outline:3px solid #fff; outline-offset:2px}

/* 動きを減らす設定。中身は残し、飛んでくる動きと粒だけ止める */
.ofg.is-soft .ofg-parts{display:none}
.ofg.is-soft .ofg-kabu{animation:none}
.ofg.is-soft .ofg-ring{display:none}
.ofg.is-soft .ofg-yell,.ofg.is-soft .ofg-win{animation:none; opacity:1;
  transform:translateX(-50%)}
.ofg.is-soft .ofg-yell{transform:none}
.ofg.is-soft .ofg-msg{min-height:0}

/* ---------- おしかぶくんに聞く（会社の話） ----------
   会社名や優待の説明を押すと開く（2026-08-03 本人指示）。
   ⚠️ 名前は必ず qa- で始めること。ask- は月ページのシートの中にある
      「おしかぶくんに聞いてみる」（#ask / .ask-btn / .ask-body …）が
      すでに使っている。うっかり .ask を定義したら、そちらが
      position:fixed / visibility:hidden をかぶって画面から消えた
      （2026-08-03 指摘）。同じ名前を作らない。
   ⚠️ おしかぶくんのパネル（z-index:61）の上から開くので、必ずその上に置く。 */
[data-ask]{cursor:pointer; text-decoration:underline; text-decoration-style:dotted;
  text-underline-offset:3px; text-decoration-color:#00000038}
[data-ask]:hover{text-decoration-color:#ff6b9d}
[data-ask]:focus-visible{outline:2px solid #ff6b9d; outline-offset:2px; border-radius:4px}

.qa{position:fixed; inset:0; z-index:220; opacity:0; visibility:hidden;
  transition:opacity .18s ease}
.qa.on{opacity:1; visibility:visible}
.qa-veil{position:absolute; inset:0; background:#0007; cursor:pointer}
.qa-body{position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:100%; max-width:520px; max-height:88vh; overflow:auto;
  background:#fffdf9; border-radius:18px 18px 0 0; padding:16px 16px 26px;
  box-shadow:0 -8px 30px #00000038;
  animation:qaUp .26s cubic-bezier(.2,.9,.3,1) both}
@keyframes qaUp{ from{transform:translateX(-50%) translateY(24px); opacity:0} }
/* よくある質問の中に置く金額の一覧（2026-08-04）。
   表を隠しているときでも「500円なら何か月か」が読めるようにするためのもの。 */
.faq-tiers{margin:8px 0 10px; padding:0; list-style:none;
  display:grid; gap:5px}
.faq-tiers li{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
  background:#0000000a; border-radius:8px; padding:6px 10px; font-size:12.5px}
.faq-tiers b{font-weight:800; min-width:5.2em}
.faq-tiers strong{color:#b3407a}
.faq-tiers small{opacity:.65; font-size:11px}

/* おしかぶくんのパネルの中の神７・二軍。
   本文とボタンの境目が分かるよう、上に区切りを1本引く（2026-08-04） */
.qa-fav{margin-top:14px; padding-top:12px; border-top:1px solid #0000000f}
.qa-fav .favbtns{margin-top:0}
.qa-x{position:absolute; right:10px; top:8px; width:34px; height:34px; border:0;
  border-radius:50%; background:#0000000d; cursor:pointer; font-size:19px; line-height:1;
  color:#6b6259}
.qa-top{display:flex; align-items:center; gap:10px; padding-right:38px; margin-bottom:10px}
.qa-face{flex:none; width:44px; height:44px}
.qa-ttl{margin:0; font-size:16px; font-weight:900; line-height:1.4; color:#3d332b}
.qa-say{margin:0 0 10px; font-size:13.5px; font-weight:700; line-height:1.8; color:#4a4038}

/* 事実の一覧。⚠️ ここは貯めてある値だけ。無い項目は出さない */
.qa-facts{display:flex; flex-direction:column; gap:1px; margin:0 0 12px;
  background:#0000000f; border-radius:10px; overflow:hidden}
.qa-f{display:flex; gap:10px; background:#fffdf9; padding:7px 11px}
.qa-fk{flex:0 0 4.5em; font-size:11px; font-weight:800; color:#8b8279; line-height:1.9}
.qa-fv{font-size:12.5px; font-weight:700; color:#4a4038; line-height:1.75}

.qa-h{margin:14px 0 6px; font-size:12.5px; font-weight:900; color:#c9366f}
.qa-p{margin:0 0 7px; font-size:13px; line-height:1.9; color:#4a4038}
.qa-ai{margin:2px 0 0; font-size:10.5px; line-height:1.7; color:#8b8279}
.qa-src{display:inline-block; margin-top:3px; font-size:11px; font-weight:800; color:#c9366f}

.qa-bl{display:flex; flex-direction:column; gap:8px}
.qa-b{background:#fff; border-radius:11px; padding:10px 12px;
  box-shadow:inset 0 0 0 1px #00000012}
.qa-bh{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:4px}
.qa-bm{font-size:12px; font-weight:900; color:#c9366f}
.qa-bc{font-size:10px; font-weight:800; color:#6b6259; background:#f2efea;
  border-radius:999px; padding:2px 8px}
.qa-bw{font-size:10px; font-weight:800; color:#fff; background:#c0392f;
  border-radius:999px; padding:2px 8px}
.qa-bt{font-size:13px; font-weight:800; line-height:1.7; color:#3d332b}
.qa-bd{font-size:11.5px; line-height:1.8; color:#6b6259}

/* ⚠️ 知らないことは、知らないと言う。それらしい説明で埋めないこと */
.qa-no{margin:12px 0 0; font-size:12px; line-height:1.85; color:#8a5c00;
  background:#fff8e8; border-radius:10px; padding:9px 12px;
  box-shadow:inset 0 0 0 1px #f0d48899}
.qa-note{margin:12px 0 0; font-size:10.5px; line-height:1.75; color:#8b8279}
@media (prefers-reduced-motion:reduce){ .qa-body{animation:none} }

/* ---------- おしかぶくんのリアクション ----------
   入れ先と、上がったか下がったかで手応えを変える（2026-08-03 本人指示）。
     昇格 = ド派手／神７登録 = 派手／二軍登録 = 地味／降格 = しょんぼり
   ⚠️ 画面の操作をふさがないこと。pointer-events:none を必ず残す。 */
.oact{position:fixed; inset:0; z-index:80; display:grid; place-items:center;
  pointer-events:none; opacity:0; visibility:hidden}
.oact.on{opacity:1; visibility:visible}
.oact-card{position:relative; display:flex; align-items:center; gap:11px;
  padding:13px 20px 13px 14px; border-radius:999px; background:#fff;
  box-shadow:0 10px 34px #00000026, 0 0 0 2px #0000000a;
  transform:scale(.7); opacity:0}
.oact-kabu{width:46px; height:46px; flex:none; display:block}
.oact-tx{display:flex; flex-direction:column; line-height:1.35}
.oact-msg{font-size:16px; font-weight:900; letter-spacing:.01em}
.oact-sub{font-size:10.5px; font-weight:700; font-style:normal; opacity:.62; margin-top:2px}
/* 背後で回る輪。派手な2種類だけ出す */
.oact-ring{position:absolute; inset:-8px; border-radius:999px; z-index:-1; opacity:0}
/* 紙吹雪の親。中心から放射状に飛ばす */
.oact-sp{position:absolute; left:50%; top:50%; width:0; height:0}
.oact-sp i{position:absolute; left:0; top:0; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:2px; opacity:0;
  background:linear-gradient(135deg,#ff6b9d,#ffd84d)}

/* ⚠️ アニメーションは必ず .on を付けた状態で始めること。
   種類のクラスだけで始めると、まだ見えていないうちに動き出して
   途中から表示されることがある。JS 側は .on を付ける直前に
   レイアウトを流し直しているので、この形なら毎回先頭から流れる。 */

/* --- 昇格（ド派手） --- */
.oact.is-up.on .oact-card{
  animation:oactPop .5s cubic-bezier(.16,1.4,.4,1) forwards,
            oactOut .32s ease-in 1.55s forwards}
.oact.is-up .oact-msg{background:linear-gradient(100deg,#ff4f96,#ff8f4d 40%,#ffc42e);
  -webkit-background-clip:text; background-clip:text; color:transparent; font-size:18px}
.oact.is-up.on .oact-kabu{animation:oactSpin .75s cubic-bezier(.2,1.2,.3,1)}
.oact.is-up.on .oact-ring{opacity:1; animation:oactRing 1.1s ease-out;
  background:conic-gradient(#ff6b9d,#ffd84d,#7ad17a,#5bc8f5,#c47ee0,#ff6b9d)}
.oact.is-up.on .oact-sp i{animation:oactBurst 1.1s cubic-bezier(.1,.8,.3,1) var(--t) forwards}

/* --- 神７に登録（派手） --- */
.oact.is-kami.on .oact-card{
  animation:oactPop .42s cubic-bezier(.16,1.3,.4,1) forwards,
            oactOut .3s ease-in 1.2s forwards}
.oact.is-kami .oact-msg{color:#c9366f}
.oact.is-kami.on .oact-kabu{animation:oactJump .6s ease-out}
.oact.is-kami.on .oact-sp i{animation:oactBurst .9s cubic-bezier(.1,.8,.3,1) var(--t) forwards}
.oact.is-kami .oact-sp i{background:linear-gradient(135deg,#ffd84d,#ff8f4d)}

/* --- 二軍に登録（地味） --- */
.oact.is-nigun .oact-card{padding:10px 16px 10px 12px;
  box-shadow:0 6px 20px #00000018, 0 0 0 1px #0000000d}
.oact.is-nigun.on .oact-card{
  animation:oactSlide .3s ease-out forwards, oactOut .26s ease-in .84s forwards}
.oact.is-nigun .oact-kabu{width:36px; height:36px}
.oact.is-nigun.on .oact-kabu{animation:oactNod .55s ease-in-out}
.oact.is-nigun .oact-msg{font-size:13.5px; color:#3d5ea8}

/* --- 降格（しょんぼり） --- */
.oact.is-down .oact-card{padding:11px 17px 11px 13px; background:#f4f2ef;
  box-shadow:0 6px 20px #00000018, 0 0 0 1px #0000000f}
.oact.is-down.on .oact-card{
  animation:oactDrop .42s ease-out forwards, oactOut .28s ease-in 1.02s forwards}
.oact.is-down .oact-kabu{width:38px; height:38px; filter:grayscale(.55)}
.oact.is-down.on .oact-kabu{animation:oactDroop .8s ease-out forwards}
.oact.is-down .oact-msg{font-size:13.5px; color:#7a736a}

@keyframes oactPop{
  0%  {transform:scale(.55) rotate(-6deg); opacity:0}
  60% {transform:scale(1.08) rotate(1.5deg); opacity:1}
  100%{transform:scale(1) rotate(0); opacity:1}
}
@keyframes oactSlide{
  from{transform:translateY(14px) scale(.96); opacity:0}
  to  {transform:translateY(0) scale(1); opacity:1}
}
@keyframes oactDrop{
  0%  {transform:translateY(-10px) scale(.97); opacity:0}
  70% {transform:translateY(3px) scale(1); opacity:1}
  100%{transform:translateY(0) scale(1); opacity:1}
}
@keyframes oactOut{ to{transform:scale(.94); opacity:0} }
@keyframes oactSpin{
  0%  {transform:rotate(0) scale(.7)}
  70% {transform:rotate(375deg) scale(1.12)}
  100%{transform:rotate(360deg) scale(1)}
}
@keyframes oactJump{
  0%  {transform:translateY(0) scale(.9)}
  45% {transform:translateY(-13px) scale(1.12)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes oactNod{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(3px)}
}
/* うなだれる。回転で「しょんぼり」を出す */
@keyframes oactDroop{
  0%  {transform:rotate(0) translateY(-3px)}
  100%{transform:rotate(11deg) translateY(3px)}
}
@keyframes oactRing{
  0%  {transform:scale(.75) rotate(0); opacity:.85}
  100%{transform:scale(1.5) rotate(180deg); opacity:0}
}
@keyframes oactBurst{
  0%  {transform:rotate(var(--a)) translateX(0) scale(.4); opacity:1}
  70% {opacity:1}
  100%{transform:rotate(var(--a)) translateX(var(--d)) scale(.5) ; opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .oact-card,.oact-kabu,.oact-ring,.oact-sp i{animation:none !important;
    transform:none; opacity:1}
  .oact-ring{display:none}
}

/* ---------- よくある質問 ----------
   質問と答えが同じ見た目で続くと、どこまでが質問か分からず読みにくい（2026-08-03 指摘）。
   Q/A の丸印を付け、質問だけ色を敷いて1問1答が1枚のカードに見えるようにする。 */
.faq{margin:0; font-size:12.5px}
.faq dt{position:relative; margin:14px 0 0; padding:11px 13px 11px 40px;
  font-weight:800; line-height:1.65; color:#a8305c;
  background:linear-gradient(120deg,#fff2f7,#fff8ec);
  border-left:4px solid #ff9fc2; border-radius:10px 10px 0 0}
.faq dt:first-of-type{margin-top:0}
.faq dt::before{content:"Q"; position:absolute; left:12px; top:10px;
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; font-weight:900; color:#fff; letter-spacing:0;
  background:linear-gradient(135deg,#ff6b9d,#ff4f96);
  box-shadow:0 2px 5px #ff4f9640}
.faq dd{position:relative; margin:0; padding:11px 13px 13px 40px;
  color:#5a5149; line-height:1.85; background:#fff;
  border-left:4px solid #ffe0ea; border-radius:0 0 10px 10px;
  box-shadow:0 1px 5px #0000000f}
.faq dd::before{content:"A"; position:absolute; left:12px; top:11px;
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; font-weight:900; color:#fff; letter-spacing:0; background:#b6ada3}
.faq dd code{background:#f2ede7; padding:1px 6px; border-radius:5px; font-size:11.5px}

/* ---------- リアルタイム株価を見る（外部サイトへの案内） ----------
   必要金額の目安のそばに置くボタンと、押したとき出る案内のポップアップ（app.js の OshiPrice）。
   ⚠️ Yahoo・Google の画面は iframe 埋め込みが拒否されるので、中に出すのではなく
      新しいタブで開く。ポップアップは「外へ出ることの断り」の役。
   ⚠️ シート(51)・おしかぶくんのパネル(61)・よくある質問(220)のどこから開いても
      上に来るよう、いちばん上(230)に置く。 */
.kp-open{display:inline-flex; align-items:baseline; gap:2px; border:1.5px solid #c3d2f0;
  background:#fff; color:#2f4f8f; border-radius:999px; padding:5px 12px;
  font-size:11.5px; font-weight:800; cursor:pointer; text-decoration:none;
  line-height:1.4; transition:.15s}
.kp-open:hover{border-color:#2f4f8f; background:#f4f8ff}
.kp-open small{font-size:9.5px; font-weight:800; opacity:.75}
.kp-mini{margin-left:8px; padding:2px 9px; font-size:10px}
.sheet .amtnow{margin-top:-2px}
.hit-facts .kp-open{margin-top:4px; display:inline-flex}

.kp{position:fixed; inset:0; z-index:230; opacity:0; visibility:hidden;
  transition:opacity .18s ease}
.kp.on{opacity:1; visibility:visible}
.kp-veil{position:absolute; inset:0; background:#0007; cursor:pointer}
.kp-body{position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:100%; max-width:520px; background:#fffdf9; border-radius:18px 18px 0 0;
  padding:16px 16px calc(24px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 30px #00000038;
  animation:kpUp .26s cubic-bezier(.2,.9,.3,1) both}
@keyframes kpUp{ from{transform:translateX(-50%) translateY(24px); opacity:0} }
.kp-x{position:absolute; right:10px; top:8px; width:34px; height:34px; border:0;
  border-radius:50%; background:#0000000d; cursor:pointer; font-size:19px; line-height:1;
  color:#6b6259}
.kp-ttl{margin:0 0 2px; font-size:16px; font-weight:900; color:#3d332b; padding-right:38px}
.kp-name{margin:0 0 8px; font-size:12px; font-weight:800; color:#8b8279}
.kp-say{margin:0 0 12px; font-size:12.5px; font-weight:700; line-height:1.8; color:#4a4038}
.kp-go{display:flex; align-items:center; justify-content:center; gap:6px;
  border-radius:999px; padding:12px 14px; font-size:13.5px; font-weight:800;
  text-decoration:none; margin-bottom:8px}
.kp-yahoo{color:#fff; background:linear-gradient(120deg,#e8467c,#ff6b9d);
  box-shadow:0 3px 12px #ff6b9d44}
.kp-google{color:#2f4f8f; background:#fff; box-shadow:inset 0 0 0 2px #c3d2f0}
.kp-ex{font-size:12px; opacity:.85}
.kp-note{margin:8px 0 0; font-size:10.5px; line-height:1.75; color:#8b8279}
@media (prefers-reduced-motion:reduce){ .kp-body{animation:none} }