@import url('https://fonts.googleapis.com/css2?family=Ephesis&text=Harmony%20with%20Nature.&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300&text=%E6%95%B4%E3%81%88%E3%82%8B%E3%80%81%E3%81%A8%E3%81%84%E3%81%86%E7%BE%8E%E3%81%97%E3%81%95%E3%80%82%E9%AB%AA%E3%82%82%E8%82%8C%E3%81%9D%E3%81%AE%E3%81%BB%E3%82%93%E3%81%A9%E3%81%8C%E6%B0%B4%E3%81%B0%E8%AA%BF%E5%92%8C%E3%82%92%E3%81%A4%E3%81%8FAQU%20HRMONY&display=swap'); 
.ph{font-size:0;color:transparent}
.ph span{display:none}
.ph-full{position:absolute;inset:0;z-index:-3;overflow:hidden;background-position:center;background-repeat:no-repeat;background-size:cover}
.inner{position:relative;z-index:2;width:min(100%,920px);text-align:center}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;border:1px solid var(--navy);background:var(--paper);padding:14px 25px;font-family:"Noto Sans JP",sans-serif;font-size:17px;line-height:1.35;font-weight:400;color:var(--navy);text-decoration:none;letter-spacing:.08em;cursor:pointer}


.p1{justify-content:flex-start}
.p1 .ph-full{background-image:url('../img/water-cover.webp');background-position:center;background-size:cover;animation:water-drift 34s ease-in-out infinite alternate}
.p1 .ph-full::after{content:"";position:absolute;inset:0;background-image:url('../img/hair-woman.webp');background-repeat:no-repeat;background-size:auto min(74vh,735px);background-position:right clamp(0px,2vw,32px) bottom var(--foot-h);transform-origin:80% 100%;animation:woman-breathe 10s ease-in-out infinite alternate}
.p1::after{background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.93) 39%,rgba(255,255,255,.49) 61%,rgba(255,255,255,.06) 100%)}
.p1 .inner{width:min(100%,650px);margin:clamp(24px,5vh,72px) 0 0 clamp(5vw,8vw,126px);padding-left:clamp(22px,3vw,46px);text-align:left}
.p1 .inner::before{content:"";position:absolute;left:0;top:.65em;width:1px;height:clamp(92px,11vw,150px);background:var(--navy)}
.p1 h1{font-size:clamp(48px,4.8vw,72px);font-weight:600;color:var(--navy);line-height:1.32;margin-bottom:30px;letter-spacing:.10em;max-width:9.4em}
.p1 .sub-copy{font-size:18px;line-height:2.2;margin:0 0 39px;color:var(--ink);letter-spacing:.06em}


.p2{justify-content:flex-start}
.p2 .ph-full{background-image:url('../img/water-deep.webp');background-position:center;background-size:cover;animation:water-drift-reverse 38s ease-in-out infinite alternate}
.p2::after{background:rgba(255,255,255,.34)}
.p2 .inner{width:min(100%,740px);margin-left:clamp(5vw,9vw,150px);padding:clamp(30px,4vw,56px) clamp(30px,4vw,56px) clamp(30px,4vw,56px) clamp(36px,5vw,76px);text-align:left;background:rgba(255,255,255,.78);border-left:1px solid var(--navy);isolation:isolate}
.p2 .inner::after{content:"水";position:absolute;right:clamp(14px,3vw,42px);bottom:clamp(-58px,-5vw,-26px);z-index:0;font-family:"Noto Serif JP",serif;font-size:clamp(220px,27vw,410px);font-weight:600;line-height:1;color:var(--navy);opacity:.12;transform:rotate(-5deg);animation:watermark-float 26s ease-in-out infinite alternate}
.p2 .inner>*{position:relative;z-index:1}
.p2 h2{font-size:clamp(34px,3.3vw,50px);font-weight:600;line-height:1.52;color:var(--navy);margin-bottom:27px;letter-spacing:.065em}
.p2 p{font-size:18px;line-height:2.12;margin-bottom:37px;color:var(--ink)}


.p3{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.58fr);gap:clamp(28px,4vw,70px);justify-content:stretch;background:var(--pale)}
.p3::after{background:linear-gradient(105deg,rgba(255,255,255,.72),rgba(239,246,254,.90))}
.p3 .col-l{align-self:center;text-align:left;padding-top:clamp(0px,2vw,28px)}
.p3 .col-r{position:relative;width:100%;height:min(61vh,650px);min-height:380px;align-self:center;overflow:hidden;background:rgba(255,255,255,.76);border:1px solid var(--water)}
.p3 .col-r::before{content:"";position:absolute;width:118%;aspect-ratio:1;border-radius:50%;left:-9%;top:10%;background:radial-gradient(circle,transparent 0 58%,var(--water) 58.4% 58.8%,transparent 59.2% 74%,var(--water) 74.4% 74.8%,transparent 75.2%);transform:scale(.78);opacity:0}
.p3 .col-r::after{content:"";position:absolute;inset:7% 8% 6%;background:url('../img/bottles-brandbook@2x.webp') center bottom / contain no-repeat;transform:translateY(30px);opacity:0}
.p3 h2{font-size:clamp(30px,3vw,43px);font-weight:600;line-height:1.55;color:var(--navy);margin-bottom:23px;letter-spacing:.055em}
.p3 .lead{font-size:18px;line-height:2;color:var(--ink);margin-bottom:44px}
.p3 .brand-s{font-family:"Noto Sans JP",sans-serif;font-size:16px;line-height:1.7;color:var(--navy);letter-spacing:.14em;margin-bottom:7px}
.p3 .prod-l{font-size:clamp(44px,4.1vw,62px);font-weight:600;line-height:1.34;color:var(--navy);margin-bottom:23px;letter-spacing:.07em;white-space:nowrap}
.p3 .price{font-family:"Noto Sans JP",sans-serif;font-size:17px;line-height:1.8;color:var(--ink);margin-bottom:32px}
.p3.is-active .col-r::before{animation:ripple 2.8s ease-out .2s 1 both}
.p3.is-active .col-r::after{animation:bottle-rise .72s ease-out .12s 1 both}


.p4{flex-direction:column;align-items:stretch;gap:clamp(34px,5vh,58px);padding-left:clamp(7vw,8vw,132px);padding-right:clamp(7vw,8vw,132px);background:var(--pale)}
.p4::after{background:linear-gradient(135deg,rgba(239,246,254,.92),rgba(223,241,253,.78))}
.p4 h2{align-self:flex-start;font-size:clamp(34px,3.4vw,52px);font-weight:600;line-height:1.45;color:var(--navy);margin:0;letter-spacing:.07em}
.cols{display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:0;width:100%;align-items:stretch;border-top:1px solid var(--navy);border-bottom:1px solid var(--navy)}
.col{position:relative;background:rgba(255,255,255,.60);padding:clamp(32px,3.3vw,52px) clamp(24px,2.8vw,42px) clamp(28px,3vw,42px);display:flex;flex-direction:column;gap:24px;text-align:left;min-height:300px;opacity:0;transform:translateY(18px)}
.col+.col{border-left:1px solid var(--navy)}
.col:first-child{background:rgba(255,255,255,.88)}
.col h3{font-size:24px;font-weight:600;line-height:1.55;color:var(--navy);letter-spacing:.06em}
.col p{font-size:18px;line-height:1.95;color:var(--ink);flex:1}
.col .btn{align-self:flex-start;background:transparent;border-color:var(--navy)}
.p4.is-active .col:nth-child(1){animation:card-rise .62s ease-out .08s 1 both}
.p4.is-active .col:nth-child(2){animation:card-rise .62s ease-out .18s 1 both}
.p4.is-active .col:nth-child(3){animation:card-rise .62s ease-out .28s 1 both}


.p5{justify-content:flex-end}
.p5 .ph-full{background-image:url('../img/water-life.webp');background-position:center;background-size:cover}
.p5::after{background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.66) 48%,rgba(255,255,255,.94) 100%)}
.p5 .inner{width:min(100%,900px);margin-right:clamp(2vw,5vw,80px);padding:clamp(34px,4.4vw,62px);text-align:left;background:rgba(255,255,255,.87);border-top:1px solid var(--navy)}
.p5 h2{font-size:clamp(31px,3vw,46px);font-weight:600;color:var(--navy);line-height:1.45;margin-bottom:29px;letter-spacing:.055em}
.p5 .body{font-size:18px;line-height:2.05;margin-bottom:32px;text-align:left;color:var(--ink);letter-spacing:.02em}



.reveal{opacity:0;transform:translateY(18px);transition:opacity .68s ease-out,transform .68s ease-out}
.p1 .reveal{transition-delay:.18s}
.p3 .col-r.reveal{transition-delay:0s}
.p4 .cols.reveal{transition-delay:.06s}
@keyframes water-drift{0%{transform:scale(1.08) translate3d(-14px,-8px,0)}100%{transform:scale(1.12) translate3d(14px,10px,0)}}
@keyframes water-drift-reverse{0%{transform:scale(1.08) translate3d(14px,8px,0)}100%{transform:scale(1.12) translate3d(-16px,-10px,0)}}
@keyframes woman-breathe{0%{transform:scale(1)}100%{transform:scale(1.025)}}
@keyframes watermark-float{0%{transform:translate3d(0,0,0) rotate(-5deg)}100%{transform:translate3d(-10px,-12px,0) rotate(-2deg)}}
@keyframes bottle-rise{0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:translateY(0)}}
@keyframes ripple{0%{opacity:0;transform:scale(.78)}24%{opacity:1}100%{opacity:0;transform:scale(1.06)}}
@keyframes card-rise{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:none}}

.foot-links{display:flex;gap:12px 25px;flex-wrap:wrap}

.foot-links a{font-family:"Noto Sans JP",sans-serif;font-size:16px;color:var(--navy);text-decoration:none;letter-spacing:.04em}

footer>.btn{background:var(--navy);color:var(--paper);min-width:164px}

.foot-bottom{display:none}

.nav-ui{position:fixed;top:calc(var(--head-h) + 16px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;z-index:40;padding:8px 10px;background:rgba(255,255,255,.72);border:1px solid var(--water);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

.dots{display:flex;gap:8px}

.dot{width:8px;height:8px;border:1px solid var(--navy);background:transparent;border-radius:50%}

.dot.on{background:var(--navy)}

.step{background:var(--paper);border:0;width:26px;height:28px;font-size:19px;cursor:pointer;color:var(--navy);font-family:"Noto Serif JP",serif;line-height:1}

.step:hover,.step:focus-visible{color:var(--ink);outline:none;transform:scale(1.12)}



.overlay{position:fixed;inset:0;background:rgba(33,26,60,.58);display:none;align-items:center;justify-content:center;z-index:100;padding:24px}

.modal{position:relative;background:var(--paper);border-top:2px solid var(--navy);padding:50px 40px 42px;width:100%;max-width:440px;box-shadow:0 24px 72px rgba(33,26,60,.22)}

.modal h2{font-size:32px;font-weight:600;color:var(--navy);margin-bottom:34px;text-align:center;letter-spacing:.1em}

.field label{display:block;font-family:"Noto Sans JP",sans-serif;font-size:16px;color:var(--navy);margin-bottom:8px}

.field .box{border-bottom:1px solid var(--navy);height:48px;background:transparent}

.modal .btn{width:100%;margin:10px 0 22px;background:var(--navy);color:var(--paper)}

.modal .new{display:block;text-align:center;font-family:"Noto Sans JP",sans-serif;font-size:16px;color:var(--navy);text-decoration:underline}

.close{position:fixed;top:22px;right:28px;background:var(--paper);border:1px solid var(--navy);padding:8px 12px;font-family:"Noto Sans JP",sans-serif;font-size:16px;color:var(--navy);cursor:pointer}

@media (max-height:800px) and (min-width:821px){

  .panel{padding-top:calc(var(--head-h) + 20px);padding-bottom:calc(var(--foot-h) + 22px)}

  .num{top:calc(var(--head-h) + 16px)}
  .p1 .inner{margin-top:20px}.p1 h1{font-size:clamp(43px,4.3vw,60px);margin-bottom:20px}.p1 .sub-copy{line-height:1.95;margin-bottom:26px}
  .p2 .inner{padding:26px 36px 26px 54px}.p2 h2{margin-bottom:16px}.p2 p{line-height:1.9;margin-bottom:25px}
  .p3{gap:clamp(32px,5vw,70px)}.p3 .col-r{height:min(55vh,540px);min-height:310px}.p3 h2{margin-bottom:14px}.p3 .lead{margin-bottom:22px}.p3 .prod-l{margin-bottom:12px}.p3 .price{margin-bottom:18px}
  .p4{gap:22px}.col{min-height:0;padding:24px;gap:13px}
  .p5 .inner{padding:26px 38px}.p5 h2{margin-bottom:16px}.p5 .body{line-height:1.8;margin-bottom:16px}
}


@media (max-width:820px){
.logo{font-size:23px}

  nav.open{display:block;position:fixed;top:var(--head-h);left:0;right:0;background:var(--paper);border-bottom:1px solid var(--water);padding:8px 18px 16px;box-shadow:0 18px 42px rgba(33,26,60,.10)}

  .has-sub{position:static}
.sub{display:block;position:static;border:none;border-top:1px solid var(--water);min-width:0;background:var(--pale);box-shadow:none}
.sub a{padding:13px 4px 13px 20px;font-size:16px}
.burger{display:block}
.sticky{position:static;height:auto;overflow:visible}
.lane{display:block;height:auto;transform:none!important;transition:none}

  .panel{width:100%;height:auto;min-height:auto;padding:106px 22px 74px;border-right:none;border-bottom:1px solid var(--water);overflow:hidden}

  .num{top:85px;left:22px;font-size:17px}.p1,.p2,.p5{min-height:calc(100svh - var(--head-h))}
  .p1{justify-content:flex-start}.p1 .ph-full{animation:none;background-position:55% center}.p1 .ph-full::after{background-size:auto 57vh;background-position:right -26px bottom;animation:none}.p1::after{background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.79))}.p1 .inner{width:100%;margin:64px 0 0;padding-left:22px;text-align:left}.p1 .inner::before{top:.52em;height:95px}.p1 h1{font-size:45px;line-height:1.36;margin-bottom:28px;max-width:8.4em}.p1 .sub-copy{font-size:18px;line-height:2.1;margin-bottom:32px}
  .p2{justify-content:flex-start}.p2 .ph-full{animation:none}.p2::after{background:rgba(255,255,255,.42)}.p2 .inner{width:100%;margin:46px 0 0;padding:30px 20px 33px 28px;text-align:left;background:rgba(255,255,255,.80);border-left:1px solid var(--navy)}.p2 .inner::after{font-size:235px;right:0;bottom:-35px;animation:none}.p2 h2{font-size:31px;line-height:1.55;margin-bottom:22px}.p2 p{font-size:18px;line-height:2;margin-bottom:30px}
  .p3{display:flex;flex-direction:column;gap:33px;padding-top:106px;background:var(--pale)}.p3 .col-r{order:-1;width:100%;height:330px;min-height:0}.p3 h2{font-size:31px;line-height:1.55}.p3 .lead{font-size:18px;margin-bottom:32px}.p3 .brand-s{font-size:16px}.p3 .prod-l{font-size:40px;white-space:normal}.p3 .price{font-size:18px}.p3 .col-r::after{opacity:1;transform:none;animation:none!important}.p3 .col-r::before{display:none}
  .p4{align-items:stretch;gap:29px;padding-left:22px;padding-right:22px}.p4 h2{font-size:31px}.cols{grid-template-columns:1fr;gap:0;border-top:1px solid var(--navy);border-bottom:1px solid var(--navy)}.col{min-height:0;padding:30px 24px;gap:16px;opacity:1;transform:none;background:rgba(255,255,255,.68)}.col+.col{border-left:none;border-top:1px solid var(--navy)}.col h3{font-size:23px}.col p{font-size:18px}
  .p5{justify-content:flex-start}.p5::after{background:rgba(255,255,255,.64)}.p5 .inner{width:100%;margin:46px 0 0;padding:33px 22px;text-align:left;background:rgba(255,255,255,.86);border-top:1px solid var(--navy)}.p5 h2{font-size:31px;margin-bottom:22px}.p5 .body{font-size:18px;line-height:2;margin-bottom:25px}

  .panel .reveal{opacity:1;transform:none;transition:none}
.foot-links{display:none}
.foot-bottom{display:block;padding:30px 0 0;border-top:1px solid var(--water);margin-top:32px}
.foot-bottom a{display:block;font-family:"Noto Sans JP",sans-serif;font-size:16px;color:var(--navy);text-decoration:none;padding:11px 0}
.nav-ui{display:none}

  .modal{padding:42px 26px 36px}
.close{top:16px;right:16px}
}

nav a,.parent{position:relative;font-size:16px;letter-spacing:.095em}

nav a:hover::after,nav a:focus-visible::after,.parent:hover::before,.parent:focus-visible::before{transform:scaleX(1)}



.nav-ui{top:calc(var(--head-h) + 31px);right:clamp(22px,3vw,46px);left:auto;transform:none;flex-direction:column;gap:7px;padding:0;background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}

.dots{flex-direction:column;gap:8px;order:2}

.dot{width:7px;height:7px;border-color:var(--navy);background:transparent}

.dot.on{background:var(--navy);transform:scale(1.35)}

.step{width:31px;height:31px;border:1px solid var(--water);border-radius:50%;background:rgba(255,255,255,.62);font-family:"Noto Sans JP",sans-serif;font-size:16px;line-height:1}

.step:hover,.step:focus-visible{color:var(--paper);background:var(--navy);border-color:var(--navy);transform:scale(1.04)}


.p1 .ph-full{background-position:58% center;animation:water-drift 28s ease-in-out infinite alternate}
.p1 .ph-full::after{background-size:auto min(76vh,760px);background-position:right clamp(-2px,1vw,18px) bottom var(--foot-h);animation:woman-breathe 9s ease-in-out infinite alternate}
.p1::before{content:"";position:absolute;z-index:-2;right:clamp(13%,15vw,23%);bottom:calc(var(--foot-h) + clamp(18px,3vh,42px));width:clamp(218px,20vw,360px);height:clamp(280px,38vh,500px);pointer-events:none;background:url('../img/bottles-brandbook@2x.webp') center bottom / contain no-repeat,radial-gradient(circle at 50% 56%,transparent 0 39%,rgba(223,241,253,.76) 39.5% 40.5%,transparent 41% 54%,rgba(255,255,255,.78) 54.5% 55.5%,transparent 56%);filter:drop-shadow(0 20px 25px rgba(33,26,60,.14));transform-origin:50% 88%;animation:fv-bottle-float 7s ease-in-out infinite alternate}
.p1::after{z-index:-1;background:radial-gradient(circle at 67% 38%,rgba(255,255,255,.75) 0 1.1%,transparent 1.35%),radial-gradient(circle at 76% 31%,rgba(255,255,255,.68) 0 .8%,transparent 1.05%),radial-gradient(circle at 82% 50%,rgba(223,241,253,.76) 0 1.3%,transparent 1.55%),radial-gradient(circle at 60% 66%,rgba(255,255,255,.68) 0 .75%,transparent 1%),linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.91) 39%,rgba(255,255,255,.40) 63%,rgba(255,255,255,.04) 100%);transform-origin:68% 50%;animation:fv-droplet-glide 14s ease-in-out infinite alternate}
.p1 .inner{z-index:3}
.p1 .reveal{transition:none}
.p1.is-active .reveal{opacity:1;transform:none}
.p1 h1,.p1 .sub-copy,.p1 .btn{clip-path:inset(0 100% 0 0);transform:translate3d(0,26px,0)}
.p1.is-active h1{animation:liquid-copy-in 1.05s cubic-bezier(.16,.78,.26,1) .08s both}
.p1.is-active .sub-copy{animation:liquid-copy-in .86s cubic-bezier(.16,.78,.26,1) .34s both}
.p1.is-active .btn{animation:liquid-copy-in .76s cubic-bezier(.16,.78,.26,1) .53s both}
.p1 h1::after{content:"";position:absolute;left:0;bottom:-13px;width:44px;height:1px;background:var(--navy);transform:scaleX(0);transform-origin:left}
.p1.is-active h1::after{animation:title-rule-in .65s ease-out .78s both}


.p2 .inner::after{content:none}
.p2 .ph-full::after{content:"";position:absolute;inset:-8%;pointer-events:none;background:radial-gradient(circle at 20% 18%,rgba(255,255,255,.84) 0 .7%,transparent .95%),radial-gradient(circle at 39% 72%,rgba(223,241,253,.82) 0 1.1%,transparent 1.35%),radial-gradient(circle at 68% 20%,rgba(255,255,255,.75) 0 .85%,transparent 1.1%),radial-gradient(circle at 83% 54%,rgba(255,255,255,.78) 0 1.3%,transparent 1.55%),radial-gradient(circle at 55% 43%,rgba(223,241,253,.72) 0 .65%,transparent .9%);transform:translate3d(0,0,0) scale(1.02);animation:concept-droplet-drift 18s ease-in-out infinite alternate}
.p2 .inner{background:rgba(255,255,255,.83);box-shadow:0 20px 54px rgba(33,26,60,.09)}
.p2 .reveal{transition:none}
.p2.is-active .reveal{opacity:1;transform:none}
.p2 h2,.p2 p,.p2 .btn{clip-path:inset(0 100% 0 0);transform:translate3d(0,24px,0)}
.p2.is-active h2{animation:liquid-copy-in 1.02s cubic-bezier(.16,.78,.26,1) .10s both}
.p2.is-active p{animation:liquid-copy-in .84s cubic-bezier(.16,.78,.26,1) .34s both}
.p2.is-active .btn{animation:liquid-copy-in .74s cubic-bezier(.16,.78,.26,1) .51s both}


.p3 .col-r::before{width:126%;left:-13%;top:6%;background:radial-gradient(circle,transparent 0 55%,rgba(223,241,253,.94) 55.2% 55.8%,transparent 56.2% 70%,rgba(255,255,255,.88) 70.3% 70.8%,transparent 71.2%)}
.p3.is-active .col-r::before{animation:ripple 3.5s cubic-bezier(.19,.66,.21,1) .18s 1 both}

@keyframes liquid-copy-in{0%{clip-path:inset(0 100% 0 0);transform:translate3d(0,26px,0)}64%{clip-path:inset(0 0 0 0);transform:translate3d(0,-2px,0)}100%{clip-path:inset(0 0 0 0);transform:translate3d(0,0,0)}}
@keyframes title-rule-in{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes fv-bottle-float{0%{transform:translate3d(-5px,9px,0) rotate(-1.2deg) scale(.96)}100%{transform:translate3d(8px,-6px,0) rotate(1deg) scale(1)}}
@keyframes fv-droplet-glide{0%{transform:translate3d(-10px,8px,0) scale(1)}100%{transform:translate3d(12px,-8px,0) scale(1.03)}}
@keyframes concept-droplet-drift{0%{transform:translate3d(-16px,8px,0) scale(1.02)}100%{transform:translate3d(18px,-10px,0) scale(1.08)}}

@media (max-width:820px){

  .nav-ui{display:none}
  .p1 .ph-full{background-position:58% center;animation:none}
  .p1 .ph-full::after{background-size:auto 58vh;background-position:right -24px bottom;animation:none}
  .p1::before{right:4%;bottom:17%;width:160px;height:220px;opacity:.80;animation:none}
  .p1::after{animation:none;background:linear-gradient(90deg,rgba(255,255,255,.97),rgba(255,255,255,.76))}
  .p1 h1,.p1 .sub-copy,.p1 .btn,.p2 h2,.p2 p,.p2 .btn{clip-path:none;transform:none;animation:none!important}
  .p1 h1::after{display:none}
  .p2 .ph-full::after{animation:none;opacity:.65}
  .p2 .inner{box-shadow:none}
}




body::before{content:"";position:fixed;inset:0;z-index:120;pointer-events:none;background:radial-gradient(circle at 57% 51%,rgba(223,241,253,.46) 0 8%,rgba(255,255,255,.92) 8.5% 20%,rgba(223,241,253,.32) 20.5% 29%,rgba(255,255,255,.98) 29.5% 48%,var(--paper) 48.5%);transform:scale(1);opacity:1;animation:opening-water-veil 1.25s cubic-bezier(.16,.78,.26,1) .08s both}
@keyframes opening-water-veil{0%{opacity:1;transform:scale(.72)}46%{opacity:1;transform:scale(1.08)}100%{opacity:0;transform:scale(1.38);visibility:hidden}}

nav a::after,.parent::before{bottom:4px}

nav a,.parent{padding-bottom:10px}

.sub{top:calc(100% + 8px);border:0;border-top:1px solid var(--navy);box-shadow:0 18px 42px rgba(33,26,60,.08)}


.p2 .ph-full::after{background:radial-gradient(circle at 20% 18%,rgba(255,255,255,.86) 0 .38%,rgba(223,241,253,.46) .45% .72%,transparent .96%),radial-gradient(circle at 39% 72%,rgba(255,255,255,.74) 0 .62%,rgba(223,241,253,.52) .69% 1.08%,transparent 1.35%),radial-gradient(circle at 68% 20%,rgba(255,255,255,.82) 0 .42%,rgba(223,241,253,.42) .49% .78%,transparent 1.06%),radial-gradient(circle at 83% 54%,rgba(255,255,255,.83) 0 .7%,rgba(223,241,253,.54) .77% 1.18%,transparent 1.52%),radial-gradient(circle at 55% 43%,rgba(255,255,255,.78) 0 .34%,rgba(223,241,253,.42) .4% .62%,transparent .88%),radial-gradient(circle at 13% 48%,rgba(255,255,255,.72) 0 .28%,rgba(223,241,253,.38) .35% .56%,transparent .82%);filter:blur(.18px)}

@media (max-width:820px){body::before{display:none}.p1::before{right:-2%;bottom:15%;width:180px;height:235px;opacity:.98}.p1::after{background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.90) 50%,rgba(255,255,255,.36) 100%)}
}
@media (prefers-reduced-motion:reduce){body::before{display:none}
}





.logo{width:74px;height:62px;background:url('../img/logo.svg') center / contain no-repeat;font-size:0;color:transparent;flex:0 0 auto}
@media (max-width:820px){
.logo{width:64px;height:54px}
}

.logo{width:82px;height:70px}

nav a,.parent{height:82px;display:flex;align-items:center;padding:0!important;line-height:1;letter-spacing:.12em}

nav a::after,.parent::before{bottom:17px}


.p1{display:flex;justify-content:flex-start;background:var(--paper)}
.p1 .ph-full{background-image:url('../img/hero-water-splash.webp');background-position:center;background-size:cover;animation:water-drift 24s ease-in-out infinite alternate}
.p1 .ph-full::after{background-image:url('../img/hair-woman.webp');background-size:auto min(92vh,1000px);background-position:right -4vw bottom var(--foot-h);animation:woman-breathe 11s ease-in-out infinite alternate}
.p1::after{z-index:-1;background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 37%,rgba(255,255,255,.39) 59%,rgba(255,255,255,.04) 100%)}
.p1::before{content:"";position:absolute;z-index:0;right:clamp(8%,12vw,18%);bottom:calc(var(--foot-h) + clamp(4px,2vh,28px));width:clamp(370px,33vw,590px);height:clamp(470px,70vh,760px);background:url('../img/bottles-brandbook@2x.webp') center bottom / contain no-repeat;filter:drop-shadow(0 26px 34px rgba(33,26,60,.18));transform-origin:50% 88%;animation:product-surge 6.5s cubic-bezier(.4,0,.2,1) infinite alternate}
.p1 .inner{width:min(100%,735px);margin:clamp(22px,5vh,70px) 0 0 clamp(4vw,8vw,132px);padding-left:clamp(22px,3vw,46px);z-index:3}
.p1 .inner::before{height:clamp(120px,14vw,188px);background:var(--navy)}
.p1 h1{font-size:clamp(54px,5.6vw,88px);line-height:1.22;letter-spacing:.11em;max-width:8.3em;margin-bottom:32px}
.p1 .sub-copy{font-size:18px;line-height:2.22;margin-bottom:39px}
.p1 h1,.p1.is-active h1,.p2 h2,.p2.is-active h2{clip-path:none!important;transform:none!important;animation:none!important}
.p1 h1 .char,.p2 h2 .char{display:inline-block;opacity:0;transform:translate3d(0,32px,0) rotate(4deg);filter:blur(7px);will-change:transform,opacity,filter}
.p1.is-active h1 .char{animation:character-water-reveal .68s cubic-bezier(.16,.78,.26,1) calc(.14s + var(--i)*.068s) both}


.p2{display:flex;justify-content:flex-start;background:var(--pale)}
.p2 .ph-full{background-image:url('../img/hero-water-splash.webp');background-position:center;background-size:cover;animation:water-drift-reverse 28s ease-in-out infinite alternate}
.p2 .ph-full::after{content:"";position:absolute;inset:0;background:url('../img/hair-woman.webp') right 2vw bottom var(--foot-h) / auto min(88vh,950px) no-repeat;transform-origin:84% 90%;animation:woman-breathe 12s ease-in-out infinite alternate}
.p2::after{z-index:-1;background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 42%,rgba(255,255,255,.30) 67%,rgba(255,255,255,.04) 100%)}
.p2 .inner{width:min(53vw,740px);margin-left:clamp(5vw,10vw,156px);padding:0;background:transparent;border:0;box-shadow:none;isolation:auto}
.p2 .inner::after{display:none}
.p2 h2{font-size:clamp(36px,3.6vw,56px);line-height:1.42;letter-spacing:.06em;margin-bottom:31px}
.p2 p{font-size:18px;line-height:2.18;margin-bottom:39px}
.p2 .reveal{transition:none}.p2.is-active .reveal{opacity:1;transform:none}
.p2.is-active h2 .char{animation:character-water-reveal .63s cubic-bezier(.16,.78,.26,1) calc(.12s + var(--i)*.046s) both}
.p2 p,.p2 .btn{clip-path:none!important;transform:none!important;animation:concept-copy-in .86s cubic-bezier(.16,.78,.26,1) .9s both}


.p3{display:block;background:url('../img/product-water-stage.webp') center / cover no-repeat;padding:0;overflow:hidden}
.p3::after{z-index:-1;background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 43%,rgba(255,255,255,.34) 66%,rgba(255,255,255,.04) 100%)}
.p3 .col-l{position:static;padding:0;text-align:left}
.p3 h2{position:absolute;z-index:3;left:clamp(30px,7vw,112px);bottom:calc(var(--foot-h) + clamp(140px,16vh,220px));width:min(40vw,540px);font-size:clamp(28px,2.6vw,42px);line-height:1.52;margin:0}
.p3 .lead{position:absolute;z-index:3;left:clamp(30px,7vw,112px);bottom:calc(var(--foot-h) + clamp(76px,9vh,128px));width:min(38vw,470px);font-size:18px;line-height:1.92;margin:0}
.p3 .brand-s{position:absolute;z-index:2;left:clamp(30px,7vw,112px);top:calc(var(--head-h) + clamp(98px,15vh,170px));font-size:16px;margin:0;letter-spacing:.16em}
.p3 .prod-l{position:absolute;z-index:2;left:clamp(26px,4vw,72px);top:calc(var(--head-h) + clamp(146px,21vh,265px));font-size:clamp(50px,4.7vw,82px);line-height:1.16;letter-spacing:.015em;white-space:nowrap;margin:0;color:var(--navy)}
.p3 .price{position:absolute;z-index:3;left:clamp(30px,7vw,112px);bottom:calc(var(--foot-h) + 94px);font-size:17px;margin:0}
.p3 .col-l>.btn{position:absolute;z-index:3;left:clamp(30px,7vw,112px);bottom:calc(var(--foot-h) + 20px);transform:translateX(clamp(255px,23vw,400px));white-space:nowrap}
.p3 .col-r{position:absolute;z-index:4;top:calc(var(--head-h) + 5px);right:clamp(3vw,7vw,116px);width:min(44vw,620px);height:calc(100svh - var(--head-h) - var(--foot-h) - 5px);min-height:0;background:transparent;border:0;overflow:visible}
.p3 .col-r::before{display:none}
.p3 .col-r::after{inset:0;background:url('../img/bottles-brandbook@2x.webp') center bottom / contain no-repeat;filter:drop-shadow(0 30px 34px rgba(33,26,60,.18));transform:translate3d(0,0,0);opacity:1}
.p3.is-active .col-r::after{animation:product-stage-in .95s cubic-bezier(.16,.78,.26,1) .08s both}


.p4{display:grid;grid-template-columns:minmax(250px,.7fr) minmax(0,2.3fr);align-items:center;gap:clamp(34px,4vw,60px);padding-left:clamp(30px,7vw,112px);padding-right:clamp(30px,7vw,112px);background:url('../img/hero-water-splash.webp') center / cover no-repeat}
.p4::after{z-index:-1;background:linear-gradient(90deg,rgba(239,246,254,.96),rgba(239,246,254,.73) 52%,rgba(255,255,255,.50) 100%)}
.p4 h2{font-size:clamp(42px,4vw,64px);line-height:1.28;letter-spacing:.08em;max-width:5.2em}
.p4 .cols{display:grid;grid-template-columns:1.18fr 1fr 1fr;gap:12px;border:0;width:100%;align-items:stretch}
.p4 .col{min-height:clamp(340px,47vh,500px);padding:clamp(30px,3.4vw,52px) clamp(24px,2.6vw,38px);border:0;background:rgba(255,255,255,.78);box-shadow:0 18px 48px rgba(33,26,60,.10);gap:26px}
.p4 .col::before{font-family:"Noto Serif JP",serif;font-size:30px;line-height:1;color:var(--navy);letter-spacing:.06em}
.p4 .col:nth-child(1){background:var(--navy);color:var(--paper);transform:translateY(-22px)}
.p4 .col:nth-child(1)::before{content:"01";color:var(--paper)}
.p4 .col:nth-child(2){background:var(--paper);transform:translateY(18px)}
.p4 .col:nth-child(2)::before{content:"02"}
.p4 .col:nth-child(3){background:var(--water);transform:translateY(52px)}
.p4 .col:nth-child(3)::before{content:"03"}
.p4 .col h3{font-size:23px;line-height:1.55}.p4 .col p{font-size:18px;line-height:2}.p4 .col:nth-child(1) h3,.p4 .col:nth-child(1) p{color:var(--paper)}
.p4 .col .btn{margin-top:auto}.p4 .col:nth-child(1) .btn{background:var(--paper);color:var(--navy);border-color:var(--paper)}
.p4.is-active .col:nth-child(1){animation:purchase-1 .75s cubic-bezier(.16,.78,.26,1) .08s both}.p4.is-active .col:nth-child(2){animation:purchase-2 .75s cubic-bezier(.16,.78,.26,1) .18s both}.p4.is-active .col:nth-child(3){animation:purchase-3 .75s cubic-bezier(.16,.78,.26,1) .28s both}

@keyframes character-water-reveal{0%{opacity:0;transform:translate3d(0,32px,0) rotate(4deg);filter:blur(7px)}62%{opacity:1;transform:translate3d(0,-3px,0) rotate(-.5deg);filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes concept-copy-in{0%{opacity:0;transform:translate3d(0,26px,0)}100%{opacity:1;transform:none}}
@keyframes product-surge{0%{transform:translate3d(-6px,10px,0) scale(.96)}100%{transform:translate3d(8px,-8px,0) scale(1.02)}}
@keyframes product-stage-in{0%{opacity:0;transform:translate3d(0,62px,0) scale(.92)}100%{opacity:1;transform:none}}
@keyframes purchase-1{0%{opacity:0;transform:translate3d(0,30px,0)}100%{opacity:1;transform:translate3d(0,-22px,0)}}
@keyframes purchase-2{0%{opacity:0;transform:translate3d(0,50px,0)}100%{opacity:1;transform:translate3d(0,18px,0)}}
@keyframes purchase-3{0%{opacity:0;transform:translate3d(0,78px,0)}100%{opacity:1;transform:translate3d(0,52px,0)}}

@media (max-width:820px){
.logo{width:68px;height:58px}
  .p1{min-height:820px}.p1 .ph-full{background-image:url('../img/hero-water-splash.webp');background-position:63% center}.p1 .ph-full::after{background-size:auto 65vh;background-position:right -20px bottom 0}.p1::before{right:-4%;bottom:6%;width:230px;height:330px;z-index:0}.p1::after{background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.91) 49%,rgba(255,255,255,.28) 100%)}.p1 .inner{margin:72px 0 0;padding-left:22px;width:100%;z-index:3}.p1 h1{font-size:45px;line-height:1.34;max-width:8em}.p1 .inner::before{height:104px}.p1 h1 .char,.p2 h2 .char{opacity:1;transform:none;filter:none;animation:none!important}
  .p2{min-height:790px}.p2 .ph-full{background-image:url('../img/hero-water-splash.webp');background-position:60% center}.p2 .ph-full::after{background-size:auto 68vh;background-position:right -8px bottom 0}.p2::after{background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.88) 52%,rgba(255,255,255,.24) 100%)}.p2 .inner{width:100%;margin:68px 0 0;padding:0 20px 0 22px;background:transparent}.p2 h2{font-size:34px;line-height:1.48}.p2 p{font-size:18px;line-height:2.05}.p2 p,.p2 .btn{opacity:1;transform:none;animation:none!important}
  .p3{display:block;min-height:1000px;padding:0 22px;background-position:62% center}.p3 .col-r{top:86px;right:0;width:100%;height:405px}.p3 .col-r::after{background-size:contain}.p3 .brand-s{left:22px;top:530px}.p3 .prod-l{left:22px;top:565px;font-size:40px;white-space:normal;width:calc(100% - 44px);line-height:1.28}.p3 h2{left:22px;top:690px;bottom:auto;width:calc(100% - 44px);font-size:30px}.p3 .lead{left:22px;top:800px;bottom:auto;width:calc(100% - 44px);font-size:18px}.p3 .price{left:22px;bottom:82px;font-size:17px}.p3 .col-l>.btn{left:22px;bottom:20px;transform:none}
  .p4{display:block;min-height:auto;padding:106px 22px 96px;background-position:center}.p4 h2{font-size:46px;max-width:none;margin-bottom:48px}.p4 .cols{grid-template-columns:1fr;gap:16px}.p4 .col,.p4 .col:nth-child(1),.p4 .col:nth-child(2),.p4 .col:nth-child(3){min-height:260px;transform:none;padding:30px 26px}.p4 .col h3{font-size:25px}.p4.is-active .col:nth-child(1),.p4.is-active .col:nth-child(2),.p4.is-active .col:nth-child(3){animation:none;opacity:1;transform:none}
}




.p1 .ph-full{background-image:url('../img/hero-water-soft.webp');background-position:center;animation:water-drift 32s ease-in-out infinite alternate}
.p1 .ph-full::after{background-size:auto min(91vh,980px);background-position:right -5vw bottom var(--foot-h);animation:woman-breathe 14s ease-in-out infinite alternate}
.p1::after{background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.93) 40%,rgba(255,255,255,.47) 62%,rgba(255,255,255,.04) 100%)}
.p1::before{right:clamp(8%,12vw,18%);bottom:calc(var(--foot-h) + clamp(8px,2vh,34px));width:clamp(390px,34vw,620px);height:clamp(500px,72vh,780px);filter:drop-shadow(0 22px 30px rgba(33,26,60,.14));animation:product-float-soft 9s ease-in-out infinite alternate}


.p2{background:var(--pale)}
.p2 .ph-full{background-image:url('../img/concept-hair-water.webp');background-position:center;background-size:cover;animation:water-drift-reverse 34s ease-in-out infinite alternate}
.p2 .ph-full::after{display:none}
.p2::after{background:linear-gradient(90deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.82) 43%,rgba(255,255,255,.26) 68%,rgba(255,255,255,.02) 100%)}
.p2 .inner{width:min(50vw,710px);margin-left:clamp(5vw,10vw,156px)}
.p2 h2{font-size:clamp(37px,3.8vw,59px);line-height:1.46;letter-spacing:.065em;margin-bottom:29px;text-wrap:balance;max-width:10em}
.p2 p{line-height:2.16;margin-bottom:36px}


.p3{background-image:url('../img/product-water-soft.webp');background-position:center}
.p3::after{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.87) 45%,rgba(255,255,255,.27) 71%,rgba(255,255,255,.02) 100%)}
.p3 .brand-s{top:calc(var(--head-h) + clamp(92px,13vh,145px));letter-spacing:.14em}
.p3 .prod-l{top:calc(var(--head-h) + clamp(135px,18vh,215px));font-size:clamp(48px,4.3vw,72px);line-height:1.18;letter-spacing:.04em}
.p3 h2{bottom:calc(var(--foot-h) + clamp(208px,23vh,275px));width:min(40vw,525px);font-size:clamp(27px,2.4vw,38px);line-height:1.58}
.p3 .lead{bottom:calc(var(--foot-h) + clamp(132px,14vh,168px));width:min(39vw,480px);line-height:1.92}
.p3 .price{bottom:calc(var(--foot-h) + 94px);font-size:17px;letter-spacing:.02em}
.p3 .col-l>.btn{left:clamp(30px,7vw,112px);bottom:calc(var(--foot-h) + 24px);min-width:205px;background:var(--navy);color:var(--paper);border-color:var(--navy);transform:none}
.p3 .col-l>.btn:hover,.p3 .col-l>.btn:focus-visible{background:var(--paper);color:var(--navy)}
.p3 .col-r{right:clamp(2vw,5vw,86px);width:min(47vw,670px);height:calc(100svh - var(--head-h) - var(--foot-h) - 10px)}
.p3 .col-r::after{filter:drop-shadow(0 24px 30px rgba(33,26,60,.14))}


.p4{grid-template-columns:150px minmax(0,1fr);gap:clamp(34px,5vw,78px);background-image:url('../img/hero-water-soft.webp');background-position:center}
.p4::after{background:linear-gradient(90deg,rgba(239,246,254,.92) 0%,rgba(239,246,254,.68) 48%,rgba(255,255,255,.30) 100%)}
.p4 h2{align-self:center;justify-self:center;writing-mode:vertical-rl;text-orientation:mixed;font-size:clamp(46px,4.2vw,66px);line-height:1.12;letter-spacing:.14em;max-width:none}
.p4 .cols{grid-template-columns:1.15fr 1fr 1fr;gap:16px}
.p4 .col{min-height:clamp(360px,51vh,530px);padding:clamp(29px,3.2vw,48px) clamp(20px,2.2vw,33px);gap:23px;background:rgba(255,255,255,.72);box-shadow:0 16px 38px rgba(33,26,60,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.p4 .col:nth-child(1){background:rgba(33,26,60,.94);transform:translateY(-16px)}
.p4 .col:nth-child(2){background:rgba(255,255,255,.84);transform:translateY(10px)}
.p4 .col:nth-child(3){background:rgba(223,241,253,.84);transform:translateY(34px)}
.p4 .col h3{font-size:20px;line-height:1.55;letter-spacing:.045em;white-space:nowrap}
.p4 .col p{font-size:18px;line-height:1.9}
.p4 .col .btn{width:100%;min-height:56px;justify-content:space-between;padding:14px 18px;background:transparent;white-space:nowrap}
.p4 .col .btn::after{content:"→";font-family:"Noto Serif JP",serif;font-size:24px;line-height:1;margin-left:12px}
.p4 .col:nth-child(1) .btn{background:var(--paper);color:var(--navy);border-color:var(--paper)}
.p4 .col:nth-child(1) .btn:hover,.p4 .col:nth-child(1) .btn:focus-visible{background:transparent;color:var(--paper)}
.p4.is-active .col:nth-child(1){animation:purchase-1-soft .86s cubic-bezier(.16,.78,.26,1) .08s both}
.p4.is-active .col:nth-child(2){animation:purchase-2-soft .86s cubic-bezier(.16,.78,.26,1) .18s both}
.p4.is-active .col:nth-child(3){animation:purchase-3-soft .86s cubic-bezier(.16,.78,.26,1) .28s both}

@keyframes product-float-soft{0%{transform:translate3d(-4px,7px,0) rotate(-.5deg) scale(.985)}100%{transform:translate3d(6px,-7px,0) rotate(.5deg) scale(1)}}
@keyframes purchase-1-soft{0%{opacity:0;transform:translate3d(0,28px,0)}100%{opacity:1;transform:translate3d(0,-16px,0)}}
@keyframes purchase-2-soft{0%{opacity:0;transform:translate3d(0,42px,0)}100%{opacity:1;transform:translate3d(0,10px,0)}}
@keyframes purchase-3-soft{0%{opacity:0;transform:translate3d(0,58px,0)}100%{opacity:1;transform:translate3d(0,34px,0)}}

@media (max-width:820px){
  .p1 .ph-full{background-image:url('../img/hero-water-soft.webp');background-position:59% center}.p1 .ph-full::after{background-size:auto 63vh;background-position:right -16px bottom 0}.p1::before{right:-7%;bottom:7%;width:245px;height:350px;filter:drop-shadow(0 16px 22px rgba(33,26,60,.12));animation:none}
  .p2{min-height:790px}.p2 .ph-full{background-image:url('../img/concept-hair-water.webp');background-position:60% center}.p2::after{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 52%,rgba(255,255,255,.18) 100%)}.p2 .inner{width:100%;margin:68px 0 0;padding:0 20px 0 22px}.p2 h2{font-size:34px;line-height:1.5}.p2 p{line-height:2.05}
  .p3{background-image:url('../img/product-water-soft.webp');background-position:62% center}.p3 .col-r{top:86px;right:0;width:100%;height:420px}.p3 .brand-s{left:22px;top:544px}.p3 .prod-l{left:22px;top:578px;font-size:39px;width:calc(100% - 44px)}.p3 h2{left:22px;top:695px;bottom:auto;width:calc(100% - 44px);font-size:29px}.p3 .lead{left:22px;top:803px;bottom:auto;width:calc(100% - 44px)}.p3 .price{left:22px;bottom:94px}.p3 .col-l>.btn{left:22px;bottom:22px;min-width:196px}
  .p4{display:block;padding:106px 22px 96px;background-image:url('../img/hero-water-soft.webp');background-position:center}.p4 h2{writing-mode:horizontal-tb;font-size:42px;line-height:1.3;letter-spacing:.08em;margin:0 0 42px}.p4 .cols{grid-template-columns:1fr;gap:14px}.p4 .col,.p4 .col:nth-child(1),.p4 .col:nth-child(2),.p4 .col:nth-child(3){min-height:245px;transform:none;padding:29px 26px}.p4 .col h3{font-size:22px;white-space:normal}.p4 .col .btn{width:100%;max-width:310px}
}

.logo{width:76px;height:64px;background-image:url('../img/logo-white.webp')}

nav a,.parent{height:80px;color:var(--paper);font-size:16px;font-weight:400;letter-spacing:.12em}

nav a:hover,.parent:hover{color:var(--paper)}

nav a::after,.parent::before{background:var(--water);bottom:16px}

.sub{background:var(--navy);border:1px solid rgba(223,241,253,.34);border-top:1px solid var(--water);box-shadow:0 16px 34px rgba(33,26,60,.26)}

.sub a{color:var(--paper)}

.num{color:var(--navy)}

.foot-links{gap:8px 20px}

.foot-links a{color:var(--paper);font-size:16px;line-height:1.4;letter-spacing:.02em;opacity:.88}

.foot-links a:hover{color:var(--paper);opacity:1;text-decoration:none}

footer>.btn{position:relative;min-width:188px;min-height:48px;padding:11px 22px 11px 19px;background:var(--paper);color:var(--navy);border:1px solid var(--paper);border-radius:999px;box-shadow:0 8px 18px rgba(33,26,60,.18);letter-spacing:.08em}

footer>.btn::after{content:"";position:absolute;left:27px;top:17px;width:3px;height:3px;background:var(--paper);border-radius:50%;opacity:.9}

footer>.btn:hover,footer>.btn:focus-visible{background:transparent;color:var(--paper);border-color:var(--water);transform:translateY(-2px)}


.p2 .ph-full{background-image:url('../img/concept-rear-hair-water.webp');background-position:center}
.p2::after{background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.84) 45%,rgba(255,255,255,.25) 70%,rgba(255,255,255,.02) 100%)}
.p2 .inner{width:min(48vw,680px);margin-left:clamp(5vw,10vw,156px)}
.p2 h2{font-size:clamp(36px,3.5vw,56px);line-height:1.5;letter-spacing:.055em;max-width:10.5em}


.p3{--copy-x:clamp(48px,6.4vw,108px)}
.p3 .brand-s{left:var(--copy-x);top:calc(var(--head-h) + clamp(92px,13vh,145px))}
.p3 .prod-l{left:var(--copy-x);top:calc(var(--head-h) + clamp(132px,18vh,210px));font-size:clamp(47px,4vw,68px);letter-spacing:.035em}
.p3 h2{left:var(--copy-x);bottom:calc(var(--foot-h) + clamp(210px,23vh,272px));width:min(48vw,680px);font-size:clamp(27px,2.35vw,37px);line-height:1.6;letter-spacing:.055em}
.p3 .lead{left:var(--copy-x);bottom:calc(var(--foot-h) + clamp(132px,14vh,166px));width:min(44vw,610px);font-size:18px;line-height:1.95}
.p3 .price{left:var(--copy-x);bottom:calc(var(--foot-h) + 91px);font-size:17px;line-height:1.5}
.p3 .col-l>.btn{left:var(--copy-x);bottom:calc(var(--foot-h) + 22px);min-width:218px;min-height:52px;border-radius:999px;padding:13px 23px;justify-content:space-between;gap:20px}
.p3 .col-l>.btn::after{content:"→";font-family:"Noto Serif JP",serif;font-size:25px;line-height:1}


.p4{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:clamp(30px,4vh,46px);padding-left:clamp(48px,7vw,118px);padding-right:clamp(48px,7vw,118px);background-image:url('../img/hero-water-soft.webp');background-position:center}
.p4::after{background:linear-gradient(90deg,rgba(239,246,254,.94) 0%,rgba(239,246,254,.74) 50%,rgba(255,255,255,.34) 100%)}
.p4 h2{align-self:flex-start;justify-self:auto;writing-mode:horizontal-tb;text-orientation:mixed;font-size:clamp(42px,4vw,62px);line-height:1.25;letter-spacing:.08em;margin:0;max-width:none}
.p4 h2::after{content:"";display:block;width:46px;height:2px;background:var(--navy);margin-top:17px}
.p4 .cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;max-width:1260px;align-self:center}
.p4 .col,.p4 .col:nth-child(1),.p4 .col:nth-child(2),.p4 .col:nth-child(3){min-height:340px;transform:none;padding:clamp(28px,3vw,42px);background:rgba(255,255,255,.88);box-shadow:0 14px 34px rgba(33,26,60,.08);border-top:3px solid var(--navy);gap:21px}
.p4 .col:nth-child(1){background:rgba(33,26,60,.96);border-color:var(--navy)}
.p4 .col:nth-child(2){background:rgba(255,255,255,.92);border-color:var(--water)}
.p4 .col:nth-child(3){background:rgba(223,241,253,.88);border-color:var(--water)}
.p4 .col::before{font-size:26px;margin-bottom:4px}.p4 .col h3{font-size:24px;line-height:1.5;letter-spacing:.04em;white-space:nowrap}.p4 .col p{font-size:18px;line-height:1.85;min-height:3.7em}.p4 .col .btn{width:100%;min-height:54px;max-width:none;margin-top:auto;padding:13px 18px;border-radius:999px;justify-content:space-between;gap:14px}.p4 .col:nth-child(2) .btn,.p4 .col:nth-child(3) .btn{background:var(--paper);color:var(--navy);border-color:var(--navy)}
.p4.is-active .col:nth-child(1),.p4.is-active .col:nth-child(2),.p4.is-active .col:nth-child(3){animation:purchase-card-in .72s cubic-bezier(.16,.78,.26,1) both}
.p4.is-active .col:nth-child(1){animation-delay:.08s}.p4.is-active .col:nth-child(2){animation-delay:.18s}.p4.is-active .col:nth-child(3){animation-delay:.28s}
@keyframes purchase-card-in{0%{opacity:0;transform:translate3d(0,24px,0)}100%{opacity:1;transform:none}}

@media (max-width:820px){
.logo{width:64px;height:54px;background-image:url('../img/logo-white.webp');filter:brightness(0) invert(1)}
.burger{background:transparent;color:var(--paper);border-color:var(--paper)}
nav.open{top:68px;background:var(--navy);border-color:rgba(223,241,253,.34)}
.sub{background:rgba(255,255,255,.09)}
.sub a{color:var(--paper)}
.foot-links{display:flex;gap:7px 16px}
.foot-links a{font-size:16px}
.foot-links a:nth-child(n+3){display:none}
footer>.btn{width:100%;min-width:0;min-height:53px}
  .p2 .ph-full{background-image:url('../img/concept-rear-hair-water.webp');background-position:61% center}.p2 .inner{width:100%;margin:68px 0 0;padding:0 20px 0 22px}.p2 h2{font-size:33px;line-height:1.5;max-width:10em}
  .p3{--copy-x:22px}.p3 .brand-s{left:var(--copy-x);top:544px}.p3 .prod-l{left:var(--copy-x);top:578px;font-size:39px;width:calc(100% - 44px)}.p3 h2{left:var(--copy-x);top:696px;bottom:auto;width:calc(100% - 44px);font-size:29px}.p3 .lead{left:var(--copy-x);top:804px;bottom:auto;width:calc(100% - 44px)}.p3 .price{left:var(--copy-x);bottom:94px}.p3 .col-l>.btn{left:var(--copy-x);bottom:22px;min-width:210px}
  .p4{display:block;padding:106px 22px 88px}.p4 h2{font-size:40px;margin-bottom:36px}.p4 .cols{grid-template-columns:1fr;gap:14px}.p4 .col,.p4 .col:nth-child(1),.p4 .col:nth-child(2),.p4 .col:nth-child(3){min-height:245px;padding:27px 25px}.p4 .col h3{font-size:22px;white-space:normal}.p4 .col p{min-height:0}.p4.is-active .col:nth-child(1),.p4.is-active .col:nth-child(2),.p4.is-active .col:nth-child(3){animation:none;opacity:1;transform:none}
}

.logo{background-image:url('../img/logo.svg')}

nav a,.parent{color:var(--navy);text-shadow:0 1px 10px rgba(255,255,255,.72)}

nav a:hover,.parent:hover{color:var(--navy)}

nav a::after,.parent::before{background:var(--navy)}

.sub{background:rgba(255,255,255,.94);border:1px solid rgba(223,241,253,.72);border-top:1px solid var(--navy);box-shadow:0 14px 32px rgba(33,26,60,.16)}

.sub a{color:var(--navy);text-shadow:none}




.p3 .brand-s{top:calc(var(--head-h) + clamp(82px,10vh,120px))}
.p3 .prod-l{top:calc(var(--head-h) + clamp(118px,15vh,175px))}
.p3 h2{top:calc(var(--head-h) + clamp(250px,26vh,320px));bottom:auto}
.p3 .lead{top:calc(var(--head-h) + clamp(378px,38vh,480px));bottom:auto}
.p3 .price{top:calc(var(--head-h) + clamp(468px,48vh,588px));bottom:auto}
.p3 .col-l>.btn{top:calc(var(--head-h) + clamp(516px,53vh,646px));bottom:auto}

@media (max-height:820px) and (min-width:821px){
  .p3 .brand-s{top:calc(var(--head-h) + 58px)}
  .p3 .prod-l{top:calc(var(--head-h) + 92px)}
  .p3 h2{top:calc(var(--head-h) + 190px)}
  .p3 .lead{top:calc(var(--head-h) + 306px)}
  .p3 .price{top:calc(var(--head-h) + 386px)}
  .p3 .col-l>.btn{top:calc(var(--head-h) + 430px)}
}

@media (max-width:820px){
  .p3 .brand-s{top:544px}
  .p3 .prod-l{top:578px}
  .p3 h2{top:696px;bottom:auto}
  .p3 .lead{top:804px;bottom:auto}
  .p3 .price{top:auto;bottom:94px}
  .p3 .col-l>.btn{top:auto;bottom:22px}
}




.p4{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:clamp(28px,4vh,48px);padding-left:clamp(52px,8vw,132px);padding-right:clamp(52px,8vw,132px);background-image:url('../img/hero-water-soft.webp');background-position:center}
.p4::after{background:linear-gradient(90deg,rgba(239,246,254,.86) 0%,rgba(239,246,254,.56) 50%,rgba(255,255,255,.18) 100%)}
.p4 h2{align-self:flex-start;writing-mode:horizontal-tb;text-orientation:mixed;font-size:clamp(42px,3.8vw,60px);line-height:1.25;letter-spacing:.08em;margin:0;max-width:none}
.p4 h2::after{content:"";display:block;width:54px;height:1px;background:var(--navy);margin-top:17px}
.p4 .cols{display:flex;flex-direction:column;gap:0;width:min(100%,1210px);max-width:none;align-self:stretch;border-top:1px solid rgba(33,26,60,.32);background:transparent}
.p4 .col,.p4 .col:nth-child(1),.p4 .col:nth-child(2),.p4 .col:nth-child(3){position:relative;display:grid;grid-template-columns:76px minmax(245px,1.05fr) minmax(300px,1.45fr) 220px;align-items:center;min-height:116px;padding:0 0;border:0!important;border-bottom:1px solid rgba(33,26,60,.32);background:transparent!important;box-shadow:none!important;transform:none!important;gap:clamp(18px,3vw,48px);overflow:visible}
.p4 .col::before{content:""!important;display:block;margin:0;font-family:"Noto Serif JP",serif;font-size:17px;line-height:1;letter-spacing:.16em;color:var(--navy)}
.p4 .col:nth-child(1)::before{content:"01"!important}.p4 .col:nth-child(2)::before{content:"02"!important}.p4 .col:nth-child(3)::before{content:"03"!important}
.p4 .col h3{margin:0;font-size:clamp(22px,1.7vw,27px);line-height:1.35;letter-spacing:.04em;white-space:nowrap;color:var(--navy)!important}
.p4 .col p{margin:0;min-height:0;font-size:18px;line-height:1.65;color:var(--navy)!important}
.p4 .col .btn{width:220px;min-height:48px;max-width:none;margin:0;justify-content:space-between;gap:14px;padding:11px 17px;border:1px solid rgba(33,26,60,.66);border-radius:999px;background:rgba(255,255,255,.32)!important;color:var(--navy)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .35s ease,color .35s ease,transform .35s ease,box-shadow .35s ease}
.p4 .col .btn::after{content:"→";font-family:"Noto Serif JP",serif;font-size:24px;line-height:1;margin-left:10px}
.p4 .col .btn:hover,.p4 .col .btn:focus-visible{background:var(--navy)!important;color:var(--paper)!important;border-color:var(--navy);box-shadow:0 10px 25px rgba(33,26,60,.17);transform:translateX(4px)}
.p4.is-active .col:nth-child(1),.p4.is-active .col:nth-child(2),.p4.is-active .col:nth-child(3){animation:purchase-rail-in .7s cubic-bezier(.16,.78,.26,1) both}
.p4.is-active .col:nth-child(1){animation-delay:.08s}.p4.is-active .col:nth-child(2){animation-delay:.17s}.p4.is-active .col:nth-child(3){animation-delay:.26s}
@keyframes purchase-rail-in{0%{opacity:0;transform:translate3d(-24px,0,0)}100%{opacity:1;transform:none}}

@media (max-width:820px){
  .p4{display:block;padding:106px 22px 88px}.p4 h2{font-size:40px;margin-bottom:34px}.p4 .cols{width:100%;border-top:1px solid rgba(33,26,60,.32)}.p4 .col,.p4 .col:nth-child(1),.p4 .col:nth-child(2),.p4 .col:nth-child(3){display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto auto;gap:10px 12px;min-height:0;padding:24px 0}.p4 .col::before{grid-row:1;grid-column:1;font-size:16px;padding-top:4px}.p4 .col h3{grid-row:1;grid-column:2;font-size:22px;white-space:normal}.p4 .col p{grid-column:2;grid-row:2;font-size:17px}.p4 .col .btn{grid-column:2;grid-row:3;width:100%;min-height:50px;margin-top:7px}.p4.is-active .col:nth-child(1),.p4.is-active .col:nth-child(2),.p4.is-active .col:nth-child(3){animation:none;opacity:1;transform:none}
}

header::before{content:"";position:absolute;z-index:-1;top:0;right:0;width:min(49vw,720px);height:100%;background:linear-gradient(90deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.28) 46%,rgba(255,255,255,.68) 100%);border-left:1px solid rgba(255,255,255,.32);pointer-events:none}
.p1 .ph-full{background-image:url('../img/concept-rear-hair-water.webp');background-position:center;background-size:cover;animation:water-drift 32s ease-in-out infinite alternate}
.p1 .ph-full::after{display:none}
.p1::after{background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 39%,rgba(255,255,255,.52) 61%,rgba(255,255,255,.08) 100%)}
.p1::before{right:clamp(12%,15vw,23%);bottom:calc(var(--foot-h) + clamp(12px,2vh,30px));width:clamp(360px,31vw,560px);height:clamp(460px,67vh,720px);filter:drop-shadow(0 20px 28px rgba(33,26,60,.13));animation:product-float-soft 9s ease-in-out infinite alternate}
.p1 h1::after{display:none!important}
.p1 .inner::before{height:clamp(118px,14vw,178px)}
.p1 .inner{isolation:isolate}
.p1 .inner>*{position:relative;z-index:1}
.p1 .inner::after{content:"";position:absolute;z-index:0;left:clamp(-42px,-4vw,-18px);right:clamp(-82px,-7vw,-32px);bottom:clamp(-48px,-5vw,-24px);height:clamp(66px,8vw,108px);pointer-events:none;background:radial-gradient(ellipse at 18% 108%,transparent 0 49%,rgba(223,241,253,.28) 50% 51%,transparent 52%),radial-gradient(ellipse at 67% 104%,transparent 0 52%,rgba(255,255,255,.58) 53% 54%,transparent 55%),radial-gradient(ellipse at 92% 108%,transparent 0 47%,rgba(223,241,253,.23) 48% 49%,transparent 50%);filter:blur(.7px);transform-origin:center bottom;animation:copy-water-surface 11s ease-in-out infinite alternate}
@keyframes copy-water-surface{0%{transform:translate3d(-1.5%,5px,0) scaleX(1.02)}100%{transform:translate3d(2%,-5px,0) scaleX(.98)}}


.p4{--purchase-x:clamp(52px,8vw,132px);padding-left:var(--purchase-x);padding-right:var(--purchase-x);gap:clamp(30px,4.5vh,52px)}
.p4::after{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(239,246,254,.80) 50%,rgba(255,255,255,.19) 100%)}
.p4::before{content:"";position:absolute;z-index:-1;left:0;right:42%;bottom:calc(var(--foot-h) - 6px);height:clamp(130px,18vw,250px);pointer-events:none;background:radial-gradient(ellipse at 18% 83%,rgba(223,241,253,.44) 0 18%,transparent 18.7%),radial-gradient(ellipse at 54% 72%,rgba(255,255,255,.80) 0 21%,transparent 21.8%),radial-gradient(ellipse at 86% 86%,rgba(223,241,253,.42) 0 17%,transparent 17.8%),linear-gradient(180deg,rgba(255,255,255,.02),rgba(223,241,253,.28));filter:blur(1px);animation:purchase-water-surface 14s ease-in-out infinite alternate}
.p4 h2{position:relative;padding-left:clamp(28px,3vw,48px);font-size:clamp(43px,3.9vw,61px);line-height:1.22;letter-spacing:.09em}
.p4 h2::before{content:"";position:absolute;left:0;top:.12em;width:1px;height:1.22em;background:var(--navy)}
.p4 h2::after{width:44px;margin-top:21px;background:rgba(33,26,60,.72)}
.p4 .cols{width:100%;border-top:1px solid rgba(33,26,60,.38)}
.p4 .col,.p4 .col:nth-child(1),.p4 .col:nth-child(2),.p4 .col:nth-child(3){grid-template-columns:72px minmax(260px,1.05fr) minmax(315px,1.45fr) 220px;min-height:120px;gap:clamp(18px,3.1vw,50px);border-bottom:1px solid rgba(33,26,60,.38);transition:background .35s ease,padding-left .35s ease}
.p4 .col::after{content:"";position:absolute;left:0;top:50%;width:0;height:1px;background:var(--navy);transform:translateY(-50%);transition:width .42s cubic-bezier(.16,.78,.26,1)}
.p4 .col:hover{background:rgba(255,255,255,.18)!important;padding-left:10px}
.p4 .col:hover::after{width:33px}
.p4 .col .btn{background:rgba(255,255,255,.46)!important;border-color:rgba(33,26,60,.58);box-shadow:0 7px 18px rgba(33,26,60,.05)}
.p4 .col .btn:hover,.p4 .col .btn:focus-visible{background:var(--navy)!important;box-shadow:0 10px 24px rgba(33,26,60,.14)}
@keyframes purchase-water-surface{0%{transform:translate3d(-2%,4px,0) scaleX(1.03)}100%{transform:translate3d(2%,-6px,0) scaleX(.98)}}

@media (max-width:820px){

  header::before{display:none}
  .p1 .ph-full{background-image:url('../img/concept-rear-hair-water.webp');background-position:61% center}.p1::before{right:-6%;bottom:7%;width:240px;height:345px}.p1 .inner::after{left:-26px;right:-30px;bottom:-48px;height:142px;animation:none}
  .p4{--purchase-x:22px;padding-left:var(--purchase-x);padding-right:var(--purchase-x)}.p4::before{right:0;bottom:0;height:160px;animation:none}.p4 h2{padding-left:24px;font-size:40px}.p4 h2::after{margin-top:17px}.p4 .col,.p4 .col:nth-child(1),.p4 .col:nth-child(2),.p4 .col:nth-child(3){border-bottom-color:rgba(33,26,60,.38)}.p4 .col::after{display:none}.p4 .col:hover{padding-left:0;background:transparent!important}
}
@media (prefers-reduced-motion:reduce){.p1 .inner::after,.p4::before{animation:none!important}
}

header nav a,header .parent{height:42px;padding:0 clamp(14px,1.35vw,22px)!important;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-size:16px;line-height:1;letter-spacing:.095em}

header .has-sub{z-index:120}

header .sub{height:auto!important;z-index:200;top:calc(100% + 12px);right:0;display:none!important;background:rgba(255,255,255,.96);border:1px solid rgba(223,241,253,.90);border-top:1px solid var(--navy);box-shadow:0 18px 36px rgba(33,26,60,.16);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}


.p1 .ph-full{background-position:center 72px;background-color:var(--pale);animation:none!important}
.p1 .ph-full::before{content:"";position:absolute;z-index:1;inset:0 43% 0 0;pointer-events:none;background:radial-gradient(ellipse at 16% 106%,transparent 0 47%,rgba(223,241,253,.34) 48% 49%,transparent 50%),radial-gradient(ellipse at 58% 101%,transparent 0 50%,rgba(255,255,255,.68) 51% 52%,transparent 53%),radial-gradient(ellipse at 94% 105%,transparent 0 48%,rgba(223,241,253,.30) 49% 50%,transparent 51%);background-size:160% 100%;opacity:.72;filter:blur(.8px);animation:hero-water-surface 12s ease-in-out infinite alternate}
.p1::before{background-image:url('../img/bottles-wet-luxe-alpha.webp');right:clamp(12%,15vw,23%);bottom:calc(var(--foot-h) + clamp(12px,2vh,30px));width:clamp(360px,31vw,560px);height:clamp(460px,67vh,720px);animation:none!important;filter:drop-shadow(0 20px 28px rgba(33,26,60,.13))}
.p1 .inner::after{animation:copy-water-surface 12s ease-in-out infinite alternate}
@keyframes hero-water-surface{0%{background-position:0 5px;transform:translate3d(-1%,4px,0)}100%{background-position:100% -5px;transform:translate3d(1%,-4px,0)}}


.p3 .col-r::after{background-image:url('../img/bottles-wet-luxe-alpha.webp');filter:drop-shadow(0 20px 26px rgba(33,26,60,.12));animation:none!important;transform:none!important;opacity:1!important}
.p3 .col-r::before{animation:none!important}

@media (max-width:820px){
  .p1 .ph-full{background-position:61% center}.p1 .ph-full::before{inset:0 36% 0 0;animation:none}.p1::before{background-image:url('../img/bottles-wet-luxe-alpha.webp');animation:none!important}.p4 .col p{font-size:18px}
}
@media (prefers-reduced-motion:reduce){.p1 .ph-full::before{animation:none!important}
}




.p1 .ph-full{background-image:url('../img/hero-rear-hair-low.webp');background-position:center;background-size:cover;background-color:var(--pale)}
@media (max-width:820px){.p1 .ph-full{background-image:url('../img/hero-rear-hair-low.webp');background-position:61% center}
}


.p4{gap:clamp(34px,5vh,58px)}
.p4 h2::after{display:none}
.p4 .cols{border-top:0;padding-top:clamp(28px,4vh,46px)}
.p4 .col,.p4 .col:nth-child(1),.p4 .col:nth-child(2),.p4 .col:nth-child(3){min-height:126px}
.p4 .col .btn{background:var(--navy)!important;color:var(--paper)!important;border-color:var(--navy);box-shadow:0 9px 21px rgba(33,26,60,.13)}
.p4 .col .btn:hover,.p4 .col .btn:focus-visible{background:transparent!important;color:var(--navy)!important;border-color:var(--navy);box-shadow:none}
@media (max-width:820px){.p4 .cols{padding-top:24px}.p4 .col,.p4 .col:nth-child(1),.p4 .col:nth-child(2),.p4 .col:nth-child(3){min-height:0}.p4 .col .btn{min-height:52px}
}


.p1 .ph-full::before{inset:0 39% 0 0;background:radial-gradient(ellipse 47% 14% at 16% 107%,transparent 0 68%,rgba(223,241,253,.56) 69% 70.5%,transparent 72%),radial-gradient(ellipse 54% 16% at 59% 102%,transparent 0 67%,rgba(255,255,255,.86) 68% 69.2%,transparent 70.5%),radial-gradient(ellipse 44% 13% at 94% 108%,transparent 0 68%,rgba(223,241,253,.44) 69% 70.2%,transparent 71.5%),linear-gradient(180deg,transparent 62%,rgba(223,241,253,.12) 82%,transparent 100%);background-size:150% 100%;opacity:.86;filter:blur(.45px);animation:hero-water-surface 9s cubic-bezier(.42,0,.25,1) infinite alternate}
.p1 .inner::after{opacity:.86;animation:copy-water-surface 9s cubic-bezier(.42,0,.25,1) infinite alternate}
@keyframes hero-water-surface{0%{background-position:0 8px;transform:translate3d(-2.5%,5px,0) scaleX(1.02)}100%{background-position:100% -8px;transform:translate3d(2.5%,-5px,0) scaleX(.98)}}
@keyframes copy-water-surface{0%{transform:translate3d(-2%,5px,0) scaleX(1.02)}100%{transform:translate3d(2%,-5px,0) scaleX(.98)}}
@media (max-width:820px){.p1 .ph-full::before{animation:none}.p1 .inner::after{animation:none}
}
@media (prefers-reduced-motion:reduce){.p1 .ph-full::before,.p1 .inner::after{animation:none!important}
}




.p1 .ph-full::before,.p1 .inner::after{display:none!important}
.water-ripples{position:absolute;z-index:1;pointer-events:none;left:clamp(24px,5vw,88px);top:calc(var(--head-h) + 90px);width:min(58vw,880px);height:calc(100% - var(--head-h) - var(--foot-h) - 150px);overflow:hidden;opacity:.82;background:radial-gradient(ellipse 68% 16% at 12% 80%,transparent 0 57%,rgba(223,241,253,.54) 58% 59.4%,transparent 61%),radial-gradient(ellipse 58% 14% at 76% 69%,transparent 0 59%,rgba(255,255,255,.84) 60% 61.3%,transparent 63%),radial-gradient(ellipse 61% 16% at 42% 92%,transparent 0 56%,rgba(223,241,253,.45) 57% 58.4%,transparent 60%),linear-gradient(170deg,transparent 0 47%,rgba(223,241,253,.14) 49%,transparent 51% 100%);filter:blur(.45px);transform-origin:center bottom;animation:visible-water-drift 7.8s cubic-bezier(.42,0,.25,1) infinite alternate}
@keyframes visible-water-drift{0%{transform:translate3d(-2.6%,6px,0) scaleX(1.02)}50%{transform:translate3d(.3%,-2px,0) scaleX(1)}100%{transform:translate3d(2.7%,-6px,0) scaleX(.98)}}


.site-loader{position:fixed;z-index:600;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,var(--paper),var(--pale) 55%,var(--water));opacity:1;transition:opacity .72s ease,visibility .72s ease;overflow:hidden}
.site-loader::before{content:"";position:absolute;left:16vw;right:16vw;bottom:24vh;height:120px;background:radial-gradient(ellipse 34% 22% at 20% 84%,transparent 0 58%,rgba(223,241,253,.60) 59% 60%,transparent 61%),radial-gradient(ellipse 42% 21% at 66% 81%,transparent 0 59%,rgba(255,255,255,.95) 60% 61%,transparent 62%),linear-gradient(180deg,transparent,rgba(223,241,253,.25));filter:blur(.5px);animation:loader-water-drift 2.2s ease-in-out infinite alternate}
.site-loader__logo{position:relative;z-index:1;width:176px;height:142px;background:url('../img/logo.svg') center / contain no-repeat;opacity:0;transform:translate3d(0,18px,0);animation:loader-logo-in 1s cubic-bezier(.16,.78,.26,1) .12s both}
.site-loader__logo::after{content:"";position:absolute;left:50%;bottom:-28px;width:48px;height:1px;background:var(--navy);transform:translateX(-50%) scaleX(0);transform-origin:center;animation:loader-line-in .72s ease-out .72s both}
.site-loader.is-leaving{opacity:0;visibility:hidden}
@keyframes loader-logo-in{0%{opacity:0;transform:translate3d(0,18px,0);filter:blur(7px)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes loader-line-in{0%{transform:translateX(-50%) scaleX(0)}100%{transform:translateX(-50%) scaleX(1)}}
@keyframes loader-water-drift{0%{transform:translate3d(-2%,5px,0) scaleX(1.02)}100%{transform:translate3d(2%,-5px,0) scaleX(.98)}}
@media (max-width:820px){.water-ripples{left:16px;top:130px;width:calc(100% - 42px);height:53%;opacity:.66;animation:none}.site-loader__logo{width:145px;height:118px}.site-loader::before{left:10vw;right:10vw;bottom:22vh}
}
@media (prefers-reduced-motion:reduce){.water-ripples,.site-loader::before,.site-loader__logo,.site-loader__logo::after{animation:none!important}.site-loader__logo{opacity:1;transform:none;filter:none}.site-loader__logo::after{transform:translateX(-50%) scaleX(1)}
}




.water-ripples{inset:0;width:auto;height:auto;background:url('../img/real-water-surface-motion.webp') center / cover no-repeat!important;opacity:.24;filter:none;mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 41%,rgba(33,26,60,.50) 47%,transparent 53%);-webkit-mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 41%,rgba(33,26,60,.50) 47%,transparent 53%);animation:real-water-glide 9.6s cubic-bezier(.42,0,.25,1) infinite alternate!important}
@keyframes real-water-glide{0%{background-position:43% 56%;transform:translate3d(-1.8%,3px,0) scale(1.02)}100%{background-position:57% 46%;transform:translate3d(1.8%,-3px,0) scale(1.02)}}
.site-loader::before{left:12vw;right:12vw;bottom:18vh;height:210px;background:url('../img/real-water-surface-motion.webp') center / 130% auto no-repeat;opacity:.42;filter:none;mask-image:linear-gradient(180deg,transparent,rgba(33,26,60,.8) 42%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,rgba(33,26,60,.8) 42%,transparent);animation:loader-real-water-glide 3.2s ease-in-out infinite alternate}
@keyframes loader-real-water-glide{0%{background-position:42% 60%;transform:translate3d(-1%,3px,0) scale(1.02)}100%{background-position:58% 45%;transform:translate3d(1%,-3px,0) scale(1.02)}}
@media (max-width:820px){.water-ripples{inset:0;width:auto;height:auto;background-size:cover;opacity:.16;animation:none!important}.site-loader::before{left:4vw;right:4vw;bottom:16vh;height:170px;background-size:160% auto}
}
@media (prefers-reduced-motion:reduce){.water-ripples,.site-loader::before{animation:none!important}
}


.p4 .col::after{display:none!important}
.p4 .col,.p4 .col:nth-child(1),.p4 .col:nth-child(2),.p4 .col:nth-child(3){transition:background .35s ease!important}
.p4 .col:hover{padding-left:0;background:rgba(255,255,255,.12)!important}
.p1::before{z-index:2}




.water-ripples{inset:0 auto 0 0;width:53vw;height:100%;overflow:hidden;opacity:.46;background:transparent!important;mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 76%,rgba(33,26,60,.50) 88%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 76%,rgba(33,26,60,.50) 88%,transparent 100%);animation:none!important}
.water-ripples video{display:block;width:100%;height:100%;object-fit:cover;object-position:43% 52%;mix-blend-mode:screen;filter:saturate(.76) brightness(1.15);transform:scale(1.055)}
.site-loader::before{background:url('../img/real-water-surface-motion.webp') center / 130% auto no-repeat!important;opacity:.30}
@media (max-width:820px){.water-ripples{width:100%;height:100%;opacity:.25;mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.42) 65%,transparent);-webkit-mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.42) 65%,transparent)}.water-ripples video{object-position:35% center}
}
@media (prefers-reduced-motion:reduce){.water-ripples video{display:none!important}
}




.water-ripples::before{opacity:.42;animation:caustic-shadow-two 16s cubic-bezier(.45,0,.22,1) infinite alternate}
.water-ripples::after{opacity:.24;background-size:154% auto;background-position:60% 38%;animation:caustic-shadow-three 19s cubic-bezier(.42,0,.25,1) infinite alternate}
@keyframes caustic-shadow-one{0%{background-position:42% 58%;transform:scale(1.015)}50%{background-position:49% 48%;transform:scale(1.035)}100%{background-position:56% 54%;transform:scale(1.02)}}
@keyframes caustic-shadow-two{0%{background-position:36% 42%;transform:scale(1.06) translate3d(-1.8%,1.2%,0)}100%{background-position:62% 56%;transform:scale(1.12) translate3d(1.6%,-1.4%,0)}}
@keyframes caustic-shadow-three{0%{background-position:62% 58%;transform:scale(1.10) translate3d(1.5%,1%,0)}100%{background-position:34% 42%;transform:scale(1.04) translate3d(-1.4%,-1%,0)}}
@media (max-width:820px){.water-ripples{width:100%;opacity:.22;mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.42) 64%,transparent);-webkit-mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.42) 64%,transparent);animation:none!important}.water-ripples::before,.water-ripples::after{animation:none!important}
}
@media (prefers-reduced-motion:reduce){.water-ripples,.water-ripples::before,.water-ripples::after{animation:none!important}
}




.water-ripples::before{opacity:.32}
.water-ripples::after{opacity:.18;background-size:154% auto;background-position:center center}
@media (max-width:820px){.water-ripples{width:100%;opacity:.20;background-size:cover!important;filter:none!important}.water-ripples::before,.water-ripples::after{display:none!important}
}
@media (prefers-reduced-motion:reduce){.water-ripples{filter:none!important}
}




.water-ripples{inset:0 auto 0 0;width:53vw;height:100%;overflow:hidden;opacity:1;background:transparent!important;mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 76%,rgba(33,26,60,.48) 88%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 76%,rgba(33,26,60,.48) 88%,transparent 100%);animation:none!important;transform:none!important;filter:none!important;isolation:isolate}
.water-ripples::before,.water-ripples::after{display:none!important}
.water-caustics-canvas{display:block;width:100%;height:100%;pointer-events:none;mix-blend-mode:normal;opacity:1;filter:blur(.18px)}
@media (max-width:820px){.water-ripples{width:100%;mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.36) 58%,transparent);-webkit-mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.36) 58%,transparent)}.water-caustics-canvas{opacity:.24}
}
@media (prefers-reduced-motion:reduce){.water-ripples{display:none!important}
}




.water-ripples{inset:0 auto 0 0;width:53vw;height:100%;overflow:hidden;opacity:1;background:transparent!important;mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 76%,rgba(33,26,60,.48) 88%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 76%,rgba(33,26,60,.48) 88%,transparent 100%);animation:none!important;transform:none!important;filter:none!important;isolation:isolate}
.water-ripples::before,.water-ripples::after{display:none!important}
.water-caustics-canvas{display:none!important}
.caustic-frame{position:absolute;inset:0;display:block;pointer-events:none;background-position:left center;background-size:cover;background-repeat:no-repeat;mix-blend-mode:multiply;transform:none!important;filter:none!important;will-change:opacity}
@keyframes caustic-frame-one{0%,22%{opacity:.46}35%,88%{opacity:0}100%{opacity:.46}}
@keyframes caustic-frame-two{0%,21%{opacity:0}36%,55%{opacity:.43}70%,100%{opacity:0}}
@keyframes caustic-frame-three{0%,53%{opacity:0}69%,88%{opacity:.40}100%{opacity:0}}
@media (max-width:820px){.water-ripples{width:100%;mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.35) 58%,transparent);-webkit-mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.35) 58%,transparent)}.caustic-frame--01{opacity:.20;animation:none}.caustic-frame--02,.caustic-frame--03{display:none}
}
@media (prefers-reduced-motion:reduce){.caustic-frame--01{opacity:.20;animation:none}.caustic-frame--02,.caustic-frame--03{display:none!important}
}




.water-ripples{inset:0 auto 0 0;width:53vw;height:100%;overflow:hidden;opacity:1;background:transparent!important;mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 76%,rgba(33,26,60,.48) 88%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 76%,rgba(33,26,60,.48) 88%,transparent 100%);animation:none!important;transform:none!important;filter:none!important;isolation:isolate}
.water-ripples::before,.water-ripples::after,.caustic-frame{display:none!important}
.caustic-live-canvas{display:block;width:100%;height:100%;pointer-events:none;mix-blend-mode:multiply;opacity:.62;filter:blur(.26px)}
@media (max-width:820px){.water-ripples{width:100%;mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.32) 58%,transparent);-webkit-mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.32) 58%,transparent)}.caustic-live-canvas{opacity:.32}
}
@media (prefers-reduced-motion:reduce){.water-ripples{display:none!important}
}




.water-ripples{inset:0 auto 0 0;width:53vw;height:100%;overflow:hidden;opacity:1;background:transparent!important;mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 76%,rgba(33,26,60,.48) 88%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 76%,rgba(33,26,60,.48) 88%,transparent 100%);animation:none!important;transform:none!important;filter:none!important;isolation:isolate}
.water-ripples::before,.water-ripples::after,.caustic-frame,.caustic-live-canvas{display:none!important}
.caustic-motion{display:block;width:100%;height:100%;object-fit:cover;object-position:left center;mix-blend-mode:multiply;opacity:.48;pointer-events:none;transform:none!important;filter:saturate(.86) contrast(1.07) brightness(1.02);will-change:auto}
@media (max-width:820px){.water-ripples{width:100%;mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.30) 58%,transparent);-webkit-mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.30) 58%,transparent)}.caustic-motion{opacity:.29;object-position:34% center}
}
@media (prefers-reduced-motion:reduce){.water-ripples{display:none!important}
}




.water-ripples{inset:0 auto 0 0;width:53vw;height:100%;overflow:hidden;opacity:1;background:transparent!important;mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 76%,rgba(33,26,60,.48) 88%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 76%,rgba(33,26,60,.48) 88%,transparent 100%);animation:none!important;transform:none!important;filter:none!important;isolation:isolate}
.water-ripples::before,.water-ripples::after,.caustic-frame,.caustic-live-canvas,.caustic-motion{display:none!important}
.caustic-still-canvas{display:block;width:100%;height:100%;pointer-events:none;mix-blend-mode:normal;opacity:.68;filter:blur(.12px);transform:none!important;will-change:auto}
@media (max-width:820px){.water-ripples{width:100%;mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.30) 58%,transparent);-webkit-mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.30) 58%,transparent)}.caustic-still-canvas{opacity:.31}
}
@media (prefers-reduced-motion:reduce){.water-ripples{display:none!important}
}




.water-ripples{inset:0 auto 0 0;width:53vw;height:100%;overflow:hidden;opacity:1;background:transparent!important;mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 76%,rgba(33,26,60,.48) 88%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 76%,rgba(33,26,60,.48) 88%,transparent 100%);animation:none!important;transform:none!important;filter:none!important;isolation:isolate}
.water-ripples::before,.water-ripples::after,.caustic-frame,.caustic-live-canvas,.caustic-motion,.caustic-still-canvas{display:none!important}
.caustic-anchored-canvas{display:block;width:100%;height:100%;pointer-events:none;opacity:1;transform:none!important;filter:blur(.24px);will-change:auto}
@media (max-width:820px){.water-ripples{width:100%;mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.30) 58%,transparent);-webkit-mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.30) 58%,transparent)}.caustic-anchored-canvas{opacity:.70}
}
@media (prefers-reduced-motion:reduce){.water-ripples{display:none!important}
}




.water-ripples{inset:0 auto 0 0;width:53vw;height:100%;overflow:hidden;opacity:1;background:transparent!important;mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 76%,rgba(33,26,60,.48) 88%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 76%,rgba(33,26,60,.48) 88%,transparent 100%);animation:none!important;transform:none!important;filter:none!important;isolation:isolate}
.water-ripples::before,.water-ripples::after,.caustic-frame,.caustic-live-canvas,.caustic-motion,.caustic-still-canvas,.caustic-anchored-canvas{display:none!important}
.caustic-refraction-canvas{display:block;width:100%;height:100%;pointer-events:none;mix-blend-mode:multiply;opacity:.54;filter:blur(.12px);transform:none!important;will-change:auto}
@media (max-width:820px){.water-ripples{width:100%;mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.30) 58%,transparent);-webkit-mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.30) 58%,transparent)}.caustic-refraction-canvas{opacity:.28}
}
@media (prefers-reduced-motion:reduce){.water-ripples{display:none!important}
}




.water-ripples{inset:0 auto 0 0;width:53vw;height:100%;overflow:hidden;opacity:1;background:transparent!important;mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 76%,rgba(33,26,60,.48) 88%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 76%,rgba(33,26,60,.48) 88%,transparent 100%);animation:none!important;transform:none!important;filter:none!important;isolation:isolate}
.water-ripples::before,.water-ripples::after,.caustic-frame,.caustic-live-canvas,.caustic-motion,.caustic-still-canvas,.caustic-anchored-canvas,.caustic-refraction-canvas{display:none!important}
.caustic-splat-canvas{display:block;width:100%;height:100%;pointer-events:none;opacity:1;transform:none!important;filter:blur(.72px);will-change:auto}
@media (max-width:820px){.water-ripples{width:100%;mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.30) 58%,transparent);-webkit-mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.30) 58%,transparent)}.caustic-splat-canvas{opacity:.73}
}
@media (prefers-reduced-motion:reduce){.water-ripples{display:none!important}
}




.water-ripples{inset:0 auto 0 0;width:53vw;height:100%;overflow:hidden;opacity:1;background:transparent!important;mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 76%,rgba(33,26,60,.48) 88%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,var(--navy) 0%,var(--navy) 76%,rgba(33,26,60,.48) 88%,transparent 100%);animation:none!important;transform:none!important;filter:none!important;isolation:isolate}
.water-ripples::before,.water-ripples::after,.caustic-frame,.caustic-live-canvas,.caustic-motion,.caustic-still-canvas,.caustic-anchored-canvas,.caustic-refraction-canvas,.caustic-splat-canvas{display:none!important}
.caustic-optical-film{display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;opacity:.24;mix-blend-mode:multiply;filter:saturate(.78) contrast(.82) brightness(1.04);transform:none!important;will-change:auto}
@media (max-width:820px){.water-ripples{width:100%;mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.30) 58%,transparent);-webkit-mask-image:linear-gradient(180deg,var(--navy),rgba(33,26,60,.30) 58%,transparent)}.caustic-optical-film{opacity:.16}
}
@media (prefers-reduced-motion:reduce){.water-ripples{display:none!important}
}




.p1 .ph-full{background-image:url('../img/hero-rear-hair-luminous.webp')!important;background-position:center!important;background-size:cover!important}
.p1::after{z-index:-1;background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 38%,rgba(255,255,255,.35) 54%,rgba(255,255,255,.08) 63%,transparent 70%)!important}
@media (max-width:820px){.p1 .ph-full{background-image:url('../img/hero-rear-hair-luminous.webp')!important;background-position:61% center!important}.p1::after{background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.85) 52%,rgba(255,255,255,.18) 72%,transparent 100%)!important}
}




.p2{display:flex!important;justify-content:flex-start!important;background:var(--paper)!important}
.p2 .ph-full{display:none!important}
.p2::after{z-index:-1!important;background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 47%,var(--pale) 47%,var(--pale) 100%)!important}
.p2 .inner{position:relative!important;z-index:4!important;width:min(42vw,650px)!important;margin-left:clamp(5vw,8vw,132px)!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.p2 .inner h2{max-width:10.5em}
.hair-compare{position:absolute;z-index:3;top:50%;right:clamp(30px,5vw,88px);width:min(47vw,860px);margin:0;transform:translateY(-45%);color:var(--navy);text-align:center}
.hair-compare__blocks{display:grid;grid-template-columns:minmax(0,1fr) clamp(34px,4vw,62px) minmax(0,1fr);align-items:center;gap:clamp(9px,1.1vw,18px)}
.hair-compare__block{min-width:0;min-height:clamp(405px,57vh,560px);display:flex;flex-direction:column;align-items:stretch;background:var(--pale);border:1px solid rgba(33,26,60,.28);padding:clamp(18px,2vw,30px) clamp(13px,1.6vw,24px) clamp(14px,1.6vw,22px);opacity:0;transform:translate3d(0,18px,0)}
.hair-compare__block h3{margin:0;color:var(--navy);font-size:clamp(20px,1.55vw,25px);font-weight:600;line-height:1.45;letter-spacing:.05em}
.hair-compare__art{position:relative;isolation:isolate;display:grid;place-items:center;flex:1;min-height:310px;margin:clamp(10px,1.4vh,16px) 0}
.hair-compare__art img{position:relative;z-index:1;display:block;width:auto;height:min(33vh,347px);max-width:100%;object-fit:contain}
.hair-compare__label{position:absolute;z-index:2;display:block;width:min-content;min-width:84px;color:var(--navy);font-family:"Noto Sans JP",sans-serif;font-size:16px;font-weight:500;line-height:1.42;letter-spacing:.02em;white-space:normal}
.hair-compare__label::after{content:"";position:absolute;height:1px;background:var(--navy);top:50%;opacity:.78}
.hair-compare__label--coating{top:12%;left:-3px;width:132px;text-align:left}.hair-compare__label--coating::after{left:100%;width:48px;transform:rotate(14deg);transform-origin:left center}
.hair-compare__label--lack{right:-1px;bottom:16%;width:86px;text-align:right}.hair-compare__label--lack::after{right:100%;width:48px;transform:rotate(-15deg);transform-origin:right center}
.hair-compare__label--mineral{top:12%;right:2px;text-align:right}.hair-compare__label--mineral::after{right:100%;width:48px;transform:rotate(-13deg);transform-origin:right center}
.hair-compare__label--amino{top:46%;left:0;text-align:left}.hair-compare__label--amino::after{left:100%;width:45px;transform:rotate(9deg);transform-origin:left center}
.hair-compare__label--moisture{right:0;bottom:14%;text-align:right}.hair-compare__label--moisture::after{right:100%;width:44px;transform:rotate(-10deg);transform-origin:right center}
.hair-compare__band{display:flex;align-items:center;justify-content:center;min-height:54px;margin:0;background:var(--water);padding:9px 11px;color:var(--navy);font-family:"Noto Sans JP",sans-serif;font-size:16px;font-weight:500;line-height:1.45;letter-spacing:.025em}
.hair-compare__arrow{display:grid;place-items:center;color:var(--navy);font-family:"Noto Serif JP",serif;font-size:clamp(34px,3.2vw,48px);line-height:1;opacity:0;transform:translate3d(0,18px,0)}
.hair-compare figcaption{max-width:42em;margin:clamp(14px,2vh,22px) auto 0;color:var(--navy);font-family:"Noto Sans JP",sans-serif;font-size:16px;font-weight:500;line-height:1.8;letter-spacing:.035em;opacity:0;transform:translate3d(0,10px,0)}
.p2.is-active .hair-compare__block--conventional{animation:hair-compare-in .6s ease-out .08s both}
.p2.is-active .hair-compare__arrow{animation:hair-compare-in .6s ease-out .20s both}
.p2.is-active .hair-compare__block--aqua{animation:hair-compare-in .6s ease-out .32s both}
.p2.is-active .hair-compare figcaption{animation:hair-compare-in .6s ease-out .44s both}
.p2.is-active .hair-compare__block--aqua img{animation:aqua-hair-buoyancy 8s ease-in-out .92s infinite alternate}
@keyframes hair-compare-in{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes aqua-hair-buoyancy{from{transform:translate3d(0,-2px,0)}to{transform:translate3d(0,2px,0)}}
@media (max-width:820px){
  .p2{display:block!important;min-height:auto!important;padding:106px 22px 88px!important}
  .p2::after{background:var(--paper)!important}
  .p2 .inner{width:100%!important;margin:0!important;padding:0!important}
  .hair-compare{position:relative;top:auto;right:auto;width:100%;margin:48px 0 0;transform:none}
  .hair-compare__blocks{grid-template-columns:1fr;gap:18px}
  .hair-compare__block{min-height:0;padding:23px 18px 16px}
  .hair-compare__art{display:flex;flex-direction:column;min-height:0;gap:12px;margin:16px 0}
  .hair-compare__art img{order:-1;height:min(44vw,320px)}
  .hair-compare__label{position:relative;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;align-self:stretch;width:auto;min-width:0;padding-left:18px;text-align:left!important;font-size:16px}
  .hair-compare__label::before{content:"";position:absolute;left:2px;top:.65em;width:6px;height:6px;background:var(--navy);border-radius:50%}
  .hair-compare__label::after{display:none}
  .hair-compare__arrow{height:36px;transform:rotate(90deg) translate3d(0,18px,0)}
  .p2.is-active .hair-compare__arrow{animation:hair-compare-arrow-mobile .6s ease-out .20s both}
  .hair-compare figcaption{max-width:31em;font-size:16px;line-height:1.75}
}
@keyframes hair-compare-arrow-mobile{from{opacity:0;transform:rotate(90deg) translate3d(0,18px,0)}to{opacity:1;transform:rotate(90deg) translate3d(0,0,0)}}
@media (prefers-reduced-motion:reduce){.p2 .hair-compare__block,.p2 .hair-compare__arrow,.p2 .hair-compare figcaption{opacity:1!important;transform:none!important;animation:none!important}.p2 .hair-compare__block--aqua img{animation:none!important}
}


@media (min-width:821px){
  .p2 .inner{width:min(34vw,430px)!important;margin-left:clamp(2vw,3vw,48px)!important}
  .hair-compare{right:clamp(18px,3vw,54px);width:min(50vw,636px)}
  .hair-compare__blocks{gap:clamp(10px,1vw,14px)}
  .hair-compare__block{min-height:clamp(420px,60vh,570px);padding-left:clamp(12px,1.4vw,18px);padding-right:clamp(12px,1.4vw,18px)}
  .hair-compare__art{min-height:330px}
  .hair-compare__band{padding:9px 7px}
}



.p2{background:var(--pale)!important}
.p2 .ph-full{display:block!important;background-image:url('../img/concept-rear-hair-water.webp')!important;background-position:center!important;background-size:cover!important;animation:water-drift-reverse 34s ease-in-out infinite alternate!important}
.p2 .ph-full::after{display:none!important}
.p2::after{z-index:-1!important;background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.84) 45%,rgba(255,255,255,.25) 70%,rgba(255,255,255,.02) 100%)!important}
.p2 .inner{z-index:4!important;width:min(48vw,680px)!important;margin-left:clamp(5vw,10vw,156px)!important;padding:0!important;text-align:left!important;background:transparent!important;border:0!important;box-shadow:none!important}
.p2 .inner h2{max-width:10.5em!important}
.hair-compare{z-index:3!important}
.hair-compare__block{background:rgba(239,246,254,.90)!important;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:0 16px 42px rgba(33,26,60,.08)}
.hair-compare__band{background:rgba(223,241,253,.92)!important}
@media (min-width:821px){
  .p2 .inner{width:min(48vw,680px)!important;margin-left:clamp(5vw,10vw,156px)!important}
  .hair-compare{right:0;width:min(43vw,550px)}
  .hair-compare__blocks{gap:clamp(10px,1vw,14px)}
  .hair-compare__block{min-height:clamp(420px,60vh,570px);padding-left:clamp(12px,1.4vw,18px);padding-right:clamp(12px,1.4vw,18px)}
  .hair-compare__art{min-height:330px}
  .hair-compare__band{padding:9px 7px}
}
@media (max-width:820px){
  .p2{display:block!important;min-height:790px!important;padding:106px 22px 88px!important}
  .p2 .ph-full{display:block!important;background-image:url('../img/concept-rear-hair-water.webp')!important;background-position:61% center!important;animation:none!important}
  .p2::after{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 52%,rgba(255,255,255,.18) 100%)!important}
  .p2 .inner{width:100%!important;margin:68px 0 0!important;padding:0 20px 0 22px!important;background:transparent!important}
  .hair-compare{position:relative;z-index:3;top:auto;right:auto;width:100%;margin:48px 0 0;transform:none}
  .hair-compare__block{background:rgba(239,246,254,.91)!important}
}
@media (prefers-reduced-motion:reduce){.p2 .ph-full{animation:none!important}
}


@media (min-width:821px){
  .p2 .inner > p{width:min(40vw,450px)}
  .hair-compare{right:0;width:min(43vw,550px)}
}



body::before{display:none!important;animation:none!important;content:none!important}


.p2{background:var(--pale)!important}
.p2 .ph-full{display:block!important;background-image:url('../img/water-deep.webp')!important;background-position:center!important;background-size:cover!important;animation:water-drift-reverse 38s ease-in-out infinite alternate!important}
.p2 .ph-full::after{display:none!important}
.p2::after{background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 47%,rgba(255,255,255,.36) 70%,rgba(255,255,255,.10) 100%)!important}
.hair-compare__block{background:rgba(239,246,254,.93)!important}


.p3{--copy-x:auto!important;display:grid!important;grid-template-columns:minmax(310px,.92fr) minmax(340px,.88fr)!important;align-items:center!important;justify-content:center!important;column-gap:clamp(46px,5vw,82px)!important;padding:calc(var(--head-h) + clamp(48px,8vh,92px)) clamp(48px,9vw,150px) calc(var(--foot-h) + clamp(40px,7vh,82px))!important;background-position:center!important}
.p3 .col-l{position:relative!important;align-self:center!important;width:100%!important;max-width:520px!important;min-height:0!important;padding:0!important;text-align:left!important}
.p3 .brand-s,.p3 .prod-l,.p3 h2,.p3 .lead,.p3 .price,.p3 .col-l>.btn{position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;width:auto!important}
.p3 .brand-s{margin:0 0 9px!important;font-size:16px!important;line-height:1.7!important}
.p3 .prod-l{margin:0 0 33px!important;font-size:clamp(43px,3.45vw,62px)!important;line-height:1.22!important;white-space:normal!important}
.p3 h2{margin:0 0 18px!important;font-size:clamp(29px,2.3vw,38px)!important;line-height:1.55!important;letter-spacing:.055em!important}
.p3 .lead{margin:0 0 27px!important;font-size:18px!important;line-height:1.95!important}
.p3 .price{margin:0 0 24px!important;font-size:17px!important;line-height:1.7!important}
.p3 .col-l>.btn{display:inline-flex!important;min-width:210px!important;margin:0!important}
.p3 .col-r{position:relative!important;inset:auto!important;right:auto!important;align-self:center!important;width:min(100%,500px)!important;height:min(64vh,660px)!important;min-height:420px!important;margin:0!important}
.p3 .col-r::after{background-position:center bottom!important;background-size:contain!important}


.p4{--purchase-x:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:clamp(33px,5vh,56px)!important;padding:calc(var(--head-h) + clamp(46px,7vh,84px)) clamp(48px,9vw,150px) calc(var(--foot-h) + clamp(44px,7vh,80px))!important}
.p4 h2{width:min(100%,1080px)!important;align-self:center!important;padding-left:34px!important;font-size:clamp(40px,3.8vw,58px)!important;line-height:1.27!important}
.p4 h2::before{display:block!important}
.p4 .cols{width:min(100%,1080px)!important;max-width:1080px!important;align-self:center!important;padding-top:0!important;border-top:1px solid rgba(33,26,60,.38)!important}
.p4 .col,.p4 .col:nth-child(1),.p4 .col:nth-child(2),.p4 .col:nth-child(3){grid-template-columns:54px minmax(190px,1.02fr) minmax(235px,1.25fr) 210px!important;min-height:118px!important;gap:clamp(18px,2.6vw,34px)!important;padding:0!important;transform:none!important}
.p4 .col::before{display:block!important;content:""!important;font-size:17px!important;color:var(--navy)!important;opacity:1!important}
.p4 .col:nth-child(1)::before{content:"01"!important}.p4 .col:nth-child(2)::before{content:"02"!important}.p4 .col:nth-child(3)::before{content:"03"!important}
.p4 .col h3{font-size:clamp(22px,1.65vw,26px)!important}
.p4 .col p{font-size:18px!important;line-height:1.7!important}
.p4 .col .btn{width:210px!important;min-height:50px!important;font-size:17px!important;padding:12px 16px!important}

@media (max-width:820px){
  .p2 .ph-full{background-image:url('../img/water-deep.webp')!important;background-position:center!important;animation:none!important}
  .p2::after{background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,.78) 64%,rgba(255,255,255,.24))!important}
  .p3{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:32px!important;padding:106px 22px 82px!important;min-height:auto!important}
  .p3 .col-l{order:2;max-width:none!important}.p3 .col-r{order:1;width:100%!important;height:360px!important;min-height:0!important}.p3 .brand-s{margin-bottom:8px!important}.p3 .prod-l{font-size:39px!important;margin-bottom:26px!important}.p3 h2{font-size:29px!important;margin-bottom:16px!important}.p3 .lead{margin-bottom:23px!important}.p3 .price{font-size:17px!important;margin-bottom:23px!important}.p3 .col-l>.btn{min-width:205px!important}
  .p4{display:block!important;padding:106px 22px 88px!important}.p4 h2{width:100%!important;font-size:40px!important;margin:0 0 34px!important}.p4 .cols{width:100%!important;border-top:1px solid rgba(33,26,60,.38)!important}.p4 .col,.p4 .col:nth-child(1),.p4 .col:nth-child(2),.p4 .col:nth-child(3){grid-template-columns:42px 1fr!important;grid-template-rows:auto auto auto!important;gap:10px 12px!important;min-height:0!important;padding:24px 0!important}.p4 .col::before{grid-column:1!important;grid-row:1!important;font-size:16px!important;padding-top:4px!important}.p4 .col h3{grid-column:2!important;grid-row:1!important;font-size:22px!important}.p4 .col p{grid-column:2!important;grid-row:2!important;font-size:17px!important}.p4 .col .btn{grid-column:2!important;grid-row:3!important;width:100%!important;min-height:52px!important;margin-top:7px!important}
}
@media (prefers-reduced-motion:reduce){.p2 .ph-full{animation:none!important}
}




.logo{width:94px!important;height:70px!important;margin:8px 0 0!important;background-position:center!important}


@media (min-width:821px){
  .hair-compare{right:clamp(26px,3.6vw,72px)!important;width:min(46vw,700px)!important}
  .hair-compare__blocks{gap:clamp(12px,1.2vw,18px)!important}
}
@media (min-width:1440px){
  .hair-compare{right:clamp(58px,5vw,104px)!important;width:min(47vw,710px)!important}
}


.p3{grid-template-columns:minmax(0,1.4fr) minmax(360px,.86fr)!important;column-gap:clamp(42px,4vw,70px)!important}
.p3 .col-l{max-width:none!important}
.p3 .brand-s{margin:0 0 12px!important;font-size:16px!important;line-height:1.7!important}
.p3 .prod-l{margin:0 0 44px!important;font-size:clamp(43px,3.45vw,62px)!important;line-height:1.22!important;letter-spacing:.035em!important;white-space:nowrap!important}
.p3 h2{margin:0 0 20px!important;font-size:clamp(29px,2.3vw,38px)!important;line-height:1.55!important;letter-spacing:.055em!important;white-space:nowrap!important}
.p3 .lead{margin:0 0 60px!important;font-size:18px!important;line-height:1.95!important}
.p3 .price{margin:0 0 26px!important;font-size:17px!important;line-height:1.7!important}
.p3 .col-l>.btn{align-self:flex-start!important;min-width:218px!important;min-height:52px!important}
@media (min-width:821px) and (max-width:1050px){
  .p3{grid-template-columns:minmax(400px,1fr) minmax(280px,.70fr)!important;column-gap:26px!important;padding-left:32px!important;padding-right:32px!important}
  .p3 .prod-l{font-size:38px!important}.p3 h2{font-size:27px!important}
}


.p4 .col .btn{align-self:center!important;justify-self:stretch!important;margin:0!important}

@media (max-width:820px){

  .logo{width:76px!important;height:57px!important;margin:6px 0 0!important}
  .p3 .brand-s{margin-bottom:10px!important}.p3 .prod-l{font-size:39px!important;white-space:normal!important;margin-bottom:30px!important}.p3 h2{font-size:29px!important;white-space:normal!important;margin-bottom:18px!important}.p3 .lead{margin-bottom:28px!important}.p3 .price{margin-bottom:24px!important}
  .p4 .col .btn{align-self:center!important;justify-self:stretch!important}
}





.panel > .num{display:none!important}
.p2 .ph-full{animation:none!important}
.p2-caustic-light{position:absolute;z-index:0;inset:0;pointer-events:none;overflow:hidden;isolation:isolate;opacity:.56;mix-blend-mode:multiply;mask-image:linear-gradient(90deg,rgba(33,26,60,.7) 0%,rgba(33,26,60,.82) 78%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,rgba(33,26,60,.7) 0%,rgba(33,26,60,.82) 78%,transparent 100%)}
.p2-caustic-light .caustic-optical-film{display:block!important;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.42!important;mix-blend-mode:soft-light!important;filter:saturate(.72) contrast(.90) brightness(1.08)!important;transform:scale(1.025)!important}
.p2 .inner{position:relative;z-index:4!important}
.p2 .hair-compare{z-index:3!important}
@media (min-width:821px){
  .hair-compare{top:50%!important;transform:translateY(-50%)!important}
  .hair-compare__blocks{align-items:stretch!important}
  .hair-compare__block{height:clamp(490px,52vh,570px)!important;min-height:clamp(490px,52vh,570px)!important;max-height:clamp(490px,52vh,570px)!important;overflow:hidden!important}
  .hair-compare__block h3{min-height:36px!important;display:flex!important;align-items:flex-start!important;justify-content:center!important;white-space:nowrap!important}
  .hair-compare__art{min-height:0!important;margin:10px 0!important}
  .hair-compare__band{height:64px!important;min-height:64px!important;max-height:64px!important;padding:7px 8px!important;line-height:1.42!important;white-space:nowrap!important}
  .hair-compare figcaption{margin-top:15px!important;white-space:nowrap!important}
}
@media (max-width:820px){
  .p2-caustic-light{opacity:.28;mask-image:linear-gradient(180deg,rgba(33,26,60,.65),rgba(33,26,60,.35) 64%,transparent);-webkit-mask-image:linear-gradient(180deg,rgba(33,26,60,.65),rgba(33,26,60,.35) 64%,transparent)}
  .p2-caustic-light .caustic-optical-film{opacity:.30!important}
  .hair-compare__band{min-height:64px!important}
}
@media (prefers-reduced-motion:reduce){.p2-caustic-light{display:none!important}
}


.p2-caustic-light{inset:0 auto 0 0!important;width:53vw!important;opacity:.46!important;mask-image:linear-gradient(90deg,rgba(33,26,60,.68) 0%,rgba(33,26,60,.78) 76%,rgba(33,26,60,.28) 90%,transparent 100%)!important;-webkit-mask-image:linear-gradient(90deg,rgba(33,26,60,.68) 0%,rgba(33,26,60,.78) 76%,rgba(33,26,60,.28) 90%,transparent 100%)!important}
.p2-caustic-light .caustic-optical-film{object-fit:cover!important;object-position:center!important;opacity:.24!important;mix-blend-mode:multiply!important;filter:saturate(.78) contrast(.82) brightness(1.04)!important;transform:none!important}


@media (min-width:821px){

  body.is-fv .logo{transform:scale(1.80)!important;transform-origin:left top!important;transition:transform .72s cubic-bezier(.16,.78,.26,1)!important}
}
@media (max-width:820px){
  .p2-caustic-light{inset:0!important;width:100%!important;opacity:.24!important}
  .p2-caustic-light .caustic-optical-film{opacity:.16!important}
}
@media (prefers-reduced-motion:reduce){
body.is-fv .logo{transform:none!important}
}


.p1 .ph-full{background-image:url('../img/hero-rear-hair-soft-sparse.webp')!important;background-position:center!important;background-size:cover!important;background-color:#edf8fb!important}


.site-loader{isolation:isolate!important;background:linear-gradient(135deg,#fbfdfe 0%,#eff9fb 53%,#e4f4f9 100%)!important}
.site-loader::before{z-index:0!important;inset:-4%!important;left:auto!important;right:auto!important;bottom:auto!important;width:auto!important;height:auto!important;background:linear-gradient(112deg,rgba(255,255,255,.54) 0%,rgba(242,250,252,.20) 48%,rgba(226,245,250,.32) 100%),url('../img/real-water-surface-motion.webp') center / cover no-repeat!important;opacity:.32!important;mix-blend-mode:multiply!important;mask-image:none!important;-webkit-mask-image:none!important;filter:blur(.15px)!important;animation:loader-water-continuity 9s cubic-bezier(.42,0,.25,1) infinite alternate!important}
.site-loader__logo{z-index:1!important}
@keyframes loader-water-continuity{0%{background-position:center,44% 54%;transform:translate3d(-.8%,-.5%,0) scale(1.035)}100%{background-position:center,56% 46%;transform:translate3d(.8%,.5%,0) scale(1.055)}}
@media (max-width:820px){.site-loader::before{inset:-8%!important;opacity:.20!important}
}
@media (prefers-reduced-motion:reduce){.site-loader::before{animation:none!important}
}



@media (max-width:820px){

  .logo{width:76px!important;height:60px!important;margin:6px 0 0!important;filter:brightness(0) invert(1)!important}

  .burger{min-width:92px!important;height:44px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0 14px!important;border:1px solid rgba(255,255,255,.78)!important;border-radius:999px!important;background:rgba(255,255,255,.08)!important;color:var(--paper)!important;font-size:16px!important;letter-spacing:.14em!important}

  nav.open{top:72px!important;padding:10px 20px 18px!important;background:rgba(33,26,60,.97)!important;border-bottom:1px solid rgba(223,241,253,.34)!important;box-shadow:0 18px 38px rgba(33,26,60,.20)!important}

  nav.open>ul>li>a,nav.open .parent{min-height:52px!important;display:flex!important;align-items:center!important;padding:15px 4px!important;font-size:17px!important;letter-spacing:.07em!important}


  .panel{padding-left:24px!important;padding-right:24px!important;border-bottom:0!important}

  
  .p1{min-height:820px!important;padding-top:112px!important;padding-bottom:60px!important;align-items:flex-start!important}
  .p1 .ph-full{background-position:60% center!important}
  .p1::after{background:linear-gradient(90deg,rgba(255,255,255,.985) 0%,rgba(255,255,255,.94) 48%,rgba(255,255,255,.50) 70%,rgba(255,255,255,.10) 100%)!important}
  .p1::before{right:-38px!important;bottom:12px!important;width:190px!important;height:270px!important;z-index:2!important;filter:drop-shadow(0 15px 20px rgba(33,26,60,.12))!important}
  .p1 .inner{width:min(100%,225px)!important;max-width:225px!important;margin:72px 0 0 0!important;padding:0 0 0 18px!important;text-align:left!important;z-index:4!important}
  .p1 .inner::before{left:0!important;top:.38em!important;height:94px!important}
  .p1 h1{font-size:40px!important;line-height:1.36!important;letter-spacing:.075em!important;max-width:5.8em!important;margin:0 0 25px!important;word-break:keep-all!important}
  .p1 .sub-copy{font-size:18px!important;line-height:1.92!important;letter-spacing:.035em!important;margin:0 0 28px!important}
  .p1 .btn{min-width:196px!important;min-height:52px!important;padding:13px 17px!important;background:rgba(255,255,255,.76)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important}

  
  .p2{display:block!important;min-height:auto!important;padding:112px 24px 78px!important;background:var(--pale)!important}
  .p2 .ph-full{background-position:center!important}
  .p2::after{background:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.58) 39%,rgba(255,255,255,.25) 100%)!important}
  .p2 .inner{width:100%!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
  .p2 h2{max-width:10.2em!important;font-size:32px!important;line-height:1.48!important;letter-spacing:.055em!important;margin:0 0 22px!important}
  .p2 .inner>p{width:100%!important;font-size:18px!important;line-height:2!important;margin:0 0 28px!important}
  .p2 .inner>.btn{min-width:224px!important;min-height:52px!important;padding:13px 18px!important;background:rgba(255,255,255,.75)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important}
  .hair-compare{width:100%!important;margin:46px 0 0!important}
  .hair-compare__blocks{gap:14px!important}
  .hair-compare__block{padding:22px 18px 16px!important;border-color:rgba(33,26,60,.20)!important;border-radius:16px!important;background:rgba(255,255,255,.76)!important;box-shadow:0 12px 32px rgba(33,26,60,.08)!important}
  .hair-compare__block h3{font-size:22px!important;line-height:1.45!important}
  .hair-compare__art{margin:14px 0!important}
  .hair-compare__band{min-height:64px!important;border-radius:10px!important;font-size:16px!important;line-height:1.42!important}
  .hair-compare figcaption{margin-top:18px!important;font-size:16px!important;line-height:1.8!important}

  
  .p3{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:34px!important;min-height:auto!important;padding:112px 24px 76px!important;background-position:center!important}
  .p3::after{background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.67) 26%,rgba(255,255,255,.93) 51%,rgba(255,255,255,.98) 100%)!important}
  .p3 .col-r{position:relative!important;order:1!important;inset:auto!important;right:auto!important;align-self:stretch!important;width:100%!important;height:330px!important;min-height:0!important;margin:0!important;overflow:visible!important}
  .p3 .col-r::after{inset:0!important;background-position:center bottom!important;background-size:contain!important;background-repeat:no-repeat!important;filter:drop-shadow(0 18px 23px rgba(33,26,60,.13))!important}
  .p3 .col-l{position:relative!important;order:2!important;align-self:stretch!important;width:100%!important;max-width:none!important;min-height:0!important;margin:0!important;padding:0!important;text-align:left!important}
  .p3 .brand-s,.p3 .prod-l,.p3 h2,.p3 .lead,.p3 .price,.p3 .col-l>.btn{position:static!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;width:auto!important}
  .p3 .brand-s{margin:0 0 10px!important;font-size:16px!important;line-height:1.7!important;letter-spacing:.12em!important}
  .p3 .prod-l{width:7.3em!important;margin:0 0 24px!important;font-size:36px!important;line-height:1.30!important;letter-spacing:.04em!important;white-space:normal!important;word-break:normal!important;overflow-wrap:anywhere!important}
  .p3 h2{margin:0 0 18px!important;font-size:29px!important;line-height:1.58!important;letter-spacing:.045em!important;white-space:normal!important}
  .p3 .lead{margin:0 0 28px!important;font-size:18px!important;line-height:1.96!important}
  .p3 .price{margin:0 0 24px!important;font-size:17px!important;line-height:1.7!important;letter-spacing:.01em!important}
  .p3 .col-l>.btn{display:inline-flex!important;min-width:210px!important;min-height:52px!important;margin:0!important;padding:13px 18px!important;border-radius:999px!important;justify-content:space-between!important;gap:16px!important}

  
  .p4{display:block!important;min-height:auto!important;padding:112px 24px 78px!important;background-position:center!important}
  .p4 h2{width:100%!important;padding-left:20px!important;font-size:36px!important;line-height:1.35!important;letter-spacing:.075em!important;margin:0 0 30px!important}
  .p4 .cols{width:100%!important;border-top:1px solid rgba(33,26,60,.34)!important}
  .p4 .col,.p4 .col:nth-child(1),.p4 .col:nth-child(2),.p4 .col:nth-child(3){grid-template-columns:38px 1fr!important;grid-template-rows:auto auto auto!important;gap:10px 12px!important;min-height:0!important;padding:26px 0!important;background:transparent!important;border-bottom:1px solid rgba(33,26,60,.34)!important;box-shadow:none!important;transform:none!important}
  .p4 .col::before{grid-column:1!important;grid-row:1!important;padding-top:4px!important;font-size:16px!important}
  .p4 .col h3{grid-column:2!important;grid-row:1!important;font-size:22px!important;line-height:1.48!important;white-space:normal!important}
  .p4 .col p{grid-column:2!important;grid-row:2!important;font-size:18px!important;line-height:1.78!important}
  .p4 .col .btn{grid-column:2!important;grid-row:3!important;width:100%!important;min-height:54px!important;margin:8px 0 0!important;padding:13px 18px!important;border-radius:999px!important;justify-content:space-between!important}

  
  .p5{display:block!important;min-height:auto!important;padding:112px 24px 70px!important}
  .p5 .inner{width:100%!important;margin:0!important;padding:0!important;background:transparent!important;border-top:0!important}
  .p5 h2{font-size:30px!important;line-height:1.48!important;margin-bottom:22px!important}
  .p5 .body{font-size:18px!important;line-height:1.94!important;margin-bottom:28px!important}
  .p5 table{background:rgba(255,255,255,.70)!important;border-radius:12px!important;overflow:hidden!important}
  .p5 th,.p5 td{padding:14px 10px!important;font-size:16px!important;line-height:1.72!important}
  .p5 th{width:92px!important}
  .p5 .foot-bottom{display:none!important}

  footer>.btn{width:100%!important;min-width:0!important;min-height:54px!important;border-radius:999px!important;font-size:17px!important}

  .foot-links{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0 18px!important;padding:4px 0!important}

  .foot-links a{display:block!important;padding:10px 0!important;color:var(--paper)!important;font-size:16px!important;line-height:1.6!important;opacity:.90!important}
}



@media (max-width:820px){

  .logo{width:70px!important;height:52px!important;margin:6px 0!important}

  .burger{height:42px!important;min-width:88px!important;font-size:16px!important}

  nav.open{top:64px!important}

  nav.open>ul>li,nav.open .has-sub{position:static!important;display:block!important;width:100%!important;height:auto!important}

  nav.open .sub{position:static!important;display:block!important;min-width:0!important;margin:0!important;background:rgba(255,255,255,.08)!important;border:0!important;border-top:1px solid rgba(255,255,255,.26)!important;box-shadow:none!important}

  
  .p1{height:100svh!important;min-height:100svh!important;padding:82px 24px 20px!important;align-items:flex-start!important}
  .p1 .ph-full{background-position:65% center!important}
  .p1 .ph-full::after{background-size:auto 39svh!important;background-position:right -18px bottom -12px!important}
  .p1::after{background:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.94) 43%,rgba(255,255,255,.50) 71%,rgba(255,255,255,.13) 100%)!important}
  .p1::before{right:-22px!important;bottom:14px!important;width:175px!important;height:232px!important}
  .p1 .inner{width:min(100%,270px)!important;max-width:270px!important;margin:0!important;padding-left:14px!important}
  .p1 .inner::before{top:.36em!important;height:78px!important}
  .p1 h1{max-width:8.45em!important;font-size:32px!important;line-height:1.34!important;letter-spacing:.055em!important;margin:0 0 15px!important}
  .p1 .sub-copy{font-size:18px!important;line-height:1.72!important;letter-spacing:0!important;margin:0 0 16px!important}
  .p1 .btn{min-height:50px!important;min-width:180px!important;padding:12px 16px!important;font-size:17px!important}

  
  .p2{min-height:100svh!important;padding:80px 20px 24px!important}
  .p2 h2{max-width:none!important;height:64px!important;font-size:0!important;line-height:1!important;letter-spacing:0!important;white-space:normal!important;word-break:normal!important;margin:0 0 12px!important}
  .p2 h2 .char{display:none!important}
  .p2 h2::before{content:"髪の美しさは、\A水分バランスで決まる。";display:block;white-space:pre;font-size:22px!important;line-height:1.46!important;letter-spacing:.015em!important;color:var(--navy)!important}
  .p2 .inner>p{font-size:18px!important;line-height:1.68!important;margin:0 0 14px!important;letter-spacing:0!important}
  .p2 .inner>.btn{min-width:196px!important;min-height:48px!important;padding:11px 15px!important;font-size:17px!important}
  .hair-compare{margin:20px 0 0!important}
  .hair-compare__blocks{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)!important;gap:4px!important;align-items:center!important}
  .hair-compare__block{min-height:0!important;padding:12px 8px 10px!important;border-radius:12px!important;box-shadow:0 8px 20px rgba(33,26,60,.07)!important}
  .hair-compare__block h3{font-size:16px!important;line-height:1.35!important;letter-spacing:-.02em!important;white-space:nowrap!important}
  .hair-compare__art{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;min-height:0!important;gap:3px!important;margin:8px 0!important}
  .hair-compare__art img{order:-1!important;align-self:center!important;height:94px!important;max-width:100%!important;object-fit:contain!important}
  .hair-compare__label{position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;display:block!important;align-self:stretch!important;width:auto!important;min-width:0!important;padding-left:12px!important;text-align:left!important;font-size:16px!important;line-height:1.32!important;letter-spacing:-.025em!important}
  .hair-compare__label::before{left:1px!important;top:.58em!important;width:5px!important;height:5px!important}
  .hair-compare__arrow{height:auto!important;align-self:center!important;font-size:26px!important;transform:none!important}
  .p2.is-active .hair-compare__arrow{animation:none!important;transform:none!important;opacity:1!important}
  .hair-compare__band{min-height:44px!important;margin-top:7px!important;padding:6px 4px!important;border-radius:8px!important;font-size:16px!important;line-height:1.33!important;letter-spacing:-.025em!important}
  .hair-compare figcaption{margin-top:10px!important;font-size:16px!important;line-height:1.58!important;letter-spacing:0!important}

  
  .p3{height:100svh!important;min-height:100svh!important;gap:14px!important;padding:76px 24px 22px!important}
  .p3 .col-r{height:250px!important;min-height:0!important}
  .p3 .brand-s{margin:0 0 4px!important;font-size:16px!important;line-height:1.45!important}
  .p3 .prod-l{width:8.2em!important;margin:0 0 12px!important;font-size:30px!important;line-height:1.28!important;letter-spacing:.025em!important}
  .p3 h2{margin:0 0 10px!important;font-size:24px!important;line-height:1.44!important;letter-spacing:.03em!important}
  .p3 .lead{margin:0 0 12px!important;font-size:18px!important;line-height:1.62!important;letter-spacing:0!important}
  .p3 .price{margin:0 0 14px!important;font-size:16px!important;line-height:1.55!important;letter-spacing:0!important}
  .p3 .col-l>.btn{min-width:192px!important;min-height:48px!important;padding:11px 15px!important;font-size:17px!important}

  
  .p4{height:100svh!important;min-height:100svh!important;padding:78px 24px 22px!important}
  .p4 h2{padding-left:12px!important;font-size:28px!important;line-height:1.36!important;margin:0 0 12px!important}
  .p4 .cols{border-top:1px solid rgba(33,26,60,.34)!important}
  .p4 .col,.p4 .col:nth-child(1),.p4 .col:nth-child(2),.p4 .col:nth-child(3){display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;grid-template-rows:auto auto auto!important;gap:4px 9px!important;padding:12px 0!important;align-items:start!important}
  .p4 .col::before{grid-column:1!important;grid-row:1!important;padding-top:3px!important;font-size:16px!important}
  .p4 .col h3{grid-column:2!important;grid-row:1!important;font-size:20px!important;line-height:1.42!important;letter-spacing:.025em!important}
  .p4 .col p{grid-column:2!important;grid-row:2!important;font-size:18px!important;line-height:1.55!important;letter-spacing:0!important}
  .p4 .col .btn{grid-column:2!important;grid-row:3!important;width:100%!important;min-height:46px!important;margin:4px 0 0!important;padding:10px 15px!important;font-size:17px!important}

  
  .p5 h2{font-size:clamp(20px,5.7vw,24px)!important;line-height:1.45!important;letter-spacing:.01em!important;white-space:nowrap!important}
}



@media (max-width:820px){

  
  .p1 .ph-full{background-size:auto 48svh!important;background-position:right bottom 12px!important;background-color:#edf9fd!important}
  .p1 .ph-full::after{display:none!important}
  .p1::after{background:linear-gradient(180deg,rgba(255,255,255,.985) 0%,rgba(255,255,255,.94) 38%,rgba(255,255,255,.63) 58%,rgba(255,255,255,.10) 100%)!important}
  .p1::before{right:3%!important;bottom:3%!important;width:158px!important;height:212px!important}
  .p1 .inner{width:min(100%,316px)!important;max-width:316px!important;margin:0!important;padding-left:16px!important}
  .p1 .inner::before{height:80px!important}
  .p1 h1{height:89px!important;font-size:0!important;line-height:1!important;letter-spacing:0!important;margin:0 0 16px!important}
  .p1 h1 .char{display:none!important}
  .p1 h1::before{content:"整える、という\A美しさ。";display:block;white-space:pre;font-size:32px!important;line-height:1.38!important;letter-spacing:.028em!important;color:var(--navy)!important}
  .p1 .sub-copy{max-width:17em!important;font-size:0!important;line-height:1!important;letter-spacing:0!important;margin:0 0 18px!important}
  .p1 .sub-copy::before{content:"髪も肌も、そのほとんどが水。\A水が整えば、美しさも整う。\A水の調和をつくる、\A AQUA HARMONY。";display:block;white-space:pre;font-size:18px!important;line-height:1.68!important;letter-spacing:.015em!important;color:var(--ink)!important}
  .p1 .btn{min-width:184px!important;min-height:50px!important;letter-spacing:.04em!important}

  
  .p2 .inner>p,.p3 .lead,.p4 .col p,.p5 .body{letter-spacing:.01em!important;line-height:1.75!important}
  .p2 h2::before{letter-spacing:.02em!important}
  .p3 .brand-s{letter-spacing:.08em!important}
  .p3 .prod-l{font-size:29px!important;letter-spacing:.015em!important}
  .p3 h2{letter-spacing:.015em!important}
  .p4 h2{font-size:27px!important;letter-spacing:.035em!important}
  .p4 .col h3{letter-spacing:.01em!important}
  .p5 h2{letter-spacing:0!important}
}



@media (max-width:820px){


  
  .panel .btn,footer>.btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:11px!important;min-height:48px!important;height:48px!important;padding:0 18px!important;border:1px solid var(--navy)!important;border-radius:999px!important;background:var(--navy)!important;color:var(--paper)!important;box-shadow:0 8px 18px rgba(33,26,60,.11)!important;font-family:"Noto Sans JP",sans-serif!important;font-size:17px!important;font-weight:400!important;line-height:1!important;letter-spacing:.035em!important;text-decoration:none!important;white-space:nowrap!important}

  .panel .btn::after,footer>.btn::after{content:"→"!important;display:inline-block!important;margin:0 0 0 4px!important;font-family:"Noto Serif JP",serif!important;font-size:24px!important;font-weight:500!important;line-height:1!important;transform:translateY(-1px)!important}

  .panel .btn:hover,.panel .btn:focus-visible,footer>.btn:hover,footer>.btn:focus-visible{background:var(--paper)!important;color:var(--navy)!important;transform:translateY(-1px)!important}

  
  .p1 .inner{position:absolute!important;top:23svh!important;left:50%!important;transform:translateX(-50%)!important;width:min(calc(100% - 48px),318px)!important;max-width:318px!important;margin:0!important;padding:0!important;text-align:center!important}
  .p1 .inner::before{display:none!important}
  .p1 h1{height:86px!important;max-width:none!important;margin:0 0 16px!important;text-align:center!important}
  .p1 h1::before{content:"整える、\A という美しさ。"!important;font-size:31px!important;line-height:1.39!important;letter-spacing:.035em!important}
  .p1 .sub-copy{max-width:none!important;margin:0 0 20px!important;text-align:center!important}
  .p1 .sub-copy::before{font-size:18px!important;line-height:1.76!important;letter-spacing:.035em!important}
  .p1 .btn{min-width:190px!important}
  .p1 .ph-full{background-size:auto 52svh!important;background-position:110% bottom 0!important}
  .p1::before{right:2%!important;bottom:1.5%!important;width:192px!important;height:260px!important}

  
  .p2{padding:78px 20px 24px!important}
  .p2 .inner{text-align:center!important}
  .p2 h2{display:block!important;flex:0 0 100%!important;width:100%!important;min-width:100%!important;max-width:100%!important;height:78px!important;margin:0 0 10px!important;text-align:center!important}
  .p2 h2::before{font-size:25px!important;line-height:1.48!important;letter-spacing:.035em!important;text-align:center!important}
  .p2 .inner>p{max-width:20em!important;margin:0 auto 16px!important;font-size:18px!important;line-height:1.82!important;letter-spacing:.045em!important;text-align:center!important}
  .p2 .inner>.btn{min-width:208px!important;background:var(--navy)!important;color:var(--paper)!important;border-color:var(--navy)!important}
  .hair-compare{margin:17px 0 0!important}
  .hair-compare__blocks{gap:6px!important;align-items:stretch!important}
  .hair-compare__block{padding:13px 9px 10px!important;border:1px solid rgba(33,26,60,.18)!important;border-radius:4px!important;background:rgba(255,255,255,.66)!important;box-shadow:0 8px 18px rgba(33,26,60,.05)!important}
  .hair-compare__block h3{font-family:"Noto Serif JP",serif!important;font-size:20px!important;font-weight:600!important;line-height:1.35!important;letter-spacing:.015em!important;white-space:nowrap!important;text-align:center!important}
  .hair-compare__block--aqua h3{font-family:"Noto Serif JP",serif!important;font-size:16px!important;letter-spacing:.035em!important}
  .hair-compare__art{gap:5px!important;margin:8px 0!important}
  .hair-compare__art img{height:87px!important}
  .hair-compare__label{padding-left:10px!important;font-family:"Noto Serif JP",serif!important;font-size:16px!important;line-height:1.38!important;letter-spacing:.005em!important}
  .hair-compare__band{min-height:42px!important;margin-top:6px!important;padding:5px 3px!important;border-radius:0!important;background:rgba(223,241,253,.72)!important;font-family:"Noto Serif JP",serif!important;font-size:16px!important;line-height:1.36!important;letter-spacing:.01em!important}
  .hair-compare figcaption{max-width:20em!important;margin:10px auto 0!important;padding:8px 10px 0!important;border-top:1px solid rgba(33,26,60,.18)!important;font-size:16px!important;line-height:1.62!important;letter-spacing:.035em!important;text-align:center!important}
  @media (max-width:375px){
    .p2{padding-left:16px!important;padding-right:16px!important}
    .p2 .inner,.hair-compare{width:100%!important}
    .hair-compare__blocks{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr)!important;gap:2px!important}
    .hair-compare__block{padding:11px 6px 8px!important}
    .hair-compare__block h3{font-size:18px!important}
    .hair-compare__block--aqua h3{font-size:16px!important;letter-spacing:0!important;transform:scaleX(.76);transform-origin:center!important}
    .hair-compare__art img{height:80px!important}
    .hair-compare__label{font-size:16px!important;letter-spacing:-.02em!important}
    .hair-compare__band{font-size:16px!important;letter-spacing:-.02em!important}
    .hair-compare figcaption{margin-top:7px!important;padding-top:6px!important;line-height:1.52!important}
}

  
  .p3{gap:12px!important;padding:72px 24px 20px!important}
  .p3 .col-r{height:286px!important}
  .p3 .col-r::after{inset:0!important;background-size:contain!important;background-position:center bottom!important}
  .p3 .col-l{text-align:center!important}
  .p3 .brand-s{margin:0 0 5px!important;font-size:16px!important;line-height:1.5!important;letter-spacing:.10em!important}
  .p3 .prod-l{width:100%!important;margin:0 0 11px!important;font-size:clamp(20px,6.4vw,25px)!important;line-height:1.34!important;letter-spacing:.012em!important;white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important}
  .p3 h2{margin:0 0 9px!important;font-size:22px!important;line-height:1.48!important;letter-spacing:.025em!important}
  .p3 .lead{margin:0 0 11px!important;font-size:18px!important;line-height:1.75!important;letter-spacing:.04em!important}
  .p3 .price{margin:0 0 14px!important;font-size:16px!important;line-height:1.55!important;letter-spacing:.025em!important}
  .p3 .col-l>.btn{min-width:190px!important;margin:0 auto!important}

  
  .p4{padding:76px 16px 20px!important}
  .p4 h2{padding:0!important;font-size:26px!important;line-height:1.45!important;letter-spacing:.04em!important;margin:0 0 13px!important}
  .p4 h2::before,.p4 h2::after{display:none!important}
  .p4 .cols{border-top:1px solid rgba(33,26,60,.34)!important}
  .p4 .col,.p4 .col:nth-child(1),.p4 .col:nth-child(2),.p4 .col:nth-child(3){grid-template-columns:25px minmax(0,1fr)!important;grid-template-rows:auto auto auto!important;gap:3px 8px!important;padding:11px 0!important;min-height:0!important;align-items:start!important}
  .p4 .col::before{font-size:16px!important;padding-top:3px!important}
  .p4 .col h3{font-size:20px!important;line-height:1.38!important;letter-spacing:.02em!important}
  .p4 .col p{font-size:18px!important;line-height:1.6!important;letter-spacing:0!important}
  .p4 .col .btn{justify-self:start!important;width:auto!important;min-width:174px!important;margin:5px 0 0!important}

  
  .p5 h2{text-align:center!important}
  .p5 .body{font-size:18px!important;line-height:1.78!important;letter-spacing:.028em!important}
}



@media (max-width:820px){
  
  .p2 .inner>p,.p3 .lead,.p5 .body{font-size:18px!important;line-height:1.68!important;letter-spacing:.018em!important}
  .p2 .inner>p{max-width:21em!important}
  .p3 .lead{max-width:20em!important;margin-left:auto!important;margin-right:auto!important}
  .p5 .body{max-width:22em!important;margin-left:auto!important;margin-right:auto!important}

  
  .p5 th,.p5 td{padding:9px 8px!important;font-size:16px!important;line-height:1.55!important;letter-spacing:.015em!important}
  .p5 th{width:82px!important}


  
  .panel .btn,footer>.btn{gap:9px!important;padding-left:18px!important;padding-right:18px!important;letter-spacing:.018em!important;line-height:1!important}

  .panel .btn::after,footer>.btn::after{margin-left:6px!important;font-size:20px!important;line-height:1!important;transform:none!important}

  
  .p4{display:flex!important;flex-direction:column!important;justify-content:center!important;padding:76px 20px 28px!important}
  .p4 h2{margin:0 0 20px!important;font-size:25px!important;line-height:1.4!important;letter-spacing:.035em!important}
  .p4 .cols{width:100%!important}
  .p4 .col,.p4 .col:nth-child(1),.p4 .col:nth-child(2),.p4 .col:nth-child(3){grid-template-columns:25px minmax(0,1fr)!important;grid-template-rows:auto auto auto!important;gap:7px 9px!important;min-height:130px!important;padding:15px 0!important}
  .p4 .col::before{padding-top:3px!important}
  .p4 .col h3{font-size:20px!important;line-height:1.38!important;letter-spacing:.018em!important}
  .p4 .col p{font-size:18px!important;line-height:1.55!important;letter-spacing:0!important}
  .p4 .col .btn{min-width:178px!important;height:46px!important;min-height:46px!important;margin:5px 0 0!important;padding-left:16px!important;padding-right:16px!important}
}



@media (max-width:820px){
  
  .hair-compare{margin-top:15px!important}
  .hair-compare__blocks{gap:10px!important}
  .hair-compare__block{padding:16px 14px 13px!important;border-color:rgba(33,26,60,.16)!important;box-shadow:0 10px 24px rgba(33,26,60,.045)!important}
  .hair-compare__block h3{font-size:19px!important;line-height:1.35!important;letter-spacing:.01em!important}
  .hair-compare__block--aqua h3{font-size:16px!important;letter-spacing:.018em!important}
  .hair-compare__art{gap:7px!important;margin:10px 0 12px!important}
  .hair-compare__art img{height:84px!important}
  .hair-compare__label{width:auto!important;min-width:0!important;padding:0!important;font-size:16px!important;line-height:1.5!important;letter-spacing:-.012em!important}
  .hair-compare__label::after{display:none!important}
  .hair-compare__label--coating{top:8px!important;left:7px!important;width:94px!important;text-align:left!important}
  .hair-compare__label--lack{right:7px!important;bottom:10px!important;width:auto!important;text-align:right!important}
  .hair-compare__label--mineral{top:12px!important;right:8px!important;text-align:right!important}
  .hair-compare__label--amino{top:48px!important;left:8px!important;text-align:left!important}
  .hair-compare__label--moisture{right:8px!important;bottom:10px!important;text-align:right!important}
  .hair-compare__label::before{content:""!important;display:inline-block!important;width:4px!important;height:4px!important;margin-right:5px!important;border-radius:50%!important;background:var(--navy)!important;vertical-align:2px!important}
  .hair-compare__band{min-height:48px!important;margin-top:8px!important;padding:7px 6px!important;font-size:16px!important;line-height:1.38!important;letter-spacing:-.008em!important}
  .hair-compare__arrow{font-size:23px!important;align-self:center!important}

  
  .p4 .col .btn{display:inline-grid!important;grid-template-columns:1fr 20px!important;align-items:center!important;gap:12px!important;min-width:155px!important;height:38px!important;min-height:38px!important;padding:0 0 0 13px!important;border:1px solid rgba(33,26,60,.70)!important;border-radius:0!important;background:rgba(255,255,255,.40)!important;color:var(--navy)!important;box-shadow:none!important;font-size:17px!important;font-weight:400!important;line-height:1!important;letter-spacing:.012em!important;text-align:left!important}
  .p4 .col .btn::after{justify-self:center!important;margin:0!important;font-family:"Noto Serif JP",serif!important;font-size:18px!important;font-weight:500!important;line-height:1!important;transform:none!important}
  .p4 .col .btn:hover,.p4 .col .btn:focus-visible{background:var(--navy)!important;color:var(--paper)!important;box-shadow:none!important;transform:none!important}
}
@media (max-width:375px){
  .hair-compare__blocks{grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr)!important;gap:4px!important}
  .hair-compare__block{padding:13px 8px 10px!important}
  .hair-compare__block h3{font-size:18px!important}
  .hair-compare__block--aqua h3{font-size:16px!important;transform:scaleX(.80);transform-origin:center!important}
  .hair-compare__art img{height:77px!important}
  .hair-compare__label{letter-spacing:-.035em!important}
  .hair-compare__band{padding-left:3px!important;padding-right:3px!important;letter-spacing:-.028em!important}
}



@media (max-width:820px){
  
  .hair-compare{margin-top:13px!important}
  .hair-compare__blocks{gap:10px!important;align-items:stretch!important}
  .hair-compare__block{min-height:0!important;padding:15px 13px 12px!important}
  .hair-compare__block h3{font-size:19px!important;line-height:1.32!important}
  .hair-compare__block--aqua h3{font-size:16px!important;letter-spacing:.01em!important}
  .hair-compare__art{display:flex!important;flex:0 0 auto!important;min-height:0!important;margin:9px 0 10px!important;gap:0!important;align-items:center!important;justify-content:flex-start!important;flex-direction:column!important}
  .hair-compare__art img{flex:0 0 auto!important;width:auto!important;height:82px!important;margin:0 0 10px!important}
  .hair-compare__label,.hair-compare__label--coating,.hair-compare__label--lack,.hair-compare__label--mineral,.hair-compare__label--amino,.hair-compare__label--moisture{position:static!important;display:block!important;align-self:stretch!important;width:100%!important;min-width:0!important;height:24px!important;margin:0!important;padding:0!important;font-size:16px!important;line-height:24px!important;letter-spacing:-.008em!important;text-align:center!important;white-space:nowrap!important;transform:none!important}
  .hair-compare__label--coating{height:48px!important;line-height:24px!important;white-space:normal!important}
  .hair-compare__label::before{display:none!important}
  .hair-compare__band{flex:0 0 auto!important;min-height:46px!important;margin:0!important;padding:6px 5px!important;font-size:16px!important;line-height:1.34!important;letter-spacing:-.012em!important}
  .hair-compare__arrow{font-size:22px!important}
}
@media (max-width:375px){
  .hair-compare__blocks{grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr)!important;gap:4px!important}
  .hair-compare__block{padding:13px 9px 10px!important}
  .hair-compare__block h3{font-size:18px!important}
  .hair-compare__block--aqua h3{font-size:16px!important;transform:scaleX(.84)!important;transform-origin:center!important}
  .hair-compare__art img{height:76px!important}
  .hair-compare__label,.hair-compare__label--coating,.hair-compare__label--lack,.hair-compare__label--mineral,.hair-compare__label--amino,.hair-compare__label--moisture{font-size:16px!important;letter-spacing:-.045em!important}
  .hair-compare__label::before{margin-right:4px!important}
}



@media (max-width:820px){
  
  .p2 .inner>p,.p3 .lead,.p4 .col p,.p5 .body{font-size:14px!important;line-height:1.72!important;letter-spacing:.022em!important}
  .p5 th,.p5 td{font-size:14px!important;line-height:1.5!important;letter-spacing:.01em!important;padding:7px 7px!important}

  
  .hair-compare__block{padding:17px 16px 15px!important}
  .hair-compare__block h3{font-size:18px!important;line-height:1.35!important}
  .hair-compare__block--aqua h3{font-size:15px!important;letter-spacing:.01em!important}
  .hair-compare__art{margin:10px 0 12px!important}
  .hair-compare__art img{height:78px!important;margin-bottom:11px!important}
  .hair-compare__label,.hair-compare__label--coating,.hair-compare__label--lack,.hair-compare__label--mineral,.hair-compare__label--amino,.hair-compare__label--moisture{display:block!important;height:21px!important;font-size:14px!important;line-height:21px!important;letter-spacing:.01em!important;text-align:center!important}
  .hair-compare__label--coating{height:42px!important;line-height:21px!important}
  .hair-compare__label::before{content:"●"!important;position:static!important;display:inline!important;width:auto!important;height:auto!important;margin:0 4px 0 0!important;border-radius:0!important;background:transparent!important;font-size:9px!important;line-height:21px!important;transform:none!important}
  .hair-compare__band{min-height:42px!important;padding:5px 4px!important;font-size:14px!important;line-height:1.35!important;letter-spacing:.01em!important}
  .hair-compare figcaption{font-size:14px!important;line-height:1.55!important;letter-spacing:.02em!important}

  
  .p3 .prod-l{font-size:28px!important;line-height:1.28!important;letter-spacing:.01em!important;margin-bottom:12px!important}
  .p3 h2{font-size:18px!important;line-height:1.42!important;letter-spacing:.02em!important;margin-bottom:10px!important}
  .p3 .lead{line-height:1.68!important}
  .p3 .price{font-size:14px!important;line-height:1.5!important;letter-spacing:.015em!important}

  
  .p4 .col .btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-width:156px!important;height:40px!important;min-height:40px!important;padding:0 15px!important;border:1px solid var(--navy)!important;border-radius:999px!important;background:var(--navy)!important;color:var(--paper)!important;box-shadow:0 6px 15px rgba(33,26,60,.10)!important;font-size:15px!important;font-weight:400!important;line-height:1!important;letter-spacing:.025em!important;text-align:center!important}
  .p4 .col .btn::after{justify-self:auto!important;margin:0 0 0 5px!important;font-size:17px!important;font-weight:500!important;line-height:1!important;transform:none!important}
  .p4 .col .btn:hover,.p4 .col .btn:focus-visible{background:var(--paper)!important;color:var(--navy)!important;box-shadow:0 6px 15px rgba(33,26,60,.08)!important;transform:none!important}
}
@media (max-width:375px){
  .hair-compare__block{padding:14px 10px 12px!important}
  .hair-compare__block h3{font-size:17px!important}
  .hair-compare__block--aqua h3{font-size:14px!important;transform:scaleX(.88)!important;transform-origin:center!important}
  .hair-compare__art img{height:72px!important}
  .hair-compare__label,.hair-compare__label--coating,.hair-compare__label--lack,.hair-compare__label--mineral,.hair-compare__label--amino,.hair-compare__label--moisture{font-size:14px!important;letter-spacing:-.018em!important}
}



@media (max-width:820px){

  
  .burger{position:relative!important;width:44px!important;min-width:44px!important;height:44px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:transparent!important;font-size:0!important;letter-spacing:0!important;box-shadow:none!important}

  .burger::after{content:""!important;display:block!important;width:23px!important;height:15px!important;background:linear-gradient(var(--paper),var(--paper)) center top / 23px 1px no-repeat,linear-gradient(var(--paper),var(--paper)) center / 23px 1px no-repeat,linear-gradient(var(--paper),var(--paper)) center bottom / 23px 1px no-repeat!important;opacity:.94!important}


  
  nav.open{top:64px!important;padding:12px 24px 20px!important;background:rgba(33,26,60,.985)!important;text-align:left!important;box-shadow:0 16px 34px rgba(33,26,60,.18)!important}

  nav.open>ul>li,nav.open .has-sub{width:100%!important;height:auto!important;text-align:left!important}

  nav.open>ul>li>a,nav.open .parent{justify-content:flex-start!important;min-height:47px!important;padding:12px 0!important;color:var(--paper)!important;font-size:15px!important;line-height:1.35!important;letter-spacing:.07em!important;text-align:left!important;text-shadow:none!important;filter:none!important}

  nav.open .sub{margin:0!important;padding:0 0 5px!important;background:transparent!important;border-top:1px solid rgba(255,255,255,.23)!important;border-bottom:1px solid rgba(255,255,255,.23)!important;border-radius:0!important;box-shadow:none!important;text-align:left!important}

  nav.open .mobile-login-item{display:block!important;border-bottom:0!important;padding-top:13px!important}

  .mobile-nav-login{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:146px!important;height:38px!important;padding:0 16px!important;border:1px solid rgba(255,255,255,.72)!important;border-radius:999px!important;background:rgba(255,255,255,.10)!important;color:var(--paper)!important;font-family:"Noto Sans JP",sans-serif!important;font-size:14px!important;line-height:1!important;letter-spacing:.045em!important;text-align:left!important;text-shadow:none!important;cursor:pointer!important}

  footer .foot-links{display:none!important}

  footer::before{content:"© Wack Planning Co., Ltd."!important;display:block!important;color:rgba(255,255,255,.78)!important;font-family:"Noto Sans JP",sans-serif!important;font-size:11px!important;line-height:1.4!important;letter-spacing:.035em!important;text-align:center!important}
  

  body.mobile-menu-open #openLogin.mobile-login-dock{opacity:0!important;pointer-events:none!important;transform:translate3d(0,12px,0)!important}

  
  .hair-compare{width:calc(100% + 16px)!important;margin-left:-8px!important;margin-right:-8px!important}
  .hair-compare__blocks{grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr)!important;gap:4px!important}
  .hair-compare__block{padding-left:10px!important;padding-right:10px!important}
  .hair-compare__arrow{font-size:15px!important;line-height:1!important}
  .hair-compare__band{white-space:nowrap!important;font-size:14px!important;letter-spacing:-.035em!important;overflow:visible!important}

  
  .p4 .col .btn{justify-self:end!important;align-self:start!important}

  
  .p1 .btn{font-size:14px!important;min-width:174px!important;height:44px!important;min-height:44px!important;padding:0 16px!important;letter-spacing:.045em!important}
  .p1 .btn::after{font-size:18px!important;margin-left:4px!important}

  
  .p1 h1,.p2 h2{font-size:0!important;clip-path:none!important;transform:none!important;animation:none!important}
  .p1 h1::before,.p2 h2::before{display:none!important}
  .p1 h1 .char,.p2 h2 .char{display:inline-block!important;opacity:0;transform:translate3d(0,18px,0) rotate(2deg);filter:blur(4px);will-change:transform,opacity,filter!important}
  .p1 h1 .char{font-size:31px!important;line-height:1.38!important;letter-spacing:.035em!important;color:var(--navy)!important}
  .p2 h2 .char{font-size:25px!important;line-height:1.48!important;letter-spacing:.035em!important;color:var(--navy)!important}
  .mobile-head-break{display:block!important;height:0!important}
  .p1.is-active h1 .char{animation:character-water-reveal .62s cubic-bezier(.16,.78,.26,1) calc(.10s + var(--i)*.060s) both!important}
  .p2.is-active h2 .char{animation:character-water-reveal .58s cubic-bezier(.16,.78,.26,1) calc(.10s + var(--i)*.042s) both!important}
  .p1.is-active .sub-copy{clip-path:inset(0 100% 0 0);animation:mobile-copy-fade .72s cubic-bezier(.16,.78,.26,1) .72s both!important}
  .p1.is-active .btn,.p2.is-active .inner>.btn,.p2.is-active .inner>p{clip-path:inset(0 100% 0 0);animation:mobile-copy-fade .70s cubic-bezier(.16,.78,.26,1) 1.00s both!important}
  .p2.is-active .inner>p{animation-delay:.74s!important}
  @keyframes mobile-copy-fade{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translate3d(0,12px,0)}100%{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
}
@media (max-width:375px){
  .hair-compare{width:calc(100% + 10px)!important;margin-left:-5px!important;margin-right:-5px!important}
  .hair-compare__blocks{grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr)!important;gap:2px!important}
  .hair-compare__block{padding-left:5px!important;padding-right:5px!important}
  .hair-compare__arrow{font-size:13px!important}
  .hair-compare__band{font-size:12.5px!important;letter-spacing:-.04em!important}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .p1 h1 .char,.p2 h2 .char,.p1 .sub-copy,.p1 .btn,.p2 .inner>.btn,.p2 .inner>p{animation:none!important;clip-path:none!important;opacity:1!important;transform:none!important;filter:none!important}
}



@media (min-width:821px){

  .has-sub .sub{top:calc(100% + 9px)!important;right:0!important;min-width:238px!important;padding:8px!important;border:1px solid rgba(255,255,255,.70)!important;border-radius:18px!important;background:rgba(255,255,255,.64)!important;box-shadow:0 18px 42px rgba(33,26,60,.12)!important;backdrop-filter:blur(18px) saturate(1.08)!important;-webkit-backdrop-filter:blur(18px) saturate(1.08)!important;overflow:hidden!important}

  .has-sub .sub::before{top:-10px!important;height:10px!important}

  .has-sub .sub a{display:flex!important;align-items:center!important;height:42px!important;padding:0 14px!important;border-radius:11px!important;color:var(--navy)!important;font-family:"Noto Serif JP",serif!important;font-size:14px!important;line-height:1!important;letter-spacing:.035em!important}
}

@media (max-width:820px){

  .logo{background-image:url('../img/logo.svg')!important;filter:none!important}

  .burger::after{background:linear-gradient(var(--navy),var(--navy)) center top / 23px 1px no-repeat,linear-gradient(var(--navy),var(--navy)) center / 23px 1px no-repeat,linear-gradient(var(--navy),var(--navy)) center bottom / 23px 1px no-repeat!important;opacity:.9!important}

  nav.open{background:rgba(255,255,255,.88)!important;border-bottom:1px solid rgba(33,26,60,.10)!important;box-shadow:0 15px 32px rgba(33,26,60,.09)!important;backdrop-filter:blur(18px) saturate(1.06)!important;-webkit-backdrop-filter:blur(18px) saturate(1.06)!important}

  nav.open>ul>li>a,nav.open .parent{color:var(--navy)!important;border-bottom-color:rgba(33,26,60,.15)!important;text-shadow:none!important}

  .mobile-nav-login{border-color:rgba(33,26,60,.52)!important;background:rgba(255,255,255,.50)!important;color:var(--navy)!important;font-family:"Noto Serif JP",serif!important}


  
  .panel .btn,#openLogin.mobile-login-dock,.mobile-nav-login{font-family:"Noto Serif JP",serif!important;font-size:14px!important;font-weight:400!important;letter-spacing:.035em!important}
  .panel .btn,.p3 .col-l>.btn,.p4 .col .btn,.p2>.btn{min-height:42px!important;height:42px!important;padding:0 15px!important;font-family:"Noto Serif JP",serif!important;font-size:14px!important;font-weight:400!important;letter-spacing:.035em!important}

  .panel .btn::after{font-size:17px!important;line-height:1!important;margin-left:5px!important}
  .p4 .col .btn{height:38px!important;min-height:38px!important;padding-left:14px!important;padding-right:14px!important}

  
  .p2{display:flex!important;flex-direction:column!important;align-items:stretch!important}
  .p2 .inner{flex:0 0 auto!important}
  .p2 .hair-compare{flex:0 0 auto!important}
  .p2>.btn{align-self:center!important;flex:0 0 auto!important;min-width:190px!important;margin:15px auto 0!important;background:var(--navy)!important;color:var(--paper)!important;border-color:var(--navy)!important}

  
  .p3{background-image:url('../img/product-water-stage.webp')!important;background-position:center!important;background-size:cover!important}
  .p3::after{background:linear-gradient(180deg,rgba(255,255,255,.23) 0%,rgba(255,255,255,.62) 41%,rgba(255,255,255,.91) 67%,rgba(255,255,255,.97) 100%)!important}
  .p3 .col-r::before{display:block!important;z-index:-1!important;width:142%!important;aspect-ratio:1!important;left:-21%!important;top:-4%!important;background:radial-gradient(circle,transparent 0 52%,rgba(223,241,253,.72) 52.5% 53.5%,transparent 54% 70%,rgba(255,255,255,.82) 70.5% 71.5%,transparent 72%)!important;opacity:1!important;transform:none!important;animation:none!important}

  
  .p1.is-active h1 .char,.p2.is-active h2 .char{animation:none!important}
  body.mobile-fv-animate .p1.is-active h1 .char{animation:character-water-reveal .62s cubic-bezier(.16,.78,.26,1) calc(.10s + var(--i)*.060s) both!important}
  body.mobile-fv-animate .p1.is-active .sub-copy{animation:mobile-copy-fade .72s cubic-bezier(.16,.78,.26,1) .72s both!important}
  body.mobile-fv-animate .p1.is-active .btn{animation:mobile-copy-fade .70s cubic-bezier(.16,.78,.26,1) 1.00s both!important}
  body.mobile-p2-animate .p2.is-active h2 .char{animation:character-water-reveal .58s cubic-bezier(.16,.78,.26,1) calc(.10s + var(--i)*.042s) both!important}
  body.mobile-p2-animate .p2.is-active .inner>p{animation:mobile-copy-fade .70s cubic-bezier(.16,.78,.26,1) .70s both!important}
  body.mobile-p2-animate .p2.is-active>.btn{animation:mobile-copy-fade .70s cubic-bezier(.16,.78,.26,1) .92s both!important}
}



@media (max-width:820px){

  nav.open{background:rgba(250,253,255,.91)!important;box-shadow:0 20px 38px rgba(33,26,60,.12)!important;backdrop-filter:blur(26px) saturate(1.12)!important;-webkit-backdrop-filter:blur(26px) saturate(1.12)!important}

  .mobile-nav-login{background:var(--navy)!important;border-color:var(--navy)!important;color:var(--paper)!important;box-shadow:0 7px 16px rgba(33,26,60,.13)!important}

  
  .p1 h1 .char{font-size:clamp(34px,9.3vw,38px)!important;line-height:1.34!important;letter-spacing:.035em!important}

  
  .p3{background-image:url('../img/product-water-soft.webp')!important;background-position:center!important;background-size:cover!important}
  .p3::after{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.87) 45%,rgba(255,255,255,.27) 71%,rgba(255,255,255,.02) 100%)!important}
  .p3 .col-r::before{display:none!important}

  
  body:not(.mobile-fv-animate) .p1.is-active .sub-copy,body:not(.mobile-fv-animate) .p1.is-active .btn{opacity:0!important;clip-path:inset(0 100% 0 0)!important;transform:translate3d(0,12px,0)!important;animation:none!important}
  body.mobile-fv-animate .p1.is-active .sub-copy{animation:mobile-copy-fade .72s cubic-bezier(.16,.78,.26,1) .78s both!important}
  body.mobile-fv-animate .p1.is-active .btn{animation:mobile-copy-fade .70s cubic-bezier(.16,.78,.26,1) 1.18s both!important}

  
  body:not(.mobile-p2-animate) .p2.is-active .inner>p,body:not(.mobile-p2-animate) .p2.is-active .hair-compare,body:not(.mobile-p2-animate) .p2.is-active>.btn{opacity:0!important;clip-path:inset(0 100% 0 0)!important;transform:translate3d(0,12px,0)!important;animation:none!important}
  body.mobile-p2-animate .p2.is-active .inner>p{animation:mobile-copy-fade .72s cubic-bezier(.16,.78,.26,1) .74s both!important}
  body.mobile-p2-animate .p2.is-active .hair-compare{animation:mobile-copy-fade .76s cubic-bezier(.16,.78,.26,1) 1.06s both!important}
  body.mobile-p2-animate .p2.is-active>.btn{animation:mobile-copy-fade .70s cubic-bezier(.16,.78,.26,1) 1.34s both!important}
}
@media (max-width:340px){
  .p1 h1 .char{font-size:34px!important;letter-spacing:.02em!important}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .p1.is-active .sub-copy,.p1.is-active .btn,.p2.is-active .inner>p,.p2.is-active .hair-compare,.p2.is-active>.btn{opacity:1!important;clip-path:none!important;transform:none!important;animation:none!important}
}
@media (max-width:820px){

  
  .burger::before{content:""!important;position:absolute!important;display:none!important;left:50%!important;top:50%!important;width:23px!important;height:1px!important;background:var(--navy)!important;transform:translate(-50%,-50%) rotate(-45deg)!important;opacity:.92!important}

  
  .p1 h1{margin-bottom:26px!important}
  .p1 h1 .char{font-size:clamp(34px,9.3vw,38px)!important;line-height:1.34!important}
  .p2 h2 .char{font-size:clamp(28px,7.4vw,31px)!important;line-height:1.42!important;letter-spacing:.028em!important}
  .p2 h2{width:100%!important;margin-left:auto!important;margin-right:auto!important;padding:0 8px!important;text-align:center!important}

  
  .p3{background-image:url('../img/product-water-soft.webp')!important;background-position:64% center!important;background-size:cover!important}
}



@media (max-width:820px){


  
  .mobile-menu-scrim{position:fixed!important;z-index:45!important;inset:var(--head-h) 0 0!important;background:rgba(23,19,43,.34)!important;opacity:0!important;pointer-events:none!important;transition:opacity .25s ease!important}

  body.mobile-menu-open .mobile-menu-scrim{opacity:1!important}

  
  body:not(.mobile-fv-animate) .p1::before{opacity:0!important;transform:translate3d(0,24px,0) scale(.975)!important;animation:none!important}
  body.mobile-fv-animate .p1::before{animation:mobile-fv-product-arrival .86s cubic-bezier(.16,.78,.26,1) .64s both!important}
  @keyframes mobile-fv-product-arrival{0%{opacity:0;transform:translate3d(0,24px,0) scale(.975)}100%{opacity:1;transform:none}}

  
  .p3{background-image:url('../img/product-water-mobile-centred.webp')!important;background-position:center!important;background-size:cover!important}
  
  .p3::after{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.74) 19%,rgba(255,255,255,.24) 38%,rgba(255,255,255,.12) 48%,rgba(255,255,255,.48) 63%,rgba(255,255,255,.86) 80%,rgba(255,255,255,.94) 100%)!important}
  .p3 .col-r{height:296px!important}
  .p3 .col-r::after{background-size:auto 108%!important}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .p1::before{opacity:1!important;transform:none!important;animation:none!important}
}









.site-loader{background:linear-gradient(145deg,#ffffff 0%,#f8fdff 48%,#e8f7fc 100%)!important}
.site-loader::before,.site-loader__logo::before{display:none!important}
.site-loader__logo{isolation:isolate!important;filter:none!important;will-change:auto!important}


.p1 .ph-full{background-image:url('../img/concept-hair-water.webp')!important;background-position:center!important;background-size:cover!important}
.p1::before,.p3 .col-r::after{background-image:url('../img/bottles-product-revised.webp')!important;background-position:center bottom!important;background-size:contain!important}
@media (max-width:820px){
  .p1 .ph-full{background-image:url('../img/concept-hair-water.webp')!important;background-position:61% center!important}
}


.p3{position:relative;isolation:isolate;background:#eff6fe!important;background-image:none!important}
.p3::after{display:none!important}
.p3 .col-l{position:relative!important;z-index:7!important;transition:none!important}
.p3 .col-r{transition:none!important}
.p3 .col-l.reveal,.p3 .col-r.reveal{opacity:1!important;transform:none!important}
.p3.is-active .col-r::after{animation:none!important}
.p3 .brand-s,.p3 .prod-l,.p3 h2,.p3 .lead,.p3 .price,.p3 .col-l>.btn{z-index:7!important}
.p3 .col-r{z-index:8!important}
.p3 .num{z-index:9!important}
.product-webgl-water{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:layout paint style;opacity:0}
.p3.has-webgl-water .product-webgl-water{opacity:1}
.product-webgl-water canvas{display:block;width:100%;height:100%;pointer-events:none}
@media (max-width:820px){
  .p3{background-image:none!important}
}
@media (prefers-reduced-motion:reduce){
  .product-webgl-water{transition:none!important}
}


@media (min-width:821px){
  
  .hair-compare{right:clamp(64px,5.4vw,110px)!important;width:min(45vw,680px)!important}
  @media (min-width:1440px){
    .hair-compare{right:clamp(96px,7vw,144px)!important;width:min(45vw,680px)!important}
}

  
  .p3 .prod-l .char,.p4 h2 .char,.p5 h2 .char{display:inline-block;opacity:0;transform:translate3d(0,26px,0) rotate(3deg);filter:blur(6px);will-change:transform,opacity,filter}
  .p3 .brand-s,.p3 h2,.p3 .lead,.p3 .price,.p3 .col-l>.btn,
  .p4 .col h3,.p4 .col p,.p4 .col .btn,
  .p5 .body,.p5 table,.p5 .foot-bottom{opacity:0;clip-path:inset(0 100% 0 0);transform:translate3d(0,18px,0);will-change:transform,opacity,clip-path}
  .p3.is-active .prod-l .char{animation:character-water-reveal .60s cubic-bezier(.16,.78,.26,1) calc(.12s + var(--i)*.040s) both}
  .p3.is-active .brand-s{animation:content-water-reveal .66s cubic-bezier(.16,.78,.26,1) .08s both}
  .p3.is-active h2{animation:content-water-reveal .74s cubic-bezier(.16,.78,.26,1) .64s both}
  .p3.is-active .lead{animation:content-water-reveal .72s cubic-bezier(.16,.78,.26,1) .82s both}
  .p3.is-active .price{animation:content-water-reveal .68s cubic-bezier(.16,.78,.26,1) .98s both}
  .p3.is-active .col-l>.btn{animation:content-water-reveal .66s cubic-bezier(.16,.78,.26,1) 1.12s both}

  
  .p4.is-active h2 .char{animation:character-water-reveal .60s cubic-bezier(.16,.78,.26,1) calc(.10s + var(--i)*.046s) both}
  .p4.is-active .col:nth-child(1) h3{animation:content-water-reveal .62s cubic-bezier(.16,.78,.26,1) .38s both}
  .p4.is-active .col:nth-child(1) p{animation:content-water-reveal .62s cubic-bezier(.16,.78,.26,1) .48s both}
  .p4.is-active .col:nth-child(1) .btn{animation:content-water-reveal .62s cubic-bezier(.16,.78,.26,1) .58s both}
  .p4.is-active .col:nth-child(2) h3{animation:content-water-reveal .62s cubic-bezier(.16,.78,.26,1) .52s both}
  .p4.is-active .col:nth-child(2) p{animation:content-water-reveal .62s cubic-bezier(.16,.78,.26,1) .62s both}
  .p4.is-active .col:nth-child(2) .btn{animation:content-water-reveal .62s cubic-bezier(.16,.78,.26,1) .72s both}
  .p4.is-active .col:nth-child(3) h3{animation:content-water-reveal .62s cubic-bezier(.16,.78,.26,1) .66s both}
  .p4.is-active .col:nth-child(3) p{animation:content-water-reveal .62s cubic-bezier(.16,.78,.26,1) .76s both}
  .p4.is-active .col:nth-child(3) .btn{animation:content-water-reveal .62s cubic-bezier(.16,.78,.26,1) .86s both}

  
  .p5.is-active h2 .char{animation:character-water-reveal .58s cubic-bezier(.16,.78,.26,1) calc(.10s + var(--i)*.034s) both}
  .p5.is-active .body{animation:content-water-reveal .72s cubic-bezier(.16,.78,.26,1) .58s both}
  .p5.is-active table{animation:content-water-reveal .72s cubic-bezier(.16,.78,.26,1) .78s both}
  .p5.is-active .foot-bottom{animation:content-water-reveal .68s cubic-bezier(.16,.78,.26,1) .96s both}
}

@keyframes content-water-reveal{
  0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translate3d(0,18px,0)}
  65%{opacity:1;clip-path:inset(0 0 0 0);transform:translate3d(0,-2px,0)}
  100%{opacity:1;clip-path:inset(0 0 0 0);transform:none}
}


@media (max-width:820px){
  .p3 .prod-l .char,.p4 h2 .char,.p5 h2 .char{display:inline-block;opacity:0;transform:translate3d(0,18px,0) rotate(2deg);filter:blur(4px);will-change:transform,opacity,filter}
  .p3 .brand-s,.p3 h2,.p3 .lead,.p3 .price,.p3 .col-l>.btn,
  .p4 .col h3,.p4 .col p,.p4 .col .btn,
  .p5 .body,.p5 table,.p5 .foot-bottom{opacity:0;clip-path:inset(0 100% 0 0);transform:translate3d(0,12px,0);will-change:transform,opacity,clip-path}
  .p3.is-content-revealed .prod-l .char{animation:character-water-reveal .54s cubic-bezier(.16,.78,.26,1) calc(.08s + var(--i)*.035s) both}
  .p3.is-content-revealed .brand-s{animation:mobile-copy-fade .62s cubic-bezier(.16,.78,.26,1) .08s both}
  .p3.is-content-revealed h2{animation:mobile-copy-fade .66s cubic-bezier(.16,.78,.26,1) .50s both}
  .p3.is-content-revealed .lead{animation:mobile-copy-fade .64s cubic-bezier(.16,.78,.26,1) .66s both}
  .p3.is-content-revealed .price{animation:mobile-copy-fade .62s cubic-bezier(.16,.78,.26,1) .82s both}
  .p3.is-content-revealed .col-l>.btn{animation:mobile-copy-fade .62s cubic-bezier(.16,.78,.26,1) .96s both}
  .p4.is-content-revealed h2 .char{animation:character-water-reveal .54s cubic-bezier(.16,.78,.26,1) calc(.08s + var(--i)*.040s) both}
  .p4.is-content-revealed .col:nth-child(1) h3{animation:mobile-copy-fade .58s cubic-bezier(.16,.78,.26,1) .36s both}
  .p4.is-content-revealed .col:nth-child(1) p{animation:mobile-copy-fade .58s cubic-bezier(.16,.78,.26,1) .44s both}
  .p4.is-content-revealed .col:nth-child(1) .btn{animation:mobile-copy-fade .58s cubic-bezier(.16,.78,.26,1) .52s both}
  .p4.is-content-revealed .col:nth-child(2) h3{animation:mobile-copy-fade .58s cubic-bezier(.16,.78,.26,1) .56s both}
  .p4.is-content-revealed .col:nth-child(2) p{animation:mobile-copy-fade .58s cubic-bezier(.16,.78,.26,1) .64s both}
  .p4.is-content-revealed .col:nth-child(2) .btn{animation:mobile-copy-fade .58s cubic-bezier(.16,.78,.26,1) .72s both}
  .p4.is-content-revealed .col:nth-child(3) h3{animation:mobile-copy-fade .58s cubic-bezier(.16,.78,.26,1) .76s both}
  .p4.is-content-revealed .col:nth-child(3) p{animation:mobile-copy-fade .58s cubic-bezier(.16,.78,.26,1) .84s both}
  .p4.is-content-revealed .col:nth-child(3) .btn{animation:mobile-copy-fade .58s cubic-bezier(.16,.78,.26,1) .92s both}
  .p5.is-content-revealed h2 .char{animation:character-water-reveal .52s cubic-bezier(.16,.78,.26,1) calc(.08s + var(--i)*.030s) both}
  .p5.is-content-revealed .body{animation:mobile-copy-fade .66s cubic-bezier(.16,.78,.26,1) .44s both}
  .p5.is-content-revealed table{animation:mobile-copy-fade .66s cubic-bezier(.16,.78,.26,1) .64s both}
  .p5.is-content-revealed .foot-bottom{animation:mobile-copy-fade .64s cubic-bezier(.16,.78,.26,1) .82s both}
}
@media (prefers-reduced-motion:reduce){
  .p3 .prod-l .char,.p4 h2 .char,.p5 h2 .char,
  .p3 .brand-s,.p3 h2,.p3 .lead,.p3 .price,.p3 .col-l>.btn,
  .p4 .col h3,.p4 .col p,.p4 .col .btn,
  .p5 .body,.p5 table,.p5 .foot-bottom{opacity:1!important;clip-path:none!important;transform:none!important;filter:none!important;animation:none!important}
}


@media (min-width:821px){
  body:not(.fv-copy-animate) .p1.is-active h1 .char{opacity:0!important;transform:translate3d(0,32px,0) rotate(4deg)!important;filter:blur(7px)!important;animation:none!important}
  body:not(.fv-copy-animate) .p1.is-active .sub-copy,
  body:not(.fv-copy-animate) .p1.is-active .btn{opacity:0!important;clip-path:inset(0 100% 0 0)!important;transform:translate3d(0,26px,0)!important;animation:none!important}
}


@media (min-width:821px){
  .p1 .inner::before{transform-origin:50% 0}
  body:not(.fv-copy-animate) .p1 .inner::before{opacity:0!important;transform:translate3d(0,10px,0) scaleY(.08)!important;animation:none!important}
  body.fv-copy-animate .p1 .inner::before{animation:fv-rule-reveal .68s cubic-bezier(.16,.78,.26,1) .14s both!important}
  .p3 .col-r::after{transform:translate3d(0,0,0) scale(1.16)!important;transform-origin:50% 100%!important}
}
@media (max-width:820px){
  .p3 .col-r::after{background-size:auto 116%!important}
}
@keyframes fv-rule-reveal{
  0%{opacity:0;transform:translate3d(0,10px,0) scaleY(.08)}
  100%{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .p1 .inner::before{opacity:1!important;transform:none!important;animation:none!important}
}




@media (min-width:821px){
  body:not(.fv-copy-animate) .p1 .ph-full,
  body:not(.fv-copy-animate) .p1::before{opacity:0!important;animation:none!important}
  body:not(.fv-copy-animate) .p1 .ph-full{transform:scale(1.025)!important}
  body:not(.fv-copy-animate) .p1::before{transform:translate3d(0,30px,0) scale(.965)!important}
  body.fv-copy-animate .p1 .ph-full{animation:fv-photo-arrival 1.12s cubic-bezier(.16,.78,.26,1) .02s both!important}
  body.fv-copy-animate .p1::before{animation:fv-product-arrival 1.02s cubic-bezier(.16,.78,.26,1) .36s both!important}
}
@media (max-width:820px){
  body:not(.mobile-fv-animate) .p1 .ph-full{opacity:0!important;transform:scale(1.025)!important;animation:none!important}
  body.mobile-fv-animate .p1 .ph-full{animation:fv-photo-arrival .96s cubic-bezier(.16,.78,.26,1) .04s both!important}
}
@keyframes fv-photo-arrival{
  0%{opacity:0;transform:scale(1.025)}
  100%{opacity:1;transform:none}
}
@keyframes fv-product-arrival{
  0%{opacity:0;transform:translate3d(0,30px,0) scale(.965)}
  100%{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  body:not(.fv-copy-animate) .p1 .ph-full,body:not(.fv-copy-animate) .p1::before,
  body:not(.mobile-fv-animate) .p1 .ph-full,body .p1::before{opacity:1!important;transform:none!important;animation:none!important}
}


.p4{isolation:isolate!important}
.p4>.num,.p4>h2,.p4>.cols{position:relative!important;z-index:6!important}
.purchase-water-scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:layout paint style}
.purchase-water-bg{position:absolute;inset:-4%;background:url('../img/hero-water-soft.webp') center/cover no-repeat;transform:translate3d(-.8%,.4%,0) scale(1.035);transform-origin:74% 48%;opacity:.92;will-change:transform;animation:purchase-v5-bg-drift 18s cubic-bezier(.42,0,.28,1) infinite alternate;animation-play-state:paused}
.p4.is-active .purchase-water-bg{animation-play-state:running}
.purchase-water-light{position:absolute;inset:-7%;z-index:1;opacity:0;mix-blend-mode:screen;background:radial-gradient(ellipse at 18% 63%,rgba(255,255,255,.30) 0 8%,rgba(255,255,255,.07) 25%,transparent 47%),radial-gradient(ellipse at 51% 16%,rgba(232,249,255,.27) 0 7%,rgba(255,255,255,.05) 28%,transparent 49%);filter:blur(14px);transform:translate3d(-2%,1%,0) scale(1.02);will-change:opacity,transform}
.p4.is-active .purchase-water-light{animation:purchase-v5-light-in .65s ease-out .04s both,purchase-v5-light-drift 11s ease-in-out .75s infinite alternate}
.purchase-water-glint{position:absolute;z-index:2;right:-18%;top:-20%;width:62%;height:145%;opacity:0;mix-blend-mode:screen;background:linear-gradient(112deg,transparent 31%,rgba(255,255,255,.02) 39%,rgba(255,255,255,.20) 48%,rgba(226,247,255,.08) 54%,transparent 63%);filter:blur(22px);transform:translate3d(14%,0,0) rotate(-7deg);will-change:opacity,transform}
.p4.is-active .purchase-water-glint{animation:purchase-v5-glint-in .8s ease-out .10s both,purchase-v5-glint-sweep 13s ease-in-out .9s infinite alternate}
.purchase-water-scrim{position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,rgba(255,255,255,.965) 0%,rgba(247,252,255,.91) 22%,rgba(239,248,253,.73) 49%,rgba(239,248,253,.28) 68%,rgba(255,255,255,.035) 100%)}
.purchase-droplet-layer{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}
.purchase-drop-slot{position:absolute;left:var(--drop-x);top:var(--drop-y);width:var(--drop-w);opacity:1;filter:none;transform:none;transform-origin:center;will-change:transform}
.purchase-drop{display:block;width:100%;height:auto;opacity:var(--drop-opacity);filter:saturate(.92) brightness(1.06) drop-shadow(0 7px 14px rgba(81,157,198,.10));transform-origin:center;will-change:transform;animation:purchase-v5-drop-float var(--drop-duration) ease-in-out var(--drop-phase,0s) infinite alternate;animation-play-state:running}
@keyframes purchase-v5-drop-float{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}45%{transform:translate3d(calc(var(--drop-dx)*-.35),calc(var(--drop-dy)*.42),0) rotate(calc(var(--drop-rot)*-.45)) scale(1.012)}100%{transform:translate3d(var(--drop-dx),var(--drop-dy),0) rotate(var(--drop-rot)) scale(.992)}}
@keyframes purchase-v5-bg-drift{0%{transform:translate3d(-.8%,.4%,0) scale(1.035)}50%{transform:translate3d(.35%,-.28%,0) scale(1.049)}100%{transform:translate3d(-.25%,.18%,0) scale(1.039)}}
@keyframes purchase-v5-light-in{from{opacity:0}to{opacity:.72}}
@keyframes purchase-v5-light-drift{0%{transform:translate3d(-2%,1%,0) scale(1.02)}100%{transform:translate3d(1.5%,-1.1%,0) scale(1.08)}}
@keyframes purchase-v5-glint-in{from{opacity:0;transform:translate3d(14%,0,0) rotate(-7deg)}to{opacity:.48;transform:translate3d(5%,0,0) rotate(-7deg)}}
@keyframes purchase-v5-glint-sweep{0%{transform:translate3d(5%,0,0) rotate(-7deg)}100%{transform:translate3d(-6%,1%,0) rotate(-4deg)}}
@media(max-width:820px){.purchase-water-bg{background-position:63% center;animation-duration:22s}.purchase-water-scrim{background:linear-gradient(180deg,rgba(255,255,255,.70) 0%,rgba(247,252,255,.44) 34%,rgba(239,248,253,.22) 68%,rgba(255,255,255,.12) 100%)}.purchase-drop-slot{width:min(var(--drop-w),34vw)}.purchase-drop-slot--desktop-only{display:none}
}
@media(prefers-reduced-motion:reduce){.purchase-water-bg,.purchase-water-light,.purchase-water-glint,.purchase-drop,.purchase-drop-slot{animation:none!important;transform:none!important;filter:none!important}.purchase-water-light{opacity:.28!important}.purchase-water-glint{opacity:.18!important}.purchase-drop-slot{opacity:.78!important}
}





.p5{position:relative;overflow:hidden;isolation:isolate}
.p5 .ph-full{display:none!important}
.p5::after{background:none!important}
.p5 .inner{position:relative;z-index:20}
.wack-ambient-scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#f7fbff;contain:layout paint style}
.wack-bg-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center center;filter:brightness(1.10) contrast(.90) saturate(.90);transform:translateZ(0);backface-visibility:hidden}
.wack-ambient-scene::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(255,255,255,.045);pointer-events:none}
.wack-ambient-scene::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.02) 36%,rgba(255,255,255,.20) 52%,rgba(255,255,255,.66) 68%,rgba(255,255,255,.93) 100%);pointer-events:none}


.p5 .inner{background:transparent!important;border-top:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;isolation:isolate}
.p5 .inner::before{content:"";position:absolute;z-index:-1;inset:-34px -48px -38px -52px;pointer-events:none;background:radial-gradient(ellipse at 61% 48%,rgba(255,255,255,.50) 0%,rgba(255,255,255,.34) 40%,rgba(255,255,255,.17) 64%,rgba(255,255,255,.06) 75%,rgba(255,255,255,0) 86%);filter:blur(5px)}
.p5 table{background:rgba(255,255,255,.08);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
@media(max-width:820px){
  .wack-bg-video{object-position:36% center;filter:brightness(1.10) contrast(.91) saturate(.90)}
  .wack-ambient-scene::after{background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.10) 42%,rgba(255,255,255,.62) 78%,rgba(255,255,255,.90) 100%)}
}
@media(max-width:820px){
  .p5 .inner::before{inset:-22px -18px -26px;background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.48) 0%,rgba(255,255,255,.30) 48%,rgba(255,255,255,.10) 72%,rgba(255,255,255,0) 88%);filter:blur(4px)}
  .p5 table{background:rgba(255,255,255,.42)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
}
@media(prefers-reduced-motion:reduce){.wack-bg-video{display:none}.wack-ambient-scene{background:#f7fbff url('../img/wack-bg-poster.webp') center center / cover no-repeat}
}








.p2{position:relative!important;overflow:hidden!important;isolation:isolate!important;background:#f7fcff!important}
.p2 .ph-full{display:none!important}
.p2::after{content:""!important;position:absolute!important;inset:0!important;z-index:2!important;pointer-events:none!important;background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.88) 28%,rgba(255,255,255,.56) 49%,rgba(250,253,255,.16) 72%,rgba(255,255,255,.04) 100%)!important}


.concept-water-bg{position:absolute;z-index:0;inset:-3%;pointer-events:none;background:url('../img/hero-water-soft.webp') 58% 52% / cover no-repeat;opacity:.92;filter:saturate(.86) brightness(1.08) contrast(.88);transform:scale(1.025);will-change:transform;animation:concept-v26-bg-breathe 18s ease-in-out infinite alternate}

.concept-water-bg::before{content:"";position:absolute;inset:38% -4% -8%;background:url('../img/real-water-surface-motion.webp') 50% 72% / cover no-repeat;opacity:.60;mix-blend-mode:screen;filter:saturate(.84) brightness(1.07) contrast(.88);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.25) 14%,#000 44%,#000 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.25) 14%,#000 44%,#000 100%);transform:scale(1.04);animation:concept-v26-caustic 14s ease-in-out infinite alternate}

.concept-water-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 36%,rgba(255,255,255,.78) 0 4%,transparent 13%),radial-gradient(circle at 77% 16%,rgba(255,255,255,.62) 0 3%,transparent 15%),radial-gradient(circle at 92% 70%,rgba(213,240,253,.34) 0 5%,transparent 19%),linear-gradient(120deg,rgba(255,255,255,.34),transparent 40%,rgba(225,245,254,.14) 72%,rgba(255,255,255,.24));mix-blend-mode:screen;opacity:.95}

.p2 .inner{z-index:5!important}
.hair-compare{z-index:5!important}
.hair-compare::before{content:"";position:absolute;z-index:-1;inset:-10% -6% -9%;pointer-events:none;background:radial-gradient(ellipse at 48% 48%,rgba(255,255,255,.52) 0%,rgba(234,248,254,.23) 48%,rgba(255,255,255,0) 78%);filter:blur(24px);opacity:.72}
.hair-compare__block{position:relative!important;isolation:isolate!important;overflow:hidden!important;border-radius:28px!important;background:linear-gradient(145deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,.24) 52%,rgba(232,247,254,.20) 100%)!important;border:1px solid rgba(255,255,255,.78)!important;box-shadow:0 24px 66px rgba(35,73,99,.065),inset 0 1px 0 rgba(255,255,255,.94),inset 0 -1px 0 rgba(178,220,241,.30)!important;backdrop-filter:blur(17px) saturate(1.08)!important;-webkit-backdrop-filter:blur(17px) saturate(1.08)!important}
.hair-compare__block::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:linear-gradient(128deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.08) 24%,transparent 48%,rgba(221,243,253,.10) 72%,rgba(255,255,255,.28) 100%);opacity:.72}
.hair-compare__block::after{content:"";position:absolute;z-index:0;top:-34%;left:-72%;width:64%;height:170%;pointer-events:none;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.10) 29%,rgba(255,255,255,.70) 50%,rgba(255,255,255,.10) 71%,transparent 100%);transform:rotate(9deg);opacity:0}
.hair-compare__block>*{position:relative;z-index:1}
.hair-compare__block h3{font-weight:500!important;letter-spacing:.065em!important;text-shadow:0 1px 16px rgba(255,255,255,.86)}
.hair-compare__art{border-radius:20px;overflow:visible}
.hair-compare__art::before{content:"";position:absolute;z-index:0;inset:8% 2% 7%;border-radius:50%;background:radial-gradient(ellipse at 50% 52%,rgba(255,255,255,.66) 0%,rgba(226,245,253,.24) 50%,rgba(255,255,255,0) 75%);filter:blur(14px);opacity:.74}
.hair-compare__art img{filter:drop-shadow(0 13px 23px rgba(39,77,100,.09)) saturate(.95) brightness(1.03)}
.hair-compare__label{font-weight:500!important;text-shadow:0 1px 9px rgba(255,255,255,.98)}
.hair-compare__label::after{opacity:.46!important;background:rgba(33,26,60,.72)!important}
.hair-compare__band{border:1px solid rgba(255,255,255,.60)!important;border-radius:14px!important;background:linear-gradient(90deg,rgba(221,243,253,.48),rgba(255,255,255,.38))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.78)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important}
.hair-compare__arrow{filter:drop-shadow(0 4px 10px rgba(33,26,60,.09))}
.hair-compare figcaption{padding:12px 20px 0;border-top:1px solid rgba(255,255,255,.58);text-shadow:0 1px 12px rgba(255,255,255,.90)}
.p2.is-active .hair-compare__block--conventional{animation:concept-glass-card-in .95s cubic-bezier(.16,.78,.26,1) .10s both!important}
.p2.is-active .hair-compare__arrow{animation:concept-arrow-in .70s ease-out .38s both!important}
.p2.is-active .hair-compare__block--aqua{animation:concept-glass-card-in .95s cubic-bezier(.16,.78,.26,1) .28s both!important}
.p2.is-active .hair-compare figcaption{animation:concept-caption-in .72s ease-out .56s both!important}
.p2.is-active .hair-compare__block::after{animation:concept-card-sheen 8.2s ease-in-out 1.2s infinite}
.p2.is-active .hair-compare__block--aqua::after{animation-delay:2.1s}


.concept-water-drops{position:absolute;z-index:7;inset:0;overflow:hidden;pointer-events:none}
.concept-orb{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.92) 0 4%,rgba(255,255,255,.16) 12%,rgba(208,238,253,.16) 42%,rgba(120,195,231,.12) 59%,rgba(255,255,255,.35) 67%,rgba(255,255,255,.04) 72%,transparent 75%),radial-gradient(circle at 67% 72%,rgba(96,180,224,.14),transparent 48%);border:1px solid rgba(255,255,255,.74);box-shadow:inset 13px 14px 28px rgba(255,255,255,.40),inset -18px -22px 38px rgba(76,164,211,.10),0 16px 50px rgba(93,173,211,.08);backdrop-filter:blur(3.5px) saturate(1.08);-webkit-backdrop-filter:blur(3.5px) saturate(1.08);filter:blur(.35px);opacity:.63;will-change:transform}
.concept-orb::after{content:"";position:absolute;left:18%;top:13%;width:26%;height:12%;border-radius:50%;background:rgba(255,255,255,.86);filter:blur(7px);transform:rotate(-27deg);opacity:.72}
.concept-orb--left{left:-9vw;bottom:-15vh;width:clamp(330px,31vw,560px);aspect-ratio:1;animation:concept-orb-left 11.5s ease-in-out -2.1s infinite alternate}
.concept-orb--right{right:-7vw;top:-14vh;width:clamp(270px,25vw,455px);aspect-ratio:1;opacity:.55;animation:concept-orb-right 13.8s ease-in-out -4.6s infinite alternate}
.concept-drop{position:absolute;display:block;height:auto;opacity:.68;filter:saturate(.90) brightness(1.10) drop-shadow(0 9px 18px rgba(73,144,182,.08));will-change:transform;transform-origin:center}
.concept-drop--left{left:-2.5%;bottom:2%;width:clamp(180px,15vw,275px);opacity:.53;filter:blur(.35px) saturate(.86) brightness(1.13) drop-shadow(0 11px 20px rgba(73,144,182,.08));animation:concept-drop-a 10.6s ease-in-out -2.2s infinite alternate}
.concept-drop--upper{left:46%;top:6%;width:clamp(125px,9vw,170px);opacity:.48;animation:concept-drop-b 8.8s ease-in-out -4.1s infinite alternate}
.concept-drop--right{right:1.5%;top:23%;width:clamp(170px,13vw,235px);opacity:.70;animation:concept-drop-c 11.8s ease-in-out -3.6s infinite alternate}
.concept-drop--mid{right:5%;bottom:6%;width:clamp(125px,9vw,180px);opacity:.50;animation:concept-drop-d 9.5s ease-in-out -1.4s infinite alternate}

@keyframes concept-v26-bg-breathe{0%{transform:translate3d(-.25%,.15%,0) scale(1.025)}50%{transform:translate3d(.10%,-.18%,0) scale(1.032)}100%{transform:translate3d(.28%,.12%,0) scale(1.028)}}
@keyframes concept-v26-caustic{0%{transform:translate3d(-.22%,.12%,0) scale(1.04);opacity:.52}50%{transform:translate3d(.15%,-.12%,0) scale(1.05);opacity:.64}100%{transform:translate3d(.20%,.10%,0) scale(1.045);opacity:.56}}
@keyframes concept-glass-card-in{0%{opacity:0;transform:translate3d(0,28px,0) scale(.972);filter:blur(8px)}62%{opacity:1;transform:translate3d(0,-3px,0) scale(1.003);filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes concept-arrow-in{0%{opacity:0;transform:translate3d(-10px,0,0)}100%{opacity:1;transform:none}}
@keyframes concept-caption-in{0%{opacity:0;transform:translate3d(0,10px,0)}100%{opacity:1;transform:none}}
@keyframes concept-card-sheen{0%,58%{left:-72%;opacity:0}64%{opacity:.44}78%{left:120%;opacity:0}100%{left:120%;opacity:0}}
@keyframes concept-orb-left{0%{transform:translate3d(-8px,7px,0) scale(.985)}100%{transform:translate3d(9px,-9px,0) scale(1.018)}}
@keyframes concept-orb-right{0%{transform:translate3d(7px,-5px,0) scale(1.01)}100%{transform:translate3d(-9px,10px,0) scale(.985)}}
@keyframes concept-drop-a{0%{transform:translate3d(-4px,7px,0) rotate(-1deg) scale(.99)}100%{transform:translate3d(7px,-9px,0) rotate(1.2deg) scale(1.018)}}
@keyframes concept-drop-b{0%{transform:translate3d(0,7px,0) rotate(.8deg)}100%{transform:translate3d(8px,-7px,0) rotate(-1deg)}}
@keyframes concept-drop-c{0%{transform:translate3d(7px,-3px,0) rotate(-.7deg) scale(1.01)}100%{transform:translate3d(-8px,9px,0) rotate(1deg) scale(.99)}}
@keyframes concept-drop-d{0%{transform:translate3d(-4px,5px,0) rotate(.6deg)}100%{transform:translate3d(6px,-8px,0) rotate(-.9deg)}}

@media(max-width:820px){
  .p2{background:#f7fcff!important}
  .p2::after{background:linear-gradient(180deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.71) 44%,rgba(243,250,254,.30) 100%)!important}
  .concept-water-bg{inset:-2%;background-position:56% 55%;opacity:.78;filter:saturate(.82) brightness(1.10) contrast(.89);animation-duration:22s}
  .concept-water-bg::before{inset:52% -8% -4%;opacity:.48}
  .hair-compare::before{inset:-4% -3% -3%;filter:blur(16px);opacity:.68}
  .hair-compare__block{border-radius:18px!important;background:linear-gradient(145deg,rgba(255,255,255,.56),rgba(255,255,255,.31))!important;backdrop-filter:blur(12px) saturate(1.06)!important;-webkit-backdrop-filter:blur(12px) saturate(1.06)!important;box-shadow:0 14px 36px rgba(33,26,60,.055),inset 0 1px 0 rgba(255,255,255,.90)!important}
  .hair-compare__band{border-radius:10px!important}
  .concept-orb--left{left:-40vw;bottom:-3vh;width:330px;opacity:.34}
  .concept-orb--right{right:-35vw;top:12vh;width:300px;opacity:.31}
  .concept-drop--left{left:-18%;bottom:0;width:210px;opacity:.30}
  .concept-drop--upper{left:72%;top:13%;width:100px;opacity:.26}
  .concept-drop--right{right:-13%;top:43%;width:170px;opacity:.36}
  .concept-drop--mid{display:none}
}
@media(prefers-reduced-motion:reduce){
  .concept-water-bg,.concept-water-bg::before,.concept-orb,.concept-drop,.hair-compare__block::after{animation:none!important;transform:none!important}
}




@media (min-width:821px){
  .p2{background:#dff3fb!important}
  .p2::after{
    z-index:2!important;
    background:linear-gradient(90deg,
      rgba(255,255,255,.78) 0%,
      rgba(255,255,255,.64) 25%,
      rgba(250,254,255,.38) 43%,
      rgba(237,249,254,.12) 61%,
      rgba(226,245,253,.03) 100%)!important;
  }
  .concept-water-bg{
    inset:-2.5%!important;
    background-image:url('../img/hero-water-soft.webp')!important;
    background-position:54% 51%!important;
    background-size:cover!important;
    opacity:1!important;
    filter:saturate(.99) brightness(.95) contrast(1.01)!important;
    transform:scale(1.02)!important;
    animation:concept-v27-water-breathe 17s ease-in-out infinite alternate!important;
  }
  .concept-water-bg::before{
    inset:43% -4% -7%!important;
    background:url('../img/real-water-surface-motion.webp') 52% 68% / cover no-repeat!important;
    opacity:.54!important;
    mix-blend-mode:normal!important;
    filter:saturate(.96) brightness(.97) contrast(1.01)!important;
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.16) 9%,rgba(0,0,0,.78) 34%,#000 58%,#000 100%)!important;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.16) 9%,rgba(0,0,0,.78) 34%,#000 58%,#000 100%)!important;
    animation:concept-v27-caustic-drift 13s ease-in-out infinite alternate!important;
  }
  .concept-water-bg::after{
    background:
      radial-gradient(circle at 7% 34%,rgba(255,255,255,.34) 0 3%,transparent 11%),
      radial-gradient(circle at 68% 14%,rgba(255,255,255,.28) 0 2%,transparent 11%),
      radial-gradient(circle at 91% 64%,rgba(190,230,247,.28) 0 5%,transparent 18%),
      linear-gradient(118deg,rgba(185,225,244,.16) 0%,transparent 36%,rgba(215,240,251,.08) 63%,rgba(255,255,255,.12) 100%)!important;
    mix-blend-mode:normal!important;
    opacity:.82!important;
  }

  
  .p2 .inner{
    width:min(31vw,500px)!important;
    margin-left:clamp(3.5vw,5.4vw,88px)!important;
    z-index:6!important;
  }
  .p2 .inner::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-18% -24% -20% -18%;
    border-radius:46%;
    background:radial-gradient(ellipse at 44% 48%,rgba(255,255,255,.55) 0%,rgba(255,255,255,.31) 48%,rgba(255,255,255,0) 76%);
    filter:blur(18px);
    pointer-events:none;
  }

  
  .hair-compare{
    top:50%!important;
    right:clamp(28px,3.4vw,66px)!important;
    width:min(55vw,920px)!important;
    transform:translateY(-45%)!important;
  }
  .hair-compare::before{
    inset:-8% -4% -8%!important;
    background:radial-gradient(ellipse at 50% 52%,rgba(233,248,255,.24) 0%,rgba(231,247,254,.12) 50%,rgba(255,255,255,0) 78%)!important;
    filter:blur(26px)!important;
    opacity:.76!important;
  }
  .hair-compare__blocks{
    grid-template-columns:minmax(0,1fr) clamp(42px,3.7vw,58px) minmax(0,1.04fr)!important;
    gap:clamp(12px,1.25vw,20px)!important;
  }
  .hair-compare__block{
    min-height:clamp(430px,58vh,555px)!important;
    padding:clamp(22px,2vw,31px) clamp(18px,1.75vw,27px) clamp(17px,1.7vw,24px)!important;
    border-radius:34px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.62) 0%,rgba(248,253,255,.47) 55%,rgba(224,244,253,.39) 100%)!important;
    border:1px solid rgba(255,255,255,.88)!important;
    box-shadow:
      0 24px 58px rgba(55,119,154,.10),
      inset 0 1px 0 rgba(255,255,255,.96),
      inset 0 -1px 0 rgba(137,204,235,.24)!important;
    backdrop-filter:blur(15px) saturate(1.10)!important;
    -webkit-backdrop-filter:blur(15px) saturate(1.10)!important;
  }
  .hair-compare__block--conventional{transform:translate3d(0,-8px,0)}
  .hair-compare__block--aqua{transform:translate3d(0,8px,0)}
  .hair-compare__block::before{
    background:linear-gradient(128deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 22%,transparent 48%,rgba(206,238,252,.08) 74%,rgba(255,255,255,.22) 100%)!important;
    opacity:.62!important;
  }
  .hair-compare__block h3{font-size:clamp(21px,1.65vw,27px)!important}
  .hair-compare__art{min-height:clamp(310px,36vh,355px)!important;margin:clamp(10px,1.2vh,16px) 0!important}
  .hair-compare__art img{height:min(34vh,350px)!important;filter:drop-shadow(0 14px 24px rgba(39,77,100,.10)) saturate(.96) brightness(1.02)!important}
  .hair-compare__band{
    min-height:58px!important;
    border-radius:18px!important;
    background:linear-gradient(90deg,rgba(216,241,252,.64),rgba(250,254,255,.58))!important;
    border:1px solid rgba(255,255,255,.72)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 7px 20px rgba(89,157,191,.045)!important;
  }
  .hair-compare__arrow{font-size:clamp(38px,3vw,50px)!important}
  .hair-compare figcaption{margin-top:18px!important;padding-top:12px!important;border-top:1px solid rgba(164,214,238,.35)!important}

  
  .concept-water-drops-back{
    position:absolute;
    z-index:1;
    inset:0;
    overflow:hidden;
    pointer-events:none;
  }
  .concept-backdrop{
    position:absolute;
    display:block;
    height:auto;
    opacity:.25;
    filter:saturate(.96) brightness(1.01) blur(.45px);
    will-change:transform;
  }
  .concept-backdrop--a{left:38%;top:7%;width:clamp(130px,9vw,178px);animation:concept-v27-backdrop-a 10.8s ease-in-out -2.6s infinite alternate}
  .concept-backdrop--b{right:31%;top:27%;width:clamp(120px,8vw,158px);opacity:.19;animation:concept-v27-backdrop-b 9.6s ease-in-out -4.2s infinite alternate}
  .concept-backdrop--c{right:7%;bottom:8%;width:clamp(150px,10vw,195px);opacity:.22;animation:concept-v27-backdrop-c 11.6s ease-in-out -1.4s infinite alternate}

  
  .concept-water-drops{z-index:8!important}
  .concept-orb{opacity:.52!important;filter:blur(.2px)!important;backdrop-filter:blur(2px) saturate(1.08)!important;-webkit-backdrop-filter:blur(2px) saturate(1.08)!important}
  .concept-orb--left{left:-11vw!important;bottom:-18vh!important;width:clamp(350px,30vw,540px)!important;opacity:.46!important}
  .concept-orb--right{right:-8vw!important;top:-15vh!important;width:clamp(285px,24vw,440px)!important;opacity:.42!important}
  .concept-drop{filter:saturate(.96) brightness(1.02) drop-shadow(0 10px 18px rgba(73,144,182,.09))!important}
  .concept-drop--left{left:-4%!important;bottom:3%!important;width:clamp(190px,14vw,255px)!important;opacity:.45!important}
  .concept-drop--upper{left:43%!important;top:4%!important;width:clamp(110px,7vw,145px)!important;opacity:.42!important}
  .concept-drop--right{right:1.5%!important;top:19%!important;width:clamp(145px,10vw,205px)!important;opacity:.61!important}
  .concept-drop--mid{right:10%!important;bottom:9%!important;width:clamp(115px,7.5vw,160px)!important;opacity:.42!important}
  .concept-drop--front-left{left:31%!important;bottom:-2%!important;width:clamp(145px,10vw,190px)!important;opacity:.54!important;filter:blur(.25px) saturate(.97) brightness(1.02)!important;animation:concept-v27-front-left 10.2s ease-in-out -3.1s infinite alternate}
  .concept-drop--front-right{right:-4%!important;bottom:0!important;width:clamp(220px,16vw,310px)!important;opacity:.40!important;filter:blur(.55px) saturate(.94) brightness(1.03)!important;animation:concept-v27-front-right 12.4s ease-in-out -5.2s infinite alternate}
}

@keyframes concept-v27-water-breathe{
  0%{transform:translate3d(-.20%,.10%,0) scale(1.02)}
  50%{transform:translate3d(.08%,-.10%,0) scale(1.028)}
  100%{transform:translate3d(.22%,.08%,0) scale(1.023)}
}
@keyframes concept-v27-caustic-drift{
  0%{transform:translate3d(-.18%,.10%,0) scale(1.035);opacity:.48}
  50%{transform:translate3d(.12%,-.12%,0) scale(1.045);opacity:.58}
  100%{transform:translate3d(.20%,.08%,0) scale(1.04);opacity:.52}
}
@keyframes concept-v27-backdrop-a{0%{transform:translate3d(-4px,6px,0) rotate(-.7deg)}100%{transform:translate3d(6px,-7px,0) rotate(.8deg)}}
@keyframes concept-v27-backdrop-b{0%{transform:translate3d(4px,-4px,0) rotate(.6deg)}100%{transform:translate3d(-5px,6px,0) rotate(-.6deg)}}
@keyframes concept-v27-backdrop-c{0%{transform:translate3d(-3px,5px,0) scale(.99)}100%{transform:translate3d(5px,-6px,0) scale(1.015)}}
@keyframes concept-v27-front-left{0%{transform:translate3d(-5px,6px,0) rotate(-.8deg) scale(.99)}100%{transform:translate3d(7px,-8px,0) rotate(.9deg) scale(1.015)}}
@keyframes concept-v27-front-right{0%{transform:translate3d(7px,-4px,0) rotate(.6deg) scale(1.01)}100%{transform:translate3d(-8px,8px,0) rotate(-.8deg) scale(.99)}}

@media(max-width:820px){
  .p2::after{background:linear-gradient(180deg,rgba(255,255,255,.76) 0%,rgba(248,253,255,.55) 42%,rgba(231,247,253,.18) 100%)!important}
  .concept-water-bg{opacity:.93!important;filter:saturate(.94) brightness(.96) contrast(1)!important;background-position:55% 54%!important}
  .concept-water-bg::before{opacity:.42!important;mix-blend-mode:normal!important;filter:saturate(.92) brightness(.98)!important}
  .concept-water-drops-back{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none}
  .concept-backdrop{position:absolute;display:block;height:auto;opacity:.16;filter:blur(.5px)}
  .concept-backdrop--a{left:60%;top:15%;width:94px}
  .concept-backdrop--b{right:-5%;top:43%;width:104px}
  .concept-backdrop--c{left:-8%;bottom:8%;width:118px}
  .hair-compare__block{border-radius:24px!important;background:linear-gradient(145deg,rgba(255,255,255,.66),rgba(238,249,254,.48))!important}
  .concept-drop--front-left{display:none}
  .concept-drop--front-right{right:-18%!important;bottom:2%!important;width:210px!important;opacity:.24!important}
}
@media(prefers-reduced-motion:reduce){
  .concept-water-bg,.concept-water-bg::before,.concept-backdrop,.concept-orb,.concept-drop,.hair-compare__block::after{animation:none!important;transform:none!important}
}




@media (min-width:821px){
  .p2{
    background:#e6f4fb!important;
  }
  .p2::after{
    background:linear-gradient(90deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.84) 22%,
      rgba(252,254,255,.64) 38%,
      rgba(244,251,255,.28) 58%,
      rgba(228,244,252,.08) 100%)!important;
    z-index:2!important;
  }
  .concept-water-bg{
    inset:-2.2%!important;
    background-image:url('../img/concept-ref-blur-bg.webp')!important;
    background-position:56% 50%!important;
    background-size:cover!important;
    opacity:1!important;
    filter:saturate(1.02) brightness(1.01) contrast(1.02)!important;
    transform:scale(1.018)!important;
    animation:concept-v28-water-breathe 20s ease-in-out infinite alternate!important;
  }
  .concept-water-bg::before{
    inset:50% -8% -7%!important;
    background:url('../img/concept-ref-bottom-caustic.webp') 50% 50% / cover no-repeat!important;
    opacity:.78!important;
    mix-blend-mode:screen!important;
    filter:saturate(1.04) brightness(1.06) contrast(1.02)!important;
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 18%,rgba(0,0,0,.66) 42%,#000 100%)!important;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 18%,rgba(0,0,0,.66) 42%,#000 100%)!important;
    animation:concept-v28-caustic-drift 14s ease-in-out infinite alternate!important;
  }
  .concept-water-bg::after{
    background:
      radial-gradient(circle at 18% 18%,rgba(255,255,255,.44) 0 3%,transparent 12%),
      radial-gradient(circle at 71% 19%,rgba(255,255,255,.33) 0 2%,transparent 11%),
      radial-gradient(circle at 94% 68%,rgba(195,233,248,.26) 0 5%,transparent 20%),
      linear-gradient(118deg,rgba(208,236,249,.18) 0%,transparent 35%,rgba(221,243,253,.12) 62%,rgba(255,255,255,.14) 100%)!important;
    mix-blend-mode:normal!important;
    opacity:.75!important;
  }
  .p2 .inner{
    width:min(34vw,570px)!important;
    margin-left:clamp(3.2vw,4.8vw,78px)!important;
    padding:clamp(28px,3.2vw,42px) clamp(28px,3vw,42px) clamp(30px,3.2vw,44px) clamp(28px,3vw,42px)!important;
    background:rgba(255,255,255,.22)!important;
    border-left:none!important;
    box-shadow:none!important;
    z-index:6!important;
  }
  .p2 .inner::before{
    inset:-10% -11% -12% -8%!important;
    border-radius:42px!important;
    background:radial-gradient(ellipse at 34% 48%,rgba(255,255,255,.58) 0%,rgba(255,255,255,.32) 46%,rgba(255,255,255,0) 78%)!important;
    filter:blur(16px)!important;
  }
  .p2 h2{
    font-size:clamp(56px,4.15vw,72px)!important;
    line-height:1.38!important;
    letter-spacing:.03em!important;
    margin-bottom:22px!important;
  }
  .p2 p{
    font-size:18px!important;
    line-height:1.95!important;
    letter-spacing:.04em!important;
    margin-bottom:30px!important;
  }
  .p2 .btn{min-width:174px!important}

  .hair-compare{
    top:50%!important;
    right:clamp(34px,4vw,76px)!important;
    width:min(48vw,820px)!important;
    transform:translateY(-46%)!important;
  }
  .hair-compare::before{
    inset:-6% -4% -7%!important;
    background:radial-gradient(ellipse at 55% 54%,rgba(235,248,255,.26) 0%,rgba(231,247,254,.12) 52%,rgba(255,255,255,0) 80%)!important;
    filter:blur(24px)!important;
    opacity:.82!important;
  }
  .hair-compare__blocks{
    grid-template-columns:minmax(0,1fr) clamp(26px,2.2vw,38px) minmax(0,1fr)!important;
    gap:clamp(10px,1vw,16px)!important;
  }
  .hair-compare__block{
    min-height:clamp(430px,56vh,535px)!important;
    padding:clamp(20px,1.8vw,28px) clamp(16px,1.5vw,24px) clamp(15px,1.5vw,22px)!important;
    border-radius:30px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.60) 0%,rgba(248,253,255,.48) 54%,rgba(224,244,253,.36) 100%)!important;
    box-shadow:0 22px 52px rgba(55,119,154,.10), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(137,204,235,.20)!important;
  }
  .hair-compare__art{min-height:clamp(300px,34vh,340px)!important}
  .hair-compare__art img{height:min(33vh,330px)!important}
  .hair-compare__block--conventional{transform:translate3d(0,-4px,0)!important}
  .hair-compare__block--aqua{transform:translate3d(0,4px,0)!important}
  .hair-compare__arrow{font-size:clamp(34px,2.7vw,44px)!important}

  
  .concept-water-drops{z-index:8!important}
  .concept-orb{opacity:.50!important;filter:blur(.25px)!important}
  .concept-orb--left{left:-13vw!important;bottom:-22vh!important;width:clamp(320px,28vw,510px)!important;opacity:.42!important}
  .concept-orb--right{right:-9vw!important;top:-18vh!important;width:clamp(250px,22vw,395px)!important;opacity:.34!important}

  .concept-bubble{position:absolute;display:block;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.96) 0 7%,rgba(255,255,255,.18) 17%,rgba(210,239,253,.18) 48%,rgba(124,197,231,.14) 64%,rgba(255,255,255,.34) 74%,rgba(255,255,255,.06) 80%,transparent 83%),
               radial-gradient(circle at 65% 70%,rgba(98,180,223,.12),transparent 48%);
    border:1px solid rgba(255,255,255,.74);
    box-shadow:inset 10px 12px 20px rgba(255,255,255,.36),inset -14px -18px 28px rgba(76,164,211,.10),0 12px 26px rgba(93,173,211,.08);
    backdrop-filter:blur(3px) saturate(1.08);-webkit-backdrop-filter:blur(3px) saturate(1.08);will-change:transform}
  .concept-bubble::after{content:"";position:absolute;left:18%;top:15%;width:28%;height:13%;border-radius:50%;background:rgba(255,255,255,.86);filter:blur(4px);transform:rotate(-26deg);opacity:.72}
  .concept-bubble--a{left:39%;top:6%;width:clamp(34px,3vw,52px);aspect-ratio:1;opacity:.72;animation:concept-v28-bubble-a 8.2s ease-in-out -1.8s infinite alternate}
  .concept-bubble--b{left:47%;top:20%;width:clamp(18px,1.6vw,28px);aspect-ratio:1;opacity:.52;animation:concept-v28-bubble-b 7.2s ease-in-out -3.1s infinite alternate}
  .concept-bubble--c{right:3.5%;top:18%;width:clamp(26px,2vw,38px);aspect-ratio:1;opacity:.68;animation:concept-v28-bubble-c 8.8s ease-in-out -2.7s infinite alternate}
  .concept-bubble--d{right:6%;bottom:15%;width:clamp(16px,1.3vw,24px);aspect-ratio:1;opacity:.46;animation:concept-v28-bubble-d 7.8s ease-in-out -4.1s infinite alternate}
  .concept-drop{filter:saturate(.98) brightness(1.03) drop-shadow(0 10px 18px rgba(73,144,182,.09))!important}
  .concept-drop--left{left:-1.5%!important;bottom:0%!important;width:clamp(170px,13vw,228px)!important;opacity:.34!important;animation:concept-v28-drop-left 10.4s ease-in-out -2.2s infinite alternate!important}
  .concept-drop--upper{left:45%;top:10%;width:clamp(76px,5vw,108px)!important;opacity:.34!important;animation:concept-v28-drop-upper 9.0s ease-in-out -3.8s infinite alternate!important}
  .concept-drop--right{right:2.4%!important;top:24%!important;width:clamp(118px,8vw,170px)!important;opacity:.48!important;animation:concept-v28-drop-right 11.4s ease-in-out -3.2s infinite alternate!important}
  .concept-drop--mid{right:8.5%!important;bottom:8.5%!important;width:clamp(92px,6.2vw,128px)!important;opacity:.34!important;animation:concept-v28-drop-mid 9.6s ease-in-out -1.1s infinite alternate!important}
}
@keyframes concept-v28-water-breathe{0%{transform:translate3d(-.18%,.10%,0) scale(1.018)}50%{transform:translate3d(.08%,-.08%,0) scale(1.024)}100%{transform:translate3d(.20%,.06%,0) scale(1.02)}}
@keyframes concept-v28-caustic-drift{0%{transform:translate3d(-.16%,.08%,0) scale(1.03);opacity:.70}50%{transform:translate3d(.08%,-.10%,0) scale(1.04);opacity:.82}100%{transform:translate3d(.18%,.08%,0) scale(1.035);opacity:.76}}
@keyframes concept-v28-bubble-a{0%{transform:translate3d(-4px,6px,0) scale(.99)}100%{transform:translate3d(6px,-8px,0) scale(1.04)}}
@keyframes concept-v28-bubble-b{0%{transform:translate3d(2px,-4px,0)}100%{transform:translate3d(-6px,5px,0)}}
@keyframes concept-v28-bubble-c{0%{transform:translate3d(5px,-2px,0) scale(1.01)}100%{transform:translate3d(-6px,7px,0) scale(.98)}}
@keyframes concept-v28-bubble-d{0%{transform:translate3d(-3px,4px,0)}100%{transform:translate3d(4px,-6px,0)}}
@keyframes concept-v28-drop-left{0%{transform:translate3d(-4px,5px,0) rotate(-.6deg) scale(.99)}100%{transform:translate3d(7px,-8px,0) rotate(.8deg) scale(1.012)}}
@keyframes concept-v28-drop-upper{0%{transform:translate3d(0,4px,0) rotate(.4deg)}100%{transform:translate3d(7px,-6px,0) rotate(-.5deg)}}
@keyframes concept-v28-drop-right{0%{transform:translate3d(6px,-3px,0) rotate(-.5deg)}100%{transform:translate3d(-7px,8px,0) rotate(.7deg)}}
@keyframes concept-v28-drop-mid{0%{transform:translate3d(-3px,4px,0)}100%{transform:translate3d(5px,-6px,0)}}

@media (max-width:820px){
  .p2::after{background:linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(250,253,255,.60) 40%,rgba(229,245,252,.20) 100%)!important}
  .concept-water-bg{background-image:url('../img/concept-ref-blur-bg.webp')!important;background-position:58% 52%!important;opacity:.98!important;filter:saturate(1.02) brightness(1.01)!important}
  .concept-water-bg::before{background:url('../img/concept-ref-bottom-caustic.webp') 50% 50% / cover no-repeat!important;opacity:.52!important}
  .p2 .inner{width:auto!important;margin:42px 0 0!important;padding:22px 18px 24px 18px!important;background:rgba(255,255,255,.18)!important;border-left:none!important}
  .p2 h2{font-size:40px!important;line-height:1.42!important;letter-spacing:.02em!important}
  .p2 p{font-size:17px!important;line-height:1.88!important}
  .hair-compare{right:22px!important;left:22px!important;width:auto!important;top:auto!important;transform:none!important;margin-top:20px!important}
  .hair-compare__blocks{gap:14px!important}
  .hair-compare__block{border-radius:24px!important;min-height:0!important;padding:20px 16px 15px!important}
  .concept-bubble--a{left:70%;top:10%;width:34px}
  .concept-bubble--b{left:58%;top:23%;width:18px}
  .concept-bubble--c{right:2%;top:26%;width:26px}
  .concept-bubble--d{right:6%;bottom:16%;width:16px}
}
@media(prefers-reduced-motion:reduce){
  .concept-bubble,.concept-water-bg,.concept-water-bg::before,.concept-backdrop,.concept-orb,.concept-drop,.hair-compare__block::after{animation:none!important;transform:none!important}
}




@media (min-width:821px){
  .p2{background:#eef7fb!important;overflow:hidden!important}
  .p2::after{background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.90) 19%,rgba(255,255,255,.75) 34%,rgba(248,252,255,.42) 51%,rgba(235,246,252,.18) 69%,rgba(227,242,250,.08) 100%)!important;z-index:2!important}
  .concept-water-bg{inset:0!important;background-image:url('../img/concept-v29-bg.webp')!important;background-position:center center!important;background-size:cover!important;opacity:1!important;filter:none!important;transform:none!important;animation:concept-v29-bg-drift 18s ease-in-out infinite alternate!important}
  .concept-water-bg::before{inset:auto -1% -2% -1%!important;height:34%!important;background:url('../img/concept-v29-caustic.webp') center bottom / cover no-repeat!important;opacity:.92!important;mix-blend-mode:screen!important;filter:none!important;mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.30) 30%,#000 100%)!important;-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.30) 30%,#000 100%)!important;animation:concept-v29-caustic-float 12s ease-in-out infinite alternate!important}
  .concept-water-bg::after{opacity:.22!important;background:radial-gradient(circle at 70% 18%,rgba(255,255,255,.44) 0 2.8%,transparent 9%),radial-gradient(circle at 82% 31%,rgba(255,255,255,.34) 0 1.8%,transparent 8%),linear-gradient(120deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.02) 34%,rgba(206,236,249,.14) 72%,rgba(255,255,255,.12) 100%)!important}
  .p2 .inner{width:min(40vw,690px)!important;margin-left:clamp(48px,5.6vw,88px)!important;padding:clamp(30px,3vw,42px) 16px 36px 12px!important;background:transparent!important;box-shadow:none!important;border:none!important;z-index:8!important}
  .p2 h2{max-width:11.2em!important;font-size:clamp(52px,3.8vw,66px)!important;line-height:1.46!important;letter-spacing:.045em!important;margin:0 0 26px!important;word-break:keep-all!important;white-space:normal!important;text-wrap:unset!important}
  .p2 h2 br{display:none!important}
  .p2 .inner>p{width:min(29em,100%)!important;font-size:18px!important;line-height:2.0!important;letter-spacing:.03em!important;margin:0 0 28px!important;color:rgba(36,34,64,.80)!important}
  .p2 .btn{min-width:176px!important}
  .hair-compare{top:50%!important;right:clamp(28px,3.4vw,58px)!important;width:min(46vw,760px)!important;transform:translateY(-47%)!important;z-index:8!important}
  .hair-compare__blocks{grid-template-columns:minmax(0,1fr) clamp(22px,1.8vw,30px) minmax(0,1fr)!important;gap:clamp(10px,1vw,14px)!important;align-items:center!important}
  .hair-compare__block{min-height:clamp(410px,52vh,490px)!important;padding:clamp(18px,1.6vw,24px) clamp(14px,1.3vw,20px) clamp(14px,1.3vw,20px)!important;border-radius:28px!important;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(244,251,255,.46))!important;box-shadow:0 18px 44px rgba(64,118,153,.10), inset 0 1px 0 rgba(255,255,255,.96)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important}
  .hair-compare__art{min-height:300px!important}
  .hair-compare__art img{height:min(31vh,315px)!important}
  .hair-compare figcaption{margin-top:14px!important}
  .concept-water-drops{z-index:6!important}
  .concept-orb{display:block!important;opacity:1!important;filter:none!important}
  .concept-orb--left{left:-12vw!important;bottom:-24vh!important;width:clamp(280px,25vw,430px)!important;background:radial-gradient(circle at 72% 33%,rgba(255,255,255,.86) 0 8%,rgba(203,232,246,.38) 26%,rgba(255,255,255,.06) 58%,transparent 72%)!important;opacity:.48!important;box-shadow:inset 0 0 42px rgba(255,255,255,.30),0 0 26px rgba(140,200,227,.10)!important}
  .concept-orb--right{right:-7vw!important;top:-18vh!important;width:clamp(220px,18vw,340px)!important;background:radial-gradient(circle at 36% 40%,rgba(255,255,255,.92) 0 7%,rgba(202,233,246,.44) 22%,rgba(255,255,255,.08) 55%,transparent 72%)!important;opacity:.34!important}
  .concept-bubble{opacity:1!important}
  .concept-bubble--a{left:40.5%!important;top:5.5%!important;width:clamp(38px,3.1vw,54px)!important;opacity:.84!important}
  .concept-bubble--b{left:49.2%!important;top:21%!important;width:clamp(18px,1.4vw,26px)!important;opacity:.72!important}
  .concept-bubble--c{right:1.7%!important;top:17%!important;width:clamp(34px,2.6vw,48px)!important;opacity:.88!important}
  .concept-bubble--d{right:7.5%!important;bottom:12%!important;width:clamp(18px,1.4vw,24px)!important;opacity:.70!important}
  .concept-drop{display:block!important;filter:saturate(1) brightness(1.04) drop-shadow(0 8px 12px rgba(75,144,181,.10))!important}
  .concept-drop--left{left:0.4%!important;bottom:0.6%!important;width:clamp(180px,13vw,230px)!important;opacity:.58!important}
  .concept-drop--upper{left:46.5%!important;top:8.5%!important;width:clamp(72px,4.6vw,98px)!important;opacity:.46!important}
  .concept-drop--right{right:1.1%!important;top:21.5%!important;width:clamp(120px,8vw,168px)!important;opacity:.76!important}
  .concept-drop--mid{right:8.4%!important;bottom:8%!important;width:clamp(94px,6vw,122px)!important;opacity:.56!important}
}
@keyframes concept-v29-bg-drift{0%{transform:translate3d(-.25%,0,0) scale(1.012)}100%{transform:translate3d(.22%,-.18%,0) scale(1.02)}}
@keyframes concept-v29-caustic-float{0%{transform:translate3d(-.18%,.20%,0) scale(1.02)}100%{transform:translate3d(.16%,-.12%,0) scale(1.035)}}
@media (max-width:820px){.concept-water-bg{background-image:url('../img/concept-v29-bg.webp')!important;background-position:60% center!important;filter:none!important;opacity:1!important}.concept-water-bg::before{background:url('../img/concept-v29-caustic.webp') center bottom / cover no-repeat!important;opacity:.78!important}
}




.p2 .ph-full{display:none!important}
.p2-caustic-light{display:none!important}
.p2::after{display:none!important}
.concept-water-bg,.concept-water-drops-back,.concept-water-drops{display:none!important}
.p2{background:#edf7fb!important;overflow:hidden!important}

.concept-v30-layers{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;isolation:isolate}
.concept-v30-layer{position:absolute;inset:-1.5%;width:103%;height:103%;object-fit:cover;object-position:center;pointer-events:none;will-change:transform,opacity}
.concept-v30-layer--bg{z-index:0;opacity:1;animation:concept-v30-bg 18s ease-in-out infinite alternate}
.concept-v30-layer--caustics{z-index:1;opacity:.72;mix-blend-mode:screen;animation:concept-v30-caustics 12s ease-in-out infinite alternate}
.concept-v30-layer--drops-back{z-index:2;opacity:.68;filter:blur(.15px);animation:concept-v30-drops-back 10.8s ease-in-out -2.4s infinite alternate}
.concept-v30-layer--veil{z-index:3;opacity:.70}
.concept-v30-layer--drops-front{z-index:7;opacity:.82;filter:drop-shadow(0 8px 16px rgba(73,144,182,.08));animation:concept-v30-drops-front 9.4s ease-in-out -3.8s infinite alternate}

@keyframes concept-v30-bg{0%{transform:translate3d(-.20%,.06%,0) scale(1.01)}100%{transform:translate3d(.18%,-.08%,0) scale(1.018)}}
@keyframes concept-v30-caustics{0%{transform:translate3d(-.28%,.18%,0) scale(1.018);opacity:.64}50%{transform:translate3d(.08%,-.18%,0) scale(1.028);opacity:.78}100%{transform:translate3d(.24%,.08%,0) scale(1.022);opacity:.70}}
@keyframes concept-v30-drops-back{0%{transform:translate3d(-5px,7px,0) scale(.995)}100%{transform:translate3d(7px,-9px,0) scale(1.012)}}
@keyframes concept-v30-drops-front{0%{transform:translate3d(6px,-5px,0) scale(1.005)}100%{transform:translate3d(-8px,9px,0) scale(.992)}}

@media (min-width:821px){
  
  .p2{display:flex!important;justify-content:flex-start!important}
  .p2 .inner{width:min(43vw,720px)!important;margin-left:clamp(56px,6.0vw,104px)!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;z-index:5!important}
  .p2 h2{max-width:13.2em!important;font-size:clamp(44px,3.25vw,56px)!important;line-height:1.50!important;letter-spacing:.055em!important;margin:0 0 29px!important;white-space:normal!important;word-break:keep-all!important;text-wrap:unset!important}
  .p2 h2 .desktop-head-break{display:block!important}
  .p2 .inner>p{width:min(31em,100%)!important;font-size:18px!important;line-height:2.18!important;letter-spacing:.035em!important;margin:0 0 39px!important;color:var(--ink)!important}
  .p2 .btn{min-width:184px!important}

  
  .hair-compare{top:50%!important;right:clamp(30px,3vw,54px)!important;width:min(47vw,790px)!important;transform:translateY(-47%)!important;z-index:5!important}
  .hair-compare__blocks{grid-template-columns:minmax(0,1fr) clamp(22px,1.9vw,32px) minmax(0,1fr)!important;gap:clamp(8px,.9vw,14px)!important}
  .hair-compare__block{min-height:clamp(420px,53vh,505px)!important;padding:clamp(18px,1.7vw,26px) clamp(14px,1.4vw,22px) clamp(14px,1.4vw,20px)!important;border-radius:29px!important;background:linear-gradient(180deg,rgba(255,255,255,.60),rgba(239,249,254,.44))!important;border:1px solid rgba(255,255,255,.82)!important;box-shadow:0 20px 48px rgba(55,119,154,.09),inset 0 1px 0 rgba(255,255,255,.96)!important;backdrop-filter:blur(11px) saturate(1.05)!important;-webkit-backdrop-filter:blur(11px) saturate(1.05)!important}
  .hair-compare__art{min-height:clamp(300px,34vh,330px)!important;margin:10px 0!important}
  .hair-compare__art img{height:min(32vh,325px)!important}
  .hair-compare__band{min-height:56px!important;border-radius:16px!important}
  .hair-compare figcaption{margin-top:14px!important;padding-top:10px!important}

  
  .concept-v30-layer--veil{opacity:.56!important}
  .concept-v30-layer--caustics{opacity:.78!important}
  .concept-v30-layer--drops-back{opacity:.72!important}
  .concept-v30-layer--drops-front{opacity:.88!important}
}

@media(max-width:820px){
  .concept-v30-layer{inset:-1%;width:102%;height:102%}
  .concept-v30-layer--veil{opacity:.66}
  .concept-v30-layer--caustics{opacity:.55}
  .concept-v30-layer--drops-back{opacity:.42}
  .concept-v30-layer--drops-front{opacity:.50}
}
@media(prefers-reduced-motion:reduce){.concept-v30-layer{animation:none!important;transform:none!important}
}




@media (min-width:821px){
  .p2{background:#eef8fc!important;overflow:hidden!important}

  
  .concept-v30-layers{z-index:0!important;overflow:hidden!important}
  .concept-v30-layer{inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important}
  .concept-v30-layer--bg{z-index:0!important;opacity:1!important;filter:none!important;animation:concept-v32-bg 22s ease-in-out infinite alternate!important}
  .concept-v30-layer--caustics{z-index:1!important;opacity:.88!important;mix-blend-mode:normal!important;filter:none!important;animation:concept-v32-caustics 13s ease-in-out infinite alternate!important}
  .concept-v30-layer--drops-back{z-index:2!important;opacity:.30!important;filter:none!important;animation:concept-v32-backdrops 11.5s ease-in-out -2.1s infinite alternate!important}
  .concept-v30-layer--veil{z-index:3!important;opacity:.08!important}
  .concept-v30-layer--drops-front{z-index:4!important;opacity:.34!important;filter:drop-shadow(0 8px 14px rgba(73,144,182,.05))!important;clip-path:inset(46% 0 0 0)!important;transform:scaleX(-1)!important;transform-origin:center!important;animation:concept-v32-frontdrops 10.2s ease-in-out -3.4s infinite alternate!important}

  
  .p2 .inner{
    width:min(38vw,640px)!important;
    margin-left:clamp(72px,7vw,118px)!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    z-index:6!important;
  }
  .p2 .inner::before{
    content:""!important;
    position:absolute!important;
    z-index:-1!important;
    inset:-18% -15% -20% -12%!important;
    background:radial-gradient(ellipse at 35% 48%,rgba(255,255,255,.58) 0%,rgba(255,255,255,.34) 47%,rgba(255,255,255,0) 78%)!important;
    filter:blur(18px)!important;
    border-radius:42%!important;
    pointer-events:none!important;
  }
  .p2 h2{
    display:block!important;
    max-width:none!important;
    margin:0 0 26px!important;
    font-size:clamp(52px,3.7vw,64px)!important;
    line-height:1.42!important;
    letter-spacing:.04em!important;
    white-space:normal!important;
    word-break:normal!important;
    text-wrap:unset!important;
  }
  .p2 h2 .concept-title-line{
    display:block!important;
    white-space:nowrap!important;
    opacity:0;
    transform:translate3d(0,28px,0);
    filter:blur(6px);
  }
  .p2.is-active h2 .concept-title-line:first-child{animation:concept-v32-title-line .72s cubic-bezier(.16,.78,.26,1) .12s both}
  .p2.is-active h2 .concept-title-line:last-child{animation:concept-v32-title-line .72s cubic-bezier(.16,.78,.26,1) .26s both}
  .p2 .inner>p{
    width:min(32em,100%)!important;
    margin:0 0 32px!important;
    font-size:18px!important;
    line-height:2.02!important;
    letter-spacing:.03em!important;
    color:rgba(35,31,55,.77)!important;
  }
  .p2 .btn{min-width:184px!important}

  .hair-compare{
    top:50%!important;
    right:clamp(18px,2vw,34px)!important;
    width:min(50vw,860px)!important;
    transform:translateY(-47%)!important;
    z-index:6!important;
  }
  .hair-compare::before{
    inset:-5% -3% -6%!important;
    background:radial-gradient(ellipse at 50% 52%,rgba(235,248,255,.22) 0%,rgba(233,247,254,.08) 55%,rgba(255,255,255,0) 82%)!important;
    filter:blur(20px)!important;
    opacity:.64!important;
  }
  .hair-compare__blocks{
    grid-template-columns:minmax(0,1fr) clamp(24px,1.8vw,32px) minmax(0,1fr)!important;
    gap:clamp(8px,.7vw,12px)!important;
    align-items:center!important;
  }
  .hair-compare__block{
    min-height:clamp(420px,52vh,500px)!important;
    padding:clamp(19px,1.6vw,25px) clamp(15px,1.2vw,20px) clamp(14px,1.2vw,18px)!important;
    border-radius:30px!important;
    background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(240,249,254,.47))!important;
    border:1px solid rgba(255,255,255,.88)!important;
    box-shadow:0 20px 46px rgba(55,119,154,.09),inset 0 1px 0 rgba(255,255,255,.97)!important;
    backdrop-filter:blur(10px) saturate(1.04)!important;
    -webkit-backdrop-filter:blur(10px) saturate(1.04)!important;
  }
  .hair-compare__art{min-height:clamp(300px,33vh,328px)!important;margin:10px 0!important}
  .hair-compare__art img{height:min(31vh,318px)!important}
  .hair-compare__band{min-height:58px!important;border-radius:16px!important;background:rgba(235,248,254,.72)!important}
  .hair-compare__arrow{font-size:clamp(32px,2.5vw,42px)!important}
  .hair-compare figcaption{margin-top:13px!important;padding-top:9px!important}
}

@keyframes concept-v32-title-line{0%{opacity:0;transform:translate3d(0,28px,0);filter:blur(6px)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes concept-v32-bg{0%{transform:translate3d(-.12%,.03%,0) scale(1.004)}100%{transform:translate3d(.10%,-.06%,0) scale(1.01)}}
@keyframes concept-v32-caustics{0%{transform:translate3d(-.16%,.10%,0) scale(1.01);opacity:.84}50%{transform:translate3d(.08%,-.10%,0) scale(1.018);opacity:.94}100%{transform:translate3d(.14%,.06%,0) scale(1.013);opacity:.88}}
@keyframes concept-v32-backdrops{0%{transform:translate3d(-4px,5px,0) scale(.998)}100%{transform:translate3d(6px,-7px,0) scale(1.008)}}
@keyframes concept-v32-frontdrops{0%{translate:-4px 5px;scale:1}100%{translate:6px -7px;scale:1.008}}

@media(max-width:820px){
  .p2 h2 .concept-title-line{display:block!important;white-space:normal!important;opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  .concept-v30-layer--veil{opacity:.16!important}
  .concept-v30-layer--caustics{opacity:.72!important;mix-blend-mode:normal!important}
  .concept-v30-layer--drops-back{opacity:.25!important}
  .concept-v30-layer--drops-front{opacity:.24!important;clip-path:inset(45% 0 0 0)!important;transform:scaleX(-1)!important}
}




.p2{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(360px, 500px) minmax(580px, 760px)!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:clamp(18px,2vw,30px)!important;
  min-height:100svh;
  padding-left:clamp(42px,4.8vw,72px)!important;
  padding-right:clamp(36px,4vw,64px)!important;
  background:linear-gradient(90deg,#f7fbff 0%, #ebf6fe 42%, #dff1fd 100%)!important;
  overflow:hidden!important;
}
.p2 > .ph-full{display:none!important;}
.p2::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg, rgba(255,255,255,.76) 0%, rgba(255,255,255,.42) 32%, rgba(255,255,255,.08) 60%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.p2::after{display:none!important;}
.concept-v30-layers{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.concept-v30-layer{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;pointer-events:none;will-change:transform,opacity;user-select:none;}
.concept-v30-layer--bg{z-index:1;opacity:1;animation:concept-layer-bg-drift 26s ease-in-out infinite alternate;}
.concept-v30-layer--caustics{z-index:2;mix-blend-mode:screen;opacity:.95;animation:concept-layer-caustics-float 18s ease-in-out infinite alternate;}
.concept-v30-layer--drops-back{z-index:3;mix-blend-mode:screen;opacity:.46;animation:concept-layer-drops-back-float 12.5s ease-in-out infinite alternate;}
.concept-v30-layer--veil{z-index:4;mix-blend-mode:screen;opacity:.38;}
.concept-v30-layer--drops-front{z-index:7;mix-blend-mode:screen;opacity:.98;animation:concept-layer-drops-front-float 15s ease-in-out infinite alternate;}
.p2 .inner{
  position:relative!important;z-index:5!important;
  width:min(32.5vw, 430px)!important;max-width:430px!important;
  margin:0 0 0 clamp(54px,6vw,110px)!important;
  padding:0!important;text-align:left!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  justify-self:start!important;align-self:center!important;
}
.p2 .inner::after{display:none!important;}
.p2 .inner h2{
  max-width:9.8em!important;
  color:var(--navy)!important;
  font-size:clamp(54px,4.65vw,72px)!important;
  line-height:1.34!important;
  font-weight:600!important;
  letter-spacing:.02em!important;
  margin:0 0 28px!important;
}
.concept-title-line{display:block;white-space:nowrap;}
.p2 .inner > p{
  width:auto!important;
  max-width:30em!important;
  margin:0 0 28px!important;
  color:rgba(35,31,32,.72)!important;
  font-size:18px!important;
  line-height:2.05!important;
  letter-spacing:.02em!important;
}
.concept-copy-line{display:block;}
.p2 .inner > .btn{
  min-width:236px!important;
  min-height:54px!important;
  padding:14px 20px!important;
  background:rgba(255,255,255,.58)!important;
  border-color:rgba(33,26,60,.72)!important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.hair-compare{
  position:relative!important;z-index:6!important;
  top:auto!important;right:auto!important;transform:none!important;
  width:min(40vw, 650px)!important;max-width:650px!important;
  margin:0 clamp(6px,.8vw,12px) 0 0!important;
  justify-self:end!important;align-self:center!important;
  color:var(--navy)!important;text-align:center!important;
}
.hair-compare__blocks{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) clamp(26px,2.4vw,42px) minmax(0,1fr)!important;
  align-items:center!important;
  gap:clamp(8px, .9vw, 14px)!important;
}
.hair-compare__block{
  min-width:0!important;
  min-height:clamp(430px, 48vh, 540px)!important;
  height:auto!important;max-height:none!important;
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  padding:clamp(18px,1.7vw,24px) clamp(12px,1.3vw,18px) clamp(14px,1.3vw,18px)!important;
  border-radius:28px!important;
  border:1px solid rgba(255,255,255,.72)!important;
  background:linear-gradient(180deg, rgba(255,255,255,.70), rgba(239,246,254,.58))!important;
  box-shadow:0 18px 36px rgba(67,118,151,.10), inset 0 1px 0 rgba(255,255,255,.92)!important;
  backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;
}
.hair-compare__block h3{
  min-height:auto!important;display:block!important;white-space:nowrap!important;
  font-size:clamp(20px,1.6vw,25px)!important;line-height:1.42!important;letter-spacing:.03em!important;
  margin-bottom:2px!important;
}
.hair-compare__art{min-height:clamp(280px,32vh,330px)!important;margin:8px 0 12px!important;}
.hair-compare__art img{height:min(31vh,300px)!important;filter:drop-shadow(0 10px 18px rgba(33,26,60,.10));}
.hair-compare__label{font-size:15px!important;line-height:1.4!important;letter-spacing:.02em!important;}
.hair-compare__label--coating{top:14%!important;left:0!important}.hair-compare__label--coating::after{width:42px!important}
.hair-compare__label--lack{right:0!important;bottom:18%!important}.hair-compare__label--lack::after{width:44px!important}
.hair-compare__label--mineral{top:14%!important;right:0!important}.hair-compare__label--mineral::after{width:42px!important}
.hair-compare__label--amino{top:48%!important;left:0!important}.hair-compare__label--amino::after{width:42px!important}
.hair-compare__label--moisture{right:0!important;bottom:16%!important}.hair-compare__label--moisture::after{width:42px!important}
.hair-compare__band{
  min-height:66px!important;height:auto!important;max-height:none!important;
  padding:10px 8px!important;border-radius:14px!important;
  background:rgba(248,252,255,.72)!important;
  font-size:16px!important;line-height:1.42!important;letter-spacing:.01em!important;
}
.hair-compare__arrow{font-size:clamp(34px,3vw,46px)!important;opacity:1!important;transform:none!important;color:rgba(33,26,60,.9)!important;}
.hair-compare figcaption{
  margin-top:20px!important;
  white-space:normal!important;
  opacity:1!important;transform:none!important;
  font-size:16px!important;line-height:1.8!important;
  letter-spacing:.02em!important;color:rgba(33,26,60,.9)!important;
}
.p2.is-active .hair-compare__block--conventional,.p2.is-active .hair-compare__arrow,.p2.is-active .hair-compare__block--aqua,.p2.is-active .hair-compare figcaption{animation:none!important;}
.p2.is-active .hair-compare__block--aqua img{animation:aqua-hair-buoyancy 7.5s ease-in-out infinite alternate!important;}
@keyframes concept-layer-bg-drift{0%{transform:translate3d(-.6%,0,0) scale(1.028)}100%{transform:translate3d(.8%,-.9%,0) scale(1.042)}}
@keyframes concept-layer-caustics-float{0%{transform:translate3d(-.5%, .6%, 0) scale(1.045);opacity:.82}100%{transform:translate3d(.8%,-.7%,0) scale(1.07);opacity:.98}}
@keyframes concept-layer-drops-back-float{0%{transform:translate3d(-8px, 8px, 0) scale(1)}50%{transform:translate3d(2px, -6px, 0) scale(1.008)}100%{transform:translate3d(10px,-12px,0) scale(1.014)}}
@keyframes concept-layer-drops-front-float{0%{transform:translate3d(-10px, 10px, 0) scale(1)}50%{transform:translate3d(6px,-8px,0) scale(1.012)}100%{transform:translate3d(12px,-14px,0) scale(1.02)}}

@media (max-width:1200px){
  .p2{grid-template-columns:minmax(310px, 1fr) minmax(470px, 1.15fr)!important; gap:clamp(14px,1.5vw,22px)!important; padding-left:32px!important; padding-right:28px!important;}
  .p2 .inner{width:min(34vw, 410px)!important; margin-left:clamp(18px,3vw,44px)!important;}
  .p2 .inner h2{font-size:clamp(44px,4.2vw,58px)!important;}
  .hair-compare{width:min(46vw, 610px)!important;}
  .hair-compare__blocks{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important;}
}
@media (max-width:820px){
  .p2{display:block!important;padding:106px 22px 74px!important;background:linear-gradient(180deg,#f8fbff 0%, #e7f3fd 100%)!important;}
  .concept-v30-layers{opacity:.92;}
  .concept-v30-layer{inset:-4%;width:108%;height:108%;}
  .p2 .inner{width:100%!important;max-width:none!important;margin:68px 0 0!important;padding:0 2px 0 0!important;}
  .p2 .inner h2{font-size:34px!important;line-height:1.5!important;max-width:none!important;margin-bottom:20px!important;}
  .concept-title-line{white-space:normal;}
  .p2 .inner>p{font-size:17px!important;line-height:1.95!important;margin:0 0 20px!important;}
  .p2 .inner>.btn{min-width:208px!important;}
  .hair-compare{width:100%!important;max-width:none!important;margin:34px 0 0!important;}
  .hair-compare__blocks{grid-template-columns:1fr!important;gap:18px!important;}
  .hair-compare__arrow{transform:rotate(90deg)!important;justify-self:center!important;}
  .hair-compare__block{min-height:0!important;border-radius:22px!important;}
  .hair-compare__art{min-height:0!important;}
  .hair-compare__art img{height:min(56vw,320px)!important;}
  .hair-compare__label{position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;display:block!important;width:auto!important;min-width:0!important;padding-left:18px!important;text-align:left!important;}
  .hair-compare__label::before{content:"";position:absolute;left:2px;top:.65em;width:6px;height:6px;background:var(--navy);border-radius:50%;}
  .hair-compare__label::after{display:none!important;}
  .hair-compare figcaption{margin-top:16px!important;}
}
@media (prefers-reduced-motion:reduce){
  .concept-v30-layer--bg,.concept-v30-layer--caustics,.concept-v30-layer--drops-back,.concept-v30-layer--drops-front,.p2.is-active .hair-compare__block--aqua img{animation:none!important;}
}




@media (min-width:821px){
  .p2{
    display:grid!important;
    grid-template-columns:minmax(0,650px) minmax(0,690px)!important;
    justify-content:center!important;
    align-items:center!important;
    column-gap:46px!important;
    padding-left:clamp(28px,3vw,52px)!important;
    padding-right:clamp(28px,3vw,52px)!important;
  }
  .p2 .inner{
    width:560px!important;
    max-width:560px!important;
    margin:0!important;
    justify-self:start!important;
    align-self:center!important;
  }
  .p2 .inner h2{
    max-width:none!important;
    font-size:clamp(50px,3.75vw,64px)!important;
    line-height:1.36!important;
    letter-spacing:.025em!important;
    margin-bottom:24px!important;
  }
  .concept-title-line{display:block!important;white-space:nowrap!important;}
  .p2 .inner>p{
    width:560px!important;
    max-width:560px!important;
    font-size:17px!important;
    line-height:1.95!important;
    margin-bottom:28px!important;
  }
  .concept-copy-line{display:block!important;white-space:nowrap!important;}

  .hair-compare{
    position:relative!important;
    top:auto!important;right:auto!important;
    width:690px!important;
    max-width:690px!important;
    margin:0!important;
    transform:none!important;
    justify-self:start!important;
    align-self:center!important;
  }
  .hair-compare__blocks{
    grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr)!important;
    gap:12px!important;
  }
  .hair-compare__block{
    opacity:1!important;
    transform:none!important;
    visibility:visible!important;
    min-height:445px!important;
  }
  .hair-compare__arrow,
  .hair-compare figcaption{
    opacity:1!important;
    transform:none!important;
    visibility:visible!important;
  }
  .p2.is-active .hair-compare__block--conventional,
  .p2.is-active .hair-compare__block--aqua,
  .p2.is-active .hair-compare__arrow,
  .p2.is-active .hair-compare figcaption{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }

  
  .concept-v30-layer--drops-back{
    mix-blend-mode:normal!important;
    opacity:.62!important;
    animation:v35-drops-back 12.8s cubic-bezier(.45,.05,.55,.95) -3.4s infinite alternate!important;
  }
  .concept-v30-layer--drops-front{
    mix-blend-mode:normal!important;
    opacity:.82!important;
    animation:v35-drops-front 10.6s cubic-bezier(.45,.05,.55,.95) -5.2s infinite alternate!important;
  }
  .concept-v30-layer--caustics{
    opacity:.92!important;
    animation:v35-caustics 16s ease-in-out -4s infinite alternate!important;
  }
  .concept-v30-layer--bg{
    animation:v35-bg 28s ease-in-out -7s infinite alternate!important;
  }
}
@keyframes v35-drops-back{
  0%{transform:translate3d(-5px,7px,0) scale(1.002)}
  24%{transform:translate3d(2px,1px,0) scale(1.006)}
  56%{transform:translate3d(6px,-8px,0) scale(1.011)}
  82%{transform:translate3d(-1px,-4px,0) scale(1.007)}
  100%{transform:translate3d(8px,-11px,0) scale(1.014)}
}
@keyframes v35-drops-front{
  0%{transform:translate3d(-9px,8px,0) scale(1)}
  23%{transform:translate3d(-2px,1px,0) scale(1.006)}
  51%{transform:translate3d(8px,-7px,0) scale(1.014)}
  74%{transform:translate3d(3px,-12px,0) scale(1.009)}
  100%{transform:translate3d(11px,-15px,0) scale(1.018)}
}
@keyframes v35-caustics{
  0%{transform:translate3d(-.3%,.25%,0) scale(1.035);opacity:.86}
  50%{transform:translate3d(.15%,-.2%,0) scale(1.048);opacity:.95}
  100%{transform:translate3d(.42%,-.35%,0) scale(1.04);opacity:.89}
}
@keyframes v35-bg{
  0%{transform:translate3d(-.15%,0,0) scale(1.018)}
  100%{transform:translate3d(.16%,-.12%,0) scale(1.024)}
}

@media (min-width:821px) and (max-width:1450px){
  .p2{grid-template-columns:minmax(0,570px) minmax(0,620px)!important;column-gap:34px!important;}
  .p2 .inner,.p2 .inner>p{width:520px!important;max-width:520px!important;}
  .p2 .inner h2{font-size:clamp(46px,3.6vw,56px)!important;}
  .hair-compare{width:620px!important;max-width:620px!important;}
  .hair-compare__block{min-height:420px!important;}
  .hair-compare__art{min-height:270px!important;}
  .hair-compare__art img{height:min(29vh,285px)!important;}
}




@media (min-width:821px){
  .p2 .concept-v30-layer--bg{
    animation:v42-bg-breathe 16s ease-in-out -2s infinite alternate!important;
  }
  .p2 .concept-v30-layer--caustics{
    animation:v42-caustics-drift 9.8s ease-in-out -1.6s infinite alternate!important;
  }
  .p2 .concept-v30-layer--drops-back{
    animation:v42-backdrops-float 7.8s ease-in-out -2.8s infinite alternate!important;
  }
  .p2 .concept-v30-layer--drops-front{
    animation:v42-frontdrops-float 6.8s ease-in-out -1.2s infinite alternate!important;
  }
}
@media (max-width:820px){
  .p2 .concept-v30-layer--bg{animation:v42-bg-breathe-mobile 15s ease-in-out infinite alternate!important;}
  .p2 .concept-v30-layer--caustics{animation:v42-caustics-mobile 9.2s ease-in-out -1.8s infinite alternate!important;}
  .p2 .concept-v30-layer--drops-back{animation:v42-backdrops-mobile 7.4s ease-in-out -2.2s infinite alternate!important;}
  .p2 .concept-v30-layer--drops-front{animation:v42-frontdrops-mobile 6.2s ease-in-out -1.0s infinite alternate!important;}
}
@keyframes v42-bg-breathe{
  0%{transform:translate3d(-5px,3px,0) scale(1.012)}
  50%{transform:translate3d(2px,-2px,0) scale(1.018)}
  100%{transform:translate3d(6px,-4px,0) scale(1.024)}
}
@keyframes v42-caustics-drift{
  0%{transform:translate3d(-16px,10px,0) scale(1.022);opacity:.76}
  50%{transform:translate3d(4px,-6px,0) scale(1.038);opacity:.92}
  100%{transform:translate3d(18px,-12px,0) scale(1.028);opacity:.82}
}
@keyframes v42-backdrops-float{
  0%{transform:translate3d(-14px,16px,0) scale(.994) rotate(-.18deg)}
  50%{transform:translate3d(3px,-4px,0) scale(1.004) rotate(.06deg)}
  100%{transform:translate3d(16px,-18px,0) scale(1.014) rotate(.18deg)}
}
@keyframes v42-frontdrops-float{
  0%{transform:translate3d(-22px,18px,0) scale(.995) rotate(-.35deg)}
  50%{transform:translate3d(6px,-6px,0) scale(1.010) rotate(.10deg)}
  100%{transform:translate3d(22px,-20px,0) scale(1.022) rotate(.35deg)}
}
@keyframes v42-bg-breathe-mobile{
  0%{transform:translate3d(-3px,2px,0) scale(1.012)}
  100%{transform:translate3d(4px,-3px,0) scale(1.020)}
}
@keyframes v42-caustics-mobile{
  0%{transform:translate3d(-10px,6px,0) scale(1.020);opacity:.72}
  100%{transform:translate3d(11px,-8px,0) scale(1.032);opacity:.84}
}
@keyframes v42-backdrops-mobile{
  0%{transform:translate3d(-10px,11px,0) scale(.996)}
  100%{transform:translate3d(10px,-12px,0) scale(1.012)}
}
@keyframes v42-frontdrops-mobile{
  0%{transform:translate3d(-14px,12px,0) scale(.998)}
  100%{transform:translate3d(14px,-14px,0) scale(1.018)}
}




@media (min-width:821px){
  .concept-orb--left,
  .concept-orb--right,
  .concept-drop--left,
  .concept-drop--right,
  .concept-drop--front-right{display:none!important;}

  .concept-drop--upper{
    left:48.5%!important;
    top:7.5%!important;
    width:clamp(100px,6.4vw,138px)!important;
    opacity:.38!important;
  }

  .concept-drop--mid{
    right:8%!important;
    bottom:11%!important;
    width:clamp(100px,6.8vw,145px)!important;
    opacity:.36!important;
  }

  .concept-drop--front-left{
    left:27.5%!important;
    bottom:7%!important;
    width:clamp(122px,8.2vw,165px)!important;
    opacity:.42!important;
    filter:blur(.18px) saturate(.96) brightness(1.02)!important;
  }
}

@media (max-width:820px){
  .concept-orb--left,
  .concept-orb--right,
  .concept-drop--left,
  .concept-drop--right,
  .concept-drop--front-right{display:none!important;}

  .concept-drop--upper{
    left:70%!important;
    top:14%!important;
    width:84px!important;
    opacity:.28!important;
  }

  .concept-drop--mid{
    right:10%!important;
    bottom:12%!important;
    width:92px!important;
    opacity:.24!important;
  }
}



@media (min-width:821px){
  .p2 .concept-v30-layers{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }
  .p2 .concept-v30-layer{
    display:block!important;
    position:absolute!important;
    inset:-1.4%!important;
    width:102.8%!important;
    height:102.8%!important;
    object-fit:cover!important;
    object-position:center center!important;
    will-change:transform,opacity!important;
    transform-origin:center center!important;
  }
  .p2 .concept-v30-layer--bg{
    z-index:0!important;
    opacity:1!important;
    filter:none!important;
    animation:v41-bg-breathe 18s ease-in-out -3s infinite alternate!important;
  }
  .p2 .concept-v30-layer--caustics{
    z-index:1!important;
    opacity:.86!important;
    filter:none!important;
    mix-blend-mode:screen!important;
    animation:v41-caustics-drift 10.8s ease-in-out -2.2s infinite alternate!important;
  }
  .p2 .concept-v30-layer--drops-back{
    z-index:2!important;
    opacity:.56!important;
    filter:none!important;
    mix-blend-mode:normal!important;
    animation:v41-backdrops-float 8.8s ease-in-out -4.1s infinite alternate!important;
  }
  .p2 .concept-v30-layer--veil{
    z-index:3!important;
    opacity:.90!important;
    filter:none!important;
    animation:none!important;
  }
  .p2 .concept-v30-layer--drops-front{
    z-index:4!important;
    opacity:.91!important;
    filter:none!important;
    mix-blend-mode:normal!important;
    clip-path:none!important;
    animation:v41-frontdrops-float 7.4s ease-in-out -1.7s infinite alternate!important;
  }
}


@media (max-width:820px){
  .p2 .concept-v30-layers{display:block!important;opacity:1!important;overflow:hidden!important}
  .p2 .concept-v30-layer{display:block!important;inset:-2%!important;width:104%!important;height:104%!important;object-fit:cover!important;will-change:transform,opacity!important}
  .p2 .concept-v30-layer--bg{opacity:1!important;animation:v41-bg-breathe-mobile 18s ease-in-out infinite alternate!important}
  .p2 .concept-v30-layer--caustics{opacity:.78!important;mix-blend-mode:screen!important;animation:v41-caustics-mobile 11.5s ease-in-out -2s infinite alternate!important}
  .p2 .concept-v30-layer--drops-back{opacity:.42!important;animation:v41-backdrops-mobile 9.2s ease-in-out -3s infinite alternate!important}
  .p2 .concept-v30-layer--veil{opacity:.90!important;animation:none!important}
  .p2 .concept-v30-layer--drops-front{opacity:.74!important;clip-path:none!important;animation:v41-frontdrops-mobile 8s ease-in-out -1.4s infinite alternate!important}
}

@keyframes v41-bg-breathe{
  0%{transform:translate3d(-3px,2px,0) scale(1.012)}
  100%{transform:translate3d(4px,-3px,0) scale(1.020)}
}
@keyframes v41-caustics-drift{
  0%{transform:translate3d(-9px,6px,0) scale(1.022);opacity:.78}
  50%{transform:translate3d(3px,-4px,0) scale(1.036);opacity:.92}
  100%{transform:translate3d(10px,-7px,0) scale(1.028);opacity:.84}
}
@keyframes v41-backdrops-float{
  0%{transform:translate3d(-10px,12px,0) scale(.997) rotate(-.12deg)}
  45%{transform:translate3d(3px,-5px,0) scale(1.004) rotate(.08deg)}
  100%{transform:translate3d(12px,-13px,0) scale(1.012) rotate(.16deg)}
}
@keyframes v41-frontdrops-float{
  0%{transform:translate3d(-14px,14px,0) scale(1.000) rotate(-.18deg)}
  45%{transform:translate3d(4px,-5px,0) scale(1.008) rotate(.06deg)}
  100%{transform:translate3d(15px,-16px,0) scale(1.018) rotate(.22deg)}
}
@keyframes v41-bg-breathe-mobile{0%{transform:translate3d(-2px,1px,0) scale(1.012)}100%{transform:translate3d(3px,-2px,0) scale(1.018)}}
@keyframes v41-caustics-mobile{0%{transform:translate3d(-6px,4px,0) scale(1.02);opacity:.70}100%{transform:translate3d(7px,-5px,0) scale(1.03);opacity:.84}}
@keyframes v41-backdrops-mobile{0%{transform:translate3d(-7px,8px,0)}100%{transform:translate3d(8px,-9px,0)}}
@keyframes v41-frontdrops-mobile{0%{transform:translate3d(-9px,9px,0) scale(1)}100%{transform:translate3d(10px,-11px,0) scale(1.012)}}


.p2 .concept-v30-layer--bg{animation-name:v41-bg-breathe!important}
.p2 .concept-v30-layer--caustics{animation-name:v41-caustics-drift!important}
.p2 .concept-v30-layer--drops-back{animation-name:v41-backdrops-float!important}
.p2 .concept-v30-layer--drops-front{animation-name:v41-frontdrops-float!important}




.p2::before{background:linear-gradient(90deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.17) 24%,rgba(255,255,255,.05) 43%,rgba(255,255,255,0) 58%)!important}
.p2 .concept-v57-layers{position:absolute!important;inset:0!important;z-index:1!important;overflow:hidden!important;pointer-events:none!important}
.p2 .v57c-motion{position:absolute!important;inset:-1.7%!important;width:103.4%!important;height:103.4%!important;will-change:transform,opacity!important;pointer-events:none!important}
.p2 .v57c-motion img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;transform:none!important;animation:none!important;pointer-events:none!important}
.p2 .v57c-motion--bg{z-index:0!important;animation:v57-a 18s ease-in-out infinite alternate!important}.p2 .v57c-motion--caustics{z-index:1!important;animation:v57-b 13.5s ease-in-out infinite alternate!important}.p2 .v57c-motion--veil{z-index:2!important;animation:v57-c 24s ease-in-out infinite alternate!important}.p2 .v57c-motion--back{z-index:3!important}.p2 .v57c-motion--back-left{animation:v57-d 12.8s ease-in-out infinite alternate!important}.p2 .v57c-motion--back-center{animation:v57-e 15.4s ease-in-out infinite alternate!important}.p2 .v57c-motion--back-topright{animation:v57-f 13.7s ease-in-out infinite alternate!important}.p2 .v57c-motion--back-rightcluster{animation:v57-g 16.7s ease-in-out infinite alternate!important}.p2 .v57c-motion--front-soft{z-index:4!important;animation:v57-h 10.8s ease-in-out infinite alternate!important}.p2 .v57c-motion--front-clear{z-index:5!important;animation:v57-i 9.2s ease-in-out infinite alternate!important}
.p2 .v57c-motion--bg img{opacity:1!important;filter:saturate(1.07) contrast(1.025) brightness(.995)!important}.p2 .v57c-motion--caustics img{opacity:.76!important}.p2 .v57c-motion--veil img{opacity:.035!important}.p2 .v57c-motion--back img{opacity:.42!important}.p2 .v57c-motion--front-soft img,.p2 .v57c-motion--front-clear img{opacity:1!important}
@keyframes v57-a{0%{transform:translate3d(-12px,5px,0)}50%{transform:translate3d(2px,-3px,0)}100%{transform:translate3d(13px,-8px,0)}}@keyframes v57-b{0%{transform:translate3d(-16px,8px,0);opacity:.92}50%{transform:translate3d(4px,-6px,0);opacity:1}100%{transform:translate3d(17px,-10px,0);opacity:.95}}@keyframes v57-c{0%{transform:translate3d(-6px,4px,0);opacity:.88}100%{transform:translate3d(7px,-5px,0);opacity:1}}@keyframes v57-d{0%{transform:translate3d(-11px,10px,0)}100%{transform:translate3d(10px,-8px,0)}}@keyframes v57-e{0%{transform:translate3d(10px,-6px,0)}100%{transform:translate3d(-12px,10px,0)}}@keyframes v57-f{0%{transform:translate3d(-9px,-8px,0)}100%{transform:translate3d(10px,7px,0)}}@keyframes v57-g{0%{transform:translate3d(11px,9px,0)}100%{transform:translate3d(-10px,-10px,0)}}@keyframes v57-h{0%{transform:translate3d(-12px,11px,0)}50%{transform:translate3d(3px,-3px,0)}100%{transform:translate3d(13px,-10px,0)}}@keyframes v57-i{0%{transform:translate3d(10px,-10px,0)}50%{transform:translate3d(-3px,4px,0)}100%{transform:translate3d(-12px,12px,0)}}


.panel-product-static-v57{position:relative!important;display:block!important;overflow:hidden!important;padding:0!important;background:#edf7ff!important}
.panel-product-static-v57 .p57-approved-bg{position:absolute!important;inset:0!important;z-index:1!important;background:url('../img/product-v57/approved-static-bg.webp') center center/cover no-repeat!important;transform:none!important;animation:none!important}
.panel-product-static-v57 .num{z-index:6!important}
.panel-product-static-v57 .p57-copy{position:absolute!important;left:clamp(66px,5.7vw,100px)!important;top:calc(var(--head-h) + 160px)!important;z-index:5!important;width:min(43vw,600px)!important;text-align:left!important}
.panel-product-static-v57 .p57-brand{font-family:'Noto Sans JP',sans-serif!important;font-size:16px!important;line-height:1.7!important;color:var(--navy)!important;letter-spacing:.14em!important;margin:0 0 18px!important}
.panel-product-static-v57 .p57-title{font-size:clamp(56px,4.15vw,70px)!important;line-height:1.16!important;color:var(--navy)!important;letter-spacing:.03em!important;margin:0 0 40px!important;white-space:nowrap!important}
.panel-product-static-v57 .p57-head{font-size:clamp(30px,2.35vw,38px)!important;font-weight:600!important;line-height:1.62!important;color:var(--navy)!important;letter-spacing:.05em!important;margin:0 0 24px!important}
.panel-product-static-v57 .p57-lead{font-size:18px!important;line-height:1.95!important;color:var(--ink)!important;margin:0 0 34px!important}
.panel-product-static-v57 .p57-price{font-family:'Noto Sans JP',sans-serif!important;font-size:17px!important;line-height:1.7!important;color:var(--ink)!important;margin:0 0 24px!important}
.panel-product-static-v57 .p57-btn{display:inline-flex!important;min-width:208px!important;min-height:52px!important;justify-content:space-between!important;gap:18px!important;border-radius:999px!important;padding:13px 22px!important;background:var(--navy)!important;color:var(--paper)!important;border-color:var(--navy)!important;transform:none!important;animation:none!important}
.panel-product-static-v57 .p57-btn::after{content:'→';font-family:"Noto Serif JP",serif;font-size:24px;line-height:1}
@media(max-width:1366px){.panel-product-static-v57 .p57-copy{width:min(45vw,560px)!important}.panel-product-static-v57 .p57-title{font-size:clamp(52px,4vw,64px)!important}.panel-product-static-v57 .p57-head{font-size:34px!important}
}
@media(max-width:1100px){.panel-product-static-v57 .p57-copy{width:min(47vw,520px)!important}.panel-product-static-v57 .p57-title{white-space:normal!important;margin-bottom:30px!important}.panel-product-static-v57 .p57-head{font-size:32px!important}
}
@media(max-width:820px){.panel-product-static-v57 .p57-approved-bg{background-position:64% center!important}.panel-product-static-v57 .p57-copy{left:22px!important;top:536px!important;width:calc(100% - 44px)!important}.panel-product-static-v57 .p57-title{font-size:39px!important;white-space:normal!important;margin-bottom:28px!important}.panel-product-static-v57 .p57-head{font-size:29px!important}.panel-product-static-v57 .p57-lead{margin-bottom:24px!important}.panel-product-static-v57 .p57-price{margin-bottom:24px!important}
}
@media(prefers-reduced-motion:reduce){.p2 .v57c-motion{animation:none!important;transform:none!important}
}



.panel-product-v66{
  position:relative!important;display:block!important;overflow:hidden!important;padding:0!important;
  background:#eaf6ff!important;isolation:isolate!important;
}
.panel-product-v66::after{display:none!important}
.panel-product-v66 .num{z-index:30!important}
.panel-product-v66 .p3v2-scene{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.panel-product-v66 .p3v2-layer{position:absolute;inset:0;pointer-events:none;transform-origin:50% 50%}
.panel-product-v66 .p3v2-layer img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;pointer-events:none;user-select:none;-webkit-user-drag:none;will-change:transform,opacity}
.panel-product-v66 .p3v2-layer--base{z-index:0}
.panel-product-v66 .p3v2-layer--light{z-index:1}
.panel-product-v66 .p3v2-layer--surface{z-index:2}
.panel-product-v66 .p3v2-layer--product-250{z-index:3}
.panel-product-v66 .p3v2-layer--product-500{z-index:4}
.panel-product-v66 .p3v2-layer--splash{z-index:5}
.panel-product-v66 .p3v2-layer--foreground{z-index:6}


.panel-product-v66 .p3v2-copy{position:absolute;left:clamp(66px,5.7vw,100px);top:calc(var(--head-h) + 152px);z-index:20;width:min(43vw,600px);text-align:left}
.panel-product-v66 .p3v2-brand{font-family:'Noto Sans JP',sans-serif;font-size:16px;line-height:1.7;color:var(--navy);letter-spacing:.14em;margin:0 0 18px}
.panel-product-v66 .p3v2-title{font-size:clamp(54px,4.05vw,68px);line-height:1.16;color:var(--navy);letter-spacing:.03em;margin:0 0 38px;white-space:nowrap}
.panel-product-v66 .p3v2-head{font-size:clamp(30px,2.35vw,38px);font-weight:600;line-height:1.62;color:var(--navy);letter-spacing:.05em;margin:0 0 24px}
.panel-product-v66 .p3v2-lead{font-size:18px;line-height:1.95;color:var(--ink);margin:0 0 32px}
.panel-product-v66 .p3v2-price{font-family:'Noto Sans JP',sans-serif;font-size:17px;line-height:1.7;color:var(--ink);margin:0 0 24px}
.panel-product-v66 .p3v2-btn{display:inline-flex;min-width:208px;min-height:52px;justify-content:space-between;gap:18px;border-radius:999px;padding:13px 22px;background:var(--navy);color:var(--paper);border-color:var(--navy);transform:none}
.panel-product-v66 .p3v2-btn::after{content:'→';font-family:"Noto Serif JP",serif;font-size:24px;line-height:1}
.panel-product-v66 .p3v2-btn:hover,.panel-product-v66 .p3v2-btn:focus-visible{background:var(--paper);color:var(--navy)}


@media (min-width:821px){
  .panel-product-v66 .p3v2-layer--light,
  .panel-product-v66 .p3v2-layer--surface,
  .panel-product-v66 .p3v2-layer--product-250,
  .panel-product-v66 .p3v2-layer--product-500,
  .panel-product-v66 .p3v2-layer--splash,
  .panel-product-v66 .p3v2-layer--foreground{opacity:0}
  .panel-product-v66 .p3v2-copy>*{opacity:0;transform:translate3d(0,20px,0);filter:blur(5px)}

  .panel-product-v66.is-active .p3v2-layer--light{animation:p3v2-fade .90s ease-out .04s both}
  .panel-product-v66.is-active .p3v2-layer--surface{animation:p3v2-fade .95s ease-out .16s both}
  .panel-product-v66.is-active .p3v2-layer--product-500{animation:p3v2-product-in 1.00s cubic-bezier(.16,.78,.26,1) .20s both}
  .panel-product-v66.is-active .p3v2-layer--product-250{animation:p3v2-product-in .94s cubic-bezier(.16,.78,.26,1) .32s both}
  .panel-product-v66.is-active .p3v2-layer--splash{animation:p3v2-fade 1.10s ease-out .40s both}
  .panel-product-v66.is-active .p3v2-layer--foreground{animation:p3v2-fade 1.00s ease-out .54s both}

  .panel-product-v66.is-active .p3v2-brand{animation:p3v2-copy-in .62s cubic-bezier(.16,.78,.26,1) .16s both}
  .panel-product-v66.is-active .p3v2-title{animation:p3v2-copy-in .70s cubic-bezier(.16,.78,.26,1) .28s both}
  .panel-product-v66.is-active .p3v2-head{animation:p3v2-copy-in .70s cubic-bezier(.16,.78,.26,1) .48s both}
  .panel-product-v66.is-active .p3v2-lead{animation:p3v2-copy-in .68s cubic-bezier(.16,.78,.26,1) .62s both}
  .panel-product-v66.is-active .p3v2-price{animation:p3v2-copy-in .64s cubic-bezier(.16,.78,.26,1) .76s both}
  .panel-product-v66.is-active .p3v2-btn{animation:p3v2-copy-in .64s cubic-bezier(.16,.78,.26,1) .88s both}

  .panel-product-v66 .p3v2-layer--light img{animation:p3v2-light-drift 16s ease-in-out 1.2s infinite alternate}
  .panel-product-v66 .p3v2-layer--surface img{animation:p3v2-surface-drift 22s ease-in-out 1.0s infinite alternate}
  .panel-product-v66 .p3v2-layer--product-250 img{animation:p3v2-250-float 9.5s ease-in-out 1.4s infinite alternate}
  .panel-product-v66 .p3v2-layer--product-500 img{animation:p3v2-500-float 11.5s ease-in-out 1.1s infinite alternate}
  .panel-product-v66 .p3v2-layer--splash img{animation:p3v2-splash-drift 14.5s ease-in-out 1.3s infinite alternate}
  .panel-product-v66 .p3v2-layer--foreground img{animation:p3v2-foreground-drift 11s ease-in-out 1.5s infinite alternate}
}

@keyframes p3v2-fade{from{opacity:0}to{opacity:1}}
@keyframes p3v2-product-in{0%{opacity:0;transform:translate3d(0,15px,0)}100%{opacity:1;transform:none}}
@keyframes p3v2-copy-in{0%{opacity:0;transform:translate3d(0,20px,0);filter:blur(5px)}100%{opacity:1;transform:none;filter:none}}
@keyframes p3v2-light-drift{0%{transform:translate3d(-4px,1px,0) scale(1.006);opacity:.88}100%{transform:translate3d(5px,-3px,0) scale(1.012);opacity:1}}
@keyframes p3v2-surface-drift{0%{transform:translate3d(-7px,1px,0) scale(1.006)}100%{transform:translate3d(8px,-1px,0) scale(1.012)}}
@keyframes p3v2-250-float{0%{transform:translate3d(0,2px,0)}100%{transform:translate3d(0,-2px,0)}}
@keyframes p3v2-500-float{0%{transform:translate3d(0,1px,0)}100%{transform:translate3d(0,-1px,0)}}
@keyframes p3v2-splash-drift{0%{transform:translate3d(-4px,4px,0) scale(1.004)}100%{transform:translate3d(5px,-7px,0) scale(1.009)}}
@keyframes p3v2-foreground-drift{0%{transform:translate3d(-6px,5px,0) scale(1.002)}100%{transform:translate3d(8px,-8px,0) scale(1.008)}}

@media(max-width:1366px) and (min-width:821px){
  .panel-product-v66 .p3v2-copy{width:min(45vw,560px)}
  .panel-product-v66 .p3v2-title{font-size:clamp(50px,3.9vw,62px)}
  .panel-product-v66 .p3v2-head{font-size:34px}
}
@media(max-width:1100px) and (min-width:821px){
  .panel-product-v66 .p3v2-copy{width:min(47vw,520px);top:calc(var(--head-h) + 130px)}
  .panel-product-v66 .p3v2-title{white-space:normal;margin-bottom:28px}
  .panel-product-v66 .p3v2-head{font-size:31px}
}


@media(max-width:820px){
  .panel-product-v66{min-height:1040px!important;padding:0!important}
  .panel-product-v66 .p3v2-scene{height:500px;bottom:auto}
  .panel-product-v66 .p3v2-layer img{object-position:69% center}
  .panel-product-v66 .p3v2-layer--light,
  .panel-product-v66 .p3v2-layer--surface,
  .panel-product-v66 .p3v2-layer--product-250,
  .panel-product-v66 .p3v2-layer--product-500,
  .panel-product-v66 .p3v2-layer--splash,
  .panel-product-v66 .p3v2-layer--foreground{opacity:1!important;animation:none!important;transform:none!important}
  .panel-product-v66 .p3v2-layer img{animation:none!important;transform:none!important}
  .panel-product-v66 .p3v2-copy{left:22px;top:535px;width:calc(100% - 44px);z-index:20}
  .panel-product-v66 .p3v2-brand{font-size:16px;margin-bottom:12px}
  .panel-product-v66 .p3v2-title{font-size:39px;white-space:normal;line-height:1.28;margin-bottom:28px}
  .panel-product-v66 .p3v2-head{font-size:29px;line-height:1.55;margin-bottom:22px}
  .panel-product-v66 .p3v2-lead{font-size:18px;line-height:1.9;margin-bottom:24px}
  .panel-product-v66 .p3v2-price{font-size:17px;margin-bottom:24px}
  .panel-product-v66 .p3v2-btn{min-width:196px}
}

@media(prefers-reduced-motion:reduce){
  .panel-product-v66 .p3v2-layer,.panel-product-v66 .p3v2-layer img,.panel-product-v66 .p3v2-copy>*{animation:none!important;transition:none!important;transform:none!important;filter:none!important;opacity:1!important}
}


@media (min-width:821px){
  
  .p2 h2 .concept-title-line{display:flex!important;flex-wrap:nowrap;width:max-content;opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  .p2 h2 .char,
  .panel-product-v66 .p3v2-title .char{display:inline-block;opacity:0;transform:translate3d(0,26px,0) rotate(3deg);filter:blur(6px);will-change:transform,opacity,filter}
  .p2.is-active h2 .char,
  .panel-product-v66.is-active .p3v2-title .char{animation:character-water-reveal .60s cubic-bezier(.16,.78,.26,1) calc(.10s + var(--i)*.046s) both}
  
  .p2 h2[data-character-split],
  .panel-product-v66 .p3v2-title[data-character-split]{opacity:0!important;transform:translateY(18px)!important;filter:none!important;animation:none!important;transition:opacity .68s ease-out,transform .68s ease-out!important}
  .p2.is-active h2[data-character-split],
  .panel-product-v66.is-active .p3v2-title[data-character-split]{opacity:1!important;transform:none!important}
}
@media (min-width:1101px){
  .panel-product-v66 .p3v2-title[data-character-split]{display:flex;flex-wrap:nowrap;width:max-content}
}
@media (max-width:820px){
  body.mobile-p2-animate .p2.is-active h2 .char{animation:character-water-reveal .54s cubic-bezier(.16,.78,.26,1) calc(.08s + var(--i)*.040s) both!important}
}
@media (prefers-reduced-motion:reduce){
  .p2 h2 .char,.panel-product-v66 .p3v2-title .char{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
}


body .p1::before{background-image:none!important}


.p1.has-fv-bottles::before{background-image:none!important;filter:none!important}
.fv-bottles{position:absolute;z-index:2;pointer-events:none;isolation:isolate;transform-origin:50% 88%}
.fv-bottles>*,.fv-bottles .fvb-sil{position:absolute;inset:0}
.fv-bottles .fvb-img,.fv-bottles .fvb-sil{background:url('../img/bottles-product-revised.webp') center bottom / contain no-repeat}
.fv-bottles .fvb-mask{-webkit-mask:url('../img/bottles-product-revised.webp') center bottom / contain no-repeat;mask:url('../img/bottles-product-revised.webp') center bottom / contain no-repeat}

.fv-bottles .fvb-shadow{filter:blur(7px);opacity:.42}
.fv-bottles .fvb-shadow.is-soft{filter:blur(16px);opacity:.22}
.fv-bottles .fvb-sil{filter:brightness(0);transform-origin:50% 93%;transform:translateY(.4%) scaleY(.055)} 
.fv-bottles .fvb-shadow.is-soft .fvb-sil{transform:translateY(1%) scaleX(1.08) scaleY(.1)}

.fv-bottles .fvb-caustic{mix-blend-mode:multiply;opacity:.12}
.fv-bottles .fvb-caustic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}


.fv-bottles .fvb-shadow{display:none}
.fv-bottles .fvb-float{position:absolute;inset:0;transform-origin:50% 60%}
.fv-bottles .fvb-float>*{position:absolute;inset:0}
.fv-bottles .fvb-glow{inset:auto 18% 2% 18%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(40,90,140,.22),rgba(40,90,140,0));filter:blur(8px)}
.fv-bottles .fvb-bubbles{inset:0;overflow:visible}
.fv-bottles .fvb-bubbles i{position:absolute;bottom:18%;width:var(--s);height:var(--s);border-radius:50%;opacity:0;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95) 0 18%,rgba(255,255,255,.25) 40%,rgba(210,236,252,.15) 62%,rgba(255,255,255,.7) 78%,rgba(255,255,255,0) 82%)}
@media (prefers-reduced-motion:no-preference){
  .fv-bottles .fvb-float{animation:fvb-float 7.5s ease-in-out infinite}
  .fv-bottles .fvb-glow{animation:fvb-glow 7.5s ease-in-out infinite}
  .fv-bottles .fvb-bubbles i{animation:fvb-bubble var(--d) linear var(--t) infinite}
}
@keyframes fvb-float{
  0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}
  50%{transform:translate3d(0,-14px,0) rotate(1.2deg)}
}
@keyframes fvb-glow{0%,100%{opacity:1;transform:scaleX(1)}50%{opacity:.55;transform:scaleX(.88)}}
@keyframes fvb-bubble{
  0%{opacity:0;transform:translate3d(0,0,0)}
  12%{opacity:.9}
  70%{opacity:.7}
  100%{opacity:0;transform:translate3d(var(--x),-340px,0)}
}.fv-bottles .fvb-depth{mix-blend-mode:multiply;background:linear-gradient(180deg,rgba(240,248,254,.25) 0%,rgba(232,244,252,.3) 65%,rgba(212,233,248,.5) 100%)}
@media (min-width:821px){
  body:not(.fv-copy-animate) .fv-bottles{opacity:0;transform:translate3d(0,30px,0) scale(.965)}
  body.fv-copy-animate .fv-bottles{animation:fv-product-arrival 1.02s cubic-bezier(.16,.78,.26,1) .36s both}
}
@media (max-width:820px){
  .fv-bottles .fvb-caustic{display:none}
  body:not(.mobile-fv-animate) .fv-bottles{opacity:0;transform:translate3d(0,24px,0) scale(.975)}
  body.mobile-fv-animate .fv-bottles{animation:fv-product-arrival-sp .86s cubic-bezier(.16,.78,.26,1) .64s both}
}
@keyframes fv-product-arrival-sp{0%{opacity:0;transform:translate3d(0,24px,0) scale(.975)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .fv-bottles{opacity:1!important;transform:none!important;animation:none!important}
  .fv-bottles .fvb-caustic{display:none}
}


.fv-bottles .fvb-unit{--img:none}

.fv-bottles .fvb-unit{inset:-9% -14% 3% -14%}

.fv-bottles .fvb-unit--250{--img:url('../img/fv/bottle-250-angled-blue.webp')}
.fv-bottles .fvb-unit--500{--img:url('../img/fv/bottle-500-angled-blue.webp')}
.fv-bottles .fvb-pose,.fv-bottles .fvb-float{position:absolute;inset:0}
.fv-bottles .fvb-unit .fvb-img{background:var(--img) center bottom / contain no-repeat}
.fv-bottles .fvb-unit .fvb-mask{-webkit-mask:var(--img) center bottom / contain no-repeat;mask:var(--img) center bottom / contain no-repeat}
.fv-bottles .fvb-unit--250 .fvb-pose{transform:none} 
.fv-bottles .fvb-unit--500 .fvb-pose{transform:none}
.fv-bottles .fvb-unit--250 .fvb-float{transform-origin:30% 72%}
.fv-bottles .fvb-unit--500 .fvb-float{transform-origin:69% 62%}
.fv-bottles .fvb-unit--250 .fvb-glow{inset:auto 56% 0 12%;height:5%}
.fv-bottles .fvb-unit--500 .fvb-glow{inset:auto 10% 3% 58%;height:6%}
@media (prefers-reduced-motion:no-preference){
  .fv-bottles .fvb-unit--250 .fvb-float{animation:fvb-float-a 6.8s ease-in-out infinite}
  .fv-bottles .fvb-unit--500 .fvb-float{animation:fvb-float-b 8.4s ease-in-out -3.1s infinite}
  .fv-bottles .fvb-unit--250 .fvb-glow{animation:fvb-glow 6.8s ease-in-out infinite}
  .fv-bottles .fvb-unit--500 .fvb-glow{animation:fvb-glow 8.4s ease-in-out -3.1s infinite}
}
@keyframes fvb-float-a{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(2px,-16px,0) rotate(-2deg)}}
@keyframes fvb-float-b{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(-2px,-11px,0) rotate(1.6deg)}}


.p1 .ph-full .fv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;pointer-events:none;opacity:0;transition:opacity .4s ease}
.p1 .ph-full .fv-video.is-playing{opacity:1}
@media (max-width:820px){.p1 .ph-full .fv-video{object-position:61% center}
}
@media (prefers-reduced-motion:reduce){.p1 .ph-full .fv-video{display:none}
}


@media (min-width:821px) and (prefers-reduced-motion:no-preference){
  
  .panel-product-v66.is-active .p3v2-brand{animation-delay:.76s}
  .panel-product-v66.is-active .p3v2-title .char{animation-delay:calc(.70s + var(--i)*.046s)}
  .panel-product-v66.is-active .p3v2-title[data-character-split]{transition-delay:.6s!important}
  .panel-product-v66.is-active .p3v2-head{animation-delay:1.08s}
  .panel-product-v66.is-active .p3v2-lead{animation-delay:1.22s}
  .panel-product-v66.is-active .p3v2-price{animation-delay:1.36s}
  .panel-product-v66.is-active .p3v2-btn{animation-delay:1.48s}
}


.panel-product-v66 .p3v2-title{font-weight:600}


.p2 .v57c-motion--front-clear img{filter:blur(.8px)!important}
.p2 .v57c-motion--front-soft img{filter:blur(1.2px)!important}
.p2 .v57c-motion--back img{filter:blur(1px)!important}
.p2 .v57c-motion--front-clear{animation:p2-float-front-a 11s ease-in-out -2s infinite!important}
.p2 .v57c-motion--front-soft{animation:p2-float-front-b 9.5s ease-in-out -5s infinite!important}
.p2 .v57c-motion--back-left{animation:p2-float-back-a 14s ease-in-out -3s infinite!important}
.p2 .v57c-motion--back-center{animation:p2-float-back-b 15.5s ease-in-out -8s infinite!important}
.p2 .v57c-motion--back-topright{animation:p2-float-back-a 16s ease-in-out -11s infinite!important}
.p2 .v57c-motion--back-rightcluster{animation:p2-float-back-b 13s ease-in-out -6s infinite!important}
@keyframes p2-float-front-a{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:1}
  25%{transform:translate3d(10px,-20px,0) scale(1.012);opacity:.94}
  50%{transform:translate3d(-4px,-8px,0) scale(1.02);opacity:1}
  75%{transform:translate3d(-12px,10px,0) scale(1.008);opacity:.96}
}
@keyframes p2-float-front-b{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:1}
  30%{transform:translate3d(-12px,-18px,0) scale(1.015);opacity:.93}
  60%{transform:translate3d(8px,-4px,0) scale(1.01);opacity:1}
  80%{transform:translate3d(12px,12px,0) scale(1.004);opacity:.96}
}
@keyframes p2-float-back-a{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(7px,-12px,0) scale(1.01)}
  66%{transform:translate3d(-8px,6px,0) scale(1.005)}
}
@keyframes p2-float-back-b{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  40%{transform:translate3d(-8px,-11px,0) scale(1.008)}
  75%{transform:translate3d(6px,8px,0) scale(1.012)}
}
@media(prefers-reduced-motion:reduce){.p2 .v57c-motion{animation:none!important;transform:none!important}
}


.site-loader__ripple{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.site-loader__logo.has-ripple{background:none!important}


.panel-product-v66 .p3v2-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;pointer-events:none}
@media(max-width:820px){.panel-product-v66 .p3v2-video{object-position:69% center}
}


@media(min-width:821px){
  .panel-product-v66 .p3v2-copy{top:max(calc(var(--head-h) + 70px),calc(50% - 245px))}
}



body .p1 .ph-full{background-image:url('../img/fv/fv-pool-wide.webp')!important;background-position:0 50%!important;background-size:cover!important} 

@media (min-width:821px){
  .p1::before{right:4%!important;bottom:calc(var(--foot-h) + 1vh)!important;width:clamp(460px,37vw,760px)!important;height:clamp(560px,80vh,900px)!important}
}
.p1 .ph-full .fv-ripple{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}


body .p2{background:#f4fafb!important}
body .p2 .concept-v57-layers,body .p2 .concept-v30-layers,body .p2 .p2-caustic-light{display:none!important}

body .p2 .p2-water{position:absolute;inset:0;z-index:0;pointer-events:none;background:url('../img/fv/fv-pool-wide.webp') 100% 50% / cover no-repeat} 
body .p2 .p2-water .fv-ripple{position:absolute;inset:0;width:100%;height:100%;display:block}


body .p2::before{display:none!important}

body .p2 h2,body .p2 h2 .char{text-shadow:0 0 2px #fff,0 0 3px #fff,0 0 5px #fff,0 0 8px #fff,0 0 12px #fff,0 0 18px #fff,0 0 26px #fff,0 0 38px rgba(255,255,255,.9),0 0 56px rgba(255,255,255,.8)!important}
body .p2 .inner>p,body .p2 .inner>p .concept-copy-line{color:var(--navy)!important;font-weight:500!important;text-shadow:0 0 2px #fff,0 0 3px #fff,0 0 4px #fff,0 0 6px #fff,0 0 9px #fff,0 0 13px #fff,0 0 18px #fff,0 0 28px rgba(255,255,255,.9),0 0 42px rgba(255,255,255,.8)!important}
body .p2 .inner::before{display:none!important}body .p2::after{display:none!important}

body .p2 .hair-compare::before{display:none!important}
body .p2 .hair-compare__block{
  background:linear-gradient(160deg,rgba(255,255,255,.52) 0%,rgba(255,255,255,.3) 100%)!important;
  -webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important;
  border:1px solid rgba(255,255,255,.75)!important;
  box-shadow:0 24px 48px rgba(38,96,118,.14),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.25)!important}
body .p2 .hair-compare__block::before{opacity:.35!important}
body .p2 .hair-compare__art::before{opacity:.45!important}
body .p2 .hair-compare__band{background:rgba(255,255,255,.62)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid rgba(255,255,255,.8)!important}

.purchase-water-bg{background-image:url('../img/p4/purchase-bg-poster.webp')!important;inset:0!important;transform:none!important;animation:none!important;opacity:1!important;background-position:center 40%!important}
.purchase-water-light,.purchase-water-glint,.purchase-droplet-layer,.purchase-water-scrim{display:none!important}

body .p4 .col,body .p4 .col::before,body .p4 .col::after,body .p4 .cols{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

.purchase-water-bg .purchase-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:0;transition:opacity .4s ease;pointer-events:none}
.purchase-water-bg .purchase-video.is-playing{opacity:1}
@media (prefers-reduced-motion:reduce){.purchase-water-bg .purchase-video{display:none}
}
body .p4 h2,body .p4 .col h3,body .p4 .col p,body .p4 .col span{text-shadow:0 0 2px #fff,0 0 3px #fff,0 0 4px #fff,0 0 6px #fff,0 0 9px #fff,0 0 14px #fff,0 0 22px rgba(255,255,255,.9)!important}
@media (min-width:821px){
  body .p4 .cols{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(18px,2vw,30px)!important;align-items:stretch!important;border:0!important;padding:0!important}
  body .p4 .col,body .p4 .col:nth-child(1),body .p4 .col:nth-child(2),body .p4 .col:nth-child(3){
    display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:12px!important;
    min-height:0!important;margin:0!important;padding:clamp(26px,2.2vw,38px) clamp(24px,2vw,34px)!important;
    border:1px solid rgba(255,255,255,.85)!important;border-radius:24px!important;
    background:linear-gradient(160deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.38) 100%)!important;
    box-shadow:0 20px 44px rgba(38,96,118,.12),inset 0 1px 0 rgba(255,255,255,.9)!important;transform:none!important}
  body .p4 .col::before{position:static!important;margin:0!important;padding:0!important}
  body .p4 .col h3{margin:0!important;white-space:normal!important}
  body .p4 .col p{margin:0!important;flex:1 1 auto!important}
  body .p4 .col .btn{margin:10px 0 0!important;align-self:flex-start!important;justify-self:auto!important}
}
body .p4{background-image:none!important}
body .concept-water-bg{background-image:none!important}
@media (max-width:820px){
  
  body .p1::before{left:auto!important;right:calc(50% - 130px)!important;bottom:92px!important;width:260px!important;height:330px!important}
  
  body .p2 h2{height:auto!important;margin:0 0 18px!important}
  body .p2 h2 .concept-title-line{display:flex!important;flex-wrap:nowrap!important;justify-content:center!important;white-space:nowrap!important;height:auto!important}
  body .p2 h2 .char{font-size:27px!important;line-height:1.5!important}
  
  body .p2 .inner>p{text-align:left!important;font-size:16px!important;line-height:1.9!important}
  body .p2 .inner>p .concept-copy-line{display:inline!important}
  body .p2 .inner>p .concept-copy-line:first-child{display:block!important}
  body .p2 .inner>p .mobile-concept-break{display:none!important}
  
  body .p2 .hair-compare__block,body .p2 .hair-compare__arrow,body .p2 .hair-compare figcaption{opacity:1!important;transform:none!important}
  body .p2 .hair-compare{width:100%!important;margin-left:0!important;margin-right:0!important;left:auto!important;right:auto!important}
  body .p2 .hair-compare__blocks{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  body .p2 .hair-compare__arrow{justify-self:center!important;transform:rotate(90deg)!important}
  body .p2 .hair-compare__block{min-height:0!important;border-radius:20px!important}
  
  body .panel-product-v66 .p3v2-title{font-size:26px!important;white-space:nowrap!important;letter-spacing:.02em!important}
}

@media (max-width:820px){
  
  body .p1 .inner{top:calc(64px + clamp(18px,4vh,40px))!important}
  
  body .p1 .sub-copy{margin-bottom:0!important}
  body .p1 .sub-copy::before{font-size:15px!important;line-height:1.85!important;letter-spacing:.05em!important} 
  body .p1{--fvb-h:clamp(170px,calc((100vh - 420px) * .92),390px)}
  @supports (height:100svh){body .p1{--fvb-h:clamp(170px,calc((100svh - 420px) * .92),390px)}
}
  body .p1::before{right:calc(50% - var(--fvb-h) * .394)!important;bottom:84px!important;width:calc(var(--fvb-h) * .788)!important;height:var(--fvb-h)!important}
  body .p1>.btn.mobile-fv-cta{position:absolute!important;z-index:3!important;left:0!important;right:0!important;bottom:calc(26px + env(safe-area-inset-bottom))!important;width:fit-content!important;margin:0 auto!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  
  body:not(.mobile-fv-animate) .p1.is-active>.btn.mobile-fv-cta{clip-path:none!important}
  body.mobile-fv-animate .p1.is-active>.btn.mobile-fv-cta{clip-path:none!important;animation:v94-cta-in .7s cubic-bezier(.16,.78,.26,1) 1.18s both!important}
  @keyframes v94-cta-in{0%{opacity:0;transform:translate3d(0,12px,0)}100%{opacity:1;transform:none}}


  
  body.mobile-menu-open{overflow:hidden!important}

  body.mobile-menu-open .mobile-menu-scrim{opacity:0!important}
}
.p2-scrim,.p1-fade,.p3-sp-br{display:none}

body::after{content:"";position:fixed;inset:0;z-index:599;pointer-events:none;background:linear-gradient(145deg,#ffffff 0%,#f8fdff 48%,#e8f7fc 100%);animation:pre-cover-out .4s ease 4s forwards}
body.opening-mounted::after{display:none}
@keyframes pre-cover-out{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){body::after{display:none}
}

@media (max-width:820px){
  html body .p4{min-height:0!important;height:auto!important;padding:calc(64px + 44px) 20px 56px!important;gap:0!important}
  html body .p4 h2{margin:0 0 22px!important;padding:0!important;text-align:center!important}
  html body .p4 h2::after{display:none!important}
  html body .p4 h2 .char{font-size:clamp(21px,5.9vw,24px)!important}
  html body .p4 .cols{display:flex!important;flex-direction:column!important;gap:10px!important;width:100%!important;margin:0!important;padding:0!important;border:0!important}
  
  html body .p4 .col,html body .p4 .col:nth-child(1),html body .p4 .col:nth-child(2),html body .p4 .col:nth-child(3){position:relative!important;display:grid!important;grid-template-columns:26px minmax(0,1fr) 34px!important;grid-template-rows:auto auto!important;column-gap:10px!important;row-gap:3px!important;align-items:center!important;min-height:0!important;height:auto!important;margin:0!important;padding:14px 14px 14px 16px!important;
    border:1px solid rgba(255,255,255,.9)!important;border-radius:14px!important;background:rgba(255,255,255,.8)!important;box-shadow:0 8px 22px rgba(33,26,60,.08)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;transform:none!important}
  html body .p4 .col::before{grid-column:1!important;grid-row:1 / span 2!important;align-self:center!important;margin:0!important;position:static!important;font-family:"Noto Serif JP",serif!important;font-variant-numeric:lining-nums!important;font-size:14px!important;font-weight:600!important;letter-spacing:.1em!important;color:rgba(33,26,60,.5)!important}
  html body .p4 .col::after{display:none!important}
  html body .p4 .col h3{grid-column:2!important;grid-row:1!important;margin:0!important;font-size:16px!important;line-height:1.4!important;letter-spacing:.05em!important;white-space:nowrap!important;text-shadow:none!important}
  html body .p4 .col p{grid-column:2!important;grid-row:2!important;margin:0!important;min-height:0!important;font-size:12px!important;line-height:1.5!important;letter-spacing:.02em!important;color:rgba(35,31,32,.72)!important;text-shadow:none!important}
  html body .p4 .col .btn{position:static!important;grid-column:3!important;grid-row:1 / span 2!important;justify-self:end!important;align-self:center!important;display:flex!important;align-items:center!important;justify-content:center!important;width:34px!important;min-width:0!important;max-width:none!important;height:34px!important;min-height:0!important;margin:0!important;padding:0!important;border-radius:50%!important;
    font-size:0!important;background:var(--navy)!important;border:0!important;box-shadow:none!important;color:var(--paper)!important}
  html body .p4 .col .btn::after{content:"→"!important;margin:0!important;font-family:"Noto Sans JP",sans-serif!important;font-size:14px!important;line-height:1!important;color:var(--paper)!important}
  html body .p4 .col .btn::before{content:""!important;position:absolute!important;inset:0!important;border-radius:14px!important;z-index:1!important;display:block!important;background:none!important} 

  
  html body .p4 .purchase-water-scene::after{content:"";position:absolute;inset:0;z-index:10;pointer-events:none;
    background:linear-gradient(180deg,#f6fbfe 0%,rgba(246,251,254,.55) 9%,rgba(246,251,254,0) 24%,rgba(247,251,255,0) 72%,rgba(247,251,255,.6) 88%,#f7fbff 100%)}
  
  html body .p5 .wack-ambient-scene{background:#f7fbff url('../img/wack-bg-poster.webp') 36% center / cover no-repeat!important}
  html body .p5::before{content:""!important;display:block!important;position:absolute!important;left:0;right:0;top:0;height:120px;z-index:1!important;pointer-events:none;background:linear-gradient(180deg,#f7fbff 0%,rgba(247,251,255,0) 100%)!important}
}

@media (max-width:820px){
  
  html body .panel-product-v66{--p3-scene-h:min(430px,108vw);min-height:0!important;height:auto!important;padding:0 0 52px!important;background:linear-gradient(180deg,#eef7fd 0%,#f6fbfe 100%)!important}
  html body .panel-product-v66 .p3v2-scene{inset:0 0 auto 0!important;height:var(--p3-scene-h)!important}
  html body .panel-product-v66 .p3v2-video,html body .panel-product-v66 .p3v2-layer img{object-position:93% 50%!important} 
  html body .panel-product-v66 .p3v2-scene::after{content:"";position:absolute;inset:0;z-index:50;pointer-events:none;
    background:linear-gradient(180deg,rgba(246,251,254,1) 0%,rgba(246,251,254,.5) 8%,rgba(246,251,254,0) 20%,rgba(238,247,253,0) 58%,rgba(238,247,253,.7) 80%,#eef7fd 100%)}

  html body .panel-product-v66 .p3v2-copy{position:relative!important;left:auto!important;top:auto!important;width:auto!important;margin:calc(var(--p3-scene-h) - 36px) 22px 0!important;text-align:center!important}
  html body .panel-product-v66 .p3v2-copy>*{text-align:center!important;margin-left:auto!important;margin-right:auto!important}
  html body .panel-product-v66 .p3v2-brand{margin-bottom:6px!important;font-family:"Noto Serif JP",serif!important;font-size:0!important;letter-spacing:.24em!important;color:var(--navy)!important}
  html body .panel-product-v66 .p3v2-brand::before{content:"AQUA HARMONY";font-size:14px;font-weight:600}
  html body .panel-product-v66 .p3v2-title{margin-bottom:18px!important;white-space:nowrap!important;line-height:1.3!important}
  html body .panel-product-v66 .p3v2-title .char{font-size:clamp(23px,6.6vw,27px)!important}
  html body .panel-product-v66 .p3v2-head{position:relative;margin-bottom:14px!important;padding-top:20px!important;font-size:clamp(18px,5.3vw,21px)!important;line-height:1.75!important;letter-spacing:.06em!important;white-space:nowrap!important}
  html body .panel-product-v66 .p3v2-head::before{content:"";position:absolute;top:0;left:50%;width:32px;height:1px;margin-left:-16px;background:rgba(33,26,60,.4)}
  html body .panel-product-v66 .p3v2-lead{margin-bottom:24px!important;font-size:14px!important;line-height:1.9!important;letter-spacing:.04em!important;color:var(--ink)!important}
  html body .panel-product-v66 .p3-sp-br{display:inline}

  
  html body .panel-product-v66 .p3v2-price{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;max-width:340px;margin-bottom:24px!important;font-size:0!important;line-height:1!important}
  html body .panel-product-v66 .p3v2-price-sep{display:none}
  html body .panel-product-v66 .p3v2-size{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px 12px;border:1px solid rgba(33,26,60,.14);border-radius:14px;background:rgba(255,255,255,.78);box-shadow:0 8px 20px rgba(33,26,60,.06)}
  html body .panel-product-v66 .p3v2-size-ml{font-family:"Noto Serif JP",serif;font-variant-numeric:lining-nums;font-size:17px;font-weight:600;letter-spacing:.08em;color:rgba(33,26,60,.7)}
  html body .panel-product-v66 .p3v2-size-yen{font-family:"Noto Serif JP",serif;font-size:21px;font-weight:500;letter-spacing:.02em;color:var(--navy)}
  html body .panel-product-v66 .p3v2-size-tax{font-family:"Noto Sans JP",sans-serif;font-size:11px;letter-spacing:.04em;color:rgba(35,31,32,.62)}

  html body .panel-product-v66 .p3v2-btn{display:flex!important;width:fit-content!important;min-width:0!important}
}

@media (max-width:820px){
  html body .p2{min-height:0!important;height:auto!important;padding:calc(64px + 30px) 20px 44px!important;align-items:stretch!important}
  
  
  html body .p1 .p1-fade{display:block;position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(250,253,255,0) 0%,rgba(250,253,255,.42) 45%,rgba(250,253,255,.95) 100%)}
  html body .p2 .p2-scrim{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(250,253,255,.95) 0%,rgba(250,253,255,.82) 14%,rgba(248,252,255,.68) 45%,rgba(244,250,254,.74) 80%,rgba(246,251,254,1) 100%)}
  html body .p2 .num{z-index:3!important}
  html body .p2 .inner,html body .p2 .hair-compare,html body .p2>.btn{position:relative!important;z-index:2!important}

  
  html body .p2 .inner{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;text-align:center!important}
  html body .p2 h2{margin:0 0 16px!important;text-shadow:none!important}
  
  html body .p2 h2 .char{font-size:clamp(20px,calc((100vw - 60px) / 11.5),30px)!important;letter-spacing:.02em!important;text-shadow:none!important}
  
  html body .p2 .inner>p{width:auto!important;max-width:none!important;margin:0!important;font-size:0!important;line-height:0!important;text-align:center!important;text-shadow:none!important}
  html body .p2 .inner>p .concept-copy-line{display:inline!important;font-family:"Noto Serif JP",serif!important;font-size:14.5px!important;line-height:1.95!important;letter-spacing:.04em!important;color:var(--ink)!important;text-shadow:none!important}
  html body .p2 .inner>p .concept-copy-line:first-child,html body .p2 .inner>p .concept-copy-line:last-child{display:block!important}
  html body .p2 .inner>p .mobile-concept-break{display:inline!important}

  
  html body .p2 .hair-compare{width:100%!important;margin:26px 0 0!important;padding:0!important;left:auto!important;right:auto!important;transform:none}
  html body .p2 .hair-compare__blocks{display:grid!important;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr)!important;gap:5px!important;align-items:stretch!important}
  html body .p2 .hair-compare__block{display:flex!important;flex-direction:column!important;align-items:stretch!important;min-height:0!important;height:auto!important;margin:0!important;padding:14px 10px 10px!important;border-radius:16px!important;text-align:center!important;transform:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  html body .p2 .hair-compare__block--conventional{background:rgba(255,255,255,.55)!important;border:1px solid rgba(33,26,60,.10)!important;box-shadow:none!important}
  html body .p2 .hair-compare__block--aqua{background:rgba(255,255,255,.94)!important;border:1px solid var(--navy)!important;box-shadow:0 14px 30px rgba(33,26,60,.12)!important}
  html body .p2 .hair-compare__block h3{margin:0 0 8px!important;padding:0!important;height:auto!important;transform:none!important;white-space:nowrap!important;line-height:1.3!important;text-shadow:none!important}
  html body .p2 .hair-compare__block--conventional h3{font-family:"Noto Serif JP",serif!important;font-size:13.5px!important;font-weight:600!important;letter-spacing:.06em!important;color:var(--navy)!important}
  html body .p2 .hair-compare__block--aqua h3{font-family:"Noto Serif JP",serif!important;font-size:clamp(13px,3.9vw,16px)!important;font-weight:600!important;letter-spacing:.04em!important;color:var(--navy)!important}
  html body .p2 .hair-compare__art{position:relative!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important}
  html body .p2 .hair-compare__art img{position:static!important;display:block!important;align-self:center!important;width:auto!important;height:104px!important;max-width:100%!important;margin:0 0 8px!important;transform:none!important;animation:none!important;object-fit:contain!important}
  html body .p2 .hair-compare__block--conventional .hair-compare__art img{filter:saturate(.55)!important;opacity:.85!important}
  
  html body .p2 .hair-compare__art{height:150px!important}
  html body .p2 .hair-compare__art img{height:146px!important;margin:2px auto 0!important}
  html body .p2 .hair-compare__label{position:absolute!important;z-index:2!important;display:block!important;width:auto!important;min-width:0!important;height:auto!important;margin:0!important;padding:0!important;transform:none!important;background:none!important;border:0!important;
    font-family:"Noto Sans JP",sans-serif!important;font-size:10.5px!important;font-weight:500!important;line-height:1.4!important;letter-spacing:0!important;white-space:nowrap!important;color:var(--navy)!important;text-shadow:0 0 6px #fff,0 0 3px #fff!important}
  html body .p2 .hair-compare__label::before{display:none!important}
  html body .p2 .hair-compare__label::after{content:""!important;display:block!important;position:absolute!important;top:50%!important;width:14px!important;height:1px!important;background:rgba(33,26,60,.6)!important;opacity:1!important}
  html body .p2 .hair-compare__label--coating,html body .p2 .hair-compare__label--amino{left:0!important;right:auto!important;bottom:auto!important;text-align:left!important}
  html body .p2 .hair-compare__label--lack,html body .p2 .hair-compare__label--mineral,html body .p2 .hair-compare__label--moisture{right:0!important;left:auto!important;text-align:right!important}
  html body .p2 .hair-compare__label--coating{top:10px!important}
  @media (max-width:375px){html body .p2 .hair-compare__label--coating{top:30px!important;font-size:9.5px!important}
}
  
  @media (max-width:340px){
    html body .p2 .hair-compare__block{padding-left:7px!important;padding-right:7px!important}
    html body .p2 .hair-compare__blocks .hair-compare__block--aqua h3{font-size:12px!important;letter-spacing:.02em!important}
    html body .p2 .hair-compare__blocks .hair-compare__block .hair-compare__band{font-size:10.5px!important;letter-spacing:0!important;padding-left:2px!important;padding-right:2px!important}
    html body .p2 .hair-compare__blocks .hair-compare__label{font-size:9.5px!important}
}
  html body .p2 .hair-compare__label--lack{top:auto!important;bottom:26px!important}
  html body .p2 .hair-compare__label--mineral{top:16px!important;bottom:auto!important}
  html body .p2 .hair-compare__label--amino{top:66px!important}
  html body .p2 .hair-compare__label--moisture{top:auto!important;bottom:22px!important}
  html body .p2 .hair-compare__label--coating::after,html body .p2 .hair-compare__label--amino::after{left:calc(100% + 3px)!important;right:auto!important;transform:rotate(12deg)!important;transform-origin:left center!important}
  html body .p2 .hair-compare__label--lack::after,html body .p2 .hair-compare__label--mineral::after,html body .p2 .hair-compare__label--moisture::after{right:calc(100% + 3px)!important;left:auto!important;transform:rotate(-12deg)!important;transform-origin:right center!important}
  html body .p2 .hair-compare__band{margin:auto 0 0!important;padding:8px 4px!important;border-radius:10px!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    font-family:"Noto Serif JP",serif!important;font-size:11.5px!important;line-height:1.5!important;letter-spacing:.02em!important;white-space:normal!important;text-shadow:none!important}
  html body .p2 .hair-compare__art+.hair-compare__band{margin-top:10px!important}
  html body .p2 .hair-compare__block--conventional{background:rgba(255,255,255,.72)!important;border-color:rgba(33,26,60,.16)!important}
  
  html body .p2 .hair-compare__block::before,html body .p2 .hair-compare__block::after{display:none!important}
  html body .p2 .hair-compare__block--conventional .hair-compare__band{background:rgba(33,26,60,.08)!important;color:var(--navy)!important;font-weight:600!important}
  html body .p2 .hair-compare__block--aqua .hair-compare__band{background:var(--navy)!important;color:var(--paper)!important}
  html body .p2 .hair-compare__arrow{display:flex!important;align-items:center!important;justify-content:center!important;align-self:center!important;justify-self:center!important;width:16px!important;margin:0!important;transform:none!important;font-size:14px!important;color:var(--navy)!important;opacity:.7}
  html body .p2 .hair-compare figcaption{width:auto!important;max-width:none!important;margin:20px 0 0!important;padding:16px 0 0!important;border-top:1px solid rgba(33,26,60,.14)!important;font-family:"Noto Serif JP",serif!important;font-size:13.5px!important;font-weight:400!important;line-height:1.85!important;letter-spacing:.02em!important;text-align:center!important;color:var(--navy)!important;text-shadow:none!important}

  
  html body .p2>.btn{display:flex!important;align-self:center!important;width:fit-content!important;min-width:0!important;margin:20px auto 0!important}
  html body .p2 .inner>p .v95-break{display:inline!important}
}


@media (min-width:821px){
  .p1 .inner{margin-left:0}
  .p1 h1{white-space:nowrap}
  .p5 .inner{width:fit-content;max-width:100%;margin-right:0}
}


.p1,.p2{--r18-navy:#1d374c;--r18-navy-hi:#2c4c63;--r18-navy-lo:#13283a;--r18-ink:#1f3a4d;--r18-ground:#eee8df;--r18-face:#f6f2ec;--r18-line:rgba(31,58,77,.26)}


html body .p1::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 58% 52% at 10% 6%,rgba(70,110,136,.34) 0%,rgba(70,110,136,0) 72%),
             linear-gradient(170deg,var(--r18-navy-hi) 0%,var(--r18-navy) 44%,var(--r18-navy-lo) 100%)!important;
  animation:none!important;transform:none!important;
  -webkit-mask-image:var(--r18-fv-mask);mask-image:var(--r18-fv-mask)}
html body .p1 .water-ripples{
  inset:0 auto 0 0!important;width:var(--r18-caustic-w,100%)!important;height:auto!important;left:0!important;top:0!important;
  background:url('../img/fv/caustic-still.webp') 42% 50% / cover no-repeat!important;
  opacity:var(--r18-caustic,.28)!important;mix-blend-mode:screen!important;
  filter:grayscale(1) brightness(.556) contrast(9) blur(1px)!important;
  animation:none!important;transform:none!important;
  -webkit-mask-image:var(--r18-caustic-mask,var(--r18-fv-mask))!important;mask-image:var(--r18-caustic-mask,var(--r18-fv-mask))!important}
html body .p1 .water-ripples::before,html body .p1 .water-ripples::after{display:none!important}
html body .p1 .water-ripples video{mix-blend-mode:normal!important;filter:none!important;transform:none!important;object-position:42% 50%!important}
html body .p1 .p1-fade{display:none!important}

@media (prefers-reduced-motion:reduce){html body .p1 .water-ripples{display:block!important}}

html body .p1 h1,html body .p1 h1 .char{color:#fff!important;text-shadow:none!important}
html body .p1 .sub-copy,html body .p1 .sub-copy::before{color:rgba(255,255,255,.9)!important;text-shadow:none!important}
html body .p1 .inner::before{background:rgba(255,255,255,.6)!important}
html body .p1 .btn{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.86)!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body .p1 .btn::after{color:#fff!important}
html body .p1 .btn:hover,html body .p1 .btn:focus-visible{background:#fff!important;color:var(--r18-navy)!important}
html body .p1 .btn:hover::after,html body .p1 .btn:focus-visible::after{color:var(--r18-navy)!important}
html body .p1 .btn:focus-visible{outline-color:#fff!important}

@media (min-width:821px){
  
  .p1{--r18-fv-mask:radial-gradient(ellipse 63% 122% at 0% 44%,#000 0 85%,transparent 100%);
      --r18-caustic-w:64vw;--r18-caustic-mask:radial-gradient(ellipse 98.4% 122% at 0% 44%,#000 0 85%,transparent 100%)}
  
  body.is-fv header .logo{filter:brightness(0) invert(1)!important;transition:transform .72s cubic-bezier(.16,.78,.26,1),filter .5s ease!important}
}


html body .p2{background:var(--r18-ground)!important}
html body .p2 .p2-water,html body .p2 .p2-scrim{display:none!important;background:none!important}
html body .p2 .inner::before,html body .p2::before,html body .p2::after,html body .p2 .hair-compare::before{display:none!important}
html body .p2 .p2-pool{position:absolute;z-index:0;pointer-events:none;overflow:hidden;
  background:#e9eff2 url('../img/fv/caustic-still.webp') 50% 50% / cover no-repeat;
  -webkit-mask:var(--r18-pool-mask) 0 0 / 100% 100% no-repeat;mask:var(--r18-pool-mask) 0 0 / 100% 100% no-repeat}
html body .p2 .p2-pool__video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}

html body .p2 .p2-pool::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,var(--r18-pool-veil,.34))}
html body .p2 .p2-leaf{position:absolute;z-index:1;pointer-events:none;background:url('../img/deco/top02-leaf-shadow.webp') 0 0 / cover no-repeat;mix-blend-mode:multiply;opacity:.45;transform:scaleX(-1)}
html body .p2 .p2-branch{position:absolute;z-index:1;pointer-events:none;background:url('../img/deco/top02-branch.webp') 50% 100% / contain no-repeat;mix-blend-mode:multiply;opacity:.85}
html body .p2 .p2-script{position:absolute;z-index:4;pointer-events:none;font-family:"Ephesis",cursive;font-weight:400;line-height:1.05;letter-spacing:.01em;color:rgba(44,76,99,.82);transform:rotate(-9deg);transform-origin:left bottom;white-space:nowrap}
html body .p2 .p2-script>span{display:block}
html body .p2 .p2-script>span+span{padding-left:1.5em}

html body .p2 .p2-label{display:block;font-family:"Noto Serif JP",serif;color:var(--r18-ink);line-height:1.4;text-align:left}
html body .p2 .p2-label__no{display:block;font-size:17px;font-weight:500;letter-spacing:.08em}
html body .p2 .p2-label__en{display:block;font-size:12.5px;font-weight:500;letter-spacing:.26em}

html body .p2 h2,html body .p2 h2 .char,html body .p2 .inner>p,html body .p2 .inner>p .concept-copy-line{text-shadow:none!important}
html body .p2 h2,html body .p2 h2 .char{color:var(--r18-ink)!important}

html body .p2 .btn{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

html body .p2 .hair-compare__block{background:var(--r18-face)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid var(--r18-line)!important;box-shadow:0 18px 40px rgba(64,52,36,.06)!important}
html body .p2 .hair-compare__block::before,html body .p2 .hair-compare__block::after,html body .p2 .hair-compare__art::before{display:none!important}
html body .p2 .hair-compare__block h3,html body .p2 .hair-compare__label,html body .p2 .hair-compare figcaption{text-shadow:none!important}
html body .p2 .hair-compare__arrow{font-family:"Noto Serif JP",serif!important;filter:none!important}
html body .p2 .hair-compare__band{background:transparent!important;border:1px solid var(--r18-line)!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--r18-ink)!important}
html body .p2 .hair-compare__block--aqua{border-color:rgba(31,58,77,.5)!important}
html body .p2 .hair-compare__block--aqua .hair-compare__band{background:var(--r18-ink)!important;border-color:var(--r18-ink)!important;color:#fff!important}
html body .p2 .hair-compare__art img{filter:none!important}

@media (min-width:821px){
  .p2{--r18-pool-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M1000 0H300C205 40 150 118 160 210c10 92-100 132-120 240-20 108 60 168 70 250 10 90-70 150-40 230 15 40 50 70 90 70h840z'/%3E%3C/svg%3E")}
  html body .p2 .p2-pool{top:0;right:0;bottom:0;width:58vw}
  html body .p2 .p2-leaf{top:0;left:0;width:46vw;height:62%}
  html body .p2 .p2-branch{left:calc(50% - clamp(170px,14vw,240px));bottom:calc(var(--foot-h) - 40px);width:clamp(200px,17vw,270px);height:clamp(291px,24.7vw,393px)}
  html body .p2 .p2-script{left:2px;top:calc(100% + clamp(14px,2.4vh,30px));font-size:clamp(30px,min(3vw,4.4vh),46px)}
  html body .p2 .p2-label{position:absolute;left:0;bottom:calc(100% + 18px);margin:0}
  html body .p2 .btn{background:transparent!important;border:1px solid rgba(31,58,77,.7)!important;color:var(--r18-ink)!important}
  html body .p2 .btn:hover,html body .p2 .btn:focus-visible{background:var(--r18-ink)!important;color:#fff!important}
  html body .p2 .inner>p,html body .p2 .inner>p .concept-copy-line{color:var(--r18-ink)!important}
}

@media (max-width:820px){
  
  .p1{--r18-fv-mask:radial-gradient(ellipse 125% calc(var(--fvb-h) * .58) at 58% calc(100% - 92px - var(--fvb-h) * .5),transparent 0 52%,#000 100%)}
  
  body:not(.mobile-after-fv):not(.mobile-menu-open) header{background:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  body:not(.mobile-after-fv):not(.mobile-menu-open) header .logo{filter:brightness(0) invert(1)!important}
  body:not(.mobile-after-fv):not(.mobile-menu-open) header .burger::after{background:linear-gradient(#fff,#fff) center top / 23px 1px no-repeat,linear-gradient(#fff,#fff) center / 23px 1px no-repeat,linear-gradient(#fff,#fff) center bottom / 23px 1px no-repeat!important}
  header{transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease!important}

  
  html body .p2 .p2-pool{display:none!important}
  html body .p2 .hair-compare::before{display:block!important;content:""!important;position:absolute!important;z-index:-1!important;inset:-46px -20px -34px -20px!important;
    opacity:1!important;filter:none!important;border-radius:0!important;transform:none!important;animation:none!important;
    background:linear-gradient(rgba(255,255,255,.34),rgba(255,255,255,.34)),#e9eff2 url('../img/fv/caustic-still.webp') 50% 50% / cover no-repeat!important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 130C140 40 300 20 450 70S760 160 880 70C930 35 970 30 1000 45V925C900 995 740 1000 580 955S270 895 130 945C70 965 30 975 0 960Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat!important;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 130C140 40 300 20 450 70S760 160 880 70C930 35 970 30 1000 45V925C900 995 740 1000 580 955S270 895 130 945C70 965 30 975 0 960Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat!important}
  html body .p2 .hair-compare figcaption{position:relative;z-index:1;border-top-color:rgba(31,58,77,.18)!important}
  
  @keyframes r18-compare-in{0%{opacity:0;clip-path:inset(-60px 100% -50px -30px);transform:translate3d(0,12px,0)}100%{opacity:1;clip-path:inset(-60px -30px -50px -30px);transform:none}}
  body.mobile-p2-animate .p2.is-active .hair-compare{animation:r18-compare-in .76s cubic-bezier(.16,.78,.26,1) 1.06s both!important}
  html body .p2 .p2-leaf{top:0;left:0;width:100%;height:46%;opacity:.38;background-position:0 0}
  html body .p2 .p2-branch{right:-34px;bottom:-18px;width:150px;height:218px;opacity:.85}
  html body .p2 .p2-script{right:-4px;top:-80px;font-size:24px;transform-origin:right bottom;text-align:left}
  html body .p2 .p2-label{position:absolute;left:0;bottom:calc(100% + 26px);margin:0}
  html body .p2 .p2-label__no{font-size:15px}
  html body .p2 .p2-label__en{font-size:11px;letter-spacing:.22em}
  html body .p2 .hair-compare__block--conventional{background:var(--r18-face)!important;border-color:var(--r18-line)!important;box-shadow:none!important}
  html body .p2 .hair-compare__block--aqua{background:var(--r18-face)!important;border-color:rgba(31,58,77,.5)!important;box-shadow:0 12px 26px rgba(64,52,36,.08)!important}
  html body .p2 .hair-compare__block--conventional .hair-compare__band{background:rgba(31,58,77,.06)!important;border:1px solid var(--r18-line)!important}
  
  html body .p2 .hair-compare__block--aqua h3{font-family:"Noto Serif JP",serif!important;font-size:clamp(12px,3.6vw,15px)!important;font-weight:500!important;letter-spacing:.02em!important;line-height:calc(clamp(13px,3.9vw,16px) * 1.3)!important}
  @media (max-width:340px){html body .p2 .hair-compare__blocks .hair-compare__block--aqua h3{font-size:11px!important;line-height:15.6px!important}}
  html body .p2>.btn{box-shadow:none!important}
}


html body .p1{--r18-fv-mask:none;--r18-caustic-mask:none;--r18-caustic-w:100%;
  --r19-cream:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 1000C553 940 703 279 1000 0V1000Z'/%3E%3C/svg%3E")}

html body .p1 .ph-full{background-image:none!important;background-color:transparent!important}
html body .p1 .ph-full .fv-ripple{display:none!important}

html body .p1 .p1-cream{position:absolute;z-index:2;right:0;bottom:0;pointer-events:none;background:var(--r18-ground);
  -webkit-mask:var(--r19-cream) 0 0 / 100% 100% no-repeat;mask:var(--r19-cream) 0 0 / 100% 100% no-repeat}

html body .p1 .p1-vertical{position:absolute;z-index:2;pointer-events:none;writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:"Noto Serif JP",serif;font-weight:400;line-height:1;letter-spacing:.24em;white-space:nowrap;color:rgba(31,58,77,.74)}

html body .fv-bottles .fvb-img{filter:drop-shadow(0 16px 22px rgba(30,40,50,.18))}

@media (min-width:821px){
  html body .p1 .p1-cream{width:90vw;height:64%}
  html body .p1 .p1-vertical{right:clamp(12px,1vw,24px);bottom:calc(var(--foot-h) + 6vh);font-size:13px}
  
  body.is-fv header nav>ul{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.5)!important;box-shadow:none!important}
  body.is-fv header nav>ul>li>a,body.is-fv header nav>ul>li>.parent{color:#fff!important}
  body.is-fv header nav>ul>li>a:focus-visible,body.is-fv header nav>ul>li>.parent:focus-visible{outline-color:#fff}
  
  body.is-fv header .has-sub .sub{background:rgba(250,248,244,.94)!important}
  header nav>ul{transition:background-color .5s ease,border-color .5s ease,box-shadow .5s ease}
  header nav>ul>li>a,header nav>ul>li>.parent{transition:color .5s ease}
}
@media (max-width:820px){
  
  html body .p1{--r19-bottom:calc(18px + max(0px, (100vh - 844px) / 2))}
  @supports (height:100svh){html body .p1{--r19-bottom:calc(18px + max(0px, (100svh - 844px) / 2))}}
  html body .p1::before{bottom:var(--r19-bottom)!important}
  
  html body .p1{--r19-cream:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 901C466 693 667 224 1000 0V1000H0Z'/%3E%3C/svg%3E")}
  html body .p1 .p1-cream{width:100%;height:calc(var(--r19-bottom) + var(--fvb-h))}
  html body .p1 .p1-vertical{right:10px;bottom:22px;font-size:11px;letter-spacing:.2em}
  
  html body .p1>.btn.mobile-fv-cta{top:calc(64px + clamp(18px,4vh,40px) + 223px + 22px)!important;bottom:auto!important}
}

@media (max-width:820px) and (max-height:620px){
  html body .p1 .p1-vertical{bottom:14px;font-size:10px;letter-spacing:.14em}
}




html body .p1 h1 .char{font-weight:200!important}
@media (min-width:821px){
  html body .p1 h1{font-size:calc(clamp(54px,5.6vw,88px) * .9)!important;line-height:1.356!important;letter-spacing:.24em!important;font-weight:200!important}
  html body .p1 .sub-copy{font-weight:300!important;letter-spacing:.2em!important}
}
@media (max-width:820px){
  html body .p1 h1 .char{font-size:calc(clamp(34px,9.3vw,38px) * .9)!important;line-height:1.489!important;letter-spacing:.24em!important}
  
  html body .p1 h1{padding-left:calc(clamp(34px,9.3vw,38px) * .9 * .24)!important}
  html body .p1 .sub-copy::before{font-weight:300!important;letter-spacing:.18em!important}
}


@media (min-width:821px){
  html body .p1 .p1-vertical{right:clamp(30px,5vw,88px);bottom:calc(var(--foot-h) + 6vh);font-size:13px;letter-spacing:.24em}
}
@media (max-width:820px){
  html body .p1 .p1-vertical{right:18px;bottom:6vh;font-size:11px;letter-spacing:.2em}
  @supports (height:100svh){html body .p1 .p1-vertical{bottom:6svh}}
}
@media (max-width:820px) and (max-height:700px){
  html body .p1 .p1-vertical{font-size:10px;letter-spacing:.14em}
}
@media (max-width:820px) and (max-height:620px){
  html body .p1 .p1-vertical{bottom:5vh;font-size:10px;letter-spacing:.1em}
  @supports (height:100svh){html body .p1 .p1-vertical{bottom:5svh}}
}


@media (min-width:821px){
  html body .p1{--r20-s:min(calc(1.28 * clamp(400px,37vw,760px)),calc(1.06 * clamp(560px,80vh,900px)),calc((100vh - var(--foot-h) - 1vh - 108px) / .9876))}
  html body .p1::before{right:calc(clamp(30px,5vw,88px) + 39px + var(--r20-s) * .0154)!important;bottom:calc(var(--foot-h) + 1vh)!important;width:calc(var(--r20-s) / 1.28)!important;height:calc(var(--r20-s) / 1.06)!important}
}
@media (max-width:820px){
  html body .p1{--fvb-h:clamp(170px,min(calc((100vh - 420px) * .92),calc((50vw - 41px) / .4095)),390px)}
  @supports (height:100svh){html body .p1{--fvb-h:clamp(170px,min(calc((100svh - 420px) * .92),calc((50vw - 41px) / .4095)),390px)}}
  
  body:not(.mobile-after-fv) #openLogin.mobile-login-dock{visibility:hidden!important;transition:opacity .26s ease,transform .26s ease,background-color .26s ease,visibility 0s linear .26s!important}
}


html body .site-loader{background:radial-gradient(ellipse 58% 52% at 10% 6%,rgba(70,110,136,.34) 0%,rgba(70,110,136,0) 72%),linear-gradient(170deg,#2c4c63 0%,#1d374c 44%,#13283a 100%)!important}
html body::after{background:radial-gradient(ellipse 58% 52% at 10% 6%,rgba(70,110,136,.34) 0%,rgba(70,110,136,0) 72%),linear-gradient(170deg,#2c4c63 0%,#1d374c 44%,#13283a 100%)}

html body .site-loader__logo:not(.has-ripple){filter:brightness(0) invert(89%) sepia(9%) saturate(165%) hue-rotate(-3deg) brightness(95%) contrast(114%)!important}
html body .site-loader__logo::after{background:#eee8df!important}


@media (min-width:821px) and (max-height:800px){
  html body .p1{--r23-logo:126px;padding-top:calc(9px + var(--r23-logo) + 24px)!important;padding-bottom:calc(var(--foot-h) + 16px)!important;align-items:center!important;align-items:safe center!important}
  html body .p1 .inner{margin-top:0!important}
  html body .p1 h1{font-size:min(calc(clamp(54px,5.6vw,88px) * .9),10vh)!important;margin-bottom:min(32px,3.4vh)!important}
  html body .p1 .sub-copy{margin-bottom:min(39px,4.4vh)!important}
}
@media (min-width:821px) and (max-height:720px){
  html body .p1 .sub-copy{line-height:2!important}
}
@media (min-width:821px) and (max-height:680px){
  html body .p1{--r23-logo:105px}
  body.is-fv .logo{transform:scale(1.5)!important}
}
@media (min-width:821px) and (max-height:800px) and (prefers-reduced-motion:reduce){
  html body .p1{--r23-logo:70px}
  body.is-fv .logo{transform:none!important}
}





html body .panel-product-v66,html body .p4{border-right:0!important}
html body .panel-product-v66{background:var(--nt-ground)!important;
  --r25-p3-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M1000 0H232C160 38 112 110 126 204c14 96-74 150-64 262 10 108 104 152 112 256 7 92 64 180 176 222 120 44 228-12 340-46 108-32 196-14 310 40z'/%3E%3C/svg%3E")}
html body .panel-product-v66 .p3v2-scene{background:#dfe9e8;
  -webkit-mask:var(--r25-p3-shape) 0 0 / 100% 100% no-repeat;mask:var(--r25-p3-shape) 0 0 / 100% 100% no-repeat}
html body .panel-product-v66 .p3v2-scene::before,html body .panel-product-v66 .p3v2-scene::after{display:none!important}

html body .panel-product-v66 .p3-navy{position:absolute;right:0;bottom:0;z-index:3;pointer-events:none;overflow:hidden;background:var(--nt-water-navy);
  -webkit-mask:var(--nt-curve) 0 0 / 100% 100% no-repeat;mask:var(--nt-curve) 0 0 / 100% 100% no-repeat}
html body .panel-product-v66 .p3-navy::after{content:"";position:absolute;inset:0;background:url('../img/fv/caustic-still.webp') 30% 60% / cover no-repeat;
  opacity:.28;mix-blend-mode:screen;filter:grayscale(1) brightness(.556) contrast(9) blur(1px)}

html body .panel-product-v66 .p3v2-copy{z-index:20}
html body .panel-product-v66 .p3-label{margin:0 0 30px!important}
html body .panel-product-v66 .p3v2-brand{font-family:var(--nt-serif)!important;font-weight:300!important;letter-spacing:.32em!important;color:rgba(31,58,77,.8)!important;text-shadow:none!important}
html body .panel-product-v66 .p3v2-title,html body .panel-product-v66 .p3v2-title .char{font-family:var(--nt-serif)!important;font-weight:var(--nt-head-weight)!important;color:var(--nt-ink)!important;text-shadow:none!important}
html body .panel-product-v66 .p3v2-head{font-family:var(--nt-serif)!important;font-weight:var(--nt-sub-weight)!important;color:var(--nt-ink)!important;text-shadow:none!important}
html body .panel-product-v66 .p3v2-lead{font-family:var(--nt-serif)!important;font-weight:var(--nt-body-weight)!important;color:var(--nt-ink)!important;text-shadow:none!important}
html body .panel-product-v66 .p3v2-price,html body .panel-product-v66 .p3v2-price span{font-family:var(--nt-serif)!important;color:var(--nt-ink)!important;text-shadow:none!important}
html body .panel-product-v66 .p3v2-size-ml{font-weight:400!important;letter-spacing:.12em!important}
html body .panel-product-v66 .p3v2-size-yen{font-weight:400!important;letter-spacing:.06em!important}
html body .panel-product-v66 .p3v2-size-tax{font-weight:300!important;letter-spacing:.06em!important}

html body .panel-product-v66 .p3v2-btn{background:var(--nt-navy)!important;border:1px solid var(--nt-navy)!important;color:#fff!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  font-family:var(--nt-sans)!important;font-weight:400!important}
html body .panel-product-v66 .p3v2-btn::after{color:#fff!important;font-family:var(--nt-serif)!important;font-weight:300!important}
html body .panel-product-v66 .p3v2-btn:hover,html body .panel-product-v66 .p3v2-btn:focus-visible{background:#fff!important;color:var(--nt-navy)!important}
html body .panel-product-v66 .p3v2-btn:hover::after,html body .panel-product-v66 .p3v2-btn:focus-visible::after{color:var(--nt-navy)!important}

@media (min-width:821px){
  html body .panel-product-v66 .p3v2-scene{inset:0 0 0 auto!important;width:60vw!important;height:84%!important}
  html body .panel-product-v66 .p3v2-video{object-position:100% 46%!important}
  html body .panel-product-v66 .p3-navy{width:54vw;height:31%}
  html body .panel-product-v66 .p3v2-copy{left:clamp(66px,6.9vw,112px)!important;top:50%!important;transform:translateY(-50%)!important;width:min(38vw,560px)!important}
  html body .panel-product-v66 .p3v2-brand{margin-bottom:14px!important;font-size:15px!important}
  html body .panel-product-v66 .p3v2-title{margin-bottom:30px!important;line-height:1.35!important;white-space:nowrap!important}
  html body .panel-product-v66 .p3v2-title,html body .panel-product-v66 .p3v2-title .char{font-size:clamp(30px,2.75vw,42px)!important;letter-spacing:.14em!important}
  html body .panel-product-v66 .p3v2-head{margin-bottom:22px!important;font-size:clamp(19px,1.55vw,23px)!important;line-height:1.95!important;letter-spacing:.16em!important}
  html body .panel-product-v66 .p3v2-lead{margin-bottom:30px!important;font-size:16px!important;line-height:2!important;letter-spacing:.14em!important}
  html body .panel-product-v66 .p3v2-price{margin-bottom:38px!important;font-size:16px!important;letter-spacing:.06em!important}
  html body .panel-product-v66 .p3v2-size{white-space:nowrap}
  html body .panel-product-v66 .p3v2-btn{min-height:54px!important;padding:14px 26px!important;border-radius:0!important;font-size:16px!important;letter-spacing:.1em!important}
  html body .panel-product-v66 .p3v2-copy>.p3-label{animation:none}
  .panel-product-v66.is-active .p3v2-copy>.p3-label{animation:p3v2-copy-in .62s cubic-bezier(.16,.78,.26,1) .08s both}
}

@media (min-width:1600px){
  html body .panel-product-v66 .p3v2-title,html body .panel-product-v66 .p3v2-title .char{font-size:clamp(42px,2.6vw,52px)!important}
  html body .panel-product-v66 .p3v2-head{font-size:clamp(23px,1.3vw,26px)!important}
  html body .panel-product-v66 .p3v2-lead,html body .panel-product-v66 .p3v2-price{font-size:17px!important}
  html body .panel-product-v66 .p3v2-copy{width:min(36vw,660px)!important}
}

@media (min-width:821px) and (max-aspect-ratio:145/100){
  html body .panel-product-v66 .p3v2-scene{height:min(84%,60vw)!important}
  html body .panel-product-v66 .p3v2-video{object-position:88% 46%!important}
}
@media (min-width:821px) and (max-width:1180px){
  html body .panel-product-v66 .p3v2-copy{width:36vw!important}
  html body .panel-product-v66 .p3v2-title,html body .panel-product-v66 .p3v2-title .char{font-size:clamp(25px,2.6vw,30px)!important;letter-spacing:.12em!important}
  html body .panel-product-v66 .p3v2-head{font-size:clamp(18px,1.75vw,20px)!important;letter-spacing:.12em!important}
  html body .panel-product-v66 .p3v2-lead{letter-spacing:.1em!important}
  html body .panel-product-v66 .p3-sp-br{display:inline!important}
  html body .panel-product-v66 .p3v2-price{letter-spacing:.02em!important}
}


html body .p4{background:var(--nt-navy)!important}
html body .p4::before{content:""!important;display:block!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;z-index:-1!important;background:var(--nt-water-navy)!important;
  animation:none!important;filter:none!important;opacity:1!important;transform:none!important;-webkit-mask:none!important;mask:none!important}
html body .p4::after{display:none!important}
html body .p4 .purchase-water-scene{display:none!important}
html body .p4 .p4-caustic{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:url('../img/fv/caustic-still.webp') 42% 50% / cover no-repeat;opacity:.24;mix-blend-mode:screen;filter:grayscale(1) brightness(.556) contrast(9) blur(1px)}
html body .p4 .p4-caustic__video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:42% 50%}
html body .p4 .p4-cream{position:absolute;right:0;bottom:0;z-index:1;pointer-events:none;background:var(--nt-ground);
  -webkit-mask:var(--nt-curve) 0 0 / 100% 100% no-repeat;mask:var(--nt-curve) 0 0 / 100% 100% no-repeat}
html body .p4>h2,html body .p4>.cols,html body .p4>.p4-label{position:relative;z-index:2}
html body .p4 .p4-label{color:#fff!important}
html body .p4 h2,html body .p4 h2 .char{font-family:var(--nt-serif)!important;font-weight:var(--nt-head-weight)!important;color:#fff!important;text-shadow:none!important}
html body .p4 h2::before,html body .p4 h2::after{display:none!important}

html body .p4 .col,html body .p4 .col:nth-child(1),html body .p4 .col:nth-child(2),html body .p4 .col:nth-child(3){background:rgba(19,40,58,.42)!important;border:1px solid rgba(255,255,255,.38)!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body .p4 h2,html body .p4 .col h3,html body .p4 .col p,html body .p4 .col span{text-shadow:none!important}
html body .p4 .col::after{display:none!important}
html body .p4 .col::before{font-family:var(--nt-serif)!important;font-weight:400!important;color:rgba(255,255,255,.62)!important}
html body .p4 .col h3{font-family:var(--nt-serif)!important;font-weight:var(--nt-sub-weight)!important;color:#fff!important;text-shadow:none!important}
html body .p4 .col p{font-family:var(--nt-serif)!important;font-weight:var(--nt-body-weight)!important;color:rgba(255,255,255,.86)!important;text-shadow:none!important}
html body .p4 .col .btn{background:transparent!important;border:1px solid rgba(255,255,255,.86)!important;color:#fff!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body .p4 .col .btn::after{color:#fff!important;font-family:var(--nt-serif)!important;font-weight:300!important}
html body .p4 .col .btn:hover,html body .p4 .col .btn:focus-visible{background:#fff!important;color:var(--nt-navy)!important}
html body .p4 .col .btn:hover::after,html body .p4 .col .btn:focus-visible::after{color:var(--nt-navy)!important}
html body .p4 .col .btn:focus-visible{outline:2px solid #fff!important;outline-offset:3px!important}

@media (min-width:821px){
  html body .p4{flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important}
  html body .p4 .p4-cream{width:56vw;height:24%}
  html body .p4 .p4-label{align-self:center;width:min(1080px,100%);margin:0 0 18px!important}
  html body .p4 h2{align-self:center;width:min(1080px,100%);margin:0 0 46px!important;padding:0!important;text-align:left!important;line-height:1.4!important}
  html body .p4 h2,html body .p4 h2 .char{font-size:clamp(34px,3.1vw,46px)!important;letter-spacing:.24em!important}
  html body .p4 .cols{width:min(1080px,100%)!important;gap:28px!important}
  html body .p4 .col,html body .p4 .col:nth-child(1),html body .p4 .col:nth-child(2),html body .p4 .col:nth-child(3){border-radius:var(--nt-card-radius)!important;padding:34px 32px 32px!important}
  html body .p4 .col::before{font-size:15px!important;letter-spacing:.16em!important}
  html body .p4 .col h3{margin:12px 0 14px!important;font-size:clamp(20px,1.6vw,23px)!important;letter-spacing:.14em!important}
  html body .p4 .col p{margin:0 0 28px!important;font-size:16px!important;line-height:1.95!important;letter-spacing:.1em!important}
  html body .p4 .col .btn{border-radius:0!important;min-height:52px!important;padding:12px 22px!important;font-family:var(--nt-sans)!important;font-size:16px!important;letter-spacing:.1em!important}
}


@media (min-width:821px) and (max-width:1000px){
  html body .p4 .cols{gap:16px!important}
  html body .p4 .col,html body .p4 .col:nth-child(1),html body .p4 .col:nth-child(2),html body .p4 .col:nth-child(3){padding:28px 20px 24px!important}
  html body .p4 .col h3{font-size:18px!important;letter-spacing:.05em!important;white-space:nowrap!important}
  html body .p4 .col p{font-size:15px!important;letter-spacing:.04em!important}
  html body .p4 .col .btn{min-width:0!important;width:100%!important;justify-content:space-between!important;padding:10px 16px!important}
  html body .p5 .inner{padding-left:0!important;padding-right:0!important}
  html body .p5 .body{letter-spacing:.06em!important}
}


html body .p5{background:var(--nt-ground)!important}
html body .p5::before,html body .p5::after{display:none!important}
html body .p5 .wack-ambient-scene{display:none!important}
html body .p5 .p5-leaf{position:absolute;z-index:0;pointer-events:none;mix-blend-mode:multiply;opacity:.58;transform-origin:50% 0;animation:r25-leaf-sway 11s ease-in-out infinite alternate}

html body .p5 .p5-leaf::before{content:"";position:absolute;inset:0;background:url('../img/deco/top02-leaf-shadow.webp') 100% 0 / cover no-repeat;transform:scaleX(-1)}
@keyframes r25-leaf-sway{0%{transform:rotate(0deg) skewX(0deg)}50%{transform:rotate(.6deg) skewX(-.8deg)}100%{transform:rotate(-.4deg) skewX(.6deg)}}
html body .p5 .p5-script{position:absolute;z-index:2;transform:rotate(-9deg);transform-origin:left bottom}
html body .p5 .inner{position:relative;z-index:2}
html body .p5 .inner::before{display:none!important}
html body .p5 .nb{white-space:nowrap}
html body .p5 h2,html body .p5 h2 .char{font-family:var(--nt-serif)!important;font-weight:var(--nt-head-weight)!important;color:var(--nt-ink)!important;text-shadow:none!important}
html body .p5 .body{font-family:var(--nt-serif)!important;font-weight:var(--nt-body-weight)!important;color:var(--nt-ink)!important;text-shadow:none!important}
html body .p5 table{background:transparent!important;border-radius:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body .p5 th,html body .p5 td{font-family:var(--nt-serif)!important;color:var(--nt-ink)!important;border-color:var(--nt-line)!important;background:transparent!important;text-shadow:none!important}
html body .p5 th{font-weight:400!important;color:rgba(31,58,77,.72)!important}
html body .p5 td{font-weight:300!important}

@media (min-width:821px){
  html body .p5 .p5-leaf{top:0;left:0;width:56vw;height:100%}
  html body .p5 .p5-script{left:clamp(80px,9vw,150px);bottom:calc(var(--foot-h) + 13vh);font-size:clamp(34px,min(3.1vw,5vh),50px)}
  
  @media (max-width:1180px){
    html body .p5 .p5-script{left:auto;right:clamp(40px,5vw,64px);bottom:auto;top:calc(var(--head-h) + 92px);font-size:32px;transform-origin:right bottom}
  }
  html body .p5 .p5-label{margin:0 0 22px!important}
  html body .p5 h2{margin-bottom:34px!important}
  html body .p5 h2,html body .p5 h2 .char{font-size:clamp(28px,2.5vw,38px)!important;letter-spacing:.16em!important}
  html body .p5 .body{font-size:16px!important;line-height:2.15!important;letter-spacing:.12em!important}
  html body .p5 th,html body .p5 td{font-size:16px!important;letter-spacing:.1em!important}
  html body .p5 th{border-top:1px solid var(--nt-line)!important;border-bottom:1px solid var(--nt-line)!important}
  html body .p5 td{border-top:1px solid var(--nt-line)!important;border-bottom:1px solid var(--nt-line)!important}
}


@media (max-width:820px){
  
  html body .panel-product-v66{background:var(--nt-ground)!important;padding:0 0 108px!important;
    --r25-p3-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 96C150 30 330 18 500 60s340 92 500 20V880C860 960 690 990 520 950S200 890 0 940Z'/%3E%3C/svg%3E")}
  html body .panel-product-v66 .p3v2-scene{top:18px!important}
  html body .panel-product-v66 .p3v2-copy{margin-top:calc(var(--p3-scene-h) + 30px)!important}
  html body .panel-product-v66 .p3-navy{left:0;width:100%;height:96px}
  html body .panel-product-v66 .p3v2-copy>.p3-label{margin:0 0 22px!important;text-align:left!important}
  html body .panel-product-v66 .p3v2-brand::before{font-weight:400!important;letter-spacing:.3em!important;color:rgba(31,58,77,.8)!important}
  html body .panel-product-v66 .p3v2-title{margin-bottom:22px!important}
  html body .panel-product-v66 .p3v2-title,html body .panel-product-v66 .p3v2-title .char{font-size:clamp(22px,6.2vw,26px)!important;letter-spacing:.12em!important}
  html body .panel-product-v66 .p3v2-head{padding-top:22px!important;font-size:clamp(16px,4.6vw,19px)!important;line-height:1.95!important;letter-spacing:.12em!important}
  html body .panel-product-v66 .p3v2-head::before{background:rgba(31,58,77,.35)!important}
  html body .panel-product-v66 .p3v2-lead{font-size:14.5px!important;letter-spacing:.1em!important;line-height:2!important}
  html body .panel-product-v66 .p3v2-size{background:var(--nt-face)!important;border:1px solid var(--nt-line)!important;box-shadow:none!important}
  html body .panel-product-v66 .p3v2-size-yen{color:var(--nt-ink)!important;font-size:21px!important}
  html body .panel-product-v66 .p3v2-size-tax{color:rgba(31,58,77,.66)!important;font-family:var(--nt-serif)!important}
  html body .panel-product-v66 .p3v2-btn{border-radius:999px!important}

  
  html body .p4{padding:calc(64px + 44px) 20px 128px!important}
  html body .p4 .p4-caustic__video{display:none}
  html body .p4 .p4-cream{left:0;width:100%;height:96px}
  html body .p4 .p4-label{align-self:flex-start;margin:0 0 22px!important}
  html body .p4 h2{margin:0 0 26px!important}
  html body .p4 h2,html body .p4 h2 .char{font-size:clamp(22px,6.2vw,26px)!important;letter-spacing:.2em!important}
  html body .p4 .col,html body .p4 .col:nth-child(1),html body .p4 .col:nth-child(2),html body .p4 .col:nth-child(3){background:rgba(19,40,58,.42)!important;border:1px solid rgba(255,255,255,.36)!important;border-radius:16px!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html body .p4 .col::before{font-weight:400!important;color:rgba(255,255,255,.6)!important}
  html body .p4 .col h3{font-weight:400!important;letter-spacing:.1em!important;color:#fff!important}
  html body .p4 .col p{font-weight:300!important;color:rgba(255,255,255,.82)!important;letter-spacing:.03em!important;word-break:auto-phrase}
  html body .p4 .col .btn{background:transparent!important;border:1px solid rgba(255,255,255,.8)!important;border-radius:50%!important}
  html body .p4 .col .btn::after{color:#fff!important;font-family:var(--nt-sans)!important}

  
  html body .p5{background:var(--nt-ground)!important}
  html body .p5 .p5-leaf{top:0;left:0;width:100%;height:58%;opacity:.42}
  html body .p5 .p5-script{right:8px;top:104px;font-size:24px;transform-origin:right bottom}
  html body .p5 .p5-label{margin:0 0 30px!important}
  html body .p5 h2,html body .p5 h2 .char{letter-spacing:.1em!important}
  html body .p5 .body{letter-spacing:.08em!important;line-height:2.05!important}
  html body .p5 table{border-radius:0!important}
  
  html body .p5 table,html body .p5 tbody,html body .p5 tr,html body .p5 th,html body .p5 td{display:block!important;width:auto!important}
  html body .p5 table{border-top:1px solid var(--nt-line)!important}
  html body .p5 th{padding:14px 2px 2px!important;border:0!important;font-size:13px!important;letter-spacing:.16em!important;line-height:1.6!important}
  html body .p5 td{padding:0 2px 14px!important;border:0!important;border-bottom:1px solid var(--nt-line)!important;font-size:16px!important;letter-spacing:.04em!important;line-height:1.7!important}
  html body .p5 .body,html body .p5 td{word-break:auto-phrase}
}
@media (max-width:359px){
  html body .p5 td{font-size:15px!important;letter-spacing:.02em!important}
}

@media (min-width:821px){
  html body .p5 .p5-script{opacity:0;transition:opacity .9s ease .7s}
  html body .p5.is-active .p5-script{opacity:1}
}
@media (max-width:820px){
  .p4.is-content-revealed .p4-label{animation:mobile-copy-fade .58s cubic-bezier(.16,.78,.26,1) .02s both}
  .p5.is-content-revealed .p5-label{animation:mobile-copy-fade .58s cubic-bezier(.16,.78,.26,1) .02s both}
  
  @keyframes r25-script-in{0%{opacity:0;transform:rotate(-9deg) translate3d(0,10px,0)}100%{opacity:1;transform:rotate(-9deg)}}
  .p5.is-content-revealed .p5-script{animation:r25-script-in .8s cubic-bezier(.16,.78,.26,1) .3s both}
}
@media (prefers-reduced-motion:reduce){
  html body .p5 .p5-leaf{animation:none!important;transform:none!important}
  html body .p5 .p5-script{opacity:1!important;transition:none!important}
  
  html body .p4 .col,html body .p4 .col h3,html body .p4 .col p,html body .p4 .col .btn{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
}



html body .panel.nt3,html body .panel.nt4,html body .panel.nt5{display:block;padding:0;border-right:0}
html body .panel.nt3 .num,html body .panel.nt4 .num,html body .panel.nt5 .num{display:none!important}
html body .nt5 .foot-bottom{display:none!important}

html body .panel .nt3-head,html body .panel .nt4-head,html body .panel .nt5-head{text-align:left!important}


html body .panel.nt3{background:var(--nt-ground);color:var(--nt-ink)}

.nt3 .nt3-scene{position:absolute;z-index:0;overflow:hidden;pointer-events:none}
.nt3 .nt3-scene img{position:absolute;display:block;max-width:none;user-select:none}
.nt3 .nt3-scene__bottles{filter:drop-shadow(0 0 0 transparent)}
.nt3 .nt3-navy{position:absolute;right:0;bottom:0;z-index:3;pointer-events:none;overflow:hidden;background:var(--nt-water-navy);
  -webkit-mask:var(--nt-curve) 0 0 / 100% 100% no-repeat;mask:var(--nt-curve) 0 0 / 100% 100% no-repeat}
.nt3 .nt3-navy::after{content:"";position:absolute;inset:0;background:url('../img/fv/caustic-still.webp') 30% 60% / cover no-repeat;
  opacity:.28;mix-blend-mode:screen;filter:grayscale(1) brightness(.556) contrast(9) blur(1px)}

.nt3 .nt3-vertical{position:absolute;z-index:4;margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:.42em;
  font-family:var(--nt-serif);font-weight:300;letter-spacing:.2em;line-height:1.2;color:rgba(31,58,77,.74);text-align:right;pointer-events:none}
.nt3 .nt3-vertical__mark{display:block;width:1.6em;height:1px;margin:0 0 .5em;background:rgba(31,58,77,.5)}

.nt3 .nt3-copy{position:absolute;z-index:5}
.nt3 .nt3-label{margin:0 0 var(--nt3-gap-label,28px)}
.nt3 .nt3-name{display:flex;flex-direction:column;gap:6px;margin:0 0 var(--nt3-gap-name,26px);font-family:var(--nt-serif);color:var(--nt-ink)}
.nt3 .nt3-name__brand{font-size:14px;font-weight:300;letter-spacing:.32em;color:rgba(31,58,77,.78)}
.nt3 .nt3-name__title{font-size:var(--nt3-title,21px);font-weight:300;letter-spacing:.2em;line-height:1.5}
.nt3 .nt3-head{margin:0 0 var(--nt3-gap-head,26px);font-family:var(--nt-serif);font-weight:var(--nt-head-weight);font-size:var(--nt3-head,44px);line-height:1.6;letter-spacing:.2em;color:var(--nt-ink);
  font-feature-settings:normal;word-break:keep-all}
.nt3 .nt3-lead{margin:0 0 var(--nt3-gap-lead,22px);font-family:var(--nt-serif);font-weight:var(--nt-body-weight);font-size:16px;line-height:2;letter-spacing:.14em;color:var(--nt-ink)}
.nt3 .nt3-price{margin:0 0 var(--nt3-gap-price,34px);font-family:var(--nt-serif);font-size:16px;line-height:1.8;letter-spacing:.06em;color:var(--nt-ink)}
.nt3 .nt3-price__size{white-space:nowrap}
.nt3 .nt3-price__ml{font-weight:400;letter-spacing:.12em}
.nt3 .nt3-price__yen{font-weight:400;letter-spacing:.06em}
.nt3 .nt3-price__tax{font-weight:300;font-size:.875em;color:rgba(31,58,77,.72)}
.nt3 .nt3-price__sep{color:rgba(31,58,77,.5)}
.nt3 .nt3-btn::after{content:"→";font-family:var(--nt-serif);font-weight:300;font-size:20px;line-height:1}

.nt3 .nt3-badge{position:absolute;z-index:4;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7em;
  border:1px solid rgba(31,58,77,.42);border-radius:50%;background:rgba(246,242,236,.62);text-align:center;font-family:var(--nt-serif);color:var(--nt-ink)}
.nt3 .nt3-badge__main{font-weight:400;letter-spacing:.14em;line-height:1.5}
.nt3 .nt3-badge__sub{font-weight:300;letter-spacing:.1em;line-height:1.75;color:rgba(31,58,77,.82)}
.nt3 .nt3-badge__main::after{content:"";display:block;width:2.2em;height:1px;margin:.75em auto 0;background:rgba(31,58,77,.38)}

@media (min-width:821px){
  
  html body .panel.nt3{--sh:100svh;--sw:calc(var(--sh) * 1.5);--sr:-4vw;--sx:calc(100vw - var(--sr) - var(--sw))}
  .nt3 .nt3-scene{right:var(--sr);bottom:0;width:var(--sw);height:var(--sh);
    -webkit-mask:linear-gradient(90deg,transparent 0,#000 22%);mask:linear-gradient(90deg,transparent 0,#000 22%)}
  .nt3 .nt3-scene img{inset:0;width:100%;height:100%}
  .nt3 .nt3-navy{width:26vw;height:24%}
  .nt3 .nt3-vertical{right:clamp(40px,4.6vw,88px);top:calc(var(--head-h) + clamp(26px,5vh,56px));font-size:13px}
  .nt3 .nt3-copy{left:clamp(66px,7.4vw,140px);top:calc(var(--head-h) + (100svh - var(--head-h) - var(--foot-h)) / 2);transform:translateY(-50%);width:min(40vw,560px)}
  .nt3 .nt3-btn{min-width:236px;justify-content:space-between}
  
  .nt3 .nt3-badge{--d:clamp(150px,min(12.6vw,19svh),196px);width:var(--d);height:var(--d);left:calc(var(--sx) + var(--sw) * .43 - var(--d) / 2);top:calc(100svh - var(--sh) + var(--sh) * .60 - var(--d) / 2);
    font-size:clamp(14px,1.05vw,16px)}
  .nt3 .nt3-badge__sub{font-size:.875em}
}

@media (min-width:821px) and (max-height:820px){
  html body .panel.nt3{--nt3-head:clamp(32px,5.2svh,44px);--nt3-title:19px;--nt3-gap-label:18px;--nt3-gap-name:16px;--nt3-gap-head:16px;--nt3-gap-lead:12px;--nt3-gap-price:22px}
  .nt3 .nt3-lead{line-height:1.85}
}
@media (min-width:1600px){
  html body .panel.nt3{--nt3-head:50px;--nt3-title:23px}
  .nt3 .nt3-lead,.nt3 .nt3-price{font-size:17px}
  .nt3 .nt3-vertical{font-size:14px}
}

@media (min-width:821px) and (max-aspect-ratio:145/100){
  html body .panel.nt3{--sh:84svh;--sr:-12vw}
  .nt3 .nt3-copy{width:min(44vw,460px)}
  .nt3 .nt3-scene{-webkit-mask:linear-gradient(90deg,transparent 0,#000 22%),linear-gradient(180deg,transparent 0,#000 18%);-webkit-mask-composite:source-in;
    mask:linear-gradient(90deg,transparent 0,#000 22%) intersect,linear-gradient(180deg,transparent 0,#000 18%)}
}


@media (min-width:821px) and (max-aspect-ratio:1/1){
  html body .panel.nt3{--sh:52svh;--sr:-2vw}
  .nt3 .nt3-scene{-webkit-mask:linear-gradient(180deg,transparent 0,#000 24%);mask:linear-gradient(180deg,transparent 0,#000 24%)}
  .nt3 .nt3-copy{top:calc(var(--head-h) + clamp(28px,4svh,56px));transform:none;width:min(56vw,540px)}
}


html body .panel.nt4{background:var(--nt-navy);color:#fff}
html body .panel.nt4::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--nt-water-navy)}

.nt4 .nt4-caustic{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:#000 url('../img/top04/caustic-fine-poster.webp') 50% 50% / cover no-repeat;opacity:.22;mix-blend-mode:screen;
  
  -webkit-mask-image:radial-gradient(ellipse 58% 54% at 50% 47%,rgba(0,0,0,.5) 0%,rgba(0,0,0,.56) 52%,#000 100%);
  mask-image:radial-gradient(ellipse 58% 54% at 50% 47%,rgba(0,0,0,.5) 0%,rgba(0,0,0,.56) 52%,#000 100%)}
.nt4 .nt4-caustic__video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}

.nt4 .nt4-waves{position:absolute;left:0;z-index:1;display:block;width:100%;pointer-events:none;overflow:visible}
.nt4 .nt4-waves path{fill:none;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke}
.nt4 .nt4-cream{position:absolute;right:0;bottom:0;z-index:2;pointer-events:none;background:var(--nt-ground);
  -webkit-mask:var(--nt-curve) 0 0 / 100% 100% no-repeat;mask:var(--nt-curve) 0 0 / 100% 100% no-repeat}
.nt4 .nt4-inner{position:absolute;z-index:3}
.nt4 .nt4-label.nt-label{color:#fff}
.nt4 .nt4-head{margin:0;font-family:var(--nt-serif);font-weight:var(--nt-head-weight);letter-spacing:var(--nt-head-track);line-height:1.5;color:#fff;font-feature-settings:normal}
.nt4 .nt4-list{list-style:none;margin:0;padding:0}
.nt4 .nt4-item{margin:0}
.nt4 .nt4-icon{display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.55);border-radius:50%;color:#fff;background:rgba(255,255,255,.03)}
.nt4 .nt4-icon svg{display:block;width:38%;height:38%;stroke-width:1.1}
.nt4 .nt4-item__name{margin:0;font-family:var(--nt-serif);font-weight:var(--nt-sub-weight);letter-spacing:.16em;line-height:1.5;color:#fff}
.nt4 .nt4-item__text{margin:0;font-family:var(--nt-serif);font-weight:var(--nt-body-weight);letter-spacing:.1em;line-height:1.8;color:rgba(255,255,255,.86)}

.nt4 .nt4-item__text .nb{display:inline-block}
.nt4 .nt4-btn.nt-btn{background:rgba(19,40,58,.35);color:#fff;border-color:rgba(255,255,255,.82)}
.nt4 .nt4-btn.nt-btn:hover,.nt4 .nt4-btn.nt-btn:focus-visible{background:#fff;color:var(--nt-navy)}
.nt4 .nt4-btn.nt-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.nt4 .nt4-btn::after{content:"→";font-family:var(--nt-serif);font-weight:300;font-size:19px;line-height:1}

@media (min-width:821px){
  .nt4 .nt4-waves{bottom:var(--foot-h);height:36%}
  .nt4 .nt4-cream{width:46vw;height:22%}
  .nt4 .nt4-inner{left:50%;top:calc(var(--head-h) + (100svh - var(--head-h) - var(--foot-h)) * .46);transform:translate(-50%,-50%);width:min(1080px,84vw)}
  .nt4 .nt4-label{margin:0 0 18px}
  .nt4 .nt4-head{margin:0 0 clamp(34px,6svh,60px);font-size:clamp(34px,min(3.1vw,5.4svh),46px)}
  .nt4 .nt4-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
  .nt4 .nt4-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 18px}
  .nt4 .nt4-btn.nt-btn{margin-top:auto}
  .nt4 .nt4-item+.nt4-item{border-left:1px solid rgba(255,255,255,.16)}
  .nt4 .nt4-icon{--d:clamp(104px,min(9.4vw,15svh),136px);width:var(--d);height:var(--d);margin:0 0 clamp(16px,2.6svh,24px)}
  .nt4 .nt4-item__name{margin:0 0 8px;font-size:clamp(19px,1.5vw,22px)}
  .nt4 .nt4-item__text{margin:0 0 clamp(18px,3svh,26px);font-size:16px}
  .nt4 .nt4-btn.nt-btn{min-width:198px;min-height:50px;padding:12px 22px;justify-content:space-between;font-size:16px}
}
@media (min-width:821px) and (max-width:1180px){
  .nt4 .nt4-item{padding:0 12px}
  .nt4 .nt4-item__text{font-size:15px;letter-spacing:.04em}
}
@media (min-width:821px) and (max-width:1000px){
  .nt4 .nt4-item{padding:0 10px}
  .nt4 .nt4-item__name{font-size:18px;letter-spacing:.06em;white-space:nowrap}
  .nt4 .nt4-item__text{font-size:15px;letter-spacing:.04em}
  .nt4 .nt4-btn.nt-btn{min-width:0;width:100%;max-width:200px}
}


html body .panel.nt5{background:var(--nt-ground);color:var(--nt-ink)}

.nt5 .nt5-leaf{position:absolute;z-index:0;pointer-events:none;mix-blend-mode:multiply;transform-origin:100% 100%;animation:r26-leaf-sway 12s ease-in-out infinite alternate}
.nt5 .nt5-leaf::before{content:"";position:absolute;inset:0;background:url('../img/deco/top02-leaf-shadow.webp') 0 0 / cover no-repeat;transform:scaleY(-1)}
@keyframes r26-leaf-sway{0%{transform:rotate(0deg) skewX(0deg)}50%{transform:rotate(-.6deg) skewX(.8deg)}100%{transform:rotate(.4deg) skewX(-.6deg)}}

.nt5 .nt5-water{position:absolute;left:0;bottom:0;z-index:1;pointer-events:none;overflow:hidden;
  -webkit-mask:var(--nt5-shape) 0 0 / 100% 100% no-repeat;mask:var(--nt5-shape) 0 0 / 100% 100% no-repeat}
.nt5 .nt5-water__img{position:absolute;inset:0;background:url('../img/top05/water-drop.webp') var(--nt5-pos,62% 40%) / cover no-repeat}
.nt5 .nt5-water__img canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.nt5 .nt5-script{position:absolute;z-index:3;transform:rotate(-12deg);transform-origin:left bottom}
.nt5 .nt5-inner{position:absolute;z-index:4}
.nt5 .nt5-head{margin:0;font-family:var(--nt-serif);font-weight:var(--nt-head-weight);letter-spacing:.16em;line-height:1.5;color:var(--nt-ink);font-feature-settings:normal}
.nt5 .nt5-body{margin:0;font-family:var(--nt-serif);font-weight:var(--nt-body-weight);color:var(--nt-ink)}
.nt5 .nt5-body .nb{white-space:nowrap}

.nt5 .nt5-facts{margin:0}
.nt5 .nt5-fact{margin:0}
.nt5 .nt5-fact dt{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(31,58,77,.4);border-radius:50%;font-family:var(--nt-serif);color:var(--nt-ink)}
.nt5 .nt5-fact__en{display:block;font-size:11px;font-weight:500;letter-spacing:.24em;line-height:1.3;color:rgba(31,58,77,.8)}
.nt5 .nt5-fact__en::after{content:"";display:block;width:14px;height:1.5px;margin:6px auto 0;background:rgba(31,58,77,.7)}
.nt5 .nt5-fact__ja{display:block;margin-top:8px;font-weight:400;letter-spacing:.16em;line-height:1.3}
.nt5 .nt5-fact dd{margin:0;font-family:var(--nt-serif);font-weight:300;color:var(--nt-ink);word-break:auto-phrase}

.nt5 .nt5-fact:nth-child(1) dd{word-break:normal;max-width:6.3em}

@media (min-width:821px){
  
  html body .panel.nt5{--nt5-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 340C170 210 340 70 540 40c140-20 250 20 300 110 56 100 40 250 66 410 26 160 94 300 94 440H0z'/%3E%3C/svg%3E")}
  .nt5 .nt5-water{width:50vw;height:44%}
  .nt5 .nt5-leaf{right:0;bottom:0;width:52vw;height:56%;opacity:.58}
  .nt5 .nt5-script{left:calc(50vw * .17);bottom:calc(44% * .8 + 2px);font-size:clamp(32px,min(2.7vw,4.6svh),46px);transform:rotate(-15deg)}
  .nt5 .nt5-inner{left:clamp(66px,7.4vw,140px);right:clamp(56px,6.4vw,120px);top:calc(var(--head-h) + clamp(24px,5svh,64px));display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(32px,3.8vw,72px);align-items:start}
  .nt5 .nt5-label{grid-column:1;margin:0 0 18px}
  .nt5 .nt5-head{grid-column:1;margin:0 0 clamp(18px,3.4svh,30px);font-size:clamp(26px,min(2.3vw,4.2svh),36px)}
  .nt5 .nt5-body{grid-column:1;font-size:clamp(15px,1.12vw,17px);line-height:2.05;letter-spacing:.08em}
  .nt5 .nt5-facts{grid-column:2;grid-row:1 / span 3;align-self:center;display:grid;grid-template-columns:repeat(3,clamp(150px,11.4vw,190px))}
  .nt5 .nt5-fact{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 12px}
  .nt5 .nt5-fact+.nt5-fact{border-left:1px solid var(--nt-line)}
  .nt5 .nt5-fact dt{--d:clamp(104px,min(8.6vw,14svh),128px);width:var(--d);height:var(--d);margin:0 0 18px}
  .nt5 .nt5-fact__ja{font-size:16px}
  .nt5 .nt5-fact dd{font-size:15px;line-height:1.85;letter-spacing:.06em}
  .nt5 .nt5-fact:nth-child(1) dd{max-width:6.65em}
}
@media (min-width:821px) and (max-width:1180px){
  .nt5 .nt5-head{font-size:clamp(24px,2.4vw,28px);letter-spacing:.1em;white-space:nowrap}
  .nt5 .nt5-body{font-size:15px;letter-spacing:.04em}
  .nt5 .nt5-body br{display:none}
  .nt5 .nt5-facts{grid-template-columns:repeat(3,clamp(124px,13vw,150px))}
  .nt5 .nt5-fact{padding:0 8px}
  .nt5 .nt5-fact dt{--d:clamp(96px,9.6vw,112px)}
  .nt5 .nt5-fact dd{letter-spacing:.02em}
  .nt5 .nt5-fact:nth-child(1) dd{max-width:6.4em}
  .nt5 .nt5-water{height:38%}
  .nt5 .nt5-script{bottom:calc(38% * .8 + 2px);font-size:30px}
}


@media (min-width:821px) and (max-aspect-ratio:1/1){
  .nt5 .nt5-water{width:68vw;height:30%}
  .nt5 .nt5-script{left:calc(68vw * .14);bottom:calc(30% * .8 + 2px)}
  .nt5 .nt5-leaf{width:60vw;height:40%}
}


@keyframes r26-rise{0%{opacity:0;transform:translate3d(0,16px,0)}100%{opacity:1;transform:none}}
@keyframes r26-fade{0%{opacity:0}100%{opacity:1}}
@keyframes r26-bottles{0%{opacity:0;transform:translate3d(0,14px,0);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:no-preference){
  .nt3.nt-anim .nt3-copy>*,.nt3.nt-anim .nt3-badge,.nt3.nt-anim .nt3-vertical,.nt3.nt-anim .nt3-scene__bottles,
  .nt4.nt-anim .nt4-inner>:not(.nt4-list),.nt4.nt-anim .nt4-item,
  .nt5.nt-anim .nt5-inner>:not(.nt5-facts),.nt5.nt-anim .nt5-fact,.nt5.nt-anim .nt5-script{opacity:0}
  .nt3.nt-anim.is-shown .nt3-copy>*,.nt4.nt-anim.is-shown .nt4-inner>:not(.nt4-list),.nt5.nt-anim.is-shown .nt5-inner>:not(.nt5-facts),
  .nt4.nt-anim.is-shown .nt4-item,.nt5.nt-anim.is-shown .nt5-fact{animation:r26-rise .82s var(--nt-ease) both}
  .nt3.nt-anim.is-shown .nt3-copy>:nth-child(2){animation-delay:.08s}.nt3.nt-anim.is-shown .nt3-copy>:nth-child(3){animation-delay:.16s}
  .nt3.nt-anim.is-shown .nt3-copy>:nth-child(4){animation-delay:.26s}.nt3.nt-anim.is-shown .nt3-copy>:nth-child(5){animation-delay:.34s}
  .nt3.nt-anim.is-shown .nt3-copy>:nth-child(6){animation-delay:.42s}
  .nt3.nt-anim.is-shown .nt3-scene__bottles{animation:r26-bottles 1.1s var(--nt-ease) .2s both}
  .nt3.nt-anim.is-shown .nt3-badge{animation:r26-rise .9s var(--nt-ease) .6s both}
  .nt3.nt-anim.is-shown .nt3-vertical{animation:r26-fade 1.2s ease .7s both}
  .nt4.nt-anim.is-shown .nt4-inner>:nth-child(2){animation-delay:.1s}
  .nt4.nt-anim.is-shown .nt4-item:nth-child(1){animation-delay:.25s}.nt4.nt-anim.is-shown .nt4-item:nth-child(2){animation-delay:.37s}
  .nt4.nt-anim.is-shown .nt4-item:nth-child(3){animation-delay:.49s}
  .nt5.nt-anim.is-shown .nt5-inner>:nth-child(2){animation-delay:.08s}.nt5.nt-anim.is-shown .nt5-inner>:nth-child(3){animation-delay:.18s}
  .nt5.nt-anim.is-shown .nt5-fact:nth-child(1){animation-delay:.3s}.nt5.nt-anim.is-shown .nt5-fact:nth-child(2){animation-delay:.42s}
  .nt5.nt-anim.is-shown .nt5-fact:nth-child(3){animation-delay:.54s}
  .nt5.nt-anim.is-shown .nt5-script{animation:r26-fade 1.4s ease .8s both}
}
@media (prefers-reduced-motion:reduce){
  .nt5 .nt5-leaf{animation:none!important;transform:none!important}
}


@media (max-width:820px){
  html body .panel.nt3,html body .panel.nt4,html body .panel.nt5{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;height:auto;min-height:100svh;padding:0!important}

  
  html body .panel.nt3{--scn-w:100vw;--scn-h:calc(var(--scn-w) * 750 / 928)}
  .nt3 .nt3-copy{position:relative;order:1;flex:none;margin:0 0 18px;padding:calc(var(--head-h) + 20px) 24px 0}
  .nt3 .nt3-label{margin:0 0 16px}
  .nt3 .nt3-name{gap:2px;margin:0 0 14px}
  .nt3 .nt3-name__brand{font-size:12px}
  .nt3 .nt3-name__title{font-size:17px;letter-spacing:.16em}
  .nt3 .nt3-head{margin:0 0 14px;font-size:clamp(24px,6.6vw,28px);line-height:1.62;letter-spacing:.16em}
  .nt3 .nt3-lead{margin:0 0 8px;font-size:14.5px;line-height:1.9;letter-spacing:.08em}
  .nt3 .nt3-price{margin:0 0 16px;font-size:14px;letter-spacing:.02em}
  .nt3 .nt3-btn.nt-btn{min-height:46px;padding:0 22px;gap:12px}
  .nt3 .nt3-btn::after{font-size:18px}
  .nt3 .nt3-scene{position:relative;order:2;flex:none;margin:auto 0 0 auto;width:var(--scn-w);height:var(--scn-h);
    -webkit-mask:linear-gradient(180deg,transparent 0,#000 16%);mask:linear-gradient(180deg,transparent 0,#000 16%)}
  .nt3 .nt3-scene img{width:165.5%;height:auto;left:-51.7%;top:-20%}
  .nt3 .nt3-navy{left:0;width:100%;height:58px}
  .nt3 .nt3-vertical{right:16px;bottom:calc(var(--scn-h) * .78);font-size:11px;gap:.36em}
  .nt3 .nt3-badge{--d:124px;width:var(--d);height:var(--d);left:10px;bottom:calc(var(--scn-h) * .28);font-size:12px;gap:.45em}
  .nt3 .nt3-badge__main{letter-spacing:.04em;white-space:nowrap}
  .nt3 .nt3-badge__sub{font-size:11.5px;letter-spacing:.06em}

  
  html body .panel.nt4{padding-bottom:min(150px,18svh)!important}
  .nt4 .nt4-inner{position:relative;flex:none;padding:calc(var(--head-h) + 26px) 24px 0}
  .nt4 .nt4-label{margin:0 0 14px}
  .nt4 .nt4-head{margin:0 0 22px;font-size:clamp(24px,6.6vw,28px);letter-spacing:.2em}
  .nt4 .nt4-list{display:flex;flex-direction:column}
  .nt4 .nt4-item{display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto auto auto;column-gap:18px;align-items:start;padding:16px 0;border-top:1px solid rgba(255,255,255,.18)}
  .nt4 .nt4-item:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
  .nt4 .nt4-icon{grid-row:1 / span 3;width:72px;height:72px;align-self:center}
  .nt4 .nt4-item__name{font-size:17px;letter-spacing:.1em}
  .nt4 .nt4-item__text{margin:0 0 8px;font-size:14px;letter-spacing:.04em;line-height:1.7;word-break:auto-phrase}
  .nt4 .nt4-btn.nt-btn{justify-self:start;min-height:38px;padding:0 16px;gap:10px;font-size:14px}
  .nt4 .nt4-btn::after{font-size:16px}
  .nt4 .nt4-waves{bottom:0;height:min(240px,28svh)}
  .nt4 .nt4-cream{left:0;width:100%;height:58px}
  .nt4 .nt4-caustic{background-image:url('../img/top04/caustic-fine-poster-sp.webp');
    -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.52) 20%,rgba(0,0,0,.52) 68%,#000 86%);
    mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.52) 20%,rgba(0,0,0,.52) 68%,#000 86%)}

  
  html body .panel.nt5{--wtr-h:min(28svh,270px);
    --nt5-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 420C150 250 330 120 540 80c160-30 270 6 330 110 50 88 40 230 70 400 22 128 60 270 60 410H0z'/%3E%3C/svg%3E")}
  .nt5 .nt5-inner{position:relative;order:1;flex:none;margin:0 0 44px;padding:calc(var(--head-h) + 20px) 24px 0}
  .nt5 .nt5-label{margin:0 0 14px}
  .nt5 .nt5-head{margin:0 0 12px;font-size:clamp(21px,5.8vw,24px);letter-spacing:.1em}
  .nt5 .nt5-body{font-size:14px;line-height:1.95;letter-spacing:.04em}
  .nt5 .nt5-body br{display:none}
  .nt5 .nt5-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:18px 0 0}
  .nt5 .nt5-fact{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 4px;min-width:0}
  .nt5 .nt5-fact+.nt5-fact{border-left:1px solid var(--nt-line)}
  .nt5 .nt5-fact dt{width:78px;height:78px;margin:0 0 10px}
  .nt5 .nt5-fact__en{font-size:9.5px;letter-spacing:.18em}
  .nt5 .nt5-fact__en::after{margin-top:4px;width:12px}
  .nt5 .nt5-fact__ja{margin-top:5px;font-size:13px;letter-spacing:.08em}
  .nt5 .nt5-fact dd{font-size:15px;line-height:1.7;letter-spacing:0}
  .nt5 .nt5-fact:nth-child(2) dd{white-space:nowrap;letter-spacing:-.01em}
  .nt5 .nt5-water{position:relative;order:2;flex:none;margin-top:auto;width:80%;height:var(--wtr-h)}
  .nt5 .nt5-leaf{right:0;bottom:calc(var(--wtr-h) * .2);width:72%;height:calc(var(--wtr-h) * 1.45);opacity:.8}
  .nt5 .nt5-script{left:calc(80vw * .1);bottom:calc(var(--wtr-h) * .7 + 6px);font-size:24px;transform:rotate(-14deg)}
}

@media (max-width:359px){
  .nt5 .nt5-fact{padding:0 2px}
  .nt5 .nt5-fact dd{font-size:13.5px}
  
  .nt5 .nt5-head{font-size:18px;letter-spacing:.06em}
}

@media (max-width:820px) and (max-height:739px){
  html body .panel.nt3{--scn-w:76vw}
  .nt3 .nt3-scene{-webkit-mask:linear-gradient(90deg,transparent 0,#000 14%),linear-gradient(180deg,transparent 0,#000 16%);-webkit-mask-composite:source-in;
    mask:linear-gradient(90deg,transparent 0,#000 14%) intersect,linear-gradient(180deg,transparent 0,#000 16%)}
  .nt3 .nt3-copy{padding-top:calc(var(--head-h) + 14px);margin-bottom:8px}
  .nt3 .nt3-label{margin-bottom:10px}
  .nt3 .nt3-name{margin-bottom:10px}
  .nt3 .nt3-head{margin-bottom:10px;font-size:22px;line-height:1.55}
  .nt3 .nt3-lead{margin-bottom:4px;font-size:13.5px;line-height:1.8}
  .nt3 .nt3-price{margin-bottom:12px}
  .nt3 .nt3-btn.nt-btn{min-height:42px}
  .nt3 .nt3-badge{--d:104px;left:6px;font-size:11px}
  .nt3 .nt3-badge__sub{font-size:10.5px}
  .nt4 .nt4-inner{padding-top:calc(var(--head-h) + 16px)}
  .nt4 .nt4-head{margin-bottom:14px}
  .nt4 .nt4-item{padding:12px 0}
  .nt5 .nt5-inner{padding-top:calc(var(--head-h) + 14px);margin-bottom:34px}
  .nt5 .nt5-label{margin-bottom:10px}
  .nt5 .nt5-head{margin-bottom:8px}
  .nt5 .nt5-body{font-size:13.5px;line-height:1.8}
  .nt5 .nt5-facts{margin-top:14px}
  .nt5 .nt5-fact dt{width:70px;height:70px;margin-bottom:8px}
  .nt5 .nt5-fact dd{line-height:1.55}
  html body .panel.nt5{--wtr-h:min(25svh,220px)}
}




html body .p1::after{display:none!important}
html body .p1 .water-ripples{display:none!important}
html body .p1 .ph-full{background:#1d374c url('../img/water-navy/water-navy.webp') 50% 38% / cover no-repeat!important;animation:none!important;transform:none!important}
html body .p1 .ph-full::before,html body .p1 .ph-full::after{display:none!important}
html body .p1 .ph-full .fv-ripple{display:block!important;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

html body .p1 .p1-veil{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse 44% 58% at 25% 52%,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%)}
@media (max-width:820px){
  html body .p1 .ph-full{background-image:url('../img/water-navy/water-navy-sp.webp')!important;background-position:58% 50%!important}
  
  html body .p1 .p1-veil{background:radial-gradient(ellipse 92% 34% at 50% 26%,rgba(13,30,44,.44) 0%,rgba(13,30,44,.24) 55%,rgba(13,30,44,0) 100%)}
}


.nt4 .nt4-water{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.nt4 .nt4-water__img{position:absolute;inset:0;background:#1d374c url('../img/water-navy/water-navy.webp') 50% 38% / cover no-repeat;transform:scaleY(-1)}
.nt4 .nt4-water__img .fv-ripple{position:absolute;inset:0;width:100%;height:100%;display:block}
.nt4 .nt4-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%)}
@media (max-width:820px){
  .nt4 .nt4-water__img{background-image:url('../img/water-navy/water-navy-sp.webp');background-position:58% 50%}
  .nt4 .nt4-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%)}
}


@media (min-width:821px){
  .nt5 .nt5-inner{display:block;right:auto;width:min(860px,calc(100vw - clamp(66px,7.4vw,140px) - 56px));top:calc(var(--head-h) + clamp(14px,2.6svh,40px))}
  .nt5 .nt5-label{margin:0 0 14px}
  .nt5 .nt5-head{margin:0 0 clamp(14px,2.2svh,24px)}
  .nt5 .nt5-body{max-width:820px}
  
  .nt5 .nt5-facts{display:flex;align-items:center;flex-wrap:nowrap;margin:clamp(16px,2.6svh,28px) 0 0;grid-template-columns:none}
  .nt5 .nt5-fact{display:flex;flex-direction:row;align-items:center;gap:16px;text-align:left;padding:0 clamp(18px,1.8vw,30px)}
  .nt5 .nt5-fact:first-child{padding-left:0}
  .nt5 .nt5-fact dt{--d:80px;flex:none;width:var(--d);height:var(--d);margin:0}
  .nt5 .nt5-fact__en{font-size:10px;letter-spacing:.18em}
  .nt5 .nt5-fact__en::after{margin-top:4px;width:12px}
  .nt5 .nt5-fact__ja{margin-top:5px;font-size:14px;letter-spacing:.1em}
  .nt5 .nt5-fact dd{font-size:15px;line-height:1.6;letter-spacing:.06em}
  .nt5 .nt5-fact:nth-child(2) dd{white-space:nowrap}
  
  .nt5 .nt5-fact:nth-child(3) dd{word-break:keep-all;max-width:10.2em}
}
@media (min-width:821px) and (max-width:1180px){
  .nt5 .nt5-fact{gap:12px;padding:0 14px}
  .nt5 .nt5-fact dd{font-size:14.5px;letter-spacing:.02em}
}

@media (min-width:821px) and (max-height:900px){
  .nt5 .nt5-body{line-height:1.9}
}
@media (min-width:821px) and (max-height:880px){
  .nt5 .nt5-water{height:40%}
  .nt5 .nt5-script{bottom:calc(40% * .8 + 2px)}
}
@media (min-width:821px) and (max-height:800px){
  .nt5 .nt5-water{height:36%}
  .nt5 .nt5-script{bottom:calc(36% * .8 + 2px)}
}
@media (min-width:821px) and (max-height:740px){
  .nt5 .nt5-water{height:33%}
  .nt5 .nt5-script{bottom:calc(33% * .8 + 2px)}
}




@media (min-width:821px){
  .nt4 .nt4-water__img{inset:auto;left:0;top:-20%;width:120%;height:120%;background-position:0% 100%;transform:none}
  .nt4 .nt4-water::after{background:radial-gradient(ellipse 56% 52% at 46% 55%,rgba(13,30,44,.52) 0%,rgba(13,30,44,.4) 45%,rgba(13,30,44,.14) 78%,rgba(13,30,44,0) 100%)}
  .nt4 .nt4-item__text{font-size:17px;letter-spacing:.06em}
}
@media (min-width:821px) and (max-width:1240px){
  .nt4 .nt4-item__text{font-size:16px;letter-spacing:.04em}
}
@media (max-width:820px){
  .nt4 .nt4-water__img{inset:auto;left:0;top:0;width:130%;height:130%;background-position:0% 0%}
  .nt4 .nt4-water::after{background:linear-gradient(180deg,rgba(13,30,44,.24) 0%,rgba(13,30,44,.1) 100%)}
  
  .nt4 .nt4-inner::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;bottom:-90px;pointer-events:none;
    background:linear-gradient(180deg,rgba(13,30,44,.2) 0%,rgba(13,30,44,.44) calc(var(--head-h) + 60px),rgba(13,30,44,.48) calc(100% - 150px),rgba(13,30,44,.3) calc(100% - 80px),rgba(13,30,44,0) 100%)}
  .nt4 .nt4-item__text{font-size:15px}
}
.nt4 .nt4-head{font-weight:300}
.nt4 .nt4-item__name{font-weight:400}
.nt4 .nt4-item__text{color:rgba(255,255,255,.95)}
.nt4 .nt4-btn.nt-btn{background:rgba(13,30,44,.5);border-color:#fff;color:#fff;font-weight:500}


@media (min-width:821px){
  
  html body .panel.nt5{--nt5-ww:50vw;--nt5-wh:56%;--nt5-left:clamp(66px,7.4vw,140px);
    --nt5-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M1000 340C830 210 660 70 460 40C320 20 210 60 160 150C104 250 120 400 94 560C68 720 0 860 0 1000H1000z'/%3E%3C/svg%3E")}
  .nt5 .nt5-water{left:auto;right:0;width:var(--nt5-ww);height:var(--nt5-wh)}
  .nt5 .nt5-water__img{--nt5-pos:56% 40%}
  
  .nt5 .nt5-leaf{right:0;top:0;bottom:auto;width:44vw;height:64%;opacity:.6;transform-origin:100% 0}
  .nt5 .nt5-leaf::before{background-position:100% 0;transform:none}
  
  .nt5 .nt5-script{left:auto;right:calc(var(--nt5-ww) * .08);bottom:calc(var(--nt5-wh) * .74 + 14px);transform:rotate(22deg);transform-origin:right bottom}
  
  .nt5 .nt5-inner{left:var(--nt5-left);right:auto;width:min(600px,calc(100vw - var(--nt5-ww) - var(--nt5-left) - 24px));
    top:calc(var(--head-h) + (100svh - var(--head-h) - var(--foot-h)) * .5);transform:translateY(-50%)}
  .nt5 .nt5-body{max-width:none}
  
  .nt5 .nt5-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:560px;margin:clamp(20px,3.2svh,34px) 0 0}
  .nt5 .nt5-fact{flex-direction:column;align-items:center;text-align:center;gap:0;padding:0 10px}
  .nt5 .nt5-fact:first-child{padding-left:10px}
  .nt5 .nt5-fact dt{--d:clamp(84px,min(6.6vw,11svh),100px);margin:0 0 14px}
  .nt5 .nt5-fact__en{font-size:10px;letter-spacing:.2em}
  .nt5 .nt5-fact__ja{margin-top:5px;font-size:14px;letter-spacing:.1em}
  .nt5 .nt5-fact dd{font-size:15px;line-height:1.7;letter-spacing:.04em}
  .nt5 .nt5-fact:nth-child(1) dd{max-width:6.5em}
  .nt5 .nt5-fact:nth-child(3) dd{max-width:9.8em}
}
@media (min-width:821px) and (max-width:1180px){
  .nt5 .nt5-fact{padding:0 6px}
  .nt5 .nt5-fact:first-child{padding-left:6px}
  .nt5 .nt5-fact dd{font-size:14.5px;letter-spacing:.02em}
  .nt5 .nt5-script{font-size:30px}
}

@media (min-width:821px) and (max-height:880px){
  .nt5 .nt5-water{height:var(--nt5-wh)}
  .nt5 .nt5-script{bottom:calc(var(--nt5-wh) * .74 + 14px)}
}

@media (min-width:821px) and (max-aspect-ratio:1/1){
  html body .panel.nt5{--nt5-ww:66vw;--nt5-wh:38%}
  .nt5 .nt5-inner{top:calc((var(--head-h) + 62svh) / 2);width:min(560px,64vw)}
  .nt5 .nt5-leaf{width:32vw;height:30%}
}


.nt3 .nt3-navy{background:#1d374c url('../img/water-navy/water-navy.webp') 100% 100% / max(100vw,150svh) auto no-repeat}
.nt3 .nt3-navy::after{display:none}
@media (max-width:820px){
  
  .nt3 .nt3-navy{background-image:url('../img/water-navy/water-navy-sp.webp');background-size:188vw auto;background-position:0 100%}
}


.nt5 .nt5-fact dd .nt5-ln{display:inline}
@media (min-width:821px){
  .nt5 .nt5-facts{--fg:clamp(28px,2.6vw,44px);display:grid;grid-template-columns:repeat(3,9.5em);column-gap:var(--fg);align-items:stretch;justify-content:start;
    width:max-content;max-width:none;font-size:15px}
  .nt5 .nt5-fact,.nt5 .nt5-fact:first-child{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0;gap:0;border-left:0}
  .nt5 .nt5-fact+.nt5-fact{border-left:0}
  .nt5 .nt5-fact+.nt5-fact::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--fg) / -2);border-left:1px solid var(--nt-line)}
  .nt5 .nt5-fact dt{flex:none}
  .nt5 .nt5-fact dd,.nt5 .nt5-fact:nth-child(n) dd{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    max-width:none;font-size:1em;letter-spacing:.04em;white-space:nowrap}
  .nt5 .nt5-fact dd .nt5-ln{display:block}
  .nt5 .nt5-fact:nth-child(2) dd{justify-content:center}
}
@media (min-width:821px) and (max-width:1180px){
  .nt5 .nt5-facts{--fg:clamp(18px,2vw,24px);grid-template-columns:repeat(3,9.3em);font-size:14px}
  .nt5 .nt5-fact dd,.nt5 .nt5-fact:nth-child(n) dd{letter-spacing:.02em}
}
@media (max-width:820px){
  .nt5 .nt5-fact dt{flex:none}
  .nt5 .nt5-fact dd{flex:1 1 auto}
  .nt5 .nt5-fact:nth-child(2) dd{display:flex;align-items:center;justify-content:center}
}


@media (min-width:821px) and (max-aspect-ratio:1/1){
  .nt3 .nt3-scene{-webkit-mask:none;mask:none}
  .nt3 .nt3-scene__wall{-webkit-mask:linear-gradient(180deg,transparent 0,#000 24%);mask:linear-gradient(180deg,transparent 0,#000 24%)}
}
@media (max-width:820px){
  .nt3 .nt3-scene{-webkit-mask:none;mask:none}
  .nt3 .nt3-scene__wall{-webkit-mask:linear-gradient(180deg,transparent 14.65%,#000 26.37%);mask:linear-gradient(180deg,transparent 14.65%,#000 26.37%)}
}
@media (max-width:820px) and (max-height:739px){
  .nt3 .nt3-scene__wall{-webkit-mask:linear-gradient(90deg,transparent 31.24%,#000 39.7%),linear-gradient(180deg,transparent 14.65%,#000 26.37%);-webkit-mask-composite:source-in;
    mask:linear-gradient(90deg,transparent 31.24%,#000 39.7%) intersect,linear-gradient(180deg,transparent 14.65%,#000 26.37%)}
}


.nt3 .nt3-price__val{display:inline-block;vertical-align:top}
.nt3 .nt3-price__incl{display:block;margin-top:-.3em;font-weight:300;font-size:.8125em;line-height:1.4;letter-spacing:.08em;color:rgba(31,58,77,.72)}
@media (max-width:820px){
  .nt3 .nt3-price{margin-bottom:8px}
  .nt3 .nt3-price__incl{margin-top:-.35em;font-size:12px;letter-spacing:.04em}
}
@media (max-width:820px) and (max-height:739px){
  .nt3 .nt3-price{margin-bottom:4px}
  .nt3 .nt3-copy{margin-bottom:5px}   
}
@media (max-width:374px){
  .nt3 .nt3-price{letter-spacing:0}
}