@charset "UTF-8";
/* ==========================================================
   あおもり牛レシートキャンペーン LP
   Figma: TOP_PC (2:455) 1620px 基準
   ========================================================== */

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* カンバス(1620px)右端からはみ出す装飾を確実にクリップする。
     body のみの指定ではビューポートの横スクロールを抑止できない */
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

/* ---------- Design Tokens ----------
   Figma TOP_PC の実測値ベース。各スプリントで
   design context 取得のたびに精緻化する */
:root {
  /* カラーパレット（Figma 実値・2026-07-10 design context で確定） */
  --color-dark: #000000;        /* 背景ダーク（フレーム地） */
  --color-gold: #a78935;        /* ゴールド（円・罫線・注意見出し） */
  --color-gold-bg: #d8bb69;     /* ゴールド背景（対象レシート・NGタイル・金パネル・ピル） */
  --color-white: #ffffff;
  --color-red: #c60a18;         /* 赤アクセント（ボタン・赤枠・スラッシュ・裏面強調） */
  --color-text: #121212;        /* 本文 */

  /* フォント */
  --font-sans: "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", serif;

  /* レイアウト: Figma 1620px カンバス基準の vw スケーリング単位。
     Figma の px 値 × var(--u) で比率を維持する。
     1620px 超のウインドウでは拡大せず原寸(1px)で固定し中央寄せ（.sec-inner） */
  --u: min(calc(100vw / 1620), 1px);
  --canvas-width: 1620px;
  --content-width: 1280px;      /* Figma 内側コンテンツ幅 (x:170〜1450) */
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.75;
  font-feature-settings: "palt";
  overflow-x: hidden; /* --u が 100vw 基準のためスクロールバー分のはみ出しを吸収 */
}

/* LP 全体を 1620px 基準で中央寄せ */
.sec-hero,
.sec-prize,
.sec-steps,
.sec-outline,
.sec-howto-shoot,
.sec-ng-examples,
.sec-campaign-card,
.sec-terms,
.sec-contact,
.sec-footer {
  width: 100%;
  margin: 0 auto;
}

/* 内側コンテンツ共通枠 */
.container {
  max-width: var(--content-width);
  margin: 0 auto;
}

/* セクション内の画像は --u（100vw基準）で寸法指定するため、
   リセットの max-width:100% を解除（スクロールバー幅で縮むのを防ぐ） */
[data-sprint] img {
  max-width: none;
}

/* カンバス（1620px基準）を中央寄せする内側ラッパー。
   セクション自体は全幅（背景ブリード用）、絶対配置の基準はこの要素 */
.sec-inner {
  position: relative;
  width: calc(var(--u) * 1620);
  height: 100%;
  margin: 0 auto;
}

/* ==========================================================
   Sprint 01: ヒーロー＋応募期間帯 (Figma y: 0-2026)
   ========================================================== */
.sec-hero {
  position: relative;
  height: calc(var(--u) * 2026);
  background: #000;
}

.sec-hero :where(img) {
  position: absolute;
  height: auto;
}

.hero-kv {
  left: 0;
  top: 0;
  width: calc(var(--u) * 1620);
}

.hero-logo {
  left: calc(var(--u) * 72);
  top: calc(var(--u) * 66);
  width: calc(var(--u) * 148);
}

.hero-deco-a {
  left: calc(var(--u) * 65);
  top: calc(var(--u) * 1079);
  width: calc(var(--u) * 87);
  opacity: 0.5;
}

.hero-period-title {
  position: absolute;
  left: calc(var(--u) * 556);
  top: calc(var(--u) * 1353);
  width: calc(var(--u) * 509);
  height: calc(var(--u) * 100);
}

.hero-period-title img {
  left: 0;
  top: 0;
  width: 100%;
}

.hero-deco-b {
  left: calc(var(--u) * 1465);
  top: calc(var(--u) * 1374);
  width: calc(var(--u) * 84);
  opacity: 0.5;
}

.hero-schedule {
  left: calc(var(--u) * 170);
  top: calc(var(--u) * 1483);
  width: calc(var(--u) * 1280);
}

/* ==========================================================
   Sprint 02: 賞品セクション (Figma y: 2026-3161 → local y = global - 2026)
   ========================================================== */
.sec-prize {
  position: relative;
  height: calc(var(--u) * 1135);
  background: #000;
  color: var(--color-white);
}

.sec-prize :where(img) {
  position: absolute;
  height: auto;
}

.sec-prize :where(p) {
  position: absolute;
  margin: 0;
}

.prize-title {
  position: absolute;
  left: calc(var(--u) * 632);
  top: 0;
  width: calc(var(--u) * 358);
  height: calc(var(--u) * 100);
}

.prize-title img {
  left: 0;
  top: 0;
  width: 100%;
}

.prize-band {
  left: calc(var(--u) * 201);
  top: calc(var(--u) * 156);
  width: calc(var(--u) * 1219);
}

.prize-note-shipping {
  left: calc(var(--u) * 450);
  top: calc(var(--u) * 350);
  width: calc(var(--u) * 715);
  font-size: calc(var(--u) * 28);
  line-height: calc(var(--u) * 28);
  white-space: nowrap;
}

.prize-amount {
  left: calc(var(--u) * 262);
  top: calc(var(--u) * 473);
  width: calc(var(--u) * 1096);
}

/* 賞品写真: Figma上のクロップ配置を再現（元画像の150.48%幅を左-23.47%/上-15.64%へ）
   ラッパーは div のため absolute を明示（内部imgの%基準・overflowクリップの前提） */
.prize-photo {
  position: absolute;
  left: calc(var(--u) * 858);
  top: calc(var(--u) * 600);
  width: calc(var(--u) * 455);
  height: calc(var(--u) * 351);
  overflow: hidden;
}

.prize-photo img {
  position: absolute;
  left: -23.47%;
  top: -15.64%;
  width: 150.48%;
  height: 130.03%;
}

.prize-note-detail {
  left: calc(var(--u) * 280);
  top: calc(var(--u) * 650);
  width: calc(var(--u) * 530);
  font-size: calc(var(--u) * 20);
  line-height: calc(var(--u) * 36);
  white-space: nowrap;
}

.prize-note-detail span {
  display: inline-block;
  margin-top: calc(var(--u) * 16);
}

.prize-note-photo {
  left: calc(var(--u) * 1230);
  top: calc(var(--u) * 906);
  width: calc(var(--u) * 169);
  font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 28);
  white-space: nowrap;
}

.prize-deco-a {
  left: calc(var(--u) * 1463);
  top: calc(var(--u) * 572);
  width: calc(var(--u) * 140);
  opacity: 0.5;
}

.prize-deco-b {
  left: calc(var(--u) * 1396);
  top: calc(var(--u) * 665);
  width: calc(var(--u) * 76);
  opacity: 0.5;
}

.prize-deco-c {
  left: calc(var(--u) * 112);
  top: calc(var(--u) * 936);
  width: calc(var(--u) * 58);
  opacity: 0.5;
}

/* ==========================================================
   Sprint 03: 応募方法 (Figma y: 3161-4780 → local y = global - 3161)
   カード内要素は local left = global x - 170
   ========================================================== */
.sec-steps {
  position: relative;
  height: calc(var(--u) * 1619);
  background: #000;
}

/* 白カード（金ボーダー5px・Figma実値） */
.steps-card {
  position: absolute;
  left: calc(var(--u) * 170);
  top: 0;
  width: calc(var(--u) * 1280);
  height: calc(var(--u) * 1344);
  background: var(--color-white);
  border-radius: calc(var(--u) * 58);
}

.steps-card::before {
  /* border だと内側の絶対座標系がずれるため擬似要素で描く */
  content: "";
  position: absolute;
  inset: 0;
  border: calc(var(--u) * 5) solid var(--color-gold);
  border-radius: inherit;
  pointer-events: none;
}

.steps-card :where(img),
.steps-card :where(p),
.steps-card :where(span) {
  position: absolute;
  margin: 0;
}

.steps-title {
  position: absolute;
  left: calc(var(--u) * 392);
  top: calc(var(--u) * 82);
  width: calc(var(--u) * 495);
  height: calc(var(--u) * 100);
}

.steps-title img {
  left: 0;
  top: 0;
  width: 100%;
}

/* STEP 円（金） */
.steps-circle {
  position: absolute;
  left: calc(var(--u) * 111);
  width: calc(var(--u) * 168);
  height: calc(var(--u) * 168);
  border-radius: 50%;
  background: var(--color-gold);
}

.steps-circle-1 { top: calc(var(--u) * 302); }
.steps-circle-2 { top: calc(var(--u) * 685); }
.steps-circle-3 { top: calc(var(--u) * 1057); }

.steps-circle img {
  position: absolute;
  width: calc(var(--u) * 80);
}

.steps-circle-1 img { left: calc(var(--u) * 47); top: calc(var(--u) * 30.7); }
.steps-circle-2 img { left: calc(var(--u) * 44); top: calc(var(--u) * 26.3); }
.steps-circle-3 img { left: calc(var(--u) * 45); top: calc(var(--u) * 30); }

/* 縦ドット線（金・7pxドット/25px間隔・Figma実値） */
.steps-dash {
  left: calc(var(--u) * 192);
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 238);
  background-image: radial-gradient(
    circle,
    var(--color-gold) calc(var(--u) * 3.5),
    transparent calc(var(--u) * 3.5)
  );
  background-size: calc(var(--u) * 7) calc(var(--u) * 25);
  background-repeat: repeat-y;
}

.steps-dash-1 { top: calc(var(--u) * 465); }
.steps-dash-2 { top: calc(var(--u) * 841); }

/* 下向き矢印（白マスク＋金三角） */
.steps-arrow {
  left: calc(var(--u) * 171);
  width: calc(var(--u) * 49);
  height: calc(var(--u) * 46);
  background: var(--color-white);
}

.steps-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--u) * 32);
  border-left: calc(var(--u) * 25) solid transparent;
  border-right: calc(var(--u) * 25) solid transparent;
  border-top: calc(var(--u) * 26) solid var(--color-gold);
}

.steps-arrow-1 { top: calc(var(--u) * 552); }
.steps-arrow-2 { top: calc(var(--u) * 921.5); }

/* 横区切り線（グレー2px・Figma実値） */
.steps-divider {
  left: calc(var(--u) * 304);
  width: calc(var(--u) * 861);
  height: 2px;
  background: #707070;
}

.steps-divider-1 { top: calc(var(--u) * 572); }
.steps-divider-2 { top: calc(var(--u) * 942); }

/* STEP テキスト */
.steps-text {
  left: calc(var(--u) * 354);
  color: var(--color-text);
  font-size: calc(var(--u) * 30);
  line-height: calc(var(--u) * 52);
  font-weight: 500;
  white-space: nowrap;
}

.steps-text-1 { top: calc(var(--u) * 275); }
.steps-text-2 { top: calc(var(--u) * 668); }
.steps-text-3 { top: calc(var(--u) * 1038); }

.steps-note-red {
  left: calc(var(--u) * 354);
  top: calc(var(--u) * 805);
  color: red; /* Figma実値: 純赤 */
  font-size: calc(var(--u) * 30);
  line-height: calc(var(--u) * 52);
  font-weight: 500;
  white-space: nowrap;
}

/* STEP アイコン */
.steps-icon-1 { left: calc(var(--u) * 849); top: calc(var(--u) * 242); width: calc(var(--u) * 291); }
.steps-icon-2 { left: calc(var(--u) * 830); top: calc(var(--u) * 609); width: calc(var(--u) * 310); }
.steps-icon-3 { left: calc(var(--u) * 888); top: calc(var(--u) * 1018); width: calc(var(--u) * 252); }

/* カード外装飾 */
.steps-deco {
  position: absolute;
  left: calc(var(--u) * 1450);
  top: calc(var(--u) * 1362);
  width: calc(var(--u) * 97);
}

.steps-deco-sparkle {
  position: absolute;
  left: calc(var(--u) * 54);
  top: calc(var(--u) * 284);
  width: calc(var(--u) * 52);
}

/* ==========================================================
   Sprint 04: 対象のレシート (Figma y: 4780-6470 → local y = global - 4780)
   ========================================================== */
.sec-outline {
  position: relative;
  /* 1690 → 1811: ボタン下の注記3行（.outline-note2）追加分 +121 */
  height: calc(var(--u) * 1811);
  background: var(--color-gold-bg); /* Figma実値 #d8bb69 */
  color: var(--color-text);
}

.sec-outline :where(img),
.sec-outline :where(p),
.sec-outline :where(span) {
  position: absolute;
  margin: 0;
}

.outline-title {
  position: absolute;
  left: calc(var(--u) * 422);
  top: calc(var(--u) * 177.5);
  width: calc(var(--u) * 776);
  height: calc(var(--u) * 100);
}

.outline-title img {
  left: 0;
  top: 0;
  width: 100%;
}

/* 期間ピル */
.outline-period {
  position: absolute;
  left: calc(var(--u) * 199);
  top: calc(var(--u) * 349.5);
  width: calc(var(--u) * 1222);
  height: calc(var(--u) * 120);
  background: var(--color-white);
  border-radius: calc(var(--u) * 60);
}

.outline-period-label {
  left: calc(var(--u) * 58);   /* global 257 - 199 */
  top: calc(var(--u) * 40);    /* global 5169.5 - 5129.5 */
  font-size: calc(var(--u) * 40);
  line-height: calc(var(--u) * 49);
  font-weight: 700;
  white-space: nowrap;
}

.outline-period-divider {
  left: calc(var(--u) * 165.6); /* global 364.6 - 199 */
  top: calc(var(--u) * 21);     /* global 5150.5 - 5129.5 */
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 78);
  background: var(--color-text);
}

.outline-period-dates {
  left: calc(var(--u) * 198);   /* global 397 - 199 */
  top: calc(var(--u) * 37);     /* global 5166.5 - 5129.5 */
  font-size: calc(var(--u) * 46);
  line-height: calc(var(--u) * 49);
  font-weight: 700;
  white-space: nowrap;
}

/* 購入の場合 */
.outline-illust-buy {
  left: calc(var(--u) * 268);
  top: calc(var(--u) * 568.5);
  width: calc(var(--u) * 196);
}

.outline-label-buy {
  position: absolute;
  left: calc(var(--u) * 600);
  top: calc(var(--u) * 576.5);
  width: calc(var(--u) * 301);
  height: calc(var(--u) * 60);
}

.outline-label-buy img,
.outline-label-eat img {
  left: 0;
  top: 0;
  width: 100%;

}

.outline-text-buy {
  left: calc(var(--u) * 600);
  top: calc(var(--u) * 658.5);
  width: calc(var(--u) * 850);
  font-size: calc(var(--u) * 40);
  line-height: calc(var(--u) * 58);
}

/* 破線区切り */
.outline-dash {
  left: calc(var(--u) * 170);
  width: calc(var(--u) * 1280);
  height: 0;
  border-top: 2px dashed var(--color-text);
}

.outline-dash-1 { top: calc(var(--u) * 910); }
.outline-dash-2 { top: calc(var(--u) * 1680); } /* 1559 → 1680: .outline-note2 追加分 */

/* 飲食店の場合 */
.outline-label-eat {
  position: absolute;
  left: calc(var(--u) * 600);
  top: calc(var(--u) * 991.5);
  width: calc(var(--u) * 374);
  height: calc(var(--u) * 60);
}

.outline-text-eat {
  left: calc(var(--u) * 600);
  top: calc(var(--u) * 1076.5);
  width: calc(var(--u) * 850);
  font-size: calc(var(--u) * 40);
  line-height: calc(var(--u) * 58);
}

.outline-illust-eat {
  left: calc(var(--u) * 219);
  top: calc(var(--u) * 1063.25);
  width: calc(var(--u) * 336);
}

.outline-note {
  left: calc(var(--u) * 600);
  top: calc(var(--u) * 1264.5);
  width: calc(var(--u) * 861);
  font-size: calc(var(--u) * 24);
  line-height: calc(var(--u) * 40);
}

/* 対象店舗ボタン（Figma実値: #c60a18・白2px縁・radius 62）
   文言が16文字に増えたため 493 → 640 に拡張（左端 593 固定・右へ伸ばす） */
.outline-btn {
  position: absolute;
  left: calc(var(--u) * 593);
  top: calc(var(--u) * 1395.25);
  width: calc(var(--u) * 640);
  height: calc(var(--u) * 99);
  background: var(--color-red);
  border-radius: calc(var(--u) * 62);
  cursor: pointer;
}

.outline-btn::after {
  /* 白縁。border だと内側の絶対座標系がずれるため擬似要素で描く */
  content: "";
  position: absolute;
  inset: 0;
  border: calc(var(--u) * 2) solid var(--color-white);
  border-radius: inherit;
  pointer-events: none;
}

.outline-btn-text {
  left: calc(var(--u) * 58);   /* global 651 - 593 */
  top: calc(var(--u) * 15);    /* global 6190.25 - 6175.25 */
  color: var(--color-white);
  font-size: calc(var(--u) * 29);
  line-height: calc(var(--u) * 70);
  font-weight: 700;
  white-space: nowrap;
}

.outline-btn-arrow {
  /* デザイン画像実測: ボタン内右側・垂直中央（Figmaノード座標はボタン外でデザインと不一致のため不採用）
     ボタン幅 640 拡張に追随（右端 1233 から 55 内側） */
  left: calc(var(--u) * 1150);
  top: calc(var(--u) * 1428.75);
  width: 0;
  height: 0;
  border-top: calc(var(--u) * 16) solid transparent;
  border-bottom: calc(var(--u) * 16) solid transparent;
  border-left: calc(var(--u) * 28) solid var(--color-white);
}

/* ボタン下の注記3行。1項目=1span（block）にして、SPでの折返し時に
   ぶら下げインデントが項目ごとに効くようにしている（br だと2項目目以降に text-indent が乗らない） */
.outline-note2 {
  left: calc(var(--u) * 600);
  top: calc(var(--u) * 1530);
  width: calc(var(--u) * 1000);
  font-size: calc(var(--u) * 21);
  line-height: calc(var(--u) * 40);
}

.outline-note2 span {
  position: static;
  display: block;
}

/* ==========================================================
   Sprint 05: レシート撮影方法 (Figma y: 6470-8121 → local y = global - 6470)
   ========================================================== */
.sec-howto-shoot {
  position: relative;
  height: calc(var(--u) * 1651);
  background: var(--color-white); /* Figma実値: 白（長方形1492） */
  color: var(--color-text);
}

.sec-howto-shoot :where(img),
.sec-howto-shoot :where(p),
.sec-howto-shoot :where(span) {
  position: absolute;
  margin: 0;
}

.howto-title {
  position: absolute;
  left: calc(var(--u) * 469.3);
  top: calc(var(--u) * 182.6);
  width: calc(var(--u) * 681);
  height: calc(var(--u) * 100);
}

.howto-title img {
  left: 0;
  top: 0;
  width: 100%;
}

/* レシート見本の金角丸背景（Figma 長方形1472。デザイン実測 #d8bb69 radius30） */
.howto-sample-bg {
  left: calc(var(--u) * 288.5);
  top: calc(var(--u) * 382);
  width: calc(var(--u) * 521);
  height: calc(var(--u) * 608);
  background: var(--color-gold-bg);
  border-radius: calc(var(--u) * 30);
}

/* レシート見本の白い紙面（Figma 長方形1497。書き出し画像は紙面が透過のため下敷きを敷く） */
.howto-sample-paper {
  left: calc(var(--u) * 405);
  top: calc(var(--u) * 444.6);
  width: calc(var(--u) * 279);
  height: calc(var(--u) * 482);
  background: var(--color-white);
}

.howto-sample {
  left: calc(var(--u) * 262.5);
  top: calc(var(--u) * 404.6);
  width: calc(var(--u) * 573);
}

.howto-items {
  left: calc(var(--u) * 940);
  top: calc(var(--u) * 397.6);
  font-size: calc(var(--u) * 40); /* Figma実値 (2:551) */
  line-height: calc(var(--u) * 96);
  font-weight: 700;
  white-space: nowrap;
}

.howto-underline {
  left: calc(var(--u) * 918.5);
  width: calc(var(--u) * 440);
  height: 1px;
  background: #6a6a6a; /* デザイン画像実測: 細グレー */
}

.howto-underline-1 { top: calc(var(--u) * 484.6); }
.howto-underline-2 { top: calc(var(--u) * 579.6); }
.howto-underline-3 { top: calc(var(--u) * 675.6); }
.howto-underline-4 { top: calc(var(--u) * 770.6); }

.howto-emphasis {
  left: calc(var(--u) * 918.5);
  top: calc(var(--u) * 834.6);
  font-size: calc(var(--u) * 40);
  line-height: calc(var(--u) * 56);
  font-weight: 700;
  white-space: nowrap;
}

.howto-note {
  left: calc(var(--u) * 288.5);
  top: calc(var(--u) * 1041.6);
  font-size: calc(var(--u) * 30);
  line-height: calc(var(--u) * 49);
  white-space: nowrap;
}

.howto-divider {
  left: calc(var(--u) * 170);
  top: calc(var(--u) * 1176.1);
  width: calc(var(--u) * 1280);
  height: 1px;
  background: var(--color-text);
}

/* 警告アイコン（Figma実値: 白円・黒2px枠・黒「!」） */
.howto-warn-icon {
  left: calc(var(--u) * 593.9);
  top: calc(var(--u) * 1320.6);
  width: calc(var(--u) * 80);
  height: calc(var(--u) * 80);
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--color-white);
  border: calc(var(--u) * 2) solid var(--color-text);
  color: var(--color-text);
  font-size: calc(var(--u) * 60);
  line-height: calc(var(--u) * 74);
  font-weight: 700;
  text-align: center;
}

.howto-fold-text {
  left: calc(var(--u) * 700.4);
  top: calc(var(--u) * 1306.5);
  font-size: calc(var(--u) * 32);
  line-height: calc(var(--u) * 52);
  white-space: nowrap;
}

/* 折り曲げレシート: デザイン画像実測に合わせ再配置
   （PNG内絵柄のオフセットを逆算し、絵柄が global (370,7697) 165×238 に一致する配置） */
.howto-fold-illust {
  left: calc(var(--u) * 301);
  top: calc(var(--u) * 1204);
  width: calc(var(--u) * 285);
  transform: rotate(-8deg); /* デザイン画像の傾きに合わせる */
}

/* 折り曲げ強調のチョンチョン線（パス4678/4680/4681） */
.howto-tick {
  width: calc(var(--u) * 20);
  height: 0;
  border-top: calc(var(--u) * 3) solid var(--color-text);
}

.howto-tick-1 { left: calc(var(--u) * 323); top: calc(var(--u) * 1317); transform: rotate(28deg); }
.howto-tick-2 { left: calc(var(--u) * 314); top: calc(var(--u) * 1361); }
.howto-tick-3 { left: calc(var(--u) * 323); top: calc(var(--u) * 1374); transform: rotate(-28deg); }

.howto-deco-a { left: calc(var(--u) * 1428); top: calc(var(--u) * 294.6); width: calc(var(--u) * 98); opacity: 0.7; }
.howto-deco-b { left: calc(var(--u) * 119); top: calc(var(--u) * 840.6); width: calc(var(--u) * 51); }
.howto-deco-c { left: calc(var(--u) * 1538); top: calc(var(--u) * 1056.1); width: calc(var(--u) * 207); opacity: 0.2; }
.howto-deco-d { left: calc(var(--u) * 1502); top: calc(var(--u) * 1344.1); width: calc(var(--u) * 87); opacity: 0.3; }

/* ==========================================================
   Sprint 06: 悪い例・応募注意 (Figma y: 8121-9419 → local y = global - 8121)
   ========================================================== */
.sec-ng-examples {
  position: relative;
  height: calc(var(--u) * 1298);
  background: var(--color-white); /* Figma実値: 白（長方形1492） */
  color: var(--color-text);
}

.sec-ng-examples :where(img),
.sec-ng-examples :where(p),
.sec-ng-examples :where(span) {
  position: absolute;
  margin: 0;
}

.ng-title {
  position: absolute;
  left: calc(var(--u) * 698.9);
  top: 0;
  width: calc(var(--u) * 201);
  height: calc(var(--u) * 60);
}

.ng-title img {
  left: 0;
  top: 0;
  width: 100%;
}

.ng-intro {
  left: calc(var(--u) * 227.9);
  top: calc(var(--u) * 89);
  font-size: calc(var(--u) * 34);
  line-height: calc(var(--u) * 49);
  white-space: nowrap;
}

.ng-intro br {
  display: none;
}

/* NG例タイル: Figmaデータがデザインと乖離（×マークの形状・レシート合成）していたため、
   デザイン画像(TOP_PC.jpg)から×マーク込みで等倍切り出したものを同座標に配置。
   白背景ごと切り出しているが、セクション背景も白のためシームレス */
.ng-tile {
  top: calc(var(--u) * 139); /* global 8260 - 8121 */
}

.ng-tile-1 { left: calc(var(--u) * 140); width: calc(var(--u) * 450); }
.ng-tile-2 { left: calc(var(--u) * 610); width: calc(var(--u) * 450); }
.ng-tile-3 { left: calc(var(--u) * 1070); width: calc(var(--u) * 460); }

/* NGラベル */
.ng-label {
  top: calc(var(--u) * 618);
  font-size: calc(var(--u) * 40);
  line-height: calc(var(--u) * 49);
  font-weight: 700;
  white-space: nowrap;
}

.ng-label-1 { left: calc(var(--u) * 215.4); }
.ng-label-2 { left: calc(var(--u) * 654.4); }
.ng-label-3 { left: calc(var(--u) * 1114.4); }

/* 応募注意（複数枚・電子レシート） */
.ng-divider {
  left: calc(var(--u) * 218.5);
  width: calc(var(--u) * 1183);
  height: 1px;
  background: var(--color-gold);
}

.ng-divider-1 { top: calc(var(--u) * 902); }
.ng-divider-2 { top: calc(var(--u) * 1110); }

.ng-head {
  color: var(--color-gold); /* Figma実値 #a78935 */
  font-size: calc(var(--u) * 40);
  line-height: calc(var(--u) * 49);
  font-weight: 700;
  white-space: nowrap;
}

/* 文頭の金丸（旧 .ng-bullet 要素を擬似要素化。Figma実測: 見出し左-35px/下14.8px・19px円） */
.ng-head::before {
  content: "";
  position: absolute;
  left: calc(var(--u) * -35);
  top: calc(var(--u) * 14.8);
  width: calc(var(--u) * 19);
  height: calc(var(--u) * 19);
  border-radius: 50%;
  background: var(--color-gold);
}

.ng-head-1 { left: calc(var(--u) * 262.9); top: calc(var(--u) * 787); }
.ng-head-2 { left: calc(var(--u) * 382); top: calc(var(--u) * 996); }

.ng-body {
  font-size: calc(var(--u) * 22);
  line-height: calc(var(--u) * 38);
  white-space: nowrap;
}

.ng-body-1 { left: calc(var(--u) * 393); top: calc(var(--u) * 848); }
.ng-body-2 { left: calc(var(--u) * 276); top: calc(var(--u) * 1056); }

.ng-deco {
  left: calc(var(--u) * 24);
  top: calc(var(--u) * 662.8);
  width: calc(var(--u) * 58);
  opacity: 0.4;
}

/* ==========================================================
   Sprint 07: キャンペーンカード案内 (Figma y: 9419-11173 → local y = global - 9419)
   背景はクリーム→黒の2層（境界 global 10930 = local 1511）
   ========================================================== */
.sec-campaign-card {
  position: relative;
  height: calc(var(--u) * 1754);
  background: linear-gradient(
    to bottom,
    #fff 0,
    #fff calc(var(--u) * 1511),
    #000 calc(var(--u) * 1511),
    #000 100%
  );
  color: var(--color-text);
}

.sec-campaign-card :where(img),
.sec-campaign-card :where(p),
.sec-campaign-card :where(span) {
  position: absolute;
  margin: 0;
}

.card-title {
  position: absolute;
  left: calc(var(--u) * 304.4);
  top: 0;
  width: calc(var(--u) * 1011);
  height: calc(var(--u) * 60);
}

.card-title img {
  left: 0;
  top: 0;
  width: 100%;
}

/* 金パネル（Figma実値: #d8bb69 radius30） */
.card-panel {
  position: absolute;
  left: calc(var(--u) * 170);
  top: calc(var(--u) * 125);
  width: calc(var(--u) * 1280);
  height: calc(var(--u) * 713);
  background: var(--color-gold-bg);
  border-radius: calc(var(--u) * 30);
}

.card-front { left: calc(var(--u) * 69); top: calc(var(--u) * 58); width: calc(var(--u) * 363); }

/* カード裏面＋年月日赤枠はラッパー内の%配置（SPでもそのまま縮尺追従させるため） */
.card-back-wrap {
  left: calc(var(--u) * 473);
  top: calc(var(--u) * 57);
  width: calc(var(--u) * 363);
  height: calc(var(--u) * 599);
}

.card-back {
  left: 0;
  top: 0;
  width: 100%;
}

.card-date-frame {
  left: 10.19%;   /* 37/363 */
  top: 47.41%;    /* 284/599 */
  width: 84.02%;  /* 305/363 */
  height: 12.19%; /* 73/599 */
  border: calc(var(--u) * 5) solid var(--color-red);
  box-sizing: border-box;
}

.card-shop-icon {
  position: absolute;
  left: calc(var(--u) * 987.3);
  top: calc(var(--u) * 72.5);
  width: calc(var(--u) * 113.9);
  height: calc(var(--u) * 90);
  z-index: 1;
}

.card-shop-icon img {
  position: absolute;
  width: 100%;
  height: 100%;
}

.card-bubble {
  position: absolute;
  left: calc(var(--u) * 876.3);
  top: calc(var(--u) * 153.6);
  width: calc(var(--u) * 342);
  height: calc(var(--u) * 146);
  background: var(--color-white);
  border-radius: calc(var(--u) * 32);
}

.card-bubble-text {
  left: calc(var(--u) * 35);
  top: calc(var(--u) * 23);
  width: calc(var(--u) * 272);
  font-size: calc(var(--u) * 34);
  line-height: calc(var(--u) * 52);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.card-bubble-tail {
  left: calc(var(--u) * 856);
  top: calc(var(--u) * 275.7);
  width: calc(var(--u) * 111);
  height: calc(var(--u) * 81);
  background: var(--color-white);
  clip-path: polygon(100% 0, 30% 0, 0 100%);
}

.card-phone {
  left: calc(var(--u) * 920);
  top: calc(var(--u) * 357);
  width: calc(var(--u) * 299);
}

/* パネル下の案内 */
.card-shoot-text {
  left: calc(var(--u) * 249);
  top: calc(var(--u) * 893);
  font-size: calc(var(--u) * 42);
  line-height: calc(var(--u) * 60);
  font-weight: 700;
  white-space: nowrap;
}

.card-shoot-text .red {
  position: relative;
  /* 赤字＋文字に追従する赤下線（固定座標の線はフォント幅差でずれるため廃止） */
  color: var(--color-red);
  border-bottom: calc(var(--u) * 3) solid var(--color-red);
  padding-bottom: calc(var(--u) * 2);
}

.card-shoot-note {
  left: calc(var(--u) * 249);
  top: calc(var(--u) * 1023);
  font-size: calc(var(--u) * 24);
  line-height: calc(var(--u) * 40);
  white-space: nowrap;
}

.card-divider {
  left: calc(var(--u) * 170.5);
  top: calc(var(--u) * 1083.5);
  width: calc(var(--u) * 1280);
  height: 0;
  border-top: 3px dashed var(--color-text);
}

.card-form-text {
  left: calc(var(--u) * 249);
  top: calc(var(--u) * 1139);
  font-size: calc(var(--u) * 40);
  line-height: calc(var(--u) * 65);
  white-space: nowrap;
}

/* 2行目の「を入力いただきます。」はピルの直後に明示配置
   （全角スペースによる位置合わせはフォント幅差でずれるため廃止） */
.card-form-text2 {
  left: calc(var(--u) * 1007);
  top: calc(var(--u) * 1203);
  font-size: calc(var(--u) * 40);
  line-height: calc(var(--u) * 65);
  white-space: nowrap;
}

.card-pill {
  top: calc(var(--u) * 1205);
  height: calc(var(--u) * 60);
  background: var(--color-gold-bg);
  border-radius: calc(var(--u) * 30);
}

.card-pill-shop { left: calc(var(--u) * 249); width: calc(var(--u) * 195); }
.card-pill-menu { left: calc(var(--u) * 478); width: calc(var(--u) * 492); }

.card-pill-text,
.card-pill-dot {
  top: calc(var(--u) * 1202);
  font-size: calc(var(--u) * 40);
  line-height: calc(var(--u) * 65);
  font-weight: 700;
  white-space: nowrap;
}

.card-pill-text-shop { left: calc(var(--u) * 284); }
.card-pill-dot { left: calc(var(--u) * 452); top: calc(var(--u) * 1204); font-weight: 400; }
.card-pill-text-menu { left: calc(var(--u) * 518); }

.card-deco-a { left: calc(var(--u) * 58); top: calc(var(--u) * 849); width: calc(var(--u) * 125); opacity: 0.2; }
.card-deco-b { left: calc(var(--u) * 1400); top: calc(var(--u) * 1210); width: calc(var(--u) * 135); opacity: 0.4; }
.card-deco-c { left: calc(var(--u) * 1512); top: calc(var(--u) * 1155); width: calc(var(--u) * 79); opacity: 0.4; }

/* ==========================================================
   Sprint 08: 応募規約 (Figma y: 11173-12065 → local y = global - 11173)
   ========================================================== */
.sec-terms {
  position: relative;
  /* 892: ボタン非表示時。同意チェック行＋応募ボタン＋応募開始案内（.terms-agree /
     .terms-apply-btn / .terms-start-notice）を表示する現状は、案内文の枠（白背景・赤枠）
     下端から次セクションまでの余白を確保するため 1220 が必要 */
  height: calc(var(--u) * 1220);
  background: #000;
}

.sec-terms :where(img) {
  position: absolute;
}

.terms-title {
  position: absolute;
  left: calc(var(--u) * 556);
  top: 0;
  width: calc(var(--u) * 508);
  height: calc(var(--u) * 100);
}

.terms-title img {
  left: 0;
  top: 0;
  width: 100%;
}

.terms-box {
  position: absolute;
  left: calc(var(--u) * 170);
  top: calc(var(--u) * 126);
  width: calc(var(--u) * 1280);
  height: calc(var(--u) * 492);
  background: var(--color-white);
  border: 2px solid var(--color-gold);
  box-sizing: border-box;
  overflow-y: auto; /* 規約全文（クライアント支給待ち）流し込みに備える */
}

.terms-text {
  position: absolute;
  left: calc(var(--u) * 41);
  top: calc(var(--u) * 35.5);
  width: calc(var(--u) * 1188);
  margin: 0;
  padding-bottom: calc(var(--u) * 32);
  color: var(--color-text);
  font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 32);
}

.terms-deco-a { left: calc(var(--u) * 135); top: calc(var(--u) * 25); width: calc(var(--u) * 35); opacity: 0.5; }
.terms-deco-b { left: calc(var(--u) * 1518); top: calc(var(--u) * 767); width: calc(var(--u) * 101); opacity: 0.5; }
.terms-deco-c { left: calc(var(--u) * 57); top: calc(var(--u) * 846); width: calc(var(--u) * 92); opacity: 0.4; }

/* ----------------------------------------------------------
   応募規約への同意チェック＋応募ボタン
   参考: _archive/aomori-mugitoro-doreha2026.com（同 1620px 設計）
   同意チェックが入るまでボタンをグレー化し、遷移を抑止する
   （抑止の実体は js/main.js。ここでは見た目のみ）
   ---------------------------------------------------------- */
.terms-agree {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 686);
  width: 100%;
  text-align: center;
}

.terms-check {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 18);
  color: var(--color-white);
  font-size: calc(var(--u) * 32);
  line-height: calc(var(--u) * 44);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

/* input 本体は視覚的にのみ隠す（キーボード操作・フォーカスは維持） */
.terms-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.terms-checkmark {
  position: relative;
  flex-shrink: 0;
  display: block;
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  background: var(--color-white);
  border: calc(var(--u) * 3) solid var(--color-gold-bg);
  border-radius: calc(var(--u) * 6);
  transition: background-color 0.15s;
}

.terms-checkmark::after {
  content: "";
  position: absolute;
  left: calc(var(--u) * 11);
  top: calc(var(--u) * 1);
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 22);
  border: solid var(--color-white);
  border-width: 0 calc(var(--u) * 5) calc(var(--u) * 5) 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s;
}

.terms-checkbox:checked + .terms-checkmark { background: var(--color-gold-bg); }
.terms-checkbox:checked + .terms-checkmark::after { transform: rotate(45deg) scale(1); }

.terms-checkbox:focus-visible + .terms-checkmark {
  outline: calc(var(--u) * 3) solid var(--color-white);
  outline-offset: calc(var(--u) * 4);
}

/* 応募開始前: チェック自体を操作不可にする（8/15 0:00まで） */
.terms-check:has(.terms-checkbox:disabled) { cursor: not-allowed; }
.terms-checkbox:disabled + .terms-checkmark { opacity: 0.5; }

.terms-apply-btn {
  position: absolute;
  left: calc(var(--u) * 410);
  top: calc(var(--u) * 790);
  width: calc(var(--u) * 800);
  height: calc(var(--u) * 160);
  background: var(--color-red);
  border-radius: calc(var(--u) * 95);
  box-shadow: 0 0 calc(var(--u) * 28) rgba(216, 187, 105, 0.6); /* 参考サイトの金グロー相当 */
  cursor: pointer;
}

.terms-apply-btn::after {
  /* 白縁。border だと内側の絶対座標系がずれるため擬似要素で描く（.outline-btn と同手法） */
  content: "";
  position: absolute;
  inset: 0;
  border: calc(var(--u) * 3) solid var(--color-white);
  border-radius: inherit;
  pointer-events: none;
}

.terms-apply-btn-text {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  /* 矢印の分だけ左に寄せて光学中央に置く（参考ボタンの文字位置に準拠） */
  padding-right: calc(var(--u) * 52);
  transform: translateY(-50%);
  text-align: center;
  color: var(--color-white);
  font-size: calc(var(--u) * 56);
  line-height: 1;
  font-weight: 700;
}

.terms-apply-btn-arrow {
  position: absolute;
  right: calc(var(--u) * 199);
  top: 50%;
  width: 0;
  height: 0;
  margin-top: calc(var(--u) * -20);
  border-top: calc(var(--u) * 20) solid transparent;
  border-bottom: calc(var(--u) * 20) solid transparent;
  border-left: calc(var(--u) * 34) solid var(--color-white);
}

/* 未同意時: グレー＋押せない見た目 */
.sec-terms:has(.terms-checkbox:not(:checked)) .terms-apply-btn {
  background: #d5d5d5;
  box-shadow: none;
  cursor: not-allowed;
}

/* 未同意で hover したとき（SPはタップ時に .is-warn）に出る吹き出し */
/* 高さ 44u + margin 10u = 54u。同意チェック行（下端 730u）とボタン（上端 790u）の
   間隔 60u に収めて、吹き出しが「応募規約に同意する。」に被らないようにしている */
.terms-apply-btn-msg {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: calc(var(--u) * 10);
  padding: calc(var(--u) * 8) calc(var(--u) * 22);
  transform: translateX(-50%);
  background: var(--color-red);
  border-radius: calc(var(--u) * 8);
  color: var(--color-white);
  font-size: calc(var(--u) * 20);
  line-height: 1.4;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
  pointer-events: none;
}

.terms-apply-btn-msg::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: calc(var(--u) * 8) solid transparent;
  border-top-color: var(--color-red);
}

.sec-terms:has(.terms-checkbox:not(:checked)) .terms-apply-btn:hover .terms-apply-btn-msg,
.terms-apply-btn.is-warn .terms-apply-btn-msg {
  opacity: 1;
  visibility: visible;
}

/* 応募開始（8/15 0:00）前であることの案内文。ボタン直下に中央揃えで表示 */
.terms-start-notice {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * 990);
  width: calc(var(--u) * 900);
  margin: 0;
  padding: calc(var(--u) * 24) calc(var(--u) * 40);
  box-sizing: border-box;
  transform: translateX(-50%);
  background: var(--color-white);
  border: calc(var(--u) * 3) solid var(--color-red);
  border-radius: calc(var(--u) * 12);
  text-align: center;
  color: var(--color-red);
  font-size: calc(var(--u) * 22);
  line-height: calc(var(--u) * 36);
  font-weight: 700;
}

/* ==========================================================
   Sprint 09: お問い合せ先 (Figma y: 12065-12570 → local y = global - 12065)
   ========================================================== */
.sec-contact {
  position: relative;
  height: calc(var(--u) * 505);
  background: #000;
  color: var(--color-white);
}

.sec-contact :where(img),
.sec-contact :where(p),
.sec-contact :where(a),
.sec-contact :where(span) {
  position: absolute;
  margin: 0;
}

.contact-title {
  position: absolute;
  left: calc(var(--u) * 519);
  top: 0;
  width: calc(var(--u) * 583);
  height: calc(var(--u) * 100);
}

.contact-title img {
  left: 0;
  top: 0;
  width: 100%;
}

.contact-org {
  left: calc(var(--u) * 399.8);
  top: calc(var(--u) * 168);
  width: calc(var(--u) * 826);
  font-size: calc(var(--u) * 46);
  line-height: calc(var(--u) * 57);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.contact-tel-label {
  left: calc(var(--u) * 402);
  top: calc(var(--u) * 270);
  font-size: calc(var(--u) * 32);
  line-height: calc(var(--u) * 49);
  white-space: nowrap;
}

.contact-tel-number {
  left: calc(var(--u) * 479);
  top: calc(var(--u) * 265);
  font-size: calc(var(--u) * 44);
  line-height: calc(var(--u) * 49);
  font-weight: 500;
  letter-spacing: calc(var(--u) * 2.64);
  white-space: nowrap;
}

.contact-vline {
  left: calc(var(--u) * 809.5);
  top: calc(var(--u) * 267.5);
  width: 1px;
  height: calc(var(--u) * 51);
  background: var(--color-white);
}

.contact-hours-label {
  left: calc(var(--u) * 830);
  top: calc(var(--u) * 252);
  font-size: calc(var(--u) * 20);
  line-height: calc(var(--u) * 49);
  white-space: nowrap;
}

.contact-hours {
  left: calc(var(--u) * 922);
  top: calc(var(--u) * 250);
  font-size: calc(var(--u) * 28);
  line-height: calc(var(--u) * 49);
  white-space: nowrap;
}

.contact-hours-note {
  left: calc(var(--u) * 820);
  top: calc(var(--u) * 284);
  font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 49);
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.contact-note {
  left: calc(var(--u) * 440);
  top: calc(var(--u) * 346);
  font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 49);
  white-space: nowrap;
}

/* ==========================================================
   Sprint 09: フッター (Figma y: 12570-12827 → local y = global - 12570)
   ========================================================== */
.sec-footer {
  position: relative;
  height: calc(var(--u) * 257);
  background: #000;
  color: var(--color-white);
}

.footer-band {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--u) * 1620);
  height: calc(var(--u) * 187);
  background: var(--color-white);
}

.footer-org {
  position: absolute;
  left: calc(var(--u) * 468);
  top: calc(var(--u) * 42);
  width: calc(var(--u) * 686);
}

.footer-copyright {
  position: absolute;
  left: calc(var(--u) * 596);
  top: calc(var(--u) * 199);
  margin: 0;
  font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 40);
  white-space: nowrap;
}

/* ==========================================================
   SP専用要素（PC では非表示）
   ========================================================== */
.hero-kv-sp,
.hero-schedule-sp,
.card-title-sp,
.howto-sample-sp {
  display: none;
}

/* ==========================================================
   SP レイアウト（768px 以下・390px設計・縦積みフロー）
   PC の絶対配置カンバスをフローに戻し、一般的なSP構成で再定義する
   ========================================================== */
@media (max-width: 768px) {
  :root {
    /* SP スケール単位（390px設計・大画面スマホは1.15倍まで） */
    --s: min(calc(100vw / 390), 1.15px);
  }

  /* ---------- 全体リセット ----------
     PC側の .sec-* img 等（詳細度0,1,1）に勝てるようタグ別にも列挙する */
  [data-sprint] *,
  [data-sprint] img,
  [data-sprint] p,
  [data-sprint] span,
  [data-sprint] a,
  [data-sprint] div,
  [data-sprint] h2,
  [data-sprint] h3,
  [data-sprint] figure {
    position: static;
  }

  [data-sprint] {
    height: auto;
  }

  .sec-inner {
    width: 100%;
  }

  [data-sprint] img {
    max-width: 100%;
    height: auto;
  }

  /* PC専用・装飾・SPで不要な要素 */
  .hero-kv, .hero-schedule, .hero-deco,
  .prize-deco,
  .steps-dash, .steps-arrow, .steps-deco, .steps-deco-sparkle,
  .howto-underline, .howto-tick, .howto-sample-bg, .howto-sample-paper, .howto-sample, .howto-deco,
  .ng-deco,
  .card-title, .card-bubble-tail, .card-deco, .card-pill, .outline-btn-arrow,
  .terms-deco,
  .contact-vline {
    display: none;
  }

  /* SP専用要素の表示 */
  .hero-kv-sp { display: block; width: 100%; }
  .hero-schedule-sp { display: flex; }
  .card-title-sp { display: block; }
  .howto-sample-sp { display: block; }

  /* ---------- hero ---------- */
  .sec-hero {
    padding-bottom: calc(var(--s) * 40);
  }

  .sec-hero .hero-logo {
    position: absolute;
    left: calc(var(--s) * 12);
    top: calc(var(--s) * 12);
    width: calc(var(--s) * 64);
  }

  .hero-period-title {
    width: calc(var(--s) * 240);
    height: auto;
    margin: calc(var(--s) * 36) auto calc(var(--s) * 20);
  }

  .hero-period-title img {
    width: 100%;
  }

  .hero-schedule-sp {
    flex-direction: column;
    align-items: center;
    gap: calc(var(--s) * 32);
    width: calc(var(--s) * 330);
    margin: 0 auto;
  }

  .hero-schedule-sp img { width: 86%; }
  .hero-schedule-sp img.on { width: 100%; } /* 開催中の弾を強調（矢印付き大サイズ） */

  /* ---------- prize ---------- */
  .sec-prize {
    padding: calc(var(--s) * 40) calc(var(--s) * 20) calc(var(--s) * 48);
    text-align: center;
  }

  .prize-title { width: calc(var(--s) * 130); height: auto; margin: 0 auto calc(var(--s) * 20); }
  .prize-title img { width: 100%; }
  .prize-band { width: 100%; margin-bottom: calc(var(--s) * 14); }

  .prize-note-shipping {
    width: auto;
    font-size: calc(var(--s) * 12);
    line-height: 1.6;
    white-space: normal;
    margin-bottom: calc(var(--s) * 20);
  }

  .prize-amount { width: 96%; margin-bottom: calc(var(--s) * 20); }

  .sec-prize .prize-photo {
    position: relative;
    left: 0;
    top: 0;
    width: calc(var(--s) * 280);
    height: calc(var(--s) * 216);
    margin: 0 auto calc(var(--s) * 14);
    overflow: hidden;
  }

  .sec-prize .prize-photo img {
    position: absolute;
    max-width: none;
    left: -23.47%;
    top: -15.64%;
    width: 150.48%;
    height: 130.03%;
  }

  .prize-note-detail {
    display: inline-block;
    width: auto;
    font-size: calc(var(--s) * 13);
    line-height: 1.8;
    white-space: normal;
    text-align: left;
  }

  .prize-note-photo {
    width: auto;
    font-size: calc(var(--s) * 12);
    line-height: 1.5;
    margin-top: calc(var(--s) * 8);
    padding-left: calc(var(--s) * 13);
    text-align: left;
  }

  /* ---------- steps（応募方法） ---------- */
  .sec-steps {
    padding: calc(var(--s) * 36) calc(var(--s) * 16) calc(var(--s) * 48);
  }

  .sec-steps .steps-card {
    position: relative;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--s) * 28) calc(var(--s) * 18) calc(var(--s) * 36);
    border-radius: calc(var(--s) * 22);
  }

  .steps-card::before {
    border-width: calc(var(--s) * 3);
  }

  .steps-title { order: 0; width: calc(var(--s) * 180); height: auto; margin-bottom: calc(var(--s) * 26); }
  .steps-title img { width: 100%; }

  .steps-circle {
    width: calc(var(--s) * 68);
    height: calc(var(--s) * 68);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--s) * 14);
  }

  .steps-circle img { width: calc(var(--s) * 30); }

  .steps-text {
    font-size: calc(var(--s) * 16);
    line-height: 1.75;
    text-align: center;
    white-space: normal;
    margin-bottom: calc(var(--s) * 10);
  }

  .steps-text br {
    display: none;
  }

  .steps-text br.sp {
    display: inline-block;
  }

  .steps-note-red {
    font-size: calc(var(--s) * 14);
    line-height: 1.5;
    text-align: center;
    margin-bottom: calc(var(--s) * 12);
  }

  .steps-icon { width: calc(var(--s) * 180); margin-bottom: calc(var(--s) * 6); }

  .steps-divider {
    width: 82%;
    height: 1px;
    margin: calc(var(--s) * 22) 0;
  }

  /* 縦積み順: STEP1 → 区切り → STEP2 → 区切り → STEP3 */
  .steps-circle-1 { order: 1; }
  .steps-text-1   { order: 2; }
  .steps-icon-1   { order: 3; }
  .steps-divider-1{ order: 4; }
  .steps-circle-2 { order: 5; }
  .steps-text-2   { order: 6; }
  .steps-note-red { order: 7; }
  .steps-icon-2   { order: 8; }
  .steps-divider-2{ order: 9; }
  .steps-circle-3 { order: 10; }
  .steps-text-3   { order: 11; }
  .steps-icon-3   { order: 12; }

  /* ---------- outline（対象のレシート） ---------- */
  .sec-outline .sec-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--s) * 36) calc(var(--s) * 20) calc(var(--s) * 44);
  }

  .outline-title { order: 0; width: 88%; height: auto; }
  .outline-title img { width: 100%; }

  .outline-period {
    order: 1;
    width: 100%;
    height: auto;
    padding: calc(var(--s) * 12) calc(var(--s) * 8);
    border-radius: calc(var(--s) * 16);
    text-align: center;
    margin: calc(var(--s) * 22) 0 calc(var(--s) * 26);
  }

  .outline-period-label {
    font-size: calc(var(--s) * 14);
    line-height: 1.4;
    font-weight: 700;
  }

  .outline-period-dates {
    font-size: calc(var(--s) * 15);
    line-height: 1.5;
    white-space: normal;
  }

  .outline-label-buy { order: 2; width: calc(var(--s) * 140); height: auto; margin-bottom: calc(var(--s) * 12); }
  .outline-illust-buy { order: 3; width: calc(var(--s) * 88); margin-bottom: calc(var(--s) * 12); }
  .outline-text-buy { order: 4; }
  .outline-dash-1 { order: 5; }
  .outline-label-eat { order: 6; width: calc(var(--s) * 172); height: auto; margin-bottom: calc(var(--s) * 12); }
  .outline-illust-eat { order: 7; width: calc(var(--s) * 150); margin-bottom: calc(var(--s) * 12); }
  .outline-text-eat { order: 8; }
  .outline-note { order: 9; }
  .outline-btn { order: 10; }
  .outline-note2 { order: 11; }
  .outline-dash-2 { order: 12; }

  .outline-label-buy img,
  .outline-label-eat img { position: relative;left: calc(var(--s) * -20);width: 100%; }

  .outline-text-buy,
  .outline-text-eat {
    width: 100%;
    font-size: calc(var(--s) * 16);
    line-height: 1.8;
    text-align: center;
    font-weight: 500;
  }

  .outline-dash {
    width: 100%;
    margin: calc(var(--s) * 24) 0;
  }

  .outline-note {
    width: 100%;
    font-size: calc(var(--s) * 12);
    line-height: 1.7;
    margin-top: calc(var(--s) * 18);
  }

  .outline-note2 {
    width: 100%;
    font-size: calc(var(--s) * 11);
    line-height: 1.7;
    margin-top: calc(var(--s) * 18);
    text-align: left;
  }

  /* 折り返した2行目以降を ※ の後ろに揃える（ぶら下げインデント）。
     項目ごとの block に掛けないと2項目目以降で効かない */
  .outline-note2 span {
    padding-left: 1em;
    text-indent: -1em;
  }

  .outline-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--s) * 310);
    height: calc(var(--s) * 54);
    border-radius: calc(var(--s) * 27);
    margin-top: calc(var(--s) * 26);
  }

  .outline-btn::after {
    border: none;
  }

  .outline-btn-text {
    font-size: calc(var(--s) * 15);
    line-height: 1;
  }

  .outline-btn-text::after {
    content: "▶";
    font-size: 0.7em;
    margin-left: calc(var(--s) * 10);
  }

  /* ---------- howto-shoot（レシート撮影方法） ---------- */
  .sec-howto-shoot {
    padding: calc(var(--s) * 40) calc(var(--s) * 20) calc(var(--s) * 44);
    text-align: center;
  }

  .howto-title { width: calc(var(--s) * 240); height: auto; margin: 0 auto calc(var(--s) * 20); }
  .howto-title img { width: 100%; }

  .howto-sample-sp {
    width: calc(var(--s) * 270);
    margin: 0 auto calc(var(--s) * 20);
  }

  .howto-items {
    /* ①②を左列・③④を右列の2カラムで表示 */
    display: block;
    columns: 2;
    column-gap: calc(var(--s) * 12);
    width: 80%;
    font-size: calc(var(--s) * 18);
    margin: 0 auto;
    line-height: 2.3;
    text-align: left;
    margin-bottom: calc(var(--s) * 8);
  }

  .howto-emphasis {
    font-size: calc(var(--s) * 16);
    line-height: 1.6;
    white-space: normal;
    margin-bottom: calc(var(--s) * 16);
  }

  .howto-note {
    font-size: calc(var(--s) * 13);
    line-height: 1.7;
    white-space: normal;
    text-align: left;
  }

  .howto-divider {
    display: block;
    width: 100%;
    margin: calc(var(--s) * 22) auto;
  }

  /* 警告アイコンと案内文を横並び（PCデザインと同じ構図） */
  .howto-warn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: calc(var(--s) * 40);
    height: calc(var(--s) * 40);
    flex-shrink: 0;
    border-width: calc(var(--s) * 2);
    font-size: calc(var(--s) * 26);
    line-height: 1;
    margin-right: calc(var(--s) * 12);
  }

  .howto-fold-text {
    display: inline-block;
    vertical-align: middle;
    font-size: calc(var(--s) * 14);
    line-height: 1.7;
    white-space: normal;
    text-align: left;
    margin-bottom: 0;
  }

  /* 横並びの行とイラストの間隔 */
  .howto-fold-illust {
    margin-top: calc(var(--s) * 32);
  }

  .howto-fold-illust {
    width: calc(var(--s) * 150);
    margin: calc(var(--s) * 8) auto 0;
  }

  /* ---------- ng-examples（悪い例） ---------- */
  .sec-ng-examples {
    padding: calc(var(--s) * 40) calc(var(--s) * 20) calc(var(--s) * 44);
    text-align: center;
  }

  .ng-title { width: calc(var(--s) * 112); height: auto; margin: 0 auto calc(var(--s) * 14); }
  .ng-title img { width: 100%;position: relative;left: calc(var(--s) * -20); }

  .ng-intro {
    font-size: calc(var(--s) * 14);
    line-height: 1.7;
    white-space: normal;
    margin-bottom: 0;
  }

  .ng-intro br {
    display: inline-block;
  }

  .ng-pair {
    width: calc(var(--s) * 270);
    margin: 0 auto calc(var(--s) * 0);
  }

  .ng-tile { width: 100%; }

  .ng-label {
    font-size: calc(var(--s) * 16);
    line-height: 1.4;
    white-space: normal;
    margin-top: calc(var(--s) * 2);
  }

  .ng-divider {
    display: block;
    width: 100%;
    margin: calc(var(--s) * 24) auto;
  }

  .sec-ng-examples .ng-head {
    position: relative;
    left: 0;
    top: 0;
    font-size: calc(var(--s) * 14.5);
    line-height: 1.5;
    white-space: normal;
    text-align: left;
    padding-left: calc(var(--s) * 18); /* 丸ぶんのインデント（折返し行も揃う） */
  }

  .ng-head::before {
    /* 丸は絶対配置（1行目の縦中央に合わせる） */
    position: absolute;
    left: 0;
    top: calc(var(--s) * 5);
    width: calc(var(--s) * 12);
    height: calc(var(--s) * 12);
  }

  .ng-body {
    font-size: calc(var(--s) * 14);
    line-height: 1.7;
    white-space: normal;
    text-align: left;
    margin-top: calc(var(--s) * 8);
  }

  /* ---------- campaign-card ---------- */
  .sec-campaign-card {
    background: var(--color-white);
    padding: calc(var(--s) * 40) calc(var(--s) * 16) calc(var(--s) * 44);
    text-align: center;
  }

  .card-title-sp {
    font-size: calc(var(--s) * 17);
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-text);
    margin-bottom: calc(var(--s) * 20);
  }

  .card-panel {
    width: auto;
    height: auto;
    padding: calc(var(--s) * 22) calc(var(--s) * 16) calc(var(--s) * 26);
    border-radius: calc(var(--s) * 16);
  }

  .card-front {
    width: calc(var(--s) * 240);
    margin-bottom: calc(var(--s) * 18);
  }

  .sec-campaign-card .card-back-wrap {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    width: calc(var(--s) * 240);
    height: auto;
    margin: 0 auto calc(var(--s) * 18);
  }

  .card-back {
    display: block;
    width: 100%;
  }

  .sec-campaign-card .card-date-frame {
    position: absolute;
    border-width: calc(var(--s) * 3);
  }

  .sec-campaign-card .card-shop-icon {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    width: calc(var(--s) * 56);
    height: calc(var(--s) * 48);
    margin: calc(var(--s) * 6) auto 0;
  }

  .sec-campaign-card .card-shop-icon img {
    position: absolute;
    left: 0;
    top: calc(var(--s) * 14);
    width: 100%;
    height: 100%;
  }

  .card-bubble {
    display: inline-block;
    width: auto;
    height: auto;
    padding: calc(var(--s) * 8) calc(var(--s) * 18);
    border-radius: calc(var(--s) * 16);
    margin-top: calc(var(--s) * 8);
  }

  .card-bubble-text {
    width: auto;
    font-size: calc(var(--s) * 13);
    line-height: 1.6;
  }

  .card-phone {
    display: block;
    width: calc(var(--s) * 180);
    margin: calc(var(--s) * 16) auto 0;
  }

  .card-shoot-text {
    font-size: calc(var(--s) * 15);
    line-height: 1.8;
    white-space: normal;
    margin-top: calc(var(--s) * 22);
  }

  .card-shoot-text .red {
    border-bottom-width: calc(var(--s) * 2);
    padding-bottom: calc(var(--s) * 1);
  }

  .card-shoot-note {
    width: 100%;
    font-size: calc(var(--s) * 12);
    line-height: 1.7;
    white-space: normal;
    margin-top: calc(var(--s) * 10);
    text-align: center;
  }

  .card-divider {
    display: block;
    width: 100%;
    margin: calc(var(--s) * 24) auto;
    border-top-width: 2px;
  }

  .card-form-text {
    font-size: calc(var(--s) * 13);
    line-height: 1.7;
    white-space: normal;
    margin-bottom: calc(var(--s) * 10);
  }

  .card-pill-text,
  .card-pill-dot,
  .card-form-text2 {
    display: inline-block;
    font-size: calc(var(--s) * 13);
    line-height: 1.5;
    white-space: nowrap;
  }

  .card-pill-text {
    background: var(--color-gold-bg);
    border-radius: calc(var(--s) * 14);
    padding: calc(var(--s) * 4) calc(var(--s) * 12);
    margin: calc(var(--s) * 2);
  }

  /* ---------- terms（応募規約） ---------- */
  .sec-terms {
    padding: calc(var(--s) * 40) calc(var(--s) * 16) calc(var(--s) * 44);
  }

  .terms-title { width: calc(var(--s) * 170); height: auto; margin: 0 auto calc(var(--s) * 18); }
  .terms-title img { width: 100%; }

  .terms-box {
    width: 100%;
    height: calc(var(--s) * 300);
  }

  .terms-text {
    width: auto;
    padding: calc(var(--s) * 12) calc(var(--s) * 14);
    font-size: calc(var(--s) * 11);
    line-height: 1.7;
  }

  /* 同意チェック＋応募ボタン。
     [data-sprint] * { position: static } のリセットに勝つため、
     絶対配置が必要な要素（input / 吹き出し）と、その基準となる要素を再指定する */
  .terms-agree {
    width: 100%;
    text-align: center;
    margin-top: calc(var(--s) * 22);
  }

  .terms-check {
    gap: calc(var(--s) * 10);
    font-size: calc(var(--s) * 14);
    line-height: 1.5;
  }

  .terms-checkbox { position: absolute; }

  /* position は `[data-sprint] span / a`（詳細度 0,1,1）のリセットに負けるため、
     .sec-terms を前置して 0,2,0 に上げる */
  .sec-terms .terms-checkmark { position: relative; }
  .sec-terms .terms-apply-btn-msg { position: absolute; }

  /* relative のままだと PC の left/top（410u / 790u）がオフセットとして効くので明示的に戻す */
  .sec-terms .terms-apply-btn {
    position: relative;
    left: 0;
    top: 0;
  }

  .terms-checkmark {
    width: calc(var(--s) * 20);
    height: calc(var(--s) * 20);
    border-width: calc(var(--s) * 2);
    border-radius: calc(var(--s) * 4);
  }

  .terms-checkmark::after {
    left: calc(var(--s) * 5);
    top: 0;
    width: calc(var(--s) * 6);
    height: calc(var(--s) * 11);
    border-width: 0 calc(var(--s) * 3) calc(var(--s) * 3) 0;
  }

  .terms-apply-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--s) * 300);
    height: calc(var(--s) * 70);
    border-radius: calc(var(--s) * 35);
    /* 40s: 吹き出し（約29s＋margin 8s）が同意チェック行に被らない高さを確保する */
    margin: calc(var(--s) * 40) auto 0;
    box-shadow: 0 0 calc(var(--s) * 12) rgba(216, 187, 105, 0.6);
  }

  .terms-apply-btn::after { border: none; }

  .terms-apply-btn-text {
    width: auto;
    padding-right: 0;
    transform: none;
    font-size: calc(var(--s) * 22);
    line-height: 1;
  }

  /* PC用の三角は畳み、SPは既存 .outline-btn と同じ文字ベースの矢印にする */
  .terms-apply-btn-arrow { display: none; }

  .terms-apply-btn-text::after {
    content: "▶";
    font-size: 0.6em;
    margin-left: calc(var(--s) * 12);
  }

  .terms-apply-btn-msg {
    margin-bottom: calc(var(--s) * 8);
    padding: calc(var(--s) * 6) calc(var(--s) * 12);
    border-radius: calc(var(--s) * 4);
    font-size: calc(var(--s) * 11);
    line-height: 1.5;
  }

  .terms-apply-btn-msg::after { border-width: calc(var(--s) * 5); }

  .terms-start-notice {
    position: static;
    width: auto;
    margin: calc(var(--s) * 20) 0 0;
    transform: none;
    padding: calc(var(--s) * 14) calc(var(--s) * 13);
    box-sizing: border-box;
    background: var(--color-white);
    border: calc(var(--s) * 2) solid var(--color-red);
    border-radius: calc(var(--s) * 8);
    color: var(--color-red);
    font-size: calc(var(--s) * 12);
    line-height: 1.7;
    font-weight: 700;
  }

  /* ---------- contact ---------- */
  .sec-contact {
    padding: calc(var(--s) * 40) calc(var(--s) * 16) calc(var(--s) * 36);
    text-align: center;
  }

  .contact-title { width: calc(var(--s) * 190); height: auto; margin: 0 auto calc(var(--s) * 22); }
  .contact-title img { width: 100%; }

  .contact-org {
    width: auto;
    font-size: calc(var(--s) * 17);
    line-height: 1.5;
    white-space: normal;
    margin-bottom: calc(var(--s) * 14);
  }

  .contact-tel-label {
    display: inline-block;
    font-size: calc(var(--s) * 15);
    line-height: 1.4;
    margin-right: calc(var(--s) * 8);
  }

  .contact-tel-number {
    display: inline-block;
    font-size: calc(var(--s) * 30);
    line-height: 1.3;
    letter-spacing: calc(var(--s) * 1.5);
  }

  .contact-hours-label {
    display: inline-block;
    font-size: calc(var(--s) * 12);
    line-height: 1.5;
    margin: calc(var(--s) * 8) calc(var(--s) * 6) 0 0;
  }

  .contact-hours {
    display: inline-block;
    font-size: calc(var(--s) * 15);
    line-height: 1.5;
  }

  .contact-hours-note {
    display: block;
    font-size: calc(var(--s) * 10.5);
    line-height: 1.6;
    white-space: normal;
    margin-top: calc(var(--s) * 4);
  }

  .contact-note {
    font-size: calc(var(--s) * 10.5);
    line-height: 1.7;
    white-space: normal;
    margin-top: calc(var(--s) * 16);
  }

  /* ---------- footer ---------- */
  .footer-band {
    width: 100%;
    height: auto;
    padding: calc(var(--s) * 16) 0 calc(var(--s) * 14);
  }

  .footer-org {
    display: block;
    width: calc(var(--s) * 270);
    margin: 0 auto;
  }

  .footer-copyright {
    width: auto;
    font-size: calc(var(--s) * 10);
    line-height: 1.5;
    text-align: center;
    padding: calc(var(--s) * 14) 0 calc(var(--s) * 18);
  }
}