body{
    margin:0; font-family:var(--f-body); color:var(--text); background:var(--paper);
    font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  :root :is(h1,h2,h3,h4){font-family:var(--f-head); margin:0; letter-spacing:0; line-height:1.1;} 
  .about .sec-head h2{text-wrap:pretty;} 
  a{color:inherit; text-decoration:none;}
  .hero a:focus-visible, .hero button:focus-visible, .footer a:focus-visible, .cta-final a:focus-visible{outline-color:var(--yellow);}
  .ico{width:24px;height:24px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
  .inner{max-width:calc(var(--container) + 2 * var(--s-3)); margin:0 auto; padding-left:var(--s-3); padding-right:var(--s-3);}
  .section .inner, .cta-final .inner{max-width:calc(var(--container) + 2 * var(--s-3));}

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 28px; border-radius:var(--pill);
    font-family:var(--f-head); font-weight:700; font-size:15px;
    border:1.5px solid transparent; cursor:pointer; min-height:52px;
    transition:background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
  }
  .btn:active{transform:translateY(1px);}
  .btn-outline-invert{background:transparent; color:#fff; border-color:rgba(255,255,255,.45);}
  .btn-outline-invert:hover{background:rgba(255,255,255,.10);}
  .btn-outline{background:transparent; color:var(--navy); border-color:var(--line-strong);}
  .btn-outline:hover{border-color:var(--navy);}

  .header{line-height:1.65;}

  .hero{position:relative; background:var(--ink); color:#fff; overflow:hidden; isolation:isolate;}
  .hero{background-image:url('../../from-jstech/fv.jpg'); background-size:cover; background-position:center;}
  .hero::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(95deg, rgba(14,19,32,.94) 0%, rgba(14,19,32,.82) 42%, rgba(14,19,32,.5) 78%, rgba(14,19,32,.35) 100%);}
  .hero .inner{position:relative; z-index:2; padding-top:var(--s-8); padding-bottom:var(--s-8); min-height:78vh; display:flex; flex-direction:column; justify-content:center;}
  .hero .kicker{font-family:var(--f-head); font-weight:700; font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--yellow); margin-bottom:var(--s-3);}
  .hero h1{
    font-weight:800; font-size:clamp(44px, 9vw, 124px); line-height:.98; letter-spacing:0;
    margin:0 0 var(--s-4);
  }
  .hero h1 .hl{color:var(--yellow);}
  .hero .sub{font-size:clamp(17px,1.6vw,21px); line-height:1.7; color:rgba(255,255,255,.78); max-width:800px; margin-bottom:var(--s-5); word-break:auto-phrase; text-wrap:pretty;}
  .hero .cta{display:flex; gap:var(--s-2); flex-wrap:wrap;}
  @media(max-width:600px){ .hero .cta .cta-pc{display:none;} }

  .section{padding-top:var(--s-7); padding-bottom:var(--s-7);}
  .section.paper-2{background:var(--paper-2);}
  .sec-head{text-align:center; max-width:760px; margin:0 auto var(--s-6);}
  .sec-head .kicker{font-family:var(--f-head); font-weight:700; font-size:12px; letter-spacing:0.14em; color:var(--text-light); margin-bottom:var(--s-2);}
  .sec-head h2{font-weight:800; font-size:clamp(30px,4.4vw,56px); letter-spacing:0;}
  .sec-head p{color:var(--text-mute); margin-top:var(--s-2); font-size:17px;}

  .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-3);}
  .cards > *{min-width:0;}
  .card{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
    padding:var(--s-4); transition:transform 200ms ease, box-shadow 200ms ease;
    display:flex; flex-direction:column; gap:14px;
  }
  .card:hover{transform:translateY(-4px); box-shadow:0 24px 50px rgba(11,18,32,.10);}
  .card .ic{
    width:56px;height:56px;border-radius:var(--r-sm);
    background:var(--yellow); color:var(--navy);
    display:flex;align-items:center;justify-content:center;
  }
  .card .ic .ico{width:28px;height:28px;}
  .card .card-logo{margin-top:auto; padding-top:var(--s-2);}
  .card .card-logo img{height:28px; width:auto; display:block;}
  .card h3{font-size:20px; font-weight:700; letter-spacing:0; line-height:1.5; word-break:auto-phrase;} 
  .card p{color:var(--text-mute); font-size:14.5px; line-height:1.7; font-weight:500;} 
  :root .card .more{margin-top:auto; font-family:var(--f-head); font-weight:700; font-size:14px; color:var(--navy); display:inline-flex; align-items:center; gap:6px;}
  .card:hover .more .ico{transform:translateX(4px); transition:transform 180ms ease;}
  @media(max-width:900px){ .cards{grid-template-columns:1fr 1fr;} }
  @media(max-width:600px){ .cards{grid-template-columns:1fr;} }

  .cta-final{background:var(--ink); color:#fff; padding-top:var(--s-7); padding-bottom:var(--s-7);}
  .cta-final .box{
    background:var(--yellow); color:var(--navy); border-radius:0;
    padding:var(--s-6) var(--s-5); text-align:center;
  }
  .cta-final h2{font-weight:800; font-size:clamp(24px,4vw,48px); letter-spacing:0; margin-bottom:var(--s-2);}
  :root .cta-final p{color:rgba(11,31,68,.78); font-size:17px; margin-bottom:var(--s-4); max-width:560px; margin-left:auto; margin-right:auto;}
  .cta-final .cta{display:flex; gap:var(--s-2); justify-content:center; flex-wrap:wrap;}

  .footer .inner{padding-left:0; padding-right:0;}
  .footer{line-height:1.65;}
  .footer h3{margin-bottom:12px; letter-spacing:0; font-weight:600; line-height:inherit;}

  .sec-head.left{text-align:left; max-width:none; margin:0 0 var(--s-5); display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap;}
  .sec-head.left > div{max-width:var(--w-lede);}
  .sec-head.left h2{font-size:clamp(28px,3.6vw,44px);}
  .sec-head.left .lede{color:var(--text-mute); margin-top:var(--s-2); font-size:16px;}
  .sec-head .more-link{font-family:var(--f-head); font-weight:700; font-size:14px; color:var(--navy); display:inline-flex; align-items:center; gap:6px; margin-top:var(--s-3);}
  .sec-head .more-link:hover{text-decoration:underline; text-decoration-color:var(--yellow);}

  .cards.g4{grid-template-columns:repeat(4,1fr);}
  @media(max-width:1100px){ .cards.g4{grid-template-columns:1fr 1fr;} }
  @media(max-width:560px){ .cards.g4{grid-template-columns:1fr;} }


  .news{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
  .news li{display:flex; align-items:center; gap:var(--s-3); padding:18px 4px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
  .news time{font-family:var(--f-head); font-weight:700; color:var(--text-light); font-size:14px; min-width:96px; font-variant-numeric:tabular-nums;}
  .news a{color:var(--text); font-size:15px;}
  .news a:hover{color:var(--navy); text-decoration:underline; text-decoration-color:var(--yellow);}
  .news-band{padding:var(--s-3) 0; background:var(--paper); border-top:1px solid var(--line);}
  .news-band .inner{display:grid; grid-template-columns:200px 1fr; gap:var(--s-4); align-items:start;}
  .news-band .nb-head{display:flex; flex-direction:column; gap:6px;}
  .news-band .nb-head .ttl{font-family:var(--f-head); font-weight:800; font-size:20px; letter-spacing:0; color:inherit; line-height:inherit; margin:0;}
  .news-band .nb-head a{font-size:13px; color:var(--navy); font-family:var(--f-head); font-weight:700;}
  .news-band .nb-head a:hover{text-decoration:underline; text-decoration-color:var(--yellow);}
  .news.compact{border-top:0;}
  .news.compact li{padding:9px 0;}
  .news.compact li:last-child{border-bottom:0;}
  .news.compact time{font-size:13px; min-width:88px;}
  .news.compact a{font-size:14px;}
  .news .np{font-size:14px; color:var(--text);}
  @media(max-width:760px){ .news-band .inner{grid-template-columns:1fr; gap:var(--s-2);} }

  
  .news-band > .pbNested{max-width:calc(var(--container) + 2 * var(--s-3)); margin:0 auto; padding-left:var(--s-3); padding-right:var(--s-3); display:grid; grid-template-columns:200px 1fr; gap:var(--s-4); align-items:start;}
  .news-band > .pbNested::after{content:none;}
  .news-band .pbWhatsnewTable, .news-band .pbWhatsnewTable tbody{display:block; width:100%;}
  .news-band .pbWhatsnewTable tr{display:flex; align-items:center; gap:var(--s-3); padding:9px 0; border-bottom:1px solid var(--line); flex-wrap:wrap;}
  .news-band .pbWhatsnewTable tr:last-child{border-bottom:0;}
  .news-band .pbWhatsnewTable td{padding:0; border:0; background:none;}
  .news-band .pbWhatsnewTable td:first-child{width:auto !important; min-width:88px; font-family:var(--f-head); font-weight:700; color:var(--text-light); font-size:13px; line-height:1.7; font-variant-numeric:tabular-nums; white-space:nowrap;}
  .news-band .pbWhatsnewTable td:last-child{display:contents;}
  .news-band .pbWhatsnewTable td:last-child a{color:var(--text); font-size:14px; line-height:1.7;}
  .news-band .pbWhatsnewTable td:last-child a:hover{color:var(--navy); text-decoration:underline; text-decoration-color:var(--yellow);}
  
  .news-band .pbWhatsnewTable td:last-child:is(:has(img[src$="/news.png"]), :has(img[src$="/recruit.png"]), :has(img[src$="/service.png"])) img{display:none;}
  .news-band .pbWhatsnewTable td:last-child:has(img[src$="/news.png"])::before{content:"お知らせ";}
  .news-band .pbWhatsnewTable td:last-child:has(img[src$="/recruit.png"])::before{content:"採用";}
  .news-band .pbWhatsnewTable td:last-child:has(img[src$="/service.png"])::before{content:"サービス";}
  .news-band .pbWhatsnewTable td:last-child::before{display:inline-block; font-family:var(--f-body); font-size:12px; font-weight:500; line-height:1.5; padding:4px 12px; color:var(--text-mute); border:1px solid var(--line); border-radius:14px; white-space:nowrap;}
  .news-band .pbWhatsnewTable td:last-child img{height:20px; width:auto;}
  .news-band .pbWhatsnewTable img[src$="/new.png"]{display:none;}
  @media(max-width:760px){ .news-band > .pbNested{grid-template-columns:1fr; gap:var(--s-2);} }
  @media(max-width:900px){ .news-band .pbWhatsnewTable td:last-child a{display:flex; align-items:center; min-height:44px;} }

  .cases{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-3);}
  .case{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform 200ms ease, box-shadow 200ms ease;}
  .case:hover{transform:translateY(-4px); box-shadow:0 24px 50px rgba(11,18,32,.10);}
  .case .thumb{aspect-ratio:16/10; background:var(--paper-2); overflow:hidden;}
  .case .body{padding:var(--s-3); display:flex; flex-direction:column; gap:8px;}
  .case .meta{font-family:var(--f-head); font-weight:700; font-size:12px; letter-spacing:.06em; color:var(--navy);}
  .case .body h3{font-size:17px; font-weight:700;}
  .case .body p{color:var(--text-mute); font-size:14px;}
  @media(max-width:980px){ .cases{grid-template-columns:1fr 1fr;} }
  @media(max-width:560px){ .cases{grid-template-columns:1fr;} }

  .issues{display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s-3);}
  .issues .issue{grid-column:span 2;}
  .issues .issue:nth-child(4){grid-column:1 / span 3;}
  .issues .issue:nth-child(5){grid-column:4 / span 3;}
  .issue{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:var(--s-4); display:flex; flex-direction:column; gap:12px; text-decoration:none; color:var(--text); transition:border-color .15s, box-shadow .15s, transform .15s;}
  .issue:hover{border-color:var(--navy); box-shadow:0 6px 20px rgba(11,31,68,.10); transform:translateY(-2px);}
  .issue:focus-visible{outline:2px solid var(--link); outline-offset:3px;}
  .issue .num{font-family:var(--f-head); font-weight:800; font-size:12px; letter-spacing:.14em; color:var(--navy); background:var(--yellow); align-self:flex-start; padding:4px 12px; border-radius:var(--pill);}
  .issue h3{font-size:19px; font-weight:700; color:var(--text); align-self:flex-start;
           background:linear-gradient(transparent 60%, var(--yellow) 60%);
           padding:0 4px; margin-left:-4px; box-decoration-break:clone; -webkit-box-decoration-break:clone;}
  .issue p{color:var(--text-mute); font-size:14.5px; line-height:1.7; flex:1; font-weight:500;} 
  .issue .more{margin-top:4px; font-family:var(--f-head); font-weight:700; font-size:13px; color:var(--link); display:inline-flex; align-items:center; gap:6px;}
  .issue .more svg{width:15px; height:15px; transition:transform .15s;}
  .issue:hover .more svg{transform:translateX(3px);}
  @media(max-width:900px){ .issues{grid-template-columns:1fr 1fr;} .issues .issue{grid-column:auto;} .issues .issue:nth-child(4){grid-column:auto;} .issues .issue:nth-child(5){grid-column:1 / -1;} }
  @media(max-width:760px){ .issues{grid-template-columns:1fr;} .issues .issue:nth-child(5){grid-column:auto;} }


  .cta-final .actions{display:flex; flex-direction:column; align-items:center; gap:12px;}
  :root .cta-final .sla{font-size:14px; color:rgba(11,31,68,.72); margin:-6px auto var(--s-3);}
  @media(max-width:600px){
    .cta-final .box{padding:var(--s-5) var(--s-3);}
    .cta-final .actions{width:100%;}
    .cta-final .actions .btn{width:100%; justify-content:center;}
  }

  .case .thumb.thumb--ph{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:var(--s-2); text-align:center; border-bottom:1px dashed var(--line);}
  .thumb--ph .ph-tag{font-size:11px; font-weight:600; letter-spacing:.05em; color:var(--text-light); background:var(--paper-2); border:1px solid var(--line); border-radius:0; padding:2px 8px;}
  .thumb--ph .ph-note{font-size:12px; line-height:1.6; color:var(--text-light); max-width:22em;}


  @media (max-width: 760px) {
    .flow.cols-3 { grid-template-columns: 1fr; }
    .flow-step, .flow-body { min-width: 0; }
    .flow-txt, .flow-desc { overflow-wrap: anywhere; }
  }

  @media (max-width: 900px) {
    .crumbs a, .btn-contact, .brand, .jump-nav a, .nb-head a,
    a.more, a.back, a.d-svc, a.tag, a.more-link, .card h2 a {
      display: inline-flex; align-items: center; min-height: 44px;
    }
    .footer a, .toc a, .sitemap-list a, .news-row a, .news li a {
      display: flex; align-items: center; min-height: 44px;
    }
  }

:root .section, :root .cta-final { padding-left: 0; padding-right: 0; } 
:root .brand { gap: normal; font-family: var(--f-body); font-weight: 400; color: inherit; } 
:root .brand-logo, :root .brand-logo--footer { max-width: none; }
:root .btn { justify-content: normal; }
:root .sec-head h2 { color: inherit; }
:root .card h3 { color: inherit; }
h3 { font-weight: 700; }
:root .lede { line-height: inherit; }
:root .card a.more::after { content: none; } 

  
  .section{padding-top:var(--s-6); padding-bottom:var(--s-6);}
  .sec-head{padding-top:28px;}
  .sec-head.left{margin:0 0 var(--s-4);}
  .about{padding-top:var(--s-5); padding-bottom:var(--s-5);}
  .about .sec-head.left{margin-bottom:0;}
  .cta-final{padding-top:var(--s-6); padding-bottom:var(--s-6);}
  @media(max-width:760px){
    .section{padding-top:var(--s-5); padding-bottom:var(--s-5);}
    .about{padding-top:var(--s-4); padding-bottom:var(--s-4);}
  }

  
  .case-rows { display:flex; flex-direction:column; border-top:1px solid var(--line); }
  .case-row { display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:center;
              padding:20px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
  a.case-row:hover { background:rgba(11,31,68,.03); text-decoration:none; }
  .case-row .thumb { background:#fff; border:1px solid var(--line); aspect-ratio:16/9;
                     display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .case-row .thumb img { width:100%; height:100%; object-fit:contain; padding:10% 14%; box-sizing:border-box; }
  .case-row .meta { font-size:12px; color:var(--text-light); margin:0 0 4px; }
  .case-row h3 { font-family:var(--f-head); font-size:17px; font-weight:700; color:var(--navy); line-height:1.6; margin:0; }
  .case-row .desc { font-size:13px; color:var(--text-mute); margin:6px 0 0; line-height:1.7; }
  .case-row .svc-more { margin-top:8px; display:inline-flex; align-items:center; gap:4px;
                        font-size:12px; font-weight:600; color:var(--link); }
  @media (max-width:700px){
    .case-row { grid-template-columns:110px 1fr; gap:14px; padding:16px 0; }
    .case-row h3 { font-size:15px; }
    .case-row .desc { display:none; }
  }
  .case-row .thumb--ec { background:#fff; padding:0; }
  .case-row .thumb--ec img { width:100%; height:100%; object-fit:cover; padding:0; display:block; }