/*
 * 事前登録キャンペーン（マイルストーン特典）
 * 広告LP（src/lp/*.html）と公式トップ（src/index.html）の両方から読み込む。
 * マークアップの元は tools/milestone-section.html。
 *
 * 画像のURLはこのファイルからの相対パスなので、どちらのページから読んでも
 * /lp/assets/milestone/ を指す。
 */
/* ===========================================
   事前登録キャンペーン（マイルストーン特典）
   Figma【Web】2405PV版 / node 775:774（SP 390px）
   段のデザインは Figma のコンポーネント「Campaign / Milestone」（791:1022）

   Figmaの寸法をそのまま再現するため、長さはすべて
   「390px幅のときの値 × --u」で書いている。
   --u は LPの幅 ÷ 390 なので、375px の端末でも 480px の上限でも
   デザインと同じ比率で縮む・伸びる（崩れない）。

   行の高さも px で指定している。Figmaは 145% などの行送りを
   整数pxに丸めて組むため（14px×1.45＝20.3 → 20px）、比率のままだと
   段が積み重なるたびに少しずつ下にずれていく。
=========================================== */
.promo-ms {
  --u: calc(min(100vw, 480px) / 390);
  /* 前後のページの地の色。上下の端をこの色になじませる（LP・公式とも #def3ff） */
  --ms-page-bg: #def3ff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
  /*
   * 上はFigmaの 32px から 8px に詰めている。キービジュアルの下に置くと
   * ストアボタンとの間が 71px 空いて離れて見えたため（2026-09-25 デザイン調整 → 47px）。
   */
  padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(32 * var(--u));
  /*
   * 中身は 358px（390px 基準）の列。公式トップのタブレット・PCでは背景だけ横いっぱいに敷き、
   * 中身はこの列のまま中央に置く。LP（幅 390px 基準）では (390−358)/2 ＝ 16px になり、上と同じ。
   */
  padding-inline: max(calc(16 * var(--u)), calc((100% - 358 * var(--u)) / 2));
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  color: #10174f;
  /*
   * 支給のクリスタル斜線2枚（白が上）＋横グラデーション。
   * いちばん上の層は、キービジュアルとの境目をなじませるためのもの。
   * キービジュアルの下端はページの地の色（--promo-bg）に溶けて終わるので、
   * このセクションも上端を同じ色から始めて、斜線と地の色を 56px かけて出す。
   * 下端も同じく、96px かけて地の色に戻す（次のバナーの地と切れ目なくつながる）。
   * （Figmaは単体のセクションで、前後とのつなぎは実装側で調整）。
   */
  background:
    linear-gradient(180deg, var(--ms-page-bg) 0%, rgba(222, 243, 255, 0) 100%) 0 0 / 100% calc(56 * var(--u)) no-repeat,
    linear-gradient(0deg, var(--ms-page-bg) 0%, rgba(222, 243, 255, 0) 100%) 0 100% / 100% calc(96 * var(--u)) no-repeat,
    url("../assets/milestone/bg-lines-white.svg?v=20260924") 0 0 / 100% auto no-repeat,
    url("../assets/milestone/bg-lines-blue.svg?v=20260924") 0 0 / 100% auto no-repeat,
    linear-gradient(90deg, #edf9ff 0%, #dff3ff 100%);
}
/*
 * フェードインは他のセクションと同じ .promo-reveal。
 * セクションまるごとだと 620px あって、動きがほとんど画面の外で終わってしまうので、
 * 見出し → 特典の枠 → 各段 と分けて、画面に入ったものから順に出す。
 * 何段か同時に入ったときは、上から少しずつ遅らせて出す。
 */
.promo-ms__row:nth-child(2) { transition-delay: 0.07s; }
.promo-ms__row:nth-child(3) { transition-delay: 0.14s; }
.promo-ms__row:nth-child(4) { transition-delay: 0.21s; }
.promo-ms__row:nth-child(5) { transition-delay: 0.28s; }
@media (prefers-reduced-motion: reduce) {
  .promo-ms__row { transition-delay: 0s; }
}
/*
 * 公式トップのタブレット・PC（横に広いとき）の背景。
 * クリスタル斜線は 390px 幅用の模様で、横幅いっぱいに伸ばすと左上に大きな白い面が出る。
 * 並べて敷くと、つなぎ目で線が途切れる。
 * そこで地のグラデーションだけを横いっぱいに敷き、模様は中身の列より少し広い幅で中央に置いて、
 * 左右と上下の端をぼかしてなじませる。
 * .promo-ms--site は公式トップ用のセクションにだけ付く（tools/gen-lp.py が付ける）ので、LPには効かない。
 */
@media (min-width: 520px) {
  .promo-ms--site {
    isolation: isolate;
    background:
      linear-gradient(180deg, var(--ms-page-bg) 0%, rgba(222, 243, 255, 0) 100%) 0 0 / 100% calc(56 * var(--u)) no-repeat,
      linear-gradient(0deg, var(--ms-page-bg) 0%, rgba(222, 243, 255, 0) 100%) 0 100% / 100% calc(96 * var(--u)) no-repeat,
      linear-gradient(90deg, #edf9ff 0%, #dff3ff 100%);
  }
  .promo-ms--site::before {
    --edge: 72px;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: -1;
    width: calc(390 * var(--u) + 2 * var(--edge));
    transform: translateX(-50%);
    pointer-events: none;
    background:
      url("../assets/milestone/bg-lines-white.svg?v=20260924") 0 0 / 100% auto no-repeat,
      url("../assets/milestone/bg-lines-blue.svg?v=20260924") 0 0 / 100% auto no-repeat;
    /* 左右の端と、上下（セクションの地のなじませと同じ長さ）をぼかす */
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%),
      linear-gradient(180deg, transparent 0, #000 calc(56 * var(--u)), #000 calc(100% - 96 * var(--u)), transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(90deg, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%),
      linear-gradient(180deg, transparent 0, #000 calc(56 * var(--u)), #000 calc(100% - 96 * var(--u)), transparent 100%);
            mask-composite: intersect;
  }
}
/* 数字だけ Inter の Black Italic（Figma指定） */
.promo-ms b { font-family: 'Inter', sans-serif; font-weight: 900; font-style: italic; }

/* ---------- 見出し ---------- */
.promo-ms__head {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  text-align: center;
}
.promo-ms__title {
  font-size: calc(30 * var(--u));
  font-weight: 900;
  line-height: calc(44 * var(--u));
  /* グラデーションは文字幅ではなく行幅（358px）に掛かる。Figmaと同じ */
  background: linear-gradient(90deg, #009cee 0%, #753bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.promo-ms__lead { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }

/* ---------- マイルストーン特典 ---------- */
.promo-ms__board {
  position: relative;
  /*
   * 中身（338px）は左から 11px（枠線1px＋余白10px）の位置。
   * Figmaでは右側の余白に枠線が食い込んでいて、右は実質 8px しかない。
   * 右の余白を 2px 詰めて、中身の幅がちょうど 338px になるようにしている。
   */
  padding: calc(30 * var(--u)) calc(10 * var(--u) - 2px) calc(14 * var(--u)) calc(10 * var(--u));
  background: rgba(255, 255, 255, 0.65);
  /* 枠線はFigmaでもレイアウトに含まれている */
  border: 1px solid #a9ddff;
  border-radius: calc(12 * var(--u));
}
/*
 * 帯（支給画像）。枠より左右に少しはみ出す（Figmaの配置どおり）。
 *
 * 帯・段の画像4枚は、支給PNGのうち「実際に見えている範囲」だけを切り出して書き出している。
 * 支給PNGは周りに透明な余白があり、Figmaでは拡大してから枠で切り落としていた。
 * 見える範囲をあらかじめ切り出しておけば、CSSは枠いっぱいに敷くだけで済み、
 * 表示は同じまま軽くなる（4枚で 171KB → 127KB）。
 * 書き出しは tools/milestone-assets.py（切り出す範囲の数字もそこにある）。
 */
.promo-ms__band {
  position: absolute;
  left: calc(-0.9 * var(--u));
  top: calc(-38.3 * var(--u));
  width: calc(359.806 * var(--u));
  height: calc(66 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: calc(19 * var(--u));
  line-height: calc(28 * var(--u));
  white-space: nowrap;
  background: url("../assets/milestone/band.webp?v=20260926") 0 0 / 100% 100% no-repeat;
}
/* 「を」だけ小さく、「ト」と「！」の間を詰める（Figmaの字組み） */
.promo-ms__band small { font-size: calc(14 * var(--u)); }
.promo-ms__kern { letter-spacing: -0.25em; }

.promo-ms__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  list-style: none;
}
/* 段と段をつなぐ縦の軸（段の下に潜る） */
.promo-ms__list::before {
  content: '';
  position: absolute;
  left: calc(68 * var(--u));
  top: calc(7.7 * var(--u));
  width: calc(10 * var(--u));
  height: calc(321 * var(--u));
  background: linear-gradient(180deg, #093a91 0%, #935657 100%);
}
/*
 * 段がフェードイン中（半透明）のあいだは、下の軸が透けて見えてしまう。
 * 段の画像は上下のふちが透けているので、見えている軸は10pxのすき間より長く、
 * 軸を切り分けて段と一緒に出す方法では再現できない。
 * そこで軸は1本のまま、最後の段が出そろってから少し遅れて出す（段が並ぶ → 軸でつながる）。
 * :has が使えないブラウザでは隠さない（最初から軸が見えているだけで、崩れはしない）。
 */
@supports selector(:has(*)) {
  /* 広告LP（段に promo-reveal が付くとき）だけ。公式トップは段ごとのフェードをしないので隠さない */
  .js-anim .promo-ms__list:has(> .promo-reveal)::before { opacity: 0; transition: opacity 0.5s ease-out 0.45s; }
  .js-anim .promo-ms__list:has(> .promo-ms__row:last-child.is-in)::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .js-anim .promo-ms__list::before { opacity: 1; transition: none; }
}
.promo-ms__row {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(338 * var(--u));
  height: calc(68 * var(--u));
  background: url("../assets/milestone/bar.webp?v=20260926") 0 0 / 100% 100% no-repeat;
}
.promo-ms__goal, .promo-ms__ticket, .promo-ms__reward { position: relative; }
/* 10万人だけ金の帯。上に6.3px・下に0.7px はみ出す（Figmaの配置どおり） */
.promo-ms__row--gold { background: none; }
.promo-ms__row--gold::before {
  content: '';
  position: absolute;
  inset: calc(-6.3 * var(--u)) 0 calc(-0.7 * var(--u));
  background: url("../assets/milestone/bar-gold.webp?v=20260926") 0 0 / 100% 100% no-repeat;
}
.promo-ms__goal {
  display: flex;
  align-items: center;
  justify-content: center;
  /*
   * Figmaは 2px。数字がイタリックで上が右に倒れているため、
   * 2px だと数字の右上が「万」に触れそうに見える。5px 空けている（2026-09-25 デザイン調整）。
   */
  gap: calc(5 * var(--u));
  width: calc(128 * var(--u));
  height: calc(68 * var(--u));
  color: #fff;
  text-align: center;
}
.promo-ms__goal b { font-size: calc(34 * var(--u)); line-height: calc(49 * var(--u)); white-space: nowrap; }
.promo-ms__row--first .promo-ms__goal b { font-size: calc(36 * var(--u)); line-height: calc(52 * var(--u)); }
.promo-ms__goal span { font-size: calc(11 * var(--u)); line-height: calc(16 * var(--u)); }
.promo-ms__ticket {
  width: calc(74 * var(--u));
  height: calc(44 * var(--u));
  margin-left: calc(8 * var(--u));
  /*
   * チケットの枠は横長（74×44）、支給画像は横長の比率が違う（240×179）。
   * cover だとキャラの頭と「×10」が切れるので、枠の中に収めて中央に置く。
   */
  object-fit: contain;
  /*
   * 金のチケットが段に溶け込むので、うっすら白く光らせて背景から浮かせる
   * （参考: 事前登録バナーの 10連チケットの見せ方）。全段共通。
   *   芯   … 1.5px の白。チケットの輪郭をはっきりさせる
   *   光   … 5px の白。チケットのまわりを明るくする
   *   広がり… 12px の薄い白。ふわっとした余韻
   * 段ごとの色（青・紫）や強め・広がりなしも試したうえで、2026-09-25 デザイン確認でこれに決定。
   */
  filter:
    drop-shadow(0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, 1))
    drop-shadow(0 0 calc(5 * var(--u)) rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 calc(12 * var(--u)) rgba(255, 255, 255, 0.55));
}
.promo-ms__reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(126 * var(--u));
  color: #253fad;
  font-size: calc(10 * var(--u));
  line-height: calc(12 * var(--u));
  text-align: center;
}
.promo-ms__row--gold .promo-ms__reward { color: #79098f; }
.promo-ms__count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(2 * var(--u));
  font-size: calc(13 * var(--u));
  line-height: calc(16 * var(--u));
}
.promo-ms__count b { font-size: calc(28 * var(--u)); line-height: calc(34 * var(--u)); }

/*
 * 達成済み（Figmaの 状態=達成済み）。5段とも同じ作り。
 * 全面ゴールドの背景に「達成済み」の紋章が入っているので、
 * 中身を左に寄せ、チケットと枚数をひとまわり小さくして紋章のぶん空ける。
 */
.promo-ms__row--done { background: url("../assets/milestone/bar-done.webp?v=20260926") 0 0 / 100% 100% no-repeat; }
.promo-ms__row--done::before { content: none; }
.promo-ms__row--done .promo-ms__goal { width: calc(100 * var(--u)); padding-left: calc(24 * var(--u)); color: #6b3b06; }
.promo-ms__row--done .promo-ms__ticket {
  width: calc(64 * var(--u));
  height: calc(42 * var(--u));
  margin-left: calc(4 * var(--u));
}
.promo-ms__row--done .promo-ms__reward {
  width: calc(84 * var(--u));
  height: calc(46 * var(--u));
  /* チケットまでの塊が Figmaでは 172px 幅（中身は168px）。残りの 4px */
  margin-left: calc(4 * var(--u));
  color: #6b3b06;
}
.promo-ms__row--done .promo-ms__reward > span:first-child { font-size: calc(9 * var(--u)); line-height: calc(11 * var(--u)); }

/*
 * 縦位置の補正。Figmaは中身を段の枠（68px）の中央に置いているが、
 * 段の画像の「見えている帯」は枠の中央より少し上にある（特に10万人の金は約3px上）。
 * そのままだと中身が帯から下にずれて見えるので、帯の中心に合わせて持ち上げる。
 * 値は、帯の画像の不透明部分の中心と、中身の実際のインク（文字の形）の中心の差を測ったもの。
 *   帯の中心: 達成前 32.3px / 金 30.7px / 達成済み 33.6px（枠の上から）
 */
.promo-ms__goal   { top: calc(-2.7 * var(--u)); }
.promo-ms__ticket { top: calc(-1.7 * var(--u)); }
.promo-ms__reward { top: calc(-1.0 * var(--u)); }
.promo-ms__row--gold .promo-ms__goal   { top: calc(-4.3 * var(--u)); }
.promo-ms__row--gold .promo-ms__ticket { top: calc(-3.3 * var(--u)); }
.promo-ms__row--gold .promo-ms__reward { top: calc(-2.6 * var(--u)); }
/* 達成済みは金の段より後に書く（10万人が達成済みになったときにこちらが勝つように） */
.promo-ms__row--done .promo-ms__goal   { top: calc(-1.8 * var(--u)); }
.promo-ms__row--done .promo-ms__ticket { top: calc(-0.5 * var(--u)); }
.promo-ms__row--done .promo-ms__reward { top: calc(0.9 * var(--u)); }


/* ---------- 利用規約（スクロールで読む枠） ---------- */
.promo-ms__terms {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  /* 特典の枠との間は 32px（セクション共通の 40px から 8px 詰める） */
  margin-top: calc(-8 * var(--u));
}
.promo-ms__terms-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: calc(26 * var(--u));
  font-weight: 900;
}
/* 両脇のひし形。見出しと同じ青→紫のグラデーション */
.promo-ms__terms-title::before,
.promo-ms__terms-title::after {
  content: '';
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  background: linear-gradient(135deg, #009cee 0%, #753bff 100%);
  transform: rotate(45deg);
}
/* 枠線は外側の箱に付ける（中の箱は下をぼかすので、線まで消えないように） */
.promo-ms__terms-frame {
  overflow: hidden;
  background: #fff;
  border: 1px solid #a9ddff;
  border-radius: calc(12 * var(--u));
}
.promo-ms__terms-scroll {
  /* 高さは 240px → 120px（2026-09-25 デザイン調整）。ぼかしも高さに合わせて控えめにして、4行ほど読めるようにしている */
  --fade: calc(24 * var(--u));
  --fade-top: calc(12 * var(--u));
  height: calc(120 * var(--u));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 下の余白をぼかしと同じ高さにしておくと、最後までスクロールしたときに最終行がぼけない */
  padding: var(--fade-top) calc(14 * var(--u)) var(--fade) calc(16 * var(--u));
  /*
   * iPhoneはスクロールバーが常には出ないので、下端をぼかして
   * 「続きがある」ことを見せている。
   * 上端も、スクロールした文字がブツッと切れないよう少しだけぼかす
   * （上の余白と同じ高さなので、一番上にいるときは1行目にかからない）。
   */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade)), transparent 100%);
  font-size: calc(12 * var(--u));
  font-weight: 500;
  line-height: calc(20 * var(--u));
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: #a9ddff transparent;
}
.promo-ms__terms-scroll::-webkit-scrollbar { width: 4px; }
.promo-ms__terms-scroll::-webkit-scrollbar-thumb { background: #a9ddff; border-radius: 2px; }
.promo-ms__terms-scroll:focus-visible { outline: 2px solid #0071c9; outline-offset: -3px; }
.promo-ms__terms-sec + .promo-ms__terms-sec {
  margin-top: calc(14 * var(--u));
  padding-top: calc(14 * var(--u));
  border-top: 1px solid #d9ecf8;
}
/* 小見出し。原稿の「■」を、見出しと同じグラデーションの四角で描いている */
.promo-ms__terms-sec h4 {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  margin-bottom: calc(6 * var(--u));
  color: #0071c9;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  line-height: calc(20 * var(--u));
}
.promo-ms__terms-sec h4::before {
  content: '';
  flex: none;
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  background: linear-gradient(135deg, #009cee 0%, #753bff 100%);
}
.promo-ms__terms-sec strong { font-weight: 700; }
.promo-ms__terms-sec p + p,
.promo-ms__terms-sec p + ul,
.promo-ms__terms-sec ul + p { margin-top: calc(6 * var(--u)); }
.promo-ms__terms-sec ul { list-style: none; }
/* 「・」「※」の2行目以降を、記号のうしろに揃える（ぶら下げ） */
.promo-ms__hang, .promo-ms__hang li { padding-left: 1em; text-indent: -1em; }
ul.promo-ms__hang { padding-left: 0; text-indent: 0; }


/*
 * 公式トップでのフェードイン。公式は他のセクション（.game-section）と同じく、
 * セクション単位でふわっと出す（html.js-reveal ＋ .is-visible は公式の仕組み。LPには付かない）。
 */
.js-reveal .promo-ms {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.js-reveal .promo-ms.is-visible { opacity: 1; transform: none; }