/*
Theme Name: movwav
Theme URI: https://www.movwav.jp/
Author: movwav, inc.
Description: 株式会社もぶわぶ オリジナルテーマ。ダーク×波形。ロゴのМ字が上下対称のDAW波形である点を出発点にしたデザイン。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: movwav
*/

/* ============================================================
   トークン
   地の色は純黒ではなく、アクセントのオレンジ側に振った暖かい炭 = MA室の暗さ
   ============================================================ */
:root{
  --ground:     #14110D;
  --panel:      #1C1813;
  --panel-hi:   #232019;
  --line:       #2E2820;
  --line-soft:  #221E18;

  --fg:         #EFE9E0;
  --fg-dim:     #A3998C;   /* 6.7:1。小さい字はここまで。読ませるものは全部これ */
  /* 計器の目盛りのように「そこに在るのが分かればいい」字のための色。4.9:1。
     --fg-dim だと左レールや幕間のキャプションが主張しすぎ、--fg-faint だと読めない。
     **読ませたい字にこれを使わないこと。**その用途は --fg-dim */
  --fg-quiet:   #8A8073;
  /* ⚠️ 3.2:1 しかない。**文字には使わない。** 罫線・枠・背景のためだけに残してある。
     唯一の例外は .wrow-period（時期の注釈。目立たせないことが目的） */
  --fg-faint:   #6D6458;

  --accent:     #F7AB00;   /* ロゴ原本の色 */
  --accent-deep:#BD8200;
  --sage:       #BFBFB3;   /* ロゴ原本の色 */
  /* ロゴキットの「こげ茶一色」版で使われている、ブランドの黒。
     地の色・パネル・罫線はこの色相（H31 / S18%）を暗くした系列で揃えている */
  --ink:        #665747;

  --font-display: Futura, "Century Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Noto Sans JP", sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1140px;
  --rail: 74px;

  /* 面の色。角を45度で落とす部品が、内側をこの色で塗り直すのに使う。
     パネルの中など地の色が変わる場所では上書きする */
  --surface: var(--ground);
}

/* ============================================================
   45度の面取り
   ロゴが45度だけで出来ているので、UIの角も同じ角度で落とす。
   枠線を残したいので、背景を2枚（枠色＝border-box／内側＝padding-box）
   重ねてから clip-path で切る。border 自体は透明にしておく。
   ============================================================ */
.cut{
  --c: 9px;
  clip-path: polygon(
    0 0,
    calc(100% - var(--c)) 0,
    100% var(--c),
    100% 100%,
    var(--c) 100%,
    0 calc(100% - var(--c))
  );
}
.cut--line{
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(var(--line), var(--line)) border-box;
}

/* このテーマは意図的にダーク単一。スタジオの暗さがコンセプトそのものなので
   ライトテーマ版は用意していません。 */

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin:0;
  background: var(--ground);
  color: var(--fg);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  /* hidden ではなく clip。hidden は body をスクロールコンテナにしてしまい、
     ヘッダーや Works の背景で使っている position:sticky が効かなくなる */
  overflow-x: clip;
}

img{ max-width: 100%; height: auto; }
a{ color: inherit; }
::selection{ background: var(--accent); color: #14110D; }

:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background: var(--accent); color:#14110D; padding:12px 20px; z-index:100;
  font-size:13px;
}
.skip-link:focus{ left:0; }

/* 管理バーが出ているときにヘッダーが隠れないように */
.admin-bar .top{ top: 32px; }
@media screen and (max-width: 782px){ .admin-bar .top{ top: 46px; } }

/* ---------- 左レール：dBスケールがスクロール位置のレベルメーターになる ---------- */
.rail{
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--rail);
  border-right: 1px solid var(--line-soft);
  padding: 26px 0 22px;
  z-index: 40;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* ゴニオメーター（位相計）。卓のX-Yモードと同じもの */
.rail-scope{
  --c: 8px;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  width: 46px; height: 46px;
  display: block;
  border: 1px solid var(--line-soft);
  /* 残光の塗り重ねと同じ色にして、読み込み直後のちらつきを防ぐ */
  background: var(--ground);
}

.rail-scale{
  position:absolute; left:0; right:0; top:96px; bottom:64px;
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;
  /* いちばん下の「-∞」は、縦組みの MOVWAV,INC.（`.rail-cap`）と高さが重なる。
     14px のままだと横の隙間が2pxしか無く、ぶつかって見えた（2026年8月13日）。
     目盛りを右へ、ワードマークを左へ寄せて、あいだを14pxに広げてある。
     **目盛りとメーターの縦位置は動かさない** ─ 0/-6/-12… はメーターの目盛りなので、
     片方だけずらすと数字が指す場所が嘘になる。 */
  padding-right:9px;
}
.rail-scale span{
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .06em;
  color: var(--fg-quiet);
  font-variant-numeric: tabular-nums;
}
.rail-meter{
  position:absolute; left: 13px; top: 100px; bottom: 68px;
  width: 3px; background: var(--line);
}
/* 振れ幅は JS が `--lvl`（0%〜100%）に入れる。**縦か横かはCSSが決める** ─
   高さを直に書かせていた頃は、狭い画面でメーターを横に寝かせられなかった
   （書いている側が3章と6章の2か所にあり、両方に「縦か横か」を持たせることになる） */
.rail-meter i{
  position:absolute; left:0; top:0; width:100%; height: var(--lvl, 0);
  background: linear-gradient(to bottom, var(--accent-deep), var(--accent));
  display:block;
}
.rail-cap{
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .18em;
  color: var(--fg-quiet);
  writing-mode: vertical-rl;
  /* レールの真ん中ではなく、メーターの柱（left:13px）の側へ寄せる。
     卓のチャンネルに貼るラベルと同じ位置関係になり、`.rail-scale` の
     「-∞」との隙間も稼げる（上のコメント）。 */
  margin: 0 auto 0 21px;
}

/* ---------- ヘッダー ---------- */
.top{
  position: sticky; top: 0; z-index: 30;
  padding-left: var(--rail);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.top-in{
  max-width: var(--wrap); margin: 0 auto;
  padding: 16px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand svg{ display:block; flex:none; }
/* ワードマークは書体で組まず、原本のベクターをそのまま置いている */
.wordmark{ display: block; height: auto; }

.nav{ display:flex; gap: 30px; align-items:center; list-style:none; margin:0; padding:0; }
.nav a{
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--fg-dim);
  padding: 6px 0; position: relative; display:block;
  transition: color .2s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover{ color: var(--fg); }
.nav a:hover::after{ transform: scaleX(1); }

/* いま画面に出ているセクション（JSが付ける）。1枚もののページなので、
   ナビが「どこを読んでいるか」の目盛りを兼ねる */
.nav a[aria-current]{ color: var(--fg); }
.nav a[aria-current]::after{ transform: scaleX(1); opacity: .55; }

/* ---------- メニューの中の Sound Check だけ、別の言葉づかいにする ----------
   ほかの5つは「会社のどこか」を指す名前。Sound Check は仕事の紹介ではないので、
   **同じ書式で並ぶと6つ目の業務に見える**（2026年8月13日、山口さんの「おまけ感を出したい」）。

   このサイトには書式が2つある ─ **ナビと見出し（Futura・大文字・字間広め）**と、
   **計器まわりのラベル（等幅・小さめ・字間もっと広め）**。後者は
   `.interlude-cap`（Spectrogram）／`.rail-cap`（MOVWAV,INC.）／`.rm-field label`（テンポ）。
   **Sound Check を後者へ移す。** 字を小さくするだけより、意味の階層が変わる ─
   「会社のどこか」ではなく**卓に貼ってあるラベル**に見える。

   ⚠️ 色は `--fg-dim`。`--fg-faint` は地に対して3.3:1しかなく、
   10px前後の字に使うと読めない（年の軸で一度指摘されている）。 */
.nav-aside{ position: relative; margin-left: 4px; padding-left: 22px; }
/* 5つの並びから外れていることを、細い縦線1本で示す */
.nav-aside::before{
  content: ""; position: absolute; left: 0; top: 50%;
  width: 1px; height: 13px; margin-top: -6px;
  background: var(--line);
}
.nav-aside a{
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .18em;
  display: flex; align-items: center; gap: 7px;
}
/* 印は丸ではなく小さな四角（年の棒・リズムのマス・お知らせと同じ語彙） */
.nav-aside a::before{
  content: ""; width: 5px; height: 5px; flex: none;
  background: var(--fg-faint);
  transition: background .2s;
}
.nav-aside a:hover::before,
.nav-aside a[aria-current]::before{ background: var(--accent); }

/* 募集中のときだけ Recruit の右に点が付く */
.nav-dot{
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  margin-left: 6px;
  vertical-align: 3px;
  animation: movwav-live 2.2s ease-out infinite;
}

.nav-toggle{
  --c: 7px;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  display:none;
  background:none; border:1px solid var(--line); color: var(--fg-dim);
  font-family: var(--font-mono); font-size:10px; letter-spacing:.16em;
  padding: 9px 14px; cursor:pointer;
}

/* ---------- 共通レイアウト ---------- */
/* **`main.page` と書くこと。** WordPress は固定ページで body に `page` クラスを付ける。
   `.page` のままだと body にもこの余白が掛かり、レールぶんの字下げが二重になる
   （固定ページだけ本文が37pxずれていた。トップを固定ページに割り当てるとトップにも出る） */
main.page{ padding-left: var(--rail); }
.wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }

.sec{ padding: 116px 0; border-top: 1px solid var(--line-soft); position: relative; }
.sec--flush{ padding-top: 0; border-top: 0; }

/* ---------- 波形グラフィック（静的SVG） ----------
   上がオレンジ・下がセージという、ロゴと同じ重なりで統一している。 */
.wave-svg{ display: block; width: 100%; height: 100%; }
.wv-top{ fill: var(--accent); }
.wv-bot{ fill: var(--sage); }

/* セクションの継ぎ目に走るジグザグ。ロゴの m と w が噛み合う部分と同じリズム。
   境界線をまたいで中央に置く */
.secwave{
  position: absolute;
  left: 0; right: 0; top: -17px;
  height: 34px;
  pointer-events: none;
  overflow: hidden;
  /* 両端は地の色に溶かして、切れた印象にしない */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}
.secwave .wave-svg{ height: 100%; }
.zz-m, .zz-w{
  fill: none;
  /* non-scaling-stroke なので線幅は画面上のpx。
     preserveAspectRatio="none" で横に伸ばしても線が太らない */
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: miter;
}
.zz-m{ stroke: var(--accent); opacity: .5; }
.zz-w{ stroke: var(--sage);   opacity: .3; }

/* 幕間（スペクトログラム）の直後だけ、ギザギザを継ぎ目の下に落とす。
   ほかの継ぎ目は上下とも地の色なのでまたいでちょうどよいが、
   ここは**上半分の行き先がスペクトログラムの絵**になる（1440pxで絵の下8%、
   375pxでは高さが130pxに縮むので12%）。またぐこと自体が目的ではないので、
   この継ぎ目だけ下に寄せる。Staff の上余白は116pxあるので何にも当たらない。
   あわせて、線が `.interlude` の下枠と `.sec` の上枠で2px分になっていたのを1本に戻す。 */
.interlude + .sec{ border-top: 0; }
.interlude + .sec > .secwave{ top: 0; }

/* 幕間の**上**の継ぎ目。理屈は下の継ぎ目と同じで、向きだけが逆。
   ここは長らく印が無く、**ページで唯一「ギザギザの無い境目」**だった ─
   罫線は `--line-soft`（地に対して1.1:1）で実質見えず、帯の地 #0F0D0A も
   ページの地 #14110D とほぼ同じ暗さなので、上に116pxの余白があっても
   **Works の Export の続き**に見えていた（2026年8月15日 山口さんの指摘）。
   下の継ぎ目を 0 に落としたのと対で、こちらは -34px ＝ **まるごと地の側**へ。
   絵に線を載せずに、帯の上端に接して置ける。 */
.interlude > .secwave{ top: -34px; }

/* 2本柱のカード上部 */
.pillar-wave{
  height: 60px;
  margin: -6px 0 20px;
  opacity: .9;
  -webkit-mask-image: linear-gradient(to right, #000 62%, transparent);
          mask-image: linear-gradient(to right, #000 62%, transparent);
}
.pillar-wave .wv-top{ fill: var(--accent); opacity: .5; }
.pillar-wave .wv-bot{ fill: var(--sage); opacity: .3; }
.pillar:hover .pillar-wave .wv-top{ opacity: .8; }
.pillar:hover .pillar-wave .wv-bot{ opacity: .45; }
.pillar-wave, .pillar-wave .wave-svg{ transition: opacity .3s; }
.pillar-wave .wv-top, .pillar-wave .wv-bot{ transition: opacity .3s; }

/* 採用パネルの背景 */
.recruit-wave{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
          mask-image: linear-gradient(to top, #000, transparent);
}
.recruit-wave .wv-top{ fill: var(--accent); opacity: .1; }
.recruit-wave .wv-bot{ fill: var(--sage); opacity: .07; }

/* ---------- スペクトログラム（時間×周波数）----------
   波形が音量の変化なら、こちらは周波数の変化。同じ音の別の見方。 */
.interlude{
  --surface: #0F0D0A;
  --band-h: 190px;
  position: relative;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: #0F0D0A;
  /* ⚠️ **`overflow: hidden` を付けないこと**（2026年8月13日に外した）。
     祖先に付いていると中の `position: sticky` が効かなくなり、
     下の「帯を貼り付ける」が死ぬ。外しても何もはみ出さないことは実測ずみ
     （子要素・canvas とも箱の内側、320〜1440pxで横スクロールの変化なし）。 */
}
/* 画素単位で描いて補間しながら拡大する。SVGの矩形だとマス目が見えてしまう。
   **元絵は 560×128 固定で、それをこの高さに引き伸ばしている**ので、
   高さを変えても焼き込んである隠し文字の作りは何も変わらない */
#spectro{
  display: block;
  width: 100%;
  height: var(--band-h);
}

/* ---------- Sound Check を開いている間、帯を画面の上に貼り付ける ----------
   **鳴らしたときに計器が本物になるのが見せ場なのに、パネルが縦に伸びたせいで
   ロールを触っているときには帯が画面外に出ていた**
   （1280pxで帯の上端からロールの下端まで918px＝画面より18px高い。375pxでは659px上）。

   左レールのメーターと位相計は元から `position: fixed` で、
   **帯だけが流れて行く計器だった。** 貼り付けて仲間に戻す。

   `.interlude` を抜ければ自然に外れるので、スクロール量の計算は要らない。
   **閉じているときは何も変わらない**（開かない人には無関係）。
   `--top-h` はヘッダー（これも sticky）の高さ。JSが測って入れる。 */
.interlude.is-check-open .interlude-band{
  position: sticky;
  top: var(--top-h, 65px);
  z-index: 2;
}
/* キャプションは帯にぶら下げる。`.interlude` 側に付けたままだと、
   下のリズムマシーンを開いたときに、開いた箱のいちばん下まで落ちてしまう */
.interlude-band{
  position: relative;
  /* ⚠️ **帯には必ず地を敷く。** 再生中の帯は sticky で、**後ろをリズムマシーンの
     パネルが流れていく**。canvas が全面を塗っていたころは問題にならなかったが、
     狭い画面では左の計器の区画を `mask-image` で抜いてあるので、
     地が無いと**そこからページが透けて見える**（2026年8月15日、山口さんの指摘）。
     デスクトップでは canvas が上に載るので、見た目は何も変わらない。 */
  background: var(--surface);
}
/* **札は帯の上端。** 右下に置いていたころは、**読み手が「別物だ」と知るのが
   通り過ぎたあと**だった（2026年8月15日 山口さんの指摘。Works の Export の続きに見える件）。
   入る瞬間に名乗らせる。20px は下のパネルの余白と同じ数字で、上の 12px は下端に置いていたときと同じ。
   **右上ではなく左上。** 焼き込んである隠し文字 `movwav` は幅の 62〜88%（＝右上）にあり、
   右へ置くと札の地がその尻尾に被る（実測で62pxぶん重なった）。
   読み下す向きから言っても、入ってすぐ目に入るのは左。
   ⚠️ 狭い画面では、左に滑り込む計器と**同じ高さに並ぶ**。
   横並びは「メーターの名前」と誤読される組み方だが（下の §狭い画面 のコメント）、
   **札は `.is-sounding` で引っ込み、計器は `.is-sounding` で入ってくる**ので、
   2つが同時に見えることはない。**どちらかの条件を外すときは、ここも見直すこと。** */
.interlude-cap{
  position: absolute;
  left: 20px; top: 12px;
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .18em;
  color: var(--fg-quiet);
  background: color-mix(in srgb, #0F0D0A 78%, transparent);
  padding: 3px 8px;
}

/* ---------- 幕間の Sound Check：リズムマシーン ----------
   仕事の紹介ではないので、**畳んだ状態が既定**。開くまでは細い一行しか出ない。
   幕間の中（`.interlude` の内側）に置いてある ─ 外に出すと
   `.interlude + .sec` が外れて継ぎ目のギザギザが元に戻ってしまう。 */
/* メニューの飛び先。ヘッダー（sticky）と帯のぶんだけ下げて着地させる ─
   そのままだと Sound Check の行がヘッダーの裏に隠れる。
   この位置に止めると、上に帯がまるごと入って「計器の下に道具がある」形になる */
.rm-wrap{
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: calc(var(--top-h, 65px) + var(--band-h, 190px));
}
.rm-open{
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 13px 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  color: var(--fg-dim);
  transition: color .2s;
}
.rm-open:hover{ color: var(--fg); }
/* 2本柱の SOUND MIXING / SOUND DIRECTION と同じ組み方にする。
   枠で囲うと11文字では重たいので、囲まずに色と字間だけで見せる */
.rm-open-eyebrow{
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); flex: none;
}
.rm-open-label{ font-family: var(--font-jp); font-size: 12.5px; letter-spacing: .04em; }
.rm-open-mark{ margin-left: auto; transition: transform .25s; }
.rm-open[aria-expanded="true"] .rm-open-mark{ transform: rotate(180deg); }

.rm{ padding: 4px 0 30px; }
.rm-lede{
  font-size: 12.5px; line-height: 1.9; color: var(--fg-dim);
  margin: 0 0 20px; max-width: 56em;
}
.rm-lede b{ color: var(--fg); font-weight: 600; }

/* 操作バーも帯のすぐ下に貼り付ける。**再生ボタンが画面外にあると
   「打ちながら聴く」ができない** ─ ロールを見ているとき、デスクトップでも
   400px ほど上に行ってしまう。帯と合わせて、上から ヘッダー / 帯 / 操作バー の3段。 */
.rm-bar{
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  position: sticky;
  top: calc(var(--top-h, 65px) + var(--band-h, 190px));
  z-index: 3;
  background: var(--surface);   /* 幕間の地色。--ground だと帯より明るく浮く */
  padding: 9px 0; margin-bottom: 14px;
  box-shadow: 0 1px 0 var(--line-soft);
}
.rm-field{ display: inline-flex; align-items: center; gap: 9px; }
.rm-field label, .rm-field output{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  color: var(--fg-dim); text-transform: uppercase;
}
.rm-field output{ color: var(--fg-dim); font-variant-numeric: tabular-nums; min-width: 3ch; }

/* つまみ。年のタイムラインと同じ「レールとつまみ」の見え方に寄せる */
.rm-field input[type="range"]{
  -webkit-appearance: none; appearance: none;
  width: 104px; height: 3px; background: var(--line); cursor: pointer;
}
.rm-field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 11px; height: 15px; background: var(--accent); cursor: grab;
}
.rm-field input[type="range"]::-moz-range-thumb{
  width: 11px; height: 15px; background: var(--accent); border: 0; border-radius: 0; cursor: grab;
}
.rm-field input[type="range"]:focus-visible{ outline: 1px solid var(--accent); outline-offset: 4px; }

.rm-play, .rm-clear{
  --c: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--fg-dim); padding: 8px 16px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(var(--line), var(--line)) border-box;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  transition: color .2s;
}
.rm-play:hover, .rm-clear:hover{ color: var(--fg); }
.rm-play[aria-pressed="true"]{
  color: #14110D;
  background:
    linear-gradient(var(--accent), var(--accent)) padding-box,
    linear-gradient(var(--accent), var(--accent)) border-box;
}
/* ▶ と ■。文字で出すと書体で大きさが変わるので図形で描く */
.rm-play-mark{
  width: 0; height: 0; flex: none;
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.rm-play[aria-pressed="true"] .rm-play-mark{
  width: 8px; height: 8px; border: 0; background: currentColor;
}

/* 幅を止めておく。画面いっぱいに伸ばすと1マスが横長になって、
   打ち込む道具ではなく帯グラフに見えてしまう */
.rm-grid{ display: flex; flex-direction: column; gap: 5px; max-width: 720px; }
.rm-row{ display: flex; align-items: center; gap: 10px; }
/* 押すとその音だけ鳴る。押せると分かるように、
   下線は `.filter-note a` と同じ「ふだんは透明、乗せると出る」形にする */
.rm-name{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  color: var(--fg-dim);
  min-width: 62px; flex: none;
  background: none; padding: 0 0 2px; cursor: pointer; text-align: left;
  border: 0; border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.rm-name:hover{ color: var(--fg); border-bottom-color: var(--line); }
.rm-name:focus-visible{ outline: 1px solid var(--fg); outline-offset: 3px; }
.rm-cells{ display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; }
.rm-cell{
  flex: 1 1 0; min-width: 0; height: 30px;
  border: 1px solid var(--line); background: #17140F;
  cursor: pointer; padding: 0;
  transition: background .12s, border-color .12s;
}
/* 拍の頭を濃くして、小節の切れ目が目で追えるようにする */
.rm-cell.is-head{ background: #1E1A14; }
.rm-cell.is-bar{ margin-left: 8px; }
.rm-cell:hover{ border-color: var(--fg-faint); }
.rm-cell[aria-pressed="true"]{
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  border-color: var(--accent);
}
/* 再生ヘッドが通っているマス。押してある/いないの上に重ねる */
.rm-cell.is-now{ box-shadow: inset 0 0 0 1px var(--fg); }
.rm-cell.is-now[aria-pressed="true"]{ background: #FCE2A8; }
.rm-cell:focus-visible{ outline: 1px solid var(--fg); outline-offset: 2px; }

/* ---------- セクションの見出し（Rhythm / Oscillator）----------
   楽器が2つになったので、どちらの操作なのかを名前で示す。
   `消す` を上の操作バーから各セクションへ移したのも同じ理由 ─
   バーに置いたままだと「どちらを消すのか」が言えない。
   テンポ・音量・再生だけが共用（同期の要はここが1組しかないこと）。 */
.rm-sec{ margin-bottom: 22px; }

/* ---- セクションの境目（2026年8月16日）----
   **空きだけでは仕切りにならなかった。**
   状態の札を右端へ寄せ、`16分 × 2小節 / C3–B4` を見出しの真下に降ろして
   「上25px・下12px」まで持っていっても、**まだリズムとオシレーターの境目が読めない**
   （山口さん）。2つのマス目は形も色も似ているので、**空きの差だけでは境目に見えない。**

   罫線はこのサイトが既に使っている仕切り（`.sec` の `border-top` と同じ引きかた）。
   **卓のモジュールの継ぎ目**として読めるので、新しい道具を持ち込まずに済む。

   ⚠️ **色は `--fg-faint`。2段上げた結果なので、下げ戻さないこと。**
   `--line-soft`（#221E18）は**パネルの中の暗がりでは消えた**。
   マス目の枠と同じ `--line`（#2E2820）まで上げても**まだ薄い**（山口さん）。
   4案（#2E2820／#484036／#6D6458／2px）を並べて撮り、**#6D6458 を採った**。
   これは `--fg-faint` そのもので、トークンの但し書きが
   「**文字には使わない。罫線・枠・背景のためだけに残してある**」─ まさにこの用途。
   鍵盤の象牙（#948A78）より暗く、マス目の枠より明るいので、順位も崩れない。

   ⚠️ **`border-top` にしないこと。** `.rm-sec` はパネル幅（1076px）まで広がるが、
   マス目とロールは 720px で止まっているので、**罫線だけが右へ356pxはみ出す。**
   絵として宙に浮くので、720px で止めた `::before` で引く。

   ⚠️ 管理画面は `.rm-sec + .rm-sec` を `display:none` で隠している。
   同じセレクタなので**罫線も一緒に消える**（別のセレクタで書き直さないこと）。 */
/* 罫線の下は、上より広く取る。**線は下のかたまりの始まりを言っている**ので、
   同じだけ空けると、どちらに属する線なのかが決まらない（上22px・下24px） */
.rm-sec + .rm-sec{ position: relative; padding-top: 24px; }
.rm-sec + .rm-sec::before{
  content: ''; position: absolute; top: 0; left: 0;
  width: 100%; max-width: 720px; height: 1px;
  background: var(--fg-faint);
}

/* **マス目と同じ幅で止める。** 画面いっぱいに広げると、右に寄せたボタンが
   自分が操作するグリッドから離れて、どこに効くのか分からなくなる */
.rm-sec-head{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-bottom: 9px; max-width: 720px;
}
.rm-sec-name{
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-dim);
}
/* これが `margin-right: auto` を持つので、後ろのボタン類は右へ寄る。
   空の桟を1つ置くより、もともと出したい字に働かせるほうが崩れにくい */
.rm-sec-sub{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  color: var(--fg-dim); margin-right: auto;
}
.rm-sec-head .rm-clear{ padding: 5px 12px; font-size: 10px; }

/* 波形の3択。音色の見本帳ではなく発振器のつまみなので、
   倍音の少ない順（正弦→三角→矩形）に並べる */
.rm-waves{ display: inline-flex; border: 1px solid var(--line); }
.rm-wave{
  font-family: var(--font-jp); font-size: 10.5px; letter-spacing: .04em;
  color: var(--fg-dim); background: none; border: 0;
  padding: 5px 10px; cursor: pointer;
  transition: color .2s, background .2s;
}
.rm-wave + .rm-wave{ border-left: 1px solid var(--line); }
.rm-wave:hover{ color: var(--fg); }
.rm-wave[aria-pressed="true"]{ color: #14110D; background: var(--accent); }
.rm-wave:focus-visible{ outline: 1px solid var(--fg); outline-offset: -3px; }
/* 引き直しで波形が入れ替わった瞬間だけ、枠が一度だけ張り出す。
   **人が選んだときは出さない**（自分で押したものに合図は要らない） */
.rm-wave.is-swap{ animation: rm-swap .7s ease-out; }
@keyframes rm-swap{
  0%{ box-shadow: 0 0 0 0 rgba(247,171,0,.9); }
  100%{ box-shadow: 0 0 0 7px rgba(247,171,0,0); }
}

/* ---------- オシレーターの操作と状態（2026年8月16日）----------
   **見出しの列に置くのは1回きりの動作だけ。状態は下の札が言う。**

   以前はここに「ランダム」「2ループごと」「消す」が同じ顔で並んでいた ─
   1回きりの動作・入り切りの状態・取り返しのつかない動作が同じ形をしていて、
   しかも2ループごとの引き直しが**予告も痕跡も無く**起きるので、
   「音が勝手に変わった」ようにしか見えなかった。 */

/* ⟳。押すと何かが起き直す、と形で言う。押している間だけ半回転させる */
.rm-rand{ gap: 8px; }
.rm-rand-mark{ flex: none; display: block; transition: transform .4s ease-out; }
.rm-rand:active .rm-rand-mark{ transform: rotate(180deg); }

/* **札が「ホールド」と「解除」で入れ替わっても、幅は変えない。**
   ここが伸び縮みすると、隣の「空にする」が押すたびに行を跨いで飛ぶ。
   長いほう（ホールド）で止めて、短い「解除」は中で泳がせる */
.rm-hold{ min-width: 72px; justify-content: center; }

/* **ホールドは、回っているときにしか意味がない。**
   自分で打ち込んだものには止める時計がそもそも無いので、そのときは押せなくする。
   ここは数少ない「無効にするのが正しい」場面 ─ **消してしまうと、
   そういう機能があること自体が伝わらない** */
.rm-clear:disabled{ color: var(--fg-faint); cursor: default; }
.rm-clear:disabled:hover{ color: var(--fg-faint); }

/* **取り返しのつかない動作は、作る動作と隣り合わせにしない。**
   枠も字も変えず、間だけ空ける ─ 赤くしたり小さくしたりすると、
   このパネルで唯一「危ない顔」をした部品ができてしまう
   （打ち込みは保存していないし、ランダム更新でいつでも作り直せる） */
.rm-clear-gap{ margin-left: 10px; }

/* ---- 状態の札 ----
   **札も拍のカウンターも右端に寄せて、それを変えるボタンの真下に重ねる。**
   下段の左に置くと、操作は上段の右にあるので目が対角線を往復する。
   ボタンの列（.rm-sec-head）とここは同じ 720px で右が揃うので、真下に来る。

   **バーは置かない**（一度作って捨てた）。再生ヘッドは2小節で1周、
   更新の周期は4小節 ─ **流れる速さの違う計器が2つ縦に並ぶ**ことになる。
   数字にすれば「流れる」ものは再生ヘッドだけに戻る。 */
.rm-state{
  display: flex; align-items: baseline; justify-content: flex-end;
  gap: 12px; max-width: 720px; margin-bottom: 10px; min-height: 15px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  color: var(--fg-faint);
}
/* **この行の左端には `16分 × 2小節 / C3–B4` が入る。**
   もともと見出しにあったものを降ろした ─ 札を右端へ寄せたぶん、
   **見出しの真下（左側）が空になって、`OSCILLATOR` の字が上のリズムのマス目に
   吸い寄せられていた**（上に22px・下に40px）。名乗っているものの真下に字が要る。
   この行の中では、後ろの計器を右へ押す桟も兼ねる（`margin-right:auto`）。 */
.rm-state .rm-sec-sub{ font-size: inherit; letter-spacing: inherit; }
/* 拍と札はひとかたまり。狭い画面で折り返しても、**札だけ下の行に残らない** */
.rm-state-live{ display: inline-flex; align-items: baseline; gap: 12px; }
/* 見出しから `.rm-sec-sub` が抜けたので、右へ寄せる役目は波形の枠が引き受ける
   （`.rm-waves` はオシレーターの見出しにしか無いので、リズム側は今までどおり） */
.rm-sec-head .rm-waves{ margin-left: auto; }
/* **数字の幅が揺れると、1拍ごとに札が横に動く** */
.rm-state-beat{ font-variant-numeric: tabular-nums; }

/* **ボタンの形をさせない。** 枠も地色も持たせず、点＋等幅の字にする ─
   これはサイトの「計器まわりのラベル」の書式なので、押すものではないと形で分かる。
   **押しても何も起きないボタンは、いちばん質の悪い部品**なので、そこには寄せない。
   （状態を名前にしたボタンは「押すのはそうすることか、やめることか」も読めなくなる） */
.rm-lamp{
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  letter-spacing: .14em; color: var(--fg-quiet);
  transition: color .25s;
}
.rm-lamp-dot{
  width: 6px; height: 6px; flex: none;
  background: transparent; box-shadow: inset 0 0 0 1px var(--fg-faint);
  transition: background .25s;
}
/* 回っている＝明るいオレンジ／ホールド中＝暗いオレンジ／手入力中＝空の点。
   **明るさが「機械がどれだけ握っているか」の順に並ぶ** */
.rm-state.is-auto .rm-lamp{ color: var(--accent); }
.rm-state.is-auto .rm-lamp-dot{ background: var(--accent); box-shadow: none; }
.rm-state.is-hold .rm-lamp{ color: var(--accent-deep); }
.rm-state.is-hold .rm-lamp-dot{ background: var(--accent-deep); box-shadow: none; }
/* 引き直しが走った瞬間だけ、点と字が白く沸く（＝いま入れ替わった） */
.rm-state.is-hit .rm-lamp{ color: #FFF3D6; }
.rm-state.is-hit .rm-lamp-dot{ background: #FFF3D6; }

/* ---------- オシレーターのピアノロール ----------
   24行（C3〜B4）× 32マス（16分×2小節）。

   **横の格子はリズムのマス目とぴったり重なる。**
   リズムは16マス・隙間4px、ロールは32マス・隙間4px。この2つは
   ロール2マスぶんの幅（2c+隙間）がリズム1マスぶんに一致する組み合わせで、
   小節線の8pxも同じ位置に入る。**隙間の値を片方だけ変えると格子がずれる。**

   行は薄く組む（13px）。DAWのロールがそうだからというだけでなく、
   太くすると2オクターブでパネルが1画面に収まらなくなる。 */
.rm-roll{
  max-width: 720px;
  /* 鍵盤の色。地の暗さを壊さない範囲の「暗がりの中の象牙」。
     真っ白にすると、この列がパネルでいちばん明るいものになって主役を食う */
  --key-ivory: #948A78;
  --key-ink:   #100D08;
}
.rm-roll-inner{ position: relative; display: flex; flex-direction: column; gap: 1px; }
.rm-roll-row{ display: flex; align-items: stretch; gap: 10px; }

/* ---- 左の鍵盤 ----
   「あまりピアノロールに見えない」という指摘から足した（2026年8月13日）。

   **白鍵の面は24行ぜんぶに敷く。** 黒鍵の行は左62%だけを黒く塗るので、
   **右側は上から下まで途切れずにつながる** ─ これが鍵盤に見える仕掛け。
   行ごとに白と黒で塗り分けると、鍵盤ではなく縞模様にしかならない。
   黒鍵が左（＝奥）にあるのも本物と同じ向き。

   線を入れるのは**白鍵どうしが隣り合う境目（ミ|ファ・シ|ド）だけ**。
   全部の行に線を引くと、これも縞になる。

   幅は**リズムのトラック名と同じ 62px**。ここを変えると格子が縦に揃わなくなる。 */
.rm-key{
  position: relative; z-index: 0;
  min-width: 62px; flex: none;
  /* 行の隙間（1px）をまたいで、鍵盤を1枚につなげる */
  align-self: stretch; margin-bottom: -1px;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 4px 0 0; border: 0;
  background: var(--surface);  /* 狭い画面で左に貼り付けたとき、下を透かさないため（幕間の地色） */
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
  color: #14110D;              /* 白鍵の上に載る字なので、地色と同じ濃さで刷る */
  cursor: pointer;
}
/* 鍵盤の面。z-index:-1 で、親の背景の上・文字の下に入る */
.rm-key::after{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--key-ivory);
}
.rm-roll-row.is-black .rm-key::after{
  background: linear-gradient(90deg, var(--key-ink) 0 62%, var(--key-ivory) 62%);
}
.rm-roll-row.is-wsep .rm-key::after{ box-shadow: inset 0 -1px 0 var(--ground); }
.rm-roll-inner .rm-roll-row:last-child .rm-key{ margin-bottom: 0; }
.rm-key:hover::after{ background: var(--fg-dim); }
.rm-roll-row.is-black .rm-key:hover::after{
  background: linear-gradient(90deg, #2E271C 0 62%, var(--fg-dim) 62%);
}
.rm-key:focus-visible{ outline: 1px solid var(--fg); outline-offset: -2px; }
.rm-roll-cells{ display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; }
/* **枠線は付けない。** リズムの16マスなら枠が利くが、768マスに1本ずつ引くと
   細かい網になって、置いた音のほうが読めなくなる。
   代わりに「黒鍵の行」と「拍の頭の列」の明暗だけで格子を見せる */
.rm-rcell{
  flex: 1 1 0; min-width: 0; height: 13px;
  border: 0; background: #1D1912;
  cursor: pointer; padding: 0;
  transition: background .1s;
}
/* 地の明暗（黒鍵の行・拍の頭・ホバー）は**すべて「置いていないマス」の話**なので、
   `:not([aria-pressed="true"])` を必ず付ける。

   ⚠️ 一度これで事故を起こしている（2026年8月13日）。
   `.rm-roll-row.is-black .rm-rcell` はクラス3つ、`.rm-rcell[aria-pressed="true"]` は2つなので、
   **行の地色が「置いてある」の色に勝って、黒鍵の行に置いた音が消えていた。**
   再生ヘッドの `.is-now`（4つ）だけは勝つので、**鳴った一瞬だけ光る**という
   いちばん気づきにくい出かたになる。
   押してある側の順位を上げて直すこともできるが、それだと**次に行の modifier を
   足した人がまた同じ穴に落ちる**。地の側を「空のマス限定」と書くほうが壊れない。 */
.rm-roll-row.is-black .rm-rcell:not([aria-pressed="true"]){ background: #16120B; }
.rm-rcell.is-head:not([aria-pressed="true"]){ background: #2A2419; }
.rm-roll-row.is-black .rm-rcell.is-head:not([aria-pressed="true"]){ background: #201B12; }
.rm-rcell:hover:not([aria-pressed="true"]){ background: var(--line); }
/* オクターブの頭（C）に細い線。2オクターブの切れ目が見える
   （これは地色ではなく罫線なので、置いてあるマスにも効かせてよい） */
.rm-roll-row.is-c .rm-rcell{ box-shadow: inset 0 -1px 0 var(--line); }
.rm-rcell.is-bar{ margin-left: 8px; }
.rm-rcell[aria-pressed="true"]{
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
}
.rm-rcell.is-now[aria-pressed="true"]{ background: #FCE2A8; }
.rm-rcell:focus-visible{ outline: 1px solid var(--fg); outline-offset: 1px; }

/* 引き直した瞬間、**置き直された音だけが立ち上がる**。
   0.4秒のこの合図があるだけで「勝手に消えた」が「いま入れ替わった」に変わる ─
   引き直しは**出来事**なのに、以前は予告も痕跡も無かった。
   `.is-fresh` を付けるのは**予約した時刻が来てから**（音より絵が先に変わらないように） */
.rm-roll.is-fresh .rm-rcell[aria-pressed="true"]{ animation: rm-note-in .42s ease-out; }
@keyframes rm-note-in{
  0%{ background: #FFF3D6; transform: scaleY(.25); }
  100%{ transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce){
  .rm-roll.is-fresh .rm-rcell[aria-pressed="true"]{ animation: none; }
  .rm-wave.is-swap{ animation: none; }
}

/* 再生ヘッド。マス1つずつに class を付け外しすると、16分では
   1秒あたり数百回の書き換えになる。線を1本 transform で動かすだけにした */
.rm-head{
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 1px; background: var(--fg);
  opacity: 0; pointer-events: none;
}
.rm-wrap.is-playing .rm-head{ opacity: .55; }

.rm-note{
  margin: 18px 0 0;
  font-size: 11.5px; line-height: 1.85; color: var(--fg-dim);
  max-width: 52em;
}
.rm-note b{ color: var(--fg-dim); font-weight: 600; }

/* 鳴っているあいだのレベルメーターは、**下から積み上がる本物の向き**にする
   （ふだんはスクロール量を上から流しているだけなので向きが逆） */
.rail-meter.is-live i{ top: auto; bottom: 0; }

/* ---- レールの計器を帯の上に載せ替える（2026年8月13日）----
   レール（74pxの左柱）は狭い画面では出さないので、**位相計もレベルメーターも
   そこには存在していなかった。** 鳴らしても計器が本物になるところが半分見えない。
   **JSが同じ要素をここへ移してくる**（main.js。canvas は増やさない）。
   帯は Sound Check を開くと画面の上に貼り付くので、鳴らしている間ずっと見える。
   置き場所は左下 ─ 右下は「Spectrogram」の見出しが使っている。

   **760px なのは `.rail{display:none}` と同じ境目だから。**
   下の Sound Check の寸法（720px）とは別の話なので、揃えないこと ─
   ずらすと、そのあいだの幅で計器がどこにも出なくなる（一度720pxで書いて踏んだ）。 */
@media (max-width: 760px){
  /* ---- 帯の左を「計器の区画」にする（2026年8月15日）----
     **絵の上に直に置いていたので、鳴らすと計器が消えていた**（山口さんの指摘）。
     スペクトログラムの明るい端は 247,171,0 ＝ `--accent` そのもので、
     レベルメーターの塗りも位相計の線も同じ色。色をずらすのでは直らない ─
     絵は 地の色〜オレンジ〜白 の全部を使うので、
     **どの色を選んでも、いつかは絵と同じ色になる。**

     ここまでに2つ捨てている。**①計器の下にだけ板を敷く** ＝ 応急手当てに見える
     （浮いた箱は、絵とも版面とも寸法の関係が無いので「後から貼った物」に見える）。
     **②帯の下辺を全幅の「計器の段」にする** ＝ 見た目は決まったが、
     **絵のいちばん美味しい所を隠してしまった**（山口さんの指摘）─
     帯の下は低域で、鳴っているあいだ常に濃い情報が出ている場所。

     **だから隠す場所を、下（周波数）から左（時間）へ移す。**
     スクロールする表示では、左端は**いちばん古い時間＝これから消える所**なので、
     そこを空けるのがいちばん安い。**低域を捨てるのと、消えかけの1秒を捨てるのとでは、
     失うものの値段が違う。** 山口さんの判断。

     **区画は、鳴っているあいだだけ現れる**（2026年8月15日、山口さんの案）。
     止まっているときは画が帯いっぱいに出ていて、再生すると
     **左から板が滑り込んできて、その上に位相計とレベルメーターが乗ってくる。**
     画の境目は板に押されて右へ動く。**「鳴らすと計器が本物に変わる」という
     この幕間の見せ場が、そのまま動きになる** ─ 常設の区画だと、
     止まっているあいだも画が削られたまま、ただ狭い帯になる。

     作りは3つ：
       ① 板（`::after`）＝ 地色から透明へのグラデーション1枚。**画を溶かして終わらせる**。
          止まっているときは `translateX(-100%)` で画面の外に出してある
       ② 位相計とメーターは板と同じ量だけずらしてあり、**板と一緒に入ってくる**
       ③ Spectrogram の札は左上＝**この区画の真上**。**鳴り出したら引っ込む**ので、
          計器とは入れ替わりになる（もとは右下＝計器と対角で、「メーターの名前」と
          誤読されない置き方だった。札を上端へ移したのでこの担保は無くなり、
          **同時に見えないことが今の担保**。札の `opacity` と計器の滑り込みは
          どちらも `.is-sounding` なので、片方だけ外さないこと）

     **`mask-image` で画を抜く作りから、板をかぶせる作りに変えた。**
     動かすのが `transform` 1つになる（マスクの座標を動かすより滑らかで、
     毎フレーム描き換わる canvas にマスクの計算が乗らない）。
     **左へ出した計器がページの外へはみ出すが、`body{overflow-x:clip}` が受けている** ─
     帯に `overflow:hidden` を足さないこと（sticky と相性が悪い。2026年8月13日の教訓）。

     ⚠️ 隠し文字の `movwav` は幅の 62〜88% に焼いてあるので、左を削っても無傷。
     **区画を右へ広げるなら 60% までにすること**（越えると字が欠ける）。 */
  .interlude-band{
    /* **左右の余白 20px は、ページ本体（`.wrap`）の余白と同じ数字。**
       計器の左端が、下のパネルや見出しの左端と一直線に揃う。
       ⚠️ 下の `.wrap, .top-in, .foot-in` の padding と対で動かすこと */
    --ins-x: 20px;
    --ins-y: 11px;     /* 帯の上下の縁からの余白 */
    --ins-sc: 76px;    /* 位相計の一辺 */
    --ins-gap: 14px;   /* 位相計とメーターの間 */
    --ins-bar: 5px;    /* メーターの柱の太さ */
    --ins-tick: 4px;   /* 目盛りの長さ */
    /* 計器の区画（ここまで画は来ない）＝ 余白＋位相計＋間＋柱＋目盛り＋逃げ */
    --bay-w: calc(var(--ins-x) + var(--ins-sc) + var(--ins-gap)
                  + var(--ins-bar) + 3px + var(--ins-tick) + 8px);
    --bay-fade: 26px;  /* 画が溶けきるまでの距離 */
    /* 板の幅＝滑り込む距離。計器もこの数字だけずらす（別々に書くとずれる） */
    --bay-total: calc(var(--bay-w) + var(--bay-fade));
    --bay-ease: 420ms cubic-bezier(.22, .61, .36, 1);
  }
  /* 滑り込む板。**`.has-instruments` は JS が計器を移したときだけ付く**（main.js）─
     板だけ先に出ると、JSが動かない環境で「計器が来ないのに左だけ潰れた画」になる。
     ⚠️ `::after` は最後の子なので canvas より上に来る。**計器はさらに上**（`z-index`）。 */
  .interlude-band.has-instruments::after{
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--bay-total);
    z-index: 1;
    /* 地色 → 透明。**切らずに溶かす**ので、スクロールしてきた列が縁で断ち切られない */
    background: linear-gradient(to right,
      var(--surface) 0, var(--surface) var(--bay-w), transparent 100%);
    transform: translateX(-100%);
    transition: transform var(--bay-ease);
    pointer-events: none;
  }
  .interlude-band.has-instruments.is-sounding::after{ transform: none; }
  /* 位相計は区画の左。**縦に積まず、メーターと横に並べる**（2026年8月15日、山口さんの案）─
     縦に積むと 108px の帯では位相計28px＋メーター50pxにしかならず、
     どちらも小さいまま終わる。横に並べれば**両方とも帯の高さいっぱい**まで使える。
     画は短くなるが、消していくのは左＝古い時間なので安い。 */
  .interlude-band.has-instruments .rail-scope{
    position: absolute;
    left: var(--ins-x);
    top: 50%; bottom: auto;
    /* 縦の中央寄せと、板と一緒に入ってくるずらしを1つの transform にまとめる
       （2つに分けて書けないので、**中央寄せの -50% を落とさないこと**） */
    transform: translate(calc(-1 * var(--bay-total)), -50%);
    transition: transform var(--bay-ease);
    width: var(--ins-sc); height: var(--ins-sc);
    z-index: 2;
    /* 区画は地の色そのものなので、`--line-soft` の枠では消える。
       ただし濃くしすぎると、28pxの箱では枠が中身より強くなる（26%で試して戻した）。
       **窓の枠と目盛りが同じ強さに見えるところ**が18% */
    border-color: color-mix(in srgb, var(--sage) 18%, transparent);
  }
  /* メーターは縦のまま、位相計の右へ。**上下を突っ張るので、帯の高さがそのまま振れ幅**。
     Sound Check を開くと 130px → 108px になるが、突っ張っているので自動で追う */
  .interlude-band.has-instruments .rail-meter{
    position: absolute;
    left: calc(var(--ins-x) + var(--ins-sc) + var(--ins-gap));
    top: var(--ins-y);
    bottom: var(--ins-y);
    transform: translateX(calc(-1 * var(--bay-total)));
    transition: transform var(--bay-ease);
    width: var(--ins-bar); height: auto;
    z-index: 2;
    /* **地色と混ぜる（＝不透明）。** 振れていない側も端まで見えて初めて目盛りが働く */
    background: color-mix(in srgb, var(--sage) 22%, var(--ground));
  }
  /* ⚠️ **待機中の計器は、画面の外へ出しすぎないこと。**
     canvas は `runWhenVisible()`（main.js）が `IntersectionObserver` で回していて、
     **`rootMargin` は 120px**。待機位置での位相計の右端は
     `--ins-x + --ins-sc - --bay-total` ＝ 96 - 156 ＝ **-60px** で、まだ観測範囲の内側なので、
     **待っているあいだも描き続けている＝滑り込んできた瞬間から生きている。**
     区画（`--bay-total`）を 216px より広げると右端が -120px を越えて観測から外れ、
     **入ってきた最初の一瞬だけ位相計が真っ黒**になる。広げるときはここを計算し直すこと。 */
  /* 鳴り出したら、板と計器がそろって入ってくる */
  .interlude-band.has-instruments.is-sounding .rail-scope{ transform: translate(0, -50%); }
  .interlude-band.has-instruments.is-sounding .rail-meter{ transform: none; }

  /* ⚠️ **動きを減らす設定のときは滑らせない。**
     出る・出ないは意味のある変化なので残し、移動の途中だけを省く */
  @media (prefers-reduced-motion: reduce){
    .interlude-band.has-instruments::after,
    .interlude-band.has-instruments .rail-scope,
    .interlude-band.has-instruments .rail-meter,
    .interlude-band .interlude-cap{ transition: none; }
  }

  /* **鳴っているあいだ、札は引っ込める**（2026年8月15日、山口さんの指摘）。
     鳴り出すと帯は作り物の絵から実測に変わる ─ そこがいちばんの見せ場なので、
     狭い画面では画を1文字ぶんでも広く見せる。**消すのではなく引く** ─
     止めれば戻るので、`display` ではなく不透明度で、絵の切り替わりと同じ速さで。
     ⚠️ `.is-sounding` は main.js の `visualsOn/Off` が付け外しする。
     **試聴（トラック名を押したとき）でも付く** ─ 音が出ているかどうかで揃える */
  .interlude-band .interlude-cap{ transition: opacity .28s ease; }
  .interlude-band.is-sounding .interlude-cap{ opacity: 0; }

  /* 目盛り。柱の右に、レールの dB スケールと同じ5点（0 / -6 / -12 / -24 / -∞）の割りで
     刻みだけ引く。**読めない大きさの字は置かない** ─
     数字はデスクトップのレールが持っている（`.rail-scale`。狭い画面では出さない） */
  .interlude-band.has-instruments .rail-meter::after{
    content: "";
    position: absolute;
    left: calc(100% + 3px); top: 0; bottom: 0;
    width: var(--ins-tick);
    /* 25%刻みで4本＋下端に1本。**下端＝-∞ は必ず要る**
       （繰り返しだけだと 100% の位置には出ず、目盛りが4点で終わる） */
    background-image:
      repeating-linear-gradient(to bottom, var(--fg-faint) 0 1px, transparent 1px 25%),
      linear-gradient(var(--fg-faint), var(--fg-faint));
    background-size: 100% 100%, 100% 1px;
    background-position: 0 0, 0 100%;
    background-repeat: no-repeat;
  }
}

@media (max-width: 720px){
  /* ---- 狭い画面ではひと回り小さく組む（2026年8月13日）----
     **読ませる字より、打ち込む場所のほうが要る。**
     内訳を測って、効く順に詰めた（375pxでパネル 1082px → 下の実測値へ）。
     デスクトップの寸法は変えていない。 */
  .rm-lede{ font-size: 11.5px; line-height: 1.75; margin-bottom: 14px; }
  .rm-note{ font-size: 11px; line-height: 1.7; margin-top: 14px; }
  /* ⚠️ **セクションの間は、見出しの中の折り返しより広く保つこと。**
     狭い画面では見出しの部品が2行になるので、ここを詰めすぎると
     `OSCILLATOR` の字が上のリズムのマス目に付いて見える（16px では足りなかった） */
  .rm-sec{ margin-bottom: 22px; }
  .rm-sec + .rm-sec{ padding-top: 18px; }

  /* 見出しは6つの部品が2行に折り返すので、部品を小さくすると素直に効く */
  .rm-sec-head{ gap: 6px 8px; margin-bottom: 7px; }
  .rm-sec-name{ font-size: 10px; letter-spacing: .16em; }
  .rm-sec-sub{ font-size: 9px; }
  .rm-sec-head .rm-clear{ padding: 4px 9px; font-size: 9.5px; }
  .rm-wave{ padding: 4px 8px; font-size: 10px; }
  .rm-hold{ min-width: 62px; }
  .rm-clear-gap{ margin-left: 4px; }
  /* **狭い画面では折り返させる。** 「空です。マスを押すと…」まで出ると
     1行には収まらないので、折り返さないと右へはみ出す。
     ⚠️ ここで `.rm-state-msg` の順番を入れ替えないこと ─
     左端は `16分 × 2小節 / C3–B4` の場所で、**見出しの真下を埋める字**。
     前へ出すと、空の説明文のぶんだけ左端が8pxずれる（実際にずれた） */
  .rm-state{ gap: 4px 8px; margin-bottom: 7px; font-size: 9px; flex-wrap: wrap; }
  .rm-state-live{ gap: 8px; }

  /* 操作バーは**貼り付いている3段の一つ**なので、ここを詰めると画面に出ている間ずっと効く */
  .rm-bar{ gap: 7px 12px; }
  .rm-field{ gap: 7px; }
  .rm-field input[type="range"]{ width: 78px; }
  .rm-field label, .rm-field output{ font-size: 9px; letter-spacing: .12em; }
  .rm-play{ padding: 6px 12px; font-size: 10px; }

  .rm-name{ min-width: 0; width: 100%; font-size: 9px; }
  .rm-row{ flex-wrap: wrap; gap: 3px; }
  /* 34→28px。**押しやすさは変わらない** ─ 16マスを画面幅に詰めた時点で
     1マスは横17pxしかなく、指で当てにくいのは縦ではなく横のほうだから */
  .rm-cell{ height: 28px; }
  .rm-grid{ gap: 4px; }
  .rm-cells{ gap: 3px; }
  .rm-cell.is-bar{ margin-left: 5px; }

  /* 32マスを375pxに詰めると1マス7pxで指では押せない。ロールだけ横に流す。
     鍵盤の列は左に貼り付けたままにして、いま何の音の行かを見失わないように。
     **リズムのマス目とは揃わなくなるが、狭い画面ではリズム側も
     トラック名が上に折り返して並びが変わるので、もともと揃っていない。** */
  .rm-roll{ overflow-x: auto; overscroll-behavior-x: contain; }
  .rm-roll-inner{ min-width: 720px; }
  /* 24行あるので、1行の1pxが24pxになる。ここがいちばん大きく効く */
  .rm-rcell{ height: 12px; }
  .rm-key{ position: sticky; left: 0; z-index: 1; padding-right: 5px; font-size: 8.5px; }
}

/* ---------- Works の背景に敷く大きなリサージュ ----------
   作品リストを読み進める間ずっと画面に留まり、3:2 → 1:1 に収束する。
   注意：sticky を効かせるため、この祖先に overflow:hidden を付けないこと。 */
.works-scope{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* リサージュを右へ逃がした分（下の margin-right: -80px）が、
   そのままだとページの横スクロールになる。ここで切る。
   clip は hidden と違ってスクロール領域を作らないので、canvas の sticky が生きたまま残る */
#works{ overflow-x: clip; }
.works-scope > canvas{
  position: sticky;
  top: 20vh;
  display: block;
  margin-left: auto;      /* 右へ寄せて */
  margin-right: -80px;    /* 少しだけ画面の外へ逃がす */
  width: min(520px, 44vw);
  aspect-ratio: 1;
  opacity: .3;            /* 濃さはここ1つで調整できる */
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent);
          mask-image: radial-gradient(closest-side, #000 62%, transparent);
}
/* 本文を背景より前に出す */
#works > .wrap{ position: relative; z-index: 1; }

/* 狭い画面では本文と重なるので出さない */
@media (max-width: 1000px){
  .works-scope{ display: none; }
}

/* ---------- 数字のバンド ----------
   コンソールの数値表示のような並び。実データから出している。 */
.stats{
  --surface: var(--panel);
  display: flex;
  flex-wrap: wrap;
  margin-top: 56px;
  border: 1px solid var(--line-soft);
  background: var(--panel);
}
.stat{
  flex: 1 1 0;
  min-width: 128px;
  padding: 26px 24px 24px;
  border-right: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat:last-child{ border-right: 0; }
.stat-n{
  font-family: var(--font-mono);
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat-l{ font-size: 12.5px; color: var(--fg-dim); margin-top: 10px; }
.stat-en{
  font-family: var(--font-display);
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-dim);
}

/* ---------- 右端のセクション名（左のdBレールと対になる）---------- */
.sec[data-label]::after{
  content: attr(data-label);
  position: absolute;
  right: 14px;
  top: 116px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--fg-quiet);
  opacity: .5;
  writing-mode: vertical-rl;
  pointer-events: none;
}
/* 本文の右端に近づくと重なるので、余白が足りない幅では出さない */
@media (max-width: 1290px){
  .sec[data-label]::after{ display: none; }
}

/* フッターを締める帯 */
.foot-wave{
  height: 72px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 60%);
          mask-image: linear-gradient(to bottom, transparent, #000 60%);
}
.foot-wave .wv-top{ fill: var(--accent); opacity: .22; }
.foot-wave .wv-bot{ fill: var(--sage); opacity: .13; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::after{
  content:""; height:1px; flex:1;
  background: linear-gradient(to right, var(--line), transparent);
}

/* 日本語のプロポーショナル字形。読点・句点・小さい仮名・全角の括弧は、
   字面よりも広い枠を持っていて左右に余白が付いてくる。それを実際の字面の幅まで詰める。
   **見出しだけに掛ける。本文には掛けない** ─ 効きめは文字が大きいほど出るもので、
   14px前後の本文で詰めると、かえって窮屈で読みにくくなるため。
   ヒーローの見出しでは、これが**折り返すかどうかを分けている**（.hero h1 の注を見ること）。
   h3 は柱の見出し・スタッフ名・作品名・募集職種・お知らせの見出しを兼ねている。
   とくに「アシスタントエンジニア（ミキサー助手）」のような全角括弧で効く */
h1, h2, h3{ font-feature-settings: "palt"; }

h2{
  font-family: var(--font-jp);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 600; line-height: 1.45; letter-spacing: .02em;
  margin: 0 0 18px;
  /* 見出しが横に伸びきらないよう、1行の長さに上限を置く。
     About の「一人のミキサーから始まって、いまは音を決めるところまで。」は
     palt を掛けたことで 25.8em まで縮み、広い画面では1行に収まってしまった。
     2行のほうが読ませる形として強いので、そこまで伸びる前に折り返させる。
     **px ではなく em** なのは、文字が小さくなれば必要な幅も一緒に縮むため
     （狭い画面では画面の幅のほうが先に効くので、この指定は何もしない） */
  max-width: 24em;
  text-wrap: balance;
}
/* 見出しの中で「ここでは折り返さない」と決めた塊。
   狭い画面で一語の途中に改行が入るのを防ぐ（「お／待ちしています。」だった）。
   inline-block は行の中でひとかたまりとして扱われるので、
   折り返しは塊と塊のあいだ＝読点のところにしか入らない */
h1 .nb, h2 .nb, h3 .nb{ display: inline-block; }
.lede{ max-width: 46em; color: var(--fg-dim); font-size: 15.5px; margin: 0; }

/* ---------- ヒーロー ---------- */
.hero{
  position: relative;
  min-height: min(84vh, 720px);
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
#wave{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: .95; }
.hero-veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 18% 50%, color-mix(in srgb, var(--ground) 82%, transparent) 0%, color-mix(in srgb, var(--ground) 30%, transparent) 55%, transparent 78%),
    linear-gradient(to bottom, var(--ground) 0%, transparent 22%, transparent 74%, var(--ground) 100%);
}
.hero-in{ position: relative; z-index: 2; }
.hero h1{
  font-family: var(--font-jp);
  font-size: clamp(38px, 6.6vw, 82px);
  font-weight: 600; line-height: 1.28; letter-spacing: .015em;
  margin: 0 0 26px;
  text-wrap: balance;
  /* palt（プロポーショナル字形）は上の h1,h2,h3 でまとめて掛けている。
     **ここでは外さないこと** ─ 「アニメーションの、」が 347px → 307px になっていて、
     これが 375px の画面で折り返さずに済んでいる理由そのものだから */
}

/* 上の指定は「画面幅の6.6%、ただし最小38px」なので、**狭くなっても38pxで止まる**。
   375px なら palt のおかげで収まるが、320px 級の画面はそれでも足りないので、
   ここだけ幅に連動させる。380px では 38px のままなので、**よくある画面では何も縮まない**
   （min の中が 38 を上回る）。効き始めるのは 355px あたりから */
@media (max-width: 380px) {
  .hero h1{ font-size: min(38px, calc(12.2vw - 5px)); }
}
.hero h1 em{ font-style: normal; color: var(--accent); }
.hero p{ max-width: 34em; color: var(--fg-dim); font-size: 16px; margin: 0 0 40px; }
.hero-meta{
  display:flex; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim);
}
.hero-meta span{ padding-right: 20px; margin-right: 20px; border-right: 1px solid var(--line); }
.hero-meta span:last-child{ border-right: 0; }

/* 折り返すと、行末に区切り線だけが取り残される（「… FOUNDED 2012 │」で改行）。
   CSSでは「行の最後の要素」を狙えないので、**折り返す幅では区切りをやめて縦に積む**。
   1行に収まる幅（下の閾値より広いとき）だけ区切り線で繋ぐ。
   閾値が 760 ではなく 900 なのは、左レール72px＋左右32pxが引かれるぶん、
   本文に使える幅が画面幅よりだいぶ狭いため。 */
@media (max-width: 900px){
  .hero-meta{ display: grid; justify-items: start; gap: 6px; }
  .hero-meta span{ padding-right: 0; margin-right: 0; border-right: 0; }
}

/* ヒーローに収まるのは見出しと1文だけなので、下に続きがあることを示す。
   ヒーローの文章と同じ左端に置きたいので、絶対配置ではなく流れの中に置く
   （.hero-in の左端は .wrap の左端と揃っていない。上のコメント参照） */
/* .hero p（max-width と margin-bottom を持っている）に負けないよう、同じ深さで書く */
.hero .hero-scroll{
  margin: 64px 0 0;
  max-width: none;
}
.hero-scroll a{
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--fg-dim); text-decoration: none;
  transition: color .22s;
}
.hero-scroll a:hover{ color: var(--accent); }
.hero-scroll i{
  display: block; position: relative;
  width: 1px; height: 30px; background: var(--line);
  overflow: hidden;
}
/* 線の中を光が下りていく。再生ヘッドと同じで「下へ進む」ことだけを言う */
.hero-scroll i::after{
  content: ""; position: absolute; left: 0; top: 0;
  width: 1px; height: 12px; background: var(--accent);
  animation: movwav-scroll 2.1s cubic-bezier(.4,0,.5,1) infinite;
}
@keyframes movwav-scroll{
  0%   { transform: translateY(-14px); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(30px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .hero-scroll i::after{ animation: none; opacity: .8; }
}

/* ---------- 2本柱 ---------- */
.pillars{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft);
  margin-top: 52px;
}
.pillar{ background: var(--ground); padding: 40px 36px 44px; transition: background .3s; }
.pillar:hover{ background: var(--panel); }
.pillar-no{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: var(--fg-dim); }
.pillar h3{ font-size: 22px; font-weight: 600; margin: 14px 0 4px; letter-spacing: .02em; }
.pillar .en{
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); display:block; margin-bottom: 18px;
}
.pillar p{ margin:0; color: var(--fg-dim); font-size: 14.5px; }

.not{
  margin-top: 28px; padding: 20px 24px;
  border-left: 2px solid var(--line);
  color: var(--fg-dim); font-size: 13.5px; line-height: 1.9;
}
.not b{ color: var(--fg-dim); font-weight: 600; }

/* ---------- Works：DAWのリージョン一覧を模した行リスト ---------- */
/* 見出しの列の幅。3グループで揃えたいので1か所で持つ
   （「担当スタッフ」がいちばん長い。ここを変えると年の帯の開始位置も一緒に動く）。
   **持たせる先は `.filters` ではなく Works の枠。** リストの下の帯（.export）でも
   同じ字下げを使うので、上下の帯で頭が揃う */
#works .wrap{ --label-w: 80px; }
.filters{ display:flex; flex-direction: column; gap: 12px; margin: 40px 0 30px; }
.filter-group{ display:flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-label{
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-dim);
  /* width ではなく min-width。書体が変わって「担当スタッフ」が80pxに収まらなかったとき、
     はみ出してボタンに重なるのではなく、その行だけ少し右にずれるだけで済ませたい */
  min-width: var(--label-w); flex: none;
}
/* 名前を見て「誰？」と思ったときの行き先。ボタンの列の真下に、字下げを揃えて置く
   （+8px は .filter-group の gap のぶん） */
.filter-note{ margin: -4px 0 0 calc(var(--label-w) + 8px); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; }
.filter-note a{
  color: var(--fg-dim); text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: 3px;
  transition: color .2s, border-color .2s;
}
.filter-note a:hover{ color: var(--accent); border-bottom-color: var(--accent); }
/* 行き先のない、ただの断り書き。10.5px なので --fg-faint は使わない（3.3:1 で読めない） */
.filter-note--plain{ color: var(--fg-dim); }

/* 探す欄。ボタン（.chip）と同じ 45度の面取りで、同じ列に属して見えるようにする。
   入力欄そのものに clip-path を掛けると文字まで切れるので、
   外側の箱が枠と面取りを持ち、input は透明で中に座るだけにしてある。 */
.wsearch{
  --c: 8px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  flex: 1 1 240px; max-width: 380px;
  color: var(--fg-dim);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(var(--line), var(--line)) border-box;
  border: 1px solid transparent;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  transition: color .2s;
}
.wsearch:focus-within{
  color: var(--fg);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(var(--accent), var(--accent)) border-box;
}
.wsearch-icon{ flex: none; opacity: .8; }
.wsearch-in{
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  color: var(--fg); background: none; border: 0; padding: 0;
  -webkit-appearance: none; appearance: none;
}
.wsearch-in:focus{ outline: none; } /* 枠は外側の箱が光るので、二重に出さない */
/* 12px の説明文なので --fg-faint（3.3:1）では読めない */
.wsearch-in::placeholder{ color: var(--fg-dim); opacity: 1; }
.wsearch-in::-webkit-search-cancel-button{ filter: invert(1); opacity: .45; cursor: pointer; }
.wsearch-n{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--fg-dim); font-variant-numeric: tabular-nums;
}
.chip{
  --c: 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .1em;
  color: var(--fg-dim);
  padding: 7px 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(var(--line), var(--line)) border-box;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  transition: color .2s;
}
.chip:hover{
  color: var(--fg);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(var(--fg-faint), var(--fg-faint)) border-box;
}
.chip[aria-pressed="true"]{
  color: #14110D;
  background:
    linear-gradient(var(--accent), var(--accent)) padding-box,
    linear-gradient(var(--accent), var(--accent)) border-box;
}
/* 「すべて」＝何も絞っていない状態。**ページで一番強い色を、いちばん情報の無い
   選択肢に使わない。** ベタ塗りが3つ縦に並ぶと、目が「劇場 31」「Dolby Atmos 10」
   より先にそこへ行っていた（2026年8月13日）。枠と文字だけの「現在地」の見た目にすると、
   ベタ塗り＝実際に絞っている、が一目で分かるようになる。
   data-f="all" は年・種別・仕上げ・担当スタッフの4グループで共通なので、
   絞り込みを足しても同じ扱いになる */
.chip[data-f="all"][aria-pressed="true"]{
  color: var(--accent);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(var(--accent), var(--accent)) border-box;
}
.chip-n{
  font-size: 9px; opacity: .65;
  font-variant-numeric: tabular-nums;
}
/* その年に作品が残っていないときは押せない */
.chip:disabled{ opacity: .3; cursor: default; pointer-events: none; }

/* 「担当」の5人目以降。人が増えてもボタンの列が伸び続けないよう畳んである。
   display:contents で、開いたときに中のボタンが親の flex にそのまま並ぶ
   （囲みの span が1つの塊として扱われると、そこだけ折り返しが変わってしまう）。
   contents は hidden より強いので、閉じる指定を明示しておくこと（Staff と同じ落とし穴） */
.person-more{ display: contents; }
.person-more[hidden]{ display: none; }
.chip--more{ border-style: dashed; }
.chip--more[aria-expanded="true"]{ display: none; }

/* ---------- 年のタイムライン ----------
   25年ぶんをボタンで並べると2行に折り返して締まらないので、
   DAWのタイムライン定規に見立てた1本の帯にしてある。棒の高さ＝その年の本数。
   押す／左右にドラッグする／矢印キーで動かす、の3通りで動かせる。
   幅は画面に合わせて縮むが、1年ぶんは 20px を上限にする（間延びさせない） */
.filter-group--years{ align-items: flex-end; }
/* padding-top はつまみ（27px）＋三角（4px）＋1px。帯の上ぎりぎりに立たせる。
   幅は「年数 × 20px」まで伸びる（--yl-slots は PHP が入れる）。
   年が増えても棒が痩せていかないように。入らなくなったら縮む */
.yearline{
  position: relative; min-width: 0; padding-top: 32px;
  flex: 1 1 auto;
  max-width: calc(var(--yl-slots, 26) * 20px);
}

.yl-track{
  position: relative;
  display: flex; align-items: flex-end;
  height: 36px;
  border-bottom: 1px solid var(--line);
  cursor: ew-resize;
  touch-action: pan-y; /* 縦スクロールは殺さない。横だけこちらで受ける */
}
.ybar{
  flex: 1 1 0; min-width: 0; max-width: 20px;
  height: var(--h, 10px);
  padding: 0; border: 0; background: none;
  position: relative; cursor: inherit;
}
/* 棒そのものは擬似要素。枠にすき間を持たせて、当たり判定だけ広く取る */
/* ⚠️ **色に --line（罫線用）を使わないこと。**
   地色 #14110D に対して 1.3:1 しかなく、棒が事実上描かれていない状態になる
   （2026年8月13日まで --line だった）。この帯は飾りではなく、
   「2016年が山」「2000年から途切れていない」という**26年ぶんの形**を出す図で、
   トップで作品が既定の1年ぶんしか出ないぶん、厚みを語るのはここの仕事。
   UI部品の目安 3:1 に対して --fg-quiet は 4.9:1。 */
.ybar::before{
  content: ""; position: absolute; left: 2px; right: 2px; top: 0; bottom: 0;
  background: var(--fg-quiet);
  transition: background .16s;
}
.ybar:hover::before{ background: var(--sage); }
.ybar[aria-pressed="true"]::before{ background: var(--accent); }
.ybar:disabled{ pointer-events: none; }
/* 押せない年（他の絞り込みで0本）。棒が明るくなったぶん、
   「無い」ほうは地に近いところまで落として差を付ける */
.ybar:disabled::before{ background: var(--line); }
.ybar:focus-visible{ outline: 1px solid var(--accent); outline-offset: 3px; }
.ybar--gap{ flex: 1 1 0; min-width: 0; max-width: 20px; height: 1px; }

/* 選択中の年に立つ再生ヘッド。ヒーローの再生ヘッドと同じ役目 */
.yl-head{
  position: absolute; top: -4px; bottom: 0; width: 2px;
  background: var(--accent); opacity: .8;
  transform: translateX(-50%);
  transition: left .12s cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}
/* 帯の上に載った「つまみ」。
   スライダーだと分かるのはレールとつまみが揃っているときなので、
   帯（レール）に対して、年の表示のほうをつまみの形にしてある。
   左右の山括弧は「横に動く」ことの合図。マウスを載せる前に伝えたいので、
   色と形だけで分かるようにする */
.yl-read{
  position: absolute; top: 0; left: 0; margin: 0;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 7px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  color: var(--accent); white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--accent);
  cursor: grab; touch-action: pan-y;
  transition: left .12s cubic-bezier(.2,.7,.3,1);
}
.yl-read:active{ cursor: grabbing; }
/* 下に伸びる三角。つまみと再生ヘッドをつなぐ。
   両端の年ではつまみを帯の中に寄せるので、三角だけは再生ヘッドの真上に残す
   （位置は JS が --tip に入れる） */
.yl-read::after{
  content: ""; position: absolute; top: 100%; left: var(--tip, 50%);
  transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--accent);
}
.yl-read b{ font-weight: 400; }
.yl-read span{ color: var(--sage); }
.yl-read i{ font-style: normal; opacity: .6; }
/* 「すべて」のときは帯の上に貼りつかせない（ヘッドと三角も消す） */
.yearline.is-all .yl-read{ transform: none; cursor: default; }
.yearline.is-all .yl-read::after,
.yearline.is-all .yl-read i,
.yearline.is-all .yl-head{ display: none; }

.yl-axis{ position: relative; height: 14px; margin-top: 7px; }
/* 目盛りの年。--fg-faint だと地色とのコントラストが 3.3:1 しかなく、
   この字の小ささでは読めない。--fg-dim で 6.8:1 まで上げてある */
.yl-axis span{
  position: absolute; top: 0; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  color: var(--fg-dim);
}
/* 「年」と「すべて」は、軸の目盛りではなく帯の底に揃える（軸のぶんだけ持ち上げる） */
.filter-group--years .filter-label,
.yl-all{ margin-bottom: 20px; }
.yl-all{ padding: 6px 12px; }

.worklist{ border-top: 1px solid var(--line-soft); }

.wrow{
  display: grid;
  /* 3列目は種別＋フォーマットのタグ。時期の注釈が付くぶん、担当の列を広くとる。
     ⚠️ **作品名の列に 1fr を渡さないこと。** 1440px では列が496pxまで伸びるのに対し、
     作品名の実測は中央値183px・4分の3が255px以下なので、**作品名の終わりからタグまで
     300px以上の空白**ができて、行の3つの情報が繋がって読めなくなっていた。
     360px は「はみ出して2行になる作品が151本中11本」で選んだ値
     （340pxで13本、420pxで7本。全部1行に収めようとすると496pxが要る）。
     余った幅は最後の列（担当クレジット）が受ける＝行の右端は今までどおり揃う。 */
  grid-template-columns: 60px minmax(0, 360px) 146px minmax(220px, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 15px 0 15px 14px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  transition: background .2s;
}
.wrow[hidden]{ display: none; }
/* 選択中のリージョンのように、左端にオレンジの縁が出る */
.wrow::before{
  content:""; position:absolute; left:0; top:-1px; bottom:-1px; width:2px;
  background: var(--accent);
  transform: scaleY(0); transform-origin: center;
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
/* ⚠️ **この演出は、公式サイトのURLがある行にだけ出すこと**（`.wrow--link`）。
   行全体が光って左端にオレンジの縁が出る＝DAWで選択中のリージョンの見た目で、
   「押せる」と読める。ところがリンクは作品名の文字だけだったので、
   1440pxでは行1076pxのうち101pxしか押せず、390pxでは行350×114pxに対して
   リンクが99×15px（面積の4%）しかなかった。
   **URLの無い19本は光るだけで何も起きない**という、いちばん質の悪い形になっていた。
   2026年8月13日に、①リンクのある行だけ光らせる ②その行は全体を押せるようにする、
   の両方を入れた。 */
.wrow--link:hover{ background: var(--panel); }
.wrow--link:hover::before{ transform: scaleY(1); }
/* キーボードで来たときも同じ見た目になるように（タブで作品名に入った状態） */
.wrow--link:has(a:focus-visible){ background: var(--panel); }
.wrow--link:has(a:focus-visible)::before{ transform: scaleY(1); }

/* 行全体を作品名のリンクの当たり判定にする。
   JSでクリックを拾うのではなく**本物の `<a>` を広げている**ので、
   タブ移動・フォーカス・中クリック・右クリックのメニューが全部そのまま効く。
   `.wrow` に position:relative が要る（上で指定ずみ）。
   副作用として、行の上でのテキスト選択はしにくくなる。 */
.wrow--link .wrow-title a::after{
  content: ""; position: absolute; inset: 0;
  /* ⚠️ **z-index を外さないこと。** 種別タグ（`.tag`）は45度の面取りを
     `clip-path` でやっていて、**clip-path は要素に stacking context を作る**。
     どちらも z-index が auto だと、DOM順で後ろにいる `.tag` のほうが上に来るので、
     **タグの上（1行あたり約40px）だけクリックが素通りしていた** ─ 行は光るのに
     押せない、という8月13日に潰したはずの形が、タグの幅ぶんだけ残っていた
     （リンクのある132本のうち131本が該当。2026年8月13日に発見）。
     透明な面なので、重ねてもタグの見た目は何も変わらない。 */
  z-index: 1;
}

.wrow-year{
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em;
  /* 年は飾りではなく情報なので --fg-faint（3.3:1）では足りない。
     目立たせたくないのは大きさと書体で足りている */
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
/* 直前の行と同じ年のときは隠す（JSが付ける） */
.wrow-year.dup{ visibility: hidden; }

.wrow-title{
  font-size: 15.5px; font-weight: 500; line-height: 1.6;
  margin: 0; color: var(--fg);
}
/* **inline-flex にしないこと。** 折り返した作品名では、テキスト全体が1つの
   フレックスアイテムになるので、矢印が最後の文字ではなく**1行目の末尾**に付く
   （「わたしが恋人になれるわけないじゃん、↗ / ムリムリ！」になっていた）。
   ふつうのインラインなら、行が折り返しても矢印は最後の文字のあとに流れる。 */
.wrow-title a{
  text-decoration: none;
  transition: color .18s;
}
.wrow-title a:hover{ color: var(--accent); }
.ext{ margin-left: 6px; opacity: .5; vertical-align: 1px; }
.wrow-title a:hover .ext{ opacity: 1; }

.tag{
  --c: 5px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .1em;
  padding: 3px 8px; color: var(--sage);
  display: inline-block; white-space: nowrap;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(var(--line), var(--line)) border-box;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}
.wrow-type{ display:flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; }
/* 仕上げ方（ステレオ／5.1ch など）。**これから登録する作品にだけ付く。**
   既にある100本は空なので、種別と同じ強さで出すと「入っていない行」が
   欠けているように見える。枠を外して字だけにし、あくまで補足として置く */
.tag--sub{
  background: none; border: 0; padding: 3px 0;
  color: var(--fg-dim); clip-path: none;
}
.wrow-credit{
  font-size: 12.5px; line-height: 1.7; color: var(--fg-dim);
}
/* 担当クレジットの後ろに、どの立場でやった仕事かを注釈として小さく添える。
   独立前の作品まで並ぶので、行だけ見ても取り違えないようにするため。
   設立後（＝いまの会社としての仕事）が既定なので、そこには何も出さない。
   縦に積むと100行ぶんで背が伸びるので、横に置いて入らない分だけ折り返す */
.wrow-period{
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .1em; white-space: nowrap;
  color: var(--fg-faint);
}

.worklist-empty{
  padding: 40px 0; color: var(--fg-dim); font-size: 14px;
}

/* ---------- 参加作品の持ち帰り（経歴書の印刷／PDF）----------
   リストの足元に付く1本の帯。**面（パネル）にしない**（2026年8月14日）。
   はじめは .stats と同じ塗りのパネルにしていたが、余白と塗りのぶんだけ
   **作品そのものより目立っていた**。ここはリストの主役ではなく、
   読み終えた人のための出口なので、リストの最後の行のように置く。
   作りは絞り込みの棚（.filters）と同じ「monoのラベル＋押せるもの」。
   一覧が上下から同じ形の帯で挟まれる ─ 上は絞る道具、下は持ち帰る道具 */
.export{
  display: flex; flex-wrap: wrap; gap: 10px 8px;
  border-top: 1px solid var(--line-soft);
  padding: 22px 0 0;
  margin-top: 0; /* 罫線は .worklist の最後の行に続けて引く */
}
.export-in{ flex: 1 1 260px; min-width: 0; }
/* ラベルの幅は絞り込みの見出しと同じ（--label-w）。上下の帯で字下げが揃う */
.export-label{
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-dim); margin: 0;
  min-width: var(--label-w); flex: none;
}
.export-h{ margin: 0; font-size: 13.5px; font-weight: 500; letter-spacing: .02em; color: var(--fg); }
.export-p{ margin: 3px 0 0; color: var(--fg-dim); font-size: 12px; line-height: 1.8; }

/* ボタンは文の下。横に並べると、文の終わりからボタンまでが画面幅ぶん空いて、
   同じ帯の中で目が飛ぶ。**幅で組み方を変えない**（スマホと同じ形のまま） */
.export-people{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* 人の名前がそのままボタン。押す前に「誰の・何本ぶんが出るのか」が見えるようにする。
   ふだんは罫線だけ。マウスを載せた／タブで来たときにアクセントの枠へ変わる（.chip と同じ手つき） */
.export-btn{
  --c: 9px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  text-decoration: none;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(var(--line), var(--line)) border-box;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  transition: background .2s;
}
.export-btn:hover,
.export-btn:focus-visible{
  background:
    linear-gradient(var(--panel-hi), var(--panel-hi)) padding-box,
    linear-gradient(var(--accent), var(--accent)) border-box;
}
/* ⚠️ **display の指定が hidden 属性に勝つ**ので、消えるほうを明示しておくこと
   （.staff--more と同じ落とし穴。絞り込み中に入れ替わる札がここで効かなくなる） */
.export-btn[hidden]{ display: none; }
.export-btn svg{ flex: none; color: var(--accent); opacity: .8; transition: opacity .2s; }
.export-btn:hover svg{ opacity: 1; }
.export-name{ font-size: 12.5px; letter-spacing: .04em; color: var(--fg); }
.export-n{
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em;
  color: var(--fg-quiet); font-variant-numeric: tabular-nums;
}
/* 右の小さい字が無いボタンもある。空のまま置くと gap のぶんだけ右が空く */
.export-n:empty{ display: none; }
/* 5人目からは名前を並べず、この1本に切り替わる（movwav_render_profile_panel）。
   破線は「この先で選ぶ」のしるし ─ .chip--more と同じ使い方 */
.export-btn--pick{ border-style: dashed; }

/* Staff のカードに置くぶん。**カードは読み物なので、.chip くらいの大きさに留める** ─
   ここに押しごたえのあるボタンを置くと、Staff が読むところから操作するところに変わる。
   プロフィール文のすぐ下、行の頭に揃えて置く */
.export-btn--staff{ margin-top: 16px; padding: 8px 13px; }
.export-btn--staff svg{ width: 12px; height: 12px; }
.export-btn--staff .export-name{ font-size: 12px; color: var(--fg-dim); }
.export-btn--staff:hover .export-name{ color: var(--fg); }
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Staff ---------- */
.staff{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft);
  margin-top: 48px;
}
.person{
  --surface: var(--ground);
  background: var(--ground); padding: 38px 34px 42px;
  display: grid; grid-template-columns: 72px 1fr; gap: 24px; align-items: start;
}
/* 畳んである4人目以降。開いたときに上の箱と1本の表に見えるよう、
   上の枠線を消して隙間も詰める（.staff どうしが1pxの線でつながる） */
.staff--more{ margin-top: 0; border-top: 0; }
/* .staff の display:grid が hidden 属性（display:none）に勝ってしまうので、明示する */
.staff--more[hidden]{ display: none; }
.staff-toggle{ margin-top: 18px; }
.staff-toggle::after{
  content: "▾"; font-size: 9px; opacity: .7;
  transition: transform .2s;
}
.staff-toggle[aria-expanded="true"]::after{ transform: rotate(180deg); }

/* 人が増えたら3列に詰める。2人のうちは大きく見せたいので2列のまま。
   7人以上で切り替わる（2列のままだと縦にどこまでも伸びて、
   1枚もののページの中で Staff だけが不釣り合いに長くなる）。
   畳んである人も数に入れたいので、判定は .staff 単位ではなく
   「畳む箱があるかどうか」で見る */
@media (min-width: 1001px){
  .staff:has(.person:nth-child(7)),
  .wrap:has(.staff--more) .staff{ grid-template-columns: repeat(3, 1fr); }
  .staff:has(.person:nth-child(7)) .person,
  .wrap:has(.staff--more) .person{ padding: 30px 26px 34px; grid-template-columns: 60px 1fr; gap: 18px; }
  .staff:has(.person:nth-child(7)) .avatar,
  .wrap:has(.staff--more) .avatar{ width: 60px; height: 60px; }
  .staff:has(.person:nth-child(7)) .person h3,
  .wrap:has(.staff--more) .person h3{ font-size: 17px; }
  .staff:has(.person:nth-child(7)) .person p,
  .wrap:has(.staff--more) .person p{ font-size: 12.5px; }
}
.avatar{
  --c: 12px;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  width: 72px; height: 72px;
  border: 1px solid var(--line);
  display:grid; place-items:center;
  font-family: var(--font-display); font-size: 22px; letter-spacing: .06em;
  color: var(--fg-dim); background: var(--panel);
  overflow: hidden;
}
.avatar img{ width:100%; height:100%; object-fit: cover; }
/* 写真がない人は、名前から作った固有の「声紋」が出る */
.avatar .wave-svg{ width: 44px; height: 46px; }
.avatar .wv-top{ fill: var(--accent); opacity: .55; }
.avatar .wv-bot{ fill: var(--sage); opacity: .35; }
/* 写真がない人は、この枠に職種のアイコンが並ぶ */
.avatar--roles{ display:flex; gap: 7px; align-items:center; justify-content:center; }
.role-icon{ display:block; width: 22px; height: 22px; flex: none; }
/* 枠の中の埋まり方を、兼任の数によらず揃える。
   1つの人は大きく、3つ持っている人は小さく */
.avatar--roles .role-icon{ width: 27px; height: 27px; }
.avatar--roles .role-icon:only-child{ width: 38px; height: 38px; }
.avatar--roles .role-icon:first-child:nth-last-child(3),
.avatar--roles .role-icon:first-child:nth-last-child(3) ~ .role-icon{ width: 19px; height: 19px; }
.avatar--roles:has(.role-icon:nth-child(3)){ gap: 5px; }
.role-icon .ri-a{ fill: var(--accent); }
.role-icon .ri-b{ fill: var(--sage); opacity: .5; }
.role-icon .ri-line{ fill: none; stroke: var(--accent); stroke-width: 1.8; }

/* 職種。アイコンだけだと初見で意味が取れないので、必ず日本語を添える */
.roles{ list-style:none; margin: 9px 0 15px; padding: 0; display:flex; flex-wrap:wrap; gap: 8px; }
.role{
  --c: 6px;
  display:inline-flex; align-items:center; gap: 7px;
  padding: 5px 11px 5px 9px;
  font-size: 11.5px; letter-spacing: .05em; line-height: 1.2;
  color: var(--fg-dim);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(var(--line), var(--line)) border-box;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}
.role .role-icon{ width: 15px; height: 15px; }

.person h3{ margin: 0 0 2px; font-size: 20px; font-weight:600; letter-spacing:.03em; }
.person .en{
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); display:block; margin-bottom: 14px;
}
.person p{ margin:0; color: var(--fg-dim); font-size: 13.5px; }

/* ---------- Recruit ---------- */
.recruit{
  --surface: var(--panel);
  background: var(--panel); border: 1px solid var(--line);
  padding: 46px 48px 48px; margin-top: 40px;
  position: relative; overflow: hidden;
}
/* 背景の波形より前に出す */
.recruit > div:not(.recruit-wave){ position: relative; max-width: 46em; }
/* ステータスはこのセクションで一番重要な情報なので、見出しの大きさで出す。
   小さなバッジのままだと補足情報の見た目になり、読み飛ばされる。 */
/* どちらも p なので、.recruit p に負けないよう同じ深さで指定する */
.recruit .status-label{
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 12px;
}
.recruit .status-big{
  display: flex; align-items: center; gap: 14px;
  font-size: clamp(21px, 2.7vw, 30px);
  font-weight: 600; line-height: 1.4; letter-spacing: .02em;
  margin: 0 0 18px;
}
.recruit .status-big i{ width: 11px; height: 11px; border-radius: 50%; display: block; flex: none; }

/* 募集していない：静かな色。中空の点で「消灯」を表す。
   **パネルも小さくする。** 開いているときと同じ大きさで置くと、
   ページでいちばん大きな主張が「募集していません」になってしまう */
.recruit--closed{ border-left: 2px solid var(--line); padding: 30px 34px 32px; }
.recruit--closed .status-label{ margin-bottom: 8px; }
.recruit--closed .status-big{
  color: var(--sage);
  font-size: clamp(18px, 2vw, 21px);
  gap: 11px;
  margin-bottom: 10px;
}
.recruit--closed .status-big i{ width: 9px; height: 9px; background: transparent; border: 2px solid var(--fg-faint); }
.recruit--closed .recruit-body{ font-size: 13.5px; }
.recruit--closed .cta-row{ margin-top: 22px; }

/* 募集中：アクセント色。点は通電しているように脈打つ */
.recruit--open{ border-left: 2px solid var(--accent); }
.recruit--open .status-big{ color: var(--accent); }
.recruit--open .status-big i{
  background: var(--accent);
  animation: movwav-live 2.2s ease-out infinite;
}
@keyframes movwav-live{
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 11px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.recruit h3{ font-size: 19px; font-weight: 600; margin: 0 0 12px; letter-spacing: .02em; color: var(--fg); }
.recruit p{ margin: 0; color: var(--fg-dim); font-size: 14.5px; }
.recruit .cta-row{ margin-top: 30px; }

/* ---------- News ---------- */
.news{
  list-style:none; margin: 44px 0 0; padding:0;
  display:flex; flex-direction:column;
  border-top: 1px solid var(--line-soft);
}
.news li{ border-bottom: 1px solid var(--line-soft); }
.news a{
  display:grid; grid-template-columns: 130px 1fr; gap: 28px;
  padding: 22px 8px; text-decoration:none;
  transition: background .22s, padding-left .22s;
}
.news a:hover{ background: var(--panel); padding-left: 18px; }
.news time{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--fg-dim); font-variant-numeric: tabular-nums; padding-top: 5px;
}
/* お知らせの見出し。トップ（h2「お知らせ」の下）では h3、
   一覧ページ（h1「お知らせ」の下）では h2 になる。見た目は同じ。
   h2 のときは上の h2 の指定が乗ってくるので、ここで打ち消す
   （max-width:24em を残すと 384px で折り返してしまう） */
.news h2, .news h3{
  margin:0; font-size: 16px; font-weight: 500; color: var(--fg); line-height:1.6;
  letter-spacing: normal; max-width: none; text-wrap: wrap;
}

/* 5本目から先はここでしか辿り着けないので、控えめでも見える強さで置く */
.news-all{ margin: 22px 0 0; }
.news-all a{
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em;
  color: var(--fg-dim); text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: color .2s, border-color .2s;
}
.news-all a:hover{ color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- ボタン ---------- */
.cta-row{ display:flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.btn{
  --c: 11px;
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none;
  padding: 15px 30px;
  display: inline-block;
  color: #14110D;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--accent), var(--accent)) padding-box,
    linear-gradient(var(--accent), var(--accent)) border-box;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  transition: color .22s;
}
.btn:hover{
  color: var(--accent);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(var(--accent), var(--accent)) border-box;
}
.btn--ghost{
  color: var(--fg-dim);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(var(--line), var(--line)) border-box;
}
.btn--ghost:hover{
  color: var(--fg);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(var(--fg-dim), var(--fg-dim)) border-box;
}

/* ---------- 下層ページ / 記事 ---------- */
/* 左右は .wrap の 32px を残す。`padding: 88px 0 116px` と一括で書くと
   .wrap より後ろにあるぶんこちらが勝ち、下層ページだけ本文が32px外へ出る
   （ヘッダーのロゴより左から始まっていた） */
.lower{ padding: 88px 32px 116px; }
.lower h1{
  font-size: clamp(28px, 4vw, 44px); font-weight: 600;
  line-height: 1.4; letter-spacing: .02em; margin: 0 0 10px;
  text-wrap: balance;
}
.lower time{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--fg-dim); display:block; margin-bottom: 28px;
}
.prose{ max-width: 40em; color: var(--fg-dim); font-size: 15.5px; }
.prose h2{ font-size: 24px; margin: 48px 0 14px; color: var(--fg); }
.prose h3{ font-size: 19px; margin: 36px 0 10px; color: var(--fg); }
.prose a{ color: var(--accent); text-underline-offset: 3px; }
.prose strong{ color: var(--fg); font-weight: 600; }
/* お知らせを箇条書きで書けるように。**指定が無いとブラウザ既定の黒丸**が出て、
   このサイトだけ急に素のHTMLに見える。印は丸ではなく小さな四角にする ─
   年の棒・リズムのマスと同じ語彙にそろえるため */
.prose ul{ list-style: none; margin: 22px 0; padding: 0; }
.prose ul li{ position: relative; padding-left: 20px; margin: 12px 0; }
.prose ul li::before{
  content: ""; position: absolute; left: 2px; top: .78em;
  width: 5px; height: 5px; background: var(--accent);
}
.prose ol{ margin: 22px 0; padding-left: 24px; }
.prose ol li{ margin: 12px 0; }
/* 番号は飾りではなく読む対象なので --fg-dim。--fg-faint（3.2:1）だと読めない */
.prose ol li::marker{ color: var(--fg-dim); font-family: var(--font-mono); font-size: .85em; }
.prose blockquote{
  margin: 28px 0; padding: 4px 0 4px 22px;
  border-left: 2px solid var(--line); color: var(--fg-dim);
}
.prose code{
  font-family: var(--font-mono); font-size: .88em;
  background: var(--panel); padding: 2px 6px; border: 1px solid var(--line-soft);
}
.prose pre{ overflow-x: auto; background: var(--panel); padding: 18px; border: 1px solid var(--line-soft); }
.prose table{ width:100%; border-collapse: collapse; display:block; overflow-x:auto; }
.prose td, .prose th{ border: 1px solid var(--line); padding: 10px 14px; text-align:left; }
/* 下層ページから出る導線はこれ1本しかないので、装飾より薄くしない
   （--fg-faint は 3.3:1 で、11px だと読めない） */
.back{
  display:inline-block; margin-top: 56px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing:.14em;
  color: var(--fg-dim); text-decoration:none;
}
.back:hover{ color: var(--accent); }

/* ---------- フッター ---------- */
.foot{ padding-left: var(--rail); border-top: 1px solid var(--line-soft); background: var(--panel); }
.foot-in{
  max-width: var(--wrap); margin: 0 auto; padding: 56px 32px 44px;
  display:flex; flex-wrap: wrap; justify-content: space-between; gap: 40px;
}
.facts{ display:grid; grid-template-columns: auto 1fr; gap: 6px 28px; font-size: 13.5px; color: var(--fg-dim); margin:0; }
.facts dt{
  font-family: var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--fg-dim); padding-top:5px;
}
.facts dd{ margin:0; }
.foot-brand{ display:flex; flex-direction:column; gap: 16px; align-items: flex-start; }
.foot-x{
  --c: 8px;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .06em;
  color: var(--fg-dim); text-decoration: none;
  border: 1px solid var(--line);
  padding: 8px 14px;
  transition: color .2s, border-color .2s;
}
.foot-x:hover{ color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

/* 代表個人の note。
   ⚠️ **X と同じ「囲みボタン」にしないこと。** 名義が違うものが同じ形で並ぶと、
   個人の読み物が会社の発信物に見える。こちらは文のまま置く。 */
.foot-note{
  margin: 0;
  max-width: 22em;
  font-size: 12px; line-height: 1.8;
  color: var(--fg-dim);
}
/* .nb は見出しの中でしか効かない（`h1 .nb` 指定）ので、ここで別に宣言する。
   inline-block ではなく nowrap を使うこと ─ inline-block だと前後の空白が
   詰まって「山口貴之がnote」とくっつく。折り返すなら「が」のあとの空白で折る。 */
.foot-note .nb{ white-space: nowrap; }
/* ⚠️ **リンクだと分かる色にすること**（2026年9月8日に直した）。
   最初は `--fg-dim` ＋ `--line` の下線で置いたが、**まわりの文が同じ色（差1.00:1）で、
   下線も地色に対して1.21:1 ＝ ほぼ見えず**、山口さんに「リンクが動いてなさそう」と言われた。
   実際は動いていて、**リンクに見えなかっただけ**。
   本文の中のリンクは `.prose a` が `--accent` と決めてあるので、そちらに揃える。 */
.foot-note a{
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  /* 押せる範囲を広げる。27×13px しかなく、指では狙いにくかった。
     padding で当たり判定だけ広げ、同じ量の負の margin で行の見た目は動かさない。 */
  padding: 9px 6px;
  margin: -9px -6px;
  transition: text-decoration-color .2s, color .2s;
}
.foot-note a:hover,
.foot-note a:focus-visible{ text-decoration-color: var(--accent); }

/* Contact のXボタンだけ、等幅でハンドル名を出す */
.btn--x{
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  letter-spacing: .08em;
  text-transform: none;
}
.copy{ font-family: var(--font-mono); font-size: 10px; letter-spacing:.14em; color: var(--fg-dim); }

/* ---------- 入場アニメーション ---------- */
.reveal{ opacity: 0; transform: translateY(18px); }
.reveal.in{
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- お問い合わせ（Contact Form 7） ----------
   入力欄の角も45度で落としたいが、clip-path はフォーカスの枠まで
   切り落としてしまう。ここは面取りをやめて実線の枠で通し、
   面取りは送信ボタン（枠が要らない）だけに掛ける。 */
/* Turnstile（スパム対策のウィジェット）。
   フォームタグの出力が <div> なので <p> では囲めない。余白はここで付ける。 */
.wpcf7-turnstile{ margin: 26px 0 4px; max-width: 460px; }

/* スパム対策のハニーポット。人には見せず、読み上げにも出さず、
   それでいて display:none は避ける（display:none だと埋めないボットがいる）。 */
.movwav-hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-lede{ color: var(--fg); font-size: 16.5px; line-height: 1.95; }
.contact-note{
  margin-top: 22px; padding: 2px 0 2px 20px;
  border-left: 2px solid var(--line);
  color: var(--fg-dim); font-size: 14px;
}

/* 右の列に置く X のアカウント。断り書きと同じ罫線の付けかたにして、
   2つで1本の柱に見えるようにしてある（バラバラの箱を2つ置かない）。
   ⚠️ **見出しを付けないこと。** 断り書きのほうにも見出しは無く、
   見出しが付くとそれだけでフォームと並ぶ「もう一つの窓口」に見える
   （X へ問い合わせを誘導しない ─ 理由は page.php のコメント） */
.lower-aside{
  margin-top: 22px; padding: 2px 0 2px 20px;
  border-left: 2px solid var(--line);
}
.lower-aside p{ margin: 0 0 16px; font-size: 14px; line-height: 1.9; }

/* ---- お問い合わせページだけ2列に組む ----
   1列だと 1440px でフォーム620pxの右に520pxの空白が出て、
   トップの各セクションが画面いっぱいなぶん、下層だけ作りかけに見えていた。
   **読ませるものを増やすのではなく、もともとページにあった断り書きを右へ移している。**

   `.prose` を display:contents にして、中の段落を直接この grid に並べている
   （断り書きだけを別の列へ出したいが、本文は WordPress のページ本文なので、
   PHP側で分解すると本文を書き換えるたびに壊れる）。
   ⚠️ display:contents で消えるのは箱だけで、color と font-size は継承されるので効いたまま。
   ただし `.prose` の max-width:40em は箱ごと消えるため、列幅のほうで持たせてある。

   閾値 1080px は、左レール72px＋左右32pxを引いても
   620px＋間64px＋右の列240pxが取れる幅（1080 → 右の列260px）。 */
@media (min-width: 1080px){
  .lower--split{
    display: grid;
    grid-template-columns: minmax(0, 40em) minmax(240px, 1fr);
    column-gap: 64px;
    align-items: start;
  }
  /* 本文側は左の列。想定外の段落が増えても左に積まれる */
  .lower--split > *,
  .lower--split .prose > *{ grid-column: 1; }
  .lower--split .prose{ display: contents; }

  .lower--split > .eyebrow{ grid-area: 1 / 1; }
  .lower--split > h1{ grid-area: 2 / 1; }
  .lower--split .contact-lede{ grid-area: 3 / 1; }
  .lower--split .wpcf7{ grid-area: 4 / 1; }
  .lower--split > .back{ grid-area: 5 / 1; }

  /* 右の列。断り書きはリード文の横、別の窓口はフォームの書き出しの横に来る */
  .lower--split .contact-note{ grid-area: 3 / 2; margin-top: 4px; }
  .lower--split > .lower-aside{ grid-area: 4 / 2; margin-top: 46px; }
}

.wpcf7{ margin-top: 46px; max-width: 40em; }
.wpcf7 form > p:first-child{ margin-top: 0; }
.cf-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.cf-field{ margin: 0 0 24px; }
.cf-field label{
  display: block; margin-bottom: 9px;
  font-family: var(--font-jp); font-size: 12.5px; letter-spacing: .06em;
  color: var(--fg);
}
/* CF7 が入力欄を包む span。インラインのままだと行の下に余白が出る */
.cf-field .wpcf7-form-control-wrap{ display: block; }
.cf-req{
  margin-left: 8px; padding: 2px 7px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  color: var(--accent); border: 1px solid var(--accent-deep);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea{
  width: 100%; box-sizing: border-box;
  padding: 13px 15px;
  font-family: var(--font-jp); font-size: 15px; line-height: 1.75;
  color: var(--fg);
  background-color: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  transition: border-color .2s, background-color .2s;
}
/* rows="10" のままだと縦に伸びすぎるので、高さはCSS側で決める */
.wpcf7 textarea{ height: 200px; min-height: 120px; resize: vertical; }
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus{
  outline: none;
  border-color: var(--accent);
  background-color: var(--panel-hi);
}
/* いまプレースホルダを置いている欄は無いが、足した日に読めない字にならないように。
   --fg-faint は 3.2:1 で文字には使わない（トークンの定義のところを見ること） */
.wpcf7 ::placeholder{ color: var(--fg-dim); }

/* select の矢印。ネイティブのものは明るい地色を前提にしていて暗い面では消える */
.wpcf7 select{
  appearance: none; -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23A3998C' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.wpcf7 select option{ background: var(--panel); color: var(--fg); }

.cf-submit{ margin: 34px 0 0; }
.wpcf7 input[type="submit"]{
  --c: 11px;
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  padding: 15px 42px;
  color: #14110D; cursor: pointer;
  border: 1px solid transparent;
  border-radius: 0;
  -webkit-appearance: none;
  background:
    linear-gradient(var(--accent), var(--accent)) padding-box,
    linear-gradient(var(--accent), var(--accent)) border-box;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  transition: color .22s;
}
.wpcf7 input[type="submit"]:hover{
  color: var(--accent);
  background:
    linear-gradient(var(--ground), var(--ground)) padding-box,
    linear-gradient(var(--accent), var(--accent)) border-box;
}
.wpcf7 input[type="submit"]:disabled{ opacity: .5; cursor: default; }

/* 送信結果・エラー。赤は地色から浮くので、こげ茶寄りの赤に落としている */
.wpcf7 form .wpcf7-response-output{
  margin: 28px 0 0; padding: 14px 18px;
  font-family: var(--font-jp); font-size: 13.5px; line-height: 1.8;
  color: var(--fg-dim);
  background: var(--panel);
  border: 1px solid var(--line);
}
.wpcf7 form.sent .wpcf7-response-output{ border-color: var(--accent-deep); color: var(--fg); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output{ border-color: #8C4A2F; color: #E8B9A4; }
.wpcf7 .wpcf7-not-valid{ border-color: #8C4A2F; }
.wpcf7-not-valid-tip{
  display: block; margin-top: 7px;
  font-family: var(--font-jp); font-size: 12px; color: #E08A5E;
}
.wpcf7-spinner{ background-color: var(--fg-faint); }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1000px){
  .wrow{ grid-template-columns: 54px 1fr 130px; }
  .wrow-credit{ grid-column: 2 / -1; font-size: 12px; }
  .recruit{ padding: 36px 30px 38px; }
}
/* ---- ナビだけは早めにハンバーガーへ落とす ----
   **項目が6つになったので、760px では入りきらない**（2026年8月13日、Sound Check を追加）。
   768px で実測すると1行に541px要るのに、ブランド名を除くと442pxしか無く**99px足りない**
   ─ gap を詰めても届かない。折り返すとヘッダーが2行になってページごと横にはみ出す
   （公開初日に7項目で踏んだのと同じ形）。**1行に収まる下限は約870px。**

   **ここだけで切って、他のモバイル用の指定（760px）は動かさない** ─
   まとめて広げると、761〜940px で段組みや余白まで全部モバイル用に変わってしまう。

   **940px なのは余裕を取るため。** 実測では 901px でも 19px だけ余って収まるが、
   **Futura が無い環境（Windows など）では代替書体に落ちて幅が変わる。**
   こちらの Mac で測った19pxは、そのまま当てにできない。
   項目を増やすときや、書体を触ったときは、この幅を測り直すこと。 */
@media (max-width: 940px){
  .nav-toggle{ display:block; }
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction: column; gap:0; align-items: stretch;
    background: var(--ground); border-bottom: 1px solid var(--line);
    padding: 8px 20px 20px;
  }
  .nav.open{ display:flex; }
  .nav a{ padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
  /* 畳んだメニューでは縦に並ぶので、区切りの縦線は要らない（行の下線がその役をする）。
     等幅・小さめの組み方は残す ─ 押す面積は padding が持っているので、小ささは触りごこちに響かない */
  .nav-aside{ margin-left: 0; padding-left: 0; }
  .nav-aside::before{ display: none; }
}

@media (max-width: 760px){
  :root{ --rail: 0px; }
  .rail{ display:none; }
  /* セクションの上余白（76px）と固定ヘッダー（約64px）が近いので、
     ナビから飛ぶと見出しがヘッダーの真下に張り付く。その分だけ手前で止める */
  html{ scroll-padding-top: 72px; }
  /* ⚠️ 上の `scroll-padding-top` と `.rm-wrap` の `scroll-margin-top` は**足し算になる**。
     引かないと、メニューから飛んだときにヘッダーと帯のあいだに72pxの隙間が空く
     （実測で気づいた。1280pxでは scroll-padding が無いので起きない） */
  .rm-wrap{ scroll-margin-top: calc(var(--top-h, 65px) + var(--band-h, 130px) - 72px); }
  .hero .hero-scroll{ margin-top: 40px; }
  .sec{ padding: 76px 0; }
  .lower{ padding: 56px 20px 76px; }
  .wrap, .top-in, .foot-in{ padding-left: 20px; padding-right: 20px; }
  .pillars, .staff{ grid-template-columns: 1fr; }
  .sec[data-label]::after{ display: none; }
  .interlude{ --band-h: 130px; }
  /* 狭い画面では、上に貼り付く3段（ヘッダー65＋帯＋操作バー）で画面が食われる。
     **開いている間だけ帯を少し低くして、打ち込む場所を広げる。**
     元絵は 560×128 固定なので、隠し文字の作りは何も変わらない（縦に詰まるだけ）。
     これ以上詰めると帯が「線」に見えて、計器として読めなくなる */
  .interlude.is-check-open{ --band-h: 108px; }
  .rm-bar{ padding: 7px 0; margin-bottom: 12px; }
  .stat{ flex: 1 1 42%; min-width: 0; }
  .stat:nth-child(2n){ border-right: 0; }
  .stat{ border-bottom: 1px solid var(--line-soft); }
  /* 最後の行は外枠と二重線になるので引かない（4枠＝2行ちょうど） */
  .stat:nth-last-child(-n+2){ border-bottom: 0; }
  .wrow{
    grid-template-columns: 48px 1fr;
    gap: 4px 14px;
    padding: 16px 0 18px 12px;
  }
  .wrow-title{ font-size: 15px; }
  .wrow-type{ grid-column: 2; }
  .wrow-credit{ grid-column: 2; }
  .filter-label{ width: 100%; }
  .filter-note{ margin-left: 0; } /* 見出しが1行を占めるので、字下げも要らない */
  /* 絞り込みの見出しと同じく、ラベルが1行を占める（下の文とボタンが頭から始まる） */
  .export-label{ width: 100%; }
  .hero{ min-height: 78vh; }
  .news a{ grid-template-columns: 1fr; gap: 6px; }
  .news time{ padding-top: 0; }
  .cf-grid{ grid-template-columns: 1fr; }
  .wpcf7 input[type="submit"]{ width: 100%; }
}