/* ===== RESET ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:62.5%;scroll-behavior:smooth}
body{
  font-family:'Noto Sans JP',sans-serif;
  font-size:1.6rem;line-height:1.8;color:#333;
  background:#3a8a2e;
  min-height:100vh;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul,ol,dl{list-style:none}

/* ===== LP WRAPPER ===== */
.lp{
  max-width:1280px;
  margin:0 auto;
  background:#fff;
  overflow:hidden;
  position:relative;
}
/*
  クローバー装飾2枚重ね（Hero下〜footer最下部まで全体）
  - bakground_2.png = 背面（コンテンツの後ろ）
  - background.png  = 最前面（コンテンツの前に被さる）
*/
.lp::before{
  content:'';
  position:absolute;
  top:799px;
  left:0;right:0;
  bottom:0;
  background: url('images/bakground_2.png') right top / min(100%, 1246px) auto no-repeat;
  z-index:11;
  pointer-events:none;
  margin-top: 83px;
}
.lp::after{
  content:'';
  position:absolute;
  top:1014px;                /* Hero(799px) + 229px 下げ */
  left:0;right:0;
  bottom:0;
  background:url('images/background.png') center top / 100% auto no-repeat;
  z-index:50;
  pointer-events:none;
}
/* 背景画像の縦の切れ目を隠す（タブレットではページが縦に伸びて画像が足りなくなる） */

/* ===== HERO ===== */
.hero__img{width:100%;display:block}

/* ===== INTRO (リボン + 緑バンド) ===== */
/*
  構造:
  - vector_comp.png(1188x1288)がセクション全体の背景兼サイズ基準
  - 左寄せ配置、右側に余白が出る
  - 緑バンドはvector_comp.pngに描かれている → CSSでbackground-color不要
  - テキスト/画像をposition:absoluteで緑バンド位置に重ねる

  vector_comp.png内の緑バンド位置（1188x1288基準）:
  - バンド1: 約 y:0〜190   → 0%〜14.8%
  - バンド2: 約 y:280〜475 → 21.7%〜36.9%
*/
.intro{
  position:relative;
  /* background:#fff; */
  margin-top:-2px;
  z-index:15;
}
/* vector_comp.pngがセクション高さを決定、左寄せ */
.intro__vector{
  display:block;
  width:92.8%;               /* 1188/1280 */
  height:auto;
}
/* バンド上コンテンツ共通 */
.intro__content{
  position:absolute;
  left:0;right:0;
  display:flex;
  align-items:center;
  z-index:2;
}
/* バンド1: y:0〜190 / 1288 → top:0%, height:14.8% */
.intro__content--1{
  top:0.5%;
  height:14%;
  left:10%;
  right:8%;
  gap:24px;
}
/* バンド2: y:280〜475 / 1288 → top:21.7%, height:15.1% */
.intro__content--2{
  top:20%;
  height:14.5%;
  left:12%;
  right:10%;
  justify-content:center;
  text-align:center;
}
/* 8ani アイコン（デザイン: 196x102, バンド内で大きめ表示） */
.intro__icon{
  width:196px;
  min-width:150px;
  height:auto;
}
/* バンド1右側: 縦3段（テキスト → SVG+をつけて → テキスト） */
.intro__right{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  flex:1;
}
/* SVGと「をつけて」を同一行 */
.intro__hashtag-line{
  display:flex;
  align-items:center;
  gap:8px;
}
/* 「#よつ葉との思い出」ハッシュタグ画像 */
.intro__hashtag{
  height:auto;
  width:auto;
  max-width:none;
}
/* テキスト（Kiwi Maru, Medium, 27px） */
.intro__text{
  font-family:'Kiwi Maru','Noto Sans JP',sans-serif;
  font-size:2.7rem;          /* 27px（62.5%ベースで 27/10 = 2.7rem） */
  font-weight:500;
  color:#fff;
  line-height:1.48;          /* 40/27 ≈ 1.48 */
  letter-spacing:.03em;
}
.intro__text strong{
  font-weight:700;
  color:#ffe14d;
}

/* ===== バンド2: PRESENT ===== */
.intro__present{
  text-align:center;
  position:relative;
}
.intro__present-label{
  font-family: 'Kiwi Maru', 'Noto Sans JP', sans-serif;
  font-size: 5rem;
  font-weight: 500;
  color: transparent;
  -webkit-text-stroke: 1.5px #FFF200;
  letter-spacing: -2px;
  margin-bottom: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
/* スパークル共通 */
.intro__sparkle{
  width:46px;
  height:auto;
  display:inline-block;
}
/* 左スパークル（シアン）: 少し上に配置 */
.intro__sparkle--left{
  position:relative;
  top:-6px;
}
/* 右スパークル（黄色）: 少し下に配置 */
.intro__sparkle--right{
  position:relative;
  top:15px;
}
.intro__present-title{
  font-family:'Kiwi Maru','Noto Sans JP',sans-serif;
  font-size:4rem;
  font-weight:500;
  color:#fff;
}
.intro__present-num{
  /* font-family:'Poppins',sans-serif; */
  font-size:6.4rem;
  font-weight:500;
  color:#fff;
  vertical-align:-6px;
}
/* バッジ: バンド2の右下からはみ出す配置 (デザイン: x1040,y1085 220x220 rotate8deg) */
.intro__present-badge{
  position:absolute;
  right:-100px;
  bottom:-80px;
  width:220px;
  transform:rotate(8deg);
  z-index:5;
}

/* ===== PRODUCTS (PRESENTバンド直下) ===== */
.products{
  position:relative;
  z-index:15;
  margin-top:-755px;
  padding:0 10.5% 104px;
}
.products__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px 4px;
}
.products__cell{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.products__visual{
  position:relative;
  width:100%;
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width: 220px;
  max-height: 220px;
}
.products__bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;

}
.products__img{
  position:relative;z-index:1;
  object-fit:contain;
  max-width: 180px;
  max-height: 180px;
}
.products__name{
  font-family:'Kiwi Maru','Noto Sans JP',sans-serif;
  font-size:1.5rem;
  font-weight:500;
  color:#006837;
  text-align:center;
  line-height:1.4;
  margin-top:6px;
}

/* ===== GREEN AREA (PRESENT以降の緑背景) ===== */
.green-area{
  background: url('images/greenback.png') center top / 100% 100% no-repeat;
  position:relative;
  /* z-index:1; */
  padding-top:0;
  padding-bottom:48px;
}
/* 四つ葉装飾は.lpレベルのpseudo-elementsで対応 */

/* (old .products section removed — now using .intro__products) */

/* ===== STEP ===== */
/*
  デザイン構造:
  - 白カードが左端(バッジ中心あたり)から右端まで伸びる
  - バッジ(STEP 1/2/3)がカード左端に重なる
  - Step3は投稿サンプル画像がカード外に飛び出す
*/
.step{
  padding:0 0 0 84px;
}
.green-area > .step:first-child{
  padding-top:30px;
}
.step__inner{
  position:relative;
  padding-left:96px;  /* バッジ192px / 2 */
}
.step__badge{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:192px;height:192px;
  object-fit:contain;
  z-index:2;
}
.step__card{
  background:#fff;
  border-radius:8px 0 0 8px;
  padding:30px 50px 30px 110px;
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.step--wide .step__badge{
  top:0px;
  transform:none;
}
.step--wide{
  margin-bottom:50px;  /* space for overflowing post images */
}

.step--wide .step__card{
  min-height:370px;
  padding-top:40px;
  padding-bottom:28px;
  position:relative;
  overflow:visible;
  justify-content:flex-start;
}
.step__title{
  font-family:'Kiwi Maru','Noto Sans JP',sans-serif;
  font-size:3.2rem;   /* 25px */
  font-weight:500;
  color:#006837;
  line-height:34.88px;
  letter-spacing:0.034em; /* 3.4% */
  margin-bottom:12px;
}
.step__text{
  font-family:'Kiwi Maru','Noto Sans JP',sans-serif;
  font-size:2.5rem;    /* 25px */
  font-weight:500;
  color:#006837;
  line-height:34.88px;
  letter-spacing:0.034em;
}
.step--row .step__card{
  flex-direction: column; /* ← 横並びをやめる */
  align-items: flex-start;
}

.step__follow-row{
  display: flex;
  align-items: center;
  gap: 24px;
}

.step__follow-row .step__text{
  margin: 0;
}
.step__text strong{color:#006837;font-weight:700}
.step__note{
  font-family:'Kiwi Maru','Noto Sans JP',sans-serif;
  font-size:1.6rem;color:#006837;margin-top:4px;
  letter-spacing:0.034em;
}
/* Step1: テキスト左 + FOLLOWボタン右の横並び */
.step--row .step__card{
  flex-direction:row;
  align-items:center;
}
.step__card-body{
  display:flex;
  align-items:center;
  gap:30px;
  width:100%;
}
.step--row .step__card-body{
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.step__follow-row{
  display:flex;
  align-items:center;
  width:100%;
  gap: 24px;
}
.step__card-text{
  flex: 0 1 auto;
}
.step__btn{
  display:inline-block;flex-shrink:0;
}
.step__btn--follow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:url('images/follow.png') center / cover no-repeat;
  color:#fff;
  border-radius:50px;
  padding:14px 28px 14px 22px;
  font-size:2.4rem;
  letter-spacing:0.05em;
  text-decoration:none;
  transition:opacity .3s;
  white-space:nowrap;
  width: 245px;
  height: 77px;
}
.step__btn--follow:hover{opacity:.85}
.step__btn-ig{
  width:38px;height:38px;
  flex-shrink:0;
}
.step__btn-text{
  line-height:1;
}
.step__btn-arrow{
  font-size:2.8rem;
  line-height:1;
  margin-left:4px;
}
.step__btn-img{
  width:196px;height:auto;
}
/* Step3: 投稿サンプル画像をカード内で下部に配置（テキストの下、はみ出し可） */
.step__post{
  position:absolute;
  top:50px;
  left:-80px;
  right:0;
  z-index:3;
  pointer-events:none;
}
.step__post-img{
  width:100%;
  display:block;
}
/* 「投稿はどちらでも OK ✓」 center text */
.step__post-ok{
  position:absolute;
  top:40%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:none;
}
.step__post-ok-sub{
  font-family:'Kiwi Maru','Noto Sans JP',sans-serif;
  font-size:2.2rem;
  font-weight:500;
  color:#006837;
  letter-spacing:0.05em;
  margin-bottom:4px;
}
.step__post-ok-main{
  font-family:'Kiwi Maru','Noto Sans JP',sans-serif;
  font-size:7rem;
  color:#006837;
  line-height:1;
  letter-spacing:0.02em;
  display: flex;    
  align-items: center; 
  justify-content: center;
}
.step__post-ok-check{
  width: 80px;  
  height: auto;
  margin-left: 8px;
  vertical-align: middle;
}


/* ===== ARROWS ===== */
.sep-arrow{
  text-align:left;
  padding:12px 0;
  padding-left:164px;  /* aligned under badge center: 84px + 96px - 34/2 */
}
.sep-arrow__img{
  display:inline-block;
  width:34px;
  height:auto;
}

/* ===== 応募完了 ===== */
.done{
  text-align:center;
  padding:
    clamp(16px, calc(100vw * 30 / 1280), 30px)
    clamp(12px, calc(100vw * 20 / 1280), 20px)
    clamp(50px, calc(100vw * 100 / 1280), 100px);
}
.done__arrows{
  display:flex;justify-content:center;
  gap:30px;margin-bottom:40px;margin-right: 25px;
}
.done__arrow-img{
  width:34px;
  height:auto;
  display:inline-block;
}
.done__title{
  font-family:'Kiwi Maru','Noto Sans JP',sans-serif;
  font-size:6.9rem;
  font-weight:500;
  color:#006837;
  letter-spacing:0.066em;
  line-height:1;
  -webkit-text-stroke:8px #FFF200;
  paint-order:stroke fill;
}

/* ===== INFO CARDS ===== */
.infobox{
  padding:0 40px 50px;
  position: relative;
  z-index: 20;
}
.infobox__card{
  width:650px;
  max-width:100%;
  height:500px;
  margin:0 auto;
  background:#fff;
  border:3px solid #2a6a39;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.infobox__heading{
  background:#2a6a39;
  color:#fff;
  font-family:'Kiwi Maru','Noto Sans JP',sans-serif;
  font-size:3rem;
  font-weight:500;
  text-align:center;
  padding:12px 20px;
  letter-spacing:0.1em;
}
.infobox__body{
  padding:24px 28px;
  font-size:1.3rem;
  color:#333;
  line-height:1.8;
  overflow-y:auto;
  flex:1;
  min-height:0;
}
.infobox__body p{
  margin-bottom:2px;
}
.infobox__indent{
  padding-left:1.5em;
}
.infobox__note{
  margin-top:4px;
}
.infobox__body--terms{
  font-size:1.2rem;
  line-height:1.7;
}
.infobox__subheading{
  font-weight:700;
  color:#2a6a39;
  margin-top:16px;
  margin-bottom:4px;
  font-size:1.3rem;
}

/* ===== FOOTER ===== */
.footer{
  background:#2A6A39;
  padding:70px 0 70px;
  text-align:center;
  overflow:hidden;
}
.footer__title{
  font-family:'Kiwi Maru','Noto Sans JP',sans-serif;
  font-size:4.7rem;          /* 47px */
  font-weight:500;
  line-height:1;
  letter-spacing:0;
  color:#ffffff;
  text-align:center;
  margin-bottom:24px;

  -webkit-text-stroke:2px #FFF200;
  paint-order:stroke fill;
}
/* スライダー */
.footer__slider{
  width:100%;
  overflow:hidden;
  margin-top:100px;
  margin-bottom:80px;
}
.footer__track{
  display:flex;
  gap:15px;
  animation:footerSlide 30s linear infinite;
  width:max-content;
}
.footer__photo{
  width:200px;
  height:200px;
  object-fit:cover;
  flex-shrink:0;
}
@keyframes footerSlide{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
/* フォローボタン（insta.png背景） */
.footer__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:url('images/insta.png') center / cover no-repeat;
  color:#fff;
  border-radius:50px;
  padding:16px 40px;
  font-family:'Kiwi Maru','Noto Sans JP',sans-serif;
  font-weight:500;
  font-size:2rem;
  letter-spacing:.04em;
  transition:opacity .3s;
  height: 84px;
  width: 460px;
  text-align: left;
}
.footer__btn:hover{opacity:.85}
.footer__btn-ig{
  width:46px;height:46px;
  flex-shrink:0;
}
.footer__btn-label{
  line-height:1.5;
}

/* ===== SCROLL ANIMATION ===== */
.fade-in{
  opacity:0;transform:translateY(24px);
  transition:opacity .5s ease,transform .5s ease;
}
.fade-in.is-visible{opacity:1;transform:translateY(0)}

/* ===== SP HERO WRAPPER (default: transparent on PC) ===== */
.sp-hero-wrap{position:relative}
.sp-hero-wrap__bg{display:none}

/* ===== RESPONSIVE ===== */
@media(max-width:480px){

  html{font-size:62.5%}

  /* --- LP wrapper --- */
  .lp{overflow:visible}

  /* --- Hide PC clover overlays on SP --- */
  .lp::before,
  .lp::after{display:none}

  /* --- SP HERO WRAP --- */
  .sp-hero-wrap{
    position: relative;
    overflow: visible;
  }

  .sp-hero-wrap__bg{
    display: block; 
    position: relative;
    z-index: 2;
  }

  .sp-hero-wrap > section{
    position: relative;
    z-index: 2;
  }

  .sp-hero-wrap::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100vw * 1021 / 480); 
    bottom: 0;
    background: url("images/vector_background.png") center top / 100% auto no-repeat;
    z-index: 1;
    pointer-events: none;
  }


  /* --- HERO: PC画像を非表示 --- */
  .hero{display:none}

  /* --- INTRO: 通常フローで縦に並べる --- */
  .intro{
    position:relative;
    margin-top:-2px;
    z-index:15;
  }
  .intro__vector{display:none}

  /* バンド共通: absoluteを解除して通常フロー */
  .intro__content{
    position:relative;
    left:auto;right:auto;top:auto;
    height:auto;
    display:flex;
    align-items:center;
    padding:0;
  }

  /* バンド1: 8ani + テキスト */
  .intro__content--1{
    /* background:#2a6a39; */
    border-radius:12px;
    margin:0 5%;
    gap:10px;
    flex-direction:row;
    padding:12px 14px;
  }
  .intro__icon{width:calc(100vw * 70 / 480);min-width:calc(100vw * 55 / 480)}
  .intro__right{
    align-items:flex-start;
    text-align:left;
    gap:1px;
    flex:1;
  }
  .intro__hashtag-line{
    justify-content:flex-start;
    flex-wrap:nowrap;
    gap:4px;
  }
  .intro__hashtag{height:auto;max-width:calc(100vw * 120 / 480)}
  .intro__text{font-size:calc(100vw * 10.5 / 480);line-height:1.35}

  /* バンド2: PRESENT */
  .intro__content--2{
    /* background:#2a6a39; */
    border-radius:12px;
    margin:8px 5% 0;
    padding:10px 14px;
    flex-direction:row;
    justify-content:center;
    text-align:center;
    position:relative;
  }
  .intro__present{text-align:center}
  .intro__present-label{
    font-size:calc(100vw * 20 / 480);
    gap:calc(100vw * 5 / 480);
    margin-bottom:-2px;
    -webkit-text-stroke: calc(100vw * 0.78 / 480) #FFF200;
  }
  .intro__sparkle{width:calc(100vw * 16 / 480)}
  .intro__sparkle--left{top:-3px}
  .intro__sparkle--right{top:5px}
  .intro__present-title{font-size:calc(100vw * 13.5 / 480)}
  .intro__present-num{font-size:calc(100vw * 22 / 480);vertical-align:-2px}
  .intro__present-badge{
    width:calc(100vw * 145 / 480);
    right:calc(100vw * -36 / 480);
    bottom:calc(100vw * -140 / 480);
    transform: rotate(0deg);
    position:absolute;
  }

  /* --- PRODUCTS --- */
  .products{
    position:relative;
    z-index:16;
    margin-top:8px;
    padding:10px 5% 16px 5%;
    background:transparent;
  }

  .products__grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 6px;
    justify-items: start;
  }

  .products__name{font-size:calc(100vw * 9 / 480);margin-top:2px;line-height:1.3;width:calc(100vw * 150 / 480)}
  .products__visual{
    width:auto;
    height:auto;
    width:calc(100vw * 120 / 480);
    height:calc(100vw * 120 / 480);
    aspect-ratio:1
  }
  .products__img{
    max-width:calc(100vw * 102 / 480);
    max-height:calc(100vw * 102 / 480);
  }
  .products__bg{
    position:absolute;inset:0;width:100%;height:100%
  }

  /* --- GREEN AREA --- */
  .green-area{padding-bottom:40px; padding-top: 30px;}

  /* --- STEPS --- */
  .step{padding:0 4%}
  .green-area > .step:first-child{padding-top:20px}
  .step__inner{
    padding-left:0;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .step__badge{
    position:relative;
    left:auto;top:auto;
    transform:none;
    width:90px;height:90px;
    margin-bottom:-18px;
    z-index:2;
  }
  .step__card{
    border-radius:10px;
    padding:28px 14px 18px;
    min-height:auto;
    width:100%;
    text-align:center;
    align-items:center;
  }
  .step--row .step__card{flex-direction:column;align-items:center}
  .step--row .step__card-body{flex-direction:column;gap:10px}
  .step__follow-row{flex-direction:column;align-items:flex-start;gap:10px}
  .step__follow-row .step__text{text-align:center}
  .step__title{font-size:calc(100vw * 18 / 480);margin-bottom:6px}
  .step__text{font-size:calc(100vw * 14 / 480);line-height:1.5}
  /* .step__text br{display:none} */
  .step__note{font-size:calc(100vw * 11 / 480)}
  .step__btn--follow{
    width:calc(100vw * 200 / 480);height:calc(100vw * 58 / 480);
    font-size:calc(100vw * 17 / 480);
    padding:calc(100vw * 8 / 480) calc(100vw * 18 / 480) calc(100vw * 8 / 480) calc(100vw * 14 / 480);
    margin-left: calc(100vw * 20 / 480);
  }

  /* Step3 投稿画像 */
  .step--wide{margin-bottom:16px}
  .step--wide .step__card{min-height:auto;padding-top:28px;padding-bottom:16px}
  .step__post{position:relative;top:auto;left:auto;right:auto;margin-top:10px}
  .step__post-ok-sub{font-size:calc(100vw * 14 / 480)}
  .step__post-ok-main{font-size:calc(100vw * 40 / 480)}
  .step__post-ok-check{width:calc(100vw * 45 / 480)}

  /* --- ARROWS --- */
  .sep-arrow{text-align:center;padding:16px 0px 8px 0px;padding-left:0}

  /* --- DONE --- */
  .done{padding:16px 16px 50px}
  .done__arrows{gap:18px;margin-bottom:20px;margin-right:0;margin-left: 24px;}
  .done__arrow-img{width:calc(100vw * 24 / 480)}
  .done__title{font-size:calc(100vw * 40 / 480);-webkit-text-stroke:calc(100vw * 5 / 480) #FFF200;    margin-left: calc(100vw * 50 / 480);}

  /* --- INFO BOXES --- */
  .infobox{padding:0 4% 40px}
  .infobox__card{max-width:none;width:100%;height:calc(100vw * 350 / 480);border-radius:12px}
  .infobox__heading{font-size:calc(100vw * 20 / 480);padding:calc(100vw * 10 / 480) calc(100vw * 16 / 480)}
  .infobox__body{padding:calc(100vw * 14 / 480) calc(100vw * 12 / 480);font-size:calc(100vw * 11 / 480)}

  /* --- FOOTER --- */
  .footer{padding:30px 0 40px}
  .footer__title{font-size:calc(100vw * 30 / 480);margin-bottom:calc(100vw * 12 / 480);-webkit-text-stroke:calc(100vw * 1.5 / 480) #FFF200}
  .footer__slider{margin-top:30px;margin-bottom:30px}
  .footer__photo{width:calc(100vw * 110 / 480);height:calc(100vw * 110 / 480)}
  .footer__btn{
    width:auto;max-width:88%;height:auto;
    padding:calc(100vw * 10 / 480) calc(100vw * 20 / 480);font-size:calc(100vw * 14 / 480);
    background-size:cover;
  }
  .footer__btn-ig{width:calc(100vw * 30 / 480);height:calc(100vw * 30 / 480)}
  .footer__btn-label{font-size:calc(100vw * 13 / 480);line-height:1.4}
}
.step{
  position: relative;
  z-index: 16;
}

.step__badge{
  z-index: 2;
}

.step__card{
  position: relative;
  z-index: 1;
}


@media (max-width: 480px){
  .products__grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 0px;
    justify-items: center;
  }

  .products__cell{
    max-width: calc(100vw * 120 / 480);

    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* SPで3列表示できる幅なら「2,3,3」に固定 */
@media (min-width:374px) and (max-width:480px){
  .products__grid{
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-areas:
      "p1 p2 ."
      "p3 p4 p5"
      "p6 p7 p8";
  }

  .products__cell:nth-child(1){ grid-area:p1 !important; }
  .products__cell:nth-child(2){ grid-area:p2 !important; }
  .products__cell:nth-child(3){ grid-area:p3 !important; }
  .products__cell:nth-child(4){ grid-area:p4 !important; }
  .products__cell:nth-child(5){ grid-area:p5 !important; }
  .products__cell:nth-child(6){ grid-area:p6 !important; }
  .products__cell:nth-child(7){ grid-area:p7 !important; }
  .products__cell:nth-child(8){ grid-area:p8 !important; }
}

@media (max-width: 374px){

  .products{
    padding: 0;
    padding-top: 140px;
  }

  .products__grid{
    display: grid;
    grid-template-columns: repeat(2, 120px);
    justify-content: center;     /* ← 2列ブロック自体を中央へ */
    justify-items: center;       /* ← 各セルは中央寄せ（基本） */
    gap: 16px 20px;

    grid-template-areas:
      "p1 ."       /* ← 1行目：左列だけ使う（右は空） */
      "p2 p3"
      "p4 p5"
      "p6 p7"
      "p8 .";      /* ← 最後：左列だけ使う */
  }

  .products__cell{
    width: 120px;
    text-align: center;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .products__cell:nth-child(1){ grid-area: p1; }
  .products__cell:nth-child(2){ grid-area: p2; }
  .products__cell:nth-child(3){ grid-area: p3; }
  .products__cell:nth-child(4){ grid-area: p4; }
  .products__cell:nth-child(5){ grid-area: p5; }
  .products__cell:nth-child(6){ grid-area: p6; }
  .products__cell:nth-child(7){ grid-area: p7; }
  .products__cell:nth-child(8){ grid-area: p8; }

  /* 1と8は“左列の左”に寄せる（中央ブロック内で左寄せ） */
  .products__cell:nth-child(1),
  .products__cell:nth-child(8){
    justify-self: start;
  }
}
@media (max-width: 480px){

  .sp-hero-wrap{
    position: relative;
    min-height: calc(100vw * 1840 / 480);
  }

  .intro{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2; 
  }

  .intro__content{
    position: absolute;
    left: 7%;
    right: 7%;
    margin: 0;
    padding: 0;
    border-radius: 0;
  }

  .intro__content--1{
    top: calc(100vw * 25 / 480);
  }

  .intro__content--2{
    top: calc(100vw * 171 / 480);
  }

  .intro__content--1{
    display: grid;
    grid-template-columns: calc(100vw * 62 / 480) 1fr;
    align-items: center;
    gap: calc(100vw * 10 / 480);
  }

  .intro__icon{
    width: calc(100vw * 62 / 480);
    min-width: calc(100vw * 62 / 480);
  }

  .intro__right{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .intro__text{
    font-size: calc(100vw * 12 / 480);
    line-height: 1.35;
  }

  .intro__hashtag-line{
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
  }

  .intro__hashtag{
    max-width: calc(100vw * 120 / 480);
  }

  .products{
    margin-top: calc(100vw * 270 / 480);
  }
}
@media (max-width:480px){
  .step{
    padding-left: 0;
    padding-right: 0;
  }

  .step__inner{
    position: relative;
    align-items: flex-end;

  }

  .step__card{
    width: 88%;
    margin-left: auto;
    border-radius: 0;
    padding: calc(100vw * 36 / 480) calc(100vw * 16 / 480) calc(100vw * 20 / 480) calc(100vw * 48 / 480);
    text-align: left;
    align-items: flex-start;
  }

  .step__badge{
    position: absolute;
    top: calc(100vw * -40 / 480);
    left:1%;
    width: calc(100vw * 100 / 480);
    height: calc(100vw * 100 / 480);
    margin: 0;
    z-index: 3;
  }
  .step--wide .step__badge {
    top: calc(100vw * -40 / 480);
  }

  .step__card{
    text-align: left;
  }

  .step__title,
  .step__text,
  .step__note{
    text-align: left;
    padding-left: calc(100vw * 14 / 480);
  }


  .step__follow-row{
    justify-content: flex-start;
  }
  .step--wide .step__card{
    overflow: hidden;
  }


  .step__post-img{
    width: 130%;
    max-width: none;
    margin-left: -15%;
    height: auto;
    display: block;
  }

  .step--wide .step__card{
    position: relative;
    z-index: 1;
    overflow: visible; 
    padding-bottom: 0px;
  }

  /* 投稿ブロックを“前面”に */
  .step__post{
    position: relative;
    z-index: 5;
    height: calc(100vw * 100 / 480);

  }
  .step__post-ok{
    left: 41%;
  }


  .step__post-img{
    width: 90%;
    max-width: none;
    display: block;
    transform: scale(1.4) translateX(calc(100vw * 17 / 480)) translateY(0px);
    transform-origin: center;

    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }
  .sep-arrow__img{
    width:calc(100vw * 24 / 480);
  }

  .green-area{
    background: url('images/sp_green_bg.png') center top / 100% auto repeat-y;
  }
  /* STEP1カードを左寄せに固定 */
  .step--row .step__card{
    text-align: left;
    align-items: flex-start;
  }

  .step--row .step__card-body{
    align-items: flex-start;
  }

  .step--row .step__title,
  .step--row .step__text{
    text-align: left;
    padding-left: calc(100vw * 14 / 480);
  }
}

/* デフォルト（PC）では改行させない */
.sp-br{
  display: none;
}

@media (max-width:480px){
  .sp-br{
    display: block;
  }
}
@media (min-width: 481px) {
  /* ===== footer title sparkle（全幅共通） ===== */
  .footer__title{
    position: relative; /* 擬似要素の基準 */
    display: inline-block;
  }

  .footer__title::before,
  .footer__title::after{
    content: "";
    position: absolute;
    width:  clamp(24px, calc(100vw * 40 / 1280), 40px);
    height: clamp(24px, calc(100vw * 40 / 1280), 40px);
    pointer-events: none;
  }

  .footer__title::before{
    left:  clamp(-70px, calc(100vw * -70 / 1280), -30px);
    top:   clamp(-30px, calc(100vw * -30 / 1280), -12px);
    background: url("images/パス 310.svg") no-repeat center / contain;
  }

  .footer__title::after{
    right: clamp(-70px, calc(100vw * -70 / 1280), -30px);
    bottom: clamp(-30px, calc(100vw * -30 / 1280), -12px);
    background: url("images/パス 294.png") no-repeat center / contain;
  }
}
/* ===== TABLET / MID-RANGE (481px – 1280px) ===== */
/* PC layout with fluid clamp() values.
   At 480px → matches SP boundary values.
   At 1280px → matches PC default values exactly. */

@media (min-width: 481px) and (max-width: 1280px) {

  /* --- Clover overlays --- */
  /* top: 300px@480 → 799px@1280 | slope=(799-300)/800=0.62375, intercept=300-0.62375*480=0.6 */
  .lp::before {
    top: clamp(300px, 0.6px + 62.375vw, 799px);
    /* margin-top: 31px@480 → 83px@1280 | slope=0.065, intercept=31-0.065*480=-0.2 */
    margin-top: clamp(31px, -0.2px + 6.5vw, 83px);
  }
  /* top: 386px@480 → 1028px@1280 | slope=0.8025, intercept=386-0.8025*480=0.8 */
  .lp::after {
    top: clamp(386px, 0.8px + 80.25vw, 1014px);
  }

  /* --- Intro: no changes at 1280px, PC defaults apply --- */

  /* --- Products --- */
  /* margin-top: -280px@480 → -745px@1280 | slope=(-745-(-280))/800=-0.58125, intercept=-280-(-0.58125*480)=-1 */
  .products {
    margin-top: clamp(-745px, -1px - 58.125vw, -280px);
  }
  /* products padding: 0 10.5% 35px@480 → 0 10.5% 94px@1280 */
  /* padding-bottom: 35px@480 → 94px@1280 | slope=0.07375, intercept=35-0.07375*480=-0.4 */
  .products {
    padding-bottom: clamp(35px, -0.4px + 7.375vw, 94px);
  }
  .products__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  /* products__visual max: 110px@480 → 220px@1280 | slope=0.1375, intercept=110-0.1375*480=44 */
  .products__visual {
    max-width: clamp(110px, 44px + 13.75vw, 220px);
    max-height: clamp(110px, 44px + 13.75vw, 220px);
  }
  /* products__img max: 90px@480 → 180px@1280 | slope=0.1125, intercept=90-0.1125*480=36 */
  .products__img {
    max-width: clamp(90px, 36px + 11.25vw, 180px);
    max-height: clamp(90px, 36px + 11.25vw, 180px);
  }
  /* products__name: 7px@480 → 15px@1280 | slope=0.01, intercept=7-0.01*480=2.2 */
  .products__name {
    font-size: clamp(0.7rem, 2.2px + 1vw, 1.5rem);
  }

  /* --- Steps --- */
  /* step padding-left: 32px@480 → 84px@1280 | slope=0.065, intercept=32-0.065*480=0.8 */
  .step {
    padding-left: clamp(32px, 0.8px + 6.5vw, 84px);
  }
  /* step__inner padding-left: 36px@480 → 96px@1280 | slope=0.075, intercept=36-0.075*480=0 */
  .step__inner {
    padding-left: clamp(36px, 0px + 7.5vw, 96px);
  }
  /* step__badge: 72px@480 → 192px@1280 | slope=0.15, intercept=72-0.15*480=0 */
  .step__badge {
    width: clamp(72px, 0px + 15vw, 192px);
    height: clamp(72px, 0px + 15vw, 192px);
  }
  /* step__card padding: 11px 19px 11px 41px @480 → 30px 50px 30px 110px @1280 */
  /* top/bottom: slope=0.02375, int=11-0.02375*480=-0.4 */
  /* right: slope=0.03875, int=19-0.03875*480=0.4 */
  /* left: slope=0.08625, int=41-0.08625*480=-0.4 */
  .step__card {
    padding: clamp(11px, -0.4px + 2.375vw, 30px)
             clamp(19px, 0.4px + 3.875vw, 50px)
             clamp(11px, -0.4px + 2.375vw, 30px)
             clamp(41px, -0.4px + 8.625vw, 110px);
    /* min-height: 71px@480 → 190px@1280 | slope=0.14875, int=71-0.14875*480=-0.4 */
    min-height: clamp(71px, -0.4px + 14.875vw, 190px);
  }
  /* step__title font-size: 12px@480 → 32px@1280 | slope=0.025, int=12-0.025*480=0 */
  .step__title {
    font-size: clamp(1.2rem, 0px + 2.5vw, 3.2rem);
  }
  /* step__text font-size: 9.4px@480 → 25px@1280 | slope=0.0195, int=9.4-0.0195*480=0.04 */
  .step__text {
    font-size: clamp(0.94rem, 0px + 1.95vw, 2.5rem);
  }
  /* step__note font-size: 6px@480 → 16px@1280 | slope=0.0125, int=6-0.0125*480=0 */
  .step__note {
    font-size: clamp(0.6rem, 0px + 1.25vw, 1.6rem);
  }
  /* step__btn--follow: width 92px@480 → 245px@1280 | slope=0.19125, int=92-0.19125*480=0.2 */
  /* height: 29px@480 → 77px@1280 | slope=0.06, int=29-0.06*480=0.2 */
  .step__btn--follow {
    width: clamp(92px, 0.2px + 19.125vw, 245px);
    height: clamp(29px, 0.2px + 6vw, 77px);
    font-size: clamp(0.9rem, 0px + 1.875vw, 2.4rem);
    padding: clamp(5px, 0px + 1.09375vw, 14px)
             clamp(11px, 0px + 2.1875vw, 28px)
             clamp(5px, 0px + 1.09375vw, 14px)
             clamp(8px, 0px + 1.71875vw, 22px);
  }
  .step__btn-ig {
    width: clamp(14px, 0px + 2.96875vw, 38px);
    height: clamp(14px, 0px + 2.96875vw, 38px);
  }
  /* step__btn-img: 74px@480 → 196px@1280 | same as icon */
  .step__btn-img {
    width: clamp(74px, 0.8px + 15.25vw, 196px);
  }

  /* --- Step3 post --- */
  /* step__post-ok-sub: 8px@480 → 22px@1280 | slope=0.0175, int=8-0.0175*480=-0.4 */
  .step__post-ok-sub {
    font-size: clamp(0.8rem, -0.4px + 1.75vw, 2.2rem);
  }
  /* step__post-ok-main: 26px@480 → 70px@1280 | slope=0.055, int=26-0.055*480=-0.4 */
  .step__post-ok-main {
    font-size: clamp(2.6rem, -0.4px + 5.5vw, 7rem);
  }
  /* step__post-ok-check: 30px@480 → 80px@1280 | slope=0.0625, int=30-0.0625*480=0 */
  .step__post-ok-check {
    width: clamp(30px, 0px + 6.25vw, 80px);
  }

  /* --- Arrows --- */
  /* sep-arrow padding-left: 62px@480 → 164px@1280 | slope=0.1275, int=62-0.1275*480=0.8 */
  .sep-arrow {
    padding-left: clamp(62px, 0.8px + 12.75vw, 164px);
  }
  .sep-arrow__img {
    width: clamp(13px, 0px + 2.65625vw, 34px);
  }

  /* --- Done --- */
  /* done__title: 26px@480 → 69px@1280 | slope=0.05375, int=26-0.05375*480=0.2 */
  .done__title {
    font-size: clamp(2.6rem, 0.2px + 5.375vw, 6.9rem);
    /* stroke: 3px@480 → 8px@1280 | slope=0.00625, int=3-0.00625*480=0 */
    -webkit-text-stroke: clamp(3px, 0px + 0.625vw, 8px) #FFF200;
  }
  .done__arrow-img {
    width: clamp(13px, 0px + 2.65625vw, 34px);
  }

  /* --- Infobox --- */
  /* card width: 244px@480 → 650px@1280 | slope=0.5075, int=244-0.5075*480=0.4 */
  /* card height: 188px@480 → 500px@1280 | slope=0.39, int=188-0.39*480=0.8 */
  .infobox__card {
    width: clamp(244px, 0.4px + 50.75vw, 650px);
    height: clamp(188px, 0.8px + 39vw, 500px);
  }
  /* heading: 11px@480 → 30px@1280 | slope=0.02375, int=11-0.02375*480=-0.4 */
  .infobox__heading {
    font-size: clamp(1.1rem, -0.4px + 2.375vw, 3rem);
  }
  /* body: 5px@480 → 13px@1280 | slope=0.01, int=5-0.01*480=0.2 */
  .infobox__body {
    font-size: clamp(0.5rem, 0.2px + 1vw, 1.3rem);
  }

  /* --- Footer --- */
  /* title: 18px@480 → 47px@1280 | slope=0.03625, int=18-0.03625*480=0.6 */
  .footer__title {
    font-size: clamp(1.8rem, 0.6px + 3.625vw, 4.7rem);
    -webkit-text-stroke: clamp(0.75px, 0px + 0.15625vw, 2px) #FFF200;
  }
  /* photo: 75px@480 → 200px@1280 | slope=0.15625, int=75-0.15625*480=0 */
  .footer__photo {
    width: clamp(75px, 0px + 15.625vw, 200px);
    height: clamp(75px, 0px + 15.625vw, 200px);
  }
  /* btn width: 173px@480 → 460px@1280 | slope=0.35875, int=173-0.35875*480=0.8 */
  /* btn height: 32px@480 → 84px@1280 | slope=0.065, int=32-0.065*480=0.8 */
  .footer__btn {
    width: clamp(173px, 0.8px + 35.875vw, 460px);
    height: clamp(32px, 0.8px + 6.5vw, 84px);
    font-size: clamp(0.75rem, 0px + 1.5625vw, 2rem);
    padding: clamp(6px, 0px + 1.25vw, 16px) clamp(15px, 0px + 3.125vw, 40px);
  }
  .footer__btn-ig {
    width: clamp(17px, 0px + 3.59375vw, 46px);
    height: clamp(17px, 0px + 3.59375vw, 46px);
  }
  .footer__btn-label {
    font-size: calc(100vw * 21 / 1280);
    line-height: 1.5;
  }
  /* slider margins */
  .footer__slider {
    margin-top: clamp(30px, -7.5px + 8.4375vw, 100px);
    margin-bottom: clamp(30px, -6px + 6.875vw, 80px);
  }
}

/* ===== INTRO スケーリング (481px – 1199px) ===== */
/* 1200px以上ではPC固定値で問題なく収まるため、1199px以下のみスケーリング適用。
   vw / 1280 の比率で全要素をスケール。 */
@media (min-width: 481px) and (max-width: 1199px) {
  .intro__content {
    overflow: hidden;
  }
  .intro__icon {
    width: calc(196 / 1280 * 100vw);
    min-width: calc(150 / 1280 * 100vw);
  }
  .intro__text {
    font-size: calc(27 / 1280 * 100vw);
    line-height: 1.25;
  }
  .intro__hashtag {
    max-width: calc(482 / 1280 * 100vw);
    max-height: calc(40 / 1280 * 100vw);
    height: auto;
    width: auto;
  }
  .intro__content--1 {
    gap: calc(24 / 1280 * 100vw);
  }
  .intro__right {
    gap: calc(4 / 1280 * 100vw);
  }
  .intro__hashtag-line {
    gap: calc(8 / 1280 * 100vw);
  }
  .intro__sparkle {
    width: calc(46 / 1280 * 100vw);
  }
  .intro__present-label {
    font-size: calc(50 / 1280 * 100vw);
    -webkit-text-stroke: calc(1.5 / 1280 * 100vw) #FFF200;
    gap: calc(14 / 1280 * 100vw);
    margin-bottom: calc(-8 / 1280 * 100vw);
    letter-spacing: calc(-2 / 1280 * 100vw);
  }
  .intro__present-title {
    font-size: calc(40 / 1280 * 100vw);
  }
  .intro__present-num {
    font-size: calc(64 / 1280 * 100vw);
    vertical-align: calc(-6 / 1280 * 100vw);
  }
  .intro__present-badge {
    width: calc(220 / 1280 * 100vw);
    right: calc(-100 / 1280 * 100vw);
    bottom: calc(-80 / 1280 * 100vw);
  }
}

/* ===== クローバー装飾: 画像下端の切れ防止 (481px–1199px) ===== */
/* 1200px未満では背景画像の高さがページ高さに足りず、画像下端の切れたクローバーが見える。
   bottom:autoにして高さを画像比率で制限し、mask-imageで下端をフェードアウト。 */
@media (min-width: 481px) and (max-width: 1199px) {
  .lp::before {
    /* bakground_2.png: 1246x4124, ratio≈3.31, bg-size=min(100%,1246px) */
    bottom: auto;
    height: calc(min(100vw, 1246px) * 3.31);
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 100px), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - 100px), transparent 100%);
  }
  .lp::after {
    /* background.png: 1280x4011, ratio≈3.134 */
    bottom: auto;
    height: calc(100vw * 3.134);
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 150px), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - 150px), transparent 100%);
  }
}

/* ===== ~1000px以下: クローバー装飾を背面に移動 ===== */
/* 1280pxではbackground.pngが前面(z-index:50)に被さるのがデザイン意図だが、
   幅が狭まるとコンテンツと位置がずれてテキストを隠すため、背面に移動 */
@media (min-width: 481px) and (max-width: 1000px) {
  .lp::before {
    z-index: 1;
  }
  .lp::after {
    z-index: 1;
  }
  .step__post {
    top: clamp(50px, calc(150px - 7.8vw), 100px);
  }
}

.intro__content--2{
  overflow: visible; /* 念のため（内部のはみ出し許可） */
}

/* ===== INTRO バンド1：480以下 最終FIX（上段中央 + 下段アイコン左） ===== */
@media (max-width: 480px){

  :root{
    --intro-icon-w:  calc(100vw * 93 / 480);  /* 480px時 93px */
    --intro-hash-w:  calc(100vw * 204 / 480); /* 480px時 204px */
    --intro-col-gap: calc(100vw * 10 / 480);
    --intro-row-gap: calc(100vw * 6 / 480);
  }

  /* ここで“確実に”2列×3行のグリッドにする */
  .intro__content--1{
    display: grid !important;
    grid-template-columns: var(--intro-icon-w) 1fr;
    grid-template-rows: auto auto auto;
    column-gap: var(--intro-col-gap);
    row-gap: var(--intro-row-gap);
    align-items: center;

    /* カード自体は中央に見せる */
    justify-content: center;
  }

  /* 右側を contents にして、中身（p）をグリッドに参加させる */
  .intro__right{
    display: contents !important;
  }

  /* 上段テキスト：2列ぶち抜きで中央 */
  .intro__right > .intro__text:first-child{
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
    margin: 0;
    font-size: calc(100vw * 12 / 480);
    line-height: 1.45;
  }

  /* アイコン：左列、下段2行ぶん */
  .intro__icon{
    grid-column: 1;
    grid-row: 2 / span 2;
    width: var(--intro-icon-w);
    min-width: var(--intro-icon-w);
    height: auto;
    justify-self: start;
  }

  /* ハッシュタグ行：右列2行目 */
  .intro__hashtag-line{
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    text-align: left;
    min-width: 0;
  }

  /* ハッシュタグ画像：480px時 204px */
  .intro__hashtag{
    width: var(--intro-hash-w);
    max-width: var(--intro-hash-w);
    height: auto;
    display: block;
  }

  /* 下段テキスト：右列3行目 */
  .intro__right > .intro__text:last-child{
    grid-column: 2;
    grid-row: 3;
    text-align: left;
    margin: 0;
    font-size: calc(100vw * 12 / 480);
    line-height: 1.45;
    min-width: 0;
  }
  .intro__text{
    font-family: "Kiwi Maru", serif;
    font-weight: 500;
    font-size: calc(100vw * 15 / 480);
    line-height: calc(100vw * 21 / 480);
    letter-spacing: 0.05em;
  }
  /* 上段：14px基準 */
  .intro__right > .intro__text:first-child{
    font-family: "Kiwi Maru", serif;
    font-weight: 500;
    font-size: calc(100vw * 14 / 480);
    line-height: calc(100vw * 21 / 480);
    letter-spacing: 0.05em;
  }
  /* 下段：15px基準 */

  /* 下段：15px基準 */
  .intro__right > .intro__text:last-child{
    font-family: "Kiwi Maru", serif;
    font-weight: 500;
    font-size: calc(100vw * 15 / 480);
    line-height: calc(100vw * 21 / 480);
    letter-spacing: 0.05em;
  }
   /* 17px（@480）を可変化 */
   :root{
    --intro-gap-8: calc(100vw * 8 / 480);
    --intro-gap-17: calc(100vw * 17 / 480);
  }

  /* 上段と下段の間 */
  .intro__right > .intro__text:first-child{
    margin-bottom: var(--intro-gap-8);
  }

  /* 左アイコンと右テキストの間 */
  .intro__content--1{
    column-gap: var(--intro-gap-17);
  }
  .intro__icon{
    margin-left: calc(100vw * 12 / 480);
  }
  /* アイコン単体のズラしは無効化（間隔が潰れるのを防ぐ） */
  .intro__icon{
    margin-left: 0;
  }

  /* グリッド全体を少し右へ（480時 12px） */
  .intro__content--1{
    padding-left: calc(100vw * 12 / 480);
    /* 右側も同量にすると見た目が安定（任意） */
    padding-right: calc(100vw * 12 / 480);
  }

  /* 念のため：列間は17px（480時）を維持 */
  .intro__content--1{
    column-gap: var(--intro-gap-17);
  }
  .intro__hashtag-line > .intro__text {
    transform: translateY(calc(100vw * 3 / 480)); /* 約3px @480 */
  }

  .footer__title{
    position: relative;
    display: inline-block;
  
    color: transparent;                /* 中を抜く */
    -webkit-text-stroke: 1px #FFF200;  /* 縁取り（既存と同じ色） */
    paint-order: stroke fill;
    letter-spacing: 0.05em;            /* 少しだけ広め（必要なら0.03〜0.06で調整） */
  }
}

/* 480以下だけ表示 */
@media (max-width: 480px){

  .footer__title::before,
  .footer__title::after{
    content: "";
    display: block;
    position: absolute;
    width: calc(100vw * 40 / 480);
    height: calc(100vw * 40 / 480);
    background: url("images/パス 310.svg") no-repeat center / contain;
    pointer-events: none;
  }

  /* 左上 */
  .footer__title::before{
    left:  calc(100vw * -70 / 480);
    top:   calc(100vw * -30 / 480);
  }

  /* 右下 */
  .footer__title::after{
    right:  calc(100vw * -70 / 480);
    bottom: calc(100vw * -30 / 480);
  }
  .footer__title::after{
    background-image: url("images/パス 294.png");
  }
  /* ===== FOLLOWセクション余白調整 ===== */
  .footer{
    padding: 48px 0 56px;
  }

  .footer__title{
    margin-bottom: 20px;
  }

  .footer__slider{
    margin-top: 32px;
    margin-bottom: 28px;
  }

  /* ===== Instaボタン横幅拡張 ===== */
  .footer__btn{
    width: 92vw;                 /* 横ほぼいっぱい */
    max-width: none;
    padding-left: 20px;
    padding-right: 64px;         /* 矢印スペース確保 */
    position: relative;
  }

  /* ラベルが広がるように */
  .footer__btn-label{
    flex: 1;
  }

  /* ===== 右矢印追加 ===== */
  .footer__btn::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-50%) rotate(-45deg);
  }
  .footer__title{
    font-size: calc(100vw * 47 / 480);
    -webkit-text-stroke: 2px #FFF200;
    margin-bottom: 24px;
  }

  /* ===== Instaボタン幅 360px相当（480時） ===== */
  .footer__btn{
    width: calc(100vw * 360 / 480);  /* ← 480px時 360px */
    max-width: 360px;
    margin: 0 auto;
  }

  /* ===== ボタン下 60px余白 ===== */
  .footer__btn{
    margin-top: calc(100vw * 20 / 480);
    margin-bottom: calc(100vw * 30 / 480);
  }
  .footer__btn-label{
    font-size: calc(100vw * 15 / 480);
    line-height: 1.4;
  }
  /* 応募完了：左にキラキラ（HTML変更なし） */
.done__title{
  position: relative;
  display: inline-block; /* 擬似要素の基準をタイトル幅にする */
}

.done__title::before{
  content: "";
  position: absolute;
  left: calc(100% * -0.25);
  top: 50%;
  transform: translateY(-60%);
  width: 34px;
  height: 34px;
  background: url("images/パス 310.svg") no-repeat center / contain;
  pointer-events: none;
}

}

@media (min-width: 481px){
  .intro__hashtag-line > .intro__text {
    transform: translateY(calc(100vw * 3 / 480)); 
  }
  .footer__btn::after{
    content: "›";
    font-size: 3rem;
    margin-left: auto;
    line-height: 1;
  }
  .intro__content--2::after{
    content: "";
    position: absolute;

    left: clamp(-120px, calc(100vw * -120 / 1280), -72px);
    top:  clamp(73px,   calc(100vw * 122 / 1280), 122px);

    width:  clamp(100px, calc(100vw * 166 / 1280), 166px);
    height: clamp(100px, calc(100vw * 166 / 1280), 166px);

    background: url("images/miruru.png") no-repeat center / contain;
    pointer-events: none;
    z-index: 999;
  }

}

@media (min-width: 481px) and (max-width: 768px){

  .intro__content--2::after{
    content: "";
    position: absolute;

    left: clamp(-90px, calc(100vw * -120 / 1280), -45px);
    top:  clamp(55px,  calc(100vw * 122 / 1280), 95px);

    width:  clamp(90px, calc(100vw * 166 / 1280), 130px);
    height: clamp(90px, calc(100vw * 166 / 1280), 130px);

    background: url("images/miruru.png") no-repeat center / contain;
    pointer-events: none;
    z-index: 999;
  }
}

@media (max-width: 480px){

  .intro__content--2::after{
    content: "";
    position: absolute;

    left: clamp(-25px, calc(100vw * -120 / 1280), -20px);
    top: clamp(
      20px,
      calc(20px + (100vw - 375px) * 0.190476),
      40px
    );

    width:  clamp(70px, calc(100vw * 166 / 1280), 100px);
    height: clamp(70px, calc(100vw * 166 / 1280), 100px);

    background: url("images/miruru.png") no-repeat center / contain;
    pointer-events: none;
    z-index: 999;
  }
}