/* ==========================================================================
   tobidase.jp サイト層のスタイル（デザインシステムの上に載せる薄い層）
   ・/ds/tobidase-ds.css の後に読み込むこと
   ・ここに書くのは「DSに無くてサイト側で要るもの」だけ。DSの値は上書きしない
   ・[DS-GAP] は本来デザインシステム側に入れるべきもの。ds/ へ還元するまでの暫定
   ========================================================================== */

body {
  margin: 0;
  background: #fff;
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-feature-settings: 'palt' 1;
}
a { color: var(--color-brand-secondary); }
a:hover { color: var(--color-text-body); }
img { max-width: 100%; }

/* --- ヘッダー ------------------------------------------------------------- */
/* [DS-GAP] 実CSSのロゴは76px高。ノートPC(実効約700px)では縦を圧迫するので48pxへ。
   画像が40pxまで縮んでもタップ領域は44pxを割らせない。 */
.tds-header__logo { height: 48px; }
/* 540px以下でロゴが40pxに縮むと横も40pxになる。指の当たり判定は縦横とも44pxを割らせない */
.tds-header__logo-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.tds-header__nav .tds-navlink,
.tds-footer__nav .tds-navlink { flex: none; white-space: nowrap; }
.tds-navlink__label { white-space: nowrap; }
@media (min-width: 841px) { .tds-header__nav { gap: var(--space-16); } }

/* [DS-GAP] ヘッダー用の小型CTAがDSに無い。Landing の PillButton は最小 277x60 で
   ヘッダーに入らず、Content の Button(角丸4px) を使うと言語混在＝規約違反になる。 */
.tbd-hd-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px;
  border-radius: var(--r-pill);
  color: #fff;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 900; letter-spacing: 1px;
  text-decoration: none; white-space: nowrap;
  box-shadow: var(--shadow-pill);
}
.tbd-hd-cta:hover { color: #fff; opacity: .7; }
.tbd-hd-cta--primary { background: var(--color-brand-pill-pink); }
.tbd-hd-cta--secondary { background: var(--color-brand-pill-dark); }

@media (max-width: 540px) {
  .tds-header__logo { height: 40px; }
  /* [DS-GAP] DS は 540px 以下で CTA を両方消す（`.tds-header__actions > *:not(.tds-header__menu)`）。
     ヘッダーは fixed なので、それだと相談導線が全ページのスマホ表示から消える。主CTA1本だけ戻す。
     2本残すと 390px で横にはみ出す（実測）ので secondary は消したまま。 */
  .tds-header__actions > .tbd-hd-cta--primary { display: inline-flex; }
  .tbd-hd-cta--secondary { display: none !important; }
}

/* [DS-GAP] DSの MenuDialog は React 側で出し分ける前提なので閉じた状態を持たない。
   静的HTMLでは hidden 属性で閉じるが、`.tds-menu-dialog{display:flex}` が
   UA の `[hidden]{display:none}` に勝ってしまい、全ページでメニューが開きっぱなしになる
   （画面全体を覆うのでページが操作不能になる）。閉じた状態をここで定義する。 */
.tds-menu-dialog[hidden] { display: none; }

/* --- フッター ------------------------------------------------------------- */
.tds-footer__inner { max-width: var(--container-page); margin: 0 auto; }
.tds-footer__logo { object-fit: contain; }
@media (min-width: 841px) {
  .tds-footer__top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-32); }
  .tds-footer__nav { justify-content: center; }
}

/* --- [DS-GAP] タップ領域 44px の下限 --------------------------------------
   実測: NavLink 34px / footer legal 15px / RadioField のラベル 41px。
   いずれもDS側の定義に min-height が無い。指の当たり判定だけ広げ、
   見た目（文字サイズ・余白・区切り）はDSの値のままにする。 */
.tds-navlink,
.tds-menu-dialog__link,
.tds-footer__legal-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.tds-radio-field__item { min-height: 44px; }
/* LoadMoreButton は DS で 40px 高（角丸20pxで完全な丸になる寸法）。
   タップ領域だけ44pxへ広げ、丸に見えるよう角丸も半分に合わせる。 */
.tds-loadmore__button { height: 44px; border-radius: 22px; }

/* [DS-GAP] 540px以下でフッターの法務リンクとコピーライトが 11px まで落ちる。
   本文の最小サイズを 12px にそろえる（デスクトップ時の DS 値と同じ）。 */
.tds-footer__legal-link,
.tds-footer__copyright { font-size: 12px; }

/* [DS-GAP] PillButton のラベルが content-box のまま width:100% + 左右79px の padding を
   持つので、277px のピルから右へ79pxはみ出し、height:60px にも上下54pxが足されて
   114px の巨大なボタンになる（実測）。border-box に直すだけで寸法はDSの値のまま。 */
.tds-pill__label { box-sizing: border-box; }

/* [DS-GAP] GradientHeading の hero は 64px 固定で、841px 以上では縮まない。
   ノートPCの縦（実効700px前後）でファーストビューを食い潰すので clamp にする。 */
.tds-gradient-heading { font-size: clamp(28px, min(5.6vw, 7.2vh), 64px); }

/* 固定ヘッダーぶんアンカーの着地点を下げる（/#feature・/#service 等） */
section[id] { scroll-margin-top: calc(var(--tbd-header-h, 80px) + 16px); }

/* --- ページ共通のちいさな部品 --------------------------------------------- */
.tbd-check {
  display: flex; align-items: center; gap: var(--space-8);
  font-size: 14px; color: var(--color-text-muted);
}
.tbd-check .tds-icon { font-size: 20px; }

.tbd-steps {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.tbd-steps li { display: flex; flex-direction: column; gap: var(--space-8); }
.tbd-steps__no { font-size: 14px; font-weight: 700; color: var(--color-text-muted); }
.tbd-steps__t { font-size: 16px; font-weight: 700; color: var(--color-text-strong); }
.tbd-steps__d { font-size: 14px; line-height: 1.8; color: var(--color-text-muted); }

/* 本文セクションの共通の器。コンテナ幅は1種類に統一する（現行サイトは21〜24種混在） */
.tbd-sec { padding: clamp(40px, 5vw, 64px) clamp(20px, 5vw, 100px); }
.tbd-sec--flush-top { padding-top: 0; }
.tbd-sec--fill { background: var(--color-fill); }
.tbd-page { max-width: var(--container-page); margin: 0 auto; }
.tbd-narrow { max-width: var(--container-narrow); margin: 0 auto; }
.tbd-stack { display: flex; flex-direction: column; gap: var(--space-16); }
.tbd-h2 { margin: 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: 900; color: var(--color-text-strong); }
.tbd-lead { margin: 0; font-size: 16px; line-height: 1.9; color: var(--color-text-body); }
.tbd-note { margin: 0; font-size: 14px; line-height: 1.8; color: var(--color-text-muted); }

.tbd-grid { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.tbd-grid--stat { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(16px, 2vw, 32px); }
.tbd-grid--svc { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tbd-grid--split { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 64px); align-items: start; }

/* 数値の見せ方（実績の桁） */
.tbd-num { display: flex; flex-direction: column; gap: var(--space-4); }
.tbd-num__v { font-size: clamp(26px, 3vw, 38px); font-weight: 900; line-height: 1.2; color: var(--color-text-strong); }
.tbd-num__l { font-size: 14px; color: var(--color-text-muted); }

/* 受賞歴の行 */
.tbd-award { display: flex; flex-wrap: wrap; gap: var(--space-12); font-size: 16px; color: var(--color-text-body); }
.tbd-award__k { flex: none; min-width: 8em; font-weight: 700; color: var(--color-text-strong); }

/* サービスカード */
.tbd-svc { display: flex; flex-direction: column; gap: var(--space-8); }
.tbd-svc h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--color-text-strong); }
.tbd-svc__p { margin: 0; font-size: 16px; font-weight: 700; color: var(--color-text-body); }
.tbd-svc__d { margin: 0; font-size: 14px; line-height: 1.8; color: var(--color-text-muted); }

/* 定義表（会社情報など） */
.tbd-t { width: 100%; border-collapse: collapse; font-size: 16px; }
.tbd-t th, .tbd-t td { text-align: left; vertical-align: top; padding: var(--space-16) 0; border-bottom: 1px solid var(--color-line); }
.tbd-t th { width: 10em; color: var(--color-text-muted); font-weight: 700; }
.tbd-t td { color: var(--color-text-body); }
@media (max-width: 540px) {
  .tbd-t th, .tbd-t td { display: block; width: auto; border: 0; padding: 0; }
  .tbd-t th { padding-top: var(--space-16); }
  .tbd-t td { padding-bottom: var(--space-16); border-bottom: 1px solid var(--color-line); }
}

/* カード・表の中の「単独で置かれたリンク」はタップ領域を44pxにする。
   本文中のインラインリンク（文章の一部）は対象外（WCAG 2.5.8 も除外している）。 */
.tbd-svc a,
.tbd-t td a,
.tbd-side > a,
.tbd-linkrow a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; }
/* サイドバーの「もっと見る」系リンク。ボタンにするとCTAが3本目に見えるのでテキストリンクにする */
.tbd-side > a { align-self: flex-start; }

/* [DS-GAP] 下層ヒーローは高さ280px固定＋overflow:hidden。タグ名や
   ランディング見出しが2行になると文字が切れるので、280pxは下限として扱う。 */
.tds-page-hero { height: auto; min-height: 280px; }
@media (max-width: 540px) { .tds-page-hero { min-height: 200px; } }

/* [DS-GAP] 記事ヘッダーのタグ列とメタ行は DS では nowrap。タグが多い記事・
   長い著者名で 390px 幅を横にはみ出すので、折り返しだけ許可する。 */
.tds-article-meta__tags { flex-wrap: wrap; row-gap: var(--space-8); }
.tds-article-meta__row { flex-wrap: wrap; row-gap: var(--space-8); }

/* --- 一覧ページ（ブログ／実績／タグ／検索）の骨格 --------------------------
   本体＋サイドバーの2カラム。サイドバーが無いページは .tbd-cols を使わない。 */
.tbd-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.tbd-colmain { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 44px); min-width: 0; }
.tbd-side { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); min-width: 0; }
@media (max-width: 840px) { .tbd-cols { grid-template-columns: minmax(0, 1fr); } }

/* カードのグリッド。ブログ・実績・タグ・検索で同じ器を使う */
.tbd-cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(24px, 3vw, 36px);
}
/* DS の .tds-card__thumb は縦横比を固定しないので、素材の比率がばらばらだと
   カードの高さが揃わない。16:9 に統一する。
   ★ DS/モックの指定は 1:1 だが、実データのカバーはほぼ 16:9 でタイトル文字が
     焼き込まれており、1:1 に切ると文字が左右で切れて読めなくなる（実画面で確認）。
   （DS側の 840px 以下の height:180px / 540px 以下の object-fit:fill も打ち消す） */
.tbd-cardgrid .tds-card__thumb { aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
/* タグ名が長いカードで横にはみ出すのを防ぐ（DSは nowrap で、実サイトのタグは短い） */
.tbd-cardgrid .tds-card__tags { flex-wrap: wrap; row-gap: var(--space-8); }

/* 空の一覧（該当0件）のときの案内 */
.tbd-empty { margin: 0; font-size: 16px; line-height: 1.9; color: var(--color-text-muted); }

/* タグの絞り込み列 */
.tbd-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }

/* サイドバーの見出しとリスト */
.tbd-sidehead { margin: 0; font-size: 20px; font-weight: 900; color: var(--color-text-strong); }
.tbd-sidelist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-16); }
.tbd-sideitem {
  display: grid; grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-12); align-items: start;
  text-decoration: none; color: inherit;
  transition: opacity var(--dur) var(--ease);
}
.tbd-sideitem:hover { opacity: 0.5; color: inherit; }
/* height:auto を必ず添える。img の height 属性（CLS対策で実寸を入れている）が
   プレゼンテーション属性として効き、aspect-ratio が無視されて素材の実寸まで伸びる。 */
.tbd-sideitem img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-media); }
.tbd-sideitem__t { font-size: 13px; line-height: 1.6; color: var(--color-text-strong); }

/* [DS-GAP] サイドバーのサービス導線。DSにサイドバー用のカードが無いので新設した。
   ナビゲーション目的なので tds-btn / tds-pill は使わない（3本目のCTAに見えるため）。 */
.tbd-sidesvc { display: flex; flex-direction: column; gap: var(--space-16); }
.tbd-svlink {
  display: flex; flex-direction: column; gap: var(--space-8);
  padding: 10px 10px 14px; border-radius: var(--r-media);
  background: var(--color-surface-cream);
  text-decoration: none; color: inherit;
  transition: opacity var(--dur) var(--ease);
}
.tbd-svlink:hover { opacity: 0.72; color: inherit; }
.tbd-svlink img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-media); }
.tbd-svlink__body { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
.tbd-svlink__t { font-size: 15px; font-weight: 900; line-height: 1.5; color: var(--color-on-cream); }
.tbd-svlink__d { font-size: 12px; line-height: 1.7; color: var(--color-on-cream); opacity: 0.78; }
/* 「20万円〜」が 20万／円〜 で折れないようにする */
.tbd-svlink__p { white-space: nowrap; font-weight: 700; }

/* [DS-GAP] 本文の埋め込み（YouTube等）。microCMS側が固定幅なので比率だけ引き継いで器に収める */
.tbd-embed { display: block; width: 100%; margin-inline: auto; }
.tbd-embed iframe { display: block; width: 100%; height: 100%; border: 0; }

/* 記事・事例ページのカバー画像。素材の比率をそのまま出す（切らない） */
.tbd-articlecover { display: block; width: 100%; height: auto; border-radius: var(--r-media); background: var(--color-fill); }

/* --- 規約系ページ（プライバシーポリシー） ---------------------------------- */
.tbd-legal { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 40px); }
.tbd-legal section { display: flex; flex-direction: column; gap: var(--space-12); }
.tbd-legal h2 { margin: 0; font-size: clamp(18px, 2vw, 22px); font-weight: 900; line-height: 1.5; color: var(--color-text-strong); }
.tbd-legal h3 { margin: var(--space-8) 0 0; font-size: 16px; font-weight: 700; color: var(--color-text-strong); }
.tbd-legal p { margin: 0; font-size: 16px; line-height: 1.9; color: var(--color-text-body); }
.tbd-legal ul { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--space-8); }
.tbd-legal li { font-size: 16px; line-height: 1.9; color: var(--color-text-body); }

/* --- 記事・事例ページ ------------------------------------------------------ */
.tbd-prose { max-width: var(--container-prose); margin: 0 auto; }
.tbd-wide { max-width: var(--container-wide); margin: 0 auto; }
/* 関連記事の並び */
.tbd-relatedlist { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
/* 執筆・監修の行（addArticleAttribution が挿入する） */
.tbd-article-author { margin: var(--space-8) 0 0; font-size: 14px; line-height: 1.7; color: var(--color-text-muted); }

/* ==========================================================================
   トップページ（/）
   Claude Design「トップページ.dc.html」を静的HTMLに落とした分のレイアウト。
   セクション単位の組み方なのでサイト層に置く（DSへ戻すべきものだけ [DS-GAP]）。
   ========================================================================== */

/* セクションの器。トップは背景色がセクションごとに変わるので padding は器側に持たせる */
.tbd-hsec { padding: clamp(52px, 6vw, 88px) clamp(20px, 5vw, 100px); }
.tbd-hsec--dark { background: var(--color-inverse-bg); }
.tbd-hsec--cream { background: var(--color-surface-cream); }
.tbd-hsec--fill { background: var(--color-fill); }
.tbd-hsec--white { background: #fff; }
.tbd-hin { max-width: var(--container-page); margin: 0 auto; display: flex; flex-direction: column; gap: clamp(28px, 3vw, 44px); }
.tbd-hhead { display: flex; flex-direction: column; gap: var(--space-8); }
.tbd-hh2 { margin: 0; font-size: clamp(24px, 3.2vw, 40px); font-weight: 900; letter-spacing: 2px; line-height: 1.35; color: var(--color-text-display); }
.tbd-heyebrow { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: 5px; color: var(--color-text-faint); }
.tbd-hlead { margin: var(--space-8) 0 0; font-size: 14px; font-weight: 500; line-height: 1.9; letter-spacing: 1px; color: var(--color-text-display); text-wrap: pretty; }
.tbd-hnote { margin: 0; max-width: 52em; font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1px; color: var(--color-text-faint); text-wrap: pretty; }
/* 反転面・クリーム面での見出しの色替え */
.tbd-hsec--dark .tbd-hh2 { color: var(--color-inverse-ink); }
.tbd-hsec--dark .tbd-heyebrow, .tbd-hsec--dark .tbd-hlead { color: var(--color-inverse-ink-faint); }
.tbd-hsec--cream .tbd-hh2, .tbd-hsec--cream .tbd-heyebrow, .tbd-hsec--cream .tbd-hlead { color: var(--color-on-cream); }
.tbd-hsec--fill .tbd-heyebrow { color: var(--color-text-muted); }

/* 01 ファーストビュー ------------------------------------------------------ */
.tbd-hero { background: var(--color-inverse-bg); }
.tbd-hero__stage {
  position: relative; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  width: 100%; min-height: clamp(400px, calc(86vh - 190px), 620px);
  padding: clamp(28px, 4vw, 56px) clamp(20px, 5vw, 100px);
  overflow: hidden;
}
/* 背景は img。CSS背景だとスマホにも1920px版が落ちるので srcset で出し分ける */
.tbd-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tbd-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,16,16,.6) 0%, rgba(16,16,16,.34) 46%, rgba(16,16,16,.1) 100%); }
.tbd-hero__inner {
  position: relative; width: 100%; max-width: var(--container-page); margin: 0 auto;
  display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 20px);
  animation: tbd-fade .7s var(--ease) both;
}
.tbd-hero__h1 { margin: 0; max-width: 24em; color: var(--color-inverse-ink); font-size: clamp(18px, 2.1vw, 30px); font-weight: 900; line-height: 1.45; letter-spacing: 1px; text-wrap: pretty; }
.tbd-hero__p { margin: 0; max-width: 34em; color: var(--color-inverse-ink); font-size: clamp(14px, 1.1vw, 16px); font-weight: 300; line-height: 1.85; letter-spacing: 1px; text-wrap: pretty; }
.tbd-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-20); padding-top: clamp(6px, 1vw, 14px); }
.tbd-hero__stats { background: var(--color-inverse-bg-strong); padding: clamp(18px, 2vw, 26px) clamp(20px, 5vw, 100px); }
.tbd-hero__statgrid { max-width: var(--container-page); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: clamp(12px, 2vw, 32px); }
.tbd-hstat { display: flex; flex-direction: column; gap: 2px; }
.tbd-hstat__v { color: var(--color-inverse-ink); font-size: clamp(22px, 2.4vw, 34px); font-weight: 900; letter-spacing: 1px; line-height: 1.2; }
.tbd-hstat__l { color: var(--color-inverse-ink-faint); font-size: 12px; font-weight: 500; letter-spacing: 2px; }
@keyframes tbd-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tbd-hero__inner { animation: none; } }

/* 02 課題 ------------------------------------------------------------------ */
.tbd-grid--auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(20px, 2.5vw, 40px); }
.tbd-prob {
  display: flex; flex-direction: column; gap: var(--space-12);
  padding: clamp(26px, 2.6vw, 36px); border-radius: var(--r-panel);
  background-color: var(--color-surface-cream);
  background-size: cover; background-position: 50% 45%; background-repeat: no-repeat;
}
.tbd-prob__no { font-size: 12px; font-weight: 900; letter-spacing: 4px; color: var(--color-on-cream); }
.tbd-prob h3 { margin: 0; font-size: clamp(18px, 1.7vw, 22px); font-weight: 900; letter-spacing: 1px; color: var(--color-on-cream); }
.tbd-prob ul { margin: 0; padding-left: 1.15em; display: flex; flex-direction: column; gap: var(--space-8); }
.tbd-prob li { font-size: 14px; font-weight: 500; line-height: 1.85; letter-spacing: 1px; color: var(--color-on-cream); text-wrap: pretty; }

/* 03 メリット -------------------------------------------------------------- */
.tbd-benefit .tbd-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.tbd-bcard { display: flex; flex-direction: column; gap: 18px; padding: clamp(26px, 2.6vw, 36px); background: #fff; border-radius: var(--r-panel); box-shadow: var(--shadow-glow); }
.tbd-bcard__top { display: flex; align-items: center; gap: 14px; }
.tbd-bcard__ico { display: flex; align-items: center; justify-content: center; flex: none; width: 64px; height: 64px; border-radius: var(--r-badge); background: var(--color-surface-cream); }
.tbd-bcard__ico img { display: block; width: 34px; height: auto; }
.tbd-bcard__no { font-size: 12px; font-weight: 900; letter-spacing: 3px; color: var(--color-text-faint); }
.tbd-bcard p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.85; letter-spacing: 1px; color: var(--color-text-display); text-wrap: pretty; }
.tbd-bcard .tds-highlight { max-width: 100%; }
.tbd-hl-s { font-size: clamp(18px, 1.7vw, 22px); font-weight: 900; letter-spacing: 1px; color: var(--color-text-display); }
.tbd-hl-l { font-size: clamp(22px, 2.1vw, 28px); font-weight: 900; letter-spacing: 1px; color: #e52671; }
.tbd-benefit__src { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: 1px; }
.tbd-benefit__src a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-on-cream); }

/* 04 活用シーン ------------------------------------------------------------ */
.tbd-scene-panel { padding: clamp(28px, 3.4vw, 52px); border-radius: var(--r-effect); background: #1b1b1b; }
.tbd-scene-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); justify-items: center; }
/* EffectCard は 238px 固定。引き伸ばすと色の面積が増えて重くなるので中央寄せで置く */
.tbd-scene .tds-effect { filter: saturate(.86); }
.tbd-scene .tds-effect__media { width: 72px; margin-top: var(--space-16); }

/* 05 特徴 ------------------------------------------------------------------ */
.tbd-feat { position: relative; overflow: hidden; }
.tbd-feat__bg { position: absolute; inset: 0; background-size: cover; background-position: 50%; }
.tbd-feat__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(14,14,14,.82) 0%, rgba(14,14,14,.55) 45%, rgba(14,14,14,.3) 100%); }
.tbd-feat .tbd-hin { position: relative; }
.tbd-feat__h2 { margin: 0; font-size: clamp(22px, 3vw, 38px); font-weight: 900; letter-spacing: 2px; line-height: 1.4; color: var(--color-inverse-ink); text-wrap: balance; }
.tbd-feat__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(20px, 2.5vw, 40px); align-items: start; }
.tbd-feat__left { display: flex; flex-direction: column; gap: clamp(20px, 2vw, 28px); }
.tbd-feat__nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: var(--space-16); }
.tbd-feat__num-v { margin: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; letter-spacing: 1px; color: var(--color-inverse-ink); }
.tbd-feat__num-l { margin: 2px 0 0; font-size: 12px; font-weight: 500; letter-spacing: 2px; color: var(--color-inverse-ink-faint); }
.tbd-awards { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-12); }
.tbd-awards li { display: flex; gap: 14px; align-items: baseline; }
.tbd-awards__k { flex: none; min-width: 5.5em; font-size: 14px; font-weight: 900; letter-spacing: 1px; color: #fad53a; }
.tbd-awards__t { font-size: 14px; font-weight: 500; letter-spacing: 1px; color: var(--color-inverse-ink); }
.tbd-feat__right { display: grid; grid-template-columns: 1fr; gap: var(--space-16); }
.tbd-glasscard { padding: clamp(20px, 2vw, 28px); border-radius: var(--r-glass); background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.1); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.tbd-glasscard h3 { margin: 0 0 var(--space-8); font-size: clamp(17px, 1.6vw, 20px); font-weight: 900; letter-spacing: 1px; color: var(--color-inverse-ink); }
.tbd-glasscard p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1px; color: var(--color-inverse-ink); text-wrap: pretty; }

/* 06 サービス -------------------------------------------------------------- */
.tbd-service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.tbd-svccard { position: relative; display: flex; flex-direction: column; gap: 14px; padding-bottom: 4px; }
/* height:auto を必ず添える。img の height 属性（CLS対策で実寸を入れている）が
   プレゼンテーション属性として効き、aspect-ratio が無視されて素材の実寸まで伸びる。 */
.tbd-svccard > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-media-lg); background: var(--color-fill); }
.tbd-svccard h3 { margin: 0; font-size: clamp(17px, 1.6vw, 21px); font-weight: 900; letter-spacing: 1px; color: var(--color-text-display); }
.tbd-svccard p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1px; color: var(--color-text-display); text-wrap: pretty; }
/* [DS-GAP] サムネと見出しもリンクにする。<a> を入れ子にすると不正なHTMLになるので、
   「詳しく見る」のリンクを擬似要素でカード全面まで広げて1本の <a> のまま当たり判定を広げる。 */
.tbd-svccard__link::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-media-lg); }
.tbd-svccard:hover > img { opacity: 0.82; transition: opacity var(--dur) var(--ease); }
/* 一覧の中の単独リンク。ボタンにするとCTAが3本目に見えるのでテキストのままタップ領域だけ確保 */
.tbd-morelink { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 900; letter-spacing: 1px; color: var(--color-text-display); }

/* 07 進め方 ---------------------------------------------------------------- */
.tbd-flow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: clamp(18px, 2vw, 28px); }
.tbd-flow { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.tbd-flow-badge { display: flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: 112px; height: 112px; padding: 3px; border-radius: var(--r-badge); background: var(--color-gradient-text); }
.tbd-flow-badge > span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: var(--r-badge); background: #fff; }
.tbd-flow-badge .tds-icon { font-size: 46px; color: var(--color-on-cream); }
.tbd-flow__no { font-size: 12px; font-weight: 900; letter-spacing: 3px; color: var(--color-on-cream); }
.tbd-flow h3 { margin: 0; font-size: clamp(16px, 1.5vw, 19px); font-weight: 900; letter-spacing: 1px; color: var(--color-on-cream); }
.tbd-flow p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1px; color: var(--color-on-cream); }
.tbd-flow-note { margin: 0; display: inline-flex; align-self: flex-start; padding: 14px 22px; border-radius: var(--r-panel); background: var(--color-surface-cream-strong); font-size: 14px; font-weight: 700; line-height: 1.8; letter-spacing: 1px; color: var(--color-on-cream); text-wrap: pretty; }

/* 08 実績紹介 -------------------------------------------------------------- */
.tbd-g-2m { display: grid; gap: clamp(16px, 2vw, 28px); }
/* auto-fill にしてある。auto-fit だと2〜3枚のページでトラックが潰れ、
   9:16のカードが横幅いっぱいまで伸びて異様に縦長になる */
.tbd-g-2m--v { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
.tbd-g-2m--h { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.tbd-wcard { display: flex; flex-direction: column; gap: var(--space-12); }
.tbd-wcard h3 { margin: 0; font-size: 14px; font-weight: 900; line-height: 1.6; letter-spacing: 1px; color: var(--color-text-display); text-wrap: pretty; }
.tbd-wcard__tag { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 1px; color: var(--color-text-faint); }
.tbd-wcard__media { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: var(--r-media-lg); overflow: hidden; background: var(--color-inverse-bg); }
.tbd-wcard__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* カードごと実績ページへのリンク。CTAではないので tds-btn / tds-pill は使わない */
a.tbd-wcard, a.tbd-rallywork { text-decoration: none; color: inherit; transition: opacity var(--dur) var(--ease); }
a.tbd-wcard:hover, a.tbd-rallywork:hover { opacity: 0.78; color: inherit; }
.tbd-wcard__still { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-media-lg); background: var(--color-fill); }

/* 09 お客様の声 ------------------------------------------------------------ */
.tbd-voice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(16px, 2vw, 28px); }
.tbd-voice { margin: 0; display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-panel); background: #fff; }
.tbd-voice .tds-icon { align-self: flex-start; font-size: 44px; line-height: 1; color: var(--color-line-quote); transform: rotate(180deg); }
.tbd-voice blockquote { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.9; letter-spacing: 1px; color: var(--color-text-display); text-wrap: pretty; }

/* 10 計測・分析 ------------------------------------------------------------ */
.tbd-report-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.tbd-report { display: flex; flex-direction: column; gap: var(--space-8); padding: clamp(20px, 2vw, 26px); border-radius: var(--r-panel); background: rgba(255,255,255,.07); }
.tbd-report__no { font-size: 12px; font-weight: 900; letter-spacing: 2px; color: var(--color-inverse-ink-faint); }
.tbd-report__t { font-size: clamp(16px, 1.5vw, 19px); font-weight: 900; letter-spacing: 1px; color: var(--color-inverse-ink); }

/* 11 ブログ ---------------------------------------------------------------- */
.tbd-hblog-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-20); }
.tbd-hblog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.tbd-hblog { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; }
.tbd-hblog:hover { color: inherit; opacity: .7; }
.tbd-hblog img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-media-lg); background: var(--color-fill); }
.tbd-hblog__cat { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 2px; color: var(--color-text-faint); }
.tbd-hblog h3 { margin: 0; font-size: clamp(16px, 1.5vw, 19px); font-weight: 900; line-height: 1.65; letter-spacing: 1px; color: var(--color-text-display); text-wrap: pretty; }

/* 12 よくある質問 ---------------------------------------------------------- */
.tbd-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); align-items: start; }
/* DS の FaqAccordion は 880px 固定。2カラムに収めるので器の幅に従わせる */
.tbd-faq .tds-faq { width: 100%; max-width: none; }
/* §9: 本文は16pxと14pxの2段階だけ。DSのFAQ本文は15pxなので寄せる */
.tbd-faq .tds-faq__text { font-size: 14px; }

/* 13 最終CTA --------------------------------------------------------------- */
.tbd-final { position: relative; overflow: hidden; padding: clamp(64px, 7vw, 104px) clamp(20px, 5vw, 100px); }
.tbd-final__bg { position: absolute; inset: 0; background-size: cover; background-position: 50%; }
.tbd-final__scrim { position: absolute; inset: 0; background: rgba(18,18,18,.7); }
.tbd-final__in { position: relative; max-width: var(--container-page); margin: 0 auto; display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); }
.tbd-final h2 { margin: 0; max-width: 26em; font-size: clamp(24px, 3.4vw, 42px); font-weight: 900; letter-spacing: 2px; line-height: 1.4; color: var(--color-inverse-ink); text-wrap: pretty; }
.tbd-final p { margin: 0; max-width: 38em; font-size: 16px; font-weight: 500; line-height: 1.9; letter-spacing: 1px; color: var(--color-inverse-ink-faint); text-wrap: pretty; }
.tbd-final__cta { display: flex; flex-wrap: wrap; gap: var(--space-20); padding-top: var(--space-8); }

/* --- トップページのブレイクポイント --------------------------------------- */
@media (max-width: 840px) {
  .tbd-scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbd-report-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tbd-faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  /* 1列だと縦に伸びすぎるグリッドを2列に */
  .tbd-g-2m--v, .tbd-g-2m--h, .tbd-hblog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* 8枚を縦に積むと長すぎる → アイコン左・見出し右の1行カードに組み替える */
  .tbd-scene-panel { padding: 20px 14px; border-radius: var(--r-media-lg); }
  .tbd-scene-grid { grid-template-columns: 1fr; gap: 10px; }
  .tbd-scene .tds-effect { flex-direction: row; align-items: center; flex-wrap: wrap; column-gap: 14px; padding: 14px 20px; border-radius: var(--r-media-lg); width: 100%; }
  .tbd-scene .tds-effect__media { order: -1; width: 34px; margin: 0; }
  .tbd-scene .tds-effect__title { flex: 1; min-width: 0; text-align: left; font-size: 17px; line-height: 1.4; }
  .tbd-scene .tds-effect__body { flex: 0 0 100%; margin: 4px 0 0 48px; text-align: left; font-size: 13px; }
  /* サービス・進め方は画像／バッジを左に置いた横並びカードに */
  .tbd-service-grid { grid-template-columns: 1fr; gap: var(--space-16); }
  .tbd-svccard { display: grid; grid-template-columns: 136px 1fr; column-gap: 14px; row-gap: 4px; align-items: start; }
  /* 比率は PC と同じ 16/10 のまま。1/1 にすると素材(16:9)の左右が44%落ちて、
     焼き込みのタイトル（「BANANA YAMAMOTO × AR」等）が切れる */
  .tbd-svccard > img { grid-row: 1 / span 3; }
  .tbd-flow-grid { grid-template-columns: 1fr; gap: 12px; }
  .tbd-flow { display: grid; grid-template-columns: 76px 1fr; column-gap: var(--space-16); row-gap: 2px; align-items: center; text-align: left; }
  .tbd-flow > h3, .tbd-flow > p { text-align: left; }
  .tbd-flow-badge { width: 68px; height: 68px; grid-row: 1 / span 3; }
  .tbd-flow-badge .tds-icon { font-size: 30px; }
  /* [DS-GAP] PillButton は 277px 固定。390px 幅では左右の余白と釣り合わないので幅を可変に */
  .tds-pill { width: 100%; max-width: 320px; }
  .tds-pill__label { width: 100%; min-height: 54px; padding: 0 18px; font-size: 17px; white-space: nowrap; }
}

/* ==========================================================================
   サービスページ（/service/ar-effect・/service/webar・/service/stamp-rally）
   3枚とも骨格は同じ。色だけ .tbd-svcpage--* で差し替える。
   アクセント色は EffectCard の8トーン（DS既定）から取っている。
   ========================================================================== */
.tbd-svcpage {
  --svc-a: #ff34b3; --svc-b: #ff009e; --svc-deep: #b00068; --svc-deeper: #75003f;
  --svc-tint: #fff1f8; --svc-ink: #a8006a;
}
/* SNS ARエフェクト = tone 5（ピンク）／WebAR = tone 7（ブルー）／スタンプラリー = tone 3（グリーン） */
.tbd-svcpage--webar { --svc-a: #58c6ff; --svc-b: #00a8ff; --svc-deep: #00618f; --svc-deeper: #003a5c; --svc-tint: #eff7ff; --svc-ink: #00618f; }
.tbd-svcpage--rally { --svc-a: #66ff84; --svc-b: #00a110; --svc-deep: #0a6b1a; --svc-deeper: #04400f; --svc-tint: #effbf1; --svc-ink: #0a6b1a; }

/* GradientHeading をサービス色で塗る。ブランドのピンク固定だと3枚が同じ顔になる。
   明るいヒーローでは白終わりのグラデが地に溶けるので、濃色で締める側を使う。 */
.tbd-svcpage .tds-gradient-heading { background-image: linear-gradient(96deg, var(--svc-b) 0%, var(--svc-deep) 96%); }
.tbd-svhero .tds-gradient-heading { background-image: linear-gradient(96deg, var(--svc-a) 0%, var(--svc-deeper) 92%); font-size: clamp(24px, 3.4vw, 44px); }

/* 01 ヒーロー -------------------------------------------------------------- */
.tbd-svhero { position: relative; box-sizing: border-box; width: 100%; overflow: hidden; padding: clamp(36px, 5vw, 72px) clamp(20px, 5vw, 100px) clamp(28px, 4vw, 56px); background: linear-gradient(180deg, var(--svc-tint) 0%, #fff 100%); }
.tbd-svhero__grid { position: relative; max-width: var(--container-page); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; animation: tbd-fade .7s var(--ease) both; }
.tbd-svhero__col { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 20px); }
.tbd-sveyebrow { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: 5px; color: var(--svc-ink); }
.tbd-svhero__h1 { margin: 0; max-width: 22em; color: var(--color-text-display); font-size: clamp(18px, 2.1vw, 30px); font-weight: 900; line-height: 1.45; letter-spacing: 1px; text-wrap: pretty; }
.tbd-svhero__p { margin: 0; max-width: 30em; color: var(--color-text-display); font-size: clamp(14px, 1.1vw, 16px); font-weight: 500; line-height: 1.9; letter-spacing: 1px; text-wrap: pretty; }
.tbd-svhero__cta { display: flex; flex-wrap: wrap; gap: var(--space-20); padding-top: clamp(6px, 1vw, 14px); }
.tbd-svhero__reel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); align-items: end; }
/* 素材のある枠は video、無い枠は img。どちらも同じタイルとして扱う */
.tbd-svhero__reel > * { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-media-lg); box-shadow: 0 18px 40px rgba(0, 0, 0, .18); background: var(--color-inverse-bg); }
.tbd-svhero__reel > :nth-child(1) { transform: translateY(18px) rotate(-3deg); }
.tbd-svhero__reel > :nth-child(2) { transform: translateY(-14px); }
.tbd-svhero__reel > :nth-child(3) { transform: translateY(18px) rotate(3deg); }
@media (prefers-reduced-motion: reduce) { .tbd-svhero__grid { animation: none; } }

/* ページ内アンカー。DSに無いのでサービスページ用に新設 */
.tbd-anchors { position: sticky; top: var(--tbd-header-h, 80px); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px clamp(20px, 5vw, 100px); background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 2px solid var(--svc-a); }
.tbd-anchors__now { display: inline-flex; align-items: center; min-height: 40px; margin-right: 6px; padding: 0 14px; border-radius: var(--r-pill); background: var(--svc-tint); font-size: 13px; font-weight: 900; letter-spacing: 1px; color: var(--svc-ink); }
.tbd-anchors a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); font-size: 14px; font-weight: 900; letter-spacing: 1px; color: var(--color-text-display); text-decoration: none; }
.tbd-anchors a:hover { background: var(--svc-tint); color: var(--svc-ink); }
/* アンカーバーのぶんだけ着地点を下げる */
@media (min-width: 841px) { .tbd-svcpage section[id] { scroll-margin-top: calc(var(--tbd-header-h, 80px) + 68px); } }
/* スマホ幅ではアンカーバーを出さない。7項目が2行に折れて画面の1/4を占め、本文が読めなくなる */
@media (max-width: 840px) { .tbd-anchors { display: none; } }

/* セクションの器。上辺をゆるく丸めて前のセクションに重ねる */
.tbd-svsec { position: relative; padding: clamp(52px, 6vw, 88px) clamp(20px, 5vw, 100px); }
.tbd-svsec--curve { margin-top: -64px; border-radius: 100% 100% 0 0 / 64px 64px 0 0; padding-top: calc(clamp(52px, 6vw, 88px) + 64px); padding-bottom: calc(clamp(52px, 6vw, 88px) + 64px); }
.tbd-svsec--white { background: #fff; }
.tbd-svsec--tint { background: var(--svc-tint); }
.tbd-svsec--fill { background: var(--color-fill); }
.tbd-svsec--deep { background: linear-gradient(135deg, var(--svc-deep) 0%, var(--svc-deeper) 100%); }
.tbd-svin { max-width: var(--container-page); margin: 0 auto; display: flex; flex-direction: column; gap: clamp(28px, 3vw, 44px); }

/* 中央寄せの見出しブロック */
.tbd-svhead { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-12); }
.tbd-svhead h2 { margin: 0; font-size: clamp(24px, 3.2vw, 40px); font-weight: 900; letter-spacing: 2px; line-height: 1.35; color: var(--color-text-display); }
.tbd-svhead__rule { width: 56px; height: 3px; border-radius: var(--r-pill); background: var(--svc-b); }
.tbd-svsec--deep .tbd-svhead h2 { color: var(--color-inverse-ink); }
.tbd-svsec--deep .tbd-sveyebrow { color: rgba(255, 255, 255, .84); }
.tbd-svsec--deep .tbd-svhead__rule { background: #fff; }
.tbd-svsec--fill .tbd-sveyebrow { color: var(--color-text-muted); }
.tbd-svlead { margin: var(--space-8) 0 0; max-width: 40em; font-size: 16px; font-weight: 500; line-height: 1.95; letter-spacing: 1px; color: var(--color-text-display); text-wrap: pretty; }

/* 02 概要 ------------------------------------------------------------------ */
.tbd-svabout { padding: clamp(52px, 6vw, 88px) 0 64px; background: #fff; }
.tbd-svabout__head { max-width: var(--container-page); margin: 0 auto; padding: 0 clamp(20px, 5vw, 100px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
/* 実績の数字。全幅の濃い帯で受ける */
.tbd-svstats { margin-top: clamp(36px, 4vw, 56px); padding: clamp(32px, 4vw, 56px) clamp(20px, 5vw, 100px); background: linear-gradient(112deg, var(--svc-deeper) 0%, var(--svc-deep) 100%); }
.tbd-svstats__grid { max-width: var(--container-page); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: clamp(20px, 3vw, 40px); }
.tbd-svstat { display: flex; flex-direction: column; gap: var(--space-4); }
.tbd-svstat__v { font-size: clamp(24px, 2.8vw, 44px); font-weight: 900; letter-spacing: 1px; line-height: 1.05; color: #fff; }
.tbd-svstat__l { font-size: 12px; font-weight: 900; letter-spacing: 3px; color: rgba(255, 255, 255, .86); }
.tbd-svpoints { max-width: var(--container-page); margin: 0 auto; padding: clamp(40px, 5vw, 72px) clamp(20px, 5vw, 100px) clamp(52px, 6vw, 88px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: clamp(24px, 3vw, 48px); }
.tbd-svpoint { display: flex; flex-direction: column; gap: 10px; padding-top: var(--space-20); border-top: 3px solid var(--svc-b); }
.tbd-svpoint__no { font-size: 12px; font-weight: 900; letter-spacing: 4px; color: var(--svc-ink); }
.tbd-svpoint h3 { margin: 0; font-size: clamp(17px, 1.6vw, 20px); font-weight: 900; letter-spacing: 1px; line-height: 1.5; color: var(--color-text-display); }
.tbd-svpoint p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.85; letter-spacing: 1px; color: var(--color-text-display); text-wrap: pretty; }

/* 03 実績・作例（.tbd-wcard / .tbd-g-2m はトップページと共通） --------------- */
.tbd-svcpage .tbd-wcard__tag { color: var(--color-text-display); }

/* 04 特徴 ------------------------------------------------------------------ */
.tbd-svfeat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.tbd-svfeat article { display: flex; flex-direction: column; gap: var(--space-12); padding: clamp(24px, 2.4vw, 34px); border-radius: var(--r-panel); background: var(--svc-tint); }
.tbd-svfeat .tds-icon { font-size: 36px; color: var(--svc-ink); }
.tbd-svfeat h3 { margin: 0; font-size: clamp(17px, 1.6vw, 20px); font-weight: 900; letter-spacing: 1px; color: var(--color-text-display); }
.tbd-svfeat p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.85; letter-spacing: 1px; color: var(--color-text-display); text-wrap: pretty; }

/* 05 料金 ------------------------------------------------------------------ */
.tbd-svprice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(24px, 3vw, 48px); align-items: start; }
.tbd-svprice__card { display: flex; flex-direction: column; gap: 10px; padding: clamp(26px, 3vw, 40px); border-radius: var(--r-glass); background: rgba(255, 255, 255, .1); border: 2px solid rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.tbd-svprice__label { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: 4px; color: rgba(255, 255, 255, .84); }
.tbd-svprice__amount { margin: 0; display: flex; align-items: baseline; gap: var(--space-8); }
.tbd-svprice__amount b { font-size: clamp(34px, 4vw, 54px); font-weight: 900; letter-spacing: 1px; color: var(--color-inverse-ink); }
.tbd-svprice__amount span { font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, .84); }
.tbd-svprice__card p:last-child { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.85; letter-spacing: 1px; color: rgba(255, 255, 255, .84); text-wrap: pretty; }
.tbd-svincl { display: flex; flex-direction: column; gap: 14px; }
.tbd-svincl h3 { margin: 0; font-size: clamp(17px, 1.6vw, 20px); font-weight: 900; letter-spacing: 1px; color: var(--color-inverse-ink); }
.tbd-svincl ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tbd-svincl li { display: flex; gap: var(--space-12); align-items: flex-start; font-size: 14px; font-weight: 500; line-height: 1.7; letter-spacing: 1px; color: var(--color-inverse-ink); }
.tbd-svincl li .tds-icon { flex: none; font-size: 20px; color: #fad53a; }
.tbd-svincl > p { margin: var(--space-8) 0 0; font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1px; color: rgba(255, 255, 255, .84); text-wrap: pretty; }

/* 06 制作の流れ（.tbd-flow-* はトップページと共通。色だけ差し替える） -------- */
.tbd-svcpage .tbd-flow-badge { background: linear-gradient(112.8deg, var(--svc-a), var(--svc-b)); }
.tbd-svcpage .tbd-flow-badge .tds-icon { color: var(--svc-ink); }
.tbd-svcpage .tbd-flow__no { color: var(--svc-ink); }
.tbd-svcpage .tbd-flow h3, .tbd-svcpage .tbd-flow p { color: var(--color-text-display); }
.tbd-svcpage .tbd-flow-note { color: var(--color-text-display); }

/* 07 組み合わせられる施策 -------------------------------------------------- */
.tbd-cross4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.tbd-crosscard { display: flex; flex-direction: column; gap: var(--space-12); text-decoration: none; color: inherit; }
.tbd-crosscard:hover { color: inherit; opacity: .7; }
.tbd-crosscard img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-media-lg); background: var(--color-fill); }
.tbd-crosscard h3 { margin: 0; font-size: clamp(17px, 1.6vw, 20px); font-weight: 900; letter-spacing: 1px; color: var(--color-text-display); }
.tbd-crosscard p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1px; color: var(--color-text-display); text-wrap: pretty; }

/* 09 最終CTA（.tbd-final はトップページと共通。暗幕だけ斜めのグラデにする） */
.tbd-final__scrim--diag { background: linear-gradient(100deg, rgba(14,14,14,.82) 0%, rgba(14,14,14,.55) 45%, rgba(14,14,14,.3) 100%); }

/* --- WebAR ページ固有 ------------------------------------------------------
   ヒーローが濃色・下辺を丸める形で、見出しブロックも左の罫で受ける形になる。 */
.tbd-svhero--dark { padding: clamp(44px, 5.5vw, 88px) clamp(20px, 5vw, 100px) clamp(72px, 8vw, 128px); border-radius: 0 0 100% 100% / 0 0 72px 72px; background: linear-gradient(112deg, var(--svc-deeper) 0%, var(--svc-deep) 42%, var(--svc-b) 100%); }
.tbd-svhero--dark .tbd-svhero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.tbd-svhero--dark .tbd-svhero__col { gap: clamp(14px, 1.6vw, 22px); }
.tbd-svhero--dark .tbd-sveyebrow { color: rgba(255, 255, 255, .78); }
.tbd-svhero--dark .tbd-svhero__h1 { max-width: 15em; color: #fff; font-size: clamp(28px, 3.8vw, 52px); line-height: 1.4; letter-spacing: 2px; }
.tbd-svhero--dark .tbd-svhero__p { color: rgba(255, 255, 255, .9); font-size: clamp(14px, 1.2vw, 17px); line-height: 1.95; }
.tbd-svhero--dark .tbd-svhero__p--sub { color: rgba(255, 255, 255, .78); font-size: clamp(13px, 1.05vw, 15px); line-height: 1.9; }
.tbd-svorb { position: absolute; border-radius: 50%; aspect-ratio: 1; filter: blur(46px); }
.tbd-svorb--1 { top: -8%; right: 14%; width: min(38vw, 420px); background: radial-gradient(circle at 40% 40%, rgba(88,198,255,.85), rgba(0,168,255,0) 68%); }
.tbd-svorb--2 { bottom: -14%; right: -4%; width: min(30vw, 340px); filter: blur(52px); background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.5), rgba(255,255,255,0) 70%); }
.tbd-svorb--3 { top: 38%; left: 44%; width: min(20vw, 220px); filter: blur(44px); background: radial-gradient(circle at 50% 50%, rgba(0,58,92,.9), rgba(0,58,92,0) 70%); }
/* [DS-GAP] 濃色ヒーローの地紋。端末から広がる同心円と、左上だけ見える方眼を薄く重ねる */
.tbd-svrings, .tbd-svgrid { position: absolute; inset: 0; pointer-events: none; }
.tbd-svrings { background-image: repeating-radial-gradient(circle at 74% 48%, transparent 0 71px, rgba(255,255,255,.13) 71px 72px); }
.tbd-svgrid {
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(rgba(255,255,255,.08) 0 1px, transparent 1px 80px);
  -webkit-mask-image: linear-gradient(112deg, rgba(0,0,0,.9) 0%, transparent 52%);
  mask-image: linear-gradient(112deg, rgba(0,0,0,.9) 0%, transparent 52%);
}
/* [DS-GAP] 端末モックの脇に浮かせる「SCAN」チップ。QRから始まることを絵で示す */
.tbd-svchip {
  position: absolute; left: 0; top: 10%; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: clamp(64px, 7vw, 84px); aspect-ratio: 1;
  border-radius: var(--r-avatar); background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 30px rgba(0, 32, 52, .34); transform: rotate(-8deg);
}
.tbd-svchip .tds-icon { font-size: clamp(20px, 2vw, 26px); color: var(--svc-deep); }
.tbd-svchip__label { font-size: 12px; font-weight: 900; letter-spacing: 1px; color: var(--svc-deep); }
/* 540px以下ではチップが端末本体に重なるので小さくする */
@media (max-width: 540px) { .tbd-svchip { width: 58px; } }
/* 破線の枠だけのチップ（スタンプラリーの START / SPOT）と、塗りのチップ（GOAL） */
.tbd-svchip--outline { background: #fff; border: 2px dashed var(--svc-deep); box-shadow: 0 12px 26px rgba(20, 60, 30, .16); }
.tbd-svchip--solid { background: var(--svc-deep); box-shadow: 0 12px 26px rgba(20, 60, 30, .24); }
.tbd-svchip--solid .tds-icon, .tbd-svchip--solid .tbd-svchip__label { color: #fff; }
/* スタンプラリーは3つを端末の周りに散らして「回る」順路に見せる */
.tbd-svchip--start { left: 2%; top: 4%; width: clamp(64px, 7vw, 82px); transform: rotate(-9deg); }
.tbd-svchip--spot { left: auto; right: 1%; top: 38%; width: clamp(64px, 7vw, 82px); transform: rotate(7deg); }
.tbd-svchip--goal { left: 4%; top: auto; bottom: 6%; width: clamp(64px, 7vw, 82px); transform: rotate(-5deg); }
@media (max-width: 540px) { .tbd-svchip--start, .tbd-svchip--spot, .tbd-svchip--goal { width: 58px; } }

/* [DS-GAP] 明るいヒーローの地紋と光。柄も色もページごとに違うので実値で持つ */
.tbd-svtex { position: absolute; inset: 0; pointer-events: none; }
.tbd-svglow { position: absolute; pointer-events: none; aspect-ratio: 1; border-radius: var(--r-avatar); }
/* 下辺を斜めに白で抜いて、次のセクションへ流す */
.tbd-svwedge {
  position: absolute; left: 0; right: 0; bottom: 0; height: clamp(40px, 4vw, 64px);
  pointer-events: none; background: #fff;
  -webkit-clip-path: polygon(0 100%, 100% 0, 100% 100%);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.tbd-svphone { position: relative; display: flex; justify-content: center; align-items: center; }
.tbd-svphone__body { position: relative; width: min(100%, 286px); aspect-ratio: 9 / 19; box-sizing: border-box; padding: 9px; border-radius: 42px; background: #0e0e0e; box-shadow: 0 32px 64px rgba(0, 32, 52, .42); transform: rotate(7deg); }
.tbd-svphone__notch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 82px; height: 22px; border-radius: var(--r-pill); background: #0e0e0e; z-index: 2; }
.tbd-svphone__screen { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 34px; }
/* ヒーロー直下の「QR → ブラウザ → その場で」3枚 */
.tbd-svsteps { box-sizing: border-box; width: 100%; padding: clamp(32px, 4vw, 56px) clamp(20px, 5vw, 100px) clamp(20px, 2.5vw, 32px); background: #fff; }
.tbd-svsteps__grid { max-width: var(--container-page); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: clamp(16px, 2vw, 28px); }
.tbd-svsteps article { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-12); padding: clamp(22px, 2.4vw, 32px) clamp(18px, 2vw, 24px); border-radius: var(--r-panel); background: var(--svc-tint); }
.tbd-svsteps .tds-icon { font-size: 34px; color: var(--svc-deep); }
.tbd-svsteps h3 { margin: 0; font-size: 15px; font-weight: 900; letter-spacing: 1px; color: var(--color-text-display); }
.tbd-svsteps p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1px; color: var(--color-text-display); }

/* 左の罫で受ける見出しブロック（中央寄せの .tbd-svhead の代わり） */
.tbd-svhead--bar { flex-direction: row; align-items: stretch; text-align: left; gap: var(--space-16); }
.tbd-svhead--bar > span { flex: none; width: 5px; border-radius: var(--r-pill); background: var(--svc-b); }
.tbd-svhead--bar > div { display: flex; flex-direction: column; gap: 6px; }
.tbd-svsec--deep .tbd-svhead--bar > span { background: #fff; }

/* 罫で受ける説明カード（WebAR の特徴） */
.tbd-svfeat--line article { padding: 0 0 0 var(--space-20); border-radius: 0; border-left: 3px solid var(--svc-b); background: none; gap: 10px; }
/* 見出し＋本文だけの並び（WebAR のできること） */
.tbd-svcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: clamp(24px, 3vw, 44px); }
.tbd-svcols > div { display: flex; flex-direction: column; gap: var(--space-8); }
.tbd-svcols h3 { margin: 0; font-size: clamp(17px, 1.6vw, 20px); font-weight: 900; letter-spacing: 1px; color: var(--color-text-display); }
.tbd-svcols p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.85; letter-spacing: 1px; color: var(--color-text-display); text-wrap: pretty; }

/* --- ARスタンプラリー ページ固有 -------------------------------------------
   ヒーローは白→ティントの薄いグラデ。右上に破線の丸を1つだけ置く。 */
.tbd-svhero--rally { padding: clamp(36px, 4.5vw, 68px) clamp(20px, 5vw, 100px) clamp(48px, 5.5vw, 80px); border-radius: 0 0 var(--r-effect) var(--r-effect); background: linear-gradient(158deg, #fff 0%, var(--svc-tint) 52%, rgba(102, 255, 132, .26) 100%); }
.tbd-svhero--rally .tbd-svhero__grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
/* 歩いて回るイメージの点描と、順路を思わせる破線の円 */
.tbd-svhero--rally .tbd-svtex {
  background-image: radial-gradient(rgba(10, 107, 26, .2) 1.5px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 78% 42%, rgba(0, 0, 0, .85) 0%, transparent 68%);
  mask-image: radial-gradient(ellipse at 78% 42%, rgba(0, 0, 0, .85) 0%, transparent 68%);
}
.tbd-svhero__ring { position: absolute; right: -8%; top: -18%; width: min(52vw, 620px); aspect-ratio: 1; border-radius: var(--r-badge); border: 2px dashed rgba(10, 107, 26, .16); }
.tbd-svhero--rally .tbd-svglow--1 { right: 2%; top: 6%; width: min(38vw, 430px); background: radial-gradient(circle at 50% 50%, rgba(102, 255, 132, .34) 0%, rgba(102, 255, 132, 0) 70%); }
.tbd-svhero--rally .tbd-svglow--2 { left: -6%; bottom: -34%; width: min(44vw, 520px); background: radial-gradient(circle at 50% 50%, rgba(0, 161, 16, .13) 0%, rgba(0, 161, 16, 0) 70%); }

/* SNS ARエフェクトのヒーロー。縦の細い罫と、ピンクの光を2つ */
.tbd-svcpage--effect .tbd-svhero { padding-bottom: clamp(76px, 7vw, 116px); background: linear-gradient(164deg, var(--svc-tint) 0%, #fff 62%, rgba(255, 110, 199, .14) 100%); }
.tbd-svcpage--effect .tbd-svtex {
  background-image: repeating-linear-gradient(90deg, rgba(142, 0, 104, .13) 0 1px, transparent 1px 76px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .14) 66%, transparent 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .14) 66%, transparent 100%);
}
.tbd-svcpage--effect .tbd-svglow--1 { right: -6%; top: -24%; width: min(46vw, 540px); background: radial-gradient(circle at 50% 50%, rgba(255, 110, 199, .34) 0%, rgba(255, 110, 199, 0) 70%); }
.tbd-svcpage--effect .tbd-svglow--2 { left: -10%; bottom: -30%; width: min(40vw, 460px); background: radial-gradient(circle at 50% 50%, rgba(196, 0, 143, .14) 0%, rgba(196, 0, 143, 0) 70%); }
/* リールはピンクの影板を1枚ずらして敷く */
.tbd-svcpage--effect .tbd-svhero__reel > * { box-shadow: 0 18px 40px rgba(117, 0, 63, .18), 12px 12px 0 rgba(255, 110, 199, .34); }
.tbd-svhero--rally .tbd-svphone { justify-self: center; width: 100%; }
.tbd-svhero--rally .tbd-svphone__body { box-shadow: 0 28px 56px rgba(20, 60, 30, .28); transform: rotate(-7deg); }
/* スマホ幅ではモックアップを傾けない（実機と同じ縦向きで見せる） */
@media (max-width: 840px) { .tbd-svphone__body { transform: none; } }

/* 体験の4ステップ */
.tbd-steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.tbd-steps4 > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-12); }
/* 参加の流れの作図。実案件の写真が用意でき次第そのまま差し替えられる枠 */
.tbd-steps4__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-media); background: var(--svc-tint); }
.tbd-steps4__no { display: inline-flex; align-items: center; min-height: 30px; padding: 0 14px; border-radius: var(--r-control); background: var(--svc-deep); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: 2px; }
.tbd-steps4 h3 { margin: 0; font-size: clamp(18px, 1.8vw, 24px); font-weight: 900; letter-spacing: 1px; color: var(--color-text-display); }
.tbd-steps4 p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.85; letter-spacing: 1px; color: var(--color-text-display); text-wrap: pretty; }

/* 実績（動画1本＋説明の横並び） */
.tbd-rallyworks { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); }
.tbd-rallywork { display: grid; grid-template-columns: minmax(0, clamp(170px, 22vw, 250px)) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 36px); align-items: center; }
.tbd-rallywork > div:last-child { display: flex; flex-direction: column; gap: 10px; }
.tbd-rallywork__tag { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: 2px; color: var(--svc-ink); }
.tbd-rallywork h3 { margin: 0; font-size: clamp(18px, 1.8vw, 24px); font-weight: 900; line-height: 1.55; letter-spacing: 1px; color: var(--color-text-display); text-wrap: pretty; }
.tbd-rallywork p:not(.tbd-rallywork__tag) { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.85; letter-spacing: 1px; color: var(--color-text-display); text-wrap: pretty; }

/* 料金の表カード（本体＋オプション） */
.tbd-pricecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(20px, 2.4vw, 36px); align-items: start; }
.tbd-pricecard { border-radius: var(--r-panel); overflow: hidden; background: var(--svc-tint); }
.tbd-pricecard--opt { background: var(--color-fill); }
.tbd-pricecard__head { display: flex; flex-direction: column; gap: 6px; padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px); background: var(--svc-deep); }
.tbd-pricecard--opt .tbd-pricecard__head { background: var(--color-inverse-bg); }
.tbd-pricecard__label { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: 4px; color: rgba(255, 255, 255, .88); }
.tbd-pricecard__amount { margin: 0; display: flex; align-items: baseline; gap: var(--space-8); }
.tbd-pricecard__amount b { font-size: clamp(30px, 3.6vw, 48px); font-weight: 900; letter-spacing: 1px; line-height: 1.1; color: #fff; }
.tbd-pricecard__amount span { font-size: 16px; font-weight: 700; color: rgba(255, 255, 255, .88); }
.tbd-pricecard__opt { margin: 0; font-size: clamp(18px, 2vw, 24px); font-weight: 900; letter-spacing: 1px; line-height: 1.3; color: #fff; }
.tbd-pricecard dl { margin: 0; display: flex; flex-direction: column; }
.tbd-pricecard dl > div { display: grid; grid-template-columns: minmax(0, 7em) minmax(0, 1fr); gap: clamp(12px, 2vw, 24px); padding: clamp(14px, 1.8vw, 20px) clamp(20px, 2.6vw, 34px); }
.tbd-pricecard dl > div + div { border-top: 1px solid rgba(0, 0, 0, .08); }
.tbd-pricecard dt { margin: 0; font-size: 14px; font-weight: 900; letter-spacing: 1px; color: var(--svc-ink); }
.tbd-pricecard dd { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.75; letter-spacing: 1px; color: var(--color-text-display); }
.tbd-pricecard ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.tbd-pricecard li { padding: clamp(14px, 1.8vw, 20px) clamp(20px, 2.6vw, 34px); font-size: 14px; font-weight: 500; line-height: 1.75; letter-spacing: 1px; color: var(--color-text-display); }
.tbd-pricecard li + li { border-top: 1px solid rgba(0, 0, 0, .08); }

/* 開催までのスケジュール */
.tbd-schedlist { display: flex; flex-direction: column; border-top: 2px solid var(--svc-b); }
.tbd-sched { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: clamp(12px, 2vw, 28px); align-items: baseline; padding: clamp(16px, 1.8vw, 22px) 0; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.tbd-sched > div { display: flex; align-items: center; gap: var(--space-12); }
.tbd-sched__no { font-size: 12px; font-weight: 900; letter-spacing: 3px; color: var(--svc-ink); }
.tbd-sched h3 { margin: 0; font-size: clamp(16px, 1.5vw, 19px); font-weight: 900; letter-spacing: 1px; color: var(--color-text-display); }
.tbd-sched p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1px; color: var(--color-text-display); text-wrap: pretty; }

@media (max-width: 840px) {
  .tbd-svhero__grid, .tbd-svhero--dark .tbd-svhero__grid { grid-template-columns: 1fr; }
  .tbd-cross4, .tbd-steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbd-sched { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}
@media (max-width: 540px) {
  .tbd-cross4, .tbd-steps4 { grid-template-columns: 1fr; }
  .tbd-rallywork { grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-16); align-items: start; }
}
.tbd-article-author a { color: inherit; text-decoration: underline; }