@charset "utf-8";
/* =========================================================
   紙屋ノ見本 — Special Site
   Design: Arika
   ========================================================= */

:root{
  /* 表紙の刷り色（実物からサンプリング）。JSで切替 */
  --accent:#8aee00;           /* 箔そのものの色（面で使う） */
  --accent-band:#8aee00;      /* 帯・段々の地。実物の刷り色そのまま */
  --accent-text:#5a5d5e;      /* 白地の上の文字アクセント。紙の色に依らない濃いシルバー */
  --accent-ink:#000;          /* accent の上に乗る文字色 */
  --shadow:#6f6f6c;           /* 段々の縁取りのグレー */

  /* 読ませる箇所は白地。TOPだけ黒地（.hero で上書き） */
  --bg:#e0dfd7;               /* 完全な白にしない。白い紙の段々を見せるための下地 */
  --bg2:#d4d2c8;
  --fg:#121210;
  --dim:#61615b;
  --line:#c7c5bd;
  --ink-dark:#070707;

  --jp:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif;
  --la:"Archivo","Zen Kaku Gothic New","Helvetica Neue",Arial,sans-serif;

  --pad:clamp(20px,5vw,72px);
  --name-fs:clamp(24px,3.7vw,48px);   /* 各紙の紙名。ローマ字の寄せの計算にも使う */
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--jp);font-weight:400;line-height:1.9;
  font-feature-settings:"palt" 1;
  letter-spacing:.02em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .6s var(--ease);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}

/* 縦組み */
.vt{writing-mode:vertical-rl;text-orientation:upright;font-feature-settings:"palt" 0}

/* ---------- 進行バー ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:90;background:transparent;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:var(--accent);transition:width .1s linear,background .6s var(--ease)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;min-height:100svh;overflow:hidden;
  padding:clamp(20px,3vw,44px) var(--pad);
  /* TOPは黒地。配色をこのブロック内だけ反転させる */
  background:var(--ink-dark);
  --fg:#f2f2ef;--dim:#8d8d87;--accent-text:var(--accent);
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* --- 流れる帯。ロゴの右から画面右端まで抜ける --- */
:root{--logo-w:clamp(72px,9.2vw,152px);--logo-gap:clamp(20px,3vw,56px);--logo-h:min(78vh,780px);
  /* mask の外部SVG参照は file:// で弾かれるため、データURIで埋め込む */
  --logo-src:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+ODrOOCpOODpOODvF8yIiBkYXRhLW5hbWU9IuODrOOCpOODpOODvCAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4NS4wNiA0NzMuMzQiPgogIDxnIGlkPSJf44Os44Kk44Ok44O8XzEtMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMSI+CiAgICA8Zz4KICAgICAgPGc+CiAgICAgICAgPGc+CiAgICAgICAgICA8cGF0aCBkPSJNMTYuOTUsMzk0LjE1YzAsMS40Ni0uMzYsMi4yOC0xLjA3LDIuMjgtLjIyLDAtLjQ1LS4wNy0uNjItLjE1LS4wMi0uMi0uMDctLjUyLS4xMy0uNjkuMTguMTQuNDUuMjYuNjUuMjYuNCwwLC42Mi0uNjQuNjItMS41OSwwLS40Ny0uMTEtLjYxLS4yOS0uNjEtLjA2LDAtLjI1LjAzLS40Ny4wNi0uMzYsMS4wNi0uODQsMi4yMS0xLjIzLDIuNzVsLS41Ni0uMzNjLjQyLS41Ni44Ni0xLjQ4LDEuMTctMi4zMi0uNDMuMDctLjg0LjE0LS45OC4xNWwtLjExLS42MWMuMjkuMDEuNzktLjA0LDEuMjgtLjEuMDgtLjI2LjE0LS41MS4xOC0uNzEuMDUtLjIzLjA2LS4zOS4wNi0uNDdsLjY2LjE0Yy0uMDQuMS0uMDcuMTctLjEuMjQtLjA1LjIyLS4xMy40OC0uMjEuNzUuMi0uMDIuMzctLjAzLjUtLjAzLjMyLDAsLjY2LjMuNjYuOTlaTTE4LjY1LDM5NC45NGwtLjU4LjI3Yy0uMTMtLjkyLS41LTEuNjUtLjkzLTIuMDNsLjUyLS4yNGMuNTQuNS45MSwxLjM2Ljk5LDJaIi8+CiAgICAgICAgICA8cGF0aCBkPSJNMTguNTksNDA0Ljg0bC0uMy41OWMtLjA4LS4wNy0uMTYtLjEzLS4yMi0uMTgtLjEyLS4wOC0uMjQtLjE2LS4zNy0uMjMtLjI0LjYyLS42NiwxLjE5LTEuMzYsMS41LS4xNi0uMTItLjMtLjIyLS41Mi0uMzQuNzctLjM0LDEuMTctLjg1LDEuMzgtMS40Mi0uMzgtLjE3LS43OS0uMjktMS4xOS0uMzMtLjEuMTktLjE5LjM3LS4yNy41Mi0uMzguNzEtLjY5LDEuMTUtMS4xNiwxLjE1LS4zMywwLS42My0uMjUtLjYzLS43NiwwLS43NC42NC0xLjMzLDEuNy0xLjQzLjE3LS4zNC4zNC0uNzQuNS0xLjEzLS4zNi4wNS0uODEuMTEtMS4xMi4xNC0uMDgsMC0uMTkuMDItLjI4LjAzbC0uMS0uNTljLjA3LDAsLjE4LjAxLjMxLjAxLjM1LDAsMS4wOS0uMDgsMS4zMi0uMTIuMDQtLjAxLjA5LS4wMy4xMi0uMDVsLjU3LjMyYy0uMS4xMy0uMTUuMjMtLjE5LjI5LS4xNS4zMi0uMzQuNzItLjUyLDEuMTEuMzQuMDQuNzIuMTMsMS4xLjI4LjAzLS4xOC4wNS0uMzUuMDctLjUzLDAtLjEuMDEtLjE4LDAtLjI3bC42LjE5cy0uMDQuMTUtLjA1LjIxYy0uMDIuMjEtLjA1LjQyLS4xLjYzLjE3LjA5LjM0LjE4LjUuMjguMDUuMDMuMTUuMDkuMjMuMTJaTTE1LjMzLDQwNC41MWwuMDMtLjA1Yy0uNjYuMTEtLjkxLjQ3LS45MS43OSwwLC4xOS4wNy4yNi4xNi4yNi4xMywwLC4zOC0uMzguNzMtMVoiLz4KICAgICAgICAgIDxwYXRoIGQ9Ik0xOC41Nyw0MTMuODNjMCwuNzYtLjU3LDEuMTktMS4yNiwxLjE5LS4zNywwLS43Mi0uMTQtLjg4LS4yNC0uMDMtLjE0LS4wNy0uNDktLjEyLS42NS4yLjE0LjU3LjI4LjkxLjI4LjM4LDAsLjc0LS4xOS43NC0uNiwwLS4zNS0uMzItLjQ5LS42Ni0uNDktLjM4LDAtMS4wMS4yMS0xLjY3LjQ4LjI3LjgzLjYxLDEuNzkuOSwyLjQ2bC0uNTkuMjJjLS4yOS0uOC0uNTgtMS42OC0uODMtMi40Ni0uMzMuMTQtLjYzLjI5LS45LjQyLS4wNS4wMy0uMTQuMDctLjE5LjFsLS4yMS0uNjdjLjEtLjAyLjItLjA0LjMzLS4wOS4yNS0uMS41MS0uMjEuOC0uMzJsLS4yNS0uNzdjLS4wNi0uMi0uMS0uMzItLjE1LS40N2wuNjUtLjFjMCwuMDkuMDIuMTkuMDYuMzcuMDUuMjEuMTMuNDcuMjIuNzYuMzUtLjEzLjcxLS4yNiwxLjAzLS4zNC0uMTctLjI2LS40My0uNjItLjYxLS44M2wuNTEtLjE5Yy4xOC4yLjQ4LjYuNjYuOS4xLS4wMi4xOC0uMDIuMjUtLjAyLjc3LDAsMS4yNi40MSwxLjI2LDEuMDdaIi8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIGQ9Ik0xOC40OCw0MzIuNGMwLDEuMjctLjkyLDEuOTktMS45OCwyLjIzLS4xMi0uMTMtLjI2LS4yOS0uNS0uNDksMS4zMS0uMTgsMS44Ny0uOTQsMS44Ny0xLjc1LDAtLjc2LS41NC0xLjMtMS4yMS0xLjM2LS4xNywxLjM3LS45LDMuMDUtMS44NCwzLjA1LS41NywwLS45MS0uNDYtLjkxLTEuMjIsMC0xLjE0LjkyLTIuMzgsMi40OS0yLjM4LDEuMDMsMCwyLjA3LjcxLDIuMDcsMS45MVpNMTYuMSw0MzEuMDFjLS45OS4wOC0xLjYxLDEuMDUtMS42MSwxLjc5LDAsLjQ0LjEyLjcxLjM2LjcxLjQ0LDAsMS4xMi0xLjIzLDEuMjUtMi41WiIvPgogICAgICAgIDxnPgogICAgICAgICAgPHBhdGggZD0iTTE4LjU5LDQ1MS4zNGwtLjMuNTljLS4wOC0uMDctLjE2LS4xMy0uMjItLjE4LS4xMi0uMDgtLjI0LS4xNi0uMzctLjIzLS4yNC42Mi0uNjYsMS4xOS0xLjM2LDEuNS0uMTYtLjEyLS4zLS4yMi0uNTItLjM0Ljc3LS4zNCwxLjE3LS44NSwxLjM4LTEuNDItLjM4LS4xNy0uNzktLjI5LTEuMTktLjMzLS4xLjE5LS4xOS4zNy0uMjcuNTItLjM4LjcxLS42OSwxLjE1LTEuMTYsMS4xNS0uMzMsMC0uNjMtLjI1LS42My0uNzYsMC0uNzQuNjQtMS4zMywxLjctMS40My4xNy0uMzQuMzQtLjc0LjUtMS4xMy0uMzYuMDUtLjgxLjExLTEuMTIuMTQtLjA4LDAtLjE5LjAyLS4yOC4wM2wtLjEtLjU5Yy4wNywwLC4xOC4wMS4zMS4wMS4zNSwwLDEuMDktLjA4LDEuMzItLjEyLjA0LS4wMS4wOS0uMDMuMTItLjA1bC41Ny4zMmMtLjEuMTMtLjE1LjIzLS4xOS4yOS0uMTUuMzItLjM0LjcyLS41MiwxLjExLjM0LjA0LjcyLjEzLDEuMS4yOC4wMy0uMTguMDUtLjM1LjA3LS41MywwLS4xLjAxLS4xOCwwLS4yN2wuNi4xOXMtLjA0LjE1LS4wNS4yMWMtLjAyLjIxLS4wNS40Mi0uMS42My4xNy4wOS4zNC4xOC41LjI4LjA1LjAzLjE1LjA5LjIzLjEyWk0xNS4zMyw0NTEuMDFsLjAzLS4wNWMtLjY2LjExLS45MS40Ny0uOTEuNzksMCwuMTkuMDcuMjYuMTYuMjYuMTMsMCwuMzgtLjM4LjczLTFaIi8+CiAgICAgICAgICA8cGF0aCBkPSJNMTQuODYsNDYwLjc5bC4zMy4yN2MtLjI0LjcyLS4yOSwxLjEyLS4yOSwxLjY2bC0uNTIuMTVjLS4xNi0uNDQtLjI0LTEuMDktLjI0LTEuNywwLS44My4xLTEuOC4yOS0yLjY4bC42MS4xMWMtLjIyLjc0LS4zOSwxLjc1LS4zOSwyLjU5LDAsLjEsMCwuMjEsMCwuMzMuMDYtLjI2LjE0LS41MS4yMS0uNzNaTTE4LjM0LDQ2Mi40MmMtLjIyLS4xNy0uNDktLjM0LS43OS0uNDhoMGMwLC41OS0uNDQuOTEtMSwuOTFzLTEuMDYtLjI2LTEuMDYtLjgxYzAtLjQ2LjQyLS43MywxLS43My4xOSwwLC4zNi4wMS41Mi4wM2wtLjAzLS43NmgtLjExYy0uMzMsMC0uODMtLjAyLTEuMTYtLjA4bC4wMi0uNTJjLjMyLjA1LjguMDksMS4wOC4wOWguMTVjLS4wMi0uMzItLjAyLS42MS0uMDMtLjgyLS4zOC4wMS0uODcuMDMtMS4xOS4wNmwtLjAyLS41MWMuNDEtLjAzLjk2LS4wNiwxLjUzLS4wNi4zMywwLC43Ni4wMSwxLjAxLjAzdi41Yy0uMTgsMC0uNTMtLjAyLS43Ny0uMDMsMCwuMiwwLC40OC4wMS43OS4yOS0uMDIuNTgtLjA1Ljc4LS4wOWwuMDMuNTFjLS4yMy4wNC0uNTIuMDctLjguMSwwLC4zMS4wMi42My4wMy44OC4zNy4xMS43Mi4yNywxLjA0LjQ5bC0uMjQuNDlaTTE3LjAzLDQ2MS44OHYtLjA4Yy0uMTctLjA0LS4zNS0uMDYtLjUyLS4wNi0uMjcsMC0uNDkuMTEtLjQ5LjMsMCwuMjIuMjIuMzEuNDcuMzEuMzYsMCwuNTQtLjE2LjU0LS40N1oiLz4KICAgICAgICAgIDxwYXRoIGQ9Ik0xOC42Myw0NzEuMzVjLS4xOC43Mi0uNjgsMS40MS0xLjQ4LDEuNDEtLjYsMC0uNzktLjMxLS44Ny0uNzMtLjA0LS4yMS0uMTEtLjcyLS4xNi0uOTItLjA1LS4xOS0uMTUtLjI5LS4zMy0uMjktLjQzLDAtLjg3Ljk0LTEuMTUsMS45OWwtLjYyLS4xOWMuNDctMS4yNywxLjM0LTMuMTMsMS43Ni00LjA1LjA3LS4xNC4xLS4yMi4xMS0uMjhsLjYyLjI3Yy0uMDQuMDUtLjEyLjE3LS4xOS4zLS4xOC4zMS0uNDYuODctLjc3LDEuNTMuMTItLjA3LjI1LS4xMS4zOC0uMTEuNDIsMCwuNjYuMjcuNzQuNi4wNS4yMS4xMi43MS4xNS44OS4wNC4yOC4xNy40Mi4zOC40Mi4zOSwwLC44My0uNDYuOTUtMS4yNC4xMi4xMi4zNy4zMi40OS40WiIvPgogICAgICAgIDwvZz4KICAgICAgPC9nPgogICAgICA8Zz4KICAgICAgICA8cGF0aCBkPSJNNjUuNTgsMjA5LjU0Yy0uNjYsMC0xLjM4LjI2LTIuMjEsMi4xLDIuMDkuMjEsNC45NywyLjA3LDUuNDQsNC4wOC4xMS40Ni4wNC45MS0uMTgsMS4yOC00LjYxLDcuNjEtMjUuNTgsMjcuODItNjQuNTQsMzEuOTZsLjUxLDEuMjdjMy4wOS0uMzIsNDMuNjUtNSw2Ny45LTMwLjVsLjA3LS4wNywzLjk5LS44cy03LjMxLTkuMzEtMTAuOTgtOS4zMVoiLz4KICAgICAgICA8Zz4KICAgICAgICAgIDxwYXRoIGQ9Ik0yNy45NiwzMS4yOWwuMTkuMzdjLjI3LjU2LjY3LjksMS4xMy45Ny4xNi4wMi4zMi4wMi40OC0uMDIuMzUtLjA4Ljc4LS4zNS44OS0xLjE5LjA2LS40OCwwLTEuMDItLjA3LTEuMzMtLjQ5LTIuMTQtMi43NS01LjMyLTcuNTEtNy4yNWwtLjI3LS4xMS0uNTksMS4wNC4yMS4xOGMxLjgsMS41MSwyLjU3LDIuNDMsMy43MSw0LjAzbC43NiwxLjI0Yy4xNS4yNC43NCwxLjQyLDEuMDcsMi4wN1oiLz4KICAgICAgICAgIDxwYXRoIGQ9Ik0yNS4yNiwxOC4zN2MuMzMuMjcuNjcuNTUsMS4wNC44N2wxLjA2LDEuMDZjLjI2LjI2LDEuNTYsMS44LDEuODgsMi4xNy4zNC40Mi45OC45LDEuNzIuNTMsMS0uNS40LTIuMTIuMTYtMi41OS0xLjA5LTIuMTctNC4yOS00LjczLTkuNDgtNS40NGwtLjI5LDEuMDFjMS40My43LDIuMzcsMS4yNSwzLjI3LDEuOTFsLTMuMjYuM2MtMi4wNy4xNi00LjAzLjI4LTcuOS40MWwtLjg3LjAzLjczLS40OWMyLjY2LTEuNzksNS45NS00LjE0LDExLjk1LTkuMTdoMHMzLjIzLjgyLDMuMjMuODJsLTMuODEtNi4yMmMtMy4yLDQuMS0xMC4yNywxMC4yMi0xNi4xMSwxNS4xM2wtLjA3LjA2LS41Ny4wMkguMjVsMS44Myw0Ljk4LDEuNS0xLjUsMTEuNTUtMi4wNnYxOS4zM2gzLjI5di0xOS45Mmw2Ljg1LTEuMjJaIi8+CiAgICAgICAgICA8cGF0aCBkPSJNLjQzLDM3LjE3aDEuODljMS4zNS0xLjI5LDQuMzctNS44OCw1Ljg2LTguNjloMHMzLjE4LS41NywzLjE4LS41N2wtNC45NS00LjQ0Yy0uNjMsMi4yMi0yLjY0LDYuODItNS45OSwxMy42OVoiLz4KICAgICAgICAgIDxwYXRoIGQ9Ik04LjUzLDE0LjIzYy42OSwxLjA3LDEuMjIsMS42MSwxLjk4LDEuMzkuNDctLjEzLDEuMDgtLjg4LjU3LTIuNjMtLjQxLTEuNDItMS4yNS0yLjM2LTIuMTItMy4wNSwyLjA2LTEuNTgsNC41MS0zLjQ3LDYuMjMtNC44N2gwczMuMjMuODMsMy4yMy44M0wxNC44LDBjLTEuODMsMy4xLTQuMjMsNi4wMy03LjI4LDguOTVsLTEuMzQtLjY5Yy0yLjAyLS44OC0yLjgtMS4xNi00LjYxLTEuNTNsLS4zMiwxLjFjNC4xMSwyLjQzLDYuMjMsNC43Myw3LjI3LDYuNFoiLz4KICAgICAgICAgIDxwYXRoIGQ9Ik04NC42NywzNi45MXMtMS42LS42NC0xLjYzLS42NGgwdi0xMS43NGwtMS4zNC0uNC0zLjE2LDEwLjc0aDBjLTEyLjQ1LTMuOC0xNS45MS0xMi40NC0xNi43MS0xNS4xOS0uMDctLjI5LS4xNS0uNTYtLjIyLS44NmwtLjA3LS4zLDguOTEtLjI4aDEyLjQybC41NS0uNzctNS42OS02LjI0LTMuMjgsNS4wN2gtMTMuM2MtLjctNC43My0uNDctOC44NC0uNDctOC44OXYtLjIxcy4yMi0uMDMuMjItLjAzYzMuNDMtLjQ3LDYuNzYtMS4wMiw5LjkxLTEuNjJoMHM1Ljk2LjY3LDUuOTYuNjdsLTUuNzMtNS45MmMtLjUzLjYzLTEuMzIuOTEtNC45OSwyLjE5bC0uNzQuMjZjLTUuMjQsMS44OC0xMi4zLDMtMTguNTMsMy45OS0yLjI5LjM2LTQuNDUuNzEtNi40NCwxLjA3bC0uMDkuMDItMy40Mi0xLjk0djI4LjgzbC0yLjUyLjE5Yy01Ljk2LjUyLTYuNjYuNTYtOC4wNi41bDIuMzIsNi40LDEuNS0yLjJjMi4wNC0uMywyNS4zNy00LjMxLDM2Ljg4LTcuNzguMDYuMDQuMTEuMDkuMTcuMTRsLjUuMzguOTYuNjcuMDguMDZjNi44NCw0LjU4LDEzLjg4LDUuMTUsMTMuOTUsNS4xNiwwLDAsMi4xOS4zNSwyLjQzLS42Ny4wNS0uMjItLjA0LS41My0uMzctLjY2Wk00MC4zOCw5LjA2YzIuOTgtLjEzLDkuMDktLjQ5LDE2LjU4LTEuMzlsLjI4LS4wM3YuMjhjMCwyLjgzLjA2LDUuNTkuNTEsOC4zN2gtMTcuNjF2LTcuMjJoLjI0Wk00MC4xNCwzNC40NnYtMTUuOTVoMTguMDZsLjA1LjE5Yy43NCwyLjg4LDEuOTksNS41OSwzLjgxLDguMjgsMS4wNCwxLjMzLDIuMjIsMi41NywzLjUxLDMuNzItNy4xOSwxLjI3LTE3LjY3LDMuMDQtMjUuNDMsMy43N1oiLz4KICAgICAgICA8L2c+CiAgICAgICAgPGc+CiAgICAgICAgICA8cGF0aCBkPSJNMTAuODgsMTIwLjc4aDMxLjM5bC41Ny0xLjEzLTUuMjctNS42Ni0zLjEyLDQuNjRIMTAuODh2LTEwLjU4aDIzLjk5di43aDMuNHYtMTEuOTFsNC4wNi0xLjEtNS45NC02LjAzLTIuNjUsMy44NkgxMS45OGwtNC4zNS0zLjI2djQyLjg1YzAsMTUuNDMtMi4zNiwyNy4yOS03LjAyLDM1LjI3bDEuMDkuOGM4LjA4LTExLjk2LDkuMTctMjUuMSw5LjE3LTM2LjM4di0xMi4wNlpNMTAuODgsOTUuNzJoMjMuOTl2MTAuMTdIMTAuODh2LTEwLjE3WiIvPgogICAgICAgICAgPHBhdGggZD0iTTM4LjAyLDE2Mi41MWwtMy4wMiw0LjY3aC04Ljkxdi0xMi44MmgxMC4wNWwuNjMtMS4yLTQuODItNS42My0zLjAyLDQuNjdoLTIuODV2LTE0LjMybDkuMjYtMS4wNS4xLjE0Yy4yMi4zNi41Mi45Ljg3LDEuNTQuODgsMS41OSwyLjcxLDQuOTEsMy4zMSw1LjA1LjI3LjA3LjU4LDAsLjg0LS4xOC4zMi0uMjMuNTYtLjYyLjY5LTEuMTMuMTctLjY4LjI3LTEuNjktLjQ0LTMuMzYtLjMzLS43NC0zLjQ0LTcuMTctMTMuNTctMTMuMjdsLS45LDEuMDNjMy4wNCwyLjMyLDUuMjQsNC42NCw3Ljc4LDguMTVsLjI4LjM5aDBzLTE4LjQ2LjM4LTE4LjQ2LjM4bDUuODctOS45MmgwczIuOTctLjk5LDIuOTctLjk5bC01LjEzLTMuMTRoMHMwLDAsMCwwYy0yLDYuMDUtNC41NiwxMi41Ni00Ljk2LDEzLjU4bC4zMy40OS0xLjg4LjAzLTEuNi0uMDJoMHMyLjE3LDUuODEsMi4xNyw1LjgxbDEuMDEtMi4xOCw4LjQ5LTEuMDN2MTMuOTloLTExLjdsLjM5LDIuMTVoMTEuMzF2MTIuODJINS45MmwuMzMsMi4xNWgzNS45NmwuNjMtMS4yLTQuODItNS42M1oiLz4KICAgICAgICA8L2c+CiAgICAgICAgPHBhdGggZD0iTTYwLjUxLDQwOS4yOWwtLjAzLS4yOGgxNy4wNWwuNTYtMS4xMy01LjU5LTYuNTctMy40OSw1LjU1aC05LjV2LTE0LjQ4bDMuNDMtMS42Ny02LjgzLTEuMjJ2MTcuMzdoLTExLjc4bC00LjktLjY2LjY2LDIuOTYsMy4wNy0uMTVoMTEuMjZ2LjI1Yy0uNDIsMjYuMzQtMTQuMyw0Ni4yMy0xNS44Nyw0OC40bDIuMjEsMS43OGM2LjgtOS4xMiwxNC4yMy0yNi4yMSwxNC44Ni00Ny4wN2guNXYzOC4wN2gtNy43bC43NiwyLjE1aDYuOTR2MjAuNzRoMy40N2wtLjA3LTIuNTV2LTE4LjE5aDEwLjAxbC42Mi0xLjEyLTUuNTYtNS41OS0yLjg4LDQuNTVoLTIuMTh2LTM4LjA2aC41Yy41OSwxMC41NCwzLjUxLDMwLjQzLDE2LjQyLDQ1LjQ1LDEuMzItMS42NywyLjEzLTEuNzQsNC4yMi0xLjgzbC4zNy0xYy00LjY3LTQuMDItMTcuOTgtMjAuNTMtMjAuNS00NS43MVoiLz4KICAgICAgICA8cGF0aCBkPSJNNzkuMTgsMzM1LjYxaC0uNTJ2LTEyLjUyaC0xLjMxbC0xLjYyLDkuMjdjLS4yNiwxLjQ3LTEuNDIsMi42MS0yLjg5LDIuODRsLTIuNTcuNGgtMTUuNDhjLS44MiwwLTEuNDktLjY3LTEuNDktMS40OXYtNC43NGgxNi41OXYyLjU3aDMuNHYtMjIuMjJoMHMzLjM0LTEuMTgsMy4zNC0xLjE4bC01LjYxLTYuMDktMy4yLDQuMjNIMTguMjRsLTUuMDYtMy4zN3YyOC42M2gzLjR2LTIuNTdoMTMuMzhsLS4zNy40MmMtLjc2Ljg3LTIuMDQsMi4zMS0zLjY1LDMuNDctNC4yNiwzLjA1LTguMjksMy45NC0xMi4xOCw0LjgxLTMuMTkuNzEtOS40LDEuMTctMTMuNzYsMS4yN3YuNDZoNC4wMWMxMi40OCwwLDE5LjktMi41LDIzLjkyLTQuNTksNC4zNS0yLjI2LDUuNzctNC41Niw1Ljc4LTQuNThsLjA4LS4xMywyLjg3Ljg4LS45OC0yaDE0LjMzdjQuNzRjMCwyLjY0LDIuMTUsNC43OSw0Ljc5LDQuNzloMjQuMzhjLjkxLDAsMS42NS0uNzQsMS42NS0xLjY1cy0uNzQtMS42NS0xLjY1LTEuNjVaTTE2LjU4LDMxMy42MXYtNC43N2g1My4zMnY1LjAxSDE2LjU4di0uMjRaTTE2LjU4LDMyMC40MnYtNC45MWg1My4zMnY1LjE1SDE2LjU4di0uMjVaTTE2LjU4LDMyNy4yMnYtNC45aDUzLjMydjQuOUgxNi41OFoiLz4KICAgICAgPC9nPgogICAgPC9nPgogIDwvZz4KPC9zdmc+")}

/* ロゴは左上を基点に置く。上端はタグラインと揃える */
.stg-logo{
  position:absolute;left:var(--pad);top:clamp(18px,2.6vw,40px);z-index:2;
  width:var(--logo-w);height:var(--logo-h);
  background:var(--accent);
  -webkit-mask:var(--logo-src) no-repeat top center/contain;
          mask:var(--logo-src) no-repeat top center/contain;
  transition:background .6s var(--ease);
}

.stage{
  /* 高さは「画面の59%」を基本に、タグラインの下端から足元のクレジットまでに
     収まる高さで頭打ちにする(80px = クレジットの帯ぶんの逃げ)。
     これがないと、低い画面(スマートフォンの横持ち等)で帯が足元に食い込む */
  --stg-h:min(59vh,640px,calc(100svh - var(--tag-zone) - 80px));
  /* 2行ぶんのタグライン(1.7×2=3.4em)＋下の空きより上には来ない。
     画面が低いときや文字を大きくしたときに、帯がタグラインへ食い込むのを防ぐ */
  --tag-zone:calc(var(--tag-top) + var(--tag-fs) * 3.4 + 18px);
  position:absolute;right:0;
  left:calc(var(--pad) + var(--logo-w) + var(--logo-gap));
  top:max(var(--tag-zone), calc(50% - var(--stg-h) / 2));
  height:var(--stg-h);overflow:hidden;
}
.stg-track{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
}
/* 地は SVG の1本のパス。塗り＝箔色、線＝グレーの縁取り。
   行ごとの長さの差が、そのまま段々の外形になる。 */
.stg-shape{
  position:absolute;left:0;top:0;overflow:visible;pointer-events:none;
  fill:var(--accent-band,var(--accent));
  stroke:var(--shadow);stroke-width:8;stroke-linejoin:miter;
  transition:fill .6s var(--ease);
}
/* 1行＝ボックス組で流し込んだ文字。紙名の途中で改行されてよい */
.stg-line{
  position:relative;z-index:1;
  height:var(--lh,42px);line-height:var(--lh,42px);
  font-size:var(--fs,28px);font-weight:500;
  /* canvas の実測とズレないよう、字送りとツメ組みは切っておく */
  letter-spacing:0;font-feature-settings:"palt" 0;
  color:var(--accent-ink);white-space:nowrap;overflow:hidden;
  padding:0 var(--px,10px);box-sizing:content-box;
  transition:color .6s var(--ease);
}

/* 紙屋推薦25種 バッジ（右上・横組み） */
.hero__badge{
  position:absolute;right:var(--pad);top:clamp(20px,3vw,44px);
  display:inline-flex;align-items:baseline;gap:.45em;
  border:1px solid var(--accent);color:var(--accent);
  padding:.5em .9em;font-size:clamp(12px,1.5vw,20px);line-height:1.2;letter-spacing:.1em;
  transition:color .6s var(--ease),border-color .6s var(--ease);
}
.hero__badge b{font-size:1.7em;font-weight:800;font-family:var(--la);letter-spacing:0}
.hero__badge br{display:none}

/* --- タグライン（左上）。ロゴに重ならないよう、帯の左端に揃える --- */
/* タグラインの大きさと位置は変数にしておく。帯(.stage)の上端がこれを見て下がる */
/* 位置は上端合わせではなく、少し沈めてロゴと帯の間で釣り合わせる。
   7vh 基準なので、画面が高いほど余裕を持って下がる。
   帯(.stage)の上端は --tag-zone を見て自動で逃げるため、ぶつかりはしない */
:root{--tag-fs:clamp(17px,2.8vw,44px);--tag-top:clamp(24px,7vh,84px)}
.hero__tag{
  position:absolute;top:var(--tag-top);
  left:calc(var(--pad) + var(--logo-w) + var(--logo-gap));
  font-size:var(--tag-fs);font-weight:500;line-height:1.7;
  letter-spacing:.08em;color:var(--fg);
}
/* 行頭の「 のインクは0.64emから始まる(canvasで実測)。
   その分を食い込ませると、見た目の行頭が帯の左の線と揃う */
.hero__tag span{display:block;margin-inline-start:-.64em}

.hero__meta{
  position:absolute;left:var(--pad);bottom:clamp(20px,3vw,44px);
  display:flex;gap:1.6em;font-family:var(--la);font-size:11px;letter-spacing:.24em;
  color:var(--dim);text-transform:uppercase;
}
.scroll-cue{
  position:absolute;right:var(--pad);bottom:clamp(20px,3vw,36px);
  font-family:var(--la);font-size:10px;letter-spacing:.28em;color:var(--dim);
  display:flex;align-items:center;gap:.9em;
}
.scroll-cue span{display:block;width:52px;height:1px;background:var(--dim);position:relative;overflow:hidden}
.scroll-cue span::after{content:"";position:absolute;inset:0;background:var(--accent);animation:cue 2.2s infinite var(--ease)}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* =========================================================
   索引 — 25種へ直接飛ぶ
   ========================================================= */
.idx-open{
  position:fixed;right:var(--pad);bottom:clamp(18px,2.6vw,34px);z-index:80;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:.7em;
  background:var(--ink-dark);color:#f2f2ef;border:0;
  /* 黒地の奥付に重なったときに輪郭が消えないよう、細い縁を回しておく。
     白地の上では地と同系の暗さなのでほぼ見えない */
  box-shadow:0 0 0 1px rgba(242,242,239,.2);
  padding:.85em 1.15em;font-family:var(--la);font-size:11px;letter-spacing:.22em;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease),background .3s var(--ease);
}
.idx-open.on{opacity:1;transform:none;pointer-events:auto}
.idx-open:hover{background:#1c1c1a}
/* 段々を模した3本のバー */
.idx-open__bars{display:grid;gap:2px;width:14px}
.idx-open__bars i{display:block;height:2px;background:var(--accent)}
.idx-open__bars i:nth-child(1){width:100%}
.idx-open__bars i:nth-child(2){width:62%}
.idx-open__bars i:nth-child(3){width:84%}

/* 全画面ではなく、画面の半分だけを覆う引き出し。
   背後のページが見えたままなので、どこへ移動したか分かる。 */
.idx{
  position:fixed;top:0;right:0;bottom:0;z-index:95;
  width:min(50vw,600px);
  background:var(--ink-dark);color:#f2f2ef;
  transform:translateX(101%);visibility:hidden;
  transition:transform .5s var(--ease),visibility .5s;
  box-shadow:-16px 0 44px rgba(0,0,0,.3);
  overflow-y:auto;overscroll-behavior:contain;
}
.idx.on{transform:none;visibility:visible}
.idx__inner{width:100%;padding:clamp(64px,9vh,88px) clamp(20px,3vw,40px) clamp(28px,4vh,48px)}
.idx__head{
  font-size:clamp(13px,1.5vw,17px);letter-spacing:.14em;margin-bottom:clamp(20px,3vw,38px);
  display:flex;align-items:baseline;gap:1.2em;flex-wrap:wrap;
}
.idx__head span{font-family:var(--la);font-size:11px;letter-spacing:.24em;color:#8d8d87}

/* 上段：セクションの目次 */
.idx__secs{list-style:none;margin:0 0 clamp(26px,4vh,44px);padding:0;
  display:grid;gap:1px;background:#242422;border:1px solid #242422}
.idx__secs button{
  -webkit-appearance:none;appearance:none;cursor:pointer;width:100%;text-align:start;
  background:var(--ink-dark);border:0;color:inherit;font-family:var(--jp);
  display:grid;grid-template-columns:2.6em 1fr;align-items:baseline;gap:.9em;
  padding:.85em 1.1em;transition:background .25s var(--ease),color .25s var(--ease);
}
.idx__secs button i{font-style:normal;font-family:var(--la);font-size:10.5px;letter-spacing:.1em;color:#8d8d87}
.idx__secs button b{font-family:var(--la);font-size:clamp(14px,1.6vw,19px);font-weight:600;letter-spacing:.14em}
.idx__secs button:hover,
.idx__secs button:focus-visible{background:var(--accent-band,var(--accent));color:var(--accent-ink)}
.idx__secs button:hover i,.idx__secs button:focus-visible i{color:var(--accent-ink);opacity:.7}

/* 下段の見出し */
.idx__sub{
  font-size:12px;letter-spacing:.14em;color:#8d8d87;margin-bottom:.9em;
  display:flex;align-items:baseline;gap:1em;flex-wrap:wrap;
}
.idx__sub span{font-family:var(--la);font-size:10.5px;letter-spacing:.2em}

.idx__list{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;
  background:#242422;border:1px solid #242422}
.idx__list button{
  -webkit-appearance:none;appearance:none;cursor:pointer;width:100%;text-align:start;
  background:var(--ink-dark);border:0;color:inherit;font-family:var(--jp);
  display:grid;grid-template-columns:2.4em 1fr auto;align-items:baseline;gap:.9em;
  padding:.95em 1.1em;transition:background .25s var(--ease),color .25s var(--ease);
}
.idx__list button i{font-style:normal;font-family:var(--la);font-size:10.5px;letter-spacing:.1em;color:#8d8d87}
.idx__list button b{font-size:clamp(13px,1.4vw,15.5px);font-weight:500;letter-spacing:.02em}
.idx__list button em{font-style:normal;font-family:var(--la);font-size:11px;letter-spacing:.08em;color:#8d8d87}
.idx__list button:hover,
.idx__list button:focus-visible{background:var(--accent-band,var(--accent));color:var(--accent-ink)}
.idx__list button:hover i,.idx__list button:hover em,
.idx__list button:focus-visible i,.idx__list button:focus-visible em{color:var(--accent-ink);opacity:.7}

.idx__close{
  position:absolute;top:clamp(16px,2.4vw,28px);right:clamp(20px,3vw,40px);
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background:none;border:1px solid #3a3a37;color:#f2f2ef;
  padding:.7em 1.1em;font-family:var(--la);font-size:11px;letter-spacing:.22em;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.idx__close:hover{border-color:var(--accent);color:var(--accent)}

/* =========================================================
   紙面の拡大
   ========================================================= */
.zoom{
  position:fixed;inset:0;z-index:98;
  background:rgba(7,7,7,.94);
  display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,28px);
  padding:clamp(56px,9vh,96px) clamp(12px,3vw,40px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.zoom.on{opacity:1;visibility:visible}

.zoom__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vh,24px)}
.zoom__fig img{
  width:min(74vmin,700px);height:auto;aspect-ratio:1;object-fit:cover;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.zoom__cap{
  display:flex;align-items:baseline;gap:1em;flex-wrap:wrap;justify-content:center;
  color:#f2f2ef;text-align:center;
}
.zoom__cap i{font-style:normal;font-family:var(--la);font-size:11px;letter-spacing:.2em;color:#8d8d87}
.zoom__cap b{font-size:clamp(15px,1.8vw,21px);font-weight:500;letter-spacing:.03em}
.zoom__cap em{font-style:normal;font-size:clamp(11px,1.2vw,13.5px);letter-spacing:.06em;color:#8d8d87}

.zoom__nav{
  -webkit-appearance:none;appearance:none;cursor:pointer;flex:0 0 auto;
  width:clamp(38px,4vw,52px);aspect-ratio:1;
  background:none;border:1px solid #3a3a37;color:#f2f2ef;
  font-family:var(--la);font-size:15px;line-height:1;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.zoom__nav:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-band,var(--accent))}

.zoom__close{
  position:absolute;top:clamp(16px,2.4vw,32px);right:clamp(16px,3vw,40px);
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background:none;border:1px solid #3a3a37;color:#f2f2ef;
  padding:.7em 1.1em;font-family:var(--la);font-size:11px;letter-spacing:.22em;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.zoom__close:hover{border-color:var(--accent);color:var(--accent)}

/* =========================================================
   スクロールで四方から入ってくる、段々の地
   ========================================================= */
.has-deco{overflow:hidden}
.deco{
  position:absolute;pointer-events:none;z-index:0;
  /* 色はTOPの帯と同じ箔色そのまま。ただし縁取りは付けずベタで置く
     （グレーの縁はTOPの帯だけの扱い） */
  fill:var(--accent-band,var(--accent));stroke:none;
  opacity:0;transition:transform 1.15s var(--ease),opacity .9s var(--ease);
}
.deco[data-dir="left"]  {transform:translateX(-105%)}
.deco[data-dir="right"] {transform:translateX(105%)}
.deco[data-dir="top"]   {transform:translateY(-105%)}
.deco[data-dir="bottom"]{transform:translateY(105%)}
.has-deco.in .deco{opacity:1;transform:none}
/* 引き直しの出入り。消えるときは自分の辺へ引っ込み(速め)、
   新しい形が新しい辺から、いつもの入場と同じ動きで入り直す */
.has-deco.in .deco.out{opacity:0;transition-duration:.45s,.4s}
.has-deco.in .deco.out[data-dir="left"]  {transform:translateX(-105%)}
.has-deco.in .deco.out[data-dir="right"] {transform:translateX(105%)}
.has-deco.in .deco.out[data-dir="top"]   {transform:translateY(-105%)}
.has-deco.in .deco.out[data-dir="bottom"]{transform:translateY(105%)}
/* 本文は必ず地より前面に */
.sec > .wrap{position:relative;z-index:1}
.paper > *:not(.deco){position:relative;z-index:1}

/* =========================================================
   共通セクション
   ========================================================= */
.sec{padding:clamp(80px,13vw,190px) 0;position:relative}
/* 表紙セクションと25種セクションの間は、段々を入れたぶん少し詰める */
.covers{padding-bottom:clamp(56px,8vw,120px)}   /* 地は専用の帯に出すので余白は控えめでよい */
#papers{padding-top:clamp(56px,8vw,124px)}
/* 段々だけを入れる専用の帯。中でクリップするので、隣の要素には絶対かぶらない */
.deco-band{
  position:relative;overflow:hidden;
  height:clamp(120px,20vh,260px);
  margin-top:clamp(28px,4vw,64px);
}
/* 切替UIの下に出すぶんは、ボタンから十分に離す */
.deco-band--covers{margin-top:clamp(56px,8vw,120px)}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.sec__label{
  font-family:var(--la);font-size:11px;letter-spacing:.26em;color:var(--dim);
  text-transform:uppercase;display:flex;align-items:center;gap:1em;margin-bottom:clamp(24px,3vw,44px);
}
.sec__label i{
  font-style:normal;color:var(--accent-text);border:1px solid currentColor;
  padding:.35em .6em;font-size:10px;letter-spacing:.1em;transition:color .6s var(--ease);
}
.h2{font-size:clamp(28px,4.6vw,60px);font-weight:900;line-height:1.35;letter-spacing:.01em}
.sec__note{margin-top:1.4em;max-width:44em;color:var(--dim);font-size:clamp(13px,1.35vw,15.5px);line-height:2.1}

/* ---------- ABOUT ---------- */
.lead{font-size:clamp(21px,3.3vw,44px);font-weight:700;line-height:1.7;letter-spacing:.005em}
/* 強調句には「いま選ばれている紙の色」の下線。紙を替えると0.6秒で染まり直す。
   skip-ink を切って、線を箔のベタらしく途切れなく引く */
.lead em{
  font-style:normal;color:var(--accent-text);
  text-decoration:underline;
  text-decoration-color:var(--accent-band,var(--accent));
  text-decoration-thickness:.14em;
  text-underline-offset:.22em;
  text-decoration-skip-ink:none;
  transition:color .6s var(--ease),text-decoration-color .6s var(--ease);
}
.about__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,88px);margin-top:clamp(40px,5vw,80px);align-items:start}
.about__body{color:var(--dim);font-size:clamp(13.5px,1.4vw,16px);line-height:2.25}
/* ---------- 図表 ---------- */
.fig{margin:0}
.fig__cap,.fig__head{display:flex;flex-wrap:wrap;gap:.6em 2em;font-size:12px;letter-spacing:.08em;color:var(--dim)}
.fig__cap i,.fig__head i{font-style:normal;font-family:var(--la);font-size:10px;letter-spacing:.2em;
  margin-inline-end:.9em;text-transform:uppercase}
.fig__head b{font-family:var(--la);font-size:clamp(20px,2.4vw,30px);font-weight:800;color:var(--fg);
  letter-spacing:0;margin-inline:.1em}
.fig__head em{font-style:normal;margin-inline-start:.8em}

/* 判型：134×188 の実寸比。奥にずらした面で頁の厚みを示す */
.fig--book{display:flex;flex-direction:column;gap:1.2em;align-items:flex-start}
.fig__book{
  position:relative;width:min(58%,190px);aspect-ratio:134/188;
  border:1px solid var(--fg);background:var(--bg);
  display:grid;place-items:center;
}
.fig__book::before{
  content:"";position:absolute;inset:0;transform:translate(9px,9px);z-index:-1;
  background:var(--accent-band,var(--accent));
}
.fig__size{font-family:var(--la);font-size:clamp(11px,1.2vw,14px);letter-spacing:.06em;color:var(--fg)}
.fig__size i{font-style:normal;margin-inline:.35em;opacity:.5}
.fig__size em{font-style:normal;font-size:.75em;margin-inline-start:.4em;color:var(--dim)}

/* 分布図あらため、生まれ年順のカルーセル。
   小口式のストリップは細くて触りにくかったため、触れる大きさのサムネを
   生まれ年順に並べ、左右の矢印とスワイプで送る(スクロールスナップ)。
   10年代が変わる位置は間隔をひと呼吸広げて、時間の目盛りの名残りを残す */
.fig--years{margin-top:clamp(34px,4.5vw,64px)}
.plot{
  --pth:clamp(64px,8vw,92px);   /* サムネの一辺。指で確実に押せる大きさ */
  position:relative;margin-top:clamp(10px,1.4vw,20px);
}
.plot__rail{
  display:flex;align-items:flex-start;gap:clamp(9px,1.1vw,15px);
  overflow-x:auto;scroll-snap-type:x proximity;
  /* 上の空きは紙名の札のぶん。左右は矢印が最初と最後の紙に重ならないぶん。
     scroll-padding を同じ値にしないと、スナップが先頭の紙を余白ごと
     左端へ引き込んで、矢印の下に潜り込む */
  padding:46px clamp(40px,4.6vw,54px) 6px;
  scroll-padding-inline:clamp(40px,4.6vw,54px);
  scrollbar-width:none;
}
.plot__rail::-webkit-scrollbar{display:none}
.plot__item{
  -webkit-appearance:none;appearance:none;border:0;background:none;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  flex:0 0 auto;scroll-snap-align:start;
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.6em;
  width:var(--pth);   /* 紙名が長くてもカードの幅は変えない(名前は中で折り返す) */
}
.plot__item img{
  width:var(--pth);aspect-ratio:1;object-fit:cover;display:block;
  border:1px solid rgba(18,18,16,.22);   /* 白っぽい紙が地に溶けないための縁 */
  background:var(--bg2);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
/* 主ラベルは紙名。年はホバー/タップの札と、10年代の間隔が受け持つ */
.plot__name{
  font-size:10px;line-height:1.6;letter-spacing:.04em;color:var(--fg);
  text-align:center;overflow-wrap:anywhere;
}
/* 触れた1枚は、束から紙を引き出すように持ち上がる */
.plot__item:hover img,.plot__item:focus-visible img,.plot__item.is-tip img{
  transform:translateY(-5px);box-shadow:0 6px 12px rgba(0,0,0,.2);
}
.plot__item:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px}
/* 10年代の変わり目 */
.plot__item--decade{margin-inline-start:clamp(16px,2.2vw,30px)}

/* 送りの矢印。サムネの高さの中央に置く */
.plot__arr{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  position:absolute;z-index:4;top:calc(46px + var(--pth) / 2);transform:translateY(-50%);
  width:clamp(32px,3.4vw,40px);aspect-ratio:1;
  border:1px solid var(--line);background:var(--bg);color:var(--fg);
  font-family:var(--la);font-size:15px;line-height:1;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .3s var(--ease),color .3s var(--ease),opacity .3s var(--ease);
}
.plot__arr:hover{border-color:var(--accent-text);color:var(--accent-text)}
.plot__arr--p{left:0}
.plot__arr--n{right:0}
.plot__arr.is-end{opacity:.25;pointer-events:none}

/* 紙名の札 */
.plot__tip{
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  background:var(--ink-dark);color:#f2f2ef;white-space:nowrap;
  padding:.5em .8em;font-size:11px;letter-spacing:.04em;line-height:1.5;
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease);
}
.plot__tip i{font-style:normal;font-family:var(--la);margin-inline-start:.7em;color:#8d8d87}
.plot__item:hover .plot__tip,.plot__item:focus-visible .plot__tip,.plot__item.is-tip .plot__tip{opacity:1}
/* 札の横位置は sideFix() がその都度pxで決める(端でのはみ出しをクランプ) */

/* ---------- 表紙5色（3Dカルーセル） ---------- */
.covers__stage{
  position:relative;z-index:1;   /* 段々の地に隠されないようにする */
  /* 注釈を消したぶん、見出しとの間はゆったり取る(アキラ指示) */
  margin-top:clamp(52px,8vw,120px);display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vw,24px);
}
/* 遠近の舞台。5枚の表紙が円筒状に並び、ドラッグで回る。
   縦スクロールを殺さないよう touch-action は pan-y にしておくこと */
.covers__scene{
  --card-w:clamp(140px,24vw,270px);
  position:relative;width:100%;
  height:calc(var(--card-w) * 1.62);
  perspective:1500px;
  touch-action:pan-y;cursor:grab;
  user-select:none;-webkit-user-select:none;
}
.covers__scene:active{cursor:grabbing}
.covers__ring{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform-style:preserve-3d;
  transition:transform 1s var(--e-out);
}
.covers__ring.is-drag{transition:none}   /* 指に付いてくる間は補間しない */

/* 1枚 = 両面のカード。--a が円周上の持ち場、--r が半径(JSが実測から書く)、
   --f が裏返しの角度。奥へ回った表紙は裏面が見える */
.cvcard{
  -webkit-appearance:none;appearance:none;border:0;background:none;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;   /* iOSのタップ時の灰色の四角を止める */
  position:absolute;width:var(--card-w);aspect-ratio:822/1174;
  left:calc(var(--card-w) / -2);top:calc(var(--card-w) * -.714);
  transform-style:preserve-3d;
  transform:rotateY(var(--a)) translateZ(var(--r,240px)) rotateY(var(--f,0deg));
  transition:transform 1s var(--e-out);
  /* 本の厚み。背表紙の写真の比率(103:2133)から実物どおりに:
     厚み = カードの高さ(幅×1174/822) × 103/2133 ≒ 幅 × .069 */
  --t:calc(var(--card-w) * .069);
}
.cvcard:focus-visible{outline:2px solid var(--accent-text);outline-offset:6px}
.cvcard img{
  position:absolute;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  -webkit-user-drag:none;
}
/* 表1と表4。厚みの半分だけ前後へ出して、本の胴をつくる。
   影は掛けない — 表紙の輪郭に沿って落ちる影が、背との継ぎ目に「溝」を作って
   浮いて見える。立体になった今は、面そのものの向きが本を地から起こしてくれる */
.cvcard__f,.cvcard__b{
  inset:0;width:100%;height:100%;object-fit:contain;
}
.cvcard__f{transform:translateZ(calc(var(--t) / 2))}
.cvcard__b{transform:rotateY(180deg) translateZ(calc(var(--t) / 2))}
/* 背(左)と小口(右)。幅 = 厚み。
   ・横は左右へ0.5pxずつ太らせて、表1・表4の裏へ差し込む(サブピクセルの隙間対策。
     小口はそのぶん僅かに詰まるが、積層の縞なので目に見えない)
   ・縦は表紙写真の透過余白(実測 上下0.3%)に合わせて詰める。
     等倍のままだと、背が表紙より上下にひと回りはみ出して浮いて見える */
.cvcard__s,.cvcard__e{
  left:calc(50% - var(--t) / 2 - .5px);
  width:calc(var(--t) + 1px);object-fit:cover;
}
/* 縦の範囲はカードごとの実測値(buildCovers が --sy/--ey に書く)。
   表紙写真の縁と揃えないと、背がはみ出してガタつく */
.cvcard__s{
  top:calc(var(--sy0,.005) * 100%);height:calc((var(--sy1,.995) - var(--sy0,.005)) * 100%);
  transform:rotateY(-90deg) translateZ(calc(var(--card-w) / 2));
}
.cvcard__e{
  top:calc(var(--ey0,.005) * 100%);height:calc((var(--ey1,.995) - var(--ey0,.005)) * 100%);
  transform:rotateY( 90deg) translateZ(calc(var(--card-w) / 2));
}
/* 胴の芯。箱の中心に置いた詰め物の面。
   回転の最中、面と面の継ぎ目にヘアラインの隙間が走ることがある(特にSafariの3D合成)。
   芯があると、隙間から見えるのが「ページの地の色」ではなく「本の内側の影」になり、
   穴ではなく厚みとして読める。両面から見えるので backface は隠さない */
.cvcard__core{
  position:absolute;display:block;left:0;right:0;
  top:calc(var(--cy0,.006) * 100%);height:calc((var(--cy1,.994) - var(--cy0,.006)) * 100%);
  background:#12110d;
  transform:translateZ(0);
}

.covers__nav{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,28px)}
.covers__name{
  font-size:clamp(13px,1.5vw,17px);font-weight:500;letter-spacing:.06em;
  color:var(--fg);text-align:center;min-height:1.6em;
  min-width:14em;   /* 紙名の長さが変わっても矢印が揺れないように */
}
/* 補佐の矢印。年代カルーセルの矢印と同じ意匠 */
.covers__arr{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  width:clamp(32px,3.4vw,40px);aspect-ratio:1;
  border:1px solid var(--line);background:var(--bg);color:var(--fg);
  font-family:var(--la);font-size:15px;line-height:1;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.covers__arr:hover{border-color:var(--accent-text);color:var(--accent-text)}
.covers__hint{
  display:flex;align-items:center;gap:1.1em;margin-top:-.3em;
  font-family:var(--la);font-size:10px;letter-spacing:.32em;color:var(--dim);
}
.covers__hint span{letter-spacing:0}

/* =========================================================
   25種（年表）
   ========================================================= */
.papers__body{display:grid;grid-template-columns:clamp(96px,11vw,168px) 1fr;margin-top:clamp(40px,6vw,90px)}
.rail{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:1.2em;
  padding-inline-start:var(--pad);border-inline-end:1px solid var(--line)}
.rail__year b{font-family:var(--la);font-size:clamp(22px,2.7vw,38px);font-weight:800;color:var(--accent-text);
  line-height:1;letter-spacing:-.01em;transition:color .6s var(--ease)}
/* 年スケールはスクラバー。点をつまんで25種の中を行き来できる。
   縦スクロールを奪わないよう、レール自身だけ touch-action を切る */
.rail__track{width:1px;height:min(38vh,300px);background:var(--line);position:relative;
  touch-action:none;cursor:grab}
.rail__track.is-scrub{cursor:grabbing}
.rail__track::after{content:"";position:absolute;inset:-10px -16px}   /* 指の当たり */
.rail__track span{position:absolute;left:-2px;width:5px;height:5px;border-radius:50%;background:var(--accent);
  top:0;transition:top .35s var(--ease),background .6s var(--ease);pointer-events:none}
.rail__track.is-scrub span{transform:scale(1.8);transition:none}
.rail__year{cursor:pointer}   /* 年号を押すとセクションの頭へ */
.rail__no{font-family:var(--la);font-size:11px;letter-spacing:.16em;color:var(--dim)}
.rail__no i{font-style:normal;color:var(--fg)}

.papers__list{min-width:0}
.paper{
  padding:clamp(52px,7vw,110px) var(--pad);border-block-end:1px solid var(--line);
  position:relative;overflow:hidden;
}
/* 番号・紙名・年は同じベースラインに座らせる。
   上端合わせだと、行高の詰まった番号だけが高く見える(アキラ指摘) */
.paper__head{display:flex;align-items:baseline;gap:clamp(14px,2.2vw,32px);flex-wrap:wrap}
.paper__names{min-width:0}
.paper__name{font-size:var(--name-fs,clamp(24px,3.7vw,48px));font-weight:900;line-height:1.25;letter-spacing:.01em}
.paper__romaji{font-family:var(--la);font-size:clamp(9.5px,1.05vw,12px);letter-spacing:.3em;color:var(--dim);
  /* 見た目の行頭を紙名に揃える。行頭の字の左の空きは字種でばらばら
     (フ0.15em/新0.01em)なので、buildPapers が字ごとに実測して
     --nlsb(紙名)/--rlsb(ローマ字)へ書く */
  margin-inline-start:calc(var(--nlsb,0) * var(--name-fs,1em) - var(--rlsb,0) * 1em);
  text-transform:uppercase;margin-top:.9em}
.paper__year{margin-inline-start:auto;text-align:right;flex:0 0 auto}
.paper__year b{font-family:var(--la);font-size:clamp(20px,2.6vw,34px);font-weight:800;color:var(--accent-text);
  line-height:1;transition:color .6s var(--ease)}
.paper__year span{display:block;font-size:10px;letter-spacing:.18em;color:var(--dim);margin-top:.7em}

.paper__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,72px);margin-top:clamp(26px,3.4vw,52px);align-items:start}
.paper__desc{font-size:clamp(13.5px,1.38vw,15.5px);line-height:2.3;color:#33332e}

/* 規格表（誌面の表組みを踏襲） */
.spec{border:1px solid var(--line)}
.spec+.spec{margin-top:14px}
.spec__cap{font-size:11px;letter-spacing:.16em;color:var(--dim);padding:.75em 1em;border-block-end:1px solid var(--line)}
.spec__row{display:grid;grid-template-columns:minmax(92px,.42fr) 1fr}
.spec__row+.spec__row{border-block-start:1px solid var(--line)}
.spec__k{background:var(--bg2);padding:1em .9em;font-size:11px;letter-spacing:.1em;color:var(--dim);
  display:flex;flex-direction:column;gap:.45em;justify-content:center;text-align:center;line-height:1.6}
.spec__v{padding:1em 1.1em;display:flex;flex-wrap:wrap;gap:.5em .9em;align-content:flex-start}
.spec__v span{font-family:var(--la);font-size:12.5px;letter-spacing:.02em;color:var(--fg);white-space:nowrap}
.spec__v span em{font-style:normal;font-size:9.5px;color:var(--dim);margin-inline-start:.35em;font-family:var(--jp)}
/* 色名チップ */
.chips{padding:1em 1.1em;display:flex;flex-wrap:wrap;gap:.42em}
.chips span{font-size:10.5px;letter-spacing:.05em;color:var(--dim);border:1px solid var(--line);
  padding:.3em .6em;line-height:1.5;white-space:nowrap}
.chips span.more{border-color:transparent;color:var(--accent-text);transition:color .6s var(--ease)}

.paper__sample{
  margin-top:clamp(22px,2.6vw,34px);padding-top:1.4em;border-block-start:1px solid var(--line);
  display:flex;align-items:center;gap:clamp(14px,2vw,26px);
}
/* 本書に綴じた紙の実写。正方形で切り出してある。押すと拡大する */
.paper__swatch{
  -webkit-appearance:none;appearance:none;border:0;padding:0;cursor:zoom-in;
  position:relative;flex:0 0 auto;width:clamp(76px,9vw,124px);aspect-ratio:1;
  overflow:hidden;background:var(--bg2);
  box-shadow:0 1px 3px rgba(0,0,0,.14);
  transition:box-shadow .3s var(--ease);
}
.paper__swatch:hover,.paper__swatch:focus-visible{box-shadow:0 3px 10px rgba(0,0,0,.24)}
/* 右下に拡大の合図（＋） */
.paper__swatch::after{
  content:"";position:absolute;right:6px;bottom:6px;width:12px;height:12px;
  background:
    linear-gradient(#fff,#fff) no-repeat center/12px 1.5px,
    linear-gradient(#fff,#fff) no-repeat center/1.5px 12px;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.6));
  opacity:0;transition:opacity .3s var(--ease);
}
.paper__swatch:hover::after,.paper__swatch:focus-visible::after{opacity:.95}
.paper__swatch img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.paper:hover .paper__swatch img{transform:scale(1.06)}

.paper__sampletxt{display:flex;flex-direction:column;gap:.5em;min-width:0}
.paper__sample i{font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--dim)}
.paper__sample b{font-size:clamp(13px,1.5vw,17px);font-weight:500;color:var(--accent-text);letter-spacing:.04em;
  transition:color .6s var(--ease)}

/* 紙の質感（背景の演出） */
.paper::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:var(--tex,none);background-size:var(--tex-size,auto);
  mix-blend-mode:multiply;
}
.paper[data-tex="rough"],.paper[data-tex="washi"],.paper[data-tex="kraft"]{--tex:radial-gradient(circle at 50% 50%,rgba(0,0,0,.055) 0 1px,transparent 1px);--tex-size:5px 5px}
.paper[data-tex="glitter"]{--tex:radial-gradient(circle at 30% 20%,rgba(0,0,0,.13) 0 .8px,transparent 1px),radial-gradient(circle at 70% 60%,rgba(0,0,0,.09) 0 .6px,transparent 1px);--tex-size:23px 19px,31px 27px}
.paper[data-tex="emboss"]{--tex:repeating-linear-gradient(45deg,rgba(0,0,0,.045) 0 1px,transparent 1px 7px);--tex-size:auto}
.paper[data-tex="metal"],.paper[data-tex="mirror"]{--tex:repeating-linear-gradient(100deg,rgba(0,0,0,.07) 0 1px,transparent 1px 4px);--tex-size:auto}
.paper[data-tex="pearl"]{--tex:repeating-linear-gradient(115deg,rgba(0,0,0,.055) 0 1px,transparent 1px 9px);--tex-size:auto}
.paper[data-tex="gloss"]{--tex:linear-gradient(105deg,transparent 42%,rgba(0,0,0,.06) 50%,transparent 58%);--tex-size:auto}
.paper[data-tex="translucent"]{--tex:linear-gradient(180deg,rgba(0,0,0,.055),transparent 55%);--tex-size:auto}
.paper[data-tex="marble"]{--tex:radial-gradient(ellipse 60% 30% at 20% 30%,rgba(0,0,0,.055),transparent),radial-gradient(ellipse 50% 40% at 80% 70%,rgba(0,0,0,.045),transparent);--tex-size:auto}
.paper[data-tex="fluffy"]{--tex:radial-gradient(circle at 50% 50%,rgba(0,0,0,.06) 0 1.6px,transparent 2px);--tex-size:9px 9px}
.paper[data-tex="matte"],.paper[data-tex="plain"]{--tex:none}

/* =========================================================
   出現アニメーション
   ---------------------------------------------------------
   動きは3種類だけ。--d は「同時に入ってきた中での順番」ぶんの待ち時間で、
   JS が要素ごとに書く。行の中の順番は --ln。

   動かすのは transform / opacity / clip-path だけに絞っている
   （幅や高さを動かすとレイアウトが走って、25枚のカードでは目に見えて重くなる）。
   ========================================================= */
:root{
  --e-out:cubic-bezier(.16,1,.3,1);   /* 最後にすっと減速する。長めの動きに合う */
}
.an{--d:0ms}

/* 1. 行が下から立ち上がる（見出し）。
      行ごとに overflow:hidden の箱へ入れ、中身だけを持ち上げる。
      箱をぴったりにすると濁点や下に伸びる画が切れるので、上下に .06em 逃がす。 */
.an--lines .ln{display:block;overflow:hidden;padding-block:.06em;margin-block:-.06em}
.an--lines .ln>i{
  display:block;font-style:normal;transform:translateY(112%);
  transition:transform 1.05s var(--e-out);
  transition-delay:calc(var(--d) + var(--ln,0) * 90ms);
}
.an--lines.in .ln>i{transform:none}

/* 2. ふわりと上がって像を結ぶ（本文・図・表）。
      ぼかしは 3px だけ。これ以上かけると、字が読める前に目が疲れる。 */
.an--rise{
  opacity:0;transform:translateY(24px);filter:blur(3px);
  transition:opacity .9s var(--e-out) var(--d),
             transform .9s var(--e-out) var(--d),
             filter .9s var(--e-out) var(--d);
}
.an--rise.in{opacity:1;transform:none;filter:none}

/* 3. 上から拭き下ろす（写真）。
      枠が上から開いていき、中の写真はゆっくり寄りが戻る。
      枠より写真の方を長い時間で動かすと、奥行きが出る。

      clip は「中身」に掛けること。外枠に掛けると IntersectionObserver から見て
      交差面積が 0 になり、画面に入っても通知が来ない＝永久に出てこなくなる
      （opacity は無視されるが、clip は面積の計算に効く）。 */
.an--wipe>*{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--e-out) var(--d)}
.an--wipe.in>*{clip-path:inset(0 0 0 0)}
.an--wipe img{transform:scale(1.07);transition:transform 1.5s var(--e-out) var(--d)}
.an--wipe.in img{transform:none}

/* =========================================================
   豆知識
   ========================================================= */
.tips{background:var(--bg2)}
.tips__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(40px,5vw,76px)}
.tip{background:var(--bg2);padding:clamp(22px,2.8vw,38px)}
.tip h3{font-size:clamp(17px,2vw,24px);font-weight:700;display:flex;align-items:baseline;gap:.5em;margin-bottom:1em}
.tip h3 i{font-style:normal;color:var(--accent-text);font-size:.85em;transition:color .6s var(--ease)}
.tip p{font-size:13px;line-height:2.15;color:var(--dim)}
.tip b{color:var(--fg);font-weight:500}
.tip small{font-size:11px;opacity:.7;display:inline-block;margin-top:.9em}

.tips__tables{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,44px);margin-top:clamp(34px,4vw,62px)}
.tbl h4{font-size:12px;letter-spacing:.14em;color:var(--accent-text);font-weight:500;margin-bottom:1.1em;transition:color .6s var(--ease)}
.tbl table{width:100%;border-collapse:collapse;font-size:12px}
.tbl th,.tbl td{text-align:start;padding:.9em .8em;border-block-end:1px solid var(--line);line-height:1.6;vertical-align:top}
.tbl th{font-size:10px;letter-spacing:.16em;color:var(--dim);font-weight:400}
.tbl td:first-child{font-family:var(--la);color:var(--fg);white-space:nowrap}
.tbl td{color:var(--dim)}

/* =========================================================
   ギャラリー
   ========================================================= */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.1vw,16px);
  padding:clamp(36px,5vw,72px) var(--pad) 0}
.gal__i{position:relative;overflow:hidden;background:var(--bg2)}
.gal__i--w{grid-column:span 2}
.gal__i img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform 1.1s var(--ease)}
.gal__i--w img{aspect-ratio:16/10}
.gal__i:hover img{transform:scale(1.035)}
.gal__i figcaption{position:absolute;inset:auto 0 0 0;padding:1.2em 1.1em .9em;font-size:10.5px;letter-spacing:.12em;
  color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75))}

/* =========================================================
   クレジット
   ========================================================= */
/* 奥付はTOPと同じ黒地。配色をこのブロックの中だけ反転させる（.hero と同じやり方）。
   body の色を継いだままだと黒地に黒文字になるので、color を明示しておくこと。 */
.credit{
  background:var(--ink-dark);
  --bg:var(--ink-dark);        /* クレジット表の各マスの地 */
  --fg:#f2f2ef;
  --dim:#8d8d87;
  --line:#33332f;              /* 黒地の上の罫。白地用の --line だと明るすぎる */
  --accent-text:var(--accent); /* 黒地ではシルバーではなく箔色そのものを使う */
  color:var(--fg);
  padding-block:clamp(70px,10vw,140px);
}
.credit .wrap{display:flex;gap:clamp(32px,6vw,96px);align-items:flex-start;flex-wrap:wrap}
.credit__ttl{
  width:clamp(34px,4.4vw,58px);height:clamp(190px,25vw,320px);flex:0 0 auto;
  background:var(--accent);
  -webkit-mask:var(--logo-src) no-repeat center/contain;
          mask:var(--logo-src) no-repeat center/contain;
  /* 黒地では、ずらしたグレーの影は入れない。
     ロゴは細い線でできているので、影を敷くと線が濁って読めなくなる
     （影は白地の紙から浮かせるためのものだった） */
  transition:background .6s var(--ease);
}
.credit__ttl span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.credit__list{flex:1 1 300px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.credit__list>div{background:var(--bg);display:grid;grid-template-columns:minmax(84px,.3fr) 1fr;gap:1em;
  padding:clamp(13px,1.6vw,20px) clamp(14px,1.8vw,22px)}
.credit__list dt{font-size:10.5px;letter-spacing:.16em;color:var(--dim)}
.credit__list dd{margin:0;font-size:14px;font-weight:500}
.credit__list dd span{display:block;font-family:var(--la);font-size:10.5px;letter-spacing:.16em;color:var(--dim);margin-top:.5em}
/* 外部リンクは下線つきで、ホバーで箔色に */
.credit__list a{text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1px;
  transition:color .3s var(--ease)}
.credit__list a:hover{color:var(--accent-text)}
.credit__end{flex:1 1 100%;margin-top:clamp(30px,4vw,54px);font-size:clamp(14px,1.7vw,19px);color:var(--dim);letter-spacing:.06em}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:1000px){
  .about__grid,.paper__grid,.tips__tables{grid-template-columns:1fr}
  .tips__grid{grid-template-columns:1fr}
  .foil{max-width:min(64vw,520px)}
}
@media (max-width:760px){
  body{line-height:1.85}
  /* ロゴをスマホでは1.75倍に。幅だけ広げても高さで頭打ちになるので上限も上げる */
  :root{--logo-w:clamp(78px,21vw,104px);--logo-gap:18px;--logo-h:min(80vh,780px)}
  .stage{height:min(56vh,540px)}
  /* 狭い画面では、2行に収まる大きさを幅から逆算する。
     長い方の行「そういう使い方があったとは！」が16文字＋字間ぶんなので、
     残り幅をそれで割った値が「割れずに入る」上限になる。
     固定値にすると、端末幅しだいで3行に割れて読みにくくなる */
  :root{--tag-fs:clamp(14px,calc((100vw - var(--pad) * 2 - var(--logo-w) - var(--logo-gap)) / 16.8),23px)}
  .hero__tag{line-height:1.75;letter-spacing:.04em}
  /* 幅が足りずタグラインと重なるので、バッジは右下へ */
  .hero__badge{top:auto;bottom:clamp(18px,3vw,40px)}
  /* フッターのロゴはセンター配置に */
  .credit__ttl{margin-inline:auto}
  /* スマホでは下から出るシート。高さは画面の半分ぶん */
  .idx{top:auto;left:0;right:0;width:auto;height:58svh;
    transform:translateY(101%);box-shadow:0 -14px 40px rgba(0,0,0,.34)}
  .idx__inner{padding:clamp(56px,8vh,72px) var(--pad) 28px}
  .idx__list{grid-template-columns:1fr 1fr}
  .idx-open{bottom:clamp(14px,2.4vw,24px)}
  /* 拡大表示：横に矢印を置く幅がないので、写真の下へ回す */
  .zoom{flex-wrap:wrap;padding:clamp(52px,8vh,72px) 16px 24px}
  .zoom__fig{order:1;flex:1 0 100%}
  .zoom__fig img{width:min(86vw,86vmin)}
  .zoom__nav{order:2}
  .papers__body{grid-template-columns:1fr}
  .rail{position:sticky;top:0;height:auto;flex-direction:row;align-items:center;justify-content:space-between;
    gap:1em;padding:.85em var(--pad);border-inline-end:0;border-block-end:1px solid var(--line);
    background:rgba(224,223,215,.92);backdrop-filter:blur(8px);z-index:40}
  .rail__track{flex:1;height:1px;width:auto;max-width:none}
  .rail__track span{top:-2px;left:0;transition:left .35s var(--ease)}
  .rail__track::after{inset:-16px -10px}
  .paper{padding-inline:var(--pad)}
  .gal{grid-template-columns:1fr}
  .gal__i--w{grid-column:span 1}
  .scroll-cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  /* 出現アニメーションも止める。最初から出来上がった状態で置く */
  .an,.an--rise{opacity:1;transform:none;filter:none}
  .an--wipe>*,.an--wipe img{clip-path:none;transform:none}
  .an--lines .ln>i{transform:none}
}