@charset "UTF-8";
/* =====================================================================
   株式会社マウイ コーポレートサイト  ／  maui-v3
   デザインシステム

   構成（この順に読むこと）
     1. Foundation  … リセット・変数・基本タイポグラフィ
     2. Layout      … l-  ヘッダー／フッター／本文枠
     3. Component   … c-  ボタン・ラベル・罫・数字など再利用部品
     4. Project     … p-  ページ固有
     5. Utility     … u-  補助

   設計方針（迷ったらここに戻る）
     - 角丸は使わない。影も使わない。区切りは 1px の罫線で表現する。
     - 面に色を敷かない。色はロゴだけが持つ。
     - 見出しは明朝（Shippori Mincho）、本文はゴシック（Noto Sans JP）。
     - 余白でリズムを作る。詰め込まない。
   ===================================================================== */

/* =====================================================================
   1. Foundation
   ===================================================================== */

:root {
  /* --- 色 -----------------------------------------------------------
     ページ側は無彩色＋濃紺のみ。赤はロゴとタグラインの「資産」だけが持つ。
     この原則を崩すと、とたんに販促物の見た目になる。 */
  --c-paper:       #f8f7f4;   /* 地。ほんのり温かい白 */
  --c-surface:     #ffffff;   /* 面を分けたいとき */
  --c-ink:         #14171c;   /* 墨。本文・見出し */
  --c-ink-2:       #3d424b;   /* 副次テキスト */
  --c-gold:        #9d7f47;   /* 差し色。代表の紹介資料に合わせた金茶。年表の年号にだけ使う */
  --c-muted:       #75797f;   /* 補助・キャプション */
  --c-rule:        #dedbd4;   /* 罫（標準） */
  --c-rule-strong: #c6c2b9;   /* 罫（強調・見出し下） */
  --c-navy:        #16233a;   /* 濃紺。構造色・反転面 */
  --c-brand-red:   #bb0207;   /* ロゴから取った濃い赤。相談ボタンとタグラインの「資産」に使う */

  /* --- 書体 --------------------------------------------------------- */
  --ff-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --ff-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, system-ui, sans-serif;

  /* --- 文字サイズ ---------------------------------------------------- */
  --fs-display:  clamp(2.25rem, 5.6vw, 4rem);
  --fs-h1:       clamp(1.75rem, 4vw, 2.75rem);
  --fs-h2:       clamp(1.375rem, 2.8vw, 1.9rem);
  --fs-h3:       1.1875rem;
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --fs-label:    0.6875rem;

  /* --- 行間・字送り -------------------------------------------------- */
  --lh-display: 1.42;
  --lh-heading: 1.55;
  --lh-body:    1.95;
  --ls-display: 0.04em;
  --ls-body:    0.02em;
  --ls-label:   0.22em;

  /* --- 余白 ---------------------------------------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px; --sp-11: 160px; --sp-12: 200px;

  /* セクション間の余白。ここがサイトの呼吸を決める */
  /* セクションの上下の余白。区切りではこれが2つ重なるので、
     大きくしすぎると画面に空白の帯ができる。
     1440px幅で約100px＝区切りの合計200pxを目安にしている。 */
  --section-y: clamp(64px, 7vw, 112px);

  /* --- 幅 ------------------------------------------------------------ */
  --w-narrow: 720px;    /* 読み物の幅。日本語で1行 38〜42文字 */
  --w-inner:  1120px;   /* 標準 */
  --w-wide:   1440px;   /* 写真・図解 */
  --gutter:   clamp(20px, 5vw, 48px);

  /* --- ヘッダー ------------------------------------------------------ */
  --header-h:    84px;
  --header-h-sp: 64px;

  /* --- 動き（控えめに）----------------------------------------------- */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --dur:      .5s;
  --dur-fast: .22s;
}

/* --- リセット（最小限）------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* 目次から飛んだとき、見出しがヘッダーの下に隠れないようにする */
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0; padding: 0;
}
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; }

/* --- 基本タイポグラフィ ----------------------------------------------- */
body {
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1;   /* 日本語の字詰め。これだけで印象が変わる */
}

/* 見出しは明朝。ここが「品格」の出どころ */
.c-display, .c-h1, .c-h2, .c-h3 {
  font-family: var(--ff-serif);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.c-display { font-size: var(--fs-display); line-height: var(--lh-display); }
.c-h1      { font-size: var(--fs-h1);      line-height: var(--lh-heading); }
.c-h2      { font-size: var(--fs-h2);      line-height: var(--lh-heading); }
.c-h3      { font-size: var(--fs-h3);      line-height: 1.7; }

/* 本文 */
.c-text { max-width: var(--w-narrow); }
.c-text > * + * { margin-top: 1.6em; }
.c-text-lead {
  font-size: 1.0625rem;
  line-height: 2.05;
  color: var(--c-ink-2);
  max-width: 62ch;
}
.c-text-small { font-size: var(--fs-small); color: var(--c-muted); line-height: 1.85; }

/* 英字ラベル。情報整理としてのみ使う（VISION / BUSINESS など） */
.c-label {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--c-muted);
  text-transform: uppercase;
}

/* 章番号。明朝の数字を細く見せる */
.c-index {
  font-family: var(--ff-serif);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   2. Layout
   ===================================================================== */

.l-inner   { width: 100%; max-width: var(--w-inner);  margin-inline: auto; padding-inline: var(--gutter); }
/* 読み物幅。中央に寄せず、他セクションと左端を揃えたまま行長だけ詰める。
   （中央寄せにすると、上下のセクションと左端がずれて落ち着かない） */
.l-inner--narrow > * { max-width: var(--w-narrow); }
.l-inner--wide   { max-width: var(--w-wide); }

.l-section { padding-block: var(--section-y); }
.l-section--tight { padding-block: calc(var(--section-y) * .6); }
.l-section + .l-section { border-top: 1px solid var(--c-rule); }

/* 反転面。多用しない。ページ内で1〜2回まで */
.l-section--invert {
  background: var(--c-navy);
  color: #f2f1ee;
  border-top: 0;
}
.l-section--invert .c-label,
.l-section--invert .c-index { color: rgba(242,241,238,.62); }
.l-section--invert .c-text-lead { color: rgba(242,241,238,.86); }

/* セクション見出しのまとまり */
.l-head { margin-bottom: var(--sp-8); }
.l-head__label { display: block; margin-bottom: var(--sp-4); }
.l-head__title { margin-bottom: var(--sp-5); }

/* --- ヘッダー ---------------------------------------------------------
   横一列に情報を詰め込まない。ロゴ・ナビ・相談導線の3つだけ。 */
.l-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--c-paper) 92%, transparent);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid var(--c-rule);
}
.l-header__inner {
  max-width: var(--w-wide); margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--header-h-sp);
  display: flex; align-items: center; gap: var(--sp-6);
}
.l-header__action { margin-left: auto; }
.l-header__action .c-btn { padding: 12px 22px; }
.l-header__toggle {
  margin-left: var(--sp-4); width: 28px; height: 28px;
  display: grid; align-content: center; gap: 7px;
}
.l-header__toggle span {
  display: block; width: 100%; height: 1px; background: var(--c-ink);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.is-open .l-header__toggle span:first-child { transform: translateY(4px) rotate(20deg); }
.is-open .l-header__toggle span:last-child  { transform: translateY(-4px) rotate(-20deg); }

.l-nav__list { display: flex; gap: var(--sp-6); }
.l-nav__item > a {
  position: relative; font-size: var(--fs-small); letter-spacing: .04em;
  padding-block: 4px;
}
.l-nav__item > a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--c-ink);
  transition: right var(--dur-fast) var(--ease);
}
.l-nav__item > a:hover::after { right: 0; }

/* 子階層（PCではホバーで開く） */
.l-nav__item { position: relative; }
.l-nav__sub {
  position: absolute; top: 100%; left: -18px; min-width: 220px;
  background: var(--c-paper); border: 1px solid var(--c-rule);
  padding: var(--sp-4) 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.l-nav__item--has:hover .l-nav__sub,
.l-nav__item--has:focus-within .l-nav__sub {
  opacity: 1; visibility: visible; transform: none;
}
.l-nav__sub a {
  display: block; padding: 9px 20px; font-size: var(--fs-small); color: var(--c-ink-2);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.l-nav__sub a:hover { color: var(--c-ink); background: var(--c-surface); }

/* スマホ：ナビは開閉式 */
@media (max-width: 991.98px) {
  .l-nav {
    position: fixed; inset: var(--header-h-sp) 0 auto 0;
    background: var(--c-paper); border-bottom: 1px solid var(--c-rule);
    padding: var(--sp-6) var(--gutter) var(--sp-8);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .is-open .l-nav { opacity: 1; transform: none; pointer-events: auto; }
  .l-nav__list { flex-direction: column; gap: var(--sp-5); }
  .l-nav__item > a { font-size: 1rem; }
  .l-nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; padding: var(--sp-3) 0 0;
  }
  .l-nav__sub a { padding: 7px 0 7px var(--sp-5); border-left: 1px solid var(--c-rule); }
  .l-header__action { display: none; }
  /* 相談ボタンが隠れるので、代わりにハンバーガーを右端へ寄せる */
  .l-header__toggle { margin-left: auto; }
}
@media (min-width: 992px) {
  .l-header__inner { height: var(--header-h); }
  .l-header__toggle { display: none; }
}
.is-menu-open { overflow: hidden; }

/* --- フッター --------------------------------------------------------- */
.l-footer {
  border-top: 1px solid var(--c-rule-strong);
  padding-block: var(--sp-9) var(--sp-6);
  /* ★margin-top を入れないこと。
     直前のセクションが下側に余白（--section-y）を持っているため、
     ここにも余白を足すと二重になり、大きな空白ができる。 */
  margin-top: 0;
}
/* 本文の最後がセクションでないページのための保険 */
.l-main > :last-child:not(.l-section) { padding-bottom: var(--section-y); }
/* 最後のセクションは、フッターが続くぶん下の余白を少し詰める */
.l-main > .l-section:last-child { padding-bottom: calc(var(--section-y) * .68); }
.l-footer__top { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); }
.l-footer__tagline {
  margin-top: var(--sp-5);
  font-family: var(--ff-serif); font-size: 1.0625rem; font-weight: 600;
  line-height: 1.85; letter-spacing: .04em;
}
.l-footer__address { margin-top: var(--sp-4); font-style: normal; font-size: var(--fs-small); color: var(--c-muted); line-height: 1.9; }
.l-footer__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-7) var(--sp-5); }
.l-footer__list { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.l-footer__list a { font-size: var(--fs-small); color: var(--c-ink-2); }
.l-footer__list a:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 4px; }
.l-footer__bottom { margin-top: var(--sp-9); padding-top: var(--sp-5); border-top: 1px solid var(--c-rule); }
@media (min-width: 768px) { .l-footer__nav { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px) { .l-footer__top { grid-template-columns: 320px 1fr; gap: var(--sp-10); } }

/* =====================================================================
   3. Component
   ===================================================================== */

/* --- ロゴ -------------------------------------------------------------
   logo-mono.svg は fill:currentColor。色は親のCSSで決める。 */
.c-logo { display: inline-block; line-height: 0; }
.c-logo img, .c-logo svg { width: auto; height: 100%; }
.c-logo--header { height: 30px; }

/* ロゴの右にタグラインを添える。
   画像に焼き込むと、ヘッダーの高さ（30px）では文字が6px程度になり読めない。
   文字として置くことで、大きさを決められ、拡大しても滲まない。
   幅が足りない画面では、ナビゲーションを優先して隠す。 */
.l-header__brand {
  display: flex; align-items: center; gap: var(--sp-5); min-width: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.l-header__brand:hover { opacity: .72; }
.l-header__tagline {
  display: none;
  /* リンクの中に入れるので、色は継承させずここで指定する */
  padding-left: var(--sp-5);
  border-left: 1px solid var(--c-rule);
  font-family: var(--ff-serif); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; line-height: 1.5; white-space: nowrap;
  color: var(--c-ink-2);
}
/* 狭い画面では2行に折り返して置く。
   ロゴとハンバーガーの間が空いているので、そこに収める。 */
/* 狭い画面では、折り返さずに小さく1行で置く。
   2行にすると、ロゴより背が高くなってヘッダーが間延びする。 */
@media (min-width: 480px) {
  .l-header__tagline {
    display: block;
    font-size: 9.5px; letter-spacing: .01em; line-height: 1.5;
    white-space: nowrap; max-width: none;
    padding-left: var(--sp-4);
  }
}
/* 広い画面では1行で、少し大きく */
@media (min-width: 1180px) {
  .l-header__tagline {
    font-size: 12px; letter-spacing: .08em; line-height: 1.5;
    white-space: nowrap; max-width: none;
    padding-left: var(--sp-5);
  }
}
.c-logo--footer { height: 34px; }

/* --- ボタン -----------------------------------------------------------
   塗りつぶしの派手なボタンは作らない。罫と余白で示す。 */
.c-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 16px 32px;
  border: 1px solid var(--c-ink);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1;
  background: transparent;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.c-btn:hover, .c-btn:focus-visible { background: var(--c-ink); color: var(--c-paper); }
.c-btn--quiet { border-color: var(--c-rule-strong); }
.c-btn--quiet:hover { background: var(--c-ink); border-color: var(--c-ink); }

/* 相談する（ヘッダーの申し込みボタン）。
   サイト全体で唯一の塗りつぶしボタン。ここだけマウイレッドを使う。 */
.c-btn--cta {
  background: var(--c-brand-red);
  border-color: var(--c-brand-red);
  color: #fff;
}
.c-btn--cta:hover,
.c-btn--cta:focus-visible {
  background: #8f0105; border-color: #8f0105; color: #fff;
}
.c-btn--cta .c-btn__arrow { background: #fff; }
/* 2つ目の入口は、塗らずに罫で示す。赤を2つ並べると、どちらを押すか迷う。 */
.c-btn--cta2 {
  background: transparent; border-color: var(--c-brand-red); color: var(--c-brand-red);
}
.c-btn--cta2:hover, .c-btn--cta2:focus-visible {
  background: var(--c-brand-red); border-color: var(--c-brand-red); color: #fff;
}
.c-btn--cta2 .c-btn__arrow { background: currentColor; }

/* 入口が2つ並ぶときの配置 */
.l-header__action { display: flex; align-items: center; gap: var(--sp-4); }
.l-header__action .c-btn { padding: 11px 16px; font-size: 12px; letter-spacing: .04em; }
.p-contact__actions { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
@media (max-width: 600px) {
  .p-contact__actions { flex-direction: column; align-items: stretch; }
  .p-contact__actions .c-btn { justify-content: center; }
}
.c-btn--invert { border-color: rgba(242,241,238,.5); color: #f2f1ee; }
.c-btn--invert:hover { background: #f2f1ee; color: var(--c-navy); }
.c-btn__arrow { width: 18px; height: 1px; background: currentColor; transition: width var(--dur-fast) var(--ease); }
.c-btn:hover .c-btn__arrow { width: 26px; }

/* --- テキストリンク（罫で示す）----------------------------------------- */
.c-link {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-rule-strong);
  font-size: var(--fs-small); letter-spacing: .06em;
  transition: border-color var(--dur-fast) var(--ease);
}
.c-link:hover { border-color: var(--c-ink); }

/* --- 罫 ---------------------------------------------------------------- */
.c-rule { border: 0; border-top: 1px solid var(--c-rule); }
.c-rule--strong { border-top-color: var(--c-rule-strong); }

/* --- 数字（NUMBERSセクション等）----------------------------------------
   装飾しない。数字そのものを主役にする。 */
.c-num { display: flex; align-items: baseline; gap: var(--sp-2); }
.c-num__value {
  font-family: var(--ff-serif);
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  font-weight: 600; line-height: 1;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.c-num__unit { font-size: var(--fs-small); color: var(--c-muted); letter-spacing: .06em; }
.c-num__label { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--c-ink-2); }

/* --- 引用 -------------------------------------------------------------- */
.c-quote {
  font-family: var(--ff-serif);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  font-weight: 500; line-height: 1.85; letter-spacing: .03em;
  padding-left: var(--sp-5);
  border-left: 1px solid var(--c-rule-strong);
}
.c-quote__cite { display: block; margin-top: var(--sp-5); font-family: var(--ff-sans); font-size: var(--fs-small); color: var(--c-muted); letter-spacing: .04em; }

/* --- 定義リスト（会社概要など）------------------------------------------ */
.c-dl { border-top: 1px solid var(--c-rule); }
.c-dl__row {
  display: grid; grid-template-columns: 1fr; gap: 0;
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--c-rule);
}
.c-dl__key { font-size: var(--fs-small); color: var(--c-muted); letter-spacing: .06em; }
.c-dl__val { margin-top: var(--sp-2); }
@media (min-width: 768px) {
  .c-dl__row { grid-template-columns: 200px 1fr; gap: var(--sp-6); }
  .c-dl__val { margin-top: 0; }
}

/* --- 写真枠 -------------------------------------------------------------
   素材が揃うまでは、何を撮るべきかが分かるプレースホルダーを置く。 */
.c-figure { margin: 0; }
.c-figure__cap { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--c-muted); }
.c-ph {
  display: grid; place-items: center;
  background: #eceae5;
  border: 1px solid var(--c-rule);
  color: var(--c-muted);
  font-size: var(--fs-small); letter-spacing: .08em; text-align: center;
  padding: var(--sp-5);
  aspect-ratio: var(--ph-ratio, 4 / 3);
}
.c-ph--portrait { --ph-ratio: 3 / 4; }
.c-ph--wide     { --ph-ratio: 16 / 9; }
.c-ph--square   { --ph-ratio: 1 / 1; }

/* =====================================================================
   4. Project ─ ページ固有
   ===================================================================== */

/* --- 01 ファーストビュー ------------------------------------------------
   左に言葉、右に写真。写真は数秒ごとに切り替わる。
   画面いっぱいの背景写真にはしない（文字の上に写真を敷くと読みにくいため）。 */
.p-fv {
  padding-block: clamp(36px, 4.5vw, 64px) clamp(48px, 6vw, 84px);
  border-bottom: 1px solid var(--c-rule);
}
.p-fv__inner {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 56px);
}

.p-fv__label { font-size: 11px; letter-spacing: .28em; color: var(--c-muted); }
.p-fv__catch {
  margin-top: var(--sp-5);
  letter-spacing: .06em; line-height: 1.35; color: var(--c-ink);
  font-size: clamp(2.25rem, 6vw, 4.25rem);
}
.p-fv__lead {
  margin-top: clamp(24px, 3vw, 36px);
  font-size: 1.0625rem; line-height: 2.05; color: var(--c-ink-2);
}
.p-fv__lead p + p { margin-top: var(--sp-4); }
.p-fv__actions {
  margin-top: clamp(28px, 3.5vw, 40px);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6);
}

/* 写真。数秒ごとに入れ替わる */
.p-fv__visual { min-width: 0; }
/* 横位置の枠。縦長にすると、横位置の集合写真の両端が切れる。 */
.p-fv__slides { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-surface); }
.p-fv__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
/* 表示中の写真だけ、ごくゆっくり寄っていく。
   動かす幅は1.06倍まで。これ以上動かすと落ち着かなくなる。 */
.p-fv__slide.is-current {
  opacity: 1;
  animation: mauiFvZoom 14s linear forwards;
}
@keyframes mauiFvZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* 数字 */
.p-fv__facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5) var(--sp-4);
  border-top: 1px solid var(--c-rule-strong);
  padding-top: var(--sp-5);
}
.p-fv__fact { min-width: 0; }
.p-fv__factlabel { font-size: 11px; letter-spacing: .12em; color: var(--c-muted); line-height: 1.6; }
.p-fv__factnum {
  margin: var(--sp-2) 0 0;
  display: flex; align-items: baseline; gap: .14em;
  font-family: var(--ff-serif); font-weight: 600; color: var(--c-gold);
  font-size: clamp(1.875rem, 4vw, 2.75rem); line-height: 1; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.p-fv__factunit { font-size: .34em; letter-spacing: .1em; color: var(--c-ink-2); }

@media (min-width: 900px) {
  /* 左に言葉（数字も含む）、右に写真。写真は2行ぶんの高さを取る。 */
  .p-fv__inner {
    grid-template-columns: 1fr minmax(0, 520px);
    grid-template-rows: auto auto;
    column-gap: clamp(40px, 4vw, 72px);
    row-gap: clamp(32px, 4vw, 48px);
    align-items: start;
  }
  .p-fv__copy   { grid-column: 1; grid-row: 1; }
  .p-fv__facts  { grid-column: 1; grid-row: 2; }
  .p-fv__visual { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* 「視差を減らす」設定のときは、切り替えも寄せもしない */
@media (prefers-reduced-motion: reduce) {
  .p-fv__slide { transition: none; }
  .p-fv__slide.is-current { animation: none; transform: none; }
}

/* --- 写真＋言葉（左右の組み）-------------------------------------------
   画面いっぱいの写真帯にはしない。写真を片側へ寄せ、空いた側に言葉を置く。
   写真は画面の端まで伸ばし、言葉は本文の欄に合わせる。 */
.p-split__inner {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-6);
  width: 100%; max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--gutter);
}
.p-split__photo { margin: 0; }
.p-split__photo img { aspect-ratio: 4 / 3; }
.p-split__body { align-self: center; max-width: var(--w-narrow); }

@media (min-width: 900px) {
  .p-split__inner {
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
  }
  .p-split__photo img { aspect-ratio: 5 / 4; }

  /* 写真の側だけ、画面の端まで伸ばす */
  .p-split--left  .p-split__inner { padding-left: 0; }
  .p-split--left  .p-split__photo { margin-left: calc((100vw - min(100vw, var(--w-wide))) / -2); }

  .p-split--right .p-split__inner { padding-right: 0; direction: rtl; }
  .p-split--right .p-split__inner > * { direction: ltr; }
  .p-split--right .p-split__photo { margin-right: calc((100vw - min(100vw, var(--w-wide))) / -2); }
}

/* --- 03 事業構造 ---------------------------------------------------------
   細線・明朝・余白で組む。3Dや光沢、塗りつぶしは使わない。
   線の位置はすべてSVGの座標で決めており、CSSでは色と文字だけを指定する。 */

/* ── 図1 循環 ───────────────────────────────────────────
   箱で囲うと図面のように見えるので、囲わない。
   1本の罫の上に大きな数字、下に見出しと説明を置く。
   数字の色は、代表の紹介資料に合わせた金茶。 */
.p-cycle { display: none; margin: clamp(48px,6vw,88px) 0 0; color: var(--c-ink); }
.p-cycle svg { width: 100%; height: auto; }

.p-cycle__rule       { stroke: var(--c-ink); stroke-width: 1; opacity: .28; }
.p-cycle__rule--arw  { opacity: .5; }
.p-cycle__loop-line  { stroke: var(--c-ink); stroke-width: 1; opacity: .35; }

.p-cycle__no {
  font-family: var(--ff-serif); font-size: 64px; font-weight: 600;
  letter-spacing: .06em; fill: var(--c-gold);
  font-variant-numeric: tabular-nums;
}
.p-cycle__ttl { font-family: var(--ff-serif); font-size: 34px; font-weight: 600; letter-spacing: .06em; fill: currentColor; }
.p-cycle__dsc { font-family: var(--ff-sans); font-size: 15px; letter-spacing: .02em; fill: var(--c-ink-2); }
.p-cycle__loop{ font-family: var(--ff-sans); font-size: 13px; letter-spacing: .14em; fill: currentColor; opacity: .6; }

/* 図1のスマホ用一覧。図と同じ組み（金の数字＋罫）で揃える */
.p-cyclelist { margin-top: var(--sp-7); }
.p-cyclelist__item { padding-block: var(--sp-6); border-top: 1px solid var(--c-rule); }
.p-cyclelist__item:last-child { border-bottom: 1px solid var(--c-rule); }
.p-cyclelist__item .c-index {
  font-family: var(--ff-serif); font-size: 2.25rem; font-weight: 600;
  color: var(--c-gold); letter-spacing: .06em; line-height: 1;
  font-variant-numeric: tabular-nums; display: block;
}
.p-cyclelist__item--loop { color: var(--c-muted); }

/* ── 図2 グループ構造 ────────────────────────────────────── */
.p-struct {
  margin-top: clamp(56px, 7vw, 104px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--c-rule-strong);
}
.p-struct__head { max-width: var(--w-narrow); }
.p-struct__fig  { display: none; margin: clamp(40px,5vw,72px) 0 0; color: var(--c-ink); }
.p-struct__fig svg { width: 100%; height: auto; }

.p-struct__line { stroke: var(--c-ink); stroke-width: 1; opacity: .42; }

.p-struct__root rect { fill: var(--c-ink); stroke: none; }
.p-struct__rootname  { font-family: var(--ff-serif); font-size: 30px; font-weight: 600; letter-spacing: .1em; fill: var(--c-paper); }
.p-struct__roottag   { font-family: var(--ff-serif); font-size: 15px; letter-spacing: .3em; fill: var(--c-paper); opacity: .72; }

.p-struct__grp rect { fill: none; stroke: var(--c-ink); stroke-width: 1; }
.p-struct__grpja    { font-family: var(--ff-serif); font-size: 21px; font-weight: 600; letter-spacing: .1em; fill: currentColor; }
.p-struct__grpen    { font-family: var(--ff-sans); font-size: 11px; letter-spacing: .2em; fill: currentColor; opacity: .5; text-transform: uppercase; }

.p-struct__item rect     { fill: var(--c-surface); stroke: var(--c-rule); stroke-width: 1; }
.p-struct__itemname      { font-family: var(--ff-serif); font-size: 17px; font-weight: 600; letter-spacing: .06em; fill: currentColor; }
.p-struct__itemnote      { font-family: var(--ff-sans); font-size: 12px; letter-spacing: .04em; fill: currentColor; opacity: .55; }
.p-struct__itemnum       { font-family: var(--ff-serif); font-size: 16px; font-weight: 600; letter-spacing: .06em; fill: currentColor;
                           font-variant-numeric: tabular-nums; }

.p-struct__totalttl  { font-family: var(--ff-sans); font-size: 13px; letter-spacing: .18em; fill: currentColor; opacity: .6; }
.p-struct__totalnum  { font-family: var(--ff-serif); font-size: 52px; font-weight: 600; letter-spacing: .02em; fill: currentColor;
                       font-variant-numeric: tabular-nums; }
.p-struct__totalunit { font-family: var(--ff-sans); font-size: 13px; letter-spacing: .18em; fill: currentColor; opacity: .6; }

.p-structlist__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--c-ink);
  font-size: var(--fs-small); color: var(--c-muted); letter-spacing: .1em;
}
.p-structlist__total strong {
  font-family: var(--ff-serif); font-size: 2.4rem; font-weight: 600; color: var(--c-ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.p-structlist__total small { margin-left: .4em; font-size: .8rem; letter-spacing: .16em; color: var(--c-muted); }

/* 事業サイトへのリンク。押せることが分かるように、印と反応を付ける */
.p-struct__item--link { cursor: pointer; }
.p-struct__item--link rect { transition: fill .2s ease, stroke .2s ease; }
.p-struct__fig a:hover .p-struct__item--link rect,
.p-struct__fig a:focus-visible .p-struct__item--link rect { fill: #fff; stroke: var(--c-gold); }
.p-struct__ext { stroke: var(--c-gold); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

.p-structlist__link { border-bottom: 1px solid var(--c-rule-strong); }
.p-structlist__link:hover { border-bottom-color: var(--c-ink); }
.p-structlist__ext { margin-left: .3em; color: var(--c-gold); font-size: .85em; }

.p-struct__foot { margin-top: var(--sp-6); font-size: var(--fs-small); color: var(--c-muted); }

/* 図2のスマホ用一覧 */
.p-structlist { margin-top: var(--sp-7); }
.p-structlist__root {
  font-family: var(--ff-serif); font-size: var(--fs-h3); font-weight: 600; letter-spacing: .1em;
  padding: var(--sp-5) var(--sp-5); background: var(--c-ink); color: var(--c-paper); text-align: center;
}
.p-structlist__grp { margin-top: var(--sp-6); }
.p-structlist__grpttl {
  font-family: var(--ff-serif); font-size: 1.05rem; font-weight: 600; letter-spacing: .08em;
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-ink);
}
.p-structlist__note { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--c-muted); }
.p-structlist__items { margin-top: var(--sp-4); }
.p-structlist__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-4); border-bottom: 1px solid var(--c-rule);
}
.p-structlist__row dt { font-size: var(--fs-small); }
.p-structlist__note2 { display: block; margin-top: 4px; font-size: 12px; color: var(--c-muted); }
.p-structlist__row dd {
  font-family: var(--ff-serif); font-weight: 600; letter-spacing: .04em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 図が読める幅になったら、図に切り替える */
@media (min-width: 1000px) {
  .p-cycle,
  .p-struct__fig { display: block; }
  .p-cyclelist,
  .p-structlist  { display: none; }
}

/* --- 09 数字 -------------------------------------------------------------- */
.p-numbers { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-8) var(--sp-5); }
.p-numbers .c-num__label { color: rgba(242,241,238,.72); }
.p-numbers .c-num__unit  { color: rgba(242,241,238,.62); }
@media (min-width: 900px) { .p-numbers { grid-template-columns: repeat(4, 1fr); gap: var(--sp-7); } }

/* --- 写真の共通の扱い ---------------------------------------------------
   画像は必ず枠の比率で切り抜く。object-position で寄せを調整する。
   ★ここに別の指定を割り込ませないこと。
     セレクタの並びの途中にコメントや別ルールを入れると、
     object-fit が効かなくなり、人物写真が縦に伸びる。 */
.p-founder__photo img,
.p-members__item img,
.p-biz__visual img,
.p-split__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
}
.p-founder__photo img { aspect-ratio: 3 / 4; }
.p-members__item img  { aspect-ratio: 3 / 4; }
.p-biz__visual img    { aspect-ratio: 4 / 3; }
.p-fv__visual img     { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }

/* トップの「5つの事業」は、かたまりごと押せる。
   押すと、事業内容ページのその事業まで飛ぶ。 */
.p-biz__link { display: block; }
.p-biz__link .c-index,
.p-biz__link .c-label,
.p-biz__ttl,
.p-biz__desc { display: block; }
.p-biz__ttl { transition: color var(--dur-fast) var(--ease); }
.p-biz__more {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-6);
  font-size: var(--fs-small); letter-spacing: .08em; color: var(--c-muted);
  border-bottom: 1px solid var(--c-rule-strong); padding-bottom: 5px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.p-biz__link:hover .p-biz__more,
.p-biz__link:focus-visible .p-biz__more { color: var(--c-ink); border-bottom-color: var(--c-ink); }
.p-biz__link:hover .p-biz__more .c-btn__arrow { width: 30px; }
.p-biz__link:hover .p-biz__ttl { color: var(--c-gold); }

.p-biz__visual { display: block; overflow: hidden; }
.p-biz__visual img { transition: transform 1.2s var(--ease); }
.p-biz__visual:hover img { transform: scale(1.03); }

/* 写真が無い事業は、本文だけを読み物幅で組む */
.p-biz__item--text { grid-template-columns: 1fr !important; }
.p-biz__item--text .p-biz__text { max-width: var(--w-narrow); }

/* --- 05 代表ストーリー ---------------------------------------------------- */
.p-founder__body { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); }
.p-founder__photo { margin: 0; }
.p-founder__photo figcaption { margin-top: var(--sp-3); }
.p-founder__lead { margin-top: clamp(28px, 3.5vw, 40px); }
@media (min-width: 900px) {
  .p-founder__body { grid-template-columns: 0.72fr 1fr; gap: var(--sp-10); align-items: start; }
}
/* --- 名前の組み。明朝太＋ローマ字＋肩書 ------------------------------- */
.p-name__ja {
  font-family: var(--ff-serif); font-weight: 700; letter-spacing: .14em;
  line-height: 1.25; color: var(--c-ink);
}
.p-name__en {
  margin-top: var(--sp-3);
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--c-muted);
}
.p-name__role {
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--c-rule);
  font-size: var(--fs-small); letter-spacing: .14em; color: var(--c-ink-2);
}
.p-name--lg .p-name__ja { font-size: clamp(2rem, 4.4vw, 3rem); }
.p-name--sm .p-name__ja { font-size: clamp(1.375rem, 2.4vw, 1.75rem); }
.p-name--sm .p-name__en { font-size: 10px; letter-spacing: .24em; }

/* --- 年表 -------------------------------------------------------------
   年・見出し・説明の3つ組。区切りは細い罫と小さな点だけで示す。 */
.p-career { margin-top: clamp(32px, 4vw, 48px); }
.p-career__item {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--c-rule);
}
.p-career__item:last-child { border-bottom: 1px solid var(--c-rule); }
.p-career__year {
  font-family: var(--ff-serif); font-weight: 700; letter-spacing: .1em;
  color: var(--c-gold); font-variant-numeric: tabular-nums; line-height: 1.4;
}
.p-career__ttl {
  font-family: var(--ff-serif); font-weight: 600; letter-spacing: .06em; line-height: 1.6;
  color: var(--c-ink);
}
.p-career__dsc { margin-top: var(--sp-3); color: var(--c-ink-2); line-height: 1.95; }

.p-career--lg .p-career__year { font-size: 1.375rem; }
.p-career--lg .p-career__ttl  { font-size: 1.125rem; }
.p-career--lg .p-career__dsc  { font-size: 0.9375rem; }
.p-career--sm .p-career__year { font-size: 1.0625rem; }
.p-career--sm .p-career__ttl  { font-size: 1rem; }
.p-career--sm .p-career__dsc  { font-size: 0.875rem; line-height: 1.9; }

@media (min-width: 720px) {
  /* 年を左の欄に固定して、見出しの頭を縦に揃える */
  .p-career__item { grid-template-columns: 92px 1fr; gap: var(--sp-5); align-items: baseline; }
  .p-career--sm .p-career__item { grid-template-columns: 72px 1fr; gap: var(--sp-4); }
}

/* 代表の署名。筆書体はここだけに使う（多用すると安っぽくなる） */
.p-sign {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-rule);
  display: flex; align-items: baseline; justify-content: flex-end; gap: var(--sp-5);
}
.p-sign__role {
  font-size: var(--fs-small); letter-spacing: .16em; color: var(--c-muted);
}
.p-sign__name {
  font-family: "Yuji Syuku", "Shippori Mincho", serif;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  letter-spacing: .12em; line-height: 1.3; color: var(--c-ink);
}

/* 経営メンバー。代表より一段小さく、しかし経歴は同じだけ載せる */
.p-members { margin-top: var(--sp-10); padding-top: var(--sp-7); border-top: 1px solid var(--c-rule); }
.p-members__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-6); }
.p-members__note { color: var(--c-muted); }
.p-members__list { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); }
.p-members__item { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
.p-members__photo { margin: 0; }
.p-members__lead {
  margin-top: var(--sp-5);
  font-family: var(--ff-serif); font-size: 1.0625rem; font-weight: 600;
  letter-spacing: .04em; line-height: 1.9;
}

@media (min-width: 720px) {
  /* 写真は小さく固定し、残りを本文に回す */
  .p-members__item { grid-template-columns: minmax(0, 230px) 1fr; gap: var(--sp-7); align-items: start; }
}
@media (min-width: 1100px) {
  .p-members__item { grid-template-columns: minmax(0, 260px) 1fr; gap: var(--sp-8); }
}

/* --- 06 資産の三分類 ------------------------------------------------------ */
.p-assets { border-top: 1px solid var(--c-rule-strong); }
.p-assets__head { max-width: var(--w-narrow); }
.p-assets__row {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-2);
  padding-block: var(--sp-6); border-bottom: 1px solid var(--c-rule);
}
@media (min-width: 768px) {
  .p-assets__row { grid-template-columns: 220px 1fr; gap: var(--sp-7); align-items: baseline; }
}

/* --- 07 ステップ ---------------------------------------------------------- */
.p-steps { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--c-rule-strong); }
.p-steps__item { padding-block: var(--sp-6); border-bottom: 1px solid var(--c-rule); }
@media (min-width: 900px) {
  .p-steps { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
  .p-steps__item { border-bottom: 0; padding-right: var(--sp-4); }
}

/* --- 08 4つの立場（反転面）------------------------------------------------ */
.p-roles { display: grid; grid-template-columns: 1fr; gap: 0; }
.p-roles__item { padding-block: var(--sp-6); border-top: 1px solid rgba(242,241,238,.22); }
@media (min-width: 768px) { .p-roles { grid-template-columns: repeat(2, 1fr); gap: 0 var(--sp-9); } }
@media (min-width: 1100px) { .p-roles { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); } }

/* --- 10 事業一覧（左右交互）------------------------------------------------ */
.p-biz { display: grid; gap: clamp(56px, 7vw, 104px); }
.p-biz__item { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) {
  .p-biz__item { grid-template-columns: 1fr 1.15fr; gap: var(--sp-9); }
  .p-biz__item--rev .p-biz__text   { order: 2; }
  .p-biz__item--rev .p-biz__visual { order: 1; }
}

/* --- 11 オーナーストーリー -------------------------------------------------- */
.p-story__notice {
  margin-bottom: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-left: 2px solid var(--c-rule-strong);
  font-size: var(--fs-small); color: var(--c-muted);
}
.p-story__list { display: grid; grid-template-columns: 1fr; gap: var(--sp-7); }
@media (min-width: 768px) { .p-story__list { grid-template-columns: repeat(2, minmax(0, 340px)); gap: var(--sp-8); } }

/* --- 12 MVV --------------------------------------------------------------- */
.p-mvv { display: grid; gap: var(--sp-10); }
.p-mvv__text { margin-top: var(--sp-4); }

/* MVVの大見出しは、読み物幅（720px）だと語の途中で折り返す。
   見出しだけ幅を広げ、改行位置は本文側の <br> で決める。 */
.p-mvvhead { max-width: none; }

/* --- MVV -----------------------------------------------------------------
   カードを3枚並べない。縦に積み、明朝で組み、間に余白を取る。 */
/* MVVの本文とリードは、読み物幅（720px）だと1文で折り返してしまう。
   1文が1行に収まる幅まで広げる。 */
.p-mvvbody { max-width: 46em; }
.c-text-lead--wide { max-width: 44em; }

.p-mvv__ja { color: var(--c-muted); letter-spacing: .1em; }
.p-mvv__list { display: grid; gap: var(--sp-3); }
.p-mvv__list li {
  padding-left: 1.1em; position: relative;
  font-family: var(--ff-serif); font-size: 1.0625rem; letter-spacing: .04em; line-height: 1.9;
}
.p-mvv__list li::before {
  content: ""; position: absolute; left: 0; top: .95em;
  width: 12px; height: 1px; background: var(--c-gold);
}

/* ビジョンの3行（反転面） */
.p-vision { display: grid; gap: var(--sp-5); }
.p-vision li {
  font-family: var(--ff-serif); font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  font-weight: 600; letter-spacing: .08em; line-height: 1.8;
  padding-bottom: var(--sp-5); border-bottom: 1px solid rgba(242,241,238,.22);
}
.p-vision li:last-child { border-bottom: 0; padding-bottom: 0; }

/* 5つの価値観。番号は金、英語は小さく、日本語を主役にする */
.p-values { border-top: 1px solid var(--c-rule-strong); margin-top: clamp(40px,5vw,64px); }
.p-values__item {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-4);
  padding-block: clamp(28px, 3.5vw, 44px);
  border-bottom: 1px solid var(--c-rule);
}
.p-values__head { display: flex; align-items: baseline; gap: var(--sp-4); }
.p-values__no {
  font-family: var(--ff-serif); font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 600;
  color: var(--c-gold); letter-spacing: .06em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.p-values__en {
  font-size: 11px; letter-spacing: .28em; color: var(--c-muted); text-transform: uppercase;
}
.p-values__body { max-width: var(--w-narrow); }

@media (min-width: 900px) {
  .p-values__item { grid-template-columns: minmax(0, 220px) 1fr; gap: var(--sp-8); align-items: baseline; }
  .p-values__head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

/* 投資 → キャッシュフロー → 再投資 → 資産形成 */
.p-flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.p-flow__item {
  display: inline-flex; align-items: center;
  font-size: var(--fs-small); letter-spacing: .08em; color: var(--c-ink-2);
}
.p-flow__item + .p-flow__item::before {
  content: ""; display: inline-block; width: 20px; height: 1px;
  background: var(--c-gold); margin-right: var(--sp-4); opacity: .8;
}

/* --- 13 FUTURE ------------------------------------------------------------ */
.p-future { padding-block: clamp(120px, 15vw, 240px); }
.p-future__catch { letter-spacing: .08em; line-height: 1.5; }

/* --- 14 KNOWLEDGE --------------------------------------------------------- */
.p-know { border-top: 1px solid var(--c-rule-strong); }
.p-know__item { border-bottom: 1px solid var(--c-rule); }
.p-know__link {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-2);
  padding-block: var(--sp-5);
  transition: opacity var(--dur-fast) var(--ease);
}
.p-know__link:hover { opacity: .6; }
.p-know__title { font-weight: 600; }
@media (min-width: 768px) {
  .p-know__link { grid-template-columns: 130px 1fr; gap: var(--sp-6); align-items: baseline; }
}

/* --- 15 CONTACT ----------------------------------------------------------- */
.p-contact__topics { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.p-contact__topic {
  font-size: var(--fs-small); letter-spacing: .04em;
  padding: 8px 16px; border: 1px solid var(--c-rule-strong);
}

/* --- 事業内容ページ ------------------------------------------------------
   同じカードを5枚並べない。目次で全体を見せてから、1つずつ読ませる。 */
/* --- 追従する目次（事業内容ページ）----------------------------------------
   画面を下へ送っても、5つの事業へいつでも飛べるようにする。
   広い画面では左端に縦置き、狭い画面では下端に横並び。 */
.p-bizfix { display: none; }
.p-bizfix__list { display: grid; }
.p-bizfix__item a {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  color: var(--c-muted);
  transition: color var(--dur-fast) var(--ease);
}
.p-bizfix__no {
  font-family: var(--ff-serif); font-size: 13px; font-weight: 600; letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.p-bizfix__ttl { font-size: 12.5px; letter-spacing: .06em; line-height: 1.5; }
.p-bizfix__item a:hover { color: var(--c-ink); }
.p-bizfix__item a.is-current { color: var(--c-ink); }
.p-bizfix__item a.is-current .p-bizfix__no { color: var(--c-gold); }

/* 画面の左上に固定する。本文の左外側に収まる幅でだけ出す。
   1400px を下回ると本文に重なるため、そこで隠す。
   （本文の左端 = (100vw − 1120px)/2 + 48px。目次の右端がそれを超えないこと） */
@media (min-width: 1400px) {
  .p-bizfix {
    display: block;
    position: fixed;
    left: max(16px, calc((100vw - var(--w-inner)) / 2 - 178px));
    top: calc(var(--header-h) + 56px);
    z-index: 20; width: 150px;
    padding-left: var(--sp-4);
    border-left: 1px solid var(--c-rule-strong);
  }
  /* いま見ている事業だけ、左の罫を金にする */
  .p-bizfix__item a.is-current { position: relative; }
  .p-bizfix__item a.is-current::before {
    content: ""; position: absolute; left: calc(var(--sp-4) * -1 - 1px); top: 4px; bottom: 4px;
    width: 2px; background: var(--c-gold);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-bizfix__item a { transition: none; }
}

/* 5つの事業の目次。
   ページの入口なので、細い一覧にせず、1行ずつしっかり見せる。
   ページ見出しのすぐ下に来るため、上の余白は詰める。 */
.p-bizindexsec { padding-top: clamp(24px, 3vw, 40px); }

.p-bizindex { border-top: 1px solid var(--c-ink); }
.p-bizindex__item { border-bottom: 1px solid var(--c-rule); }
.p-bizindex__item a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  padding-block: clamp(18px, 2vw, 26px);
  transition: background var(--dur-fast) var(--ease);
}
.p-bizindex__item a:hover,
.p-bizindex__item a:focus-visible { background: var(--c-surface); }

.p-bizindex__no {
  font-family: var(--ff-serif); font-size: clamp(1.375rem, 2.6vw, 2.125rem); font-weight: 600;
  color: var(--c-gold); letter-spacing: .04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.p-bizindex__body { display: block; }
.p-bizindex__ttl {
  display: block;
  font-family: var(--ff-serif); font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 600;
  letter-spacing: .08em; line-height: 1.5;
}
.p-bizindex__sub {
  display: block; margin-top: var(--sp-2);
  font-size: var(--fs-small); line-height: 1.9; color: var(--c-ink-2);
  max-width: var(--w-narrow);
}
.p-bizindex__en {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--c-muted);
}
.p-bizindex__arrow {
  display: none; width: 22px; height: 1px; background: var(--c-ink);
  transition: width var(--dur-fast) var(--ease);
}
.p-bizindex__item a:hover .p-bizindex__arrow { width: 34px; }

@media (min-width: 900px) {
  .p-bizindex__item a {
    grid-template-columns: 64px 1fr 170px 40px;
    align-items: center; gap: var(--sp-5);
  }
  .p-bizindex__en { text-align: right; }
  .p-bizindex__arrow { display: block; justify-self: end; }
}

.p-bizdetail__head { max-width: var(--w-narrow); }
.p-bizdetail {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-7);
  margin-top: clamp(40px, 5vw, 64px);
}
.p-bizdetail__block + .p-bizdetail__block { margin-top: var(--sp-6); }
.p-bizdetail__block--fact {
  padding-top: var(--sp-5); border-top: 1px solid var(--c-rule);
}
.l-section--invert .p-bizdetail__block--fact { border-top-color: rgba(242,241,238,.28); }
.p-bizdetail__photo { margin: clamp(40px,5vw,64px) 0 0; }

/* 複数の事業を含むものは、写真を並べて見せる */
.p-bizdetail__photos {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-6);
  margin: clamp(40px,5vw,64px) 0 0;
}
.p-bizdetail__photos figure { margin: 0; }
.p-bizdetail__photos img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
/* 地図は写真ではないので、切り抜かずに全体を見せる */
.p-bizdetail__photos img.is-map { object-fit: contain; background: #056938; }
.p-bizdetail__photos figcaption {
  margin-top: var(--sp-3); font-size: 12.5px; letter-spacing: .04em; color: var(--c-muted);
}
.l-section--invert .p-bizdetail__photos figcaption { color: rgba(242,241,238,.6); }
@media (min-width: 760px) {
  .p-bizdetail__photos { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  /* 1枚だけのときは、3分の1に縮めず大きく見せる */
  .p-bizdetail__photos:has(li:only-child) { grid-template-columns: minmax(0, 640px); }
  .p-bizdetail__photos:has(li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.p-bizdetail__photo img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .p-bizdetail { grid-template-columns: 1fr minmax(0, 340px); gap: var(--sp-9); align-items: start; }
  .p-bizindex { grid-template-columns: repeat(2, 1fr); column-gap: var(--sp-8); }
  .p-bizindex__item:nth-child(-n+2) { border-top: 0; }
}

/* --- 資産戦略支援の流れ ----------------------------------------------------
   3段階＋生まれるもの。金額は入れない。 */
.p-flowfig { display: none; margin: clamp(40px,5vw,72px) 0 0; color: var(--c-ink); }
.p-flowfig svg { width: 100%; height: auto; }

.p-flowfig__no    { font-family: var(--ff-serif); font-size: 44px; font-weight: 600; letter-spacing: .06em;
                    fill: var(--c-gold); font-variant-numeric: tabular-nums; }
.p-flowfig__rule  { stroke: var(--c-ink); stroke-width: 1; opacity: .28; }
.p-flowfig__ttl   { font-family: var(--ff-serif); font-size: 22px; font-weight: 600; letter-spacing: .06em; fill: currentColor; }
.p-flowfig__dsc   { font-family: var(--ff-sans); font-size: 13px; letter-spacing: .02em; fill: var(--c-ink-2); }
.p-flowfig__line  { stroke: var(--c-ink); stroke-width: 1; opacity: .45; }

.p-flowfig__result rect { fill: var(--c-ink); stroke: none; }
.p-flowfig__reslabel { font-family: var(--ff-sans); font-size: 11px; letter-spacing: .22em;
                       fill: var(--c-paper); opacity: .6; text-transform: uppercase; }
.p-flowfig__resttl   { font-family: var(--ff-serif); font-size: 26px; font-weight: 600; letter-spacing: .1em; fill: var(--c-paper); }
.p-flowfig__restick  { stroke: var(--c-gold); stroke-width: 1.5; }

/* 狭い画面用 */
.p-flowlist { margin-top: var(--sp-7); border-top: 1px solid var(--c-rule-strong); }
.p-flowlist__item { padding-block: var(--sp-6); border-bottom: 1px solid var(--c-rule); }
.p-flowlist__no {
  font-family: var(--ff-serif); font-size: 2rem; font-weight: 600; color: var(--c-gold);
  letter-spacing: .06em; line-height: 1; display: block; font-variant-numeric: tabular-nums;
}
.p-flowlist__result { margin-top: var(--sp-6); padding: var(--sp-6) var(--sp-5); background: var(--c-ink); color: var(--c-paper); }
.p-flowlist__resrow + .p-flowlist__resrow { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid rgba(242,241,238,.2); }
.p-flowlist__resrow dt {
  font-family: var(--ff-serif); font-size: 1.25rem; font-weight: 600; letter-spacing: .1em;
}
.p-flowlist__resrow dd { margin: var(--sp-3) 0 0; font-size: var(--fs-small); color: rgba(242,241,238,.78); }

@media (min-width: 1000px) {
  .p-flowfig { display: block; }
  .p-flowlist { display: none; }
}

/* --- 資産ポートフォリオ図 ------------------------------------------------
   4つの性格の違う資産を並べ、1つに束ねる。
   利回りの数字は入れない（販売ページにしないため）。 */
.p-port { display: none; margin: clamp(40px,5vw,72px) 0 0; color: var(--c-ink); }
.p-port svg { width: 100%; height: auto; }

.p-port__ja   { font-family: var(--ff-serif); font-size: 21px; font-weight: 600; letter-spacing: .08em; fill: currentColor; }
.p-port__en   { font-family: var(--ff-sans); font-size: 10.5px; letter-spacing: .22em; fill: currentColor; opacity: .45; text-transform: uppercase; }
.p-port__rule { stroke: var(--c-gold); stroke-width: 1; opacity: .8; }
.p-port__kind { font-family: var(--ff-sans); font-size: 12px; letter-spacing: .1em; fill: var(--c-gold); }
.p-port__dsc  { font-family: var(--ff-sans); font-size: 13px; letter-spacing: .02em; fill: var(--c-ink-2); }

.p-port__line { stroke: var(--c-ink); stroke-width: 1; opacity: .32; }

.p-port__box rect  { fill: var(--c-ink); stroke: none; }
.p-port__boxttl    { font-family: var(--ff-serif); font-size: 27px; font-weight: 600; letter-spacing: .12em; fill: var(--c-paper); }
.p-port__boxsub    { font-family: var(--ff-sans); font-size: 12.5px; letter-spacing: .1em; fill: var(--c-paper); opacity: .72; }
.p-port__foot      { font-family: var(--ff-sans); font-size: 13px; letter-spacing: .06em; fill: currentColor; opacity: .6; }

/* 狭い画面用の一覧 */
.p-portlist { margin-top: var(--sp-7); border-top: 1px solid var(--c-rule-strong); }
.p-portlist__row { padding-block: var(--sp-5); border-bottom: 1px solid var(--c-rule); }
.p-portlist__row dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-4); }
.p-portlist__ja   { font-family: var(--ff-serif); font-size: 1.0625rem; font-weight: 600; letter-spacing: .08em; }
.p-portlist__kind { font-size: 11.5px; letter-spacing: .1em; color: var(--c-gold); }
.p-portlist__row dd { margin: var(--sp-3) 0 0; font-size: var(--fs-small); color: var(--c-ink-2); }
.p-portlist__row--sum { background: var(--c-ink); color: var(--c-paper); padding-inline: var(--sp-5); border-bottom: 0; }
.p-portlist__row--sum .p-portlist__ja { color: var(--c-paper); }
.p-portlist__row--sum dd { color: rgba(242,241,238,.78); }

@media (min-width: 1000px) {
  .p-port { display: block; }
  .p-portlist { display: none; }
}

/* --- 代表メッセージ --------------------------------------------------------
   会社の説明ではなく、個人の言葉。読み物として静かに組む。 */
.p-message__body { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); margin-top: clamp(32px,4vw,48px); }
.p-message__photo { margin: 0; }
.p-message__photo img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; object-position: center 18%; }
.p-message__text { min-width: 0; }
.p-message__text .c-text p + p { margin-top: var(--sp-5); }

/* 景色が変わった場面。ここだけ引用のように大きく出す */
.p-message__turn {
  margin-top: clamp(32px,4vw,44px);
  padding-left: var(--sp-6);
  border-left: 2px solid var(--c-gold);
}
.p-message__turnlead { font-size: var(--fs-small); color: var(--c-ink-2); letter-spacing: .04em; }
.p-message__quote {
  margin-top: var(--sp-4);
  font-family: var(--ff-serif); font-weight: 600;
  font-size: clamp(1.125rem, 2.2vw, 1.5rem); line-height: 1.9; letter-spacing: .06em;
  color: var(--c-ink);
}

/* 結び。伝えたいことなので、本文より少し大きく */
.p-message__close {
  margin-top: clamp(32px,4vw,44px);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-rule);
}
.p-message__close p {
  font-family: var(--ff-serif); font-size: 1.0625rem; font-weight: 600;
  line-height: 2; letter-spacing: .04em;
}
.p-message__close p + p { margin-top: var(--sp-4); }

@media (min-width: 900px) {
  .p-message__body { grid-template-columns: minmax(0, 300px) 1fr; gap: var(--sp-9); align-items: start; }
}

/* --- 社名の由来 -----------------------------------------------------------
   1文ずつ改行して、ゆっくり読ませる。 */
.p-origin .c-text p { font-size: 1.0625rem; line-height: 2.1; }
.p-origin .c-text p + p { margin-top: var(--sp-5); }
.p-origin__name {
  font-family: var(--ff-serif); font-weight: 600; letter-spacing: .08em; color: var(--c-gold);
}

/* --- 実績（積み上げてきたもの）--------------------------------------------
   「いま持っている数字」とは役割が違うので、見た目も変える。
   数字は金、行は罫で区切る。 */
.p-track { border-top: 1px solid var(--c-rule-strong); margin-top: clamp(40px,5vw,64px); }
.p-track__row {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-3);
  padding-block: clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--c-rule);
}
.p-track__label { font-size: var(--fs-small); letter-spacing: .14em; color: var(--c-muted); align-self: center; }
.p-track__body { margin: 0; }
.p-track__num {
  font-family: var(--ff-serif); font-weight: 600; color: var(--c-gold);
  font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1; letter-spacing: .02em;
  display: flex; align-items: baseline; gap: .18em;
}
.p-track__unit { font-size: clamp(.9rem, 1.6vw, 1.125rem); letter-spacing: .1em; }
.p-track__mark {
  font-family: var(--ff-serif); font-weight: 600; color: var(--c-gold);
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; letter-spacing: .1em;
}
.p-track__note { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--c-ink-2); }
.p-track__link { border-bottom: 1px solid var(--c-rule-strong); }
.p-track__link:hover { border-bottom-color: var(--c-ink); }
.p-track__ext { margin-left: .3em; color: var(--c-gold); font-size: .9em; }
/* 反転面のリンク（事業内容ページの投資型FC協会など） */
.l-section--invert .c-link { color: #f2f1ee; border-bottom-color: rgba(242,241,238,.45); }
.l-section--invert .c-link:hover { border-bottom-color: #f2f1ee; }

@media (min-width: 900px) {
  .p-track__row { grid-template-columns: minmax(0, 300px) 1fr; gap: var(--sp-8); align-items: baseline; }
  .p-track__note { max-width: var(--w-narrow); }
}

/* --- 通常FCと投資型FCの違い（引き算の順番）--------------------------------
   両方を同じ形の積み上げ図にすると、違いが見えなかった。
   引き算の順番として縦に並べ、ロイヤリティの位置（上か下か）で示す。 */
.p-fcc { display: none; margin: clamp(40px,5vw,72px) 0 0; color: var(--c-ink); }
.p-fcc svg { width: 100%; height: auto; }

.p-fcc__ja       { font-family: var(--ff-serif); font-size: 23px; font-weight: 600; letter-spacing: .08em; fill: currentColor; }
.p-fcc__en       { font-family: var(--ff-sans); font-size: 11px; letter-spacing: .22em; fill: currentColor; opacity: .45; text-transform: uppercase; }
.p-fcc__headrule { stroke: var(--c-ink); stroke-width: 1; opacity: .5; }
/* 何にロイヤリティがかかるか。この図の主題なので、いちばん目立たせる。 */
.p-fcc__base        { font-family: var(--ff-sans); font-size: 13px; letter-spacing: .06em; fill: currentColor; opacity: .55; }
.p-fcc__baseem      { font-family: var(--ff-serif); font-size: 21px; font-weight: 600; letter-spacing: .08em; opacity: 1; }
.p-fcc__base--mark  { opacity: .8; }
.p-fcc__base--mark .p-fcc__baseem { fill: var(--c-gold); }

.p-fcc__band       { fill: rgba(20,23,28,.045); }
.p-fcc__band--mark { fill: color-mix(in srgb, var(--c-gold) 16%, transparent); }

/* 縦につなぐ線と、その上に置く「引く」「残るのが」 */
.p-fcc__spine { stroke: var(--c-ink); stroke-width: 1; opacity: .3; }
.p-fcc__opbg  { fill: var(--c-paper); }
.p-fcc__op    { font-family: var(--ff-sans); font-size: 12px; letter-spacing: .1em;
                fill: currentColor; opacity: .62; }

.p-fcc__row            { font-family: var(--ff-sans); font-size: 16px; letter-spacing: .04em; fill: currentColor; }
.p-fcc__row--head      { font-family: var(--ff-serif); font-size: 24px; font-weight: 600; letter-spacing: .08em; }
.p-fcc__row--mid       { font-family: var(--ff-serif); font-size: 20px; font-weight: 600; letter-spacing: .06em; }
.p-fcc__row--result    { font-family: var(--ff-serif); font-size: 24px; font-weight: 600; letter-spacing: .08em; }
.p-fcc__row--roy       { font-weight: 500; }
.p-fcc__row--markroy   { fill: var(--c-gold); font-weight: 700; }

.p-fcc__note        { font-family: var(--ff-sans); font-size: 14px; letter-spacing: .04em; fill: currentColor; opacity: .68; }
.p-fcc__note--mark  { fill: var(--c-gold); opacity: 1; font-weight: 500; }

.p-fcc__foot { margin-top: var(--sp-6); font-size: var(--fs-small); color: var(--c-muted); max-width: var(--w-narrow); }

/* 狭い画面用 */
.p-fcclist { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); margin-top: var(--sp-7); }
.p-fcclist__ttl {
  font-family: var(--ff-serif); font-size: 1.0625rem; font-weight: 600; letter-spacing: .08em;
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-ink);
}
.p-fcclist__base {
  margin-top: var(--sp-4); font-size: 12.5px; letter-spacing: .06em; color: var(--c-muted);
}
.p-fcclist__base strong {
  display: block; margin-top: 2px;
  font-family: var(--ff-serif); font-size: 1.125rem; font-weight: 600; letter-spacing: .08em; color: var(--c-ink);
}
.p-fcclist__base--mark strong { color: var(--c-gold); }
.p-fcclist__calc { margin-top: var(--sp-5); }
.p-fcclist__step {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding-block: var(--sp-4); border-bottom: 1px solid var(--c-rule); font-size: var(--fs-small);
}
.p-fcclist__op {
  display: inline-block; min-width: 5em; font-size: 11.5px; letter-spacing: .1em;
  color: var(--c-muted); font-family: var(--ff-sans); font-weight: 400;
}
.p-fcclist__step { flex-wrap: wrap; }
.p-fcclist__step--head,
.p-fcclist__step--mid,
.p-fcclist__step--result { font-family: var(--ff-serif); font-weight: 600; font-size: 1.0625rem; letter-spacing: .06em; }
.p-fcclist__step--roy { background: rgba(20,23,28,.04); padding-inline: var(--sp-4); }
.p-fcclist__note { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--c-ink-2); }
.p-fcclist__note--mark { color: var(--c-gold); font-weight: 500; }

/* 誰が担うか */
.p-fccroles { margin-top: clamp(40px,5vw,64px); padding-top: var(--sp-6); border-top: 1px solid var(--c-rule-strong); }
.p-fccroles__grid { border-top: 1px solid var(--c-rule); }
.p-fccroles__row {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-2);
  padding-block: var(--sp-5); border-bottom: 1px solid var(--c-rule);
}
.p-fccroles__row dt { font-size: var(--fs-small); color: var(--c-muted); letter-spacing: .1em; }
.p-fccroles__row dd { margin: 0; font-family: var(--ff-serif); font-weight: 600; letter-spacing: .06em; }
.p-fccroles__k { display: inline-block; min-width: 6.5em; font-family: var(--ff-sans); font-size: 11px;
                 font-weight: 400; letter-spacing: .12em; color: var(--c-muted); }
.p-fccroles__mark { color: var(--c-gold); }

@media (min-width: 720px) {
  .p-fccroles__row { grid-template-columns: minmax(0,220px) 1fr 1fr; gap: var(--sp-5); align-items: baseline; }
  .p-fccroles__k { display: block; min-width: 0; margin-bottom: 4px; }
}
@media (min-width: 900px) {
  .p-fcc { display: block; }
  .p-fcclist { display: none; }
}

/* --- 下層ページ 共通 ------------------------------------------------------ */
.c-crumb { padding-top: var(--sp-6); }
.c-crumb__list { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); font-size: 12px; color: var(--c-muted); }
.c-crumb__item + .c-crumb__item::before { content: "／"; margin-right: var(--sp-3); opacity: .6; }
.c-crumb a:hover { text-decoration: underline; text-underline-offset: 4px; }

.p-pagehead { padding-block: clamp(40px, 6vw, 72px) clamp(20px, 3vw, 32px); }
/* 見出しの直後は、上の余白を詰める（見出しの下余白と重なるため） */
.p-pagehead + .l-main > .l-section:first-child,
.p-pagehead + .l-main > .l-section--tight:first-child { padding-top: clamp(20px, 3vw, 36px); }

/* 記事本文（WordPressのエディタ出力） */
.c-entry > * + * { margin-top: 1.6em; }
.c-entry h2 { font-family: var(--ff-serif); font-size: var(--fs-h2); font-weight: 600; line-height: 1.55; margin-top: 2.4em; }
.c-entry h3 { font-family: var(--ff-serif); font-size: var(--fs-h3); font-weight: 600; margin-top: 2em; }
.c-entry a { text-decoration: underline; text-underline-offset: 4px; }
.c-entry ul { list-style: disc; padding-left: 1.3em; }
.c-entry ol { list-style: decimal; padding-left: 1.4em; }
.c-entry li + li { margin-top: .5em; }
.c-entry img { margin-block: 1.6em; }
.c-entry blockquote { padding-left: var(--sp-5); border-left: 1px solid var(--c-rule-strong); color: var(--c-ink-2); }

/* 一覧リンク（さらに詳しく） */
.p-links { border-top: 1px solid var(--c-rule-strong); }
.p-links__item { border-bottom: 1px solid var(--c-rule); }
.p-links__item a {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-2);
  padding-block: var(--sp-5); transition: opacity var(--dur-fast) var(--ease);
}
.p-links__item a:hover { opacity: .6; }
@media (min-width: 768px) { .p-links__item a { grid-template-columns: 240px 1fr; gap: var(--sp-6); align-items: baseline; } }

/* 沿革 ─ 年を大きく置き、その下に出来事を並べる */
.p-history { border-top: 1px solid var(--c-rule-strong); }
.p-history__year {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-5);
  padding-block: var(--sp-8); border-bottom: 1px solid var(--c-rule);
}
.p-history__yearno {
  font-family: var(--ff-serif); font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600; letter-spacing: .08em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.p-history__items { display: grid; gap: var(--sp-6); }
.p-history__item { display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-5); align-items: baseline; }
.p-history__month { letter-spacing: .1em; }
@media (min-width: 768px) {
  .p-history__year { grid-template-columns: 200px 1fr; gap: var(--sp-8); align-items: start; }
  .p-history__yearno { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* 実績の数字：5項目でも収まるように */
.p-numbers { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .p-numbers { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .p-numbers { grid-template-columns: repeat(5, 1fr); gap: var(--sp-6); } }
.p-numbers .c-num__value { font-size: clamp(2.5rem, 5.5vw, 3.75rem); }

/* MVVページ *//* MVVページ */
.p-mvvpage { display: grid; gap: clamp(64px, 8vw, 112px); }
.p-mvvpage__item { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 900px) {
  .p-mvvpage__item { grid-template-columns: 260px 1fr; gap: var(--sp-9); align-items: start; }
  .p-mvvpage__head { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* 比較表 */
/* 表は画面が狭いとき、表だけが横に動く。ページ全体は動かさない。
   ただ「横に動かせる」ことが分かりにくいので、狭いときだけ合図を出す。 */
.p-table { overflow-x: auto; border-top: 1px solid var(--c-rule-strong); -webkit-overflow-scrolling: touch; }
.p-table__hint { display: none; margin-bottom: var(--sp-3); font-size: 12px; color: var(--c-muted); letter-spacing: .08em; }
@media (max-width: 700px) { .p-table__hint { display: block; } }
.p-table table { min-width: 560px; }
.p-table th, .p-table td { padding: var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--c-rule); vertical-align: top; }
.p-table thead th { font-size: var(--fs-small); color: var(--c-muted); font-weight: 500; letter-spacing: .06em; }
.p-table tbody th { font-size: var(--fs-small); color: var(--c-muted); font-weight: 400; width: 26%; }
.p-table td { font-size: var(--fs-small); }
.p-table td:last-child { color: var(--c-ink); }

/* 2列の役割 */
.p-roles2 { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); }
@media (min-width: 768px) { .p-roles2 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-9); } }
.p-roles2__col { padding-top: var(--sp-5); border-top: 1px solid var(--c-rule-strong); }

/* 箇条書き（罫で示す） */
.p-list { display: grid; }
.p-list__item {
  padding-block: var(--sp-4); border-bottom: 1px solid var(--c-rule);
  font-size: var(--fs-small); line-height: 1.9;
}
.l-section--invert .p-assets__row { border-bottom-color: rgba(242,241,238,.22); }
.p-assets--invert { border-top-color: rgba(242,241,238,.35); }
.l-section--invert .c-text-small { color: rgba(242,241,238,.78); }

/* プライバシーポリシー等の条文 */
.p-policy { display: grid; gap: clamp(40px, 5vw, 64px); }
.p-policy__block { padding-top: var(--sp-5); border-top: 1px solid var(--c-rule); }
.p-policy__block:first-child { border-top: 0; padding-top: 0; }

/* フォーム */
/* どの入口から来たかを、フォームの前に示す */
.p-form__type {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-5) var(--sp-5);
  background: var(--c-surface); border-left: 2px solid var(--c-brand-red);
  margin-bottom: var(--sp-7);
}
.p-form__type span { font-size: 11.5px; letter-spacing: .14em; color: var(--c-muted); }
.p-form__type strong {
  font-family: var(--ff-serif); font-size: 1.0625rem; font-weight: 600; letter-spacing: .06em;
}

.p-form input[type="text"], .p-form input[type="email"], .p-form input[type="tel"],
.p-form select, .p-form textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: var(--fs-small);
  background: var(--c-surface); border: 1px solid var(--c-rule-strong); border-radius: 0;
}
.p-form textarea { min-height: 180px; }
.p-form input[type="submit"] {
  padding: 16px 40px; font-size: var(--fs-small); letter-spacing: .08em;
  background: transparent; color: var(--c-ink); border: 1px solid var(--c-ink); border-radius: 0; cursor: pointer;
}
.p-form input[type="submit"]:hover { background: var(--c-ink); color: var(--c-paper); }

/* ページ送り */
.wp-pagenavi, .navigation.pagination { display: flex; gap: var(--sp-4); font-size: var(--fs-small); }
.navigation.pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--c-rule-strong); }
.navigation.pagination .current { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }

/* =====================================================================
   5. Utility
   ===================================================================== */

.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-3 { margin-top: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mt-7 { margin-top: var(--sp-7); }
.u-mt-8 { margin-top: var(--sp-8); }
.u-mt-9 { margin-top: var(--sp-9); }
.u-center { text-align: center; }
.u-nowrap { white-space: nowrap; }
.u-tabular { font-variant-numeric: tabular-nums; }

/* ロゴとタグラインの「資産」だけが持つ色。他では使わない */
.u-brand-red { color: var(--c-brand-red); }

/* スマホでのみ改行 / PCでのみ改行 */
.u-br-sp { display: none; }
@media (max-width: 767.98px) { .u-br-sp { display: inline; } .u-br-pc { display: none; } }

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

/* --- 動き。フェードと軽い上移動のみ ------------------------------------- */
.u-fade {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--delay, 0s);
}
.u-fade.is-active { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .u-fade { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- フォーカス。キーボード操作を見えるように --------------------------- */
:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 3px; }

/* =====================================================================
   6. スマートフォン最適化
   　PCレイアウトを縦に積むだけにしない。
   　文字サイズ・行間・余白・字送りを、画面幅ごとに作り直す。
   ===================================================================== */
@media (max-width: 767.98px) {

  /* 明朝の大見出しは、小さい画面では字送りを詰め、行間を締める。
     PCと同じ値のままだと、間延びして読みにくくなる。 */
  .c-display { letter-spacing: .02em; line-height: 1.5; }
  .c-h1      { letter-spacing: .02em; line-height: 1.62; }
  .c-h2      { letter-spacing: .02em; line-height: 1.62; }

  /* 本文は少しだけ小さく、行間はしっかり取る */
  body            { font-size: 15px; line-height: 1.92; }
  .c-text-lead    { font-size: 15.5px; line-height: 1.95; }
  .c-text-small   { font-size: 13px; }
  .c-label        { font-size: 10.5px; letter-spacing: .18em; }

  /* セクションの余白は詰めすぎない。ここを削ると品格が落ちる */
  :root { --section-y: clamp(56px, 12vw, 80px); }

  /* ファーストビュー */
  .p-fv--movie {
    height: 76vh; height: 76svh;
    min-height: 460px;
    padding-block: 96px 56px;
  }
  /* 「事業を、資産に。」8文字が1行に収まる上限。
     390px幅で 8×(vw値)×1.06 ＋ 左右の余白40px ≦ 390 になるよう決めている。 */
  .p-fv__catch { font-size: clamp(1.5rem, 8.2vw, 2.5rem); letter-spacing: .02em; }
  .p-fv__sub { font-size: 15px; line-height: 1.95; }
  .p-fv__actions { flex-direction: column; align-items: stretch; gap: var(--sp-5); }
  .p-fv__actions .c-btn { justify-content: center; }
  .p-fv__actions .c-link { justify-content: center; }
  .p-fv__visual { margin-top: 40px; }

  /* 数字は2列。単位は改行させない */
  .p-numbers { gap: var(--sp-7) var(--sp-5); }
  .c-num { flex-wrap: wrap; }
  .c-num__value { font-size: clamp(2.25rem, 12vw, 3rem); }

  /* 経営メンバーは1列にして、写真を大きく見せる */
  .p-members__list { gap: var(--sp-8); }
  .p-members__item img { aspect-ratio: 4 / 3; object-position: center 20%; }
  .p-sign { justify-content: flex-start; }

  /* 事業一覧：写真を先に、文章を後に */
  .p-biz__item { gap: var(--sp-5); }
  .p-biz__visual { order: -1; }

  /* 引用は左罫を細く、余白を詰める */
  .c-quote { padding-left: var(--sp-4); font-size: 1.0625rem; line-height: 1.9; }

  /* ボタンは横幅いっぱい（指で押しやすく） */
  .c-btn { width: 100%; justify-content: center; padding: 17px 24px; }

  /* 相談内容のタグは折り返す */
  .p-contact__topics { gap: var(--sp-2); }
  .p-contact__topic { font-size: 12.5px; padding: 7px 13px; }

  /* フッターは2列だと窮屈なので1列に */
  .l-footer__nav { grid-template-columns: 1fr; gap: var(--sp-6); }
  .l-footer__group { padding-top: var(--sp-4); border-top: 1px solid var(--c-rule); }

  /* パンくずは折り返す */
  .c-crumb__list { font-size: 11px; }
}

/* 横スクロールを起こさないための保険。
   （原因のある要素は個別に overflow-x:auto を持たせてある） */
html, body { overflow-x: clip; }