@charset "UTF-8";
/* PC（min-width: 768px）。index.jsp の <link media> で読み分ける。@media は書かない */
body {
  padding-bottom: 100px;
}

.sp {
  display: none !important;
}

.sec {
  padding: 80px 72px;
}

.sec__inner {
  max-width: 1056px;
  gap: 56px;
}

/* S0 header: 高さ 64。ロゴ表示 349.8×38.4。ロゴは画面幅に関係なく画面の左から 40px（ink が x=40、画像箱 x=33.1）に置く */
.header__inner {
  height: 64px;
  padding-left: 33.1px;
}

.header__logo {
  width: 349.8px;
}

/* S1 FV: KV は画面幅いっぱいに広げる（左右に余白を出さない）／帯 padding 24 72・column gap 24 */

.fv__band {
  padding: 24px 72px;
  gap: 24px;
}

/* 要エントリー・日付は KV 画像に焼き込み済み。読み上げ用に残す */
.fv__info {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Frame18: row gap 24。wrap は 768〜931px で横に収まらない時に2段にする */
.fv__action {
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.fv__count {
  display: flex;
  align-items: center;
}

.fv__count-num {
  font-size: 40px;
}

.fv__btn {
  width: 480px;
  max-width: 100%;
  height: 64px;
  padding: 16px 20px;
  gap: 12px;
  font-size: 20px;
}

/* 追従CTA: 1200×100、padding 16 72、row justify-between */
.sticky__inner {
  max-width: 1200px;
  padding: 16px 72px;
  justify-content: space-between;
}

/* 中間幅: 文字は縮めず、ボタン（下限 240）から先に縮める。収まらない幅では文字が折り返す */
.sticky__text {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  min-width: 0;
  max-width: calc(100% - 240px);
  line-height: 1.7;
}

/* 入りきらない幅（約 870px 未満）では <wbr /> の位置だけで折り返し、語の途中で割らず、1〜2字だけの行も作らない */
.sticky__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--keio-blue);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.sticky__note {
  font-size: 11px;
  font-weight: 400;
  color: var(--keio-navy);
}

/* 480×64 padding 8 gap 4。flex-shrink と min-width は中間幅の縮め方 */
.sticky__btn {
  flex: 0 1 480px;
  min-width: 240px;
  height: 64px;
  padding: 8px;
  gap: 4px;
  font-size: 20px;
}

/* S2 特典: 見出しとリード gap 24／特典と注記 gap 32 */
.prize__head {
  gap: 24px;
}

/* 1行に入らない幅（約 1150px 未満）では「相当の」の後ろの <wbr /> だけで折り返し、「Vポイント」を語の途中で割らない */
.prize__title {
  font-size: 48px;
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.prize__title .pc {
  position: relative;
  left: -0.36em;
}

.prize__body {
  gap: 32px;
}

/* 3列 justify-between。wrap と gap は中間幅で横に収まらない時だけ効く */
.prize__list {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px 24px;
}

.prize__item {
  display: flex;
  flex-direction: column;
}

.prize__rank-wrap {
  gap: 16px;
  margin-bottom: 8px;
}

.prize__rank {
  width: 100px;
  padding: 10px;
}

.prize__logo {
  width: 91.163px;
  height: 23.943px;
}

.prize__num {
  font-size: 56px;
  line-height: 1;
}

/* S2b 対象カード: 見出し Dela 56／一覧と注記 gap 32／5列 gap 24 */
.cards__title {
  font-size: 56px;
  line-height: 1.3;
}

.cards__body {
  gap: 32px;
}

.cards__list {
  gap: 24px;
}

.cards__item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.cards__img {
  width: 192px;
}

.steps__deco {
  left: 50%;
  width: 1200px;
  margin-left: -600px;
}

.steps__star--pc1 {
  top: -95px;
  left: 964px;
  width: 257.113px;
  transform: rotate(14deg);
}

.steps__star--pc2 {
  top: 81px;
  left: 894.93px;
  width: 74.51px;
  transform: rotate(-12deg);
}

.steps__star--pc3 {
  bottom: -79.4px;
  left: -37.4px;
  width: 150.595px;
  transform: rotate(-16deg);
}

.steps__title {
  font-size: 56px;
  line-height: 1.3;
}

.steps__list {
  gap: 24px;
}

.steps__card {
  flex: 1 1 0;
  gap: 24px;
  min-width: 0;
  padding: 48px 40px 40px;
}

.steps__label {
  font-size: 24px;
}

.steps__heading {
  font-size: 32px;
}

.steps__phone {
  width: 72px;
}

.steps__btn {
  font-size: 20px;
}

.steps__card-img {
  width: 96px;
}

.steps__arrow {
  position: absolute;
  top: 177px;
  left: calc(50% - 38px);
  z-index: 1;
  width: 76px;
  height: 76px;
  border: 6px solid var(--keio-blue);
}

/* S4 チャンスUP: 見出しとリード gap 24／階段と注記 gap 24／利用例 gap 32 */
.chance__head,
.chance__graph {
  gap: 24px;
}

.chance__example {
  gap: 32px;
}

.chance__title {
  font-size: 56px;
  line-height: 1.3;
}

.chance__lead {
  font-size: 20px;
}

.chance__up {
  width: 30px;
  height: 18px;
  margin-left: 4px;
  vertical-align: -3px;
}

.chance__bars {
  gap: 16px;
}

.chance__count {
  font-size: 56px;
  line-height: 1;
}

.chance__bar {
  font-size: 24px;
  border-radius: 16px 16px 0 0;
}

.chance__col:nth-child(1) .chance__bar {
  height: 72px;
}

.chance__col:nth-child(2) .chance__bar {
  height: 120px;
}

.chance__col:nth-child(3) .chance__bar {
  height: 168px;
}

.chance__col:nth-child(4) .chance__bar {
  height: 216px;
}

.chance__col:nth-child(5) .chance__bar {
  height: 264px;
}

.chance__ex-title {
  font-size: 28px;
  line-height: 1.5;
}

.chance__ex-list {
  align-items: center;
  gap: 16px;
}

.chance__ex-item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  min-width: 0;
}

.chance__ex-icon {
  width: 64px;
  height: 64px;
}

.chance__ex-icon::before {
  inset: 1px;
}

.chance__ex-name {
  margin-top: 16px;
  text-align: center;
}

/* 1200 で 32px。中間幅（768〜）で4列の金額が重ならないよう 24px まで縮める */
.chance__ex-price {
  margin-top: auto;
  font-size: clamp(24px, 2.6667vw, 32px);
  line-height: 1.2;
}

.chance__ex-plus {
  font-size: 28px;
  line-height: 1.55;
}

.chance__total {
  padding: 24px 40px;
  font-size: 40px;
}

/* S5 よくあるご質問: 2列 column gap 40。各 Q&A border-top 2px＋py32。最終行は border-bottom 2px も */
.qa__title {
  font-size: 56px;
  line-height: 1.3;
}

.qa__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
}

.qa__item {
  gap: 24px;
  padding: 32px 0;
}

.qa__item--7,
.qa__item--8 {
  border-bottom: 2px solid var(--keio-blue);
}

.qa__icon {
  width: 64px;
  height: 64px;
}

.qa__item--4 .qa__icon::before,
.qa__item--5 .qa__icon::before,
.qa__item--6 .qa__icon::before,
.qa__item--7 .qa__icon::before,
.qa__item--8 .qa__icon::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background-color: var(--keio-icon-bg);
}

.qa__q {
  font-size: 20px;
}

.qa__q-text {
  max-width: 380px;
}

/* 1024px 以上でも、S3 の注記・金額と Q&A の質問は語の途中で折り返さない。折り返してよい位置は HTML の <wbr />・句読点・空白だけ。
   1200px では1行に収まるか、もとの改行位置と同じ所で折り返す（768〜1023 は style_pc_mid で同じ指定済み） */
.steps__notes p,
.steps__amount,
.qa__q-text {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.qa__toggle {
  width: 24px;
  height: 24px;
}

/* Q8 のボタンの箱。項目の gap 24 を上へ戻し、箱の中で 24 空ける。閉じた時は高さ 0 なので gap が残らない */
.qa__a--btn {
  margin-top: -24px;
}

.qa__a-btn-inner {
  padding-top: 24px;
}

/* S6 京王ポイント交換: 1200×810・gap 56。集中線 2000×1334 を (−400,−305)（1200 基準。中央からの差で固定） */
.keio__burst {
  top: -305px;
  left: calc(50% - 1000px);
  width: 2000px;
  height: 1334px;
}

.keio__title {
  font-size: 56px;
  line-height: 1.3;
}

.keio__exchange {
  gap: 16px;
}

.keio__flow {
  gap: 24px;
}

.keio__pill {
  padding-left: 40px;
  padding-right: 40px;
  font-size: 40px;
}

.keio__how {
  padding-top: 8px;
}

.keio__how-text {
  font-size: 20px;
}

.keio__kern {
  letter-spacing: -10px;
}

/* 利用先とボタン群は S6 の子として gap 56（SP は下段にまとめて gap 24） */
.keio__lower {
  align-items: center;
  gap: 56px;
}

.keio__use {
  gap: 24px;
}

.keio__icon {
  width: 88px;
  height: 72px;
}

.keio__use-text {
  white-space: nowrap;
}

.keio__action {
  align-items: center;
}

.keio__btn {
  width: 480px;
  max-width: 100%;
  height: 64px;
}

/* S7 キャンペーン概要: gap 56。見出しと名称 gap 24／期間 px40 py32 */
.detail__head {
  gap: 24px;
}

.detail__title {
  font-size: 56px;
  line-height: 1.3;
}

.detail__name {
  font-size: 20px;
}

.detail__period {
  padding: 32px 40px;
}

.detail__date {
  font-size: 28px;
  line-height: 1.5;
}

/* 詳細本文: 段落の間 gap 24。期間・特典・当選案内の中は gap 8／参加条件の中は gap 16／STEP2 は文と注記 gap 8 */
.detail__body {
  gap: 24px;
}

.detail__group--period,
.detail__group--prize,
.detail__group--result {
  gap: 8px;
}

.detail__group--entry {
  gap: 16px;
}

.detail__para--step2 {
  gap: 8px;
}

.detail__btn {
  width: 520px;
  height: 64px;
  padding: 16px 20px;
  gap: 12px;
}

/* PC は注記2行が別段落で gap 8（基準画像の行送り 27px） */
.detail__period-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* S9: 見出し Bold 28 lh1.5、ボタンまで gap 24。ボタン 400 幅 2 本 gap 40（実測 400×86） */
.apply__inner {
  gap: 24px;
}

.apply__title {
  font-size: 28px;
  line-height: 1.5;
}

.apply__btns {
  width: 840px;
  max-width: 100%;
  gap: 40px;
}

/* 768〜1023 幅では 2本並び（840px）が収まらないため、400px を上限に縮める */
.apply__btn {
  flex: 0 1 400px;
  min-width: 0;
}

/* ご注意事項: padding 80 72（.sec と同じ）。本文は見出しの下 pt20・左揃え */
.notes__body {
  padding-top: 20px;
}

/* S10 footer: px72 py24、ロゴ h32（w291.4） */
.footer {
  padding: 24px 72px;
}

.footer__logo {
  height: 32px;
}