/* sections.css — 18のセクション部品それぞれのスタイル。BEM風命名で統一。
   各セクションは自己完結（自前の上下余白・背景）で、どの順序で並べても崩れない設計。
   淡い面にしたいセクションには HTML 側で modifier（例 section--surface）を付ける。
   依存: tokens.css → base.css の順で読み込むこと。 */

/* ============================================================
   セクション共通のガワ
   ============================================================ */
.section { padding-block: var(--section-py); background: var(--color-bg); }
.section--surface { background: var(--color-surface); }
.section--surface-2 { background: var(--color-surface-2); }
.section__inner {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--container-pad);
}
.section__inner--narrow { max-width: var(--container-narrow); }
.section__head { text-align: center; margin-bottom: var(--space-8); }
.section__title { font-size: var(--fs-h2); }
.section__lead { margin-top: var(--space-2); color: var(--color-text-muted); }

/* ============================================================
   1. site-header
   ============================================================ */
.site-header { background: var(--color-bg); border-bottom: 1px solid var(--color-border); position: relative; }
.site-header__inner {
  max-width: var(--container); margin-inline: auto;
  padding: var(--space-3) var(--container-pad);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.site-header__brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; min-width: 0; flex: 1 1 auto; }
.site-header__logo {
  /* 長い社名（医療法人社団〜／社会保険労務士法人〜等）でも 44px トグルと衝突しないよう
     nowrap を外し、狭幅では clamp で縮小＋折返しを許容する */
  font-size: clamp(1rem, 4.2vw, 1.2rem); font-weight: var(--font-weight-bold);
  color: var(--color-primary); line-height: 1.35; overflow-wrap: anywhere;
}
.nav-toggle { flex: 0 0 auto; } /* トグルは縮まない（44px確保） */
.nav__list { display: flex; align-items: center; gap: var(--space-2); }
.nav__link {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  color: var(--color-text); text-decoration: none; font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
}
.nav__link:hover { background: var(--color-surface); color: var(--color-primary); }
.nav__link--cta { background: var(--color-accent); color: var(--color-on-accent); }
.nav__link--cta:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }

/* モバイル開閉ボタン（既定は非表示、狭幅で表示） */
.nav-toggle {
  display: none;
  width: var(--tap-min); height: var(--tap-min);
  padding: 0; background: transparent; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle__bar { display: block; width: 22px; height: 2px; background: var(--color-primary); }

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .site-header__nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--color-bg); border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md); z-index: 40;
  }
  .site-header__nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; padding: var(--space-3); gap: var(--space-1); }
  .nav__link { justify-content: flex-start; }
}

/* JS無効時のフォールバック: 開閉ボタンは効かないので、ナビを常時表示にしてリンクを到達可能にする。
   （@media (scripting: none) 未対応ブラウザでは従来どおりの挙動） */
@media (scripting: none) {
  .nav-toggle { display: none !important; }
  .site-header__nav { display: block !important; position: static; box-shadow: none; border-bottom: 0; }
  .nav__list { flex-wrap: wrap; }
}

/* ============================================================
   2-4. hero（image / split / simple 共通 + それぞれ）
   ============================================================ */
.hero { padding-block: var(--section-py); }
.hero__inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); }
.hero__title { font-size: var(--fs-h1); }
.hero__lead { margin-top: var(--space-4); font-size: 1.05rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* 2. hero-image: 「写真レイヤー」と「暗幕レイヤー」を分離。
   写真は下層 background-image だけを差し替えれば、暗幕(::before)が常に上に残り白文字が読める。
   暗幕は最も明るい写真（真っ白）でも白見出しが AA(4.5:1) を満たす濃さ（0.55〜0.60）に設定。 */
.hero--image {
  position: relative; isolation: isolate; /* ::before の z-index:-1 をこの要素内に閉じ込める */
  color: var(--color-on-primary); text-align: center;
  padding-block: clamp(3.5rem, 10vw, 6.5rem);
  /* ↓ この background-image だけを HTML 側で写真URLに差し替える（暗幕はここに含めない） */
  background-color: var(--color-primary);
  background-image: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  background-size: cover; background-position: center;
}
.hero--image::before { /* 暗幕: 写真の上・文字の下に常時載る独立レイヤー */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.55));
}
.hero--image .hero__inner { position: relative; } /* 文字を暗幕より前面へ */
.hero--image .hero__title { color: var(--color-on-primary); }
.hero--image .hero__title, .hero--image .hero__lead { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.hero--image .hero__actions { justify-content: center; }

/* 3. hero-split: 左テキスト / 右ビジュアル */
.hero--split { background: var(--color-surface); }
.hero--split .hero__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center;
}
.hero--split .hero__media {
  min-height: 260px; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  display: flex; align-items: center; justify-content: center;
}
.hero--split .hero__media svg { width: 55%; height: auto; opacity: 0.9; }
@media (max-width: 820px) { /* 折返し幅をナビ・会社概要・アクセスと 820px に統一 */
  .hero--split .hero__grid { grid-template-columns: 1fr; }
  .hero--split .hero__media { order: -1; min-height: 180px; }
}

/* 4. hero-simple: 淡い面に中央寄せテキストのみ */
.hero--simple { background: var(--color-surface); text-align: center; }
.hero--simple .hero__actions { justify-content: center; }

/* ============================================================
   5. strengths（強み 3-4カード）
   ============================================================ */
.strengths__grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.strengths__card {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-6);
}
.strengths__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill);
  background: var(--color-primary); color: var(--color-on-primary);
  font-weight: var(--font-weight-bold); margin-bottom: var(--space-3);
}
.strengths__title { margin-bottom: var(--space-2); }
.strengths__text { color: var(--color-text-muted); font-size: 1rem; }

/* ============================================================
   6. services（事業内容）
   ============================================================ */
.services__grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.service-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6); text-align: center;
}
.service-card__icon {
  width: 3rem; height: 3rem; margin: 0 auto var(--space-3);
  color: var(--color-accent);
}
.service-card__icon svg { width: 100%; height: 100%; }
.service-card__title { margin-bottom: var(--space-2); }
.service-card__text { color: var(--color-text-muted); font-size: 1rem; }

/* ============================================================
   7. works（実績・事例）
   ============================================================ */
.works__grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.work-card {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); overflow: hidden;
}
.work-card__thumb {
  aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
  color: var(--color-on-primary);
}
.work-card__thumb svg { width: 40%; height: auto; opacity: 0.85; }
.work-card__body { padding: var(--space-5); }
.work-card__cat {
  display: inline-block; font-size: var(--fs-small); font-weight: var(--font-weight-bold);
  color: var(--color-accent); margin-bottom: var(--space-2);
}
.work-card__title { font-size: 1.1rem; }
.work-card__text { margin-top: var(--space-2); color: var(--color-text-muted); font-size: 1rem; }

/* ============================================================
   8. flow（ご依頼の流れ）
   ============================================================ */
.flow__list { max-width: 760px; margin-inline: auto; display: grid; gap: var(--space-4); }
.flow__step { display: flex; gap: var(--space-4); align-items: flex-start; }
.flow__num {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-pill);
  background: var(--color-primary); color: var(--color-on-primary);
  font-weight: var(--font-weight-bold);
}
.flow__body {
  flex: 1 1 auto; background: var(--color-surface);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
}
.flow__title { font-size: 1.1rem; margin-bottom: var(--space-1); }
.flow__text { color: var(--color-text-muted); font-size: 1rem; }

/* ============================================================
   9. price（料金表）
   ============================================================ */
.price__grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  /* align-items は既定の stretch のままにする（各カードが同じ高さに伸び、
     price-card__cta の margin-top:auto が効いてボタンが横一線に揃う） */
}
.price-card {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); text-align: center;
  display: flex; flex-direction: column; gap: var(--space-4);
}
.price-card--featured { border: 2px solid var(--color-primary); box-shadow: var(--shadow-md); position: relative; }
.price-card__badge {
  position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%);
  background: var(--color-primary); color: var(--color-on-primary);
  font-size: var(--fs-small); font-weight: var(--font-weight-bold);
  padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill);
}
.price-card__name { font-size: 1.2rem; }
.price-card__amount { font-size: 1.9rem; font-weight: var(--font-weight-bold); color: var(--color-primary); }
.price-card__amount small { font-size: 0.9rem; font-weight: var(--font-weight-body); color: var(--color-text-muted); }
.price-card__list { text-align: left; display: grid; gap: var(--space-2); }
.price-card__list li { padding-inline-start: 1.5rem; position: relative; color: var(--color-text); }
.price-card__list li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--color-accent);
}
.price-card__cta { margin-top: auto; }
.price__note { margin-top: var(--space-5); text-align: center; color: var(--color-text-muted); font-size: var(--fs-small); }

/* ============================================================
   10. voice（お客様の声）
   ============================================================ */
.voice__grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.voice-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4);
}
.voice-card__quote { margin: 0; font-size: 1rem; }
.voice-card__person { display: flex; align-items: center; gap: var(--space-3); }
.voice-card__avatar {
  flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: var(--radius-pill);
  background: var(--color-primary); color: var(--color-on-primary);
  display: flex; align-items: center; justify-content: center;
}
.voice-card__avatar svg { width: 60%; height: 60%; }
.voice-card__name { font-weight: var(--font-weight-bold); }
.voice-card__meta { color: var(--color-text-muted); font-size: var(--fs-small); }

/* ============================================================
   11. faq（details/summary）
   ============================================================ */
.faq__list { max-width: 760px; margin-inline: auto; display: grid; gap: var(--space-3); }
.faq__item {
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.faq__summary {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap-min); padding: var(--space-4) var(--space-5);
  cursor: pointer; font-weight: var(--font-weight-bold); color: var(--color-primary);
  list-style: none;
}
.faq__summary::-webkit-details-marker { display: none; }
.faq__summary::before {
  content: "Q"; flex: 0 0 auto;
  width: 1.75rem; height: 1.75rem; border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-on-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
}
.faq__summary::after {
  content: ""; margin-inline-start: auto; width: 0.7rem; height: 0.7rem;
  border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg); transition: transform var(--transition);
}
.faq__item[open] .faq__summary::after { transform: rotate(-135deg); }
.faq__answer { padding: 0 var(--space-5) var(--space-5) calc(var(--space-5) + 1.75rem + var(--space-3)); color: var(--color-text-muted); }

/* ============================================================
   12. staff（スタッフ紹介）
   ============================================================ */
.staff__grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.staff-card {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); overflow: hidden; text-align: center;
}
.staff-card__photo {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-surface), var(--color-surface-2));
  color: var(--color-secondary);
}
.staff-card__photo svg { width: 45%; height: auto; }
.staff-card__body { padding: var(--space-5); }
.staff-card__name { font-size: 1.1rem; }
.staff-card__role { color: var(--color-accent); font-size: var(--fs-small); font-weight: var(--font-weight-bold); margin-top: var(--space-1); }
.staff-card__text { margin-top: var(--space-2); color: var(--color-text-muted); font-size: 1rem; }

/* ============================================================
   13. company（会社概要 table + 沿革）
   ============================================================ */
.company__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 820px) { .company__grid { grid-template-columns: 1.2fr 1fr; } }
.company__table { width: 100%; border-collapse: collapse; background: var(--color-bg); }
.company__table th, .company__table td {
  padding: var(--space-4); border-bottom: 1px solid var(--color-border);
  text-align: left; vertical-align: top;
}
.company__table th { width: 8em; color: var(--color-primary); font-weight: var(--font-weight-medium); background: var(--color-surface); }
.company__history-title { margin-bottom: var(--space-4); }
.history { display: grid; gap: var(--space-3); }
.history__item { display: flex; gap: var(--space-4); }
.history__year { flex: 0 0 5em; font-weight: var(--font-weight-bold); color: var(--color-primary); }
.history__text { color: var(--color-text); }

/* ============================================================
   14. news（お知らせ一覧）
   ============================================================ */
.news__list { max-width: 800px; margin-inline: auto; display: grid; gap: var(--space-1); }
.news__item {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-2); border-bottom: 1px solid var(--color-border);
}
.news__date { color: var(--color-text-muted); font-size: 0.95rem; white-space: nowrap; }
.news__cat {
  font-size: var(--fs-small); font-weight: var(--font-weight-bold);
  color: var(--color-primary); background: var(--color-surface);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
}
.news__link { flex: 1 1 240px; color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }
.news__link:hover { color: var(--color-accent); }
.news__more { text-align: center; margin-top: var(--space-6); }

/* ============================================================
   15. cta（問い合わせ誘導帯）
   ============================================================ */
.cta { padding-block: var(--section-py); background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: var(--color-on-primary); }
.cta__inner {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad);
  text-align: center;
}
.cta__title { color: var(--color-on-primary); font-size: var(--fs-h2); }
.cta__text { margin-top: var(--space-3); color: var(--color-on-primary); opacity: 0.92; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); }

/* ============================================================
   16. contact-form（お問い合わせフォーム）
   ============================================================ */
.form { max-width: var(--container-narrow); margin-inline: auto; display: grid; gap: var(--space-5); }
.form__group { display: grid; gap: var(--space-2); }
.form__row { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__note { color: var(--color-text-muted); font-size: var(--fs-small); }
.form__actions { text-align: center; }
.form__message {
  display: none; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  background: var(--color-success-bg); color: var(--color-success-text); font-weight: var(--font-weight-medium);
}
.form__message.is-visible { display: block; }
/* エラー表示（送信先未設定の警告など）。--error は success 定義の後なので色が上書きされる */
.form__message--error { background: var(--color-error-bg); color: var(--color-error-text); }
/* プライバシーポリシー等へのリンク（フォーム注記内） */
.form__policy-link { color: var(--color-accent); }

/* ============================================================
   17. access（地図プレースホルダ + 住所）
   ============================================================ */
.access__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 820px) { .access__grid { grid-template-columns: 1.4fr 1fr; align-items: stretch; } }
.map-placeholder {
  min-height: 300px; border-radius: var(--radius-md); overflow: hidden;
  background: repeating-linear-gradient(45deg, var(--color-surface), var(--color-surface) 14px, var(--color-surface-2) 14px, var(--color-surface-2) 28px);
  border: 1px dashed var(--color-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  color: var(--color-text-muted); text-align: center; padding: var(--space-6);
}
.map-placeholder svg { width: 3rem; height: 3rem; color: var(--color-secondary); }
.access__info { display: grid; gap: var(--space-4); align-content: start; }
.access__list { display: grid; gap: var(--space-3); }
.access__list dt { font-weight: var(--font-weight-bold); color: var(--color-primary); }
.access__list dd { margin: 0; color: var(--color-text); }

/* ============================================================
   18. site-footer
   ============================================================ */
.site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); padding-block: var(--space-8) var(--space-5); }
.site-footer a { color: var(--color-footer-text); }
.site-footer a:hover { color: #FFFFFF; }
.site-footer__inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); }
.site-footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-6); }
.site-footer__brand-name { font-size: 1.1rem; font-weight: var(--font-weight-bold); color: #FFFFFF; margin-bottom: var(--space-2); }
.site-footer__nav ul { display: grid; gap: var(--space-2); }
/* フッターのリンクは非リンク文字（社名・住所）と区別できるよう常時下線を残す */
.site-footer__nav a { text-decoration: underline; text-underline-offset: 2px; }
.site-footer__contact a { font-size: 1.2rem; font-weight: var(--font-weight-bold); text-underline-offset: 2px; }
.site-footer__bottom {
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  text-align: center; color: var(--color-footer-muted); font-size: var(--fs-small);
}
@media (max-width: 640px) { .site-footer__grid { flex-direction: column; } }