/* parts.css
   サービス以外の下層ページ（無料診断・事例一覧／詳細・料金・会社概要・ブログ一覧／記事詳細・
   お問い合わせ・送信完了・プライバシーポリシー）で使う共通部品（c-）
   読み込み順は base.css → layout.css → components.css → parts.css（JS は parts.js）

   c-page-head / c-breadcrumb / c-split / c-chip-nav / c-pagination /
   c-form / c-choice-list / c-embed-placeholder / c-tabs / c-compare-table / c-note-box /
   c-sidebar（c-side-box）/ c-post-card--featured /
   c-prose / c-article（c-toc・c-author・c-article-cta・c-related）/ c-case-detail /
   c-info-table / c-timeline / c-org / c-profile / c-result

   決まり
   ・メディアクエリは従来の書き方だけ（max-width: 767.98px / min-width: 768px /
     max-width: 1099.98px / min-width: 1100px）。範囲構文・has セレクタ・コンテナクエリは使わない
   ・影は付けない。色は base.css のトークンだけを使い、新しい色は足さない
   ・押せるものは高さ44px以上。入力欄の文字は16px（iOS の自動拡大を防ぐ）
   ・JS（parts.js）が動かなくても、タブは全パネルを縦に並べ、フォームの項目は全部出す
   ・既存の部品（c-post-card など）の規則は書き換えない。足すときは修飾子（--featured）にする */

/* hidden 属性が display の指定に負けないようにする（JS が出し入れする要素） */
.c-tabs__panel[hidden],
.c-form__group[hidden],
[data-c-choice-for][hidden] {
  display: none !important;
}

/* c-page-head：下層ページの冒頭（英字ラベル + h1 + リード + 条件チップ）。トップのヒーローより小さい
   地は紙色。パンくず（c-breadcrumb c-page-head__breadcrumb）を最初に置ける
   --compact  長い見出し（記事タイトルなど）用に、見出しをもう一回り小さくする */
.c-page-head {
  --card-bg: var(--c-white);   /* 紙色の地の上（l-section--paper と同じ）：タグの面は白 */
  --card-alt: var(--c-paper);
  padding-block: 48px 56px;
  color: var(--c-ink);
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-line-soft);
}

/* パンくずの行（44px）の分だけ、上の余白を食い込ませる */
.c-page-head__breadcrumb {
  margin: -24px 0 16px;
}

.c-page-head__title {
  margin-top: 14px;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.45;
  text-wrap: balance;
}

.c-page-head__lead {
  max-width: 42em;
  margin-top: 18px;
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--c-ink-2);
  text-wrap: balance;   /* 行の長さをそろえて、最後の行に1〜2文字だけ残らないようにする */
}

.c-page-head__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

/* c-tag（チップ）を一回り大きくして、リード文と並べても小さく見えないようにする */
.c-page-head__chip {
  padding: 5px 14px;
  font-size: 13px;
  line-height: 1.5;
}

.c-page-head__meta {
  margin-top: 20px;
}

.c-page-head--compact .c-page-head__title {
  max-width: 32em;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.5;
}

@media (max-width: 767.98px) {
  .c-page-head {
    padding-block: 32px 40px;
  }

  .c-page-head__breadcrumb {
    margin-top: -16px;
  }

  .c-page-head__title {
    margin-top: 12px;
  }

  .c-page-head__lead {
    margin-top: 14px;
    line-height: 1.85;
  }

  .c-page-head__chips {
    margin-top: 20px;
  }

  .c-page-head--compact .c-page-head__title {
    font-size: 24px;
  }
}

/* c-breadcrumb：パンくず。nav aria-label="パンくずリスト" + ol。現在のページに aria-current="page"
   リンクの高さは44px（スマホで押しやすい）。区切りは各項目の後ろに CSS で描く（読み上げに出さない。折り返しても行頭に残らない） */
.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.c-breadcrumb__item {
  display: flex;
  align-items: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-ink-2);
}

.c-breadcrumb__item:not(:last-child)::after {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin: 0 12px 0 10px;
  border-top: 1px solid var(--c-ink-3);
  border-right: 1px solid var(--c-ink-3);
  transform: rotate(45deg);
}

.c-breadcrumb__link,
.c-breadcrumb__current {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.c-breadcrumb__link {
  color: var(--c-ink-2);
  text-decoration: none;
}

.c-breadcrumb__link:hover {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.c-breadcrumb__current {
  font-weight: 500;
  color: var(--c-ink);
}

/* c-split：2カラムの骨組み。1100px未満は1列（DOM の順に縦に並ぶ）
   --form     PC：左に説明（main・sub）、右にフォーム（side）。右カラムは sticky（ヘッダーの下に貼り付く）
              右カラムが画面より背が高いときは、parts.js が top を調整して、下端（送信ボタン）が画面の下に貼り付くようにする
              （上から順に入力するため、ページの先頭付近では上端が見える。中でスクロールさせない）
              sub は任意。SPでは main → side（フォーム）→ sub の順に並ぶ（フォームを早く出せる）
   --sidebar  PC：左に本文・一覧（main）、右に幅320pxのサイドバー（side）。SPでは本文・一覧の下に並ぶ
   --media    写真と文章を並べる（見出しの帯の文章と写真、体制の写真と項目）。PC：2等分の2カラムで、中身は縦の中央にそろう。
              左右の順は DOM の順（左に写真を置きたいときは、写真を先に書く）。1100px未満は1列で、写真と文章は DOM の順に縦に並ぶ */
.c-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
}

.c-split__main,
.c-split__side,
.c-split__sub {
  min-width: 0;
}

@media (min-width: 1100px) {
  .c-split--form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "main side"
      "sub side";
    column-gap: 56px;
    align-items: start;
  }

  .c-split--form > .c-split__main {
    grid-area: main;
  }

  .c-split--form > .c-split__side {
    grid-area: side;
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }

  .c-split--form > .c-split__sub {
    grid-area: sub;
  }

  .c-split--sidebar {
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: 56px;
    align-items: start;
  }

  .c-split--media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
    align-items: center;
  }
}

@media (max-width: 767.98px) {
  .c-split {
    gap: 40px;
  }
}

/* c-chip-nav：絞り込みのリンク型チップ（事例の「サービス」「業種」、ブログのカテゴリ）
   ページ移動のリンク。現在のものに aria-current="page"。
   同じページの中で表示を切り替えるボタン型の絞り込みは、components.css の c-filter を使う。
   行（c-chip-nav__row）を2つ置くと2段になる。各行の先頭にラベル（c-chip-nav__label）を付けられる */
.c-chip-nav {
  display: grid;
  gap: 12px;
}

.c-chip-nav__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.c-chip-nav__label {
  flex: none;
  min-width: 5.6em;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-ink-2);
}

.c-chip-nav__list {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.c-chip-nav__link {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-ink);
  text-decoration: none;
  background: var(--c-white);
  border: 1px solid var(--c-ink-3);
  border-radius: var(--radius-s);
  transition: border-color .2s;
}

.c-chip-nav__link:hover {
  border-color: var(--c-ink);
}

.c-chip-nav__link[aria-current="page"] {
  color: var(--c-white);
  background: var(--c-ink);
  border-color: var(--c-ink);
}

@media (max-width: 767.98px) {
  .c-chip-nav__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .c-chip-nav__list {
    flex: none;
    width: 100%;
  }
}

/* c-pagination：ページ送り（前へ・番号・次へ）。現在のページに aria-current="page"
   押す部分は44px四方以上。幅が足りないときは折り返して中央に寄せる */
.c-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.c-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  font-family: var(--ff-mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--c-ink);
  text-decoration: none;
  background: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-s);
  transition: border-color .2s;
}

a.c-pagination__link:hover {
  border-color: var(--c-ink);
}

.c-pagination__link[aria-current="page"] {
  color: var(--c-white);
  background: var(--c-ink);
  border-color: var(--c-ink);
}

/* 前へ・次へ：文字 + 矢じり（矢じりは CSS で描く） */
.c-pagination__link--prev,
.c-pagination__link--next {
  padding: 0 16px;
  font-family: var(--ff-body);
  font-weight: 700;
  letter-spacing: .04em;
}

.c-pagination__link--prev::before,
.c-pagination__link--next::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
}

.c-pagination__link--prev::before {
  margin-right: 2px;
  transform: rotate(-45deg);
}

.c-pagination__link--next::after {
  margin-left: 2px;
  transform: rotate(135deg);
}

/* 押せない（最初・最後のページの前へ・次へ） */
.c-pagination__link[aria-disabled="true"] {
  color: var(--c-ink-3);
  background: var(--c-paper);
  border-color: var(--c-paper);
  cursor: default;
}

.c-pagination__gap {
  min-width: 28px;
  font-family: var(--ff-mono);
  font-size: 14px;
  line-height: 44px;
  text-align: center;
  color: var(--c-ink-3);
}

/* SP：前へ・次へは矢じりだけにして、番号が収まりやすくする（文字は読み上げ用に残す）。
   現在のページの前後の番号など、SPで省く項目の li には c-pagination__item--sub を付ける
   （前へ・1・…・現在・…・最後・次へ の7つなら、320pxでも1行に収まる） */
@media (max-width: 767.98px) {
  .c-pagination__list {
    gap: 4px;
  }

  .c-pagination__item--sub {
    display: none;
  }

  .c-pagination__gap {
    min-width: 16px;
  }

  .c-pagination__link--prev,
  .c-pagination__link--next {
    padding: 0;
    min-width: 44px;
  }

  .c-pagination__link--prev .c-pagination__text,
  .c-pagination__link--next .c-pagination__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .c-pagination__link--prev::before {
    margin-right: 0;
  }

  .c-pagination__link--next::after {
    margin-left: 0;
  }
}

/* c-form：フォーム（form 要素か div に付ける）
   行（c-form__row）= ラベル + 必須／任意のバッジ + 入力欄 + 補足（c-form__hint）+ エラー（c-form__error）
   入力欄は c-form__control（text・email・url・tel・select・textarea 共通）
   選択肢は c-form__choices（チェックボックス・ラジオ）か c-form__chips（チップ型）
   --card   白地・1pxの枠・角丸 2px の囲みにする（診断・お問い合わせの右カラム。フォームは枠で囲んでよい）
   入力欄の枠だけは、見分けられるよう --c-ink-3（白地に対して3:1以上）にしている */
.c-form {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.c-form--card {
  padding: 32px;
  background: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-m);
}

.c-form__title {
  font-size: 20px;
  line-height: 1.5;
}

.c-form__lead {
  margin-top: -14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-ink-3);
}

/* 用件ごとの項目のまとまり（parts.js が data-c-choice-for で出し入れする） */
.c-form__group {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.c-form__row {
  min-width: 0;
}

fieldset.c-form__row {
  margin: 0;
  padding: 0;
  border: 0;
}

/* label・legend 共通 */
.c-form__label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--c-ink);
}

/* 必須／任意のバッジ（必須は白文字を --c-accent-text の地に置き、6:1以上にしている） */
.c-form__badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .08em;
  vertical-align: .1em;
  white-space: nowrap;
  border-radius: var(--radius-s);
}

.c-form__badge--required {
  color: var(--c-white);
  background: var(--c-accent-text);
}

.c-form__badge--optional {
  color: var(--c-ink-2);
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
}

/* 入力欄：高さ48px以上・文字16px */
.c-form__control {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--c-ink);
  background-color: var(--c-white);
  border: 1px solid var(--c-ink-3);
  border-radius: var(--radius-s);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s, background-color .2s;
}

.c-form__control::placeholder {
  color: var(--c-ink-3);
  opacity: 1;
}

.c-form__control:hover {
  border-color: var(--c-ink);
}

.c-form__control:focus {
  border-color: var(--c-accent);
}

.c-form__control:focus-visible {
  outline-offset: 0;
}

.c-form__control:disabled {
  color: var(--c-ink-3);
  cursor: not-allowed;
  background-color: var(--c-paper);
  border-color: var(--c-line-soft);
}

/* エラー：枠を朱にして淡い朱の地にする（色だけに頼らず、下のエラー文にも「！」と文章を出す） */
.c-form__control[aria-invalid="true"] {
  background-color: var(--c-accent-soft);
  border-color: var(--c-accent-text);
}

textarea.c-form__control {
  min-height: 160px;
  resize: vertical;
}

/* セレクト：select を c-form__select で包み、矢印はその疑似要素で描く
   （select に背景画像を使わないので、文字色のコントラストの自動検査も確かめられる） */
.c-form__select {
  position: relative;
}

.c-form__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  pointer-events: none;
  border-right: 1.5px solid var(--c-ink);
  border-bottom: 1.5px solid var(--c-ink);
  transform: rotate(45deg);
}

select.c-form__control {
  padding-right: 44px;
  cursor: pointer;
}

.c-form__hint {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-ink-3);
}

/* エラーの表示領域。入力欄の aria-describedby から指す。空のときは出さない */
.c-form__error {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-accent-text);
}

.c-form__error:empty {
  display: none;
}

.c-form__error::before {
  content: "!";
  content: "!" / "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  vertical-align: .06em;
  color: var(--c-white);
  background: var(--c-accent-text);
  border-radius: 50%;
}

/* チェックボックス・ラジオ（縦に並べる。--inline で横並びにして折り返す）
   見た目の箱（c-form__choice-box）は input の隣の span。input は透明にして箱の上に重ねる */
.c-form__choices {
  display: grid;
}

.c-form__choices--inline {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
}

.c-form__choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 0;
  font-size: 15px;
  line-height: 1.6;
  cursor: pointer;
}

.c-form__choice-input {
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  margin: -11px 0 0;
  opacity: 0;
  cursor: pointer;
}

.c-form__choice-box {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  background: var(--c-white);
  border: 1px solid var(--c-ink-3);
  border-radius: var(--radius-s);
  transition: border-color .2s, background-color .2s;
}

.c-form__choice-input[type="radio"] + .c-form__choice-box {
  border-radius: 50%;
}

.c-form__choice:hover .c-form__choice-box,
.c-form__choice-input:checked + .c-form__choice-box {
  border-color: var(--c-ink);
}

.c-form__choice-input[type="checkbox"]:checked + .c-form__choice-box {
  background: var(--c-ink);
}

.c-form__choice-input[type="checkbox"]:checked + .c-form__choice-box::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 7px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--c-white);
  border-bottom: 2px solid var(--c-white);
  transform: rotate(45deg);
}

.c-form__choice-input[type="radio"]:checked + .c-form__choice-box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--c-ink);
  border-radius: 50%;
}

.c-form__choice-input:focus-visible + .c-form__choice-box {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.c-form__choice-text {
  min-width: 0;
}

.c-form__choice-text a {
  color: var(--c-accent-text);
  text-underline-offset: 3px;
}

.c-form__choice-text a:hover {
  color: var(--c-accent-hover);
}

/* チップ型の選択（複数選択はチェックボックス、1つ選択はラジオ。選んだチップは墨の地 + チェック） */
.c-form__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.c-form__chip {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  cursor: pointer;
}

.c-form__chip-input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.c-form__chip-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid var(--c-ink-3);
  border-radius: var(--radius-s);
  transition: border-color .2s;
}

.c-form__chip:hover .c-form__chip-text {
  border-color: var(--c-ink);
}

.c-form__chip-input:checked + .c-form__chip-text {
  color: var(--c-white);
  background: var(--c-ink);
  border-color: var(--c-ink);
}

.c-form__chip-input:checked + .c-form__chip-text::before {
  content: "";
  flex: none;
  width: 5px;
  height: 9px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.c-form__chip-input:focus-visible + .c-form__chip-text {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* ファイル添付
   JS が動かないとき：ブラウザ標準の入力欄をそのまま見せる
   JS が動くとき（c-form__file--ready）：破線の枠にして、input は透明にして枠の上に重ねる。
   枠にファイルをドロップしても選べる。選んだファイルは下の一覧（aria-live）に出る */
.c-form__file {
  min-width: 0;
}

.c-form__file-input {
  display: block;
  width: 100%;
  max-width: 100%;
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--c-ink);
}

.c-form__file-input::file-selector-button {
  min-height: 44px;
  margin-right: 14px;
  padding: 0 18px;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
  cursor: pointer;
  background: var(--c-paper);
  border: 1px solid var(--c-ink-3);
  border-radius: var(--radius-s);
}

.c-form__file-drop {
  display: none;
}

.c-form__file--ready .c-form__file-zone {
  position: relative;
}

.c-form__file--ready .c-form__file-input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.c-form__file--ready .c-form__file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 120px;
  padding: 20px;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
  background: var(--c-paper);
  border: 1px dashed var(--c-ink-3);
  border-radius: var(--radius-m);
  transition: border-color .2s, background-color .2s;
}

.c-form__file--ready .c-form__file-zone:hover .c-form__file-drop {
  border-color: var(--c-ink);
}

.c-form__file--ready.is-dragover .c-form__file-drop {
  background: var(--c-accent-soft);
  border-color: var(--c-accent);
}

.c-form__file--ready .c-form__file-input:focus-visible + .c-form__file-drop {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.c-form__file-icon {
  width: 24px;
  height: 24px;
  color: var(--c-ink);
}

.c-form__file-text strong {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.c-form__file-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.c-form__file-list:empty {
  display: none;
}

.c-form__file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.6;
  background: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-s);
}

.c-form__file-name {
  min-width: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.c-form__file-size {
  flex: none;
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-ink-3);
}

.c-form__file-clear {
  min-height: 44px;
  margin-top: 4px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  background: none;
  border: 0;
}

.c-form__file-clear:hover {
  color: var(--c-accent-hover);
}

/* 送信ボタン：c-button c-button--primary に c-form__submit を並べて付ける（c-button の規則は書き換えない）。
   幅いっぱいにして、狭い画面では文字を折り返す */
.c-form__actions {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.c-form__submit {
  width: 100%;
  height: auto;
  min-height: 56px;
  padding: 12px 20px;
  white-space: normal;
}

.c-form__note {
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
  color: var(--c-ink-3);
}

@media (max-width: 767.98px) {
  .c-form {
    gap: 20px;
  }

  .c-form--card {
    padding: 24px 20px;
  }

  .c-form__group {
    gap: 20px;
  }
}

/* c-choice-list：用件の選択（お問い合わせの「ご用件を選択」）。縦に並ぶ、ラジオのカード型
   fieldset + legend の中に ul を置く。選んだ用件に合わせて、フォームの項目を parts.js が切り替える
   （radio に data-c-choice、切り替える要素に data-c-choice-for。JS が無いときは全項目を表示）
   別ページへ進む選択肢は、ラジオではなくリンク（c-choice-list__link）にする */
.c-choice-list {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.c-choice-list__legend {
  margin-bottom: 16px;
  padding: 0;
  font-family: var(--ff-head);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.c-choice-list__list {
  display: grid;
  gap: 12px;
}

.c-choice-list__item {
  position: relative;
}

/* input は透明にしてカード全体に重ねる（押す場所はカード全体） */
.c-choice-list__input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.c-choice-list__label,
.c-choice-list__link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 14px 18px;
  background: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-m);
  transition: border-color .2s, background-color .2s;
}

.c-choice-list__item:hover .c-choice-list__label {
  border-color: var(--c-ink);
}

.c-choice-list__input:checked + .c-choice-list__label {
  background: var(--c-paper);
  border-color: var(--c-ink);
}

.c-choice-list__input:focus-visible + .c-choice-list__label {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.c-choice-list__mark {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  background: var(--c-white);
  border: 1px solid var(--c-ink-3);
  border-radius: 50%;
}

.c-choice-list__input:checked + .c-choice-list__label .c-choice-list__mark {
  border-color: var(--c-ink);
}

.c-choice-list__input:checked + .c-choice-list__label .c-choice-list__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--c-ink);
  border-radius: 50%;
}

.c-choice-list__text {
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.c-choice-list__desc {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--c-ink-2);
}

/* 診断ページへのリンク：淡い朱の面（朱の枠線は付けない）。右に、行き先の分かる文言「診断ページへ」を朱の文字・下線で置く（矢印は付けない）。
   hover で下線が太くなる。枠線は他の選択肢と同じ 1px の幅だけ残し、色は面と同じにして、カードの大きさをそろえる */
.c-choice-list__link {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 14px;
  color: var(--c-ink);
  text-decoration: none;
  background: var(--c-accent-soft);
  border-color: var(--c-accent-soft);
}

.c-choice-list__go {
  flex: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.c-choice-list__link:hover .c-choice-list__go {
  text-decoration-thickness: 2px;
}

/* c-embed-placeholder：埋め込み（予約カレンダー・Googleマップなど）の仮枠。紙色の地・中央に説明文
   比率は --16x9（既定）/ --4x3 / --3x2 / --2x1 / --3x1（横長の地図など）。本物の iframe に差し替えるときは、中に iframe を置けば枠いっぱいに広がる */
.c-embed-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 160px;
  padding: 24px;
  overflow: hidden;
  text-align: center;
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-m);
  aspect-ratio: 16 / 9;
}

.c-embed-placeholder--4x3 {
  aspect-ratio: 4 / 3;
}

.c-embed-placeholder--3x2 {
  aspect-ratio: 3 / 2;
}

.c-embed-placeholder--2x1 {
  aspect-ratio: 2 / 1;
}

.c-embed-placeholder--3x1 {
  aspect-ratio: 3 / 1;
}

.c-embed-placeholder__label {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-ink-2);
}

.c-embed-placeholder__text {
  max-width: 28em;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-ink-2);
}

.c-embed-placeholder > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ラベルはスマホで 12px → 13px */
@media (max-width: 767.98px) {
  .c-embed-placeholder__label {
    font-size: 13px;
  }
}

/* c-tabs：タブ（WAI-ARIA の tabs パターン。切り替えは parts.js）
   JS が動かないとき：タブの帯は出さず、全パネルを縦に並べる（各パネルの先頭の見出し c-tabs__panel-title が見える）
   JS が動くとき（c-tabs--ready）：帯を出し、パネルは選んだ1つだけ表示。見出しは読み上げ用に残して隠す
   PC・タブレットは横並びの帯、SP（767.98px以下）は縦に積む。選んだタブは墨の地 + 白文字 */
.c-tabs__list {
  display: none;
}

/* html に js-tabs-wait が付いている間（JS が動くときだけ。タブの直前の script が付け、直後の script が解く）は、タブの領域を隠す。
   最初の描画が、タブの最初の状態（帯・選んだパネル）が決まる前に起きても（回線や端末が遅いと起きる）、隠してあるので、
   あとで帯が現れたり、パネルが入れ替わったりしても、画面がずれない。JS が動かないときは、付かないので、全パネルが見える */
.js-tabs-wait .c-tabs {
  visibility: hidden;
}

.c-tabs--ready .c-tabs__list {
  display: flex;
  overflow: hidden;
  background: var(--c-white);
  border: 1.5px solid var(--c-ink);
  border-radius: var(--radius-s);
}

.c-tabs__tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 56px;
  padding: 12px 20px;
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  text-align: center;
  color: var(--c-ink);
  cursor: pointer;
  background: transparent;
  border: 0;
}

.c-tabs__tab + .c-tabs__tab {
  border-left: 1px solid var(--c-line-soft);
}

.c-tabs__tab[aria-selected="false"]:hover {
  background: var(--c-paper);
}

.c-tabs__tab[aria-selected="true"] {
  color: var(--c-white);
  background: var(--c-ink);
}

/* 選んだタブには、見出しの英字ラベルと同じ朱の正方形を付ける。
   正方形は文字の左に「ぶら下げて」付ける：幅 8px + 右の隙間 10px を、左の外側余白 -18px で打ち消し、行の長さに数えない。
   こうすると、選んだ・選んでいないで、タブの名前の位置と折り返しが変わらない
   （正方形のぶん行が長くなって、768〜780px で名前が2行に折り返すことがない）。
   正方形は名前の1行目の左に付いたまま離れず、左の余白（padding 20px）の中に収まる */
.c-tabs__tab[aria-selected="true"]::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 10px 0 -18px;
  vertical-align: .05em;
  background: var(--c-accent);
}

.c-tabs__tab:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -5px;
}

.c-tabs__panel + .c-tabs__panel {
  margin-top: 56px;
}

.c-tabs--ready .c-tabs__panel {
  margin-top: 32px;
}

.c-tabs__panel-title {
  margin-bottom: 20px;
  font-size: 22px;
  line-height: 1.5;
}

.c-tabs--ready .c-tabs__panel-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 767.98px) {
  .c-tabs--ready .c-tabs__list {
    flex-direction: column;
  }

  .c-tabs__tab + .c-tabs__tab {
    border-top: 1px solid var(--c-line-soft);
    border-left: 0;
  }

  .c-tabs__panel + .c-tabs__panel {
    margin-top: 40px;
  }

  .c-tabs--ready .c-tabs__panel {
    margin-top: 24px;
  }
}

/* c-compare-table：比較表（料金の5プランなど）
   列見出し（th scope="col"：プラン名・価格）と行見出し（th scope="row"：項目）。
   記号（●・―）は aria-hidden にして、読み上げ用の文字（u-visually-hidden）を添える
   推奨の列は、その列のセルに --recommended を付ける（枠線は使わず、見出しを墨の面・その下のセルを紙色の面にする。見出しに「推奨」バッジ）
   表が幅に収まらないとき（SPなど）は、表の中だけ横にスクロールする（ページ全体には出さない）。
   行見出しの列は左に固定。スクロールできることは、上のヒント文と右端のぼかしで示す
   （JS が動くと、スクロールできるときだけヒントとぼかしを出す。JS が無いときは1100px未満でヒントを出す） */
.c-compare-table__hint {
  display: none;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-ink-3);
}

@media (max-width: 1099.98px) {
  .c-compare-table__hint {
    display: flex;
  }
}

.c-compare-table.is-scrollable .c-compare-table__hint {
  display: flex;
}

.c-compare-table--ready:not(.is-scrollable) .c-compare-table__hint {
  display: none;
}

.c-compare-table__frame {
  position: relative;
}

.c-compare-table.is-scrollable:not(.is-at-end) .c-compare-table__frame::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 40px;
  pointer-events: none;
  /* 始点は --c-white の透明（rgba の白。transparent だと、古い Safari で灰色がにじむ） */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--c-white));
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
}

/* position: relative は、表の中の読み上げ用の文字（u-visually-hidden は position: absolute）を
   この枠の中に閉じ込めるため（無いと、枠の外に飛び出してページ全体の横スクロールになる） */
.c-compare-table__scroll {
  position: relative;
  overflow-x: auto;
  background: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-m);
  -webkit-overflow-scrolling: touch;
}

.c-compare-table__table {
  width: 100%;
  min-width: 880px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .04em;
  border-collapse: separate;
  border-spacing: 0;
}

.c-compare-table__colhead {
  min-width: 132px;
  padding: 20px 12px 16px;
  font-weight: 700;
  text-align: center;
  vertical-align: bottom;
  overflow-wrap: normal;   /* 見出しのセル（th）は、語の途中で折り返さない（2文字の見出しが縦に割れない）。本文のセル（td）は今のまま */
  word-break: keep-all;
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-ink);
}

/* 左上の角（見出しの行と行見出しの列が交わるところ）。左に固定 */
.c-compare-table__colhead--corner {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 220px;
  min-width: 200px;
  text-align: left;
}

.c-compare-table__rowhead {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 220px;
  min-width: 200px;
  padding: 16px 20px;
  font-weight: 700;
  text-align: left;
  vertical-align: middle;
  overflow-wrap: normal;   /* th は語の途中で折り返さない。折り返してよい所は、u-nowrap の塊の間に <wbr> を置いて示す */
  word-break: keep-all;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line-soft);
}

.c-compare-table__rowhead::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--c-line-soft);
}

.c-compare-table__cell {
  padding: 16px 12px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--c-line-soft);
}

.c-compare-table__table tbody tr:last-child > .c-compare-table__rowhead,
.c-compare-table__table tbody tr:last-child > .c-compare-table__cell {
  border-bottom: 0;
}

.c-compare-table__plan {
  display: block;
  font-size: 14px;
  line-height: 1.5;
}

.c-compare-table__price {
  display: block;
  margin-top: 6px;
  font-family: var(--ff-head);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.c-compare-table__unit {
  margin-left: 2px;
  font-size: 13px;
}

.c-compare-table__sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-ink-3);
}

.c-compare-table__mark {
  font-size: 16px;
  line-height: 1;
}

.c-compare-table__mark--no {
  color: var(--c-ink-3);
}

/* 「推奨」バッジ（c-tag c-tag--outline-accent と組み合わせる）。プラン名の上に置く */
.c-compare-table__badge {
  display: flex;
  width: max-content;
  margin: 0 auto 8px;
}

/* 推奨の列：枠線は使わず、面の色で示す。見出しは墨の面に白い文字（推奨プランのカードと同じ）、その下のセルは紙色の面 */
.c-compare-table__colhead--recommended {
  color: var(--c-white);
  background: var(--c-ink);
}

.c-compare-table__cell--recommended {
  background: var(--c-paper);
}

@media (max-width: 767.98px) {
  .c-compare-table__table {
    min-width: 700px;
  }

  .c-compare-table__colhead {
    min-width: 112px;
    padding: 16px 8px 12px;
  }

  .c-compare-table__colhead--corner,
  .c-compare-table__rowhead {
    width: 132px;
    min-width: 132px;
  }

  .c-compare-table__rowhead {
    padding: 12px;
    font-size: 13px;
  }

  .c-compare-table__cell {
    padding: 12px 8px;
  }
}

/* c-note-box：注記・オプションの囲み。枠線は付けず、面の色で囲む
   既定      面の色（--card-bg。白い地の上は紙色、紙色の地の上は白）。見出し（c-note-box__title）と本文（c-note-box__text / c-note-box__list）
   --paper   紙色の面に固定する（白いフォームのカードの中など、面の色を決め打ちしたいとき）
   --plain   面も無し（表の下の「※〜」などの小さな注記）
   c-note-box__list--note   各項目の頭に「※」を付ける */
.c-note-box {
  padding: 20px 24px;
  background: var(--card-bg);
  border-radius: var(--radius-m);
}

.c-note-box--paper {
  background: var(--c-paper);
}

.c-note-box--plain {
  padding: 0;
  background: none;
  border-radius: 0;
}

.c-note-box__title {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.6;
}

.c-note-box__text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-ink-2);
  text-wrap: pretty;   /* 枠線をなくして文の幅が 2px 広がったぶん、最後の行に1〜2文字だけ残らないようにする（未対応のブラウザでは通常の折り返し） */
}

.c-note-box__list {
  display: grid;
  gap: 4px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-ink-2);
  text-wrap: pretty;
}

.c-note-box__list > li {
  position: relative;
  padding-left: 16px;
}

.c-note-box__list > li::before {
  content: "";
  position: absolute;
  top: .85em;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--c-accent);
}

.c-note-box__list--note > li {
  padding-left: 1.3em;
}

.c-note-box__list--note > li::before {
  content: "※";
  top: 0;
  width: auto;
  height: auto;
  background: none;
}

.c-note-box--plain .c-note-box__list,
.c-note-box--plain .c-note-box__text {
  font-size: 13px;
  color: var(--c-ink-3);
}

@media (max-width: 767.98px) {
  .c-note-box {
    padding: 18px 20px;
  }

  .c-note-box--plain {
    padding: 0;
  }
}

/* c-sidebar / c-side-box：ブログのサイドバー（c-split--sidebar の side に置く）
   箱（c-side-box）を並べる。PCは右カラム（幅 320px）で縦に積む。SPは記事一覧の下に縦に積む。
   タブレット（768〜1099px）は、記事一覧の下で横いっぱいになるので、箱を2列に並べる（ボタンが横に伸びすぎない）
   箱の種類  --cta（無料診断のCTA。淡い朱の面。条件は c-side-box__points）/ 人気記事（c-side-box__posts）/ カテゴリ（c-side-box__list）/ 提案資料DL（c-side-box__cover）
   箱は枠で囲まない。上に墨の細い罫線を引き、その下に見出しと中身を置く（c-steps と同じ考え方）。CTA の箱だけ、淡い朱の面にして目立たせる
   サイドバーは aside にせず div にする（aside を main の中に置くと、ランドマークの入れ子になるため） */
.c-sidebar {
  display: grid;
  gap: 40px;
  min-width: 0;
}

.c-side-box {
  min-width: 0;
  padding-top: 18px;
  border-top: 1px solid var(--c-ink);
}

.c-side-box--cta {
  padding: 24px;
  background: var(--c-accent-soft);
  border-top: 0;
  border-radius: var(--radius-m);
}

.c-side-box__title {
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.6;
}

.c-side-box__text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-ink-2);
  text-wrap: pretty;   /* 箱の左右の余白をなくして文の幅が広がったぶん、最後の行に1〜2文字だけ残らないようにする */
}

/* ボタンは幅いっぱい。狭い画面では文字を折り返す */
.c-side-box__button {
  width: 100%;
  height: auto;
  min-height: 56px;
  margin-top: 16px;
  padding: 12px 16px;
  white-space: normal;
}

/* CTAの箱の条件（毎月10社限定・2営業日以内にご連絡・営業電話なし）。ボタンの下に、小さな文字で、項目の間を「・」でつないだ1行の文として置く。
   「・」は前の項目の末尾に付けるので、折り返しても行頭に来ない。項目の中では折り返さない（箱が狭いときは項目の切れ目で折り返す） */
.c-side-box__points {
  display: flex;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-ink-2);
}

.c-side-box__points > li {
  white-space: nowrap;
}

.c-side-box__points > li:not(:last-child)::after {
  content: "・";
  content: "・" / "";
}

/* 人気記事：番号（CSSカウンタ）+ タイトル + 日付の小さな一覧。番号は目次（c-toc）と同じ、本文の書体の 14px・太字・補足の墨色 */
.c-side-box__posts {
  display: grid;
  counter-reset: c-side-posts;
}

.c-side-box__post {
  counter-increment: c-side-posts;
  border-top: 1px solid var(--c-line-soft);
}

.c-side-box__post:first-child {
  border-top: 0;
}

.c-side-box__post-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
}

.c-side-box__post:first-child .c-side-box__post-link {
  padding-top: 0;
}

.c-side-box__post:last-child .c-side-box__post-link {
  padding-bottom: 0;
}

.c-side-box__post-link::before {
  content: counter(c-side-posts);
  content: counter(c-side-posts) / "";
  flex: none;
  width: 1.7em;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-ink-2);
}

.c-side-box__post-body {
  min-width: 0;
}

.c-side-box__post-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  text-wrap: balance;   /* 題名が2〜3行になるとき、行の長さをそろえて、最後の行に1〜2文字だけ残らないようにする（auto-phrase が効かない Safari・Firefox 向け。下の @supports を参照） */
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}

.c-side-box__post-link:hover .c-side-box__post-title {
  text-decoration-color: currentColor;
}

/* word-break: auto-phrase が効くブラウザ（Chrome）は、語のまとまりで折り返すので、行の長さをそろえない
   （そろえると、「ランキング — YouTube首位」の「—」が行頭に来ることがある） */
@supports (word-break: auto-phrase) {
  .c-side-box__post-title {
    text-wrap: wrap;
  }
}

.c-side-box__post-meta {
  display: block;
  margin-top: 2px;
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--c-ink-3);
}

/* カテゴリ：名前 + 件数 */
.c-side-box__list {
  display: grid;
}

.c-side-box__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 0;
  font-size: 15px;
  line-height: 1.6;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid var(--c-line-soft);
  transition: color .2s;
}

.c-side-box__list > li:first-child .c-side-box__link {
  border-top: 0;
}

.c-side-box__link:hover {
  color: var(--c-accent-text);
}

.c-side-box__count {
  flex: none;
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-ink-3);
}

/* 提案資料DL：表紙の仮枠（c-tile など）+ 説明 + ボタン */
.c-side-box__cover {
  max-width: 360px;
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: var(--radius-s);
}

.c-side-box__cover > img {
  width: 100%;
}

.c-side-box__cover + .c-side-box__text {
  margin-bottom: 16px;
}

/* タブレット：箱を2列に並べる（左から CTA・人気記事、カテゴリ・提案資料DL）。同じ行の箱は高さをそろえる */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .c-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }
}

@media (max-width: 767.98px) {
  .c-sidebar {
    gap: 32px;
  }

  .c-side-box {
    padding-top: 16px;
  }

  .c-side-box--cta {
    padding: 20px;
  }

  /* 人気記事の日付はスマホで 12px → 13px */
  .c-side-box__post-meta {
    font-size: 13px;
  }
}

/* c-post-card--featured：注目記事の横長カード（既存の c-post-card に足す修飾子。既存の規則は書き換えない）
   a.c-post-card.c-post-card--featured にして、全体をリンクにする。c-card と同じく、枠線なし・面の色（--card-bg）・角丸 2px
   768px以上は左にメディア、右に文字（カテゴリ・日付・タイトル・抜粋 c-post-card__excerpt）。SPは縦に積む。hover で題名に下線が付く（c-post-card） */
.c-post-card--featured {
  --tag-bg: var(--card-alt);   /* カードの面の上のタグは、面と反対の淡い色（c-tag） */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background: var(--card-bg);
  border-radius: var(--radius-m);
}

.c-post-card--featured .c-post-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 22px 22px 26px;
}

.c-post-card--featured .c-post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 0;
}

.c-post-card--featured .c-post-card__title {
  margin-top: 12px;
  font-size: 20px;
  line-height: 1.6;
}

.c-post-card--featured .c-post-card__excerpt {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-ink-2);
}

@media (min-width: 768px) {
  .c-post-card--featured {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }

  .c-post-card--featured .c-post-card__media {
    min-height: 240px;
    aspect-ratio: auto;
  }

  .c-post-card--featured .c-post-card__body {
    padding: 28px 32px;
  }
}

/* c-prose：文章ページ（プライバシーポリシーなど）と記事本文の読み物の書式
   WordPress の本文（クラスのない h2・p・ul・table など）にそのまま効くよう、要素のセレクタで書いている
   行間1.95・幅は最大760px。見出し h2・h3・h4（飾りの線は付けず、大きさと太さだけで階層を示す）、段落、箇条書き（朱の四角）、
   番号つきリスト、引用（紙色の面。左の線は付けない）、表、図（figcaption）、強調（strong）、リンク（朱の下線）、code、hr
   記事内のFAQは c-faq（components.css）を使う。details をそのまま置いても、ここでは装飾しない */
.c-prose {
  max-width: 760px;
  min-width: 0;
  font-size: var(--fs-body);
  line-height: 1.95;
  letter-spacing: .04em;
  color: var(--c-ink);
}

.c-prose > * + * {
  margin-top: 1.5em;
}

.c-prose > :first-child {
  margin-top: 0;
}

.c-prose h2 {
  margin-top: 3.2em;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.5;
  /* 目次などから飛んだとき、見出しが固定のヘッダーに貼り付かないようにする（ヘッダーの高さ + 24px） */
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.c-prose h3 {
  margin-top: 2.6em;
  font-size: 20px;
  line-height: 1.55;
}

.c-prose h4 {
  margin-top: 2.2em;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}

/* 見出しの直後は詰める */
.c-prose > h2 + *,
.c-prose > h3 + *,
.c-prose > h4 + * {
  margin-top: 1em;
}

.c-prose a {
  color: var(--c-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.c-prose a:hover {
  color: var(--c-accent-hover);
  text-decoration-thickness: 2px;
}

/* 強調：太い淡朱の下線を、文字の下半分に食い込ませてマーカーにする（背景のグラデーションは使わない） */
.c-prose strong {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--c-accent-soft);
  text-decoration-skip-ink: none;
  text-decoration-thickness: .5em;
  text-underline-offset: -.28em;
}

.c-prose em {
  font-style: normal;
  font-weight: 700;
}

/* 箇条書きは本物のリストのまま（読み上げでリストと伝わる）、印だけ朱の四角にする */
.c-prose ul {
  padding-left: 1.5em;
  list-style: square;
}

.c-prose ol {
  padding-left: 1.8em;
  list-style: decimal;
}

.c-prose li::marker {
  color: var(--c-accent);
}

.c-prose ol > li::marker {
  font-family: var(--ff-mono);
  font-weight: 500;
  color: var(--c-ink-2);
}

.c-prose li + li {
  margin-top: .5em;
}

.c-prose li > ul,
.c-prose li > ol {
  margin-top: .5em;
}

.c-prose blockquote {
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding: 20px 24px;
  color: var(--c-ink-2);
  background: var(--card-bg);
  border-radius: var(--radius-m);
}

.c-prose blockquote > * + * {
  margin-top: .8em;
}

.c-prose blockquote cite {
  display: block;
  font-size: 13px;
  font-style: normal;
  line-height: 1.7;
  color: var(--c-ink-3);
}

.c-prose figure > img {
  width: 100%;
  height: auto;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-m);
}

.c-prose figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-ink-3);
}

/* 表：幅いっぱい。狭い画面では、本文のセル（td）は語の途中でも折り返して、ページ全体の横スクロールを出さない
   （見出しのセル th だけは、語の途中で折り返さない。下の .c-prose th）。
   列が多い表（4列以上など）は、c-compare-table のように表の中だけスクロールさせる */
.c-prose table {
  width: 100%;
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  border-collapse: collapse;
}

/* 表を包む figure（WordPress の表ブロック。<figure class="wp-block-table"> で表を包む。WordPress 本体の CSS も、同じ overflow-x: auto を当てている）。
   見出しのセル（th）は語の途中で折り返さないので、長い見出し（句読点のない長い日本語や URL など）があると、表が画面より広くなる。
   そのときは、ページ全体ではなく、この figure の中で横スクロールさせる。画像の figure には当てない。
   wp-block-table で包まない表は、これでは防げない */
.c-prose .wp-block-table {
  overflow-x: auto;
}

.c-prose caption {
  margin-bottom: 8px;
  font-size: 13px;
  text-align: left;
  color: var(--c-ink-3);
}

.c-prose th,
.c-prose td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--c-line-soft);
}

.c-prose th {
  font-weight: 700;
  overflow-wrap: normal;   /* 見出しのセル（th）は、語の途中で折り返さない（2文字の見出しが縦に割れない）。本文のセル（td）は今のまま */
  word-break: keep-all;
  background: var(--c-paper);
}

.c-prose code {
  padding: .1em .4em;
  font-family: var(--ff-mono);
  font-size: .9em;
  font-weight: 500;
  background: var(--c-paper);
  border-radius: var(--radius-s);
}

.c-prose hr {
  height: 0;
  margin-block: 3em;
  border: 0;
  border-top: 1px solid var(--c-line-soft);
}

@media (max-width: 767.98px) {
  .c-prose h2 {
    margin-top: 2.8em;
  }

  .c-prose h3 {
    font-size: 18px;
  }

  .c-prose th,
  .c-prose td {
    padding: 10px 12px;
  }
}

/* c-article：記事（ブログ記事詳細）。本文は c-article__body c-prose
   メイン画像の枠（c-article__visual）/ メタ情報（c-article__meta）/ 要約（c-article__summary）/ 目次（c-toc）/ 著者（c-author）/
   記事下の診断CTA（c-article-cta）/ 関連リンク（c-related） */
.c-article {
  max-width: 760px;
  min-width: 0;
}

/* メイン画像の枠（比率 1.91:1）。画像が届くまでは、中に格子柄のタイル（c-tile--fill）を置き、届いたら <img> に替える。
   枠いっぱいに広げて、はみ出す所は切り抜くので、画像の比率が違っても、枠の高さは変わらない（c-screen と同じ） */
.c-article__visual {
  position: relative;
  aspect-ratio: 1.91 / 1;
  overflow: hidden;
}

.c-article__visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-article > * + * {
  margin-top: 40px;
}

/* メタ情報：カテゴリ・公開日・更新日 */
.c-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--c-ink-3);
}

/* カテゴリのリンク：中のチップは小さくても、押せる高さは44px */
.c-article__category {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.c-article__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.c-article__meta-label {
  color: var(--c-ink-2);
}

/* 要約：h2 の直下に置く、結論を2〜3文で言い切る一問一答。dl（Q は dt、A は dd）。枠線は付けず、面の色（--card-bg）で囲む。
   Q・A の印は、丸のバッジにせず、行頭の太字の文字（Q は墨、A は朱）にする */
.c-article__summary {
  padding: 22px 26px;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .04em;
  background: var(--card-bg);
  border-radius: var(--radius-m);
}

.c-article__summary-label {
  margin-bottom: 12px;
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .16em;
  color: var(--c-accent-text);
}

.c-article__summary-q,
.c-article__summary-a {
  position: relative;
  padding-left: 28px;
}

.c-article__summary-q {
  font-weight: 700;
  text-wrap: balance;   /* 質問が2〜3行になるとき、行の長さをそろえて、最後の行に1〜2文字だけ残らないようにする */
}

.c-article__summary-a {
  margin-top: 8px;
  text-wrap: pretty;
}

.c-article__summary-q::before,
.c-article__summary-a::before {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 700;
}

.c-article__summary-q::before {
  content: "Q";
  content: "Q" / "";
}

.c-article__summary-a::before {
  content: "A";
  content: "A" / "";
  color: var(--c-accent-text);
}

/* 目次：記事の h2 へのリンク。番号は CSS カウンタ（本文の書体の 14px・太字・補足の墨色。c-result の手順の番号と同じ。等幅・朱色・「01」の 0 埋めは使わない） */
.c-toc {
  padding: 24px 28px 12px;
  background: var(--card-bg);
  border-radius: var(--radius-m);
}

.c-toc__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.c-toc__title-en {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--c-ink-3);
}

.c-toc__list {
  counter-reset: c-toc;
}

.c-toc__item {
  counter-increment: c-toc;
}

.c-toc__item + .c-toc__item {
  border-top: 1px solid var(--c-line-soft);
}

.c-toc__link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 44px;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}

.c-toc__link::before {
  content: counter(c-toc);
  content: counter(c-toc) / "";
  flex: none;
  min-width: 1.2em;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink-2);
}

.c-toc__link:hover {
  text-decoration-color: currentColor;
}

/* 人の写真の丸：c-author__avatar（著者）/ c-profile__avatar（メンバー）/ c-case-detail__avatar（担当者コメント）で共通。
   中は写真（<img>）か、写真が届くまでの仮表示（--placeholder を並べて付け、小さな文字「写真（ご支給）」を入れる）。頭文字の丸は使わない。
   仮表示の文字は12px・字間なしの1行（84px）。折り返さない（「写真」だけの短い行ができないように、丸は 96px 以上にして1行に収める）。
   丸の線は内側に引かれるので、丸の大きさは変わらない */
.c-author__avatar,
.c-profile__avatar,
.c-case-detail__avatar {
  display: grid;
  flex: none;
  place-items: center;
  overflow: hidden;
  background: var(--c-paper);
  border-radius: 50%;
}

.c-author__avatar--placeholder,
.c-profile__avatar--placeholder,
.c-case-detail__avatar--placeholder {
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  color: var(--c-ink-2);
  border: 1px solid var(--c-line-soft);
}

.c-author__avatar > img,
.c-profile__avatar > img,
.c-case-detail__avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 著者情報：写真の丸（上の「人の写真の丸」）+ 名前 + 肩書き + 紹介文。囲まず、上に墨の細い罫線を引く */
.c-author {
  padding-top: 20px;
  border-top: 1px solid var(--c-ink);
}

.c-author__label {
  margin-bottom: 16px;
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .16em;
  color: var(--c-ink-3);
}

.c-author__inner {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.c-author__avatar {
  width: 96px;
  height: 96px;
}

/* 幅の狭い SP：写真の丸（96px）の右に文字を置くと、文字の列が 170px 前後（320px の端末）まで細くなり、紹介文が短い行に分かれる。
   写真の丸を上、名前・肩書き・紹介文を下に縦に並べて、文字の列を画面の幅いっぱい（280px 以上）にする */
@media (max-width: 479.98px) {
  .c-author__inner {
    flex-direction: column;
    gap: 16px;
  }
}

.c-author__body {
  min-width: 0;
}

.c-author__name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}

.c-author__role {
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-ink-3);
  text-wrap: balance;
}

.c-author__bio {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-ink-2);
  text-wrap: pretty;
}

/* 記事下の診断CTA：淡い朱の面（枠線は付けない）。ボタンは c-button--primary */
.c-article-cta {
  padding: 36px 40px;
  background: var(--c-accent-soft);
  border-radius: var(--radius-m);
}

.c-article-cta__title {
  margin-top: 12px;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.5;
  text-wrap: balance;
}

.c-article-cta__text {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--c-ink-2);
}

.c-article-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 24px;
}

/* c-button c-button--primary に並べて付ける。狭い画面でも、長い文言が折り返して収まる */
.c-article-cta__button {
  height: auto;
  min-height: 56px;
  padding: 12px 24px;
  white-space: normal;
}

.c-article-cta__points {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-ink-2);
}

/* 条件（毎月10社限定・2営業日以内にご連絡・営業電話なし）は、項目の間を「・」でつないだ1行の文として読ませる（c-cta-band__points と同じ） */
.c-article-cta__points > li {
  white-space: nowrap;
}

.c-article-cta__points > li:not(:last-child)::after {
  content: "・";
  content: "・" / "";
}

/* 関連リンク：関連サービス・関連事例・関連記事を、見出し + リンクの並びで縦に並べる（1列）。
   記事の幅（最大 760px）で3列にすると窮屈なため。題名は WordPress で入力される長い文字なので、
   収まらないときは語の途中でも折り返す（c-related__link の overflow-wrap）。
   囲まず、上に墨の細い罫線を引く。リンクは題名だけの行（矢印は付けない）で、行の間を細い罫線で区切る */
.c-related {
  padding-top: 24px;
  border-top: 1px solid var(--c-ink);
}

.c-related__title {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.6;
}

.c-related__groups {
  display: grid;
  gap: 28px;
}

.c-related__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
}

.c-related__heading::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--c-accent);
}

.c-related__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 0;
  font-size: 15px;
  line-height: 1.6;
  color: inherit;
  overflow-wrap: anywhere;
  text-wrap: balance;   /* 題名が2行になるとき、行の長さをそろえて、最後の行に1〜2文字だけ残らないようにする（auto-phrase が効かない Safari・Firefox 向け。下の @supports を参照） */
  text-decoration: none;
  border-top: 1px solid var(--c-line-soft);
  transition: color .2s;
}

.c-related__link:hover {
  color: var(--c-accent-text);
}

/* word-break: auto-phrase が効くブラウザ（Chrome）は、語のまとまりで折り返すので、行の長さをそろえない
   （そろえると、「精密化学／イメージング最大手」の「／」が行頭に来ることがある） */
@supports (word-break: auto-phrase) {
  .c-related__link {
    text-wrap: wrap;
  }
}

@media (max-width: 767.98px) {
  .c-article > * + * {
    margin-top: 32px;
  }

  /* 等幅の小さなラベル（公開日・更新日、要約、CONTENTS、WRITER）はスマホで 12px → 13px */
  .c-article__meta {
    font-size: 13px;
  }

  .c-article__summary {
    padding: 18px 20px;
  }

  .c-article__summary-label {
    font-size: 13px;
  }

  .c-toc {
    padding: 20px 20px 8px;
  }

  .c-toc__title-en {
    font-size: 13px;
  }

  .c-author {
    padding-top: 18px;
  }

  .c-author__label {
    font-size: 13px;
  }

  .c-author__inner {
    gap: 16px;
  }

  .c-article-cta {
    padding: 28px 22px;
  }

  .c-article-cta__button {
    width: 100%;
    padding-inline: 16px;   /* 文字だけで約 192px。320px の端末（ボタンの内側 236px）でも、左右 24px の余白だと 188px で「む」が落ちるので、16px に詰める */
  }

  .c-related {
    padding-top: 20px;
  }
}

/* c-case-detail：事例詳細の固定の構成
   クライアント概要（業種・規模）/ 課題 / 対応（施策・制作物）/ 成果（数値 + グラフの枠）/ 担当者コメント
   各章は c-case-detail__section。PCは左に見出し、右に内容（見出しに番号は付けない）。成果の数値は、共通部品の数字の一覧（c-data-list c-data-list--no-source。単位は c-data-list__unit）
   グラフの仮枠は、ページ側で比率（2:1）を決めた枠の中に、格子柄のタイル（c-tile--fill）を置く（埋め込みの仮枠 c-embed-placeholder は使わない）。社名を出せない事例は c-case-detail__note を最後に置く */
.c-case-detail {
  min-width: 0;
}

.c-case-detail__section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding-block: 36px;
  border-top: 1px solid var(--c-line-soft);
}

.c-case-detail__section:first-child {
  padding-top: 0;
  border-top: 0;
}

.c-case-detail__heading {
  font-size: 20px;
  line-height: 1.5;
}

.c-case-detail__body {
  min-width: 0;
}

.c-case-detail__list {
  padding-left: 1.5em;
  font-size: 15px;
  line-height: 1.9;
  list-style: square;
}

.c-case-detail__list > li::marker {
  color: var(--c-accent);
}

.c-case-detail__list > li + li {
  margin-top: .4em;
}

.c-case-detail__sub + .c-case-detail__sub {
  margin-top: 28px;
}

.c-case-detail__sub-title {
  margin-bottom: 10px;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-ink-2);
}

.c-case-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.c-case-detail__graph {
  margin-top: 24px;
}

.c-case-detail__caption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-ink-3);
}

/* 担当者コメント：写真の丸 + 引用 + 名前・肩書き */
.c-case-detail__comment {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.c-case-detail__avatar {
  width: 96px;
  height: 96px;
}

.c-case-detail__quote {
  min-width: 0;
  margin: 0;
}

.c-case-detail__text {
  font-size: 16px;
  line-height: 1.95;
  text-wrap: pretty;   /* 写真の丸を上に積んで文字の列が広がったぶん、最後の行に1〜2文字だけ残らないようにする（未対応のブラウザでは通常の折り返し） */
}

.c-case-detail__speaker {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-ink-3);
  text-wrap: pretty;
}

.c-case-detail__note {
  padding-top: 24px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-ink-3);
  border-top: 1px solid var(--c-line-soft);
}

@media (min-width: 768px) {
  .c-case-detail__section {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 16px 40px;
  }
}

@media (max-width: 767.98px) {
  .c-case-detail__section {
    padding-block: 28px;
  }

  .c-case-detail__heading {
    font-size: 18px;
  }

  .c-case-detail__comment {
    gap: 14px;
  }
}

/* 幅の狭い SP：写真の丸（96px）の右に引用を置くと、文字の列が 170px 前後（320px の端末）まで細くなり、短い行に分かれる。
   写真の丸を上、引用を下に縦に並べて、文字の列を画面の幅いっぱいにする（c-author と同じ） */
@media (max-width: 479.98px) {
  .c-case-detail__comment {
    flex-direction: column;
    gap: 16px;
  }
}

/* c-info-table：会社情報の表（dl の行）。PCは左に項目名（紙色）、右に内容。SPは項目名の下に内容
   dl の中に div（c-info-table__row）で dt と dd を包む */
.c-info-table {
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-m);
}

.c-info-table__row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
}

.c-info-table__row + .c-info-table__row {
  border-top: 1px solid var(--c-line-soft);
}

.c-info-table__term {
  padding: 18px 24px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  background: var(--c-paper);
}

.c-info-table__desc {
  min-width: 0;
  padding: 18px 24px;
  font-size: 15px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
  .c-info-table__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-info-table__term {
    padding: 12px 20px 10px;
  }

  .c-info-table__desc {
    padding: 12px 20px 16px;
  }
}

.c-timeline {
  position: relative;
}

.c-timeline::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 4px;
  width: 1px;
  background: var(--c-line-soft);
}

.c-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 0 0 24px 32px;
}

.c-timeline__item:last-child {
  padding-bottom: 0;
}

.c-timeline__item::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--c-accent);
}

.c-timeline__year {
  font-family: var(--ff-mono);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .04em;
}

.c-timeline__text {
  min-width: 0;
  font-size: 15px;
  line-height: 1.8;
}

.c-timeline__text a {
  color: var(--c-accent-text);
  text-underline-offset: 3px;
}

@media (max-width: 767.98px) {
  .c-timeline__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-bottom: 20px;
  }
}

/* 体制：カードにせず、各項目の上に墨の細い罫線を引く（c-steps と同じ考え方）。
   --stack-pc  PC（1100px以上）だけ1列に縦に積む（横に写真を置くとき。タブレット・SP は既定の並びのまま） */
.c-org {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 40px;
}

@media (min-width: 1100px) {
  .c-org--stack-pc {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

.c-org__item {
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid var(--c-ink);
}

.c-org__label {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .16em;
  color: var(--c-accent-text);
}

.c-org__title {
  margin-top: 6px;
}

.c-org__text {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-ink-2);
  text-wrap: pretty;
}

@media (max-width: 767.98px) {
  .c-org {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* ラベルはスマホで 12px → 13px */
  .c-org__label {
    font-size: 13px;
  }
}

/* c-profile：メンバー（写真の丸 + 役割 + 名前）。PC・タブレットは4列、SPは2列
   丸（c-profile__avatar）は、著者・担当者コメントの丸と共通（作りは上の「人の写真の丸」）。氏名・写真が未定のときの仮表示は --placeholder を並べて付ける
   （人型のアイコンは使わず、紙色の丸に --c-line-soft の線と --c-ink-2 の小さな文字「写真（ご支給）」）。写真が届いたら <img> に替える */
.c-profile {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
}

.c-profile__item {
  min-width: 0;
  text-align: center;
}

.c-profile__avatar {
  width: 112px;
  height: 112px;
  margin: 0 auto 16px;
}

.c-profile__role {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .08em;
  color: var(--c-accent-text);
}

.c-profile__name {
  margin-top: 2px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}

@media (max-width: 767.98px) {
  .c-profile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
  }

  .c-profile__avatar {
    width: 96px;
    height: 96px;
  }
}

/* c-result：送信完了の表示（チェックのアイコン・見出し・説明・次の案内・トップへ戻るボタン）
   見出し（c-result__title）の h は、ページに別の h1 があるかで h1 / h2 を選ぶ
   説明（c-result__text）の下に、写真の枠（c-photo-frame c-photo-frame--2x1）を c-result__photo と並べて置ける（上に 32px。省ける）
   次の案内（c-result__next。紙色の面）の中身は、次の3つから選ぶ（どれも省ける）
     c-result__steps / __step   手順（番号つきの <ol>）。各手順の上に墨の細い罫線を引き、左に本文の書体の小さな数字（c-steps と同じ考え方。丸も、等幅・朱の「01」も使わない）。
                                番号は CSS が振り、li の中は文章をそのまま書く（strong や span を入れても崩れない）
     c-result__list             「ご用意いただくもの」などの箇条書き（<ul>。印は朱の四角）
     c-result__note             手順ではない補足（<p>。「メールが届かないときは…」）。手順の <ol> の外、すぐ後ろに置く */
.c-result {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

.c-result__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  color: var(--c-accent);
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.c-result__icon > svg {
  width: 32px;
  height: 32px;
}

.c-result__title {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.45;
}

.c-result__text {
  margin-top: 16px;
  color: var(--c-ink-2);
}

.c-result__photo {
  margin-top: 32px;
}

.c-result__next {
  margin-top: 36px;
  padding: 24px 28px 26px;
  text-align: left;
  background: var(--c-paper);
  border-radius: var(--radius-m);
}

.c-result__next-title {
  font-size: 16px;
  line-height: 1.6;
}

.c-result__steps {
  margin-top: 12px;
  counter-reset: c-result;
}

/* 手順：上に墨の細い罫線。番号は ::before で左上に置き（position: absolute）、文章は padding-left で空けた右側に、ふつうの行として並べる。
   li の中に strong や span を入れても、文章が列に分かれず、番号と文頭がずれない。
   番号は本文の書体の 14px・太字（c-steps__num と同じ）。2桁（10 以上）になっても収まる幅（28px）を空ける */
.c-result__step {
  position: relative;
  padding: 12px 0 12px 28px;
  font-size: 15px;
  line-height: 1.8;
  text-wrap: pretty;
  border-top: 1px solid var(--c-ink);
  counter-increment: c-result;
}

.c-result__step::before {
  content: counter(c-result);
  content: counter(c-result) / "";
  position: absolute;
  top: 12px;
  left: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--c-ink-2);
}

/* 手順ではない補足（手順の <ol> の外に置く） */
.c-result__note {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-ink-2);
}

/* 「ご用意いただくもの」の箇条書き。文字の大きさ・色は手順（c-result__step）と同じ。印は朱の四角 */
.c-result__list {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-ink);
}

.c-result__list > li {
  position: relative;
  padding-left: 16px;
}

.c-result__list > li::before {
  content: "";
  position: absolute;
  top: .85em;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--c-accent);
}

.c-result__actions {
  margin-top: 36px;
}

@media (max-width: 767.98px) {
  .c-result__next {
    padding: 20px 20px 22px;
  }

  .c-result__button {
    width: 100%;
  }
}

/* 強制カラー（Windowsのハイコントラスト）では背景色が消えるので、
   背景で描いている印（点・四角）に文字色を指定し、選んだ状態を枠で示す */
@media (forced-colors: active) {
  .c-form__choice-input[type="radio"]:checked + .c-form__choice-box::after,
  .c-choice-list__input:checked + .c-choice-list__label .c-choice-list__mark::after,
  .c-tabs__tab[aria-selected="true"]::before,
  .c-note-box__list > li::before,
  .c-result__list > li::before,
  .c-timeline::before,
  .c-timeline__item::before,
  .c-related__heading::before {
    background-color: CanvasText;
  }

  /* 面の色が消えると、枠線のない面は地との区別がつかなくなる。強制カラーのときだけ細い枠を付ける */
  .c-post-card--featured,
  .c-toc,
  .c-article__summary,
  .c-article-cta,
  .c-note-box:not(.c-note-box--plain),
  .c-side-box--cta {
    border: 1px solid CanvasText;
  }

  /* 比較表の推奨の列は面の色で示しているので、面の色が消えると見出しの「推奨」の文字だけになる。見出しの上に線を引く */
  .c-compare-table__colhead--recommended {
    border-top: 2px solid CanvasText;
  }

  .c-chip-nav__link[aria-current="page"],
  .c-pagination__link[aria-current="page"],
  .c-form__chip-input:checked + .c-form__chip-text,
  .c-choice-list__input:checked + .c-choice-list__label,
  .c-tabs__tab[aria-selected="true"] {
    border: 2px solid Highlight;
  }
}