/* ══════════════════════════════════════════════════════════
   KAKURIYO — 見た目
   デザイン案（2026-08-14 ChatGPT作）をもとに組んでいる。
   ⚠️色は下の変数だけで決めている。個々の場所に色を直書きしない。
   ══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* 夜の色。⚠️真っ黒にしない。少し青を残すと絵が沈まない */
  --bg:        #030a0f;
  --bg-panel:  #050d13;
  --bg-card:   #070f16;

  /* 文字。⚠️純白にしない。絵の暖かい白に合わせて少し黄を混ぜている */
  /* 🔴コントラストを少し強めた（タクヤ指示 2026-08-14）。
     明るい方はより明るく、暗い方はより暗く。⚠️faint を下げすぎると読めない */
  --ink:       #fbf3e2;
  --ink-dim:   #a9a79f;
  --ink-faint: #5f6266;

  /* 一点だけの赤。⚠️増やさない。ここぞという小さな文字にしか使わない */
  --red:       #c42324;

  --line:      rgba(251,243,226,.17);
  --line-soft: rgba(251,243,226,.08);

  /* ⚠️細長い書体でないと案の見出しにならない。丸い書体に戻さないこと */
  --sans: "Archivo Narrow", "Zen Kaku Gothic New", -apple-system,
          "Hiragino Kaku Gothic ProN", sans-serif;
  --jp:   "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  /* 日本語の見出し用の明朝。⚠️本文には使わない（小さい明朝は読みにくい）。
     ⚠️この変数が無いと font-family が無効になり、英字の書体のまま出る
       （2026-08-14 実際にそうなった）。 */
  --jp-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  /* 数字や小さなラベル。⚠️別の書体を足さず、同じ族を字間で使い分ける
     （案も1書体で通っている。混ぜると散らかる） */
  --mono: "Archivo Narrow", "Zen Kaku Gothic New", sans-serif;

  /* ⚠️案は中身が画面の91.6%（1086pxのとき995px）。狭くすると印象が変わる */
  /* ⚠️ここが横幅の効きを決める。--max より先にこちらが効く画面が多い */
  --pad: clamp(16px, 2.6vw, 44px);
  --max: 1600px;
}

html { scroll-behavior: smooth; }
/* 🔴飛び先が固定ヘッダーの裏に隠れないようにする（タクヤ指摘 2026-08-14）。
   ⚠️これが無いと、飛んだ先の見出しが隠れて**次の節が画面の頭に来る**ため、
     「LINKSを押したのにプレイリストへ飛んだ」ように見えていた。
   ⚠️ヘッダーの高さ（約64px）＋余裕。ヘッダーを変えたらここも直す。 */
section[id] { scroll-margin-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  /* ⚠️300 だと Archivo Narrow は痩せて見える。案の文字はもっと芯がある */
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 🔴文字まわりの土台（2026-08-14）。
   ⚠️カーニングと合字は既定で切れている環境があり、切れていると
     大きな見出しで字の間隔がばらつく。
   ⚠️日本語は「どこでも切れる」ので、放っておくと
     「…lofi で / す。」のように語の途中で改行される（実際になった）。
     word-break: auto-phrase は文節の切れ目で折り返す。
     対応していないブラウザは無視するだけなので、付けて損はない。 */
body {
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { text-wrap: balance; }
.intro__big, .intro__lead p, .jr__txt, .jr__ttl, .uses__en,
.journal__soon, .latest__title, .mini__ttl { word-break: auto-phrase; }
/* 数字が並ぶ所は幅を揃える（時刻・尺・日付がガタつくのを防ぐ） */
.meter, .card__meta, .jr__date, .latest__desc { font-variant-numeric: tabular-nums; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* 押せる所は必ず見える印を出す。⚠️outline:none にしない */
a:focus-visible, button:focus-visible {
  outline: 1px solid var(--red);
  outline-offset: 4px;
}

/* 小さな見出し（LATEST MIX など）。この赤が画面で唯一の彩度 */
.label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .24em;
  color: var(--red);
  text-transform: uppercase;
}

/* ── 読み込みの幕 ─────────────────────────────────────────
   ⚠️JSに頼らない。CSSのアニメだけで必ず開く（JSが落ちても白紙にしない） */
.boot {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  animation: bootOut .9s ease 1.1s forwards;
  pointer-events: none;
}
.boot__line {
  width: 120px; height: 1px; background: var(--line);
  position: relative; overflow: hidden;
}
.boot__line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--red); transform-origin: left;
  animation: bootFill 1.1s cubic-bezier(.7,0,.2,1) forwards;
}
@keyframes bootFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bootOut  { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .boot { display: none; } }

/* ── ヘッダー ───────────────────────────────────────────── */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 22px var(--pad);
  /* ⚠️背景を敷かない。絵の上に浮かせる。下へ行くと .is-stuck が付いて敷く */
  transition: background .4s ease, backdrop-filter .4s ease, padding .4s ease;
}
.hdr.is-stuck {
  background: rgba(3,10,15,.82);
  backdrop-filter: blur(14px);
  padding-top: 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.hdr__logo {
  font-size: 17px; letter-spacing: .32em; font-weight: 500;
  white-space: nowrap;
}
.hdr__nav { display: flex; gap: 30px; margin-left: auto; }
.hdr__nav a {
  position: relative;
  font-size: 12.5px; letter-spacing: .18em; color: var(--ink-dim);
  transition: color .3s ease;
  padding-bottom: 3px;
}
/* 触れた所に赤い線が左から伸びる。⚠️現在地には出さない（二重になる） */
.hdr__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) and (pointer: fine) {
  .hdr__nav a:not(.is-current):hover { color: var(--ink); }
  .hdr__nav a:not(.is-current):hover::after { transform: scaleX(1); }
}
.hdr__nav a.is-current { color: var(--ink); }
.hdr__nav a.is-current::after { background: var(--ink-faint); transform: scaleX(1); }

.hdr__sns { display: flex; gap: 16px; }
.hdr__sns a { width: 19px; height: 19px; opacity: .62; transition: opacity .3s ease; }
.hdr__sns svg { width: 100%; height: 100%; fill: var(--ink); }
.hdr__sns a:hover { opacity: 1; }

/* ── ヒーロー ───────────────────────────────────────────── */
.hero {
  position: relative;
  /* 🔴画面いっぱいにしない（案は 582/1086 = 53.6vw）。
     次の箱が少し覗くのが案のバランス。⚠️100svh に戻すと全体が間延びする */
  /* ⚠️幅だけで決めると、縦長の画面（タブレット）で低くなりすぎる。
     画面の高さの52%を下限にして、どちらか高い方をとる。 */
  /* 🔴背景を大きく（タクヤ指示 2026-08-14）。53.6vw → 62vw。
     ⚠️下に LATEST MIX の箱を重ねるので、その分の高さを見込んでいる */
  /* 🔴縦を短く（タクヤ指示 2026-08-14）。70vw → 52vw。
     ⚠️下に箱を108px重ねているので、その分も含んだ高さ。
     ⚠️これ以上短くすると、上の余白(104px)＋中身(約280px)＋下の余白(150px)で
       入りきらなくなる。 */
  min-height: max(clamp(430px, 52vw, 820px), 56svh);
  display: flex; align-items: center;
  /* ⚠️下の余白は箱の重なり(108px)より大きくする。小さいとボタンが隠れる */
  padding: 104px var(--pad) 150px;
  overflow: hidden;
}
.hero__art { position: absolute; inset: 0; z-index: 0; }
/* 🔴絵を6枚、ゆっくり寄りながら入れ替える（タクヤ指示 2026-08-14）。
   1枚 10.5秒（うち溶けるのが約1.5秒）× 6枚 = 63秒で1周。
   ⚠️枚数を変えたら「1周の秒数」と「各枚の遅れ」を**両方**直すこと。
     遅れ = 1周 ÷ 枚数 の倍数。
   ⚠️遅れは**逆順**に並べる（b が一番大きい）。負の遅れは
     「もう進んでいる」意味なので、a→b→c… の順に出したい時はこうなる。
     素直に小さい順に書くと逆回りになる（実測で確認）。
   ⚠️1枚目だけ -0.9秒 ずらす。0秒だと透明から始まり、開いた瞬間に
     一瞬だけ真っ黒になる（実際に起きた）。
   ⚠️「動きを減らす」設定の人には1枚目だけ出す。 */
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  animation: slideFade 63s linear infinite;
}
.hero__slide.is-a { animation-delay:  -0.9s; }
.hero__slide.is-b { animation-delay: -53.4s; }
.hero__slide.is-c { animation-delay: -42.9s; }
.hero__slide.is-d { animation-delay: -32.4s; }
.hero__slide.is-e { animation-delay: -21.9s; }
.hero__slide.is-f { animation-delay: -11.4s; }
@keyframes slideFade {
  0%      { opacity: 0; }
  1.43%   { opacity: 1; }   /* 0.9秒で現れる */
  15.24%  { opacity: 1; }   /* 約8.7秒 見せる */
  16.67%  { opacity: 0; }   /* 0.9秒で消える */
  100%    { opacity: 0; }
}
/* ゆっくり寄る。⚠️中の img を動かす（.hero__slide は不透明度の担当）。
   ⚠️1.20 → 1.30。差を大きくすると、切り替わった瞬間の跳びが目立つ。 */
.hero__slide img { animation: slideZoom 63s linear infinite; }
.hero__slide.is-a img { animation-delay:  -0.9s; }
.hero__slide.is-b img { animation-delay: -53.4s; }
.hero__slide.is-c img { animation-delay: -42.9s; }
.hero__slide.is-d img { animation-delay: -32.4s; }
.hero__slide.is-e img { animation-delay: -21.9s; }
.hero__slide.is-f img { animation-delay: -11.4s; }
@keyframes slideZoom {
  0%   { transform: scale(1.20); }
  16.67%  { transform: scale(1.30); }
  16.68%, 100% { transform: scale(1.20); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide, .hero__slide img { animation: none; }
  .hero__slide { opacity: 0; }
  .hero__slide.is-a { opacity: 1; }
}
.hero__art img {
  /* ⚠️右に寄せない。案は絵をほとんど切らずに使っていて、
     左の城と鍵が見せ場になっている（62%だと落ちていた）。 */
  /* 🔴絵をもう少し下へ（タクヤ指示 2026-08-14）。58% → 44%。
     ⚠️object-position の縦は「絵のどこを枠の中心に合わせるか」。
       **数字を小さくすると絵が下がる**（上のほうが見えるようになる）。
     ⚠️1.35を超えると絵が粗く見え始める。 */
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%;
  /* ⚠️拡大は keyframes（slideZoom）が持つ。ここで transform を書くと上書きされる */
  transform-origin: 52% 46%;
  /* 🔴絵の色を戻した（タクヤ指示 2026-08-14）。
     暖色の膜（#8a3d12 overlay 45%）を敷いていたが、**絵の色が潰れて**いた。
     色は元のまま、コントラストだけ上げる。
     ⚠️暖色に寄せたい時は膜ではなく、ここの数値で調整すること。 */
  filter: contrast(1.14) saturate(1.14) brightness(1.02);
}
/* 文字を読ませるための幕。⚠️左を濃く、右は絵を残す */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,10,15,.9) 0%, rgba(3,10,15,.52) 30%, rgba(3,10,15,.06) 58%),
    /* ⚠️右端も少し沈める。ここに時刻を置くが、絵の明るい所と重なって
       文字が消えていた（2026-08-14 実測）。 */
    linear-gradient(270deg, rgba(3,10,15,.62) 0%, rgba(3,10,15,.2) 9%, transparent 20%),
    /* 🔴箱を重ねたので、下は**箱の裏**だけ沈める（2026-08-14）。
       地の色まで落とすと、重ねた箱のまわりが黒い帯になって絵が消える。 */
    linear-gradient(180deg, rgba(3,10,15,.58) 0%, transparent 22%,
                    transparent 56%, rgba(3,10,15,.38) 82%, rgba(3,10,15,.88) 100%);
}
.hero__inner { position: relative; z-index: 2; max-width: 640px; }

/* 見出しの上の小さな「隠り世」。⚠️明朝。ここだけ日本語なので character が出る */
.hero__eyebrow {
  font-family: var(--jp-mincho); font-weight: 600;
  font-size: clamp(12px, 1.15vw, 15px);
  letter-spacing: .5em; margin-right: -.5em;
  color: var(--red);
  margin-bottom: 14px;
  /* ⚠️絵の上に乗るので影を敷く。無いと明るい所で消える */
  text-shadow: 0 1px 10px rgba(3,10,15,.95), 0 0 4px rgba(3,10,15,.9);
}
.hero__title {
  /* 🔴大きくして字間を締めた（タクヤ指示 2026-08-14「フォントこだわって」）。
     ⚠️大きい字ほど字間は**詰める**。同じ .05em でも、字が大きくなるほど
       実寸の隙間が広がり「間延び」に見える。
     ⚠️行間も1を切る（.96）。大文字だけなので下に余りが出る。 */
  font-size: clamp(42px, 8.2vw, 124px);
  font-weight: 500;
  letter-spacing: .012em;
  line-height: .96;
  margin-bottom: 26px;
  margin-right: -.012em;
}
.hero__lead {
  font-family: var(--mono);
  /* ⚠️小さい字は逆に**開ける**。大見出しと役割が違う（あちらは詰める）。
     ⚠️行間は詰めたまま。空けると塊が高くなり、見出しが上へずれる。 */
  font-size: clamp(12px, 1.45vw, 18px);
  font-weight: 500;
  letter-spacing: .3em;
  line-height: 1.45;
  color: var(--ink-dim);
  margin-bottom: 30px;
  /* 赤い短い線を頭に置く。視線の入口になり、小見出しの赤と呼応する */
  padding-left: 46px;
  position: relative;
}
/* ⚠️1行目の高さの中央に合わせる（塊の中央ではない）。
   塊の中央にすると2行目との間に落ちて、線が宙に浮く。 */
.hero__lead::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 30px; height: 1px; background: var(--red);
}

/* ボタン。⚠️塗りつぶさない。線だけにして、触れた時に反転させる */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  border: 1px solid var(--line);
  padding: 15px 28px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: .2em;
  color: var(--ink);
  transition: background .35s ease, color .35s ease,
              border-color .35s ease, gap .35s ease;
}
.btn__arrow, .btn__ext { transition: transform .35s ease; }
/* 🔴外部リンクの矢印はSVG（2026-08-15）。
   ⚠️「↗」は絵文字の見た目を持つ文字で、スマホでは色付きの絵文字になる。
     このサイトの決めごと（アイコンは絵文字ではなくSVG）に合わせた。 */
.btn__ext { display: inline-flex; align-items: center; }
.btn__ext svg {
  width: 13px; height: 13px; fill: none;
  stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: square; stroke-linejoin: miter;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); gap: 20px; }
}
.btn--sm { padding: 13px 22px; font-size: 11.5px; }

/* 右のメーター */
/* 🔴右の真ん中 → **右下**へ（タクヤ指示 2026-08-14）。字も大きく。
   ⚠️SCROLL と同じ高さに並べる。左右で対になって画面が締まる。 */
.meter {
  /* 🔴右の**真ん中**へ（タクヤ指示 2026-08-14）。
     ⚠️下寄せだと、ヒーローの高さを変えるたびに箱の重なり(108px)との
       余裕を計算し直すことになる。真ん中なら高さが変わっても破綻しない。
     ⚠️ただし中身の高さの半分（約70px）が重なりを超えないこと。 */
  /* 🔴真ん中より下へ（タクヤ指示 2026-08-14）。
     ⚠️76%を超えると、下に重ねた箱(108px)に隠れる。 */
  position: absolute; right: var(--pad); top: 72%; z-index: 2;
  transform: translateY(-50%);
  /* 🔴文字は中央ぞろえ（タクヤ指示 2026-08-14）。
     ⚠️align-items:flex-end だと右端で揃うだけで、行の長さがばらつく。 */
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  text-align: center;
  font-family: var(--mono); font-size: 17px; font-weight: 500;
  letter-spacing: .14em;
  color: var(--ink-dim);
  /* 🔴影は外した（タクヤ指示 2026-08-14）。
     ⚠️元は「絵の明るい所で文字が消える」ために敷いていた。
       明るい絵に差し替えた時は、ここが読めるか必ず確かめること。 */
}
.meter__now { color: var(--ink); font-size: 20px; letter-spacing: .08em; }
.meter__rule { width: 54px; height: 1px; background: var(--line); }

.scroll {
  /* ⚠️箱の重なり(108px)より上に置く。下げると箱の裏に隠れる */
  position: absolute; left: var(--pad); bottom: 126px; z-index: 2;
  writing-mode: vertical-rl;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .28em;
  color: var(--ink-dim);
  text-shadow: 0 1px 10px rgba(3,10,15,.95);
}
.scroll::after {
  content: ""; display: block; width: 1px; height: 46px; margin: 12px auto 0;
  background: linear-gradient(var(--line), transparent);
}

/* ── 最新のミックス ─────────────────────────────────────── */
.latest {
  /* 🔴ヒーローの上に重ねる（タクヤ指示 2026-08-14）。
     ⚠️z-index を付けないと、ヒーローの幕(.hero::after z-index:1)の下に潜る。 */
  position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
  /* 🔴行の高さを決める（2026-08-14）。決めないと中の画像が元の比率(16:9)で
     伸び、箱が 399px になっていた（案は298px）。
     ⚠️min-height では下がらない。**行の高さ**を指定すること。 */
  grid-template-rows: clamp(220px, 27.4vw, 400px);
  align-items: stretch;
  /* ⚠️重なりは**この一行**で決める。上の方に margin-top を書いても、
     ここの margin ショートハンドに上書きされて効かない（実際に踏んだ）。 */
  max-width: var(--max); margin: -108px auto 0;
  border: 1px solid var(--line-soft);
  background: var(--bg-panel);
}
/* ⚠️ここの余白が箱の高さを決めている。案は298px（27.4vw）。緩めると全体が伸びる */
.latest__text { padding: clamp(20px, 2.5vw, 32px); display: flex; flex-direction: column; }
.latest__title {
  font-size: clamp(19px, 2.2vw, 28px); font-weight: 500;
  letter-spacing: .04em; line-height: 1.25;
  margin: 12px 0 10px;
}
.latest__tags {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em;
  color: var(--ink-dim); margin-bottom: 14px;
}
/* ⚠️ここは尺と用途だけを出す（例：13:48 OF LOFI FOR LATE NIGHT FOCUS.）。
   日本語の説明文にすると、上の英字の並びから浮く。 */
.latest__desc {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .13em;
  line-height: 1.9; color: var(--ink-dim); margin-bottom: 20px;
}
/* ⚠️PCでは下端へ押し出す（auto）。ただし少し浮かせる。
   0だと下の帯との隙間が7〜11pxしかなく、詰まって見える（2026-08-14 実測）。 */
.latest__text .btn { align-self: flex-start; margin-top: auto; margin-bottom: 10px; }

.latest__art { position: relative; overflow: hidden; display: block; min-height: 0; }
.latest__art img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.1) saturate(1.1);
  transition: transform .8s cubic-bezier(.22,.61,.36,1), filter .5s ease;
}
.latest__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(3,10,15,.5), transparent 26%);
  pointer-events: none;
}
.play {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%;
  border: 1px solid rgba(242,232,213,.5);
  background: rgba(3,10,15,.35);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}
/* ⚠️三角だけを指す。`.play > svg` にすると**回る輪のSVGにも当たり**、
   輪が20pxに縮んで見えなくなる（2026-08-14 実際に消えた）。 */
.play__icon { width: 20px; height: 20px; fill: var(--ink); margin-left: 2px; }
/* 🔴ボタンのまわりを回る文字（タクヤ指示 2026-08-14）。
   ⚠️円に沿わせるのは SVG の textPath でしかできない。CSSでは無理。
   ⚠️回すのは**外側の輪だけ**。ボタン本体を回すと三角も回る。
   ⚠️「動きを減らす」設定の人には止める。 */
.play__ring {
  position: absolute; left: 50%; top: 50%;
  width: 152px; height: 152px; margin: -76px 0 0 -76px;
  pointer-events: none;
  animation: ringSpin 18s linear infinite;
}
.play__ring text {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .28em; fill: var(--ink);
  opacity: .8;
  /* ⚠️絵の上に直接乗るので、影が無いと明るい所で読めない。
     SVGの文字に text-shadow は効かないので drop-shadow を使う。 */
  filter: drop-shadow(0 0 5px rgba(3,10,15,.95)) drop-shadow(0 1px 2px rgba(3,10,15,.8));
}
@keyframes ringSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .play__ring { animation: none; } }
/* 🔴ホバーで速さを変えない（タクヤ指摘 2026-08-14）。
   ⚠️animation-duration を変えると、アニメは**頭から始まり直す**。
     カーソルを乗せるたびに文字の位置が飛んでいた。
     速さを変えたい場合は、同じ輪を2枚重ねて片方の不透明度を変えるしかない。
     ここではその複雑さに見合わないので、一定の速さで回し続ける。 */
@media (hover: hover) and (pointer: fine) {
  .latest__art:hover img { transform: scale(1.05); filter: brightness(.86); }
  .latest__art:hover .play { background: var(--red); border-color: var(--red); transform: translate(-50%,-50%) scale(1.06); }
}

/* ── 聴ける場所 ─────────────────────────────────────────── */
/* 🔴4つを均等に（タクヤ指示 2026-08-14）。
   ⚠️flex だと見出しの文字数ぶんだけ左が狭くなる。**4等分の格子**にする。 */
.listen {
  max-width: var(--max); margin: 0 auto;
  border: 1px solid var(--line-soft); border-top: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch;
}
.listen__label {
  /* 🔴枠の中央へ（タクヤ指示 2026-08-14）。文字だけでなく**見出しと線を
     ひとかたまりで**中央に置く。右の3つも中央寄せなので4枠とも揃う。
     ⚠️一度これを左寄せにしていた（他の見出しに合わせる理由）。戻すなら
       矢印の向き（右＝聴ける場所を指す）も合わせて考えること。 */
  display: flex; align-items: center; justify-content: center;
  padding: 15px clamp(16px, 2vw, 26px); text-align: center;
  gap: 14px;
}
/* 🔴見出しの右の短い線（タクヤ指示 2026-08-14）。
   矢印の**片側の羽根だけ**を付けている。両方付けると普通の矢印になり、
   「押せそう」に見えてしまう（ここは見出しで、押せない）。
   ⚠️幅は余りを使わせない。短いままにする（一度 flex:1 で伸ばして長すぎた）。
   ⚠️色は --ink（この画面の白）。純白だと夜の画面で浮く。 */
.listen__rule {
  flex: none; width: 74px; height: 8px; overflow: visible;
  fill: none; stroke: var(--ink); stroke-width: 1;
  stroke-linecap: square; opacity: .55;
}
.listen__list { display: contents; list-style: none; }
.listen__list li { border-left: 1px solid var(--line-soft); }
.listen__list a, .listen__list span {
  height: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 12px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .16em;
  color: var(--ink-dim);
  transition: color .3s ease, background .3s ease;
}
.listen__list svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.listen__list a:hover { color: var(--ink); background: rgba(242,232,213,.03); }
/* まだ配信していない場所。⚠️押せそうに見せない */
.listen__list .is-soon { color: var(--ink-faint); cursor: default; flex-direction: column; gap: 4px; }
.listen__list .is-soon em { font-style: normal; font-size: 9.5px; letter-spacing: .14em; opacity: .6; }

/* ── 一覧 ───────────────────────────────────────────────── */
.archive { max-width: var(--max); margin: 0 auto; padding: clamp(38px, 4.6vw, 62px) 0 0; }
.archive .label { padding-left: 2px; margin-bottom: 22px; }

.cards {
  display: grid; gap: 12px;
  /* 🔴4つ並べる（タクヤ指示 2026-08-14）。auto-fill だと画面幅で数が変わる */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.card {
  position: relative; display: block;
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  /* 🔴縦長に戻す（タクヤ指示 2026-08-14）。4つ並べるので1枚が広くなり、
     横長のままだと間延びする。 */
  aspect-ratio: 3 / 4;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), border-color .4s ease;
}
.card__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* ⚠️案のカード帯は明るさ13.5、こちらは5.4だった。暗くしすぎない */
  opacity: .92;
  filter: contrast(1.08) saturate(1.12);
  transition: transform .8s cubic-bezier(.22,.61,.36,1), opacity .5s ease;
}
.card::after {
  content: ""; position: absolute; inset: 0;
  /* ⚠️左を濃く、右に絵を残す（案のカードはこの形） */
  /* 🔴重ねる黒を薄くした（タクヤ指示 2026-08-14）。絵が沈んでいた。
     ⚠️薄くしすぎると左上の番号とタイトルが読めなくなる。左は残す。 */
  background:
    linear-gradient(170deg, rgba(3,10,15,.72) 0%, rgba(3,10,15,.26) 42%, rgba(3,10,15,0) 100%),
    linear-gradient(180deg, rgba(3,10,15,.22) 0%, transparent 46%, rgba(3,10,15,.46) 100%);
}
.card__body { position: relative; z-index: 2; padding: 18px; height: 100%; display: flex; flex-direction: column; }
/* 🔴大きく（タクヤ指示 2026-08-14）。カードの主役は番号 */
.card__no {
  font-family: var(--mono); font-size: 34px; font-weight: 500;
  letter-spacing: .04em; line-height: 1;
  color: var(--ink); opacity: .95;
  font-variant-numeric: tabular-nums;
}
.card__ttl {
  /* 🔴さらに大きく（タクヤ指示 2026-08-14）。15→19→24px。棚の名前が主役。
     ⚠️「EMPTY PLACES」が一番長い。カードの幅が狭くなる画面では
       2行になるので、line-height を詰めて収まりを保つ。 */
  font-size: 24px; font-weight: 600; letter-spacing: .05em; margin-top: 11px;
  text-transform: uppercase; line-height: 1.25;
}
/* 🔴タイトルのすぐ下に置く（タクヤ指示 2026-08-14）。
   ⚠️margin-top:auto で下端へ送っていたが、案は上に固まっている。 */
.card__meta {
  margin-top: 10px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .15em; color: var(--ink-dim); line-height: 1.85;
}
.card__play {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  /* 🔴さらに大きく（タクヤ指示 2026-08-14）。30→38→48px。
     ⚠️カードの右下に置いているので、これ以上大きいと文字とぶつかる。 */
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(242,232,213,.45);
  display: grid; place-items: center;
  transition: background .3s ease, border-color .3s ease;
}
.card__play svg { width: 18px; height: 18px; fill: var(--ink); margin-left: 1px; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-5px); border-color: var(--line); }
  .card:hover .card__bg { transform: scale(1.07); opacity: .8; }
  .card:hover .card__play { background: var(--red); border-color: var(--red); }
}
.card--soon {
  /* まだ動画が無い枠。⚠️押せないようにする。押して何も無いのが一番悪い */
  border-style: dashed; border-color: var(--line-soft);
  background: transparent; cursor: default;
  display: block; padding: 18px;
}
/* ⚠️番号は本物のカードと**同じ位置**（左上）に置く。中央に寄せると列が揃わない */
.card--soon .card__no { display: block; opacity: .32; }
.card--soon > span:last-child {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; color: var(--ink-faint);
}
.cards__empty {
  grid-column: 1 / -1; padding: 44px 0; text-align: center;
  font-family: var(--jp); font-size: 12px; color: var(--ink-faint);
}

.more {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 24px auto 0;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .18em;
  color: var(--ink-dim);
  transition: color .3s ease, gap .35s ease;
}
.more:hover { color: var(--ink); gap: 18px; }

/* ── について ───────────────────────────────────────────── */
.about {
  position: relative;
  max-width: var(--max); margin: clamp(24px, 3vw, 40px) auto 0;
  padding: clamp(16px, 1.9vw, 24px) 0 clamp(10px, 1.3vw, 16px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(20px, 4vw, 60px);
  border-top: 1px solid var(--line-soft);
}
/* 🔴うっすら背景を敷く（タクヤ指示 2026-08-14）。
   ⚠️::before は横線が使っているので **::after** を使う。
   ⚠️「うっすら」。濃くすると屋号と CONNECT が読めなくなる。
   ⚠️上下を消して、境目に直線が出ないようにする。
   ⚠️z-index を持たせない。中身（屋号・リンク）より後ろに置く。 */
.about::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("images/mark-bg.webp") center / cover no-repeat;
  opacity: .12;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
  pointer-events: none;
}
/* ⚠️中身を背景より前に出す。付けないと絵に潜る */
.about > * { position: relative; z-index: 1; }

/* 屋号と CONNECT のあいだを1本の線が貫く（案のとおり）。
   ⚠️輪の後ろを通す。輪は地の色を敷いていないので、線が透けて見える。 */
.about::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--line-soft); pointer-events: none;
}
.about__mark, .orb, .about__connect { position: relative; z-index: 1; }
/* 輪のまわりだけ線を消す。⚠️地の色で塗る（透明だと線が見えてしまう） */
.orb { background: radial-gradient(closest-side, var(--bg) 78%, transparent 100%); }
.about__name { font-size: clamp(21px, 2.7vw, 34px); letter-spacing: .26em;
               font-weight: 500; line-height: 1.2; }
/* 🔴明朝にする（2026-08-14）。屋号の日本語はここだけで、一番 character が出る所。
   ⚠️字間を大きく開けて漢字を離す。詰まっているとロゴに見えない。 */
.about__jp { font-family: var(--jp-mincho); font-weight: 600;
             color: var(--red); font-size: 19px;
             letter-spacing: .42em; margin-top: 7px; line-height: 1.5;
             margin-right: -.42em; }
.about__copy {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .13em;
  color: var(--ink-dim); line-height: 1.9; margin-top: 14px;
}
.orb { display: grid; place-items: center; }
/* ⚠️大きくしない。案の下の塊は167pxしかない（輪はその中に収まる） */
.orb canvas { width: clamp(104px, 12.8vw, 168px); height: auto; opacity: .9; }
/* 🔴中の文字は**左ぞろえ**（タクヤ指示 2026-08-14）。
   ⚠️塊は右に置いたまま。塊ごと左に寄せると屋号と近づいて窮屈になる。 */
.about__connect { justify-self: end; text-align: left; }
.about__connect ul { list-style: none; margin-top: 18px; }
.about__connect li + li { margin-top: 9px; }
/* 🔴アイコンを付ける（タクヤ指示 2026-08-14）。
   ⚠️右端ぞろえなので、絵を**文字の後ろ**ではなく前に置き、行ごと右へ寄せる。 */
.about__connect li { display: flex; justify-content: flex-start; }
.about__connect a {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .16em;
  color: var(--ink-dim); transition: color .3s ease;
  padding-bottom: 2px;
}
.about__connect svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.about__connect a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: right;
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) and (pointer: fine) {
  .about__connect a:hover { color: var(--ink); }
  .about__connect a:hover::after { transform: scaleX(1); }
}
/* 左ぞろえにしたので、線も左から伸ばす（右からだと文字と逆向きになる） */
@media (hover: hover) and (pointer: fine) {
  .about__connect a::after { transform-origin: left; }
}

/* ── 日誌 ───────────────────────────────────────────────── */
.journal {
  max-width: var(--max); margin: clamp(26px, 3vw, 40px) auto 0;
  padding-top: clamp(18px, 2.2vw, 28px);
  border-top: 1px solid var(--line-soft);
}
.jr { list-style: none; margin-top: 18px; }
/* 日付と本文の2列。⚠️日付の幅は固定にする。揃っていないと記録に見えない */
.jr__item {
  display: grid; grid-template-columns: 108px minmax(0, 1fr);
  gap: clamp(14px, 2vw, 28px);
  padding: 15px 0;
  border-top: 1px solid var(--line-soft);
}
.jr__item:first-child { border-top: 0; }
.jr__date {
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  /* 🔴赤をやめた（タクヤ指摘 2026-08-14）。すぐ上の「JOURNAL」も赤で、
     どちらが節の見出しか分からなくなっていた。
     ⚠️赤は**節の見出しだけ**の色。ここでは使わない。 */
  letter-spacing: .13em; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.jr__ttl {
  /* ⚠️日誌の見出しも明朝。本文はゴシックのまま（小さい明朝は読みにくい） */
  font-size: 17px; font-weight: 600; letter-spacing: .06em;
  font-family: var(--jp-mincho); line-height: 1.6;
}
.jr__txt {
  font-family: var(--jp); font-size: 13.5px; line-height: 1.95;
  color: var(--ink-dim); margin-top: 5px;
}

/* ── フッター ───────────────────────────────────────────── */
.foot {
  max-width: var(--max); margin: 0 auto;
  padding: 9px 0 17px;
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.foot__nav { display: flex; align-items: center; gap: 12px; line-height: 1.6; }
.foot__nav a, .foot__copy {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; line-height: 1.6; color: var(--ink-faint);
}
.foot__nav a { transition: color .3s ease; }
.foot__nav a:hover { color: var(--ink-dim); }
.foot__nav span[aria-hidden] { color: var(--ink-faint); opacity: .5; }

/* 本文の左右の余白。⚠️ヒーローは全面なので外している */
/* ⚠️横の余白はここでまとめて当てている。**節を足したら必ずここに書く**。
   .intro を入れ忘れて、iPad/スマホで文字が端にくっついていた（2026-08-14）。 */
.latest, .listen, .archive, .intro, .about, .journal, .foot {
  padding-left: var(--pad); padding-right: var(--pad);
}
.latest { padding: 0; }
.listen { padding: 0; }

/* ── 出てくる動き ───────────────────────────────────────── */
/* 🔴ゆっくり順番に出す（タクヤ指示 2026-08-14）。
   ⚠️遅らせるのは**その塊の中での順番**（--i）。ページ全体の通し番号にすると、
     下のほうの要素が何秒も待つことになる。 */
[data-in] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 1.05s cubic-bezier(.22,.61,.36,1),
              transform 1.05s cubic-bezier(.22,.61,.36,1);
  /* 🔴もっと一個ずつ（タクヤ指示 2026-08-14）。140 → 260ms。
     ⚠️上限は app.js 側で7個まで。それ以上は待たせすぎる。 */
  transition-delay: calc(var(--i, 0) * 260ms);
}
[data-in].is-in { opacity: 1; transform: none; }
/* ⚠️「動きを減らす」設定の人には動かさない。ただし**必ず見えるように**する */
@media (prefers-reduced-motion: reduce) {
  [data-in] { opacity: 1; transform: none; transition: none; }
}

/* ── 狭い画面 ───────────────────────────────────────────── */
/* 🔴2列にするのは1100px以上から（2026-08-14）。
   900〜1100px（iPad横）では、文字側の列が中身でいっぱいになり、
   ボタンの下の余白が出ず、下の帯と7pxしか離れていなかった。 */
@media (max-width: 1100px) {
  /* ⚠️行の高さ指定を外す。狭い画面では絵が枠からはみ出して
     ページ全体が横スクロールしていた（実測 391px 対 画面390px）。 */
  .latest { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .latest__art { order: -1; aspect-ratio: 16 / 9; min-height: 0; width: 100%; }
  .latest__art img { width: 100%; height: 100%; }
  /* ⚠️margin-top:auto をやめる。PC用の「縦長の列の底へ押し出す」指定で、
     1列に畳んだ後も効くとボタンが下の帯にぶつかる
     （2026-08-14 実測：ボタン下端と LISTEN ON の上端が同じ 1264px）。
     ⚠️ここで margin-top を**数値で**入れ直すと、その分だけ箱からはみ出して
       下の余白が消える（実測：26pxの余白があるのに隙間は5pxだった）。
       上の空きは**説明文の margin-bottom** で作ること。 */
  /* ⚠️下の空きは**ボタン自身の margin-bottom**で作る。
     .latest__text の padding-bottom は、なぜかここでは効かなかった
     （2026-08-14 実測：26pxあるのに隙間は4px）。確実な方を使う。 */
  .latest__text .btn { margin-top: 0; margin-bottom: 22px; }
  .latest__desc { margin-bottom: 24px; }
  .latest__text { padding-bottom: clamp(24px, 3.2vw, 34px); }
  .about { grid-template-columns: 1fr; text-align: center; }
  .about__connect { justify-self: center; text-align: center; }
  .about__connect ul { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
  .about__connect li + li { margin-top: 0; }
}

/* 🔴ヘッダーを2段に畳む幅を 700 → 900px に広げた（2026-08-14）。
   iPad（768〜820px）で SOUND と SNS が画面の外に出て消えていた（実測 右端923 > 820）。
   ⚠️畳むのは**ヘッダーだけ**。他の指定は 700px のままでよい。
   ⚠️この塊は 700px の塊より前に置くこと。後ろだとスマホ用の調整を打ち消す。
     1段目: ロゴ / 言語 / 音 / SNS
     2段目: メニュー（横いっぱい） */
@media (max-width: 900px) {
  .hdr { flex-wrap: wrap; gap: 10px 16px; }
  .hdr__logo { order: 1; }
  .lang      { order: 2; margin-left: auto; }
  .sound     { order: 3; }
  .hdr__sns  { order: 4; margin-left: 4px; }
  .hdr__nav  { order: 5; width: 100%; margin-left: 0; gap: 22px; }
}

@media (max-width: 700px) {
  /* ⚠️スマホではメニューを畳まず、下に横並びで置く。
     ハンバーガーを足すと、6項目のためだけに開閉の仕掛けが要る。 */
  /* ⚠️並び順を**全部**指定する。指定しないものが混ざると、同じ order の中で
     書いた順に並び、SNSが3段目へ落ちる（2026-08-14 実際に崩れた）。
       1段目: ロゴ / 音 / SNS
       2段目: メニュー（横いっぱい） */
  .hdr { flex-wrap: wrap; gap: 10px 14px; padding-top: 16px; }
  .hdr__logo { order: 1; font-size: 13px; }
  .hdr__sns  { order: 4; margin-left: 10px; gap: 12px; }
  .hdr__nav {
    order: 5; width: 100%; margin-left: 0;
    gap: 16px; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none;
  }
  .hdr__nav::-webkit-scrollbar { display: none; }
  .hdr__nav a { font-size: 10px; white-space: nowrap; }

  /* 🔴縦長の画面では 53.6vw が効かない（390px幅→209px）。
     スマホは画面の高さで決める。⚠️100svh にはしない（次が見えない） */
  /* ⚠️重なり(-108px)より下の余白を大きくすること。逆だとボタンが隠れる */
  /* 🔴縦に広げた（タクヤ指示 2026-08-14）。80 → 88svh。
     80 → 88 → 92svh。⚠️100svh にはしない。次の箱が少し覗いていないと、
       下に続きがあると分からない。 */
  .hero { min-height: 92svh; padding-top: 132px; align-items: flex-end;
          padding-bottom: 128px; }
  .latest { margin-top: -64px; }
  .meter { bottom: 86px; }
  .scroll { bottom: 92px; }
  /* 🔴スマホは中央（タクヤ指示 2026-08-14）。縦長の画面では
     どこかへ寄せると片側が大きく切れる。 */
  .hero__art img { object-position: 50% 50%; transform-origin: 50% 50%; }
  /* ⚠️スマホは横が狭いので、幕を「下から」に切り替える。
     左右の幕のままだと文字の上に絵の明るい所が残る。 */
  .hero::after {
    background: linear-gradient(180deg, rgba(3,10,15,.8) 0%, rgba(3,10,15,.25) 34%, rgba(3,10,15,.96) 78%);
  }
  /* 🔴スマホは**横一列**にして中身の下に敷く（2026-08-14）。
     ⚠️縦に積んで右端に置くと「LISTEN ON YOUTUBE」のボタンと重なっていた。
       画面が狭いので、縦積みを置ける余白が右に無い。
     ⚠️bottom は箱の重なり(-64px)より大きくすること。 */
  .meter {
    top: auto; bottom: 78px; left: var(--pad); right: var(--pad);
    transform: none;
    flex-direction: row; justify-content: center; align-items: center;
    gap: 12px; font-size: 12px;
  }
  .meter__now { font-size: 13px; }
  .meter__rule { width: 22px; }
  /* ⚠️SCROLL も同じ理由でボタンに重なる。スマホでは出さない
     （下に続きがあることは、重ねた箱が見えているので伝わる）。 */
  .scroll { display: none; }

  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .listen { grid-template-columns: 1fr; }
  .listen__list li { border-left: 0; border-top: 1px solid var(--line-soft); }
  .listen__label { justify-content: flex-start; padding-left: var(--pad); }
  .foot { flex-direction: column; align-items: flex-start; }
  /* ⚠️108pxの列を残すと本文がつぶれる。日付を上の行に送る */
  .jr__item { grid-template-columns: 1fr; gap: 4px; }
}


/* 再生リストの日本語名（2026-08-14）。⚠️英字の名前の下に小さく。
   英字だけだと「SLEEP」が何の棚か日本語話者に伝わりにくい。 */
.card__jp {
  display: block;
  font-family: var(--jp); font-size: 10.5px; letter-spacing: .06em;
  color: var(--ink-dim); margin-top: 3px;
}
/* ⚠️準備中の枠でも中身（番号・名前）を出すようになったので、
   中央寄せの指定を打ち消す。前は文字1つだけだった。 */
.card--soon .card__body { text-align: left; }

/* ══ について ══════════════════════════════════════════════
   ⚠️メニューの ABOUT はここへ来る。屋号の塊（.about）ではない。 */
.intro {
  max-width: var(--max); margin: clamp(30px, 3.6vw, 48px) auto 0;
  padding-top: clamp(20px, 2.6vw, 32px);
  border-top: 1px solid var(--line-soft);
}
/* 「これは何か」の答え。⚠️ここだけ明朝で大きく。読ませたい一文 */
.intro__big {
  font-family: var(--jp-mincho); font-weight: 600;
  font-size: clamp(17px, 1.9vw, 25px); line-height: 1.85;
  color: var(--ink);
  margin: 18px 0 22px;
  /* ⚠️24em だと2行目が「す。」だけになっていた。文に合わせて広げる。 */
  max-width: 32em;
}
.intro__lead { max-width: 46em; }
.intro__lead p {
  font-family: var(--jp); font-size: 13.5px; line-height: 2.1;
  color: var(--ink-dim);
}
.intro__lead p + p { margin-top: 14px; }

/* 右の空きに置く絵（2026-08-14 タクヤ指示）。
   ⚠️狭い画面では**何も置かない**。CSSの背景なので読み込みも起きない。
   ⚠️四角いまま置くと貼り付けたように見える。左と下を消して背景に溶かす。
   ⚠️高さは文章に合わせて伸ばす（height:100%）。数値で固定すると
     日本語と英語で文の行数が変わった時にはみ出す。 */
.intro__art { display: none; }

@media (min-width: 1100px) {
  .intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 400px);
    grid-template-areas:
      "label art"
      "big   art"
      "lead  art"
      "uses  uses";
    column-gap: clamp(28px, 4vw, 64px);
    align-items: start;
  }
  .intro > .label { grid-area: label; }
  .intro__big    { grid-area: big; }
  .intro__lead   { grid-area: lead; }
  .uses          { grid-area: uses; }

  .intro__art {
    display: block; grid-area: art;
    align-self: stretch; min-height: 210px;
    background: url("images/about.webp") center / cover no-repeat;
    /* ⚠️左（文章側）と下を消す。二重にかけるので mask-composite で掛け合わせる */
    /* ⚠️4辺すべてを消す。上や右を残すと、そこだけ直線の縁が出て
       「貼った」感じになる（2026-08-14 実物を見て気づいた）。 */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 46%, #000 88%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 18%, #000 62%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0, #000 46%, #000 88%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 18%, #000 62%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    opacity: .82;
  }
  /* ⚠️動きを減らす設定の人には出さない…のではなく、静止画なのでそのまま。
     代わりに触れる要素ではないので pointer-events を切る */
  .intro__art { pointer-events: none; }
}

/* 3つの使いどころ。⚠️横に3つ（2026-08-14）。縦積みだと右の列が間延びする。 */
.uses {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 34px);
  margin-top: clamp(26px, 3.2vw, 44px);
  padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--line-soft);
}
.uses li {
  display: grid; grid-template-columns: 48px minmax(0, 1fr);
  grid-template-areas: "ic jp" "ic en";
  column-gap: 15px; row-gap: 2px;
  align-items: center;
}
/* ⚠️仕切りは2つ目以降だけ。1つ目に付けると左端に線が出る */
.uses li + li {
  border-left: 1px solid var(--line-soft);
  padding-left: clamp(16px, 2.4vw, 34px);
}
.uses__ic {
  grid-area: ic; display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--line-soft); border-radius: 50%;
}
/* ⚠️線画。塗りではなく線で描く（塗ると重くなり、文字と喧嘩する） */
.uses__ic svg {
  width: 23px; height: 23px;
  fill: none; stroke: var(--red); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}
/* ⚠️月だけは塗る（線だけだと三日月に見えない） */
.uses li:first-child .uses__ic svg path,
.uses li:first-child .uses__ic svg circle { fill: var(--red); stroke: none; }
.uses__jp {
  grid-area: jp; align-self: end;
  font-family: var(--jp-mincho); font-weight: 600;
  font-size: 17px; letter-spacing: .16em; color: var(--ink);
}
.uses__en {
  grid-area: en; align-self: start;
  font-family: var(--jp); font-size: 11.5px; letter-spacing: .04em;
  color: var(--ink-faint); line-height: 1.7;
}

@media (max-width: 900px) {
  .intro__big { font-size: clamp(16px, 4.6vw, 21px); }
  /* ⚠️3つ横並びは狭いと文字がつぶれる。2つ → 1つ と落とす。
     ⚠️縦積みになったら、縦の仕切りを**横の仕切り**に置き換える。 */
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
  .uses li + li { border-left: 0; padding-left: 0; }
  .uses li:nth-child(n+3) {
    border-top: 1px solid var(--line-soft); padding-top: 20px;
  }
}
@media (max-width: 560px) {
  .uses { grid-template-columns: 1fr; gap: 0; }
  .uses li + li {
    border-top: 1px solid var(--line-soft); padding-top: 17px; margin-top: 17px;
  }
  .uses li:nth-child(n+3) { padding-top: 17px; }
}

/* ══ 音のボタンと小さな再生パネル ══════════════════════════
   ⚠️勝手に鳴らさない。押した時だけ読み込んで鳴らす。
   ⚠️音だけを隠して流さない（YouTubeの規約）。小さくても画面を出す。 */
.sound {
  display: inline-flex; align-items: center; gap: 9px;
  /* ⚠️margin-left:auto を**付けない**。.hdr__nav が既に持っているので、
     2つあると余った幅が半分ずつに分かれ、メニューが中央へずれる
     （2026-08-14 実測 262.8px ずつに分割されていた）。 */
  background: none; border: 1px solid var(--line); border-radius: 2px;
  padding: 7px 13px; cursor: pointer; color: var(--ink-dim);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .18em;
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.sound:hover { color: var(--ink); border-color: var(--ink-faint); }
.sound[aria-pressed="true"] { color: var(--ink); border-color: var(--red); }
/* 4本の棒。⚠️止まっている時は低いまま（鳴っているかが一目で分かる） */
.sound__bars { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.sound__bars i {
  width: 2px; height: 3px; background: currentColor; display: block;
  transition: height .3s ease;
}
.sound[aria-pressed="true"] .sound__bars i {
  animation: bars .9s ease-in-out infinite;
}
.sound[aria-pressed="true"] .sound__bars i:nth-child(2) { animation-delay: .15s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(3) { animation-delay: .3s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(4) { animation-delay: .45s; }
@keyframes bars { 0%,100% { height: 3px; } 50% { height: 11px; } }
@media (prefers-reduced-motion: reduce) {
  .sound[aria-pressed="true"] .sound__bars i { animation: none; height: 8px; }
}

.mini {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: min(320px, calc(100vw - 36px));
  background: var(--bg-panel); border: 1px solid var(--line);
  padding: 12px 12px 14px;
  animation: miniIn .45s cubic-bezier(.22,.61,.36,1);
}
@keyframes miniIn { from { opacity: 0; transform: translateY(14px); } }
.mini[hidden] { display: none; }
.mini__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 9px;
}
/* 自前の再生/一時停止（2026-08-14）。埋め込みの中のボタンは小さくて押しにくい。
   ⚠️閉じる（✕）と並べる。押し間違えないよう間を空ける。 */
/* ⚠️PC/iPadでは出さない（タクヤ指示 2026-08-14）。従来どおり✕だけ。
   スマホは帯なので、指で押せる一時停止をこちらに出す。 */
.mini__toggle { display: none; }
.mini__toggle {
  background: rgba(242,232,213,.06); border: 1px solid var(--line);
  cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%;
  /* ⚠️ここに display を書かない。上の `display:none` を打ち消してしまう。
     出すのはスマホの塊の中だけ（2026-08-14 実際にPC/iPadに出ていた）。 */
  place-items: center; padding: 0;
  transition: border-color .3s ease, background .3s ease;
}
.mini__toggle svg { width: 13px; height: 13px; fill: var(--ink); }
.mini__toggle:hover { border-color: var(--red); background: rgba(196,35,36,.14); }
/* 止まっている間は赤で示す。⚠️色だけに頼らない。文字（PAUSED）も出している */
.mini__toggle[data-paused="1"] { border-color: var(--red); }
/* 🔴ヘッダーの音の棒を止める（2026-08-14）。
   ⚠️animation を消さずに**止める**。消すと高さが戻って跳ねる。 */
.sound[data-paused="1"] .sound__bars i { animation-play-state: paused; }

.mini__close {
  background: none; border: 0; cursor: pointer; color: var(--ink-faint);
  font-size: 13px; line-height: 1; padding: 2px 4px;
  transition: color .3s ease;
}
.mini__close:hover { color: var(--ink); }
/* ⚠️16:9を保つ。中の iframe は幅高さ100%にする */
.mini__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.mini__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mini__ttl {
  margin-top: 9px; font-family: var(--jp); font-size: 11.5px;
  line-height: 1.6; color: var(--ink-dim);
}

@media (max-width: 700px) {
  /* ⚠️スマホはメニューが2段目にあるので、音のボタンは1段目の右へ */
  /* ⚠️文字は消さない。棒4本だけでは**何のボタンか伝わらない**
     （タクヤ指摘 2026-08-14）。代わりに余白と字を詰めて収める。 */
  /* ⚠️ここで右へ寄せる（PCでは .hdr__nav が寄せ役なので付けない） */
  /* ⚠️寄せ役は .lang。ここに auto を足すと余白が分かれてずれる（前に踏んだ） */
  .sound { order: 3; padding: 6px 9px; font-size: 9.5px; gap: 6px; letter-spacing: .12em; }
  .hdr__sns { order: 3; margin-left: 10px; }
  .mini { right: 12px; bottom: 12px; }
}


/* ══ 言語の切り替え ════════════════════════════════════════ */
.lang {
  display: inline-flex; align-items: center; gap: 6px;
  /* ⚠️margin-left:auto を**付けない**。.hdr__nav が既に持っているので、
     2つあると余った幅が半分ずつに分かれ、メニューが中央へずれる
     （2026-08-14 実測 226.75px ずつに分割。同じ間違いを2回している）。
     ⚠️狭い画面（900px以下）ではメニューが2段目に落ちるので、
       あちらの塊の中でだけ .lang に auto を付けている。 */
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; color: var(--ink-faint);
}
.lang button {
  background: none; border: 0; padding: 3px 2px; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: var(--ink-faint);
  transition: color .3s ease;
  position: relative;
}
.lang button[aria-pressed="true"] { color: var(--ink); }
.lang button[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--red);
}
.lang button:hover { color: var(--ink); }
@media (max-width: 700px) {
  .lang { order: 2; margin-left: auto; font-size: 10px; }
}

/* 🔴スマホでは締めを中央寄せ（タクヤ指示 2026-08-14）。
   ⚠️広い画面は左右振り分けのまま。狭いと2段になり、左右に離れて落ち着かない。 */
@media (max-width: 700px) {
  .foot {
    /* ⚠️縦並びのとき、横の中央寄せは **align-items**。justify-content は
       縦方向を動かすだけで効かない（2026-08-14 実際に効かなかった）。 */
    flex-direction: column; align-items: center; text-align: center;
    gap: 10px;
  }
  .foot__nav { justify-content: center; flex-wrap: wrap; }
}

/* 🔴スマホの再生表示は**下端の帯**（タクヤ指示 2026-08-14）。
   前は右下の箱で 320×251＝画面の3割を覆っていた。
   ⚠️YouTubeの埋め込みを消さない（display:none や 0×0 にすると
     再生が止まることがある）。小さくして帯の左に残す。
   ⚠️iPhoneの下端（ホームバー）に潜らないよう safe-area を足す。 */
@media (max-width: 700px) {
  .mini {
    left: 0; right: 0; bottom: 0; width: auto;
    border-width: 1px 0 0;
    padding: 9px 14px;
    padding-bottom: max(9px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 12px; align-items: center;
  }
  /* 🔴見た目は92px、中身は240px（2026-08-14）。
     ⚠️YouTubeの埋め込みは小さすぎると再生が始まらないことがある。
       92×52 で実際に鳴らなくなった（PCは320px幅のままで正常だった）。
     ⚠️transform は**表示だけ**を縮める。埋め込みが自分の大きさとして
       認識するのは 240×135 のままなので、制限に引っかからない。
       width を小さくすると本当に小さくなる。取り違えないこと。 */
  .mini__frame {
    grid-area: 1 / 1 / 3 / 2;
    width: 92px; height: 52px; aspect-ratio: auto;
    overflow: hidden; position: relative;
  }
  .mini__frame iframe {
    position: absolute; top: 0; left: 0;
    width: 240px; height: 135px;
    transform: scale(0.3834);      /* 92 / 240 */
    transform-origin: top left;
  }
  .mini__head  { grid-area: 1 / 2 / 2 / 3; margin-bottom: 1px; }
  /* 🔴一時停止は帯の**上下中央**（タクヤ指示 2026-08-14）。2行にまたがらせる */
  .mini__toggle { display: grid; grid-area: 1 / 3 / 3 / 4; align-self: center; }
  /* ⚠️✕はスマホでは出さない。一時停止と役割が混ざる */
  .mini__close { display: none; }
  .mini__ttl   { grid-area: 2 / 2 / 3 / 3; margin-top: 0; font-size: 12px;
                 /* ⚠️長い題は1行で切る。2行になると帯が伸びる */
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 🔴矢印は消す（タクヤ指示 2026-08-14）。スマホは枠が縦に積まれるので、
     右を指す矢印の指す先が無くなる。 */
  .listen__rule { display: none; }
  /* ⚠️指で押すので大きめに */
  .mini__toggle { width: 40px; height: 40px; }
  .mini__toggle svg { width: 15px; height: 15px; }
  /* ⚠️下から出す。右下の箱の時は斜めに出していた */
  .mini { animation: miniUp .4s cubic-bezier(.22,.61,.36,1); }
  @keyframes miniUp { from { opacity: 0; transform: translateY(100%); } }
}