/* =========================================================================
 * Suggesco Studio — サイト全体の見た目（2026-09-26〜）
 * 見た目の正：work/suggesco/docs/studio-pivot/DESIGN.md
 * 読み込み：studio.php（Studio のときだけ。紙面UIの CSS は外している）
 *
 * 1. トークン
 * 2. 既存テンプレート（記事・固定ページ・一覧・検索・404）を黒に揃える
 * 3. ヘッダー・フッター
 * 4. トップ（ヒーロー・列・カード・近日公開・作品）
 * 5. 作品一覧（絞り込み）・AIコラム・PR・コミュニティ（note）
 * 6. 作品ページ
 * ========================================================================= */

/* ---------- 1. トークン ---------- */
:root,
:root[data-theme="light"],
:root[data-theme="dark"]{
  --st-ink:#111111; --st-raised:#1C1C1C; --st-line:#2E2E2E;
  --st-text:#E8E6E1; --st-paper:#F5F3EF; --st-mute:#9C978F; --st-pink:#FF2D8A;
  --st-mincho:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  --st-gothic:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --st-mono:"Courier Prime","Courier New",monospace;
  --st-gutter:48px;

  /* 既存テンプレートの変数を黒の劇場に差し替える（suggesco-pages.css / suggesco-design.css） */
  --paper:#111111; --paper-2:#1C1C1C; --ink:#E8E6E1; --ink-2:#B9B4AC; --ink-3:#9C978F; --line:#2E2E2E;
  --invert-bg:#F5F3EF; --invert-fg:#111111;
  --font-display:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
  --font-sans:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --font-mono:"Courier Prime","Courier New",monospace;
  --sg-paper:#111111; --sg-ink:#E8E6E1; --sg-ink-2:#B9B4AC; --sg-ink-3:#9C978F; --sg-line:#2E2E2E;
  --sg-display:"Zen Kaku Gothic New",sans-serif; --sg-sans:"Zen Kaku Gothic New","Hiragino Sans",sans-serif; --sg-mono:"Courier Prime","Courier New",monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root{ --paper:#111111; --paper-2:#1C1C1C; --ink:#E8E6E1; --ink-2:#B9B4AC; --ink-3:#9C978F; --line:#2E2E2E; --invert-bg:#F5F3EF; --invert-fg:#111111 }
}
@media (max-width:720px){ :root{ --st-gutter:16px } }

html{ background:var(--st-ink); scroll-behavior:auto }  /* 旧CSSの smooth を止める。ページ内の移動は studio.js が短く動かす */
/* ページ内リンクの行き先がヘッダーの下に隠れないように */
body.sg-studio [id]{ scroll-margin-top:88px }
@media (max-width:860px){ body.sg-studio [id]{ scroll-margin-top:112px } }
body.sg-studio{ background:var(--st-ink); color:var(--st-text); font-family:var(--st-gothic); letter-spacing:.02em; overflow-x:hidden }
body.sg-studio::before{ content:none !important }  /* 紙の背景（紙面UI）を出さない */
.st-vh{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.st-label{ font-family:var(--st-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--st-mute); line-height:1.4; margin:0 }
.st-on{ color:var(--st-pink) }
.st-link:hover{ color:var(--st-paper) }
.st-pad{ padding:0 var(--st-gutter) }

/* ---------- 2. 既存テンプレートを黒に揃える ---------- */
body.sg-studio main{ min-height:50vh }
body.sg-studio a:focus-visible, body.sg-studio button:focus-visible{ outline:2px solid var(--st-paper); outline-offset:3px }
body.sg-studio .article-title{ font-family:var(--st-gothic); font-weight:700; letter-spacing:.02em; line-height:1.45; color:var(--st-paper) }
body.sg-studio .prose{ color:var(--st-text); line-height:1.9 }
body.sg-studio .prose h2, body.sg-studio .prose h3, body.sg-studio .prose h4{ font-family:var(--st-gothic); font-weight:700; color:var(--st-paper); letter-spacing:.02em }
body.sg-studio .prose a:not(.btn-fill):not(.btn-line){ color:var(--st-paper); text-decoration:underline; text-decoration-color:var(--st-mute); text-underline-offset:3px }
body.sg-studio .prose a:hover{ text-decoration-color:var(--st-paper) }
body.sg-studio .prose strong, body.sg-studio .prose b{ color:var(--st-paper) }
body.sg-studio .prose mark{ background:linear-gradient(transparent 62%, rgba(255,45,138,.28) 62%); color:inherit }
body.sg-studio .prose img{ filter:none }
body.sg-studio .prose table{ border-color:var(--st-line) }
body.sg-studio .prose th{ background:var(--st-raised); color:var(--st-paper) }
body.sg-studio .prose td, body.sg-studio .prose th{ border-color:var(--st-line) }
body.sg-studio .prose .callout, body.sg-studio .callout{ background:var(--st-raised); border-color:var(--st-line); color:var(--st-text) }
body.sg-studio .prose p.disc, body.sg-studio p.disc{ color:var(--st-mute) !important }
body.sg-studio .ph img, body.sg-studio .cover img, body.sg-studio .card img{ filter:none !important }
body.sg-studio .article-cover .ph{ border-radius:4px; overflow:hidden }
body.sg-studio .eyebrow, body.sg-studio .byline, body.sg-studio .crumb{ color:var(--st-mute) }
body.sg-studio .crumb a:hover{ color:var(--st-paper) }
body.sg-studio .author{ border-color:var(--st-line) }
body.sg-studio .sg-toc{ background:var(--st-raised); border-color:var(--st-line) }
body.sg-studio .sg-toc a, body.sg-studio .prose .sg-toc a{ color:var(--st-text); text-decoration:none }
body.sg-studio .prose .sg-toc a:hover{ color:var(--st-paper); text-decoration:underline }
body.sg-studio .sec-head h2{ font-family:var(--st-gothic); font-weight:700; color:var(--st-paper) }
body.sg-studio .card h3{ color:var(--st-paper) }
body.sg-studio .btn-fill{ background:var(--st-paper); color:var(--st-ink) }
body.sg-studio .btn-line{ border-color:var(--st-paper); color:var(--st-paper) }
body.sg-studio input, body.sg-studio textarea, body.sg-studio select{ background:var(--st-raised); color:var(--st-text); border-color:var(--st-line) }

/* ---------- 3. ヘッダー・フッター ---------- */
.st-hd{ position:sticky; top:0; z-index:60; background:#111111; border-bottom:1px solid var(--st-line) }  /* ぼかし（backdrop-filter）はスクロールのたびに背後を再計算して重くなるので使わない */
.admin-bar .st-hd{ top:32px }
.st-hd-in{ display:flex; align-items:center; gap:32px; height:64px; padding:0 var(--st-gutter) }
.st-logo{ flex:none; display:block }
.st-logo img{ height:44px; width:auto; display:block }
.st-nav{ display:flex; gap:24px; font-size:14px; font-weight:700 }
.st-nav a{ color:var(--st-text); opacity:.78; white-space:nowrap; padding:4px 0; border-bottom:1px solid transparent }
.st-nav a:hover{ opacity:1 }
.st-nav a[aria-current]{ opacity:1; border-bottom-color:var(--st-paper) }
.st-sns{ margin-left:auto; display:flex; gap:16px }
.st-sns a{ font-family:var(--st-mono); font-size:12px; letter-spacing:.12em; color:var(--st-mute) }
.st-sns a:hover{ color:var(--st-paper) }
.st-preview-bar{ background:var(--st-paper); color:var(--st-ink); font-size:12px; font-weight:700; text-align:center; padding:4px 8px }
@media (max-width:860px){
  .st-hd-in{ flex-wrap:wrap; height:auto; gap:0 16px; padding-top:8px }
  .st-logo img{ height:38px }
  .st-sns{ gap:12px }
  .st-sns a{ font-size:11px }
  .st-nav{ order:3; width:100%; overflow-x:auto; gap:20px; padding:6px 0 8px; font-size:13px; scrollbar-width:none }
  .st-nav::-webkit-scrollbar{ display:none }
}
@media (max-width:420px){ .st-sns{ display:none } }

.st-ft{ margin-top:96px; border-top:1px solid var(--st-line); padding:40px var(--st-gutter) 40px; font-size:13px; color:var(--st-text) }
.st-ft-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px }
.st-ft-brand img{ height:64px; width:auto; display:block }
.st-ft-tag{ font-family:var(--st-mincho); font-weight:800; color:var(--st-paper); font-size:16px; margin-top:12px; letter-spacing:.04em }
.st-ft h4{ font-family:var(--st-mono); font-size:11px; letter-spacing:.14em; color:var(--st-mute); font-weight:400; margin:0 0 8px }
.st-ft-grid a{ display:block; line-height:2.1; color:var(--st-text) }
.st-ft-grid a:hover{ color:var(--st-paper) }
.st-ft-disc{ margin-top:32px; padding-top:16px; border-top:1px solid var(--st-line); font-size:12px; color:var(--st-mute); line-height:1.8 }
.st-ft-btm{ margin-top:10px; display:flex; flex-wrap:wrap; gap:6px 18px; font-family:var(--st-mono); font-size:11px; letter-spacing:.1em; color:var(--st-mute) }
.st-ft-btm a{ color:var(--st-mute); text-decoration:underline; text-underline-offset:3px }
@media (max-width:720px){ .st-ft-grid{ grid-template-columns:1fr 1fr } .st-ft-brand{ grid-column:1/-1 } }

/* ---------- 4. トップ ---------- */
.st-hero{ position:relative; min-height:min(78vh,720px); display:flex; align-items:flex-end; background:#000 }
.st-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center right }
.st-hero-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(17,17,17,.94) 0%,rgba(17,17,17,.78) 34%,rgba(17,17,17,0) 68%),linear-gradient(0deg,#111 0%,rgba(17,17,17,0) 30%) }
.st-hero-copy{ position:relative; padding:0 var(--st-gutter) 64px; max-width:640px }
.st-hero-title{ font-family:var(--st-mincho); font-weight:800; font-size:64px; line-height:1.3; letter-spacing:.04em; color:var(--st-paper); margin:10px 0 4px }
.st-hero-sub{ font-size:15px; color:var(--st-mute); margin:0 }
.st-hero-log{ margin:16px 0 0; font-size:16px; line-height:1.8; color:var(--st-text) }
.st-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px }
.st-btn{ display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 22px; border-radius:4px; font-weight:700; font-size:15px; line-height:1 }
.st-btn.is-play{ background:var(--st-pink); color:var(--st-ink) }
.st-btn.is-play::before{ content:""; width:0; height:0; border-left:11px solid var(--st-ink); border-top:7px solid transparent; border-bottom:7px solid transparent }
.st-btn.is-line{ border:1px solid var(--st-paper); color:var(--st-paper) }
.st-btn.is-line:hover{ background:rgba(245,243,239,.08) }
.st-hero-next{ position:absolute; right:var(--st-gutter); bottom:64px; text-align:right; border-left:1px solid var(--st-line); padding-left:16px; display:flex; flex-direction:column; gap:8px }
.st-hero-next a{ display:block }
.st-hero-next b{ display:block; font-size:14px; color:var(--st-paper); line-height:1.5 }
.st-hero-next span{ font-family:var(--st-mono); font-size:12px; letter-spacing:.08em; color:var(--st-mute) }
@media (max-width:720px){
  .st-hero{ min-height:auto; display:block }
  .st-hero-bg{ position:relative; aspect-ratio:16/9; background-position:center }
  .st-hero-bg::after{ background:linear-gradient(0deg,#111 0%,rgba(17,17,17,0) 45%) }
  .st-hero-copy{ padding:0 var(--st-gutter) 28px; margin-top:-24px }
  .st-hero-title{ font-size:40px }
  .st-hero-next{ position:static; margin:0 var(--st-gutter); text-align:left; border-left:0; border-top:1px solid var(--st-line); padding:12px 0 0 }
  .st-btn{ height:46px; padding:0 18px; font-size:14px }
}

.st-row{ margin-top:56px }
.st-row-first{ margin-top:32px }
.st-row-hd{ display:flex; align-items:baseline; gap:16px; padding:0 var(--st-gutter); margin-bottom:14px }
.st-row-hd h2{ font-size:22px; font-weight:700; line-height:1.4; letter-spacing:.04em; color:var(--st-paper); margin:0; font-family:var(--st-gothic) }
.st-row-hd .st-label{ margin-left:auto }
.st-track{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px var(--st-gutter) 14px; scrollbar-width:thin; scrollbar-color:var(--st-line) transparent; scroll-padding-left:var(--st-gutter) }
.st-track > *{ scroll-snap-align:start; flex:none }

.st-card{ position:relative; display:block; color:inherit; transition:transform .15s }
@media (hover:hover) and (prefers-reduced-motion:no-preference){ .st-card:hover, .st-work:hover, .st-soon:hover{ transform:scale(1.03) } }
.st-card .st-th{ position:relative; border-radius:4px; overflow:hidden; background:var(--st-raised) }
.st-card .st-th img{ width:100%; height:100%; object-fit:cover; display:block }
.st-card.is-v{ width:188px } .st-card.is-v .st-th{ aspect-ratio:9/16 }
.st-card.is-h{ width:360px } .st-card.is-h .st-th{ aspect-ratio:16/9 }
@media (max-width:720px){ .st-card.is-v{ width:140px } .st-card.is-h{ width:272px } }
.st-rt{ position:absolute; right:6px; bottom:6px; background:rgba(17,17,17,.86); color:var(--st-paper); font-family:var(--st-mono); font-size:11px; padding:1px 6px; border-radius:2px }
.st-bd{ position:absolute; left:6px; top:6px; display:flex; gap:4px; flex-wrap:wrap }
.st-badge{ font-family:var(--st-mono); font-size:11px; letter-spacing:.06em; padding:1px 6px; border-radius:2px; background:rgba(17,17,17,.86); color:var(--st-paper); line-height:1.6 }
.st-badge.is-new{ color:var(--st-pink) }
.st-badge.is-soon{ border:1px solid var(--st-paper); background:rgba(17,17,17,.6) }
.st-meta{ padding:8px 2px 0 }
.st-w{ font-size:12px; color:var(--st-mute); line-height:1.5 }
.st-meta h3{ font-size:15px; font-weight:700; line-height:1.5; color:var(--st-paper); margin:2px 0 0; font-family:var(--st-gothic) }
.st-s{ font-family:var(--st-mono); font-size:11px; color:var(--st-mute); margin-top:2px; letter-spacing:.04em }

.st-work{ display:block; width:420px; color:inherit; transition:transform .15s }
.st-work-ph{ position:relative; aspect-ratio:16/9; border-radius:4px; overflow:hidden; background:var(--st-raised) }
.st-work-ph img{ width:100%; height:100%; object-fit:cover; display:block }
.st-work-ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(17,17,17,.9) 0%,rgba(17,17,17,0) 55%) }
.st-work-ph b{ position:absolute; left:16px; bottom:12px; z-index:1; font-family:var(--st-mincho); font-weight:800; font-size:30px; line-height:1.3; color:var(--st-paper); letter-spacing:.04em }
.st-work .st-label{ margin-top:10px }
.st-work-log{ font-size:14px; line-height:1.7; margin:4px 0 0; color:var(--st-text) }
.st-works-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; padding:0 var(--st-gutter) }
.st-works-grid .st-work{ width:auto }
@media (max-width:720px){ .st-work{ width:300px } .st-work-ph b{ font-size:24px } }

.st-soon{ display:block; width:360px; color:inherit; transition:transform .15s }
.st-soon-ph{ position:relative; aspect-ratio:16/9; border-radius:4px; overflow:hidden; background:var(--st-raised) }
.st-soon-ph img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.6) brightness(.42) }
.st-soon-ov{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:14px }
.st-soon-ov i{ font-style:normal; font-size:12px; color:var(--st-text); opacity:.85; margin-bottom:2px }
.st-soon-ov b{ font-family:var(--st-mincho); font-weight:800; font-size:20px; line-height:1.35; color:var(--st-paper); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.st-soon-ov span{ font-family:var(--st-mono); font-size:12px; letter-spacing:.1em; color:var(--st-paper); margin-top:4px }
.st-soon p{ font-size:13px; line-height:1.7; margin:8px 0 0; color:var(--st-text) }
@media (max-width:720px){ .st-soon{ width:272px } .st-soon-ov b{ font-size:17px } }

/* ---------- 5. 作品一覧・AIコラム・PR ---------- */
.st-filters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px }
.st-chip{ height:34px; padding:0 14px; border:1px solid var(--st-line); border-radius:2px; font:inherit; font-size:13px; color:var(--st-text); background:none; cursor:pointer }
.st-chip[aria-pressed="true"]{ border-color:var(--st-paper); color:var(--st-paper); background:rgba(245,243,239,.08) }
.st-sep{ width:1px; height:20px; background:var(--st-line); margin:0 6px }
.st-sort{ margin-left:auto; height:34px; background:var(--st-raised); color:var(--st-text); border:1px solid var(--st-line); border-radius:2px; padding:0 10px; font:inherit; font-size:13px }
.st-count{ font-size:13px; color:var(--st-mute); margin:0 0 10px }
.st-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:20px 14px }
.st-grid .st-card{ width:auto }
.st-grid .st-card.is-h{ grid-column:span 2 }
.st-grid .st-card[hidden]{ display:none }
@media (max-width:720px){ .st-grid{ grid-template-columns:repeat(2,1fr) } .st-sort{ margin-left:0 } }

.st-notes{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.st-note{ display:block; background:var(--st-raised); border-radius:4px; overflow:hidden; color:inherit }
.st-note-ph{ aspect-ratio:16/9; overflow:hidden; background:#000 }
.st-note-ph img{ width:100%; height:100%; object-fit:cover; display:block }
.st-note-tx{ padding:14px 16px 16px }
.st-note h3{ font-size:14px; line-height:1.65; color:var(--st-paper); margin:6px 0 0; font-weight:700; font-family:var(--st-gothic) }
.st-note:hover h3{ text-decoration:underline; text-underline-offset:3px }
.st-more{ margin:14px 0 0; font-size:14px }
.st-more a{ color:var(--st-paper); border-bottom:1px solid var(--st-mute) }
.st-pr{ margin-top:18px; border:1px solid var(--st-line); border-radius:4px; padding:16px 20px; display:flex; gap:16px; align-items:center; flex-wrap:wrap }
.st-pr p{ font-size:14px; line-height:1.7; flex:1; min-width:240px; margin:0; color:var(--st-text) }
.st-pr-tag{ font-family:var(--st-mono); font-size:11px; border:1px solid var(--st-mute); color:var(--st-mute); padding:0 6px; border-radius:2px; line-height:1.6 }
.st-pr-go{ font-weight:700; color:var(--st-paper); border-bottom:1px solid var(--st-paper) }
@media (max-width:720px){ .st-notes{ grid-template-columns:1fr } }

.st-page-head{ padding:48px var(--st-gutter) 0; max-width:820px }
.st-page-head h1{ font-family:var(--st-gothic); font-weight:700; font-size:36px; line-height:1.35; color:var(--st-paper); margin:8px 0 10px }
.st-page-head p{ margin:0; color:var(--st-text); line-height:1.8 }
.st-page-head a{ color:var(--st-paper); text-decoration:underline }

/* ---------- 6. 作品ページ ---------- */
.st-wk-hero{ background:#000 }
.st-wk-bg{ aspect-ratio:21/9; max-height:62vh; width:100%; background-size:cover; background-position:center; position:relative }
.st-wk-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,#111 0%,rgba(17,17,17,0) 55%) }
.st-wk-head{ padding:0 var(--st-gutter); margin-top:-88px; position:relative; max-width:860px }
.st-crumb{ font-size:12px; color:var(--st-mute); margin-bottom:10px }
.st-crumb a{ color:var(--st-mute) } .st-crumb a:hover{ color:var(--st-paper) }
.st-wk-head h1{ font-family:var(--st-mincho); font-weight:800; font-size:48px; line-height:1.3; letter-spacing:.04em; color:var(--st-paper); margin:6px 0 0 }
.st-wk-log{ margin:12px 0 0; line-height:1.8; color:var(--st-text) }
@media (max-width:720px){ .st-wk-bg{ aspect-ratio:16/9 } .st-wk-head{ margin-top:-40px } .st-wk-head h1{ font-size:32px } }

.st-tabs{ display:none; gap:4px; padding:0 var(--st-gutter); margin-top:36px; border-bottom:1px solid var(--st-line); overflow-x:auto }
.st-js .st-tabs{ display:flex }
.st-tab{ padding:10px 16px; font:inherit; font-size:14px; font-weight:700; color:var(--st-mute); background:none; border:0; border-bottom:2px solid transparent; white-space:nowrap; cursor:pointer }
.st-tab[aria-selected="true"]{ color:var(--st-paper); border-bottom-color:var(--st-paper) }
.st-season{ padding:20px var(--st-gutter) 0; max-width:1100px }
.st-season-ttl{ font-size:18px; color:var(--st-paper); margin:24px 0 8px; font-family:var(--st-gothic) }
.st-js .st-season-ttl{ display:none }
.st-js .st-season[hidden]{ display:none }
.st-season-sum{ max-width:720px; margin:0 0 12px; line-height:1.8 }
.st-ep{ display:grid; grid-template-columns:96px 1fr auto; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--st-line) }
.st-ep-th{ display:block; width:96px; aspect-ratio:9/16; border-radius:4px; overflow:hidden; background:var(--st-raised) }
.st-ep-th.is-h{ aspect-ratio:16/9 }
.st-ep-th img{ width:100%; height:100%; object-fit:cover; display:block }
.st-ep-tx h3{ font-size:17px; color:var(--st-paper); line-height:1.5; margin:2px 0 0; font-family:var(--st-gothic) }
.st-ep-m{ font-size:13px; color:var(--st-mute); margin:2px 0 0 }
.st-ep-go{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end }
.st-ep-go a{ height:36px; display:inline-flex; align-items:center; padding:0 14px; border:1px solid var(--st-line); border-radius:4px; font-size:13px; font-weight:700; color:var(--st-text) }
.st-ep-go a.is-yt{ border-color:var(--st-paper); color:var(--st-paper) }
.st-ep-go a.is-off{ opacity:.45 }
.st-ep.is-wait .st-ep-th{ background:repeating-linear-gradient(135deg,var(--st-raised) 0 8px,#161616 8px 16px) }
@media (max-width:720px){ .st-ep{ grid-template-columns:72px 1fr } .st-ep-th{ width:72px } .st-ep-go{ grid-column:1/-1; justify-content:flex-start } }
.st-wait{ padding:28px 0; color:var(--st-mute) }
.st-wait b{ display:block; font-family:var(--st-mincho); font-weight:800; font-size:28px; color:var(--st-paper); margin-bottom:6px }
.st-credits{ padding:0 var(--st-gutter); margin-top:48px; max-width:860px }
.st-credits h2{ font-size:18px; color:var(--st-paper); margin:0 0 12px; font-family:var(--st-gothic) }
.st-credits dl{ display:grid; grid-template-columns:180px 1fr; gap:10px 16px; font-size:14px; border-top:1px solid var(--st-line); padding-top:16px; margin:0 }
.st-credits dt{ color:var(--st-mute) }
.st-credits dd{ margin:0 }
.st-credits dd a{ color:var(--st-paper); border-bottom:1px solid var(--st-paper) }
.st-ai{ margin-top:14px; font-size:13px; color:var(--st-mute) }

/* ---------- 7. 再生数（媒体ごと） ---------- */
.st-views{ display:flex; flex-wrap:wrap; gap:2px 10px; margin-top:3px; font-family:var(--st-mono); font-size:11px; letter-spacing:.02em; color:var(--st-mute) }
.st-vi{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap }
.st-vi svg{ width:12px; height:12px; flex:none; opacity:.9 }
.st-views.is-full{ font-size:12.5px; gap:4px 16px; margin-top:4px; color:var(--st-text) }
.st-views.is-full svg{ width:13px; height:13px }
.st-vnote{ font-size:12px; color:var(--st-mute); margin:14px 0 0; line-height:1.7 }
.st-pad-x{ padding:0 var(--st-gutter) }

/* ---------- 8. コミュニティ（note） ---------- */
.st-community{ display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--st-raised); border:1px solid var(--st-line); border-radius:4px; padding:24px 28px }
.st-community-tx{ flex:1; min-width:260px }
.st-community-lead{ font-family:var(--st-mincho); font-weight:800; font-size:24px; line-height:1.4; color:var(--st-paper); margin:6px 0 8px; letter-spacing:.04em }
.st-community-body{ font-size:14px; line-height:1.8; margin:0; color:var(--st-text); max-width:640px }
.st-community-go{ display:flex; flex-direction:column; align-items:flex-start; gap:10px }
.st-community-sub{ font-size:13px; color:var(--st-mute); border-bottom:1px solid var(--st-line) }
.st-community-sub:hover{ color:var(--st-paper) }
.st-nav a.is-ext{ opacity:.78 }
body.sg-studio .prose .st-community{ margin-top:40px }
body.sg-studio .prose .st-community a{ text-decoration:none }
body.sg-studio .prose .st-community-lead{ margin-top:6px }
@media (max-width:720px){ .st-community{ padding:20px } .st-community-lead{ font-size:20px } }

/* ---------- 9. Higgsfield の紹介（CTA） ---------- */
.st-hf{ background:var(--st-raised); border:1px solid var(--st-line); border-radius:6px; color:var(--st-text) }
.st-hf .st-pr-tag{ margin-right:8px }
.st-hf-k{ font-family:var(--st-mono); font-size:11px; letter-spacing:.12em; color:var(--st-mute); margin:0; display:flex; align-items:center; text-transform:uppercase }
.st-hf-h{ font-family:var(--st-gothic); font-weight:700; font-size:20px; line-height:1.5; color:var(--st-paper); margin:8px 0 0; letter-spacing:.02em }
.st-hf-list{ list-style:none; padding:0; margin:14px 0 0 }
.st-hf-list li{ position:relative; padding-left:1.3em; font-size:14px; line-height:1.75; margin:0 0 4px }
.st-hf-list li::before{ content:""; position:absolute; left:.2em; top:.72em; width:6px; height:6px; border-radius:50%; background:var(--st-pink) }
.st-hf-go{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:18px }
.st-btn.is-cta{ background:var(--st-pink); color:var(--st-ink); height:50px; padding:0 24px }
.st-btn.is-cta:hover{ filter:brightness(1.08) }
.st-hf-sub{ font-size:13px; color:var(--st-mute); border-bottom:1px solid var(--st-line) }
.st-hf-sub:hover{ color:var(--st-paper) }
.st-hf-note{ font-size:12px; line-height:1.7; color:var(--st-mute); margin:12px 0 0 }
.st-hf.is-full{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:28px; padding:24px; align-items:center; margin:28px 0 }
.st-hf-shot{ margin:0 }
.st-hf-shot img{ display:block; width:100%; height:auto; border-radius:4px; border:1px solid var(--st-line) }
.st-hf-shot figcaption{ font-size:11px; color:var(--st-mute); margin-top:6px }
.st-hf.is-compact{ display:grid; grid-template-columns:160px minmax(0,1fr) auto; gap:18px; align-items:center; padding:16px 18px; margin:0 0 36px }
.st-hf-mini{ display:block; width:160px; height:auto; border-radius:3px; border:1px solid var(--st-line) }
.st-hf.is-compact .st-hf-h{ font-size:16px; margin-top:4px }
.st-hf.is-compact .st-hf-note{ margin-top:6px }
.st-hf.is-compact .st-hf-go{ margin-top:0 }
.st-hf.is-compact .st-btn.is-cta{ height:44px; padding:0 18px; font-size:14px; white-space:nowrap }
/* 記事本文（.prose）の中でも崩れないように */
body.sg-studio .prose .st-hf a, body.sg-studio .prose .st-hf a:not(.btn-fill):not(.btn-line), body.sg-studio .prose .st-community a:not(.btn-fill):not(.btn-line){ text-decoration:none }  /* 本文リンクの下線（.prose a:not(...)）より強くする */
body.sg-studio .prose .st-hf p{ margin-bottom:0 }
body.sg-studio .prose .st-hf .st-hf-h{ margin-top:6px }
body.sg-studio .prose .st-hf ul{ margin-left:0; padding-left:0 }
body.sg-studio .prose .st-hf li{ margin-left:0 }
body.sg-studio .prose .st-hf .st-btn.is-cta{ color:var(--st-ink) }
body.sg-studio .prose p.disc + .st-hf{ margin-top:10px }
body.sg-studio .prose .st-hf + .sg-toc{ margin-top:0 }
.st-credits .st-hf{ margin-top:28px }
@media (max-width:860px){
  .st-hf.is-full{ grid-template-columns:1fr; gap:18px; padding:18px }
  .st-hf.is-compact{ grid-template-columns:1fr; gap:12px }
  .st-hf-mini{ width:100% }
  .st-hf.is-compact .st-hf-go{ justify-content:flex-start }
  .st-hf-h{ font-size:18px }
}

/* ---------- 10. 作品ページ「ここで観る」 ---------- */
.st-watch{ padding:0 var(--st-gutter); margin-top:28px; max-width:980px }
.st-player{ position:relative; aspect-ratio:16/9; background:#000; border-radius:6px; overflow:hidden; border:1px solid var(--st-line) }
.st-player.is-short{ aspect-ratio:16/9 }
.st-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.st-player-btn{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:#000; cursor:pointer; display:block }
.st-player-btn img{ width:100%; height:100%; object-fit:cover; opacity:.78; display:block }
.st-player.is-short .st-player-btn img{ object-fit:contain; opacity:1; background:#000 }
.st-player-play{ position:absolute; left:50%; top:50%; width:76px; height:76px; margin:-38px 0 0 -38px; border-radius:50%; background:var(--st-pink) }
.st-player-play::after{ content:""; position:absolute; left:31px; top:24px; border-left:22px solid var(--st-ink); border-top:14px solid transparent; border-bottom:14px solid transparent }
.st-player-btn:hover .st-player-play{ filter:brightness(1.08) }
.st-player-cap{ position:absolute; left:0; right:0; bottom:0; padding:28px 18px 14px; text-align:left; background:linear-gradient(0deg,rgba(17,17,17,.9),rgba(17,17,17,0)); display:flex; flex-direction:column; gap:2px }
.st-player-cap b{ font-size:16px; color:var(--st-paper); font-weight:700 }
@media (max-width:720px){ .st-watch{ margin-top:20px } .st-player-play{ width:60px; height:60px; margin:-30px 0 0 -30px } .st-player-play::after{ left:24px; top:18px; border-left-width:18px; border-top-width:12px; border-bottom-width:12px } }