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

.pc {
  display: none !important;
}

.sec {
  padding: 64px 16px;
}

.sec__inner {
  gap: 40px;
}

/* S0 header: 375×48。ロゴ表示 269.9×29.6、画像箱 x=10.7（ink が x=16） */
.header__inner {
  height: 48px;
  padding-left: 10.7px;
}

.header__logo {
  width: 269.9px;
}

/* S1 FV: KV 375×280.3／青パネル padding 24 16・gap 16 */
.fv__band {
  padding: 24px 16px;
  gap: 16px;
}

.fv__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-bottom: 4px;
}

.fv__label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  background-color: var(--keio-pink);
  border-radius: 34px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}

.fv__date {
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  font-feature-settings: "palt";
}

.fv__action {
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

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

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

/* 追従CTA: 375×80、padding 10 16、gap 8。ボタンのみ */
.sticky__inner {
  padding: 10px 16px;
  gap: 8px;
}

.sticky__btn {
  flex: 1 1 auto;
  min-height: 56px;
  padding: 2px 8px;
  gap: 4px;
  font-size: 16px;
}

/* S2 特典: 見出し3行（gap 10・lh 1）／特典と注記 gap 16 */
.prize__head {
  gap: 16px;
}

.prize__title {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 32px;
  line-height: 1;
}

.prize__title-line {
  display: block;
  white-space: nowrap;
}

.prize__body {
  gap: 16px;
}

.prize__list {
  flex-direction: column;
}

/* 1行目: 等級とロゴ（左）／人数（右）。2行目: ポイント。区切り線 2px、py 24（先頭は上なし） */
.prize__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 24px 0;
  border-top: 2px solid var(--keio-blue);
}

.prize__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.prize__rank-wrap {
  grid-column: 1;
  grid-row: 1;
  gap: 8px;
}

.prize__people {
  grid-column: 2;
  grid-row: 1;
}

.prize__point {
  grid-column: 1/-1;
  grid-row: 2;
}

.prize__rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 32px;
  padding: 0 10px;
}

.prize__logo {
  width: 83.763px;
  height: 22px;
}

.prize__num {
  font-size: 40px;
  line-height: 1.2;
}

/* S2b 対象カード: 見出し Dela 32 lh 1.4／一覧と注記 gap 24／縦積み gap 16 */
.cards__title {
  font-size: 32px;
  line-height: 1.4;
}

.cards__body {
  gap: 24px;
}

.cards__list {
  flex-direction: column;
  gap: 16px;
}

.cards__item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cards__img {
  width: 128px;
}

.cards__name {
  flex: 1 1 0;
  min-width: 0;
}

.steps__deco {
  left: 0;
  right: 0;
}

.steps__star--sp1 {
  top: -34px;
  right: -28.5px;
  width: 104.944px;
}

.steps__star--sp2 {
  top: 19.3px;
  right: 90.51px;
  width: 33px;
}

.steps__star--sp3 {
  bottom: -29.7px;
  left: -33.06px;
  width: 82.1185px;
}

.steps__title {
  font-size: 32px;
  line-height: 1.4;
}

.steps__list {
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.steps__card {
  width: 100%;
  gap: 24px;
  padding: 32px 24px;
}

.steps__label {
  font-size: 20px;
}

.steps__heading {
  font-size: 24px;
}

.steps__phone {
  width: 56.348px;
}

.steps__btn {
  font-size: 16px;
  line-height: 1.7;
}

.steps__card-img {
  width: 80px;
}

.steps__badge {
  padding: 8px 16px;
}

/* 矢印 48px（border なし）。右向き素材を 90° 回して下向きにする */
.steps__arrow {
  width: 48px;
  height: 48px;
}

.steps__arrow img {
  transform: rotate(90deg);
}

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

.chance__graph {
  gap: 14px;
}

/* 注記から利用例見出しまでを 3px 足す（デザインの見出し位置に合わせる） */
.chance__example {
  gap: 24px;
  margin-top: 3px;
}

.chance__title {
  font-size: 32px;
  line-height: 1.4;
}

.chance__lead {
  font-size: 16px;
}

.chance__bars {
  gap: 8px;
}

.chance__count {
  font-size: 24px;
  line-height: 1.3;
}

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

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

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

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

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

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

.chance__ex-title {
  font-size: 20px;
  line-height: 1.7;
}

/* cream の箱 p16 radius 16。行はアイコン48＋（名称／金額）、区切りは破線＋「＋」 */
.chance__ex-list {
  flex-direction: column;
  padding: 16px;
  background-color: var(--keio-cream);
  border-radius: 16px;
}

.chance__ex-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  column-gap: 16px;
  /* 上6・下9。8/8 だと行ごとに 1px ずつ下へずれ、合計枠で +3px になる（デザインの実測に合わせる） */
  padding: 6px 0 9px;
}

.chance__ex-icon {
  grid-row: 1/3;
  width: 48px;
  height: 48px;
}

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

.chance__ex-name {
  grid-column: 2;
}

.chance__ex-price {
  grid-column: 2;
  font-size: 24px;
  line-height: 1.3;
}

.chance__ex-sep {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chance__ex-sep::before,
.chance__ex-sep::after {
  content: "";
  flex: 1 1 0;
  border-bottom: 1px dashed var(--keio-blue);
}

.chance__ex-plus {
  font-size: 20px;
  line-height: 1.7;
}

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

/* S5 よくあるご質問: 1列。Q&A border-top 2px＋py24（先頭は border なし・pt0）。Q8 は下余白なしでボタンまで gap 20 */
.qa__title {
  font-size: 32px;
  line-height: 1.4;
}

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

.qa__item--1 {
  border-top: 0;
  padding-top: 0;
}

.qa__item--8 {
  padding-bottom: 0;
}

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

.qa__q {
  font-size: 18px;
}

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

.qa__item--2 .qa__a-inner {
  gap: 7px;
  padding-top: 9px;
}

.qa__item--3 .qa__a-inner,
.qa__item--4 .qa__a-inner {
  padding-top: 10px;
}

/* 記号は PC と同じ SVG。SP の「ー」の幅16に合わせて拡大 */
.qa__toggle {
  width: 27.4px;
  height: 27.4px;
}

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

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

/* S6 京王ポイント交換: 375×883・gap 40。集中線 1353×899 を左 −489（375 基準。中央からの差で固定）・縦中央 */
.keio__burst {
  top: 50%;
  left: calc(50% - 676.5px);
  width: 1353px;
  height: 899px;
  transform: translateY(-50%);
}

.keio__title {
  font-size: 32px;
  line-height: 1.4;
}

.keio__title-l2 {
  margin-right: 6px;
}

.keio__exchange {
  gap: 24px;
}

.keio__flow {
  flex-direction: column;
  gap: 8px;
}

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

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

/* 利用先とボタン群は下段にまとめて gap 24・左揃え */
.keio__lower {
  align-items: flex-start;
  gap: 24px;
}

.keio__use {
  gap: 16px;
  width: 100%;
}

.keio__icon {
  width: 64px;
  height: 52.364px;
}

.keio__use-text {
  flex: 1 0 0;
  min-width: 0;
}

.keio__action {
  width: 100%;
}

.keio__btn {
  height: 64px;
}

/* S7 キャンペーン概要: gap 40。見出しと名称 gap 16／期間 p24・ラベルは全幅 */
.detail__head {
  gap: 16px;
}

.detail__title {
  font-size: 32px;
  line-height: 1.4;
}

.detail__name {
  font-size: 16px;
}

.detail__period {
  padding: 24px;
}

.detail__date {
  font-size: 20px;
  line-height: 1.4;
}

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

.detail__group--period,
.detail__group--entry,
.detail__group--step2 {
  gap: 10px;
}

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

.detail__group--entry {
  align-items: stretch;
}

/* 特典行: 「1等」幅 25＋gap 16＋右列 2 行 */
.detail__prize {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.detail__rank {
  flex-shrink: 0;
  width: 25px;
}

.detail__prize-body {
  flex: 1 0 0;
  min-width: 0;
}

.detail__btn {
  width: 100%;
  height: 56px;
  padding: 8px;
  gap: 4px;
}

/* S9: 見出し Bold 20 lh1.7 の 2 行、ボタンまで gap 24。ボタンは全幅 2 本 gap 24・文字 15px */
.apply__inner {
  gap: 24px;
}

.apply__title {
  font-size: 20px;
}

.apply__btns {
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.apply__btn {
  font-size: 15px;
}

/* ご注意事項: 見出しの箱 p20・本文の箱 p20（section 自体の padding は 0）。本文は両端揃え */
.notes {
  padding: 0;
}

.notes__q {
  padding: 20px;
}

.notes__body {
  padding: 20px;
  text-align: justify;
}

/* S10 footer: px16 py40、ロゴ h24（w218.6） */
.footer {
  padding: 40px 16px;
}

.footer__logo {
  height: 24px;
}