/* ================================================================
   RESET & BASE
================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Ro GSan Serif Std', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro',
               'メイリオ', Meiryo, 'MS Pゴシック', sans-serif;
  color: #0d2340;
  background-color: #ffffff;
  background-image: url('img/bg_grid.png');
  background-repeat: repeat;
  background-size: auto;
}

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

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

/* SP専用<br>：PCでは非表示 */
.sp-only {
  display: none;
}

/* ================================================================
   PAGE WRAPPER
================================================================ */
.page-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* ================================================================
   FADE-IN (IntersectionObserver)
================================================================ */
.js-fade {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ================================================================
   HERO
================================================================ */
.hero {
  width: 100%;
  display: flex;
  justify-content: center;
  background: transparent;
  position: relative;
  z-index: 2;
}

.hero__img {
  width: 1280px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* ================================================================
   CATCH：リード文（HEROとINTROの間）
================================================================ */
.catch {
  width: 100%;
  /* PC: padding 48px 24px 0 @ 1280, scale down */
  padding: clamp(28px, calc(28px + (48 - 28) * ((100vw - 480px) / 800)), 48px)
           clamp(16px, calc(16px + (24 - 16) * ((100vw - 480px) / 800)), 24px)
           0px
           clamp(16px, calc(16px + (24 - 16) * ((100vw - 480px) / 800)), 24px);
  background-image: url('img/spot_bg.png');
  background-repeat: repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  z-index: 1;
  /* PC: margin-top -36px @ 1280, -20px @ 480 */
  margin-top: min(-20px, calc(-20px + (-16) * ((100vw - 480px) / 800)));
  /* padding-top: 48px @ 480, 84px @ 1280 */
  padding-top: clamp(48px, calc(48px + (84 - 48) * ((100vw - 480px) / 800)), 84px);
  min-height: clamp(200px, calc(200px + (330 - 200) * ((100vw - 480px) / 800)), 330px);
}

.catch__inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: clamp(200px, calc(200px + (330 - 200) * ((100vw - 480px) / 800)), 330px);
}

.catch__text-wrap {
  flex: 0 0 auto;
  text-align: left;
  margin-bottom: 34px;
}

.catch__icon-wrap {
  position: absolute;
  right: 3%;
  transform: translateY(20%);
}

/* 1100px以下ではテキストとアイコンが被るため、テキストを上に移動しアイコンを下げる */
@media (max-width: 1100px) and (min-width: 481px) {
  .catch__inner {
    align-items: flex-start;
    padding-top: clamp(10px, calc(10px + (30 - 10) * ((100vw - 480px) / 620)), 30px);
  }
  .catch__icon-wrap {
    bottom: 0;
    top: auto;
    transform: translateY(30%);
  }
  .catch__icon {
    width: clamp(90px, calc(90px + (180 - 90) * ((100vw - 480px) / 620)), 180px);
  }
}

.catch__icon {
  /* PC: 239px @ 1280, ~120px @ 480 */
  width: clamp(120px, calc(120px + (239 - 120) * ((100vw - 480px) / 800)), 239px);
  height: auto;
}

.catch__text-img {
  /* PC: max-width 631px (SVG viewBox width) */
  width: clamp(380px, calc(380px + (631 - 280) * ((100vw - 480px) / 800)), 631px);
  height: auto;
  display: block;
}


/* ================================================================
   INTRO（最終表示再構築・競合ゼロ版）
================================================================ */

.intro {
  width: 100%;
  /* PC: padding 0 24px 56px @ 1280 */
  padding: 0
           clamp(20px, calc(20px + (24 - 20) * ((100vw - 480px) / 800)), 24px)
           clamp(36px, calc(36px + (56 - 36) * ((100vw - 480px) / 800)), 56px);
  position: relative;
  overflow: hidden;
  /* PC: margin-top 110px @ 1280 */
  margin-top: clamp(50px, calc(50px + (110 - 50) * ((100vw - 480px) / 800)), 110px);
}

/* クローバー装飾 */
.intro::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  /* PC: 338px @ 1280 */
  width: clamp(180px, calc(180px + (338 - 180) * ((100vw - 480px) / 800)), 338px);
  height: clamp(180px, calc(180px + (338 - 180) * ((100vw - 480px) / 800)), 338px);
  background: url('img/image 14.png') no-repeat center / contain;
  pointer-events: none;
  z-index: 0;
}

.intro::after {
  content: '';
  position: absolute;
  bottom: 220px;
  left: clamp(20px, calc(20px + (130 - 20) * ((100vw - 480px) / 800)), 130px);
  /* PC: 146px @ 1280 */
  width: clamp(80px, calc(80px + (146 - 80) * ((100vw - 480px) / 800)), 146px);
  height: clamp(80px, calc(80px + (146 - 80) * ((100vw - 480px) / 800)), 146px);
  background: url('img/image 13.png') no-repeat center / contain;
  pointer-events: none;
  z-index: 0;
}

.intro__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* PC: gap 24px @ 1280 */
  gap: clamp(14px, calc(14px + (24 - 14) * ((100vw - 480px) / 800)), 24px);
  position: relative;
  z-index: 1;
}

/* ======================
   テキスト（SVG画像）
====================== */

.intro__text-wrap {
  width: 100%;
  text-align: center;
}

.intro__text-img {
  /* PC: max-width 953px (SVG viewBox width) */
  width: clamp(340px, calc(340px + (953 - 340) * ((100vw - 480px) / 800)), 953px);
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ======================
   景品画像
====================== */

.intro__img-wrap {
  width: 100%;
  text-align: center;
}

.intro__img-wrap img {
  max-width: 868px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ======================
   商品一覧（SVG画像）
====================== */

.intro__items-wrap {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.intro__items-img {
  /* PC: max-width 1000px (SVG viewBox width) */
  width: clamp(340px, calc(340px + (1000 - 340) * ((100vw - 480px) / 800)), 1000px);
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ================================================================
   APPLICATION: 応募方法
================================================================ */
.application {
  width: 100%;
  background-image: url('img/bg.png');
  background-repeat: repeat;
  background-size: auto;
  /* PC: padding 72px 24px 80px @ 1280 */
  padding: clamp(44px, calc(44px + (72 - 44) * ((100vw - 480px) / 800)), 72px)
           clamp(16px, calc(16px + (24 - 16) * ((100vw - 480px) / 800)), 24px)
           clamp(48px, calc(48px + (80 - 48) * ((100vw - 480px) / 800)), 80px);
}

.application__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.application__heading {
  /* PC: margin-bottom 52px @ 1280 */
  margin-bottom: clamp(24px, calc(24px + (52 - 24) * ((100vw - 480px) / 800)), 52px);
}

.application__heading img {
  /* PC: max-width 640px @ 1280 */
  max-width: clamp(280px, calc(280px + (640 - 280) * ((100vw - 480px) / 800)), 640px);
  width: 100%;
  height: auto;
}

/* ================================================================
   STEP: 枠PNG + 中身オーバーレイ
================================================================ */
.step {
  width: 100%;
  max-width: 912px;
  /* PC: margin-bottom 20px */
  margin-bottom: clamp(14px, calc(14px + (20 - 14) * ((100vw - 480px) / 800)), 20px);
}

.step__frame-wrap {
  position: relative;
  width: 100%;
}

.step__frame {
  width: 100%;
  height: auto;
  display: block;
}

/* 枠PNG内側に中身を絶対配置 */
.step__body {
  position: absolute;
  left: 3.5%;
  right: 3.5%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step--1 .step__body {
  top: auto;
  bottom: 14%;
  align-items: flex-end;
}

.step--2 .step__body {
  top: auto;
  bottom: 18%;
}
.step--3 .step__body {
  top: 15%;
  bottom: 9%;
}
/* --- STEP共通 --- */
.step__content {
  width: 100%;
  display: flex;
  align-items: center;
  /* PC: gap 24px @ 1280, 8px @ 480 */
  gap: clamp(8px, calc(8px + (24 - 8) * ((100vw - 480px) / 800)), 24px);
}

.step__icon-wrap {
  flex-shrink: 0;
}

/* PC版STEP1: 牛アイコンをbody左下にabsolute配置 */
.step--1 .step__icon-wrap {
  position: absolute;
  left: 0%;
  bottom: 5%;
  z-index: 2;
}

/* 900px以下では牛アイコンを縮小して表示を維持 */
@media (max-width: 900px) and (min-width: 481px) {
  .step--1 .step__icon-wrap {
    left: -2%;
    bottom: 2%;
  }
  .step--1 .step__cow {
    width: clamp(50px, calc(50px + (80 - 50) * ((100vw - 480px) / 420)), 80px);
  }
}

/* SP用牛アイコン：PCでは非表示 */
.step__cow--sp {
  display: none;
}

.step--1 .step__cow {
  /* PC: 120px @ 1280 */
  width: clamp(80px, calc(80px + (120 - 80) * ((100vw - 480px) / 800)), 120px);
  height: auto;
}

/* STEP1: テキスト＆ボタンを中央寄せ */
.step--1 .step__content {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(4px, calc(4px + (10 - 4) * ((100vw - 480px) / 800)), 10px);
}

.step--1 .step__text-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, calc(6px + (20 - 6) * ((100vw - 480px) / 800)), 20px);
}

.step__text-wrap {
  flex: 1;
  min-width: 0;
}

.step__title {
  /* PC: 36px @ 1280, scale down more aggressively to 18px @ 480 */
  font-size: clamp(18px, calc(18px + (36 - 18) * ((100vw - 480px) / 800)), 36px);
  font-weight: 900;
  color: #0d2340;
  line-height: 1.3;
  margin-bottom: clamp(4px, calc(4px + (10 - 4) * ((100vw - 480px) / 800)), 10px);
  /* nowrap only above 900px where frame is wide enough */
  white-space: normal;
  text-shadow:
    -3px -3px 0 #fff, 3px -3px 0 #fff,
    -3px  3px 0 #fff, 3px  3px 0 #fff,
     0   -3px 0 #fff, 0    3px 0 #fff,
    -3px  0   0 #fff, 3px  0   0 #fff;
}

/* タイトル内Xアイコン（インライン） */
.step__x-icon {
  display: inline-block;
  /* PC: 30px @ 1280 */
  width: clamp(20px, calc(20px + (30 - 20) * ((100vw - 480px) / 800)), 30px);
  height: clamp(20px, calc(20px + (30 - 20) * ((100vw - 480px) / 800)), 30px);
  vertical-align: -3px;
  margin: 0 4px;
}

/* --- ボタン（画像ベース） --- */
.step__btn {
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease;
  border: none;
  outline: none;
  background: none;
  padding: 0;
  box-shadow: none;
}

.step__btn:hover {
  opacity: 0.85;
}

.step__btn-img {
  /* PC: 360px @ 1280, 160px @ 480 */
  width: clamp(160px, calc(160px + (360 - 160) * ((100vw - 480px) / 800)), 360px);
  height: auto;
  display: block;
}

/* 枠右上アイコン（共通） */
.step__corner-icon {
  position: absolute;
  height: auto;
}

/* STEP2 コーナーアイコン */
.step__corner-icon--step2 {
  top: 6%;
  right: -1.5%;
  /* PC: 120px @ 1280 */
  width: clamp(50px, calc(50px + (120 - 50) * ((100vw - 480px) / 800)), 120px);
}

/* STEP3 コーナーアイコン */
.step__corner-icon--step3 {
  top: 6%;
  /* PC: -6.5% @ 1280 → about -83px, 0px @ 480 — use px-based fluid */
  right: clamp(-83px, calc(0px + (-83) * ((100vw - 480px) / 800)), 0px);
  /* PC: 195px @ 1280 */
  width: clamp(70px, calc(50px + (195 - 50) * ((100vw - 480px) / 800)), 195px);
}

/* --- STEP2/3 縦並び（共通） --- */
.step__content--col {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.step__content--col .step__title {
  margin-bottom: 0;
  white-space: normal;
}

/* STEP2 縦並び */
.step__content--step2 {
  /* PC: gap 54px @ 1280, 10px @ 480 */
  gap: clamp(10px, calc(10px + (54 - 10) * ((100vw - 480px) / 800)), 54px);
}

/* STEP3 縦並び */
.step__content--step3 {
  gap: clamp(4px, calc(4px + (12 - 4) * ((100vw - 480px) / 800)), 12px);
}

/* STEP2 牛乳画像 — 動的にビューポートに追従 */
.step__milks img {
  /* PC: 750px @ 1280, 300px @ 480 */
  width: clamp(300px, calc(300px + (750 - 300) * ((100vw - 480px) / 800)), 750px);
  max-width: 90%;
  margin: auto;
  height: auto;
}

/* STEP3 スマホ画像 — 動的にビューポートに追従 */
.step__phones img {
  /* PC: 607px @ 1280, 250px @ 480 — フレームPNGの縮小に追従 */
  width: clamp(250px, calc(250px + (607 - 250) * ((100vw - 480px) / 800)), 607px);
  max-width: 100%;
  height: auto;
}

/* 応募完了 */
.application__complete {
  /* PC: margin-top 48px @ 1280 */
  margin-top: clamp(24px, calc(24px + (48 - 24) * ((100vw - 480px) / 800)), 48px);
  display: flex;
  justify-content: center;
}

.application__complete img {
  /* PC: max-width 420px @ 1280 */
  max-width: clamp(220px, calc(220px + (420 - 220) * ((100vw - 480px) / 800)), 420px);
  width: 100%;
  height: auto;
}

/* ================================================================
   RULES: 募集要項 / 応募規約
================================================================ */
.rules {
  width: 100%;
  background-image: url('img/bg.png');
  background-repeat: repeat;
  background-size: auto;
  /* PC: padding 0 24px 80px */
  padding: 0
           clamp(16px, calc(16px + (24 - 16) * ((100vw - 480px) / 800)), 24px)
           clamp(48px, calc(48px + (80 - 48) * ((100vw - 480px) / 800)), 80px);
}

.rules__inner {
  /* PC: max-width 650px */
  max-width: 650px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* PC: gap 40px */
  gap: clamp(24px, calc(24px + (40 - 24) * ((100vw - 480px) / 800)), 40px);
}

.rules__box {
  width: 100%;
}

.rules__box-frame {
  position: relative;
  width: 100%;
}

.rules__box-svg {
  width: 100%;
  height: auto;
  display: block;
}

.rules__box-body {
  position: absolute;
  /* ヘッダーの下から始まる (SVG viewBox: 650×501, ヘッダー: ~84/501 ≈ 16.8%) */
  top: 17.5%;
  left: 1.5%;
  right: 1.5%;
  bottom: 1.5%;
  overflow-y: auto;
  padding: clamp(10px, calc(10px + (20 - 10) * ((100vw - 480px) / 800)), 20px)
           clamp(10px, calc(10px + (30 - 10) * ((100vw - 480px) / 800)), 30px);
  /* 0.8rem=12.8px @ 480, 0.95rem=15.2px @ 1280 */
  font-size: clamp(12.8px, calc(12.8px + (15.2 - 12.8) * ((100vw - 480px) / 800)), 15.2px);
  line-height: 1.8;
  color: #0d2340;
}

/* 募集要項: 定義リスト */
.rules__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 24px;
}

.rules__dl dt {
  font-weight: 700;
  white-space: nowrap;
  padding: 4px 0;
}

.rules__dl dd {
  padding: 4px 0;
}

.rules__dl dd ul,
.rules__dl dd ol {
  margin-top: 4px;
}

/* 募集要項: 賞品リスト */
.rules__list {
  list-style: disc;
  padding-left: 1.5em;
}

.rules__list li {
  line-height: 1.8;
}

/* 応募規約: 見出し */
.rules__heading {
  font-size: 1rem;
  font-weight: 900;
  color: #0d2340;
  margin-top: 24px;
  margin-bottom: 8px;
}

.rules__heading:first-child {
  margin-top: 0;
}

/* 応募規約: ■付きリスト */
.rules__terms-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 8px;
}

.rules__terms-list li {
  position: relative;
  padding-left: 1.2em;
  line-height: 1.8;
}

.rules__terms-list li::before {
  content: "■";
  position: absolute;
  left: 0;
  top: 0;
}

/* 応募規約: 番号付きリスト */
.rules__ol {
  list-style: none;
  padding-left: 0;
  counter-reset: rules-counter;
  margin-bottom: 8px;
}

.rules__ol li {
  position: relative;
  padding-left: 2.5em;
  line-height: 1.8;
  counter-increment: rules-counter;
}

.rules__ol li::before {
  content: "(" counter(rules-counter) ")";
  position: absolute;
  left: 0;
  top: 0;
}

/* 注記 */
.rules__note {
  font-size: 0.85rem;
  color: #666;
  margin-top: 4px;
}

/* ================================================================
   FOLLOW ME
================================================================ */
.follow {
  width: 100%;
  background: #2DAAE2;
  /* PC: padding 56px 0 48px @ 1280 */
  padding: clamp(36px, calc(36px + (56 - 36) * ((100vw - 480px) / 800)), 56px)
           0
           clamp(32px, calc(32px + (48 - 32) * ((100vw - 480px) / 800)), 48px);
  overflow: hidden;
}

.follow__heading-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, calc(8px + (12 - 8) * ((100vw - 480px) / 800)), 12px);
  /* PC: margin-bottom 36px */
  margin-bottom: clamp(20px, calc(20px + (36 - 20) * ((100vw - 480px) / 800)), 36px);
  position: relative;
}

.follow__heading {
  font-family: 'Kiwi Maru', serif;
  /* PC: 70px @ 1280 */
  font-size: clamp(40px, calc(40px + (70 - 40) * ((100vw - 480px) / 800)), 70px);
  font-weight: 500;
  color: #fff;
  text-shadow:
    3px 0 0 #0d2340, -3px 0 0 #0d2340,
    0 3px 0 #0d2340, 0 -3px 0 #0d2340,
    2px 2px 0 #0d2340, -2px -2px 0 #0d2340,
    2px -2px 0 #0d2340, -2px 2px 0 #0d2340;
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 100%;
}

.follow__cow {
  /* PC: 96px @ 1280 */
  width: clamp(48px, calc(48px + (96 - 48) * ((100vw - 480px) / 800)), 96px);
  height: auto;
  position: absolute;
  /* PC: right 23% @ 1280 ≈ 294px, 110px @ 480 — FOLLOWテキスト右端のすぐ右 */
  right: clamp(110px, calc(110px + (294 - 110) * ((100vw - 480px) / 800)), 294px);
  /* PC: bottom -70px @ 1280, -30px @ 480 — use max() for negative values */
  bottom: min(-30px, calc(-30px + (-40) * ((100vw - 480px) / 800)));
  transform: rotate(12deg);
  z-index: 2;
}

/* 無限スライダー */
.follow__slider {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  width: 100%;
  user-select: none;
}

.follow__track {
  display: flex;
  flex-shrink: 0;
  animation: slider-loop 28s linear infinite;
  will-change: transform;
}

@keyframes slider-loop {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.follow__item {
  flex-shrink: 0;
  /* PC: 240px @ 1280 */
  width: clamp(140px, calc(140px + (240 - 140) * ((100vw - 480px) / 800)), 240px);
  height: clamp(140px, calc(140px + (240 - 140) * ((100vw - 480px) / 800)), 240px);
  margin: 0 clamp(4px, calc(4px + (8 - 4) * ((100vw - 480px) / 800)), 8px);
}

.follow__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* フォローするボタン */
.follow__btn-wrap {
  display: flex;
  justify-content: center;
  /* PC: margin-top 36px */
  margin-top: clamp(20px, calc(20px + (36 - 20) * ((100vw - 480px) / 800)), 36px);
}

.follow__btn {
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease;
  border: none;
  outline: none;
  background: none;
  padding: 0;
  box-shadow: none;
}

.follow__btn-img {
  /* PC: 360px @ 1280 */
  width: clamp(220px, calc(220px + (360 - 220) * ((100vw - 480px) / 800)), 360px);
  height: auto;
  display: block;
}

/* ================================================================
   RESPONSIVE - WIDE PC (min-width: 901px) step title nowrap
================================================================ */
@media (min-width: 901px) {
  .step__title {
    white-space: nowrap;
  }
}

/* ================================================================
   RESPONSIVE - TABLET (max-width: 900px)
================================================================ */

@media (max-width: 900px) {
  .step__content {
    flex-direction: column;
    text-align: center;
  }
  .step__btn {
    padding: 10px 20px;
  }
}

/* ================================================================
   SMARTPHONE (max-width: 480px)
   SP base: 480px, fluid down to 375px
   Formula: clamp(val_375, calc(val_375 + (val_480 - val_375) * ((100vw - 375px) / 105)), val_480)
================================================================ */
@media (max-width: 480px) {

  /* --- PAGE WRAPPER --- */
  .page-wrapper {
    max-width: 480px;
  }

  /* SP専用<br>を表示 */
  .sp-only {
    display: initial;
  }

  /* --- HERO --- */
  .hero {
    z-index: 2;
  }

  .hero__img {
    width: 100%;
  }

  /* --- CATCH --- */
  .catch {
    /* SP: margin-top -16px, padding 24px 12px 0 */
    /* SP: margin-top -16px @ 480, -13px @ 375 */
    margin-top: 0px;
    padding: clamp(19px, calc(19px + (24 - 19) * ((100vw - 375px) / 105)), 24px)
             clamp(10px, calc(10px + (12 - 10) * ((100vw - 375px) / 105)), 12px)
             0;
    padding-top: clamp(19px, calc(24px + (32 - 24) * ((100vw - 375px) / 105)), 32px);
    min-height: auto;
  }

  .catch__inner {
    /* SP: min-height 160px @ 480, ~125px @ 375 */
    min-height: clamp(125px, calc(125px + (160 - 125) * ((100vw - 375px) / 105)), 160px);
    align-items: flex-start;
  }

  .catch__text-img {
    /* SP: 382px SVG viewBox, scale between 375-480 */
    width: clamp(280px, calc(280px + (382 - 280) * ((100vw - 375px) / 105)), 382px);
  }

  .catch__icon {
    /* SP: 90px @ 480, ~70px @ 375 */
    width: clamp(70px, calc(70px + (90 - 70) * ((100vw - 375px) / 105)), 90px);
  }

  .catch__icon-wrap {
    right: 0;
    bottom: 0;
    transform: translateY(20%);
  }

  /* --- INTRO --- */
  .intro {
    /* SP: margin-top 40px @ 480, ~31px @ 375 */
    margin-top: clamp(31px, calc(31px + (40 - 31) * ((100vw - 375px) / 105)), 40px);
    padding: 0
             clamp(16px, calc(16px + (20 - 16) * ((100vw - 375px) / 105)), 20px)
             clamp(22px, calc(22px + (28 - 22) * ((100vw - 375px) / 105)), 28px);
  }

  .intro::before {
    /* SP: 173px @ 480, ~135px @ 375 */
    width: clamp(135px, calc(135px + (173 - 135) * ((100vw - 375px) / 105)), 173px);
    height: clamp(135px, calc(135px + (173 - 135) * ((100vw - 375px) / 105)), 173px);
  }

  .intro::after {
    /* SP: 75px @ 480, ~59px @ 375 */
    width: clamp(59px, calc(59px + (75 - 59) * ((100vw - 375px) / 105)), 75px);
    height: clamp(59px, calc(59px + (75 - 59) * ((100vw - 375px) / 105)), 75px);
    bottom: 80px;
    left: clamp(8px, calc(8px + (10 - 8) * ((100vw - 375px) / 105)), 10px);
  }

  .intro__inner {
    gap: clamp(8px, calc(8px + (10 - 8) * ((100vw - 375px) / 105)), 10px);
  }

  .intro__text-img {
    /* SP: 347px SVG viewBox, scale between 375-480 */
    width: clamp(280px, calc(280px + (347 - 280) * ((100vw - 375px) / 105)), 347px);
  }

  .intro__img-wrap img {
    max-width: 100%;
  }

  /* 商品リスト：SVG画像 */
  .intro__items-img {
    /* SP: 420px SVG viewBox, scale between 375-480 */
    width: clamp(300px, calc(300px + (420 - 300) * ((100vw - 375px) / 105)), 420px);
  }

  /* --- APPLICATION --- */
  .application {
    /* SP: padding 36px 16px 40px @ 480 */
    padding: clamp(28px, calc(28px + (36 - 28) * ((100vw - 375px) / 105)), 36px)
             clamp(12px, calc(12px + (16 - 12) * ((100vw - 375px) / 105)), 16px)
             clamp(31px, calc(31px + (40 - 31) * ((100vw - 375px) / 105)), 40px);
  }

  .application__heading {
    /* SP: margin-bottom 20px @ 480 */
    margin-bottom: clamp(16px, calc(16px + (20 - 16) * ((100vw - 375px) / 105)), 20px);
  }

  .application__heading img {
    /* SP: max-width 280px @ 480, ~219px @ 375 */
    max-width: clamp(219px, calc(219px + (280 - 219) * ((100vw - 375px) / 105)), 280px);
  }

  /* --- STEP: SP用PNG枠画像 (pictureタグで切り替え) --- */
  .step {
    /* SP: margin-bottom 12px */
    margin-bottom: clamp(9px, calc(9px + (12 - 9) * ((100vw - 375px) / 105)), 12px);
  }

  /* pictureタグをブロック化 */
  .step__frame-wrap picture {
    display: block;
    width: 100%;
  }

  .step__frame-wrap picture img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* STEP2 body位置 */
  .step--2 .step__body {
    top: auto;
    bottom: 15%;
    left: 5%;
    right: 5%;
  }

  /* STEP3 body位置 */
  .step--3 .step__body {
    top: 16%;
    bottom: 6%;
    left: 5%;
    right: 5%;
  }

  /* =====================
     STEP1: SP版レイアウト
  ===================== */
  .step--1 .step__body {
    top: auto;
    bottom: 18%;
    left: 5%;
    right: 5%;
    align-items: flex-end;
  }

  .step--1 .step__content {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 6px;
  }

  .step--1 .step__text-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
  }

  .step--1 .step__title {
    /* SP: 20px @ 480, ~16px @ 375 */
    font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 375px) / 105)), 20px);
    line-height: 1.4;
    white-space: normal;
    margin-bottom: 0;
    text-shadow:
      -2px -2px 0 #fff, 2px -2px 0 #fff,
      -2px  2px 0 #fff, 2px  2px 0 #fff,
       0   -2px 0 #fff, 0    2px 0 #fff,
      -2px  0   0 #fff, 2px  0   0 #fff;
  }

  /* PC用の牛アイコン（flexで左配置）を非表示 */
  .step--1 .step__icon-wrap {
    display: none;
  }

  /* SP用牛: btn-row内でflex配置（左寄せ）*/
  .step--1 .step__cow--sp {
    display: block;
    /* SP: 70px @ 480, ~55px @ 375 */
    width: clamp(55px, calc(55px + (70 - 55) * ((100vw - 375px) / 105)), 70px);
    height: auto;
    flex-shrink: 0;
  }

  /* ボタン行: 牛を左、ボタンを中央に配置 */
  .step--1 .step__btn-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    position: relative;
  }

  .step--1 .step__btn-img {
    /* SP: 200px @ 480, ~156px @ 375 */
    width: clamp(156px, calc(156px + (200 - 156) * ((100vw - 375px) / 105)), 200px);
  }

  .step__x-icon {
    /* SP: 18px @ 480, ~14px @ 375 */
    width: clamp(14px, calc(14px + (18 - 14) * ((100vw - 375px) / 105)), 18px);
    height: clamp(14px, calc(14px + (18 - 14) * ((100vw - 375px) / 105)), 18px);
    vertical-align: -3px;
    margin: 0 2px;
  }

  /* =====================
     STEP2/3: SP版レイアウト（共通）
  ===================== */
  .step__content--col {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .step__content--col .step__title {
    /* SP: 20px @ 480, ~16px @ 375 */
    font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 375px) / 105)), 20px);
    line-height: 1.4;
    white-space: normal;
    margin-bottom: 0;
    text-shadow:
      -2px -2px 0 #fff, 2px -2px 0 #fff,
      -2px  2px 0 #fff, 2px  2px 0 #fff,
       0   -2px 0 #fff, 0    2px 0 #fff,
      -2px  0   0 #fff, 2px  0   0 #fff;
  }

  /* STEP2 SP版 */
  .step__content--step2 {
    gap: 8px;
  }

  /* STEP3 SP版 */
  .step__content--step3 {
    gap: 8px;
  }

  /* STEP2 右上コーナーアイコン */
  .step__corner-icon--step2 {
    /* SP: 50px @ 480, ~39px @ 375 */
    width: clamp(39px, calc(39px + (50 - 39) * ((100vw - 375px) / 105)), 50px);
    top: 1%;
    right: 3%;
  }

  /* STEP3 右上コーナーアイコン */
  .step__corner-icon--step3 {
    width: clamp(
      39px,
      calc(39px + (89 - 39) * ((100vw - 375px) / 105)),
      89px
    );
    top: 15%;
    right: -2%;
  }

  /* STEP2 牛乳画像：中央揃え */
  .step__milks {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .step__milks img {
    width: 80%;
    max-width: 80%;
    margin: 0 auto;
  }

  /* STEP3 スマホ画像：中央揃え・縮小 */
  .step__phones {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .step__phones img {
    width: 55%;
    max-width: 55%;
    margin: 0 auto;
  }

  .application__complete {
    /* SP: margin-top 20px */
    margin-top: clamp(16px, calc(16px + (20 - 16) * ((100vw - 375px) / 105)), 20px);
  }

  .application__complete img {
    /* SP: max-width 200px @ 480, ~156px @ 375 */
    max-width: clamp(156px, calc(156px + (200 - 156) * ((100vw - 375px) / 105)), 200px);
  }

  /* --- RULES --- */
  .rules {
    /* SP: padding 0 16px 40px @ 480 */
    padding: 0
             clamp(12px, calc(12px + (16 - 12) * ((100vw - 375px) / 105)), 16px)
             clamp(31px, calc(31px + (40 - 31) * ((100vw - 375px) / 105)), 40px);
  }

  .rules__inner {
    /* SP: gap 16px */
    gap: clamp(12px, calc(12px + (16 - 12) * ((100vw - 375px) / 105)), 16px);
  }

  .rules__box-body {
    /* SP: padding, font-size adjustments */
    padding: clamp(6px, calc(6px + (10 - 6) * ((100vw - 375px) / 105)), 10px)
             clamp(8px, calc(8px + (12 - 8) * ((100vw - 375px) / 105)), 12px);
    /* 0.65rem=10.4px @ 375, 0.75rem=12px @ 480 */
    font-size: clamp(10.4px, calc(10.4px + (12 - 10.4) * ((100vw - 375px) / 105)), 12px);
    line-height: 1.7;
  }

  .rules__dl {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .rules__dl dt {
    padding: 4px 0 0;
    font-size: 0.8rem;
  }

  .rules__dl dd {
    padding: 0 0 6px;
  }

  .rules__heading {
    font-size: 0.8rem;
    margin-top: 12px;
    margin-bottom: 4px;
  }

  .rules__terms-list li,
  .rules__ol li {
    line-height: 1.6;
  }

  .rules__ol li {
    padding-left: 2em;
  }

  .rules__note {
    font-size: 0.7rem;
  }

  .rules__list li {
    line-height: 1.6;
  }

  /* --- FOLLOW ME --- */
  .follow {
    /* SP: padding 28px 0 28px @ 480 */
    padding: clamp(22px, calc(22px + (28 - 22) * ((100vw - 375px) / 105)), 28px)
             0
             clamp(22px, calc(22px + (28 - 22) * ((100vw - 375px) / 105)), 28px);
  }

  .follow__heading-wrap {
    /* SP: margin-bottom 16px, gap 6px */
    margin-bottom: clamp(12px, calc(12px + (16 - 12) * ((100vw - 375px) / 105)), 16px);
    gap: clamp(5px, calc(5px + (6 - 5) * ((100vw - 375px) / 105)), 6px);
  }

  .follow__heading {
    /* SP: 32px @ 480, ~25px @ 375 */
    font-size: clamp(
      32px,
      calc(32px + (44 - 32) * ((100vw - 375px) / 105)),
      44px
    );
    text-shadow:
      2px 0 0 #0d2340, -2px 0 0 #0d2340,
      0 2px 0 #0d2340, 0 -2px 0 #0d2340,
      1px 1px 0 #0d2340, -1px -1px 0 #0d2340,
      1px -1px 0 #0d2340, -1px 1px 0 #0d2340;
  }

  .follow__cow {
    /* SP: 36px @ 480, ~28px @ 375 */
    width: clamp(28px, calc(28px + (36 - 28) * ((100vw - 375px) / 105)), 36px);
    /* SP: FOLLOWテキスト右端から離す — 80px @ 375, 120px @ 480 */
    right: clamp(80px, calc(80px + (120 - 80) * ((100vw - 375px) / 105)), 120px);
    /* SP: bottom -18px @ 480, -14px @ 375 */
    bottom: min(-14px, calc(-14px + (-4) * ((100vw - 375px) / 105)));
  }

  .follow__item {
    /* SP: 110px @ 480, ~86px @ 375 */
    width: clamp(86px, calc(86px + (110 - 86) * ((100vw - 375px) / 105)), 110px);
    height: clamp(86px, calc(86px + (110 - 86) * ((100vw - 375px) / 105)), 110px);
    margin: 0 clamp(3px, calc(3px + (4 - 3) * ((100vw - 375px) / 105)), 4px);
  }

  .follow__btn-wrap {
    /* SP: margin-top 16px */
    margin-top: clamp(12px, calc(12px + (16 - 12) * ((100vw - 375px) / 105)), 16px);
  }

  .follow__btn-img {
    /* SP: 200px @ 480, ~156px @ 375 */
    width: clamp(156px, calc(156px + (200 - 156) * ((100vw - 375px) / 105)), 200px);
  }
}
@media (max-width: 480px) {
  .step__corner-icon--step2 {
    display: none;
  }
}
@media (max-width: 480px) {
  .follow__cow {
    width: clamp(40px, calc(40px + (61 - 40) * ((100vw - 375px) / 105)), 61px);
    right: clamp(10px, calc(10px + (30 - 10) * ((100vw - 375px) / 105)), 30px);

    bottom: calc(-20px + (-40 - -20) * ((100vw - 375px) / 105));
  }
}
.bg-after-application{
  background-image: url('img/bg.png');
  background-repeat: repeat;
  background-size: auto;
}

.application{ background-image: none; }
.rules{ background-image: none; }
.rules__box-body {
  -ms-overflow-style: none; /* IE/Edge(旧) */
  scrollbar-width: none;    /* Firefox */
}
.rules__box-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}