@charset "UTF-8";
/* ============================================================
   style.css — VALCREATION 顧問名鑑
   web-production スターターの基盤（ベース・ナビ・フォーム・停止ポリシー）を引き継ぎ、
   トークンとコンポーネントを冊子版の名鑑（白地×明朝×VALCREATIONの赤）に合わせて引き直したもの。
   構成: 1.トークン → 2.ベース → 3.レイアウト → 4.共通パーツ → 5.ページ別 → 6.停止ポリシー
   ============================================================ */

/* 名鑑の目次をそのまま画面にする: 赤の大きな番号と明朝の氏名が、人物を一冊の名鑑のように並べる */
/* ---------- 1. トークン ---------- */
:root {
  --paper: #ffffff;      /* 地（冊子と同じ白） */
  --ink: #1e1d1d;        /* 本文の墨 */
  --ink-soft: #57524f;   /* 補助テキスト（赤みに寄せた灰） */
  --mist: #f5f3f2;       /* 面（写真枠・帯） */
  --line: #e4dfdd;       /* 罫線 */
  --red: #d7182b;        /* VALCREATION公式ロゴの赤（会社概要/ロゴ/VALCREATION_ロゴ.png 実測。白地で5.2:1） */
  --red-pale: #fbe8ea;   /* 赤の淡色 */
  --red-ink: #ffffff;    /* 赤の上の文字 */
  --error: #a8201a;      /* フォームのエラー */

  --font-display: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;

  --space: 8px;
  --section-pad: clamp(56px, 9vw, 112px);
  --container: 1120px;
  --container-narrow: 760px;
  --radius: 2px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);

  --z-header: 100;
  --z-nav: 200;
  --z-modal: 1000;
  color-scheme: light;   /* 冊子と同じ白地の一つの見た目に固定（意図的にライトのみ） */
}

/* ---------- 2. ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.9;
  font-size: 16px;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;        /* 生成時に BudouX で文節ごとに <wbr> を入れてある。折り返しは文節の切れ目だけ */
  overflow-wrap: anywhere;      /* 文節が1行に収まらないときだけ、どこでも折る（はみ出し防止） */
  line-break: strict;           /* 句読点・小書き文字を行頭に置かない */
}
p, li, td, dd { text-wrap: pretty; }   /* 最終行に1文節だけ残る「泣き別れ」を減らす */
.portrait__title, .card__title, .profile__titles span, .tag, .hero__lead, .section-head__lead, .page-header__lead { text-wrap: balance; }   /* 短い肩書きや導入文は行の長さをそろえる */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:hover { opacity: 0.72; transition: opacity 0.25s; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.45; letter-spacing: 0.04em; text-wrap: balance; }
ul, ol { padding: 0; list-style: none; }

/* ---------- 3. レイアウト ---------- */
.container, .container--narrow {
  width: min(var(--container), 100%);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.container--narrow { width: min(var(--container-narrow), 100%); }
@media (min-width: 768px) {
  .container, .container--narrow {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
}
.section { padding-block: var(--section-pad); }
.section--tight { padding-block: calc(var(--section-pad) * 0.6); }
.section--mist { background: var(--mist); }

/* 見出しの型: 赤の英字ラベル＋明朝の見出し（冊子の EXPERTISE / 専門領域 と同じ組み） */
.label {
  display: block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--red);
}
.section-head { display: grid; gap: calc(var(--space) * 1.5); margin-bottom: calc(var(--space) * 6); }
.section-head__title { font-size: clamp(24px, 3.4vw, 36px); }
.section-head__lead { color: var(--ink-soft); max-width: 40em; }

/* ---------- 4. 共通パーツ ---------- */
/* 仮版の告知（公開前に削除） */
.draft-notice {
  background: var(--ink); color: var(--paper);
  font-size: 12px; letter-spacing: 0.06em; text-align: center;
  padding-block: 6px;
}

/* ヘッダー（sticky。上端はセーフエリア分下げる） */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: calc(var(--z-header) + 1); background: var(--paper);
}
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-header);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; }
.site-header__logo { display: grid; gap: 6px; line-height: 1.2; text-decoration: none; }
.site-header__logo img { width: 168px; height: auto; }
.site-header__logo span { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.3em; }

.global-nav ul { display: flex; align-items: center; gap: calc(var(--space) * 3.5); }
.global-nav a { text-decoration: none; font-size: 14px; letter-spacing: 0.06em; }
.global-nav a[aria-current="page"] { color: var(--red); border-bottom: 1px solid currentColor; }
.global-nav .button { padding: 10px 22px; font-size: 13px; }

.nav-toggle {
  display: none; width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  position: relative; z-index: calc(var(--z-nav) + 1);
}
.nav-toggle span { display: block; width: 24px; height: 2px; margin: 5px auto; background: var(--ink); transition: transform 0.3s, opacity 0.3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 899px) {
  .nav-toggle { display: block; }
  .global-nav {
    position: fixed; inset: 0; z-index: var(--z-nav);
    background: var(--paper);
    display: grid; place-content: center;
    padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px));
    opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
  }
  .global-nav.is-open { opacity: 1; visibility: visible; }
  .global-nav ul { flex-direction: column; text-align: center; gap: calc(var(--space) * 3.5); }
  .global-nav a { font-size: 18px; }
}

/* ボタン */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  padding: 15px 36px;
  background: var(--red); color: var(--red-ink);
  border: 1px solid var(--red); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: 0.08em;
  text-decoration: none; cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.button:hover { background: var(--paper); color: var(--red); opacity: 1; }
.button--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.button--ghost:hover { background: var(--ink); color: var(--paper); }
.button:disabled { opacity: 0.5; cursor: wait; }
.text-link { color: var(--red); font-weight: 700; text-decoration: none; letter-spacing: 0.04em; }
.text-link::after { content: " →"; }

/* 下層ページの見出し・パンくず */
.page-header { padding-block: calc(var(--section-pad) * 0.8) calc(var(--section-pad) * 0.45); }
.page-header__title { font-size: clamp(30px, 4.6vw, 48px); margin-top: calc(var(--space) * 1.5); }
.page-header__lead { margin-top: calc(var(--space) * 2.5); color: var(--ink-soft); max-width: 40em; }
.breadcrumb { font-size: 12px; color: var(--ink-soft); padding-block: 12px; border-bottom: 1px solid var(--line); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.6em; list-style: none; padding: 0; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 0.6em; }
.breadcrumb a { text-decoration: none; }

/* 専門分野のタグ */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 12px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: var(--paper); }

/* 番号（明朝・赤）— このサイトのシグネチャー */
.num { font-family: var(--font-display); color: var(--red); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* 相談の帯 */
.cta-band { background: var(--red); color: var(--red-ink); }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-block: calc(var(--section-pad) * 0.55); }
.cta-band__title { font-size: clamp(20px, 2.6vw, 28px); }
.cta-band__text { opacity: 0.9; font-size: 14px; margin-top: 6px; }
.cta-band .button { background: var(--paper); color: var(--red); border-color: var(--paper); }
.cta-band .button:hover { background: transparent; color: var(--paper); }

/* フッター */
.site-footer { background: var(--ink); color: #d9d4d2; font-size: 13px; }
.site-footer__inner { display: grid; gap: 32px; padding-block: 56px 28px; }
@media (min-width: 768px) { .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer__brand img { width: 168px; height: auto; }
.site-footer__brand p { margin-top: 10px; max-width: 28em; }
.site-footer h2 { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.3em; color: #f1b6b7; margin-bottom: 10px; }
.site-footer ul { display: grid; gap: 6px; }
.site-footer a { text-decoration: none; }
.site-footer__copy { grid-column: 1 / -1; border-top: 1px solid #3b3838; padding-top: 20px; font-size: 12px; color: #a9a3a1; }

/* ---------- 5. ページ別 ---------- */
/* トップ: ヒーロー（左に約束、右に名鑑の目次） */
.hero { padding-block: clamp(40px, 7vw, 88px) clamp(48px, 7vw, 96px); }
.hero__grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; } }
.hero__grid > div:first-child { container-type: inline-size; min-width: 0; }
.hero__title { font-size: clamp(28px, 4.4vw, 52px); line-height: 1.35; margin-top: 18px; }
/* 見出しの1行目（10文字）が列の幅に必ず収まる大きさにする（列の幅の9.4%＝10文字で94%） */
@supports (font-size: 1cqi) { .hero__title { font-size: clamp(26px, 9.4cqi, 56px); } }
.hero__title em { font-style: normal; color: var(--red); }
.hero__lead { margin-top: 24px; color: var(--ink-soft); max-width: 32em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__roles { margin-top: 28px; font-size: 13px; color: var(--ink-soft); }
.hero__roles b { color: var(--red); letter-spacing: 0.06em; }


/* お悩み */
.needs { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 768px) { .needs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }
.needs li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding-block: 22px; border-bottom: 1px solid var(--line); }
.needs__mark { font-family: var(--font-display); color: var(--red); font-size: 22px; line-height: 1.3; }
.needs h3 { font-size: 18px; }
.needs p { color: var(--ink-soft); font-size: 14px; margin-top: 6px; }

/* 選ばれる理由（破調: 大きな番号を左に置く縦組みのリスト） */
.reasons { display: grid; gap: 40px; }
@media (min-width: 900px) { .reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.reason__num { font-size: 56px; line-height: 1; }
.reason h3 { font-size: 20px; margin-top: 18px; }
.reason p { color: var(--ink-soft); font-size: 15px; margin-top: 10px; }

/* 流れ */
.steps { display: grid; gap: 0; counter-reset: step; border-top: 1px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: 16px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.steps .num { font-size: 26px; line-height: 1.2; }
.steps h3 { font-size: 17px; }
.steps p { color: var(--ink-soft); font-size: 14px; margin-top: 4px; }

/* よくある質問 */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; font-family: var(--font-display); color: var(--red); margin-right: 14px; font-size: 18px; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 22px; color: var(--ink-soft); }
.faq details[open] summary::after { content: "−"; }
.faq__a { padding: 0 0 22px 32px; color: var(--ink-soft); }

/* トップ: 注目の顧問の下の「全員を見る」、分野から探す */
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); column-gap: 32px; border-top: 1px solid var(--ink); }
.fields a { display: grid; grid-template-columns: minmax(0, 1fr) auto 1.2em; align-items: baseline; gap: 12px; padding: 18px 4px; border-bottom: 1px solid var(--line); text-decoration: none; }
.fields a:hover { opacity: 1; color: var(--red); }
.fields__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fields__arrow { color: var(--red); transform: translateX(-6px); opacity: 0; transition: transform 0.5s var(--ease-out-expo), opacity 0.3s; }
.fields a:hover .fields__arrow, .fields a:focus-visible .fields__arrow { transform: none; opacity: 1; }
.fields__name { font-family: var(--font-display); font-size: 17px; }
.fields__count { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* 顧問一覧: 検索・絞り込み・カード */
.finder { display: grid; gap: 18px; padding-bottom: 28px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
.finder__search { display: grid; gap: 6px; max-width: 520px; }
.finder__search label, .finder__label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-soft); }
.finder__search input { font: inherit; padding: 12px 15px; border: 1px solid #cfc8c5; border-radius: var(--radius); background: var(--paper); color: var(--ink); width: 100%; }
.finder__search input:focus { border-color: var(--red); outline: none; }
.finder__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.finder__label { width: 100%; }
@media (min-width: 768px) { .finder__label { width: 6.5em; } }
.finder__status { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 13px; color: var(--ink-soft); }
.finder__clear { font: inherit; font-size: 13px; background: none; border: 0; color: var(--red); text-decoration: underline; cursor: pointer; padding: 0; }
.chip__n { margin-left: 6px; font-size: 11px; opacity: 0.7; font-variant-numeric: tabular-nums; }
.cards__more-wrap { margin-top: 40px; text-align: center; }
.cards--small { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-top: 18px; }
.cards--small .card__name { font-size: 17px; }
.company__logo { margin-bottom: 32px; }
.company__logo img { width: 240px; height: auto; }
.chip {
  font: inherit; font-size: 13px; padding: 6px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink);
}
.chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--red-ink); }
.cards { display: grid; gap: 40px 28px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.card a { display: grid; gap: 14px; text-decoration: none; }
.card a:hover { opacity: 1; }
.card a:hover .card__photo { opacity: 0.88; }
.card__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--mist); transition: opacity 0.25s; }
.card__photo--none { display: grid; place-items: center; font-size: 11px; letter-spacing: 0.3em; color: var(--ink-soft); }
.card__head { display: flex; align-items: baseline; gap: 12px; }
.card__num { font-size: 22px; }
.card__name { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.08em; }
.card__title { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.card__title span { display: block; text-wrap: balance; }
.cards__empty { color: var(--ink-soft); }

/* 個別ページ（冊子のページと同じ構成） */
.profile { display: grid; gap: 40px; padding-block: clamp(32px, 6vw, 72px); }
@media (min-width: 900px) { .profile { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; } }
.profile__num { font-size: 64px; line-height: 1; }
.profile__status { margin-top: 10px; font-size: 11px; letter-spacing: 0.3em; color: var(--ink-soft); }
.profile__name { font-size: clamp(34px, 5vw, 48px); margin-top: 18px; letter-spacing: 0.1em; font-weight: 500; }
.profile__titles { margin-top: 14px; display: grid; gap: 2px; color: var(--ink); font-size: 15px; }
.profile__roles { margin-top: 28px; }
.profile__roles p { color: var(--red); font-weight: 700; font-size: 15px; margin-top: 6px; }
.profile__photo { width: 100%; max-width: 300px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--mist); }
.profile__photo--none { display: grid; place-items: center; font-size: 11px; letter-spacing: 0.3em; color: var(--ink-soft); }
.profile__body { display: grid; gap: 48px; padding-bottom: var(--section-pad); }
.profile__cols { display: grid; gap: 40px; }
@media (min-width: 768px) { .profile__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.profile__list { display: grid; gap: 6px; margin-top: 14px; }
.profile__list--bullet li { padding-left: 1.1em; position: relative; }
.profile__list--bullet li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 6px; height: 6px; background: var(--red); }
.career { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 15px; }
.career th, .career td { text-align: left; vertical-align: top; padding: 11px 0; border-bottom: 1px solid var(--line); }
.career th { width: 8.5em; color: var(--red); font-weight: 700; white-space: nowrap; padding-right: 16px; font-size: 14px; }
@media (max-width: 599px) {   /* スマホでは年と内容を縦に積み、本文に幅を渡す */
  .career, .career tbody, .career tr, .career th, .career td { display: block; width: auto; }
  .career tr { padding-block: 10px; border-bottom: 1px solid var(--line); }
  .career th, .career td { border-bottom: 0; padding: 0; }
  .career th { font-size: 12px; margin-bottom: 2px; }
  .career th:empty { display: none; }
}
.message { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; background: var(--mist); padding: 28px; }
.message__mark { font-family: var(--font-display); font-size: 48px; line-height: 0.8; color: var(--red); }
.message p { color: var(--ink-soft); font-family: var(--font-display); }
.pager { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 24px; font-size: 14px; }
.pager a { text-decoration: none; }

/* サービス: 役割の一覧 */
.roles { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.roles li { display: grid; gap: 8px 32px; padding-block: 28px; border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .roles li { grid-template-columns: 14em minmax(0, 1fr); } }
.roles h3 { font-size: 22px; }
.roles h3 small { display: block; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.3em; color: var(--red); margin-bottom: 4px; }
.roles p { color: var(--ink-soft); }
.patterns { display: grid; gap: 24px; }
@media (min-width: 768px) { .patterns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pattern { border: 1px solid var(--line); padding: 28px; }
.pattern h3 { font-size: 18px; }
.pattern p { color: var(--ink-soft); font-size: 14px; margin-top: 8px; }
.note { font-size: 13px; color: var(--ink-soft); }

/* 運営会社・ポリシー */
.info { width: 100%; border-collapse: collapse; }
.info th, .info td { text-align: left; vertical-align: top; padding: 16px 0; border-bottom: 1px solid var(--line); }
.info th { width: 9em; font-weight: 700; padding-right: 20px; }
.prose { display: grid; gap: 18px; }
.prose h2 { font-size: 20px; margin-top: 18px; }
.prose ul { list-style: disc; padding-left: 1.4em; }

/* フォーム（スターターの型を引き継ぐ） */
.form { display: grid; gap: calc(var(--space) * 3.5); }
.form__field { display: grid; gap: calc(var(--space) * 1); border: 0; padding: 0; }
.form__field label, .form__field legend { font-size: 14px; font-weight: 700; }
.form__field .required { color: var(--red); font-size: 12px; margin-left: 0.5em; }
.form__field .optional { color: var(--ink-soft); font-size: 12px; margin-left: 0.5em; font-weight: 400; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea {
  font: inherit; padding: 13px 15px; width: 100%;
  background: var(--paper); color: var(--ink);
  border: 1px solid #cfc8c5; border-radius: var(--radius);
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--red); outline: none; }
.form [aria-invalid="true"] { border-color: var(--error); }
.form__error { color: var(--error); font-size: 13px; min-height: 1.2em; }
.form__radios { display: grid; gap: 8px; margin-top: 4px; }
.form__radios label { font-weight: 400; display: flex; gap: 10px; align-items: center; }
.form__hp { position: absolute; left: -9999px; }  /* ハニーポット: 削除禁止 */
.form__draft { background: var(--red-pale); color: var(--ink); font-size: 13px; padding: 12px 16px; }

/* ---------- 6. モーション停止（スターターのポリシー。削除禁止） ---------- */
.motion-stop {
  display: none;
  position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-modal);
  padding: 10px 16px; font-size: 12px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .motion-stop { display: block; } }
html.is-motion-off *, html.is-motion-off *::before, html.is-motion-off *::after {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}



/* ---------- メインビジュアル（トップの最初の画面）: 大きな「顧問／名鑑」と、顔写真の壁 ---------- */
.mv { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.mv__inner { display: grid; gap: 32px; align-items: center; padding-block: clamp(24px, 3.5vw, 44px) clamp(24px, 3vw, 40px); }
/* 最初の画面（ヘッダーと告知の帯を除いた高さ）に収める */
@media (min-width: 900px) { .mv__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 56px; min-height: min(calc(100svh - 96px), 760px); } }
.mv__text { display: grid; gap: 18px; align-content: center; min-width: 0; }
.mv__label { font-size: 11px; font-weight: 700; letter-spacing: 0.3em; color: var(--ink-soft); display: flex; align-items: center; gap: 10px; }
.mv__label::before { content: ""; width: 10px; height: 10px; background: var(--red); }
.mv__label span { color: var(--line); }
.mv__title { font-size: clamp(72px, min(10.5vw, 19svh), 156px); line-height: 1.04; letter-spacing: 0.08em; font-weight: 600; margin-left: -0.04em; }
.mv__title .ln { display: block; overflow: hidden; padding-bottom: 0.04em; }
.mv__title .ln > span { display: block; }
.mv__title em { font-style: normal; color: var(--red); }
.mv__lead { font-family: var(--font-display); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.9; max-width: 26em; }
.mv__stats { display: flex; flex-wrap: wrap; gap: 0 32px; border-top: 1px solid var(--line); padding-top: 18px; }
.mv__stats div { display: grid; gap: 2px; }
.mv__stats dt { font-size: 11px; letter-spacing: 0.2em; color: var(--ink-soft); }
.mv__stats dd { margin: 0; font-size: 14px; }
.mv__stats b { font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.1; margin-right: 4px; font-variant-numeric: tabular-nums; }
.mv__scroll { justify-self: start; display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.3em; text-decoration: none; color: var(--ink-soft); }
.mv__scroll span::after { content: ""; display: block; width: 1px; height: 36px; margin: 8px auto 0; background: linear-gradient(var(--red), var(--red)) no-repeat top / 1px 0 , var(--line);
  animation: scrollCue 2.2s var(--ease-in-out) infinite; }
@keyframes scrollCue { 0% { background-size: 1px 0, auto; background-position: top, 0 0; } 50% { background-size: 1px 100%, auto; background-position: top, 0 0; } 100% { background-size: 1px 0, auto; background-position: bottom, 0 0; } }

.mv__wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; height: min(calc(100svh - 200px), 660px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent); }
.mv__col { overflow: hidden; min-width: 0; }
.mv__col:nth-child(2) { margin-top: -18%; }
.mv__track { display: grid; gap: 12px; animation: wallUp 60s linear infinite; }
.mv__col:nth-child(2) .mv__track { animation-direction: reverse; animation-duration: 72s; }
.mv__col:nth-child(3) .mv__track { animation-duration: 66s; }
.mv__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--mist); filter: saturate(0.82); }
.mv.is-paused .mv__track { animation-play-state: paused; }
@keyframes wallUp { to { transform: translateY(calc(-50% - 6px)); } }
@media (max-width: 899px) {
  .mv__wall { height: 300px; order: 2; }
  .mv__scroll { display: none; }
}
.mv__pause { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: 14px; z-index: 2;
  font: inherit; font-size: 12px; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.mv__pause[aria-pressed="true"] { color: var(--red); border-color: var(--red); }
/* スクロールすると大きな文字が少し上へ、写真の壁は少し下へ（transformだけ） */
.mv__text { transform: translateY(calc(var(--mv-p, 0) * -48px)); }
.mv__wall { transform: translateY(calc(var(--mv-p, 0) * 36px)); }
/* 2段目（紹介）の上の余白 */
#intro { padding-top: clamp(56px, 8vw, 104px); }

/* ============================================================
   7. 動き（読み込み・切り替え・流れる帯・スクロール・ページ移動）
   方針: 内容を隠したまま待たせない。読み込みの演出は1.2秒以内に終わり、スクロールの演出は位置と線だけを動かす。
   動きを減らす設定の閲覧者には、すべて止めて表示する（最下部）。
   ============================================================ */
@keyframes loadUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }
/* 読み込みの演出は、画面が実際に描画を始めた瞬間に JS が html に .is-intro を付けたときだけ動く。
   裏のタブ・サムネイル撮影・JSなしでは .is-intro が付かず、最初から全部見えたままになる */
.is-intro [data-load] { animation: loadUp 0.9s var(--ease-out-expo) both; }
.is-intro [data-load="1"] { animation-delay: 0.05s; }
.is-intro [data-load="2"] { animation-delay: 0.15s; }
.is-intro [data-load="3"] { animation-delay: 0.27s; }
.is-intro [data-load="4"] { animation-delay: 0.4s; }
.is-intro [data-load="5"] { animation-delay: 0.5s; }
.is-intro [data-load="6"] { animation-delay: 0.6s; }
/* 見出しは1行ずつ、下からせり上がる（行の器でクリップ） */
.hero__title .ln { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero__title .ln > span { display: block; }
.is-intro .mv__title .ln > span { animation-name: lineUp; animation-duration: 1.1s; }

/* 注目の顧問: 6名の写真を一度に並べる（切り替えはしない） */
.feature__caption { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.3em; color: var(--ink-soft);
  padding-bottom: 10px; margin-bottom: 18px; border-bottom: 1px solid var(--ink); }
.feature__caption b { font-weight: 700; color: var(--ink); letter-spacing: 0.05em; font-variant-numeric: tabular-nums; }
.portraits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; }
.portrait a { display: grid; gap: 8px; text-decoration: none; }
.portrait a:hover { opacity: 1; }
.portrait__media { display: block; overflow: hidden; background: var(--mist); }
.portrait__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(0.85);
  transition: transform 1.1s var(--ease-out-expo), filter 0.5s; }
.portrait a:hover .portrait__photo, .portrait a:focus-visible .portrait__photo { transform: scale(1.05); filter: none; }
.portrait__head { display: flex; align-items: baseline; gap: 8px; }
.portrait__num { font-size: 14px; }
.portrait__name { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.06em; transition: color 0.3s; }
.portrait a:hover .portrait__name { color: var(--red); }
.portrait__title { font-size: 11.5px; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 479px) { .portraits { gap: 16px 10px; } .portrait__title { display: none; } .portrait__name { font-size: 14px; } }
.feature__more { margin-top: 20px; text-align: right; font-size: 14px; }
.ticker__pause {
  font: inherit; font-size: 12px; background: none; border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; cursor: pointer;
}

/* 経歴が流れる帯 */
.ticker { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; }
.ticker__viewport { display: flex; width: max-content; animation: tick 70s linear infinite; }
.ticker:hover .ticker__viewport, .ticker.is-paused .ticker__viewport { animation-play-state: paused; }
.ticker__track { display: flex; flex-shrink: 0; }
.ticker__track li { display: flex; align-items: baseline; gap: 10px; padding: 18px 28px; white-space: nowrap; font-family: var(--font-display); font-size: 17px; letter-spacing: 0.08em; }
.ticker__track li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--red); margin-left: 28px; align-self: center; }
.ticker__track .num { font-size: 13px; color: #f08a92; }
.ticker__pause { position: absolute; right: max(12px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%);
  background: var(--ink); color: #cfc8c5; border-color: #4a4545; }
.ticker__pause[aria-pressed="true"] { color: var(--paper); border-color: var(--paper); }
@keyframes tick { to { transform: translateX(-50%); } }

/* スクロール: 見出しの赤い線が引かれ、カードや行が少しせり上がる（内容は隠さない） */
.section-head .label::before { content: ""; display: inline-block; vertical-align: middle; width: 32px; height: 1px; margin-right: 12px; background: var(--red);
  transform-origin: left; transition: transform 1.1s var(--ease-out-expo); }
html.js .section-head[data-rise]:not(.is-in) .label::before { transform: scaleX(0); }
html.js [data-rise]:not(.section-head) { transition: transform 1s var(--ease-out-expo); transition-delay: calc(var(--rise-i, 0) * 60ms); }
html.js [data-rise]:not(.section-head):not(.is-in) { transform: translateY(26px); }

/* ボタン: 触れると色が流れ込む */
.button { position: relative; overflow: hidden; isolation: isolate; }
.button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease-out-expo); }
.button:hover { background: var(--red); }
.button:hover::before { transform: scaleX(1); transform-origin: left; }
.button--ghost::before { background: var(--ink); }
.button--ghost:hover { background: transparent; color: var(--paper); }
.cta-band .button::before { background: var(--red); }
.cta-band .button:hover { background: var(--paper); color: var(--paper); }

/* カード: 写真が少し寄り、色が濃くなる */
.card__media { display: block; overflow: hidden; background: var(--mist); }
.card__photo { filter: saturate(0.82) contrast(1.02); transition: transform 1.1s var(--ease-out-expo), filter 0.6s; }
.card a:hover .card__photo, .card a:focus-visible .card__photo { transform: scale(1.05); filter: none; opacity: 1; }
.card__name { transition: color 0.3s; }
.card a:hover .card__name { color: var(--red); }
.card__num { transition: transform 0.5s var(--ease-out-expo); }
.card a:hover .card__num { transform: translateX(-4px); }

/* ヘッダー: スクロールすると少し詰まる */
.site-header__inner { transition: min-height 0.4s var(--ease-out-expo); }
.site-header.is-scrolled .site-header__inner { min-height: 58px; }

/* ページ移動: 全体はふわっと切り替わり、一覧の写真は個別ページの写真へつながって動く（対応ブラウザのみ） */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut 0.35s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vtIn 0.5s var(--ease-out-expo) both; }
::view-transition-group(*) { animation-duration: 0.6s; animation-timing-function: var(--ease-out-expo); }
@keyframes vtOut { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(12px); } }

/* 動きを減らす設定の閲覧者には、動きをすべて止める */
@media (prefers-reduced-motion: reduce) {
  [data-load], .mv__title .ln > span { animation: none !important; }
  .ticker__viewport { animation: none; }
  .mv__track { animation: none !important; }
  .mv__scroll span::after { animation: none !important; }
  html.js [data-rise]:not(.is-in) { transform: none !important; }
  html.js .section-head[data-rise]:not(.is-in) .label::before { transform: none; }
  ::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .button::before, .card__photo, .portrait__photo, .fields__arrow { transition: none; }
}
.profile__lead { margin-top: 14px; max-width: 46em; line-height: 2; }
.profile__born { margin-top: 12px; color: var(--ink-soft); font-size: 14px; }
.profile__note { margin-top: 14px; color: var(--ink-soft); font-size: 13px; line-height: 1.8; }