/* =========================================================
   lumière — Korean-inspired Skincare Demo
   透明感 / ツヤ / ぷるんとした質感 / 明るい余白
   ---------------------------------------------------------
   Design tokens（指定カラーパレット）
   ========================================================= */
:root{
  --bg:        #FFF3F1;   /* 全体背景：淡いピンク */
  --surface:   #FFFFFF;   /* カード・商品エリア */
  --ink:       #2B2423;   /* 文字（黒は使わない） */
  --ink-soft:  #7d6f6c;   /* 補助テキスト */
  --primary:   #D98C96;   /* 見出し・CTA ローズピンク */
  --primary-d: #c4727d;   /* CTAホバー */
  --secondary: #F3C8C4;   /* 補助アクセント */
  --lavender:  #BFA7FF;   /* 差し色（少量） */
  --gold:      #D6B98C;   /* 高級感の差し色（控えめ） */
  --border:    #F0DAD7;   /* 枠線 */

  --maxw: 1200px;
  --radius: 28px;
  --radius-lg: 40px;
  --shadow-soft: 0 18px 50px -22px rgba(184,120,128,.45);
  --shadow-card: 0 14px 40px -20px rgba(184,120,128,.38);
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.34,1.4,.5,1); /* ぷるん用 */
}

/* ---------- Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(120% 90% at 80% -10%, #f6e6ff 0%, rgba(246,230,255,0) 42%),
    radial-gradient(120% 80% at 0% 0%, #ffe7e3 0%, rgba(255,231,227,0) 40%),
    var(--bg);
  color:var(--ink);
  font-family:"Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight:400;
  line-height:1.85;
  letter-spacing:.02em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
section{position:relative}
.container{width:min(92%, var(--maxw));margin-inline:auto}
.sp-only{display:none}

/* 画像ヘルパー：data-img があればJSが背景画像を入れる。無ければグラデで美しく */
[data-img]{
  background:
    linear-gradient(135deg, #fff6f4 0%, #ffe9ef 45%, #efe4ff 100%);
  background-size:cover;
  background-position:center;
}

/* ---------- Typography helpers ---------- */
.sec-tag{
  font-family:"Cormorant", serif;
  font-size:.9rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:1.1rem;
}
.sec-title{
  font-family:"Shippori Mincho B1", serif;
  font-weight:500;
  font-size:clamp(1.9rem, 4.6vw, 3rem);
  line-height:1.42;
  letter-spacing:.04em;
  color:var(--ink);
}
.sec-head{max-width:680px;margin:0 auto clamp(2.4rem,5vw,3.6rem);text-align:center}
.sec-lead{margin-top:1.3rem;color:var(--ink-soft);font-size:1rem;line-height:2}

/* ガラス調カード（軽め） */
.glass{
  background:linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.7));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow-card);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5em;
  padding:.95em 2em;
  border-radius:999px;
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-weight:500;font-size:.95rem;letter-spacing:.06em;
  cursor:pointer;border:1px solid transparent;
  transition:transform .5s var(--ease-soft), box-shadow .5s var(--ease), background .4s var(--ease), color .4s;
  will-change:transform;
}
.btn--primary{
  background:linear-gradient(120deg, var(--primary), #e6a0a4);
  color:#fff;
  box-shadow:0 12px 26px -12px rgba(217,140,150,.85);
}
.btn--primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 18px 34px -12px rgba(217,140,150,.95);background:linear-gradient(120deg, var(--primary-d), var(--primary))}
.btn--ghost{background:rgba(255,255,255,.6);border-color:var(--border);color:var(--ink)}
.btn--ghost:hover{transform:translateY(-3px);border-color:var(--primary);color:var(--primary)}
.btn--mini{padding:.6em 1.3em;font-size:.85rem;background:var(--primary);color:#fff}
.btn--mini:hover{background:var(--primary-d)}
.btn--lg{padding:1.1em 2.6em;font-size:1.02rem}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
  padding:.5rem 0;
}
.site-header.is-scrolled{
  background:rgba(255,243,241,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(240,218,215,.9);
}
.site-header__inner{
  width:min(92%,var(--maxw));margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.brand{
  font-family:"Cormorant",serif;font-size:1.7rem;font-weight:500;
  letter-spacing:.04em;color:var(--ink);
}
.nav{display:flex;gap:2rem}
.nav a{font-size:.92rem;color:var(--ink);position:relative;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--primary);transition:width .4s var(--ease)}
.nav a:hover{color:var(--primary)}
.nav a:hover::after{width:100%}

/* =========================================================
   1. HERO
   ========================================================= */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  padding:120px 0 80px;
  overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}

/* やわらかい光のかたまり */
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.blob--pink{width:48vw;height:48vw;background:radial-gradient(circle,#ffc9cf,transparent 65%);top:-10%;right:-8%}
.blob--lav{width:40vw;height:40vw;background:radial-gradient(circle,#cdb6ff,transparent 65%);bottom:-12%;left:-6%;opacity:.42}
.blob--gold{width:24vw;height:24vw;background:radial-gradient(circle,#f3dcb4,transparent 65%);top:40%;left:42%;opacity:.32}

.particles{position:absolute;inset:0}
.particles span{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.2) 60%, transparent);
  box-shadow:0 0 8px rgba(255,255,255,.8);
  opacity:.7;
}

.hero__inner{
  position:relative;z-index:2;
  width:min(92%,var(--maxw));margin-inline:auto;
  display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center;
}

/* --- HERO copy --- */
.hero__eyebrow{
  font-family:"Cormorant",serif;font-size:1rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--primary);margin-bottom:1.6rem;
}
.hero__title{
  font-family:"Shippori Mincho B1",serif;font-weight:600;
  font-size:clamp(2.5rem,6.2vw,4.4rem);
  line-height:1.34;letter-spacing:.045em;color:var(--ink);
}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line>span{display:block} /* JSでstaggerアニメ */
.hero__title .line--sub{font-size:.62em;font-weight:500;color:#4a3f3d}
.hero__lead{
  margin:1.8rem 0 2.4rem;color:var(--ink-soft);
  font-size:1.05rem;line-height:2.05;max-width:30em;
}
.hero__cta{display:flex;gap:1rem;flex-wrap:wrap}

/* --- HERO visual --- */
.hero__visual{position:relative;height:min(78vh,640px)}
.hero__model{
  position:absolute;inset:0;
  border-radius:120px 120px 120px 28px;
  overflow:hidden;
  box-shadow:0 40px 80px -36px rgba(184,120,128,.6);
  border:1px solid rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;
  /* Ken Burns ズーム用 */
}
.hero__model .hero__model-ph{
  font-family:"Cormorant",serif;letter-spacing:.25em;
  color:#c89aa0;text-align:center;font-size:1.1rem;line-height:2;
}
.hero__model-ph small{font-family:"Zen Kaku Gothic New";font-size:.6rem;letter-spacing:.2em;color:#c9a7ab}

/* ツヤのスイープ（動画っぽさ） */
.sheen{
  position:absolute;top:0;left:-60%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);
  animation:sheen 6.5s ease-in-out infinite;
}
@keyframes sheen{0%,100%{left:-60%}45%,55%{left:130%}}

/* 浮遊する商品ボトル */
.hero__product{
  position:absolute;right:-6%;bottom:-4%;z-index:3;
  width:clamp(120px,16vw,180px);
  filter:drop-shadow(0 24px 30px rgba(184,120,128,.45));
}
.bottle{width:100%;height:auto}

.float-slow{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-18px) rotate(1.5deg)}}

/* しずく装飾 */
.drop{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #fff, #ffe2e6 55%, #f3c8c4);
  box-shadow:inset 0 -4px 8px rgba(217,140,150,.3), 0 8px 18px -6px rgba(217,140,150,.5);
  opacity:.85;
}
.drop--1{width:46px;height:46px;top:6%;left:-4%;animation:float 5.5s ease-in-out infinite}
.drop--2{width:26px;height:26px;top:42%;right:-8%;background:radial-gradient(circle at 32% 28%,#fff,#ece2ff 55%,#bfa7ff);animation:float 6.8s ease-in-out infinite .8s}
.drop--3{width:18px;height:18px;bottom:14%;left:8%;animation:float 5s ease-in-out infinite .4s}

/* scroll hint */
.hero__scroll{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:"Cormorant",serif;letter-spacing:.2em;font-size:.8rem;color:var(--ink-soft);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.hero__scroll span{width:1px;height:42px;background:linear-gradient(var(--primary),transparent);animation:scrollLine 2s ease-in-out infinite}
@keyframes scrollLine{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1)}100%{transform:scaleY(.2);transform-origin:bottom}}

/* =========================================================
   2. CONCERN
   ========================================================= */
.concern{padding:clamp(5rem,11vw,9rem) 0}
.concern__list{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;
  max-width:900px;margin:0 auto;
}
.concern__item{
  list-style:none;
  display:flex;align-items:center;gap:.8rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.9rem 1.6rem;
  font-size:1rem;color:var(--ink);
  box-shadow:0 10px 26px -20px rgba(184,120,128,.5);
  transition:transform .5s var(--ease-soft), box-shadow .5s var(--ease);
}
.concern__item:hover{transform:translateY(-4px);box-shadow:0 16px 30px -18px rgba(184,120,128,.6)}
.concern__no{
  font-family:"Cormorant",serif;color:var(--lavender);
  font-size:1rem;letter-spacing:.05em;
}

/* =========================================================
   3. PRODUCT
   ========================================================= */
.product{padding:clamp(4rem,9vw,7rem) 0}
.product__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;
}
.product__visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:440px}
.halo{
  position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#ffffff 0%, #ffe6ec 40%, transparent 70%);
  filter:blur(8px);
}
.product__bottle{position:relative;z-index:2;width:clamp(150px,20vw,210px);filter:drop-shadow(0 30px 36px rgba(184,120,128,.4))}
.bottle--lg{width:100%}
.product__shadow{
  position:absolute;bottom:14%;left:50%;transform:translateX(-50%);
  width:46%;height:26px;border-radius:50%;
  background:rgba(184,120,128,.28);filter:blur(14px);z-index:1;
  animation:shadowPulse 7s ease-in-out infinite;
}
@keyframes shadowPulse{0%,100%{transform:translateX(-50%) scale(1);opacity:.5}50%{transform:translateX(-50%) scale(.82);opacity:.32}}

.product__body{max-width:460px}
.product__desc{margin:1.6rem 0;color:var(--ink-soft);line-height:2.1}
.product__spec{margin:0 0 2rem;border-top:1px solid var(--border)}
.product__spec div{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--border)}
.product__spec dt{color:var(--ink-soft);font-size:.92rem}
.product__spec dd{font-weight:500;font-size:.95rem;text-align:right}

/* =========================================================
   4. FEATURE
   ========================================================= */
.feature{padding:clamp(5rem,11vw,9rem) 0}
.feature__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;
}
.feature__card{
  border-radius:var(--radius);
  padding:2.4rem 1.6rem;text-align:center;
  transition:transform .55s var(--ease-soft), box-shadow .55s var(--ease);
}
.feature__card:hover{transform:translateY(-8px);box-shadow:0 26px 50px -24px rgba(184,120,128,.55)}
.feature__icon{
  display:flex;align-items:center;justify-content:center;
  width:74px;height:74px;margin:0 auto 1.3rem;border-radius:50%;
  font-size:1.7rem;color:var(--primary);
  background:radial-gradient(circle at 35% 30%, #fff, #ffe9ef 70%);
  box-shadow:inset 0 -6px 12px rgba(217,140,150,.25), 0 10px 22px -12px rgba(217,140,150,.5);
}
.feature__card:nth-child(2) .feature__icon{color:var(--gold);background:radial-gradient(circle at 35% 30%,#fff,#f6ecd9 70%)}
.feature__card:nth-child(3) .feature__icon{color:var(--lavender);background:radial-gradient(circle at 35% 30%,#fff,#ece4ff 70%)}
.feature__card h3{font-family:"Shippori Mincho B1",serif;font-weight:500;font-size:1.2rem;margin-bottom:.7rem;letter-spacing:.04em}
.feature__card p{font-size:.9rem;color:var(--ink-soft);line-height:1.9}

/* =========================================================
   5. LIFE / LIFESTYLE
   ========================================================= */
.life{padding:clamp(4rem,9vw,7rem) 0}
.life__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.life__text{max-width:440px}
.life__media-wrap{position:relative;display:grid;grid-template-columns:1fr;gap:0}
.life__media{
  position:relative;overflow:hidden;
  border-radius:var(--radius-lg);
  aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(255,255,255,.6);
}
.life__media--sm{
  position:absolute;right:-6%;bottom:-14%;
  width:48%;aspect-ratio:3/4;border-radius:32px;
  border:5px solid #fff;
  box-shadow:0 24px 50px -24px rgba(184,120,128,.6);
}
.life__ph{font-family:"Cormorant",serif;letter-spacing:.22em;color:#c89aa0;text-align:center;line-height:2}
.life__ph small{font-family:"Zen Kaku Gothic New";font-size:.62rem;letter-spacing:.18em;color:#c9a7ab}
.life__media video.life__media{width:100%;height:100%;object-fit:cover}

/* =========================================================
   6. VOICE
   ========================================================= */
.voice{padding:clamp(5rem,11vw,9rem) 0}
.voice__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.voice__card{
  border-radius:var(--radius);padding:2.2rem 2rem;
  transition:transform .55s var(--ease-soft), box-shadow .55s var(--ease);
}
.voice__card:hover{transform:translateY(-6px)}
.stars{color:var(--gold);letter-spacing:.18em;font-size:.95rem;display:block;margin-bottom:1.1rem}
.voice__card blockquote{font-size:1rem;line-height:2;color:var(--ink);margin-bottom:1.3rem}
.voice__card figcaption{font-size:.85rem;color:var(--ink-soft);font-family:"Cormorant",serif;letter-spacing:.08em}

/* =========================================================
   7. CTA
   ========================================================= */
.cta{padding:clamp(5rem,12vw,10rem) 0;overflow:hidden}
.cta__bg{position:absolute;inset:0;z-index:0}
.cta__inner{
  position:relative;z-index:2;text-align:center;max-width:680px;
  background:linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--radius-lg);
  padding:clamp(3rem,7vw,5rem) clamp(1.6rem,5vw,4rem);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.cta__title{
  font-family:"Shippori Mincho B1",serif;font-weight:600;
  font-size:clamp(1.9rem,5vw,3rem);line-height:1.5;letter-spacing:.05em;margin:.6rem 0 1.2rem;
}
.cta__lead{color:var(--ink-soft);margin-bottom:2.2rem}
.cta__btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.cta__note{margin-top:1.8rem;font-size:.78rem;color:#b6a4a1;letter-spacing:.05em}

/* =========================================================
   8. FOOTER
   ========================================================= */
.site-footer{padding:4rem 0 2.4rem;border-top:1px solid var(--border);background:rgba(255,255,255,.5)}
.site-footer__inner{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.brand--lg{font-size:2.2rem}
.site-footer__tag{color:var(--ink-soft);font-size:.9rem;margin-top:.5rem}
.site-footer__nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.site-footer__nav a{font-size:.9rem;color:var(--ink-soft);transition:color .3s}
.site-footer__nav a:hover{color:var(--primary)}
.site-footer__copy{width:100%;text-align:center;margin-top:2rem;font-size:.78rem;color:#b6a4a1;letter-spacing:.04em}

/* =========================================================
   SCROLL REVEAL（JS未読込でも見えるようフォールバックあり）
   ========================================================= */
.reveal-up,.reveal-img{opacity:1}
.js .reveal-up{opacity:0;transform:translateY(28px)}
.js .reveal-img{opacity:0;transform:scale(1.04)}

/* =========================================================
   RESPONSIVE — スマホ重視
   ========================================================= */
@media (max-width:980px){
  .feature__grid{grid-template-columns:repeat(2,1fr)}
  .voice__grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .product__grid,.life__grid{grid-template-columns:1fr}
  .product__visual{order:-1}
  .life__media-wrap{margin-bottom:2rem}
}
@media (max-width:760px){
  .sp-only{display:inline}
  .nav{display:none}
  .hero{padding:104px 0 64px;min-height:auto}
  .hero__inner{grid-template-columns:1fr;gap:2.4rem;text-align:center}
  .hero__copy{order:1}
  .hero__visual{order:0;height:62vh;max-height:520px;width:88%;margin:0 auto}
  .hero__model{border-radius:90px 90px 90px 24px}
  .hero__cta{justify-content:center}
  .hero__lead{margin-inline:auto}
  .hero__product{width:120px;right:-2%}
  .hero__scroll{display:none}
}
@media (max-width:520px){
  .feature__grid{grid-template-columns:1fr;max-width:360px;margin:0 auto}
  .concern__item{font-size:.92rem;padding:.8rem 1.3rem}
  .life__media--sm{width:54%;bottom:-10%}
  .site-header__inner .btn--mini{display:none}
}

/* アクセシビリティ：動きを減らす設定を尊重 */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .reveal-up,.js .reveal-img{opacity:1;transform:none}
}

/* =========================================================
   HERO 強化：モデル画像 / AI診断カード / ラベンダー装飾
   （初稿のあとに追記。後から調整しやすいよう独立ブロック化）
   ========================================================= */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* リングの進捗を滑らかにアニメーション */
@property --val{ syntax:'<percentage>'; inherits:false; initial-value:0%; }

/* モデル写真（img差し替え対応） */
.hero__model-img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}

/* AI診断バッジ */
.ai-badge{
  position:absolute;top:16px;left:16px;z-index:7;
  display:inline-flex;align-items:center;gap:.55em;
  font-family:"Cormorant",serif;letter-spacing:.22em;font-size:.72rem;color:var(--ink);
  background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.7);
  padding:.5em 1.05em;border-radius:999px;box-shadow:var(--shadow-card);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.ai-badge::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--lavender);box-shadow:0 0 8px var(--lavender);
  animation:aiPulse 2s ease-in-out infinite;
}
@keyframes aiPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.65)}}

/* AI診断カード */
.ai-card{
  position:absolute;z-index:7;
  display:flex;align-items:center;gap:.7rem;
  padding:.65rem .9rem;border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,255,255,.8));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 18px 40px -20px rgba(184,120,128,.65);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.ai-card--a{top:15%;left:-11%}
.ai-card--b{top:45%;right:-15%}
.ai-card--c{bottom:11%;left:-7%}

.ai-ring{
  position:relative;width:46px;height:46px;border-radius:50%;flex:none;
  background:conic-gradient(var(--c) var(--val,0%), #f1dcd9 0);
  display:grid;place-items:center;
}
.ai-ring b{
  width:36px;height:36px;border-radius:50%;background:#fff;
  display:grid;place-items:center;
  font-family:"Cormorant",serif;font-weight:600;font-size:.98rem;color:var(--ink);
}
.ai-ring b i{font-style:normal;font-size:.55em;color:var(--ink-soft);margin-left:1px}
.ai-meta{display:flex;flex-direction:column;line-height:1.3}
.ai-k{font-size:.82rem;font-weight:500;color:var(--ink);letter-spacing:.02em}
.ai-s{font-size:.66rem;color:var(--ink-soft);letter-spacing:.06em}

/* ラベンダーの丸い装飾 */
.deco{position:absolute;border-radius:50%;z-index:1;pointer-events:none}
.deco--lav1{
  width:120px;height:120px;top:-7%;right:4%;opacity:.5;filter:blur(1px);
  background:radial-gradient(circle at 35% 30%,#fff,#d9c6ff 58%,#bfa7ff);
  animation:float 8s ease-in-out infinite;
}
.deco--lav2{
  width:58px;height:58px;bottom:22%;right:-3%;opacity:.6;
  background:radial-gradient(circle at 35% 30%,#fff,#ffe1e6 58%,#f3c8c4);
  animation:float 6.5s ease-in-out infinite .6s;
}

/* HERO：ボトルを少し大きく＆手前へ */
.hero__product{right:-9%;bottom:-2%;width:clamp(140px,18vw,210px);z-index:6}

/* --- モバイル調整 --- */
@media (max-width:760px){
  .ai-badge{font-size:.62rem;top:10px;left:10px;padding:.45em .85em}
  .ai-card{padding:.5rem .7rem;gap:.5rem;border-radius:14px}
  .ai-ring{width:38px;height:38px}
  .ai-ring b{width:30px;height:30px;font-size:.82rem}
  .ai-card--a{top:9%;left:-3%}
  .ai-card--b{top:42%;right:-4%}
  .ai-card--c{bottom:7%;left:-2%}
  .ai-s{display:none}
  .deco--lav1{width:84px;height:84px}
  .hero__product{width:118px;right:-1%;bottom:0}
}
@media (max-width:380px){
  .ai-card--b{right:-2%;top:40%}
  .ai-k{font-size:.74rem}
}

/* =========================================================
   実写素材対応：モデル／商品を実写写真に変更（ファーストビュー）
   ========================================================= */
/* モデル写真：顔まわりにフォーカス */
.hero__model-img{object-position:center 22%}

/* 写真の上に重ねる淡い光・ピンク〜ラベンダーのグラデ（サイトになじませる） */
.model-tint{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(58% 42% at 30% 12%, rgba(255,255,255,.45), transparent 60%),
    linear-gradient(180deg, rgba(255,228,235,.30) 0%, rgba(255,243,241,.04) 38%, rgba(191,167,255,.26) 100%);
}
.hero__model .sheen{z-index:3}

/* 商品ボトル：実写写真を白フチの丸みカードで“浮遊配置”（現在比 約25%大きく） */
.hero__product{
  right:-3%;bottom:-4%;z-index:6;
  width:clamp(168px,23vw,258px);
  border-radius:28px;overflow:hidden;margin:0;
  border:4px solid #fff;
  box-shadow:0 34px 60px -22px rgba(184,120,128,.62);
}
.hero__product-img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center}

@media (max-width:760px){
  .hero__product{width:clamp(132px,42vw,170px);right:-2%;bottom:-2%;border-width:3px;border-radius:20px}
}

/* =========================================================
   商品ボトルを「背景透過の切り抜き素材」として前面に浮遊配置
   （四角い写真カードに入れない・枠なし・接地影はdrop-shadow）
   ========================================================= */
.hero__product{
  position:absolute; right:-3%; bottom:-6%; z-index:6;
  width:clamp(150px,18vw,214px);
  border:0; background:none; box-shadow:none; border-radius:0; overflow:visible;
  perspective:900px;
}
.hero__product-img{
  display:block; width:100%; height:auto; aspect-ratio:auto; object-fit:contain;
  transform-style:preserve-3d; backface-visibility:hidden;
  filter:drop-shadow(0 24px 22px rgba(150,90,100,.42));
}

/* AI診断カードを再配置：モデルの顔と商品ボトルを邪魔しない */
.ai-card--a{top:12%;left:-10%;right:auto;bottom:auto}
.ai-card--b{top:9%;right:-7%;left:auto;bottom:auto}
.ai-card--c{bottom:13%;left:-6%;right:auto;top:auto}

@media (max-width:760px){
  .hero__product{width:clamp(120px,33vw,164px);right:-1%;bottom:-3%}
  .ai-card--a{top:8%;left:-3%}
  .ai-card--b{top:7%;right:-3%}
  .ai-card--c{bottom:10%;left:-2%}
}

/* =========================================================
   支給の実写ボトル：3Dくるくる回転・少し小さく・顔にかぶらない配置
   ========================================================= */
.hero__product{
  right:-1%; bottom:-3%;
  width:clamp(110px,13.5vw,156px);   /* 少し小さく */
  perspective:1100px;
}
.hero__product-img{
  /* 連続回転で裏面も見せる（消えないように） */
  backface-visibility:visible; -webkit-backface-visibility:visible;
  transform-style:preserve-3d;
  filter:drop-shadow(0 20px 18px rgba(150,90,100,.4));
}
@media (max-width:760px){
  .hero__product{ width:clamp(88px,24vw,120px); right:0%; bottom:-2%; }
}

/* =========================================================
   HERO フルブリード版：モデルをFVいっぱい（角丸なし）
   コピー・AI診断・3D回転ボトルをオーバーレイ
   ========================================================= */
.hero--full{ min-height:100svh; display:flex; align-items:center; padding:0; overflow:hidden; }

/* モデル＝全面背景 */
.hero--full .hero__model{
  position:absolute; inset:0; margin:0; z-index:0;
  border:0; border-radius:0; box-shadow:none; overflow:hidden; display:block;
}
.hero--full .hero__model-img{ width:100%; height:100%; object-fit:cover; object-position:62% 24%; }

/* 文字の可読性＆世界観のためのグラデ（左に光・上下フェード・ラベンダー） */
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(95deg, rgba(255,243,241,.95) 0%, rgba(255,243,241,.72) 26%, rgba(255,241,246,.24) 46%, rgba(255,255,255,0) 64%),
    radial-gradient(55% 50% at 90% 8%, rgba(191,167,255,.30), transparent 60%),
    linear-gradient(180deg, rgba(255,243,241,.45) 0%, transparent 13%, transparent 78%, rgba(255,243,241,.5) 100%);
}
.hero--full .sheen{ z-index:2; }
.hero--full .hero__bg{ position:absolute; inset:0; z-index:2; }

/* コピー（オーバーレイ） */
.hero--full .hero__content{
  position:relative; z-index:5;
  width:min(92%,var(--maxw)); margin-inline:auto; padding-top:64px;
}
.hero--full .hero__copy{ max-width:640px; }
.hero--full .hero__title{ text-shadow:0 2px 22px rgba(255,243,241,.55); }
/* 各行を1行に固定（「透明感、つづく。」を折り返さない） */
.hero--full .hero__title .line{ white-space:nowrap; }
.hero--full .hero__lead{ text-shadow:0 1px 14px rgba(255,243,241,.7); }

/* AI診断バッジ＆カード（フルブリード基準で配置・顔を避ける） */
.hero--full .ai-badge{ position:absolute; z-index:7; top:82px; left:50%; transform:translateX(-50%); }
.hero--full .ai-card{ position:absolute; z-index:6; }
.hero--full .ai-card--a{ top:11%; right:4%; left:auto; bottom:auto; }
.hero--full .ai-card--b{ top:27%; right:4%; left:auto; bottom:auto; }
.hero--full .ai-card--c{ top:43%; right:4%; left:auto; bottom:auto; }

/* 装飾・スクロール */
.hero--full .deco{ z-index:2; }
.hero--full .drop{ z-index:3; }
.hero--full .hero__scroll{ z-index:5; }

/* ===== 商品ボトル：背景透過素材を 3D でゆっくりくるくる回転 =====
   front/back の2面構成で“立体的に回る”（平面に見えないように） */
.hero--full .hero__product{
  position:absolute; z-index:6; right:3%; bottom:5%;
  width:clamp(100px,10vw,130px);
  border:0; background:none; box-shadow:none; border-radius:0;
  perspective:1300px;
}
.bottle3d{ position:relative; width:100%; transform-style:preserve-3d; will-change:transform; }
.bface{
  display:block; width:100%; height:auto;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  filter:drop-shadow(0 18px 18px rgba(150,90,100,.4));
}
.bface--front{ position:relative; }
.bface--back{ position:absolute; inset:0; transform:rotateY(180deg); }

/* --- モバイル：コピーは下、ボトルは右（顔・コピーに被らない） --- */
@media (max-width:760px){
  .hero--full{ align-items:flex-end; }
  .hero--full .hero__model-img{ object-position:60% 22%; }
  .hero__scrim{
    background:
      linear-gradient(0deg, rgba(255,243,241,.97) 2%, rgba(255,243,241,.8) 22%, rgba(255,241,246,.2) 44%, transparent 60%),
      linear-gradient(180deg, rgba(255,243,241,.5), transparent 14%),
      radial-gradient(60% 40% at 82% 8%, rgba(191,167,255,.26), transparent 60%);
  }
  .hero--full .hero__content{ padding-top:0; padding-bottom:7vh; }
  .hero--full .hero__copy{ max-width:none; }
  .hero--full .ai-badge{ top:70px; }
  .hero--full .ai-card--a{ top:10%; left:3%; right:auto; }
  .hero--full .ai-card--b{ top:10%; right:3%; left:auto; }
  .hero--full .ai-card--c{ top:24%; left:3%; right:auto; bottom:auto; }
  .hero--full .hero__product{ right:-1%; bottom:33%; width:clamp(92px,25vw,112px); }
  /* コピーを少しコンパクトにして下寄りに（顔の上に乗りすぎない） */
  .hero--full .hero__eyebrow{ font-size:.78rem; letter-spacing:.26em; margin-bottom:.7rem; }
  .hero--full .hero__title{ font-size:clamp(2.05rem,8.4vw,2.6rem); line-height:1.3; }
  .hero--full .hero__lead{ font-size:.9rem; line-height:1.85; margin:1rem 0 1.5rem; }
  .hero--full .hero__lead br{ display:none; }
}

/* 商品紹介セクションのボトルも実写（透過PNG）に */
.product__bottle-img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 22px 22px rgba(150,90,100,.34));
}

/* アンカー遷移時、固定ヘッダー(約64px)に隠れないよう着地位置を調整 */
section[id]{ scroll-margin-top:78px; }