.pd-page{
  --gutter:clamp(66px,5.7vw,100px);
  --pd-left:clamp(66px,7.4vw,140px);   
  --ease:cubic-bezier(.16,.78,.26,1);
  --sec-y:clamp(112px,15vh,190px);
  --ink:#1F3A4D;                       
  --navy:#1D374C;
  --pd-soft:rgba(31,58,77,.74);
  font-variant-numeric:lining-nums;
}
@media (max-width:820px){
  .pd-page{--gutter:22px;--pd-left:24px;--sec-y:76px}
}
.pd-main{color:var(--nt-ink);letter-spacing:.06em;background:var(--nt-ground)}
.nb{white-space:nowrap}

:where(.pd-main) :where(p,h1,h2,h3,dl,dd,figure,ul,ol){margin:0}


.head-veil{display:none}
@media (min-width:821px){
  body.pd-page{padding-bottom:var(--foot-h);background:var(--nt-navy)} 
  .head-veil{display:block;position:fixed;top:0;left:0;right:0;height:calc(var(--head-h) + 26px);z-index:49;pointer-events:none;
    background:linear-gradient(180deg,rgba(238,232,223,.92) 0%,rgba(238,232,223,.62) 58%,rgba(238,232,223,0) 100%);
    transition:opacity .4s ease}
  
  body.head-dark .head-veil{background:linear-gradient(180deg,rgba(19,40,58,.7) 0%,rgba(19,40,58,.36) 58%,rgba(19,40,58,0) 100%)}
  body.head-dark header .logo{filter:brightness(0) invert(1)}
}


.pd-label.nt-label{margin:0 0 26px}
.pd-label--center.nt-label{text-align:center}
.nt-navy .pd-label.nt-label{color:#fff}
.heading{position:relative;margin-bottom:34px;padding-bottom:28px;font-family:var(--nt-serif);
  font-size:clamp(32px,2.9vw,44px);font-weight:var(--nt-head-weight);letter-spacing:.2em;line-height:1.7;color:var(--nt-ink);font-feature-settings:normal}
.heading::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:1px;background:var(--nt-line-strong)}
.heading--peak{font-size:clamp(40px,3.8vw,58px);letter-spacing:.18em;line-height:1.5}
.lead{font-family:var(--nt-serif);font-size:18px;font-weight:var(--nt-body-weight);line-height:2.15;letter-spacing:.12em;color:var(--nt-ink)}
.nt-navy .heading{color:#fff}
.nt-navy .heading::after{background:rgba(255,255,255,.55)}
.nt-navy .lead{color:rgba(255,255,255,.88)}
@media (max-width:820px){
  .pd-label.nt-label{margin-bottom:16px}
  .heading{font-size:clamp(24px,6.6vw,27px);letter-spacing:.14em;line-height:1.65;margin-bottom:20px;padding-bottom:18px}
  .heading--peak{font-size:clamp(27px,8vw,32px);letter-spacing:.08em;line-height:1.5}
  .lead{font-size:15px;line-height:2;letter-spacing:.06em}
}


.cta,.purchase__cta,.buy-bar__btn{display:flex;align-items:center;justify-content:center;gap:14px;background:var(--nt-navy);color:#fff;border:1px solid var(--nt-navy);text-decoration:none;
  font-family:var(--nt-sans);font-weight:400;letter-spacing:.12em;transition:background-color .35s ease,color .35s ease}
.cta::after,.purchase__cta::after{content:"→";font-family:var(--nt-serif);font-weight:300;font-size:1.15em;line-height:1}
.cta:hover,.cta:focus-visible,.purchase__cta:hover,.purchase__cta:focus-visible,.buy-bar__btn:hover,.buy-bar__btn:focus-visible{background:#fff;color:var(--nt-navy)}
.cta:focus-visible,.purchase__cta:focus-visible{outline:2px solid var(--nt-navy);outline-offset:4px}


html.rv [data-rv]{transition:transform 1s var(--ease) var(--d,0s),filter 1s var(--ease) var(--d,0s),
  clip-path 1.1s var(--ease) var(--d,0s),opacity 1.2s ease var(--d,0s)}
html.rv [data-rv="wipe"]{clip-path:inset(-40% 100% -40% -6%)}
html.rv [data-rv="rise"]{clip-path:inset(-6% -6% 100% -6%);transform:translate3d(0,20px,0);filter:blur(5px)}
html.rv [data-rv="fade"]{opacity:0;transform:translate3d(0,30px,0) scale(.98)} 
html.rv [data-rv="wipe"].is-in,html.rv [data-rv="rise"].is-in{clip-path:inset(-40% -6% -40% -6%);transform:none;filter:none}
html.rv [data-rv="fade"].is-in{transform:none;opacity:1} 


.hero{--fv-fill:linear-gradient(180deg,#19344B 0%,#1B3951 60%,#173149 100%);
  position:relative;overflow:hidden;isolation:isolate;background:var(--fv-fill);color:#fff}
.hero__stage{position:absolute;z-index:0;aspect-ratio:3 / 2}
.hero__photo{position:absolute;inset:0;background:url("../img/product28/fv-stone.webp") 0 0 / 100% 100% no-repeat}

.hero__water{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero__water-img{position:absolute;inset:0;background:#1d374c url("../img/water-navy/water-navy.webp") 50% 38% / cover no-repeat}
.hero__water-img .fv-ripple{position:absolute;inset:0;display:block;width:100%;height:100%}
.hero__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 44% 58% at 25% 50%,rgba(13,30,44,.42) 0%,rgba(13,30,44,.26) 48%,rgba(13,30,44,0) 100%),
             linear-gradient(180deg,rgba(13,30,44,.16) 0%,rgba(13,30,44,0) 18%)}

.hero__bottle{position:absolute;z-index:1;left:67.535%;top:-12.305%;width:13.845%;height:auto;max-width:none}
.hero__head,.hero__body{position:relative;z-index:2}
.hero__brand{margin-bottom:30px;font-family:var(--nt-serif);font-size:15px;font-weight:400;letter-spacing:.42em;line-height:1;color:rgba(255,255,255,.86)}
.hero__title{position:relative;margin-bottom:40px;padding-bottom:36px;font-family:var(--nt-serif);font-size:clamp(46px,4.6vw,70px);font-weight:200;
  letter-spacing:.24em;line-height:1.5;color:#fff;font-feature-settings:normal}
.hero__title .nb{display:block}
.hero__title::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:1px;background:rgba(255,255,255,.62)}
.hero__lead{max-width:30em;font-family:var(--nt-serif);font-size:17px;font-weight:300;line-height:2.15;letter-spacing:.14em;color:rgba(255,255,255,.9)}
.hero__cue{position:absolute;z-index:3;display:flex;align-items:center;gap:14px;
  font-family:var(--nt-serif);font-size:13px;font-weight:400;letter-spacing:.34em;line-height:1;color:rgba(255,255,255,.8)}
.hero__cue span{display:block;width:48px;height:1px;background:rgba(255,255,255,.7);transform-origin:left;animation:cue-line 2.8s var(--ease) infinite}
@keyframes cue-line{0%{transform:scaleX(0)}55%{transform:scaleX(1)}100%{transform:scaleX(1);transform-origin:right}}

.hero__shore{position:absolute;z-index:1;left:0;right:0;bottom:-1px;pointer-events:none;background:var(--nt-ground);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 4C150 8 260 46 440 66S800 88 1000 78V100H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 4C150 8 260 46 440 66S800 88 1000 78V100H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat}

@media (min-width:821px){
  .hero{--fv-w:min(100vw,calc((100svh - var(--foot-h) - 2svh - var(--head-h) - 24px) / .4953));
    --fv-t:calc(100svh - var(--foot-h) - 2svh - var(--fv-w) * .4133);
    display:grid;grid-template-rows:1fr auto auto 1.2fr;min-height:100svh;padding:var(--head-h) 0 calc(var(--foot-h) + 13svh)}
  .hero__stage{right:0;top:var(--fv-t);width:var(--fv-w)}
  .hero__photo{-webkit-mask:linear-gradient(90deg,transparent 0,#000 18%),linear-gradient(180deg,transparent 0,#000 20%);-webkit-mask-composite:source-in;
    mask:linear-gradient(90deg,transparent 0,#000 18%) intersect,linear-gradient(180deg,transparent 0,#000 20%)}
  .hero__head,.hero__body{padding-left:var(--pd-left);width:min(calc(var(--pd-left) + 600px),calc(100vw - var(--fv-w) * .36))}
  .hero__head{grid-row:2}
  .hero__body{grid-row:3}
  .hero__cue{left:var(--pd-left);bottom:calc(var(--foot-h) + 15svh)}
  .hero__shore{height:15svh}
}

@media (min-width:821px) and (max-aspect-ratio:1/1){
  .hero{grid-template-rows:auto auto auto 1fr;padding-top:calc(var(--head-h) + 8svh)}
  .hero__head{grid-row:1}
  .hero__body{grid-row:2}
}


.overview{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(56px,7vw,128px);align-items:start;
  padding:calc(var(--sec-y) * .7) var(--gutter) var(--sec-y) 0;background:var(--nt-ground)}
.overview__photo{--ov-h:clamp(520px,calc(100svh - var(--head-h) - var(--foot-h) - 40px),900px);
  position:sticky;top:calc(var(--head-h) + 20px);height:var(--ov-h);overflow:hidden;border-radius:0 clamp(140px,15vw,260px) 0 0;background:#e9dccb}
.overview__stage{position:absolute;left:50%;top:0;width:max(100%,var(--ov-h));aspect-ratio:1;transform:translateX(-50%);
  transform-origin:50% 0} 
.overview__wall{position:absolute;inset:0;display:block;width:100%;height:100%}
.overview__bottles{position:absolute;left:18.034%;top:3.223%;width:62.435%;height:auto;max-width:none}

@media (min-width:821px) and (max-aspect-ratio:1/1){
  .overview__photo{--ov-h:min(clamp(520px,calc(100svh - var(--head-h) - var(--foot-h) - 40px),900px),calc((100vw - var(--gutter) - clamp(56px,7vw,128px)) * 6 / 11 * 1.25))}
}
.overview__body{max-width:540px;padding-top:24px}
.overview__name{margin-bottom:10px;font-family:var(--nt-serif);font-size:20px;font-weight:300;letter-spacing:.18em;line-height:1.7;color:var(--nt-ink)}
.overview__en{margin-bottom:48px;font-family:var(--nt-serif);font-size:13px;font-weight:400;letter-spacing:.32em;line-height:1.4;color:var(--pd-soft)}

.price{padding:28px 0 24px;border-top:1px solid var(--nt-line);border-bottom:1px solid var(--nt-line);margin-bottom:52px}
.price dl{display:grid;grid-template-columns:1fr 1fr}
.price dl>div+div{padding-left:clamp(24px,3vw,40px);border-left:1px solid var(--nt-line)}
.price dt{margin-bottom:14px;font-family:var(--nt-serif);font-size:15px;font-weight:400;letter-spacing:.18em;line-height:1;color:var(--pd-soft)}
.price dd{font-family:var(--nt-serif);font-size:clamp(40px,3.5vw,52px);font-weight:300;letter-spacing:.04em;line-height:1;color:var(--nt-ink)}
.price__tax{margin-top:16px;font-family:var(--nt-serif);font-size:14px;font-weight:400;letter-spacing:.14em;line-height:1;color:var(--pd-soft);text-align:right}

.overview__head{margin-bottom:22px;font-family:var(--nt-serif);font-size:clamp(26px,2.2vw,34px);font-weight:var(--nt-head-weight);letter-spacing:.16em;line-height:1.7;color:var(--nt-ink)}
.overview__lead{margin-bottom:42px;font-family:var(--nt-serif);font-size:17px;font-weight:300;line-height:2.1;letter-spacing:.1em}
.cta{width:100%;min-height:64px;padding:0 32px;font-size:17px}

.spec{margin-top:60px;border-bottom:1px solid var(--nt-line)}
.spec>div{display:grid;grid-template-columns:6em 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--nt-line)}
.spec dt,.spec dd{font-family:var(--nt-serif);font-size:16px;line-height:1.75;letter-spacing:.1em}
.spec dt{font-weight:400;color:var(--pd-soft)}
.spec dd{font-weight:300;color:var(--nt-ink)}
.spec ul{list-style:none;margin:0;padding:0}

@media (max-width:820px){
  .overview{grid-template-columns:minmax(0,1fr);gap:36px;padding:0 0 var(--sec-y)}
  .overview__photo{position:relative;top:auto;height:auto;aspect-ratio:1;border-radius:0 0 0 0}
  .overview__stage{width:100%}
  .overview__body{padding:0 var(--gutter)}
  .overview__name{font-size:17px;letter-spacing:.12em}
  .overview__en{margin-bottom:28px;font-size:12px}
  .price{padding:22px 0 18px;margin-bottom:36px}
  .price dt{font-size:14px}
  .price dd{font-size:clamp(30px,9vw,36px)}
  .overview__head{font-size:21px;margin-bottom:14px;letter-spacing:.12em}
  .overview__lead{font-size:15px;margin-bottom:28px;letter-spacing:.06em}
  .cta{min-height:56px;font-size:16px;border-radius:999px}
  .spec{margin-top:40px}
  .spec>div{grid-template-columns:4.5em 1fr;padding:12px 0}
  .spec dt,.spec dd{font-size:15px;letter-spacing:.06em}
}


.roles{padding:var(--sec-y) var(--gutter);background:var(--nt-face)}
.roles__head{display:grid;justify-items:center;text-align:center;margin:0 auto clamp(64px,9vh,100px)}
.roles__head .heading::after{left:50%;transform:translateX(-50%)}
.roles__list{list-style:none;margin:0 auto;padding:0;max-width:1160px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.roles__list li{display:grid;justify-items:center;align-content:start;gap:12px;padding:8px clamp(20px,3vw,48px);text-align:center}
.roles__list li+li{border-left:1px solid var(--nt-line)}
.roles__icon{display:flex;align-items:center;justify-content:center;width:112px;height:112px;margin-bottom:16px;border:1px solid rgba(31,58,77,.4);border-radius:50%;color:var(--nt-ink)}
.roles__icon svg{display:block;width:54px;height:54px}
.roles__list h3{font-family:var(--nt-serif);font-size:22px;font-weight:300;letter-spacing:.16em;line-height:1.5;color:var(--nt-ink)}
.roles__list p{font-family:var(--nt-serif);font-size:16px;font-weight:300;line-height:1.95;letter-spacing:.1em}

@media (max-width:820px){
  .roles__head{justify-items:start;text-align:left;margin-bottom:24px}
  .pd-label--center.nt-label{text-align:left}
  .roles__head .heading::after{left:0;transform:none}
  .roles__list{grid-template-columns:1fr}
  .roles__list li{grid-template-columns:64px 1fr;justify-items:start;align-items:center;column-gap:20px;row-gap:2px;padding:18px 0;text-align:left}
  .roles__list li+li{border-left:0;border-top:1px solid var(--nt-line)}
  .roles__icon{grid-row:1 / span 2;width:64px;height:64px;margin:0}
  .roles__icon svg{width:32px;height:32px}
  .roles__list h3{font-size:18px;letter-spacing:.12em;align-self:end}
  .roles__list p{font-size:14px;letter-spacing:.06em;align-self:start}
}


.ingredients{background:var(--nt-ground)}
.ingredients__navy{position:relative;overflow:hidden;isolation:isolate;background:var(--nt-water-navy);color:#fff;
  padding:var(--sec-y) var(--gutter) calc(var(--sec-y) + 40px)}
.ingredients__water{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ingredients__water-img{position:absolute;inset:0;background:#1d374c url("../img/water-navy/water-navy.webp") 50% 38% / cover no-repeat}
.ingredients__water-img .fv-ripple{position:absolute;inset:0;display:block;width:100%;height:100%}
.ingredients__water::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 56% at 50% 50%,rgba(13,30,44,.46) 0%,rgba(13,30,44,.3) 55%,rgba(13,30,44,.12) 100%)}
.ingredients__intro{max-width:900px;margin:0 0 clamp(64px,9vh,96px) calc(var(--pd-left) - var(--gutter))}
.ingredients__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,72px);max-width:1180px;margin:0 auto}
.ingredient{display:flex;flex-direction:column;align-items:center;text-align:center}
.ingredient__photo{position:relative;width:clamp(170px,15vw,220px);aspect-ratio:1;margin-bottom:34px;border-radius:50%;
  box-shadow:0 0 0 10px rgba(29,55,76,.0),0 0 0 11px rgba(255,255,255,.34)}
.ingredient__photo img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}

.ingredient .ingredient__ratio{position:absolute;right:-16%;top:-6%;display:flex;align-items:center;justify-content:center;width:42%;aspect-ratio:1;
  border:1px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(19,40,58,.86);
  font-family:var(--nt-serif);font-size:clamp(28px,2.4vw,36px);font-weight:300;line-height:1;letter-spacing:0;color:#fff}
.ingredient__ratio .pct{font-size:.5em;margin-left:.06em;letter-spacing:.02em}
.ingredient h3{margin-bottom:14px;font-family:var(--nt-serif);font-size:clamp(20px,1.6vw,24px);font-weight:300;letter-spacing:.16em;line-height:1.6;color:#fff}
.ingredient p{max-width:19em;font-family:var(--nt-serif);font-size:16px;font-weight:300;line-height:2;letter-spacing:.08em;color:rgba(255,255,255,.86)}


.answer{position:relative;overflow:hidden;isolation:isolate;padding:clamp(130px,20vh,220px) var(--gutter);background:var(--nt-ground);text-align:center}
.answer__pool{position:absolute;z-index:-1;pointer-events:none;overflow:hidden;background:#e9eff2 url("../img/fv/caustic-still.webp") 50% 50% / cover no-repeat;
  -webkit-mask:var(--pd-pool) 0 0 / 100% 100% no-repeat;mask:var(--pd-pool) 0 0 / 100% 100% no-repeat}
.answer__pool::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.34)}
.answer__body{margin:0 auto;max-width:40em;font-family:var(--nt-serif);font-size:18px;font-weight:300;line-height:2.4;letter-spacing:.12em}
.answer__close{margin-top:clamp(48px,7vh,72px);font-family:var(--nt-serif);font-size:clamp(26px,2.3vw,34px);font-weight:var(--nt-head-weight);letter-spacing:.16em;line-height:1.7;color:var(--nt-ink)}
.answer__close .en{font-family:var(--nt-serif);font-size:1.08em;font-weight:300;letter-spacing:.16em}

@media (min-width:821px){
  .ingredients__navy .heading{font-size:clamp(32px,2.9vw,44px)}
  .answer{--pd-pool:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M1000 0H360C262 52 214 140 232 236c18 98-88 150-104 262-16 110 74 166 80 252 6 92-70 156-36 232 14 10 30 18 48 18h780z'/%3E%3C/svg%3E")}
  .answer__pool{top:0;right:0;bottom:0;width:26vw}
  .answer__copy{margin-right:18vw}
}
@media (max-width:820px){
  
  .ingredients__navy{padding:var(--sec-y) var(--gutter) calc(var(--sec-y) + 30px)}
  .ingredients__water-img{background-image:url("../img/water-navy/water-navy-sp.webp");background-position:58% 50%}
  .ingredients__water::after{background:linear-gradient(180deg,rgba(13,30,44,.34) 0%,rgba(13,30,44,.46) 30%,rgba(13,30,44,.42) 72%,rgba(13,30,44,.2) 100%)}
  .ingredients__intro{margin:0 0 36px}
  .ingredients__list{grid-template-columns:1fr;gap:0}
  .ingredient{display:grid;grid-template-columns:96px 1fr;column-gap:20px;align-items:center;text-align:left;padding:22px 0;border-top:1px solid rgba(255,255,255,.18)}
  .ingredient:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
  .ingredient__photo{width:96px;margin:0;box-shadow:0 0 0 5px rgba(29,55,76,0),0 0 0 6px rgba(255,255,255,.3)}
  .ingredient .ingredient__ratio{right:-14%;top:-10%;width:50%;font-size:17px}
  .ingredient h3{margin-bottom:6px;font-size:18px;letter-spacing:.1em}
  .ingredient p{max-width:none;font-size:14px;line-height:1.85;letter-spacing:.04em}
  .answer{--pd-pool:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 300C160 120 330 60 520 140S820 260 1000 90V1000H0Z'/%3E%3C/svg%3E");
    padding:84px var(--gutter) 150px}
  .answer__pool{left:0;right:0;bottom:0;height:120px}
  .answer__body{font-size:15px;line-height:2.15;letter-spacing:.04em}
  .answer__close{margin-top:30px;font-size:19px;letter-spacing:.08em}
}


.scent{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(48px,6vw,112px);
  padding:var(--sec-y) 0 var(--sec-y) var(--pd-left);background:var(--nt-ground)}
.scent__copy{order:-1}
.scent .lead{line-height:2.35}
.scent__photo{position:relative;overflow:hidden;aspect-ratio:4 / 4.6;max-height:calc(100svh - var(--head-h) - var(--foot-h) - 60px);justify-self:end;width:100%;
  -webkit-mask:var(--pd-leafy) 0 0 / 100% 100% no-repeat;mask:var(--pd-leafy) 0 0 / 100% 100% no-repeat;
  --pd-leafy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M1000 0H330C190 34 120 140 140 260c20 120-92 170-112 300-20 128 70 190 84 290 8 62-12 110 20 150h868z'/%3E%3C/svg%3E")}
.scent__photo img{position:absolute;left:0;top:-50px;display:block;width:100%;height:calc(100% + 100px);object-fit:cover;object-position:40% 55%}

@media (max-width:820px){
  .scent{grid-template-columns:1fr;gap:36px;padding:var(--sec-y) 0}
  .scent__copy{padding:0 var(--gutter)}
  .scent__photo{width:calc(100% - var(--gutter));aspect-ratio:4 / 3.6;max-height:none;
    --pd-leafy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M1000 0H260C150 30 90 120 104 230c14 110-70 170-84 290-14 116 56 190 64 290 6 78-14 130 22 190h894z'/%3E%3C/svg%3E")}
  .scent__photo img{top:0;height:100%}
}


.howto{position:relative;background:var(--nt-ground)}
.howto__intro{position:relative;isolation:isolate;display:flex;align-items:center;min-height:min(80svh,780px);padding:var(--sec-y) var(--gutter) calc(var(--sec-y) * .6) var(--pd-left)}
.howto__water{position:absolute;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask:var(--pd-drop) 0 0 / 100% 100% no-repeat;mask:var(--pd-drop) 0 0 / 100% 100% no-repeat}
.howto__water-img{position:absolute;inset:0;background:url("../img/product28/howto-drop.webp") var(--pd-drop-pos,30% 46%) / cover no-repeat}
.howto__water-img canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.howto__leaf{position:absolute;z-index:-2;pointer-events:none;background:url("../img/deco/top02-leaf-shadow.webp") 0 0 / cover no-repeat;mix-blend-mode:multiply;opacity:.42;transform:scaleX(-1)}

.howto__script{position:relative;display:inline-block;margin:34px 0 0 clamp(110px,12vw,220px);font-size:clamp(30px,2.5vw,40px);transform:rotate(-9deg);transform-origin:left bottom}
.howto__copy{position:relative;z-index:2;max-width:min(54vw,780px)}

.steps{list-style:none;margin:0 auto;padding:clamp(16px,3vh,40px) var(--gutter) 0;max-width:1320px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,5vh,64px) clamp(24px,2.6vw,48px)}
.howto-step{position:relative;z-index:0;display:flex;flex-direction:column;align-items:center;padding:34px clamp(18px,2vw,32px) 38px;text-align:center}

.step__art{position:relative;display:block;width:min(230px,78%);aspect-ratio:1;margin-bottom:30px;border-radius:50%;overflow:hidden;background:var(--nt-face);
  box-shadow:0 0 0 10px var(--nt-ground),0 0 0 11px rgba(31,58,77,.3)}
.step__art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 28%;mix-blend-mode:multiply}

.step__label{position:absolute;z-index:2;top:22px;left:calc(50% - min(115px,39%) - 20px);display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:82px;height:82px;border:1px solid rgba(31,58,77,.45);border-radius:50%;background:var(--nt-ground);
  font-family:var(--nt-serif);font-size:11px;font-weight:500;letter-spacing:.24em;line-height:1;color:var(--pd-soft)}
.step__label::after{content:"";order:1;display:block;width:14px;height:1px;margin:6px 0 5px;background:rgba(31,58,77,.55)}
.step__no{order:2;font-size:28px;font-weight:300;letter-spacing:0;line-height:1;color:var(--nt-ink)}
.howto-step h3{margin-bottom:12px;font-family:var(--nt-serif);font-size:22px;font-weight:300;letter-spacing:.14em;line-height:1.55;color:var(--nt-ink)}
.step__sub{display:block;margin-top:4px;font-size:14px;font-weight:300;letter-spacing:.08em;line-height:1.6;color:var(--pd-soft)}
.step__text{max-width:20em;font-family:var(--nt-serif);font-size:15px;font-weight:300;line-height:2;letter-spacing:.06em}


.howto-step--key::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--nt-face);border:1px solid rgba(31,58,77,.32);border-radius:var(--nt-card-radius);box-shadow:var(--nt-card-shadow)}
.howto-step--key .step__art{box-shadow:0 0 0 10px var(--nt-face),0 0 0 11px var(--nt-navy)}
.howto-step--key .step__label{width:96px;height:96px;background:var(--nt-navy);border-color:var(--nt-navy);color:rgba(255,255,255,.86)}
.howto-step--key .step__label::after{background:rgba(255,255,255,.6)}
.howto-step--key .step__no{font-size:38px;color:#fff}
.howto-step--key h3{font-size:26px;letter-spacing:.16em}


.minutes{position:relative;margin:var(--sec-y) auto 0;max-width:min(1100px,calc(100% - 2 * var(--gutter)));padding:clamp(80px,11vh,116px) var(--gutter);
  text-align:center;color:var(--nt-ink);background:var(--nt-face);border:1px solid var(--nt-line);border-radius:var(--nt-card-radius)}
.minutes h3{position:relative;margin-bottom:40px;padding-bottom:28px;font-family:var(--nt-serif);font-size:clamp(26px,2.3vw,34px);font-weight:var(--nt-head-weight);letter-spacing:.16em;line-height:1.7}
.minutes h3::after{content:"";position:absolute;left:50%;bottom:0;width:40px;height:1px;background:var(--nt-line-strong);transform:translateX(-50%)}
.minutes p{margin:0 auto;max-width:40em;font-family:var(--nt-serif);font-size:17px;font-weight:300;line-height:2.2;letter-spacing:.1em}
.minutes .minutes__use{margin-bottom:22px;font-size:21px;letter-spacing:.14em;line-height:1.8}

.drying{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,4vw,80px);padding:clamp(88px,12vh,130px) var(--gutter) var(--sec-y) var(--pd-left)}
.drying h3{align-self:start;max-width:8em;padding-top:14px;border-top:1px solid var(--nt-line-strong);font-family:var(--nt-serif);font-size:22px;font-weight:300;letter-spacing:.18em;line-height:1.5}
.drying p{max-width:44em;font-family:var(--nt-serif);font-size:16px;font-weight:300;line-height:2.15;letter-spacing:.08em}

@media (min-width:821px){
  .howto{--pd-drop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M1000 0V1000H120C40 930 20 820 70 720 130 600 300 560 360 430 420 300 380 160 470 80 540 18 660 0 760 0Z'/%3E%3C/svg%3E")}
  .howto__water{right:0;top:7%;bottom:0;width:50vw}
  .howto__leaf{right:0;top:0;width:30vw;height:46%;z-index:0;opacity:.34}
}
@media (min-width:821px) and (max-width:1080px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step__label{left:calc(50% - min(115px,39%) - 16px)}
}
@media (max-width:820px){
  .howto{--pd-drop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 330C140 180 300 90 500 120 690 150 820 70 1000 0V1000H0Z'/%3E%3C/svg%3E")}
  .howto__intro{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:var(--sec-y) var(--gutter) 0}
  .howto__copy{max-width:none}
  .howto__water{position:relative;order:2;z-index:0;width:calc(100% + 2 * var(--gutter));height:210px;margin:30px calc(-1 * var(--gutter)) 0}
  .howto__leaf{right:0;top:0;width:70%;height:200px;opacity:.3}
  .howto__script{margin:22px 0 -14px 64px;font-size:26px;transform:rotate(-8deg)}
  .steps{grid-template-columns:minmax(0,1fr);gap:12px;padding-top:28px}
  .howto-step{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:18px;align-items:start;padding:20px 14px 22px 10px;text-align:left}
  .step__art{grid-row:1 / span 3;width:104px;margin:6px 0 0 4px;box-shadow:0 0 0 6px var(--nt-ground),0 0 0 7px rgba(31,58,77,.3)}
  .step__label{position:static;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:8px;width:auto;height:auto;margin:0 0 4px;border:0;border-radius:0;background:none;font-size:12px}
  .step__label::after{display:none}
  .step__no{font-size:24px}
  .howto-step h3{margin-bottom:6px;font-size:18px;letter-spacing:.1em}
  .step__sub{font-size:13px}
  .step__text{font-size:14px;line-height:1.85;letter-spacing:.03em}
  .howto-step--key{padding:22px 14px 24px 10px}
  .howto-step--key .step__art{box-shadow:0 0 0 6px var(--nt-face),0 0 0 7px var(--nt-navy)}
  .howto-step--key .step__label{width:auto;height:auto;padding:5px 12px 6px;border-radius:999px;background:var(--nt-navy);align-self:start;justify-self:start}
  .howto-step--key .step__no{font-size:28px}
  .howto-step--key h3{font-size:21px}
  .minutes{margin:56px var(--gutter) 0;max-width:none;padding:56px 22px;text-align:left}
  .minutes h3{font-size:21px;margin-bottom:22px;padding-bottom:16px;letter-spacing:.1em}
  .minutes h3::after{left:0;transform:none}
  .minutes .minutes__use{font-size:16px;margin-bottom:12px;letter-spacing:.06em}
  .minutes p{font-size:15px;line-height:2;letter-spacing:.04em}
  .drying{grid-template-columns:1fr;gap:16px;padding:52px var(--gutter) var(--sec-y)}
  .drying h3{font-size:18px}
  .drying p{font-size:15px;letter-spacing:.04em}
}


.ba{--frame:clamp(150px,min(19vw,calc((100svh - 380px) / 1.2)),300px);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(48px,5vw,96px);
  min-height:100svh;padding:var(--sec-y) var(--gutter) var(--sec-y) var(--pd-left);background:var(--nt-face)}
.ba__checks{list-style:none;margin:30px 0 0;padding:0}
.ba__checks li{position:relative;padding:12px 0 12px 40px;border-bottom:1px solid var(--nt-line);font-family:var(--nt-serif);font-size:16px;font-weight:400;letter-spacing:.1em;line-height:1.7;color:var(--nt-ink)}
.ba__checks li:first-child{border-top:1px solid var(--nt-line)}
.ba__checks li::before{content:"";position:absolute;left:2px;top:50%;width:20px;height:20px;margin-top:-10px;border:1px solid rgba(31,58,77,.6);border-radius:3px}
.ba__checks li::after{content:"";position:absolute;left:8px;top:50%;width:6px;height:11px;margin-top:-8px;border-right:1.5px solid var(--nt-navy);border-bottom:1.5px solid var(--nt-navy);transform:rotate(42deg)}
.ba__view{justify-self:center}
.ba__pair{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.ba-shot{width:var(--frame)}
.ba-shot__label{margin-bottom:14px;font-family:var(--nt-serif);font-size:clamp(15px,1.15vw,18px);font-weight:400;letter-spacing:.34em;line-height:1;color:var(--pd-soft)}
.ba-shot__frame{position:relative;overflow:hidden;aspect-ratio:5 / 6;border-radius:12px;background:#fff;box-shadow:var(--nt-card-shadow)}

.ba-shot__frame img{position:absolute;display:block;height:auto;max-width:none}
.ba-shot--before .ba-shot__frame img{width:97.03%;left:3.65%;top:1.13%}
.ba-shot--after .ba-shot__frame img{width:107.11%;left:-1.21%;top:-4.89%}
.ba-shot figcaption{margin-top:14px;font-family:var(--nt-serif);font-size:15px;font-weight:300;line-height:1.75;letter-spacing:.08em;color:var(--nt-ink)}

.ba__arrow{flex:0 0 auto;width:34px;height:12px;margin-top:20px;background:
  linear-gradient(var(--nt-ink),var(--nt-ink)) 0 50% / 100% 1px no-repeat;position:relative}
.ba__arrow::after{content:"";position:absolute;right:0;top:50%;width:9px;height:9px;margin-top:-5px;border-top:1px solid var(--nt-ink);border-right:1px solid var(--nt-ink);transform:rotate(45deg)}
.ba__notes{margin-top:28px;padding-top:16px;border-top:1px solid var(--nt-line)}
.ba__notes p{font-family:var(--nt-serif);font-size:14px;font-weight:300;line-height:1.8;letter-spacing:.06em;color:var(--nt-ink)}

@media (max-width:820px){
  .ba{--frame:calc((100vw - 2 * var(--gutter) - 40px) / 2);grid-template-columns:1fr;min-height:0;gap:36px;padding:var(--sec-y) var(--gutter)}
  .ba__checks{margin-top:20px}
  .ba__checks li{font-size:15px;letter-spacing:.06em;padding:10px 0 10px 34px}
  .ba__view{justify-self:stretch}
  .ba__pair{gap:6px}
  .ba__arrow{width:20px;height:10px}
  .ba__arrow::after{width:7px;height:7px;margin-top:-4px}
  .ba-shot__label{font-size:14px;margin-bottom:10px;letter-spacing:.24em}
  .ba-shot figcaption{font-size:14px;margin-top:10px;letter-spacing:.04em}
  .ba__notes{margin-top:20px}
}


.safety{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(48px,6vw,110px);align-items:start;
  padding:var(--sec-y) var(--gutter) var(--sec-y) var(--pd-left);background:var(--nt-ground)}
.safety__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,72px)}
.safety__list li{padding:30px 0 34px;border-top:1px solid var(--nt-line)}
.safety__list h3{margin-bottom:8px;font-family:var(--nt-serif);font-size:clamp(20px,1.7vw,24px);font-weight:300;letter-spacing:.14em;line-height:1.6;color:var(--nt-ink)}
.safety__list p{font-family:var(--nt-serif);font-size:16px;font-weight:300;line-height:1.9;letter-spacing:.08em}
.safety__list .safety__note{margin-top:4px;font-size:14px;color:var(--pd-soft)}

@media (max-width:820px){
  .safety{grid-template-columns:1fr;gap:8px;padding:var(--sec-y) var(--gutter)}
  .safety__list{grid-template-columns:1fr}
  .safety__list li{padding:18px 0 20px}
  .safety__list h3{font-size:18px;margin-bottom:4px;letter-spacing:.1em}
  .safety__list p{font-size:14px}
}


.faq-sec{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(48px,6vw,110px);align-items:start;
  padding:var(--sec-y) var(--gutter) calc(var(--sec-y) + 12svh) var(--pd-left);background:var(--nt-ground)}
.faq-sec__wave{position:absolute;z-index:-1;right:0;bottom:0;pointer-events:none;overflow:hidden;background:#1d374c url("../img/water-navy/water-navy.webp") 100% 100% / 100vw auto no-repeat;
  -webkit-mask:var(--nt-curve) 0 0 / 100% 100% no-repeat;mask:var(--nt-curve) 0 0 / 100% 100% no-repeat}

.faq-sec__list{display:grid;gap:16px}
.faq{background:rgba(255,255,255,.82);border:1px solid rgba(31,58,77,.1);border-radius:14px;box-shadow:0 14px 34px rgba(64,52,36,.05)}
.faq summary{list-style:none;display:grid;grid-template-columns:42px minmax(0,1fr) 18px;align-items:center;gap:22px;
  padding:24px 28px 24px 24px;cursor:pointer;font-family:var(--nt-serif);font-size:18px;font-weight:400;letter-spacing:.1em;line-height:1.6;color:var(--nt-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq__mark,.faq__a::before{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--nt-navy);
  font-family:var(--nt-serif);font-size:17px;font-weight:400;letter-spacing:0;line-height:1;color:#fff}

.faq summary::after{content:"";width:18px;height:18px;
  background:linear-gradient(var(--nt-ink),var(--nt-ink)) center / 18px 1px no-repeat,linear-gradient(var(--nt-ink),var(--nt-ink)) center / 1px 18px no-repeat;
  transition:transform .45s var(--ease),background-size .45s var(--ease)}
.faq[open] summary::after{background-size:18px 1px,1px 0;transform:rotate(180deg)}
.faq summary:focus-visible{outline:2px solid var(--nt-navy);outline-offset:2px;border-radius:14px}
.faq__a{position:relative;padding:4px 46px 30px calc(24px + 42px + 22px)}
.faq__a::before{content:"A";position:absolute;left:24px;top:2px;background:rgba(29,55,76,.86)}
.faq__a p{font-family:var(--nt-serif);font-size:16px;font-weight:300;line-height:2.05;letter-spacing:.06em}
.faq__a p+p{margin-top:1em}
.faq[open] .faq__a{animation:faq-open .6s var(--ease) both}
@keyframes faq-open{from{transform:translate3d(0,-8px,0);clip-path:inset(0 0 100% 0)}to{transform:none;clip-path:inset(0 0 0 0)}}

@media (min-width:821px){
  .faq-sec__wave{width:46vw;height:30%}
}
@media (max-width:820px){
  .faq-sec{grid-template-columns:1fr;gap:12px;padding:var(--sec-y) var(--gutter) 150px}
  .faq-sec__wave{width:100%;height:130px;background-image:url("../img/water-navy/water-navy-sp.webp");background-size:188vw auto;background-position:100% 100%}
  .faq-sec__list{gap:12px}
  .faq summary{grid-template-columns:32px minmax(0,1fr) 14px;gap:14px;padding:16px 16px 16px 14px;font-size:16px;letter-spacing:.06em}
  .faq__mark,.faq__a::before{width:32px;height:32px;font-size:14px}
  .faq summary::after{width:14px;height:14px;background-size:14px 1px,1px 14px}
  .faq[open] summary::after{background-size:14px 1px,1px 0}
  .faq__a{padding:2px 16px 22px calc(14px + 32px + 14px)}
  .faq__a::before{left:14px}
  .faq__a p{font-size:14px;line-height:1.95;letter-spacing:.03em}
}


.faq__more a{display:inline-flex;align-items:center;gap:10px;padding-bottom:3px;border-bottom:1px solid currentColor;color:var(--nt-ink);text-decoration:none;letter-spacing:.08em}
.faq__more a svg{flex:0 0 auto;transition:translate .3s ease}
.faq__more a:hover svg,.faq__more a:focus-visible svg{translate:3px 0}
.faq__more a:focus-visible{outline:2px solid var(--nt-navy);outline-offset:3px}


.purchase{position:relative;overflow:hidden;isolation:isolate;background:#E7DAC6}
.purchase__stage{position:absolute;z-index:-1;aspect-ratio:3 / 2}
.purchase__photo{position:absolute;inset:0;background:url("../img/product28/purchase-water.webp") 0 0 / 100% 100% no-repeat}
.purchase__bottles{position:absolute;left:62.847%;top:-1.693%;width:20.92%;height:auto;max-width:none}
.purchase__panel{position:relative;z-index:1;padding:clamp(48px,6vw,72px) clamp(28px,4vw,60px) clamp(40px,5vw,56px);
  background:rgba(246,242,236,.93);border:1px solid var(--nt-line);border-radius:var(--nt-card-radius);box-shadow:var(--nt-card-shadow)}
.purchase__en{margin-bottom:16px;font-family:var(--nt-serif);font-size:13px;font-weight:500;letter-spacing:.32em;line-height:1;color:var(--nt-ink)}
.purchase__title{font-family:var(--nt-serif);font-size:clamp(28px,2.4vw,36px);font-weight:var(--nt-head-weight);letter-spacing:.2em;line-height:1.6;color:var(--nt-ink)}
.purchase__cta{min-height:clamp(70px,9vh,84px);margin:clamp(32px,5vh,44px) 0 20px;font-size:clamp(18px,1.5vw,21px);letter-spacing:.18em}
.purchase__note{margin-bottom:30px;font-family:var(--nt-serif);font-size:15px;font-weight:300;line-height:1.8;letter-spacing:.08em;color:var(--nt-ink)}
.purchase__routes{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--nt-line)}
.purchase__routes a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 40px 18px 4px;
  border-top:1px solid var(--nt-line);color:var(--nt-ink);text-decoration:none;transition:background-color .3s ease}
.purchase__routes a::after{content:"";position:absolute;right:12px;top:50%;width:8px;height:8px;margin-top:-4px;
  border-top:1px solid var(--nt-ink);border-right:1px solid var(--nt-ink);transform:rotate(45deg);transition:transform .3s var(--ease)}
.purchase__routes a:hover,.purchase__routes a:focus-visible{background:rgba(29,55,76,.05)}
.purchase__routes a:hover::after{transform:translateX(4px) rotate(45deg)}
.purchase__routes a:focus-visible{outline:2px solid var(--nt-navy);outline-offset:-2px}
.route__who{font-family:var(--nt-serif);font-size:17px;font-weight:400;letter-spacing:.12em;line-height:1.5}
.route__go{font-family:var(--nt-serif);font-size:14px;font-weight:300;letter-spacing:.1em;line-height:1.5;color:var(--pd-soft)}

@media (min-width:821px){
  
  .purchase{--pu-h:clamp(640px,calc(100svh - var(--foot-h)),940px);--pu-w:max(100vw,calc(var(--pu-h) * 1.5));
    display:flex;align-items:center;min-height:var(--pu-h);padding:clamp(56px,8vh,88px) var(--gutter) clamp(56px,8vh,88px) var(--pd-left)}
  .purchase__stage{right:0;top:calc(var(--pu-h) * .04);width:var(--pu-w)}
  .purchase__photo{-webkit-mask:linear-gradient(180deg,transparent 0,#000 9%);mask:linear-gradient(180deg,transparent 0,#000 9%)}
  .purchase__panel{width:min(560px,44vw)}
}
@media (max-width:820px){
  .purchase{padding:0 14px 72px}
  .purchase__stage{position:relative;z-index:0;width:230vw;margin:28px 0 0 calc(50vw - 14px - 230vw * .733);
    -webkit-mask:linear-gradient(180deg,transparent 0,#000 8%);mask:linear-gradient(180deg,transparent 0,#000 8%)}
  
  .purchase__panel{margin-top:calc(-230vw / 1.5 * .42);padding:40px 20px 30px}
  .purchase__en{font-size:12px;margin-bottom:12px}
  .purchase__title{font-size:22px;letter-spacing:.14em}
  .purchase__cta{min-height:62px;margin:26px 0 16px;font-size:18px;border-radius:999px}
  .purchase__note{margin-bottom:22px;font-size:14px}
  .purchase__routes a{flex-direction:column;align-items:flex-start;gap:2px;padding:13px 32px 13px 2px}
  .route__who,.route__go{white-space:nowrap}
  .route__who{font-size:16px}
}


.buy-choice.overlay{background:rgba(19,40,58,.55)}
.buy-choice .buy-choice__modal{max-width:520px;padding:48px 40px 40px;background:var(--nt-face);border-top:2px solid var(--nt-navy);box-shadow:0 24px 72px rgba(19,40,58,.22)}
.buy-choice .buy-choice__modal h2{margin-bottom:14px;font-family:var(--nt-serif);font-weight:300;letter-spacing:.16em;color:var(--nt-ink)}
.buy-choice .close{border-color:var(--nt-navy);color:var(--nt-navy);background:var(--nt-face)}
.buy-choice__lead{margin-bottom:26px;text-align:center;font-family:var(--nt-serif);font-size:16px;font-weight:300;line-height:1.8;letter-spacing:.06em;color:var(--nt-ink)}
.buy-choice__list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--nt-line)}
.buy-choice__list a{position:relative;display:flex;flex-direction:column;gap:4px;padding:18px 40px 18px 4px;
  border-top:1px solid var(--nt-line);color:var(--nt-ink);text-decoration:none;transition:background-color .3s ease}
.buy-choice__list a::after{content:"";position:absolute;right:12px;top:50%;width:8px;height:8px;margin-top:-4px;
  border-top:1px solid var(--nt-ink);border-right:1px solid var(--nt-ink);transform:rotate(45deg);transition:transform .3s var(--ease)}
.buy-choice__list a:hover,.buy-choice__list a:focus-visible{background:rgba(29,55,76,.05)}
.buy-choice__list a:hover::after{transform:translateX(4px) rotate(45deg)}
.buy-choice__list a:focus-visible{outline:2px solid var(--nt-navy);outline-offset:-2px}
.buy-choice__who{font-family:var(--nt-serif);font-size:18px;font-weight:400;letter-spacing:.1em;line-height:1.5}
.buy-choice__txt{font-family:var(--nt-serif);font-size:15px;font-weight:300;letter-spacing:.04em;line-height:1.6;color:var(--nt-ink)}
.buy-choice.open .buy-choice__modal{animation:buy-choice-in .45s var(--ease) both}
@keyframes buy-choice-in{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.buy-choice.open .buy-choice__modal{animation:none}}
@media (max-width:820px){
  .buy-choice{padding:16px}
  .buy-choice .buy-choice__modal{padding:40px 22px 30px}
  .buy-choice .buy-choice__modal h2{font-size:24px}
  .buy-choice__lead{font-size:15px;margin-bottom:20px}
  .buy-choice__who{font-size:16px}
  .buy-choice .close{top:14px;right:14px}
}


.buy-bar{position:fixed;z-index:55;left:0;right:0;bottom:var(--bar-bottom,0px);min-height:68px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px var(--gutter);
  background:rgba(246,242,236,.97);border-top:1px solid var(--nt-line);
  transform:translate3d(0,110%,0);visibility:hidden;
  transition:transform .55s var(--ease),visibility 0s linear .55s}
.buy-bar.is-shown{transform:none;visibility:visible;transition:transform .55s var(--ease),visibility 0s}
.buy-bar p{margin:0;white-space:nowrap}
.buy-bar__info{display:flex;align-items:baseline;gap:28px;min-width:0}
.buy-bar__name{font-family:var(--nt-serif);font-size:16px;font-weight:400;letter-spacing:.12em;line-height:1.4;color:var(--nt-ink)}
.buy-bar__price{display:flex;align-items:baseline;gap:8px;color:var(--nt-ink)}
.buy-bar__yen{font-family:var(--nt-serif);font-size:21px;font-weight:400;letter-spacing:.04em;line-height:1.2}
.buy-bar__tax{font-family:var(--nt-serif);font-size:14px;line-height:1;color:var(--pd-soft)}
.buy-bar__btn{display:inline-flex;min-height:48px;padding:0 40px;flex:0 0 auto;font-size:15px;letter-spacing:.16em;white-space:nowrap}
.buy-bar__btn:focus-visible{outline:2px solid var(--nt-navy);outline-offset:3px}
body.mobile-menu-open .buy-bar{visibility:hidden}

@media (max-width:820px){
  .buy-bar{min-height:64px;gap:10px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)) 16px}
  .buy-bar__info{display:block}
  .buy-bar__name{font-size:14px;letter-spacing:.06em}
  .buy-bar__yen{font-size:17px;letter-spacing:0}
  .buy-bar__price{gap:6px}
  .buy-bar__btn{min-height:46px;padding:0 18px;font-size:14px;letter-spacing:.06em;border-radius:999px}
}


@media (max-width:359px){
  .howto-step{grid-template-columns:80px minmax(0,1fr);column-gap:12px;padding:18px 8px 20px 6px}
  .step__art{width:76px;margin:6px 0 0 2px}
  .howto-step--key{padding:20px 8px 22px 6px}
}


@media (max-width:820px){
  .hero{--fvm-w:min(210vw,calc((100svh - var(--head-h) - 220px) / .4953));
    display:flex;flex-direction:column;padding:var(--head-h) 0 92px}
  .hero__head{order:1;padding:30px var(--gutter) 0 calc(var(--gutter) + 2px)}
  .hero__stage{position:relative;order:2;flex:none;width:var(--fvm-w);margin:calc(var(--fvm-w) * .082 + 12px) 0 0 calc(50vw - var(--fvm-w) * .7446);
    pointer-events:none}
  .hero__photo{-webkit-mask:linear-gradient(180deg,transparent 0,#000 18%,#000 61%,transparent 82%);mask:linear-gradient(180deg,transparent 0,#000 18%,#000 61%,transparent 82%)}
  
  .hero__water-img{inset:auto;left:0;top:-10%;width:120%;height:120%;background-image:url("../img/water-navy/water-navy-sp.webp");background-position:0% 50%}
  .hero__veil{background:radial-gradient(ellipse 110% 32% at 34% 17%,rgba(13,30,44,.56) 0%,rgba(13,30,44,.34) 55%,rgba(13,30,44,0) 100%),
                         radial-gradient(ellipse 110% 26% at 50% 86%,rgba(13,30,44,.46) 0%,rgba(13,30,44,.26) 55%,rgba(13,30,44,0) 100%)}
  .hero__body{order:3;margin-top:calc(var(--fvm-w) * (.4133 - .6667) + 18px);padding:0 var(--gutter) 0 calc(var(--gutter) + 2px)}
  .hero__brand{margin-bottom:16px;font-size:13px;letter-spacing:.36em}
  .hero__title{margin-bottom:0;padding-bottom:20px;font-size:clamp(32px,9.2vw,38px);letter-spacing:.2em;line-height:1.5}
  .hero__lead{font-size:15px;line-height:2.05;letter-spacing:.06em}
  .hero__cue{display:none}
  .hero__shore{height:64px}
}



.hero__title .char{display:inline-block}

html.rv [data-chars]:not(.is-split){visibility:hidden;animation:title-failsafe 0s linear 3s forwards} 
@keyframes title-failsafe{to{visibility:visible}}
html.rv .hero__title .char{clip-path:inset(-30% -30% 100% -30%);transform:translate3d(0,32px,0) rotate(4deg);filter:blur(7px)}
html.rv .hero__title.is-in .char{animation:char-surface .95s var(--ease) calc(var(--d,0s) + var(--i) * .055s) both}
@keyframes char-surface{0%{clip-path:inset(-30% -30% 100% -30%);transform:translate3d(0,32px,0) rotate(4deg);filter:blur(7px)}
  62%{clip-path:inset(-30% -30% -30% -30%);transform:translate3d(0,-3px,0) rotate(-.5deg);filter:blur(0)}
  100%{clip-path:inset(-30% -30% -30% -30%);transform:none;filter:none}}
html.rv .hero__title::after{scale:0 1;transform-origin:left;transition:scale 1s var(--ease) 1.2s}
html.rv .hero__title.is-in::after{scale:1 1}


html.rv [data-rv="product"]{opacity:0;transform:translate3d(0,26px,0);filter:blur(6px)}
html.rv [data-rv="product"].is-in{opacity:1;transform:none;filter:none}
html.rv [data-rv="product"]{transition:opacity 1.3s ease var(--d),transform 1.5s var(--ease) var(--d),filter 1.5s var(--ease) var(--d)}


html.rv [data-rv="mask"],html.rv .ba-shot__frame{clip-path:inset(100% 0 0 0);
  transition:clip-path 1.4s var(--ease) calc(var(--d,0s) + .12s)}
html.rv [data-rv="mask"].is-in,html.rv .ba-shot.is-in .ba-shot__frame{clip-path:inset(0 0 0 0)}
html.rv [data-rv="mask"]>*,html.rv .howto-step .step__art img{scale:1.12;transition:scale 2.2s var(--ease) calc(var(--d,0s) + .12s)}
html.rv [data-rv="mask"].is-in>*,html.rv .howto-step.is-in .step__art img{scale:1}
html.rv .ba-shot--after .ba-shot__frame{transition-delay:calc(var(--d,0s) + .45s)} 

html.rv .scent__photo[data-rv="mask"]{clip-path:none;opacity:0;transition:opacity 1.4s ease calc(var(--d,0s) + .12s)}
html.rv .scent__photo[data-rv="mask"].is-in{opacity:1}


html.rv .heading::after,html.rv .minutes h3::after{scale:0 1;transform-origin:left;transition:scale 1s var(--ease) calc(var(--d,0s) + .7s)}
html.rv .roles__head .heading::after,html.rv .minutes h3::after{transform-origin:center}
html.rv .heading.is-in::after,html.rv .minutes h3.is-in::after{scale:1 1}


.howto-step .step__art img{transition:scale 1.2s var(--ease)}
@media (hover:hover){
  .howto-step:hover .step__art img{scale:1.04}
  .cta,.purchase__cta,.buy-bar__btn{background-image:linear-gradient(#fff,#fff);background-repeat:no-repeat;background-size:0 100%;background-position:left;
    transition:background-size .5s var(--ease),color .35s ease}
  
  .cta:hover,.purchase__cta:hover,.buy-bar__btn:hover{background-color:var(--nt-navy);background-image:linear-gradient(#fff,#fff);background-size:100% 100%}
}

@media (prefers-reduced-motion:reduce){
  .hero__cue span,.faq[open] .faq__a,.hero__title .char{animation:none}
  [data-parallax]{translate:none}
  [data-rv]{transition:none;clip-path:none;transform:none;filter:none;opacity:1}
  .buy-bar,.buy-bar.is-shown,.faq summary::after,.cta,.purchase__cta,.head-veil{transition:none}
}


@media (min-width:821px) and (max-height:660px){
  .hero{padding-top:calc(var(--head-h) + 24px)}
  .hero__brand{margin-bottom:22px}
  .hero__title{margin-bottom:28px;padding-bottom:28px}
}


.price dd{display:flex;flex-wrap:wrap;align-items:baseline}
.price__yen{white-space:nowrap}
.price__en{margin-left:.04em;font-size:.55em;letter-spacing:0}
.price dd .price__tax{flex-basis:100%;margin:12px 0 0;text-align:left}
.price__incl{flex-basis:100%;margin-top:8px;font-family:var(--nt-serif);font-size:14px;font-weight:400;letter-spacing:.1em;line-height:1.4;color:var(--pd-soft)}
@media (min-width:1180px){
  .price dd .price__tax{flex-basis:auto;margin:0 0 0 .2em}
  .price__incl{margin-top:12px}
}
.buy-bar__price{flex-wrap:wrap;row-gap:2px}
.buy-bar__incl{flex-basis:100%;font-family:var(--nt-serif);font-size:13px;letter-spacing:.06em;line-height:1.3;color:var(--pd-soft)}
@media (max-width:820px){
  .price dd .price__tax{margin-top:10px}
  .price__incl{margin-top:6px;font-size:13px;letter-spacing:.04em}
  .buy-bar__price{row-gap:0}
  .buy-bar__incl{font-size:12px;letter-spacing:.02em;line-height:1.25}
}

@media (max-width:374px){
  .buy-bar__price{column-gap:2px}
}