/* ============================================================================
   ぽんつか トップ ── 明朝・縦組み・アイコンが主役の案
   src/_lp/home-e/home-e.css
   ----------------------------------------------------------------------------
   読み込み順は tokens.css → shell.css → themes.css → このファイル。

   【この案の決め】
   ① 表題は **Shippori Mincho 600**（base.njk が最初から読んでいる）。
      本文は Zen Kaku Gothic New のまま。**読む字は変えない。**
   ② 名のりは **縦組み**（writing-mode: vertical-rl）。
   ③ アプリは **1本ずつ画面を占有**（position: sticky で重なる）。
      地の色は icons.json の bg ＝ **そのアプリ自身の色**。
   ④ 常時ループ **0本**。動くものは全部スクロール連動か sticky。**JS 0行。**
   ========================================================================== */


/* ═══ §1  トークン ════════════════════════════════════════════════════════ */
.he{
  /* ★★ 2026-08-31: **白ベースへ**（Ryo さん「今更ですが、背景は白ベース
     にしたい」＝サイト全部）。2026-08-17 からの «黒で統一» をやめる。
     ★ 明暗の設定で切り替えない。«白で統一» なので、暗モードで黒くなると
       指示と食い違う。ここは固定する。
     ★ 値は tokens.css §2 と同じ組（黒へ倒す前に配信していたもの）。
       新しい地の色は作っていない。
     ★ 縦組みの名のりも明朝もそのまま。**地の色の話であって、
       組み方の話ではない。**

     実測 … #101010 17.15:1 ／ #4A4A4A 7.99:1 ／ #656565 5.25:1 */
  --he-ink   : #F3F3F3;   /* 地 */
  --he-panel : #FFFFFF;   /* 少しだけ持ち上げた面（日記の地） */
  --he-fg    : #101010;
  --he-fg-2  : #4A4A4A;
  --he-fg-3  : #656565;
  --he-line  : rgba(16,16,16,.12);

  --he-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --he-gut   : clamp(20px, 5vw, 56px);
  --he-max   : 1240px;

  background: var(--he-ink);
  color: var(--he-fg);
}

/* --- 粒子。平面に紙の目を与える。★これが «無地の黒» との差になる ------- */
.he-grain{
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  z-index: 40;
  pointer-events: none;
  /* ★ 白で固定したので、粒子も **明地向け（multiply）** で固定する。
     screen のままだと、白い地の上では «明るくする» 合成になって
     **何も起きない**（粒が丸ごと消える）。 */
  opacity: .07;
  mix-blend-mode: multiply;
}


/* ═══ §1b  浮いている目次 ═══════════════════════════════════════════════
   ★★ 2026-08-17（作り直し3回目）。Ryo さんのスクリーンショットで
     **ラベルが互いに重なっている** のを確認した。原因:
       ・ラベルを **縦組みのまま** 8px の点に絶対配置していた
       ・縦組みの「アプリ一覧」は縦に約80px。点の間隔は約24px しかない
       → 隣のラベルの上に重なる。
     ★ 直し: **ラベルは横組み**にする（Ryo さん「文字は横で」）。
       横組みなら1行 ≒ 16px なので、点の間隔に収まる。
   ★ あわせて全体を大きくした（「小さくて気づかない」）。
       点 8 → 11px ／ 字 11.5 → 13.5px ／ 間隔 も広げた */
.he-toc{
  position: fixed;
  z-index: 50;
  inset-inline-end: clamp(14px, 2vw, 26px);
  inset-block-start: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.he-toc ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 30px);   /* ★広げた */
  align-items: flex-end;
}
.he-toc a{
  pointer-events: auto;
  position: relative;
  display: block;
  inline-size: 11px;             /* ★大きく */
  block-size: 11px;
  /* ★ 白地では .42 だと 14px のラベルが 2.75:1（AA 割れ）。
     黒地の .5 と «見た目の薄さ» は同じでも、白地は下限が違う。 */
  color: rgba(16,16,16,.66);
}
.he-toc a::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid currentColor;
}
.he-toc a[data-here]{ color: #0A0A0A; }
.he-toc a[data-here]::after{
  background: currentColor;
  /* いま居る点は少し大きく。目で追える印にする。 */
  inset: -3px;
}

/* ★ ラベルは **横組み**。点の左に置く（内側へ伸ばすので溢れない）。 */
.he-toc span{
  position: absolute;
  inset-inline-end: 22px;
  inset-block-start: 50%;
  translate: 0 -50%;
  font-family: var(--he-mincho);
  font-size: 13.5px;            /* ★大きく */
  font-weight: 600;
  letter-spacing: .12em;
  white-space: nowrap;
  color: inherit;
  /* ★★ 2026-08-17: **常に出す**（Ryo さん「丸だけだと気づかない」）。
     ホバーで出す作りをやめた。気づかれない案内は無いのと同じ。 */
}

@media (hover: hover) and (pointer: fine){
  .he-toc a{ transition: color var(--dur-1, .2s) var(--ease, ease); }
  .he-toc a:hover{ color: #0A0A0A; }
}
/* ★ 狭い画面だけ点だけにする（ホバーの有無ではなく **幅** で決める）。
   ラベルは «アプリ一覧» で約70px。右端に70px 取ると、720px 未満では
   輪の中の説明と重なる。重なるくらいなら点だけのほうがまし。
   ★ ラベルは display:none でも DOM に残るので、読み上げでは読める。 */
@media (max-width: 719px){
  .he-toc span{ display: none; }
}
@media print{ .he-toc{ display: none !important; } }


/* ═══ §2  名のり ══════════════════════════════════════════════════════════ */

.he-hero{
  position: relative;
  min-block-size: 100svh;
  overflow: clip;
  background: var(--he-ink);
  color: #101010;
  display: flex;
  align-items: center;
}

/* --- アイコンの壁 --------------------------------------------------------
   ★ 4列。列ごとに違う速さでスクロールに連動して流れる（視差）。
   ★ **時計で動かさない。**animation-timeline: scroll() なので、
     描かれていないタブで止まる問題が起きない。対応していないブラウザでは
     @supports ごと無視されて、ただの静止した壁になる（それでも成立する絵）。 */
.he-wall{
  position: absolute;
  inset: -12% -4%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.6vw, 22px);
  z-index: 0;
  /* ★ 壁は «地» なので、主役の字より弱くする。ここを上げると読めなくなる。 */
  opacity: .30;
  filter: saturate(.85);
  pointer-events: none;
}


.he-wall__c{
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vw, 22px);
  /* 列ごとに開始位置をずらす。ずらさないと4列が横一線に揃って «表» に見える。 */
  transform: translateY(calc(var(--c) * -9%));
}
.he-wall__c img{
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 22.5%;
}

/* ★ 壁は **2つの動きを重ねる**。
     1. ゆっくり流れつづける（常時ループ・スクロールしていなくても動く）
     2. スクロールに連動して列ごとに違う量ずれる（視差）
   ★ 1つの要素に2つのアニメーションを載せると transform を取り合うので、
     入れ子にして分担する: 外(.he-wall__c)が視差、内(.he-wall__f)が流れ。
   ★ Ryo さん「背景に薄くアイコンが並んでいるのはいい感じ。アニメーションが
     ほしい」(2026-08-17)。前の版はスクロール連動だけで、指を止めると
     完全に静止していた。 */
.he-wall__f{
  display: flex;
  flex-direction: column;
  gap: inherit;
}
html.js .he-wall__f{
  animation: he-float var(--sp, 90s) linear infinite;
}
.he-wall__c:nth-child(1) .he-wall__f{ --sp: 86s; }
.he-wall__c:nth-child(2) .he-wall__f{ --sp: 112s; animation-direction: reverse; }
.he-wall__c:nth-child(3) .he-wall__f{ --sp: 74s; }
.he-wall__c:nth-child(4) .he-wall__f{ --sp: 128s; animation-direction: reverse; }
@keyframes he-float{
  from{ transform: translateY(0); }
  to  { transform: translateY(-50%); }   /* 内側に2周ぶん積んである */
}

/* ★ 視差は **JS が書く --q（-1〜1）** で動かす。
   ★★ 最初は animation-timeline: scroll() で書いたが、**この環境では
     一度も動かなかった**（timeline は出来ているのに currentTime が常に null）。
     «仕様上は正しいが自分で確かめられないもの» に頼るのをやめ、
     Dipsy と同じく «スクロール量から transform を直接書く» 形にした。
     詳しくは home-e.js の冒頭。 */
.hd-scrolljs .he-wall__c{
  transform: translateY(calc(var(--c) * -9% + var(--q, 0) * var(--d, 0%)));
}
.he-wall__c:nth-child(1){ --d: -46%; }
.he-wall__c:nth-child(2){ --d:  34%; }
.he-wall__c:nth-child(3){ --d: -62%; }
.he-wall__c:nth-child(4){ --d:  26%; }

/* 壁の上に幕。字が読める濃さまで落とす。
   ★★ 2026-08-31 «白ベース»。幕は **地の色** で敷くもので、黒地のときは
     rgba(11,11,11,…) だった。白地でそのまま置くと、白い地の上に
     **黒い幕が残って名のりが読めない**（実測でそうなっていた）。
     幕を白へ裏返す。濃さ（α）は1つも変えていない ――
     «壁をどれだけ沈めるか» の値なので、地の明暗とは別の話。 */
.he-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 78% 50%, rgba(243,243,243,.30) 0%, rgba(243,243,243,.86) 62%),
    linear-gradient(180deg, rgba(243,243,243,.55), rgba(243,243,243,.72));
}

.he-hero__in{
  position: relative;
  z-index: 2;
  inline-size: 100%;
  max-inline-size: var(--he-max);
  margin-inline: auto;
  padding-inline: var(--he-gut);
  padding-block: clamp(90px, 14vh, 150px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 64px);
}

/* ★★ 2026-08-30: **目次の場所を空ける。**
   浮いている目次（.he-toc）は右端に固定で、ラベルが内側へ
   約 130px 伸びる。一方で名のり（.he-say）は縦組みで右端に居るので、
   **ラベルが見出しの上に重なっていた**。実測（2026-08-30）:
       1440px … 5px 重なり ／ 1280px … 85px ／ 1024px … 97px ／ 820px … 103px
   ★ 目次のラベルは 720px 未満では display:none なので、ここも 720px 以上だけ。
   ★ 式の意味: «窓の右端から 190px は必ず空ける»。
     器は max-inline-size で中央寄せなので、広い窓ではもう余っている分
     （(100vw - 器の幅)/2）を引いて、足りない分だけを padding で足す。
     広い窓で余分に寄せないための式。 */
@media (min-width: 720px){
  .he-hero__in{
    padding-inline-end: max(
      var(--he-gut),
      calc(190px - (100vw - min(100vw, var(--he-max))) / 2)
    );
  }
}

/* --- ★② 縦組みの表題 ---------------------------------------------------
   ★ 横組みだらけの中に1本だけ縦が通ると、既製品の顔でなくなる。
   ★ 明朝でしか成立しない。ゴシックの縦組みは «注意書き» に見える。 */
.he-say{
  order: 2;
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--he-mincho);
  font-size: clamp(21px, 3.1vw, 40px);
  font-weight: 600;
  line-height: 1.62;
  letter-spacing: .12em;
  color: #101010;
  max-block-size: 76svh;
  text-orientation: upright;   /* 数字が無いので upright で統一できる */
}

.he-name{
  order: 1;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.he-name__ja{
  font-family: var(--he-mincho);
  font-size: clamp(26px, 3.6vw, 46px);
  font-weight: 600;
  letter-spacing: .18em;
  color: #101010;
}
.he-name__en{
  font-size: 11px;
  letter-spacing: .46em;
  color: rgba(16,16,16,.68);
}

/* SCROLL の細い柱。★これも縦組み。 */
.he-scroll{
  position: absolute;
  z-index: 2;
  inset-block-end: clamp(18px, 4vh, 40px);
  inset-inline-start: var(--he-gut);
  margin: 0;
  writing-mode: vertical-rl;
  font-size: 10px;
  letter-spacing: .5em;
  color: rgba(16,16,16,.58);
}
.he-scroll span{ display: block; padding-block-end: 46px; position: relative; }
.he-scroll span::after{
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  inline-size: 1px;
  block-size: 38px;
  background: linear-gradient(rgba(16,16,16,.55), transparent);
}


/* ═══ §3  一覧 ── 円周に並べて回す ═══════════════════════════════════════
   ★ 素の状態（JS 無し）は **縦に並んだただの一覧**。円にするのは
     .hd-scrolljs が付いたときだけ。«動かないと読めない» を作らない。 */

.he-ring{ position: relative; background: var(--he-ink); color: #101010; }

.he-ring__pin{
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.6vh, 26px);
  padding: clamp(36px, 6vh, 72px) var(--he-gut);
}
.he-ring__kicker{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  inline-size: 100%;
  max-inline-size: var(--he-max);
  margin-inline: auto;
  font-size: 11px;
  letter-spacing: .46em;
  color: rgba(16,16,16,.58);
}
.he-ring__count b{
  font-family: var(--he-mincho);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .1em;
  color: rgba(16,16,16,.92);
}

.he-ring__wheel{ list-style: none; margin: 0; padding: 0; }
.he-ring__ic{
  display: block;
  inline-size: 100%;
  aspect-ratio: 1/1;
  border-radius: 22.5%;
  overflow: clip;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
}
.he-ring__ic img{ display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

.he-now{ margin: 0; }
.he-now__st{
  margin: 0;
  font-size: 10.5px;
  letter-spacing: .2em;
  color: rgba(16,16,16,.68);
}
.he-now__nm{
  margin: 10px 0 0;
  font-family: var(--he-mincho);
  font-size: clamp(24px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .05em;
  color: #101010;
}
.he-now__tg{
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.9;
  color: rgba(16,16,16,.80);
  word-break: auto-phrase;
  text-wrap: pretty;
}
.he-now__go{ margin: 16px 0 0; }
.he-now__go a{
  font-family: var(--he-mincho);
  font-size: 14px;
  letter-spacing: .2em;
  color: #101010;
  text-decoration: none;
  border-block-end: 1px solid currentColor;
  padding-block-end: 3px;
}
.he-now__go i{ font-style: normal; margin-inline-start: 7px; display: inline-block; }

/* --- 素の並び（JS 無し）------------------------------------------------- */
.he-ring__stage{
  display: grid;
  gap: clamp(22px, 3vw, 36px);
  inline-size: 100%;
  max-inline-size: var(--he-max);
  margin-inline: auto;
}
.he-ring__wheel{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr));
  gap: 16px;
}
.he-ring__hub{ display: grid; gap: clamp(20px, 3vw, 32px); }

/* ★ 輪から抜ける逃げ道（2026-08-17・2回目）。
   ★★ 前は 12.5px の細い文字リンクを輪の下に置いていたが、Ryo さん
     「リンクの場所が悪いので、もっと大きく分かりやすく」。
     **この節はスクロールを横取りしている**ので、出口が目立たないのは
     «閉じ込められた» と感じさせる。出口は目立たせるのが正しい。
   ★ 押せる面（枠つきの丸ボタン）にして、字も 15px まで上げた。 */
.he-ring__skip{
  margin: 0;
  text-align: center;
}
.he-ring__skip a{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 30px;
  border: 1px solid rgba(16,16,16,.34);
  border-radius: var(--r-pill, 999px);
  background: rgba(16,16,16,.045);
  font-family: var(--he-mincho);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .22em;
  color: #101010;
  text-decoration: none;
}
.he-ring__skip i{
  font-style: normal;
  font-size: 13px;
  opacity: .8;
}
@media (hover: hover) and (pointer: fine){
  .he-ring__skip a{
    transition: background var(--dur-1, .2s) var(--ease, ease),
                border-color var(--dur-1, .2s) var(--ease, ease);
  }
  .he-ring__skip a:hover{
    background: rgba(16,16,16,.09);
    border-color: rgba(16,16,16,.62);
  }
}

/* 目印そのものは見せない。★ scroll-margin で、飛んだ先が
   固定ヘッダの下に隠れないようにする。 */
#he-after{ display: block; block-size: 0; scroll-margin-block-start: 0; }

/* --- §3b JS が動いたときだけ «輪» になる ------------------------------- */
/* ★★ 2026-08-17: 貼りつき（sticky）と «縦に長い箱» をやめた。
   それまでは節を画面10枚ぶんの高さにして、スクロール位置からコマ番号を
   出していたが、その作りだと **ホイールを1回はじいた慣性で輪が回りつづける**
   （Ryo さん「自動で回転しないようにしてほしい」）。
   いまは節を **画面ちょうど1枚** にして、コマ送りは JS が
   «操作の回数» で数えている（home-e.js）。高さの決め打ちも消えた。 */
/* ★★ 2026-08-17: min-block-size → block-size。**画面ちょうど**に固定する。
   節が画面より高いと、下端の出口ボタンが画面の外に出たまま横取りが始まり、
   «出口が見えないのに操作を奪われる» になる（Ryo さんが踏んだ症状）。
   高さを画面ぴったりにすれば、その状態が原理的に起きない。 */
.hd-scrolljs .he-ring__pin{
  /* ★ 固定ヘッダのぶんを引く。--he-top は home-e.js が実測して書く。
     引かないと、合わせたときに上の帯（出口ボタン）がヘッダの下に潜る。 */
  block-size: calc(100svh - var(--he-top, 0px));
  justify-content: center;
  overflow: clip;
}
.hd-scrolljs .he-ring__stage{
  position: relative;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  /* 輪の半径。ここを変えると円の大きさが変わる。 */
  /* ★ 画面の高さも見る。低い画面（横長のノートなど）で輪が
     はみ出さないように vmin を使い、上限も 230px に抑えた。 */
  --R: clamp(112px, 24vmin, 230px);
}
.hd-scrolljs .he-ring__wheel{
  position: absolute;
  inset: 0;
  display: block;
  grid-template-columns: none;
  pointer-events: none;
}
/* ★ 回転は «輪» ではなく **札ごとの角度に足し込む**（--a + --rot）。
   こうすると札そのものは傾かないので、逆回転で戻す入れ子が要らない。
   ★ 正面＝真上（translateY が負の向き）。 */
.hd-scrolljs .he-ring__i{
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  /* ★ 正面を大きく（2026-08-17・Ryo さん「対象のアプリは拡大してほしい」）。
     素の寸法は控えめにして、**正面だけ 2.7 倍**まで持ち上げる。
     84px × 2.7 ≒ 227px。周りの 0.60 倍（50px）との差が4.5倍になる。 */
  inline-size: clamp(52px, 8.4vmin, 84px);
  margin: 0;
  transform:
    rotate(calc(var(--a) + var(--rot, 0deg)))
    translateY(calc(-1 * var(--R)))
    rotate(calc(-1 * (var(--a) + var(--rot, 0deg))))
    translate(-50%, -50%)
    scale(calc(0.60 + var(--near, 0) * 2.10));
  /* 正面に近いほどはっきり。遠いものは沈める（消さない）。 */
  opacity: calc(0.34 + var(--near, 0) * 0.66);
  /* ★ 回っているあいだは全体をぼかす（--spin は JS が書く）。
     6周ぶんが一瞬で流れるので、ここが «シャー» の手触りになる。 */
  filter: blur(calc((1 - var(--near, 0)) * 1.1px + var(--spin, 0) * 3px));
  z-index: calc(10 + var(--near, 0) * 90);
  /* 大きくなるぶん、正面だけ影で浮かせる。 */
  /* ★ 白地では落ち影が **効きすぎる**。黒地で .5 だったものをそのまま
     置くと板が浮きすぎて «貼り付けた紙» に見える。.14 まで落とす。 */
  box-shadow: 0 calc(var(--near, 0) * 18px) calc(var(--near, 0) * 38px) rgba(0,0,0,calc(var(--near, 0) * .14));
  border-radius: 22.5%;
  will-change: transform, opacity;
}
/* 正面の1枚だけ押せる。 */
.hd-scrolljs .he-ring__i{ pointer-events: none; }

/* 輪の中。正面の1本だけを見せる。 */
.hd-scrolljs .he-ring__hub{
  position: relative;
  z-index: 5;
  display: grid;
  place-items: center;
  inline-size: min(64vw, 320px);
  text-align: center;
  pointer-events: none;
}
.hd-scrolljs .he-now{
  grid-area: 1 / 1;
  opacity: var(--on, 0);
  transform: translateY(calc((1 - var(--on, 0)) * 10px));
  pointer-events: auto;
}

/* --- ★ 一覧で見る（2026-08-30）--------------------------------------------
   輪をしまって、説明の札を升目に並べる。日記の束と同じ考え方。 */
.he-now__ic{ display: none; }          /* 輪のときは出さない */

.hd-scrolljs .he-ring.is-list .he-ring__pin{
  block-size: auto;
  overflow: visible;
}
.hd-scrolljs .he-ring.is-list .he-ring__stage{
  display: block;
  padding-block-start: 0;
}
.hd-scrolljs .he-ring.is-list .he-ring__wheel{ display: none; }
.hd-scrolljs .he-ring.is-list .he-ring__hub{
  position: static;
  display: grid;
  /* ★ 輪のときの place-items: center を **必ず打ち消す**。
     残っていると札が «中身の幅» のままになり、列は 262.5px 均等なのに
     札は 180〜263px とばらばらになる（2026-08-30 に実測）。 */
  place-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  inline-size: 100%;
  max-inline-size: var(--he-max);
  margin-inline: auto;
  text-align: start;
  pointer-events: auto;
}
/* ★★ !important の付け方に注意（2026-08-30 に踏んだ）。
   **CSS の !important はアニメーションより強い。**transform に付けると
   広がる動き（FLIP）が丸ごと殺される（実測: 切り替え直後に最終位置へ居た）。
   ★ 必要なのは **visibility だけ**。あれは JS が要素に直に書いているので
     !important でないと勝てない。opacity と transform は
     セレクタの詳細度（0,4,0 対 0,2,0）で普通に勝つので付けない。 */
.hd-scrolljs .he-ring.is-list .he-now{
  opacity: 1;
  visibility: visible !important;
  transform: none;
  grid-area: auto;
  /* ★★ 2026-09-01: **直書きの #171614 をやめた**（Ryo さん「アプリ一覧として
     表示したときにカードが黒背景に黒文字となっている」）。
     黒地のときは «地より少しだけ持ち上げた面» として正しかったが、
     トークンを通っていないので白ベースへ替えたとき取り残され、
     字（#101010）だけが裏返って **黒地に黒字** になっていた。 */
  background: var(--he-panel);
  border-radius: 16px;
  padding: clamp(18px, 2.4vw, 26px);
  box-shadow: inset 0 0 0 1px var(--he-line), 0 4px 16px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
}
/* 「ひらく」は札の下端に揃える。文の長さが違っても行が揃う。 */
.hd-scrolljs .he-ring.is-list .he-now__go{ margin-block-start: auto; padding-block-start: 14px; }
.hd-scrolljs .he-ring.is-list .he-now__ic{
  display: block;
  /* ★ 飛んでいる最中は札の外まで出るので、上に出しておく。
     札に overflow を掛けていないので切られはしないが、
     重なり順で他の札の下に潜らないようにする。 */
  position: relative;
  z-index: 2;
  inline-size: 76px;
  aspect-ratio: 1/1;
  border-radius: 22.5%;
  overflow: clip;
  margin-block-end: 14px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
}
.hd-scrolljs .he-ring.is-list .he-now__ic img{
  display: block; inline-size: 100%; block-size: 100%; object-fit: cover;
}
.hd-scrolljs .he-ring.is-list .he-now__nm{ font-size: clamp(20px, 2vw, 26px); }
.hd-scrolljs .he-ring.is-list .he-now__tg{ font-size: 12.5px; }

/* 輪の帯にも切り替えのボタンを置けるように。 */
.he-ring__kicker .he-deck__mode{ margin-inline-start: auto; }

/* ★ 円が小さくなる画面では、中の字が輪に当たる。
   その幅では輪を上に、字を下に置く。 */
@media (max-width: 640px){
  .hd-scrolljs .he-ring__stage{
    place-items: start center;
    padding-block-start: calc(var(--R) * 2 + 24px);
  }
  .hd-scrolljs .he-ring__wheel{ inset: 0 0 auto 0; block-size: calc(var(--R) * 2); }
  .hd-scrolljs .he-ring__hub{ inline-size: min(86vw, 420px); }
}

/* ═══ §4  （削除済み）══════════════════════════════════════════════════
   «つくっているもの» のベタ焼きは、一覧を輪にまとめたときに節ごと無くした
   （2026-08-17）。CSS だけ 79 行残っていたので掃除した。
   ★ 制作中のアプリは輪の中に混ざっていて、仕切りの札と状態の札で見分ける。 */

/* ═══ §4b  開発日記 ── カードの束 ══════════════════════════════════════
   ★ 2026-08-17: «左右から寄る年表» から **束をめくる** 形に差し替えた
     （Ryo さん指示）。操作の仕組みは輪と同じものを使い回している。
   ★ 素の状態（JS 無し）は **縦に並んだただの一覧**。束にするのは
     .hd-scrolljs が付いたときだけ。«動かないと読めない» を作らない。 */

/* ★★ 2026-09-01: 帯を **地と同じ色** にした。黒地のときは
   地 #0B0B0B ＜ 帯 #121110 ＜ 札 #171614 と3段に持ち上げていたが、
   白地では帯を #FFFFFF にすると **札（#FFFFFF）が帯に埋もれる**
   （上はもう白なので三段目が作れない）。段は «地 → 札» の2つで足りる。 */
.he-deck{ position: relative; background: var(--he-ink); color: var(--he-fg); }

.he-deck__pin{
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3vh, 30px);
  padding: clamp(36px, 6vh, 72px) var(--he-gut);
}
.he-deck__head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;      /* ボタンと文字の高さを揃える */
  gap: 10px 20px;
  flex: 0 0 auto;           /* ★縮ませない。縮むと見切れの元になる */
  margin: 0;
  inline-size: 100%;
  max-inline-size: var(--he-max);
  margin-inline: auto;
}
.he-deck__head .he-h{ margin-inline-end: auto; }
.he-deck__count{ font-size: 11px; letter-spacing: .3em; color: var(--he-fg-3); }
.he-deck__count b{
  font-family: var(--he-mincho); font-size: 15px; font-weight: 600;
  letter-spacing: .1em; color: var(--he-fg);
}

.he-deck__cards{ list-style: none; margin: 0; padding: 0; }

.he-card__in{
  display: block;
  text-decoration: none;
  color: inherit;
  /* ★ 同上。直書きをやめてトークンへ。 */
  background: var(--he-panel);
  border-radius: 16px;
  padding: clamp(20px, 3vw, 34px);
  box-shadow: 0 0 0 1px var(--he-line), 0 4px 16px rgba(0,0,0,.06);
}
.he-card__th{
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: clip;
  margin-block-end: clamp(14px, 2vw, 20px);
  background: rgba(16,16,16,.045);
}
.he-card__th img{ display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.he-card__d{
  display: block;
  font-family: var(--he-mincho);
  font-size: 11.5px; font-weight: 600; letter-spacing: .26em;
  color: var(--he-fg-3);
}
.he-card__ti{
  display: block;
  margin-block-start: 10px;
  font-family: var(--he-mincho);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 600; line-height: 1.55; letter-spacing: .05em;
  word-break: auto-phrase; text-wrap: pretty;
}
.he-card__ex{
  display: block;
  margin-block-start: 12px;
  font-size: 13px; line-height: 1.95;
  color: var(--he-fg-2);
  word-break: auto-phrase; text-wrap: pretty;
}
.he-deck__all{ margin: 0; text-align: center; }
.he-deck__all a{
  font-family: var(--he-mincho); font-size: 13px; letter-spacing: .18em;
  color: var(--he-fg-2); text-decoration: none;
  border-block-end: 1px solid var(--he-line); padding-block-end: 3px;
}
.he-deck__all i{ font-style: normal; margin-inline-start: 6px; }

/* --- 素の並び（JS 無し）------------------------------------------------- */
.he-deck__cards{
  display: grid;
  gap: clamp(18px, 2.6vw, 30px);
  inline-size: 100%;
  max-inline-size: var(--he-max);
  margin-inline: auto;
}

/* --- JS が動いたときだけ «束» になる ------------------------------------ */
/* ★★ 2026-08-30: 中央寄せ(center)をやめて **上下に振り分ける**。
   中央寄せだと、カードが高いときに見出しの行が上へはみ出し、
   pin の overflow:clip に切られていた（Ryo さん「ボタンがちょっとだけ
   見切れる」）。見出しは必ず上、カードは真ん中、リンクは下に置く。 */
.hd-scrolljs .he-deck__pin{
  block-size: calc(100svh - var(--he-top, 0px));
  justify-content: space-between;
  overflow: clip;
}
/* カードの置き場だけが伸び縮みする。 */
.hd-scrolljs .he-deck__cards{ flex: 1 1 auto; min-block-size: 0; }
/* ★★ 2026-08-30: 中央寄せを **grid の重ね置き** にした。
   前は position:absolute ＋ translate(-50%,-50%) で центрировал していたが、
   一覧へ切り替えた瞬間に translate が none へ **飛ぶ**。しかも -50% は
   «要素の幅に対する割合» なので、束(620px)と一覧(358px)で効き方が違い、
   FLIP の動きにズレが上乗せされて **二重に見えた**（Ryo さん指摘）。
   grid なら重ねるのに transform を1つも使わないので、この飛びが消える。 */
.hd-scrolljs .he-deck__cards{
  position: relative;
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  min-block-size: 0;
  perspective: 1400px;
  perspective-origin: 50% 44%;
}
.hd-scrolljs .he-card{
  grid-area: 1 / 1;            /* 全部おなじマスに重ねる */
  place-self: center;
  inline-size: min(92%, 620px);
}
/* ★ 払われる向きは奇数=右／偶数=左。輪の «リロード» と対になる動き。 */
.hd-scrolljs .he-card:nth-child(odd)  .he-card__in{ --dir:  1; }
.hd-scrolljs .he-card:nth-child(even) .he-card__in{ --dir: -1; }
.hd-scrolljs .he-card__in{
  transform:
    translateX(calc(var(--out, 0) * var(--dir, 1) * 118vw))
    translateY(calc(var(--out, 0) * -8svh + var(--behind, 0) * 26px))
    translateZ(calc(var(--behind, 0) * -120px))
    rotate(calc(var(--out, 0) * var(--dir, 1) * 24deg))
    scale(calc(1 + var(--out, 0) * 0.05));
  /* 支点を札の下に置く。中心で回すと «板が回った» に見える。 */
  transform-origin: 50% 145%;
  filter: blur(calc(var(--behind, 0) * 0.7px));
  will-change: transform;
}

@media (hover: hover) and (pointer: fine){
  .he-card__in{ transition: box-shadow var(--dur-1, .2s) var(--ease, ease); }
  .he-card__in:hover{ box-shadow: 0 0 0 1px rgba(16,16,16,.30); }
}

/* --- ★ 一覧で見る（2026-08-30）------------------------------------------
   束をほどいて升目に戻す。**このあいだはスクロールを押さえない**
   （押さえたまま縦長の一覧を出すと、下まで読めなくなる。JS 側で外している）。 */
.hd-scrolljs .he-deck.is-list .he-deck__pin{
  block-size: auto;
  overflow: visible;
}
.hd-scrolljs .he-deck.is-list .he-deck__cards{
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(18px, 2.6vw, 30px);
  perspective: none;
}
.hd-scrolljs .he-deck.is-list .he-card{
  position: static;
  inline-size: auto;
  translate: none;
  /* ★ 重ね置きを解く。grid-area を戻さないと、一覧にしても全部が
     同じマスに重なったままになる（2026-08-30 に踏んだ）。 */
  grid-area: auto;
  place-self: stretch;
  visibility: visible !important;   /* 束のときに隠した札を戻す */
}
.hd-scrolljs .he-deck.is-list .he-card__in{
  transform: none;
  filter: none;
  block-size: 100%;
}

/* 切り替えのボタン。★JS が作る。 */
.he-deck__mode{
  flex: 0 0 auto;
  padding: 7px 16px;
  border: 1px solid var(--he-line);
  border-radius: var(--r-pill, 999px);
  background: none;
  font-family: var(--he-mincho);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--he-fg-2);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine){
  .he-deck__mode{ transition: color var(--dur-1, .2s) var(--ease, ease),
                              border-color var(--dur-1, .2s) var(--ease, ease); }
  .he-deck__mode:hover{ color: var(--he-fg); border-color: rgba(16,16,16,.36); }
}


/* ═══ §4c  つくっている人 ═══════════════════════════════════════════════ */
.he-me{
  position: relative;
  z-index: 2;
  background: var(--he-ink);
  color: var(--he-fg);
  padding-block: clamp(80px, 13vw, 150px);
  padding-inline: var(--he-gut);
}
.he-me__in{
  inline-size: 100%;
  max-inline-size: var(--he-max);
  margin-inline: auto;
}
.he-me__h{
  margin: 12px 0 0;
  font-family: var(--he-mincho);
  font-size: clamp(26px, 4.2vw, 52px);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.3;
}
.he-me__body{
  margin-block-start: clamp(26px, 4vw, 44px);
  max-inline-size: 38em;
}
.he-me__lead{
  margin: 0;
  font-size: clamp(14px, .7rem + .5vw, 16.5px);
  line-height: 2.05;
  color: var(--he-fg-2);
  word-break: auto-phrase;
  text-wrap: pretty;
}
/* ★ 空席。**それらしい文で埋めない**（決まっていないので）。
   点線にして «まだ入っていない» ことが一目で分かるようにしてある。
   ★ 文が入ったら、この規則ごと消してよい。 */
.he-me__todo{
  margin: 1.6em 0 0;
  padding: 16px 18px;
  border: 1px dashed var(--he-line);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--he-fg-3);
}

.he-me__num{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 64px);
  margin: clamp(34px, 5vw, 56px) 0 0;
  padding-block-start: clamp(22px, 3vw, 32px);
  border-block-start: 1px solid var(--he-line);
}
.he-me__num dt{
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--he-fg-3);
}
.he-me__num dd{
  margin: 6px 0 0;
  font-family: var(--he-mincho);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
}
.he-me__nav{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: clamp(26px, 4vw, 40px) 0 0;
  font-size: 13px;
  letter-spacing: .1em;
}
.he-me__nav a{ color: var(--he-fg-2); }


/* ═══ §5  結び ════════════════════════════════════════════════════════════ */
.he-end{
  position: relative;
  z-index: 2;
  background: var(--he-ink);
  color: #101010;
  padding-block: clamp(96px, 16vw, 190px);
  padding-inline: var(--he-gut);
  text-align: center;
}
.he-end__say{
  margin: 0;
  font-family: var(--he-mincho);
  font-size: clamp(22px, 4.4vw, 54px);
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.8;
}
.he-end__nav{
  display: flex;
  justify-content: center;
  gap: clamp(20px, 4vw, 40px);
  margin: clamp(34px, 5vw, 56px) 0 0;
  font-size: 12.5px;
  letter-spacing: .16em;
}
.he-end__nav a{ color: rgba(16,16,16,.78); }


/* ═══ §5b  小さな札（DIARY / ABOUT）══════════════════════
   ★★ 2026-08-30: **このクラスには規則が1つも無かった。**
     index.njk は .he-kicker を 2箇所（DIARY / ABOUT）で使っているのに、
     実測すると 15.5px / 字間 0.31px / --he-fg ── つまり **本文と同じ字**で
     出ていた。節の名札に見えない。
   ★ 値は輪の札（.he-ring__kicker）と揃えた。各アプリの LP の節ラベルも
     同じ値にしてあるので、サイト全体で同じ札になる。
   ======================================================================== */
.he-kicker{
  display: block;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .46em;
  line-height: 1.6;
  color: var(--he-fg-2);
  text-transform: uppercase;
}


/* ═══ §6  印刷 ════════════════════════════════════════════════════════════ */
@media print{
  .he-grain, .he-wall, .he-scroll{ display: none !important; }
  /* ★ 2026-08-31: 地がもともと白なので «印刷のときだけ白へ戻す» 必要は
     無くなった。ただし残しておく — 名のりと結びは背景画像を敷くので、
     印刷でそれが出ないときに地が抜けるのを防ぐ。 */
  .he-hero, .he-end{ background: #fff !important; color: #12110F !important; }
  .he-hero::before{ display: none !important; }
  .he-say, .he-name__ja{ color: #12110F !important; }
  .he-panel{ position: static !important; min-block-size: 0 !important;
             box-shadow: none !important; border-block-end: 1px solid #ccc; }
  .he-wip, .he-end{ box-shadow: none !important; }
}


/* ═══ §7  ★ prefers-reduced-motion: reduce ═══════════════════════════════
   ★ この案は **常時ループが0本**で、動くのは
       ・アイコンの壁（スクロール連動）
       ・アイコンの迫り出し（スクロール連動）
       ・画面の占有（position: sticky）
     の3つだけ。
   ★★ sticky は «動き» ではなく **配置** なので、reduce でも残す。
     ここを static に落とすと、章の構造そのものが変わってしまう。
     止めるのはスクロール連動の2つだけでよい。 */
@media (prefers-reduced-motion: reduce){
  /* 壁は流さない・ずらさない */
  html.js .he-wall__f,
  .hd-scrolljs .he-wall__c{ animation: none !important; transform: none !important; }
  /* 輪は組まず、**縦に並んだただの一覧**に戻す */
  .hd-scrolljs .he-ring{ block-size: auto !important; }
  .hd-scrolljs .he-ring__pin{ position: static !important; block-size: auto !important;
                              overflow: visible !important; }
  .hd-scrolljs .he-ring__stage{ display: grid !important; padding-block-start: 0 !important; }
  .hd-scrolljs .he-ring__wheel{ position: static !important; display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)) !important;
    inset: auto !important; block-size: auto !important; }
  .hd-scrolljs .he-ring__i{ position: static !important; transform: none !important;
    inline-size: auto !important; opacity: 1 !important; filter: none !important; }
  .hd-scrolljs .he-ring__hub{ position: static !important; display: grid !important;
    inline-size: 100% !important; text-align: start !important; }
  .hd-scrolljs .he-now{ opacity: 1 !important; transform: none !important;
    visibility: visible !important; }
  /* 束も組まず、縦に並んだただの一覧に戻す */
  .hd-scrolljs .he-deck__pin{ block-size: auto !important; overflow: visible !important; }
  .hd-scrolljs .he-deck__cards{ display: grid !important; perspective: none !important; }
  .hd-scrolljs .he-card{ position: static !important; translate: none !important;
                         inline-size: auto !important; }
  .hd-scrolljs .he-card__in{ transform: none !important; filter: none !important; }
  .he *{ transition: none !important; }
}