/* =====================================================================
   SUGITO TAXI CHANNEL（殿指示 2026-09-15）
   テレビの枠は廃止（殿却下 2026-09-15）。横いっぱいの映像と、その上を流れるサムネイル。
   トップ = .st-marquee（背景で1本だけ流し、押すと動画ページへ）
   動画ギャラリー = .st-stage（大きな再生画面）＋ .st-rail（棚）
   配色は既存の紺と黄のまま。
   ===================================================================== */

/* ---------------------------------------------------------------
   1. トップの紹介動画 — 横いっぱいの映像＋流れるサムネイル
   --------------------------------------------------------------- */
.st-marquee{position:relative;background:#04101f;color:#fff;isolation:isolate;overflow:hidden}
.st-marquee__screen{position:relative;width:100%;height:clamp(52rem,56vw,84rem);background:#000}
.st-marquee__video{display:block;width:100%;height:100%;object-fit:cover}
.st-marquee__shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(2,12,28,.96) 0,rgba(2,12,28,.9) 26%,rgba(2,12,28,.3) 62%,rgba(2,12,28,.6)),
             linear-gradient(0deg,rgba(2,12,28,.95) 0,rgba(2,12,28,.35) 34%,transparent 62%)}
.st-marquee__copy{position:absolute;left:max(6%,calc((100vw - 132rem)/2));top:13%;max-width:72rem;z-index:2}
.st-marquee__en{font:800 italic 1.5rem/1.5 var(--font-sans-serif);letter-spacing:.15em;color:#fad622;margin-bottom:2.4rem}
.st-marquee__ttl{font-family:var(--font-gothic2);font-weight:700;font-size:clamp(3.6rem,5vw,7rem);
  line-height:1.28;letter-spacing:.045em;color:#fff;text-shadow:0 .4rem 2.4rem rgba(0,0,0,.5)}
.st-marquee__note{margin-top:2.6rem;font-size:1.6rem;line-height:2;letter-spacing:.04em;color:#e4ebf8;
  text-shadow:0 .2rem 1.6rem rgba(0,0,0,.55)}
.st-marquee__all{display:inline-flex;align-items:center;gap:1.8rem;margin-top:3.4rem;min-height:5.6rem;
  padding:1.5rem 2.6rem;border:1px solid rgba(255,255,255,.62);border-radius:999px;color:#fff;
  font-size:1.6rem;font-weight:700;letter-spacing:.04em;background:rgba(2,12,28,.4);
  transition:background .25s,color .25s,border-color .25s}
.st-marquee__all span{display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:50%;
  background:#fad622;color:#04225c;font-size:1.7rem;transition:transform .25s}
.st-marquee__all:hover{background:#fff;color:#04225c;border-color:#fff}
.st-marquee__all:hover span{transform:translateX(.4rem)}
.st-marquee__all:focus-visible{outline:3px solid #fad622;outline-offset:4px}

/* サムネイルの帯。PCは映像の上に重ね、SPは映像の下に置く（殿指示） */
.st-strip{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 0 3.2rem}
.st-strip__head{display:flex;align-items:baseline;gap:1.6rem;
  width:calc(100% - 10rem);max-width:140rem;margin:0 auto 1.4rem}
.st-strip__en{font:800 italic 1.2rem/1 var(--font-sans-serif);letter-spacing:.16em;color:#fad622}
.st-strip__note{font-size:1.3rem;letter-spacing:.04em;color:#cfdaf0}
.st-strip__mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
/* 帯は「実際に横スクロールしているだけ」。transform で動かすと、止めても実クリックが
   届かないことがあった（2026-09-15 実測）。スクロールなら指でも払えて、押せば普通に飛ぶ。
   流す処理は channel.js（ポインタが乗る・触れる・フォーカスが入ると止まる）。 */
.st-strip__track{display:flex;gap:1.4rem;margin:0;padding:0 3rem;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-behavior:auto}
.st-strip__track::-webkit-scrollbar{display:none}
.st-strip__item{flex:0 0 auto;width:22rem}

/* ---------------------------------------------------------------
   2. 動画ギャラリーの再生画面 — 棚と同じコンテンツ幅、上下左右に余白（殿指示 2026-09-15）
   --------------------------------------------------------------- */
.st-channel{position:relative;background:#080c14;color:#fff;padding:0 0 12rem;isolation:isolate}
.st-stage{position:relative;width:calc(100% - 10rem);max-width:140rem;margin-inline:auto;
  background:transparent;display:grid;justify-items:center}
.st-stage__frame{position:relative;width:100%;aspect-ratio:16/9;max-height:min(72svh,66rem);
  background:#000;overflow:hidden;border-radius:1.2rem;box-shadow:0 2.4rem 5rem rgba(0,0,0,.55)}
.st-stage.-portrait .st-stage__frame{aspect-ratio:9/16;height:min(76svh,72rem);width:auto;max-height:none}
.st-stage__video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.st-stage.-portrait .st-stage__video{object-fit:contain}
.st-stage__fade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(8,12,20,.96) 0,rgba(8,12,20,.3) 26%,transparent 52%)}
.st-stage__play{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;
  gap:1.6rem;width:100%;border:0;background:rgba(4,12,26,.3);color:#fff;font-size:1.5rem;font-weight:700;
  letter-spacing:.08em;cursor:pointer}
.st-stage__play i{position:relative;display:block;width:8.8rem;height:8.8rem;border-radius:50%;
  background:rgba(255,255,255,.94);box-shadow:0 1.2rem 3rem rgba(0,0,0,.5);transition:transform .25s,background .25s}
.st-stage__play i::after{content:"";position:absolute;top:calc(50% - 1.5rem);left:calc(50% - .9rem);
  width:0;height:0;border-left:2.4rem solid #080c14;border-top:1.5rem solid transparent;border-bottom:1.5rem solid transparent}
.st-stage__play:hover i{transform:scale(1.06);background:#fad622}
.st-stage__play:focus-visible{outline:3px solid #fad622;outline-offset:-8px}
.st-stage__play[hidden]{display:none}
.st-stage__sound{position:absolute;right:2.4rem;bottom:2.4rem;z-index:3;min-height:4.8rem;padding:1rem 1.8rem;
  border:1px solid rgba(255,255,255,.6);border-radius:999px;background:rgba(4,12,26,.86);color:#fff;
  font-size:1.4rem;font-weight:700;cursor:pointer}
.st-stage__sound:hover{background:#fad622;color:#04225c}
.st-stage__sound:focus-visible{outline:3px solid #fad622;outline-offset:4px}
.st-stage__sound[hidden]{display:none}

.st-channel__inner{width:calc(100% - 10rem);max-width:140rem;margin-inline:auto}
.st-now{position:relative;z-index:2;margin-top:5.6rem;display:grid;gap:1.4rem;max-width:78rem}
.st-now__en{font:800 italic 1.3rem/1 var(--font-sans-serif);letter-spacing:.16em;color:#fad622}
.st-now__ttl{font-family:var(--font-gothic2);font-weight:700;font-size:clamp(2.6rem,3vw,4rem);
  line-height:1.35;letter-spacing:.04em}
.st-now__lead{font-size:1.6rem;line-height:1.9;color:#dbe4f4}
.st-now__meta{display:flex;flex-wrap:wrap;gap:1rem;font-size:1.3rem;letter-spacing:.06em;color:#9fb3d8}
.st-now__meta span{padding:.4rem 1.2rem;border:1px solid rgba(255,255,255,.26);border-radius:999px}

/* ---------------------------------------------------------------
   3. 棚（カテゴリ別の横並び）
   --------------------------------------------------------------- */
.st-rail{margin-top:5.6rem}
.st-rail__head{display:flex;align-items:flex-end;gap:2rem;margin-bottom:1.8rem}
.st-rail__head>div{min-width:0}
.st-rail__en{font:800 italic 1.3rem/1.5 var(--font-sans-serif);letter-spacing:.14em;color:#fad622}
.st-rail__ja{font-family:var(--font-gothic2);font-weight:700;font-size:clamp(2.2rem,2.4vw,3rem);line-height:1.4;letter-spacing:.04em;margin-top:.6rem}
.st-rail__note{margin-top:.8rem;font-size:1.4rem;line-height:1.8;color:#b8c6e2}
.st-rail__nav{display:flex;gap:.8rem;margin-left:auto}
.st-rail__nav button{display:grid;place-items:center;width:4.8rem;height:4.8rem;border:1px solid rgba(255,255,255,.34);border-radius:50%;background:rgba(255,255,255,.06);color:#fff;font-size:2rem;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.st-rail__nav button:hover{background:#fad622;color:#04225c;border-color:#fad622}
.st-rail__nav button:focus-visible{outline:3px solid #fad622;outline-offset:3px}
.st-rail__nav button[disabled]{opacity:.3;cursor:default}
.st-rail__track{display:flex;gap:1.6rem;margin:0;padding:1rem .4rem 2.4rem;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
.st-rail__track::-webkit-scrollbar{display:none}
.st-rail__item{flex:0 0 auto;width:29rem;max-width:78vw;scroll-snap-align:start}

/* ---------------------------------------------------------------
   4. サムネイルのカード（棚と帯で共用）
   --------------------------------------------------------------- */
.st-vcard{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:rgba(250,214,34,.2)}
.st-vcard__thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:.8rem;overflow:hidden;background:#0a1424;box-shadow:0 1rem 2.4rem rgba(0,0,0,.45);transition:transform .28s ease,box-shadow .28s ease}
.st-vcard__thumb img{display:block;width:100%;height:100%;object-fit:cover}
/* 絵に焼き込まれた文字を隠さない。再生の印は、選ぼうとした時だけ画面の中央に出す */
.st-vcard__play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(4,12,26,.42);opacity:0;transition:opacity .25s}
.st-vcard__play::after{content:"";width:0;height:0;margin-left:1.2rem;border-left:2.2rem solid #fff;border-top:1.4rem solid transparent;border-bottom:1.4rem solid transparent;filter:drop-shadow(0 .6rem 1.2rem rgba(0,0,0,.5))}
.st-vcard:hover .st-vcard__play,.st-vcard:focus-visible .st-vcard__play{opacity:1}
.st-vcard__dur{position:absolute;right:.8rem;top:.8rem;padding:.3rem .8rem;border-radius:.4rem;background:rgba(0,0,0,.66);font-size:1.2rem;font-weight:700;letter-spacing:.04em}
.st-vcard__body{display:block;padding:1.2rem .2rem 0}
.st-vcard__title{display:block;font-size:1.6rem;font-weight:700;line-height:1.5;letter-spacing:.03em}
.st-vcard__lead{display:block;margin-top:.6rem;font-size:1.3rem;line-height:1.7;color:#b8c6e2}
.st-strip .st-vcard__body{display:none}
.st-vcard:hover .st-vcard__thumb{transform:translateY(-.5rem) scale(1.03);box-shadow:0 1.8rem 3.4rem rgba(0,0,0,.6)}
.st-vcard:focus-visible{outline:0}
.st-vcard:focus-visible .st-vcard__thumb{outline:3px solid #fad622;outline-offset:4px}
.st-vcard[aria-current="true"] .st-vcard__thumb{outline:2px solid #fad622;outline-offset:2px}
.st-vcard[aria-current="true"] .st-vcard__title{color:#fad622}

.st-channel__all{display:inline-flex;align-items:center;gap:2rem;margin-top:4.4rem;padding:1.6rem 2.8rem;min-height:5.6rem;border:1px solid rgba(255,255,255,.5);border-radius:999px;color:#fff;font-size:1.6rem;font-weight:700;letter-spacing:.04em;transition:background .25s,color .25s}
.st-channel__all span{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:#fad622;color:#04225c;font-size:1.8rem;transition:transform .25s}
.st-channel__all:hover{background:#fff;color:#04225c}
.st-channel__all:hover span{transform:translateX(.4rem)}
.st-channel__all:focus-visible{outline:3px solid #fad622;outline-offset:4px}

/* ヒーローの下に楔（帯）を挟まない（殿指摘 2026-09-15）。
   page-sub.css の .st-page-head::after は「次のセクションがベタ塗り」を前提に斜面の下の三角を
   塗りつぶす仕組みで、次が映像やグラデーションだと必ず段差になる（実測で高さ240pxの帯）。
   楔をやめ、再生画面自身の上端を斜めにしてヒーローの下端へ食い込ませる。 */
/* 斜めの線を見せる。ヒーローの下端へ向けて明るくし、下の濃紺との境をはっきりさせる。
   画像の中身（暗い車など）に左右されずに斜面が読めるようにするため（殿指示 2026-09-15）。
   PCの既定は左から右への白グラデで右下が透明。その上に下端の白を重ねる。 */
.page-video .st-page-head__visual::after{
  background:
    linear-gradient(0deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.38) 9%,rgba(255,255,255,0) 19%),
    linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 30%,rgba(255,255,255,.35) 52%,rgba(255,255,255,0) 68%)}
.page-video .st-page-head{padding-bottom:0}
.page-video .st-page-head::after{content:none}
/* 上の余白を入れると、斜めに切った分の下に「黒い帯」が残る（殿指摘 2026-09-15、実測120px）。
   再生画面そのものを斜面へ食い込ませるので、上の余白は 0。 */
.page-video .st-channel{margin-top:calc(var(--sub-slope) * -1);
  clip-path:polygon(0 var(--sub-slope),100% 0,100% 100%,0 100%);
  padding-top:calc(var(--sub-slope) + 9rem)}

@media(max-width:1023px){
 /* SPは映像の上にサムネイルを重ねず、映像の下へ置く（殿指示） */
 .st-marquee__screen{height:auto;aspect-ratio:4/5;max-height:72svh}
 .st-marquee__copy{position:static;max-width:none;padding:2.8rem 2.4rem 0}
 .st-marquee__en{font-size:1.15rem;margin-bottom:1.4rem}
 .st-marquee__note{margin-top:1.6rem;font-size:1.4rem;line-height:1.9}
 .st-marquee__all{margin-top:2.2rem;width:100%;justify-content:space-between;font-size:1.5rem}
 .st-strip{position:static;padding:2.6rem 0 3.2rem}
 .st-strip__head{width:calc(100% - 4.8rem);margin-bottom:1.1rem}
 .st-strip__mask{-webkit-mask-image:none;mask-image:none}
 .st-strip__track{scroll-snap-type:x mandatory;gap:1.1rem;padding:0 2.4rem}
 .st-strip__item{width:20rem;scroll-snap-align:center}
 .st-strip__item[aria-hidden="true"]{display:none}

 .st-channel{padding-bottom:6.4rem}
 .page-video .st-page-head__visual::after{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.9) 46%,rgba(255,255,255,.4) 72%,rgba(255,255,255,.2) 86%,rgba(255,255,255,.72) 100%)}
 .st-stage{width:calc(100% - 4.8rem)}
 .page-video .st-channel{padding-top:calc(var(--sub-slope) + 4.4rem)}
 .st-stage__frame{aspect-ratio:16/9;max-height:none;border-radius:.8rem}
 .st-stage.-portrait .st-stage__frame{aspect-ratio:9/16;height:auto;width:100%}
 .st-stage__play i{width:6.4rem;height:6.4rem}
 .st-stage__play i::after{top:calc(50% - 1.1rem);left:calc(50% - .7rem);border-left-width:1.8rem;border-top-width:1.1rem;border-bottom-width:1.1rem}
 .st-stage__sound{right:1.4rem;bottom:1.4rem}
 .st-channel__inner{width:calc(100% - 4.8rem)}
 .st-now{margin-top:3.2rem;gap:1rem}
 .st-now__lead{font-size:1.4rem;line-height:1.85}
 .st-rail{margin-top:4rem}
 .st-rail__head{gap:1.2rem;margin-bottom:1.2rem}
 .st-rail__note{font-size:1.25rem}
 .st-rail__nav{display:none}
 .st-rail__track{gap:1.1rem;padding:.6rem .2rem 1.8rem}
 .st-rail__item{width:23rem;max-width:68vw}
 .st-vcard__title{font-size:1.45rem}
 .st-vcard__lead{font-size:1.25rem}
 .st-channel__all{margin-top:2.8rem;width:100%;justify-content:space-between;font-size:1.5rem}
}

@media(prefers-reduced-motion:reduce){
 /* 指で送る動きは残し、勝手に動くものだけ止める。ただしサムネイルが流れるのは
    殿が明示して求めた表現なので、速度を落として残す。 */
 .st-vcard__thumb,.st-vcard__play,.st-channel__all,.st-channel__all span,.st-rail__nav button,
 .st-stage__play i,.st-marquee__all,.st-marquee__all span{transition:none}
 .st-vcard:hover .st-vcard__thumb{transform:none}
}