/* 池田卓 OFFICIAL SITE — 共通デザインシステム（design-proposals/claude-design-seed/top-page-polished.html から抽出） */
  /* ── カラーパレット：ikeda-suguru-colors.md の変数をそのまま使用 ── */
  :root[data-theme="day"] {
    --bg:          #F7F3E8;
    --bg-card:     #FFFFFF;
    --bg-footer:   #EFEADB;
    --primary:     #1C3A57;
    --ink:         #263340;
    /* 可読性チューニング：--sub/--faint は仕様値より一段濃く。--sub は 2026-07-24 デザイン補正で
       #47555F→#3D4A55 に更に一段濃く（依頼による調整） */
    --sub:         #3D4A55;
    --faint:       #5A6774;
    --accent:      #2FA8B5;
    --accent-soft: #E4F2F3;
    /* 半透明ガラスの上に小さい英字を置くための濃いターコイズ（MVのNEXT LIVEラベル）。
       暗いライブ写真が透ける最悪面でも 4.5:1 を確保する濃さ */
    --accent-ink:  #11505A;
    --amber:       #B9873C;
    --green:       #3E6B52;
    --vermil:      #C3512F;      /* 朱：ライブ強調（線・文字用） */
    --vermil-fill: #C3512F;      /* 朱：塗り用（白文字が乗る濃さ） */
    --hairline:    rgba(28,58,87,.2); /* 罫線：ベージュ#E5DECBが紺/ティール線と混在して見えたため紺(--primary #1C3A57)の淡階調へ統一（2026-07-24FB） */
    /* 派生（マッピング用） */
    --on-accent:   #263340;      /* ターコイズボタン上の文字＝濃色 */
    --mv-base:     #10202e;      /* MVの地：藍を沈めた色 */
    /* MVの幕（スクリム）と写真の減光。文字が載る左下だけ薄く沈める＝可読性は面の影ではなく
       文字の三層 text-shadow で稼ぐので、写真を汚さない濃さに留める（2026-07-30FB） */
    --day-corner:  rgba(9,24,38,.52);   /* 左下の隅（文字の下） */
    --mv-filter:      saturate(1.04);   /* スライド既定（現在は全枚 -live 側を使用・保険で残す） */
    --mv-filter-live: saturate(1.04);   /* ライブ3枚。昼は一律 */
    --night-veil:  rgba(8,20,32,0);     /* 全スライドに一律でかける藍のベール（昼は無し） */
    --page-mat:    #d9d3c4;      /* サイト外周のマット */
    --btn-bg:      #2FA8B5;
    /* すりガラスカード：海写真の上に浮かぶ半透明カードの地・罫・ぼかしフィルタ。
       参考: グラスモーフィズム標準レシピ（白15%+blur12）を可読性優先で翻案
       ＝地は白ベースで一段透明に、その分ブラーを強めて背景を溶かし文字を立たせる（2026-07-24FB） */
    --glass-bg:    rgba(249,244,233,.68); /* 白ベースに砂ベージュをひとさじ＋可読性FBで一段不透明化（.55→.68） */
    --glass-line:  rgba(255,255,255,.45); /* カード上辺の白いリム（強め） */
    --glass-filter: blur(16px) saturate(.8) brightness(1.08); /* 強ブラーが透明でも文字を立たせる鍵 */
    --glass-filter-strong: blur(24px) saturate(.8) brightness(1.18); /* MVカードは写真の真上＝地を薄くするぶんブラーを強めて文字を立たせる */
    --glass-sheen: rgba(255,255,255,.35); /* 左上からの光の反射（多層backgroundの第1層） */
    --shadow:0 1px 0 #fff8, 0 24px 60px -32px #1c3a5740;
    /* イラストの縁取り（2026-07-27FB。根拠は末尾「イラストの縁取り」節のコメント） */
    --kai-edge:      #8A99A6;    /* 常に暗い地に載る2点（フッターのヤマネコ・MVのマスコット）＝青みグレー */
    --kai-edge-totop:#F7F3E8;    /* TOPへ戻るの三線だけ生成り＝明地では地に溶け、暗地で明線として立つ */
    /* 最新情報タブ .on の塗り分け（カテゴリチップと系統を揃える・2026-07-27FB）。
       文字色は --bg（生成り #F7F3E8）のままなので、--vermil/--amber の生値では 4.17:1／2.87:1 で
       AA に届かない。同系のまま暗度を上げた値を置く（括弧内は #F7F3E8 に対する実測） */
    --kai-tab-live:  #A83F1E;    /* 5.58:1 */
    --kai-tab-news:  #1A6F79;    /* 5.27:1（.c.info の文字色と同値＝タグとタブが同じ水色で揃う） */
    --kai-tab-media: #8A6220;    /* 4.92:1 */
  }
  :root[data-theme="night"] {
    --bg:          #16283A;
    --bg-card:     #1E3448;
    --bg-footer:   #12222F;
    --primary:     #EFE9DA;
    --ink:         #EDF3F0;
    --sub:         #C3D3DC;
    --faint:       #A6BDCA;
    --accent:      #5BC4CE;
    --accent-soft: #1D3C4A;
    --accent-ink:  #5BC4CE;      /* 夜のカードは暗いので accent のままで十分明るい（対比6.4:1） */
    --amber:       #C99A52;
    --green:       #7FB79A;
    --vermil:      #E87B5A;      /* 朱：暗地で映える明るめ（線・文字用） */
    --vermil-fill: #C34A2C;      /* 朱：塗り用（白文字のため暗め） */
    --hairline:    #2B4459;
    --on-accent:   #0E2230;
    --mv-base:     #0b1723;
    /* 夜モードは「モノクロやライブハウスのステージ写真が映える」ために作った幕なので、
       減光を全スライドに一律がけしない（2026-07-30FB）。
       ・島（昼のカラー写真）＝夜の地に馴染ませる減光をかける
       ・ライブ2枚＝ほぼ素のまま。ステージ照明が輝いて見えることを優先
       藍のベールも一律がけを .12 まで薄め、写真を殺さない範囲に留める */
    --day-corner:  rgba(6,17,28,.58);
    --mv-filter:      saturate(.60) brightness(.78) contrast(1.04);
    --mv-filter-live: saturate(.95) brightness(.97) contrast(1.02);
    --night-veil:  rgba(8,20,33,.12);
    --page-mat:    #0d1a26;
    --btn-bg:      #5BC4CE;
    /* すりガラスカード（夜）：藍を沈めた半透明地（可読性FBで .5→.6 に一段不透明化） */
    --glass-bg:    rgba(16,32,46,.6);
    --glass-line:  rgba(255,255,255,.16);
    --glass-filter: blur(14px) saturate(.9); /* 夜は輝度ブーストなし */
    --glass-filter-strong: blur(22px) saturate(.9) brightness(.92);
    --glass-sheen: rgba(255,255,255,.08); /* 夜は反射を弱める */
    --shadow:0 24px 60px -32px #000c;
    --kai-edge:      #9AA7B2;    /* 夜はフッターが --mv-base とさらに暗く同値では沈むため一段明るく */
    --kai-edge-totop:#F7F3E8;    /* 昼夜で分けない＝夜も本文帯が暗く、明線が要る条件は同じ */
    /* 夜は --primary が明色・--bg が暗色に反転する（明地＋暗文字）ため、昼の暗い塗りでは潰れる。
       明るい夜トークンをそのまま塗りに使い、暗い --bg(#16283A) 文字を乗せる */
    --kai-tab-live:  var(--vermil);  /* 5.30:1 */
    --kai-tab-news:  var(--accent);  /* 7.32:1 */
    --kai-tab-media: var(--amber);   /* 5.88:1 */
  }

  *{box-sizing:border-box}
  html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  /* アンカー着地（#main・#contact 等）で見出しが画面上端に貼り付かないよう余白を持たせる */
  section[id],main[id]{scroll-margin-top:24px}
  body{
    margin:0;background:var(--bg);overflow-x:hidden;
    font-family:"Zen Kaku Gothic New",system-ui,sans-serif;
    color:var(--ink);font-size:17px;line-height:1.75;
  }
  /* PCは基本テキストを一段大きく（SPは17pxのまま）。remは:root基準のため.7rem等のチップ・小ラベルは不変 */
  @media(min-width:821px){body{font-size:18px}}
  .mincho{font-family:"Shippori Mincho B1","Zen Kaku Gothic New",serif;}
  img{display:block;max-width:100%}
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

  /* ── 署名モチーフ：西表島の生きもの・草木の手描き風ラインアイコン ──
     セクションごとに島のモチーフを一つずつ。飴色の細い線で、小さく控えめに */
  .icn{display:inline-block;width:32px;height:32px;flex:none;color:var(--amber);
    fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

  /* ── 背景の額装：水彩紅型の海 ──
     提供素材（資料/img）の水彩タッチ紅型イラスト。ジンベエザメ・マンタ・
     ウミガメ・サンゴにクマノミ、波、ヤシとハイビスカスを左右余白へ。
     素材自体が淡いパステルなので、線画SVG時代より不透明度は高めに置き、
     紙地に溶けるよう乗算気味の低コントラストで額装する。 */
  .seascape{display:none}
  /* ── スマホ〜タブレット（1280px未満）：左右の画面端から紅型を「ちら見せ」する額装 ──
     PC のような左右余白が無い幅では、本体の約半分を画面外へ逃がし端から覗かせる。
     不透明度は本文可読性を優先して低く、縦は左右交互に散らして1画面1〜2点の密度にする。
     層はコンテンツの背面（z:-1）。基調色セクションはこの幅で背景透過にして下のイラストを
     通し、色付き帯・カード・写真は不透明のまま＝スクロールでイラストが帯の裏に隠れて流れる。 */
  @media (max-width:1279.98px){
    .seascape{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none}
    .seascape .side{position:absolute;top:0;bottom:0;overflow:hidden;
      width:min(32vw, 140px);opacity:.3}
    :root[data-theme="night"] .seascape .side{opacity:.2}
    .seascape .side.l{left:0}
    .seascape .side.r{right:0}
    .seascape img{position:absolute;height:auto;
      width:min(32vw, 140px);mix-blend-mode:multiply}
    /* 左＝上:流水紋(bk_img_2反転)／下:サンゴ(bk_img_4=彩度を抑える)
       テキストと被らないよう約1/3を画面外へ逃がす（2026-07-22指示） */
    .seascape .side.l img{left:0;transform:translateX(-33%)}
    /* 左上の波は絵柄が左端側に密（反転済）のため外へ逃がさず端付けで見せる */
    .seascape .side.l img:nth-child(1){top:4%;width:min(42vw,180px);transform:translateX(0)}
    .seascape .side.l img:nth-child(2){bottom:0;top:auto;
      width:min(40vw,170px);filter:saturate(.72);opacity:.8}
    /* 右＝上:流水紋+小魚(bk_img_3=彩度を抑える)／下:流水紋(bk_img_1)。いずれも右端付け・約1/3画面外へ */
    .seascape .side.r img{right:0;transform:translateX(33%)}
    :root[data-theme="night"] .seascape img{mix-blend-mode:screen;filter:saturate(1.15)}
    /* 右上の魚はさらに右へ＝左1/3（小魚側）だけ覗かせる */
    .seascape .side.r img:nth-child(1){top:12%;width:min(46vw,200px);filter:saturate(.72);opacity:.8;transform:translateX(66%)}
    .seascape .side.r img:nth-child(2){top:62%}
  }
  @media (min-width:1280px){
    .seascape{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none} /* SPと同じくコンテンツ背面 */
    .seascape .side{position:absolute;top:0;bottom:0;overflow:hidden;
      width:calc((100vw - 1140px)/2);opacity:.42}
    :root[data-theme="night"] .seascape .side{opacity:.22}
    .seascape .side.l{left:0}
    .seascape .side.r{right:0}
    .seascape img{position:absolute;left:7%;height:auto;
      width:min(86%, 300px, 24vh); /* 帯幅と画面高さの両方に収め、見切れと縦の重なりを防ぐ */
      mix-blend-mode:multiply}
    :root[data-theme="night"] .seascape img{mix-blend-mode:screen;filter:saturate(1.15)}
    /* 左＝上:流水紋(bk_img_2反転・左端付け)／下:サンゴ(bk_img_4=彩度を抑える) */
    .seascape .side.l img{left:0}
    .seascape .side.l img:nth-child(1){top:5%;width:min(88%,330px)}
    .seascape .side.l img:nth-child(2){bottom:0;top:auto;
      width:min(88%,330px);filter:saturate(.72);opacity:.8}
    /* 右＝上:流水紋+小魚(bk_img_3=彩度を抑える)／下:流水紋(bk_img_1)。右端付け */
    .seascape .side.r img{left:auto;right:0}
    .seascape .side.r img:nth-child(1){top:6%;width:min(100%,380px);filter:saturate(.72);opacity:.8}
    .seascape .side.r img:nth-child(2){top:52%}
  }
  /* ── 固定背景ウォッシュ：昼は無し（2026-07-24ユーザー指示＝海写真をそのまま見せる。
     旧・中央明るいradialグラデはgit履歴参照）。夜のみ暗ウォッシュで写真を沈めて可読性確保。
     層順：body地色 → 海写真(.sea-photo) → このウォッシュ → .seascape（紅型イラスト） → コンテンツ */
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:none}
  :root[data-theme="night"] body::before{
    background:
      radial-gradient(85% 68% at 50% 40%, #24405C99, #24405C00 70%),
      radial-gradient(60% 48% at 6% 4%, #5BC4CE12, transparent 62%),
      radial-gradient(64% 52% at 97% 94%, #5BC4CE0e, transparent 64%),
      radial-gradient(70% 55% at 50% 108%, #0B1723B3, transparent 72%)}
  body::after{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:240px 240px;opacity:.045;mix-blend-mode:multiply}
  :root[data-theme="night"] body::after{opacity:.05;mix-blend-mode:soft-light}

  /* ── テーマ切替ピル（プレビュー用ツール。デザインの一部ではない） ──
     置き場所は右上固定（2026-07-28FB「もとの位置に」で左下→右上へ復帰。2026-07-27に一度
     ヘッダー右余白の解放のため左下へ逃がしていた）。右上に置くぶんヘッダーの右余白
     clamp(120px,12vw,150px) をピル（実測92px）避けに再度確保している（下の .mv .nav2）。
     ナビ折返しは起きない＝ハンバーガー切替の1000pxはこの右余白込みの実測971pxが根拠。
     ハンバーガー幅(999.98px以下)では右上がナビボタンと衝突するので固定ピル自体を出さず、
     切替はメニュー内の .nav-theme へ移している（下の同幅メディアクエリ）。
     右下は「TOPへ戻る」(.totop)と重なるため使えない。 */
  .theme-pill{position:fixed;top:14px;right:14px;z-index:99;display:flex;gap:2px;
    background:#0009;border:1px solid #fff5;border-radius:999px;padding:3px;backdrop-filter:blur(6px)}
  .theme-pill button{font-family:inherit;font-size:12px;letter-spacing:.1em;border:none;cursor:pointer;
    border-radius:999px;padding:5px 14px;background:transparent;color:#fffc}
  .theme-pill button.on{background:#fff;color:#222}
  /* 切替はJS（head のインライン＋site.js）でしか動かないので、JS無効なら押せないボタンを出さない */
  html.no-js .theme-pill{display:none}
  /* スマホ幅（999.98px以下）はこの固定ピルを出さず、ハンバーガーメニュー最下部の
     「テーマ 昼／夜」行（.nav-theme＝template-parts/nav-theme.php）へ移す。
     PCでは出さないので既定は非表示。見た目は下の @media(max-width:999.98px) 側（2026-07-30） */
  .nav-theme{display:none}

  /* ── ブランド下の小英字（トップ.nav2と下層.page-head共通） ── */
  .brand-of{display:block;font-size:9px;letter-spacing:.3em;line-height:1;margin-top:5px;
    font-family:"Zen Kaku Gothic New",system-ui,sans-serif;font-weight:500;opacity:.78}

  /* ── ハンバーガーボタン（スマホ幅のみ表示。PCは非表示） ── */
  .nav-toggle{display:none;align-items:center;justify-content:center;
    width:44px;height:44px;padding:0;background:transparent;border:0;cursor:pointer;color:#eef2ef}
  .mv .nav2.scrolled .nav-toggle{color:var(--primary)}
  .page-head .nav-toggle{color:#EDE7D8}
  .nav-toggle-bars{position:relative;display:block;width:22px;height:2px;
    background:currentColor;border-radius:2px;transition:background .2s}
  .nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0;
    width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s ease}
  .nav-toggle-bars::before{top:-7px}
  .nav-toggle-bars::after{top:7px}
  .nav-open .nav-toggle-bars{background:transparent}
  .nav-open .nav-toggle-bars::before{transform:translateY(7px) rotate(45deg)}
  .nav-open .nav-toggle-bars::after{transform:translateY(-7px) rotate(-45deg)}
  @media (prefers-reduced-motion:reduce){
    .nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{transition:none}}

  /* ── 写真処理：グレースケール＋藍寄りのトーン（オレンジ/セピア禁止） ── */
  .duo{position:relative;overflow:hidden;background:var(--mv-base)}
  .duo img{width:100%;height:100%;object-fit:cover;
    filter:grayscale(1) contrast(1.06) brightness(1.02);}
  .duo::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,#1c3a5738,#26334028 55%,#10202e55);
    mix-blend-mode:multiply;}
  .duo::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background:radial-gradient(120% 90% at 50% 20%,#f7f3e810,#10202e50);
    mix-blend-mode:soft-light;}

  /* ---------- サイト本体：各セクションは全幅バンド、中身は1120px ---------- */
  .inner{max-width:1120px;margin:0 auto;padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px)}

  /* ── MV：全幅1枚看板（ライブ3枚のクロスフェード・2026-07-30再設計） ──
     原典は design-proposals/mv-redesign/（確定モック。数値はブラウザ実測で詰めたもの）。
     昼＝live1→live2→live3／夜＝live2→live3→live1（島は2026-07-30FBで差し替え撤去）。
     live-3 は縦位置のライブ写真を横長加工した 1946x1094（人物センター・両脇は同写真の
     暗ぼかし地＋横グラデ。レシピ=design-proposals/mv-redesign/make_live3.py） */
  .mv{position:relative;z-index:2;height:100svh;min-height:620px;color:#f2ede3;overflow:hidden;background:var(--mv-base)}
  /* clip-path は iOS Safari/Chrome 対策（2026-07-30FB）。transform でズーム中の img は合成レイヤーになり、
     祖先の overflow:hidden だけでは切り抜かれず MV 下端から写真がはみ出して「MVが伸びて見える」。
     clip-path:inset(0) で強制的に自身の枠で切る（デスクトップには影響なし） */
  .mv .ph{position:absolute;inset:0;-webkit-clip-path:inset(0);clip-path:inset(0)}
  .mv .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;filter:var(--mv-filter);transition:filter .3s;
    animation:mvFade 18s infinite, mvZoom 18s infinite}
  /* 見せ場（object-position）は写真ごとに指定。SPは顔を上・文字を下に分けるため
     下のSPブロックで写真ごとに再指定する。
     3枚とも横位置写真＝ノートPCの横長画面でも人物が大きく切れない */
  .mv .ph .s-live1{object-position:50% 28%}
  .mv .ph .s-live2{object-position:50% 38%}
  .mv .ph .s-live3{object-position:50% 30%}
  /* 夜の減光はスライド別（昼は両トークンとも同じ値なので実質一律） */
  .mv .ph .s-live1,.mv .ph .s-live2,.mv .ph .s-live3{filter:var(--mv-filter-live)}
  .mv .ph img:nth-child(1){animation-delay:0s,0s}
  .mv .ph img:nth-child(2){animation-delay:6s,6s}
  .mv .ph img:nth-child(3){animation-delay:12s,12s}
  /* 夜はライブハウスの写真から始める（昼＝live1→live2→live3／夜＝live2→live3→live1）。
     夜モードは「モノクロ・ステージ写真が映える幕」なので、その主役 live-2 を1枚目に置く。
     DOMは触らず animation-delay の差し替えだけ（DOM=live1,live2,live3 の順に 12s/0s/6s）。
     ※テーマ切替の瞬間はサイクルが跳ぶ（切替はプレビュー用ツールなので許容） */
  :root[data-theme="night"] .mv .ph img:nth-child(1){animation-delay:12s,12s}
  :root[data-theme="night"] .mv .ph img:nth-child(2){animation-delay:0s,0s}
  :root[data-theme="night"] .mv .ph img:nth-child(3){animation-delay:6s,6s}
  /* 3枚×6秒＝18秒周期。1枚目の立ち上がり（0→3.5%＝約0.6秒）は
     初回表示の黒画面を短くするためフェードインだけ速めてある */
  @keyframes mvFade{0%{opacity:0} 3.5%{opacity:1} 33%{opacity:1} 41%{opacity:0} 100%{opacity:0}}
  @keyframes mvZoom{0%{transform:scale(1)} 41%{transform:scale(1.045)} 100%{transform:scale(1.045)}}
  @media (prefers-reduced-motion:reduce){
    .mv .ph img{animation:none;opacity:0}
    .mv .ph img:first-child{opacity:1}
    /* 静止1枚も昼＝live-1／夜＝live-2 に合わせる */
    :root[data-theme="night"] .mv .ph img:first-child{opacity:0}
    :root[data-theme="night"] .mv .ph img:nth-child(2){opacity:1}
  }
  /* 幕（スクリム）：文字が載る左下をゆるく沈める3層＋夜だけの藍ベール（--night-veil）。
     2026-07-30FB「影の塊が写真を汚す」→ 左下radialを大幅に薄くし（.86→.52・中間も .5→.26）、
     可読性は文字側の三層 text-shadow に移した。上端はナビ、下端は写真の切れ際を締める帯 */
  .mv .scrim{position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(92% 74% at 2% 98%, var(--day-corner) 0%,
                      rgba(9,24,38,.26) 36%, rgba(9,24,38,.07) 60%, rgba(9,24,38,0) 76%),
      linear-gradient(180deg, rgba(9,24,38,.46) 0%, rgba(9,24,38,0) 18%),
      linear-gradient(0deg, rgba(9,24,38,.34) 0%, rgba(9,24,38,.04) 30%),
      linear-gradient(0deg, var(--night-veil), var(--night-veil))}
  /* グローバルナビ：固定でスクロール追従。MV上は透過、スクロールすると背景＋濃色文字に切替 */
  /* ヘッダー右余白：右だけ clamp(120px,12vw,150px) と広く空ける＝右上のテーマ切替ピル（実測92px）を
     避けるための予約。2026-07-27にピルを左下へ移して一度解放したが、2026-07-28FBでピルが右上へ
     復帰したため予約も復活（下層ページ .page-head .bar-in / subpage.css も同じ扱い） */
  .mv .nav2{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
    padding:18px clamp(20px,4vw,44px);padding-right:clamp(120px,12vw,150px);z-index:60;
    transition:background-color .3s,padding .3s,box-shadow .3s}
  /* JS無効時は固定にせず、MVと一緒にスクロールで流す（.scrolled が付かない前提のフォールバック） */
  .no-js .mv .nav2{position:absolute}
  /* スクロール後の地は白92%のすりガラス（2026-07-27FB。--bg＝砂色90%だったが「砂色が微妙」との指摘）。
     夜の --bg は濃紺なので白のままだとヘッダーだけ真っ白に割れる＝夜は従来どおり --bg 90% に戻す。
     文字は .scrolled 側の --primary／--sub がそのまま効き、地が白くなるぶんコントラストは上がる */
  .mv .nav2.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
    padding-top:10px;padding-bottom:10px;box-shadow:0 1px 0 var(--hairline),0 10px 30px -24px #26334066}
  :root[data-theme="night"] .mv .nav2.scrolled{background:color-mix(in srgb,var(--bg) 90%,transparent)}
  /* ── エンブレム式ロゴ（2026-07-30・トップのみ。下層は .page-head .logo のまま） ──
     ヤマネコはバーの高さに収めず下へはみ出す。配置は絶対指定（PC top:-10px・SP top:-7px／
     height 59px・52px＝ユーザーがブラウザで実測した値。変更しない）。
     テキストは重ならないようヤマネコの実描画幅ぶん右へ退避する
     （yamaneko-still.png は 230x236＝余白なしなので 59px 時の幅は 57.5px、＋gap 14px＝72px）。
     縁取りは既存の流儀（--kai-edge の 0.5px drop-shadow 4方向・下の共通ルール）を使う。 */
  .mv .nav2 .brandmark{position:relative;display:flex;align-items:center;text-decoration:none;line-height:1}
  .mv .nav2 .bm-cat{position:absolute;top:-10px;width:auto;height:59px}
  .mv .nav2 .bm-txt{display:block;padding-bottom:2px;padding-left:72px}
  .mv .nav2 .bm-ja{display:block;font-weight:600;font-size:20px;letter-spacing:.14em;color:#f6f2e8;transition:color .3s}
  .mv .nav2.scrolled .bm-ja{color:var(--primary)}
  .mv .nav2 .brand-of{margin-top:6px;color:#f6f2e8;transition:color .3s}
  .mv .nav2.scrolled .brand-of{color:var(--sub);opacity:1}
  .mv .nav2 nav{display:flex;gap:26px;font-size:16px;letter-spacing:.04em}
  .mv .nav2 nav a{color:#e6e9e4;text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent;
    transition:color .25s,border-color .25s}
  .mv .nav2 nav a:hover{color:#fff;border-bottom-color:#f4efe466}
  .mv .nav2 nav a.on{color:#fff;border-bottom:2px solid var(--accent)}
  .mv .nav2.scrolled nav a{color:var(--sub)}
  .mv .nav2.scrolled nav a:hover{color:var(--primary);border-bottom-color:var(--amber)}
  .mv .nav2.scrolled nav a.on{color:var(--primary);border-bottom-color:var(--accent)}
  .mv .bigname{position:absolute;z-index:3;isolation:isolate;
    left:clamp(20px,4vw,52px);bottom:clamp(84px,13vh,140px);width:min(52%,560px)}
  /* 文字ブロックだけの手元灯。2026-07-30FB で「影の塊」に見えていたため α .60→.26 まで
     落とし、範囲も内側へ寄せた。輪郭は下の三層 text-shadow が作る */
  .mv .bigname::before{content:"";position:absolute;z-index:-1;pointer-events:none;
    inset:-40px -70px -48px -90px;
    background:radial-gradient(62% 66% at 34% 46%, rgba(8,20,32,.26) 0%,
                               rgba(8,20,32,.14) 48%, rgba(8,20,32,0) 78%)}
  /* 文字の影は作品一覧（海写真の上の白抜き）で確立した三層構成が下敷き＝
     「ぼかし0の実線影＋近距離のくっきり＋遠距離のふんわり」。ただし MV は写真が主役なので、
     2026-07-30FB「影が濃い」を受けて実線層を細く（2px→1px／1.5px→1px）、
     ぼかし層のαを大きく落としてある（.9〜.75 → .38〜.22）＝影と意識されない濃さ */
  .mv .bigname .kicker2{font-size:16px;letter-spacing:.3em;color:#8fd2da;font-weight:700;
    display:flex;align-items:center;gap:12px;margin-bottom:22px;
    text-shadow:0 1px 0 rgba(10,25,35,.72),0 1px 3px rgba(10,25,35,.34),0 4px 16px rgba(10,25,35,.24)}
  .mv .bigname .kicker2::before{content:"";width:26px;height:2px;background:var(--accent);flex:none}
  .mv .bigname h1{font-family:"Shippori Mincho B1",serif;font-weight:500;margin:0;
    font-size:clamp(60px,7.2vw,116px);line-height:1.08;letter-spacing:.1em;color:#f6f3ea;
    text-shadow:0 1px 0 rgba(10,25,35,.75),0 1px 4px rgba(10,25,35,.38),0 5px 22px rgba(10,25,35,.26)}
  .mv .bigname .en{font-size:16px;letter-spacing:.22em;color:#dde3e6;margin-top:20px;
    text-shadow:0 1px 0 rgba(10,25,35,.66),0 1px 3px rgba(10,25,35,.3),0 4px 16px rgba(10,25,35,.22)}
  /* キャッチコピー：縦書き明朝（仕様書の指定）。MV右側に立てる。SPでも縦書きのまま。
     字の大きさは画面の高さにも連動させる（min(1.8vw,2.7vh)）。カードを右端へ寄せた結果、
     縦書きの列と NEXT LIVE カードが同じ右端ラインに並ぶため、背の低いノートPC
     （1366x768 のブラウザUIぶんを引いた実効 660〜700px）で列の下端がカードに触れる。
     幅ではなく高さで字を詰めることで、天地の間隔を 45px 以上保つ。
     ※下敷き（手元灯）と琥珀の余韻線はどちらも 2026-07-30FB で廃止＝文字と影だけで見せる */
  .mv .catch-v{position:absolute;right:clamp(28px,5vw,64px);top:clamp(96px,15vh,140px);z-index:3;
    isolation:isolate;writing-mode:vertical-rl;font-family:"Shippori Mincho B1",serif;font-weight:500;
    font-size:clamp(18px,min(1.8vw,2.7vh),23px);letter-spacing:.4em;line-height:2.2;color:#f2efe4;
    text-shadow:0 1px 0 rgba(10,25,35,.72),0 1px 3px rgba(10,25,35,.34),0 4px 16px rgba(10,25,35,.24);
    font-feature-settings:"vpal"}
  /* 次のライブ：右下のカード。右端は縦書きコピーと同じ標準マージンに揃える
     （2026-07-30FB「PCは右寄せ」）。縦書きの列と同じ右端ラインに乗るため、両者は天地で分ける
     （間隔は 1366x768 で 121px、背の低い 1440x620 でも 48px。縦書き側の字を高さ連動で詰めて確保）。
     MV内のヤマネコGIFは 2026-07-30 に撤去＝ヘッダーのエンブレムロゴへ一本化した
     （GIF自体はフッターの .logo-mascot で現役） */
  .mv .peek-wrap{position:absolute;z-index:3;right:clamp(28px,5vw,64px);
    bottom:clamp(24px,4.4vh,44px);width:min(420px,calc(100% - 32px))}
  /* NEXT LIVE はカードの中（上辺）へ。ガラス地の上では accent そのままでは沈むので
     文字用の濃いターコイズ（--accent-ink）を使う。
     カード内は行送りを自前で持つ（body の line-height 1.75 のままだと、行ボックスの下敷き
     （strut）が 18px×1.75＝31.5px になり、タイトルが2行に折り返したときカードが一気に
     背高になる・2026-07-30FB） */
  .mv .peek-label{display:block;margin:0 0 7px;line-height:1.2;
    font-size:10px;letter-spacing:.28em;font-weight:700;color:var(--accent-ink)}
  /* NEWバッジ：掲載から14日以内のライブに表示（2026-07-30FB「Newと分かるあしらい」）。
     朱=ライブ強調の配色ルールに従い塗り+白文字。判定はfront-page.php側 */
  .mv .peek-new{display:inline-block;margin-right:10px;padding:2px 8px 1px;border-radius:999px;
    background:var(--vermil-fill);color:#fff;font-size:9px;letter-spacing:.2em;vertical-align:1px} /* NEW→NEXT LIVEの順（2026-07-30FB） */
  .mv .peek-row{display:flex;gap:18px;align-items:center}
  .mv .peek-txt{display:block;min-width:0}
  /* カード地は白をやめ、サイト共通のすりガラス（多層background＋backdrop-filter）に揃える
     （2026-07-30FB「白が強い」）。地は帯と同じ素の --glass-bg（昼α.68／夜α.60＝写真が
     透けて見える濃さ）。薄くしたぶんはブラーを強めて補う（--glass-filter-strong） */
  .mv .live-peek{
    background:
      linear-gradient(115deg, var(--glass-sheen), rgba(255,255,255,0) 38%),
      linear-gradient(var(--glass-bg), var(--glass-bg));
    -webkit-backdrop-filter:var(--glass-filter-strong);
    backdrop-filter:var(--glass-filter-strong);
    color:var(--ink);border-radius:10px;padding:12px 22px 13px;
    display:block;border:1px solid var(--glass-line);
    box-shadow:0 18px 50px -20px #000c;text-decoration:none;
    transition:transform .25s,box-shadow .25s}
  .mv .live-peek:hover{transform:translateY(-3px);box-shadow:0 24px 56px -20px #000c}
  @media (prefers-reduced-motion:reduce){.mv .live-peek:hover{transform:none}}
  .mv .live-peek .d{font-family:"Shippori Mincho B1",serif;font-size:25px;font-weight:600;line-height:1;
    color:var(--primary);font-feature-settings:"tnum";flex:none}
  :root[data-theme="night"] .mv .live-peek .d{color:var(--accent)}
  .mv .live-peek .d span{display:block;font-size:9px;letter-spacing:.14em;color:var(--sub);margin-top:3px;
    line-height:1.2;font-family:"Zen Kaku Gothic New",sans-serif}
  .mv .live-peek .t{display:block;font-size:16px;font-weight:700;line-height:1.34}
  /* 会場名は --sub のままだと、暗いライブ写真が透けた面（最暗）で 3.8:1 に落ちるので
     半分だけ本文色へ寄せる */
  .mv .live-peek .v{display:block;font-size:12px;line-height:1.4;margin-top:3px;
    color:color-mix(in srgb, var(--sub) 55%, var(--ink))}

  /* ボタン・もっと見る：リンクは藍/生成り文字＋ターコイズ下線 */
  .more{display:inline-flex;align-items:center;gap:12px;margin-top:26px;font-size:16px;letter-spacing:.12em;
    color:var(--primary);text-decoration:none;border:1px solid color-mix(in srgb,var(--primary) 55%,transparent);
    border-radius:999px;padding:12px 28px;
    transition:border-color .25s,color .25s,background-color .25s}
  .more::after{content:"→";color:var(--accent);transition:transform .25s}
  .more:hover{border-color:var(--amber);color:var(--primary);background:color-mix(in srgb,var(--amber) 8%,transparent)}
  .more:hover::after{transform:translateX(4px)}
  @media (prefers-reduced-motion:reduce){.more:hover::after{transform:none}}
  .more.light{color:#f4efe4;border-color:#f4efe4aa}
  .more.light::after{content:"→";color:#f4efe4}
  .more.light:hover{background:#f4efe41a;border-color:#f4efe4}
  .sec-foot{display:flex;justify-content:flex-end;margin-top:14px}

  /* リンクカード */
  .linkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
  /* アイコン左＋右にラベル/タイトルの横並び・縦幅は詰める（2026-07-22ユーザー指示の構図） */
  /* 通常時の影（2026-07-27FB）：リンクのバンドはすりガラス地を外して海写真の上に直接置く形にした
     （下の「リンクのブレイクアウト」節）。白地・薄枠のカードは地が消えると写真に貼り付いて見えるため
     通常時にも影を足して浮かせる。手本は作品棚のジャケット .disc の 0 6px 20px -12px #26334040 だが、
     ジャケットは絵柄自体が濃くて縁が立つのに対しカードは白地＋白い雲でほぼ影が見えず「浮いている」に
     届かなかったので、同じ形のまま不透明度だけ一段（.25→.30）強めている。
     hover の 0 14px 32px -22px #26334059 に対して不透明度も張り出し（7px 対 8px）も下回るので、
     hover で持ち上がる差は残る。夜は海写真が brightness(.5) 済みで藍系の影が沈むため黒系へ
     （.disc が昼 .25→夜 .50 と倍にしているのに合わせ .30→.60） */
  .linkcard{position:relative;display:flex;align-items:center;gap:14px;
    text-decoration:none;color:var(--ink);background:var(--bg-card);border:1px solid var(--hairline);
    border-radius:10px;padding:14px 18px;box-shadow:0 8px 22px -12px #2633404d;
    transition:border-color .25s,box-shadow .25s,transform .25s}
  :root[data-theme="night"] .linkcard{box-shadow:0 8px 22px -12px #00000099}
  .linkcard:hover{border-color:var(--accent);box-shadow:0 14px 32px -22px #26334059;transform:translateY(-3px)}
  :root[data-theme="night"] .linkcard:hover{box-shadow:0 14px 32px -22px #000c}
  @media (prefers-reduced-motion:reduce){.linkcard:hover{transform:none}}
  .linkcard .ico-badge{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--accent-soft);color:var(--accent);transition:background .25s,color .25s}
  .linkcard .ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .linkcard:hover .ico-badge{background:var(--accent);color:var(--bg-card)}
  .linkcard .body{min-width:0}
  .linkcard .k{font-size:10.5px;letter-spacing:.22em;font-weight:700;margin-bottom:3px;color:var(--accent)}
  .linkcard .t{font-family:"Shippori Mincho B1",serif;font-size:17px;font-weight:600;letter-spacing:.04em;color:var(--primary);line-height:1.4}
  .linkcard .d{font-size:14px;color:var(--sub);margin-top:3px;line-height:1.6}
  .linkcard .k.g{color:var(--green)} .linkcard .k.e{color:var(--amber)}
  .linkcard .ext{position:absolute;top:14px;right:14px;width:14px;height:14px;fill:none;stroke:var(--sub);
    stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.5;transition:stroke .25s,opacity .25s}
  .linkcard:hover .ext{stroke:var(--accent);opacity:1}

  /* お問い合わせ：テキスト→フォームの縦積み（PCも1カラム・読み幅に絞って中央寄せ）
     地は「について」と同じ紙目テクスチャを敷く */
  .contact{background:url("textures/bg_texture_noise.png") repeat,var(--bg-footer)}
  :root[data-theme="night"] .contact{background:url("textures/bg_texture_noise.png") repeat,var(--bg-footer)}
  .contact .grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,44px);
    max-width:760px;margin:0 auto}
  .contact .note{font-size:16px;color:var(--sub);line-height:1.75}
  .contact .note .lead{font-family:"Shippori Mincho B1",serif;font-weight:600;font-size:clamp(19px,1.7vw,21px);
    color:var(--primary);line-height:1.8;letter-spacing:.04em;margin:0 0 18px}
  /* 事務所連絡先（.office）：tel/mailtoの既定青下線を打ち消し、ティール＝アクションの配色ルールで本文に馴染ませる */
  .contact .note .office strong{color:var(--primary)}
  .contact .note .office a{color:var(--accent);text-decoration:none;padding-bottom:1px;
    border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent);transition:border-color .2s}
  .contact .note .office a:hover{border-bottom-color:var(--accent)}
  /* reCAPTCHA v3: 右下バッジは非表示（Google規約準拠＝代わりにフォーム下へクレジット表記 .recaptcha-note を掲載。
     visibility:hidden はGoogle公式FAQの許容方法・判定機能は生きたまま） */
  .grecaptcha-badge{visibility:hidden}
  .contact .recaptcha-note{font-size:12px;color:var(--sub);opacity:.8;margin:14px 0 0;line-height:1.7}
  .contact .recaptcha-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
  .field{margin-bottom:22px}
  .field label{display:block;font-size:16px;font-weight:700;letter-spacing:.08em;margin-bottom:8px;color:var(--ink)}
  .field label small{font-weight:400;color:var(--amber);margin-left:8px;font-size:11px}
  .field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:16px;color:var(--ink);
    background:var(--bg-card);border:1px solid var(--hairline);border-radius:8px;padding:12px 14px;line-height:1.6}
  .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
  .field textarea{min-height:140px;resize:vertical}
  /* 送信ボタン：ターコイズ＋白文字（2026-07-22ユーザー指示。旧・濃色文字指定を上書き） */
  .submit{font-family:inherit;font-size:16px;font-weight:700;letter-spacing:.1em;color:#fff;
    background:var(--btn-bg);border:none;border-radius:999px;padding:14px 44px;cursor:pointer}
  .submit:hover{filter:brightness(1.06)}
  /* 送信ボタンはフォームの左右中央に（CF7の<p>内inlineのままだと左寄せになる） */
  .submit{display:block;margin-left:auto;margin-right:auto}
  /* プライバシーポリシー同意（functions.php が送信ボタン直前に挿入）。ラベル全体がタップ領域＝高さ44px以上。
     未同意のあいだ送信ボタンは CF7 標準の acceptance 挙動で disabled になる＝押せないことを見せる */
  .field.consent .wpcf7-acceptance{display:block}
  .field.consent label{
    min-height:44px;padding:10px 0;margin-bottom:0;
    font-size:15px;font-weight:500;letter-spacing:.04em;line-height:1.7}
  .field.consent input[type="checkbox"]{
    width:24px;height:24px;margin:0 8px 0 0;padding:0;
    border:0;background:none;vertical-align:middle;accent-color:var(--accent)}
  .field.consent a{color:var(--primary);text-underline-offset:3px}
  .submit:disabled{opacity:.45;cursor:not-allowed}
  .submit:disabled:hover{filter:none}

  /* 基調色セクションは全幅で背景透過＝背面（z:-1）の紅型額装を通す（基調色はbodyが持つ）。
     クラス付きの色帯（.about/.band-shallow/.contact等）は特異性で不透明のまま残る */
  section{padding:clamp(76px,9vw,120px) 0;background:transparent}
  /* ※SP限定の章立てtint（無印sectionへの半透明帯色）は「横幅で背景色が変わる」との
     ユーザー指摘により撤去（2026-07-16）。背景色は全幅共通＝PC基準に統一 */
  /* バンドのリズム：生成り → カード白（夜は藍明） → 浅瀬 → 生成り → 写真 → カード白 → 生成り濃 */
  .band-card{background:var(--bg-card)}
  .sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:20px} /* 40→20px(2026-07-24FB・音祭りバンドはsec-head不使用) */
  /* 見出しは一回り大きく（2026-07-27FB。旧 clamp(26px,2.3vw,31px)）。TOPも下層も同じ部品で両方上がる。
     実測 375px=30px／1440px=38px（上限に到達）。SPは .sec-head の flex-wrap:wrap で英字ラベルだけが
     2行目に落ちる＝最長の見出し（下層「これまでの音祭り」8字）でも 30px×1.14em＝274px で .inner に収まる。
     .en は 11px 据え置きだと 38px の隣で点に見えるので 12px（字間 .38em のため横幅は +7px 程度）。
     下層の .page-title h1（subpage.css）も「ページタイトル ＞ セクション見出し」の主従が保てるよう一段上げてある */
  .sec-head .ja{font-family:"Shippori Mincho B1",serif;font-size:clamp(30px,2.8vw,38px);font-weight:600;
    letter-spacing:.14em;line-height:1.4;color:var(--primary)}
  .sec-head .en{font-size:12px;letter-spacing:.38em;color:var(--sub);font-weight:500;
    text-transform:uppercase;transform:translateY(-2px)}
  /* 見出し罫：起点に島のモチーフ（セクションごとに違う生きもの・草木）＝飴色 */
  .fest .kicker .icn{width:27px;height:27px}
  .sec-head .rule{flex:1;min-width:56px;height:9px;position:relative;align-self:center}
  /* 見出し横の水平線は2026-07-24ユーザー指示で非表示（.ruleはレイアウトのスペーサーとして残置） */
  .sec-head .rule::after{content:none}

  /* ライブ情報：日付先導 */
  .lives{border-top:1px solid var(--hairline)}
  .live{display:grid;grid-template-columns:128px 1fr auto;gap:26px;align-items:center;
    padding:26px 10px;border-bottom:1px solid var(--hairline);text-decoration:none;color:inherit;
    transition:border-color .25s,padding-left .25s,background-color .25s}
  .live:hover{border-bottom-color:var(--amber);padding-left:16px} /* 罫線hoverに飴色 */
  .live .arr{font-family:"Cormorant Garamond","Shippori Mincho B1",serif;font-size:22px;color:var(--accent);
    transition:transform .25s;justify-self:end}
  .live:hover .arr{transform:translateX(5px)}
  .live:hover .body .t{color:var(--primary)}
  .live .date{font-family:"Shippori Mincho B1",serif}
  .live .date .d{font-size:28px;font-weight:600;line-height:1;color:var(--primary);font-feature-settings:"tnum"}
  .live .date .m{font-size:12px;color:var(--faint);letter-spacing:.2em;margin-top:6px}
  .live > *{min-width:0}
  .live .body .t{font-family:"Shippori Mincho B1",serif;font-size:19px;font-weight:500;
    letter-spacing:.03em;line-height:1.6;overflow-wrap:anywhere}
  .live .body .v{font-size:16px;color:var(--sub);margin-top:5px;letter-spacing:.02em;overflow-wrap:anywhere}
  @media (prefers-reduced-motion:reduce){.live:hover{padding-left:10px}}

  /* お知らせ：カテゴリーチップはカテゴリごとに色分け（先頭ドット＋淡い同系地） */
  .news{border-top:1px solid var(--hairline)}
  .news .row{display:flex;gap:22px;padding:15px 10px;border-bottom:1px solid var(--hairline);
    align-items:baseline;transition:border-color .25s,padding-left .25s} /* 上下19px→15px（2026-07-30FB: リストの縦幅を詰める） */
  .news .row:hover{border-bottom-color:var(--amber);padding-left:16px} /* ライブ情報のホバー（右へスライド）に統一 */
  /* 投稿日は開催日（.c.evday）に対して明確に従に回す（2026-07-27FB）。旧 16px/112px。
     実測では 投稿日16px ／ 開催日18.9px と差が小さく、日付が2つ並んで主従が読めなかった */
  .news .row time{font-size:13px;color:var(--faint);letter-spacing:.12em;flex:none;width:96px;font-feature-settings:"tnum"}
  /* カテゴリチップ：形は共通のピル、色だけカテゴリで替える（地＝淡色トーン／文字＝可読な同系濃色。トークン併用で夜も破綻させない）。
     角丸5pxの角ばったタグ→ピル型（999px）へ（2026-07-27FB）。丸めたぶん左右paddingを+4pxして文字の窮屈さを避ける。
     開催日 .c.evday は枠も地も持たない素のテキストなので padding:0 を下の専用ルールで維持する */
  .news .row .c{display:inline-flex;align-items:center;font-size:.7rem;font-weight:600;
    color:var(--cat-ink,var(--primary));
    background:var(--cat-bg,color-mix(in srgb,var(--cat,var(--accent)) 13%,var(--bg-card)));
    border:1px solid color-mix(in srgb,var(--cat,var(--accent)) 34%,transparent);
    border-radius:999px;padding:2px 12px;flex:none;white-space:nowrap;letter-spacing:.04em}
  /* ライブ＝朱の淡地＋朱文字（塗りつぶしは強すぎFBで2026-07-24変更＝他チップと同じ「淡地+色文字」の声に）。
     地は「不透明値で」置く（2026-07-27）：半透明だとカード越しに海写真が透けて比率が背景の明暗で
     2.64〜3.32:1 と動いていた。枠線の色（--cat＝朱）は変えない＝朱の系統は保つ */
  .c.event{--cat:var(--vermil);--cat-bg:#F7E5DE;--cat-ink:#9A3A1C}                    /* 実測 5.75:1 */
  :root[data-theme="night"] .c.event{--cat-bg:#3A2019;--cat-ink:#F0906F}              /* 実測 6.37:1 */
  /* お知らせ＝水色（2026-07-27FB。旧 primary10%の淡地＋濃紺文字は「グレーっぽくて地味」との指摘）。
     --accent(#2FA8B5) をそのまま文字に使うと淡い水色地で 2.49:1 なので文字だけ暗い水色に落とす。
     地の #E2F3F5 は color-mix(in srgb,#2FA8B5 14%,#FFFFFF) を焼いた不透明値（理由は .c.event と同じ）。
     枠線は基底の color-mix(--cat 34%) がそのまま accent 系になる＝水色の細枠で揃う。
     夜も系統をねじらないよう水色へ（地＝藍寄りの暗い水色＋文字 --accent）。.c.media（飴色）は変更しない */
  .c.info{--cat:var(--accent);--cat-bg:#E2F3F5;--cat-ink:#1A6F79}                     /* 実測 5.11:1 */
  :root[data-theme="night"] .c.info{--cat-bg:#1B3E4C;--cat-ink:var(--accent)}         /* 実測 5.56:1 */
  /* リリース等その他カテゴリ＝飴色（淡い飴地＋濃いめの飴文字。一段primary寄りに振り可読性up） */
  .c.rel,.c.media{--cat:var(--amber);--cat-ink:color-mix(in srgb,var(--amber) 55%,var(--primary))}
  /* 開催日ピル（すべてパネルのライブ行：大日付＝掲載日のため開催日を枠線ピルで併記）＝朱の枠線＋朱文字 */
  /* 開催日＝タグ枠なしの朱テキスト（2026-07-24FB=タグデザイン廃止・太字大きめで目立たせるのは維持）。
     基底 .news .row .c（0-3-0）に勝つため詳細度を上げて指定する */
  /* font-size は em 指定＝.c の .7rem ではなく親 .row（18px）に対して解決される。
     1.05em(18.9px)ではタイトル18pxと差が付かないため 1.15em(約20.7px)へ。
     1.35em(24.3px)まで上げるとタイトルより目立ちすぎる（2026-07-27FB） */
  .news .row .c.evday{font-size:1.15em;font-weight:700;padding:0;
    background:transparent;border:0;color:var(--ink)} /* 色は本文ベース（朱→ink・2026-07-24FB） */
  /* PCは18px固定＝行タイトル(18px)と同格に揃える（2026-07-29ユーザー指示・太字700は維持）。SPは上の1.15emのまま */
  @media(min-width:821px){.news .row .c.evday{font-size:18px}}
  .news .row a{color:var(--ink);text-decoration:none;transition:color .25s}
  .news .row:hover a{color:var(--primary)}
  /* 統一行フォーマットのライブ行：会場名をタイトル後に薄字で添える（SPは自然折返し） */
  .news .row .rv{color:var(--sub);font-size:.85em;margin-left:.6em}
  @media (prefers-reduced-motion:reduce){.news .row:hover{padding-left:10px}}

  /* About：マングローブの緑をほんの少し混ぜた「島の緑」のwash面（--green由来の派生淡色）
     ＋紙目ノイズテクスチャ（資料/img提供素材）。multiplyで昼夜どちらのwash色も殺さず粒だけ乗せる */
  .about{background:url("textures/bg_texture_noise.png") repeat,color-mix(in srgb,var(--green) 9%,var(--bg));
    background-blend-mode:multiply}
  .about .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
  .about p{margin:0 0 18px;font-size:16px;line-height:1.75;letter-spacing:.01em}
  .about .lead{font-family:"Shippori Mincho B1",serif;font-size:clamp(20px,1.9vw,23px);font-weight:600;
    line-height:1.8;letter-spacing:.05em;margin-bottom:26px;color:var(--primary)}
  /* 演奏するヤマネコたち：PC=プロフィールボタンの左（sec-foot内・左右振り分け）／SP=ボタンの下（2026-07-24FB） */
  .about .sec-foot{display:flex;align-items:center;justify-content:space-between;gap:18px}
  .about-cats{width:min(100%,420px);height:auto}
  @media(max-width:820px){
    .about .sec-foot{flex-direction:column;align-items:center} /* SPボタンは中央寄せ規約に合わせる */
    .about .sec-foot .more{order:1}
    .about-cats{order:2;margin-top:18px;width:min(100%,380px)}
  }
  .about .fig{aspect-ratio:4/3;border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
  .about .fig img{width:100%;height:100%;object-fit:cover;display:block}

  /* ディスコグラフィー：浅瀬/深瀬（--accent-soft）の海の面に浮かべる */
  .band-shallow{background:var(--accent-soft)}
  /* 見出し直下のリード文。海写真の上に直接載るのでキャプションと同じ二層 text-shadow。
     PCは本文16pxだと見出しとの間で痩せて見えるため21px（2026-07-28FB）。SPは820px内で16pxへ */
  .disco-lead{margin:0 0 26px;font-size:21px;letter-spacing:.04em;line-height:1.9;color:#fff;
    text-shadow:0 1.5px 0 rgba(10,25,35,.92),0 1px 3px rgba(10,25,35,.9),0 4px 20px rgba(10,25,35,.7)}
  /* 作品棚：画像だけが等速で流れるネイティブ横スクロール（自動ドリフト=site.js）。
     スクロールコンテナ＝.disco-shelf（overflow-x:auto＋子trackがwidth:max-contentで溢れる）。
     矢印は非スクロールの外枠.disco-rack（position:relative）に絶対配置。
     操作(ドラッグ/ホイール/矢印)やPC hoverで一時停止。JS無効時は横スクロールのみ・矢印非表示。
     2026-07-28FB 案A：ジャケットをPC300pxに大型化し、作品名・年は hover オーバーレイをやめて
     ジャケット下に常時表示。SPは1枚見せ＋左右チラ見せのスナップカルーセル（ドリフトはSPで停止）。 */
  .disco-rack{position:relative}
  .disco-shelf{overflow-x:auto;overflow-y:hidden;padding:14px 0 16px;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .disco-shelf::-webkit-scrollbar{display:none}
  .disco-track{display:flex;gap:clamp(16px,2vw,22px);width:max-content;padding:0 24px}
  /* 左右矢印：PC・SP共通で表示（SPは820px内で小型化・2026-07-28FB）。JS無効時のみ非表示。
     天地は棚の中央ではなくジャケットの中央に合わせる＝棚高(14+300+キャプション約60+16)の
     中央からキャプションの半分ぶん引き上げる */
  .disco-arrow{position:absolute;top:calc(50% - 31px);transform:translateY(-50%);z-index:3;
    width:46px;height:46px;border-radius:50%;cursor:pointer;
    border:1px solid color-mix(in srgb,var(--primary) 22%,transparent);
    background:color-mix(in srgb,var(--bg-card) 88%,transparent);color:var(--primary);
    font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 20px -10px #26334066;transition:background-color .2s,box-shadow .2s,color .2s}
  .disco-arrow:hover{background:var(--bg-card);box-shadow:0 12px 26px -12px #26334080}
  .disco-arrow.prev{left:16px}
  .disco-arrow.next{right:16px}
  html.no-js .disco-arrow{display:none}
  :root[data-theme="night"] .disco-arrow{border-color:#5bc4ce33;color:var(--accent)}
  /* ジャケットはまっすぐ（傾けない）。カード地・角丸・影は .jk（ジャケット）側が持ち、
     .disc 自体は透明＝下のキャプションは海写真の上に直接載る（影の値は移設前と同じ） */
  .disc{position:relative;width:300px;flex:none;text-decoration:none;color:var(--ink);
    background:transparent;overflow:visible}
  .disc .jk{aspect-ratio:1/1;border-radius:3px;overflow:hidden;background:var(--accent-soft);
    box-shadow:0 6px 20px -12px #26334040}
  :root[data-theme="night"] .disc .jk{box-shadow:0 6px 20px -12px #00000080}
  .disc .jk img{width:100%;height:100%;object-fit:cover;display:block}
  /* 書籍など非正方形の表紙は切らずに収める（ディスコ詳細ページの.fitと同じ考え方）。
     地色は白だと棚の中で浮くため、書影（空と海）に合わせた淡い水色（2026-07-24FB） */
  .disc[href*="#d-book-"] .jk{background:#CDE3EE}
  .disc[href*="#d-book-"] .jk img{object-fit:contain;padding:6%}
  /* 作品名・年はジャケット下に常時表示（hover／focusでの出現は廃止・2026-07-28FB）。
     タッチ環境でも同じ情報が読め、クリックで詳細へ遷移するのは従来どおり。
     並びはflexのorderで「タグ→タイトル」を1行目、年を2行目に（DOM順は.t/.y/.cのまま＝PHP不変） */
  .disc .meta{position:static;padding:10px 2px 0;background:none;color:#fff;
    opacity:1;transform:none;pointer-events:none;
    display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
  .disc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  /* キャプションも見出し・リード文と同じ「実線影＋二層」構成（2026-07-28FB。実線は文字サイズに合わせ1px） */
  .disc .t{font-family:"Shippori Mincho B1",serif;font-size:16px;font-weight:600;letter-spacing:.03em;
    color:#fff;line-height:1.45;
    text-shadow:0 1px 0 rgba(10,25,35,.92),0 1px 4px rgba(10,25,35,.9),0 6px 30px rgba(10,25,35,.7)}
  /* 発売日はタイトルの右隣（2026-07-28FB）。幅に入らない作品（やえやまのみんなのうた等）は
     flex-wrap で日付だけ次の行へ落ちる＝「入るものは横・入らないものは改行」 */
  .disc .y{font-size:13px;color:rgba(255,255,255,.86);letter-spacing:.1em;
    text-shadow:0 1px 0 rgba(10,25,35,.88),0 1px 3px rgba(10,25,35,.85),0 4px 20px rgba(10,25,35,.65)}
  /* 種別バッジ：キャプション行に常時表示（2026-07-28FB「タグも入れて」＝当初の情報過多判断を撤回）。
     海写真の上に直接載るため、淡い白ピル＋白文字＋軽い実線寄りshadowで浮かせる */
  /* タグ地は白透過18%だと海写真に溶けたため（2026-07-28FB）、「作品一覧を見る」ボタンと同系の
     白地濃いめ＋紺文字へ。紺は昼夜で写真が同じなので var(--primary) でなく固定色 */
  .disc .c{order:-1;flex:none;font-size:11px;letter-spacing:.14em;font-weight:700;
    color:#1C3A57;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9);
    border-radius:999px;padding:3px 12px;margin:0;white-space:nowrap}
  .disc .c.min{color:#1d5c38;background:rgba(222,244,230,.85);border-color:rgba(127,211,159,.95)}

  /* 音祭り：写真は元の色のまま（フルカラー）。マスクは藍墨(--mv-base #10202E)の単色ベール1枚。
     もとは 藍→梅紫→珊瑚→金 の4色グラデ＋横方向の藍だったが「どんどん変な色になっている。
     グラデーションじゃなくてシンプルにして」とのFB（2026-07-27）で単色へ。色相が1つしか無いので
     濃さをどう調整しても混色による濁りが原理的に発生しない。
     濃さの決め方：文字は .fest{align-items:flex-end} + .in{max-width:580px} で左下に載る。その領域の
     輝度を原画から実測すると 中央121／95%点221／最大255 で白飛びを含むため、最悪ケース（真っ白の上）
     でもAAを満たす濃さを選ぶ＝alpha .62→kicker 3.95(不足) .66→4.52(ぎりぎり) .70→5.16 .74→5.95。
     余裕をみて .70。実測 kicker 5.16／h3 5.35／本文 5.22 で全てAA以上 */
  .fest .bg img{filter:none}
  .fest .duo::after{background:rgba(16,32,46,.70);mix-blend-mode:normal}
  .fest .duo::before{display:none}
  .fest{position:relative;z-index:1;color:#f4efe4;min-height:480px;display:flex;align-items:flex-end; /* z:2だと.mv(z:2)内のグロナビより前面に出る（DOM後勝ち）ため1に */
    padding:clamp(48px,7vw,88px) 0}
  .fest .bg{position:absolute;inset:0;background:#222}
  .fest .inner{position:relative;z-index:2;width:100%}
  .fest .in{max-width:580px}
  .fest .kicker{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.3em;color:#ffe9bf;font-weight:700}
  .fest h3{font-family:"Shippori Mincho B1",serif;font-weight:600;font-size:clamp(30px,3.6vw,44px);
    margin:16px 0 18px;letter-spacing:.1em;line-height:1.4}
  /* リード文はPC21px（2026-07-28FB・作品一覧の .disco-lead と同格）。SPは820px内で16pxへ */
  .fest p{margin:0;font-size:21px;color:#f2ecdf;line-height:1.75;letter-spacing:.01em}

  /* フッター：昼＝琉球藍（--primary）に生成り文字で頁を締める。夜＝MVと同じ藍墨（--mv-base）。
     文字は藍の上で読める生成り系の派生トーン */
  footer{position:relative;z-index:1;padding:56px 0 18px;background:var(--primary);color:#EDE7D8} /* 下は.copyを底辺近くに置くため詰める（2026-07-29FB） */ /* .festと同じ理屈でナビ(z:60 in .mv z:2)より下へ */
  :root[data-theme="night"] footer{background:var(--mv-base)}
  footer .logo{display:flex;align-items:center;gap:14px}
  footer .logo .ja{font-family:"Shippori Mincho B1",serif;font-weight:600;font-size:20px;letter-spacing:.14em;color:#F3EEE1}
  /* 分身ヤマネコ（名前の右隣・大きめ）＋名前縦積み（漢字の下にローマ字・2026-07-24FB） */
  .logo-mascot{width:84px;height:auto}
  footer .logo .name{display:flex;flex-direction:column;gap:2px}
  footer .logo .en{font-size:11px;letter-spacing:.28em;color:#F3EEE1;opacity:.7}
  /* ── イラストの縁取り（2026-07-27FB。値は :root の --kai-edge / --kai-edge-totop） ──
     黒い輪郭線のイラストは明地前提に描かれており、濃紺のフッター・暗い海写真の上では輪郭が沈む。
     地から細い線で切り離して浮かせる。画像ファイルは触らない：yamaneko-sansin.gif は50コマの
     パレットGIFで、全コマに縁を焼き込むと透過とコマ間隔が劣化する。CSSの drop-shadow なら
     いつでも外せて色も太さも1行で変えられる。
     ぼかし0・オフセットの drop-shadow を上下左右4方向に「重ねる」と、後段が前段の結果を
     さらに膨張させるので4本で角も埋まった縁になる（斜め4方向を足すと太り、
     輪郭ではなく光の輪に見えたので4本で止めた）。
     太さは当初1px→0.5pxへ（2026-07-28FB「視認性は保ちつつグレーが目立たないよう細く」。
     Retina等の高解像度では物理0.5pxの細線、等倍ディスプレイではAAで淡まった1px相当になり
     どちらでも輪郭の分離は残る。さらに細くは物理的に不可＝次に弱めるなら色側を触る）。
     色は #fff だと「切り抜きシールのように浮く」との指摘で濃紺と親和する青みグレーへ
     （#7A8894/#8A99A6/#A5B2BD/#fff を比較。#7A8894 は暗部で線が切れ、#A5B2BD から白寄りの浮きが出る）。
     対象は「常に暗い地の上にいる」2つ＝フッターのヤマネコとMVヘッダーのエンブレム（写真の上に
     載るので条件が同じ＝同じ値で揃える。2026-07-30のMV再設計まではライブ告知カードの
     マスコットGIFが対象だった）。TOPへ戻るの三線だけは別値＝末尾の .totop img を参照。
     ※フッターを生成り地にする案（地の側を明るくして輪郭を立たせる）も試したが
       「元の色に戻そう」とのFBで撤回済み＝濃紺のまま縁取りで解いている。 */
  .logo-mascot,
  .mv .nav2 .bm-cat{
    filter:drop-shadow(.5px 0 0 var(--kai-edge)) drop-shadow(-.5px 0 0 var(--kai-edge))
           drop-shadow(0 .5px 0 var(--kai-edge)) drop-shadow(0 -.5px 0 var(--kai-edge))}
  /* Instagramカード（関連リンクへ移設・アイコン付き・2026-07-24FB） */
  /* SNSカード：アイコン上・文字下の縦積み（基底.fbannerのcolumnのまま）・間隔は詰める（2026-07-24FB） */
  .fbanner.fbanner-sns{gap:0}
  .fbanner-sns .ico{width:20px;height:20px;flex:none;
    fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  /* バナーリンク枠（観光協会・船浮海運など）：藍の上のすりガラス枠 */
  .fbanners{padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid #ffffff26}
  .fbanners .lbl{display:block;font-size:11px;letter-spacing:.26em;font-weight:700;color:#CBD6DE;margin-bottom:16px}
  .fbanners .row{display:flex;flex-wrap:wrap;gap:12px}
  .fbanner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 18px;
    background:#ffffff10;border:1px solid #ffffff33;border-radius:8px;text-decoration:none;
    color:#EDF1F4;font-size:16px;letter-spacing:.03em;text-align:center;transition:border-color .2s,color .2s}
  .fbanner:hover{border-color:#C99A52;color:#fff}
  .fbanner small{display:block;font-size:10.5px;letter-spacing:.14em;color:#B9C6D0;margin-top:2px}
  /* 画像バナー：ロゴは明地前提の配色のため白チップに載せる */
  .fbanner-img{background:#fff;padding:10px 16px}
  .fbanner-img:hover{background:#fff}
  /* ロゴの元サイズ差を吸収して見た目を統一（高さ固定＋幅上限のボックスに収める） */
  .fbanner-img img{display:block;height:40px;width:auto;max-width:170px;object-fit:contain}
  .fbottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:baseline}
  /* コピーライト：中央・小さく・控えめ（otomatsuriの.copyと同じ役回り・2026-07-29） */
  footer .copy{margin-top:34px;text-align:center;font-size:12px;letter-spacing:.14em;color:#8FA3B0}
  footer .links{display:flex;gap:20px;font-size:16px;flex-wrap:wrap}
  footer .links a{color:#CBD6DE;text-decoration:none;padding-bottom:2px}
  footer .links a:hover{color:#fff;border-bottom:1px solid #C99A52}

  /* ── グローバルナビをハンバーガーへ切り替える幅（2026-07-30・実測で939.98px→999.98pxへ引き上げ） ──
     ナビの実寸613px（6項目＋gap26px）＋ブランド198px＋左余白(4vw)＋右余白120px が必要幅971px。
     ブランドが 123px→198px に太ったのは 2026-07-30 のMV再設計でロゴをエンブレム式
     （ヤマネコ＋池田卓）に替え、テキストをヤマネコの幅ぶん右へ退避したため。
     旧939.98pxのままだと 940〜969px でナビ6項目と「OFFICIAL WEB SITE」が2行に折り返した（実測）。
     1000px＝折返し限界970pxにブランドとナビの間隔30pxを足した値。
     下層ページ(.page-head/subpage.css)はロゴが従来のままで必要幅891pxだが、同じ画面幅で
     ページごとにナビの形が変わらないよう、従来どおり両者を同じ幅に揃えている。
     ※右余白120px＝右上のテーマ切替ピルを避ける逃げ（ピルを出すのはこの幅より上だけ）。 */
  @media(max-width:999.98px){
    .js .nav-toggle{display:inline-flex}
    .mv .nav2{padding:12px 16px;align-items:center}
    /* JS有効時＝バーの下にドロップダウン展開 */
    .js .mv .nav2 nav{position:absolute;top:100%;left:0;right:0;
      flex-direction:column;gap:0;
      background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(10px);
      border-top:1px solid var(--hairline);box-shadow:0 16px 30px -18px #26334088;
      padding:6px 16px 14px;max-height:70vh;overflow-y:auto;display:none}
    body.nav-open .mv .nav2 nav{display:flex}
    .js .mv .nav2 nav a,
    .js .mv .nav2.scrolled nav a{display:flex;align-items:center;min-height:44px;
      color:var(--primary);padding:13px 4px;border-bottom:1px solid var(--hairline)}
    .js .mv .nav2 nav a:last-child{border-bottom:none}
    .js .mv .nav2 nav a.on,
    .js .mv .nav2.scrolled nav a.on{color:var(--primary);border-bottom:1px solid var(--hairline)}
    /* JS無効時のフォールバック＝バー内で横スクロールして全リンクに到達可能 */
    .no-js .mv .nav2{flex-wrap:wrap}
    .no-js .mv .nav2 nav{width:100%;gap:16px;margin-top:8px;padding-bottom:4px;
      overflow-x:auto;-webkit-overflow-scrolling:touch}

    /* 昼夜切替はメニューの中（下の .nav-theme）へ移すので、右上の固定ピルはこの幅では出さない
       （2026-07-30。それまではヘッダーバーの下 top:78px へ縦積みで退避していた） */
    .theme-pill{display:none}
    /* 「TOPへ戻る」は開いたメニューの上に三線が重なるため隠す */
    body.nav-open .totop{opacity:0;visibility:hidden}

    /* ── メニュー最下部の「テーマ 昼／夜」行（トップ #gnav・下層 #gnav 共通） ──
       直前の「お問い合わせ」が border-bottom を持つので、この行に上罫線は足さない。
       JS無効では切替が動かないので出さない（.theme-pill と同じ扱い） */
    .js .nav-theme{display:flex;align-items:center;justify-content:space-between;
      min-height:44px;padding:9px 4px}
    .nav-theme-ttl{font-size:16px;letter-spacing:.04em;color:var(--primary)}
    .nav-theme-btns{display:flex;gap:2px;background:color-mix(in srgb,var(--primary) 10%,transparent);
      border:1px solid var(--hairline);border-radius:999px;padding:3px}
    .nav-theme button{font-family:inherit;font-size:13px;letter-spacing:.1em;border:none;cursor:pointer;
      border-radius:999px;min-width:52px;height:32px;background:transparent;color:var(--sub)}
    .nav-theme button.on{background:var(--primary);color:var(--bg-card)}

    /* エンブレムはSPも同じ絶対配置のまま比例縮小（52px＝従来のSP寸法。幅は 52*230/236＝50.7px、
       ＋gap 12px＝63px ぶんテキストを右へ退避） */
    .mv .nav2 .bm-cat{top:-7px;height:50px} /* 52→50px（2026-07-30FB・SPのみ縮小。PCは59pxのまま） */
    .mv .nav2 .bm-txt{padding-left:63px}
    .mv .nav2 .bm-ja{font-size:18px}
  }

  @media(max-width:820px){
    .about .grid{grid-template-columns:1fr}
    /* 1カラム時は写真下に .sec-foot が続く。ヤマネコは一回り小さめにして重なりを避ける */
    .about-mascot{width:88px}
    /* 作品棚のSPはスナップカルーセル＝画面に1枚＋左右の隣が20pxほど見切れ、1枚ずつ吸着。
       一度PCと同じ連続ドリフトへ振ったが「やっぱり1枚ごとスライドで」とのFBで再確定
       （2026-07-28FB×2）。自動送りは site.js のオートスライド（3.2秒に1枚）。
       スナップと連続ドリフトは両立しないため、SPの連続ドリフトは今後も使わない。
       チラ見せが左右フェードで消えないよう mask は解除、2周目の複製はスナップ送りには
       冗長なので出さない */
    .disco-shelf{scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none}
    .disco-track{gap:16px;padding:0 28px}
    .disco-track .disc[aria-hidden="true"]{display:none}
    .disc{width:min(calc(100vw - 72px),340px);scroll-snap-align:center}
    /* 矢印はSPでも表示（2026-07-28FB）。ジャケットに重なるぶん少し小さく・端に寄せる */
    .disco-arrow{width:40px;height:40px;font-size:20px}
    .disco-arrow.prev{left:8px}
    .disco-arrow.next{right:8px}
    .disco-lead{font-size:16px}
    /* 「作品一覧を見る」の下の余白。一度ボタン上と同じ40pxに揃えたが（+10px）、
       下は音祭りの暗い帯と接して狭く見えるとのFBでさらに広げ計56pxに（2026-07-28FB×2） */
    .band-shallow .sec-foot{margin-bottom:26px}
    .sec-head{flex-wrap:wrap;row-gap:6px}
    .live{grid-template-columns:84px 1fr}
    .live .arr{display:none}
    /* 下層ページへ飛ぶ「もっと見る」ボタンはSPで中央寄せ */
    .sec-foot{justify-content:center}
    /* SPは背面イラストがコンテンツ幅まで入り込むため、ライブ一覧と
       「もっと見る」ボタンには地色を敷いて可読性を確保（.lightは暗色帯用のため除外） */
    .lives{background:var(--bg)}
    .sec-foot .more:not(.light){background:var(--bg)}
    /* 音祭りバナーの「特設ページへ」ボタンもSPは中央寄せ */
    .fest .more.light{display:flex;width:max-content;margin-left:auto;margin-right:auto}
    .fest p{font-size:16px} /* リード文はSPでは従来サイズ（PC21pxの巻き戻し） */
    /* フッター関連リンク：SPは縮小して3つ横一列に収める（縦積み回避） */
    .fbanners .row{gap:6px}
    .fbanner{padding:6px 8px;font-size:11.5px}
    .fbanner small{font-size:8.5px;letter-spacing:.08em}
    .fbanner-img{padding:6px 8px}
    .fbanner-img img{height:24px;max-width:88px}

    /* ※グローバルナビのハンバーガー化は、この820pxブロックではなく
       上の @media(max-width:999.98px) に置いている（2026-07-27・理由はそちらのコメント参照） */

    /* ── MV（SP）：全幅1枚のまま。写真ごとに見せ場を再指定して顔（上）と文字（左下）を
       交差させない。カードは最下部の暗がりへ（2026-07-30再設計） ── */
    .mv{min-height:560px}
    /* 写真ごとの見せ場（SP）：顔を上へ。live-2 は横位置の全景なので
       高さが画面いっぱい＝縦の切りは無く、横位置だけで人物を中央に置く。
       live-3 は横長加工済みで人物がキャンバス中央＝50%のまま */
    .mv .ph .s-live1{object-position:44% 14%}
    .mv .ph .s-live2{object-position:50% 50%}
    .mv .ph .s-live3{object-position:50% 50%}
    /* 下半分にゆるい座面を作る（PC同様、2026-07-30FBで濃さを半分以下へ） */
    .mv .scrim{background:
      radial-gradient(130% 60% at 0% 100%, var(--day-corner) 0%,
                      rgba(9,24,38,.28) 42%, rgba(9,24,38,.06) 68%, rgba(9,24,38,0) 82%),
      linear-gradient(180deg, rgba(9,24,38,.40) 0%, rgba(9,24,38,0) 16%),
      linear-gradient(0deg, rgba(9,24,38,.46) 0%, rgba(9,24,38,.08) 44%, rgba(9,24,38,0) 62%),
      linear-gradient(0deg, var(--night-veil), var(--night-veil))}
    /* 名前は下げて大きく（2026-07-30FB）。bottom はカードとの兼ね合いで 126px が下限＝
       タイトルが2行に折り返したカード（高さ109px・bottom:14px）の上端まで余白が残る */
    .mv .bigname{left:18px;right:auto;top:auto;bottom:126px;width:min(76%,310px)}
    .mv .bigname .kicker2{font-size:11px;letter-spacing:.18em;gap:8px;margin-bottom:13px}
    .mv .bigname .kicker2::before{width:16px}
    .mv .bigname h1{font-size:48px;letter-spacing:.08em}
    .mv .bigname .en{font-size:12px;letter-spacing:.2em;margin-top:11px}
    /* SPでも縦書きのまま残す（2026-07-30FB）。右端の細い列に立て、上端はナビの下から。
       3枚とも人物は中央〜左寄りに置いているので、この列とは交差しない */
    .mv .catch-v{right:14px;top:96px;font-size:16px;letter-spacing:.3em;line-height:1.8}
    .mv .peek-wrap{left:14px;right:14px;bottom:14px;width:auto}
    .mv .peek-label{margin-bottom:6px}
    .mv .live-peek{padding:10px 16px 12px}
    .mv .peek-row{gap:14px}
    .mv .live-peek .d{font-size:22px}
    .mv .live-peek .t{font-size:15px}
    /* SPは行が2行に折り返す分縦に膨らむ→上下パディングと折返し行間をさらに詰める（2026-07-30FB） */
    .news .row{flex-wrap:wrap;gap:6px 14px;padding-top:12px;padding-bottom:12px}
    .news .row time{width:auto}
  }

/* WP管理バー表示時にテーマ切替ピルが被らないように
   （ピルを出すのはナビがPC表示になる1000px以上だけ＝スマホ幅はメニュー内の .nav-theme に移した） */
@media(min-width:1000px){
  body.admin-bar .theme-pill{top:46px}
}

/* 管理バー表示時は固定ヘッダーバーを管理バー高（PC=32px／782px以下=46px）ぶん下げる */
body.admin-bar .mv .nav2,
body.admin-bar .page-head .bar{top:32px}
@media(max-width:782px){
  body.admin-bar .mv .nav2,
  body.admin-bar .page-head .bar{top:46px}
}

/* ===== スキップリンク：視覚的に隠し、キーボードフォーカス時のみ表示（固定バーより手前 z:100） ===== */
.skip-link{position:fixed;top:8px;left:8px;z-index:100;
  padding:10px 18px;background:var(--primary);color:var(--bg); /* 夜は--primaryが明色化するため文字は固定色でなく--bg */
  border-radius:6px;font-size:15px;text-decoration:none;
  box-shadow:0 6px 20px -8px #26334088;
  transform:translateY(-160%);opacity:0;transition:transform .2s,opacity .2s}
  /* opacity:0 も重ねる理由（2026-07-28FB）：iOS Safari は上端バウンスやURLバー伸縮の間、
     fixed要素をページと一緒に動かすため、transformで画面外に置いただけだと
     ヘッダーが下がった隙間に「本文へスキップ」が丸見えになる。透明にしておけば
     位置がずれても見えない。visibility:hidden はフォーカス不能になるので使わない */
.skip-link:focus{transform:none;opacity:1;outline:2px solid var(--accent);outline-offset:2px}

/* ===== ページトップへ戻る：三線イラスト（右下固定・hoverで音符付きの絵へ切替・2026-07-24差し替え） ===== */
.totop{position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:40;
  border:0;background:transparent;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .35s,transform .35s,visibility .35s}
.totop.show{opacity:1;visibility:visible;transform:none}
/* 三線1枚。普段はまっすぐ、hoverで左に傾く（2026-07-24FB=回転方向反転） */
.tt-wrap{position:relative;display:block;rotate:0deg;transition:rotate .25s}
/* 縁取りだけは他のイラスト（--kai-edge＝青みグレー）と別値の生成り（--kai-edge-totop）を使う。
   .totop は position:fixed でページ全体の上に浮き、大半は明るい本文帯の上にいる。明地にグレーの縁が
   乗ると輪郭の分離ではなく「にじんだ影」に見えるため（ユーザー指摘）、地と同じ生成りにして
   明地では地に溶けて消し（そこでは黒い輪郭線だけで読める）、海写真・濃紺フッター・夜の暗地でだけ
   細い明線として立たせる。純白も並べたが明地でのにじみは同程度で濃紺の上での貼り付き感が強い。
   filter は宣言ごと差し替わるので、縁取りの後ろに既存の落ち影を書き足して残している（消すと絵が地に貼り付く）。
   .totop の hover 回転は .tt-wrap（親の span）の rotate なので filter とは干渉しない。 */
.totop img{width:clamp(72px,8.5vw,96px);height:auto;display:block;
  filter:drop-shadow(1px 0 0 var(--kai-edge-totop)) drop-shadow(-1px 0 0 var(--kai-edge-totop))
         drop-shadow(0 1px 0 var(--kai-edge-totop)) drop-shadow(0 -1px 0 var(--kai-edge-totop))
         drop-shadow(0 6px 14px rgba(28,58,87,.28))}
.totop:hover .tt-wrap{rotate:-8deg}
.totop-label{font-size:10px;letter-spacing:.2em;font-weight:700;color:var(--primary);
  background:var(--bg-card);border:1px solid var(--hairline);border-radius:999px;padding:2px 12px;
  box-shadow:0 2px 8px rgba(28,58,87,.12);
  margin-top:-14px} /* 画像側の透過余白ぶんを詰めて絵とラベルを近づける（2026-07-24FB） */
@media (prefers-reduced-motion:reduce){.tt-wrap{transition:none}}

/* ===== 海写真の固定背景層 ここから =====
   層順: この写真(z:-2) → body::beforeグラデ=白ウォッシュ(z:-1) → .seascape紅型(z:-1)
   → コンテンツ。iOS対応のためbackground-attachment:fixedは使わない。
   設計: docs/superpowers/specs/2026-07-24-opening-and-sea-bg-design.md */
.sea-photo{ position:fixed; inset:0; z-index:-2; pointer-events:none; }
.sea-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
/* ごく薄い減光マスク（2026-07-28FB「本当にうっすら暗く」＝紺6%→「もう少しだけ」で10%へ。
   2026-07-24の「昼はウォッシュ無し」から一段だけ方針更新。色は見出し影と同系の紺で写真と馴染ませる） */
.sea-photo::after{ content:""; position:absolute; inset:0; background:rgba(10,25,35,.10); }
/* 夜モード：写真を減光（既存の夜グラデ＝暗ウォッシュと二段構え） */
:root[data-theme="night"] .sea-photo img{ filter:brightness(.5) saturate(.8); }
/* ===== 海写真の固定背景層 ここまで ===== */

/* ===== 最新情報タブ（ライブ＋お知らせ統合。モック=2026-07-24） ここから =====
   sec-head の下にピル型タブ、その下に4パネル。JS無効時はタブを隠し「すべて」
   パネルのみ見える（他3パネルは hidden 属性で最初から非表示のまま）。
   下線型だとタブ下の線と最初の行の罫線が2本連続するため、罫線を持たないピル型に変更（2026-07-24FB）。 */
/* タブは改行させない（SPは横スクロール逃し・スクロールバー非表示） */
.feed-tabs{display:flex;flex-wrap:nowrap;gap:10px;margin-bottom:clamp(24px,3.5vw,32px);
  overflow-x:auto;scrollbar-width:none}
.feed-tabs::-webkit-scrollbar{display:none}
.ftab{flex:none;white-space:nowrap}
.no-js .feed-tabs{display:none}
/* タブ本体：丸ピル型ボタン。非選択=文字sub・枠なし（hoverで薄枠）、選択.on=primary塗り＋bg文字
   （昼＝紺地に紙白文字／夜＝明色地に紺文字がトークンで自動成立） */
.ftab{font-family:inherit;font-size:16px;letter-spacing:.06em;color:var(--sub);
  background:none;border:1px solid transparent;cursor:pointer;padding:.35em 1.1em;
  border-radius:999px;transition:color .25s,background-color .25s,border-color .25s}
.ftab:hover{color:var(--ink);border-color:color-mix(in srgb,var(--primary) 30%,transparent)}
.ftab.on,.ftab.on:hover{color:var(--bg);background:var(--primary);border-color:var(--primary)}
/* 夜モード：非アクティブが沈まないよう一段明るいトーンに */
:root[data-theme="night"] .ftab{color:var(--faint)}
:root[data-theme="night"] .ftab.on{color:var(--bg);background:var(--primary)}
/* 選択中の塗りはタブ名に対応するカテゴリチップと同系に（2026-07-27FB。一律 --primary 塗りだと
   タブ名とカテゴリタグの色が無関係だった）。front-page.php のタブには個別IDが振ってあるのでPHPは
   触らずIDで塗り分ける。IDセレクタは .ftab.on:hover（0-3-0）に詳細度で勝つので :hover の再指定は不要。
   「すべて」は現行の藍（--primary・10.57:1）のままなのでルールを書かない。値は :root の --kai-tab-* */
#ftab-live.on{background:var(--kai-tab-live);border-color:var(--kai-tab-live)}
#ftab-news.on{background:var(--kai-tab-news);border-color:var(--kai-tab-news)}
#ftab-media.on{background:var(--kai-tab-media);border-color:var(--kai-tab-media)}
/* ── タブのSP縮小 ──
   ※必ず上の基底 .ftab より後ろに置くこと。同詳細度（0-1-0）なので基底より前に書くと
     源順で負けて全幅16pxのままになる（2026-07-28FB「メディアタブが見切れる」の真因が
     これ＝旧820px指定が基底の前にあり一度も効いていなかった）。 */
@media(max-width:820px){.ftab{font-size:14px;padding:.3em .85em}}
/* スマホ縦幅ではさらに詰める。タブに使える幅はカード幅(100%-16px)−.inner左右padding(20px×2)
   ＝画面幅−56px。文字13px・字間.04em・余白と間隔をvw連動で縮め、320pxまで4タブが収まる
   （nowrap＋overflow-x:autoはそのまま＝万一溢れても従来どおりスクロールで到達できる） */
@media(max-width:430px){
  .feed-tabs{gap:clamp(4px,1.5vw,8px)}
  .ftab{font-size:13px;letter-spacing:.04em;padding:.3em clamp(.4em,1.8vw,.7em)}
}
.feed-panel[hidden]{display:none}
/* パネル内の小ラベル（.en ラベルの雰囲気：小さめ・字間広め・藍グレー） */
.feed-group{font-size:.8rem;letter-spacing:.24em;color:var(--sub);font-weight:600;
  margin:clamp(24px,3vw,32px) 0 10px}
.feed-panel > .feed-group:first-child{margin-top:0}
/* フィードの日付：1行の通常テキスト（例 2026.07.03）。本文ゴシック・本文と同サイズ・サブ色・tnum維持。
   横並び＝日付→チップ→（ライブのみ開催日ピル）→タイトルの1行フロー（SPは自然折返し） */
/* 行罫線は基底--hairline（紺の淡階調）に一本化。個別のcolor-mix指定は二重管理のため撤去（2026-07-24FB） */
.feed-panel .news .row{align-items:center;position:relative}
.feed-panel .news .row time{color:var(--sub);letter-spacing:.04em;line-height:inherit}
/* 行末のホバー矢印：hover/focus-within で現れて右へ滑る（クリックは阻害しない） */
.feed-panel .news .row::after{content:"→";position:absolute;right:6px;top:50%;
  transform:translate(-4px,-50%);color:var(--accent);opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease}
@media (hover:hover){.feed-panel .news .row:hover::after{opacity:1;transform:translate(0,-50%)}}
.feed-panel .news .row:focus-within::after{opacity:1;transform:translate(0,-50%)}
@media (prefers-reduced-motion:reduce){.feed-panel .news .row::after{transition:none}}
/* ===== 最新情報タブ ここまで ===== */

/* ===== トップ：すりガラス調の浮遊カード ここから =====
   固定背景の海写真(.sea-photo)の上に、各セクションの .inner を半透明のすりガラス
   カードとして浮かせる。カードの左右・上下の隙間から写真が覗く構成。
   スコープは body.home 限定＝#main は下層で <main id="main"> と共用のため必須。
   対象：最新情報(#main)・池田卓について(.about)・リンク(section.links)・
   お問い合わせ(.contact)。作品一覧(.band-shallow)・音祭り(.fest)・MV・フッターは対象外
   （作品一覧は 2026-07-24 補正でカード地を外し、海写真の上に直接＝下のブレイクアウト節）。
   設計: docs/superpowers/specs/2026-07-24-opening-and-sea-bg-design.md */

/* セクション自体は背景透明にして写真を通し、上下paddingは「カード間に写真が覗く」隙間にする */
body.home #main,
body.home .about,
body.home .band-shallow,
body.home section.links,
body.home .contact{
  padding-top:clamp(30px,4.5vw,64px);
  padding-bottom:clamp(30px,4.5vw,64px);
  background:transparent;
}
/* .contact は夜モードに別途 background 指定があるため、夜も透明で上書きする */
:root[data-theme="night"] body.home .contact{background:transparent}

/* 内側の .inner をすりガラスカードに。左右paddingは .inner 既定(clamp 20-48)を活かし、
   上下paddingをカード内へ持たせる。写真はカード外周（隙間）に見える。
   ※リンク(section.links)は 2026-07-27FB でガラス地を外し、作品一覧と同じく海写真の上へ
     直接置くブレイクアウトにしたので、このガラスの見た目のグループからは外れている（下の節） */
body.home #main > .inner,
body.home .about > .inner,
body.home .contact > .inner{
  /* 左上からの光の反射を第1層に重ねる多層background（疑似要素だとstacking問題が出るため）。
     昼夜で反射の強さは --glass-sheen トークンで切替（下層subpage.cssと同じ書き方で統一） */
  background:
    linear-gradient(115deg, var(--glass-sheen), rgba(255,255,255,0) 38%),
    linear-gradient(var(--glass-bg), var(--glass-bg));
  -webkit-backdrop-filter:var(--glass-filter);
  backdrop-filter:var(--glass-filter);
  border:1px solid var(--glass-line);
  border-radius:18px;
  box-shadow:var(--shadow);
}
/* 上下padding（カード内の余白）と幅はガラスを外したリンクも共通＝他カードと左端・カード間の隙間が揃う。
   カードはどの幅でも両サイドに写真を最低8px見せる（SP全幅化を防ぐ・2026-07-24ユーザー指示） */
body.home #main > .inner,
body.home .about > .inner,
body.home section.links > .inner,
body.home .contact > .inner{
  padding-top:clamp(40px,6vw,72px);
  padding-bottom:clamp(40px,6vw,72px);
  width:min(1120px, 100% - 16px);
  margin-inline:auto;
}
/* backdrop-filter 非対応環境では地の不透明度を上げて可読性を確保 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root[data-theme="day"]{--glass-bg:rgba(249,244,233,.92)}
  :root[data-theme="night"]{--glass-bg:rgba(16,32,46,.92)}
}

/* 作品一覧ブレイクアウト（2026-07-24）：カード地を外し海写真の上に直接。
   見出しは .inner 幅（他カードと左端揃え）で写真の上に白抜き、マーキーは .inner の外に出して
   画面全幅（edge to edge）、「作品一覧を見る」は .more.light（白抜き系）で内枠右寄せ。
   全幅マーキーの横あふれは body{overflow-x:hidden} でクリップ。夜は海写真が暗ウォッシュ済みのため白のまま。
   リンク(section.links)も 2026-07-27FB で同じブレイクアウトに揃えた＝上のガラスカード群から外し、
   見出しはここで同じ白抜き＋二層 text-shadow を共有する。
   ※スクリム（見出し背後の暗い下敷き）は「背景色が微妙」と却下された経緯があるので入れない。
     白文字の実測は海写真の明暗幅（白雲・白砂〜島の暗部）で 1.16〜3.47:1 と WCAG AA(4.5:1) 未達だが、
     二層 text-shadow が輪郭を作るため知覚上は読める（WCAG は影を加点しない）。箱に見えない対処が
     必要になった場合は、境界を持たないソフトなスクリムか text-stroke が次の選択肢。
   ※.rule（見出し右の罫線）は ::after{content:none} ＝実体を持たないレイアウト用スペーサーなので
     写真の上でも消えるものが無い＝色指定は不要。 */
/* 見出しの影は三層：最前にぼかし0・1px下オフセットの実線影（くっきり細い縁＝2026-07-28FB
   「ぼかしではなく、くっきり濃い影を細く」）＋近距離のくっきり＋遠距離のふんわり。
   明るい空・雲の上でも輪郭が立つ。※作品一覧とリンクは同じ海写真上なので影の濃さは共通 */
body.home .band-shallow .sec-head .ja,
body.home section.links .sec-head .ja{color:#fff;
  text-shadow:0 2px 0 rgba(10,25,35,.95), 0 1px 4px rgba(10,25,35,.95), 0 6px 30px rgba(10,25,35,.75)}
body.home .band-shallow .sec-head .en,
body.home section.links .sec-head .en{color:rgba(255,255,255,.92);
  text-shadow:0 1.5px 0 rgba(10,25,35,.92), 0 1px 3px rgba(10,25,35,.9), 0 4px 20px rgba(10,25,35,.7)}
/* 「作品一覧を見る」ボタン：海写真の上で浮くよう白ベースの半透明地＋軽いフロスト。
   文字・枠・矢印は「プロフィールを見る」と同じ標準.more配色（白文字は視認性が弱いため2026-07-24FBで変更）。
   .fest の .more.light（暗い夕景グラデ上）は現状の白抜き枠で可読なため据え置き＝作品棚スコープ限定 */
body.home .band-shallow .sec-foot .more.light{
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(6px) saturate(.9);
  backdrop-filter:blur(6px) saturate(.9);
  color:var(--primary);
  border-color:color-mix(in srgb,var(--primary) 55%,transparent)}
body.home .band-shallow .sec-foot .more.light::after{color:var(--accent)}
body.home .band-shallow .sec-foot .more.light:hover{background:rgba(255,255,255,.62);
  border-color:var(--amber);color:var(--primary)}
/* 夜は--primaryが明色になるため、地を夜ガラスと同系の紺にして文字を立てる */
:root[data-theme="night"] body.home .band-shallow .sec-foot .more.light{background:rgba(16,32,46,.55)}
:root[data-theme="night"] body.home .band-shallow .sec-foot .more.light:hover{background:rgba(16,32,46,.7)}

/* SP用の旧 --bg 塗り（背面イラスト .seascape 前提・現在は無効）はトップの
   すりガラス地では不透明ブロックになり効果を潰すため、トップのみ透明へ戻す */
@media(max-width:820px){
  body.home .lives{background:transparent}
  body.home .sec-foot .more:not(.light){background:transparent}
}
/* ===== トップ：すりガラス調の浮遊カード ここまで ===== */

/* ===== トップ：セクション再設計 案A「質感の三役＋海は幕間へ」ここから =====
   2026-07-28 内部レビュー承認案。モック design-proposals/section-redesign/（差分CSS
   redesign.css ＋ 確定DOM index.html）を 2026-07-29 にテーマへ移植したもの。

   ねらい：全セクションが同じ「海写真＋すりガラス」で並列だった状態をやめ、
   質感に役割を持たせる。
     ① 最新情報   ＝ 全幅のすりガラス（海が透ける面）……読むところ（2026-07-29 FBで紙面から変更）
     ③ について   ＝ 撤去 → ⑦ 段違い重なり構成へ（2026-07-29 ユーザーFB）
     ④改 作品一覧 ＝ 浅瀬のすりガラス（海が透ける面）……並べるところ
     ⑦ について   ＝ 写真（左・先行）×すりガラスパネル（右・後追い）の段違い
     ⑧ 音祭り     ＝ すりガラスパネル（左・先行）× 写真（右・後追い）の段違い＝⑦ の鏡像
     ⑨ リンク     ＝ 紙面（生成り＋紙目）……外へ渡すところ（三役の「紙」はここだけ）
   海写真を素通しで見せるのは ② 幕間（セクション間の透明帯）だけ。①・④改・⑧ ではガラス越しに
   ぼけて透ける＝「素通しの海／厚みのある水」で幕間とセクションを描き分ける。
   帯と海の継ぎ目は ⑥ 波型境界でつなぐ。

   ■ 置き場所
     この節は site.css 末尾（「トップ：すりガラス調の浮遊カード」節の後ろ）に置く。
     上の @media(max-width:820px) 内の .sec-foot .more 系ルールと同詳細度で当たる箇所が
     あるため、必ずそれらより後ろに置くこと。
     MV・お問い合わせ・フッターは無改変（ルールを書かない）。音祭りバナーは 2026-07-29 から
     ⑧ で、リンクは同日から ⑨ で改変（それまでは無改変だった）。
     ※モックの ⓪ 節と MOCK-ONLY 節（レビュー用スイッチ）はモック専用＝移植していない。

   ■■ front-page.php の DOM 変更（⑦・⑧・2026-07-29 実装済み）■■
     以下は CSS が前提にしている構造の記録。触るときは両方を合わせて直すこと。
     ● ⑦「池田卓について」
     旧： .about > .inner > [ .sec-head / .grid > (テキストdiv ＋ .fig.duo) / .sec-foot ]
     新： .about > .inner > [ .fig.duo ／ .about-panel > (.sec-head ＋ 本文 ＋ .sec-foot) ]
       1. ラッパー .grid を廃止（.about .grid のルールは以後どこにも当たらない）。
       2. .fig.duo を .inner の直下・DOM先頭へ移動（グリッドの左カラム）。
       3. 新規 <div class="about-panel"> を .fig の次に置き、その中へ
          .sec-head → リード/本文の <p> → .sec-foot（.about-cats ＋ .more）を移した。
       4. テキストを包んでいた無名の <div> は廃止（.about-panel が兼ねる）。
     ※ .inner は残す（クラス名も据え置き）。すりガラスは .inner から .about-panel へ
       移すため、⑦ で .inner 側のカード地を解除している。

     ● ⑧「船浮音祭り」（2026-07-29 ユーザーFB「音祭りの画像も、池田卓についてと同じ
        デザインで、左上にテキスト・右下に画像。全画面画像はやめる」）
     全幅の背景写真をやめて額装写真の要素に変えた＝⑦ の鏡像。
     旧： .fest > [ .duo.bg / .inner > .in > (.kicker / h3 / p / a.more.light) ]
     新： .fest > .inner > [ .fest-panel > (.kicker / h3 / p / a.more) ／ .fest-fig > img ]
       1. 全幅の背景写真 <div class="duo bg"> を削除（上の .fest .bg／.fest .duo::after
          ／.fest .bg img は以後どこにも当たらない）。セクションの地は透明＝固定海写真が
          そのまま見える。
       2. 新規 <div class="fest-fig"> を .fest-panel の次（.inner 直下・DOM末尾）に置き、
          1 で削除した写真の <img>（otomatsuri.jpg）をその中へ移した。額装（角丸・影・
          トリミング）は ⑧ の CSS が持つ。
       3. テキストを包む <div class="in"> のクラス名を "fest-panel" へ変更
          （上の .fest .in{max-width:580px} は以後当たらない＝⑧ で幅を持たせる）。
       4. CTA から light クラスを外した（class="more light" → class="more"）。
          白抜き（.more.light）は暗い写真直置き用の配色。⑦ の「プロフィールを見る」と
          同じ標準 .more にすると昼夜ともトークンで追従する。
          ※ .fest .more.light の SP 中央寄せルールも同時に外れる＝パネル内で左揃えになる
            （パネル内の文字組みが全て左揃えなのでこちらが揃う）。
       5. パネル本文を ⑦ と同じ「リード＋本文」の2段組みにした（2026-07-29 ユーザー指示）。
          既存の1文（船でしか行けない〜）に class="lead mincho" を付けてリードに格上げし、
          その下へ祭りの成り立ちを説明する <p> を1つ足した。主従の付け方は .about-panel と
          同じ（リード＝大きめの明朝・--primary／本文＝標準 16px・--ink）。
          ※足した本文は仮文言（front-page.php 側にもコメントで明記）。
            公開前にクライアント確認が必要。
     ※ .inner は残す（クラス名も据え置き）。⑦ と同じ 12 列グリッドの器になる。
   ============================================================================ */


/* ============================================================================
   ① 最新情報＝全幅すりガラス（body.home #main）2026-07-29 ユーザーFB
   当初は「生成り＋紙目テクスチャ」の不透明な紙面だったが、「砂テクスチャじゃなくて
   すりガラスにしたい。横幅は全画面のまま」との指示で ④改（.band-shallow）と同じ
   全幅すりガラスへ差し替えた。海写真が帯の向こうにぼけて透ける面になり、
   ② の幕間（素通しの海）との差は ④改 と同じ「厚みのある水」で出る。
   役割は「読むところ」のまま変わらない。紙の不透明さで読み場を示すのをやめ、
   全幅の面＋タブと罫線の水平線の反復でそれを示す（＝トップで最初に文字を追う場所）。
   質感の三役のうち「紙」は ⑨ リンクだけが受け持つ形になった（外へ渡すところ）。

   配合は ④改 と完全に同一（--glass-bg-plus の一段濃いガラス地＋多層background＋
   backdrop-filter）＝トークン参照なので夜モードは自動追従。⑤ にあった #main の夜上書き
   （紺紙 --bg-card ＋ soft-light）は不要になったので撤去した。
   全幅の帯なので radius／border／box-shadow は付けない：縁は直線のまま
   （⑥a のとおり #main の下端に波も付けない）。
   タブ・行リスト・カテゴリチップの中身は一切触らない＝色の変更はゼロ。実測でも
   全項目 AA 以上だったので、この帯限定のガラス濃度の追い足しも行っていない。
   ※2026-07-29 の ⑬「夜の明暗階層」で、夜だけ地を一段明るい「灯り」の配合へ差し替え、
     それに伴い夜のタブ非選択の文字色だけ --faint → --sub へ上げている（昼は無改変）。
     夜の現行値と実測は ⑬ 節を見ること。下の実測は昼＝現行、夜＝⑬ 以前の値。

   実効コントラスト（Chromium 1440px・中身を隠してガラス面だけ露出させ、帯が見える
   全スクロール位置を走査した最悪画素。昼の面 RGB 185,193,200〜244,244,240／
   夜の面 RGB 19,34,40〜60,74,86）：
     行タイトル .row a（--ink・18px）          昼 7.07／夜 8.10
     日付 time（--sub・13px）                  昼 4.99／夜 5.93
     タブ非選択 .ftab（昼 --sub／夜 --faint・16px） 昼 4.99／夜 4.66
     「お知らせ一覧へ」.more（--primary・16px） 昼 6.43／夜 7.52
   日付は基底 .news .row time の --faint（13px）ではなく、上の「最新情報タブ」節の
   .feed-panel .news .row time{color:var(--sub)} が当たって --sub になっている
   （computedStyle 実測 #3D4A55／夜 #C3D3DC）＝小さい文字は元から一段濃い側で、
   格上げの必要はなかった。最小余裕は夜のタブ非選択 4.66:1（--faint の 16px）。
   ============================================================================ */
body.home #main{
  --glass-bg-plus:color-mix(in srgb, var(--glass-bg) 78%, var(--bg));
  background:
    linear-gradient(115deg, var(--glass-sheen), rgba(255,255,255,0) 38%),
    linear-gradient(var(--glass-bg-plus), var(--glass-bg-plus));
  -webkit-backdrop-filter:var(--glass-filter);
  backdrop-filter:var(--glass-filter);
}
/* .inner のすりガラスカードを解除（幅・上下paddingは基底のまま＝行の位置は動かさない）。
   ガラスは帯（#main）側が持つので .inner に重ねるとガラスの二枚重ねになる。
   カード化せず全幅帯の中に素の行が並ぶ構成は紙面時代からそのまま維持する。 */
body.home #main > .inner{
  background:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:0;
  border-radius:0;
  box-shadow:none;
}


/* ============================================================================
   ② 幕間帯（.sea-gap）
   #main の直後と .about の直後に置く透明の帯。セクションが不透明になったぶん、
   固定海写真（.sea-photo）はここだけで見える＝海が「幕間」に回る。
   高さはPCで最小120px（写真の絵柄が1本の帯として読める下限）〜16vh。
   ============================================================================ */
.sea-gap{
  height:clamp(120px,16vh,200px);
  background:transparent;
}
/* リンク帯の上下は一段浅く。標準幅だと広すぎに見える（作品一覧の波境界が
   海へ食い込んで実効余白が詰まって見えるのと不釣合いになる・2026-07-29FB） */
.sea-gap.slim{height:clamp(72px,10vh,120px)}
@media(max-width:820px){
  .sea-gap{height:clamp(90px,12vh,140px)}
  .sea-gap.slim{height:clamp(56px,8vh,88px)}
}


/* ============================================================================
   ③ は撤去 → ⑦ の段違い構成へ（2026-07-29 ユーザーFB）
   「池田卓について」を深紺×人物写真の一枚の面にする案は「深紺が重い」との指摘で取り下げ。
   代わりに写真とすりガラスパネルを段違いに重ねる構成に置き換えた（下の ⑦ 節）。
   ここにルールは書かない。
   ※撤去した内容（帯色 #16304A ／白系の見出し・本文 ／ティール塗りの .more ／
     ヤマネコ 0.85 倍）は git 履歴を参照。
   ============================================================================ */


/* ============================================================================
   ④改 作品一覧＝浅瀬のすりガラス（body.home .band-shallow）2026-07-29 ユーザーFB
   当初は生成り→浅瀬色の不透明グラデ帯だったが、「海が完全に隠れて重い」ため
   すりガラス（半透明＋強ブラー）へ。海写真が帯の向こうにぼけて透ける＝浅瀬から
   水底を覗く見え方になり、②の幕間（素通しの海）との差が「厚みのある水」で出る。
   配合は本ファイル上部の「トップ：すりガラス調の浮遊カード」節と同一のトークン参照
   （多層background＋backdrop-filter）＝夜モードは自動追従。
   ただし全幅の帯なので radius／border／box-shadow は付けない：縁の役目は⑥の波が担う。
   カルーセルの寸法・機構（.disco-shelf/.disco-track/.disc の幅・gap・snap・JS）は不変。

   ガラス地だけ一段濃くする（--glass-bg-plus）：この帯は1120pxカードと違って全幅＝
   海写真の暗い部分（島影）まで跨ぐ。既定の --glass-bg(.68) のままだと、ガラス面の
   最も暗い画素の上で発売日 .y（--sub）が 4.31:1 と AA を割る（Chromium 1440px・昼・
   全スクロール位置を走査した実測）。--bg を 22% 足して実効 α .68→.75 にすると 4.95:1。
   足すのは白ではなく --bg（生成り／夜は藍）＝色相を動かさずに濃度だけ上げるため。
   夜は α .60→.69。夜は元から 5.42:1 で足りているが、昼夜で面の質感を揃える（実測 5.91:1）。
   ============================================================================ */
body.home .band-shallow{
  --glass-bg-plus:color-mix(in srgb, var(--glass-bg) 78%, var(--bg));
  background:
    linear-gradient(115deg, var(--glass-sheen), rgba(255,255,255,0) 38%),
    linear-gradient(var(--glass-bg-plus), var(--glass-bg-plus));
  -webkit-backdrop-filter:var(--glass-filter);
  backdrop-filter:var(--glass-filter);
}
/* 見出し・リード：写真上用の白抜き＋三層シャドウを解除して紺へ戻す */
body.home .band-shallow .sec-head .ja{color:var(--primary);text-shadow:none}
body.home .band-shallow .sec-head .en{color:var(--sub);text-shadow:none}
body.home .band-shallow .disco-lead{color:var(--primary);text-shadow:none}
/* キャプション：タイトルは紺（--primary）、発売日は同じ紺系の従トーン（--sub）で主従を残す。
   いずれも写真上用シャドウは解除。ガラス化後の実測（ガラス面の最悪画素・全スクロール位置）は
   昼 6.38:1／4.95:1、夜 7.50:1／5.91:1 で AA 以上＝影なしのまま読める。 */
body.home .band-shallow .disc .t{color:var(--primary);text-shadow:none}
body.home .band-shallow .disc .y{color:var(--sub);text-shadow:none}
/* 種別バッジ：淡地では白ピルの輪郭が消えるので紺25%の細枠を足す（地は一段不透明に）。
   文字色 #1C3A57 と枠の紺は昼夜とも固定＝ピル内部の比率は帯色に左右されない。
   八重山民謡の .c.min（緑ピル）は系統を保つため対象外。 */
body.home .band-shallow .disc .c:not(.min){
  background:rgba(255,255,255,.86);
  border-color:rgba(28,58,87,.25);
}
/* 矢印ボタン：淡地用に再配色（白＋紺の細枠＋紺のグリフ／影は淡地向けに軽く） */
body.home .band-shallow .disco-arrow{
  background:var(--bg-card);
  border-color:color-mix(in srgb,var(--primary) 28%,transparent);
  color:var(--primary);
  box-shadow:0 6px 18px -12px rgba(28,58,87,.5);
}
body.home .band-shallow .disco-arrow:hover{
  background:var(--bg-card);
  box-shadow:0 12px 24px -14px rgba(28,58,87,.6);
}
/* 参考（ルールは足さない）：本ファイル上部の「作品一覧を見る」(.more.light) が持つ
   backdrop-filter:blur(6px) は、帯がガラス（＝バックドロップルート）になった時点で
   効かなくなる（⑥ の入れ子の話と同じ）。地の rgba(255,255,255,.5) は残るので
   白い半透明ピルとしてそのまま成立し、文字は --primary で 10:1 以上＝対処不要。 */


/* ============================================================================
   ⑤ 夜モード（:root[data-theme="night"]）
   切替は <html data-theme="day|night">（head のインラインJS＋.theme-pill／site.js）。
   帯色の割り当て（2026-07-29 の ⑬「夜の明暗階層」で ①⑦⑧・contact の地を差し替えた。
   下の一覧は ⑬ 以前の割り当ての記録＝現行値は必ず ⑬ を見ること）：
     ① 最新情報 → ④改 と同じガラストークン（2026-07-29 のガラス化で紺紙 --bg-card ＋
                   soft-light の上書きを撤去）。→ ⑬ で夜だけ「灯り」の地へ差し替え。
     ③ について → 撤去済み＝テーマ既定のすりガラス（夜のトークンで自動追従）。
     ④改 浅瀬   → 夜のガラストークン（--glass-bg rgba(16,32,46,.6) ＋ blur(14) saturate(.9)）。
                   夜は海写真自体が brightness(.5) で沈むので、ガラス越しの地は昼より暗い＝
                   明色の --primary(#EFE9DA) が乗る。実測は ④改 のコメント参照。
                   ⑬ でもここだけは無改変＝夜の「暗のアンカー」に据えている。
     ⑦⑧ パネル → ⑦ と同じガラストークン（配合は .about-panel と同一）。→ ⑬ で ① と同じ
                   「灯り」の地へ差し替え（①⑦⑧ は同格）。
   ＝この節に残る夜の上書きは、淡地用に再配色した ④改 の矢印ボタンだけ（⑨ リンクの
   紺紙とカード枠は ⑨ 節、①⑦⑧・contact の夜の地と ① のタブ文字色は ⑬ 節が持つ）。
   ============================================================================ */
/* 矢印のグリフは夜だけティールに戻す（テーマ既定の夜配色を維持） */
:root[data-theme="night"] body.home .band-shallow .disco-arrow{
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 30%,transparent);
  box-shadow:0 6px 18px -12px rgba(0,0,0,.6);
}
:root[data-theme="night"] body.home .band-shallow .disco-arrow:hover{
  box-shadow:0 12px 24px -14px rgba(0,0,0,.75);
}


/* ============================================================================
   ⑥ 波型境界（2026-07-29 ユーザーFB「帯の境界が唐突・のっぺり」）
   帯と海（幕間）の継ぎ目を、静かな海面のうねりで柔らかくつなぐ。
     a. #main（最新情報）の下端    …… 直線（2026-07-29 ユーザーFBで波を撤去。同日ガラス化後も直線のまま）
     b. .band-shallow（作品一覧）の上端 …… ガラスの波が上の海へ食い込む
     c. .band-shallow（作品一覧）の下端 …… ガラスの波が下の海へ食い込む
        （下の海＝作品一覧と音祭りの間に追加した .sea-gap。front-page.php 側の変更・
        2026-07-29 実装済み）
     d. section.links（リンク）…… 直線（一度波にしたが 2026-07-29 FBで直線へ戻した。⑨ 節）
   ※ ③ について は撤去済み（すりガラス＝地が半透明で継ぎ目が無い）ので波は付けない。

   実装：mask-image（data:SVG）で波形に抜く。SVG を直接 background に塗ると色が固定され
   夜のトークンに追従しないため、色は必ず CSS 側（background）に持たせ、SVG は形（アルファ）
   だけを担当させる。
   波形：波高 26px に対して山谷差 10.5px（≒1/3）、1周期 640px の長波長。
   viewBox は 0 0 640 26、制御点は W/8・3W/8 の対称配置＝タイルの継ぎ目で接線が揃う
   （左端と右端の傾きが同じ）ため repeat-x しても折れ線にならない。
   mask-size は px 固定＋repeat-x（％だと狭い画面で波長だけ潰れて形が破綻する）。
   PC 1280〜1920px で 2〜3山／画面幅。

   ■ 掛け先を「擬似要素」から「帯そのもの」へ変更（2026-07-29・④改のガラス化に伴う）
     帯が不透明だった頃は、帯の外へ出した擬似要素（z-index:-1）に帯と同じ色を敷いて
     波形に抜いていた。④改で帯が backdrop-filter を持つと、この作りでは波がぼけない：
     backdrop-filter を持つ帯が「バックドロップルート」になり、その子（擬似要素）からは
     帯の外側の海を採れないため、波の中の海だけピントが合ったまま残って段差になる。
     Chromium 実測（1440px・昼）：
       ・擬似要素に mask＋backdrop-filter（帯にも backdrop-filter）… 効果なし（最大差 4/765）
       ・mask を外しても効果なし＝原因は mask ではなく親のバックドロップルート
       ・親の backdrop-filter を外すと擬似要素の blur は効く（最大差 152）
       ・帯自身に mask と backdrop-filter を同居させると blur は効く（最大差 97）
     ＝ mask と backdrop-filter の併用自体は可能。入れ子だけが不可。
     そこで擬似要素を廃止し、帯の上下に 26px の余白を足して（margin 負値で位置は据え置き）、
     帯そのものを 3 層マスク（上の波／中の矩形／下の波）で抜く。波は帯の地とひと続きの
     ガラスになるので、継ぎ目が原理的に発生しない。
     フォールバック（backdrop-filter 非対応）は本ファイル上部の @supports で --glass-bg が
     .92 まで上がる＝波も同じ色で濃くなるだけで、形は保たれる。
   ============================================================================ */
/* a. 紙面の下端は直線＝ルールなし（2026-07-29 ユーザーFBで波を撤去。夜上書きも不要になり削除） */
/* b/c. 作品一覧の上端・下端。上下 26px ぶん帯を伸ばし（負マージンで見た目の位置は不変）、
   その伸ばした 26px をマスクの波が担う。中央の層は linear-gradient の全面塗り＝
   mask-composite の既定（add）で 3 層のアルファが合成され、上下だけ波形に欠けた面になる。
   下端用のパスは山が下向き（上側を塗る）＝ a で使っていた形。 */
body.home .band-shallow{
  position:relative;
  margin-top:-26px;
  margin-bottom:-26px;
  padding-top:calc(clamp(30px,4.5vw,64px) + 26px);
  padding-bottom:calc(clamp(30px,4.5vw,64px) + 26px);
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 26' preserveAspectRatio='none'%3E%3Cpath d='M0,6.5 C80,-0.5 240,-0.5 320,6.5 C400,13.5 560,13.5 640,6.5 L640,26 L0,26 Z' fill='%23000'/%3E%3C/svg%3E"),
    linear-gradient(#000,#000),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 26' preserveAspectRatio='none'%3E%3Cpath d='M0,19.5 C80,12.5 240,12.5 320,19.5 C400,26.5 560,26.5 640,19.5 L640,0 L0,0 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 26' preserveAspectRatio='none'%3E%3Cpath d='M0,6.5 C80,-0.5 240,-0.5 320,6.5 C400,13.5 560,13.5 640,6.5 L640,26 L0,26 Z' fill='%23000'/%3E%3C/svg%3E"),
    linear-gradient(#000,#000),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 26' preserveAspectRatio='none'%3E%3Cpath d='M0,19.5 C80,12.5 240,12.5 320,19.5 C400,26.5 560,26.5 640,19.5 L640,0 L0,0 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-repeat:repeat-x, no-repeat, repeat-x;
  mask-repeat:repeat-x, no-repeat, repeat-x;
  -webkit-mask-size:640px 26px, 100% calc(100% - 50px), 640px 26px;
  mask-size:640px 26px, 100% calc(100% - 50px), 640px 26px;
  -webkit-mask-position:left top, left 25px, left bottom;
  mask-position:left top, left 25px, left bottom;
}
/* SP：640px タイルのままだと 1画面に半周期も入らず「ただの斜め」に見えるため波長を詰める。
   山谷差は 10.5px のままなので、傾きが立ちすぎない範囲（約1山／画面幅）に収める */
@media(max-width:820px){
  body.home .band-shallow{
    -webkit-mask-size:360px 26px, 100% calc(100% - 50px), 360px 26px;
    mask-size:360px 26px, 100% calc(100% - 50px), 360px 26px;
  }
}


/* ============================================================================
   ⑦ 池田卓について＝段違いの重なり（body.home .about）
   写真とテキストが等幅2カラムで並ぶ「教科書レイアウト」をやめ、
     ・左＝ライブ写真（.fig.duo）を上に先行させる
     ・右＝すりガラスパネル（.about-panel）を一段下げて後追いさせ、写真の右端へ乗せる
   の段違い＋重なりにする。パネルが上（z:2）なので、重なった部分は写真がガラス越しに
   ぼけて透ける＝すりガラスが「厚みのある板」として読める（マテリアル感の主目的）。

   ガラスの配合は本ファイル上部の「トップ：すりガラス調の浮遊カード」節と完全に同一
   （多層background＋backdrop-filter＋1px リム＋--shadow）。トークン参照なので夜モードは
   自動追従＝⑦ に夜の上書きは不要。角丸だけは 18px（浮遊カードの値）ではなく写真の額装
   （.fig／.fest-fig）と同じ 10px にする＝並んだ写真とパネルで角の丸みが揃う
   （2026-07-29 ユーザー指示。⑧ の .fest-panel も同じ 10px）。

   ※このセクションは front-page.php の DOM を組み替えている（2026-07-29 実装済み）。
     この節の冒頭「front-page.php の DOM 変更」の記録を必ず参照すること。
   ============================================================================ */
/* コンテナ：カード地を解除して 12 列グリッドへ。他カード(1120px)より広い 1280px まで
   広げる＝写真とパネルを重ねてもそれぞれの実寸が痩せないようにするため。
   左右 padding は 0（写真とパネルがそれぞれ端に着く）。両サイド 16px は海写真の見え代。 */
body.home .about > .inner{
  background:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  width:min(1280px, 100% - 32px);
  max-width:none;
  padding:0;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  align-items:start;
}
/* 写真：左 6 列（2026-07-29 FB：旧7列では重なりが写真内の人物に掛かったため一回り縮小）。
   align-self:start で高さは 4/3 の実寸のまま＝下へ伸びない＝
   パネルが下に食み出す「上=写真が先行・下=パネルが後追い」の段違いになる。
   額装（角丸 10px・--shadow）は上の .about .fig を維持し、重なり順だけ足す。 */
body.home .about .fig{
  grid-column:1 / 7;
  grid-row:1;
  align-self:start;
  z-index:0;
}
/* パネル：右 6 列（7〜12列）＝写真とは隣接。重なりは margin-left の負値 48px だけ
   （2026-07-29 FB：旧・列7まるごと約107px重ねでは写真右側の人物に掛かった。
   48px なら写真右端の舞台暗部にだけ乗り、人物を隠さない。パネル幅は 48px 広がる）。
   margin-top で段差をつける。position:relative は SP（グリッドを畳んだ後）でも
   z-index を効かせるため＝写真が .duo で position:relative を持っており、
   静的配置のままだと重ね順で負ける。 */
body.home .about .about-panel{
  grid-column:7 / 13;
  grid-row:1;
  position:relative;
  z-index:1;
  margin-left:-48px;
  margin-top:clamp(64px,9vw,140px);
  padding:clamp(28px,3.4vw,44px) clamp(24px,3vw,40px);
  /* ガラス地は④改と同じ「一段濃い」配合：昼の小さい英字（.sec-head .en 等の --sub）が
     既定 --glass-bg だと最悪画素で 4.3:1 とAAをわずかに割るため（v5検品の実測） */
  --glass-bg-plus:color-mix(in srgb, var(--glass-bg) 78%, var(--bg));
  background:
    linear-gradient(115deg, var(--glass-sheen), rgba(255,255,255,0) 38%),
    linear-gradient(var(--glass-bg-plus), var(--glass-bg-plus));
  -webkit-backdrop-filter:var(--glass-filter);
  backdrop-filter:var(--glass-filter);
  border:1px solid var(--glass-line);
  border-radius:10px; /* 写真の額装（.fig）と同値に統一（2026-07-29 ユーザー指示） */
  box-shadow:var(--shadow);
}
/* パネル内は横幅が 1120px カードより狭い（約 640px）ので、ヤマネコを絞って
   「プロフィールを見る」と横並びが成立する寸法にする（既定は PC420/SP380px）。
   280px＝パネル内寸 558px から .more の実測 213px ＋ gap 18px を引いた残り 327px 以内。
   これを超えると .more が縮んでラベルが2行に折れる（300px で折れるのを実測）。
   .sec-foot の左右振り分け（PC）／縦積み（SP）の機構自体は既存のまま。 */
body.home .about .about-cats{width:min(100%,280px)}
/* ※PCで「ボタン下・340px」へ動かす変更を2026-07-29に一度実施→同日FBで元の並び（ボタン左横・280px）へ差し戻し */
/* 上の寸法計算の保険：パネルが何かの拍子に細くなってもボタンだけは縮ませない */
body.home .about .sec-foot .more{flex:0 0 auto}
/* 821〜1175px でヤマネコ＋ボタンがパネル内寸を超えて頁ごと横スクロールしていた
   （v4検品で発見・最大153px）。収まらない幅では折り返して縦に積む＝あふれを根絶 */
body.home .about .sec-foot{flex-wrap:wrap}

/* SP：グリッドを畳んで縦積み。写真を全幅で先に出し、パネルを 40px 食い込ませて
   下から乗せる＝PC の「重なり」を縦方向に翻訳する。パネルは左右 12px ずつ内側に
   入れて写真より一回り細くし、重なっていることが分かるようにする。 */
@media(max-width:820px){
  body.home .about > .inner{
    display:block;
    width:min(1280px, 100% - 16px);
  }
  body.home .about .about-panel{
    width:calc(100% - 24px);
    margin:-40px auto 0;
    padding:clamp(24px,6vw,32px) clamp(18px,5vw,26px);
  }
}


/* ============================================================================
   ⑧ 船浮音祭り＝すりガラスパネル（左上）× 写真（右下）の段違い（body.home .fest）2026-07-29
   全幅写真の上にパネルを載せる構成をやめ、⑦ の鏡像にする（ユーザーFB「音祭りの画像も、
   池田卓についてと同じデザインで、左上にテキスト、右下に画像。全画面画像はやめる」）。
     ⑦ 写真＝左上・先行（z:1）× ガラスパネル＝右下・後追い（z:2）
     ⑧ ガラスパネル＝左上・先行（z:2）× 写真＝右下・後追い（z:1）
   重なりの向きは ⑦ と揃える（常にガラスが上＝重なった部分は写真がガラス越しにぼけて透ける）。
   左右だけを入れ替えることで 2 セクションが「同じ言語の対句」になり、続けて読んでも単調にならない。
   セクションの地は透明＝周囲は固定海写真がそのまま見える（.about と同じ見え方）。
   ガラスの配合は ⑦ の .about-panel と完全に同一のトークン参照＝夜モードは自動追従
   （⑧ に夜の上書きは無い）。
   ※このセクションも front-page.php の DOM を組み替えている（2026-07-29 実装済み）。
     この節の冒頭「front-page.php の DOM 変更」の記録を必ず参照すること。
   ============================================================================ */
/* 帯：全幅写真（.duo.bg）を外したので、写真前提の指定を解く。
   display:flex＋align-items:flex-end（写真の下端に文字を寄せる指定）と min-height:480px
   （写真の見せ丈）は役目が終わった。上下 padding は他のトップのセクション（#main・.about・
   .band-shallow）と同じ値に揃える＝海の幕間との間隔がページ全体で揃う。 */
body.home .fest{
  display:block;
  min-height:0;
  padding-top:clamp(30px,4.5vw,64px);
  padding-bottom:clamp(30px,4.5vw,64px);
}
/* コンテナ：⑦ と同じ 12 列グリッド（1280px・左右 padding 0）。
   既存の .fest .inner の z-index:2 は中和する（z-index:auto）：.mv{z-index:2} の中に居る
   固定ヘッダー(z:60)と同点になり、DOM後勝ちでヘッダーを覆ってしまうため（2026-07-29修正）。 */
body.home .fest > .inner{
  width:min(1280px, 100% - 32px);
  max-width:none;
  padding:0;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  align-items:start;
  z-index:auto; /* 基底の z-index:2 を中和（.mv内の固定ヘッダーを覆わないため・2026-07-29） */
}
/* パネル：左 6 列（1〜6列）・先行（上）。align-self:start で自身の高さのまま上端に着く。
   配合は ⑦ の .about-panel と同一（--glass-bg は素の値のまま＝下は海写真で、④改 のような
   全幅の暗部を跨がないため濃度を足す必要がない）。position:relative は SP（グリッドを
   畳んだ後）でも z-index を効かせるため。 */
body.home .fest .fest-panel{
  grid-column:1 / 7;
  grid-row:1;
  align-self:start;
  position:relative;
  z-index:1;
  padding:clamp(28px,3.4vw,44px) clamp(24px,3vw,40px);
  /* ガラス地は .about-panel と同じ「一段濃い」配合（昼の kicker=--sub のAA担保・v5検品実測） */
  --glass-bg-plus:color-mix(in srgb, var(--glass-bg) 78%, var(--bg));
  background:
    linear-gradient(115deg, var(--glass-sheen), rgba(255,255,255,0) 38%),
    linear-gradient(var(--glass-bg-plus), var(--glass-bg-plus));
  -webkit-backdrop-filter:var(--glass-filter);
  backdrop-filter:var(--glass-filter);
  border:1px solid var(--glass-line);
  border-radius:10px; /* 写真の額装（.fest-fig）と同値に統一（2026-07-29 ユーザー指示） */
  box-shadow:var(--shadow);
}
/* 写真：右 6 列（7〜12列）・後追い（下）。額装は既存の .about .fig と同じ
   （角丸 10px＋--shadow）。margin-top で段差をつけ、margin-left の負値 48px で写真の
   左上角をパネルの右端の下へ潜らせる＝重なった 48px はガラス越しにぼける（⑦ と同じ重なり量）。
   縦横比は 3/2：原画 otomatsuri.jpg は 1440×810（16:9）なので、⑦ の 4/3 だと左右の
   スピーカーごと切り落として舞台だけの窮屈な絵になる。3/2 なら客席の広がりが残る。
   写真は ⑦ の .fig.duo と同じモノクロ処理に揃える（2026-07-29 ユーザー指示。旧・全幅
   時代のフルカラー据え置きは廃止）。処理の内訳は下の .fest-fig 群のコメント参照。 */
body.home .fest .fest-fig{
  grid-column:7 / 13;
  grid-row:1;
  position:relative;
  z-index:0;
  margin-top:clamp(64px,9vw,140px);
  margin-left:-48px;
  aspect-ratio:3/2;
  border-radius:10px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--mv-base); /* .duo と同じ下地（画像が来る前の地・トリミングの余白） */
}
/* 写真はカラー（2026-07-29 一度モノクロ化＝.duo複製方式を実装したが、同日FB
   「やっぱりカラー」で取り下げ。祭りの色を落とさない。経緯と旧・duo複製の注意は git 履歴参照） */
body.home .fest .fest-fig img{width:100%;height:100%;object-fit:cover;display:block}
/* 夜：旧・全幅時代のベール(.70)が無くなり、夜の画面でこの写真だけ減光ゼロで最も明るく
   浮くため、軽く沈める（海写真の brightness(.5) より控えめ） */
:root[data-theme="night"] body.home .fest .fest-fig img{filter:brightness(.8)}
/* 文字色：写真直置き用の白系（#ffe9bf／#f4efe4／#f2ecdf）から、ガラス上のトークンへ。
   昼は暗文字・夜は明文字に自動で反転する。
   キッカーだけは元の飴色を引き継げない：--amber(#B9873C) は昼のガラス地の上で 1.8:1 と
   AA に遠く届かないため、⑦ のラベル（.sec-head .en）と同じ従トーン --sub にする。 */
body.home .fest .fest-panel .kicker{color:var(--sub)}
body.home .fest .fest-panel h3{color:var(--primary)}
/* 本文の主従は ⑦ の .about-panel と同じ組み（2026-07-29 ユーザー指示で本文段落を追加）。
   既存の .fest p{font-size:21px}（旧・写真直置き時代のリード1文用）は本文にも当たるので
   ここで標準の 16px へ戻し、リード（.lead）だけ .about .lead と同値の明朝で立てる。 */
body.home .fest .fest-panel p{color:var(--ink);font-size:16px;line-height:1.75;margin:0 0 18px}
body.home .fest .fest-panel p:last-of-type{margin-bottom:0}
body.home .fest .fest-panel .lead{
  font-size:clamp(20px,1.9vw,23px);
  font-weight:600;
  line-height:1.8;
  letter-spacing:.05em;
  margin-bottom:26px;
  color:var(--primary);
}

/* SP：グリッドを畳んで縦積み。⑦ の縦翻訳の鏡像＝パネルを先に出し、写真を 40px 食い込ませて
   下から重ねる（重なり順はガラスが上のまま＝写真の上端がパネルの下でぼける）。
   写真は左右 12px ずつ内側に入れてパネルより一回り細くし、重なっていることが分かるようにする。 */
@media(max-width:820px){
  /* SPは ⑦について と同じ「写真が上・パネルが下から40px重なる」並びに揃える
     （2026-07-29ユーザー指示）。DOMはPC用（パネル→写真）のまま flex の order で反転 */
  body.home .fest > .inner{
    display:flex;
    flex-direction:column;
    width:min(1280px, 100% - 16px);
  }
  body.home .fest .fest-fig{
    order:-1; /* 写真を上へ */
    width:100%; /* SPは写真をもっと大きく＝.inner全幅（2026-07-29ユーザー指示） */
    margin:0;
  }
  body.home .fest .fest-panel{
    width:calc(100% - 24px);
    margin:-40px auto 0; /* ⑦と同じ40px食い込み */
    padding:clamp(24px,6vw,32px) clamp(18px,5vw,26px);
  }
  /* SPはリードの<br>を無効化＝「に、」の孤立行を防ぎ自然折返しに任せる（2026-07-29FB） */
  body.home .fest .fest-panel .lead br{display:none}
  /* SPは「特設ページへ」を中央揃え（旧 .fest .more.light のSP中央寄せと同じ書き方・2026-07-29） */
  body.home .fest .fest-panel .more{display:flex;width:max-content;margin-left:auto;margin-right:auto}
}


/* ============================================================================
   ⑨ リンク＝紙面の帯（body.home section.links）2026-07-29 ユーザー指示
   海写真の上に白いカードが 4 枚だけ浮いている状態（2026-07-27FB のブレイクアウト）をやめ、
   「生成りの紙」の全幅帯に載せる（この配合は①最新情報が紙面だった時代の流用。①は
   2026-07-29 にガラス化したため、現在この紙の質感は ⑨ 専用＝三役の「紙」はここだけ）
   （紙目テクスチャ multiply／夜は --bg-card の紺紙 soft-light）。
   これでトップの質感は 紙(①)→海→写真×ガラス(⑦)→海→浅瀬ガラス(④改)→海→写真×ガラス(⑧)
   →紙(⑨) と三役の中で反復し、リンクだけ根拠なく海に浮いている状態が解消する。

   カード（.linkcard）は白地＋--hairline の枠＋影を上部で既に持っており、生成りの紙の
   上でも面として立つ（昼 #FFFFFF 対 #F7F3E8）ので無改変。
   ※夜だけは帯（--bg-card #1E3448）とカード地（同じ --bg-card）が同色になるため、
     カードの輪郭が枠 1px だけに頼る。下で夜のみ枠を一段強める（地・影・寸法は触らない）。

   上下の境界は直線（2026-07-29 ユーザーFBで波→直線へ変更。①紙面の下端と同じ扱い）。
   縦幅は同FBで大きく詰める＝「メインコンテンツではなく、おまけのような扱い」（ユーザー言）。
   見出し＋カード1段だけの渡し場として最小限の呼吸だけ残す。
   ============================================================================ */
body.home section.links{
  background:url("textures/bg_texture_noise.png") repeat,
             var(--bg);
  background-blend-mode:multiply;
  padding-top:clamp(14px,1.8vw,24px);
  padding-bottom:clamp(14px,1.8vw,24px);
}
/* 夜：① と同じ紺紙（--bg-card は --bg より一段明るく、暗い海の上で紙として立つ）。
   テクスチャの重ね方も ① と同じ soft-light＝暗地でも粒が黒く潰れない。 */
:root[data-theme="night"] body.home section.links{
  background:url("textures/bg_texture_noise.png") repeat,
             var(--bg-card);
  background-blend-mode:soft-light;
}
/* 見出し：上部で作品一覧と共有している「写真直置き用の白抜き＋三層シャドウ」を解除して
   紙面の紺へ戻す（④改 の .band-shallow にした処置と同じ）。地が不透明な紙になったので、
   影に頼らず --primary / --sub のトークンだけで昼夜とも AA を満たす。 */
body.home section.links .sec-head .ja{color:var(--primary);text-shadow:none}
body.home section.links .sec-head .en{color:var(--sub);text-shadow:none}
/* 夜のみ：帯とカードが同じ --bg-card で同色になるため、カードの枠だけ一段はっきりさせる
   （--hairline #2B4459 → --accent の淡階調）。地・影・寸法・昼の見た目は触らない。 */
:root[data-theme="night"] body.home section.links .linkcard{
  border-color:color-mix(in srgb,var(--accent) 32%,var(--hairline));
}


/* ============================================================================
   ⑪ 見出し英字ラベル＝ティール（body.home の .sec-head .en ＋ ⑧ の .fest-head .en）2026-07-29
   セクション見出しの小英字（NEWS／ABOUT／DISCOGRAPHY／LINKS／CONTACT／FUNAUKI-OTOMATSURI）を、
   それまでの紺系の従トーン --sub から --accent（ティール #2FA8B5）基調へ振る。
   面の中で一番小さい文字だけに色を置き、見出し本体（.ja の紺）との主従はそのまま残す。

   ■ 混合比（下の --en-teal）
   生の --accent は 12px の小文字には明るすぎる（昼＝ガラス面の最悪画素に対して 1.34:1）。
   同じ色相のまま明度だけ落とす必要があるが、締め先に何を使うかで色相の残り方が変わる。
   AA(4.5:1) を満たす限界まで暗くしたときの実測比較（昼・帯の最悪画素基準）：
     --primary #1C3A57 で締める … accent 14% が限界 → #1F4964（色相 203°）＝紺に呑まれる
     --ink     #263340 で締める … accent 19% が限界 → #284956（色相 197°・彩度 0.37）
     --mv-base #10202e で締める … accent 31% が限界 → #1A4A58（色相 194°・彩度 0.54）
   --mv-base（MVの地＝藍を沈めた、ほぼ無彩に近い暗色）が一番ティールの色相と彩度を残す
   ＝「藍墨で締めたティール」。限界の 31% から一段だけ余裕を取って 30% を採用する。
     昼 color-mix(--accent 30%, --mv-base) ＝ #194957（色相 194°・彩度 0.55）
   夜は面が暗く反転するので締める向きも逆：夜の --accent #5BC4CE をわずかに明るい側へ寄せる。
   生値でも 4.26:1 と AA まであと一歩なので、夜の --primary（生成り #EFE9DA）を 15% だけ足す。
     夜 color-mix(--accent 85%, --primary) ＝ #71CAD0（色相 184°）
   昼夜で締め先が違う（藍墨／生成り）のは、暗くする・明るくするで向きが逆だから。

   ■ 実測（Chromium・帯の中身を隠して面だけ露出させ、帯が見える全スクロール位置を走査した
      最悪画素。①④改⑦⑧ で確立した方式と同一。数値は 1440px／390px の悪い方）
     ①最新情報ガラス   昼 5.36／夜 4.71      ⑦aboutパネル    昼 4.90／夜 5.35
     ④改 作品一覧ガラス 昼 5.38／夜 4.82      ⑨リンク紙面     昼 7.70／夜 6.55
     contactガラスカード 昼 4.64／夜 4.60     ⑧音祭りパネル   昼 4.97／夜 4.80
   最小余裕は contact カードの昼 4.64:1。ここだけ地が薄い（他の帯は --glass-bg-plus の
   一段濃いガラスだが、contact は既定 --glass-bg のまま）ため全帯の中で一番きびしい。

   ■ 掛け先
   ④改（.band-shallow）と ⑨（section.links）は自分の節で .en に color を当てているため、
   ここでは帯別セレクタで明示的に上書きする（同詳細度・後勝ち）。この節は必ず ⑨ より後ろ。
   下層ページの .page-head .en は body.home の外＝無改変。
   ============================================================================ */
body.home{
  /* 2026-07-29FB の変遷: AA限界の#194957「紺と変化ない」→緑寄せ#14504A「もっと明るく」→
     **生の --accent(#2FA8B5) を採用（ユーザー裁定）**。明るい地では1.6〜2.6:1とAA未満だが、
     このラベルは日本語見出しの装飾的な重複（意味は.jaが担持）であり、サイトの署名色を
     見出しに宿す視覚判断を優先した。本文系の文字には流用しないこと。 */
  --en-teal:var(--accent);
}
:root[data-theme="night"] body.home{
  --en-teal:color-mix(in srgb, var(--accent) 85%, var(--primary));
}
/* contact のガラスカードだけ既定 --glass-bg のままで全帯最薄＝ラベル色の暗さの律速だった。
   ④改・⑦・⑧と同じ「一段濃い」配合に統一する（backdrop-filter等は基底のまま・地だけ差替え） */
body.home .contact > .inner{
  --glass-bg-plus:color-mix(in srgb, var(--glass-bg) 78%, var(--bg));
  background:
    linear-gradient(115deg, var(--glass-sheen), rgba(255,255,255,0) 38%),
    linear-gradient(var(--glass-bg-plus), var(--glass-bg-plus));
}
body.home #main .sec-head .en,
body.home .about .about-panel .sec-head .en,
body.home .band-shallow .sec-head .en,
body.home section.links .sec-head .en,
body.home .contact .sec-head .en,
body.home .fest .fest-panel .fest-head .en{
  color:var(--en-teal);
  font-size:14px; /* 12→14px（2026-07-29ユーザー指示・6ラベル共通） */
  text-shadow:none;
}
/* ⑧ 音祭りの見出しにも同じ「和文＋小英字」の組みを持たせる（front-page.php で
   h3 と span.en を .fest-head で包む DOM 変更を実施済み）。
   .sec-head と同じ baseline 揃えの横並び。ラベルが 17 字＋ハイフンと長くパネル内寸に
   入らない幅があるため flex-wrap で h3 の下へ落とす（SP の .sec-head と同じ逃し方）。
   h3 の上下マージン（16/18px）はラッパー側へ移して、折り返しても縦の間隔が変わらないようにする。 */
body.home .fest .fest-panel .fest-head{
  display:flex;
  align-items:baseline;
  gap:18px;
  flex-wrap:wrap;
  row-gap:4px;
  margin:16px 0 18px;
}
body.home .fest .fest-panel .fest-head h3{margin:0}
body.home .fest .fest-panel .fest-head .en{
  font-size:14px; /* ⑪の6ラベル共通サイズ（2026-07-29） */
  letter-spacing:.38em;
  font-weight:500;
  text-transform:uppercase;
  transform:translateY(-2px);
}
/* ============================================================================
   ⑫ CTAボタンの地を統一（2026-07-29 ユーザーFB「作品一覧を見るだけ白っぽい背景が
   ついている。他のボタンもこれに合わせて」）
   「作品一覧を見る」（.band-shallow .sec-foot .more.light＝白50%地＋軽いフロスト・
   紺文字・夜は紺地反転）の見た目を、トップの他CTA3つへ展開する：
     お知らせ一覧へ（#main）／プロフィールを見る（.about-panel）／特設ページへ（.fest-panel）
   Contact の送信ボタン（フォーム系）は対象外。文字・枠・矢印はもともと標準 .more で
   共通のため、足すのは地とホバー地だけ。親がガラスの中では blur が親の外の海まで
   届かない既知の制約は「作品一覧を見る」と同条件。 */
body.home #main .sec-foot .more,
body.home .about .about-panel .sec-foot .more,
body.home .fest .fest-panel .more{
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(6px) saturate(.9);
  backdrop-filter:blur(6px) saturate(.9);
}
body.home #main .sec-foot .more:hover,
body.home .about .about-panel .sec-foot .more:hover,
body.home .fest .fest-panel .more:hover{
  background:rgba(255,255,255,.62);
}
/* 夜は --primary が明色になるため、地を夜ガラスと同系の紺に（作品一覧を見ると同値） */
:root[data-theme="night"] body.home #main .sec-foot .more,
:root[data-theme="night"] body.home .about .about-panel .sec-foot .more,
:root[data-theme="night"] body.home .fest .fest-panel .more{
  background:rgba(16,32,46,.55);
}
:root[data-theme="night"] body.home #main .sec-foot .more:hover,
:root[data-theme="night"] body.home .about .about-panel .sec-foot .more:hover,
:root[data-theme="night"] body.home .fest .fest-panel .more:hover{
  background:rgba(16,32,46,.7);
}


/* ============================================================================
   ⑬ 夜の明暗階層（:root[data-theme="night"] スコープのみ）2026-07-29 ユーザーFB
   「夜モードのグラス背景が全部暗すぎる。メリハリを付けたい」

   昼は 紙(⑨)／ガラス(①④改⑦⑧)／写真 で明暗のリズムが付くが、夜は全帯が同じ夜ガラス
   トークン（--glass-bg rgba(16,32,46,.6)）に沈み、面の代表輝度が L=0.026〜0.032 の
   狭い範囲に全部収まっていた（帯どうしの明暗比は最大でも 1.08＝「暗い塊が続く」）。
   夜だけ帯を三段に割り直す：
     灯り（明）… ① 最新情報 ／ ⑦ about パネル ／ ⑧ 音祭りパネル
                  ＝読む場所と焦点のカード。夜に部屋の明かりが灯るイメージ。三者は同格。
     中間     … お問い合わせカード（灯りと暗のあいだ）
     暗（錨） … ④改 作品一覧＝深い水。ジャケットが光る「暗のアンカー」＝無改変。
     最暗     … ② 幕間・MV・フッター＝無改変（夜の海と暗部はそのまま残す）
   ⑨ リンクの紺紙も無改変（理由は下の「⑨ について」）。昼のルールには一切触っていない。

   ■ 作り
   夜だけ --glass-bg-plus（各帯が自分の節で持つ「一段濃いガラス地」）を差し替える。
   カスタムプロパティは詳細度の高い宣言が勝ち、各節の background／backdrop-filter／
   リムの記述はそのまま生きる＝多層ガラスの作り自体は不変で、地の色と不透明度だけが動く。

   色は紺紙 --bg-card(#1E3448) に生成り --primary(#EFE9DA) を 10% 差した一段明るい紺
   （#334657＝下の --lit-tint）。--bg-card を混ぜて不透明側へ寄せるだけでは明るくならない：
   夜の海写真は brightness(.5) 越しでも面の平均が RGB(55,78,93) と紺紙より明るいためで、
   実際 ⑨ の不透明な紺紙が実測 L=0.0323＝暗ガラス 0.0279 との差が 1.06 しかない。
   ＝地そのものを持ち上げる必要がある。

   不透明度は α.92（灯り）／α.88（中間）。既定の .688 から上げるのは、水面の明るい画素
   （最明 RGB(153,160,165)）が透けて出る量を抑えて面の「最悪画素」を下げるため＝
   文字の AA を保ったまま平均輝度を上げられる。夜の面は「厚みのある水」から
   「灯りの点いた紙寄りのガラス」へ寄る（ユーザー指示の「紺紙寄り」）。
   ④改 だけ既定のガラスのまま残すので、①⑦⑧ が明るくなるぶん対比で一段深く沈んで見える。

   ■ 帯間の差（Chromium 1440px／390px・中身を隠して面だけ露出させ、帯が見える全スクロール
      位置を走査した平均画素と代表輝度 L。カッコ内は ④改 との明暗比 (L1+.05)/(L2+.05)）
                        変更前                     変更後
     ① 最新情報      RGB(30,49,63) L.0279(1.00) → RGB(53,72,89) L.0616(1.43)
     ⑦ about パネル  RGB(29,47,62) L.0264(0.98) → RGB(53,72,88) L.0608(1.42)
     ⑧ 音祭りパネル  RGB(30,49,64) L.0288(1.01) → RGB(53,73,89) L.0618(1.44)
     contact カード  RGB(29,47,63) L.0266(0.99) → RGB(43,64,82) L.0478(1.26)
     ④改 作品一覧    RGB(30,49,63) L.0279(1.00) → 無改変（同左）
     ⑨ リンク紺紙    RGB(30,52,72) L.0323(1.06) → 無改変（同左）
   ＝灯りの三帯は暗のアンカーに対して 1.43 前後、中間の contact は 1.26。
   帯どうしの最大差は 1.08（⑨ 対 ⑦）から 1.44（⑧ 対 ④改）へ広がった。

   ■ 明るくした帯の文字（同じ走査の最悪画素＝面が一番明るい画素に対する実測。
      1440px／390px の悪い方。本文系は AA 4.5:1 以上を維持）
     ① 行タイトル .row a（--ink・18px）        6.46
     ① 日付 time（--sub・13px）                4.73
     ① タブ非選択 .ftab（--sub・16px）         4.73  ※下の「タブ」参照
     ⑦ 見出し .ja／リード .lead（--primary）   6.30
     ⑦ 本文 p（--ink・16px）                   6.79
     ⑧ kicker（--sub・12px）                   4.81
     ⑧ 見出し h3／リード（--primary）          6.10
     ⑧ 本文 p（--ink・16px）                   6.57
     contact 見出し・リード（--primary）       6.67
     contact 本文 .note（--sub・16px）         5.26
     contact ラベル .field label（--ink・16px）7.18
     CTA 3つ（--primary・⑫の紺地 rgba(16,32,46,.55) の上）10.5〜10.7
       ＝ボタンは自前の地を持つので帯が明るくなっても比率はほぼ不変（面 L=0.030）。
   参考：④改（無改変）はタイトル 7.64／発売日 6.02 で、明るくした帯より数値が高い＝
   「暗いほど明文字は読みやすい」ぶん、①⑦⑧ は明るくした側で下限に寄る配分になる。
   英字ラベル .en（--en-teal＝⑪の裁定で装飾扱い・測定対象外）は面が明るくなったぶん
   ① 3.81／⑦ 4.01／⑧ 3.87／contact 4.24 へ下がる（⑪当時は 4.6〜4.8）。⑪ の裁定どおり
   意味は .ja が担持しており、昼の同ラベルが 1.6〜2.6 であることに比べれば夜は依然高い。

   ■ ① のタブ非選択だけ夜の文字トークンを一段上げた（--faint → --sub）
   基底の :root[data-theme="night"] .ftab{color:var(--faint)} のままだと、面を明るくした
   時点で 3.72:1 と AA を割る（--faint #A6BDCA が AA を保てる面の上限は L=0.0695＝
   変更前の最悪画素 0.0653 とほぼ同値＝明るくする余地がゼロ）。16px の UI 文字なので
   帯を暗く戻すのではなく文字を一段濃い側（夜は明るい側）の --sub へ上げて 4.73:1 にした。
   選択中のタブ（.ftab.on＝生成り塗り）と :hover（--ink）は基底のまま＝主従は不変。
   掛け先を body.home #main に絞ってあるので、下層ページ（お知らせ一覧）のタブは無改変。

   ■ ⑨ リンクについて（整合確認の結果・変更なし）
   紺紙 --bg-card は実測 L=0.0323 で、④改 の暗ガラス（0.0279）との差はわずか 1.06。
   ⑨ を灯り側へ引き上げるにはカード（.linkcard）の地も一緒に上げる必要があるが、
   カード内の小ラベル .k（--amber #C99A52／--green #7FB79A・10.5px）はカード地を
   #334657 まで明るくすると 3.83:1／4.24:1 と AA を割る（試算）ため、この節では触らない。
   紙だけ上げてカードを据え置くと、カードが地より暗い＝影と矛盾する見えになるので採らない。
   結果として ⑨ は「④改 と同じ暗側で、上下（⑧ の灯りパネルと contact の中間）に
   挟まれて拍を作る帯」になる。紙として立たせたい場合は別途カード配色の見直しが要る。
   ============================================================================ */
:root[data-theme="night"] body.home{
  /* 夜の「灯り」色：紺紙に生成りを 10% 差した一段明るい紺（#334657） */
  --lit-tint:color-mix(in srgb, var(--bg-card) 90%, var(--primary));
  --glass-lit:color-mix(in srgb, var(--lit-tint) 92%, transparent);   /* ①⑦⑧ */
  --glass-mid:color-mix(in srgb, color-mix(in srgb, var(--bg-card) 95%, var(--primary)) 88%, transparent); /* contact */
}
/* 灯りの三帯（読む場所・焦点のカード）。各節の background 宣言はそのままで地だけ差し替わる */
:root[data-theme="night"] body.home #main,
:root[data-theme="night"] body.home .about .about-panel,
:root[data-theme="night"] body.home .fest .fest-panel{
  --glass-bg-plus:var(--glass-lit);
}
/* 中間（灯りと暗のあいだ）。⑪ で contact も --glass-bg-plus 化済みなので同じ差し替えで効く */
:root[data-theme="night"] body.home .contact > .inner{
  --glass-bg-plus:var(--glass-mid);
}
/* タブ非選択だけ夜の文字トークンを一段上げる（--faint では明るくした面で AA を割るため）。
   .on と :hover は基底のまま（:not(.on) で除外・:hover は同スコープで基底値を書き戻す） */
:root[data-theme="night"] body.home #main .ftab:not(.on){color:var(--sub)}
:root[data-theme="night"] body.home #main .ftab:not(.on):hover{color:var(--ink)}

/* ===== トップ：セクション再設計 案A ここまで ===== */