/* =====================================================
   Gigaworks 2026 renewal — single stylesheet
   Brand: black #111 / orange #f09018 / green #609030
   ===================================================== */
:root{
  --black:#111111;
  --ink:#1a1a1a;
  --orange:#f09018;
  --orange-dark:#c87410;
  --green:#609030;
  --green-dark:#4a7024;
  --green-light:#eef4e4;
  --bg:#ffffff;
  --bg-sub:#f6f7f4;
  --gray:#5f6560;
  --line:#e2e5e0;
  --radius:8px;
  --container:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);background:var(--bg);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  font-size:16px;line-height:1.8;letter-spacing:.01em;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto}
a{color:var(--green-dark)}
a:hover{color:var(--orange-dark)}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--black);color:#fff;padding:.5em 1em;z-index:100}
.skip-link:focus{left:8px;top:8px;color:#fff}

/* ---------- focus / a11y ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--orange);outline-offset:2px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:.8em 2em;border-radius:var(--radius);
  font-weight:700;font-size:1rem;text-decoration:none;text-align:center;
  border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s;
  min-height:48px;line-height:1.4;
}
.btn-orange{background:var(--orange);color:#fff;border-color:var(--orange)}
.btn-orange:hover{background:var(--orange-dark);color:#fff;border-color:var(--orange-dark)}
.btn-green{background:var(--green);color:#fff;border-color:var(--green)}
.btn-green:hover{background:var(--green-dark);color:#fff;border-color:var(--green-dark)}
.btn-outline{background:#fff;color:var(--black);border-color:var(--black)}
.btn-outline:hover{background:var(--black);color:#fff}
.btn-lg{font-size:1.125rem;padding:1em 2.4em}

/* ---------- header ---------- */
.site-header{
  background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.header-inner{display:flex;align-items:center;gap:16px;padding:10px 20px}
.site-logo{margin:0;flex-shrink:0}
.site-logo img{display:block;height:auto;width:180px}
.global-nav{flex:1;min-width:0;display:flex;justify-content:center}
.global-nav-list{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.global-nav-list a{
  display:block;padding:.7em .55em;white-space:nowrap;text-decoration:none;color:var(--black);
  font-weight:600;font-size:.8125rem;border-radius:4px;
}
.global-nav-list a:hover{color:var(--green-dark)}
.global-nav-list a[aria-current="page"]{color:var(--green-dark);box-shadow:inset 0 -3px 0 var(--green)}
.header-cta{margin:0;flex-shrink:0} .header-cta .btn{font-size:.8125rem;padding:.8em 1.2em;white-space:nowrap}
.nav-toggle{display:none}

/* ---------- hero ---------- */
.hero{background:var(--bg-sub);border-bottom:1px solid var(--line)}
.hero-inner{
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
  padding:56px 20px 64px;
}
.hero h1{
  margin:0 0 .6em;font-size:clamp(1.75rem,4vw,2.6rem);font-weight:800;
  line-height:1.4;color:var(--black);
}
.hero h1 .accent{color:var(--green-dark)}
.hero p{margin:0 0 1.2em;color:var(--ink)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 1.2em}
.hero-notes{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0;padding:0;list-style:none;color:var(--gray);font-size:.9rem}
.hero-notes li::before{content:"✓";color:var(--green);font-weight:700;margin-right:.4em}
.hero-visual{position:relative}
.hero-visual img{
  width:100%;border-radius:var(--radius);display:block;
  border:1px solid var(--line);
}

/* ---------- sections ---------- */
.section{padding:64px 0}
.section-sub{background:var(--bg-sub);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section h2{
  margin:0 0 .8em;font-size:clamp(1.4rem,3vw,2rem);font-weight:800;
  color:var(--black);line-height:1.5;
}
.section h2 .eyebrow{
  display:block;font-size:.85rem;font-weight:700;color:var(--green-dark);
  letter-spacing:.12em;margin-bottom:.4em;
}
.lead{max-width:46em;margin:0 0 2em;font-size:1.05rem}

/* ---------- service cards ---------- */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin:0;padding:0;list-style:none}
.service-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;display:flex;flex-direction:column;gap:.8em;
}
.service-card h3{margin:0;font-size:1.15rem;font-weight:800;color:var(--black)}
.service-card .num{
  display:inline-block;font-weight:800;color:#fff;background:var(--green);
  border-radius:4px;padding:.1em .5em;font-size:.85rem;letter-spacing:.08em;
  align-self:flex-start;
}
.service-card p{margin:0;color:var(--ink);font-size:.95rem;flex:1}
.service-card .btn{align-self:flex-start;font-size:.9rem;padding:.6em 1.4em}
.service-card:nth-child(even) .num{background:var(--orange)}

/* ---------- issue list ---------- */
.issues{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0;list-style:none;margin:0}
.issues li{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);
  border-radius:8px;padding:22px 20px 22px 62px;font-size:.95rem;position:relative;box-shadow:0 3px 12px rgb(17 17 17 / 4%);
}

.issues li::before{
  content:"";position:absolute;left:20px;top:24px;width:26px;height:26px;
  background:var(--green-light);border:1px solid #d6e3c5;border-radius:50%;
}
.issues li::after{
  content:"";position:absolute;left:28px;top:30px;width:9px;height:13px;
  border-right:2px solid var(--green-dark);border-bottom:2px solid var(--green-dark);transform:rotate(45deg);
}

/* ---------- reasons ---------- */
.reasons{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:0;list-style:none;margin:0}
.reasons h3{margin:0 0 .5em;font-size:1.05rem;font-weight:800;color:var(--black)}
.reasons p{margin:0;font-size:.92rem}
.reasons .icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:8px;margin-bottom:.6em;
  background:var(--green-light);color:var(--green-dark);font-weight:800;font-size:1.1rem;
}

/* ---------- work examples ---------- */
.example-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.example-cols h3{margin:0 0 .8em;font-size:1.1rem;font-weight:800;color:var(--black)}
.example-cols h3 span{font-size:.8rem;font-weight:700;color:var(--gray);margin-left:.5em}
.example-cols ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.example-cols li{
  padding:.5em 0 .5em 1.6em;position:relative;border-bottom:1px dashed var(--line);font-size:.95rem;
}
.example-cols li::before{content:"▸";position:absolute;left:0;color:var(--green)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--black);color:#fff;padding:64px 0;text-align:center}
.cta-band h2{color:#fff;margin:0 0 .5em;font-size:clamp(1.4rem,3vw,2rem)}
.cta-band p{max-width:46em;margin:0 auto 1.6em}
.cta-band .btn-orange{font-size:1.125rem}
.cta-band .note{font-size:.85rem;color:#bbb;margin-top:1em}

/* ---------- page hero (subpages) ---------- */
.page-hero{background:var(--black);color:#fff;padding:48px 0}
.page-hero .breadcrumb{margin:0 0 1em;font-size:.85rem;color:#bbb;list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.3em}
.page-hero .breadcrumb li+li::before{content:"›";margin:0 .5em;color:var(--orange)}
.page-hero .breadcrumb a{color:#ddd;text-decoration:none}
.page-hero h1{margin:0 0 .5em;font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:800;line-height:1.5;color:#fff}
.page-hero p{max-width:46em;margin:0;color:#ddd}

/* ---------- tag lists ---------- */
.tag-list{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none;margin:0 0 2em}
.tag-list li{
  background:#fff;border:1px solid var(--line);border-radius:99px;
  padding:.25em 1em;font-size:.85rem;color:var(--ink);
}

/* ---------- content blocks ---------- */
.prose h2{margin:2.5em 0 .8em;font-size:1.4rem;font-weight:800;color:var(--black);border-left:5px solid var(--green);padding-left:.6em}
.prose h2.alert{border-left-color:var(--orange)}
.prose h3{margin:1.8em 0 .5em;font-size:1.1rem;font-weight:700}
.prose p{margin:0 0 1em}
.prose ul{padding-left:1.4em}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px}

/* ---------- table ---------- */
.table{width:100%;border-collapse:collapse;margin:0 0 2em}
.table th,.table td{border:1px solid var(--line);padding:.7em 1em;text-align:left;font-size:.95rem}
.table th{background:var(--bg-sub);font-weight:700}

/* ---------- form ---------- */
.form{max-width:720px}
.form dl{margin:0 0 1.6em;display:grid;grid-template-columns:minmax(200px,max-content) minmax(0,1fr);gap:8px 16px}
.form dt{font-weight:700;padding-top:.4em;white-space:nowrap}
.form dt .req{color:var(--orange);margin-left:.3em;font-weight:800}
.form dd{margin:0;min-width:0}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{
  width:100%;padding:.7em .9em;border:1px solid var(--line);border-radius:6px;
  font-size:1rem;font-family:inherit;background:#fff;
}
.form textarea{min-height:180px}
.form dd .err{color:#c02020;font-size:.88rem;font-weight:700;margin-top:.3em;display:block}
.form-actions{margin-left:216px}
.alert-box{border:2px solid #c02020;background:#fdf2f2;color:#7a1010;padding:1em 1.4em;border-radius:6px;margin:0 0 2em;font-weight:700}

/* ---------- 404 ---------- */
.notfound{text-align:center;padding:96px 20px}
.notfound h1{font-size:4rem;margin:0 0 .3em;color:var(--black)}
.notfound p{margin:0 0 2em}

/* ---------- footer ---------- */
.site-footer{background:var(--black);color:#ccc;padding:48px 0 24px;margin-top:auto}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;padding-bottom:32px;border-bottom:1px solid #333}
.site-footer a{color:#ddd}
.site-footer a:hover{color:var(--orange)}
.footer-about img{display:block;width:200px;height:auto;margin-bottom:1em;padding:10px;background:#fff;border-radius:6px}
.footer-contact{display:grid;gap:4px;margin:0}
.footer-contact div{display:flex;gap:1em}
.footer-contact dt{min-width:4em;font-weight:700;color:#999}
.footer-contact dd{margin:0}
.footer-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.5em}
.footer-copy{text-align:center;margin:24px 0 0;color:#777;font-size:.85rem}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .global-nav{justify-content:flex-end}
  .hero-inner{grid-template-columns:1fr;padding:40px 20px 48px}
  .services-grid{grid-template-columns:1fr}
  .issues{grid-template-columns:1fr 1fr}
  .reasons{grid-template-columns:1fr 1fr}
  .example-cols,.two-col{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .global-nav-list{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--line);flex-direction:column;
    padding:8px 20px 16px;gap:0;
  }
  .global-nav-list.open{display:flex}
  .nav-toggle{
    display:inline-flex;flex-direction:column;gap:4px;background:none;border:0;padding:8px;cursor:pointer;
  }
  .nav-toggle-bar{width:24px;height:3px;background:var(--black);border-radius:2px;display:block}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .form dl{grid-template-columns:1fr}
  .form-actions{margin-left:0}
}
@media (max-width:600px){
  .issues{grid-template-columns:1fr}
  .reasons{grid-template-columns:1fr}
  .section{padding:48px 0}
}

/* 専門領域の相談案内 */
.prose .service-consultation{margin-top:3em;padding:40px 28px;border-radius:12px;text-align:left}
.prose .service-consultation h2{margin:0 0 .7em;padding:0;border:0;color:#fff}
.prose .service-consultation p{max-width:none;margin:0 0 1.2em}
.prose .consultation-points,.home-consultation .consultation-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;list-style:none;margin:24px 0;padding:0}
.consultation-points li{padding:18px;background:#242824;border:1px solid #414b3c;border-radius:8px}
.consultation-points strong{display:block;color:#d3e9b8;margin-bottom:.4em;font-size:1.05rem}
.consultation-points span{display:block;font-size:.9rem;color:#eee}
.consultation-example{padding:18px 20px;border-left:3px solid var(--orange);background:#202020}
.consultation-example strong{display:block;color:#ffba61;margin-bottom:.4em}
.prose .service-consultation .note{margin:16px 0 0;color:#ccc}
@media (max-width:1050px) and (min-width:901px){
  .header-inner{gap:10px}
  .site-logo img{width:150px}

}
@media (max-width:600px){
  .header-inner{gap:8px;padding-left:12px;padding-right:12px}
  .site-logo img{width:100px}
  .prose .service-consultation{padding:28px 20px}
  .prose .consultation-points,.home-consultation .consultation-points{grid-template-columns:1fr}
  .service-consultation .btn{display:block;padding:1em}
}
/* サービスページの無料相談ボタン */
.service-consultation .consultation-action{text-align:center}
/* 会社概要の項目名は一行表示し、本文側で折り返す */
.company-table{table-layout:fixed}
.company-table th{width:11em;white-space:nowrap}
.company-table td{overflow-wrap:anywhere}
.home-consultation{text-align:left}
.home-consultation p{max-width:none;margin:0 0 1.2em}
.home-consultation h2{text-align:center}
@media (max-width:600px){
  .company-table th{width:8.5em}
  .company-table th,.company-table td{padding:.7em .6em}
}