/* 学園祭回顧録 — 「白いキャンバス」 */
:root{
  --canvas:#ffffff;
  --ink:#2b2c2e;
  --ink-soft:#6a6d72;
  --edge:#e4e4e2;
  /* 時代の色：中学は淡藍、高校は若葉と夕焼、大学は銀杏と紺 */
  --ai:#9dbad8;  --ai-deep:#41709f;
  --wakaba:#a9c98f; --yuyake:#eeb07c; --ko-deep:#3f7a4c;
  --icho:#e9c24c; --kon:#34477a;
  --era:#b9bcc0; --era-deep:#55585c; --era-2:#d9dadc;
  --mincho:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
}
.era-chu{--era:var(--ai);--era-2:#cddcec;--era-deep:var(--ai-deep)}
.era-ko{--era:var(--wakaba);--era-2:var(--yuyake);--era-deep:var(--ko-deep)}
.era-dai{--era:var(--icho);--era-2:#8d9cc4;--era-deep:var(--kon)}
.era-dai2{--era:#c9cfdf;--era-2:#e9ecf3;--era-deep:var(--kon)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--mincho);
  font-size:17.5px;line-height:2.05;font-feature-settings:"palt" 0;}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.25em}
a:hover{color:var(--era-deep)}
:focus-visible{outline:2px solid var(--kon);outline-offset:3px;border-radius:2px}

/* ---- 親サイトに合わせた細いバー ---- */
.sitebar{font-family:var(--gothic);font-size:13px;line-height:1.5;color:var(--ink-soft);
  display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;align-items:center;
  padding:14px max(16px,calc((100% - 1100px)/2));border-bottom:1px solid var(--edge)}
.sitebar-home{font-weight:500;color:var(--ink);text-decoration:none}
.crumbs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem}
.crumbs li+li::before{content:"＞";margin-right:.25rem;color:#b5b7ba}
.crumbs a{text-decoration:none}

/* ---- トップ：キャンバス ---- */
.hero{max-width:1100px;margin:40px auto 0;padding:0 16px}
.canvas{position:relative;height:min(560px,72vh);min-height:420px;border:1px solid var(--edge);overflow:hidden;background:#fff}
.paint{position:absolute;inset:0;width:100%;height:100%}
.paint .b{mix-blend-mode:multiply;opacity:.55;transform-box:fill-box;transform-origin:center}
.b1{fill:var(--ai)} .b2{fill:var(--wakaba)} .b3{fill:var(--yuyake)} .b4{fill:var(--icho)} .b5{fill:var(--kon);opacity:.3!important}
@media (prefers-reduced-motion:no-preference){
  .paint .b{animation:bloom 1.6s cubic-bezier(.2,.7,.2,1) both}
  .b1{animation-delay:.2s!important}.b2{animation-delay:.75s!important}.b3{animation-delay:1.2s!important}
  .b4{animation-delay:1.7s!important}.b5{animation-delay:2.2s!important}
  @keyframes bloom{from{opacity:0;transform:scale(.6)}}
  .b5{animation-name:bloom5}
  @keyframes bloom5{from{opacity:0;transform:scale(.6)}to{opacity:.3}}
}
.hero-text{position:absolute;top:44px;right:56px;bottom:44px;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:28px}
.hero-text h1,.question{writing-mode:vertical-rl}
.hero-text h1{margin:0;font-weight:800;font-size:clamp(38px,min(5.6vw,10vh),66px);line-height:1.1;letter-spacing:.14em;white-space:nowrap}
.question{margin:0;padding-top:3.2em;font-size:clamp(14px,1.4vw,16px);line-height:1.9;letter-spacing:.12em;color:#3d3f42}
.hero-sub{font-family:var(--gothic);font-size:16.5px;line-height:1.9;color:var(--ink-soft);margin:14px 0 0}

/* ---- はじめに抜粋 ---- */
/* 目次と同じ2列の格子に乗せ、本文の左端を章タイトルに揃える */
.intro{max-width:900px;margin:88px auto 0;padding:0 16px;display:grid;grid-template-columns:150px 1fr;gap:.6rem 32px}
.intro h2{font-size:26px;font-weight:600;line-height:1.5;letter-spacing:.06em;margin:0;grid-column:2}
.intro-body{grid-column:2}
.intro p{margin:0 0 1em}
.intro .nobr{display:inline-block}
.more{font-family:var(--gothic);font-size:14px}

/* ---- 目次：部ごとに色が濃くなる ---- */
.parts{max-width:900px;margin:80px auto 0;padding:0 16px;display:grid;gap:72px}
.part{display:grid;grid-template-columns:150px 1fr;gap:32px;align-items:start}
.swatch{aspect-ratio:1;width:130px;border-radius:58% 42% 55% 45%/48% 60% 40% 52%;
  background:radial-gradient(60% 55% at 38% 40%,var(--era) 0 55%,transparent 72%),
             radial-gradient(55% 50% at 66% 66%,var(--era-2) 0 50%,transparent 74%);
  filter:blur(1.5px) saturate(1.05);opacity:.9}
.era-chu .swatch{opacity:.6}
.era-ko .swatch{opacity:.8}
.era-dai2 .swatch{background:none;border:1.5px dashed #b7bfd3;filter:none;opacity:1}
.part h2{margin:0;font-size:26px;font-weight:600;line-height:1.5;letter-spacing:.06em}
.place{margin:0 0 1.25rem;font-family:var(--gothic);font-size:13px;color:var(--ink-soft)}
.toc{list-style:none;margin:0;padding:0}
.toc a{display:grid;grid-template-columns:3.2em 1fr auto;gap:1rem;align-items:baseline;
  padding:.7rem 0;text-decoration:none;border-top:1px solid var(--edge)}
.toc li:last-child a{border-bottom:1px solid var(--edge)}
.toc .no{font-family:var(--gothic);font-size:12px;color:var(--era-deep);font-variant-numeric:tabular-nums}
.toc .t{font-size:19px;line-height:1.6}
.toc .t small{display:block;font-family:var(--gothic);font-size:12px;color:var(--ink-soft);line-height:1.4}
.toc .y{font-family:var(--gothic);font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
.toc a:hover .t{color:var(--era-deep)}
.pending .t,.pending .y{color:#9aa2b5}
.extras{max-width:900px;margin:72px auto 0;padding:0 16px;font-family:var(--gothic);font-size:13px;color:var(--ink-soft)}

/* ---- 章ページ ---- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:5}
.progress i{display:block;height:100%;width:0;background:var(--era)}
.chap{max-width:36em;margin:0 auto;padding:0 16px}
.chap-head{position:relative;padding:96px 0 40px;margin-bottom:24px}
.wash{position:absolute;z-index:-1;top:42px;left:-90px;width:min(460px,90vw);height:250px;
  border-radius:62% 38% 46% 54%/55% 45% 55% 45%;
  background:radial-gradient(55% 60% at 40% 45%,var(--era) 0 50%,transparent 74%),
             radial-gradient(45% 50% at 72% 62%,var(--era-2) 0 45%,transparent 72%);
  opacity:.5;filter:blur(2px)}
.kicker{margin:0 0 .4rem;font-family:var(--gothic);font-size:13px;letter-spacing:.04em;color:var(--era-deep)}
.chap h1{margin:0;font-size:clamp(32px,5.4vw,46px);font-weight:800;line-height:1.35;letter-spacing:.06em}
.meta{margin:1.6rem 0 0;font-family:var(--gothic);font-size:13px;line-height:1.7;display:grid;gap:.15rem}
.meta div{display:grid;grid-template-columns:3em 1fr}
.meta dt{color:var(--ink-soft)} .meta dd{margin:0}

.prose p{margin:0;text-indent:1em;text-align:justify}
.prose p+p{margin-top:2em;margin-top:1lh}
.prose .pause{height:3.2em;position:relative}
.prose .pause::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:9px;transform:translate(-50%,-50%) rotate(-4deg);
  border-radius:50%;background:var(--era);opacity:.55;filter:blur(1px)}
.blank p{color:var(--ink-soft)}

.term{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline dotted var(--era-deep);text-decoration-thickness:1.5px;text-underline-offset:.3em}
.term[aria-expanded="true"]{background:linear-gradient(transparent 55%,color-mix(in srgb,var(--era) 45%,transparent) 55%)}
.term-wrap{position:relative}
.term-note{position:absolute;z-index:3;left:0;top:calc(100% + 6px);width:min(22em,78vw);box-shadow:0 6px 18px rgba(40,44,52,.12);padding:.6em .9em;text-indent:0;font-family:var(--gothic);font-size:13.5px;line-height:1.75;
  background:color-mix(in srgb,var(--era) 14%,#fff);border-left:3px solid var(--era);text-align:left}
.term-note[hidden]{display:none}

.note,.record{margin:3em 0 0;padding:1.4em 1.5em;font-size:15.5px;line-height:1.9;border:1px solid var(--edge)}
.note h2,.record h2{margin:0 0 .6em;font-family:var(--gothic);font-size:13px;font-weight:500;color:var(--era-deep)}
.note dl{margin:0} .note dt{font-weight:600} .note dd{margin:0 0 .8em}
.record p{margin:0 0 .8em} .record p:last-child{margin:0;font-family:var(--gothic);font-size:12.5px;color:var(--ink-soft)}

.pager{max-width:36em;margin:72px auto 0;padding:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pn{display:block;padding:1rem 0;border-top:2px solid var(--era);text-decoration:none;font-size:16px;line-height:1.6}
.pn span{display:block;font-family:var(--gothic);font-size:12px;color:var(--ink-soft)}
.pn.next{text-align:right}

.foot{max-width:1100px;margin:96px auto 0;padding:28px 16px 48px;border-top:1px solid var(--edge);
  font-family:var(--gothic);font-size:13px;color:var(--ink-soft)}
.foot a{margin-right:1.5em}

@media (max-width:640px){
  body{font-size:16.5px;line-height:2}
  .hero{margin-top:20px}
  .hero-text{top:28px;right:24px;bottom:28px;gap:18px}
  .question{padding-top:2.4em}
  .hero-sub{font-size:15px}
  .part,.intro{grid-template-columns:1fr;gap:12px}
  .intro h2,.intro-body{grid-column:1}
  .swatch{width:72px}
  .toc a{grid-template-columns:2.6em 1fr}
  .toc .y{grid-column:2}
  .chap-head{padding-top:64px}
  .wash{left:-40px;top:24px;height:200px}
  .pager{grid-template-columns:1fr}
  .pn.next{text-align:left}
}