:root{
  --ink:#1c1c1c;
  --ink-2:#3c3c3c;
  --ink-3:#7c7c7c;
  --navy:#274a78;
  --navy-dark:#101e30;
  --blue:#058aff;
  --green:#6cce1b;
  --grad:linear-gradient(90deg,#6cce1b 0%,#058aff 100%);
  --line:#d8d8d8;
  --bg:#ffffff;
  --bg-soft:#f7f7f7;
  --error:#e53935;
  /* Cap fluid layout to Figma 1440 stage on ultra-wide / 4K */
  --vw:min(100vw, 1440px);
  --page-max:1440px;
}
*{ box-sizing:border-box; margin:0; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{
  background:var(--bg); color:var(--ink);
  font-family:'Noto Sans JP',sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body:not(.page-home){
  background:var(--bg-soft);
  display:flex; flex-direction:column; min-height:100vh;
}
body.is-loading{ overflow:hidden; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }
.wrap{
  /* Figma content 1200 @1440; keep 20px min gutter; cap at 1200 */
  width:min(1200px, 100% - 40px, calc(var(--vw) * 1200 / 1440));
  margin:0 auto;
}

/* Hex background — tiles vertically to fill container height */
.hex-bg{
  position:relative;
  overflow:hidden;
}
.hex-bg::before{
  content:""; position:absolute; inset:0;
  background-image:url("/assets/contact-hex.jpeg");
  background-repeat:repeat-y;
  background-size:100% auto;
  background-position:center top;
  mix-blend-mode:overlay; opacity:.55; pointer-events:none;
  transform:scaleX(-1);
}

/* Loading */
.site-loader{
    position:fixed; inset:0; z-index:9999;
    display:flex; align-items:center; justify-content:center;
    background:var(--navy-dark);
    transition:opacity .55s ease, visibility .55s ease;
  }
  .site-loader.is-hidden{
    opacity:0; visibility:hidden; pointer-events:none;
  }
  .site-loader__inner{
    display:flex; flex-direction:column; align-items:center; gap:28px;
  }
  .site-loader__logo{
    height:62px; width:auto;
    animation:loader-logo .9s ease both;
  }
  .site-loader__bar{
    width:min(200px, 50vw); height:3px;
    background:rgba(255,255,255,.12); border-radius:100px; overflow:hidden;
  }
  .site-loader__bar-fill{
    display:block; height:100%; width:40%;
    background:var(--grad); border-radius:100px;
    animation:loader-bar 1.4s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce){
    .site-loader__logo,
    .site-loader__bar-fill{ animation:none; }
    .site-loader{ transition-duration:.01ms; }
  }
  @media (prefers-reduced-motion: no-preference){
    @keyframes loader-logo{
      from{ opacity:0; transform:translateY(8px); }
      to{ opacity:1; transform:none; }
    }
    @keyframes loader-bar{
      0%{ transform:translateX(-100%); }
      100%{ transform:translateX(350%); }
    }
  }

/* Buttons */
.btn{
    display:inline-flex; align-items:center; gap:34px;
    background:var(--navy); color:#fff; font-weight:700;
    border-radius:100px; border:none; cursor:pointer;
    padding:12px 17px 12px 60px;
    transition:background-color .3s ease;
  }
  .btn::after{
    content:""; flex:none;
    width:9px; height:14px;
    background:url("/assets/btn-arrow.svg") no-repeat center / contain;
  }
  .btn:hover{ background:var(--blue); }
  .btn-plain::after{ display:none; }
  .btn-plain{ padding:12px 40px; gap:0; justify-content:center; }
  /* Honor [hidden] over .btn / nav / footer display rules (PC + SP) */
  .btn[hidden],
  .nav-menu a[hidden],
  .nav-menu-cta[hidden],
  .footer-nav a[hidden],
  .footer-links a[hidden],
  .nav-menu-foot a[hidden]{
    display:none !important;
  }

/* Header — Figma Frame 55 @1440: full-bleed bar, 77px */
.site-header{
  position:absolute; top:0; left:0; right:0; z-index:20;
}
.thanks-page,
.privacy-page,
.terms-page,
.coming-soon-page{
  padding-top:77px;
}
  .nav{
    width:100%;
    margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    background:rgba(255,255,255,.9);
    border-radius:0;
    /* Figma Frame 55: logo x=30 @1440 — scale with full-bleed header */
    padding:14px max(20px, calc(100vw * 30 / 1440));
    box-shadow:none;
    box-sizing:border-box;
  }
  .logo img{ height:41px; width:auto; background:transparent; }
  .nav-menu{ display:flex; align-items:center; gap:50px; }
  .nav-menu a{ font-weight:700; font-size:18px; line-height:1.4; }
  .nav-menu a:not(.btn){
    position:relative; display:inline-block;
  }
  .nav-menu a:not(.btn)::after{
    content:""; position:absolute; left:0; bottom:-4px;
    width:100%; height:1px; background:var(--ink);
    transform:scaleX(0); transform-origin:left center;
    transition:transform .3s ease;
  }
  .nav-menu a:not(.btn):hover::after{ transform:scaleX(1); }
  .nav-menu .nav-menu-shell{ display:contents; }
  .nav-menu-photo,
  .nav-menu-foot{ display:none; }
  .nav-menu-main{ display:contents; }
  .nav-menu .btn{
    position:relative;
    font-size:18px;
    padding:12px 60px;
    gap:0;
    justify-content:center;
  }
  .nav-menu .btn::after{
    position:absolute;
    top:50%;
    right:18px;
    left:auto;
    transform:translateY(-50%);
  }
  .menu-toggle{
    display:none; background:none; border:0; cursor:pointer; padding:8px;
  }
  .menu-toggle span{
    display:block; width:24px; height:2px; background:var(--ink); margin:5px 0;
  }

/* Footer */
.site-footer{
    background:var(--navy-dark); color:#fff; padding:50px 0;
  }
  .footer-top{
    display:flex; align-items:center; justify-content:space-between;
    padding-bottom:30px;
  }
  .footer-logo img{ height:62px; width:auto; background:transparent; }
  .footer-nav{ display:flex; gap:60px; }
  .footer-nav a{
    position:relative; display:inline-block;
    font-weight:700; font-size:16px;
  }
  .footer-nav a::after{
    content:""; position:absolute; left:0; bottom:-4px;
    width:100%; height:1px; background:#fff;
    transform:scaleX(0); transform-origin:left center;
    transition:transform .3s ease;
  }
  .footer-nav a:hover::after{ transform:scaleX(1); }
  .footer-bottom{
    border-top:1px solid #fff;
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 0; font-size:12px; font-weight:700;
  }
  .footer-links{ display:flex; gap:60px; }
  .footer-links a{
    font-size:12px; font-weight:700;
    transition:opacity .3s ease;
  }
  .footer-links a:hover{ opacity:.6; }

@media (min-width:834px) and (max-width:1100px){
  .nav-menu{ gap:28px; }
  .nav-menu a:not(.btn){ font-size:15px; }
  .footer-nav{ gap:48px; }
}

/* Narrow desktop / tablet landscape: compress nav to fit */
@media (min-width:834px) and (max-width:900px){
  .nav{ padding:12px 20px; }
  .logo img{ height:36px; }
  .nav-menu{ gap:14px; }
  .nav-menu a:not(.btn){ font-size:13px; }
  .nav-menu .btn{
    font-size:13px;
    padding:10px 40px;
  }
  .nav-menu .btn::after{ width:8px; height:12px; right:14px; }
  /* Stacked layout: use full content width (don't force 1200/1440 shrink) */
  .wrap{ width:min(1200px, 100% - 40px); }
}

@media (max-width:833px){
    body{
      overflow-x:hidden;
      width:100%;
      /* Content capped on tablet; header always tracks viewport */
      --sp-u:min(100vw, 700px);
      --sp-nav-u:100vw;
      --sp-nav-h:calc(var(--sp-nav-u) * 63 / 390);
      /* Match footer side inset (17 @390) */
      --sp-gutter:calc(var(--sp-u) * 17 / 390);
    }
    /* Tablet portrait: compact header chrome; content scale/gutter tuned for tablet */
    @media (min-width:768px){
      body{
        --sp-nav-u:50vw;
        --sp-nav-h:calc(var(--sp-nav-u) * 63 / 390);
        --sp-u:min(600px, 100vw);
        /* Slightly tighter content than footer default (17@390) */
        --sp-gutter:calc(var(--sp-u) * 28 / 390);
      }
    }
    .site-header{ top:0; z-index:26; }
    .thanks-page,
    .privacy-page,
    .terms-page,
    .coming-soon-page{
      padding-top:var(--sp-nav-h);
    }
    .nav{
      width:100%; margin:0;
      border-radius:0;
      padding:calc(var(--sp-nav-u) * 15 / 390) calc(var(--sp-nav-u) * 20 / 390);
      box-shadow:none;
      transition:background .35s ease;
    }
    body.menu-open .nav{
      background:#fff;
      transition:none;
    }
    .logo{
      transition:background .35s ease;
    }
    .logo img{ height:calc(var(--sp-nav-u) * 33 / 390); }
    .menu-toggle{
      position:relative;
      display:block;
      flex-shrink:0;
      box-sizing:border-box;
      padding:0;
      width:calc(var(--sp-nav-u) * 29.876 / 390);
      height:calc(var(--sp-nav-u) * 25.137 / 390);
      background:transparent;
      transition:background .35s ease;
    }
    body.menu-open .menu-toggle{
      background:#fff;
      transition:none;
    }
    .menu-toggle span{
      position:absolute;
      left:0;
      top:50%;
      display:block;
      width:100%;
      height:calc(var(--sp-nav-u) * 3 / 390);
      margin:0;
      background:var(--ink);
      border-radius:calc(var(--sp-nav-u) * 1.5 / 390);
      transform-origin:center center;
      transition:
        transform .35s cubic-bezier(.4,0,.2,1),
        opacity .25s ease;
    }
    .menu-toggle span:nth-child(1){
      transform:translateY(calc(var(--sp-nav-u) * -11.0685 / 390));
    }
    .menu-toggle span:nth-child(2){
      transform:translateY(0);
    }
    .menu-toggle span:nth-child(3){
      transform:translateY(calc(var(--sp-nav-u) * 11.0685 / 390));
    }
    body.menu-open .menu-toggle span:nth-child(1){
      transform:translateY(0) rotate(45deg);
    }
    body.menu-open .menu-toggle span:nth-child(2){
      opacity:0;
      transform:translateY(0) scaleX(0);
    }
    body.menu-open .menu-toggle span:nth-child(3){
      transform:translateY(0) rotate(-45deg);
    }
    body.menu-open .logo{
      background:#fff;
      transition:none;
    }
    body.menu-open .hex-bg::before{
      opacity:0;
    }
    html.menu-open,
    body.menu-open{
      overflow:hidden;
      overscroll-behavior:none;
    }
    body.menu-open{ touch-action:none; }
    .nav-menu.open{ touch-action:auto; }
    .nav-menu{
      display:block;
      position:fixed;
      top:var(--sp-nav-h); left:0; right:0; bottom:0;
      z-index:25;
      background:#fff;
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      visibility:hidden;
      pointer-events:none;
    }
    .nav-menu.open{
      visibility:visible;
      pointer-events:auto;
    }
    .nav{ position:relative; }
    .nav-menu .nav-menu-shell{
      display:flex;
      flex-direction:column;
      align-items:center;
      padding:0 0 calc(var(--sp-u) * 20 / 390);
      box-sizing:border-box;
      opacity:0;
      transform:translateY(calc(var(--sp-u) * 12 / 390));
      transition:opacity .4s ease .06s, transform .4s ease .06s;
    }
    .nav-menu.open .nav-menu-shell{
      opacity:1;
      transform:translateY(0);
    }
    @media (prefers-reduced-motion: reduce){
      .nav-menu .nav-menu-shell{
        transition:none;
        transform:none;
      }
    }
    .nav-menu-main{
      display:flex;
      flex-direction:column;
      align-items:stretch;
      width:calc(var(--sp-u) * 350 / 390);
      padding-top:calc(var(--sp-u) * 30 / 390);
      gap:calc(var(--sp-u) * 20 / 390);
    }
    .nav-menu-main > a:not(.btn){
      display:flex; align-items:center; justify-content:center;
      font-weight:700;
      font-size:calc(var(--sp-u) * 18 / 390);
      line-height:1.4;
      padding:calc(var(--sp-u) * 17 / 390) 0;
      border-bottom:1px solid var(--ink-3);
      text-align:center;
    }
    .nav-menu-main > a:not(.btn)::after{ display:none; }
    .nav-menu-main > a[href="#company"]{ border-bottom:none; }
    .nav-menu-photo{
      display:block;
      width:100%;
      border-radius:calc(var(--sp-u) * 16 / 390);
      overflow:hidden;
      aspect-ratio:350 / 280;
    }
    .nav-menu-photo img{
      width:100%; height:100%;
      object-fit:cover; object-position:center 40%;
    }
    .nav-menu-cta.btn{
      position:relative;
      width:100%;
      justify-content:center;
      font-size:calc(var(--sp-u) * 18 / 390);
      line-height:1.4;
      padding:calc(var(--sp-u) * 12 / 390) calc(var(--sp-u) * 60 / 390);
      gap:0;
      border-radius:calc(var(--sp-u) * 100 / 390);
    }
    .nav-menu-cta.btn::after{
      position:absolute;
      top:50%;
      right:calc(var(--sp-u) * 18 / 390);
      left:auto;
      transform:translateY(-50%);
      width:calc(var(--sp-u) * 9 / 390);
      height:calc(var(--sp-u) * 14 / 390);
    }
    .nav-menu-foot{
      display:flex;
      justify-content:space-between;
      width:calc(var(--sp-u) * 350 / 390);
      margin-top:calc(var(--sp-u) * 20 / 390);
      font-size:calc(var(--sp-u) * 12 / 390);
      font-weight:700;
      line-height:1.6;
    }
    .nav-menu-foot a{
      font-size:calc(var(--sp-u) * 12 / 390);
      line-height:1.6;
    }

    .site-footer{
      padding:calc(var(--sp-u) * 50 / 390) var(--sp-gutter) calc(var(--sp-u) * 22 / 390);
    }
    .site-footer .wrap{
      width:100%;
      padding:0;
      display:flex;
      flex-direction:column;
      align-items:center;
    }
    .footer-top{
      flex-direction:column;
      align-items:center;
      gap:calc(var(--sp-u) * 30 / 390);
      width:100%;
      padding-bottom:calc(var(--sp-u) * 40 / 390);
    }
    .footer-logo img{
      height:calc(var(--sp-u) * 62.273 / 390);
      width:calc(var(--sp-u) * 150 / 390);
    }
    .footer-nav{
      display:grid;
      grid-template-columns:max-content max-content;
      justify-content:space-between;
      width:calc(var(--sp-u) * 280 / 390);
      row-gap:calc(var(--sp-u) * 20 / 390);
      padding:0;
    }
    .footer-nav a{
      font-size:calc(var(--sp-u) * 14 / 390);
      line-height:1.6;
    }
    .footer-nav a:nth-child(1){ grid-column:1; grid-row:1; }
    .footer-nav a:nth-child(2){ grid-column:1; grid-row:2; }
    .footer-nav a:nth-child(3){ grid-column:2; grid-row:1; }
    .footer-nav a:nth-child(4){ grid-column:2; grid-row:2; }
    .footer-nav a::after{
      display:none;
    }
    .footer-bottom{
      flex-direction:column;
      align-items:center;
      gap:calc(var(--sp-u) * 40 / 390);
      width:100%;
      border-top:1px solid #fff;
      padding:calc(var(--sp-u) * 40 / 390) 0 0;
      font-size:calc(var(--sp-u) * 12 / 390);
      line-height:1.6;
    }
    .footer-links{
      order:1;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:calc(var(--sp-u) * 13 / 390);
      width:100%;
    }
    .footer-bottom p{
      order:2;
      text-align:center;
    }
    .footer-links a{
      font-size:calc(var(--sp-u) * 12 / 390);
      line-height:1.6;
    }
  }