/* ============================================================
   紙芝居アニメ（会長方針・よくある質問）
   トップページの紙芝居と同じ舞台・めくり方です。
   動きは js/kamishibai.js、絵は各ページの中に書いてあります。
   ============================================================ */
/* Layout: a wooden kamishibai stage (butai) at night; cards are pulled out sideways, the storyteller's script sits below. Single dark world by design. */
.ksb{
  --night:#1B1A3A; --night-2:#262452;
  --wood:#9A6433; --wood-dark:#5E3A1B; --wood-light:#C48A4E;
  --gold:#F2B33D; --purple:#5B3C8C;
  --paper:#FFF8E7; --ink:#2A2340; --text:#F4EEDD; --muted:#B9B2D6;
  --f-display:"Dela Gothic One","Hiragino Sans","Yu Gothic",sans-serif;
  --f-card:"Yusei Magic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --f-body:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  color-scheme:dark;
}

/* stage */
.ksb .butai{position:relative;padding:clamp(10px,2.4vw,22px);border-radius:10px;
  background:
    repeating-linear-gradient(92deg,rgba(0,0,0,.08) 0 3px,transparent 3px 11px),
    linear-gradient(180deg,var(--wood-light),var(--wood) 40%,var(--wood-dark));
  box-shadow:0 30px 60px rgba(0,0,0,.5), inset 0 0 0 3px rgba(255,255,255,.08), inset 0 -6px 0 rgba(0,0,0,.25)}
.ksb .butai::before{content:"";position:absolute;left:-14px;right:-14px;top:-14px;height:22px;border-radius:6px;
  background:linear-gradient(180deg,var(--wood-light),var(--wood-dark));box-shadow:0 4px 8px rgba(0,0,0,.4)}
.ksb .butai::after{content:"";position:absolute;left:50%;bottom:-26px;width:38%;height:26px;transform:translateX(-50%);
  background:linear-gradient(180deg,var(--wood-dark),#3a230f);border-radius:0 0 8px 8px}
.ksb .window{position:relative;aspect-ratio:16/10;max-width:100%;overflow:hidden;border-radius:4px;background:#000;
  box-shadow:inset 0 0 0 4px var(--wood-dark)}
.ksb .card{position:absolute;inset:0;visibility:hidden;transition:transform .85s cubic-bezier(.6,.05,.3,1);will-change:transform;
  box-shadow:6px 0 18px rgba(0,0,0,.45);background:var(--paper)}
.ksb .card.on{visibility:visible}
.ksb .card svg{display:block;width:100%;height:100%}
.ksb .door{position:absolute;top:0;bottom:0;width:50%;z-index:10;transition:transform .55s cubic-bezier(.7,0,.3,1);
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.1) 0 2px,transparent 2px 14px),linear-gradient(180deg,var(--wood-light),var(--wood));
  display:grid;place-items:center}
.ksb .door.l{left:0;transform:translateX(-101%);border-right:2px solid var(--wood-dark)}
.ksb .door.r{right:0;transform:translateX(101%);border-left:2px solid var(--wood-dark)}
.ksb .door span{width:16px;height:16px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--wood-dark)}
.ksb .door.l span{justify-self:end;margin-right:14px}.ksb .door.r span{justify-self:start;margin-left:14px}
.ksb .closed .door{transform:none}

/* script panel */
.ksb .script{margin-top:36px;display:grid;grid-template-columns:auto 1fr;gap:14px 18px;align-items:start;
  background:var(--paper);color:var(--ink);border-radius:8px;padding:18px 20px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.ksb .scene-no{font-family:var(--f-display);color:var(--paper);background:var(--purple);border-radius:6px;padding:8px 10px;
  text-align:center;line-height:1.1;min-width:64px}
.ksb .scene-no b{display:block;font-size:1.6rem;font-weight:400;font-variant-numeric:tabular-nums}
.ksb .scene-no i{font-style:normal;font-family:var(--f-body);font-size:.7rem;letter-spacing:.15em}
.ksb .narr{min-width:0}
.ksb .narr h2,.ksb .narr h3{font-family:var(--f-card);font-weight:400;font-size:1.15rem;margin:0 0 6px;color:var(--purple)}
.ksb .narr p{margin:0;font-size:1.02rem;line-height:1.9;max-width:62ch;min-height:5.7em}

/* controls */
.ksb .controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.ksb .btns{display:flex;flex-wrap:wrap;gap:8px}
.ksb button{font-family:var(--f-body);font-weight:700;font-size:.95rem;border:0;border-radius:999px;padding:10px 18px;cursor:pointer;
  background:var(--night-2);color:var(--text);box-shadow:inset 0 0 0 2px rgba(255,255,255,.14);transition:transform .1s,background .2s}
.ksb button:hover{background:#34306a}
.ksb button:active{transform:translateY(1px)}
.ksb button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.ksb button.primary{background:var(--gold);color:var(--ink);box-shadow:none}
.ksb button.primary:hover{background:#ffc75a}
.ksb button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--gold);color:var(--gold)}
.ksb button:disabled{opacity:.4;cursor:default}
.ksb .dots{display:flex;gap:6px;flex-wrap:wrap}
.ksb .dots button{width:14px;height:14px;padding:0;border-radius:50%;background:rgba(255,255,255,.18);box-shadow:none}
.ksb .dots button.cur{background:var(--gold);transform:scale(1.2)}
.ksb .foot{color:var(--muted);font-size:.8rem;line-height:1.7}
.ksb .foot a{color:var(--gold)}

/* svg type + motion */
.ksb .h{font-family:var(--f-card)}
.ksb .d{font-family:var(--f-display)}
.ksb svg *{transform-box:fill-box;transform-origin:center}
.ksb .active .bob{animation:ksb-bob 2.4s ease-in-out infinite}
.ksb .active .spin{transform-box:view-box;animation:ksb-spin 40s linear infinite}
.ksb .active .tw{animation:ksb-tw 2.2s ease-in-out infinite}
.ksb .active .float{animation:ksb-floatUp 4s ease-in infinite}
.ksb .active .pop{animation:ksb-pop .6s cubic-bezier(.3,1.6,.5,1) both}
.ksb .active .fall{animation:ksb-fall 6s linear infinite}
.ksb .active .drift{transform-box:view-box;animation:ksb-drift 14s linear infinite}
.ksb .active .glow{animation:ksb-glow 2s ease-in-out infinite}
.ksb .active .wiggle{animation:ksb-wiggle 1.6s ease-in-out infinite}
.ksb .active .jump{animation:ksb-jump .9s ease-in-out infinite}
.ksb .active .drop{animation:ksb-drop 2.6s ease-in infinite}
@keyframes ksb-bob{50%{transform:translateY(-8px)}}
@keyframes ksb-spin{to{transform:rotate(360deg)}}
@keyframes ksb-tw{50%{opacity:.25}}
@keyframes ksb-floatUp{0%{transform:translateY(40px);opacity:0}15%{opacity:1}100%{transform:translateY(-260px);opacity:0}}
@keyframes ksb-pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes ksb-fall{0%{transform:translate(0,-60px) rotate(0)}100%{transform:translate(-80px,520px) rotate(540deg)}}
@keyframes ksb-drift{to{transform:translateX(-320px)}}
@keyframes ksb-glow{50%{opacity:.55;transform:scale(1.06)}}
@keyframes ksb-wiggle{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes ksb-jump{50%{transform:translateY(-14px)}}
@keyframes ksb-drop{0%{transform:translateY(-120px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(130px);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ksb .card,.ksb .door{transition:none!important}
  .ksb .active *{animation:none!important}
}
@media (max-width:560px){
  .ksb .script{grid-template-columns:1fr}
  .ksb .scene-no{display:flex;gap:8px;align-items:baseline;justify-self:start}
  .ksb .narr p{min-height:0}
}

.ksb{font-family:var(--f-body);color:var(--text);padding:clamp(18px,3vw,32px) clamp(12px,3vw,28px) 24px;border-radius:16px;
  background:radial-gradient(ellipse at 50% 0%,var(--night-2),var(--night) 70%);}
.ksb .wrap{max-width:940px;margin:0 auto;display:flex;flex-direction:column;gap:18px;padding:0}
.ksb *,.ksb *::before,.ksb *::after{box-sizing:border-box}

/* 絵の中のボタン（お問い合わせへのリンク） */
.ksb .card a{cursor:pointer}
.ksb .card a:hover .cta-bg{fill:#7A52B8}
.ksb .card a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}