/* ==========================================================================
   goodskill visual v2 — 共通デザイン層（ヘッダー／SPメニュー／TOPヒーロー／
   下層バナー文法／全幅問い合わせ帯）
   正本: _build/codex-visual-direction.md（画像構成のみ採用・検証ラベル等は不採用）
   トークンは各ページ :root の --navy / --blue / --paper / --line / --sub を継承
   ========================================================================== */
:root{
  --gs-navy:#14314e; --gs-deep:#0d253d; --gs-night:#091c2e;
  --gs-blue:#2a6193; --gs-paper:#f4f5f6; --gs-line:#d9dce0; --gs-sub:#5a6472;
  --gsh:88px;
}
@media(max-width:1199px){:root{--gsh:72px}}
@media(max-width:767px){:root{--gsh:64px}}

body.gs-locked{overflow:hidden}

/* ---------- header ---------- */
.gs-header{position:sticky;top:0;z-index:50;height:var(--gsh);
  background-color:rgba(255,255,255,.96);border-bottom:1px solid var(--gs-line);
  backdrop-filter:blur(8px);transition:height .2s ease,box-shadow .2s ease}
.gs-header.is-compact{height:72px;box-shadow:0 8px 26px rgba(13,37,61,.08)}
.gs-header .gs-hin{width:min(1440px,100%);height:100%;margin-inline:auto;
  display:flex;align-items:stretch;padding-left:clamp(18px,2.7vw,42px)}
.gs-lockup{display:grid;align-content:center;position:relative;
  line-height:1;width:clamp(220px,20vw,286px)}
.gs-lockup .jp{font-size:clamp(15px,1.25vw,19px);font-weight:700;letter-spacing:.08em}
.gs-lockup .en{margin-top:7px;color:var(--gs-sub);font-family:Jost,sans-serif;
  font-size:9px;font-weight:600;letter-spacing:.19em}
.gs-lockup .service-line{margin-bottom:7px;color:#35536f;font-size:9px;font-weight:600;
  line-height:1;letter-spacing:.055em;white-space:nowrap}
.gs-nav{margin-left:auto;display:flex;align-items:stretch}
.gs-nav ul{display:flex;height:100%;list-style:none;margin:0;padding:0}
.gs-nav a{min-width:clamp(88px,7.6vw,116px);height:100%;display:grid;place-content:center;
  position:relative;text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.06em}
.gs-nav a small{display:block;margin-top:5px;color:var(--gs-sub);font-family:Jost,sans-serif;
  font-size:8.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.gs-nav a::after{content:"";position:absolute;right:20%;bottom:0;left:20%;height:3px;
  background-color:var(--gs-navy);transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.gs-nav a:hover::after,.gs-nav a:focus-visible::after,.gs-nav a[aria-current="page"]::after{transform:scaleX(1)}
.gs-nav a[aria-current="page"]{color:var(--gs-blue)}
.gs-nav a.soon{cursor:default;color:var(--gs-sub)}
.gs-nav a.soon::after{content:none}
.gs-cta{width:clamp(158px,12.5vw,200px);display:grid;place-content:center;
  background-color:var(--gs-navy);color:#fff;font-size:13px;font-weight:700;
  letter-spacing:.08em;transition:background-color .18s ease;text-align:center}
.gs-cta span{display:block;margin-top:5px;color:#a8c5de;font-family:Jost,sans-serif;
  font-size:8.5px;font-weight:600;letter-spacing:.18em}
.gs-cta:hover,.gs-cta[aria-current="page"]{background-color:var(--gs-blue)}
.gs-burger{display:none;width:64px;min-height:44px;border:0;background-color:var(--gs-navy);
  color:#fff;cursor:pointer;align-items:center;justify-content:center;gap:5px;flex-direction:column}
.gs-burger span{width:24px;height:2px;background-color:currentColor;transition:transform .2s ease,opacity .2s ease}
.gs-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.gs-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.gs-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.gs-nav a:focus-visible,.gs-cta:focus-visible,.gs-burger:focus-visible,
.gs-menu a:focus-visible,.v2hero .hbtn:focus-visible,.cband .cact:focus-visible{
  outline:3px solid #72a8d4;outline-offset:-3px}

/* ---------- fullscreen menu (tablet/SP) ---------- */
.gs-menu{position:fixed;inset:0;z-index:45;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,42vw);
  background-color:var(--gs-deep);color:#fff;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,visibility .22s ease}
.gs-menu[aria-hidden="false"]{opacity:1;visibility:visible;pointer-events:auto}
.gs-menu .mv{position:relative;overflow:hidden}
.gs-menu .mv img{width:100%;height:100%;object-fit:cover;object-position:58% 50%;
  display:block;filter:saturate(.78) contrast(1.03)}
.gs-menu .mv::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(13,37,61,.15),var(--gs-deep))}
.gs-menu nav{display:grid;align-content:center;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:100px clamp(28px,5vw,70px) 40px}
.gs-menu ol{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.22)}
.gs-menu li{border-bottom:1px solid rgba(255,255,255,.22)}
.gs-menu ol a{min-height:60px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;color:#fff}
.gs-menu .no,.gs-menu .eng{color:#94b3cc;font-family:Jost,sans-serif;
  font-size:10px;font-weight:600;letter-spacing:.16em}
.gs-menu .label{font-size:17px;font-weight:700;letter-spacing:.08em}
.gs-menu a[aria-current="page"] .label{color:var(--blue)}
.gs-menu a.soon{cursor:default}
.gs-menu a.soon .label{color:#94b3cc}
.gs-menu .meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;padding-top:28px;
  font-size:12px;line-height:1.7;margin:0}
.gs-menu .meta dt{color:#94b3cc;font-family:Jost,sans-serif;font-size:9px;font-weight:600;letter-spacing:.15em}
.gs-menu .meta dd{margin:6px 0 0;font-weight:700}
.gs-menu .meta a{color:#fff;display:inline-flex;align-items:center;min-height:44px}

/* ---------- TOP hero ---------- */
.v2hero{min-height:calc(100svh - var(--gsh));max-height:920px;display:grid;
  grid-template-columns:minmax(410px,42%) minmax(0,58%);position:relative;
  background-color:var(--gs-navy);color:#fff;overflow:hidden}
.v2hero .hcopy{min-height:680px;display:grid;align-content:center;
  padding:clamp(70px,8vw,124px) clamp(34px,4vw,76px);position:relative;z-index:2}
.v2hero .hcopy::after{content:"";position:absolute;top:8%;right:0;bottom:8%;width:1px;
  background-color:rgba(255,255,255,.28)}
.v2hero .gyo{color:#9ec1dd;font-size:12px;font-weight:500;letter-spacing:.18em}
.v2hero h1{margin-top:24px;font-size:clamp(36px,3.6vw,60px);line-height:1.34;
  letter-spacing:.025em;font-weight:700}
.v2hero h1 em{font-style:normal;position:relative;z-index:1;display:inline-block;white-space:nowrap}
.v2hero h1 em::after{content:"";position:absolute;right:-4px;bottom:7px;left:-4px;height:9px;
  z-index:-1;background-color:var(--gs-blue)}
.v2hero .setsu{max-width:38em;margin-top:26px;color:#d8e3ec;
  font-size:clamp(13px,1.05vw,15px);line-height:2.05}
.v2hero .hbtn{width:fit-content;min-height:54px;margin-top:32px;display:inline-flex;
  align-items:center;gap:34px;padding:0 22px;background-color:#fff;color:var(--gs-navy);
  border:1px solid #fff;font-size:13.5px;font-weight:700;letter-spacing:.06em;
  transition:background-color .18s ease,color .18s ease}
.v2hero .hbtn::after{content:"→";font-family:Jost,sans-serif;font-size:18px;font-weight:600}
.v2hero .hbtn:hover{background-color:transparent;color:#fff}
.v2hero .hmedia{min-height:680px;position:relative;overflow:hidden;background-color:#273540}
.v2hero .hmedia>img{width:100%;height:100%;object-fit:cover;object-position:61% 50%;
  display:block;filter:saturate(.76) contrast(1.08);transform:scale(1.015);
  animation:gs-settle 1.15s cubic-bezier(.2,.8,.2,1) both}
.v2hero .hslides{position:absolute;inset:0}
.v2hero .hslide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .85s ease,visibility 0s linear .85s}
.v2hero .hslide.is-on{opacity:1;visibility:visible;transition:opacity .85s ease}
.v2hero .hslide img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  display:block;filter:saturate(.78) contrast(1.06);transform:scale(1.015)}
.v2hero .hslide:first-child img{object-position:56% 50%;
  animation:gs-settle 1.15s cubic-bezier(.2,.8,.2,1) both}
.v2hero .hdots{position:absolute;z-index:4;top:clamp(12px,1.8vw,24px);right:clamp(12px,2.4vw,30px);
  display:flex;align-items:center}
.v2hero .hdots button{width:44px;height:44px;display:grid;place-items:center;padding:0;
  background:none;border:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.v2hero .hdots i{display:block;width:22px;height:3px;background-color:rgba(255,255,255,.5);
  box-shadow:0 1px 3px rgba(4,17,27,.5);transition:background-color .25s ease,width .25s ease}
.v2hero .hdots button[aria-current="true"] i{width:34px;background-color:#fff}
.v2hero .hdots button:hover i{background-color:rgba(255,255,255,.85)}
.v2hero .hdots button:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.v2hero .hmedia::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(20,49,78,.24),transparent 34%),
  linear-gradient(0deg,rgba(5,15,24,.55),transparent 42%)}
.v2hero .inset{position:absolute;left:clamp(20px,3vw,48px);bottom:108px;z-index:3;
  width:clamp(220px,28vw,430px);aspect-ratio:16/9;overflow:hidden;
  border:6px solid #fff;box-shadow:0 18px 46px rgba(4,17,27,.34)}
.v2hero .inset img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;
  display:block;filter:saturate(.72) contrast(1.06)}
.v2hero .inset span{position:absolute;right:0;bottom:0;padding:7px 10px;color:#fff;
  background-color:rgba(13,37,61,.82);font-size:10px;font-weight:700;letter-spacing:.08em}
.v2hero .rail{position:absolute;right:clamp(20px,4vw,64px);bottom:0;left:42%;z-index:4;
  min-height:80px;display:grid;grid-template-columns:repeat(3,1fr);margin:0;
  background-color:#fff;color:#000;box-shadow:0 -18px 44px rgba(4,18,30,.18)}
.v2hero .rail div{display:grid;align-content:center;
  padding:15px clamp(17px,2.2vw,34px);border-left:1px solid var(--gs-line)}
.v2hero .rail div:first-child{border-left:0}
.v2hero .rail dt{color:var(--gs-sub);font-size:10.5px;font-weight:700;letter-spacing:.08em}
.v2hero .rail dd{margin:5px 0 0;color:var(--gs-navy);font-size:clamp(16px,1.5vw,22px);
  font-weight:700;letter-spacing:.02em}
.v2hero .rail dd .num{font-size:1.12em}
@keyframes gs-settle{from{transform:scale(1.08);opacity:.75}to{transform:scale(1.015);opacity:1}}

/* ---------- 下層バナー文法 ---------- */
.pgban{min-height:clamp(340px,38vw,460px);display:grid;
  grid-template-columns:minmax(0,7fr) minmax(340px,5fr);position:relative;overflow:hidden;
  background-color:#fff}
.pgban .bphoto{position:relative;overflow:hidden;background-color:#d9dde0}
.pgban .bphoto img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.82) contrast(1.04)}
.pgban .bphoto::after{content:"";position:absolute;inset:auto 0 0;height:30%;
  background:linear-gradient(transparent,rgba(4,17,27,.38))}
.pgban .bphoto .sign{position:absolute;left:clamp(16px,2.4vw,36px);bottom:clamp(16px,2.4vw,36px);
  z-index:2;width:clamp(120px,15vw,210px);aspect-ratio:3/4;overflow:hidden;
  border:5px solid #fff;box-shadow:0 14px 34px rgba(4,17,27,.3)}
.pgban .bphoto .sign img{filter:none}
.pgban .bphoto.is-product{display:grid;place-items:center;padding:clamp(24px,4vw,44px);
  background-color:#f7f8f8;background-image:
    linear-gradient(rgba(20,49,78,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,49,78,.055) 1px,transparent 1px);
  background-size:28px 28px}
.pgban .bphoto.is-product::after{content:none}
.pgban .bphoto.is-product img{width:min(78%,640px);height:min(76%,320px);object-fit:contain;
  filter:contrast(1.03);box-shadow:0 22px 46px rgba(13,37,61,.14)}
.pgban .bcopy{display:grid;align-content:center;position:relative;
  padding:clamp(40px,5.2vw,80px);color:#fff;background-color:var(--gs-navy)}
.pgban.paper .bcopy{color:#000;background-color:#fff}
.pgban .bno{position:absolute;top:24px;right:28px;color:#8fafca;font-family:Jost,sans-serif;
  font-size:clamp(30px,3vw,42px);font-weight:600;letter-spacing:-.02em;line-height:1}
.pgban.paper .bno{color:#b7c4cf}
.pgban .ben{color:#9dbbd3;font-family:Jost,sans-serif;font-size:10px;font-weight:600;letter-spacing:.22em}
.pgban.paper .ben{color:var(--gs-blue)}
.pgban h1{margin-top:16px;font-size:clamp(28px,3vw,46px);line-height:1.38;letter-spacing:.06em;font-weight:700}
.pgban .blead{margin-top:18px;color:#d7e2eb;font-size:13.5px;line-height:1.95;max-width:30em}
.pgban.paper .blead{color:var(--gs-sub)}
.pgban .bline{width:74px;height:3px;margin-top:26px;background-color:#8fafca;display:block}
.pgban.paper .bline{background-color:var(--gs-navy)}
.pgban:hover .bphoto img{transform:scale(1.02);transition:transform .7s cubic-bezier(.2,.8,.2,1)}

/* ---------- 全幅問い合わせ帯 ---------- */
.cband{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(320px,1fr);
  color:#fff;background-color:var(--gs-navy)}
.cband .cmain,.cband .cphone{min-height:320px;display:grid;align-content:center;
  padding:clamp(44px,6vw,88px)}
.cband .cmain{position:relative;overflow:hidden}
.cband .cmain::after{content:none}
.cband .cen{color:#c3d0dc;font-family:Jost,sans-serif;font-size:12px;font-weight:600;letter-spacing:.28em}
.cband h2{max-width:15em;margin-top:16px;font-size:clamp(26px,3.4vw,48px);line-height:1.42;
  letter-spacing:.04em;font-weight:700}
.cband .cmain p{max-width:43em;margin-top:18px;color:#d6e2ec;font-size:13.5px;line-height:2}
.cband .cact{width:fit-content;min-height:54px;margin-top:28px;display:inline-flex;
  align-items:center;gap:38px;padding:0 22px;background-color:#fff;color:var(--gs-navy);
  font-size:13.5px;font-weight:700;letter-spacing:.05em;
  transition:background-color .18s ease,color .18s ease;border:1px solid #fff}
.cband .cact::after{content:"→";font-family:Jost,sans-serif;font-size:18px;font-weight:600}
.cband .cact:hover{background-color:transparent;color:#fff}
.cband .cphone{background-color:var(--gs-night);border-left:1px solid rgba(255,255,255,.16)}
.cband .cphone dt{color:#9ebbd2;font-family:Jost,sans-serif;font-size:10px;font-weight:600;letter-spacing:.19em}
.cband .cphone dd{margin:12px 0 0;font-family:Jost,sans-serif;
  font-size:clamp(25px,2.8vw,40px);font-weight:600;line-height:1.1;letter-spacing:.02em}
.cband .cphone dd a{display:inline-flex;align-items:center;min-height:44px;color:#fff}
.cband .cphone small{display:block;margin-top:10px;color:#c8d5df;font-size:11.5px;line-height:1.7}
.cband .cphone .cmail{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.2)}
.cband .cphone .cmail dd{font-size:clamp(14px,1.4vw,18px);word-break:break-all;font-family:inherit}

/* ---------- responsive ---------- */
@media(max-width:1199px){
  .gs-header.is-compact{height:64px}
  .gs-header .gs-hin{padding-left:24px}
  .gs-nav,.gs-cta{display:none}
  .gs-burger{display:flex;margin-left:auto}
  .v2hero{grid-template-columns:minmax(330px,44%) minmax(0,56%)}
  /* スライダー版ヒーローのみ：この帯で 100svh が効くとパネルが極端な縦長になり加工品が切れる */
  .v2hero:has(.hslides){min-height:0;max-height:none}
  .v2hero .hcopy,.v2hero .hmedia{min-height:640px}
  .v2hero h1{font-size:clamp(28px,4.1vw,40px)}
  .v2hero .rail{left:44%}
  .pgban{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr)}
}
@media(max-width:767px){
  .gs-header .gs-hin{padding-left:17px}
  .gs-lockup{width:auto}
  .gs-lockup .service-line{margin-bottom:5px;font-size:7px;letter-spacing:.025em}
  .gs-lockup .jp{font-size:14px}
  .gs-lockup .en{font-size:7px;margin-top:5px}
  .gs-burger{width:60px}
  .gs-menu{grid-template-columns:1fr}
  .gs-menu .mv{display:none}
  .gs-menu nav{padding:82px 22px 24px}
  .gs-menu ol a{min-height:56px;grid-template-columns:1fr auto}
  .gs-menu .label{font-size:15px}
  .v2hero{max-height:none;display:flex;flex-direction:column}
  .v2hero .hmedia{min-height:0;height:42svh;order:-1}
  .v2hero .hslide img{object-position:50% 50%}
  .v2hero .hslide:first-child img{object-position:56% 48%}
  .v2hero .hdots{top:auto;bottom:10px;right:10px}
  .v2hero .hdots button{width:40px;height:40px}
  .v2hero .hmedia::after{background:linear-gradient(0deg,rgba(20,49,78,.72),transparent 55%)}
  .v2hero .inset{left:14px;bottom:16px;width:min(44vw,190px);border-width:4px}
  .v2hero .inset span{display:none}
  .v2hero .hcopy{min-height:auto;padding:34px 20px 118px}
  .v2hero .hcopy::after{display:none}
  .v2hero h1{margin-top:16px;font-size:clamp(29px,8vw,34px);line-height:1.4}
  .v2hero h1 em::after{bottom:3px;height:7px}
  .v2hero .setsu{margin-top:18px;font-size:12.5px;line-height:1.95}
  .v2hero .hbtn{width:100%;justify-content:space-between;margin-top:22px}
  .v2hero .rail{right:12px;left:12px;min-height:82px}
  .v2hero .rail div{padding:12px 10px}
  .v2hero .rail dt{font-size:8.5px}
  .v2hero .rail dd{font-size:clamp(12.5px,3.9vw,16px)}
  .pgban{min-height:0;grid-template-columns:1fr}
  .pgban .bphoto{height:54vw;max-height:310px}
  .pgban .bphoto.is-product{height:64vw}
  .pgban .bphoto .sign{width:min(30vw,140px)}
  .pgban .bcopy{min-height:0;padding:38px 22px 44px}
  .pgban .bno{top:16px;right:18px;font-size:30px}
  .pgban h1{font-size:29px}
  .cband{grid-template-columns:1fr}
  .cband .cmain,.cband .cphone{min-height:0;padding:46px 22px}
  .cband .cphone{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
}
@media(prefers-reduced-motion:reduce){
  .v2hero .hmedia>img,.v2hero .hslide img{animation:none;transform:none}
  .v2hero .hslide{transition:none}
  .pgban:hover .bphoto img{transform:none}
  .gs-header,.gs-menu,.gs-nav a::after,.gs-burger span,.v2hero .hbtn,.cband .cact{transition:none}
}

/* 写真は説明ラベルを重ねず、ビジュアルのみで見せる */
figure figcaption{display:none!important}