/* ============================================================
 * Sound Collective — Disciplines / All Classes 一覧ページ (方式B / Figma 1:1)
 *   Figma: fPjY95UhP1I9BIfLJQkB3s  PC 2107:44682 / SP 1350:20415
 *   トークンは sc-design-tokens.css の :root を使用。プレフィックス sc-disc-*。
 *   PC(1440)基準で実装し、@media(max-width:1024px) に SP 相当を記述。
 * ============================================================ */

.sc-disc { background:var(--sc-bg); font-family:var(--sc-font); color:var(--sc-fg); }
.sc-disc *, .sc-disc *::before, .sc-disc *::after { box-sizing:border-box; }

/* ===== Hero (1680:1552) ===== */
.sc-disc-hero {
  position:relative; display:flex; align-items:center; justify-content:center;
  /* #104: PC 実高 320px(SPは @media で 240px)。詳細6ページと同じ対称 padding で縦中央。 */
  min-height:320px; padding:48px 16px; overflow:hidden; background:var(--sc-bg);
}
.sc-disc-hero::before {
  content:""; position:absolute; inset:0; background-image:var(--sc-disc-hero-bg);
  background-size:cover; background-position:center; filter:blur(4px);
  mix-blend-mode:lighten; opacity:.30; pointer-events:none;
}
.sc-disc-hero::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:120px;
  background:linear-gradient(to top,#121212 8%,rgba(18,18,18,0) 92%); pointer-events:none;
}
.sc-disc-hero__inner {
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  gap:16px; text-align:center;
}
.sc-disc-hero__title { margin:0; color:var(--sc-white); font-weight:var(--sc-fw-bold); font-size:40px; line-height:1.2; }
.sc-disc-hero__sub   { margin:0; color:var(--sc-white); font-weight:var(--sc-fw-medium); font-size:18px; line-height:1.4; }

/* ===== Category filter chips (1680:2653) ===== */
.sc-disc-filters {
  display:flex; flex-wrap:wrap; align-content:center; align-items:center; justify-content:center;
  gap:4px; padding:16px 16px 0; background:var(--sc-bg);
}
.sc-disc-chip {
  display:inline-flex; align-items:center; justify-content:center; min-height:36px;
  padding:8px 10px; border:0; border-radius:54px; cursor:pointer;
  font-family:var(--sc-font); font-weight:var(--sc-fw-bold); font-size:14px; line-height:1.4;
  background:rgba(255,255,255,.10); color:var(--sc-fg); white-space:nowrap;
}
.sc-disc-chip.is-active { background:var(--sc-bg-invert); color:#0b0d27; }
.sc-disc-chip:hover:not(.is-active) { background:rgba(255,255,255,.16); }

/* ===== Section shell (Program / Course / Online / Free Workshop) ===== */
.sc-disc-sec { display:flex; justify-content:center; width:100%; background:var(--sc-bg); }
/* 左右パディングは詳細ページ(.sc-<prefix>-sec の --sc-*-margin=80px)に合わせる。
 * max-width:1440px は共通 → コンテンツ幅 1280px も詳細ページと一致(GitHub #29 の
 * 「一覧の左右パディングが詳細と違う」指摘対応)。SP(≤1024px)は @media 側で 16px。 */
.sc-disc-sec__inner {
  position:relative; display:flex; flex-direction:column; align-items:center; gap:24px;
  width:100%; max-width:1440px; padding:32px 80px;
}
/* Elementor 版(一覧ページ)のコンテナにも同じ左右パディングを強制する
 * (Elementor の per-element インライン CSS が素の .sc-disc-sec__inner に詳細度で
 * 勝つ場合があるため)。 */
.elementor-element.sc-disc-sec__inner { padding-left:80px !important; padding-right:80px !important; }
/* GitHub #101: 外側セクションコンテナ(.elementor-element.sc-disc-sec)は Elementor 既定の
 * 水平パディング 10px を持つ。__inner の 80px と合算されコンテンツ左端が 90px となり、詳細
 * ページ(margin 80px)より 10px 右へずれる。装飾アイコンは __inner 基準で left:-8px に正しく
 * 載るが、コンテンツ列ごと 10px ずれるため詳細ページと不一致に見える(#29 の残課題)。外側の
 * 水平パディングを 0 にし、左端・コンテンツ幅(1280px)を詳細ページと一致させる。 */
.elementor-element.sc-disc-sec { padding-left:0 !important; padding-right:0 !important; }

/* 装飾アイコン(GitHub #29: PC top8・白・opacity10%。SP は @media 側で右上へ上書き) */
/* #158: セクション左端で見切れる配置。コンテンツ列-8px から更に88px左へ = -96px
 * (コンテンツ列左端=PC 80px inset なのでビューポート基準 約-16px)。はみ出しは
 * 下の PC 限定 overflow-x:clip でクリップし横スクロールを抑止する。 */
.sc-disc-sec__icon {
  position:absolute; top:8px; left:-96px; right:auto; width:120px; height:120px;
  color:#fff; opacity:.1; z-index:0; pointer-events:none;
}
.sc-disc-sec__icon svg { display:block; width:100%; height:100%; }

/* GitHub #29: Elementor 版一覧ページでは、装飾アイコンを描くショートコード
 * ウィジェットのラッパー(.elementor-widget-shortcode)が親フレックス
 * (.sc-disc-sec__inner は align-items:center)により 0幅で中央に潰れ、その内部の
 * position:absolute アイコンが「セクション中央」基準になってしまう(=位置ズレ)。
 * 詳細ページ(.sc-<prefix>-sec)ではウィジェットラッパーがコンテンツ幅いっぱいの
 * ブロックなので left:-8px が「コンテンツ左端-8px」= 左上に効く。これに揃えるため、
 * アイコンウィジェットのラッパーをコンテンツ幅へ stretch し、offsetParent(包含ブロック)を
 * コンテンツ左端に一致させて左上基準へ戻す。 */
/* #101: 子チェーンを厳密指定(> .elementor-shortcode >)にすると、Elementor の
 * e_optimized_markup が無効な環境(dev は default=無効)では .elementor-widget-container
 * 層が挟まってマッチせず、ラッパーが0幅中央潰れに戻ってしまう(ローカル=active では再現しない
 * 環境依存バグ)。マークアップ差に依存しない子孫 :has() で両環境に効かせる。 */
.sc-disc-sec__inner > .elementor-widget-shortcode:has(.sc-disc-sec__icon) {
  align-self:stretch;
}
/* #158: PC で左へ寄せたアイコン(left:-96px)の画面外部分をクリップし横スクロールを抑止。
 * PC 限定にする理由: SP はアイコンが右上・右端8pxはみ出し(Figma 1350:20433)が意図表示で、
 * 全ビューポートでクリップすると SP のはみ出しまで消える(=回帰)。overflow-x:clip なので
 * overflow-y は visible のまま=上下方向のグロー(radial-gradient)は残る。
 * セクションは width:100%(ビューポート幅)なのでビューポート左端でクリップされる。 */
@media (min-width:1025px) {
  .sc-disc-sec,
  .elementor-element.sc-disc-sec { overflow-x:clip; }
}

/* Header: PC = テキスト左(タイトル/説明/Explore) + ステータスピル右。SP = 縦積み */
.sc-disc-sec__head {
  position:relative; z-index:1; display:grid; width:100%;
  grid-template-columns:1fr auto;
  grid-template-areas:"title stats" "desc stats" "btn stats";
  column-gap:24px; row-gap:24px; align-items:start;
}
.sc-disc-sec__title { grid-area:title; margin:0; max-width:747px; color:var(--sc-fg); font-weight:var(--sc-fw-bold); font-size:40px; line-height:1.2; }
.sc-disc-sec__desc  { grid-area:desc;  margin:0; max-width:747px; color:var(--sc-fg-secondary); font-weight:var(--sc-fw-medium); font-size:16px; line-height:1.4; }
.sc-disc-explore {
  grid-area:btn; justify-self:start; align-self:end; display:inline-flex; align-items:center; gap:2px;
  min-height:36px; padding:7px 12px; border:1px solid var(--sc-border-invert); border-radius:32px;
  color:var(--sc-fg); font-weight:var(--sc-fw-bold); font-size:14px; line-height:1.2; text-decoration:none;
  background:rgba(255,255,255,.06);
}
.sc-disc-explore i { font-size:20px; }
.sc-disc-explore:hover { background:rgba(255,255,255,.12); }

/* CardProductType(統計カード)— #99 共通クラス .sc-disc-ptype の単一定義。
 * All(/disciplines/ の [sc_disc_index_stats])と詳細6ページ([sc_disc_stats])が
 * 共通レンダラ sc_disc_ptype_card() でこのマークアップを出力する。旧ページ別クラス
 * (.sc-disc-stat / .sc-<prefix>-ptype)は撤去済み。SP は Figma 準拠(下記 @media)。 */
.sc-disc-ptype {
  flex:0 0 auto; display:flex; align-items:center;
  height:96px; padding:16px 0; background:rgba(39,39,39,.2); border-radius:8px; overflow:hidden;
}
.sc-disc-ptype__item {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  width:117px; height:100%; padding:0 8px; text-align:center;
}
.sc-disc-ptype__item i { font-size:24px; color:var(--sc-fg); }
.sc-disc-ptype__item b { font-size:14px; font-weight:var(--sc-fw-bold); line-height:1.1; color:var(--sc-fg); }
.sc-disc-ptype__sep { align-self:stretch; width:1px; background:var(--sc-border-dim); }

/* ===== Carousel ===== */
.sc-disc-car { display:flex; flex-direction:column; align-items:flex-end; gap:12px; width:100%; }
.sc-disc-track {
  display:flex; gap:16px; align-items:stretch; width:100%; overflow-x:auto;
  scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:2px;
  /* #110: centered/peek カルーセル。各カードをスクロールポート中央にスナップ。
   * PC はここだけ効き(padding 無しなので先頭カードは左寄せ・中間カードが中央スナップ)、
   * SP は下部 @media でトラックを画面幅までブリードさせ両端 peek を出す。 */
  scroll-snap-type:x mandatory;
}
.sc-disc-track::-webkit-scrollbar { display:none; }
.sc-disc-car__nav { display:flex; align-items:center; gap:8px; }
.sc-disc-car__btn {
  display:inline-flex; align-items:center; justify-content:center; width:35px; height:36px;
  border:0; border-radius:32px; background:var(--sc-white); color:#0b0d27; cursor:pointer; padding:0;
}
.sc-disc-car__btn i { font-size:18px; }
.sc-disc-car__btn:hover { background-image:linear-gradient(rgba(11,13,39,.08),rgba(11,13,39,.08)); }

/* ===== Class card (CardClass) ===== */
.sc-disc-card {
  flex:0 0 314px; width:314px; display:flex; flex-direction:column;
  background:var(--sc-bg-bright); border-radius:12px; overflow:hidden;
  scroll-snap-align:center; /* #110 */
}
/* ---- Full Program (bordered) variant — GitHub #46 (Figma 741:5343) ---- */
/* #88: PC の Program カードは Figma 2366:75328 で 416px・3枚フル表示。実コンテナは
 * Elementor 子コンテナの既定 padding で 1260px(1280 想定より -20px)のため、416px 固定だと
 * 3枚目が 20px 見切れる(実測)。「3等分・上限416px」の calc にして 3枚フルを担保
 * (1280 なら 416px ちょうど=Figma 一致、1260 なら 409px)。SP(≤1024px)は下部 @media の
 * .sc-disc-card{flex:0 0 308px} が同一詳細度・後勝ちで上書きし 308px を維持する。 */
.sc-disc-card--bordered { flex:0 0 calc((100% - 32px) / 3); width:auto; max-width:416px; border:1px solid #9a9a9a; position:relative; }
/* keep real content above the glow layers */
.sc-disc-card--bordered > .sc-disc-card__thumb,
.sc-disc-card--bordered > .sc-disc-card__body { position:relative; z-index:1; }
/* category glow at top & bottom, tinted by --acc, blended like Figma's lighten glow */
.sc-disc-card--bordered::before,
.sc-disc-card--bordered::after {
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:150%; height:220px; z-index:0; pointer-events:none;
  mix-blend-mode:lighten; opacity:.55;
}
.sc-disc-card--bordered::before {
  top:-96px;
  background:radial-gradient(50% 100% at 50% 0%, var(--acc,transparent) 0%, transparent 72%);
}
.sc-disc-card--bordered::after {
  bottom:-96px;
  background:radial-gradient(50% 100% at 50% 100%, var(--acc,transparent) 0%, transparent 72%);
}
/* FP thumbnail: inset 8px, rounded 6px, drop shadow, 1920:1080 (Figma 2366:75328) */
.sc-disc-card--bordered .sc-disc-card__thumb {
  margin:8px; width:auto; aspect-ratio:1920/1080; border-radius:6px;
  background-color:transparent; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.sc-disc-card__thumb {
  position:relative; width:100%; aspect-ratio:16/9; background:#4d4d4d center/cover no-repeat;
}
.sc-disc-card__online {
  position:absolute; top:12px; right:12px; display:inline-flex; align-items:center;
  min-height:32px; padding:0 12px; border-radius:54px; background:var(--sc-white);
  color:#0b0d27; font-weight:var(--sc-fw-bold); font-size:14px; line-height:1.4;
}
/* #165: body を伸長させ View Details ボタンを下端揃え(margin-top:auto は下記 __btn)。 */
.sc-disc-card__body { display:flex; flex-direction:column; gap:16px; padding:16px; width:100%; flex:1 1 auto; }

/* tags */
.sc-disc-card__tags { display:flex; flex-wrap:wrap; gap:8px; }
/* #203: border-radius は catalog(正)に合わせて 0 にする。catalog の `.sc-cat-tag` は角丸なしで、
 * 実測で All ページだけ 54px のピル形だった(同一コースのカードで見た目が違う直接原因のひとつ)。
 * padding 2px 8px / font-size 12px / bold は既に catalog と一致している。 */
.sc-disc-tag { display:inline-flex; align-items:center; padding:2px 8px; border-radius:0; font-weight:var(--sc-fw-bold); font-size:12px; line-height:1.2; white-space:nowrap; }
.sc-disc-tag--brand { background:var(--acc,var(--sc-primary)); color:#0b0d27; }
.sc-disc-tag--gray  { background:rgba(255,255,255,.10); color:var(--sc-fg); }

/* title */
/* #165: タイトル2行クランプ(行数差でメタ行以下がズレるのを防ぐ)。 */
.sc-disc-card__title { margin:0; color:var(--sc-fg); font-weight:var(--sc-fw-bold); font-size:24px; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* #46: FP course name is accent-COLORED TEXT (not a filled bar) per Figma 741:5343 */
.sc-disc-card__titlebar {
  margin:0; padding:0; background:none;
  color:var(--acc,var(--sc-primary)); font-weight:var(--sc-fw-bold); font-size:24px; line-height:1.2;
  /* #165: FP タイトルも2行クランプ。 */
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* meta (3列) */
.sc-disc-card__meta { display:flex; gap:8px; }
.sc-disc-meta { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:4px; padding-bottom:8px; border-bottom:1px solid var(--sc-border); }
.sc-disc-meta__label { color:var(--sc-fg-secondary); font-weight:var(--sc-fw-medium); font-size:12px; line-height:1.4; }
.sc-disc-meta__value { color:var(--sc-fg); font-weight:var(--sc-fw-bold); font-size:16px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* meta (Online: インストラクター + Hours) */
.sc-disc-card__meta--online { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:end; }
.sc-disc-meta--instructor { flex-direction:row; align-items:center; gap:8px; border-bottom:0; padding-bottom:0; }
.sc-disc-meta--instructor .sc-disc-meta__col { display:flex; flex-direction:column; gap:4px; min-width:0; }
.sc-disc-meta--right { align-items:flex-end; text-align:right; border-bottom:0; padding-bottom:0; }
.sc-disc-avatar { flex:0 0 32px; width:32px; height:32px; border-radius:75px; background:#4d4d4d center/cover no-repeat; }

/* description (2行クランプ) */
.sc-disc-card__desc {
  margin:0; color:var(--sc-fg-secondary); font-weight:var(--sc-fw-medium); font-size:12px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* price */
.sc-disc-card__price { display:flex; flex-direction:column; gap:4px; }
.sc-disc-card__amount { color:var(--sc-fg); font-weight:var(--sc-fw-bold); font-size:20px; line-height:1.2; }
.sc-disc-card__sub    { color:var(--sc-fg-secondary); font-weight:var(--sc-fw-medium); font-size:12px; line-height:1.4; }
/* #203: FP 注記だけ catalog(正)に合わせる。sc-catalog.css の
 * `.sc-cat-card__price span.sc-cat-card__note--check`(赤 + FA チェック ::before)と同一仕様。
 * 実測の差分: 色 グレー rgb(173,179,187) → 赤 rgb(240,75,80)、`✓` の生文字 → アイコン。
 * 親 `.sc-disc-card__price` を前置きして (0,2,0) にし、基底 `.sc-disc-card__sub`(0,1,0)に確実に勝たせる。 */
.sc-disc-card__price .sc-disc-card__sub--check {
	display:inline-flex; align-items:center; gap:4px; color:var(--sc-primary);
}
.sc-disc-card__price .sc-disc-card__sub--check::before {
	content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:10px;
}

/* View Details button */
.sc-disc-card__btn {
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; width:100%;
  padding:7px 24px; border-radius:32px; font-weight:var(--sc-fw-bold); font-size:18px; line-height:1.4;
  text-decoration:none;
  margin-top:auto; /* #165: カード下端に固定(body の flex:1 と併せ CTA 位置を揃える) */
}
.sc-disc-card__btn--white { background:var(--sc-white); color:#0b0d27; }
.sc-disc-card__btn--white:hover { color:var(--sc-primary); }
.sc-disc-card__btn--red { background:var(--sc-primary); color:var(--sc-white); }
.sc-disc-card__btn--red:hover { background-image:linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)); }

/* ---- Full Program single-item full-width layout (PC only) — GitHub #46 / Figma 2107:46308 ----
 * Triggers when a section holds exactly one Full Program card (explicit .sc-disc-card--fp-solo
 * modifier from PHP, or auto-detected: a lone bordered card inside a carousel track).
 * SP keeps the normal vertical card (rules live under @media min-width:1025px). */
@media (min-width:1025px) {
  .sc-disc-card--fp-solo,
  .sc-disc-track:has(> .sc-disc-card--bordered:only-child) > .sc-disc-card--bordered {
    flex:1 1 100%; width:100%; max-width:none; flex-direction:row;
    border-color:#6a6a6a; align-items:stretch;
  }
  .sc-disc-card--fp-solo > .sc-disc-card__thumb,
  .sc-disc-track:has(> .sc-disc-card--bordered:only-child) > .sc-disc-card--bordered > .sc-disc-card__thumb {
    flex:0 0 640px; width:640px; margin:8px; aspect-ratio:640/354; align-self:flex-start;
  }
  .sc-disc-card--fp-solo > .sc-disc-card__body,
  .sc-disc-track:has(> .sc-disc-card--bordered:only-child) > .sc-disc-card--bordered > .sc-disc-card__body {
    flex:1 1 0; min-width:0; padding:32px; justify-content:center;
  }
  /* #165: FP 単独カードは中央寄せレイアウトのため、View Details の margin-top:auto を無効化して
   * justify-content:center のグルーピングを維持する(下端固定は複数カード時のみ必要)。 */
  .sc-disc-card--fp-solo > .sc-disc-card__body > .sc-disc-card__btn,
  .sc-disc-track:has(> .sc-disc-card--bordered:only-child) > .sc-disc-card--bordered > .sc-disc-card__body > .sc-disc-card__btn {
    margin-top:0;
  }
  .sc-disc-card--fp-solo .sc-disc-card__titlebar,
  .sc-disc-track:has(> .sc-disc-card--bordered:only-child) > .sc-disc-card--bordered .sc-disc-card__titlebar {
    font-size:32px;
  }
  /* glow emanates from the bottom-right for the solo card */
  .sc-disc-card--fp-solo::before,
  .sc-disc-track:has(> .sc-disc-card--bordered:only-child) > .sc-disc-card--bordered::before { display:none; }
  .sc-disc-card--fp-solo::after,
  .sc-disc-track:has(> .sc-disc-card--bordered:only-child) > .sc-disc-card--bordered::after {
    left:auto; right:-8%; bottom:-110px; transform:none; width:70%; height:280px;
    background:radial-gradient(60% 100% at 100% 100%, var(--acc,transparent) 0%, transparent 72%);
  }
}

/* ===== Subscription banner (1690:20992) ===== */
.sc-disc-subs {
  display:flex; align-items:center; gap:16px; width:100%; max-width:876px; padding:12px;
  background:var(--sc-bg-bright); border:1px solid #6a6a6a; border-radius:12px; text-decoration:none;
}
.sc-disc-subs__text { flex:1 1 auto; display:flex; flex-direction:column; gap:4px; }
.sc-disc-subs__chip { align-self:flex-start; padding:2px 8px; border-radius:54px; background:rgba(255,255,255,.10); color:var(--sc-fg); font-weight:var(--sc-fw-medium); font-size:12px; line-height:1.4; }
.sc-disc-subs__title { color:var(--sc-fg); font-weight:var(--sc-fw-bold); font-size:20px; line-height:1.4; }
.sc-disc-subs__sub { color:var(--sc-fg-secondary); font-weight:var(--sc-fw-medium); font-size:12px; line-height:1.4; }
.sc-disc-subs__sub strong { color:var(--sc-fg); font-weight:var(--sc-fw-bold); }
.sc-disc-subs__arrow i { font-size:24px; color:var(--sc-fg); }

/* ===== Our Facility (1675:570) ===== */
.sc-disc-facility { position:relative; overflow:hidden; background:var(--sc-bg); }
.sc-disc-facility::before {
  content:""; position:absolute; inset:0; background-image:var(--sc-disc-fac-bg);
  background-size:cover; background-position:center; mix-blend-mode:hard-light; opacity:.30; pointer-events:none;
}
.sc-disc-facility__inner {
  position:relative; z-index:1; display:flex; flex-direction:row; gap:24px; align-items:flex-start; /* 2カラム(courseのみ1カラム) */
  width:100%; max-width:1440px; margin:0 auto; padding:48px 16px;
}
.sc-disc-facility__text { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:8px; color:var(--sc-fg); }
.sc-disc-facility__title { margin:0; font-weight:var(--sc-fw-bold); font-size:40px; line-height:1.2; }
.sc-disc-facility__desc  { margin:0; font-weight:var(--sc-fw-medium); font-size:18px; line-height:1.4; }
.sc-disc-facility__shot { flex:0 0 auto; width:525px; max-width:50%; height:auto; aspect-ratio:525/297; }
.sc-disc-facility__shot img { width:100%; height:100%; object-fit:cover; display:block; border-radius:8px; }

/* ===== Speak to our Team (2107:40732) ===== */
.sc-disc-cta { display:flex; justify-content:center; background:var(--sc-bg-bright); }
.sc-disc-cta__inner { display:flex; flex-direction:column; align-items:center; gap:24px; width:100%; max-width:846px; padding:48px 16px; }
.sc-disc-cta__title { margin:0; color:var(--sc-fg); font-weight:var(--sc-fw-bold); font-size:32px; line-height:1.2; text-align:center; }
.sc-disc-form { display:flex; flex-direction:column; gap:12px; width:100%; }
.sc-disc-field { display:flex; flex-direction:column; gap:8px; }
.sc-disc-field__label { color:var(--sc-fg); font-weight:var(--sc-fw-medium); font-size:14px; line-height:1.4; }
.sc-disc-input {
  width:100%; min-height:36px; padding:8px 12px; border:.5px solid var(--sc-border); border-radius:8px;
  background:rgba(255,255,255,.10); color:var(--sc-fg);
  font-family:var(--sc-font); font-weight:var(--sc-fw-medium); font-size:14px; line-height:1.4;
}
.sc-disc-input:focus { outline:none; border-color:var(--sc-primary); }
.sc-disc-input--area { min-height:96px; resize:vertical; }
.sc-disc-legal { margin:0; width:100%; color:var(--sc-fg-secondary); font-weight:var(--sc-fw-medium); font-size:12px; line-height:1.5; }
.sc-disc-recaptcha {
  display:flex; align-items:center; gap:12px; width:302px; max-width:100%; min-height:76px; padding:0 12px;
  background:var(--sc-white); border:1px solid #d3d3d3; border-radius:3px; box-shadow:0 0 4px 1px rgba(0,0,0,.08);
}
.sc-disc-recaptcha__check { flex:0 0 24px; width:24px; height:24px; border:2px solid #c1c1c1; border-radius:2px; background:#fff; }
.sc-disc-recaptcha__label { flex:1 1 auto; color:#555; font-size:14px; }
.sc-disc-recaptcha__brand { display:flex; flex-direction:column; align-items:center; gap:2px; color:#555; text-align:center; }
.sc-disc-recaptcha__brand i { font-size:20px; color:#1c3aa9; }
.sc-disc-recaptcha__brand small { font-size:10px; line-height:1.2; }
.sc-disc-recaptcha__brand em { font-style:normal; font-size:8px; }
.sc-disc-submit {
  width:100%; min-height:36px; padding:7px 12px; border:0; border-radius:32px; cursor:pointer;
  background:var(--sc-primary); color:var(--sc-white);
  font-family:var(--sc-font); font-weight:var(--sc-fw-bold); font-size:14px; line-height:1.2;
}
.sc-disc-submit:hover { background-image:linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)); }

/* ===== 下部追従CTA (Fixed Button 2095:34004) =====
 * #123 コメント対応: Hub 6ページの .sc-{p}-fixedcta と同仕様に統一。
 * PC=画面右下(right:8px/bottom:16px) / SP=下中央(@media 側で位置のみ上書き)。
 * hover は白文字を維持し lighten オーバーレイ(テーマ既定のリンク hover 色に落ちない)。 */
.sc-disc-fab {
  position:fixed; z-index:100;
  right:8px; left:auto; bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:36px; padding:7px 24px; border-radius:var(--sc-radius-pill);
  background:var(--sc-primary); color:var(--sc-white); text-decoration:none;
  font-family:var(--sc-font); font-weight:var(--sc-fw-bold); font-size:14px; line-height:1.2;
  white-space:nowrap; box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.sc-disc-fab:hover { color:var(--sc-white); background-image:linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.10)); }
.sc-disc-fab--hide { opacity:0; visibility:hidden; pointer-events:none; transform:translateY(12px); }
.sc-disc-fab__label { padding:0; }
.sc-disc-fab__icon { display:inline-flex; }
.sc-disc-fab__icon i { font-size:20px; }

/* ============================================================
 * SP (≤1024px) — Figma 1350:20415 相当。縦積み・カードは幅308px。
 * ============================================================ */
@media (max-width:1024px) {
  /* ---- Hero (Title Area / H1-SP 32・18-Regular・py48) ---- */
  .sc-disc-hero { min-height:240px; padding:32px 16px; } /* #104: SP 実高 240px・対称 padding */
  .sc-disc-hero__title { font-size:32px; }
  .sc-disc-hero__sub { font-size:18px; }

  /* ---- Section shell (padding40 / header↔carousel gap16) ---- */
  /* SP は詳細ページ(--sc-*-margin:16px)に合わせて左右16px に戻す(PC の 80px を上書き) */
  .sc-disc-sec__inner { gap:16px; padding:40px 16px; }
  .elementor-element.sc-disc-sec__inner { padding-left:16px !important; padding-right:16px !important; }
  /* 装飾アイコン(GitHub #29: SP top32/left-8・80px) */
  /* #101: Figma SP(1350:20433 実測)はアイコンが右上・右端から8pxはみ出し(x=321/幅80/画面393)。
   * 内容ボックス(左右16px margin)基準で right:-24px。旧 left:-8px(左上)は Figma と逆だった。 */
  .sc-disc-sec__icon { top:32px; right:-24px; left:auto; width:80px; height:80px; }

  /* Header: title → desc → stats → Explore の縦積み(Figma SP順) */
  .sc-disc-sec__head {
    grid-template-columns:1fr;
    grid-template-areas:"title" "desc" "stats" "btn";
    row-gap:16px;
  }
  .sc-disc-sec__title { font-size:32px; max-width:none; }
  .sc-disc-sec__desc { max-width:none; }

  /* CardProductType SP(#99 共通): solid bg・padding8・gap2 の等分3列(Figma 準拠) */
  .sc-disc-ptype { order:2; width:100%; height:auto; gap:2px; padding:8px 0; background:var(--sc-bg-bright); }
  .sc-disc-ptype__item { flex:1 1 0; width:auto; gap:2px; height:64px; }

  /* Carousel: SP はナビをカード左右端に縦中央でオーバーレイ(Figma SP) */
  .sc-disc-car { position:relative; }
  .sc-disc-car__nav {
    position:absolute; top:50%; left:0; right:0; transform:translateY(-50%);
    justify-content:space-between; gap:0; z-index:3; pointer-events:none;
  }
  .sc-disc-car__btn { pointer-events:auto; box-shadow:0 2px 8px rgba(0,0,0,.35); }

  /* カード幅 308(Figma SP CardClass) */
  .sc-disc-card { flex:0 0 308px; width:308px; }

  /* #110 SP: centered/peek。トラックをセクション左右padding(16px)の外=画面幅まで
   * 拡張し、両端に (100vw-308)/2 の padding を確保して中央カードが左右均等余白で
   * スナップ + 両隣が画面端に peek する(Figma 1350:20415: 余白42.5px / peek29.5px @393px)。
   * gap は Figma 実測の 13px。scroll-snap-align:center は base 側で付与済み。 */
  .sc-disc-track {
    width:calc(100% + 32px); margin-inline:-16px;
    padding-inline:calc((100vw - 308px) / 2);
    scroll-padding-inline:calc((100vw - 308px) / 2);
    gap:13px;
  }

  /* Subscription banner は全幅 */
  .sc-disc-subs { max-width:none; }

  /* ---- Our Facility 縦積み ---- */
  .sc-disc-facility__inner { flex-direction:column; padding:32px 16px; }
  .sc-disc-facility__title { font-size:32px; }
  .sc-disc-facility__desc { font-size:16px; }
  .sc-disc-facility__shot { flex:none; width:100%; height:auto; aspect-ratio:525/297; }

  /* ---- Speak to our Team (SP: px23 / py32 / gap24・input48・submit48/18) ---- */
  /* padding-bottom は追従CTA(sc-disc-fab)の被り回避のため広めに確保 */
  .sc-disc-cta__inner { max-width:none; padding:32px 23px 96px; gap:24px; }
  .sc-disc-cta__title { font-size:32px; }
  .sc-disc-field { gap:4px; }
  .sc-disc-input { min-height:48px; }
  .sc-disc-recaptcha { align-self:center; }
  .sc-disc-submit { min-height:48px; font-size:18px; }

  /* ---- 追従CTA: SP は画面下中央に固定(位置のみ上書き。見た目は base 側で統一済み) ---- */
  .sc-disc-fab {
    left:50%; right:auto; bottom:calc(12px + env(safe-area-inset-bottom,0px));
    transform:translateX(-50%); max-width:calc(100% - 32px);
  }
  .sc-disc-fab--hide { transform:translateX(-50%) translateY(12px); }
}

/* #110 fix: tablet(768–1024px) は centered/peek のブリード＋(100vw-308)/2 の過大 padding を
 * 打ち消し、PC と同じ通常スクロールカルーセルに戻す(左空白の解消)。中央+peek は ≤767px のみ。 */
@media (min-width: 768px) and (max-width: 1024px) {
  .sc-disc-track {
    width:auto; margin-inline:0;
    padding-inline:0; scroll-padding-inline:0; gap:16px;
  }
}