@charset "UTF-8";

/* ========== Reset ========== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

/* ========== Root scaling ==========
   LP本体はデザイン幅440px基準。1rem = 10px（440px時）。
   440px未満では 100vw/44 で全体が比例縮小する。 */
html {
  font-size: 10px;
}

@media (max-width: 440px) {
  html {
    font-size: calc(100vw / 44);
  }
}

body {
  background-color: #183768;
  font-family: "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ========== Page layout ========== */
.lp-column {
  position: relative;
  width: 44rem;
  max-width: 100%;
  margin: 0 auto;
  background-color: #fff;
  overflow: hidden;
  z-index: 1;
}

/* セクション間の白い余白（Figma SP版で各セクション境界に約50px=5.64remの白ギャップ）。
   03/04/05/07/08 の前に隙間がある（02・06の前は隙間なし）。白は .lp-column 背景。 */
.lp-column > section.rc,
.lp-column > section.ab,
.lp-column > section.rs,
.lp-column > section.vc,
.lp-column > section.fq {
  margin-top: 5.64rem;
}

/* ==========================================================
   CTAボタン: hover時の色変化・カーソル（クライアント修正#7）
   ========================================================== */
.fv-cta, .fv-header-btn, .shell-cta__btn, .pg-cta, .fq-cta {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: filter .2s ease, background-color .2s ease;
}
/* 画像背景CTA: drop-shadowを維持したままbrightnessを加算 */
.fv-cta:hover,
.pg-cta:hover,
.fq-cta:hover {
  filter: drop-shadow(0 0 0.85rem rgba(0, 0, 0, 0.7)) brightness(1.12);
}
.shell-cta__btn:hover {
  filter: drop-shadow(0 0 7.5px rgba(0, 0, 0, 0.7)) brightness(1.12);
}
/* 単色背景ヘッダーボタン: 背景色を明るめに */
.fv-header-btn--annual:hover { background: #c99a3a; }
.fv-header-btn--monthly:hover { background: #b32a42; }

/* ==========================================================
   アンカー遷移時、固定ヘッダー(7.9rem)に見出しが隠れないようオフセット
   （クライアント修正#9）
   ========================================================== */
#campaign, #recommend, #about, #worries,
#reasons, #program, #profile, #voice, #faq {
  scroll-margin-top: 9rem;
}