/* ============================================================
   Big11 共通スタイル
   デザイン変数は css/tokens.css を参照。
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 84px; } /* 固定ヘッダー分、アンカー着地位置を下げる */

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
em { font-style: normal; color: var(--green-deep); }

.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }

/* ---------------- Header ---------------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.header.is-scrolled { border-bottom-color: var(--border); }
.header-inner {
  /* ロゴを画面左端に寄せるため、コンテナ幅で中央寄せせず全幅を使う */
  max-width: none; padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
/* ロゴ: 旧サイト(big11scc.com)踏襲 — ゴールド正方形の「B」＋セリフ体ロゴタイプ */
.brand { display: flex; align-items: center; gap: 0.8rem; }
.brand-mark {
  flex: 0 0 auto; width: 32px; height: 32px; background: var(--gold);
  color: var(--white); font-family: Georgia, serif; font-style: italic;
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.brand-logo {
  font-family: var(--font-logo); font-weight: 400;
  font-size: 1.4rem; letter-spacing: 5px; color: var(--text);
}

.gnav { display: flex; align-items: center; gap: 1.6rem; }
.gnav a {
  font-size: var(--fs-sm); color: var(--text-soft);
  padding: 0.4rem 0; position: relative; transition: color var(--dur-fast) ease;
}
.gnav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--grad-green);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease);
  border-radius: 2px;
}
.gnav a:hover, .gnav a.is-current { color: var(--green-deep); }
.gnav a:hover::after, .gnav a.is-current::after { transform: scaleX(1); }
.gnav .nav-cta {
  background: var(--green-deep); color: var(--white);
  padding: 0.55rem 1.3rem; border-radius: 999px;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.gnav .nav-cta::after { display: none; }
.gnav .nav-cta:hover { background: var(--green); color: var(--white); transform: translateY(-1px); }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; position: relative; z-index: 110;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--text);
  margin: 5px auto; border-radius: 2px; transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------- Footer ---------------- */
.footer {
  background: var(--green-mist);
  border-top: 1px solid var(--border);
  padding: var(--sp-6) 0 var(--sp-4);
  margin-top: var(--sp-section);
}
.footer-grid {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  justify-content: space-between; margin-bottom: var(--sp-5);
}
.footer-brand .brand { margin-bottom: 0.6rem; }
.footer-brand p { font-size: var(--fs-sm); color: var(--text-mute); }
.footer-nav { display: grid; grid-template-columns: repeat(2, auto); gap: 0.6rem 2.5rem; }
.footer-nav a { font-size: var(--fs-sm); color: var(--text-soft); transition: color var(--dur-fast) ease; }
.footer-nav a:hover { color: var(--green-deep); }
.footer-copy { font-size: var(--fs-xs); color: var(--text-mute); text-align: center; letter-spacing: var(--ls-wide); }

/* ---------------- 汎用パーツ ---------------- */
.section { padding-block: var(--sp-section); }
.section--tinted { background: var(--offwhite); }
.section--mist { background: var(--green-mist); }
/* 写真背景セクション（ミッションページ）。暗めのスクリムで白文字の可読性を確保 */
.section--photo {
  position: relative; background-size: cover; background-position: center;
  color: var(--white); padding-block: calc(var(--sp-section) * 1.25);
}
.section--photo::before { content: ""; position: absolute; inset: 0; background: rgba(8, 18, 10, 0.5); }
.section--photo > .container { position: relative; }
.section--photo .section-label { color: var(--green-soft); }
.section--photo .value-block { color: var(--text); } /* 白カード内は通常の文字色に戻す */
.section--photo .section-lead { color: rgba(255, 255, 255, 0.88); }
.section--photo .mantra, .section--photo .mission-copy { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }
.section--mantra-earth { background-image: url("../assets/img/mission_bg_earth.jpg"); }
.section--mission-jungle { background-image: url("../assets/img/mission_bg_jungle.jpg"); }
.section--value-sea { background-image: url("../assets/img/mission_bg_sea.jpg"); }

.section-label {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: var(--fs-xs); letter-spacing: var(--ls-wide);
  color: var(--green-deep); text-transform: uppercase; font-weight: 700;
  margin-bottom: var(--sp-2);
}
.section-label::before { content: ""; width: 26px; height: 2px; background: var(--grad-green); border-radius: 2px; }

.section-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-title); line-height: var(--lh-tight);
  margin-bottom: var(--sp-3);
}
.section-lead { color: var(--text-soft); max-width: 640px; }

.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.9rem 2.2rem; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--ls-base);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
  cursor: pointer; border: 0;
}
.btn--primary { background: var(--green-deep); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--green); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--ghost { border: 1px solid var(--green-deep); color: var(--green-deep); background: transparent; }
.btn--ghost:hover { background: var(--green-pale); transform: translateY(-2px); }
.btn--gold { background: var(--gold); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--gold:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn .arrow { transition: transform var(--dur-fast) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ページ下部の横断ナビ（次のページへの導線） */
.page-cta { text-align: center; }
.page-cta .btn { margin: 0.5rem; }

/* ---------------- スクロール出現アニメーション ----------------
   統一ルール: フェード + 上方向へ28pxスライド / 0.7s / --ease。
   時差は .reveal-d1〜d3（0.12s刻み）のみ使用し、これ以外の動きは追加しない。 */
.reveal {
  opacity: 0; transform: translateY(var(--reveal-shift));
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.12s; }
.reveal-d2 { transition-delay: 0.24s; }
.reveal-d3 { transition-delay: 0.36s; }

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

/* ---------------- ヒーロー（TOP） ---------------- */
.hero {
  position: relative; min-height: 92vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; text-align: center; color: var(--white);
}
/* 動画プレースホルダー:
   素材が用意でき次第、index.html 内の <div class="hero-media"> を
   <video class="hero-media" autoplay muted loop playsinline src="..."></video>
   に置き換えるだけで差し替え完了（この1箇所のみ修正）。 */
.hero-media {
  position: absolute; inset: 0; z-index: 0;
  /* ヒーローのみ、基調色よりさらに鮮やかな黄緑トーン */
  background: linear-gradient(160deg, #62B517 0%, #7ECB2F 40%, #96DC44 72%, #ABE55C 100%);
  background-size: 220% 220%;
  animation: heroDrift 18s ease-in-out infinite alternate;
  object-fit: cover; width: 100%; height: 100%;
}
@keyframes heroDrift {
  from { background-position: 0% 0%; }
  to { background-position: 100% 100%; }
}
.hero::after { /* 手前の柔らかい光 */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 60% 45% at 70% 20%, rgba(255,255,255,0.14), transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 85%, rgba(255,255,255,0.10), transparent 70%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; padding: var(--sp-6) var(--gutter); }
/* 背景が明るい黄緑のため、白文字の可読性確保に柔らかいシャドウを敷く */
.hero-copy {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-hero); line-height: 1.9; letter-spacing: 0.08em;
  text-shadow: 0 2px 22px rgba(43, 82, 14, 0.45), 0 1px 4px rgba(43, 82, 14, 0.3);
}
.hero-sub {
  margin-top: var(--sp-3); font-size: var(--fs-md); opacity: 0.95; line-height: var(--lh-loose);
  text-shadow: 0 1px 12px rgba(43, 82, 14, 0.5);
}
.hero-scroll {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%); z-index: 2;
  font-size: var(--fs-xs); letter-spacing: var(--ls-wide); color: rgba(255,255,255,0.85);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.hero-scroll::after {
  content: ""; width: 1px; height: 42px; background: rgba(255,255,255,0.6);
  animation: scrollHint 2.2s ease-in-out infinite;
}
@keyframes scrollHint {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ヒーロー段階フェードイン（初回表示時のみ） */
.hero-fade { opacity: 0; transform: translateY(16px); animation: heroFade 1.2s var(--ease) forwards; }
.hero-fade--2 { animation-delay: 0.5s; }
.hero-fade--3 { animation-delay: 1s; }
@keyframes heroFade { to { opacity: 1; transform: none; } }

/* ---------------- 数字カウントアップ ---------------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); text-align: center; }
.stat-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-3xl); color: var(--green-deep); line-height: 1.2;
}
.stat-num .unit { font-size: 0.45em; margin-left: 0.15em; }
.stat-label { font-size: var(--fs-sm); color: var(--text-soft); margin-top: 0.4rem; }
.stat-note { font-size: var(--fs-xs); color: var(--text-mute); margin-top: var(--sp-3); text-align: center; }

/* ---------------- カード ---------------- */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-4);
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
  display: block;
}
a.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--green-soft); }
.card-num {
  font-family: var(--font-display); font-size: var(--fs-sm);
  color: var(--green-soft); letter-spacing: var(--ls-wide); margin-bottom: var(--sp-1);
}
.card-title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--sp-2); line-height: var(--lh-tight); }
.card-text { font-size: var(--fs-sm); color: var(--text-soft); }
.card-more { display: inline-block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--green-deep); font-weight: 700; letter-spacing: var(--ls-wide); }

/* 事業紹介の写真バナー（セクション見出し下の横長イメージ） */
.biz-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); margin-bottom: var(--sp-4); }
.biz-photo img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
/* TOP事業カードのサムネイル（カードのパディングを打ち消して全幅表示） */
.card-photo { margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-3); }
.card-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

/* ---------------- ストーリー（時系列） ---------------- */
.story-lead {
  font-family: var(--font-display); font-size: var(--fs-lg);
  line-height: var(--lh-loose); color: var(--text);
}
.chapter { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: center; margin-bottom: var(--sp-7); }
.chapter:nth-of-type(even) .chapter-img { order: 2; }
.chapter-img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.chapter-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.chapter-era { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); color: var(--green-deep); font-weight: 700; margin-bottom: var(--sp-1); }
.chapter-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; line-height: var(--lh-tight); margin-bottom: var(--sp-2); }
.chapter-body { color: var(--text-soft); font-size: var(--fs-sm); line-height: var(--lh-loose); }
.chapter--turn { /* 転換点（怪我・引退）: 写真なし・静かな全幅ブロック */
  display: block; text-align: center; background: var(--green-mist);
  border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-4);
}
.chapter--turn .chapter-body { max-width: 560px; margin: 0 auto; }

/* ---------------- ミッション・バリュー ---------------- */
.mantra {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem); line-height: 2; letter-spacing: 0.08em;
  text-align: center;
}
.mission-copy {
  font-family: var(--font-display); font-size: var(--fs-md);
  line-height: var(--lh-loose); text-align: center;
}
.mission-copy p + p { margin-top: var(--sp-3); }

.value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.value-block { background: var(--white); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); border-top: 3px solid var(--green-deep); }
.value-block h3 { font-family: var(--font-display); font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.value-block li {
  padding: 0.85rem 0 0.85rem 1.9rem; position: relative;
  border-bottom: 1px dashed var(--border); font-size: var(--fs-sm); color: var(--text-soft);
}
.value-block li:last-child { border-bottom: 0; }
.value-block li::before {
  content: ""; position: absolute; left: 0; top: 1.35rem;
  width: 9px; height: 9px; border-radius: 50%; background: var(--grad-green);
}

/* ---------------- メンバー ---------------- */
/* 一覧は5名を横一列に。コンテナの横幅を最大限使い、全員の顔と名前が1画面に収まる */
.member-rows { display: grid; gap: var(--sp-2); }
.member-row { display: grid; gap: var(--sp-2); }
.member-row--five { grid-template-columns: repeat(5, 1fr); }
.member-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); display: block;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
a.member-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--green-soft); }
.member-photo { aspect-ratio: 1 / 1; overflow: hidden; }
.member-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.member-body { padding: var(--sp-3); }
.member-rows .member-body { padding: 0.7rem 0.9rem 0.85rem; }
.member-rows .member-name { font-size: var(--fs-base); }
.member-rows .member-role { font-size: 0.65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-rows .member-name-en { display: none; } /* 一覧はコンパクト表示。英字名は詳細ページで */
.member-rows .member-more { margin-top: 0.35rem; }
.member-role { font-size: var(--fs-xs); color: var(--green-deep); font-weight: 700; letter-spacing: var(--ls-wide); }
.member-name { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; margin: 0.3rem 0 0.1rem; }
.member-name-en { font-size: var(--fs-xs); color: var(--text-mute); letter-spacing: var(--ls-wide); margin-bottom: 0.7rem; }
.member-quote { font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.8; }
.member-more { display: inline-block; margin-top: 0.7rem; font-size: var(--fs-xs); color: var(--green-deep); font-weight: 700; letter-spacing: var(--ls-wide); }

/* ---------------- メンバー詳細ページ ---------------- */
.member-detail { display: grid; grid-template-columns: 380px 1fr; gap: var(--sp-5); align-items: start; }
.member-detail-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.member-detail-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 30%; }
.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--sp-2) 0 var(--sp-4); }
.tag-list li { font-size: var(--fs-xs); color: var(--green-deep); background: var(--green-pale); border-radius: 999px; padding: 0.25rem 0.95rem; font-weight: 700; }
.member-quote-block {
  background: var(--green-mist); border-left: 3px solid var(--green-deep); border-radius: var(--radius-sm);
  padding: var(--sp-3); font-family: var(--font-display); font-size: var(--fs-md);
  line-height: var(--lh-loose); margin-bottom: var(--sp-4);
}
.achieve-list { display: grid; gap: var(--sp-2); }
.achieve-item { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3); box-shadow: var(--shadow-sm); }
.achieve-label { font-size: var(--fs-xs); color: var(--text-mute); letter-spacing: var(--ls-wide); }
.achieve-value { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--green-deep); font-weight: 600; }
.achieve-detail { font-size: var(--fs-sm); color: var(--text-soft); margin-top: 0.3rem; }

/* ---------------- 会社概要テーブル ---------------- */
.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td { padding: 1.1rem 0.5rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; font-size: var(--fs-sm); }
.info-table th { width: 30%; color: var(--green-deep); font-weight: 700; white-space: nowrap; }
.info-table td { color: var(--text-soft); }

/* ---------------- NEWS / note ---------------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.news-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) ease; display: block; }
.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.news-thumb { aspect-ratio: 1200 / 630; background: var(--grad-green); display: flex; align-items: center; justify-content: center; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-thumb .thumb-mark { font-family: var(--font-display); color: rgba(255,255,255,0.9); font-size: var(--fs-lg); letter-spacing: var(--ls-wide); }
.news-body { padding: var(--sp-3); }
.news-date { font-size: var(--fs-xs); color: var(--text-mute); letter-spacing: var(--ls-wide); }
.news-title { font-size: var(--fs-sm); font-weight: 700; margin: 0.4rem 0 0.5rem; line-height: 1.7; }
.news-excerpt { font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.8; }
.news-empty { text-align: center; color: var(--text-mute); background: var(--offwhite); border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-4); font-size: var(--fs-sm); }

/* ---------------- 採用 ---------------- */
.persona-list { display: grid; gap: var(--sp-2); }
.persona-list li {
  background: var(--white); border-radius: var(--radius); padding: 1.1rem 1.4rem 1.1rem 3rem;
  box-shadow: var(--shadow-sm); position: relative; font-size: var(--fs-sm); color: var(--text-soft);
}
.persona-list li::before {
  content: "✓"; position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  color: var(--green-deep); font-weight: 700;
}
.position-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4); box-shadow: var(--shadow-sm); }
.position-card + .position-card { margin-top: var(--sp-3); }
.position-tag { display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: var(--green-deep); background: var(--green-pale); border-radius: 999px; padding: 0.2rem 0.9rem; margin-bottom: var(--sp-1); }
.position-title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--sp-2); }
.position-table th { color: var(--green-deep); font-weight: 700; white-space: nowrap; padding-right: 1.5rem; }
.position-table th, .position-table td { font-size: var(--fs-sm); padding-block: 0.45rem; text-align: left; vertical-align: top; color: var(--text-soft); }

.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); counter-reset: flow; }
.flow-step {
  background: var(--white); border: 1px solid transparent; border-radius: var(--radius);
  padding: var(--sp-3); text-align: center; box-shadow: var(--shadow-sm); position: relative;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) ease;
}
.flow-step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.flow-step::before {
  counter-increment: flow; content: "0" counter(flow);
  font-family: var(--font-display); color: var(--green-soft); font-size: var(--fs-lg); display: block; margin-bottom: 0.4rem;
}
.flow-step h4 { font-size: var(--fs-sm); margin-bottom: 0.3rem; }
.flow-step p { font-size: var(--fs-xs); color: var(--text-mute); }
/* ステップ間をつなぐ矢印バッジ（カードの間の余白中央に配置） */
.flow-step + .flow-step::after {
  content: "→"; position: absolute; top: 50%; left: calc(-0.5 * var(--sp-3));
  transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--grad-green); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; font-weight: 700; box-shadow: var(--shadow-sm); z-index: 1;
}
/* 最終ステップ「オファー」はゴールドで祝福感を（エントリーするボタンと呼応） */
.flow-step:last-child { border-color: var(--gold); }
.flow-step:last-child::before { color: var(--gold); }
.flow-step + .flow-step:last-child::after { background: var(--gold); }

/* ---------------- フォーム ---------------- */
.form-grid { display: grid; gap: var(--sp-3); }
.form-field label { display: block; font-size: var(--fs-sm); font-weight: 700; margin-bottom: 0.5rem; }
.form-field .req { color: var(--gold); font-size: var(--fs-xs); margin-left: 0.4rem; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 0.9rem 1.1rem; font: inherit; color: var(--text);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-pale);
}
.form-note { font-size: var(--fs-xs); color: var(--text-mute); }
.form-status { display: none; margin-top: var(--sp-2); padding: 1rem 1.2rem; border-radius: var(--radius-sm); background: var(--green-pale); color: var(--green-deep); font-size: var(--fs-sm); font-weight: 700; }
.form-status.is-shown { display: block; }

/* ---------------- 下層ページ共通ヒーロー ---------------- */
.page-hero { padding: calc(72px + var(--sp-6)) 0 var(--sp-5); background: var(--green-mist); }
.page-hero-en { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); color: var(--green-deep); text-transform: uppercase; margin-bottom: var(--sp-1); }
.page-hero-title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600; line-height: var(--lh-tight); }
.page-hero-lead { margin-top: var(--sp-2); color: var(--text-soft); font-size: var(--fs-sm); max-width: 640px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .gnav {
    position: fixed; inset: 0; z-index: 105;
    flex-direction: column; justify-content: center; gap: 1.8rem;
    background: rgba(250, 250, 247, 0.98);
    opacity: 0; visibility: hidden; transition: opacity var(--dur-fast) ease, visibility var(--dur-fast) ease;
  }
  .gnav.is-open { opacity: 1; visibility: visible; }
  .gnav a { font-size: var(--fs-md); }
  .nav-toggle { display: block; }

  .card-grid, .value-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .member-row--five { grid-template-columns: repeat(3, 1fr); }
  .member-detail { grid-template-columns: 1fr; }
  .member-detail-photo { max-width: 380px; }
  .chapter { grid-template-columns: 1fr; gap: var(--sp-3); margin-bottom: var(--sp-6); }
  .chapter:nth-of-type(even) .chapter-img { order: 0; }
  .flow { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .flow-step + .flow-step::after { content: "↓"; left: 50%; top: calc(-0.5 * var(--sp-3)); }
  .stats { gap: var(--sp-2); }
  .stat-num { font-size: var(--fs-2xl); }
}

@media (max-width: 560px) {
  .news-grid { grid-template-columns: 1fr; }
  .member-row--five { grid-template-columns: repeat(2, 1fr); }
  .biz-photo img { aspect-ratio: 16 / 9; }
  .stats { grid-template-columns: 1fr; gap: var(--sp-4); }
  .footer-grid { flex-direction: column; gap: var(--sp-4); }
  .info-table th { width: 36%; }
}