@charset "utf-8";
/* ==========================================================================
   GENBA Gate 製品ページ
   カラーは GENBA IQ と同じ現場ブランドのパレット（docs/genba-gate/brand.md）
   ========================================================================== */

:root{
  --gg-primary:#5BBFDE;
  --gg-secondary:#8DC63F;
  --gg-accent:#F7941D;
  --gg-dark:#0d1117;
  --gg-dark2:#151d29;
  --gg-txt:#1f2937;
  --gg-sub:#4b5563;
  --gg-mute:#6b7280;
  --gg-bgl:#F8FAFB;
  --gg-line:#e3e8ef;
  --gg-grad:linear-gradient(135deg,#5BBFDE,#8DC63F);
  /* 白文字でAAを満たす濃いめのグラデーション（明るい方は白文字だと2.1:1しかない） */
  --gg-grad-deep:linear-gradient(135deg,#1a6f8f,#4a7d1e);
}

.gg *{box-sizing:border-box}
.gg{
  font-family:'M PLUS 1','Noto Sans JP',sans-serif;
  color:var(--gg-txt);
  line-height:1.9;
  /* 本文は通常の折り返し。禁則だけ厳格にする */
  overflow-wrap:break-word;
  line-break:strict;
}
.gg img{max-width:100%;height:auto;display:block}
.gg small{display:inline;font-size:inherit;margin:0}
.gg a{color:inherit;text-decoration:none}
.gg-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.gg-nw{white-space:nowrap}

/* --- セクション見出し ------------------------------------------------- */
.gg-sec{padding:88px 0}
.gg-sec--alt{background:var(--gg-bgl)}
.gg-lbl{
  display:block;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:#1f6a86;margin-bottom:12px;
}
.gg-h2{
  word-break:keep-all;
  font-size:clamp(25px,3.4vw,38px);font-weight:800;line-height:1.45;
  letter-spacing:.01em;margin:0 0 18px;color:var(--gg-txt);
}
.gg-h2 em{font-style:normal;color:#1f6a86}
.gg-lead{font-size:16px;color:var(--gg-sub);margin:0 0 46px;max-width:760px}

/* --- ヒーロー ---------------------------------------------------------- */
.gg-hero{position:relative;background:var(--gg-dark);color:#fff;overflow:hidden}
.gg-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.34}
.gg-hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(13,17,23,.97) 0%,rgba(13,17,23,.9) 46%,rgba(13,17,23,.5) 100%);
}
.gg-hero__inner{position:relative;padding:96px 0 88px;display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
.gg-hero__badge{
  display:inline-flex;align-items:center;gap:8px;background:rgba(141,198,63,.16);
  border:1px solid rgba(141,198,63,.5);border-radius:24px;padding:7px 17px;
  font-size:12.5px;font-weight:700;color:#a9d96a;margin-bottom:22px;letter-spacing:.04em;
}
.gg-hero__h1{word-break:keep-all;font-size:clamp(30px,4.6vw,50px);font-weight:800;line-height:1.34;margin:0 0 22px;letter-spacing:.005em}
.gg-hero__h1 em{font-style:normal;color:#8DC63F}
.gg-hero__cat{
  font-size:14px;font-weight:700;letter-spacing:.02em;color:#9ad7ec;
  margin:0 0 18px;word-break:keep-all;
}
.gg-hero__p{font-size:16px;line-height:2;color:#d3dae4;margin:0 0 32px;max-width:560px}
.gg-hero__btns{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:40px}
.gg-btn{
  display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:50px;
  font-weight:700;font-size:14.5px;transition:transform .18s,box-shadow .18s,background .18s;
}
.gg-btn:hover{transform:translateY(-2px)}
.gg a.gg-btn--p{background:var(--gg-grad-deep);color:#fff;box-shadow:0 6px 22px rgba(26,111,143,.42)}
.gg a.gg-btn--o{border:1.5px solid rgba(255,255,255,.5);color:#fff}
.gg-btn--o:hover{background:rgba(255,255,255,.1)}
.gg a.gg-btn--d{background:var(--gg-txt);color:#fff}
.gg-hero__stats{display:flex;flex-wrap:wrap;gap:34px}
.gg-hstat{display:flex;flex-direction:column}
.gg-hstat__n{
  display:block;font-family:'Montserrat',sans-serif;font-size:32px;font-weight:800;
  line-height:1.2;color:#8DC63F;white-space:nowrap;
}
.gg-hstat__n small{display:inline;font-size:15px;font-weight:700;margin:0 0 0 3px}
.gg-hstat__l{font-size:12.5px;color:#aab4c2;letter-spacing:.04em;white-space:nowrap}
.gg-hero__vis{position:relative}
.gg-hero__vis img{border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.5)}

/* --- 課題カード -------------------------------------------------------- */
.gg-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.gg-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.gg-card{
  background:#fff;border:1px solid var(--gg-line);border-radius:12px;padding:30px 26px;
  border-top:3px solid var(--gg-primary);
}
.gg-card--g{border-top-color:var(--gg-secondary)}
.gg-card--a{border-top-color:var(--gg-accent)}
.gg-card__ico{
  width:46px;height:46px;border-radius:11px;background:#eaf6fb;color:#1f6a86;
  display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px;
}
.gg-card--g .gg-card__ico{background:#f0f7e6;color:#5d8a1f}
.gg-card--a .gg-card__ico{background:#fdf1e0;color:#a8620a}
.gg-card__t{word-break:keep-all;font-size:17px;font-weight:700;margin:0 0 10px;line-height:1.6}
.gg-card__p{font-size:14px;color:var(--gg-sub);margin:0;line-height:1.95}

/* --- 仕組み（3ステップ） ---------------------------------------------- */
.gg-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:gf}
.gg-flow__i{position:relative;background:#fff;border:1px solid var(--gg-line);border-radius:12px;padding:34px 26px 28px}
.gg-flow__i::before{
  counter-increment:gf;content:counter(gf);
  position:absolute;top:-17px;left:26px;width:34px;height:34px;border-radius:50%;
  background:var(--gg-grad-deep);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;
}
.gg-flow__t{word-break:keep-all;font-size:16.5px;font-weight:700;margin:0 0 10px}
.gg-flow__p{font-size:13.8px;color:var(--gg-sub);margin:0;line-height:1.95}

/* --- 構成図 ------------------------------------------------------------ */
.gg-diagram{background:#fff;border:1px solid var(--gg-line);border-radius:14px;padding:30px;margin-top:40px}
.gg-diagram__cap{font-size:13px;color:var(--gg-mute);margin:16px 0 0;text-align:center}


/* --- 構成図（HTML/CSSで組む。画像にすると小さい画面で読めなくなるため） -- */
.gg-dg{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center}
.gg-dg__col{background:var(--gg-bgl);border:1px solid var(--gg-line);border-radius:11px;padding:22px 20px}
.gg-dg__ttl{
  display:block;font-size:12px;font-weight:700;letter-spacing:.06em;color:#3d4a5c;
  margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--gg-line);
}
.gg-dg__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.gg-dg__list li{
  display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--gg-line);
  border-radius:8px;padding:12px 14px;font-size:14px;font-weight:600;color:var(--gg-txt);
}
.gg-dg__list li i{color:#1f6a86;width:18px;text-align:center}
.gg-dg__hi{border-color:#8DC63F !important;background:#f4fae9 !important;box-shadow:0 0 0 3px rgba(141,198,63,.16)}
.gg-dg__hi i{color:#5d8a1f !important}
.gg-dg__link{text-align:center;min-width:190px}
.gg-dg__arrow{
  display:block;height:3px;background:var(--gg-grad);border-radius:2px;position:relative;margin-bottom:12px;
}
.gg-dg__arrow::after{
  content:'';position:absolute;right:-2px;top:-5px;border-left:11px solid #8DC63F;
  border-top:6.5px solid transparent;border-bottom:6.5px solid transparent;
}
.gg-dg__linktxt{font-size:12.5px;line-height:1.75;color:#4b5563;font-weight:600}
@media(max-width:900px){
  .gg-dg{grid-template-columns:1fr;gap:16px}
  .gg-dg__link{min-width:0}
  .gg-dg__arrow{width:3px;height:44px;margin:0 auto 12px}
  .gg-dg__arrow::after{right:auto;left:-5.5px;top:auto;bottom:-2px;
    border-left:6.5px solid transparent;border-right:6.5px solid transparent;
    border-top:11px solid #8DC63F;border-bottom:none}
}

/* --- 特長（横並び） ---------------------------------------------------- */
.gg-feat{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 40px}
.gg-feat__i{display:flex;gap:18px}
.gg-feat__n{
  flex:0 0 auto;width:38px;height:38px;border-radius:9px;background:var(--gg-grad-deep);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.gg-feat__t{word-break:keep-all;font-size:17px;font-weight:700;margin:4px 0 8px;line-height:1.55}
.gg-feat__p{font-size:14px;color:var(--gg-sub);margin:0;line-height:1.95}

/* --- 提供範囲テーブル -------------------------------------------------- */
.gg-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.gg-tbl{width:100%;min-width:620px;border-collapse:collapse;background:#fff;font-size:14.5px}
.gg-tbl th,.gg-tbl td{border:1px solid var(--gg-line);padding:15px 18px;text-align:left;vertical-align:top}
.gg-tbl thead th{background:#eef4f8;font-weight:700;color:var(--gg-txt);white-space:nowrap}
.gg-tbl tbody th{background:var(--gg-bgl);font-weight:700;width:190px;white-space:nowrap}
/* 「ご用意」列は「オプション」「お客様手配」が途中で折れないようにする */
.gg-tbl td:last-child{white-space:nowrap;font-weight:700;color:var(--gg-txt)}
.gg-tbl td{color:var(--gg-sub);line-height:1.9}

/* --- 濃色セクション ---------------------------------------------------- */
.gg-dark-sec{background:var(--gg-dark);color:#fff;padding:88px 0}
.gg-dark-sec .gg-h2{color:#fff}
.gg-dark-sec .gg-h2 em{color:#8DC63F}
.gg-dark-sec .gg-lead{color:#c3ccd8}
.gg-dark-sec .gg-lbl{color:#7fd0ea}
.gg-chk{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 34px;margin:0;padding:0;list-style:none}
.gg-chk li{
  display:flex;gap:12px;font-size:14.5px;color:#d3dae4;line-height:1.85;
  border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:14px;
}
.gg-chk i{color:#8DC63F;margin-top:6px;flex:0 0 auto}

/* --- CTA --------------------------------------------------------------- */
.gg-cta{background:var(--gg-grad);color:#0d2b17;padding:78px 0;text-align:center}
.gg-cta__h2{word-break:keep-all;font-size:clamp(23px,3.2vw,34px);font-weight:800;line-height:1.5;margin:0 0 16px}
.gg-cta__p{font-size:15.5px;margin:0 0 32px;line-height:2}
.gg-cta__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.gg .gg-cta a.gg-btn--w{background:#fff;color:#1f6a86;box-shadow:0 6px 22px rgba(0,0,0,.18)}
.gg .gg-cta a.gg-btn--o{background:rgba(255,255,255,.52);border-color:rgba(13,43,23,.3);color:#0d2b17}
.gg .gg-cta a.gg-btn--o:hover{background:rgba(255,255,255,.78)}
.gg-cta__note{font-size:12.5px;margin:22px 0 0;color:#0d2b17}
.gg-cta__note a{color:#0d2b17;text-decoration:underline}

/* --- パンくず ---------------------------------------------------------- */
.gg-bc{background:var(--gg-bgl);border-bottom:1px solid var(--gg-line);padding:11px 0;font-size:12.5px}
.gg-bc ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;color:var(--gg-mute)}
.gg-bc li+li::before{content:"›";margin-right:8px;color:#9aa4b2}
.gg-bc a{color:#1f6a86}
.gg-bc a:hover{text-decoration:underline}

/* --- レスポンシブ ------------------------------------------------------ */
@media(max-width:900px){
  .gg-hero__inner{grid-template-columns:1fr;gap:38px;padding:70px 0 64px}
  .gg-grid3,.gg-flow{grid-template-columns:1fr}
  .gg-grid2,.gg-feat,.gg-chk{grid-template-columns:1fr}
}
@media(max-width:768px){
  .gg-sec,.gg-dark-sec{padding:62px 0}
  .gg-wrap{padding:0 18px}
  .gg-hero__stats{gap:24px}
  .gg-hstat__n{font-size:27px}
  .gg-btn{padding:14px 24px;font-size:14px}
  .gg-cta__btns .gg-btn{width:100%;justify-content:center}
  .gg-diagram{padding:18px}
}

/* --- FAQ ページ -------------------------------------------------------- */
.gg-faq-head{background:var(--gg-dark);color:#fff;padding:60px 0 54px;text-align:center}
.gg-faq-logo{width:290px;margin:0 auto 26px}
.gg-faq-h1{font-size:clamp(26px,3.6vw,36px);font-weight:800;margin:0 0 16px;word-break:keep-all}
.gg-faq-lead{font-size:15px;line-height:2;color:#c3ccd8;margin:0 auto;max-width:720px}
.gg-faq-lead a{color:#9ad7ec;text-decoration:underline}
.gg-faq-body{max-width:880px}
.gg-faq-group{margin-bottom:48px}
.gg-faq-group:last-child{margin-bottom:0}
.gg-faq-cat{
  display:flex;align-items:center;gap:11px;font-size:18px;font-weight:800;margin:0 0 18px;
  padding-bottom:12px;border-bottom:2px solid var(--gg-secondary);color:var(--gg-txt);word-break:keep-all;
}
.gg-faq-cat i{color:#5d8a1f;font-size:16px}
.gg-qa{border:1px solid var(--gg-line);border-radius:10px;background:#fff;margin-bottom:12px;overflow:hidden}
.gg-qa[open]{border-color:#b9d9e6}
.gg-qa__q{
  display:flex;gap:13px;align-items:flex-start;padding:17px 46px 17px 18px;cursor:pointer;
  font-size:15.5px;font-weight:700;line-height:1.7;position:relative;list-style:none;color:var(--gg-txt);
}
.gg-qa__q::-webkit-details-marker{display:none}
.gg-qa__q::after{
  content:'';position:absolute;right:20px;top:26px;width:9px;height:9px;
  border-right:2.4px solid #6b7280;border-bottom:2.4px solid #6b7280;
  transform:rotate(45deg);transition:transform .2s;
}
.gg-qa[open] .gg-qa__q::after{transform:rotate(-135deg);top:30px}
.gg-qa__q:hover{background:#f6fafc}
.gg-qa__mark{
  flex:0 0 auto;width:25px;height:25px;border-radius:6px;background:#eaf6fb;color:#1f6a86;
  display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;
  font-weight:800;font-size:13px;
}
.gg-qa__mark--a{background:#f0f7e6;color:#4d7419}
.gg-qa__a{display:flex;gap:13px;align-items:flex-start;padding:0 22px 20px 18px}
.gg-qa__a p{margin:0;font-size:14.5px;line-height:2;color:var(--gg-sub)}
@media(max-width:768px){
  .gg-faq-head{padding:44px 0 40px}
  .gg-faq-logo{width:220px}
  .gg-qa__q{font-size:14.5px;padding:15px 40px 15px 14px}
  .gg-qa__a{padding:0 16px 18px 14px}
}