:root{
  --ink:#082f74;
  --body:#102d57;
  --muted:#1d3f6c;
  --blue:#176fe8;
  --page-max:1672px;
  --glass:rgba(250,253,255,.88);
  --glass-soft:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Yu Gothic UI",Meiryo,sans-serif;color:var(--body);background:#0c1c38}
a{color:inherit}
.site{position:relative;overflow:hidden;isolation:isolate;min-height:100vh}
.site::before{content:"";position:fixed;z-index:-2;inset:0;background:url("assets/hero-background-desktop.webp") center center/cover no-repeat}

/* HERO — visual target: approved reference */
.hero{min-height:min(941px,56.28vw);color:#fff;position:relative}
.hero-header{height:60px;margin:0 10px;border-bottom:1px solid rgba(255,255,255,.36);display:flex;align-items:center;justify-content:flex-end;padding:0 66px}
.hero-nav{display:flex;align-items:center;gap:24px;font-size:14px;font-weight:600;text-shadow:0 2px 9px rgba(0,0,0,.7)}
.hero-nav a{text-decoration:none;color:#fff;white-space:nowrap}.hero-nav i{display:block;width:1px;height:20px;background:rgba(255,255,255,.56)}
.hero-center{height:calc(min(941px,56.28vw) - 60px);display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:54px;position:relative;isolation:isolate}

.hero-focus::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:82px;
  left:50%;
  width:min(760px,62vw);
  height:min(390px,33vw);
  transform:translateX(-50%);
  pointer-events:none;
  background:
    radial-gradient(
      ellipse at 50% 46%,
      rgba(3,12,28,.36) 0%,
      rgba(3,12,28,.27) 30%,
      rgba(4,15,34,.16) 52%,
      rgba(4,15,34,.06) 70%,
      transparent 84%
    );
  filter:blur(14px);
}
.hero-focus > *{
  position:relative;
  z-index:1;
}

.hero-lockup{width:clamp(390px,30vw,505px);height:auto;filter:drop-shadow(0 7px 13px rgba(0,0,0,.72)) drop-shadow(0 0 22px rgba(0,0,0,.46))}
.hero-title-mobile-break{display:none}.keep-together{white-space:nowrap}
.hero h1{margin:18px 0 0;font-size:clamp(24px,1.75vw,29px);line-height:1.35;letter-spacing:.035em;font-weight:700;text-shadow:0 4px 9px rgba(0,0,0,.66),0 0 18px rgba(0,0,0,.42)}

.hero-cta{position:relative;margin-top:46px;width:410px;max-width:calc(100vw - 40px);height:74px;border:0;outline:0;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:40px;text-decoration:none;color:#fff;font-size:22px;font-weight:600;letter-spacing:.04em;overflow:hidden;isolation:isolate;
background:
radial-gradient(120% 180% at 8% -20%,rgba(255,255,255,.52) 0%,rgba(255,255,255,.17) 34%,transparent 60%),
radial-gradient(70% 150% at 90% 110%,rgba(255,189,173,.28) 0%,rgba(255,255,255,.06) 50%,transparent 76%),
linear-gradient(112deg,rgba(210,230,255,.30),rgba(109,126,171,.23) 46%,rgba(86,83,116,.27));
backdrop-filter:blur(24px) saturate(148%) contrast(103%);-webkit-backdrop-filter:blur(24px) saturate(148%) contrast(103%);
box-shadow:0 16px 40px rgba(0,0,0,.26),inset 0 10px 20px rgba(255,255,255,.08),inset 0 -12px 22px rgba(12,28,61,.10);
text-shadow:0 2px 7px rgba(0,0,0,.48);transition:filter .18s ease,transform .18s ease}
.hero-cta::before{content:"";position:absolute;left:8%;top:5%;width:64%;height:36%;border-radius:999px;pointer-events:none;z-index:1;
background:radial-gradient(ellipse at 36% 30%,rgba(255,255,255,.48),rgba(255,255,255,.16) 46%,transparent 78%);
filter:blur(4px);opacity:.72}
.hero-cta::after{content:"";position:absolute;top:-18%;bottom:-18%;left:-34%;width:28%;border-radius:42px;pointer-events:none;z-index:4;opacity:0;
background:linear-gradient(90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.10) 18%,
rgba(255,255,255,.66) 47%,
rgba(215,238,255,.92) 54%,
rgba(255,255,255,.54) 63%,
rgba(255,255,255,.08) 82%,
rgba(255,255,255,0) 100%);
transform:translateX(0) skewX(-17deg);
filter:blur(.35px)}
.hero-cta svg{width:28px;height:20px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hero-cta:hover{filter:brightness(1.07);transform:translateY(-1px)}

/* S01 — single premium glass panel, no nested frame-on-frame */
.company-wrap{max-width:1600px;margin:-4px auto 64px;padding:0 28px;position:relative}
.company-glass{position:relative;overflow:hidden;border-radius:34px;
background:rgba(250,253,255,.91);
backdrop-filter:blur(30px) saturate(126%);-webkit-backdrop-filter:blur(30px) saturate(126%);
box-shadow:0 24px 72px rgba(7,27,59,.18),inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(59,106,171,.04)}
.company-glass::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent);pointer-events:none}
.company-main{position:relative;display:grid;grid-template-columns:minmax(0,.96fr) minmax(480px,1.04fr);align-items:center;gap:38px;padding:50px 54px 24px}
.company-copy{min-width:0}.eyebrow{display:flex;align-items:center;gap:15px;margin-bottom:24px;color:#315f91;font-size:17px;font-weight:700}.eyebrow span{display:block;width:4px;height:28px;border-radius:9px;background:#3e76aa}
.company-copy h2{margin:0;color:#082f74;font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;font-size:clamp(56px,3.5vw,72px);line-height:1.22;font-weight:700;letter-spacing:.002em;display:grid;grid-template-columns:.78em minmax(0,1fr);row-gap:.03em;align-items:start}.company-copy h2 span{display:block;white-space:normal}
.company-lead{margin:17px 0 0;color:#0a347b;word-break:normal;line-break:strict;text-wrap:pretty;font-size:clamp(20px,1.35vw,26px);line-height:1.55;font-weight:600}
.company-body{margin-top:24px;color:#10294e;word-break:normal;line-break:strict;text-wrap:pretty;font-size:clamp(16px,1.02vw,19px);line-height:1.78;font-weight:400}.company-body p{margin:0 0 9px}.company-body p:last-child{margin-bottom:0}
.supported{display:flex;align-items:center;flex-wrap:wrap;gap:17px;margin-top:24px;padding-top:17px;border-top:1px solid rgba(28,82,154,.17);color:#092d6c}.supported strong{font-size:16px}.supported span{width:1px;height:23px;background:rgba(20,80,166,.26)}.supported b{font-size:18px}
.company-visual{display:flex;align-items:center;justify-content:center;min-width:0}.company-visual img{display:block;width:min(100%,770px);height:auto;object-fit:contain;filter:drop-shadow(0 20px 28px rgba(7,31,75,.18))}

/* lower row belongs to the same single glass surface; no nested white veil */
.benefits{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:6px 30px 20px;background:transparent}
.benefit{display:grid;grid-template-columns:98px 1fr;gap:18px;align-items:center;padding:17px 30px 18px;min-width:0}.benefit+.benefit{border-left:1px solid rgba(35,84,153,.14)}
.benefit img{width:90px;height:90px;object-fit:contain;filter:drop-shadow(0 7px 13px rgba(25,81,169,.12))}.benefit h3{margin:0 0 7px;color:#073178;font-size:clamp(19px,1.30vw,24px);line-height:1.42;font-weight:600}.benefit p{margin:0;color:#15345e;font-size:clamp(14px,.93vw,17px);line-height:1.67;font-weight:400}

@media(max-width:1200px){
  .hero{min-height:760px}.hero-header{height:70px;padding:0 24px}.hero-center{height:690px;padding-top:40px}.hero-lockup{width:370px;max-width:80vw}.hero h1{font-size:25px}.hero-cta{width:360px;height:66px;font-size:19px;margin-top:38px}
  .company-wrap{margin-top:-10px}.company-main{grid-template-columns:1fr;padding:42px 40px 20px}.company-visual img{width:min(100%,760px);height:auto}.benefits{grid-template-columns:1fr;padding:4px 24px 14px}.benefit{grid-template-columns:86px 1fr;padding:15px 8px}.benefit+.benefit{border-left:0;border-top:1px solid rgba(35,84,153,.14)}.benefit img{width:78px;height:78px}
}
@media(max-width:760px){
  .hero-title-mobile-break,.company-title-mobile-break{display:inline}
  .hero{min-height:690px}.hero-header{height:auto;min-height:58px;padding:14px 14px 10px}.hero-nav{font-size:11px;gap:9px;justify-content:flex-end;flex-wrap:wrap}.hero-nav i{display:none}.hero-center{height:auto;min-height:620px;padding:35px 18px 54px}.hero-lockup{width:min(330px,86vw)}.hero h1{font-size:23px;line-height:1.48;margin-top:17px;text-wrap:balance}.hero-cta{width:min(100%,330px);height:59px;margin-top:34px;font-size:16px;gap:24px}
  .company-wrap{margin:-6px auto 40px;padding:0 10px}.company-glass{border-radius:26px;background:rgba(249,252,255,.875)}.company-main{padding:25px 18px 12px;gap:18px}.eyebrow{font-size:14px;margin-bottom:14px}.eyebrow span{height:23px}.company-copy h2{font-size:34px;line-height:1.28;font-weight:700;letter-spacing:0}.company-lead{font-size:17px;line-height:1.62;margin-top:13px}.company-body{font-size:15px;line-height:1.82;margin-top:18px;color:#0b2343}.supported{margin-top:16px;padding-top:12px;gap:9px}.supported strong{font-size:14px}.supported b{font-size:15px}.company-visual img{width:100%;height:auto}
  .benefits{padding:3px 13px 11px;background:transparent}.benefit{grid-template-columns:72px 1fr;gap:11px;padding:12px 4px}.benefit img{width:66px;height:66px}.benefit h3{font-size:18px;margin-bottom:5px}.benefit p{font-size:14px}.benefit p br{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-cta{transition:none}}




.company-body p{margin:0 0 9px}
.company-body p:last-child{margin-bottom:0}

@media(min-width:1201px){
  .company-copy h2{font-size:clamp(40px,2.4vw,48px);line-height:1.28}

}

@media(min-width:761px) and (max-width:1200px){

}

@media(max-width:760px){


  .company-copy h2{font-size:34px;line-height:1.28;font-weight:700;letter-spacing:0}
  .company-lead{font-size:17px;line-height:1.58;font-weight:600}
  .company-body{font-size:15px;line-height:1.76}
}



.hero-cta{will-change:transform,filter}
.hero-cta .hero-cta-label,.hero-cta svg{position:relative;z-index:3}
.hero-cta::before{
  z-index:1;
}
.hero-cta::after{
  z-index:1;
}



.hero-cta:hover{
  filter:brightness(1.09) saturate(1.05);
  transform:translateY(-2px);
  box-shadow:0 18px 44px rgba(0,0,0,.28),inset 0 10px 22px rgba(255,255,255,.14),inset 0 -12px 23px rgba(12,28,61,.12);
}
.hero-cta:active{transform:translateY(0) scale(.992);filter:brightness(1.12)}

  18%{opacity:.9}
  75%{opacity:.68}
  100%{transform:translateX(560%) skewX(-18deg);opacity:0}
}

@media(min-width:1201px) and (max-width:1450px){
  .company-main{
    grid-template-columns:minmax(0,1fr) minmax(430px,.93fr);
    gap:30px;
    padding:44px 42px 22px;
  }
  .company-copy h2{font-size:clamp(44px,3.18vw,52px)}
  .company-lead{font-size:20px}
  .company-body{font-size:16px;line-height:1.72}
  .company-visual img{width:min(100%,620px);height:auto}
}

@media(max-width:390px){
  .company-copy h2{font-size:30px}

}


@media(prefers-reduced-motion:reduce){

}

.company-title-quote{grid-column:1;grid-row:1;display:block;text-align:left}
.company-title-spacer{grid-column:1;grid-row:2}
.company-title-text{grid-column:2;display:block;white-space:nowrap}
.company-title-text:nth-of-type(2){grid-row:1}
.company-title-text:last-child{grid-row:2}




  to{transform:rotate(360deg)}
}

@media(max-width:760px){
  .company-copy h2{
    font-size:34px;
    line-height:1.31;
    font-weight:700;
    letter-spacing:0;
    grid-template-columns:.78em minmax(0,1fr);
  }
  .company-title-text{white-space:nowrap}
}
@media(max-width:390px){
  .company-copy h2{font-size:31px}
}
@media(max-width:345px){
  .company-copy h2{font-size:28px}
}

@media(prefers-reduced-motion:reduce){
  .hero-cta:hover::after,
  .hero-cta:focus-visible::after,

}

.hero-cta:hover::after,
.hero-cta:focus-visible::after,
.hero-cta.is-glint::after{
  opacity:1;
  animation:realni-wide-glint .98s cubic-bezier(.22,.66,.2,1) forwards;
}
@keyframes realni-wide-glint{
  0%{left:-34%;opacity:0}
  8%{opacity:1}
  58%{opacity:1}
  100%{left:108%;opacity:0}
}
  8%{opacity:1}
  55%{opacity:1}
  100%{left:112%;opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .hero-cta:hover::after,
  .hero-cta:focus-visible::after,
  .hero-cta.is-glint::after{animation:none;opacity:0}
}

.hero-cta:focus{outline:0}
.hero-cta:focus-visible{
  outline:2px solid rgba(206,234,255,.82);
  outline-offset:4px;
}


@media(max-width:1200px){
  .hero-focus::before{
    top:68px;
    width:min(650px,74vw);
    height:340px;
    filter:blur(13px);
  }
}
@media(max-width:760px){
  .hero-focus::before{
    top:72px;
    width:86vw;
    height:300px;
    background:
      radial-gradient(
        ellipse at 50% 44%,
        rgba(3,12,28,.38) 0%,
        rgba(3,12,28,.27) 36%,
        rgba(4,15,34,.13) 60%,
        rgba(4,15,34,.04) 75%,
        transparent 86%
      );
    filter:blur(12px);
  }
}


/* =========================================================
   V61 — Floating Back-to-Top
   Appears only after scrolling; subtle navy glass treatment.
   ========================================================= */
.page-top-floating{
  position:fixed;
  right:clamp(16px,2vw,28px);
  bottom:clamp(18px,2vw,28px);
  z-index:90;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  color:rgba(255,255,255,.94);
  background:
    radial-gradient(90% 110% at 28% 12%,
      rgba(255,255,255,.15) 0%,
      rgba(255,255,255,.04) 48%,
      transparent 72%),
    rgba(8,43,88,.74);
  backdrop-filter:blur(13px) saturate(126%);
  -webkit-backdrop-filter:blur(13px) saturate(126%);
  box-shadow:
    0 12px 28px rgba(4,22,52,.22),
    inset 0 1px 0 rgba(255,255,255,.08);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px) scale(.96);
  pointer-events:none;
  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.page-top-floating.is-visible{
  opacity:.88;
  visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.page-top-floating:hover{
  opacity:1;
  background:
    radial-gradient(90% 110% at 28% 12%,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.06) 48%,
      transparent 72%),
    rgba(9,54,111,.82);
  box-shadow:
    0 15px 32px rgba(4,22,52,.27),
    inset 0 1px 0 rgba(255,255,255,.11);
  transform:translateY(-2px) scale(1);
}

.page-top-floating:active{
  transform:translateY(0) scale(.97);
}

.page-top-floating:focus{
  outline:0;
}

.page-top-floating:focus-visible{
  outline:2px solid rgba(205,234,255,.94);
  outline-offset:4px;
  opacity:1;
}

.page-top-floating svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(max-width:760px){
  .page-top-floating{
    right:14px;
    bottom:16px;
    width:46px;
    height:46px;
  }

  .page-top-floating svg{
    width:20px;
    height:20px;
  }
}

@media(prefers-reduced-motion:reduce){
  .page-top-floating{
    transition:none;
  }
}
