@charset "utf-8";
/* ============================================================================
   AWAY.  ／ 出発の前に読む、決まりごとの帳面
   ---------------------------------------------------------------------------
   見本（https://www.jacquemus.com/ja_jp）から持ち帰ったのは3つだけ。
     ① 文字の大きさの比率  … 実測の級数比 中央値 1.170／6段。これをそのまま級数にした
     ② 余白の刻み          … 実測 2px 刻みが 78% を説明。全ての余白を偶数で組んだ
     ③ 1行の長さ           … 実測できた本文ブロックの最小値 622px → 和文は 600px
   色と書体は写していない。見本は無彩色＋1書体だが、こちらは砂と藍の2面＋4色、書体は4本。
   （見本は 2026-09-13 時点でメンテナンス中のため、保存版 web.archive.org/web/20260615140911 を実測）

   無彩色5段  --g-1 … --g-5      ／ 純黒・純白は1つも使っていない
   透明度5段  --o-1 … --o-5      ／ 生の rgba は書かず、color-mix で作る
   彩度色     --face-ai（面・地）／--accent-akebono（主役）／--accent-fuji（受け）／--warn-beni（注意）
   影         0本（境界は面・余白・色・1本の線で作る）
   ========================================================================== */

/* ── 色 ─────────────────────────────────────────────────────────── */
:root{
  /* 無彩色の階段5段（暗部を細かく、明部を粗く） */
  --g-1:#EFECE6; --g-2:#C6C1B8; --g-3:#7E7A73; --g-4:#34363C; --g-5:#16181E;
  --ink:var(--g-5);

  /* 面（地）。役割で名前を付ける */
  --face-suna:#F1EBE1;      /* 砂：読む面 */
  --face-suna-fukai:#E5DCCD; /* 砂の濃いほう：帯・索引 */
  --face-ai:#15193A;        /* 藍：章のあいだの暗い面 */
  --face-ai-fukai:#0D1028;  /* 藍の濃いほう：フッター */

  /* 彩度色。1語で役割が言えるものだけ置く */
  --accent-akebono:#E8511F; /* 曙：主役。数字と、いま見ている場所 */
  --accent-fuji:#6B5FCF;    /* 藤：受け。出どころ・法令の印 */
  --warn-beni:#B8232F;      /* 紅：気をつけること */

  /* 操作できるものの色（ブランド色とは別の名前空間） */
  --form-face:#1F2350; --form-ink:#F3EFE7; --form-line:#4A4F82; --form-hover:#2A2F66;

  /* 透明度5段。使うときは必ず color-mix 経由 */
  --o-1:8%; --o-2:18%; --o-3:36%; --o-4:62%; --o-5:86%;

  --line-usui:color-mix(in srgb, var(--g-4) var(--o-2), transparent);
  --line-koi :color-mix(in srgb, var(--g-4) var(--o-4), transparent);
  --line-aka :color-mix(in srgb, var(--accent-akebono) var(--o-4), transparent);
  --ink-usui :color-mix(in srgb, var(--g-5) var(--o-4), transparent);
  --kami-usui:color-mix(in srgb, var(--g-1) var(--o-3), transparent);
  --kami-koi :color-mix(in srgb, var(--g-1) var(--o-5), transparent);

  /* 画面の高さ（iPhone のアドレスバーで伸び縮みしないように） */
  --stable-lvh:1vh;

  /* 余白：2px 刻みの数列。例外は作らない */
  --s1:8px; --s2:14px; --s3:22px; --s4:36px; --s5:58px; --s6:94px; --s7:152px; --s8:246px;

  /* 1行の長さ（見本の実測 622px → 和文で読める 600px に落とした） */
  --hon:600px;

  /* 級数：最小値と最大値の比は、どれも 1 : 1.5 でそろえてある */
  --t-mega : clamp(86.7px, 9.4vw, 130px);
  --t-huge : clamp(54px,   4.2vw,  81px);
  --t-h1   : clamp(35.6px, 3.6vw, 53.4px);
  --t-h2   : clamp(26px,   2.6vw,  39px);
  --t-h3   : clamp(18px,   1.6vw,  27px);
  --t-lede : clamp(16.8px, 1.35vw, 25.2px);
  --t-body : clamp(15.4px, 1.15vw, 23.1px);
  --t-label: clamp(11.2px, .82vw, 16.8px);

  /* イージング4本。1本ずつに名前と持ち場がある */
  --ease-deru  :cubic-bezier(.16,.84,.28,1);   /* 出てくるとき */
  --ease-modoru:cubic-bezier(.62,.02,.86,.4);  /* 引っこむとき */
  --ease-men   :cubic-bezier(.76,0,.12,1);     /* 面・マスクが動くとき */
  --ease-nami  :cubic-bezier(.34,1.24,.5,1);   /* 数字が跳ねるとき */
  --ease-shinkou:cubic-bezier(0,0,1,1);        /* スクロールの進み具合＝等倍の写像。
                                                  時間の演出ではないので別枠で1本持つ */

  /* 時間：変化量で出し分ける */
  --t-iro:.18s; --t-ugoki:.34s; --t-men:.66s; --t-nyujo:1.15s;

  /* 粒（ノイズ）。外から読み込まずに地の質感を作る */
  --tsubu:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

/* ── 土台 ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--s6)}
body{
  margin:0; background:var(--face-suna); color:var(--ink);
  font-family:"Fraunces","Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:var(--t-body); line-height:1.88; letter-spacing:.02em;
  font-feature-settings:"palt" 1; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--accent-akebono);color:var(--face-suna)}

/* 数字と英字だけ等幅の欧文へ落とす（和文の数字は字幅が広くて間延びするため） */
.n{font-family:"DM Mono",ui-monospace,"SFMono-Regular",monospace;
   font-feature-settings:"tnum" 1;letter-spacing:.01em;font-weight:400}

/* ── 文字の階段（タグではなくクラスで当てる） ───────────────────── */
.t-mega{font-family:"Fraunces","Zen Old Mincho",serif;font-optical-sizing:auto;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 1;font-weight:700;
  font-size:var(--t-mega);line-height:.9;letter-spacing:-.045em;margin:0}
.t-huge{font-family:"Fraunces","Zen Old Mincho",serif;
  font-variation-settings:"opsz" 120,"SOFT" 10,"WONK" 0;font-weight:600;
  font-size:var(--t-huge);line-height:.96;letter-spacing:-.035em;margin:0}
.t-h1{font-family:"Fraunces","Zen Old Mincho",serif;
  font-variation-settings:"opsz" 72,"SOFT" 20,"WONK" 0;font-weight:600;
  font-size:var(--t-h1);line-height:1.06;letter-spacing:-.028em;margin:0}
.t-h2{font-family:"Fraunces","Zen Old Mincho",serif;
  font-variation-settings:"opsz" 40,"SOFT" 30,"WONK" 0;font-weight:600;
  font-size:var(--t-h2);line-height:1.18;letter-spacing:-.02em;margin:0}
.t-h3{font-family:"Fraunces","Zen Old Mincho",serif;font-weight:700;
  font-size:var(--t-h3);line-height:1.26;letter-spacing:-.008em;margin:0}
.t-lede{font-family:"Fraunces","Noto Sans JP",sans-serif;font-weight:400;
  font-size:var(--t-lede);line-height:1.62;letter-spacing:.01em;margin:0}
.t-body{font-family:"Fraunces","Noto Sans JP",sans-serif;font-weight:400;
  font-size:var(--t-body);line-height:1.88;letter-spacing:.02em;margin:0}
.t-label{font-family:"DM Mono","Noto Sans JP",monospace;font-weight:400;
  font-size:var(--t-label);line-height:1.42;letter-spacing:.18em;
  text-transform:uppercase;margin:0}
.t-label--wa{font-family:"Noto Sans JP",sans-serif;text-transform:none;letter-spacing:.14em}

/* 見出しは意味のかたまりで折る（和文はどこでも折れてしまうので、折れない箱にして並べる） */
.ph{white-space:nowrap}

/* 色の持ち場 */
.iro-akebono{color:var(--accent-akebono)}
.iro-fuji{color:var(--accent-fuji)}
.iro-usui{color:color-mix(in srgb, var(--g-5) var(--o-4), transparent)}
.kura .iro-usui{color:color-mix(in srgb, var(--g-1) var(--o-4), transparent)}

/* ── 章の面。章の切り替わりは、線ではなく地の色で示す ──────────── */
.band{position:relative;padding-block:var(--s7);overflow-x:clip}
/* overflow-x:clip は「はみ出しを切るが、スクロールの器は作らない」。
   hidden にすると、中の position:sticky（記事の左レール）が効かなくなる。 */
.band--suna{background:var(--face-suna)}
.band--suna::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--tsubu);background-size:180px 180px;opacity:.5;mix-blend-mode:multiply}
.band--sunafukai{background:
  radial-gradient(120% 80% at 8% 0%, color-mix(in srgb, var(--face-suna) var(--o-5), transparent) 0%, transparent 62%),
  var(--face-suna-fukai)}
.band--ai{background:
  radial-gradient(90% 120% at 88% 8%, color-mix(in srgb, var(--accent-fuji) var(--o-2), transparent) 0%, transparent 58%),
  radial-gradient(70% 90% at 6% 96%, color-mix(in srgb, var(--accent-akebono) var(--o-1), transparent) 0%, transparent 62%),
  var(--face-ai);
  color:var(--g-1)}
.band--ai::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--tsubu);background-size:200px 200px;opacity:.28}
.kura{color:var(--g-1)}

.wrap{width:min(1320px, calc(100% - var(--s4) * 2));margin-inline:auto;position:relative;z-index:1}

/* ── 見開き（この帳面のレイアウト原理）─────────────────────────
   画面を左右にずらした2つの版面。章ごとに左右が入れ替わる。 */
.spread{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--s6) var(--s5);align-items:start}
.spread--gyaku{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.spread--hosoi{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}
@media (max-width:900px){
  .spread,.spread--gyaku,.spread--hosoi{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
}

/* ── 頭（面の上を通るので、地の色に合わせて自動で反転する）───────── */
.head{position:fixed;inset-block-start:0;inset-inline:0;z-index:40;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s3);
  padding:var(--s2) var(--s4);mix-blend-mode:difference;color:var(--g-1);
  isolation:auto;pointer-events:none}
.head a{pointer-events:auto;text-decoration:none}
.head__mark{font-family:"Fraunces",serif;font-variation-settings:"opsz" 40;
  font-weight:700;font-size:20px;letter-spacing:-.03em;line-height:1}
.head__nav{display:flex;gap:var(--s3);justify-content:flex-end;flex-wrap:wrap}
.head__nav a{position:relative}
.head__nav a::after{content:"";position:absolute;inset-block-end:-4px;inset-inline:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-ugoki) var(--ease-modoru)}
.head__nav a:hover::after,.head__nav a:focus-visible::after{transform:scaleX(1);transform-origin:left;
  transition-timing-function:var(--ease-deru)}
@media (max-width:700px){.head{grid-template-columns:auto 1fr}.head__nav{display:none}}

/* 読書の進み具合（JSを1行も使わない） */
.progress{position:fixed;inset-block-start:0;inset-inline:0;height:2px;z-index:50;
  background:var(--accent-akebono);transform-origin:left;transform:scaleX(0)}
@supports (animation-timeline:scroll(root)){
  .progress{animation:michiru 1s var(--ease-shinkou);animation-timeline:scroll(root)}
}

/* ── ファーストビュー ───────────────────────────────────────── */
.fv{position:relative;min-height:calc(100 * var(--stable-lvh));
  display:grid;grid-template-rows:1fr auto;overflow:hidden;background:var(--face-ai)}
.fv__shashin{position:absolute;inset:-6% 0 -6% 0;z-index:0}
.fv__shashin img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.88) contrast(1.06) brightness(.74)}
.fv__maku{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
   linear-gradient(180deg, color-mix(in srgb, var(--face-ai-fukai) var(--o-4), transparent) 0%, transparent 34%,
     transparent 52%, color-mix(in srgb, var(--face-ai-fukai) var(--o-5), transparent) 100%)}
.fv__naka{position:relative;z-index:2;align-self:end;width:min(1320px, calc(100% - var(--s4) * 2));
  margin-inline:auto;padding-block-end:var(--s5)}
.fv__mega{color:var(--g-1);margin-inline-start:-.06em;
  clip-path:inset(0 0 0 0);}
.fv__mega .ji{display:inline-block;transform:translateY(115%);}
.fv__shita{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:var(--s3) var(--s5);align-items:end;margin-block-start:var(--s3)}
@media (max-width:760px){.fv__shita{grid-template-columns:minmax(0,1fr)}}
.fv__teigi{color:var(--g-1);max-width:var(--hon)}
.fv__meta{color:color-mix(in srgb, var(--g-1) var(--o-4), transparent);
  display:flex;flex-direction:column;gap:var(--s1)}
.fv__arch{position:absolute;z-index:2;inset-block-start:var(--s7);inset-inline-end:var(--s5);
  width:min(24vw,272px);aspect-ratio:3/4.2;overflow:hidden;
  border-radius:50% 50% 0 0 / 34% 34% 0 0;
  -webkit-mask-image:linear-gradient(180deg, color-mix(in srgb, var(--g-5) 100%, transparent) 0 46%, transparent 100%);
  mask-image:linear-gradient(180deg, color-mix(in srgb, var(--g-5) 100%, transparent) 0 46%, transparent 100%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.fv__arch img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.9)}
@media (max-width:900px){.fv__arch{display:none}}

/* 出発案内の帯（横に流れる。端はマスクで溶かす） */
.nagare{position:relative;overflow:hidden;padding-block:var(--s2);
  border-block-start:1px solid color-mix(in srgb, var(--g-1) var(--o-2), transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--g-5) 100%, transparent) 8%, color-mix(in srgb, var(--g-5) 100%, transparent) 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--g-5) 100%, transparent) 8%, color-mix(in srgb, var(--g-5) 100%, transparent) 92%, transparent 100%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.nagare__retsu{display:flex;gap:var(--s5);width:max-content;
  animation:nagareru 42s infinite;animation-timing-function:var(--ease-men)}
.nagare__tan{display:flex;gap:var(--s5);align-items:center;white-space:nowrap}
.nagare__ten{width:7px;height:7px;border-radius:50%;background:var(--accent-akebono)}

/* ── 索引（記事の一覧）。形は1種類にしない ───────────────────── */
/* 索引は、左に留まる章の柱と、右を流れていくカードの2つでできている */
.sakuin-kumi{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);
  gap:var(--s6) var(--s5);align-items:start}
.hashira{position:sticky;inset-block-start:var(--s6);display:grid;gap:var(--s3);justify-items:start}
@media (max-width:900px){
  .sakuin-kumi{grid-template-columns:minmax(0,1fr)}
  .hashira{position:static}
}
.sakuin{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--s5) var(--s4);
  align-items:start}
.koma{grid-column:span 3;display:grid;gap:var(--s2);text-decoration:none;position:relative}
.koma--oki{grid-column:span 5}
.koma--yoko{grid-column:span 5;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--s3);align-items:center}
.koma--hosoi{grid-column:span 4;grid-template-columns:minmax(0,1fr);gap:var(--s2);
  border-inline-start:1px solid color-mix(in srgb, var(--g-1) var(--o-2), transparent);
  padding-inline-start:var(--s3)}
@media (max-width:900px){
  .koma,.koma--oki,.koma--hosoi,.koma--yoko{grid-column:span 8}
  .koma--yoko{grid-template-columns:minmax(0,1fr)}
}
.koma__e{position:relative;overflow:hidden;background:var(--face-suna-fukai)}
.koma__e img{width:100%;aspect-ratio:16/10;object-fit:cover;
  transform:scale(1.04);transition:transform var(--t-men) var(--ease-men),filter var(--t-men) var(--ease-men);
  filter:saturate(.92)}
.koma--oki .koma__e img{aspect-ratio:16/9}
.koma--yoko .koma__e img{aspect-ratio:4/3}
.koma:hover .koma__e img,.koma:focus-visible .koma__e img{transform:scale(1);filter:saturate(1.04)}
.koma__e--maru{border-radius:50%}
.koma__e--maru img{aspect-ratio:1/1}
.koma__ban{font-family:"DM Mono",monospace;font-size:var(--t-label);letter-spacing:.2em;
  color:var(--accent-akebono)}
.koma__mi{transition:color var(--t-iro) var(--ease-deru)}
.koma:hover .koma__mi{color:var(--accent-akebono)}
.koma__sub{color:color-mix(in srgb, var(--g-5) var(--o-4), transparent)}
.kura .koma__sub{color:color-mix(in srgb, var(--g-1) var(--o-4), transparent)}

/* 章の入口：番号を大きな円で置き、写真を画面の端から外へ出す */
.shou{position:relative}
.shou__maru{width:min(24vw,212px);aspect-ratio:1/1;border-radius:50%;
  display:grid;place-items:center;background:var(--accent-akebono);color:var(--face-suna)}
.hamidashi{width:calc(100% + 12vw);max-width:none;margin-inline-end:-12vw}
.kasane .koma__e.hamidashi img{width:100%;aspect-ratio:16/10;object-fit:cover}
.hamidashi--hidari{margin-inline-start:-12vw;margin-inline-end:0}
@media (max-width:900px){.hamidashi,.hamidashi--hidari{width:100%;margin-inline:0}}

/* 斜めに切った写真（四角以外の形をひとつ） */
.naname{clip-path:polygon(0 0, 100% 5.5%, 100% 100%, 0 94.5%)}

/* 文字と写真を重ねる */
.kasane{position:relative;display:grid}
.kasane>*{grid-area:1/1}
.kasane__ji{align-self:end;justify-self:start;padding:var(--s4);
  color:var(--g-1);mix-blend-mode:normal;text-shadow:none}

/* ── 記事ページ ─────────────────────────────────────────────── */
.kiji{display:grid;grid-template-columns:minmax(0,22vw) minmax(0,var(--hon)) minmax(0,1fr);
  gap:var(--s5);align-items:start}
@media (max-width:1100px){.kiji{grid-template-columns:minmax(0,1fr)}}
.kiji__reru{position:sticky;inset-block-start:var(--s6);display:grid;gap:var(--s3)}
@media (max-width:1100px){.kiji__reru{position:static}}
.kiji__hon{max-width:var(--hon)}
.kiji__hon>*+*{margin-block-start:var(--s3)}
.kiji__hon .t-h2{margin-block-start:var(--s6)}
.kiji__hon .t-h3{margin-block-start:var(--s5)}
.kiji__hon .t-h2+.t-body,.kiji__hon .t-h3+.t-body{margin-block-start:var(--s2)}

.deki{padding:var(--s3) 0 var(--s3) var(--s3);
  border-inline-start:2px solid var(--accent-fuji);
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent-fuji) var(--o-1), transparent), transparent 72%)}
.deki .t-label{color:var(--accent-fuji)}
.chui{padding:var(--s3);border-inline-start:2px solid var(--warn-beni);
  background:linear-gradient(90deg, color-mix(in srgb, var(--warn-beni) var(--o-1), transparent), transparent 72%)}
.chui .t-label{color:var(--warn-beni)}
.genbun{padding:var(--s4);background:var(--face-suna-fukai);
  font-family:"Fraunces","Zen Old Mincho",serif;line-height:1.82}
.kura .genbun{background:color-mix(in srgb, var(--g-1) var(--o-1), transparent)}

.hako{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2)}
.hako li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2);align-items:baseline}
.hako li::before{content:"";width:10px;height:2px;background:var(--accent-akebono);
  transform:translateY(-.35em)}

/* 表。罫は1本だけ。地も影も角丸も付けない */
.hyou{width:100%;border-collapse:collapse;font-size:var(--t-body)}
.hyou th,.hyou td{padding:var(--s2) var(--s2) var(--s2) 0;text-align:start;vertical-align:top;
  border-block-end:1px solid var(--line-usui)}
.hyou thead th{font-family:"DM Mono","Noto Sans JP",monospace;font-size:var(--t-label);
  letter-spacing:.14em;color:color-mix(in srgb, var(--g-5) var(--o-4), transparent);
  border-block-end:1px solid var(--line-koi)}
.kura .hyou thead th{color:color-mix(in srgb, var(--g-1) var(--o-4), transparent)}
.hyou__yoko{overflow-x:auto;
  -webkit-mask-image:linear-gradient(90deg, color-mix(in srgb, var(--g-5) 100%, transparent) 92%, transparent 100%);
  mask-image:linear-gradient(90deg, color-mix(in srgb, var(--g-5) 100%, transparent) 92%, transparent 100%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* 図 */
.zu{margin:0;display:grid;gap:var(--s2)}
.zu svg{width:100%;height:auto;display:block}
.zu__cap{font-family:"Noto Sans JP",sans-serif;font-size:var(--t-label);line-height:1.42;
  letter-spacing:.06em;text-transform:none;
  color:color-mix(in srgb, var(--g-5) var(--o-4), transparent)}
.kura .zu__cap{color:color-mix(in srgb, var(--g-1) var(--o-4), transparent)}

/* 分数のページ送り */
.bunsuu{font-family:"DM Mono",monospace;font-size:var(--t-label);letter-spacing:.2em}

/* 出どころ一覧 */
.deto{display:grid;gap:var(--s3)}
.deto__gyo{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s2) var(--s3);
  padding-block-end:var(--s2);border-block-end:1px solid var(--line-usui)}
@media (max-width:700px){.deto__gyo{grid-template-columns:minmax(0,1fr)}}
.deto__gyo a{word-break:break-all}

/* 連絡先の形（ブランド色とは別の名前空間） */
.tegami{display:grid;gap:var(--s3);max-width:var(--hon)}
.tegami label{display:grid;gap:var(--s1)}
.tegami input,.tegami textarea{
  font-family:"Fraunces","Noto Sans JP",sans-serif;font-size:var(--t-body);
  padding:var(--s2);background:var(--form-face);color:var(--form-ink);
  border:1px solid var(--form-line);border-radius:0;
  transition:border-color var(--t-iro) var(--ease-deru)}
.tegami input:focus-visible,.tegami textarea:focus-visible{outline:2px solid var(--accent-akebono);outline-offset:2px}
.botan{display:inline-grid;grid-auto-flow:column;gap:var(--s1);align-items:center;justify-self:start;
  padding:var(--s2) var(--s4);background:var(--form-face);color:var(--form-ink);
  border:1px solid var(--form-line);text-decoration:none;font-size:var(--t-label);letter-spacing:.16em;
  font-family:"DM Mono",monospace;
  transition:background var(--t-iro) var(--ease-deru),transform var(--t-ugoki) var(--ease-nami)}
.botan:hover,.botan:focus-visible{background:var(--form-hover);transform:translateY(-2px)}

/* ── フッター ───────────────────────────────────────────────── */
.ashi{background:var(--face-ai-fukai);color:var(--g-1);padding-block:var(--s6) var(--s5);position:relative}
.ashi::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--tsubu);background-size:220px 220px;opacity:.22}
.ashi__uchi{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);
  gap:var(--s5) var(--s4)}
@media (max-width:900px){.ashi__uchi{grid-template-columns:minmax(0,1fr)}}
.ashi a{text-decoration:none;
  color:color-mix(in srgb, var(--g-1) var(--o-5), transparent);
  transition:color var(--t-iro) var(--ease-deru)}
.ashi a:hover,.ashi a:focus-visible{color:var(--accent-akebono)}
.ashi__retsu{display:grid;gap:var(--s1);list-style:none;padding:0;margin:0}

/* ── 出てくる仕掛け（最終状態を書き換えずに測れるように、素のままで始める）─ */
[data-rv]{opacity:0}
[data-rv="hiraku"]{clip-path:inset(0 100% 0 0);transition:clip-path var(--t-nyujo) var(--ease-men),opacity var(--t-men) var(--ease-deru)}
[data-rv="seri"]{transform:translateY(28px);transition:transform var(--t-nyujo) var(--ease-deru),opacity var(--t-men) var(--ease-deru)}
[data-rv="zure"]{transform:translateY(52px) scale(.985);transition:transform var(--t-nyujo) var(--ease-deru),opacity var(--t-men) var(--ease-deru)}
[data-rv][data-in="1"]{opacity:1}
/* 開いたあとは、右に20vw ぶん余裕を持たせて切る。
   inset(0 0 0 0) にすると、端から外へはみ出す写真がここで切られてしまう。 */
[data-rv="hiraku"][data-in="1"]{clip-path:inset(0 -20vw 0 0)}
[data-rv="seri"][data-in="1"],[data-rv="zure"][data-in="1"]{transform:none}
[data-rv] .ji{display:inline-block;transform:translateY(112%);
  transition:transform var(--t-nyujo) var(--ease-deru)}
[data-rv][data-in="1"] .ji{transform:none}
.fv__mega[data-in="1"] .ji{transform:none}

/* 数値の図。到達したら満ちる */
.bou{transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-nyujo) var(--ease-men)}
[data-in="1"] .bou{transform:scaleX(1)}
.wa{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.35s var(--ease-men)}
[data-in="1"] .wa{stroke-dashoffset:calc(var(--len) * (1 - var(--wari)))}
.sen{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.5s var(--ease-men)}
[data-in="1"] .sen{stroke-dashoffset:0}
.kazu{display:inline-block}
[data-in="1"] .kazu{animation:kazoeru .9s 1;animation-timing-function:var(--ease-nami)}

/* 視差（地と手前で速さを変える） */
.shisa{will-change:transform}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .shisa{animation:zureru 1s var(--ease-shinkou) both;animation-timeline:view();animation-range:entry 0% exit 100%}
  }
}

/* ── 動きの語彙（6本）─────────────────────────────────────────
   ① ひらく（帯が抜けて出る）② せりあがる ③ ずれる（視差）
   ④ ひかれる（線が引かれる）⑤ みちる（棒・輪が満ちる）⑥ ながれる（横に流れる）
   使い回しているので、思いつきの動きは無い。
   無限に走り続けるのは「ながれる」の1本だけ（R-17）。 */
@keyframes hiraku{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -20vw 0 0)}}
@keyframes seriagaru{from{transform:translateY(112%)}to{transform:none}}
@keyframes zureru{from{transform:translateY(-6%)}to{transform:translateY(6%)}}
@keyframes hikareru{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@keyframes michiru{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes nagareru{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes kazoeru{0%{transform:translateY(.28em)}100%{transform:none}}

/* ── 動きを止めたい人には、動き終わった状態で見せる ────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;
    animation-iteration-count:1 !important;scroll-behavior:auto !important}
  [data-rv]{opacity:1 !important;clip-path:none !important;transform:none !important}
  [data-rv] .ji,.fv__mega .ji{transform:none !important}
  .bou{transform:scaleX(1) !important}
  .wa{stroke-dashoffset:calc(var(--len) * (1 - var(--wari))) !important}
  .sen{stroke-dashoffset:0 !important}
  .nagare__retsu{animation:none !important}
  .progress{transform:scaleX(0) !important}
}

/* ── 紙に出しても崩れない ───────────────────────────────────── */
@media print{
  .head,.progress,.nagare,.fv__arch{display:none}
  body{background:var(--face-suna);color:var(--g-5);font-size:11pt;line-height:1.7}
  .band{padding-block:14pt;background:var(--face-suna) !important;color:var(--g-5) !important}
  .band--ai{color:var(--g-5) !important}
  .kiji{grid-template-columns:minmax(0,1fr)}
  [data-rv]{opacity:1 !important;clip-path:none !important;transform:none !important}
  .bou{transform:scaleX(1) !important}
  a::after{content:" (" attr(href) ")";font-size:8pt;word-break:break-all}
  .fv{min-height:auto}
}

/* 目が見えない人のための、読み飛ばし用リンク */
.tobasu{position:absolute;inset-block-start:-100px;inset-inline-start:var(--s2);z-index:60;
  padding:var(--s1) var(--s3);background:var(--form-face);color:var(--form-ink);text-decoration:none;
  transition:inset-block-start var(--t-ugoki) var(--ease-deru)}
.tobasu:focus{inset-block-start:var(--s1)}

/* ── 数値の図 ───────────────────────────────────────────────────
   文字はHTML側に置いてある。SVGの中に入れると、狭い画面で6pxまで縮むため。 */
.bou-hyou{display:grid;gap:var(--s2)}
.bou-gyo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,9fr) auto;
  gap:var(--s2) var(--s3);align-items:center}
@media (max-width:640px){.bou-gyo{grid-template-columns:minmax(0,1fr) auto;}
  .bou-mi{grid-column:1 / -1;order:3}}
.bou-na{font-family:"Noto Sans JP",sans-serif;font-size:var(--t-label);line-height:1.42;
  letter-spacing:.06em;text-transform:none}
.bou-mi{position:relative;height:16px;
  background:color-mix(in srgb, var(--g-4) var(--o-1), transparent)}
.kura .bou-mi{background:color-mix(in srgb, var(--g-1) var(--o-1), transparent)}
.bou{position:absolute;inset-block:0;inset-inline-start:0;width:var(--w);
  background:var(--accent-akebono)}
.bou--fuji{background:var(--accent-fuji)}
.bou--sumi{background:color-mix(in srgb, var(--g-4) var(--o-4), transparent)}
.kura .bou--sumi{background:color-mix(in srgb, var(--g-1) var(--o-4), transparent)}
.bou--beni{background:var(--warn-beni)}
.bou-atai{font-family:"DM Mono",monospace;font-size:var(--t-label);letter-spacing:.06em;
  text-align:end;white-space:nowrap}

/* 実寸で比べる面（容器と袋） */
.jissun{display:grid;grid-template-columns:auto auto;gap:var(--s4);align-items:end;
  justify-content:start;padding:var(--s4);background:var(--face-suna-fukai)}
.kura .jissun{background:color-mix(in srgb, var(--g-1) var(--o-1), transparent)}
.jissun__mono{display:grid;gap:var(--s1);justify-items:center}
.jissun__fukuro{width:clamp(150px,44vw,207px);height:clamp(133px,39vw,183px);
  border:2px solid var(--accent-fuji);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent-fuji) var(--o-1), transparent) 0 6px, transparent 6px 12px),
    color-mix(in srgb, var(--accent-fuji) var(--o-1), transparent);
  display:grid;place-items:center}
.jissun__bin{width:clamp(30px,9vw,42px);height:clamp(66px,20vw,94px);
  background:var(--accent-akebono);border-radius:4px 4px 2px 2px;position:relative}
.jissun__bin::before{content:"";position:absolute;inset-block-start:-9px;inset-inline-start:50%;
  transform:translateX(-50%);width:38%;height:9px;
  background:color-mix(in srgb, var(--accent-akebono) var(--o-5), transparent)}
.jissun__fuda{font-family:"DM Mono",monospace;font-size:var(--t-label);letter-spacing:.08em}

/* 輪（ドーナツ） */
.wa-kumi{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);align-items:center}
@media (max-width:640px){.wa-kumi{grid-template-columns:minmax(0,1fr)}}
.wa-zu{width:clamp(128px,26vw,168px);aspect-ratio:1/1}

/* 4段の帯 */
.dan{display:grid;gap:2px}
.dan__gyo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);
  align-items:center;padding:var(--s2) var(--s3);
  background:color-mix(in srgb, var(--g-4) var(--o-1), transparent)}
.kura .dan__gyo{background:color-mix(in srgb, var(--g-1) var(--o-1), transparent)}
.dan__ban{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-family:"DM Mono",monospace;font-size:var(--t-label);color:var(--face-suna);
  background:var(--accent-fuji)}
.dan__gyo--2 .dan__ban{background:color-mix(in srgb, var(--accent-fuji) var(--o-5), var(--accent-akebono))}
.dan__gyo--3 .dan__ban{background:var(--accent-akebono)}
.dan__gyo--4 .dan__ban{background:var(--warn-beni)}

/* 出どころの短い一覧（名前だけ・2列） */
.deto-mijikai{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s1) var(--s4)}
@media (max-width:760px){.deto-mijikai{grid-template-columns:minmax(0,1fr)}}
.deto-mijikai li{padding-block:var(--s1);border-block-end:1px solid var(--line-usui)}
.deto-mijikai a{text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--t-ugoki) var(--ease-deru)}
.deto-mijikai a:hover,.deto-mijikai a:focus-visible{background-size:100% 1px}

/* 記事ページの右のはしら（頁数と行き先だけ） */
.kiji__migi{position:sticky;inset-block-start:var(--s6);display:grid;
  justify-items:start;border-inline-start:1px solid var(--line-usui);padding-inline-start:var(--s3)}
.kiji__migi a{text-decoration:none;
  background-image:linear-gradient(var(--accent-akebono),var(--accent-akebono));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--t-ugoki) var(--ease-modoru),color var(--t-iro) var(--ease-deru)}
.kiji__migi a:hover,.kiji__migi a:focus-visible{background-size:0% 1px;color:var(--accent-akebono)}
@media (max-width:1100px){.kiji__migi{position:static;border-inline-start:0;padding-inline-start:0;
  border-block-start:1px solid var(--line-usui);padding-block-start:var(--s3)}}