img{height:auto}


.skiplink{
  position:fixed; top:0; left:0; z-index:1000;
  transform:translateY(-120%);
  padding:14px 22px;
  background:var(--c-accent); color:var(--c-on-accent);
  font-size:var(--fs-cap); font-weight:var(--fw-head);
  border-end-end-radius:var(--r-md);
  text-decoration:none;
}
.skiplink:focus-visible{transform:translateY(0); outline:3px solid var(--c-bg); outline-offset:-6px}


:root{
  
  --w-text: 800px;    
  --w-wide: 1200px;   
  --pad-x: clamp(25px, 4vw, 48px);  

  
  --sp-xl: clamp(80px, 9vw, 130px);   
  --sp-lg: clamp(48px, 5vw, 72px);    
  --sp-md: clamp(28px, 3vw, 40px);    
  --sp-sm: clamp(20px, 2vw, 24px);    
  --sp-xs: 12px;                      
  
  --band-pad: clamp(32px, 4.5vw, 64px);
  
  --gap-head: clamp(48px, 5vw, 72px);

  
  --r-pill: 999px;  
  --r-full: 50%;    
  --r-xl:   24px;   
  --r-lg:   16px;   
  --r-md:   12px;   
  --r-img:  10px;   
  --r-sm:    8px;   
  --r-ui:    6px;   
  
  --icon-grow: 1.22;
  --r-xs:    3px;   

  
  --fs-fv:    clamp(2rem,   1.2rem + 3.2vw, 4rem);      
  --fs-h2:    clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);   
  --fs-h3:    clamp(1.125rem,1rem + .5vw,  1.25rem);    
  --fs-h3s:   clamp(1rem, .95rem + .15vw, 1.0625rem);    
  --fs-h3l:   clamp(1.125rem, 1.05rem + .25vw, 1.25rem); 
  --fs-lead:  clamp(1.0625rem, 1rem + .35vw, 1.25rem);  
  --fs-body:  clamp(1rem,   .95rem + .2vw,  1.125rem);  
  --fs-cap:   clamp(.875rem, .85rem + .15vw, 1rem);     
  --fs-small: clamp(.8125rem, .8rem + .1vw, .875rem);   
  --fs-en:    clamp(.6875rem, .65rem + .1vw, .75rem);   

  
  --fs-tag:  12px;  
  --fs-note: 13px;  
  --fs-list: 14px;
  --fs-h2s:  24px;      
  --fs-ui:   16px;      
  --fs-en-s: .6875rem;    

  
  
  --lh-body: 1.9;   
  --lh-lead: 1.9;   
  --lh-head: 1.3;      
  --lh-display: 1.45;  
  --lh-letter: 2.15;   
  --lh-card: 1.6;   
  --lh-cap:  1.7;   
  --lh-ui:   1.4;   

  
  --header-h: 107px;
  
  
  --overlap: 160svh;
  --c-rise: #07162f;        

  
  --ls-body:.01em;   
  --ls-head:0;       
  --ls-ui:  .08em;   
  --ls-fv:  .03em;   
  --ls-en: -.02em;   

  

  
  --fw-h1:   700;   
  --fw-head: 500;   
  --fw-strong: 600; 
  --fw-lead: 400;   
  --fw-body: 400;   
  --fw-cap:  400;   
  --fw-ui:   400;   

  
  
  --c-accent:#1a56bd;   
  --c-accent-l: #5f84cd;  
  --c-accent-l2:#9db1dd;  
  --c-ink:   #1a1a1a;   
  --c-text:  var(--c-ink);
  --c-sub:   var(--c-ink);
  
  --c-desc:  #555;        
  --c-read:  #3a3a3a;     
  --c-weak:  #767676;     
  --c-faint: #767676;          
  --c-mute:  #b3b3b3;     
  --c-line:  #d8d8d8;   
  --c-line-l:#ebebeb;   
  --c-fill:  #f4f5f6;   
  --c-ph:    #e6e6e6;   
  
  --c-chip:  rgba(26,26,26,.04);
  --c-pale-bg:#f5f7fb;  
  --c-pale-bg2:#fafafa; 
  --c-footer:var(--c-accent);  
  --c-bg:    #fff;
  
  --c-on-accent: #fff;
  --c-error: #b3261e;   
}

*{box-sizing:border-box;margin:0;padding:0}


[hidden]{display:none!important}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }

body{
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:var(--fw-body);
  color:var(--c-text);
  background:var(--c-bg);
  
  letter-spacing:var(--ls-body);
}


.ph{background:var(--c-ph);border:1px solid var(--c-line);
  display:flex;align-items:center;justify-content:center;
  color:var(--c-sub);font-size:var(--fs-small);text-align:center;padding:var(--sp-sm)}
.ph.-sq{aspect-ratio:1/1}
.ph.-card{aspect-ratio:16/10}

.ph.-eye{aspect-ratio:1200/630;width:100%;height:auto;
  object-fit:cover;background:var(--c-ph);padding:0;border:none}
.ph.-logo{aspect-ratio:5/2}
.ph.-diagram{aspect-ratio:16/6}
.ph.-portrait{aspect-ratio:3/4}


.inner{max-width:var(--w-wide);margin-inline:auto;padding-inline:var(--pad-x)}
.inner-text{max-width:var(--w-text);margin-inline:auto;padding-inline:var(--pad-x)}

.text-col{max-width:var(--w-text)}

.text-col.-center{margin-inline:auto;text-align:center}

section{padding-block:var(--sp-xl)}
section.-tall{padding-block:clamp(120px, 14vw, 202px)}

section.-pale{background:var(--c-pale-bg2)}



h1,h2,h3{line-height:var(--lh-head);color:var(--c-ink);font-weight:var(--fw-head);
  text-wrap:balance;
  
  word-break:auto-phrase}

.wrow h3,.krow h3,.wcard__title,.kcard__title{text-wrap:auto}

.sec-head__en,.en,.gate__en,.work__word,.d-no{word-break:normal}

h1,h2,.sec-head.-ja-only .sec-head__ja,.flip__item{font-feature-settings:"palt"}
h1{font-size:var(--fs-fv);letter-spacing:var(--ls-head);font-weight:var(--fw-h1)}
h2{font-size:var(--fs-h2);letter-spacing:var(--ls-head)}

.lead,.sec-head + p{line-height:var(--lh-lead)}
.lead{font-weight:var(--fw-lead)}
.lead{margin-block-start:var(--sp-md)}


.sec-head{margin-block-end:var(--sp-lg)}

.head-row{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-md);flex-wrap:wrap}
.head-row .sec-head{margin-block-end:0}
.head-row .btn{margin-block-end:6px}

.head-row + .text-col{margin-block-start:clamp(28px, 2.5vw, 36px)}
@media (max-width: 767px){
  .head-row{display:block}
  .head-row .btn{margin-block-start:var(--sp-md)}
}
.sec-head__ja{font-size:var(--fs-small);font-weight:var(--fw-strong);color:var(--c-ink);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-ui);display:flex;align-items:center;gap:var(--sp-xs)}

.sec-head__ja::before{content:"";width:5px;height:5px;background:var(--c-accent);
  border-radius:var(--r-full);flex:none}

@keyframes dotPing{
  0%  {box-shadow:0 0 0 0    rgba(26,86,189,.5)}
  85% {box-shadow:0 0 0 12px rgba(26,86,189,0)}
  100%{box-shadow:0 0 0 0    rgba(26,86,189,0)}
}

main:not(.lower) .sec-head__ja::before,
main.lower .page-head .sec-head__ja::before{
  animation:dotPing 1.9s cubic-bezier(.15,.65,.3,1) infinite}
@media (prefers-reduced-motion: reduce){
  main:not(.lower) .sec-head__ja::before,
  main.lower .page-head .sec-head__ja::before{animation:none}
}

.js-char{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1;
  padding:.28em .04em .34em;margin:-.28em -.04em -.34em}
.js-char > span{display:inline-block;transform:translateY(150%);
  transition:transform .9s cubic-bezier(.19,1,.22,1);
  transition-delay:var(--char-delay,0s);will-change:transform}
.js-char.-v > span{transform:translateY(0)}

.gate__en .js-char{overflow:visible}
.gate__en .js-char > span{transition:transform .42s cubic-bezier(.19,1,.22,1);
  transition-delay:var(--char-delay,0s)}
@media (hover: hover){.gate:hover .gate__en .js-char > span{transform:translateY(-22%)}}
@media (prefers-reduced-motion: reduce){
  .js-char > span{transition:none}
  @media (hover: hover){.gate:hover .gate__en .js-char > span{transform:none}}}

.sec-head__en{font-family:"Inter",sans-serif;font-weight:600;color:var(--c-ink);
  font-size:clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);   
  line-height:1.05;letter-spacing:var(--ls-en);
  margin-block-start:var(--sp-xs);text-transform:none}

.sec-head.-ja-only .sec-head__ja{font-size:var(--fs-h2);font-weight:var(--fw-head);
  letter-spacing:var(--ls-head);line-height:var(--lh-display);gap:var(--sp-sm);
  align-items:flex-start}

.sec-head.-ja-only .sec-head__ja::before{width:7px;height:7px;
  margin-block-start:calc((1em * var(--lh-head) - 7px) / 2)}


.sec-head.-quiet .sec-head__ja{font-size:var(--fs-small);font-weight:var(--fw-strong);
  color:var(--c-ink);letter-spacing:var(--ls-ui)}
.sec-head.-quiet .sec-head__ja::before{content:none}


.sec-head.-nodot .sec-head__ja::before{content:none}

section.-center .sec-head.-mid{text-align:center}
section.-center .sec-head.-mid .sec-head__ja{justify-content:center}
section.-center .form{margin-inline:auto}

.sec-head.-mid{margin-block:var(--gap-head) var(--sp-md)}
.sec-head.-mid .sec-head__ja{font-size:var(--fs-h2s);font-weight:var(--fw-strong);
  letter-spacing:var(--ls-head);gap:14px}
.sec-head.-mid .sec-head__ja::before{width:10px;height:10px;
  margin-block-start:calc((1em * var(--lh-display) - 10px) / 2)}

.sec-head.-sm{margin-block:clamp(48px, 5vw, 72px) var(--sp-md)}
.sec-head.-sm .sec-head__ja{font-size:var(--fs-h3);font-weight:var(--fw-strong);
  letter-spacing:var(--ls-head)}
.sec-head.-sm .sec-head__ja::before{width:6px;height:6px;
  margin-block-start:calc((1em * var(--lh-display) - 6px) / 2)}


.sec-head.-center{text-align:center}
.sec-head.-center .sec-head__ja{justify-content:center}
.sec-head.-center .lead{margin-inline:auto}
h3{font-size:var(--fs-h3);letter-spacing:var(--ls-head)}

p{margin-block-start:var(--sp-sm);text-wrap:pretty}


@media (min-width: 768px) and (max-width: 1366px){
  
  p{text-wrap:auto;word-break:auto-phrase}
}
@media (max-width: 767px){
  
  p,h1,h2,h3,.sec-head__ja{text-wrap:auto}
  
  h1,h2,h3,.sec-head__ja{word-break:normal}
}
p:first-child{margin-block-start:0}

h2 + p, h2 + .lead, .sec-head + p{line-height:var(--lh-lead)}
.lead{font-weight:var(--fw-lead)}
.lead{margin-block-start:var(--sp-md)}
h3 + p{margin-block-start:var(--sp-xs)}

:where(h1,h2,h3,h4,h5,h6)[id]{scroll-margin-top:calc(var(--header-h) + 24px)}


h2{margin-block-end:0}



@media (max-width: 767px){ .text-col p:not(.lead){font-size:15.5px} }
.lead{font-size:var(--fs-lead);color:var(--c-text)}
.small{font-size:var(--fs-small);color:var(--c-sub)}
.en{font-family:"Inter",sans-serif;font-size:var(--fs-en);
  letter-spacing:.12em;text-transform:uppercase;color:var(--c-sub)}



.header{position:sticky;top:0;z-index:50;background:none;border:0;
  padding-block:29px 14px;pointer-events:none;
  transition:transform .38s cubic-bezier(.2,.8,.2,1)}

.header.is-hidden{transform:translateY(calc(-100% - 20px))}
@media (prefers-reduced-motion: reduce){
  .header{transition:none}
}

.header__in{max-width:calc(var(--w-wide) - var(--pad-x) * 2);
  width:calc(100% - var(--pad-x) * 2);margin-inline:auto;
  padding:10px 40px 10px 60px;pointer-events:auto;
  background:var(--c-accent);border-radius:var(--r-pill);
  box-shadow:0 8px 28px rgba(7,22,47,.16);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-md);min-height:64px}

@media (min-width: 901px){
  .header__in{max-width:calc(var(--w-wide) - (var(--pad-x) - 48px) * 2);
    width:calc(100% - max(8px, var(--pad-x) - 48px) * 2)}
}

@media (max-width: 1199px){
  .header__in{padding-left:40px}
}

@media (min-width: 1140px) and (max-width: 1366px){
  .header__in{
    max-width:calc(var(--w-wide) - var(--pad-x) * 2);
    width:calc(100% - var(--pad-x) * 2)}
}
.logo{display:flex;align-items:center;flex:none;text-decoration:none}

.header .logo img{filter:brightness(0) invert(1)}
.logo img{height:36px;width:auto;display:block}

.logo.-w img{filter:brightness(0) invert(1)}
.gnav{display:flex;align-items:center;gap:clamp(16px,2vw,28px);flex-wrap:wrap}
.gnav a{font-size:var(--fs-small);line-height:var(--lh-ui);letter-spacing:var(--ls-ui);
  font-weight:var(--fw-head);
  color:var(--c-ink);text-decoration:none;white-space:nowrap}
.header .gnav a{color:var(--c-on-accent);font-size:var(--fs-ui)}

.header .gnav a[href="index.html"]{display:none}

.gnav__en{display:none}

@media (max-width: 1023px){
  .header .gnav a{font-size:var(--fs-small)}
  .header__in{padding-inline:28px}
}


.navbtn{display:none;appearance:none;-webkit-appearance:none;
  width:44px;height:44px;padding:0;border:0;border-radius:var(--r-ui);
  background:transparent;color:var(--c-on-accent);cursor:pointer;
  place-items:center;flex:none}
.navbtn__bars{display:grid;gap:5px;width:22px}
.navbtn__bars i{display:block;height:2px;background:currentColor;border-radius:2px;
  transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .2s ease}

.is-navopen .navbtn__bars i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.is-navopen .navbtn__bars i:nth-child(2){opacity:0}
.is-navopen .navbtn__bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (prefers-reduced-motion: reduce){ .navbtn__bars i{transition:none} }


@media (max-width: 1024px){
  .header{padding-block:10px}
  
  .header__in{
    flex-direction:row;align-items:center;justify-content:space-between;
    gap:12px;padding:8px 10px 8px 20px;min-height:0;border-radius:var(--r-pill)}
  .logo img{height:26px}
  
  @media (min-width: 768px){
    
    .header__in{padding:10px 20px 10px 30px;
      max-width:calc(var(--w-wide) - var(--pad-x) * 2);
      width:calc(100% - var(--pad-x) * 2)}
    .logo img{height:32px}
    .navbtn{width:52px;height:52px}
    .navbtn__bars{width:26px;gap:6px}
    .navbtn__bars i{height:2.5px}
    .is-navopen .navbtn__bars i:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
    .is-navopen .navbtn__bars i:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}
  }
  .navbtn{display:grid;position:relative;z-index:60}
  
  .is-navopen .header .logo{position:relative;z-index:60}


  
  .gnav{
    
    position:fixed;inset:0;z-index:55;
    display:grid;align-content:center;justify-items:stretch;
    gap:0;width:auto;
    padding:calc(var(--header-h) + 8px) 28px 40px;
    background:var(--c-accent);
    
    visibility:hidden;transform:translateX(-100%);
    transition:transform var(--nav-slide) cubic-bezier(.2,.8,.2,1) 0s,
      visibility 0s linear var(--nav-slide);                     
    overflow-y:auto;overscroll-behavior:contain}
  .is-navopen .gnav{
    visibility:visible;transform:none;
    transition:transform var(--nav-slide) cubic-bezier(.2,.8,.2,1) 0s,
      visibility 0s;}                                            
  
  .header .gnav a[href="index.html"]{display:block}
  
  .gnav__en{
    display:inline;margin-inline-start:10px;
    font-family:"Inter",sans-serif;font-size:12px;font-weight:500;
    letter-spacing:.06em;color:rgba(255,255,255,.62)}
  .header .gnav a{
    font-size:1.0625rem;color:var(--c-on-accent);padding-block:18px;
    padding-inline-start:18px;
    border-block-end:1px solid rgba(255,255,255,.22)}
  .header .gnav a:first-child{border-block-start:1px solid rgba(255,255,255,.22)}
  
  
  .header .gnav a[aria-current="page"]{padding-inline-start:36px}
  .header .gnav a[aria-current="page"]::before{
    content:"";position:absolute;inset-inline-start:18px;top:50%;
    width:8px;height:8px;margin-block-start:-4px;
    border-radius:var(--r-full);background:var(--c-bg)}
  
  .header .gnav a::after{content:none}
}



:root{
  --nav-slide: .45s;  
}

.is-navopen{overflow:hidden}

.is-navopen .header{transform:none;transition:none}
@media (prefers-reduced-motion: reduce){
  .gnav{transition:opacity .15s linear, visibility 0s linear .15s}
  
  .is-navopen .gnav{transition:none}
}


@media (max-width: 1023px) and (max-height: 560px){
  .header{padding-block:8px}
  .header__in{
    flex-direction:row;align-items:center;gap:14px;
    padding:8px 18px;border-radius:var(--r-pill);min-height:0}
  .logo img{height:22px}
  .gnav{display:grid;grid-template-columns:repeat(3,auto);gap:0 14px;width:auto}
  .header .gnav a{font-size:var(--fs-tag);padding-block:5px 6px}
  :root{--header-h:88px}
}




@media (max-width: 1024px){ :root{--header-h:92px} }
@media (max-width: 767px){
  :root{
    --header-h:65px;   
    
    --fs-cap:14px;
  }
}


.gnav a{position:relative;padding-block-end:3px}
.gnav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s cubic-bezier(.2,.8,.2,1)}
@media (hover: hover){.gnav a:hover::after{transform:scaleX(1);transform-origin:left}}



.btn{display:inline-flex;align-items:center;gap:26px;
  text-decoration:none;color:inherit;cursor:pointer;
  font-weight:var(--fw-ui);line-height:var(--lh-ui);
  border:1px solid var(--c-line);border-radius:var(--r-ui);background:var(--c-bg);
  padding:17px 24px 17px 40px;
  transition:border-color .35s ease,background-color .35s ease}
.btn__label{position:relative;font-size:var(--fs-body);letter-spacing:var(--ls-body);
  font-weight:var(--fw-head);
  color:var(--c-ink);white-space:nowrap;
  transition:color .35s ease}
.btn__label::after{display:none}

.btn__icon{flex:none;width:43px;height:43px;border-radius:var(--r-full);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--c-accent);color:var(--c-on-accent);
  transition:transform .4s cubic-bezier(.2,.8,.2,1)}

.btn .arw{width:16px;height:16px;display:block}


@media (hover: hover){.btn:hover{border-color:var(--c-accent);background:var(--c-accent)}
.btn:hover .btn__label{color:var(--c-on-accent)}
.btn:hover .btn__icon{background:var(--c-bg);color:var(--c-accent);transform:scale(var(--icon-grow))}}


.btn.-fill{background:var(--c-bg);border-color:var(--c-accent)}
.btn.-fill .btn__label{color:var(--c-accent)}
.btn.-fill .btn__icon{background:var(--c-accent);color:var(--c-on-accent)}


.btn.-light{background:transparent;border-color:rgba(255,255,255,.4)}
.btn.-light .btn__label{color:var(--c-on-accent)}
.btn.-light .btn__icon{background:var(--c-bg);color:var(--c-accent)}
@media (hover: hover){.btn.-light:hover{border-color:var(--c-bg);background:var(--c-bg)}
.btn.-light:hover .btn__label{color:var(--c-ink)}
.btn.-light:hover .btn__icon{background:var(--c-rise);color:var(--c-on-accent)}}

.btns{display:flex;flex-wrap:wrap;gap:var(--sp-sm);margin-block-start:var(--sp-lg)}
.btns.-center{justify-content:center}



.fv{position:relative;min-height:calc(100svh - var(--header-h));
  display:flex;align-items:center;
  padding-block:var(--sp-xl);overflow:hidden;background:var(--c-bg)}



.fv__visual{position:absolute;right:calc(-3% + 20px);left:0;top:0;height:100%;
  z-index:0;pointer-events:none}
.fv__visual canvas{width:100%;height:100%;display:block}
.fv > .inner{position:relative;z-index:1}



@media (max-width: 1024px), (min-width: 600px) and (max-width: 1366px) and (orientation: portrait){
  .fv{display:flex;flex-direction:column;justify-content:center}
  .fv__visual{position:static;order:-1;width:100%;
    height:clamp(240px,40vh,380px);
    margin-block-start:0;margin-block-end:var(--sp-lg)}
  
  .fv__visual canvas{position:absolute;left:0;top:0;width:100%;height:100%}
}


.fv__cue{position:absolute;left:clamp(16px, 2.6vw, 38px);top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:16px}
.fv__cue-txt{writing-mode:vertical-rl;
  font-family:"Inter",sans-serif;font-size:var(--fs-en-s);font-weight:500;
  
  letter-spacing:.18em;line-height:1;color:var(--c-weak)}
.fv__cue-line{width:1px;height:clamp(80px,14vh,130px);background:var(--c-line);
  position:relative;overflow:hidden}
.fv__cue-line::after{content:"";position:absolute;inset:0;background:var(--c-accent);
  transform:translateY(-100%);
  animation:cueSlide 2.6s cubic-bezier(.19,1,.22,1) infinite}
@keyframes cueSlide{
  0%{transform:translateY(-100%)}
  55%{transform:translateY(0)}
  100%{transform:translateY(100%)}
}
@media (prefers-reduced-motion: reduce){
  .fv__cue-line::after{animation:none;transform:translateY(0)}
}

@media (max-width: 1024px) and (min-width: 768px){ .fv__cue{display:none} }


.fv > .inner{width:100%}
.fv h1{margin-block-end:var(--sp-md);color:var(--c-ink);letter-spacing:var(--ls-fv)}



.wipe{position:relative;display:block;width:fit-content;overflow:hidden;
  padding-block:.14em;margin-block:-.14em}

.js .wipe > span{display:block;transform:rotate(.3deg);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 88%,rgba(0,0,0,0) 100%);
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
  -webkit-mask-size:0% 100%;      mask-size:0% 100%;
  transition:-webkit-mask-size .85s cubic-bezier(.82,.46,.28,.88),
             mask-size .85s cubic-bezier(.82,.46,.28,.88),
             transform .45s cubic-bezier(.82,.46,.28,.88);
  transition-delay:var(--wipe-delay,0s)}
.js .fv.is-ready .wipe > span{
  -webkit-mask-size:118% 100%; mask-size:118% 100%; transform:rotate(0)}
@media (prefers-reduced-motion: reduce){
  
  .js .wipe > span{transform:none;transition:none;
    -webkit-mask-image:none;mask-image:none}
}

.fv h1 .-accent{color:var(--c-accent)}

@media (min-width: 901px){
  .fv .text-col{margin-inline-start:-28px}
}
.fv .lead{max-width:38em}


.work{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px, 5vw, 72px);align-items:start;
  margin-block-start:var(--sp-lg)}   



.work__fig{display:none}
.work__visual{position:sticky;top:calc(var(--header-h) + var(--sp-md));
  background:var(--c-pale-bg);border-radius:var(--r-lg);
  padding:28px 30px;overflow:hidden;min-height:485px;
  display:flex;flex-direction:column}
.work__top{display:flex;justify-content:space-between;
  font-family:"Inter",sans-serif;font-size:var(--fs-en-s);letter-spacing:.09em;
  line-height:var(--lh-ui);color:var(--c-sub)}
.work__no b{font-weight:600;color:var(--c-ink)}

.work__graphic{flex:1;min-height:250px;
  display:flex;align-items:center;justify-content:center}
.work__matrix{display:grid;grid-template-columns:repeat(6,19px);gap:10px;
  transform:rotate(-12deg);
  transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.work__matrix i{display:block;width:19px;height:19px;border-radius:var(--r-full);
  background:var(--c-accent);
  transition:transform 1s cubic-bezier(.2,.7,.2,1),
    border-radius .8s, opacity .8s, background .8s;
  transition-delay:calc(var(--dot-index) * .01s)}
.work__matrix i:nth-child(3n){opacity:.3}


.work__graphic[data-step="1"] .work__matrix{transform:rotate(0)}
.work__graphic[data-step="1"] .work__matrix i{
  border-radius:var(--r-xs);transform:scaleY(.5);background:var(--c-accent-l)}
.work__graphic[data-step="1"] .work__matrix i:nth-child(3n){
  transform:scaleY(1);opacity:1}

.work__graphic[data-step="2"] .work__matrix{transform:rotate(45deg) scale(.85)}
.work__graphic[data-step="2"] .work__matrix i{border-radius:var(--r-xs);
  transform:translate(calc(var(--col) * 3px), calc(var(--row) * 3px));opacity:1}
.work__graphic[data-step="2"] .work__matrix i:nth-child(even){background:var(--c-accent-l2)}

.work__graphic[data-step="3"] .work__matrix{transform:rotate(0) scale(1.15)}
.work__graphic[data-step="3"] .work__matrix i{border-radius:var(--r-xs);
  transform:scaleX(1.4) scaleY(.55);opacity:1;background:var(--c-accent-l2)}

.work__graphic[data-step="3"] .work__matrix i:nth-child(-n+12){
  background:var(--c-accent);transform:scaleX(1.4)}

.work__bottom{margin-block-start:20px}
.work__word{display:block;font-family:"Inter",sans-serif;font-weight:500;
  font-size:clamp(2.25rem,1.6rem + 2.4vw,3.4375rem);  
  letter-spacing:-.055em;line-height:1.05;color:var(--c-accent)}
.work__cap{margin-block-start:4px;font-size:var(--fs-cap);
  line-height:var(--lh-cap);color:var(--c-text)}


.work__list{list-style:none;margin:0;padding:0}

.work__item{min-height:56svh;display:flex;flex-direction:column;
  justify-content:center;padding-block:var(--sp-lg)}

.work__item:first-child{justify-content:flex-start;padding-block-start:0}
.work__item + .work__item{border-top:1px solid var(--c-line)}

.work__item:last-child{border-bottom:1px solid var(--c-line)}
.work__badge{display:grid;place-items:center;width:44px;height:44px;
  border-radius:var(--r-full);background:var(--c-fill);color:var(--c-sub);
  font-family:"Inter",sans-serif;font-size:var(--fs-small);
  letter-spacing:var(--ls-ui);line-height:1;transition:background .4s,color .4s}
.work__item.is-on .work__badge{background:var(--c-accent);color:var(--c-on-accent)}
.work__item h3{margin-block-start:var(--sp-md);
  font-size:clamp(1.25rem,1.05rem + .6vw,1.625rem);   
  line-height:var(--lh-card);letter-spacing:var(--ls-head)}
.work__item p{margin-block-start:var(--sp-sm);font-size:var(--fs-cap);
  line-height:var(--lh-cap);color:var(--c-desc);
  max-width:30em}


.work__close{margin-block-start:var(--sp-lg)}


@media (max-width: 767px), (max-width: 1023px) and (max-height: 560px){
  .work{grid-template-columns:1fr;gap:var(--sp-lg)}
  .work__visual{position:static;min-height:0}
  .work__item{min-height:0}
}


@media (max-width: 767px) and (min-height: 561px){
  .work{display:block}
  .work__visual{
    position:sticky;top:calc(var(--header-h) + 48px);z-index:2;
    padding:22px 24px 24px;min-height:0;
    display:flex;flex-direction:column}
  
  .work__graphic{min-height:200px}
  
  .work__matrix{grid-template-columns:repeat(6,16px);gap:8px}
  .work__matrix i{width:16px;height:16px}
  .work__bottom{margin-block-start:14px}
  
  .work__visual{margin-block-end:calc(18px + var(--work-text))}
  
  .work__word{font-size:30px}
  .work__cap{font-size:12px}

  
  
  
  .work__list{
    position:sticky;top:calc(var(--header-h) + 48px + var(--work-fig) + 18px);
    margin-block-start:calc(-1 * var(--work-text));
    min-height:var(--work-text)}
  .work__item{
    position:absolute;inset-inline:0;top:0;min-height:0;border:0;padding:0;
    opacity:0;visibility:hidden;
    transition:opacity .35s ease, visibility 0s linear .35s}
  .work__item.is-on{opacity:1;visibility:visible;transition-delay:0s}
  .work__item + .work__item{border-top:0}
  
  .work{
    --work-step:56svh;
    
    --work-hold-ratio:.82;
    
    --work-fig:331px;
    
    --work-text:210px;
    min-height:calc(var(--work-step) * (4 + var(--work-hold-ratio)))}
  
  .work__item:last-child{border-bottom:0}
}


@media (prefers-reduced-motion: reduce){
  .work__visual{position:static;min-height:0}
  .work__matrix,.work__matrix i{transition:none}
  .work__item{min-height:0}
}


.wlist{margin-block-start:var(--sp-lg);border-top:1px solid var(--c-line)}
.wrow{display:grid;grid-template-columns:clamp(280px,30vw,380px) 1fr;
  gap:clamp(28px, 4vw, 58px);align-items:center;
  padding-block:var(--sp-md);border-bottom:1px solid var(--c-line);
  text-decoration:none;color:inherit}

.wrow h3{font-size:var(--fs-h3l);
  line-height:var(--lh-card);letter-spacing:var(--ls-head)}
.wrow p{margin-block-start:var(--sp-xs);font-size:var(--fs-cap);
  line-height:var(--lh-cap);color:var(--c-desc)}

.wrow,.krow{position:relative}
.wrow::after,.krow::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:1px;background:var(--c-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.2,.8,.2,1)}
@media (hover: hover){.wrow:hover::after,.krow:hover::after{transform:scaleX(1)}}

.wrow h3,.krow h3{transition:color .35s ease}
@media (hover: hover){.wrow:hover h3,.krow:hover h3{color:var(--c-accent)}}

.wrow .ph{transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
@media (hover: hover){.wrow:hover .ph{opacity:.86;transform:translateY(-3px)}}

@media (prefers-reduced-motion: reduce){
  .wrow::after,.krow::after,
  .gnav a::after,.footer a::after{transition:none}
  .wrow .ph,.wcard .ph,.vcard .ph,.kcard{transition:none}
  @media (hover: hover){.wrow:hover .ph,.wcard:hover .ph,.vcard:hover .ph{transform:none}
.kcard:hover{transform:none}}}



.cat{display:inline-block;font-size:var(--fs-small);line-height:var(--lh-ui);
  letter-spacing:var(--ls-ui);color:var(--c-text);background:none;
  border:1px solid var(--c-line);
  border-radius:var(--r-pill);padding:3px 13px}

.tags{display:flex;flex-wrap:wrap;gap:4px 16px}
.tag{font-size:var(--fs-small);line-height:var(--lh-ui);
  letter-spacing:var(--ls-ui);color:var(--c-accent)}
.tag::before{content:"#";margin-inline-end:2px;opacity:.6}


.klist{margin-block-start:var(--sp-lg);border-top:1px solid var(--c-line)}
.krow{display:grid;grid-template-columns:200px 1fr;
  gap:clamp(20px,3vw,40px);align-items:center;   
  padding-block:var(--sp-md);border-bottom:1px solid var(--c-line);
  text-decoration:none;color:inherit}

.krow__meta{display:flex;flex-direction:column;align-items:flex-start;gap:6px}

.krow h3{font-size:var(--fs-h3l);line-height:var(--lh-card);
  letter-spacing:var(--ls-head)}






.gates-wrap{background:linear-gradient(to bottom,transparent 50%,var(--c-footer) 50%)}
.gates.-one{grid-template-columns:1fr}
.gates{display:grid;grid-template-columns:1fr 1fr;padding:0;
  max-width:var(--w-wide);margin-inline:auto;
  background:var(--c-pale-bg);border-radius:var(--r-xl);overflow:hidden}
.gate{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-xs);text-align:center;text-decoration:none;color:inherit;
  padding-block:clamp(56px, 6vw, 87px);
  transition:background .3s}


.gate__icon{margin-block-start:var(--sp-md);
  width:48px;height:48px;border-radius:var(--r-full);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--c-accent);color:var(--c-on-accent);
  transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.gate__icon .arw{width:17px;height:17px;display:block}

@media (hover: hover){.gate:hover .gate__icon{transform:scale(var(--icon-grow))}}
.gate + .gate{border-left:1px dotted var(--c-line)}

.gate__en{font-family:"Inter",sans-serif;font-weight:600;color:var(--c-ink);
  font-size:clamp(2.25rem, 1.5rem + 3vw, 3.75rem);   
  line-height:1.05;letter-spacing:var(--ls-en)}

.gate__ja{font-size:var(--fs-small);font-weight:var(--fw-head);
  letter-spacing:var(--ls-ui);line-height:var(--lh-head);color:var(--c-text)}

@media (max-width: 767px){
  .gates{grid-template-columns:1fr;border-radius:var(--r-lg)}
  .gate + .gate{border-left:none;border-top:1px dotted var(--c-line)}
}


.footer{background:var(--c-footer);color:rgba(255,255,255,.88);
  padding-block:clamp(64px,7vw,96px) clamp(40px,4vw,56px)}
.footer__in{max-width:var(--w-wide);margin-inline:auto;padding-inline:var(--pad-x)}



.footer__top{display:flex;flex-wrap:wrap;
  gap:clamp(40px, 6vw, 87px) clamp(32px, 4vw, 58px);align-items:center}
.footer__brand .logo{color:var(--c-on-accent)}
.footer__brand .logo img{height:48px}

.footer__nav{display:flex;flex-wrap:wrap;justify-content:flex-end;
  margin-inline-start:auto;
  gap:var(--sp-sm) clamp(20px, 2.4vw, 35px);font-weight:var(--fw-head)}
.footer a{color:var(--c-on-accent);text-decoration:none;font-size:var(--fs-small);
  line-height:var(--lh-ui);letter-spacing:var(--ls-ui)}
.footer a{position:relative;padding-block-end:3px}
.footer a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s cubic-bezier(.2,.8,.2,1)}
@media (hover: hover){.footer a:hover::after{transform:scaleX(1);transform-origin:left}}



.footer__bottom{display:flex;flex-wrap:wrap;gap:var(--sp-sm) var(--sp-md);
  justify-content:space-between;align-items:center;
  margin-block-start:clamp(64px, 8vw, 116px);
  padding-block-start:var(--sp-md);
  border-top:1px solid rgba(255,255,255,.28)}

.footer__cr{font-size:var(--fs-en);color:rgba(255,255,255,.82);font-family:"Inter",sans-serif;
  letter-spacing:var(--ls-ui)}
.footer__pp{color:rgba(255,255,255,.8)!important}



:root{
  --bp-sp:767px;        
  --bp-tabp:1024px;     
  --bp-tabl-min:1140px; 
  --bp-tabl:1366px;     
}
.bp-probe{--bp-now:"PC"}
@media (max-width:1366px){ .bp-probe{--bp-now:"中間"} }
@media (min-width:1140px) and (max-width:1366px){ .bp-probe{--bp-now:"タブレット横"} }
@media (max-width:1024px){ .bp-probe{--bp-now:"タブレット縦"} }
@media (min-width:600px) and (max-width:1366px) and (orientation:portrait){
  .bp-probe{--bp-now:"タブレット縦"} }
@media (max-width:767px){ .bp-probe{--bp-now:"スマホ"} }




@media (max-width: 767px){
  
  .wrow{grid-template-columns:1fr;gap:var(--sp-sm)}
  
  .krow{grid-template-columns:1fr;gap:var(--sp-xs)}
  .krow__meta{flex-direction:row;gap:var(--sp-sm);align-items:center}
  
  .btns .btn{width:100%;justify-content:space-between;max-width:100%}
  .btn{max-width:100%;padding:15px 20px;gap:12px}
  .btn__label{white-space:normal;min-width:0}
}


a:focus-visible,button:focus-visible{outline:2px solid var(--c-ink);outline-offset:3px}

.header a:focus-visible,
.footer a:focus-visible,.footer button:focus-visible{outline-color:var(--c-bg)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }


.flip{
  position:relative;max-width:var(--w-wide);margin-inline:auto;
  min-height:clamp(170px,18vw,240px);
  display:flex;flex-direction:column;justify-content:center;
  margin-block-start:var(--sp-md);
  perspective:800px;text-align:center;
}
.flip__item{
  position:absolute;inset-inline:0;margin:0;
  font-size:clamp(1.5rem, 1.1rem + 2.2vw, 2.75rem);   
  line-height:1.65;font-weight:var(--fw-head);color:var(--c-ink);letter-spacing:var(--ls-head);
  opacity:0;transform:rotateX(-90deg);transform-origin:50% 0;
  
  visibility:hidden;
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear .45s;
  pointer-events:none;
}
.flip__item.is-on{opacity:1;transform:rotateX(0deg);pointer-events:auto;
  visibility:visible;transition-delay:0s}
.flip__item.is-out{opacity:0;transform:rotateX(90deg);transform-origin:50% 100%}


.stick.is-done .flip__item.is-on{opacity:0;transform:translateY(-16px)}
.stick.is-done .flip__dots{opacity:0}

.stick.is-done .stick__view .sec-head{opacity:0;transform:translateY(-16px)}
.stick .sec-head{transition:opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1)}

.flip__dots{position:absolute;inset-block-end:0;inset-inline:0;
  display:flex;gap:10px;justify-content:center;transition:opacity .45s ease}
.flip__dots span{width:24px;height:2px;background:var(--c-line);transition:background .3s}
.flip__dots span.is-on{background:var(--c-accent)}


@media (prefers-reduced-motion: reduce), (max-width: 1023px) and (max-height: 560px){
  .flip{min-height:0;display:block;perspective:none}
  .flip{text-align:left}
  
  .stick.is-done .flip__item.is-on,
  .stick.is-done .stick__view .sec-head{opacity:1;transform:none}
  
  .flip__item,
  .flip__item.is-out{position:static;opacity:1;visibility:visible;transform:none;transition:none;
    font-size:var(--fs-lead);margin-block-start:var(--sp-sm);
    border-left:2px solid var(--c-line);padding-left:var(--sp-sm)}
  .flip__dots{display:none}
}




section.stick{padding-block:0;position:relative;z-index:0;
  background:var(--c-pale-bg)}



.stick__track{height:calc(400svh + var(--overlap))}





.stick__view{position:sticky;top:0;height:100svh;
  display:grid;align-content:center}

.stick__view > .inner{width:100%}


section.-rise-over{position:relative;z-index:1;
  margin-block-start:calc(-1 * var(--overlap));
  
  min-height:var(--overlap);
  display:grid;align-content:center;
  
  padding-block:clamp(56px, 6vw, 87px);
  
  background:var(--c-rise);color:var(--c-on-accent)}
section.-rise-over > .inner{width:100%}
section.-rise-over .sec-head__ja{color:var(--c-on-accent)}
section.-rise-over p{color:var(--c-on-accent)}
section.-rise-over .btn__label{color:var(--c-on-accent)}
section.-rise-over .btn.-light .btn__icon{background:var(--c-bg);color:var(--c-rise)}

@media (hover: hover){section.-rise-over .btn.-light:hover .btn__icon{background:var(--c-rise);color:var(--c-on-accent)}}


section.-rise-over.burst{
  position:sticky;top:0;height:100svh;
  
  margin-block-start:calc(-1 * var(--overlap));
  min-height:0;padding-block:0;
  clip-path:circle(calc(var(--burst,0) * 80vmax) at 50% 50%);
  will-change:clip-path}


@media (prefers-reduced-motion: reduce), (max-width: 1023px) and (max-height: 560px){
  section.-rise-over.burst{position:static;height:auto;margin-block-start:0;
    padding-block:clamp(56px, 6vw, 87px);clip-path:none}
}

html:not(.js) section.-rise-over.burst{clip-path:none}

@media (prefers-reduced-motion: reduce), (max-width: 1023px) and (max-height: 560px){
  section.-rise-over{margin-block-start:0;min-height:0}
}


.stick .sec-head{margin-block-end:var(--sp-sm)}
.stick .flip{margin-block-start:0}


@media (prefers-reduced-motion: reduce), (max-width: 1023px) and (max-height: 560px){
  .stick__track{height:auto}
  .stick__view{position:static;height:auto;display:block;
    padding-block:var(--sp-xl)}
}



.js .rise{opacity:0;transform:translateY(48px);
  transition:opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
.js .rise.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce), (max-width: 1023px) and (max-height: 560px){
  .js .rise{opacity:1;transform:none;transition:none}
}


.js section.-rise-over .rise{transform:none;opacity:1;transition:none}

.js section.-rise-over .rise > p,
.js section.-rise-over .rise > .btns{opacity:0;transform:translateY(16px);
  transition:opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1)}
.js section.-rise-over .rise > p:nth-of-type(1){transition-delay:.5s}
.js section.-rise-over .rise > p:nth-of-type(2){transition-delay:.7s}
.js section.-rise-over .rise > p:nth-of-type(3){transition-delay:.9s}

.js section.-rise-over .rise > .btns{transition-delay:1.0s}
.js section.-rise-over .rise.is-in > p,
.js section.-rise-over .rise.is-in > .btns{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce), (max-width: 1023px) and (max-height: 560px){
  .js section.-rise-over .rise > p,
  .js section.-rise-over .rise > .btns{opacity:1;transform:none;transition:none}
}
.sec-head__ja.-slide-up{overflow:hidden;
  padding-block:.2em;margin-block:-.2em}
.js .sec-head__ja.-slide-up > span{display:block;
  transform:translateY(115%);
  transition:transform .8s cubic-bezier(.19,1,.22,1) .1s}
.js .rise.is-in .sec-head__ja.-slide-up > span{transform:translateY(0)}
@media (prefers-reduced-motion: reduce), (max-width: 1023px) and (max-height: 560px){
  .js .sec-head__ja.-slide-up > span{transform:none;transition:none}
}



.totop{position:fixed;right:clamp(16px, 2.4vw, 35px);
  bottom:calc(clamp(16px, 2.4vw, 35px) + env(safe-area-inset-bottom, 0px));
  z-index:40;width:52px;height:52px;border-radius:var(--r-ui);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--c-bg);border:1px solid var(--c-line);color:var(--c-faint);text-decoration:none;
  box-shadow:0 4px 14px rgba(7,22,47,.08);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1),
    background-color .3s ease, border-color .3s ease, color .3s ease,
    visibility 0s linear .45s}
.totop.is-on{opacity:1;visibility:visible;transform:none;
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1),
    background-color .3s ease, border-color .3s ease, color .3s ease,
    visibility 0s}
.totop .arw{width:18px;height:18px;display:block;transform:rotate(-90deg)}

@media (hover: hover){.totop:hover{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-on-accent)}}

@media (max-width: 767px){
  
  .totop{width:38px;height:38px;right:25px;bottom:25px}
  .totop .arw{width:13px;height:13px}
}
@media (prefers-reduced-motion: reduce){
  .totop{transition:opacity .2s linear}
}


.band{overflow:hidden;padding-block:var(--band-pad);
  -webkit-user-select:none;user-select:none}

.band__track{display:flex;width:max-content;
  transform:translateX(var(--band-x, 100vw));
  will-change:transform}

.band__set{display:flex;align-items:center;flex:none}

.band em{font-family:"Inter",sans-serif;font-style:normal;font-weight:500;
  font-size:clamp(4rem, 1.6rem + 6.8vw, 7.5rem);   
  line-height:1.1;
  letter-spacing:var(--ls-en);color:var(--c-accent);white-space:nowrap}

.band i{flex:none;display:block;
  width:clamp(44px, 5vw, 72px);height:2px;
  background:var(--c-accent);
  margin-inline:clamp(22px, 2.6vw, 38px)}
@media (prefers-reduced-motion: reduce){
  .band__track{transform:none}
}

@media (max-width: 767px){ .band i{width:36px} }


.page-head{padding-block:clamp(40px,5vw,72px) 0}


section.-lead{padding-block-start:clamp(28px, 2.5vw, 36px)}
.page-head .sec-head{margin-block-end:0}
.page-head .sec-head__en{
  font-size:clamp(3.5rem, 1.6rem + 5.6vw, 6.25rem);   
  margin-block-start:var(--sp-sm)}


.ab-row{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px, 5vw, 72px);align-items:center}

.ab-row__text{max-width:var(--w-text)}
.ab-row__text > p{margin-block-start:var(--sp-sm)}
.ab-row__text .sec-head.-mid{margin-block:0 var(--sp-md)}



section.-dark{background:var(--c-rise);color:var(--c-on-accent)}
section.-dark .sec-head__ja,
section.-dark h2,section.-dark h3{color:var(--c-on-accent)}
section.-dark p{color:rgba(255,255,255,.88)}



@media (max-width: 1023px){
  .ab-row{grid-template-columns:1fr}
}



body.-lower{background:var(--c-bg)}
main.lower{background:var(--c-bg)}
main.lower .page-head{background:transparent}

body.-lower .gates-wrap{
  background:linear-gradient(to bottom,var(--c-bg) 50%,var(--c-footer) 50%)}


.ab-note{font-size:var(--fs-cap);line-height:var(--lh-body)}


.ab-note strong{font-weight:var(--fw-h1)}
.ab-note p{margin-block-start:0}
.ab-note p + p{margin-block-start:var(--sp-sm)}

section.-dark .ab-note{
  background-image:repeating-linear-gradient(to bottom,
    transparent 0,
    transparent calc(var(--lh-letter) * 1em - 1px),
    rgba(255,255,255,.17) calc(var(--lh-letter) * 1em - 1px),
    rgba(255,255,255,.17) calc(var(--lh-letter) * 1em))}


.crumb{padding-block:18px 32px}
.crumb .inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-size:var(--fs-tag);line-height:1.7;letter-spacing:var(--ls-ui);color:var(--c-desc)}

@media (min-width: 768px){
  .crumb .inner{justify-content:flex-end}
}

.crumb a{color:var(--c-weak);text-decoration:none;transition:color .3s ease}
@media (hover: hover){.crumb a:hover{color:var(--c-ink)}}
.crumb__sep{color:var(--c-mute)}
.crumb [aria-current]{color:var(--c-ink)}

.crumb + main .page-head{padding-block-start:0}




section > .inner > .sec-head:first-child{margin-block-start:0}
.sv-intro{margin-block-start:var(--sp-md);text-align:center;
  max-width:var(--w-wide);margin-inline:auto}
.sv-intro p{margin-block-start:0;font-size:var(--fs-cap);
  line-height:var(--lh-body);color:var(--c-ink)}



.sv-map__head{margin-block-start:clamp(56px, 6vw, 87px)}
.sv-map{max-width:var(--w-wide);margin:var(--sp-md) auto 0;
  border:2px solid var(--c-line-l);border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,32px) clamp(20px, 2.6vw, 38px)}


.sv-map__cols{display:grid;grid-template-columns:auto 1fr auto 1fr;
  gap:clamp(12px,1.6vw,24px);align-items:stretch}


.sv-map__labels{display:grid;grid-template-rows:auto 1fr 1fr 1fr;
  gap:clamp(10px,1vw,12px);padding-block:clamp(14px,1.5vw,20px)}
.sv-map__labhead{height:30px}

.sv-map__lab{align-self:center;text-align:center;
  border:1px solid var(--c-line);border-radius:var(--r-ui);padding:7px 14px;
  font-size:var(--fs-tag);font-weight:var(--fw-strong);
  line-height:1.5;letter-spacing:var(--ls-ui);
  color:var(--c-desc);white-space:nowrap}


.sv-map__panel{display:grid;grid-template-rows:auto 1fr 1fr 1fr;
  gap:clamp(10px,1vw,12px);min-width:0;
  border-radius:var(--r-md);padding:clamp(14px,1.5vw,20px)}
.sv-map__panel.-in{background:var(--c-fill)}
.sv-map__panel.-out{background:var(--c-pale-bg)}


.sv-map__badge{justify-self:center;margin:0;
  border-radius:var(--r-pill);padding:6px 18px;color:var(--c-on-accent);
  font-size:var(--fs-tag);line-height:var(--lh-ui);
  letter-spacing:var(--ls-ui);font-weight:var(--fw-strong)}
.-in .sv-map__badge{background:var(--c-weak)}
.-out .sv-map__badge{background:var(--c-accent)}


.sv-map__item{display:grid;place-items:center;margin:0;
  background:var(--c-bg);border-radius:var(--r-ui);
  padding:clamp(11px,1.1vw,14px) clamp(12px,1.4vw,18px);
  text-align:center;font-size:var(--fs-cap);font-weight:var(--fw-strong);
  line-height:var(--lh-card);letter-spacing:normal;color:var(--c-ink)}



.sv-map__to{display:grid;align-content:center;justify-items:center;gap:8px}

.sv-map__tolabel{font-size:var(--fs-tag);font-weight:var(--fw-strong);
  line-height:1.6;text-align:center;
  letter-spacing:var(--ls-ui);color:var(--c-desc);white-space:nowrap}
.sv-map__chev{width:46px;height:36px;background:var(--c-accent-l2);
  clip-path:polygon(0 28%, 56% 28%, 56% 0, 100% 50%, 56% 100%, 56% 72%, 0 72%)}


@media (max-width: 1023px){
  .sv-map__cols{grid-template-columns:1fr;gap:16px}
  .sv-map__labels{display:none}          
  .sv-map__to{gap:8px;padding-block:4px}
  .sv-map__chev{transform:rotate(90deg)}
  
  .sv-map__item{place-items:stretch}
  .sv-map__item::before{content:attr(data-area);display:block;
    margin-block-end:6px;
    font-size:var(--fs-tag);font-weight:var(--fw-strong);
    line-height:1.5;letter-spacing:var(--ls-ui);color:var(--c-desc)}
}


@media (max-width: 1024px){
  
  .sv-map{
    margin-inline:0;padding:0;border:0;border-radius:0;
    overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch}
  .sv-map__cols{
    grid-template-columns:auto 1fr auto 1fr;
    gap:12px;min-width:860px;
    border:2px solid var(--c-line-l);border-radius:var(--r-lg);
    padding:22px 20px}
  
  .sv-map__labels{display:grid}
  .sv-map__item::before{content:none}
  .sv-map__item{place-items:center}
  .sv-map__tolabel{display:block}
  .sv-map__chev{transform:none}
}



.sv-areas__lead{margin-block-start:calc(var(--sp-md) * -1 + 10px);
  margin-block-end:40px;
  font-size:calc(var(--fs-cap) + 1px);line-height:var(--lh-body);color:var(--c-ink)}

.sv-areas__lead,.sv-flow__lead,.lead.-sub{
  margin-block-start:calc(var(--sp-md) * -1 + 20px)}


.sv-cases .sec-head{margin-block-end:clamp(40px,4.5vw,64px)}

.sv-quotes{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.2vw,30px);list-style:none;margin:0;padding:0}
.sv-quote{position:relative;background:var(--c-bg);border-radius:var(--r-md);
  padding:clamp(20px,2vw,26px) clamp(20px,2vw,26px) clamp(20px,2vw,26px) 54px}

.sv-quote::after{content:"";position:absolute;left:26px;bottom:-11px;
  width:0;height:0;border-inline:9px solid transparent;border-top:12px solid var(--c-bg)}

.sv-quote::before{content:"\201C";position:absolute;left:18px;top:clamp(10px,1.2vw,16px);
  font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:40px;line-height:1;
  color:var(--c-accent)}

section.-dark .sv-quote p{margin:0;font-size:var(--fs-cap);line-height:var(--lh-cap);
  font-weight:var(--fw-head);color:var(--c-ink)}

.sv-cases__lead{margin-block-start:clamp(40px,4.5vw,64px);text-align:center;
  font-size:var(--fs-body);font-weight:var(--fw-strong);
  line-height:var(--lh-card);color:var(--c-on-accent)!important}

@media (max-width: 1023px){
  .sv-quotes{grid-template-columns:1fr 1fr}
}
@media (max-width: 767px){
  .sv-quotes{grid-template-columns:1fr}
}



.sv-cards{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;
  gap:clamp(20px,2.4vw,32px);list-style:none;margin:0;padding:0}

.sv-card{display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(26px,2.8vw,36px);
  border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-bg)}


.sv-card__no{font-family:"Inter",sans-serif;font-weight:600;font-size:var(--fs-h3s);
  letter-spacing:var(--ls-en);color:var(--c-accent);margin-inline-end:12px;
  white-space:nowrap}

.sv-card__title{font-size:var(--fs-h3);font-weight:var(--fw-strong);
  line-height:var(--lh-card);letter-spacing:var(--ls-head)}
.sv-card__body p{margin-block-start:var(--sp-sm);font-size:var(--fs-cap);
  line-height:var(--lh-body);color:var(--c-ink)}
.sv-card__work{padding-block-start:clamp(20px,2.2vw,28px)}
.sv-card__label{margin:0;font-size:var(--fs-small);font-weight:var(--fw-strong);
  letter-spacing:var(--ls-ui);line-height:var(--lh-ui);color:var(--c-accent)}

.sv-card .tags{margin-block-start:12px;padding-block-start:14px;
  border-block-start:1px solid var(--c-line-l);
  display:flex;flex-wrap:wrap;gap:8px;
  align-items:flex-start;align-content:flex-start;
  min-height:76px}
.sv-card .tag{font-size:var(--fs-tag);line-height:var(--lh-ui);letter-spacing:var(--ls-ui);
  color:var(--c-desc);background:var(--c-fill);border-radius:var(--r-pill);padding:5px 11px}
.sv-card .tag::before{content:none}



@media (max-width: 767px){
  .sv-cards{grid-template-columns:1fr;grid-auto-rows:auto}
}


.sv-areas,.sv-flow{padding-block:var(--sp-lg)}
main:has(.sv-areas) > section.-lead{padding-block-end:var(--sp-lg)}


.sv-areas{background:var(--c-pale-bg)}


.sv-flow__lead{margin-block-start:calc(var(--sp-md) * -1 + 20px);
  font-size:calc(var(--fs-cap) + 1px);line-height:var(--lh-body);color:var(--c-ink)}
.sv-steps{--sv-gap:clamp(20px,2.4vw,32px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sv-gap);
  list-style:none;margin:0;padding:0;margin-block-start:clamp(40px,4.5vw,64px)}
.sv-step{position:relative;min-width:0}

.sv-step::after,.sv-step::before{content:"";position:absolute;
  left:88px;right:calc(var(--sv-gap) * -1 + 16px);top:35px;height:2px}
.sv-step::after{background:rgba(26,86,189,.18)}
.sv-step::before{background:var(--c-accent);z-index:1;
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s cubic-bezier(.2,.75,.25,1)}
.js .sv-step.is-in::before{transform:scaleX(1)}

.js .sv-step:nth-child(2) .sv-step__ic{transition-delay:.38s}
.js .sv-step:nth-child(3) .sv-step__ic{transition-delay:.76s}
.js .sv-step:nth-child(4) .sv-step__ic{transition-delay:1.14s}
.sv-step::before{transition-delay:.14s}
.sv-step:nth-child(2)::before{transition-delay:.52s}
.sv-step:nth-child(3)::before{transition-delay:.90s}
.sv-step:nth-child(4)::before{transition-delay:1.28s}
@media (prefers-reduced-motion: reduce){
  .sv-step::before,.sv-step__ic{transition:none}
}

.sv-step__ic{display:grid;place-items:center;width:72px;height:72px;
  border-radius:var(--r-md);background:rgba(26,86,189,.1);color:rgba(26,86,189,.45);
  transition:background-color .45s ease,color .45s ease}
.js .sv-step.is-in .sv-step__ic{background:var(--c-accent);color:var(--c-on-accent)}
.sv-step__ic svg{width:32px;height:32px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.sv-step__no{margin-block-start:clamp(24px,2.6vw,34px);
  font-family:"Inter",sans-serif;font-weight:500;font-size:var(--fs-note);
  letter-spacing:.14em;line-height:1;color:var(--c-accent)}
.sv-step__title{margin-block-start:var(--sp-xs);
  min-height:calc(var(--lh-card) * 2em);
  font-size:var(--fs-h3s);line-height:var(--lh-card);letter-spacing:var(--ls-head)}
.sv-step p:not(.sv-step__no){margin-block-start:var(--sp-sm);font-size:var(--fs-cap);
  line-height:var(--lh-body);color:var(--c-ink)}

@media (max-width: 1023px){
  .sv-steps{grid-template-columns:1fr 1fr}
  .sv-step:nth-child(2n)::after{content:none}
}
@media (max-width: 767px){
  .sv-steps{grid-template-columns:1fr}
  .sv-step::after{content:none}
}




.ab-sec{padding-block:var(--sp-lg)}
.page-head + .ab-sec{padding-block-start:calc(var(--sp-lg) + 12px)}

.ab-sec:last-of-type{padding-block-end:var(--sp-xl)}


.ab-row.-figR,.ab-row.-figL{grid-template-columns:1fr 1fr;
  gap:clamp(36px,4.5vw,64px);align-items:end}
.ab-row.-figR .ab-row__text,.ab-row.-figL .ab-row__text{max-width:none}

.ab-row.-figL .ab-row__text{order:2}
.ab-row.-figL .ab-motion{order:1}


.ab-motion{min-width:0;position:relative}
.ab-motion crecios-motion{
  --motion-background:var(--c-pale-bg);
  --motion-radius:16px;
  display:block}

.ab-motion__top{position:absolute;z-index:1;top:28px;left:30px;right:30px;
  display:flex;justify-content:space-between;
  font-family:"Inter",sans-serif;font-size:var(--fs-en-s);letter-spacing:.09em;
  line-height:var(--lh-ui);color:var(--c-desc)}
.ab-motion__no b{font-weight:600;color:var(--c-ink)}

@media (max-width: 1023px){
  .ab-row.-figR,.ab-row.-figL{grid-template-columns:1fr}
  .ab-row.-figL .ab-row__text{order:0}
}





section.-lead .lead{font-size:var(--fs-body)}

.kfilter{display:flex;flex-wrap:wrap;gap:12px}
.kfilter__btn{font-family:inherit;font-size:var(--fs-small);
  line-height:var(--lh-ui);letter-spacing:var(--ls-ui);font-weight:var(--fw-head);
  color:var(--c-ink);background:var(--c-bg);
  border:1px solid var(--c-line);border-radius:var(--r-pill);
  padding:10px 22px;cursor:pointer;
  transition:background-color .3s ease,border-color .3s ease,color .3s ease}
@media (hover: hover){.kfilter__btn:hover{border-color:var(--c-accent);color:var(--c-accent)}}

.kfilter__btn.-on{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent)}

.kcards{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.4vw,32px)}
.kcard{display:flex;flex-direction:column;
  padding:clamp(24px,2.6vw,34px);
  border:1px solid var(--c-line);border-radius:var(--r-md);
  background:var(--c-bg);text-decoration:none;color:inherit;
  transition:border-color .35s ease,box-shadow .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
@media (hover: hover){.kcard:hover{border-color:var(--c-accent);
  box-shadow:0 10px 30px rgba(7,22,47,.07);transform:translateY(-3px)}}

.kcard__cat{font-size:var(--fs-small);font-weight:var(--fw-head);
  letter-spacing:var(--ls-ui);line-height:var(--lh-ui);color:var(--c-accent)}

.kcard__title{margin-block-start:var(--sp-xs);
  font-size:var(--fs-h3s);line-height:var(--lh-card);letter-spacing:var(--ls-head);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  transition:color .35s ease}
@media (hover: hover){.kcard:hover .kcard__title{color:var(--c-accent)}}

.kcard .tags{margin-block-start:auto;padding-block-start:var(--sp-sm);
  gap:8px 8px}

.kcard .tags,.wrow .tags,.krow .tags{gap:8px}
.kcard .tag,.wrow .tag,.krow .tag{font-size:var(--fs-tag);line-height:var(--lh-ui);
  letter-spacing:var(--ls-ui);color:var(--c-desc);
  background:var(--c-fill);border-radius:var(--r-pill);padding:5px 11px}
.kcard .tag::before,.wrow .tag::before,.krow .tag::before{content:none}

.wrow .tags{margin-block-start:var(--sp-sm)}

.krow .tags{margin-block-start:var(--sp-xs)}

.krow__cat{font-size:var(--fs-ui);font-weight:var(--fw-head);
  letter-spacing:var(--ls-ui);line-height:var(--lh-ui);color:var(--c-accent);
  margin-block-end:var(--sp-xs)}

.kempty{margin-block-start:var(--sp-lg);color:var(--c-desc);
  font-size:var(--fs-cap)}

@media (max-width: 1023px){ .kcards{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 767px){  .kcards{grid-template-columns:1fr} }


.form{max-width:700px;margin-block-start:clamp(40px,5vw,64px)}
.f-row + .f-row{margin-block-start:clamp(28px,3vw,40px)}
.f-label{display:flex;align-items:center;gap:10px;
  font-size:var(--fs-cap);font-weight:var(--fw-head);
  letter-spacing:var(--ls-body);line-height:var(--lh-ui);color:var(--c-ink)}
.f-req,.f-opt{flex:none;font-size:var(--fs-tag);font-weight:var(--fw-head);
  letter-spacing:var(--ls-ui);line-height:1;
  border-radius:var(--r-pill);padding:5px 10px}
.f-req{color:var(--c-on-accent);background:var(--c-accent)}
.f-opt{color:var(--c-desc);background:var(--c-fill)}
.f-note{margin-block-start:10px;font-size:var(--fs-cap);
  line-height:var(--lh-cap);color:var(--c-desc)}
.f-note a{color:var(--c-accent);text-decoration:underline;
  text-underline-offset:3px}

.form input[type="text"],.form input[type="email"],
.form input[type="tel"],.form textarea{
  display:block;width:100%;margin-block-start:12px;
  font-family:inherit;font-size:var(--fs-body);
  line-height:var(--lh-ui);letter-spacing:var(--ls-body);color:var(--c-ink);
  background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r-ui);
  padding:14px 16px;
  transition:border-color .3s ease,box-shadow .3s ease}
.form textarea{line-height:var(--lh-cap);resize:vertical}


.form ::placeholder{color:var(--c-weak);opacity:1;font-size:14px}
.form input:focus,.form textarea:focus{outline:none;
  border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(26,86,189,.12)}



.f-agree{margin-block-start:var(--sp-md);text-align:center;
  font-size:var(--fs-cap);line-height:var(--lh-cap);
  color:var(--c-desc)}

.f-agree a{color:var(--c-accent);text-decoration:underline;text-underline-offset:3px;
  transition:color .3s ease}
@media (hover: hover){.f-agree a:hover{color:var(--c-accent-l)}}


.f-send{margin-block-start:clamp(32px,4vw,52px);display:block}

.f-send .btn{width:100%;justify-content:center;padding-inline:24px;cursor:pointer;
  font-family:inherit;border-width:2px}
@media (hover: hover){.btn.-fill:hover{background:var(--c-accent);border-color:var(--c-accent)}
.btn.-fill:hover .btn__label{color:var(--c-on-accent)}
.btn.-fill:hover .btn__icon{background:var(--c-bg);color:var(--c-accent)}}


.f-send .btn:disabled{cursor:progress;opacity:.6}


.f-error{margin-block-start:8px;font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--c-error)}

.form input[aria-invalid="true"],.form textarea[aria-invalid="true"]{border-color:var(--c-error)}


.f-alert{margin-block-end:clamp(28px,3vw,40px);padding:16px 20px;
  font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--c-ink);
  background:var(--c-bg);border:1px solid var(--c-error);border-radius:var(--r-ui)}
.f-alert:focus{outline:none}
.f-alert__head{font-weight:var(--fw-head);color:var(--c-error)}
.f-alert__head + p{margin-block-start:4px}
noscript .f-alert{display:block;max-width:700px;margin:clamp(40px,5vw,64px) auto 0}


.f-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}


.f-turnstile{display:flex;justify-content:center}




.cinfo{margin-block-start:0;border-block-start:1px solid var(--c-line-l)}
.cinfo__row{display:grid;grid-template-columns:200px 1fr;gap:0 clamp(24px, 3vw, 44px);
  padding-block:clamp(18px,2vw,24px);border-block-end:1px solid var(--c-line-l)}
.cinfo dt{font-size:var(--fs-cap);font-weight:var(--fw-head);
  line-height:var(--lh-body);color:var(--c-desc);margin:0}
.cinfo dd{font-size:var(--fs-cap);line-height:var(--lh-body);
  color:var(--c-ink);margin:0}
.cinfo dd a{color:var(--c-accent);text-decoration:underline;text-underline-offset:3px;
  transition:color .3s ease}
@media (hover: hover){.cinfo dd a:hover{color:var(--c-accent-l)}}


.col2{display:grid;grid-template-columns:190px 1fr;gap:clamp(40px, 5vw, 72px);
  align-items:start;margin-block-start:clamp(48px, 5vw, 72px)}

.col2__main,.pblock,.cinfo__row,.cinfo dt,.cinfo dd{min-width:0}
.col2__side{position:sticky;top:calc(var(--header-h) + 8px)}
.pnav{display:flex;flex-direction:column;gap:4px}
.pnav__item{display:flex;align-items:center;gap:12px;padding-block:9px;
  font-size:var(--fs-cap);line-height:1.6;color:var(--c-desc);text-decoration:none;
  transition:color .3s ease}
.pnav__item::before{content:"";flex:none;width:16px;height:1px;background:var(--c-line);
  transition:width .4s cubic-bezier(.2,.8,.2,1),background-color .3s ease}
@media (hover: hover){.pnav__item:hover{color:var(--c-ink)}}
.pnav__item.-on{color:var(--c-accent);font-weight:var(--fw-strong)}
.pnav__item.-on::before{width:32px;background:var(--c-accent)}

.pblock{padding-block:0;scroll-margin-top:calc(var(--header-h) + 24px)}
.pblock__text{margin-block-start:0;font-size:var(--fs-cap);line-height:var(--lh-body);
  color:var(--c-ink)}
.pblock__text + .pblock__text{margin-block-start:var(--sp-sm)}
.pblock > .sec-head{margin-block-start:0}

.pblock + .pblock{margin-block-start:var(--gap-head)}



.clients{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,1.8vw,24px);list-style:none;padding:0;margin:0}
.clients li{display:grid;place-items:center;aspect-ratio:424 / 184;
  border:1px solid var(--c-line-l);border-radius:var(--r-ui);padding:6% 10%}
.clients img{max-width:100%;max-height:100%;object-fit:contain;display:block}

.clients__note{margin-block-start:var(--sp-sm);text-align:end;
  font-size:var(--fs-small);line-height:var(--lh-cap);color:var(--c-desc)}

@media (max-width: 1023px){
  .col2{grid-template-columns:1fr;gap:var(--sp-md)}
  .col2__side{position:static}
  .pnav{flex-direction:row;gap:var(--sp-sm)}
  .cinfo__row{grid-template-columns:1fr;gap:6px}
  .clients{grid-template-columns:repeat(3,minmax(0,1fr))}
}



.wcards{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px}
.wcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0}
.wcard .ph{border-radius:var(--r-img);overflow:hidden;margin-block-end:20px;
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
@media (hover: hover){.wcard:hover .ph{opacity:.86;transform:translateY(-3px)}}
.wcard__cat{font-size:var(--fs-small);font-weight:var(--fw-head);line-height:1.4;color:var(--c-accent);margin-block:0 8px}
.wcard__title{font-size:var(--fs-h3s);font-weight:var(--fw-head);
  line-height:var(--lh-card);margin-block-end:6px;
  text-wrap:wrap;word-break:normal;transition:color .35s ease}
@media (hover: hover){.wcard:hover .wcard__title{color:var(--c-accent)}}
.wcard__desc{margin-block-start:0;font-size:var(--fs-list);line-height:1.7;
  color:var(--c-desc)}

.wcard .tags{margin-block-start:auto;padding-block-start:10px;gap:6px}
.wcard .tag{font-size:var(--fs-tag);line-height:var(--lh-ui);letter-spacing:var(--ls-ui);
  color:var(--c-desc);background:var(--c-fill);border-radius:var(--r-pill);padding:5px 11px}
.wcard .tag::before{content:none}


.vcards{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.vcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0}
.vcard .ph{border-radius:var(--r-img);overflow:hidden;margin-block-end:16px;
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
@media (hover: hover){.vcard:hover .ph{opacity:.86;transform:translateY(-3px)}}

.vcard__cat{font-size:var(--fs-small);font-weight:var(--fw-head);line-height:1.6;color:var(--c-accent);margin-block:0 4px}
.vcard__title{font-size:var(--fs-ui);font-weight:var(--fw-head);line-height:1.6;
  text-wrap:wrap;word-break:normal;
  transition:color .35s ease}
@media (hover: hover){.vcard:hover .vcard__title{color:var(--c-accent)}}
.vcard__company{margin-block-start:8px;font-size:var(--fs-note);line-height:var(--lh-cap);
  color:var(--c-desc);word-break:auto-phrase}

section.-lead .lead + .lead{margin-block-start:var(--sp-sm)}

.lead.-sub,section.-lead .lead.-sub{margin-block-start:0;margin-block-end:40px;
  font-size:calc(var(--fs-cap) + 1px);line-height:var(--lh-body);color:var(--c-text)}
.sec-head.-mid + .lead.-sub{margin-block-start:calc(var(--sp-md) * -1 + 20px)}

.sec-head.-mid + .wcards,.sec-head.-mid + .vcards{margin-block-start:0}


.wcards + .sec-head,.vcards + .sec-head{margin-block-start:clamp(80px, 6vw, 87px)}

@media (max-width: 1023px){
  .wcards{grid-template-columns:repeat(2,1fr)}
  .vcards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 767px){
  .wcards,.vcards{grid-template-columns:1fr}
}


.cs{background:var(--c-pale-bg);padding-block:clamp(40px,5vw,72px) clamp(80px, 9vw, 130px)}

body:has(.cs),main.lower:has(.cs){background:var(--c-pale-bg)}
.cs__row{display:grid;grid-template-columns:1fr 280px;gap:clamp(32px, 4vw, 58px);
  align-items:start}
.cs__main{min-width:0}


.cs-card{background:var(--c-bg);border-radius:var(--r-lg);
  padding:clamp(32px, 4vw, 58px) clamp(24px, 3.4vw, 49px)}


a.cs__cat{text-decoration:none;transition:opacity .3s ease}
@media (hover: hover){a.cs__cat:hover{opacity:.55}}
.cs__cat{margin:0;font-size:var(--fs-note);font-weight:var(--fw-head);color:var(--c-accent)}

.cs__title{margin-block-start:var(--sp-xs);font-size:clamp(1.5rem,1.1rem + 1.1vw,2rem);
  font-weight:var(--fw-h1);line-height:var(--lh-display);
  letter-spacing:var(--ls-head)}
.cs__date{margin-block-start:10px;font-family:"Inter",sans-serif;font-size:var(--fs-note);
  color:var(--c-desc)}
.cs__head .tags{margin-block-start:var(--sp-sm);display:flex;flex-wrap:wrap;gap:8px}
.cs__head .tag,.cs-side .tag{font-size:var(--fs-tag);line-height:var(--lh-ui);
  letter-spacing:var(--ls-ui);color:var(--c-desc);background:var(--c-fill);
  border-radius:var(--r-pill);padding:5px 11px}

.cs-side a.tag{background:var(--c-bg);border:1px solid var(--c-line);
  text-decoration:none;cursor:pointer;
  transition:border-color .3s ease,color .3s ease}
@media (hover: hover){.cs-side a.tag:hover{border-color:var(--c-accent);color:var(--c-accent)}}
.cs-side span.tag{background:var(--c-chip);border:0;color:var(--c-read)}
.cs__head .tag::before,.cs-side .tag::before{content:none}
.cs__fv{border-radius:var(--r-img);overflow:hidden;margin-block-start:clamp(28px,3vw,40px)}



.cs-box,.cs-cta{background:var(--c-pale-bg);border:1px solid var(--c-line-l);
  border-radius:var(--r-md);padding:clamp(24px,2.6vw,32px);
  margin-block-start:clamp(32px,3.6vw,48px)}
.cs-cta{padding-block:clamp(32px,3.4vw,40px)}

.cs-toc,.cs-cta{background:var(--c-fill)}
.cs-summary{display:block}
.cs-summary__row{display:grid;grid-template-columns:96px 1fr;gap:16px;
  padding-block:12px;border-block-end:1px solid var(--c-line-l)}
.cs-summary__row:last-child{border-block-end:0;padding-block-end:0}
.cs-summary dt{font-size:var(--fs-small);font-weight:var(--fw-strong);
  color:var(--c-accent);margin:0}
.cs-summary dd{margin:0;font-size:var(--fs-cap);line-height:var(--lh-body);
  color:var(--c-ink)}

.cs-toc__title{margin:0;font-size:var(--fs-list);font-weight:var(--fw-h1);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;list-style:none;
  padding-block-end:12px;border-block-end:1px solid var(--c-line-l)}
.cs-toc__title::-webkit-details-marker{display:none}

.cs-toc__title::after{content:"";width:9px;height:9px;flex:none;
  border-right:2px solid var(--c-accent);border-bottom:2px solid var(--c-accent);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cs-toc[open] .cs-toc__title::after{transform:rotate(-135deg) translate(-3px,-3px)}
@media (hover: hover){.cs-toc__title:hover{color:var(--c-accent)}}
.cs-toc ol{margin:16px 0 0;padding-left:20px;
  font-size:var(--fs-list);line-height:1.7;color:var(--c-desc)}
.cs-toc li + li{margin-block-start:8px}
.cs-toc a{color:inherit;text-decoration:none;transition:color .3s ease}
@media (hover: hover){.cs-toc a:hover{color:var(--c-accent)}}


.cs-body{margin-block-start:clamp(32px,3.6vw,48px)}
.cs-body h2{margin-block:clamp(40px,4.5vw,56px) 20px;
  font-size:var(--fs-h2s);font-weight:var(--fw-h1);line-height:var(--lh-card);
  padding-block-end:12px;border-block-end:2px solid var(--c-accent)}
.cs-body h2:first-child{margin-block-start:0}
.cs-body h3{margin-block:36px 16px;font-size:20px;font-weight:var(--fw-h1);
  line-height:var(--lh-card);padding-inline-start:16px;border-inline-start:3px solid var(--c-accent)}
.cs-body p{margin-block-start:0;margin-block-end:20px;
  font-size:var(--fs-cap);line-height:var(--lh-body);color:var(--c-read)}
.cs-body strong{font-weight:var(--fw-h1);color:var(--c-ink)}

.cs-body a{color:var(--c-accent);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color .3s ease}
@media (hover: hover){.cs-body a:hover{color:var(--c-accent-l)}}
.cs-body a strong{font-weight:inherit;color:inherit}

.cs-body ul{margin:0 0 20px;padding:0;list-style:none}
.cs-body ul li{position:relative;padding-inline-start:28px;
  font-size:var(--fs-cap);line-height:var(--lh-body);color:var(--c-ink)}

.cs-body ul li::before{content:"";position:absolute;left:7px;
  top:calc(var(--lh-body) * var(--fs-cap) / 2 - 3px);
  width:6px;height:6px;border-radius:var(--r-full);background:var(--c-accent)}
.cs-body ol{margin:0 0 20px;padding:0;list-style:none;counter-reset:cs-ol}
.cs-body ol li{position:relative;padding-inline-start:32px;counter-increment:cs-ol;
  font-size:var(--fs-cap);line-height:var(--lh-body);color:var(--c-ink)}
.cs-body ol li::before{content:counter(cs-ol);position:absolute;left:0;top:0;
  width:20px;height:calc(var(--lh-body) * var(--fs-cap));
  display:flex;align-items:center;justify-content:flex-end;
  
  font-family:"Inter",sans-serif;font-size:var(--fs-list);font-weight:var(--fw-h1);
  color:var(--c-accent);background:none}
.cs-body li + li{margin-block-start:4px}

.cs-body p.cs-note{margin-block-end:24px;font-size:var(--fs-note);line-height:1.8;color:var(--c-faint)}



.cs-tablewrap,.p-pl-table__wrap{overflow-x:auto;margin-block-end:24px;
  background:
    linear-gradient(to right, var(--c-bg) 30%, transparent),
    linear-gradient(to left,  var(--c-bg) 30%, transparent) 100% 0,
    linear-gradient(to right, rgba(26,26,26,.13), transparent 14px),
    linear-gradient(to left,  rgba(26,26,26,.13), transparent 14px) 100% 0;
  background-repeat:no-repeat;
  background-size:36px 100%,36px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll}
.cs-tablewrap:focus-visible,.p-pl-table__wrap:focus-visible{
  outline:2px solid var(--c-ink);outline-offset:3px}

.p-pl-table__wrap{overflow-x:auto;margin-block-end:24px}
.cs-body table{width:100%;min-width:620px;border-collapse:collapse;
  font-size:var(--fs-note);border:none;margin:0 0 24px}

.cs-body th{background:var(--c-ink);color:var(--c-on-accent);font-weight:600;text-align:center;
  padding:10px 8px;border:none;white-space:nowrap}
.cs-body td{text-align:center;padding:10px 8px;border:none;
  border-block-end:1px solid var(--c-line-l);color:var(--c-desc)}
.cs-body td:first-child{text-align:left;font-weight:var(--fw-head);
  color:var(--c-ink);white-space:nowrap}

.cs-body tr.t-rate{background:none}
.cs-body tr.t-rate td{font-family:"Inter",sans-serif;font-size:var(--fs-tag);
  color:var(--c-faint);border-block-end:2px solid var(--c-line)}
.cs-body tr.t-rate td:first-child{font-weight:400;color:var(--c-faint);font-size:11px}

.cs-body tr.t-rate td strong{color:var(--c-accent);font-weight:var(--fw-h1)}
.cs-body td.t-highlight{color:var(--c-accent)!important;font-weight:var(--fw-h1)!important}
.cs-body td.t-unknown{color:var(--c-mute);font-style:italic}
.cs-body tr.t-data td{border-block-end:none}


.cs-cta__title{margin:0;font-size:var(--fs-h3);font-weight:var(--fw-h1);
  line-height:var(--lh-card);}
.cs-cta__text{margin-block:14px 28px;font-size:var(--fs-cap);
  line-height:var(--lh-body);color:var(--c-desc)}
.cs-cta{text-align:center}
.cs-cta .btns{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;
  margin-block-start:0}



.cs-related{background:var(--c-bg);
  padding-block:clamp(56px,6vw,80px) clamp(64px, 7vw, 101px)}
.cs-related .sec-head{margin-block-start:0}
.vcards.-three{grid-template-columns:repeat(3,1fr)}
.cs-related .vcard{background:none}



.cs-side{position:sticky;top:calc(var(--header-h) + 8px);min-width:0;
  transition:opacity .45s ease,visibility .45s}
.cs-side.is-out{opacity:0;visibility:hidden}
@media (prefers-reduced-motion: reduce){ .cs-side{transition:none} }
.cs-side__box{padding:0}
.cs-side__title{margin:0 0 16px;padding-block-end:10px;
  border-block-end:1px solid var(--c-ink);
  font-size:var(--fs-small);font-weight:var(--fw-strong)}
.cs-side__list{margin:0}
.cs-side__item + .cs-side__item{margin-block-start:14px}
.cs-side__item dt{margin:0;font-size:var(--fs-tag);color:var(--c-desc)}
.cs-side__item dd{margin:4px 0 0;font-size:var(--fs-cap);
  line-height:var(--lh-cap);color:var(--c-ink)}
.cs-side__label{margin-block:20px 10px;font-size:var(--fs-tag);color:var(--c-desc)}
.cs-side .tags{display:flex;flex-wrap:wrap;gap:8px}

@media (max-width: 1023px){
  .cs__row{grid-template-columns:1fr}
  .cs-side{position:static}
  .vcards.-three{grid-template-columns:1fr 1fr}
}
@media (max-width: 767px){
  .vcards.-three{grid-template-columns:1fr}
}



.kn .cs__date{margin-block-start:10px;font-family:"Inter",sans-serif;font-size:var(--fs-note);
  letter-spacing:.04em;color:var(--c-faint)}

.kn-toc{margin:16px 0 0;padding:0;list-style:none;
  font-size:var(--fs-list);line-height:1.7;color:var(--c-desc)}
.kn-toc li + li{margin-block-start:8px}
.kn-toc ul{margin:8px 0 0;padding-inline-start:16px;list-style:none;
  border-inline-start:1px solid var(--c-line)}
.kn-toc ul li{padding-inline-start:0}
.kn-toc a{color:inherit;text-decoration:none;transition:color .3s ease}
@media (hover: hover){.kn-toc a:hover{color:var(--c-accent)}}



.cs-body p.cs-quote{margin-block:28px;padding:20px 24px;
  background:var(--c-fill);border-inline-start:3px solid var(--c-accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--fs-h3s);font-weight:var(--fw-h1);
  line-height:var(--lh-card);color:var(--c-ink)}
.cs-body p.cs-inline{margin-block:28px;padding:14px 18px;
  background:var(--c-pale-bg);border-radius:var(--r-sm);
  font-size:var(--fs-note);line-height:var(--lh-cap);color:var(--c-faint)}
.cs-body p.cs-inline a{color:var(--c-accent);text-decoration:underline;text-underline-offset:3px;
  transition:color .3s ease}
@media (hover: hover){.cs-body p.cs-inline a:hover{color:var(--c-accent-l)}}

.cs-side__box + .cs-side__box{margin-block-start:clamp(28px,3vw,40px)}
.kn-rank{display:flex;flex-direction:column}
.kn-rank__item{display:flex;gap:12px;padding-block:12px;
  border-block-end:1px solid var(--c-line-l);text-decoration:none;color:inherit}
.kn-rank__no{flex:none;width:20px;font-family:"Inter",sans-serif;font-size:var(--fs-list);
  font-weight:var(--fw-h1);color:var(--c-accent);line-height:1.5}
.kn-rank__title{font-size:var(--fs-note);line-height:1.5;color:var(--c-ink);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  transition:color .3s ease}
@media (hover: hover){.kn-rank__item:hover .kn-rank__title{color:var(--c-accent)}}

.cs-related .kcards{margin-block-start:0}



.cs-body img{max-width:100%;height:auto;display:block;border-radius:var(--r-sm);
  margin-block:24px}
.cs-side__logo{margin-block-end:14px;
  display:grid;place-items:center;
  background:var(--c-bg);border:1px solid var(--c-line-l);border-radius:var(--r-xs);
  aspect-ratio:280 / 96;padding:12px 20px}
.cs-side__logo img{max-width:100%;max-height:100%;object-fit:contain;display:block;
  border-radius:0;margin:0}
.cs-side__company{margin:0;font-size:var(--fs-cap);font-weight:var(--fw-head);
  line-height:var(--lh-cap);color:var(--c-ink)}
.cs-side__url{margin-block-start:6px;font-size:var(--fs-tag);line-height:var(--lh-cap);
  word-break:break-all}
.cs-side__url a{color:var(--c-accent);text-decoration:underline;text-underline-offset:3px;
  transition:color .3s ease}
@media (hover: hover){.cs-side__url a:hover{color:var(--c-accent-l)}}
.cs-prof{display:flex;flex-direction:column;gap:16px}
.cs-prof__item{display:flex;gap:12px;align-items:center}
.cs-prof__body{min-width:0}
.cs-prof__photo{flex:none;width:56px;aspect-ratio:2 / 3;
  border-radius:var(--r-xs);overflow:hidden;background:var(--c-fill)}
.cs-prof__photo img{width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;border-radius:0;margin:0}

.cs-prof__photo img[src$="profile-kobayashi.jpg"]{transform:scale(1.16) translateX(5%)}
.cs-prof__role{margin:0;font-size:var(--fs-tag);line-height:var(--lh-cap);color:var(--c-faint)}
.cs-prof__name{margin-block-start:2px;font-size:var(--fs-cap);
  font-weight:var(--fw-head);line-height:var(--lh-cap);color:var(--c-ink)}



.msg{margin-block-start:var(--sp-md);font-size:var(--fs-cap);
  line-height:var(--lh-body);color:var(--c-ink)}
section.-center .msg{text-align:center}
section.-center .btns{margin-block-start:clamp(36px,4vw,56px);justify-content:center}



body:has(.pp-wrap),main.lower:has(.pp-wrap){background:var(--c-pale-bg)}
.pp-wrap{background:var(--c-pale-bg);padding-block-end:clamp(80px, 9vw, 130px)}
.pp-card{max-width:calc(var(--w-text) + clamp(48px, 6.8vw, 98px));margin-inline:auto;
  background:var(--c-bg);border-radius:var(--r-lg);
  padding:clamp(32px, 4vw, 58px) clamp(24px, 3.4vw, 49px)}
.pp-card .pp{max-width:none;margin-block-start:0}

.pp{max-width:var(--w-text);margin-block-start:var(--sp-md)}
.pp__lead{margin:0;font-size:var(--fs-cap);line-height:var(--lh-body);color:var(--c-read)}
.pp__sec{padding-block:0;margin-block-start:clamp(36px,4vw,52px)}

.pp__h{font-size:var(--fs-h3l);font-weight:var(--fw-strong);
  line-height:var(--lh-card);letter-spacing:var(--ls-head);
  padding-inline-start:16px;border-inline-start:3px solid var(--c-accent)}
.pp__sec p{margin-block-start:var(--sp-sm);font-size:var(--fs-cap);
  line-height:var(--lh-body);color:var(--c-read)}
.pp__list{margin-block-start:var(--sp-sm);padding:0;list-style:none}
.pp__list li{position:relative;padding-inline-start:20px;
  font-size:var(--fs-cap);line-height:var(--lh-body);color:var(--c-ink)}
.pp__list li::before{content:"";position:absolute;left:4px;
  top:calc(var(--lh-body) * var(--fs-cap) / 2 - 3px);
  width:6px;height:6px;border-radius:var(--r-full);background:var(--c-accent)}


.pp__sec a{color:var(--c-accent);text-decoration:underline;text-underline-offset:3px}
.pp__sec p.pp__contact{background:var(--c-fill);border-radius:var(--r-sm);
  padding:clamp(20px,2.2vw,26px);color:var(--c-ink)}
.pp__date{margin-block-start:clamp(36px,4vw,52px);
  font-size:var(--fs-note);line-height:1.8;color:var(--c-faint)}


.sp-br{display:none}
.pc-br{display:inline}
@media (max-width: 767px){ .sp-br{display:inline} .pc-br{display:none} }


@media (max-width: 767px){
  
  .header{position:static;padding:0;pointer-events:none}
  
  .header.is-hidden{transform:none}

  
  
  .header__in{
    position:static;background:var(--c-accent);box-shadow:none;border-radius:0;
    padding:9.5px 25px;width:100%;max-width:none;margin:0}
  .header .logo img{filter:brightness(0) invert(1);height:30px}   
  .navbtn{
    position:static;width:46px;height:46px;border-radius:0;
    background:transparent;color:var(--c-on-accent);box-shadow:none;
    pointer-events:auto;z-index:60}

  
  .is-scrolled .header__in{background:none;padding-block:0;pointer-events:none}
  .is-scrolled .header .logo{opacity:0;visibility:hidden}
  .is-scrolled .navbtn{
    position:fixed;top:16px;right:25px;pointer-events:auto;
    border-radius:var(--r-sm);background:var(--c-accent);
    box-shadow:0 6px 18px rgba(7,22,47,.18)}
  
  .is-navopen .navbtn{
    position:fixed;top:10px;right:25px;
    border-radius:var(--r-sm);background:var(--c-accent);box-shadow:none}

  
  .is-navopen .header,
  .is-navopen .header__in,
  .is-navopen .gnav{pointer-events:auto}

  
  .is-scrolled .navbtn{top:10px}

  
  .is-navopen .header .logo{
    position:fixed;top:18px;inset-inline-start:25px;z-index:60;
    opacity:1;visibility:visible}
  
  .is-navopen .header__in{min-height:65px}

  
  
  .fv{padding-block:24px 0;min-height:calc(100svh - var(--header-h))}
  
  section.stick{margin-block-start:-20px}
  
  .fv__visual{margin-block-start:0;height:clamp(200px, 36svh, 340px)}
  
  
  .fv > .inner{margin-block-start:10px;margin-block-end:40px}
  
  .fv__visual{margin-block-end:var(--sp-sm)}
  
  .fv .text-col{text-align:center;margin-inline:auto}
  .fv .lead{max-width:none}

  
  
  .fv__cue{display:none}

  
  
  .btns .btn,.btn{
    
    
    width:min(320px, 100%);min-height:65px;
    padding:0 14.5px 0 20px;gap:10px;
    justify-content:space-between}
  .btns{justify-content:center}

  
  .wlist{
    border-top:0;margin-inline:calc(var(--pad-x) * -1);
    padding-inline:var(--pad-x);
    display:flex;gap:14px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad-x);
    -webkit-overflow-scrolling:touch}
  .wrow{
    flex:0 0 272px;scroll-snap-align:start;
    grid-template-columns:1fr;gap:12px;
    padding:0 0 16px;border-bottom:0}
  
  .wrow .ph{margin-block-end:0}

  
  
  
  
  .gates{width:calc(100% - 40px);
    margin-inline:auto;grid-template-columns:1fr}
  .gate{padding-block:38px;gap:0}
  .gate__ja{order:-1;font-size:13px;margin-block-end:8px}
  .gate__en{font-size:40px;line-height:1.1}
  .gate__icon{margin-block-start:20px;width:56px;height:56px}
  .gate__icon .arw{width:18px;height:18px}
  
  .gate + .gate{border-left:0;border-top:1px dotted var(--c-line)}
  
  
  .gates-wrap{background:linear-gradient(to bottom,
    transparent 127px, var(--c-footer) 127px)}
  body.-lower .gates-wrap{background:linear-gradient(to bottom,
    var(--c-bg) 127px, var(--c-footer) 127px)}

  
  .footer__top{flex-direction:column;align-items:flex-start;gap:var(--sp-md)}
  .footer__brand .logo img{height:32px}
  .footer__nav{display:grid;grid-template-columns:1fr 1fr;
    justify-content:start;justify-items:start;gap:14px 20px;width:100%}
  
  .footer__bottom{flex-direction:row;align-items:center;
    justify-content:space-between;gap:12px;flex-wrap:nowrap;
    
    padding-block-end:80px}
  
  .footer .footer__pp{font-size:12px}

  
  .krow{padding-block:18px;gap:2px}
  .krow__meta{gap:10px}
  
  .krow h3{margin-block-start:0}
  .krow__cat{margin-block-end:2px}

  
  .klist{max-width:none}
  .krow{padding-inline:10px}

  
  
  .ab-row,
  
  
  .ab-row,
  .ab-row.-figL,.ab-row.-figR{
    display:flex;flex-direction:column;align-items:stretch;gap:36px}
  
  .ab-row__text .sec-head.-mid{margin-block:0}
  .ab-row__text{display:contents}
  .ab-row .sec-head{order:-2}
  
  .ab-row.-figL .ab-motion,.ab-row.-figR .ab-motion,
  .ab-row.-figL .fig,.ab-row.-figR .fig,
  .ab-row .ab-motion,.ab-row .fig{
    order:-1;margin-block:0;
    width:100%;align-self:stretch}

  
  .sec-head__en{font-size:52px}
  
  .page-head .sec-head__en.-fit{font-size:min(56px, 12.8vw)}

  
  .work__item h3{font-size:18px}        
  .wrow h3,.krow h3{font-size:var(--fs-ui)}     
  .krow__cat,.wrow__cat{font-size:13px} 

  
  .inner:has(> .head-row){display:flex;flex-direction:column;min-width:0}
  .head-row{display:contents}
  .inner > .head-row .sec-head{order:-3}
  
  .inner > .head-row + .text-col{order:-2}
  .inner > .head-row .btn{order:-1;margin-block:var(--sp-md) 0;align-self:center}
  
  .inner:has(.wlist) > .head-row .btn,
  .inner:has(.klist) > .head-row .btn{order:1}
  
  .inner:has(.klist) > .head-row .btn{margin-block-start:44px}
  .btn__label{font-size:var(--fs-ui)}
  .btn__icon{width:34px;height:34px}
  .btn__icon .arw{width:13px;height:13px}
  
  .fv h1{margin-block-end:var(--sp-xs)}
  .fv .lead{font-size:15.5px;margin-block-start:var(--sp-xs)}

  
  
  .flip__item{font-size:20px}
  
  .flip{min-height:0;justify-content:flex-start}
  
  .flip__dots{position:static;margin-block-start:calc(91px + var(--sp-md));gap:7px}
  
  .flip__dots span{width:16px}
}


@media (max-width: 767px){
  .pp-card,.cs-card{padding-inline:16px}
  .sv-card{padding-inline:18px}
}


@media (max-width: 767px){
  
  .sv-step{
    display:grid;grid-template-columns:48px 1fr;
    column-gap:14px;row-gap:0;align-items:center}
  
  .sv-step__ic{width:48px;height:48px;grid-column:1;grid-row:1 / 3;align-self:start}
  .sv-step__ic svg{width:22px;height:22px}
  .sv-step__no{grid-column:2;grid-row:1;margin-block:0;align-self:end}
  .sv-step__title{grid-column:2;grid-row:2;margin-block:2px 0;
    min-height:0;align-self:start}
  .sv-step p:not(.sv-step__no){grid-column:2;grid-row:3;margin-block-start:10px}
  
  .sv-step::after,.sv-step::before{
    content:"";position:static;inset:auto;
    
    grid-column:1;grid-row:1 / 4;margin-block-start:48px;
    width:2px;height:auto;justify-self:center;align-self:stretch;
    
    margin-block-end:calc(var(--sv-sp-gap) * -1)}
  
  .sv-step:last-child::after,.sv-step:last-child::before{margin-block-end:0}
  
  .sv-step:nth-child(2n)::after{content:""}
  .sv-step::before{transform:scaleY(0);transform-origin:top}
  .js .sv-step.is-in::before{transform:scaleY(1)}
  
  .sv-steps{--sv-sp-gap:30px;row-gap:var(--sv-sp-gap)}
  
  .sv-flow{padding-block-end:80px}
}


@media (max-width: 767px){
  section.-lead .lead br{display:none}
  section.-lead .lead{line-height:1.8}
}


@media (max-width: 767px){
  
  .col2{grid-template-columns:1fr}
  .col2__side{display:none}
  .clients{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clients li{padding:5% 7%}
  
}


@media (max-width: 767px){
  
  .f-send{display:flex;justify-content:center}
  .f-send .btn{justify-content:center;padding-inline:24px}
}


@media (max-width: 767px){
  .cs-summary__row{grid-template-columns:1fr;gap:4px}
  
  .cs-body h2{font-size:20px}
  .cs-body h3{font-size:18px}
  .cs-body h4{font-size:var(--fs-ui)}
  
  .cs-cta{padding-inline:16px}
  .cs-cta .btn{padding:0 10px 0 12px;gap:6px}
  
  .cs-cta .btn__label{flex:1;text-align:center}

}





.p-kpi-flow,.p-why-panels,.p-questions{
  margin-block:clamp(24px,2.8vw,36px) clamp(28px,3.2vw,40px);
  padding:clamp(20px,2.4vw,28px);
  background:var(--c-pale-bg);border:1px solid var(--c-line-l);
  border-radius:var(--r-md)}


.cs-body .p-kpi-flow__title{margin:0;font-size:var(--fs-h3s);font-weight:var(--fw-h1);
  line-height:var(--lh-card);color:var(--c-ink)}
.cs-body .p-kpi-flow__subtitle{margin-block:8px 18px;font-size:var(--fs-cap);
  line-height:var(--lh-body);color:var(--c-read)}

.p-kpi-flow__svg-wrap{overflow-x:auto;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch}

.p-kpi-flow__svg-wrap svg{display:block;width:100%;min-width:780px;height:auto}

.d-line{stroke:rgba(26,86,189,.3);stroke-width:2;
  stroke-dasharray:none;stroke-dashoffset:0}

.d-node{opacity:1;transform:none;transition:none}

.d-rect{fill:var(--c-bg);stroke:var(--c-accent);stroke-width:1.5}
.d-text{fill:var(--c-ink);font-size:18px;font-weight:600;
  text-anchor:middle;dominant-baseline:middle}
.d-text.--sub{fill:var(--c-read);font-size:15px;font-weight:400}
.d-text.--rate{fill:var(--c-accent);font-size:19px;font-weight:700}

.d-bar-bg{fill:rgba(26,86,189,.14)}
.d-bar-fill{fill:var(--c-accent)}


.cs-body .p-why-panels__title{margin:0;font-size:var(--fs-h3s);font-weight:var(--fw-h1);
  line-height:var(--lh-card);color:var(--c-ink)}
.cs-body .p-why-panels__subtitle{margin-block:8px 0;font-size:var(--fs-cap);
  line-height:var(--lh-body);color:var(--c-read)}
.p-why-panels__list{display:grid;gap:0;margin-block-start:20px}

.cs-body .p-why-panels__caption{
  margin-block:20px 0;padding-block-start:18px;
  border-block-start:1px solid var(--c-line-l);
  font-size:var(--fs-note);line-height:var(--lh-body);color:var(--c-read)}

.p-why-panel{background:var(--c-bg);border:1px solid var(--c-line-l);
  border-radius:var(--r-sm);padding:16px}

.p-why-panel.--final{border-color:var(--c-accent);
  box-shadow:0 0 0 1px var(--c-accent) inset}
.p-why-panel__head{display:grid;gap:4px;margin-block-end:14px}
.p-why-panel__stage{font-size:var(--fs-note);font-weight:var(--fw-head);
  letter-spacing:.08em;color:var(--c-accent)}
.p-why-panel__label{font-size:var(--fs-cap);font-weight:var(--fw-strong);
  line-height:var(--lh-card);color:var(--c-ink)}

.ko{color:#c0392b;margin-inline-end:6px;font-weight:700}
.ok{color:var(--c-accent);margin-inline-end:6px;font-weight:700}

.p-why-panel__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.p-why-panel__col-head{font-size:var(--fs-note);font-weight:var(--fw-head);
  color:var(--c-read);padding-inline-start:2px}
.p-why-box{font-size:var(--fs-note);line-height:var(--lh-body);
  padding:10px 12px;border-radius:var(--r-ui);
  background:var(--c-fill);color:var(--c-ink)}
.p-why-box.--sol{background:rgba(26,86,189,.07);color:var(--c-read)}

.p-why-box.--final{background:var(--c-accent);color:var(--c-on-accent);
  font-weight:var(--fw-strong)}


.p-why-bridge{display:grid;justify-items:center;gap:6px;padding-block:12px}
.p-why-bridge__arrow{width:2px;height:14px;background:rgba(26,86,189,.3)}
.p-why-bridge__text{font-size:var(--fs-note);font-weight:var(--fw-head);
  line-height:var(--lh-card);color:var(--c-accent);text-align:center}




.p-quote{display:grid;gap:8px;
  margin-block:18px;padding:16px 18px;
  background:var(--c-pale-bg);border-radius:var(--r-ui)}
.p-quote__body{font-size:var(--fs-cap);line-height:var(--lh-body);color:var(--c-ink)}
.p-quote__who{font-size:var(--fs-note);color:var(--c-read)}


.p-questions{display:grid;gap:10px}
.p-questions__item{position:relative;
  padding:14px 16px 14px 52px;
  background:var(--c-bg);border:1px solid var(--c-line-l);border-radius:var(--r-ui);
  font-size:var(--fs-cap);line-height:var(--lh-body);color:var(--c-ink)}

.p-questions__item::before{content:attr(data-num);
  position:absolute;inset-inline-start:16px;top:14px;
  font-family:"Inter",sans-serif;font-size:var(--fs-note);font-weight:700;
  letter-spacing:.04em;color:var(--c-accent)}

@media (max-width: 767px){
  
  .p-why-panel__grid{grid-template-columns:1fr;gap:10px}
  .p-why-panel__col-head{display:none}
  .p-why-box{padding-block-start:6px}
  .p-why-box::before{display:block;margin-block-end:4px;
    font-size:var(--fs-note);font-weight:var(--fw-head);
    letter-spacing:.04em;opacity:.72}
  .p-why-box.--problem::before{content:"問題"}
  .p-why-box.--sol::before,.p-why-box.--final::before{content:"解決策"}
  
  .p-questions__item{padding:12px 14px 12px 44px}
  .p-questions__item::before{inset-inline-start:14px;top:12px}
}


.kn-toc li{position:relative;padding-inline-start:16px}
.kn-toc li::before{content:"";position:absolute;inset-inline-start:2px;
  top:calc(var(--fs-list) * 1.7 / 2 - 3px);
  width:6px;height:6px;border-radius:var(--r-full);background:var(--c-line)}


.cs-body .p-caption{
  margin-block:10px 0;font-size:var(--fs-note);line-height:var(--lh-cap);
  color:var(--c-faint)}


.p-case-legend{display:grid;gap:10px;
  margin-block:clamp(20px,2.4vw,28px)}
.cs-body .p-case-legend__item{
  position:relative;margin:0;padding-inline-start:20px;
  font-size:var(--fs-cap);line-height:var(--lh-body);color:var(--c-ink)}
.cs-body .p-case-legend__item::before{content:"";position:absolute;inset-inline-start:2px;
  top:calc(var(--lh-body) * var(--fs-cap) / 2 - 3px);
  width:6px;height:6px;border-radius:var(--r-full);background:var(--c-accent)}

.cs-body .p-case-legend__item strong{font-weight:var(--fw-h1);color:var(--c-ink);
  margin-inline-end:8px}





.scrollbox{position:relative}
.scroll-hint{display:none}

@media (max-width: 1024px){
  
  
  .scrollbox.is-on .scroll-hint{
    display:grid;justify-items:center;gap:6px;
    position:absolute;inset-inline-start:50%;top:50%;
    transform:translate(-50%,-50%);
    z-index:3;pointer-events:none;
    padding:12px 16px 10px;
    border-radius:var(--r-sm);background:rgba(80,80,80,.66);
    color:var(--c-on-accent);font-size:12px;font-weight:var(--fw-head);
    letter-spacing:.04em;line-height:1.3;white-space:nowrap;
    transition:opacity .4s ease, visibility 0s linear .4s}
  
  
  .scrollbox.is-on .scroll-hint::before{
    content:"";display:block;width:84px;aspect-ratio:72 / 44;
    background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 44' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M14 8 7 15l7 7M7 15h12'/><path d='M58 8l7 7-7 7M65 15H53'/><path d='M31 42a9 9 0 0 1-9-9v-7a3 3 0 0 1 6 0v3V12a3 3 0 0 1 6 0v12V20a3 3 0 0 1 6 0v4v-2a3 3 0 0 1 6 0v11a9 9 0 0 1-9 9z'/></svg>") no-repeat center/contain}
  
  .scrollbox.is-off .scroll-hint{opacity:0;visibility:hidden}
}
@media (prefers-reduced-motion: reduce){
  .scrollbox.is-on .scroll-hint{transition:none}
}



@media (min-width: 768px){
  .gates{max-width:min(var(--w-wide), calc(100% - var(--pad-x) * 2))}
}


@media (min-width: 1025px) and (max-width: 1139px){
  .ab-row,
  .ab-row.-figL,.ab-row.-figR{
    display:flex;flex-direction:column;align-items:stretch;gap:36px}
  .ab-row__text{display:contents}
  .ab-row__text .sec-head.-mid{margin-block:0}
  .ab-row .sec-head{order:-2}
  .ab-row.-figL .ab-motion,.ab-row.-figR .ab-motion,
  .ab-row.-figL .fig,.ab-row.-figR .fig,
  .ab-row .ab-motion,.ab-row .fig{
    order:-1;margin-block:0;align-self:center;width:517px}
}


@media (min-width: 768px) and (max-width: 1024px){
  :root{--pad-x: clamp(25px, 6vw, 72px)}
}

@media (min-width: 600px) and (max-width: 1366px) and (orientation: portrait){
  :root{--pad-x: clamp(25px, 6vw, 72px)}
}

@media (min-width: 768px) and (max-width: 1024px){
  
  .fv .text-col{text-align:center;margin-inline:auto}
  
  .fv .lead{margin-inline:auto}

  
  
  .ab-row,
  .ab-row.-figL,.ab-row.-figR{
    display:flex;flex-direction:column;align-items:stretch;gap:36px}
  .ab-row__text{display:contents}
  .ab-row__text .sec-head.-mid{margin-block:0}
  .ab-row .sec-head{order:-2}
  .ab-row.-figL .ab-motion,.ab-row.-figR .ab-motion,
  .ab-row.-figL .fig,.ab-row.-figR .fig,
  .ab-row .ab-motion,.ab-row .fig{
    order:-1;margin-block:0;align-self:center;
    
    width:517px}

  
  .footer__top{flex-direction:column;align-items:flex-start;gap:var(--sp-md)}
  .footer__nav{justify-content:flex-start;width:100%}

  
  .col2{grid-template-columns:1fr}
  .col2__side{display:none}
}


@media (min-width: 1025px) and (max-width: 1366px){
  
  
  .fv .text-col{margin-inline-start:20px}

  
  .fv__cue{display:none}
}


@media (min-width: 600px) and (max-width: 1366px){
  .ab-row__text p,
  .ab-note p,
  .ab-note{max-width:44em}
}


@media (min-width: 600px) and (max-width: 1366px) and (orientation: portrait){
  
  .ab-row__text p,
  .ab-note p,
  .ab-note{margin-inline:auto}
}


@media (min-width: 600px) and (max-width: 1023px){
  .cinfo__row{grid-template-columns:160px 1fr;gap:0 clamp(16px,2.4vw,32px)}
}


.nobr{display:inline-block}


@media (min-width: 768px) and (max-width: 1366px){
  :root{
    --sp-xl: clamp(100px, 11vw, 130px);   
    
    
    --sp-lg: clamp(60px, 5.6vw, 70px);
  }
  
  .page-head{padding-block:clamp(56px, 6vw, 72px) 0}
}




main + .gates-wrap{margin-block-start:calc(var(--sp-lg) * 2.4 - var(--sp-xl))}




main:has(.sv-flow) + .gates-wrap{margin-block-start:calc(var(--sp-lg) * 1.4)}


main:has(.cs-related) + .gates-wrap{margin-block-start:0}
.cs-related{padding-block-end:calc(var(--sp-lg) * 2.4)}
@media (max-width: 767px){
  
  main:has(.sv-flow) + .gates-wrap{margin-block-start:35px}
}



main:has(.stick__track) > section:last-of-type{padding-block-start:var(--band-pad)}



@media (max-width: 1024px), (min-width: 600px) and (max-width: 1366px) and (orientation: portrait){
  .fv .text-col{text-align:center;margin-inline:auto}
  .fv .lead{margin-inline:auto}
  .fv .wipe{margin-inline:auto}
}



@media (min-width: 600px) and (max-width: 1366px) and (orientation: portrait){
  .fv__visual{height:clamp(360px, 40svh, 480px)}
}



.intro{display:none}
.js .intro{display:block;position:fixed;inset:0;z-index:200;
  background:var(--c-bg);opacity:1;transition:opacity .34s ease}
.intro.-out{opacity:0;pointer-events:none}

.intro__logo{position:absolute;left:50%;top:50%;
  width:clamp(170px, 32vw, 300px);aspect-ratio:618 / 161;
  opacity:0;transform:translate(-50%,-50%) scale(.96);
  transition:opacity .42s ease, transform .42s ease}
.intro.-in .intro__logo{opacity:1;transform:translate(-50%,-50%) scale(1)}

.intro.-out .intro__logo{opacity:0;transform:translate(-50%,-50%) scale(1.06);
  transition:opacity .22s ease, transform .34s ease}
.intro__logo > img{display:block;width:100%;height:auto}


.intro__hole{position:absolute;left:72.98%;top:0;width:13.75%;height:100%;
  background:var(--c-bg)}


.intro__o{position:absolute;inset:0;
  clip-path:inset(0 13.27% 0 72.98%)}
.intro__o img{display:block;width:100%;height:auto}
.intro.-bounce .intro__o{animation:introBounce .50s cubic-bezier(.33,.9,.42,1) both}
@keyframes introBounce{
  0%  {transform:translateY(0)}
  36% {transform:translateY(-17%)}
  60% {transform:translateY(0)}
  78% {transform:translateY(-5%)}
  100%{transform:translateY(0)}
}


html.js:has(#intro) .wipe > span{animation-play-state:paused}


.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:8px;margin-block-start:clamp(40px, 4.5vw, 64px)}
.pager__num,.pager__arw{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding-inline:4px;
  font-size:var(--fs-ui);line-height:1;font-weight:var(--fw-ui);
  color:var(--c-ink);text-decoration:none;
  border:1px solid var(--c-line);border-radius:var(--r-ui);background:var(--c-bg);
  transition:color .3s ease, border-color .3s ease, background-color .3s ease}

.pager__num.-on{color:var(--c-on-accent);background:var(--c-accent);
  border-color:var(--c-accent);cursor:default}

.pager__svg{display:block;color:inherit}
.pager__arw.-prev .pager__svg{transform:scaleX(-1)}
@media (hover: hover){
  .pager a:hover{color:var(--c-accent);border-color:var(--c-accent)}
}
.pager a:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}


@media (max-width: 767px){
  .pager{gap:6px;margin-block-start:40px}
  .pager__num,.pager__arw{min-width:44px}
}


@media (max-width: 1023px){
  .cs-side__logo{width:min(240px, 100%)}
}


img{
  -webkit-user-drag:none;
          user-drag:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
          user-select:none;
}