@charset "utf-8";
/* =========================================================
   PEACHY COFFEE / 白桃ラテ LP
   モバイルファースト（基準幅 390px）
   値はすべて Figma "peachy_latte" の実測値
   ========================================================= */

/* ---------- design tokens ---------- */
:root{
  /* colour */
  --ink:      #4a3b3c;
  --pink:     #ff8da1;
  --rose:     #fb7185;
  --rose-dp:  #f43f5e;
  --hot:      #ef495f;
  --marker:   #fd7c90;
  --blush:    #fdbec4;
  --pale:     #fff1f2;
  --feature:  #fff5f6;
  --mint:     #88ddad;
  --yellow:   #facc15;
  --brown:    #6b4a4c;
  --logo:     #a2845e;
  --muted:    #6b7280;
  --card-alt: #fffafb;

  /* type */
  --jp:  "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --en:  "Aboreto", serif;
  --scr: "Sacramento", cursive;
  --abel:"Abel", sans-serif;
  --mono:"Ubuntu Sans Mono", "Zen Maru Gothic", monospace;

  /* layout */
  --col: 390px;
  --gutter: 25px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:#efe9e9;
  color:var(--ink);
  font-family:var(--jp);
  font-weight:500;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,dl,dd,dt,ol,ul,figure{ margin:0; }
ol,ul{ padding:0; list-style:none; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
/* display 指定が hidden 属性を打ち消さないように */
[hidden]{ display:none !important; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* ---------- LP column ---------- */
.lp{
  position:relative;
  width:min(100%, var(--col));
  margin-inline:auto;
  background:linear-gradient(160deg,#fff1f2 0%,#ffe4e6 50%,#fecdd3 100%);
  overflow:hidden;      /* 非対応ブラウザ向けフォールバック */
  overflow:clip;        /* clip はスクロールコンテナを作らないので sticky が効く */
}
/* PC は Figma の image 10 を背景に敷き、390px カラムを中央に置く。
   body 背景 + background-attachment:fixed は overflow-x:hidden と相性が悪いので
   ビューポート固定の専用レイヤーにしている */
.pc-bg{ display:none; }

@media (min-width:768px){
  .pc-bg{
    display:block;
    position:fixed;
    inset:0;
    z-index:-1;
    overflow:hidden;
    background:#fff;                 /* Desktop - 3 の下地 */
  }
  .pc-bg::before{                    /* image 10 : レイヤーブラー 10px */
    content:"";
    position:absolute;
    inset:-24px;
    background:url("assets/pc-bg.webp") center center / cover no-repeat;
    filter:blur(10px);
  }
  .pc-bg::after{                     /* Rectangle 11 : 白 40% のオーバーレイ */
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.4);
  }
  .lp{ box-shadow:0 0 40px rgba(93,57,55,.18); }
}

/* =========================================================
   共通パーツ
   ========================================================= */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:60px;
  padding:16px 24px;
  border-radius:9999px;
  font-size:16px;
  font-weight:700;
  line-height:1.5;
  text-align:center;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.03); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:3px solid var(--hot); outline-offset:3px; }
.btn .icon{ width:1.4em; height:1.4em; flex:none; }

.btn--rose  { background:var(--hot);   color:#fff; box-shadow:0 10px 25px -5px rgba(253,164,175,.4); }
.btn--white { background:#fff;         color:var(--hot); box-shadow:0 8px 18px rgba(86,46,47,.12); }
.btn--ink   { background:var(--ink);   color:#fff; box-shadow:0 10px 15px -3px rgba(0,0,0,.1); }
.btn--yellow{ background:var(--yellow);color:var(--ink); box-shadow:0 8px 32px rgba(255,182,193,.3); }

/* セクション見出し（MENU / FEATURE） */
.sec-head{ text-align:center; }
.sec-head__en{
  font-family:var(--en);
  font-weight:400;
  font-size:60px;
  line-height:1.4;
  letter-spacing:.02em;
}
.sec-head__ja{
  margin-top:8px;
  font-size:24px;
  font-weight:500;
  line-height:1;
}

/* 波形 */
.wave{ position:absolute; left:0; width:100%; display:block; pointer-events:none; }
/* 白い弧がピンクの下端に食い込む（problem → menu の境目） */
.wave--problem     { bottom:9px; height:46px;  fill:#fff; z-index:2; transform:scaleY(-1); }
.wave--feature-top { top:0; height:70px; fill:#fff; z-index:2; }
/* feature 下端：ピンクが下から波打って立ち上がり、そのまま coupon へ繋がる */
.wave--feature-btm { bottom:0; height:42px; fill:var(--rose); z-index:2; transform:scaleX(-1); }
/* coupon 下端：ピンクが波打って CTA に垂れる（上下反転） */
.wave--campaign    { bottom:-31px; height:42px; fill:var(--rose); z-index:2; transform:scaleY(-1); }
.wave--footer      { top:0; height:360px; fill:var(--brown); z-index:0; }

/* スクロールリビール */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   01 FV  — 390x820 / 背景画像の上にテキストを実測位置で配置
   ========================================================= */
.fv{
  position:relative;
  container-type:inline-size;
  aspect-ratio:390 / 820;
  background:url("assets/hero.webp") center / cover no-repeat;
}
.fv > *{ position:absolute; }

/* 22,27 / 340x28 */
.fv__logo{
  left:5.641%; top:3.293%;
  width:87.18%;
  font-family:var(--abel);
  font-size:4.103cqw;      /* 16px @390 */
  line-height:1.75;
  letter-spacing:.0625em;  /* 1px @16 */
  color:var(--logo);
}
/* 92,79 / 200x144 */
.fv__title{
  left:23.590%; top:9.634%;
  width:51.28%;
  font-size:10.256cqw;     /* 40px @390 */
  font-weight:900;
  line-height:1.2;
  letter-spacing:0;
}
.grad,
.fv__accent{
  background:linear-gradient(135deg,var(--rose-dp),var(--rose));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
/* 75,475 / 234x84 */
.fv__copy{
  left:19.231%; top:57.927%;
  width:60%;
  font-size:4.615cqw;      /* 18px @390 */
  font-weight:500;
  line-height:1.556;       /* 28/18 */
}
/* 78,583 / 226x40 */
.fv__seasonal{
  left:20%; top:71.098%;
  width:57.95%;
  font-family:var(--scr);
  font-size:10.256cqw;     /* 40px @390 */
  line-height:1;
  color:var(--hot);
  transform:rotate(-6deg); /* Figma: rotation 6°（反時計回り） */
  transform-origin:left bottom;
}
/* Figma: 25,719 / 340x58 = FV下端から 43px 上。
   初期位置はカンプ通り FV の中に置き、スクロールしたら追従する（sticky）。
   FV は aspect-ratio で高さが幅に比例するため、負マージンも % で指定して追従させる。
   101 / 390 = 25.9% */
.fv__cta{
  position:sticky;
  bottom:43px;
  z-index:60;
  display:flex;
  gap:16px;
  width:340px;
  max-width:calc(100% - 50px);
  margin:-25.9% auto calc(25.9% - 58px);
}
.fv__cta .btn{
  flex:1;
  min-height:0;
  padding:0 8px;
  height:58px;
  font-size:clamp(10px, 3.2vw, 12px);   /* 320px でも1行に収める */
  white-space:nowrap;
  gap:6px;
}
.fv__cta .btn .icon{ width:1.8em; height:1.8em; }

/* =========================================================
   02 PROBLEM
   ========================================================= */
.problem{
  position:relative;
  margin-top:-16px;        /* Figma: FV とグローが 16px 重なる */
  padding:40px 18px 95px;
  z-index:3;               /* 下端の白い弧を menu より前面に出す */
}
/* Rectangle 6 : 390x500 を 16px 下から */
.problem::before{
  content:"";
  position:absolute;
  inset:16px 0 auto;
  height:500px;
  background:var(--blush);
  z-index:-2;
}
/* Glow effect : 426x525 をにじませる */
.problem::after{
  content:"";
  position:absolute;
  inset:0 -18px;
  background:radial-gradient(ellipse at 50% 45%, rgba(255,241,242,.55), transparent 65%);
  filter:blur(40px);
  z-index:-1;
}
.problem__inner{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:32px;
  min-height:390px;
  padding-inline:7px;      /* 18 + 7 = 25px ガター */
  text-align:center;
}
.problem__title{
  font-size:28px;
  font-weight:700;
  line-height:1.4;
}
.problem__list{
  display:flex;
  flex-direction:column;
  gap:16px;
  font-size:18px;
  font-weight:500;
  line-height:1.556;
}
.problem__list mark{
  padding:1px 6px;
  background:var(--marker);
  color:#fff;
  border-radius:2px;
}
.problem__answer{
  font-size:24px;
  font-weight:700;
  line-height:1.333;
  color:var(--pink);
}

/* =========================================================
   03 MENU
   ========================================================= */
.menu{
  position:relative;
  margin-top:-9px;         /* Figma: 波形の重なり */
  padding:60px 0;
  background:#fff;
  text-align:center;
  z-index:1;
}
/* Figma: div.flex 340x671 / 塗り #fff1f2 30% / 線 #ffe4e6 1px inside / radius 40 */
.menu__card{
  width:340px;
  max-width:calc(100% - var(--gutter) * 2);
  margin:24px auto 0;
  padding:0 0 40px;
  border:1px solid #ffe4e6;
  border-radius:40px;
  background:rgba(255,241,242,.3);
}
.product{ padding:0; }
/* Figma: Frame 7 内で halo(div.relative) が y=21 / 256x256、
   ドリンク(image 2) が y=-18 / 高さ295。Group 5 の下端は 277 */
.product__visual{
  position:relative;
  height:277px;
}
.product__halo{
  position:absolute;
  left:50%; top:21px;
  width:256px; height:256px;
  margin-left:-128px;
  border-radius:50%;
  background:linear-gradient(180deg,#fecdd3,#fff);
  box-shadow:0 10px 25px -5px rgba(253,164,175,.4);
}
.product__visual img{
  position:absolute;
  left:50%; top:-18px;
  width:174px; height:295px;
  transform:translateX(-50%);
  filter:drop-shadow(0 14px 20px rgba(133,64,57,.16));
}
.product__head{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:16px;
  margin-top:32px;
}
.product__name{
  font-size:36px;
  font-weight:900;
  line-height:1.4;
}
.product__price{
  font-size:48px;
  font-weight:700;
  line-height:1;
  color:var(--pink);
}
.product__price small{
  margin-left:2px;
  font-size:14px;
  font-weight:400;
  color:var(--muted);
}
.product__desc{
  margin-top:16px;
  font-size:18px;
  font-weight:500;
  line-height:1.8;
}
.product__note{
  margin-top:16px;
  font-size:14px;
  font-weight:700;
  color:var(--pink);
}
.menu__card .btn--ink{ margin:48px 20px 0; }

/* =========================================================
   04 FEATURE
   ========================================================= */
.feature{
  position:relative;
  padding:80px 0 146px;  /* 40 + 波42 + リボンの逃げ64 */
  background:var(--feature);
  overflow:hidden;
  z-index:4;
}
/* Figma: Decorative blurred circles / radius 9999 / 不透明度 25% / レイヤーブラー 80 */
.blob{
  position:absolute;
  border-radius:9999px;
  opacity:.25;
  filter:blur(80px);
  pointer-events:none;
  z-index:0;
}
.blob--a{ width:444px; height:300px; left:-210px; top:967px;  background:#f1d2ab; }
.blob--b{ width:288px; height:195px; left:141px;  top:1586px; background:#ffcdcd; }
.blob--c{ width:444px; height:300px; left:143px;  top:436px;  background:#ffcdcd; }

.feature .sec-head,
.feature .reason{ position:relative; z-index:1; }

.reason{ margin-top:40px; }
.reason + .reason{ margin-top:80px; }

/* Figma: Frame 16 は 390x200。画像は 320x200 で片側だけ radius 200（＝半円）。
   数字は Sacramento 64px、y=136 固定 */
.reason__visual{
  position:relative;
  height:200px;
}
.reason__visual img{
  width:320px; height:200px;
  object-fit:cover;
}
.reason__num{
  position:absolute;
  top:136px;
  font-family:var(--scr);
  font-size:64px;
  line-height:1;
  color:var(--mint);
}

/* 理由1・3 : 画像が左寄せ・右側が半円 / 数字は x=300 で画像の上に重なる */
.reason--left .reason__visual img{
  margin-right:auto;
  border-radius:0 100px 100px 0;
}
.reason--left .reason__num{ left:300px; z-index:1; }

/* 理由2 : 画像が右寄せ・左側が半円 / 数字は x=0 で画像の "下" に潜る */
.reason--right .reason__visual img{
  position:relative;
  z-index:1;
  margin-left:auto;
  margin-right:-10px;    /* Figma: x=80 なので右に 10px はみ出す */
  border-radius:100px 0 0 100px;
}
.reason--right .reason__num{ left:0; z-index:0; }

.reason__body{
  margin-top:24px;
  padding:0 var(--gutter);
}
.reason__body h3{
  font-size:24px;
  font-weight:700;
  line-height:1.333;
}
.reason__body p{
  margin-top:8px;
  font-size:16px;
  font-weight:500;
  line-height:1.4;
}

/* =========================================================
   05 CAMPAIGN
   ========================================================= */
.campaign{
  position:relative;
  padding:30px 0 10px;
  background:linear-gradient(155deg,var(--rose),var(--pink));
  color:#fff;
  text-align:center;
  z-index:5;
}
/* Figma: 塗り #facc15 / 線 白 2px 外側 / radius 9999 / 回転 -12° */
.ribbon{
  position:absolute;
  left:158px; top:-86px;
  display:grid;
  place-content:center;
  width:96px; height:96px;
  border-radius:50%;
  background:var(--yellow);
  color:var(--ink);
  font-size:18px;
  font-weight:900;
  line-height:1.556;
  transform:rotate(-12deg);
  box-shadow:0 0 0 2px #fff, 0 8px 24px rgba(133,64,57,.18);
  z-index:3;
}
.campaign__title{
  padding:0 var(--gutter);
  font-size:24px;
  font-weight:700;
  line-height:1.333;
}
.campaign__lead{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  margin-top:24px;
  padding:0 var(--gutter);
}
.tag{
  padding:4px 16px;
  border-radius:9999px;
  background:rgba(255,255,255,.2);
  font-size:14px;
  font-weight:500;
  line-height:1.43;
}
.coupon{ width:100%; }   /* 透過PNGなので角丸は不要（ノッチが欠けるため） */
.campaign__note{
  font-size:18px;
  font-weight:700;
  line-height:1.556;
}
.campaign__note b{ color:var(--yellow); }

.campaign__cards{
  display:flex;
  flex-direction:column;
  gap:40px;
  margin-top:24px;
  padding:30px var(--gutter);
  background:linear-gradient(200deg,var(--pink),var(--rose));
}
.card{
  padding:32px;
  border-radius:24px;
  background:#fff;
  color:var(--ink);
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1);
}
.card h3{
  font-size:24px;
  font-weight:700;
  line-height:1.4;
  text-align:center;
}

/* キャンペーン概要 */
.detail{
  margin-top:32px;
  display:flex;
  flex-direction:column;
  gap:24px;
  text-align:left;
}
.detail dt{
  padding:12px;
  border-radius:8px;
  background:var(--pale);
  font-size:16px;
  font-weight:700;
  line-height:1.5;
  color:var(--pink);
}
.detail dd{
  padding:0 2px;
  font-size:16px;
  font-weight:500;
  line-height:1.5;
}
.detail dd small{
  display:block;
  margin-top:8px;
  font-size:14px;
  font-weight:400;
  color:var(--pink);
}
.period{ display:flex; align-items:center; gap:8px; }
.period__d{
  font-size:32px;
  font-weight:700;
  line-height:1;
}
.period__d small{
  margin-left:4px;
  font-size:16px;
  font-weight:500;
}
.period__sep{ font-size:32px; font-weight:500; line-height:1; }

/* 3ステップ */
.steps__title{ white-space:nowrap; font-size:22px; }
.steps__title b{ font-size:30px; color:var(--pink); }
.steps{
  display:flex;
  flex-direction:column;
  gap:24px;
  margin-top:32px;
  text-align:left;
}
.steps li{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  font-weight:700;
  line-height:1.5;
}
/* Figma: 塗り白 / 線 #ff8da1 1px 内側 / radius 40 */
.steps__badge{
  flex:none;
  display:grid;
  place-content:center;
  width:84px; height:26px;
  border:1px solid var(--pink);
  border-radius:40px;
  background:#fff;
  color:var(--pink);
  font-family:var(--abel);
  font-size:18px;
  font-weight:700;
  line-height:1;
}
.card .btn--yellow{ margin-top:32px; }

/* =========================================================
   06 FINAL CTA
   ========================================================= */
.final{
  position:relative;
  padding-top:60px;
  background:var(--blush);
  text-align:center;
  z-index:1;
}
.final__text{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  padding:0 var(--gutter);
}
.final__text h2{
  font-size:30px;
  font-weight:900;
  line-height:1.25;
}
.final__text p{
  font-size:20px;
  font-weight:500;
  line-height:1.4;
}
.final__text .btn{ width:340px; max-width:100%; }
/* Figma: Group 10 = 390x478（ピンク背景ごと書き出し） */
.final__visual{ margin-top:25px; }
.final__visual img{ width:100%; height:auto; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  position:relative;
  margin-top:-205px;       /* Figma: 茶色のカーブが商品写真に重なる */
  padding:54px 0 10px;
  color:#fff;
  text-align:center;
  z-index:2;
}
.footer__inner{ position:relative; z-index:1; padding-bottom:30px; }
/* 固定CTA(58px + 下43px)にフッターが隠れないよう逃げを作る */
.footer{ padding-bottom:calc(10px + 58px + 43px); }
.footer__logo{
  font-family:var(--abel);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.0625em;
}
.footer__nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  margin-top:16px;
  padding:0 var(--gutter);
  font-size:14px;
  font-weight:400;
  line-height:1.43;
}
.footer__nav a{ transition:opacity .2s; }
.footer__nav a:hover{ opacity:.7; text-decoration:underline; }
.footer__copy{
  display:block;
  margin-top:16px;
  padding-top:8px;
  font-size:12px;
  line-height:1.33;
}

/* =========================================================
   PC サイド装飾（Figma Desktop - 3 準拠）
   カラム(390px)の左右に十分な余白がある 1200px 以上でのみ表示
   ========================================================= */
.pc-side{ display:none; }

@media (min-width:1200px){
  .pc-side{
    position:fixed;
    top:50%;
    transform:translateY(-50%);
    z-index:5;
    display:block;
    text-align:center;
    pointer-events:none;
  }

  /* Figma: x=170 y=338 / 200x144 */
  .pc-side--left{
    right:calc(50% + 350px);
    width:200px;
    font-size:40px;
    font-weight:900;
    line-height:1.2;
    color:var(--ink);
  }
  .pc-side--left p{ margin:0; }

  /* Figma: Frame 47 x=1105 y=302 / 146x216 / VERTICAL gap 6 */
  .pc-side--right{
    left:calc(50% + 385px);
    width:146px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    font-family:var(--mono);
    pointer-events:auto;
  }
  .pc-side__label{
    font-size:18px;
    font-weight:500;
    line-height:1;
    letter-spacing:.01em;
    color:var(--ink);
  }
  .pc-side__mobile{
    font-size:40px;
    font-weight:400;
    line-height:1;
  }
  .pc-side__order{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:32px;
    font-weight:400;
    line-height:1;
  }
  .pc-side__order svg{ width:30px; height:30px; flex:none; }
  .pc-side__qr{
    width:73px; height:74px;
    margin-top:10px;
    border-radius:4px;
  }
  .pc-side__note{
    margin-top:8px;
    font-size:18px;
    font-weight:500;
    line-height:1;
    letter-spacing:.01em;
  }
}

/* =========================================================
   追従 CTA
   ========================================================= */

.floating{ display:none !important; }
.floating--unused{
  position:fixed;
  right:16px; bottom:16px;
  z-index:50;
  display:flex;
  align-items:center;
  gap:6px;
  padding:14px 22px;
  border-radius:9999px;
  background:var(--hot);
  color:#fff;
  font-size:14px;
  font-weight:700;
  box-shadow:0 10px 25px -5px rgba(239,73,95,.5);
  opacity:0;
  transform:translateY(16px);
  transition:opacity .3s ease, transform .3s ease;
}
.floating .icon{ width:18px; height:18px; }
.floating.is-in{ opacity:1; transform:none; }
.floating:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
@media (min-width:768px){
  
.floating{ display:none !important; }
.floating--unused{ right:calc(50% - 195px - 76px); }
}

/* =========================================================
   スクロール演出の強化
   ========================================================= */

/* カウントアップ中に桁で幅が揺れないよう等幅数字に */
.count{ font-variant-numeric:tabular-nums; }

/* FV のパララックス（--fv-shift は JS が更新） */
.fv{ background-position:center calc(50% + var(--fv-shift, 0px)); }

/* FEATURE の画像はリビール時にゆっくり寄る */
.reason__visual img{
  transform:scale(1.08);
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
.reason.is-in .reason__visual img{ transform:scale(1); }

/* 波をゆっくり左右に揺らす（transform とは別プロパティなので反転と併用できる） */
@keyframes wave-drift{ 0%,100%{ translate:0 0 } 50%{ translate:-14px 0 } }
.wave--feature-btm,
.wave--campaign{
  width:calc(100% + 32px);
  animation:wave-drift 11s ease-in-out infinite;
}
.wave--problem{
  width:calc(100% + 24px);
  animation:wave-drift 14s ease-in-out infinite reverse;
}

/* 見出しはわずかに遅れて出す */
.sec-head.is-in .sec-head__ja{ animation:fade-up .8s .15s both; }
@keyframes fade-up{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

@media (prefers-reduced-motion:reduce){
  .reason__visual img{ transform:none !important; transition:none !important; }
  .wave--feature-btm,.wave--campaign,.wave--problem{ animation:none !important; width:100% !important; }
  .sec-head.is-in .sec-head__ja{ animation:none !important; }
  .fv{ background-position:center center !important; }
}

/* =========================================================
   応募フォーム（モーダル）
   ========================================================= */
.modal[hidden]{ display:none !important; }
.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:16px;
}
.modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(74,59,60,.55);
  backdrop-filter:blur(3px);
  animation:modal-fade .25s ease both;
}
.modal__panel{
  position:relative;
  width:min(100%, 380px);
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:32px 24px 28px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 24px 60px -12px rgba(86,46,47,.4);
  animation:modal-in .32s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes modal-fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes modal-in{ from{ opacity:0; transform:translateY(18px) scale(.98) } to{ opacity:1; transform:none } }

.modal__close{
  position:absolute;
  top:12px; right:12px;
  width:36px; height:36px;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:var(--pale);
  color:var(--ink);
  cursor:pointer;
  transition:background .2s;
}
.modal__close:hover{ background:#ffe4e6; }
.modal__close svg{ width:18px; height:18px; }
.modal__close:focus-visible{ outline:3px solid var(--hot); outline-offset:2px; }

.modal__eyebrow{
  display:inline-block;
  padding:4px 14px;
  border-radius:9999px;
  background:var(--pale);
  color:var(--pink);
  font-size:13px;
  font-weight:700;
  line-height:1.4;
}
.modal__title{
  margin-top:12px;
  font-size:26px;
  font-weight:900;
  line-height:1.35;
}
.modal__desc{
  margin-top:10px;
  font-size:14px;
  font-weight:500;
  line-height:1.7;
  color:#6b5a5b;
}
.modal__desc b{ color:var(--pink); }

/* ---- フォーム ---- */
.form{ margin-top:22px; display:flex; flex-direction:column; gap:16px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:14px; font-weight:700; }
.req{
  margin-left:6px;
  padding:1px 7px;
  border-radius:4px;
  background:var(--hot);
  color:#fff;
  font-size:11px;
  font-weight:700;
  vertical-align:1px;
}
.field input[type=text],
.field input[type=email]{
  width:100%;
  padding:13px 14px;
  border:1px solid #ffd9de;
  border-radius:12px;
  background:#fffafb;
  font-family:inherit;
  font-size:16px;          /* iOS の自動ズーム防止 */
  color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder{ color:#d9b9be; }
.field input:focus{
  outline:0;
  border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(255,141,161,.25);
}
.field input[aria-invalid="true"]{ border-color:var(--hot); background:#fff5f6; }
.field__hint{ font-size:12px; color:var(--muted); }
.field__error{ font-size:12px; font-weight:700; color:var(--hot); }

.field--check{ margin-top:2px; }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:13px; font-weight:500; line-height:1.6; cursor:pointer; }
.check input{ margin-top:2px; width:18px; height:18px; accent-color:var(--hot); flex:none; }
.check__link{ color:var(--pink); text-decoration:underline; }
.form__submit{ margin-top:6px; }

/* ---- 送信完了 ---- */
.modal__done{ text-align:center; padding:8px 0 4px; animation:fade-up .4s both; }
.modal__done-mark{
  display:grid; place-items:center;
  width:64px; height:64px;
  margin:0 auto 16px;
  border-radius:50%;
  background:var(--pale);
  color:var(--hot);
}
.modal__done-mark svg{ width:30px; height:30px; }
.modal__done h3{ font-size:22px; font-weight:900; line-height:1.4; }
.modal__done p{ margin-top:10px; font-size:14px; font-weight:500; line-height:1.8; color:#6b5a5b; }
.modal__done .btn{ margin-top:22px; }

/* モーダル表示中は背面をスクロールさせない */
body.is-locked{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .modal__overlay,.modal__panel,.modal__done{ animation:none !important; }
}