/* =====================================================================
   campaign-page.css — 下層トップ「キャンペーン」（E01）
   KV＋ページ見出し → Section01/02（白カード）→ Section03/04（クリーム地）
   PC(>=1024): 白カードは max1200・中央寄せ／グリッド2・3カラム
   SP(<600):   白カードは全幅・グリッドは1カラム積み
   ※ マーカー: 本文に "p-cmp-" を含むと generate-pages.mjs がこのCSSを自動読込
   ===================================================================== */
.p-cmp { background: var(--bg-default); }

/* ---------------------------------------------------------------------
   KV ＋ ページ見出し
   --------------------------------------------------------------------- */
.p-cmp-hero { position: relative; background: var(--bg-default); }
.p-cmp-hero__img { position: relative; }
.p-cmp-hero__img > picture img { width: 100%; height: auto; display: block; }
/* 画像下部中央の山型装飾（背景色と同色でくり抜きに見せる。特徴/声と同構成） */
.p-cmp-hero__mountain {
  position: absolute;
  left: 50%;
  bottom: -2px;               /* 継ぎ目のヘアラインを防ぐ */
  width: 320px;               /* SP: 横幅320px固定（比率維持） */
  transform: translateX(-50%);
  pointer-events: none;
}
.p-cmp-hero__mountain img { width: 100%; height: auto; }
.p-cmp-hero__mountain-pc { display: none; }
.p-cmp-hero__mountain-sp { display: block; }
/* KV画像の切替(600px)に合わせて山型も切替 */
@media (min-width: 600px) {
  .p-cmp-hero__mountain { width: 640px; }  /* PC: 横幅640px固定（比率維持） */
  .p-cmp-hero__mountain-pc { display: block; }
  .p-cmp-hero__mountain-sp { display: none; }
}

.p-cmp-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding: 8px var(--container-pad) 0;   /* SP: 上8px（KV→見出し）。PCは1024で5pxに上書き */
  text-align: center;
}
.p-cmp-hero__eyebrow {
  font-size: clamp(20px, 5.5vw, 24px);
  line-height: 1.5;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-orange);
}
.p-cmp-hero__dots { width: 64px; height: auto; }
.p-cmp-hero__title {
  margin-top: var(--space-12);
  font-size: clamp(22px, 6.2vw, 40px);
  line-height: 1.45;
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
}
/* 見出しの改行はSPのみ（≥600pxでは1行） */
@media (min-width: 600px) { .p-cmp-hero__sp-br { display: none; } }

/* マスコット → Section01「期間限定キャンペーン」の箱に移動（下記 .p-cmp-card__mascot） */

/* ---------------------------------------------------------------------
   本文ラッパ（セクションを縦に積む）
   --------------------------------------------------------------------- */
.p-cmp-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  padding-block: 120px 0;   /* SP: 見出し→次セクション120px（voiceに合わせマスコットが収まる余白。PCは1024で上書き）／下は余白なし */
}

/* セクション見出し（共通） */
.p-cmp-sechead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
}
.p-cmp-sectitle {
  font-size: clamp(24px, 5.6vw, 32px);
  line-height: 1.5;
  font-weight: var(--fw-bold);
  color: var(--text-default);
}
.p-cmp-sectitle span {
  background: linear-gradient(transparent 72%, var(--container-green) 72%);
}
.p-cmp-lead {
  font-size: 16px;
  line-height: 1.625;
  font-weight: var(--fw-light);
  color: var(--text-default);
}

/* 白カード（Section01 / 02） */
.p-cmp-card {
  width: 100%;
  background: var(--container-white);
  padding: var(--space-48) var(--space-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
}

/* ---------------------------------------------------------------------
   バナー（リンク付き画像）共通
   --------------------------------------------------------------------- */
.p-cmp-banner {
  display: block;
  position: relative;
  width: 100%;
  transition: opacity .2s ease;
}
.p-cmp-banner:hover { opacity: .85; }
.p-cmp-banner img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-16);
}
/* バナー画像に境界線（おためしセット・実施中キャンペーン共通／PC・SP）。
   直接の子画像＝メインバナーのみ対象（バッジ／別ウィンドウアイコン等は枠線を付けない） */
.p-cmp-banner > img:not(.p-cmp-banner__badge) { border: 1px solid #D8D2CA; }
/* 外部リンクアイコン（素材に焼き込まれていないバナー用） */
.p-cmp-banner__ext {
  position: absolute;
  top: 8px; right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: var(--container-alfa);
}
.p-cmp-banner__ext img { width: 24px; height: 24px; }
/* 別ウィンドウアイコン（円背景込みの単体SVG。バナー画像とは別要素） */
.p-cmp-banner img.p-cmp-banner__badge {
  position: absolute;
  top: 8px; right: 8px;
  width: 32px; height: 32px;
  border-radius: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   Section01 期間限定キャンペーン
   --------------------------------------------------------------------- */
/* 期間限定キャンペーンの箱（マスコットの起点） */
.p-cmp-card--pickup { position: relative; }

/* マスコット（ヒーロー .p-cmp-hero を起点に絶対配置 / SP: 下端の左右中央）。10%拡大。 */
.p-cmp-hero__mascot {
  position: absolute;
  width: 126.5px;           /* 旧115px ×1.1（10%拡大） */
  height: auto;
  left: 50%;
  top: calc(100% + 23px);   /* ヒーロー下端から23px下（従来の位置を維持） */
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}

.p-cmp-pickup {
  width: 100%;
  max-width: 792px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}
.p-cmp-banner--lg img { border-radius: var(--radius-24); }
.p-cmp-pickup__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  text-align: center;
}
.p-cmp-pickup__title {
  font-size: clamp(18px, 4.6vw, 24px);
  line-height: 1.5;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-default);
}
.p-cmp-pickup__note {
  font-size: 16px;
  line-height: 1.625;
  font-weight: var(--fw-light);
  color: var(--text-default);
}
.p-cmp-pickup__period {
  display: block;
  margin-top: var(--space-4);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------
   Section02 新規加入特典
   ※ 特典ブロック本体は components.css の .c-benefit* に共通化
      （加入・資料請求／手数料 各県ページと同一コンポーネント）
   --------------------------------------------------------------------- */
/* SP(<=599px): リード文は左寄せ */
@media (max-width: 599px) {
  .p-cmp-lead--left { text-align: left; }
}

/* ---------------------------------------------------------------------
   Section03 / 04 グリッド
   --------------------------------------------------------------------- */
.p-cmp-grid {
  width: 100%;
  max-width: 1072px;
  display: grid;
  grid-template-columns: 1fr;     /* SP: 1カラム積み */
  gap: var(--space-40);
}
.p-cmp-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.p-cmp-grid--2 .p-cmp-banner img { border-radius: var(--radius-24); }
.p-cmp-item__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.p-cmp-item__title {
  font-size: 20px;
  line-height: 1.7;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-default);
}
.p-cmp-item__desc {
  font-size: 16px;
  line-height: 1.625;
  font-weight: var(--fw-light);
  color: var(--text-default);
}

/* ---------------------------------------------------------------------
   タブレット以上（>=600px）
   --------------------------------------------------------------------- */
@media (min-width: 600px) {
  .p-cmp-card {
    width: min(calc(100% - var(--space-48)), 1200px);
    border-radius: var(--radius-40);
    padding: var(--space-64) var(--space-48);
    gap: var(--space-48);
  }
  .p-cmp-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .p-cmp-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------
   デスクトップ（>=1024px）
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .p-cmp-hero__head { padding-top: 5px; }   /* PC: KV→見出し5px */
  .p-cmp-body { padding-block: var(--space-64) 0; }   /* 下は余白なし */
  .p-cmp-card { padding: var(--space-64); gap: var(--space-64); }
  .p-cmp-grid { gap: var(--space-40); }
  .p-cmp-grid--3 { grid-template-columns: repeat(3, 1fr); }

  /* マスコットはヒーロー下端＝カード右上に重ねる。10%拡大。 */
  .p-cmp-hero__mascot {
    width: 187px;           /* 旧170px ×1.1（10%拡大） */
    left: auto;
    right: calc(50% - min(100% - var(--space-48), 1200px) / 2 - 20px);   /* カード右端＋20px相当 */
    top: calc(100% - 66px);
    transform: none;
  }
}