/* そなえタウンの 入口の 共通部品（/ と /bky/ で 同じ物を 使う。同じ役割は 同じ見た目：原則3）。
   世界観は ゲームの入口（web/src/ui/intro.js・title.js・style.css）に そろえる。横はみ出し 0（原則14）。
   ほかのページの 名前と ぶつからないよう、部品は t- を 付ける */
:root{
  --t-paper:#FBF6EC; --t-card:#FFFDF8; --t-ink:#22343A; --t-sub:#5D6D70; --t-line:#E3D7C1;
  --t-teal:#0B5E64; --t-teal-2:#0E7F86; --t-teal-3:#DDEFEE; --t-on-teal:#F4FAF9; --t-orange:#EE7D12; --t-orange-d:#B85C05; --t-yellow:#FFD23F;
  --t-display:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Noto Sans JP',sans-serif; --t-body:'Noto Sans JP','Hiragino Sans','Yu Gothic',system-ui,sans-serif;
  --t-shadow:0 1px 0 rgba(60,40,20,.05),0 10px 30px rgba(60,40,20,.12); --t-shadow-s:0 1px 0 rgba(60,40,20,.06),0 4px 12px rgba(60,40,20,.10);
  --t-safe-t:env(safe-area-inset-top,0px); --t-safe-r:env(safe-area-inset-right,0px); --t-safe-b:env(safe-area-inset-bottom,0px); --t-safe-l:env(safe-area-inset-left,0px);
  --t-head:88px; --t-btn:44px;
}
.t-stage,.t-top,.t-home,.t-card,.t-intro{color-scheme:light;font-size:15px;line-height:1.7;font-family:var(--t-body);color:var(--t-ink);-webkit-font-smoothing:antialiased;box-sizing:border-box}
.t-top *,.t-home *,.t-card *,.t-intro *{box-sizing:border-box}
.t-top a,.t-home a,.t-card a{color:inherit}
.t-top h1,.t-top h2,.t-card h2,.t-card h3,.t-card p,.t-home p,.t-card ul{margin:0}
.t-top :focus-visible,.t-home :focus-visible,.t-card :focus-visible{outline:2px solid var(--t-teal);outline-offset:2px}
.t-card h2:focus,.t-card h3:focus,.t-card:focus{outline:none}

/* ---------- 町（全画面。JavaScript なしでも 画面いっぱい） ---------- */
.t-stage{position:fixed;inset:0;overflow:hidden;background:linear-gradient(#dcefe9,#f4f1e6)}
.t-town{position:absolute;left:50%;top:50%;width:max(100vw,128.21vh);aspect-ratio:1600/1248;transform:translate(-50%,-50%)}
.t-town img{display:block;width:100%;height:100%;max-width:none}
.t-skyfix{position:absolute;left:0;top:8.2%;width:33.2%;height:2.4%;background:#deefe9}
.t-spot{position:absolute;display:none;width:calc(96px / var(--s,1));height:calc(96px / var(--s,1));margin:calc(-48px / var(--s,1)) 0 0 calc(-48px / var(--s,1));border-radius:50%;border:calc(4px / var(--s,1)) solid var(--t-orange);box-shadow:0 0 0 calc(4px / var(--s,1)) rgba(255,255,255,.75);animation:tSpot 1.6s ease-in-out infinite}
.t-spot.on{display:block}
@keyframes tSpot{50%{transform:scale(1.14);opacity:.65}}
/* 町の施設（town.js の FAC）。絵の一部なので押せない・読み上げない。名札の大きさは町の寄り具合に関わらず同じ（ゲームの名札と同じ見た目）。影・立体の枠は付けない */
.t-fac{position:absolute;inset:0;pointer-events:none}
.t-fac-plot{position:absolute;width:4.32%}
.t-fac-plot svg{display:block;width:100%;height:auto}
.t-town img.t-fac-img{position:absolute;width:4.84%;height:auto;transform:translate(-50%,-99%)}
.t-fac-tag{position:absolute;transform:translate(-50%,-50%);padding:calc(4px / var(--s,1)) calc(10px / var(--s,1));border-radius:calc(10px / var(--s,1));background:var(--t-teal);color:var(--t-on-teal);font:700 calc(11px / var(--s,1))/1.1 var(--t-display);white-space:nowrap}
.t-fac-tag.soon{background:rgba(93,109,112,.88)}
.t-fac-tag.over{transform:translate(-50%,calc(-100% - 3px / var(--s,1)))}
.t-fac-tag.aid::before{content:"";display:inline-block;width:calc(9px / var(--s,1));height:calc(9px / var(--s,1));margin-right:calc(5px / var(--s,1));vertical-align:calc(-1px / var(--s,1));background:linear-gradient(currentColor,currentColor) center/100% 34% no-repeat,linear-gradient(currentColor,currentColor) center/34% 100% no-repeat}
.t-fac-aid{position:absolute;z-index:2;transform:translate(-50%,-50%);width:calc(96px / var(--s,1));height:calc(44px / var(--s,1));border-radius:calc(14px / var(--s,1));pointer-events:auto}
.t-fac-aid.over{transform:translate(-50%,calc(-50% - 13px / var(--s,1)))}
.t-fac-aid:focus-visible{outline:calc(3px / var(--s,1)) solid var(--t-orange);outline-offset:0}
.t-fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:12;display:none}
.js .t-fx{display:block}

/* ---------- ヘッダー ---------- */
.t-top{position:relative;z-index:20;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:calc(var(--t-safe-t) + 14px) calc(var(--t-safe-r) + 12px) 0 calc(var(--t-safe-l) + 12px)}
.js .t-top{position:fixed;left:0;right:0;top:0;pointer-events:none}
.js .t-top>*{pointer-events:auto}
.t-brand{min-width:0;display:grid;gap:1px;padding:8px 14px 10px;border-radius:20px;background:rgba(255,253,248,.88);box-shadow:var(--t-shadow-s);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:inherit;font-weight:inherit}
.t-logo{font-family:var(--t-display);font-weight:900;font-size:clamp(20px,6.4vw,30px);line-height:1.15;letter-spacing:.04em;color:var(--t-teal)!important;text-decoration:none;white-space:nowrap}
.t-sub{font-family:var(--t-display);font-weight:700;font-size:clamp(10px,3vw,13px);line-height:1.35;color:var(--t-sub);white-space:nowrap}
.t-top nav{display:flex;align-items:center;gap:6px;flex:none}
.t-top nav a,.t-top nav button{display:inline-flex;align-items:center;height:var(--t-btn);padding:0 12px;border:0;border-radius:999px;background:rgba(255,253,248,.92);box-shadow:var(--t-shadow-s);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--t-display);font-weight:700;font-size:13px;color:var(--t-teal);text-decoration:none;white-space:nowrap;cursor:pointer}
.t-top nav button[aria-pressed=false]{color:var(--t-sub)}
/* 掲示板と 音楽は 同じ大きさ */
.t-top nav a.t-board-btn,.t-top nav button[data-music]{width:86px;padding:0;justify-content:center}
.t-board-btn{gap:4px}
.t-board-btn svg{width:18px;height:18px;flex:none}

/* ---------- 町の入口（吹き出し＋主役1つ＋同じ大きさの2つ） ---------- */
.t-home{position:relative;z-index:10;width:min(100% - 24px,520px);margin:24px auto 0;display:grid;gap:10px}
.js .t-home{position:fixed;left:0;right:0;margin:0 auto;bottom:calc(var(--t-safe-b) + 12px)}
.js [data-view=card] .t-home{display:none}
.t-badge{justify-self:start;display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:5px 12px;border-radius:999px;background:var(--t-orange);color:var(--t-ink);font-family:var(--t-display);font-weight:900;font-size:clamp(11px,3.4vw,13px);line-height:1.4;letter-spacing:.02em;white-space:nowrap;box-shadow:var(--t-shadow-s)}
/* 文字を 大きく した 端末（150% など＝幅 360 未満）：重ならない ことを 先に（基準 破綻ゼロ）。2026-11-08 シミュレーション
   標語の 帯は 飾りなので 休ませる。頭は 2段（ロゴ／ボタン）に 折り返す。下の 札の 置き場は 頭の 下端を 測り直すので（town.js layout）重ならない */
@media (max-width:359px){
  .t-badge{display:none}
  .t-top{flex-wrap:wrap;row-gap:6px}
  .t-brand{min-width:max-content}
  .t-top nav{margin-left:auto}
  /* 高さも 足りないので、上の 札は ミニゲームの 1枚だけに する（時計と 備蓄状況は 休ませる。吹き出しと 重ねない） */
  .js .t-count,.js .t-stockdoor{display:none!important}
}
.t-badge i{width:7px;height:7px;border-radius:50%;background:#fff;animation:tBlink 1.6s ease-in-out infinite}
@keyframes tBlink{50%{opacity:.25}}
.t-guide{display:flex;align-items:flex-end;gap:8px;min-width:0}
.t-guide>img{width:68px;height:auto;flex:none;max-width:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.14))}
.t-home .t-guide>img{animation:tHop 1.9s ease-in-out infinite}
@keyframes tHop{50%{transform:translateY(-5px) rotate(-2deg)}}
.t-bubble{position:relative;flex:1;min-width:0;display:grid;gap:4px;background:var(--t-card);border-radius:16px;padding:10px 14px;box-shadow:var(--t-shadow-s);font-size:13.5px;line-height:1.6}
.t-bubble::before{content:'';position:absolute;left:-7px;bottom:16px;border:7px solid transparent;border-right-color:var(--t-card);border-left:0}
.t-cap{display:block;font-size:10.5px;color:var(--t-sub)}
.t-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%;min-height:54px;padding:6px 16px;border:0;border-radius:999px;font-family:var(--t-display);font-weight:900;font-size:18px;line-height:1.3;letter-spacing:.03em;text-align:center;text-decoration:none;cursor:pointer;transition:transform .1s}
.t-btn:active{transform:translateY(2px)}
.t-btn small{font-size:11.5px;font-weight:700;line-height:1.3;letter-spacing:.02em;opacity:.95}
.t-btn.t-orange{background:var(--t-orange);color:var(--t-ink);box-shadow:0 3px 0 var(--t-orange-d)}
.t-btn.t-teal{background:var(--t-teal);color:var(--t-on-teal);box-shadow:0 3px 0 #073f43}
.t-btn[disabled]{filter:grayscale(.4) opacity(.6);cursor:default}
.t-alts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.t-alt{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:46px;padding:4px 8px;border-radius:999px;background:rgba(255,253,248,.94);box-shadow:var(--t-shadow-s);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--t-teal)!important;font-family:var(--t-display);font-weight:700;font-size:clamp(12px,3.5vw,14px);line-height:1.25;text-align:center;text-decoration:none}
.t-alt svg{width:18px;height:18px;flex:none}
.t-alt:active{transform:scale(.97)}
.t-more,.t-again{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;background:rgba(255,253,248,.72);color:var(--t-sub)!important;font-size:11.5px;text-decoration:none}
.t-again{color:var(--t-teal)!important;text-decoration:underline;text-underline-offset:2px}
.t-again[hidden]{display:none}
.t-staff{color:var(--t-teal)!important;font-weight:700}
.t-links{justify-self:center;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
.t-alt small{display:block;font-size:10.5px;font-weight:700;line-height:1.2;color:var(--t-sub)}
.t-alt-soon{color:var(--t-sub)!important;background:rgba(255,253,248,.72);cursor:default}
.t-alt-soon:active{transform:none}
.t-btn.t-plain{background:var(--t-card);color:var(--t-teal);box-shadow:0 0 0 1.5px var(--t-line) inset}

/* ---------- はじめての チュートリアル：主役の ボタンに 光る輪と 指。押し付けない（どのボタンも ずっと押せる） ---------- */
.t-tour{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:2px}
.t-tour button{min-height:36px;padding:0 14px;border-radius:999px;border:0;background:transparent;color:var(--t-sub);font-family:var(--t-display);font-weight:700;font-size:13px;cursor:pointer}
.t-tour button.next{background:var(--t-teal);color:var(--t-on-teal)}
.t-btn.t-lead{outline:0;z-index:1}
.t-btn.t-lead::after{content:'';position:absolute;inset:-5px;border-radius:999px;border:3px solid var(--t-yellow);box-shadow:0 0 14px 2px rgba(255,210,63,.75);pointer-events:none;animation:tRing 1.5s ease-out infinite}
@keyframes tRing{0%{transform:scale(.98);opacity:1}70%{transform:scale(1.05);opacity:.35}100%{transform:scale(1.05);opacity:0}}
.t-finger{position:absolute;right:14px;top:50%;width:30px;height:30px;margin-top:-15px;color:#fff;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(90,40,0,.35));animation:tPoint 1.1s ease-in-out infinite}
.t-finger svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
@keyframes tPoint{50%{transform:translateX(-7px)}}
.t-leading .t-alts,.t-leading .t-more{opacity:.78}

/* ---------- カード（チュートリアルの カードと 同じ作り） ---------- */
.t-deck{position:relative;z-index:15;display:grid;gap:14px;width:min(100% - 24px,560px);margin:24px auto;padding-bottom:calc(var(--t-safe-b) + 24px)}
.js .t-deck{display:contents}
.t-card{display:grid;gap:12px;align-content:start;background:rgba(251,246,236,.97);border-radius:24px;padding:14px;box-shadow:var(--t-shadow);min-width:0}
.js .t-card{display:none;position:fixed;z-index:15;left:0;right:0;margin:0 auto;bottom:calc(var(--t-safe-b) + 12px);width:min(100% - 24px,560px);max-height:calc(100vh - var(--t-head) - var(--t-safe-b) - 24px);max-height:calc(100dvh - var(--t-head) - var(--t-safe-b) - 24px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.js .t-card.on{display:grid;animation:tCardIn .46s cubic-bezier(.2,1.35,.3,1) both}
.js .t-card.on>*{animation:tRiseIn .34s calc(.1s + var(--n,0) * .05s) ease-out both}
.t-card>:nth-child(2){--n:1}.t-card>:nth-child(3){--n:2}.t-card>:nth-child(4){--n:3}.t-card>:nth-child(5){--n:4}
@keyframes tCardIn{0%{transform:scale(.62) translateY(40px);opacity:0;filter:blur(6px)}60%{opacity:1;filter:blur(0)}100%{transform:none;opacity:1;filter:none}}
@keyframes tRiseIn{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.t-card-top{display:grid;grid-template-columns:1fr 40px;gap:8px;align-items:center}
.t-steps{grid-column:1;display:flex;gap:4px;min-width:0}
.t-steps i{flex:1;height:6px;border-radius:3px;background:#EADFC9}
.t-steps i.past{background:var(--t-teal)}
.t-steps i.now{background:var(--t-orange)}
.t-x{grid-column:2;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--t-sub)!important;text-decoration:none}
.t-x svg{width:20px;height:20px}
.t-card .t-guide{align-items:flex-start}
.t-card .t-guide>img{width:56px}
.t-card .t-bubble{gap:6px}
.t-card .t-bubble::before{bottom:auto;top:20px}
.t-card h2,.t-card h3{font-family:var(--t-display);font-weight:900;font-size:20px;line-height:1.35;color:var(--t-teal)}
.t-card .t-bubble p{color:var(--t-ink);font-size:14px}
.t-tag{justify-self:start;font-family:var(--t-display);font-weight:900;font-size:12px;line-height:1.5;color:var(--t-teal);background:var(--t-teal-3);padding:2px 10px;border-radius:999px}
.t-body{display:grid;gap:10px;min-width:0}
.t-note{font-size:12px;color:var(--t-sub)}
.t-pager{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.t-pager a{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:999px;background:var(--t-card);box-shadow:0 0 0 1.5px var(--t-line) inset;color:var(--t-teal);font-family:var(--t-display);font-weight:700;font-size:15px;text-decoration:none}
.t-pager a:only-child{grid-column:1/-1}
.t-cta{min-height:50px;font-size:16px}
[data-sent] .t-cta{display:none}
.t-about{font-size:12.5px;color:var(--t-sub);line-height:1.8}
.t-about p+p{margin-top:6px}
.t-about a{color:var(--t-teal)}

/* ---------- 診断の 選択シート：中は スクロールしても、始めるボタンは 常に 見える ---------- */
.js .t-sheet{padding:0;gap:0;overflow:hidden}
.js .t-sheet.on{display:flex;flex-direction:column}
/* 見出しは 左右の ボタンに かかわらず 真ん中（左右の 列を 同じ 幅に。企業版の シートの 頭と そろえる 11/08） */
.t-sheet .t-card-top{grid-template-columns:40px minmax(0,1fr) 40px;padding:8px 10px 0 10px}
.t-sheet .t-x{grid-column:3}
.t-sheet-title{grid-column:2;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}
.t-sheet-title h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-sheet-title img{width:34px;height:auto;flex:none;max-width:none}
.t-sheet h2{font-size:19px}
.t-sheet-scroll{flex:1 1 auto;min-height:0;display:grid;gap:10px;align-content:start;padding:6px 14px 12px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.t-plan{display:grid;gap:4px;min-width:0;border-radius:16px;padding:12px 14px;text-decoration:none}
.t-plan-head{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.t-card .t-plan h3{font-size:18px;line-height:1.3}
.t-plan p{font-size:13.5px;line-height:1.6;color:var(--t-ink)}
.t-plan-tag{flex:none;font-family:var(--t-display);font-weight:900;font-size:11px;line-height:1;padding:5px 9px;border-radius:999px;background:var(--t-orange);color:var(--t-ink)}
.t-plan-main{background:var(--t-card);box-shadow:0 0 0 2.5px var(--t-orange),var(--t-shadow-s)}
.t-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.t-chips span{font-family:var(--t-display);font-weight:700;font-size:12px;line-height:1;padding:5px 10px;border-radius:999px;background:var(--t-teal-3);color:var(--t-teal)}
.t-plan-sub{padding:9px 14px;background:rgba(255,253,248,.6);box-shadow:0 0 0 1.5px var(--t-line) inset}
.t-card .t-plan-sub h3{font-size:14.5px;color:var(--t-sub)}
.t-plan-sub p{font-size:12px;color:var(--t-sub)}
.t-plan-sub .t-plan-tag{background:#8A9598}
a.t-plan-sub{background:var(--t-card)}
.t-card a.t-plan-sub h3{color:var(--t-teal)}
.t-card a.t-plan-sub .t-plan-tag{background:var(--t-teal)}
a.t-plan-main{color:inherit}
a.t-plan-main p{color:var(--t-ink)}
.t-plan-plain{background:var(--t-card);box-shadow:0 0 0 1.5px var(--t-line) inset}
.t-card .t-plan-plain h3{font-size:15px}
.t-plan-plain p{font-size:12.5px}
/* 町の掲示板の 貼り紙 */
.t-why{display:grid;gap:8px;background:var(--t-teal);color:var(--t-on-teal);border-radius:18px;padding:16px}
.t-card .t-why h3{color:#fff;font-size:17px}
.t-card .t-why p{font-size:13.5px;opacity:.94;color:var(--t-on-teal)}
.t-why .num{font-family:var(--t-display);font-weight:900;font-size:48px;line-height:1;color:var(--t-yellow)}
.t-why .num small{font-size:24px}
.t-paper{display:grid;gap:4px;background:var(--t-card);border-radius:16px;padding:12px 14px;box-shadow:var(--t-shadow-s)}
.t-card .t-paper h3{font-size:16px}
.t-paper p{font-size:13.5px}
.t-notes{display:grid;gap:6px;padding:2px 2px 0;font-size:12px;line-height:1.65;color:var(--t-sub)}
.t-card .t-notes h3{font-size:13px;color:var(--t-sub)}
.t-notes ul{display:grid;gap:4px;padding-left:1.2em}
.t-notes a{color:var(--t-teal)}
.t-sheet-foot{flex:none;display:grid;gap:2px;padding:10px 14px 10px;background:var(--t-paper);box-shadow:0 -6px 12px -8px rgba(60,40,20,.28);border-radius:0 0 24px 24px}
.t-free{justify-self:center;display:inline-flex;align-items:center;min-height:40px;padding:0 12px;color:var(--t-sub)!important;font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* ---------- 入場演出（ゲームの .intro と 同じ。CSS だけでも 必ず 消える） ---------- */
.t-intro{display:none}
.intro-on .t-intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden;background:radial-gradient(120% 90% at 50% 45%,#0E7F86 0%,#0B5E64 45%,#073f43 100%);color:#fff;cursor:pointer;animation:tIntroGone 0s 5s forwards}
@keyframes tIntroGone{to{visibility:hidden;pointer-events:none}}
.t-intro .smoke{position:absolute;inset:0;width:100%;height:100%}
.t-intro-c{position:relative;text-align:center;display:grid;justify-items:center;gap:10px;padding:0 16px}
.t-intro-sub{font-family:var(--t-display);font-weight:700;letter-spacing:.32em;font-size:clamp(11px,3vw,14px);color:#FFD98A;opacity:0;animation:tIntroFade .4s .55s forwards}
.t-intro-logo{position:relative;overflow:hidden;padding:2px 10px;font-family:var(--t-display);font-weight:900;font-size:clamp(40px,13vw,96px);line-height:1.1;letter-spacing:.05em;color:#fff;text-shadow:0 4px 0 #073f43,0 10px 30px rgba(0,0,0,.35);white-space:nowrap}
.t-intro-logo span{display:inline-block;transform:scale(2.6);opacity:0;filter:blur(8px);animation:tIntroSlam .42s .35s cubic-bezier(.2,1.4,.3,1) forwards}
.t-intro-logo i{position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-20deg);animation:tIntroGlint .5s .85s ease-out forwards}
.t-intro-copy{font-family:var(--t-display);font-weight:700;font-size:clamp(14px,4vw,20px);opacity:0;transform:translateY(8px);animation:tIntroUp .4s 1s forwards}
.t-intro-crew{display:flex;align-items:flex-end;gap:clamp(2px,1.5vw,10px);margin-top:10px}
.t-intro-crew span{opacity:0;transform:translateY(24px) scale(.8);animation:tIntroPop .38s calc(1.15s + var(--i) * .08s) cubic-bezier(.2,1.5,.3,1) forwards}
.t-intro-crew svg{display:block;width:clamp(44px,12vw,72px);height:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.t-intro-crew img{display:block;width:clamp(52px,14vw,86px);height:auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.3))}
.t-intro-curtain{position:absolute;top:-10%;bottom:-10%;width:62%;background:var(--t-paper);transition:transform .6s cubic-bezier(.7,0,.2,1)}
.t-intro-curtain.l{left:-62%;transform:skewX(-12deg)}.t-intro-curtain.r{right:-62%;transform:skewX(-12deg)}
.t-intro.open{animation:tIntroOut .65s ease forwards;pointer-events:none}
.t-intro.open .t-intro-curtain.l{transform:translateX(100%) skewX(-12deg)}.t-intro.open .t-intro-curtain.r{transform:translateX(-100%) skewX(-12deg)}
.t-intro-skip{position:absolute;right:calc(var(--t-safe-r) + 14px);bottom:calc(var(--t-safe-b) + 14px);height:40px;padding:0 16px;border:0;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font:700 13px var(--t-display);cursor:pointer}
.intro-short .t-intro-sub,.intro-short .t-intro-logo span,.intro-short .t-intro-logo i,.intro-short .t-intro-copy,.intro-short .t-intro-crew span{animation-delay:0s;animation-duration:.3s}
@keyframes tIntroSlam{60%{transform:scale(.94);opacity:1;filter:blur(0)}100%{transform:scale(1);opacity:1;filter:blur(0)}}
@keyframes tIntroGlint{to{left:120%}}
@keyframes tIntroFade{to{opacity:1}}
@keyframes tIntroUp{to{opacity:1;transform:none}}
@keyframes tIntroPop{to{opacity:1;transform:none}}
@keyframes tIntroOut{0%,60%{opacity:1}100%{opacity:0}}
/* 幕が 開いたあと、町の上に 順に 立ち上がる */
.entered .t-brand{animation:tDropIn .5s cubic-bezier(.2,1.3,.3,1) both}
.entered .t-top nav{animation:tDropIn .5s .08s cubic-bezier(.2,1.3,.3,1) both}
.entered .t-home>*{animation:tRiseIn .42s calc(.14s + var(--n,0) * .07s) cubic-bezier(.2,1.2,.3,1) both}
.t-home>:nth-child(2){--n:1}.t-home>:nth-child(3){--n:2}.t-home>:nth-child(4){--n:3}.t-home>:nth-child(5){--n:4}
@keyframes tDropIn{from{transform:translateY(-22px);opacity:0}to{transform:none;opacity:1}}
/* 画面の 切り替え（ゲームの wipe と 同じ 斜めの幕） */
.t-wipe{position:fixed;inset:0;z-index:190;pointer-events:none;overflow:hidden}
.t-wipe i{position:absolute;top:-20%;bottom:-20%;left:-160%;width:140%;transform:skewX(-14deg);transition:transform .33s cubic-bezier(.7,0,.3,1)}
.t-wipe i:first-child{background:var(--t-orange)}.t-wipe i:last-child{background:var(--t-teal);transition-delay:.05s}
.t-wipe.in i{transform:translateX(115%) skewX(-14deg)}
.t-wipe.out i{transform:translateX(240%) skewX(-14deg);transition-duration:.4s}

/* ---------- 町を 動かすのは 読み込み後 ---------- */
.js .t-town{left:0;top:0;width:1600px;height:1248px;aspect-ratio:auto;transform-origin:0 0;transform:none;transition:transform .95s cubic-bezier(.3,.75,.2,1);will-change:transform}
.js.still .t-town{transition:none}

/* ---------- /bky/ の 切り替え：町の入口のあいだは 診断の画面を 出さない。問いに 直接 入るときは 町を 出さない ---------- */
.t-entry .wrap,.t-on #start{display:none!important}
.t-quick #t-root{display:none!important}

/* ---------- 町びらきの 立て札（カウントダウン）：ヘッダーから 綱で 吊るす。入口の 積み重ねを 押さない ---------- */
.t-count{display:none}
.js .t-count{position:fixed;z-index:9;left:calc(var(--t-safe-l) + 12px);top:calc(var(--t-head,64px) + 8px);display:grid;justify-items:center;gap:1px;padding:6px 12px 7px;background:var(--t-card);border:2px solid var(--t-teal);border-radius:10px;box-shadow:var(--t-shadow-s);color:var(--t-ink);font-family:var(--t-display);line-height:1.25;text-align:center}
.js .t-count::before,.js .t-count::after{content:'';position:absolute;top:-10px;width:3px;height:9px;background:var(--t-teal)}
.js .t-count::before{left:16px}.js .t-count::after{right:16px}
.js [data-view=card] .t-count{display:none}
.t-count-k{font-size:11px;font-weight:700;color:var(--t-teal)}
.t-count-v{display:flex;align-items:baseline;gap:1px;font-weight:700;font-size:10.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.t-count-v b{font-weight:900;font-size:20px;color:var(--t-teal);min-width:1.15em}
.t-count-v b:first-child{min-width:0}
.t-count small{font-size:10.5px;color:var(--t-sub);white-space:nowrap}
.t-count-after{font-size:12.5px;font-weight:900;color:var(--t-teal);white-space:nowrap}
.t-count a{color:var(--t-teal)}
/* 「あなたの街の備蓄状況」の 立て札（/town/ の 入口）。.t-count と 同じ形で、位置は town.js が 札の 実寸から 決める */
.t-stockdoor{display:none}
.js .t-stockdoor{position:fixed;z-index:9;left:calc(var(--t-safe-l) + 12px);top:calc(var(--t-head,64px) + 96px);display:flex;align-items:center;justify-content:center;min-height:44px;padding:4px 12px;background:var(--t-card);border:2px solid var(--t-teal);border-radius:10px;box-shadow:var(--t-shadow-s);color:var(--t-teal);font-family:var(--t-display);font-size:13px;font-weight:900;line-height:1.3;text-align:center;text-decoration:none;box-sizing:border-box}
.js .t-stockdoor::before,.js .t-stockdoor::after{content:'';position:absolute;top:-10px;width:3px;height:9px;background:var(--t-teal)}
.js .t-stockdoor::before{left:16px}.js .t-stockdoor::after{right:16px}
.js [data-view=card] .t-stockdoor{display:none}
.t-stockdoor:active{transform:translateY(1px)}
.t-stockdoor:focus-visible{outline:2px solid var(--t-teal);outline-offset:2px}
@media (orientation:landscape) and (max-height:500px){.js .t-stockdoor{min-height:40px;padding:3px 9px;font-size:12px}}
@media (min-width:1024px) and (min-height:501px){.js .t-stockdoor{padding:10px 20px;font-size:16px}}
/* 登録カードの 一言 */
.t-open-note{font-size:13px;line-height:1.55;font-weight:700;color:var(--t-teal);background:var(--t-teal-3);border-radius:12px;padding:8px 12px}
/* ---------- 町の書類（住民票・診断書の シェア画像）/town/sheets.js ---------- */
.sh-wrap{display:grid;gap:8px;min-width:0;text-align:left}
.sh-wrap[hidden]{display:none}
.sh-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sh-tab{min-height:44px;border:0;border-radius:999px;background:var(--t-card);box-shadow:0 0 0 1.5px var(--t-line) inset;color:var(--t-teal);font:700 14px/1.2 var(--t-display);cursor:pointer}
.sh-tab[aria-pressed=true]{background:var(--t-teal);color:var(--t-on-teal);box-shadow:none}
.sh-img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:6px;background:var(--t-paper);box-shadow:0 0 0 1.5px var(--t-line),var(--t-shadow-s)}
.sh-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sh-btn{min-height:44px;padding:4px 6px;border:0;border-radius:12px;font:700 13px/1.25 var(--t-display);cursor:pointer}
.sh-x{background:#111;color:#fff}.sh-line{background:#06C755;color:#04331b}.sh-save{background:var(--t-card);color:var(--t-teal);box-shadow:0 0 0 1.5px var(--t-line) inset}
.sh-note{margin:0;font-size:12px;color:var(--t-sub);min-height:0}
.sh-note:empty{display:none}

/* ---------- 端末ごと（原則14） ---------- */
/* 小さいスマホ */
@media (max-width:359px){
  .t-count-v b{font-size:17px}
  .js .t-count{padding:4px 9px 5px;left:calc(var(--t-safe-l) + 8px)}
  .sh-btn{font-size:12px}
  :root{--t-btn:40px}
  .t-brand{padding:6px 10px 8px}
  .t-top{padding-left:calc(var(--t-safe-l) + 8px);padding-right:calc(var(--t-safe-r) + 8px)}
  .t-top nav{gap:4px}
  .t-top nav a,.t-top nav button{padding:0 7px;font-size:11.5px}
  .t-top nav a.t-board-btn,.t-top nav button[data-music]{width:68px}
  .t-board-btn svg{width:15px;height:15px}
  .t-guide>img{width:54px}
  .t-card .t-guide>img{width:44px}
  .t-bubble{padding:8px 11px;font-size:12.5px}
  .t-card{padding:10px;gap:9px}
  .t-btn{font-size:16px;min-height:50px}
  .t-card h2,.t-card h3{font-size:18px}
  .t-card .t-bubble p{font-size:13px}
  .t-card-top{grid-template-columns:1fr 36px}
  .t-x{width:36px;height:36px}
  .t-sheet .t-card-top{grid-template-columns:36px minmax(0,1fr) 36px;padding:6px 8px 0 8px}
  .t-sheet h2{font-size:17px}
  .t-sheet-scroll{padding:4px 12px 10px;gap:8px}
  .t-plan{padding:10px 12px}
  .t-sheet-foot{padding:8px 12px 6px}
  .t-free{min-height:36px}
  .t-finger{right:10px;width:26px;height:26px;margin-top:-13px}
}
/* 背の低い 縦画面：入口を 詰める */
@media (orientation:portrait) and (max-height:700px){
  .t-home{gap:8px}
  .t-card{gap:9px}
}
/* タブレット縦 */
@media (min-width:600px) and (orientation:portrait){
  .t-brand{padding:12px 20px 14px}
  .t-logo{font-size:38px}
  .t-sub{font-size:14px}
  .t-top{padding-left:24px;padding-right:24px;padding-top:calc(var(--t-safe-t) + 22px)}
  .js .t-home,.js .t-card{bottom:calc(var(--t-safe-b) + 32px)}
  .t-guide>img{width:84px}
}
/* スマホ・小型タブレットの 横向き：縦の延長に しない。左に 町と タイトル、右に 入口と カード */
@media (orientation:landscape) and (max-width:1023px),(orientation:landscape) and (max-height:500px){
  .t-card,.t-home{font-size:14px}
  .js .t-top{right:auto;width:calc(44vw - 24px);flex-wrap:wrap;justify-content:flex-start;padding-top:calc(var(--t-safe-t) + 10px)}
  .t-brand{padding:6px 12px 8px}
  .t-logo{font-size:22px}
  .t-sub{font-size:10.5px}
  .js .t-home{left:auto;right:calc(var(--t-safe-r) + 12px);margin:0;width:min(46vw,420px);bottom:calc(var(--t-safe-b) + 8px);gap:6px}
  .t-badge{font-size:11px;padding:3px 10px}
  .t-guide>img{width:48px}
  .t-bubble{padding:6px 11px;font-size:12px;line-height:1.5}
  .t-btn{min-height:46px;font-size:16px}
  .t-btn small{font-size:10.5px}
  .t-alt{min-height:40px;font-size:12px}
  .t-more{min-height:28px;font-size:10.5px}
  .js .t-card{left:auto;right:calc(var(--t-safe-r) + 12px);margin:0;bottom:calc(var(--t-safe-b) + 8px);width:min(56vw,480px);max-height:calc(100vh - var(--t-safe-t) - var(--t-safe-b) - 16px);max-height:calc(100dvh - var(--t-safe-t) - var(--t-safe-b) - 16px);padding:10px 12px;gap:8px}
  .t-card .t-guide>img{width:40px}
  .t-card h2,.t-card h3{font-size:17px}
  .t-card .t-bubble p{font-size:12.5px;line-height:1.55}
  .t-x{width:32px;height:32px}
  .t-card-top{grid-template-columns:1fr 32px}
  .t-pager a{min-height:40px;font-size:13.5px}
  .t-cta{min-height:42px;font-size:14px}
  .t-tour button{min-height:32px;font-size:12px}
  /* シート：縦幅を 使い切らないよう、始めるボタンと「保存せずに」を 横に 並べる */
  .js .t-sheet{padding:0;width:min(60vw,560px)}
  .t-sheet .t-card-top{grid-template-columns:32px minmax(0,1fr) 32px;padding:4px 8px 0 8px}
  .t-sheet h2{font-size:16px}
  .t-sheet-scroll{padding:2px 12px 8px;gap:7px}
  .t-plan{padding:8px 12px}
  .t-card .t-plan h3{font-size:15.5px}
  .t-plan p{font-size:12px;line-height:1.5}
  .t-chips{margin-top:2px}
  .t-notes{font-size:11px;line-height:1.55}
  .t-sheet-foot{grid-template-columns:1fr auto;align-items:center;gap:8px;padding:6px 12px 8px}
  .t-free{font-size:12px;min-height:40px;padding:0 4px}
  .t-sheet-foot .t-btn{min-height:44px;font-size:15px}
  .t-why{padding:10px 12px;gap:4px}
  .js .t-count{padding:3px 9px 4px;top:calc(var(--t-head,64px) + 6px)}
  .t-count-v b{font-size:16px}
  .t-count-k,.t-count small{font-size:10px}
  .t-open-note{font-size:12px;padding:6px 10px}
  .t-why .num{font-size:32px}.t-why .num small{font-size:17px}
  .t-card .t-why h3{font-size:14px}
  .t-card .t-why p{font-size:12px;line-height:1.5}
}
/* いちばん 背の低い 横向き：入力欄まで すぐ 届くよう 札を 省く */
@media (orientation:landscape) and (max-height:380px){
  .t-card .t-tag{display:none}
  .t-card .t-guide>img{width:32px}
}
/* PC：左に 広く 町、右に 入口。ゲームのトップと 同じ 配置 */
@media (min-width:1024px) and (min-height:501px){
  .js .t-top{padding:calc(var(--t-safe-t) + 28px) 32px 0}
  .t-brand{padding:16px 26px 18px}
  .t-logo{font-size:52px}
  .t-sub{font-size:15px}
  .t-top nav{gap:8px}
  .t-top nav a,.t-top nav button{padding:0 16px;font-size:14px}
  .t-top nav a.t-board-btn,.t-top nav button[data-music]{width:96px}
  .js .t-home{left:auto;right:40px;bottom:40px;margin:0;width:440px;gap:12px}
  .js .t-count{left:32px;padding:10px 20px 11px}
  .t-count-k{font-size:13px}
  .t-count-v{font-size:13px}
  .t-count-v b{font-size:30px}
  .t-count small{font-size:12px}
  .t-count-after{font-size:15px}
  .t-badge{font-size:13px}
  .t-guide>img{width:84px}
  .t-bubble{font-size:14px}
  .t-btn{min-height:58px}
  .t-alt{min-height:50px;font-size:14px}
  .js .t-card{left:auto;right:32px;bottom:32px;margin:0;width:480px;padding:18px;max-height:calc(100vh - 124px)}
  .js .t-sheet{padding:0;width:500px}
  .t-card .t-guide>img{width:64px}
}
/* 動きを 減らす設定：動きなし（光る輪と 指は 止まったまま 見せる） */
@media (prefers-reduced-motion:reduce){
  .t-stage *,.t-stage,.t-top,.t-top *,.t-home,.t-home *,.t-home *::after,.t-card,.t-card *,.t-wipe i{animation:none!important;transition:none!important}
  .t-intro,.t-fx{display:none!important}
}