/* ============================================================
   NIKKI D案 リファイン — 濃紺 × ゴールド（ボタン/アクセント限定）
   元: wp-theme-nikki-d / assets/css/scheme-d.css のトークンを踏襲
   ============================================================ */
:root {
  --nv: #14213d; --nv2: #1a2947; --nv3: #0f1a30; --nv4: #223258;
  --ink: #e6ebf5; --ink2: #b8c2d6; --ink3: #8290ad; --line: #2a3a5c;
  --gd: #c9a961; --gd2: #b8975a; --gd3: #e0c88a;
  --paper: #f7f6f2; --txt: #1d2230; --txt2: #4a5060; --txt3: #7a8090;
  --hair: rgba(20,33,61,.1);
  --f-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --f-head: var(--f-jp);
  --f-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --hdr: 76px;
  --vh: 100vh;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #dcd9d1; }
body { font-family: var(--f-jp); color: var(--txt); -webkit-font-smoothing: antialiased; font-feature-settings: "palt"; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ---------- 共通 ---------- */
.nk-wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.nk-sec { padding: 120px 0; }
.nk-sec.paper { background: var(--paper); }
.nk-sec.navy { background: var(--nv); color: #fff; }
.nk-en {
  font-family: var(--f-en); font-size: 12px; font-weight: 600; letter-spacing: .32em;
  text-transform: uppercase; color: var(--gd2); display: inline-flex; align-items: center; gap: 14px;
}
.nk-en::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.navy .nk-en, .nk-dark .nk-en { color: var(--gd3); }
.nk-h2 {
  font-family: var(--f-head); font-weight: 700; font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.45; letter-spacing: .06em; color: var(--nv); margin: 16px 0 0; text-wrap: pretty;
}
.navy .nk-h2 { color: #fff; }
.nk-lead { color: var(--txt2); font-size: 15px; line-height: 2; margin: 24px 0 0; max-width: 620px; text-wrap: pretty; }
.navy .nk-lead { color: var(--ink2); }
.nk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 64px; }
.nk-head.center { flex-direction: column; align-items: center; text-align: center; }
.nk-head.center .nk-lead { margin-left: auto; margin-right: auto; }

.nk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  padding: 17px 34px; border-radius: 2px; font-weight: 700; font-size: 14px; letter-spacing: .08em;
  border: 1px solid transparent; transition: transform .25s, box-shadow .25s, background .25s, color .25s, border-color .25s;
  white-space: nowrap;
}
.nk-btn svg { transition: transform .25s; }
.nk-btn:hover svg { transform: translateX(4px); }
.nk-btn.gold {
  background: linear-gradient(180deg, var(--gd3) 0%, var(--gd) 55%, var(--gd2) 100%);
  color: #16140e; border-color: var(--gd2); box-shadow: 0 6px 20px color-mix(in srgb, var(--gd) 30%, transparent);
}
.nk-btn.gold:hover { transform: translateY(-2px); box-shadow: 0 10px 28px color-mix(in srgb, var(--gd) 45%, transparent); }
.nk-btn.ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.nk-btn.ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.nk-btn.line { color: var(--nv); border-color: var(--nv); }
.nk-btn.line:hover { background: var(--nv); color: #fff; }
.nk-more {
  display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--nv);
}
.nk-more .ar { width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; transition: background .25s, color .25s, border-color .25s; }
.nk-more:hover .ar { background: var(--gd); border-color: var(--gd); color: var(--nv); }

/* reveal */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; } .rv.d4 { transition-delay: .32s; }
.no-motion .rv { opacity: 1; transform: none; transition: none; }
.no-motion * { animation: none !important; }

/* ---------- HEADER ---------- */
.nk-header {
  position: sticky; top: 0; z-index: 40; height: var(--hdr);
  transition: background .35s, box-shadow .35s, backdrop-filter .35s;
  background: color-mix(in srgb, var(--nv) 0%, transparent);
}
.nk-header.solid { background: color-mix(in srgb, var(--nv) 96%, transparent); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(8px); }
.nk-header .in { height: 100%; max-width: 1440px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; gap: 32px; }
.nk-logo { display: flex; align-items: center; flex-shrink: 0; }
.nk-logo img { height: 46px; width: auto; filter: invert(1); mix-blend-mode: screen; }
.nk-nav { margin-left: auto; display: flex; gap: 2px; }
.nk-nav a {
  position: relative; padding: 10px 16px; color: var(--ink); font-size: 14px; font-weight: 500; letter-spacing: .06em; cursor: pointer;
  transition: color .2s;
}
.nk-nav a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 1px; background: var(--gd); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.nk-nav a:hover { color: var(--gd3); }
.nk-nav a:hover::after, .nk-nav a.on::after { transform: scaleX(1); }
.nk-nav a.on { color: var(--gd); font-weight: 700; }
.nk-hdr-tel { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; color: var(--ink); }
.nk-hdr-tel small { font-size: 10px; letter-spacing: .14em; color: var(--ink3); }
.nk-hdr-tel b { font-family: var(--f-en); font-size: 17px; letter-spacing: .04em; }
.nk-header .nk-btn { padding: 12px 22px; font-size: 13px; }
.nk-burger { display: none; margin-left: auto; width: 44px; height: 44px; background: none; border: 0; position: relative; }
.nk-burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: #fff; transition: transform .3s, opacity .3s; }
.nk-burger span:nth-child(1) { top: 16px; } .nk-burger span:nth-child(2) { top: 22px; } .nk-burger span:nth-child(3) { top: 28px; }
.nk-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nk-burger.open span:nth-child(2) { opacity: 0; }
.nk-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nk-drawer {
  position: fixed; inset: 0; z-index: 39; background: var(--nv3); color: #fff;
  padding: calc(var(--hdr) + 24px) 28px 40px; display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; transition: opacity .35s;
}
.nk-drawer.open { opacity: 1; pointer-events: auto; }
.nk-drawer a.item { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 700; letter-spacing: .06em; cursor: pointer; }
.nk-drawer a.item small { font-family: var(--f-en); font-size: 11px; letter-spacing: .24em; color: var(--gd3); font-weight: 500; text-transform: uppercase; }
.nk-drawer a.item.on { color: var(--gd); }
.nk-drawer .foot { margin-top: auto; display: grid; gap: 12px; }
.nk-drawer .foot a.tel { text-align: center; padding: 14px; border: 1px solid var(--line); font-family: var(--f-en); font-weight: 700; font-size: 18px; }

/* ---------- FOOTER ---------- */
.nk-footer { background: var(--nv3); color: var(--ink2); padding: 88px 0 32px; }
.nk-footer .grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; }
.nk-footer .logo img { height: 56px; filter: invert(1); mix-blend-mode: screen; }
.nk-footer .meta { font-size: 13px; line-height: 2; margin-top: 24px; }
.nk-footer h5 { font-family: var(--f-en); font-size: 11px; letter-spacing: .3em; color: var(--gd3); margin: 0 0 20px; font-weight: 600; }
.nk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 13px; }
.nk-footer ul a { cursor: pointer; transition: color .2s; }
.nk-footer ul a:hover { color: #fff; }
.nk-footer .bottom { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; font-size: 11px; color: var(--ink3); letter-spacing: .06em; }
.nk-footer .ftel { font-family: var(--f-en); font-size: 22px; font-weight: 700; color: #fff; letter-spacing: .03em; display: block; }

/* ---------- PAGE HERO（下層） ---------- */
.nk-phero { position: relative; margin-top: calc(var(--hdr) * -1); padding: calc(var(--hdr) + 96px) 0 88px; background: var(--nv); color: #fff; overflow: hidden; }
.nk-phero .bg { position: absolute; inset: 0 0 0 42%; background: center/cover no-repeat; opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.nk-phero .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--nv), transparent 50%); }
.nk-phero .wm { position: absolute; right: -0.04em; bottom: -0.22em; font-family: var(--f-en); font-weight: 800; font-size: clamp(90px, 16vw, 240px); letter-spacing: -.03em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(224,200,138,.22); pointer-events: none; text-transform: uppercase; }
.nk-phero .nk-wrap { position: relative; }
.nk-crumb { font-size: 12px; color: var(--ink3); letter-spacing: .08em; margin-bottom: 40px; }
.nk-crumb a { cursor: pointer; } .nk-crumb a:hover { color: #fff; }
.nk-phero h1 { font-family: var(--f-head); font-size: clamp(34px, 4.4vw, 58px); font-weight: 700; letter-spacing: .06em; line-height: 1.4; margin: 18px 0 0; }
.nk-phero p { color: var(--ink2); font-size: 15px; line-height: 2; margin: 24px 0 0; max-width: 560px; }
.nk-phero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--gd) 0 120px, transparent 120px); }

/* ---------- CTA ---------- */
.nk-cta { position: relative; padding: 120px 0; background: var(--nv); color: #fff; overflow: hidden; }
.nk-cta .bg { position: absolute; inset: 0; background: center/cover no-repeat; opacity: .18; }
.nk-cta > .nk-wrap.in { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.nk-cta .box { border: 1px solid var(--line); background: color-mix(in srgb, var(--nv3) 70%, transparent); padding: 40px; display: grid; gap: 24px; }
.nk-cta .tel small { display: block; font-size: 11px; letter-spacing: .2em; color: var(--ink3); }
.nk-cta .tel b { font-family: var(--f-en); font-size: 34px; letter-spacing: .02em; }
.nk-cta .tel span { display: block; font-size: 12px; color: var(--ink2); }

/* ============ HOME: HERO 共通 ============ */
.hero { position: relative; margin-top: calc(var(--hdr) * -1); height: max(680px, min(var(--vh), 920px)); background: var(--nv3); color: #fff; overflow: hidden; }
.hero-copy { position: relative; z-index: 3; }
.hero-eyebrow { font-family: var(--f-en); font-size: 12px; letter-spacing: .34em; color: var(--gd3); font-weight: 500; display: inline-flex; align-items: center; gap: 14px; }
.hero-eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--gd); }
.hero h1 { font-family: var(--f-head); font-weight: 700; font-size: clamp(36px, 5.2vw, 72px); line-height: 1.38; letter-spacing: .05em; margin: 28px 0 0; white-space: pre-line; text-wrap: balance; }
.hero-body { font-size: clamp(14px, 1.2vw, 17px); line-height: 2; color: #e8ecf5; max-width: 540px; margin: 28px 0 0; }
.hero-cta { display: flex; gap: 14px; margin-top: 44px; flex-wrap: wrap; }
.hero .line-in { display: block; overflow: hidden; }
.hero .line-in > span { display: inline-block; animation: lineUp 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }
.hero .fade-in { animation: fadeUp 1s .5s cubic-bezier(.2,.8,.2,1) both; }
.hero .fade-in.d2 { animation-delay: .7s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-scroll { position: absolute; right: 40px; bottom: 0; z-index: 4; font-family: var(--f-en); font-size: 10px; letter-spacing: .3em; color: rgba(255,255,255,.7); writing-mode: vertical-rl; display: flex; align-items: center; gap: 14px; }
.hero-scroll i { width: 1px; height: 72px; background: rgba(255,255,255,.2); position: relative; overflow: hidden; }
.hero-scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--gd); animation: scrollLine 2.2s ease-in-out infinite; }
@keyframes scrollLine { to { top: 100%; } }

/* --- A: SLIDER（D案踏襲・洗練） --- */
.hero-a .slide { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0; transition: opacity 1.6s ease; }
.hero-a .slide.on { opacity: 1; }
.hero-a .slide.on .kb { animation: kb 9s ease-out both; }
.hero-a .kb { position: absolute; inset: 0; background: inherit; }
@keyframes kb { from { transform: scale(1.12); } to { transform: scale(1.02); } }
.hero-a .shade { position: absolute; inset: 0; z-index: 2; background:
  linear-gradient(90deg, rgba(15,26,48,.94) 0%, rgba(15,26,48,.75) 38%, rgba(15,26,48,.2) 72%, rgba(15,26,48,.45) 100%),
  linear-gradient(0deg, rgba(15,26,48,.85) 0%, transparent 35%); }
.hero-a .nk-wrap { height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: var(--hdr); max-width: 1440px; }
.hero-a .tabs { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; }
.hero-a .tabs .nk-wrap { height: auto; padding-top: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.hero-a .tab { text-align: left; background: none; border: 0; color: rgba(255,255,255,.6); padding: 22px 20px 26px 0; position: relative; border-top: 1px solid rgba(255,255,255,.18); transition: color .3s; }
.hero-a .tabs a.tab { text-decoration: none; }
.nk-cta .box .nk-btn.yt { margin-top: 14px; color: #fff; border-color: rgba(255,255,255,.55); }
.nk-cta .box .nk-btn.yt:hover { background: #fff; color: var(--nv); }
.tab:hover { color: #fff; }
.hero-a .tab .bar { position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--gd); }
.hero-a .tab.on { color: #fff; }
.hero-a .tab.on .bar { animation: tabbar var(--dur, 6s) linear both; }
@keyframes tabbar { to { width: 100%; } }
.hero-a .tab small { display: block; font-family: var(--f-en); font-size: 11px; letter-spacing: .24em; color: var(--gd3); margin-bottom: 6px; }
.hero-a .tab b { font-size: 15px; letter-spacing: .08em; font-weight: 700; }
.hero-a .tab em { font-style: normal; font-size: 12px; margin-left: 10px; color: rgba(255,255,255,.5); font-weight: 400; }
.hero-a .hero-scroll { bottom: 110px; }
.hero-a .slide.staff { background: linear-gradient(135deg, var(--nv4), var(--nv3)); }

/* --- B: 4パネル（4事業均等） --- */
.hero-b { display: grid; grid-template-rows: 1fr auto; }
.hero-b .panels { position: absolute; inset: 0; display: flex; }
.hero-b .panel { position: relative; flex: 1; overflow: hidden; border-right: 1px solid rgba(255,255,255,.12); transition: flex .8s cubic-bezier(.3,.8,.2,1); cursor: pointer; }
.hero-b .panel:last-child { border-right: 0; }
.hero-b .panel.on { flex: 2.3; }
.hero-b .panel .ph { position: absolute; inset: 0; background: center/cover no-repeat; transform: scale(1.05); transition: transform 1.4s, filter .8s; filter: saturate(.6) brightness(.55); }
.hero-b .panel.on .ph { transform: scale(1); filter: saturate(1) brightness(.8); }
.hero-b .panel .ph.staff { background: radial-gradient(120% 90% at 70% 30%, var(--nv4), var(--nv3)); filter: none; }
.hero-b .panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,26,48,.95) 0%, rgba(15,26,48,.3) 45%, rgba(15,26,48,.55) 100%); }
.hero-b .panel .lbl { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 40px; }
.hero-b .panel .lbl small { font-family: var(--f-en); font-size: 11px; letter-spacing: .26em; color: var(--gd3); display: block; }
.hero-b .panel .lbl b { display: block; font-size: 20px; letter-spacing: .08em; margin-top: 8px; }
.hero-b .panel .lbl p { font-size: 13px; line-height: 1.8; color: var(--ink2); margin: 10px 0 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s, opacity .6s; }
.hero-b .panel.on .lbl p { max-height: 80px; opacity: 1; }
.hero-b .panel .big { position: absolute; z-index: 2; top: calc(var(--hdr) + 24px); right: 20px; font-family: var(--f-en); font-weight: 800; font-size: 88px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(224,200,138,.35); }
.hero-b .copy { position: relative; z-index: 3; pointer-events: none; padding-top: calc(var(--hdr) + 12vh); }
.hero-b .copy .nk-wrap { max-width: 1440px; }
.hero-b .copy .inner { max-width: 760px; pointer-events: auto; padding: 0; }
.hero-b .copy h1 { text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.hero-b .hero-scroll { display: none; }

/* --- C: タイポ × ウィンドウ --- */
.hero-c { background: var(--nv); }
.hero-c .grid { position: relative; height: 100%; max-width: 1440px; margin: 0 auto; padding: calc(var(--hdr) + 40px) 40px 48px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.hero-c .win { position: relative; height: 100%; min-height: 420px; overflow: hidden; clip-path: inset(0 0 0 0); animation: winIn 1.4s cubic-bezier(.7,0,.2,1) both; }
@keyframes winIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.hero-c .win .slide { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0; transition: opacity 1.4s; }
.hero-c .win .slide.on { opacity: 1; }
.hero-c .win .slide.on .kb { animation: kb 9s ease-out both; }
.hero-c .win .kb { position: absolute; inset: 0; background: inherit; }
.hero-c .win::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(224,200,138,.25); pointer-events: none; }
.hero-c .cap { position: absolute; z-index: 2; left: 0; bottom: 0; background: var(--nv); padding: 18px 26px 0 0; display: flex; gap: 18px; align-items: baseline; }
.hero-c .cap small { font-family: var(--f-en); font-size: 11px; letter-spacing: .26em; color: var(--gd3); }
.hero-c .cap b { font-size: 14px; letter-spacing: .1em; }
.hero-c .dots { display: flex; gap: 8px; margin-left: 8px; }
.hero-c .dots button { width: 22px; height: 2px; background: rgba(255,255,255,.25); border: 0; padding: 0; }
.hero-c .dots button.on { background: var(--gd); }
.hero-c .wm { position: absolute; left: 32px; bottom: -0.2em; font-family: var(--f-en); font-weight: 800; font-size: clamp(80px, 13vw, 200px); line-height: 1; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(224,200,138,.14); pointer-events: none; z-index: 1; }
.hero-c .four { display: flex; gap: 0; margin-top: 44px; border-top: 1px solid var(--line); }
.hero-c .four span { flex: 1; padding: 16px 0 0; font-size: 13px; letter-spacing: .1em; color: var(--ink2); }
.hero-c .four span i { font-style: normal; font-family: var(--f-en); color: var(--gd); font-size: 11px; margin-right: 8px; }

/* ============ SERVICES（均等4カード） ============ */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.svc { position: relative; background: #fff; border: 1px solid var(--hair); display: flex; flex-direction: column; cursor: pointer; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s; }
.svc:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(20,33,61,.14); }
.svc .img { position: relative; aspect-ratio: 4/3.2; overflow: hidden; background: var(--nv); }
.svc .img .ph { position: absolute; inset: 0; background: center/cover no-repeat; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.svc:hover .img .ph { transform: scale(1.07); }
.svc .img .ph.staff { background: radial-gradient(100% 100% at 70% 20%, var(--nv4), var(--nv3)); display: grid; place-items: center; color: var(--gd3); }
.svc .img .no { position: absolute; left: 0; bottom: 0; background: #fff; padding: 10px 16px 0 0; font-family: var(--f-en); font-weight: 700; font-size: 28px; color: var(--nv); line-height: 1; }
.svc .img .no small { font-size: 10px; letter-spacing: .24em; color: var(--gd2); margin-left: 8px; vertical-align: middle; font-weight: 600; }
.svc .bd { padding: 22px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.svc h3 { font-family: var(--f-head); font-size: 21px; letter-spacing: .08em; color: var(--nv); margin: 0; }
.svc .en2 { font-family: var(--f-en); font-size: 10px; letter-spacing: .26em; color: var(--txt3); text-transform: uppercase; margin-top: 6px; }
.svc p { font-size: 14px; line-height: 1.9; color: var(--txt2); margin: 16px 0 24px; flex: 1; }
.svc .tag { position: absolute; z-index: 2; top: 14px; right: 14px; background: var(--nv); color: var(--gd3); border: 1px solid rgba(224,200,138,.4); font-size: 10px; letter-spacing: .12em; padding: 6px 10px; font-weight: 600; }

/* ============ STATS ============ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 48px 32px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat .v { font-family: var(--f-en); font-weight: 700; font-size: clamp(40px, 4.4vw, 60px); color: #fff; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 16px; color: var(--gd); margin-left: 6px; font-weight: 600; letter-spacing: .04em; }
.stat .k { margin-top: 16px; font-size: 13px; letter-spacing: .08em; color: var(--ink2); }

/* ============ FEATURE（植栽・ロボット芝刈機） ============ */
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.feat .vis { position: relative; aspect-ratio: 5/4; }
.feat .vis .ph { position: absolute; inset: 0; background: center/cover no-repeat; }
.feat .vis .ph2 { position: absolute; right: -28px; bottom: -40px; width: 38%; aspect-ratio: 1; background: #fff center/82% no-repeat; border: 6px solid #fff; box-shadow: 0 16px 40px rgba(20,33,61,.18); }
.feat .vis .frame { position: absolute; inset: -18px auto auto -18px; width: 45%; height: 45%; border-left: 1px solid var(--gd); border-top: 1px solid var(--gd); }
.feat .tag { display: inline-block; font-size: 12px; letter-spacing: .12em; font-weight: 600; color: var(--gd2); border: 1px solid var(--gd2); padding: 7px 14px; margin-top: 24px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); margin: 36px 0; border-top: 1px solid var(--hair); }
.kpi { padding: 22px 0 0; }
.kpi .v { font-family: var(--f-en); font-weight: 700; font-size: 28px; color: var(--nv); line-height: 1.2; }
.kpi .k { font-size: 12px; color: var(--txt3); margin-top: 6px; letter-spacing: .08em; }

/* ============ NEWS ============ */
.news { display: grid; grid-template-columns: 280px 1fr; gap: 64px; }
.news ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.news li a { display: grid; grid-template-columns: 110px 96px 1fr 24px; gap: 20px; align-items: center; padding: 24px 4px; border-bottom: 1px solid var(--hair); cursor: pointer; transition: padding .3s, background .3s; }
.news li a:hover { background: #fff; padding-left: 16px; }
.news time { font-family: var(--f-en); font-size: 13px; font-weight: 600; color: var(--nv); letter-spacing: .06em; }
.news .cat { font-size: 11px; text-align: center; padding: 4px 0; border: 1px solid var(--nv); color: var(--nv); letter-spacing: .1em; font-weight: 600; }
.news .tt { font-size: 15px; color: var(--txt); }
.news svg { color: var(--gd2); }

/* ============ ABOUT ============ */
.msg { display: grid; grid-template-columns: 1fr 1.15fr; gap: 88px; align-items: center; }
.msg .vis { position: relative; aspect-ratio: 4/5; background: center/cover no-repeat; }
.msg .vis::before { content: ""; position: absolute; inset: 24px -24px -24px 24px; border: 1px solid var(--gd); z-index: -1; }
.msg p { font-size: 15px; line-height: 2.1; color: var(--txt2); margin: 20px 0 0; }
.msg .sig { margin-top: 36px; font-size: 13px; color: var(--txt3); }
.msg .sig b { display: block; font-size: 20px; color: var(--nv); letter-spacing: .1em; margin-top: 6px; }
.hist { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.hist::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--hair); }
.hist-item { position: relative; padding: 40px 32px 40px 0; }
.hist-item::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); border: 1px solid var(--nv); }
.hist-item::after { content: ""; position: absolute; left: 5px; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--gd); }
.hist-item .y { font-family: var(--f-en); font-size: 12px; letter-spacing: .2em; color: var(--gd2); font-weight: 700; }
.hist-item h4 { font-family: var(--f-head); font-size: 18px; color: var(--nv); margin: 8px 0 10px; letter-spacing: .06em; }
.hist-item p { font-size: 14px; line-height: 1.9; color: var(--txt2); margin: 0; }
.hist-item:nth-child(n+4) { margin-top: 24px; }
.hist-item:nth-child(n+4)::before, .hist-item:nth-child(n+4)::after { top: 0; }
.ctable { width: 100%; border-collapse: collapse; border-top: 2px solid var(--nv); }
.ctable th, .ctable td { text-align: left; padding: 22px 24px; border-bottom: 1px solid var(--hair); font-size: 15px; vertical-align: top; }
.ctable th { width: 220px; color: var(--nv); font-weight: 700; letter-spacing: .08em; background: var(--paper); }
.ctable td { color: var(--txt); line-height: 1.8; }

/* ============ SERVICES DETAIL ============ */
.svc-jump { position: sticky; top: var(--hdr); z-index: 20; background: #fff; border-bottom: 1px solid var(--hair); }
.svc-jump .nk-wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.svc-jump a { padding: 18px 0; font-size: 14px; font-weight: 700; color: var(--nv); letter-spacing: .08em; display: flex; gap: 12px; align-items: center; cursor: pointer; border-bottom: 2px solid transparent; transition: border-color .3s; }
.svc-jump a:hover, .svc-jump a.on { border-bottom-color: var(--gd); }
.svc-jump a i { font-style: normal; font-family: var(--f-en); color: var(--gd2); font-size: 12px; }
.sd { padding: 120px 0; }
.sd:nth-of-type(even) { background: var(--paper); }
.sd .in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; }
.sd.rev .in { grid-template-columns: 1fr 1.05fr; }
.sd.rev .vis { order: 2; }
.sd .vis { position: relative; aspect-ratio: 4/3.4; }
.sd .vis .ph { position: absolute; inset: 0; background: center/cover no-repeat; }
.sd .vis .ph.staff { background: radial-gradient(100% 100% at 70% 20%, var(--nv4), var(--nv3)); display: grid; place-items: center; color: var(--gd3); }
.sd .vis .ill { position: absolute; width: 30%; aspect-ratio: 1; right: -20px; bottom: -28px; background: #fff center/82% no-repeat; border: 5px solid #fff; box-shadow: 0 12px 32px rgba(20,33,61,.16); }
.sd.rev .vis .ill { right: auto; left: -20px; }
.sd .big { font-family: var(--f-en); font-weight: 800; font-size: 96px; line-height: .9; color: transparent; -webkit-text-stroke: 1px var(--gd2); }
.sd h2 { font-family: var(--f-head); font-size: clamp(28px, 3vw, 40px); color: var(--nv); letter-spacing: .08em; margin: 18px 0 0; }
.sd .en2 { font-family: var(--f-en); font-size: 11px; letter-spacing: .3em; color: var(--txt3); text-transform: uppercase; margin-top: 8px; }
.sd .lead { font-size: 18px; font-weight: 700; color: var(--nv); line-height: 1.7; margin: 28px 0 0; }
.sd .desc { font-size: 15px; line-height: 2; color: var(--txt2); margin: 16px 0 0; }
.sd ul { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid var(--hair); }
.sd li { position: relative; padding: 14px 0 14px 30px; border-bottom: 1px solid var(--hair); font-size: 14px; color: var(--txt); }
.sd li::before { content: ""; position: absolute; left: 0; top: 24px; width: 16px; height: 1px; background: var(--gd2); }
.sd .tagp { display: inline-block; margin-top: 16px; font-size: 11px; letter-spacing: .12em; font-weight: 600; color: var(--gd2); border: 1px solid var(--gd2); padding: 6px 12px; }

/* ============ WORKS ============ */
.wf { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 48px; }
.wf button { padding: 11px 22px; background: #fff; border: 1px solid var(--hair); color: var(--nv); font-size: 13px; font-weight: 600; letter-spacing: .06em; transition: all .25s; border-radius: 2px; }
.wf button:hover { border-color: var(--nv); }
.wf button.on { background: var(--nv); color: #fff; border-color: var(--nv); }
.wf button span { font-family: var(--f-en); font-size: 11px; margin-left: 8px; opacity: .6; }
.wg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.wk { cursor: pointer; animation: fadeUp .6s both; }
.wk .th { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--paper); }
.wk .th .ph { position: absolute; inset: 0; background: center/cover no-repeat; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.wk:hover .th .ph { transform: scale(1.06); }
.wk .th .ph.none { background: repeating-linear-gradient(135deg, #efece4 0 10px, #f5f3ec 10px 20px); display: grid; place-items: center; color: var(--txt3); font-family: var(--f-en); font-size: 11px; letter-spacing: .2em; }
.wk .th .cat { position: absolute; left: 0; top: 0; background: var(--nv); color: #fff; font-size: 11px; padding: 6px 12px; letter-spacing: .1em; }
.wk h3 { font-size: 16px; color: var(--nv); margin: 18px 0 10px; letter-spacing: .04em; line-height: 1.6; transition: color .25s; }
.wk:hover h3 { color: var(--gd2); }
.wk dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 12px; }
.wk dt { color: var(--txt3); } .wk dd { margin: 0; color: var(--txt2); }

/* ============ RECRUIT ============ */
.rc-intro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.rc-intro div { background: #fff; padding: 40px 32px; }
.rc-intro .n { font-family: var(--f-en); font-size: 12px; letter-spacing: .24em; color: var(--gd2); font-weight: 700; }
.rc-intro h4 { font-family: var(--f-head); font-size: 20px; color: var(--nv); margin: 14px 0 12px; letter-spacing: .06em; }
.rc-intro p { font-size: 14px; line-height: 1.9; color: var(--txt2); margin: 0; }
.rc-list { display: grid; gap: 16px; }
.rc { background: #fff; border: 1px solid var(--hair); transition: box-shadow .3s; }
.rc:hover { box-shadow: 0 12px 30px rgba(20,33,61,.08); }
.rc button.hd { width: 100%; background: none; border: 0; text-align: left; display: grid; grid-template-columns: 1fr auto 40px; gap: 24px; align-items: center; padding: 28px 32px; }
.rc .tt { font-family: var(--f-head); font-size: 19px; font-weight: 700; color: var(--nv); letter-spacing: .04em; }
.rc .ty { font-size: 12px; padding: 5px 12px; border: 1px solid var(--nv); color: var(--nv); letter-spacing: .08em; }
.rc .pm { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hair); position: relative; transition: background .3s, border-color .3s; }
.rc .pm::before, .rc .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--nv); transform: translate(-50%, -50%); transition: transform .3s; }
.rc .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.rc.open .pm { background: var(--gd); border-color: var(--gd); }
.rc.open .pm::after { transform: translate(-50%, -50%) rotate(0); }
.rc .bd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1); }
.rc.open .bd { grid-template-rows: 1fr; }
.rc .bd > div { overflow: hidden; }
.rc .bd .inner { padding: 0 32px 32px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; border-top: 1px solid var(--hair); padding-top: 28px; margin: 0 32px; padding-left: 0; padding-right: 0; }
.rc .bd p { font-size: 14px; line-height: 2; color: var(--txt2); margin: 0; }
.rc dl { display: grid; grid-template-columns: 96px 1fr; margin: 0; font-size: 14px; }
.rc dt, .rc dd { padding: 10px 0; border-bottom: 1px solid var(--hair); margin: 0; }
.rc dt { color: var(--nv); font-weight: 700; }
.rc dd { color: var(--txt2); }

/* ============ CONTACT ============ */
.ct { display: grid; grid-template-columns: 1fr 1.6fr; gap: 72px; align-items: start; }
.ct-info { display: grid; gap: 20px; position: sticky; top: calc(var(--hdr) + 24px); }
.ct-card { border: 1px solid var(--hair); padding: 28px; background: #fff; }
.ct-card small { font-size: 11px; letter-spacing: .2em; color: var(--txt3); display: block; }
.ct-card a.big { font-family: var(--f-en); font-size: 28px; font-weight: 700; color: var(--nv); display: block; margin: 8px 0 4px; letter-spacing: .02em; }
.ct-card span { font-size: 12px; color: var(--txt2); }
.ct-card.navy { background: var(--nv); border-color: var(--nv); color: #fff; }
.ct-card.navy a.big { color: #fff; font-size: 17px; font-family: var(--f-en); }
.ct-card.navy small { color: var(--ink3); }
.steps { display: flex; gap: 0; margin-bottom: 40px; }
.steps div { flex: 1; padding: 14px 0; border-top: 2px solid var(--hair); font-size: 13px; color: var(--txt3); letter-spacing: .06em; }
.steps div.on { border-top-color: var(--gd); color: var(--nv); font-weight: 700; }
.steps i { font-style: normal; font-family: var(--f-en); font-size: 11px; margin-right: 8px; }
.form { display: grid; gap: 28px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fld label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--nv); margin-bottom: 10px; letter-spacing: .04em; }
.fld label em { font-style: normal; font-size: 10px; padding: 2px 8px; background: var(--nv); color: #fff; letter-spacing: .1em; font-weight: 600; }
.fld label em.opt { background: none; color: var(--txt3); border: 1px solid var(--hair); }
.fld input, .fld select, .fld textarea { width: 100%; font: inherit; font-size: 15px; padding: 15px 16px; border: 1px solid #cfd3dc; background: #fbfbf9; border-radius: 2px; color: var(--txt); transition: border-color .2s, box-shadow .2s, background .2s; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--nv); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gd) 30%, transparent); }
.fld.err input, .fld.err textarea, .fld.err select { border-color: #c0392b; }
.fld .msg-e { color: #c0392b; font-size: 12px; margin-top: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { padding: 11px 18px; border: 1px solid #cfd3dc; background: #fbfbf9; font-size: 13px; color: var(--txt); border-radius: 2px; transition: all .2s; }
.chips button.on { background: var(--nv); color: #fff; border-color: var(--nv); }
.agree { display: flex; align-items: center; gap: 12px; font-size: 14px; cursor: pointer; }
.agree input { width: 18px; height: 18px; accent-color: var(--nv); }
.done-box { text-align: center; padding: 72px 32px; border: 1px solid var(--hair); background: var(--paper); }
.done-box .ck { width: 64px; height: 64px; border-radius: 50%; background: var(--nv); color: var(--gd); display: grid; place-items: center; margin: 0 auto 24px; }
.done-box h3 { font-family: var(--f-head); font-size: 24px; color: var(--nv); margin: 0 0 12px; letter-spacing: .06em; }
.done-box p { font-size: 14px; line-height: 2; color: var(--txt2); margin: 0 0 28px; }

/* ===== タブレット ===== */
@media (max-width: 1180px) {
  .nk-nav a { padding: 10px 11px; font-size: 13px; }
  .nk-hdr-tel { display: none; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .feat, .msg, .sd .in, .sd.rev .in { gap: 56px; }
  .nk-footer .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .nk-nav, .nk-header .nk-btn { display: none; }
  .nk-burger { display: block; }
  .wg { grid-template-columns: repeat(2, 1fr); }
  .news { grid-template-columns: 1fr; gap: 32px; }
  .ct { grid-template-columns: 1fr; }
  .ct-info { position: static; grid-template-columns: 1fr 1fr; }
  .nk-cta > .nk-wrap.in { grid-template-columns: 1fr; gap: 40px; }
}

/* ===== スマホ ===== */
@media (max-width: 720px) {
  :root { --hdr: 64px; }
  .nk-wrap { padding: 0 22px; }
  .nk-sec { padding: 80px 0; }
  .nk-head { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 40px; }
  .nk-h2 { font-size: 26px; }
  .nk-lead { font-size: 14px; }
  .nk-header .in { padding: 0 14px 0 18px; }
  .nk-logo img { height: 36px; }
  .nk-btn { padding: 16px 26px; }

  .hero { height: max(640px, min(var(--vh), 780px)); }
  .hero h1 { font-size: 30px; line-height: 1.5; letter-spacing: .03em; }
  .hero-body { font-size: 14px; line-height: 1.9; }
  .hero-cta { flex-direction: column; align-items: stretch; margin-top: 32px; }
  .hero-scroll { display: none; }
  /* A */
  .hero-a .shade { background: linear-gradient(0deg, rgba(15,26,48,.96) 10%, rgba(15,26,48,.55) 60%, rgba(15,26,48,.5) 100%); }
  .hero-a .nk-wrap { justify-content: flex-end; padding-bottom: 110px; }
  .hero-a .tabs .nk-wrap { padding-bottom: 0; }
  .hero-a .tab { padding: 16px 6px 20px 0; }
  .hero-a .tab b { font-size: 12px; letter-spacing: .02em; }
  .hero-a .tab em { display: none; }
  .hero-a .tab small { font-size: 10px; letter-spacing: .1em; }
  /* B */
  .hero-b .panels { flex-direction: column; }
  .hero-b .panel { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .hero-b .panel.on { flex: 2.6; }
  .hero-b .panel .big { font-size: 44px; top: auto; bottom: 14px; right: 16px; }
  .hero-b .panel .lbl { left: 22px; bottom: 16px; right: 80px; }
  .hero-b .panel .lbl b { font-size: 15px; margin-top: 2px; }
  .hero-b .panel .lbl p { display: none; }
  .hero-b .panel .lbl small { font-size: 10px; }
  .hero-b .copy { padding-top: calc(var(--hdr) + 28px); }
  .hero-b .copy h1 { font-size: 28px; }
  .hero-b .copy .hero-body, .hero-b .copy .hero-cta { display: none; }
  /* C */
  .hero-c .grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: calc(var(--hdr) + 28px) 22px 28px; gap: 28px; }
  .hero-c .win { min-height: 0; order: 2; }
  .hero-c .four { display: none; }
  .hero-c .hero-cta { flex-direction: row; margin-top: 24px; }
  .hero-c .hero-cta .nk-btn { flex: 1; padding: 14px 10px; font-size: 13px; }
  .hero-c .hero-body { display: none; }

  .svc-grid { grid-template-columns: 1fr; gap: 16px; }
  .svc { display: grid; grid-template-columns: 124px 1fr; }
  .svc .img { aspect-ratio: auto; min-height: 100%; }
  .svc .img .no { font-size: 18px; padding: 6px 10px 0 0; }
  .svc .img .no small { display: none; }
  .svc .bd { padding: 18px 18px 20px; }
  .svc h3 { font-size: 18px; }
  .svc p { font-size: 13px; margin: 10px 0 14px; line-height: 1.8; }
  .svc .tag { top: auto; bottom: 8px; left: 8px; right: auto; font-size: 9px; padding: 4px 6px; display: none; }
  .svc:hover { transform: none; }

  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 28px 16px; border-bottom: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(n+3) { border-bottom: 0; }
  .stat .v { font-size: 34px; }
  .stat .v small { font-size: 13px; }
  .stat .k { font-size: 11px; }

  .feat { grid-template-columns: 1fr; gap: 56px; }
  .feat .vis .ph2 { right: -6px; bottom: -24px; }
  .feat .vis .frame { inset: -10px auto auto -10px; }
  .kpi .v { font-size: 20px; }
  .kpi .k { font-size: 11px; }

  .news li a { grid-template-columns: auto auto 1fr; gap: 6px 12px; padding: 18px 0; }
  .news li a .tt { grid-column: 1 / -1; font-size: 14px; }
  .news li a svg { display: none; }
  .news .cat { padding: 2px 10px; }

  .nk-cta { padding: 80px 0; }
  .nk-cta .box { padding: 24px; }
  .nk-cta .tel b { font-size: 26px; }

  .nk-footer { padding: 64px 0 28px; }
  .nk-footer .grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .nk-footer .grid > :first-child, .nk-footer .grid > :last-child { grid-column: 1 / -1; }
  .nk-footer .bottom { flex-direction: column; margin-top: 48px; }

  .nk-phero { padding: calc(var(--hdr) + 48px) 0 56px; }
  .nk-phero .bg { inset: 0; opacity: .3; -webkit-mask-image: none; mask-image: none; }
  .nk-crumb { margin-bottom: 24px; }
  .nk-phero h1 { font-size: 30px; }
  .nk-phero p { font-size: 14px; }

  .msg { grid-template-columns: 1fr; gap: 48px; }
  .msg .vis { aspect-ratio: 4/3; margin-right: 16px; }
  .msg .vis::before { inset: 14px -14px -14px 14px; }
  .hist { grid-template-columns: 1fr; }
  .hist::before { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .hist-item { padding: 0 0 36px 40px; }
  .hist-item:nth-child(n+4) { margin-top: 0; }
  .ctable th, .ctable td { display: block; width: auto; padding: 12px 4px; font-size: 14px; }
  .ctable th { background: none; padding-bottom: 0; border-bottom: 0; font-size: 12px; color: var(--gd2); }

  .svc-jump .nk-wrap { padding: 0 8px; }
  .svc-jump a { justify-content: center; font-size: 12px; padding: 14px 0; gap: 4px; flex-direction: column; letter-spacing: 0; }
  .sd { padding: 72px 0; }
  .sd .in, .sd.rev .in { grid-template-columns: 1fr; gap: 48px; }
  .sd.rev .vis { order: 0; }
  .sd .vis .ill { right: -6px; width: 34%; }
  .sd.rev .vis .ill { left: auto; right: -6px; }
  .sd .big { font-size: 64px; }
  .sd .lead { font-size: 16px; }
  .sd .desc { font-size: 14px; }

  .wf { flex-wrap: nowrap; overflow-x: auto; margin: 0 -22px 32px; padding: 0 22px; scrollbar-width: none; }
  .wf button { flex-shrink: 0; padding: 10px 16px; }
  .wg { grid-template-columns: 1fr; gap: 32px; }

  .rc-intro { grid-template-columns: 1fr; }
  .rc-intro div { padding: 28px 24px; }
  .rc button.hd { grid-template-columns: 1fr 36px; padding: 22px 20px; gap: 12px; }
  .rc button.hd .ty { grid-row: 2; justify-self: start; }
  .rc .pm { grid-row: 1 / 3; grid-column: 2; width: 36px; height: 36px; }
  .rc .tt { font-size: 16px; }
  .rc .bd .inner { grid-template-columns: 1fr; margin: 0 20px; gap: 20px; padding-bottom: 24px; }

  .ct-info { grid-template-columns: 1fr; }
  .form .row2 { grid-template-columns: 1fr; }
  .steps div { font-size: 11px; }
  .steps i { display: block; }
}

/* ---------- 本番用（ハンドオフからの移植に伴う追加分） ---------- */
html { -webkit-text-size-adjust: 100%; }
body { background: #fff; }
.nk-root { background: #fff; }
.nk-site .page { display: none; }
.nk-site .page.on { display: block; }
#civil, #snow, #green, #staffing { scroll-margin-top: 130px; }
.nk-skip { position: absolute; left: -9999px; top: 0; }
.nk-skip:focus { left: 12px; top: 12px; z-index: 99; background: #fff; padding: 10px 16px; color: var(--nv); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

#page-contact .nk-wrap.ct{grid-template-columns:1fr;max-width:960px;margin-inline:auto;gap:40px}#page-contact .ct-info{position:static;grid-template-columns:repeat(3,1fr)}@media (max-width:980px){#page-contact .ct-info{grid-template-columns:1fr}}.nk-footer .photo-note{color:var(--ink3);font-size:12px;letter-spacing:.06em;margin:0 0 4px}
/* 実績ページのYouTube動画 */
.nk-video-section { padding:80px 0; background:var(--nv3); color:#fff; }
.nk-video-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; margin-bottom:32px; }
.nk-video-heading h2 { font-size:32px; line-height:1.5; margin:0 0 12px; }
.nk-video-heading p,.nk-video-note { color:var(--ink2); line-height:1.9; }
.nk-video-section .nk-video-button { color:#fff; border:1px solid rgba(255,255,255,.55); background:transparent; text-decoration:none; }
.nk-video-section .nk-video-button:hover,.nk-video-section .nk-video-button:focus-visible { background:#fff; color:var(--nv); }
.nk-video-card { border:1px solid rgba(255,255,255,.55); max-width:960px; margin:0 auto; }
.nk-video-player { position:relative; aspect-ratio:16/9; background:#000; }
.nk-video-player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.nk-video-caption { padding:24px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.nk-video-caption h3 { font-size:22px; margin:0; }
.nk-video-note { max-width:960px; margin:20px auto 0; font-size:13px; }
@media(max-width:640px) { .nk-video-section{padding:56px 0} .nk-video-heading h2{font-size:26px} .nk-video-caption{padding:20px} .nk-video-heading>.nk-btn{width:100%} }



/* 白抜き・透過ロゴ：二重反転しない */
.nk-header .nk-logo img,.nk-header .custom-logo-link img,.nk-footer .logo img,.nk-footer .custom-logo-link img { filter:none; mix-blend-mode:normal; object-fit:contain; }
.nk-header .nk-logo img { height:60px; width:auto; }
.nk-footer .logo img { height:76px; width:auto; }
@media(max-width:640px) { .nk-header .nk-logo img { height:48px; } }


/* ロゴ横の会社名 */
.nk-header .nk-logo,.nk-footer .logo { display:inline-flex; align-items:center; gap:14px; text-decoration:none; }
.nk-company-name { color:#fff; font-size:18px; font-weight:700; letter-spacing:.06em; white-space:nowrap; line-height:1.5; }
.nk-header .in { gap:20px; }
@media(max-width:1250px) { .nk-header .nk-nav { display:none; } .nk-header .nk-burger { display:flex; margin-left:auto; } }
@media(max-width:640px) { .nk-header .nk-logo { gap:9px; } .nk-header .nk-company-name { font-size:14px; letter-spacing:.02em; } .nk-header .nk-hdr-tel { display:none; } .nk-header .in { gap:10px; } .nk-footer .nk-company-name { font-size:16px; } }


/* 会社名をロゴの下端に合わせる */
.nk-header .nk-logo,.nk-footer .logo { align-items:flex-end; }
.nk-company-name { line-height:1; }
@media(max-width:640px) { .nk-header .nk-company-name { transform:translateY(1px); } }


body{margin:0}body.admin-bar .nk-header{top:32px}@media(max-width:782px){body.admin-bar .nk-header{top:46px}}

/* 採用情報は表示演出を待たずに本文を表示 */
#page-recruit .rv { opacity:1; transform:none; transition:none; transition-delay:0s; }

/* 全ページの電話番号は一行表示。CTA内部は縦積みで幅を確保 */
.nk-cta .box { display:flex; flex-direction:column; align-items:stretch; gap:24px; min-width:0; }
.nk-cta > .nk-wrap.in > div { min-width:0; }
.nk-cta .tel { display:block; width:100%; min-width:0; }
.nk-cta .tel b { display:block; white-space:nowrap; word-break:normal; overflow-wrap:normal; font-size:clamp(24px,2.5vw,34px); letter-spacing:.01em; }
.nk-hdr-tel { flex-shrink:0; }
.nk-hdr-tel b,.nk-footer .ftel,a[href^="tel:"],.nk-phone-number { white-space:nowrap; word-break:normal; overflow-wrap:normal; }
.nk-footer .meta .nk-phone-number { display:inline-block; }
.nk-cta .box .nk-btn { width:100%; max-width:100%; justify-content:center; white-space:normal; text-align:center; }
@media(max-width:640px) { .nk-cta .tel b { font-size:26px; } .ct-card a.big[href^="tel:"] { font-size:clamp(22px,6vw,28px); } }

/* 採用の案内文は意味のまとまりで2行にする */
.nk-recruit-contact-heading { font-size:clamp(26px,2.6vw,36px); line-height:1.5; }
.nk-recruit-contact-heading span { white-space:nowrap; }

/* 全ページの見出しは語尾だけが残らない読みやすい区切りにする */
.nk-contact-heading { font-size:clamp(25px,2.4vw,34px); line-height:1.5; }
.nk-contact-heading span { display:inline-block; white-space:nowrap; max-width:100%; }
.nk-cta .nk-lead { font-size:15px; line-height:2; overflow-wrap:break-word; }
.nk-phero h1,.nk-h2,.nk-video-heading h2 { word-break:normal; overflow-wrap:break-word; text-wrap:pretty; }
@media(max-width:380px) { .nk-contact-heading { font-size:23px; letter-spacing:.02em; } .nk-cta .nk-lead { font-size:14px; } }