:root{
    --paper:#fafafa;
    --ink:#0a0a0a;
    --ink-2:#5c5c5c;
    --hair:#d8d8d8;
    --hair-dk:#333;
    --gothic:"Gen Interface JP Display","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
    --serif:var(--gothic);
    --mincho:var(--gothic);
    --mono:var(--gothic);
    --gap:clamp(1.4rem,4vw,3.2rem);
    --edge:clamp(1.2rem,4vw,4rem);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  #about,#business,#news{scroll-margin-top:4.5rem}
  body{background:var(--paper);color:var(--ink);font-family:var(--mincho);line-height:1.7;overflow-x:hidden}
  a{color:inherit;text-decoration:none}

  .mono{font-family:var(--mono);font-weight:400}
  .label{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
  .bracket::before{content:"[ "}.bracket::after{content:" ]"}

  /* ---------- header ---------- */
  header{position:fixed;top:0;left:0;width:100%;z-index:100;
    display:flex;justify-content:space-between;align-items:center;
    padding:1.35rem var(--edge);mix-blend-mode:difference;color:#fff}
  .brand{font-family:var(--mono);font-size:.82rem;letter-spacing:.14em;display:flex;align-items:center;gap:.6rem}
  .brand .mk{width:15px;height:15px;border:1px solid #fff;border-radius:50%;position:relative;display:inline-block}
  .brand .mk::before,.brand .mk::after{content:"";position:absolute;background:#fff}
  .brand .mk::before{left:50%;top:3px;bottom:3px;width:1px;transform:translateX(-.5px)}
  .brand .mk::after{top:50%;left:3px;right:3px;height:1px;transform:translateY(-.5px)}
  nav{display:flex;gap:clamp(1rem,2.4vw,2.4rem)}
  nav a{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;opacity:.85;transition:opacity .3s}
  nav a:hover{opacity:1}
  @media(max-width:720px){.main-nav{display:none}}

  /* header nav — animated underline + scroll-spy active state */
  .main-nav a{position:relative;opacity:.7}
  .main-nav a::after{content:"";position:absolute;left:0;bottom:-5px;height:1px;width:100%;
    background:currentColor;transform:scaleX(0);transform-origin:left;
    transition:transform .45s cubic-bezier(.22,.61,.36,1)}
  .main-nav a:hover{opacity:1}
  .main-nav a:hover::after,.main-nav a.active::after{transform:scaleX(1)}
  .main-nav a.active{opacity:1}

  /* header stays clean while the drawer is open (over the dark panel) */
  body.nav-open header{mix-blend-mode:normal;background:transparent!important;
    border-color:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--paper)}

  /* ---------- hamburger toggle (morphs to X) ---------- */
  .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;color:inherit}
  .nav-toggle .bar{display:block;width:26px;height:1.5px;background:currentColor;margin:5.5px 0;
    transition:transform .45s cubic-bezier(.6,.05,.2,.95),opacity .25s ease}
  .nav-toggle.is-open .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.is-open .bar:nth-child(2){opacity:0;transform:scaleX(.3)}
  .nav-toggle.is-open .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  @media(max-width:720px){.nav-toggle{display:block}}

  /* ---------- backdrop ---------- */
  .backdrop{position:fixed;inset:0;z-index:80;background:rgba(10,10,10,.42);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}
  .backdrop.is-open{opacity:1;visibility:visible}

  /* ---------- mobile drawer (right slide-in) ---------- */
  .drawer{position:fixed;top:0;right:0;height:100%;width:min(84vw,360px);z-index:90;
    background:var(--ink);color:var(--paper);display:flex;flex-direction:column;
    padding:5.8rem var(--edge) 2.4rem;box-shadow:-34px 0 70px rgba(0,0,0,.4);
    transform:translateX(100%);visibility:hidden;
    transition:transform .62s cubic-bezier(.16,1,.3,1),visibility .62s}
  .drawer.is-open{transform:none;visibility:visible}
  .drawer-kick{font-family:var(--mono);font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;
    color:#8f8f8f;padding-bottom:1.5rem;margin-bottom:.3rem;border-bottom:1px solid var(--hair-dk);
    opacity:0;transform:translateY(-6px);transition:opacity .5s ease,transform .5s ease}
  .drawer.is-open .drawer-kick{opacity:1;transform:none;transition-delay:.14s}
  .drawer nav{display:flex;flex-direction:column;gap:0}
  .drawer nav a{position:relative;display:flex;align-items:baseline;gap:1rem;
    font-family:var(--mono);font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--paper);padding:1.15rem 0;border-bottom:1px solid var(--hair-dk);
    opacity:0;transform:translateX(30px);
    transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1)}
  .drawer nav a .mi{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:#7d7d7d;min-width:1.8em}
  .drawer nav a::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
    background:var(--paper);transform:scaleX(0);transform-origin:left;
    transition:transform .5s cubic-bezier(.22,.61,.36,1)}
  .drawer nav a:hover,.drawer nav a.active{color:#fff}
  .drawer nav a:hover::after,.drawer nav a.active::after{transform:scaleX(1)}
  .drawer.is-open nav a{opacity:1;transform:none}
  .drawer.is-open nav a:nth-child(1){transition-delay:.18s}
  .drawer.is-open nav a:nth-child(2){transition-delay:.24s}
  .drawer.is-open nav a:nth-child(3){transition-delay:.30s}
  .drawer.is-open nav a:nth-child(4){transition-delay:.36s}
  .drawer.is-open nav a:nth-child(5){transition-delay:.42s}
  .drawer-foot{margin-top:auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
    line-height:1.9;color:#8f8f8f;opacity:0;transition:opacity .6s ease}
  .drawer.is-open .drawer-foot{opacity:1;transition-delay:.5s}
  body.nav-open{overflow:hidden}
  @media(min-width:721px){.drawer,.backdrop,.nav-toggle{display:none!important}}

  /* ---------- logo assets ---------- */
  .mark{height:23px;width:auto;display:block}
  .mark path{fill:currentColor}
  .hero-logo{display:block;margin-bottom:1.8rem}
  .hero-logo svg{width:min(90vw,1180px);height:auto;display:block}
  .hero-logo path{fill:currentColor}
  .foot-logo{border-bottom:1px solid var(--ink);padding-bottom:1.4rem}
  .foot-logo svg{width:min(62vw,620px);height:auto;display:block}
  .foot-logo path{fill:currentColor}

  /* ---------- scroll reveal ---------- */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
  .reveal.is-visible{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .rv,.reveal{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
    .drawer,.backdrop,.drawer *,.nav-toggle .bar,.main-nav a::after{transition:none!important}
    .drawer nav a,.drawer-kick,.drawer-foot{opacity:1!important;transform:none!important}
  }

  /* ---------- header scroll state ---------- */
  header{transition:background .4s ease,color .4s ease,border-color .4s ease}
  header.scrolled{mix-blend-mode:normal;background:rgba(250,250,250,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);border-bottom:1px solid var(--hair)}

  /* ---------- hero ---------- */
  .hero{min-height:100vh;background:var(--ink);color:var(--paper);position:relative;
    display:flex;flex-direction:column;justify-content:flex-end;padding:var(--edge);overflow:hidden}
  .hero::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1.4px);
    background-size:13px 13px;
    -webkit-mask-image:radial-gradient(120% 90% at 78% 18%,#000 0%,transparent 62%);
    mask-image:radial-gradient(120% 90% at 78% 18%,#000 0%,transparent 62%)}
  .hero-top{position:absolute;top:clamp(6rem,14vh,10rem);left:var(--edge);right:var(--edge)}
  .hero-top .kick{font-family:var(--mono);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:#8f8f8f}
  .hero-word{font-family:var(--serif);font-weight:400;font-size:clamp(5.5rem,24vw,22rem);
    line-height:.82;letter-spacing:-.02em;margin-bottom:.12em;
    font-variation-settings:"opsz" 144}
  .hero-word em{font-style:italic;font-weight:300}
  .hero-sub{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5rem;
    border-top:1px solid var(--hair-dk);padding-top:1.4rem}
  .hero-tag{font-family:var(--mincho);font-weight:400;font-size:clamp(.95rem,1.5vw,1.15rem);max-width:34ch;color:#e6e6e6}
  .hero-tag b{font-weight:400;border-bottom:1px solid currentColor;padding-bottom:.08em}
  .hero-idx{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;color:#8f8f8f;white-space:nowrap}

  /* reveal */
  .rv{opacity:0;transform:translateY(28px);animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards}
  .d1{animation-delay:.15s}.d2{animation-delay:.35s}.d3{animation-delay:.55s}.d4{animation-delay:.75s}
  @keyframes rise{to{opacity:1;transform:none}}

  /* ---------- section frame ---------- */
  section.blk{padding:clamp(4rem,10vh,9rem) var(--edge)}
  .sec-head{display:flex;justify-content:space-between;align-items:baseline;
    border-bottom:1px solid var(--ink);padding-bottom:1rem;margin-bottom:clamp(2.5rem,6vh,5rem)}
  .sec-head h2{font-family:var(--mincho);font-weight:400;font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:.04em}
  .sec-no{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--ink-2)}

  /* ---------- numbers ---------- */
  .nums{display:grid;grid-template-columns:repeat(3,1fr)}
  .nums .n{border-top:1px solid var(--hair);padding:2.2rem 1.6rem 2.2rem 0}
  .nums .n:nth-child(-n+3){border-top:none}
  .num-fig{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,6.5vw,5.6rem);line-height:.9;letter-spacing:-.02em}
  .num-fig s{font-family:var(--mincho);text-decoration:none;font-size:.4em;font-weight:400;margin-left:.18em;letter-spacing:.02em}
  .num-cap{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-2);margin-top:1rem;line-height:1.55}
  @media(max-width:820px){.nums{grid-template-columns:repeat(2,1fr)}.nums .n:nth-child(-n+3){border-top:1px solid var(--hair)}.nums .n:nth-child(-n+2){border-top:none}}
  @media(max-width:520px){.nums{grid-template-columns:1fr}.nums .n{border-top:1px solid var(--hair)!important}.nums .n:first-child{border-top:none!important}}

  /* ---------- vision ---------- */
  .vision .v-kick{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);margin-bottom:clamp(2rem,5vh,3.5rem)}
  .vision .v-lead{font-size:clamp(1.8rem,4.4vw,3.5rem);line-height:1.42;letter-spacing:.01em;margin-bottom:1.7rem}
  .vision .v-body{font-size:clamp(1rem,1.4vw,1.2rem);line-height:2;max-width:54ch;color:var(--ink)}

  /* ---------- company ---------- */
  .company{display:block}
  .company .lede{font-family:var(--mincho);font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.95;font-weight:400}
  dl.spec{border-top:1px solid var(--ink)}
  dl.spec .row{display:grid;grid-template-columns:9rem 1fr;gap:1rem;
    border-bottom:1px solid var(--hair);padding:1.05rem 0}
  dl.spec dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding-top:.15em}
  dl.spec dd{font-family:var(--mincho);font-size:.98rem}
  @media(max-width:720px){.company{grid-template-columns:1fr}dl.spec .row{grid-template-columns:7rem 1fr}}

  /* ---------- business ---------- */
  .biz a.row{display:grid;grid-template-columns:5.5rem minmax(0,1fr) minmax(0,1.1fr);gap:var(--gap);
    align-items:baseline;border-top:1px solid var(--hair);padding:2rem 0;transition:padding .4s ease,background .4s}
  .biz a.row:first-child{border-top:1px solid var(--ink)}
  .biz a.row:hover{padding-left:1.2rem}
  .biz .bno{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;color:var(--ink-2)}
  .biz .bname{font-family:var(--mincho);font-weight:400;font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.15}
  .biz .bname .en{font-family:var(--mono);font-style:normal;font-weight:400;display:block;font-size:.42em;color:var(--ink-2);letter-spacing:.14em;margin-top:.55em;text-transform:uppercase}
  .biz .bdesc{font-family:var(--mono);font-size:.74rem;line-height:1.7;color:var(--ink-2);letter-spacing:.03em}
  .biz .arw{grid-column:1/-1;display:none}
  @media(max-width:720px){.biz a.row{grid-template-columns:3rem 1fr}.biz .bdesc{grid-column:2/3}}

  /* ---------- trust (inverted) ---------- */
  .trust{background:var(--ink);color:var(--paper)}
  .trust .sec-head{border-color:var(--hair-dk)}
  .trust .sec-head h2{color:var(--paper)}
  .trust .sec-no{color:#8f8f8f}
  .trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
  .trust-grid .tcol .label{color:#8f8f8f;display:block;margin-bottom:1.3rem}
  .trust-grid ul{list-style:none}
  .trust-grid li{font-family:var(--mincho);font-size:clamp(1.1rem,2vw,1.5rem);padding:.55rem 0;border-bottom:1px solid var(--hair-dk)}
  .trust-grid li s{text-decoration:none;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:#8f8f8f;display:block;margin-top:.1rem}
  @media(max-width:640px){.trust-grid{grid-template-columns:1fr;gap:2.6rem}}

  /* ---------- news ---------- */
  .news a.nrow{display:grid;grid-template-columns:6.5rem minmax(0,1fr) auto;gap:var(--gap);
    align-items:baseline;border-top:1px solid var(--hair);padding:1.5rem 0;transition:padding .4s ease}
  .news a.nrow:first-child{border-top:1px solid var(--ink)}
  .news a.nrow:hover{padding-left:1.1rem}
  .news .ndate{font-family:var(--mono);font-size:.82rem;letter-spacing:.1em;color:var(--ink-2)}
  .news .nhead{font-size:clamp(1rem,1.7vw,1.3rem);line-height:1.5}
  .news .ntag{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-2);border:1px solid var(--hair);border-radius:100px;padding:.3em .9em;white-space:nowrap}
  @media(max-width:640px){.news a.nrow{grid-template-columns:4.5rem 1fr}.news .ntag{display:none}}

  /* ---------- footer ---------- */
  footer{padding:clamp(3rem,7vh,5rem) var(--edge) 2.5rem}
  .foot-word{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,13vw,9rem);line-height:.9;letter-spacing:-.02em;border-bottom:1px solid var(--ink);padding-bottom:.6rem}
  .foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;margin-top:2rem}
  .foot-links{display:flex;flex-wrap:wrap;gap:1.6rem}
  .foot-links a,.foot-meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--ink-2);text-transform:uppercase}
  .foot-links a{border-bottom:1px solid transparent;transition:border-color .3s;padding-bottom:2px}
  .foot-links a:hover{border-color:var(--ink-2)}

  .note{position:fixed;bottom:0;left:0;z-index:60;background:var(--ink);color:var(--paper);
    font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;padding:.4rem .7rem;text-transform:uppercase}