.cp-main{color:var(--navy);letter-spacing:.06em;-webkit-font-smoothing:antialiased;animation:cp-page-in .4s ease both}
@keyframes cp-page-in{from{opacity:0}to{opacity:1}}
.nb{white-space:nowrap}


@media (min-width:821px){
  body.cp-page{padding-bottom:var(--foot-h);background:var(--pale)} 
  body.cp-page header{background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 80%,transparent),color-mix(in srgb,var(--paper) 0%,transparent))!important}
}

@media (max-width:820px){
  #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}
}



.descent{position:relative;height:400vh}

html{scroll-snap-type:y proximity}
.descent .snap{position:absolute;left:0;width:1px;height:1px;top:calc(var(--p) * 300vh);scroll-snap-align:start;pointer-events:none}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--pale)}
.water{position:absolute;inset:-6%;background-size:cover;background-position:center;will-change:transform,opacity}
.water--surface{background-image:url("../img/brandbook/water-life.webp");
  transform:translate3d(0,calc(var(--p,0) * -14%),0) scale(calc(1 + var(--p,0) * .12));
  opacity:calc(1 - var(--p,0) * 1.35)}
.water--deep{background-image:url("../img/water-deep.webp");
  transform:translate3d(0,calc(14% - var(--p,0) * 14%),0) scale(calc(1.14 - var(--p,0) * .14));
  opacity:calc(var(--p,0) * 1.5 - .12)}

.shaft{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 72% at 50% -14%,color-mix(in srgb,var(--paper) 42%,transparent),color-mix(in srgb,var(--paper) 0%,transparent) 58%);
  opacity:calc(.5 + var(--p,0) * .3)}

.tint{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--navy) 0%,transparent),color-mix(in srgb,var(--navy) 9%,transparent));
  opacity:calc(.3 + var(--p,0) * .7)}

.bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:calc(.18 + var(--p,0) * .5)}
.bubble{position:absolute;bottom:-12vh;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--paper) 95%,transparent),color-mix(in srgb,var(--paper) 18%,transparent) 58%,color-mix(in srgb,var(--paper) 0%,transparent) 72%);
  animation:cp-rise linear infinite}
@keyframes cp-rise{from{transform:translate3d(0,0,0) scale(.9)}
  to{transform:translate3d(var(--dx,14px),-118vh,0) scale(1.1)}}


.beats{position:absolute;inset:0;display:grid;place-items:center;
  padding:calc(var(--head-h) + 18px) max(20px,6vw) calc(var(--foot-h) + 40px);text-align:center}
.beat{grid-area:1/1;position:relative;max-width:34em;
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .85s cubic-bezier(.22,.7,.25,1),transform 1.05s cubic-bezier(.22,.7,.25,1)}

.beat::before{content:"";position:absolute;inset:-14% -10%;z-index:-1;
  background:radial-gradient(58% 50% at 50% 50%,color-mix(in srgb,var(--paper) 62%,transparent),color-mix(in srgb,var(--paper) 34%,transparent) 56%,color-mix(in srgb,var(--paper) 0%,transparent) 76%)}
.beat.is-on{opacity:1;transform:none}
.beat h1,.beat h2{margin:0;font-weight:400;letter-spacing:.12em;color:var(--navy);
  font-size:clamp(22px,3.6vw,36px);line-height:1.9;text-wrap:balance;
  text-shadow:0 1px 18px var(--paper),0 0 6px var(--paper)}

.beat .body{margin:clamp(20px,3.4vh,34px) auto 0;max-width:27em;
  font-weight:400;font-size:clamp(14.5px,1.75vw,17px);line-height:2.25;letter-spacing:.07em;
  text-wrap:pretty;text-shadow:0 1px 14px var(--paper),0 0 5px var(--paper);
  opacity:0;transform:translate3d(0,10px,0);
  transition:opacity .9s cubic-bezier(.22,.7,.25,1) .28s,transform 1s cubic-bezier(.22,.7,.25,1) .28s}
.beat.is-on .body{opacity:1;transform:none}
.beat .body p{margin:0}
.beat .body p + p{margin-top:1.25em}
.beat .body p.turn{margin-top:2.1em;font-size:clamp(16px,2vw,19px);letter-spacing:.09em}
.beat .brandmark{display:block;width:clamp(132px,17vw,196px);height:auto;
  margin:clamp(30px,5vh,48px) auto 0;
  filter:drop-shadow(0 1px 16px var(--paper)) drop-shadow(0 0 5px var(--paper))}

.gauge{position:absolute;right:clamp(14px,3vw,38px);top:50%;transform:translateY(-50%);
  width:1px;height:24vh;background:color-mix(in srgb,var(--navy) 20%,transparent);z-index:5}
.gauge i{position:absolute;left:-1px;top:0;width:3px;border-radius:2px;
  background:var(--navy);height:calc(var(--p,0) * 100%)}
.cue{position:absolute;left:50%;bottom:calc(var(--foot-h) + 18px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);z-index:5;font-family:"Noto Serif JP",serif;font-size:14px;font-weight:500;
  line-height:1;letter-spacing:.34em;text-indent:.34em;color:var(--navy);
  text-shadow:0 1px 12px var(--paper);
  opacity:calc(1 - var(--p,0) * 4);
  display:flex;flex-direction:column;align-items:center;gap:9px}
.cue span{display:block;width:1px;height:32px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--navy) 55%,transparent),color-mix(in srgb,var(--navy) 0%,transparent));
  transform-origin:top;animation:cp-drip 2.6s ease-in-out infinite}
@keyframes cp-drip{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}


.after{position:relative;z-index:2}
.tenets-sec{background:var(--paper);padding:clamp(74px,13vh,128px) max(20px,6vw);
  display:grid;justify-items:center;gap:clamp(30px,5vh,46px);text-align:center}
.lead-label{margin:0;font-family:"Noto Serif JP",serif;font-size:14px;font-weight:500;line-height:1.4;
  letter-spacing:.32em;text-indent:.32em;color:var(--navy)}
.tenets{list-style:none;margin:0;padding:0;display:grid;justify-items:center;gap:clamp(13px,2.2vh,22px)}
.tenets li{font-size:clamp(18px,2.6vw,24px);font-weight:400;letter-spacing:.14em;line-height:1.7;white-space:nowrap}
.tenets li:nth-child(4){margin-top:clamp(10px,1.8vh,18px)}

.benefits{background:var(--paper);padding:0 max(20px,6vw) clamp(76px,13vh,130px);
  display:grid;justify-items:center;gap:clamp(28px,5vh,44px);text-align:center}
.sec-head{margin:0;font-weight:400;font-size:clamp(21px,3.2vw,30px);letter-spacing:.13em;line-height:1.9;text-wrap:balance}
.sec-lead{margin:0;font-weight:400;font-size:clamp(15.5px,1.9vw,18px);line-height:2.15;letter-spacing:.09em;max-width:34em;text-wrap:pretty}
.br-pc{display:none}
@media (min-width:620px){.br-pc{display:inline}}
.benefit-list{list-style:none;margin:0;padding:0;width:min(100%,940px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);align-items:start}
.benefit-list li{display:grid;justify-items:center;gap:clamp(13px,2vh,20px);min-width:0}
.benefit-list img{width:clamp(86px,13vw,132px);height:auto;mix-blend-mode:multiply}
.benefit-list .cap{font-size:clamp(14.5px,1.8vw,17px);line-height:1.9;letter-spacing:.07em;text-wrap:balance}
@media (max-width:560px){
  .benefit-list{grid-template-columns:1fr;gap:clamp(26px,5vh,38px)}
  .benefit-list li{grid-template-columns:76px 1fr;justify-items:start;align-items:center;gap:20px;text-align:left}
  .benefit-list img{width:76px}
}

.closing{background:var(--pale);padding:clamp(74px,13vh,130px) max(20px,6vw);
  display:grid;justify-items:center;gap:clamp(24px,4vh,36px);text-align:center}
.closing h2{margin:0;font-weight:400;font-size:clamp(20px,3vw,28px);line-height:2;letter-spacing:.12em;text-wrap:balance}
.closing p{margin:0;font-weight:400;font-size:clamp(15px,1.85vw,17.5px);line-height:2.15;letter-spacing:.09em;max-width:32em;text-wrap:pretty}
.cta{display:inline-flex;align-items:center;gap:14px;min-height:54px;padding:15px 30px;
  border:1px solid var(--navy);color:var(--navy);text-decoration:none;
  font-size:16px;line-height:1.4;letter-spacing:.14em;background:var(--paper);white-space:nowrap;
  transition:background-color .35s ease,color .35s ease}
.cta:hover,.cta:focus-visible{background:var(--navy);color:var(--paper)}
.cta:focus-visible{outline:2px solid var(--navy);outline-offset:3px}


@media (prefers-reduced-motion:reduce){
  .cp-main{animation:none}
  .descent{height:auto}
  html{scroll-snap-type:none}
  .descent .snap{display:none}
  .stage{position:relative;height:auto;padding:calc(var(--head-h) + 14vh) 0 14vh} 
  .water--deep{opacity:.45}
  .bubbles{display:none}
  .beats{position:static;display:grid;gap:14vh;padding:0 max(20px,6vw)}
  .beat{grid-area:auto;opacity:1;transform:none;transition:none;justify-self:center}
  .beat .body{opacity:1;transform:none;transition:none}
  .cue,.gauge{display:none}
}