/* ============================================================
   犀川Lab サイト共通スタイル

   このファイルは「セクションごと」に分けて書かれています。
   修正したい場所を見つけたら、その見出しコメントの範囲だけを
   直せば基本的に問題ありません。

   目次
   1. 基本設定（色・フォントなど）
      1b. PC表示専用：文字サイズ・幅の拡大（スマートフォンには影響しません）
   2. 全体のリセット・共通パーツ
   3. Header
   4. Hero
   5. セクション共通（見出し・リード文・注記など）
   6. Situations（こんな課題を感じている経営者の方へ）
   7. Service（支援内容）
   8. Profile
   9. Contact
   10. Footer
   11. About ページ専用スタイル
   12. Price ページ専用スタイル
   13. Contact ページ専用スタイル
   14. Privacy ページ専用スタイル
   15. レスポンシブ（スマートフォン・タブレット）
   16. HOME 表示アニメーション（オープニング・HERO・スクロール表示）
   ============================================================ */

/* ============================================================
   1. 基本設定（色・フォントなど）
   ここの色を変えるだけで、サイト全体の色味を調整できます。

   色の考え方：
   - 背景は基本的に「白」。一部セクションだけ「生成り」に切り替えて
     ページのリズムをつくります。
   - 「深い藍（--color-accent）」は背景には使わず、CTA・番号・細い線・
     リンク・hoverなど、小さな面積のアクセントとして使います。
   ============================================================ */
:root {
  --color-bg: #ffffff;
  --color-bg-kinari: #f6f2e8;   /* 温かみを加える生成り色（一部セクションのみ） */
  --color-heading: #1d2024;     /* 見出し色。本文よりさらに濃いグレー */
  --color-text: #33373b;        /* 本文色。真っ黒ではないが、はっきり読める濃さ */
  --color-text-muted: #5c6167;  /* 補足文・キャプションなどのサブテキスト */
  --color-border: #d8dcdd;      /* 細い罫線 */

  --color-bg-subtle: #f6f6f4;   /* ごく薄いニュートラルカラー（PROFILEのみ使用） */

  --color-accent: #24405c;      /* メインカラー：深い藍（アクセントとして使用） */
  --color-accent-dark: #1a2e42; /* hover時などに使う、より深い藍 */
  --color-accent-soft: #e8ecef; /* 藍のごく薄いトーン（hover背景など最小限に使用） */

  --font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;

  /* 文字サイズの階層（5段階）。役割ごとに使い回し、場当たり的なfont-sizeは増やさない */
  --fs-hero-title: 2.75rem;    /* ①HEROなど最重要見出し */
  --fs-section-title: 1.875rem;/* ②セクション見出し */
  --fs-item-title: 1.25rem;    /* ③項目タイトル */
  --fs-body: 1.0625rem;        /* ④通常本文（目安17px） */
  --fs-note: 0.9375rem;        /* ⑤補足・注記（目安15px） */

  --max-width: 1100px;
  --content-width: 720px; /* 長文を読みやすくするための最大幅 */
  --section-padding: 80px 24px;
}

/* ============================================================
   1b. PC表示専用：文字サイズ・幅の拡大
   スマートフォン（900px以下）はこのブロックの影響を受けません。
   通常本文・箇条書き・ナビ・ボタン・補足文・項目タイトルはここからさらに+14〜18%、
   セクション見出しは+9%程度の拡大に留めています。
   HERO見出しはPCで1行表示にするため画面幅に応じた可変サイズにしています。
   文字を大きくした分、文章領域の幅も少しだけ広げています。
   ============================================================ */
@media (min-width: 901px) {
  :root {
    /* HERO見出しはPCで1行表示にするため、画面幅に応じて可変（約31〜54px、hero-contentの
       最大幅を超えたところで54px付近に収束）。詳細は「4. Hero」のコメントを参照。 */
    --fs-hero-title: clamp(1.95rem, calc(3.4vw + 0.6px), 3.375rem);
    --fs-section-title: 2.1875rem; /* 32px→35px 相当（+9%。大見出しはバランスを見て控えめに） */
    --fs-item-title: 1.5625rem;    /* 22px→25px 相当（+14%） */
    --fs-body: 1.375rem;           /* 19px→22px 相当（+16%） */
    --fs-note: 1.25rem;            /* 17px→20px 相当（+18%） */

    --max-width: 1160px;
    --content-width: 760px;
  }
}

/* ============================================================
   2. 全体のリセット・共通パーツ
   ============================================================ */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--fs-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent-dark);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  color: var(--color-heading);
}

p {
  margin: 0;
}

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-accent);
  color: #fff;
  padding: 8px 16px;
  z-index: 200;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* ボタン共通：角丸は控えめに。hoverも色の変化のみ */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 4px;
  font-weight: 600;
  font-size: var(--fs-body);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  background-color: var(--color-accent);
  color: #fff;
}

.btn-primary:hover {
  background-color: var(--color-accent-dark);
  color: #fff;
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.btn-secondary:hover {
  background-color: var(--color-accent-soft);
  color: var(--color-accent-dark);
}

/* セクション共通の内側コンテナ */
.section-inner,
.header-inner,
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section {
  padding: var(--section-padding);
}

/* セクション見出しの上に添える控えめな英字ラベル＋細い罫線（HEROには使用しない） */
.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

.section-label::after {
  content: "";
  width: 36px;
  height: 1px;
  background-color: var(--color-accent);
}

.section-title {
  font-size: var(--fs-section-title);
  font-weight: 700;
  text-align: left;
  margin-bottom: 20px;
}

.section-lead {
  max-width: var(--content-width);
  margin: 0 0 48px;
  text-align: left;
  font-size: var(--fs-body);
  color: var(--color-text);
}

.section-lead p + p {
  margin-top: 12px;
}

.section-cta {
  text-align: left;
  margin-top: 32px;
}

.section-footnote {
  margin-top: 32px;
  text-align: left;
  font-size: var(--fs-note);
  color: var(--color-text-muted);
}

/* 文章の一部を控えめに強調するための共通スタイル（セール色を避けるため太字止め） */
.text-emphasis {
  font-weight: 600;
  color: var(--color-accent);
}

/* ============================================================
   3. Header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  background-color: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--color-border);
  z-index: 100;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.logo:hover {
  color: var(--color-accent);
}

/* ブランドアイコン：正式ロゴ画像。縦横比を保つため幅のみ指定 */
.logo-icon {
  flex-shrink: 0;
  width: 28px;
  height: auto;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 20px;
}

.primary-nav a {
  color: var(--color-text);
  font-size: var(--fs-note);
  white-space: nowrap;
}

.primary-nav a:hover {
  color: var(--color-accent);
}

.primary-nav .nav-cta {
  padding: 8px 18px;
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  color: var(--color-accent);
}

.primary-nav .nav-cta:hover {
  background-color: var(--color-accent);
  color: #fff;
}

/* ハンバーガーメニューボタン（PCでは非表示） */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.menu-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-text);
}

/* ============================================================
   4. Hero
   背景は白のまま。次のSituationsセクションで生成りに切り替えることで
   ページを読み進めるきっかけをつくります。
   ============================================================ */
.hero {
  padding-top: 72px;
  background-color: var(--color-bg);
}

.hero-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.hero-text {
  max-width: 760px;
  padding-bottom: 40px;
}

@media (min-width: 901px) {
  /* HERO見出しをPCで1行表示にするため、hero-contentとhero-textの幅を広げる。
     本文（hero-copy）と注記（hero-note）は読みやすさを保つため、幅を別途制限する。 */
  .hero-content {
    max-width: 1520px;
  }

  .hero-text {
    max-width: none;
  }

  .hero-copy,
  .hero-note {
    max-width: 860px;
  }
}

.hero-eyebrow {
  color: var(--color-accent);
  font-size: var(--fs-note);
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}

.hero-title {
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN",
    "Hiragino Mincho Pro", serif;
  font-size: var(--fs-hero-title);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 24px;
  letter-spacing: 0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.hero-copy {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--color-text);
}

.hero-copy + .hero-copy {
  margin-top: 8px;
}

.hero-note {
  margin-top: 20px;
  font-size: var(--fs-note);
  color: var(--color-text-muted);
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* キービジュアル（犀川Labの世界観を表す横長画像。人物写真は使用しません） */
.hero-media {
  width: 100%;
}

.hero-image {
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/* ============================================================
   6. Situations（こんな課題を感じている経営者の方へ）
   カード化・番号化せず、細い罫線と小さな点による文章中心のレイアウトにします。
   背景は生成り色。
   ============================================================ */
.situations {
  background-color: var(--color-bg-kinari);
}

.situation-list {
  max-width: var(--content-width);
  margin: 0;
  border-top: 1px solid var(--color-border);
}

.situation-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-body);
  color: var(--color-text);
}

.situation-item::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 0.7em;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.situation-closing {
  max-width: var(--content-width);
  margin: 36px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  font-size: var(--fs-body);
  color: var(--color-text);
}

/* PC表示時のみ、箇条書き後の本文の横幅を少し広げて読みやすくする */
@media (min-width: 901px) {
  .situation-closing {
    max-width: 860px;
  }
}

/* ============================================================
   7. Service（支援内容）
   各項目は「見出し＋サブメッセージ＋本文＋具体的な支援例」の順で構成し、
   タイトル＋細い罫線＋深い藍の小さなアクセントで区別します（番号は使用しません）。
   PCは2列×2段、スマートフォンは1列。背景は白。
   ============================================================ */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 40px;
}

.service-card {
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

.service-card h3 {
  position: relative;
  padding-top: 16px;
  font-size: var(--fs-item-title);
  margin-bottom: 14px;
}

.service-card h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 3px;
  background-color: var(--color-accent);
}

.service-message {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 10px;
}

.service-action {
  font-size: var(--fs-body);
  color: var(--color-text);
  flex-grow: 1;
}

.service-examples {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.service-examples li {
  position: relative;
  padding-left: 16px;
  font-size: var(--fs-note);
  color: var(--color-text-muted);
}

.service-examples li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-border);
}

/* ボタンにせず、控えめなテキストリンクとして使う「詳しく見る」系導線 */
.link-more {
  font-size: var(--fs-note);
  font-weight: 600;
  color: var(--color-accent);
}

.link-more:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

/* ============================================================
   8. Profile
   代表者本人の写真は、このセクションで初めて登場します。
   HOMEでは氏名・資格・短い紹介文のみとし、詳細な経歴・資格一覧は
   プロフィール詳細ページ（Aboutページ・今後作成予定）に譲ります。
   前後の白／生成りから緩やかに区切るため、ごく薄いニュートラル背景を使用します。
   ============================================================ */
.profile {
  background-color: var(--color-bg-subtle);
}

.profile-body {
  display: flex;
  gap: 56px;
  align-items: flex-start;
}

.profile-media {
  flex: 0 0 200px;
  text-align: center;
}

/* HOME の円形写真：PCでは一回り大きく表示する（スマートフォンは既存の200pxのまま） */
@media (min-width: 901px) {
  .profile .profile-media {
    flex-basis: 248px;
  }
}

.profile-image {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 15%;
  border-radius: 50%;
}

.profile-name {
  font-size: var(--fs-item-title);
  font-weight: 600;
  color: var(--color-heading);
}

.profile-role {
  margin-top: 4px;
  margin-bottom: 24px;
  font-size: var(--fs-note);
  color: var(--color-text-muted);
}

.profile-content {
  flex: 1 1 480px;
  max-width: var(--content-width);
}

.profile-summary {
  font-size: var(--fs-body);
  color: var(--color-text);
}

.profile-cta {
  margin-top: 20px;
}

/* ============================================================
   9. Contact
   サイト最後の重要なCTA。カードにはせず、生成り背景の上に
   見出し・本文・CTAを直接配置し、余白でシンプルに見せます。
   ============================================================ */
.contact {
  background-color: var(--color-bg-kinari);
}

.contact-content {
  max-width: 560px;
  margin: 0;
  text-align: left;
  font-size: var(--fs-body);
  color: var(--color-text);
}

/* PC表示時のみ、CONTACT本文の横幅を広げる（十分な画面幅で本文が1行に収まる程度） */
@media (min-width: 901px) {
  .contact-content {
    max-width: calc(var(--content-width) * 1.45);
  }
}

.contact-content p {
  margin-top: 16px;
}

.contact-content p:first-child {
  margin-top: 0;
}

.contact-content .btn {
  margin-top: 24px;
}

.contact-secondary {
  font-size: var(--fs-note);
}

/* ============================================================
   10. Footer
   Contactの生成りから白へ戻し、細い罫線だけで締めます。
   ============================================================ */
.site-footer {
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.footer-inner {
  padding: 48px 24px;
  text-align: center;
}

.footer-logo {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 16px;
}

.footer-nav ul {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.footer-nav a {
  color: var(--color-text-muted);
  font-size: var(--fs-note);
}

.footer-nav a:hover {
  color: var(--color-accent);
}

.footer-copyright {
  color: var(--color-text-muted);
  font-size: var(--fs-note);
}

/* ============================================================
   11. About ページ専用スタイル
   HOMEで確立した「英字ラベル＋細い罫線」「余白」「白／生成りの切り替え」を
   踏襲しつつ、Aboutページ固有のブロックにのみ使う最小限のスタイルです。
   ============================================================ */

/* ページ上部の導入（HEROより静かなレイアウト）
   次セクションとの間が離れすぎないよう、下側の余白のみ控えめにしています。 */
.page-intro-title {
  font-size: var(--fs-section-title);
  font-weight: 700;
  margin-bottom: 20px;
}

/* 導入エリアの背景：HOMEのキービジュアル画像（images/key-visual.png）を再利用し、
   白い半透明レイヤーを重ねてうっすら見せる。画像ファイル自体は加工していません。 */
.page-intro {
  padding-bottom: 40px;
  background-image: linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)),
    url("../images/key-visual.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* 支援で大切にしていること（VALUE）
   ページ上部からの余白を詰めるため、上側のみ控えめにしています。 */
.philosophy {
  padding-top: 56px;
  background-color: var(--color-bg-kinari);
}

.philosophy-lead {
  max-width: var(--content-width);
  margin: 0 0 24px;
  font-size: var(--fs-item-title);
  font-weight: 600;
  color: var(--color-heading);
}

/* VALUE導入文：左端は section-lead 共通ルールのまま、右方向にだけ幅を広げる
   （.section-lead 自体は変更せず、VALUE内でのみ上書き） */
.philosophy .section-lead {
  max-width: calc(var(--content-width) * 1.45);
}

/* 縦方向に読ませる項目リスト（CAREERで使用） */
.stacked-list {
  max-width: var(--content-width);
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* 支援で大切にしていることの3項目：PCは3列、スマートフォンは1列。
   カード化はせず、見出し／細い罫線／本文のみのシンプルな構成にしています。 */
.value-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.value-card h3 {
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-item-title);
  color: var(--color-heading);
}

.value-card p {
  font-size: var(--fs-body);
  color: var(--color-text);
}

/* PCでは3項目の本文のみ、他の本文よりわずかに小さくして情報階層を出す */
@media (min-width: 901px) {
  .value-card p {
    font-size: calc(var(--fs-body) * 0.9);
  }
}

/* 見出し＋細いアクセントバー＋本文のブロック（.service-card と同じ視覚言語） */
.content-block {
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.content-block h3 {
  position: relative;
  padding-top: 16px;
  font-size: var(--fs-item-title);
  margin-bottom: 10px;
}

.content-block h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 3px;
  background-color: var(--color-accent);
}

.content-block-meta {
  font-size: var(--fs-note);
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.content-block p {
  font-size: var(--fs-body);
  color: var(--color-text);
}

.content-block p + p {
  margin-top: 12px;
}

/* About: PROFILE（HOMEの.profileより詳しい経歴を掲載。背景は白のまま） */

/* 自己紹介：氏名・肩書き（左カラムの先頭。「人となりを少し。」との間隔を持たせる） */
.about-intro {
  margin-bottom: 16px;
}

/* 写真は元の横長構図のまま、親（.about-personal-media）の幅いっぱいに表示する */
.about-photo {
  display: block;
  width: 100%;
  height: auto;
}

/* 自己紹介：PCでは氏名〜人となりの本文（左）と写真（右）の2カラム。
   写真の上端を氏名の上端に揃えるため、氏名・肩書きも左カラムに含める。
   写真幅は最大460px、中間幅では42%まで縮めて文章側の幅を確保する。
   スマートフォンでは .about-personal を縦積みにし、文章→写真の順で表示する（900px以下）。 */
.about-personal {
  display: flex;
  gap: 56px;
  align-items: flex-start;
}

.about-personal-content {
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--content-width);
}

.about-personal-media {
  flex: 0 0 min(460px, 42%);
}

.about-name {
  font-size: var(--fs-item-title);
  font-weight: 600;
  color: var(--color-heading);
}

.about-role {
  margin-top: 4px;
  margin-bottom: 24px;
  font-size: var(--fs-note);
  color: var(--color-text-muted);
}

.about-bio p {
  font-size: var(--fs-body);
  color: var(--color-text);
}

.about-bio p + p {
  margin-top: 12px;
}

/* 「人となりを少し。」の見出し：本文との間隔のみを持たせる */
.about-subheading {
  margin-bottom: 16px;
  font-size: var(--fs-item-title);
  font-weight: 600;
  color: var(--color-heading);
}

/* About: CAREER（経歴・資格） */
.career {
  background-color: var(--color-bg-kinari);
}

/* CAREERの本文幅：左端は維持し、右方向にだけ幅を広げる（.stacked-list 本体は変更せず上書き） */
.career .stacked-list {
  max-width: calc(var(--content-width) * 1.45);
}

/* 「現在」見出し：PROFILEの「人となりを少し。」（.about-subheading）と同じ
   罫線＋余白の見せ方を踏襲し、過去の経歴との区切りを分かりやすくする */
.current-heading {
  margin-top: 48px;
  margin-bottom: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-item-title);
  font-weight: 600;
  color: var(--color-heading);
}

.career-note {
  max-width: calc(var(--content-width) * 1.45);
  margin-top: 0;
  font-size: var(--fs-body);
  color: var(--color-text);
}

.qualification-heading {
  margin-top: 48px;
  margin-bottom: 16px;
  font-size: var(--fs-item-title);
  font-weight: 600;
  color: var(--color-heading);
}

.qualification-list {
  max-width: var(--content-width);
  border-top: none;
}

/* HOME側のSituationsで使う .situation-item の罫線を、資格一覧のみ無効化してさらに詰める */
.qualification-list.situation-list .situation-item {
  padding: 4px 0;
  border-bottom: none;
}

/* About: OFFICE（事業所概要）：表形式に近い、罫線のみのシンプルな一覧 */
.info-list {
  max-width: var(--content-width);
  border-top: 1px solid var(--color-border);
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}

.info-row dt {
  flex: 0 0 160px;
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--color-heading);
}

.info-row dd {
  flex: 1 1 240px;
  margin: 0;
  font-size: var(--fs-body);
  color: var(--color-text);
}

/* ============================================================
   12. Price ページ専用スタイル
   About同様、.section-label／.stacked-list／.content-block 等の
   既存クラスを再利用しつつ、料金ページ固有のブロック（料金カード・
   工程リスト）だけを新しく定義しています。
   ============================================================ */

/* PRICE：背景は白のまま（.section のデフォルト） */

/* 支援メニュー：PC 2列×2段のカード。HOMEのSUPPORTカードよりさらに控えめに、
   影は使わず、生成りの背景と細い罫線だけで区切ります。 */
.price-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.price-card {
  padding: 28px;
  background-color: var(--color-bg-kinari);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.price-card h3 {
  font-size: var(--fs-item-title);
  color: var(--color-heading);
}

/* 情報階層：①サービス名 → ②料金 → ③時間・回数 → ④本文 → ⑤補足、の順で強弱をつける */
.price-card-price {
  margin-top: 14px;
  font-size: calc(var(--fs-item-title) * 1.2);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-heading);
}

.price-card-duration {
  margin-top: 4px;
  font-size: var(--fs-note);
  color: var(--color-text-muted);
}

/* 「全3回・各回90分程度｜1〜2か月程度を想定」のような併記時の区切り記号。
   狭い画面では通常のテキストと同様に自然に折り返される */
.price-card-duration-sep {
  margin: 0 8px;
}

.price-card-body {
  margin-top: 16px;
}

.price-card-body p {
  font-size: var(--fs-body);
  color: var(--color-text);
}

.price-card-body p + p {
  margin-top: 12px;
}

.price-card-note {
  margin-top: 12px;
  font-size: var(--fs-note);
  color: var(--color-text-muted);
}

.price-card-note + .price-card-note {
  margin-top: 2px;
}

/* 「初回相談」の注意文（※初回相談後に、必ず〜）：独立したボックスにはせず、
   通常本文と同じ大きさのまま太字だけで視認性を上げる。前後には適度な余白を確保 */
.price-card-caution {
  margin-top: 16px;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-heading);
}

/* INFORMATION：背景は白のまま（.section のデフォルト）。
   本文幅はAboutページのVALUE／CAREERで確定済みの計算式（content-widthの1.45倍）を
   そのまま再利用し、左側だけに細く収まらないようにする。.stacked-list 本体は変更しない。 */
.information .stacked-list {
  max-width: calc(var(--content-width) * 1.45);
}

/* CONTACT：HOMEと共有する .contact／.contact-content 本体は変更せず、
   料金ページ限定の .price-contact でのみ本文幅をAboutと同じ計算式に合わせる */
.price-contact .contact-content {
  max-width: calc(var(--content-width) * 1.45);
}

/* ============================================================
   13. Contact ページ専用スタイル
   フォームは既存の白／生成りの切り替え、罫線、角丸4px、深い藍のアクセントなど
   サイト全体のトーンをそのまま踏襲します。新しい色は追加していません。
   ============================================================ */

/* ページ上部の導入本文：左端・最大幅は他ページの導入部と揃えたまま、
   Contact限定でこの本文だけ現在のcontent-widthから約20%広げる。
   .section-lead 本体（About／料金についてでも使用）は変更しない。 */
.contact-intro .section-lead {
  max-width: calc(var(--content-width) * 1.2);
}

/* お問い合わせフォームの背景：直前の白い導入部と区別するため生成りに切り替える */
.contact-form-section {
  background-color: var(--color-bg-kinari);
}

.contact-form {
  max-width: var(--content-width);
  margin-top: 40px;
}

.form-field {
  margin-bottom: 28px;
}

.form-label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--color-heading);
}

/* 必須・任意の表示：強い赤色等は使わず、既存パレットの落ち着いた色味だけで区別する */
.form-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.form-tag-required {
  background-color: var(--color-accent-soft);
  color: var(--color-accent-dark);
}

.form-tag-optional {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-muted);
}

/* 入力欄：白背景＋細い罫線のみ。十分な高さを確保し、PC・スマホとも入力しやすくする */
.form-input,
.form-textarea,
.form-select {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: #fff;
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-text);
}

/* 入力例（プレースホルダー）：通常の入力文字よりはっきり控えめにし、
   薄すぎて読めなくならない程度の既存の落ち着いたグレーを使用する */
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.form-textarea {
  min-height: 160px;
  resize: vertical;
}

.form-select {
  cursor: pointer;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* お問い合わせの種別：ラジオボタンを縦に並べ、スマートフォンでもタップしやすい高さを確保 */
.form-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 28px;
}

.form-radio-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

.form-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body);
  color: var(--color-text);
  cursor: pointer;
}

.form-radio input[type="radio"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--color-accent);
}

/* プライバシーポリシー同意チェックボックス */
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.form-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: var(--color-accent);
}

.form-checkbox label {
  font-size: var(--fs-body);
  color: var(--color-text);
}

.form-checkbox a {
  font-weight: 600;
}

.form-actions {
  margin-top: 40px;
}

/* 送信ボタン直前の控えめな注記（外部フォーム送信サービスへの遷移案内）。
   本文より小さいが十分読める補足文字サイズと、既存の落ち着いた色味を使用する */
.form-note {
  margin-bottom: 16px;
  font-size: var(--fs-note);
  color: var(--color-text-muted);
}

/* .btn は元々 <a> 用に定義されているため、<button> に適用した際のブラウザ既定の
   枠線等だけを打ち消す（.btn 本体の色・padding・角丸などは変更しない） */
button.btn {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* ============================================================
   14. Privacy ページ専用スタイル
   規約ページとして文章を読みやすくすることを優先し、装飾は最小限に
   とどめます。本文幅はAbout／料金についてで確定済みの計算式
   （content-widthの1.45倍）を再利用し、他ページと乖離させません。
   ============================================================ */

/* 本文は白背景のまま（.section のデフォルト）。1カラムで規約らしく落ち着かせる */
.privacy-content {
  max-width: calc(var(--content-width) * 1.45);
  margin-top: 8px;
}

.privacy-content p {
  font-size: var(--fs-body);
  color: var(--color-text);
}

.privacy-content p + p {
  margin-top: 14px;
}

/* 「1. 個人情報の定義」などの項目見出し：本文よりはっきり大きく、
   太さは既存の項目見出し（h3相当）と揃える。見出し間の余白も広めに取る */
.privacy-heading {
  margin-top: 48px;
  margin-bottom: 16px;
  font-size: var(--fs-item-title);
  font-weight: 600;
  color: var(--color-heading);
}

/* 第3項の利用目的リスト：番号付きで読みやすく。装飾は数字のみ */
.privacy-list {
  list-style: decimal;
  padding-left: 1.4em;
  margin-top: 12px;
  margin-bottom: 14px;
}

.privacy-list li {
  font-size: var(--fs-body);
  color: var(--color-text);
}

.privacy-list li + li {
  margin-top: 8px;
}

/* 第9項の「事業所名／個人情報管理責任者／所在地」：Aboutの事業所概要と同じ
   dt/dd構成（.info-list／.info-row）を再利用し、対応関係を分かりやすくする */
.privacy-info-list {
  margin: 16px 0 20px;
}

/* 制定日：本文の締めくくりとして、控えめな注記の見た目にする */
.privacy-date {
  margin-top: 40px;
  font-size: var(--fs-note);
  color: var(--color-text-muted);
}

/* ============================================================
   15. レスポンシブ（スマートフォン・タブレット）
   ============================================================ */

/* タブレット以下：レイアウトを縦並びにし、ナビゲーションをハンバーガーメニュー化 */
@media (max-width: 900px) {
  .profile-body {
    flex-direction: column;
  }

  .profile-media {
    flex: none;
  }

  .profile-content {
    max-width: none;
  }

  .service-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  :root {
    --section-padding: 56px 20px;
  }

  .menu-toggle {
    display: flex;
  }

  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border-bottom: 1px solid var(--color-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .primary-nav.is-open {
    max-height: 400px;
  }

  .primary-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 20px;
  }

  .primary-nav li {
    width: 100%;
  }

  .primary-nav a {
    display: block;
    padding: 12px 0;
    white-space: normal;
  }

  .primary-nav .nav-cta {
    display: inline-block;
    margin-top: 8px;
  }

  .hero-title {
    font-size: 2rem;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    text-align: center;
  }

  /* About ページ：事業所概要の項目名／値を縦積みにし、はみ出しを防ぐ。
     dt/dd とも PC用の flex-basis（160px／240px）が縦積み時は「高さ」の
     基準値として効いてしまい、内容が短くても大きな空白ができていたため、
     両方を auto にして内容量どおりの高さに戻す。 */
  .info-row {
    flex-direction: column;
    gap: 4px;
    padding: 16px 0;
  }

  .info-row dt,
  .info-row dd {
    flex-basis: auto;
  }

  /* 自己紹介：スマートフォンでは2カラムにせず、
     文章→写真の順で縦積みにする（HTMLの記載順をそのまま活かす）。
     flex-direction: column では flex-basis が「高さ」の基準値として
     効いてしまうため、両カラムとも flex: none に戻す。
     写真はコンテンツ領域の横幅いっぱいに表示するため、各カラムを横幅いっぱいに伸ばす。 */
  .about-personal {
    flex-direction: column;
    align-items: stretch;
  }

  .about-personal-content,
  .about-personal-media {
    flex: none;
  }

  /* About ページ：導入部と次セクションの余白をスマートフォンでも控えめに。
     背景画像は幅が狭くなる分オーバーレイをわずかに強めて可読性を確保。 */
  .page-intro {
    padding-bottom: 28px;
    background-image: linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86)),
      url("../images/key-visual.png");
  }

  .philosophy {
    padding-top: 40px;
  }

  /* About ページ：支援で大切にしていることの3項目を1列に。
     カードの枠線がなくなった分、項目間の余白を少し広めにして区切りを出す */
  .value-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* Price ページ：支援メニューを1列に。カードの内側余白も少し詰める */
  .price-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .price-card {
    padding: 20px;
  }
}

/* ============================================================
   16. HOME 表示アニメーション（オープニング・HERO・スクロール表示）

   方針：
   - 「静かに立ち上がる」控えめな動きのみとし、回転・拡大縮小・
     バウンド等は使用しない。
   - opacity（必要に応じて translateY 10〜20px程度）のみを使用。
   - オープニング演出・HERO演出はCSSアニメーションのみで完結させ、
     JavaScriptが動作しない場合でも自動的にオープニング画面が消え、
     HERO・本文は表示される（＝JS非依存の安全な実装）。
   - スクロール時のセクション表示のみIntersectionObserver
     （js/script.js）を使用。JS/IntersectionObserver非対応時は
     .is-observing が付与されないため、常に通常表示のまま。
   - .opening-screen／.hero-* はHOME（index.html）にしか存在しない
     要素・クラスのため、他ページには一切影響しない。
   ============================================================ */

@keyframes home-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes home-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes home-opening-hide {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* オープニング画面：HERO手前に短時間だけ重ねる導入画面。
   背景は既存の白（--color-bg）をそのまま流用し、新しい色は追加しない。 */
.opening-screen {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: var(--color-bg);
  animation: home-opening-hide 0.5s ease 0.9s both;
}

.opening-logo {
  width: 64px;
  height: auto;
  animation: home-fade-in 0.45s ease 0.15s both;
}

.opening-text {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-heading);
  animation: home-fade-in 0.45s ease 0.3s both;
}

/* HEROキービジュアル：オープニングが消え始めるタイミングに合わせて、
   ゆっくりフェードインする（画像そのものは加工しない） */
.hero-media {
  animation: home-fade-in 0.8s ease 0.9s both;
}

/* HERO文章：見出し→本文→補足文→CTAの順に、ごく短い時間差で
   フェードアップ表示する（移動量は14pxで10〜20pxの範囲内） */
.hero-eyebrow,
.hero-title {
  animation: home-fade-up 0.5s ease 1s both;
}

.hero-copy {
  animation: home-fade-up 0.5s ease 1.15s both;
}

.hero-note {
  animation: home-fade-up 0.5s ease 1.3s both;
}

.hero-actions {
  animation: home-fade-up 0.5s ease 1.45s both;
}

/* スクロール時のセクション表示：js/script.jsがIntersectionObserverで
   .is-observing → .is-visible を切り替える。JS未実行時は
   .is-observingが付与されず、通常どおり常に表示される（安全側） */
.reveal-section.is-observing {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* アクセシビリティ：視差・アニメーションを減らす設定の利用者には、
   オープニング演出を省略し、HERO・本文をただちに表示する */
@media (prefers-reduced-motion: reduce) {
  .opening-screen {
    display: none;
  }

  .opening-logo,
  .opening-text,
  .hero-media,
  .hero-eyebrow,
  .hero-title,
  .hero-copy,
  .hero-note,
  .hero-actions {
    animation: none;
  }

  .reveal-section.is-observing {
    opacity: 1;
    transform: none;
    transition: none;
  }
}