/* ============================================================
 * styles.css
 * 各パーツ別CSS(tokens/header/breadcrumb/article-view/article/
 * faq/other-article/promotion/footer/table-of-contents)を
 * 1ファイルに統合したもの。セクション構成は元のファイル分割を
 * そのままコメント区切りとして踏襲している。
 * ============================================================ */

/* ---------- tokens.css ---------- */
/**
 * Design Tokens
 * Figma file: JhKxYYcOY4cxr0SR6x3QM3
 * Source nodes: 621:12077 / 621:12120 / 614:85863 / 557:60912 / 572:10414 / 557:60930
 */
:root {
  /* --- Color / Primitive ---
   * --primitive-white は汎用の生の白(Figma: Primitive/White)。
   * 同値の --columnpage-bg-surface とは役割が異なるため統合しない
   * (下記Surfaceセクションのコメント参照)。
   */
  --primitive-white: #ffffff;
  --primitive-sapphire-50: #f2f9fd;
  /* --primitive-sapphire-600 は生のカラーパレット値(Figma: Primitive/Sapphire/600)。
   * 同値の --semantic-specifictext-interactivecolor とは役割が異なるため統合しない
   * (Atom-Badgeセクションのコメント参照)。
   */
  --primitive-sapphire-600: #1a7fb5;
  /* --primitive-sapphire-700 はFAQCardの内側(question_row)の下線専用。値は#16638eで
   * --color-interactive-text と同じだが、Figma上でも別変数(Primitive/Sapphire/700)
   * が明示的にバインドされているため統合しない(役割: 枠線 vs テキスト色)。
   */
  --primitive-sapphire-700: #16638e;
  --primitive-hematite-100: #e7e7e7;
  --primitive-hematite-400: #888888;
  --primitive-turquoise-500: #1aabb5;
  --primitive-sapphire-400: #4fb3e1;
  --primitive-amber-50: #fbf9eb;
  --primitive-amber-700: #8c591c;
  /* Footer専用。Figma上「Sapphire/800」(prefixなし)と「Primitive/Sapphire/800」の
   * 2つの変数名が同値(#165476)で登場するが、どちらもFooter背景という同一の役割の
   * ため単一トークンに統合する(役割が異なる他の同値ケースとは異なり、命名揺れと判断)。
   */
  --primitive-sapphire-800: #165476;
  --primitive-sapphire-300: #8ccded;
  --primitive-sapphire-900: #184662;
  --primitive-sapphire-100: #e4f1fa;
  /* ArticleListPageのヒーローバナー(グラデーション)専用。値は
   * --primitive-sapphire-600/--primitive-turquoise-500と同じだが、Figma上でも
   * 「brand/primary」「brand/primary-alt」という別スコープの変数が明示的に
   * バインドされているため統合しない。
   */
  --color-brand-primary: #1a7fb5;
  --color-brand-primary-alt: #1aabb5;

  /* --- Color / Semantic --- */
  --semantic-basictext-primary: #333333;
  --semantic-basictext-secondary: #4f4f4f;
  --semantic-basictext-tertiary: #6d6d6d;
  /* リンク/ボタンラベルなど、汎用の「操作可能テキスト」色(Figma: Semantic/SpecificText/interactiveColor)。
   * header・breadcrumbで使用。
   */
  --semantic-specifictext-interactivecolor: #1a7fb5;
  /* TOCの「すべてを表示」ボタン専用の操作可能テキスト色。値は#16638eで
   * --semantic-specifictext-interactivecolor(#1a7fb5)とは異なる別トークンなので統合対象外。
   * 名前が紛らわしいため要注意(同じ「interactive text」でも別コンポーネント用の別トークン)。
   */
  --color-interactive-text: #16638e;
  --semantic-dividercolor-light: #d1d1d1;

  /* --- Color / Accent (section-promotion / JobSearchCTA専用) --- */
  --color-accent-section-bg: #fef5ee;
  --color-accent-text-on-accent-bg: #410f09;
  --color-accent-highlight: #f06124;
  /* Atom / Button-CTA のグラデーション塗り。Figma上は
   * 「塗りはグラデーションのためVariable未バインド(手動管理)」と明記されているが、
   * CSS側でのハードコード回避のためtokens.cssで一元管理する。
   */
  --gradient-cta-button: linear-gradient(101.68324746977115deg, rgb(255, 170, 72) 11.542%, rgb(240, 97, 36) 82.76%);

  /* --- Color / Organism-RichCTA-Container (TOP専用) --- */
  --color-accent-card-bg: #fff9ef;
  --color-accent-border: #ff7b22;
  --color-accent-highlight-light: #ffe9a3;
  --gradient-richcta-photo-bg: linear-gradient(to bottom, var(--color-accent-highlight-light), var(--color-accent-border));
  --richcta-button-shadow: rgba(240, 97, 36, 0.5);

  /* --- Color / Molecule-h2 (section_faq / section_other-article アイコン) ---
   * アイコン自体はVariable未バインドのグラデーション(手動管理)。影の色は
   * Primitive/Sapphire/600の15%透過。
   */
  --gradient-section-heading-icon: linear-gradient(113.75deg, var(--primitive-sapphire-600) 3.91%, var(--primitive-turquoise-500) 90.23%);
  --section-heading-icon-shadow: rgba(26, 127, 181, 0.15);

  /* --- Color / Surface ---
   * --toc-surface-bg (TOCカードの背景) と --toc-overlay-gradient-to (折りたたみ時
   * オーバーレイのグラデーション終端色) は「カード背景に溶け込むグラデーション」という
   * 意図的な結合関係にあるため、値を都度手入力せず --toc-overlay-gradient-to から
   * --toc-surface-bg を参照する形にしている(値がズレると継ぎ目が見えてしまうため)。
   * 役割(単色の背景 / グラデーションの終端)自体は異なるので、トークンとしては分けたまま。
   */
  --toc-surface-bg: #f6f6f6;
  --toc-overlay-gradient-from: rgba(246, 246, 246, 0.1);
  --toc-overlay-gradient-to: var(--toc-surface-bg);
  --toc-overlay-gradient-stop: 33.594%;
  /* ページ全体のスコープを持つ意味的な表面色(Figma: ColumnPage-scoped semantic/bg/surface)。
   * 現状 --primitive-white と同値(#ffffff)だが、Figma上でも別変数として定義されており、
   * 将来ページ単位でのみ色を変えたい場合に備えて統合しない。
   */
  --columnpage-bg-surface: #ffffff;
  /* ページ最上位フレーム自体(例: pc/ArticlePage 605:9846)の背景色。
   * Figmaバインド変数: ColumnPage-scoped semantic/bg/base。
   * main(605:9849)自体は背景指定を持たない(透過)ため、main内セクション間の
   * 隙間にはこの色がそのまま見える。同値の --toc-surface-bg(#f6f6f6, TOCカード
   * 背景)とは役割が異なるため統合しない(breakpoint-spec.md「ページ最上位
   * フレームのスタイル」参照)。
   */
  --columnpage-scoped-bg-base: #f6f6f6;
  /* section_faq・section_search-by-concernなど、個別セクション単位の背景色
   * (Figma: color-bg-page)。mainなど上位コンテナには使わない。
   */
  --color-bg-page: #fafafa;
  /* FAQCard・ArticleCardなど個別カードの背景色(Figma: color-bg-surface)。
   * 同値の --columnpage-bg-surface(ColumnPage-scoped semantic/bg/surface)とは
   * Figma上で別変数(スコープなしの汎用surfaceトークン)のため統合しない。
   */
  --color-bg-surface: #ffffff;

  /* --- Color / Atom-Badge ---
   * Atom / Badge のFigma説明に「他セクションのタグには展開しない専用トークン」と
   * 明記されているため、値が同じでも --primitive-sapphire-600 / 汎用の
   * interactiveColor 系トークンとは統合せず、Badge専用のエイリアスとして分離する。
   */
  --badge-bg: var(--primitive-sapphire-50);
  --badge-text: var(--primitive-sapphire-600);

  /* --- Color / Footer (Scrollボタン) --- */
  --footer-scroll-btn-bg: rgba(16, 45, 65, 0.8);
  --footer-scroll-btn-shadow: rgba(0, 0, 0, 0.32);

  /* --- Color / ArticleListPage hero 装飾アーク --- */
  --hero-arc-color-light: rgba(55, 208, 217, 0.1);
  --hero-arc-color: rgba(55, 208, 217, 0.2);

  /* --- Radius --- */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* --- Spacing (Primitive) --- */
  --spacing-0: 0px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;

  /* --- Font size (Primitive) --- */
  --fontsize-11: 11px;
  --fontsize-12: 12px;
  --fontsize-13: 13px;
  --fontsize-15: 15px;
  --fontsize-16: 16px;
  --fontsize-18: 18px;
  --fontsize-22: 22px;
  --fontsize-24: 24px;
  --fontsize-26: 26px;
  --fontsize-42: 42px;

  /* --- Font family --- */
  --font-family-base: "Noto Sans JP", sans-serif;

  /* --- Typography / caption-sm/regular & caption-sm/bold --- */
  --caption-sm-regular-size: var(--fontsize-11);
  --caption-sm-regular-weight: 400;
  --caption-sm-regular-line-height: 17.6px;
  --caption-sm-bold-weight: 700;

  /* --- Typography / caption-md/regular --- */
  --caption-md-regular-size: var(--fontsize-12);
  --caption-md-regular-weight: 400;
  --caption-md-regular-line-height: 19.2px;

  /* --- Typography / body-sm/regular & body-sm/bold --- */
  --body-sm-regular-size: var(--fontsize-13);
  --body-sm-regular-weight: 400;
  --body-sm-regular-line-height: 20.8px;
  --body-sm-bold-weight: 700;

  /* --- Typography / body-md/bold --- */
  --body-md-bold-size: var(--fontsize-15);
  --body-md-bold-weight: 700;
  --body-md-bold-line-height: 24px;

  /* --- Typography / body-md/regular --- */
  --body-md-regular-size: var(--fontsize-15);
  --body-md-regular-weight: 400;
  --body-md-regular-line-height: 24px;

  /* --- Typography / body-lg/regular & body-lg/bold --- */
  --body-lg-regular-size: var(--fontsize-16);
  --body-lg-regular-weight: 400;
  --body-lg-regular-line-height: 25.6px;
  --body-lg-bold-size: var(--fontsize-16);
  --body-lg-bold-weight: 700;
  --body-lg-bold-line-height: 25.6px;

  /* --- Typography / heading-xlg/bold --- */
  --heading-xlg-bold-size: var(--fontsize-26);
  --heading-xlg-bold-weight: 700;
  --heading-xlg-bold-line-height: 39px;

  /* --- Typography / heading-2xlg/bold (ArticleListPage hero, tablet/pc) --- */
  --heading-2xlg-bold-size: var(--fontsize-42);
  --heading-2xlg-bold-weight: 700;
  --heading-2xlg-bold-line-height: 63px;

  /* --- Typography / heading-sm/bold --- */
  --heading-sm-bold-size: var(--fontsize-18);
  --heading-sm-bold-weight: 700;
  --heading-sm-bold-line-height: 28.8px;

  /* --- Typography / heading-lg/bold --- */
  --heading-lg-bold-size: var(--fontsize-24);
  --heading-lg-bold-weight: 700;
  --heading-lg-bold-line-height: 36px;

  /* --- Breakpoints (breakpoint-spec.md) --- */
  --breakpoint-tablet: 768px;
  --breakpoint-pc: 1280px;
  --content-max-width: 1280px;
  /* 記事本文カラム(main)の固定幅(Figma pc/ArticlePage: main = w-768px)。
   * Header/Breadcrumbのようなmax-width:1280pxの帯パターンではなく、
   * 768px固定カラムを親のflexで中央寄せする別方式。値は --breakpoint-tablet と
   * 偶然同じ768pxだが、意味が異なるため独立したトークンとして持つ。
   */
  --article-main-width: 768px;
}

/* ---------- header.css ---------- */
/**
 * HeaderUnits (sp)
 * Figma node: 557:60912
 *
 * breakpoint-spec.md の3層構造に合わせ、背景(白)を画面幅いっぱいに広げる
 * outer層と、max-width:1280pxで頭打ちになるinner層を分離している。
 *
 * 備考: 「tablet用の専用バリアントは無し。pc用をそのまま適用」とFigma上に
 * 記載があるため、tablet/pc向けの実装は別途pc版ノードを参照して追加する。
 */

.header-outer {
  width: 100%;
  display: flex;
  justify-content: center;
  background: var(--primitive-white);
}

.header-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--content-max-width);
  height: 64px;
  padding-inline: var(--spacing-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

.header__brand-caption {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--caption-sm-regular-weight);
  font-size: var(--caption-sm-regular-size);
  line-height: var(--caption-sm-regular-line-height);
  color: var(--semantic-basictext-primary);
  word-break: break-word;
}

.header__logo {
  display: block;
  width: 174px;
  height: 26px;
}

.header__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
}

.header__nav-item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  width: 56px;
  height: 56px;
  padding: var(--spacing-4);
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

.header__nav-icon {
  display: block;
  width: 24px;
  height: 24px;
}

.header__nav-label {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--caption-md-regular-weight);
  font-size: var(--caption-md-regular-size);
  line-height: var(--caption-md-regular-line-height);
  color: var(--semantic-specifictext-interactivecolor);
  text-align: center;
  white-space: nowrap;
}

/* ---------- breadcrumb.css ---------- */
/**
 * Molecule / Breadcrumb (sp, level 4)
 * Figma node: 572:10414
 *
 * breakpoint-spec.md の3層構造に合わせ、outer(nav)/inner(ol)を分離している。
 *
 * 備考: PC/Tablet では帯(outer)側のpaddingを96px固定で最低保証しつつ、
 * center寄せと併用する仕様がFigma上に記載されている(pc-wide/ArticlePageで検証)。
 * 今回はsp/ArticlePageのみが対象のため、inner側にSPのpadding(16px)のみを実装し、
 * outer側のpadding+center対応はpc版ノード実装時に追加すること。
 */

.breadcrumb-outer {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.breadcrumb-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0;
  padding: var(--spacing-16);
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--spacing-4);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: var(--spacing-4);
}

.breadcrumb__link {
  font-family: var(--font-family-base);
  font-weight: var(--caption-md-regular-weight);
  font-size: var(--caption-md-regular-size);
  line-height: var(--caption-md-regular-line-height);
  color: var(--semantic-specifictext-interactivecolor);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.breadcrumb__chevron {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.breadcrumb__current {
  font-family: var(--font-family-base);
  font-weight: var(--caption-md-regular-weight);
  font-size: var(--caption-md-regular-size);
  line-height: var(--caption-md-regular-line-height);
  color: var(--semantic-basictext-primary);
  text-align: center;
  white-space: nowrap;
}

/* ---------- article-view.css ---------- */
/**
 * section_article-view (sp base: 557:60930 / pc参照: 605:9846 pc/ArticlePage内 605:9850)
 *
 * KV画像(kv-image)は「Atom / Thumbnail」ではなく実写真を敷いた矩形のため、
 * グレー背景+山アイコンのプレースホルダー実装は対象外。16:9のまま
 * object-fit:coverで実画像を表示する。
 *
 * .article-main は pc/ArticlePage の "main" ノードに対応するラッパー。
 * Header/Breadcrumbのような「外ラッパー=fill/center・内コンテンツ=max-width:1280px」
 * の帯パターンとは異なり、PCでは記事本文カラム自体が --article-main-width(768px)の
 * 固定幅になり、それをmargin-inline:autoで中央寄せする方式(Figma上は親のflex
 * align-items:centerで実現しているが、算出結果は同じ)。tablet/pc向けの他セクション
 * (目次PC版・FAQ・関連記事など)は本対応のスコープ外のため未実装。
 */

.article-main {
  width: 100%;
  padding-bottom: var(--spacing-32);
}

@media (min-width: 768px) {
  .article-main {
    width: var(--article-main-width);
    margin-inline: auto;
  }
}

.article-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--columnpage-bg-surface);
}

.article-view__kv {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.article-view__kv-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-view__content {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16);
  padding: var(--spacing-24) var(--spacing-16);
}

.article-view__meta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.article-view__date {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--caption-sm-regular-weight);
  font-size: var(--caption-sm-regular-size);
  line-height: var(--caption-sm-regular-line-height);
  color: var(--semantic-basictext-tertiary);
  white-space: nowrap;
}

.article-view__title-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16);
  color: var(--semantic-basictext-primary);
}

.article-view__title {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-base);
  font-weight: var(--heading-xlg-bold-weight);
  font-size: var(--heading-xlg-bold-size);
  line-height: var(--heading-xlg-bold-line-height);
  color: inherit;
  word-break: break-word;
}

.article-view__description {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-base);
  font-weight: var(--body-md-regular-weight);
  font-size: var(--body-md-regular-size);
  line-height: var(--body-md-regular-line-height);
  color: inherit;
}

/* Atom / Badge (専用トークンのみ使用。他タグに流用しない) */
.badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding-inline: var(--spacing-8);
  background: var(--badge-bg);
  border-radius: var(--radius-sm);
}

.badge__text {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--caption-sm-bold-weight);
  font-size: var(--caption-sm-regular-size);
  line-height: var(--caption-sm-regular-line-height);
  color: var(--badge-text);
  white-space: nowrap;
}

/* ---------- article.css ---------- */
/**
 * section_article (sp)
 * Figma node: 557:60940
 *
 * 以下は既存実装をそのまま再利用し、本ファイルでは再定義しない。
 * - Molecule / h2      → css/faq.css の .section-heading
 * - Molecule / JobSearchCTA / Atom / Button-CTA → css/promotion.css の .job-search-cta / .cta-button
 * - Molecule / TableOfContents-折りたたみ表示（spサイズ） → css/table-of-contents.css の .toc 一式
 *   (折りたたみ判定JSも js/table-of-contents.js の data-toc 初期化ロジックをそのまま再利用)
 * - Atom / Badge        → css/article-view.css の .badge (本セクションでは未使用)
 *
 * Molecule / KeyPointItem は article-topic-lists と PointList の両方で
 * 使われる共通パーツのため、.key-point-item として1箇所にまとめている。
 */

.article {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24);
  padding: 0 var(--spacing-16) var(--spacing-24);
  background: var(--columnpage-bg-surface);
}

/* breakpoint-spec.md「セクション左右paddingの実測値」: Tablet/PC共通で32pxに切り替え */
@media (min-width: 768px) {
  .article {
    padding-inline: var(--spacing-32);
  }
}

/* Molecule / KeyPointItem (article-topic-lists / PointList で共通利用) */
.key-point-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
}

.key-point-item__dot-wrap {
  flex-shrink: 0;
  width: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: var(--spacing-4);
}

.key-point-item__dot {
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: var(--primitive-sapphire-400);
}

.key-point-item__text {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--body-md-regular-weight);
  font-size: var(--body-md-regular-size);
  line-height: var(--body-md-regular-line-height);
  color: var(--semantic-basictext-secondary);
}

/* article-topic-lists (この記事でわかること) */
.article-topic-lists {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
  padding: var(--spacing-16);
  background: var(--primitive-white);
  border: 2px solid var(--primitive-turquoise-500);
  border-radius: var(--radius-md);
}

.article-topic-lists__head {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-bottom: var(--spacing-8);
  border-bottom: 1px dashed var(--primitive-sapphire-600);
}

.article-topic-lists__head-title {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--body-md-bold-weight);
  font-size: var(--body-md-bold-size);
  line-height: var(--body-md-bold-line-height);
  color: var(--semantic-basictext-primary);
  white-space: nowrap;
}

.article-topic-lists__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

/* 本文パラグラフ */
.article__paragraph {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-base);
  font-weight: var(--body-md-regular-weight);
  font-size: var(--body-md-regular-size);
  line-height: var(--body-md-regular-line-height);
  color: var(--semantic-basictext-primary);
  word-break: break-word;
}

/* Molecule / h3 */
.article-h3 {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: var(--spacing-8) 0 var(--spacing-8) var(--spacing-16);
  border-left: 2px solid var(--primitive-turquoise-500);
}

.article-h3__title {
  margin: 0;
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--font-family-base);
  font-weight: var(--heading-sm-bold-weight);
  font-size: var(--heading-sm-bold-size);
  line-height: var(--heading-sm-bold-line-height);
  color: var(--semantic-basictext-primary);
}

/* Molecule / PointList */
.point-list {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
  padding: var(--spacing-16);
  background: var(--primitive-white);
  border: 1px solid var(--semantic-dividercolor-light);
  border-radius: var(--radius-md);
}

.point-list__title {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-base);
  font-weight: var(--body-md-bold-weight);
  font-size: var(--body-md-bold-size);
  line-height: var(--body-md-bold-line-height);
  color: var(--semantic-basictext-primary);
}

.point-list__items {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

/* Molecule / PointHighlight (枠線なし・bg/page背景) */
.point-highlight {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
  padding: var(--spacing-16);
  background: var(--color-bg-page);
  border-radius: var(--radius-md);
}

.point-highlight__title {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-base);
  font-weight: var(--body-md-bold-weight);
  font-size: var(--body-md-bold-size);
  line-height: var(--body-md-bold-line-height);
  color: var(--semantic-basictext-primary);
}

.point-highlight__text {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-base);
  font-weight: var(--body-md-regular-weight);
  font-size: var(--body-md-regular-size);
  line-height: var(--body-md-regular-line-height);
  color: var(--semantic-basictext-secondary);
}

/* Molecule / PointAlert */
.point-alert {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
  padding: var(--spacing-16);
  background: var(--primitive-amber-50);
  border-radius: var(--radius-md);
}

.point-alert__head {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
}

.point-alert__icon-area {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.point-alert__icon-area img {
  display: block;
  width: 18px;
  height: 18px;
}

.point-alert__title {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--body-md-bold-weight);
  font-size: var(--body-md-bold-size);
  line-height: var(--body-md-bold-line-height);
  color: var(--primitive-amber-700);
  white-space: nowrap;
}

.point-alert__text {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-base);
  font-weight: var(--body-md-regular-weight);
  font-size: var(--body-md-regular-size);
  line-height: var(--body-md-regular-line-height);
  color: var(--semantic-basictext-secondary);
}

/* ---------- faq.css ---------- */
/**
 * section_faq (sp)
 * Figma node: 557:61074
 *
 * Molecule / h2 (525:9662) は本ファイルで .section-heading として定義する。
 * 「悩みから探す/テーマから探す/おすすめ記事」など他セクションでも共通利用される
 * コンポーネントのため、section_other-article 側でも同じクラス名をそのまま
 * 再利用し、二重定義しない(全CSSは同一ページで読み込まれるため参照可能)。
 */

.faq {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24);
  padding: 0 var(--spacing-16) var(--spacing-24);
  background: var(--color-bg-page);
}

/* breakpoint-spec.md「セクション左右paddingの実測値」: Tablet/PC共通で32pxに切り替え */
@media (min-width: 768px) {
  .faq {
    padding-inline: var(--spacing-32);
  }
}

/* Molecule / h2 (section_faq / section_other-article で共通利用) */
.section-heading {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  padding-block: var(--spacing-24);
  border-bottom: 1px dashed var(--semantic-basictext-primary);
}

.section-heading__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: var(--gradient-section-heading-icon);
  box-shadow: 0 4px 6px 0 var(--section-heading-icon-shadow);
  transform: skewX(-13.74deg) scaleY(0.97);
}

.section-heading__title {
  margin: 0;
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--font-family-base);
  font-weight: var(--heading-xlg-bold-weight);
  font-size: var(--heading-xlg-bold-size);
  line-height: var(--heading-xlg-bold-line-height);
  color: var(--semantic-basictext-primary);
}

.faq__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.faq-card {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-interactive-text);
  border-radius: var(--radius-lg);
}

.faq-card__question {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  padding: 12px var(--spacing-16) var(--spacing-16);
  border-bottom: 1px solid var(--primitive-sapphire-700);
}

.faq-card__answer {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  padding: var(--spacing-16);
}

.faq-card__label {
  flex-shrink: 0;
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--body-md-bold-weight);
  font-size: var(--body-md-bold-size);
  line-height: var(--body-md-bold-line-height);
}

.faq-card__question .faq-card__label {
  color: var(--color-interactive-text);
  white-space: nowrap;
}

.faq-card__answer .faq-card__label {
  width: 17px;
  color: var(--semantic-basictext-primary);
}

.faq-card__text {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--body-md-regular-size);
  line-height: var(--body-md-regular-line-height);
  color: var(--semantic-basictext-primary);
}

.faq-card__question .faq-card__text {
  font-weight: var(--body-md-bold-weight);
}

.faq-card__answer .faq-card__text {
  font-weight: var(--body-md-regular-weight);
}

/* ---------- other-article.css ---------- */
/**
 * section_other-article (sp)
 * Figma node: 557:61101
 *
 * 見出し(Molecule / h2)は css/faq.css の .section-heading をそのまま再利用する。
 *
 * カード行はFigma上 overflow-clip(=はみ出た分を単純に切り落とす)だが、
 * 280px幅のカードが5枚並ぶとSP画面幅を大きく超えるため、実装では
 * breadcrumbと同様に overflow-x:auto の横スクロールに変更している
 * (Figmaはキャンバス上のクリップ挙動であり、最終的なUXとしては
 * スクロールで全カードにアクセスできる方が適切と判断)。
 *
 * Atom / Thumbnail はFigma上プレースホルダーとして空のグレー矩形のみで
 * 実装されており、実際の画像アイコンは含まれていない。「アイコンは中央固定」
 * という説明文の意図と、グレー背景+中央アイコンという一般的なプレースホルダー
 * 表現に合わせ、Material Symbolsの image アイコンを中央に配置している。
 */

.other-article {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24);
  padding-bottom: var(--spacing-24);
  background: var(--columnpage-bg-surface);
}

.other-article__title {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  padding-inline: var(--spacing-16);
}

.other-article__list {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  gap: var(--spacing-16);
  padding-inline: var(--spacing-16);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.article-card {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 280px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  background: var(--primitive-white);
  border: 1px solid var(--semantic-dividercolor-light);
  border-radius: 12px;
}

.article-card__thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primitive-hematite-100);
}

.article-card__thumbnail-icon {
  width: 40px;
  height: 40px;
}

.article-card__body {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
  padding: var(--spacing-16);
}

.article-card__title {
  margin: 0;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 72px;
  font-family: var(--font-family-base);
  font-weight: var(--body-md-bold-weight);
  font-size: var(--body-md-bold-size);
  line-height: var(--body-md-bold-line-height);
  color: var(--color-interactive-text);
}

.article-card__date {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-base);
  font-weight: var(--body-sm-regular-weight);
  font-size: var(--body-sm-regular-size);
  line-height: var(--body-sm-regular-line-height);
  color: var(--semantic-basictext-tertiary);
}

/* ---------- promotion.css ---------- */
/**
 * section-promotion (sp)
 * Figma node: 569:61604
 *
 * 「Molecule / JobSearchCTA」を使用。依頼時に想定されていた
 * RichCTA-Container/RichCTA-BenefitItemコンポーネントは本ノード配下には
 * 存在せず、プロジェクト内にも既存実装が見つからなかったため、Figmaの実データ
 * (Molecule / JobSearchCTA, Atom / Button-CTA)に基づき新規実装している。
 *
 * Atom / Button-CTA のグラデーション塗りはFigma上で
 * 「Variable未バインド(手動管理)」と明記されているが、CSS側でのハードコード
 * 回避のため tokens.css の --gradient-cta-button に集約して参照する。
 */

.promotion {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24);
  padding: var(--spacing-24) var(--spacing-16);
  background: var(--columnpage-bg-surface);
}

/* breakpoint-spec.md「セクション左右paddingの実測値」: Tablet/PC共通で32pxに切り替え */
@media (min-width: 768px) {
  .promotion {
    padding-inline: var(--spacing-32);
  }
}

.job-search-cta {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-16);
  background: var(--color-accent-section-bg);
  border-radius: var(--radius-lg);
}

.job-search-cta__wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8);
}

.job-search-cta__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8);
}

.job-search-cta__headline-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  padding-inline: var(--spacing-8);
}

.job-search-cta__headline-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
}

.job-search-cta__sparkle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-top: var(--spacing-4);
}

.job-search-cta__sparkle img {
  display: block;
  width: 13.598px;
  height: 15.356px;
}

.job-search-cta__sparkle--right img {
  transform: scaleX(-1);
}

.job-search-cta__headline {
  margin: 0;
  font-family: var(--font-family-base);
  text-align: center;
  white-space: nowrap;
}

.job-search-cta__headline-highlight {
  font-weight: var(--heading-sm-bold-weight);
  font-size: var(--heading-sm-bold-size);
  line-height: var(--heading-sm-bold-line-height);
  color: var(--color-accent-highlight);
}

.job-search-cta__headline-rest {
  font-weight: var(--body-md-bold-weight);
  font-size: var(--body-md-bold-size);
  line-height: var(--body-md-bold-line-height);
  color: var(--color-accent-text-on-accent-bg);
}

.job-search-cta__subhead {
  margin: 0;
  width: 286px;
  max-width: 100%;
  font-family: var(--font-family-base);
  text-align: center;
  color: var(--color-accent-text-on-accent-bg);
}

.job-search-cta__subhead-lg {
  font-weight: var(--heading-lg-bold-weight);
  font-size: var(--heading-lg-bold-size);
  line-height: var(--heading-lg-bold-line-height);
}

.job-search-cta__subhead-md {
  font-weight: var(--heading-sm-bold-weight);
  font-size: var(--heading-sm-bold-size);
  line-height: var(--heading-sm-bold-line-height);
}

.job-search-cta__subhead-sm {
  font-weight: var(--heading-lg-bold-weight);
  font-size: var(--fontsize-22);
  line-height: 33px;
}

.job-search-cta__divider {
  display: block;
  width: 100%;
  height: 10px;
}

.cta-button {
  box-sizing: border-box;
  width: 100%;
  max-width: 329px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-inline: var(--spacing-24);
  background: var(--gradient-cta-button);
  border: 2px solid var(--primitive-white);
  border-radius: 9999px;
  text-decoration: none;
  cursor: pointer;
}

.cta-button__label {
  padding-bottom: var(--spacing-2);
  font-family: var(--font-family-base);
  font-weight: var(--heading-sm-bold-weight);
  font-size: var(--fontsize-18);
  line-height: var(--heading-sm-bold-line-height);
  color: var(--primitive-white);
  white-space: nowrap;
}

.cta-button__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primitive-white);
  border-radius: 9999px;
}

.cta-button__icon img {
  display: block;
  width: 18px;
  height: 18px;
}

.promotion__banner {
  width: 100%;
}

/*
 * SP: promo-job-match-finder-sp.png (node 569:61606)
 * Tablet/PC: promo-job-match-finder-md.png (node 588:84811, top_jobMatchFinder_md)
 * を <picture><source media="(min-width:768px)"> で出し分ける。
 */
.promotion__banner picture {
  display: block;
  width: 100%;
}

.promotion__banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- footer.css ---------- */
/**
 * Footer
 * Figma node: 557:61187 (sp) / 604:9592 (tablet) / 605:9914 (pc)
 *
 * Tablet版はFigma上「contents」がlayoutPositioning:ABSOLUTE(left:32/top:32,
 * w:704)で置かれているが、これはSP/PCが通常のflex+paddingで組まれているのと
 * 比べて不自然(Auto Layout変換漏れの可能性が高い)。実装ではSP/PCと同様に
 * 通常のflex+paddingとして扱い、値だけ実測(左右32px)を反映している。
 *
 * Scrollボタン(ページ先頭へ戻る)は、Figma上は各ブレークポイントで絶対座標
 * (例: SP left:317/top:-4)指定だが、キャンバス固有の値のため、実装では
 * 「copyright行の右端に寄せ、行の垂直中央に重ねる」という意図を汎用的な
 * position:absolute; right:0; top:50%; transform:translateY(-50%); で再現している。
 */

.footer {
  width: 100%;
  background: var(--primitive-sapphire-800);
}

.footer-inner {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24);
  padding: var(--spacing-32) var(--spacing-16);
}

@media (min-width: 768px) {
  .footer-inner {
    padding: var(--spacing-32);
  }
}

@media (min-width: 1280px) {
  .footer-inner {
    padding: 56px 100px;
  }
}

.footer__logo {
  display: block;
  width: 214px;
  height: 32px;
}

@media (min-width: 768px) {
  .footer__logo {
    width: 268px;
    height: 40px;
  }
}

.footer__nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
}

.footer__nav-link {
  margin: 0;
  font-family: var(--font-family-base);
  color: var(--primitive-white);
  text-decoration: none;
}

.footer__nav-link:hover,
.footer__nav-link:focus-visible {
  text-decoration: underline;
}

.footer__nav .footer__nav-link {
  font-weight: var(--body-md-regular-weight);
  font-size: var(--body-md-regular-size);
  line-height: var(--body-md-regular-line-height);
}

.footer__column-links .footer__nav-link,
.footer__legal .footer__nav-link {
  font-weight: var(--body-sm-regular-weight);
  font-size: var(--body-sm-regular-size);
  line-height: var(--body-sm-regular-line-height);
}

.footer__nav-link--external {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
}

.footer__external-icon {
  display: block;
  width: 16px;
  height: 16px;
}

.footer__divider {
  width: 100%;
  height: 1px;
  margin: 0;
  border: none;
  background: var(--primitive-sapphire-900);
}

.footer__columns {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16);
}

@media (min-width: 768px) {
  .footer__columns {
    flex-direction: row;
    gap: var(--spacing-24);
  }
}

.footer__column {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
}

@media (min-width: 768px) {
  .footer__column {
    flex: 1 0 0;
    min-width: 0;
  }
}

.footer__column-title {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--body-sm-bold-weight);
  font-size: var(--body-sm-regular-size);
  line-height: var(--body-sm-regular-line-height);
  color: var(--primitive-sapphire-300);
}

.footer__column-links {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
}

.footer__column--secondary {
  gap: var(--spacing-40);
}

.footer__column-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
}

.footer__legal {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
}

@media (min-width: 768px) {
  .footer__legal {
    gap: var(--spacing-4);
  }
}

.footer__copyright {
  position: relative;
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__copyright-text {
  margin: 0;
  flex: 1 0 0;
  min-width: 0;
  text-align: center;
  font-family: var(--font-family-base);
  font-weight: var(--caption-sm-regular-weight);
  font-size: var(--caption-sm-regular-size);
  line-height: var(--caption-sm-regular-line-height);
  color: var(--primitive-sapphire-300);
}

.footer__scroll-top {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9999px;
  background: var(--footer-scroll-btn-bg);
  box-shadow: 0 2px 6px 0 var(--footer-scroll-btn-shadow);
  cursor: pointer;
}

.footer__scroll-top img {
  display: block;
  width: 24px;
  height: 24px;
}

@media (min-width: 768px) {
  .footer__scroll-top {
    width: 60px;
    height: 60px;
  }
}

/* ---------- table-of-contents.css ---------- */
/**
 * Molecule / TableOfContents
 * Figma node: 621:12077 (base) / 621:12120 (sp collapsed ref) / 614:85863 (tablet,pc collapsed ref)
 *
 * Collapse behavior is not variant-based: it is driven at runtime by
 * js/table-of-contents.js, which measures the real scrollHeight of
 * .toc__list-wrap against --toc-collapsed-height (88px) and toggles
 * the `is-clipped` state accordingly.
 */

.toc {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-16) var(--spacing-16) var(--spacing-8);
  background: var(--toc-surface-bg);
  border-radius: var(--radius-md);
}

.toc * {
  box-sizing: border-box;
}

.toc__title {
  display: flex;
  align-items: center;
  height: 32px;
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: var(--fontsize-15);
  line-height: normal;
  color: var(--semantic-basictext-primary);
  margin: 0;
}

.toc__list-wrap {
  position: relative;
  width: 100%;
  padding: 0 0 var(--spacing-16) var(--spacing-8);
}

/* Runtime-clipped state: applied only when content exceeds --toc-collapsed-height */
.toc__list-wrap.is-clipped {
  height: var(--toc-collapsed-height, 88px);
  overflow: hidden;
}

.toc__list,
.toc__sublist {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc__sublist {
  padding-left: var(--spacing-16);
}

.toc__item {
  display: flex;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.toc__item-dot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  padding-top: var(--spacing-2);
}

.toc__item-dot {
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: var(--semantic-basictext-secondary);
}

.toc__item-text {
  font-family: var(--font-family-base);
  font-weight: var(--body-sm-regular-weight);
  font-size: var(--body-sm-regular-size);
  line-height: var(--body-sm-regular-line-height);
  color: var(--semantic-basictext-secondary);
  word-break: break-word;
}

.toc__overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(
    to bottom,
    var(--toc-overlay-gradient-from),
    var(--toc-overlay-gradient-to) var(--toc-overlay-gradient-stop)
  );
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  pointer-events: none;
}

.toc__overlay[hidden] {
  display: none;
}

.toc__show-all {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  height: 48px;
  padding: 0 var(--spacing-16) 0 var(--spacing-8);
  background: none;
  border: none;
  cursor: pointer;
  appearance: none;
}

.toc__show-all-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding-top: var(--spacing-2);
}

.toc__show-all-icon img {
  display: block;
  width: 24px;
  height: 24px;
}

.toc__show-all-label {
  font-family: var(--font-family-base);
  font-weight: var(--body-md-bold-weight);
  font-size: var(--body-md-bold-size);
  line-height: var(--body-md-bold-line-height);
  color: var(--color-interactive-text);
  white-space: nowrap;
}


/* ---------- article-list.css ---------- */
/**
 * ArticleListPage (sp: 523:39567 / tablet: 590:9524 / pc: 592:9524)
 *
 * Header / Breadcrumb(level=3) / Footer / Molecule/h2(.section-heading) /
 * Atom/Badge(.badge) / Molecule/JobSearchCTA(.job-search-cta) は既存実装を
 * そのまま再利用し、本セクションでは再定義しない。
 *
 * main-container の幅ルールは breakpoint-spec.md の「記事本文(main)の幅
 * ルール」と同じパターン(SP:可変 / Tablet・PC:768px固定)のため、
 * --article-main-widthトークンをそのまま再利用する。
 * Tablet/PCで内容・レイアウトが完全に同一(Figma上のArticleListCard説明:
 * 「Device=pcはtablet(768)とpc(1440)のどちらのブレークポイントでも共通して
 * 使用する幅広レイアウト」)なため、本セクションのブレークポイントは
 * min-width:768px の1段のみで、1280px用の別段は設けていない。
 */

.list-main {
  width: 100%;
  padding-bottom: var(--spacing-32);
}

@media (min-width: 768px) {
  .list-main {
    width: var(--article-main-width);
    margin-inline: auto;
  }
}

/* --- ヒーローバナー --- */
.list-hero {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: var(--spacing-8);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(253.33deg, var(--color-brand-primary-alt) 5.3%, var(--color-brand-primary) 94.92%);
}

@media (min-width: 768px) {
  .list-hero {
    padding: var(--spacing-16);
  }
}

.list-hero__card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-16);
  background: var(--primitive-white);
  border-radius: var(--radius-sm);
}

@media (min-width: 768px) {
  .list-hero__card {
    min-height: 210px;
    height: auto;
    justify-content: center;
    padding: 32px;
    border-radius: var(--radius-md);
  }
}

.list-hero__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-4);
  width: 100%;
}

.list-hero__tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 2px var(--spacing-8);
  border-radius: var(--radius-sm);
  background: linear-gradient(247deg, var(--color-brand-primary-alt) 5.3%, var(--color-brand-primary) 94.92%);
}

.list-hero__tag-text {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--caption-sm-bold-weight);
  font-size: var(--caption-sm-regular-size);
  line-height: var(--caption-sm-regular-line-height);
  color: var(--primitive-white);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .list-hero__tag-text {
    font-size: var(--body-md-bold-size);
    line-height: var(--body-md-bold-line-height);
  }
}

.list-hero__title {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-base);
  font-weight: var(--heading-xlg-bold-weight);
  font-size: var(--heading-xlg-bold-size);
  line-height: var(--heading-xlg-bold-line-height);
  color: var(--semantic-basictext-primary);
}

@media (min-width: 768px) {
  .list-hero__title {
    font-size: var(--heading-2xlg-bold-size);
    line-height: var(--heading-2xlg-bold-line-height);
  }
}

.list-hero__description {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--body-sm-regular-weight);
  font-size: var(--body-sm-regular-size);
  line-height: var(--body-sm-regular-line-height);
  color: var(--semantic-basictext-secondary);
}

@media (min-width: 768px) {
  .list-hero__description {
    font-weight: var(--body-lg-regular-weight);
    font-size: var(--body-lg-regular-size);
    line-height: var(--body-lg-regular-line-height);
  }
}

/*
 * 装飾要素は円ではなく、正方形の枠線をrotate+scaleYで菱形/シェブロン状に
 * 変形したもの(Figma上もborder-radiusなしの正方形)。位置はFigmaの絶対座標
 * (中心寄せ用の外側コンテナ込み)から、回転前の正方形自体の位置に換算した値。
 */
.list-hero__arc {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
}

.list-hero__arc--sm {
  right: 10px;
  top: 14px;
  width: 50px;
  height: 50px;
  border: 8px solid var(--hero-arc-color-light);
  transform: scaleY(-1) rotate(-135deg);
}

.list-hero__arc--lg {
  right: 17px;
  top: -60px;
  width: 98px;
  height: 98px;
  border: 8px solid var(--hero-arc-color);
  transform: scaleY(-1) rotate(163.77deg);
}

@media (min-width: 768px) {
  .list-hero__arc--sm {
    right: 52px;
    top: 37px;
    width: 98px;
    height: 98px;
    border-width: 16px;
  }

  .list-hero__arc--lg {
    right: 54px;
    top: -96px;
    width: 183px;
    height: 183px;
    border-width: 16px;
  }
}

/* --- カテゴリタブ (Molecule / Tab) --- */
.list-tabs-outer {
  box-sizing: border-box;
  width: 100%;
  padding-top: var(--spacing-16);
  background: var(--columnpage-bg-surface);
}

.list-tabs-wrap {
  box-sizing: border-box;
  width: 100%;
  padding-inline: var(--spacing-16);
  border-bottom: 1px solid var(--semantic-dividercolor-light);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
  .list-tabs-wrap {
    padding-inline: var(--spacing-32);
  }
}

.list-tabs {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  width: max-content;
}

.list-tab {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  padding: var(--spacing-8);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

.list-tab--selected {
  border-bottom-color: var(--color-interactive-text);
}

.list-tab__icon {
  display: block;
  width: 18px;
  height: 18px;
}

.list-tab__label {
  margin: 0;
  padding-bottom: var(--spacing-2);
  font-family: var(--font-family-base);
  font-weight: var(--body-md-bold-weight);
  font-size: var(--body-md-bold-size);
  line-height: var(--body-md-bold-line-height);
  color: var(--semantic-basictext-secondary);
  white-space: nowrap;
}

.list-tab--selected .list-tab__label {
  color: var(--color-interactive-text);
}

/* --- 記事一覧 (Molecule / ArticleListCard) --- */
.list-section-article {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  padding: var(--spacing-24) var(--spacing-16);
  background: var(--columnpage-bg-surface);
}

@media (min-width: 768px) {
  .list-section-article {
    padding: var(--spacing-24) var(--spacing-32);
  }
}

.article-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.article-list__divider {
  width: 100%;
  height: 1px;
  margin: 0;
  border: none;
  background: var(--semantic-dividercolor-light);
}

.article-list-card {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  text-decoration: none;
}

@media (min-width: 768px) {
  .article-list-card {
    gap: var(--spacing-24);
  }
}

.article-list-card .badge {
  height: 18px;
}

.article-list-card__text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
}

.article-list-card__title {
  margin: 0;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-family-base);
  font-weight: var(--body-lg-bold-weight);
  font-size: var(--body-lg-bold-size);
  line-height: var(--body-lg-bold-line-height);
  color: var(--color-interactive-text);
}

@media (min-width: 768px) {
  .article-list-card__title {
    height: 60px;
    -webkit-line-clamp: 2;
  }
}

.article-list-card__date {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-base);
  font-weight: var(--caption-md-regular-weight);
  font-size: var(--caption-md-regular-size);
  line-height: var(--caption-md-regular-line-height);
  color: var(--semantic-basictext-tertiary);
}

.article-list-card__thumb {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 79px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--primitive-hematite-100);
}

/*
 * .article-list-card__thumb img (実写真用、width/height:100%) より詳細度を
 * 上げて上書きする必要があるため、要素セレクタを明示的に結合している。
 */
.article-list-card__thumb img.article-list-card__thumb-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

@media (min-width: 768px) {
  .article-list-card__thumb img.article-list-card__thumb-icon {
    width: 28px;
    height: 28px;
  }
}

@media (min-width: 768px) {
  .article-list-card__thumb {
    width: 202px;
    height: 114px;
  }
}

.article-list-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- さらに読み込む (Atom / Button-LoadMore) --- */
.load-more-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-block: var(--spacing-8);
}

.load-more {
  box-sizing: border-box;
  width: 100%;
  min-width: 361px;
  max-width: 500px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  padding-inline: var(--spacing-24);
  background: var(--primitive-white);
  border: 2px solid var(--color-interactive-text);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.load-more__label {
  margin: 0;
  padding-bottom: var(--spacing-2);
  font-family: var(--font-family-base);
  font-weight: var(--heading-sm-bold-weight);
  font-size: var(--heading-sm-bold-size);
  line-height: var(--heading-sm-bold-line-height);
  color: var(--color-interactive-text);
  white-space: nowrap;
}

.load-more__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: var(--primitive-sapphire-100);
}

.load-more__icon img {
  display: block;
  width: 20px;
  height: 20px;
}

/* --- 悩みから探す (Molecule / ThemeButton) --- */
.list-section-concern {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding-bottom: var(--spacing-24);
  background: var(--color-bg-page);
}

.list-section-concern__title {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  padding-inline: var(--spacing-16);
}

@media (min-width: 768px) {
  .list-section-concern__title {
    padding-inline: var(--spacing-32);
  }
}

.list-section-concern__title .section-heading {
  max-width: 704px;
  min-width: 361px;
}

.list-section-concern__grid-wrap {
  box-sizing: border-box;
  width: 100%;
  padding-inline: var(--spacing-16);
}

@media (min-width: 768px) {
  .list-section-concern__grid-wrap {
    padding-inline: var(--spacing-32);
  }
}

.theme-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 768px) {
  .theme-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.theme-button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 68px;
  padding-inline: 12px;
  background: var(--color-bg-surface);
  border-radius: var(--radius-md);
  box-shadow: 4px 4px 0 var(--section-heading-icon-shadow);
  text-decoration: none;
  cursor: pointer;
}

.theme-button__icon-circle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: var(--primitive-sapphire-100);
}

.theme-button__icon-circle img {
  display: block;
  width: 20px;
  height: 20px;
}

.theme-button__label {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  padding-bottom: var(--spacing-2);
  font-family: var(--font-family-base);
  font-weight: var(--body-lg-bold-weight);
  font-size: var(--body-lg-bold-size);
  line-height: var(--body-lg-bold-line-height);
  color: var(--color-interactive-text);
  white-space: nowrap;
}

/* --- section-promotion (JobSearchCTAは既存の .job-search-cta / .cta-button を再利用) --- */
.list-section-promotion {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24);
  padding: var(--spacing-24) var(--spacing-16);
  background: var(--columnpage-bg-surface);
}

@media (min-width: 768px) {
  .list-section-promotion {
    padding: var(--spacing-24) var(--spacing-32);
  }
}

/* ---------- top.css ---------- */
/**
 * TOP (sp: 499:25136 / tablet: 583:69818 / pc: 588:78377)
 *
 * Header / Breadcrumb(level=2: トップ/仕事と働き方コラム) / Footer /
 * Molecule/h2(.section-heading) / Molecule/ThemeButton(.theme-grid/.theme-button) /
 * Molecule/JobSearchCTA(.job-search-cta) / Atom/Badge(.badge) /
 * promoバナー(.promotion__banner) は既存実装をそのまま再利用する。
 *
 * main-containerはArticlePage/ArticleListPageと同じ「SP:可変 / Tablet・PC:768px
 * 固定」パターンのため --article-main-width をそのまま再利用する。TOP側も
 * Tablet/PCでmain-container幅が完全に同一(768px)だったため、768px単一段の
 * @media切り替えのみで対応している。
 */

.top-main {
  width: 100%;
  padding-bottom: var(--spacing-32);
}

@media (min-width: 768px) {
  .top-main {
    width: var(--article-main-width);
    margin-inline: auto;
  }
}

/* --- KV --- */
.top-kv {
  width: 100%;
}

.top-kv picture,
.top-kv img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- section_search-by-concern (悩みから探す。中身はArticleListPageと共通の .theme-grid/.theme-button を再利用) --- */
.top-concern {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-16) 0 var(--spacing-24);
  background: var(--color-bg-page);
}

.top-concern__title {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  padding-inline: var(--spacing-16);
}

@media (min-width: 768px) {
  .top-concern__title {
    padding-inline: var(--spacing-32);
  }
}

.top-concern__title .section-heading {
  width: 100%;
  max-width: 704px;
  min-width: 361px;
}

.top-concern__grid-wrap {
  box-sizing: border-box;
  width: 100%;
  padding-inline: var(--spacing-16);
}

@media (min-width: 768px) {
  .top-concern__grid-wrap {
    padding-inline: var(--spacing-32);
  }
}

/* --- section_search-by-theme (テーマから探す) --- */
.top-theme {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  padding-bottom: var(--spacing-24);
  background: var(--columnpage-bg-surface);
}

.top-theme__title {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  padding-inline: var(--spacing-16);
}

@media (min-width: 768px) {
  .top-theme__title {
    padding-inline: var(--spacing-32);
  }
}

.top-theme__title .section-heading {
  width: 100%;
  max-width: 704px;
  min-width: 361px;
}

.top-theme__block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.top-theme__heading {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding-inline: var(--spacing-16);
}

@media (min-width: 768px) {
  .top-theme__heading {
    padding-inline: var(--spacing-32);
  }
}

.top-theme__subtitle {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: var(--fontsize-22);
  line-height: 33px;
  color: var(--semantic-basictext-primary);
}

.top-theme__description {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-base);
  font-weight: var(--body-md-regular-weight);
  font-size: var(--body-md-regular-size);
  line-height: var(--body-md-regular-line-height);
  color: var(--semantic-basictext-secondary);
}

.top-theme__cards-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.top-theme__cards {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  gap: var(--spacing-16);
  padding-left: var(--spacing-16);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
  .top-theme__cards {
    padding-left: var(--spacing-32);
  }
}

.top-theme__button-row {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-inline: var(--spacing-16);
}

@media (min-width: 768px) {
  .top-theme__button-row {
    padding-inline: var(--spacing-32);
  }
}

.top-theme__divider-wrap {
  box-sizing: border-box;
  width: 100%;
  padding: var(--spacing-24) var(--spacing-16);
}

@media (min-width: 768px) {
  .top-theme__divider-wrap {
    padding-inline: var(--spacing-32);
  }
}

/*
 * FigmaのdashDividerは実SVG(stroke #888888, dasharray 2 2)のため、CSSの
 * border-style:dashed(ブラウザ依存の間隔になる)ではなく、repeating-linear-gradient
 * で2px塗り/2px空きを再現している。
 */
.top-theme__divider {
  width: 100%;
  height: 1px;
  margin: 0;
  border: none;
  background-image: repeating-linear-gradient(
    to right,
    var(--primitive-hematite-400) 0,
    var(--primitive-hematite-400) 2px,
    transparent 2px,
    transparent 4px
  );
}

/* Molecule/ArticleCard Size=Small: 既存 .article-card(Large,280px)を幅だけ変更して再利用。
 * サムネイルは aspect-ratio:16/9 のため幅変更だけで正しい高さに追従する。
 */
.article-card--small {
  width: 200px;
}

.article-card--small .article-card__thumbnail-icon {
  width: 28px;
  height: 28px;
}

/* --- Atom / Button-Text (「他の記事を見る」等のテキストリンク) --- */
.button-text {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  height: 44px;
  padding-inline: 12px;
  text-decoration: none;
  cursor: pointer;
}

.button-text__label {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--body-md-bold-weight);
  font-size: var(--body-md-bold-size);
  line-height: var(--body-md-bold-line-height);
  color: var(--color-interactive-text);
  white-space: nowrap;
}

.button-text__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: var(--primitive-sapphire-100);
}

.button-text__icon img {
  display: block;
  width: 16px;
  height: 16px;
}

/* --- section_recommended-articles (おすすめ記事。既存の .article-card(Large,280px) を再利用) --- */
.top-recommended {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  padding-bottom: var(--spacing-24);
  background: var(--color-bg-page);
}

.top-recommended__title {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  padding-inline: var(--spacing-16);
}

@media (min-width: 768px) {
  .top-recommended__title {
    padding-inline: var(--spacing-32);
  }
}

.top-recommended__title .section-heading {
  width: 100%;
  max-width: 704px;
  min-width: 361px;
}

.top-recommended__cards {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  gap: var(--spacing-16);
  padding-inline: var(--spacing-16);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
  .top-recommended__cards {
    padding-inline: var(--spacing-32);
  }
}

/* --- Organism / RichCTA-Container ---
 * SP/PCで内部構造(ボタンの位置)が異なる旨がFigmaコンポーネント説明に明記されて
 * いるため、ボタン行(.richcta__benefit-list, .richcta__button-wrap)をSP用/
 * 幅広用(tablet+pc共通)の2系統用意し、display切り替えで出し分ける
 * (Tablet/PCでmain-container幅が同一=768pxのため、本コンポーネントも
 * 単一の @media (min-width:768px) 切り替えで両方カバーできる)。
 */
.richcta {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-24) var(--spacing-16);
  background: var(--color-accent-section-bg);
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  .richcta {
    padding: var(--spacing-24) var(--spacing-32);
  }
}

.richcta__sparkle {
  position: absolute;
  pointer-events: none;
}

.richcta__sparkle img {
  display: block;
  width: 100%;
  height: 100%;
}

.richcta__sparkle--top {
  left: -6%;
  top: -11%;
  width: 26%;
  transform: scaleX(-1);
}

.richcta__sparkle--bottom {
  right: 5%;
  bottom: -11%;
  width: 20%;
}

.richcta__card {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-16);
  background: var(--color-accent-card-bg);
  border-radius: var(--radius-md);
}

@media (min-width: 768px) {
  .richcta__card {
    gap: var(--spacing-16);
    padding: 16px 24px;
  }
}

.richcta__headline-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
}

.richcta__sparkle-icon {
  flex-shrink: 0;
  display: block;
  width: 13.598px;
  height: 15.356px;
  padding-top: var(--spacing-2);
}

.richcta__sparkle-icon--right {
  transform: scaleX(-1);
}

.richcta__headline {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.richcta__headline-highlight {
  font-size: var(--fontsize-22);
  line-height: 33px;
  color: var(--color-accent-highlight);
}

.richcta__headline-rest {
  font-size: var(--body-lg-bold-size);
  line-height: var(--body-lg-bold-line-height);
  color: var(--color-accent-text-on-accent-bg);
}

.richcta__photo-container {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
}

@media (min-width: 768px) {
  .richcta__photo-container {
    gap: var(--spacing-24);
  }
}

.richcta__photo-frame {
  position: relative;
  flex-shrink: 0;
  width: 182px;
  height: 132px;
}

@media (min-width: 768px) {
  .richcta__photo-frame {
    width: 258px;
    height: 189px;
  }
}

.richcta__photo-bg {
  position: absolute;
  right: 0;
  top: 8px;
  width: 174px;
  height: 124px;
  background: var(--gradient-richcta-photo-bg);
  border-radius: var(--radius-md);
}

@media (min-width: 768px) {
  .richcta__photo-bg {
    top: 16px;
    width: 242px;
    height: 173px;
  }
}

.richcta__photo {
  position: absolute;
  left: 0;
  top: 0;
  width: 174px;
  height: 124px;
  overflow: hidden;
  border: 2px solid var(--primitive-white);
  border-radius: var(--radius-md);
}

@media (min-width: 768px) {
  .richcta__photo {
    left: 2px;
    top: 3px;
    width: 242px;
    height: 173px;
  }
}

.richcta__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.richcta__benefits {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16);
}

@media (min-width: 768px) {
  .richcta__benefits {
    align-items: center;
  }
}

.richcta__benefit-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .richcta__benefit-list {
    max-width: 264px;
    align-items: center;
  }
}

.richcta__benefit-list--wide {
  display: none;
}

@media (min-width: 768px) {
  .richcta__benefit-list--sp {
    display: none;
  }

  .richcta__benefit-list--wide {
    display: flex;
  }
}

.richcta__benefit-item {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding-bottom: var(--spacing-4);
  border-bottom: 1px dashed var(--color-accent-border);
}

.richcta__benefit-icon {
  flex-shrink: 0;
  display: block;
  width: 24px;
  height: 24px;
  padding-top: var(--spacing-2);
}

.richcta__benefit-label {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--heading-sm-bold-weight);
  font-size: var(--heading-sm-bold-size);
  line-height: var(--heading-sm-bold-line-height);
  color: var(--color-accent-text-on-accent-bg);
  white-space: nowrap;
}

.richcta__benefit-label-sub {
  font-weight: 700;
  font-size: var(--body-sm-regular-size);
  line-height: var(--body-sm-regular-line-height);
  color: var(--color-accent-text-on-accent-bg);
}

.richcta__button-wrap {
  width: 100%;
  filter: drop-shadow(0 2px 3px var(--richcta-button-shadow));
}

.richcta__button-wrap .cta-button {
  max-width: none;
}

.richcta__button-wrap--wide {
  display: none;
}

@media (min-width: 768px) {
  .richcta__button-wrap--sp {
    display: none;
  }

  .richcta__button-wrap--wide {
    display: block;
  }
}

/* --- banner-container (既存の .promotion__banner を再利用) --- */
.top-banner {
  box-sizing: border-box;
  width: 100%;
  padding: var(--spacing-24) var(--spacing-16);
  background: var(--columnpage-bg-surface);
}