/* 並べ方: 作品の絵を上に大きく。Aonivaは左上と一番下だけ。地の色は上が夜、下が朝。 */
:root{
  --night:#070B24;        /* 絵の夜空のいちばん暗いところ */
  --night-2:#101848;      /* 魔女の列の地 */
  --dusk:#27367F;         /* 夜明け前 */
  --morning:#EDF2FB;      /* 朝の地 */
  --ink:#F4F5FF;          /* 夜の上の文字 */
  --ink-soft:#BAC2EA;
  --ink-d:#121A3E;        /* 朝の上の文字 */
  --ink-d-soft:#4C567F;
  --gold:#F6CF72;         /* ゲームの金ボタン */
  --gold-deep:#A86A12;
  --gold-ink:#3A2305;
  --aoniva:#1FBFF0;       /* Aonivaの水色。枠と一番下でだけ使う */
  --line-n:rgba(190,200,255,.2);
  --line-d:rgba(18,26,62,.16);
  --serif:"Noto Serif JP","Noto Serif CJK JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Noto Sans CJK JP","Hiragino Sans","Yu Gothic",sans-serif;
  --gutter:clamp(20px,5vw,56px);
  --wide:1180px;
  --hero-h:clamp(540px,52.8vw,780px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
body{position:relative;margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--night);color:var(--ink);font-family:var(--sans);font-size:15.5px;line-height:1.95;
  -webkit-font-smoothing:antialiased;line-break:strict;overflow-x:hidden}
img{display:block}
a{color:inherit}
h1,h2,h3,p,dl,dd,figure{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{width:min(100%,calc(var(--wide) + var(--gutter)*2));margin-inline:auto;padding-inline:var(--gutter)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- 左上のAonivaと、短いメニュー ---------- */
.top{position:absolute;inset:0 0 auto 0;z-index:6}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand__mark{width:30px;height:auto}
.brand__name{height:11px;width:auto;opacity:.92}
.nav{display:flex;gap:clamp(14px,2.4vw,30px);font-size:13.5px;letter-spacing:.04em}
.nav a{text-decoration:none;color:var(--ink);opacity:.92;padding:10px 0;text-shadow:0 0 5px rgba(4,6,30,.95),0 0 10px rgba(4,6,30,.9),0 1px 16px rgba(4,6,30,.9)}
.nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--gold)}

/* ---------- いちばん上の絵 ---------- */
.hero{position:relative;height:var(--hero-h);overflow:hidden;background:var(--night);isolation:isolate}
.hero__bgwrap{position:absolute;inset:0;z-index:0}
/* 背景は、絵の中の一点(--fpx,--fpy)が、舞台の決まった場所に来るように置く。横は文字の列の幅に対する割合(--fax)、たては舞台の高さに対する割合(--fay) */
.hero{--bgw:calc(max(100vw,var(--hero-h)*var(--rw,1.73)*1.03)*var(--bz,1));--bgh:calc(var(--bgw)/var(--rw,1.73));
  --col:min(100vw - var(--gutter)*2,var(--wide));--ax:calc((100vw - var(--col))/2 + var(--col)*var(--fax,.5))}
.hero__bg{position:absolute;width:var(--bgw);height:var(--bgh);
  left:clamp(calc(100% - var(--bgw)),calc(var(--ax) - var(--bgw)*var(--fpx,.5)),0px);
  top:clamp(calc(var(--hero-h) - var(--bgh)),calc(var(--hero-h)*var(--fay,.46) - var(--bgh)*var(--fpy,.46)),0px)}
.hero__bg img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.hero__glow{position:absolute;left:var(--gx,50%);top:var(--gy,60%);width:15%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(150,170,255,.55),rgba(120,120,255,.18) 55%,transparent);mix-blend-mode:screen;opacity:.55}
.hero__motes{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.hero__shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(6,9,34,.86) 0%,rgba(6,9,34,.6) 20%,rgba(6,9,34,0) 37%),
    linear-gradient(180deg,rgba(6,9,34,.5) 0%,rgba(6,9,34,0) 22%,rgba(6,9,34,0) 88%,var(--night) 100%)}
.hero__cast{position:absolute;z-index:3;right:0;bottom:0;width:58%;height:100%;pointer-events:none}
.ch{position:absolute;bottom:0;height:100%}
.ch img{height:100%;width:auto;max-width:none;filter:drop-shadow(0 18px 30px rgba(3,4,24,.55))}
/* 三人は、顔が重ならない間隔で並べる。大きさ(--k)と左はじ(--g)は舞台の高さを1とした割合 */
.hero__cast{--k:.9;--g:.04}
.ch--l{left:calc(var(--hero-h)*var(--g));height:calc(86%*var(--k));bottom:-8%}
.ch--r{left:calc(var(--hero-h)*(var(--g) + .67*var(--k)));right:auto;height:calc(86%*var(--k));bottom:-8%}
.ch--c{left:calc(var(--hero-h)*(var(--g) + .30*var(--k)));height:calc(99%*var(--k));bottom:-10%}
@media (min-width:1600px){.hero__cast{--k:1;--g:.1}}
/* 絵の外側のはじは切れているので、広い画面で見えたときのために、ふわっと消しておく */
.ch--l img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%);mask-image:linear-gradient(90deg,transparent 0,#000 9%)}
.ch--r img{-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 12%);mask-image:linear-gradient(270deg,transparent 0,#000 12%)}
.ch--l img,.ch--r img{filter:brightness(.9) saturate(.96) drop-shadow(0 18px 30px rgba(3,4,24,.55))}
.hero__foot{position:absolute;inset:auto 0 0 0;height:12%;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,11,36,0),var(--night) 92%)}
.hero__copy{position:absolute;z-index:5;inset:0;display:flex;align-items:center;pointer-events:none}
.hero__copy>.wrap{pointer-events:none}
.copy{width:min(45%,540px);padding-top:44px;pointer-events:auto}
.logo{position:relative;width:100%;margin-left:-3%}
.logo img{width:100%;height:auto;filter:drop-shadow(0 10px 26px rgba(10,4,40,.75))}
.logo__shine{position:absolute;inset:0;pointer-events:none;opacity:0;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%) no-repeat;background-size:260% 100%;background-position:130% 0}
.lead{font-family:var(--serif);font-weight:700;font-size:clamp(17px,1.55vw,21px);line-height:1.7;letter-spacing:.04em;margin-top:6px;
  text-shadow:0 2px 14px rgba(4,6,30,.95)}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 34px;border-radius:999px;
  font:700 16.5px/1 var(--sans);letter-spacing:.14em;text-decoration:none;cursor:pointer;border:0;overflow:hidden;
  transition:translate .16s ease,box-shadow .16s ease,background-color .16s ease}
.btn--play{color:var(--gold-ink);background:linear-gradient(180deg,#FFE9A8 0%,var(--gold) 46%,#E4A93B 100%);
  box-shadow:inset 0 0 0 2px rgba(120,72,6,.65),inset 0 3px 0 rgba(255,255,255,.6),0 8px 22px rgba(3,4,24,.55)}
.btn--more{color:var(--ink);background:rgba(13,22,74,.72);box-shadow:inset 0 0 0 1.5px rgba(246,207,114,.75),0 8px 22px rgba(3,4,24,.45);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);letter-spacing:.08em;font-weight:500}
.btn:hover{translate:0 -2px}
.btn:active{translate:0 1px}
.btn--play:hover{box-shadow:inset 0 0 0 2px rgba(120,72,6,.65),inset 0 3px 0 rgba(255,255,255,.6),0 12px 28px rgba(3,4,24,.6),0 0 0 6px rgba(246,207,114,.16)}
.btn--more:hover{background:rgba(24,36,104,.86)}
.btn__shine{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%) no-repeat;background-size:250% 100%;background-position:130% 0}
.notes{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;max-width:21em;font-size:13px;color:var(--ink-soft);padding:0;list-style:none;
  text-shadow:0 1px 10px rgba(4,6,30,.95)}
.notes li{display:flex;align-items:center;gap:7px}
.notes li::before{content:"";width:5px;height:5px;rotate:45deg;background:var(--gold);flex:none}

/* ---------- 七人の魔女 ---------- */
.night{background:linear-gradient(180deg,var(--night) 0%,var(--night-2) 100%)}
.cast{padding-block:clamp(40px,5vw,64px) clamp(24px,3vw,36px)}
.h2{font-family:var(--serif);font-weight:700;font-size:clamp(25px,2.8vw,36px);line-height:1.35;letter-spacing:.06em;text-wrap:balance;word-break:auto-phrase}
.cast__head{display:grid;grid-template-columns:auto 1fr;gap:10px 40px;align-items:end}
.cast__head p{color:var(--ink-soft);font-size:15px;line-height:1.9;justify-self:end;text-wrap:balance}
.witches{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:34px;padding:0;list-style:none;align-items:end;
  border-bottom:1px solid var(--line-n)}
.witch{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;width:100%;cursor:pointer;position:relative;
  padding-bottom:14px;-webkit-tap-highlight-color:transparent}
.witch:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:10px}
.witch__fig{position:relative;height:clamp(104px,13.5vw,190px);display:flex;align-items:flex-end;justify-content:center;width:100%}
.witch__fig::before{content:"";position:absolute;left:50%;bottom:-5px;width:62%;height:16px;translate:-50% 0;border-radius:50%;
  background:radial-gradient(closest-side,var(--wc),transparent);opacity:.0;transition:opacity .2s ease}
.witch__fig img{position:relative;height:100%;width:auto;max-width:none;transform-origin:50% 100%;filter:drop-shadow(0 6px 8px rgba(2,3,20,.5))}
.witch__name{display:flex;align-items:center;gap:7px;margin-top:10px;font-family:var(--serif);font-weight:700;font-size:15.5px;letter-spacing:.08em;line-height:1.2}
.witch__el{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--wc);color:#fff;
  font:700 12px/1 var(--sans);letter-spacing:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.witch::after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:3px;background:var(--gold);border-radius:3px 3px 0 0;
  scale:0 1;transition:scale .2s ease}
.witch[aria-pressed="true"]::after{scale:1 1}
.witch[aria-pressed="true"] .witch__fig::before{opacity:.75}
.witch:hover .witch__fig::before{opacity:.5}
.witch[aria-pressed="true"]:hover .witch__fig::before{opacity:.75}
.say{display:grid;grid-template-columns:auto 1fr;gap:4px 22px;align-items:baseline;margin-top:22px;min-height:5.2em}
.say__who{font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:.08em;white-space:nowrap}
.say__who small{font:500 13px/1 var(--sans);color:var(--ink-soft);margin-left:10px;letter-spacing:.06em}
.say__txt{color:var(--ink);font-size:15px;line-height:1.9;max-width:52em;text-wrap:pretty}
.say__role{grid-column:2;color:var(--ink-soft);font-size:13.5px;line-height:1.8}

/* ---------- どんなゲームか ---------- */
.dusk{background:linear-gradient(180deg,var(--night-2) 0%,#182260 70%,var(--dusk) 100%)}
.about{padding-block:clamp(40px,5vw,72px) clamp(56px,7vw,96px)}
.about__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"head shots" "txt shots";grid-template-rows:auto 1fr;column-gap:clamp(28px,5vw,72px);align-items:start}
.about__grid>.h2{grid-area:head}
.about__txt{grid-area:txt}
.about__txt>p{margin-top:18px;max-width:31em;text-wrap:pretty}
.facts{margin-top:28px;border-top:1px solid var(--line-n);font-size:14px;line-height:1.75}
.facts>div{display:grid;grid-template-columns:7.2em 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-n)}
.facts dt{color:var(--ink-soft)}
.shots{grid-area:shots;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,20px);padding-top:8px;align-items:start}
.shot{border-radius:18px;overflow:hidden;background:#0a0f33;box-shadow:0 0 0 1px rgba(200,210,255,.22),0 22px 44px rgba(2,4,26,.55);
  transition:translate .2s ease,box-shadow .2s ease}
.shot img{width:100%;height:auto}
.shot:nth-child(1){margin-top:44px}
.shot:nth-child(3){margin-top:84px}

/* ---------- 夜と朝の境目。Aonivaの弧を一度だけ大きく使う ---------- */
.horizon{position:relative;height:clamp(120px,15vw,210px);background:linear-gradient(180deg,var(--dusk) 0%,#6E86CF 38%,#C9D8F3 72%,var(--morning) 100%);overflow:hidden}
.horizon svg{position:absolute;left:0;bottom:-2px;width:100%;height:78%}

/* ---------- つくったもの ---------- */
.morning{background:var(--morning);color:var(--ink-d)}
.shelf{padding-block:clamp(20px,3vw,36px) clamp(48px,6vw,84px)}
.shelf__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.h2--sans{font-family:var(--sans);font-weight:700;font-size:clamp(22px,2.3vw,28px);letter-spacing:.1em}
.shelf__head p{color:var(--ink-d-soft);font-size:13.5px}
.rows{margin-top:20px;padding:0;list-style:none;border-top:1px solid var(--line-d)}
.row{display:grid;grid-template-columns:132px minmax(0,1fr) auto auto;gap:clamp(16px,2.6vw,36px);align-items:center;
  padding:20px 0;border-bottom:1px solid var(--line-d)}
.jacket{position:relative;display:block;width:132px;border-radius:8px;overflow:hidden;box-shadow:0 10px 22px rgba(18,26,62,.28),0 0 0 1px rgba(18,26,62,.12);
  transition:translate .2s ease,box-shadow .2s ease,rotate .2s ease}
.jacket img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.row__title{font-family:var(--serif);font-weight:700;font-size:clamp(18px,1.9vw,22px);letter-spacing:.05em;line-height:1.45}
.row__title a{text-decoration:none}
.row__title a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.row__sum{color:var(--ink-d-soft);font-size:14px;line-height:1.8;margin-top:4px;max-width:34em}
.row__meta{display:grid;gap:2px;font-size:13px;color:var(--ink-d-soft);line-height:1.6;text-align:right;white-space:nowrap}
.row__meta b{font-weight:700;color:var(--ink-d);letter-spacing:.06em}
.btn--navy{min-height:46px;padding:0 26px;font-size:14.5px;color:#fff;background:linear-gradient(180deg,#1A2F86,#0C1B5C);
  box-shadow:inset 0 0 0 1.5px rgba(246,207,114,.8),0 6px 14px rgba(18,26,62,.25)}
.btn--navy:hover{background:linear-gradient(180deg,#22399B,#10226C)}
.shelf__note{margin-top:18px;color:var(--ink-d-soft);font-size:13.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.chip{all:unset;box-sizing:border-box;cursor:pointer;min-height:38px;padding:0 16px;border-radius:999px;display:inline-flex;align-items:center;
  font:500 14px/1 var(--sans);letter-spacing:.06em;color:var(--ink-d);box-shadow:inset 0 0 0 1px var(--line-d);transition:background-color .15s ease,color .15s ease}
.chip:hover{background:rgba(18,26,62,.06)}
.chip[aria-pressed="true"]{background:var(--ink-d);color:#fff;box-shadow:none}
.chip:focus-visible{outline:2px solid #1A2F86;outline-offset:2px}
.tiles{display:grid;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));gap:clamp(18px,2.4vw,30px) clamp(12px,1.8vw,24px);margin-top:24px;padding:0;list-style:none}
.tiles--few{max-width:820px}
.tile__a{display:block;text-decoration:none;color:inherit}
.jk{position:relative;display:block;aspect-ratio:3/4;border-radius:10px;overflow:hidden;box-shadow:0 12px 26px rgba(18,26,62,.26),0 0 0 1px rgba(18,26,62,.12);
  transition:scale .22s ease,rotate .22s ease,box-shadow .22s ease}
.jk img{width:100%;height:100%;object-fit:cover}
.tile__t{display:block;margin-top:12px;font-family:var(--serif);font-weight:700;font-size:clamp(14.5px,1.35vw,17px);line-height:1.5;letter-spacing:.04em}
.tile__a:hover .tile__t{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.tile__m{display:flex;flex-wrap:wrap;gap:0 10px;margin-top:2px;font-size:12.5px;color:var(--ink-d-soft);letter-spacing:.04em}
.tile__m span{white-space:nowrap}
.tag{display:inline-flex;align-items:center;min-height:26px;padding:0 12px;margin-top:10px;border-radius:999px;font:700 12.5px/1 var(--sans);letter-spacing:.14em;
  color:var(--gold);box-shadow:inset 0 0 0 1px rgba(246,207,114,.7);background:rgba(13,22,74,.6)}
.horizon--deep{height:clamp(170px,20vw,280px);background:linear-gradient(180deg,var(--night) 0%,#141D58 24%,var(--dusk) 46%,#6E86CF 66%,#C9D8F3 86%,var(--morning) 100%)}
.horizon--deep svg{height:56%}

/* ---------- 一番下 ---------- */
.foot{flex:1;border-top:1px solid var(--line-d);padding-block:30px 40px}
.foot__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:start}
.foot__brand{display:flex;align-items:center;gap:12px}
.foot__disc{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#0A2466,#020B2B);flex:none}
.foot__disc img{width:26px;height:auto}
.foot__name{height:12px;width:auto;filter:brightness(0);opacity:.82}
.foot p{color:var(--ink-d-soft);font-size:13.5px;line-height:1.85;margin-top:12px;max-width:38em;text-wrap:pretty}
.foot__nav{display:flex;gap:22px;font-size:13.5px;padding:0;margin:8px 0 0;list-style:none}
.foot__nav a{text-underline-offset:5px;text-decoration-color:rgba(18,26,62,.35)}
.foot__copy{grid-column:1/-1;font-size:12.5px;color:var(--ink-d-soft);letter-spacing:.04em}

.curtain{position:fixed;inset:0;z-index:55;display:grid;place-items:center;pointer-events:none;visibility:hidden;
  background:radial-gradient(circle at 50% 50%,#1D2C8A,#070B24 70%);clip-path:circle(0 at var(--cx,50%) var(--cy,50%))}
.curtain img{width:128px;height:auto;filter:drop-shadow(0 0 26px rgba(150,190,255,.9))}

/* ================= 演出の強さ ================= */
/* A 静か: 動くのは、押したときの色と位置だけ */
:root[data-fx="a"] .hero__motes,:root[data-fx="a"] .hero__glow{display:none}

/* B 中間 と C 豪華 に共通 */
@media (prefers-reduced-motion:no-preference){
  :root[data-fx="c"] .hero__glow{animation:glow 5.5s ease-in-out infinite}
  :root[data-fx="c"] .ch img{animation:float 7s ease-in-out infinite}
  :root[data-fx="c"] .ch--l img{animation-delay:-2.2s}
  :root[data-fx="c"] .ch--r img{animation-delay:-4.1s}
  :root[data-fx="c"] .btn--play .btn__shine{animation:sweep 6.5s ease-in-out 2.4s infinite}

  /* 開いたときの一連の動き */
  :root[data-fx="c"] .hero.in .hero__bg{animation:bgin 1.5s cubic-bezier(.2,.7,.2,1) both}
  :root[data-fx="c"] .hero.in .ch{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
  :root[data-fx="c"] .hero.in .ch--l{animation-delay:.25s}
  :root[data-fx="c"] .hero.in .ch--r{animation-delay:.38s}
  :root[data-fx="c"] .hero.in .ch--c{animation-delay:.52s}
  :root[data-fx="c"] .hero.in .logo img{animation:logoin .8s cubic-bezier(.2,.9,.25,1.15) .75s both}
  :root[data-fx="c"] .hero.in .logo__shine{animation:sweep1 1.1s ease-out 1.45s both}
  :root[data-fx="c"] .hero.in :is(.lead,.acts,.notes){animation:fadeup .6s ease-out both}
  :root[data-fx="c"] .hero.in .lead{animation-delay:1.15s}
  :root[data-fx="c"] .hero.in .acts{animation-delay:1.3s}
  :root[data-fx="c"] .hero.in .notes{animation-delay:1.45s}

  /* さわったときの返事 */
  :root[data-fx="c"] .witch.hop .witch__fig img{animation:hop .55s cubic-bezier(.3,.7,.3,1)}
  :root[data-fx="c"] .shot:hover{box-shadow:0 0 0 1.5px rgba(246,207,114,.75),0 22px 44px rgba(2,4,26,.55)}
  :root[data-fx="c"] .row:hover .jacket{rotate:-2deg;box-shadow:0 16px 30px rgba(18,26,62,.34),0 0 0 1px rgba(18,26,62,.12)}

  /* C 豪華 だけ */
  :root[data-fx="c"] .hero__bgwrap{translate:calc(var(--px,0)*-10px) calc(var(--sy,0)*.22px + var(--py,0)*-6px);scale:1.04}
  :root[data-fx="c"] .hero__cast{translate:calc(var(--px,0)*16px) calc(var(--sy,0)*.06px + var(--py,0)*8px)}
  :root[data-fx="c"] .copy{translate:calc(var(--px,0)*-6px) calc(var(--sy,0)*-.05px)}
  :root[data-fx="c"] .ch--c{translate:calc(var(--px,0)*10px) 0}
  :root[data-fx="c"] .logo img{animation-name:logoin-c}
  :root.ready[data-fx="c"] .rv{opacity:0;translate:0 26px}
  :root.ready[data-fx="c"] .rv.on{opacity:1;translate:0 0;transition:opacity .7s ease,translate .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*90ms)}
  :root.ready[data-fx="c"] .witches .rv{translate:-34px 0}
  :root.ready[data-fx="c"] .witches .rv.on{translate:0 0}
  :root.ready[data-fx="c"] .shots .rv{translate:56px 0}
  :root.ready[data-fx="c"] .shots .rv.on{translate:0 0}
  :root.ready[data-fx="c"] .arc{stroke-dasharray:1;stroke-dashoffset:1}
  :root.ready[data-fx="c"] .horizon.on .arc{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.3,.7,.2,1)}
  :root[data-fx="c"] .jacket::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%) no-repeat;background-size:260% 100%;background-position:130% 0;transition:background-position .7s ease}
  :root[data-fx="c"] .row:hover .jacket::after{background-position:-40% 0}
  :root[data-fx="c"] .row:hover .jacket{rotate:-3deg;scale:1.04}
  :root[data-fx="c"] .jk::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%) no-repeat;background-size:260% 100%;background-position:130% 0;transition:background-position .7s ease}
  :root[data-fx="c"] .tile:hover .jk::after{background-position:-40% 0}
  :root[data-fx="c"] .tile:hover .jk{scale:1.035;rotate:-1.5deg}
  :root.ready[data-fx="c"] .tiles .rv{translate:-30px 0}
  :root.ready[data-fx="c"] .tiles .rv.on{translate:0 0}
  :root[data-fx="c"] .curtain.go{visibility:visible;animation:curtain .62s cubic-bezier(.6,0,.3,1) both}
  :root[data-fx="c"] .curtain.go img{animation:spin .62s ease-out both}
}
@keyframes glow{0%,100%{opacity:.35;scale:1}50%{opacity:.8;scale:1.25}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes sweep{0%,72%{opacity:0;background-position:130% 0}74%{opacity:1}100%{opacity:1;background-position:-40% 0}}
@keyframes sweep1{0%{opacity:1;background-position:130% 0}99%{opacity:1}100%{opacity:0;background-position:-40% 0}}
@keyframes bgin{from{opacity:.25;scale:1.07}to{opacity:1;scale:1}}
@keyframes rise{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
@keyframes logoin{from{opacity:0;scale:.9;translate:0 10px}to{opacity:1;scale:1;translate:0 0}}
@keyframes logoin-c{0%{opacity:0;scale:.72;translate:0 18px;filter:drop-shadow(0 0 0 rgba(255,220,140,0)) brightness(1.8)}60%{opacity:1;filter:drop-shadow(0 0 34px rgba(255,220,140,.9)) brightness(1.25)}100%{opacity:1;scale:1;translate:0 0;filter:drop-shadow(0 10px 26px rgba(10,4,40,.75)) brightness(1)}}
@keyframes fadeup{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes hop{0%{translate:0 0;scale:1 1}18%{scale:1.08 .9}45%{translate:0 -18px;scale:.96 1.05}72%{translate:0 0;scale:1.05 .94}100%{translate:0 0;scale:1 1}}
@keyframes curtain{from{clip-path:circle(0 at var(--cx) var(--cy))}to{clip-path:circle(150vmax at var(--cx) var(--cy))}}
@keyframes spin{from{opacity:0;scale:.4;rotate:-40deg}to{opacity:1;scale:1;rotate:0deg}}

/* ================= たて長の画面(スマホ、たて持ちのタブレット) ================= */
@media (max-width:1000px){
  :root{--hero-h:clamp(580px,168vw,780px)}
  .hero__bg{left:50%;top:0;translate:-50% 0;width:max(100%,calc(var(--hero-h)*var(--rt,.667)));height:auto;aspect-ratio:var(--rt,.667)}
  .hero__glow{left:var(--gxt,50%);top:var(--gyt,46%);width:26%}
  .hero__shade{background:linear-gradient(180deg,rgba(6,9,34,.55) 0%,rgba(6,9,34,0) 16%,rgba(6,9,34,0) 60%,rgba(7,11,36,.9) 88%,var(--night) 100%)}
  .hero__cast{left:50%;right:auto;translate:-50% 0;width:min(100%,560px);height:68%}
  .ch--c{left:50%;translate:-50% 0;height:100%;bottom:-16%}
  .ch--l{left:-17%;height:90%;bottom:-6%}
  .ch--r{right:-19%;left:auto;height:90%;bottom:-6%}
  .hero__foot{height:34%}
  .hero__copy{align-items:stretch}
  .hero__copy>.wrap{display:flex}
  .copy{width:100%;padding-top:58px;padding-bottom:22px;display:flex;flex-direction:column;align-items:center;text-align:center}
  .logo{width:min(90%,440px);margin-left:0}
  .lead{margin-top:auto;font-size:clamp(15.5px,2.4vw,19px);letter-spacing:.03em}
  .acts{margin-top:12px;flex-wrap:nowrap;width:min(100%,460px);gap:10px}
  .acts .btn{min-height:52px;white-space:nowrap}
  .btn--play{flex:1}
  .btn--more{flex:0 0 auto;padding:0 20px;font-size:15px}
  .notes{display:none}
  .about__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "shots" "txt";grid-template-rows:auto}
  .shots{margin-top:14px;padding-bottom:22px}
  .shot:nth-child(n){margin-top:0}
  .about__txt>p:first-child{margin-top:4px}
  .about__txt>p{max-width:none}
  .tiles{--cols:3!important}
}
@media (prefers-reduced-motion:no-preference) and (max-width:1000px){
  :root[data-fx="c"] .hero__cast{translate:calc(-50% + var(--px,0)*16px) calc(var(--sy,0)*.06px)}
  :root[data-fx="c"] .ch--c{translate:calc(-50% + var(--px,0)*10px) 0}
}
/* ================= スマホ ================= */
@media (max-width:599px){
  body{font-size:15px}
  .top__in{height:56px}
  .brand__mark{width:26px}
  .brand__name{height:10px}
  .nav{font-size:13px}
  .nav a+a{display:none}
  .cast__head{grid-template-columns:1fr}
  .cast__head p{justify-self:start;font-size:14.5px}
  .witches{display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin-top:22px;border-bottom:0}
  .witches li{width:25%}
  .witch{padding-bottom:12px}
  .witch__fig{height:25vw;max-height:124px}
  .witch__name{font-size:14px;gap:5px;margin-top:8px}
  .witch__el{width:19px;height:19px;font-size:11px}
  .witch::after{left:22%;right:22%;bottom:2px}
  .say{grid-template-columns:1fr;gap:6px;margin-top:10px;padding-top:16px;border-top:1px solid var(--line-n);min-height:10.5em}
  .say__role{grid-column:1}
  .shots{display:flex;align-items:flex-start;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter)*-1);padding:6px var(--gutter) 22px;scrollbar-width:none}
  .shots::-webkit-scrollbar{display:none}
  .shot{flex:0 0 56%;scroll-snap-align:center}
  .shot img{aspect-ratio:1/2;object-fit:contain;object-position:top}
  .row{grid-template-columns:92px minmax(0,1fr);gap:14px 16px;align-items:start}
  .jacket{width:92px;grid-row:1/span 2}
  .row__meta{text-align:left;display:flex;gap:12px;grid-column:2}
  .row .btn--navy{grid-column:1/-1;width:100%}
  .foot__in{grid-template-columns:1fr}
  .tiles{--cols:2!important}
  .tiles.tiles--few{--cols:3!important;gap:16px 10px}
  .tag{margin-top:auto}
  .tag:not([hidden])+.lead{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){.hero__motes{display:none}}

/* ---------- 画面の写真を押すと、大きく見られる ---------- */
.shot__btn{all:unset;box-sizing:border-box;display:block;width:100%;cursor:zoom-in}
.shot__btn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:18px}
.zoom{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:transparent;color:var(--ink);overflow:hidden}
.zoom[open]{display:grid;place-items:center}
.zoom::backdrop{background:rgba(4,6,26,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.zoom__fig{display:grid;justify-items:center;gap:12px;max-width:min(92vw,560px)}
.zoom__fig img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 120px);border-radius:16px;box-shadow:0 0 0 1px rgba(200,210,255,.25),0 30px 70px rgba(0,0,0,.6)}
.zoom__fig figcaption{font-size:13.5px;line-height:1.7;color:var(--ink-soft);text-align:center;text-wrap:balance;max-width:30em}
.zoom__x,.zoom__nav{all:unset;box-sizing:border-box;position:fixed;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;cursor:pointer;
  background:rgba(13,22,74,.78);box-shadow:inset 0 0 0 1.5px rgba(246,207,114,.7);transition:background-color .15s ease}
.zoom__x:hover,.zoom__nav:hover{background:rgba(30,44,120,.95)}
.zoom__x:focus-visible,.zoom__nav:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.zoom__x{top:calc(14px + env(safe-area-inset-top,0px));right:16px}
.zoom__x::before,.zoom__x::after{content:"";position:absolute;width:20px;height:2px;border-radius:2px;background:var(--ink);rotate:45deg}
.zoom__x::after{rotate:-45deg}
.zoom__nav{top:50%;translate:0 -50%}
.zoom__nav--prev{left:max(12px,calc(50vw - 380px))}
.zoom__nav--next{right:max(12px,calc(50vw - 380px))}
.zoom__nav::before{content:"";width:11px;height:11px;border:solid var(--ink);border-width:2px 2px 0 0;rotate:45deg;translate:-2px 0}
.zoom__nav--prev::before{rotate:-135deg;translate:2px 0}
@media (prefers-reduced-motion:no-preference){
  :root[data-fx="c"] .zoom[open] .zoom__fig{animation:zoomin .22s cubic-bezier(.2,.8,.2,1)}
  :root[data-fx="c"] .zoom__fig.swap img{animation:zoomswap .2s ease}
}
@keyframes zoomin{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
@keyframes zoomswap{from{opacity:.2}to{opacity:1}}
@media (max-width:599px){
  .zoom__nav{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));translate:none}
  .zoom__nav--prev{left:calc(50vw - 64px)}
  .zoom__nav--next{right:calc(50vw - 64px)}
  .zoom__fig img{max-height:calc(100dvh - 190px)}
}

/* 横から出てくる動きの途中で、ページが横にはみ出さないようにする */
.cast,.about,.shelf{overflow-x:clip}

/* ---------- アイコンだけの作品のジャケット ---------- */
.jk--icon{display:grid;place-items:center;background:linear-gradient(160deg,color-mix(in srgb,var(--c,#3A56B8) 80%,#fff),color-mix(in srgb,var(--c,#3A56B8) 76%,#000))}
.jk--icon img{width:48%;height:auto;aspect-ratio:1;border-radius:24%;box-shadow:0 8px 18px rgba(18,26,62,.3)}
.more{margin-top:26px}

/* ---------- 絵が1枚だけの作品の、いちばん上 ---------- */
.hero--plain .hero__bgwrap{background:radial-gradient(110% 90% at 72% 24%,#1D2A7A 0%,#0C1238 55%,var(--night) 100%)}
.hero__jacket{position:absolute;z-index:3;right:max(var(--gutter),calc((100% - var(--wide))/2));top:52%;translate:0 -50%;width:min(28%,290px);rotate:3deg}
.hero__jacket .jk{box-shadow:0 30px 60px rgba(2,4,26,.6),0 0 0 1px rgba(200,210,255,.25)}
.title{font-family:var(--serif);font-weight:700;font-size:clamp(30px,4.6vw,58px);line-height:1.3;letter-spacing:.05em;text-wrap:balance;word-break:auto-phrase;text-shadow:0 2px 18px rgba(4,6,30,.9)}
.about__play{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:28px}
.about__play small{color:var(--ink-soft);font-size:13px}
.about--solo .about__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "txt"}
.about--solo .about__txt>p{max-width:38em}

/* ---------- 絵のないページ(一覧、このサイトについて、見つからないとき) ---------- */
.pagehead{background:linear-gradient(180deg,var(--night) 0%,#141D58 100%);padding-block:calc(68px + clamp(26px,5vw,56px)) clamp(22px,3.4vw,40px)}
.pagehead h1{font-family:var(--serif);font-weight:700;font-size:clamp(25px,3.6vw,44px);line-height:1.4;letter-spacing:.06em;text-wrap:balance;word-break:auto-phrase}
.pagehead p{color:var(--ink-soft);margin-top:10px;max-width:36em}
.pagehead__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end}
.pagehead__fig{width:clamp(96px,14vw,170px);height:auto;margin-bottom:-6px;filter:drop-shadow(0 8px 12px rgba(2,3,20,.5))}
.horizon--page{height:clamp(110px,13vw,180px);background:linear-gradient(180deg,#141D58 0%,var(--dusk) 28%,#6E86CF 56%,#C9D8F3 82%,var(--morning) 100%)}
.prose{padding-block:clamp(12px,2.4vw,28px) clamp(48px,6vw,84px)}
.prose__in{max-width:41em}
.prose h2{font:700 clamp(18.5px,1.9vw,22px)/1.5 var(--sans);letter-spacing:.08em;margin-top:2.4em}
.prose h2:first-child{margin-top:0}
.prose p{margin-top:.8em;text-wrap:pretty}
.prose dl{margin-top:1em;border-top:1px solid var(--line-d)}
.prose dl>div{display:grid;grid-template-columns:8.5em 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-d)}
.prose dt{color:var(--ink-d-soft)}
.prose .btn{margin-top:1.6em}

/* ---------- 一番下の「動きを少なくする」 ---------- */
.calm{all:unset;box-sizing:border-box;cursor:pointer;font-size:13.5px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(18,26,62,.35)}
.calm:focus-visible{outline:2px solid #1A2F86;outline-offset:3px;border-radius:4px}
.foot__nav{flex-wrap:wrap;gap:8px 22px}

/* ---------- ページをまたぐときは、ふわっと切り替える ---------- */
@view-transition{navigation:auto}

@media (max-width:1000px){
  .hero__jacket{right:auto;left:50%;top:74px;translate:-50% 0;width:min(44%,230px)}
  .hero--plain .title{margin-top:auto;font-size:clamp(26px,6.4vw,40px)}
  .hero--plain .tag{margin-top:10px}
  .hero--plain .lead{margin-top:8px}
}
@media (max-width:599px){
  .pagehead{padding-top:calc(56px + 26px)}
  .pagehead__in{grid-template-columns:minmax(0,1fr) auto;gap:12px}
  .prose dl>div{grid-template-columns:6.5em 1fr}
}