@charset "UTF-8";
/* =========================================================
   Marché Bloom  ―  LP
   Design: Figma / LP_PC_Design (1366) + LP_SP_Design (400)
   ========================================================= */

:root{
  --pink:        #fff3f0;
  --pink-footer: #fff3f0;
  --red:         #ea5550;
  --ink:         #000;
  --line:        #edd6d6;
  --card:        rgba(255,255,255,.6);
  --inner:       1000px;
  --font:        "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scrollbar-gutter:stable; }
body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; height:auto; }
ul{ margin:0; padding:0; list-style:none; }
p,h1,h2,h3{ margin:0; }
a{ color:inherit; text-decoration:none; }

.u-visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.inner{
  width:var(--inner);
  max-width:calc(100% - 40px);
  margin-inline:auto;
  position:relative;
}

.deco{ position:absolute; pointer-events:none; z-index:0; }

/* ---------- shared typography ---------- */
.head-en img{ height:auto; }
/* en見出しとjaサブタイトルの組。jaはen見出しの幅に対して中央 */
.head{ width:max-content; max-width:100%; }
.head .head-ja{ text-align:center; }
.head-en--center{ display:flex; justify-content:center; }
.head-ja{
  font-weight:700;
  font-size:16px;
  line-height:23px;
  letter-spacing:.05em;
  color:var(--red);
}
.head-ja--center{ text-align:center; }
.lead{
  font-size:15px;
  line-height:27px;
  letter-spacing:.05em;
}

/* price ------------------------------------------------ */
.price{
  display:block;
  font-weight:400;
  line-height:20px;
  white-space:nowrap;
}
.price__qty{ font-size:14px; margin-right:.5em; }
.price__yen{ font-size:16px; }
.price__num{ font-size:23px; margin-left:.25em; }
.price__tax{ font-size:14px; }
.price--stack .price__qty{ display:block; margin:0 0 4px; }

/* =========================================================
   loading
   ========================================================= */
html.is-loading,
html.is-loading body{ overflow:hidden; }

.loading{ display:none; }
html.is-loading .loading{
  display:grid;
  place-items:center;
  position:fixed;
  inset:0;
  z-index:1000;
  background:#fff;
  overflow:hidden;
}
.loading__stage{
  position:relative;
  width:1366px;
  height:750px;
  /* デザイン(1366x750)の構図を保ったままビューポートを覆う。
     倍率 --ls は head のインラインスクリプトが初回描画前に算出する */
  transform:scale(var(--ls, 1));
}
.loading__logo{
  position:absolute;
  left:524px;
  top:246px;
  width:318px;
  transform-origin:50% 50%;
  will-change:transform;
}
.ld{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  will-change:transform, opacity;
}

/* 再生開始 */
html.is-play .loading__logo{
  animation:ld-pop 1.05s linear .12s both;
}
html.is-play .ld{
  animation:ld-fly var(--dur, .9s) cubic-bezier(.42,0,.75,.35) both;
  animation-delay:calc(.8s + var(--d));
}
html.is-play .loading{
  animation:ld-out .55s ease 2.1s forwards;
}

/* 縮む → 伸びる → 減衰して止まる。区間ごとに easing を持たせ、
   折り返しで速度が0になるようにして引っ掛かりを消している。
   全体の animation-timing-function は linear（二重掛けを避ける）。 */
@keyframes ld-pop{
   0%{ transform:scale(1);     animation-timing-function:cubic-bezier(.33,0,.3,1); }
  28%{ transform:scale(.895);  animation-timing-function:cubic-bezier(.3,0,.25,1); }
  60%{ transform:scale(1.042); animation-timing-function:cubic-bezier(.4,0,.3,1); }
  78%{ transform:scale(.986);  animation-timing-function:cubic-bezier(.4,0,.35,1); }
  90%{ transform:scale(1.007); animation-timing-function:cubic-bezier(.4,0,.4,1); }
 100%{ transform:scale(1); }
}
/* --fx/--fy はロゴ中心から各花への放射方向（角度・距離に揺らぎ）。
   遠ざかる感を出すため終端で少し縮める。 */
@keyframes ld-fly{
   0%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); opacity:1; }
  12%{ opacity:1; }
 100%{ transform:translate3d(var(--fx),var(--fy),0) rotate(var(--fr)) scale(.72); opacity:0; }
}
@keyframes ld-out{
  to{ opacity:0; visibility:hidden; }
}

/* ---------- ローディング明け：コピー → ロゴ → ハンバーガー ---------- */
html.is-loading .hero__copy img,
html.is-loading .header__logo,
html.is-loading .menu-btn{ opacity:0; }

html.is-loaded .hero__copy img{ animation:intro-up   .9s cubic-bezier(.2,.7,.3,1)      0s both; }
html.is-loaded .header__logo  { animation:intro-logo .7s cubic-bezier(.34,1.3,.5,1) .35s both; }
html.is-loaded .menu-btn      { animation:intro-btn  .6s cubic-bezier(.2,.8,.3,1)   .65s both; }

@keyframes intro-up{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}
@keyframes intro-logo{
  from{ opacity:0; transform:translateY(10px) scale(.94); }
  to  { opacity:1; transform:none; }
}
@keyframes intro-btn{
  from{ opacity:0; transform:translateX(30px); }
  to  { opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  html.is-play .loading__logo,
  html.is-play .ld{ animation:none; }
  html.is-play .loading{ animation:ld-out .3s linear .2s forwards; }
  html.is-loaded .hero__copy img,
  html.is-loaded .header__logo,
  html.is-loaded .menu-btn{ animation:intro-fade .4s linear both; }
  html.is-loaded .header__logo{ animation-delay:.15s; }
  html.is-loaded .menu-btn{ animation-delay:.3s; }
}
@keyframes intro-fade{ from{ opacity:0; } to{ opacity:1; } }

/* =========================================================
   header
   ========================================================= */
.header{
  position:absolute;
  inset:0 0 auto 0;
  z-index:50;
  height:0;
}
.header__logo{
  position:absolute;
  left:2.64%;
  top:41px;
  width:154px;
}
.header__logo img{ display:block; width:100%; height:auto; }
.menu-btn{
  /* ロゴは流れて消えるが、ボタンだけは常時追従させる */
  position:fixed;
  right:0;
  top:45px;
  width:108px;
  height:108px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0;
  border:0;
  border-radius:19px 0 0 19px;
  background:rgba(255,255,255,.8);
  cursor:pointer;
  transition:background .25s, right .45s cubic-bezier(.22,.8,.3,1);
}
.menu-btn:hover{ background:#fff; }
.menu-btn__bars{ display:block; width:49px; height:32px; position:relative; }
.menu-btn__bars i{
  position:absolute; left:0; width:49px; height:6px;
  background:#000; border-radius:3px;
  transition:transform .3s ease, opacity .2s;
}
.menu-btn__bars i:nth-child(1){ top:0; }
.menu-btn__bars i:nth-child(2){ top:13px; }
.menu-btn__bars i:nth-child(3){ top:26px; }
.menu-btn__label{ width:49px; }
.menu-btn__label--close{ display:none; }

/* 展開時：ドロワーの左辺にぴたりと寄る（デザインは x=858、幅400のドロワー左隣） */
body.is-nav-open .menu-btn{
  right:400px;
}
body.is-nav-open .menu-btn__label--menu{ display:none; }
body.is-nav-open .menu-btn__label--close{ display:block; }
.menu-btn__sr--close{ display:none; }
body.is-nav-open .menu-btn__sr--open{ display:none; }
body.is-nav-open .menu-btn__sr--close{ display:block; }

/* 展開中の背後コンテンツを黒く落とす。
   ドロワー自体はFigmaどおり rgba(255,255,255,.8) のままにしたいので、
   ドロワーの幅ぶんを除いた領域だけを覆う。 */
.gnav-scrim{
  position:fixed;
  inset:0;                       /* 全面。右端を切ると境目の縦線が出るため */
  z-index:44;
  background:rgba(0,0,0,.4);
  opacity:0;
  transition:opacity .45s ease;  /* ドロワーのスライドと同時に立ち上げる */
}
.gnav-scrim[hidden]{ display:none; }
.gnav-scrim.is-open{ opacity:1; }

/* global nav（右からのドロワー / Figma 158-996・159-723） ---- */
.gnav{
  position:fixed;
  top:0;
  right:0;
  z-index:45;
  width:400px;
  max-width:100%;
  height:100%;
  background:rgba(255,255,255,.8);
  overflow-y:auto;
  overscroll-behavior:contain;
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.22,.8,.3,1);
}
.gnav[hidden]{ display:none; }
.gnav.is-open{ transform:none; }

.gnav__list{
  width:188px;
  margin:118px auto 0;
}
.gnav__list li{
  height:87px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid #000;
}
.gnav__list li:last-child{ border-bottom:0; }
.gnav__list a{ display:block; transition:opacity .2s; }
.gnav__list a:hover{ opacity:.55; }
.gnav__list img{ display:block; width:var(--w); }
.gnav__copy{
  margin-top:114px;
  padding-bottom:40px;
  text-align:center;
  font-weight:500;
  font-size:13px;
  line-height:20px;
}

/* =========================================================
   hero
   ========================================================= */
.hero{
  position:relative;
  background:var(--pink);
  /* デザイン(1366x916)の比率のまま画面幅に追従させる。
     以前は 916px / 324px / 86px で頭打ちにしていたため、
     1920px などの広い画面で高さだけ伸びず横長に潰れて見えていた。 */
  padding-bottom:6.3vw;
}
.hero__media{
  height:67.06vw;
  background:url("../images/hero.webp") center/cover no-repeat;
}
.hero__scrim{
  position:absolute; inset:0 0 auto 0;
  height:23.7vw;
  background:linear-gradient(to top, rgba(255,255,255,0) 5.6%, rgba(0,0,0,.2) 84.5%);
}
/* hero-copy.webp は Figma で回転とグローを焼き込んだ素材（951x496）。
   CSSで rotate を掛けると二重に傾くので transform は持たせない。
   位置とサイズは、旧SVG(517x215 + rotate -13.49deg)の見た目の外接矩形
   （552.5x329.3 / 中心 x66.6% y21.5%）に文字の実描画が重なるよう実測で合わせた。
   素材内の文字は x 1.9%〜96.7% / y 6.5%〜96.6% を占める。 */
.hero__copy{
  position:absolute;
  left:45.6%;
  top:5.9%;
  width:42.6%;
}
.hero__wave{
  position:absolute;
  left:0; bottom:-1px;
  width:100%;
  height:auto;
}

/* =========================================================
   about
   ========================================================= */
.about{
  position:relative;
  padding:34px 0 245px;
  background:linear-gradient(var(--pink) 0 479px, #fff 479px);
}
/* 見出しが .about の枠より43px上に出ている（padding-top34px + top:-77px）ため、
   #about へアンカーで飛ぶと "About" が画面上に隠れる。そのぶんを scroll-margin で逃がす。
   SPでは見出しが static に戻る（下のSP節）ので、そちらで 0 に戻している。 */
#about{ scroll-margin-top:90px; }
.head-en--about{
  position:absolute;
  left:-5px;
  top:-77px;
  width:169px;
}
.about__text{
  position:relative;
  z-index:1;
  font-weight:500;
  font-size:17px;
  line-height:40px;
  letter-spacing:.1em;
}
.deco--bouquet-top{ top:-104px; left:53.9%; width:452px; }
.deco--poppy5{ top:229px; left:0; width:486px; --px:-164px; --py:-157px; }

/* =========================================================
   line up
   ========================================================= */
.lineup{
  position:relative;
  padding:202px 0 175px;
}
.head-en--lineup{ display:flex; justify-content:center; }
.head-en--lineup img{ width:206px; }

.lineup__list{
  margin-top:62px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
}
.lineup-card a{ display:block; text-align:center; }
.lineup-card__disc{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:238.94/243;
  border-radius:50%;
  background:var(--pink);
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.lineup-card a:hover .lineup-card__disc{ transform:translateY(-6px); }
.lineup-card__disc img{ width:auto; max-height:78%; max-width:88%; }
.lineup-card__name{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  margin-top:29px;
  height:27px;
}
.lineup-card__name img{ max-height:27px; width:auto; }
/* name-bloom.svg だけ箱にqのディセンダが入る（viewBox高30のうちベースラインは22.6、
   他は箱の高さ＝ベースラインで約20.9）。同じ max-height で揃えると文字だけ大きくなるので、
   ベースラインまでが21pxになる高さ(27.9px)を直に指定する。
   さらに align-items:flex-end は箱の底＝ディセンダの底で揃えるので、
   ベースラインより下のぶん(6.9px)を負マージンで下げて他とベースラインを合わせる */
.lineup-card__name img[src$="name-bloom.svg"]{ max-height:none; height:27.9px; margin-bottom:-6.9px; }
.lineup-card__ja{
  display:block;
  margin-top:6px;
  font-weight:700;
  font-size:16px;
  line-height:23px;
  letter-spacing:.05em;
  color:var(--red);
}
.deco--poppy4{ top:376px; right:0; width:156px; --px:78px; --py:48px; }

/* =========================================================
   product grid (共通カード)
   ========================================================= */
.pcard{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.pcard__img{ display:flex; align-items:center; justify-content:center; }
.pcard__en{
  margin-top:9px;
  font-weight:700;
  font-size:16px;
  line-height:25px;
  color:var(--red);
}
.pcard__ja{ font-size:14px; line-height:25px; }
.pcard .price{ margin-top:9px; }

/* =========================================================
   Chouchou Bloom
   ========================================================= */
.chouchou{
  position:relative;
  padding-bottom:277px;
  background:#fff;
}
.chouchou__visual img{
  width:100%;
  height:min(47.29vw,646px);
  object-fit:cover;
  object-position:center top;   /* 上が切れるので上基準でトリミング */
}
.chouchou__body{
  position:absolute;
  top:235px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
}
.chouchou__body .head-en img{ width:359px; }
.chouchou__body .head-ja{ margin-top:15px; }
.chouchou__body .lead{ margin-top:22px; width:350px; max-width:100%; }

.deco--marguerite{ top:495px; left:0; width:342px; --px:-105px; --py:64px; }

.product-grid--tin{
  margin-top:115px;
  display:grid;
  grid-template-columns:repeat(3,253px);
  justify-content:center;
  row-gap:30px;
}
.product-grid--tin .pcard__img{ height:192px; align-items:flex-end; }
.product-grid--tin .pcard__img img{ width:142px; }
.product-grid--tin .pcard__en{ margin-top:6px; }
.product-grid--tin .price{ margin-top:4px; }

/* =========================================================
   Une Bloom
   ========================================================= */
.une{
  position:relative;
  padding:255px 0 114px;
  background:linear-gradient(var(--pink) 0 1488px, #fff 1488px);
}
/* padding-top 255px があるため #une で止まると見出しが画面のかなり下に来る。そのぶん持ち上げる */
#une{ scroll-margin-top:100px; }
.deco--une-disc{ top:-100px; left:6.08%; width:600px; z-index:1; }
/* 1366px設計での left:68.7% は右端ぴったり(938+429=1367px)を意味していたので、
   広い画面でも右に張り付くよう right:0 で持たせる */
.deco--tulip{ top:-204px; left:auto; right:0; width:429px; z-index:1; --px:190px; --py:114px; }
/* .une の下端を約380pxはみ出して .petit に掛かる。.deco の既定 z-index:0 のままだと
   後続の .petit{background:#fff} に塗り潰されて下が切れるため、正のz-indexで前に出す
   （本文は z-index:2 なので文字より下のまま） */
.deco--bouquet{ top:1136px; left:0; width:504px; z-index:1; --px:-116px; --py:-240px; }

.une__body{
  position:relative;
  z-index:2;
  margin-left:auto;
  margin-right:45px;
  width:350px;
}
.une__body .head-en img{ width:246px; }
.une__body .head-ja{ margin-top:15px; }
.une__body .lead{ margin-top:23px; }

.product-grid--stick{
  position:relative;
  z-index:2;
  margin-top:177px;
  display:grid;
  grid-template-columns:repeat(6,95px);
  justify-content:center;
  column-gap:61px;
}
/* Figma(Group 501 208:46): 6枚とも画像の上端が y=4487 で揃い、テキストは y=4727＝上端から240px。
   花の頭が上で揃い茎の長さが異なるデザインなので、下揃えではなく上揃えにする。
   画像実寸は tulip 87x236 / rose 89x238 / yuri 88x239 / marguerite 88x238 /
   cosmos・sunflower 87x234 で、HTMLのwidth/height属性がそのまま表示サイズ。 */
.product-grid--stick .pcard__img{ height:240px; align-items:flex-start; }
.product-grid--stick .pcard__en{ margin-top:0; }

.assort{ position:relative; z-index:2; margin-top:115px; }
.assort .head-ja--center{ margin-top:12px; }
.assort__list{
  margin-top:23px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:24px;   /* Figma: package3 右端707 → package6 左端731 */
}
.assort__list li{ text-align:center; }
.assort__img{ display:block; }
.assort__img img{ width:var(--w,171px); }
.assort__list .price{ margin-top:10px; }

/* =========================================================
   Petit Bouquet
   ========================================================= */
.petit{
  position:relative;
  padding:419px 0 239px;
  background:#fff;
}
/* 円形ディスクから矩形の写真に変わった（Figma: x514 y5366 / 852x809.5）。
   .petit の上端(5410)より44px上に出るが、その領域は .une の白地なので白背景のままでよい */
.deco--petit-disc{ top:-44px; left:37.63%; width:852px; }

.petit__body{ position:relative; z-index:2; width:350px; max-width:100%; }
.petit__body .head-en img{ width:350px; }
.petit__body .head-ja{ margin-top:11px; }
.petit__body .lead{ margin-top:10px; }

.petit__list{
  position:relative;
  z-index:2;
  margin-top:61px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:0;
}
/* Figma Group 513: 品目の間隔は 29 / 29 / 21px と一定ではない */
.petit__list li + li{ margin-left:29px; }
.petit__list li:nth-child(4){ margin-left:21px; }
.petit__list li{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.petit__img{ display:block; }
/* 画像の下端は品目ごとに違い、揃うのは価格の行。
   間隔は Figma の「画像下端 → 価格 y6380」を li の --pt で持たせる */
.petit__list .price{ margin-top:var(--pt,24px); }

/* ---------- Petit Bouquet フレーバー凡例 ---------- */
.pflavor{
  position:relative;
  z-index:2;
  margin-top:94px;
  padding:54px 0 48px;
  border-radius:30px;
  background:#f0faf7;
}
.pflavor__row{ display:flex; justify-content:center; }
.pflavor__row + .pflavor__row{ margin-top:34px; }
.pflavor__row li{ width:220px; }
.pflavor__pic{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  height:110px;
}
.pflavor__bq{ width:125px; }
.pflavor__ck{ width:var(--ck); margin-left:-25px; }
.pflavor__name{
  margin-top:12px;
  font-size:14px;
  line-height:20px;
  letter-spacing:-.05em;
  text-align:center;
}

/* =========================================================
   Sandwich Bloom
   ========================================================= */
.sandwich{
  position:relative;
  padding:126px 0 220px;   /* 下はデザイン107pxから+113px（ブルーム セレクションの下の余白） */
}
.sandwich__panel{
  position:absolute;
  left:6.08%; right:6.08%;
  top:0;
  height:2654px;   /* padding-bottom の増分と同じだけ伸ばす（元2541px）。
                      パネルは absolute の固定高なので、ここを動かさないと
                      ピンクの下端が動かず余白が増えない */
  background:var(--pink);
  border-radius:50px;
  z-index:0;
}
/* Figmaの .psd フレーム座標(y=7479)は実描画とズレるため、レンダー実測で配置。
   実体はパネル上端の69px上から始まり、茎の抜ける位置が sandwich__head の行に揃う。 */
.deco--rose{ top:-149px; right:0; width:363px; z-index:3; --px:118px; --py:95px; }

.sandwich__head{ position:relative; z-index:2; }
.sandwich__head .head-ja--center{ margin-top:12px; }

.sandwich__visual{ position:relative; z-index:1; margin-top:89px; }
.sandwich__visual img{
  width:100%;
  height:min(43.92vw,600px);
  object-fit:cover;
}

.selection{
  position:relative;
  z-index:2;
  margin-top:126px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
}
.selection__body{ width:460px; flex:0 0 auto; padding-top:7px; }
.selection__body .head-ja{ margin-top:18px; }
.selection__body .lead{ margin-top:14px; }
.selection__packs{
  display:flex;
  align-items:flex-end;
  gap:49px;   /* Figma Crème: 4個入 右端925.6 → 8個入 左端971.6 */
}
/* 余白はセクションごとに違う */
.selection--confiture .selection__packs{ gap:41px; }   /* Figma: 925.6 → 967 */
.selection__packs li{ text-align:center; }
.selection__img{ display:block; }
.selection__packs .price{ margin-top:15px; }   /* Figma: 画像下端 → 価格 が3セクションとも約15px */
.selection__packs--one{ padding-right:65px; }   /* Figma: 画像右端1117.9 / inner右端1183 */
.selection--confiture{ margin-top:104px; }
.selection--last{ margin-top:134px; }
.selection--last .selection__body{ width:587px; padding-top:11px; }

.flavors{
  position:relative;
  z-index:2;
  margin-top:52px;
  padding:34px 0;
  min-height:250px;
  border-radius:30px;
  background:var(--card);
  display:grid;
  /* Figma(Group 505 208:63): 左列の画像 x=367 / 右列 x=738 ＝ 列ピッチ371px。
     1fr×2 の中央寄せだとピッチ500pxになり中央が空きすぎるため、
     li幅305px + column-gap66px（=371px）で組む。
     ブロック全体はカード内で中央寄せ（Figmaは左184/右144でわずかに右寄りだが揃える）。 */
  grid-template-columns:repeat(2,305px);
  justify-content:center;
  column-gap:66px;
  align-content:center;
  row-gap:13px;   /* Figma: 1段目下端8584 → 2段目上端8597 */
}
.flavors li{
  display:flex;
  align-items:center;
  gap:12px;
  /* 「パイナップル＆アップルクリーム」が入る幅。Figmaでもこの行だけ
     テキストボックスが211px（li全体で320px）と広い */
  width:305px;
}
.flavors li img{ flex:0 0 auto; width:var(--cw,86px); }
.flavors li span{
  font-size:14px;
  line-height:15px;
  letter-spacing:-.05em;
  text-align:center;
  flex:1;
  white-space:nowrap;   /* 改行位置は <br> だけ。自動折り返しは禁止 */
}
.flavors--2{
  min-height:150px;
  padding:24px 0;
  /* Figma: 画像 x=417 / x=714 ＝ 列ピッチ297px（260 + 37） */
  grid-template-columns:repeat(2,260px);
  column-gap:37px;
}
.flavors--2 li{ width:260px; }

/* =========================================================
   Shop
   ========================================================= */
.shop{
  position:relative;
  padding:203px 0 0;
  background:#fff;
}
.deco--lavender{ top:-98px; left:0; width:362px; --px:-132px; --py:80px; }
.deco--violet{ top:203px; left:0; width:196px; --px:-71px; --py:43px; }

.shop__photo{ position:relative; z-index:2; display:flex; justify-content:center; }
.shop__photo img{ width:700px; }
.shop .head-en--center{ position:relative; z-index:2; margin-top:88px; }
.shop .head-en--center img{ width:113px; }

.shop__list{ margin-top:67px; }
.shop-item{
  display:grid;
  grid-template-columns:405px 410px 185px;
  /* Figma(Group 304 78:1875): 店舗名もMAPも住所ブロックを基準に上から置かれている。
     中央揃えだと店舗名が住所の2〜3行目の高さに来てしまうため上揃えにし、
     住所4行（15px×line-height30 = 120px）を行の中央に置くぶんだけ padding で送る（120+85=205）。 */
  align-items:start;
  padding-block:42px 43px;
  min-height:205px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.shop-item__name{
  /* 住所1行目（中心 = ブロック上端+15px）と光学的に揃える。行高35pxなので上に2px */
  padding-top:2px;
  font-weight:500;
  font-size:25px;
  line-height:1.4;
  letter-spacing:.05em;
  text-align:center;
}
.shop-item__addr{
  font-weight:500;
  font-size:15px;
  line-height:30px;
}
/* Figma: MAP は y=10648 ＝住所ブロック上端(10615)+33px＝2行目の高さ */
.shop-item__map{ padding-top:33px; }
.shop-item__map a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding-bottom:3px;
  border-bottom:1px solid var(--red);
  font-weight:700;
  font-size:20px;
  line-height:20px;
  letter-spacing:.05em;
  color:var(--red);
  transition:opacity .2s;
}
.shop-item__map a:hover{ opacity:.6; }
.shop-item__map img{ width:8px; }

/* =========================================================
   Instagram
   ========================================================= */
.insta{ padding:161px 0 255px; background:#fff; }
.insta .head-en--center img{ width:232px; }
/* Instagram: デザインは投稿3件を帯にクロップ（PC 1000x414 / SP 360x148.5＝ほぼ同比率）。
   帯の縦横比を固定して、中の3列が高さいっぱいを cover で埋める。
   JS で差し替わる前の静止画も同じ枠に収まる。 */
.insta__grid{ margin-top:38px; aspect-ratio:1000 / 414; }
.insta__grid img{ width:100%; height:100%; object-fit:cover; }
.insta__list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  height:100%;
}
.insta__item{ position:relative; overflow:hidden; display:block; }
.insta__item img{ transition:transform .45s cubic-bezier(.2,.7,.3,1); }
.insta__item:hover img{ transform:scale(1.04); }
.insta__link{ margin-top:22px; text-align:center; font-size:15px; letter-spacing:.05em; }
.insta__link a{ border-bottom:1px solid currentColor; padding-bottom:2px; transition:opacity .2s; }
.insta__link a:hover{ opacity:.6; }

/* =========================================================
   footer
   ========================================================= */
.footer{
  height:300px;
  background:var(--pink-footer);
  text-align:center;
}
.footer__logo{ padding-top:54px; }
.footer__logo img{ width:185px; margin:0 auto; }
.footer__copy{
  margin-top:26px;
  font-weight:500;
  font-size:13px;
  line-height:20px;
}

/* page top -------------------------------------------- */
.pagetop{
  position:fixed;
  right:28px;
  bottom:28px;
  z-index:30;
  width:63px;
  height:63px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.14);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .3s, transform .3s, visibility .3s;
}
.pagetop.is-visible{ opacity:1; visibility:visible; transform:none; }
.pagetop img{ width:8px; transform:rotate(-90deg); }
.pagetop span{ font-weight:700; font-size:13px; line-height:1; letter-spacing:.05em; }

/* =========================================================
   商品モーダル（Figma: Group 480 / 188-14）
   PCデザイン実測：ボックス 325x485・白・角丸なし
   タイトル/価格の級数はカードと同一（en 16px bold / ja 14px / price 23px）
   ========================================================= */
.pcard{ position:relative; }
.pcard__hit{
  position:absolute; inset:0;
  z-index:2;
  padding:0; border:0; background:none;
  cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.pcard__hit:focus-visible{ outline:2px solid var(--red); outline-offset:4px; }
.product-grid--tin .pcard__img img{ transition:transform .3s cubic-bezier(.2,.7,.3,1); }
.product-grid--tin .pcard:hover .pcard__img img{ transform:translateY(-4px) scale(1.03); }

.pmodal{
  position:fixed; inset:0;
  z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.pmodal[hidden]{ display:none; }
.pmodal__scrim{
  position:absolute; inset:0;
  background:rgba(0,0,0,.34);          /* 参照スクショ実測（白地→#a9a9a9） */
  opacity:0;
  transition:opacity .3s;
}
.pmodal.is-open .pmodal__scrim{ opacity:1; }

.pmodal__box{
  position:relative;
  width:325px;
  min-height:485px;
  max-height:100%;
  overflow-y:auto;
  padding:45px 20px 37px;
  background:#fff;
  text-align:center;
  opacity:0;
  transform:translateY(12px) scale(.98);
  transition:opacity .3s, transform .35s cubic-bezier(.2,.7,.3,1);
}
.pmodal.is-open .pmodal__box{ opacity:1; transform:none; }

.pmodal__close{
  position:absolute; top:22px; right:22px;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  padding:0; border:0; background:none;
  color:var(--red);
  cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.pmodal__close:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

.pmodal__en{
  font-weight:700; font-size:16px; line-height:25px;
  color:var(--red);
}
.pmodal__ja{ font-size:14px; line-height:25px; }
.pmodal__img{ margin-top:18px; }
.pmodal__img img{
  width:273px; max-width:100%; height:auto;
  margin-inline:auto;
}
/* 改行位置はデザイン指定（data-flavor の "|"）に従うので幅は持たせない */
.pmodal__flavor{
  margin:28px auto 0;
  font-size:14px; line-height:22px;
}
.price--modal{ margin-top:9px; }
.price--modal .price__qty{ margin-right:.35em; }

@media (max-width:899px){
  .pmodal{ padding:16px; }
  .pmodal__box{ width:min(325px,100%); padding:40px 16px 32px; }
  .pmodal__close{ top:18px; right:18px; }
  .pmodal__en{ font-size:15px; }
  .pmodal__ja{ font-size:13px; }
}

@media (prefers-reduced-motion:reduce){
  .pmodal__box{ transition:opacity .2s; transform:none; }
  .product-grid--tin .pcard:hover .pcard__img img{ transform:none; }
}

/* =========================================================
   scroll reveal
   ========================================================= */
.js .reveal{ opacity:0; transform:translateY(24px); }
.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}

/* deco の流し込み（.deco--flow）
   初期は定位置から --px/--py だけずらした画面外寄りに置き、画面に入ったら定位置へ流れる。
   フェードはせず transform だけを動かす。移動量は各 deco の位置指定で持たせる。 */
.js .deco--flow.reveal{
  opacity:1;
  transform:translate(var(--px, 0px), var(--py, 0px));
}
.js .deco--flow.reveal.is-in{
  transform:none;
  transition:transform 1.1s cubic-bezier(.18,.72,.28,1);
}
@media (prefers-reduced-motion:reduce){
  .js .deco--flow.reveal{ transform:none; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal, .js .reveal.is-in{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   ~1365px : PC レイアウトの緩やかな縮小
   ========================================================= */
@media (max-width:1365px) and (min-width:900px){
  .chouchou__body{ left:auto; transform:none; margin-inline:auto; inset-inline:0; }
  .deco--une-disc{ width:44vw; }
  .deco--petit-disc{ width:62.4vw; left:auto; right:0; }   /* PCの852px＝1366px基準で62.4%。44vwはune-disc(600px)の値と取り違えていた */
  .deco--tulip{ width:31.4vw; left:auto; right:0; --px:13.9vw; --py:8.3vw; }
  /* PCの504px固定が1024px幅では大きすぎるので、1366px基準の比率(504/1366)をvwで持たせる */
  .deco--bouquet{ width:36.9vw; --px:-8.5vw; --py:-17.6vw; }
  .selection__packs--one{ padding-right:0; }
  .shop-item{ grid-template-columns:40.5% 41% 18.5%; }
}

/* =========================================================
   SP  (LP_SP_Design / 400px 基準)
   ========================================================= */
@media (max-width:899px){
  :root{
    --inner:360px;
    /* ドロワー幅。400px幅ならデザインどおり312pxだが、それより狭い端末では
       ボタン(88px)がドロワーの左隣に収まらず画面外へ切れるため画面幅に追従させる */
    --gnav-w:min(312px, calc(100vw - 88px));
  }
  .inner{ max-width:calc(100% - 40px); }

  /* loading ------------------------------------------ */
  .loading__stage{
    width:400px;
    height:750px;
  }
  .loading__logo{ left:72px; top:270px; width:257px; }
  .ld{
    left:var(--sx); top:var(--sy); width:var(--sw);
    --fx:var(--sfx); --fy:var(--sfy);   /* SPはロゴ位置が違うので飛ぶ方向も別 */
  }
  .ld--pconly{ display:none; }

  /* header ------------------------------------------- */
  .header__logo{ left:22px; top:25px; width:110px; }
  .menu-btn{
    top:39px; width:88px; height:88px; gap:7px;
    border-radius:16px 0 0 16px;
  }
  .menu-btn__bars{ width:38px; height:25px; }
  .menu-btn__bars i{ width:38px; height:5px; }
  .menu-btn__bars i:nth-child(2){ top:10px; }
  .menu-btn__bars i:nth-child(3){ top:20px; }
  .menu-btn__label{ width:38px; }
  body.is-nav-open .menu-btn{ right:var(--gnav-w); }

  /* global nav（ドロワー幅312px / Figma 159-723） -------- */
  .gnav{ width:var(--gnav-w); }
  .gnav__list{ width:177px; margin-top:114px; }
  .gnav__list li{ height:82px; }
  .gnav__list img{ width:var(--sw); }
  .gnav__copy{ margin-top:49px; }

  /* hero --------------------------------------------- */
  .hero{ padding-bottom:0; }
  /* SPはデザイン（400x700）と同じ縦位置の切り抜きを使う。
     PC用 hero.webp（2049x1374 の横位置）を cover で入れると大幅に拡大されて崩れる。 */
  /* デザイン等倍は 175vw / 700px（400x700）だが、背の高い端末では上限で頭打ちになり
     ヒーローが低く見えるため 190vw / 780px まで伸ばしている。ここが高さの調整点。
     スクリムは元の比率（媒体高の62.9%）を保って追従させる。 */
  .hero__media{
    height:190vw; max-height:780px;
    background-image:url("../images/hero_sp.webp");
  }
  .hero__scrim{ display:none; }   /* SPでは上部の黒グラデーションを出さない */
  /* コピーは回転焼き込み済みの hero-copy.webp なので rotate は掛けない。
     90vw で画面中央に置く（デザイン再現値 left:7.9%/width:96.5% は
     回転後に右端が画面外へ抜けるため不採用）。
     top は旧実装の見た目の縦中心に文字が重なる値。 */
  .hero__copy{
    left:50%;
    top:25.3%;
    width:90vw;
    max-width:none;
    transform:translateX(-50%);
  }
  /* 全体ルール img,svg{max-width:100%} に 134% が食われて右端に隙間ができるので解除 */
  .hero__wave{ left:-17%; width:134%; max-width:none; height:46.25vw; max-height:185px; }

  /* about -------------------------------------------- */
  /* デザイン(400x700)実測: 波を含むヒーロー下端700px に対して About 見出しの上端は698px。
     つまりヒーロー直下にすき間は無い。66pxの余白は入れすぎだった。 */
  .about{
    margin-top:-20px;   /* 波(.hero__wave)と重ねて見出しの上を詰める。波も .about も同じピンクなので境目は出ない */
    padding:0 0 200px;
    background:linear-gradient(var(--pink) 0 100.75vw, #fff 100.75vw);  /* Figma: ピンクは絶対y=1103まで＝.about上端700から403px */
    text-align:center;
  }
  .head-en--about{
    position:static;
    display:flex;
    justify-content:center;
    width:auto;
    margin-bottom:33px;
  }
  #about{ scroll-margin-top:0; }
  .head-en--about img{ width:136px; }
  /* 最長行「気持ちも明るくなる。花を贈るようにお菓子を贈る。」は24文字。
     letter-spacing込みで 24×1.06 = 25.44em ぶんの幅が要る。
     .inner の実幅は 100vw-40px なので 3.35vw なら 320px 端末まで折り返さない
     （320px→273px ≤ 280px / 375px→320px ≤ 335px / 400px→341px ≤ 360px）。
     SP節の上端899pxで巨大化しないよう 15px で頭打ちにする。
     line-height は元の 35/14 = 2.5 を比率で保持。 */
  .about__text{ font-size:min(3.3vw, 14px); line-height:2.65; letter-spacing:.06em; }  /* デザイン: 336px幅24文字→13.2px、5行175px=行送り35px。430pxでも折り返さないよう14pxで頭打ち */
  .deco--bouquet-top{ display:none; }   /* SPデザインには無い */
  /* Figmaのフレーム幅(338px)を使っていたが、書き出した素材はフレームと範囲が違う。
     デザインレンダー(_figma/sp_00.png・400px等倍)のオレンジ輪郭と
     fl-poppy5.webp の輪郭をフィットして実測し直した値：
     表示幅460.3px / left -70.6px / .about上端から199.1px。 */
  .deco--poppy5{ top:59.8vw; left:-8vw; width:75vw; max-width:none; }   /* 実測115.1vwから縮小。img{max-width:100%} が100vwで頭打ちにするので解除 */
  /* 移動量はPC(幅486px・-164/-157)を表示幅の比で縮めた値。表示幅の縮小(0.825)も反映 */
  .deco--poppy5{ --px:-32vw; --py:-30.7vw; }

  /* 本文（lead）はSPで px 固定だと端末幅により余計に折り返し、
     セクションが縦に伸びてデザインとずれる。デザインの une lead は
     359px幅で3行82px（行送り27.3 / 文字約13.7px）なので vw 基準にした。 */

  /* line up ------------------------------------------ */
  .lineup{ padding:22.75vw 0 18.25vw; }   /* デザイン実測: 91px / 73px */
  .head-en--lineup img{ width:172px; }
  .lineup__list{
    /* デザイン: 見出し下端1286→カード上端1312＝26px、行ピッチ1312→1569＝257px */
    margin-top:6.75vw;          /* 27px */
    grid-template-columns:repeat(2,1fr);
    gap:7.25vw 3vw;             /* 29px / 12px */
  }
  /* デザイン: 円の下端1485→英字1501(16px)、英字は約15px高→和名1522.8(7px) */
  .lineup-card__name{ margin-top:4vw; height:3.75vw; }
  .lineup-card__name img{ max-height:3.75vw; }
  /* name-bloom.svg だけ箱にqのディセンダが入るため、同じ max-height で揃えると
     文字だけ小さくなる。比(30/22.6)ぶん広げて字の大きさを揃える。
     さらに align-items:flex-end はディセンダの底で揃えるので、そのぶん(7.4単位＝1.23vw)
     下げないとベースラインが他より上に浮く */
  .lineup-card__name img[src$="name-bloom.svg"]{ max-height:4.98vw; margin-bottom:-1.23vw; }
  .lineup-card__ja{ margin-top:1.75vw; font-size:15px; letter-spacing:.05em; }
  .deco--poppy4{ display:none; }

  /* chouchou ----------------------------------------- */
  .chouchou{ padding-bottom:233px; }
  .chouchou__visual img{ height:87.5vw; max-height:350px; }
  .chouchou__body{
    position:static;
    transform:none;
    margin-top:23vw;   /* 92px */
    text-align:center;
  }
  .head{ margin-inline:auto; }
  .chouchou__body .head-en{ display:flex; justify-content:center; }
  .chouchou__body .head-en img{ width:329px; }
  .chouchou__body .head-ja{ margin-top:12px; font-size:15px; }
  .chouchou__body .lead{ margin-top:16px; width:auto; font-size:min(3.42vw, 15px); line-height:2; text-align:left; }
  .deco--marguerite{ top:177px; left:-11.5%; width:63.2%; --px:-98px; --py:60px; }

  .product-grid--tin{
    margin-top:56px;
    grid-template-columns:repeat(2,179px);
    column-gap:0;
    row-gap:20px;
  }
  .product-grid--tin .pcard__img{ height:auto; }   /* PCの height:192px を打ち消して画像なりの高さにする */
  .product-grid--tin .pcard__img img{ width:35vw; }   /* デザインは119pxだが大きく見えるため意図的に縮小 */
  .product-grid--tin .pcard__en{ margin-top:14px; }
  .pcard__en{ font-size:15px; }
  .pcard__ja{ font-size:13px; }

  /* une ---------------------------------------------- */
  .une{
    padding:76vw 0 40vw;   /* 上は見出し位置の実測差 -129px を反映（433→304px）。下はデザイン22.5vwから増量 */
    /* 中身（.assort など）は px 固定なのに padding-top は 76vw で可変。境界を px 固定にすると
       中身だけが上下して、assort 下のピンクの残り量が端末ごとに変わる。
       「中身の開始位置から一定距離」に固定する：基準400pxで 76vw=304px、1528-304=1224px */
    background:linear-gradient(var(--pink) 0 calc(76vw + 1224px), #fff calc(76vw + 1224px));
  }
  #une{ scroll-margin-top:-169px; }   /* SPの .deco--une-disc top:-169px に合わせる */
  .deco--une-disc{ top:-169px; left:50%; transform:translateX(-50%); width:75%; }   /* 画面センター揃え */
  .deco--tulip{ top:51px; left:auto; right:-10%; width:57.8%; --px:120px; --py:72px; }
  /* 背景の境界と同じ理由で、top は「中身の開始位置からの固定距離」にする。
     基準400pxで padding-top=76vw=304px、1402-304=1098px。
     可動域は幅が 57vw と可変なので vw のまま（角度2.07:1は維持） */
  .deco--bouquet{ top:calc(1170px + 75vw); left:-7%; width:57vw; --px:-9.5vw; --py:-19.75vw; }

  /* PCの margin-right:45px を戻さないと本文幅が315pxになり、
     デザイン(359px幅・3行)より1行多く折り返してセクションが伸びる */
  .une__body{ width:auto; margin-left:0; margin-right:0; text-align:center; }
  .une__body .head-en{ display:flex; justify-content:center; }
  .une__body .head-en img{ width:196px; }
  .une__body .head-ja{ margin-top:11px; font-size:15px; }
  .une__body .lead{ margin-top:15px; font-size:min(3.42vw, 15px); line-height:2; text-align:left; }

  .product-grid--stick{
    margin-top:5.5vw;            /* デザイン: lead下端3975→グリッド3997 ＝22px */
    grid-template-columns:repeat(3,1fr);
    column-gap:3vw;              /* 12px */
    row-gap:5.5vw;               /* デザイン: 行ピッチ301 − カード高278.6 ＝22px */
  }
  .product-grid--stick .pcard__img{ height:auto; }
  .product-grid--stick .pcard__img img{ width:19vw; max-width:88px; }  /* デザイン: 幅75〜76px＝19vw */

  .assort{ margin-top:14.5vw; }   /* デザイン: 棒グリッド下端4577.6→見出し4636 ＝58px */
  .assort .head-en--center img{ width:303px; }
  .assort .head-ja--center{ margin-top:10px; font-size:15px; }
  .assort__list{ margin-top:18px; gap:14px; }
  .assort__img img{ width:calc(var(--w,171px) * .785); }
  .assort__list .price{ margin-top:16px; }
  .price__qty{ font-size:13px; }
  .price__num{ font-size:21px; }

  /* petit -------------------------------------------- */
  .petit{ padding:437px 0 120px; }
  .deco--petit-disc{ top:44px; left:2.5%; width:105%; max-width:none; }   /* img{max-width:100%} が100%で頭打ちにするので解除 */
  .petit__body{ width:auto; text-align:center; }
  .petit__body .head-en{ display:flex; justify-content:center; }
  .petit__body .head-en img{ width:258px; }
  .petit__body .head-ja{ margin-top:10px; font-size:15px; }
  .petit__body .lead{ margin-top:15px; font-size:min(3.42vw, 15px); line-height:2; text-align:left; }

  .petit__list{
    /* デザイン: lead下端5644→リスト5677 ＝33px、1行目下端5818→2行目5834 ＝16px */
    margin-top:8.25vw;    /* 33px */
    display:grid;
    grid-template-columns:repeat(2,1fr);
    align-items:end;
    justify-items:center;
    gap:4vw 3vw;          /* 16px / 12px */
  }
  /* PCの横並び用マージンを打ち消す。nth-child(4) の方が詳細度が高いので個別に消す */
  .petit__list li + li{ margin-left:0; }
  .petit__list li:nth-child(4){ margin-left:0; }
  /* 商品の実サイズ比を保つ。素材の固有幅(123/173/202/237px)を一律0.675倍した値。
     400px以下は vw で追従し、それ以上は max-width で頭打ちにする */
  .petit__img img{ width:auto; max-width:none; }
  .petit__list li:nth-child(1) .petit__img img{ width:20.75vw; max-width:83px; }
  .petit__list li:nth-child(2) .petit__img img{ width:29.2vw;  max-width:117px; }
  .petit__list li:nth-child(3) .petit__img img{ width:34.1vw;  max-width:136px; }
  .petit__list li:nth-child(4) .petit__img img{ width:40vw;    max-width:160px; }
  .petit__list .price{ margin-top:18px; }

  /* Petit フレーバー凡例：2列×3＋最終行1件を中央 --------- */
  /* デザイン(Group 429 158:2401): 360x601 の枠に2列×3行＋最後の1つを中央。
     写真の上端6088（枠上端から29px）、行ピッチ143、最終行の名前下端6641（枠下端まで19px）。 */
  .pflavor{
    margin-top:14vw;             /* 56px */
    padding:7.25vw 0 4.75vw;     /* 29px / 19px */
    display:grid;
    grid-template-columns:repeat(2,41vw);   /* 164px */
    justify-content:center;
    row-gap:4.5vw;               /* 行ピッチ143 − 項目高125 ＝18px */
  }
  .pflavor__row{ display:contents; }
  .pflavor__row + .pflavor__row{ margin-top:0; }
  .pflavor__row li{ width:auto; }
  /* li:last-child は ul が2本あるため各行の最後にも効き、全幅セルが2つできて
     デザインの4行が5行になっていた。最後のulの最後だけに限定する。 */
  .pflavor__row:last-child li:last-child{ grid-column:1 / -1; }
  .pflavor__pic{ height:78px; }
  .pflavor__bq{ width:88px; }
  .pflavor__ck{ width:calc(var(--ck) * .705); margin-left:-18px; }
  /* デザインの名前ボックスは206px幅で列(164px)をはみ出して中央寄せ＝折り返さない。
     高さ44px＝2行なので行送り22px。改行位置は <br> だけ。 */
  .pflavor__name{ margin-top:0.5vw; font-size:13px; line-height:22px; white-space:nowrap; }

  /* sandwich ----------------------------------------- */
  .sandwich{ padding:65px 0 140px; }   /* 下はデザイン70pxから+70px */
  /* 高さ固定(旧2690px)だと中身の増減で下端がずれ、下側の角丸が合わなくなるので bottom 基準にする。
     .sandwich の padding-bottom は140px。bottom を40pxにすることで
     ピンクの中に100pxの余白を残しつつ、パネルの外(白)を40px取る */
  .sandwich__panel{ left:5%; right:5%; top:0; bottom:40px; height:auto; border-radius:30px; }
  .deco--rose{ top:-144px; right:-1.4%; width:52.3%; --px:68px; --py:55px; }
  .sandwich__head .head-en--center img{ width:281px; }
  .sandwich__head .head-ja--center{ margin-top:10px; font-size:15px; }
  .sandwich__visual{ margin-top:35px; }
  .sandwich__visual img{ height:87.5vw; max-height:350px; }

  .selection{
    margin-top:46px;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    text-align:center;
  }
  .selection__body{ width:auto; padding-top:0; }
  /* PCの .selection--last .selection__body{width:587px} は詳細度が上で残るため打ち消す */
  .selection--last .selection__body{ width:auto; padding-top:0; }
  .selection__body .head-en{ display:flex; justify-content:center; }
  .selection__body .head-en img{ max-width:80%; }
  /* Bloom Selection は1行で字数が多く、他の2本より詰まって見えるので少し小さく */
  .selection--last .selection__body .head-en img{ max-width:72%; }
  .selection__body .head-ja{ margin-top:12px; font-size:15px; }
  .selection__body .lead{ margin-top:14px; margin-inline:18px; font-size:min(3.42vw, 15px); line-height:2; text-align:left; }   /* .flavors と同じくピンクパネルから18px内側へ */
  .selection__packs{
    margin-top:2vw;   /* デザイン: lead下端7527→パック7535 ＝8px */
    justify-content:center;
    gap:26px;
    margin-inline:18px;   /* .flavors / .lead と同じくピンクパネルから18px内側へ */
  }
  /* flex item の既定 min-width:auto は「中身(画像の固有幅)より小さくならない」ため、
     margin-inline でコンテナを狭めても画像が縮まずはみ出す。0にして追従させる */
  .selection__packs li{ min-width:0; }
  .selection__packs--one{ padding-right:0; }
  .selection__packs .price{ margin-top:16px; }
  .selection--last .selection__packs{ margin-top:32px; }   /* bloomsel-12 の上を広げる */

  .flavors{
    margin-top:34px;
    /* .inner の左右余白(20px)とピンクパネル(.sandwich__panel left/right:5%)が同じ位置に来るため、
       そのままだとカードがパネルの端に張り付く。デザイン実測どおり18px内側へ入れる */
    margin-inline:18px;
    grid-template-columns:1fr;
    justify-items:start;
    padding:22px 32px;   /* 左右を広めに */
    min-height:0;
    row-gap:22px;
  }
  .flavors li{ width:100%; gap:16px; }
  .flavors li img{ width:74px; }
  .flavors li span{ text-align:left; line-height:24px; letter-spacing:0; }
  .flavors--2{ padding:22px 32px; }
  .flavors--2 li{ width:100%; }

  /* shop --------------------------------------------- */
  .shop{ padding-top:30vw; }   /* デザインは58vw(232px)だが詰めている */
  /* .shop__photo が z-index:2 なので、既定 z-index:0 のままだと写真の下に隠れる */
  .deco--lavender{ top:-133px; left:-0.5%; width:55%; --px:-92px; --py:56px; z-index:3; }
  .deco--violet{ top:46px; left:-10px; width:29%; --px:-49px; --py:30px; z-index:3; }   /* SPデザインには無いが表示する */
  .shop__photo img{ width:90%; }   /* .shop__photo は justify-content:center なので自動で中央 */
  .shop .head-en--center{ margin-top:12.75vw; }   /* デザイン: 写真下端9725→見出し9799 ＝74px */
  .shop .head-en--center img{ width:85px; }
  .shop__list{ margin-top:34px; }   /* デザインは7.25vw(29px) */
  .shop-item{
    grid-template-columns:1fr;
    min-height:0;
    padding:28px 0 22px;
    row-gap:14px;
  }
  .shop-item__name{ padding-top:0; font-size:20px; }
  .shop-item__addr{ font-size:14px; line-height:26px; }
  .shop-item__map{ padding-top:0; text-align:right; }
  .shop-item__map a{ font-size:18px; }

  /* instagram ---------------------------------------- */
  .insta{ padding:75px 0 100px; }
  .insta .head-en--center img{ width:175px; }
  .insta__grid{ margin-top:9.5vw; }   /* 38px */
  .insta__link{ margin-top:18px; font-size:13px; }

  /* footer ------------------------------------------- */
  .footer{ height:200px; }
  .footer__logo{ padding-top:30px; }
  .footer__logo img{ width:130px; }
  .footer__copy{ margin-top:14px; font-size:11px; }

  .pagetop{ right:16px; bottom:16px; width:52px; height:52px; }
  .pagetop span{ font-size:11px; }
}

@media (max-width:400px){
  .hero__copy{ top:23.3%; }
  .product-grid--tin .pcard__img img{ width:78%; /* max-width:168px; */ }
}