/* =====================================================================
   StarPocket の共通の部品（ui.css）。決まりの紙: site2-spec.md の 1・3 章
   - 名前は全部 ui- で始める（ページの spb-・c-・nw-・na・p- や、規約型の .btn・.glass などとぶつけない）
   - 選択子は .ui- か [data-ui か html.ui- か :root で始める（例外: 止める為の html.motion-off .ui-・.spb-off .ui-、と [hidden] の 1 行）
   - 動かすのは transform（scale の性質を含む）と opacity だけ。例外はアコーディオンの高さ（ui.js）
   - ばねは 2 つだけ: 予備（張り 170・抵抗 26・行き過ぎ無し）と内容（張り 270・抵抗 18・約 13% 行き過ぎて戻る）
   - 押した時の縮みは scale の性質で出す（ページの transform や .rv の動きとぶつからないように）
   ===================================================================== */

/* hidden の付いた ui の部品は必ず消える（会社型のページには [hidden] の決まりが帯の中にしか無いため） */
:where([class^="ui-"],[class*=" ui-"],[data-ui])[hidden]{display:none!important}

:root{
  --ui-n0:#0a0b0f;--ui-n1:#121318;--ui-n2:#1b1c23;--ui-n3:#26272e;--ui-n4:#34353e;
  --ui-lav:#A9AED3;--ui-gold:#F7C548;--ui-teal:#2EC4B6;--ui-paper:#eef1f6;
  --ui-font:var(--font,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI",Meiryo,system-ui,sans-serif);
  --ui-font-display:var(--font-display,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif);
  --ui-font-en:var(--font-en,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif);
  /* 会社のページ index.html:31-32 と同じ値（式で解いた物）。変えない */
  --ui-spring-a:linear(0,.034,.114,.214,.319,.421,.515,.598,.67,.731,.782,.825,.86,.888,.911,.93,.944,.956,.966,.973,.979,.984,.987,.99,.992,.994,.995,.996,.997,.998,.998,.999,1);--ui-spring-a-d:.71s;
  --ui-spring-c:linear(0,.067,.228,.428,.63,.807,.946,1.043,1.101,1.125,1.126,1.11,1.086,1.06,1.035,1.015,1,.99,.985,.984,.985,.987,.991,.994,.997,.999,1.001,1.002,1.002,1.002,1.002,1.001,1);--ui-spring-c-d:.77s;
  --ui-hover-ease:cubic-bezier(.215,.61,.355,1);   /* 絵の拡大にだけ使う（決まりの紙 0-6）。ボタンの濃さの変化には使わない */
  /* 線で描く小さな印（mask に使う。字ではないので読み上げない） */
  --ui-i-chev-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5 8 6l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ui-i-chev-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M7.5 2.5 4 6l3.5 3.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ui-i-chev-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ui-i-arrow-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h9.5M7.5 3l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@supports not (transition-timing-function:linear(0,1)){:root{--ui-spring-a:cubic-bezier(.2,.8,.2,1);--ui-spring-c:cubic-bezier(.34,1.3,.5,1)}}

/* ---- 明るい・暗いの色の印。暗い方は 3 つの選択子に全部書く（値は要素に置いた物が、上から受け継いだ物より勝つ） ---- */
:root{
  --ui-ink:#0a0b0f;--ui-sub:rgba(10,11,15,.72);--ui-line:rgba(10,11,15,.12);--ui-surface:#FFFFFF;--ui-surface-2:rgba(10,11,15,.05);--ui-accent:#0A776C;--ui-focus:#0a0b0f;
  --ui-scheme:light;--ui-opt-bg:#FFFFFF;--ui-track:rgba(10,11,15,.08);
  --ui-thumb:#FFFFFF;--ui-thumb-sh:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(10,11,15,.06),0 1px 2px rgba(10,11,15,.16),0 4px 10px -4px rgba(10,11,15,.22);
  --ui-btn-sh:0 1px 2px rgba(0,0,0,.35),0 8px 22px rgba(10,11,15,.12);
}
:root[data-theme="dark"],.ui-tone-dark{
  --ui-ink:#FFFFFF;--ui-sub:rgba(255,255,255,.74);--ui-line:rgba(255,255,255,.12);--ui-surface:#1b1c23;--ui-surface-2:rgba(255,255,255,.07);--ui-accent:#F7C548;--ui-focus:#F7C548;
  --ui-scheme:dark;--ui-opt-bg:#1b1c23;--ui-track:rgba(255,255,255,.1);
  --ui-thumb:rgba(255,255,255,.16);--ui-thumb-sh:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.3);
  --ui-btn-sh:0 1px 2px rgba(0,0,0,.35),0 8px 22px rgba(0,0,0,.28);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ui-ink:#FFFFFF;--ui-sub:rgba(255,255,255,.74);--ui-line:rgba(255,255,255,.12);--ui-surface:#1b1c23;--ui-surface-2:rgba(255,255,255,.07);--ui-accent:#F7C548;--ui-focus:#F7C548;
    --ui-scheme:dark;--ui-opt-bg:#1b1c23;--ui-track:rgba(255,255,255,.1);
    --ui-thumb:rgba(255,255,255,.16);--ui-thumb-sh:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.3);
    --ui-btn-sh:0 1px 2px rgba(0,0,0,.35),0 8px 22px rgba(0,0,0,.28);
  }
}
/* いつも明るい所（強く入れる） */
.ui-tone-light{
  --ui-ink:#0a0b0f;--ui-sub:rgba(10,11,15,.72);--ui-line:rgba(10,11,15,.12);--ui-surface:#FFFFFF;--ui-surface-2:rgba(10,11,15,.05);--ui-accent:#0A776C;--ui-focus:#0a0b0f;
  --ui-scheme:light;--ui-opt-bg:#FFFFFF;--ui-track:rgba(10,11,15,.08);
  --ui-thumb:#FFFFFF;--ui-thumb-sh:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(10,11,15,.06),0 1px 2px rgba(10,11,15,.16),0 4px 10px -4px rgba(10,11,15,.22);
  --ui-btn-sh:0 1px 2px rgba(0,0,0,.35),0 8px 22px rgba(10,11,15,.12);
}
/* コントラストを上げる: 薄い字と線を濃く */
@media (prefers-contrast:more){
  :root{--ui-sub:rgba(10,11,15,.9);--ui-line:rgba(10,11,15,.6)}
  :root[data-theme="dark"],.ui-tone-dark{--ui-sub:rgba(255,255,255,.9);--ui-line:rgba(255,255,255,.6)}
  .ui-tone-light{--ui-sub:rgba(10,11,15,.9);--ui-line:rgba(10,11,15,.6)}
}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--ui-sub:rgba(255,255,255,.9);--ui-line:rgba(255,255,255,.6)}
  .ui-tone-light{--ui-sub:rgba(10,11,15,.9);--ui-line:rgba(10,11,15,.6)}
}

/* ---- 小さな道具 ---- */
.ui-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (max-width:560px){.ui-hide-narrow{display:none!important}}
@media (min-width:561px){.ui-show-narrow{display:none!important}}

/* ---- 選んでいる所の枠（暗い所は金・明るい所は紺。どちらも 2px・外へ 3px） ---- */
.ui-crumb__item a:focus-visible,.ui-acc__sum:focus-visible,.ui-seg__input:focus-visible + .ui-seg__opt,.ui-select__el:focus-visible,
.ui-copy:focus-visible,.ui-more:focus-visible,.ui-news-card:focus-visible,.ui-news-feat:focus-visible,[data-ui-press]:focus-visible{
  outline:2px solid var(--ui-focus);outline-offset:3px}
@media (prefers-contrast:more){
  .ui-crumb__item a:focus-visible,.ui-acc__sum:focus-visible,.ui-seg__input:focus-visible + .ui-seg__opt,.ui-select__el:focus-visible,
  .ui-copy:focus-visible,.ui-more:focus-visible,.ui-news-card:focus-visible,.ui-news-feat:focus-visible,[data-ui-press]:focus-visible{outline-width:3px}
}

/* ---- 押した瞬間に縮む（ui.js が pointerdown・Space・Enter で ui-is-press を付ける）。戻りは内容のばね ---- */
.ui-crumb__item a,.ui-seg__opt,.ui-copy,.ui-more{transition:scale var(--ui-spring-c-d) var(--ui-spring-c),opacity .2s linear}
.ui-more.ui-is-press,.ui-crumb__item a.ui-is-press,[data-ui-press].ui-is-press{scale:.96}
.ui-copy.ui-is-press{scale:.97}
.ui-seg__opt.ui-is-press{scale:.94}

/* =====================================================================
   3-1. パンくず
   ===================================================================== */
.ui-crumb{margin:0;font:700 13px/1.4 var(--ui-font);color:var(--ui-sub)}
.ui-crumb__list{display:flex;flex-wrap:nowrap;align-items:center;min-width:0;margin:0;padding:0;list-style:none}
.ui-crumb__item{display:inline-flex;flex:none;align-items:center;min-width:0;max-width:100%}
/* 今のページの段だけが縮む（同じ行のまま、はみ出す分は「…」） */
.ui-crumb__item:last-child{flex:0 1 auto}
.ui-crumb__item + .ui-crumb__item::before{content:"";flex:none;width:12px;height:12px;margin:0 8px;background:currentColor;opacity:.72;
  -webkit-mask:var(--ui-i-chev-r) center/12px 12px no-repeat;mask:var(--ui-i-chev-r) center/12px 12px no-repeat}
.ui-crumb__item a{display:inline-flex;align-items:center;min-height:32px;padding:6px 8px;margin:-7px -8px;border-radius:8px;color:var(--ui-sub);text-decoration:none;-webkit-tap-highlight-color:transparent}
.ui-crumb__item a:hover{color:var(--ui-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ui-crumb__item [aria-current="page"]{display:block;min-width:0;max-width:min(100%,48em);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-ink);font-weight:600}
/* 狭い幅: 1 つ上の段だけを「‹ お知らせ」の形で出す */
@media (max-width:760px){
  .ui-crumb__item{display:none}
  .ui-crumb__item:nth-last-child(2){display:inline-flex}
  .ui-crumb__item:nth-last-child(2)::before{display:none}
  .ui-crumb__item:nth-last-child(2) a::before{content:"";flex:none;width:12px;height:12px;margin-right:6px;background:currentColor;
    -webkit-mask:var(--ui-i-chev-l) center/12px 12px no-repeat;mask:var(--ui-i-chev-l) center/12px 12px no-repeat;
    transition:transform var(--ui-spring-c-d) var(--ui-spring-c)}
  .ui-crumb__item:nth-last-child(2) a:hover::before{transform:translateX(-3px)}
}

/* =====================================================================
   3-2. アコーディオン（details と summary が土台。開け閉めの高さは ui.js）
   ===================================================================== */
.ui-acc{display:block;margin:0}
.ui-acc__sum{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 4px;
  border-bottom:1px solid var(--ui-line);list-style:none;cursor:pointer;color:var(--ui-ink);font:700 15px/1.4 var(--ui-font);
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.ui-acc__sum::-webkit-details-marker{display:none}
.ui-acc__sum::marker{content:""}
.ui-acc--toc > .ui-acc__sum{font-size:14px}
.ui-acc__t{min-width:0}
.ui-acc__chev{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ui-surface-2);color:var(--ui-ink);
  transition:transform var(--ui-spring-c-d) var(--ui-spring-c)}
.ui-acc__chev::before{content:"";width:12px;height:12px;background:currentColor;
  -webkit-mask:var(--ui-i-chev-d) center/12px 12px no-repeat;mask:var(--ui-i-chev-d) center/12px 12px no-repeat}
/* 押した瞬間に ui.js が data-ui-state を変える（open の付け外しを待たない）。JS が無い時は [open] で回す */
.ui-acc[data-ui-state="open"] > .ui-acc__sum .ui-acc__chev{transform:rotate(180deg)}
.ui-acc[open]:not([data-ui-state]) > .ui-acc__sum .ui-acc__chev{transform:rotate(180deg)}
.ui-acc__body{display:block}
.ui-acc__body::after{content:"";display:block;height:18px}
.ui-acc--anim > .ui-acc__body{overflow:clip}

/* =====================================================================
   3-3. 明るさのラジオ（端末に合わせる・明るい・暗い）
   ===================================================================== */
.ui-theme{min-width:0;margin:0;padding:0;border:0}
.ui-theme__legend{float:left;width:100%;margin:0 0 8px;padding:0;font:700 12px/1.3 var(--ui-font);color:var(--ui-sub)}
.ui-seg{clear:left;position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,360px);padding:3px;
  border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-surface-2);box-sizing:border-box}
.ui-seg__input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ui-seg__opt{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-width:0;min-height:34px;padding:0 10px;border-radius:999px;
  color:var(--ui-sub);font:700 12.5px/1.2 var(--ui-font);text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.ui-seg__input:checked + .ui-seg__opt{color:var(--ui-ink)}
/* JS が無い時（data-ui-value が無い時）は、つまみを出さず、選んでいる字の地を変える */
.ui-seg:not([data-ui-value]) .ui-seg__input:checked + .ui-seg__opt{background:var(--ui-surface)}
.ui-seg__thumb{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);border-radius:999px;display:none;
  background:var(--ui-thumb);box-shadow:var(--ui-thumb-sh);transition:transform var(--ui-spring-c-d) var(--ui-spring-c)}
.ui-seg[data-ui-value] .ui-seg__thumb{display:block}
.ui-seg[data-ui-value="light"] .ui-seg__thumb{transform:translateX(100%)}
.ui-seg[data-ui-value="dark"] .ui-seg__thumb{transform:translateX(200%)}
@media (max-width:560px){.ui-seg{width:100%;max-width:420px}}
@media (max-width:359px){.ui-seg__opt{padding:0 6px;font-size:12px}}

/* =====================================================================
   3-4. 言語のプルダウン（狭い幅だけ）
   ===================================================================== */
.ui-select{display:block;min-width:0;width:100%;max-width:420px}
.ui-select__label{display:block;margin:0 0 6px;font:700 12px/1.3 var(--ui-font);color:var(--ui-sub)}
.ui-select__box{position:relative;display:block}
.ui-select__el{display:block;width:100%;height:44px;margin:0;padding:0 40px 0 14px;border:1px solid var(--ui-line);border-radius:12px;
  background:var(--ui-surface-2);color:var(--ui-ink);font:600 15px/1.2 var(--ui-font);color-scheme:var(--ui-scheme);
  -webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}
.ui-select__el option{background-color:var(--ui-opt-bg);color:var(--ui-ink)}
.ui-select__chev{position:absolute;right:14px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--ui-sub);pointer-events:none}

/* =====================================================================
   3-5. トースト（入れ物は ui.js が最初に使う時に body の最後へ作る）
   ===================================================================== */
.ui-toast-region{position:fixed;left:0;right:0;bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 12px));z-index:300;
  display:flex;justify-content:center;padding:0 16px;pointer-events:none}
.ui-toast{display:flex;align-items:center;gap:10px;box-sizing:border-box;width:max-content;max-width:min(92vw,420px);min-height:48px;padding:12px 18px 12px 14px;
  border-radius:999px;color:#fff;font:700 14.5px/1.4 var(--ui-font);pointer-events:auto;touch-action:none;cursor:grab;
  opacity:0;transition:opacity .2s linear;will-change:transform,opacity}
.ui-toast.ui-is-in{opacity:1}
.ui-toast.ui-is-drag{cursor:grabbing}
.ui-toast__ico{flex:none;width:20px;height:20px}
.ui-toast[data-kind="ok"] .ui-toast__ico{color:var(--ui-teal)}
.ui-toast[data-kind="error"] .ui-toast__ico{color:var(--ui-gold)}
.ui-toast__t{min-width:0}

/* =====================================================================
   3-6. 「もっと見る」のボタン（並べ方の .ui-more-row は news.css）
   ===================================================================== */
.ui-more{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border:0;border-radius:999px;
  background:var(--ui-gold);color:var(--ui-n0);font:700 15px/1.3 var(--ui-font);cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 2px rgba(10,11,15,.28),0 10px 24px -8px rgba(10,11,15,.4)}
.ui-more::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#fff;opacity:0;transition:opacity .2s linear;pointer-events:none}
.ui-more:hover::after{opacity:.18}
@media (max-width:760px){.ui-more{width:100%;max-width:320px}}

/* =====================================================================
   3-7. 住所（リンク）を写すボタン（今の GitHub のボタン .nw-gh と同じ大きさ）
   ===================================================================== */
.ui-copy{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:12px;box-sizing:border-box;min-height:56px;margin:0;padding:0 20px 0 18px;
  border:1px solid var(--ui-line);border-radius:14px;background:var(--ui-surface);color:var(--ui-ink);font:700 15.5px/1.3 var(--ui-font);text-align:left;
  cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:var(--ui-btn-sh)}
.ui-copy::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--ui-surface-2);opacity:0;transition:opacity .2s linear;pointer-events:none}
.ui-copy:hover::after{opacity:1}
.ui-copy__ico{flex:none;width:20px;height:20px;transition:opacity .2s linear}
.ui-copy__ico--ok{position:absolute;left:18px;top:50%;margin-top:-10px;opacity:0;color:var(--ui-accent)}
.ui-copy.ui-is-done .ui-copy__ico--link{opacity:0}
.ui-copy.ui-is-done .ui-copy__ico--ok{opacity:1}
@supports (corner-shape:squircle){.ui-copy{corner-shape:squircle;border-radius:21px}}
@media (max-width:760px){.ui-copy{width:100%;justify-content:flex-start}}

/* =====================================================================
   3-8. 数字の図（数が増える・帯が伸びる）。HTML には最後の数を書く
   ===================================================================== */
.ui-stats-wrap{min-width:0}
/* 暗いガラスの札の上の薄い字（ラベル・注・帯のラベル・出どころ）は白 90%。後ろの金の玉と照り返しが重なっても 4.5:1 を保つ（2026-10-17） */
.ui-glass--dark.ui-stat,.ui-glass--dark.ui-bars{--ui-sub:rgba(255,255,255,.9)}
.ui-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0;padding:0}
.ui-stat{display:flex;flex-direction:column;min-width:0;margin:0;padding:24px 22px;border-radius:20px;color:var(--ui-ink)}
.ui-stat__label{margin:0;font:700 13px/1.45 var(--ui-font);color:var(--ui-sub)}
.ui-stat__val{display:flex;align-items:baseline;flex-wrap:wrap;margin:12px 0 0;color:var(--ui-ink)}
.ui-stat__num{font:800 64px/1 var(--ui-font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ui-stat__unit{margin-left:4px;font:700 17px/1.2 var(--ui-font)}
.ui-stat__note{margin:12px 0 0;font:500 12.5px/1.6 var(--ui-font);color:var(--ui-sub)}
.ui-bars{margin:20px 0 0;padding:24px;border-radius:20px;color:var(--ui-ink)}
.ui-bars__t{margin:0 0 18px;font:800 15px/1.4 var(--ui-font)}
.ui-bars__rows{display:grid;row-gap:14px}
.ui-bar{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) 96px;column-gap:14px;row-gap:6px;align-items:center}
.ui-bar__label{min-width:0;font:600 13.5px/1.4 var(--ui-font);color:var(--ui-sub)}
.ui-bar__track{position:relative;display:block;height:12px;border-radius:999px;background:var(--ui-track);overflow:hidden}
.ui-bar__fill{position:absolute;inset:0;display:block;border-radius:inherit;background:linear-gradient(90deg,var(--ui-teal),var(--ui-gold));
  transform-origin:0 50%;transform:scaleX(calc(var(--ui-v,1) / var(--ui-max,1)));
  transition:transform var(--ui-spring-a-d) var(--ui-spring-a) calc(var(--ui-i,0) * 80ms)}
.ui-bar__val{font:800 15px/1.2 var(--ui-font);font-variant-numeric:tabular-nums;color:var(--ui-ink);white-space:nowrap}
.ui-bars__src{margin:14px 0 0;font:500 12.5px/1.6 var(--ui-font);color:var(--ui-sub)}
.ui-bars__src a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ui-bars__src a:hover{color:var(--ui-ink)}
/* 画面に入るまで待つ（ui.js が付け外し）。帯は 0 の長さ */
.ui-stats--wait .ui-bar__fill{transform:scaleX(0);transition:none}
html.motion-off .ui-stats--wait .ui-bar__fill{transform:scaleX(calc(var(--ui-v,1) / var(--ui-max,1)))}
/* ⏸ の時は帯を伸ばさず、最後の形をすぐ出す（待ちの印が外れた時に 0 から伸びないように） */
html.motion-off .ui-bar__fill{transition:none}
/* 数の増え方は、HTML の数（本当の数）を書き換えずに見せる。ui.js が ui-is-counting と --ui-n（今の数）・--ui-fs（字の大きさ）を付け、
   本当の数の字を 0 の大きさにして、::before に今の数を出す。印刷・ページの中の文字検索・読む道具には、いつも本当の数が残る */
@media screen{
  [data-ui-count].ui-is-counting{font-size:0!important}
  [data-ui-count].ui-is-counting::before{content:counter(ui-n);counter-reset:ui-n var(--ui-n,0);font-size:var(--ui-fs,1rem);letter-spacing:var(--ui-ls,normal)}
}
@supports (corner-shape:squircle){.ui-stat,.ui-bars{corner-shape:squircle;border-radius:30px}}
@media (max-width:1100px){.ui-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .ui-stats{gap:12px}
  .ui-stat{padding:18px 16px}
  .ui-stat__num{font-size:44px}
  .ui-bars{padding:20px 18px}
  .ui-bar{grid-template-columns:minmax(0,1fr) auto}
  .ui-bar__label{grid-column:1 / -1}
}

/* =====================================================================
   動きを減らす設定: 位置・大きさの動きを止める。変化は濃さだけ 0.15 秒以内
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .ui-crumb__item a,.ui-seg__opt,.ui-copy,.ui-more{transition:opacity .15s linear}
  .ui-is-press{scale:none!important;opacity:.72!important}
  .ui-crumb__item a::before,.ui-acc__chev,.ui-seg__thumb{transition:none!important}
  .ui-crumb__item:nth-last-child(2) a:hover::before{transform:none}
  .ui-toast{transition:opacity .15s linear}
  .ui-bar__fill{transition:none!important}
  .ui-stats--wait .ui-bar__fill{transform:scaleX(calc(var(--ui-v,1) / var(--ui-max,1)))}
}

/* =====================================================================
   強制の色（Windows のハイコントラスト）。形を描く印は CanvasText で
   ===================================================================== */
@media (forced-colors:active){
  .ui-crumb__item + .ui-crumb__item::before,.ui-crumb__item a::before,.ui-acc__chev::before{forced-color-adjust:none;background:CanvasText}
  .ui-acc__chev{border:1px solid CanvasText}
  .ui-seg{forced-color-adjust:none;background:Canvas;border-color:CanvasText}
  .ui-seg__opt{color:CanvasText}
  .ui-seg__thumb{background:Highlight;box-shadow:none}
  .ui-seg__input:checked + .ui-seg__opt{color:HighlightText}
  .ui-seg:not([data-ui-value]) .ui-seg__input:checked + .ui-seg__opt{background:Highlight}
  .ui-seg__input:focus-visible + .ui-seg__opt{outline-color:CanvasText}
  .ui-select__el,.ui-copy,.ui-more{border:1px solid CanvasText}
  .ui-bar__track{forced-color-adjust:none;background:Canvas;border:1px solid CanvasText}
  .ui-bar__fill{forced-color-adjust:none;background:Highlight}
  .ui-copy::after,.ui-more::after{display:none}
}

/* 印刷: 押せる印や知らせは出さない（アコーディオンは ui.js が印刷の前に開く） */
@media print{
  .ui-toast-region,.ui-acc__chev,.ui-select,.ui-theme,.ui-copy,.ui-more{display:none!important}
  .ui-acc__body{height:auto!important;opacity:1!important}
  /* 数字の図は、画面に入る前でも最後の形で（数は ui-is-counting が screen だけなので、本当の数が出る） */
  .ui-bar__fill{transform:scaleX(calc(var(--ui-v,1) / var(--ui-max,1)))!important;transition:none!important}
}

/* ===== ページを移る時の動き（2026-10-20） =====
   移る時: 背景と同じ色の幕を 0.3 秒で出してから移る（ui.js）。
   着いた時: 幕を 0.4 秒で消し、中身（main）を 20px 下から 1 秒で浮かせる。CSS だけで動くので、JS が読めなくても中身は消えたままにならない。
   動きを減らす設定の人には何もしない。 */
@media (prefers-reduced-motion: no-preference) {
  html.spt-pt-arrive::before,
  html.spt-pt-leave::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--spt-pt-bg, var(--ground, var(--n0, #0a0b0f)));
  }
  html.spt-pt-arrive::before { pointer-events: none; animation: spt-pt-fade-out .4s ease-in both; }
  html.spt-pt-leave::before { pointer-events: auto; animation: spt-pt-fade-in .3s ease-out both; }
  html.spt-pt-arrive main { animation: spt-pt-rise 1s cubic-bezier(.25, 1, .5, 1) .3s both; }
  @keyframes spt-pt-fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes spt-pt-fade-out { from { opacity: 1; } to { opacity: 0; } }
  @keyframes spt-pt-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
}