@charset "utf-8";

/* ==========================================================================
   フェア ホームページ スタイル

   値の根拠は ../SPEC.md にあります（色＝第5章／文字＝第6章／余白＝4-11）。

   直すときのコツ：
   色・余白・時間は、下の :root にまとめてあります。
   ここを1つ変えればサイト全体が変わります。個別の場所で直接書かないでください。
   ========================================================================== */


/* ==========================================================================
   1. 変数（ここを直せば全体が変わる）
   ========================================================================== */

:root {

  /* --- 色（SPEC 第5章）------------------------------------------------
     数字は白背景に対するコントラスト比。すべて WCAG AA を超えています。
     薄くすると読めなくなるので、下げないでください。 */
  --c-bg:      #FFFFFF;  /* 背景（白地） */
  --c-surface: #EFF2F5;  /* 面。カード・図・会社概要の地 */
  --c-navy:    #09174E;  /* メイン。見出し・フッター・ボタン   16.9:1 */
  --c-text:    #1A1A1A;  /* 本文                             17.4:1 */
  --c-sub:     #5A6272;  /* 補足・キャプション                 6.1:1 */
  --c-link:    #1E4B8F;  /* リンク（必ず下線とセットで）        8.5:1 */
  --c-border:  #D3D8E0;  /* 罫線 */

  /* --- 余白（SPEC 4-11）8の倍数だけを使う ------------------------------ */
  --s-1:  8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-6: 48px;
  --s-8: 64px;
  --s-12: 96px;
  --s-16: 128px;

  /* --- 幅（SPEC 4-3）--------------------------------------------------- */
  --w-page:  1080px;
  --w-prose:  700px;
  --pad-sp:    20px;

  /* ヘッダーの高さ。追従させているので、飛び先の位置合わせにも使う */
  --h-header:  64px;

  /* --- 動きの時間（SPEC 9-10）------------------------------------------ */
  --t-fast: 0.2s;   /* 指の操作への反応（リンクのホバー・三本線の×印） */

  /* ⚠️ --t-slow と --ease-reveal は「セクションの登場」専用です（15番）。
        --t-slow は他のどこからも使われていません（変えても登場だけに効きます）。 */
  --t-slow: 0.9s;   /* 2026-08-15：0.6s → 0.9s（理由は15番のコメント） */

  /* ⚠️ --ease は登場と別にしてあります。混ぜないでください。
        ここを cubic-bezier に書き換えると、本文リンクのホバー（4番）と
        三本線の×印（5番）の手触りまで一緒に変わります。 */
  --ease: ease-out;

  /* 2026-08-15 新設：登場専用のカーブ。あまねキャリアの実測値と同じものです */
  --ease-reveal: cubic-bezier(0.4, 0.4, 0, 1);
}


/* ==========================================================================
   2. 土台
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* ナビを押して飛んだとき、見出しが固定ヘッダーの下に隠れないようにする。
     ヘッダーの高さぶん、止まる位置を手前にずらしている */
  scroll-padding-top: calc(var(--h-header) + var(--s-3));
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 17px;            /* スマホ基準（SPEC 6-16） */
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

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

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

.container {
  width: 100%;
  max-width: var(--w-page);
  margin: 0 auto;
  padding: 0 var(--pad-sp);
}

.prose { max-width: var(--w-prose); }
.prose p + p { margin-top: var(--s-3); }


/* ==========================================================================
   3. リンクとボタン（SPEC 第8章）
   ========================================================================== */

/* 本文中のリンクは「色＋常に下線」。下線を消さないこと（SPEC 8-1） */
a {
  color: var(--c-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: opacity var(--t-fast) var(--ease);
}
a:hover, a:active { opacity: 0.8; }   /* 反応は「薄くする」で統一（SPEC 8-5） */

.logo, .nav a, .footer__nav a, .footer__privacy, .footer__logo, .button { text-decoration: none; }

/* お問い合わせボタン。サイトで唯一のボタン（SPEC 8-4） */
.button {
  display: inline-block;
  min-height: 48px;
  padding: 14px var(--s-4);
  background: var(--c-navy);
  color: #FFFFFF;
  border-radius: 4px;
  font-weight: 700;
  line-height: 1.4;
}
.button--ghost {
  background: transparent;
  color: var(--c-navy);
  border: 1px solid var(--c-navy);
}


/* ==========================================================================
   4. ロゴ（fair ｜ フェア）
   画像ではなく文字で組んでいる。SVGができたら差し替えてください。
   ヘッダー・フッター・ページ上部の巨大ロゴ、すべてフル表記で揃える。
   ========================================================================== */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--c-navy);
  line-height: 1;
}
.logo__en {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.logo__ja {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.22em;
}
/* 「｜」は文字ではなく細い線で引く。文字だと書体によって太さが変わるため */
.logo__bar {
  width: 1px;
  height: 20px;
  background: currentColor;
}


/* ==========================================================================
   5. ヘッダーとナビ
   PC：ロゴ左＋ナビ右／スマホ：三本線で開閉（SPEC 10-4 を上書き）

   ⚠️ 2026-08-13：スクロールしても動かないよう追従させた（SPEC 4-1 を上書き。露崎さん指示）。
   参考は goodbuff だが、あちらは帯を持たず左上のロゴと右上の contact だけが浮いている。
   黄色のベタ地だから成立する作りで、白地のフェアで真似すると本文の文字と重なって読めなくなる。
   そのため「帯は残したまま追従させる」形にした。
   影は付けない（SPEC 7-10）。境目は元からある下の1本線で足りる。
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-bg);   /* 透明だと下の本文が透けるので、必ず地の色を敷く */
  border-bottom: 1px solid var(--c-border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;           /* スマホでナビが下の段に回り込むため */
  min-height: var(--h-header);
  position: relative;
}

/* 三本線のボタン（スマホのみ表示） */
.menu-btn {
  width: 48px; height: 48px;      /* タップ領域 48px（SPEC 10-6） */
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
}
.menu-btn span {
  display: block;
  width: 26px; height: 1px;
  background: var(--c-navy);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
/* 開いているときは×印にする */
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* スマホのナビ：初期は閉じている。JSが動かない環境では常に開いた状態にする */
.nav {
  display: none;
  width: 100%;
  order: 3;
  /* ⚠️ ここは項目どうしの隙間（.nav__list の gap）と同じ値にすること。
     16px にしていたときは、一番下の項目だけ下の余白が広く見えていました
     （2026-08-14② 露崎さん指摘）。 */
  padding-bottom: 2px;
}
.js .nav { display: none; }
.js .nav.is-open { display: block; }
html:not(.js) .nav { display: block; }
html:not(.js) .menu-btn { display: none; }

.nav__list { display: grid; gap: 2px; }
.nav__list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--c-navy);
  font-size: 16px;
  letter-spacing: 0.06em;
  border-top: 1px solid var(--c-border);
}


/* ==========================================================================
   6. セクションの共通の型（SPEC 4-8）
   「英語（大）＋日本語（小）の見出し → リード → 中身」を全セクションで揃える。
   この2段見出しは、参考にした3サイトすべてで使われていた型です。
   ========================================================================== */

.section {
  padding-top: var(--s-12);
  padding-bottom: var(--s-12);
}

.section__title { margin-bottom: var(--s-6); }
.section__title-en {
  display: block;
  color: var(--c-navy);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.06em;
}
.section__title-ja {
  display: block;
  margin-top: 6px;
  color: var(--c-sub);
  font-size: 14px;
  letter-spacing: 0.12em;
}

.section__lead {
  max-width: var(--w-prose);
  margin-bottom: var(--s-6);
  line-height: 1.9;
}

/* ⚠️ サービスのリード文だけ、読点でしか折り返さないようにしています（2026-08-17）。
   2026-08-17 に文章を長くしたとき、PC 1440px で「目的を達／成します。」と
   熟語の途中で切れていました。プロフィール本文（8番）と同じ対処です。
   ⚠️ .section__lead 全体には掛けていません。お問い合わせなど他のリード文の
      折り返しまで変わってしまうためです。消すと熟語の途中で切れる状態に戻ります。

   ⚠️ 幅の上限は他のリード文と同じ 700px のままです（2026-08-17 に一度外し、
      文章が短くなったので戻しました。経緯は 18番のすぐ下のコメント）。 */
#service .section__lead {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 本文中の小見出し（プライバシーポリシーなどで使う） */
.sub-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-navy);
  margin-top: var(--s-6);
  margin-bottom: var(--s-1);
}

.note {
  color: var(--c-sub);
  font-size: 15px;
  line-height: 1.7;
  margin-top: var(--s-2);
}


/* ==========================================================================
   7. ファーストビュー（大きなロゴ＋短い文章）
   goodbuff と同じ作り。ロゴが主役なので、ここには動きを入れていません。
   ========================================================================== */

.hero {
  padding-top: var(--s-16);
  padding-bottom: var(--s-16);
}

.hero__logo {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--c-navy);
  line-height: 1;
  margin-bottom: var(--s-16);
}
.hero__logo-en {
  font-size: 48px;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.hero__logo-ja {
  font-size: 26px;
  letter-spacing: 0.22em;
}
.hero__logo-bar {
  width: 1px;
  height: 44px;
  background: currentColor;
}

.hero__body {
  max-width: var(--w-prose);
  line-height: 2;
  /* スマホでの字間だけ、本文（0.04em）より詰めている。
     「フェアは製造業・サービス業に特化した、」を1行に収めるため。
     詰めないと iPhone SE 幅（375px）で 1px 足りず、「製造業・」で行が切れる（実測）。
     　幅390px … 必要326px / 使える350px → 収まる
     　幅375px … 必要326px / 使える335px → 収まる（詰めないと336pxで入らない）
     　幅360px … 必要326px / 使える320px → 収まらず「製造業・」で切れる（許容）
     PCでは元の 0.04em に戻している（下の @media 参照） */
  letter-spacing: 0.01em;
}
.hero__body p + p { margin-top: var(--s-4); }

/* ⚠️ 読点「、」句点「。」でだけ折り返す（word-break: keep-all）。PC・スマホとも、両方の段落に効かせる。

   こうする理由：
   - 「サポート」「パートナー」のようなカタカナ語が途中（サポ／ート）で切れない
   - 意味の切れ目で改行されるので、文中に <br> を入れずに読みやすい形になる

   副作用として、狭い画面では「未来ある若者が、」のような短い行ができて
   右が空くことがある。行が埋まることより、意味の切れ目で改行されることを取っている
   （2026-08-13 露崎さん判断。1つめだけに効かせる案も試したうえで、両方に戻した）

   overflow-wrap は「どうしても1行に入らないときだけ途中で折り返す」保険。
   これがないと文字が画面からはみ出す */
.hero__body p {
  word-break: keep-all;
  overflow-wrap: anywhere;
}


/* ==========================================================================
   8. 代表プロフィール
   anmitsu-design.me の作り。写真の上をアーチ型にしている。
   ========================================================================== */

.profile__photo {
  width: 220px;
  aspect-ratio: 4 / 5;
  background: var(--c-surface);
  border-radius: 999px 999px 6px 6px;   /* 上がアーチ型 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-6);
  overflow: hidden;
}
.profile__photo img { width: 100%; height: 100%; object-fit: cover; }

.profile__body { max-width: var(--w-prose); }

.profile__name {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
.profile__kana {
  margin-left: 12px;
  font-size: 14px;
  font-weight: 400;
  color: var(--c-sub);
  letter-spacing: 0.08em;
}
/* ⚠️ 2026-08-14：ローマ字表記（.profile__romaji）を削除しました。
   見出しの "Founder" と英語がぶつかるためです。理由は index.html のコメントに */

/* 経歴（2026-08-14 追加）。名前と同じ「名前のかたまり」の一部なので、
   同じ色・同じ小ささにしています。本文と同じ大きさにすると、また3段落に見えます */
.profile__career {
  margin-top: var(--s-2);
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.8;
  /* ⚠️ 読点・句点でだけ折り返す（理由は第7章 .hero__body p の上のコメント）。
     これがないと「2026年フェアを創／業。」と語の途中で割れます。
     短い行なので、割れると1〜2文字だけの行になって特に目立ちます */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 仕事への想い。2段落（2026-08-14 に経歴を上へ移して3段落→2段落）
   ⚠️ 上の余白は 32px → 48px に広げています（2026-08-14 露崎さん指示）。
      名前・ローマ字と本文がくっついて見えるため。小見出しを立てる代わりに、
      余白だけで「名前のかたまり」と「本文」を分けています
   ⚠️ 行間は 2 → 1.9 に下げました。サイトの他の本文と同じ値です。
      広いほうが読みやすくはあるのですが、1段落が縦に伸びて塊が大きく見えていました */
.profile__story {
  margin-top: var(--s-6);
  line-height: 1.9;
}
.profile__story p + p { margin-top: var(--s-3); }

/* ⚠️ 読点・句点でだけ折り返す。理由は第7章 .hero__body p の上のコメントに書いています。
   これがないと「2026年にフェアを創業しまし／た。」のように、2文字だけの行ができます
   （PC 1440px で実際に起きていた。2026-08-14 に対処） */
.profile__story p {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ここだけは絶対に途中で折り返さない、という印（2026-08-17 追加）。
   上の keep-all は「読点でしか折り返さない」設定なので、読点で区切られた短い塊
   （例：「それが、」）が1行に取り残されることがあります。
   前後をつなぎ直したいところを、この印で括ります。

   ⚠️ 括る範囲は短すぎても長すぎてもいけません。
      短い（「それが、」だけ）→ 次の1文字が離れて「若／手」が割れる
      長い（文まるごと）    → 入り切らずに画面から文字がはみ出す
   いまの使用箇所：代表の紹介の3段落目「それが、若手の」 */
.nobr { white-space: nowrap; }


/* ==========================================================================
   9. できること：全体図
   左が3つの支援（淡い面）、右が2つの目的（紺）。

   ⚠️⚠️ 2026-08-17 に左右を入れ替えました（露崎さん指示）。
   それまでは「目的 → 支援」でしたが、矢印の向きが読み手の行動と逆でした。
   いまは「支援を組み合わせる → 目的にたどり着く」で、リード文と同じ向きです。
   ⚠️ HTML側の並び順を変えているだけで、列幅の指定（1fr / auto / 1.1fr）は
      触っていません。**入れ替えで、広いほう（1.1fr）が紺の枠に回っています。**
      紺の枠は文字が長いので、こちらのほうが収まりが良い状態です。

   ⚠️ 囲みは「1つだけ」にしています（2026-08-13 変更）。
   以前は目的ごとに枠を分けて「この目的にはこの支援」と線を引いていましたが、
   実際には3つの支援は有機的につながっていて、どちらの目的でも組み合わせて
   設計します。枠を分けると、そこに無い線引きが見えてしまうためやめました。
   ========================================================================== */

.svcmap {
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: var(--s-3);
  margin-bottom: var(--s-12);
  display: grid;
  gap: var(--s-3);
}

/* 右：2つの目的 */
.svcmap__aims {
  display: grid;
  gap: var(--s-2);
}
.svcmap__aim {
  background: var(--c-navy);
  color: #FFFFFF;
  border-radius: 4px;
  padding: var(--s-2) var(--s-3);
}
.svcmap__aim-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}
/* 名前の下の補足。紺地の上なので、白を薄めた色にして主従を付けています。
   ⚠️ これ以上薄くすると紺地の上で読めなくなります */
.svcmap__aim-sub {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
  color: #C7CDDA;
}

/* 支援 → 目的 の矢印。
   ⚠️ 塗りつぶしのブロック矢印にしていません。図形ソフトの部品に見えて、
      サイト全体の静かなトーンから浮くためです。線だけの細い矢印にしています。
   色は紺。こちらが図の「幹」なので、支援どうしをつなぐグレーの矢印より強くしています */
.svcmap__arrow {
  color: var(--c-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;          /* スマホ：下向きに倒した矢印が入る高さ */
}
.svcmap__arrow svg {
  width: 60px;
  height: 20px;
  transform: rotate(90deg);  /* スマホは縦に積むので下向きにする */
}

/* 左：3つの支援 */
.svcmap__to {
  display: grid;
  gap: 30px;                 /* 上下の矢印を入れるぶん、間隔を広げている */
}
.svcmap__to li {
  position: relative;
  background: var(--c-surface);
  border-radius: 4px;
  padding: 14px var(--s-3);
  color: var(--c-navy);
  font-weight: 700;
  text-align: center;
}

/* 支援どうしをつなぐ、上下の両向き矢印（2つめ以降の箱の上に描く）。
   3つが切り離されておらず、行き来する関係であることを示すため。

   ⚠️ 2026-08-17：グレー（--c-sub #5A6272）から**紺（--c-navy #09174E）に変更**（露崎さん指示）。
      2026-08-13 は「左→右＝図の幹＝紺／支援どうし＝補足＝グレー」と強弱をつけていたが、
      **同日の左右入れ替えで図の意味が変わり**（目的→支援 ⇒ 支援→目的）、
      3つの支援が「幹の手前にある補足」ではなくなったため、色を揃えた。
   ⚠️ 色は下の data URI の中に **%2309174E** と直接書いてあります（＝ #09174E）。
      CSS変数は data URI の中では使えないので、**紺を変えるときはここも手で直すこと。**
      `--c-navy` を書き換えただけでは、この矢印だけ古い色のまま取り残されます */
.svcmap__to li + li::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
  width: 14px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='24' viewBox='0 0 14 24'%3E%3Cg fill='none' stroke='%2309174E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 2.5V21.5'/%3E%3Cpath d='M3.4 6.1 7 2.5 10.6 6.1'/%3E%3Cpath d='M3.4 17.9 7 21.5 10.6 17.9'/%3E%3C/g%3E%3C/svg%3E") center / 14px 24px no-repeat;
}

/* 紺の2枠に添える注記（2026-08-17 に役目が変わった）。
   以前は図の関係を言葉で補う一行でしたが、いまは
   「ここに出している2つが目的のすべてではない」と断るための注記です。
   ⚠️ 紺の枠の真下から離さないこと（PCの位置指定は 18番のすぐ下＝画面幅769px以上の側） */
.svcmap__note {
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.7;
  /* 紺の枠との間隔。svcmap__aims の gap（16px）に足して、
     スマホでの見え方を 2026-08-17 の変更前と同じ 24px に保っています。
     ⚠️ PCでは 0 に戻します（18番のすぐ下） */
  margin-top: 8px;
}


/* ==========================================================================
   10. できること：一覧（goodbuff の形）

   ⚠️ 番号（01〜）は使いません（2026-08-13）。
   次の「検討・導入の流れ」が 01〜05 の番号を使っており、あちらの番号は
   「順番そのもの」です。採用・育成・定着は並列で順番がないので、同じ見た目の
   番号を付けると「上から順にやる」と読まれてしまいます。
   縦に積んだときの区切りは、番号ではなく見出しの上の短い線で付けています。
   ========================================================================== */

.svclist { display: grid; gap: var(--s-6); }
.svclist__item { max-width: var(--w-prose); }

/* 見出しの上に短い線を引く。番号を外したぶん、3つが別々の項目だと分かるように */
.svclist__item::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--c-navy);
  margin-bottom: var(--s-2);
}

.svclist__title {
  color: var(--c-navy);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: var(--s-1);
}
.svclist__text { line-height: 1.9; }


/* ==========================================================================
   11. 検討・導入の流れ
   アイコンを使わず、大きな数字で視線を導いている（SPEC 7-9）
   ========================================================================== */

.steps { display: grid; gap: var(--s-4); }

.step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-border);
}
.step__num {
  color: var(--c-navy);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.step__title {
  color: var(--c-navy);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: var(--s-1);
}
.step__text { line-height: 1.9; }
.step__term {
  margin-top: var(--s-1);
  color: var(--c-sub);
  font-size: 15px;
}


/* ==========================================================================
   12. 応援の声
   ⚠️ 2026-08-14：ここは「note のカード」でした（画像＋タイトル＋抜粋の3枚）。
      ブログを廃止したので、そのCSSは残っていません。

   見せ方の判断：
   ・左に紺の縦線を引き、面は敷いていません。
     サービスの3項目は「上に短い"横"線」なので、同じ横線を使うと意味が混ざります。
     引用は左の縦線が定石で、既存のどの要素とも見た目がぶつかりません。
   ・面（グレーの地）を使わないのは、会社概要とサービスの図がすでに面を持っていて、
     3つ目を足すとページが面だらけになるためです。
   ・写真は置きません。相手に顔写真の提供までお願いする負担を増やさないためです。
   ========================================================================== */

/* スマホは縦積み。PCで2列にするのは第16章 */
.voices {
  display: grid;
  gap: var(--s-6);
}

.voice {
  border-left: 2px solid var(--c-navy);
  padding-left: var(--s-3);
}

/* blockquote と cite には、ブラウザが初期値で余白と斜体を付けるので消しています */
.voice__text {
  margin: 0;
  line-height: 1.9;
}

/* 写真を左、名前と肩書きを右に並べます。
   写真が2行ぶんでも3行ぶんでも、まん中で揃うようにしています。
   ⚠️ 余白は margin-bottom です（2026-08-14 にコメントの上へ移したため）。
      top に戻すと、名前がコメントの下に来ていたころの並びになります */
.voice__who {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  font-style: normal;      /* 和文は斜体にしない（figcaption は既定では斜体になりません） */
}

/* 顔写真（2026-08-14 追加）。写真がないときはグレーの丸だけが出ます。
   ⚠️ 丸にしているのは、代表プロフィールの写真が「上がアーチ型」だからです。
      同じ形にすると同じ重みに見えるので、形で役割を分けています。
   ⚠️ 80px なのは、実物大で 64 / 80 / 96px を見比べて決めたためです（2026-08-14）。
      64px … 顔は分かるが小さく、武藤さんの写真は背景の縞に負ける
      96px … 写真が主役になりすぎる。坂本さんは肩書きが2行なので、
             写真のほうが背が高くなって落ち着かない
   ⚠️ flex: 0 0 auto がないと、名前が長いときに写真がつぶれます */
.voice__photo {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--c-surface);
  overflow: hidden;
}
.voice__photo img { width: 100%; height: 100%; object-fit: cover; }

.voice__id { display: block; }

.voice__name {
  display: block;
  color: var(--c-navy);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.voice__org {
  display: block;
  margin-top: 2px;
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.6;
  /* ⚠️ 肩書きは、単語の途中で折り返させません（半角スペースの位置だけで改行する）。
     これがないと「ブランドプロデューサ／ー」のように、長音符が1文字だけ次の行に
     落ちます。長い肩書き（取締役社長 ／ ブランドプロデューサー など）で必ず起きます */
  word-break: keep-all;
}

/* ⚠️ 2026-08-14：ここに「関係の一言」用のスタイル（.voice__rel）がありましたが、
   露崎さんの判断で文言ごと外したため削除しました。
   また添えたくなったら、.voice__org を薄く小さくしたものを足してください */


/* ==========================================================================
   13. 会社概要
   goodbuff にならい、薄い面の中に入れている
   ========================================================================== */

.company {
  background: var(--c-surface);
  border-radius: 6px;
  padding: var(--s-4);
}
.company dt {
  font-weight: 700;
  color: var(--c-navy);
  font-size: 15px;
  letter-spacing: 0.08em;
}
.company dd {
  margin-bottom: var(--s-3);
  line-height: 1.8;
}
.company dd:last-child { margin-bottom: 0; }

.contact__btn { margin-top: var(--s-6); }


/* ==========================================================================
   14. フッター（紺のベタ塗り／SPEC 5-11 下重心）
   ========================================================================== */

.footer {
  background: var(--c-navy);
  color: #FFFFFF;
  padding-top: var(--s-12);
  padding-bottom: var(--s-6);
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #FFFFFF;
  line-height: 1;
  margin-bottom: var(--s-6);
}
.footer__logo-en { font-size: 26px; letter-spacing: 0.02em; }
.footer__logo-ja { font-size: 16px; letter-spacing: 0.22em; }
.footer__logo-bar { width: 1px; height: 24px; background: currentColor; }

.footer__nav ul {
  display: grid;
  gap: 2px;
  margin-bottom: var(--s-6);
}
.footer__nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: #FFFFFF;
  font-size: 15px;
  letter-spacing: 0.06em;
}

.footer__info {
  font-size: 14px;
  line-height: 1.9;
  color: #C7CDDA;
}
/* 最下段：© 2026 fair とプライバシーポリシーを横に並べる（2026-08-14②）
   プライバシーポリシーはめったに見られないので、ナビの5項目と同じ重みにしない。
   参考は biotope.co.jp のフッター最下段。 */
.footer__bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;      /* 狭い画面では折り返す */
  gap: var(--s-1) var(--s-4);
  margin-top: var(--s-6);
}
/* ⚠️ この2つは必ず同じ見た目にすること（2026-08-14②）。
   片方だけ色やサイズを変えると、リンクだけが浮いて見えます。
   #C7CDDA は「© 2026 fair」と同じ色です（純白はフッターのナビ5項目だけ）。 */
.footer__copy,
.footer__privacy {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #C7CDDA;
}
/* ⚠️ 文字は 13px のままで、押せる範囲だけ上下に広げています。
   ナビの5項目は min-height:48px を持っているのに、ここだけ 13px の一行だと
   指で押しにくくなるためです（ペルソナが40〜60代／SPEC 1-6）。
   padding と同じだけ margin をマイナスにしているので、見た目の位置は変わりません。 */
.footer__privacy {
  display: inline-block;
  padding: 14px 0;
  margin: -14px 0;
}


/* ==========================================================================
   15. 動き（SPEC 第9章）

   動かすのは「セクションの登場」だけ。中の要素は個別に動かしません。
   全部が順番にフワッと出てくると、作りもののように見えるためです。

   ■ ⚠️ 2026-08-15：あまねキャリア（amane-career.com）に寄せました。
     参考サイトの動きを実際に計測して、同じ作りにしています。

       スクロール前  opacity=0     transform=none
           +300ms   opacity=0.52  transform=none
           +900ms   opacity=0.98  transform=none
          +1300ms   opacity=1     transform=none

   ■ ⚠️ 位置は動かしません（translateY を足し直さないこと）
     前は translateY(16px) で下から16px上がってきていました。
     あまねの静けさの正体は「透明度しか変えていない」ことで、実測でも
     transform が終始 none でした。**移動を足すと、寄せた意味がなくなります。**

   ■ ⚠️ 0.9秒にした理由（あまねは1.2秒ですが、あえて揃えていません）
     1.2秒は、あまねが「1画面に大きな要素が1つ」の構成だから成立する速さです。
     フェアは連続して読ませるページなので、スクロールの速い人が
     「まだ薄い文字」を読み始めてしまいます（ペルソナは40〜60代・スマホ中心／
     SPEC 1-6・1-7）。速すぎると感じたら --t-slow を 1.2s にするだけで寄ります。

   ■ ⚠️ 発火はセクション単位のままです（露崎さん判断・2026-08-15）
     あまねは要素ごとに出していますが（監視82個）、あちらは1画面1要素の構成。
     フェアはサービスが3列・流れが4段と密度が違うので、同じことをすると
     「順番にパラパラ出てくる」印象になります。上の原則のとおり、増やさないこと。
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-reveal);
}
.js .reveal.is-visible {
  opacity: 1;
}

/* 動きを減らす設定にしている人には、動きを出さない（SPEC 9-20）
   乗り物酔いに似た症状が出る方がいるため、外さないでください。 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; }
}


/* ==========================================================================
   16. PC・タブレット（769px 以上）
   スマホを基本にして、広い画面のときだけ上書きしています（SPEC 10-2）。
   ブレークポイントは 768px の1本だけ。増やすと直しにくくなります。
   ========================================================================== */

@media (min-width: 769px) {

  body { font-size: 18px; line-height: 1.8; }

  .container { padding: 0 var(--s-6); }

  /* --- ヘッダー：三本線をやめて横並びに --- */
  .menu-btn { display: none; }
  .nav, .js .nav { display: block; width: auto; order: 0; padding-bottom: 0; }
  .nav__list { display: flex; gap: var(--s-4); }
  .nav__list a { min-height: 0; border-top: 0; font-size: 15px; }
  .header__inner { min-height: 88px; }

  .logo__en { font-size: 26px; }
  .logo__ja { font-size: 16px; }
  .logo__bar { height: 24px; }

  /* --- 余白を広げる --- */
  .section { padding-top: var(--s-16); padding-bottom: var(--s-16); }

  /* --- ファーストビュー：ロゴを大きく --- */
  .hero { padding-top: 160px; padding-bottom: 160px; }
  .hero__logo { gap: 32px; margin-bottom: 120px; }
  .hero__logo-en { font-size: 104px; }
  .hero__logo-ja { font-size: 52px; }
  .hero__logo-bar { height: 92px; }
  .hero__body { font-size: 19px; letter-spacing: 0.04em; }   /* 字間は本文と同じに戻す */

  /* --- 見出し --- */
  .section__title-en { font-size: 40px; }
  .section__title-ja { font-size: 15px; }

  /* --- 代表：写真と文章を横並びに --- */
  .profile {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--s-8);
    align-items: start;
  }
  .profile__photo { width: 260px; margin-bottom: 0; }
  .profile__name { font-size: 24px; }

  /* --- 全体図：左に支援の3列、真ん中に矢印、右に目的の2枠。
         目的ごとの囲みは作らない（そこに線引きは無いため） --- */
  .svcmap {
    grid-template-columns: 1fr auto 1.1fr;
    column-gap: var(--s-3);
    row-gap: var(--s-4);
    align-items: center;
    padding: var(--s-4);
  }
  .svcmap__arrow { min-height: 0; }
  .svcmap__arrow svg { transform: none; }   /* PCは右向きのまま */
  .svcmap__aim-title { font-size: 19px; }
  /* ⚠️ 2026-08-17：注記は紺の枠と同じ入れものの中（HTML側）に移しました。
     ここでは、スマホ用に足していた 8px を戻すだけです
     （＝紺の枠のすぐ下・間隔は他のカードと同じ16px）。
     ⚠️ かつてここに grid-column の指定がありましたが、いまは不要です。
        注記は .svcmap の直接の子ではなくなっているため、書いても効きません */
  .svcmap__note { margin-top: 0; }

  /* ⚠️ 2026-08-17：ここに一時的に `#service .section__lead { max-width: none; }` を
     置いていましたが、**文章が短くなったので外しました**。
       文章を短くする前（40字）… 実寸 783px ＞ 上限 700px → 上限を外す必要があった
       いまの文章（34字）　　… 実寸 672px ＜ 上限 700px → 上限のままで1行に収まる
     ⚠️ **サービスのリード文を長くするときは、実寸を測ってから。** 700px を超えると
        折り返します（そのときも 14番の keep-all が効くので、切れるのは読点です）。 */

  /* --- 一覧：PCは3カラム（goodbuff と同じ） --- */
  .svclist {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
  }

  /* --- 流れ：数字を大きく --- */
  .step { grid-template-columns: 72px 1fr; }
  .step__num { font-size: 28px; }

  /* --- 応援の声：PCは2列（2人なので3列にはしない） --- */
  .voices { grid-template-columns: repeat(2, 1fr); gap: var(--s-8); }

  /* --- 会社概要：項目名と内容を2列に --- */
  .company {
    display: grid;
    grid-template-columns: 140px 1fr;
    padding: var(--s-6);
    column-gap: var(--s-4);
  }
  .company dd { margin-bottom: var(--s-3); }

  /* --- フッターのナビを横並びに --- */
  .footer__logo-en { font-size: 30px; }
  .footer__nav ul { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
}


/* ==========================================================================
   17. 改行の出し分け（SPEC 6-18）
   キャッチや見出しだけ、意味の切れ目で改行する。本文は自動改行にまかせる。
   ========================================================================== */

.br-pc { display: none; }
.br-sp { display: inline; }

@media (min-width: 769px) {
  .br-pc { display: inline; }
  .br-sp { display: none; }
}


/* ==========================================================================
   18. 幅の狭いPC・タブレット縦（769〜900px）でのヘッダー

   ⚠️ この指定を消さないでください。消すと 769〜840px でヘッダーが
      2行（ロゴが上・ナビが下）に折り返します。実測で確認済みです。

   ■ 経緯（2026-08-14②）
      ナビが6項目になったとき、この帯だけ折り返したので入れた対処です。
      その後「組織概要」を外して5項目に戻り、一度は不要になったので削除しました。
      しかし同じ日に「応援の声」→「ご一緒した方から」に改称してラベルが
      4字→8字に伸び、ナビ全体が 490px → 589px になって再発。
      書き残しておいた指定をそのまま戻しています。
      （この対処が効いている帯では、ナビ幅は 589px → 525px に縮みます）

   ⚠️ ナビの項目を増やす／ラベルを長くするときは、必ず幅を実測すること。
      ヘッダーだけを見て判断しないこと ── これは .container にも効くので、
      本文の左右余白（48px→32px）も一緒に変わります。
   ========================================================================== */

@media (min-width: 769px) and (max-width: 900px) {
  .nav__list { gap: var(--s-2); }        /* 32px → 16px */
  .container { padding: 0 var(--s-4); }  /* 48px → 32px */
}