/* pages/diagnosis.css
   無料AI検索診断ページ固有（p-diagnosis-）
   骨組みと部品は parts.css（c-page-head / c-split--form / c-form / c-note-box）と
   components.css（c-feature-card / c-steps / c-faq / c-tile / c-photo-frame）にあり、
   ここには、このページだけの左カラムの小見出し・お渡しするものの写真の下の余白・診断後の流れの幅を書く。
   本体（c-split--form を包む l-section）の余白は、l-section--compact（layout.css）で決まる */

/* 左カラムの小見出し（h2）。英字ラベルを付けない控えめな見出し（c-section-head は使わない） */
.p-diagnosis-heading {
  margin-bottom: 20px;
  font-size: clamp(22px, 2.2vw, 26px);
  line-height: 1.5;
}

/* 診断後の流れ・ご用意いただくもの（sub の中の塊と塊の間） */
.p-diagnosis-block + .p-diagnosis-block {
  margin-top: 56px;
}

@media (max-width: 767.98px) {
  .p-diagnosis-block + .p-diagnosis-block {
    margin-top: 44px;
  }
}

/* お渡しするもの：見出しの下の写真（枠は共通部品の c-photo-frame c-photo-frame--16x9。左カラムいっぱい）、3枚のカード、レポートサンプルの仮表示（格子柄のタイル c-tile）の順。
   写真は最初の画面に出るので、lazy にしない。ここには、写真とカードの間の余白だけを書く。
   カードは PC（左カラムが約500px）では縦に並べ、タブレット（1列で幅が広い）では3列にする */
.p-diagnosis-photo {
  margin-bottom: 24px;
}

@media (max-width: 767.98px) {
  .p-diagnosis-photo {
    margin-bottom: 16px;
  }
}

.p-diagnosis-gives {
  --card-grid-cols-tab: 3;
}

.p-diagnosis-sample {
  margin-top: 24px;
}

@media (max-width: 767.98px) {
  .p-diagnosis-sample {
    margin-top: 16px;
  }
}

/* 診断後の流れ（c-steps）：DAY のラベル（c-steps__label）・手順名・補足（c-steps__desc）は共通部品（components.css）
   左カラムが狭い（PC で約500〜540px）ので、項目の間は 44px → 28px に詰める（c-steps の変数） */
.p-diagnosis-flow {
  --steps-gap: 28px;
}