@charset "utf-8";

/* ==========================================================================
   株式会社デンタル・デジタル・ウェルビーイング — v2
   Claude Design「ヒーローC」（PC1440 / SP375）を忠実に再現したもの。
   固定キャンバスの px 座標を 1440 基準の比率へ変換し、
   見た目を変えずに 375〜1440+ で伸縮するようにしてある。
   ========================================================================== */

:root {
  /* ---- カラー（ヒーローCの実測値） ---- */
  --bg:            #FFFFFF;
  --bg-tint:       #F2F6FC;
  --bg-invert:     #0A1A56;
  --navy-900:      #071F56;
  --text:          #0A2463;
  --text-muted:    #24467F;
  --blue-500:      #17489D;
  --blue-100:      #DDE7F7;
  --ghost:         #E4EBF7;
  --border:        #DCE4F0;
  --veil: linear-gradient(180deg, rgba(224,235,251,.54), rgba(210,226,248,.48));
  --photo-filter: saturate(.42) brightness(1.14) contrast(.90);

  /* ---- フォント ---- */
  --f-serif: "Noto Serif JP", serif;
  --f-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --f-en:    "Cormorant Garamond", serif;
  --f-ui:    Inter, var(--f-sans);

  /* ---- タイプスケール（375 → 1440 で補間） ---- */
  --fs-h1:      clamp(30px, 20.36px + 2.57vw, 46px);
  --fs-lede:    clamp(26px, 16.36px + 2.57vw, 46px);   /* セクション大見出し */
  --fs-eyebrow: clamp(22px, 19.18px + 0.75vw, 30px);
  --fs-pull:    clamp(22px, 18.48px + 0.94vw, 32px);
  --fs-quote:   clamp(21px, 17.13px + 1.03vw, 32px);
  --fs-close:   clamp(20px, 17.89px + 0.56vw, 26px);
  --fs-h3:      clamp(19px, 17.24px + 0.47vw, 24px);
  --fs-h3s:     clamp(18px, 16.94px + 0.28vw, 21px);   /* 2層図の見出し */
  --fs-body:    clamp(15px, 14.65px + 0.09vw, 16px);
  --fs-tag:     clamp(13px, 12.65px + 0.09vw, 14px);

  /* ---- 1440 基準のレイアウト比率 ---- */
  --pad-l: 13.889%;   /* 200 / 1440 */
  --pad-r: 6.667%;    /*  96 / 1440 */
  --measure: 42em;    /* 読ませる本文の幅 */

  --ease: cubic-bezier(.22, 1, .36, 1);
  /* せり上がり用。ゆっくり出て、最後にぴたっと止まる。明朝の見出しに一番効く */
  --ease-rise: cubic-bezier(.3, .015, .12, 1);
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 2;
  letter-spacing: .04em;
  line-break: strict;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; }
a { color: var(--blue-500); text-decoration: none; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 8px; top: -64px; z-index: 999;
  padding: 12px 20px; background: #fff; color: var(--text);
  border: 1px solid var(--border); transition: top 160ms var(--ease);
}
.skip-link:focus { top: 8px; }

/* 改行の出し分け（br を隠したとき空白が残らないよう HTML 側で詰めて書くこと） */
.br-pc { display: none; }
.br-sp { display: inline; }
@media (min-width: 768px) { .br-pc { display: inline; } .br-sp { display: none; } }

/* ==========================================================================
   共通パーツ
   ========================================================================== */

/* 罫線で挟んだ英字ラベル */
.rule-label {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 1.67vw, 24px);
  font-family: var(--f-ui); font-weight: 600;
  font-size: clamp(11px, 9.19px + 0.35vw, 16px);
  letter-spacing: .20em; color: var(--blue-500);
}
.rule-label span { display: block; width: clamp(28px, 3.47vw, 50px); height: 1px; background: currentColor; }

/* 有機的な角丸のボタン（ヒーローCの署名的形状） */
.btn-blob {
  display: inline-flex; align-items: center; justify-content: center;
  gap: clamp(16px, 1.94vw, 28px);
  width: min(468px, 100%); min-height: clamp(60px, 5vw, 72px);
  padding: 0 24px;
  border-radius: 150px 110px 135px 120px / 38px 36px 36px 38px;
  background: var(--bg-invert); color: #fff;
  font-family: var(--f-sans); font-weight: 400;
  font-size: clamp(16px, 14.59px + 0.38vw, 20px); letter-spacing: .04em;
  transition: background-color 220ms var(--ease);
}
.btn-blob:hover { background: #12266F; }
.btn-blob .arw, .link-arw .arw { font-size: .85em; letter-spacing: -.1em; }

.link-arw {
  display: inline-flex; align-items: center; gap: clamp(16px, 1.39vw, 20px);
  min-height: 44px;
  font-size: clamp(15px, 14.29px + 0.19vw, 17px); letter-spacing: .06em;
  color: var(--blue-500);
  transition: color 220ms var(--ease);
}
.link-arw:hover { color: var(--bg-invert); }

/* 巨大な薄い英字（装飾。意味は h2 が持つ） */
.ghost {
  position: absolute; z-index: 0; pointer-events: none;
  font-family: var(--f-en); font-weight: 300;
  /* 画面幅いっぱいに近い大きさで置くが、いちばん長い THINKING / SPEAKING が
     375px でも見切れないところまで傾きを落としてある（2026-08-17）。
     大きくするなら、375px で8文字が収まるかを必ず測ること */
  font-size: clamp(60px, 2px + 17vw, 255px);
  line-height: .86; letter-spacing: .02em;
  color: var(--ghost); white-space: nowrap;
}

/* ==========================================================================
   ヒーロー
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--bg-tint);
}

.hero__photo { position: absolute; z-index: -3; overflow: hidden; }
/* ヒーローの写真だけは加工しない。実際の写真をそのまま見せる（2026-08-17 本人指示）。
   ほかのセクションの写真には従来どおり --photo-filter を掛けている */
.hero__photo img {
  position: absolute; top: 0; height: 100%; width: auto; max-width: none;
  object-fit: cover;
}
.hero__panel { position: absolute; z-index: -1; }

/* --- ヒーロー：PC（768px 以上）。1440×960 の座標を比率化 --- */
@media (min-width: 768px) {
  .hero { height: clamp(760px, 66.67vw, 960px); }

  .hero__photo--l { top: 0; left: 0; width: 41.667%; height: 100%; }        /* 600/1440 */
  .hero__photo--l img { left: -38.67%; width: 240%; }                        /* -232/600, 1440/600 */
  .hero__photo--r { top: 0; left: 59.722%; width: 40.278%; height: 100%; }   /* 860/1440, 580/1440 */
  /* 左右とも同じ写真を、別の位置で切り出している。中央は有機形状パネルで隠れるので、
     左に高野、右にスタッフが来るように送っている。
     写真を差し替えるときは、この2つの数値も必ず取り直すこと */
  .hero__photo--r img { left: -110.34%; width: 248.28%; }                    /* -640/580, 1440/580 */

  .hero__panel { top: -4.58%; left: 19.58%; width: 62.5%;  height: 109.17%; }/* -44/960, 282/1440, 900/1440, 1048/960 */

  .hero__body {
    position: absolute; top: 0; left: 22.22%; width: 57.22%; height: 100%;   /* 320/1440, 824/1440 */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding-bottom: 24px;
  }
}

/* タブレット帯だけ、器が H1 の1行目（約455px）より狭く「テクノロジーに任せ／て、」と割れる。
   有機形状パネル（19.58%〜82.08%）の幅いっぱいまで広げて逃がす。
   ↑ の基底定義より後ろに置くこと */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__body { left: 19.58%; width: 62.5%; }
}

/* --- ヒーロー：SP（767px 以下）。375×980 を流し込みで再現 --- */
@media (max-width: 767px) {
  .hero { padding-bottom: 72px; }
  /* veil を外した（写真をそのまま見せる）ので、SP では文字が写真に重なると読めない。
     写真の帯を本文の手前で終わらせ、文字は必ず白い面の上に来るようにしてある。
     H1 を大きくするなら、この height と .hero__body の padding-top も一緒に見直すこと（2026-08-17） */
  .hero__photo--l { top: 0; left: 0; width: 100%; height: 330px; }
  .hero__photo--l img { left: -31.5%; width: 208%; }                         /* -118/375, 780/375 */
  .hero__photo--r { display: none; }
  .hero__panel { top: 236px; left: -52px; width: 480px; height: 720px; }

  .hero__body {
    position: relative; margin: 0 20px; padding-top: 344px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
}

.hero__title {
  margin-top: clamp(22px, 12.36px + 2.57vw, 34px);
  font-family: var(--f-serif); font-weight: 400;
  font-size: var(--fs-h1); line-height: 1.55; letter-spacing: .04em;
  color: var(--text); text-align: center;
}
/* ↑ の基底定義より後ろに置くこと。順序を逆にすると効かない。
   30px 固定だと 375px 幅で「テクノロジーに任せて、」が約6px はみ出し、
   .hero の overflow:hidden で末尾が切れる。幅に比例させて切れを防ぐ */
@media (max-width: 767px) {
  .hero__title { font-size: min(30px, 7.5vw); }
}

/* タグライン。左上から中央へ移したので、ここが見せ場になる（2026-08-16） */
.hero__tagline {
  margin-top: clamp(20px, 8.55px + 3.05vw, 42px);
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(18px, 13.3px + 1.25vw, 28px);
  line-height: 1.7; letter-spacing: .1em;
  color: var(--text); text-align: center;
}
/* 1行に収まるのは 1100px から。それ未満は読点で2行に折る。
   br を隠す方式なので、HTML 側は br の前後を詰めて1行で書くこと */
.br-tag { display: inline; }
@media (min-width: 1100px) { .br-tag { display: none; } }
/* PC は1行（間に空きを持たせる）、SP は2行。
   br を隠す方式だと空白が残るため、span を flex で並べて出し分ける */
.hero__lead {
  margin-top: clamp(14px, 9.3px + 1.25vw, 24px);
  display: flex; flex-direction: column; align-items: center;
  font-weight: 500; font-size: clamp(12px, 10.59px + 0.38vw, 16px);
  line-height: 1.9; letter-spacing: .08em;
  color: var(--text-muted); text-align: center;
}
@media (min-width: 768px) {
  .hero__lead { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 1em; }
}
.hero__body .btn-blob { margin-top: clamp(34px, 18.7px + 4.08vw, 52px); }
.hero__body .link-arw { margin-top: clamp(18px, 9.55px + 2.25vw, 26px); }

/* ---------- ヘッダー ---------- */
/* 左上のブランド表記は廃止したので、ナビだけを右に寄せる（2026-08-16） */
.site-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: flex-start; justify-content: flex-end;
  gap: 24px;
  padding: clamp(24px, 8.65px + 2.09vw, 38px) clamp(20px, 12.5px + 1.94vw, 48px) 0;
}
.site-nav { display: none; }
.site-head__toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px; padding: 0 8px; margin: -4px -8px 0 0;
  border: 0; background: transparent; cursor: pointer;
}
/* ↑ の基底定義より後ろに置くこと。順序を逆にすると display:none が上書きされる */
@media (min-width: 1024px) {
  .site-nav {
    display: flex; align-items: center; gap: clamp(20px, 2.5vw, 36px); padding-top: 6px;
  }
  .site-nav a {
    font-weight: 500; font-size: clamp(14px, 11.18px + 0.28vw, 18px);
    letter-spacing: .06em; color: var(--navy-900);
    transition: color 200ms var(--ease);
  }
  .site-nav a:hover { color: var(--blue-500); }
  .site-nav__cta { text-decoration: underline; text-underline-offset: 6px; }
  .site-head__toggle { display: none; }
}
.site-head__toggle span {
  display: block; height: 1.5px; background: var(--navy-900);
  transition: transform 220ms var(--ease), opacity 220ms var(--ease);
}
.site-head__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.site-head__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-head__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* SP メニュー */
.sp-menu {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 0 24px; background: var(--bg-tint);
  opacity: 0; visibility: hidden; transition: opacity 240ms var(--ease), visibility 240ms;
}
.sp-menu[data-open="true"] { opacity: 1; visibility: visible; }
.sp-menu a {
  display: flex; align-items: center; min-height: 56px;
  font-family: var(--f-serif); font-size: 19px; letter-spacing: .06em;
  color: var(--text); border-bottom: 1px solid var(--border);
}
.sp-menu .btn-blob { margin-top: 28px; border-bottom: 0; color: #fff; }
@media (min-width: 1024px) { .sp-menu { display: none; } }

/* ==========================================================================
   セクション共通
   ========================================================================== */
/* overflow は hidden ではなく clip。
   hidden はこのセクションを「スクロール枠」にしてしまい、中の要素の
   animation-timeline: view() が**このセクションを基準に取って無効化される**
   （currentTime が null になり、背面英字も有機形状も動かなくなる）。
   clip は同じように切るがスクロール枠を作らないので、view() が画面基準になる。 */
.sec { position: relative; overflow: clip; }
/* .blob は 2026-08-17 に廃止したが :not() は残してある。
   外すと詳細度が (0,3,0) → (0,2,0) に下がり、後ろの規則との勝ち負けが変わる。
   意味は無いが、消さないほうが安全 */
.sec > *:not(.ghost):not(.blob) { position: relative; z-index: 1; }

.sec__head, .sec__body, .sec__outro {
  padding-left: var(--pad-l); padding-right: var(--pad-r);
}
@media (max-width: 767px) {
  .sec__head, .sec__body, .sec__outro { padding-left: 20px; padding-right: 20px; }
}

.sec__eyebrow {
  font-family: var(--f-serif); font-weight: 400;
  font-size: var(--fs-eyebrow); line-height: 1.6; letter-spacing: .3em;
  color: var(--text);
}
.sec__lede {
  margin-top: clamp(28px, 16.55px + 3.05vw, 44px);
  font-family: var(--f-serif); font-weight: 400;
  font-size: var(--fs-lede); line-height: 1.55; letter-spacing: .04em;
  color: var(--text);
}
/* PROFILE は「高野 祐について」を削除したので、リードが見出しを兼ねている。
   小見出しの下に置く前提の余白を打ち消す */
.sec__lede--lead { margin-top: 0; }
.sec__body p { max-width: var(--measure); }
.sec__body p + p { margin-top: clamp(26px, 20.36px + 1.5vw, 32px); }

/* ---------- ISSUE ---------- */
.sec--issue {
  background: var(--bg); z-index: 1;
  padding: clamp(80px, 30.9px + 13.09vw, 150px) 0 clamp(96px, 23.5px + 19.34vw, 200px);
}
.ghost--issue { top: clamp(44px, 26.5px + 4.67vw, 96px); left: clamp(10px, 1.1vw, 16px); }
.sec--issue .sec__eyebrow { margin-top: clamp(56px, 16.9px + 10.43vw, 120px); }

.stack { margin-top: clamp(56px, 33.5px + 6vw, 120px); }
.stack__item {
  position: relative;
  width: min(81.94%, 100% - 40px);              /* 1180/1440 */
  padding: clamp(36px, 21.9px + 3.76vw, 56px) clamp(20px, 8.55px + 3.05vw, 64px)
           clamp(32px, 15.1px + 4.51vw, 56px)  clamp(20px, -11.9px + 8.51vw, 132px);
}
.stack__item p { max-width: 680px; }
.stack__item p + p { margin-top: clamp(22px, 20.6px + 0.38vw, 26px); }
.stack__item--a, .stack__item--c { background: var(--bg); border: 1px solid var(--border); }
.stack__item--b { background: var(--bg-tint); }

/* 段差（重ね）— 1440基準：ml 96 / 164 / 32、上に -24 で食い込む */
.stack__item--a { margin-left: 6.667%; }
.stack__item--b { margin: -24px 0 0 11.389%; }
.stack__item--c { margin: -24px 0 0 2.222%; }
@media (max-width: 767px) {
  .stack__item { width: 335px; max-width: calc(100% - 40px); }
  .stack__item--a { margin-left: 20px; }
  .stack__item--b { margin: -16px 0 0 32px; }
  .stack__item--c { margin: -16px 0 0 8px; }
}
.stack__num {
  position: absolute; top: clamp(-46px, -18.96px - 1.878vw, -26px); left: clamp(-40px, 5.97px - 3.192vw, -6px);
  font-family: var(--f-en); font-weight: 300;
  font-size: clamp(64px, 40.1px + 6.37vw, 132px); line-height: 1;
  color: var(--blue-500); opacity: .16;
}
.stack__title {
  margin-bottom: clamp(16px, 14.6px + 0.38vw, 20px);
  font-family: var(--f-serif); font-weight: 400;
  font-size: var(--fs-h3); letter-spacing: .06em; color: var(--text);
}

.sec__outro { margin-top: clamp(56px, 33.5px + 6vw, 120px); }
.sec__outro p { max-width: 680px; }
.sec__outro .pull {
  margin: clamp(26px, 22.48px + 0.94vw, 36px) 0 0;
  font-family: var(--f-serif); font-size: var(--fs-pull);
  line-height: 1.75; letter-spacing: .04em;
}
@media (min-width: 768px) {
  .sec__outro .pull { margin-left: -104px; line-height: 1.7; }
}
.sec__outro .pull + p { margin-top: clamp(26px, 22.48px + 0.94vw, 36px); }

/* ---------- APPROACH ---------- */
.sec--approach {
  background: var(--bg-tint);
  margin-top: clamp(-90px, -22.4px - 4.695vw, -40px);
  padding: clamp(100px, 69.4px + 8.16vw, 190px) 0 clamp(110px, 78.4px + 8.43vw, 200px);
}
.ghost--approach { top: clamp(56px, 34.5px + 5.73vw, 120px); right: clamp(10px, 2.8vw, 40px); }
.sec--approach .sec__body { margin-top: clamp(32px, -0.34px + 8.63vw, 110px); }
.quote {
  margin-top: clamp(32px, 26.4px + 1.49vw, 48px);
  padding: clamp(20px, 17.2px + 0.75vw, 28px) 0 clamp(20px, 17.2px + 0.75vw, 28px) clamp(20px, 13.0px + 1.87vw, 40px);
  border-left: 2px solid var(--blue-500);
  font-family: var(--f-serif); font-size: var(--fs-quote);
  line-height: 1.8; letter-spacing: .04em;
  max-width: none;
}
@media (min-width: 768px) { .quote { margin-left: -128px; } }
.sec--approach .sec__body p + .quote,
.sec--approach .sec__body .quote + p { margin-top: clamp(32px, 26.4px + 1.49vw, 48px); }

/* 右へはみ出す白箱。下のセクションへ食い込む */
.note {
  position: relative; z-index: 2;
  margin: clamp(48px, 41.3px + 1.79vw, 96px) 0 clamp(-140px, -45.35px - 6.573vw, -70px) auto;
  width: min(77.78%, 343px);                     /* 1120/1440 */
  background: var(--bg);
  padding: clamp(36px, 21.9px + 3.76vw, 80px) clamp(32px, 7.4px + 6.56vw, 200px)
           clamp(36px, 21.9px + 3.76vw, 80px) clamp(20px, 8.55px + 3.05vw, 96px);
  box-shadow: 0 1px 0 var(--border), 0 -1px 0 var(--border);
}
@media (min-width: 768px) { .note { width: 77.78%; } }
.note p { max-width: 680px; }
.note p + p { margin-top: clamp(22px, 19.9px + 0.56vw, 28px); }

/* ---------- STRUCTURE ---------- */
.sec--structure {
  background: var(--bg);
  padding: clamp(120px, 84.6px + 9.44vw, 230px) 0 clamp(72px, 51.7px + 5.42vw, 135px);
}
/* STRUCTURE だけ9文字あり、共通の clamp(60px, 2px + 17vw, 255px) では
   幅1488px未満のときどの幅でも右へ食み出す（1440pxで57px、375pxで23px）。
   ここだけ字を詰めて画面内に収める。HANDOVER §5③「見切れさせない」（2026-08-17 実測して修正） */
.ghost--structure {
  top: clamp(88px, 62.6px + 6.77vw, 170px); left: clamp(10px, 4.2vw, 60px);
  font-size: clamp(46px, 15.5vw, 228px);
}
.sec__body--tight { padding-left: 0; padding-right: 0; margin-top: clamp(48px, 30.5px + 4.67vw, 100px); }

/* 2層図：上段より下段を必ず広く */
.layers { margin-top: clamp(48px, 25.5px + 6vw, 120px); }
.layers__top {
  position: relative; z-index: 2;
  width: min(68.06%, 335px);                     /* 980/1440 */
  margin-left: 20px;
  background: var(--bg); border: 1px solid var(--border);
  padding: clamp(24px, 17.6px + 1.7vw, 44px) clamp(20px, 12.5px + 1.94vw, 48px);
}
.layers__base {
  position: relative; z-index: 1;
  width: 100%; background: var(--bg-invert);
  margin-top: 6px;
  padding: clamp(28px, 19.1px + 2.36vw, 56px) 0;
}
.layers__base-inner { padding-left: 20px; padding-right: 20px; }
@media (min-width: 768px) {
  .layers { position: relative; }
  .layers__top { width: 68.06%; margin-left: var(--pad-r); }
  .layers__base { margin-top: -24px; padding-top: clamp(48px, 24.5px + 4.72vw, 80px); }
  .layers__base-inner { padding-left: var(--pad-l); padding-right: var(--pad-r); }
}
.layers h3 {
  font-family: var(--f-serif); font-weight: 400;
  font-size: var(--fs-h3s); letter-spacing: .1em;
}
.layers__top h3 { color: var(--text); }
.layers__base h3 { color: #fff; }
.tags {
  display: flex; flex-wrap: wrap; gap: clamp(8px, 7.3px + 0.19vw, 10px);
  margin-top: clamp(16px, 14.6px + 0.56vw, 22px);
}
.tags li {
  padding: clamp(8px, 7.3px + 0.19vw, 10px) clamp(14px, 12.6px + 0.38vw, 18px);
  border-radius: 999px;
  background: var(--blue-100); color: var(--blue-500);
  font-size: var(--fs-tag); letter-spacing: .04em; line-height: 1.6;
}
.tags--outline li {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.34);
}
.sec__close {
  margin: clamp(40px, 40px, 40px) 20px 0;
  font-family: var(--f-serif); font-weight: 400;
  font-size: var(--fs-close); line-height: 1.9; letter-spacing: .04em;
  color: var(--text);
}
@media (min-width: 768px) { .sec__close { margin-left: var(--pad-l); margin-right: var(--pad-r); } }

/* ==========================================================================
   追加セクション（SERVICE 以降）
   既存のトークンと造形のみで組む。新しい色・書体を足さないこと。
   ========================================================================== */

/* 線のボタン＝CTA-B（講演依頼）。塗りの btn-blob＝CTA-A と対にする */
.btn-line {
  display: inline-flex; align-items: center; justify-content: center;
  gap: clamp(16px, 1.94vw, 28px);
  width: min(468px, 100%); min-height: clamp(60px, 5vw, 72px);
  padding: 0 24px;
  border-radius: 150px 110px 135px 120px / 38px 36px 36px 38px;
  border: 1px solid var(--bg-invert); background: transparent; color: var(--bg-invert);
  font-family: var(--f-sans); font-weight: 400;
  font-size: clamp(16px, 14.59px + 0.38vw, 20px); letter-spacing: .04em;
  transition: background-color 220ms var(--ease), color 220ms var(--ease);
}
.btn-line:hover { background: var(--bg-invert); color: #fff; text-decoration: none; }
.btn-line .arw { font-size: .85em; letter-spacing: -.1em; }
/* 反転面の上では白線にする */
.sec--contact .btn-line { border-color: #fff; color: #fff; }
.sec--contact .btn-line:hover { background: #fff; color: var(--bg-invert); }

.sec__cta {
  margin-top: clamp(56px, 33.5px + 6vw, 120px);
  padding-left: var(--pad-l); padding-right: var(--pad-r);
}
@media (max-width: 767px) { .sec__cta { padding-inline: 20px; } }

.rule-label--invert { color: #fff; }
.sec__lede--invert { color: #fff; }

/* ヘッダーのCTA2本 */
.site-nav__ctas { display: inline-flex; align-items: center; gap: 16px; }
.site-nav__cta--a { text-decoration: underline; text-underline-offset: 6px; }
.site-nav__cta--b {
  padding: 8px 18px; border: 1px solid var(--navy-900); border-radius: 999px;
  text-decoration: none !important;
}
.site-nav__cta--b:hover { background: var(--navy-900); color: #fff; }

/* ---------- SERVICE：罫線区切りの一覧（PwC型） ---------- */
.sec--service {
  background: var(--bg-tint);
  padding: clamp(72px, 45.4px + 7.08vw, 150px) 0 clamp(72px, 51.7px + 5.42vw, 135px);
}
.ghost--service { top: clamp(56px, 34.5px + 5.73vw, 120px); right: clamp(10px, 1.7vw, 24px); }

.stats {
  display: grid; gap: clamp(28px, 3vw, 40px);
  margin-top: clamp(56px, 33.5px + 6vw, 110px);
  padding-left: var(--pad-l); padding-right: var(--pad-r);
}
@media (max-width: 767px) { .stats { padding-inline: 20px; } }
@media (min-width: 640px)  { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats li { display: flex; flex-direction: column; gap: 10px; }
.stats b {
  font-family: var(--f-ui); font-weight: 600;
  font-size: clamp(30px, 22.2px + 2.08vw, 52px); line-height: 1.1;
  letter-spacing: -.01em; color: #fff;
}
.stats__u { font-size: .5em; margin-left: .12em; letter-spacing: .04em; }
.stats__arw { color: #6C97DC; margin: 0 .18em; font-size: .7em; }
/* **数値そのものを包む .stats__n を必ず外すこと。**
   外し忘れると、52px のはずの数字がラベル用の 14px・淡い水色になる
   （2026-08-17 実際にそうなり「めっちゃちっちゃい」と指摘された） */
.stats span:not(.stats__u):not(.stats__arw):not(.stats__n) {
  font-size: var(--fs-tag); line-height: 1.8; color: #C2D4EE;
}

/* ---------- CASE ---------- */
.sec--case {
  background: var(--bg);
  padding: clamp(72px, 45.4px + 7.08vw, 150px) 0 clamp(72px, 51.7px + 5.42vw, 135px);
}
.ghost--case { top: clamp(56px, 34.5px + 5.73vw, 120px); left: clamp(10px, 1.1vw, 16px); }
.cases {
  display: grid; gap: clamp(32px, 4vw, 56px);
  margin-top: clamp(48px, 25.5px + 6vw, 96px);
  padding-left: var(--pad-l); padding-right: var(--pad-r);
}
@media (max-width: 767px) { .cases { padding-inline: 20px; } }
@media (min-width: 1024px) { .cases { grid-template-columns: repeat(2, 1fr); } }
/* トップは3件だけ横並び。「これで全部」と受け取られないよう、
   全件は case.html へ送る（2026-08-17 本人指示）。
   ↑ の2列指定より後ろに置くこと */
@media (min-width: 900px) { .cases--top { grid-template-columns: repeat(3, 1fr); } }
/* 一度1列にして「画面中央のカードだけを起こす」をやったが、
   **縦に間延びして却下**（2026-08-17）。2列に戻してある。
   沈んだカードの本文が最悪 2.61:1 まで落ちる問題もあった。 */
.case {
  padding-left: clamp(20px, 2.8vw, 40px);
  border-left: 1px solid var(--border);
}
.case__meta {
  font-family: var(--f-ui); font-weight: 600;
  font-size: var(--fs-label, 12px); letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue-500);
}
.case__title {
  margin-top: 14px;
  font-family: var(--f-serif); font-weight: 400;
  font-size: var(--fs-h3); line-height: 1.6; letter-spacing: .04em;
}
.case p:not(.case__meta) { margin-top: 16px; max-width: 42em; }
/* 2列のときだけ、右の列を下げて段差をつける。トップの3列では効かせない */
@media (min-width: 1024px) {
  .cases:not(.cases--top) .case:nth-child(2),
  .cases:not(.cases--top) .case:nth-child(4) { margin-top: 48px; }
}

/* ---------- SPEAKING ----------
   ここだけスクロールで濃紺に反転する。§モーション「章の反転」を参照。 */
.sec--speaking {
  background: var(--bg-tint);
  padding: clamp(72px, 45.4px + 7.08vw, 150px) 0 clamp(72px, 51.7px + 5.42vw, 135px);
}
.ghost--speaking { top: clamp(56px, 34.5px + 5.73vw, 120px); right: clamp(10px, 1.1vw, 16px); }
.spk {
  margin-top: clamp(48px, 25.5px + 6vw, 96px);
  padding-left: var(--pad-l); padding-right: var(--pad-r);
}
@media (max-width: 767px) { .spk { padding-inline: 20px; } }
.spk__cols { display: grid; gap: clamp(32px, 4vw, 64px); }
@media (min-width: 1024px) { .spk__cols { grid-template-columns: 1.1fr .9fr; } }
.spk__h3 {
  font-family: var(--f-serif); font-weight: 400;
  font-size: var(--fs-h3s); letter-spacing: .1em; color: var(--text);
}
.spk__h3 + * { margin-top: 20px; }
.spk__h3--wide { margin-top: clamp(48px, 5vw, 72px); }
.spk__list li {
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.spk__fig { margin: clamp(40px, 4.5vw, 64px) 0 0; }
/* 講演風景も実写のまま見せる（2026-08-17 本人指示）。--photo-filter は掛けない */
.spk__fig img { width: 100%; height: auto; }
.spk--after { margin-top: clamp(48px, 5vw, 72px); }

/* ---------- 講演の告知画像が横に流れる帯 ----------
   ポスターは他社が作った現物なので、--photo-filter は掛けない。
   淡くすると文字が読めなくなり、証拠として機能しなくなる。         */
.marquee {
  margin-top: clamp(48px, 5vw, 80px);
  padding-block: clamp(28px, 3vw, 44px);
  border-block: 1px solid var(--border);
  background: var(--bg);
}
.marquee__label {
  padding-left: var(--pad-l); padding-right: var(--pad-r);
  margin-bottom: clamp(20px, 2.2vw, 32px);
  font-family: var(--f-ui); font-weight: 600;
  font-size: var(--fs-tag); letter-spacing: .18em;
  color: var(--blue-500);
}
@media (max-width: 767px) { .marquee__label { padding-inline: 20px; } }

.marquee__viewport { overflow: hidden; }
.marquee__track {
  display: flex; align-items: stretch;
  gap: clamp(16px, 1.8vw, 28px);
  width: max-content;
  animation: marquee-scroll 64s linear infinite;
}
.marquee__track li { flex: none; }
.marquee__track img {
  display: block; width: auto;
  height: clamp(160px, 18vw, 260px);
  border: 1px solid var(--border);
}
/* 2周目は JS が複製して挿入する（-50% で継ぎ目なくループ） */
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee__viewport:hover .marquee__track,
.marquee__viewport:focus-within .marquee__track { animation-play-state: paused; }

/* 動きを止める設定のときは、横スクロールできる帯として成立させる */
@media (prefers-reduced-motion: reduce) {
  .marquee__viewport { overflow-x: auto; }
  .marquee__track { animation: none; }
}

.logos {
  display: grid; gap: clamp(20px, 2.4vw, 36px); margin-top: 28px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px)  { .logos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .logos { grid-template-columns: repeat(4, 1fr); } }
/* **白いタイルは置かない**（2026-08-17 本人判断）。地の上にロゴだけを並べる。
   そのために**画像側の白を透過させてある**（各種ロゴ → webp 変換時に処理）。
   タイルだけ外して画像が白地のままだと、結局そこに白い四角が残る。

   ロゴの色は触らない（先方の現物。加工しない方針・§6）。
   掲載許諾は全て取得済み。注記はサイトに置かない（2026-08-17 本人指示） */
.logos li {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 96px; padding: 8px;
  font-size: var(--fs-tag); line-height: 1.6; letter-spacing: .04em;
  transition: transform 260ms var(--ease), opacity 260ms var(--ease);
}
.logos img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 50px; object-fit: contain;
}
/* **正方形に近いマーク（船井総研・K-wave）は、中の文字が小さい。**
   マーク＋社名が縦に積まれているぶん、横組みのロゴと同じ高さにすると字が読めない。
   高さを多めに与えて、字の大きさのほうを揃える（2026-08-17 本人指摘）。

   **K-wave だけは紺の地がロゴの一部**（白文字なので地を抜くと読めない）。
   1枚だけ四角に見えるのはそのため。差し替えるなら透過素材をもらうこと */
.logos__sq img { max-height: 72px; }
.logos__text { color: var(--text-muted); }
@media (hover: hover) {
  .logos li:hover { transform: translateY(-4px); }
  .logos__text:hover { transform: none; }
}
.spk__inhouse { margin-top: 20px; font-size: var(--fs-tag); color: var(--text-muted); }
.spk__ongoing {
  margin-top: clamp(40px, 4.5vw, 64px);
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2.8vw, 44px);
  background: var(--bg); border: 1px solid var(--border);
}
.spk__ongoing p + p { margin-top: 18px; }
.spk__cred { font-size: var(--fs-tag); color: var(--text-muted); }

/* ---------- PROFILE ---------- */
.sec--profile {
  background: var(--bg);
  padding: clamp(72px, 45.4px + 7.08vw, 150px) 0 clamp(72px, 51.7px + 5.42vw, 135px);
}
.ghost--profile { top: clamp(56px, 34.5px + 5.73vw, 120px); left: clamp(10px, 3.5vw, 50px); }
/* ポートレートは削除済み（2026-08-17）。左右2段組をやめ、本文1本に戻した。
   .prof__fig の定義も一緒に消してある。写真を戻すなら両方書き直すこと */
.prof {
  margin-top: clamp(48px, 25.5px + 6vw, 96px);
  padding-left: var(--pad-l); padding-right: var(--pad-r);
}
@media (max-width: 767px) { .prof { padding-inline: 20px; } }
.prof__text p { max-width: 42em; }
.prof__text p + p { margin-top: 24px; }
.prof__close {
  font-family: var(--f-serif);
  font-size: var(--fs-quote); line-height: 1.9; letter-spacing: .04em;
  padding-left: clamp(20px, 2.8vw, 40px); border-left: 2px solid var(--blue-500);
}
.prof__text .prof__close { margin-top: clamp(32px, 3.5vw, 48px); }
.prof__career { margin: clamp(40px, 4.5vw, 64px) 0 0; border-top: 1px solid var(--border); }
.prof__career > div {
  display: grid; gap: 4px 32px;
  padding: 18px 0; border-bottom: 1px solid var(--border);
}
@media (min-width: 768px) { .prof__career > div { grid-template-columns: 120px 1fr; } }
.prof__career dt { color: var(--text-muted); font-size: var(--fs-tag); }
.prof__career dd { margin: 0; }

/* ---------- PRICE / FLOW ---------- */
.sec--price {
  background: var(--bg);
  padding: clamp(72px, 45.4px + 7.08vw, 150px) 0 clamp(72px, 51.7px + 5.42vw, 135px);
}
.ghost--price { top: clamp(56px, 34.5px + 5.73vw, 120px); right: clamp(10px, 4.9vw, 70px); }
.spec {
  margin: clamp(48px, 25.5px + 6vw, 96px) 0 0;
  padding-left: var(--pad-l); padding-right: var(--pad-r);
  border-top: 1px solid var(--border);
}
@media (max-width: 767px) { .spec { padding-inline: 20px; } }
.spec__row {
  display: grid; gap: 4px 40px;
  padding: clamp(20px, 2vw, 28px) 0; border-bottom: 1px solid var(--border);
}
@media (min-width: 768px) { .spec__row { grid-template-columns: 200px minmax(0, 1fr); } }
.spec dt { font-family: var(--f-serif); letter-spacing: .06em; }
.spec dd { margin: 0; color: var(--text); }

/* ---------- FAQ ---------- */
.sec--faq {
  background: var(--bg-tint);
  padding: clamp(72px, 45.4px + 7.08vw, 150px) 0 clamp(72px, 51.7px + 5.42vw, 135px);
}
.ghost--faq { top: clamp(56px, 34.5px + 5.73vw, 120px); left: clamp(10px, 2.1vw, 30px); }
.faq {
  margin-top: clamp(48px, 25.5px + 6vw, 96px);
  padding-left: var(--pad-l); padding-right: var(--pad-r);
  border-top: 1px solid var(--border);
}
/* 見出しを左に置いて留め、質問だけを右に流す。
   このサイトで「左が短く右が長い」構造を作れるのはここ（質問9問）。
   PROFILE でも試したが、顔写真が追ってくるのは気味が悪いと判断して取りやめた。
   **文字のかたまりが留まるのは編集的で落ち着くが、人の顔は追尾に見える。**

   .sec が overflow: hidden だと、そのセクションがスクロールの器と見なされて
   sticky が効かない。clip にしてあるのはそのため（HANDOVER §5⑬）。
   狭い幅では縦に積む。留めると見出しだけが延々ついてくる。

   2段組にするのは 1280px 以上だけ。実測で、見出し「よくいただく質問」は312px、
   リード「ご相談の前に。」は元の46pxのままだと335px要る。それ未満の幅で
   2段組にすると**1文字だけ次の行に落ちる。** 質問側も狭くなって読みにくい。
   リードは袖に置くと46pxが大きすぎるので、ここだけ落としてある。 */
@media (min-width: 1280px) {
  .sec--faq {
    display: grid; align-items: start;
    grid-template-columns: clamp(320px, 26vw, 360px) minmax(0, 1fr);
    column-gap: clamp(48px, 5vw, 96px);
    padding-left: var(--pad-l); padding-right: var(--pad-r);
  }
  .sec--faq .sec__head, .sec--faq .faq { padding-left: 0; padding-right: 0; }
  /* .sec > *:not(.ghost):not(.blob) が position: relative を当てているので、
     同じ詳細度（0,3,0）まで上げないと sticky が効かない。あちらより後ろにあること */
  .sec.sec--faq .sec__head { position: sticky; top: clamp(48px, 8vh, 104px); }
  .sec--faq .sec__lede {
    margin-top: clamp(20px, 2vw, 28px);
    font-size: clamp(24px, 2.1vw, 32px);
  }
  .sec--faq .faq { margin-top: 0; }
}
@media (max-width: 767px) { .faq { padding-inline: 20px; } }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: 24px; align-items: flex-start;
  padding: clamp(20px, 2vw, 28px) 0;
  font-family: var(--f-serif); font-size: clamp(16px, 15.3px + 0.19vw, 18px);
  line-height: 1.8; letter-spacing: .04em; color: var(--text);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { position: relative; flex: none; width: 14px; height: 14px; margin-top: .6em; }
.faq__item summary i::before, .faq__item summary i::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--blue-500);
}
.faq__item summary i::after { rotate: 90deg; transition: rotate 220ms var(--ease); }
.faq__item[open] summary i::after { rotate: 0deg; }
.faq__item > p { padding: 0 0 clamp(20px, 2vw, 28px); max-width: 42em; color: var(--text-muted); }

/* ---------- CONTACT ---------- */
.sec--contact {
  background: var(--bg-invert); color: #fff;
  padding: clamp(72px, 45.4px + 7.08vw, 150px) 0;
}
.sec--contact .sec__head { text-align: center; }
.sec--contact .rule-label { justify-content: center; }
.contact__lede {
  margin-top: clamp(28px, 3vw, 40px);
  padding-left: var(--pad-l); padding-right: var(--pad-r);
  color: #C2D4EE;
}
@media (max-width: 767px) { .contact__lede { padding-inline: 20px; } }
.contact {
  display: grid; gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(48px, 25.5px + 6vw, 88px);
  padding-left: var(--pad-l); padding-right: var(--pad-r);
}
@media (max-width: 767px) { .contact { padding-inline: 20px; } }
@media (min-width: 768px) { .contact { grid-template-columns: repeat(2, 1fr); } }
.contact__card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid rgba(255,255,255,.28);
}
.contact__card h3 {
  font-family: var(--f-serif); font-weight: 400;
  font-size: var(--fs-h3s); letter-spacing: .1em; color: #fff;
}
.contact__card p { color: #C2D4EE; }
.contact__card .btn-blob { margin-top: auto; background: #fff; color: var(--bg-invert); }
.contact__card .btn-blob:hover { background: #DDE7F7; }
.contact__mail {
  margin-top: clamp(32px, 3.5vw, 48px); text-align: center;
  font-size: var(--fs-tag); color: #C2D4EE;
}
.contact__mail a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 問い合わせフォーム ----------
   反転面（--bg-invert）の上に置く。新しい色は足さず、白の不透明度で階調を作る。 */
[hidden] { display: none !important; }

.cform {
  margin-top: clamp(48px, 25.5px + 6vw, 88px);
  padding-left: var(--pad-l); padding-right: var(--pad-r);
}
@media (max-width: 767px) { .cform { padding-inline: 20px; } }

.cform__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.cform__block { margin: 0 0 clamp(32px, 3.5vw, 48px); padding: 0; border: 0; min-width: 0; }
.cform__block > legend {
  padding: 0 0 clamp(16px, 1.6vw, 22px);
  font-family: var(--f-serif); font-weight: 400;
  font-size: var(--fs-h3s); letter-spacing: .1em; color: #fff;
}
.cform__req, .cform__opt {
  margin-left: 10px; padding: 2px 8px; vertical-align: 2px;
  font-family: var(--f-ui); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; line-height: 1.7;
}
.cform__req { background: #fff; color: var(--bg-invert); }
.cform__opt { border: 1px solid rgba(255,255,255,.38); color: #C2D4EE; }

/* ご用件（ボタン形状を小さく引き継いだ選択肢） */
.cform__topics { display: grid; gap: 12px; }
@media (min-width: 900px) { .cform__topics { grid-template-columns: repeat(3, 1fr); } }
.topic { display: block; }
.topic input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.topic__box {
  display: flex; align-items: center; gap: 14px;
  min-height: clamp(56px, 4.6vw, 66px); padding: 0 22px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 120px 90px 108px 96px / 32px 30px 30px 32px;
  color: #fff; line-height: 1.6;
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease);
}
.topic__box::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6);
  transition: background-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.topic input:checked + .topic__box {
  background: #fff; border-color: #fff; color: var(--bg-invert);
}
.topic input:checked + .topic__box::before {
  background: var(--bg-invert); border-color: var(--bg-invert);
  box-shadow: inset 0 0 0 3px #fff;
}
.topic input:focus-visible + .topic__box { outline: 2px solid #fff; outline-offset: 3px; }
@media (hover: hover) {
  .topic input:not(:checked) + .topic__box:hover { border-color: rgba(255,255,255,.66); }
}

/* 入力欄 */
.cform__grid { display: grid; gap: clamp(20px, 2.2vw, 28px); }
@media (min-width: 768px) { .cform__grid { grid-template-columns: repeat(2, 1fr); } }
.fld { display: grid; gap: 10px; min-width: 0; }
.fld--full { grid-column: 1 / -1; }
.cform__grid + .fld--full { margin-top: clamp(20px, 2.2vw, 28px); }
.fld > label { font-size: var(--fs-tag); letter-spacing: .08em; color: #fff; line-height: 1.6; }
.fld input, .fld textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 2px;
  background: rgba(255,255,255,.05); color: #fff;
  font-family: var(--f-sans); font-size: var(--fs-body); line-height: 1.9;
  letter-spacing: .04em;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.fld textarea { resize: vertical; }
.fld input::placeholder, .fld textarea::placeholder { color: rgba(255,255,255,.55); }
.fld input:focus, .fld textarea:focus {
  outline: none; border-color: #fff; background: rgba(255,255,255,.10);
}
.fld input:focus-visible, .fld textarea:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* 自動入力で白地＋白文字になる事故を防ぐ */
.fld input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  box-shadow: inset 0 0 0 1000px #142766;
  caret-color: #fff;
}
/* 送信を試みたあとだけ赤くする（初期表示から警告色を出さない） */
.cform.is-checked :invalid { border-color: #FFB4B4; }

/* 同意 */
.cform__consent { margin: clamp(8px, 1vw, 16px) 0 0; }
.cform__consent label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.cform__consent input { flex: none; width: 18px; height: 18px; margin-top: 7px; accent-color: #fff; }
.cform__consent span { font-size: var(--fs-tag); color: #C2D4EE; line-height: 1.9; }
.cform__consent a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.cform__submit { margin: clamp(32px, 3.5vw, 48px) 0 0; }
.cform__submit .btn-blob {
  border: 0; cursor: pointer; background: #fff; color: var(--bg-invert);
}
.cform__submit .btn-blob:hover { background: #DDE7F7; }
.cform__note { margin-top: 20px; font-size: var(--fs-tag); color: #C2D4EE; }

/* ==========================================================================
   動線の組み替えで足したもの（2026-08-16）
   理念は approach.html へ出し、トップは「何をしてくれるか」から始める。
   ここでも新しい色・書体は足していない。
   ========================================================================== */

/* ---------- ヒーローの約束1行 ---------- */

/* ---------- THINKING（旧 APPROACH 抜粋） ---------- */
.sec--digest {
  background: var(--bg-tint);
  padding: clamp(64px, 40.5px + 6.27vw, 133px) 0 clamp(64px, 40.5px + 6.27vw, 133px);
}
.ghost--digest { top: clamp(48px, 29.6px + 4.9vw, 102px); left: clamp(10px, 1.4vw, 20px); }

/* ---------- VOICE（クライアント／受講生） ---------- */
.sec--voice {
  background: var(--bg-tint);
  padding: clamp(72px, 45.4px + 7.08vw, 150px) 0 clamp(72px, 51.7px + 5.42vw, 135px);
}
.sec--voice-seminar { background: var(--bg); }
.ghost--voice { top: clamp(56px, 34.5px + 5.73vw, 120px); right: clamp(10px, 3.5vw, 50px); }
.ghost--voice2 { top: clamp(56px, 34.5px + 5.73vw, 120px); left: clamp(10px, 2.8vw, 40px); }

/* アンケートの数値。.stats は反転面用なので、明るい面の色に上書きする */
.stats--survey { margin-top: clamp(44px, 24.5px + 5.2vw, 88px); }
@media (min-width: 640px)  { .stats--survey { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .stats--survey { grid-template-columns: repeat(3, 1fr); } }
/* 数値が1つだけのとき、3カラムのままだと左に寄って落ち着かない */
.stats--single { grid-template-columns: 1fr !important; }
.stats--survey b { color: var(--text); }
/* ここも .stats__n を外すこと。外すと数値だけラベル色（薄い側）になる */
.stats--survey span:not(.stats__u):not(.stats__arw):not(.stats__n) { color: var(--text-muted); }
.stats__src {
  margin-top: clamp(20px, 2.2vw, 28px);
  padding-left: var(--pad-l); padding-right: var(--pad-r);
  max-width: calc(var(--pad-l) + 46em);
  font-size: var(--fs-tag); line-height: 1.9; color: var(--text-muted);
}
@media (max-width: 767px) { .stats__src { padding-inline: 20px; max-width: none; } }

/* ---------- approach.html の導入と締め ---------- */
.page-lead {
  background: var(--bg-tint);
  padding: clamp(72px, 44.7px + 7.28vw, 152px) var(--pad-r) clamp(72px, 44.7px + 7.28vw, 152px) var(--pad-l);
}
@media (max-width: 767px) { .page-lead { padding-inline: 20px; } }
.page-lead__inner { max-width: 46em; }
.page-lead .rule-label { justify-content: flex-start; }
.page-lead__title {
  margin-top: clamp(24px, 2.6vw, 36px);
  font-family: var(--f-serif); font-weight: 400;
  font-size: var(--fs-lede); line-height: 1.55; letter-spacing: .04em;
}
.page-lead__text { margin-top: clamp(24px, 2.6vw, 36px); color: var(--text-muted); }
.page-lead__toc {
  display: grid; gap: 0;
  margin-top: clamp(32px, 3.5vw, 48px);
  border-top: 1px solid var(--border);
}
.page-lead__toc a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--border);
  color: var(--text); transition: color 220ms var(--ease);
}
.page-lead__toc a:hover { color: var(--blue-500); }
.page-lead__toc span {
  font-family: var(--f-ui); font-weight: 600;
  font-size: 12px; letter-spacing: .14em; color: var(--blue-500);
}

.page-close {
  background: var(--bg-tint);
  padding: clamp(64px, 40.5px + 6.27vw, 133px) var(--pad-r) clamp(64px, 40.5px + 6.27vw, 133px) var(--pad-l);
}
@media (max-width: 767px) { .page-close { padding-inline: 20px; } }
.page-close__inner { max-width: 46em; }
.page-close__text { font-size: var(--fs-close); line-height: 1.9; font-family: var(--f-serif); }
.page-close__ctas {
  display: flex; flex-wrap: wrap; gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(32px, 3.5vw, 48px);
}
/* 46em の器に2本が収まる幅。これ以上広げると縦積みになる */
.page-close__ctas .btn-blob, .page-close__ctas .btn-line { width: min(340px, 100%); }

/* ==========================================================================
   コラム（blog/）
   一覧・記事とも、既存の罫線と明朝だけで組む。新しい造形を発明しない。
   ========================================================================== */

.sec--posts {
  background: var(--bg);
  padding: clamp(64px, 40.4px + 6.3vw, 133px) 0 clamp(64px, 40.5px + 6.27vw, 133px);
}

/* カテゴリー絞り込み */
.filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(20px, 2.2vw, 32px);
  padding-left: var(--pad-l); padding-right: var(--pad-r);
}
@media (max-width: 767px) { .filter { padding-inline: 20px; } }
.filter__label {
  font-family: var(--f-ui); font-weight: 600;
  font-size: 12px; letter-spacing: .14em; color: var(--blue-500);
}
.filter__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.filter__chip {
  padding: 10px 20px; min-height: 44px;
  border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text-muted);
  font-family: var(--f-sans); font-size: var(--fs-tag); letter-spacing: .06em;
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.filter__chip:hover { border-color: var(--blue-500); color: var(--blue-500); }
.filter__chip.is-on {
  background: var(--bg-invert); border-color: var(--bg-invert); color: #fff;
}

/* 一覧カード */
.posts {
  display: grid; gap: 0;
  margin-top: clamp(32px, 3.5vw, 48px);
  padding-left: var(--pad-l); padding-right: var(--pad-r);
  border-top: 1px solid var(--border);
}
@media (max-width: 767px) { .posts { padding-inline: 20px; } }
.post-card { border-bottom: 1px solid var(--border); }
.post-card__link {
  display: block; padding: clamp(24px, 2.8vw, 40px) 0;
  color: var(--text);
  transition: opacity 200ms var(--ease);
}
.post-card__link:hover { opacity: .68; }
.post-card__cat {
  font-family: var(--f-ui); font-weight: 600;
  font-size: 12px; letter-spacing: .14em; color: var(--blue-500);
}
.post-card__title {
  margin-top: 12px; max-width: 30em;
  font-family: var(--f-serif); font-weight: 400;
  font-size: var(--fs-h3); line-height: 1.7; letter-spacing: .04em;
}
.post-card__lede { margin-top: 12px; max-width: 42em; color: var(--text-muted); }
.post-card__more {
  display: inline-block; margin-top: 16px;
  font-size: var(--fs-tag); letter-spacing: .08em; color: var(--blue-500);
}
.posts__empty {
  margin-top: clamp(32px, 3.5vw, 48px);
  padding-left: var(--pad-l); padding-right: var(--pad-r);
  color: var(--text-muted);
}
@media (max-width: 767px) { .posts__empty { padding-inline: 20px; } }

/* 記事本文 */
.post {
  padding: clamp(64px, 40.4px + 6.3vw, 133px) var(--pad-r) clamp(64px, 6.5vw, 110px) var(--pad-l);
}
@media (max-width: 767px) { .post { padding-inline: 20px; } }
.post__head, .post__body, .post__foot { max-width: 40em; }
.post__cat {
  font-family: var(--f-ui); font-weight: 600;
  font-size: 12px; letter-spacing: .14em; color: var(--blue-500);
}
.post__title {
  margin-top: clamp(16px, 1.8vw, 24px);
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(24px, 17.4px + 1.76vw, 35px); line-height: 1.6; letter-spacing: .04em;
}
.post__lede {
  margin-top: clamp(20px, 2.2vw, 28px); padding-bottom: clamp(28px, 3vw, 40px);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.post__body { margin-top: clamp(32px, 3.5vw, 48px); }
.post__body h2 {
  margin-top: clamp(44px, 4.6vw, 68px);
  font-family: var(--f-serif); font-weight: 400;
  font-size: var(--fs-h3s); line-height: 1.7; letter-spacing: .08em;
}
.post__body h2 + p { margin-top: clamp(16px, 1.8vw, 24px); }
.post__body p + p { margin-top: clamp(20px, 2.2vw, 28px); }
/* 読み込んでいるのは 400/500 のみ。700 を指定すると偽ボールドになる */
.post__body strong { font-weight: 500; color: var(--navy-900); }
.post__pull {
  padding: clamp(20px, 2.2vw, 28px) 0 clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px);
  border-left: 2px solid var(--blue-500);
  font-family: var(--f-serif);
  font-size: var(--fs-pull); line-height: 1.8; letter-spacing: .04em;
  color: var(--text);
}
.post__foot {
  margin-top: clamp(48px, 5vw, 80px); padding-top: clamp(24px, 2.6vw, 32px);
  border-top: 1px solid var(--border);
}
.post__sign { font-size: var(--fs-tag); line-height: 1.9; color: var(--text-muted); }

/* 関連記事 */
.rel {
  background: var(--bg-tint);
  padding: clamp(56px, 5.8vw, 96px) var(--pad-r) clamp(56px, 5.8vw, 96px) var(--pad-l);
}
@media (max-width: 767px) { .rel { padding-inline: 20px; } }
.rel__head {
  font-family: var(--f-serif); font-weight: 400;
  font-size: var(--fs-h3s); letter-spacing: .1em;
}
.rel__list {
  display: grid; gap: 0;
  margin-top: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid var(--border);
}
@media (min-width: 900px) { .rel__list { grid-template-columns: repeat(2, 1fr); column-gap: clamp(24px, 3vw, 48px); } }
.rel__list li { border-bottom: 1px solid var(--border); }
.rel__list a {
  display: block; padding: clamp(18px, 2vw, 26px) 0; color: var(--text);
  transition: opacity 200ms var(--ease);
}
.rel__list a:hover { opacity: .68; }
.rel__cat {
  display: block;
  font-family: var(--f-ui); font-weight: 600;
  font-size: 12px; letter-spacing: .14em; color: var(--blue-500);
}
.rel__title {
  display: block; margin-top: 10px;
  font-family: var(--f-serif); font-size: var(--fs-h3s); line-height: 1.7; letter-spacing: .04em;
}
.rel__all { margin-top: clamp(24px, 2.6vw, 36px); }

/* ==========================================================================
   SERVICE / FLOW / THINKING の帯（2026-08-17）
   v4 の「中央の小さなラベル＋細い縦罫のグリッド」を、v2 の文字サイズで組み直したもの。
   この3つは連続していて、ひとつのまとまりとして見せている。
   PROOF 以降は左寄せのエディトリアルに戻る。混ぜないこと。
   ========================================================================== */

/* 背面英字は左端から。ラベルを中央に置くので、通常サイズだと中央で衝突する。
   PC幅で中央（50%）に届かない大きさに抑えてある。v4 の見え方に合わせた寸法。 */
.band__head {
  padding-left: var(--pad-l); padding-right: var(--pad-r);
  text-align: center;
}
@media (max-width: 767px) { .band__head { padding-inline: 20px; } }
.band__label {
  font-family: var(--f-serif); font-weight: 400;
  font-size: var(--fs-eyebrow); letter-spacing: .3em; line-height: 1.6;
  color: var(--text);
  /* 字間を右にも取るので、そのぶん左へ寄せて見た目の中央を合わせる */
  text-indent: .3em;
}
.band__text {
  margin-top: clamp(20px, 2.2vw, 30px);
  color: var(--text-muted);
}
.band__more {
  margin-top: clamp(32px, 3.5vw, 48px);
  padding-left: var(--pad-l); padding-right: var(--pad-r);
  text-align: center;
}
@media (max-width: 767px) { .band__more { padding-inline: 20px; } }
.band__more .link-arw { justify-content: center; }
/* 帯のなかは中央揃えで通す。CTA も左寄せにしない */
.sec--band .sec__cta { display: flex; justify-content: center; }

/* ---------- 3列グリッド（SERVICE 6項目／THINKING 3項目） ----------
   列の間は gap ではなく左右の padding。縦罫を列の中心に置くため。
   gap にすると罫線がずれる。 */
.grid3 {
  display: grid; gap: 0;
  margin-top: clamp(40px, 22px + 4.8vw, 80px);
  padding-left: var(--pad-l); padding-right: var(--pad-r);
}
@media (max-width: 767px) { .grid3 { padding-inline: 20px; } }
@media (min-width: 620px)  { .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.grid3__item {
  padding: clamp(24px, 18.6px + 1.4vw, 40px) 0;
  border-top: 1px solid var(--border);
}
/* 2列のとき：左列に右padding＋縦罫 */
@media (min-width: 620px) and (max-width: 999px) {
  .grid3__item:nth-child(odd)  { padding-right: clamp(24px, 3vw, 48px); border-right: 1px solid var(--border); }
  .grid3__item:nth-child(even) { padding-left:  clamp(24px, 3vw, 48px); }
}
/* 3列のとき：1・2列目に右padding＋縦罫 */
@media (min-width: 1000px) {
  .grid3__item:not(:nth-child(3n))     { padding-right: clamp(24px, 3vw, 48px); border-right: 1px solid var(--border); }
  .grid3__item:not(:nth-child(3n + 1)) { padding-left:  clamp(24px, 3vw, 48px); }
}
/* 最終行の下に罫線を1本足して、格子を閉じる */
.grid3 { border-bottom: 1px solid var(--border); }

.grid3__num {
  font-family: var(--f-en); font-weight: 300;
  font-size: clamp(26px, 23.4px + 0.7vw, 34px); line-height: 1;
  color: var(--blue-500); opacity: .5;
}
.grid3__title {
  margin-top: 8px;
  font-family: var(--f-serif); font-weight: 400;
  font-size: var(--fs-h3s); line-height: 1.6; letter-spacing: .06em; color: var(--text);
}
.grid3__body { margin-top: 12px; color: var(--text-muted); }
/* THINKING は番号がないぶん、見出しを少し上げる */
.grid3--think .grid3__title { margin-top: 0; }

/* 柱から本文へ送るリンク（approach.html の3本柱） */
.grid3__more { margin-top: clamp(16px, 1.8vw, 22px); }
.grid3__more a {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font-size: var(--fs-tag); letter-spacing: .06em; color: var(--blue-500);
  transition: color 200ms var(--ease);
}
.grid3__more a:hover { color: var(--bg-invert); }
.grid3__more .arw { font-size: .85em; letter-spacing: -.1em; }

/* approach.html の3本柱。ラベルを持たないので上下の余白だけ与える */
.sec--pillars {
  background: var(--bg-tint);
  padding: 0 0 clamp(64px, 40.4px + 6.3vw, 133px);
}
.sec--pillars .grid3 { margin-top: clamp(32px, 3.5vw, 48px); }

/* ---------- 導入の流れ（丸数字を横線でつなぐ） ---------- */
/* 画面に留めて 01→04 と進める作りも試したが、**スクロールを乗っ取るので却下**
   （2026-08-17）。入ってきたときに順番に灯すだけに戻してある。 */
.steps {
  display: grid; gap: clamp(32px, 4vw, 48px);
  margin-top: clamp(40px, 22px + 4.8vw, 80px);
  padding-left: var(--pad-l); padding-right: var(--pad-r);
}
@media (max-width: 767px) { .steps { padding-inline: 20px; } }
@media (min-width: 620px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 0; align-items: start; } }

.steps__item { position: relative; text-align: center; }
@media (min-width: 1000px) { .steps__item { padding-inline: clamp(12px, 1.6vw, 24px); } }

/* 基底は「灯った状態」。沈んだ状態は .reveal:not(.is-visible) 側に置く。
   逆にすると、動きを切っている人に灰色の工程表が出たままになる */
.steps__num {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: clamp(44px, 3.6vw, 52px); height: clamp(44px, 3.6vw, 52px);
  margin: 0 auto;
  border: 1px solid var(--blue-500); border-radius: 50%; background: var(--blue-100);
  font-family: var(--f-en); font-weight: 300;
  font-size: clamp(20px, 18.6px + 0.4vw, 24px); line-height: 1;
  color: var(--blue-500);
  /* ここの transition はホバー専用。点灯の順番は animation 側で作る。
     transition-delay で順番を作ると、その遅延がホバーにも効いてしまい、
     04 にカーソルを当てると 0.94 秒待たされることになる */
  transition: color 220ms var(--ease), border-color 220ms var(--ease),
              background-color 220ms var(--ease), scale 260ms var(--ease);
}
.steps__item h3 { transition: color 220ms var(--ease); }

/* 沈んだ状態 */
.steps__item.reveal:not(.is-visible) .steps__num {
  color: var(--text-muted); border-color: var(--border); background: var(--bg);
}

/* ---------- 工程が左から順に出てくる ----------
   .reveal の既定（下から20px）を打ち消して、左から入るように差し替える。
   出現は animation で作る。transition-delay で順番を作ると、
   その遅延がホバーにも効いて 04 が待たされる（丸の点灯で一度踏んだ）。  */
.steps__item.reveal { opacity: 1; translate: none; }
.steps__item.reveal:not(.is-visible) { opacity: 0; translate: -32px 0; }
.steps__item.is-visible { animation: step-in 620ms var(--ease-rise) backwards; }
.steps__item:nth-child(1).is-visible { animation-delay:  60ms; }
.steps__item:nth-child(2).is-visible { animation-delay: 240ms; }
.steps__item:nth-child(3).is-visible { animation-delay: 420ms; }
.steps__item:nth-child(4).is-visible { animation-delay: 600ms; }
@keyframes step-in { from { opacity: 0; translate: -32px 0; } }

/* 出てきたあとに丸が灯る。fill は backwards のみ。both にすると終了後も
   animation が値を握り続けて、ホバーが効かなくなる */
.steps__item.is-visible .steps__num { animation: step-light 420ms var(--ease-rise) backwards; }
.steps__item:nth-child(1).is-visible .steps__num { animation-delay: 300ms; }
.steps__item:nth-child(2).is-visible .steps__num { animation-delay: 480ms; }
.steps__item:nth-child(3).is-visible .steps__num { animation-delay: 660ms; }
.steps__item:nth-child(4).is-visible .steps__num { animation-delay: 840ms; }
@keyframes step-light {
  from { color: var(--text-muted); border-color: var(--border); background-color: var(--bg); }
}

/* カーソルを当てたときだけ、丸を塗りつぶして見出しを青にする。
   押せるものではないので、影や枠は付けない（ボタンに見せない） */
@media (hover: hover) {
  .steps__item:hover .steps__num {
    background: var(--blue-500); border-color: var(--blue-500); color: #fff;
    scale: 1.09;
  }
  .steps__item:hover h3 { color: var(--blue-500); }
}
/* つなぎの横線。丸の中心（上から半径ぶん）に合わせる。
   左から伸ばすので transform-origin は left。丸が灯った直後に走らせる */
@media (min-width: 1000px) {
  .steps__item:not(:last-child)::after {
    content: ""; position: absolute; z-index: 0;
    top: calc(clamp(44px, 3.6vw, 52px) / 2); height: 1px;
    left: calc(50% + clamp(22px, 1.8vw, 26px) + 10px);
    right: calc(-50% + clamp(22px, 1.8vw, 26px) + 10px);
    background: var(--border);
    transform-origin: left center;
  }
  .steps__item.reveal:not(.is-visible)::after { scale: 0 1; }
  /* 丸が灯った直後に、その右の線が伸びる */
  .steps__item.is-visible::after { animation: step-line 520ms var(--ease-rise) backwards; }
  .steps__item:nth-child(1).is-visible::after { animation-delay: 460ms; }
  .steps__item:nth-child(2).is-visible::after { animation-delay: 640ms; }
  .steps__item:nth-child(3).is-visible::after { animation-delay: 820ms; }
}
@keyframes step-line { from { scale: 0 1; } }
.steps__item h3 {
  margin-top: clamp(16px, 1.8vw, 24px);
  font-family: var(--f-serif); font-weight: 400;
  font-size: var(--fs-h3s); line-height: 1.6; letter-spacing: .06em;
}
.steps__item p {
  margin-top: 12px; color: var(--text-muted);
  font-size: var(--fs-tag); line-height: 1.9;
}

/* ==========================================================================
   MESSAGE 帯（2026-08-17）
   長いページに一度だけ置く濃紺の面。ここで縦の単調さを切る。
   増やすと効かなくなるので、1枚だけにしておくこと。
   ========================================================================== */
.sec--message {
  position: relative; overflow: hidden;
  background: var(--bg-invert); color: #fff;
}
.message__photo { position: relative; }
.message__photo img { width: 100%; height: 100%; object-fit: cover; }
/* 写真から濃紺へ落とすグラデーション。文字の背後を必ず無地にする */
.message__photo::after {
  content: ""; position: absolute; inset: 0;
}
.message__inner { position: relative; z-index: 1; }
.message__copy {
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(22px, 16.3px + 1.53vw, 34px);
  line-height: 1.65; letter-spacing: .08em;
}
.message__text {
  margin-top: clamp(20px, 2.2vw, 30px);
  font-size: var(--fs-tag); line-height: 2.1; color: #C2D4EE;
}

/* --- SP：写真を上に敷き、文字は下の濃紺面に置く --- */
@media (max-width: 899px) {
  .message__photo { height: clamp(200px, 52vw, 300px); }
  .message__inner { padding: clamp(36px, 5vw, 56px) 20px clamp(40px, 5.6vw, 64px); }
}

/* --- PC：左に文字、右に写真。写真の左端を濃紺へ溶かす --- */
@media (min-width: 900px) {
  .sec--message { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  .message__photo {
    grid-area: 1 / 1; justify-self: end;
    width: 58%; height: 100%; min-height: clamp(360px, 32vw, 480px);
  }
  .message__photo::after {
    background: linear-gradient(90deg,
      var(--bg-invert) 0%,
      rgba(10, 26, 86, .92) 18%,
      rgba(10, 26, 86, .55) 42%,
      rgba(10, 26, 86, .10) 72%,
      rgba(10, 26, 86, 0) 100%);
  }
  .message__inner {
    grid-area: 1 / 1; align-self: center;
    max-width: 54%;
    padding: clamp(64px, 6.5vw, 110px) 0 clamp(64px, 6.5vw, 110px) var(--pad-l);
  }
}

/* ==========================================================================
   声のカード（クライアント／受講生に共通）
   ========================================================================== */
.quotes {
  display: grid; gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(40px, 22px + 4.8vw, 80px);
  padding-left: var(--pad-l); padding-right: var(--pad-r);
}
@media (max-width: 767px) { .quotes { padding-inline: 20px; } }
@media (min-width: 700px)  { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* クラス名は .quote にしないこと。approach.html の引用（371行目）と衝突し、
   そちらの margin-left:-128px を拾ってカードが重なる */
.quote-card {
  display: flex; flex-direction: column; min-width: 0;
  padding: clamp(24px, 2.6vw, 36px) clamp(20px, 2.2vw, 32px);
  border: 1px solid var(--border); background: var(--bg);
}
.quote-card blockquote {
  position: relative; margin: 0; padding-top: clamp(28px, 3vw, 40px);
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(15px, 14.3px + 0.19vw, 17px);
  line-height: 2; letter-spacing: .04em; color: var(--text);
}
/* 引用符は装飾。読み上げには出さない */
.quote-card blockquote::before {
  content: "“"; position: absolute; top: clamp(-4px, -0.4vw, 0px); left: -2px;
  font-family: var(--f-en); font-weight: 300;
  font-size: clamp(46px, 3.9vw, 60px); line-height: 1;
  color: var(--blue-500); opacity: .34;
}
.quote-card cite {
  margin-top: auto; padding-top: clamp(16px, 1.8vw, 22px);
  font-style: normal; text-align: right;
  font-family: var(--f-ui); font-weight: 500;
  font-size: 12px; letter-spacing: .1em; color: var(--blue-500);
}
/* 淡青の面に置くときは、カードを白のままにして浮かせる */
.quotes--light .quote-card { background: var(--bg); }

/* ---------- 下層ページ（thanks / privacy） ---------- */
.page {
  padding: clamp(72px, 45.4px + 7.08vw, 150px) var(--pad-r) clamp(80px, 8vw, 140px) var(--pad-l);
}
@media (max-width: 767px) { .page { padding-inline: 20px; } }
.page__inner { max-width: 46em; }
.page__title {
  margin-top: clamp(28px, 3vw, 40px);
  font-family: var(--f-serif); font-weight: 400;
  font-size: var(--fs-lede); letter-spacing: .1em; line-height: 1.7;
}
.page__lede { margin-top: clamp(24px, 2.6vw, 36px); color: var(--text-muted); }
.page h2 {
  margin-top: clamp(44px, 4.6vw, 68px);
  font-family: var(--f-serif); font-weight: 400;
  font-size: var(--fs-h3s); letter-spacing: .1em;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.page h2 + p, .page h2 + ul, .page h2 + ol { margin-top: 20px; }
.page p + p { margin-top: 16px; }
.page ul + p, .page ol + p { margin-top: 20px; }
.page code {
  padding: 2px 8px; background: var(--bg-tint);
  border: 1px solid var(--border); font-size: .92em;
}
.page ul, .page ol { margin-top: 20px; padding-left: 1.4em; list-style: disc; }
.page ol { list-style: decimal; }
.page li { margin-top: 8px; color: var(--text-muted); }
.page li::marker { color: var(--blue-500); }
.page__back { margin-top: clamp(48px, 5vw, 80px); }
.page__meta {
  margin-top: clamp(40px, 4vw, 64px); padding-top: 20px;
  border-top: 1px solid var(--border);
  font-family: var(--f-ui); font-size: 12px; letter-spacing: .1em; color: var(--text-muted);
}
/* 下層ページの簡易ヘッダー */
.page-head {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px var(--pad-r) 24px var(--pad-l);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 767px) { .page-head { padding-inline: 20px; } }
.page-head__mark {
  font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-tag);
  letter-spacing: .22em; text-transform: uppercase; color: var(--text);
}
.page-head__name { font-size: var(--fs-tag); color: var(--text-muted); }
/* 下層ページどうしを行き来できるように、社名の代わりにナビを出す（2026-08-17）。
   狭い幅では社名もナビも畳んで、左のロゴだけにする。
   トップの .site-nav とは別物。あちらはヒーローの上に乗る透明のナビ */
@media (max-width: 1023px) { .page-head__name { display: none; } }
.page-nav { display: none; }
@media (min-width: 1024px) {
  .page-head__name { display: none; }
  .page-nav {
    display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px);
    font-size: var(--fs-tag); letter-spacing: .06em;
  }
  .page-nav a { color: var(--text-muted); }
  .page-nav a:hover, .page-nav a[aria-current="page"] { color: var(--text); }
  .page-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
  .page-nav__cta { color: var(--blue-500) !important; }
}

/* ---------- フッター ---------- */
.site-foot {
  background: var(--navy-900); color: #fff;
  padding: clamp(64px, 7vw, 96px) var(--pad-r) 40px;
}
@media (max-width: 767px) { .site-foot { padding-inline: 20px; } }
.site-foot__inner { display: grid; gap: clamp(40px, 5vw, 72px); }
@media (min-width: 768px) { .site-foot__inner { grid-template-columns: 1.2fr 1fr; } }
.site-foot__mark {
  font-family: var(--f-ui); font-weight: 600;
  font-size: var(--fs-tag); letter-spacing: .22em; text-transform: uppercase;
}
.site-foot__name { margin-top: 16px; }
.site-foot__addr {
  margin-top: 16px; font-style: normal;
  font-size: var(--fs-tag); line-height: 1.9; color: #C2D4EE;
}
.site-foot__addr a { color: #C2D4EE; }
.site-foot__addr a:hover { color: #fff; }
.site-foot__nav { display: flex; flex-wrap: wrap; gap: 24px 48px; }
.site-foot__nav ul { display: flex; flex-direction: column; gap: 14px; }
.site-foot__nav a { font-size: var(--fs-tag); color: #C2D4EE; }
.site-foot__nav a:hover { color: #fff; }
.site-foot__ai {
  margin-top: clamp(48px, 5vw, 72px); padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.22);
  font-size: var(--fs-tag); line-height: 1.9; color: #C2D4EE;
}
.site-foot__copy {
  margin-top: 20px;
  font-family: var(--f-ui); font-size: 11px; letter-spacing: .14em; color: #C2D4EE;
}

/* ==========================================================================
   モーション

   基底は必ず「見えている状態」で書くこと。
   prefers-reduced-motion のとき、この下の一括無効化で animation / transition が
   全部消え、基底の CSS がそのまま出る。隠す側をキーフレームや .reveal 側に置いて
   おかないと、動きを切っている人には何も表示されない。
   ========================================================================== */
.reveal { opacity: 0; translate: 0 20px; transition: opacity 700ms var(--ease), translate 700ms var(--ease); }
.reveal.is-visible { opacity: 1; translate: 0 0; }

/* ---------- せり上がりの器 ----------
   .rise で下側を切り、中の .rise__in を1行ぶん下げておいて引き上げる。
   clip-path の上と左右を外へ広げているのは、明朝の抜き（縦線の飛び出し）と
   字間の余白を切らないため。下だけ 0 で止める。                       */
.rise { display: block; clip-path: inset(-40% -5% 0); }
.rise__in { display: block; }

/* 見出しは本文と動きを変えて階層をつける。フェードではなく、せり上がりだけ。
   .reveal--rise 自体は動かさない（中の行だけが動く）ので、opacity を戻しておく */
.reveal--rise { opacity: 1; translate: none; }
/* min() で1行ぶんに頭打ちにする。2行の見出しで 100% にすると2行ぶん動いてしまい、
   同じ 800ms でも飛び込んでくるように見える */
.reveal--rise .rise__in { translate: 0 min(100%, 1.75em); transition: translate 800ms var(--ease-rise); }
.reveal--rise.is-visible .rise__in { translate: 0 0; }

/* ---------- ヒーローの開幕（全ブラウザ・PC/SP共通） ----------
   JS を使わず animation-delay だけで順番を作っている。
   写真は動かさない。LCP の対象なので、フェードさせると計測値が悪化する。 */
.hero__panel { animation: hero-panel-in 1000ms var(--ease-rise) both; }
.hero__body .rule-label  { animation: fade-rise    700ms var(--ease-rise) 120ms both; }
.hero__title .rise:nth-child(1) .rise__in { animation: line-rise 700ms var(--ease-rise) 220ms both; }
.hero__title .rise:nth-child(2) .rise__in { animation: line-rise 700ms var(--ease-rise) 320ms both; }
.hero__tagline .rise__in { animation: line-rise 700ms var(--ease-rise) 440ms both; }
.hero__lead              { animation: fade-in     600ms var(--ease-rise) 540ms both; }
.hero__body .btn-blob    { animation: fade-rise-s 600ms var(--ease-rise) 640ms both; }
.hero__body .link-arw    { animation: fade-rise-s 600ms var(--ease-rise) 720ms both; }

@keyframes hero-panel-in { from { scale: .985; } }
@keyframes line-rise     { from { translate: 0 min(100%, 1.75em); } }
@keyframes fade-rise     { from { opacity: 0; translate: 0 8px; } }
@keyframes fade-rise-s   { from { opacity: 0; translate: 0 4px; } }
@keyframes fade-in       { from { opacity: 0; } }

/* ---------- 導入（トップのみ・1セッションに1回） ----------
   濃紺の全画面にタグラインだけを出し、画面ごと白へ抜けてヒーローへ渡す。

   文字を別途フェードアウトさせていないのは、**文字が白だから。**
   地が白くなっていく過程で、そのまま光に溶ける。二重に動かす必要がない。
   小さいほうの文字も #fff の opacity で作ってあるのは同じ理由。色を変えると溶けない。

   二度目以降を出さない仕掛けは index.html の <head> の1行（sessionStorage）。
   main.js は defer なので、そこに書くと一瞬映ってしまう。                */
.intro {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(22px, 3vw, 40px); padding: 24px;
  background: var(--bg-invert); color: #fff; text-align: center;
  animation: intro-out 2000ms var(--ease-rise) 1800ms both;
}
.no-intro .intro { display: none; }

.intro__tag {
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(23px, 14.6px + 2.24vw, 44px);
  line-height: 1.8; letter-spacing: .12em;
  /* 字間を右にも取るので、そのぶん左へ寄せて見た目の中央を合わせる
     （.band__label と同じ理屈。入れないと2行目が右にずれて見える） */
  text-indent: .12em;
}
.intro__tag .rise__in { animation: line-rise 900ms var(--ease-rise) 200ms both; }
.intro__lead {
  display: flex; flex-direction: column; align-items: center;
  font-weight: 500; font-size: clamp(12px, 10.6px + 0.38vw, 16px);
  line-height: 2; letter-spacing: .1em; color: #fff; opacity: .62;
  animation: fade-in 800ms var(--ease-rise) 800ms both;
}
@media (min-width: 768px) { .intro__lead { flex-direction: row; gap: 0 1.4em; } }

/* visibility は離散的に切り替わる。99% を挟まないと途中で消える */
@keyframes intro-out {
  0%   { background-color: var(--bg-invert); opacity: 1; visibility: visible; }
  44%  { background-color: #fff; opacity: 1; }
  99%  { visibility: visible; }
  100% { background-color: #fff; opacity: 0; visibility: hidden; }
}

/* ---------- 背面の巨大英字が、左右で逆に流れる ----------
   新しい要素はひとつも足していない。いまある9枚をずらすだけ。

   **CSS の scroll-driven animations（animation-timeline）は使っていない。**
   Safari 18 以前が非対応で、実機で「まったく動かない」ことがあるため
   （macOS 15 の Safari がこれ。2026-08-17 に実機で無反応と判明）。
   進み具合だけを main.js が --p（0〜1）として渡し、見た目の定義はここに置いたまま。

   **横は 30px が上限。** 進む向きの余白がいちばん狭いのは 1024px の VOICE で 29px しかなく、
   いまの値で使い切っている。外へ動かすと画面から見切れる（HANDOVER §5③）。
   足りないぶんは**縦で稼ぐ。** 縦はセクションの中なので余裕がある。
   下へ流すのは、スクロールに対して遅れて見える＝奥行きが出る向きだから。

   1024px 未満では動かさない。SP は英字の左右の余白が10px前後しかなく、
   どれだけ小さく動かしても見切れる（375px で APPROACH の左余白が7px）。 */
.ghost { --p: 0; }
@media (min-width: 1024px) {
  .ghost { translate: calc(var(--p) * min(30px, 2.2vw)) calc(var(--p) * 96px); }
  /* 右に置いてある5枚だけ、横は逆向き。縦は揃える */
  .ghost--approach, .ghost--service, .ghost--speaking,
  .ghost--price, .ghost--voice {
    translate: calc(var(--p) * min(30px, 2.2vw) * -1) calc(var(--p) * 96px);
  }
}

/* ---------- 地がひとりでに動く（2026-08-17 撤去） ----------
   Codex に生成させた抽象画像を2層、逆向きに動かしていた。**外した。**

   却下の理由は2つ。**動いていることが分からない**、そして
   **文字色と近すぎて本文が読みにくくなった。** 淡い青の面に淡い青の模様を敷いたので、
   濃くすれば見えるが読みにくさが増し、薄くすれば動きが分からない。両立しなかった。

   同じことをやろうとする前に：**このサイトで外れた動きは全部「地」に付けたもの**
   （有機形状・この地・事例の1列・写真の追尾）。**残ったものは全部「中身」に付いている**
   （見出しのせり上がり・工程が灯る・縦罫が引かれる）。地には付けないこと。

   画像 assets/img/bg-drift.webp と consulting-scenes/bg-drift-original.png は
   未使用のまま置いてある。戻す予定が無ければ消してよい。                   */

/* ---------- サービス／考え方の項目にカーソルを当てる ----------
   .grid3 は サービス（6項目）と 私たちの考え方（3項目）の両方で使っている。

   **transform を使うこと。translate は .reveal が出現に使っていて奪い合う。**
   transform と translate は別のプロパティなので、こちらなら喧嘩しない。
   押せるものではないので、影も枠も付けない（カードに見せない）。      */
@media (hover: hover) {
  .grid3__item { transition: transform 260ms var(--ease); }
  .grid3__item:hover { transform: translateY(-6px); }
  .grid3__title, .grid3__num { transition: color 260ms var(--ease), opacity 260ms var(--ease); }
  .grid3__item:hover .grid3__title { color: var(--blue-500); }
  .grid3__item:hover .grid3__num { opacity: 1; }
}

/* ---------- 章の反転（PROFILE 〜 講演バナーの手前） ----------
   スクロールで、この2セクションが深い青に切り替わる。**900ms。**
   参考サイトが `.bg-change.to-bg-blue` でやっているのと同じ考え方
   （器の背景色を、閾値をまたいだ瞬間に切り替える）。

   **なぜここか。** このサイトには目的が2つある（伴走コンサルの依頼／講演の依頼）。
   PROFILE から講演までは**読者が院長から企業の担当者へ移っていく区間**で、
   色が変わることに意味がある。装飾で反転させているのではない。

   **地の色は --bg-invert（#0A1A56）ではなく --text-muted（#24467F）。**
   濃紺だときつすぎる、という判断（2026-08-17）。CONTACT の濃紺とも差がついて、
   「章の色」と「最後の面」が別物として読める。

   色は変数を塗り替えるだけで、中の文字も罫線も一斉に付いてくる。
   ただし**地の上で消える／浮きすぎる部品は個別に直す必要がある**（下記）。 */
.sec--profile, .sec--speaking {
  transition: background-color 900ms var(--ease-rise), color 900ms var(--ease-rise);
}
/* 自分で color を書いている要素は、変数が変わった瞬間にぱちんと切り替わってしまう。
   地と同じ 900ms を当てて、一緒に沈ませる。
   ボタンは触らない。ここを 900ms にするとホバーが鈍る                */
.sec--profile .sec__eyebrow, .sec--profile .sec__lede, .sec--profile .ghost,
.sec--profile .prof__career dt, .sec--profile .prof__career > div, .sec--profile .prof__close,
.sec--speaking .sec__eyebrow, .sec--speaking .sec__lede, .sec--speaking .spk__h3,
.sec--speaking .spk__list li, .sec--speaking .ghost,
.sec--speaking .marquee, .sec--speaking .marquee__label, .sec--speaking .marquee__track img {
  transition: color 900ms var(--ease-rise), border-color 900ms var(--ease-rise),
              background-color 900ms var(--ease-rise);
}

.sec--profile.is-dark, .sec--speaking.is-dark {
  /* #24467F は基底の --text-muted と同じ色。**var() で書いてはいけない。**
     この規則の中で --text-muted を上書きしているので、var(--text-muted) は
     上書き後の #D3E0F4 を拾ってしまい、地が明るい水色になる（実際になった） */
  background-color: #24467F;
  --text: #fff;
  --text-muted: #D3E0F4;
  --border: rgba(255, 255, 255, .26);
  --blue-500: #BBD0F0;
  /* **この1行が要る。** 変数の塗り替えは「color: var(--text) と自分で書いている要素」
     にしか届かない。本文や箇条書きは color を持たず body から継承しているので、
     ここで色そのものを渡さないと #0A2463 のまま残り、対比 1.12:1 で読めなくなる。
     実際に一度そうなった（2026-08-17 実測） */
  color: var(--text);
}
/* 変数だけでは直らないもの */
.sec--profile.is-dark .ghost, .sec--speaking.is-dark .ghost {
  /* --ghost（#E4EBF7）のままだと地の上で白々しく浮く */
  color: rgba(255, 255, 255, .12);
}
/* いまこの章にあるボタンは .btn-line だけ。.btn-blob の分も先に書いてある。
   濃い色のボタンを濃い地に置くと沈んで消えるので、足したときはこれが要る */
.sec--profile.is-dark .btn-blob, .sec--speaking.is-dark .btn-blob {
  background: #fff; color: var(--bg-invert);
}
.sec--profile.is-dark .btn-blob:hover, .sec--speaking.is-dark .btn-blob:hover {
  background: var(--blue-100);
}
.sec--profile.is-dark .btn-line, .sec--speaking.is-dark .btn-line {
  border-color: rgba(255, 255, 255, .6); color: #fff;
}
.sec--profile.is-dark .btn-line:hover, .sec--speaking.is-dark .btn-line:hover {
  background: rgba(255, 255, 255, .12);
}
.sec--speaking.is-dark .marquee {
  /* 白い帯のままだと、章の途中に明るい横線が入って章が割れる */
  background: transparent;
}
.sec--profile.is-dark .sec__lede,
.sec--speaking.is-dark .sec__lede,
.sec--speaking.is-dark .spk__h3 { color: #fff; }

/* ---------- 縦罫が上から引かれる ----------
   border-right のままでは描けないので、同じ位置に ::after を立てて scaleY する。
   境界の1px は box-sizing: border-box のぶん、right: 0 でちょうど元の位置。
   ↑ の .grid3__item の border-right 定義より後ろに置くこと。          */
.grid3__item { position: relative; }
.grid3__item::after {
  content: none;
  position: absolute; top: 0; right: 0; width: 1px; height: 100%;
  background: var(--border);
  transform-origin: top; scale: 1 0;
  /* カードのフェードと同時に引くと、1px の線なので気づかれない。
     カードが出きってから引く */
  transition: scale 900ms var(--ease-rise) 420ms;
}
.grid3__item.is-visible::after { scale: 1 1; }
@media (min-width: 620px) and (max-width: 999px) {
  .grid3__item:nth-child(odd) { border-right: 0; }
  .grid3__item:nth-child(odd)::after { content: ""; }
}
@media (min-width: 1000px) {
  .grid3__item:not(:nth-child(3n)) { border-right: 0; }
  .grid3__item:not(:nth-child(3n))::after { content: ""; }
}

/* ---------- リンクの下線 ----------
   ホバーで左から引き、外すと右へ抜ける。
   background-position を left/right で入れ替えるだけで向きが変わる。
   ヘッダーの CTA は元から下線を持っているので外す。                 */
.site-nav a:not(.site-nav__cta), .site-foot__nav a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: right calc(50% + .85em);
  transition: color 200ms var(--ease), background-size 340ms var(--ease-rise);
}
.site-nav a:not(.site-nav__cta):hover, .site-foot__nav a:hover {
  background-size: 100% 1px;
  background-position: left calc(50% + .85em);
}

/* ---------- ボタンの矢印 ----------
   右へ抜けて、左から入り直す。器で切らないと隣の文字に重なる       */
.btn-blob, .link-arw, .btn-line { overflow: hidden; }
.arw { display: inline-block; }
.btn-blob:hover .arw, .link-arw:hover .arw, .btn-line:hover .arw {
  animation: arw-through 520ms var(--ease-rise);
}
@keyframes arw-through {
  0%     { translate: 0; }
  49.9%  { translate: 1.8em; }
  50%    { translate: -1.8em; }
  100%   { translate: 0; }
}

/* ---------- FAQ の開閉 ----------
   非対応ブラウザは従来どおり即時に開く。開かなくなることはない       */
:root { interpolate-size: allow-keywords; }
.faq__item::details-content {
  block-size: 0; overflow: hidden; opacity: 0;
  transition: content-visibility 360ms allow-discrete,
              block-size 360ms var(--ease-rise),
              opacity 260ms var(--ease-rise);
}
.faq__item[open]::details-content { block-size: auto; opacity: 1; }

/* .reveal は main.js が is-visible を付けるまで隠れている。
   JS が無効だと見出しごと出なくなるので、その場合は最初から表示しておく。
   見出しにも .reveal を使うようにした以上、ここは押さえておくこと */
@media (scripting: none) {
  .reveal { opacity: 1; translate: none; }
  .reveal--rise .rise__in { translate: none; }
  .grid3__item::after { scale: 1 1; }
  /* 工程表の沈んだ状態は .is-visible が付くまで解けない。JS 無効なら最初から灯す */
  .steps__item.reveal:not(.is-visible) .steps__num {
    color: var(--blue-500); border-color: var(--blue-500); background: var(--blue-100);
  }
  .steps__item.reveal:not(.is-visible)::after { scale: 1 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; translate: none; }
  /* 見出しの中身も戻す。ここを書き忘れると、動きを切っている人に見出しが出ない */
  .reveal--rise .rise__in { translate: none; }
  .faq__item::details-content { block-size: auto; opacity: 1; overflow: visible; }
  .grid3__item::after { scale: 1 1; }
  /* これが要。導入は animation で消えるので、animation を殺すと
     濃紺の画面が居座ってサイトが読めなくなる */
  .intro { display: none; }
}