/* ============================================================
   株式会社with総合研究所 コーポレートサイト
   style.css
   ============================================================ */

/* ============================================
   1. デザイントークン（CSS変数）
============================================ */
:root {
  /* カラー */
  --color-navy-deep: #0F1F3D;
  --color-navy: #1A2D4F;
  --color-off-white: #F7F5F0;
  --color-white-pure: #FCFAF6;
  --color-greige: #E8E4DC;
  --color-greige-light: #F2EFE8;
  --color-gold: #C8941A;
  --color-gold-soft: #D4A017;
  --color-charcoal: #3A3A3A;
  --color-charcoal-soft: #5A5A5A;
  --color-emerald: #1F5F3F;

  /* タイポグラフィ */
  --font-mincho: 'Shippori Mincho B1', 'YuMincho', 'Hiragino Mincho ProN', serif;
  --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans-jp: 'Noto Sans JP', 'YuGothic', 'Hiragino Sans', sans-serif;
  --font-sans-en: 'Inter', 'Helvetica Neue', sans-serif;

  /* スペーシング */
  --space-section: clamp(120px, 14vw, 200px);
  --space-section-large: clamp(160px, 18vw, 240px);
  --space-block: clamp(48px, 6vw, 80px);
  --space-element: clamp(16px, 2vw, 32px);
  --container-max: 1200px;
  --container-narrow: 960px;
  --container-wide: 1400px;

  /* タイミング */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 0.3s;
  --duration-base: 0.6s;
  --duration-slow: 1s;

  /* レイヤー */
  --z-loading: 100;
  --z-header: 50;
  --z-content: 1;
}

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

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

body {
  font-family: var(--font-sans-jp);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.95;
  color: var(--color-charcoal);
  background-color: var(--color-off-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt";
  letter-spacing: 0.04em;
  overflow-x: hidden;
}

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

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

/* ============================================
   3. ユーティリティ
============================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 48px);
}

.section-label {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: clamp(40px, 5vw, 64px);
  position: relative;
  padding-left: 36px;
}

.section-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 1px;
  background-color: var(--color-gold);
}

.section-label--light {
  color: var(--color-gold-soft);
}

.section-label--light::before {
  background-color: var(--color-gold-soft);
}

.section-heading {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-navy-deep);
}

.section-heading--light {
  color: var(--color-off-white);
}

/* ============================================
   4. テキストリンク（ホバー演出付き）
============================================ */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-sans-jp);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--color-navy-deep);
  position: relative;
  padding: 4px 0;
}

.text-link span {
  position: relative;
  display: inline-block;
}

.text-link span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width var(--duration-base) var(--ease-out);
}

.text-link__arrow {
  width: 32px;
  height: 12px;
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-out);
  color: currentColor;
}

.text-link:hover {
  color: var(--color-gold);
}

.text-link:hover span::after {
  width: 100%;
}

.text-link:hover .text-link__arrow {
  transform: translateX(12px);
}

/* ============================================
   5. ヘッダー（固定ナビ）
============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background-color: rgba(247, 245, 240, 0);
  transition: background-color var(--duration-base) var(--ease-out),
              backdrop-filter var(--duration-base) var(--ease-out),
              padding var(--duration-base) var(--ease-out);
  padding-block: 28px;
}

.site-header.is-scrolled {
  background-color: rgba(247, 245, 240, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding-block: 18px;
  border-bottom: 1px solid rgba(15, 31, 61, 0.06);
}

/* === WordPress 管理バー対応 ===
 * ログイン中は body.admin-bar が付与され、上部に管理バー(32px、782px以下では46px)が表示される。
 * site-header と journey__sticky を管理バーの下にずらす。
 */
.admin-bar .site-header {
  top: 32px;
}
.admin-bar .journey__sticky {
  top: 32px;
  height: calc(100vh - 32px);
}
@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
  .admin-bar .journey__sticky {
    top: 46px;
    height: calc(100vh - 46px);
  }
}

.site-header__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.site-header__logo img {
  height: 28px;
  width: auto;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.site-header__logo:hover img {
  opacity: 0.7;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}

.site-nav__list a {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-navy-deep);
  position: relative;
  padding-block: 6px;
}

.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-gold);
  transition: width var(--duration-base) var(--ease-out);
}

.site-nav__list a:hover {
  color: var(--color-gold);
}

.site-nav__list a:hover::after {
  width: 100%;
}

.site-nav__contact {
  position: relative;
  padding-left: 24px !important;
}

.site-nav__contact::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-gold);
  transform: translateY(-50%);
  opacity: 0.7;
}

/* === Service ドロップダウン === */
.site-nav__list > li {
  position: relative;
}

.site-nav__item--has-children > a {
  cursor: default;
}

.site-nav__submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background-color: rgba(247, 245, 240, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(15, 31, 61, 0.08);
  padding: 12px 0;
  min-width: 280px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              visibility var(--duration-base) var(--ease-out);
  list-style: none;
  margin: 0;
  z-index: 1;
}

.site-nav__item--has-children:hover .site-nav__submenu,
.site-nav__item--has-children:focus-within .site-nav__submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ホバー判定をリンク下の隙間にも残すための透明ブリッジ */
.site-nav__item--has-children::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
}

.site-nav__submenu li {
  padding: 0;
}

.site-nav__submenu a {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  padding: 12px 28px !important;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--color-navy-deep);
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.site-nav__submenu a::after {
  display: none !important;
}

.site-nav__submenu a:hover {
  background-color: rgba(200, 148, 26, 0.06);
  color: var(--color-gold);
}

.site-nav__submenu-label {
  font-family: var(--font-mincho);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-navy-deep);
}

.site-nav__submenu a:hover .site-nav__submenu-label {
  color: var(--color-gold);
}

.site-nav__submenu-desc {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--color-charcoal-soft);
}

/* ============================================
   7. Hero
============================================ */
.hero {
  min-height: 100vh;
  padding-top: clamp(120px, 14vh, 180px);
  padding-bottom: clamp(80px, 10vh, 140px);
  position: relative;
  overflow: hidden;
  background-color: var(--color-off-white);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(200, 148, 26, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(15, 31, 61, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

.hero__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  min-height: calc(100vh - 320px);
  position: relative;
}

.hero__copy {
  position: relative;
  z-index: 2;
}

.hero__title {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--color-navy-deep);
  margin-bottom: clamp(40px, 5vw, 64px);
}

.hero__title-line {
  display: block;
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1.4s var(--ease-out), transform 1.4s var(--ease-out);
}

.hero__title-line.is-shown {
  opacity: 1;
  transform: translateY(0);
}

.hero__sub {
  font-family: var(--font-sans-jp);
  margin-bottom: clamp(48px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero__sub-jp {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-charcoal);
  letter-spacing: 0.18em;
}

.hero__sub-en {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--color-charcoal-soft);
  letter-spacing: 0.06em;
  font-weight: 400;
}

.hero__cta {
  font-size: 0.9375rem;
}

.hero__visual {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__graphic {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  animation: heroFloat 8s ease-in-out infinite;
}

@keyframes heroFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.hero__scroll-label {
  font-family: var(--font-serif);
  font-size: 0.6875rem;
  letter-spacing: 0.4em;
  color: var(--color-charcoal-soft);
  font-weight: 500;
}

.hero__scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--color-charcoal-soft) 0%, transparent 100%);
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: var(--color-gold);
  animation: scrollLine 2.4s var(--ease-in-out) infinite;
}

@keyframes scrollLine {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(300%);
  }
}

/* ============================================
   8. Philosophy
============================================ */
.philosophy {
  padding-block: var(--space-section-large);
  background-color: var(--color-off-white);
  background-image: url('../images/philosophy/bg-paper.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  isolation: isolate;
}

.philosophy::before {
  /* 背景画像の上にオーバーレイ、本文の可読性を確保 */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(247, 245, 240, 0.92) 0%,
    rgba(247, 245, 240, 0.72) 60%,
    rgba(247, 245, 240, 0.55) 100%);
  z-index: -1;
}

.philosophy .container {
  position: relative;
}

.philosophy__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(60px, 8vw, 120px);
  align-items: start;
}

.philosophy__heading {
  font-size: clamp(2.25rem, 4.8vw, 3.75rem);
}

.philosophy__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
}

.philosophy__body p {
  font-size: 0.9375rem;
  line-height: 2.2;
  color: var(--color-charcoal);
  letter-spacing: 0.08em;
}

/* ============================================
   9. Journey（Service ピン留めジャーニー）
============================================ */
.journey {
  /* セクション全長 = 3.8ビューポート分（PC・短縮） */
  position: relative;
  height: 380vh;
  background-color: var(--color-greige-light);

  /* progress 値 (0〜1)、JSから設定 */
  --p: 0;

  /* stage マスク値（クロスフェード用、JSから設定） */
  --m0: 1;  /* stage 0 mask: 1=完全表示, 0=非表示 */
  --m1: 0;
  --m2: 0;
}

.journey__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 背景：progress に応じて色が深くなる */
.journey__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 50%, rgba(200, 148, 26, calc(0.04 + var(--p) * 0.06)) 0%, transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(15, 31, 61, calc(0.02 + var(--p) * 0.05)) 0%, transparent 50%);
  pointer-events: none;
  transition: background 0.4s var(--ease-out);
}

.journey__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  /* 見出しを sticky の外に出したので、上下 padding は最小限でOK */
  padding: clamp(32px, 5vh, 60px) clamp(24px, 4vw, 56px);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.journey__head {
  margin-bottom: clamp(40px, 5vw, 64px);
  max-width: 720px;
}

/* 見出しを sticky の外に出すための導入セクション */
.journey__intro {
  padding-block: clamp(80px, 10vh, 140px) clamp(40px, 6vh, 80px);
  position: relative;
  z-index: 1;
}

.journey__intro .section-label {
  margin-bottom: clamp(16px, 2vh, 24px);
}

.journey__heading {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-top: 12px;
  max-width: 720px;
}

/* メインエリア：左テキスト・右ビジュアル */
.journey__main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.2fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  min-height: 0;
}

/* === テキストパネル（クロスフェード） === */
.journey__text {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.stage-text {
  position: absolute;
  inset: 0;
  /* 上下に余白を確保。スクロール時もコンテンツが端で切れない */
  padding-block: clamp(8px, 2vh, 24px);
  display: flex;
  flex-direction: column;
  /* safe center: 収まるときは中央寄せ、溢れるときは flex-start にフォールバック
     → 短い画面でも下端のリンクが切れない */
  justify-content: safe center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.4s var(--ease-out), transform 1.4s var(--ease-out);
  pointer-events: none;
  overflow-y: auto;
}

.stage-text.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.stage-text__head {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: clamp(12px, 2vh, 24px);
}

.stage-text__num {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  color: var(--color-gold);
  letter-spacing: 0.06em;
  line-height: 1;
}

.stage-text__name {
  font-family: var(--font-mincho);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  color: var(--color-navy-deep);
  letter-spacing: 0.16em;
}

.stage-text__lead {
  font-family: var(--font-mincho);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 500;
  color: var(--color-navy-deep);
  letter-spacing: 0.08em;
  line-height: 1.5;
  margin-bottom: clamp(14px, 2.5vh, 28px);
}

.stage-text__body {
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--color-charcoal);
  margin-bottom: clamp(18px, 3vh, 36px);
  letter-spacing: 0.06em;
}

.stage-text__list {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.8vh, 20px);
  margin-bottom: clamp(18px, 3vh, 40px);
}

.stage-text__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 20px;
  align-items: start;
}

.stage-text__row dt {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--color-gold);
  text-transform: uppercase;
  padding-top: 6px;
}

.stage-text__row dd {
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
}

.stage-text__row ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stage-text__row li {
  position: relative;
  padding-left: 20px;
}

.stage-text__row li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 8px;
  height: 1px;
  background-color: var(--color-gold);
}

.stage-text__link {
  align-self: flex-start;
  font-size: 0.875rem;
}

/* === 右：主役ビジュアル === */
.journey__visual {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.journey__visual-inner {
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1;
  position: relative;
}

.journey-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* SVG 各レイヤーの可視性：CSS変数で制御 */
.js-layer--startup {
  opacity: var(--m0);
  transition: opacity 1.1s var(--ease-out);
}

.js-layer--growth {
  opacity: var(--m1);
  transition: opacity 1.1s var(--ease-out);
}

.js-layer--innovation {
  opacity: var(--m2);
  transition: opacity 1.1s var(--ease-out);
}

/* ハブのコア：progress に応じて強くなる */
.js-hub-glow {
  opacity: calc(0.5 + var(--p) * 0.5);
  transform-origin: 400px 400px;
  transform: scale(calc(0.7 + var(--p) * 0.4));
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.js-hub-core {
  transform-origin: 400px 400px;
  transform: scale(calc(0.85 + var(--p) * 0.25));
  transition: transform 0.4s var(--ease-out);
}

/* SVG内パーツの個別アニメ */
@keyframes startupLine {
  0% { stroke-dashoffset: 600; }
  100% { stroke-dashoffset: 0; }
}

.js-startup-line {
  stroke-dasharray: 600;
  stroke-dashoffset: calc(600 * (1 - var(--m0)));
  transition: stroke-dashoffset 0.8s var(--ease-out);
}

.js-startup-dots circle {
  transform-origin: center;
  transform-box: fill-box;
  animation: journeyDotPulse 4s ease-in-out infinite;
}
.js-startup-dots circle:nth-child(2n) { animation-delay: -1.2s; }
.js-startup-dots circle:nth-child(3n) { animation-delay: -2.4s; }

@keyframes journeyDotPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.js-growth-bars rect {
  transform-origin: bottom;
  transform-box: fill-box;
  transform: scaleY(var(--m1));
  transition: transform 0.7s var(--ease-out);
}

.js-growth-kpi path {
  stroke-dasharray: 400;
  stroke-dashoffset: calc(400 * (1 - var(--m1)));
  transition: stroke-dashoffset 0.9s var(--ease-out);
}

.js-innovation-donut > circle:not(:first-child) {
  transition: stroke-dashoffset 0.8s var(--ease-out), opacity 0.5s var(--ease-out);
}

.js-innovation-shapes > * {
  transform-origin: center;
  transform-box: fill-box;
  animation: journeyShapeBreathe 6s ease-in-out infinite;
}
.js-innovation-shapes > *:nth-child(2) { animation-delay: -2s; }
.js-innovation-shapes > *:nth-child(3) { animation-delay: -4s; }

@keyframes journeyShapeBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* === 進行ドット（中央下） === */
.journey__dots {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 3.5vw, 48px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 2;
}

.journey-dot {
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.journey-dot span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-charcoal);
  opacity: 0.25;
  transition: all 0.4s var(--ease-out);
}

.journey-dot.is-active span {
  width: 32px;
  border-radius: 4px;
  background-color: var(--color-gold);
  opacity: 1;
}

.journey-dot:hover span {
  opacity: 0.6;
}

/* === 進行バー（右端の縦バー） === */
.journey__progress {
  position: absolute;
  right: clamp(20px, 2.5vw, 36px);
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 200px;
  background-color: rgba(15, 31, 61, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.journey__progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--p) * 100%);
  background: linear-gradient(to bottom, var(--color-gold), var(--color-gold-soft));
  transition: height 0.2s linear;
}

/* === レスポンシブ：タブレット === */
@media (max-width: 1024px) {
  .journey {
    height: auto;
  }
  .journey__sticky {
    position: relative;
    height: auto;
  }
  .journey__main {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .journey__text {
    height: auto;
    min-height: 600px;
  }
  .journey__visual {
    height: 480px;
    order: -1;
  }
  .journey__progress {
    display: none;
  }
}

/* === レスポンシブ：モバイル（カルーセル化） === */
@media (max-width: 767px) {
  .journey__inner {
    padding: 80px 24px 100px;
  }
  .journey__text {
    min-height: auto;
  }
  .stage-text {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    display: none;
  }
  .stage-text.is-active {
    display: flex;
  }
  .stage-text__head {
    gap: 16px;
    margin-bottom: 20px;
  }
  .stage-text__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .journey__visual {
    height: 320px;
  }
  .journey__dots {
    position: relative;
    left: auto;
    bottom: auto;
    justify-content: center;
    margin-top: 32px;
  }
}

/* === 短い viewport 向け圧縮（MBA 13.3" 等の縦830px以下） === */
@media (min-width: 1025px) and (max-height: 830px) {
  .journey__inner {
    padding: clamp(28px, 4vh, 60px) clamp(24px, 4vw, 56px) clamp(20px, 3vh, 40px);
  }
  .journey__head {
    margin-bottom: clamp(14px, 2.2vh, 32px);
  }
  .journey__head .section-label {
    margin-bottom: clamp(8px, 1.4vh, 18px);
  }
  .journey__heading {
    font-size: clamp(1.5rem, 4vh, 2.5rem);
    line-height: 1.3;
    margin-top: 6px;
  }
  .stage-text {
    justify-content: flex-start;
    padding-bottom: clamp(8px, 1.5vh, 16px);
  }
  .stage-text__head {
    margin-bottom: clamp(6px, 1.2vh, 16px);
    gap: 16px;
  }
  .stage-text__num {
    font-size: clamp(1.5rem, 3.6vh, 2.25rem);
  }
  .stage-text__name {
    font-size: clamp(1.125rem, 2vh, 1.5rem);
  }
  .stage-text__lead {
    font-size: clamp(1.25rem, 2.8vh, 1.75rem);
    line-height: 1.4;
    margin-bottom: clamp(6px, 1.4vh, 18px);
  }
  .stage-text__body {
    font-size: 0.875rem;
    line-height: 1.7;
    margin-bottom: clamp(10px, 2vh, 24px);
  }
  .stage-text__list {
    gap: clamp(4px, 1vh, 14px);
    margin-bottom: clamp(10px, 1.8vh, 24px);
  }
  .stage-text__row {
    grid-template-columns: 88px 1fr;
    gap: 14px;
  }
  .stage-text__row dd {
    line-height: 1.7;
  }
  .stage-text__row dt {
    padding-top: 4px;
  }
}

/* ============================================
   10. Approach（最重要セクション）
============================================ */
.approach {
  padding-block: var(--space-section-large);
  background-color: var(--color-navy-deep);
  position: relative;
  overflow: hidden;
}

.approach::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(200, 148, 26, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(200, 148, 26, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

.approach__heading {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  margin-bottom: clamp(32px, 4vw, 48px);
  max-width: 1000px;
}

.approach__lead {
  font-size: 0.9375rem;
  line-height: 2.2;
  color: rgba(247, 245, 240, 0.75);
  max-width: 720px;
  letter-spacing: 0.08em;
  margin-bottom: clamp(60px, 7vw, 100px);
}

.approach__diagram-wrap {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 48px);
  position: relative;
  overflow: hidden;
}

.approach__diagram {
  width: 100%;
  height: auto;
  opacity: 0.3;
  transform: scale(0.98);
  transition: opacity 1.6s var(--ease-out), transform 1.6s var(--ease-out);
}

.approach__diagram-wrap.is-revealed .approach__diagram {
  opacity: 1;
  transform: scale(1);
}

/* 中央ハブを「光らせる」オーバーレイ：図解の中央に重ねる */
.approach__diagram-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 240px;
  transform: translate(-50%, calc(-50% - 18px));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 148, 26, 0.35) 0%, rgba(200, 148, 26, 0) 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s var(--ease-out);
}

.approach__diagram-wrap.is-revealed::after {
  opacity: 1;
  transition-delay: 1s;
  animation: hubGlow 3.6s var(--ease-in-out) 2s infinite;
}

@keyframes hubGlow {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, calc(-50% - 18px)) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 18px)) scale(1.15);
  }
}

/* ============================================
   11. Works
============================================ */
.works {
  padding-block: var(--space-section-large);
  background-color: var(--color-off-white);
}

.works__head {
  margin-bottom: clamp(60px, 8vw, 100px);
}

.works__heading {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  max-width: 720px;
}

.works__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 56px);
  margin-bottom: clamp(48px, 6vw, 80px);
}

.work-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.work-card__image {
  aspect-ratio: 4 / 3;
  margin-bottom: 24px;
  overflow: hidden;
  background-color: var(--color-greige);
  position: relative;
}

.work-card__placeholder {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(15, 31, 61, 0.6) 0%, rgba(26, 45, 79, 0.4) 100%),
    repeating-linear-gradient(45deg, transparent 0, transparent 10px, rgba(247, 245, 240, 0.02) 10px, rgba(247, 245, 240, 0.02) 11px);
  transition: transform var(--duration-slow) var(--ease-out);
}

.work-card:hover .work-card__placeholder {
  transform: scale(1.04);
}

.work-card__category {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.work-card__title {
  font-family: var(--font-mincho);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-navy-deep);
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}

.work-card__lead {
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
}

.works__more {
  display: inline-flex;
}

/* ============================================
   12. Knowledge / Insights
============================================ */
.knowledge {
  padding-block: var(--space-section-large);
  background-color: var(--color-greige-light);
  border-top: 1px solid rgba(15, 31, 61, 0.06);
}

.knowledge__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(40px, 5vw, 80px);
  margin-bottom: clamp(48px, 6vw, 80px);
}

.knowledge-item {
  position: relative;
  padding-top: 32px;
  border-top: 1px solid rgba(15, 31, 61, 0.15);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-out);
  text-decoration: none;
  color: inherit;
  display: block;
}

.knowledge-item:hover {
  border-color: var(--color-gold);
}

.knowledge-item__category {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.knowledge-item__title {
  font-family: var(--font-mincho);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-navy-deep);
  margin-bottom: 24px;
  letter-spacing: 0.04em;
  transition: color var(--duration-base) var(--ease-out);
}

.knowledge-item:hover .knowledge-item__title {
  color: var(--color-gold);
}

.knowledge-item__date {
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  color: var(--color-charcoal-soft);
  letter-spacing: 0.1em;
}

/* ============================================
   13. People
============================================ */
.people {
  padding-block: var(--space-section-large);
  background-color: var(--color-off-white);
}

.people__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(60px, 8vw, 120px);
  align-items: center;
}

.people__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.people__copy .section-heading {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  margin-bottom: 32px;
}

.people__body {
  font-size: 0.9375rem;
  line-height: 2.1;
  color: var(--color-charcoal);
  margin-bottom: 48px;
  letter-spacing: 0.06em;
}

.people__visual-placeholder {
  width: 100%;
  aspect-ratio: 5 / 4;
  background-color: var(--color-greige-light);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(15, 31, 61, 0.06);
}

/* ============================================
   14. News / Topics
============================================ */
.news {
  padding-block: var(--space-section-large);
  background-color: var(--color-greige-light);
}

.news__list {
  margin-bottom: clamp(48px, 6vw, 64px);
  border-top: 1px solid rgba(15, 31, 61, 0.1);
}

.news-item {
  display: grid;
  grid-template-columns: 140px 120px 1fr;
  gap: 32px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid rgba(15, 31, 61, 0.08);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out),
              padding-left var(--duration-base) var(--ease-out);
}

.news-item:hover {
  background-color: rgba(200, 148, 26, 0.04);
  padding-left: 16px;
}

.news-item__date {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  color: var(--color-charcoal-soft);
  letter-spacing: 0.1em;
}

.news-item__category {
  font-family: var(--font-sans-jp);
  font-size: 0.75rem;
  color: var(--color-gold);
  letter-spacing: 0.15em;
  text-align: center;
  padding: 6px 12px;
  border: 1px solid var(--color-gold);
  display: inline-block;
  justify-self: start;
  width: 100px;
  text-align: center;
}

.news-item__title {
  font-size: 0.9375rem;
  color: var(--color-navy-deep);
  letter-spacing: 0.04em;
  transition: color var(--duration-base) var(--ease-out);
}

.news-item:hover .news-item__title {
  color: var(--color-gold);
}

/* ============================================
   15. Company
============================================ */
.company {
  padding-block: var(--space-section-large);
  background-color: var(--color-off-white);
}

.company__container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(60px, 8vw, 120px);
  align-items: center;
}

.company__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.company__copy .section-heading {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  margin-bottom: clamp(32px, 4vw, 48px);
}

.company__body {
  font-size: 0.9375rem;
  line-height: 2.2;
  color: var(--color-charcoal);
  margin-bottom: 48px;
  letter-spacing: 0.08em;
}

.company__links {
  display: flex;
  gap: clamp(32px, 4vw, 56px);
  flex-wrap: wrap;
}

.company__visual-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-greige);
  overflow: hidden;
  position: relative;
}

/* ============================================
   16. Footer
============================================ */
.site-footer {
  background-color: var(--color-navy-deep);
  color: var(--color-off-white);
  padding-top: clamp(80px, 10vw, 140px);
  padding-bottom: 32px;
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, rgba(200, 148, 26, 0.4) 50%, transparent 100%);
}

.site-footer__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(60px, 8vw, 120px);
  margin-bottom: clamp(60px, 8vw, 100px);
}

.site-footer__logo {
  height: 36px;
  width: auto;
  margin-bottom: 24px;
}

.site-footer__tagline {
  font-family: var(--font-mincho);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-off-white);
  margin-bottom: 32px;
}

.site-footer__address {
  font-size: 0.8125rem;
  line-height: 2;
  color: rgba(247, 245, 240, 0.6);
  letter-spacing: 0.05em;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
}

.site-footer__nav-title {
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 24px;
}

.site-footer__nav-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer__nav-col a {
  font-size: 0.8125rem;
  color: rgba(247, 245, 240, 0.7);
  letter-spacing: 0.06em;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer__nav-col a:hover {
  color: var(--color-gold);
}

.site-footer__bottom {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 24px clamp(24px, 4vw, 48px) 0;
  border-top: 1px solid rgba(247, 245, 240, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.site-footer__copy {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  color: rgba(247, 245, 240, 0.5);
  letter-spacing: 0.15em;
}

.site-footer__legal {
  display: flex;
  gap: 32px;
}

.site-footer__legal a {
  font-size: 0.75rem;
  color: rgba(247, 245, 240, 0.5);
  letter-spacing: 0.06em;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer__legal a:hover {
  color: var(--color-gold);
}

/* ============================================
   17. スクロールアニメーション（強化版）
   下から80px上昇＋微スケール＋ぼかし解除の3軸
============================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(80px) scale(0.96);
  filter: blur(6px);
  transition:
    opacity 1.6s var(--ease-out),
    transform 1.6s var(--ease-out),
    filter 1.6s var(--ease-out);
  will-change: opacity, transform, filter;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* 連続要素の段差ディレイ用ヘルパ（HTML側で data-reveal-delay と併用） */
[data-reveal-delay="100"] { transition-delay: 0s; }
[data-reveal-delay="200"] { transition-delay: 0s; }
[data-reveal-delay="240"] { transition-delay: 0s; }

/* prefers-reduced-motion を尊重 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .hero__graphic {
    animation: none;
  }
}

/* ============================================
   18. レスポンシブ
============================================ */

/* タブレット */
@media (max-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero__visual {
    max-height: 400px;
  }

  .philosophy__grid,
  .people__grid,
  .company__container {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .service__cards {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .works__cards,
  .knowledge__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-nav__list {
    gap: 20px;
  }

  .site-nav__list a {
    font-size: 0.8125rem;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .site-footer__nav {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-item {
    grid-template-columns: 100px 90px 1fr;
    gap: 16px;
  }

  .news-item__category {
    width: 80px;
    font-size: 0.6875rem;
    padding: 4px 8px;
  }
}

/* モバイル */
@media (max-width: 767px) {
  body {
    font-size: 0.9375rem;
  }

  .site-header {
    padding-block: 16px;
  }

  .site-header__logo img {
    height: 22px;
  }

  .site-nav__list {
    display: none; /* モバイルメニューは別途実装、暫定で非表示 */
  }

  .hero {
    min-height: auto;
    padding-top: 100px;
    padding-bottom: 60px;
  }

  .hero__title {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .hero__visual {
    max-height: 300px;
  }

  .hero__scroll {
    display: none;
  }

  .works__cards,
  .knowledge__list {
    grid-template-columns: 1fr;
  }

  .news-item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 0;
  }

  .news-item__category {
    width: auto;
    justify-self: start;
  }

  .site-footer__nav {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================
   19. 下層ページ共通コンポーネント
============================================ */

/* === ページヒーロー（下層共通の頭） === */
.page-hero {
  padding-top: clamp(140px, 16vh, 200px);
  padding-bottom: clamp(80px, 10vh, 140px);
  background-color: var(--color-off-white);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(200, 148, 26, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(15, 31, 61, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
  min-height: 320px;
}

.page-hero__inner:has(.page-hero__visual) {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

.page-hero__copy {
  max-width: 880px;
}

.page-hero__title {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--color-navy-deep);
  margin-top: 16px;
  margin-bottom: 32px;
}

.page-hero__sub {
  font-size: 0.9375rem;
  line-height: 2.1;
  color: var(--color-charcoal);
  letter-spacing: 0.06em;
  max-width: 520px;
}

.page-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === パンくず === */
.breadcrumb {
  padding: clamp(96px, 11vh, 132px) 0 0;
  background-color: var(--color-off-white);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-charcoal-soft);
}

.breadcrumb__list a {
  font-family: var(--font-serif);
  color: var(--color-charcoal-soft);
  transition: color var(--duration-fast) var(--ease-out);
}

.breadcrumb__list a:hover {
  color: var(--color-gold);
}

.breadcrumb__sep {
  color: var(--color-gold);
  font-family: var(--font-serif);
}

/* === プロフィールカード === */
.profile-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  padding-block: clamp(60px, 7vw, 100px);
  border-top: 1px solid rgba(15, 31, 61, 0.08);
}

.profile-card:first-of-type {
  border-top: none;
}

.profile-card__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: var(--color-greige);
  overflow: hidden;
}

.profile-card__photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, var(--color-navy-deep) 0%, var(--color-navy) 100%);
}

.profile-card__photo-placeholder-mark {
  font-family: var(--font-mincho);
  font-size: 4rem;
  font-weight: 500;
  color: var(--color-gold);
  letter-spacing: 0.1em;
  opacity: 0.6;
}

.profile-card__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.profile-card__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-card__role {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  text-transform: uppercase;
}

.profile-card__name-jp {
  font-family: var(--font-mincho);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  color: var(--color-navy-deep);
  letter-spacing: 0.16em;
  line-height: 1.4;
}

.profile-card__name-en {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  color: var(--color-charcoal-soft);
  letter-spacing: 0.2em;
  font-style: italic;
}

.profile-card__title {
  font-family: var(--font-mincho);
  font-size: 1rem;
  color: var(--color-charcoal);
  letter-spacing: 0.12em;
  margin-top: 4px;
}

.profile-card__message {
  font-family: var(--font-mincho);
  font-size: 1.125rem;
  line-height: 2;
  color: var(--color-navy-deep);
  letter-spacing: 0.06em;
  padding: 24px 0 24px 28px;
  border-left: 1px solid var(--color-gold);
  margin-block: 8px;
}

.profile-card__meta {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.profile-card__meta-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 20px;
  align-items: start;
}

.profile-card__meta-row dt {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--color-gold);
  text-transform: uppercase;
  padding-top: 4px;
}

.profile-card__meta-row dd {
  font-size: 0.875rem;
  line-height: 1.95;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
}

/* === タイムライン（沿革） === */
.timeline {
  position: relative;
  padding-left: 48px;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(200, 148, 26, 0.4) 8%,
    rgba(200, 148, 26, 0.4) 92%,
    transparent 100%);
}

.timeline-entry {
  position: relative;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

.timeline-entry::before {
  content: "";
  position: absolute;
  left: -48px;
  top: 14px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--color-off-white);
  border: 1.5px solid var(--color-gold);
}

.timeline-entry__year {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-gold);
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.timeline-entry__event {
  font-family: var(--font-mincho);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--color-navy-deep);
  letter-spacing: 0.06em;
}

.timeline-entry__detail {
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
  margin-top: 8px;
}

/* === ファクトリスト（会社概要表） === */
.fact-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(15, 31, 61, 0.1);
}

.fact-list__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(15, 31, 61, 0.08);
}

.fact-list__row dt {
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--color-gold);
  text-transform: uppercase;
  padding-top: 4px;
}

.fact-list__row dd {
  font-size: 0.9375rem;
  line-height: 1.95;
  color: var(--color-navy-deep);
  letter-spacing: 0.04em;
}

/* === MVV ブロック === */
.mvv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 64px);
}

.mvv__item {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mvv__label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--color-gold);
  text-transform: uppercase;
  position: relative;
  padding-left: 36px;
}

.mvv__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 1px;
  background-color: var(--color-gold);
}

.mvv__title {
  font-family: var(--font-mincho);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-navy-deep);
  letter-spacing: 0.08em;
}

.mvv__body {
  font-size: 0.9375rem;
  line-height: 2;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
}

/* === Values リスト（バリュー） === */
.values-list {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}

.values-list__item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  align-items: baseline;
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid rgba(15, 31, 61, 0.08);
}

.values-list__item:last-child {
  border-bottom: none;
}

.values-list__num {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 500;
  color: var(--color-gold);
  letter-spacing: 0.08em;
  line-height: 1;
}

.values-list__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.values-list__title {
  font-family: var(--font-mincho);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-navy-deep);
  letter-spacing: 0.08em;
}

.values-list__body {
  font-size: 0.9375rem;
  line-height: 2;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
}

/* === 共通CTAブロック（ページ末尾の導線） === */
.cta-block {
  padding-block: clamp(120px, 14vw, 180px);
  background-color: var(--color-navy-deep);
  color: var(--color-off-white);
  position: relative;
  overflow: hidden;
}

.cta-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 50%, rgba(200, 148, 26, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.cta-block__inner {
  position: relative;
  text-align: center;
}

.cta-block__label {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 32px;
  position: relative;
  padding-inline: 36px;
}

.cta-block__label::before,
.cta-block__label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 24px;
  height: 1px;
  background-color: var(--color-gold);
}

.cta-block__label::before { left: 0; }
.cta-block__label::after { right: 0; }

.cta-block__heading {
  font-family: var(--font-mincho);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--color-off-white);
  margin-bottom: 32px;
}

.cta-block__lead {
  font-size: 0.9375rem;
  line-height: 2.1;
  color: rgba(247, 245, 240, 0.75);
  letter-spacing: 0.06em;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 56px;
}

.cta-block__links {
  display: flex;
  justify-content: center;
  gap: clamp(32px, 4vw, 56px);
  flex-wrap: wrap;
}

.cta-block .text-link {
  color: var(--color-off-white);
}

.cta-block .text-link:hover {
  color: var(--color-gold);
}

/* 主CTA：枠付きで主役感を出す */
.text-link--cta {
  padding: 20px 36px;
  border: 1px solid var(--color-gold);
  background-color: transparent;
  font-size: 0.9375rem;
  letter-spacing: 0.16em;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.text-link--cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-gold);
  transform: translateX(-101%);
  transition: transform 0.6s var(--ease-out);
  z-index: -1;
}

.text-link--cta:hover::before {
  transform: translateX(0);
}

.cta-block .text-link--cta {
  color: var(--color-off-white);
}

.cta-block .text-link--cta:hover {
  color: var(--color-navy-deep);
}

.cta-block .text-link--cta:hover .text-link__arrow {
  transform: translateX(6px);
}

.cta-block .text-link--cta span::after {
  display: none;
}

/* === セクション余白の標準（下層ページ用） === */
.page-section {
  padding-block: clamp(100px, 12vw, 160px);
}

.page-section--alt {
  background-color: var(--color-greige-light);
}

.page-section--dark {
  background-color: var(--color-navy-deep);
  color: var(--color-off-white);
}

.page-section__head {
  margin-bottom: clamp(48px, 6vw, 80px);
}

.page-section__head--center {
  text-align: center;
}

/* === アクセスマップラッパ === */
.access-map {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-greige);
  overflow: hidden;
  border: 1px solid rgba(15, 31, 61, 0.06);
}

.access-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.4) contrast(0.95);
}

/* === レスポンシブ === */
@media (max-width: 1024px) {
  .page-hero__inner {
    grid-template-columns: 1fr;
  }

  .profile-card {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .profile-card__photo {
    max-width: 360px;
  }

  .mvv {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .fact-list__row {
    grid-template-columns: 140px 1fr;
  }

  .timeline-entry {
    grid-template-columns: 100px 1fr;
  }
}

@media (max-width: 767px) {
  .timeline {
    padding-left: 32px;
  }

  .timeline-entry {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .timeline-entry::before {
    left: -32px;
  }

  .fact-list__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 20px 0;
  }

  .profile-card__meta-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .values-list__item {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cta-block__links {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
}

/* ============================================
   20. サービス詳細ページ用ビジュアライゼーション
============================================ */

/* === Big Stat（大きな数値表現） === */
.big-stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  padding-block: clamp(40px, 5vw, 64px);
}

.big-stat__visual {
  position: relative;
  aspect-ratio: 1;
  max-width: 320px;
  margin-inline: auto;
}

.big-stat__number {
  font-family: var(--font-mincho);
  font-size: clamp(5rem, 12vw, 9rem);
  font-weight: 500;
  color: var(--color-navy-deep);
  line-height: 1;
  letter-spacing: -0.02em;
}

.big-stat__unit {
  font-family: var(--font-serif);
  font-size: 0.4em;
  color: var(--color-gold);
  margin-left: 8px;
  vertical-align: super;
}

.big-stat__label {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 24px;
  padding-left: 36px;
  position: relative;
}

.big-stat__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 1px;
  background-color: var(--color-gold);
}

.big-stat__caption {
  font-family: var(--font-mincho);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  color: var(--color-navy-deep);
  letter-spacing: 0.08em;
  line-height: 1.6;
  margin-bottom: 24px;
}

.big-stat__sub {
  font-size: 0.875rem;
  line-height: 1.95;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
}

/* === Flow Diagram（流れ図） === */
.flow-diagram {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(8px, 1vw, 16px);
  align-items: stretch;
  position: relative;
}

.flow-diagram__step {
  background-color: var(--color-white-pure);
  border: 1px solid rgba(15, 31, 61, 0.08);
  padding: 28px 16px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.flow-diagram__step-num {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--color-gold);
}

.flow-diagram__step-title {
  font-family: var(--font-mincho);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-navy-deep);
  letter-spacing: 0.06em;
  line-height: 1.5;
}

.flow-diagram__step-detail {
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--color-charcoal);
}

/* 矢印（CSS擬似要素で描画） */
.flow-diagram__step:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  width: 16px;
  height: 1px;
  background-color: var(--color-gold);
  transform: translateY(-50%);
  z-index: 1;
}

.flow-diagram__step:not(:last-child)::before {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--color-gold);
  border-right: 1px solid var(--color-gold);
  transform: translateY(-50%) rotate(45deg);
  z-index: 1;
}

/* === Comparison Grid（vs比較） === */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: stretch;
}

.comparison-grid__col {
  padding: clamp(32px, 4vw, 48px);
  background-color: var(--color-white-pure);
  border: 1px solid rgba(15, 31, 61, 0.08);
  display: flex;
  flex-direction: column;
}

.comparison-grid__col--negative {
  background-color: var(--color-greige-light);
  border: 1px dashed rgba(15, 31, 61, 0.2);
}

.comparison-grid__col--positive {
  background-color: var(--color-navy-deep);
  color: var(--color-off-white);
  border: 1px solid var(--color-gold);
  position: relative;
  overflow: hidden;
}

.comparison-grid__col--positive::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 50%, rgba(200, 148, 26, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.comparison-grid__label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--color-charcoal-soft);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.comparison-grid__col--positive .comparison-grid__label {
  color: var(--color-gold);
}

.comparison-grid__title {
  font-family: var(--font-mincho);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-navy-deep);
  margin-bottom: 24px;
  line-height: 1.5;
}

.comparison-grid__col--positive .comparison-grid__title {
  color: var(--color-off-white);
}

.comparison-grid__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.875rem;
  line-height: 1.85;
  letter-spacing: 0.04em;
  position: relative;
}

.comparison-grid__list li {
  position: relative;
  padding-left: 24px;
}

.comparison-grid__list li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: var(--color-charcoal-soft);
  font-size: 0.75em;
  top: 0.4em;
}

.comparison-grid__col--positive .comparison-grid__list li::before {
  content: "○";
  color: var(--color-gold);
}

.comparison-grid__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-gold);
  letter-spacing: 0.2em;
}

/* === Positioning Map（ポジショニング図） === */
.positioning-map {
  position: relative;
  aspect-ratio: 1.4;
  max-width: 720px;
  margin-inline: auto;
  background-color: var(--color-white-pure);
  border: 1px solid rgba(15, 31, 61, 0.08);
  padding: 60px;
}

.positioning-map__axis-x,
.positioning-map__axis-y {
  position: absolute;
  background-color: rgba(15, 31, 61, 0.15);
}

.positioning-map__axis-x {
  left: 60px;
  right: 60px;
  top: 50%;
  height: 1px;
}

.positioning-map__axis-y {
  top: 60px;
  bottom: 60px;
  left: 50%;
  width: 1px;
}

.positioning-map__label {
  position: absolute;
  font-family: var(--font-serif);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--color-charcoal-soft);
  text-transform: uppercase;
}

.positioning-map__label--top { top: 20px; left: 50%; transform: translateX(-50%); }
.positioning-map__label--bottom { bottom: 20px; left: 50%; transform: translateX(-50%); }
.positioning-map__label--left { left: 20px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; }
.positioning-map__label--right { right: 20px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; }

.positioning-map__point {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
}

.positioning-map__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-charcoal-soft);
  margin: 0 auto 8px;
  opacity: 0.4;
}

.positioning-map__point--with .positioning-map__dot {
  width: 22px;
  height: 22px;
  background-color: var(--color-gold);
  box-shadow: 0 0 0 8px rgba(200, 148, 26, 0.15);
  opacity: 1;
}

.positioning-map__point-name {
  font-family: var(--font-sans-jp);
  font-size: 0.75rem;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.positioning-map__point--with .positioning-map__point-name {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--color-navy-deep);
}

/* === Offering Grid（提供範囲グリッド） === */
.offering-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
}

.offering-grid__col {
  background-color: var(--color-white-pure);
  border: 1px solid rgba(15, 31, 61, 0.08);
  padding: clamp(28px, 3.5vw, 40px);
  display: flex;
  flex-direction: column;
  position: relative;
}

.offering-grid__col::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: var(--color-gold);
}

.offering-grid__category {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-top: 16px;
  margin-bottom: 8px;
}

.offering-grid__title {
  font-family: var(--font-mincho);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-navy-deep);
  margin-bottom: 24px;
}

.offering-grid__items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.offering-grid__items li {
  position: relative;
  padding-left: 20px;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
}

.offering-grid__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 8px;
  height: 1px;
  background-color: var(--color-gold);
}

/* === Pillar Cards（訴求軸カード） === */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 40px);
}

.pillars--three {
  grid-template-columns: repeat(3, 1fr);
}

.pillar {
  background-color: var(--color-white-pure);
  border: 1px solid rgba(15, 31, 61, 0.08);
  padding: clamp(32px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -20px rgba(15, 31, 61, 0.12);
}

.pillar__num {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-gold);
  letter-spacing: 0.08em;
  line-height: 1;
}

.pillar__title {
  font-family: var(--font-mincho);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-navy-deep);
  line-height: 1.5;
}

.pillar__body {
  font-size: 0.875rem;
  line-height: 1.95;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
}

.pillar__benefit {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(15, 31, 61, 0.08);
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--color-charcoal-soft);
  letter-spacing: 0.04em;
}

.pillar__benefit-label {
  font-family: var(--font-serif);
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

/* === Stage Progression（顧客状況の段階） === */
.stage-progression {
  position: relative;
  padding: 40px 0;
}

.stage-progression__line {
  position: absolute;
  top: 70px;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(to right,
    rgba(200, 148, 26, 0.2) 0%,
    rgba(200, 148, 26, 0.6) 50%,
    rgba(200, 148, 26, 0.2) 100%);
}

.stage-progression__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}

.stage-progression__item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.stage-progression__num {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--color-gold);
}

.stage-progression__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-off-white);
  border: 1.5px solid var(--color-gold);
  position: relative;
  z-index: 1;
}

.stage-progression__title {
  font-family: var(--font-mincho);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-navy-deep);
  line-height: 1.5;
}

.stage-progression__scale {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-charcoal-soft);
}

.stage-progression__detail {
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
}

/* === FAQ（質問回答リスト） === */
.faq {
  display: flex;
  flex-direction: column;
}

.faq__item {
  border-top: 1px solid rgba(15, 31, 61, 0.08);
  padding-block: clamp(28px, 4vw, 40px);
}

.faq__item:last-child {
  border-bottom: 1px solid rgba(15, 31, 61, 0.08);
}

.faq__question {
  font-family: var(--font-mincho);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 500;
  color: var(--color-navy-deep);
  letter-spacing: 0.06em;
  line-height: 1.6;
  margin-bottom: 16px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.faq__question::before {
  content: "Q.";
  font-family: var(--font-serif);
  color: var(--color-gold);
  font-size: 0.85em;
  flex-shrink: 0;
}

.faq__answer {
  padding-left: 32px;
  font-size: 0.9375rem;
  line-height: 2;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
}

/* === レスポンシブ === */
@media (max-width: 1024px) {
  .big-stat {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .big-stat__visual {
    order: -1;
  }

  .flow-diagram {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 16px;
  }
  .flow-diagram__step::after,
  .flow-diagram__step::before {
    display: none;
  }

  .comparison-grid {
    grid-template-columns: 1fr;
  }
  .comparison-grid__divider {
    transform: rotate(90deg);
    padding: 12px 0;
  }

  .offering-grid {
    grid-template-columns: 1fr;
  }

  .pillars,
  .pillars--three {
    grid-template-columns: 1fr;
  }

  .stage-progression__items {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
  .stage-progression__line {
    display: none;
  }
}

@media (max-width: 767px) {
  .flow-diagram {
    grid-template-columns: 1fr;
  }

  .positioning-map {
    aspect-ratio: 1;
    padding: 40px;
  }

  .stage-progression__items {
    grid-template-columns: 1fr;
  }

  .faq__answer {
    padding-left: 0;
  }
}

/* ============================================
   21. D系ページ用：記事レイアウト / タグフィルタ / フォーム / 目次
============================================ */

/* === タグフィルタ === */
.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.tag-filter__btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  font-family: var(--font-sans-jp);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--color-charcoal);
  background-color: transparent;
  border: 1px solid rgba(15, 31, 61, 0.15);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.tag-filter__btn:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.tag-filter__btn.is-active {
  background-color: var(--color-navy-deep);
  border-color: var(--color-navy-deep);
  color: var(--color-off-white);
}

.tag-filter__btn.is-active:hover {
  background-color: var(--color-navy);
  color: var(--color-gold);
}

/* === カードグリッド（一覧ページ用） === */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
}

.card-grid--two {
  grid-template-columns: repeat(2, 1fr);
}

.card-item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-base) var(--ease-out);
}

.card-item:hover {
  transform: translateY(-4px);
}

.card-item__image {
  aspect-ratio: 4 / 3;
  background-color: var(--color-greige);
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
}

.card-item__image-placeholder {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(15, 31, 61, 0.6) 0%, rgba(26, 45, 79, 0.4) 100%),
    repeating-linear-gradient(45deg, transparent 0, transparent 10px, rgba(247, 245, 240, 0.02) 10px, rgba(247, 245, 240, 0.02) 11px);
  transition: transform var(--duration-slow) var(--ease-out);
}

.card-item:hover .card-item__image-placeholder {
  transform: scale(1.04);
}

.card-item__category {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.card-item__title {
  font-family: var(--font-mincho);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-navy-deep);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  transition: color var(--duration-base) var(--ease-out);
}

.card-item:hover .card-item__title {
  color: var(--color-gold);
}

.card-item__lead {
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

.card-item__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  color: var(--color-charcoal-soft);
  letter-spacing: 0.1em;
}

.card-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.card-item__tag {
  font-family: var(--font-sans-jp);
  font-size: 0.6875rem;
  color: var(--color-charcoal-soft);
  background-color: var(--color-greige-light);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.card-item.is-hidden {
  display: none;
}

/* === 記事ページ：rich-article === */
.rich-article {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 48px);
}

.rich-article__head {
  margin-bottom: clamp(48px, 6vw, 80px);
}

.rich-article__category {
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 24px;
  display: inline-block;
}

.rich-article__title {
  font-family: var(--font-mincho);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-navy-deep);
  letter-spacing: 0.06em;
  margin-bottom: 32px;
}

.rich-article__meta {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  color: var(--color-charcoal-soft);
  letter-spacing: 0.1em;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(15, 31, 61, 0.08);
}

.rich-article__hero-image {
  aspect-ratio: 16 / 9;
  background-color: var(--color-greige);
  overflow: hidden;
  position: relative;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.rich-article__hero-placeholder {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(15, 31, 61, 0.7) 0%, rgba(26, 45, 79, 0.5) 100%);
}

.rich-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

.rich-article__body {
  font-size: 1rem;
  line-height: 2.1;
  color: var(--color-charcoal);
  letter-spacing: 0.06em;
}

.rich-article__body h2 {
  font-family: var(--font-mincho);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-navy-deep);
  letter-spacing: 0.08em;
  margin-top: clamp(48px, 5vw, 72px);
  margin-bottom: 24px;
  padding-left: 16px;
  border-left: 3px solid var(--color-gold);
}

.rich-article__body h3 {
  font-family: var(--font-mincho);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-navy-deep);
  letter-spacing: 0.06em;
  margin-top: 40px;
  margin-bottom: 16px;
}

.rich-article__body p {
  margin-bottom: 24px;
}

.rich-article__body ul,
.rich-article__body ol {
  margin: 24px 0;
  padding-left: 24px;
}

.rich-article__body ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  list-style: none;
}

.rich-article__body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 8px;
  height: 1px;
  background-color: var(--color-gold);
}

.rich-article__body ol li {
  margin-bottom: 8px;
  padding-left: 8px;
}

.rich-article__body blockquote {
  margin: 40px 0;
  padding: 24px 32px;
  background-color: var(--color-greige-light);
  border-left: 3px solid var(--color-gold);
  font-family: var(--font-mincho);
  font-size: 1.0625rem;
  line-height: 1.95;
  color: var(--color-navy-deep);
  letter-spacing: 0.06em;
}

.rich-article__body img {
  max-width: 100%;
  height: auto;
  margin: 32px 0;
}

.rich-article__body a {
  color: var(--color-gold);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.rich-article__body strong {
  font-weight: 500;
  color: var(--color-navy-deep);
}

/* === 目次（Table of Contents） === */
.toc {
  position: sticky;
  top: 120px;
  padding: 24px;
  background-color: var(--color-greige-light);
  border-left: 2px solid var(--color-gold);
}

.toc__label {
  font-family: var(--font-serif);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

.toc__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toc__list a {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
  display: block;
  padding-left: 12px;
  position: relative;
  transition: color var(--duration-fast) var(--ease-out);
}

.toc__list a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 4px;
  height: 1px;
  background-color: var(--color-gold);
  opacity: 0.5;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.toc__list a:hover,
.toc__list a.is-active {
  color: var(--color-gold);
}

.toc__list a:hover::before,
.toc__list a.is-active::before {
  opacity: 1;
}

/* === SNSシェア === */
.social-share {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 32px;
  border-top: 1px solid rgba(15, 31, 61, 0.08);
}

.social-share__label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--color-charcoal-soft);
  text-transform: uppercase;
}

.social-share__list {
  display: flex;
  gap: 12px;
}

.social-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(15, 31, 61, 0.15);
  border-radius: 50%;
  color: var(--color-charcoal);
  transition: all var(--duration-fast) var(--ease-out);
}

.social-share__link:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: translateY(-2px);
}

.social-share__link svg {
  width: 16px;
  height: 16px;
}

/* === 関連記事 === */
.related-articles {
  margin-top: clamp(80px, 10vw, 120px);
  padding-top: clamp(48px, 6vw, 64px);
  border-top: 1px solid rgba(15, 31, 61, 0.08);
}

.related-articles__head {
  margin-bottom: clamp(32px, 4vw, 48px);
}

.related-articles__title {
  font-family: var(--font-mincho);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 500;
  color: var(--color-navy-deep);
  letter-spacing: 0.08em;
}

/* === セミナー専用フィールド === */
.event-info {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px 32px;
  padding: clamp(28px, 4vw, 40px);
  background-color: var(--color-greige-light);
  border-left: 3px solid var(--color-gold);
  margin-block: clamp(32px, 4vw, 48px);
}

.event-info__label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--color-gold);
  text-transform: uppercase;
  padding-top: 4px;
}

.event-info__value {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--color-navy-deep);
  letter-spacing: 0.04em;
}

.event-info__cta {
  grid-column: 1 / -1;
  margin-top: 16px;
}

/* === メディア掲載フィールド === */
.media-info {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: clamp(24px, 3vw, 32px);
  background-color: var(--color-white-pure);
  border: 1px solid rgba(15, 31, 61, 0.08);
  margin-block: clamp(32px, 4vw, 48px);
  align-items: center;
}

.media-info__thumbnail {
  aspect-ratio: 16 / 9;
  background-color: var(--color-greige);
  overflow: hidden;
}

.media-info__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.media-info__outlet {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--color-gold);
  text-transform: uppercase;
}

.media-info__title {
  font-family: var(--font-mincho);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-navy-deep);
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* === Worksページ専用：Before/After + Numbers === */
.case-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
  margin-block: clamp(48px, 6vw, 80px);
}

.case-overview__col {
  background-color: var(--color-white-pure);
  border: 1px solid rgba(15, 31, 61, 0.08);
  padding: clamp(28px, 4vw, 40px);
  position: relative;
}

.case-overview__col--before {
  background-color: var(--color-greige-light);
}

.case-overview__col--after {
  background-color: var(--color-navy-deep);
  color: var(--color-off-white);
  border-color: var(--color-gold);
}

.case-overview__label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--color-charcoal-soft);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.case-overview__col--after .case-overview__label {
  color: var(--color-gold);
}

.case-overview__title {
  font-family: var(--font-mincho);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-navy-deep);
  margin-bottom: 16px;
  line-height: 1.6;
}

.case-overview__col--after .case-overview__title {
  color: var(--color-off-white);
}

.case-overview__body {
  font-size: 0.9375rem;
  line-height: 1.95;
  letter-spacing: 0.04em;
}

/* === 数値ハイライト（事例の Numbers） === */
.case-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(40px, 5vw, 64px);
  background-color: var(--color-navy-deep);
  color: var(--color-off-white);
  margin-block: clamp(48px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}

.case-numbers::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 50%, rgba(200, 148, 26, 0.06) 0%, transparent 50%);
}

.case-number {
  position: relative;
  text-align: center;
}

.case-number__value {
  font-family: var(--font-mincho);
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  font-weight: 500;
  line-height: 1;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}

.case-number__unit {
  font-family: var(--font-serif);
  font-size: 0.5em;
  color: var(--color-gold);
  margin-left: 4px;
}

.case-number__label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: rgba(247, 245, 240, 0.7);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.case-number__desc {
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(247, 245, 240, 0.85);
  letter-spacing: 0.04em;
}

/* === Worksページ：事業情報サイドバー === */
.case-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  padding: clamp(24px, 3vw, 32px);
  background-color: var(--color-greige-light);
  margin-block: 40px;
}

.case-meta__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.case-meta__label {
  font-family: var(--font-serif);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--color-gold);
  text-transform: uppercase;
}

.case-meta__value {
  font-family: var(--font-mincho);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-navy-deep);
  letter-spacing: 0.04em;
}

/* === フォーム === */
.contact-form {
  max-width: 720px;
  margin-inline: auto;
}

.contact-form__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}

.contact-form__row--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.contact-form__row--two > .contact-form__row {
  margin-bottom: 0;
}

.contact-form__label {
  font-family: var(--font-sans-jp);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-navy-deep);
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-form__required {
  font-family: var(--font-serif);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--color-gold);
  text-transform: uppercase;
}

.contact-form__optional {
  font-family: var(--font-serif);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--color-charcoal-soft);
  text-transform: uppercase;
}

.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  font-family: var(--font-sans-jp);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  padding: 14px 18px;
  background-color: var(--color-white-pure);
  border: 1px solid rgba(15, 31, 61, 0.15);
  border-radius: 0;
  color: var(--color-navy-deep);
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-out);
  appearance: none;
}

.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: var(--color-gold);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.85;
  font-family: var(--font-sans-jp);
}

.contact-form__select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-gold) 50%),
    linear-gradient(135deg, var(--color-gold) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.contact-form__radio-group,
.contact-form__check-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

.contact-form__radio,
.contact-form__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
}

.contact-form__radio input,
.contact-form__check input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--color-gold);
  flex-shrink: 0;
}

.contact-form__consent {
  padding: 20px 24px;
  background-color: var(--color-greige-light);
  border-left: 3px solid var(--color-gold);
  margin-block: 32px;
}

.contact-form__consent a {
  color: var(--color-gold);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px 56px;
  font-family: var(--font-sans-jp);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--color-off-white);
  background-color: var(--color-navy-deep);
  border: 1px solid var(--color-navy-deep);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  margin-top: 16px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.contact-form__submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-gold);
  transform: translateX(-101%);
  transition: transform var(--duration-base) var(--ease-out);
  z-index: -1;
}

.contact-form__submit:hover {
  border-color: var(--color-gold);
}

.contact-form__submit:hover::before {
  transform: translateX(0);
}

.contact-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === Contact Form 7 出力の整形 ===
 * CF7 は各フィールドを <span class="wpcf7-form-control-wrap"> で包む。
 * 既存フォームCSSのレイアウトを維持するため、ラッパーや CF7 専用クラスをチューニング。
 */
.contact-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.contact-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  color: #c0392b;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.contact-form .wpcf7-response-output {
  margin: 32px 0 0;
  padding: 16px 20px;
  font-size: 0.875rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-align: center;
  border-radius: 0;
}

/* CF7 ラジオボタン → 既存 .contact-form__radio スタイルに寄せる */
.contact-form__radio-group .wpcf7-radio {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-form__radio-group .wpcf7-list-item {
  display: block;
  margin: 0;
}

.contact-form__radio-group .wpcf7-list-item > label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
}

.contact-form__radio-group .wpcf7-list-item input[type="radio"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--color-gold);
  flex-shrink: 0;
}

.contact-form__radio-group .wpcf7-list-item-label {
  display: inline;
}

/* CF7 同意チェックボックス（acceptance） */
.contact-form__consent .wpcf7-acceptance .wpcf7-list-item {
  display: block;
  margin: 0;
}

.contact-form__consent .wpcf7-acceptance .wpcf7-list-item > label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
}

.contact-form__consent .wpcf7-acceptance input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--color-gold);
  flex-shrink: 0;
}

/* CF7 送信ボタンラッパー */
.contact-form__submit-wrap {
  text-align: center;
  margin-top: 16px;
}

/* CF7 送信ボタンは <input type="submit">。既存 .contact-form__submit を適用 */
.contact-form .wpcf7-submit {
  font-family: var(--font-sans-jp);
}

/* CF7 スピナー位置調整 */
.contact-form .wpcf7-spinner {
  margin-left: 12px;
  vertical-align: middle;
}

/* 送信中の状態 */
.contact-form .wpcf7-form.submitting .contact-form__submit,
.contact-form .wpcf7-form.submitting .wpcf7-submit {
  opacity: 0.7;
  pointer-events: none;
}

/* === 規約・プライバシーポリシー用 === */
.legal-content {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 48px);
}

.legal-content section {
  margin-bottom: clamp(40px, 5vw, 56px);
}

.legal-content h2 {
  font-family: var(--font-mincho);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 500;
  color: var(--color-navy-deep);
  letter-spacing: 0.08em;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(15, 31, 61, 0.1);
}

.legal-content p,
.legal-content li {
  font-size: 0.9375rem;
  line-height: 2;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
}

.legal-content p {
  margin-bottom: 16px;
}

.legal-content ol,
.legal-content ul {
  margin: 16px 0 16px 24px;
}

.legal-content ol li,
.legal-content ul li {
  margin-bottom: 8px;
}

.legal-content__update {
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  color: var(--color-charcoal-soft);
  letter-spacing: 0.1em;
  margin-top: clamp(48px, 6vw, 64px);
  padding-top: 24px;
  border-top: 1px solid rgba(15, 31, 61, 0.08);
}

/* === レスポンシブ === */
@media (max-width: 1024px) {
  .card-grid,
  .card-grid--two {
    grid-template-columns: repeat(2, 1fr);
  }
  .rich-article__layout {
    grid-template-columns: 1fr;
  }
  .toc {
    position: static;
  }
  .case-overview {
    grid-template-columns: 1fr;
  }
  .case-numbers {
    grid-template-columns: 1fr;
  }
  .event-info,
  .media-info {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .card-grid,
  .card-grid--two {
    grid-template-columns: 1fr;
  }
  .contact-form__row--two {
    grid-template-columns: 1fr;
  }
  .tag-filter {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
  }
  .tag-filter__btn {
    flex-shrink: 0;
  }
}

/* ============================================
   22. 顧問with フロー（過去⇄現在⇄未来のデータ統合）
   APPROACH と WORKS の間に置かれる
============================================ */
.komon-with {
  padding-block: var(--space-section-large);
  background-color: var(--color-off-white);
  position: relative;
  overflow: hidden;
}

.komon-with::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(200, 148, 26, 0.05) 0%, transparent 60%);
  pointer-events: none;
}

.komon-with__head {
  text-align: center;
  margin-bottom: clamp(60px, 8vw, 100px);
  position: relative;
}

.komon-with__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mincho);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  color: var(--color-navy-deep);
  letter-spacing: 0.08em;
  margin-bottom: 24px;
}

.komon-with__brand-en {
  font-family: var(--font-serif);
  font-size: 0.55em;
  color: var(--color-gold);
  font-style: italic;
  letter-spacing: 0.15em;
  font-weight: 400;
}

.komon-with__lead {
  font-size: 0.9375rem;
  line-height: 2.1;
  color: var(--color-charcoal);
  letter-spacing: 0.06em;
  max-width: 720px;
  margin-inline: auto;
}

/* === 3段フロー（過去 → 顧問with → 未来） === */
.komon-with__flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  position: relative;
}

.komon-with__col {
  padding: clamp(32px, 4vw, 48px) clamp(20px, 2.5vw, 32px);
  background-color: var(--color-greige-light);
  border: 1px solid rgba(15, 31, 61, 0.05);
  position: relative;
}

.komon-with__col--past {
  text-align: right;
}

.komon-with__col-label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--color-gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
}

.komon-with__col-title {
  font-family: var(--font-mincho);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: 500;
  color: var(--color-navy-deep);
  letter-spacing: 0.08em;
  margin-bottom: 24px;
  line-height: 1.6;
}

.komon-with__col-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
}

.komon-with__col-list li {
  position: relative;
}

.komon-with__col--past .komon-with__col-list li {
  padding-right: 18px;
}

.komon-with__col--past .komon-with__col-list li::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0.85em;
  width: 8px;
  height: 1px;
  background-color: var(--color-gold);
}

.komon-with__col--future .komon-with__col-list li {
  padding-left: 18px;
}

.komon-with__col--future .komon-with__col-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 8px;
  height: 1px;
  background-color: var(--color-gold);
}

/* === 中央：顧問with（メインビジュアル） === */
.komon-with__center {
  padding: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px);
  background-color: var(--color-navy-deep);
  color: var(--color-off-white);
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-gold);
}

.komon-with__center::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 50%, rgba(200, 148, 26, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(200, 148, 26, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.komon-with__center-inner {
  position: relative;
}

.komon-with__center-label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--color-gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
}

.komon-with__center-title {
  font-family: var(--font-mincho);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  color: var(--color-off-white);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  line-height: 1.5;
}

.komon-with__center-subtitle {
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  color: var(--color-gold);
  letter-spacing: 0.15em;
  font-style: italic;
  margin-bottom: 28px;
}

.komon-with__ui {
  width: 100%;
  height: auto;
  max-width: 360px;
  margin-inline: auto;
  display: block;
  margin-bottom: 28px;
}

.komon-with__center-desc {
  font-size: 0.875rem;
  line-height: 2;
  color: rgba(247, 245, 240, 0.85);
  letter-spacing: 0.06em;
}

/* === 矢印（左→中央←右）：擬似要素で描画 === */
.komon-with__col--past::after,
.komon-with__col--future::before {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(20px, 3vw, 48px);
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--color-gold) 100%);
  z-index: 1;
}

.komon-with__col--past::after {
  right: calc(-1 * clamp(20px, 3vw, 48px));
  background: linear-gradient(to right, var(--color-gold) 0%, transparent 100%);
}

.komon-with__col--future::before {
  left: calc(-1 * clamp(20px, 3vw, 48px));
  background: linear-gradient(to left, var(--color-gold) 0%, transparent 100%);
}

/* === 矢印先（▶）の三角形 === */
.komon-with__arrow {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  z-index: 1;
}

.komon-with__arrow--right {
  right: calc(-1 * clamp(20px, 3vw, 48px) - 4px);
  border-left: 6px solid var(--color-gold);
  transform: translateY(-50%);
}

.komon-with__arrow--left {
  left: calc(-1 * clamp(20px, 3vw, 48px) - 4px);
  border-right: 6px solid var(--color-gold);
  transform: translateY(-50%);
}

/* === 結びのメッセージ === */
.komon-with__close {
  margin-top: clamp(60px, 8vw, 100px);
  text-align: center;
}

.komon-with__close-line {
  display: block;
  width: 60px;
  height: 1px;
  background-color: var(--color-gold);
  margin: 0 auto 24px;
}

.komon-with__close-text {
  font-family: var(--font-mincho);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 500;
  color: var(--color-navy-deep);
  letter-spacing: 0.1em;
  line-height: 1.8;
}

@media (max-width: 1024px) {
  .komon-with__flow {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .komon-with__col--past {
    text-align: left;
  }
  .komon-with__col--past .komon-with__col-list li {
    padding-right: 0;
    padding-left: 18px;
  }
  .komon-with__col--past .komon-with__col-list li::after {
    display: none;
  }
  .komon-with__col--past .komon-with__col-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 8px;
    height: 1px;
    background-color: var(--color-gold);
  }
  .komon-with__col--past::after,
  .komon-with__col--future::before {
    display: none;
  }
}

/* ============================================
   23. 顧問with（v2 パララックス・プロダクトデモ型）
   左：固定PC、右：スクロール連動で機能を順次紹介
============================================ */
.kw-parallax {
  position: relative;
  padding-block: clamp(140px, 16vh, 200px);
  /* 明るい基調に変更。他セクションと繋がりを保ちつつ、PC本体が視覚的アンカーになる */
  background-color: var(--color-off-white);
  color: var(--color-charcoal);
  /* overflow: clip にすることで sticky が壊れない（hidden は sticky を破壊する） */
  overflow: clip;
}

/* 背景画像レイヤー（オフィス／抽象テクスチャ） */
.kw-parallax__bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(200, 148, 26, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(15, 31, 61, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, var(--color-off-white) 0%, var(--color-greige-light) 60%, var(--color-off-white) 100%);
  pointer-events: none;
  z-index: 0;
}

.kw-parallax__bg-texture {
  position: absolute;
  inset: 0;
  background-image: url('../images/komon-with/bg-texture.svg');
  background-size: cover;
  background-position: center;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

.kw-parallax__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 48px);
}

/* ===== セクション見出し（イントロ） ===== */
.kw-parallax__intro {
  text-align: center;
  margin-bottom: clamp(80px, 10vw, 140px);
  max-width: 720px;
  margin-inline: auto;
}

.kw-parallax__label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--color-gold);
  text-transform: uppercase;
  display: inline-block;
  padding-inline: 36px;
  position: relative;
  margin-bottom: 28px;
}

.kw-parallax__label::before,
.kw-parallax__label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 24px;
  height: 1px;
  background-color: var(--color-gold);
}

.kw-parallax__label::before { left: 0; }
.kw-parallax__label::after { right: 0; }

.kw-parallax__brand {
  font-family: var(--font-mincho);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-bottom: 24px;
  line-height: 1.3;
  color: var(--color-navy-deep);
}

.kw-parallax__brand-accent {
  color: var(--color-gold);
}

.kw-parallax__brand-en {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-style: italic;
  color: var(--color-gold);
  letter-spacing: 0.3em;
  margin-top: 8px;
  font-weight: 400;
}

.kw-parallax__lead {
  font-size: 0.9375rem;
  line-height: 2.1;
  color: var(--color-charcoal);
  letter-spacing: 0.06em;
}

/* ===== メインエリア（左固定PC × 右スクロール特徴） ===== */
.kw-parallax__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  position: relative;
}

/* === 左：固定 PC === */
.kw-parallax__visual {
  position: sticky;
  top: clamp(80px, 12vh, 120px);
  height: calc(100vh - clamp(80px, 12vh, 120px) - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kw-parallax__pc {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 11;
}

.kw-parallax__pc-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.kw-parallax__screens {
  /* 画面スロット：PCフレーム画像の画面エリアに重なるよう位置調整 */
  /* z-index を 2 にすることで、どんな PC画像（透過版/実写版）でも画面が前面に確実に出る */
  position: absolute;
  top: 3.2%;
  left: 7%;
  right: 7%;
  bottom: 22%;
  background-color: #0F1F3D;
  overflow: hidden;
  z-index: 2;
}

.kw-parallax__screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.04);
  filter: blur(6px);
  /* シンプルなクロスフェード（遅延なし）：旧画面のフェードアウトと新画面のフェードインを同時に行う */
  transition:
    opacity 1.4s ease-in-out,
    transform 1.4s ease-in-out,
    filter 1.4s ease-in-out;
  will-change: opacity, transform, filter;
}

.kw-parallax__screen.is-active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* === 右：スクロールする機能ブロック === */
.kw-parallax__features {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.kw-feat {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(40px, 6vw, 80px);
}

.kw-feat__num {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.kw-feat__num-value {
  font-family: var(--font-mincho);
  font-size: 2.5rem;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  line-height: 1;
}

.kw-feat__num-total {
  opacity: 0.5;
}

.kw-feat__title {
  font-family: var(--font-mincho);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-navy-deep);
  letter-spacing: 0.08em;
  margin-bottom: 28px;
}

.kw-feat__body {
  font-size: 0.9375rem;
  line-height: 2.1;
  color: var(--color-charcoal);
  letter-spacing: 0.06em;
  margin-bottom: 32px;
  max-width: 480px;
}

.kw-feat__highlights {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 460px;
}

.kw-feat__highlight {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(200, 148, 26, 0.35);
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
}

.kw-feat__highlight:last-child {
  border-bottom: 1px solid rgba(200, 148, 26, 0.35);
}

.kw-feat__highlight-label {
  font-family: var(--font-serif);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--color-gold);
  text-transform: uppercase;
  flex-shrink: 0;
  min-width: 60px;
}

/* ===== 結びメッセージ ===== */
.kw-parallax__close {
  margin-top: clamp(80px, 10vw, 120px);
  text-align: center;
  position: relative;
  z-index: 1;
}

.kw-parallax__close-line {
  display: block;
  width: 60px;
  height: 1px;
  background-color: var(--color-gold);
  margin: 0 auto 24px;
}

.kw-parallax__close-text {
  font-family: var(--font-mincho);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 500;
  color: var(--color-navy-deep);
  letter-spacing: 0.12em;
  line-height: 1.8;
}

/* ===== レスポンシブ ===== */
@media (max-width: 1024px) {
  .kw-parallax__main {
    grid-template-columns: 1fr;
  }
  .kw-parallax__visual {
    position: static;
    height: auto;
    max-width: 640px;
    margin-inline: auto;
  }
  .kw-feat {
    min-height: auto;
    padding-block: 60px;
  }
}

/* ============================================
   24. サービスページ統一構成 v2 用コンポーネント
   - .concerns（こんなお悩み 3カード）
   - .voices（ユーザーの声 3カード）
   - .journey-map（ジャーニーマップ 3/4 フェーズ）
   - .dual-stats（数字でわかる実績 2数値並列）
============================================ */

/* === Concerns：こんなお悩みありませんか？ === */
.concerns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
}

.concern-card {
  background-color: var(--color-white-pure);
  border: 1px solid rgba(15, 31, 61, 0.08);
  padding: clamp(32px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.concern-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 48px -16px rgba(15, 31, 61, 0.12);
}

.concern-card__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.concern-card__num {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-gold);
  letter-spacing: 0.08em;
  line-height: 1;
}

.concern-card__title {
  font-family: var(--font-mincho);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-navy-deep);
  line-height: 1.65;
}

.concern-card__lead {
  font-family: var(--font-mincho);
  font-size: 0.9375rem;
  line-height: 1.95;
  color: var(--color-navy-deep);
  letter-spacing: 0.06em;
  padding: 20px 0 20px 24px;
  border-left: 2px solid var(--color-gold);
}

.concern-card__body {
  font-size: 0.875rem;
  line-height: 2;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
}

.concern-card__voices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(15, 31, 61, 0.08);
}

.concern-card__voice {
  font-family: var(--font-mincho);
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
  padding-left: 18px;
  position: relative;
}

.concern-card__voice::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 8px;
  height: 1px;
  background-color: var(--color-gold);
}

.concerns__note {
  margin-top: clamp(32px, 4vw, 48px);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-charcoal-soft);
  letter-spacing: 0.08em;
  font-family: var(--font-mincho);
}

/* === Voices：ユーザーの声 === */
.voices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
}

.voice-card {
  background-color: var(--color-white-pure);
  border: 1px solid rgba(15, 31, 61, 0.08);
  padding: clamp(28px, 3.5vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.voice-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.voice-card__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-navy-deep), var(--color-navy));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.voice-card__photo-mark {
  font-family: var(--font-mincho);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-gold);
  letter-spacing: 0.04em;
  line-height: 1;
}

.voice-card__industry {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.voice-card__industry-name {
  font-family: var(--font-mincho);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-navy-deep);
  letter-spacing: 0.06em;
}

.voice-card__industry-meta {
  font-family: var(--font-serif);
  font-size: 0.6875rem;
  color: var(--color-charcoal-soft);
  letter-spacing: 0.15em;
}

.voice-card__quote {
  font-family: var(--font-mincho);
  font-size: 0.9375rem;
  line-height: 2;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
  position: relative;
  padding-left: 22px;
  flex: 1;
}

.voice-card__quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-gold);
}

.voice-card__quote p + p {
  margin-top: 14px;
}

.voice-card__phase {
  font-family: var(--font-serif);
  font-size: 0.6875rem;
  color: var(--color-gold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 31, 61, 0.08);
}

/* === Journey Map：3/4フェーズのジャーニーマップ === */
.journey-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
  position: relative;
}

.journey-map--four {
  grid-template-columns: repeat(4, 1fr);
}

.journey-map__phase {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: var(--color-white-pure);
  border: 1px solid rgba(15, 31, 61, 0.08);
  padding: clamp(28px, 3.5vw, 40px);
  position: relative;
  z-index: 1;
}

.journey-map__phase-num {
  font-family: var(--font-serif);
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  text-transform: uppercase;
  font-weight: 500;
}

.journey-map__phase-title {
  font-family: var(--font-mincho);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 500;
  color: var(--color-navy-deep);
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.journey-map__phase-state {
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(200, 148, 26, 0.3);
}

.journey-map__phase-scale {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--color-charcoal-soft);
  margin-top: -6px;
}

.journey-map__phase-actions-label {
  font-family: var(--font-serif);
  font-size: 0.6875rem;
  letter-spacing: 0.25em;
  color: var(--color-gold);
  text-transform: uppercase;
  font-weight: 500;
}

.journey-map__phase-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.journey-map__phase-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
}

.journey-map__phase-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 8px;
  height: 1px;
  background-color: var(--color-gold);
}

/* === Dual Stats：数字でわかる実績（2数値並列） === */
.dual-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: stretch;
  padding-block: clamp(32px, 4vw, 56px);
}

.dual-stat {
  background-color: var(--color-white-pure);
  border: 1px solid rgba(15, 31, 61, 0.08);
  padding: clamp(40px, 5vw, 64px);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

.dual-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background-color: var(--color-gold);
}

.dual-stat__label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-top: 12px;
}

.dual-stat__number {
  font-family: var(--font-mincho);
  font-size: clamp(3.5rem, 7vw, 5rem);
  font-weight: 500;
  color: var(--color-navy-deep);
  line-height: 1;
  letter-spacing: 0.02em;
}

.dual-stat__unit {
  font-family: var(--font-serif);
  font-size: 0.45em;
  color: var(--color-gold);
  margin-left: 4px;
  vertical-align: super;
}

.dual-stat__caption {
  font-family: var(--font-mincho);
  font-size: 0.9375rem;
  color: var(--color-navy-deep);
  letter-spacing: 0.08em;
  line-height: 1.7;
}

.dual-stats__lead {
  margin-top: clamp(32px, 4vw, 48px);
  font-size: 0.9375rem;
  line-height: 2.1;
  color: var(--color-charcoal);
  letter-spacing: 0.06em;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

/* === レスポンシブ === */
@media (max-width: 1024px) {
  .concerns,
  .voices {
    grid-template-columns: 1fr;
  }
  .journey-map,
  .journey-map--four {
    grid-template-columns: 1fr;
  }
  .dual-stats {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   25. サービスページ：カード一辺倒からの脱却用 3コンポーネント
   - .results-impact（紺背景の劇的実績セクション）
   - .offering-list（タイポグラフィ駆動のミニマル提供範囲）
   - .journey-flow（横長フロー型のジャーニーマップ）
============================================ */

/* === Results Impact：紺背景・大きな数字で劇的に === */
.results-impact {
  background-color: var(--color-navy-deep);
  color: var(--color-off-white);
  padding-block: clamp(120px, 16vw, 200px);
  position: relative;
  overflow: hidden;
}

.results-impact::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 50%, rgba(200, 148, 26, 0.10) 0%, transparent 55%),
    radial-gradient(circle at 75% 50%, rgba(200, 148, 26, 0.06) 0%, transparent 55%);
  pointer-events: none;
}

.results-impact__container {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 48px);
}

.results-impact__head {
  text-align: center;
  margin-bottom: clamp(60px, 8vw, 100px);
}

.results-impact__label {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 24px;
  position: relative;
  padding-inline: 36px;
}

.results-impact__label::before,
.results-impact__label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 24px;
  height: 1px;
  background-color: var(--color-gold);
}

.results-impact__label::before { left: 0; }
.results-impact__label::after { right: 0; }

.results-impact__heading {
  font-family: var(--font-mincho);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-off-white);
  line-height: 1.5;
}

.results-impact__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.results-impact__divider {
  width: 1px;
  height: clamp(180px, 22vw, 280px);
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(200, 148, 26, 0.5) 50%,
    transparent 100%);
}

.results-impact__num-block {
  text-align: center;
}

.results-impact__num-label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 28px;
  display: block;
}

.results-impact__num-value {
  font-family: var(--font-mincho);
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: 500;
  color: var(--color-off-white);
  line-height: 0.95;
  letter-spacing: -0.02em;
  display: block;
}

.results-impact__num-unit {
  font-family: var(--font-serif);
  font-size: 0.3em;
  color: var(--color-gold);
  margin-left: 8px;
  vertical-align: top;
  display: inline-block;
  margin-top: 0.4em;
}

.results-impact__num-caption {
  font-family: var(--font-mincho);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: rgba(247, 245, 240, 0.9);
  letter-spacing: 0.1em;
  margin-top: 32px;
  line-height: 1.6;
}

.results-impact__num-sub {
  font-size: 0.75rem;
  color: rgba(247, 245, 240, 0.5);
  letter-spacing: 0.06em;
  margin-top: 8px;
  display: block;
}

.results-impact__lead {
  margin-top: clamp(80px, 10vw, 120px);
  text-align: center;
  font-size: 0.9375rem;
  line-height: 2.1;
  color: rgba(247, 245, 240, 0.8);
  letter-spacing: 0.06em;
  max-width: 720px;
  margin-inline: auto;
}

/* === Offering List：タイポグラフィ駆動のミニマル提供範囲 === */
.offering-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(48px, 6vw, 96px);
}

.offering-list__col {
  position: relative;
  padding-left: 28px;
}

.offering-list__col::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom,
    var(--color-gold) 0%,
    var(--color-gold) 60%,
    rgba(200, 148, 26, 0.2) 100%);
}

.offering-list__col-category {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.offering-list__col-title {
  font-family: var(--font-mincho);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 500;
  color: var(--color-navy-deep);
  letter-spacing: 0.08em;
  margin-bottom: 32px;
  line-height: 1.5;
}

.offering-list__col-items {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.offering-list__col-items li {
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
}

.offering-list__col-items li strong {
  display: block;
  font-family: var(--font-mincho);
  font-weight: 500;
  color: var(--color-navy-deep);
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.offering-list__col-items li em {
  font-style: normal;
  color: var(--color-charcoal-soft);
  font-size: 0.875em;
  letter-spacing: 0.04em;
}

/* === Journey Flow：横長フロー型ジャーニー === */
.journey-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.journey-flow--four {
  grid-template-columns: repeat(4, 1fr);
}

/* 上部の連結ライン（時間軸） */
.journey-flow::before {
  content: "";
  position: absolute;
  top: 38px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 1px;
  background: linear-gradient(to right,
    rgba(200, 148, 26, 0.2) 0%,
    rgba(200, 148, 26, 0.6) 20%,
    rgba(200, 148, 26, 0.6) 80%,
    rgba(200, 148, 26, 0.2) 100%);
  z-index: 1;
}

.journey-flow--four::before {
  left: calc(100% / 8);
  right: calc(100% / 8);
}

.journey-flow__phase {
  padding: 0 clamp(12px, 1.5vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.journey-flow__phase-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
  margin-bottom: 16px;
}

.journey-flow__phase-num {
  font-family: var(--font-serif);
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  text-transform: uppercase;
  font-weight: 500;
}

.journey-flow__phase-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-off-white);
  border: 1.5px solid var(--color-gold);
  position: relative;
  z-index: 3;
}

.journey-flow__phase-dot::after {
  content: "";
  position: absolute;
  inset: 4px;
  background-color: var(--color-gold);
  border-radius: 50%;
  opacity: 0.5;
}

/* セクション交互背景で point が見えるよう */
.page-section--alt .journey-flow__phase-dot {
  background-color: var(--color-greige-light);
}

.journey-flow__phase-title {
  font-family: var(--font-mincho);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 500;
  color: var(--color-navy-deep);
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-align: center;
  margin-top: 8px;
}

.journey-flow__phase-state {
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(200, 148, 26, 0.25);
}

.journey-flow__phase-scale {
  font-family: var(--font-serif);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  color: var(--color-charcoal-soft);
  margin-top: -6px;
}

.journey-flow__phase-actions-label {
  font-family: var(--font-serif);
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 4px;
}

.journey-flow__phase-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.journey-flow__phase-list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--color-charcoal);
  letter-spacing: 0.04em;
}

.journey-flow__phase-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 8px;
  height: 1px;
  background-color: var(--color-gold);
}

/* === レスポンシブ === */
@media (max-width: 1024px) {
  .results-impact__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .results-impact__divider {
    width: clamp(180px, 22vw, 280px);
    height: 1px;
    background: linear-gradient(to right,
      transparent 0%,
      rgba(200, 148, 26, 0.5) 50%,
      transparent 100%);
    margin-inline: auto;
  }
  .offering-list {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .journey-flow,
  .journey-flow--four {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .journey-flow::before {
    display: none;
  }
  .journey-flow__phase {
    padding: 0;
  }
  .journey-flow__phase-header {
    align-items: flex-start;
  }
  .journey-flow__phase-title {
    text-align: left;
  }
}