/* =====================================================================
   訪問看護ステーション「しおかぜ」(架空デモ)
   style.css
   設計方針:
   - ベース白 / メイン=落ち着いたブルーグリーン / アクセント=柔らかいコーラル
   - 本文17px以上・行間広め・コントラストAA以上(高齢のご家族が読む前提)
   - 情報設計優先。装飾は最小限、余白と罫線で整理
   - スマホファースト
   ===================================================================== */

:root {
  /* --- カラー(CSSカスタムプロパティで一元管理) --- */
  --c-primary:        #2A7F8E; /* ブルーグリーン(メイン) */
  --c-primary-dark:   #1F5F6B; /* 見出し・強調(コントラスト確保) */
  --c-primary-light:  #E7F1F3; /* 面の淡い背景 */
  --c-accent:         #E8836B; /* 柔らかいコーラル(装飾用。白文字は載せない) */
  --c-accent-strong:  #B14A2F; /* 濃いコーラル(白文字CTA用・白と5.4:1でAA確保) */
  --c-accent-dark:    #A84630; /* コーラルのテキスト用(白と5.9:1でAA確保) */
  --c-ink:            #23303A; /* 本文テキスト(白背景でコントラスト比 12:1超) */
  --c-ink-soft:       #4A5964; /* 補足テキスト */
  --c-line:           #D6DEE1; /* 罫線 */
  --c-bg:             #FFFFFF;
  --c-bg-soft:        #F6F9FA;
  --c-ok:             #2E7D57; /* 受け入れ「可」ステータス */

  /* --- タイポ / 余白 --- */
  --fs-base: 17px;             /* 本文最小17px */
  --lh-base: 1.85;             /* 行間広め */
  --maxw: 1080px;
  --radius: 12px;
  --shadow: 0 2px 10px rgba(31, 95, 107, .08);
  --shadow-lg: 0 6px 24px rgba(31, 95, 107, .12);
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
               "Yu Gothic", Meiryo, sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}
img { max-width: 100%; display: block; }
a { color: var(--c-primary-dark); }
h1, h2, h3, h4 { line-height: 1.4; color: var(--c-primary-dark); }
h2 { font-size: 1.6rem; margin: 0 0 .3em; }
h3 { font-size: 1.2rem; margin: 0 0 .4em; }
p  { margin: 0 0 1em; }

.container { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }
.section { padding: 56px 0; }
.section--soft { background: var(--c-bg-soft); }
.section__lead { color: var(--c-ink-soft); max-width: 60ch; margin-top: -.2em; }
.eyebrow {
  display: inline-block; font-size: .85rem; font-weight: 700;
  letter-spacing: .08em; color: var(--c-accent-dark); margin-bottom: .4em;
}

/* 用語注釈(第二の読者=家族向け。専門用語に短い注釈) */
.term { border-bottom: 1px dotted var(--c-ink-soft); cursor: help; }

/* スクリーンリーダー用 */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 1000;
  background: var(--c-primary-dark); color: #fff; padding: 10px 16px;
  border-radius: 8px; transition: top .2s;
}
.skip-link:focus { top: 8px; }

:focus-visible { outline: 3px solid var(--c-accent-dark); outline-offset: 2px; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em; justify-content: center;
  font-family: inherit; font-weight: 700; font-size: 1.02rem; text-decoration: none;
  padding: 14px 22px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .06s ease, box-shadow .2s, background .2s;
  min-height: 52px; /* タップターゲット確保 */
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .65; cursor: not-allowed; box-shadow: none; }
.btn:disabled:active { transform: none; }
.btn--primary { background: var(--c-accent-strong); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--c-accent-dark); }
.btn--tel { background: var(--c-primary); color: #fff; }
.btn--tel:hover { background: var(--c-primary-dark); }
.btn--ghost { background: #fff; color: var(--c-primary-dark); border-color: var(--c-primary); }
.btn--ghost:hover { background: var(--c-primary-light); }
.btn--block { width: 100%; }

/* ---------- ヘッダー ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--c-line);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-primary-dark); }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__name { font-weight: 800; font-size: 1.12rem; letter-spacing: .02em; }
.brand__sub { display: block; font-size: .7rem; font-weight: 600; color: var(--c-ink-soft); letter-spacing: .04em; }

.nav { display: none; }
.nav a { text-decoration: none; color: var(--c-ink); font-weight: 600; font-size: .95rem; padding: 8px 10px; border-radius: 8px; }
.nav a:hover { background: var(--c-primary-light); color: var(--c-primary-dark); }
.header__cta { display: none; }

.nav-toggle {
  display: inline-flex; flex-direction: column; gap: 5px; justify-content: center;
  width: 46px; height: 46px; background: #fff; border: 1px solid var(--c-line);
  border-radius: 10px; cursor: pointer;
}
.nav-toggle span { height: 2px; background: var(--c-primary-dark); border-radius: 2px; }

/* モバイルメニュー展開 */
.nav.is-open {
  display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0;
  background: #fff; border-bottom: 1px solid var(--c-line); padding: 8px 20px 16px;
  box-shadow: var(--shadow-lg);
}
.nav.is-open a { padding: 12px 8px; border-bottom: 1px solid var(--c-line); border-radius: 0; }

/* ---------- ヒーロー ---------- */
.hero {
  background:
    linear-gradient(180deg, rgba(231,241,243,.65), rgba(231,241,243,.2)),
    var(--c-bg);
  padding: 48px 0 40px;
  border-bottom: 1px solid var(--c-line);
}
.hero__grid { display: grid; gap: 28px; align-items: center; }
.hero h1 { font-size: clamp(1.9rem, 6vw, 2.9rem); margin: 0 0 .4em; letter-spacing: .01em; }
.hero__sub { font-size: 1.12rem; color: var(--c-ink-soft); max-width: 40ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero__note { margin-top: 16px; font-size: .95rem; color: var(--c-ink-soft); }
.hero__figure {
  aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(135deg, #CDE4E8, #EAD7CF);
  display: grid; place-items: center; box-shadow: var(--shadow-lg);
}
.placeholder-note { color: #1F5F6B; font-weight: 700; text-align: center; padding: 16px; }

/* ---------- 業務情報バー(最重要) ---------- */
.infobar { background: var(--c-primary-dark); color: #fff; padding: 0; }
.infobar .container { padding-block: 26px; }
.infobar__status {
  display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 8px 16px;
  font-weight: 700; margin-bottom: 18px;
}
.status-dot { width: 12px; height: 12px; border-radius: 50%; background: #7BE5A6; box-shadow: 0 0 0 4px rgba(123,229,166,.3); }
.infobar__grid { display: grid; gap: 16px; }
.infobar__cell {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius); padding: 16px 18px;
}
.infobar__cell h3 { color: #EAF6F8; font-size: .82rem; letter-spacing: .06em; margin: 0 0 6px; text-transform: none; opacity: .9; }
.infobar__cell p { margin: 0; color: #fff; font-size: 1.05rem; }
.infobar__contact { grid-column: 1 / -1; }
.contact-lines { display: grid; gap: 10px; }
.contact-line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.contact-line .lbl {
  font-size: .8rem; font-weight: 700; background: #fff; color: var(--c-primary-dark);
  border-radius: 6px; padding: 3px 10px; min-width: 52px; text-align: center;
}
.contact-line .lbl--fax { background: var(--c-accent-strong); color: #fff; } /* FAXを目立たせる(ケアマネのFAX文化) */
.contact-line .num { font-size: 1.7rem; font-weight: 800; letter-spacing: .02em; color: #fff; text-decoration: none; }
.contact-line .num:hover { text-decoration: underline; }
.infobar__hours-badge { display: inline-block; background: var(--c-accent-strong); color: #fff; font-weight: 700; font-size: .8rem; padding: 2px 10px; border-radius: 6px; margin-left: 8px; }

/* 簡易マップ図 */
.mini-map { margin-top: 6px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.9); }

/* ---------- カード共通 ---------- */
.cards { display: grid; gap: 18px; margin-top: 28px; }
.card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow);
}
.card__icon { width: 42px; height: 42px; color: var(--c-primary); margin-bottom: 10px; }
.card ul { margin: .4em 0 0; padding-left: 1.2em; }
.card li { margin-bottom: .3em; }

/* 対応できないことの注記 */
.notice-box {
  margin-top: 26px; background: #FFF6F2; border: 1px solid #F3CDBF;
  border-left: 5px solid var(--c-accent); border-radius: 10px; padding: 18px 20px;
}
.notice-box h3 { color: var(--c-accent-dark); }
.notice-box p { margin-bottom: 0; }

/* ---------- ご利用の流れ ---------- */
.flow-grid { display: grid; gap: 22px; margin-top: 28px; }
.flow-col { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.flow-col--pro { border-top: 5px solid var(--c-primary); }
.flow-col--family { border-top: 5px solid var(--c-accent); }
.flow-col h3 { display: flex; align-items: center; gap: 8px; }
.flow-steps { list-style: none; counter-reset: step; margin: 14px 0 0; padding: 0; }
.flow-steps li { position: relative; padding: 0 0 18px 46px; }
.flow-steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-primary-light); color: var(--c-primary-dark);
  display: grid; place-items: center; font-weight: 800;
}
.flow-col--family .flow-steps li::before { background: #FBE3DC; color: var(--c-accent-dark); }
.flow-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: 4px; width: 2px; background: var(--c-line);
}

/* ---------- 料金テーブル ---------- */
.table-wrap { overflow-x: auto; margin-top: 22px; -webkit-overflow-scrolling: touch; }
table.price {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; min-width: 460px;
}
table.price caption { text-align: left; font-weight: 700; color: var(--c-primary-dark); padding: 12px 4px; }
table.price th, table.price td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--c-line); }
table.price thead th { background: var(--c-primary-light); color: var(--c-primary-dark); }
table.price tbody th { font-weight: 600; }
.price-note { margin-top: 14px; font-size: .95rem; color: var(--c-ink-soft); }

/* ---------- スタッフ ---------- */
.staff-lead { display: grid; gap: 22px; margin-top: 24px; align-items: start; }
.staff-photo { aspect-ratio: 1/1; border-radius: var(--radius); background: linear-gradient(135deg,#CFE6EA,#E9D8D0); display: grid; place-items: center; box-shadow: var(--shadow); }
.staff-message { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.staff-message .sign { text-align: right; font-weight: 700; color: var(--c-primary-dark); margin: 0; }
.staff-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.stat { background: #fff; border: 1px solid var(--c-line); border-radius: 10px; padding: 12px 18px; box-shadow: var(--shadow); }
.stat b { display: block; font-size: 1.5rem; color: var(--c-primary-dark); }
.stat span { font-size: .85rem; color: var(--c-ink-soft); }

/* ---------- 紹介元(ケアマネ・医療機関)専用 ---------- */
.pro-section { background: var(--c-primary-dark); color: #fff; }
.pro-section h2 { color: #fff; }
.pro-section .section__lead { color: #D6ECEF; }
.pro-grid { display: grid; gap: 16px; margin-top: 26px; }
.pro-point {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius); padding: 18px 20px;
}
.pro-point h3 { color: #fff; font-size: 1.05rem; }
.pro-point p { margin: 0; color: #E6F3F5; }
.pro-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------- 採用 ---------- */
.job-grid { display: grid; gap: 18px; margin-top: 26px; }
.job-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.job-card h3 { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.job-card .pay { color: var(--c-accent-dark); font-weight: 800; }
.job-card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 12px 0 0; }
.job-card dt { color: var(--c-ink-soft); font-size: .9rem; }
.job-card dd { margin: 0; }
.job-appeal { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chip { background: var(--c-primary-light); color: var(--c-primary-dark); border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: .95rem; }
.job-note { margin-top: 14px; font-size: .9rem; color: var(--c-ink-soft); }

/* ---------- FAQ ---------- */
.faq { margin-top: 24px; display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 700; color: var(--c-primary-dark);
  display: flex; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; flex: none; width: 28px; height: 28px; background: var(--c-primary-light); color: var(--c-primary-dark); border-radius: 50%; display: grid; place-items: center; font-weight: 800; }
.faq summary::after { content: "＋" / ""; margin-left: auto; color: var(--c-ink-soft); font-weight: 400; }
.faq details[open] summary::after { content: "－" / ""; }
.faq .faq__a { padding: 0 22px 20px 62px; color: var(--c-ink); }

/* ---------- 事業所概要 ---------- */
.overview-table { width: 100%; border-collapse: collapse; margin-top: 22px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.overview-table th, .overview-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.overview-table th { width: 34%; background: var(--c-bg-soft); color: var(--c-primary-dark); font-weight: 700; }

/* ---------- お問い合わせフォーム ---------- */
.contact-grid { display: grid; gap: 26px; margin-top: 26px; }
.contact-call {
  background: var(--c-primary-light); border-radius: var(--radius); padding: 24px; text-align: center;
}
.contact-call .num-big { font-size: 2rem; font-weight: 800; color: var(--c-primary-dark); text-decoration: none; display: inline-block; margin: 6px 0; }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-weight: 700; margin-bottom: 6px; }
.form-field .req { color: var(--c-accent-dark); font-size: .85rem; margin-left: 6px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; font: inherit; padding: 12px 14px; border: 1px solid var(--c-line);
  border-radius: 10px; background: #fff; color: var(--c-ink); min-height: 50px;
}
.form-field textarea { min-height: 130px; resize: vertical; }
.form-hint { font-size: .85rem; color: var(--c-ink-soft); margin-top: 4px; }
.form-status { margin-top: 12px; font-weight: 700; color: var(--c-ok); }

/* ---------- フッター ---------- */
.footer { background: #1C2A31; color: #C7D3D8; padding: 40px 0 28px; margin-top: 8px; }
.footer a { color: #EAF6F8; }
.footer__grid { display: grid; gap: 22px; }
.footer__brand b { color: #fff; font-size: 1.1rem; }
.footer__demo {
  margin-top: 26px; padding: 14px 18px; background: rgba(232,131,107,.15);
  border: 1px solid rgba(232,131,107,.5); border-radius: 10px; color: #FBE3DC; font-weight: 700;
}
.footer__copy { margin-top: 18px; font-size: .85rem; color: #90A2AA; }

/* ---------- スマホ追従 電話CTA ---------- */
.sticky-call {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--c-line); box-shadow: 0 -2px 12px rgba(0,0,0,.12);
}
.sticky-call a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; font-weight: 800; text-decoration: none; min-height: 56px; }
.sticky-call .sc-tel { background: var(--c-primary-dark); color: #fff; }
.sticky-call .sc-form { background: var(--c-accent-strong); color: #fff; }
body { padding-bottom: 64px; } /* 追従バー分の余白 */

/* =====================================================================
   レスポンシブ(スマホファースト → 拡張)
   ===================================================================== */
@media (min-width: 640px) {
  .infobar__grid { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .flow-grid { grid-template-columns: repeat(2, 1fr); }
  .job-grid { grid-template-columns: repeat(2, 1fr); }
  .staff-lead { grid-template-columns: 240px 1fr; }
  .contact-grid { grid-template-columns: 1fr 1.2fr; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.1fr .9fr; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .pro-grid { grid-template-columns: repeat(2, 1fr); }
  .nav { display: flex; align-items: center; gap: 2px; }
  .header__cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .nav.is-open { position: static; flex-direction: row; box-shadow: none; border: 0; padding: 0; }
  /* PCでは追従バー不要 */
  .sticky-call { display: none; }
  body { padding-bottom: 0; }
  .infobar__contact { grid-column: 1 / -1; }
  .contact-lines { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}