@charset "UTF-8";

/* ============================================================
   方針
   ・可読性を最優先に、1プロパティ1行で整形
   ・セクションごとにコメントで区切る
   ・全体を Noto Sans JP（ゴシック）1書体に統一
   ・和文本文は端末標準ゴシック（ヒラギノ／游ゴシック等）を優先
   ・斜体（italic）は使用しない
   ============================================================ */


/* ============================================================
   1. デザイントークン（CSS変数）
   ============================================================ */
:root {

  /* --- 背景・面・文字色 ------------------------------------ */
  --bg:        #fcfdff;   /* ページ背景 */
  --bg-2:      #E9EEF6;   /* 交互セクションの背景 */
  --surface:   #FFFFFF;   /* カード等の面色 */
  --ink:       #1A2435;   /* 基本文字色（濃紺チャコール） */
  --ink-soft:  #55617A;   /* 補助文字色 */
  --line:      #E0E7F0;   /* 罫線・境界 */
  --line-strong: #D2DBE7; /* カード等の境界用（薄線＋常時影とセットで使う） */

  /* --- ブランドカラー --------------------- */
  --orange:      #E08A3C;
  --orange-deep: #C9722A;
  --green:       #8EBA43;
  --green-deep:  #4a7933;

  /* --- ブランドの淡色（帯・背景用のフラットな面色） -------- */
  --tint-green:  #F2F7EC;  /* 緑がかった淡い帯 */
  --tint-warm:   #f3f0ec;   /* 橙がかった淡い帯（CTA・お問い合わせ） */

  /* --- フォント -------------------------------------------- */
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,Meiryo,sans-serif;
  --serif:var(--sans);  /* 見出しもゴシックに統一 */
  --mono:var(--sans);   /* ラベルもゴシックに統一 */

  /* --- フォントサイズ（clamp で可変） ---------------------- */
  --fs-hero: clamp(2.75rem, 7vw, 6rem);
  --fs-h2:   clamp(1.9rem, 4vw, 3.25rem);
  --fs-h3:   clamp(1.2rem, 2vw, 1.6rem);
  --fs-lede: clamp(1.05rem, 1.5vw, 1.3rem);

  /* --- レイアウト ------------------------------------------ */
  --container: 1280px;
  --gutter:    24px;

  /* --- 装飾 ------------------------------------------------ */
  --r:        14px;                       /* 角丸 */
  --ease:     cubic-bezier(.4, 0, .2, 1); /* 共通イージング */
  --header-h: 74px;                       /* ヘッダー高さ */
}

@media (min-width: 768px) {
  :root { --gutter: 48px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 64px; }
}


/* ============================================================
   2. リセット・ベース
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga" 1, "kern" 1;
}

/* 重ね順の基本 */
.hdr,
.mnav,
main,
.ft {
  position: relative;
  z-index: 1;
}
.hdr  { z-index: 100; }
.mnav { z-index: 90; }

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* 斜体は使わない（em/i/cite が来ても立体で表示） */
em,
i,
cite {
  font-style: normal;
}

::selection {
  background: var(--green);
  color: #fff;
}

/* キーボード操作時のフォーカス表示 */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 3px;
}

/* 視差軽減設定への配慮 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}


/* ============================================================
   3. 汎用レイアウト部品
   ============================================================ */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 小見出しの上に置く英字ラベル */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--green);
}

/* 大きめの縦余白を持つセクション */
.section {
  padding: clamp(56px, 8vw, 110px) 0;
}

/* 導入文（リード） */
.lede {
  max-width: 60ch;
  font-size: var(--fs-lede);
  line-height: 1.9;
  color: var(--ink-soft);
}


/* ============================================================
   4. スクロール表示アニメーション（カードのみ）
   ============================================================ */
.reveal {
  /* 既定では静止。カードだけが下から現れる */
}
.card.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   .7s var(--ease),
    transform .7s var(--ease);
}
.card.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .card.reveal {
    opacity: 1;
    transform: none;
  }
}


/* ============================================================
   5. ヘッダー（固定・スクロールで背景表示）
   ============================================================ */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition:
    background       .4s var(--ease),
    backdrop-filter  .4s var(--ease),
    border-color     .4s var(--ease);
}
.hdr.scrolled {
  background: rgba(242, 245, 250, .82);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.hdr__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* ロゴ */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: .01em;
}
.brand__logo {
  height: 32px;
  width: auto;
  display: block;
  transition: filter .4s var(--ease);
}
.ft__brand .brand__logo {
  height: 30px;
}

/* --- ヒーローと重なっている間（トップ・未スクロール）は白基調 ---
   スクロールで背景が出たあと（.scrolled）は通常の黒基調へ戻す。 */
body.home .hdr:not(.scrolled) .brand__logo {
  filter: brightness(0) invert(1);   /* ロゴを白抜きにして暗い写真上でも視認可 */
}
body.home .hdr:not(.scrolled) .nav__link {
  color: rgba(255, 255, 255, .88);
}
body.home .hdr:not(.scrolled) .nav__link:hover,
body.home .hdr:not(.scrolled) .nav__item.open > .nav__link {
  color: #fff;
}
body.home .hdr:not(.scrolled) .burger span {
  background: #fff;
}

/* --- PCグローバルナビ ------------------------------------- */
.nav {
  display: none;
}
.nav ul {
  display: flex;
  align-items: center;
  gap: 38px;
}
.nav__item {
  position: relative;
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 26px 0;
  font-size: .92rem;
  color: var(--ink-soft);
  transition: color .3s var(--ease);
}
/* ドロップダウンを持つ項目の▽マーク */
.nav__item[data-dropdown] > .nav__link::before {
  content: "";
  order: 2;
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 2px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform .3s var(--ease);
}
.nav__item[data-dropdown].open > .nav__link::before {
  transform: rotate(-135deg) translateY(-1px);
}
.nav__link:hover,
.nav__item.open > .nav__link {
  color: var(--ink);
}
/* ホバー時の下線 */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 18px;
  width: 0;
  height: 1.5px;
  background: var(--green);
  transition: width .3s var(--ease);
}
.nav__link:hover::after,
.nav__item.open > .nav__link::after {
  width: calc(100% - 11px);
}

/* --- ドロップダウンパネル --------------------------------- */
.nav__panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 20;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 44px -24px rgba(43, 42, 38, .4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity    .25s var(--ease),
    transform  .25s var(--ease),
    visibility .25s;
}
.nav__item.open > .nav__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__panel a {
  padding: 10px 14px;
  font-size: .9rem;
  color: var(--ink-soft);
  white-space: nowrap;
  border-radius: 8px;
  transition:
    background .2s var(--ease),
    color      .2s var(--ease);
}
.nav__panel a:hover {
  background: var(--bg-2);
  color: var(--ink);
}
.nav__panel-eyb {
  padding: 6px 14px 2px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.nav__panel a.nav__panel-hub {
  margin: 0 6px 6px;
  padding: 6px 8px 10px;
  font-size: .82rem;
  color: var(--green-deep);
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}
.nav__panel a.nav__panel-hub:hover {
  background: transparent;
  color: var(--green);
}
.nav__panel a.nav__panel-hub span {
  display: inline-block;
  transition: transform .25s var(--ease);
}
.nav__panel a.nav__panel-hub:hover span {
  transform: translateX(3px);
}

/* --- 採用情報（強調ボタン） ------------------------------- */
.nav__highlight {
  padding: 10px 22px;
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .02em;
  color: #fff;
  background: var(--green);
  border-radius: 999px;
  transition:
    background .3s var(--ease),
    transform  .3s var(--ease);
}
.nav__highlight:hover {
  background: var(--green-deep);
  color: #fff;
  transform: translateY(-1px);
}

/* --- ハンバーガー（スマホ） ------------------------------- */
.burger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: none;
  border: none;
}
.burger span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition:
    transform .35s var(--ease),
    opacity   .35s var(--ease);
}
.burger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger.open span:nth-child(2) {
  opacity: 0;
}
.burger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 768px) {
  .nav {
    display: block;
    margin-left: auto;
  }
  .burger {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .nav__item--tablet-hide {
    display: none;
  }
  .nav ul {
    gap: 24px;
  }
}


/* ============================================================
   6. モバイルナビ（フルスクリーン・アコーディオン）
   ============================================================ */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--header-h) + 26px) var(--gutter) 48px;
  overflow-y: auto;
  background: var(--bg);
  transform: translateY(-100%);
  visibility: hidden;
  transition:
    transform  .45s var(--ease),
    visibility .45s var(--ease);
}
.mnav.open {
  transform: none;
  visibility: visible;
}
.mnav__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mnav__group,
.mnav__item {
  border-bottom: 1px solid var(--line);
}
.mnav__top {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 16px 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 6.5vw, 2.1rem);
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}
.mnav__top > span {
  flex: none;
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--green-deep);
}

/* ＋／−アイコン */
.mnav__pm {
  position: relative;
  flex: none;
  width: 15px;
  height: 15px;
  margin-left: auto;
}
.mnav__pm::before,
.mnav__pm::after {
  content: "";
  position: absolute;
  background: var(--ink-soft);
  border-radius: 2px;
  transition: transform .3s var(--ease);
}
.mnav__pm::before {
  left: 0;
  top: 6.5px;
  width: 15px;
  height: 2px;
}
.mnav__pm::after {
  left: 6.5px;
  top: 0;
  width: 2px;
  height: 15px;
}
.mnav__group.open .mnav__pm::after {
  transform: scaleY(0);
}

/* サブメニュー */
.mnav__sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--ease);
}
.mnav__sub a {
  display: block;
  padding: 11px 0 11px 32px;
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--ink-soft);
}
.mnav__sub a:first-child {
  color: var(--green-deep);
}
.mnav__sub a:last-child {
  padding-bottom: 20px;
}
.mnav__sub a:hover {
  color: var(--ink);
}

/* 採用情報CTA */
.mnav a.mnav__cta {
  width: fit-content;
  margin-top: 42px;
  padding: 15px 30px;
  font-family: var(--mono);
  font-size: .85rem;
  color: #fff;
  background: var(--orange);
  border-radius: 999px;
  transition: background .3s var(--ease);
}
.mnav a.mnav__cta:hover {
  background: var(--orange-deep);
}

@media (min-width: 768px) {
  .mnav {
    display: none;
  }
}


/* ============================================================
   7. ヒーロー（トップページ）
   ============================================================ */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: calc(var(--header-h) + 40px) 0 70px;
  background: #0E1420;
}

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #0E1420 url('/images/hero-city.jpg') center / cover no-repeat;
  filter: grayscale(1) contrast(1.15) brightness(.95);
}
.hero__duo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(63, 107, 41, .85), rgba(26, 36, 53, .85));
  mix-blend-mode: color;
}
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(14, 20, 32, .84) 0%,
    rgba(14, 20, 32, .55) 46%,
    rgba(14, 20, 32, .30) 72%,
    rgba(14, 20, 32, .30) 100%
  );
}

.hero .hero__in {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.hero__copy {
  max-width: 640px;
}

/* 見出し（白文字・双葉のブランドバーは残す） */
.hero .hero__title::before {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  margin-bottom: 28px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green) 0 50%, var(--orange) 50% 100%);
}
.hero .hero__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 900;
  font-size: var(--fs-hero);
  line-height: 1.28;
  letter-spacing: .02em;
  color: #FFFFFF;
}
.hero .ln {
  display: block;
}

/* リード文 */
.hero .hero__lede {
  max-width: 44ch;
  margin-top: 26px;
  font-size: var(--fs-lede);
  line-height: 1.95;
  color: #D3DCEA;
}
.hero .hero__lede b {
  color: #fff;
  font-weight: 600;
}

/* ボタン */
.hero .hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}
.hero__actions .btn {
  border: 1.5px solid transparent;
}
.hero__actions .btn--primary {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
}
.hero__actions .btn--primary:hover {
  color: #fff;
  background: var(--green-deep);
  border-color: var(--green-deep);
  transform: translateY(-2px);
}
.hero__actions .btn--g {
  color: #fff;
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .45);
  backdrop-filter: blur(3px);
}
.hero__actions .btn--g:hover {
  color: #fff;
  background: rgba(255, 255, 255, .20);
  border-color: rgba(255, 255, 255, .7);
  transform: translateY(-2px);
}

/* ページ読み込み時のフェードは、コピー全体で1回だけ */
.hero__copy {
  opacity: 0;
  animation: fadeUp .9s var(--ease) .1s forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__copy {
    opacity: 1;
    animation: none;
  }
}

/* スマホ：暗幕を全体に均一化して可読性を担保 */
@media (max-width: 720px) {
  .hero__shade {
    background: linear-gradient(180deg, rgba(14, 20, 32, .72), rgba(14, 20, 32, .78));
  }
  .hero__copy {
    max-width: none;
  }
}


/* ============================================================
   8. ボタン
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 8px;
  transition:
    transform    .3s var(--ease),
    background   .3s var(--ease),
    color        .3s var(--ease),
    border-color .3s var(--ease);
}
.btn--primary {
  color: #fff;
  background: var(--orange);
}
.btn--primary:hover {
  background: var(--orange-deep);
  transform: translateY(-2px);
}
.btn--ghost {
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn--ghost:hover {
  color: var(--green-deep);
  border-color: var(--green);
}
.btn .arr {
  transition: transform .3s var(--ease);
}
.btn:hover .arr {
  transform: translateX(4px);
}


/* ============================================================
   9. About（会社紹介ブロック）
   ============================================================ */
.about {
  background: #fff;
}
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.about__head {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .005em;
}
.about__head em {
  color: var(--green-deep);
}

/* 数値の並び */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
}
.stat .n {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1;
}
.stat .n.o {
  color: var(--orange);
}
.stat .n.g {
  color: var(--green-deep);
}
.stat .l {
  margin-top: 8px;
  font-size: .86rem;
  color: var(--ink-soft);
}
@media (min-width: 1024px) {
  .about__grid {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
}

/* About を濃紺背景で使うバリエーション */
.about--dark {
  color: var(--bg);
  background: var(--ink);
}
.about--dark .eyebrow {
  color: #B9D19C;
}
.about--dark .about__head {
  color: #fff;
}
.about--dark .lede {
  color: #E4E7EC;
}
.about--dark .about__lead-body {
  margin-top: 18px;
  line-height: 1.95;
  color: #C9C4BA;
}
/* 白カードは通常どおり濃色テキストへ戻す（inherit で白文字化するのを防ぐ） */
.about--dark .card {
  color: var(--ink);
}
.about--dark .card__t {
  color: var(--ink);
}


/* ============================================================
   10. セクション見出し
   ============================================================ */
.sh {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 54px;
}
.sh__title {
  margin-top: 18px;
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .005em;
}
.sh__link {
  padding-bottom: 5px;
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--ink);
  white-space: nowrap;
  border-bottom: 1.5px solid var(--line);
  transition:
    color        .3s var(--ease),
    border-color .3s var(--ease);
}
.sh__link:hover {
  color: var(--green-deep);
  border-color: var(--green);
}


/* ============================================================
   11. カード（サービス・採用など）
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 768px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .cards--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  --accent:      var(--green);
  --accent-deep: var(--green-deep);
  position: relative;
  display: block;
  padding: 40px;
  overflow: hidden;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--accent);
  border-radius: var(--r);
  box-shadow: 0 2px 12px -5px rgba(26, 36, 53, .12);
  transition:
    transform  .4s var(--ease),
    box-shadow .4s var(--ease);
}

/* カードごとのアクセント色 */
.card--g {
  --accent:      var(--green);
  --accent-deep: var(--green-deep);
}
.card--o {
  /* アクセントは緑に統一（橙はCTA・採用タグ専用） */
  --accent:      var(--green);
  --accent-deep: var(--green-deep);
}

/* ホバーで浮き上がり＋タイトル下線（全ページ共通） */
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -18px rgba(26, 36, 53, .24);
}
.card__no {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--accent-deep);
}
.card__t {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 14px;
  font-family: var(--serif);
  font-size: var(--fs-h3);
  font-weight: 600;
}
.card__t .arr {
  transition: transform .3s var(--ease);
}
.card:hover .card__t .arr {
  transform: translateX(4px);
}
.card__d {
  font-size: .96rem;
  line-height: 1.85;
  color: var(--ink-soft);
}
.card__dot {
  display: none;
}

/* --- 写真つきカード（サービス一覧など） ------------------ */
.card--img {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 340px;
  padding: 0;
  overflow: hidden;
  color: #fff;
  border: none;
}
.card--img .card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  transition:
    filter    .55s var(--ease),
    transform .55s var(--ease);
}
.card--img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(14, 20, 32, .72) 0%,
    rgba(14, 20, 32, .40) 42%,
    rgba(14, 20, 32, .16) 100%
  );
  transition: background .55s var(--ease);
}
.card--img .card__body {
  position: relative;
  z-index: 2;
  padding: 32px;
}
.card--img .card__no {
  color: rgba(255, 255, 255, .82);
}
.card--img .card__t {
  color: #fff;
}
.card--img .card__d {
  color: rgba(255, 255, 255, .88);
}
/* ホバー：わずかに暗くするのみ */
.card--img:hover .card__media {
  filter: brightness(.88);
}


/* ============================================================
   12. ステートメント帯（濃紺の背景）
   ============================================================ */
.philo {
  color: var(--bg);
  background: var(--ink);
}
.philo__in {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 40px;
}
.philo__q {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.4vw, 2.8rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .005em;
}
.philo__q em {
  color: var(--orange);
}
.philo__q b {
  font-weight: 600;
  color: #9CC66E;
}
.philo__txt {
  font-size: 1rem;
  line-height: 1.95;
  color: #C9C4BA;
}
.philo__txt p + p {
  margin-top: 16px;
}
@media (min-width: 1024px) {
  .philo__in {
    grid-template-columns: 1.1fr .9fr;
    gap: 72px;
  }
}


/* ============================================================
   13. ニュース一覧
   ============================================================ */
.news {
  border-top: 1px solid var(--line);
}
.news li {
  border-bottom: 1px solid var(--line);
}
.news a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 4px;
}
.news .date {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--ink-soft);
}
.news .tag {
  width: fit-content;
  padding: 2px 9px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  border-radius: 4px;
}
.news .tag.o {
  color: var(--orange-deep);
  background: rgba(224, 138, 60, .14);
}
.news .tag.g {
  color: var(--green-deep);
  background: rgba(91, 140, 62, .14);
}
.news .ttl {
  position: relative;
  display: inline-block;
  font-size: 1.08rem;
}
.news a:hover .ttl {
  color: var(--green-deep);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
@media (min-width: 768px) {
  .news a {
    flex-direction: row;
    align-items: center;
    gap: 28px;
  }
  .news .date {
    width: 7em;
    flex: none;
  }
  .news .tag {
    flex: none;
  }
}


/* ============================================================
   14. 採用セクション
   ============================================================ */
.careers {
  background: var(--bg-2);
}


/* ============================================================
   15. コンタクト帯
   ============================================================ */
.contact {
  background: var(--tint-warm);
  border-top: 1px solid rgba(224, 138, 60, .26);
}
.contact__in {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 28px;
}
.contact .eyebrow {
  margin-bottom: 14px;
}
.contact__t {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .005em;
}
.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.contact__actions .btn {
  border: 1.5px solid transparent;
}
@media (min-width: 860px) {
  .contact__in {
    grid-template-columns: 1.5fr .9fr;
    gap: 48px;
  }
  .contact__actions {
    justify-content: flex-end;
  }
}


/* ============================================================
   16. フッター（濃紺）
   ============================================================ */
.ft {
  padding: 70px 0 36px;
  color: #E7EBF2;
  background: #1E2A3A;
}
.ft .brand {
  color: #fff;
}
.ft__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.ft__brand .brand {
  font-size: 1.5rem;
}
.ft__tag {
  max-width: 34ch;
  margin-top: 14px;
  font-size: .9rem;
  line-height: 1.85;
  color: #9DABC0;
}
.ft__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.ft__cols h4 {
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8C99AF;
}
.ft__cols ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.ft__cols a {
  font-size: .92rem;
  color: #D6DDE9;
  transition: color .3s var(--ease);
}
.ft__cols a:hover {
  color: #9CC66E;
}
.ft__btm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 30px;
  font-size: .78rem;
  color: #8C99AF;
  text-align: center;
}

/* ポリシー各種（フッター最下部の横並び） */
.ft__policy {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
}
.ft__policy a {
  font-family: var(--mono);
  font-size: .74rem;
  color: #9DABC0;
  transition: color .3s var(--ease);
}
.ft__policy a:hover {
  color: #9CC66E;
}

@media (min-width: 768px) {
  .ft__top {
    grid-template-columns: 1fr 2.3fr;
  }
  .ft__cols {
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
  }
}


/* ============================================================
   17. 下層ページ共通（ページヘッダー・パンくず・現在地）
   ============================================================ */

/* ナビ現在地 */
.nav__link[aria-current="page"] {
  color: var(--ink);
}
.nav__link[aria-current="page"]::after {
  width: calc(100% - 11px);
}

/* --- ページヘッダー（ライン・ミニマル） ------------------ */
.phero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 46px) 0 0;
  background: #F2F7EC;
}
.phero .bg,
.phero .dots {
  display: none;
}
/* 見出しブロック：パンくず・eyebrow・タイトル・リードの
   左端をすべて 24px に統一。細い区切り線を1本だけ引く。 */
.phero__in {
  position: relative;
  z-index: 2;
  padding-bottom: 42px;
  border-bottom: 1px solid rgba(91, 140, 62, .22);
}
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  margin-left: 24px;
  margin-bottom: 28px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.crumb a {
  color: var(--ink-soft);
  transition: color .3s var(--ease);
}
.crumb a:hover {
  color: var(--green-deep);
}
.crumb > span:last-child {
  color: var(--ink);
}
.crumb span[aria-hidden] {
  opacity: .4;
}
.phero .eyebrow {
  margin-bottom: 16px;
  margin-left: 24px;
}
.phero__title {
  position: relative;
  padding-left: 24px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.22;
  letter-spacing: .005em;
}
/* ブランドのアクセントバー（左端・タイトルの高さ分だけ） */
.phero__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .16em;
  bottom: .16em;
  width: 5px;
  border-radius: 3px;
  background: var(--green);
}
.phero__lede {
  max-width: 52ch;
  margin-top: 20px;
  margin-left: 24px;
  font-size: var(--fs-lede);
  line-height: 1.9;
  color: var(--ink-soft);
}

/* 交互の帯背景（淡い緑） */
.section--alt {
  background: var(--tint-green);
}


/* ============================================================
   18. 汎用定義テーブル（会社概要・募集要項など）
   ============================================================ */
.deftable {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--line);
  font-size: .97rem;
}
.deftable th,
.deftable td {
  padding: 20px 6px;
  text-align: left;
  vertical-align: top;
  line-height: 1.8;
  border-bottom: 1px solid var(--line);
}
.deftable th {
  width: 11em;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .05em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.deftable td {
  color: var(--ink);
}
@media (max-width: 560px) {
  .deftable,
  .deftable tbody,
  .deftable tr,
  .deftable th,
  .deftable td {
    display: block;
    width: auto;
  }
  .deftable tr {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
  }
  .deftable th,
  .deftable td {
    padding: 0;
    border: none;
  }
  .deftable th {
    margin-bottom: 4px;
    color: var(--green-deep);
  }
}


/* ============================================================
   19. ステップ（選考フローなど・縦タイムライン）
   ============================================================ */
.flow {
  display: grid;
  margin: 0 0 0 14px;
  padding: 0;
  list-style: none;
  counter-reset: flow;
  border-left: 2px solid var(--line);
}
.flow li {
  position: relative;
  padding: 0 0 28px 34px;
}
.flow li:last-child {
  padding-bottom: 0;
}
.flow li::before {
  counter-increment: flow;
  content: counter(flow);
  position: absolute;
  left: -15px;
  top: -3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--green-deep);
  background: #fff;
  border: 2px solid var(--green);
  border-radius: 50%;
}
.flow h3 {
  margin: 1px 0 4px;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
}
.flow p {
  max-width: 60ch;
  font-size: .95rem;
  color: var(--ink-soft);
}


/* ============================================================
   20. ニュース：カテゴリタブ
   ============================================================ */
.news-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.news-tab {
  padding: 7px 16px;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition:
    border-color .25s var(--ease),
    color        .25s var(--ease),
    background   .25s var(--ease);
}
.news-tab:hover {
  color: var(--green-deep);
  border-color: var(--green);
}
.news-tab.is-active {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}


/* ============================================================
   21. 記事レイアウト（ニュース詳細など）
   ============================================================ */
.article {
  padding-top: calc(var(--header-h) + 50px);
}
.article > .container {
  max-width: 760px;
}
.article .crumb {
  margin-bottom: 22px;
}
.article__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.article__meta .date {
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--ink-soft);
}
.article__meta .tag {
  padding: 2px 9px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  border-radius: 4px;
}
.article__meta .tag.o {
  color: var(--orange-deep);
  background: rgba(224, 138, 60, .14);
}
.article__meta .tag.g {
  color: var(--green-deep);
  background: rgba(91, 140, 62, .14);
}
.article__title {
  margin-bottom: 30px;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .005em;
}
.article__body {
  font-size: 1rem;
  line-height: 2;
  color: var(--ink);
}
.article__body p {
  max-width: 70ch;
  margin-bottom: 18px;
}
.article__body h2 {
  margin: 32px 0 12px;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
}
.article__body .box {
  padding: 18px 20px;
  font-size: .95rem;
  line-height: 1.9;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.article__body ol,
.article__body ul {
  max-width: 70ch;
  margin: 0 0 20px 1.4em;
}
.article__body li {
  margin-bottom: 9px;
  line-height: 1.9;
  color: var(--ink);
}
.article__body .sign {
  margin-top: 30px;
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.8;
  color: var(--ink-soft);
}
.article__back {
  display: inline-block;
  margin-top: 36px;
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--green-deep);
}
.article__back:hover {
  text-decoration: underline;
}


/* ============================================================
   22. 組織図
   ============================================================ */
.orgchart {
  margin: 0;
}
.orgchart svg {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto;
}


/* ============================================================
   23. 準備中プレースホルダー（構成の骨組みページ用）
   ============================================================ */
.wip {
  padding: 22px 24px;
  font-size: .95rem;
  line-height: 1.9;
  color: var(--ink-soft);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--r);
}
.wip b {
  color: var(--ink);
}


/* ============================================================
   21. セクション装飾（トップページのメリハリ用）
   ============================================================ */

/* 採用情報の帯（トップ） */
.careers-band {
  background: var(--tint-green);
  border-top:    1px solid rgba(91, 140, 62, .28);
  border-bottom: 1px solid rgba(91, 140, 62, .28);
}

/* ============================================================
   22. 年表（沿革）
   ============================================================ */
.tl {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 720px;
  margin-left: 8px;
  padding-left: 30px;
  list-style: none;
  border-left: 2px solid var(--line);
}
.tl li {
  position: relative;
}
.tl li::before {
  content: "";
  position: absolute;
  left: -39px;
  top: .32em;
  width: 12px;
  height: 12px;
  background: var(--surface);
  border: 3px solid var(--green);
  border-radius: 50%;
}
.tl li:nth-child(even)::before {
  border-color: var(--orange);
}
.tl .y {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--green-deep);
}
.tl li:nth-child(even) .y {
  color: var(--orange-deep);
}
.tl .t {
  margin-top: 3px;
  font-weight: 600;
}
.tl .d {
  margin-top: 4px;
  font-size: .93rem;
  line-height: 1.85;
  color: var(--ink-soft);
}


/* ============================================================
   23. FAQ（開閉式）
   ============================================================ */
.faq {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 860px;
}
.faq details {
  padding: 0 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.faq summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 20px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::before {
  content: "Q";
  font-family: var(--mono);
  color: var(--orange-deep);
}
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--mono);
  color: var(--ink-soft);
}
.faq details[open] summary::after {
  content: "−";
}
.faq .a {
  display: flex;
  gap: 14px;
  padding: 0 0 22px;
  font-size: .95rem;
  line-height: 1.9;
  color: var(--ink-soft);
}
.faq .a::before {
  content: "A";
  font-family: var(--mono);
  color: var(--green-deep);
}


/* ============================================================
   24. 認証バッジ（QMS / EMS / ISMS）
   ============================================================ */
.cert__mark {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--accent-deep, var(--green-deep));
  text-align: center;
  border: 2px solid var(--accent, var(--green));
  border-radius: 50%;
}


/* ============================================================
   25. 補足注記（暫定値・例示であることを示す）
   ============================================================ */
.note {
  margin-top: 26px;
  font-size: .8rem;
  color: var(--ink-soft);
  opacity: .85;
}


/* ============================================================
   26. Googleマップ埋め込み（拠点・アクセス）
   ============================================================ */
.map {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}


/* ============================================================
   27. 組織図（ツリー表示）
   ============================================================ */
.org {
  --org-line: #C3CEDD;
  max-width: 640px;
  margin: 0 auto;
}

/* ノード（箱）─ すべて同一の見た目で統一 */
.org__node {
  width: min(240px, 100%);
  margin: 0 auto;
  padding: 14px 10px;
  font-weight: 600;
  text-align: center;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
}

/* 縦の接続線 */
.org__link {
  position: relative;
  width: 2px;
  height: 36px;
  margin: 0 auto;
  background: var(--org-line);
}

/* 縦線から右へ枝分かれ（監査役・経営企画室） */
.org__link--side {
  height: 88px;
}
.org__branch {
  position: absolute;
  top: 50%;
  left: 2px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transform: translateY(-50%);
}
.org__branch::before {
  content: "";
  display: block;
  width: clamp(28px, 7vw, 60px);
  height: 2px;
  background: var(--org-line);
}
/* 横枝の箱も、他のノードと完全に同一の見た目 */
.org__branch b {
  padding: 14px 10px;
  width: clamp(120px, 34vw, 200px);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
}

/* 二股（総務部・技術本部） */
.org__split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.org__split::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  width: 50%;
  height: 2px;
  background: var(--org-line);
}
.org__col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.org__col::before {
  content: "";
  width: 2px;
  height: 32px;
  background: var(--org-line);
}
.org__col .org__node {
  width: min(200px, 92%);
}