/* 並び：スマホは 帯→舞台→新着→扉→メニュー の縦一画面。PCは 左メニュー｜舞台｜扉と新着 の三つ割り。 */
.sza{
  color-scheme:dark;
  --ground:#0D0B0A; --deep:#080706; --face:#16130F; --face2:#1D1915; --face3:#25201A;
  --line:#3A332A; --line2:#2A251F; --line3:#6B5F4D;
  --gold:#D9B978; --gold-ink:#1A1408;
  --ink:#EDE6D8; --ink2:#D5CCBB; --mute:#B5AC9C;
  --month:#C23B2A; --month-ink:#FFF6E8;
  --mincho:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  --gothic:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif;
}
body{background:#0D0B0A}
/* 画面いっぱいに重ねる。サイトのヘッダー・パンくず・タイトル帯は、この下に隠れる */
html.sza-on,html.sza-on body{overflow:hidden!important}
.sza,.sza *{box-sizing:border-box}
.sza [hidden]{display:none!important}
.sza *{scrollbar-width:thin;scrollbar-color:#3A332A transparent}
.sza ::-webkit-scrollbar{width:8px;height:8px}
.sza ::-webkit-scrollbar-thumb{background:#3A332A;border-radius:4px}
.sza ::-webkit-scrollbar-track{background:transparent}
.sza{position:fixed;inset:0;z-index:99990;max-width:480px;margin:0 auto;padding-top:env(safe-area-inset-top,0px);display:flex;flex-direction:column;overflow:hidden;background:var(--ground);box-shadow:0 0 0 100vmax #080706;color:var(--ink);font-family:var(--gothic);font-size:14px;line-height:1.5;letter-spacing:normal;text-align:left;-webkit-text-size-adjust:100%}
body.admin-bar .sza{top:32px}
@media (max-width:782px){body.admin-bar .sza{top:46px}}
/* WordPress（SWELL）の本文の装飾を打ち消す */
#sza h1,#sza h2,#sza h3{margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;color:inherit;line-height:1.4}
#sza h1::before,#sza h1::after,#sza h2::before,#sza h2::after,#sza h3::before,#sza h3::after{content:none!important}
#sza .sza-bar h1{font-size:21px}#sza .sza-newlist h2{font-size:18px}#sza .sza-book h2{font-size:17px}#sza .sza-sheet h2{font-size:15px}
#sza .sza-box h2,#sza .sza-kv h2{font-size:13px;font-weight:400;color:var(--gold)}#sza .sza-sheet h3{font-size:12px;font-weight:400;color:var(--gold)}
#sza header,#sza nav,#sza aside,#sza section,#sza main{position:static;margin:0;box-shadow:none}
#sza header{background:none;border:0}
#sza .sza-stage{position:relative}
#sza p{margin:0}
#sza a{color:inherit;text-decoration:none}
#sza img{max-width:none;border-radius:0;box-shadow:none}
:where(.sza) a{color:inherit;text-decoration:none}
:where(.sza) button{font-family:var(--gothic);color:inherit;cursor:pointer;margin:0}
.sza :focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sza svg{flex-shrink:0}
.sza-mincho{font-family:var(--mincho);font-weight:800}

.sza-main{flex:1;min-height:0;display:flex;flex-direction:column}
.sza-view{flex:1;min-height:0;display:flex;flex-direction:column}
.sza-home{overflow-y:auto}
.sza-side{display:none}

/* 帯 */
.sza-bar{height:52px;flex-shrink:0;padding:0 16px 0 20px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sza-bar.has-back{padding-left:8px}
.sza-logo{display:flex;align-items:center;gap:8px;flex-shrink:0;white-space:nowrap;font-family:'Hina Mincho',var(--mincho);font-weight:400;font-size:24px;letter-spacing:.2em;color:var(--gold)}
.sza-logo path{fill:var(--month)}
.sza-bar h1{margin:0;font-family:var(--mincho);font-weight:800;font-size:21px;letter-spacing:.04em}
.sza-back{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0}
.sza-barl{display:flex;align-items:center;gap:2px;min-width:0}
/* 自分のキャラクターの札：どの画面からも、1回でキャラクターホームへ行ける */
.sza-chip{height:44px;padding:0 12px 0 6px;border:1px solid var(--line);border-radius:22px;background:none;display:flex;align-items:center;gap:6px;min-width:0;max-width:164px;transition:transform .12s}
.sza-chip{padding:0 10px 0 5px}
.sza-chip .sza-av{width:28px;height:28px;font-size:10px}
.sza-chip .tx{display:flex;flex-direction:column;min-width:0;line-height:1.3;text-align:left}
.sza-chip b{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sza-chip small{font-size:10px;color:var(--gold);white-space:nowrap}
.sza-chip:active{transform:translateY(1px) scale(.985)}
.sza-demo{flex-shrink:0;height:30px;padding:0 10px;border:1px dashed var(--line3);border-radius:15px;background:none;font-size:11px;color:var(--mute);white-space:nowrap}
.sza-note{font-size:12px;color:var(--mute)}

/* 丸いアイコン（案内人も、自分のキャラクターも同じ形） */
.sza-av{--c:var(--line3);--t:var(--ink2);--pos:50% 16%;--zoom:1.4;position:relative;flex-shrink:0;border-radius:50%;border:2px solid var(--c);background:#1B1816;color:var(--t);overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:var(--mincho);font-weight:700}
/* 切り抜きは、案内人紹介ページの丸アイコンと同じやり方（絵を拡大して箱の中央に置き、--pos で上下を合わせる） */
.sza-av img{position:absolute;left:50%;top:50%;width:calc(100% * var(--zoom));height:calc(100% * var(--zoom));max-width:none;transform:translate(-50%,-50%);object-fit:cover;object-position:var(--pos)}
.sza-av.is-contain img{width:100%;height:100%;object-fit:contain;padding:8%}
.sza-av img.is-plain{left:0;top:0;width:100%;height:100%;transform:none;object-position:50% 50%}
.sza-av:not(.is-me){background-image:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--c) 26%,transparent) 0%,color-mix(in srgb,var(--c) 8%,transparent) 55%,rgba(0,0,0,.35) 100%)}
.sza-av.is-me{border:1px dashed var(--mute);font-family:var(--gothic);font-weight:400;color:var(--ink2)}
.sza-av.is-me.has-color{border:2px solid var(--c)}

/* 舞台 */
.sza-stage{flex:1;min-height:286px;position:relative;overflow:hidden;container-type:size}
.sza-bg{position:absolute;left:0;top:0;width:100%;height:100%}
.sza-bg.is-pc{display:none}
.sza-bg .sun{fill:var(--month);opacity:.3}
.sza-bg .ring{fill:none;stroke:var(--gold);stroke-width:1;opacity:.4}
.sza-bg .bar{fill:var(--ground)}
.sza-bg .edge{fill:none;stroke:var(--gold);stroke-width:1;opacity:.4}
.sza-bg .dust{fill:var(--gold);opacity:.6}
.sza-bg .wave circle{fill:var(--ground);stroke:var(--gold);stroke-width:1}
.sza-phone{--u:min(1px,calc(76cqh / 330));position:absolute;right:calc(var(--u)*26);bottom:calc(var(--u)*-44);width:calc(var(--u)*170);height:calc(var(--u)*330);border:2px solid #4A4236;border-radius:calc(var(--u)*28);background:#0A0908;box-shadow:0 0 calc(var(--u)*48) color-mix(in srgb,var(--c) 38%,transparent);transform:rotate(-4deg);display:flex;flex-direction:column;align-items:center;padding:calc(var(--u)*14) calc(var(--u)*14) 0;gap:calc(var(--u)*11)}
.sza-phone .notch{width:calc(var(--u)*42);height:calc(var(--u)*5);border-radius:3px;background:var(--line2)}
.sza-phone .state{margin-top:calc(var(--u)*7);font-size:calc(var(--u)*11);letter-spacing:.24em;color:var(--t)}
.sza-phone .sza-av{width:calc(var(--u)*90);height:calc(var(--u)*90);font-size:calc(var(--u)*34)}
.sza-phone .who{font-family:var(--mincho);font-weight:800;font-size:calc(var(--u)*18);letter-spacing:.1em;white-space:nowrap}
.sza-phone .keys{margin-top:calc(var(--u)*5);display:flex;gap:calc(var(--u)*13)}
.sza-phone .keys span{width:calc(var(--u)*36);height:calc(var(--u)*36);border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.sza-phone .keys span.end{background:var(--month);border-color:var(--month)}
.sza-phone .keys svg{width:50%;height:50%}

.sza-talk{position:absolute;left:20px;top:14px;width:min(54%,230px);display:flex;flex-direction:column;gap:8px}
.sza-talk .lab{font-size:12px;color:var(--t)}
.sza-talk .nm{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sza-talk .nm a{font-family:var(--mincho);font-weight:800;font-size:22px;letter-spacing:.06em;line-height:1.3}
.sza-talk .nm span{font-size:11px;color:var(--mute)}
.sza-bubble{margin:0;background:var(--face2);border:1px solid var(--line);border-radius:4px 18px 18px 18px;padding:11px 14px;font-size:15px;line-height:1.6}
.sza-bubble small{display:block;font-size:12.5px;color:var(--ink2);margin-bottom:4px}
.sza-row{display:flex;gap:8px;align-items:center}
.sza-pill{height:44px;padding:0 14px;border:1px solid var(--line);border-radius:22px;background:var(--ground);color:var(--ink2);font-size:12.5px;display:inline-flex;align-items:center;white-space:nowrap}
.sza-pill.is-gold{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);font-weight:700}
.sza-pill.is-even{flex:1;justify-content:center;padding:0 8px}
.sza-heart{width:44px;height:44px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;background:var(--ground);display:flex;align-items:center;justify-content:center;padding:0;transition:transform .12s}
.sza-heart path{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linejoin:round;transition:fill .2s}
.sza-heart.is-on path{fill:var(--gold)}
.sza-story{margin:0;padding:10px 12px;border-left:2px solid var(--c);background:color-mix(in srgb,var(--ground) 86%,transparent);font-size:12px;line-height:1.6;color:var(--ink2)}

.sza-card{position:absolute;left:20px;bottom:12px;padding:10px 16px 10px 10px;background:var(--face);border:1px solid var(--line);border-radius:14px;display:flex;gap:12px;align-items:center;text-align:left}
.sza-card .fuda{width:44px;height:70px;flex-shrink:0;position:relative;transform-style:preserve-3d;transition:transform .5s}
.sza-card.is-open .fuda{transform:rotateY(180deg)}
.sza-card .fuda i{position:absolute;inset:0;border-radius:5px;border:1px solid var(--gold);backface-visibility:hidden;display:flex;align-items:center;justify-content:center}
.sza-card .fuda .back{background:var(--month);box-shadow:0 0 18px rgba(217,185,120,.4)}
.sza-card .fuda .front{background:#F3EAD6;color:#3A1410;transform:rotateY(180deg);font-family:var(--mincho);font-weight:800;font-style:normal;font-size:15px;writing-mode:vertical-rl;letter-spacing:.1em;border-color:var(--month);box-shadow:inset 0 0 0 3px #F3EAD6,inset 0 0 0 4px var(--month)}
.sza-card .fuda .front{overflow:hidden}
.sza-card .fuda .front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sza-card .txt{display:flex;flex-direction:column;gap:3px}
.sza-card .txt b{font-size:15px}
.sza-card .txt span:first-child{font-size:12px;color:var(--gold)}
.sza-card .txt span:last-child{font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
@container (max-height:345px){
  .sza-card{padding:7px 12px 7px 7px;gap:9px}
  .sza-card .fuda{width:34px;height:54px}
  .sza-card .fuda .front{font-size:12px}
  .sza-card .txt b{font-size:14px}
  .sza-talk{top:8px;gap:5px}
  .sza-bubble{font-size:14px;padding:9px 12px}
}

/* 新着の帯と扉 */
.sza-news{flex-shrink:0;margin:8px 20px 0;width:calc(100% - 40px);height:44px;padding:0 12px 0 14px;border:1px solid var(--line);border-radius:12px;background:none;display:flex;align-items:center;gap:10px;text-align:left}
.sza-news .t{flex:1;min-width:0;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sza-news .n{flex-shrink:0;font-size:11.5px;color:var(--mute)}
.sza-tag{flex-shrink:0;font-size:11px;font-weight:700;color:var(--gold-ink);background:var(--gold);border-radius:3px;padding:1px 7px}
.sza-tag.is-line{font-weight:400;color:var(--gold);background:none;border:1px solid var(--gold);padding:0 6px}
.sza-doors{flex-shrink:0;padding:8px 20px 8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sza-door.is-slim{grid-column:1 / -1;height:48px;flex-direction:row;align-items:center}
.sza-door.is-slim b{display:inline;font-size:17px}
.sza-door.is-slim small{display:inline;margin-left:10px}
.sza-door.is-slim>svg{align-self:center}
.sza-door{position:relative;height:100px;padding:12px 14px;background:var(--face);border:0;border-radius:14px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;transition:transform .12s}
.sza-door.is-all{background:none;border:1px solid var(--gold)}
.sza-door b{font-family:var(--mincho);font-weight:800;font-size:20px;display:block;line-height:1.3}
.sza-door small{font-size:11.5px;color:var(--mute);display:block}
.sza-door .pair{display:flex;align-self:flex-end}
.sza-door .pair .sza-av{width:28px;height:28px;font-size:13px}
.sza-door .pair .sza-av+.sza-av{margin-left:-8px}
.sza-door .pair .set{display:flex}
.sza-door .pair .set+.set{margin-left:6px}
.sza-door .pair.is-four .sza-av{width:24px;height:24px;font-size:11px}
.sza-door>svg{align-self:flex-end}
.sza-door .badge{position:absolute;left:14px;bottom:12px;font-size:11px;font-weight:700;color:var(--month-ink);background:var(--month);border-radius:10px;padding:1px 8px}
.sza-door:active,.sza-heart:active,.sza-pill:active,.sza-news:active,.sza-tool:active{transform:translateY(1px) scale(.985)}
.sza-newlist{display:none}
@media (max-height:760px){
  .sza-door{height:68px;padding:9px 12px}
  .sza-door.is-slim{height:44px}
  .sza-door.is-slim small{display:inline}
  .sza-door b{font-size:18px}
  .sza-door small{display:none}
  .sza-door .badge{left:12px;bottom:10px}
}

/* 下のメニュー */
.sza-tabs{flex-shrink:0;color:var(--ink2);border-top:1px solid var(--line);background:var(--deep);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding-bottom:env(safe-area-inset-bottom,0px)}
.sza-tabs>*{height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;color:var(--ink2);background:none;border:0;padding:0}
.sza-tabs svg,.sza-side svg{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sza-tabs [aria-current="page"]{color:var(--gold)}

/* 部屋 */
.sza-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 20px 16px}
.sza-greet{flex-shrink:0;margin:2px 20px 0;padding:10px 12px;background:var(--face);border-radius:14px;display:flex;gap:10px;align-items:flex-start}
.sza-greet .sza-av{width:42px;height:42px;font-size:18px}
.sza-greet .lab{font-size:11.5px;color:var(--t);margin-bottom:4px}
.sza-greet p{margin:0;background:var(--face3);border-radius:4px 14px 14px 14px;padding:7px 11px;font-size:13px;line-height:1.55}
.sza-greet>div{flex:1;min-width:0}
/* 部屋の中：左（スマホは1枚め）がメニュー、右（2枚め）がフォルダの中身。
   メニューは「絵＋名前」だけ。説明・人数・件数は、ひらいた先に出す */
.sza-rooms{flex:1;min-height:0;display:flex;flex-direction:column}
.sza-fside{flex:1;min-height:0;display:flex;flex-direction:column}
.sza-fmenu{flex:1;min-height:0;overflow-y:auto;padding:10px 20px 16px;display:flex;flex-direction:column;gap:6px}
.sza-fgroup{flex-shrink:0;margin:10px 2px 2px;font-size:12px;letter-spacing:.1em;color:var(--gold)}
.sza-fgroup:first-child{margin-top:0}
.sza-folder{flex-shrink:0;width:100%;height:52px;padding:0 14px;background:var(--face);border:1px solid transparent;border-radius:12px;display:flex;align-items:center;gap:12px;text-align:left;transition:transform .12s}
.sza-folder:active{transform:translateY(1px) scale(.99)}
.sza-folder svg,.sza-fhead .ico svg{flex-shrink:0;fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sza-folder svg .dot,.sza-fhead .ico svg .dot{fill:var(--gold);stroke:none}
.sza-folder b{flex:1;min-width:0;font-family:var(--mincho);font-weight:800;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sza-folder .first{flex-shrink:0;font-size:10.5px;font-weight:700;color:var(--gold-ink);background:var(--gold);border-radius:3px;padding:0 6px}
.sza .sza-folder[aria-current="true"]>b{color:inherit}
.sza-fbody{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.sza-fhead{flex-shrink:0;padding:8px 20px 0;display:flex;align-items:center;gap:10px}
.sza-fback{flex-shrink:0;width:40px;height:40px;margin-left:-8px;border:0;border-radius:50%;background:none;padding:0;display:flex;align-items:center;justify-content:center}
.sza-fhead .ico{flex-shrink:0;display:flex}
.sza-fhead b{flex:1;min-width:0;font-family:var(--mincho);font-weight:800;font-size:19px;line-height:1.35}
.sza-fwho{flex-shrink:0;display:flex}
.sza-fwho .sza-av{width:34px;height:34px;font-size:13px}
.sza-fwho .sza-av+.sza-av{margin-left:-9px}
.sza-fdesc{flex-shrink:0;padding:4px 20px 10px;font-size:12.5px;line-height:1.6;color:var(--mute)}
.sza-fq{flex-shrink:0;padding:0 20px 8px}
.sza-fq input{height:40px;width:100%;padding:0 14px;border:1px solid var(--line);border-radius:20px;background:var(--face);color:var(--ink);font-family:var(--gothic);font-size:16px}
.sza-room[data-open="0"] .sza-fbody{display:none}
.sza-room[data-open="1"] .sza-fside{display:none}
/* 一覧の行：部屋の中では、題と「誰が話すか」だけ */
.sza-read.is-slim{padding:11px 0;gap:2px}
.sza-read.is-slim b{font-size:14.5px;font-weight:500;line-height:1.5}
.sza-read.is-slim .sza-meta{font-size:11.5px}
.sza-read.is-lead{padding:12px 14px;margin-bottom:8px;background:var(--face);border:1px solid var(--line);border-radius:12px;flex-direction:row;align-items:center;gap:10px}
.sza-read.is-lead b{flex:1;min-width:0;font-size:14.5px}
.sza-read.is-lead .go{flex-shrink:0;font-size:11.5px;color:var(--gold)}
/* 入口のボタン：順番に進む道（TRPGをはじめる）と、どこから始めてもいい道（キャラクターをつくる）。
   どちらも、ひと目で押せると分かる札の形にする */
.sza-starts{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:6px}
.sza-start,.sza-step{width:100%;min-height:60px;padding:11px 12px 11px 14px;background:var(--face);border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;gap:12px;text-align:left;transition:transform .12s,border-color .15s,background-color .15s}
.sza-step{margin-bottom:8px}
.sza-step .no{flex-shrink:0;display:flex}
.sza-step .no b{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold);font-family:var(--mincho);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
.sza-step.is-read .no b{background:var(--gold);color:var(--gold-ink)}
.sza-start .bd,.sza-step .bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sza-start .bd b,.sza-step .bd b{font-size:15.5px;line-height:1.4}
.sza-start .bd small{font-size:12px;color:var(--mute)}
.sza-start .go,.sza-step .go{opacity:.75}
.sza-start:active,.sza-step:active,.sza-jumpbtn:active{transform:translateY(1px) scale(.99)}
/* モチーフへの誘い：キャラクターを作る・深める場所から、モチーフの棚へ1回で行ける */
.sza-jump{margin:12px 0 6px;padding:14px;border:1px dashed var(--gold);border-radius:14px;display:flex;flex-direction:column;gap:4px}
.sza-jump>b{font-family:var(--mincho);font-weight:800;font-size:16px}
.sza-jump>small{font-size:12px;line-height:1.6;color:var(--mute)}
.sza-jumpgrid{margin-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sza-jumpbtn{height:46px;padding:0 10px;border:1px solid var(--line);border-radius:12px;background:var(--face);display:flex;align-items:center;gap:8px;font-size:13.5px;text-align:left;white-space:nowrap;overflow:hidden;transition:transform .12s,border-color .15s,background-color .15s}
.sza-jumpbtn>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){
  .sza-start:hover,.sza-step:hover,.sza-jumpbtn:hover,.sza-read.is-lead:hover,.sza-tool:hover,.sza-folder:hover{border-color:var(--gold);background-color:var(--face2)}
  .sza-read.is-slim:hover b{color:var(--gold)}
}
.sza-meta{font-size:12px;color:var(--mute);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sza-sub{margin:6px 0 10px;padding-top:14px;border-top:1px solid var(--line2);font-size:12px;letter-spacing:.1em;color:var(--gold)}
.sza-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sza-tool{padding:12px 14px;background:var(--face);border:1px solid transparent;border-radius:12px;display:flex;flex-direction:column;gap:4px;text-align:left;transition:transform .12s}
.sza-tool b{font-size:14px;line-height:1.45}
.sza-tool span{font-size:11.5px;color:var(--mute)}
.sza-read{width:100%;padding:13px 0;background:none;border:0;border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:3px;text-align:left}
.sza-read b{font-size:15px}
.sza-seg{height:44px;padding:0 16px;border:1px solid var(--line3);border-radius:22px;background:none;font-size:14px;white-space:nowrap;flex-shrink:0}
.sza-seg[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);font-weight:700}
.sza-filters{flex-shrink:0;padding:4px 20px 12px;display:flex;gap:6px;overflow-x:auto}
.sza-filters .sza-seg{height:38px;padding:0 11px;font-size:13px}
/* 分野の中をもう一段分ける行（TRPGなど）。上の行より小さく、線だけで選んだ印を出す */
.sza-filters.is-sub{padding-top:0}
.sza-filters.is-sub .sza-seg{height:34px;padding:0 12px;font-size:12.5px;border-color:var(--line)}
.sza-filters.is-sub .sza-seg[aria-pressed="true"]{background:none;border-color:var(--gold);color:var(--gold);font-weight:700}
.sza mark{background:none;color:var(--gold);font-weight:700}
.sza-findsay{margin:2px 0 8px;line-height:1.7}
.sza-findq input::placeholder,.sza-fq input::placeholder{color:var(--mute);opacity:.8}
.sza-findq{flex-shrink:0;padding:0 20px 10px}
.sza-findq input{height:44px;width:100%;padding:0 14px;border:1px solid var(--line3);border-radius:22px;background:var(--face);color:var(--ink);font-family:var(--gothic);font-size:16px}
.sza-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.sza-more{width:100%;height:44px;margin-top:12px;border:1px solid var(--line3);border-radius:22px;background:none;font-size:13px}
.sza-tool .sza-tag{align-self:flex-start;margin-bottom:2px;font-size:11px;color:var(--gold-ink)}

/* 絵（線のアイコン）の入れ物 */
.sza-ico{display:flex;flex-shrink:0}
.sza-ico svg{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sza-ico svg .dot{fill:var(--gold);stroke:none}
.sza-door .sza-ico{position:absolute;right:14px;bottom:12px}
.sza-door .sza-ico svg{width:28px;height:28px}
/* 分野の入口：スマホは扉の下の近道の行、広いPCは舞台の右上 */
.sza-genre{display:none}
.sza-door.is-slim{display:none}
.sza-short{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sza-short button{height:44px;padding:0 2px;border:1px solid var(--line);border-radius:12px;background:none;display:flex;align-items:center;justify-content:center;gap:5px;font-size:12.5px;white-space:nowrap;transition:transform .12s}
.sza-short button.is-all{border-color:var(--gold)}
.sza-short button:active,.sza-genre button:active,.sza-pic:active{transform:translateY(1px) scale(.985)}
/* 絵つきの棚：アイキャッチは小さい版を、見えるところまで来てから読む */
.sza-th{position:relative;display:block;flex-shrink:0;aspect-ratio:16 / 9;border-radius:10px;overflow:hidden;background:var(--face);border:1px solid var(--line2);transition:border-color .15s}
.sza-th img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.sza-th.is-none{display:flex;align-items:center;justify-content:center}
.sza-th.is-none svg{fill:none;stroke:var(--line3);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.sza-th.is-none svg .dot{fill:var(--line3);stroke:none}
.sza-th .sza-tag{position:absolute;left:6px;top:6px;z-index:1}
.sza-th .sza-tag.is-line{background:var(--ground)}
.sza-pics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px;padding:4px 0}
.sza-pic{display:flex;flex-direction:column;gap:7px;min-width:0;text-align:left;transition:transform .12s}
.sza-pic .col,.sza-read .col{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sza-pic b{font-size:13px;font-weight:500;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.sza-pic small{font-size:11px;color:var(--mute)}
.sza [aria-current="true"] .col>b{color:var(--gold)}
.sza [aria-current="true"] .sza-th{border-color:var(--gold)}
.sza-read.has-th{flex-direction:row;align-items:center;gap:12px}
.sza-read.has-th .sza-th{width:92px;border-radius:8px}
.sza-strip{display:flex;gap:10px;overflow-x:auto;padding:2px 0 10px;scroll-snap-type:x proximity}
.sza-strip .sza-pic{flex:0 0 148px;scroll-snap-align:start}
.sza-strip .sza-pic b{-webkit-line-clamp:2}
.sza-sub.sza-subrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sza-scroll>.sza-sub:first-child{margin-top:0;padding-top:0;border-top:0}
.sza-again{flex-shrink:0;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:16px;background:none;font-size:11.5px;letter-spacing:0;color:var(--ink2);white-space:nowrap}
@media (hover:hover){
  .sza-pic:hover .sza-th,.sza-read.has-th:hover .sza-th{border-color:var(--gold)}
  .sza-pic:hover .sza-th img{transform:scale(1.05)}
}

/* 着信：話す前のスマホ。緑の「出る」が合図 */
.sza-phone{cursor:pointer}
.sza-phone .keys span.go{width:calc(var(--u)*46);height:calc(var(--u)*46);background:#4E9A62;border-color:#4E9A62}
.sza-phone .lbl{font-size:calc(var(--u)*11);letter-spacing:.2em;color:var(--ink2);margin-top:calc(var(--u)*-5)}
/* 吹き出し：隅の▼が「押すと話が進む」の印 */
.sza-bubble{position:relative;cursor:pointer;padding-bottom:16px}
.sza-bubble::after{content:"";position:absolute;right:12px;bottom:6px;border:5px solid transparent;border-top:7px solid var(--gold);border-bottom:0}
/* 返事の吹き出し：自分のキャラクターが返事をする形 */
.sza-reply{height:44px;padding:0 16px 0 7px;border:1.5px solid var(--gold);border-radius:22px 22px 4px 22px;background:var(--ground);font-size:13.5px;font-weight:500;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:transform .12s}
.sza-reply .sza-av{width:30px;height:30px;font-size:9px}
.sza-reply.is-solo{padding-left:16px}
.sza-reply:active,.sza-callopts button:active{transform:translateY(1px) scale(.985)}
/* 通話：スマホが手前に来て、画面いっぱいの通話になる。読む人は打たず、選ぶだけ */
.sza-call{position:absolute;inset:0;z-index:4;background:rgba(0,0,0,.76);display:flex;align-items:center;justify-content:center}
.sza-callbox{--c:var(--line3);--t:var(--ink2);width:100%;max-width:480px;height:100%;min-height:0;background:#0A0908;display:flex;flex-direction:column;align-items:center;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px))}
.sza-callbox .notch{flex-shrink:0;width:52px;height:5px;border-radius:3px;background:var(--line2)}
.sza-callbox .state{flex-shrink:0;margin-top:10px;font-size:12px;letter-spacing:.2em;color:var(--t);font-variant-numeric:tabular-nums}
.sza-callface{flex-shrink:0;margin-top:10px;border:0;border-radius:50%;background:none;padding:0}
.sza-callface .sza-av{width:92px;height:92px;font-size:32px;box-shadow:0 0 36px color-mix(in srgb,var(--c) 40%,transparent)}
.sza-callbox .who{flex-shrink:0;margin-top:8px;font-family:var(--mincho);font-weight:800;font-size:19px;letter-spacing:.08em}
.sza-calllog{position:relative;flex:1;min-height:0;width:100%;overflow-y:auto;padding:12px 18px 8px;display:flex;flex-direction:column;gap:8px}
.sza-msg{flex-shrink:0;max-width:86%;align-self:flex-start;background:var(--face2);border:1px solid var(--line);border-radius:4px 16px 16px 16px;padding:9px 13px;font-size:14.5px;line-height:1.6}
.sza-msg.is-me{align-self:flex-end;background:none;border-color:var(--gold);border-radius:16px 16px 4px 16px;font-size:13.5px;color:var(--ink2)}
.sza-msg.is-note{align-self:stretch;max-width:none;background:none;border:0;border-left:2px solid var(--c);border-radius:0;font-size:12.5px;color:var(--ink2)}
.sza-msg.is-wait{color:var(--mute);letter-spacing:.3em}
.sza-sent{flex-shrink:0;align-self:stretch;display:flex;flex-direction:column;border-left:2px solid var(--c);padding-left:10px}
.sza-send{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line2);text-align:left}
.sza-send:last-child{border-bottom:0}
.sza-send .sza-th{width:88px;border-radius:8px}
.sza-send b{flex:1;min-width:0;font-size:13px;font-weight:500;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.sza-callopts{flex-shrink:0;width:100%;max-height:40%;overflow-y:auto;padding:8px 18px 4px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.sza-callopts button{min-height:40px;padding:6px 14px;border:1px solid var(--gold);border-radius:20px 20px 4px 20px;background:none;font-size:13.5px;text-align:left;transition:transform .12s}
.sza-callopts button.is-quiet{border-color:var(--line3);color:var(--ink2)}
.sza-callopts button.is-mine{background:color-mix(in srgb,var(--gold) 18%,transparent);font-weight:700}
.sza-optlab{flex:0 0 100%;text-align:right;font-size:11px;letter-spacing:.06em;color:var(--mute)}
.sza-callkeys{flex-shrink:0;padding-top:8px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--mute)}
.sza-callend{width:52px;height:52px;border:0;border-radius:50%;background:var(--month);padding:0;display:flex;align-items:center;justify-content:center}
/* キャラクターホーム：下のメニューのまんなか。どの画面からも1回で帰れる */
.sza-tabs{overflow:visible}
.sza-tabs .sza-hometab{justify-content:flex-end;gap:3px;padding-bottom:6px;overflow:visible}
.sza-tabs .sza-hometab .hico{width:46px;height:46px;border-radius:50%;border:2px solid var(--gold);background:var(--deep);box-shadow:0 0 0 4px var(--deep);align-items:center;justify-content:center}
.sza-tabs .sza-hometab>span:last-child{font-size:9.5px;white-space:nowrap;color:var(--gold)}
.sza-tabs .sza-hometab:active .hico{transform:scale(.96)}
/* 背の低いスマホ：舞台がせまいので、返事の行を少し詰める */
@container (max-height:345px){
  .sza-bubble{padding-bottom:14px}
  .sza-reply{height:40px}
  .sza-heart{width:40px;height:40px}
}
@container (max-height:300px){
  .sza-talk .lab{display:none}
}

/* 手帳：出会った花札・タロット・悪魔 */
.sza-techohead{flex-shrink:0;padding:0 20px 10px;display:flex;align-items:center;gap:10px}
.sza-techohead .sza-av{width:38px;height:38px;font-size:15px}
.sza-techohead p{flex:1;min-width:0;font-size:12.5px;line-height:1.6;color:var(--mute)}
.sza-techohead p b{display:block;font-size:13px;font-weight:500;color:var(--ink)}
.sza-months{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.sza-month{display:flex;align-items:center;gap:10px}
.sza-month .mlab{flex:0 0 46px;font-family:var(--mincho);font-weight:800;font-size:14px;line-height:1.3}
.sza-month .mlab small{display:block;font-family:var(--gothic);font-weight:400;font-size:10.5px;color:var(--mute)}
.sza-month .mcards{flex:1;max-width:280px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sza-fcard{position:relative;display:block;aspect-ratio:33 / 54;border:1px solid var(--line);border-radius:6px;background:var(--face);overflow:hidden;padding:0;transition:transform .12s}
.sza-fcard img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.sza-fcard.is-got{border-color:var(--gold);background:#F3EAD6}
.sza-fcard:not(.is-got)::after{content:"";position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg);border:1px solid var(--line3)}
.sza-fcard:active{transform:translateY(1px) scale(.985)}
.sza [aria-current="true"].sza-fcard{box-shadow:0 0 0 2px var(--gold)}
.sza-bk:not(.is-got) .sza-th{opacity:.5}
.sza-bk.is-got .sza-th{border-color:var(--gold)}
.sza-bk b{-webkit-line-clamp:2}
/* 作者について：小さな入口 */
.sza-about{align-self:flex-start;font-size:12px;color:var(--mute);text-decoration:underline;text-underline-offset:3px;padding:8px 0}
#sza .sza-about{color:var(--mute);text-decoration:underline}
.sza-acts+.sza-note{font-size:11.5px;line-height:1.7}

/* スマホの操作：押したときの青い影を消す／端まで送っても後ろのページが動かないようにする */
.sza{-webkit-tap-highlight-color:transparent}
.sza-scroll,.sza-fmenu,.sza-calllog,.sza-callopts,.sza-home,.sza-right{overscroll-behavior:contain}
/* 横に送れる行（絞り込み）：右端をぼかして「まだ続きがある」と分かるようにする。ボタンは指で押しやすい高さに */
.sza-filters{padding-right:36px;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
.sza-filters::-webkit-scrollbar{display:none}
.sza-filters .sza-seg{height:40px}
.sza-filters.is-sub .sza-seg{height:38px}
.sza-again{height:36px}
.sza-talk .nm a{display:inline-block;padding:5px 0}
/* フォルダの中からの戻るは、上の「‹」ひとつにまとめる（戻るボタンが2つ並ばないように） */
.sza-fback{display:none}
/* 背の低いスマホ：新着の帯をしまって、扉と近道を1画面に収める */
@media (max-width:959px) and (max-height:680px){
  .sza-news{display:none}
  .sza-doors{padding-top:10px}
}

/* 自分のキャラクターを足す・直す */
.sza-melist{display:flex;gap:8px;flex-wrap:wrap}
.sza-melist .sza-av{width:44px;height:44px;font-size:13px;padding:0;background:none;cursor:pointer}
.sza-melist .sza-av[aria-pressed="true"]{border:2px solid var(--gold)}
.sza-edform{display:flex;flex-direction:column;gap:16px}
.sza-edpic{display:flex;align-items:center;gap:16px}
.sza-edpic .sza-av{width:88px;height:88px;font-size:26px;padding:0;cursor:pointer}
.sza-edpic .btns{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.sza-swatches{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.sza-swatches button{aspect-ratio:1;min-width:0;border-radius:50%;border:1px solid var(--line);background:var(--sw);padding:0}
.sza-swatches button.is-none{background:none;border:1px dashed var(--line3);font-size:10.5px;color:var(--mute)}
.sza-swatches button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--face),0 0 0 4px var(--gold)}
.sza-quiet{height:40px;padding:0 4px;border:0;background:none;color:var(--mute);font-size:12.5px;text-decoration:underline;text-underline-offset:3px}
.sza-edform .sza-quiet.is-del{align-self:center}
/* フォルダ専任の案内人の一言（スマホと、右で読んでいるあいだの細い一覧で出す。PCの2列では左の一言が受け持つ） */
.sza-fgreet{display:flex;gap:10px;align-items:flex-start;margin:2px 0 12px}
.sza-fgreet .sza-av{width:40px;height:40px;font-size:16px}
.sza-fgreet>div{flex:1;min-width:0}
.sza-fgreet .lab{display:block;font-size:11.5px;color:var(--t);margin-bottom:4px}
.sza-fgreet p{background:var(--face2);border:1px solid var(--line);border-radius:4px 14px 14px 14px;padding:8px 12px;font-size:13.5px;line-height:1.6}
.sza-fwho .sza-av:nth-child(n+3){margin-left:-12px}

/* わたし */
.sza-me .sza-scroll{display:flex;flex-direction:column;gap:14px;padding-top:2px}
.sza-box{padding:16px;background:var(--face);border-radius:16px;display:flex;flex-direction:column;gap:14px}
.sza-box.is-line{background:none;border:1px solid var(--line);border-radius:14px;padding:14px 16px;gap:10px}
.sza-box h2,.sza-kv h2{margin:0;font-size:13px;font-weight:400;color:var(--gold)}
.sza-meh{display:flex;gap:16px;align-items:center}
.sza-meh .sza-av{width:84px;height:84px;font-size:12px}
.sza-meh .nm{font-family:var(--mincho);font-weight:800;font-size:26px;letter-spacing:.06em;line-height:1.3;overflow-wrap:anywhere}
.sza-meh .tone{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2)}
.sza-meh .tone i{width:12px;height:12px;border-radius:50%;background:var(--c,#9FB7C9)}
.sza-mel{display:flex;align-items:center;gap:10px}
.sza-mel .sza-av{width:44px;height:44px;font-size:12px;background:none}
.sza-mel .add{width:44px;height:44px;border-radius:50%;border:1px dashed var(--line3);background:none;color:var(--gold);font-size:20px;line-height:1;padding:0}
.sza-mel .sza-note{flex:1;text-align:right;font-size:11px}
.sza-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;text-align:center;font-size:11px;color:var(--mute)}
.sza-days span{display:flex;flex-direction:column;align-items:center;gap:5px}
.sza-days i{width:22px;height:22px;border-radius:50%;border:1px solid #4A4236}
.sza-days .on i{background:var(--gold);border-color:var(--gold);box-shadow:0 0 12px rgba(217,185,120,.6)}
.sza-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sza-kv{padding:14px 16px;border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;gap:4px}
.sza-kv b{font-family:var(--mincho);font-weight:800;font-size:28px;line-height:1.2;font-variant-numeric:tabular-nums}
.sza-kv b small{font-size:13px;font-weight:500;color:var(--mute)}
.sza-kv span{font-size:11px;color:var(--mute)}
.sza-kv b span{font-size:inherit;color:inherit}
.sza-book{display:flex;flex-direction:column;gap:12px}
.sza-book h2{margin:0;font-family:var(--mincho);font-weight:800;font-size:17px;display:flex;justify-content:space-between;align-items:baseline}
.sza-meter{display:flex;flex-direction:column;gap:6px;font-size:13px}
.sza-meter div{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
.sza-meter div span span{color:var(--mute)}
.sza-meter i{display:block;height:4px;border-radius:2px;background:linear-gradient(to right,var(--gold) var(--p),var(--line2) var(--p))}
.sza-form{display:flex;flex-direction:column;gap:10px}
.sza-form label{font-size:13px;color:var(--gold)}
.sza-form input{height:48px;padding:0 14px;border:1px solid var(--line3);border-radius:12px;background:var(--ground);color:var(--ink);font-family:var(--gothic);font-size:16px;width:100%}
.sza-box.sza-homego{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;border-color:var(--gold);transition:transform .12s}
.sza-homego b{display:block;font-size:14.5px}
.sza-homego small{display:block;font-size:11.5px;color:var(--mute);margin-top:2px}
.sza-homego:active{transform:translateY(1px) scale(.985)}
.sza-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto}
.sza-acts .sza-seg{font-size:13px}
.sza-acts .quiet{margin-left:auto;height:44px;padding:0 8px;border:0;background:none;color:var(--mute);font-size:12.5px}
.sza-soon .sza-scroll{display:flex;flex-direction:column;gap:12px;padding-top:8px}
.sza-soon p{margin:0;font-size:14px;line-height:1.8;color:var(--ink2);max-width:34em}

/* 読む窓：記事と道具を、アプリの中で開く。メニューは残したまま、中身だけ入れ替える */
.sza-reader{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--ground)}
.sza-rbar{height:48px;flex-shrink:0;padding:0 6px 0 2px;display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--line2)}
.sza-rbar b{flex:1;min-width:0;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sza .sza-rbar a{height:44px;padding:0 10px;font-size:11.5px;color:var(--mute);display:flex;align-items:center;white-space:nowrap}
.sza-rsize{display:none;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:16px;background:none;font-size:11.5px;color:var(--ink2);white-space:nowrap}
.sza-rbody{flex:1;min-height:0;position:relative}
.sza-rbody iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--ground)}
.sza-rbody iframe.is-wait{visibility:hidden}
.sza-rwait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12.5px;color:var(--mute)}
.sza[data-reader] .sza-main>.sza-view{display:none}
.sza [aria-current="true"]>b,.sza [aria-current="true"] .bd>b{color:var(--gold)}

/* 見本の操作 */
.sza-sheet{position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center}
.sza-sheet>div{width:100%;max-width:480px;max-height:86%;overflow-y:auto;background:var(--face);border-top:1px dashed var(--line3);border-radius:18px 18px 0 0;padding:18px 20px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}
.sza-sheet h2{margin:0;font-size:15px;display:flex;justify-content:space-between;align-items:center}
.sza-sheet h3{margin:0;font-size:12px;font-weight:400;color:var(--gold)}
.sza-sheet p{margin:0;font-size:12px;line-height:1.7;color:var(--mute)}
.sza-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px 6px}
.sza-pick button{background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--ink2)}
.sza-pick .sza-av{width:44px;height:44px;font-size:17px}
.sza-pick [aria-pressed="true"]{color:var(--gold)}
.sza-pick [aria-pressed="true"] .sza-av{box-shadow:0 0 0 2px var(--face),0 0 0 3px var(--gold)}
.sza-toast{position:absolute;left:50%;bottom:76px;z-index:6;transform:translateX(-50%);max-width:calc(100% - 40px);padding:10px 16px;border:1px solid var(--line3);border-radius:12px;background:var(--face3);font-size:12.5px;text-align:center}

/* 動き：開いたときに一度。ずっと動くのは霞・光の輪・札の光の三つだけ */
@media (prefers-reduced-motion:no-preference){
  .sza.is-enter .sza-bg .sunset{animation:sza-rise 1.1s cubic-bezier(.2,.7,.2,1) backwards}
  .sza.is-enter .sza-phone{animation:sza-phone .9s .25s cubic-bezier(.2,.7,.2,1) backwards}
  .sza.is-enter .sza-talk>*{animation:sza-up .5s backwards}
  .sza.is-enter .sza-talk>:nth-child(1){animation-delay:.7s}
  .sza.is-enter .sza-talk>:nth-child(2){animation-delay:.85s}
  .sza.is-enter .sza-talk>:nth-child(3){animation-delay:1.05s}
  .sza.is-enter .sza-talk>:nth-child(n+4){animation-delay:1.3s}
  .sza.is-enter .sza-card{animation:sza-up .5s 1.6s backwards}
  .sza.is-enter .sza-genre{animation:sza-up .5s 1.3s backwards}
  .sza-bg .mist{animation:sza-drift 9s ease-in-out infinite alternate}
  .sza-phone .sza-av{animation:sza-ring 3.2s ease-out infinite}
  .sza-card:not(.is-open) .fuda .back{animation:sza-glow 3.6s ease-in-out infinite alternate}
  .sza-phone .keys span.go{animation:sza-go 2.4s ease-out infinite}
  .sza-bubble::after{animation:sza-bob 1.5s ease-in-out infinite}
  .sza-call:not([hidden]) .sza-callbox{animation:sza-callin .35s cubic-bezier(.2,.7,.2,1)}
  .sza-av.is-nod{animation:sza-nod .45s ease-out}
  .sza-msg,.sza-sent{animation:sza-up .25s backwards}
}
@keyframes sza-go{0%{box-shadow:0 0 0 0 rgba(78,154,98,.6)}70%,100%{box-shadow:0 0 0 calc(var(--u)*12) transparent}}
@keyframes sza-bob{50%{transform:translateY(3px)}}
@keyframes sza-callin{from{transform:translateY(40px) scale(.94);opacity:0}}
@keyframes sza-nod{40%{transform:translateY(5px)}}
@keyframes sza-rise{from{transform:translateY(28px);opacity:0}}
@keyframes sza-phone{from{transform:translateY(70px) rotate(-1deg);opacity:0}}
@keyframes sza-up{from{transform:translateY(8px);opacity:0}}
@keyframes sza-drift{from{transform:translateX(-7px)}to{transform:translateX(7px)}}
@keyframes sza-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 55%,transparent)}70%,100%{box-shadow:0 0 0 calc(var(--u)*11) transparent}}
@keyframes sza-glow{from{box-shadow:0 0 10px rgba(217,185,120,.25)}to{box-shadow:0 0 22px rgba(217,185,120,.55)}}

/* PC：スマホ版を引き伸ばさず、三つ割りにする */
@media (min-width:960px){
  .sza{max-width:none;display:grid;grid-template-columns:208px minmax(0,1fr)}
  .sza-tabs,.sza-home .sza-bar,.sza-news,.sza-bar .sza-chip,.sza-bar .sza-demo{display:none}
  .sza-side{display:flex;flex-direction:column;gap:24px;padding:28px 16px 20px;border-right:1px solid var(--line2);background:var(--deep);min-height:0}
  .sza-side .sza-logo{font-size:28px;gap:10px;padding:0 10px}
  .sza-side nav{display:flex;flex-direction:column;gap:4px}
  .sza-side nav>*{height:48px;padding:0 14px;border-radius:12px;border:0;background:none;display:flex;align-items:center;gap:12px;font-size:15px;text-align:left}
  .sza-side nav [aria-current="page"]{background:#1B1713;color:var(--gold)}
  .sza-side .sza-about{margin-top:auto;padding:4px 10px}
  .sza-side .sza-demo{display:block;margin-top:-12px;height:36px}
  .sza-me .sza-about{display:none}
  .sza-view.sza-techo{max-width:1080px}
  .sza-techo .sza-back{display:none}
  .sza-techo .sza-bar.has-back{padding-left:20px}
  .sza:not([data-reader]) .sza-months{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px}
  .sza:not([data-reader]) .sza-techo .sza-pics{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 12px}
  /* キャラクターホーム：ロゴのすぐ下。いちばん帰りやすい場所に置く */
  .sza-mecard{margin-top:-6px;padding:11px 10px;border:1.5px solid var(--gold);border-radius:14px;background:#1B1713;display:flex;align-items:center;gap:8px;text-align:left;transition:transform .12s}
  .sza-mecard:active{transform:translateY(1px) scale(.985)}
  .sza-callbox{max-width:430px;height:min(820px,94%);padding-top:16px;border:2px solid #4A4236;border-radius:36px;box-shadow:0 0 90px color-mix(in srgb,var(--c) 28%,transparent)}
  .sza-callface .sza-av{width:108px;height:108px;font-size:38px}
  .sza-reply{height:46px;font-size:14.5px}
  .sza-bubble{padding-bottom:20px}
  .sza-mecard b{font-size:12.5px;font-weight:700;white-space:nowrap;color:var(--gold)}
  .sza-home{display:grid;grid-template-columns:minmax(0,1fr) 424px;overflow:hidden}
  .sza-bg.is-sp{display:none}.sza-bg.is-pc{display:block}
  .sza-stage{min-height:0}
  .sza-phone{--u:min(1.52px,calc(68cqh / 330),calc(34cqw / 170))}
  .sza-talk{left:48px;top:52px;width:min(52%,330px);gap:12px}
  .sza-talk .lab{font-size:13px}
  .sza-talk .nm a{font-size:36px}
  .sza-talk .nm span{font-size:13px}
  .sza-bubble{padding:16px 20px;font-size:19px;border-radius:4px 20px 20px 20px}
  .sza-bubble small{font-size:14px}
  .sza-pill{padding:0 16px;font-size:13.5px}
  .sza-story{font-size:13px}
  .sza-card{left:48px;bottom:44px;padding:14px 22px 14px 14px;gap:16px;border-radius:16px}
  .sza-card .fuda{width:62px;height:100px}
  .sza-card .fuda .front{font-size:20px}
  .sza-card .txt b{font-size:19px}
  .sza-card .txt span:first-child{font-size:13px}
  .sza-card .txt span:last-child{font-size:12px}
  .sza-right{padding:44px 44px 36px 4px;display:flex;flex-direction:column;gap:16px;min-height:0;overflow-y:auto}
  .sza-doors{padding:0;gap:12px}
  .sza-door{height:128px;padding:16px;border-radius:16px}
  .sza-door.is-slim{height:56px}
  .sza-door.is-slim b{font-size:19px}
  .sza-door b{font-size:23px}
  .sza-door small{display:block;font-size:12px}
  .sza-door .pair .sza-av{width:32px;height:32px;font-size:14px}
  .sza-door .pair.is-four .sza-av{width:28px;height:28px;font-size:12px}
  .sza-door .badge{left:16px;bottom:16px}
  .sza-newlist{flex:1 0 auto;padding:18px 18px 8px;border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column}
  .sza-newlist h2{margin:0;font-family:var(--mincho);font-weight:800;font-size:18px}
  .sza-newlist .sza-read:last-child{border-bottom:0}
  #sza-newlist{display:flex;flex-direction:column}
  .sza-view:not(.sza-home){max-width:820px;padding:28px 28px 0}
  /* PCの部屋：左にメニュー、右にその中身。どちらも見えたまま */
  .sza-view.sza-room{max-width:1080px}
  .sza:not([data-reader]) .sza-room .sza-rooms{flex-direction:row}
  .sza:not([data-reader]) .sza-room .sza-fside{display:flex;flex:0 0 296px}
  .sza:not([data-reader]) .sza-room .sza-fmenu{padding:10px 16px 16px 20px}
  .sza:not([data-reader]) .sza-room .sza-fbody{display:flex;border-left:1px solid var(--line2)}
  .sza:not([data-reader]) .sza-room .sza-fback{display:none}
  .sza:not([data-reader]) .sza-room .sza-folder[aria-current="true"]{border-color:var(--gold);background:var(--face2)}
  .sza:not([data-reader]) .sza-room .sza-fhead{padding-top:4px}
  .sza:not([data-reader]) .sza-room .sza-fhead,.sza:not([data-reader]) .sza-room .sza-fdesc,.sza:not([data-reader]) .sza-room .sza-fq,.sza:not([data-reader]) .sza-room .sza-fbody .sza-scroll{padding-left:28px}
  /* PCで記事を開くと、部屋の一覧を左に残して、右で読む */
  .sza[data-reader="side"] .sza-main{flex-direction:row}
  .sza[data-reader="side"] .sza-main>.sza-view.is-list{display:flex;flex:0 0 372px;max-width:372px;padding:20px 0 0;border-right:1px solid var(--line2)}
  .sza-reader{background:var(--deep)}
  .sza[data-rkind="read"] .sza-rbody iframe{max-width:900px;margin:0 auto}
  .sza[data-rkind="read"] .sza-rsize{display:block}
  .sza-door .sza-ico{right:16px;bottom:16px}
  .sza-door .sza-ico svg{width:32px;height:32px}
  .sza-short{gap:10px}
  .sza-short button{height:50px;font-size:13px;gap:5px}
  #sza-stroll .sza-sub{margin-top:4px}
  .sza:not([data-reader]) .sza-room .sza-pics{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:20px 14px}
  .sza:not([data-reader]) .sza-room .sza-pic b{font-size:13.5px}
  .sza:not([data-reader]) .sza-room .sza-fgreet{display:none}
  .sza:not([data-reader]) .sza-room .sza-starts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sza:not([data-reader]) .sza-room .sza-jumpgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  /* 右で読んでいるあいだは、左の棚を細い行にする */
  .sza[data-reader="side"] .sza-room .sza-pics{grid-template-columns:minmax(0,1fr);gap:0}
  .sza[data-reader="side"] .sza-room .sza-pic{flex-direction:row;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line2)}
  .sza[data-reader="side"] .sza-room .sza-pic .sza-th{width:92px;border-radius:8px}
  .sza-toast{bottom:28px}
  .sza-sheet{align-items:center}
  .sza-sheet>div{border-radius:18px;border:1px dashed var(--line3)}
}
@media (min-width:960px) and (max-height:740px){
  .sza-door{height:100px}
  .sza-door.is-slim{height:48px}
  .sza-right{padding-top:28px;padding-bottom:24px}
  .sza-talk{top:32px}
  .sza-card{bottom:24px}
}
@media (min-width:1252px){
  .sza-short{display:none}
  .sza-door.is-slim{display:flex}
  .sza-genre{position:absolute;right:20px;top:44px;display:flex;align-items:center;gap:8px}
  .sza-genre .lab{font-size:12px;color:var(--mute);margin-right:2px}
  .sza-genre button{height:42px;padding:0 16px 0 12px;border:1px solid var(--line);border-radius:21px;background:color-mix(in srgb,var(--ground) 80%,transparent);display:flex;align-items:center;gap:7px;font-size:14px;white-space:nowrap;transition:transform .12s,border-color .15s}
  .sza-genre button:hover{border-color:var(--gold)}
}
@media (min-width:1252px) and (max-height:740px){
  .sza-genre{top:24px}
}
@media (min-width:960px) and (max-height:740px){
  .sza-door .sza-ico svg{width:28px;height:28px}
}
/* 背の低い画面の通話：顔を小さくして、台詞と札3枚が一度に見えるようにする */
@media (max-height:780px){
  .sza .sza-callface .sza-av{width:76px;height:76px;font-size:26px}
  .sza .sza-callface{margin-top:6px}
}