/* =========================================================
   KNOWAVE合同会社 — Corporate / Service Site
   思想：静かな強さ × Flow × 余白 × 知性
   カラー：WHITE #FFFFFF / NAVY #0F2747 / GOLD #C9A227 のみ
   フォント：メイリオ（Bold / Regular のみ）
   方針：大きなタイポグラフィと余白で情報を整理する。
         カード・アイコン・グラデーション・多色・派手な演出は使わない。
========================================================= */

:root {
  --white: #FFFFFF;
  --navy: #0F2747;
  --gold: #C9A227;
  --font: "Meiryo", "メイリオ", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --line: rgba(15,39,71,0.15);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--navy);
  background: var(--white);
  line-height: 2;
  letter-spacing: 0.02em;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 700; }
ul, ol, dl { list-style: none; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 860px; margin: 0 auto; padding: 0 32px; }
.container-wide { max-width: 1360px; margin: 0 auto; padding: 0 32px; }

section { position: relative; overflow: hidden; }

.pad-xl { padding: 220px 0; }
.pad-l { padding: 180px 0; }
.pad-m { padding: 140px 0; }

@media (max-width: 900px) {
  .pad-xl { padding: 130px 0; }
  .pad-l { padding: 110px 0; }
  .pad-m { padding: 90px 0; }
}

/* ---------- Typography ---------- */
.eyebrow {
  display: block;
  font-size: 13px;
  letter-spacing: 0.36em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 36px;
  text-transform: uppercase;
}
.gold { color: var(--gold); }

.headline {
  font-weight: 700;
  line-height: 1.6;
  color: var(--navy);
  font-size: clamp(32px, 4.6vw, 60px);
}
.headline-xl {
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy);
  font-size: clamp(42px, 6.8vw, 96px);
}
.lead {
  font-weight: 400;
  font-size: clamp(16px, 1.7vw, 20px);
  color: var(--navy);
  line-height: 2.2;
  max-width: 640px;
}
.copy-line {
  font-weight: 700;
  font-size: clamp(21px, 2.6vw, 32px);
  line-height: 2;
  color: var(--navy);
}
.body-text { font-size: 16.5px; line-height: 2.2; color: var(--navy); font-weight: 400; }
.small-text { font-size: 13.5px; color: var(--navy); opacity: 0.65; font-weight: 400; }

.align-right { text-align: right; }
.align-center { text-align: center; }

hr.rule { border: none; border-top: 1px solid var(--line); margin: 0; }
hr.rule-gold { border: none; border-top: 1px solid var(--gold); width: 72px; margin: 0 0 40px; }

/* ---------- Links / Buttons (no pill, no gradient) ---------- */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.06em;
  color: var(--navy);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--navy);
  transition: border-color 0.35s ease, color 0.35s ease, gap 0.35s ease;
}
.link-action:hover { color: var(--gold); border-color: var(--gold); gap: 24px; }
.link-action .bar { display: inline-block; width: 34px; height: 1px; background: currentColor; }

.btn-solid {
  display: inline-block;
  padding: 20px 52px;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.08em;
  border: 1px solid var(--navy);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease;
}
.btn-solid:hover { background: var(--white); color: var(--navy); }

/* =========================================================
   SCROLL FLOW（画面左端：スクロール＝Flowの可視化）
========================================================= */
#scroll-flow-track {
  position: fixed;
  top: 0; left: 0;
  width: 2px;
  height: 100vh;
  background: rgba(15,39,71,0.08);
  z-index: 1200;
}
#scroll-flow-fill {
  width: 100%;
  height: 0%;
  background: var(--gold);
  transition: height 0.05s linear;
}

/* =========================================================
   SCROLLインジケーター（画面右下固定・全ページ共通）
   ・スクロールしても常に画面右下に追従
   ・ページ最下部（これ以上スクロールできない）に達すると自動で消える
========================================================= */
.scroll-indicator {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 1100;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--navy);
  opacity: 0.45;
  writing-mode: vertical-rl;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.scroll-indicator::after {
  content: '';
  display: block;
  width: 1px;
  height: 34px;
  margin: 10px auto 0;
  background: var(--navy);
  opacity: 0.4;
  animation: scrollIndicatorLine 1.8s ease-in-out infinite;
}
@keyframes scrollIndicatorLine {
  0%   { transform: scaleY(0.3); transform-origin: top; opacity: 0.15; }
  50%  { transform: scaleY(1);   transform-origin: top; opacity: 0.5; }
  100% { transform: scaleY(0.3); transform-origin: top; opacity: 0.15; }
}
.scroll-indicator.is-hidden { opacity: 0; }

@media (max-width: 768px) {
  .scroll-indicator { right: 16px; bottom: 18px; font-size: 10px; }
  .scroll-indicator::after { height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-indicator::after { animation: none; }
}

/* =========================================================
   HEADER
========================================================= */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.94);
  border-bottom: 1px solid transparent;
  padding: 26px 0;
  transition: padding 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
#site-header.scrolled {
  padding: 16px 0;
  border-color: var(--line);
  box-shadow: 0 2px 20px rgba(15,39,71,0.05);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; }
.logo img { height: 34px; width: auto; }
@media (max-width: 768px) { .logo img { height: 26px; } }

nav#main-nav { display: flex; align-items: center; gap: 46px; }
nav#main-nav a {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.04em;
  position: relative;
  padding-bottom: 4px;
}
nav#main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}
nav#main-nav a:hover::after { width: 100%; }

.nav-cta { display: flex; align-items: center; gap: 30px; }
.nav-cta .header-contact {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  border-bottom: 1px solid var(--navy);
  padding-bottom: 4px;
}
.nav-cta .header-contact:hover { color: var(--gold); border-color: var(--gold); }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 1301;
}
.hamburger span { width: 26px; height: 1px; background: var(--navy); display: block; transition: 0.3s; }

#mobile-nav {
  position: fixed;
  top: 0; right: -100%;
  width: 100%;
  height: 100vh;
  background: var(--white);
  z-index: 1300;
  transition: right 0.4s ease;
  padding: 130px 44px 44px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
#mobile-nav.open { right: 0; }
#mobile-nav a { color: var(--navy); font-size: 21px; font-weight: 700; }
#mobile-nav .header-contact { color: var(--gold); }

/* =========================================================
   FLOW GRAPHIC (共通・意味ごとに形状を変える)
========================================================= */
.flow-wrap { position: relative; width: 100%; line-height: 0; overflow: hidden; }
.flow-wrap svg { width: 100%; height: auto; display: block; }
.flow-wrap.flow-right { margin-left: auto; }
.flow-caption { margin-top: 10px; }

/* =========================================================
   TOP PAGE / SECTION 01 : HERO
   思想：静かな強さ × Flow × 余白。一人ひとりの個性を保ったまま、同じ方向へ。
========================================================= */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--white);
  padding-top: 150px;
  padding-bottom: 120px;
  overflow: visible;
  z-index: 1;
}
.hero-inner {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 620px) 1fr;
  align-items: center;
  column-gap: 40px;
  min-height: 62vh;
}

/* ---- 左：メインコピー ---- */
.hero-copy { position: relative; z-index: 3; }

.hero-title {
  font-weight: 700;
  color: var(--navy);
}
.hero-title .hero-line1 {
  display: block;
  font-size: clamp(44px, 5.6vw, 72px);
  line-height: 1.25;
}
.hero-title .hero-line2 {
  display: block;
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.2;
  margin-top: 4px;
  white-space: nowrap;
}
.hero-title .gold { color: var(--gold); }

.hero-bottom { margin-top: 64px; }

.hero-service {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(30px, 2.6vw, 40px);
  margin-bottom: 34px;
  letter-spacing: 0.01em;
}
.hero-service sup { font-size: 0.4em; color: var(--gold); margin-left: 2px; }

.hero-sub {
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 25px);
  line-height: 1.9;
  color: var(--navy);
  max-width: 480px;
  margin-bottom: 46px;
}

.hero-cta-row { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }

.hero-cta-primary {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--navy);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold);
  transition: color 0.35s ease, border-color 0.35s ease, padding 0.35s ease;
}
.hero-cta-primary:hover { color: var(--gold); }
.hero-cta-primary:focus-visible,
.hero-cta-row .link-action:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* ---- 右：Flow ---- */
.hero-flow {
  position: absolute;
  top: -60px;
  right: -4%;
  bottom: -160px;
  width: 56%;
  z-index: 2;
  pointer-events: none;
  transform-origin: 82% 100%;
  transition: transform 1.4s cubic-bezier(.4,0,.2,1);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
}
.hero-flow svg { width: 100%; height: 100%; display: block; }
.hero-flow.flow-converge { transform: scaleX(0.5) translateX(10%); }
.flow-path {
  fill: none;
  stroke: var(--gold);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation:
    heroFlowDraw 2.6s cubic-bezier(.4,0,.2,1) forwards,
    heroFlowWobble 7s ease-in-out infinite;
  animation-delay: 0.15s, 3s;
}
.flow-path:nth-child(1) { animation-duration: 2.8s, 6.5s; animation-delay: .05s, 3s; }
.flow-path:nth-child(2) { animation-duration: 3.1s, 7.2s; animation-delay: .18s, 3.3s; }
.flow-path:nth-child(3) { animation-duration: 2.6s, 6.8s; animation-delay: .3s,  3.1s; }
.flow-path:nth-child(4) { animation-duration: 3.3s, 7.6s; animation-delay: .12s, 3.5s; }
.flow-path:nth-child(5) { animation-duration: 2.9s, 6.9s; animation-delay: .38s, 3.2s; }
.flow-path:nth-child(6) { animation-duration: 3.4s, 7.4s; animation-delay: .22s, 3.6s; }
.flow-path:nth-child(7) { animation-duration: 2.7s, 7.0s; animation-delay: .42s, 3.4s; }

@keyframes heroFlowDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes heroFlowWobble {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2px, -3px); }
}


/* ---- コピーの段階表示（ページ読込み時・スクロール不問） ---- */
.hero-anim {
  opacity: 0;
  transform: translateY(18px);
  animation: heroFadeUp 0.7s ease forwards;
}
@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-flow { position: absolute; top: 6%; right: -12%; bottom: auto; width: 78%; height: 70%; opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-path { animation: heroFlowDrawStatic 0.01s forwards; }
  .hero-anim { animation-duration: 0.01s; }
}
@keyframes heroFlowDrawStatic { to { stroke-dashoffset: 0; } }

@media (max-width: 768px) {
  #hero { padding-top: 130px; padding-bottom: 150px; overflow: hidden; }
  .hero-inner { display: block; min-height: auto; }
  .hero-title .hero-line1 { font-size: clamp(30px, 10vw, 42px); }
  .hero-title .hero-line2 { font-size: clamp(26px, 9.6vw, 42px); white-space: nowrap; }
  .hero-bottom { margin-top: 40px; }
  .hero-service { font-size: clamp(26px, 7vw, 32px); margin-bottom: 24px; }
  .hero-sub { font-size: clamp(16px, 4.6vw, 20px); margin-bottom: 34px; }
  .hero-cta-row { gap: 22px; flex-direction: column; align-items: flex-start; }
  .hero-flow {
    position: relative;
    inset: auto;
    width: 92%;
    margin: 46px 0 10px auto;
    height: 200px;
  }
  .hero-flow svg .flow-path:nth-child(n+6) { display: none; }
}

/* =========================================================
   TOP PAGE / SECTION 02 : PROBLEM
   思想：理想（HERO）から一転、経営者が日々感じている「組織の現実」を静かに問いかける。
         経営者を責めない。社員を責めない。まだ解決策は見せない。
========================================================= */
.section-problem {
  position: relative;
  min-height: 100vh;
  background: var(--white);
  padding: 190px 0 150px;
  overflow: visible;
  z-index: 1;
}

/* ---- Flow：HEROから続く収束＋ボトルネック ---- */
.problem-flow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  --converge: 0;
}
.problem-flow svg { width: 100%; height: 100%; display: block; }
.problem-flow .flow-in,
.problem-flow .flow-out {
  fill: none;
  stroke: var(--gold);
  stroke-linecap: round;
}
.problem-flow .flow-in {
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: calc(0.35 + var(--converge) * 0.4);
  transition: stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1), opacity 0.6s ease;
}
.section-problem.in-view .flow-in { stroke-dashoffset: 0; }
.problem-flow .flow-in-1 { transition-delay: 0s; }
.problem-flow .flow-in-2 { transition-delay: .08s; }
.problem-flow .flow-in-3 { transition-delay: .16s; }
.problem-flow .flow-in-4 { transition-delay: .24s; }
.problem-flow .flow-in-5 { transition-delay: .32s; }
.problem-flow .flow-in-6 { transition-delay: .4s; }
.problem-flow .flow-in-7 { transition-delay: .48s; }
.problem-flow .flow-out {
  stroke-width: 1;
  opacity: calc(0.55 - var(--converge) * 0.35);
  transition: opacity 0.4s ease;
}
/* 収束が強まるほど、右側へ抜ける本数・太さが絞られる（ボトルネック表現） */
.problem-flow .flow-out-1 { stroke-width: calc(1.6 - var(--converge) * 0.6); }
.problem-flow .flow-out-2 { stroke-width: calc(1.2 - var(--converge) * 0.5); opacity: calc(0.4 - var(--converge) * 0.3); }
.problem-flow .flow-out-3 { stroke-width: calc(0.9 - var(--converge) * 0.5); opacity: calc(0.3 - var(--converge) * 0.28); }

.problem-inner {
  position: relative;
  z-index: 2;
}

/* ---- メインコピー ---- */
.problem-title {
  font-weight: 700;
  color: var(--navy);
  max-width: 900px;
}
.problem-title span { display: block; }
.problem-title .pt-l1 {
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.5;
}
.problem-title .pt-l2 {
  font-size: clamp(40px, 5.2vw, 74px);
  line-height: 1.35;
  margin-top: 14px;
}
.problem-title .pt-l3 {
  font-size: clamp(40px, 5.2vw, 74px);
  line-height: 1.35;
}
.problem-title .gold { color: var(--gold); }

/* ---- 5つの経営者の本音：カードにせず、余白の中へ静かに配置 ---- */
.voice-field {
  position: relative;
  margin-top: 110px;
  min-height: 420px;
}
.voice {
  position: relative;
  font-weight: 400;
  font-size: clamp(22px, 1.7vw, 30px);
  line-height: 1.75;
  color: var(--navy);
  max-width: 460px;
}
.voice-1 { margin-left: auto; text-align: right; max-width: 380px; }
.voice-2 { margin-left: 42%; margin-top: 52px; }
.voice-3 { margin-left: 8%; margin-top: 56px; max-width: 420px; }
.voice-4 { margin-left: auto; margin-top: 56px; text-align: right; max-width: 400px; }
.voice-5 { margin-left: 2%; margin-top: 56px; }

/* ---- 下部メッセージ：敬意の回収 ---- */
.problem-closing {
  margin-top: 130px;
  max-width: 720px;
}
.problem-closing .closing-respect {
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 2;
  color: var(--navy);
  opacity: 0.75;
  margin-bottom: 30px;
}
.problem-closing .closing-next {
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.7;
  color: var(--navy);
}
.problem-closing .gold { color: var(--gold); }

@media (max-width: 1080px) {
  .voice-field { min-height: 0; }
  .voice-1, .voice-2, .voice-3, .voice-4, .voice-5 { max-width: 90%; }
}

@media (max-width: 768px) {
  .section-problem { padding: 130px 0 110px; min-height: auto; }
  .problem-title .pt-l1 { font-size: clamp(28px, 8vw, 38px); }
  .problem-title .pt-l2,
  .problem-title .pt-l3 { font-size: clamp(34px, 10.5vw, 54px); margin-top: 8px; }

  .voice-field { margin-top: 64px; }
  .voice {
    font-size: clamp(18px, 5vw, 22px);
    max-width: 100%;
    margin: 0 0 44px !important;
    text-align: left !important;
  }
  .voice:last-child { margin-bottom: 0 !important; }

  .problem-closing { margin-top: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .problem-flow { --converge: 0.6; }
  .problem-flow .flow-out { transition: none; }
}

/* =========================================================
   TOP PAGE / SECTION 03 : REAL ISSUE / IDEAL TEAM
   思想：「人がいない」のではなく「チームになっていない」という再定義から、
         勝てるチームの5つの状態を経て、社長がいなくても前に進める組織像へ。
========================================================= */
.section-rit {
  position: relative;
  background: var(--white);
  z-index: 1;
  min-height: 260vh;
  overflow: visible; /* sticky子要素を機能させるため（section既定のoverflow:hiddenを解除） */
}

.rit-flow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.rit-flow svg { width: 100%; height: 100%; display: block; }
.rit-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.55;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1), opacity 0.8s ease, stroke-width 0.8s ease;
}
.section-rit.in-view .rit-path { stroke-dashoffset: 0; }
.rit-path.rp-1 { transition-delay: 0s; }
.rit-path.rp-2 { transition-delay: .06s; }
.rit-path.rp-3 { transition-delay: .12s; }
.rit-path.rp-4 { transition-delay: .18s; }
.rit-path.rp-5 { transition-delay: .24s; }
.rit-path.rp-6 { transition-delay: .3s; }
.rit-path.rp-7 { transition-delay: .36s; }

/* JSが --rit-progress（0〜1）を section-rit にセットし、
   各フェーズで transform / opacity をなめらかに変化させる */
.rit-path {
  transform-box: fill-box;
  transform-origin: center;
}

.rit-scene {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 90px 0;
}
.rit-scene-elements { min-height: 100vh; align-items: stretch; }
.rit-scene-final { min-height: 70vh; }

/* ---- SCENE 1：問題の再定義 ---- */
.rit-redefine {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(30px, 4.6vw, 62px);
  line-height: 1.5;
}
.rit-redefine .gold { font-size: clamp(38px, 6.2vw, 86px); }
.rit-support {
  margin-top: 56px;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.9;
  color: var(--navy);
  opacity: 0.8;
}

/* ---- SCENE 2：5つの要素 ---- */
.rit-elements-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 60px;
  width: 100%;
  align-items: start;
}
.rit-sticky-col { position: sticky; top: 40vh; align-self: start; }
.rit-sticky-label {
  font-weight: 700;
  font-size: clamp(20px, 2vw, 27px);
  color: var(--navy);
  line-height: 1.7;
  max-width: 300px;
}
.rit-elements-col { display: flex; flex-direction: column; gap: 90px; padding: 10vh 0; }
.rit-element h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; }
.rit-element .rit-en {
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--navy);
  letter-spacing: 0.02em;
}
.rit-element .rit-sep { color: var(--line); font-weight: 400; }
.rit-element .rit-ja {
  font-weight: 700;
  font-size: clamp(28px, 3vw, 38px);
}

/* ---- SCENE 2（簡略版）：目的。役割。対話。挑戦。育成。 ---- */
.rit-elements-grid-simple {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}
.rit-elements-col-simple {
  gap: 56px;
  padding: 6vh 0 8vh;
  align-items: center;
}
.rit-elements-col-simple .rit-element h3 { justify-content: center; }
.rit-elements-col-simple .rit-ja {
  font-size: clamp(34px, 5vw, 56px);
}
.rit-elements-summary {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.8;
  margin-top: 30px;
}
.rit-philosophy-link { margin-top: 40px; font-size: 14px; }

/* ---- SCENE 3：勝てるチームとは ---- */
.rit-ideal-title {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(34px, 4.8vw, 66px);
  margin-bottom: 70px;
}
.rit-states { display: flex; flex-direction: column; gap: 34px; }
.rit-state {
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 34px);
  color: var(--navy);
  line-height: 1.7;
}

/* ---- SCENE 4：最終メッセージ ---- */
.rit-final {
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 56px);
  color: var(--navy);
  line-height: 1.6;
  text-align: center;
  margin: 0 auto;
}

@media (max-width: 1080px) {
  .rit-elements-grid { grid-template-columns: 1fr; }
  .rit-sticky-col { position: relative; top: 0; margin-bottom: 20px; }
  .rit-elements-col { padding: 0; gap: 60px; }
}

@media (max-width: 768px) {
  .section-rit { min-height: auto; }
  .rit-scene { min-height: auto; padding: 90px 0; }
  .rit-scene-elements { min-height: auto; }
  .rit-redefine { font-size: clamp(28px, 8vw, 40px); }
  .rit-redefine .gold { font-size: clamp(32px, 10vw, 48px); }
  .rit-support { margin-top: 40px; font-size: clamp(16px, 4.6vw, 20px); }
  .rit-element .rit-en { font-size: clamp(18px, 5vw, 22px); }
  .rit-element .rit-ja { font-size: clamp(24px, 6.4vw, 30px); }
  .rit-elements-col { gap: 56px; }
  .rit-elements-col-simple .rit-ja { font-size: clamp(30px, 9vw, 40px); }
  .rit-elements-col-simple { gap: 40px; padding: 4vh 0 6vh; }
  .rit-elements-summary { font-size: clamp(18px, 4.6vw, 22px); margin-top: 20px; }
  .rit-ideal-title { font-size: clamp(30px, 8vw, 42px); margin-bottom: 46px; }
  .rit-state { font-size: clamp(20px, 5.4vw, 26px); }
  .rit-final { font-size: clamp(26px, 8vw, 38px); }
}

@media (prefers-reduced-motion: reduce) {
  .rit-path { transition: none; stroke-dashoffset: 0; }
}

/* =========================================================
   TOP PAGE / SECTION 04〜07 : BRIDGE LINKS
   （SERVICE導線 / ABOUT・KNOWAVE導線 / PHILOSOPHY導線 / MESSAGE・PROFILE導線）
   思想：TOPはすべてを説明する場所ではなく「入口」。
         各セクションは短く、詳細は各独立ページへ委ねる。
         黒い太線・カード・アイコンは使わず、細いGOLD Flowと大きな余白のみで構成する。
========================================================= */
.top-bridge {
  position: relative;
  background: var(--white);
  overflow: hidden;
  padding: 190px 0;
}
.top-bridge-inner { position: relative; z-index: 1; }

.top-bridge-flow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.top-bridge-flow svg { width: 100%; height: 100%; display: block; }
.top-bridge-path {
  fill: none;
  stroke: var(--gold);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1), opacity 1.8s ease;
}
.top-bridge.in-view .top-bridge-path { stroke-dashoffset: 0; }

.top-bridge-eyebrow {
  display: block;
  font-size: 13px;
  letter-spacing: 0.34em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 30px;
  text-transform: uppercase;
}
.top-bridge-headline {
  font-weight: 700;
  color: var(--navy);
  line-height: 1.5;
  font-size: clamp(34px, 4.6vw, 60px);
  margin-bottom: 34px;
}
.top-bridge-headline .gold { color: var(--gold); }
.top-bridge-sub {
  font-weight: 400;
  color: var(--navy);
  line-height: 2;
  font-size: clamp(16px, 1.6vw, 19px);
  max-width: 620px;
  margin-bottom: 20px;
}
.top-bridge-sub:last-of-type { margin-bottom: 48px; }

/* ---- 04 / SERVICE 導線 ---- */
.top-svc { text-align: left; }
.top-svc-recap {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.8;
  opacity: 0.55;
  margin-bottom: 26px;
}
.top-svc-name {
  font-weight: 700;
  color: var(--gold);
  font-size: clamp(15px, 1.3vw, 17px);
  letter-spacing: 0.1em;
  margin-bottom: 22px;
}
.top-svc-define {
  font-weight: 700;
  color: var(--navy);
  line-height: 2;
  font-size: clamp(18px, 1.8vw, 22px);
  max-width: 680px;
  margin-top: 8px;
  margin-bottom: 48px;
}

/* ---- 05 / KNOWAVE（ABOUT）導線 ---- */
.top-about { text-align: center; }
.top-about .top-bridge-headline,
.top-about .top-bridge-sub { margin-left: auto; margin-right: auto; }

/* ---- 06 / PHILOSOPHY 導線 ---- */
.top-phl { text-align: center; background: var(--navy); }
.top-phl .top-bridge-eyebrow { color: var(--gold); }
.top-phl .top-bridge-headline { color: var(--white); font-size: clamp(40px, 6vw, 80px); margin-bottom: 22px; }
.top-phl-promise {
  font-weight: 400;
  color: var(--white);
  opacity: 0.72;
  font-size: clamp(17px, 1.6vw, 21px);
  margin-bottom: 52px;
}
.top-phl .link-action { color: var(--white); border-color: var(--white); }
.top-phl .link-action:hover { color: var(--gold); border-color: var(--gold); }
.top-phl-path { stroke: var(--gold); }

/* ---- 07 / MESSAGE・PROFILE 導線 ---- */
.top-msg { text-align: left; }
.top-msg-rep {
  margin-top: 8px;
  margin-bottom: 44px;
}
.top-msg-rep-name {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(22px, 2vw, 27px);
  margin-bottom: 8px;
}
.top-msg-rep-role {
  font-weight: 400;
  color: var(--navy);
  opacity: 0.65;
  font-size: 15px;
  line-height: 1.9;
}
.top-msg-links {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
}
.top-msg-profile-link {
  font-size: 13.5px;
  font-weight: 400;
  opacity: 0.7;
}
.top-msg-profile-link:hover { opacity: 1; }

@media (max-width: 900px) {
  .top-bridge-br { display: none; }
  .top-bridge { padding: 120px 0; }
  .top-bridge-headline { font-size: clamp(28px, 8vw, 40px); margin-bottom: 24px; }
  .top-svc-recap { font-size: clamp(20px, 6vw, 25px); }
  .top-svc-define { font-size: clamp(17px, 4.6vw, 19px); margin-bottom: 36px; }
  .top-phl .top-bridge-headline { font-size: clamp(34px, 11vw, 52px); }
  .top-phl-promise { font-size: clamp(15px, 4.4vw, 18px); margin-bottom: 40px; }
  .top-msg-links { gap: 22px; flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .top-bridge-path { transition: none; stroke-dashoffset: 0; }
}

/* =========================================================
   TOP PAGE / SECTION 04 : SERVICE — 社外キャプテン™（初登場）
   思想：SEC03終盤の「自律して進むFlow」を継続。社外キャプテン™を象徴する1本が
         他のFlowの「間」をゆるやかに通り、最終的には全Flowが同じ存在感で自走する。
========================================================= */
.section-service {
  position: relative;
  background: var(--white);
  z-index: 1;
  min-height: 190vh;
  overflow: visible; /* sticky子要素を機能させるため（section既定のoverflow:hiddenを解除） */
}

.svc-flow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.svc-flow svg { width: 100%; height: 100%; display: block; }
.svc-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1), opacity 1s ease, stroke-width 1s ease;
}
.section-service.in-view .svc-path { stroke-dashoffset: 0; }
.svc-path.sp-1 { transition-delay: 0s; }
.svc-path.sp-2 { transition-delay: .06s; }
.svc-path.sp-3 { transition-delay: .12s; }
.svc-path.sp-captain { transition-delay: .18s; }
.svc-path.sp-4 { transition-delay: .24s; }
.svc-path.sp-5 { transition-delay: .3s; }
/* 社外キャプテン™を象徴する線：前半はわずかに存在感、後半は他と同化 */
.svc-path.sp-captain { stroke-width: 1.15; opacity: 0.7; }

.svc-scene { position: relative; z-index: 2; }
.svc-scene-name {
  min-height: 90vh;
  display: flex;
  align-items: center;
}
.svc-inner { width: 100%; }
.svc-name-col { max-width: 760px; }
.svc-name {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(46px, 6.4vw, 84px);
  line-height: 1.3;
}
.svc-name sup { font-size: 0.36em; color: var(--gold); margin-left: 4px; }
.svc-name-sub {
  margin-top: 30px;
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 19px);
  color: var(--navy);
  opacity: 0.6;
}

.svc-scene-def { min-height: 130vh; padding: 60px 0 140px; }
.svc-def-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 70px;
  align-items: start;
}
.svc-sticky-col { position: sticky; top: 38vh; align-self: start; }
.svc-sticky-name {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(38px, 4.2vw, 60px);
  line-height: 1.3;
}
.svc-sticky-name sup { font-size: 0.36em; color: var(--gold); }

.svc-copy-col { padding-top: 6vh; }
/* SEO用H2：視覚上は非表示にせず、正式定義の直前に自然に置く（意味的には見出しとして機能） */
.svc-h2 {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.svc-def {
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.85;
  color: var(--navy);
  max-width: 640px;
  margin-bottom: 56px;
}
.svc-def .gold { color: var(--gold); }

.svc-bansou {
  font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
  color: var(--navy);
  margin-bottom: 22vh;
}

.svc-line {
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  color: var(--navy);
  line-height: 1.7;
  margin-bottom: 14vh;
  max-width: 560px;
}
.svc-line-2 { margin-bottom: 22vh; }

.svc-final {
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.6;
  margin-bottom: 12vh;
}
.svc-final .navy-part { color: var(--navy); }

.svc-cta { margin-top: 20px; }
.svc-cta-link { font-size: 14.5px; }

@media (max-width: 1080px) {
  .svc-def-grid { grid-template-columns: 1fr; gap: 40px; }
  .svc-sticky-col { position: relative; top: 0; }
}

@media (max-width: 768px) {
  .section-service { min-height: auto; }
  .svc-scene-name { min-height: 60vh; }
  .svc-scene-def { min-height: auto; padding: 40px 0 100px; }
  .svc-name { font-size: clamp(42px, 12vw, 54px); }
  .svc-sticky-name { font-size: clamp(42px, 12vw, 54px); }
  .svc-def { font-size: clamp(24px, 6.4vw, 30px); margin-bottom: 40px; }
  .svc-bansou { font-size: clamp(26px, 7vw, 32px); margin-bottom: 60px; }
  .svc-line { font-size: clamp(24px, 6.4vw, 32px); margin-bottom: 46px; }
  .svc-line-2 { margin-bottom: 60px; }
  .svc-final { font-size: clamp(38px, 10.5vw, 48px); margin-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-path { transition: none; stroke-dashoffset: 0; }
}

/* =========================================================
   TOP PAGE / SECTION 05 : WHY CAPTAIN
   思想：キャプテンは一人で勝たない。目的を共有し、役割をつなぎ、対話を生み、
         必要な時だけ前に出て、また任せる。最終的に全Flowが同じ存在感で自走する。
========================================================= */
.section-wc {
  position: relative;
  background: var(--white);
  z-index: 1;
  min-height: 220vh;
  overflow: visible; /* sticky子要素を機能させるため（section既定のoverflow:hiddenを解除） */
}

.wc-flow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.wc-flow svg { width: 100%; height: 100%; display: block; }
.wc-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.55;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1), opacity 0.8s ease, stroke-width 0.8s ease;
}
.section-wc.in-view .wc-path { stroke-dashoffset: 0; }
.wc-path.wp-1 { transition-delay: 0s; }
.wc-path.wp-2 { transition-delay: .06s; }
.wc-path.wp-3 { transition-delay: .12s; }
.wc-path.wp-4 { transition-delay: .18s; }
.wc-path.wp-5 { transition-delay: .24s; }
.wc-path.wp-6 { transition-delay: .3s; }
.wc-path {
  transform-box: fill-box;
  transform-origin: center;
}

.wc-scene { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: center; padding: 90px 0; }
.wc-scene-intro { min-height: 60vh; }
.wc-scene-actions { min-height: 140vh; align-items: stretch; }
.wc-scene-final { min-height: 70vh; }
.wc-scene-close { min-height: 50vh; }

/* SEO用の非表示本文（視覚上は表示しないが、意味的な説明としてDOM上に存在） */
.wc-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- SCENE 1：冒頭（小さめ） ---- */
.wc-intro {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.7;
}

/* ---- SCENE 2：最重要コピー ---- */
.wc-main { line-height: 1.35; }
.wc-main-l1 {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(40px, 5vw, 60px);
}
.wc-main-l2 {
  font-weight: 700;
  font-size: clamp(52px, 7.4vw, 86px);
}
.wc-main-l2 .navy-part { color: var(--navy); }
.wc-main-l2 .gold { color: var(--gold); }

/* ---- SCENE 3：5つの行動（Sticky構成） ---- */
.wc-actions-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 60px;
  width: 100%;
  align-items: start;
}
.wc-sticky-col { position: sticky; top: 34vh; align-self: start; }
.wc-sticky-copy { line-height: 1.35; }
.wc-sticky-copy .wc-main-l1 { font-size: clamp(32px, 3.4vw, 44px); }
.wc-sticky-copy .wc-main-l2 { font-size: clamp(40px, 5vw, 58px); }
.wc-actions-col { display: flex; flex-direction: column; gap: 110px; padding: 14vh 0; }
.wc-action {
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 36px);
  color: var(--navy);
  line-height: 1.7;
}
.wc-action .gold { color: var(--gold); }

/* ---- SCENE 4：最終コピー ---- */
.wc-final {
  font-weight: 700;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.6;
  text-align: center;
  margin: 0 auto;
}
.wc-final .navy-part { color: var(--navy); }
.wc-final .gold { color: var(--gold); }

/* ---- SCENE 5：締め（サービス名回収） ---- */
.wc-close {
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  color: var(--navy);
  text-align: center;
}
.wc-close .navy-part { font-weight: 700; }

@media (max-width: 1080px) {
  .wc-actions-grid { grid-template-columns: 1fr; }
  .wc-sticky-col { position: relative; top: 0; margin-bottom: 20px; }
  .wc-actions-col { padding: 0; gap: 70px; }
}

@media (max-width: 768px) {
  .section-wc { min-height: auto; }
  .wc-scene { min-height: auto; padding: 80px 0; }
  .wc-scene-intro { min-height: auto; }
  .wc-scene-actions { min-height: auto; }
  /* モバイルではSCENE2で既に表示済みのため、Sticky用の重複コピーは非表示 */
  .wc-sticky-col { display: none; }
  .wc-intro { font-size: clamp(22px, 6.4vw, 26px); }
  .wc-main-l1 { font-size: clamp(30px, 8vw, 38px); }
  .wc-main-l2 { font-size: clamp(38px, 12vw, 50px); }
  .wc-sticky-copy .wc-main-l1 { font-size: clamp(30px, 8vw, 38px); }
  .wc-sticky-copy .wc-main-l2 { font-size: clamp(38px, 12vw, 50px); }
  .wc-actions-col { gap: 56px; }
  .wc-action { font-size: clamp(22px, 6vw, 26px); }
  .wc-final { font-size: clamp(28px, 8.8vw, 38px); }
  .wc-close { font-size: clamp(24px, 7vw, 30px); }
}

@media (prefers-reduced-motion: reduce) {
  .wc-path { transition: none; stroke-dashoffset: 0; }
}

/* =========================================================
   TOP PAGE / SECTION 06 : TEAM DESIGN
   思想：チームは自然にはできない。Purpose・Role・Dialogue・Growth・Managementという
         5つの基本機能が相互につながり、日常の中で機能して初めてチームが動き出す。
         5STEPの一本道ではなく、循環し合う構造として表現する。
========================================================= */
.section-td {
  position: relative;
  background: var(--white);
  z-index: 1;
  min-height: 220vh;
  overflow: visible; /* sticky子要素を機能させるため（section既定のoverflow:hiddenを解除） */
}

.td-flow { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.td-flow svg { width: 100%; height: 100%; display: block; }
.td-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.55;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1), opacity 0.8s ease, stroke-width 0.8s ease;
}
.section-td.in-view .td-path { stroke-dashoffset: 0; }
.td-path.tp-1 { transition-delay: 0s; }
.td-path.tp-2 { transition-delay: .06s; }
.td-path.tp-3 { transition-delay: .12s; }
.td-path.tp-4 { transition-delay: .18s; }
.td-path.tp-5 { transition-delay: .24s; }
.td-path.tp-6 { transition-delay: .3s; }
.td-path { transform-box: fill-box; transform-origin: center; }

.td-scene { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: center; padding: 90px 0; }
.td-scene-intro { min-height: 60vh; }
.td-scene-elements { min-height: 150vh; align-items: stretch; }
.td-scene-final { min-height: 60vh; }

/* ---- SCENE 1：最重要コピー ---- */
.td-intro {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(40px, 6vw, 74px);
  line-height: 1.5;
}
/* SEO用の非表示本文（視覚上は表示しないが、意味的な説明としてDOM上に存在） */
.td-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- SCENE 2：5つの基本機能（Sticky構成） ---- */
.td-elements-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 60px;
  width: 100%;
  align-items: start;
}
.td-sticky-col { position: sticky; top: 36vh; align-self: start; }
.td-sticky-copy {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.5;
}
.td-elements-col { display: flex; flex-direction: column; gap: 130px; padding: 16vh 0; }
.td-element h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; }
.td-element .td-en {
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--gold);
  letter-spacing: 0.03em;
}
.td-element .td-sep { color: var(--line); font-weight: 400; }
.td-element .td-ja {
  font-weight: 700;
  font-size: clamp(30px, 3.2vw, 40px);
  color: var(--navy);
}

/* ---- SCENE 3：最終コピー ---- */
.td-final {
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 50px);
  color: var(--navy);
  line-height: 1.7;
  text-align: center;
  margin: 0 auto;
}
.td-final .gold { color: var(--gold); }

@media (max-width: 1080px) {
  .td-elements-grid { grid-template-columns: 1fr; }
  .td-sticky-col { position: relative; top: 0; margin-bottom: 20px; }
  .td-elements-col { padding: 0; gap: 80px; }
}

@media (max-width: 768px) {
  .section-td { min-height: auto; }
  .td-scene { min-height: auto; padding: 80px 0; }
  .td-scene-intro { min-height: auto; }
  .td-scene-elements { min-height: auto; }
  /* モバイルでは各要素が順に表示されるため、Sticky用の重複コピーは非表示 */
  .td-sticky-col { display: none; }
  .td-intro { font-size: clamp(42px, 12vw, 54px); }
  .td-elements-col { gap: 56px; }
  .td-element .td-en { font-size: clamp(18px, 5vw, 22px); }
  .td-element .td-ja { font-size: clamp(26px, 7.4vw, 32px); }
  .td-final { font-size: clamp(30px, 9vw, 40px); }
}

@media (prefers-reduced-motion: reduce) {
  .td-path { transition: none; stroke-dashoffset: 0; }
}

/* =========================================================
   TOP PAGE / SECTION 07 : SUPPORT
   思想：必要なのは制度を増やすことではない。会社ごとの課題に合わせて、
         必要な「仕組み」と「関わり」を組み合わせる。すべては勝てるチームをつくるための手段。
========================================================= */
.section-sup {
  position: relative;
  background: var(--white);
  z-index: 1;
  min-height: 260vh;
  overflow: visible; /* sticky子要素を機能させるため（section既定のoverflow:hiddenを解除） */
}

.sup-flow { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sup-flow svg { width: 100%; height: 100%; display: block; }
.sup-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.55;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1), opacity 0.8s ease, stroke-width 0.8s ease;
}
.section-sup.in-view .sup-path { stroke-dashoffset: 0; }
.sup-path.sup-main-1 { transition-delay: 0s; }
.sup-path.sup-main-2 { transition-delay: .08s; }
.sup-path.sup-main-3 { transition-delay: .16s; }
.sup-path.sup-branch { stroke-width: 0.6; opacity: 0; transition: stroke-dashoffset 1.6s ease, opacity 1s ease; }
.sup-path { transform-box: fill-box; transform-origin: center; }

.sup-scene { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: center; padding: 90px 0; }
.sup-scene-intro { min-height: 60vh; }
.sup-scene-together { min-height: 60vh; }
.sup-scene-areas { min-height: 190vh; align-items: stretch; }
.sup-scene-combine { min-height: 60vh; }
.sup-scene-final { min-height: 55vh; }

/* ---- SCENE 1：冒頭コピー ---- */
.sup-intro {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.6;
}

/* ---- SCENE 2：組織に必要なものを、一緒に整える ---- */
.sup-together {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(36px, 4.6vw, 58px);
  line-height: 1.6;
}
.sup-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- SCENE 3：5領域と具体支援内容（Sticky構成） ---- */
.sup-areas-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 60px;
  width: 100%;
  align-items: start;
}
.sup-sticky-col { position: sticky; top: 36vh; align-self: start; }
.sup-sticky-copy {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.5;
}
.sup-areas-col { display: flex; flex-direction: column; gap: 130px; padding: 16vh 0; }
.sup-area h3 { margin-bottom: 20px; }
.sup-area .sup-en {
  font-weight: 700;
  font-size: clamp(22px, 2vw, 28px);
  color: var(--gold);
  letter-spacing: 0.03em;
}
.sup-items {
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--navy);
  line-height: 1.75;
}
.sup-highlight {
  font-weight: 700;
  font-size: 1.08em;
}

/* ---- SCENE 4：仕組みと関わり ---- */
.sup-combine {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.7;
  text-align: center;
  margin: 0 auto;
}
.sup-combine .gold { color: var(--gold); }
.sup-note {
  margin-top: 40px;
  font-weight: 400;
  font-size: 14px;
  color: var(--navy);
  opacity: 0.55;
  text-align: center;
}

/* ---- SCENE 5：最終コピー ---- */
.sup-final {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(38px, 4.6vw, 58px);
  line-height: 1.6;
  text-align: center;
  margin: 0 auto;
}
.sup-final .gold { color: var(--gold); }

@media (max-width: 1080px) {
  .sup-areas-grid { grid-template-columns: 1fr; }
  .sup-sticky-col { position: relative; top: 0; margin-bottom: 20px; }
  .sup-areas-col { padding: 0; gap: 80px; }
}

@media (max-width: 768px) {
  .section-sup { min-height: auto; }
  .sup-scene { min-height: auto; padding: 70px 0; }
  .sup-scene-intro { min-height: auto; }
  .sup-scene-together { min-height: auto; }
  .sup-scene-areas { min-height: auto; }
  .sup-scene-combine { min-height: auto; }
  .sup-scene-final { min-height: auto; }
  /* モバイルでは各領域が順に表示されるため、Sticky用の重複コピーは非表示 */
  .sup-sticky-col { display: none; }
  .sup-intro { font-size: clamp(38px, 10.2vw, 48px); }
  .sup-together { font-size: clamp(34px, 9.2vw, 44px); }
  .sup-areas-col { gap: 64px; }
  .sup-area .sup-en { font-size: clamp(18px, 5vw, 22px); }
  .sup-items { font-size: clamp(20px, 5.6vw, 26px); }
  .sup-combine { font-size: clamp(28px, 8vw, 36px); }
  .sup-final { font-size: clamp(36px, 10vw, 46px); }
}

@media (prefers-reduced-motion: reduce) {
  .sup-path { transition: none; stroke-dashoffset: 0; }
}

/* =========================================================
   TOP PAGE / SECTION 08 : HOW WE WORK
   思想：組織は、つくって終わりではない。知る→設計する→実践する→定着させる→改善する、
         という継続的な伴走のFlow。円環ではなくSpiral的に一段先へ進む。
========================================================= */
.section-how {
  position: relative;
  background: var(--white);
  z-index: 1;
  min-height: 280vh;
  overflow: visible; /* sticky子要素を機能させるため（section既定のoverflow:hiddenを解除） */
}

.how-flow { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.how-flow svg { width: 100%; height: 100%; display: block; }
.how-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.55;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1), opacity 0.8s ease, stroke-width 0.8s ease;
}
.section-how.in-view .how-path { stroke-dashoffset: 0; }
.how-path.how-main-1 { transition-delay: 0s; }
.how-path.how-main-2 { transition-delay: .08s; }
.how-path.how-main-3 { transition-delay: .16s; }
.how-path.how-voice { stroke-width: 0.6; opacity: 0; transition: stroke-dashoffset 1.6s ease, opacity 1s ease; }
.how-path { transform-box: fill-box; transform-origin: center; }

.how-scene { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: center; padding: 90px 0; }
.how-scene-intro { min-height: 55vh; }
.how-scene-phases { min-height: 220vh; align-items: stretch; }
.how-scene-final { min-height: 60vh; }

/* ---- SCENE 1：冒頭コピー ---- */
.how-intro {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.6;
}
.how-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- SCENE 2：5フェーズ（Sticky構成） ---- */
.how-phases-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 60px;
  width: 100%;
  align-items: start;
}
.how-sticky-col { position: sticky; top: 36vh; align-self: start; }
.how-sticky-copy {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.5;
}
.how-phases-col { display: flex; flex-direction: column; gap: 150px; padding: 18vh 0; }
.how-phase-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 22px; }
.how-num {
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--gold);
  letter-spacing: 0.04em;
}
.how-verb {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(42px, 4.4vw, 56px);
  line-height: 1.3;
}
.how-verb .gold { color: var(--gold); }
.how-dot { color: var(--navy); }
.how-desc {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.85;
}
/* 「実践する」「定着させる」は、他の工程よりわずかに強く見せる（01・02・05は小さくしすぎない） */
.how-phase-strong .how-verb { font-size: clamp(46px, 4.8vw, 60px); }

/* ---- SCENE 3：最終コピー ---- */
.how-final-1 {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(40px, 4.4vw, 52px);
  line-height: 1.6;
  margin-bottom: 64px;
}
.how-final-2 {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(50px, 5.6vw, 66px);
  line-height: 1.6;
}
.how-final-2 .gold { color: var(--gold); }

@media (max-width: 1080px) {
  .how-phases-grid { grid-template-columns: 1fr; }
  .how-sticky-col { position: relative; top: 0; margin-bottom: 20px; }
  .how-phases-col { padding: 0; gap: 96px; }
}

@media (max-width: 768px) {
  .section-how { min-height: auto; }
  .how-scene { min-height: auto; padding: 70px 0; }
  .how-scene-intro { min-height: auto; }
  .how-scene-phases { min-height: auto; }
  .how-scene-final { min-height: auto; }
  /* モバイルでは各フェーズが順に表示されるため、Sticky用の重複コピーは非表示 */
  .how-sticky-col { display: none; }
  .how-intro { font-size: clamp(40px, 10.8vw, 50px); }
  .how-phases-col { gap: 72px; }
  .how-num { font-size: 16px; }
  .how-verb { font-size: clamp(30px, 8.4vw, 38px); }
  .how-phase-strong .how-verb { font-size: clamp(32px, 8.8vw, 40px); }
  .how-desc { font-size: clamp(18px, 5vw, 23px); }
  .how-final-1 { font-size: clamp(36px, 9.6vw, 44px); margin-bottom: 40px; }
  .how-final-2 { font-size: clamp(36px, 9.6vw, 46px); }
}

@media (prefers-reduced-motion: reduce) {
  .how-path { transition: none; stroke-dashoffset: 0; }
}

/* =========================================================
   TOP PAGE / SECTION 09 : TRANSFORMATION
   思想：組織の「動き方」を、変えていく。制度ではなく、社長・管理職・社員それぞれの
         日常の動き方が変わり、組織全体のFlowが変わる。成果保証・数値は一切出さない。
========================================================= */
.section-tr {
  position: relative;
  background: var(--white);
  z-index: 1;
  min-height: 260vh;
  overflow: visible; /* sticky子要素を機能させるため（section既定のoverflow:hiddenを解除） */
}

.tr-flow { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tr-flow svg { width: 100%; height: 100%; display: block; }
.tr-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.55;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1), opacity 0.8s ease, stroke-width 0.8s ease;
}
.section-tr.in-view .tr-path { stroke-dashoffset: 0; }
.tr-path.tp-1 { transition-delay: 0s; }
.tr-path.tp-2 { transition-delay: .06s; }
.tr-path.tp-3 { transition-delay: .12s; }
.tr-path.tp-4 { transition-delay: .18s; }
.tr-path.tp-5 { transition-delay: .24s; }
.tr-path { transform-box: fill-box; transform-origin: center; }

.tr-scene { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: center; padding: 90px 0; }
.tr-scene-intro { min-height: 55vh; }
.tr-scene-change { min-height: 190vh; flex-direction: column; justify-content: center; }
.tr-scene-final { min-height: 55vh; }

/* ---- SCENE 1：最重要コピー ---- */
.tr-intro {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(40px, 5.2vw, 74px);
  line-height: 1.6;
}
.tr-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- SCENE 2：5つの変化 ---- */
.tr-change {
  width: 100%;
  padding: 90px 0;
  border-bottom: 1px solid var(--line);
}
.tr-change:last-child { border-bottom: none; }
.tr-before {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(28px, 2.8vw, 36px);
  line-height: 1.7;
}
.tr-arrow {
  display: block;
  color: var(--gold);
  font-size: 20px;
  line-height: 1;
  margin: 22px 0;
  opacity: 0.85;
}
.tr-after {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(36px, 3.8vw, 46px);
  line-height: 1.6;
}
.tr-after .gold { color: var(--gold); }

/* ---- SCENE 3：最終コピー ---- */
.tr-final {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(52px, 5.4vw, 68px);
  line-height: 1.7;
}
.tr-final .gold { color: var(--gold); }

@media (max-width: 768px) {
  .section-tr { min-height: auto; }
  .tr-scene { min-height: auto; padding: 70px 0; }
  .tr-scene-intro { min-height: auto; }
  .tr-scene-change { min-height: auto; }
  .tr-scene-final { min-height: auto; }
  .tr-intro { font-size: clamp(40px, 10.8vw, 50px); }
  .tr-change { padding: 56px 0; }
  .tr-before { font-size: clamp(20px, 5.6vw, 26px); }
  .tr-after { font-size: clamp(26px, 7vw, 34px); }
  .tr-final { font-size: clamp(38px, 10.2vw, 48px); }
}

@media (prefers-reduced-motion: reduce) {
  .tr-path { transition: none; stroke-dashoffset: 0; }
}

/* =========================================================
   TOP PAGE / SECTION 10 : TARGET
   思想：こんな会社に、社外キャプテン™はフィットします。30〜150名程度・現場で「人」が
         価値を生み出すBtoB中小企業。人はいる。次は、「組織」を強くする。
========================================================= */
.section-tg {
  position: relative;
  background: var(--white);
  z-index: 1;
  min-height: 250vh;
  overflow: visible; /* sticky子要素等のため（section既定のoverflow:hiddenを解除） */
}

.tg-flow { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tg-flow svg { width: 100%; height: 100%; display: block; }
.tg-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.55;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1), opacity 1.2s ease, stroke-width 0.8s ease;
}
.section-tg.in-view .tg-path { stroke-dashoffset: 0; }
.tg-path.tg-p1 { transition-delay: 0s; }
.tg-path.tg-p2 { transition-delay: .05s; }
.tg-path.tg-p3 { transition-delay: .1s; }
.tg-path.tg-p4 { transition-delay: .15s; }
.tg-path.tg-p5 { transition-delay: .2s; }
.tg-path.tg-p6 { transition-delay: .25s; }
.tg-path.tg-p7 { transition-delay: .3s; }
.tg-path { transform-box: fill-box; transform-origin: center; }

.tg-scene { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: center; padding: 90px 0; }
.tg-scene-intro { min-height: 50vh; }
.tg-scene-core { min-height: 65vh; flex-direction: column; align-items: flex-start; }
.tg-scene-transition { min-height: 100vh; }
.tg-scene-industries { min-height: 55vh; }
.tg-scene-final { min-height: 55vh; }

.tg-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- SCENE 1：冒頭コピー ---- */
.tg-intro {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(48px, 4.6vw, 62px);
  line-height: 1.6;
}

/* ---- SCENE 2：CORE TARGET ---- */
.tg-eyebrow {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(18px, 1.5vw, 24px);
  letter-spacing: 0.12em;
  opacity: 0.6;
  margin-bottom: 26px;
}
.tg-headcount {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(64px, 7.2vw, 84px);
  line-height: 1.15;
}
.tg-headcount .gold { color: var(--gold); }
.tg-headcount-label {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(18px, 1.6vw, 22px);
  opacity: 0.7;
  margin-top: 6px;
}
.tg-bizType {
  margin-top: 56px;
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1.6;
}
.tg-bizType .gold { color: var(--gold); }

/* ---- SCENE 3：転換期 ---- */
.tg-trans-lead {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(38px, 3.8vw, 50px);
  line-height: 1.6;
  margin-bottom: 80px;
}
.tg-trans-list { display: flex; flex-direction: column; gap: 64px; }
.tg-trans-item {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.8;
  max-width: 640px;
}
/* PCでは非対称に少しずつ左右をずらして配置（2+2+1のイメージ、Excel的な整列にしない） */
.tg-trans-item-2 { margin-left: 8%; }
.tg-trans-item-positive {
  font-weight: 700;
  margin-left: 4%;
}

/* ---- SCENE 4：業界 ---- */
.tg-industries-main {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 56px;
  margin-bottom: 44px;
}
.tg-industry-main {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(30px, 2.8vw, 38px);
}
.tg-industry-main-2 { margin-top: 10px; }
.tg-industry-main-3 { margin-top: -6px; }
.tg-industries-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 36px;
}
.tg-industry-sub {
  font-weight: 400;
  color: var(--navy);
  opacity: 0.72;
  font-size: clamp(20px, 1.6vw, 26px);
}

/* ---- SCENE 5：最終コピー ---- */
.tg-final-1 {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(36px, 3.4vw, 44px);
  margin-bottom: 56px;
}
.tg-final-1 .gold { color: var(--gold); }
.tg-final-2 {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(52px, 5.4vw, 68px);
  line-height: 1.6;
}
.tg-final-2 .gold { color: var(--gold); }

@media (max-width: 768px) {
  .section-tg { min-height: auto; }
  .tg-scene { min-height: auto; padding: 64px 0; }
  .tg-scene-intro { min-height: auto; }
  .tg-scene-core { min-height: auto; }
  .tg-scene-transition { min-height: auto; }
  .tg-scene-industries { min-height: auto; }
  .tg-scene-final { min-height: auto; }
  .tg-intro { font-size: clamp(36px, 9.8vw, 46px); }
  .tg-headcount { font-size: clamp(48px, 13.4vw, 60px); }
  .tg-bizType { font-size: clamp(26px, 7.4vw, 34px); margin-top: 40px; }
  .tg-trans-lead { margin-bottom: 48px; }
  .tg-trans-list { gap: 44px; }
  .tg-trans-item { font-size: clamp(20px, 5.6vw, 26px); }
  .tg-trans-item-2 { margin-left: 0; }
  .tg-trans-item-positive { margin-left: 0; }
  .tg-industry-main { font-size: clamp(24px, 6.6vw, 30px); }
  .tg-industry-main-2, .tg-industry-main-3 { margin-top: 0; }
  .tg-industry-sub { font-size: clamp(18px, 5vw, 22px); }
  .tg-final-1 { font-size: clamp(38px, 10.2vw, 48px); margin-bottom: 36px; }
  .tg-final-2 { font-size: clamp(38px, 10.2vw, 48px); }
}

@media (prefers-reduced-motion: reduce) {
  .tg-path { transition: none; stroke-dashoffset: 0; }
}

/* =========================================================
   PROFILEページ（/profile）：WHO I AM
   思想：森田洋介の「事実」を、GOLD Flowと余白で伝える。
         黒い太線・カード化・アイコン・ストック写真は一切使わない。
========================================================= */

.pfl-hero,
.pfl-two,
.pfl-sports,
.pfl-business,
.pfl-career,
.pfl-now,
.pfl-personal,
.pfl-story {
  position: relative;
  background: var(--white);
  overflow: hidden;
}

/* ---------- 共通：Flowラッパー / パス基本 ---------- */
.pfl-hero-flow,
.pfl-two-flow,
.pfl-sports-flow,
.pfl-career-flow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.pfl-hero-flow svg,
.pfl-two-flow svg,
.pfl-sports-flow svg,
.pfl-career-flow svg { width: 100%; height: 100%; }

.pfl-hero-path,
.pfl-two-path,
.pfl-sports-path,
.pfl-career-path {
  fill: none;
  stroke: var(--gold);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 2.6s ease, opacity 2s ease;
}

/* ---- HERO：スポーツとビジネス、二つの背景を静かに通るFlow ---- */
.pfl-hero-path-1 { stroke-width: 1; }
.pfl-hero-path-2 { stroke-width: 0.9; }
.pfl-hero.in-view .pfl-hero-path-1 { stroke-dashoffset: 0; opacity: 0.26; transition-delay: 0.2s; }
.pfl-hero.in-view .pfl-hero-path-2 { stroke-dashoffset: 0; opacity: 0.2; transition-delay: 0.4s; }

/* ---- TWO FIELDS：SPORTSとBUSINESS、二つのFlowが並走し一本化しない ---- */
.pfl-two-path-sports-1,
.pfl-two-path-sports-2 { stroke-width: 1; }
.pfl-two-path-business-1,
.pfl-two-path-business-2 { stroke-width: 1; }
.pfl-two.in-view .pfl-two-path-sports-1 { stroke-dashoffset: 0; opacity: 0.3; transition-delay: 0s; }
.pfl-two.in-view .pfl-two-path-sports-2 { stroke-dashoffset: 0; opacity: 0.22; transition-delay: 0.15s; }
.pfl-two.in-view .pfl-two-path-business-1 { stroke-dashoffset: 0; opacity: 0.3; transition-delay: 0.3s; }
.pfl-two.in-view .pfl-two-path-business-2 { stroke-dashoffset: 0; opacity: 0.22; transition-delay: 0.45s; }

/* ---- SPORTS：土台を支える細いFlow ---- */
.pfl-sports-path-1 { stroke-width: 1.1; }
.pfl-sports.in-view .pfl-sports-path-1 { stroke-dashoffset: 0; opacity: 0.24; transition-delay: 0s; }

/* ---- CAREER：縦方向に静かに流れる1本のFlow（黒い縦線の代わり） ---- */
.pfl-career-path-1 { stroke-width: 1.6; }
.pfl-career.in-view .pfl-career-path-1 { stroke-dashoffset: 0; opacity: 0.4; transition-delay: 0s; }

/* ---------- 共通：eyebrow / タイトル ---------- */
.pfl-num {
  position: relative; z-index: 1;
  display: block;
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 28px;
  text-transform: uppercase;
}
.pfl-title {
  position: relative; z-index: 1;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.6;
  font-size: clamp(30px, 4vw, 50px);
  margin-bottom: 64px;
}

/* =========================================================
   SECTION 01：PROFILE HERO
========================================================= */
.pfl-hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 200px 0 120px;
}
/* 公式写真が未提供のため、HEROはタイポグラフィ＋GOLD Flowのみの
   1カラム構成とする（AI生成人物・ストック写真は使用しない） */
.pfl-hero-grid {
  position: relative; z-index: 1;
  max-width: 760px;
}
.pfl-hero-eyebrow {
  display: block;
  font-size: 14px;
  letter-spacing: 0.34em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 28px;
  text-transform: uppercase;
}
.pfl-hero-name {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(54px, 6.2vw, 72px);
  line-height: 1.3;
  margin-bottom: 8px;
}
.pfl-hero-name-en {
  display: block;
  font-weight: 400;
  color: var(--navy);
  font-size: 14px;
  letter-spacing: 0.18em;
  opacity: 0.55;
  margin-bottom: 28px;
}
.pfl-hero-role {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.9;
  opacity: 0.8;
  margin-bottom: 44px;
}
.pfl-hero-role span { display: block; }
.pfl-hero-main {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(38px, 4.6vw, 58px);
  line-height: 1.5;
  margin-bottom: 40px;
}
.pfl-hero-main .gold { color: var(--gold); }
.pfl-hero-sub {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 2;
  opacity: 0.75;
  max-width: 520px;
}

/* =========================================================
   SECTION 02：TWO FIELDS
========================================================= */
.pfl-two { padding: 180px 0; }
.pfl-two-intro {
  position: relative; z-index: 1;
  max-width: 700px;
  margin-bottom: 80px;
}
.pfl-two-intro p {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 2.1;
  opacity: 0.78;
  margin-bottom: 20px;
}
.pfl-two-visual {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 48px;
  text-align: center;
}
.pfl-two-visual-word {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(38px, 5.4vw, 68px);
  letter-spacing: 0.02em;
}
.pfl-two-visual-mark {
  font-weight: 700;
  color: var(--gold);
  font-size: clamp(30px, 4vw, 46px);
}
.pfl-two-sub {
  position: relative; z-index: 1;
  text-align: center;
  font-weight: 700;
  color: var(--navy);
  font-size: 15px;
  letter-spacing: 0.1em;
  opacity: 0.5;
}
.pfl-two-sub .pfl-two-sub-mark { color: var(--gold); margin: 0 10px; }

/* =========================================================
   SECTION 03：SPORTS
========================================================= */
.pfl-sports { padding: 180px 0; }
.pfl-sports-intro {
  position: relative; z-index: 1;
  max-width: 640px;
  margin-bottom: 56px;
}
.pfl-sports-intro p {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 2.1;
  opacity: 0.78;
  margin-bottom: 20px;
}
.pfl-sports-career {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 72px;
  max-width: 640px;
}
.pfl-sports-career-item {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(17px, 1.5vw, 20px);
  opacity: 0.85;
  line-height: 1.8;
}
.pfl-sports-career-item .gold { color: var(--gold); }
.pfl-sports-keywords {
  position: relative; z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  margin-bottom: 80px;
}
.pfl-sports-keyword {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(20px, 2vw, 26px);
  opacity: 0.34;
  letter-spacing: 0.06em;
}
.pfl-sports-closing {
  position: relative; z-index: 1;
  max-width: 640px;
}
.pfl-sports-closing-main {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.8;
  margin-bottom: 40px;
}
.pfl-sports-closing-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pfl-sports-closing-list p {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(15.5px, 1.15vw, 17px);
  line-height: 1.9;
  opacity: 0.72;
}
.pfl-sports-closing-final {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 2;
  opacity: 0.85;
  margin-top: 32px;
}

/* =========================================================
   SECTION 04：BUSINESS
========================================================= */
.pfl-business { padding: 180px 0; }
.pfl-business-intro {
  max-width: 640px;
  margin-bottom: 56px;
}
.pfl-business-intro p {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 2.1;
  opacity: 0.78;
}
.pfl-business-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-bottom: 56px;
  max-width: 820px;
}
.pfl-business-list-item {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(16px, 1.3vw, 18px);
  opacity: 0.78;
  position: relative;
  padding-left: 18px;
}
.pfl-business-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 1px;
  background: var(--gold);
}
.pfl-business-notes {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 660px;
  margin-bottom: 80px;
}
.pfl-business-notes p {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(15.5px, 1.1vw, 17px);
  line-height: 1.95;
  opacity: 0.72;
}
.pfl-business-key {
  max-width: 660px;
}
.pfl-business-key-main {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.8;
  margin-bottom: 36px;
}
.pfl-business-key-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pfl-business-key-list p {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(15.5px, 1.1vw, 17px);
  line-height: 1.9;
  opacity: 0.72;
}

/* =========================================================
   SECTION 05：CAREER（縦型タイムライン）
========================================================= */
.pfl-career { padding: 180px 0 200px; }
.pfl-career-timeline {
  position: relative; z-index: 1;
  max-width: 720px;
  margin-top: 64px;
  padding-left: 40px;
}
.pfl-career-item {
  position: relative;
  padding-bottom: 52px;
}
.pfl-career-item:last-child { padding-bottom: 0; }
.pfl-career-item::before {
  content: "";
  position: absolute;
  left: -40px;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.5;
}
.pfl-career-item.is-major::before {
  width: 8px;
  height: 8px;
  opacity: 0.9;
}
.pfl-career-year {
  display: block;
  font-weight: 700;
  color: var(--gold);
  font-size: clamp(20px, 1.6vw, 24px);
  margin-bottom: 8px;
}
.pfl-career-event {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.8;
  opacity: 0.75;
}
.pfl-career-item.is-major .pfl-career-event {
  font-weight: 700;
  font-size: clamp(22px, 1.9vw, 28px);
  opacity: 1;
}

/* =========================================================
   SECTION 06：NOW
========================================================= */
.pfl-now { padding: 180px 0; }
.pfl-now-body {
  max-width: 660px;
  margin-bottom: 44px;
}
.pfl-now-body p {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 2;
  opacity: 0.8;
  margin-bottom: 22px;
}
.pfl-now-body p:last-child { margin-bottom: 0; }
.pfl-now-brand {
  font-weight: 700;
  color: var(--navy);
  font-size: 15px;
  letter-spacing: 0.06em;
  opacity: 0.55;
  margin-bottom: 56px;
}
.pfl-now-link {
  font-size: 15px;
}

/* =========================================================
   SECTION 07：PERSONAL（少しだけ温度を上げる）
========================================================= */
.pfl-personal {
  padding: 180px 0;
  background: #FAFAF7;
}
.pfl-personal-title {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.6;
  margin-bottom: 56px;
}
.pfl-personal-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 48px;
}
.pfl-personal-list-item {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(19px, 1.8vw, 23px);
  opacity: 0.82;
}
.pfl-personal-copy {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 2;
  opacity: 0.7;
  max-width: 520px;
}

/* =========================================================
   SECTION 08：MESSAGE LINK（STORY）
========================================================= */
.pfl-story { padding: 180px 0; }
.pfl-story-body {
  max-width: 600px;
  margin-bottom: 44px;
}
.pfl-story-body p {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 2;
  opacity: 0.75;
  margin-bottom: 8px;
}

/* ---------------------------------------------------------
   PROFILEページ：モバイル
--------------------------------------------------------- */
@media (max-width: 768px) {
  .pfl-hero { min-height: auto; padding: 130px 0 80px; }
  .pfl-hero-name { font-size: clamp(38px, 10vw, 48px); }
  .pfl-hero-main { font-size: clamp(30px, 8.4vw, 38px); margin-bottom: 28px; }
  .pfl-hero-role { margin-bottom: 32px; }

  .pfl-num { margin-bottom: 20px; }
  .pfl-title { font-size: clamp(24px, 7.4vw, 30px); margin-bottom: 44px; }

  .pfl-two { padding: 90px 0; }
  .pfl-two-intro { margin-bottom: 56px; }
  .pfl-two-visual { gap: 20px; margin-bottom: 32px; }
  .pfl-two-visual-word { font-size: clamp(30px, 9vw, 40px); }

  .pfl-sports { padding: 90px 0; }
  .pfl-sports-career { margin-bottom: 48px; }
  .pfl-sports-keywords { gap: 16px 28px; margin-bottom: 56px; }
  .pfl-sports-keyword { font-size: clamp(17px, 5vw, 21px); }
  .pfl-sports-closing-main { font-size: clamp(20px, 6vw, 26px); margin-bottom: 28px; }

  .pfl-business { padding: 90px 0; }
  .pfl-business-list { margin-bottom: 40px; }
  .pfl-business-notes { margin-bottom: 56px; }
  .pfl-business-key-main { font-size: clamp(20px, 6vw, 26px); margin-bottom: 24px; }

  .pfl-career { padding: 90px 0 100px; }
  .pfl-career-timeline { padding-left: 28px; margin-top: 44px; }
  .pfl-career-item::before { left: -28px; }
  .pfl-career-item { padding-bottom: 40px; }
  .pfl-career-year { font-size: clamp(18px, 5vw, 21px); }
  .pfl-career-event { font-size: clamp(15px, 4.4vw, 17px); }
  .pfl-career-item.is-major .pfl-career-event { font-size: clamp(19px, 5.6vw, 23px); }

  .pfl-now { padding: 90px 0; }
  .pfl-now-body { margin-bottom: 32px; }

  .pfl-personal { padding: 90px 0; }
  .pfl-personal-title { font-size: clamp(24px, 7.4vw, 30px); margin-bottom: 40px; }
  .pfl-personal-list { margin-bottom: 36px; }
  .pfl-personal-list-item { font-size: clamp(17px, 5vw, 20px); }

  .pfl-story { padding: 90px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pfl-hero-path,
  .pfl-two-path,
  .pfl-sports-path,
  .pfl-career-path {
    transition: none;
    stroke-dashoffset: 0;
  }
}

/* =========================================================
   SECTION 14：FEE（組織への「関わり方」で、支援を設計します。）
========================================================= */
.section-fee {
  position: relative;
  min-height: 230vh;
  overflow: visible;
  background: var(--white);
}

.fee-flow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.fee-flow svg {
  width: 100%;
  height: 100%;
}
.fee-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 2.4s ease, opacity 1.6s ease;
}
.section-fee.in-view .fee-outer-1 { stroke-dashoffset: 0; transition-delay: 0s; }
.section-fee.in-view .fee-outer-2 { stroke-dashoffset: 0; transition-delay: 0.06s; }
.section-fee.in-view .fee-cross-1 { stroke-dashoffset: 0; transition-delay: 0.2s; }
.section-fee.in-view .fee-cross-2 { stroke-dashoffset: 0; transition-delay: 0.26s; }
.section-fee.in-view .fee-cross-3 { stroke-dashoffset: 0; transition-delay: 0.32s; }
.section-fee.in-view .fee-wide-1 { stroke-dashoffset: 0; transition-delay: 0.44s; }
.section-fee.in-view .fee-wide-2 { stroke-dashoffset: 0; transition-delay: 0.5s; }
.section-fee.in-view .fee-wide-3 { stroke-dashoffset: 0; transition-delay: 0.56s; }
.section-fee.in-view .fee-wide-4 { stroke-dashoffset: 0; transition-delay: 0.62s; }

.fee-scene {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fee-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- SCENE 1：組織への「関わり方」で、支援を設計します。 ---- */
.fee-scene-intro { min-height: 55vh; }
.fee-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(52px, 5.2vw, 68px);
  line-height: 1.5;
}
.fee-intro .gold { color: var(--gold); }

/* ---- SCENE 2：月額伴走型 / 10万円〜50万円 ---- */
.fee-scene-range { min-height: 60vh; }
.fee-range-label {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(24px, 2.2vw, 30px);
  letter-spacing: 0.06em;
  margin-bottom: 20px;
}
.fee-range-price {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(64px, 6.8vw, 82px);
  line-height: 1.3;
}
.fee-range-price .gold { color: var(--gold); }
.fee-range-tax {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(18px, 1.6vw, 22px);
  margin-top: 18px;
  opacity: 0.75;
}

/* ---- 共通：プラン（カード化しない） ---- */
.fee-plan-name {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(24px, 2.2vw, 30px);
  letter-spacing: 0.08em;
  margin-bottom: 22px;
}
.fee-plan-price {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(34px, 3.2vw, 44px);
  margin-bottom: 26px;
}
.fee-plan-unit {
  font-weight: 400;
  font-size: 0.42em;
  letter-spacing: 0.02em;
}
.fee-plan-tagline {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(30px, 2.8vw, 38px);
  margin-bottom: 30px;
}
.fee-plan-list {
  font-weight: 400;
  color: var(--navy);
}
.fee-plan-list li {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 2.1;
}

/* ---- SCENE 3：LIGHT（左〜中央、比較的限定された関与） ---- */
.fee-scene-light { min-height: 60vh; }
.fee-plan-light {
  max-width: 480px;
  margin-left: 0;
  margin-right: auto;
}

/* ---- SCENE 4：STANDARD（中央、組織づくりへ深く入る） ---- */
.fee-scene-standard { min-height: 65vh; }
.fee-plan-standard {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---- SCENE 5：PARTNER（右・後半、最も深い関与。少し強く） ---- */
.fee-scene-partner { min-height: 75vh; }
.fee-plan-partner {
  max-width: 620px;
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}
.fee-plan-partner .fee-plan-name { color: var(--gold); }
.fee-plan-partner .fee-plan-tagline {
  font-size: clamp(34px, 3.2vw, 44px);
}
.fee-plan-core {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(40px, 3.8vw, 52px);
  line-height: 1.6;
  margin-bottom: 34px;
}
.fee-plan-core .gold { color: var(--gold); }
.fee-plan-detail {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.9;
}

/* ---- SCENE 6：最終注記 ---- */
.fee-scene-note { min-height: 40vh; align-items: center; text-align: center; }
.fee-note {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.9;
}

@media (max-width: 768px) {
  .section-fee { min-height: auto; }
  .fee-scene { min-height: auto; padding: 52px 0; }

  .fee-scene-intro { min-height: auto; }
  .fee-intro { font-size: clamp(38px, 10.4vw, 48px); }

  .fee-scene-range { min-height: auto; }
  .fee-range-label { font-size: clamp(20px, 5.4vw, 24px); margin-bottom: 14px; }
  .fee-range-price { font-size: clamp(46px, 13vw, 58px); }
  .fee-range-tax { font-size: clamp(15px, 4vw, 18px); }

  .fee-plan-name { font-size: clamp(22px, 5.8vw, 26px); margin-bottom: 16px; }
  .fee-plan-price { font-size: clamp(28px, 7.4vw, 36px); margin-bottom: 18px; }
  .fee-plan-tagline { font-size: clamp(24px, 6.4vw, 30px); margin-bottom: 20px; }
  .fee-plan-list li { font-size: clamp(16px, 4.6vw, 20px); line-height: 1.9; }

  .fee-scene-light, .fee-scene-standard, .fee-scene-partner { min-height: auto; }
  .fee-plan-light, .fee-plan-standard, .fee-plan-partner {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
  .fee-plan-partner .fee-plan-tagline { font-size: clamp(24px, 6.4vw, 30px); }
  .fee-plan-core { font-size: clamp(30px, 8vw, 38px); margin-bottom: 22px; }
  .fee-plan-detail { font-size: clamp(16px, 4.6vw, 20px); }

  .fee-scene-note { min-height: auto; }
  .fee-note { font-size: clamp(18px, 4.8vw, 22px); }
}

@media (prefers-reduced-motion: reduce) {
  .fee-path { transition: none; stroke-dashoffset: 0; }
}

/* =========================================================
   SECTION 15：START（まずは、組織の話を聞かせてください。）
========================================================= */
.section-start {
  position: relative;
  min-height: 210vh;
  overflow: visible;
  background: var(--white);
}

.start-flow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.start-flow svg {
  width: 100%;
  height: 100%;
}
.start-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 2.4s ease, opacity 1.6s ease;
}
.section-start.in-view .start-flow-1 { stroke-dashoffset: 0; transition-delay: 0s; }
.section-start.in-view .start-flow-2 { stroke-dashoffset: 0; transition-delay: 0.08s; }
.section-start.in-view .start-flow-3 { stroke-dashoffset: 0; transition-delay: 0.16s; }
.section-start.in-view .start-flow-4 { stroke-dashoffset: 0; transition-delay: 0.24s; }

.start-scene {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---- SCENE 1：まずは、組織の話を聞かせてください。 ---- */
.start-scene-intro { min-height: 55vh; }
.start-intro {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--navy);
}
.start-intro-1 {
  font-weight: 700;
  font-size: clamp(32px, 3vw, 40px);
}
.start-intro-2 {
  font-weight: 700;
  font-size: clamp(58px, 5.8vw, 76px);
  line-height: 1.5;
}
.start-intro-2 .gold { color: var(--gold); }

/* ---- SCENE 2〜5：01〜04 ---- */
.start-scene-step { min-height: 42vh; }
.start-step-inner { max-width: 640px; }
.start-step-num {
  font-weight: 700;
  color: var(--gold);
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}
.start-step-verb {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(40px, 4vw, 54px);
  margin-bottom: 26px;
}
.start-step-desc {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.9;
}
.start-step-desc .gold { color: var(--gold); }

.start-step-01 .start-step-inner { margin-left: 0; margin-right: auto; }
.start-step-02 .start-step-inner { margin-left: 8%; margin-right: auto; }
.start-step-03 .start-step-inner { margin-left: 4%; margin-right: auto; }
.start-step-04 .start-step-inner { margin-left: 12%; margin-right: auto; }

/* ---- SCENE 6：正解を決めてから〜 ---- */
.start-scene-permission { min-height: 30vh; align-items: center; text-align: center; }
.start-permission {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(34px, 3.4vw, 44px);
  line-height: 1.7;
}

/* ---- SCENE 7：「何から手をつければいいかわからない」から、始めてください。＋CTA ---- */
.start-scene-final { min-height: 55vh; align-items: center; text-align: center; }
.start-final {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(40px, 4vw, 52px);
  line-height: 1.7;
  margin-bottom: 56px;
}
.start-final .gold { color: var(--gold); }
.start-cta { font-size: 18px; }

@media (max-width: 768px) {
  .section-start { min-height: auto; }
  .start-scene { min-height: auto; padding: 48px 0; }

  .start-scene-intro { min-height: auto; }
  .start-intro-1 { font-size: clamp(24px, 6.6vw, 30px); }
  .start-intro-2 { font-size: clamp(40px, 11vw, 50px); }

  .start-scene-step { min-height: auto; }
  .start-step-inner { max-width: 100%; }
  .start-step-01 .start-step-inner,
  .start-step-02 .start-step-inner,
  .start-step-03 .start-step-inner,
  .start-step-04 .start-step-inner { margin-left: 0; margin-right: 0; }
  .start-step-num { font-size: clamp(16px, 4.4vw, 20px); margin-bottom: 12px; }
  .start-step-verb { font-size: clamp(30px, 8vw, 38px); margin-bottom: 18px; }
  .start-step-desc { font-size: clamp(18px, 4.8vw, 23px); }

  .start-scene-permission { min-height: auto; }
  .start-permission { font-size: clamp(30px, 8vw, 40px); }

  .start-scene-final { min-height: auto; }
  .start-final { font-size: clamp(34px, 9vw, 44px); margin-bottom: 40px; }
  .start-cta { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .start-path { transition: none; stroke-dashoffset: 0; }
}

/* =========================================================
   SERVICEページ（新構成／2026 リニューアル）
   思想：黒・極太罫線でセクションを区切るのではなく、
   WHITE余白 × NAVY typography × 細いGOLD Flowで、
   知恵・人・組織・対話が静かにつながっていく状態を表現する。
   ルール：
   - 黒（#000）は使用しない。本文・見出しはすべてNAVY。
   - 線は原則GOLDのみ。太さ0.75〜2px、主要Flowでも最大2.5px。
   - 区切りはカード／罫線ではなく余白（120〜200px）で行う。
   - Flowは直線の区切り線ではなく、有機的に揺らぐ曲線。
========================================================= */

.svc-hero,
.svc-problem,
.svc-concept,
.svc-position,
.svc-team,
.svc-support,
.svc-scope,
.svc-style,
.svc-target,
.svc-fee,
.svc-start {
  position: relative;
  background: var(--white);
  overflow: hidden;
}

/* ---- 共通：GOLD Flowレイヤー（黒フチ・黒塗りを防ぐため fill:none を必ず指定） ---- */
.svc-hero-flow,
.svc-problem-flow,
.svc-concept-flow,
.svc-position-flow,
.svc-team-flow,
.svc-support-flow,
.svc-scope-flow,
.svc-style-flow,
.svc-target-flow,
.svc-fee-flow,
.svc-start-flow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.svc-hero-flow svg,
.svc-problem-flow svg,
.svc-concept-flow svg,
.svc-position-flow svg,
.svc-team-flow svg,
.svc-support-flow svg,
.svc-scope-flow svg,
.svc-style-flow svg,
.svc-target-flow svg,
.svc-fee-flow svg,
.svc-start-flow svg {
  width: 100%;
  height: 100%;
  display: block;
}

.svc-hero-path,
.svc-problem-path,
.svc-concept-path,
.svc-position-path,
.svc-team-path,
.svc-support-path,
.svc-scope-path,
.svc-style-path,
.svc-target-path,
.svc-fee-path,
.svc-start-path {
  fill: none;
  stroke: var(--gold);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 2.6s ease, opacity 2s ease;
}

/* ---- HERO：複数の細いFlowが同じ方向へ静かに進む（黒い直線・太い縦線は使用しない） ---- */
.svc-hero-path-1 { stroke-width: 1.2; }
.svc-hero-path-2 { stroke-width: 0.9; }
.svc-hero-path-3 { stroke-width: 1.6; }
.svc-hero.in-view .svc-hero-path-1 { stroke-dashoffset: 0; opacity: 0.32; transition-delay: 0s; }
.svc-hero.in-view .svc-hero-path-2 { stroke-dashoffset: 0; opacity: 0.2; transition-delay: 0.2s; }
.svc-hero.in-view .svc-hero-path-3 { stroke-dashoffset: 0; opacity: 0.55; transition-delay: 0.4s; }

/* ---- PROBLEM：問題提起が一点へ寄っていく、乱れを含んだ細いFlow ---- */
.svc-problem-path-1 { stroke-width: 1; }
.svc-problem-path-2 { stroke-width: 1; }
.svc-problem.in-view .svc-problem-path-1 { stroke-dashoffset: 0; opacity: 0.26; transition-delay: 0s; }
.svc-problem.in-view .svc-problem-path-2 { stroke-dashoffset: 0; opacity: 0.22; transition-delay: 0.2s; }

/* ---- CONCEPT：社外キャプテン™という言葉の周辺を通る1〜数本の細いFlow ---- */
.svc-concept-path-1 { stroke-width: 1.3; }
.svc-concept-path-2 { stroke-width: 1; }
.svc-concept.in-view .svc-concept-path-1 { stroke-dashoffset: 0; opacity: 0.34; transition-delay: 0s; }
.svc-concept.in-view .svc-concept-path-2 { stroke-dashoffset: 0; opacity: 0.2; transition-delay: 0.2s; }

/* ---- POSITION：経営者／社外キャプテン™／現場を結ぶ、矢印のない細い曲線 ---- */
.svc-position-path-1 { stroke-width: 1.4; }
.svc-position-path-2 { stroke-width: 1.4; }
.svc-position-path-3 { stroke-width: 1; }
.svc-position.in-view .svc-position-path-1 { stroke-dashoffset: 0; opacity: 0.4; transition-delay: 0s; }
.svc-position.in-view .svc-position-path-2 { stroke-dashoffset: 0; opacity: 0.4; transition-delay: 0.2s; }
.svc-position.in-view .svc-position-path-3 { stroke-dashoffset: 0; opacity: 0.18; transition-delay: 0.4s; }

/* ---- TEAM：5本の異なる軌道が、統合せず、同じ方向へ進む（1本の太線に見せない） ---- */
.svc-team-path-1 { stroke-width: 0.9; }
.svc-team-path-2 { stroke-width: 1; }
.svc-team-path-3 { stroke-width: 1.3; }
.svc-team-path-4 { stroke-width: 1; }
.svc-team-path-5 { stroke-width: 0.9; }
.svc-team.in-view .svc-team-path-1 { stroke-dashoffset: 0; opacity: 0.2; transition-delay: 0s; }
.svc-team.in-view .svc-team-path-2 { stroke-dashoffset: 0; opacity: 0.26; transition-delay: 0.15s; }
.svc-team.in-view .svc-team-path-3 { stroke-dashoffset: 0; opacity: 0.4; transition-delay: 0.3s; }
.svc-team.in-view .svc-team-path-4 { stroke-dashoffset: 0; opacity: 0.26; transition-delay: 0.45s; }
.svc-team.in-view .svc-team-path-5 { stroke-dashoffset: 0; opacity: 0.2; transition-delay: 0.6s; }

/* ---- SUPPORT：5つの組織機能をゆるやかにつなぐ2本の細いFlow ---- */
.svc-support-path-1 { stroke-width: 1; }
.svc-support-path-2 { stroke-width: 0.9; }
.svc-support.in-view .svc-support-path-1 { stroke-dashoffset: 0; opacity: 0.22; transition-delay: 0s; }
.svc-support.in-view .svc-support-path-2 { stroke-dashoffset: 0; opacity: 0.18; transition-delay: 0.2s; }

/* ---- SCOPE：各領域の近くを静かに通る細いFlow ---- */
.svc-scope-path-1 { stroke-width: 1; }
.svc-scope-path-2 { stroke-width: 1; }
.svc-scope.in-view .svc-scope-path-1 { stroke-dashoffset: 0; opacity: 0.22; transition-delay: 0s; }
.svc-scope.in-view .svc-scope-path-2 { stroke-dashoffset: 0; opacity: 0.18; transition-delay: 0.2s; }

/* ---- STYLE：外部から組織内部へ入っていく1本の細いFlow ---- */
.svc-style-path-1 { stroke-width: 1.3; }
.svc-style.in-view .svc-style-path-1 { stroke-dashoffset: 0; opacity: 0.32; transition-delay: 0s; }

/* ---- TARGET：条件を区切らず、余白の中を通る細いFlow ---- */
.svc-target-path-1 { stroke-width: 1; }
.svc-target-path-2 { stroke-width: 1; }
.svc-target.in-view .svc-target-path-1 { stroke-dashoffset: 0; opacity: 0.2; transition-delay: 0s; }
.svc-target.in-view .svc-target-path-2 { stroke-dashoffset: 0; opacity: 0.18; transition-delay: 0.2s; }

/* ---- FEE：関与の深さに応じてページを進む1本のFlow（金額が増えても太くしない） ---- */
.svc-fee-path-1 { stroke-width: 1.4; }
.svc-fee.in-view .svc-fee-path-1 { stroke-dashoffset: 0; opacity: 0.34; transition-delay: 0s; }

/* ---- START：01〜04の間を静かに通る1本の細いFlow ---- */
.svc-start-path-1 { stroke-width: 1.4; }
.svc-start.in-view .svc-start-path-1 { stroke-dashoffset: 0; opacity: 0.36; transition-delay: 0s; }

/* ---------------------------------------------------------
   共通：eyebrow / title タイポグラフィ（GOLD罫線に頼らない）
--------------------------------------------------------- */
.svc-hero-eyebrow,
.svc-problem-eyebrow,
.svc-concept-eyebrow,
.svc-position-eyebrow,
.svc-team-eyebrow,
.svc-support-eyebrow,
.svc-scope-eyebrow,
.svc-style-eyebrow,
.svc-target-eyebrow,
.svc-fee-eyebrow,
.svc-start-eyebrow {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 13px;
  letter-spacing: 0.34em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 32px;
  text-transform: uppercase;
}

.svc-problem-title,
.svc-concept-title,
.svc-position-title,
.svc-team-title,
.svc-support-title,
.svc-scope-title,
.svc-style-title,
.svc-target-title,
.svc-fee-title,
.svc-start-title {
  position: relative;
  z-index: 1;
  font-weight: 700;
  line-height: 1.6;
  color: var(--navy);
  font-size: clamp(30px, 4vw, 50px);
  margin-bottom: 56px;
}

/* =========================================================
   SECTION 01：HERO
========================================================= */
.svc-hero {
  min-height: 94vh;
  display: flex;
  align-items: center;
  padding: 200px 0 140px;
}
.svc-hero-inner { position: relative; z-index: 1; max-width: 900px; }
.svc-hero-name {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(19px, 1.9vw, 25px);
  letter-spacing: 0.06em;
  margin-bottom: 30px;
}
.svc-hero-main {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(38px, 5.6vw, 80px);
  line-height: 1.45;
  margin-bottom: 60px;
}
.svc-hero-connect { margin-bottom: 56px; max-width: 640px; }
.svc-hero-connect-lead {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.8;
  margin-bottom: 20px;
}
.svc-hero-connect-body {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 2.1;
  opacity: 0.75;
}
.svc-hero-sub { max-width: 640px; }
.svc-hero-sub-line {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.8;
  margin-bottom: 18px;
}
.svc-hero-sub-body {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 2.1;
  opacity: 0.68;
}

/* =========================================================
   SECTION 02：PROBLEM
========================================================= */
.svc-problem { padding: 180px 0; }
.svc-problem-title { max-width: 700px; }
.svc-problem-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 64px 0 80px;
}
.svc-problem-item {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.7;
}
.svc-problem-item-2 { margin-left: 5%; }
.svc-problem-item-4 { margin-left: 9%; }
.svc-problem-item-6 { margin-left: 4%; }
.svc-problem-closing {
  position: relative;
  z-index: 1;
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.9;
  margin-bottom: 24px;
}
.svc-problem-closing-2 {
  position: relative;
  z-index: 1;
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 2.1;
  opacity: 0.8;
}

/* =========================================================
   SECTION 03：CONCEPT
========================================================= */
.svc-concept { padding: 180px 0; }
.svc-concept-title { max-width: 640px; }
.svc-concept-text {
  position: relative;
  z-index: 1;
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(17.5px, 1.5vw, 21px);
  line-height: 2;
  margin-bottom: 34px;
}
.svc-concept-text-strong { font-weight: 700; font-size: clamp(19px, 1.7vw, 23px); }
.svc-concept-key {
  position: relative;
  z-index: 1;
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(23px, 2.3vw, 31px);
  line-height: 1.8;
  margin-top: 64px;
}

/* =========================================================
   SECTION 04：POSITION
========================================================= */
.svc-position { padding: 180px 0; }
.svc-position-title { max-width: 640px; }
.svc-position-map {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px 24px;
  margin: 96px auto;
  max-width: 1080px;
  text-align: center;
}
.svc-position-side { flex: 1 1 200px; }
.svc-position-center { flex: 0 1 240px; }
.svc-position-label {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(16px, 1.4vw, 19px);
  letter-spacing: 0.05em;
  opacity: 0.8;
}
.svc-position-center-name {
  font-weight: 700;
  color: var(--gold);
  font-size: clamp(19px, 1.8vw, 23px);
  letter-spacing: 0.04em;
}
.svc-position-text {
  position: relative;
  z-index: 1;
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 2;
  margin-bottom: 30px;
  max-width: 620px;
}
.svc-position-text-strong { font-weight: 700; font-size: clamp(18.5px, 1.6vw, 22px); }

/* =========================================================
   SECTION 05：TEAM MODEL
========================================================= */
.svc-team { padding: 190px 0; }
.svc-team-title { max-width: 640px; }
.svc-team-def {
  position: relative;
  z-index: 1;
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 2;
  margin-bottom: 26px;
}
.svc-team-def-strong { font-weight: 700; font-size: clamp(18.5px, 1.6vw, 22px); margin-top: 8px; }
.svc-team-final {
  position: relative;
  z-index: 1;
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(22px, 2.1vw, 29px);
  line-height: 1.8;
  margin-top: 64px;
}

/* =========================================================
   SECTION 06：SUPPORT（5つの組織機能）
========================================================= */
.svc-support { padding: 190px 0; }
.svc-support-title { max-width: 700px; }
.svc-support-func {
  position: relative;
  z-index: 1;
  margin-bottom: 64px;
}
.svc-support-func-2 { margin-left: 3%; }
.svc-support-func-4 { margin-left: 5%; }
.svc-support-func-label {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(19px, 1.7vw, 23px);
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.svc-support-func-sub {
  display: inline-block;
  color: var(--gold);
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 17px);
  letter-spacing: 0.01em;
  margin-top: 4px;
}
.svc-support-func-body {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 2.1;
  opacity: 0.78;
  max-width: 600px;
}
.svc-support-closing {
  position: relative;
  z-index: 1;
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.9;
  margin-top: 72px;
  margin-bottom: 22px;
}
.svc-support-closing-2 {
  position: relative;
  z-index: 1;
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(16px, 1.3vw, 18.5px);
  line-height: 2.1;
  opacity: 0.75;
}

/* =========================================================
   SECTION 07：SCOPE
========================================================= */
.svc-scope { padding: 180px 0; }
.svc-scope-title { max-width: 640px; }
.svc-scope-lead {
  position: relative;
  z-index: 1;
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(16.5px, 1.3vw, 19px);
  line-height: 2;
  opacity: 0.78;
  margin-bottom: 60px;
}
.svc-scope-group {
  position: relative;
  z-index: 1;
  margin-bottom: 44px;
}
.svc-scope-group-2 { margin-left: 3%; }
.svc-scope-group-4 { margin-left: 5%; }
.svc-scope-group-label {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.svc-scope-group-items {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 2.1;
  opacity: 0.72;
  max-width: 680px;
}
.svc-scope-note {
  position: relative;
  z-index: 1;
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(16px, 1.3vw, 18.5px);
  line-height: 2;
  opacity: 0.8;
  margin-top: 64px;
}

/* =========================================================
   SECTION 08：STYLE
========================================================= */
.svc-style { padding: 180px 0; }
.svc-style-title { max-width: 700px; }
.svc-style-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 34px;
  margin: 56px 0 64px;
}
.svc-style-item {
  display: flex;
  align-items: baseline;
  gap: 22px;
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(16.5px, 1.35vw, 19.5px);
  line-height: 1.9;
}
.svc-style-num {
  flex-shrink: 0;
  color: var(--gold);
  font-weight: 700;
  font-size: clamp(13.5px, 1.1vw, 15px);
  letter-spacing: 0.1em;
}
.svc-style-key {
  position: relative;
  z-index: 1;
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.85;
}

/* =========================================================
   SECTION 09：TARGET
========================================================= */
.svc-target { padding: 180px 0; }
.svc-target-title { max-width: 700px; }
.svc-target-lead {
  position: relative;
  z-index: 1;
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 2;
  margin-bottom: 26px;
}
.svc-target-sub {
  position: relative;
  z-index: 1;
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(15px, 1.2vw, 17px);
  opacity: 0.68;
  margin-bottom: 44px;
}
.svc-target-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 56px;
}
.svc-target-item {
  position: relative;
  padding-left: 22px;
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.9;
}
.svc-target-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.svc-target-note {
  position: relative;
  z-index: 1;
  font-weight: 400;
  color: var(--navy);
  font-size: 13.5px;
  line-height: 2.1;
  opacity: 0.5;
}

/* =========================================================
   SECTION 10：FEE
========================================================= */
.svc-fee { padding: 190px 0; }
.svc-fee-title { max-width: 700px; }
.svc-fee-main {
  position: relative;
  z-index: 1;
  margin: 56px 0 48px;
}
.svc-fee-main-label {
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.08em;
  font-size: clamp(14px, 1.2vw, 16px);
  opacity: 0.65;
  margin-bottom: 14px;
}
.svc-fee-main-price {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.3;
}
.svc-fee-main-tax {
  font-weight: 400;
  color: var(--navy);
  font-size: 13px;
  opacity: 0.5;
  margin-top: 10px;
}
.svc-fee-principle {
  position: relative;
  z-index: 1;
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 2.1;
  opacity: 0.72;
  margin-bottom: 72px;
  max-width: 680px;
}
.svc-fee-tier {
  position: relative;
  z-index: 1;
  margin-bottom: 60px;
  max-width: 680px;
}
.svc-fee-tier-1 { opacity: 0.78; }
.svc-fee-tier-2 { opacity: 0.9; }
.svc-fee-tier-3 { opacity: 1; }
.svc-fee-tier-price {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(21px, 1.9vw, 26px);
}
.svc-fee-tier-unit { font-weight: 400; font-size: 13px; opacity: 0.55; }
.svc-fee-tier-name {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(19px, 1.7vw, 23px);
  margin: 10px 0 16px;
}
.svc-fee-tier-core {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(15.5px, 1.25vw, 18px);
  margin-bottom: 14px;
}
.svc-fee-tier-body {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 2.1;
  opacity: 0.78;
}
.svc-fee-closing {
  position: relative;
  z-index: 1;
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(15px, 1.2vw, 17px);
  opacity: 0.62;
  margin-top: 56px;
}

/* =========================================================
   SECTION 11：START
========================================================= */
.svc-start { padding: 190px 0; }
.svc-start-title { max-width: 700px; }
.svc-start-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 72px;
}
.svc-start-num {
  flex-shrink: 0;
  min-width: 48px;
  color: var(--gold);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px);
  opacity: 0.8;
}
.svc-start-verb {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(21px, 1.9vw, 26px);
  margin-bottom: 14px;
}
.svc-start-desc {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 2.1;
  opacity: 0.75;
}
.svc-start-closing {
  position: relative;
  z-index: 1;
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.9;
  margin-top: 56px;
  margin-bottom: 20px;
}
.svc-start-closing-2 {
  position: relative;
  z-index: 1;
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.9;
}

/* =========================================================
   SECTION 12：CONTACT CTA 内の新規追加要素
   （共通 .cc-* 構造は変更せず、SERVICE固有の追加分のみ定義）
========================================================= */
.svc-cta-eyebrow {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 13px;
  letter-spacing: 0.34em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 28px;
  text-transform: uppercase;
}
.svc-cta-email {
  position: relative;
  z-index: 1;
  margin-top: 28px;
  font-size: 14.5px;
  color: var(--navy);
  opacity: 0.6;
}
.svc-cta-email a { border-bottom: 1px solid var(--navy); transition: color 0.3s ease, border-color 0.3s ease; }
.svc-cta-email a:hover { color: var(--gold); border-color: var(--gold); }
.svc-cta-links {
  position: relative;
  z-index: 1;
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.svc-cta-link-item .link-action { font-size: 13.5px; font-weight: 400; opacity: 0.75; }
.svc-cta-link-item .link-action:hover { opacity: 1; }

/* =========================================================
   SERVICEページ：モバイル調整（768px）
========================================================= */
@media (max-width: 768px) {
  .svc-hero { min-height: auto; padding: 140px 0 90px; }
  .svc-hero-name { font-size: clamp(17px, 4.6vw, 20px); margin-bottom: 22px; }
  .svc-hero-main { font-size: clamp(30px, 8.6vw, 42px); margin-bottom: 40px; }
  .svc-hero-connect { margin-bottom: 40px; }
  .svc-hero-connect-lead { font-size: clamp(18px, 5vw, 21px); }
  .svc-hero-connect-body, .svc-hero-sub-body { font-size: 14px; }
  .svc-hero-sub-line { font-size: clamp(17px, 4.8vw, 20px); }

  .svc-problem, .svc-concept, .svc-position, .svc-team,
  .svc-support, .svc-scope, .svc-style, .svc-target,
  .svc-fee, .svc-start { padding: 100px 0; }

  .svc-problem-title, .svc-concept-title, .svc-position-title,
  .svc-team-title, .svc-support-title, .svc-scope-title,
  .svc-style-title, .svc-target-title, .svc-fee-title, .svc-start-title {
    font-size: clamp(26px, 8vw, 34px);
    margin-bottom: 40px;
  }

  .svc-problem-list { gap: 28px; margin: 44px 0 56px; }
  .svc-problem-item { font-size: clamp(17px, 5vw, 21px); }
  .svc-problem-item-2, .svc-problem-item-4, .svc-problem-item-6 { margin-left: 0; }
  .svc-problem-closing { font-size: clamp(19px, 5.6vw, 23px); }

  .svc-concept-text { font-size: 16px; margin-bottom: 26px; }
  .svc-concept-key { font-size: clamp(20px, 6vw, 25px); margin-top: 48px; }

  .svc-position-map { margin: 64px auto; gap: 32px 16px; }
  .svc-position-text { font-size: 16px; margin-bottom: 24px; }

  .svc-team-def { font-size: 16px; margin-bottom: 20px; }
  .svc-team-final { font-size: clamp(19px, 5.6vw, 23px); margin-top: 48px; }

  .svc-support-func { margin-bottom: 48px; }
  .svc-support-func-2, .svc-support-func-4 { margin-left: 0; }
  .svc-support-func-label { font-size: clamp(17px, 5vw, 20px); }
  .svc-support-closing { margin-top: 56px; font-size: clamp(17px, 5vw, 20px); }

  .svc-scope-lead { margin-bottom: 44px; }
  .svc-scope-group { margin-bottom: 34px; }
  .svc-scope-group-2, .svc-scope-group-4 { margin-left: 0; }
  .svc-scope-note { margin-top: 48px; }

  .svc-style-list { gap: 26px; margin: 40px 0 48px; }
  .svc-style-key { font-size: clamp(19px, 5.8vw, 23px); }

  .svc-target-lead { font-size: clamp(17px, 5vw, 20px); }
  .svc-target-list { gap: 22px; margin-bottom: 44px; }

  .svc-fee-main { margin: 40px 0 36px; }
  .svc-fee-main-price { font-size: clamp(32px, 10vw, 42px); }
  .svc-fee-principle { margin-bottom: 52px; }
  .svc-fee-tier { margin-bottom: 44px; }
  .svc-fee-tier-price { font-size: clamp(19px, 5.6vw, 23px); }
  .svc-fee-tier-name { font-size: clamp(18px, 5.4vw, 21px); }

  .svc-start-item { gap: 20px; margin-bottom: 52px; }
  .svc-start-num { min-width: 38px; font-size: clamp(20px, 6vw, 26px); }
  .svc-start-verb { font-size: clamp(19px, 5.6vw, 23px); }
  .svc-start-closing-2 { font-size: clamp(17px, 5vw, 20px); }

  .svc-cta-links { margin-top: 36px; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-hero-path,
  .svc-problem-path,
  .svc-concept-path,
  .svc-position-path,
  .svc-team-path,
  .svc-support-path,
  .svc-scope-path,
  .svc-style-path,
  .svc-target-path,
  .svc-fee-path,
  .svc-start-path {
    transition: none;
    stroke-dashoffset: 0;
  }
}

/* =========================================================
   CONTACTページ（/contact）：まずは、組織の話から。
   思想：フォームページであっても、GOLD Flowは細く控えめに。
         黒い罫線・太いライン・カード・囲みは一切使わない。
========================================================= */

.cnt-hero,
.cnt-noanswer,
.cnt-share,
.cnt-form,
.cnt-after,
.cnt-closing {
  position: relative;
  background: var(--white);
  overflow: hidden;
}

/* ---------- 共通：Flowラッパー / パス基本スタイル ---------- */
.cnt-hero-flow,
.cnt-share-flow,
.cnt-closing-flow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.cnt-hero-flow svg,
.cnt-share-flow svg,
.cnt-closing-flow svg { width: 100%; height: 100%; }

.cnt-hero-path,
.cnt-share-path,
.cnt-closing-path {
  fill: none;
  stroke: var(--gold);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 2.6s ease, opacity 2s ease;
}

/* ---- HERO：まだ方向が揃っていない、複数の細いFlow ---- */
.cnt-hero-path-1 { stroke-width: 1.1; }
.cnt-hero-path-2 { stroke-width: 0.9; }
.cnt-hero-path-3 { stroke-width: 1; }
.cnt-hero.in-view .cnt-hero-path-1 { stroke-dashoffset: 0; opacity: 0.3; transition-delay: 0.1s; }
.cnt-hero.in-view .cnt-hero-path-2 { stroke-dashoffset: 0; opacity: 0.22; transition-delay: 0.3s; }
.cnt-hero.in-view .cnt-hero-path-3 { stroke-dashoffset: 0; opacity: 0.26; transition-delay: 0.5s; }

/* ---- SHARE：対話の中で少しずつ方向を持ち始めるが、まだ1本にはならない ---- */
.cnt-share-path-1 { stroke-width: 1; }
.cnt-share-path-2 { stroke-width: 0.9; }
.cnt-share.in-view .cnt-share-path-1 { stroke-dashoffset: 0; opacity: 0.24; transition-delay: 0s; }
.cnt-share.in-view .cnt-share-path-2 { stroke-dashoffset: 0; opacity: 0.2; transition-delay: 0.2s; }

/* ---- CLOSING：静かに並走する2本の細いFlow ---- */
.cnt-closing-path-1 { stroke-width: 1; }
.cnt-closing-path-2 { stroke-width: 0.9; }
.cnt-closing.in-view .cnt-closing-path-1 { stroke-dashoffset: 0; opacity: 0.26; transition-delay: 0s; }
.cnt-closing.in-view .cnt-closing-path-2 { stroke-dashoffset: 0; opacity: 0.2; transition-delay: 0.2s; }

/* =========================================================
   SECTION 01：CONTACT HERO
========================================================= */
.cnt-hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: 200px 0 120px;
}
.cnt-hero-inner { position: relative; z-index: 1; max-width: 760px; }
.cnt-hero-eyebrow {
  display: block;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: 0.34em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 36px;
  text-transform: uppercase;
}
.cnt-hero-title {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.4;
  margin-bottom: 52px;
}
.cnt-hero-sub {
  max-width: 620px;
  margin-bottom: 52px;
}
.cnt-hero-sub p {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 2;
  opacity: 0.82;
  margin-bottom: 26px;
}
.cnt-hero-sub p:last-child { margin-bottom: 0; }
.cnt-hero-key {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.9;
}

/* =========================================================
   SECTION 02：YOU DON'T NEED THE ANSWER
========================================================= */
.cnt-noanswer { padding: 160px 0; }
.cnt-noanswer-num {
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 28px;
}
.cnt-noanswer-title {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.6;
  margin-bottom: 72px;
}
.cnt-noanswer-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 72px;
}
.cnt-noanswer-item {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(17px, 1.8vw, 22px);
  opacity: 0.85;
}
.cnt-noanswer-item:nth-child(2) { margin-left: 6%; }
.cnt-noanswer-item:nth-child(3) { margin-left: 2%; }
.cnt-noanswer-item:nth-child(4) { margin-left: 8%; }
.cnt-noanswer-item:nth-child(5) { margin-left: 3%; }
.cnt-noanswer-body {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 2;
  opacity: 0.72;
  margin-bottom: 24px;
  max-width: 620px;
}
.cnt-noanswer-closing {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.9;
  margin-top: 40px;
}

/* =========================================================
   SECTION 03：WHAT TO SHARE
========================================================= */
.cnt-share { padding: 160px 0; }
.cnt-share-num {
  position: relative; z-index: 1;
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 28px;
}
.cnt-share-title {
  position: relative; z-index: 1;
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.6;
  margin-bottom: 72px;
}
.cnt-share-list {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 72px;
}
.cnt-share-item {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(17px, 1.7vw, 21px);
  opacity: 0.85;
}
.cnt-share-item:nth-child(2) { margin-left: 5%; }
.cnt-share-item:nth-child(4) { margin-left: 7%; }
.cnt-share-key {
  position: relative; z-index: 1;
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.9;
}

/* =========================================================
   SECTION 04：CONTACT FORM
========================================================= */
.cnt-form { padding: 160px 0 180px; }
.cnt-form-num {
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 28px;
}
.cnt-form-title {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.6;
  margin-bottom: 64px;
}
.cnt-form-body { max-width: 720px; }

.cnt-form-row { margin-bottom: 34px; }
.cnt-form-row-main { margin-bottom: 40px; }
.cnt-form-row label,
.cnt-form-consent span {
  display: block;
  font-weight: 700;
  font-size: clamp(16px, 1.2vw, 18px);
  color: var(--navy);
  letter-spacing: 0.03em;
  margin-bottom: 14px;
}
.cnt-form-optional { font-weight: 400; opacity: 0.5; margin-left: 6px; font-size: 0.85em; }

.cnt-form-row input,
.cnt-form-row select,
.cnt-form-row textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: var(--font);
  font-size: clamp(16px, 1.1vw, 18px);
  color: var(--navy);
  padding: 14px 2px;
  line-height: 1.8;
  min-height: 44px;
  border-radius: 0;
  transition: border-color 0.3s ease;
}
.cnt-form-row select { cursor: pointer; }
.cnt-form-row textarea { resize: vertical; min-height: 180px; }
.cnt-form-row input:focus,
.cnt-form-row select:focus,
.cnt-form-row textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.cnt-form-row input.has-error,
.cnt-form-row textarea.has-error {
  border-color: #B3261E;
}

.cnt-form-error {
  display: none;
  font-size: 13.5px;
  color: #B3261E;
  margin-top: 10px;
  line-height: 1.7;
}
.cnt-form-error.is-visible { display: block; }

.cnt-form-consent { margin-bottom: 30px; }
.cnt-form-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.cnt-form-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 20px;
  accent-color: var(--navy);
  cursor: pointer;
}
.cnt-form-checkbox span { margin-bottom: 0; font-weight: 400; font-size: 15.5px; }

.cnt-form-privacy-note {
  font-size: 13.5px;
  color: var(--navy);
  opacity: 0.7;
  margin-bottom: 30px;
  line-height: 1.9;
}
.cnt-form-privacy-note a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s ease;
}
.cnt-form-privacy-note a:hover { color: var(--gold); }

/* スパム対策：ハニーポット（人間の目には見えない） */
.cnt-form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cnt-form-submit {
  display: inline-block;
  min-height: 44px;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.08em;
  padding: 18px 56px;
  border: 1px solid var(--navy);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.cnt-form-submit:hover {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}
.cnt-form-submit:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.cnt-form-status {
  margin-top: 26px;
  font-size: 15px;
  color: var(--navy);
  display: none;
}
.cnt-form-status.is-visible { display: block; }
.cnt-form-status.is-error { color: #B3261E; }

.cnt-form-note { font-size: 13.5px; color: var(--navy); opacity: 0.55; margin-top: 26px; }

/* =========================================================
   SECTION 05：AFTER SUBMIT
========================================================= */
.cnt-after { padding: 140px 0; }
.cnt-after-label {
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 40px;
}
.cnt-after-body {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 2;
  opacity: 0.75;
  margin-bottom: 22px;
  max-width: 640px;
}
.cnt-after-flow-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 44px;
}
.cnt-after-flow-steps span {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--navy);
  opacity: 0.5;
  font-weight: 700;
}

/* =========================================================
   SECTION 06：CLOSING
========================================================= */
.cnt-closing {
  padding: 200px 0 220px;
  display: flex;
  align-items: center;
  min-height: 60vh;
}
.cnt-closing-inner { position: relative; z-index: 1; }
.cnt-closing-line {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.9;
  margin-bottom: 96px;
}
.cnt-closing-line-2 {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.9;
}
.cnt-closing-line-2 .gold { color: var(--gold); }

/* ---------------------------------------------------------
   CONTACTページ：モバイル
--------------------------------------------------------- */
@media (max-width: 768px) {
  .cnt-hero { min-height: auto; padding: 130px 0 90px; }
  .cnt-hero-eyebrow { font-size: 15px; margin-bottom: 24px; }
  .cnt-hero-title { font-size: clamp(32px, 9vw, 42px); margin-bottom: 36px; }
  .cnt-hero-sub { margin-bottom: 36px; }
  .cnt-hero-sub p { font-size: clamp(15.5px, 4.4vw, 17px); margin-bottom: 20px; }
  .cnt-hero-key { font-size: clamp(16px, 4.6vw, 19px); }

  .cnt-noanswer { padding: 90px 0; }
  .cnt-noanswer-title { font-size: clamp(24px, 7.4vw, 30px); margin-bottom: 48px; }
  .cnt-noanswer-list { gap: 22px; margin-bottom: 48px; }
  .cnt-noanswer-item { font-size: clamp(15.5px, 4.6vw, 18px); margin-left: 0 !important; }
  .cnt-noanswer-body { font-size: clamp(14.5px, 4.2vw, 16px); }
  .cnt-noanswer-closing { font-size: clamp(16px, 4.6vw, 18px); }

  .cnt-share { padding: 90px 0; }
  .cnt-share-title { font-size: clamp(24px, 7.4vw, 30px); margin-bottom: 48px; }
  .cnt-share-list { gap: 20px; margin-bottom: 48px; }
  .cnt-share-item { font-size: clamp(15px, 4.4vw, 17px); margin-left: 0 !important; }
  .cnt-share-key { font-size: clamp(16px, 4.8vw, 19px); }

  .cnt-form { padding: 90px 0 110px; }
  .cnt-form-title { font-size: clamp(24px, 7.4vw, 30px); margin-bottom: 44px; }
  .cnt-form-body { max-width: 100%; }
  .cnt-form-row { margin-bottom: 28px; }
  .cnt-form-row input,
  .cnt-form-row select,
  .cnt-form-row textarea { font-size: 16px; }
  .cnt-form-submit { width: 100%; text-align: center; padding: 16px 24px; }

  .cnt-after { padding: 80px 0; }
  .cnt-after-body { font-size: clamp(14.5px, 4.2vw, 16px); }

  .cnt-closing { padding: 110px 0 120px; min-height: auto; }
  .cnt-closing-line { font-size: clamp(19px, 5.6vw, 24px); margin-bottom: 56px; }
  .cnt-closing-line-2 { font-size: clamp(20px, 5.8vw, 26px); }
}

@media (prefers-reduced-motion: reduce) {
  .cnt-hero-path,
  .cnt-share-path,
  .cnt-closing-path {
    transition: none;
    stroke-dashoffset: 0;
  }
}

/* =========================================================
   SECTION 17：CONTACT（組織のこと、少し話してみませんか。）
   役割：service.html / profile.html で使用する共通CONTACT CTA
========================================================= */
.section-contact-cta {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  overflow: visible;
  background: var(--white);
  padding: 160px 0 120px;
}

.cc-flow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.cc-flow svg { width: 100%; height: 100%; }
.cc-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 2.4s ease, opacity 1.8s ease;
}
.section-contact-cta.in-view .cc-path-1 { stroke-dashoffset: 0; opacity: 0.3; transition-delay: 0s; }
.section-contact-cta.in-view .cc-path-2 { stroke-dashoffset: 0; opacity: 0.24; transition-delay: 0.1s; }
.section-contact-cta.in-view .cc-path-3 { stroke-dashoffset: 0; opacity: 0.3; transition-delay: 0.2s; }

.cc-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
}
.cc-title {
  font-weight: 700;
  color: var(--navy);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 44px;
}
.cc-title-1 { font-size: clamp(38px, 3.4vw, 48px); }
.cc-title-2 { font-size: clamp(48px, 4.6vw, 62px); line-height: 1.3; }
.cc-title .gold { color: var(--gold); }

.cc-sub-1 {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.9;
  margin-bottom: 14px;
}
.cc-sub-2 {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(28px, 2.3vw, 36px);
  line-height: 1.9;
  margin-bottom: 52px;
}

.cc-cta { font-size: 20px; }

@media (max-width: 768px) {
  .section-contact-cta { min-height: auto; padding: 100px 0 70px; }
  .cc-title { margin-bottom: 32px; }
  .cc-title-1 { font-size: clamp(30px, 8vw, 38px); }
  .cc-title-2 { font-size: clamp(36px, 10vw, 46px); }
  .cc-sub-1 { font-size: clamp(20px, 5.2vw, 25px); margin-bottom: 10px; }
  .cc-sub-2 { font-size: clamp(24px, 6.2vw, 30px); margin-bottom: 36px; }
  .cc-cta { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-path { transition: none; stroke-dashoffset: 0; }
}

/* =========================================================
   FOOTER
========================================================= */
footer { background: var(--white); border-top: 1px solid var(--line); padding: 70px 0 34px; }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 34px; padding-bottom: 44px; }
.footer-logo img { height: 32px; margin-bottom: 16px; }
.footer-logo img.footer-logo-mark { height: 44px; width: auto; }
.footer-inner .small-text { max-width: 280px; }
.footer-nav { display: flex; gap: 32px; flex-wrap: wrap; }
.footer-nav a { font-size: 13px; font-weight: 700; color: var(--navy); }
.footer-nav a:hover { color: var(--gold); }
.footer-contact { display: flex; justify-content: center; gap: 10px; font-size: 12.5px; color: var(--navy); opacity: 0.65; margin-bottom: 18px; flex-wrap: wrap; }
.footer-contact a:hover { color: var(--gold); }
.footer-contact-sep { opacity: 0.4; }
.footer-bottom { padding-top: 26px; border-top: 1px solid rgba(15,39,71,0.1); text-align: center; font-size: 12px; color: var(--navy); opacity: 0.55; letter-spacing: 0.05em; }

/* 現在地インジケーター（現在表示中のページへのナビにGOLD下線を常時表示） */
nav#main-nav a.nav-current::after,
#mobile-nav a.nav-current::after {
  width: 100%;
  background: var(--gold);
}
#mobile-nav a.nav-current { color: var(--gold); position: relative; }
#mobile-nav a.nav-current::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: var(--gold);
}

/* =========================================================
   REVEAL ANIMATION（控えめ）
========================================================= */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 1s ease, transform 1s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* =========================================================
   RESPONSIVE — GLOBAL NAV
========================================================= */
@media (max-width: 860px) {
  nav#main-nav { display: none; }
  .nav-cta .header-contact { display: none; }
  .hamburger { display: flex; }
}

/* =========================================================
   MESSAGE PAGE（代表メッセージ｜エディトリアルページ）
   思想：TOPページより静かに。主役は文章。写真は最小限。
   本文幅は720〜820px、KEY MESSAGEのみ900〜1100pxまで許容。
========================================================= */
.msg-page { background: var(--white); }

.msg-container {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 28px;
}
.msg-container-wide {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---- MESSAGE HERO ---- */
.msg-hero {
  position: relative;
  padding: 190px 0 140px;
  overflow: visible;
  background: var(--white);
}
.msg-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: center;
  gap: 48px;
}
.msg-hero-eyebrow {
  display: block;
  font-size: 13px;
  letter-spacing: 0.4em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 40px;
}
.msg-hero-title {
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 56px;
}
.msg-hero-title .msg-hero-line1 { display: block; color: var(--navy); font-size: clamp(32px, 4vw, 56px); }
.msg-hero-title .msg-hero-line2 { display: block; color: var(--gold); font-size: clamp(38px, 4.6vw, 76px); margin-top: 6px; }
.msg-hero-lead p {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 2.05;
  color: var(--navy);
  max-width: 620px;
  margin-bottom: 28px;
}
.msg-hero-photo {
  position: relative;
  align-self: end;
}
.msg-hero-photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(6%);
}
.msg-hero-photo-cap {
  margin-top: 14px;
  font-size: 12px;
  color: var(--navy);
  opacity: 0.5;
  letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  .msg-hero { padding: 150px 0 90px; }
  .msg-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .msg-hero-photo { order: -1; max-width: 220px; margin: 0 auto; }
  .msg-hero-title .msg-hero-line1 { font-size: clamp(26px, 7vw, 34px); }
  .msg-hero-title .msg-hero-line2 { font-size: clamp(34px, 9vw, 46px); }
}

/* ---- MESSAGE 共通：章 ---- */
.msg-chapter {
  position: relative;
  padding: 130px 0;
  overflow: visible;
}
@media (max-width: 900px) {
  .msg-chapter { padding: 80px 0; }
}

.msg-chapter-num {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin-bottom: 26px;
}
.msg-chapter-title {
  font-weight: 700;
  color: var(--navy);
  line-height: 1.5;
  font-size: clamp(30px, 3.6vw, 50px);
  margin-bottom: 56px;
}
.msg-chapter-title .gold { color: var(--gold); }
.msg-chapter-title-xl { font-size: clamp(34px, 4.4vw, 58px); }

@media (max-width: 900px) {
  .msg-chapter-title { font-size: clamp(24px, 7.4vw, 32px); margin-bottom: 36px; }
  .msg-chapter-title-xl { font-size: clamp(26px, 8vw, 36px); }
}

.msg-body p {
  font-size: clamp(16.5px, 1.15vw, 19.5px);
  line-height: 2.0;
  color: var(--navy);
  margin-bottom: 30px;
}
@media (max-width: 900px) {
  .msg-body p { font-size: 16px; line-height: 1.95; margin-bottom: 24px; }
}

/* KEY MESSAGE：本文より大きく強く。幅も少し広げる */
.msg-key {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.75;
  max-width: 920px;
  margin: 56px 0;
}
.msg-key .gold { color: var(--gold); }
@media (max-width: 900px) {
  .msg-key { font-size: clamp(22px, 6.8vw, 28px); margin: 36px 0; }
}

/* 短文の連続表示（リズム段） */
.msg-rhythm {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 56px 0;
}
.msg-rhythm p {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.7;
}
@media (max-width: 900px) {
  .msg-rhythm { gap: 16px; margin: 36px 0; }
  .msg-rhythm p { font-size: 18px; }
}

/* 余白の中に単語を散らして配置（カード化しない） */
.msg-scatter {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 34px;
  margin: 52px 0;
}
.msg-scatter span {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(17px, 1.4vw, 21px);
  opacity: 0.85;
}
@media (max-width: 900px) {
  .msg-scatter { gap: 14px 22px; margin: 32px 0; }
}

/* 中央寄せの大きな一語（社外キャプテン™ 等） */
.msg-standalone {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.3;
  margin: 64px 0;
}
@media (max-width: 900px) {
  .msg-standalone { font-size: clamp(30px, 9vw, 42px); margin: 40px 0; }
}

.msg-gap-l { height: 90px; }
.msg-gap-xl { height: 140px; }
@media (max-width: 900px) {
  .msg-gap-l { height: 56px; }
  .msg-gap-xl { height: 84px; }
}

/* ---- MESSAGE内 KNOWAVE ブランド提示 ---- */
.msg-brand {
  margin: 70px 0;
}
.msg-brand img { height: 30px; margin-bottom: 20px; }
.msg-brand-tagline {
  font-size: 14px;
  color: var(--navy);
  opacity: 0.6;
  letter-spacing: 0.04em;
  margin-bottom: 36px;
}
/* 「そのために作ったのが、」直後のロゴを大きく提示する専用スタイル */
.msg-brand-large { margin: 90px 0; }
.msg-brand.msg-brand-large img.msg-brand-logo-large {
  height: auto;
  width: 100%;
  max-width: 620px;
  margin-bottom: 48px;
}
@media (max-width: 900px) {
  .msg-brand-large { margin: 56px 0; }
  .msg-brand.msg-brand-large img.msg-brand-logo-large { max-width: 100%; margin-bottom: 32px; }
}
.msg-brand-mission {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.75;
}
.msg-brand-mission .gold { color: var(--gold); }

/* ---- 一行ずつ見せる連続コピー（最終部） ---- */
.msg-finale-lines {
  display: flex;
  flex-direction: column;
  gap: 34px;
  margin: 60px 0;
}
.msg-finale-lines p {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .msg-finale-lines { gap: 24px; margin: 40px 0; }
  .msg-finale-lines p { font-size: 19px; }
}

/* ---- 代表署名 ---- */
.msg-signature {
  margin-top: 90px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.msg-signature-org { font-size: 14px; color: var(--navy); opacity: 0.6; margin-bottom: 10px; }
.msg-signature-name { font-weight: 700; color: var(--navy); font-size: clamp(20px, 2vw, 28px); }
.msg-philosophy-link {
  margin-top: 46px;
  font-size: 13.5px;
  color: var(--navy);
  opacity: 0.75;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.msg-philosophy-link .link-action { font-size: 13.5px; }
@media (max-width: 900px) {
  .msg-signature { margin-top: 60px; padding-top: 30px; }
  .msg-philosophy-link { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 32px; }
}

/* ---- MESSAGE最後のCTA ---- */
.msg-cta-section {
  padding: 120px 0 160px;
}
.msg-cta-lead {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--navy);
  margin-bottom: 34px;
}
@media (max-width: 900px) {
  .msg-cta-section { padding: 80px 0 100px; }
}

/* ---- MESSAGE Flow（控えめ・人生の複数経験が交わりながら1本のFlowへ） ---- */
.msg-flow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.msg-flow svg { width: 100%; height: 100%; }
.msg-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 2.2s ease, opacity 1.6s ease;
}
.msg-chapter.in-view .msg-path,
.msg-hero.in-view .msg-path,
.msg-cta-section.in-view .msg-path {
  stroke-dashoffset: 0;
}
.msg-chapter.in-view .msg-path-a,
.msg-hero.in-view .msg-path-a { opacity: 0.32; transition-delay: 0s; }
.msg-chapter.in-view .msg-path-b,
.msg-hero.in-view .msg-path-b { opacity: 0.24; transition-delay: 0.1s; }
.msg-chapter.in-view .msg-path-c { opacity: 0.28; transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .msg-path { transition: none; stroke-dashoffset: 0; }
  .msg-hero-photo img { transform: none !important; }
}

/* =========================================================
   「社外キャプテン™」表記統一ルール（サイト全体共通）
   思想：サービス名は必ず「社外キャプテン」＝NAVY／「TM」＝GOLDの
   組み合わせで統一する。両者の文字サイズ比率もHERO（一番最初に
   登場する箇所）を基準として全箇所そろえる（TMはNAVY本体の0.4em）。
========================================================= */
.tm-mark sup,
.hero-service sup,
.pf-final-2 sup,
.sb-final-brand sup,
.msg-standalone sup,
.msg-chapter-title sup,
.msg-body sup,
.headline sup,
.privacy-text sup,
.abt-body sup,
.abt-business-service sup,
.abt-company-item dd sup,
.svc-hero-name sup,
.svc-hero-connect-body sup,
.svc-hero-sub-body sup,
.svc-concept-title sup,
.svc-concept-text sup,
.svc-position-center-name sup,
.svc-position-text sup,
.svc-team-final sup,
.svc-fee-tier-name sup,
.svc-start-item sup,
.pfl-hero-role sup,
.pfl-career-event sup,
.pfl-now-body sup,
.pfl-now-link sup,
.pfl-story-body sup,
.top-svc-name sup,
.top-bridge-sub sup,
.top-msg-rep-role sup,
.cc-title sup {
  font-size: 0.4em;
  color: var(--gold);
  margin-left: 2px;
  font-weight: 700;
}

/* =========================================================
   PRIVACY POLICY PAGE（プライバシーポリシー）
   思想：ブランドストーリーページではなく実務ページ。
   信頼感・透明性・読みやすさを最優先。Flowは1〜2本だけ、
   演出は最小限に留め、静的な縦スクロールで完結させる。
========================================================= */
.privacy-page { background: var(--white); }

/* ---- HERO（コンパクト：40〜55vh程度） ---- */
.privacy-hero {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: center;
  padding: 190px 0 60px;
  overflow: visible;
}
.privacy-hero-flow {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.privacy-hero-flow svg { width: 100%; height: 100%; }
.privacy-hero-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 2.6s ease, opacity 2s ease;
}
.privacy-hero.in-view .privacy-hero-path-1 { stroke-dashoffset: 0; opacity: 0.28; transition-delay: 0.1s; }
.privacy-hero.in-view .privacy-hero-path-2 { stroke-dashoffset: 0; opacity: 0.2; transition-delay: 0.3s; }

.privacy-hero-inner { position: relative; z-index: 1; }
.privacy-eyebrow {
  display: block;
  font-size: 13px;
  letter-spacing: 0.36em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 26px;
  text-transform: uppercase;
}
.privacy-title-en {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(38px, 4.6vw, 58px);
  line-height: 1.3;
  margin-bottom: 14px;
}
.privacy-title-ja {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(19px, 1.7vw, 25px);
  opacity: 0.75;
  letter-spacing: 0.06em;
}

/* ---- 本文コンテナ（760〜900px） ---- */
.privacy-container {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px;
}

.privacy-enacted {
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--navy);
  opacity: 0.6;
  margin: 46px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

/* ---- 本文セクション ---- */
.privacy-body { padding: 70px 0 40px; }
.privacy-intro {
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 2;
  color: var(--navy);
  margin-bottom: 20px;
}

.privacy-section {
  padding: 34px 0;
  border-top: 1px solid var(--line);
}
.privacy-section:first-of-type { border-top: none; padding-top: 10px; }
.privacy-num {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 14px;
}
.privacy-section h2 {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.5;
  margin-bottom: 22px;
}
.privacy-text {
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.95;
  color: var(--navy);
  margin-bottom: 20px;
}
.privacy-text:last-child { margin-bottom: 0; }
.privacy-text a { border-bottom: 1px solid var(--navy); transition: color 0.3s ease, border-color 0.3s ease; }
.privacy-text a:hover { color: var(--gold); border-color: var(--gold); }

/* ---- 事業者情報（縦型・TABLE禁止） ---- */
.privacy-info-list { margin-top: 6px; }
.privacy-info-item { margin-bottom: 26px; }
.privacy-info-item:last-child { margin-bottom: 0; }
.privacy-info-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  opacity: 0.55;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.privacy-info-value {
  font-size: clamp(16px, 1.15vw, 18px);
  color: var(--navy);
  line-height: 1.8;
}

/* ---- 番号付きリスト（利用目的・第三者提供など） ---- */
.privacy-list {
  margin: 0 0 20px;
  padding-left: 0;
  counter-reset: privacy-li;
}
.privacy-list li {
  position: relative;
  list-style: none;
  padding-left: 34px;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.95;
  color: var(--navy);
  margin-bottom: 14px;
  counter-increment: privacy-li;
}
.privacy-list li::before {
  content: counter(privacy-li) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--navy);
  opacity: 0.5;
}
.privacy-list li:last-child { margin-bottom: 0; }

/* ---- お問い合わせ窓口 ---- */
.privacy-contact-block { margin-top: 8px; }
.privacy-contact-org { font-weight: 700; color: var(--navy); font-size: clamp(17px, 1.2vw, 19px); margin-bottom: 6px; }
.privacy-contact-desk { font-size: clamp(15.5px, 1.1vw, 17px); color: var(--navy); opacity: 0.85; margin-bottom: 22px; }
.privacy-contact-note { font-size: 13.5px; color: var(--navy); opacity: 0.55; margin-top: 18px; }

/* ---- FOOTERへの接続余白 ---- */
.privacy-footer-gap { height: 120px; }

@media (max-width: 900px) {
  .privacy-hero { min-height: 40vh; padding: 130px 0 40px; }
  .privacy-title-en { font-size: clamp(34px, 9vw, 42px); }
  .privacy-title-ja { font-size: clamp(18px, 5vw, 22px); }
  .privacy-container { padding: 0 24px; }
  .privacy-body { padding: 50px 0 20px; }
  .privacy-section { padding: 26px 0; }
  .privacy-section h2 { font-size: clamp(22px, 6vw, 26px); margin-bottom: 16px; }
  .privacy-text, .privacy-list li, .privacy-info-value { font-size: clamp(15px, 4vw, 17px); }
  .privacy-footer-gap { height: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .privacy-hero-path { transition: none; stroke-dashoffset: 0; }
}

/* =========================================================
   PHILOSOPHYページ
   思想：Purpose→Promise→Mission→Visionを4枚の別々のカードではなく、
   一本のGOLD Flowが少しずつ枝分かれし、社会全体へ広がっていく
   一つの思想体験として構成する。WHITE基調・NAVY本文・GOLDは
   最小限（章番号・キーワード・細いFlowのみ）。写真・アイコン・
   カード・図形は一切使用しない。
========================================================= */
.philosophy-page { background: var(--white); }

.phl-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ---- 共通：Flow（1本→2〜3本→3〜5本→5〜8本 と静かに増えていく） ---- */
.phl-flow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.phl-flow svg { width: 100%; height: 100%; }
.phl-path {
  fill: none;
  stroke: var(--gold);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 2.8s ease, opacity 2s ease;
}
.phl-hero-path { stroke-width: 0.8; }
.phl-purpose-path { stroke-width: 0.9; }
.phl-promise-path-1, .phl-promise-path-2, .phl-promise-path-3 { stroke-width: 0.8; }
.phl-mission-path-1, .phl-mission-path-2, .phl-mission-path-3, .phl-mission-path-4 { stroke-width: 0.8; }
.phl-mission-spiral { stroke-width: 0.7; }
.phl-vision-path-1, .phl-vision-path-2, .phl-vision-path-3, .phl-vision-path-4,
.phl-vision-path-5, .phl-vision-path-6, .phl-vision-path-7 { stroke-width: 0.7; }
.phl-closing-path-1, .phl-closing-path-2, .phl-closing-path-3 { stroke-width: 0.8; }

.phl-hero.in-view .phl-hero-path { stroke-dashoffset: 0; opacity: 0.4; }

.phl-purpose.in-view .phl-purpose-path { stroke-dashoffset: 0; opacity: 0.5; }

.phl-promise.in-view .phl-promise-path-1 { stroke-dashoffset: 0; opacity: 0.45; transition-delay: 0s; }
.phl-promise.in-view .phl-promise-path-2 { stroke-dashoffset: 0; opacity: 0.35; transition-delay: 0.15s; }
.phl-promise.in-view .phl-promise-path-3 { stroke-dashoffset: 0; opacity: 0.28; transition-delay: 0.3s; }

.phl-mission.in-view .phl-mission-path-1 { stroke-dashoffset: 0; opacity: 0.45; transition-delay: 0s; }
.phl-mission.in-view .phl-mission-path-2 { stroke-dashoffset: 0; opacity: 0.38; transition-delay: 0.12s; }
.phl-mission.in-view .phl-mission-path-3 { stroke-dashoffset: 0; opacity: 0.32; transition-delay: 0.24s; }
.phl-mission.in-view .phl-mission-path-4 { stroke-dashoffset: 0; opacity: 0.26; transition-delay: 0.36s; }
.phl-mission.in-view .phl-mission-spiral { stroke-dashoffset: 0; opacity: 0.3; transition-delay: 0.5s; }

.phl-vision.in-view .phl-vision-path-1 { stroke-dashoffset: 0; opacity: 0.4; transition-delay: 0s; }
.phl-vision.in-view .phl-vision-path-2 { stroke-dashoffset: 0; opacity: 0.36; transition-delay: 0.1s; }
.phl-vision.in-view .phl-vision-path-3 { stroke-dashoffset: 0; opacity: 0.32; transition-delay: 0.2s; }
.phl-vision.in-view .phl-vision-path-4 { stroke-dashoffset: 0; opacity: 0.28; transition-delay: 0.3s; }
.phl-vision.in-view .phl-vision-path-5 { stroke-dashoffset: 0; opacity: 0.25; transition-delay: 0.4s; }
.phl-vision.in-view .phl-vision-path-6 { stroke-dashoffset: 0; opacity: 0.22; transition-delay: 0.5s; }
.phl-vision.in-view .phl-vision-path-7 { stroke-dashoffset: 0; opacity: 0.2; transition-delay: 0.6s; }

.phl-closing.in-view .phl-closing-path-1 { stroke-dashoffset: 0; opacity: 0.32; transition-delay: 0s; }
.phl-closing.in-view .phl-closing-path-2 { stroke-dashoffset: 0; opacity: 0.26; transition-delay: 0.15s; }
.phl-closing.in-view .phl-closing-path-3 { stroke-dashoffset: 0; opacity: 0.2; transition-delay: 0.3s; }

/* ---- SECTION 01：HERO（90〜110vh、非常に大きなWHITE余白） ---- */
.phl-hero {
  position: relative;
  min-height: 96vh;
  display: flex;
  align-items: center;
  padding: 200px 0 100px;
  overflow: visible;
}
.phl-hero-inner { position: relative; z-index: 1; max-width: 820px; }
.phl-eyebrow {
  display: block;
  font-size: 14px;
  letter-spacing: 0.38em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 40px;
  text-transform: uppercase;
}
.phl-hero-title {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(40px, 5.4vw, 66px);
  line-height: 1.55;
  margin-bottom: 46px;
}
.phl-hero-words {
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: 0.1em;
  color: var(--navy);
  opacity: 0.5;
  font-weight: 400;
}

/* ---- 共通：各理念SECTION ---- */
.phl-section {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 140px 0;
  overflow: visible;
}
.phl-purpose { min-height: 110vh; }
.phl-promise { min-height: 112vh; }
.phl-mission { min-height: 122vh; }
.phl-vision { min-height: 132vh; }

.phl-section-inner { position: relative; z-index: 1; max-width: 760px; }
.phl-align-left { margin-left: 0; margin-right: auto; text-align: left; }
.phl-align-right { margin-left: auto; margin-right: 0; text-align: right; }

.phl-num {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 20px;
}
.phl-label {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--navy);
  margin-bottom: 10px;
}
.phl-sublabel {
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.06em;
  color: var(--navy);
  opacity: 0.5;
  margin-bottom: 44px;
}
.phl-statement {
  font-weight: 700;
  line-height: 1.5;
  font-size: clamp(38px, 5vw, 72px);
}
.phl-purpose .phl-statement { font-size: clamp(40px, 6vw, 88px); }
.phl-statement .phl-navy { color: var(--navy); }
.phl-statement .phl-gold { color: var(--gold); }

/* ---- SECTION 06：CLOSING（大きなWHITE余白 → KNOWAVEロゴ） ---- */
.phl-closing {
  min-height: auto;
  padding: 200px 0 180px;
  display: block;
  text-align: center;
}
.phl-closing-inner { position: relative; z-index: 1; }
.phl-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.phl-closing-logo img { height: 40px; width: auto; margin: 0 auto 22px; }
.phl-closing-tagline {
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.08em;
  color: var(--navy);
  opacity: 0.55;
  margin-bottom: 64px;
}
.phl-end-links {
  display: flex;
  justify-content: center;
  gap: 44px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .phl-container { padding: 0 24px; }
  .phl-hero { min-height: 92vh; padding: 150px 0 80px; }
  .phl-eyebrow { font-size: 12px; margin-bottom: 26px; }
  .phl-hero-title { font-size: clamp(34px, 9vw, 42px); line-height: 1.5; margin-bottom: 32px; }
  .phl-hero-words { font-size: clamp(14px, 4vw, 16px); }

  .phl-section { min-height: auto; padding: 90px 0; }
  .phl-purpose, .phl-promise { min-height: auto; padding: 100px 0; }
  .phl-mission, .phl-vision { min-height: auto; padding: 110px 0; }
  .phl-align-left, .phl-align-right { text-align: left; margin-left: 0; margin-right: 0; }

  .phl-label { font-size: 16px; }
  .phl-sublabel { font-size: 13px; margin-bottom: 30px; }
  .phl-statement { font-size: clamp(30px, 9vw, 40px); }
  .phl-purpose .phl-statement { font-size: clamp(32px, 12vw, 52px); }

  .phl-closing { padding: 120px 0 110px; }
  .phl-closing-logo img { height: 30px; }
  .phl-closing-tagline { margin-bottom: 40px; }
  .phl-end-links { flex-direction: column; align-items: center; gap: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .phl-path { transition: none; stroke-dashoffset: 0; }
}

/* =========================================================
   ABOUTページ（WHO WE ARE）
   思想：ABOUT＝WHO WE ARE。Purpose/Promise/Mission/Visionの
   思想（PHILOSOPHY）とは切り離し、「KNOWAVEとは何者か／名前の意味／
   何をしている会社か／会社概要」の4トピックだけに絞る。
   GOLD Flowは全ページ中もっとも控えめ（低opacity・少ない本数）。
   写真・アイコン・カード・罫線テーブルは使用しない。
========================================================= */
.about-page { background: var(--white); }

.abt-container { max-width: 1080px; margin: 0 auto; padding: 0 32px; }

/* ---- 共通：Flow（控えめ・PHILOSOPHYより低い本数と低いopacity） ---- */
.abt-flow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.abt-flow svg { width: 100%; height: 100%; }
.abt-path {
  fill: none;
  stroke: var(--gold);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 2.8s ease, opacity 2s ease;
}
.abt-hero-path-1, .abt-hero-path-2, .abt-hero-path-3 { stroke-width: 0.7; }
.abt-name-path-1, .abt-name-path-2 { stroke-width: 0.7; }

.abt-hero.in-view .abt-hero-path-1 { stroke-dashoffset: 0; opacity: 0.28; transition-delay: 0s; }
.abt-hero.in-view .abt-hero-path-2 { stroke-dashoffset: 0; opacity: 0.22; transition-delay: 0.15s; }
.abt-hero.in-view .abt-hero-path-3 { stroke-dashoffset: 0; opacity: 0.18; transition-delay: 0.3s; }

.abt-name.in-view .abt-name-path-1 { stroke-dashoffset: 0; opacity: 0.2; transition-delay: 0s; }
.abt-name.in-view .abt-name-path-2 { stroke-dashoffset: 0; opacity: 0.32; transition-delay: 0.2s; }

/* ---- SECTION 01：ABOUT HERO（80〜100vh、写真なし） ---- */
.abt-hero {
  position: relative;
  min-height: 84vh;
  display: flex;
  align-items: center;
  padding: 190px 0 90px;
  overflow: visible;
}
.abt-hero-inner { position: relative; z-index: 1; max-width: 820px; }
.abt-eyebrow {
  display: block;
  font-size: 16px;
  letter-spacing: 0.36em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 34px;
  text-transform: uppercase;
}
.abt-hero-title {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(54px, 5.8vw, 72px);
  line-height: 1.5;
  margin-bottom: 40px;
}
.abt-hero-sub {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 2;
  opacity: 0.85;
  max-width: 640px;
}

/* ---- 共通：各SECTION ---- */
.abt-section {
  position: relative;
  padding: 150px 0;
  overflow: visible;
  background: var(--white);
}
.abt-section-inner { position: relative; z-index: 1; max-width: 760px; }
.abt-num {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 18px;
}
.abt-label {
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--navy);
  opacity: 0.55;
  margin-bottom: 20px;
}
.abt-subhead {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(40px, 4.4vw, 54px);
  line-height: 1.5;
  margin-bottom: 52px;
}
.abt-body p {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(18px, 1.3vw, 20px);
  line-height: 2.1;
  margin-bottom: 30px;
}
.abt-body p:last-child { margin-bottom: 0; }
.abt-body-main {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.85;
  margin-bottom: 40px;
}
.abt-body-lead {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(18px, 1.3vw, 20px);
  line-height: 2.1;
  margin-bottom: 56px;
}

.abt-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---- SECTION 03：NAME（タイポグラフィのみ・カード禁止） ---- */
.abt-name-type { margin-bottom: 56px; }
.abt-name-word {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.abt-name-knowledge { color: var(--navy); }
.abt-name-wave { color: var(--gold); }
.abt-name-knowave { color: var(--navy); margin-top: 8px; }
.abt-name-desc {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.9;
  opacity: 0.75;
  max-width: 560px;
  margin: 14px 0 34px;
}
.abt-name-plus, .abt-name-equal {
  font-weight: 700;
  color: var(--navy);
  opacity: 0.4;
  font-size: clamp(22px, 2vw, 28px);
  margin-bottom: 34px;
}
.abt-name-supplement {
  font-weight: 400;
  color: var(--navy);
  font-size: 15px;
  letter-spacing: 0.06em;
  opacity: 0.45;
  line-height: 2.4;
  margin-bottom: 64px;
}
.abt-name-brand { display: flex; flex-direction: column; align-items: flex-start; }
.abt-name-logo { margin-bottom: 22px; }
.abt-name-logo img { height: 46px; width: auto; }
.abt-name-tagline {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(15px, 1.1vw, 17px);
  letter-spacing: 0.04em;
  opacity: 0.6;
}
.abt-name-closing {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.9;
  opacity: 0.55;
  margin-top: 64px;
}

/* ---- SECTION 04：BUSINESS ---- */
.abt-business-intro {
  font-weight: 400;
  color: var(--navy);
  font-size: clamp(18px, 1.3vw, 20px);
  line-height: 2.1;
  margin-bottom: 56px;
  max-width: 640px;
}
.abt-business-service {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(44px, 4.8vw, 58px);
  line-height: 1.4;
  margin-bottom: 8px;
}
.abt-business-catch {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.5;
  margin-bottom: 44px;
}
.abt-business-catch .gold { color: var(--gold); }
.abt-business-areas {
  font-weight: 400;
  color: var(--navy);
  font-size: 15px;
  letter-spacing: 0.03em;
  line-height: 2.3;
  opacity: 0.55;
  margin: 40px 0 48px;
  max-width: 620px;
}
.abt-business-link { font-size: 15.5px; }

/* ---- SECTION 05：COMPANY（縦型エディトリアル・罫線テーブル禁止） ---- */
.abt-company { background: var(--white); }
.abt-company-list { display: flex; flex-direction: column; }
.abt-company-item {
  padding: 26px 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 32px;
}
.abt-company-item:first-child { border-top: none; padding-top: 0; }
.abt-company-item dt {
  flex: 0 0 160px;
  font-size: clamp(15px, 1vw, 18px);
  font-weight: 700;
  color: var(--navy);
  opacity: 0.5;
  letter-spacing: 0.04em;
}
.abt-company-item dd {
  flex: 1 1 320px;
  font-size: clamp(18px, 1.2vw, 22px);
  color: var(--navy);
  line-height: 1.8;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.abt-company-item dd a[href^="mailto"] {
  border-bottom: 1px solid var(--navy);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.abt-company-item dd a[href^="mailto"]:hover { color: var(--gold); border-color: var(--gold); }
.abt-profile-link { font-size: 13px; }

/* ---- SECTION 06：NEXT（大きな余白 → PHILOSOPHYへの導線を優先） ---- */
.abt-next {
  position: relative;
  padding: 220px 0 200px;
  text-align: center;
  background: var(--white);
}
.abt-next-inner { display: flex; flex-direction: column; align-items: center; }
.abt-next-lead {
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.7;
  margin-bottom: 52px;
}
.abt-next-sub {
  font-weight: 400;
  color: var(--navy);
  font-size: 15px;
  line-height: 2;
  opacity: 0.5;
  margin-bottom: 44px;
}
.abt-next-primary { font-size: 17px; margin-bottom: 26px; }
.abt-next-secondary { font-size: 14px; opacity: 0.7; }

@media (max-width: 900px) {
  .abt-container { padding: 0 26px; }

  .abt-hero { min-height: auto; padding: 140px 0 70px; }
  .abt-eyebrow { font-size: 13px; margin-bottom: 22px; }
  .abt-hero-title { font-size: clamp(36px, 9vw, 46px); margin-bottom: 28px; }
  .abt-hero-sub { font-size: clamp(16px, 4.4vw, 18px); }
  .abt-hero-sub-br { display: none; }

  .abt-section { padding: 90px 0; }
  .abt-subhead { font-size: clamp(30px, 8vw, 38px); margin-bottom: 34px; }
  .abt-body p, .abt-body-lead { font-size: clamp(16px, 4.4vw, 18px); }
  .abt-body-main { font-size: clamp(22px, 6vw, 28px); margin-bottom: 30px; }
  .abt-business-intro { font-size: clamp(16px, 4.4vw, 18px); margin-bottom: 40px; }
  .abt-next-sub { font-size: 13px; margin-bottom: 32px; }

  .abt-name-word { font-size: clamp(30px, 10vw, 40px); }
  .abt-name-desc { font-size: 15px; }
  .abt-name-supplement { font-size: 14px; margin-bottom: 44px; }
  .abt-name-logo img { height: 34px; }

  .abt-business-service { font-size: clamp(34px, 10vw, 44px); }
  .abt-business-catch { font-size: clamp(24px, 8vw, 30px); margin-bottom: 32px; }
  .abt-business-areas { font-size: 14px; }

  .abt-company-item { flex-direction: column; gap: 6px; padding: 20px 0; }
  .abt-company-item dt { flex: none; font-size: 13px; }
  .abt-company-item dd { flex: none; font-size: 17px; }

  .abt-next { padding: 130px 0 120px; }
  .abt-next-lead { font-size: clamp(24px, 7vw, 30px); margin-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .abt-path { transition: none; stroke-dashoffset: 0; }
}