/* ============================================================
   松本大戦略 — 出演者 個別ページ専用スタイル
   ------------------------------------------------------------
   ★ここは「アメコミ」の世界から独立した別世界です。
     site.css のクラス（.koma / .sns / .grid2 など）は
     このページでは一切使いません。名前空間は .ap-* に統一。
     site.css の素の要素セレクタは * / html / body / a / img,video /
     main / footer の7つだけなので、名前が当たる心配はありません。

   構造:
     .ap[data-theme][data-layout]  ← 出演者ページの根。テーマはここだけに効く
       .ap-hero / .ap-sec / .ap-facts / .ap-sns / .ap-videos
       .ap-gallery / .ap-live / .ap-nav

   ページ遷移は main.innerHTML の総入れ替えなので、
   テーマが次のページに残ることはありません（3AI査読済み）。
   ============================================================ */

/* ============================================================
   改行の位置 ── 「文脈ごと。名詞の途中で折らない」
   ------------------------------------------------------------
   日本語は既定でどの文字間でも折れてしまうので、
   word-break:keep-all で「勝手に折るな」と止めたうえで、
   site.js が入れる <wbr>（折ってよい印）の場所だけで折ります。
   ★この2つはセットです。CSSだけでは長い語がはみ出し、
     <wbr>だけでは相変わらず名詞の途中で折れます。
   ★word-break:auto-phrase はChrome系だけなので使いません（社長はSafari）。
   overflow-wrap:anywhere は、どうしても入りきらない時の安全網です。
   ============================================================ */
.ap-name,.ap-tag,.ap-en,.ap-h,.ap-h3,.ap-quote,.ap-bio p,.ap-lead-sns,
.ap-facts dd,.ap-notice p,.ap-notice li,.ap-cross li,.ap-words blockquote p,
.ap-live .v,.ap-video figcaption,.ap-tile .tt,.ap-note,.ap-quote-by{
  word-break:keep-all;
  overflow-wrap:anywhere;
  line-break:strict;
}
/* 引用は、最後の行に1語だけ取り残されるのを減らす */
.ap-quote,.ap-words blockquote p,.ap-tag{text-wrap:pretty}

/* ---------- 既定値（テーマが上書きする） ---------- */
.ap{
  --a-bg:#12100c; --a-bg2:#1c1811; --a-ink:#f3ece0; --a-ink2:#b9ae99;
  --a-accent:#d4a72c; --a-accent2:#f3d26a; --a-line:rgba(255,255,255,.16);
  --a-card:rgba(255,255,255,.05); --a-radius:14px;
  --a-display:"Dela Gothic One","Hiragino Sans",system-ui,sans-serif;
  --a-body:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --a-latin:"Bangers",var(--a-display);
  --a-deco:none; --a-deco-op:.5; --a-deco-size:auto;
  --a-hero-h:clamp(19rem,52vw,30rem);
  --a-shadow:0 18px 44px rgba(0,0,0,.42);
  --a-glow:0 0 0 rgba(0,0,0,0);

  position:relative;
  /* main の左右パディングを打ち消して、この中で自由に組む */
  margin:calc(var(--gap) * -1) calc(var(--gap) * -1) 0;
  padding:0 0 3rem;
  background:var(--a-bg);
  color:var(--a-ink);
  font-family:var(--a-body);
  isolation:isolate;
  overflow:hidden;
  border-radius:2px;
}
/* テーマごとの地紋・模様（テーマが --a-deco を差し替える） */
.ap::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--a-deco);background-size:var(--a-deco-size);
  opacity:var(--a-deco-op);
}
.ap > *{position:relative;z-index:1}

.ap a{color:var(--a-accent2)}
.ap p{margin:0 0 .9rem;line-height:1.95}
.ap p:last-child{margin-bottom:0}
.ap-in{max-width:60rem;margin:0 auto;padding:0 clamp(1rem,4vw,2.4rem)}

/* ---------- パンくず ---------- */
.ap-crumb{font-size:.82rem;color:var(--a-ink2);padding:.9rem clamp(1rem,4vw,2.4rem) 0;margin:0}
.ap-crumb a{color:var(--a-ink2);text-decoration:underline;text-underline-offset:3px}
.ap-crumb a:hover{color:var(--a-accent2)}

/* ============================================================
   ヒーロー
   ============================================================ */
.ap-hero{position:relative;overflow:hidden}
.ap-hero-media{position:relative;overflow:hidden}
.ap-hero-media img{width:100%;height:var(--a-hero-h);object-fit:cover;object-position:center 32%}
.ap-hero-media.contain{background:var(--a-hero-bg,var(--a-bg2))}
.ap-hero-media.contain img{object-fit:contain}
.ap-hero-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.05) 38%,var(--a-bg) 97%)}
.ap-hero-copy{position:relative;margin-top:-4.6rem;padding-bottom:1.4rem}
/* 写真の見せ方（site-data.js の photoView）。写真の中の文字を切らない・隠さないため
   open  = 名前を写真に重ねない（写真の下の方に文字がある）
   whole = 縦長のポスターを、切らずに全体を見せる */
.ap .ap-hero.open .ap-hero-veil{display:none}
.ap .ap-hero.open .ap-hero-copy{margin-top:0;padding-top:1.3rem}
.ap .ap-hero.whole .ap-hero-media{background:var(--a-bg)}
.ap .ap-hero.whole .ap-hero-media img{object-fit:contain;height:clamp(26rem,115vw,36rem)}
/* natural = 文字の入った画像を、縦横のまま・切らず・余白なしで見せる（名前は重ねない＝open と一緒に付く） */
.ap .ap-hero.natural .ap-hero-media img{height:auto;aspect-ratio:auto;max-height:none;object-fit:contain}
/* 左右に並ぶ広い画面では、テーマの角の形（アーチなど）で画像の隅の文字が欠けるので、角は少し丸めるだけ */
@media (min-width:52rem){.ap .ap-hero.natural .ap-hero-media img{border-radius:8px}}
.ap-badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--a-latin);
  letter-spacing:.08em;font-size:.9rem;background:var(--a-accent);color:var(--a-badge-ink,#12100c);
  padding:.22rem .8rem;border-radius:999px;margin-bottom:.7rem}
.ap-name{font-family:var(--a-display);font-weight:400;line-height:1.06;margin:0;
  font-size:clamp(2.2rem,1.3rem + 4.6vw,4.6rem);letter-spacing:var(--a-name-sp,.01em);
  color:var(--a-name-ink,var(--a-ink));text-shadow:var(--a-name-shadow,0 4px 18px rgba(0,0,0,.6))}
.ap-en{font-family:var(--a-latin);letter-spacing:.14em;font-size:clamp(.9rem,.8rem + .5vw,1.2rem);
  color:var(--a-accent2);margin:.35rem 0 0;text-transform:uppercase}
.ap-tag{margin:.7rem 0 0;font-size:clamp(1rem,.95rem + .3vw,1.2rem);color:var(--a-ink);max-width:36rem}
.ap-when{display:inline-block;margin-top:.8rem;font-family:var(--a-latin);letter-spacing:.06em;
  border:2px solid var(--a-accent);border-radius:999px;padding:.16rem .8rem;font-size:.9rem;color:var(--a-accent2)}

/* ============================================================
   セクション
   ============================================================ */
.ap-sec{padding:clamp(1.6rem,4vw,2.8rem) 0}
.ap-sec + .ap-sec{padding-top:0}
.ap-h{font-family:var(--a-display);font-weight:400;font-size:clamp(1.25rem,1.05rem + .8vw,1.8rem);
  margin:0 0 1rem;color:var(--a-h-ink,var(--a-accent2));letter-spacing:.02em;
  display:flex;align-items:center;gap:.7rem}
.ap-h::after{content:"";flex:1;height:2px;background:var(--a-line)}
.ap-h .en{font-family:var(--a-latin);font-size:.62em;letter-spacing:.16em;color:var(--a-ink2);flex:none}

/* 引用（バンドからのことば） */
.ap-quote{font-size:clamp(1.05rem,1rem + .5vw,1.45rem);line-height:1.9;margin:0;
  padding:1.1rem 1.3rem;border-left:5px solid var(--a-accent);
  background:var(--a-card);border-radius:0 var(--a-radius) var(--a-radius) 0;color:var(--a-ink)}
.ap-quote-by{margin:.6rem 0 0;font-size:.85rem;color:var(--a-ink2);text-align:right}

/* 本文 */
.ap-bio{font-size:1.02rem}

/* 事実の表 */
.ap-facts{display:grid;grid-template-columns:auto 1fr;gap:.1rem 1.1rem;margin:1.2rem 0 0;
  border-top:1px solid var(--a-line);padding-top:1rem}
.ap-facts dt{font-family:var(--a-display);font-size:.82rem;color:var(--a-accent2);
  padding:.55rem 0;white-space:nowrap}
.ap-facts dd{margin:0;padding:.55rem 0;border-bottom:1px solid var(--a-line);color:var(--a-ink)}
.ap-facts dt{border-bottom:1px solid var(--a-line)}
.ap-note{font-size:.84rem;color:var(--a-ink2);margin-top:.8rem}

/* ============================================================
   SNS ボタン — 「点滅させて目立たせて」の実装
   ------------------------------------------------------------
   素の明滅（opacity のチカチカ）は安っぽく、光過敏の人に危険なので
   ①光沢が横切る ②縁が広がる の2つに翻訳しました（Codex/AGY 両者の助言）。
   目に入るが、刺さらない。prefers-reduced-motion では完全に止まります。
   ============================================================ */
.ap-sns{display:flex;flex-wrap:wrap;gap:.7rem;margin:0}
.ap-sns a{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--a-display);font-size:.95rem;text-decoration:none;
  padding:.62rem 1.15rem;border-radius:999px;overflow:hidden;
  background:var(--a-sns-bg,var(--a-accent));color:var(--a-sns-ink,#12100c);
  border:2px solid var(--a-sns-border,transparent);
  box-shadow:0 6px 18px rgba(0,0,0,.3);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  will-change:transform}
.ap-sns a .ic{font-size:1.05em;line-height:1}
.ap-sns a:hover,.ap-sns a:focus-visible{transform:translateY(-3px) scale(1.03);
  box-shadow:0 12px 26px rgba(0,0,0,.42);filter:saturate(1.15)}
/* ①光沢が横切る */
.ap-sns a::before{content:"";position:absolute;top:-60%;left:-70%;width:45%;height:220%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.72),transparent);
  transform:skewX(-18deg);pointer-events:none}
/* ②縁が広がる */
.ap-sns a::after{content:"";position:absolute;inset:-2px;border-radius:999px;
  border:2px solid var(--a-sns-ring,var(--a-accent2));opacity:0;pointer-events:none}
@media (prefers-reduced-motion: no-preference){
  .ap-sns a::before{animation:ap-shine 3.6s cubic-bezier(.3,0,.2,1) infinite}
  .ap-sns a::after{animation:ap-ring 3.6s ease-out infinite}
  .ap-sns a:nth-child(2)::before,.ap-sns a:nth-child(2)::after{animation-delay:.45s}
  .ap-sns a:nth-child(3)::before,.ap-sns a:nth-child(3)::after{animation-delay:.9s}
  .ap-sns a:nth-child(4)::before,.ap-sns a:nth-child(4)::after{animation-delay:1.35s}
  .ap-sns a:nth-child(5)::before,.ap-sns a:nth-child(5)::after{animation-delay:1.8s}
}
/* ★2026-09-29 translate で動かす（left だと、画面の外でも毎コマ組み直しが走っていた） */
@keyframes ap-shine{0%{translate:0 0}28%{translate:455% 0}100%{translate:455% 0}}
@keyframes ap-ring{0%{opacity:.85;transform:scale(1)}22%{opacity:0;transform:scale(1.28)}100%{opacity:0;transform:scale(1.28)}}
/* 動きを減らす設定の人には、動かさずに「濃さ」で目立たせる */
@media (prefers-reduced-motion: reduce){
  .ap-sns a{box-shadow:0 0 0 3px var(--a-sns-ring,var(--a-accent2)),0 6px 18px rgba(0,0,0,.35)}
  .ap-sns a::before,.ap-sns a::after{display:none}
}

/* SNSの節（社長の「点滅させて目立たせて」に応える見せ場） */
.ap-lead-sns{font-size:.95rem;color:var(--a-ink2);margin:0 0 1rem}
.ap-sns.big a{font-size:1.05rem;padding:.78rem 1.5rem;gap:.6rem}
.ap-sns.big a small{display:block;font-size:.72rem;opacity:.85;font-family:var(--a-body);font-weight:400}
.ap-sec-sns{padding-top:0}

/* ============================================================
   YouTube（3本）
   ============================================================ */
.ap-videos{display:grid;gap:1rem;grid-template-columns:1fr}
.ap-video{margin:0}
.ap-video .fr{position:relative;aspect-ratio:16/9;border-radius:var(--a-radius);overflow:hidden;
  background:#000;border:2px solid var(--a-line);box-shadow:var(--a-shadow)}
.ap-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ap-video figcaption{margin-top:.5rem;font-size:.86rem;color:var(--a-ink2);line-height:1.6}
@media (min-width:46rem){
  .ap-videos{grid-template-columns:repeat(3,1fr)}
  .ap-videos.n1{grid-template-columns:minmax(0,32rem)}
  .ap-videos.n2{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   最新の動画 ── サムネイルを並べて、押したらその場で再生
   ============================================================ */
.ap-tiles{display:grid;gap:.9rem;grid-template-columns:1fr}
@media (min-width:34rem){.ap-tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:56rem){.ap-tiles{grid-template-columns:repeat(3,1fr)}}
.ap-tile{display:flex;flex-direction:column;gap:.45rem;text-align:left;padding:0;border:0;background:none;
  color:var(--a-ink);cursor:pointer;font-family:inherit;transition:transform .18s ease}
.ap-tile:hover,.ap-tile:focus-visible{transform:translateY(-3px)}
.ap-tile .th{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--a-radius);overflow:hidden;
  background:#000;border:2px solid var(--a-line);box-shadow:0 8px 20px rgba(0,0,0,.34)}
.ap-tile .th img{width:100%;height:100%;object-fit:cover}
/* 再生ボタン（YouTubeらしい赤い角丸に白い三角） */
.ap-tile .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:3.4rem;height:2.4rem;border-radius:.7rem;background:rgba(220,30,30,.92);
  box-shadow:0 4px 14px rgba(0,0,0,.5);transition:background .18s ease,transform .18s ease}
.ap-tile .pl::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);
  border-style:solid;border-width:.55rem 0 .55rem .95rem;border-color:transparent transparent transparent #fff}
.ap-tile:hover .pl,.ap-tile:focus-visible .pl{background:#e62117;transform:translate(-50%,-50%) scale(1.08)}
.ap-tile .tt{font-size:.9rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ap-tile .dt{font-family:var(--a-latin);font-size:.78rem;color:var(--a-ink2);letter-spacing:.04em}
/* 押したあと、その場が再生機になる */
.ap-tile-play{position:relative;aspect-ratio:16/9;border-radius:var(--a-radius);overflow:hidden;
  background:#000;border:2px solid var(--a-accent);box-shadow:var(--a-shadow)}
.ap-tile-play iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ============================================================
   Xの最新の投稿
   ============================================================ */
.ap-x{max-width:34rem;border-radius:var(--a-radius);overflow:hidden}
.ap-x .twitter-timeline{width:100%}
/* ★.ap a{color:...} に負けないよう、詳細度を上げてある（負けると文字色が変わって読みにくくなる） */
.ap a.ap-x-fallback{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--a-display);font-size:.95rem;
  text-decoration:none;padding:.62rem 1.15rem;border-radius:999px;
  background:var(--a-sns-bg,var(--a-accent));color:var(--a-sns-ink,#12100c);
  border:2px solid var(--a-sns-border,transparent);box-shadow:0 6px 18px rgba(0,0,0,.3)}
/* 部品がちゃんと出たら、下のボタンは控えめにする */
.ap .ap-x.ok a.ap-x-fallback{margin-top:.8rem;font-size:.85rem;opacity:.85}

/* ============================================================
   写真ギャラリー（拡大表示は既存のライトボックスを再利用）
   ============================================================ */
.ap-gallery{display:grid;gap:.55rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:34rem){.ap-gallery{grid-template-columns:repeat(3,1fr)}}
@media (min-width:56rem){.ap-gallery{grid-template-columns:repeat(4,1fr)}}
.ap-gallery .ph-t{padding:0;border:0;background:none;cursor:zoom-in;border-radius:calc(var(--a-radius) - 6px);
  overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.34);transition:transform .18s ease}
.ap-gallery .ph-t:hover{transform:translateY(-3px) scale(1.015)}
.ap-gallery .ph-t img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ============================================================
   写真＋ひとこと（協賛の専用ページで使う）
   ------------------------------------------------------------
   ・ふつうは 4:5 で切り抜く（縦の写真が多いため）
   ・.contain のものはロゴなので、切らずに全部見せる
   ============================================================ */
.ap-shots{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:40rem){.ap-shots{grid-template-columns:repeat(2,1fr)}}
.ap-shots figure{margin:0}
.ap-shots .ph-t{display:block;width:100%;padding:0;border:0;background:var(--a-bg2);cursor:zoom-in;
  border-radius:var(--a-radius);overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.34);
  transition:transform .18s ease;aspect-ratio:4/5}
.ap-shots .ph-t:hover{transform:translateY(-3px) scale(1.01)}
.ap-shots .ph-t img{display:block;width:100%;height:100%;object-fit:cover}
.ap-shots .ph-t.contain{aspect-ratio:1/1}
.ap-shots .ph-t.contain img{object-fit:contain}
.ap-shots figcaption{margin-top:.55rem;font-size:.86rem;color:var(--a-ink2);line-height:1.75;
  word-break:keep-all;overflow-wrap:anywhere;line-break:strict;text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.ap-shots .ph-t{transition:none}.ap-shots .ph-t:hover{transform:none}}
/* ★2026-09-23 協賛ページの「お店のこと」の中の写真（site.js の storyPh・データの story[].ph）。
   全体の .ph-t（正方形の枠・黒い太線・切り抜き）を打ち消し、写真の形のまま出す。見た目は上の写真の欄にそろえる */
.ap-story-ph{margin:1.1rem 0 1.9rem;max-width:40rem}
.ap-story-ph.narrow{max-width:24rem}
.ap-story-ph .ph-t{display:block;width:100%;padding:0;border:0;background:var(--a-bg2);cursor:zoom-in;aspect-ratio:auto;
  border-radius:var(--a-radius);overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.34);transition:transform .18s ease}
.ap-story-ph .ph-t:hover{transform:translateY(-3px) scale(1.01)}
.ap-story-ph .ph-t img{display:block;width:100%;height:auto;object-fit:initial}
.ap-story-ph figcaption{margin-top:.55rem;font-size:.86rem;color:var(--a-ink2);line-height:1.75;
  word-break:keep-all;overflow-wrap:anywhere;line-break:strict;text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.ap-story-ph .ph-t{transition:none}.ap-story-ph .ph-t:hover{transform:none}}

/* ============================================================
   協賛の専用ページで使う部品
   （ヒーローのロゴ板／一枚看板／仕事／表彰／キャラクター／求人）
   ============================================================ */
.ap-hero-logo{background:var(--a-bg2);padding:2.6rem 1.2rem 2.2rem;text-align:center}
/* ロゴを頭に置いたときは、その下に社名をもう一度大きく書かない。
   ただし読み上げソフトと検索エンジンには残す（消さずに見えなくする） */
.ap-name.has-logo{margin:0}
.ap-name.has-logo .nm{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.ap-hero-logo img{width:min(100%,26rem);height:auto;display:inline-block}

.ap-feature{background:var(--a-card);border-radius:var(--a-radius);padding:1.5rem 1.3rem;
  border-left:6px solid var(--a-accent2);box-shadow:var(--a-shadow)}
.ap-feature-en{display:block;font-family:var(--a-latin);letter-spacing:.16em;
  color:var(--a-accent2);font-size:.86rem;margin-bottom:.3rem}
.ap-feature-h{font-family:var(--a-display);font-weight:400;line-height:1.4;margin:0 0 .8rem;
  font-size:clamp(1.35rem,5.4vw,2rem);color:var(--a-h-ink);
  word-break:keep-all;overflow-wrap:anywhere;line-break:strict;text-wrap:pretty}
.ap-feature p{margin:.6rem 0;line-height:2;color:var(--a-ink);
  word-break:keep-all;overflow-wrap:anywhere;line-break:strict}

.ap-works{display:grid;gap:1rem}
@media (min-width:46rem){.ap-works{grid-template-columns:repeat(2,1fr)}}
.ap-work{background:var(--a-card);border-radius:var(--a-radius);padding:1rem 1.1rem}
.ap-work .ap-h3{margin-top:0}
.ap-work ul{margin:.5rem 0 0;padding-left:1.1rem}
.ap-work li{margin:.3rem 0;line-height:1.85;font-size:.94rem;color:var(--a-ink2);
  word-break:keep-all;overflow-wrap:anywhere;line-break:strict}

.ap-awards{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ap-awards li{display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;align-items:baseline;
  background:var(--a-card);border-radius:var(--a-radius);padding:.7rem 1rem;
  border-left:4px solid var(--a-line)}
.ap-awards .y{font-family:var(--a-latin);letter-spacing:.05em;color:var(--a-accent2);
  white-space:nowrap;font-size:.92rem}
.ap-awards .t{color:var(--a-ink);font-size:.95rem;
  word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.ap-awards .t small{display:block;color:var(--a-ink2);font-size:.82rem;margin-top:.15rem}

.ap-chara-art{background:var(--a-bg2);border-radius:var(--a-radius);padding:1.4rem 1rem;text-align:center}
.ap-chara-art img{width:min(100%,34rem);height:auto;display:inline-block}
.ap-chara-list{display:grid;gap:.7rem;margin-top:1rem}
@media (min-width:46rem){.ap-chara-list{grid-template-columns:repeat(3,1fr)}}
.ap-chara-list>div{background:var(--a-card);border-radius:var(--a-radius);padding:.85rem 1rem}
.ap-chara-list .pos{display:inline-block;font-size:.74rem;letter-spacing:.1em;
  background:var(--a-accent);color:var(--a-sns-ink,#fff);border-radius:999px;padding:.08rem .6rem;
  margin-bottom:.35rem}
.ap-chara-list b{display:block;color:var(--a-h-ink);font-size:1rem;margin-bottom:.2rem}
.ap-chara-list p{margin:0;font-size:.9rem;line-height:1.8;color:var(--a-ink2);
  word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.ap-chara-words{display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0 0}
.ap-chara-words span{background:var(--a-card-hi,var(--a-card));border:1px solid var(--a-line);
  border-radius:999px;padding:.22rem .8rem;font-size:.86rem;color:var(--a-h-ink)}

.ap-recruit{background:var(--a-card);border-radius:var(--a-radius);padding:1.1rem 1.2rem;
  border-left:5px solid var(--a-accent)}
.ap-recruit .t{font-weight:700;font-size:1.02rem;margin:0 0 .4rem;color:var(--a-ink)}
.ap-recruit p{margin:.35rem 0;line-height:1.9;color:var(--a-ink2);font-size:.94rem;
  word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.ap-recruit ul{margin:.5rem 0 0;padding-left:1.1rem}
.ap-recruit li{margin:.28rem 0;line-height:1.8;font-size:.92rem;color:var(--a-ink2);
  word-break:keep-all;overflow-wrap:anywhere;line-break:strict}

/* ============================================================
   ライブ情報
   ============================================================ */
.ap-live{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.ap-live li{display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;align-items:baseline;
  background:var(--a-card);border-radius:var(--a-radius);padding:.75rem 1rem;
  border-left:4px solid var(--a-line)}
.ap-live li.next{border-left-color:var(--a-accent);background:var(--a-card-hi,var(--a-card))}
.ap-live .d{font-family:var(--a-latin);letter-spacing:.05em;color:var(--a-accent2);white-space:nowrap;font-size:.95rem}
.ap-live .v{color:var(--a-ink);font-size:.95rem}
.ap-live .v small{display:block;color:var(--a-ink2);font-size:.82rem}
/* ライブのチラシ（在る時だけ）。小さく出して、押すと大きく開く */
.ap-live .ap-live-fl{display:block;width:min(100%,11rem);margin:.6rem 0 .2rem;padding:0;border:2px solid var(--a-line);background:#000;cursor:zoom-in;aspect-ratio:auto;overflow:hidden}
.ap-live .ap-live-fl img{display:block;width:100%;height:auto;object-fit:contain}
.ap-live .tag{display:inline-block;font-size:.72rem;background:var(--a-accent);color:var(--a-badge-ink,#12100c);
  border-radius:999px;padding:.05rem .5rem;margin-left:.4rem;vertical-align:.1em}

/* ============================================================
   前後ナビ
   ============================================================ */
.ap-nav{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--a-line);padding-top:1.4rem;margin-top:.6rem}
.ap-nav a{font-family:var(--a-display);font-size:.86rem;text-decoration:none;color:var(--a-ink);
  border:2px solid var(--a-line);border-radius:999px;padding:.42rem 1rem;transition:.18s}
.ap-nav a:hover{border-color:var(--a-accent);color:var(--a-accent2)}

/* ============================================================
   レイアウト原型（テーマと組み合わせる）
   AGYの助言: 骨格が完全に同じだと「ただの色違い」に見える
   ============================================================ */
/* split — 左右分割。写真が縦位置・1人の出演者に向く */
.ap[data-layout="split"] .ap-hero-media img{height:auto;aspect-ratio:3/4;max-height:32rem}
@media (min-width:52rem){
  .ap[data-layout="split"] .ap-hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:clamp(1.4rem,4vw,3rem);align-items:center;padding:clamp(1.4rem,4vw,3rem) clamp(1rem,4vw,2.4rem)}
  .ap[data-layout="split"] .ap-hero-veil{display:none}
  .ap[data-layout="split"] .ap-hero-copy{margin-top:0;padding:0;max-width:none}
  .ap[data-layout="split"] .ap-hero-media img{border-radius:var(--a-radius);box-shadow:var(--a-shadow)}
}
/* stage — 舞台の額縁。中央寄せで宣言的に */
.ap[data-layout="stage"] .ap-hero{text-align:center}
.ap[data-layout="stage"] .ap-hero-copy{margin-top:-3.2rem}
.ap[data-layout="stage"] .ap-tag{margin-left:auto;margin-right:auto}
.ap[data-layout="stage"] .ap-h{justify-content:center}
.ap[data-layout="stage"] .ap-h::after{display:none}
.ap[data-layout="stage"] .ap-sns{justify-content:center}
.ap[data-layout="stage"] .ap-quote{border-left:0;border-top:4px solid var(--a-accent);
  border-radius:var(--a-radius);text-align:center}
/* mag — 雑誌のグリッド。本文と事実を2段に */
@media (min-width:52rem){
  .ap[data-layout="mag"] .ap-split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
    gap:clamp(1.4rem,4vw,2.6rem);align-items:start}
  .ap[data-layout="mag"] .ap-facts{margin-top:0;border-top:3px solid var(--a-accent)}
}
/* hero — 既定（全面写真） */

/* ============================================================
   ここから 出演者ごとの世界
   ============================================================ */

/* ── 千（SEN）｜虹色ポップ・気球・空 ───────────────────────── */
.ap[data-theme="sen"]{
  --a-bg:#fff8f0; --a-bg2:#ffeede; --a-ink:#2b2340; --a-ink2:#6c6288;
  --a-accent:#ff5fa8; --a-accent2:#c9247a; --a-line:rgba(80,60,120,.2);
  --a-card:rgba(255,255,255,.78); --a-card-hi:#fff2f8; --a-radius:22px;
  --a-display:"Zen Maru Gothic","Yusei Magic",var(--a-body);
  --a-latin:"Bangers",var(--a-display);
  --a-name-ink:#2b2340; --a-name-shadow:3px 3px 0 #ffd166,6px 6px 0 rgba(120,190,255,.55);
  --a-sns-ink:#2b2340; --a-sns-ring:#ffd166; --a-badge-ink:#2b2340;
  --a-shadow:0 14px 30px rgba(140,110,190,.22);
  --a-deco-op:1; --a-deco-size:26px 26px;
  --a-deco:radial-gradient(circle at 50% 50%,rgba(255,209,102,.5) 2.2px,transparent 2.6px);
}
.ap[data-theme="sen"] .ap-hero-veil{background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,248,240,.05) 40%,#fff8f0 96%)}
.ap[data-theme="sen"] .ap-h{color:#c9247a}
.ap[data-theme="sen"] .ap-sns a{background:linear-gradient(100deg,#ff5fa8,#ffa14a 46%,#5ec8f0)}
.ap[data-theme="sen"] .ap-quote{background:#fff;border-left-color:#ffd166;box-shadow:0 8px 20px rgba(140,110,190,.14)}

/* ── De☆spenice｜緋のビロード・金の額縁・薔薇 ────────────────── */
.ap[data-theme="despenice"]{
  --a-bg:#1a0510; --a-bg2:#2b0a1a; --a-ink:#fbeef2; --a-ink2:#c99bad;
  --a-accent:#e8c15a; --a-accent2:#f6dc93; --a-line:rgba(232,193,90,.32);
  --a-card:rgba(232,193,90,.08); --a-card-hi:rgba(232,193,90,.16); --a-radius:6px;
  --a-display:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  --a-latin:"Bangers",var(--a-display);
  --a-name-sp:.06em; --a-name-ink:#f6dc93;
  --a-name-shadow:0 2px 0 #8a1230,0 8px 26px rgba(0,0,0,.7);
  --a-sns-bg:#a3123a; --a-sns-ink:#fff5f8; --a-sns-ring:#e8c15a; --a-badge-ink:#2b0a1a;
  --a-deco-op:.5; --a-deco-size:100% 100%,52px 52px;
  --a-deco:radial-gradient(ellipse at 50% 0%,rgba(163,18,58,.55),transparent 62%),
           repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 2px,transparent 2px 26px);
}
.ap[data-theme="despenice"] .ap-hero-veil{background:linear-gradient(180deg,rgba(26,5,16,.35) 0%,rgba(26,5,16,.1) 34%,#1a0510 97%)}
.ap[data-theme="despenice"] .ap-hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 6px rgba(232,193,90,.55),inset 0 0 0 9px rgba(26,5,16,.9),inset 0 0 0 12px rgba(232,193,90,.35)}

/* ── 44マグノリア｜黒鋼と銀・稲妻・ダーク ───────────────────── */
.ap[data-theme="44magnolia"]{
  --a-bg:#08090b; --a-bg2:#101318; --a-ink:#e9edf2; --a-ink2:#8e97a4;
  --a-accent:#c8ced8; --a-accent2:#ffffff; --a-line:rgba(200,206,216,.2);
  --a-card:rgba(200,206,216,.06); --a-card-hi:rgba(200,206,216,.13); --a-radius:2px;
  --a-display:"Dela Gothic One",var(--a-body);
  --a-name-sp:.02em; --a-name-ink:#fff;
  --a-name-shadow:0 0 26px rgba(190,205,255,.5),0 4px 0 #2a3140;
  --a-sns-bg:#161a21; --a-sns-ink:#fff; --a-sns-border:#c8ced8; --a-sns-ring:#fff; --a-badge-ink:#08090b;
  --a-deco-op:.55; --a-deco-size:100% 100%,7px 7px;
  --a-deco:radial-gradient(ellipse at 50% -10%,rgba(150,175,255,.2),transparent 58%),
           repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px);
}
.ap[data-theme="44magnolia"] .ap-hero-media img{filter:grayscale(.4) contrast(1.16) brightness(.9)}
.ap[data-theme="44magnolia"] .ap-h{letter-spacing:.08em}

/* ── 爆音カノジョ｜ピンクと水色・青春・キラキラ ─────────────── */
/* ★このテーマは写真より文字と色で見せる作り（未成年への配慮。docs/HP刷新_引き継ぎ.md 参照） */
.ap[data-theme="bakuon-kanojo"]{
  --a-bg:#fff4f8; --a-bg2:#ffe6f0; --a-ink:#3a2440; --a-ink2:#7c6480;
  --a-accent:#ff6fae; --a-accent2:#d61a6e; --a-line:rgba(214,26,110,.22);
  --a-card:#ffffff; --a-card-hi:#fff0f6; --a-radius:20px;
  --a-display:"Zen Maru Gothic","Yusei Magic",var(--a-body);
  --a-latin:"Bangers",var(--a-display);
  --a-name-ink:#d61a6e; --a-name-shadow:3px 3px 0 #ffe066,6px 6px 0 rgba(110,205,235,.6);
  --a-sns-ink:#3a2440; --a-sns-ring:#6ecdeb; --a-badge-ink:#3a2440;
  --a-shadow:0 14px 30px rgba(214,26,110,.16);
  --a-deco-op:1; --a-deco-size:100% 100%,34px 34px;
  --a-deco:linear-gradient(180deg,rgba(110,205,235,.18),transparent 46%),
           radial-gradient(circle at 30% 30%,rgba(255,224,102,.55) 2.4px,transparent 2.8px);
}
.ap[data-theme="bakuon-kanojo"] .ap-hero-veil{background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,244,248,.08) 42%,#fff4f8 96%)}
.ap[data-theme="bakuon-kanojo"] .ap-sns a{background:linear-gradient(100deg,#ff6fae,#ffa8cd 55%,#6ecdeb)}
.ap[data-theme="bakuon-kanojo"] .ap-quote{background:#fff;border-left-color:#6ecdeb;box-shadow:0 8px 20px rgba(214,26,110,.12)}

/* ── あなたと私｜ノスタルジー・セピア・余白 ─────────────────── */
.ap[data-theme="anatatowatashi"]{
  --a-bg:#efe9dd; --a-bg2:#e2d9c8; --a-ink:#332c22; --a-ink2:#645b4d;
  --a-accent:#7d6236; --a-accent2:#5e4a29; --a-line:rgba(51,44,34,.22);
  --a-card:rgba(255,255,255,.62); --a-card-hi:#fffdf7; --a-radius:3px;
  --a-display:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  --a-body:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  --a-latin:"Bangers",serif;
  --a-name-sp:.14em; --a-name-ink:#332c22; --a-name-shadow:none;
  --a-sns-bg:#6e5630; --a-sns-ink:#fdf8ee; --a-sns-ring:#9a7b46; --a-badge-ink:#fdf8ee;
  --a-shadow:0 10px 26px rgba(51,44,34,.18);
  --a-deco-op:.5; --a-deco-size:auto,180px 180px;
  --a-deco:linear-gradient(180deg,rgba(154,123,70,.1),transparent 40%),
           radial-gradient(circle at 20% 30%,rgba(120,100,70,.08),transparent 60%);
}
.ap[data-theme="anatatowatashi"] .ap-hero-media img{filter:sepia(.42) saturate(.8) contrast(.96)}
.ap[data-theme="anatatowatashi"] .ap-hero-veil{background:linear-gradient(180deg,rgba(239,233,221,.2) 0%,rgba(239,233,221,.08) 40%,#efe9dd 96%)}
.ap[data-theme="anatatowatashi"] .ap-name{font-size:clamp(2rem,1.2rem + 3.8vw,3.7rem)}

/* ── 極楽ドルチェ｜極彩色・和のネオン・提灯 ─────────────────── */
.ap[data-theme="gokuraku"]{
  --a-bg:#12030e; --a-bg2:#25062a; --a-ink:#fff0f6; --a-ink2:#d0a8c4;
  --a-accent:#ff2f6d; --a-accent2:#ffd23f; --a-line:rgba(255,210,63,.3);
  --a-card:rgba(255,47,109,.12); --a-card-hi:rgba(255,210,63,.16); --a-radius:10px;
  --a-display:"Dela Gothic One",var(--a-body);
  --a-name-ink:#ffd23f;
  --a-name-shadow:0 0 22px rgba(255,47,109,.9),3px 3px 0 #7a0b3d;
  --a-sns-bg:#cf1147; --a-sns-ink:#fff; --a-sns-ring:#ffd23f; --a-badge-ink:#12030e;
  --a-deco-op:.75; --a-deco-size:100% 100%,100% 100%,30px 30px;
  --a-deco:radial-gradient(ellipse at 12% 8%,rgba(255,47,109,.45),transparent 52%),
           radial-gradient(ellipse at 88% 22%,rgba(72,214,196,.3),transparent 52%),
           repeating-linear-gradient(45deg,rgba(255,210,63,.06) 0 2px,transparent 2px 15px);
}
.ap[data-theme="gokuraku"] .ap-h{color:#ffd23f;text-shadow:0 0 16px rgba(255,47,109,.6)}
.ap[data-theme="gokuraku"] .ap-hero-veil{background:linear-gradient(180deg,rgba(18,3,14,.3) 0%,rgba(18,3,14,.06) 36%,#12030e 97%)}

/* ── ワタシノゲボク｜北欧の聖堂・深青と金・荘厳 ───────────────── */
.ap[data-theme="geboku"]{
  --a-bg:#050a16; --a-bg2:#0b1630; --a-ink:#e8eefb; --a-ink2:#93a6c8;
  --a-accent:#c9a227; --a-accent2:#efd07c; --a-line:rgba(201,162,39,.28);
  --a-card:rgba(120,160,230,.09); --a-card-hi:rgba(201,162,39,.14); --a-radius:4px;
  --a-display:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  --a-name-sp:.05em; --a-name-ink:#efd07c;
  --a-name-shadow:0 0 30px rgba(120,170,255,.5),0 3px 0 #0b1630;
  --a-sns-bg:#14245a; --a-sns-ink:#eef3ff; --a-sns-border:#c9a227; --a-sns-ring:#efd07c; --a-badge-ink:#050a16;
  --a-deco-op:.62; --a-deco-size:100% 100%,100% 100%,64px 64px;
  --a-deco:radial-gradient(ellipse at 50% -6%,rgba(90,140,255,.34),transparent 56%),
           radial-gradient(ellipse at 50% 108%,rgba(201,162,39,.16),transparent 50%),
           repeating-linear-gradient(90deg,rgba(201,162,39,.07) 0 1px,transparent 1px 32px);
}
.ap[data-theme="geboku"] .ap-hero-veil{background:linear-gradient(180deg,rgba(5,10,22,.4) 0%,rgba(5,10,22,.08) 36%,#050a16 97%)}
.ap[data-theme="geboku"] .ap-hero-media img{filter:contrast(1.1) saturate(.92)}

/* ── FLASH BACK GARAGE｜ガレージ・写実・オレンジと黒 ──────────── */
.ap[data-theme="flashback"]{
  --a-bg:#15130f; --a-bg2:#221e18; --a-ink:#f2ede4; --a-ink2:#a49b8b;
  --a-accent:#e2661f; --a-accent2:#ff9147; --a-line:rgba(226,102,31,.3);
  --a-card:rgba(255,255,255,.055); --a-card-hi:rgba(226,102,31,.14); --a-radius:2px;
  --a-display:"Dela Gothic One",var(--a-body);
  --a-name-sp:.03em; --a-name-ink:#f2ede4;
  --a-name-shadow:4px 4px 0 #e2661f,0 10px 30px rgba(0,0,0,.7);
  --a-sns-bg:#e2661f; --a-sns-ink:#15130f; --a-sns-ring:#ff9147; --a-badge-ink:#15130f;
  --a-deco-op:.5; --a-deco-size:100% 100%,6px 6px;
  --a-deco:radial-gradient(ellipse at 50% 110%,rgba(226,102,31,.22),transparent 55%),
           repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 6px);
}
.ap[data-theme="flashback"] .ap-hero-media img{filter:contrast(1.14) saturate(.85)}
.ap[data-theme="flashback"] .ap-h{letter-spacing:.1em;text-transform:none}

/* ── ケンタ☆ROCKオーケストラ｜赤と金・龍虎・主催 ───────────── */
.ap[data-theme="kenta-rock-orchestra"]{
  --a-bg:#150404; --a-bg2:#2a0a07; --a-ink:#fff2e4; --a-ink2:#d0a98c;
  --a-accent:#e4261b; --a-accent2:#f3d26a; --a-line:rgba(243,210,106,.32);
  --a-card:rgba(243,210,106,.09); --a-card-hi:rgba(228,38,27,.18); --a-radius:8px;
  --a-display:"Dela Gothic One",var(--a-body);
  --a-name-ink:#f3d26a;
  --a-name-shadow:3px 3px 0 #e4261b,0 0 30px rgba(228,38,27,.6);
  --a-sns-bg:#e4261b; --a-sns-ink:#fff; --a-sns-ring:#f3d26a; --a-badge-ink:#000;
  --a-deco-op:.7; --a-deco-size:100% 100%,100% 100%,9px 9px;
  --a-deco:radial-gradient(ellipse at 50% 0%,rgba(228,38,27,.42),transparent 58%),
           radial-gradient(ellipse at 50% 100%,rgba(243,210,106,.14),transparent 52%),
           repeating-conic-gradient(from 0deg,rgba(243,210,106,.05) 0 2deg,transparent 2deg 9deg);
}
.ap[data-theme="kenta-rock-orchestra"] .ap-hero-veil{background:linear-gradient(180deg,rgba(21,4,4,.34) 0%,rgba(21,4,4,.06) 36%,#150404 97%)}

/* ── ひまたん｜砂漠の夜・金と深紫・アラベスク ─────────────────── */
.ap[data-theme="himatan"]{
  --a-bg:#170a26; --a-bg2:#26123c; --a-ink:#f7eeff; --a-ink2:#c0a8d6;
  --a-accent:#d9a441; --a-accent2:#f4cd7a; --a-line:rgba(217,164,65,.3);
  --a-card:rgba(217,164,65,.1); --a-card-hi:rgba(217,164,65,.18); --a-radius:999px 999px 8px 8px;
  --a-display:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  --a-name-sp:.08em; --a-name-ink:#f4cd7a;
  --a-name-shadow:0 0 28px rgba(217,164,65,.55),0 3px 0 #3a1a55;
  --a-sns-bg:#5a2a86; --a-sns-ink:#fdf6ea; --a-sns-border:#d9a441; --a-sns-ring:#f4cd7a; --a-badge-ink:#170a26;
  --a-deco-op:.6; --a-deco-size:100% 100%,44px 44px;
  --a-deco:radial-gradient(ellipse at 50% 0%,rgba(90,42,134,.6),transparent 60%),
           repeating-conic-gradient(from 45deg at 50% 50%,rgba(217,164,65,.07) 0 12deg,transparent 12deg 45deg);
}
.ap[data-theme="himatan"] .ap-hero-veil{background:linear-gradient(180deg,rgba(23,10,38,.3) 0%,rgba(23,10,38,.05) 38%,#170a26 97%)}

/* ── 司会 花村佑子｜銀河と、竹の灯りと、花 ───────────────────── */
.ap[data-theme="hanamura"]{
  --a-bg:#0d1024; --a-bg2:#181d3e; --a-ink:#f3eef8; --a-ink2:#b3aacb;
  --a-accent:#d9b45c; --a-accent2:#f3db9a; --a-line:rgba(217,180,92,.28);
  --a-card:rgba(217,180,92,.08); --a-card-hi:rgba(240,200,230,.12); --a-radius:10px;
  --a-display:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  --a-body:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif;
  --a-latin:"Bangers",var(--a-display);
  --a-name-sp:.16em; --a-name-ink:#f7ecd3;
  --a-name-shadow:0 0 40px rgba(217,180,92,.5),0 0 90px rgba(180,150,255,.28);
  --a-sns-bg:#2b2456; --a-sns-ink:#f7ecd3; --a-sns-border:#d9b45c; --a-sns-ring:#f3db9a; --a-badge-ink:#0d1024;
  --a-deco-op:.75; --a-deco-size:100% 100%,100% 100%,3px 3px,190px 190px;
  /* 銀河のにじみ＋竹灯りの金のゆらぎ＋星の粒 */
  --a-deco:radial-gradient(ellipse at 50% -6%,rgba(150,120,235,.34),transparent 58%),
           radial-gradient(ellipse at 50% 104%,rgba(217,180,92,.2),transparent 52%),
           radial-gradient(circle at 50% 50%,rgba(255,255,255,.5) .5px,transparent .9px),
           repeating-conic-gradient(from 12deg at 50% 50%,rgba(217,180,92,.045) 0 6deg,transparent 6deg 34deg);
}
.ap[data-theme="hanamura"] .ap-quote{font-family:"Shippori Mincho B1",serif;line-height:2.15;border-left-color:var(--a-accent)}
.ap[data-theme="hanamura"] .ap-hero-veil{background:linear-gradient(180deg,rgba(13,16,36,.34) 0%,rgba(13,16,36,.08) 36%,#0d1024 97%)}
.ap[data-theme="hanamura"] .ap-h{letter-spacing:.1em}

/* ことばの並び（引用カード） */
.ap-words{display:grid;gap:.9rem;grid-template-columns:1fr}
@media (min-width:46rem){.ap-words{grid-template-columns:repeat(2,1fr)}}
.ap-words blockquote{margin:0;background:var(--a-card);border-radius:var(--a-radius);
  border-left:4px solid var(--a-accent);padding:1.1rem 1.2rem}
.ap-words blockquote p{font-family:var(--a-display);font-size:clamp(1rem,.95rem + .45vw,1.25rem);
  line-height:2;margin:0 0 .6rem;color:var(--a-ink)}
.ap-words cite{display:block;font-style:normal;font-size:.78rem;color:var(--a-ink2);line-height:1.6}
.ap-quote-by small{font-size:.8em;color:var(--a-ink2)}

/* ── Music Bar UzuUzu（協賛）｜赤と青｜夜のミュージックバー ───────────
   お店のロゴが赤と青の2色でできたハート（渦）。
   地＝夜の紺／赤＝差し色・罫線・バッジ／青＝見出し・リンク／
   文字＝看板の生成りのクリーム。地紋には赤と青の光を左右から入れ、渦は残す。 */
.ap[data-theme="uzuuzu"]{
  --a-bg:#0a1024; --a-bg2:#131c3c; --a-ink:#f6efe0; --a-ink2:#a8b0cd;
  --a-accent:#e02234;                /* 赤 ＝ 差し色・罫線・バッジ */
  --a-accent2:#5fa8ff;               /* 青 ＝ 見出し・リンク */
  --a-h-ink:#5fa8ff;
  --a-line:rgba(224,34,52,.34);
  --a-card:rgba(95,168,255,.09); --a-card-hi:rgba(224,34,52,.14); --a-radius:14px;
  --a-display:"Zen Maru Gothic","Hiragino Maru Gothic ProN",var(--a-body);
  --a-latin:"Bangers",var(--a-display);
  --a-name-sp:.03em; --a-name-ink:#f6efe0;
  --a-name-shadow:0 0 30px rgba(224,34,52,.55),0 0 60px rgba(95,168,255,.4),0 3px 0 #0a1024;
  /* ボタンの地だけ、少し深い赤に（白文字とのコントラストを確保するため） */
  --a-sns-bg:#c81b2c; --a-sns-ink:#fff6ee; --a-sns-ring:#5fa8ff; --a-badge-ink:#fff6ee;
  --a-deco-op:.72; --a-deco-size:100% 100%,100% 100%,150px 150px;
  /* 左から赤の光、右から青の光。渦はそのまま残す */
  --a-deco:radial-gradient(ellipse at 8% 6%,rgba(224,34,52,.42),transparent 54%),
           radial-gradient(ellipse at 92% 16%,rgba(95,168,255,.36),transparent 54%),
           repeating-conic-gradient(from 20deg at 50% 50%,rgba(246,239,224,.045) 0 8deg,transparent 8deg 40deg);
}
/* バッジも、文字が読める深さの赤に（罫線の赤はそのまま） */
.ap[data-theme="uzuuzu"] .ap-badge{background:#c81b2c}
.ap[data-theme="uzuuzu"] .ap-quote{font-family:"Shippori Mincho B1",serif;line-height:2.1;border-left-color:var(--a-accent)}
.ap[data-theme="uzuuzu"] .ap-h::after{background:linear-gradient(90deg,var(--a-accent),rgba(95,168,255,.35))}
.ap[data-theme="uzuuzu"] .ap-cross li{border-left-color:var(--a-accent2)}

/* ============================================================
   三協電気工業（協賛・sankyo）
   ------------------------------------------------------------
   電気の会社なので「灯り」を主題にした。地は白に近い明るさ、
   差し色はロゴの水色 #30b4e4。ただしこの水色は白地だと薄すぎて
   文字が読めないので、文字とリンクには深くした #0a6d92 を使う。
   ★色は実測でコントラストを確かめてから決めている。
   ============================================================ */
.ap[data-theme="sankyo"]{
  --a-bg:#eef6fb; --a-bg2:#ffffff; --a-ink:#12202c; --a-ink2:#48606f;
  --a-accent:#0a6d92;                /* 見出し・罫線・ボタン地（読める青） */
  --a-accent2:#30b4e4;               /* ロゴの水色。光と飾りだけに使う */
  --a-h-ink:#0a6d92;
  --a-line:rgba(10,109,146,.24);
  --a-card:#ffffff; --a-card-hi:#e6f5fd; --a-radius:12px;
  --a-display:"Zen Kaku Gothic New","Hiragino Sans",var(--a-body);
  --a-latin:"Bangers",var(--a-display);
  --a-name-sp:.02em; --a-name-ink:#12202c;
  --a-name-shadow:0 2px 0 rgba(48,180,228,.35);
  --a-sns-bg:#0a6d92; --a-sns-ink:#ffffff; --a-sns-ring:#30b4e4; --a-badge-ink:#ffffff;
  --a-shadow:0 12px 30px rgba(18,60,86,.13);
  --a-deco-op:1; --a-deco-size:100% 100%,100% 100%,22px 22px;
  /* 上から差す光と、うっすらした点の格子（配線図の方眼のつもり） */
  --a-deco:radial-gradient(ellipse at 50% -10%,rgba(48,180,228,.34),transparent 62%),
           radial-gradient(ellipse at 88% 4%,rgba(255,255,255,.9),transparent 46%),
           radial-gradient(circle at 50% 50%,rgba(10,109,146,.11) 1.1px,transparent 1.5px);
}
.ap[data-theme="sankyo"] .ap-hero-veil{
  background:linear-gradient(180deg,rgba(238,246,251,.1) 0%,rgba(238,246,251,.04) 42%,#eef6fb 97%)}
.ap[data-theme="sankyo"] .ap-h{color:#0a6d92}
.ap[data-theme="sankyo"] .ap-h::after{background:linear-gradient(90deg,#30b4e4,rgba(10,109,146,.28))}
.ap[data-theme="sankyo"] .ap-quote{background:#fff;border-left-color:#30b4e4;
  box-shadow:0 8px 20px rgba(18,60,86,.1)}
.ap[data-theme="sankyo"] .ap-cross li{border-left-color:#30b4e4;background:#fff}
.ap[data-theme="sankyo"] .ap-live li{background:#fff}
.ap[data-theme="sankyo"] .ap-shots .ph-t{background:#fff;box-shadow:0 8px 22px rgba(18,60,86,.14)}
.ap[data-theme="sankyo"] .ap-notice{background:#fff}
/* ヒーローはロゴを白地に置きたいので、写真ではなくロゴ板にする */
.ap[data-theme="sankyo"] .ap-hero-media.contain{background:#fff}
/* ★白地なので、水色 #30b4e4 のままでは文字が読めない（実測 2.2〜2.4）。
   小さな見出し・ラベルの類は、深い青 #0a6d92 に寄せる（実測 6.4 以上）。 */
.ap[data-theme="sankyo"] .ap-h3,
.ap[data-theme="sankyo"] .ap-facts dt,
.ap[data-theme="sankyo"] .ap-awards .y,
.ap[data-theme="sankyo"] .ap-feature-en,
.ap[data-theme="sankyo"] .ap-live .d,
.ap[data-theme="sankyo"] .ap-tile .tt{color:#0a6d92}
/* 本文中のリンクも同じ理由で深い青に（.ap a{color:var(--a-accent2)} を上書き） */
.ap[data-theme="sankyo"] .ap-cross a,
.ap[data-theme="sankyo"] .ap-bio a,
.ap[data-theme="sankyo"] .ap-feature a:not(.ap-sns a),
.ap[data-theme="sankyo"] .ap-note a{color:#0a6d92}

/* ============================================================
   株式会社小川原塗装店（協賛・ogawara）★2026-09-25
   ------------------------------------------------------------
   求人ページの「青空×塗料の差し色」に合わせた。地は空の色 #eef8fe、
   文字・見出し・リンク・ボタンは深い青 #0e6fb0（読める青）。空色 #46c0f4 は光と飾りだけ。
   見出しの下線は、塗料の差し色（青・空色・緑・黄・赤）を塗り分けた1本の帯。
   ★色は実測でコントラストを確かめてから決めている。
   ============================================================ */
.ap[data-theme="ogawara"]{
  --a-bg:#eef8fe; --a-bg2:#ffffff; --a-ink:#16181d; --a-ink2:#4f535b;
  --a-accent:#0e6fb0;                /* 見出し・罫線・ボタン地（読める青） */
  --a-accent2:#46c0f4;               /* 空色。光と飾りだけに使う */
  --a-h-ink:#0e6fb0;
  --a-line:rgba(14,111,176,.24);
  --a-card:#ffffff; --a-card-hi:#e3f3fc; --a-radius:14px;
  --a-display:"Zen Kaku Gothic New","Hiragino Sans",var(--a-body);
  --a-latin:"Bangers",var(--a-display);
  --a-name-sp:.02em; --a-name-ink:#16181d;
  --a-name-shadow:0 2px 0 rgba(70,192,244,.4);
  --a-sns-bg:#0e6fb0; --a-sns-ink:#ffffff; --a-sns-ring:#46c0f4; --a-badge-ink:#ffffff;
  --a-shadow:0 12px 30px rgba(14,70,110,.13);
  --a-deco-op:1; --a-deco-size:100% 100%,100% 100%,100% 100%,100% 100%;
  /* 上から差す空の光と、はね返った塗料の色（黄・緑・赤）をうっすら */
  --a-deco:radial-gradient(ellipse at 50% -10%,rgba(70,192,244,.36),transparent 62%),
           radial-gradient(circle at 4% 34%,rgba(255,194,46,.16),transparent 16%),
           radial-gradient(circle at 97% 52%,rgba(45,191,104,.14),transparent 15%),
           radial-gradient(circle at 8% 82%,rgba(255,84,54,.10),transparent 13%);
}
.ap[data-theme="ogawara"] .ap-hero-veil{
  background:linear-gradient(180deg,rgba(238,248,254,.08) 0%,rgba(238,248,254,.04) 42%,#eef8fe 97%)}
.ap[data-theme="ogawara"] .ap-h{color:#0e6fb0}
.ap[data-theme="ogawara"] .ap-h::after{background:linear-gradient(90deg,#0e6fb0 0 22%,#46c0f4 22% 44%,#2dbf68 44% 64%,#ffc22e 64% 84%,#ff5436 84% 100%)}
.ap[data-theme="ogawara"] .ap-quote{background:#fff;border-left-color:#46c0f4;box-shadow:0 8px 20px rgba(14,70,110,.1)}
.ap[data-theme="ogawara"] .ap-cross li,
.ap[data-theme="ogawara"] .ap-notice{background:#fff}
.ap[data-theme="ogawara"] .ap-shots .ph-t{background:#fff;box-shadow:0 8px 22px rgba(14,70,110,.14)}
/* 小さな見出し・ラベル・本文中のリンクは深い青に（.ap a{color:var(--a-accent2)} の空色では読めない） */
.ap[data-theme="ogawara"] .ap-h3,
.ap[data-theme="ogawara"] .ap-en,
.ap[data-theme="ogawara"] .ap-facts dt,
.ap[data-theme="ogawara"] .ap-feature-en,
.ap[data-theme="ogawara"] .ap-tile .tt{color:#0e6fb0}
.ap[data-theme="ogawara"] .ap-cross a,
.ap[data-theme="ogawara"] .ap-bio a,
.ap[data-theme="ogawara"] .ap-note a{color:#0e6fb0}
/* 塗カエルの絵（472px）を引き伸ばしてぼかさない */
.ap[data-theme="ogawara"] .ap-chara-art img{width:min(100%,20rem)}

/* 協賛ページで使う小さな部品 */
.ap-h3{font-family:var(--a-display);font-weight:400;font-size:clamp(1.05rem,1rem + .4vw,1.35rem);
  margin:1.6rem 0 .5rem;color:var(--a-accent2)}
.ap-sec .ap-h3:first-of-type{margin-top:.2rem}
.ap-quote.big{font-size:clamp(1.15rem,1.05rem + .7vw,1.7rem);line-height:2}
.ap-notice{background:var(--a-card-hi);border-left:5px solid var(--a-accent);border-radius:0 var(--a-radius) var(--a-radius) 0;padding:1rem 1.2rem}
.ap-notice ul{margin:.7rem 0 0;padding-left:1.2rem}
.ap-notice li{margin:.35rem 0;line-height:1.85}
.ap-cross{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ap-cross li{background:var(--a-card);border-radius:var(--a-radius);padding:.85rem 1.1rem;
  border-left:4px solid var(--a-accent);line-height:1.85}
.ap-cross li a{display:inline-block;margin-left:.6rem;font-family:var(--a-display);white-space:nowrap}

/* ── DJ ブルックリン安田｜サイバー・ネオン・グリッチ ───────────── */
.ap[data-theme="dj-brooklyn-yasuda"]{
  --a-bg:#03060f; --a-bg2:#071427; --a-ink:#e6fbff; --a-ink2:#79a8bd;
  --a-accent:#00e5ff; --a-accent2:#7cf3ff; --a-line:rgba(0,229,255,.28);
  --a-card:rgba(0,229,255,.08); --a-card-hi:rgba(255,0,128,.14); --a-radius:3px;
  --a-display:"Dela Gothic One",var(--a-body);
  --a-name-sp:.04em; --a-name-ink:#e6fbff;
  --a-name-shadow:2px 0 0 #ff0080,-2px 0 0 #00e5ff,0 0 30px rgba(0,229,255,.55);
  --a-sns-bg:#071427; --a-sns-ink:#7cf3ff; --a-sns-border:#00e5ff; --a-sns-ring:#ff0080; --a-badge-ink:#03060f;
  --a-deco-op:.62; --a-deco-size:100% 100%,100% 100%,34px 34px,34px 34px;
  --a-deco:radial-gradient(ellipse at 10% 6%,rgba(0,229,255,.3),transparent 54%),
           radial-gradient(ellipse at 90% 18%,rgba(255,0,128,.24),transparent 52%),
           repeating-linear-gradient(0deg,rgba(0,229,255,.07) 0 1px,transparent 1px 34px),
           repeating-linear-gradient(90deg,rgba(0,229,255,.07) 0 1px,transparent 1px 34px);
}
.ap[data-theme="dj-brooklyn-yasuda"] .ap-hero-media img{filter:saturate(1.2) contrast(1.1)}
.ap[data-theme="dj-brooklyn-yasuda"] .ap-h{letter-spacing:.12em}

/* ============================================================
   ★2026-09-29 バンドごとの遊び心
   ------------------------------------------------------------
   site.js の THEME_FX が、写真の上に .ap-fx（飾りの粒）を置き、名前を1字ずつ動かす（fx-l-*）。
   ・粒は写真の文字を隠さないよう、小さく・半透明・まばらに。押せない（pointer-events:none）
   ・html.fx-on の時だけ動く（動きを減らす設定の人には出さない）
   ============================================================ */
.ap-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
/* 名前・バッジ・説明文は、飾りの粒より上に */
.ap .ap-hero-copy{z-index:2}
/* 写真の無いヒーロー（ロゴの板）は、粒をロゴの後ろに */
.ap .ap-hero-logo{position:relative;overflow:hidden}
.ap .ap-hero-logo img{position:relative;z-index:1}
.ap .ap-hero-logo .ap-fx{z-index:0}
.ap-fx i{position:absolute;left:var(--x);top:var(--y);display:block;animation:var(--fx-anim,none) var(--t) linear var(--d) infinite;opacity:0}
.ap-fx b{position:absolute;display:block;pointer-events:none}
html:not(.fx-on) .ap-fx{display:none}
/* ★2026-10-07 指・マウスに反応する粒を描く板（上の欄の中・写真より前・名前より後ろ・押せない） */
.ap-hero>canvas.fx-cv{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none}
html:not(.fx-on) .fx-cv{display:none}
/* マウスの位置で、今ある飾りの粒が奥行きに合わせて少しずれる（マウスの使える画面だけ site.js が fx-px を付ける） */
.ap-fx.fx-px i{transform:translate(calc(var(--mx,0px) * var(--s,1)),calc(var(--my,0px) * var(--s,1)))}
/* 押した時の、今ある飾りの反応（site.js が fx-hit を短く付ける） */
.fx-on .ap-fx.fx-hit.fx-coin{animation:fx-jig .45s linear}
@keyframes fx-jig{0%,100%{translate:0 0}20%{translate:-2px 1px}40%{translate:2px -1px}60%{translate:-2px -1px}80%{translate:2px 1px}}
.fx-on .ap-fx.fx-hit .fx-onair{animation:none;opacity:1;box-shadow:0 0 0 3px rgba(255,255,255,.8),0 0 22px 6px rgba(255,60,80,.9)}
.ap-fx .fx-vinyl{transition:transform .55s cubic-bezier(.2,1.5,.4,1)}
.fx-on .ap-fx.fx-hit .fx-vinyl{transform:rotate(-55deg);transition:transform .08s linear}
@keyframes fx-rise{0%{opacity:0;translate:0 2.5rem;scale:calc(var(--s) * .5)}15%{opacity:1}100%{opacity:0;translate:1.2rem -9rem;scale:var(--s)}}
@keyframes fx-fall{0%{opacity:0;translate:0 -4rem;rotate:0deg}10%{opacity:1}100%{opacity:0;translate:-1.4rem 10rem;rotate:calc(var(--r) * 9)}}
@keyframes fx-sway{0%{opacity:0;translate:0 -3rem}12%{opacity:1}35%{translate:1.2rem 1.5rem}65%{translate:-1.2rem 5rem}100%{opacity:0;translate:.6rem 9rem}}
@keyframes fx-twink{0%,100%{opacity:0;scale:.2;rotate:0deg}45%{opacity:1;scale:var(--s);rotate:45deg}}
@keyframes fx-drift{0%{opacity:0;translate:-12rem 0}20%,80%{opacity:.9}100%{opacity:0;translate:12rem .8rem}}
@keyframes fx-ring{0%{opacity:.8;scale:.2}100%{opacity:0;scale:4.2}}
@keyframes fx-flick{0%,100%{opacity:.25;scale:.9}20%{opacity:.8;scale:1.05}40%{opacity:.45}55%{opacity:.9;scale:1.1}75%{opacity:.35}}
@keyframes fx-camera{0%,84%,100%{opacity:0;scale:.4}86%{opacity:1;scale:1.3}90%{opacity:0;scale:1.6}}
@keyframes fx-bolt{0%,70%,100%{opacity:0}72%{opacity:1}76%{opacity:.2}79%{opacity:1}84%{opacity:0}}
@keyframes fx-spin{to{rotate:360deg}}
@keyframes fx-lightning{0%,86%,100%{opacity:0}87%{opacity:.55}88%{opacity:.08}90%{opacity:.4}93%{opacity:0}}

/* 金貨（ひまたん × Violet：ベリーダンスのコインが揺れて舞う） */
.fx-coin i{--fx-anim:fx-sway;width:calc(.62rem * var(--s));aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff6c8,#e7b53c 45%,#9a6a10 82%);box-shadow:0 0 10px rgba(255,210,90,.75)}
/* 紙吹雪（千：一緒に踊れる曲） */
.fx-confetti i{--fx-anim:fx-fall;width:calc(.45rem * var(--s));height:calc(.8rem * var(--s));border-radius:2px;background:#ff5fa8}
.fx-confetti i[style*="--k:1"]{background:#ffa14a}.fx-confetti i[style*="--k:2"]{background:#5ec8f0}.fx-confetti i[style*="--k:3"]{background:#ffd166}
/* 星のきらめき（De☆spenice：dream splash） */
.fx-sparkle i{--fx-anim:fx-twink;width:calc(1.1rem * var(--s));aspect-ratio:1;background:#fff;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 6px #ff9fd4)}
.fx-sparkle i[style*="--k:1"],.fx-sparkle i[style*="--k:3"]{background:#f3d26a;filter:drop-shadow(0 0 6px #f3d26a)}
/* 火花（44マグノリア：ヘビーメタル）＋稲光 */
.fx-spark i{--fx-anim:fx-rise;width:2px;height:calc(.9rem * var(--s));border-radius:2px;background:linear-gradient(#fff,#ff9d2e);box-shadow:0 0 8px #ff7a1a}
.fx-flash{inset:0;background:radial-gradient(ellipse at 60% 20%,rgba(235,240,255,.95),rgba(180,200,255,.2) 60%,transparent);opacity:0;animation:fx-lightning 7.5s linear infinite}
/* 音の輪（爆音カノジョ／司会はやさしく） */
.fx-ring i{--fx-anim:fx-ring;left:50%!important;top:46%!important;width:9rem;height:9rem;margin:-4.5rem 0 0 -4.5rem;border-radius:50%;
  border:3px solid rgba(255,111,174,.85);box-shadow:0 0 18px rgba(255,111,174,.55);animation-timing-function:ease-out}
.fx-ring i[style*="--k:1"]{animation-delay:-.9s}.fx-ring i[style*="--k:2"]{animation-delay:-1.8s}.fx-ring i[style*="--k:3"]{animation-delay:-2.7s}
.ap[data-theme="hanamura"] .fx-ring i{border-color:rgba(160,190,255,.55);box-shadow:none;border-width:2px}
/* 爆音カノジョ：音の輪は左右のスピーカーから（顔にかからないよう、端から小さく） */
/* ★2026-10-07 狭い画面では輪を小さくする（輪の半径が写真の幅の12％を超えて、端の人の顔の所まで届いていた）。広い画面は今までどおり 7rem */
.ap[data-theme="bakuon-kanojo"] .fx-ring i{--rw:min(7rem,13vw);width:var(--rw);height:var(--rw);margin:calc(var(--rw) / -2) 0 0 calc(var(--rw) / -2);top:42%!important;left:0!important;border-width:2px;animation-name:fx-ring2}
@media (max-width:54rem){.ap[data-theme="bakuon-kanojo"] .fx-ring i{box-shadow:none}}
.ap[data-theme="bakuon-kanojo"] .fx-ring i[style*="--k:1"],.ap[data-theme="bakuon-kanojo"] .fx-ring i[style*="--k:3"]{left:100%!important}
@keyframes fx-ring2{0%{opacity:.7;scale:.25}100%{opacity:0;scale:1.8}}
/* ミラーボールの光＋走査線＋ON AIR（あなたと私：昭和の歌番組） */
.fx-mirror i{--fx-anim:fx-drift;width:calc(.5rem * var(--s));aspect-ratio:1;border-radius:50%;background:#fffbe8;box-shadow:0 0 10px 3px rgba(255,236,190,.8)}
.fx-mirror i[style*="--k:1"]{background:#ffd7e8;box-shadow:0 0 10px 3px rgba(255,160,200,.7)}
.fx-scan{inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.09) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.fx-onair{right:.8rem;bottom:5.2rem;font:700 .8rem/1 var(--a-body);letter-spacing:.14em;color:#fff;background:#c8102e;padding:.35rem .6rem;border-radius:4px;
  box-shadow:0 0 14px rgba(255,40,60,.8);animation:fx-onair 2.4s ease-in-out infinite}
@keyframes fx-onair{0%,100%{opacity:1}50%{opacity:.5}}
/* ネオンの泡（極楽ドルチェ） */
.fx-neon i{--fx-anim:fx-rise;width:calc(1.4rem * var(--s));aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,47,109,.85),rgba(255,47,109,0) 70%)}
.fx-neon i[style*="--k:1"]{background:radial-gradient(circle,rgba(255,210,63,.85),rgba(255,210,63,0) 70%)}
.fx-neon i[style*="--k:2"]{background:radial-gradient(circle,rgba(80,230,255,.8),rgba(80,230,255,0) 70%)}
/* ろうそくの灯＋稲光（ワタシ ノ ゲボク：オペラティックメタル） */
.fx-candle i{--fx-anim:fx-flick;width:calc(1.2rem * var(--s));aspect-ratio:1;border-radius:50%;animation-timing-function:steps(6,end);
  background:radial-gradient(circle,rgba(255,196,110,.9),rgba(255,140,40,.25) 45%,transparent 70%)}
/* カメラのフラッシュ＋ビデオの乱れ（FLASH BACK GARAGE） */
.fx-camera i{--fx-anim:fx-camera;width:calc(4rem * var(--s));aspect-ratio:1;margin:-2rem 0 0 -2rem;border-radius:50%;
  background:radial-gradient(circle,#fff 0,rgba(255,255,255,.7) 18%,rgba(255,255,255,0) 60%)}
.fx-vhs{left:0;right:0;height:14%;top:-15%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.12) 40%,rgba(120,200,255,.1) 60%,transparent);
  animation:fx-vhs 6s linear infinite}
@keyframes fx-vhs{0%{translate:0 0}60%{translate:0 900%}100%{translate:0 900%}}
/* 火の粉と金の星（ケンタ☆ROCKオーケストラ） */
.fx-ember i{--fx-anim:fx-rise;width:calc(.36rem * var(--s));aspect-ratio:1;border-radius:50%;background:#ffb13b;box-shadow:0 0 8px 2px rgba(255,90,20,.85)}
.fx-ember i[style*="--k:3"]{width:calc(.9rem * var(--s));border-radius:0;background:#f3d26a;box-shadow:none;filter:drop-shadow(0 0 5px #f3d26a);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
/* 音符＋回るレコード（DJ ブルックリン安田） */
.fx-note i{--fx-anim:fx-rise;width:auto;color:rgba(255,220,120,.9);font-size:calc(1.2rem * var(--s));line-height:1;text-shadow:0 0 8px rgba(0,0,0,.6);font-style:normal}
.fx-note i::before{content:"♪"}.fx-note i[style*="--k:1"]::before{content:"♫"}
.fx-vinyl{right:-2.6rem;top:-2.6rem;width:8.5rem;aspect-ratio:1;border-radius:50%;opacity:.75;animation:fx-spin 3.2s linear infinite;
  background:radial-gradient(circle,#d8321a 0 13%,#111 14% 15%,#1c1c1c 16% 30%,#111 31% 32%,#222 33% 48%,#111 49% 50%,#1a1a1a 51% 70%,#0c0c0c 71%)}
/* 渦（Music Bar UzuUzu） */
.fx-swirl i{--fx-anim:fx-spin;left:50%!important;top:50%!important;width:calc(22rem * var(--s));aspect-ratio:1;margin:calc(-11rem * var(--s)) 0 0 calc(-11rem * var(--s));
  border-radius:50%;opacity:.16!important;animation-timing-function:linear;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.9) 0 6deg,transparent 6deg 30deg);-webkit-mask-image:radial-gradient(circle,transparent 18%,#000 20%,#000 60%,transparent 70%);mask-image:radial-gradient(circle,transparent 18%,#000 20%,#000 60%,transparent 70%)}
.fx-swirl i[style*="--k:1"]{animation-direction:reverse}
.ap[data-theme="uzuuzu"] .fx-swirl i{left:0!important;top:100%!important;opacity:.13!important}
.ap[data-theme="uzuuzu"] .fx-swirl i[style*="--k:1"]{left:100%!important;top:0!important}
.ap[data-theme="uzuuzu"] .fx-swirl i[style*="--k:2"]{display:none}
/* 電気の火花（三協電気工業） */
.fx-bolt i{--fx-anim:fx-bolt;width:calc(1.1rem * var(--s));height:calc(1.6rem * var(--s));background:#8fe3ff;filter:drop-shadow(0 0 6px #30b4e4);
  clip-path:polygon(40% 0,100% 0,62% 42%,90% 42%,20% 100%,42% 55%,10% 55%)}
/* 塗料のしずく（協賛企業様のページ） */
.fx-drop i{--fx-anim:fx-fall;width:calc(.7rem * var(--s));height:calc(.95rem * var(--s));border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#e94f37;rotate:0deg}
.fx-drop i[style*="--k:1"]{background:#2f8fd8}.fx-drop i[style*="--k:2"]{background:#f6c343}.fx-drop i[style*="--k:3"]{background:#3fb37f}
.fx-drop i{animation-name:fx-drip}
@keyframes fx-drip{0%{opacity:0;translate:0 -3rem}12%{opacity:.85}100%{opacity:0;translate:0 10rem}}

/* ---- 名前の動き（1字ずつ・site.js が .fx-seg/.fx-ch に分ける。折り返しの位置は今までと同じ） ---- */
.fx-seg{display:inline-block;white-space:nowrap}
.fx-ch{display:inline-block}
.fx-on .fx-l-hop .fx-ch{animation:fx-hop 3s ease-in-out calc(var(--i) * .09s) infinite}
@keyframes fx-hop{0%,62%,100%{translate:0 0}70%{translate:0 -.24em}78%{translate:0 0}84%{translate:0 -.08em}90%{translate:0 0}}
.fx-on .fx-l-wave .fx-ch{animation:fx-wv 3.2s ease-in-out calc(var(--i) * .13s) infinite}
@keyframes fx-wv{0%,100%{translate:0 0;rotate:0deg}25%{translate:0 -.1em;rotate:-3deg}75%{translate:0 .06em;rotate:3deg}}
.fx-on .fx-l-beat .fx-ch{animation:fx-bt .95s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * .035s) infinite}
@keyframes fx-bt{0%,40%,100%{scale:1}12%{scale:1.14}}
/* テーマごとの名前の味つけ（1字ずつではない） */
.fx-on .ap[data-theme="44magnolia"] .ap-name{animation:fx-rumble 6s linear infinite}
@keyframes fx-rumble{0%,88%,100%{translate:0 0}89%{translate:-3px 1px}90%{translate:3px -1px}91%{translate:-2px 0}92%{translate:2px 1px}93%{translate:0 0}}
.fx-on .ap[data-theme="gokuraku"] .ap-name{animation:fx-neonf 5s linear infinite}
@keyframes fx-neonf{0%,18%,22%,64%,68%,100%{opacity:1}19%,21%{opacity:.55}66%{opacity:.7}}
/* 名前の影（テーマの --a-name-shadow）は書き換えない。動かすのは位置・透明度だけ（影を動かすと毎コマ描き直しで重い） */
.fx-on .ap[data-theme="flashback"] .ap-name{animation:fx-glitch 5.5s steps(1,end) infinite}
@keyframes fx-glitch{0%,91%,100%{translate:0 0;opacity:1}92%{translate:3px 0;opacity:.85}94%{translate:-3px 0}96%{translate:0 0;opacity:1}}
.fx-on .ap[data-theme="dj-brooklyn-yasuda"] .ap-name{transform-origin:0 60%;animation:fx-nod .9s ease-in-out infinite}
@keyframes fx-nod{0%,100%{rotate:0deg}50%{rotate:-1.6deg}}

/* ★2026-09-29 上の欄の後ろで流すライブ映像（44マグノリア・YouTube の埋め込み・音なし）＋小さく添えるイラスト */
.ap-hero.has-bgv .ap-hero-media{height:var(--a-hero-h);background:#07080c}
.ap-bgv{position:absolute;inset:0;overflow:hidden;container-type:size;background:var(--bgv) center/cover no-repeat #07080c;filter:grayscale(.2) contrast(1.08) brightness(.7)}
.ap-bgv iframe{position:absolute;top:50%;left:50%;width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);translate:-50% -50%;scale:1.18;border:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.ap-bgv.on iframe{opacity:1}
.ap .ap-hero.has-bgv .ap-hero-media img.ap-hero-card{position:absolute;z-index:2;right:clamp(.8rem,5%,3rem);top:clamp(.9rem,9%,3rem);width:clamp(6.5rem,20vw,11.5rem);height:auto;aspect-ratio:1;
  object-fit:cover;object-position:center;filter:none;border:3px solid #d9dee8;border-radius:12px;box-shadow:0 16px 36px rgba(0,0,0,.65);rotate:3deg;transition:rotate .25s,scale .25s}
.ap .ap-hero.has-bgv .ap-hero-media img.ap-hero-card:hover{rotate:0deg;scale:1.04}
.ap-bgv-cr{position:absolute;z-index:2;left:.7rem;top:.6rem;font-size:.66rem;line-height:1.5;color:rgba(255,255,255,.72);text-decoration:none;background:rgba(0,0,0,.45);padding:.1rem .45rem;border-radius:4px}
.ap-bgv-cr:hover{color:#fff}