@charset "UTF-8";
/* PC の中間幅 768〜1023px だけ（index.jsp の <link media="(min-width: 768px) and (max-width: 1023px)">）。@media は書かない。style_pc の後に読む。
   1024px 以上の見た目は変えない。この幅だけ、改行の位置を指定し、文字の大きさを調整する */
/* 見出し・ラベル・ボタン・短い項目は語の途中で折り返さない。折り返してよい位置は HTML の <wbr /> と句読点・空白だけ。
   収まらない時の保険に break-word を残す（はみ出すより語の途中で切れるほうを選ぶ） */
.fv__lead,
.cards__name,
.steps__heading,
.steps__btn .btn-entry__text,
.steps__cond-text,
.steps__amount,
.chance__title,
.chance__bar,
.chance__ex-name,
.chance__total,
.qa__q-text,
.keio__title,
.keio__use-text,
.detail__name,
.detail__group--step2 .detail__text,
.apply__btn .btn-outline__text {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 本文の段落は語の途中で折り返してよいが、最後の行が1〜2字だけにならないようにする（対応していないブラウザでは何も起きない） */
.cards__note,
.steps__notes p,
.chance__notes p,
.qa__a-text,
.qa__note,
.detail__text,
.detail__note,
.notes__body p {
  text-wrap: pretty;
}

/* S2b 対象カード: 5列の間を 24 → 12 にして、券面名の幅を 106 → 115（768 幅）に広げる */
.cards__list {
  gap: 12px;
}

/* S3 参加方法: カードの左右の余白を 768 幅で 24、1023 幅で 40 にする（1024 以上は style_pc の 40） */
.steps__card {
  padding-right: clamp(24px, 6.27vw - 24.2px, 40px);
  padding-left: clamp(24px, 6.27vw - 24.2px, 40px);
}

/* 「キャンペーンに」7字が1行に入る大きさ（768 幅で 22.7px、約 940 幅で 32px） */
.steps__heading {
  font-size: clamp(22px, 5.2vw - 17.2px, 32px);
}

/* 「エントリーはこちら」9字が1行に入る大きさ（768 幅で 19.6px） */
.steps__btn {
  font-size: clamp(18px, 4.072vw - 11.7px, 20px);
}

/* S4 チャンスUP: 見出し13字を1行に収める（768 幅で 46.9px、約 900 幅で 56px） */
.chance__title {
  font-size: clamp(40px, 7.519vw - 10.8px, 56px);
}

/* 「10万円以上」を1行に収める（768 幅で 20.7px、約 856 幅で 24px） */
.chance__bar {
  font-size: clamp(20px, 3.7037vw - 7.7px, 24px);
}

/* 利用例4項目: 間を 16 → 8 にし、金額の下限を 24 → 20px にして、金額が項目の幅（＝セクションの内側）に収まるようにする */
.chance__ex-list {
  gap: 8px;
}

.chance__ex-price {
  font-size: clamp(20px, 2.6667vw, 32px);
}

/* 「合計80,000円 → 4口ゲット！」を1行に収める */
.chance__total {
  padding-right: 24px;
  padding-left: 24px;
  font-size: clamp(30px, 4.6vw - 5px, 40px);
}

/* S5 Q&A: 質問は句の切れ目（<wbr />）で折り返す。768 幅で「対象になりますか？」9字が1行に入る大きさ */
.qa__q {
  font-size: clamp(18px, 5.495vw - 23.3px, 20px);
}

/* S6 京王ポイント交換: 2行目「京王ポイントに交換可能！」12字を1行に収める（768 幅で 50.7px） */
.keio__title {
  font-size: clamp(44px, 8.13vw - 11.7px, 56px);
}

/* 1024 以上は2行で横一列（nowrap）。この幅では入りきらないので、読点と <wbr /> で折り返す */
.keio__use-text {
  white-space: normal;
}

/* S9: 2本並び（840px）が入らない幅では縦に並べ、ボタン2の括弧書きを1行に収める */
.apply__btns {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 24px;
}

.apply__btn {
  min-width: 400px;
}