/* ============================================================
   composer-video.css —「1分でわかる◯◯のこと」シネマ風モーション動画
   マガジン/フィルム風の作り込み。中身は composer-video.js が
   ページ既存DOMの実データから構築（内容の捏造なし）。
   ============================================================ */

.cv-stage{
  --cv-bg:#080B14; --cv-bg2:#0E1424;
  --cv-navy:#1E3A8A; --cv-indigo:#3B53B0; --cv-navy-soft:#7E9BFF;
  --cv-gold:#D8C39A; --cv-gold-soft:#C9B488;
  --cv-paper:#F3F3F6; --cv-muted:#9AA2BD; --cv-line:rgba(216,195,154,.22);
  /* 時代別テーマで差し替える色（rgb） */
  --cv-accent:30,58,138; --cv-accent2:59,83,176; --cv-glow:126,155,255; --cv-goldrgb:216,195,154;
  position:relative; width:100%; margin:0;
  border-radius:16px; overflow:hidden; background:var(--cv-bg);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.7);
  font-family:"Noto Serif JP",serif; color:var(--cv-paper);
  -webkit-font-smoothing:antialiased;
}
.cv-canvas{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(var(--cv-accent2),.24), transparent 55%),
    radial-gradient(90% 80% at 18% 88%, rgba(var(--cv-accent),.32), transparent 60%),
    linear-gradient(160deg,#0B1020 0%, #080B14 60%);
}
/* 携帯は縦長の「ショート」、PCは16:9の「フル動画」 */
@media (max-width:640px){ .cv-canvas{ aspect-ratio:9/16; } .cv-stage{ border-radius:13px; margin-bottom:28px; } }

/* ----- 背景の動きの層 ----- */
.cv-mesh{ position:absolute; inset:-15%; pointer-events:none;
  background:radial-gradient(40% 40% at 30% 30%, rgba(var(--cv-glow),.20), transparent 70%),
             radial-gradient(45% 45% at 75% 70%, rgba(var(--cv-goldrgb),.10), transparent 70%);
  animation:cvMesh 26s ease-in-out infinite alternate; }
@keyframes cvMesh{ from{ transform:translate(-3%,-2%) scale(1.05);} to{ transform:translate(4%,3%) scale(1.15);} }

/* 五線譜モチーフ（極薄） */
.cv-staff{ position:absolute; left:0; right:0; top:50%; height:120px; transform:translateY(-50%);
  pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(to bottom, transparent 0 27px, var(--cv-line) 27px 28px);
  -webkit-mask:linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
          mask:linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }

/* 漂う音符 */
.cv-note{ position:absolute; color:rgba(216,195,154,.0); font-size:20px; pointer-events:none;
  animation:cvFloat linear infinite; }
@keyframes cvFloat{
  0%{ transform:translateY(20px) rotate(-6deg); opacity:0; }
  15%{ opacity:.5; } 85%{ opacity:.5; }
  100%{ transform:translateY(-90px) rotate(6deg); opacity:0; }
}

/* 反応する波形 */
.cv-react{ position:absolute; left:0; right:0; bottom:0; width:100%; height:42%;
  pointer-events:none; opacity:.55; }

/* ----- フィルム枠（クローム） ----- */
.cv-frame{ position:absolute; inset:14px; border:1px solid var(--cv-line); border-radius:6px;
  pointer-events:none; z-index:5; }
.cv-frame::before,.cv-frame::after{ content:""; position:absolute; width:14px; height:14px; border:1px solid var(--cv-gold); }
.cv-frame::before{ left:-1px; top:-1px; border-right:0; border-bottom:0; }
.cv-frame::after{ right:-1px; bottom:-1px; border-left:0; border-top:0; }

.cv-brand{ position:absolute; left:clamp(20px,3.4%,30px); top:clamp(16px,3%,24px); z-index:6;
  font-family:"Cormorant Garamond",serif; letter-spacing:.26em; font-size:clamp(10px,1.3vw,13px);
  color:var(--cv-gold); text-transform:uppercase; display:flex; gap:8px; align-items:center; }
.cv-brand b{ font-weight:600; }
.cv-brand span{ color:var(--cv-muted); letter-spacing:.18em; }
.cv-counter{ position:absolute; right:clamp(20px,3.4%,30px); top:clamp(16px,3%,24px); z-index:6;
  font-family:"Cormorant Garamond",serif; letter-spacing:.18em; font-size:clamp(11px,1.4vw,14px);
  color:var(--cv-muted); font-variant-numeric:tabular-nums; }
.cv-counter b{ color:var(--cv-paper); font-weight:600; }

/* ----- レイアウト：持続する肖像パネル ＋ 内容 ----- */
.cv-layout{ position:absolute; inset:0; display:grid; grid-template-columns:42% 1fr; z-index:2; }
@media (max-width:640px){ .cv-layout{ grid-template-columns:1fr; grid-template-rows:44% 1fr; } }

.cv-portrait-panel{ position:relative; overflow:hidden; }
.cv-pp-img{ position:absolute; inset:0; background-size:cover; background-position:center 18%;
  filter:grayscale(.35) contrast(1.05) brightness(.9); transform:scale(1.08);
  /* navy デュオトーン */
  background-blend-mode:luminosity; }
.cv-portrait-panel::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(8,11,20,0) 40%, rgba(8,11,20,.55) 72%, var(--cv-bg) 100%),
             linear-gradient(0deg, rgba(30,58,138,.30), rgba(30,58,138,.04));
  mix-blend-mode:normal; }
@media (max-width:640px){
  .cv-portrait-panel::after{ background:linear-gradient(0deg, var(--cv-bg) 4%, rgba(8,11,20,.5) 40%, transparent 100%),
                                        linear-gradient(0deg, rgba(30,58,138,.25), transparent); }
}
.cv-stage.playing .cv-pp-img{ animation:cvKen 30s ease-out forwards; }
@keyframes cvKen{ from{ transform:scale(1.08) translate(0,0);} to{ transform:scale(1.2) translate(-2%,-2%);} }

/* 肖像が無い時のモノグラム */
.cv-mono{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:"Cormorant Garamond",serif; font-size:34vh; line-height:1; color:rgba(216,195,154,.12);
  background:radial-gradient(60% 60% at 50% 40%, rgba(30,58,138,.35), transparent 70%); }

/* 肖像パネル上のキャプション（常時） */
.cv-pp-cap{ position:absolute; left:clamp(16px,8%,30px); bottom:clamp(16px,7%,26px); z-index:3; }
.cv-pp-cap .cv-pp-era{ font-family:"Cormorant Garamond",serif; font-style:italic; letter-spacing:.12em;
  font-size:clamp(11px,1.5vw,15px); color:var(--cv-gold); }
.cv-pp-cap .cv-pp-name{ font-size:clamp(15px,2.3vw,24px); font-weight:600; margin-top:.15em;
  text-shadow:0 2px 14px rgba(0,0,0,.6); }

/* ----- 内容（右）：シーンが重なってクロスフェード ----- */
.cv-content{ position:relative; overflow:hidden; }
.cv-scene{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(18px,6%,50px) clamp(20px,7%,52px); overflow:hidden;
  opacity:0; visibility:hidden; transition:opacity .7s ease; }
.cv-scene.is-active{ opacity:1; visibility:visible; }

.cv-eyebrow{ font-family:"Cormorant Garamond",serif; letter-spacing:.26em; text-transform:uppercase;
  font-size:clamp(11px,1.4vw,15px); color:var(--cv-gold); margin-bottom:.9em;
  display:flex; align-items:center; gap:10px; opacity:0; transform:translateY(10px); }
.cv-eyebrow::before{ content:""; width:26px; height:1px; background:var(--cv-gold); display:inline-block; }
.cv-scene.is-active .cv-eyebrow{ animation:cvUp .7s .1s ease forwards; }

.cv-big{ font-weight:600; line-height:1.14; letter-spacing:.01em; font-size:clamp(24px,4.4vw,50px);
  text-shadow:0 2px 26px rgba(0,0,0,.5); opacity:0; transform:translateY(16px); }
.cv-scene.is-active .cv-big{ animation:cvUp .85s .24s ease forwards; }

.cv-sub{ margin-top:.7em; font-size:clamp(14px,1.9vw,21px); color:var(--cv-muted); line-height:1.7;
  max-width:30em; opacity:0; transform:translateY(16px); }
.cv-scene.is-active .cv-sub{ animation:cvUp .85s .48s ease forwards; }

@keyframes cvUp{ to{ opacity:1; transform:none; } }

/* intro（フルブリード寄り） */
.cv-s-intro{ align-items:flex-start; }
.cv-s-intro .cv-big{ font-size:clamp(28px,5.2vw,58px); }

/* who：チップ */
.cv-chips{ display:flex; gap:9px; flex-wrap:wrap; margin-top:1.1em; }
.cv-chip{ font-family:"Cormorant Garamond",serif; letter-spacing:.06em; font-size:clamp(12px,1.5vw,16px);
  padding:5px 14px; border-radius:999px; border:1px solid var(--cv-line); color:var(--cv-paper);
  background:rgba(255,255,255,.03); opacity:0; transform:translateY(12px); }
.cv-scene.is-active .cv-chip{ animation:cvUp .6s ease forwards; }
.cv-scene.is-active .cv-chip:nth-child(1){ animation-delay:.5s; }
.cv-scene.is-active .cv-chip:nth-child(2){ animation-delay:.64s; }
.cv-scene.is-active .cv-chip:nth-child(3){ animation-delay:.78s; }
.cv-scene.is-active .cv-chip:nth-child(4){ animation-delay:.92s; }

/* character：トレイト */
.cv-traits{ display:flex; flex-direction:column; gap:clamp(9px,1.7vw,16px); margin-top:.3em; }
.cv-trait{ opacity:0; transform:translateX(-16px); border-left:2px solid var(--cv-gold); padding-left:14px; }
.cv-trait b{ display:block; font-size:clamp(16px,2.4vw,26px); font-weight:600; }
.cv-trait span{ font-size:clamp(12px,1.5vw,15px); color:var(--cv-muted); line-height:1.55; }
.cv-scene.is-active .cv-trait{ animation:cvIn .7s ease forwards; }
.cv-scene.is-active .cv-trait:nth-child(1){ animation-delay:.4s; }
.cv-scene.is-active .cv-trait:nth-child(2){ animation-delay:.95s; }
.cv-scene.is-active .cv-trait:nth-child(3){ animation-delay:1.5s; }
@keyframes cvIn{ to{ opacity:1; transform:none; } }

/* works：番号付きリスト */
.cv-works{ display:flex; flex-direction:column; gap:clamp(8px,1.5vw,15px); margin-top:.4em; }
.cv-work{ display:flex; align-items:baseline; gap:16px; font-size:clamp(15px,2.1vw,25px); font-weight:500;
  opacity:0; transform:translateY(14px); border-bottom:1px solid rgba(255,255,255,.06); padding-bottom:.4em; }
.cv-work em{ font-family:"Cormorant Garamond",serif; font-style:italic; color:var(--cv-gold);
  font-size:.78em; min-width:1.7em; }
.cv-scene.is-active .cv-work{ animation:cvUp .6s ease forwards; }
.cv-scene.is-active .cv-work:nth-child(1){ animation-delay:.4s; }
.cv-scene.is-active .cv-work:nth-child(2){ animation-delay:.78s; }
.cv-scene.is-active .cv-work:nth-child(3){ animation-delay:1.16s; }
.cv-scene.is-active .cv-work:nth-child(4){ animation-delay:1.54s; }

/* outro */
.cv-s-outro{ align-items:flex-start; justify-content:center; }
.cv-scroll-hint{ margin-top:1.3em; font-size:clamp(12px,1.5vw,15px); color:var(--cv-muted);
  letter-spacing:.1em; opacity:0; }
.cv-scene.is-active .cv-scroll-hint{ animation:cvBlink 1.7s 1s ease-in-out infinite; }
@keyframes cvBlink{ 0%,100%{opacity:.4;} 50%{opacity:.95;} }

/* ----- ポスター（再生前） ----- */
.cv-poster{ position:absolute; inset:0; z-index:10; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:clamp(22px,6%,56px);
  background:linear-gradient(180deg, rgba(8,11,20,.4), rgba(8,11,20,.78)); transition:opacity .6s ease; }
.cv-poster.hide{ opacity:0; pointer-events:none; }
.cv-poster .cv-poster-eyebrow{ font-family:"Cormorant Garamond",serif; letter-spacing:.32em;
  font-size:clamp(11px,1.5vw,15px); color:var(--cv-gold); text-transform:uppercase; margin-bottom:.6em; }
.cv-poster .cv-poster-title{ font-weight:600; font-size:clamp(22px,4.6vw,46px); line-height:1.18;
  text-shadow:0 2px 24px rgba(0,0,0,.6); }
.cv-play{ margin-top:1.4em; width:72px; height:72px; border-radius:50%; border:1px solid rgba(216,195,154,.55);
  background:rgba(255,255,255,.04); display:flex; align-items:center; justify-content:center;
  transition:transform .35s ease,border-color .35s ease,background .35s ease; backdrop-filter:blur(2px); }
.cv-poster:hover .cv-play{ transform:scale(1.07); border-color:var(--cv-gold); background:rgba(216,195,154,.12); }
.cv-play svg{ margin-left:4px; fill:var(--cv-gold); }
.cv-poster .cv-poster-meta{ margin-top:1.1em; font-size:clamp(11px,1.4vw,14px); color:var(--cv-muted); letter-spacing:.06em; }

/* ----- コントロール ----- */
.cv-controls{ position:absolute; left:0; right:0; bottom:0; z-index:7; display:flex; align-items:center; gap:12px;
  padding:11px clamp(16px,3.4%,30px) 13px; background:linear-gradient(0deg, rgba(8,11,20,.85), transparent);
  opacity:0; transition:opacity .4s ease; }
.cv-stage.playing .cv-controls,.cv-stage.ended .cv-controls{ opacity:1; }
.cv-controls button{ background:transparent; border:none; cursor:pointer; color:var(--cv-muted); display:flex; padding:4px; transition:color .25s ease; }
.cv-controls button:hover{ color:var(--cv-gold); }
.cv-track{ flex:1; height:5px; border-radius:5px; background:rgba(255,255,255,.16); overflow:hidden; cursor:pointer; transition:height .15s ease; }
.cv-track:hover{ height:7px; }
.cv-bar{ height:100%; width:0; background:linear-gradient(90deg,var(--cv-navy-soft),var(--cv-gold)); }
.cv-time{ font-family:"Cormorant Garamond",serif; font-variant-numeric:tabular-nums; font-size:13px;
  color:var(--cv-muted); letter-spacing:.04em; min-width:74px; text-align:right; }

/* ライトボックス内・動画の直下の小さなクレジット（VOICEVOX 規約） */
.cv-vvcredit{ margin:10px 2px 0; text-align:right;
  font-family:"Cormorant Garamond","Noto Serif JP",serif; letter-spacing:.06em;
  font-size:11px; color:rgba(255,255,255,.55); }

/* ===== 作曲家ページ：要約テキストのみ（生涯の上）===== */
.cv-about{ margin:14px 0 40px; max-width:780px; }

/* ===== 時代ページの 1分動画（インライン配置）===== */
.era-video{ display:block; margin:10px 0 8px; }
.era-video .cv-stage{ box-shadow:0 30px 70px -34px rgba(0,0,0,.55); }

/* ===== （旧）左サムネ＋右要約レイアウト ===== */
.cv-intro{ display:grid; grid-template-columns:minmax(0,1.1fr) 1fr; gap:clamp(18px,3vw,40px);
  align-items:center; margin:10px 0 38px; }
@media (max-width:680px){ .cv-intro{ grid-template-columns:1fr; gap:18px; } }

.cv-thumb{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:4px;
  width:100%; aspect-ratio:16/10; border:0; cursor:pointer; border-radius:14px; overflow:hidden;
  background:#0b1020 center/cover no-repeat; color:#fff; text-align:left;
  padding:clamp(14px,3vw,22px); font-family:inherit;
  box-shadow:0 18px 44px -22px rgba(0,0,0,.6); transition:transform .3s ease, box-shadow .3s ease; }
.cv-thumb:hover{ transform:translateY(-3px); box-shadow:0 26px 56px -22px rgba(30,58,138,.6); }
.cv-thumb__eyebrow{ font-family:"Cormorant Garamond",serif; font-style:italic; letter-spacing:.18em;
  font-size:clamp(11px,2.2vw,14px); color:var(--cv-gold,#D8C39A); }
.cv-thumb__title{ font-family:"Noto Serif JP",serif; font-weight:600; font-size:clamp(15px,3vw,22px);
  line-height:1.25; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.cv-thumb__dur{ font-size:clamp(10px,2vw,12px); color:rgba(255,255,255,.72); letter-spacing:.05em; margin-top:2px; }
.cv-thumb__play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:clamp(46px,10vw,62px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(var(--cv-goldrgb,216,195,154),.6); color:var(--cv-gold,#D8C39A);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); transition:transform .3s ease, background .3s ease; }
.cv-thumb:hover .cv-thumb__play{ transform:translate(-50%,-50%) scale(1.1); background:rgba(216,195,154,.22); }
.cv-thumb__play svg{ margin-left:3px; }

.cv-summary{ min-width:0; }
.cv-summary__eyebrow{ font-family:"Cormorant Garamond",serif; font-style:italic; letter-spacing:.2em;
  text-transform:uppercase; font-size:.8rem; color:var(--accent,#1E3A8A); margin-bottom:.4em; }
.cv-summary__name{ font-family:var(--serif,"Noto Serif JP",serif); font-weight:600;
  font-size:clamp(1.15rem,2.4vw,1.5rem); color:var(--text,#0E0E12); line-height:1.3; }
.cv-summary__chips{ display:flex; flex-wrap:wrap; gap:7px; margin:.7em 0; }
.cv-summary__chips span{ font-size:.78rem; color:var(--text-muted,#3f424b);
  border:1px solid var(--border-soft,#e5e5e8); border-radius:999px; padding:3px 11px; }
.cv-summary__tag{ font-size:.95rem; color:var(--text,#0E0E12); line-height:1.7; margin:.3em 0 .5em; font-weight:500; }
.cv-summary__lead{ font-size:.86rem; color:var(--text-muted,#6b6e78); line-height:1.85; margin:0; }

/* ライトボックス（拡大再生） */
.cv-lightbox{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center;
  padding:clamp(12px,3vw,40px); background:rgba(6,8,14,.92); }
.cv-lightbox.open{ display:flex; animation:cvFade .3s ease; }
@keyframes cvFade{ from{opacity:0;} to{opacity:1;} }
.cv-lb__inner{ position:relative; width:100%; max-width:1080px; }
.cv-lb__close{ position:absolute; top:-44px; right:0; width:36px; height:36px; border:0; cursor:pointer;
  background:rgba(255,255,255,.12); border-radius:50%; color:#fff; display:grid; place-items:center; transition:background .2s; }
.cv-lb__close:hover{ background:rgba(255,255,255,.24); }
@media (max-width:680px){ .cv-lb__close{ top:auto; bottom:-42px; right:50%; transform:translateX(50%); } }

/* ===== 時代ごとの配色（雰囲気を変える）。.cv-era-* は動画(.cv-stage)とサムネ(.cv-thumb)の両方に付く ===== */
/* バロック：荘厳な金・琥珀 */
.cv-era-baroque{ --cv-accent:120,80,30; --cv-accent2:150,110,50; --cv-glow:216,180,120;
  --cv-gold:#E6C77E; --cv-goldrgb:230,199,126; --cv-navy-soft:#D8B25A; --cv-line:rgba(230,199,126,.26); }
/* 古典派：端正な青磁・象牙 */
.cv-era-classical{ --cv-accent:40,70,120; --cv-accent2:80,110,160; --cv-glow:150,180,230;
  --cv-gold:#EDE6CF; --cv-goldrgb:237,230,207; --cv-navy-soft:#A9C2E8; --cv-line:rgba(237,230,207,.22); }
/* ロマン派：情熱の深紅・薔薇 */
.cv-era-romantic{ --cv-accent:120,25,55; --cv-accent2:165,40,80; --cv-glow:230,120,150;
  --cv-gold:#E9B7C2; --cv-goldrgb:233,183,194; --cv-navy-soft:#E0567A; --cv-line:rgba(233,183,194,.26); }
/* 近代：印象派の青緑・菫 */
.cv-era-modern{ --cv-accent:30,90,100; --cv-accent2:70,120,150; --cv-glow:120,200,210;
  --cv-gold:#C9B6E0; --cv-goldrgb:201,182,224; --cv-navy-soft:#6FB7C4; --cv-line:rgba(201,182,224,.24); }
/* 現代：都会的なスレート・シアン */
.cv-era-contemporary{ --cv-accent:40,55,70; --cv-accent2:60,90,115; --cv-glow:130,200,220;
  --cv-gold:#CFD8E0; --cv-goldrgb:207,216,224; --cv-navy-soft:#7FD0E0; --cv-line:rgba(207,216,224,.2); }

.cv-replay{ position:absolute; inset:0; z-index:9; display:none; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; background:rgba(8,11,20,.6); cursor:pointer; }
.cv-stage.ended .cv-replay{ display:flex; }
.cv-replay .cv-play{ margin-top:0; }
.cv-replay span{ font-family:"Cormorant Garamond",serif; letter-spacing:.18em; color:var(--cv-paper); font-size:14px; }

@media (prefers-reduced-motion: reduce){
  .cv-mesh,.cv-note,.cv-pp-img,.cv-stage.playing .cv-pp-img,.cv-react{ animation:none !important; }
  .cv-scene,.cv-eyebrow,.cv-big,.cv-sub,.cv-chip,.cv-trait,.cv-work,.cv-scroll-hint{
    transition:opacity .3s ease !important; animation:none !important; opacity:1 !important; transform:none !important; }
}

/* ===== 中央寄せレイアウト（縦ショート/横フル 両対応）＋ SVG装飾 ===== */
.cv-scene{ align-items:center !important; text-align:center; }
.cv-eyebrow{ justify-content:center; }
.cv-big{ max-width:18em; margin-left:auto; margin-right:auto; }
.cv-sub{ margin-left:auto; margin-right:auto; }
.cv-chips{ justify-content:center; }
.cv-traits{ align-items:center; }
.cv-trait{ border-left:0 !important; padding-left:0 !important; }
.cv-works{ align-items:center; }
.cv-work{ justify-content:center; }
.cv-s-intro, .cv-s-outro, .cv-s-who, .cv-s-essence, .cv-s-life, .cv-s-character, .cv-s-works{ align-items:center !important; }
/* SVGピアノ鍵盤を下端に薄く敷く（画像に頼らずベクターで雰囲気を出す） */
.cv-canvas::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:54px; z-index:1; pointer-events:none; opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='54' viewBox='0 0 240 54'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.18'%3E%3Cpath d='M0 0.5h240M30 0v54M60 0v54M90 0v54M120 0v54M150 0v54M180 0v54M210 0v54'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.13'%3E%3Crect x='21' width='18' height='32'/%3E%3Crect x='51' width='18' height='32'/%3E%3Crect x='111' width='18' height='32'/%3E%3Crect x='141' width='18' height='32'/%3E%3Crect x='171' width='18' height='32'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:bottom; background-size:auto 54px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); }

/* ===== ヒーロー内「1分でわかる動画」ボタン（ページ上のサムネ/要約は廃止） ===== */
.cv-hero-btn{ display:inline-flex; align-items:center; gap:9px; margin:6px 0 16px; cursor:pointer;
  font-family:var(--serif,"Noto Serif JP",serif); font-size:.95rem; font-weight:600; color:#fff;
  background:linear-gradient(90deg, var(--accent,#1E3A8A), var(--accent-2,#2C4DA8)); border:0;
  border-radius:999px; padding:11px 22px; box-shadow:0 12px 28px -10px rgba(30,58,138,.5);
  transition:transform .25s ease, box-shadow .25s ease; }
.cv-hero-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(30,58,138,.7); }
.cv-hero-btn svg{ fill:#fff; flex:0 0 auto; }

/* 動画の冒頭シーンに入れる作曲家の円形写真 */
.cv-portrait-c{ display:block; margin:0 auto .8em; width:clamp(76px,12cqw,120px); height:clamp(76px,12cqw,120px);
  border-radius:50%; object-fit:cover; object-position:center 18%; border:2px solid var(--cv-gold);
  box-shadow:0 10px 30px rgba(0,0,0,.45); opacity:0; transform:scale(.85); }
.cv-scene.is-active .cv-portrait-c{ animation:cvPopC .8s .1s ease forwards; }
@keyframes cvPopC{ to{ opacity:1; transform:none; } }

/* eraページ本文（白背景）に置くVOICEVOXクレジットは可読色に上書き（規約: 表示必須） */
.era-video .cv-vvcredit{color:rgba(60,44,20,.72);text-align:center;margin-top:8px}