/* 2026-08-09 common visual / responsive / accessibility enhancement */
  :root{
    --n500:#5F6E7B;
    --acc-ink:#76530F;
    --slot:#697681;
    --visual-line:rgba(28,104,174,.18);
    --visual-glow:rgba(28,104,174,.09);
  }
  html{scroll-padding-top:82px}
  main{display:block}
  .skip-link{position:fixed;left:12px;top:10px;z-index:1000;padding:10px 14px;
    background:var(--b900);color:#fff;font-size:13px;font-weight:700;text-decoration:none;
    transform:translateY(-150%);transition:transform .2s ease}
  .skip-link:focus{transform:none}

  .nav .wrap{position:relative}
  .nav-toggle{display:none;width:42px;height:42px;padding:0;border:1px solid var(--n300);
    background:#fff;color:var(--n900);cursor:pointer;align-items:center;justify-content:center;
    flex-direction:column;gap:5px;flex:none}
  .nav-toggle span{display:block;width:18px;height:1.5px;background:currentColor;
    transition:transform .22s ease,opacity .18s ease}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .mobile-nav-panel{position:absolute;top:100%;left:0;right:0;z-index:53;background:#fff;
    border-top:1px solid var(--n300);border-bottom:1px solid var(--n300);
    box-shadow:0 22px 42px rgba(11,42,70,.18);max-height:calc(100vh - 62px);overflow:auto}
  .mobile-nav-panel[hidden],.mobile-nav-backdrop[hidden]{display:none}
  .mobile-nav-panel ul{display:grid!important;list-style:none;margin:0;padding:12px var(--pad) 18px;gap:0}
  .mobile-nav-panel li{border-bottom:1px solid var(--n300)}
  .mobile-nav-panel a{display:flex;align-items:center;justify-content:space-between;min-height:54px;
    text-decoration:none;color:var(--n900);font-size:14px;font-weight:700;letter-spacing:.02em}
  .mobile-nav-panel a::after{content:"→";font-family:var(--mono);color:var(--b600)}
  .mobile-nav-backdrop{position:fixed;inset:0;z-index:49;background:rgba(11,42,70,.42);
    border:0;padding:0;cursor:pointer}
  body.nav-open{overflow:hidden}

  .visual-section{position:relative;isolation:isolate}
  .visual-section::before{content:"";position:absolute;left:0;top:0;width:clamp(72px,11vw,170px);
    height:2px;background:linear-gradient(90deg,var(--b600),var(--acc));opacity:.82}
  .visual-section::after{content:"";position:absolute;z-index:-1;right:-12vw;top:8%;width:34vw;
    height:34vw;max-width:520px;max-height:520px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,var(--visual-glow),transparent 68%)}
  .band-deep.visual-section::after{background:radial-gradient(circle,rgba(227,169,53,.08),transparent 68%)}
  .viz-scroll{position:relative;margin:clamp(20px,3vw,36px) 0;padding:clamp(12px,2vw,22px);
    border:1px solid var(--visual-line);background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(238,245,252,.62));
    box-shadow:0 18px 44px rgba(11,42,70,.08);overflow-x:auto;overscroll-behavior-inline:contain;
    scrollbar-color:var(--b400) var(--n100);scrollbar-width:thin}
  .viz-scroll::before{content:"";position:absolute;left:0;top:0;width:58px;height:3px;
    background:linear-gradient(90deg,var(--b600),var(--acc))}
  .viz-scroll>svg{display:block;margin-left:auto!important;margin-right:auto!important}
  .band-deep .viz-scroll{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.16);
    box-shadow:0 18px 44px rgba(0,0,0,.14)}
  .band-deep .viz-scroll::before{background:var(--acc)}

  .work,.svc4>a,.idx-card,.member,.col,.step,.case,.card,.tile,.faq details{
    transition:transform .28s cubic-bezier(.2,.75,.25,1),box-shadow .28s ease,border-color .28s ease}
  .work:hover,.svc4>a:hover,.idx-card:hover,.member:hover,.col:hover,.step:hover,.case:hover,.card:hover,.tile:hover{
    transform:translateY(-4px);box-shadow:0 18px 36px rgba(11,42,70,.10);border-color:rgba(28,104,174,.45)}
  .page-privacy .legal{background:#fff;border:1px solid var(--n300);padding:clamp(20px,4vw,48px);
    box-shadow:0 18px 44px rgba(11,42,70,.06)}
  .page-diagnosis .quizbox,.page-diagnosis .result{box-shadow:0 20px 50px rgba(11,42,70,.10)}
  /* 2026-08-09 追記：後から作った3ページを、同じ性格の既存ページに揃える
     ・記事本文（.artbody）  ← プライバシーの .legal と同じ「長文＋右に目次」
     ・問い合わせフォーム（.cform） ← 診断の .quizbox と同じ「入力する箱」 */
  .page-column-article .artbody{background:#fff;border:1px solid var(--n300);
    padding:clamp(20px,4vw,48px);box-shadow:0 18px 44px rgba(11,42,70,.06)}
  .page-contact .cform{box-shadow:0 20px 50px rgba(11,42,70,.10)}
  .page-works .thumb img,.page-about picture img{transition:transform .55s cubic-bezier(.2,.75,.25,1)}
  .page-works .work:hover .thumb img,.page-about picture:hover img{transform:scale(1.025)}

  @media (max-width:1000px){
    .nav .wrap{gap:10px}
    .nav-toggle{display:inline-flex}
    .nav .nav-cta{padding:8px 10px;font-size:11.5px}
    .logo img{height:27px}
  }
  @media (max-width:760px){
    html{scroll-padding-top:70px}
    .visual-section::after{width:76vw;height:76vw;right:-42vw}
    .viz-scroll{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);
      padding:14px var(--pad);border-left:0;border-right:0;border-radius:0}
    .viz-scroll>svg.fig{min-width:760px;max-width:none!important}
    .viz-scroll>svg.chart{min-width:620px;max-width:none!important}
    .mobile-nav-panel{left:calc(var(--pad) * -1);right:calc(var(--pad) * -1)}
  }
  @media (max-width:430px){
    .nav .nav-cta{font-size:0;min-width:42px;min-height:42px;justify-content:center;padding:8px}
    .nav .nav-cta .ic{width:18px;height:18px}
  }
  @media (prefers-reduced-motion:reduce){
    .nav-toggle span,.work,.svc4>a,.idx-card,.member,.col,.step,.case,.card,.tile,
    .page-works .thumb img,.page-about picture img{transition:none!important}
    .work:hover,.svc4>a:hover,.idx-card:hover,.member:hover,.col:hover,.step:hover,.case:hover,.card:hover,.tile:hover,
    .page-works .work:hover .thumb img,.page-about picture:hover img{transform:none!important}
  }