/* slot.microfund.co.jp（絵合わせ（遊びの円））。スマホの幅 360px が主。字は 12px 以上。
   注記（.sl-note）は、本文と同じ濃さの色（薄い色にしない＝法務部の条件 5）。
   **赤と金の配色・ネオン・光る・揺れる・点滅する飾りは、入れない**（条件 9・20。色は、会社のサイトと同じ 青・白・灰色だけ。animation と transition は 1つも書かない）。
   グラフは 1本の線だけ（色は、サイトのリンクの青）。字は SVG の外に置く */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lead-s { font-size: 15px; line-height: 1.7; margin: 0 0 10px; overflow-wrap: anywhere; }
.internal-banner { font-size: 14px; line-height: 1.6; background: #fff8e1; border: 1px solid #b98900; border-radius: 10px; padding: 8px 10px; }
.footer-lang { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; }
.footer-lang a { display: inline-block; padding: 8px 2px; min-height: 44px; }
.footer-lang a.on { font-weight: 700; color: var(--text); text-decoration: none; }
button.btn { font: inherit; font-weight: 700; cursor: pointer; width: 100%; }
button.btn[disabled] { opacity: .55; cursor: default; }
.btn-quiet { border-color: var(--border); color: var(--muted); font-weight: 400; font-size: 14px; }
.reset-form { margin: 18px 0 8px; }
.reset-form .asof { font-size: 13px; margin: 4px 0 0; }
.sl-board { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 12px 10px; margin: 0 0 12px; }
.sl-board p, .sl-text, .sl-note { overflow-wrap: anywhere; }
.sl-reels { display: flex; justify-content: center; gap: 8px; margin: 2px 0 8px; }
.sl-reel { flex: 0 1 88px; height: 88px; display: flex; align-items: center; justify-content: center; font-size: 48px; line-height: 1;
  background: #eef1f6; border: 1px solid var(--border); border-radius: 12px; }
.sl-reel-blank { color: #8a94a6; font-size: 28px; }
.sl-reel.is-spinning { background: #e3e8f0; }
.sl-result { font-size: 15px; line-height: 1.5; font-weight: 700; margin: 0 0 8px; min-height: 23px; text-align: center; }
.sl-now { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin: 0 0 8px; }
.sl-balance { font-size: 18px; line-height: 1.5; font-weight: 700; margin: 0 0 2px; }
.sl-note { font-size: 13px; line-height: 1.6; color: var(--text); margin: 0 0 8px; }
.sl-now .sl-note { margin: 0; }
.sl-msg { font-size: 15px; line-height: 1.6; font-weight: 700; margin: 0 0 8px; }
.sl-rest { font-size: 14px; line-height: 1.6; margin: 0 0 8px; }
.sl-text { font-size: 13px; line-height: 1.6; color: var(--text); margin: 0 0 6px; }
.sl-form { margin: 4px 0 6px; }
.sl-form .btn { min-height: 48px; font-size: 16px; }
.sl-h { font-size: 15px; line-height: 1.5; margin: 14px 0 4px; }
.sl-chart { margin: 0 0 4px; }
.sl-svg { display: block; width: 100%; height: auto; max-width: 100%; }
.sl-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
.sl-base { stroke: #8a94a6; stroke-width: 1; }
.sl-path { fill: none; stroke: var(--link); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sl-last { fill: var(--link); stroke: var(--panel); stroke-width: 2; }
.sl-hit { fill: transparent; stroke: none; }
.sl-axis { font-size: 12px; line-height: 1.4; color: var(--text); margin: 0; }
/* 表: 語の途中では折らない。入り切らない幅では、表だけ横に送れる（ページは横にはみ出さない） */
.sl-tbl-box { overflow-x: auto; margin: 0 0 6px; }
.sl-tbl { font-size: 12px; margin: 0; table-layout: auto; }
.sl-tbl th, .sl-tbl td { padding: 5px 4px; overflow-wrap: break-word; }
.sl-tbl th { font-size: 12px; line-height: 1.4; }
.sl-tbl th.num { white-space: normal; }
.sl-emoji { font-size: 15px; white-space: nowrap; }
.sl-top { font-size: 13px; line-height: 1.6; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin: 0 0 10px; overflow-wrap: anywhere; }
.sl-session { font-size: 13px; line-height: 1.6; color: var(--text); margin: 0 0 8px; overflow-wrap: anywhere; }
.sl-fold { border: 1px solid var(--border); border-radius: 10px; padding: 0 10px; margin: 0 0 10px; }
.sl-fold > summary { cursor: pointer; font-size: 14px; line-height: 1.5; font-weight: 700; color: var(--link); padding: 12px 0; min-height: 44px; }
.sl-fold[open] { padding-bottom: 8px; }
.sl-deposit { min-height: 48px; }
.svc-title { font-size: 15px; margin: 0 0 6px; }
.svc-list { list-style: none; padding: 0; margin: 0 0 12px; }
.svc-list a { display: inline-block; padding: 8px 0; }
/* 絵柄の絵（コードで描いた SVG。templates/_sprite.html）。枠の中は 56px・表の中は 18px */
.sl-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sl-sym { display: inline-block; width: 18px; height: 18px; vertical-align: middle; }
.sl-reel .sl-sym { width: 56px; height: 56px; }
.sl-tbl td.sl-gain { white-space: normal; }
/* ===== 台（縦長の筐体）。2026-10-06 昼、社長「スロットのデザインをブラッシュアップしてください。パチンコ屋にある感じのものがいいです。」 =====
   コードの CSS と SVG だけ（外の絵・写真・AI で作った絵なし）。実在の台・メーカーの形や絵柄をまねない。赤・金・黒。金属のつやは、色の段で。
   **動く物は 2つだけ**: レバー（下がる・戻る）と、ランプ（そろった時だけ、明るくなって 2秒で戻る。1回。点滅しない）。
   「動きを減らす」の端末では、どちらも、動きを付けずに色・絵だけ替わる。右の 50px はレバーの場所 */
.sl-machine { position: relative; max-width: 440px; margin: 0 auto 10px; padding: 0 50px 0 12px; border: 3px solid #c99a1e; border-radius: 26px 26px 16px 16px; overflow: hidden;
  background: linear-gradient(90deg, #120404 0%, #5f0e0a 5%, #a81f16 22%, #b9261b 50%, #a81f16 78%, #5f0e0a 95%, #120404 100%);
  box-shadow: inset 0 0 0 2px #5a3d00, 0 3px 0 #2a1a00; }
/* (1) 上の飾りの板: ランプの並びと、注意書きの板 */
.sl-marquee { margin: 0 -50px 8px -12px; padding: 7px 10px 6px; border-bottom: 3px solid #5a3d00;
  background: linear-gradient(180deg, #2a2a2e 0%, #0f0f12 100%); }
.mc-lamps { display: flex; justify-content: space-between; align-items: center; margin: 0 4px 5px; }
.mc-lamp { display: block; width: 12px; height: 12px; border-radius: 50%; background: #6b4a12; border: 2px solid #2b1c00; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .35);
  transition: background-color .3s linear, box-shadow .3s linear; }
.sl-machine.is-lit .mc-lamp { background: #ffe27a; box-shadow: 0 0 6px 2px rgba(255, 226, 122, .7); }
.sl-marquee-note { margin: 0; padding: 4px 8px; font-size: 12px; line-height: 1.5; font-weight: 700; color: #2b1a00; text-align: center; overflow-wrap: anywhere;
  background: linear-gradient(180deg, #f6d56a 0%, #d9a521 100%); border: 2px solid #5a3d00; border-radius: 6px; }
/* (2) 窓: 金属のふち・暗い中・3つの枠（上下を暗くして、丸みに見せる）・ガラスの映り込み */
.mc-window { position: relative; margin: 0 0 8px; padding: 5px; border-radius: 14px; background: linear-gradient(135deg, #f4f5f7 0%, #8d939c 38%, #e7eaee 58%, #646a73 100%); box-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.mc-window::after { content: ""; position: absolute; left: 5px; right: 5px; top: 5px; bottom: 5px; border-radius: 10px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, 0) 46%); }
.sl-machine .sl-reels { gap: 5px; margin: 0; padding: 7px; background: #0b0605; border-radius: 10px; }
.sl-machine .sl-reel { flex: 1 1 0; min-width: 0; height: 84px; border: 1px solid #3b2a12; border-radius: 6px;
  background: linear-gradient(180deg, #8f8468 0%, #e9dfc4 16%, #fffaf0 38%, #fffdf7 50%, #fffaf0 62%, #e9dfc4 84%, #8f8468 100%); }
.sl-machine .sl-reel.is-spinning { background: linear-gradient(180deg, #7f755c 0%, #d9cfb4 16%, #f2ead8 50%, #d9cfb4 84%, #7f755c 100%); }
.sl-machine .sl-reel-blank { color: #8a6b20; }
.sl-machine .sl-reel .sl-sym { width: 60px; height: 60px; }
/* (3) 操作の板: 結果の板・数字の表示板・「レバーを引く」・右にレバー・設定の札 */
.sl-plate { margin: 0 0 8px; padding: 6px 8px; min-height: 36px; color: #2b1a00; background: linear-gradient(180deg, #fffdf5 0%, #f3e6c4 100%); border: 2px solid #5a3d00; border-radius: 8px; }
.sl-machine .sl-result { margin: 0; min-height: 22px; font-size: 15px; color: #2b1a00; overflow-wrap: anywhere; }
.sl-used { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: #2b1a00; text-align: center; overflow-wrap: anywhere; }
/* 数字の表示板（電光の数字のような見た目。外の字体は取らない＝端末の等幅の字）。光らせない・動かさない */
.mc-led { display: flex; gap: 6px; margin: 0 0 8px; padding: 6px; background: #0a0605; border: 2px solid #8d939c; border-radius: 8px; box-shadow: inset 0 0 0 2px #000; }
.mc-led-cell { flex: 1 1 0; min-width: 0; text-align: center; }
.mc-led-label { margin: 0; font-size: 12px; line-height: 1.4; color: #f3e6c4; overflow-wrap: anywhere; }
.mc-led-num { margin: 1px 0; font-size: 19px; line-height: 1.3; font-weight: 700; color: #ffb53a; overflow-wrap: anywhere; }
.mc-led-digits { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace; font-size: 21px; letter-spacing: .03em; white-space: nowrap; }
.mc-led-unit { font-size: 12px; font-weight: 400; color: #f3e6c4; white-space: nowrap; }
.sl-stake { margin: 0; padding: 0; background: none; border: 0; border-left: 1px solid #3a3f47; border-radius: 0; color: inherit; }
.sl-machine .sl-form { margin: 0 0 10px; }
.sl-machine .sl-spin { min-height: 54px; font-size: 18px; color: #2b1a00; border: 2px solid #5a3d00; border-radius: 12px;
  background: linear-gradient(180deg, #ffe48a 0%, #f2c94c 45%, #c9911a 100%); box-shadow: 0 3px 0 #5a3d00; }
/* レバー（押す・下へ引く）。押す所は 46px × 150px。レバーの上でだけ、なぞりを受ける（touch-action: none）。
   握りが下がり、棒が縮む 0.2秒 → 回っている間は下がったまま → 結果の後に戻る 0.2秒 */
.sl-lever-btn { position: absolute; right: 1px; top: 78px; width: 46px; height: 150px; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer;
  touch-action: none; -webkit-tap-highlight-color: transparent; }
.sl-lever-btn[disabled] { cursor: default; opacity: .45; }
.sl-lever-btn:focus-visible { outline: 3px solid #fff8e6; outline-offset: -3px; border-radius: 10px; }
.sl-lever { display: block; width: 44px; height: 150px; margin: 0 auto; pointer-events: none; }
.sl-lever .lv-rod { transform-origin: 22px 100px; transition: transform .2s ease-out; }
.sl-lever .lv-knob { transition: transform .2s ease-out; }
.sl-lever-btn.is-pulled .lv-rod { transform: scaleY(.06); }
.sl-lever-btn.is-pulled .lv-knob { transform: translateY(80px); }
.sl-lever-btn.no-anim .lv-rod, .sl-lever-btn.no-anim .lv-knob { transition: none; }
.sl-lever-btn.is-pulled[disabled] { opacity: 1; }     /* 回っている間のレバーは、薄くしない（下がっている事が分かるように） */
@media (prefers-reduced-motion: reduce) { .sl-lever .lv-rod, .sl-lever .lv-knob, .mc-lamp { transition: none; } }
/* 設定 1〜5 の札（操作の板の下の段。台の幅いっぱい。札は 44px 以上の高さ・上の段に「設定 n」・下の段に戻る割合の数。
   いま選んでいる札は、金色の地と太い枠と aria-current で分かる）。動かない・光らない */
.sl-set { margin: 0 -50px 0 -12px; padding: 7px 8px 9px; border-top: 3px solid #5a3d00; background: linear-gradient(180deg, #2a2a2e 0%, #121215 100%); }
.sl-set-title { margin: 0 0 5px; font-size: 12px; line-height: 1.4; color: #f3e6c4; text-align: center; }
.sl-set-tabs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.sl-set-tabs li { margin: 0; min-width: 0; }
.sl-set-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46px; padding: 3px 1px; text-align: center; text-decoration: none;
  color: #f3e6c4; background: #3a3f47; border: 2px solid #8d939c; border-radius: 8px; }
.sl-set-tab .st-n { font-size: 12px; line-height: 1.35; font-weight: 700; white-space: nowrap; }
.sl-set-tab .st-r { font-size: 12px; line-height: 1.35; white-space: nowrap; }
.sl-set-tab.on { color: #2b1a00; background: linear-gradient(180deg, #ffe48a 0%, #d9a521 100%); border: 3px solid #fff8e6; }
.sl-set.is-busy .sl-set-tab { opacity: .5; pointer-events: none; }
/* (4) 下の飾りの板: ひし形の模様と、両わきのスピーカーの網の絵（絵柄・キャラクターの絵は置かない） */
.mc-bottom { display: flex; align-items: stretch; gap: 8px; height: 40px; margin: 0 -50px 0 -12px; padding: 7px 10px; border-top: 3px solid #5a3d00;
  background: linear-gradient(180deg, #7d120c 0%, #4a0906 100%); }
.mc-grille { flex: 0 0 54px; border-radius: 6px; border: 2px solid #1a1a1d; background-color: #2a2a2e;
  background-image: radial-gradient(circle, #060607 0, #060607 1.6px, transparent 1.9px); background-size: 7px 7px; }
.mc-pattern { flex: 1 1 auto; border-radius: 6px; border: 2px solid #5a3d00; background-color: #c99a1e;
  background-image: linear-gradient(45deg, #a8780f 25%, transparent 25%, transparent 75%, #a8780f 75%), linear-gradient(45deg, #a8780f 25%, transparent 25%, transparent 75%, #a8780f 75%);
  background-size: 14px 14px; background-position: 0 0, 7px 7px; }
/* 音の入・切（台のすぐ下。押す所は 44px） */
.sl-sound-row { margin: 0 0 8px; text-align: right; }
button.btn.sl-sound-btn[hidden] { display: none; }     /* JavaScript が無い・音が使えない時は、出さない */
button.btn.sl-sound-btn { display: inline-block; flex: 0 0 auto; width: auto; min-height: 44px; padding: 8px 14px; font-size: 14px; white-space: nowrap; }     /* 字を折らない（英語の 390px で 3段に折れていた） */
.sl-set-now { font-weight: 700; }
.sl-h3 { font-size: 14px; line-height: 1.5; margin: 10px 0 4px; }
.sl-set-list { margin: 0 0 6px; padding-left: 1.3em; font-size: 13px; line-height: 1.7; }
.sl-sound-hint { flex: 1 1 0; min-width: 0; font-size: 12px; line-height: 1.5; color: var(--text); margin-right: 8px; text-align: right; overflow-wrap: anywhere; }
.sl-sound-row { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
/* 入金のボタンの箱（台の中・台の幅いっぱい）。その回が終わった時（.is-end）は、赤い線の箱に、赤い太字の文（社長 2026-10-06 13:20 ごろ
   「目立つようにしてください。」。赤は janken の終了の文と同じ #a01818）。**動かない・光らない。入金のボタンは赤くしない** */
.mc-end { margin: 0 -44px 8px -6px; padding: 6px 8px 5px; background: #fff8e6; border: 2px solid #5a3d00; border-radius: 8px; }
.mc-end.is-end { background: #fff3f1; border: 3px solid #a01818; }
.mc-end-msg { margin: 0 0 6px; font-size: 16px; line-height: 1.4; font-weight: 700; color: #a01818; overflow-wrap: anywhere; }
.sl-machine .mc-end .sl-form { margin: 0 0 6px; }
.mc-end .sl-deposit { min-height: 44px; }
.mc-end-note { margin: 0; font-size: 12px; line-height: 1.5; color: #2b1a00; }
/* その回が終わった時（.is-over）は、窓を少し低くして、終わりの文と入金のボタンが、スマホの 1画面目に入るようにする（絵柄は同じ絵・小さめ） */
.sl-machine.is-over .sl-reel { height: 54px; }
.sl-machine.is-over .sl-reel .sl-sym { width: 42px; height: 42px; }
.sl-machine.is-over .sl-marquee { margin-bottom: 6px; }
.sl-machine.is-over .mc-window, .sl-machine.is-over .sl-plate { margin-bottom: 6px; }
.sl-machine.is-over .sl-lever-btn { top: 68px; height: 104px; }     /* 終わった時は、レバーも少し短く（赤い箱と重ならないように）。押せない・薄い色 */
.sl-machine.is-over .sl-lever { height: 104px; width: 31px; }

/* 下の欄の、アプリ横丁へのボタン（2026-10-07 夜 社長「各画面のフッターには、アプリ横丁へのボタンリンクを」。枠と濃い字・塗りなし・44px 以上。
   templates/base.html で、行き先が app.microfund.co.jp の行にだけ class="app-btn"。外す: この 2行と、base.html の class を消す） */
.svc-list a.app-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 46px; max-width: 100%; margin: 4px 0 6px; padding: 8px 20px; border: 1px solid var(--muted); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.4; text-decoration: none; text-align: center; overflow-wrap: anywhere; }