/* components.css
   他のページでも使い回す部品（c-）
   土台      c-skip-link / c-button / c-eyebrow / c-section-head / c-card / c-tag / c-lattice / c-play
   画像の枠   c-tile（格子柄。画像が届くまでの仮表示）/ c-screen（実画面の枠）/ c-photo-frame（写真の枠）
   数字・流れ  c-stats / c-steps / c-callout / c-data-list
   カード     c-card-grid / c-case-card / c-post-card / c-service-card / c-feature-card / c-video-card / c-plan-card
   帯・枠     c-hero / c-cta-band
   サービスページ用  c-faq / c-chips / c-filter（絞り込み。動きは main.js）/ c-section-note / c-text-link

   個数・文言の量・置き場所に依存しない作りにする（c-steps と c-stats は項目数が可変）
   メディアクエリは従来の書き方だけ（書き方の表は base.css の先頭） */

.c-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 300;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-white);
  text-decoration: none;
  background: var(--c-ink);
  transform: translateY(-120%);
}

.c-skip-link:focus {
  transform: none;
}

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 28px;
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid transparent;
  border-radius: var(--radius-s);
  transition: background-color .2s, border-color .2s, color .2s;
}

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

.c-button--primary {
  color: var(--c-white);
  background: var(--c-accent);
  border-color: var(--c-accent);
}

.c-button--primary:hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
}

.c-button--outline {
  color: var(--c-ink);
  background: transparent;
  border-color: var(--c-ink);
}

.c-button--outline:hover {
  color: var(--c-white);
  background: var(--c-ink);
}

.c-button--on-dark {
  color: var(--c-white);
  background: transparent;
  border-color: var(--c-white);
}

.c-button--on-dark:hover {
  color: var(--c-ink);
  background: var(--c-white);
}

.c-button--small {
  height: 44px;
  padding: 0 18px;
}

/* c-eyebrow：英字の小見出し。左に8pxの朱の正方形（文字は入力したとおりに表示する）
   区切りで折り返したいときは、中の文字を c-eyebrow__text と c-eyebrow__unit で包む */
.c-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .16em;
  color: var(--c-ink-2);
}

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

.c-eyebrow--on-dark {
  color: var(--c-on-dark-2);
}

.c-eyebrow__unit {
  white-space: nowrap;
}

/* スマホ：小さな英字ラベルが読みにくいので 12px → 13px（等幅の書体・字間・配置はそのまま） */
@media (max-width: 767.98px) {
  .c-eyebrow {
    font-size: 13px;
  }
}

.c-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: var(--head-gap);
}

/* 見出しの上の余白は 0。英字の小見出し（c-eyebrow）の直後のときだけ 14px あける。
   小見出しの無い見出しは、セクションの上余白（120px・SP 72px）より下がらない */
.c-section-head__title {
  margin-top: 0;
}

.c-eyebrow + .c-section-head__title {
  margin-top: 14px;
}

.c-section-head__link {
  flex: none;
  display: inline-block;
  padding: 8px 0 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  border-bottom: 1.5px solid var(--c-ink);
  transition: color .2s, border-color .2s;
}

.c-section-head__link:hover {
  color: var(--c-accent-text);
  border-color: var(--c-accent-text);
}

@media (max-width: 767.98px) {
  .c-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* c-card：カードの外枠。枠線も影もなく、面の色（--card-bg。白い地の上は紙色、紙色の地の上は白）と余白でまとまりを示す。
   リンクのカード（a.c-card）は、hover で題名に下線が付く（各カードの __title の規則）。動かない・浮かない */
.c-card {
  --tag-bg: var(--card-alt);   /* カードの面の上のタグは、面と反対の淡い色（c-tag） */
  display: block;
  color: inherit;
  text-decoration: none;
  background: var(--card-bg);
  border-radius: var(--radius-m);
  overflow: hidden;
}

.c-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--c-ink-2);
  white-space: nowrap;
  background: var(--tag-bg, var(--card-bg));
  border: 1px solid transparent;
  border-radius: var(--radius-s);
}

.c-tag--accent {
  color: var(--c-accent-text);
  background: var(--c-accent-soft);
}

/* スマホ：12px → 13px */
@media (max-width: 767.98px) {
  .c-tag {
    font-size: 13px;
  }
}

/* 強調の印（「推奨」「毎月10社限定」）。枠線は付けず、白い面に太字の朱の文字（--c-accent-text。白の上で 4.5:1 以上）で見せる。
   面が白なので、紙色・淡い朱・墨の面（推奨プランのカード）のどの上に置いても読める。名前の outline は、枠線ではなく、強調の印の種類を表す */
.c-tag--outline-accent {
  font-weight: 700;
  color: var(--c-accent-text);
  background: var(--c-white);
}

.c-lattice {
  display: block;
  flex: none;
  width: 120px;
  height: auto;
  aspect-ratio: 1 / 1;
  color: var(--c-ink);
}

.c-play {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 1em;
  height: 1em;
  margin: auto;
  font-size: 56px;
  background: var(--c-white);
  border-radius: 50%;
}

.c-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: -.15em 0 0 -.1em;
  border-style: solid;
  border-width: .15em 0 .15em .26em;
  border-color: transparent transparent transparent var(--c-ink);
}

/* c-tile：写真の代わりの格子柄のタイル（事例・ブログの画像、事業カードの図の仮表示）。文字（ラベルと題名）は省いて、格子だけにもできる
   幅に合わせて文字と格子が縮むよう、コンテナクエリの単位（cqw）で大きさを決める。
   比率は --16x9 / --blog で決めるか、c-case-card__media などの枠の中で --fill にして枠の比率に合わせる。
   色は --ink / --paper / --soft の3種類。同じ色が並びの中で隣り合わないように回す。
   面を持つカード（c-card・c-post-card--featured）の中では --ink と --soft の2色だけを交互に使う（--paper は、カードの面とも、その外の地とも
   同じ紙色・白になって輪郭が消える）。--paper は、面を持たないカード（c-post-card）や、白い地の上に単独で置くときだけ使う（紙色の地の上では使わない）
   題名（c-tile__title）が10字を超えるとき（「ダッシュボードの実画面」など）は、題名に c-tile__title--long を並べて付ける（幅を右下の格子の手前まで広げ、文字を少し小さくする）。
   実画面の枠（16:10）は c-screen */
.c-tile {
  position: relative;
  display: block;
  overflow: hidden;
  container-type: inline-size;
  color: var(--c-ink);
  background: var(--c-paper);
}

.c-tile--16x9 {
  aspect-ratio: 16 / 9;
}

.c-tile--blog {
  aspect-ratio: 1.91 / 1;
}

/* 親の枠いっぱいに広げる（枠の比率に合わせたいとき） */
.c-tile--fill {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  aspect-ratio: auto;
}

.c-tile--ink {
  color: var(--c-white);
  background: var(--c-ink);
}

.c-tile--paper {
  color: var(--c-ink);
  background: var(--c-paper);
}

.c-tile--soft {
  color: var(--c-ink);
  background: var(--c-accent-soft);
}

.c-tile__inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 24px;
  padding: 6.4cqw 6.8cqw;
}

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

.c-tile--ink .c-tile__label {
  color: var(--c-on-dark-2);
}

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

/* 和文が長いときは、右下の格子（再生ボタンつきは中央のボタン）を避ける幅で折り返す */
.c-tile__title {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  max-width: 60%;
  max-width: 54cqw;
  overflow: hidden;
  word-break: keep-all;   /* 日本語を途中で折り返さない（スペースの所で折り返す。入りきらない長い語だけ、下の overflow-wrap で折る） */
  font-family: var(--ff-head);
  font-size: 28px;
  font-size: clamp(14px, 7.8cqw, 28px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;   /* 極端に長い文字でもタイルの外にはみ出さない（3行まで） */
}

.c-tile--video .c-tile__title {
  max-width: 36%;
  max-width: 35cqw;
}

/* 題名が10字を超えるとき（「ダッシュボードの実画面」など）は、題名に c-tile__title--long を並べて付ける。
   共通の題名は幅 54cqw・文字 7.8cqw で、2〜6字の題名向け。10字を超える題名は、スマホで語のまとまり（u-nowrap）が幅に収まらず、枠の外に切れる。
   そこで、幅を右下の格子（幅 33cqw）の手前までに広げ、文字を少し小さくして、語のまとまりが1行に収まるようにする（折り返すときは行の長さをそろえる）。
   cqw が効かない端末（iOS 15 以前の Safari）では、先に書いた値（320px の枠でも「ダッシュボードの」が入る大きさ）のまま */
.c-tile__title--long {
  max-width: 72%;
  max-width: 60cqw;
  font-size: 18px;
  font-size: clamp(14px, 6.4cqw, 28px);
  text-wrap: balance;
}

.c-tile__lattice {
  position: absolute;
  right: -12px;
  bottom: -12px;
  right: -4cqw;
  bottom: -4cqw;
  width: 120px;
  width: 33cqw;
  color: var(--c-ink);
}

.c-tile--ink .c-tile__lattice {
  color: var(--c-on-dark);
}

.c-tile--video .c-play {
  font-size: 56px;
  font-size: clamp(36px, 15cqw, 56px);
}

/* 幅の狭いタイル（SPのブログ一覧など）はラベルを省き、文字を下に寄せる */
@container (max-width: 180px) {
  .c-tile__label {
    display: none;
  }

  .c-tile__inner {
    justify-content: flex-end;
  }

  .c-tile__title {
    max-width: 68cqw;
    font-size: 12px;
  }

  .c-tile--video .c-tile__title {
    max-width: 68cqw;
  }

  .c-tile__lattice {
    right: -3cqw;
    bottom: -3cqw;
    width: 24cqw;
  }
}

/* c-screen：実画面の枠（16:10）。実画面（ダッシュボード・月次レポートなど）が届くまでは、中に格子柄のタイル（c-tile--fill）を置く。
   実画面が届いたら、タイルを <img>（alt に画面の内容）に替える（枠いっぱいに広げて、はみ出す所は切り抜く）。影・枠線は付けない。
   ヒーローの右側に置くときは、c-hero__visual と並べて付ける（<div class="c-hero__visual c-hero__visual--start c-screen">）。
   中のタイルの題名が10字を超えるときは、題名に c-tile__title--long を並べて付ける（c-tile の説明）
   --full   見出しの下に横いっぱいに置く。横長の枠をそのまま 16:10 にすると背が高くなりすぎる（1440px で 710px）ので、タブレット以上は 2:1、PC（1100px 以上）は 12:5
            （SP は枠の幅が 335px 前後なので 16:10 のまま）
   --side   PC で2カラムの片側に置く（もう片側に説明カードなどを並べる）。タブレット（768〜1099px）だけ 2:1 にする（横いっぱいで 16:10 だと、1024px で 600px になる）。
            SP と PC は 16:10 のまま（右の高さに合わせて縦に伸ばすと、届く横長の画像の半分以上が切り抜きで見えなくなる） */
.c-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-m);
}

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

@media (min-width: 768px) {
  .c-screen--full {
    aspect-ratio: 2 / 1;
  }
}

@media (min-width: 1100px) {
  .c-screen--full {
    aspect-ratio: 12 / 5;
  }
}

@media (min-width: 768px) and (max-width: 1099.98px) {
  .c-screen--side {
    aspect-ratio: 2 / 1;
  }
}

/* c-photo-frame：写真の枠。比率を決め、中の <img> を枠いっぱいに広げて切り抜く（c-screen と同じ考え方）。
   届いた画像の比率が枠と違っても、枠の大きさは変わらず、はみ出す所が切り抜かれる。影・枠線は付けない
   比率は変数 --photo-ratio（既定 3 / 2）か、修飾子 --16x9 / --2x1 で決める。画面の幅で比率を変えたいときは、
   ページ側のクラスを並べて付け、その中で --photo-ratio を決め直す（aspect-ratio は上書きしない）。
   切り抜いたとき残す位置は変数 --photo-pos（既定 50% 50%。人の顔が切れるときは、ページ側で 50% 15% のように決める）。
   隣の列の高さまで縦に伸ばしたいときは、ページ側のクラスで、幅 100%・align-self: stretch・--photo-ratio: auto（または最小の高さ）を決める
   （比率つきの枠を、幅を決めずに縦に伸ばすと、幅が高さから決まって列からはみ出す）。
   <img> は枠の中に重ねて置く（position: absolute）ので、写真の大きさは枠の高さに影響しない。
   写真の上に文字は載せない（透かしのある写真も、そのまま使う）。画像が届くまでの地は、面の色（--card-bg。白い地の上は紙色、紙色の地の上は白）。
   parts.css を読み込まないページ（トップ・動画制作・AI検索支援・AI Search Dock）でも使えるよう、parts.css ではなくここに置く */
.c-photo-frame {
  position: relative;
  aspect-ratio: var(--photo-ratio, 3 / 2);
  overflow: hidden;
  background: var(--card-bg);
  border-radius: var(--radius-m);
}

.c-photo-frame > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-pos, 50% 50%);
}

.c-photo-frame--16x9 {
  --photo-ratio: 16 / 9;
}

.c-photo-frame--2x1 {
  --photo-ratio: 2 / 1;
}

/* c-stats：実績の数字。項目数は可変（3〜5個）
   PC・タブレットの大きさ（実測の計算値）:
     1440px … 数字 56px / 太さ700、単位 22.4px（数字の0.4倍）/ 700、ラベル 18px / 500
   SP（767.98px以下）は、「500本 / 200社」が1マスに1行で収まる大きさ（20〜44px）と、画面幅の 8%（24〜30px）の大きいほう:
      375px … 数字 30px、単位 15px（数字の0.5倍）、ラベル 13px
   色は数字が朱（--c-accent）。単位も朱だが、SP では小さい文字になるので --c-accent-text（小さい朱の文字の色）にする。
   書体は見出し書体（--ff-head）。背景（紙色）と区切り線は c-stats の外・内の指定のまま。
   PC・タブレットは1行に並べ、中身の幅に合わせて余りを各項目に均等に配る（入りきらなければ折り返す）。SPは2列。
   区切り線は各項目の上と左に box-shadow で引き、外側の線は overflow: hidden で隠す。
   そのため :nth-child に頼らず、何個でも・折り返しても区切り線が正しく出る */
.c-stats {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.c-stats__item {
  flex: 1 1 auto;
  padding: 8px 12px;
  text-align: center;
  box-shadow: -1px -1px 0 0 var(--c-line-soft);
}

.c-stats__value {
  font-family: var(--ff-head);
  font-size: 56px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--c-accent);
  white-space: nowrap;
}

.c-stats__unit,
.c-stats__sep {
  font-size: .4em;
}

.c-stats__sep {
  color: var(--c-ink-3);
}

.c-stats__label {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-ink-2);
}

/* タブレット：数字は画面幅に合わせて 34px → 56px、ラベルは 15px */
@media (max-width: 1099.98px) {
  .c-stats__value {
    font-size: clamp(34px, 4.8vw, 56px);
  }

  .c-stats__label {
    font-size: 15px;
  }

  /* タブレットでは単位が 14.7〜20px で、朱 --c-accent（紙色の上で 4.06:1）は小さい文字の基準 4.5:1 に届かない幅がある。
     小さい朱の文字の色 --c-accent-text（5.8:1）にする（PC は単位が 22.4px の大きい文字なので --c-accent のまま） */
  .c-stats__unit {
    color: var(--c-accent-text);
  }
}

/* SP：2列。数字は、「500本 / 200社」が1マス（(画面幅 - 52px) / 2）に1行で収まる大きさ（20〜44px）と、
   画面幅の 8%（24〜30px）の大きいほう。375px では 30px。単位は数字の0.5倍、ラベルは13px */
@media (max-width: 767.98px) {
  .c-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-stats__item {
    padding: 20px 6px;
  }

  /* 奇数個のとき、最後の1つは2列ぶんを使う（区切り線は :nth-child に頼らず引いている） */
  .c-stats__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .c-stats__value {
    font-size: max(clamp(20px, calc((100vw - 52px) / 12.4), 44px), clamp(24px, 8vw, 30px));
  }

  /* 単位は数字の0.5倍（375px で 15px）。320px前後でも 12px を割らないよう下限を付ける */
  .c-stats__unit,
  .c-stats__sep {
    font-size: max(.5em, 12px);
  }

  /* SP では単位が小さい文字（15px 以下）になる。朱 --c-accent は紙色の上で 4.06:1 なので、
     小さい朱の文字の色 --c-accent-text（5.8:1）にする（PC・タブレットは大きい文字なので --c-accent のまま） */
  .c-stats__unit {
    color: var(--c-accent-text);
  }

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

/* 320px前後の端末では、ラベルが1文字だけ折り返さないよう少し小さくする */
@media (max-width: 359.98px) {
  .c-stats__label {
    font-size: 12px;
  }
}

/* c-steps：横一列の流れ。項目数は可変（3〜5個）。各項目の上に細い罫線を引き、その下に、本文と同じ書体の数字と文言を置く
   番号は CSS カウンタで振る（HTML には書かない）。丸や矢印は使わず、罫線と数字の順番で流れを示す
   並び方
     タブレット以上  項目を横に並べる（各項目は「罫線 → 数字 → 文言」の縦積み。5個以上のタブレットは文字を13〜15pxにする）
     SP             縦に並べる（左に数字、右に文言。項目の間は罫線で区切る）
   担当ラベル（弊社・御社）  各ステップの最後に <span class="c-steps__who">（小さな文字。ピル型にしない）。御社のステップは li に c-steps__item--client（数字とラベルが朱の文字）
   小ラベル・補足            文言（c-steps__text）の中に、<span class="c-steps__label">（朱の小さな等幅。例「DAY 0」）→ 手順名 →
                            <span class="c-steps__desc">（小さな補足。例「所要5分」）の順に置く。どちらも省ける
   図の下の注記              <ol> の直後に <p class="c-steps__note"> */
.c-steps {
  --steps-gap: 24px;   /* 項目と項目の間 */
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  column-gap: var(--steps-gap);
  counter-reset: c-steps;
}

/* 罫線 → 数字 → 文言 → 担当ラベル の縦積み */
.c-steps__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "num"
    "text"
    "who";
  justify-items: start;
  align-content: start;   /* 隣の項目に合わせて項目が伸びても、中の行は伸ばさない（文言が下へずれないように） */
  min-width: 0;
  padding-top: 14px;
  border-top: 1px solid var(--c-ink);
  counter-increment: c-steps;
}

.c-steps__num {
  grid-area: num;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-ink-2);
}

.c-steps__num::before {
  content: counter(c-steps);
}

.c-steps__text {
  grid-area: text;
  min-width: 0;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* 担当のラベル（「弊社」「御社」）。文言のすぐ下に置く小さな文字 */
.c-steps__who {
  grid-area: who;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--c-ink-2);
}

/* 文言の中の小ラベル（「DAY 0」など）と補足（「所要5分」など）。どちらも独立した行（display: block）。
   手順名は、この2つの間に、ふつうの文字で置く（span で包まなくてよい） */
.c-steps__label {
  display: block;
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .12em;
  color: var(--c-accent-text);
}

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

/* 御社のステップだけ、数字とラベルを朱の文字にする（小さい文字なので --c-accent-text） */
.c-steps__item--client .c-steps__num,
.c-steps__item--client .c-steps__who {
  color: var(--c-accent-text);
}

/* 図の下の注記（例「御社の作業は Step 2・4 のみ」）。<ol> の外、すぐ後ろに置く */
.c-steps__note {
  margin-top: 28px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-ink-2);
}

/* タブレットで5個以上のとき：列が細い（768px で約120px）ので、文字を画面幅に合わせて 13px → 15px にして、
   「ヒアリングシート」のような語を途中で折り返さずに収める（:nth-last-child(n + 5) で個数を数える） */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .c-steps__item:first-child:nth-last-child(n + 5) .c-steps__text,
  .c-steps__item:first-child:nth-last-child(n + 5) ~ .c-steps__item .c-steps__text {
    font-size: clamp(13px, 1.7vw, 15px);
  }
}

@media (min-width: 1100px) {
  .c-steps {
    --steps-gap: 40px;
  }
}

@media (max-width: 767.98px) {
  .c-steps {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
  }

  /* 左に数字、右に文言。数字と文言の1行目の文字の下端（ベースライン）をそろえる */
  .c-steps__item {
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas:
      "num text"
      ". who";
    align-items: baseline;
    column-gap: 8px;
    padding-block: 14px;
  }

  .c-steps__text {
    margin-top: 0;
  }

  .c-steps__who,
  .c-steps__label {
    font-size: 13px;
  }
}

/* 強調する1文。囲みも線も地色も付けず、太字の1文として本文の流れに置く */
.c-callout {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  text-wrap: balance;
}

@media (max-width: 767.98px) {
  .c-callout {
    font-size: 16px;
  }
}

/* c-cta-band：フッター直前の共通CTA
   見出しの文言・ボタンの数・説明の有無はページごとに変えてよい（中央揃えで折り返す）。
   中身の間隔は「その要素自身の上余白」で決めているので、説明が無くても、ボタンが1つでも、
   条件の行（__points）や見出しが無くても、余白が余らず崩れない
   --light  淡色版（紙色の地・墨の文字）。主ボタンは朱の塗り（c-button--primary）、副ボタンは墨の線（c-button--outline）
            既定（墨の地）の副ボタンは c-button--on-dark。動画制作の帯のように、主ボタンが無料AI検索診断でない帯で使う */
.c-cta-band {
  position: relative;
  padding-block: 96px;
  overflow: hidden;
  color: var(--c-on-dark);
  text-align: center;
  background: var(--c-dark);
}

/* 格子の飾り：帯の左上と右下の角に、はみ出させて置く（文字より後ろ）。
   1100px未満では、見える部分が帯の上下の余白（タブレット96px・SP 64px）に収まる位置に置き、
   見出し・条件の行・ボタンに重ならないようにする */
.c-cta-band__lattice {
  position: absolute;
  width: 200px;
  color: var(--c-white);
  opacity: .25;
  pointer-events: none;
}

.c-cta-band__lattice--tl {
  top: -56px;
  left: -56px;
}

.c-cta-band__lattice--br {
  right: -56px;
  bottom: -56px;
}

.c-cta-band__inner {
  position: relative;
  z-index: 1;
}

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

/* 見出しの大きさは H2（--fs-h2）を上限に、狭い画面では画面幅に合わせて少し縮める */
.c-cta-band__title {
  font-size: clamp(22px, min(var(--fs-h2), 6.9vw), 36px);
  color: var(--c-white);
}

.c-cta-band__text {
  max-width: 40em;
  margin: 16px auto 0;
  color: var(--c-on-dark-2);
  text-wrap: balance;
}

.c-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
}

.c-cta-band__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 28px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-on-dark-2);
}

/* 申込みの条件（毎月10社限定・2営業日以内にご連絡・営業電話なし）。印は付けず、項目の間を「・」でつなぎ、1行の文として読ませる。
   「・」は前の項目の末尾に付けるので、折り返しても行頭に来ない。項目の中では折り返さない */
.c-cta-band__points li {
  white-space: nowrap;
}

.c-cta-band__points li:not(:last-child)::after {
  content: "・";
  content: "・" / "";
}

/* 淡色版：紙色の地・墨の文字 */
.c-cta-band--light {
  color: var(--c-ink);
  background: var(--c-paper);
}

.c-cta-band--light .c-cta-band__title {
  color: var(--c-ink);
}

.c-cta-band--light .c-cta-band__text,
.c-cta-band--light .c-cta-band__points {
  color: var(--c-ink-2);
}

@media (max-width: 1099.98px) {
  .c-cta-band__lattice--tl {
    top: -104px;
  }

  .c-cta-band__lattice--br {
    bottom: -104px;
  }
}

@media (max-width: 767.98px) {
  .c-cta-band {
    padding-block: 64px;
  }

  .c-cta-band__lattice {
    width: 150px;
  }

  .c-cta-band__lattice--tl {
    top: -86px;
  }

  .c-cta-band__lattice--br {
    bottom: -86px;
  }

  .c-cta-band__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 28px;
  }

  /* 条件の行はスマホで 13px → 14px */
  .c-cta-band__points {
    font-size: 14px;
  }
}

/* c-card-grid：カードの一覧。項目（c-card-grid__item）は何個でもよい
   列数       修飾子 --cols-2 / --cols-3 / --cols-4 / --cols-5（--cols-4 は 1100px未満で2列、--cols-5 は 1100px未満で3列）
              または CSS 変数（ページ側の style や pages/*.css で決める。修飾子より優先される）
                --card-grid-cols      1100px以上の列数
                --card-grid-cols-tab  768〜1099px の列数（省略すると --card-grid-cols と同じ）
                例: <ul class="c-card-grid" style="--card-grid-cols: 5; --card-grid-cols-tab: 3">
   SP         どの列数でも 768px 未満は1列に縦積み
   --from-pc  列に分けるのを 1100px 以上にする（1100px 未満は1列）
   項目の修飾子 c-card-grid__item--full-tab  タブレット（768〜1099px）だけ、その項目を1行ぶん（横いっぱい）にする。
              --card-grid-cols-tab: 2 と組み合わせると、タブレットで「2枚 + 最後の1枚が横いっぱい」になる
   --scroll   900px 未満は横スクロール（SPは幅78vw、768〜899pxは幅360pxのカード）。900px以上は列数どおり
   --list     900px 未満は1列のリスト。900px以上は列数どおり（c-post-card--row-narrow と組み合わせる）
   隙間は24px（SPは16px）にそろえる。違う値が必要なときは --card-grid-gap を上書きする */
.c-card-grid {
  --card-grid-gap: 24px;
  /* 入れ子の一覧に、外側の列数が引き継がれないよう、この要素自身で既定値を持つ */
  --card-grid-cols: 1;
  --card-grid-cols-tab: var(--card-grid-cols);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--card-grid-gap);
}

.c-card-grid__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

@media (max-width: 767.98px) {
  .c-card-grid {
    --card-grid-gap: 16px;
  }
}

/* 列数の修飾子は、変数を決めるだけ。実際の列の組み方は下の2つの min-width でまとめて決める */
.c-card-grid--cols-2 {
  --card-grid-cols: 2;
}

.c-card-grid--cols-3 {
  --card-grid-cols: 3;
}

.c-card-grid--cols-4 {
  --card-grid-cols: 4;
  --card-grid-cols-tab: 2;
}

.c-card-grid--cols-5 {
  --card-grid-cols: 5;
  --card-grid-cols-tab: 3;
}

/* from-pc は、cols-N のあとに書いて、タブレットの列数を1にする */
.c-card-grid--from-pc {
  --card-grid-cols-tab: 1;
}

@media (min-width: 768px) {
  .c-card-grid {
    grid-template-columns: repeat(var(--card-grid-cols-tab), minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .c-card-grid {
    grid-template-columns: repeat(var(--card-grid-cols), minmax(0, 1fr));
  }
}

/* タブレットだけ、その項目を1行ぶん（横いっぱい）にする。説明カードを直接の子にしたときは、カード側（c-feature-card--full-tab）でもよい */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .c-card-grid__item--full-tab,
  .c-card-grid > .c-feature-card--full-tab {
    grid-column: 1 / -1;
  }
}

@media (max-width: 899.98px) {
  .c-card-grid--list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* スクロール領域の上下に余白（padding）を足し、フォーカス枠が切れないようにする */
  .c-card-grid--scroll {
    display: flex;
    gap: 16px;
    margin: -8px calc(max(var(--container-pad), env(safe-area-inset-right, 0px)) * -1) -12px calc(max(var(--container-pad), env(safe-area-inset-left, 0px)) * -1);
    padding: 8px max(var(--container-pad), env(safe-area-inset-right, 0px)) 12px max(var(--container-pad), env(safe-area-inset-left, 0px));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: max(var(--container-pad), env(safe-area-inset-left, 0px));
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .c-card-grid--scroll > .c-card-grid__item {
    flex: 0 0 360px;
    scroll-snap-align: start;
  }
}

@media (max-width: 767.98px) {
  .c-card-grid--scroll > .c-card-grid__item {
    flex-basis: 78vw;
  }
}

/* c-case-card：導入事例のカード（c-card と組み合わせる。リンクにするなら a.c-card.c-case-card）
   メディア枠（16:9）には、実画像の <img>（OGP・ロゴ・写真。object-fit: cover で枠に収める）を入れる。
   画像が無いカード、画像が届く前の仮表示は c-tile（c-tile--fill。格子柄。ラベルは「CASE ／ サービス名」、題名は業種）。
   hover で題名に下線が付く */
.c-case-card {
  display: flex;
  flex-direction: column;
}

.c-case-card__media {
  position: relative;
  flex: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-paper);
}

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

.c-case-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 22px 22px;
}

.c-case-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.c-case-card__title {
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.6;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}

a.c-case-card:hover .c-case-card__title {
  text-decoration-color: currentColor;
}

.c-case-card__results {
  margin-top: auto;
  padding-top: 14px;
}

.c-case-card__line {
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-ink-2);
}

/* c-post-card：ブログ記事のカード（面も枠もなし。a.c-post-card にして全体をリンクにする。hover で題名に下線が付く）
   メディア枠（1.91:1）には、実画像の <img>（object-fit: cover）を入れる。
   画像が無いカード、画像が届く前の仮表示は c-tile（c-tile--fill。格子柄。ラベルは「BLOG ／ カテゴリ」、題名はカテゴリ名）
   --row         常に横並び（左にメディア120px、右に文字）。サイドバーの記事リストなど
   --row-narrow  900px未満（タブレット・SP）だけ横並び。一覧のカードがSPでリスト表示になる
   --row-4x3     --row-narrow に並べて付ける。横並びになる 900px 未満だけ、写真を 4:3 にする（1.91:1 は、幅 120px で高さが 63px しかなく、何の写真か分からないとき）。
                 900px 以上の縦のカードは 1.91:1 のまま
   --lead        一覧の先頭に置く大きな記事のカード。写真は 16:9、題名は 19px（900px 以上は 20px）。親の項目（c-card-grid__item）が 900px 以上で横2列・縦2行ぶんに広がるときは、
                 カードが項目の高さいっぱいに伸び、写真も残りの高さまで伸びる（最小 240px。比率は外れ、写真は枠いっぱいに切り抜く）。トップの「ノウハウ・AI検索データ」 */
.c-post-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.c-post-card__media {
  position: relative;
  aspect-ratio: 1.91 / 1;
  overflow: hidden;
  background: var(--c-paper);
}

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

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

/* スマホ：メタ情報（カテゴリ・日付）12px → 13px */
@media (max-width: 767.98px) {
  .c-post-card__meta {
    font-size: 13px;
  }
}

.c-post-card__title {
  margin-top: 6px;
  font-family: var(--ff-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}

.c-post-card:hover .c-post-card__title {
  text-decoration-color: currentColor;
}

.c-post-card--row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.c-post-card--row .c-post-card__media {
  flex: 0 0 120px;
  width: 120px;
}

.c-post-card--row .c-post-card__body {
  flex: 1;
  min-width: 0;
}

.c-post-card--row .c-post-card__meta {
  margin-top: 0;
}

.c-post-card--row .c-post-card__title {
  font-size: 15px;
}

@media (max-width: 899.98px) {
  .c-post-card--row-narrow {
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }

  .c-post-card--row-narrow .c-post-card__media {
    flex: 0 0 120px;
    width: 120px;
  }

  .c-post-card--row-narrow .c-post-card__body {
    flex: 1;
    min-width: 0;
  }

  .c-post-card--row-narrow .c-post-card__meta {
    margin-top: 0;
  }

  .c-post-card--row-narrow .c-post-card__title {
    font-size: 15px;
  }

  .c-post-card--row-narrow.c-post-card--row-4x3 .c-post-card__media {
    aspect-ratio: 4 / 3;
  }
}

.c-post-card--lead .c-post-card__media {
  aspect-ratio: 16 / 9;
}

.c-post-card--lead .c-post-card__title {
  font-size: 19px;
}

@media (min-width: 900px) {
  .c-post-card--lead {
    display: flex;
    flex-direction: column;
  }

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

  .c-post-card--lead .c-post-card__media > img {
    position: absolute;
    top: 0;
    left: 0;
  }

  .c-post-card--lead .c-post-card__title {
    font-size: 20px;
  }
}

/* c-service-card：事業のカード（c-card と組み合わせる。全体がリンクなので a.c-card.c-service-card）
   どの幅でも縦型：上に画像枠（16:9）、下にラベル・事業名・説明・リンクの文言（「〇〇について」など）。hover で事業名に下線が付く。
   画像枠（c-service-card__media）には、実画像の <img>（alt=""。カード全体がリンクなので飾り扱い）か、
   実画面が届くまでの仮表示 c-tile（c-tile--fill。文字なしで格子だけ。直前に <!-- 差し替え待ち -->）を入れる。
   動画のページへのカードでも、再生ボタン（c-play）は重ねない（サムネイルの文字にボタンが重なるため。カード全体が動画ページへのリンク）。
   一覧は c-card-grid--cols-3（768px以上で3列、767.98px以下は1列）。
   3列が細くなる 768〜1023px（カードの幅 219〜304px）は、余白と文字を少し詰める */
.c-service-card {
  display: flex;
  flex-direction: column;
}

.c-service-card__media {
  position: relative;
  flex: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--card-bg);
}

.c-service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-service-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px 24px 26px;
}

.c-service-card__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-accent-text);
}

.c-service-card__title {
  margin-top: 6px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}

a.c-service-card:hover .c-service-card__title {
  text-decoration-color: currentColor;
}

.c-service-card__text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-ink-2);
  text-wrap: balance;
}

.c-service-card__more {
  margin-top: auto;
  padding-top: 18px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

/* 3列が細くなる幅（768〜1023px）：余白と文字を少し詰める */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .c-service-card__body {
    padding: 18px 16px 20px;
  }

  .c-service-card__title {
    font-size: 17px;
  }

  .c-service-card__text {
    font-size: 13px;
    line-height: 1.75;
  }

  .c-service-card__more {
    padding-top: 14px;
    font-size: 13px;
  }
}

/* SP：1列（カードの幅は 280〜727px）。英字のラベルは 12px → 13px */
@media (max-width: 767.98px) {
  .c-service-card__body {
    padding: 20px 20px 22px;
  }

  .c-service-card__label {
    font-size: 13px;
  }
}

/* c-data-list：データの一覧（カードにしない）。1件が「数値・説明（h3）・出典」の横並びで、件の間を細い罫線で区切る。
   数値は墨の太字で、本文より一回り大きい程度（朱の大きな数字にしない）。SP は1件の中を数値・説明・出典の順に縦に積む。
   <ul class="c-data-list" role="list">
     <li class="c-data-list__item"><p class="c-data-list__value">約50%</p><h3 class="c-data-list__lead">…</h3><p class="c-data-list__source">出典：…</p></li>
   </ul>
   --no-source   補足（出典）の列が無い一覧（事例の成果の数字、料金ページの投資回収の目安）。右の列を空けず、説明を右端まで広げる
   --source-below  一覧の幅が狭い所（2カラムの片側。トップの「ググる」から「AIに訊く」へ）用。900px 以上で、出典を3列目から説明の下（2列目）に回して、数値と説明の2列にする
                   （899px 以下は、ふつうの並びのまま）
   __unit        数値の中の単位（「万円」「件で回収」「pt」「倍」「本」）。数値の <p> の中に <span class="c-data-list__unit"> で入れる
   実績の数字の帯は c-stats */
.c-data-list {
  border-bottom: 1px solid var(--c-line-soft);
}

.c-data-list__item {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 200px;
  align-items: baseline;
  column-gap: 24px;
  padding-block: 24px;
  border-top: 1px solid var(--c-line-soft);
}

.c-data-list__value {
  font-family: var(--ff-head);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--c-ink);
}

.c-data-list__lead {
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;
}

.c-data-list__source {
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-ink-3);
}

/* 数値（24px、SP は 22px）の単位。数字より小さくする。.6em なら 14.4px（SP 13.2px）で、12px を下回らない */
.c-data-list__unit {
  font-size: .6em;
}

@media (min-width: 768px) {
  .c-data-list--no-source .c-data-list__item {
    grid-template-columns: 112px minmax(0, 1fr);
  }
}

@media (min-width: 1100px) {
  .c-data-list__item {
    grid-template-columns: 136px minmax(0, 1fr) 240px;
    column-gap: 32px;
  }

  .c-data-list--no-source .c-data-list__item {
    grid-template-columns: 136px minmax(0, 1fr);
  }
}

@media (min-width: 900px) {
  .c-data-list--source-below .c-data-list__item {
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 4px;
    padding-block: 32px;
  }

  .c-data-list--source-below .c-data-list__source {
    grid-column: 2;
  }
}

@media (max-width: 767.98px) {
  .c-data-list__item {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
    padding-block: 20px;
  }

  .c-data-list__value {
    font-size: 22px;
  }

  /* 出典の表記：スマホで 12px → 13px */
  .c-data-list__source {
    font-size: 13px;
  }
}

/* c-feature-card：説明カード（c-card と組み合わせる）
   ラベル（英字）・手順の番号（罫線の下の数字。丸にしない）・アイコン・見出し・説明・下端のリンクを持つ。どの要素も省ける（省いても余白が余らない）。
   並べるときは c-card-grid（列数は修飾子 --cols-N か、変数 --card-grid-cols / --card-grid-cols-tab）。
   修飾子
     --center     中央揃え
     --middle     中身を縦の中央にそろえる（隣のカードに合わせてカードが高くなっても、文が上に寄らない）
     --accent     墨の面・白い文字で目立たせる（1枚だけ強調したいとき。枠線は使わない）
     --full-tab   タブレット（768〜1099px）だけ、そのカードを1行ぶん（横いっぱい）にする。
                  c-card-grid__item（li）で包んでいるときは、li に c-card-grid__item--full-tab を付ける
     --row-tab    タブレットだけ、写真（__media）を左・文字を右の横並びにする。--full-tab で横いっぱいになるカードに付ける（写真つきのカード専用。付けないと、横いっぱいの写真が大きくなりすぎるので、写真は 21:9 の横長に切る）
   部品
     __media      カードの上に置く写真の枠（<div> の中に <img>）。比率は 16:9（--3x2 で 3:2）。カードの文字の余白の内側に置き、左右が文字の端とそろう。
                  img は枠いっぱいに広げて切り抜く（object-fit: cover）。意味のある alt を付ける
     __num        手順の番号（ラベルの代わりに使う。上に墨の細い罫線、その下に本文の書体の数字。c-steps と同じ考え方。装飾なので aria-hidden="true"）
     __icon       アイコン。<img>（alt=""）か、<span> に入れたインライン SVG。幅は変数 --feature-card-icon（既定 64px）
     __more       カード下端のリンク（「AI Search Dockについて」「料金ページへ」）。矢印は付けず、行き先の分かる文言にする */
.c-feature-card {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 30px;
}

/* カードの中の要素は、カードの内側の幅を超えて広がらない（中央揃えのとき、長い語が狭いカードの外へはみ出さないように） */
.c-feature-card > * {
  max-width: 100%;
}

/* 中身の間隔は「前の要素との間」で決める */
.c-feature-card > * + * {
  margin-top: 10px;
}

.c-feature-card--center {
  align-items: center;
  text-align: center;
}

.c-feature-card--middle {
  justify-content: center;
}

/* 墨の面・白い文字。面の色の差で目立たせる（枠線は使わない）。中は見出しと説明だけにする（説明の文字色だけ、墨の面の上の色に替える） */
.c-feature-card--accent {
  color: var(--c-white);
  background: var(--c-ink);
}

.c-feature-card--accent .c-feature-card__text {
  color: var(--c-on-dark-2);
}

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

/* 手順の番号：丸にせず、上に墨の細い罫線を引き、その下に本文の書体の小さな数字を置く（c-steps__num と同じ）。
   カードの内側の幅いっぱいに罫線を引く（中央揃えのカードでも、左右いっぱい） */
.c-feature-card__num {
  display: block;
  flex: none;
  align-self: stretch;
  padding-top: 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--c-ink-2);
  border-top: 1px solid var(--c-ink);
}

/* アイコンは <img> でも、<span> に入れたインライン SVG でもよい。大きさは --feature-card-icon（既定 64px。横長の画像なら 100%） */
.c-feature-card__icon {
  display: block;
  flex: none;
  width: var(--feature-card-icon, 64px);
  max-width: 100%;
  height: auto;
}

.c-feature-card__icon > svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 写真の枠。カードの文字の余白の内側に置くので、写真の左右が文字の端とそろう。角丸は 2px、影・枠線は付けない。
   写真が届くまでの面の色は、カードの面と反対の色（--card-alt）。比率は 16:9、--3x2 で 3:2 */
.c-feature-card__media {
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--card-alt);
  border-radius: var(--radius-s);
}

.c-feature-card__media--3x2 {
  aspect-ratio: 3 / 2;
}

.c-feature-card__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-feature-card__media + * {
  margin-top: 18px;
}

.c-feature-card__icon + * {
  margin-top: 16px;
}

.c-feature-card__num + * {
  margin-top: 6px;
}

.c-feature-card__label + .c-feature-card__title,
.c-feature-card__label + .c-feature-card__text {
  margin-top: 6px;
}

.c-feature-card__label + .c-feature-card__icon {
  margin-top: 14px;
}

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

/* カードの下端にそろえるリンク。カードが縦に伸びたときは margin-top: auto で下端にそろい、隣のカードにもリンクがあれば高さがそろう。
   左揃えのカードでは左、中央揃えのカードでは中央に置く */
.c-feature-card .c-feature-card__more {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color .2s;
}

.c-feature-card--center .c-feature-card__more {
  align-self: center;
}

.c-feature-card .c-feature-card__more:hover {
  color: var(--c-accent-text);
}

@media (max-width: 1099.98px) {
  .c-feature-card {
    padding: 24px 20px 26px;
  }
}

@media (max-width: 767.98px) {
  .c-feature-card {
    padding: 22px 22px 24px;
  }
}

/* タブレット：横いっぱいになる写真つきのカード。--row-tab を付けたカードは、写真を左（2fr）・文字を右（3fr）に並べ、
   文字は上から、下端のリンクは写真の下端にそろえる。--row-tab を付けないカードは、写真が横いっぱいに広がって大きくなりすぎるので、21:9 の横長に切る */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .c-card-grid__item--full-tab > .c-feature-card:not(.c-feature-card--row-tab) > .c-feature-card__media,
  .c-feature-card--full-tab:not(.c-feature-card--row-tab) > .c-feature-card__media {
    aspect-ratio: 21 / 9;
  }

  .c-feature-card--row-tab {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 28px;
  }

  .c-feature-card--row-tab > .c-feature-card__media {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: start;
  }

  .c-feature-card--row-tab > :not(.c-feature-card__media) {
    grid-column: 2;
  }

  .c-feature-card--row-tab > .c-feature-card__media + * {
    margin-top: 0;
  }

  .c-feature-card--row-tab .c-feature-card__more {
    justify-self: start;
  }
}

/* c-hero：ヒーローの骨組み（文字側とビジュアル側の2カラム）
   DOMの順は SP の並び（eyebrow → 見出し → リード → ビジュアル → ボタン → 補足）。
   ビジュアル（c-hero__visual）を置くときは、c-hero に c-hero--has-visual を付ける。
   1100px以上で、文字55%：ビジュアル45%の2カラムに組み替わる（:has 疑似クラスは古い Safari・Firefox で効かないため、クラスで切り替える）。
   使う要素は選べる（どれが無くても詰まる）。
   --dark で墨の地・白文字（AI検索支援のページなど）。既定は白の地（方眼などの飾りは付けない）。
   見出しの大きさや、ビジュアルの中身・配置はページ側（p-*-hero）で決める
   ビジュアルの枠（c-hero__visual の中に置く）
     c-hero__media   16:9 の動画サムネイル（<img>）。再生ボタン（c-play）を左下に重ねられる（サムネイルの真ん中には、題名の大きな文字が入るので、
                     ボタンは文字に重ならない左下に置く。大きさは 56px、タブレット未満は 48px、480px 未満は 40px）。<a> にすると全体がリンクになる
                     （このときは aria-label="動画名" を付ける）。枠線・影は付けない（角丸 2px だけ。写真と地の色の差で区切る）。
                     リンクのときの hover は、再生ボタンが少し大きくなる */
.c-hero {
  position: relative;
  padding-block: 96px 112px;
  overflow: hidden;
  color: var(--c-ink);
  background: var(--c-white);
}

.c-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "eyebrow"
    "title"
    "lead"
    "visual"
    "actions"
    "note";
}

.c-hero__eyebrow {
  grid-area: eyebrow;
}

.c-hero__title {
  grid-area: title;
  margin-top: 22px;
}

.c-hero__lead {
  grid-area: lead;
  max-width: 34em;
  margin-top: 28px;
  font-size: 17px;
  line-height: 1.9;
  color: var(--c-ink-2);
}

.c-hero__visual {
  grid-area: visual;
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 44px auto 0;
}

/* 縦に積む幅（SP・タブレット）で、ビジュアルを文字の左端にそろえる。付けなければ中央に置く。PC（1100px以上）は右の列いっぱいなので関係しない */
.c-hero__visual--start {
  margin-left: 0;
}

.c-hero__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  margin-top: 40px;
}

.c-hero__note {
  grid-area: note;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 24px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-ink-3);
}

.c-hero--dark {
  color: var(--c-on-dark);
  background: var(--c-dark);
}

.c-hero--dark .c-hero__eyebrow,
.c-hero--dark .c-hero__lead,
.c-hero--dark .c-hero__note {
  color: var(--c-on-dark-2);
}

.c-hero--dark .c-hero__title {
  color: var(--c-white);
}

/* 動画サムネイル：16:9。枠線・影は付けない（角丸 2px だけ）。画像（<img>）は枠いっぱいに広げて切り抜く */
.c-hero__media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  color: var(--c-ink);
  background: var(--c-paper);
  border-radius: var(--radius-m);
}

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

/* 再生ボタンは、サムネイルの真ん中にある題名の文字（2行。下の行は、枠の左から 19%、上から 49〜69% に入る）に重ならないよう、左下に置く（c-play の既定は中央）。
   枠が狭いほど文字の左端にボタンの右端が近づくので、幅の狭い枠ほど小さくする（枠の幅 280px でも、ボタンの右端は 18% で、文字の左端 19% の手前に収まる） */
.c-hero__media > .c-play {
  top: auto;
  right: auto;
  bottom: 16px;
  left: 16px;
  margin: 0;
  font-size: 56px;
  transition: transform .2s;
}

a.c-hero__media:hover > .c-play {
  transform: scale(1.08);
}

@media (min-width: 1100px) {
  .c-hero--has-visual .c-hero__inner {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    grid-template-rows: 1fr auto auto auto auto auto 1fr;
    grid-template-areas:
      ". visual"
      "eyebrow visual"
      "title visual"
      "lead visual"
      "actions visual"
      "note visual"
      ". visual";
    column-gap: 56px;
  }

  .c-hero__visual {
    align-self: center;
    max-width: none;
    margin: 0;
  }

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

@media (max-width: 1099.98px) {
  .c-hero {
    padding-block: 64px 88px;
  }

  /* 狭い幅では、語のまとまりを保ったまま行の長さをそろえ、途中に短い行ができないようにする */
  .c-hero__lead {
    text-wrap: balance;
  }
}

@media (max-width: 767.98px) {
  .c-hero {
    padding-block: 40px 64px;
  }

  .c-hero__title {
    margin-top: 18px;
  }

  .c-hero__lead {
    margin-top: 20px;
    font-size: 16px;
  }

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

  .c-hero__media > .c-play {
    bottom: 14px;
    left: 14px;
    font-size: 48px;
  }

  .c-hero__actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: 32px;
  }

  .c-hero__note {
    margin-top: 20px;
    font-size: 14px;
  }
}

/* 幅の狭いスマホ（枠の幅が 440px 未満）：再生ボタンをさらに小さくして、文字の左端（19%）の手前に収める */
@media (max-width: 479.98px) {
  .c-hero__media > .c-play {
    bottom: 10px;
    left: 10px;
    font-size: 40px;
  }
}

/* c-faq：よくある質問。<details> と <summary> で開閉する（JSなし。Enter・Space でも開閉）
   1件ずつ枠で囲まず、上下の細い罫線で区切った一覧にする。右端の＋（開くと−）は朱の細い線
   1列が既定。c-faq--cols-2 で 768px 以上は2列（SPは1列）。最初から開く項目は <details open> */
.c-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;   /* 2列のとき、1つ開いても隣の項目が伸びないように */
}

.c-faq__item {
  border-bottom: 1px solid var(--c-line-soft);
}

.c-faq__item:first-child {
  border-top: 1px solid var(--c-line-soft);
}

/* 質問の行。Safari で summary の display: flex が効かないことがあるので、block + 絶対配置の＋にしている */
.c-faq__question {
  position: relative;
  display: block;
  padding: 20px 40px 20px 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  text-wrap: balance;   /* 質問が2行になるとき、行の長さをそろえて、最後の行に1〜2文字だけ残らないようにする */
  list-style: none;
  cursor: pointer;
  transition: color .2s;
}

.c-faq__question::-webkit-details-marker {
  display: none;
}

.c-faq__question::marker {
  content: "";
}

/* 右端の＋（開くと−）。朱の細い線2本で描く（縦の線を回して横にすると−になる） */
.c-faq__question::before,
.c-faq__question::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  background: var(--c-accent);
  transition: transform .2s;
}

.c-faq__question::after {
  transform: rotate(90deg);
}

.c-faq__item[open] > .c-faq__question::after {
  transform: rotate(0deg);
}

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

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

.c-faq__answer {
  padding: 0 40px 24px 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-ink-2);
  text-wrap: pretty;   /* 最後の行に1〜2文字だけ残らないようにする（未対応のブラウザでは通常の折り返し） */
}

.c-faq__answer > * + * {
  margin-top: 10px;
}

@media (min-width: 768px) {
  .c-faq__question {
    padding: 24px 48px 24px 0;
    font-size: 16px;
  }

  .c-faq__answer {
    padding: 0 48px 28px 0;
    font-size: 15px;
  }

  .c-faq--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
  }

  .c-faq--cols-2 .c-faq__item:nth-child(2) {
    border-top: 1px solid var(--c-line-soft);
  }
}

/* c-chips：小さなラベルの一覧（角丸 2px の長方形）。<ul class="c-chips"><li class="c-chips__item">…</li></ul>
   枠線は付けず、面の色だけで見せる（c-tag と同じ。地の上は --card-bg＝白い地の上は紙色・紙色の地の上は白、c-card の面の上は --tag-bg）。文字は墨で、どの面の上でも 4.5:1 以上
   --center  中央寄せ（無ければ左寄せ）
   --lg      大きめのチップ（文字は 767px 以下で画面幅に合わせて 12〜15px、768px 以上で 16px、1100px 以上で 17px）
   --grid    1099px 以下は3列の格子（6個なら3列×2行。タブレットは幅 640px までで中央）、1100px 以上は1行（--center と組み合わせて中央に置く）。
             3の倍数のとき、--lg と組み合わせて使う。格子の中では、日本語を途中で折らず、スペースの所だけで折り返す
   チップの中に <a> を入れてもよい（文字色はチップのまま） */
.c-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.c-chips--center {
  justify-content: center;
}

.c-chips__item {
  display: inline-block;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--tag-bg, var(--card-bg));
  border: 1px solid transparent;   /* 枠線は付けない。c-tag と同じく、1px の透明な縁で大きさをそろえる */
  border-radius: var(--radius-s);
}

.c-chips__item a {
  color: inherit;
  text-decoration: none;
}

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

.c-chips--lg .c-chips__item {
  padding: .6em 1.4em;
  font-size: clamp(12px, 3.6vw, 15px);
  line-height: 1.4;
}

@media (min-width: 768px) {
  .c-chips--lg .c-chips__item {
    font-size: 16px;
  }
}

@media (min-width: 1100px) {
  .c-chips--lg .c-chips__item {
    font-size: 17px;
  }
}

/* --grid（1099px 以下だけ格子）。1行目が2行の文字（「AI / Overviews」）でも2行目と同じ高さにそろえ、文字はチップの中央に置く。
   それでも枠より長い語は、はみ出さないよう途中で折る */
@media (max-width: 1099.98px) {
  .c-chips--grid {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .c-chips--grid > .c-chips__item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 768px) and (max-width: 1099.98px) {
  .c-chips--grid {
    gap: 12px;
    max-width: 640px;
    margin-right: auto;
    margin-left: auto;
  }

  .c-chips--grid > .c-chips__item {
    padding: 14px 10px;
  }
}

@media (min-width: 1100px) {
  .c-chips--grid {
    gap: 12px 16px;
  }
}

/* c-filter：絞り込み。ボタン（aria-pressed）を押すと、同じ c-filter の中で data-category が合う項目だけを表示する（assets/js/main.js）
   「すべて」（data-filter="all"）で全件表示。data-category は一覧の項目（c-card-grid__item）に付ける。JS が動かないときは、
   ボタンの帯ごと隠して全件を表示する（JS が c-filter--ready を付けたときだけ帯を出す）
   --center  ボタンの帯と表示件数を中央に寄せる */
.c-filter__bar {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.c-filter--ready .c-filter__bar {
  display: flex;
}

.c-filter--center .c-filter__bar {
  justify-content: center;
}

.c-filter--center .c-filter__status {
  text-align: center;
}

.c-filter__button {
  padding: 8px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-ink-2);
  background: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s;
}

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

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

/* 表示件数（任意）。スクリーンリーダーにも読み上げられる（aria-live） */
.c-filter__status {
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-ink-3);
}

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

/* 絞り込みで隠した項目。項目側に display を指定していても隠れるようにする */
.c-filter [hidden] {
  display: none !important;
}

/* c-video-card：動画カード（c-card と組み合わせる。全体がリンクなので a.c-card.c-video-card）
   16:9 の画像の左下に再生ボタン（c-play）を重ね、下に用途のタグ（c-tag）と動画名（h3）を置く。hover で動画名に下線が付く。
   画像枠（c-video-card__media）には <img>（alt=""）か、画像が無いとき用の c-tile（c-tile--fill）を入れる。
   一覧は c-card-grid。絞り込みと組み合わせるときは、項目（c-card-grid__item）に data-category を付ける */
.c-video-card {
  display: flex;
  flex-direction: column;
}

.c-video-card__media {
  position: relative;
  flex: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  container-type: inline-size;   /* 再生ボタンの大きさを、サムネイルの幅から決めるため */
  background: var(--c-paper);
}

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

.c-video-card__media .c-play {
  font-size: 48px;
}

.c-video-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 20px;
}

/* タグは文字の幅だけ（引き伸ばさない）。動画名（h3）は列の幅いっぱいに広げ、長いと折り返す */
.c-video-card__body > .c-tag {
  align-self: flex-start;
}

.c-video-card__title {
  font-size: 16px;
  line-height: 1.6;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}

a.c-video-card:hover .c-video-card__title {
  text-decoration-color: currentColor;
}

@media (max-width: 767.98px) {
  .c-video-card__media .c-play {
    font-size: 40px;
  }
}

/* 画像のサムネイル（<img> と並ぶ直接の子）の再生ボタン：サムネイルの真ん中には題名の大きな文字が入るので、動画制作のヒーロー（c-hero__media）と同じく、
   文字に重ならない左下に置く。白い円は、白いサムネイル（AIテレアポくん・シェアなど）の上で背景に溶けるので、墨の細い縁（1.5px）を付ける。
   大きさは、サムネイルの幅の 9% − 2px（21〜44px）、左の余白は幅の 1%、下の余白は 3%。
   左下でも、字幕が左端から 11.2% の所に始まるサムネイル（在庫管理の動画）で、ボタンの右端と字幕の隙間が、幅 241px のサムネイルで 3.6px、266px で 5.2px の大きさにしてある
   （25px 以上にすると、いちばん狭い幅 241px のサムネイルで、字幕に重なる。幅 241〜727px の動画制作の8本と、幅 219〜727px の料金の制作例3本を、画面の幅 320〜1920px で確かめた）。
   cqw が効かない iOS 15 以前の Safari では、先に書いた 21px・左 3px・下 6px のまま（幅 241px のサムネイルでも、文字に重ならない）。
   格子柄のタイル（c-tile--video）の中のボタンは、タイルの題名が左にあるので、この規則の対象外（これまでどおり） */
.c-video-card__media > .c-play {
  top: auto;
  right: auto;
  bottom: 6px;
  bottom: 3cqw;
  left: 3px;
  left: 1cqw;
  box-sizing: border-box;
  margin: 0;
  border: 1.5px solid var(--c-ink);
  font-size: 21px;
  font-size: clamp(21px, calc(9cqw - 2px), 44px);
}

/* c-plan-card：料金カード（c-card と組み合わせる）
   プラン名（h3）・条件・価格（大きな朱の文字）を持つ中央揃えのカード。既定では、価格はカードの下にそろう。
   --accent       推奨のプラン。枠線は使わず、墨の面・白い文字で強調する。「推奨」のラベルは、名前（h3）の末尾に付ける（「Pro（推奨）」）
   --price-top    価格を名前のすぐ下に置く形（名前 → 価格 → 初期費用 → 箇条書き。公開中のLPの料金と同じ並び）。
                  横に並べたとき、名前・価格・箇条書きの位置が隣のカードとそろう（下の説明）
   価格 __price に数字と __unit（小さい単位）を入れる。「目的別お見積り」のような文字のときは __price--text を付ける。
   さらに長い文字（「料金はお問い合わせください」）は、__price--text に __price--sm を並べて付ける（18px）
   __features     箇条書き（機能の一覧）。上に1pxの線。カードが縦に伸びても、上にそろう
   __initial      初期費用の行（価格の下の小さな1行）
   __pricebox     価格（__price）と初期費用（__initial）を包む箱（--price-top のときに使う）
   並べるときは c-card-grid（列数は --cols-N か変数）。2〜4個で使う
   --price-top の並びの決まり
     ・名前は、タブレット以上で2行ぶんの高さ（3em）をとり、中身を縦の中央に置く（1行の名前でも、下の位置が隣のカードとそろう）。
       中身が1つの塊（文字だけ、または1つの span）のときに中央にそろう
     ・__pricebox は、タブレット以上で最小の高さ 90px（価格 + 初期費用の高さ）をとる。初期費用が無いカードや、価格が文字のカードでも、
       下の __features の位置が隣のカードとそろう */
.c-plan-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px 28px;
  text-align: center;
}

/* 推奨のプラン：墨の面・白い文字（面の色の差で一目で分かる）。墨の面の上で読めるよう、中の文字の色を替える。
   価格の朱は、濃い地の上の朱の文字色（--c-accent-on-dark）にする */
.c-plan-card--accent {
  color: var(--c-white);
  background: var(--c-ink);
}

.c-plan-card--accent .c-plan-card__condition,
.c-plan-card--accent .c-plan-card__initial,
.c-plan-card--accent .c-plan-card__features {
  color: var(--c-on-dark-2);
}

.c-plan-card--accent .c-plan-card__price {
  color: var(--c-accent-on-dark);
}

.c-plan-card--accent .c-plan-card__features {
  border-top-color: var(--c-line-dark);
}

/* 中央に寄せた要素が、カードの内側の幅を超えて広がらない（長い語が狭いカードの外へはみ出して切れないように） */
.c-plan-card > * {
  max-width: 100%;
}

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

.c-plan-card__price {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--ff-head);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--c-accent);
}

.c-plan-card__unit {
  font-size: .5em;
}

/* 価格が文字のとき。4列（1100px）や3列のタブレット（768px）でも1行に収まる大きさ。折り返すときは行の長さをそろえる */
.c-plan-card__price--text {
  font-size: 24px;
  text-wrap: balance;
}

/* 小さい価格（__price--text に並べて付ける）。「料金はお問い合わせください」のように長い文字でも、
   4列のカード（内側 193px〜）で「お問い合わせください」が1行に収まる大きさ */
.c-plan-card__price--sm {
  font-size: 18px;
  line-height: 1.5;
  color: var(--c-accent-text);   /* 18px は大きい文字（太字で約19px以上）に入らない。朱 --c-accent は紙色の面の上で 4.06:1 なので、小さい朱の文字の色にする */
}

/* 価格を名前のすぐ下に置く形（--price-top）。価格は、カードの下にそろえず（margin-top: auto をやめ）、名前の下に続ける */
.c-plan-card--price-top .c-plan-card__price {
  margin-top: 0;
}

/* 価格と初期費用を包む箱。幅いっぱい（長い文字の価格が、カードの内側の幅で折り返す） */
.c-plan-card__pricebox {
  width: 100%;
}

/* 初期費用（価格の下の小さな1行） */
.c-plan-card__initial {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-ink-2);
}

/* 箇条書き（機能の一覧）。上に1pxの線を引き、カードが縦に伸びても、上にそろえる。
   li は中央揃えのまま（カードの text-align を引き継ぐ） */
.c-plan-card__features {
  display: grid;
  gap: 6px;
  width: 100%;
  margin-top: 16px;
  padding-top: 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-ink-2);
  border-top: 1px solid var(--c-line-soft);
}

/* タブレット以上：横に並んだカードの、名前・価格・箇条書きの位置をそろえる */
@media (min-width: 768px) {
  .c-plan-card--price-top .c-plan-card__name {
    display: grid;
    align-content: center;
    min-height: 3em;
  }

  .c-plan-card--price-top .c-plan-card__pricebox {
    min-height: 90px;
  }
}

/* c-section-note：カードやチップなどのブロックの下に置く、中央寄せの小さな1行の注記（中に c-text-link を置ける）
   c-text-link：文の中に置くリンク。墨の太字 + 朱の下線。矢印は付けず、行き先の分かる文言にする（外部サイトへのリンクだけ文末に ↗） */
.c-section-note {
  margin-top: 28px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-ink-2);
  text-align: center;
}

@media (min-width: 768px) {
  .c-section-note {
    margin-top: 32px;
    font-size: 15px;
  }
}

.c-text-link {
  padding-block: 3px;   /* タップできる高さを 24px 以上にする（文字だけだと 20〜21px）。上下の余白は行の高さに影響しない */
  font-weight: 700;
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color .2s;
}

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

/* 強制カラー（Windowsのハイコントラスト）では背景色が消えるので、線や点として描いている部分に文字色を指定する */
@media (forced-colors: active) {
  .c-eyebrow::before,
  .c-faq__question::before,
  .c-faq__question::after {
    background-color: CanvasText;
  }

  /* 面の色が消えると、枠線のないカードは地との区別がつかなくなる。強制カラーのときだけ細い枠を付ける（推奨・強調のカードは太い枠） */
  .c-card {
    border: 1px solid CanvasText;
  }

  .c-plan-card--accent,
  .c-feature-card--accent {
    border: 2px solid Highlight;
  }

  /* 実績の数字の区切り線：各項目の上と左に box-shadow で引いているが、box-shadow は強制カラーで消える。
     同じ位置（上と左の1px）に、疑似要素の罫線で引き直す。外側の線は c-stats の overflow: hidden で隠れる */
  .c-stats__item {
    position: relative;
  }

  .c-stats__item::before {
    content: "";
    position: absolute;
    top: -1px;
    right: 0;
    bottom: 0;
    left: -1px;
    border-top: 1px solid CanvasText;
    border-left: 1px solid CanvasText;
    pointer-events: none;
  }
}