@charset "utf-8";
/* ==========================================================================
   L.U.X.I Studio / video.css（2026-09-28 新設・/video/ 専用）
   studio.css の後に読む。共通の部品（st-）は studio.css に任せ、ここには
   /video/ だけの並べ方（vd-）を書く。新しいトークンは定義しない（G10 のため）。
   font-size は var(--fs-x, 天井値) の形で書く（check_lp.py が var() を解かないため）。

   目次
     1. パンくず           5. 横の動画を机に並べる（LPのヒーロー動画）
     2. ヒーローの調整     6. 作り方の流れと、炭音の例
     3. ページ内の目次     7. LPと動画のセット
     4. 種類ごとの節       8. 料金の下の案内・CTA の補足
   ========================================================================== */

/* ---------- 1. パンくず ---------- */
.vd-crumbs{ position:relative; z-index:2; margin-bottom:clamp(20px,3vw,40px); }
.vd-crumbs ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-1) var(--sp-3);
  font-size:var(--fs-body,1rem);
  color:var(--ivory-mute);
}
.vd-crumbs li{ display:inline-flex; align-items:center; gap:var(--sp-3); }
.vd-crumbs li + li::before{
  content:"";
  width:6px; height:6px;
  border-top:1px solid var(--gold-400);
  border-right:1px solid var(--gold-400);
  transform:rotate(45deg);
}
.vd-crumbs a{ display:inline-flex; align-items:center; min-height:44px; color:var(--ivory); text-decoration:none; } /* 押せる高さを44pxに */
.vd-crumbs a:hover{ color:var(--gold-300); text-decoration:underline; }
.vd-crumbs [aria-current]{ color:var(--gold-300); }

/* ---------- 2. ヒーローの調整（棚に縦動画のスマホ4台） ---------- */
.vd-top .st-hero__lead{ max-width:27em; }
.vd-top .st-shelf{ margin-top:clamp(8px,2vw,24px); }
.vd-top .st-hero__note{ margin-top:var(--sp-5); text-wrap:balance; }
@media (max-width:959.98px){
  .vd-top .st-hero__still{ position:static; display:flex; width:max-content; margin:var(--sp-4) var(--gutter) 0 auto; }
  /* 上の display:flex が studio.css の「動きを減らす設定ではボタンを隠す」を上書きしないように */
  .st-reduce .vd-top .st-hero__still{ display:none; }
}
/* studio.css の棚はスマホで横に送る列になるが、justify-content:center が残っていて
   1台目が左の届かない位置へはみ出す。このページでは左詰めに戻す（studio.css 側の修正は依頼済み） */
@media (max-width:719.98px){
  .vd-top .st-shelf{ justify-content:start; }
}

/* Round2 B: 弧の内側に暖かい夜の店先のぼけ写真を敷き、スマホは艶のある石のカウンターに立てる（トップの A と同じ写真と台） */
.vd-top .st-hero__arc{
  overflow:hidden;
  background:var(--navy-900);
  border-color:rgba(217,188,122,.55);
}
.vd-top .st-hero__arc::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:url("../img/hero-night.webp") 30% 60% / cover no-repeat;
  filter:brightness(.72) saturate(.95);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 38%,#000 100%);
}
.vd-top > .st-bokeh{ display:none; }
.vd-top .st-shelf{ padding-bottom:clamp(40px,5vw,84px); }
.vd-top .st-shelf::after{
  left:-12%; right:-40vw;
  height:clamp(40px,5vw,84px);
  border-top:1px solid rgba(235,213,158,.6);
  background:
    radial-gradient(55% 90% at 45% 0%,rgba(235,213,158,.3) 0%,rgba(217,188,122,0) 72%),
    linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 40%),
    linear-gradient(180deg,#0E1B2D 0%,rgba(8,16,29,.92) 55%,rgba(6,13,24,0) 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 100%);
}
@media (min-width:960px){
  /* 1920px でも右が空かないよう、弧を大きくして写真を右端まで届かせる */
  .vd-top .st-hero__arc{ top:-30%; right:-24%; width:min(84vw,1400px); }
}
@media (max-width:719.98px){
  .vd-top .st-shelf{ padding-bottom:0; }
  /* 弧の線が本文を横切らないよう、端末の段まで下げる */
  .vd-top .st-hero__arc{ top:44%; }
}

/* ---------- 3. ページ内の目次（錠剤のリンク） ---------- */
.vd-jump{
  position:relative;
  padding-block:var(--sp-5);
  border-top:1px solid var(--line-gold);
  border-bottom:1px solid var(--line-faint);
  background:var(--navy-950);
}
.vd-jump__row{ display:flex; align-items:center; gap:var(--sp-4) var(--sp-6); }
.vd-jump__label{
  flex:none;
  font-family:var(--ff-latin);
  font-size:var(--fs-body,1rem);
  letter-spacing:var(--tr-latin);
  text-transform:uppercase;
  color:var(--gold-400);
}
.vd-jump .st-tabs{ margin-bottom:0; }
@media (min-width:760px) and (max-width:1199.98px){
  .vd-jump .st-tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .vd-jump .st-tab{ flex:none; }
}
@media (max-width:759.98px){
  .vd-jump__row{ display:block; }
  .vd-jump__label{ margin-bottom:var(--sp-3); }
}

/* ---------- 4. 種類ごとの節（左に説明、右に作品。Round2 の動画ページPCと同じ割り） ---------- */
/* 列は minmax(0,1fr)。auto のままだとスマホで横に送る列の幅に引っぱられて、説明の欄が画面からはみ出す */
.vd-cat{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-7) clamp(40px,5vw,88px); }
.vd-cat > *{ min-width:0; }
.vd-cat__intro .st-shead{ margin-bottom:var(--sp-5); }
.vd-cat__intro .st-shead__lead{ font-size:var(--fs-body,1rem); }
.vd-cat__points{ display:grid; gap:var(--sp-2); margin-bottom:var(--sp-6); color:var(--ivory); }
.vd-cat__points li{ position:relative; padding-left:1.4em; }
.vd-cat__points li::before{
  content:"";
  position:absolute;
  left:0; top:.78em;
  width:.6em; height:1px;
  background:var(--gold-400);
}
/* 1200px 以上: 見出しと説明は3本の上に全幅で置き（左に見出し、右に要点とボタン）、作品カードを広く取る。
   左の列に説明だけを置くと、作品の下の長い空白と、幅170px前後に詰まった説明文になるため */
@media (min-width:1200px){
  .vd-cat{ gap:var(--sp-7); }
  .vd-cat__intro{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
    gap:var(--sp-4) clamp(40px,5vw,88px);
    align-items:end;
  }
  .vd-cat__intro .st-shead{ margin-bottom:0; }
  .vd-cat__intro .vd-cat__points{ margin-bottom:var(--sp-5); }
  .vd-cat__intro > .st-btn{ grid-column:2; justify-self:start; }
  .vd-cat__intro .vd-cat__points{ grid-column:2; grid-row:1; align-self:end; }
  .vd-cat__intro .st-shead{ grid-column:1; grid-row:1 / span 2; }
}

/* 縦の作品3本（PC は3列。スマホは横へ送る列） */
.vd-trio{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-7) clamp(20px,2.6vw,40px);
  align-items:start;
}
.vd-trio .st-vcard__title{ font-size:var(--fs-lead,1.25rem); line-height:1.5; }
.vd-trio .st-vcard__hit{ width:100%; max-width:260px; }
.vd-trio > *{ min-width:0; }
.vd-trio .st-badge{ white-space:normal; max-width:100%; overflow-wrap:anywhere; line-height:1.5; text-align:left; }
@media (min-width:1200px){
  .vd-trio{ gap:var(--sp-7) clamp(32px,3.4vw,56px); }
}
@media (max-width:759.98px){
  .vd-trio{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:min(66vw,270px);
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1);
    padding:var(--sp-2) var(--gutter) var(--sp-5);
    scroll-padding-inline:var(--gutter);
    scrollbar-width:thin;
    scrollbar-color:var(--gold-600) transparent;
  }
  .vd-trio > *{ scroll-snap-align:start; }
}
.vd-swipe{ display:none; margin-top:var(--sp-2); color:var(--ivory-mute); }
@media (max-width:759.98px){ .vd-swipe{ display:block; } }

/* 作品の情報（目的・尺・担当）: 見出しの列を揃える */
.vd-meta{ display:grid; gap:var(--sp-2); line-height:1.75; }
.vd-meta div{ display:grid; grid-template-columns:2.6em minmax(0,1fr); gap:.5em; }
.vd-meta dd{ color:var(--ivory-mute); }
.vd-links{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-2); }

/* ---------- 5. 横の動画を机に並べる（ノートPC｜モニター｜ノートPC） ---------- */
.vd-desk{ display:grid; gap:var(--sp-8) clamp(24px,3vw,48px); }
.vd-desk .st-hcard__hit{ isolation:isolate; }
/* 端末の足元の光（Round2 の机の映り込みの代わり） */
.vd-desk .st-hcard__hit::after{
  content:"";
  position:absolute;
  left:-8%; right:-8%; bottom:-40px;
  z-index:-1;
  height:56px;
  border-top:1px solid rgba(235,213,158,.5);
  background:
    radial-gradient(55% 90% at 50% 0%,rgba(235,213,158,.28) 0%,rgba(217,188,122,0) 72%),
    linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 40%),
    linear-gradient(180deg,#0E1B2D 0%,#060D18 100%);
  -webkit-mask-image:radial-gradient(60% 100% at 50% 0%,#000 40%,transparent 100%);
  mask-image:radial-gradient(60% 100% at 50% 0%,#000 40%,transparent 100%);
  pointer-events:none;
}
.vd-desk .st-hcard__body{ margin-top:calc(var(--sp-4) + 40px); }
@media (min-width:960px){
  .vd-desk{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:var(--sp-8) clamp(40px,5vw,88px); } /* モニター（炭音）とノートPC（オリヒ）の2本 */
}
@supports (grid-template-rows:subgrid){
  @media (min-width:960px){
    .vd-desk{ grid-template-rows:auto auto; }
    .vd-desk > .st-hcard{ display:grid; grid-row:span 2; grid-template-rows:subgrid; row-gap:0; }
    .vd-desk .st-hcard__hit{ align-self:end; }
    .vd-desk .st-hcard__body{ align-self:start; }
  }
}
@media (max-width:959.98px){
  .vd-desk{ max-width:620px; margin-inline:auto; }
}

/* ---------- 6. 作り方の流れ ---------- */
.vd-flow{ display:grid; gap:var(--sp-6); }
/* align-content:start がないと、背の低い手順だけ行が引き伸ばされて見出しの高さがずれる */
.vd-step{ position:relative; display:grid; grid-template-columns:64px minmax(0,1fr); gap:var(--sp-5); align-content:start; }
.vd-step__no{
  display:grid;
  place-items:center;
  width:64px; height:64px;
  border:1px solid var(--gold-500);
  border-radius:50%;
  background:radial-gradient(circle at 50% 30%,rgba(217,188,122,.2) 0%,rgba(217,188,122,0) 70%),var(--navy-900);
  font-family:var(--ff-latin);
  font-size:var(--fs-lead,1.25rem);
  font-weight:500;
  letter-spacing:.06em;
  color:var(--gold-300);
}
/* 丸と丸をつなぐ金の線（スマホは縦、PC は横） */
.vd-step:not(:last-child)::before{
  content:"";
  position:absolute;
  left:32px; top:72px; bottom:calc(var(--sp-6) * -1 + 8px);
  width:1px;
  background:linear-gradient(180deg,var(--gold-500) 0%,rgba(201,164,92,.15) 100%);
}
.vd-step__body{ display:grid; gap:var(--sp-2); align-content:start; }
.vd-step__en{
  font-family:var(--ff-latin);
  font-size:var(--fs-body,1rem);
  letter-spacing:var(--tr-latin);
  text-transform:uppercase;
  color:var(--gold-400);
}
.vd-step__title{ font-size:var(--fs-h3,1.625rem); color:var(--ivory); }
.vd-step__text{ color:var(--ivory-mute); }
@media (min-width:960px){
  .vd-flow{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--sp-5); }
  .vd-step{ grid-template-columns:none; gap:var(--sp-4); }
  .vd-step:not(:last-child)::before{
    left:76px; right:calc(var(--sp-5) * -1 + 8px);
    top:32px; bottom:auto;
    width:auto; height:1px;
    background:linear-gradient(90deg,var(--gold-500) 0%,rgba(201,164,92,.15) 100%);
  }
}

/* 炭音の例: LPの写真4枚から縦型ショートへ */
.vd-sample{
  margin-top:clamp(48px,6vw,88px);
  padding:clamp(24px,3vw,44px);
  border:1px solid var(--line-gold);
  border-radius:var(--r-m);
  background:var(--grad-surface);
  box-shadow:var(--sh-card);
}
.vd-sample__title{ font-size:var(--fs-h3,1.625rem); color:var(--gold-300); }
.vd-sample__lead{ margin-top:var(--sp-3); color:var(--ivory-mute); }
.vd-sample__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 56px minmax(0,190px);
  align-items:center;
  gap:var(--sp-5);
  margin-top:var(--sp-6);
}
.vd-sample__shots{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-3); counter-reset:shot; }
.vd-sample__shots li{ display:grid; gap:var(--sp-2); counter-increment:shot; }
.vd-sample__shots img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border:1px solid var(--line-faint);
  border-radius:var(--r-s);
}
.vd-sample__shots span{ font-size:var(--fs-body,1rem); line-height:1.6; color:var(--ivory); word-break:auto-phrase; text-wrap:balance; }
.vd-sample__shots span::before{
  content:counter(shot,decimal-leading-zero) " ";
  font-family:var(--ff-latin);
  color:var(--gold-400);
}
/* 写真から動画へ向かう金の矢印（飾り） */
.vd-sample__arrow{ position:relative; display:block; height:1px; background:var(--grad-gold); }
.vd-sample__arrow::after{
  content:"";
  position:absolute;
  right:0; top:50%;
  width:12px; height:12px;
  border-top:1px solid var(--gold-300);
  border-right:1px solid var(--gold-300);
  transform:translateY(-50%) rotate(45deg);
}
.vd-sample__phone{ display:block; border-radius:var(--r-l); }
.vd-sample__phone .st-phone{ transition:transform .6s var(--ease); }
.vd-sample__phone:hover .st-phone,
.vd-sample__phone:focus-visible .st-phone{ transform:translateY(-6px); }
.vd-sample__cap{ margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--line-faint); color:var(--ivory-mute); }
@media (max-width:759.98px){
  .vd-sample__row{ grid-template-columns:minmax(0,1fr); justify-items:center; }
  .vd-sample__shots{ grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .vd-sample__arrow{ width:1px; height:40px; background:linear-gradient(180deg,var(--gold-600),var(--gold-300)); }
  .vd-sample__arrow::after{ right:auto; top:auto; left:50%; bottom:0; transform:translateX(-50%) rotate(135deg); }
  .vd-sample__phone{ width:min(56vw,220px); }
}

/* ---------- 7. LPと動画のセット（ノートPC＋傾いたスマホ。Round1 の 8番の見せ方を小さく） ---------- */
.vd-sets{ margin-top:var(--sp-2); }
.vd-set{ gap:var(--sp-4); }
.vd-set .st-stage{ margin:var(--sp-2) 0 var(--sp-4); }
.vd-set .st-laptop__screen > img{ object-position:50% 0; }
.vd-set .st-phone__screen > img{ object-position:50% 0; }
.vd-set .st-play{ width:38px; }
.vd-set .st-card__title{ font-size:var(--fs-h3,1.625rem); }
.vd-set__has{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.vd-set__has li{
  padding:.05em .8em;
  border:1px solid var(--line-gold);
  border-radius:var(--r-pill);
  color:var(--gold-200);
  font-size:var(--fs-body,1rem);
  line-height:1.8;
}
.vd-set .vd-links{ margin-top:auto; padding-top:var(--sp-2); }

/* セットの料金の案内（金の縁の帯） */
.vd-deal{
  display:grid;
  gap:var(--sp-5) clamp(24px,4vw,64px);
  margin-top:clamp(40px,5vw,72px);
  padding:clamp(28px,3.4vw,48px);
  border:1px solid transparent;
  border-radius:var(--r-m);
  background:
    linear-gradient(180deg,var(--navy-800) 0%,var(--navy-900) 100%) padding-box,
    var(--grad-gold) border-box;
  box-shadow:var(--sh-glow),var(--sh-card);
}
.vd-deal__title{ font-size:var(--fs-h3,1.625rem); color:var(--ivory); }
.vd-deal__text{ margin-top:var(--sp-3); color:var(--ivory-mute); }
.vd-deal .st-price__num{ margin-top:var(--sp-2); }
.vd-deal .st-flex-note{ margin-top:0; }
.vd-deal__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-self:end; }
@media (min-width:960px){
  .vd-deal{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:end; }
}

/* ---------- 8. 料金の下の案内・CTA の補足 ---------- */
.vd-price-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4) var(--sp-6);
  margin-top:var(--sp-6);
  padding-top:var(--sp-5);
  border-top:1px solid var(--line-faint);
}
.vd-price-foot p{ max-width:44em; color:var(--ivory-mute); }
.vd-cta-note{ margin-top:var(--sp-5); color:var(--ivory-mute); text-align:center; }
.vd-cta-note + .vd-cta-note{ margin-top:var(--sp-2); }
.vd-cta-note a{ color:var(--gold-300); }

/* ---------- 9. 3列の題名の行の高さをそろえる（2行の題名があっても、下の情報と料金の位置をそろえる） ---------- */
@media (min-width:1000px){
  .vd-trio .st-vcard__title{ min-height:3em; }
  .st-prices .st-price__name{ min-height:2.9em; display:flex; flex-wrap:wrap; align-content:flex-end; }
}