/* =========================================================
   Design tokens
   ========================================================= */
:root{
  --green-900:#1e3a8a;
  --green-800:#1e40af;
  --green-700:#1d4ed8;
  --green-600:#2563eb;
  --green-400:#93c5fd;
  --green-100:#dbeafe;
  --ink:#1a1f2e;
  --ink-2:#4a5068;
  --ink-3:#7a8098;
  --line:#dde3f0;
  --bg:#ffffff;
  --bg-soft:#F7F9FD;
  --bg-cream:#EEF2FB;

  --serif:"Noto Serif JP", "Yu Mincho", serif;
  --sans:"Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  --container: 1180px;
  --header-h: 76px;

  --shadow-sm: 0 1px 2px rgba(30,58,138,.06), 0 2px 8px rgba(30,58,138,.04);
  --shadow-md: 0 4px 12px rgba(30,58,138,.08), 0 12px 32px rgba(30,58,138,.06);
  --shadow-lg: 0 20px 50px rgba(30,58,138,.12);
}

/* =========================================================
   Reset & base
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.8;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Sticky Footer: コンテンツが短い時もフッターを画面下端に張り付ける */
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
/* フッターの直前の要素を伸ばして余白を吸収 */
body > .footer{ margin-top:auto; }
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input,textarea{font:inherit; color:inherit;}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; letter-spacing:.04em; line-height:1.4; margin:0;}
p{margin:0;}
ul{margin:0; padding:0; list-style:none;}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

/* =========================================================
   Section header pattern
   ========================================================= */
.section{
  padding: 120px 0;
  position:relative;
}
.section-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  margin-bottom:64px;
  gap:14px;
}
.section-head.center{align-items:center; text-align:center;}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.32em;
  color:var(--green-700);
  font-weight:500;
  text-transform:uppercase;
}
.eyebrow::before{
  content:"";
  width:32px; height:1px;
  background:var(--green-600);
}
.section-title{
  font-size:clamp(28px, 3.6vw, 42px);
  color:var(--ink);
}
.section-title .accent{color:var(--green-700);}
.section-sub,
.section-desc{
  color:var(--ink-2);
  font-size:15px;
  max-width:640px;
}

/* =========================================================
   Header
   ========================================================= */
.header{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--header-h);
  z-index:50;
  display:flex;
  align-items:center;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.header-inner{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.logo{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--sans);
  font-weight:400;
  color:var(--ink);
  min-width:0;
}
.logo-img{
  height:38px;
  width:auto;
  display:block;
  flex-shrink:0;
}
.logo-mark{
  width:36px; height:36px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--green-700), var(--green-600));
  display:grid; place-items:center;
  color:#fff;
  position:relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.logo-mark svg{width:18px; height:18px;}
.logo-text{
  display:flex; flex-direction:column;
  line-height:1.1;
}
.logo-jp{ font-size:13.5px; font-weight:500; letter-spacing:.08em; }
.logo-jp{ white-space:nowrap; }
.logo-en{ font-family:var(--sans); font-size:10px; letter-spacing:.24em; color:var(--ink-3); font-weight:400; margin-top:3px;}

.nav-pc{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:36px;
}
.header-cta{
  display:flex; align-items:center; gap:14px;
}
.nav-pc a{
  font-size:13.5px;
  color:var(--ink);
  letter-spacing:.08em;
  font-weight:500;
  position:relative;
  padding:6px 0;
  transition:color .2s;
}
.nav-pc a::after{
  content:"";
  position:absolute; left:50%; bottom:0;
  width:0; height:1.5px;
  background:var(--green-700);
  transition: width .25s ease, left .25s ease;
}
.nav-pc a:hover,
.nav-pc a.active{color:var(--green-700);}
.nav-pc a.active::after,
.nav-pc a:hover::after{ width:100%; left:0; }

/* Nav dropdown (PCのみ) */
.nav-dropdown{
  position:relative;
  display:flex; align-items:center;
}
.nav-dropdown > a{
  display:flex; align-items:center; gap:4px;
}
.nav-chevron{
  font-size:10px; line-height:1;
  color:var(--ink-3);
  transition:transform .2s ease;
  margin-top:1px;
}
.nav-dropdown:hover .nav-chevron{ transform:rotate(180deg); color:var(--green-700); }
/* ドロップダウンパネル */
.nav-dropdown-panel{
  position:absolute;
  top:100%;
  left:50%; transform:translateX(-50%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 8px 28px rgba(30,58,138,.13);
  min-width:150px;
  padding:20px 0 6px; /* 上部paddingでギャップを埋めてホバー領域を確保 */
  display:none;        /* 非ホバー時は完全に消す（scrollHeight への影響回避）*/
  z-index:60;
}
/* 三角矢印（padding内に配置） */
.nav-dropdown-panel::before{
  content:"";
  position:absolute;
  top:8px; left:50%; transform:translateX(-50%);
  border:6px solid transparent;
  border-top:none;
  border-bottom-color:var(--line);
}
.nav-dropdown-panel::after{
  content:"";
  position:absolute;
  top:9px; left:50%; transform:translateX(-50%);
  border:5px solid transparent;
  border-top:none;
  border-bottom-color:#fff;
}
.nav-dropdown:hover .nav-dropdown-panel{
  display:block;
}
.nav-dropdown-panel a{
  display:block;
  padding:11px 20px;
  font-size:13px;
  font-weight:500;
  color:var(--ink);
  letter-spacing:.06em;
  white-space:nowrap;
  transition:color .15s, background .15s;
}
.nav-dropdown-panel a:hover{ color:var(--green-700); background:var(--bg-soft); }
/* パネル内リンクはアンダーライン不要 */
.nav-dropdown-panel a::after{ display:none !important; }

/* ドロワー内サブメニュー (モバイル) */
.drawer-sub{
  display:flex; flex-direction:column; gap:0;
  padding:0 0 0 20px;
  border-bottom:1px solid var(--line);
}
.drawer-sub a{
  padding:14px 8px !important;
  font-size:15px !important;
  border-bottom:none !important;
  color:var(--ink-2) !important;
}
.drawer-sub a .en{ font-size:10px !important; }

.tel-link{
  display:flex; align-items:center; gap:8px;
  font-family:var(--serif);
  font-size:18px;
  color:var(--green-800);
  letter-spacing:.04em;
  font-weight:600;
  cursor:default;
}
.tel-link svg{width:16px; height:16px; color:var(--green-600);}
.tel-link::after{ display:none; }
.tel-link .tel-label{ font-family:var(--sans); font-size:10px; color:var(--ink-3); letter-spacing:.2em; display:block;}
.tel-link .tel-stack{ display:flex; flex-direction:column; line-height:1.05;}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px;
  border-radius:999px;
  font-size:13px;
  font-weight:500;
  letter-spacing:.12em;
  transition: transform .2s ease, background .2s, color .2s, box-shadow .2s;
}
.btn-primary{
  background:var(--green-700);
  color:#fff;
  box-shadow:0 6px 16px rgba(45,106,79,.25);
}
.btn-primary:hover{ background:var(--green-800); transform:translateY(-1px); box-shadow:0 10px 22px rgba(45,106,79,.3);}
.btn-outline{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
}
.btn-outline:hover{ border-color:var(--green-600); color:var(--green-700);}
.btn-ghost{
  background:transparent;
  color:var(--green-700);
  padding:10px 0;
}
.btn-ghost:hover{ color:var(--green-800);}
.btn .arrow{
  width:14px; height:14px;
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .2s;
}
.btn:hover .arrow{ transform:translateX(3px);}

.hamburger{
  display:none;
  width:44px; height:44px;
  border-radius:10px;
  align-items:center; justify-content:center;
  flex-direction:column;
  gap:5px;
  border:1px solid var(--line);
  background:#fff;
}
.hamburger span{
  width:18px; height:1.6px;
  background:var(--ink);
  transition:transform .25s, opacity .25s;
}
.hamburger.is-open span:nth-child(1){ transform:translateY(6.6px) rotate(45deg);}
.hamburger.is-open span:nth-child(2){ opacity:0;}
.hamburger.is-open span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg);}

/* Mobile menu drawer */
.drawer{
  position:fixed;
  inset:var(--header-h) 0 0 0;
  background:#fff;
  z-index:40;
  padding:36px 28px 60px;
  transform:translateY(-12px);
  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
  border-top:1px solid var(--line);
  overflow-y:auto;
}
.drawer.is-open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.drawer ul{ display:flex; flex-direction:column; gap:4px;}
.drawer ul a{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 8px;
  font-family:var(--serif);
  font-size:18px;
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
.drawer ul a .en{ font-family:var(--sans); font-size:11px; color:var(--ink-3); letter-spacing:.24em;}
.drawer-footer{ margin-top:32px; display:flex; flex-direction:column; gap:14px;}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background: radial-gradient(120% 80% at 90% 10%, var(--green-700) 0%, var(--green-900) 60%, #0a1a13 100%);
  color:#fff;
  padding-top:var(--header-h);
}
.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#0d0d0d;
}
.hero-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transform:scale(1.035);
  transition: opacity 1.6s ease, transform 7s ease;
}
.hero-media img.is-active{
  opacity:1;
  transform:scale(1);
}
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.48) 34%, rgba(0,0,0,.14) 70%, rgba(0,0,0,.28) 100%),
    linear-gradient(180deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,.04) 44%, rgba(0,0,0,.34) 100%);
}
.hero-bg{
  position:absolute; inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
/* blueprint grid */
.hero-bg::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(80% 60% at 70% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(80% 60% at 70% 40%, #000 30%, transparent 80%);
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(40% 30% at 15% 80%, rgba(116,198,157,.18), transparent 70%),
    radial-gradient(35% 28% at 85% 20%, rgba(116,198,157,.12), transparent 70%);
}
@media (max-width:900px){
  .hero-media img{ object-position:62% center;}
  .hero-svg{ width:120%; right:-30%; bottom:-2%; opacity:.32;}
}
.hero-svg{
  position:absolute;
  right:-6%;
  bottom:-2%;
  width:60%;
  max-width:780px;
  opacity:.5;
  pointer-events:none;
  z-index:2;
}

.hero-inner{
  position:relative;
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding: 0 24px;
  z-index:3;
}
.hero-tag{
  display:inline-flex; align-items:center; gap:12px;
  font-size:11px;
  letter-spacing:.32em;
  color:var(--green-400);
  margin-bottom:28px;
  font-weight:500;
}
.hero-tag::before{ content:""; width:36px; height:1px; background:var(--green-400); }
.hero h1{
  font-family:var(--serif);
  font-size: clamp(34px, 5.6vw, 68px);
  line-height:1.32;
  letter-spacing:.04em;
  font-weight:600;
  margin-bottom:28px;
  max-width:16ch;
}
.hero h1 .line{display:block;}
.hero h1 .nowrap{ white-space:nowrap;}
.hero h1 .mobile-break{ display:none; }
.hero h1 .em{ color:var(--green-400);}
.hero-sub{
  font-size:clamp(14px, 1.4vw, 17px);
  line-height:2;
  color:rgba(255,255,255,.78);
  max-width:48ch;
  margin-bottom:44px;
  text-wrap:pretty;
}
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; align-items:center;}
.hero-cta .btn-primary{
  background:#fff;
  color:var(--green-800);
  padding:16px 28px;
  font-size:13.5px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.hero-cta .btn-primary:hover{ background:var(--green-100); color:var(--green-900);}
.hero-cta .btn-outline{
  border-color:rgba(255,255,255,.3);
  color:#fff;
  padding:16px 26px;
}
.hero-cta .btn-outline:hover{ border-color:#fff; color:#fff;}

.hero-meta{
  position:absolute;
  left:24px; bottom:48px;
  display:flex; gap:48px;
  color:rgba(255,255,255,.7);
  font-size:11px;
  letter-spacing:.24em;
  z-index:2;
}
.hero-meta .num{ display:block; font-family:var(--serif); font-size:30px; color:#fff; margin-bottom:2px; letter-spacing:.02em;}

.scroll-cue{
  position:absolute;
  bottom:36px;
  right:32px;
  z-index:3;
  display:flex; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.3em;
  color:rgba(255,255,255,.7);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.scroll-cue .bar{
  position:relative;
  width:1px; height:60px;
  background:rgba(255,255,255,.2);
  overflow:hidden;
}
.scroll-cue .bar::after{
  content:""; position:absolute; left:0; top:0;
  width:100%; height:40%;
  background:#fff;
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ transform:translateY(-100%);}
  60%{ transform:translateY(140%);}
  100%{ transform:translateY(140%);}
}
@media (max-width:768px){
  .hero-meta{ gap:24px; bottom:auto; top:auto; position:relative; left:auto; margin-top:48px;}
  .scroll-cue{ display:none;}
}

/* =========================================================
   About
   ========================================================= */
#about{ background:var(--bg-soft);}
.about-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:80px;
  align-items:start;
}
.about-text p{
  color:var(--ink-2);
  margin-bottom:1.4em;
  font-size:15px;
}
.about-text p strong{ color:var(--ink); font-weight:600;}
.about-text .lead{
  font-family:var(--serif);
  font-size:22px;
  color:var(--ink);
  line-height:1.8;
  margin-bottom:1.8em;
  font-weight:500;
  text-wrap:balance;
}

.info-table{
  width:100%;
  border-collapse:collapse;
  margin-top:32px;
  font-size:14px;
}
.info-table th,
.info-table td{
  text-align:left;
  padding:18px 4px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.info-table th{
  width:34%;
  color:var(--green-700);
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:.06em;
}
.info-table td{ color:var(--ink-2);}
.margin-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--green-700);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
  white-space:nowrap;
}
.margin-link::after{ content:"（PDF）"; font-size:.85em; font-weight:500; }
.margin-link:hover{ opacity:.7; }

.about-visual{
  position:sticky;
  top:120px;
  aspect-ratio: 4/5;
  border-radius:6px;
  overflow:hidden;
  background:linear-gradient(160deg, var(--green-900) 0%, var(--green-700) 60%, var(--green-600) 100%);
  box-shadow:var(--shadow-lg);
  display:grid;
  place-items:center;
  color:#fff;
  padding:40px;
}
.about-visual svg{ width:100%; height:auto;}

@media (max-width:900px){
  .about-grid{ grid-template-columns: 1fr; gap:48px;}
  .about-visual{ position:static; aspect-ratio: 5/4; order:-1;}
}

/* About top-page summary */
.about-summary{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:64px;
  align-items:center;
}
.about-summary-text p{
  color:var(--ink-2);
  font-size:15px;
  line-height:1.9;
  margin-bottom:1.2em;
}
.about-summary-text .lead{
  font-family:var(--serif);
  font-size:20px;
  color:var(--ink);
  line-height:1.85;
  margin-bottom:1.6em;
  font-weight:500;
}
.about-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.about-stat{
  background:#fff;
  padding:28px 24px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.about-stat .stat-num{
  font-family:var(--serif);
  font-size:36px;
  font-weight:600;
  color:var(--green-700);
  line-height:1;
  letter-spacing:.02em;
}
.about-stat .stat-num .stat-unit{
  font-size:16px;
  margin-left:2px;
}
.about-stat .stat-label{
  font-size:12px;
  color:var(--ink-3);
  letter-spacing:.1em;
}
.about-stat .stat-text{
  font-size:13px;
  color:var(--ink-2);
  line-height:1.6;
  font-weight:500;
}
.about-stat .stat-caption{
  font-size:11px;
  color:var(--ink-3);
  letter-spacing:.06em;
  margin-top:2px;
}
.about-image{
  position:relative;
  width:100%;
  height:clamp(340px, 34vw, 460px);
  border-radius:8px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  background:var(--bg-cream);
}
.about-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.about-image::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.42);
  pointer-events:none;
}
@media(max-width:860px){
  .about-summary{ grid-template-columns:1fr; gap:40px;}
  .about-image{ order:-1; height:auto; aspect-ratio:5/4; min-height:0;}
}
@media(max-width:520px){
  .about-stats{ grid-template-columns:1fr 1fr;}
  .about-stat .stat-num{ font-size:28px;}
  .about-image{ aspect-ratio:4/3;}
}

/* =========================================================
   Services
   ========================================================= */
.services-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:24px;
}
.service-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:0 0 32px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s;
  position:relative;
  overflow:hidden;
}
.service-card::before{
  content:"";
  position:absolute; left:0; top:0;
  width:100%; height:3px;
  background:linear-gradient(90deg, var(--green-700), var(--green-400));
  transform:scaleX(0);
  transform-origin:left;
  transition: transform .35s ease;
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:transparent;
}
.service-card:hover::before{ transform:scaleX(1);}
.service-image{
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--green-900);
}
.service-image img,
.work-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease, filter .5s ease;
}
.service-image--operation img{
  transform:scale(1.42);
  object-position:center 50%;
}
.service-card:hover .service-image img,
.work-card:hover .work-thumb img{
  transform:scale(1.05);
  filter:saturate(1.04) contrast(1.02);
}
.service-card:hover .service-image--operation img{
  transform:scale(1.49);
}
.service-body{
  padding:28px 28px 0;
}
.service-num{
  font-family:var(--serif);
  font-size:11px;
  letter-spacing:.3em;
  color:var(--green-600);
  margin-bottom:24px;
  display:block;
}
.service-icon{
  width:56px; height:56px;
  margin-bottom:24px;
  display:grid; place-items:center;
  background:var(--green-100);
  border-radius:14px;
  color:var(--green-800);
}
.service-icon svg{ width:28px; height:28px;}
.service-card h3{
  font-size:19px;
  margin-bottom:14px;
  color:var(--ink);
}
.service-card p{
  font-size:13.5px;
  color:var(--ink-2);
  line-height:1.85;
}

@media (max-width:980px){ .services-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width:520px){ .services-grid{ grid-template-columns: 1fr;} }

/* =========================================================
   Works
   ========================================================= */
#works{ background:var(--bg-cream); position:relative;}
.service-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 48%, rgba(0,0,0,.18) 100%);
  pointer-events:none;
}
.service-image{ position:relative;}

/* works-foot (トップページ用) */
.works-foot{
  display:flex; justify-content:center;
  margin-top:56px;
}

/* =========================================================
   Works category list (案A) — works.html / index.html
   WP: 標準投稿 + カテゴリータクソノミーで管理
   ========================================================= */
.works-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:56px;
}
.works-summary-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.works-summary-item img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
}
.works-summary-label{
  font-family:var(--serif);
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  display:block;
  line-height:1.4;
  padding:15px 16px 16px;
  text-align:center;
}

.works-cat-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.works-cat{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.works-cat-head{
  padding:20px 28px 18px;
  background:var(--green-900);
}
.works-cat-titles{ display:flex; flex-direction:column; gap:3px; }
.works-cat-title{
  font-family:var(--serif);
  font-size:17px;
  font-weight:600;
  color:#fff;
  line-height:1.3;
}
.works-cat-en{
  font-size:10px;
  color:rgba(255,255,255,.45);
  letter-spacing:.2em;
}
.works-cat-count{
  font-family:var(--serif);
  font-size:32px;
  font-weight:700;
  color:var(--green-400);
  line-height:1;
  flex-shrink:0;
}
.works-cat-count small{
  font-size:11px;
  font-weight:400;
  color:rgba(255,255,255,.4);
  margin-left:1px;
}
/* WP: .works-cat-list = カテゴリの投稿ループ */
.works-cat-list{
  list-style:none;
  margin:0; padding:16px 28px 20px;
  display:flex; flex-direction:column;
}
.works-cat-item{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
  font-size:13.5px;
  color:var(--ink);
  line-height:1.6;
}
.works-cat-item:last-child{ border-bottom:none; }
.works-cat-item::before{
  content:"";
  width:5px; height:5px;
  border-radius:50%;
  background:var(--green-600);
  flex-shrink:0;
  margin-top:7px;
}
/* WP: ACF or post_date → 年度表示 */
.works-cat-year{
  font-size:11px;
  color:var(--ink-3);
  white-space:nowrap;
  margin-left:auto;
  flex-shrink:0;
  letter-spacing:.04em;
}

@media(max-width:900px){
  .works-summary{ grid-template-columns:repeat(2,1fr); }
  .works-cat-grid{ grid-template-columns:1fr; }
}
@media(max-width:520px){
  .works-summary{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .works-summary-label{ font-size:13px; padding:12px 10px 13px; }
  .works-cat-head{ padding:16px 20px 14px; }
  .works-cat-list{ padding:12px 20px 16px; }
  .works-cat-item{ font-size:13px; }
}

/* =========================================================
   Recruit
   ========================================================= */
#recruit{
  position:relative;
  background:var(--green-900);
  color:#fff;
  overflow:hidden;
}
#recruit::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image: radial-gradient(60% 80% at 80% 50%, #000, transparent 90%);
  -webkit-mask-image: radial-gradient(60% 80% at 80% 50%, #000, transparent 90%);
}
#recruit .eyebrow{ color:var(--green-400);}
#recruit .eyebrow::before{ background:var(--green-400);}
#recruit .section-title{ color:#fff;}
#recruit .section-sub{ color:rgba(255,255,255,.7);}

.recruit-grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap:64px;
  align-items:center;
}
.recruit-msg .lead{
  font-family:var(--serif);
  font-size:24px;
  line-height:1.7;
  margin-bottom:24px;
  color:#fff;
  text-wrap:balance;
}
.recruit-msg p{
  color:rgba(255,255,255,.72);
  font-size:14.5px;
  margin-bottom:32px;
}
/* recruit visual panel */
.recruit-visual{
  display:block;
  position:relative;
  border-radius:10px;
  overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:var(--shadow-lg);
}
.recruit-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.recruit-visual:hover img{ transform:scale(1.04);}
.recruit-visual-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(10,18,40,.75) 100%);
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:28px 32px;
}
.recruit-visual-label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--serif);
  font-size:17px;
  font-weight:600;
  color:#fff;
  letter-spacing:.08em;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25);
  padding:14px 24px;
  border-radius:999px;
  transition:background .25s;
}
.recruit-visual:hover .recruit-visual-label{
  background:rgba(255,255,255,.22);
}

.recruit-cards{ display:flex; flex-direction:column; gap:16px;}
.recruit-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  padding:28px 28px;
  transition: background .2s, border-color .2s;
  display:flex;
  align-items:center;
  gap:24px;
}
.recruit-card:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(116,198,157,.4);
}
.recruit-card .rc-no{
  font-family:var(--serif);
  font-size:32px;
  color:var(--green-400);
  letter-spacing:.04em;
  min-width:60px;
}
.recruit-card .rc-body{ flex:1;}
.recruit-card h4{
  font-size:18px;
  color:#fff;
  margin-bottom:8px;
  font-family:var(--serif);
  font-weight:500;
}
.recruit-card .meta{
  display:flex; flex-wrap:wrap; gap:8px;
}
.chip{
  display:inline-block;
  font-size:11px;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(116,198,157,.12);
  color:var(--green-400);
  letter-spacing:.08em;
  border:1px solid rgba(116,198,157,.18);
}
.recruit-card .rc-arrow{
  color:var(--green-400);
  width:24px; height:24px;
}

@media (max-width:900px){
  .recruit-grid{ grid-template-columns: 1fr; gap:40px;}
}

/* =========================================================
   Contact
   ========================================================= */

.contact-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:22px 24px;
}
.form-field{
  display:flex; flex-direction:column;
  gap:8px;
}
.form-field.full{ grid-column: 1 / -1;}
.form-label{
  font-size:12px;
  color:var(--ink);
  font-weight:500;
  letter-spacing:.1em;
  display:flex;
  align-items:center;
  gap:8px;
}
.form-label .req{
  font-size:10px;
  background:var(--green-700);
  color:#fff;
  padding:2px 6px;
  border-radius:3px;
  font-weight:500;
  letter-spacing:.08em;
}
.form-label .opt{
  font-size:10px;
  background:#fff;
  color:var(--ink-3);
  padding:2px 6px;
  border-radius:3px;
  border:1px solid var(--line);
  letter-spacing:.08em;
}
/* スパム対策：ハニーポット欄（画面外に隠す。人間には見えない）*/
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  top:auto;
  width:1px; height:1px;
  overflow:hidden;
}
.form-input,
.form-textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:6px;
  padding:14px 16px;
  font-size:14px;
  background:#fff;
  transition: border-color .2s, box-shadow .2s;
  font-family: var(--sans);
}
.form-input:focus,
.form-textarea:focus{
  outline:none;
  border-color: var(--green-600);
  box-shadow: 0 0 0 4px rgba(64,145,108,.12);
}
.form-input.is-invalid,
.form-textarea.is-invalid{
  border-color: #c54a4a;
  background:#fffafa;
}
.form-error{
  font-size:11.5px;
  color:#c54a4a;
  margin-top:2px;
  min-height: 16px;
  letter-spacing:.04em;
}
.form-textarea{
  min-height: 160px;
  resize: vertical;
  line-height:1.7;
}
.form-submit-row{
  grid-column: 1 / -1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:12px;
  text-align:center;
}
.form-submit{
  background:var(--green-700);
  color:#fff;
  padding:18px 44px;
  font-size:14px;
  letter-spacing:.16em;
  border-radius:999px;
  transition:background .2s, transform .2s, box-shadow .2s;
  box-shadow:0 8px 22px rgba(45,106,79,.2);
}
.form-submit:hover{ background:var(--green-800); transform:translateY(-1px); box-shadow:0 12px 28px rgba(45,106,79,.28);}
.form-submit:disabled{ opacity:.6; cursor: wait;}
.form-note{
  font-size:12px;
  color:var(--ink-3);
  line-height:1.7;
}
.form-success{
  grid-column:1/-1;
  background:var(--green-100);
  border:1px solid var(--green-400);
  color:var(--green-900);
  padding:18px 22px;
  border-radius:6px;
  font-size:14px;
  display:none;
  align-items:center;
  gap:12px;
}
.form-success.show{ display:flex;}
.form-success svg{ color:var(--green-700); width:20px; height:20px;}

@media (max-width:900px){
  .contact-form{ grid-template-columns: 1fr;}
}

/* =========================================================
   Footer
   ========================================================= */
.footer{
  background:#0f1f18;
  color:rgba(255,255,255,.7);
  padding: 80px 0 32px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:64px;
  margin-bottom:48px;
}
.footer-brand{
  display:flex; align-items:center; gap:14px;
  margin-bottom:24px;
  color:#fff;
}
.footer-brand .logo-img{
  height:34px; width:auto;
  display:block; flex-shrink:0;
}
.footer-info{
  font-size:13px;
  line-height:2;
}
.footer-info .row{
  display:flex; gap:14px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-info .row:last-child{ border-bottom:none;}
.footer-info .k{
  font-family:var(--serif);
  color:var(--green-400);
  letter-spacing:.1em;
  font-size:11px;
  width:96px;
  flex-shrink:0;
  padding-top:4px;
}
.footer-info .v{ color:rgba(255,255,255,.8); flex:1;}
.footer-info a{ color:rgba(255,255,255,.8);}
.footer-info a:hover{ color:var(--green-400);}

.footer-map{
  background:#1c2b24;
  border-radius:6px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.footer-map iframe{
  width:100%;
  height:320px;
  display:block;
  filter: grayscale(.3) brightness(.92);
}
.footer-map .map-cap{
  padding:14px 20px;
  font-size:12px;
  color:var(--ink-3);
  border-top:1px solid rgba(255,255,255,.06);
}

/* =========================================================
   フッタータブ（アクセス／営業日切替）
   ========================================================= */
.footer-tabs{
  display:flex;
  flex-direction:column;
}
.tabs-nav{
  display:flex;
  gap:4px;
  border-bottom:1px solid var(--line);
  margin-bottom:16px;
}
.tab-btn{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.08em;
  font-weight:500;
  color:var(--ink-3);
  padding:10px 18px;
  background:transparent;
  border:none;
  cursor:pointer;
  position:relative;
  transition:color .2s ease;
}
.tab-btn:hover{ color:var(--ink); }
.tab-btn.is-active{ color:var(--green-700); }
.tab-btn.is-active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background:var(--green-700);
}
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }

/* =========================================================
   会社カレンダー
   ========================================================= */
.company-calendar{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:18px 18px 14px;
}
.cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.cal-title{
  font-family:var(--serif);
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  margin:0;
  letter-spacing:.04em;
}
.cal-nav{
  width:30px; height:30px;
  border-radius:50%;
  background:var(--bg-soft);
  color:var(--ink);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
  transition:background .2s, color .2s, opacity .2s;
  padding:0;
}
.cal-nav:hover:not(:disabled){
  background:var(--green-700);
  color:#fff;
  border-color:var(--green-700);
}
.cal-nav:disabled{
  opacity:.3;
  cursor:not-allowed;
}
.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
}
.cal-dow{
  text-align:center;
  font-size:11px;
  font-weight:500;
  padding:6px 0;
  color:#fff;
  background:var(--ink);
  letter-spacing:.02em;
}
.cal-dow--0{ background:#c0392b; }
.cal-dow--6{ background:#2980b9; }
.cal-cell{
  text-align:center;
  font-size:12px;
  padding:7px 0;
  color:var(--ink);
  background:#fff;
  border-radius:3px;
}
.cal-cell--sun{ color:#c0392b; }
.cal-cell--sat{ color:#2980b9; }
.cal-cell--off{
  background:#fff3a8;
  font-weight:500;
}
.cal-cell--today{
  outline:2px solid var(--green-700);
  outline-offset:-1px;
  font-weight:600;
}
.cal-cell--empty{
  background:transparent;
}
.cal-legend{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--ink-3);
}
.cal-legend-swatch{
  display:inline-block;
  width:14px; height:14px;
  background:#fff3a8;
  border:1px solid #ddd6a0;
  border-radius:2px;
}
.footer.is-light .company-calendar{
  background:#fff;
  border-color:var(--line);
}

/* モバイル：タブ非表示・両パネルを縦並びで表示 */
@media (max-width:900px){
  .tabs-nav{ display:none; }
  .tab-panel{ display:block; }
  .tab-panel + .tab-panel{ margin-top:24px; }
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-size:11.5px;
  color:rgba(255,255,255,.5);
  letter-spacing:.06em;
}
.footer-nav{
  display:flex; gap:24px; flex-wrap:wrap;
}
.footer-nav a:hover{ color:var(--green-400);}

@media (max-width:900px){
  .footer-grid{ grid-template-columns: 1fr; gap:40px;}
  .footer-bottom{ flex-direction:column; align-items:flex-start;}
}

/* ╔═════════════════════════════════════════════════════════╗
   ║  FOOTER LIGHT MODE                                       ║
   ║  HTML側 <footer class="footer is-light"> で有効化         ║
   ║  暗フッターに戻すには:                                    ║
   ║   ① 全HTMLから is-light クラスを削除（class="footer"へ）  ║
   ║   ② footer内の <img src="mark-only.png">                  ║
   ║       → mark-only-white.png に戻す                        ║
   ║   ③ このブロックは残しても無効（影響なし）                ║
   ╚═════════════════════════════════════════════════════════╝ */
.footer.is-light{
  background: var(--bg-cream) !important;   /* #EFF2F8, JSパレット上書き対策 */
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}
.footer.is-light .footer-brand{ color: var(--ink); }
.footer.is-light .footer-brand .logo-jp{ color: var(--ink) !important; }
.footer.is-light .footer-info .row{ border-bottom-color: var(--line); }
.footer.is-light .footer-info .k{ color: var(--green-700); }
.footer.is-light .footer-info .v,
.footer.is-light .footer-info a{ color: var(--ink-2); }
.footer.is-light .footer-info a:hover{ color: var(--green-700); }
.footer.is-light .footer-map{
  background: #fff;
  border-color: var(--line);
}
.footer.is-light .footer-map iframe{ filter: none; }
.footer.is-light .footer-map .map-cap{
  color: var(--ink-3);
  border-top-color: var(--line);
}
.footer.is-light .footer-bottom{
  border-top-color: var(--line);
  color: var(--ink-3);
}
.footer.is-light .footer-nav a{ color: var(--ink-2); }
.footer.is-light .footer-nav a:hover{ color: var(--green-700); }
/* ──── FOOTER LIGHT MODE END ──── */

/* =========================================================
   Animations
   ========================================================= */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
}
.reveal.in{
  opacity:1;
  transform:translateY(0);
}
.reveal.delay-1{ transition-delay:.04s;}
.reveal.delay-2{ transition-delay:.08s;}
.reveal.delay-3{ transition-delay:.12s;}
.reveal.delay-4{ transition-delay:.16s;}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none;}
  .hero-media img{ transition:none; transform:none;}
  html{ scroll-behavior:auto;}
}

/* =========================================================
   Responsive: mobile breakpoint
   ========================================================= */
@media (max-width:1100px){
  .nav-pc{ display:none;}
  .hamburger{ display:flex;}
  .header-inner{ gap:10px;}
  .header-cta{ gap:10px; flex-shrink:0;}
  .logo{ flex:1; min-width:0; overflow:hidden; gap:8px;}
  .logo-img{ height:30px; flex-shrink:0; }
  .logo-jp{ font-size:12.5px; letter-spacing:.04em; }
  .tel-link .tel-label{ display:none;}
  .tel-link{
    width:38px;
    height:38px;
    justify-content:center;
    font-size:0;
    border-radius:50%;
    color:var(--green-700);
    cursor:pointer;
    flex-shrink:0;
  }
  .tel-link svg{ width:19px; height:19px;}
  .tel-link .tel-stack{ display:none;}
  .header-cta .btn-primary{ padding:10px 14px; font-size:12px; letter-spacing:.06em; gap:0;}
  .header-cta .btn-primary .arrow{ display:none;}
}
@media (max-width:900px){
  .section{ padding: 80px 0;}
}
@media (max-width:520px){
  .container{ padding: 0 20px;}
  .header-inner{ padding: 0 14px; gap:6px;}
  .logo{ gap:6px; min-width:0;}
  .logo-mark{ width:34px; height:34px; flex:0 0 34px;}
  .logo-jp{ font-size:11.5px; letter-spacing:.02em;}
  .logo-img{ height:26px; }
  .header-cta{ gap:6px;}
  .header-cta .btn-outline{ padding:7px 10px; font-size:10.5px; letter-spacing:.02em; }
  .header-cta .btn-outline .arrow{ display:none; }
  .tel-link{ width:34px; height:34px;}
  .tel-link svg{ width:16px; height:16px;}
  .hamburger{ width:38px; height:38px; border-radius:8px; flex-shrink:0;}
  .section-head{ margin-bottom:44px;}
  .hero h1{
    font-size:clamp(40px, 12.4vw, 56px);
    line-height:1.36;
    max-width:none;
  }
  .hero h1 .line{ width:max-content; max-width:100%;}
  .hero h1 .mobile-break{ display:block; }
  .hero-inner{ padding:0 24px;}
  .recruit-card{ flex-wrap:wrap;}
  .footer-map iframe{ height:240px;}
}
@media (max-width:380px){
  .header-inner{ padding:0 10px; gap:4px;}
  .logo{ gap:5px;}
  .logo-img{ height:24px;}
  .logo-jp{ font-size:10.5px; letter-spacing:0;}
  .header-cta{ gap:4px;}
  .header-cta .btn-outline{ padding:6px 8px; font-size:10px;}
  .tel-link{ width:32px; height:32px;}
  .tel-link svg{ width:15px; height:15px;}
  .hamburger{ width:34px; height:34px; border-radius:7px;}
}

/* =========================================================
   News
   ========================================================= */
.news-list { border-top: 1px solid var(--line); }
.news-item {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.news-date { font-size: 13px; color: var(--ink-3); letter-spacing: .08em; white-space: nowrap; font-family: var(--sans); }
.news-cat {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-700);
  white-space: nowrap;
  letter-spacing: .08em;
  min-width: 80px;
  text-align: center;
  flex-shrink: 0;
  box-sizing: border-box;
}
.news-title { font-size: 14px; color: var(--ink); flex: 1; }
@media (max-width: 640px) {
  .news-item { flex-wrap: wrap; gap: 8px; }
  .news-date, .news-cat { font-size: 12px; }
}

/* =========================================================
   Tweaks panel (palette switcher)
   ========================================================= */
.tweaks{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:90;
  display:none;
  flex-direction:column;
  gap:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.08);
  min-width: 260px;
  font-family:var(--sans);
  animation: tweaksIn .25s ease;
}
.tweaks.is-open{ display:flex;}
@keyframes tweaksIn{
  from{ opacity:0; transform:translateY(8px);}
  to{ opacity:1; transform:translateY(0);}
}
.tweaks-head{
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding-bottom:12px;
  margin-bottom:2px;
}
.tweaks-head .title{
  font-family:var(--serif);
  font-size:14px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--ink);
}
.tweaks-head .close{
  width:26px; height:26px;
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink-3);
  transition: background .15s, color .15s;
}
.tweaks-head .close:hover{ background:var(--bg-soft); color:var(--ink);}
.tweaks-section-label{
  font-size:10px;
  letter-spacing:.24em;
  color:var(--ink-3);
  text-transform:uppercase;
  margin-bottom:4px;
}
.palette-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.palette-opt{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 12px;
  border-radius:10px;
  border:1.5px solid transparent;
  background:var(--bg-soft);
  cursor:pointer;
  transition: border-color .15s, background .15s;
  text-align:left;
  width:100%;
}
.palette-opt:hover{ background:#f0f3f0;}
.palette-opt.is-active{
  border-color: var(--green-600);
  background:#fff;
}
.palette-swatches{
  display:flex;
  gap:3px;
  flex-shrink:0;
}
.palette-swatches span{
  width:14px; height:22px;
  border-radius:3px;
  border:1px solid rgba(0,0,0,.05);
}
.palette-label{
  font-size:13px;
  color:var(--ink);
  font-weight:500;
  flex:1;
}
.palette-label .en{
  display:block;
  font-size:10px;
  color:var(--ink-3);
  letter-spacing:.18em;
  font-weight:400;
  margin-top:2px;
}
.palette-opt .check{
  width:16px; height:16px;
  border-radius:50%;
  border:1.5px solid var(--line);
  display:grid; place-items:center;
  flex-shrink:0;
  color:#fff;
}
.palette-opt.is-active .check{
  background:var(--green-700);
  border-color:var(--green-700);
}
.palette-opt.is-active .check::after{
  content:"";
  width:6px; height:3px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:translateY(-1px) rotate(-45deg);
}
@media (max-width:520px){
  .tweaks{
    right:12px; bottom:12px; left:12px;
    min-width:0;
  }
}

/* =========================================================
   Page hero (sub-pages)
   ========================================================= */
.page-hero{
  padding: calc(var(--header-h) + 36px) 0 36px;
  background: linear-gradient(135deg, var(--green-900) 0%, var(--green-800) 60%, var(--green-700) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:48px 48px;
}
.page-hero-inner{
  position:relative;
  z-index:1;
}
.page-hero .eyebrow{ color:var(--green-400);}
.page-hero .eyebrow::before{ background:var(--green-400);}
.page-hero h1{
  font-family:var(--serif);
  font-size: clamp(32px, 4vw, 52px);
  font-weight:600;
  letter-spacing:.06em;
  color:#fff;
  margin: 16px 0 20px;
  line-height:1.3;
}
.page-hero p{
  color:rgba(255,255,255,.75);
  font-size:15px;
  max-width:56ch;
  line-height:1.9;
}

/* Breadcrumb */
.breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:rgba(255,255,255,.55);
  letter-spacing:.08em;
  margin-bottom:28px;
}
.breadcrumb a{ color:rgba(255,255,255,.55); transition:color .2s;}
.breadcrumb a:hover{ color:var(--green-400);}
.breadcrumb .sep{ color:rgba(255,255,255,.3);}

/* Page section */
.page-section{ padding: 100px 0;}
.page-section + .page-section{ padding-top:0;}

/* Two-column layout */
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:start;
}
@media(max-width:860px){
  .two-col{ grid-template-columns:1fr; gap:48px;}
}

/* Flow steps */
.flow-list{ display:flex; flex-direction:column; gap:0;}
.flow-item{
  display:flex;
  gap:28px;
  align-items:flex-start;
  padding:32px 0;
  border-bottom:1px solid var(--line);
  position:relative;
}
.flow-item:last-child{ border-bottom:none;}
.flow-no{
  font-family:var(--serif);
  font-size:36px;
  color:var(--green-600);
  letter-spacing:.04em;
  min-width:56px;
  line-height:1;
  flex-shrink:0;
}
.flow-body h3{ font-size:18px; margin-bottom:8px; color:var(--ink);}
.flow-body p{ font-size:14px; color:var(--ink-2); line-height:1.85;}

/* Feature grid */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:56px;
}
@media(max-width:860px){ .feature-grid{ grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){ .feature-grid{ grid-template-columns:1fr;}}
.feature-card{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:8px;
  padding:32px 28px;
}
.feature-card .fc-icon{
  width:48px; height:48px;
  background:var(--green-100);
  border-radius:12px;
  display:grid; place-items:center;
  color:var(--green-800);
  margin-bottom:20px;
}
.feature-card .fc-icon svg{ width:24px; height:24px;}
.feature-card h4{ font-size:16px; margin-bottom:10px;}
.feature-card p{ font-size:13px; color:var(--ink-2); line-height:1.8;}

/* Works filter */
/* Recruit detail */
.job-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:24px;
}
.job-card-head{
  padding:28px 32px;
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.job-card-head h3{ font-size:20px; color:var(--ink);}
.job-card-body{ padding:28px 32px;}
.job-table{ width:100%; border-collapse:collapse; font-size:14px;}
.job-table th,.job-table td{
  padding:14px 8px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}
.job-table th{ width:28%; color:var(--green-700); font-family:var(--serif); font-weight:500;}
.job-table td{ color:var(--ink-2);}
.job-table tr:last-child th,
.job-table tr:last-child td{ border-bottom:none;}

/* News list (full) */
.news-full-list{ display:flex; flex-direction:column; gap:0;}
.news-full-item{
  display:flex;
  gap:24px;
  align-items:baseline;
  padding:24px 0;
  border-bottom:1px solid var(--line);
}
.news-full-item:first-child{ border-top:1px solid var(--line);}
.news-full-date{ font-size:13px; color:var(--ink-3); white-space:nowrap; letter-spacing:.06em;}
.news-full-cat{
  font-size:11px;
  padding:3px 10px;
  border-radius:999px;
  background:var(--green-100);
  color:var(--green-700);
  white-space:nowrap;
  flex-shrink:0;
  min-width:90px;
  text-align:center;
  box-sizing:border-box;
}
.news-full-title{ font-size:15px; color:var(--ink); flex:1;}
@media(max-width:640px){
  .news-full-item{ flex-wrap:wrap; gap:8px;}
}

/* =========================================================
   Staff grid (staff.html / WP: post_type=staff)
   ========================================================= */
.staff-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px 28px;
}
/* WP: .staff-card = ループの1件 (post) */
.staff-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s ease, transform .25s ease;
}
.staff-card:hover{
  box-shadow:0 8px 32px rgba(30,58,138,.13);
  transform:translateY(-3px);
}
/* WP: ACF field "staff_photo" → <img> */
.staff-photo{
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--bg-soft);
  position:relative;
}
.staff-photo img{
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  display:block;
}
/* 写真がない場合のプレースホルダー */
.staff-photo-placeholder{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-cream);
  color:var(--ink-3);
}
.staff-photo-placeholder svg{ width:56px; height:56px; opacity:.45;}
.staff-body{
  padding:22px 24px 24px;
  display:flex; flex-direction:column; gap:12px;
  flex:1;
}
.staff-meta{
  display:flex; flex-direction:column; gap:4px;
}
/* WP: ACF field "staff_quals" (Textarea, 1行1件) → <li> ループ */
.staff-quals{
  display:flex; flex-wrap:wrap; gap:6px;
  list-style:none; margin:0; padding:0;
}
.staff-qual{
  font-size:11.5px; font-weight:500;
  color:var(--ink-2);
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:100px;
  padding:4px 12px;
  line-height:1.5;
}
/* WP: ACF field "staff_join_year" */
.staff-join{
  font-size:12px; color:var(--ink-3);
  margin-top:auto; padding-top:12px;
  border-top:1px solid var(--line);
}
/* WP: ACF field "staff_message" (任意) */
.staff-message{
  font-size:13.5px; color:var(--ink-2); line-height:1.9;
  font-style:italic;
  padding:14px 16px;
  background:var(--bg-soft);
  border-left:3px solid var(--green-400);
  border-radius:0 6px 6px 0;
}

@media(max-width:900px){
  .staff-grid{ grid-template-columns:repeat(2,1fr); gap:24px 20px; }
}
@media(max-width:520px){
  .staff-grid{ grid-template-columns:1fr; gap:20px; }
  .staff-body{ padding:18px 20px 20px; }
}

/* =========================================================
   Flowchart (services page)
   ========================================================= */
.fc-wrap{
  font-size:13px;
  line-height:1.55;
  max-width:820px;
  margin:0 auto;
  border:1px solid #ccc;
  border-radius:6px;
  overflow:hidden;
  box-shadow:var(--shadow-md);
}
.fc-headers{
  display:flex;
}
.fc-hd{
  padding:12px 10px;
  text-align:center;
  font-weight:600;
  font-size:13px;
  letter-spacing:.08em;
  color:#fff;
}
.fc-hd--gray  { background:#8c9199; flex:0 0 24%;}
.fc-hd--blue  { background:#4a8ec2; flex:0 0 38%;}
.fc-hd--purple{ background:#7878b8; flex:1;}

/* each phase row */
.fc-row{
  display:flex;
  align-items:stretch;
  border-top:1px solid #ccc;
}
.fc-cell{
  padding:14px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.fc-cell--gray{
  background:#f0f1f3;
  flex:0 0 24%;
  border-right:1px solid #ccc;
}
.fc-cell--blue{
  background:#e8f2fc;
  flex:0 0 38%;
  border-right:1px solid #ccc;
  flex-direction:column;
  gap:8px;
}
.fc-cell--purple{
  background:#eeeff8;
  flex:1;
}

/* phase label box (col 1) */
.fc-phase{
  font-size:13px;
  font-weight:600;
  color:#333;
  text-align:center;
  line-height:1.6;
}

/* work boxes (col 2) */
.fc-work-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
}
.fc-work{
  border:1.5px solid #4a8ec2;
  background:#fff;
  padding:8px 10px;
  text-align:center;
  font-size:12.5px;
  border-radius:3px;
  color:#1a2a3a;
  position:relative;
}
.fc-work--em{
  background:#d8ecfa;
  font-weight:600;
}
.fc-work small{
  display:block;
  font-size:10px;
  color:#555;
  margin-top:2px;
}

/* drawing list (col 3) */
.fc-list{
  list-style:none;
  padding:0;
  margin:0;
  width:100%;
}
.fc-list li{
  font-size:12px;
  padding:2px 0 2px 14px;
  position:relative;
  color:#333;
  line-height:1.5;
}
.fc-list li::before{
  content:"・";
  position:absolute;
  left:0;
  color:#7878b8;
}

/* horizontal arrow between cells */
.fc-cell--blue::before,
.fc-cell--purple::before{
  content:"";
  position:absolute;
  left:-12px;
  top:50%;
  transform:translateY(-50%);
  width:0; height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:10px solid #4a8ec2;
  z-index:1;
}
.fc-cell--purple::before{
  border-left-color:#4a8ec2;
}
/* hide arrow when col 2 is empty */
.fc-cell--blue.is-empty::before,
.fc-cell--purple.is-empty::before{ display:none; }

/* downward arrow between rows (col 1) */
.fc-down{
  display:flex;
  border-top:1px solid #ccc;
}
.fc-down-arrow{
  flex:0 0 24%;
  padding:4px 0;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:18px;
  color:#999;
  background:#f0f1f3;
}
.fc-down-skip{
  flex:1;
  background:#fff;
}

@media(max-width:640px){
  .fc-wrap{ font-size:11px;}
  .fc-cell{ padding:10px 8px;}
  .fc-hd{ font-size:11px; padding:10px 6px;}
}

/* ── フローチャート モバイル縦積みレイアウト ─────────────────── */
@media(max-width:560px){
  /* 列ヘッダーを非表示 */
  .fc-headers{ display:none; }

  /* 各行を縦方向に */
  .fc-row{ flex-direction:column; }

  /* セル全幅・左揃えに */
  .fc-cell{
    flex:none;
    width:100%;
    border-right:none;
    border-bottom:1px solid #ccc;
    justify-content:flex-start;
    padding:10px 14px;
    box-sizing:border-box;
  }
  .fc-cell:last-child{ border-bottom:none; }

  /* 横矢印を非表示 */
  .fc-cell--blue::before,
  .fc-cell--purple::before{ display:none; }

  /* 工程名ラベル：小さめの帯 */
  .fc-cell--gray{
    padding:7px 14px;
    border-bottom:1px solid #bbb;
  }
  .fc-phase{ text-align:left; font-size:12px; }

  /* 「担当業務なし」行は非表示 */
  .fc-cell--blue.is-empty,
  .fc-cell--purple.is-empty{ display:none; }

  /* 下矢印行：矢印だけ全幅に、右の空白列は消す */
  .fc-down-arrow{
    flex:none;
    width:100%;
  }
  .fc-down-skip{ display:none; }
}