/* ============================================================
   介護福祉テンプレート — site.css
   ひだまり会マスター(Claude Design確定版)のデザイントークンを移植。

   マスターは固定幅1440pxのキャンバス出力(全スタイルがインライン属性)
   だったため、見た目を1:1で保ったままレスポンシブに組み直している。
   1440px幅での見えはマスターと同一。1200 / 1024 / 640px で段階的に畳む。

   色・字送り・余白・角丸の数値はマスターからそのまま持ってきた値。
   勝手に変えないこと(デザイン課 CLAUDE.md 参照)。

   建設テンプレとの一番の違いは**角丸と余白の大きさ**。
   介護は「硬さ」を出さないのがマスターの意図なので、半径22〜32pxの
   カードと、本文16〜18pxの大きめの文字を崩さないこと。
   ============================================================ */

:root {
  /* ブランド ─ build.py が法人ごとに上書きできる */
  --accent:      #7FA662;  /* 主色(若草)。CTA・アイコン・タグ */
  --accent-deep: #5F8446;  /* hover と、文字に使うときの濃い版 */
  --accent-soft: #EDF3E6;  /* タグ・アイコン枠・TELボックスの淡い面 */
  --wood:        #8B5E3C;  /* 採用セクションの地色。木の色 */
  --ink:         #3B2E22;  /* 本文・フッターの地色 */
  --cream:       #F7F2E8;  /* ページの地色 */

  /* 面 ─ cream から派生。build.py では触らない */
  --bg:        var(--cream);
  --bg-alt:    #FCF9F2;    /* サービス/法人概要の、わずかに明るい面 */
  --outer:     #EFE7D8;    /* 1440pxの外側(body) */
  --card:      #FFFFFF;

  /* 文字 */
  --text:      var(--ink);
  --text-body: #6B5949;    /* 本文。ink よりやわらかい茶 */
  --text-meta: #8A7663;    /* 日付など */

  /* 罫 */
  --rule:      #E2D8C4;    /* 表・リストの罫 */
  --rule-card: #EADFCB;    /* カードの枠 */
  --rule-btn:  #D8CBB4;    /* アウトラインボタンの枠 */

  /* ヒーローのベール濃度。マスターの heroVeil(0.18)。
     写真が明るいと白カード以外の文字が飛ぶので、上げるのは 0.30 まで */
  --veil: .18;

  --font-head: 'Zen Maru Gothic', 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  --font-body: 'Zen Maru Gothic', 'Noto Sans JP', system-ui, sans-serif;

  /* セクション左右パディング(マスターは全セクション56px) */
  --gutter: clamp(20px, 3.9vw, 56px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--outer);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

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

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

.page {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

/* 画像スロット ─ 画像が無いときはハッチングのプレースホルダーが出る。
   マスターの .ph をそのまま踏襲(建設のグレーではなく、木の色の斜線) */
.slot {
  background-color: #E3D9C6;
  background-image: repeating-linear-gradient(135deg,
    rgba(139, 94, 60, .13) 0 10px, rgba(139, 94, 60, 0) 10px 20px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.slot img { width: 100%; height: 100%; object-fit: cover; }
.slot-label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--wood);
  padding: 8px;
  text-align: center;
}

/* ストック写真を当てているときの注記。実画像があるときだけ build.py が出す */
.slot-note {
  margin: 10px 2px 0;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text-meta);
}

/* ── ヘッダー ─────────────────────────────────── */

.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px var(--gutter);
  /* ヒーロー写真が明るいカットでも白文字が読めるようにする帯 */
  background: linear-gradient(180deg, rgba(59, 46, 34, .38), rgba(59, 46, 34, 0));
}

.brand { display: flex; align-items: center; gap: 14px; }

.brand-mark {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(59, 46, 34, .25);
  flex: none;
}
.brand-mark i {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  display: block;
}

.brand-text {
  display: flex; flex-direction: column; gap: 2px;
  color: #fff;
  text-shadow: 0 1px 8px rgba(59, 46, 34, .5);
}
.brand-type { font-size: 12px; letter-spacing: .18em; }
.brand-name { font-size: 21px; font-weight: 700; letter-spacing: .06em; }

.site-nav { display: flex; align-items: center; gap: 30px; }

.site-nav a {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 8px rgba(59, 46, 34, .6);
}
.site-nav a:hover { color: var(--accent-soft); }

/* ヘッダーのCTAは**電話番号そのもの**。介護は「まず電話」が動線なので、
   フォームではなく番号を最初に見せる(建設テンプレとの明確な違い) */
.nav-tel {
  display: flex; align-items: center; gap: 10px;
  background: var(--cream);
  color: var(--ink) !important;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: none !important;
  box-shadow: 0 4px 16px rgba(59, 46, 34, .28);
}
.nav-tel span { font-size: 13px; font-weight: 500; opacity: .7; }
.nav-tel:hover { background: var(--accent); color: #fff !important; }
.nav-tel:hover span { opacity: .85; }

/* ── 01 ヒーロー ──────────────────────────────── */

/* z-index を .hero の中に閉じ込める。scroll-video-hero の退場ベールを
   ヒーロー内の他の層と正しく重ねるため(下の z-index 一覧を参照) */
.hero {
  position: relative;
  z-index: 0;
  height: 760px;
  background: var(--wood);
  overflow: hidden;
}

/* ビジュアル層(静止写真 or 動画)を入れる枠。
   z-index は付けない ─ 付けると .svh の中の退場ベールが
   .hero-veil / .hero-fade より上に来られなくなる */
.hero-visual { position: absolute; inset: 0; }

/* 静止フォールバック。写真が無ければ木の色のグラデーションになる */
.hero-still {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #A9784F 0%, #8B5E3C 52%, #6B4529 100%);
}
.hero-still.has-image {
  background-size: cover;
  /* マスターの指定。人物の顔がカードに隠れない位置 */
  background-position: center 42%;
}

/* 左のベール ─ 白カードの下に敷いて、写真の明暗によらず文字を読ませる */
.hero-veil {
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(59, 46, 34, calc(var(--veil) + .22)) 0%,
    rgba(59, 46, 34, var(--veil)) 42%,
    rgba(59, 46, 34, 0) 72%);
  pointer-events: none;
}

/* 下端をページの地色へ溶かす。ヒーローとお知らせの境目を作らないため */
.hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  height: 120px;
  background: linear-gradient(180deg, rgba(247, 242, 232, 0), var(--bg));
  pointer-events: none;
}

/* テキスト層 ─ 白カード。
   **ピン区間の間ずっと動画の上に出したままにする**ので、
   退場ベール(z-index:3)より上に置く。詳細は下の「動画ヒーロー」節

   2026-08-07 ゆい氏指示で**一回り小さく・少し透ける**へ変更。
   カードが大きすぎてヒーローの映像を隠していたため、幅・パディング・
   文字サイズを一段落として、地を rgba .82 + backdrop-filter で
   映像が透ける面にした。**不透明(.94)の大判へ戻さないこと。**
   透過は .78 が下限(それ以下だと --text-body の本文がコントラスト4.5を割る)。
   blur は文字の裏で映像の細部が暴れるのを抑えるためで、
   強くすると「透ける」感が消えるので 4px 前後に留める */
.hero-card {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  bottom: 76px;
  /* 448px = パディング内 380px。次の3つが同時に成り立つ最小の幅。
       - CTA2つ(ヒーロー用に一段小さくして 188+148+gap12=348px)が1行に収まる
       - リードの最長行(23文字 = 368px @16px)が折り返さない
       - キャッチが1行10文字で2行に収まる
     **これ以上狭めると、リードの句点だけが次の行へ落ちる**
     (432px = パディング内364px で「…特別養護老人ホームです / 。」を確認)。
     詰めたいときはボタンかリード文のほうを先に見直すこと */
  width: 448px;
  max-width: calc(100% - var(--gutter) * 2);
  background: rgba(255, 253, 248, .82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 24px;
  padding: 30px 34px 28px;
  box-shadow: 0 14px 36px rgba(59, 46, 34, .18);
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 13px; font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

/* ── キャッチとリードの折り返し ────────────────────
   日本語は既定だとどこでも折り返せるので、放っておくと
   「訪問看護ステーシ / ョン。」「サポ / ートします。」と語の途中で折れる。
   `keep-all` で既定の折り返しを止め、build.py が句読点の後ろに挿した
   <wbr> の位置でだけ折るようにしてある(tools/build.py の phrase_html)。
   `break-word` は最後の逃げ道 ─ 1文が幅に入りきらないとき
   (スマホの狭いカードなど)だけ従来どおり任意の位置で折れて、溢れない。
   **この2行を消すと語中改行に戻る**(2026-08-07 ゆい氏指摘) */
.hero h1,
.hero-lead {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* **スマホでは既定の折り返しに戻す。**
   幅480px以下だとカードの本文域が287px前後しかなく、1文がまるごと
   入りきらないことのほうが多い。そうなると逃げ道の break-word が働き、
   「…訪問看護ステーション / 。」と**句点だけが次の行に落ちる**。
   語中改行より読みにくいので、狭い幅では keep-all を掛けない
   (brief の配列で入れた改行は <br> なので、ここでもそのまま効く) */
@media (max-width: 480px) {
  .hero h1,
  .hero-lead {
    word-break: normal;
    overflow-wrap: normal;
  }
}

.hero h1 {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-size: 31px;
  line-height: 1.42;
  font-weight: 700;
  letter-spacing: .02em;
  text-wrap: pretty;
  /* 1行10文字ちょうど。マスターの 408px(=10.2em @40px)を 31px へ
     引き直すと 316px だが、字送り(.02em)を含めた実寸が 316.2px あって
     **10文字目が入りきらず「その人らしい毎日を / 、ここで。」と
     句読点だけが次行に落ちた**ので少し足してある。
     パディング内(380px)いっぱいにはしない ─ そこまで広げると
     11文字目が1行目に乗り、読点の後ろで折れなくなる */
  width: 324px;
  max-width: 100%;
}

.hero-lead {
  margin: 0 0 22px;
  /* **介護の本文は16px が下限**(読み手の年齢層に合わせた意図的な指定)。
     カードをこれ以上詰めたくなっても、ここを15pxへ落とさないこと */
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-body);
  text-wrap: pretty;
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ヒーローのCTAだけ一段小さくする。白カードを小さくしたぶん、
   本文と同じ大きさのボタンだとカードの中でボタンばかりが目立つ。
   **2つで348px**(172+164+gap12)。カードのパディング内364pxに収まる値なので、
   文言を長くするならボタンかカード幅のどちらかを先に見直すこと */
.hero-actions .btn { font-size: 16px; }
.hero-actions .btn span { font-size: 14px; }
.hero-actions .btn-primary { padding: 15px 26px; }
.hero-actions .btn-outline { padding: 13px 24px; }

.hero-scroll {
  position: absolute;
  z-index: 4;
  right: var(--gutter);
  bottom: 88px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.hero-scroll span {
  font-size: 13px; letter-spacing: .2em;
  color: #fff;
  writing-mode: vertical-rl;
  text-shadow: 0 1px 8px rgba(59, 46, 34, .6);
}
.hero-scroll::after {
  content: "";
  width: 1px; height: 56px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
}

/* ── 動画ヒーロー(scroll-video-hero)の介護版チューニング ──────
   モジュール既定は建設(濃紺)向けなので、色まわりだけ上書きする。
   挙動(ピン・スクラブ・降格時の自動再生 ─ 1回だけ再生して静止・ループなし)はモジュールのまま。

   **セレクタの頭に .page を足しているのは詳細度のため。**
   template.html は site.css → hero.css の順で読み込むので、
   同じ詳細度で書くと後勝ちでモジュール側(建設向けの濃紺)が残る。
   ここを素の .svh-overlay / .hero.svh-exiting で書かないこと。 */

/* オーバーレイはテンプレート側の .hero-veil / .hero-fade が担当するので消す。
   モジュール既定の濃紺グラデーションが乗ると木の色が沈む */
.page .svh-overlay { background: none; }

/* 環境映像モード(降格の受け皿。「スマホ かつ (GSAP無し / deviceMemory<3)」か抽出失敗。
   **「モバイルだから」落ちるのではない**。PC幅は低メモリでも落ちない。
   1回だけ再生して静止し、ループはしない)だけは、
   上部が明るいカットでロゴが読めなくなるのでスクリムを戻す */
.page .svh.is-ambient .svh-overlay {
  background:
    linear-gradient(180deg, rgba(59, 46, 34, .52) 0%, rgba(59, 46, 34, 0) 30%),
    linear-gradient(0deg, rgba(59, 46, 34, .45) 0%, rgba(59, 46, 34, 0) 58%);
}

/* ヒーロー内の重なりは下から:
     .hero-visual(.svh) → .hero-veil(1) → .hero-fade(2)
     → .hero-card / .hero-scroll(4) → .site-header(5)
   退場ベール(かつての z-index:3)は 2026-08-07 に廃止した
   (modules/scroll-video-hero/hero.css の該当節)。 */

/* **白カードは退場区間でも一切薄くしない。** かつてここで
   `opacity: calc(1 - var(--svh-exit) * .45)` を掛けていたが、2026-08-07 に
   モジュール側の指定ごと廃止した(理由は modules/scroll-video-hero/hero.css)。
   **opacity を書き戻さないこと。** SCROLL の合図だけは退場と同時に引く */
.page .hero.svh-exiting .hero-scroll { opacity: calc(1 - var(--svh-exit, 0) * 1.6); }

@media (prefers-reduced-motion: reduce) {
  .page .hero.svh-exiting .hero-card,
  .page .hero.svh-exiting .hero-scroll { opacity: 1; transform: none; }
}

/* ── ボタン ───────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}
.btn span { font-size: 15px; }

.btn-primary {
  background: var(--accent);
  color: #fff !important;
  padding: 17px 30px;
  box-shadow: 0 8px 20px rgba(95, 132, 70, .28);
}
.btn-primary:hover { background: var(--accent-deep); }

.btn-outline {
  border: 2px solid var(--rule-btn);
  color: var(--ink) !important;
  padding: 15px 28px;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent-deep) !important; }

/* 採用セクションの濃い地色の上に置くボタン */
.btn-on-wood {
  background: var(--cream);
  color: var(--ink) !important;
  font-size: 18px;
  padding: 18px 32px;
}
.btn-on-wood:hover { background: var(--accent); color: #fff !important; }

/* ── セクション共通 ────────────────────────────── */

.section { padding: 90px var(--gutter) 96px; background: var(--bg); }
.section-alt { background: var(--bg-alt); }

.eyebrow {
  display: block;
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--accent-deep);
  font-weight: 700;
  margin-bottom: 10px;
}

.section-head h2 {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .05em;
}
.section-head p {
  margin: 0;
  font-size: 17px;
  line-height: 1.9;
  color: var(--text-body);
}

.section-head-center { text-align: center; margin-bottom: 52px; }
.section-head-center h2 { margin-bottom: 14px; }

.link-more {
  font-size: 16px;
  font-weight: 700;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
  white-space: nowrap;
  color: var(--ink);
}
.link-more:hover { color: var(--accent-deep); }

/* ── 02 お知らせ ──────────────────────────────── */

.news { padding: 74px var(--gutter) 78px; background: var(--bg); }
.news-body { display: flex; gap: 64px; align-items: flex-start; }

.news-head { width: 250px; flex: none; }
.news-head h2 {
  margin: 0 0 22px;
  font-family: var(--font-head);
  font-size: 32px; font-weight: 700; letter-spacing: .04em;
}
.news-head .link-more { font-size: 15px; padding-bottom: 3px; }

.news-list {
  flex: 1;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule);
}

.news-item {
  display: flex; align-items: center; gap: 26px;
  padding: 24px 8px;
  border-bottom: 1px solid var(--rule);
  color: var(--text);
}
.news-item:hover { background: var(--bg-alt); color: var(--accent-deep); }

.news-date {
  font-size: 15px;
  color: var(--text-meta);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  white-space: nowrap;
}

.news-tag {
  font-size: 13px; font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  flex: none;
  white-space: nowrap;
  color: var(--accent-deep);
  background: var(--accent-soft);
}
/* 採用のお知らせだけ木の色。求人が並んでも「お知らせ」に埋もれないため */
.news-tag.is-recruit { color: var(--accent-deep); background: var(--accent-soft); }

.news-title { font-size: 18px; line-height: 1.6; }

/* ── 03 サービス案内 ──────────────────────────── */

.services { padding: 86px var(--gutter) 96px; background: var(--bg-alt); }

.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.service-card {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule-card);
  border-radius: 22px;
  overflow: hidden;
  color: var(--text);
  box-shadow: 0 2px 10px rgba(139, 94, 60, .05);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.service-card:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 28px rgba(139, 94, 60, .14);
  transform: translateY(-3px);
  color: var(--text);
}

/* 写真帯。マスター(ひだまり会)はアイコンだけのカードだったが、
   4枚が文字とアイコンだけだと硬く見えるので写真を足した意図的な差分。
   高さ150pxはカード幅(1440pxで約308px)に対して 16:9 より浅い。
   浅くしているのは、下の本文3行ぶんの高さを圧迫しないため */
.service-media { position: relative; }
.service-media .slot { height: 150px; }

/* アイコンは写真の左下に重ねる。**写真があっても消さない** ─
   4枚の写真はどれも「高齢者と穏やかな室内」で似た絵面になるため、
   どのサービスかを一目で区別する索引としてアイコンが要る */
.service-icon {
  position: absolute;
  left: 20px; bottom: -22px;
  width: 62px; height: 62px;
  border-radius: 20px;
  background: var(--accent-soft);
  border: 3px solid var(--card);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.service-icon svg { stroke: var(--accent-deep); }

.service-body {
  display: flex; flex-direction: column; gap: 14px;
  /* 上のパディングはアイコンのはみ出し(22px)+余白 */
  padding: 50px 26px 28px;
  flex: 1;
}

.service-card h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 21px; font-weight: 700; letter-spacing: .03em;
}
.service-card p {
  margin: 0;
  font-size: 15px; line-height: 1.9;
  color: var(--text-body);
  flex: 1;
}
.service-more { font-size: 15px; font-weight: 700; color: var(--accent-deep); }

/* セクション末尾にまとめて出す注記(サービス4枚ぶん) */
.section-note { text-align: center; margin-top: 22px; }

/* ── 04 暮らし ───────────────────────────────── */

.life { padding: 90px var(--gutter) 96px; background: var(--bg); }

.life-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
}

.life-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.life-card {
  background: var(--card);
  border: 1px solid var(--rule-card);
  border-radius: 24px;
  overflow: hidden;
}
.life-card .slot { height: 240px; }

.life-body { padding: 28px 28px 32px; }
.life-label {
  display: block;
  font-size: 13px; font-weight: 700;
  color: var(--accent-deep);
  letter-spacing: .14em;
  margin-bottom: 8px;
}
.life-card h3 {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-size: 23px; font-weight: 700; letter-spacing: .03em;
}
.life-card p {
  margin: 0;
  font-size: 16px; line-height: 2;
  color: var(--text-body);
  text-wrap: pretty;
}
.life-body .slot-note { margin: 12px 0 0; }

/* ── 05 採用 ─────────────────────────────────── */

/* 地色は **法人ごとのアクセントから作った濃い版**(--recruit)。build.py が
   accent の色相を保ったまま明度34%まで落として生成する。以前は全社 --wood(茶)
   固定で、どの法人も同じ地味な帯になっていた。介護の採用は「元気に働けそうか」が
   応募の決め手なので、ここは先方の色で出す。 */
.recruit {
  padding: 92px var(--gutter) 96px;
  background: var(--recruit);
  color: var(--cream);
}
.recruit-body { display: flex; gap: 64px; align-items: flex-start; }

.recruit-copy { width: 420px; flex: none; }
.recruit-copy .eyebrow { color: var(--recruit-tint); }
.recruit-copy h2 {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-size: 34px; font-weight: 700;
  letter-spacing: .05em; line-height: 1.5;
}
.recruit-copy > p {
  margin: 0 0 30px;
  font-size: 17px; line-height: 2;
  color: #EFE0CC;
  text-wrap: pretty;
}
.recruit-actions {
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.recruit-note { font-size: 14px; color: var(--recruit-tint); }

/* 採用の右カラム。大きい写真 → 数字タイル の順に積む */
.recruit-main {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; gap: 24px;
}

/* 採用の顔になる写真。1440pxで約900×340（横長 2.65:1）。
   **ここは縮めない。** 介護の採用は「どんな人が働いている場所か」が
   応募の決め手なので、数字より先に人の写真が目に入る大きさが要る。
   職員が写っているカットを選ぶこと（利用者だけだと採用の絵にならない） */
.recruit-photo {
  height: 340px;
  border-radius: 22px;
  overflow: hidden;
}
/* 濃い地色の上に敷くので、プレースホルダーも暗い側に寄せる */
.recruit-photo.slot {
  background-color: var(--recruit-soft);
  background-image: repeating-linear-gradient(135deg,
    rgba(247, 242, 232, .10) 0 10px, rgba(247, 242, 232, 0) 10px 20px);
}
.recruit-photo .slot-label { color: rgba(247, 242, 232, .62); }
.recruit-main .slot-note { margin: 10px 2px 0; color: var(--recruit-tint); }

/* 数字タイル。2pxの隙間から下地の明るい色が覗いて罫線に見える作り。
   件数を6件から変えると3列2段が崩れるので、build.py 側で6件固定にしている */
.recruit-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(247, 242, 232, .22);
  border-radius: 22px;
  overflow: hidden;
}
.recruit-stat { background: var(--recruit); padding: 34px 30px 30px; }
.recruit-stat small {
  display: block;
  font-size: 14px; color: var(--recruit-tint);
  margin-bottom: 12px;
}
.recruit-stat b {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-head);
  font-size: 58px; font-weight: 900; line-height: 1;
  letter-spacing: .02em;
}
.recruit-stat b span { font-size: 18px; font-weight: 700; }

/* ── 06 法人概要・アクセス ────────────────────── */

.about { padding: 90px var(--gutter) 96px; background: var(--bg-alt); }
.about-body { display: flex; gap: 56px; align-items: flex-start; }
.about-main { flex: 1; min-width: 0; }
.about-main h2 { margin-bottom: 28px; }
.about-side { width: 560px; flex: none; }

.company-table {
  margin: 0;
  display: grid;
  grid-template-columns: 150px 1fr;
  border-top: 1px solid var(--rule);
}
.company-table dt {
  padding: 18px 0;
  font-size: 16px; font-weight: 700;
  border-bottom: 1px solid var(--rule);
}
.company-table dd {
  margin: 0;
  padding: 18px 0;
  font-size: 16px; line-height: 1.8;
  color: var(--text-body);
  border-bottom: 1px solid var(--rule);
}

.map-slot {
  height: 340px;
  border-radius: 22px;
  border: 1px solid var(--rule-card);
}

.access-box {
  margin-top: 20px;
  background: var(--card);
  border: 1px solid var(--rule-card);
  border-radius: 20px;
  padding: 26px 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.access-box h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 18px; font-weight: 700;
}
.access-box p {
  margin: 0;
  font-size: 16px; line-height: 1.95;
  color: var(--text-body);
}

/* ── 07 お問い合わせ ──────────────────────────── */

.contact { padding: 88px var(--gutter) 92px; background: var(--bg); }

.contact-box {
  background: var(--card);
  border: 1px solid var(--rule-card);
  border-radius: 32px;
  padding: 56px 60px;
  box-shadow: 0 12px 34px rgba(139, 94, 60, .08);
  display: flex; gap: 56px; align-items: center;
}

.contact-copy { flex: 1; min-width: 0; }
.contact-copy h2 {
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-size: 32px; font-weight: 700;
  letter-spacing: .04em; line-height: 1.5;
}
.contact-copy p {
  margin: 0;
  font-size: 17px; line-height: 2;
  color: var(--text-body);
  text-wrap: pretty;
}

.contact-actions {
  width: 600px; flex: none;
  display: flex; flex-direction: column; gap: 18px;
}

/* 電話番号が主役。介護は「まず電話」が動線なので、フォームより先に、
   ページ内で一番大きい文字(56px)で置く。ここを縮めないこと */
.tel-box {
  background: var(--accent-soft);
  border-radius: 24px;
  padding: 30px 34px;
}
.tel-label {
  display: block;
  font-size: 16px; font-weight: 700;
  color: var(--accent-deep);
  margin-bottom: 10px;
}
.tel-link {
  display: flex; align-items: center; gap: 16px;
  color: var(--ink) !important;
}
.tel-link:hover { color: var(--accent-deep) !important; }
.tel-link svg { stroke: var(--accent-deep); flex: none; }
.tel-number {
  font-family: var(--font-head);
  font-size: 56px; font-weight: 900;
  letter-spacing: .02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tel-hours { margin-top: 12px; font-size: 16px; color: var(--text-body); }

.contact-buttons { display: flex; gap: 14px; }
.contact-buttons .btn {
  flex: 1;
  justify-content: center;
  font-size: 18px;
}
.contact-buttons .btn-primary { padding: 20px; box-shadow: none; }
.contact-buttons .btn-outline { padding: 18px; }

/* ── フッター ─────────────────────────────────── */

.site-footer {
  background: var(--ink);
  color: #EFE7D8;
  padding: 56px var(--gutter) 34px;
}

.footer-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 48px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(239, 231, 216, .18);
}

.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-brand-row { display: flex; align-items: center; gap: 14px; }
.footer-brand .brand-mark { width: 44px; height: 44px; box-shadow: none; }
.footer-brand .brand-mark i { width: 19px; height: 19px; }
.footer-brand-text { display: flex; flex-direction: column; gap: 2px; }
.footer-brand-text .brand-type { opacity: .75; }
.footer-brand-text .brand-name { font-size: 20px; }
.footer-address {
  margin: 0;
  font-size: 15px; line-height: 1.9;
  color: #C9BCAA;
}

.footer-cols { display: flex; gap: 56px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col-head { font-size: 13px; letter-spacing: .16em; color: #9C8B78; }
.footer-col a { color: #EFE7D8; font-size: 15px; }
.footer-col a:hover { color: #fff; }

.footer-bottom {
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-note {
  font-size: 14px; color: #C9BCAA;
  background: rgba(239, 231, 216, .08);
  padding: 10px 18px;
  border-radius: 999px;
}
.footer-copy { font-size: 13px; color: #9C8B78; }

/* ストック写真のクレジット。Pexels API の利用条件で
   撮影者名とPexelsへのリンクの掲示が必要なため、写真を使う号だけ出る */
.footer-credit { font-size: 11px; letter-spacing: .04em; color: #9C8B78; }
.footer-credit a { color: #C9BCAA !important; text-decoration: underline; }
.footer-credit a:hover { color: #fff !important; }

/* ============================================================
   レスポンシブ
   マスターは1440px固定だったので、ここから下は新規に起こした分。
   建設テンプレと同じ 1200 / 1024 / 640 の3段。
   ============================================================ */

/* ── 〜1200px: 横並びの余白を締める ─────────────── */
@media (max-width: 1200px) {
  .site-nav { gap: 22px; }
  .news-body { gap: 40px; }
  .news-head { width: 210px; }
  .service-grid { gap: 18px; }
  .service-body { padding: 46px 20px 24px; }
  .service-media .slot { height: 128px; }
  .life-grid { gap: 20px; }
  .recruit-body { gap: 40px; }
  .recruit-copy { width: 360px; }
  .recruit-stat { padding: 28px 22px 24px; }
  .recruit-stat b { font-size: 46px; }
  .recruit-photo { height: 280px; }
  .about-body { gap: 36px; }
  .about-side { width: 420px; }
  .contact-box { padding: 48px 44px; gap: 36px; }
  .contact-actions { width: 460px; }
  .tel-number { font-size: 44px; }
}

/* ── 〜1024px: 2カラム / 縦積みへ ────────────────── */
@media (max-width: 1024px) {
  /* ナビのリンクは畳んで、電話CTAだけ残す。
     介護は電話が動線なので、最後まで消さない項目はここ */
  .site-nav a:not(.nav-tel) { display: none; }

  .hero { height: 640px; }
  .hero-card { bottom: 56px; padding: 34px 34px 32px; }
  .hero h1 { font-size: 32px; width: auto; }
  .hero-lead { font-size: 16px; margin-bottom: 24px; }

  .news-body { flex-direction: column; gap: 24px; }
  .news-head { width: auto; display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
  .news-head h2 { margin: 0; }
  .news-list { width: 100%; }

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

  .life-grid { grid-template-columns: 1fr 1fr; }

  .recruit-body { flex-direction: column; gap: 44px; }
  .recruit-copy { width: 100%; }
  .recruit-main { width: 100%; }
  .recruit-photo { height: 320px; }

  .about-body { flex-direction: column; gap: 40px; }
  .about-side { width: 100%; }

  .contact-box { flex-direction: column; align-items: stretch; gap: 32px; }
  .contact-actions { width: 100%; }

  .footer-top { flex-direction: column; gap: 32px; }
}

/* ── 〜640px: モバイル ─────────────────────────── */
@media (max-width: 640px) {
  .section, .news, .services, .life, .recruit, .about, .contact {
    padding-top: 64px; padding-bottom: 68px;
  }
  .section-head h2, .recruit-copy h2 { font-size: 26px; }
  .section-head p { font-size: 16px; }
  .section-head-center { margin-bottom: 36px; }

  .site-header { padding: 14px var(--gutter); }
  .brand-mark { width: 38px; height: 38px; }
  .brand-mark i { width: 16px; height: 16px; }
  .brand-type { font-size: 10px; }
  .brand-name { font-size: 17px; }
  .nav-tel { padding: 9px 14px; font-size: 14px; gap: 6px; }
  .nav-tel span { display: none; }

  /* ヒーロー: ビジュアルは上、カードは下に積む(建設テンプレと同じ考え方)。
     写真の上にカードを重ねたままだと、カードが画面をほぼ埋めてしまう */
  .hero { height: auto; padding-top: 300px; padding-bottom: 32px; }
  .hero-visual { inset: 0 0 auto 0; height: 340px; }
  .hero-veil { inset: 0 0 auto 0; height: 340px; }
  .hero-fade { height: 80px; top: 260px; bottom: auto; }
  .hero-card {
    position: static;
    width: auto;
    max-width: none;
    margin: 0 var(--gutter);
    padding: 28px 24px 26px;
  }
  .hero h1 { font-size: 26px; }
  .hero-badge { font-size: 13px; margin-bottom: 16px; }
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
  .hero-scroll { display: none; }

  .news-head { gap: 12px; }
  .news-head h2 { font-size: 26px; }
  .news-item {
    flex-wrap: wrap; gap: 10px 14px;
    padding: 18px 4px;
  }
  .news-title { flex: 1 1 100%; font-size: 16px; }

  .service-grid { grid-template-columns: 1fr; }
  .service-body { padding: 48px 24px 26px; }
  .service-media .slot { height: 180px; }

  .life-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
  .life-grid { grid-template-columns: 1fr; gap: 20px; }
  .life-card .slot { height: 200px; }
  .life-body { padding: 24px 24px 28px; }
  .life-card h3 { font-size: 20px; }
  .life-card p { font-size: 15px; }

  /* 数字は2列。3列のままだと58pxの数字が入らず折り返す */
  .recruit-stats { grid-template-columns: 1fr 1fr; border-radius: 18px; }
  .recruit-stat { padding: 22px 18px 20px; }
  .recruit-stat small { font-size: 13px; margin-bottom: 8px; }
  .recruit-stat b { font-size: 36px; }
  .recruit-stat b span { font-size: 14px; }
  .recruit-actions .btn { width: 100%; justify-content: center; }
  .recruit-main { gap: 18px; }
  .recruit-photo { height: 200px; border-radius: 18px; }

  .company-table { grid-template-columns: 1fr; }
  .company-table dt { padding: 14px 0 0; border-bottom: 0; }
  .company-table dd { padding: 6px 0 14px; font-size: 15px; }
  .map-slot { height: 240px; }

  .contact-box { padding: 32px 24px; border-radius: 24px; }
  .contact-copy h2 { font-size: 24px; }
  .tel-box { padding: 22px 20px; border-radius: 18px; }
  .tel-number { font-size: 34px; }
  .tel-link { gap: 10px; }
  .tel-link svg { width: 28px; height: 28px; }
  .tel-hours { font-size: 14px; }
  .contact-buttons { flex-direction: column; }

  .footer-cols { gap: 28px; flex-wrap: wrap; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-note { font-size: 13px; }
}

/* ── モーション配慮 ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── 〜768px: 動画ヒーローは全画面(映像がビューポートを埋める) ─────────
   **640px ではなく 768px。** hero.js は `max-width: 768px` をモバイル
   (軽い抽出予算 + 画面に映る範囲だけの切り出し)と判定する。CSS 側を 640px にしていると
   641〜768px(iPad縦・iPhone横持ち)だけ別のレイアウトになる
   (2026-08-06 検品るんの指摘)。**hero.js の判定とこの値は必ず揃える。**

   ヒーローを 100svh にして .hero-visual を全面に敷くのはモジュール側
   modules/scroll-video-hero/hero.css が持つ。ここはテンプレート固有の層
   (カードの位置・ベール・フェード)だけを合わせる。
   静止写真ヒーロー(hero_type: photo)には `:has(.svh)` で当たらない。

   経緯(逆戻りさせないために3段階とも残す):
   1. 当初は固定px高の縦長枠に cover。「圧縮されてすごく見づらい」(2026-08-06)
   2. 素材比率の帯 + カードの縦積みへ。比率は守れたが、100svh のピン中ヒーローに
      対して中身が 500px しかなく、**カードの下に地色が大きく余った**(同日)
   3. 100svh 全面 cover へ。地色は消えたが、**16:9 を 375×812 へ cover すると
      拡大率が 3.85倍**になり、素材1280pxのうち中央332px(26%)しか映らない。
      2026-08-07 ゆい氏指摘「拡大しすぎてて、なんかよくわからない。屋根しか
      映ってないし、スクロールするとちょうど人のところが白いカードで隠れる」

   **現行(4)は「映像パネル + 下端固定カード」。**
   映像の枠を 56svh に抑えて拡大率を 2.0倍まで落とし(素材の 50% が映る)、
   カードは画面下端に固定して、パネルの下に地色が残らない高さに詰めた。
   要は 2. の帯だが、**余った地色をカードで埋めきる**のが違い。

   **100svh 全面 cover へ戻さないこと。** 縦を全部入れようとすると拡大率が
   跳ね上がり、被写体(建物・人)が枠から外れて何の映像か分からなくなる。
   逆にパネルを縮めすぎるとカードだけの画面になるので、
   **56svh とカードの高さはセットで動かす**こと。 */
@media (max-width: 768px) {
  /* 640px 節の「ビジュアルは上・カードは下」の考え方は残しつつ、
     カードを絶対配置に戻してヒーロー内(100svh)へ収める */
  /* **地色はページの地色(クリーム)にする。** .hero の既定は木の色(--wood)で、
     全面 cover の頃は映像で完全に隠れていたので見えなかった。パネル化で
     下に地が出るようになり、カードの左右に濃い茶の帯が覗いてしまう */
  .hero:has(.svh) { padding-top: 0; padding-bottom: 0; background: var(--bg); }

  /* 映像パネル。**ここの高さが拡大率を決める**(枠が縦長なほど拡大する)。
     56svh = 375×455 → 拡大率2.0倍、素材1280pxのうち640px(50%)が映る。
     canvas の cover は hero.js の drawSource() が枠の寸法から計算し、
     フレームの切り出し幅も cropRectFor() が枠の縦横比から出すので、
     ここを変えれば抽出解像度もついてくる(JS 側の変更は要らない) */
  .hero:has(.svh) .hero-visual { inset: 0 0 auto 0; height: 56svh; }
  /* **ベールとフェードは必ず映像パネルに追随させる。**
     ここが全面(inset:0)のまま残ると、パネルの下の地色にまで
     こげ茶のベールが乗ってカードの背後が濁る */
  .hero:has(.svh) .hero-veil { inset: 0 0 auto 0; height: 56svh; aspect-ratio: auto; }
  /* パネルの下端をカードの地へ溶かす。カードの上端(56svh の少し下)に
     重なる位置に置くので、映像とカードの境目が線にならない */
  .hero:has(.svh) .hero-fade {
    display: block;
    top: calc(56svh - 104px); bottom: auto;
    height: 104px;
  }
  /* カードは画面下端に固定。**上端が映像パネルの下端に少し重なる高さ**に
     収まるよう、PCより一段詰めてある(下の h1 / lead / btn の指定) */
  .hero:has(.svh) .hero-card {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 20px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 22px 20px 20px;
  }
  .hero:has(.svh) .hero-badge { font-size: 12px; padding: 5px 12px; margin-bottom: 12px; }
  .hero:has(.svh) h1 { font-size: 25px; line-height: 1.4; margin-bottom: 10px; width: auto; }
  .hero:has(.svh) .hero-lead { font-size: 16px; line-height: 1.75; margin-bottom: 16px; }
  .hero:has(.svh) .hero-actions { gap: 10px; }
  .hero:has(.svh) .hero-actions .btn-primary { padding: 13px 24px; }
  .hero:has(.svh) .hero-actions .btn-outline { padding: 11px 22px; }
  .hero:has(.svh) .hero-scroll { display: none; }
}

/* ── 横持ちの短いビューポート(高さ480px以下) ─────────────────
   建設テンプレと同じ症状への対処(construction/site.css の同名節も参照)。
   スマホ横持ち(640×360 など)ではヒーローが 100svh = 360px しかないのに
   白カードは 371px あり、`bottom` 基準の絶対配置なので**足りないぶんが
   上へ伸びてヘッダーを突き抜け**、キャッチがロゴに重なって読めなくなる。

   縦(360×640)は従来どおり。**高さでだけ分岐する**ので、
   マスターの縦持ち・PCの値には一切かからない。

   **介護の本文16〜18px は守る。**(読み手の年齢層に合わせた意図的な指定)
   横持ちで詰めるのは行間と余白、それとボタンの並びだけで、リード文は16pxに
   留めている。字を小さくして畳むのではなく、縦のリズムを詰めて収める。 */
@media (max-width: 768px) and (max-height: 480px) {
  /* ヘッダーも横持ちぶん詰める。ここが薄くなるぶんカードに高さを回せる */
  .site-header { padding-top: 10px; padding-bottom: 10px; }

  /* **横持ちは全面 cover に戻す。** 768px節のパネル(56svh)は
     「16:9 を縦長ビューポートへ cover すると拡大しすぎる」ための逃げなので、
     画面のほうが 16:9 に近い横持ちでは要らない(むしろ 56svh = 210px しか
     残らず、パネルの下端が半透明のカードを透かして横線に見える)。
     ベールとフェードもここで全面へ戻す ─ パネル用の値が残ると、
     映像だけ全面・ベールだけ上部という 2026-08-06 の症状が横持ちで再発する */
  .hero:has(.svh) .hero-visual { inset: 0; height: auto; }
  .hero:has(.svh) .hero-veil { inset: 0; height: auto; }

  .hero:has(.svh) .hero-card {
    bottom: 16px;
    padding: 14px 22px 16px;
    /* ヘッダー(最大58px)+ 余白12px + 下オフセット16px を空ける */
    max-height: calc(100svh - 86px);
    overflow-y: auto;
  }
  .hero:has(.svh) .hero-badge { margin-bottom: 10px; padding: 5px 14px; }
  .hero:has(.svh) h1 { font-size: 22px; line-height: 1.36; margin-bottom: 10px; }
  .hero:has(.svh) .hero-lead { font-size: 16px; line-height: 1.6; margin-bottom: 14px; }
  /* 640px 節の `flex: 1 1 100%`(縦積み)を打ち消す */
  .hero:has(.svh) .hero-actions { flex-wrap: nowrap; gap: 10px; }
  .hero:has(.svh) .hero-actions .btn {
    flex: 1 1 0;
    height: 46px;
    padding: 0 14px;
  }
  /* 下端のフェードもカード側(全面 cover 前提)へ戻す。
     カードとほぼ同じ高さになるので薄くする */
  .hero:has(.svh) .hero-fade { top: auto; bottom: 0; height: 80px; }
}