/* ================ LOTTO DESIGN STUDIO — index (LP) ================ */
/* :root トークンは /css/lotto-design-tokens.css に分離 (2026-04-29 Phase B) */
/* 2026-06-17: 新 LP デザイン (lotto_designstudio_LP_0617) に合わせ全面刷新。
   Hero=単一大型写真 / ブランド黒 / FLOW(STEP1-4 + 対応店舗/カタログ button + 写真バンド) /
   campionato カード×5 / 下部 CTA バンド / Footer。 旧 hero-collage / uniform / detail は撤去。 */
@import url('/css/lotto-design-tokens.css');

:root {
  /* --- 2026-07-31: 支給デザイン lotto_designstudio_LP_0617 から実測した色 ---
     サイト共通トークン (--lotto-red 等) は sim/itemselect でも使うため変更せず、
     LP の版面色だけをここで持つ。値は PDF の塗り色をそのまま取り出したもの。 */
  --lp-red:        #E6002B;  /* CTA ボタン (デザイン実測) */
  --lp-red-dark:   #c30024;  /* 上記のホバー (実測値を暗くしたもの・デザインに指定なし) */
  --lp-green:      #00803A;  /* 対応店舗ボタン / カタログボタン / FLOW のタグ */
  --lp-green-dark: #006630;
  --lp-blue:       #036EB7;  /* campionato のキャプション帯 */
  --lp-gray-bg:    #E1E6E9;  /* FLOW セクション地色 / フッタ地色 */
  --lp-ink:        #191919;  /* FLOW ブロックの本文色 */

  /* 書体。デザインは 和文 Noto Sans JP / 欧文見出し Roboto。
     欧文フォントを先に書くことで、和欧混植の見出しは Latin だけ Roboto に、
     和文は Noto Sans JP に落ちる (ブラウザの per-character フォールバック)。 */
  --lp-font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, system-ui, sans-serif;
  --lp-font-en: "Roboto", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* button / input はブラウザ既定のコントロール書体 (Arial 等) が当たり、body の指定を継承しない。
   LP には <a> 実装のボタンと <button> 実装のボタンが混在するため、揃えないと
   **同じ見た目のボタンでラベルの書体だけ違う**という分かりにくい崩れになる
   (実測: <a> = Noto Sans JP / <button> = Arial)。 */
button, input, select, textarea { font: inherit; }

html, body {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--lp-font-ja);
  color: var(--lotto-text-dark);
  background: #fff;
  line-height: 1.5;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }

/* =========================================================
   共通ボタン (.lp-btn)
========================================================= */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  padding: 14px 36px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
  line-height: 1.2;
}
.lp-btn:focus-visible,
.cta-bar__cta:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 3px;
}
/* カタログボタンの白丸 + 矢印。デザイン実測: 丸 44φ / 矢印は軸 18px と「>」8x16、線 2px 丸端。
   文字グリフ (→) だと書体で形と位置が変わるため CSS で作図する。 */
.lp-btn__arrow {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}
.lp-btn__arrow::before,
.lp-btn__arrow::after { content: ""; position: absolute; }
/* 軸: 中心 (22,22) から左右 9px */
.lp-btn__arrow::before {
  left: 13px; top: 21px;
  width: 18px; height: 2px;
  background: var(--lp-green);
  border-radius: 1px;
}
/* 山: 正方形を 45 度回して 2 辺だけ見せる */
.lp-btn__arrow::after {
  left: 20px; top: 16px;
  width: 11px; height: 11px;
  border-top: 2px solid var(--lp-green);
  border-right: 2px solid var(--lp-green);
  transform: rotate(45deg);
}

/* 赤 = 主要 CTA。デザインでは 3 箇所とも 420x80 の完全角丸・文字 24px・アイコン無し。
   幅は狭幅で内側に収まるよう max-width で頭打ちにする。 */
.lp-btn--red {
  background: var(--lp-red);
  color: #fff;
  border: 0;
  width: 420px;
  max-width: 100%;
  height: 80px;
  padding: 0 24px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0;
}
/* :focus ではなく :focus-visible を使う。ダイアログを開くと確認ボタンへ自動でフォーカスを
   移すため、:focus だと「押していないのにホバー色」で出てしまう (実測で暗い赤になった)。 */
.lp-btn--red:hover, .lp-btn--red:focus-visible { background: var(--lp-red-dark); color: #fff; }
/* デザインに狭幅の指定は無い。24px のままだと 13 字 = 312px となり、
   375px 幅で左右の余白が 11.5px しか残らず、320px 幅では文字がボタンから食み出す
   (.lp-btn は white-space:nowrap ゆえ折返しで逃げられない)。 */
@media (max-width: 768px) {
  .lp-btn--red { height: 64px; font-size: 17px; padding: 0 20px; }
  /* nowrap のままだと、ボタンの min-content 幅がそのままグリッド列の下限になり、
     320px 級の画面でカードごと画面外へ押し出される (実測で横スクロールが出た)。
     狭幅では折返しを許して、幅ではなく高さで吸収させる。 */
  .lp-btn { white-space: normal; }
}

/* 緑 = LOTTO DESIGN STUDIO 対応店舗 (アウトライン)。デザイン実測 440x70・線 1px・文字 22px */
.lp-btn--green {
  background: #fff;
  color: var(--lp-green);
  border: 1px solid var(--lp-green);
  width: 440px;
  max-width: 100%;
  height: 70px;
  padding: 0 20px;
  font-size: 22px;
  font-weight: 500;
}
.lp-btn--green:hover, .lp-btn--green:focus-visible { background: var(--lp-green); color: #fff; }

/* 緑ベタ = デジタルカタログ。デザイン実測 610x80・文字 24px・白丸 44φ。
   内訳は 左アキ 57.61 + 文字 446.78 + アキ 43.61 + 丸 44 + 右アキ 18 = 610。 */
.lp-btn--catalog {
  background: var(--lp-green);
  color: #fff;
  border: 0;
  width: 610px;
  max-width: 100%;
  height: 80px;
  padding: 0 18px 0 57.61px;
  gap: 43.61px;
  font-size: 24px;
  font-weight: 500;
  /* 文字幅をデザイン実測 446.78px に合わせる (素の描画は 459.6px) */
  letter-spacing: -0.46px;
}
.lp-btn--catalog:hover, .lp-btn--catalog:focus-visible { background: var(--lp-green-dark); color: #fff; }

/* =========================================================
   2. ヒーロー（全幅写真 + ロゴ overlay）

   2026-07-31: 支給デザイン lotto_designstudio_LP_0617 の実測に合わせて再構成。
   デザインは 1200x940 の版面で、以下の実測値をそのまま比率で持たせている。

     版面           1200 x 940                      → aspect-ratio: 1200/940
     ロゴ           x 57.84  y 76.13  w 516.74      → left 4.820% / top 8.099% / width 43.062%
     lotto ボックス x 68.33  下端から 63.54  w 213.36 → left 5.694% / bottom 6.759% / width 17.780%

   写真は「デザインの縦帯（元画像 3700x2200 の y243-2123）を全幅で切り出した」素材。
   object-fit:cover は高さ基準で効くため、1200px 幅では素材が 1850x940 に拡大され、
   object-position:33.1% が デザインの配置オフセット -215.32px を再現する（= 1:1 一致）。
   画面がこれより広いときは縦を切らずに左右が広がるだけになる（素材の外側が現れる）。

   暗幕グラデーションとロゴの drop-shadow はデザインに無いため撤去した。
========================================================= */
.lp-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 940;
  max-height: 940px;   /* 1200px を超える画面で高さが伸び続けないようにする */
  min-height: 360px;   /* 極小幅で帯のように潰れるのを防ぐ */
  background: #000;
  overflow: hidden;
  flex-shrink: 0;
}
.lp-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 33.1% center;
  display: block;
}
/* ロゴ類を載せるコンテンツ枠。写真は全幅のまま、ロゴだけ最大 1200px で中央寄せする。 */
.lp-hero__inner {
  position: absolute;
  inset: 0;
  max-width: 1200px;
  margin-inline: auto;
  pointer-events: none;
}
/* h1 でロゴ画像を包んでいる。見出し既定の margin / font-size を殺して、
   これまでどおり画像そのものの寸法・位置で置く。 */
.lp-hero__logo {
  position: absolute;
  left: 4.820%;
  top: 8.099%;
  width: 43.062%;
  height: auto;
  margin: 0;
  font-size: 0;
  line-height: 0;
}
.lp-hero__logo img { width: 100%; height: auto; display: block; }
.lp-hero__mark {
  position: absolute;
  left: 5.694%;
  bottom: 6.759%;
  width: 17.780%;
  height: auto;
}

/* =========================================================
   3. ブランド紹介（背景写真 + 白文字 + 赤 CTA）

   2026-07-31: 支給デザインの実測に合わせて再構成。デザイン版面 1200x870 で、
   写真 (link_lotto_DS_LP_image01.jpg) がセクション全体の地になっている。

     セクション   y 940-1810 = 高さ 870        → min-height: min(72.5vw, 870px)
     見出し       ベースライン 1092.40 / 字高(cap) 43.27 → Roboto Black 60.9px 相当
                  実測幅 879px (x 160.44-1039.44・中央揃え)
     本文         24px / ベースライン間隔 56.06px → line-height 2.336
     段落間       74.06px = 通常の行送り + 18px  → 2 段落目に margin-top 18px
     ボタン       420x80 の完全角丸 / 文字 24px / アイコン無し

   旧実装が敷いていた暗幕 (linear-gradient) はデザインに無いため撤去した。
   写真そのものが暗い露出で、白文字のコントラストは元から足りている。
========================================================= */
.section-brand {
  position: relative;
  /* 版は画像を差し替えた日付に合わせる (現在値 = 導入 commit ae01de4 の 2026-06-17)。
     本番 vhost は jpeg を max-age=604800 で配るため、無版だと差替後 最大 1 週間 旧版が残る。
     svg は max-age=0 で配られるので版を付けない (index.html の *.svg 参照が無版なのはこのため)。 */
  background: #0a0a0a url('/assets/image/index/lp-brand-bg.jpg?v=20260617a') center / cover no-repeat;
  color: #fff;
  min-height: min(72.5vw, 870px);
  padding: 56px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
}
.section-brand__inner { width: 100%; max-width: 1200px; margin: 0 auto; }
.section-brand__title {
  font-family: var(--lp-font-en);
  font-weight: 900;
  font-size: 60.9px;
  line-height: 1.1;
  /* 級数は字高 (cap) 基準で合わせてあるので、残る字送りの差 (実測 884.8px / デザイン 879px)
     だけを letter-spacing で詰める。24 字 = 23 アキで 5.8px ぶん。 */
  letter-spacing: -0.25px;
  margin: 0 0 45px;
}
.section-brand__lead {
  font-size: 24px;
  font-weight: 500;
  line-height: 2.336;
  color: #fff;
  margin: 0;
}
.section-brand__lead--2 { margin-top: 18px; margin-bottom: 69px; }

@media (max-width: 768px) {
  .section-brand { min-height: 0; padding: 48px 20px; }
  .section-brand__title { font-size: 30px; margin-bottom: 24px; }
  .section-brand__lead { font-size: 15px; line-height: 2.0; }
  .section-brand__lead--2 { margin-top: 14px; margin-bottom: 32px; }
  /* デザインの改行位置は 1200px 版面のためのもの。狭幅では自然折返しに任せる。 */
  .section-brand__lead br { display: none; }
}

/* =========================================================
   4. FLOW（カスタムオーダーの流れ）

   2026-07-31: 支給デザインの実測に合わせて再構成。デザイン版面 1200px での実測値:

     セクション   y 1810-4480 (h 2670) / 地色 #E1E6E9
     FLOW 見出し  Roboto Black・字高(cap) 59.12 → 83.2px / ベースライン 1982.23
     緑タグ       275.04 x 30 / 文字 24px 白 / 文字幅 264 → 左右アキ 5.52
     STEP 行      **4 行とも高さ 430・行間 80 の等間隔**
                  (行 top = 2135.22 / 2645.22 / 3155.22(STEP3・画像なし) / 3665.22)
     カード       660 x 430・左角のみ角丸 18px・内側 padding 上下左 30 / 右 60
                  → 画像は 570 x 370。カードの右端は版面右端 (x=1200) に接する = 断ち落とし
     テキスト列   x 60 から幅 480 (60 + 480 + 660 = 1200)
     STEP ラベル  "STEP" = Roboto Black 45.6px / 数字 = 60.9px (同一ベースライン・間 12.11)
     区切り線     40 x 1px #191919
     見出し       28px / 行送り 38    本文 18px / 行送り 28
     リスト       18px・項目ピッチ 32・折返し行送り 24・「・」の後は x=80 (字下げ 20)
     緑ボタン     440 x 70・線 1px・文字 22px      カタログ 610 x 80・文字 24px・白丸 44φ
========================================================= */
.section-flow {
  background: var(--lp-gray-bg);
  flex-shrink: 0;
}
.flow__inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  /* 上アキ 113 はデザインの「セクション上端 → FLOW の字面上端」だが、
     CSS の行ボックスは字面より上に張り出すぶん 24px 実測で下がるので差し引いてある。 */
  padding: 89px 0 148px;
}
/* FLOW 見出し + 緑タグ */
.flow__header { text-align: center; }
.flow__title {
  font-family: var(--lp-font-en);
  font-weight: 900;
  font-size: 83.2px;
  /* 級数は字高 (cap 59.12) 基準。残る字送りの差 (実測 217.7 / デザイン 206.6) を詰める。
     letter-spacing は最後の 1 字の後ろにも入るので、負値だと中央位置は約 1.4px 右へずれる。
     実測で x=496.7 (デザイン 496.72) に収まっているため補正は入れていない。 */
  letter-spacing: -2.79px;
  margin: 0;
  line-height: 1;
  color: var(--lp-ink);
}
.flow__subtitle {
  display: inline-block;
  background: var(--lp-green);
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  padding: 0 5.5px;
  margin-top: 24px;
}

/* --- STEP 行 --- */
.step-row {
  display: grid;
  /* 60 + 480 + 660 = 1200。狭幅でも比率が保たれるよう % で持たせる */
  grid-template-columns: 42.105% 57.895%;
  padding-left: 5%;
  align-items: center;
  min-height: 430px;
  margin-top: 99px;   /* 緑タグ下端 → 1 行目カード上端 = 98.67 */
}
.step-row + .step-row { margin-top: 80px; }

/* グリッド項目の既定 min-width:auto は「中で一番縮まない要素の幅」を列の下限にする。
   STEP4 の緑ボタンが 440px 固定なので、これが無いと狭幅で列が 440px に固定され
   画面外へ食み出す (375px 幅で実測 460px の横スクロールが出た)。 */
.step-row__body, .step-row__card { min-width: 0; }

/* カードは版面の右端を越えて断ち落とす意匠。溢れた分はここで切る。

   ⚠ 100vw は **スクロールバー幅を含む** 初期包含ブロック基準なので、
   `.flow__inner` (中央寄せ・コンテンツ幅基準) との差 = スクロールバー幅 / 2 が
   常にビューポート外へ出る。クラシックスクロールバーの環境 (Windows/Linux) では
   1200px 超の幅で**恒常的に約 8px の横スクロール**になる
   (macOS とヘッドレス Chrome はスクロールバー幅 0 のため再現しない = 実機確認で見落とす)。
   溢れはもともと画見えない領域なので、ここで clip して打ち切る。
   overflow:hidden ではなく clip にしているのは、将来この中に sticky を置いても壊さないため。 */
.section-flow { overflow-x: clip; }

.step-row__card {
  background: #fff;
  /* 右端は版面の外へ抜ける意匠。1200px を超える画面では画面右端まで伸ばす
     (ここを 0 にすると、角丸の無い右辺が画面手前で切れて壊れて見える)。
     溢れの打ち切りは上の .section-flow の overflow-x: clip が担う。 */
  margin-right: calc(-1 * max(0px, (100vw - 1200px) / 2));
  border-radius: 18px 0 0 18px;
  padding: 30px 60px 30px 30px;
  align-self: center;
}
.step-row__card > img { width: 100%; height: auto; display: block; }
.step-row__card--empty { background: none; padding: 0; margin-right: 0; }

.step-number {
  font-family: var(--lp-font-en);
  font-weight: 900;
  font-size: 45.6px;
  line-height: 1;
  /* "STEP" の字送りをデザイン実測 (幅 109.89px) に合わせる。素の描画は 112.5px */
  letter-spacing: -0.65px;
  margin: 0;
  color: var(--lp-ink);
}
/* 12px はデザインの「STEP 右端 → 数字左端」= 12.11px。
   親の letter-spacing が "P" の後ろにも入るぶん (0.65px) を足し戻している。 */
.step-number span { font-size: 60.9px; margin-left: 12.65px; letter-spacing: 0; }
.step-number::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--lp-ink);
  margin-top: 22px;
}
.step-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 38px;
  color: var(--lp-ink);
  margin: 28px 0 0;
}
.step-text {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--lp-ink);
  margin: 14px 0 0;
}
/* リストは行頭「・」をデザインどおり字下げ 20px で置く */
.step-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  color: var(--lp-ink);
}
.step-list li { padding-left: 20px; }
/* デザインは行頭「・」が x=60、文字が x=80。約物ぶんの幅を 20px に固定して字下げを揃える */
.step-list li::before { content: "・"; display: inline-block; width: 20px; margin-left: -20px; }
.step-list li + li { margin-top: 8px; }   /* 項目ピッチ 32 = 行送り 24 + 8 */

.step-row__body .lp-btn--green { margin-top: 14px; }

/* デジタルカタログ */
.flow__catalog { text-align: center; margin-top: 157px; }

@media (max-width: 1023px) {
  .flow__inner { padding: 72px 20px 88px; }
  .flow__title { font-size: 60px; }
  .step-row { grid-template-columns: 1fr; padding-left: 0; min-height: 0; gap: 24px; margin-top: 56px; }
  .step-row + .step-row { margin-top: 56px; }
  .step-row__card { margin-right: 0; border-radius: 12px; padding: 16px; }
  .step-row__card--empty { display: none; }
  .lp-btn--green { width: 100%; height: 60px; font-size: 17px; }
  .step-number { font-size: 30px; }
  .step-number span { font-size: 40px; }
  .step-title { font-size: 21px; line-height: 1.5; margin-top: 20px; }
  .step-text, .step-list { font-size: 15px; line-height: 1.75; }
  .flow__catalog { margin-top: 72px; }
}
@media (max-width: 768px) {
  .flow__title { font-size: 48px; }
  .flow__subtitle { font-size: 17px; line-height: 26px; margin-top: 16px; }
  /* 24px のままだと 390px 幅で 3 行に折れて間延びする。高さは内容なりに伸ばす。 */
  .lp-btn--catalog {
    width: 100%;
    height: auto;
    min-height: 64px;
    padding: 12px 12px 12px 20px;
    gap: 14px;
    font-size: 16px;
    letter-spacing: 0;
  }
  .lp-btn__arrow { width: 36px; height: 36px; }
  .lp-btn__arrow::before { left: 11px; top: 17px; width: 14px; }
  .lp-btn__arrow::after  { left: 16px; top: 13px; width: 9px; height: 9px; }
}

/* =========================================================
   5. 写真バンド + CTA（.cta-band）
========================================================= */
.cta-band {
  position: relative;
  /* 2026-07-31: デザインの写真バンドは素の明るさ。旧実装は地色 #1a1a1a との multiply 合成で
     写真が真っ黒に潰れていた (デザインと比べて別物の暗さになる) ため合成を外した。
     地色は画像が読めなかったときにだけ見える保険。 */
  background: #000 center/cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 40px 24px;
  flex-shrink: 0;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.32);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
/* width:100% を明示する。これが無いと flex の shrink-to-fit で「中の CTA ボタン (420px 固定幅)」
   がそのまま内枠の幅になり、狭幅で親の padding を突き抜けて横スクロールが出る。 */
.cta-band__inner { width: 100%; max-width: 720px; }
/* 中間の写真バンド。デザイン実測: 写真 1200x620 (y4480-5100)・赤 CTA は y4920-5000
   = 上下中央ではなく**下端から 100px** の位置。デザインに暗幕は無いので敷かない。

   2026-08-04 (ユーザ指示で方針変更): **1200px を超える画面でも帯を広げず、写真の実寸のまま中央に置く**。
   旧方針は「高さ 620 で頭打ちにして写真は cover で左右に広がる」だったが、この写真には人物が写っており、
   帯を横に伸ばすと cover が天地を切って**顔が欠ける**。写真の縦横比 (1200:620) を保つ = 切らない。
   ヒーロー (人物なし・帯状の切り出し) とは扱いが違うので、こちらの考え方を横展開しないこと。

   併せて同日、**1200px 超で帯が左端に貼り付いていた不具合**を是正した。原因は `aspect-ratio` と
   `max-height` の組合せで、幅が auto のブロックボックスではブラウザが max-height を縦横比で
   **横方向の上限へ読み替える** (620 x 1200/620 = 1200px)。帯が 1200px に縮んでも margin が 0 だったため
   左寄せになり、中の CTA は帯の中では中央なので「写真もボタンも左へ寄る」という見え方になっていた。
   上限が暗黙に決まるのは追いにくいので、下では width / max-width を**明示**して同じ寸法を宣言している
   (挙動は同じ・読んで分かる形にしただけ)。中央寄せは margin-inline: auto が担う。
   旧 `max-height: 620px` は **max-width が先に効いて到達しないため撤去した** (残しても挙動は変わらないが、
   「今回の原因そのもの」を根拠なく残置することになる)。高さの頭打ちは max-width 1200 x 縦横比で決まる。 */
.cta-band--mid {
  aspect-ratio: 1200 / 620;
  /* width は max-width と重複して見えるが役割が違う — **幅を確定させて縦横比の転写を止める**。
     これが無いと、将来 max-width を外したときに「max-height を横へ読み替える」挙動が復活し、
     直したはずの左寄せが戻る。実測上は max-width が効いている限り非 load-bearing。 */
  width: 100%;
  max-width: 1200px;   /* 写真の実寸。これ以上引き伸ばすと cover が天地を切って顔が欠ける */
  min-height: 0;
  margin-inline: auto; /* 版面より広い画面では帯ごと中央へ */
  justify-content: flex-end;
  padding: 0 24px 100px;
}
.cta-band--mid::before { display: none; }
/* バンド高は 幅/1.935 なので、狭幅では「CTA 64px + 下アキ 100px」を割り込む。
   そこで狭幅だけ上下中央 + アキを詰める。

   ⚠ 2026-08-04: ここで **aspect-ratio を解除しない**。以前は `aspect-ratio: auto` +
   `min-height: 220px` で高さを固定していたが、そうすると縦横比が崩れたぶんを cover が切る。
   768px 幅では表示高 397px ぶんの写真を 220px の窓で見ることになり、上下から 22% ずつ落ちて
   **人物の頭が欠けていた** (広い画面と同じ症状が狭い側にも出ていた)。縦横比を保てば
   高さは 幅/1.935 (768px→397 / 375px→194) となり、どの幅でも写真は全体が出る。
   中身は CTA 64px + 上下アキ 32px x2 = 128px なので、248px 幅までバンドに収まる。 */
@media (max-width: 768px) {
  .cta-band--mid { justify-content: center; padding: 32px 20px; }
}
/* 最終の写真バンド。デザイン実測: 写真 1200x320 (y7830-8150)。
   見出しの字面上端がバンド上端から 60.93、CTA 下端がバンド下端から 77.53 で、
   上下中央ではないため padding-top で頭を合わせる。 */
.cta-band--final {
  aspect-ratio: 1200 / 320;
  max-height: 320px;
  min-height: 0;
  justify-content: flex-start;
  padding: 52.25px 24px 0;
}
/* 級数はデザイン実測 (見出しの CJK 送り 31.2 / 字高 26.75、リード 16px)。
   デザインに文字の影は無いので敷かない (写真そのものが暗い)。 */
.cta-band__title {
  font-weight: 700;
  font-size: 31.2px;
  margin: 0;
  line-height: 1.4;
}
.cta-band__lead {
  font-size: 16px;
  font-weight: 400;
  margin: 7.61px 0 33.31px;
  line-height: 1.6;
}
@media (max-width: 1023px) {
  .cta-band--final { aspect-ratio: auto; max-height: none; justify-content: center; padding: 56px 20px; }
  .cta-band__title { font-size: 22px; line-height: 1.5; }
  .cta-band__lead {
    font-size: 14px;
    margin: 10px 0 24px;
    /* 狭幅で最終行に 1 文字だけ残るのを避ける (対応外のブラウザでは従来どおり素の折返し) */
    text-wrap: balance;
  }
}

/* =========================================================
   6. campionato（コレクション紹介、白 + 青帯）

   2026-07-31: 支給デザインの実測に合わせて再構成。デザイン版面 1200px での実測値:

     セクション     y 5100-7830 (白) → 上アキ 133.63 / 下アキ 150
     ワードマーク   x 191.47 幅 817.05 x 117.11 (中央揃え・ベクタ)
     見出し         39px / 行送り 56.08 / 太字 / #191919 / 中央
     リード         24px / 行送り 44.06 / 中央
     カード         幅 1000 (版面中央・左右 100 アキ)・カード間 40
       1枚目 画像 1000x360 + 青帯 1000x120 (帯の文字 2 行)
       2枚目 画像 1000x300 + 青帯 1000x120
       3枚目 画像 1000x300 + 青帯 1000x120
       4/5枚目 画像 480x300 + 青帯 480x120 を 2 列 (480 + 40 + 480 = 1000)
     青帯の文字     28px / 行送り 40 / 白。5 枚目だけ帯の中に 14px・行送り 22 の注記が入る
========================================================= */
.section-campionato { background: #fff; flex-shrink: 0; }
.campionato__inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: 133.63px 0 150px;
}
/* display / max-width / height は本ファイル冒頭のグローバル規則
   `img { max-width:100%; height:auto; display:block; }` (:52) と同値の再宣言 (打ち消しではない)。
   このクラス固有の指定は margin (中央寄せ) と width (デザイン実測 817.05px) の 2 つだけ。
   同型の再宣言は .lp-hero__logo img / .step-row__card > img / .cmp-card > img にもあるため、
   撤去するならこの 4 箇所を同時に扱うこと (1 箇所だけ削ると新しい不整合が生まれる)。 */
.campionato__brand {
  display: block;
  margin: 0 auto;
  width: 817.05px;
  max-width: 100%;
  height: auto;
}
.campionato__heading {
  text-align: center;
  font-size: 39px;
  font-weight: 700;
  line-height: 56.08px;
  color: var(--lp-ink);
  margin: 87.95px 0 0;
}
.campionato__lead {
  text-align: center;
  font-size: 24px;
  font-weight: 400;
  line-height: 44.06px;
  color: var(--lp-ink);
  margin: 31.41px 0 0;
}

.campionato__cards {
  width: 1000px;
  max-width: 100%;
  margin: 105.57px auto 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.cmp-card { margin: 0; }
.cmp-card > img { width: 100%; height: auto; display: block; }

/* 4・5 枚目は 2 列 (480 + 40 + 480 = 1000) */
.cmp-card__row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

/* 青帯 (キャプション・共通)。高さは 120 固定で、中身を上下中央に置く */
.blue-band {
  background: var(--lp-blue);
  color: #fff;
  text-align: center;
  font-size: 28px;
  font-weight: 500;
  line-height: 40px;
  height: 120px;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.blue-band__note {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  margin-top: 2px;
}

@media (max-width: 1023px) {
  .campionato__inner { padding: 72px 20px 88px; }
  .campionato__brand { width: 560px; }
  .campionato__heading { font-size: 26px; line-height: 1.5; margin-top: 40px; }
  .campionato__lead { font-size: 15px; line-height: 1.9; margin-top: 20px; }
  /* デザインの改行位置は 1200px 版面のためのもの。狭幅では自然折返しに任せる。 */
  .campionato__heading br, .campionato__lead br { display: none; }
  .campionato__cards { margin-top: 44px; gap: 24px; }
  .blue-band { font-size: 18px; line-height: 28px; height: auto; min-height: 80px; padding: 14px 12px; }
  .blue-band__note { font-size: 13px; line-height: 20px; margin-top: 6px; }
}
@media (max-width: 768px) {
  .campionato__brand { width: 100%; }
  .campionato__heading { font-size: 21px; }
  .campionato__lead { font-size: 14px; line-height: 1.85; }
  .cmp-card__row { grid-template-columns: 1fr; gap: 24px; }
  .blue-band { font-size: 16px; line-height: 26px; }
  /* 注記の改行はデザイン版面のためのもの */
  .blue-band__note br { display: none; }
}

/* =========================================================
   7. FOOTER

   デザイン実測: 地色 #E1E6E9・高さ 160・左右アキ 60 / コピーライト帯 黒・高さ 70
     lotto ボックス  x 60  y 8201.70  247.50 x 58  (ヒーロー左下と同一ロックアップ)
     LOTTO JAPAN     Roboto Bold 25px  右端 x1140 (= 右アキ 60)
     住所            14px  右端 x1140  (LOTTO JAPAN のベースラインから 24.18 下)
     コピーライト    16px 白  中央
========================================================= */
.site-footer {
  background: var(--lp-gray-bg);
  color: #323232;
  padding: 0;
  flex-shrink: 0;
}
.site-footer__inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  height: 160px;
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-footer__logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; }
.site-footer__logo-img { width: 247.5px; height: auto; display: block; }
.site-footer__brand-block { text-align: right; }
.site-footer__brand {
  font-family: var(--lp-font-en);
  font-weight: 700;
  font-size: 25px;
  line-height: 1;
  /* 字送りをデザイン実測 (幅 149.93px) に合わせる。素の描画は 162.5px */
  letter-spacing: -1.14px;
  color: #323232;
}
.site-footer__address {
  font-size: 14px;
  line-height: 1;
  color: #323232;
  margin-top: 14px;   /* ベースライン間隔 24.18 = 行の高さぶんを差し引いた値 */
}
.site-footer__copyright {
  background: #000;
  color: #fff;
  text-align: center;
  font-size: 16px;
  line-height: 1.3;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

@media (max-width: 1023px) {
  .site-footer__inner { height: auto; padding: 32px 20px; gap: 20px; }
  .site-footer__logo-img { width: 180px; }
  .site-footer__brand { font-size: 20px; }
  .site-footer__address { font-size: 13px; margin-top: 10px; }
}
@media (max-width: 768px) {
  .site-footer__inner { flex-direction: column; text-align: center; }
  .site-footer__brand-block { text-align: center; }
  .site-footer__copyright { font-size: 13px; height: auto; padding: 18px 16px; }
}

/* =========================================================
   9. デジタルカタログ オーバーレイ (pdf.js)

   ビューアは iframe で読む (pdf.js 公式ビューアを self-host)。
   閉じている間は hidden 属性で完全に外し、開いたときだけ画面を覆う。
========================================================= */
.pdf-overlay[hidden] { display: none; }
.pdf-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;          /* 固定 CTA バー (z-index 40) より前面 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 2vw, 24px);
}
.pdf-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  border: 0;
}
/* stage = 「閉じる行」+「ビューア」の 2 段。閉じるボタンを浮かせて panel に重ねると
   pdf.js ツールバー右端の副メニューを覆ってしまうため、専用の行を与えている。 */
.pdf-overlay__stage {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pdf-overlay__panel {
  flex: 1;
  min-height: 0;         /* flex 子が内容で膨らむのを止める */
  background: #fff;
  border-radius: 8px;
  overflow: hidden;      /* iframe の角を丸めるために要る */
  box-shadow: 0 12px 48px rgba(0, 0, 0, .45);
}
.pdf-overlay__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.pdf-overlay__close {
  align-self: flex-end;
  flex-shrink: 0;
  position: relative;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--lp-red);
  cursor: pointer;
}
.pdf-overlay__close::before,
.pdf-overlay__close::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 21px;
  width: 18px;
  height: 2px;
  background: #fff;
}
.pdf-overlay__close::before { transform: rotate(45deg); }
.pdf-overlay__close::after  { transform: rotate(-45deg); }
.pdf-overlay__close:hover,
.pdf-overlay__close:focus-visible { background: var(--lp-red-dark); }

/* オーバーレイ表示中は背後をスクロールさせない (カタログ / 確認ダイアログ 共通) */
.is-overlay-open, .is-overlay-open body { overflow: hidden; }

@media (max-width: 768px) {
  .pdf-overlay { padding: 8px; }
  .pdf-overlay__panel { border-radius: 4px; }
  .pdf-overlay__close { width: 40px; height: 40px; margin-bottom: 6px; }
  .pdf-overlay__close::before,
  .pdf-overlay__close::after { left: 11px; top: 19px; width: 18px; }
}

/* =========================================================
   10. カスタムオーダー開始前の確認ダイアログ

   案内ボックスの体裁は sim.php の #complete-myModal (.complete-guide) に合わせている:
     max-width 620 / padding 18-24 / 地色 #f7f7f7 / 枠 1px #e0e0e0 / 角丸 8 /
     文字 16px / 行送り 1.9 / 中央揃え
   sim.php 側は Bootstrap の .modal だが LP は Bootstrap を読んでいないため素で組む。
========================================================= */
/* 器はフォーカスの受け皿でしかないので、リングは出さない */
[data-overlay-focus]:focus { outline: none; }

.lp-dialog[hidden] { display: none; }
.lp-dialog {
  position: fixed;
  inset: 0;
  z-index: 110;          /* カタログのオーバーレイ (100) よりさらに前面 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lp-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  border: 0;
}
.lp-dialog__panel {
  position: relative;
  width: 100%;
  max-width: 700px;
  max-height: 100%;
  overflow-y: auto;
  background: #fff;
  border-radius: 10px;
  padding: 40px 24px 32px;
  text-align: center;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .35);
}
/* 「準備中」など、案内文だけでは意図が伝わらないダイアログ用の見出し */
.lp-dialog__title {
  margin: 0 0 20px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--lp-ink);
}

.lp-dialog__guide {
  max-width: 620px;
  margin: 0 auto 28px;
  padding: 18px 24px;
  background: #f7f7f7;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  color: #333;
  font-size: 16px;
  line-height: 1.9;
  text-align: center;
}
.lp-dialog__guide p { margin: 0;
  /* 狭幅で <br> の手前が数文字だけ次行に落ちるのを避ける (600px で 5 文字・320px で 3 文字の
     孤立行を実測)。行数と箱の高さは変わらず、1 行あたりの折返し位置だけが均される。
     .cta-band__lead と同じ手当てで、非対応ブラウザは従来どおり素の折返しになる。
     ⚠ 本宣言は --wide に閉じておらず **#shop-notice にも効く**。19 幅の A/B 実測では
     こちらも行数・箱高とも不変で、孤立行 (55px / 28px / 27px) が消える方向だったため許容している。
     #shop-notice を「準備中」から実文言へ差し替えるときは、この宣言が効いている前提で版面を見ること。 */
  text-wrap: balance;
}
.lp-dialog__guide p + p { margin-top: 14px; }

/* 文面が長いダイアログ用の版面 (現在は #order-notice のみ)。
   2026-08-04: 支給文の 2 行目「同一カテゴリーで複数アイテム（例：…）をオーダーされたい場合は、」は
   16px で 669px あり、既定の版面 (内寸 570px) では <br> の手前で自然折返しが入って
   **支給の改行位置が崩れる**。15px + 内寸 670px にして支給どおり 2 行で収める (余裕 42px)。
   ダイアログ共通ではなく修飾クラスで当てているのは、短文の「準備中」まで広げると
   1 行の文が広い箱の中で間延びするため。 */
.lp-dialog--wide .lp-dialog__panel { max-width: 780px; }
.lp-dialog--wide .lp-dialog__guide { max-width: 720px; font-size: 15px; }
/* 🛑 この 15px が成立する下限は「内寸 630px」— 支給 2 行目の前半が全角 42 字 = 42em ちょうどだから。
   padding / border / max-width をここから 1px でも増やすと、内寸が 630 を割った瞬間に
   **支給の改行位置が崩れる** (崩れても画面はエラーにならないので気付けない)。
   下の 1023px 境界で 14px へ落としているのは、既定値のまま 769-775px に余裕 3px の帯ができていたため
   (768px 側は SP 規則が拾うので、危ないのは境界のすぐ外側だった)。
   境界を新設せず既存の 1023px を再利用している — このファイルの段は 1023 / 768 の 2 本が基本で、
   段を増やすほど「768 と 1023 だけ見ればよい」という後続改修者の前提から漏れる。 */
@media (max-width: 1023px) {
  .lp-dialog--wide .lp-dialog__guide { font-size: 14px; padding: 18px 12px; }
}
/* 確認ボタンは版面の CTA と同じ赤ボタン。幅だけダイアログに合わせて詰める。 */
.lp-dialog__confirm { width: 320px; height: 64px; font-size: 19px; }

.lp-dialog__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.lp-dialog__close::before,
.lp-dialog__close::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 19px;
  width: 18px;
  height: 2px;
  background: #666;
}
.lp-dialog__close::before { transform: rotate(45deg); }
.lp-dialog__close::after  { transform: rotate(-45deg); }
.lp-dialog__close:hover::before,
.lp-dialog__close:hover::after,
.lp-dialog__close:focus-visible::before,
.lp-dialog__close:focus-visible::after { background: #111; }

@media (max-width: 768px) {
  .lp-dialog { padding: 12px; }
  .lp-dialog__panel { padding: 44px 16px 24px; }
  .lp-dialog__title { font-size: 21px; margin-bottom: 14px; }
  .lp-dialog__guide { padding: 14px 14px; font-size: 14px; line-height: 1.85; margin-bottom: 22px; }
  .lp-dialog__confirm { width: 100%; height: 56px; font-size: 16px; }
  /* 狭幅では <br> に加えて自然折返しが入るので、級数は共通の 14px へ戻す
     (--wide の 15px は「支給の改行位置を 1 行に収める」ための広幅用で、収まらない幅では意味がない)。
     左右アキだけ 12px へ詰めて 1 行に入る字数を稼ぐ — 375px 幅の実測で 2 段落とも 5 行 → 4 行になり、
     段落の行数が揃う。セレクタを 2 語にしているのは上の .lp-dialog--wide 指定に負けないため。 */
  .lp-dialog--wide .lp-dialog__panel { padding: 44px 12px 24px; }
  .lp-dialog--wide .lp-dialog__guide { padding: 14px 12px; font-size: 14px; }
}
/* ⚠ **この境界は支給文言そのものに依存する。文言を差し替えたら必ず再実測すること**
   (1 行目の実測長が変われば 413 という数字の根拠は消える。ファイル内で唯一の第 3 段でもある)。
   1 行目「カスタムオーダー希望（DESIGN STUDIO）では、」は 14px で 314px 必要。
   内寸がそれを割る幅 (375px 端末で 301px) では**残り 2 文字だけが次行に落ちる**ので、
   その帯域だけ 13px へ落として 1 行に収める (375px 実測: 段落が 4+4 行 → 3+4 行・孤立行なし)。
   境界を 413px に置いたのは、iPhone 12〜15 の 390px までを含めて余裕を持たせるため
   (390px の内寸は 316px で 14px でも「収まるが 2px しか余らない」= 書体の差で崩れる)。 */
@media (max-width: 413px) {
  .lp-dialog--wide .lp-dialog__guide { font-size: 13px; }
}

/* =========================================================
   8. CTA バー（下部固定）
========================================================= */
.cta-bar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  background: #fff;
  border-top: 1px solid var(--lotto-border);
  padding: 12px 16px 14px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
.cta-bar__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  align-items: stretch;
}
.cta-bar__inner--centered { grid-template-columns: minmax(0, 360px); justify-content: center; }
.cta-bar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--lotto-red);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 0 32px;
  min-height: 56px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease;
  white-space: nowrap;
}
.cta-bar__cta:hover, .cta-bar__cta:focus-visible { background: var(--lotto-red-dark); color: #fff; }
.cta-bar__cta-icon {
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #fff;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .cta-bar { padding: 10px 12px 12px; }
  .cta-bar__inner--centered { grid-template-columns: minmax(0, 100%); }
  .cta-bar__cta { min-height: 48px; padding: 0 24px; }
}