/* ===== tokens.css ===== */
/* ★ この @import は必ずファイル先頭に置く。
   CSS 仕様上、他の規則より後ろの @import は無効化されブラウザが黙って捨てる。
   scripts/build-css.mjs が「連結後の最初の文が @import であること」をアサートしている。

   クエリは site/templates/index.html:95 と完全一致させてある。
   Lato に 900 を含めないのは実サイトがそうだから（strong の font-weight:900 は
   合成ボールドで描かれるのが本番の姿）。 */
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+JP:wght@300;400;500;900&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400..600,0,0&display=swap");

/* ==========================================================================
   tobidase.jp デザイントークン
   値はすべて site/templates/*.html の実測値。発明した値はここには無い。

   命名について:
   - 色は必ず `--color-` を名前に含める。design-sync の README 分類器
     (lib/emit.mjs:557) が /color|bg-|fg-|text-|fill|border-|surface/i なので、
     `--brand-primary` のような名前だと "other" に落ちてエージェントから色に見えなくなる。
   - それ以外はロール駆動（`--r-control` のように「何に使うか」で名前を付ける）。

   ★ ライト/ダークのペアは作らない。site/ 全体で prefers-color-scheme が0件で、
     ダーク値の正本が存在しないため作れば全部が発明になる。暗い面は
     「ハンバーガーモーダル」と「下層ヒーローの暗幕」の2箇所だけで、テーマではなく
     個別部品の反転。反転は --color-inverse-* で表現する。
   ========================================================================== */
:root {
  /* --- ブランド ----------------------------------------------------------- */
  --color-brand-primary: #ff5035;        /* Content の主CTA */
  --color-brand-primary-ink: #ffffff;
  --color-brand-secondary: #004f66;
  --color-brand-secondary-ink: #ffffff;
  --color-brand-pill-pink: #ff0150;      /* Landing PillButton solid-pink */
  --color-brand-pill-dark: #313131;      /* Landing PillButton solid-dark */
  --color-brand-banner: #ee5454;         /* BannerCta */
  --color-brand-link: #007cff;           /* 本文中リンク */

  /* --- 状態色 -------------------------------------------------------------
     ★ --brand-danger という名前は作らない。#f23a3c は contact.html で
       RequiredMark にしか使われておらず「危険」ではない。本当のエラー色は #f84f65。 */
  --color-required: #f23a3c;             /* 必須マーク（contact.html） */
  --color-text-error: #f84f65;           /* 入力エラー文言（contact.html:1669） */
  --color-action-quiet: #2b7cd8;         /* snackbar の閉じるボタン */

  /* --- グラデーション ------------------------------------------------------
     3系統あるので曖昧な --brand-gradient は作らない。用途で名前を分ける。
     271.85deg の --g-color-* 系は Studio のパラメータ化された別系統で、DSには持ち込まない。 */
  --color-gradient-cta: linear-gradient(91.47deg, rgba(0, 173, 147, 0.85) 0%, rgb(4, 90, 191) 100%);
  --color-gradient-text: linear-gradient(112.8deg, #e62ffd 10%, #22bbfc 40.8%, #fad53a 80%);

  /* --- 文字：面とペアでランプを持つ ---------------------------------------
     フラットな3段階ではない。載る面ごとに別のランプがある。 */

  /* Content（白地・下層/一覧/記事枠/フォーム） */
  --color-text-strong: #222222;
  --color-text-body: #333333;
  --color-text-muted: #666666;
  --color-text-faint: #767575;

  /* Landing（トップページ）。index.html に18箇所。主見出し50px/900・小見出し30px/900・
     本文16px/500 が全部この1色。work-detail.html には0件＝下層では使わない色。 */
  --color-text-display: #3c3c3c;

  /* 反転面（暗幕・ハンバーガーモーダルの上） */
  --color-inverse-ink: #ffffff;
  --color-inverse-ink-muted: #c6c6c6;
  --color-inverse-ink-faint: #acabab;

  /* クリーム面（トップの特集パネル） */
  --color-on-cream: #3b300a;

  /* --- 面 ------------------------------------------------------------------ */
  --color-bg: #ffffff;
  --color-card: #ffffff;                 /* Content のカードは枠線も影も持たないのが正 */
  --color-fill: #f5f5f5;
  --color-fill-soft: #fafafa;
  --color-fill-mute: #eeeeee;
  --color-hover: #e6e6e6;
  --color-inverse-bg: #313131;
  --color-inverse-bg-strong: #212121;

  /* クリームは2色ある（当初は後者しか無いと誤認していた） */
  --color-surface-cream: #fbf7ea;                  /* トップの特集パネル */
  --color-surface-cream-strong: rgb(247, 239, 200); /* フォーム外枠 contact.html:1445 */

  /* --- 罫 ------------------------------------------------------------------ */
  --color-line-soft: #eeeeee;
  --color-line: #e6e6e6;
  --color-line-mid: #e0e0e0;             /* 入力欄の静止時の枠 */
  --color-line-strong: #666666;          /* 入力欄のフォーカス時の枠 */
  --color-line-quiet: #bdbdbd;
  --color-line-faint: #ededed;           /* snackbar の枠 */
  --color-line-quote: rgba(0, 0, 0, 0.15); /* blockquote の左罫 */

  /* --- フォーカスリング：2色持つ -------------------------------------------
     形（2px / offset 2px）は contact.html:1672 の .snackbar__close:focus-visible が出典。
     offset があるのでリングはボタンの塗りでなくページ背景の上に載る。
     ★ #004f66 は --color-inverse-bg (#313131) に対して 1.43:1 で見えない。
       ハンバーガーモーダルはナビリンクが全部入る場所なので、そこが見えないと
       キーボード操作が全滅する。反転面では必ず --color-focus-ring-inverse を使う。
     ルール: リングは「自分が載る面」に対して 3:1 を満たす方を選ぶ。 */
  --color-focus-ring: #004f66;           /* 白地。9.09:1 */
  --color-focus-ring-inverse: #ffffff;   /* #313131 の上。 */

  /* --- 影：スケールにせず役割固有 ------------------------------------------
     実在する7種すべて。box-shadow:0 0 0 0 の11箇所は Studio の既定出力なので移植しない。
     ★ 影は Content の情報カードには付けない。許されるのは overlay と Landing の装飾部品。 */
  --shadow-modal: 0 6px 15px rgba(0, 0, 0, 0.2);
  --shadow-snackbar: 0 16px 48px -8px rgba(0, 0, 0, 0.08), 0 10px 25px -5px rgba(0, 0, 0, 0.11);
  --shadow-hard: 3px 3px 0 0 rgba(0, 0, 0, 0.2);          /* BannerCta */
  --shadow-pill: 0 0 4px 0 #bfbfbf;                        /* Landing PillButton */
  --shadow-glow: 0 0 40px 0 rgba(0, 0, 0, 0.2);            /* Landing EffectCard ×8 */
  --shadow-gradient-pill: 0 0 12px 0 rgba(0, 0, 0, 0.85);  /* Landing グラデピル */
  --shadow-media: 0 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 10px 0 rgba(0, 0, 0, 0.15);

  /* --- 角丸：数を減らすのでなくロールで固定する ----------------------------
     実データは18種。ロールに畳んで生px を禁じる。
     ★ 採らない値と理由（書かないとエージェントが実HTMLを見て復活させる）:
       2  … richText の目次ブロックだけ。ほぼ直角で意図が読めない → --r-nav に寄せる
       3  … Studio のドラッグ由来の端数。同上
       12 … tbd-* の内部だけで使う値。記事CSSが持っているのでトークン化不要
       35 … 1箇所のみの外れ値 → --r-media-lg(24) か --r-form(49) に寄せる
       40 … 1箇所のみの外れ値 → --r-form(49) に寄せる */
  --r-control: 4px;      /* ボタン・入力 */
  --r-nav: 6px;          /* ナビ・snackbar */
  --r-media: 8px;        /* サムネ・タグ・FAQ */
  --r-dialog: 10px;      /* 確認モーダル */
  --r-panel: 16px;       /* クリームパネル */
  --r-media-lg: 24px;    /* パネル内画像 */
  --r-glass: 26px;       /* GlassPanel */
  --r-form: 49px;        /* フォーム外枠 */
  --r-effect: 64px;      /* EffectCard */
  --r-badge: 200px;      /* StepBadge */
  --r-pill: 1200px;      /* PillButton */
  --r-avatar: 50%;

  /* --- 余白 ----------------------------------------------------------------
     9/15/19/27/28/34/36/42 は Studio のドラッグ由来の端数。最寄りに丸めて使う。 */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-50: 50px;
  --space-60: 60px;
  --space-80: 80px;      /* EffectCard 行の gap */

  /* --- コンテナ幅 ----------------------------------------------------------
     related:992 は --container-wide(1080) に寄せる（32px差は視認不可＝乖離コスト最小）。 */
  --container-page: 1280px;
  --container-wide: 1080px;
  --container-grid: 960px;
  --container-narrow: 740px;
  --container-prose: 700px;
  --container-form: 600px;
  --container-compact: 500px;

  /* --- モーション ---------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0.4, 0, 1);  /* index.html:200 */
  --dur: 300ms;

  /* --- タイポ --------------------------------------------------------------
     --font-body は Content（Lato 主・日本語は Noto Sans JP）
     --font-display は Landing（Noto Sans JP のみ）
     ★ 下層8テンプレは実サイトでは Lato しか読んでおらず日本語がOSゴシックに落ちている。
       DS は正しい姿（Noto Sans JP あり）を持つ。DSと実サイトが意図的に食い違う唯一の箇所。 */
  --font-latin: Lato;
  --font-jp: 'Noto Sans JP';
  --font-body: Lato, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  --font-display: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;

  --leading-body: 1.75;    /* Content 本文（Lato） */
  --leading-heading: 1.4;
  --leading-article: 1.6;  /* 記事 richText */

  /* Landing の字間。Content は常に normal。 */
  --tracking-display: 5px;
  --tracking-display-sub: 2px;
  --tracking-display-body: 1px;
}

/* ===== base.css ===== */
/* 共有プリミティブ。
   ★ 要素セレクタ（h1{}, p{} 等）を素で書いてはいけない。
     記事本文は .tbd-article の中に生HTMLで入るので、素の要素セレクタは全部そこへ漏れて
     凍結CSSと喧嘩する。必ずクラス起点で書くこと。 */

.tds-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Material Symbols Outlined。
   ★ 実サイト（contact.html:82-91）は [class*="material-symbols-"]{visibility:hidden} で
     フォント読込前のちらつきを抑え、body の属性で解除している。DS ではこのゲートを使わない。
     使うと Claude Design のプレビューでアイコンが全部消えたカードが撮られ、採点で Styled を落とす。 */
.tds-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  /* 実サイトと同じ可変軸の使い方。実在する wght は 400 と 600 だけ。 */
  font-variation-settings: 'FILL' var(--material-symbol-fill, 0), 'wght' var(--material-symbol-weight, 400);
}

/* ===== content.css ===== */
/* ==========================================================================
   Content 言語 — 下層ページ / 一覧 / 記事枠 / フォーム
   Lato + font-feature-settings:'palt' 1、weight 400/700/900、letter-spacing normal。
   CTA は Button（radius 4px）。★ 情報カードには影も枠線も付けない。

   必ずクラス起点で書く（要素セレクタは .tbd-article 内部に漏れる）。
   ========================================================================== */

/* --- Button ---------------------------------------------------------------
   出典: blog-article.html:1466-1473（.sd-12 / .sd-13 / .sd-14）。
   実サイトの機構は「filled↔outlined の入れ替え」ではなく
   「枠線は静止時から常に存在し、hover では background だけが brand↔transparent に入れ替わる」。 */
.tds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--r-control);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-feature-settings: 'palt' 1;
  font-size: 15px;
  font-weight: 700;
  line-height: var(--leading-body);
  letter-spacing: normal;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}

.tds-btn--primary {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary-ink);
}

.tds-btn--primary:hover {
  background: transparent;
  color: var(--color-brand-primary);
}

.tds-btn--secondary {
  background: transparent;
  border-color: var(--color-brand-secondary);
  color: var(--color-brand-secondary);
}

.tds-btn--secondary:hover {
  background: var(--color-brand-secondary);
  color: var(--color-brand-secondary-ink);
}

.tds-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ★ disabled はこのDSで唯一の発明。実サイトのCSSには :disabled が0件だが、
   実行時には Studio の送信処理が control.disabled = true を付けているため
   「無効化されるが見た目が変わらない」a11yの穴が実在する。
   opacity:.5 は使わない（カード hover の規則3と同値で、静止画プレビューで
   「hover 中のカード」と区別できなくなるため）。 */
.tds-btn:disabled {
  background: var(--color-fill-mute);
  border-color: var(--color-fill-mute);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.tds-btn__icon {
  display: inline-flex;
  font-size: 20px;
  transition: transform var(--dur) var(--ease);
}

.tds-btn:hover .tds-btn__icon {
  transform: translate(2px, 0);
}

/* --- RichText -------------------------------------------------------------
   出典: blog-article.html:274-509（.richText の入れ子定義）と :1521（.sd-34 の実値）。
   記事本文の「枠」。この中に .tbd-article が生HTMLで入る。
   本文幅 700px / 16px / line-height 1.6 / #222222。 */
.tds-richtext {
  display: block;
  box-sizing: border-box;
  width: var(--container-prose);
  max-width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: var(--leading-article);
  color: var(--color-text-strong);
  text-align: left;
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
}

.tds-richtext * {
  border: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  word-spacing: 1px;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
}

/* ★ 見出しのサイズは Studio の基底規則（h1=3em / h2=2em / h3=1em）ではなく、
   記事ノードのインスタンス指定 blog-article.html:1522-1524 が正。
   基底だけを見ると h1=48px / h2=32px / h3=16px になるが、実際に描かれているのは
   32 / 24 / 18px。compare-computed.mjs の実測で判明した。 */
.tds-richtext > h1 { font-size: 32px; font-weight: 700; margin: 48px 0 var(--space-20); }
.tds-richtext > h2 { font-size: var(--space-24); font-weight: 700; margin: var(--space-40) 0 10px; }
.tds-richtext > h3 { font-size: 18px; font-weight: 700; margin: var(--space-32) 0 10px; }

/* 入れ子の見出し（tbd-* の内側など）は基底規則のまま。 */
.tds-richtext h1 { font-weight: 700; }
.tds-richtext h2 { font-weight: 700; }
.tds-richtext h3 { font-weight: 700; }
.tds-richtext h4,
.tds-richtext h5 { display: block; font-size: 1em; font-weight: 600; margin: 10px 0; }
.tds-richtext h6 { display: block; font-size: 1em; font-weight: 500; margin: 10px 0; }

.tds-richtext p { margin: 10px 0; }
.tds-richtext > p { min-height: 1em; }
.tds-richtext li > p,
.tds-richtext th p,
.tds-richtext td p { margin: 0; }

.tds-richtext strong { color: inherit; display: inline; font-family: inherit; font-weight: 900; }
.tds-richtext em { font-style: italic; }
.tds-richtext hr { border-top: 1px solid #ccc; margin: 10px 0; }

.tds-richtext a {
  color: var(--color-brand-link);
  display: inline;
  text-decoration: underline;
}

.tds-richtext > blockquote {
  border-left: 3px solid var(--color-line-quote);
  font-style: italic;
  margin: 10px 0;
  padding: 10px 15px;
}

.tds-richtext ol,
.tds-richtext ul { margin: 0 0 0 var(--space-20); padding: 0; list-style: none; }
.tds-richtext ol li { list-style: decimal; margin: 10px 0; }
.tds-richtext ul li { list-style: disc; margin: 10px 0; }

.tds-richtext img,
.tds-richtext video { height: auto; max-width: 100%; vertical-align: bottom; }

.tds-richtext table {
  table-layout: auto;
  border-collapse: collapse;
  border-spacing: unset;
  margin: 10px 0;
  font-size: 14px;
  border: 1px solid #f2f2f2;
  color: #1a1a1a;
  line-height: var(--leading-heading);
}
.tds-richtext th { background: rgba(245, 245, 245, 0.5); }
.tds-richtext th,
.tds-richtext td { min-width: 100px; max-width: 240px; border: 1px solid #f2f2f2; padding: var(--space-12); }

.tds-richtext > [data-type='table'] { overflow-x: auto; }
.tds-richtext > [data-type='table'] p { white-space: pre-line; word-break: break-all; }

.tds-richtext p > code {
  background: #eee;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--r-nav);
  display: inline;
  margin: 2px;
  padding: 0 5px;
}
.tds-richtext pre {
  margin: var(--space-20) 0;
  padding: 25px 35px;
  background: var(--color-fill-mute);
  border-radius: var(--r-nav);
  white-space: pre-wrap;
  font-family: Menlo, Monaco, 'Courier New', monospace;
}
.tds-richtext pre code { padding: 0; border: none; }

/* 目次。生px の 2px 角丸は採らず --r-nav に寄せる（tokens.css の「採らない値」参照）。 */
.tds-richtext > [data-type='table_of_contents'] {
  line-height: 1;
  list-style: none;
  padding: var(--space-24) var(--space-24) var(--space-8);
  margin: 0;
  border-radius: var(--r-nav);
  font-size: 16px;
  background-color: var(--color-fill);
  color: #616161;
}
.tds-richtext .toc_list { margin: 0; padding: 0; }
.tds-richtext .toc_item {
  font-size: inherit;
  font-weight: inherit;
  color: currentColor;
  list-style: none;
  margin: 0 0 var(--space-16) 0;
  padding-left: 2rem;
}
.tds-richtext .toc_item--1 { padding-left: 0; }
.tds-richtext .toc_item--2 { padding-left: 2rem; }
.tds-richtext .toc_item--3 { padding-left: 4rem; }
.tds-richtext .toc_item > a {
  font-size: inherit;
  font-weight: inherit;
  color: currentColor;
  border: none;
  text-decoration: none;
}

/* 出典: blog-article.html:1661-1663（540px ブロック）。840px 側に見出しの上書きは無い。 */
@media (max-width: 540px) {
  .tds-richtext > h1 { font-size: var(--space-24); }
  .tds-richtext > h2 { font-size: var(--space-20); }
  .tds-richtext > h3 { font-size: var(--space-16); }
}

/* --- MenuDialog -----------------------------------------------------------
   出典: blog-article.html:1582-1591（≤840px）と :1633-1642（≤540px）。
   ≤840px でハンバーガーから開く全画面ナビ。ここはナビリンクが全部入る場所なので、
   キーボードのフォーカスリングが見えないと操作が全滅する
   → 配下は必ず --color-focus-ring-inverse を使う。 */
.tds-menu-dialog {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tds-menu-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.16);
}

.tds-menu-dialog__panel {
  position: relative;
  box-sizing: border-box;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  background: #000000;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tds-menu-dialog__close {
  position: absolute;
  top: 28px;
  right: 34px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-inverse-ink);
  font-size: 50px;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}
/* 規則4: アイコン・面が主張する装飾部品の hover は opacity:.7（実測18箇所で最頻） */
.tds-menu-dialog__close:hover { opacity: 0.7; }
.tds-menu-dialog__close:focus-visible {
  outline: 2px solid var(--color-focus-ring-inverse);
  outline-offset: 2px;
}

.tds-menu-dialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  width: 80%;
}

.tds-menu-dialog__nav {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tds-menu-dialog__link {
  color: var(--color-inverse-ink);
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity var(--dur) var(--ease);
}
.tds-menu-dialog__link:hover { opacity: 0.7; }
.tds-menu-dialog__link:focus-visible {
  outline: 2px solid var(--color-focus-ring-inverse);
  outline-offset: 2px;
}

@media (max-width: 540px) {
  .tds-menu-dialog__panel {
    width: 100%;
    height: 100%;
    background: var(--color-inverse-bg);
  }
  .tds-menu-dialog__close { top: 16px; right: 19px; font-size: 40px; }
  .tds-menu-dialog__body { gap: var(--space-16); }
  .tds-menu-dialog__nav { gap: var(--space-16); }
  .tds-menu-dialog__link { font-size: 25px; }
}

/* --- SubmitButton ---------------------------------------------------------
   出典: contact.html:1489-1490（.sd-42 / .sd-43）。
   面は #333333。ブランド色ではない。ここを橙にしない。 */
.tds-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  margin: var(--space-20) 0 0;
  padding: 15px;
  border: 0;
  border-radius: var(--r-control);
  background: var(--color-text-body);
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}
/* 規則4: 面が主張する装飾部品の hover は opacity:.7 */
.tds-submit:hover { opacity: 0.7; }
.tds-submit:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
/* ★ 発明。実サイトの CSS には :disabled が0件だが実行時には disabled が付く。 */
.tds-submit:disabled {
  background: var(--color-fill-mute);
  cursor: not-allowed;
  opacity: 1;
}
.tds-submit:disabled .tds-submit__label { color: var(--color-text-muted); }

.tds-submit__label {
  color: var(--color-inverse-ink);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  padding: 0 0 2px;
  text-align: center;
}

/* --- FormPanel ------------------------------------------------------------
   出典: contact.html:1444-1446（.sd-7 / .sd-8 / .sd-9）。
   面は --color-surface-cream-strong。トップの特集パネル(#FBF7EA)とは別の色。 */
.tds-form-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 737px;
  max-width: 100%;
  background: var(--color-surface-cream-strong);
  border-radius: var(--r-form);
}

.tds-form-panel__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  width: var(--container-form);
  max-width: calc(100% - 40px);
  margin: var(--space-20);
  padding: 0;
}

@media (max-width: 540px) {
  .tds-form-panel {
    width: calc(100% - 40px);
    margin: 0 var(--space-20);
  }
}

/* --- FormField / RequiredMark ---------------------------------------------
   出典: contact.html:1447-1450（.sd-10 / .sd-11 / .sd-12 / .sd-13）。 */
.tds-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 var(--space-20);
}

.tds-field__head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin: 0 0 10px;
}

.tds-field__label {
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: var(--leading-heading);
  letter-spacing: 0;
}

/* ★ 必須マークはアスタリスク。バッジではない。背景も角丸も padding も持たない。 */
.tds-required {
  color: var(--color-required);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: var(--leading-heading);
  margin: 0 0 0 5px;
}

/* エラー文言は #f84f65。必須マークの #f23a3c とは別の色。 */
.tds-field__error {
  margin-top: var(--space-8);
  color: var(--color-text-error);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: var(--leading-heading);
}

/* --- TextInput / Textarea -------------------------------------------------
   出典: contact.html:1451-1452（.sd-14）と :1484-1485（.sd-38）。

   ★ 実サイトには :focus の定義が一切ない。DS は既存の見た目を保ったまま
     フォーカスリングと枠線の濃色化を「追加」する。枠が #666666 に変わる挙動は
     サイト内で唯一実在する focus 定義（SearchBox / blog-search.html:1439）からの導出。 */
.tds-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 50px;
  padding: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--r-control);
  box-shadow: none;
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: var(--leading-heading);
  letter-spacing: 0;
  text-align: left;
  transition: border-color var(--dur) var(--ease);
}

.tds-input::placeholder { color: #cccccc; }

.tds-input:focus-visible {
  border-color: var(--color-line-strong);
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.tds-input:disabled {
  background: var(--color-fill-mute);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.tds-input--multiline {
  height: 160px;
  resize: vertical;
}

/* --- RadioField -----------------------------------------------------------
   出典: contact.html:1471-1479（.sd-30 / .sd-31 / .list-1 / .list-1__item ほか）。
   ★ :checked も accent-color も実サイトに定義が無い。選択時の色を発明しない。 */
.tds-radio-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  width: var(--container-compact);
  max-width: 100%;
  margin: 0 0 var(--space-20);
}

.tds-radio-field__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.tds-radio-field__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 10px;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

/* 規則2: 面を持たない行は hover で面を得る。--color-fill-soft はここが出典。 */
.tds-radio-field__item:hover { background: var(--color-fill-soft); }

.tds-radio-field__input {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 0 10px 0 0;
}

.tds-radio-field__input:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.tds-radio-field__text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: var(--leading-heading);
  text-align: left;
}

/* --- SearchBox ------------------------------------------------------------
   出典: blog-search.html:1435-1441（work-search.html もバイト単位で同一）。
   入力とボタンが1つの角丸(8px)を左右で分け合う。境目の枠線は入力側を 0px にして重複を避ける。 */
.tds-searchbox {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: var(--container-compact);
  max-width: 100%;
  margin: 0;
}

.tds-searchbox__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

.tds-searchbox__input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  height: 56px;
  padding: 10px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-line-mid);
  border-right: 0;
  border-radius: var(--r-media) 0 0 var(--r-media);
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: var(--leading-heading);
  text-align: left;
  transition: border-color var(--dur) var(--ease);
}

.tds-searchbox__input::placeholder { color: #aeaeae; }

/* 実サイトは outline:none だが、DS はリングを足す（キーボード操作で何も見えないため）。
   枠線が #666666 に変わる挙動は実サイトのまま。 */
.tds-searchbox__input:focus-visible {
  border-color: var(--color-line-strong);
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.tds-searchbox__submit {
  flex: none;
  box-sizing: border-box;
  width: 100px;
  max-width: 100%;
  height: 56px;
  border: 0;
  border-radius: 0 var(--r-media) var(--r-media) 0;
  background: var(--color-text-body);
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}

.tds-searchbox__submit:hover { opacity: 0.7; }
.tds-searchbox__submit:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.tds-searchbox__submit-label {
  display: block;
  color: var(--color-inverse-ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  padding: 0 0 2px;
}

/* --- Snackbar -------------------------------------------------------------
   出典: contact.html:1663-1672（実サイトでは JS が実行時に注入している CSS）。
   サイト内で唯一のトースト表現。他のトーストを発明しない。 */
.tds-snackbar-wrapper {
  position: fixed;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
  pointer-events: none;
}

.tds-snackbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  box-sizing: border-box;
  width: 480px;
  max-width: 90vw;
  padding: var(--space-16) var(--space-20);
  background: var(--color-bg);
  border: 1px solid var(--color-line-faint);
  border-radius: var(--r-nav);
  box-shadow: var(--shadow-snackbar);
  user-select: none;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: auto;
}

.tds-snackbar[data-active] { opacity: 1; }

.tds-snackbar__convey {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
}

.tds-snackbar__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.tds-snackbar__message {
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: var(--leading-heading);
}

.tds-snackbar--error .tds-snackbar__message { color: var(--color-text-error); }

.tds-snackbar__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px var(--space-8);
  border: none;
  border-radius: 40px;
  background: transparent;
  color: var(--color-action-quiet);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  cursor: pointer;
}

.tds-snackbar__close:hover { background: var(--color-fill); }

/* ★ サイト内で唯一実在するフォーカスリング定義。DS 全体のリングの形はここが出典。 */
.tds-snackbar__close:focus-visible {
  outline: 2px solid var(--color-action-quiet);
  outline-offset: 2px;
}

/* --- TagChip --------------------------------------------------------------
   出典: work-list.html:1513-1514（filter）/ blog-article.html:1509（display）/
         work-list.html:1525（card）。
   面・角丸・「枠線も影も無い」ことは3種で共通。変わるのは大きさだけ。 */
.tds-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--color-fill);
  border-radius: var(--r-media);
  color: var(--color-text-strong);
  font-family: var(--font-body);
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  transition: opacity var(--dur) var(--ease);
}

.tds-tag--filter { padding: var(--space-16); font-size: 15px; }
.tds-tag--display { padding: var(--space-12) var(--space-16); font-size: 18px; }
.tds-tag--card { padding: var(--space-8) var(--space-12); font-size: 15px; margin: 0 var(--space-8) 0 0; }

/* 選択状態と hover は filter にしか実在しない。display / card には発明しない。 */
.tds-tag--filter[data-current] {
  background: var(--color-inverse-bg-strong);
  color: var(--color-inverse-ink);
}
.tds-tag--filter:hover { opacity: 0.7; }
.tds-tag--filter:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

@media (max-width: 540px) {
  .tds-tag--filter { font-size: 14px; }
  .tds-tag--display { font-size: 15px; }
  .tds-tag--card { font-size: 13px; }
}

/* --- WorkCard / BlogCard --------------------------------------------------
   出典: work-list.html:1517-1525 / blog-list.html:1518-1526。
   ★ 枠線も影も持たない。一覧カードは例外なくフラットで、区切りは背景色と余白だけ。 */
.tds-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--color-card);
  text-decoration: none;
  transition: opacity var(--dur) var(--ease);
}

/* 規則3: 画像主体カードの hover は opacity:.5。面も枠線も変えない。 */
.tds-card:hover { opacity: 0.5; }

.tds-card:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.tds-card__thumb {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
}

.tds-card--work .tds-card__thumb { border-radius: var(--r-media); }
.tds-card--blog .tds-card__thumb { border-radius: 0; }

.tds-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-12);
  width: 100%;
  padding: 0;
}

.tds-card--work .tds-card__body { margin: var(--space-16) 0 0; }
.tds-card--blog .tds-card__body { margin: var(--space-8) 0 0; }

.tds-card__title {
  margin: 0;
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: var(--leading-heading);
  text-align: left;
}

.tds-card__tags {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 4px 0 0;
  padding: 0;
}

/* ★ BlogCard のタグは実サイトでは 540px 以下でしか出ない。DS もそれに合わせる。 */
.tds-card__tags--sm-only { display: none; }

@media (max-width: 840px) {
  .tds-card__thumb { height: 180px; object-fit: cover; }
}

@media (max-width: 540px) {
  .tds-card__thumb { height: auto; object-fit: fill; }
  .tds-card__body { gap: var(--space-8); }
  .tds-card__tags--sm-only { display: flex; }
}

/* --- RelatedArticleCard ---------------------------------------------------
   出典: blog-article.html:1534-1542（work-detail.html:1529-1539 も同値）。
   ★ 枠線・影・角丸すべてゼロ。
   ★ hover が実サイトに一切ない。リンクなのに無反応。出典が無いので発明しない。 */
.tds-related {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--space-40);
  box-sizing: border-box;
  width: 100%;
  background: var(--color-card);
  text-decoration: none;
}

.tds-related:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* 実サイトは背景画像方式。高さ 280px 固定に対して比率が合わないので cover で埋める。 */
.tds-related__thumb {
  flex: none;
  width: calc(50% - (var(--space-40) * 0.5));
  max-width: calc(50% - (var(--space-40) * 0.5));
  height: 280px;
  background-color: var(--color-fill);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.tds-related__body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.tds-related__date {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
}

.tds-related__title {
  margin: 0;
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  text-align: left;
}

.tds-related__excerpt {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
}

@media (max-width: 840px) {
  .tds-related { flex-direction: column; }
  .tds-related__thumb { width: 100%; max-width: 100%; height: 240px; }
  .tds-related__date { font-size: 12px; }
}

@media (max-width: 540px) {
  .tds-related { gap: var(--space-24); }
  .tds-related__thumb { height: 200px; }
}

/* --- NavLink --------------------------------------------------------------
   出典: work-list.html:1454-1458（全下層テンプレで同値）。
   hover は「面 + 下線」の複合。規則2（面を持たない行は面を得る）の実データ側の出典。 */
.tds-navlink {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px var(--space-12);
  border-radius: var(--r-nav);
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}

.tds-navlink:hover { background: var(--color-hover); opacity: 1; }

.tds-navlink:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.tds-navlink__label {
  color: var(--color-text-strong);
  font-family: var(--font-body);
  font-feature-settings: 'palt' 1;
  font-size: 15px;
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: normal;
  text-align: left;
  text-decoration: none;
}

.tds-navlink__bar {
  display: block;
  width: 0;
  max-width: 0;
  height: 1px;
  background: var(--color-text-strong);
  transition: width var(--dur) var(--ease), max-width var(--dur) var(--ease);
}

.tds-navlink:hover .tds-navlink__bar { width: 100%; max-width: 100%; }

@media (max-width: 540px) {
  .tds-navlink__label { font-size: 14px; }
}

/* --- FaqAccordion / FaqItem ----------------------------------------------
   出典: index.html:1908-1923。
   ★ 開閉しない。実サイトは details も JS トグルも button も持たない静的リスト。
   ★ 枠線は 0px solid（実質なし）、影もなし。区切りは回答の上罫 1px だけ。 */
.tds-faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-32);
  box-sizing: border-box;
  width: 880px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tds-faq__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-20);
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: var(--space-32);
  background: var(--color-card);
  border-radius: var(--r-media);
  list-style: none;
}

.tds-faq__head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-20);
  width: 100%;
}

.tds-faq__marker {
  flex: none;
  width: 16px;
  color: var(--color-text-strong);
  font-family: var(--font-body);
  font-feature-settings: 'palt' 1;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}

.tds-faq__question {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--color-text-strong);
  font-family: var(--font-body);
  font-feature-settings: 'palt' 1;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}

.tds-faq__answer {
  box-sizing: border-box;
  width: calc(100% - 36px);
  max-width: calc(100% - 36px);
  margin: 0 0 0 36px;
  border-top: 1px solid var(--color-line);
}

.tds-faq__text {
  margin: var(--space-20) 0 0;
  color: var(--color-text-strong);
  font-family: var(--font-body);
  font-feature-settings: 'palt' 1;
  font-size: 15px;
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: normal;
  text-align: left;
}

@media (max-width: 540px) {
  .tds-faq { gap: var(--space-20); }
  .tds-faq__item { gap: var(--space-16); padding: var(--space-20); border-radius: var(--r-nav); }
  .tds-faq__head { gap: 15px; }
  .tds-faq__marker,
  .tds-faq__question { font-size: 16px; }
  .tds-faq__answer { width: calc(100% - 30px); max-width: calc(100% - 30px); margin-left: 30px; }
  .tds-faq__text { font-size: 14px; }
}

/* --- LoadMoreButton -------------------------------------------------------
   出典: work-list.html:1543-1545。
   ★ このサイトにページネーションは存在しない。一覧の続きは必ずこのボタン。
   ★ radius 20px は「高さ40pxの要素を完全な丸にする」ためのもので、
     角丸ロールを1つ増やす値ではない。ここだけ生の px で書く。 */
.tds-loadmore {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.tds-loadmore__button {
  box-sizing: border-box;
  width: 282px;
  max-width: calc(100% - 8px);
  height: 40px;
  margin: 4px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--color-fill-mute);
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}

/* 規則4。実サイトには hover が無いが、押せることが伝わらないので足してある。 */
.tds-loadmore__button:hover { opacity: 0.7; }

.tds-loadmore__button:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.tds-loadmore__label {
  display: block;
  padding: 0 0 2px;
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  text-align: center;
}

/* --- Container ------------------------------------------------------------
   出典: 各テンプレの width 実測。この7つ以外の幅はサイトに存在しない。 */
.tds-container {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.tds-container--page { max-width: var(--container-page); }
.tds-container--wide { max-width: var(--container-wide); }
.tds-container--grid { max-width: var(--container-grid); }
.tds-container--narrow { max-width: var(--container-narrow); }
.tds-container--prose { max-width: var(--container-prose); }
.tds-container--form { max-width: var(--container-form); }
.tds-container--compact { max-width: var(--container-compact); }

.tds-container--gutter-40 { padding-left: var(--space-40); padding-right: var(--space-40); }
.tds-container--gutter-20 { padding-left: var(--space-20); padding-right: var(--space-20); }
.tds-container--gutter-0 { padding-left: 0; padding-right: 0; }

/* --- Section --------------------------------------------------------------
   出典: index.html の各 <section>。左右のガターは 100 / 50 / 20 の3段しか実在しない。 */
.tds-section {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.tds-section--lg { padding: 100px 100px; }
.tds-section--md { padding: 30px 100px; }
.tds-section--sm { padding: 0 100px; }
.tds-section--none { padding: 0; }

.tds-section--bg-white { background: var(--color-bg); }
.tds-section--bg-fill { background: var(--color-fill); }
/* ★ cream は Landing 言語の面。Content のページで使うと言語が混ざる。 */
.tds-section--bg-cream { background: var(--color-surface-cream); }

@media (max-width: 840px) {
  .tds-section--lg { padding: 53px 50px; }
  .tds-section--md { padding: 30px 50px; }
  .tds-section--sm { padding: 0 50px; }
}

@media (max-width: 540px) {
  .tds-section--lg { padding: var(--space-40) var(--space-20); }
  .tds-section--md { padding: 30px var(--space-20); }
  .tds-section--sm { padding: 0 var(--space-20); }
}

/* --- Stack ---------------------------------------------------------------- */
.tds-stack { display: flex; box-sizing: border-box; }
.tds-stack--row { flex-direction: row; }
.tds-stack--column { flex-direction: column; }
.tds-stack--wrap { flex-wrap: wrap; }
.tds-stack--align-start { align-items: flex-start; }
.tds-stack--align-center { align-items: center; }
.tds-stack--align-end { align-items: flex-end; }
.tds-stack--align-stretch { align-items: stretch; }
.tds-stack--justify-start { justify-content: flex-start; }
.tds-stack--justify-center { justify-content: center; }
.tds-stack--justify-end { justify-content: flex-end; }
.tds-stack--justify-between { justify-content: space-between; }

/* --- SiteHeader -----------------------------------------------------------
   出典: blog-article.html:1439-1476（全テンプレで同値）。 */
.tds-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-16) var(--space-40);
  background: var(--color-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 2;
}

.tds-header--fixed { position: fixed; top: 0; left: 0; }
.tds-header--static { position: static; }

.tds-header__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-40);
  box-sizing: border-box;
  width: var(--container-page);
  max-width: 100%;
}

.tds-header__logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tds-header__logo { display: block; height: 76px; width: auto; max-width: 100%; }

.tds-header__right {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-12);
}

.tds-header__nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

.tds-header__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-12);
}

/* ハンバーガー。840px 以下でだけ出る。 */
.tds-header__menu {
  display: none;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-strong);
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}
.tds-header__menu .tds-icon { font-size: 24px; }
.tds-header__menu:hover { opacity: 0.7; }
.tds-header__menu:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

@media (max-width: 840px) {
  .tds-header { padding: var(--space-16) 32px; }
  .tds-header__nav { display: none; }
  .tds-header__actions { gap: var(--space-16); }
  .tds-header__menu { display: flex; }
}

@media (max-width: 540px) {
  .tds-header { padding: var(--space-12) var(--space-16); }
  .tds-header__inner { gap: var(--space-16); }
  .tds-header__logo { height: 52px; }
  .tds-header__right { gap: var(--space-16); }
  /* ★ 540px 以下では CTA も消えて、ロゴとハンバーガーだけになる。 */
  .tds-header__actions > *:not(.tds-header__menu) { display: none; }
}

/* --- SiteFooter -----------------------------------------------------------
   出典: index.html:2057-2082。
   ★ 背景色なし（transparent）・区切り罫なし。 */
.tds-footer {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-60);
  width: 100%;
  margin: 0;
  padding: 64px var(--space-40) var(--space-24);
  background: transparent;
}

.tds-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-24);
  box-sizing: border-box;
  width: var(--container-page);
  max-width: 100%;
}

.tds-footer__top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-40);
  width: 100%;
}

.tds-footer__brand { display: flex; align-items: center; justify-content: center; }
.tds-footer__logo { display: block; height: 32px; width: auto; max-width: 100%; }

.tds-footer__nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* フッターのナビは 15px/700（ヘッダーの 400 より太い）。面は付かず下線だけ伸びる。 */
.tds-footer__nav .tds-navlink:hover { background: transparent; }
.tds-footer__nav .tds-navlink__label { font-weight: 700; }

.tds-footer__social {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 32px;
  width: 100%;
}

.tds-footer__bottom {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
  width: 100%;
}

.tds-footer__legal {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-24);
}

.tds-footer__legal-link,
.tds-footer__copyright {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-feature-settings: 'palt' 1;
  font-size: 12px;
  font-weight: 400;
  line-height: var(--leading-heading);
  letter-spacing: normal;
  text-align: left;
  text-decoration: none;
}

.tds-footer__legal-link { transition: opacity var(--dur) var(--ease); }
.tds-footer__legal-link:hover { opacity: 0.7; }
.tds-footer__legal-link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

@media (max-width: 840px) {
  .tds-footer { padding: 64px 32px var(--space-24); }
  .tds-footer__inner { align-items: flex-start; }
  .tds-footer__top { flex-direction: column; align-items: flex-start; gap: var(--space-40); }
  .tds-footer__nav { justify-content: flex-start; }
  .tds-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-24); }
}

@media (max-width: 540px) {
  .tds-footer { padding: 0 var(--space-16) var(--space-24); }
  .tds-footer__logo { height: 28px; }
  .tds-footer__social { align-items: center; justify-content: center; }
  .tds-footer__legal-link,
  .tds-footer__copyright { font-size: 11px; }
}

/* --- PageHero -------------------------------------------------------------
   出典: blog-article.html:1495-1501。
   ★ 暗幕は背景画像そのものに filter:brightness(0.7) を掛ける方式。
     半透明の黒を重ねる別レイヤーは実サイトに存在しない。 */
.tds-page-hero {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 280px;
  overflow: hidden;
  line-height: 1.5;
}

.tds-page-hero__bg {
  position: absolute;
  inset: 0;
  display: block;
  background-color: var(--color-inverse-bg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  filter: brightness(0.7);
  pointer-events: none;
}

.tds-page-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-24);
  box-sizing: border-box;
  width: var(--container-grid);
  max-width: calc(100% - 80px);
  margin: var(--space-40);
  padding: 0;
}

.tds-page-hero__title {
  margin: 0;
  color: var(--color-inverse-ink);
  font-family: var(--font-body);
  font-size: 64px;
  font-weight: 700;
  text-align: left;
}

.tds-page-hero__subtitle {
  margin: 0;
  padding: 0;
  color: var(--color-inverse-ink);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  text-align: center;
}

@media (max-width: 540px) {
  .tds-page-hero { height: 200px; }
  .tds-page-hero__inner { gap: var(--space-16); margin: var(--space-40) var(--space-20); max-width: calc(100% - 40px); }
  .tds-page-hero__title { font-size: 36px; }
  .tds-page-hero__subtitle { font-size: var(--space-16); }
}

/* --- BannerCta ------------------------------------------------------------
   出典: blog-article.html:1527-1529。
   ★ Content で影を持つのはこの部品とモーダルだけ。情報カードには絶対に付けない。 */
.tds-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 592px;
  max-width: 100%;
  padding: 0;
  text-decoration: none;
}

.tds-banner__box {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100px;
  margin: var(--space-50) 0;
  padding: 15px;
  background: var(--color-brand-banner);
  border-radius: var(--r-control);
  box-shadow: var(--shadow-hard);
  transition: opacity var(--dur) var(--ease);
}

/* 規則4。実サイトには hover が無いが、押せることが伝わらないので足してある。 */
.tds-banner:hover .tds-banner__box { opacity: 0.7; }

.tds-banner:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.tds-banner__label {
  margin: 0;
  padding: 0 0 2px;
  color: var(--color-inverse-ink);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

@media (max-width: 540px) {
  .tds-banner__box { margin: var(--space-20) 0; width: 80%; max-width: 80%; }
}

/* --- ArticleMeta ----------------------------------------------------------
   出典: blog-article.html:1505-1518。 */
.tds-article-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-16);
  box-sizing: border-box;
  width: var(--container-prose);
  max-width: 100%;
  padding: 0;
}

.tds-article-meta__tags {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
}

.tds-article-meta__title {
  margin: 0;
  color: var(--color-text-strong);
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}

.tds-article-meta__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-20);
  width: 100%;
}

.tds-article-meta__author {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
}

.tds-article-meta__avatar {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: var(--r-avatar);
  background-color: var(--color-fill);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.tds-article-meta__divider {
  display: block;
  flex: none;
  width: 1px;
  height: 18px;
  border-radius: 2px;
  background: var(--color-line-quiet);
}

.tds-article-meta__name,
.tds-article-meta__date {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}

@media (max-width: 540px) {
  .tds-article-meta__title { font-size: var(--space-24); }
  .tds-article-meta__avatar { width: 32px; height: 32px; }
  .tds-article-meta__name,
  .tds-article-meta__date { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .tds-btn,
  .tds-btn__icon,
  .tds-menu-dialog__close,
  .tds-menu-dialog__link,
  .tds-submit,
  .tds-input,
  .tds-radio-field__item,
  .tds-searchbox__input,
  .tds-searchbox__submit,
  .tds-snackbar,
  .tds-tag,
  .tds-card,
  .tds-navlink,
  .tds-navlink__bar,
  .tds-loadmore__button,
  .tds-header__menu,
  .tds-footer__legal-link,
  .tds-banner__box {
    transition: none;
  }
}

/* ===== landing.css ===== */
/* ==========================================================================
   Landing 言語 — トップページ / 新規LP
   Noto Sans JP 900/500/300、letter-spacing 5px/2px/1px、文字は #3C3C3C 一色。
   CTA は PillButton（radius 1200px）のみ。面は 白 / #FBF7EA / 半透明グラデ。
   ★ Content と違い、Landing の装飾部品は影を使ってよい。

   ★ Content と1ページの中で混ぜない。Button と PillButton が同じ画面に出たら設計ミス。
   ========================================================================== */

/* --- PillButton -----------------------------------------------------------
   出典: index.html:1503-1510（.sd-24/25/26 = pink、.sd-27/28/29 = dark）
         index.html:2052-2055（.sd-379/380/381 = gradient）

   ★ kind は色だけでなくサイズ・影・レイアウト方向も決める。実データに共通軸が無いので
     1軸に畳むのが正しい。tone という名前は「色だけ」と嘘をつくので kind にしてある。 */
.tds-pill {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  border: 0;
  padding: 0;
  border-radius: var(--r-pill);
  max-width: 100%;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}

/* 規則4: 面が主張する装飾部品の hover は opacity:.7。
   ★ ピルには border 宣言そのものが無いので、Button のように面を消すと
     白文字が白地に載って読めなくなる。background を透明にする規則は使わない。 */
.tds-pill:hover { opacity: 0.7; }

.tds-pill:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.tds-pill__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: var(--color-inverse-ink);
  font-family: var(--font-display);
  font-style: normal;
  text-align: center;
}

/* --- solid-pink / solid-dark: 幅277 / 20px900 / --shadow-pill / column ---- */
.tds-pill--solid-pink,
.tds-pill--solid-dark {
  flex-direction: column;
  width: 277px;
  box-shadow: var(--shadow-pill);
}
.tds-pill--solid-pink { background: var(--color-brand-pill-pink); }
.tds-pill--solid-dark { background: var(--color-brand-pill-dark); }

.tds-pill--solid-pink .tds-pill__label,
.tds-pill--solid-dark .tds-pill__label {
  height: 60px;
  padding: 27px 49px 27px 30px;
  font-size: 20px;
  font-weight: 900;
  line-height: 20px;
  letter-spacing: 0;
}

/* solid-dark は反転面なので、白地用の #004f66 リングだと 1.43:1 で見えない */
.tds-pill--solid-dark:focus-visible {
  outline-color: var(--color-focus-ring-inverse);
}

/* --- gradient: 幅320 / 18px900 / --shadow-gradient-pill / row ------------- */
.tds-pill--gradient {
  flex-direction: row;
  width: 320px;
  margin: 0 var(--space-20);
  max-width: calc(100% - 40px);
  background: var(--color-gradient-cta);
  box-shadow: var(--shadow-gradient-pill);
}

.tds-pill--gradient .tds-pill__label {
  height: 76px;
  padding: 35px 30px;
  font-size: 18px;
  font-weight: 900;
  line-height: 24px;
  letter-spacing: var(--tracking-display-body);
}

/* --- HeroTop --------------------------------------------------------------
   出典: index.html:1495-1510。
   ★ 下層の PageHero とは別物。暗幕（brightness）は掛けない。 */
.tds-hero-top {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 740px;
  padding: 0 100px;
  overflow: hidden;
  background: var(--color-inverse-bg);
}

.tds-hero-top__bg {
  position: absolute;
  inset: 0;
  display: block;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}

.tds-hero-top__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  width: 1052px;
  max-width: 100%;
}

.tds-hero-top__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

/* グラデーションを background-clip:text で流し込んだ見出し。 */
.tds-hero-top__lead {
  width: 100%;
  margin: -1px 0 0;
  padding: 0;
  color: transparent;
  background: var(--color-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: var(--tracking-display-sub);
  text-align: left;
}

.tds-hero-top__title {
  margin: 0;
  color: var(--color-inverse-ink);
  font-family: var(--font-display);
  font-size: 43px;
  font-weight: 900;
  line-height: var(--leading-heading);
  text-align: left;
}

.tds-hero-top__subtitle {
  width: 100%;
  margin: 0;
  color: var(--color-inverse-ink-faint);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 300;
  line-height: 26px;
  letter-spacing: 3px;
  text-align: left;
}

/* CTA は PillButton のみ。Content の Button をここに置いたら設計ミス。 */
.tds-hero-top__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-20);
  width: 100%;
  padding: 11px 0 var(--space-20) 3px;
  overflow: hidden;
}

@media (max-width: 540px) {
  .tds-hero-top { padding: 0 var(--space-20); }
  .tds-hero-top__actions { padding: var(--space-40) 0 var(--space-8) 2px; }
  .tds-pill--solid-pink .tds-pill__label,
  .tds-pill--solid-dark .tds-pill__label { padding: var(--space-12) 14px; }
}

/* --- GradientHeading ------------------------------------------------------
   出典: index.html:1498（hero）/ :1760（section）。
   実サイトでこの手法を使っているのは2箇所だけ。 */
.tds-gradient-heading {
  width: 100%;
  max-width: 100%;
  margin: -1px 0 0;
  padding: 0;
  color: transparent;
  background: var(--color-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  font-family: var(--font-display);
  font-size: 64px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: var(--tracking-display-sub);
  text-align: left;
}

.tds-gradient-heading--section {
  margin: 0;
  font-size: 44px;
  line-height: 72px;
}

@media (max-width: 840px) {
  .tds-gradient-heading { font-size: 28px; }
  .tds-gradient-heading--section { font-size: 36px; line-height: 1.6; }
}

@media (max-width: 540px) {
  .tds-gradient-heading { font-size: var(--space-24); line-height: 1.5; }
  .tds-gradient-heading--section { font-size: 28px; line-height: 2; }
}

/* --- GlassPanel -----------------------------------------------------------
   出典: index.html:1762-1764。背後に色や写真がある場所でしか成立しない。 */
.tds-glass {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
  padding: 30px 30px 30px 45px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.tds-glass__text {
  margin: 0;
  color: var(--color-inverse-ink);
  font-family: var(--font-display);
  font-size: var(--space-16);
  font-weight: 500;
  line-height: var(--space-40);
  letter-spacing: var(--tracking-display-body);
  text-align: left;
}

@media (max-width: 840px) {
  .tds-glass { width: 100%; }
  .tds-glass__text { font-size: 14px; }
}

@media (max-width: 540px) {
  .tds-glass__text { font-size: 13px; }
}

/* --- EffectCard -----------------------------------------------------------
   出典: index.html:1657 / 1667 / 1677 / 1687 / 1699 / 1709 / 1719 / 1729。
   ★ Landing なので影を使ってよい。8色は用途と対応が決まっている。増やさない。 */
.tds-effect {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 238px;
  max-width: 100%;
  padding: var(--space-40) 31px;
  border-radius: var(--r-effect);
  box-shadow: var(--shadow-glow);
}

.tds-effect--1 { background: linear-gradient(rgba(254, 68, 255, 0.7), rgba(169, 3, 144, 0.7) 95%, rgba(164, 0, 138, 0.7)); }
.tds-effect--2 { background: linear-gradient(rgba(122, 120, 255, 0.7), rgba(18, 0, 255, 0.7)); }
.tds-effect--3 { background: linear-gradient(rgb(102, 255, 132), rgba(0, 161, 16, 0.7)); }
.tds-effect--4 { background: linear-gradient(rgba(255, 168, 97, 0.7), rgba(251, 136, 0, 0.7)); }
.tds-effect--5 { background: linear-gradient(rgba(255, 52, 179, 0.7), rgba(255, 0, 158, 0.7)); }
.tds-effect--6 { background: linear-gradient(rgba(255, 191, 161, 0.7), rgba(255, 164, 82, 0.7)); }
.tds-effect--7 { background: linear-gradient(rgba(88, 198, 255, 0.7), rgba(0, 168, 255, 0.7)); }
.tds-effect--8 { background: linear-gradient(rgba(255, 253, 43, 0.7), rgba(255, 252, 42, 0.71) 0%, rgb(255, 219, 0)); }

.tds-effect__title {
  margin: 0;
  color: var(--color-inverse-ink);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  line-height: 30px;
  letter-spacing: var(--tracking-display-body);
  text-align: center;
}

.tds-effect__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 57px;
  max-width: 100%;
  margin: var(--space-12) 0 0;
  overflow: hidden;
}

.tds-effect__media img { display: block; width: 100%; height: auto; }

.tds-effect__body {
  margin: 0;
  color: var(--color-inverse-ink);
  font-family: var(--font-display);
  font-size: var(--space-16);
  font-weight: 500;
  line-height: 26px;
  letter-spacing: var(--tracking-display-body);
  text-align: center;
}

@media (max-width: 840px) {
  .tds-effect__title { font-size: 18px; }
  .tds-effect__body { font-size: 14px; }
}

@media (max-width: 540px) {
  .tds-effect__title { font-size: 15px; }
  .tds-effect__body { font-size: 13px; }
}

/* --- StepBadge ------------------------------------------------------------
   出典: index.html:1576 / 1594 / 1610。
   ★ 背景色も文字色も持たない。丸い画像枠であってバッジではない。 */
.tds-step-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 196px;
  max-width: 100%;
  margin: 0;
  padding: 57px var(--space-40);
  border-radius: var(--r-badge);
}

.tds-step-badge img { display: block; width: 100%; height: auto; }

@media (max-width: 540px) {
  .tds-step-badge { padding: var(--space-20); }
}

/* --- Highlight ------------------------------------------------------------
   出典: index.html:1582 / 1598 / 1616。
   ★ 記事の TbdMark とは別物（色も比率も違う）。混ぜない。 */
.tds-highlight {
  display: inline-flex;
  flex-direction: row;
  /* 実CSSどおり nowrap。狭い親に入れると中の語が途中で折れるので、
     置き場所は語句が1行に収まる幅を確保すること。 */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: linear-gradient(360deg, rgb(255, 246, 23) 40.54%, rgba(255, 246, 23, 0) 40.54%);
}

.tds-highlight > * { flex: none; }

/* --- FeaturePanel ---------------------------------------------------------
   出典: index.html:1789（外側）/ :1795（内側）/ :1797（メディア）/ :1808（見出し）。
   ★ 外側のクリームは 20px、内側は --r-panel(16px)。角丸ロールを1つ増やす値ではなく、
     この部品の内部寸法なのでここだけ生の px で書く（LoadMoreButton の 20px と同じ扱い）。 */
.tds-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  width: var(--container-wide);
  max-width: 100%;
  padding: 0 0 67px;
}

.tds-feature__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-40);
  background: var(--color-surface-cream-strong);
  border-radius: 20px;
}

.tds-feature__row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}

.tds-feature__well {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 1;
  padding: var(--space-40) 0;
  background: var(--color-surface-cream);
  border-radius: var(--r-panel);
}

.tds-feature__media {
  width: 80%;
  border-radius: var(--r-media-lg);
  overflow: hidden;
}

.tds-feature__media img,
.tds-feature__media video {
  display: block;
  width: 100%;
  height: auto;
}

.tds-feature__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--space-32) 0 0 30px;
  overflow: hidden;
}

.tds-feature__title {
  margin: 0;
  color: var(--color-on-cream);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  line-height: 44px;
  letter-spacing: 0;
  text-align: left;
}

.tds-feature__body {
  margin: 0;
  color: rgba(59, 48, 10, 0.8);
  font-family: var(--font-display);
  font-size: var(--space-16);
  font-weight: 500;
  line-height: 26px;
  letter-spacing: var(--tracking-display-body);
  text-align: left;
}

@media (max-width: 840px) {
  .tds-feature__row { flex-direction: column-reverse; gap: var(--space-40); }
  .tds-feature__text { padding: 0 0 0 30px; }
  .tds-feature__title { font-size: var(--space-20); }
  .tds-feature__body { font-size: 14px; }
}

@media (max-width: 540px) {
  .tds-feature { padding: 36px 0 0; }
  .tds-feature__panel { padding: var(--space-16); }
  .tds-feature__row { gap: var(--space-16); }
  .tds-feature__text { padding: 0 30px; }
  .tds-feature__title { font-size: var(--space-16); line-height: 1.5; }
  .tds-feature__body { font-size: 13px; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .tds-pill { transition: none; }
}

/* ===== _tbd.generated.css ===== */
/* GENERATED — DO NOT EDIT.
 * source: .claude/skills/blog-article/SKILL.md の凍結CSSブロック
 * regenerate: npm run build（scripts/extract-tbd-css.mjs）
 * source-sha256: ee617b07c483c9c29e38e592b174dfe8a145df9bfff3b89f466977a51cf8023d
 * version-stamp: (* tobidase rich components v1 — このブロックは改変せずそのまま貼る *)
 */
/* tobidase rich components v1 — このブロックは改変せずそのまま貼る */
.tbd-article .tbd-stats,.tbd-article .tbd-case,.tbd-article .tbd-yonde,.tbd-article .tbd-callout{box-sizing:border-box;margin:28px 0;font-family:inherit}
.tbd-article .tbd-stats{padding:20px 4px 4px;border-top:3px solid #1f2a44;display:grid;grid-template-columns:repeat(3,1fr)}
.tbd-article .tbd-stats__item{padding:2px 22px;border-left:1px solid #e7e9ee}
.tbd-article .tbd-stats__item:first-child{border-left:0}
.tbd-article .tbd-stats__num{display:block;font-size:42px;font-weight:900;color:#1f2a44;line-height:1.02;letter-spacing:-.015em;white-space:nowrap}
.tbd-article .tbd-stats__u{font-size:17px;margin-left:3px;color:#e8590c;font-weight:900}
.tbd-article .tbd-stats__lb{display:block;margin-top:9px;font-size:13.5px;color:#555;line-height:1.55}
.tbd-article .tbd-stats__src{grid-column:1/-1;margin:14px 22px 0;font-size:11.5px;color:#9aa0a8;text-align:right}
.tbd-article .tbd-case img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid #eceef1}
.tbd-article .tbd-case figcaption{margin-top:8px;font-size:13px;line-height:1.6;color:#6b7280}
.tbd-article .tbd-yonde{display:grid;grid-template-columns:190px 1fr;gap:22px;align-items:center}
.tbd-article .tbd-yonde__phone{width:100%;height:auto;display:block;border-radius:20px;border:6px solid #1f2a44}
.tbd-article .tbd-yonde__num{font-size:48px;line-height:1.05;font-weight:900;color:#e8590c;letter-spacing:-.01em}
.tbd-article .tbd-yonde__label{display:block;margin-top:6px;font-size:16px;font-weight:700;color:#222}
.tbd-article .tbd-yonde__src{display:block;margin-top:4px;font-size:12px;color:#8a9099}
.tbd-article .tbd-callout{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:16px 18px;border-radius:12px;background:#f7f8fa;border:1px solid #eceef1}
.tbd-article .tbd-callout__icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;color:#fff}
.tbd-article .tbd-callout__body{font-size:15px;line-height:1.7;color:#222}
.tbd-article .tbd-callout__title{display:block;margin-bottom:2px;font-weight:900;color:#1f2a44}
.tbd-article .tbd-callout--point{background:#fff7f0;border-color:#f9dcc4}.tbd-article .tbd-callout--point .tbd-callout__icon{background:#e8590c}
.tbd-article .tbd-callout--info{background:#f2f5fb;border-color:#d7e0f0}.tbd-article .tbd-callout--info .tbd-callout__icon{background:#1f2a44}
.tbd-article .tbd-callout--warn{background:#fff5f5;border-color:#f2c9c9}.tbd-article .tbd-callout--warn .tbd-callout__icon{background:#c8442e}
.tbd-article .tbd-mark{background:linear-gradient(transparent 55%,#ffe08a 55%);font-weight:700;padding:0 1px}
.tbd-article [data-type="table"] table.tbd-price{width:100%;border-collapse:collapse}
.tbd-article [data-type="table"] table.tbd-price th,.tbd-article [data-type="table"] table.tbd-price td{border:1px solid #eceef1;padding:12px 14px;text-align:left}
.tbd-article [data-type="table"] table.tbd-price thead th{background:#f7f8fa;color:#1f2a44;font-weight:900}
.tbd-article [data-type="table"] table.tbd-price .is-reco{background:#fff7f0}
.tbd-article [data-type="table"] table.tbd-price thead .is-reco{background:#e8590c;color:#fff}
.tbd-article [data-type="table"] table.tbd-price .is-reco--num{font-weight:900;color:#e8590c}
/* 引用カードは縦型。主役画像を本文幅いっぱい(671px)で見せ、論評を下に置く。旧・左220pxの小サムネ横型は廃止(AR実画面が読めなかった)。font-size:0 は書かない(img{display:block}でベースラインギャップは消えており、画像404時にaltが1文字も出なくなる副作用しかない) */
.tbd-article .tbd-cite{box-sizing:border-box;margin:36px 0;display:block;border:1px solid #e3e6ea;border-left:4px solid #1f2a44;border-radius:12px;overflow:hidden;background:#f7f8fa}
.tbd-article .tbd-cite__hero{margin:0;background:#eceef1;text-align:center;font-size:12px;color:#6b7280}
/* 無加工担保: object-fit:cover を足さない(クロップ=引用要件違反)。max-height だけで頭打ちにすればアスペクト比は保たれる */
.tbd-article .tbd-cite__hero img{display:block;margin:0 auto;max-width:100%;width:auto;height:auto;max-height:450px}
/* 枠を埋められない画像用の台紙。max-height:450 のとき描画幅は min(671, 450×比) なので、比1.4で630px(片側20px)・比1.33で598px(片側36px)と急にグレーが目立ちだす。埋まらない画像を素で置くと左右のグレーが「組み損ない」に見えるため、意図的な余白に変える */
.tbd-article .tbd-cite__hero--mount{padding:12px}
.tbd-article .tbd-cite__hero--mount img{max-height:400px;border-radius:6px;border:1px solid #dfe3e8;background:#fff}
/* 補助サムネ(1枚まで)。中央寄せの単独小片は「置き場所を失った2枚目」に見えるので左寄せ+キャプションにする */
.tbd-article .tbd-cite__sub{display:flex;align-items:center;gap:12px;margin:0;padding:10px 12px;background:#eceef1;font-size:12px}
.tbd-article .tbd-cite__sub img{flex:none;display:block;max-width:45%;width:auto;height:auto;max-height:96px;border-radius:6px;border:1px solid #dfe3e8;background:#fff}
.tbd-article .tbd-cite__subcap{line-height:1.6;color:#5a626b}
/* hero と sub の間には罫線を引かない(グレーの塊=借り物、と一目で読ませる)。区切りは body の border-top に寄せる */
.tbd-article .tbd-cite__body{padding:14px 16px;border-top:1px solid #e3e6ea}
.tbd-article .tbd-cite__src{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:#5a626b;margin-bottom:8px}
.tbd-article .tbd-cite__badge{flex:none;font-size:11px;font-weight:900;color:#fff;background:#1f2a44;border-radius:5px;padding:2px 9px;letter-spacing:.03em}
.tbd-article .tbd-cite__src a{color:#1f2a44;font-weight:700}
.tbd-article .tbd-cite__note{font-size:14px;line-height:1.75;color:#333;margin:0}
.tbd-article .tbd-cite__note b{color:#1f2a44}
@media (max-width:640px){.tbd-article .tbd-stats,.tbd-article .tbd-yonde{grid-template-columns:1fr}.tbd-article .tbd-cite__sub{display:block}.tbd-article .tbd-cite__sub img{max-width:60%;max-height:72px}.tbd-article .tbd-cite__subcap{display:block;margin-top:6px}.tbd-article .tbd-stats__num{font-size:36px}.tbd-article .tbd-yonde__num{font-size:40px}}