:root{
    --paper:      #FCFBF9;
    --paper-2:    #F5F3EF;
    --sumi:       #17171A;
    --ink-2:      #5E5C58;
    --ink-3:      #8B8880;
    --rule:       #DCD8CF;
    --rule-hair:  #E7E4DC;
    --field:      #FFFFFF;
    --grain:      .55;
    --mark-invert: 0;

    --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    --gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;

    --measure: 640px;
    --frame: 1140px;
    --gutter: clamp(20px, 5vw, 56px);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:     #121213;
      --paper-2:   #191919;
      --sumi:      #F2F0EB;
      --ink-2:     #A5A29A;
      --ink-3:     #77746D;
      --rule:      #32312D;
      --rule-hair: #262521;
      --field:     #1B1B1A;
      --grain:     .32;
      --mark-invert: 1;
    }
  }
  :root[data-theme="dark"]{
    --paper:     #121213;
    --paper-2:   #191919;
    --sumi:      #F2F0EB;
    --ink-2:     #A5A29A;
    --ink-3:     #77746D;
    --rule:      #32312D;
    --rule-hair: #262521;
    --field:     #1B1B1A;
    --grain:     .32;
    --mark-invert: 1;
  }

  *{box-sizing:border-box}
  body{
    margin:0;
    background:var(--paper);
    color:var(--sumi);
    font-family:var(--mincho);
    font-size:16px;
    line-height:2.1;
    letter-spacing:.055em;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  .grain{
    position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--grain);
    background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  }
  .page{position:relative; z-index:1; display:flex; flex-direction:column; min-height:100%}

  a{color:inherit}
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:1px solid var(--sumi); outline-offset:3px;
  }
  img{max-width:100%}

  .frame{width:min(var(--frame), 100%); margin-inline:auto; padding-inline:var(--gutter)}
  .measure{max-width:var(--measure)}

  /* ---------- header ---------- */
  .bar{
    position:sticky; top:env(safe-area-inset-top, 0px); z-index:20;
    background:color-mix(in srgb, var(--paper) 97%, transparent);
    backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid var(--rule-hair);
  }
  .bar-in{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:64px}
  .wordmark{display:flex; align-items:center; gap:12px; text-decoration:none}
  .wordmark img{width:72px; height:auto; display:block; filter:invert(var(--mark-invert))}
  .wordmark span{
    font-family:var(--gothic); font-weight:300; font-size:10.5px;
    letter-spacing:.34em; color:var(--ink-3); padding-top:2px;
  }
  nav.top{display:flex; align-items:center; gap:clamp(13px,2.3vw,30px)}
  nav.top a{
    font-family:var(--gothic); font-weight:400; font-size:12.5px;
    letter-spacing:.14em; color:var(--ink-2); text-decoration:none;
    padding-block:6px; border-bottom:1px solid transparent;
    transition:color .3s ease, border-color .3s ease; white-space:nowrap;
  }
  nav.top a:hover{color:var(--sumi)}
  nav.top a[aria-current="page"]{color:var(--sumi); border-bottom-color:var(--sumi)}
  @media (max-width:430px){ .wordmark span{display:none} nav.top{gap:14px} }

  /* ---------- vertical rail (縦書き) ---------- */
  .rail{
    position:fixed; z-index:15;
    right:clamp(18px, 2.6vw, 40px); top:50%; transform:translateY(-50%);
    display:flex; flex-direction:column; align-items:center; gap:16px; pointer-events:none;
  }
  .rail-label{
    writing-mode:vertical-rl;
    font-family:var(--gothic); font-weight:300;
    font-size:11px; letter-spacing:.42em; color:var(--ink-3);
    transition:opacity .45s ease;
  }
  .rail-track{width:1px; height:132px; background:var(--rule); position:relative; overflow:hidden}
  .rail-track::after{
    content:""; position:absolute; inset:0; background:var(--sumi);
    transform:scaleY(var(--progress,0)); transform-origin:top;
    transition:transform .18s linear;
  }
  @media (max-width:1080px){ .rail{display:none} }

  /* ---------- shared type ---------- */
  .eyebrow{
    font-family:var(--gothic); font-weight:300; font-size:10.5px;
    letter-spacing:.38em; text-transform:uppercase; color:var(--ink-3);
    display:flex; align-items:center; gap:18px; margin:0;
  }
  .eyebrow::after{content:""; height:1px; background:var(--rule); flex:1; max-width:180px}
  .hero-rule{height:1px; background:var(--rule); max-width:var(--measure)}
  p{margin:0 0 1.3em}
  p:last-child{margin-bottom:0}
  .lede{font-size:16.5px; line-height:2.25}
  .muted{color:var(--ink-2)}
  main{flex:1}

  /* ---------- home hero ---------- */
  .hero{padding-block:clamp(60px, 12vh, 124px) clamp(68px, 13vh, 142px)}
  .hero .eyebrow::after{transform-origin:left; animation:draw 1s cubic-bezier(.2,.7,.2,1) both}
  .hero-mark{
    width:clamp(198px, 30vw, 320px); height:auto; display:block;
    margin:clamp(28px,5vw,52px) 0 clamp(26px,4.5vw,44px);
    filter:invert(var(--mark-invert));
  }
  .mission-line{
    font-family:var(--mincho); font-weight:400;
    font-size:clamp(29px, 6vw, 56px);
    letter-spacing:.17em; line-height:1.85; margin:0; text-wrap:balance;
  }
  .en-label{
    font-family:var(--gothic); font-weight:300; font-size:10.5px;
    letter-spacing:.38em; text-transform:uppercase; color:var(--ink-3); margin:0;
  }
  #mission .mission-line{margin:0}
  .mission-body{margin-top:clamp(28px,4.4vw,46px)}
  .hero .hero-rule{margin-top:clamp(40px,7vw,72px); animation:draw 1.3s cubic-bezier(.2,.7,.2,1) .15s both}
  @keyframes draw{from{transform:scaleX(0)} to{transform:scaleX(1)}}
  @media (prefers-reduced-motion:reduce){
    .hero .eyebrow::after,.hero .hero-rule{animation:none}
    *{transition-duration:.001ms !important}
  }

  /* ---------- sub-page head ---------- */
  .p-head{padding-block:clamp(48px,8vw,96px) clamp(30px,4.6vw,52px)}
  .p-title{
    font-family:var(--mincho); font-weight:600; margin:clamp(22px,3.4vw,34px) 0 0;
    font-size:clamp(27px,5vw,44px); letter-spacing:.14em; line-height:1.6;
  }
  .p-lede{margin:clamp(20px,3vw,28px) 0 0; max-width:var(--measure); color:var(--ink-2); font-size:15px; line-height:2.2}
  .p-head .hero-rule{margin-top:clamp(32px,5vw,56px)}

  /* ---------- sections ---------- */
  section{padding-block:clamp(52px, 8.5vw, 108px)}
  section + section{border-top:1px solid var(--rule-hair)}
  .sec-head{display:flex; align-items:baseline; gap:20px; margin-bottom:clamp(28px,4.4vw,52px)}
  .sec-num{
    font-family:var(--gothic); font-weight:300; font-size:10.5px;
    letter-spacing:.3em; color:var(--ink-3); padding-top:2px; font-variant-numeric:tabular-nums;
  }
  h2{font-family:var(--mincho); font-weight:600; margin:0; font-size:clamp(21px,3.3vw,29px); letter-spacing:.11em; line-height:1.6}
  h2 .en{
    display:block; font-family:var(--gothic); font-weight:300;
    font-size:10.5px; letter-spacing:.38em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px;
  }

  /* ---------- services ---------- */
  .svc{display:flex; flex-direction:column; max-width:var(--measure)}
  .svc-item{
    display:block; text-decoration:none; color:inherit;
    padding-block:clamp(26px,3.6vw,38px);
    border-top:1px solid var(--rule-hair);
    transition:padding-left .4s cubic-bezier(.2,.7,.2,1);
  }
  .svc-item:last-child{border-bottom:1px solid var(--rule-hair)}
  .svc-item:hover{padding-left:14px}
  .svc-top{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap}
  .svc-no{font-family:var(--gothic); font-weight:300; font-size:10.5px; letter-spacing:.3em; color:var(--ink-3); text-transform:uppercase}
  .svc-name{font-family:var(--mincho); font-weight:600; font-size:clamp(19px,2.8vw,25px); letter-spacing:.08em; line-height:1.5}
  .svc-body{margin-top:14px; font-size:14px; line-height:2.15; color:var(--ink-2)}
  .svc-go{
    display:inline-flex; align-items:center; gap:10px; margin-top:18px;
    font-family:var(--gothic); font-weight:400; font-size:11.5px;
    letter-spacing:.22em; text-transform:uppercase; color:var(--sumi);
  }
  .svc-go i{display:block; width:34px; height:1px; background:var(--sumi); transition:width .4s cubic-bezier(.2,.7,.2,1)}
  .svc-item:hover .svc-go i{width:54px}

  /* services page: full entries */
  .svc-full + .svc-full{margin-top:clamp(48px,7vw,92px); padding-top:clamp(48px,7vw,92px); border-top:1px solid var(--rule-hair)}
  .svc-full .svc-top{margin-bottom:20px}
  .svc-full .svc-body{max-width:var(--measure); margin-top:0; font-size:15px}

  /* ---------- company table ---------- */
  .corp-only{padding-top:clamp(26px,4vw,52px)}
  dl.corp{margin:0; max-width:var(--measure); border-top:1px solid var(--rule-hair)}
  dl.corp > div{display:grid; grid-template-columns:120px 1fr; gap:0 22px; padding-block:17px; border-bottom:1px solid var(--rule-hair)}
  dl.corp dt{font-family:var(--gothic); font-weight:400; font-size:11.5px; letter-spacing:.2em; color:var(--ink-3); padding-top:4px}
  dl.corp dd{margin:0; font-size:14.5px; line-height:2}
  @media (max-width:480px){ dl.corp > div{grid-template-columns:1fr; gap:4px} }

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:16px;
    padding:17px 30px; text-decoration:none; cursor:pointer;
    border:1px solid var(--sumi); color:var(--sumi); background:transparent;
    font-family:var(--gothic); font-weight:400; font-size:12px;
    letter-spacing:.24em; text-transform:uppercase;
    transition:background .35s ease, color .35s ease;
  }
  .btn i{display:block; width:28px; height:1px; background:currentColor; transition:width .35s ease}
  .btn:hover{background:var(--sumi); color:var(--paper)}
  .btn:hover i{width:40px}
  .btn-row{margin-top:clamp(26px,3.6vw,36px)}

  /* ---------- contact form ---------- */
  form.contact{max-width:var(--measure); margin-top:clamp(12px,2vw,20px)}
  .field{padding-block:clamp(18px,2.6vw,24px); border-top:1px solid var(--rule-hair)}
  .field:first-of-type{border-top:none}
  .field label{
    display:flex; align-items:center; gap:10px; margin-bottom:10px;
    font-family:var(--gothic); font-weight:400; font-size:11.5px;
    letter-spacing:.2em; color:var(--ink-2);
  }
  .req{
    font-family:var(--gothic); font-weight:400; font-size:9.5px; letter-spacing:.16em;
    color:var(--ink-3); border:1px solid var(--rule); padding:2px 7px; line-height:1.6;
  }
  .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea{
    width:100%; background:var(--field); color:var(--sumi);
    border:1px solid var(--rule); border-radius:0;
    font-family:var(--mincho); font-size:15px; line-height:1.9; letter-spacing:.04em;
    padding:12px 14px; transition:border-color .3s ease;
  }
  .field input:focus, .field textarea:focus{border-color:var(--sumi)}
  .field textarea{resize:vertical; min-height:150px}
  .consent{display:flex; align-items:flex-start; gap:12px; padding-block:clamp(20px,3vw,28px); border-top:1px solid var(--rule-hair)}
  .consent input{margin:6px 0 0; width:15px; height:15px; accent-color:var(--sumi); flex:none}
  .consent label{font-size:13.5px; line-height:2; color:var(--ink-2); font-family:var(--mincho); letter-spacing:.05em; margin:0; display:inline}
  .consent a{text-underline-offset:4px}
  .err{
    margin:14px 0 0; font-family:var(--gothic); font-size:12px; letter-spacing:.08em;
    line-height:1.9; color:var(--sumi); border-left:2px solid var(--sumi); padding-left:12px;
  }
  .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
  .proto{
    margin-top:clamp(26px,4vw,36px); padding-top:18px; border-top:1px solid var(--rule-hair);
    font-family:var(--gothic); font-weight:300; font-size:11px; letter-spacing:.12em;
    line-height:2; color:var(--ink-3); max-width:var(--measure);
  }

  /* ---------- legal ---------- */
  .legal{max-width:var(--measure)}
  .legal h3{
    font-family:var(--mincho); font-weight:600; font-size:16.5px; letter-spacing:.12em;
    margin:clamp(40px,5.5vw,60px) 0 18px; padding-top:20px; border-top:1px solid var(--rule-hair);
  }
  .legal h3:first-of-type{margin-top:clamp(20px,3vw,32px)}
  .legal p{font-size:14px; line-height:2.3; color:var(--ink-2)}
  .legal ul{margin:0 0 1.3em; padding-left:1.15em; font-size:14px; line-height:2.3; color:var(--ink-2)}
  .legal li{margin-bottom:.35em}
  .legal li .use{display:block; color:var(--ink-3); font-size:13px}

  /* ---------- thanks ---------- */
  .thanks{padding-block:clamp(70px,13vh,150px)}
  .thanks-mark{width:132px; height:auto; display:block; filter:invert(var(--mark-invert)); margin-bottom:clamp(30px,5vw,48px)}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--rule-hair); padding-block:clamp(40px,6vw,64px)}
  .foot-in{display:flex; flex-wrap:wrap; gap:28px; align-items:flex-end; justify-content:space-between}
  .foot-mark{width:104px; height:auto; display:block; filter:invert(var(--mark-invert)); opacity:.9}
  .foot-nav{display:flex; flex-wrap:wrap; gap:22px}
  .foot-nav a{font-family:var(--gothic); font-weight:400; font-size:11.5px; letter-spacing:.2em; color:var(--ink-2); text-decoration:none}
  .foot-nav a:hover{color:var(--sumi)}
  .copy{
    width:100%; margin:0; padding-top:22px; border-top:1px solid var(--rule-hair);
    font-family:var(--gothic); font-weight:300; font-size:10.5px; letter-spacing:.24em; color:var(--ink-3);
  }

  /* ---------- 404 ---------- */
  .notfound{padding-block:clamp(70px,13vh,150px)}
  .notfound-mark{width:132px; height:auto; display:block; filter:invert(var(--mark-invert)); margin-bottom:clamp(30px,5vw,48px)}