/* ============ TOKENS ============ */
:root{
  --ink:#1A7535;          /* 濃色背景の緑（2026-10-27 先方「暗い」→ 一段明るく。白文字 5.8:1） */
  --steel-900:#1F8038;  /* フッター等（白文字 5.0:1） */
  --steel-800:#1E7D37;
  --steel-700:#12922E;
  --steel-500:#2FBA4F;
  --line-dark:rgba(231,237,242,.14);
  --mist:#E7EDF2;
  --surface:#F0F7F1;      /* うすい緑白 */
  --surface-2:#E0EFE3;
  --paper:#FFFFFF;
  --signal:#9AF2AE;       /* オンダーク用アクセント（2026-10-27 背景を明るくしたのに合わせて上げた。#1A7535 上で 4.3:1） */
  --signal-deep:#008000;  /* ロゴのコーポレートグリーン = リンク/ロゴ */
  --btn-green:#12922E;    /* 主ボタンの地（2026-10-27 先方「もう少し明るく」→ #008000 から変更。白文字 4.1:1） */
  --text:#05471A;
  --text-mute:#4C6B57;
  --text-on-dark:#FFFFFF;   /* オンダークの本文は白（可読性優先） */
  --maxw:1440px;
  --pad:clamp(20px,5vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans JP",sans-serif;
  color:var(--text);
  background:var(--paper);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Zen Kaku Gothic New",sans-serif;line-height:1.25;font-weight:900;letter-spacing:.01em}
h2,h3,h4{color:var(--signal-deep)}

/* ============ UTILITIES ============ */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eyebrow{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--signal-deep);
  display:inline-flex;align-items:center;gap:.65rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--signal-deep);display:inline-block}
.eyebrow.on-dark::before{background:var(--signal)}
.eyebrow.on-dark{color:var(--signal)}
.mono{font-family:"Roboto Mono",monospace}
.section{padding:clamp(72px,10vw,130px) 0}
.sec-head{margin-bottom:clamp(36px,5vw,60px)}
.sec-head h2{
  font-size:clamp(1.5rem,4.4vw,2.9rem);margin-top:18px;letter-spacing:0;
  word-break:keep-all;overflow-wrap:normal;line-break:strict;
  color:var(--signal-deep);            /* 見出しはロゴのコーポレートグリーン */
}
.sec-head .en{
  font-family:"Archivo",sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;
}
/* 見出しは「英語（大）→ 日本語（小）」の2段組み */
.sec-head h2 .en{display:block}
.sec-head h2 .jp{
  display:block;margin-top:.55em;
  font-size:.46em;font-weight:700;letter-spacing:.04em;line-height:1.5;
}
.lead{color:var(--text-mute);font-size:1.02rem;margin-top:18px;max-width:840px}
.btn{
  display:inline-flex;align-items:center;gap:.7rem;font-family:"Zen Kaku Gothic New",sans-serif;
  font-weight:700;font-size:.95rem;padding:15px 30px;border-radius:2px;
  transition:.25s ease;cursor:pointer;border:1.5px solid transparent;
}
/* 白文字を載せる主ボタン。地は --btn-green */
.btn-primary{background:var(--btn-green);color:#fff}
.btn-primary:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{border-color:var(--signal);color:var(--signal)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--steel-700)}
.btn .arw{font-family:"Archivo";font-weight:700}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation:none!important;scroll-behavior:auto!important}
}

/* ============ HEADER ============ */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:#fff;border-bottom:1px solid var(--surface-2);transition:.3s ease;
}
header.scrolled{background:rgba(255,255,255,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 18px rgba(26,117,53,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand-logo{height:30px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{color:var(--text);font-size:.9rem;font-weight:500;position:relative;transition:.2s}
.nav-links a .lbl{font-family:"Archivo";font-size:.58rem;letter-spacing:.18em;display:block;color:var(--text-mute);text-transform:uppercase;margin-bottom:1px}
.nav-links a:hover{color:var(--signal-deep)}
.nav-links a:hover .lbl{color:var(--signal-deep)}
.nav-cta{background:var(--btn-green);color:#fff!important;padding:11px 20px;border-radius:2px;font-weight:700;font-size:.86rem}
.nav-cta:hover{background:var(--ink)!important;color:#fff!important}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.burger span{width:26px;height:2px;background:var(--ink);transition:.3s}

/* mobile menu */
.mobile-menu{position:fixed;inset:0;background:var(--ink);z-index:99;transform:translateX(100%);transition:.4s cubic-bezier(.7,0,.2,1);display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad)}
.mobile-menu.open{transform:none}
.mobile-menu a{color:#fff;font-family:"Zen Kaku Gothic New";font-weight:700;font-size:1.5rem;padding:16px 0;border-bottom:1px solid var(--line-dark);display:flex;align-items:baseline;gap:14px}
.mobile-menu a .lbl{font-family:"Archivo";font-size:.7rem;letter-spacing:.16em;color:rgba(255,255,255,.65)}

/* ============ HERO ============ */
.hero{position:relative;background:var(--ink);color:#fff;padding-top:74px;overflow:hidden}
/* 背景動画レイヤー：video(0) < overlay(1) < content(4)（方眼の線は 2026-10-20 先方要望で削除） */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* 左上は濃い緑（白文字の可読性を確保）→ 右下へ抜けて動画を見せ、最後に白へ */
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(118deg,
    rgba(26,117,53,.72) 0%,
    rgba(26,117,53,.56) 26%,
    rgba(26,117,53,.26) 48%,
    rgba(26,117,53,.06) 64%,
    rgba(0,0,0,.30) 84%,
    rgba(0,0,0,.62) 100%);
}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}
/* 緑の膜を薄くした分（2026-10-27）、明るいコマでも白文字が飛ばないよう影を薄く敷く */
.hero-inner h1,.hero-inner p{text-shadow:0 1px 14px rgba(0,40,15,.35)}
.hero-inner{position:relative;z-index:4;display:flex;align-items:center;min-height:calc(100vh - 74px);padding-top:40px;padding-bottom:60px}
.hero-copy{max-width:52em}
.hero-copy .eyebrow{margin-bottom:26px}
.hero h1{font-size:clamp(1.7rem,5.8vw,4.1rem);line-height:1.18;letter-spacing:.01em;word-break:keep-all;overflow-wrap:normal;line-break:strict}
.hero h1 .hl{color:var(--signal)}
.hero-sub{color:var(--text-on-dark);font-size:clamp(1rem,1.6vw,1.12rem);margin:26px 0 38px;max-width:34em;word-break:auto-phrase}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px}
.hero-tags span{font-family:"Roboto Mono";font-size:.72rem;letter-spacing:.05em;color:var(--text-on-dark);border:1px solid var(--line-dark);padding:7px 13px;border-radius:2px}
.hero-tags span b{color:var(--signal);font-weight:500}

.hero-scroll{position:absolute;bottom:22px;left:var(--pad);z-index:4;font-family:"Roboto Mono";font-size:.66rem;letter-spacing:.22em;color:var(--text-on-dark);display:flex;align-items:center;gap:10px}
.hero-scroll .bar{width:1px;height:34px;background:linear-gradient(var(--signal),transparent);display:block}

/* ============ STRENGTHS ============ */
.strength-msg{
  background:linear-gradient(118deg,var(--ink) 0%,var(--steel-900) 100%);
  color:#fff;border-radius:4px;overflow:hidden;
  display:block;position:relative;
  border:1px solid var(--line-dark);
}
.strength-msg .txt{padding:clamp(30px,4vw,52px)}
.strength-msg .txt h3{font-size:clamp(1.3rem,2.6vw,1.85rem);margin-bottom:20px;color:#fff}
.strength-msg .txt h3 .amp{color:var(--signal)}
.strength-msg .txt p{color:#fff;font-size:.98rem}
.strength-msg .stripe{
  background:
    repeating-linear-gradient(-45deg,var(--signal) 0 16px,var(--ink) 16px 32px);
  position:relative;
}
.strength-msg .stripe .badge{
  position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(160deg,var(--steel-800),var(--steel-900));
  margin:14px;
}
.strength-msg .stripe .badge img{width:100%;height:100%;object-fit:cover;display:block}
.strength-msg .stripe .badge .ph-tag{position:absolute;top:12px;left:12px;font-family:"Roboto Mono";font-size:.62rem;letter-spacing:.1em;color:var(--signal);border:1px solid var(--line-dark);padding:4px 9px;border-radius:2px}
.strength-msg .stripe .badge .ph-cap{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-family:"Roboto Mono";font-size:.7rem;letter-spacing:.24em;color:var(--text-on-dark)}

.strength-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--surface-2);border:1px solid var(--surface-2);margin-top:clamp(28px,4vw,44px)}
.scard{background:var(--paper);transition:.3s;position:relative;display:flex;flex-direction:column}
.scard .sphoto{aspect-ratio:4/3;position:relative;overflow:hidden;background:linear-gradient(155deg,var(--steel-800),var(--ink))}
.scard .sphoto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.scard:hover .sphoto img{transform:scale(1.05)}
.scard .sphoto .ph-tag{position:absolute;top:10px;left:10px;font-family:"Roboto Mono";font-size:.56rem;letter-spacing:.08em;color:#fff;background:rgba(26,117,53,.55);padding:3px 7px;border-radius:2px;z-index:2}
.scard .sphoto .ph-ic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.scard .sphoto .ph-ic svg{width:34px;height:34px;stroke:var(--signal);opacity:.85;fill:none}
.scard .stext{padding:18px 20px 24px}
.scard h4{font-size:.9rem;margin-bottom:9px;word-break:keep-all;letter-spacing:-.01em;line-height:1.45}
.scard:hover h4{color:var(--signal-deep)}
.scard p{font-size:.82rem;color:var(--text-mute);line-height:1.65}

/* ============ LINE BUILDER ============ */
/* 2026-10-20 先方要望「重厚すぎて暗い」→ --ink より淡い緑に（白文字とのコントラスト 5.0:1 を確保） */
.builder{background:linear-gradient(180deg,#1F8038 0%,#1F8038 48%,#ffffff 100%);color:#fff;position:relative;overflow:hidden}
.builder .sec-head h2,.builder .lead{color:#fff}
.builder .lead{color:var(--text-on-dark)}
/* 工程紹介：横フロー */
.flow{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:clamp(44px,5vw,68px) 0 clamp(34px,5vw,52px)}
.flow::before{content:"";position:absolute;top:10px;left:9%;right:9%;height:2px;background:linear-gradient(90deg,var(--signal),var(--steel-500))}
.flow-step{position:relative;text-align:center;padding-top:32px}
.flow-step .dot{position:absolute;top:2px;left:50%;transform:translateX(-50%);width:16px;height:16px;box-sizing:border-box;border-radius:50%;background:var(--ink);border:3px solid var(--signal);z-index:2}
.flow-step .fn{font-family:"Roboto Mono";font-weight:700;font-size:.66rem;color:var(--signal);letter-spacing:.08em;display:block}
.flow-step h4{font-size:1rem;color:#fff;margin:5px 0 6px;word-break:keep-all}
.flow-step p{font-size:.78rem;color:var(--text-on-dark);line-height:1.55}

/* 各下層ページへの導線カード */
.builder-links{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.blink{display:block;background:var(--steel-900);border:1px solid var(--line-dark);border-radius:4px;padding:28px 30px;transition:.3s;position:relative;overflow:hidden}
.blink::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--signal);transform:scaleY(0);transform-origin:top;transition:.3s;z-index:3}
.blink:hover{border-color:var(--signal);transform:translateY(-3px)}
.blink:hover::after{transform:scaleY(1)}
.blink .en{font-family:"Archivo";font-weight:700;font-size:.66rem;letter-spacing:.2em;color:var(--signal);text-transform:uppercase;display:block;margin-bottom:8px}
.blink h4{font-size:1.2rem;color:#fff;margin-bottom:8px;word-break:keep-all}
.blink p{color:var(--text-on-dark);font-size:.88rem;margin-bottom:16px;line-height:1.7}
.blink .go{font-family:"Zen Kaku Gothic New";font-weight:700;font-size:.9rem;color:#fff;display:inline-flex;align-items:center;gap:8px;transition:.3s}
.blink:hover .go{gap:14px}
/* 写真付きの導線カード（ラインビルダー下） */
.builder-links .blink{padding:0}
.builder-links .bphoto{aspect-ratio:16/9;position:relative;overflow:hidden;background:linear-gradient(155deg,var(--steel-800),var(--ink))}
.builder-links .bphoto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.builder-links .blink:hover .bphoto img{transform:scale(1.05)}
.builder-links .bphoto .ph-tag{position:absolute;top:10px;left:10px;font-family:"Roboto Mono";font-size:.56rem;letter-spacing:.06em;color:#fff;background:rgba(26,117,53,.55);padding:3px 7px;border-radius:2px;z-index:2}
.builder-links .btext{padding:24px 28px 28px}

/* 改行ユーティリティ：PC幅だけ改行し、スマホ(900px以下)では折り返しに任せる */
br.pc-only{display:inline}
@media (max-width:900px){ br.pc-only{display:none} }

@media (max-width:900px){
  /* スマホは縦の年表型：左に丸＋縦線、右に文字 */
  .flow{grid-template-columns:1fr;gap:0}
  .flow::before{display:none}
  .flow-step::after{content:"";position:absolute;left:7px;top:18px;bottom:-2px;width:2px;background:var(--signal)}
  .flow-step:last-child::after{display:none}
  .flow--light .flow-step::after{background:var(--signal-deep)}
  .flow-step{text-align:left;padding:0 0 22px 34px}
  .flow-step .dot{top:2px;left:0;transform:none}
  .flow-step h4{margin:2px 0 4px}
  .builder-links{grid-template-columns:1fr}
}

/* ============ FACILITY ============ */
.facility-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:start}
.spec-table{border-top:2px solid var(--ink)}
.spec-row{display:grid;grid-template-columns:170px 1fr;gap:16px;padding:16px 4px;border-bottom:1px solid var(--surface-2)}
.spec-row dt{font-family:"Roboto Mono";font-weight:500;font-size:.82rem;color:var(--text-mute);letter-spacing:.02em}
.spec-row dd{font-size:.92rem;font-weight:500}
.facility-visual{background:var(--steel-900);border-radius:4px;padding:40px;color:#fff;position:relative;overflow:hidden;min-height:340px;display:flex;flex-direction:column;justify-content:space-between}
.facility-visual .ph-tag{position:absolute;top:16px;right:16px;font-family:"Roboto Mono";font-size:.62rem;letter-spacing:.1em;color:var(--signal);border:1px solid var(--line-dark);padding:4px 9px;border-radius:2px}
.facility-visual .big{font-family:"Archivo";font-weight:800;font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.15}
.facility-visual .big span{color:#fff}
.facility-visual .stat-row{display:flex;gap:32px;flex-wrap:wrap;margin-top:24px}
.facility-visual .stat b{font-family:"Archivo";font-weight:800;font-size:2rem;color:#fff;display:block}
.facility-visual .stat span{font-size:.76rem;color:var(--text-on-dark)}

/* ============ PRODUCTS ============ */
.prod-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
/* 取扱製品5点：PC・タブレットは3＋2の2段を中央揃え／スマホは縦1列 */
.prod-grid .pcard{flex:0 0 calc((100% - 44px) / 3)}
@media(max-width:599px){.prod-grid .pcard{flex-basis:100%}}
.pcard{border:1px solid var(--surface-2);border-radius:4px;overflow:hidden;transition:.3s;background:var(--paper)}
.pcard:hover{border-color:var(--signal-deep);box-shadow:0 12px 30px rgba(26,117,53,.08);transform:translateY(-4px)}
.pcard .pvis{aspect-ratio:3/2;background:linear-gradient(150deg,var(--steel-800),var(--ink));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.pcard .pvis img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.pcard:hover .pvis img{transform:scale(1.05)}
.pcard .pvis svg{width:84px;height:84px;stroke:var(--signal);opacity:.9}
.pcard .pvis .cat{position:absolute;top:14px;left:14px;font-family:"Roboto Mono";font-size:.62rem;letter-spacing:.1em;color:#fff;background:rgba(26,117,53,.6);padding:5px 9px;border-radius:2px;z-index:2}
.pcard .pbody{padding:20px 22px}
.pcard .pbody h4{font-size:1.05rem;margin-bottom:5px}
.pcard .pbody p{font-size:.82rem;color:var(--text-mute);word-break:auto-phrase}

/* ============ WORKS ============ */
.works{background:var(--surface)}
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wcard{background:var(--paper);border-radius:4px;overflow:hidden;box-shadow:0 4px 18px rgba(26,117,53,.05);transition:.3s;cursor:pointer}
.wcard:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(26,117,53,.12)}
.wcard .wvis{aspect-ratio:16/10;position:relative;display:flex;align-items:flex-end;padding:16px;color:#fff;background:var(--btn-green)} /* 2026-10-27 全カード同じ緑に（主ボタンと同色） */
.wcard .tag{position:absolute;top:14px;left:14px;font-family:"Roboto Mono";font-size:.62rem;letter-spacing:.08em;background:#fff;color:var(--signal-deep);padding:4px 9px;border-radius:2px;font-weight:700}
.wcard .wvis h4{position:relative;font-size:1.05rem;z-index:2;color:#fff}
.wcard .wbody{padding:16px 20px}
.wcard .wbody .meta{font-family:"Roboto Mono";font-size:.72rem;color:var(--text-mute);display:flex;gap:16px;flex-wrap:wrap}
.wcard .wbody .meta span b{color:var(--signal-deep);font-weight:500}
.works-note{margin-top:26px;font-size:.82rem;color:var(--text-mute);font-family:"Roboto Mono";display:flex;align-items:center;gap:10px}
.works-note::before{content:"◆";color:var(--signal-deep)}

/* ============ COMPANY ============ */
.msg-block{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:center;margin-bottom:clamp(48px,7vw,90px)}
.msg-visual{background:var(--ink);border-radius:4px;aspect-ratio:3/4;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:28px;color:#fff}
.msg-visual .ph{position:relative;font-family:"Roboto Mono";font-size:.7rem;letter-spacing:.1em;color:var(--signal)}
.msg-visual .rep{position:relative}
.msg-visual .rep b{display:block;font-family:"Zen Kaku Gothic New";font-size:1.2rem}
.msg-visual .rep span{font-size:.76rem;color:var(--text-on-dark)}
.msg-body .eyebrow{margin-bottom:20px}
.msg-body h3{font-size:clamp(1.4rem,3vw,2.05rem);margin-bottom:22px;line-height:1.4}
.msg-body p{color:var(--text-mute);font-size:.95rem;margin-bottom:16px}
.msg-body .sign{margin-top:26px;font-family:"Zen Kaku Gothic New";font-weight:700;color:var(--signal-deep)}
.msg-body .sign small{display:block;font-size:.78rem;color:var(--text-mute);font-weight:400}

.company-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px)}
/* 会社概要：1カラムの縦積み（よくあるコーポレート型） */
.company-stack{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(48px,6vw,80px)}
.company-stack .info-row{grid-template-columns:180px 1fr;padding:16px 4px}
.company-stack .map-ph{height:320px}
.company-links{display:grid;grid-template-columns:minmax(0,880px);justify-content:center;gap:16px;margin-top:8px}
.block-title{font-family:"Archivo";font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--text-mute);padding-bottom:12px;border-bottom:2px solid var(--signal-deep);margin-bottom:20px;display:flex;justify-content:space-between;align-items:baseline}
.block-title span{font-family:"Zen Kaku Gothic New";font-weight:700;font-size:1.1rem;color:var(--signal-deep);letter-spacing:0;text-transform:none}
.info-row{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:13px 4px;border-bottom:1px solid var(--surface-2);font-size:.88rem}
.info-row dt{font-family:"Roboto Mono";font-size:.78rem;color:var(--text-mute)}
.info-row dd b{color:var(--signal-deep)}
.timeline{position:relative;padding-left:24px}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--surface-2)}
.tl-item{position:relative;padding:0 0 22px}
.tl-item::before{content:"";position:absolute;left:-24px;top:10px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:3px solid var(--signal-deep);box-sizing:border-box}
.tl-item .yr{font-family:"Roboto Mono";font-weight:700;font-size:.82rem;color:var(--signal-deep)}
.tl-item p{font-size:.86rem;color:var(--text-mute)}
/* 沿革：左=年表 / 右=写真2枚 */
.history-layout{display:grid;grid-template-columns:1fr .92fr;gap:clamp(28px,4vw,56px);align-items:start}
.history-photos{display:flex;flex-direction:column;gap:16px;position:sticky;top:96px}
.history-photos img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block}
@media(max-width:900px){
  .history-layout{grid-template-columns:1fr;gap:22px}
  .history-photos{position:static;flex-direction:row}
  .history-photos img{flex:1 1 0;min-width:0;width:auto;aspect-ratio:4/3}
}
@media(max-width:560px){
  .history-photos{flex-direction:column}
  .history-photos img{width:100%;aspect-ratio:16/10}
}
.map-ph{margin-top:34px;background:var(--surface-2);border-radius:4px;height:200px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.map-ph span{position:relative;font-family:"Roboto Mono";font-size:.74rem;color:var(--text-mute);letter-spacing:.06em}
.clients{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--surface-2);border:1px solid var(--surface-2);margin-top:34px}
.clients div{background:var(--paper);aspect-ratio:3/1.4;display:flex;align-items:center;justify-content:center;text-align:center;font-family:"Noto Sans JP";font-size:.78rem;font-weight:500;color:var(--text);padding:10px;line-height:1.45}
.clients-note{font-size:.8rem;color:var(--text-mute);margin-top:14px}

/* ============ CONTACT ============ */
.contact{background:var(--ink);color:#fff}
.contact .sec-head h2,.contact .lead{color:#fff}
.contact .lead{color:var(--text-on-dark)}
/* フォーム1本立てなので中央寄せ（旧 .contact-side は廃止） */
.contact-layout{max-width:900px;margin:20px auto 0}
.contact-cta{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.btn-lg{font-size:1.18rem;padding:24px 56px;font-weight:700}
@media(max-width:760px){.btn-lg{font-size:1.02rem;padding:15px 26px}}
.contact-tel{display:flex;flex-direction:column;gap:5px;align-items:center}
.contact-tel .lbl{font-family:"Archivo";font-weight:700;font-size:.62rem;letter-spacing:.2em;color:var(--signal);text-transform:uppercase}
.contact-tel .val{font-family:"Roboto Mono";font-size:1.45rem;color:#fff}
.contact-tel .note{font-size:.82rem;color:var(--text-on-dark)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.82rem;font-weight:500;color:var(--text-on-dark);display:flex;gap:8px;align-items:center}
.field label .req{background:var(--signal);color:var(--ink);font-family:"Roboto Mono";font-size:.58rem;padding:2px 6px;border-radius:2px;font-weight:700}
.field input,.field select,.field textarea{
  background:var(--steel-900);border:1px solid var(--line-dark);border-radius:3px;
  padding:13px 15px;color:#fff;font-family:inherit;font-size:.9rem;transition:.2s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--signal);background:var(--steel-800)}
.field textarea{resize:vertical;min-height:130px}
.consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--text-on-dark)}
.consent a{color:var(--signal);text-decoration:underline}
.form-submit{grid-column:1/-1}
.form-note{grid-column:1/-1;font-family:"Roboto Mono";font-size:.72rem;color:var(--signal);margin-top:6px}

/* ============ FOOTER ============ */
footer{background:var(--steel-900);color:var(--text-on-dark);padding:64px 0 30px;margin-top:56px}
.foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;padding-bottom:40px;border-bottom:1px solid var(--line-dark)}
.foot-logo{height:34px;width:auto;display:block;margin-bottom:16px}
.foot-brand .jp{font-family:"Zen Kaku Gothic New";font-weight:900;color:#fff;font-size:1.4rem;letter-spacing:.04em}
.foot-brand .en{font-family:"Archivo";font-weight:700;font-size:.62rem;letter-spacing:.22em;color:var(--signal);text-transform:uppercase;margin-top:4px}
.foot-brand address{font-style:normal;font-size:.82rem;margin-top:16px;line-height:1.9;font-family:"Roboto Mono"}
.foot-brand address a{color:inherit;text-decoration:none}
.foot-nav{display:flex;gap:60px;flex-wrap:wrap}
.foot-nav .col h5{font-family:"Archivo";font-weight:700;font-size:.66rem;letter-spacing:.16em;color:var(--signal);text-transform:uppercase;margin-bottom:14px}
.foot-nav .col a{display:block;font-size:.86rem;padding:5px 0;transition:.2s}
.foot-nav .col a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:26px;font-size:.74rem;font-family:"Roboto Mono"}
.foot-bottom a{margin-left:20px}
.foot-bottom a:hover{color:var(--signal)}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .nav-links{display:none}
  .burger{display:flex}
  .hero-inner{min-height:auto;padding-top:60px}
  .strength-msg{grid-template-columns:1fr}
  .strength-msg .stripe{min-height:120px}
  .facility-grid,.company-cols,.company-links,.msg-block,.contact-layout{grid-template-columns:1fr}
  .msg-visual{aspect-ratio:1/1;max-width:420px}
  .msg-visual img{object-position:50% 36%} /* 正方形で顔（写真の上17〜46%）を上半分、名前を胸元に置く */
  .clients{grid-template-columns:repeat(2,1fr)}
  .works-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .form-grid{grid-template-columns:1fr}
  .works-grid{grid-template-columns:1fr}
  .hero-tags span{font-size:.66rem}
  .spec-row,.info-row,.company-stack .info-row{grid-template-columns:110px 1fr}
  .company-stack .map-ph{height:220px}
}

/* ヒーローの お問い合わせ ボタン：白背景・緑テキスト */
.hero .btn-primary{background:#fff;color:var(--signal-deep)}
.hero .btn-primary:hover{background:var(--signal-deep);color:#fff;transform:translateY(-2px)}

/* 導線カード（ラインビルダー下）を白背景に */
.builder-links .blink{background:#fff;border:1px solid var(--surface-2);box-shadow:0 10px 28px rgba(26,117,53,.07)}
.builder-links .blink:hover{border-color:var(--signal)}
.builder-links .blink h4{color:var(--signal-deep)}
.builder-links .blink p{color:var(--text-mute)}
.builder-links .blink .en{color:var(--signal-deep)}
.builder-links .blink .go{color:var(--signal-deep)}

/* お問い合わせ CTA：フォーム＋電話 の2ボタン横並び */
.cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.cta-note{color:var(--text-on-dark);font-family:"Roboto Mono";font-size:.82rem;margin-top:-10px}
.contact .btn-primary{background:#fff;color:var(--signal-deep)}
.contact .btn-primary:hover{background:var(--signal-deep);color:#fff;transform:translateY(-2px)}
/* 電話導線：白塗り＋緑番号＋受話器アイコンで「電話できる」と一目で伝える */
.cta-tel-btn{background:#fff;border-color:#fff;color:var(--signal-deep);display:inline-flex;align-items:center;gap:12px;padding:12px 26px;text-align:left}
.cta-tel-btn:hover{background:var(--surface);border-color:var(--surface);color:var(--ink);transform:translateY(-2px)}
.cta-tel-btn .ct-ico{width:26px;height:26px;flex:none;color:var(--signal-deep)}
.cta-tel-btn:hover .ct-ico{color:var(--ink)}
.cta-tel-btn .ct-txt{display:flex;flex-direction:column;line-height:1.1;gap:3px}
.cta-tel-btn .ct-lbl{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.02em;color:var(--text-mute)}
.cta-tel-btn:hover .ct-lbl{color:var(--text-mute)}
.cta-tel-btn .ct-num{font-family:"Roboto Mono";font-weight:700;font-size:1.34rem;letter-spacing:.01em}

/* ===== 画像 置くだけ方式（ファイル名を合わせて配置するだけで表示） ===== */
.sphoto img,.bphoto img,.pvis img,.wvis img,.msg-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.ph-loaded .ph-tag,.ph-loaded .ph-ic,.ph-loaded .cat,.ph-loaded>svg,.ph-loaded .ph{display:none}
/* 文字を重ねる枠（施工実績・代表メッセージ）は写真を背面に＋可読性スクリム */
.wvis img,.msg-visual img{z-index:0}
.wvis::after,.msg-visual::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(26,117,53,.10) 40%,rgba(26,117,53,.66) 100%);opacity:0}
.wvis.ph-loaded::after,.msg-visual.ph-loaded::after{opacity:1}
.wvis .tag,.wvis h4,.msg-visual .rep,.msg-visual .ph{z-index:2}

/* ===== 下層ページ用 ===== */
.page-head{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:clamp(132px,11vw,164px) 0 clamp(64px,7vw,100px)}
.page-head .ph-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-head::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(26,117,53,.93) 0%,rgba(26,117,53,.66) 58%,rgba(26,117,53,.5) 100%)}
.page-head .wrap{position:relative;z-index:2}
.page-head .bc{position:absolute;bottom:20px;right:var(--pad);z-index:3;font-family:"Roboto Mono";font-size:.72rem;color:var(--text-on-dark);margin-bottom:0;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.page-head .bc a:hover{color:var(--signal)} .page-head .bc .sep{color:var(--signal)}
.page-head .en{font-family:"Archivo";font-weight:800;text-transform:uppercase;color:var(--signal);display:block;font-size:.86rem;letter-spacing:.12em;margin-bottom:6px}
.page-head h1{font-size:clamp(1.8rem,4.5vw,3rem);word-break:keep-all;line-break:strict}
.page-head .lead{color:var(--text-on-dark);max-width:840px;margin-top:16px}
.legal{max-width:860px}
.legal h3{font-size:1.12rem;margin:30px 0 10px}
.legal p{color:var(--text-mute);margin-bottom:12px;font-size:.95rem}
.legal ul{color:var(--text-mute);margin:0 0 14px 1.3em;font-size:.95rem;line-height:1.9}
.cta-center{text-align:center;padding:clamp(40px,5vw,64px) 0}
.cta-center p{color:var(--text-mute);margin-bottom:24px;font-size:1rem}
/* facility-visual も置くだけ対応 */
.facility-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block}
.facility-visual::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(26,117,53,.72) 0%,rgba(26,117,53,.86) 100%);opacity:0}
.facility-visual.ph-loaded::after{opacity:1}
.facility-visual .ph-tag,.facility-visual .big,.facility-visual .stat-row{position:relative;z-index:2}

/* ── 現在地のナビを点灯 ───────────────────────── */
.nav-links a[aria-current]{color:var(--signal-deep);font-weight:700}
.nav-links a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--signal-deep)}
.nav-links a[aria-current] .lbl{color:var(--signal-deep)}
/* 採用情報が増えた分、中間幅で詰める */
@media (max-width:1080px){.nav-links{gap:22px}}

/* ── お問い合わせ：電話リンク ───────────────────── */

/* ── お問い合わせ：バリデーションエラー（濃色背景の上） ── */
.form-errors{
  grid-column:1/-1;
  background:rgba(255,72,72,.1);
  border:1px solid rgba(255,120,120,.55);
  border-left:3px solid #ff6b6b;
  border-radius:2px;
  padding:16px 18px;
  color:var(--text-on-dark);
  font-size:.86rem;
}
.form-errors p{margin:0 0 8px;color:#ffb4b4}
.form-errors ul{margin:0;padding-left:1.2em;list-style:disc}
.form-errors li{margin:3px 0}

/* ── グローバルナビ：英語表記のみ ───────────────── */
.nav-links a:not(.nav-cta){
  font-family:"Archivo",sans-serif;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ── アンカーリンク：sticky ヘッダーの下に潜らせない ── */
section[id]{scroll-margin-top:90px}

/* 強みセクション → 詳細ページへの導線 */
.strength-grid + .cta-center{margin-top:clamp(36px,5vw,56px)}

/* ── 当社の強み（下層）：5項目を左右交互に紹介 ───────── */
.str-rows{
  display:flex;flex-direction:column;
  gap:clamp(56px,7vw,100px);
  margin-top:clamp(48px,6vw,84px);
}
.str-row{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,68px);align-items:center;
}
/* 偶数行は写真を右に回して左右交互にする */
.str-row:nth-child(even) .srow-vis{order:2}

.srow-vis{
  aspect-ratio:4/3;position:relative;overflow:hidden;border-radius:4px;
  background:linear-gradient(155deg,var(--steel-800),var(--ink));
}
.srow-vis .ph-tag{
  position:absolute;top:12px;left:12px;z-index:2;
  font-family:"Roboto Mono";font-size:.6rem;letter-spacing:.08em;color:#fff;
  background:rgba(26,117,53,.55);padding:4px 8px;border-radius:2px;
}
.srow-vis .ph-ic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.srow-vis .ph-ic svg{width:48px;height:48px;stroke:var(--signal);opacity:.85;fill:none}

.srow-body .num{
  font-family:"Archivo";font-weight:800;font-size:clamp(6rem,11vw,10rem);line-height:1;
  color:var(--surface-2);display:block;
}
.srow-body .en{
  font-family:"Archivo";font-weight:700;font-size:.72rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--signal-deep);
  display:inline-flex;align-items:center;gap:.65rem;margin-top:14px;
}
.srow-body .en::before{content:"";width:26px;height:2px;background:var(--signal-deep);display:inline-block}
.srow-body h2{
  font-size:clamp(1.35rem,2.6vw,1.9rem);margin:14px 0 16px;
  word-break:keep-all;overflow-wrap:normal;line-break:strict;
}
.srow-body p{color:var(--text-mute);font-size:1rem;line-height:1.9}

@media (max-width:900px){
  .str-row{grid-template-columns:1fr;gap:24px}
  .str-row .srow-body{order:1}
  .str-row .srow-vis{order:2}
  .str-row:nth-child(even) .srow-vis{order:2}
  .srow-body .num{font-size:clamp(4.2rem,17vw,5.6rem)}
}

/* ── TOP：強みの写真カルーセル（無限ループ） ───────── */
.photo-marquee{
  position:relative;overflow:hidden;
  margin-top:clamp(36px,5vw,56px);
}
.pm-track{
  display:flex;gap:16px;width:max-content;
  animation:pm-scroll 45s linear infinite;
}
.pm-item{
  flex:0 0 auto;
  width:clamp(240px,26vw,380px);aspect-ratio:4/3;
  border-radius:4px;overflow:hidden;
  background:linear-gradient(155deg,var(--steel-800),var(--ink));
}
.pm-item img{width:100%;height:100%;object-fit:cover;display:block}

/* 2セット出力しているので、1セット分（=50% + gap半分）ずらすと継ぎ目なくループする */
@keyframes pm-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 8px))}
}

/* ── 会社案内の導線カード：背景に写真を敷く ───────── */
.company-links .blink{padding:36px 34px;min-height:230px;display:flex;flex-direction:column}
.company-links .blink img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;transition:transform .5s ease;
}
.company-links .blink:hover img{transform:scale(1.06)}
/* 写真の上に濃い緑をかけて白文字の可読性を確保 */
.company-links .blink::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(118deg,rgba(26,117,53,.94) 0%,rgba(26,117,53,.80) 45%,rgba(10,100,32,.62) 100%);
  transition:opacity .35s ease;
}
.company-links .blink:hover::before{opacity:.88}
.company-links .blink > *:not(img){position:relative;z-index:2}
.company-links .blink .go{margin-top:auto;padding-top:18px}

/* 会社概要：Googleマップ埋め込み */
.map-embed{margin-top:34px;border-radius:4px;overflow:hidden;border:1px solid var(--surface-2);line-height:0}
.map-embed iframe{width:100%;height:400px;border:0;display:block}
@media (max-width:560px){.map-embed iframe{height:260px}}

/* ============ 採用情報 ============ */
/* 現場写真（縦長にせず横長で見せる） */
.rec-visual{aspect-ratio:4/3}

/* 働く環境の4つの魅力 */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--surface-2);border:1px solid var(--surface-2)}
.feat{background:var(--paper);overflow:hidden}
.feat-img{aspect-ratio:16/9;overflow:hidden;background:linear-gradient(150deg,var(--steel-800),var(--ink))}
.feat-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.feat:hover .feat-img img{transform:scale(1.05)}
.feat-body{padding:26px 28px 32px}
.feat .fnum{
  font-family:"Archivo";font-weight:800;font-size:1.6rem;line-height:1;
  color:var(--signal-deep);display:block;margin-bottom:16px;
}
.feat h4{font-size:1.05rem;line-height:1.5;margin-bottom:12px;word-break:keep-all}
.feat p{font-size:.86rem;color:var(--text-mute);line-height:1.8}

/* 募集職種：左右交互 */
.job-rows{display:flex;flex-direction:column;gap:clamp(48px,6vw,88px)}
.job-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.job-row:nth-child(even) .job-vis{order:2}
.job-vis{
  aspect-ratio:16/10;position:relative;overflow:hidden;border-radius:4px;
  background:linear-gradient(155deg,var(--steel-800),var(--ink));
}
.job-vis .ph-tag{
  position:absolute;top:12px;left:12px;z-index:2;
  font-family:"Roboto Mono";font-size:.6rem;letter-spacing:.08em;color:#fff;
  background:rgba(26,117,53,.55);padding:4px 8px;border-radius:2px;
}
.job-body .num{font-family:"Archivo";font-weight:800;font-size:clamp(6rem,11vw,10rem);line-height:1;color:var(--surface-2);display:block}
.job-body .en{
  font-family:"Archivo";font-weight:700;font-size:.7rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--signal-deep);
  display:inline-flex;align-items:center;gap:.6rem;margin-top:12px;
}
.job-body .en::before{content:"";width:24px;height:2px;background:var(--signal-deep);display:inline-block}
.job-body h3{font-size:clamp(1.2rem,2.2vw,1.6rem);margin:12px 0 14px;word-break:keep-all}
.job-body p{color:var(--text-mute);font-size:.95rem;line-height:1.9}
.job-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.job-tags span{
  font-family:"Roboto Mono";font-size:.7rem;letter-spacing:.04em;
  color:var(--signal-deep);border:1px solid var(--surface-2);
  background:var(--surface);padding:6px 11px;border-radius:2px;
}

/* 一緒に働く仲間 */
.life-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.life-vis{
  aspect-ratio:16/10;position:relative;overflow:hidden;border-radius:4px;
  background:linear-gradient(155deg,var(--steel-800),var(--ink));
}
.life-vis .ph-tag{
  position:absolute;top:12px;left:12px;z-index:2;
  font-family:"Roboto Mono";font-size:.6rem;letter-spacing:.08em;color:#fff;
  background:rgba(26,117,53,.55);padding:4px 8px;border-radius:2px;
}

/* ラインビルダーのフロー（濃色背景）：各工程をパネルにして読みやすく */
@media(min-width:901px){.flow{gap:18px}}
.flow-step{display:flex;flex-direction:column}
.flow .fs-card{flex:1;background:#fff;border:0;border-radius:10px;padding:20px 16px 22px;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.flow .fs-card .fn{font-size:.78rem;letter-spacing:.16em;color:var(--signal-deep)}
.flow .fs-card h4{font-size:1.18rem;margin:8px 0 10px;color:var(--signal-deep)}
.flow .fs-card p{font-size:.9rem;line-height:1.75;color:var(--text);word-break:auto-phrase}
@media(max-width:900px){.flow .fs-card{padding:14px 16px 16px}.flow .fs-card h4{margin:4px 0 6px}.flow:not(.flow--light) .flow-step .dot{top:15px}.flow:not(.flow--light) .flow-step::after{top:31px;bottom:-15px}}

/* 選考フロー：白背景版（.flow は濃色背景前提で白文字なので上書きする） */
.flow--light .flow-step h4{color:var(--signal-deep)}
.flow--light .flow-step .dot{background:var(--paper);border-color:var(--signal-deep)}
.flow--light .flow-step .fn{color:var(--signal-deep)}
.flow--light::before{background:var(--signal-deep)}
.flow--light .flow-step p{color:var(--text-mute)}

@media (max-width:900px){
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .job-row{grid-template-columns:1fr;gap:20px}
  .job-row:nth-child(even) .job-vis{order:0}
  .life-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .feat-grid{grid-template-columns:1fr}
}

/* ── お問い合わせページ：白ベース版 ─────────────────
   .contact は濃い緑・白文字が前提。フォーム単体のページは白地にするため上書きする。
   （トップ／採用ページのCTAセクションは濃い緑のまま） */
.contact--light{background:var(--paper);color:var(--text)}
.contact--light .sec-head h2{color:var(--signal-deep)}
.contact--light .lead{color:var(--text-mute)}

.contact--light .field label{color:var(--text)}
.contact--light .field label .req{background:var(--signal-deep);color:#fff}
.contact--light .field input,
.contact--light .field select,
.contact--light .field textarea{
  background:var(--paper);border:1px solid var(--surface-2);color:var(--text);
}
.contact--light .field input::placeholder,
.contact--light .field textarea::placeholder{color:var(--text-mute);opacity:.7}
.contact--light .field input:focus,
.contact--light .field select:focus,
.contact--light .field textarea:focus{
  border-color:var(--signal-deep);background:var(--surface);
}

.contact--light .consent{color:var(--text)}
.contact--light .consent a{color:var(--signal-deep)}

/* 白地の上ではボタンも通常の緑ボタンに戻す（.contact の白背景ボタン上書きを打ち消す） */
.contact--light .btn-primary{background:var(--btn-green)!important;color:#fff!important}
.contact--light .btn-primary:hover{background:var(--ink)!important;color:#fff!important}

/* エラー表示も白地用に */
.contact--light .form-errors{
  background:#FDECEC;border-color:#E7A9A9;border-left-color:#C0392B;color:var(--text);
}
.contact--light .form-errors p{color:#C0392B}

/* ── TOPのCONTACT：背景に写真 ─────────────────────
   url() は静的書き出しのパス変換対象外なので、CSSからの相対パスで書くこと
   （/css/style.css 基準 → ../images/… ならサブパス配信でも解決する） */
.contact-photo{position:relative;overflow:hidden;padding:clamp(56px,6.5vw,88px) 0} /* 2026-10-27 高さを詰めた（.section 既定は最大130px） */
.contact-photo::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url(../images/contact-bg.jpg) center/cover no-repeat;
}
/* 文字のある左側だけ緑を残し、右へ抜いて写真の色を見せる（2026-10-27 採用バナーと同じ抜け具合に） */
.contact-photo::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(26,117,53,.82) 0%,rgba(26,117,53,.5) 42%,rgba(26,117,53,.08) 78%,rgba(26,117,53,0) 100%);
}
.contact-photo > .wrap{position:relative;z-index:2;text-shadow:0 1px 14px rgba(0,40,15,.4)}
.contact-photo .btn,.contact-photo .cta-tel-btn{text-shadow:none}
@media(max-width:760px){.contact-photo::after{background:linear-gradient(180deg,rgba(26,117,53,.78) 0%,rgba(26,117,53,.6) 62%,rgba(26,117,53,.4) 100%)}}

/* 採用ページの ENTRY：人物写真を背景に（トップの CONTACT とは別カット） */
.contact-photo--recruit::before{background-image:url(../images/recruit/entry-bg.jpg)}
/* 背景が白い建物と空で明るいので、トップより膜を濃いめに残す */
@media(min-width:761px){.contact-photo--recruit::after{background:linear-gradient(100deg,rgba(26,117,53,.86) 0%,rgba(26,117,53,.66) 45%,rgba(26,117,53,.32) 80%,rgba(26,117,53,.18) 100%)}}

/* ============ STRENGTHS = FEATURE（ハブ&スポーク） ============ */
.feature{padding-top:clamp(52px,6vw,84px);padding-bottom:clamp(52px,6vw,84px)}
.feature .wrap{position:relative}
.feat-layout{position:relative;z-index:2;display:grid;grid-template-columns:.82fr 1fr;gap:clamp(34px,4vw,68px);align-items:center;padding-top:clamp(58px,7vw,104px)}
.feat-left{display:flex;flex-direction:column}
.feat-right{display:flex;flex-direction:column;gap:14px}
.feat-hub-wrap{position:relative;width:400px;height:387px;margin:0 auto 6px;flex:0 0 auto}
.feat-huge{position:absolute;top:-24px;left:var(--pad);font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(80px,13vw,190px);line-height:1;color:var(--surface);z-index:0;user-select:none;pointer-events:none;letter-spacing:.02em}
.feat-intro{position:static;width:auto;z-index:5}
.feat-intro h2{font-size:2.4rem;margin:16px 0 20px;color:var(--signal-deep)}
.feat-intro .lead{margin-top:0;margin-bottom:32px}
.feat-hub{position:absolute;top:0;left:0;width:600px;height:580px;transform:scale(.667);transform-origin:top left;z-index:2}
.feat-hub .hub-bg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.feat-node{position:absolute;background:#fff;border-radius:50%;box-shadow:0 20px 50px rgba(26,117,53,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:2}
.feat-node .ic{color:var(--signal-deep);line-height:0}
.feat-node .nlabel{font-family:"Zen Kaku Gothic New";font-weight:700;color:var(--signal-deep);margin-top:8px;font-size:1.02rem}
.hub-center{width:224px;height:224px;left:50%;top:50%;transform:translate(-50%,-50%)}
.hub-center .logo{height:34px;width:auto}
.hub-center .cname{font-family:"Zen Kaku Gothic New";font-weight:900;color:var(--signal-deep);font-size:1.02rem;margin-top:12px;letter-spacing:.06em}
.hub-center .ctag{font-family:"Archivo";font-weight:700;font-size:.56rem;letter-spacing:.22em;color:var(--signal-deep);margin-top:5px}
.feat-sat{width:158px;height:158px}
.sat-top{left:50%;top:0;transform:translateX(-50%)}
.sat-bl{left:8px;bottom:6px}
.sat-br{right:8px;bottom:6px}
.feat-box{position:static;width:auto;background:var(--surface);border:1px solid var(--surface-2);border-radius:14px;padding:22px 26px;z-index:4}
.feat-box .bhead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.feat-box .bhead .bic{width:26px;height:26px;color:var(--signal-deep);flex:0 0 auto;line-height:0}
.feat-box .bhead h3{font-size:1.22rem;color:var(--signal-deep)}
.feat-box ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.feat-box li{position:relative;padding-left:20px;font-size:.9rem;color:var(--text);line-height:1.55}
.feat-box li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--signal-deep)}
.box-tr{top:36px;right:var(--pad)}
.box-bl{bottom:34px;left:var(--pad)}
.box-br{bottom:34px;right:var(--pad)}
/* 強みの各ボックス：テキスト左 ＋ 写真右 */
.feat-box{display:flex;gap:22px;align-items:center}
.feat-box .fb-text{flex:1 1 auto;min-width:0}
.feat-box .fb-img{flex:0 0 36%;align-self:stretch;min-height:150px;border-radius:10px;overflow:hidden}
.feat-box .fb-img img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:1040px){
  .feat-huge{position:static;font-size:52px;margin-bottom:-2px;color:var(--surface-2)}
  .feat-layout{grid-template-columns:1fr;gap:26px;padding-top:14px}
  .feat-hub-wrap{display:none}
}
@media(max-width:560px){
  .feat-box{flex-direction:column;align-items:stretch;gap:16px}
  .feat-box .fb-img{flex-basis:auto;width:100%;min-height:170px}
}

/* ============ COMPANY = ABOUT ============ */
#works{padding-bottom:clamp(40px,5vw,58px)}
.about-sec{position:relative;overflow:hidden;padding-top:clamp(20px,2.6vw,34px)}
.about-band{position:absolute;top:0;left:0;right:0;height:210px;background:var(--surface);z-index:0}
.about-head{position:relative;z-index:2;text-align:center}
.about-head .eyebrow{justify-content:center}
.about-head h2{font-size:clamp(1.8rem,4vw,2.9rem);letter-spacing:.12em;color:var(--signal-deep);margin-top:14px}
.about-head .divider{width:1px;height:132px;background:linear-gradient(var(--signal-deep),rgba(0,128,0,0));margin:24px auto 0}
.about-body{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;margin-top:22px}
.about-left{position:relative}
.about-left::before{content:"";position:absolute;left:-90px;top:-30px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(47,186,79,.20),rgba(47,186,79,0) 70%);z-index:-1}
.about-left h3{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.5;color:var(--signal-deep);margin-bottom:24px}
.about-left p{color:var(--text-mute);font-size:.98rem;margin-bottom:32px}
.about-cta{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.about-cta .blink-text{color:var(--signal-deep);font-weight:700;font-size:.92rem}
.about-cta .blink-text:hover{text-decoration:underline}
.about-photos{position:relative;height:560px}
.about-photos .ph{position:absolute;border-radius:2px;overflow:hidden;box-shadow:0 24px 50px rgba(26,117,53,.16)}
/* 写真が届くまで真っ白に見えないよう下地色を敷く（先方サーバーは転送が遅め） */
.about-photos .ph,.feat-box .fb-img,.history-photos img,.life-vis,.job-vis{background:var(--surface-2)}
.about-photos .ph img{width:100%;height:100%;object-fit:cover}
.about-photos .p1{width:320px;height:430px;left:0;top:40px;z-index:2}
.about-photos .p2{width:300px;height:400px;left:290px;top:150px;z-index:3}
.about-photos .p3{width:250px;height:330px;right:0;top:0;z-index:1}
@media(max-width:900px){
  .about-band{height:210px}
  .about-head .divider{height:72px}
  .about-body{grid-template-columns:1fr;gap:36px}
  /* スマホは横スクロールさせず、上に大1枚・下に2枚並びで収める */
  .about-photos{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow:visible;padding-bottom:0}
  .about-photos .ph{position:static;width:auto;height:auto;aspect-ratio:4/5;box-shadow:0 12px 26px rgba(26,117,53,.12)}
  .about-photos .p1{grid-column:1 / -1;aspect-ratio:16/10}
}

/* ============ RECRUIT HERO（フルブリード写真ヘッダー） ============ */
.rec-hero{position:relative;min-height:560px;display:flex;align-items:center;background:var(--ink) center/cover no-repeat;overflow:hidden}
.rec-hero .rh-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.rec-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(26,117,53,.84) 0%,rgba(26,117,53,.58) 40%,rgba(26,117,53,.12) 76%,rgba(26,117,53,0) 100%)} /* 2026-10-27 CONTACT と同じくらいの薄さに（黒の膜は外した） */
.rec-hero .wrap>*{text-shadow:0 1px 14px rgba(0,40,15,.4)}
@media(max-width:700px){.rec-hero::after{background:linear-gradient(180deg,rgba(26,117,53,.78) 0%,rgba(26,117,53,.62) 60%,rgba(26,117,53,.45) 100%)}}
.rec-hero .wrap{position:relative;z-index:2;width:100%;padding-top:130px;padding-bottom:74px}
.rh-eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.rh-eyebrow .ln{width:56px;height:1px;background:var(--signal)}
.rh-eyebrow .en{font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:.3em;font-size:.8rem;color:var(--signal)}
.rh-eyebrow .jp{font-family:"Zen Kaku Gothic New";font-weight:700;color:#fff;font-size:.92rem;letter-spacing:.14em}
.rec-hero h1{font-size:clamp(1.8rem,4.2vw,3.1rem);color:#fff;margin-bottom:28px;letter-spacing:.02em;line-height:1.4}
.rec-hero p{color:var(--text-on-dark);font-size:1rem;max-width:44em;margin-bottom:14px;word-break:auto-phrase}
@media(max-width:700px){.rec-hero{min-height:0}.rec-hero .wrap{padding-top:112px;padding-bottom:56px}}

/* ============ RECRUIT BANNER（会社案内と問い合わせの間） ============ */
.recruit-banner-sec{padding:clamp(44px,5vw,72px) 0}
.recruit-banner{position:relative;overflow:hidden;background:var(--ink);border-radius:14px}
.recruit-banner .rb-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.recruit-banner::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(26,117,53,.82) 0%,rgba(26,117,53,.5) 42%,rgba(26,117,53,.08) 78%,rgba(26,117,53,0) 100%)} /* 2026-10-27 写真の色を見せる */
.rb-text{text-shadow:0 1px 14px rgba(0,40,15,.35)}
.rb-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:44px;padding:clamp(40px,5vw,60px) clamp(30px,4.5vw,60px);flex-wrap:wrap}
.rb-text{flex:1;min-width:300px}
.rb-text .eyebrow{margin-bottom:14px}
.rb-text h2{color:#fff;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.45;margin-bottom:14px}
.rb-text p{color:var(--text-on-dark);font-size:.98rem;max-width:40em}
.recruit-banner .btn-primary{background:#fff;color:var(--signal-deep);flex:0 0 auto}
.recruit-banner .btn-primary:hover{background:var(--signal-deep);color:#fff}
@media(max-width:760px){.rb-inner{flex-direction:column;align-items:flex-start;gap:26px}.recruit-banner::after{background:linear-gradient(180deg,rgba(26,117,53,.78) 0%,rgba(26,117,53,.6) 62%,rgba(26,117,53,.4) 100%)}}

/* ============ パンくず帯（page-head直下） ============ */
.crumb-bar{background:var(--surface);border-bottom:1px solid var(--surface-2)}
.crumb-bar .bc{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;font-family:"Roboto Mono";font-size:.72rem;color:var(--text-mute);padding:13px 0;margin:0}
.crumb-bar .bc a:hover{color:var(--signal-deep)}
.crumb-bar .bc .sep{color:var(--signal-deep)}

/* reCAPTCHA：バッジは隠し、規約の表記をフォーム下に出す（Google が認める表示方法） */
.grecaptcha-badge{visibility:hidden}
.rc-note{grid-column:1/-1;margin:0;font-size:.74rem;line-height:1.7;color:var(--text-on-dark);opacity:.75}
.rc-note a{color:inherit;text-decoration:underline}
.contact--light .rc-note{color:var(--text-mute);opacity:1}