/* ==========================================================================
   CRONY iMPROQUA For Professional — LP v3 (別案 / NAVY × GOLD × CREAM)
   高級感 × インパクト。モノトーン以外のカラーリング。
   ========================================================================== */

:root{
  /* navy */
  --navy:    #0b1626;
  --navy-2:  #101f36;
  --navy-3:  #16294a;
  /* gold */
  --gold:    #c9a24c;
  --gold-2:  #e6cf95;
  --gold-dp: #a9812f;
  /* cream */
  --cream:   #f7f2e8;
  --cream-2: #efe7d6;
  /* ink */
  --ink:     #16202e;
  --ink-2:   #3d4757;
  /* accents */
  --green:   #06c755;
  --green-d: #05a847;

  --serif:'Cormorant Garamond','Noto Serif JP','Yu Mincho',serif;
  --sans:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;

  --wrap:1160px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--navy);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:2;
  letter-spacing:.06em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,dl,dd{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
sup{ font-size:.6em; line-height:0; vertical-align:super; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 48px; }
.wrap--narrow{ max-width:900px; }
.sp-only{ display:none; }

/* gold gradient text */
.gold{
  background:linear-gradient(180deg,#f7e9c4 0%,#e6cf95 26%,#c9a24c 54%,#f2e0b0 76%,#b8902f 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------- reveal ---------- */
.js .rv{ opacity:0; transform:translateY(38px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .rv.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .marquee__track{ animation:none !important; }
}

/* ---------- progress ---------- */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:200; }
.progress__bar{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-dp),var(--gold-2),var(--gold)); }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px; transition:all .4s var(--ease); }
.btn--line{
  background:var(--green); color:#fff; font-weight:700;
  padding:20px 40px; border-radius:999px;
  font-size:clamp(13px,1.4vw,15px); line-height:1.6; letter-spacing:.04em;
  box-shadow:0 16px 40px rgba(6,199,85,.32);
}
.btn--line:hover{ background:var(--green-d); transform:translateY(-3px); box-shadow:0 22px 50px rgba(6,199,85,.4); }
.btn--xl{ padding:26px 54px; font-size:clamp(14px,1.6vw,18px); }
.btn__t{ display:inline-block; text-align:left; }

.line-ico{
  width:22px; height:22px; flex:0 0 auto; background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C6.2 2 1.5 5.8 1.5 10.5c0 4.2 3.7 7.7 8.7 8.4.34.07.8.22.92.51.1.26.07.67.03.94l-.15.9c-.04.26-.21 1.03.9.56 1.12-.47 6.03-3.55 8.23-6.08 1.52-1.67 2.37-3.36 2.37-5.23C22.5 5.8 17.8 2 12 2z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C6.2 2 1.5 5.8 1.5 10.5c0 4.2 3.7 7.7 8.7 8.4.34.07.8.22.92.51.1.26.07.67.03.94l-.15.9c-.04.26-.21 1.03.9.56 1.12-.47 6.03-3.55 8.23-6.08 1.52-1.67 2.37-3.36 2.37-5.23C22.5 5.8 17.8 2 12 2z'/></svg>") center/contain no-repeat;
}
.line-ico--lg{ width:26px; height:26px; }

/* ==========================================================================
   Header
   ========================================================================== */
.hdr{ position:fixed; top:0; left:0; right:0; z-index:160; transition:background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease); border-bottom:1px solid transparent; }
.hdr.is-scrolled{ background:rgba(11,22,38,.86); backdrop-filter:blur(14px); border-bottom-color:rgba(201,162,76,.28); }
.hdr__inner{ max-width:var(--wrap); margin:0 auto; padding:20px 48px; display:flex; align-items:center; justify-content:flex-end; gap:24px; }
.hdr__cta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.04em;
  background:var(--green); color:#fff; padding:11px 20px; border-radius:999px;
  transition:background .3s var(--ease);
}
.hdr__cta:hover{ background:var(--green-d); }
.hdr__cta .line-ico{ width:17px; height:17px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; text-align:center; background:var(--navy); }
.hero__bg{
  position:absolute; inset:0;
  background:url("../assets/hero-bg.jpg") center/cover no-repeat;
  filter:grayscale(1) brightness(.42) contrast(1.05) sepia(.35) hue-rotate(180deg);
  transform:scale(1.08); animation:heroZoom 16s var(--ease) forwards;
}
@keyframes heroZoom{ from{ transform:scale(1.16);} to{ transform:scale(1.03);} }
.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(11,22,38,.5) 0%, rgba(11,22,38,.86) 66%, rgba(11,22,38,.97) 100%),
    linear-gradient(180deg, rgba(11,22,38,.9) 0%, rgba(11,22,38,.3) 42%, rgba(11,22,38,.94) 100%);
}
.hero__inner{ position:relative; z-index:3; width:100%; max-width:1000px; padding:130px 40px; display:flex; flex-direction:column; align-items:center; }
.hero__kicker{ display:flex; flex-direction:column; gap:8px; margin-bottom:44px; }
.hero__kicker-main{ font-family:var(--serif); font-size:clamp(14px,1.5vw,18px); letter-spacing:.5em; text-indent:.5em; color:#fff; }
.hero__kicker-sub{ font-family:var(--serif); font-size:clamp(22px,2.2vw,26px); letter-spacing:.3em; text-indent:.3em; color:var(--gold-2); }

.hero__logos{ display:flex; flex-direction:column; align-items:center; gap:20px; margin-bottom:54px; }
.hero__logo-mark{ width:clamp(60px,7vw,84px); filter:brightness(0) invert(1) sepia(1) saturate(2.4) hue-rotate(3deg); opacity:.95; }
.hero__logo-word{ width:clamp(200px,27vw,320px); filter:brightness(0) invert(1) sepia(1) saturate(2.4) hue-rotate(3deg); }
.hero__logo-forpro{ width:clamp(140px,18vw,200px); filter:brightness(0) invert(1) sepia(1) saturate(2.4) hue-rotate(3deg); opacity:.8; }

.hero__catch{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(18px,6.8vw,84px);
  line-height:1.4; letter-spacing:.08em; padding-left:.18em;
  white-space:nowrap; margin-bottom:40px;
}
.hero__sub{ font-size:clamp(13px,1.5vw,16px); line-height:2.5; letter-spacing:.12em; color:rgba(255,255,255,.9); font-weight:200; margin-bottom:56px; }
.hero__cta{ display:flex; justify-content:center; }

.hero__scroll{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--serif); font-size:10px; letter-spacing:.4em; text-indent:.4em; color:var(--gold-2); }
.hero__scroll i{ width:1px; height:54px; background:linear-gradient(180deg,var(--gold-2),transparent); animation:sline 2.4s var(--ease) infinite; }
@keyframes sline{ 0%{ transform:scaleY(.15); transform-origin:top; opacity:0;} 45%{opacity:1;} 100%{ transform:scaleY(1); transform-origin:top; opacity:0;} }

.js .hero__kicker{ transition-delay:.05s; }
.js .hero__logos{ transition-delay:.16s; }
.js .hero__catch{ transition-delay:.28s; }
.js .hero__sub{ transition-delay:.42s; }
.js .hero__cta{ transition-delay:.56s; }

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee{ overflow:hidden; background:var(--navy-2); border-top:1px solid rgba(201,162,76,.3); border-bottom:1px solid rgba(201,162,76,.3); }
.marquee__track{ display:flex; align-items:center; gap:38px; width:max-content; padding:22px 0; animation:marquee 30s linear infinite; }
.marquee__track span{ font-family:var(--serif); font-size:clamp(18px,3vw,34px); letter-spacing:.22em; color:var(--gold-2); white-space:nowrap; }
.marquee__track i{ color:var(--gold); font-style:normal; font-size:12px; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ==========================================================================
   Sections
   ========================================================================== */
.sec{ padding:150px 0; }
.sec--cream{ background:var(--cream); color:var(--ink); --muted:#6f6759; --line:rgba(22,32,46,.14); }
.sec--navy{ background:var(--navy); color:#eae6dc; --muted:#a9b8cc; --line:rgba(255,255,255,.14); }

.sec-head{ text-align:center; margin-bottom:72px; }
.sec-head__en{ font-family:var(--serif); font-size:14px; letter-spacing:.44em; text-indent:.44em; color:var(--gold-dp); margin-bottom:20px; }
.sec-head--light .sec-head__en{ color:var(--gold); }
.sec-head__title{ font-family:var(--serif); font-weight:500; font-size:clamp(24px,3.6vw,44px); line-height:1.6; letter-spacing:.04em; color:var(--ink); text-wrap:balance; }
.sec-head--light .sec-head__title{ color:#fff; }
.rule{ display:block; width:70px; height:1px; margin:30px auto 0; background:linear-gradient(90deg,transparent,var(--gold),transparent); }

.notes{ font-size:12.5px; line-height:2.2; letter-spacing:.06em; color:var(--muted); margin-top:52px; text-align:center; }

/* ==========================================================================
   ② CONCEPT
   ========================================================================== */
.concept__body{ max-width:840px; margin:0 auto; text-align:center; font-size:clamp(14px,1.5vw,16px); line-height:2.7; color:var(--ink-2); font-weight:300; text-wrap:pretty; }
.concept__body p + p{ margin-top:34px; }

/* ==========================================================================
   ③ CASE
   ========================================================================== */
.case-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:64px 44px; }
.ba{ position:relative; aspect-ratio:3/4; overflow:hidden; background:#000; border:1px solid rgba(201,162,76,.4); }
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba__before{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba__line{ position:absolute; top:0; bottom:0; left:var(--pos); width:1px; background:var(--gold-2); transform:translateX(-.5px); pointer-events:none; }
.ba__knob{ position:absolute; top:50%; left:var(--pos); width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; border:1px solid var(--gold-2); background:rgba(11,22,38,.45); backdrop-filter:blur(4px); pointer-events:none; }
.ba__knob::before, .ba__knob::after{ content:""; position:absolute; top:50%; width:9px; height:9px; border-top:1px solid #fff; border-right:1px solid #fff; }
.ba__knob::before{ left:12px; transform:translateY(-50%) rotate(-135deg); }
.ba__knob::after{ right:12px; transform:translateY(-50%) rotate(45deg); }
.ba__range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; background:transparent; }
.ba__range::-webkit-slider-thumb{ -webkit-appearance:none; width:1px; height:1px; }
.ba__range::-moz-range-thumb{ width:1px; height:1px; border:0; }
.ba__tag{ position:absolute; top:14px; z-index:2; font-family:var(--serif); font-size:11px; letter-spacing:.28em; text-indent:.28em; padding:6px 12px; pointer-events:none; }
.ba__tag--b{ left:14px; background:rgba(11,22,38,.75); color:#fff; backdrop-filter:blur(4px); }
.ba__tag--a{ right:14px; background:linear-gradient(180deg,var(--gold-2),var(--gold)); color:#241c08; font-weight:600; }

.case{ text-align:center; }
.case__no{ font-family:var(--serif); font-size:13px; letter-spacing:.36em; text-indent:.36em; color:var(--gold); margin:26px 0 10px; }
.case__title{ font-size:clamp(14px,1.7vw,18px); font-weight:500; letter-spacing:.04em; color:#fff; line-height:1.7; }
.case__agent{ font-size:12.5px; color:var(--muted); margin-top:10px; line-height:1.9; }

/* ==========================================================================
   ④ FEATURES
   ========================================================================== */
.feat-list{ display:flex; flex-direction:column; gap:120px; }
.feat{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.feat--rev .feat__body{ order:2; }
.feat--rev .feat__media{ order:1; }
.feat__no{
  display:block; font-family:var(--serif); font-size:clamp(54px,7vw,86px); line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--gold); margin-bottom:20px;
}
.feat__title{ font-family:var(--serif); font-weight:500; font-size:clamp(21px,2.5vw,30px); line-height:1.7; letter-spacing:.03em; color:var(--ink); margin-bottom:22px; }
.feat__desc{ font-size:clamp(13.5px,1.4vw,15px); line-height:2.4; color:var(--ink-2); font-weight:300; text-wrap:pretty; }
.feat__media{ position:relative; background:#fff; padding:40px; display:flex; align-items:center; justify-content:center; min-height:300px; box-shadow:0 24px 60px rgba(22,32,46,.12); }
.feat__media::after{ content:""; position:absolute; inset:12px; border:1px solid rgba(201,162,76,.5); pointer-events:none; }
.feat__media img{ max-height:340px; width:auto; object-fit:contain; }
.feat__media--mark{ background:#fff; }
.feat__media.feat__media--mark img{ max-height:74px; }

/* feature02: split the graph into "chart" / "conditions" rows (boundary measured at x=465/575 of 1316) */
.feat__media--split{ flex-direction:column; gap:18px; padding:24px; }
.feat__media--split .split{ position:relative; width:60%; margin:0 auto; overflow:hidden; }
.feat__media--split .split img{ position:absolute; top:0; left:0; height:auto; max-width:none; max-height:none; }
.feat__media--split .split--l{ aspect-ratio:1157/1000; }
.feat__media--split .split--l img{ width:283%; }
.feat__media--split .split--r{ aspect-ratio:1843/1000; }
.feat__media--split .split--r img{ width:178%; margin-left:-78%; }

/* ==========================================================================
   ⑤ PRODUCTS
   ========================================================================== */
.prod-list{ display:flex; flex-direction:column; gap:120px; }
.prod{ display:grid; grid-template-columns:1fr 1.05fr; gap:70px; align-items:center; }
.prod--rev .prod__media{ order:2; }
.prod--rev .prod__body{ order:1; }
.prod__media{ position:relative; display:flex; align-items:center; justify-content:center; min-height:460px; }
.prod__spot{ position:absolute; width:78%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(201,162,76,.28),transparent 68%); filter:blur(16px); }
.prod__bottle{ position:relative; max-height:520px; width:auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.55)); }
.prod-list .prod:first-child .prod__bottle{ max-height:416px; }
.prod__tex{ position:absolute; right:2%; bottom:2%; width:36%; border-radius:50%; border:5px solid var(--navy); }
.prod__no{ font-family:var(--serif); font-size:13px; letter-spacing:.36em; text-indent:.36em; color:var(--gold); display:block; margin-bottom:14px; }
.prod__name{ font-family:'Noto Serif JP',var(--serif); font-weight:500; font-size:clamp(18px,2vw,23px); line-height:1.9; letter-spacing:.06em; color:#fff; margin-bottom:30px; }
.prod__spec{ display:grid; grid-template-columns:auto 1fr; gap:4px 26px; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:30px; }
.prod__spec dt{ font-size:12px; letter-spacing:.24em; color:var(--gold); padding-top:4px; }
.prod__spec dd{ font-size:15px; color:#f2efe8; line-height:1.9; }
.prod__spec dd span{ display:block; font-size:11.5px; color:var(--muted); }
.prod__lead{ font-size:11px; letter-spacing:.34em; color:var(--gold); margin-bottom:16px; }
.prod__feats li{ position:relative; padding-left:22px; font-size:14px; line-height:2.1; color:#e4e0d6; margin-bottom:10px; font-weight:300; }
.prod__feats li::before{ content:""; position:absolute; left:0; top:1em; width:10px; height:1px; background:var(--gold); }

/* ==========================================================================
   ⑥ TARGET
   ========================================================================== */
.tgt-list{ max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.tgt{ display:flex; align-items:center; gap:30px; padding:30px 40px; border:1px solid rgba(22,32,46,.16); background:#fff; transition:border-color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease); }
.tgt:hover{ border-color:var(--gold); background:#fffdf7; transform:translateX(8px); }
.tgt__no{ font-family:var(--serif); font-size:30px; color:var(--gold-dp); flex:0 0 auto; min-width:56px; }
.tgt p{ font-size:clamp(15px,1.7vw,19px); line-height:1.8; color:var(--ink); font-weight:300; }

/* ==========================================================================
   ⑦ HOW TO USE
   ========================================================================== */
.steps{ max-width:880px; margin:0 auto; }
.step{ display:flex; gap:38px; padding:38px 0; border-bottom:1px solid var(--line); align-items:flex-start; transition:padding-left .45s var(--ease); }
.step:first-child{ border-top:1px solid var(--line); }
.step:hover{ padding-left:12px; }
.step__no{ font-family:var(--serif); font-size:clamp(30px,4.4vw,54px); line-height:1; color:transparent; -webkit-text-stroke:1px var(--gold); flex:0 0 auto; min-width:86px; }
.step__title{ font-family:var(--serif); font-weight:500; font-size:clamp(18px,2vw,24px); line-height:1.7; color:#fff; }
.step__desc{ margin-top:10px; font-size:13.5px; line-height:2; color:var(--muted); }
.step__temp{ margin-top:18px; display:flex; align-items:baseline; gap:6px; font-size:14px; letter-spacing:.1em; color:#e4e0d6; }
.step__temp strong{ font-family:var(--serif); font-weight:700; font-size:clamp(36px,5.33vw,64px); line-height:1; }
.step__temp span{ font-size:26px; }

/* ==========================================================================
   ⑧ FAQ
   ========================================================================== */
.faq{ display:flex; flex-direction:column; border-top:1px solid rgba(22,32,46,.16); }
.faq__item{ border-bottom:1px solid rgba(22,32,46,.16); }
.faq__q{ width:100%; display:flex; align-items:center; gap:22px; padding:30px 8px; text-align:left; }
.faq__badge{ flex:0 0 auto; width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:17px; font-weight:600; color:#241c08; background:linear-gradient(180deg,var(--gold-2),var(--gold)); }
.faq__badge--a{ background:transparent; color:var(--gold-dp); border:1px solid rgba(201,162,76,.6); align-self:flex-start; }
.faq__text{ flex:1; font-size:clamp(14px,1.5vw,16px); font-weight:400; letter-spacing:.04em; line-height:1.8; color:var(--ink); }
.faq__icon{ position:relative; flex:0 0 auto; width:20px; height:20px; }
.faq__icon::before, .faq__icon::after{ content:""; position:absolute; background:var(--gold-dp); transition:transform .45s var(--ease), opacity .45s var(--ease); }
.faq__icon::before{ left:50%; top:0; width:1.5px; height:100%; transform:translateX(-50%); }
.faq__icon::after{ top:50%; left:0; height:1.5px; width:100%; transform:translateY(-50%); }
.faq__item.is-open .faq__icon::before{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.faq__a{ overflow:hidden; height:0; transition:height .5s var(--ease); }
.faq__a-inner{ display:flex; gap:22px; padding:0 8px 32px; }
.faq__a-inner p{ flex:1; font-size:14px; line-height:2.2; color:var(--ink-2); font-weight:300; text-wrap:pretty; }

/* ==========================================================================
   ⑩ FINAL
   ========================================================================== */
.final{ position:relative; padding:170px 0; overflow:hidden; text-align:center; background:var(--navy); }
.final__bg{ position:absolute; inset:0; background:url("../assets/hero-bg.jpg") center/cover no-repeat; filter:grayscale(1) brightness(.32) sepia(.35) hue-rotate(180deg); opacity:.6; }
.final::after{ content:""; position:absolute; inset:0; background:radial-gradient(80% 70% at 50% 40%, rgba(11,22,38,.45), rgba(11,22,38,.96)); }
.final .wrap{ position:relative; z-index:2; }
.final .sec-head{ margin-bottom:40px; }
.final__title{ font-family:var(--serif); font-weight:500; font-size:clamp(24px,3.4vw,40px); letter-spacing:.06em; color:#fff; }
.final__catch{ font-family:var(--serif); font-weight:500; font-size:clamp(20px,3vw,36px); line-height:1.95; letter-spacing:.06em; margin-bottom:40px; }
.final__body{ font-size:clamp(14px,1.5vw,16px); line-height:2.5; letter-spacing:.08em; color:rgba(255,255,255,.85); font-weight:200; margin-bottom:56px; }
.final__cta{ display:flex; justify-content:center; margin-bottom:56px; }
.final__qr{ display:inline-flex; align-items:center; gap:28px; padding:24px 36px; background:#fff; border-radius:14px; border:1px solid rgba(201,162,76,.5); }
.final__qr img{ width:136px; height:136px; }
.final__qr p{ text-align:left; font-size:13px; line-height:2.1; color:#333; }

/* ==========================================================================
   Footer
   ========================================================================== */
.ftr{ background:#08111d; border-top:1px solid rgba(201,162,76,.3); padding:76px 0 56px; text-align:center; }
.ftr__brand{ display:flex; flex-direction:column; align-items:center; gap:18px; margin-bottom:30px; }
.ftr__mark{ width:46px; filter:brightness(0) invert(1) sepia(1) saturate(2.4) hue-rotate(3deg); opacity:.92; }
.ftr__word{ width:172px; filter:brightness(0) invert(1) sepia(1) saturate(2.4) hue-rotate(3deg); opacity:.92; }
.ftr__forpro{ width:118px; filter:brightness(0) invert(1) sepia(1) saturate(2.4) hue-rotate(3deg); opacity:.72; }
.ftr__company{ font-size:14px; letter-spacing:.16em; color:#e6e0d2; margin-bottom:22px; }
.ftr__link{ display:inline-block; font-size:13px; letter-spacing:.08em; color:var(--gold-2); border-bottom:1px solid rgba(201,162,76,.6); padding-bottom:3px; margin-bottom:34px; transition:color .3s var(--ease), border-color .3s var(--ease); }
.ftr__link:hover{ color:#fff; border-color:#fff; }
.ftr__copy{ font-size:11px; letter-spacing:.08em; color:rgba(255,255,255,.42); }

/* ==========================================================================
   Fixed bar
   ========================================================================== */
.fixed-bar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:170; padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(11,22,38,.94); backdrop-filter:blur(12px); box-shadow:0 -6px 26px rgba(0,0,0,.4); transform:translateY(110%); transition:transform .45s var(--ease); }
.fixed-bar.is-show{ transform:translateY(0); }
.fixed-bar__btn{ display:flex; align-items:center; justify-content:center; gap:12px; background:var(--green); color:#fff; border-radius:999px; padding:13px 20px; box-shadow:0 10px 26px rgba(6,199,85,.4); }
.fixed-bar__btn span{ display:flex; flex-direction:column; line-height:1.3; font-weight:700; font-size:15px; letter-spacing:.03em; }
.fixed-bar__btn small{ font-size:10px; font-weight:500; letter-spacing:.16em; opacity:.9; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .wrap{ padding:0 36px; }
  .hdr__inner{ padding:16px 36px; }
}
@media (max-width:880px){
  body{ font-size:15px; }
  .sec{ padding:96px 0; }
  .sp-only{ display:inline; }
  .wrap{ padding:0 22px; }
  .sec-head{ margin-bottom:48px; }
  .hdr__inner{ padding:12px 20px; }

  .hero__inner{ padding:120px 22px; }
  .hero__kicker{ margin-bottom:32px; }
  .hero__logos{ margin-bottom:38px; gap:16px; }
  .hero__catch{ font-size:clamp(24px,7vw,34px); margin-bottom:30px; }
  .hero__sub{ margin-bottom:44px; }
  .hero__scroll{ display:none; }
  .btn--line{ padding:17px 26px; }

  .case-grid{ grid-template-columns:1fr; gap:52px; }
  .feat-list{ gap:84px; }
  .feat{ grid-template-columns:1fr; gap:28px; }
  .feat--rev .feat__body{ order:1; }
  .feat--rev .feat__media{ order:2; }
  .feat__media{ padding:24px; min-height:0; }
  .feat__media img{ max-height:250px; }

  .prod-list{ gap:84px; }
  .prod{ grid-template-columns:1fr; gap:34px; }
  .prod--rev .prod__media{ order:1; }
  .prod--rev .prod__body{ order:2; }
  .prod__media{ min-height:0; }
  .prod__bottle{ max-height:340px; }
  .prod-list .prod:first-child .prod__bottle{ max-height:272px; }

  .tgt{ padding:22px 24px; gap:18px; }
  .tgt__no{ font-size:22px; min-width:42px; }

  .step{ gap:20px; padding:26px 0; }
  .step__no{ min-width:54px; font-size:32px; }

  .faq__q{ padding:22px 4px; gap:14px; }
  .faq__a-inner{ padding:0 4px 26px; gap:14px; }

  .final{ padding:110px 0; }
  .final__cta{ margin-bottom:44px; }
  .final__qr{ flex-direction:column; gap:16px; padding:26px; }
  .final__qr p{ text-align:center; }

  .fixed-bar{ display:block; }
  body{ padding-bottom:86px; }
}
@media (max-width:430px){
  .btn--xl{ padding:20px 24px; font-size:14px; }
}