:root{
    --shu:#c0362a;          /* 朱色アクセント */
    --shu-deep:#9c281e;
    --ink:#1b1a18;
    --ink-soft:#4a4843;
    --ink-mute:#7a776f;
    --paper:#faf7f1;
    --paper-2:#f2ede3;
    --rule:#ded7c8;
    --rule-soft:#e8e2d6;
    --serif:"Noto Serif JP",serif;
    --mono:"Roboto Mono",ui-monospace,monospace;
    --maxw:1180px;
    --gutter:clamp(20px,5vw,72px);
  }
  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--serif);
    font-weight:400;
    line-height:1.9;
    font-feature-settings:"palt" 1;
    letter-spacing:.02em;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  ::selection{background:var(--shu);color:#fff;}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}

  .kicker{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--ink-mute);
    font-weight:500;
  }
  .kicker .n{color:var(--shu);}
  .sec-index{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.2em;
    color:var(--shu);
    font-weight:500;
  }

  /* ============ HEADER ============ */
  header.site{
    position:sticky;top:0;z-index:40;
    background:rgba(250,247,241,.9);
    backdrop-filter:saturate(120%) blur(8px);
    border-bottom:1px solid var(--rule);
  }
  header.site .wrap{
    display:flex;align-items:center;justify-content:space-between;
    height:68px;gap:24px;
  }
  .brand{display:flex;align-items:center;gap:12px;min-width:0;}
  .brand .logo-mark{width:18px;height:31px;flex:none;display:block;}
  .brand .txt{display:flex;flex-direction:column;justify-content:center;min-width:0;}
  .brand .jp{font-size:16px;font-weight:600;letter-spacing:.06em;white-space:nowrap;}
  .brand .en{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ink-mute);white-space:nowrap;margin-top:2px;}
  nav.main{display:flex;gap:22px;align-items:center;font-size:13px;letter-spacing:.04em;}
  nav.main a{color:var(--ink-soft);white-space:nowrap;padding:4px 0;border-bottom:1px solid transparent;transition:color .18s,border-color .18s;}
  nav.main a:hover{color:var(--shu);border-color:var(--shu);}

  /* ============ HERO ============ */
  .hero{border-bottom:1px solid var(--rule);}
  .hero .wrap{
    display:grid;grid-template-columns:1fr minmax(240px,320px);
    gap:clamp(28px,5vw,72px);
    padding-top:clamp(48px,7vw,96px);
    padding-bottom:clamp(44px,6vw,84px);
  }
  .hero-main .kicker{margin-bottom:30px;display:block;}
  .hero-copy{
    font-weight:600;
    font-size:clamp(26px,4.2vw,44px);
    line-height:1.6;
    letter-spacing:.01em;
    margin:0 0 32px;
    text-wrap:balance;
  }
  .hero-copy .em{color:var(--shu);}
  .hero-def{
    font-size:15.5px;color:var(--ink-soft);line-height:2.1;
    max-width:46ch;border-left:2px solid var(--shu);
    padding-left:20px;
  }
  .hero-def strong{color:var(--ink);font-weight:600;}

  /* hero aside : 仕事の階段 */
  .hero-aside{
    border-left:1px solid var(--rule);
    padding-left:clamp(20px,3vw,34px);
    align-self:start;
  }
  .hero-aside .al{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:18px;}
  .ladder{margin:0;padding:0;list-style:none;}
  .ladder li{border-bottom:1px solid var(--rule-soft);}
  .ladder li:first-child{border-top:1px solid var(--rule-soft);}
  .ladder a{
    display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:start;
    padding:15px 2px;transition:background .15s;
  }
  .ladder a:hover .t{color:var(--shu);}
  .ladder .no{font-family:var(--mono);font-size:11px;color:var(--shu);letter-spacing:.1em;line-height:1.5;}
  .ladder .mid{display:flex;flex-direction:column;gap:4px;min-width:0;}
  .ladder .t{font-size:14.5px;font-weight:500;letter-spacing:.03em;transition:color .15s;}
  .ladder .ld{font-size:11px;color:var(--ink-mute);letter-spacing:.01em;line-height:1.55;}
  .ladder .s{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);line-height:1.5;}

  /* ============ SECTION base ============ */
  section.block{border-bottom:1px solid var(--rule);}
  .block .wrap{padding-top:clamp(52px,6vw,90px);padding-bottom:clamp(52px,6vw,90px);}
  .sec-head{margin-bottom:clamp(30px,4vw,52px);}
  .sec-head .sec-index{display:block;margin-bottom:14px;}
  .sec-head h2{
    font-size:clamp(21px,2.8vw,30px);font-weight:600;margin:0;letter-spacing:.03em;line-height:1.55;
  }
  .sec-head .lead{margin:18px 0 0;color:var(--ink-soft);font-size:15px;max-width:62ch;line-height:2.05;}

  /* ---- products ---- */
  .prod{
    display:grid;grid-template-columns:minmax(200px,300px) 1fr;
    gap:clamp(24px,4vw,60px);
    padding:clamp(34px,4vw,50px) 0;
    border-top:2px solid var(--ink);
  }
  .prod-side .idx{font-family:var(--mono);font-size:13px;letter-spacing:.16em;color:var(--shu);display:block;margin-bottom:16px;}
  .prod-side h3{font-size:19px;font-weight:600;margin:0 0 10px;line-height:1.55;letter-spacing:.03em;}
  .prod-side .tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);display:inline-block;border:1px solid var(--rule);padding:3px 8px;border-radius:2px;margin-top:4px;}
  .prod-side .free{color:var(--shu);border-color:var(--shu);}
  .prod-body p{margin:0 0 14px;font-size:14.5px;line-height:2.02;color:var(--ink-soft);}
  .prod-body p strong{color:var(--ink);font-weight:600;}
  .prod-body .note{
    background:var(--paper-2);border-left:2px solid var(--shu);
    padding:14px 18px;font-size:13.5px;color:var(--ink-soft);line-height:1.9;margin:0 0 16px;
  }
  .prod-body ul.spec{list-style:none;margin:0 0 16px;padding:0;border-top:1px solid var(--rule-soft);}
  .prod-body ul.spec li{
    display:grid;grid-template-columns:20px 1fr;gap:12px;
    padding:11px 0;border-bottom:1px solid var(--rule-soft);
    font-size:14px;line-height:1.8;color:var(--ink);
  }
  .prod-body ul.spec li::before{content:"";font-family:var(--mono);color:var(--shu);font-size:12px;line-height:inherit;}
  .prod-body ul.spec li:nth-child(1)::before{content:"01";}
  .prod-body ul.spec li:nth-child(2)::before{content:"02";}
  .prod-body ul.spec li:nth-child(3)::before{content:"03";}
  .prod-body ul.spec li:nth-child(4)::before{content:"04";}
  .price{
    display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
    padding-top:8px;border-top:1px solid var(--rule);margin-top:4px;
  }
  .price .plabel{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);}
  .price .pval{font-size:16px;font-weight:600;color:var(--ink);}
  .price .pval.prep{color:var(--ink-mute);font-weight:400;}
  .cta-row{margin-top:18px;display:flex;gap:14px;flex-wrap:wrap;}
  .btn{
    font-family:var(--serif);font-size:14px;font-weight:500;letter-spacing:.04em;
    display:inline-flex;align-items:center;gap:10px;
    padding:11px 22px;border-radius:2px;border:1px solid var(--shu);
    transition:.18s;cursor:pointer;
  }
  .btn .arw{font-family:var(--mono);font-size:12px;}
  .btn-solid{background:var(--shu);color:#fff;}
  .btn-solid:hover{background:var(--shu-deep);border-color:var(--shu-deep);}
  .btn-line{background:transparent;color:var(--shu);}
  .btn-line:hover{background:var(--shu);color:#fff;}

  /* ---- placeholder data frames ---- */
  .dg-label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 10px;}
  .datagrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin:6px 0 12px;}
  .datagrid .cell{background:var(--paper);padding:20px 18px;}
  .datagrid .cell .metric{font-family:var(--mono);font-size:30px;font-weight:500;color:var(--ink-mute);letter-spacing:.02em;line-height:1;}
  .datagrid .cell .metric .u{font-size:16px;}
  .datagrid .cell .cap{font-size:12.5px;color:var(--ink-soft);margin-top:12px;line-height:1.6;}
  .pending-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-mute);}
  .pending-note .dot{color:var(--shu);}

  /* ---- 会社概要 ---- */
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);}
  table.facts{width:100%;border-collapse:collapse;}
  table.facts th,table.facts td{text-align:left;vertical-align:top;padding:15px 0;border-bottom:1px solid var(--rule-soft);font-weight:400;}
  table.facts th{width:34%;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);padding-right:16px;}
  table.facts td{font-size:14.5px;color:var(--ink);line-height:1.8;}
  .about-def{border-left:2px solid var(--shu);padding-left:22px;}
  .about-def p{font-size:15px;line-height:2.1;color:var(--ink-soft);margin:0 0 18px;}
  .about-def p.big{font-size:17px;color:var(--ink);font-weight:500;line-height:1.9;}
  .about-note{font-size:12.5px;color:var(--ink-mute);line-height:1.9;margin-top:18px;}

  /* ---- 代表 ---- */
  .rep{
    display:grid;grid-template-columns:minmax(130px,168px) 1fr;
    gap:clamp(24px,4vw,52px);align-items:start;
    border-top:1px solid var(--rule);
    margin-top:clamp(34px,4vw,50px);
    padding-top:clamp(34px,4vw,50px);
  }
  .rep-photo{
    aspect-ratio:3/4;overflow:hidden;background:var(--paper-2);
    border:1px solid var(--rule);position:relative;
  }
  .rep-photo img{
    width:100%;height:100%;object-fit:cover;display:block;
      }
  .rep-photo .ph{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink-mute);
  }
  .rep-body .rl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:10px;}
  .rep-body .name{font-size:22px;font-weight:600;letter-spacing:.06em;margin:0 0 4px;}
  .rep-body .name .title{font-size:12.5px;font-weight:400;color:var(--ink-mute);margin-right:14px;letter-spacing:.08em;}
  .rep-body p{font-size:14.5px;color:var(--ink-soft);line-height:2.05;margin:16px 0 0;max-width:56ch;}
  .rep-body p.cred{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-mute);border-top:1px solid var(--rule-soft);padding-top:14px;margin-top:20px;max-width:56ch;}
  @media (max-width:640px){.rep{grid-template-columns:1fr;}.rep-photo{max-width:260px;}}

  /* ---- お問い合わせ ---- */
  .contact .wrap{display:grid;grid-template-columns:1fr minmax(260px,380px);gap:clamp(28px,4vw,60px);align-items:end;}
  .contact h2{font-size:clamp(20px,2.6vw,28px);font-weight:600;margin:0 0 16px;letter-spacing:.03em;}
  .contact p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:2;max-width:48ch;}
  .mailbox{border:1px solid var(--rule);border-top:3px solid var(--shu);padding:26px 28px;background:var(--paper-2);}
  .mailbox .l{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);}
  .mailbox a.mail{display:block;font-family:var(--mono);font-size:20px;color:var(--shu);margin-top:12px;letter-spacing:.02em;word-break:break-all;}
  .mailbox .sub{font-size:12.5px;color:var(--ink-mute);margin-top:14px;line-height:1.7;}

  /* ---- footer ---- */
  footer.site{background:var(--ink);color:#cfccc4;}
  footer.site .wrap{
    padding-top:44px;padding-bottom:40px;
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:32px 40px;align-items:start;
  }
  footer .fbrand{min-width:0;}
  footer .fbrand .flogo{display:flex;align-items:center;gap:10px;margin-bottom:2px;}
  footer .fbrand .flogo svg{width:14px;height:24px;flex:none;display:block;}
  footer .fbrand .jp{font-size:15px;font-weight:600;color:#fff;letter-spacing:.06em;}
  footer .fbrand .en{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:#8f8b81;margin-top:6px;}
  footer .fbrand .def{font-size:12.5px;color:#a4a096;margin-top:16px;max-width:42ch;line-height:1.9;}
  footer .fnav{display:flex;flex-direction:column;gap:10px;font-size:12.5px;text-align:right;}
  footer .fnav a{color:#cfccc4;}footer .fnav a:hover{color:#fff;}
  footer .copy{grid-column:1/-1;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#7d7a71;border-top:1px solid #34322d;padding-top:22px;}
  @media (max-width:900px){
    footer.site .wrap{grid-template-columns:1fr;}
    footer .fnav{flex-direction:row;flex-wrap:wrap;text-align:left;}
  }

  /* ============ responsive ============ */
  @media (max-width:900px){
    nav.main{display:none;}
    .hero .wrap{grid-template-columns:1fr;}
    .hero-aside{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:26px;}
    .prod{grid-template-columns:1fr;gap:20px;}
    .datagrid{grid-template-columns:1fr;}
    .about-grid{grid-template-columns:1fr;}
    .contact .wrap{grid-template-columns:1fr;align-items:start;}
  }

  /* ============ multi-page additions ============ */
  nav.main a[aria-current="page"]{color:var(--shu);border-color:var(--shu);}
  .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;margin:-8px -8px -8px 0;color:var(--ink);}
  .nav-toggle svg{display:block;width:24px;height:24px;}

  /* page intro band for sub-pages */
  .page-head{border-bottom:1px solid var(--rule);}
  .page-head .wrap{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(28px,3.4vw,40px);}
  .page-head h1{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.6vw,40px);letter-spacing:.02em;line-height:1.4;margin:12px 0 0;}
  .page-head .lead{margin:16px 0 0;color:var(--ink-soft);font-size:15px;max-width:64ch;line-height:2.05;}

  /* home: four-step overview */
  .steps .wrap{padding-top:clamp(44px,5vw,72px);padding-bottom:clamp(44px,5vw,72px);}
  .steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);}
  .step{background:var(--paper);padding:26px 22px;display:flex;flex-direction:column;min-height:210px;text-decoration:none;color:inherit;transition:background .18s;}
  .step:hover{background:var(--paper-2);}
  .step .no{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--shu);}
  .step .t{font-family:var(--serif);font-size:18px;font-weight:600;margin-top:14px;letter-spacing:.02em;}
  .step .s{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-top:6px;}
  .step .d{font-size:13px;color:var(--ink-soft);line-height:1.9;margin-top:14px;}
  .step .arw{margin-top:auto;padding-top:16px;color:var(--shu);font-size:13px;}
  @media (max-width:900px){.steps-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:520px){.steps-grid{grid-template-columns:1fr;}}

  /* research / news list */
  .newslist{border-top:1px solid var(--rule);margin-top:8px;}
  .news-item{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--rule);}
  .news-item .meta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-mute);}
  .news-item .meta .cat{display:inline-block;margin-top:8px;padding:2px 8px;border:1px solid var(--rule);border-radius:2px;color:var(--ink-soft);}
  .news-item h3{font-family:var(--serif);font-size:17px;font-weight:600;margin:0 0 8px;letter-spacing:.02em;}
  .news-item p{font-size:14px;color:var(--ink-soft);line-height:1.95;margin:0;}
  .news-empty{padding:30px 0;color:var(--ink-mute);font-size:14px;line-height:2;}
  @media (max-width:640px){.news-item{grid-template-columns:1fr;gap:8px;}}

  /* contact form */
  .cform{margin-top:8px;display:grid;gap:20px;max-width:640px;}
  .cform .field{display:flex;flex-direction:column;gap:8px;}
  .cform label{font-size:13px;letter-spacing:.04em;color:var(--ink-soft);}
  .cform label .req{color:var(--shu);margin-left:4px;}
  .cform input,.cform textarea,.cform select{
    font-family:inherit;font-size:15px;color:var(--ink);background:var(--paper);
    border:1px solid var(--rule);border-radius:3px;padding:12px 14px;width:100%;
  }
  .cform textarea{min-height:150px;resize:vertical;}
  .cform input:focus,.cform textarea:focus,.cform select:focus{outline:none;border-color:var(--shu);}
  .cform .hp{position:absolute;left:-9999px;}
  .cform .actions{margin-top:4px;}

  @media (max-width:900px){
    .nav-toggle{display:block;}
    nav.main{
      position:absolute;top:68px;left:0;right:0;display:none;flex-direction:column;gap:0;
      background:var(--paper);border-bottom:1px solid var(--rule);
      padding:6px var(--gutter) 18px;box-shadow:0 12px 24px rgba(0,0,0,.06);
    }
    nav.main.open{display:flex;}
    nav.main a{padding:14px 0;border-bottom:1px solid var(--rule-soft);font-size:15px;}
    nav.main a[aria-current="page"]{border-color:var(--shu);}
  }

  .cform .form-status{min-height:1.2em;margin:0;font-size:13px;color:var(--shu);}

  /* service page: jump to sections */
  .jumpnav{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;}
  .jumpnav a{display:flex;flex-direction:column;gap:5px;color:var(--ink-soft);border:1px solid var(--rule);border-radius:5px;padding:12px 17px;transition:border-color .18s,color .18s;}
  .jumpnav a:hover{border-color:var(--shu);}
  .jumpnav a:hover .hd{color:var(--shu);}
  .jumpnav a .hd{font-size:14px;letter-spacing:.02em;}
  .jumpnav a .hd .n{font-family:var(--mono);color:var(--shu);margin-right:8px;font-size:11px;}
  .jumpnav a .jd{font-size:11px;color:var(--ink-mute);letter-spacing:.02em;}
