/* ==========================================================================
   彩プロダクツ 追加分（2026-09-15）
   納品物の css/style.css は一切変更していません。追加分のみをこのファイルに置きます。
   ========================================================================== */

/* 右の「ガイドブック請求はこちら」から #guidebook へ飛ぶと、
   画面上部に貼り付くヘッダーの下に隠れる問題の是正。
   納品物の `section[id] { scroll-margin-top: 64px; }` は section 要素にしか効かず、
   #guidebook は div のため 0px のままだった（2026-09-15 実測）。
   ヘッダー実測値: 幅390px=68px / 768px=69px / 1024px=96px / 1280px=96px / 1600px=100px */
#guidebook {
  scroll-margin-top: 34px;
}
@media screen and (min-width: 1024px) {
  #guidebook {
    scroll-margin-top: 62px;
  }
}

/* --------------------------------------------------------------------------
   縦の空きの最適化（2026-09-15・古長谷様のご指摘）
   納品物のセクション余白は 上80px/下100px（PC）・上55px/下70px（SP）で、
   隣り合うと 150〜180px の空きになっていた。さらに .experts が上下70pxの
   マージンを持つため、.experts と .reasons の間は PC で 364px あった（実測）。
   納品物の style.css は変更せず、ここで上書きする。
   -------------------------------------------------------------------------- */

/* スマートフォン・タブレット */
.issues,
.voice,
.case-study,
.reasons,
.flow,
.plan,
.contact {
  padding-top: 40px;
  padding-bottom: 44px;
}
.voice { margin-top: 16px; }
.about { padding-bottom: 36px; }
.experts {
  margin-top: 36px;
  margin-bottom: 36px;
}
.section_qa {
  padding-top: 20px;
  padding-bottom: 40px;
}
.guidebook { margin-top: 24px; }
.site-footer {
  padding-top: 32px;
  padding-bottom: 32px;
}

/* PC */
@media screen and (min-width: 1024px) {
  .issues,
  .voice,
  .case-study,
  .reasons,
  .flow,
  .plan,
  .contact {
    padding-top: 52px;
    padding-bottom: 60px;
  }
  .voice { margin-top: 16px; }
  .about { padding-bottom: 40px; }
  .experts {
    margin-top: 40px;
    margin-bottom: 40px;
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .section_qa {
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .guidebook { margin-top: 28px; }
  .site-footer {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* 波形の区切りが PC で引き伸ばされて巨大な空白に見える問題。
   wave-top.svg / wave-bottom.svg は 375x57 の装飾で preserveAspectRatio="none" のため、
   幅1280pxでは 1280x195 まで縦に伸びていた（実測）。SPでは 390x59。
   PC でも SP と同じくらいの厚みに揃える。 */
@media screen and (min-width: 1024px) {
  .about__wave {
    height: 70px;
  }
}

/* ヘッダーの電話番号を押して発信できるようにした（2026-09-15）。
   納品物では .site-header__tel が div で、リンクになっていなかった（PC側の赤いボタンは元からリンク）。
   a に変えたので、見た目が変わらないよう block 扱いにし、押しやすいように余白を持たせる。 */
a.site-header__tel {
  display: block;
  text-decoration: none;
  color: inherit;
}