/* ===================================================
   ReLIFE 共通スタイルシート
   =================================================== */

/* --- CSS変数 --- */
/* 2026-09-05: ライム×白基調へ全面変更（color-compare.html の案A を軸にした「案1」）。
   旧配色は緑がオリーブ寄りに沈んでいただけでなく、背景・枠線・本文まで黄み／茶みに振れており
   （page-bg #f4efe3・body-bg #e7e2d6・card-border #ece5d4・text-body #55554c）、
   紙が日焼けしたような色調になっていた。緑だけ替えても地色が残ると印象が変わらないため、
   地色と文字からも黄みを抜いている。旧値は下のコメントに残す。 */
:root {
  --green-dark:   #46800a;   /* 旧 #4f6a2c */
  --green:        #6dc010;   /* 旧 #4d762b */
  --green-mid:    #5aa80d;   /* 旧 #6c8c3c */
  --green-btn:    #457e07;   /* 旧 #46800a　白文字のコントラスト確保のため green-dark より暗く */
  --green-light:  #96d43a;   /* 旧 #7faa46 */
  --green-pale:   #eaf6d0;   /* 旧 #e8efd8 */
  --page-bg:      #f5fce8;   /* 旧 #f4efe3（ベージュ） */
  --body-bg:      #e6efdb;   /* 旧 #e7e2d6（濃いベージュ） */
  --text:         #333a30;   /* 旧 #3f3f3a（茶みグレー） */
  --text-body:    #4e564a;   /* 旧 #55554c */
  --text-sub:     #6a7264;   /* 旧 #6f6f64 */
  --text-muted:   #7b8375;   /* 旧 #7a7a6e */
  --card-bg:      #ffffff;   /* 旧 #faf7ef（クリーム） */
  --card-border:  #e3ecd6;   /* 旧 #ece5d4（ベージュ） */
  --red:          #cf5a48;   /* 旧 #c05c52　緑が鮮やかになる分わずかに明るく */
  --red-mid:      #d98276;   /* 旧 #c0786f */
}

/* --- ベース --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--body-bg); }
body {
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--text);
}

/* --- ページラッパー --- */
.lp {
  max-width: 430px;
  margin: 0 auto;
  background: var(--page-bg);
  min-height: 100vh;
  box-shadow: 0 0 40px rgba(0,0,0,.12);
  position: relative;
  overflow: hidden;
}
.lp ::selection { background: #c7d7a6; }

/* Temporary homepage-only hide: retain the six-strengths markup for easy restoration. */
.home-strengths--temporarily-hidden { display: none !important; }

/* ===================================================
   ヘッダー
   =================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 18px;
  background: rgba(245,252,232,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
/* 2026-09-05: 看板と同じ横長ロゴ（比率 約4.5:1・施設名込み）へ差し替え。
   40px角のアイコン枠だったのを、高さ基準の横長に変える。 */
.site-header__logo-img {
  width: auto;
  height: 34px;
  max-width: 190px;
  object-fit: contain;
  flex: none;
}
.site-header__sub {
  font-size: 8.5px;
  color: var(--text-muted);
  letter-spacing: .3px;
  margin-bottom: 2px;
}
.site-header__name {
  font-size: 19px;
  font-weight: 900;
  color: var(--green-dark);
  letter-spacing: .5px;
  line-height: 1.05;
}
.site-header__tel {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--green-dark);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .2px;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(70,128,10,.18);
}
.site-header__tel:hover,
.site-header__tel:focus-visible { background: var(--green-btn); }
.site-header__tel svg { fill: #fff; }
/* 電話ボタンの左に並ぶSNSロゴ（LINE・Instagram）。
   電話ボタンと同じく960px以上でのみ表示する（スマホはヘッダーに幅がないため、
   トップのSNSカードとナビの導線に任せる） */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-header__sns {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--card-border);
  box-shadow: 0 2px 5px rgba(0,0,0,.07);
  transition: transform .15s ease, box-shadow .15s ease;
}
.site-header__sns:hover,
.site-header__sns:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.14);
}
.menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction:column;
  gap: 5px;
  padding: 6px;
}
.menu-btn span {
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--green-dark);
}

/* ===================================================
   ナビドロワー
   =================================================== */
.nav-drawer {
  display: none;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  height: 100%;
  background: rgba(70,128,10,.97);
  z-index: 50;
  padding: 24px 28px 40px;
  overflow-y: auto;
}
.nav-drawer__close {
  display: block;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  margin-bottom: 28px;
}
.nav-drawer ul { list-style: none; }
.nav-drawer a {
  display: block;
  color: #eaf6d0;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.nav-drawer a.current { color: #fff; font-weight: 900; }
.nav-drawer li:last-child a { border-bottom: none; }
.nav-drawer a.nav-drawer__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  box-sizing: border-box;
  margin-top: 28px;
  text-decoration: none;
  background: #fff;
  color: var(--green-dark);
  font-weight: 900;
  font-size: 17px;
  line-height: 1;
  padding: 15px 18px;
  border-radius: 40px;
  border-bottom: none;
}
.nav-drawer a.nav-drawer__tel svg {
  flex: 0 0 auto;
  fill: currentColor;
}
.nav-drawer__mobile-contact { display: block; }

/* ===================================================
   CTAボタン（電話）
   =================================================== */
/* ヒーロー下の横長ボタン */
.btn-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  background: linear-gradient(180deg, var(--green-mid), var(--green-btn));
  color: #fff;
  font-weight: 700;
  font-size: 16.5px;
  padding: 17px 18px;
  border-radius: 46px;
  box-shadow: 0 8px 18px rgba(69,126,7,.32);
}
.btn-tel__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* ヒーロー直下のバー型CTA（トップのみ）。
   2026-08-08に「アイコン＋電話番号＋矢印」の1行だけに簡素化した。
   文言は上のバッジ（見学・体験 受付中）が担う */
.cta-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
  background: linear-gradient(180deg, var(--green-mid), var(--green-btn));
  border-radius: 48px;
  padding: 14px 20px;
  box-shadow: 0 8px 18px rgba(69,126,7,.32);
}
.cta-bar__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.cta-bar__num {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: .5px;
  white-space: nowrap;
}

/* 発信前の予告文言（電話バナー直下） */
.tel-note {
  margin: 7px 4px 0;
  font-size: 11.5px;
  font-weight: 500;
  color: #7b8375;
  text-align: center;
}

/* ブロック型CTA（トップ下部・求人ページで共通。2026-08-08にトップ側も統一）
   スマホ  = 電話のみ（幅がないためLINEは出さず、代わりに右下の .line-fab が出る）
   600px〜 = ブロック内の右側にLINE導線を追加し、電話側はその分だけ左に寄る
   ※ブロック全体を <a href="tel:"> にするとLINEリンクを入れ子にできないため、
     外側は <div> にして中に「電話の<a>」と「LINEの<a>」を並べている */
.cta-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  text-decoration: none;
  background: linear-gradient(180deg, var(--green-mid), var(--green-btn));
  border-radius: 24px;
  padding: 20px 22px 22px;
  box-shadow: 0 8px 18px rgba(69,126,7,.32);
}
.cta-block__main {
  min-width: 0;
  display: block;
  text-decoration: none;
}
/* 右側のLINE導線（600px以上でのみ表示） */
.cta-block__line {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding-left: 22px;
  border-left: 1px solid rgba(255,255,255,.26);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .2px;
  text-decoration: none;
  white-space: nowrap;
}
/* 白い丸の中に緑の角丸ロゴを置く（ヘッダーのSNSロゴと同じ作り）。
   CTAの背景がダークグリーンのため、緑のロゴを直に置くと沈み、
   逆に白地に緑の吹き出しだけにすると色が反転して見えて分かりにくい */
.cta-block__line-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.24);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta-block__line:hover .cta-block__line-icon,
.cta-block__line:focus-visible .cta-block__line-icon {
  transform: translateY(-2px);
  box-shadow: 0 7px 16px rgba(0,0,0,.32);
}
.cta-block__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: #f0fae2;
}
.cta-block__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.cta-block__tel-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.cta-block__tel-num {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: .5px;
  white-space: nowrap;
}
@media (min-width: 600px) {
  .cta-block {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    padding: 22px 26px 24px;
  }
  .cta-block__line { display: flex; }
}

/* ---------------------------------------------------
   右下に浮くLINEボタン（スマホ専用・全ページ共通）
   スマホはヘッダーにもCTAにもLINEを置けないため、常時表示のこれで代替する。
   .lp の外に置くこと（.lp は幅によって overflow:hidden になる）
   --------------------------------------------------- */
.line-fab {
  position: fixed;
  right: 14px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  /* ヘッダー(40)より上、ナビドロワー(50)より下。メニューを開いたら隠れる */
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 52px;
  padding: 0 17px 0 13px;
  border-radius: 999px;
  background: #06C755;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.30);
  transition: transform .15s ease, box-shadow .15s ease;
}
.line-fab:hover,
.line-fab:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(0,0,0,.36);
}
.line-fab:active { transform: translateY(0); }
@media (min-width: 600px) {
  /* 600px以上ではCTA内にLINE導線が出るので、浮きボタンは消す */
  .line-fab { display: none; }
}

/* ===================================================
   カード
   =================================================== */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.03);
}

/* ===================================================
   トップページ：案内カード
   =================================================== */
.home-feature-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  align-items: center;
  gap: 14px;
  padding: 18px;
}
.home-feature-card__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home-feature-card__content a {
  align-self: flex-start;
  width: fit-content;
}
.home-feature-card__image {
  width: 140px;
  height: 120px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--green-pale);
}
.home-feature-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* トップの「脳卒中リハビリ／循環器リハビリ」カードの写真枠（2026-08-13）。
   以前は 88px（PCのみ180px）の高さ固定だった。599px以下ではカードが1カラム＝全幅になるため、
   88px だと 4:1 の細長い帯に潰れていた。高さは比率で持たせる。 */
.home-rehab-card__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.home-rehab-card__media img,
.home-rehab-card__media .img-ph {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 縦位置は写真ごとに調整する。スマホ＝--thumb-y、PC＝--thumb-y-pc（枠が浅くなるぶん上寄せ） */
  object-position: var(--thumb-x, 50%) var(--thumb-y, 45%);
}
/* PCは2カラムで1枚あたりが広くなる。16:9のままだと写真だけが大きくなりすぎるので浅くする */
@media (min-width: 960px) {
  .home-rehab-card__media { aspect-ratio: 2 / 1; }
  .home-rehab-card__media img {
    object-position: var(--thumb-x, 50%) var(--thumb-y-pc, 28%);
  }
}

/* トップのアクセス欄（2026-08-13）。上のFAQと同じベージュ地で境界が分からなかったため、
   ここだけ薄緑の帯にした。上下の波形は隣のセクションの背景色（--page-bg）で塗り、
   帯の内側が薄緑として残る仕組み。padding の上下は波形の高さぶん余分に取っている。 */
.access-section {
  position: relative;
  padding: 54px 18px 46px;
  background: var(--green-pale);
}
.access-section__wave {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 40px;
  pointer-events: none;
}
.access-section__wave--top { top: -1px; }
.access-section__wave--bottom { bottom: -1px; }

.home-philosophy-card {
  padding: 24px 20px;
  text-align: center;
}
.home-philosophy-card__body {
  max-width: 780px;
  margin-right: auto;
  margin-left: auto;
}

/* ---------------------------------------------------
   SNSカード（Instagram / LINE）
   従来の1枚のインスタカードを、同じ高さの小カード2枚に分割したもの。
   カードの高さは中のQRコード（116px）＋余白でほぼ決まる。
   スマホ(〜599px) = 1列に縦積み・QRは出さず丸ロゴのタップボタン
   PC/タブレット(600px〜) = 横に2枚並べ・QR表示
   ※スマホでQRを出しても本人は読み取れないための出し分け（2026-08-06 打合せ）
   --------------------------------------------------- */
.home-sns-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.home-sns-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}
.home-sns-card__text { min-width: 0; }
.home-sns-card__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 900;
  color: var(--green-dark);
  line-height: 1.45;
  margin-bottom: 5px;
}
.home-sns-card__title svg { flex: none; }
.home-sns-card__lead {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-body);
}
.home-sns-card__id {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--red);
}
.home-sns-card__id--line { color: #06a648; }
.home-sns-card__action {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
/* スマホ用：丸ロゴのタップボタン */
.home-sns-card__tap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--card-border);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
/* PC用：QRコード */
.home-sns-card__qr {
  display: none;
  width: 116px;
  height: 116px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: #f1f6ea;
}
.home-sns-card__qr span {
  font-size: 12px;
  color: #7b8375;
  text-align: center;
  line-height: 1.4;
}
.home-sns-card__qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (min-width: 600px) {
  .home-sns-row {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .home-sns-card {
    gap: 16px;
    padding: 18px 20px;
  }
  .home-sns-card__title { font-size: 15px; }
  .home-sns-card__lead { font-size: 12.5px; }
  .home-sns-card__tap { display: none; }
  .home-sns-card__qr {
    display: flex;
    width: 100px;
    height: 100px;
  }
}
@media (min-width: 960px) {
  .home-sns-row { gap: 22px; }
  .home-sns-card { padding: 20px 24px; }
  .home-sns-card__title { font-size: 18px; }
  /* 14px だと Instagram 側のリードがPC幅で13px分はみ出して2行になる（2026-09-07 実測）。1px 落として1行に収めている */
  .home-sns-card__lead { font-size: 13px; line-height: 1.7; }
  .home-sns-card__id { font-size: 13px; margin-top: 8px; }
  .home-sns-card__qr {
    width: 116px;
    height: 116px;
  }
}

/* ===================================================
   画像プレースホルダー（写真が来たら img に差し替え）
   =================================================== */
.img-ph {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d8ecb4, #8fc73f);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #46800a;
  font-size: 11px;
  font-weight: 500;
}

/* ===================================================
   強み（6グリッド）カード
   =================================================== */
.strength-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 9px;
}
.strength-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 16px 6px 13px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.03);
}
.strength-card img {
  display: block;
  margin: 0 auto 9px;
  object-fit: contain;
}
.strength-card__label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}

/* ===================================================
   ご利用の流れ（STEP）
   =================================================== */
.step-item {
  position: relative;
  padding-left: 46px;
  padding-bottom: 16px;
}
.step-item:last-child { padding-bottom: 4px; }
.step-circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--green-dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.step-circle__label { font-size: 6px; font-weight: 700; letter-spacing: .5px; opacity: .85; }
.step-circle__num   { font-size: 14px; font-weight: 900; }
.step-title { font-size: 12px; font-weight: 900; color: var(--text); margin-bottom: 4px; }
.step-desc  { font-size: 10.5px; line-height: 1.55; color: var(--text-sub); }

/* ===================================================
   FAQアコーディオン
   =================================================== */
.faq-item { border-bottom: 1px solid #e3ecd6; }
.faq-btn {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 11px 2px;
  text-align: left;
}
.faq-btn__q { font-size: 11.5px; font-weight: 700; line-height: 1.5; color: var(--text); }
.faq-chev   { flex: none; transition: transform .3s ease; }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s ease, opacity .25s ease;
  opacity: 0;
}
.faq-a.open { grid-template-rows: 1fr; opacity: 1; }
.faq-a p {
  min-height: 0;
  overflow: hidden;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--text-sub);
  padding: 0 2px 11px;
}

/* ===================================================
   アプローチカード（詳細ページ）
   =================================================== */
.approach-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  gap: 15px;
  align-items: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.04);
}
.approach-card__icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.approach-card__title { font-size: 15.5px; font-weight: 900; color: var(--green); margin-bottom: 7px; }
.approach-card__desc  { font-size: 12.5px; line-height: 1.7; color: var(--text-body); }

/* ===================================================
   フッター
   =================================================== */
.site-footer {
  background: var(--green-dark);
  color: #eaf6d0;
  padding: 24px 20px 26px;
}
/* 2026-09-05: 看板ロゴは濃緑地に直接置くと人型と下のラインが沈むため、
   白いカードに載せる。右側の電話・LINEカードと同じ角丸・白地に揃えてある。 */
.site-footer__logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 18px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.site-footer__logo img {
  width: auto;
  height: 38px;
  max-width: 220px;
  object-fit: contain;
  display: block;
}
.site-footer__sub  { font-size: 8px;  color: #c9e3a0; line-height: 1.1; }
.site-footer__name { font-size: 17px; font-weight: 900; color: #fff; }
.site-footer__nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 11px 14px;
  font-size: 11.5px;
  margin-bottom: 20px;
}
.site-footer__nav-grid a { color: #eaf6d0; text-decoration: none; }
.site-footer__nav-grid a.current { color: #fff; font-weight: 700; }
.site-footer__info {
  font-size: 10.5px;
  line-height: 1.7;
  color: #c9e3a0;
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 14px;
}
/* 2026-08-13: 住所・TEL・FAXを外したので、このブロックの中身は著作権表示だけ。
   以前は住所の下にぶら下げていたぶんの margin-top を落としてある */
.site-footer__copy { display: block; opacity: .8; }

/* フッター内のCTA（2026-08-13）。960px以上でのみ出す。
   それ未満は本文末の .final-contact-section が担うので、同じものを2回出さないよう隠しておく。
   実際の見た目（白カード）は 960px 以上のブロックで定義している。 */
.site-footer__cta { display: none; }

/* ===================================================
   チップ（主な内容などのタグ）
   =================================================== */
/* 2026-09-05: 背景（--page-bg）が淡いグリーンになり、--green-pale だと地に埋もれるため白へ。
   白一色だと輪郭が消えるので薄い枠線を添える。循環器・脳卒中の「主な内容」で共用。 */
.chip {
  display: inline-block;
  background: #fff;
  color: var(--green-dark);
  border: 1px solid var(--card-border);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  padding: 10px 15px;
  border-radius: 30px;
}

/* ===================================================
   特徴リスト（チェックマーク付き）
   =================================================== */
.feature-list { list-style: none; }
.feature-list li {
  position: relative;
  padding: 10px 0 10px 30px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px dashed #dfe7d4;
  line-height: 1.5;
}
.feature-list li:last-child { border-bottom: none; }
.feature-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 16px;
  height: 16px;
  background: var(--green);
  border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ===================================================
   施設概要テーブル
   =================================================== */
.info-table > div {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px dashed #e3ecd6;
}
.info-table > div:last-child { border-bottom: none; }
.info-table dt {
  flex: none;
  width: 92px;
  font-size: 12px;
  font-weight: 900;
  color: var(--green-dark);
  line-height: 1.6;
}
.info-table dd {
  flex: 1;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-body);
  line-height: 1.65;
}

/* ===================================================
   共通セクション見出し
   =================================================== */
.section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 20px;
  font-weight: 900;
  color: var(--green-dark);
  margin-bottom: 18px;
}
.section-heading--sm {
  justify-content: flex-start;
  gap: 6px;
  font-size: 15px;
  margin-bottom: 14px;
}

/* ===================================================
   Desktop layout (the site uses one breakpoint only)
   =================================================== */
@media (min-width: 960px) {
  .lp {
    width: min(100%, 1200px);
    max-width: 1200px;
    overflow: visible;
  }

  .site-header {
    padding: 14px max(40px, calc((100% - 1040px) / 2));
  }
  /* 2026-09-05: 横長の看板ロゴに変更。旧アイコン前提の 46px 角指定を外し、
     大きさはファイル末尾のメディアクエリ（高さ基準）にまとめた */
  .site-header__sub { font-size: 10px; }
  .site-header__name { font-size: 22px; }
  .site-header__tel { display: flex; }
  .site-header__sns { display: inline-flex; }
  .site-header__actions { gap: 12px; }
  .menu-btn { display: none; }

  .nav-drawer {
    position: sticky;
    top: 74px;
    left: auto;
    transform: none;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 56px;
    padding: 0 max(40px, calc((100% - 1040px) / 2));
    overflow: visible;
    background: var(--green-dark);
    z-index: 30;
  }
  .nav-drawer__close { display: none; }
  .nav-drawer ul { display: flex; align-items: stretch; }
  .nav-drawer a {
    font-size: 14px;
    padding: 18px 14px;
    border-bottom: none;
    white-space: nowrap;
  }
  .nav-drawer a:hover,
  .nav-drawer a:focus-visible { background: rgba(255,255,255,.11); }
  .nav-drawer a.nav-drawer__tel {
    display: none !important;
  }
  /* The drawer-only phone contact is not part of the desktop navigation. */
  .nav-drawer__mobile-contact { display: none !important; }

  .lp > section:not(:first-of-type) {
    width: 100%;
    max-width: 1040px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 40px !important;
    padding-left: 40px !important;
  }
  .lp > section:first-of-type > div[style*="padding"] {
    max-width: 1040px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 40px !important;
    padding-left: 40px !important;
  }
  .lp > section:first-of-type > div:first-child[style*="height:300px"] {
    height: 420px !important;
  }

  /* Keep the six strengths in one precisely aligned desktop card group. */
  .strength-grid {
    width: 100%;
    max-width: 960px;
    margin-right: auto;
    margin-left: auto;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 16px;
    align-items: stretch;
  }
  .strength-card { width: 100%; min-width: 0; padding: 20px 10px 16px; }
  .strength-card img { width: 48px; height: 48px; }
  .strength-card__label { font-size: 14px; }
  .card { border-radius: 18px; }
  .home-feature-card {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    min-height: 280px;
    gap: 32px;
    padding: 14px;
  }
  .home-feature-card__content { padding: 0 14px; }
  .home-feature-card__image {
    width: 100%;
    height: 250px;
    border-radius: 14px;
  }
  .home-feature-card__content h3 { font-size: 23px !important; }
  .home-feature-card__content p { font-size: 16px !important; line-height: 1.75 !important; }
  .home-feature-card__content a {
    align-self: flex-start;
    width: fit-content;
    min-height: 44px;
    padding: 10px 20px !important;
    font-size: 15px !important;
  }
  .home-feature-card--about {
    min-height: 280px;
  }
  .home-feature-card--about .home-feature-card__image {
    height: 250px;
  }

  .home-philosophy-card { padding: 28px 32px; }
  .home-philosophy-card > p:first-child { font-size: 22px !important; line-height: 1.7 !important; }
  .home-philosophy-card__body {
    max-width: 780px;
    font-size: 16px !important;
    line-height: 2.05 !important;
  }

  .home-rehab-card__content { padding: 16px 18px 18px !important; }
  /* 写真の高さは .home-rehab-card__media の aspect-ratio が持つ（2026-08-13）。
     ここで height を固定すると比率指定が効かなくなるため置かない */
  .home-rehab-card__title { font-size: 18px !important; margin-bottom: 9px !important; }
  .home-rehab-card__body {
    padding-right: 46px !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
  }
  .home-rehab-card__arrow { width: 32px !important; height: 32px !important; }

  /* Home: make the flow and FAQ comfortably legible at desktop size. */
  .home-flow-faq { gap: 48px !important; }
  .home-flow-faq .section-heading--sm {
    font-size: 25px;
    margin-bottom: 22px;
  }
  .home-flow-faq .section-heading--sm svg { width: 24px; height: 24px; }
  .home-flow-faq .step-item { padding-left: 70px; padding-bottom: 24px; }
  .home-flow-faq .step-circle { width: 52px; height: 52px; }
  .home-flow-faq .step-circle__label { font-size: 8px; }
  .home-flow-faq .step-circle__num { font-size: 20px; }
  .home-flow-faq .step-title { font-size: 19px; margin-bottom: 6px; line-height: 1.45; }
  .home-flow-faq .step-desc { font-size: 16px; line-height: 1.75; }
  .home-flow-faq .faq-btn { padding: 16px 2px; }
  .home-flow-faq .faq-btn__q { font-size: 18px; line-height: 1.55; }
  .home-flow-faq .faq-chev { width: 18px; height: 18px; }
  .home-flow-faq .faq-a p { font-size: 16px; line-height: 1.8; padding-bottom: 16px; }

  /* Desktop reading baseline for the lower-page content areas. */
  .section-heading { font-size: 25px; }
  .section-heading--sm { font-size: 22px; }
  .approach-card__title { font-size: 22px; }
  .approach-card__desc { font-size: 16px; line-height: 1.75; }
  .feature-list li { font-size: 16px; line-height: 1.65; }
  .chip { font-size: 15px; }
  .info-table dt { font-size: 15px; }
  .info-table dd { font-size: 16px; line-height: 1.7; }
  .cta-block__label { font-size: 16px; }

  /* Existing lower-page inline sizes: desktop-only readable equivalents. */
  .nav-drawer + section[style*="position:relative"][style*="overflow:hidden"] > div[style*="z-index:2"] > div[style*="font-size"] { font-size: 14px !important; }
  .nav-drawer + section[style*="position:relative"][style*="overflow:hidden"] > div[style*="z-index:2"] > p[style*="font-size"] { font-size: 16px !important; }
  .lp > section:not(:first-of-type) > h2[style*="font-size"] { font-size: 25px !important; }
  .lp > section:not(:first-of-type) > p[style*="font-size"] { font-size: 16px !important; }
  .lp > section > div[style*="box-shadow:0 4px 14px"] h3[style*="font-size"] { font-size: 22px !important; }
  .lp > section > div[style*="box-shadow:0 4px 14px"] span[style*="font-size"] { font-size: 16px !important; line-height: 1.6 !important; }
  .lp > section > .card:not(.home-philosophy-card) > p[style*="font-weight:700"] { font-size: 20px !important; }
  .lp > section > .card:not(.home-philosophy-card) > div[style*="font-size:12.5px"] { font-size: 16px !important; }
  .lp > section > .card:not(.home-philosophy-card) > div[style*="font-size:20px"] { font-size: 23px !important; }
  .lp > section > .card:not(.home-philosophy-card) > div[style*="font-size:11px"] { font-size: 15px !important; }

  section[aria-labelledby="recruitment-heading"] > h2 { font-size: 28px !important; }
  section[aria-labelledby="recruitment-heading"] > .card h3 { font-size: 23px !important; }
  section[aria-labelledby="recruitment-heading"] > .card ul { font-size: 15.5px !important; line-height: 1.85 !important; }
  .access-section { padding: 86px 40px 78px; }
  .access-section__wave { height: 56px; }
  .access-section > h2 { font-size: 25px !important; }
  .access-map > a[style*="font-size"] { font-size: 16px !important; }
  .access-details > div[style*="font-size"] { font-size: 16px !important; line-height: 1.7 !important; }

  /* Two related checklist groups share the desktop width instead of leaving an empty side. */
  .rehab-safety-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
    width: 100%;
    max-width: 1040px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 40px;
    padding-left: 40px;
    align-items: start;
  }
  .rehab-safety-grid > section { padding: 20px 0 6px !important; }

  .approach-card { width: 100%; max-width: 900px; margin-right: auto; margin-left: auto; }
  .hero-cta {
    width: min(100%, 600px);
    min-width: 0;
    max-width: 620px;
  }
  .hero-contact .tel-note,
  .final-contact-section .tel-note { display: none; }
  .cta-block { max-width: 720px; margin-right: auto; margin-left: auto; }
  .info-table { max-width: 900px; margin-right: auto; margin-left: auto; }

  .access-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 36px;
    align-items: start;
  }
  .access-details { order: 1; margin-top: 0 !important; padding-top: 8px; }
  .access-map { order: 2; }
  .access-map__embed { height: 420px !important; }

  /* Internal-page hero: align the copy with the shared 1040px content column. */
  .nav-drawer + section[style*="position:relative"][style*="overflow:hidden"] {
    min-height: 350px;
  }
  .nav-drawer + section[style*="position:relative"][style*="overflow:hidden"] > div[style*="z-index:2"] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 350px;
    width: 100%;
    max-width: none !important;
    margin: 0;
    padding-top: 40px !important;
    padding-right: 52% !important;
    padding-bottom: 64px !important;
    padding-left: max(40px, calc((100% - 1040px) / 2 + 40px)) !important;
  }

  /* 左＝ロゴ／ナビ／住所、右＝CTA の2カラム。右側が空いていたのを埋める（2026-08-13） */
  .site-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 48px;
    align-items: start;
    padding: 36px max(40px, calc((100% - 1040px) / 2));
  }
  .site-footer__body { min-width: 0; }
  /* 右にCTAが入って左が約700pxになったため、6列だと「Re LIFEについて」が折り返す。3列2行にする */
  .site-footer__nav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; font-size: 13px; }
  .site-footer__info { font-size: 12px; }

  /* CTAは濃緑のフッターの上に白カードで浮かせる。中の文字は本文と同じ緑系にして反転を防ぐ */
  .site-footer__cta {
    display: block;
    padding: 20px 22px 16px;
    background: var(--card-bg);
    border-radius: 20px;
    box-shadow: 0 10px 26px rgba(0,0,0,.24);
  }
  .footer-cta__main {
    display: block;
    text-decoration: none;
  }
  .footer-cta__label {
    display: block;
    margin-bottom: 12px;
    color: var(--green-dark);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
  }
  .footer-cta__tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .footer-cta__tel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--green-mid), var(--green-btn));
    box-shadow: 0 4px 10px rgba(69,126,7,.3);
  }
  .footer-cta__tel-num {
    color: var(--green-dark);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: .5px;
    white-space: nowrap;
  }
  .footer-cta__line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--card-border);
    color: var(--green-dark);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
  }
  .footer-cta__main:hover .footer-cta__tel-num,
  .footer-cta__line:hover { text-decoration: underline; }

  /* 本文末のCTAはフッターへ移したので、この幅では中身を出さない。
     ただし 2026-08-20 まで display:none で要素ごと消していたため、本文最後のセクション
     （下 padding が 6〜8px しかない）とフッターの緑帯が詰まって見えていた。
     中身だけ隠して、フッター手前の余白は残す。 */
  .final-contact-section {
    padding: 0 18px 56px !important;
  }
  .final-contact-section > * { display: none; }
}

/* ===================================================
   Responsive, readability and accessibility refinements
   =================================================== */
html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}
button,
input,
select,
textarea {
  font: inherit;
}
a,
button {
  -webkit-tap-highlight-color: rgba(70, 128, 10, .18);
}
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #1f5f7a;
  outline-offset: 3px;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  transform: translateY(-160%);
  padding: 10px 16px;
  border-radius: 8px;
  background: #fff;
  color: var(--green-dark);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
.skip-link:focus { transform: translateY(0); }

.menu-btn,
.nav-drawer__close {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-drawer[hidden] { display: none; }
.nav-drawer.is-open { display: block; }
body.menu-open { overflow: hidden; }
.nav-drawer a { min-height: 44px; }
.site-footer__nav-grid a {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.site-footer__nav-grid a[aria-current="page"],
.nav-drawer a[aria-current="page"] {
  color: #fff;
  font-weight: 900;
}

/* Keep green text and calls to action readable against warm backgrounds. */
.lp :where(p, li, dd) { color: var(--text-body); }
.lp :where(h1, h2, h3, h4) { text-wrap: balance; }
.cta-bar,
.cta-block {
  background: linear-gradient(180deg, #57a30c, #3f7307);
}

/* ===================================================
   トップのヒーロー（全幅スライド＋コピー重ね）
   写真3〜4枚を4秒ごとに2秒かけてクロスフェード。高さは画面いっぱいにせず抑える
   （スクロールしないと下が見えない状態を避けるため）。
   =================================================== */
.home-hero {
  position: relative;
  padding: 0 0 4px !important;
  background: var(--page-bg);
}
.hero-slider {
  position: relative;
  width: 100%;
  /* 2026-09-05: 上限を440px→510pxへ。集合カット（top_hero_riyousha-group）は
     全員の顔が縦9%〜65%に散っており、幅1200pxで440pxだと縦48.8%しか映らず必ず誰かが切れる。
     510pxなら縦56.7%が映り、object-position:50% 20% と併せて4人とも収まる。 */
  height: clamp(340px, 62vh, 510px);
  overflow: hidden;
  background: #e6f2d5;
}
.hero-slider__stage { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2s ease;
}
.hero-slide.is-active { opacity: 1; }
/* 全幅なので左右はトリミングされる前提。被写体は中央想定（写真依頼リストの共通ルール）。 */
.hero-slide > img,
.hero-slide > .img-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  font-size: 13px;
}
/* 白抜きのコピーを写真の明るさに左右されず読ませるための膜。 */
.hero-slider__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35,48,20,.34) 0%, rgba(35,48,20,.10) 40%, rgba(35,48,20,.52) 100%);
}
.home-hero__copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 22px 26px;
  text-align: center;
}
.home-hero__title {
  color: #fff;
  font-size: clamp(30px, 8.4vw, 42px);
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: .5px;
  text-shadow: 0 2px 14px rgba(20,30,10,.55), 0 1px 3px rgba(20,30,10,.45);
}
.home-hero__wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  display: block;
  width: 100%;
  height: 40px;
}
.hero-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 22px 6px;
  text-align: center;
}
.hero-contact__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 6px 13px;
  border-radius: 30px;
  background: var(--green-pale);
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
}
.hero-contact .cta-bar { width: 100%; }

/* The shared internal-page hero keeps image and copy in separate areas.
   スマホは「文字 → 写真」の縦並び、PCは「文字 | 写真」の左右分割。
   写真のトリミングは --hero-photo-x / --hero-photo-y で調整する。 */
.page-hero {
  --hero-bg: #e3ebd2;
  --hero-bg-rgb: 227, 235, 210;
  --hero-photo-x: 50%;
  --hero-photo-y: 42%;
  position: relative;
  display: grid;
  grid-template-areas:
    "copy"
    "image";
  background: var(--hero-bg);
  overflow: hidden;
}
.page-hero__media {
  position: relative !important;
  grid-area: image;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
/* 写真は絶対配置。画像の縦横比がヒーローの高さを決めないようにするため。
   高さは枠側だけで決まり、はみ出した分は cover でトリミングされる。 */
.page-hero__media img,
.page-hero__media .img-ph {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-photo-x) var(--hero-photo-y);
}
.page-hero__copy {
  position: relative;
  grid-area: copy;
  z-index: 2;
  width: 100%;
  max-width: none !important;
  padding: 24px 22px 26px !important;
}
.page-hero__breadcrumb {
  min-height: 44px;
  margin-bottom: 8px !important;
  font-size: 14px !important;
}
.page-hero__title {
  margin-bottom: 12px !important;
  color: var(--text) !important;
  font-size: clamp(30px, 8vw, 38px) !important;
  line-height: 1.25 !important;
  letter-spacing: .04em !important;
}
.page-hero__lead {
  max-width: 42rem;
  color: var(--text-body) !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

/* Mobile reading baseline, tuned for older users and family members. */
@media (max-width: 599px) {
  .lp {
    width: 100%;
    max-width: none;
  }
  .lp > main > section:not(.page-hero):not(.home-hero) {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }
  .lp main p,
  .lp main li,
  .lp main dd,
  .approach-card__desc,
  .feature-list li,
  .info-table dd {
    font-size: 16px !important;
    line-height: 1.8 !important;
  }
  .section-heading { font-size: 22px; }
  .section-heading--sm { font-size: 20px; }
  .home-flow-faq {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .step-item {
    min-height: 58px;
    padding-left: 58px;
    padding-bottom: 22px;
  }
  .step-circle { width: 44px; height: 44px; }
  .step-circle__label { font-size: 8px; }
  .step-circle__num { font-size: 17px; }
  .step-title {
    margin-bottom: 5px;
    font-size: 17px;
    line-height: 1.5;
  }
  .step-desc {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }
  .faq-btn {
    min-height: 56px;
    padding: 14px 2px;
  }
  .faq-btn__q {
    font-size: 16px;
    line-height: 1.6;
  }
  .faq-a p {
    padding: 2px 2px 16px;
    font-size: 15px !important;
    line-height: 1.8 !important;
  }
  .site-footer__sub { font-size: 12px; }
  .site-footer__nav-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    font-size: 14px;
  }
  .site-footer__info {
    font-size: 13px;
    line-height: 1.8;
  }
  .cta-bar {
    min-width: 0;
    min-height: 68px;
    gap: 10px;
    padding: 11px 16px;
    overflow: visible;
  }
  .cta-bar__num { font-size: clamp(20px, 6.4vw, 26px); }
  .cta-block__label { font-size: 14px; }
  .cta-block__tel-num {
    font-size: clamp(22px, 7vw, 28px);
    white-space: nowrap;
  }
  .home-feature-card {
    grid-template-columns: minmax(0, 1fr) 120px;
  }
  .home-feature-card__image {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 359px) {
  .home-feature-card {
    grid-template-columns: 1fr;
  }
  .home-feature-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* Fluid tablet layout replaces the former 430px phone column. */
@media (min-width: 600px) and (max-width: 959px) {
  .lp {
    width: 100%;
    max-width: 820px;
    overflow: hidden;
  }
  .site-header {
    padding-right: 28px;
    padding-left: 28px;
  }
  .nav-drawer {
    max-width: 820px;
    padding-right: 44px;
    padding-left: 44px;
  }
  .lp > main > section:not(.page-hero):not(.home-hero) {
    padding-right: 36px !important;
    padding-left: 36px !important;
  }
  .hero-slider { height: clamp(400px, 52vh, 480px); }
  .home-hero__title { font-size: clamp(38px, 5.4vw, 48px); }
  .home-hero__wave { height: 48px; }
  .hero-contact { padding: 22px 36px 8px; }
  .hero-contact .cta-bar { max-width: 560px; }
  .home-flow-faq {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px !important;
  }
  .step-title,
  .faq-btn__q { font-size: 16px; }
  .step-desc,
  .faq-a p { font-size: 14px; line-height: 1.75; }
  .page-hero {
    grid-template-areas: "copy image";
    /* 2026-09-05: 1:1 → 1:2。写真の面積を広げる（左＝文字、右＝写真） */
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    min-height: clamp(420px, 50vw, 540px);
    max-height: 580px;
  }
  /* 高さは枠が決める（写真の縦横比に引っぱられない）。はみ出しは cover でトリミング。 */
  .page-hero__media {
    height: 100% !important;
    aspect-ratio: auto;
  }
  .page-hero__copy {
    align-self: center;
    padding: 42px 30px 56px 36px !important;
  }
  .page-hero__title { font-size: clamp(34px, 5vw, 42px) !important; }
  .facility-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

.facility-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.facility-gallery__item,
.facility-gallery__media,
.facility-gallery__media .img-ph,
.facility-gallery__media img {
  width: 100%;
}
.facility-gallery__media {
  height: auto !important;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.facility-gallery__media .img-ph,
.facility-gallery__media img {
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 50%;
}
/* 2026-08-20: 写真の下のキャプション（.facility-gallery__caption）は不要になったため削除（ユーザー指示）。
   ギャラリーは写真だけを並べる。 */

/* ---------------------------------------------------
   求人カード：上に写真枠、下に条件テキスト（3職種とも同じ形）
   --------------------------------------------------- */
:root { --recruit-col: 1040px; }

.recruit-card {
  padding: 0 !important;
  overflow: hidden;
}
.recruit-card__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f1f6ea;
}
.recruit-card__media img,
.recruit-card__media .img-ph {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.recruit-card__body { padding: 24px 22px 26px; }

.recruit-list {
  margin: 0 !important;
  padding-left: 1.25em !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}
.recruit-list li {
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.recruit-list li[aria-hidden="true"] { display: none; }

.about-values__body {
  font-size: 16px !important;
  line-height: 1.9 !important;
}
.representative-card__meta {
  font-size: 14px !important;
  line-height: 1.55;
}

@media (min-width: 960px) {
  .lp > main > section:not(:first-child) {
    width: 100%;
    max-width: 1040px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 40px !important;
    padding-left: 40px !important;
  }
  .lp > main > section:not(:first-child) > h2[style*="font-size"] {
    font-size: 25px !important;
  }
  .lp > main > section:not(:first-child) > p[style*="font-size"] {
    font-size: 16px !important;
    line-height: 1.9 !important;
  }
  .lp > main > section > div[style*="box-shadow:0 4px 14px"] h3[style*="font-size"] {
    font-size: 22px !important;
  }
  .lp > main > section > div[style*="box-shadow:0 4px 14px"] span[style*="font-size"] {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  .lp > main > section > .card:not(.home-philosophy-card) > p[style*="font-weight:700"] {
    font-size: 20px !important;
  }
  .lp > main > section > .card:not(.home-philosophy-card) > div[style*="font-size:12.5px"] {
    font-size: 16px !important;
  }
  .hero-slider { height: clamp(440px, 56vh, 560px); }
  .home-hero__title { font-size: clamp(44px, 4.2vw, 58px); }
  .home-hero__wave { height: 56px; }
  .hero-contact { padding: 26px 40px 10px; }
  .hero-cta {
    width: 100%;
    max-width: 520px;
  }
  .page-hero {
    grid-template-areas: "copy image";
    /* 2026-09-05: 1:1 → 1:2。写真の面積を広げる（左＝文字、右＝写真） */
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    min-height: clamp(550px, 42vw, 640px);
    max-height: 660px;
  }
  .page-hero__media {
    height: 100% !important;
    aspect-ratio: auto;
  }
  .page-hero__copy {
    align-self: center;
    min-height: 0;
    padding: 56px 56px 72px clamp(40px, calc((100% - 1040px) / 2), 80px) !important;
  }
  .page-hero__title { font-size: 44px !important; }
  .facility-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
  /* PC は 1 職種 1 行。カードの中を 左=タイトル+条件 / 右=写真 の 2 カラムにする。 */
  section[aria-labelledby="recruitment-heading"] > h2 {
    max-width: var(--recruit-col);
    margin: 0 auto 24px !important;
  }
  section[aria-labelledby="recruitment-heading"] > .recruit-card {
    max-width: var(--recruit-col);
    margin-right: auto !important;
    margin-left: auto !important;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: stretch;
  }
  /* 高さはテキスト側が決める。写真は列いっぱいに敷いて cover でトリミング。 */
  .recruit-card__media {
    grid-area: 1 / 2;
    aspect-ratio: auto;
    height: 100%;
  }
  .recruit-card__body {
    grid-area: 1 / 1;
    padding: 32px 34px 34px;
  }
  .recruit-list { font-size: 16px !important; }
}

.faq-chev.is-open { transform: rotate(180deg); }
.faq-a[hidden] { display: none; }

/* Prevent long copy from defining a flex/grid item's minimum width. */
.page-hero__copy,
.home-hero__copy,
.approach-card > div,
.info-table dd,
.access-details span {
  min-width: 0;
}
.lp main :where(p, li, dd) {
  overflow-wrap: anywhere;
}

/* The mobile reading size needs a full card row instead of a narrow two-column card. */
@media (max-width: 599px) {
  .home-rehab-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  .home-rehab-card__body {
    padding-right: 42px !important;
  }
  .lp main p.tel-note {
    font-size: 12px !important;
    line-height: 1.5 !important;
    white-space: nowrap;
    overflow-wrap: normal;
  }
}

/* Keep the complete phone row and definition lists visible at the 320px endpoint. */
@media (max-width: 359px) {
  .home-hero__copy h1 {
    font-size: clamp(32px, 10.5vw, 34px) !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
  }
  .cta-block {
    padding-right: 14px;
    padding-left: 14px;
  }
  .cta-block__tel {
    gap: 8px;
  }
  .cta-block__tel-icon {
    width: 36px;
    height: 36px;
  }
  .cta-block__tel-num {
    font-size: 20px;
  }
  .cta-block__tel > svg:last-child {
    width: 14px;
    height: 14px;
  }
  .info-table > div {
    display: grid;
    gap: 4px;
  }
  .info-table dt {
    width: auto;
  }
}

/* 左右分割になる幅（タブレット以上）のみ、写真の左端を透明にして
   背景色の中から写真が現れるように見せる。※他のブレークポイントは
   600-959 と 960+ に分かれているため、両方に効く独立指定として置く。 */
@media (min-width: 600px) {
  .page-hero__media img,
  .page-hero__media .img-ph {
    -webkit-mask-image: linear-gradient(to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, .12) 8%,
      rgba(0, 0, 0, .45) 17%,
      rgba(0, 0, 0, .8) 26%,
      rgba(0, 0, 0, .95) 33%,
      rgb(0, 0, 0) 40%);
    mask-image: linear-gradient(to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, .12) 8%,
      rgba(0, 0, 0, .45) 17%,
      rgba(0, 0, 0, .8) 26%,
      rgba(0, 0, 0, .95) 33%,
      rgb(0, 0, 0) 40%);
  }
}

/* ===================================================
   リハビリの様子ギャラリー
   写真の差し替えは img の src、表示位置は各 img の --photo-pos で調整。
   スマホは横スワイプ（1枚ずつスナップ）、タブレット以上は3カラム。
   枠が 4:3 を保ち、画像は絶対配置なので元画像の縦横比に左右されない。
   =================================================== */
.rehab-gallery {
  display: flex;
  gap: 10px;
  margin: 16px -20px 0;
  padding: 0 20px 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rehab-gallery::-webkit-scrollbar { display: none; }
.rehab-gallery__item {
  position: relative;
  flex: 0 0 82vw;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: var(--green-pale);
  scroll-snap-align: start;
}
.rehab-gallery__item img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-pos, 50% 50%);
  cursor: zoom-in;
}
.rehab-gallery__item img:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: -5px;
}
.rehab-gallery__placeholder {
  display: grid;
  place-items: center;
  border: 2px dashed rgba(163, 69, 58, .38);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)),
    #fbe4e0;
}
.rehab-gallery__placeholder span {
  color: #a3453a;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
}
@media (min-width: 600px) {
  .rehab-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0 0;
    padding: 0;
    overflow: visible;
  }
  .rehab-gallery__item { flex: none; }
}
@media (min-width: 960px) {
  .rehab-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.lightbox-open {
  overflow: hidden;
}
.gallery-lightbox[hidden] {
  display: none;
}
.gallery-lightbox {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 64px 16px 20px;
  background: rgba(0, 0, 0, .88);
}
.gallery-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 84px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.gallery-lightbox__close {
  position: fixed;
  z-index: 1;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font: inherit;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}
.gallery-lightbox__close:hover {
  background: rgba(255, 255, 255, .18);
}
.gallery-lightbox__close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* 参考サイトと同様、トップの写真だけは端末設定にかかわらずフェードさせる。 */
  .hero-slide { transition-duration: 2s !important; }
}

/* ===================================================
   代表挨拶カード（2026-09-05：カード上部を写真帯にする構成へ変更）
   リハビリ写真を全幅で敷き、顔写真を円形で半分重ねる。
   帯の高さはスマホ190px／タブレット260px／PC420px。
   =================================================== */
.representative-card {
  padding: 0 0 24px;
  overflow: hidden;
}
.representative-card__band {
  position: relative;
  height: 190px;
}
.representative-card__band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}
.representative-card__face {
  position: relative;
  width: 150px;
  height: 150px;
  margin: -75px auto 12px;
  border: 4px solid var(--card-bg);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.representative-card__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
.representative-card__head {
  text-align: center;
  margin-bottom: 18px;
}
.representative-card__body {
  padding: 0 20px;
}

@media (min-width: 600px) and (max-width: 959px) {
  .representative-card__band { height: 260px; }
  .representative-card__face { width: 168px; height: 168px; margin-top: -84px; }
  .representative-card__body { padding: 0 28px; }
}

@media (min-width: 960px) {
  /* 帯を高くしないと、幅960pxでは細い線にしか見えない */
  .representative-card__band { height: 420px; }
  .representative-card__face {
    width: 190px;
    height: 190px;
    margin-top: -95px;
    border-width: 5px;
  }
  .representative-card__name { font-size: 24px !important; }
  .representative-card__body {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 30px;
  }
}

/* 代表挨拶の本文（2026-09-05：他ページの本文と大きさを揃える）。
   従来はインラインの 12.5px で、サイトの本文基準（.about-values__body の16px）より
   一段小さく取り残されていた。キャッチと締めは強調して大きくする。 */
.representative-card__catch {
  font-size: 18px;
  font-weight: 900;
  color: var(--green);
  line-height: 1.6;
  margin-bottom: 16px;
}
.representative-card__text {
  font-size: 15px;
  line-height: 1.95;
  color: var(--text-body);
  font-weight: 500;
}
.representative-card__text p { margin-bottom: 15px; }
.representative-card__text p:last-child { margin-bottom: 0; }
.representative-card__em {
  font-weight: 900;
  color: var(--green-dark);
}
.representative-card__closing {
  font-size: 17px;
  font-weight: 900;
  color: var(--green-dark);
  line-height: 1.75;
}

@media (min-width: 600px) {
  .representative-card__catch  { font-size: 21px; }
  .representative-card__text   { font-size: 16px; }
  .representative-card__closing { font-size: 19px; }
}

@media (min-width: 960px) {
  .representative-card__catch  { font-size: 24px; margin-bottom: 20px; }
  .representative-card__text   { font-size: 16px; line-height: 2; }
  .representative-card__text p { margin-bottom: 18px; }
  .representative-card__closing { font-size: 21px; }
}

/* QRコード画像（2026-09-05 Instagram分を受領して差し替え）。
   枠は 100〜116px。画像は余白込みで書き出しているので枠いっぱいに収める。 */
.home-sns-card__qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 看板ロゴ：画面が広いほど大きく見せる（2026-09-05） */
@media (min-width: 600px) {
  .site-header__logo-img { height: 42px; max-width: 240px; }
  .site-footer__logo img { height: 48px; max-width: 280px; }
}
@media (min-width: 960px) {
  .site-header__logo-img { height: 50px; max-width: 290px; }
  .site-footer__logo img { height: 56px; max-width: 330px; }
}