/* Google Fonts は header.php で <link rel="stylesheet"> により読み込む（@import より高速）。
   ========================================================================== */
/* ==========================================================================
   Ondo Inc. corporate site — design tokens
   色は現行サイト（Peraichi版 corp.ondo-circle.com）で実際に使われている
   RGB値のみを使用する（新規の色を作らない）。
   #f7f7f7 / #f3eee7 / #40382f / #05161a / #75695d / #999999 / #b3b3b3 / #ffffff
   ========================================================================== */
:root {
  --paper: #f3eee7;       /* ボディ部分の基準背景色（2026-09-13〜） */
  --paper-alt: #f7f7f7;   /* ヘッダー・フッター、および本文と区別したいカード等の背景（変更前の基準色を流用） */
  --ink: #40382f;         /* 文字色：ヘッダー・フッター・ボディ部分・全ページ共通 */
  --ink-deep: #05161a;    /* （未使用） */
  --accent: #75695d;      /* ボタン背景・枠線など、文字色以外のアクセントに限定使用 */
  --muted: #999999;       /* （文字色としては使用しない。背景・枠線用に残置） */
  --border: #b3b3b3;      /* 罫線 */
  --white: #f7f7f7;       /* 白抜き文字＝ヘッダーの背景色と同じにする（真のffffffは使わない） */

  --serif: "Zen Old Mincho", "Quattrocento", serif;
  --serif-en: "Quattrocento", "Zen Old Mincho", serif;
  --gothic: "Noto Sans JP", "Quattrocento Sans", -apple-system, sans-serif;
  --gothic-en: "Quattrocento Sans", "Noto Sans JP", sans-serif;

  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --fs-hero: clamp(1.4rem, 1.04rem + 1.6vw, 2.08rem); /* MISSION HEROコピー：当初比20%縮小 */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--gothic);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; }

/* サイト内画像は保護（要素検証・URL直叩きは許容、閲覧時のD&D/長押し保存は抑止） */
img, .protect { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: 0.5rem; top: 0.5rem; padding: 0.55rem 1rem;
  background: var(--ink); color: var(--paper); transform: translateY(-160%);
  transition: transform 0.2s; z-index: 200; font-size: 0.8rem;
}
.skip:focus { transform: none; }

.wrap { max-width: 72rem; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
.measure { max-width: 42rem; margin-inline: auto; }
.centered { text-align: center; }

/* ---------- reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(0.6rem); transition: opacity 1.9s var(--ease-expo), transform 1.9s var(--ease-expo); }
.reveal.is-in { opacity: 1; transform: none; }
:root[data-noanim] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: opacity 1.9s var(--ease-expo); transform: none; }
}

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  /* jQuery Ripples はターゲット要素自身の background-image（実ファイル）からテクスチャを
     読み込むため、単色のCSS変数だけでは波紋を描画できない。--paper と同色のベタ画像を
     background-image として敷き、水面ハイライト効果の土台にする（PC・hover環境のみ有効化）。 */
  background: var(--paper) url("/assets/img/paper-solid.png?v=1") center / cover no-repeat;
  border-bottom: 1px solid rgba(64, 56, 47, 0.08);
}
.site-header__inner { display: flex; align-items: stretch; justify-content: space-between; min-height: 3.75rem; }
.site-brand { display: flex; align-items: center; }
.site-brand img { height: clamp(1.6rem, 1.3rem + 1vw, 2rem); width: auto; }
.nav { display: flex; align-self: stretch; align-items: stretch; gap: clamp(1.25rem, 3vw, 2.5rem); font-family: var(--gothic-en); font-size: 1rem; letter-spacing: 0.08em; }
.nav a {
  position: relative; display: inline-flex; align-items: center;
  opacity: 0.7; transition: opacity 0.3s var(--ease-expo);
}
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; }
/* 選択中のメニュー：ヘッダー下端の罫線を、その項目の文字幅ぶんだけ濃い色で上書きする
   （ESPLANサイトと同じ挙動）。新しい線を足すのではなく .site-header の border-bottom に重ねる。 */
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink);
}
.nav-toggle { display: none; width: 1.6rem; height: 1.1rem; position: relative; }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--ink); transition: transform 0.3s var(--ease-expo), opacity 0.3s;
}
.nav-toggle::before { top: 0; }
.nav-toggle span { top: 50%; transform: translateY(-50%); }
.nav-toggle::after { bottom: 0; }
body { padding-top: 3.6rem; }

@media (max-width: 48rem) {
  .nav-toggle { display: block; align-self: center; }
  /* .site-footer nav（後方の基本ルール）と詳細度を揃えると順番負けするため、
     footer要素を加えて詳細度を上げる */
  footer.site-footer nav { display: none; }
  .nav {
    position: fixed; inset: 3.6rem 0 0 0; z-index: 90;
    flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
    background: var(--paper); font-size: 1.5rem;
    /* justify-content:center の中央位置を、テキスト1行分（line-height 1.6×1.5rem）
       だけ上にずらす。center は padding を含めた領域の中心に来るため、
       下側にその2倍のpaddingを追加することで見た目の中心を1行分だけ引き上げる。 */
    padding-bottom: calc(2 * 1.6 * 1.5rem);
    transform: translateY(-100%); opacity: 0; pointer-events: none;
    transition: transform 0.4s var(--ease-expo), opacity 0.4s var(--ease-expo);
  }
  .nav[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; }
  .nav-toggle[aria-expanded="true"] span { opacity: 0; }
  .nav-toggle[aria-expanded="true"]::before { transform: translateY(0.55rem) rotate(45deg); }
  .nav-toggle[aria-expanded="true"]::after { transform: translateY(-0.55rem) rotate(-45deg); }
}

/* ---------- footer ---------- */
.site-footer { background: var(--paper); padding-block: clamp(2.25rem, 5.4vw, 3.6rem) 2rem; text-align: center; }
.site-footer img { height: 1.4rem; width: auto; margin-inline: auto; margin-bottom: 1.25rem; opacity: 0.85; }
.site-footer nav { display: flex; justify-content: center; gap: 1.5rem; font-family: var(--gothic-en); font-size: 14px; margin-bottom: 1rem; }
.site-footer p { color: var(--ink); font-size: 0.75rem; font-family: var(--serif-en); letter-spacing: 0.03em; }

/* ---------- hero ----------
   ESPLAN SERVICEページのHEROと同じ出現方法：背景とメインコピー(en)が同時にフェード開始、
   メインコピーの表示完了と同時にサブコピー(jp)がフェード開始。JSが .hero-go を付与する
   （背景画像の読み込み完了を待ってから開始）。 */
/* 高さは現行サイト（corp.ondo-circle.com）と同じ固定値（フルワイド時=31.25rem/500px、
   モバイル時=17.74rem/約284px）。現行サイトも幅に対して可変ではなく固定pxのため、
   ある幅での縦横比を完全一致させるにはこちらも固定値にする必要がある。
   画像ファイル自体を承認済みのB案（上下150pxトリミング済み）に差し替え済みのため、
   コンテナの縦横比がどう変化してもファイルの範囲外（トリミング済み部分）が
   描画されることはない。 */
.hero { position: relative; height: 31.25rem; display: grid; place-items: end start; overflow: hidden; background: var(--paper); }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
/* B案（検証済み・確定）：中央揃え。コピー塊（英語＋日本語）の中心を、HEROの垂直中心・
   HEROを左右2分割した右半分の水平中心（75%地点）に合わせる。
   width:max-content が無いと、absolute+left:75%+translateX(-50%) の組み合わせで
   ブラウザが利用可能幅を実際より狭く（100%-75%分しか）見積もり、英語行が不要に
   折り返される（検証ページで発見した挙動）。
   --hero-copy-x（中心位置）と --hero-copy-scale（フォント倍率）は main.js が
   実測して都度更新する：画面が狭くなり75%中心では画像中央を越えてはみ出す
   （＝右端が見切れる）場合は中心を50%に切り替え、それでも3行目の英語が
   1行に収まらない場合はフォントサイズを縮小する（詳細は main.js 参照）。
   中心が50%（画像全体の中央）に切り替わった場合は垂直位置も下げ、
   HERO下端から日本語コピーの行間分だけ離した位置（下揃え）に配置する
   （data-anchor="bottom" を main.js が都度付与、--hero-copy-gap も実測更新）。
   HEROコピーはスクロールしても動かさない（常にこの静止位置に固定）。 */
.hero__inner {
  position: absolute; z-index: 1;
  top: 50%; left: var(--hero-copy-x, 75%);
  /* 右側（75%中心）配置の時だけ、英語テキスト一行分（フォントサイズ×line-height1.08）下にずらす。
     中央寄せ（data-anchor="bottom"）の時はこの下端の基準がすでに別ロジックのため対象外。 */
  transform: translate(-50%, calc(-50% + var(--fs-hero) * var(--hero-copy-scale, 0.8) * 1.08));
  width: max-content;
  /* .hero が display:grid のため、absolute配置でも grid item として
     align-self の既定（stretch）の影響を受け、top を書き換えるたびに
     高さが不正に伸縮する不具合があった（実測して発見）。
     height を明示して常にコンテンツ幅なりの高さに固定する。 */
  height: max-content;
  text-align: center;
  color: var(--white);
}
.hero__inner[data-anchor="bottom"] {
  top: auto;
  bottom: var(--hero-copy-gap, 0px);
  transform: translateX(-50%);
}
/* MISSIONページHEROのみの指定書体（サイト全体の --serif / --serif-en は変更しない）。
   基準サイズは --hero-copy-scale（初期値0.8＝現行から20%縮小）を乗じて決まる。 */
.hero__en { font-family: "Didot", "Zen Old Mincho", serif; font-size: calc(var(--fs-hero) * var(--hero-copy-scale, 0.8)); line-height: 1.08; }
.hero__jp { font-family: "Shippori Mincho", serif; font-weight: 700; font-size: calc(clamp(1.12rem, 0.832rem + 1.28vw, 1.664rem) * var(--hero-copy-scale, 0.8)); letter-spacing: 0.06em; margin-top: 1.1rem; line-height: 1.52; }

.hero__bg, .hero__en, .hero__jp {
  opacity: 0;
  transition: opacity 2.5s var(--ease-expo), transform 2.5s var(--ease-expo);
}
.hero__bg { transition-delay: 0s; }
.hero__en {
  transform: translateY(1rem);
  transition: opacity 3s ease-in-out, transform 3s ease-in-out;
  transition-delay: 0s;
}
/* 日本語も英語（.hero__en）と全く同じタイミング（duration・delay・easing）に統一 */
.hero__jp {
  transform: translateY(1rem);
  transition: opacity 3s ease-in-out, transform 3s ease-in-out;
  transition-delay: 0s;
}
.hero.hero-go .hero__bg,
.hero.hero-go .hero__en,
.hero.hero-go .hero__jp { opacity: 1; transform: none; }
:root[data-noanim] .hero .hero__bg,
:root[data-noanim] .hero .hero__en,
:root[data-noanim] .hero .hero__jp { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero__bg, .hero__en, .hero__jp { transform: none; }
}
@media (max-width: 40rem) {
  .hero { height: 17.74rem; }
}

/* MISSIONページ限定：スクロールするとHEROエリアは画面に固定されたまま、
   本文（Philosophyセクション以降）がハードエッジで競り上がってHEROを覆う。
   ESPLAN MISSIONページのスマホ版と同じ考え方（HEROをfixedで背面に固定し、
   本文を通常フローのまま前面に重ねる）。HERO高さは現行サイト同様に
   ブレークポイントごとの固定値のため、JSでの実測なしにCSSのみで実現できる。 */
body.mission {
  /* HEROがヘッダーの下まで潜り込む形でinset:0起点のfixedになるため、
     通常ページ用の body の padding-top（ヘッダー分の余白）は不要。
     つけたままだと HERO 下端と本文の間に、この分だけ余計な隙間ができる。 */
  padding-top: 0;
}
body.mission .hero {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: -1;
}
body.mission main { padding-top: 31.25rem; position: relative; z-index: 1; }
@media (max-width: 40rem) {
  body.mission main { padding-top: 17.74rem; }
}

/* HEROコピー表示後、見出し→説明文群→挿入画像の順でフェードイン。
   スクロール連動の .reveal ではなく、HEROの表示完了（main.jsが
   html[data-hero-copy-done] を付与）を起点にした時間差表示にする。 */
body.mission .hero-sequence {
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 1.9s var(--ease-expo), transform 1.9s var(--ease-expo);
}
/* 見出しの塊（sequence 1）だけはスライドさせず、フェードのみにする */
body.mission .hero-sequence[data-sequence="1"] { transform: none; transition: opacity 1.9s var(--ease-expo); }
:root[data-hero-copy-done] body.mission .hero-sequence { opacity: 1; transform: none; }
:root[data-hero-copy-done] body.mission .hero-sequence[data-sequence="1"] { transition-delay: 0s; }
:root[data-hero-copy-done] body.mission .hero-sequence[data-sequence="2"] { transition-delay: 0.3s; }
:root[data-hero-copy-done] body.mission .hero-sequence[data-sequence="3"] { transition-delay: 0.6s; }
:root[data-hero-copy-done] body.mission .hero-sequence[data-sequence="4"] { transition-delay: 0.9s; }
:root[data-hero-copy-done] body.mission .hero-sequence[data-sequence="5"] { transition-delay: 1.2s; }
:root[data-hero-copy-done] body.mission .hero-sequence[data-sequence="6"] { transition-delay: 1.5s; }
:root[data-hero-copy-done] body.mission .hero-sequence[data-sequence="7"] { transition-delay: 1.8s; }
/* 画像はMission小見出し（sequence 2、0.3s）の0.4秒後＝0.7sに変更。
   発火から完全表示までの所要時間も他より0.2秒長く（1.9s→2.1s）。 */
:root[data-hero-copy-done] body.mission .hero-sequence[data-sequence="8"] {
  transition-delay: 0.7s;
  transition-duration: 2.4s;
}
:root[data-noanim] body.mission .hero-sequence { opacity: 1 !important; transform: none !important; transition: none !important; }

/* MESSAGEページ：見出し・挿入画像・小見出し・本文、すべてページ表示と同時に
   （delay無し）フェードイン開始する（画像のみ所要時間2.4s）。
   HEROが無いページなので、待機なしでページ表示直後に発火する（main.jsがhtml[data-msg-go]を付与）。 */
body.message .msg-sequence {
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 1.9s var(--ease-expo), transform 1.9s var(--ease-expo);
}
/* 見出しの塊（sequence 1）だけはスライドさせず、フェードのみにする */
body.message .msg-sequence[data-sequence="1"] { transform: none; transition: opacity 1.9s var(--ease-expo); }
/* 小見出し（sequence 3）と本文（sequence 4）は、右から左へスライドインさせる */
body.message .msg-sequence[data-sequence="3"],
body.message .msg-sequence[data-sequence="4"] { transform: translateX(1.5rem); }
:root[data-msg-go] body.message .msg-sequence { opacity: 1; transform: none; transition-delay: 0s; }
:root[data-msg-go] body.message .msg-sequence[data-sequence="2"] { transition-duration: 2.4s; }
:root[data-noanim] body.message .msg-sequence { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---------- section heading ---------- */
/* Philosophy / 企業理念 / Our Mission, Vision & Value の塊ごと、
   企業理念テキスト一行分（フォントサイズ×line-height1.6）だけ上に詰める。
   .sect-head 自身は reveal のフェード用 transform を使うため、ここは
   transform ではなく margin-top（レイアウトを実際に詰める）で実現する。 */
.sect-head { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; margin-top: calc(clamp(1.5rem, 1.2rem + 1.2vw, 2rem) * -1.6); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.sect-head .en { font-family: var(--gothic-en); font-size: 0.75rem; letter-spacing: 0.22em; color: var(--ink); text-transform: uppercase; }
/* 「企業理念」で80%に縮小したサイズを、他の見出し（ondóの特徴を除く）にも統一適用する */
.sect-head h2 { font-family: var(--serif); font-size: clamp(1.2rem, 0.96rem + 0.96vw, 1.6rem); font-weight: 500; letter-spacing: 0.04em; }
.sect-head .sub { font-family: var(--gothic-en); font-size: 0.85rem; color: var(--ink); opacity: 0.65; margin-top: 0.15rem; }
/* CONTACTページ限定：見出し（お問い合わせ）とサブテキストの間隔（gap①）を、
   サブテキストとフォーム最初の項目との間隔（gap②＝.sect-head の margin-bottom）
   と同じにする。.sect-head の gap を変えると「CONTACT」と見出しの間隔まで
   変わってしまうため、.sub の margin-top だけを個別に広げる。 */
/* .sect-head は flex の gap:0.4rem も持つため、.sub の margin-top はその分を
   差し引いた値にしないと、実際の間隔が gap②より 0.4rem 分大きくなってしまう。 */
body.contact .sect-head .sub { margin-top: calc(clamp(2rem, 5vw, 3.5rem) - 0.4rem); }
/* BUSINESS・COMPANY・CONTACTページの見出し（.sect-head.reveal）はスライドさせず、
   フェードのみにする（MISSION・MESSAGEページの見出しと統一）。
   PRIVACYページも同じ .sect-head.reveal を使うが対象外のため、ページ単位でスコープする。 */
body.business .sect-head.reveal,
body.company .sect-head.reveal,
body.contact .sect-head.reveal { transform: none; transition: opacity 1.9s var(--ease-expo); }
/* 動画エリアのみフェード時間を3.0sに変更（見出しは1.9sのまま） */
body.business .biz-video.reveal { transform: none; transition: opacity 3.0s var(--ease-expo); }

/* background指定は明示する（bodyの背景色に頼った透明のままだと、MISSIONページで
   HERO固定＋本文せり上がりの際に文字だけが浮いて見え、背景ごと覆えないため） */
.section { padding-block: clamp(3.5rem, 9vw, 6.5rem); background: var(--paper); }
.section--alt { background: var(--paper-alt); }
.section--cream { background: #FDFAF6; }

/* ---------- philosophy: mission/vision/value ----------
   .philo-grid はMISSIONページとCompanyページ（会社概要）で共有クラスのため、
   ここでは共通のデフォルト値のみを定義し、MISSION固有の変更（列幅・配置）は
   body.mission 配下にスコープする（Companyページに波及させないため）。 */
.philo-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 6vw, 4rem); align-items: center; }
/* グリッドアイテムの min-width の初期値は auto（＝中身の画像の実寸が下限になる）ため、
   画像を含む列が1カラム表示（スマホ）になった時、コンテナより画像の方が広ければ
   グリッドごと画面外にはみ出してしまう（founder-profile.jpg 等で発生）。
   0にして max-width:100%（グローバル）が正しく効くようにする。 */
.philo-grid > * { min-width: 0; }
.philo-grid figure img { border-radius: 2px; }
/* MISSIONページ限定：画像は右・テキストは左（DOM順もテキストが先＝画像を第2グリッド列に）。
   画像サイズは 1.05fr → 20%縮小(0.84fr) → さらに15%縮小(0.714fr)。
   align-items:start にして、画像の上端位置は main.js がMissionブロック
   （見出し＋本文2段落）の下端に合わせて margin-top を都度計算する（左右2カラムの
   時のみ。1カラムに変わる幅では何もしない＝通常の縦積みに戻る）。 */
body.mission .philo-grid { grid-template-columns: 1fr 0.6426fr; align-items: start; }
/* MISSIONページのPhilosophy画像のみ：高さは変えず左右をトリミングして正方形にする
   （object-fit:cover の既定 object-position:center が中心位置を保つ）。
   30%透明（opacity 0.7）。角は丸めない（ピン角、共有ルールの2pxを打ち消す）。 */
.philo-grid figure.philo-photo--square img { aspect-ratio: 1 / 1; object-fit: cover; opacity: 1; border-radius: 0; }
.philo-block + .philo-block { margin-top: clamp(2rem, 5vw, 2.75rem); }
.philo-block h3 { font-family: var(--serif-en); font-size: calc(1.05rem + 1px); letter-spacing: 0.06em; color: var(--ink); }
/* 小見出しは「Mission | 使命」のように一行表示（.jp側に "| " を含める） */
.philo-block h3 .jp { display: inline; font-family: var(--serif); font-size: 0.85rem; color: var(--ink); opacity: 0.7; margin-left: 0.5em; letter-spacing: 0.1em; }
/* Mission/Vision/Valueの説明文は全てセリフ体に統一。行間は元の1.85から20%縮小 */
.philo-block p { margin-top: 0.6rem; font-size: 0.95rem; line-height: calc(1.85 * 0.8); font-family: var(--serif); }
/* 「デザイナーに、もっと自由を。」のみ他の説明文より1.5px大きく。
   行間（前後の余白感）は変えないため line-height は元の1.85のまま維持 */
.philo-block .lede { font-size: calc(0.95rem + 1.5px); line-height: 1.85; }
/* 項目間の間隔は、他の説明文の実際の行間（line-height 1.48 から文字自身の高さ
   1.0 を引いた「行と行の隙間」部分）と同じ値にする。line-height の値そのもの
   （0.95rem×1.48）を使うと、文字の高さぶんも含んでしまい実際の行間より広くなる。
   （「Flexibility柔軟であること」「Deep Thinking考え抜くこと」間の間隔を指す） */
.value-list { margin-top: 0.8rem; display: flex; flex-direction: column; gap: calc(0.95rem * (1.85 * 0.8 - 1)); }
/* line-height は他の説明文（.philo-block p）と同じ1.48に統一（未指定だとbodyの1.6を継承し不一致だった） */
.value-list li { font-family: var(--serif); font-size: 0.95rem; line-height: calc(1.85 * 0.8); }
/* 英語（5項目）は太字にせず、サイズは0.95remから1px大きく */
.value-list b { font-family: var(--serif-en); font-weight: 400; font-size: calc(0.95rem + 1px); }
/* 日本語（5項目）は英語（0.95rem+1px）より1px小さく＝0.95rem。
   5項目のいずれかが1行に収まらない場合、main.jsが --value-jp-scale を
   5項目共通で縮小し、日本語だけ均一にサイズダウンする（英語側は変更しない）。 */
.value-list span { font-family: var(--serif); font-size: calc(0.95rem * var(--value-jp-scale, 1)); opacity: 0.72; margin-left: 0.4em; }

@media (max-width: 48rem) {
  .philo-grid { grid-template-columns: 1fr; }
  /* 会社概要：スマホでは画像→説明文の順番にする（PCではテキスト左・画像右のDOM順のまま） */
  .company-row figure { order: -1; }
  /* 会社概要・創業者実績の挿入画像も、MISSION/MESSAGEページの画像と同じ左右余白にする */
  .company-row figure, .founder-row figure { width: calc(100% - clamp(2rem, 6vw, 4rem) * 1.25); margin-inline: auto; }
  /* body.mission .philo-grid（詳細度が高い）が上のルールを上書きしてしまうため、
     同じセレクタでここでも明示的に1カラムへ戻す（詳細度を揃えた上でメディア
     クエリ内に書くことで、幅が狭い時はこちらを優先させる）。 */
  body.mission .philo-grid { grid-template-columns: 1fr; }
  /* MISSIONページ限定：画像がテキストの下段に来た時（1カラム表示）、
     テキストと画像の間隔を現在の1.5倍にする。画像の下端位置は変えず、
     縮小した分（現在のgapの半分）をそのまま margin-top に変換することで実現
     （gap本来の分 + 追加margin-top = 元のgapの1.5倍）。 */
  /* さらに1.5倍（合計で元のgapの2.25倍）。grid本来のgap分は変わらないため、
     追加のmargin-topは (2.25-1)=1.25倍分。 */
  body.mission .philo-photo--square { margin-top: calc(clamp(2rem, 6vw, 4rem) * 1.25); }
  body.mission .philo-photo--square img { width: calc(100% - clamp(2rem, 6vw, 4rem) * 1.25); margin-inline: auto; }
}

/* ---------- message (representative) ---------- */
.msg-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 6vw, 4rem); align-items: start; }
.msg-layout figure img { border-radius: 2px; }
/* MISSIONページのPhilosophy画像と同じ正方形トリミング（高さは変えず左右を切り、
   object-fit:cover の既定 object-position:center で中心を保つ） */
.msg-layout figure.msg-photo--square img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; }
.msg-body h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; margin-bottom: 1.1rem; }
.msg-body p { font-family: var(--serif); font-size: 0.95rem; line-height: 1.95; }
.msg-body p + p { margin-top: 1.3rem; }
/* 本文最後と署名の間：通常の段落間隔(1.3rem)に加えて、行の高さ(0.95rem*1.95)3行ぶんの
   空白を追加（最初の空改行1行分＋今回追加の2行分＝計3行）。
   「.msg-body p + p」（詳細度: クラス1+要素2）に打ち消されないよう、
   クラス2つの「.msg-body .msg-sign」で指定する。 */
.msg-body .msg-sign { margin-top: calc(1.3rem + 3 * 1.8525rem); text-align: right; }

@media (max-width: 48rem) {
  .msg-layout { grid-template-columns: 1fr; }
  /* MISSIONページと同じサイズ挙動：1カラム表示時は画像を全幅にせず、左右を
     clamp(2rem,6vw,4rem)*1.25 ぶん内側に寄せて中央揃えにする */
  .msg-photo--square img { width: calc(100% - clamp(2rem, 6vw, 4rem) * 1.25); margin-inline: auto; }
}

/* ---------- business: feature cards ---------- */
/* max-width は、指定の <br class="br-w"> 区間がそれぞれ1行に収まる最小幅を実測して55rem に設定
   （54remで全区間1行になることを確認、余裕を見て+1rem）。狭い画面では .wrap の余白に押されて
   自然に縮み、その幅では .br-w 自体も非表示になるため自然な折返しに戻る。 */
.biz-intro { max-width: 55rem; margin-inline: auto; text-align: center; font-size: 0.98rem; line-height: 1.95; }
.biz-intro + .biz-intro { margin-top: 1.4rem; }
.biz-video { position: relative; max-width: 55rem; margin: clamp(2rem, 5vw, 3rem) auto; border-radius: 2px; overflow: hidden; }
.biz-video:fullscreen { max-width: none; margin: 0; background: #000; display: flex; align-items: center; }
.biz-video:fullscreen > div:first-child { width: 100%; padding: 0; height: 100%; }
/* 自前の簡易コントロール（<video>の標準UIは出さず、
   ホバー時（スマホはタップ時）だけ再生ボタン・プログレスバー・音量UIを表示する）。
   配色は、動画のブランディング（背景/プライマリー #40382f、
   アイコン・文字 #fffbf5、アクセント #cc5500）に合わせ、サイトとトーン＆マナーを統一している。 */
.biz-video__controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.9rem;
  background: none;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.biz-video:hover .biz-video__controls,
.biz-video.is-active .biz-video__controls { opacity: 1; pointer-events: auto; }
/* 動画本体（コントロールバー以外の領域）をクリックしたら再生・一時停止をトグルする。
   動画の手前に透明なヒットゾーンを重ねてクリックを受け止める。
   コントロールバー（z-index:1）より背面に置き、バー自体の操作は妨げない。 */
.biz-video__hitzone {
  position: absolute; inset: 0; z-index: 0;
  background: none; border: none; padding: 0; margin: 0;
  cursor: pointer;
}
/* コントロールバーの背景を無くしたため、動画側が明るい色でもアイコンが視認できるようシャドーを付ける */
.biz-video__play,
.biz-video__mute,
.biz-video__fullscreen,
.biz-video__volume-slider { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); }
.biz-video__play { flex: none; display: grid; place-items: center; width: 2.34rem; height: 2.34rem; background: none; border: none; color: #fffbf5; cursor: pointer; }
.biz-video__play .ico-pause { display: none; }
.biz-video.is-playing .biz-video__play .ico-play { display: none; }
.biz-video.is-playing .biz-video__play .ico-pause { display: block; }
.biz-video__progress { flex: 1; height: 4px; background: rgba(255,251,245,0.28); border-radius: 999px; cursor: pointer; }
.biz-video__progress-fill { height: 100%; width: 0%; background: #cc5500; border-radius: 999px; }
/* 音量：アイコンは常時表示。スライダーはアイコン真上に縦向きで配置し、
   ホバー（スマホはタップ）した時だけ伸びて表示する */
/* margin-leftだと隣の .biz-video__progress が flex:1 で伸縮するため、その分を
   打ち消してしまい見た目が全く動かなかった（flexアルゴリズムが自動で相殺する）。
   そのため、レイアウト計算に影響しない position:relative の left オフセットで
   実際に見た目を移動させる。あわせて margin-right で同じ量だけ右側にも余白を
   確保し、隣の全画面表示ボタンが押し出されて元と同じ間隔を保つようにする
   （margin-right が無いと音量UIが全画面ボタンに重なってしまう）。
   値はスピーカーアイコン自体の幅(21px)の50%(10.5px)＋追加10px。 */
.biz-video__volume { position: relative; left: 20.5px; margin-right: 20.5px; flex: none; display: flex; align-items: center; }
/* アイコンからアイコン上に浮かぶスライダーまでの隙間を含めた見えない領域を
   ::before で確保し、そこにマウスが乗っている間も :hover を維持する
   （隙間で:hoverが切れてスライダーが消え、操作できなくなるのを防ぐ） */
.biz-video__volume::before {
  content: "";
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 2.5rem; height: 6.5rem;
}
.biz-video__mute { flex: none; display: grid; place-items: center; width: 2.08rem; height: 2.08rem; background: none; border: none; color: #fffbf5; cursor: pointer; }
.biz-video__mute .ico-vol-off { display: none; }
.biz-video.is-muted .biz-video__mute .ico-vol-on { display: none; }
.biz-video.is-muted .biz-video__mute .ico-vol-off { display: block; }
/* 色がブラウザ既定のフォーカス/ドラッグ中ハイライトで明るく変化しないよう、
   accent-color に頼らずトラック・つまみを自前でスタイルし、色を固定する。
   writing-mode:vertical-lr の影響でカーソルがテキストカーソルになってしまう
   問題も、cursor指定とuser-select:noneで防ぐ。 */
.biz-video__volume-slider {
  position: absolute; left: 50%; bottom: calc(100% + 0.4rem); transform: translateX(-50%);
  writing-mode: vertical-lr; direction: rtl;
  -webkit-appearance: none;
  appearance: none;
  width: 4px; height: 0; opacity: 0; pointer-events: none;
  background: transparent;
  outline: none;
  cursor: ns-resize !important;
  -webkit-user-select: none; user-select: none;
  transition: height 0.2s ease, opacity 0.2s ease, width 0.15s ease;
}
.biz-video__volume.is-vol-open .biz-video__volume-slider,
.biz-video.is-active .biz-video__volume-slider { height: 4.5rem; opacity: 1; pointer-events: auto; }
/* トグル自体にマウスが乗ったら、さらに太くする */
.biz-video__volume-slider:hover,
.biz-video__volume-slider:active { width: 6px; }
.biz-video__volume-slider::-webkit-slider-runnable-track {
  width: 100%; height: 100%;
  background: rgba(255,251,245,0.35);
  border-radius: 999px;
  cursor: ns-resize;
}
.biz-video__volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #cc5500;
  cursor: ns-resize;
  margin-left: -4px;
}
.biz-video__volume-slider::-moz-range-track {
  width: 100%; height: 100%;
  background: rgba(255,251,245,0.35);
  border-radius: 999px;
  cursor: ns-resize;
}
.biz-video__volume-slider::-moz-range-progress {
  background: #cc5500;
  width: 100%;
  border-radius: 999px;
}
.biz-video__volume-slider::-moz-range-thumb {
  width: 12px; height: 12px;
  border: none;
  border-radius: 50%;
  background: #cc5500;
  cursor: ns-resize;
}
.biz-video__volume-slider:focus::-webkit-slider-thumb { background: #cc5500; }
.biz-video__volume-slider:active::-webkit-slider-thumb { background: #cc5500; }
.biz-video__fullscreen { flex: none; display: grid; place-items: center; width: 2.08rem; height: 2.08rem; background: none; border: none; color: #fffbf5; cursor: pointer; }
.biz-video__fullscreen .ico-fs-close { display: none; }
.biz-video.is-fullscreen .biz-video__fullscreen .ico-fs-open { display: none; }
.biz-video.is-fullscreen .biz-video__fullscreen .ico-fs-close { display: block; }
/* 画面幅が十分ある時だけ改行する任意の <br>（MISSIONページ本文の折返し指定と同じ考え方） */
.br-w { display: none; }
@media (min-width: 48rem) { .br-w { display: inline; } }
/* .br-fit：直前の区間が画面幅の都合で1行に収まらない時だけ、main.js がこの改行を無効にする */
.br-w.br-fit--off { display: none; }
/* 「ondóの特徴」見出し～挿入画像の間隔：.sect-head の margin-bottom（他ページ共通）と
   .feature-grid の margin-top はマージン相殺（大きい方が採用される）ため、
   .feature-grid 側だけを半分にしても .sect-head 側の値に吸収されて見た目が変わらない。
   このセクション限定で .sect-head 側も同じ値まで下げ、相殺後の実値を半分にする。 */
.sect-head--feature { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.feature-grid { margin-top: clamp(1.25rem, 3vw, 2rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); }
/* 「ondóの特徴」見出しの左右の横線。幅は挿入画像と同じ（--feature-img-w、main.jsが実測して設定）。
   ondó は1.5倍、「の」は90%に個別調整（「特徴」はそのまま）。 */
/* align-items:baseline にして、横線（テキストを持たないため下端がベースラインになる）を
   ベースラインに揃えたのち、「特徴」（等倍サイズ）の縦の芯の高さぶんだけ transform で
   持ち上げる。center だと「ondó」が1.5倍で背が高いため、行全体の中心に引っ張られて
   「特徴」の芯とズレてしまう。 */
.feature-h { display: flex; align-items: baseline; justify-content: center; gap: clamp(1rem, 3vw, 1.5rem); }
.feature-h__line { flex: none; height: 1px; background: var(--ink); width: var(--feature-img-w, 8rem); transform: translateY(-0.35em); }
.feature-h__text { flex: none; white-space: nowrap; }
.feature-h__ondo { font-family: var(--serif-en); font-size: calc(1.5em * 0.85); }
.feature-h__no { font-size: 0.9em; }
.feature-card figure { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px; }
/* 挿入画像の出現方法をMESSAGEページの挿入画像と統一（同じ .reveal のスライド＋フェードに
   加え、所要時間だけMESSAGEページの画像と同じ2.4sに揃える）。発火タイミング（スクロール
   連動）自体は変更していない。 */
.feature-card figure.reveal { transition-duration: 2.4s; }
.feature-card figure img { width: 100%; height: 100%; object-fit: cover; }
.feature-card h3 { margin-top: 1.1rem; font-family: var(--serif-en); font-size: calc(1rem + 5px); letter-spacing: 0.03em; }
/* 小見出しは「Collective Intelligence | 集合知」のように「|」区切りで一行表示（.jp側に "| " を含める） */
.feature-card h3 .jp { display: inline; font-family: var(--serif); font-size: calc(0.92rem * 1.2); color: var(--ink); margin-left: 0.4em; white-space: nowrap; }
.feature-card p { margin-top: 0.6rem; font-size: 0.88rem; line-height: 1.85; opacity: 0.85; }
/* 小見出し下のサブタイトル（各カード先頭の一文）だけ2px大きく */
.feature-lede { font-size: calc(0.88rem + 2px); }

@media (max-width: 56rem) {
  .feature-grid { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
  /* スマホでは挿入画像幅（--feature-img-w）に合わせると見出し両脇の横線が
     画面幅を超えてしまう（画像幅+見出しテキスト+gap×2 > 375px）ため、
     横線の幅は固定の短い値に切り替える。 */
  .feature-h__line { width: 2rem; }
  /* 挿入画像の左右余白をMISSION/MESSAGEページの画像と同じにする
     （.wrap の padding に加え、MISSION/MESSAGEと同じ計算式でさらに内側に寄せる） */
  .feature-card figure { width: calc(100% - clamp(2rem, 6vw, 4rem) * 1.25); margin-inline: auto; margin-top: 0.6rem; order: 0; }
  /* スマホ：小見出し→画像→説明文の順に並べ替える
     （.feature-card__text を display:contents にして中のh3/pを直接のflexアイテムにする） */
  .feature-card { display: flex; flex-direction: column; }
  .feature-card__text { display: contents; }
  .feature-card h3 { text-align: center; }
  .feature-card h3 { order: -1; margin-top: 0; }
  .feature-card p { order: 1; }
}

.biz-link { display: inline-block; margin-top: clamp(2.5rem, 5vw, 3.5rem); font-family: var(--gothic-en); font-size: 1rem; letter-spacing: 0.05em; border-bottom: 1px solid var(--ink); padding-bottom: 0.2rem; }

/* diagrams (business model / positioning / comparison)
   画像・説明文とも同じ80%幅の列として中央配置し、説明文の表示範囲を
   挿入画像の幅と正確に一致させる（どちらも同じ親要素基準の%指定のため）。
   文章自体は列の中で左寄せ。 */
.diagram-block + .diagram-block { margin-top: clamp(3rem, 7vw, 5rem); }
.diagram-block > * + * { margin-top: 1.75rem; }
.diagram-block .lede { width: 96%; margin-inline: auto; text-align: left; font-size: 0.98rem; line-height: 1.95; }
.diagram-block figure { width: 96%; margin-inline: auto; border-radius: 2px; overflow: hidden; }

/* width:100% を明示しないと、中の table（width:24.3rem 指定）の実寸が
   shrink-to-fit の計算に紛れ込み、グリッドセルより幅が広がってしまう
   （table 側の max-width:100% は shrink-to-fit の計算では無視されるため）。 */
.track-record { width: 100%; max-width: 46rem; margin-inline: auto; }
/* 「経験年数」「事業実績（既存事業）」も含め、.track-record 内の説明文は
   全て同じフォントサイズ（0.98rem）に統一する（以前は 0.78rem のまま残っていた） */
.track-record h4 { font-family: var(--serif); font-size: 0.98rem; letter-spacing: 0.1em; color: var(--ink); margin-top: 1.75rem; }
.track-record h4:first-child { margin-top: 0; }
/* 「専門領域」「経歴」の2つの主見出しは、説明文の1.1倍サイズにし、
   ナンバリングを外した代わりに見出し下端に罫線を入れて区切りを示す。
   見出しテキストと罫線の間隔は現状（0.18rem）のさらに30%（0.054rem）に詰める。
   罫線と後続の説明文との間隔（ul/pのmargin-top）はここでは触れていない。 */
.track-record h4.track-record__title { font-size: calc(0.98rem * 1.1); padding-bottom: calc(0.6rem * 0.3 * 0.3); border-bottom: 1px solid var(--border); }
.track-record ul { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
/* 専門領域・経歴の説明文（略歴含む）は全てセリフ体・フォントサイズ統一。
   行間は現状の80%に詰める（li/table：1.6→1.28、p：1.9→1.52） */
.track-record li { font-family: var(--serif); font-size: 0.98rem; line-height: calc(1.6 * 0.8); }
.track-record li::before { content: "・"; }
.track-record p { font-family: var(--serif); font-size: 0.98rem; line-height: calc(1.9 * 0.8); margin-top: 0.6rem; }
/* 略歴（ESPLANのPROFILEページから転記）：フォント・サイズはこのページの他の説明文を基準にし、
   1.5px小さくする。罫線（tr の border-bottom）はテーブル自体を幅100%にせず自動幅にすることで、
   最も幅の大きい行の実寸に合わせる（今より短くなる）。「at 会社名」はESPLANのPROFILEページと
   同じくpadding-leftでインデントをつける。 */
/* 罫線の長さ＝テーブル幅を、内容の自然幅（実測 323.95px）の1.2倍（24.3rem）にする */
.track-record table.history { width: 24.3rem; max-width: 100%; border-collapse: collapse; margin-top: 0.75rem; }
.track-record table.history tr { border-bottom: 1px solid var(--border); }
.track-record table.history tr:last-child { border-bottom: none; }
.track-record table.history th { text-align: left; font-weight: 400; font-family: var(--serif); font-size: calc(0.98rem - 1.5px); line-height: calc(1.6 * 0.8); padding: 0.6rem 1rem 0.6rem 0; white-space: nowrap; vertical-align: top; }
.track-record table.history td { font-family: var(--serif); font-size: calc(0.98rem - 1.5px); line-height: calc(1.6 * 0.8); padding: 0.6rem 0; }
.track-record table.history td span { display: block; font-family: var(--serif); font-size: calc(0.98rem - 2px); line-height: calc(1.6 * 0.8); opacity: 0.65; margin-top: 0.1rem; padding-left: 1.25em; }
/* 会社概要：住所2行目「グラングリーン大阪 パークタワー 9F 973」が1行で収まる
   幅がある時だけ改行し、収まらない画面幅では改行を解除して自然に流す
   （br が非表示でも、その位置で行の折り返しが起きても構わない）。 */
.addr-break { display: none; }
@media (min-width: 62rem) {
  .addr-break { display: inline; }
  .company-row .facts { max-width: none; }
}

.portfolio-grid { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 1.75rem); max-width: 44rem; margin-inline: auto; }
.portfolio-grid figure img { border-radius: 2px; }
@media (max-width: 40rem) { .portfolio-grid { grid-template-columns: 1fr; } }

.roadmap-lede { max-width: 46rem; margin-inline: auto; font-size: 0.98rem; line-height: 1.95; text-align: left; }
.roadmap-lede + .roadmap-lede { margin-top: 1.3rem; }
.milestones { max-width: 34rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; display: flex; flex-direction: column; gap: 1.1rem; }
.milestones li { display: flex; gap: 1.25rem; align-items: baseline; border-bottom: 1px solid var(--border); padding-bottom: 1.1rem; }
.milestones time { font-family: var(--serif-en); font-size: 0.95rem; color: var(--ink); flex: 0 0 6rem; }
.milestones span { font-size: 0.9rem; }

/* ---------- company ---------- */
/* 項目（dt+ddの塊）を1列で縦に並べる（ブロック内は dt が dd の上に来る）。
   項目数が減ったため、以前の2列から変更。並びはHTMLの記載順のまま。 */
.facts { display: grid; grid-template-columns: 1fr; row-gap: 1.1rem; max-width: 30rem; }
.facts dt { font-family: var(--gothic-en); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--ink); }
.facts dd { margin-top: 0.15rem; font-family: var(--serif); font-size: 0.98rem; line-height: 1.28; }
/* Team Size の「（外部パートナー含む）」部分だけ他より1px小さくする（15.68px → 14.68px） */
.facts dd .dd-small { font-size: 14.68px; }
/* 電話番号：ESPLAN PROFILEページと同じ仕様で、スマホ表示以外はリンクにしない（ただの本文として表示）。
   .facts-link の border-bottom（罫線）もPC表示では無効化する。
   .facts-link--tel 単体だと .facts-link と詳細度が同じ（クラス1つ）で、後に書かれた
   .facts-link 側の border-bottom に打ち消されてしまうため、両クラスを組み合わせて
   詳細度を上げる（.facts-link.facts-link--tel）。 */
.facts-link.facts-link--tel { border-bottom: none; pointer-events: none; }
@media (max-width: 34rem) {
  .facts-link.facts-link--tel { border-bottom: 1px solid var(--border); pointer-events: auto; }
}
/* 会社概要：説明文の塊の上端を画像の上端に揃える（既定の align-items:center を上書き）。
   また .facts（dl）は既定では列幅いっぱいに伸びる（justify-items:stretch）ため、
   実際のテキスト（住所など最長行）の右端と画像の間に余分な空白ができてしまう。
   列幅を両方とも実寸（max-content）にし、グリッド自体を justify-content:center で
   中央寄せすることで、テキスト＋画像の合計幅の中心が画面（.wrap）の中心に来るようにする。 */
.company-row { align-items: start; }
/* 48remの1カラム切り替えブレークポイントより後（ファイル内で後）に書かないと、
   詳細度が同じ .philo-grid の1カラム化ルールに打ち消されてしまうため、
   デスクトップ幅のみに明示的にスコープする。 */
@media (min-width: 48.0625rem) {
  .company-row { grid-template-columns: max-content max-content; justify-content: center; }
}
/* 創業者実績：画像が左列・テキストが右列。
   以前は列を 1.05fr:1fr（コンテナいっぱいに伸縮）にした上で画像だけ縮小＋右寄せしていたが、
   それだと画像を縮小した分だけ左端に空白ができ、テキスト＋画像の合計ブロックが
   右に偏って見えてしまっていた（中央揃えになっていなかった）。
   会社概要と同じ考え方で、両列とも固定サイズにしてグリッド自体を中央寄せする。 */
/* 「ondóの特徴」パートの挿入画像（.feature-card figure）の実際の幅を、
   そのCSS計算式（.wrap の実効幅 − 左右padding − gap×2 を3等分）で再現したもの。
   .feature-grid は .wrap 内で3等分されているため、同じ .wrap 幅・同じ gap 前提で
   このcalc()はページが変わっても常に .feature-card figure と同じ値になる。 */
@media (min-width: 48.0625rem) {
  .founder-row { grid-template-columns: calc((min(72rem, 100vw) - 2 * clamp(1.25rem, 5vw, 3rem) - 2 * clamp(1.5rem, 3vw, 2.25rem)) / 3) minmax(0, 46rem); justify-content: center; }
  .founder-row figure { width: 100%; }
  /* 会社概要・創業者実績の挿入画像：「ondóの特徴」の挿入画像と同じ幅にする（縦横比は固定＝height:autoのまま） */
  .company-row figure { width: calc((min(72rem, 100vw) - 2 * clamp(1.25rem, 5vw, 3rem) - 2 * clamp(1.5rem, 3vw, 2.25rem)) / 3); }
}
/* 創業者実績：テキストエリア最上部のサブタイトル（画像と上端を揃える）。
   太字にし、フォントサイズは小見出し（.track-record__title）のさらに1.1倍にする。
   （.track-record p の font-size より詳細度を上げる必要がある） */
/* 「専門領域」との行間を現在の60%にする（元は clamp(2rem,5vw,3.5rem)）。
   直後の見出し（.track-record__title）側の margin-top（1.75rem）とマージン相殺
   が起きると、縮めた分がその margin-top に吸収されて見た目が変わらなくなるため、
   直後に来る場合だけ見出し側の margin-top を0にして相殺を防ぐ。 */
p.founder-tagline { margin-bottom: calc(clamp(2rem, 5vw, 3.5rem) * 0.6); margin-top: 0; text-align: left; font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: 0.03em; }
p.founder-tagline + h4.track-record__title { margin-top: 0; }
.founder-row { align-items: start; }
.founder-caption { margin-top: 0.75rem; text-align: left; font-family: var(--gothic-en); font-size: 0.82rem; color: var(--ink); opacity: 0.65; white-space: nowrap; }
.facts-link { border-bottom: 1px solid var(--border); }
@media (max-width: 40rem) { .facts { grid-template-columns: 1fr; row-gap: 0.35rem; } .facts dt { margin-top: 0.9rem; } }

/* ---------- contact form ---------- */
.form { max-width: 32rem; margin-inline: auto; }
.field { margin-bottom: 1.5rem; }
.field label { display: block; font-family: var(--gothic-en); font-size: 0.78rem; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
/* フォントサイズはESPLAN CONTACTページの .req と同じ（13px、ESPLANの --fs-sm） */
.req { color: var(--ink); margin-left: 0.35em; font-size: 13px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 2px;
  background: var(--paper-alt); color: var(--ink); font: inherit; font-size: 0.95rem;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field--hp { position: absolute; left: -9999px; }
/* Cloudflare Turnstile：内部(iframe)の色は制御できないため、外枠を入力欄の罫線色＋ページ背景色に合わせ、
   ウィジェット全体をグレースケール化してロゴの橙色を抑える */
.cf-turnstile {
  display: block;
  margin-block: 1rem;
  filter: grayscale(1);
}
/* 入力欄の見出しは、クリックしても反応しない普通のテキストとして表示
   （pointer-events:none でクリック自体を無効化。for/id によるアクセシビリティ上の関連付けは維持） */
.field label { cursor: default; pointer-events: none; }
.btn { display: inline-block; padding: 0.85rem 2.5rem; border-radius: 999px; font-family: var(--gothic-en); font-size: 0.85rem; letter-spacing: 0.06em; }
.btn--filled { background: var(--accent); color: var(--white); transition: opacity 0.3s; }
.btn--filled:hover { opacity: 0.85; }
.form-note { margin-top: 1.5rem; font-size: 0.78rem; opacity: 0.7; line-height: 1.8; }
.field-error { color: #C55757; font-weight: 700; font-size: 0.78rem; margin-top: 0.4rem; }
.field-error::before { content: "※ "; }
.alert { padding: 1rem 1.25rem; border-radius: 2px; font-size: 0.9rem; line-height: 1.8; border: 1px solid var(--border); }
.alert--ok { background: var(--paper-alt); }
.alert--err { background: var(--paper); border-color: #C55757; color: #C55757; }
.link-underline { border-bottom: 1px solid currentColor; }

/* ---------- privacy ---------- */
/* :not(#pp-h) で除外：.sect-head h2（ページ見出し）と詳細度が同じため、
   除外しないと後方にあるこのルールに見出しのフォントサイズが打ち消されてしまう */
.policy h2:not(#pp-h) { font-family: var(--serif); font-size: 1.1rem; font-weight: 500; margin-top: 2.5rem; }
.policy h2:not(#pp-h):first-child { margin-top: 0; }
.policy p, .policy li { font-size: 0.92rem; line-height: 1.9; margin-top: 0.75rem; }
.policy ul { padding-left: 1.4rem; list-style: disc; }

.eyebrow { font-family: var(--gothic-en); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--ink); text-transform: uppercase; }
.h-page { font-family: var(--serif); font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); font-weight: 500; margin-top: 0.5rem; }

/* ---------- カスタムカーソル：常にドット（クリックしても見た目は変わらない） ---------- */
:root[data-cursor] * { cursor: none !important; }
:root[data-cursor] input,
:root[data-cursor] textarea,
:root[data-cursor] select { cursor: text !important; }
/* BUSINESSページの音量スライダーは type="range" で文字入力ではないため、
   上記の input への cursor:text !important を打ち消す（詳細度を揃えて上書き） */
:root[data-cursor] .biz-video__volume-slider { cursor: ns-resize !important; }

.cursor-el {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; opacity: 0;
  mix-blend-mode: exclusion;
  transition: opacity 0.28s var(--ease-expo);
}
:root.cursor-on .cursor-el { opacity: 1; }
/* ドット色は --ink ではなく --accent を使用：exclusion は合成前の色が黒に近いほど
   どの背景でもほぼ変化せず溶け込んでしまうため、HERO画像上での視認性を確保する
   中間の濃さの色（ESPLANの確定ドット色 #968c89 と同じ考え方）を、オンド既存パレット内から採用。 */
.cursor-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .cursor-el { transition: opacity 0.25s ease; }
}

/* ---------- ホバー波紋（クリック可能なテキスト・ボタンにホバーした瞬間に発生。
   https://web-tools.repop.jp/js-ripple-animation/ のコードを流用） ---------- */
.click-ripple {
  position: fixed; border-radius: 50%; background-color: var(--ink);
  pointer-events: none; transform: translate(-50%, -50%) scale(0);
  animation: click-ripple-animation 0.6s ease-out forwards; z-index: 9998;
}
@keyframes click-ripple-animation {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}