/*
Theme Name: 泉松会 透析医療テーマ
Theme URI: https://example.com/senshoukai
Author: 泉松会
Description: 医療法人社団泉松会の透析医療専門サイトテーマ
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: senshoukai
*/

@charset "UTF-8";

/* ─── ユーティリティ ─── */
.sp-only { display: none; }
@media (max-width: 768px) { .sp-only { display: inline; } }

/* ============================================================
   CSS VARIABLES & RESET
============================================================ */
:root {
  --color-primary: #00552e;
  --color-primary-dark: #00552e;
  --color-primary-light: #F7F3E9;
  --color-accent: #00A8CC;
  --color-accent2: #E85D04;
  --color-teal: #0077A8;
  --color-bg: #F7F3E9;
  --color-white: #FFFFFF;
  --color-text: #1A2B3C;
  --color-text-light: #5A6B7C;
  --color-border: #D0E4F0;
  --color-gray-light: #F0F5FA;

  --font-heading: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  --font-body: 'Noto Sans JP', 'Zen Kaku Gothic New', sans-serif;
  --font-en: 'Montserrat', sans-serif; /* 英字ラベル（頭大文字）用 */

  /* ── タイプスケール（font-size トークン） ──────────────
     px 名のトークン（値=px/16 rem）。既存の全 font-size を集約し、
     文字サイズ変更はこの一覧の編集だけで一元管理できる。
     ※導入時は既存値を四捨五入で ±0.5px 以内に丸めており、見た目は現状維持。 */
  --fs-9: 0.5625rem;
  --fs-10: 0.625rem;
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-17: 1.0625rem;
  --fs-18: 1.125rem;
  --fs-19: 1.1875rem;
  --fs-20: 1.25rem;
  --fs-21: 1.3125rem;
  --fs-22: 1.375rem;
  --fs-23: 1.4375rem;
  --fs-24: 1.5rem;
  --fs-25: 1.5625rem;
  --fs-26: 1.625rem;
  --fs-27: 1.6875rem;
  --fs-28: 1.75rem;
  --fs-29: 1.8125rem;
  --fs-30: 1.875rem;
  --fs-31: 1.9375rem;
  --fs-32: 2rem;
  --fs-34: 2.125rem;
  --fs-35: 2.1875rem;
  --fs-36: 2.25rem;
  --fs-38: 2.375rem;
  --fs-40: 2.5rem;
  --fs-42: 2.625rem;
  --fs-45: 2.8125rem;
  --fs-48: 3rem;
  --fs-50: 3.125rem;
  --fs-64: 4rem;
  --fs-80: 5rem;

  --shadow-sm: 0 2px 8px rgba(0,91,154,0.08);
  --shadow-md: 0 4px 20px rgba(0,91,154,0.12);
  --shadow-lg: 0 8px 40px rgba(0,91,154,0.16);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --max-width: 1400px;

  /* 代表サイト共通の左右ガター（全幅レイアウトの基準位置）。
     お知らせ緊急バナー／カラムと完全一致：56 / 28 / 18 / 14px。
     ヘッダー・フッター・トップ各セクションの左右位置をこの1値で統一する。 */
  --corp-gutter: 56px;
}
@media (max-width: 1024px) { :root { --corp-gutter: 28px; } }
@media (max-width: 768px)  { :root { --corp-gutter: 18px; } }
@media (max-width: 600px)  { :root { --corp-gutter: 14px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: var(--fs-16);
  /* overflow-x を html に置くと、狭いビューポート（モバイル幅）では計算後の値が
     hidden auto に変わり、position: sticky がサイト全体で効かなくなることを確認した。
     html 自体は visible のままにし、横はみ出し抑制は body 側で行う。 */
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.9;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  overflow-x: clip; /* 横はみ出し（横スクロールバー）抑制。html ではなく body に置くことで sticky を壊さない */
}

img { max-width: 100%; height: auto;}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }


/* 記事・固定ページ本文中のリンクは「リンクと分かる」よう色＋下線を明示。
   全体リセット（a { color: inherit; text-decoration: none; }）を本文内だけ上書きする。 */
.entry-content a,
.p-news-single__body a {
  color: var(--color-teal, #0077A8);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  font-weight: 700;
  word-break: break-word;         /* 長いURLを貼っても折り返す */
  transition: color .2s, opacity .2s;
}
.entry-content a:hover,
.p-news-single__body a:hover {
  color: var(--color-primary, #00552e);
  opacity: .85;
}

/* 各施設ページ（is-clinic-single）内の本文リンクは、その施設のテーマカラーにする。
   泉松=青 / 村田=赤 / 名取=緑（--theme-color は clinic-hero.css の .is-{slug} で定義）。
   泉松会（本部）側の single-default では is-clinic-single が付かないため、上のティール色が維持される。 */
.is-clinic-single .entry-content a {
  color: var(--theme-color, #0077A8);
}
.is-clinic-single .entry-content a:hover {
  color: var(--theme-color, #00552e);
  opacity: .7;
}

/* ============================================================
   LAYOUT UTILITIES
============================================================ */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 80px 0;
}

.section--gray { background: var(--color-bg); }
.section--primary { background: var(--color-primary); color: var(--color-white); }

.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-label {
  display: inline-block;
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 4vw, 36px);
  color: var(--color-primary-dark);
  line-height: 1.4;
}

.section--primary .section-title { color: var(--color-white); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 100px;
  font-size: var(--fs-15);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  border: 2px solid transparent;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
}


/* ============================================================
   SITE NAVIGATION & DROPDOWN (PC限定・決定版)
============================================================ */


/* HAMBURGER */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
}

.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: var(--transition);
}

/* Mobile Nav */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-white);
  z-index: 300;
  overflow-y: auto;
  padding: 80px 24px 40px;
}

.mobile-nav.is-open { display: block; }

.mobile-nav-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: var(--fs-28);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
}

.mobile-nav ul { display: flex; flex-direction: column; gap: 0; }

.mobile-nav li a {
  display: block;
  padding: 16px 0;
  font-size: var(--fs-18);
  font-weight: 700;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

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


/* ============================================================
   CLINIC COMMON HEADER STYLE (Top Line Fixed)
============================================================ */

:root {
  --bg-color: #f7f3e9;
  --text-color: #333;
  --theme-color: #1e3a8a; 
  --top-line-height: 10px; /* トップラインの太さ */
}

.is-senshou-clinic   { --theme-color: #1e3a8a; }
.is-muratatouseki-clinic   { --theme-color: #c53030; }
.is-natoritouseki-clinic { --theme-color: #2f855a; }

/* --- ヘッダー：全体を固定 --- */
.l-header-clinic {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 0;
  /* 背景を透明にし、ライン（::before）を削除または非表示にする */
  background: transparent !important; /* ★ここを透明にする */
  box-shadow: none !important; /* 全体の影も消す */
  transition: all 0.4s ease;
  /* ヘッダーは横幅いっぱいの透明なfixed要素なので、素のままだと
     ロゴ・メニュー以外の透明な余白部分もページ本文のクリックを奪ってしまう。
     ここを無効化し、実際に見えているロゴとメニューボタンだけ下で
     pointer-events:auto に戻して復活させる。 */
  pointer-events: none;
}

.l-header-clinic .p-header-logo,
.l-header-clinic .p-header-menu-trigger {
  pointer-events: auto;
}


/* --- クリニックロゴ（看板風・横長ロゴ） --- */
.p-header-logo {
  background-color: #fff;
  padding: 15px 20px;
  border-radius: 0 0 1.5rem 0; /* 看板らしく両下角を丸く */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;

  transition: all 0.3s ease;
}

.p-header-logo img {
  height: 70px; /* padding込みで p-header-menu-trigger（100px）と高さを揃える */
  width: auto;
  display: block;
  transition: height 0.3s ease, opacity 0.2s ease;
}

/* リンクであることが分かるよう、ホバーで少しグレーに（front-page.php の .l-header__logo と同じ挙動） */
.p-header-logo:hover img {
  opacity: 0.6;
}

/* スクロール時：メニューボタン（100px→80px）と連動して縮小 */
.l-header-clinic.is-scrolled .p-header-logo img {
  height: 50px;
}

/* ヘッダー内側のレイアウト調整 */
.l-header-clinic__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 40px 0 0;
}

/* ============================================================
   HEADER MENU (Fixed Position Adjust)
============================================================ */

.p-header-menu-trigger {
  margin-top: 0 !important;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 15px;
  padding: 0;
  z-index: 2000;
  background: none !important; /* ボタン自体の背景も念のためリセット */
  outline: none !important; /* フォーカス時の線を消す */
  border: none !important;  /* 枠線を消す */
  box-shadow: none !important; /* 二重に影が出ないようにリセット */
  -webkit-tap-highlight-color: transparent; /* スマホ等のタップ色消去 */
}

/* 丸いボタン本体 */
.p-header-menu-circle {
  width: 100px;  /* 80pxから拡大 */
  height: 100px; /* 80pxから拡大 */
  background-color: var(--theme-color);
  border-radius: 0 0 0 2.5rem; /* サイズに合わせて角丸も少し大きく */
  display: flex;
  flex-direction: column;
  align-items: center; /* 左右中央揃え */
  justify-content: center;
  box-shadow: -5px 5px 20px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  gap: 30px;
}

/* 三本線の基本構造 */
.p-header-menu-lines {
  top: 10px;
  position: relative;
  display: block;
  width: 38px;
  height: 2px;
  background-color: #f7f3e9; /* ★白に変更 */
  transition: all 0.3s;
}

/* 三本線の基本構造 */
.p-header-menu-label {
  position: relative;
  display: block;
  color: #fff;
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* スクロール時の縮小サイズも再調整 */
.l-header-clinic.is-scrolled .p-header-menu-circle {
  width: 80px;
  height: 80px;
}

.p-header-menu-lines::before,
.p-header-menu-lines::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
  transition: inherit;
}

.p-header-menu-lines::before { top: -8px; }
.p-header-menu-lines::after { top: 8px; }


/* ============================================================
   追加・修正するCSS
============================================================ */


/* 2. 丸いボタン本体（インナーを真ん中に置く） */
.p-header-menu-circle {
  width: 100px;
  height: 100px;
  background-color: var(--theme-color);
  border-radius: 0 0 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -5px 5px 20px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  
  /* ★追加：少し右上に寄っている丸の中で、
     テキストと線を綺麗にセンターへ収めるための微調整（必要に応じて） */
  padding-left: 10px;  /* 左側の角丸があるため中央がズレて見える場合の調整用 */
  padding-bottom: 5px; 
  box-sizing: border-box;
}

/* 3. 三本線の基本構造（微調整） */
.p-header-menu-lines {
  position: relative;
  display: block;
  width: 38px;
  height: 2px;
  background-color: #f7f3e9;
  transition: all 0.3s;
  /* margin-bottomを消去して、親のgapで制御する */
}

/* 4. MENUラベルの文字装飾 */
.p-header-menu-circle .label {
  display: block;
  font-size: var(--fs-10);          /* 丸のサイズに合わせて調整 */
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #f7f3e9;           /* 3本線と同じ色に */
  line-height: 1;
  text-align: center;
}

/* ============================================================
   GLOBAL OVERLAY MENU
============================================================ */

/* --- 全画面メニューの基盤 --- */
.p-global-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1500;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;

  /* 以前作成した3色グラデーション背景を適用 */
  background-color: var(--bg-color); /* #f7f3e9 */
  background-image:
    radial-gradient(at 10% 10%, rgba(255, 0, 0, 0.05) 0%, transparent 50%),
    radial-gradient(at 90% 10%, rgba(0, 51, 153, 0.05) 0%, transparent 50%),
    radial-gradient(at 50% 90%, rgba(0, 153, 51, 0.05) 0%, transparent 50%);
}

/* --- ★jpgバックイメージ：全画面フィット設定 --- */
.p-global-menu__bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 親要素（flex: 7のエリア）の幅いっぱい */
  height: 100%; /* 親要素の高さいっぱい */
  z-index: 1;
  pointer-events: none;
  
  /* 開く前のアニメーション初期状態 */
  opacity: 0;
  /* 最初は少し大きく待機（ここを大きくしすぎると画質が落ちるので1.05程度で） */
  transform: scale(1.05); 
  transition: opacity 1.2s ease, transform 1.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.p-global-menu__bg-image img {
  width: 130%;
  height: 130%;
  object-fit: cover;
  
  /* 画像の中央を基準にする */
  object-position: center center; 
  
  /* jpg画像の場合は、ロゴよりも少し濃くしても雰囲気が出ます（0.15〜0.2程度） */
  opacity: 0.3; 
}

/* --- 開いた時の動き（じわっとズームアウトして定着） --- */
.is-menu-open .p-global-menu__bg-image {
  opacity: 1;
  transform: scale(1); /* 1.1から1.0へゆっくり戻る */
}


.is-menu-open .p-global-menu {
  opacity: 1;
  visibility: visible;
}

/* --- コンテンツ配置（縦積み：上 写真 / 下 ナビ） --- */
.p-global-menu__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  position: relative;
  z-index: 2;
}

/* --- 上部：施設写真エリア --- */
.p-global-menu__left {
  flex: 0 0 40vh;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* --- 施設バナーエリア --- */
.p-global-menu__banners {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 30px 8% 48px;
  border-top: 1px solid rgba(0, 85, 46, 0.08);
}

.p-global-menu__fac-card {
  display: flex;
  position: relative;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  text-decoration: none;
  color: #333;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  min-height: 70px;
}

.p-global-menu__fac-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.p-global-menu__fac-card__photo {
  width: 38%;
  flex-shrink: 0;
  overflow: hidden;
}
/* 3枚を横に並べる幅では、写真の取り分を減らして施設名の領域を確保する */
@media (min-width: 769px) and (max-width: 1279px) {
  .p-global-menu__fac-card__photo {
    width: 30%;
  }
  .p-global-menu__fac-card__body {
    padding-right: 18px;
  }
}
/* 写真を残したままでは施設名が1行に収まらない幅では、写真を省いて
   文字だけのカードにする。1列に積み替える案もあるが、それだとカード3枚で
   縦が約160px伸び、縦の短いノートPCで3枚目が画面外に出てしまうため、
   3枚横並びのまま横幅を名前に回す。 */
@media (min-width: 769px) and (max-width: 979px) {
  .p-global-menu__fac-card__photo {
    display: none;
  }
  .p-global-menu__fac-card__body {
    padding: 12px 26px 12px 14px;
  }
  .p-global-menu__fac-card {
    min-height: 62px;
  }
}

.p-global-menu__fac-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.p-global-menu__fac-card:hover .p-global-menu__fac-card__photo img {
  transform: scale(1.06);
}

.p-global-menu__fac-card__body {
  padding: 10px 28px 10px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

/* 法人名・施設名とも途中で折り返さない。カードが横に細くなる幅では
   「村田透析クリ／ニック」のように名前が割れて読みにくくなるため。
   幅が足りない場合は、文字を少し詰める＋下のメディアクエリで1列に切り替える */
.p-global-menu__fac-card__corp {
  display: block;
  font-size: var(--fs-10);
  color: #888;
  line-height: 1.4;
  white-space: nowrap;
}

.p-global-menu__fac-card__name {
  display: block;
  font-size: clamp(0.85rem, 0.4rem + 0.6vw, 0.95rem);
  font-weight: 700;
  color: #333;
  line-height: 1.4;
  white-space: nowrap;
}

.p-global-menu__fac-card__arrow {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  background-color: var(--theme-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* --- 下部：ナビゲーションエリア（リスト＋サイド） --- */
.p-global-menu__right {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 40px 8%;
  gap: 60px;
  overflow-y: auto;
}

/* ナビリスト：2列グリッド */
.p-global-menu__list {
  flex: 1;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 48px;
  align-content: start;
}

.p-global-menu__list li {
  margin-bottom: 20px;
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.5s ease;
}

/* メニューが開いた時に順番に表示させる（ディレイ） */
.is-menu-open .p-global-menu__list li:nth-child(1) { transition-delay: 0.2s; }
.is-menu-open .p-global-menu__list li:nth-child(2) { transition-delay: 0.3s; }
.is-menu-open .p-global-menu__list li:nth-child(3) { transition-delay: 0.4s; }
.is-menu-open .p-global-menu__list li:nth-child(4) { transition-delay: 0.5s; }
.is-menu-open .p-global-menu__list li:nth-child(5) { transition-delay: 0.6s; }
.is-menu-open .p-global-menu__list li:nth-child(6) { transition-delay: 0.7s; }
.is-menu-open .p-global-menu__list li:nth-child(7) { transition-delay: 0.8s; }
.is-menu-open .p-global-menu__list li:nth-child(8) { transition-delay: 0.9s; }

.is-menu-open .p-global-menu__list li {
  opacity: 1;
  transform: translateX(0);
}

/* 各メニュー項目 */
.p-global-menu__list a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--theme-color) !important;
  font-size: var(--fs-20);
  font-weight: 700;
  transition: color 0.3s;
}

.p-global-menu__list a span {
  font-size: var(--fs-11);
  color: var(--theme-color) !important;
  letter-spacing: 0.1em;
  margin-bottom: 3px;
  opacity: 0.7;
}

.p-global-menu__list a:hover {
  opacity: 0.7;
}

/* --- サイドパネル（お問い合わせ＋ロゴ＋住所） --- */
.p-global-menu__side {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 4px;
}

/* お問い合わせボタン */
.p-global-menu__contact-btn {
  display: block;
  width: 100%;
  background-color: var(--theme-color);
  color: #fff !important;
  padding: 14px 20px;
  border-radius: 50px;
  font-size: var(--fs-16);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.3s;
  margin-bottom: 20px;
}

.p-global-menu__contact-btn:hover {
  opacity: 0.8;
}

/* ロゴ画像 */
.p-global-menu__logo {
  margin-top: 24px;
  margin-bottom: 4px;
}

.p-global-menu__logo img {
  max-width: 250px;
  height: auto;
}

/* 住所・連絡先ブロック */
.p-global-menu__address {
  font-style: normal;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 85, 46, 0.15);
  width: 100%;
}

.p-global-menu__address p {
  font-size: var(--fs-13);
  line-height: 1.8;
  color: #555;
  margin: 0;
}

/* ============================================================
   OPEN STATE (JS連動)
============================================================ */

/* 全画面メニュー表示 */
.is-menu-open .p-global-menu {
  opacity: 1;
  visibility: visible;
}

.is-menu-open .p-global-menu__list li {
  opacity: 1;
  transform: translateY(0);
}

/* 三本線を「×」にする */
.is-menu-open .p-header-menu-lines {
  background-color: transparent !important;
}

/* 2. 上下の線に色を再設定し、回転させる */
.is-menu-open .p-header-menu-lines::before,
.is-menu-open .p-header-menu-lines::after {
  /* ★ inherit を上書きして、白（またはテーマカラー）を指定 */
  background-color: #f7f3e9 !important; 
}

.is-menu-open .p-header-menu-lines::before {
  top: 0;
  transform: rotate(45deg);
}

.is-menu-open .p-header-menu-lines::after {
  top: 0;
  transform: rotate(-45deg);
}

/* テキストの切り替え（メニュー → 閉じる） */
.is-menu-open .p-header-menu-text.-open {
  opacity: 0;
  transform: translateY(5px);
}

/* --- 開いている時（.is-menu-open）のテキスト挙動 --- */
.is-menu-open .p-header-menu-text.-close {
  opacity: 1;
  transform: translateY(-50%); /* 中央配置維持 */
}


/* ============================================================
   SP　グローバルメニュー
============================================================ */
@media (max-width: 768px) {
  /* 上部：施設写真エリア（flex-basisを明示して高さを保証） */
  .p-global-menu__left {
    flex: 0 0 200px;
    height: 200px;
    min-height: unset;
    padding: 0;
  }

  .p-global-menu__bg-image {
    transform: none;
  }

  .p-global-menu__bg-image img {
    width: 100%;
    height: 100%;
    opacity: 0.45;
  }

  /* ナビ＋サイド＋バナー：flex:1 のままスクロール */
  .p-global-menu__right {
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 28px 28px 0;
    gap: 0;
  }

  /* ナビリストを2列に（左右3つずつ） */
  .p-global-menu__list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    flex: none;
    width: 100%;
  }

  .p-global-menu__list li {
    margin-bottom: 16px;
    transform: translateX(20px);
  }

  .p-global-menu__list a {
    font-size: var(--fs-15);
  }

  .p-global-menu__list a span {
    font-size: var(--fs-10);
  }

  /* サイドパネル：横幅フル */
  .p-global-menu__side {
    flex: none;
    width: 100%;
    margin-top: 24px;
  }

  .p-global-menu__contact-btn {
    font-size: var(--fs-16);
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 30px;
  }

  .p-global-menu__logo {
    margin-top: 24px;
  }

  .p-global-menu__logo img {
    max-width: 220px;
  }

  .p-global-menu__address {
    margin-top: 16px;
    padding-top: 16px;
  }

  .p-global-menu__address p {
    font-size: var(--fs-13);
    line-height: 2;
  }

  /* 施設バナー：縦積み1列（__right 内・問い合わせボタンと同幅） */
  .p-global-menu__banners {
    grid-template-columns: 1fr;
    width: 100%;
    padding: 24px 0 56px;
    gap: 10px;
    border-top: none;
    background: transparent;
  }

  .p-global-menu__fac-card {
    flex-direction: row;
    min-height: 64px;
    border-radius: 8px;
  }

  .p-global-menu__fac-card__photo {
    width: 80px;
    height: auto;
    flex-shrink: 0;
  }

  .p-global-menu__fac-card__body {
    padding: 10px 28px 10px 12px;
    gap: 2px;
  }

  .p-global-menu__fac-card__corp {
    display: block;
  }

  .p-global-menu__fac-card__name {
    font-size: var(--fs-13);
    line-height: 1.4;
  }

  .p-global-menu__fac-card__arrow {
    width: 20px;
    height: 20px;
    bottom: 8px;
    right: 8px;
  }
}

/* ============================================================
   PC グローバルメニュー：スクロールなし・画面にピタッと収まるレイアウト
============================================================ */
@media (min-width: 769px) {
  /* __left：画面が低い時は縮む */
  .p-global-menu__left {
    flex: 0 0 clamp(140px, 28vh, 260px);
  }

  /* __right：CSS Grid で list+side（1fr）/ banners（auto）縦2段 */
  .p-global-menu__right {
    display: grid;
    grid-template-columns: 1fr 280px;
    grid-template-rows: 1fr auto;
    column-gap: 60px;
    /* ※ overflow: hidden にしないこと。
       画面の縦が短いノートPC（例 1440×700）では中身がこの領域より高くなり、
       下段の施設バナー（3施設）がはみ出したまま、スクロールもできず
       たどり着けなくなる。auto なら収まっている間はスクロールバーが出ないので
       「スクロールバーなし」の見た目は保ったまま、足りないときだけスクロールできる。 */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0;
  }
  /* 縦が詰まったときに、施設バナーが画面の下端に貼り付いて切れて見えないよう
     下に余白を確保する（スクロールしきった位置で全体が見える） */
  .p-global-menu__banners {
    padding-bottom: clamp(24px, 4vh, 48px);
  }

  /* ナビリスト：セルの高さを100%使い、6項目を均等分散 */
  .p-global-menu__list {
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    align-content: stretch;
  }

  /* li の固定 margin-bottom を除去（stretch で制御） */
  .p-global-menu__list li {
    margin-bottom: 0;
  }

  .p-global-menu__side {
    grid-column: 2;
    grid-row: 1;
  }

  /* banners を下段フル幅に */
  .p-global-menu__banners {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-left: 0;
    padding-right: 0;
  }
}

/* 縦が短いノートPC（およそ800px以下）では、上の施設写真と各所の余白を詰めて
   3施設のバナーまで1画面に収める。スクロールできるだけだと、開いた時点で
   バナーが1枚も見えず「下に続きがある」と気づけないため。
   これでも収まらない極端に低い画面では、上の overflow-y:auto が受け皿になる。
   ※ このブロックは必ず上の @media (min-width: 769px) を閉じたあとに置くこと。
      中に差し込むと、それ以降の指定まで「縦800px以下のときだけ」適用になり、
      バナーの全幅表示（grid-column: 1 / -1）などが縦長の画面で効かなくなる。 */
@media (min-width: 769px) and (max-height: 800px) {
  .p-global-menu__left {
    flex-basis: clamp(96px, 14vh, 150px);
  }
  .p-global-menu__right {
    padding-top: 24px;
  }
  .p-global-menu__banners {
    padding-top: 20px;
  }
}

/* ============================================================
   PC用：ロゴの背後を通るメニューバー（上寄せ・右寄せ版）
============================================================ */

@media (min-width: 769px) {
  /* 1. ヘッダー全体の余白をリセット */
  .l-header-clinic {
    overflow: visible !important;
  }

  /* 2. ロゴ：看板スタイルを維持しつつ、位置を固定 */
  .p-header-logo {
    position: relative;
    z-index: 100; /* バーより上 */
    background-color: #fff;
    margin-top: 0; /* 上にぴったりつける */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1); /* 右と下に影を出す */
    /* border-radius は既存の 0 0 1.5rem 0 を継承 */
  }

  /* 3. メニューバー：上部に固定し、右側に項目を寄せる */
  .p-header-nav-pc {
    /* 右に向かってテーマカラーが濃くなるグラデーション */
    background: linear-gradient(to right, 
      color-mix(in srgb, var(--theme-color), transparent 80%) 0%, 
      color-mix(in srgb, var(--theme-color), transparent 40%) 50%, 
      var(--theme-color) 100%
    );
    
    /* ボタンの大きさに合わせて右の余白を調整 */
    right: 100px !important; 
    height: 100px; /* ボタンの高さに合わせるとより一体感が出ます */
    display: flex;
    align-items: center;
  }

  /* バーが青くなるので、文字は白で統一 */
  .p-header-nav-pc__list li a {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2); /* 視認性アップ */
  }


  .p-header-nav-pc {
    display: block;
    position: absolute;
    top: 0;         /* ★上部の隙間を無くす */
    left: 0;        /* 画面左端から開始（ロゴの後ろを通すため） */
    width: 100%;    /* 横幅いっぱい */
    height: 70px;   /* バーの高さ（お好みで調整） */
        /* 左に向かってテーマカラーが濃くなるグラデーション */
        background: linear-gradient(to left, 
      color-mix(in srgb, var(--theme-color), #fff 85%) 0%,  /* 左端：かなり薄いけど透けない */
      color-mix(in srgb, var(--theme-color), #fff 30%) 20%, /* 中間：少し濃い */
      var(--theme-color) 100%                             /* 右端：テーマカラー100% */
    ) !important;
    z-index: 50;    /* ロゴより後ろ */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-radius: 0; /* 上に寄せるため角丸は不要 */
    
    /* アニメーション準備 */
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s ease;
  }

  /* スクロール時に表示 */
  .l-header-clinic.is-scrolled .p-header-nav-pc {
    opacity: 1;
    transform: translateY(0);
  }

  /* 4. メニュー項目を右に寄せる */
  .p-header-nav-pc__list {
    display: flex;
    justify-content: flex-end; /* ★右寄せ */
    align-items: center;
    height: 100%;
    list-style: none;
    margin: 0;
    /* 右側のメガナビボタンと被らないよう余白を調整（重要） */
    padding-right: 110px; 
  }

  .p-header-nav-pc__list li {
    margin-left: 30px; /* 項目間の間隔 */
  }

  .p-header-nav-pc__list li a {
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: var(--fs-24);
    white-space: nowrap;
    transition: color 0.3s;
  }

  .p-header-nav-pc__list li a:hover {
    color: var(--theme-color);
  }
}

/* --- 通常時のメニュー文字色（白） --- */
.p-header-nav-pc__list li a {
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-block;
}

/* --- ホバー時、および選択中（直接リンク・スクロール連動共通）の文字色 --- */
.p-header-nav-pc__list li a:hover,
.p-header-nav-pc__list li a.is-active {
  color: #ffffff !important; /* クッキリ白い文字にする（または #ffeb3b などのアクセントカラー） */
  font-weight: 800;
  transform: scale(1.05); /* ほんの少し文字を大きくして強調 */
}

/* 選択中だけ、サイトのベース背景色（#f7f3e9）にする */
.p-header-nav-pc__list li a.is-active {
  color: var(--theme-color) !important; /* 文字色はテーマカラー（濃色） */
  font-weight: 800;
  
  /* ★白（#fff）で2pxのクッキリした縁取りを作る */
  text-shadow: 
     2px  2px 0 #fff,
    -2px  2px 0 #fff,
     2px -2px 0 #fff,
    -2px -2px 0 #fff,
     0px  2px 0 #fff,
     0px -2px 0 #fff,
     2px  0px 0 #fff,
    -2px  0px 0 #fff;
}

/* （オプション）選択中の文字の下に細いラインを入れる場合 */
.p-header-nav-pc__list li a.is-active::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff; /* 下線を入れることで選択中であることが一目で分かります */
  margin-top: 4px;
}


/* =================================================================
 * 診療案内インフォメーション セクション（完全版）
 * ================================================================= */


/* -----------------------------------------------------------------
 * 【左側】診療科目 ＆ 診療受付時間テーブル
 * -------------------------------------------------------------- */


/* 診療ありの●（CSS疑似要素） */
.wp-custom-infosection__table td.is-active::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-color: var(--theme-color);
  border-radius: 50%;
  margin: 0 auto;
}


/* -----------------------------------------------------------------
 * 【右側】交通アクセス ＆ お問い合わせ（フッター表示風）
 * -------------------------------------------------------------- */


@media (max-width: 576px) {
  .wp-custom-infosection__block {
    padding: 25px 20px; /* スマホでは内側の余白を狭く */
  }
  .wp-custom-infosection__media-box {
    flex-direction: column; /* アクセス内の文字と地図も縦並びに */
  }
  /* スマホ時は地図の枠ごと横幅いっぱいに広げる */
  .p-footer-map2 {
    width: 100%;
    margin-top: 15px;
  }
  .p-footer-map2 iframe {
    width: 100%;
    height: 200px;
  }
  .wp-custom-infosection__tel-link {
    font-size: var(--fs-26);
  }
  /* スマホ時はパネル全体の角丸を少し控えめに */
  .wp-custom-infosection__container {
    border-radius: 12px;
  }

  /* ──── 診療時間テーブル：スマホ向けコンパクト化 ──── */
  /* 曜日ヘッダー */
  .wp-custom-infosection__table thead th {
    padding: 10px 5px;
    font-size: var(--fs-13);
  }
  /* 診療内容の行ヘッダー（第1列）：最小幅を縮小 */
  .wp-custom-infosection__table tbody th {
    min-width: 72px;
    font-size: var(--fs-12);
    padding: 10px 6px;
    line-height: 1.35;
  }
  /* 曜日セル */
  .wp-custom-infosection__table td {
    padding: 10px 4px;
    font-size: var(--fs-14);
  }
  /* 診療ありの●を少し小さく */
  .wp-custom-infosection__table td.is-active::after {
    width: 13px;
    height: 13px;
  }
}

/* -----------------------------------------------------------------
 * お問い合わせエリア（電話・FAX：1列横並びレイアウト）
 * -------------------------------------------------------------- */


/* ==========================================================================
   安城更生病院スタイル再現セクション（WordPress干渉防止対策済）
   ========================================================================== */

/* 全体を包むラッパー（他セクションへのフォント・カラー干渉を防ぐ） */

/* 共通コンテナ — wp-custom-infosection と横幅を統一（max-width: 1400px、左右余白はセクション側で管理） */
.ak-notice-sec__container,
.ak-nav-cards__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}

/* ==========================================
   1. 重要なお知らせ スタイル
   ========================================== */
.ak-notice-sec {
  margin-top: -80px;
  position: relative;
  z-index: 10;
  margin-bottom: 40px;
  padding: 0 20px;
}

.ak-notice-box {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  background-color: #fdf1f1;
  border: 2px solid #d9383a;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(217, 56, 58, 0.12);
  padding: 20px 32px;
  box-sizing: border-box;
  width: 100%;
  transition: background-color .25s ease;
}

.ak-notice-box:hover {
  background-color: #fbe4e4;
}

.ak-notice-box__content {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 0;
}

.ak-notice-box__label {
  font-weight: bold;
  color: #d9383a;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-20);
  white-space: nowrap;
}

.ak-icon-alert {
  background-color: #d9383a;
  color: #fff;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-22);
}

.ak-notice-box__list {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.ak-notice-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
  color: #333;
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 1.5;
  padding: 4px 0;
  min-width: 0;
}

.ak-notice-item__date {
  font-size: var(--fs-15);
  color: #d9383a;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}

.ak-notice-item__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  transition: color .2s ease;
}

.ak-notice-item:hover .ak-notice-item__text {
  color: var(--theme-color);
}

/* 一覧へのリンク：PCはお知らせボックス右寄せ、SPは右上に絶対配置（下記メディアクエリ） */
.ak-notice-box__more {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  text-decoration: none;
  color: #333;
  font-size: var(--fs-15);
  font-weight: 600;
  white-space: nowrap;
  transition: opacity .2s ease;
}

.ak-notice-box__more:hover {
  opacity: 0.7;
}

.ak-notice-box__more-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #d9383a;
  flex-shrink: 0;
  position: relative;
}

.ak-notice-box__more-arrow::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

@media (max-width: 768px) {
  .ak-notice-box {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
  }

  .ak-notice-box__content {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .ak-notice-box__label {
    font-size: var(--fs-16);
    gap: 8px;
  }

  .ak-icon-alert {
    width: 30px;
    height: 30px;
    font-size: var(--fs-18);
  }

  .ak-notice-box__list {
    gap: 2px;
  }

  .ak-notice-item {
    flex-direction: column;
    gap: 2px;
    font-size: var(--fs-15);
    padding: 3px 0;
  }

  .ak-notice-item__date {
    font-size: var(--fs-13);
  }

  .ak-notice-item__text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* 一覧へのリンク：SPは右上に固定配置し、お知らせ本文の縦積みを妨げない */
  .ak-notice-box__more {
    position: absolute;
    top: 18px;
    right: 16px;
    gap: 6px;
    font-size: var(--fs-12);
  }

  .ak-notice-box__more-arrow {
    width: 22px;
    height: 22px;
  }

  .ak-notice-box__more-arrow::after {
    left: 7px;
    top: 8px;
    width: 5px;
    height: 5px;
  }
}

/* ==========================================
   災害時緊急連絡ページ（/emergency/）スタイル
   ========================================== */
.ak-emergency-page {
  min-height: 60vh;
  padding: 50px 20px 80px;
}

/* PC: 左右の余白を浮遊ヘッダーの帯（.l-header__inner の margin: 0 40px）と揃える */
@media (min-width: 1025px) {
  .ak-emergency-page {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.ak-emergency-page__inner {
  max-width: 1400px;
  margin: 20px auto;
}

/* ── ヘッダー ─────────────────────── */
.ak-emergency-page__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 24px 28px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e0e0e0;
}

/* PC: 浮遊ヘッダー（fixed / 上部40px + 帯高さ約90px）と重ならないよう自然な余白を確保 */
@media (min-width: 1025px) {
  .ak-emergency-page__head {
    margin-top: 100px;
  }
}

.ak-emergency-page__head.is-alert {
  border-color: #d9383a;
  background: #fff8f8;
}

.ak-icon-alert--lg {
  width: 52px;
  height: 52px;
  font-size: var(--fs-29);
  flex-shrink: 0;
}

.ak-emergency-page__title {
  font-size: var(--fs-30);
  font-weight: bold;
  color: #d9383a;
  margin: 0 0 4px;
  line-height: 1.3;
}

.ak-emergency-page__datetime {
  font-size: var(--fs-16);
  color: #888;
  margin: 0;
}

/* ── 全体バナー ────────────────────── */
.ak-emergency-global-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 28px;
  font-size: var(--fs-18);
  font-weight: 500;
  line-height: 1.5;
}

.ak-emergency-global-banner--normal {
  background: #eaf6ec;
  border: 1px solid #7ec880;
  color: #2e7d32;
}

.ak-emergency-global-banner--alert {
  background: #fff3f3;
  border: 2px solid #d9383a;
  color: #b71c1c;
}

/* ── ステータスバッジ（共通） ─────────── */
.ak-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--fs-13);
  font-weight: bold;
  white-space: nowrap;
}

/* 緊急連絡ページは高齢の方も読むため、バッジもひと回り大きく表示する */
.ak-emergency-page .ak-badge {
  padding: 5px 14px;
  font-size: var(--fs-15);
}

.ak-badge--green  { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.ak-badge--red    { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }

/* ── ステータス一覧テーブル ──────────── */
.ak-emergency-table-wrap {
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid #e0e0e0;
  margin-bottom: 40px;
  background: #fff;
}

.ak-emergency-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-17);
}

.ak-emergency-table thead th {
  background: #2c2c3a;
  color: #fff;
  text-align: left;
  padding: 14px 16px;
  font-size: var(--fs-16);
  font-weight: 600;
  white-space: nowrap;
}

.ak-emergency-table thead th:first-child { border-radius: 0; }

.ak-emergency-table tbody td {
  padding: 16px 18px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
}

.ak-emergency-row:last-child td { border-bottom: none; }


/* ハイライト（アンカーで来たとき） */
.ak-emergency-row.is-target {
  outline: 3px solid #d9383a;
  outline-offset: -2px;
  animation: ak-highlight 2s ease-out forwards;
}

@keyframes ak-highlight {
  0%   { background-color: #ffe0e0; }
  100% { background-color: inherit; }
}

/* 施設名セル */
.ak-emergency-row__name-cell {
  min-width: 180px;
  white-space: nowrap;
}

.ak-emergency-row__ftype {
  display: block;
  font-size: var(--fs-14);
  color: #999;
  margin-bottom: 2px;
}

.ak-emergency-row__name-link {
  text-decoration: none;
  color: inherit;
}

.ak-emergency-row__name-link strong {
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

.ak-emergency-row__name-link:hover strong {
  border-bottom-color: #333;
}

.ak-emergency-row__tel {
  display: block;
  font-size: var(--fs-17);
  font-weight: bold;
  color: #d9383a;
  text-decoration: none;
  margin-top: 6px;
}

.ak-emergency-row__tel:hover { text-decoration: underline; }

.ak-emergency-row__hours {
  display: block;
  font-size: var(--fs-15);
  color: #666;
  margin-top: 4px;
  line-height: 1.5;
}

.ak-emergency-row__hours-label {
  font-weight: bold;
  color: #444;
  margin-right: 2px;
}

/* 詳細セル */
.ak-emergency-row__detail-cell { min-width: 160px; }

.ak-emergency-row__post-title {
  font-size: var(--fs-16);
  color: #444;
  margin: 0 0 4px;
  line-height: 1.5;
}

.ak-emergency-row__detail-link {
  font-size: var(--fs-15);
  color: #d9383a;
  text-decoration: none;
  font-weight: bold;
}

.ak-emergency-row__detail-link:hover { text-decoration: underline; }

.ak-emergency-row__closed-note {
  font-size: var(--fs-15);
  color: #999;
}

.ak-emergency-row__no-notice {
  font-size: var(--fs-15);
  color: #aaa;
}

/* ── 詳細セクション ──────────────────── */
.ak-emergency-detail {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-left: 4px solid #d9383a;
  border-radius: 0 12px 12px 0;
  padding: 24px 28px;
  margin-bottom: 20px;
  scroll-margin-top: 80px;
}

.ak-emergency-detail__head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

.ak-emergency-detail__facility {
  font-size: var(--fs-21);
  font-weight: bold;
  color: #222;
  margin: 0;
}

.ak-emergency-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ak-emergency-detail__date {
  display: block;
  font-size: var(--fs-14);
  color: #999;
  margin-bottom: 10px;
}

.ak-emergency-detail__title {
  font-size: var(--fs-20);
  font-weight: bold;
  color: #c62828;
  margin: 0 0 12px;
}

.ak-emergency-detail__content {
  font-size: var(--fs-17);
  color: #333;
  line-height: 1.9;
}

.ak-emergency-detail__back {
  margin: 16px 0 0;
  font-size: var(--fs-15);
}

.ak-emergency-detail__back a {
  color: #888;
  text-decoration: none;
}

.ak-emergency-detail__back a:hover { text-decoration: underline; }

/* ── 施設連絡先グリッド ──────────────── */
.ak-emergency-contacts {
  margin-top: 48px;
}

.ak-emergency-contacts__heading {
  font-size: var(--fs-18);
  font-weight: bold;
  color: #333;
  border-left: 4px solid #d9383a;
  padding-left: 12px;
  margin: 0 0 16px;
}

.ak-emergency-contacts__grid {
  display: grid;
  /* auto-fit：施設数ぶんのカードを左右いっぱいに均等配置（空きトラックは詰める） */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.ak-emergency-contact-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 18px 20px;
}

.ak-emergency-contact-card__type {
  font-size: var(--fs-14);
  color: #aaa;
  margin: 0 0 3px;
}

.ak-emergency-contact-card__name {
  font-size: var(--fs-18);
  font-weight: bold;
  color: #222;
  margin: 0 0 10px;
}

.ak-emergency-contact-card__tel {
  display: block;
  font-size: var(--fs-21);
  font-weight: bold;
  color: #d9383a;
  text-decoration: none;
  margin-bottom: 6px;
  white-space: nowrap; /* 電話番号は常に1行（広い画面で列が狭くても折り返さない） */
}

.ak-emergency-contact-card__tel:hover { text-decoration: underline; }

.ak-emergency-contact-card__addr {
  font-size: var(--fs-14);
  color: #888;
  margin: 0;
  line-height: 1.6;
}

/* ── レスポンシブ ────────────────────── */
@media (max-width: 768px) {
  .ak-emergency-page { padding: 32px 12px 60px; }
  .ak-emergency-page__head { padding: 16px; }
  .ak-emergency-page__title { font-size: var(--fs-22); }
  .ak-emergency-page__datetime { font-size: var(--fs-14); }

  .ak-emergency-global-banner { font-size: var(--fs-15); padding: 14px 16px; }

  .ak-emergency-page .ak-badge { font-size: var(--fs-14); padding: 4px 12px; }

  .ak-emergency-table { font-size: var(--fs-15); }
  .ak-emergency-table thead th,
  .ak-emergency-table tbody td { padding: 12px 10px; }
  .ak-emergency-row__ftype { font-size: var(--fs-12); }
  .ak-emergency-row__tel { font-size: var(--fs-15); }
  .ak-emergency-row__hours { font-size: var(--fs-13); }
  .ak-emergency-row__post-title { font-size: var(--fs-14); }
  .ak-emergency-row__detail-link,
  .ak-emergency-row__closed-note,
  .ak-emergency-row__no-notice { font-size: var(--fs-14); }

  .ak-emergency-detail { padding: 18px 16px; }
  .ak-emergency-detail__facility { font-size: var(--fs-18); }
  .ak-emergency-detail__title { font-size: var(--fs-18); }
  .ak-emergency-detail__content { font-size: var(--fs-15); }

  .ak-emergency-contacts__grid { grid-template-columns: 1fr 1fr; }
  .ak-emergency-contact-card__name { font-size: var(--fs-16); }
  .ak-emergency-contact-card__tel { font-size: var(--fs-18); }
  .ak-emergency-contact-card__addr { font-size: var(--fs-13); }
}

@media (max-width: 480px) {
  .ak-emergency-contacts__grid { grid-template-columns: 1fr; }
}

/* ==========================================
   2. ナビ＋診療時間パネル スタイル
   ========================================== */
.ak-nav-cards {
  padding: 30px 20px 55px 20px;
}

/* 上下2段レイアウト：上＝電話・時間パネル、下＝アイコンナビ4枚 */
.ak-nav-cards__layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---- 下：アイコンナビ 4枚横並び ---- */
.ak-nav-cards__links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ▼▼▼【一時的に非表示】ak-nav-cards__links をまるっと非表示（復帰時はこのブロックを削除） ▼▼▼ */
.ak-nav-cards__links {
  display: none !important;
}
/* ▲▲▲【一時的に非表示】ここまで ▲▲▲ */

.ak-nav-link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--theme-color) 6%, #f7f3e9) 0%,
    color-mix(in srgb, var(--theme-color) 16%, #f7f3e9) 100%);
  border-radius: 14px;
  padding: 22px 10px 18px;
  text-decoration: none !important;
  border: 2px solid color-mix(in srgb, var(--theme-color) 35%, transparent);
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s, border-color 0.2s;
  min-height: 140px;
}
.ak-nav-link-item:hover {
  border-color: var(--theme-color);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

.ak-nav-link-item__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--theme-color);
  font-size: var(--fs-22);
}

.ak-nav-link-item__label {
  flex: 1;
  font-size: var(--fs-20);
  font-weight: 700;
  color: #222;
  text-align: center;
  line-height: 1.55;
}

.ak-nav-link-item__arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--theme-color);
  flex-shrink: 0;
  position: relative;
  margin-top: auto;
}
.ak-nav-link-item__arrow::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

/* ---- 4象限パネル：診療時間／診療科目（上段）＋ お問い合わせ／休診日（下段） ---- */
.ak-nav-info {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 32px 36px;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  display: grid;
  grid-template-columns: 6fr 4fr;
  column-gap: 0;
  row-gap: 24px;
}

/* 縦の区切り線：上から下まで1本で通す（列ごとのborderだと行間ギャップで
   途切れるため、パネル全体に対する絶対配置の疑似要素にする） */
.ak-nav-info::after {
  content: "";
  position: absolute;
  top: 32px;
  bottom: 32px;
  left: calc(36px + (100% - 72px) * 0.6);
  width: 1px;
  background: #e8e8e8;
}

/* 4象限の並び順：右列は「休診日→診療科目」の順で上下に並べる
   （左列は常に「診療時間→お問い合わせ」）。gridの自動配置はDOM順ではなく
   order-modified順で行われるため、orderだけで見た目の並びを入れ替える */
.ak-nav-info__cell--schedule { order: 1; }
.ak-nav-info__cell--closed   { order: 2; }
.ak-nav-info__cell--contact  { order: 3; }
.ak-nav-info__cell--dept     { order: 4; }

/* 上段2つ（診療時間・休診日）の下の区切り線。左右の余白をコンテンツの
   パディング（32px）と揃え、縦の区切り線側は40px（32px+8px）、外側は8px にする */
.ak-nav-info__cell--schedule,
.ak-nav-info__cell--closed {
  position: relative;
  padding-bottom: 24px;
}
.ak-nav-info__cell--schedule::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 40px;
  bottom: 0;
  height: 1px;
  background: #e8e8e8;
}
.ak-nav-info__cell--closed::after {
  content: "";
  position: absolute;
  left: 40px;
  right: 8px;
  bottom: 0;
  height: 1px;
  background: #e8e8e8;
}

/* 左列（診療時間・お問い合わせ）は右側に余白、右列（休診日・診療科目）は
   縦の区切り線分の左余白を確保して4象限をはっきり分ける */
.ak-nav-info__cell--schedule,
.ak-nav-info__cell--contact {
  padding-right: 32px;
}
.ak-nav-info__cell--dept,
.ak-nav-info__cell--closed {
  padding-left: 32px;
}

.ak-nav-info__cell--contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ak-nav-info__cell--closed {
  display: flex;
  align-items: flex-start; /* grid行の高さ(診療時間側)に合わせてボックスが
                               縦にビヨーンと伸びるのを防ぎ、内容量なりの
                               高さで上に詰めて表示する */
}

/* 4区画の見出しは .ak-nav-hours__heading と完全に同じ見え方にする
   （別々に数値を持つと、モバイルで 17.9px / 20px のように食い違う） */
.ak-nav-info__heading {
  font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.35rem);
  font-weight: 700;
  color: var(--theme-color);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: 0.06em;
}
.ak-nav-info__heading i {
  font-size: 1em;
}

/* PC: TEL・受付時間を左側に縦積みし、右側の空いた空間にフォームボタンを
   2行ぶんの高さで配置する。SP: 縦1列（TEL→受付時間→フォームボタン）に
   切り替える（@media側で flex-direction: column にするだけでよい）。 */
.ak-nav-info__contact-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 20px;
  width: 100%;
  margin-bottom: 14px;
}
.ak-nav-info__contact-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

/* 電話番号：高齢の方でも一目で分かるよう大きく・タップしやすく。
   アイコンのみ施設カラー、番号は黒系の文字色にする（磐田市立総合病院の
   お問い合わせ表示を参考）。 */
.ak-nav-info__tel {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  /* 番号の途中で折り返さない。flexアイテム（テキスト）は既定で縮んで
     しまい「022-771-」「1533」のように割れるため、明示的に禁止する。 */
  white-space: nowrap;
  font-size: var(--fs-42);
  font-weight: 800;
  color: #1a1a1a;
  text-decoration: none !important;
  letter-spacing: 0.02em;
  line-height: 1;
}
.ak-nav-info__tel:hover {
  opacity: 0.8;
}
.ak-nav-info__tel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-color);
  font-size: var(--fs-32);
  flex-shrink: 0;
}

.ak-nav-info__hours-line {
  font-size: var(--fs-17);
  font-weight: 700;
  color: #444;
  margin: 0;
}

/* メール（お問い合わせフォーム）リンク：PCではTEL・受付時間の右横の
   空いた空間に、その2行ぶんの高さに合わせて配置する薄い施設カラーの
   ボタン（TELが主役なので視覚的な主張は抑える） */
.ak-nav-info__mail-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 180px;
  background: color-mix(in srgb, var(--theme-color) 10%, #fff);
  color: var(--theme-color) !important;
  font-weight: 700;
  font-size: var(--fs-16);
  padding: 12px 24px;
  border-radius: 16px;
  text-decoration: none !important;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}
.ak-nav-info__mail-link:hover {
  background: color-mix(in srgb, var(--theme-color) 18%, #fff);
}
.ak-nav-info__mail-icon {
  font-size: var(--fs-17);
}

/* 休診日：他の区画（診療時間・診療科目）と同じ見出し＋左寄せ表示。
   見出し・アイコンは.ak-nav-hours__headingを共用して他の区画とサイズを揃え、
   日付テキストもバッジ化せず他のテキストと同じ左端のラインに揃える */
.ak-nav-info__closed-box {
  width: 100%;
}
.ak-nav-info__closed-box .ak-nav-hours__heading {
  margin: 0 0 26px;
}
.ak-nav-info__closed-text {
  display: block;
  margin: 0;
  color: #333;
  font-weight: 700;
  font-size: var(--fs-19);
  line-height: 1.5;
}

.ak-nav-hours__heading {
  font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--theme-color);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ak-nav-hours__heading i {
  font-size: 1em;
}

.ak-nav-hours__schedule {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  /* ※ container-type: inline-size は付けないこと。
     以前は「午前/午後を必ず1行に収める」ために cqi で文字を縮めていたが、
     画面幅900〜1200pxでは時刻が11.8〜21.3px、午前/午後ラベルは下限の
     8.8pxまで潰れて読めなかった（高齢の患者さんには特に厳しい）。
     現在は縮めずに、収まらなければ2行へ折り返す方式にしている。 */
}
.ak-nav-hours__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}
.ak-nav-hours__row:last-child {
  border-bottom: none;
}
.ak-nav-hours__label {
  display: inline-block;
  font-size: var(--fs-19);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--theme-color);
  background: #fff;
  border: 1.5px solid var(--theme-color);
  border-radius: 4px;
  padding: 4px 11px;
  line-height: 1.4;
  vertical-align: middle;
  flex-shrink: 0;
  align-self: center;
}
.ak-nav-hours__when {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 1;
  min-width: 0; /* flexアイテムの初期値min-width:autoのままだと、中の
                    時刻テキスト(nowrap)の分だけ幅が確保されて右カラムの
                    縦線を越えてはみ出すため、shrink可能にする */
}
.ak-nav-hours__days {
  font-size: var(--fs-17);
  font-weight: 600;
  color: #666;
  min-width: 84px;
  flex-shrink: 0;
}
/* 午前・午後を「/」区切りで横一列に表示。折り返さず、幅が足りない分は
   コンテナクエリでフォントサイズを縮小して対応する */
/* 午前・午後は1行に並べるが、幅が足りなければ文字を縮めずに折り返す。
   時刻そのもの（9:00〜12:00）は nowrap なので、途中で割れることはない。 */
.ak-nav-hours__time-group {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  min-width: 0; /* __whenと同じ理由。これがないと午後の時刻ブロックが
                    自分のmin-content分の幅を確保しようとして、親(__when)
                    の幅を無視して縦線の右へはみ出す */
}
/* 診療時間はこのパネルで最も探される情報なので、施設カラー＋大きめにして
   視線の着地点にする。サイズは画面幅基準（vw）で決め、下限18.4pxを死守する */
.ak-nav-hours__time {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: clamp(1.15rem, 0.6rem + 1.4vw, 1.75rem);
  font-weight: 800;
  color: var(--theme-color);
  letter-spacing: 0.02em;
  white-space: nowrap; /* 午前9:00〜12:00のように時刻の途中で改行されてしまうのを防ぐ */
  font-variant-numeric: tabular-nums; /* 午前/午後で桁位置が揃う */
}
/* 午前・午後は「時刻の見出し」なので、小さくするのではなく淡いバッジにして
   時刻本体と役割を分ける（旧実装は最小8.8pxまで潰れていた） */
.ak-nav-hours__time-ampm {
  flex-shrink: 0;
  font-size: clamp(0.95rem, 0.89rem + 0.3vw, 1.05rem);
  font-weight: 700;
  color: var(--theme-color);
  background: #f2f2f2; /* color-mix 未対応ブラウザ(iOS Safari 16.2未満)用 */
  background: color-mix(in srgb, var(--theme-color) 10%, #fff);
  border-radius: 4px;
  padding: 2px 7px;
  margin-right: 0;
  letter-spacing: 0.04em;
}
.ak-nav-hours__time-sep {
  color: #ccc;
  font-weight: 400;
}

/* ---- 診療科目 ---- */
.ak-nav-hours__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px;
}
.ak-nav-hours__tag {
  display: inline-block;
  font-size: var(--fs-17);
  font-weight: 700;
  color: #fff;
  background: var(--theme-color);
  border: 1.5px solid var(--theme-color);
  border-radius: 4px;
  padding: 4px 12px;
  line-height: 1.4;
}

/* PC 2列レイアウトの中でも769px〜830pxあたりは診療時間の列(6fr)が狭く、
   ラベル＋曜日＋午前/午後の時刻を1行に収めるとmin-content同士がぶつかって
   縦線の右へはみ出す。この幅ではモバイルと同じ構成（ラベル＋曜日を1行目、
   午前/午後の時刻をまとめて2行目）に切り替えて、はみ出しを避ける。 */
@media (min-width: 769px) and (max-width: 830px) {
  .ak-nav-hours__row {
    flex-wrap: wrap;
  }
  .ak-nav-hours__when {
    display: contents;
  }
  .ak-nav-hours__time-group {
    flex-basis: 100%;
    margin-top: 4px;
  }
  /* フォントサイズは共通指定のまま（旧実装はここで午前/午後を10.4pxまで
     落としていたが、現在は縮めずに折り返す方式なので上書き不要） */
}

/* モバイル */
@media (max-width: 768px) {
  .ak-nav-cards { padding: 24px 16px 40px; }
}

@media (max-width: 768px) {
  /* ナビ：2枚×2段で並べる */
  .ak-nav-cards__links {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .ak-nav-link-item {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: auto;
    padding: 16px 10px 14px;
    gap: 8px;
  }
  .ak-nav-link-item__icon {
    width: 44px;
    height: 44px;
    font-size: var(--fs-19);
  }
  .ak-nav-link-item__label {
    text-align: center;
    font-size: var(--fs-14);
    line-height: 1.35;
  }
  .ak-nav-link-item__arrow {
    width: 22px;
    height: 22px;
  }
  .ak-nav-link-item__arrow::after {
    left: 8px;
    top: 7px;
    width: 5px;
    height: 5px;
  }

  /* ==========================================================
     モバイル：4区画を「カード」として縦に積む
     ----------------------------------------------------------
     旧実装は、白地に細い罫線で4区画を区切ったうえで、要素ごとに
     別々の clamp() を持たせていた。その結果 375px では
     見出し17.9px / 20px、午前・午後11.1px、タグ13.9px …と
     文字サイズが11〜32pxまでバラつき、区切りも弱かった。
     ここでは次の3点に整理している。
       1) 区画ごとに淡い施設カラーのカードを与え、境界を面で見せる
       2) 文字サイズを下の5段階だけに統一する
          見出し19〜22 / 時刻18〜28 / ラベル・曜日16〜17 / 補足15〜17 / TELは別格
       3) 本文系は15px以上を死守する（高齢の患者さんの可読性）
     ========================================================== */
  .ak-nav-info {
    /* 1fr(=minmax(auto,1fr)) だと、トラック最小が「最も広いセルの中身」になり、
       nowrap の電話番号などが少しでも幅を超えるとトラックごと膨らみ、
       同じトラックを共有する全カードが一斉に右へはみ出す（iOSで発生）。
       minmax(0,1fr) で最小を 0 にし、トラックが親幅を超えないようにする。 */
    grid-template-columns: minmax(0, 1fr);
    padding: clamp(14px, 10px + 1.2vw, 20px);
    row-gap: clamp(10px, 8px + 0.6vw, 14px);
    column-gap: 0;
    background: #fff;
  }
  /* 縦の区切り線・区画ごとの罫線はカード化により不要 */
  .ak-nav-info::after,
  .ak-nav-info__cell--schedule::after,
  .ak-nav-info__cell--closed::after {
    display: none;
  }
  /* 4区画すべて同じカード。左右のパディングとテキストの開始位置が
     区画ごとに違っていた（PC用の 8px / 40px インセットの名残）のを解消する */
  .ak-nav-info__cell {
    box-sizing: border-box;
    min-width: 0; /* nowrap の中身がカード幅を押し広げないようにする */
    padding: clamp(14px, 11px + 0.9vw, 18px);
    border-radius: 14px;
    /* 1行目は color-mix 未対応ブラウザ(iOS Safari 16.2未満)用のフォールバック。
       未対応環境では施設カラーの淡い色みが無くなるだけで、カードの形は保たれる */
    background: #fafafa;
    border: 1px solid #e6e6e6;
    background: color-mix(in srgb, var(--theme-color) 4%, #fff);
    border-color: color-mix(in srgb, var(--theme-color) 14%, #fff);
  }
  /* PC用の非対称なインセット（左右32px / 8px・40px など）を打ち消して、
     4枚とも同じ余白・同じ左端に揃える */
  .ak-nav-info__cell--schedule,
  .ak-nav-info__cell--closed,
  .ak-nav-info__cell--contact,
  .ak-nav-info__cell--dept {
    padding: clamp(14px, 11px + 0.9vw, 18px);
    border-left-width: 1px;
    border-bottom-width: 1px;
  }
  /* お問い合わせは行動につながる区画なので、白地＋濃いめの枠で1枚だけ目立たせる */
  .ak-nav-info__cell--contact {
    background: #fff;
    border-color: #d5d5d5;
    border-color: color-mix(in srgb, var(--theme-color) 26%, #fff);
  }
  /* 縦積みの順番：情報（いつ・何科か）を先に読ませ、
     行動（電話・フォーム）で締める。
       診療時間 → 休診日 → 診療科目 → お問い合わせ
     PCは4象限なのでベースの order（左列=時間/問合、右列=休診日/科目）のまま。 */
  .ak-nav-info__cell--dept    { order: 3; }
  .ak-nav-info__cell--contact { order: 4; }

  /* ---- 見出し（4区画共通）---- */
  .ak-nav-hours__heading,
  .ak-nav-info__heading {
    font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.35rem);
    margin: 0 0 clamp(10px, 7px + 0.9vw, 14px);
  }
  .ak-nav-info__closed-box .ak-nav-hours__heading {
    margin-bottom: clamp(10px, 7px + 0.9vw, 14px);
  }

  /* ---- 診療時間 ---- */
  /* ラベル(人工透析)＋曜日(月〜土)を1行目、時刻を2行目に置く。
     __when は display:contents で箱を消し、days / time-group を
     .ak-nav-hours__row の直接の flex アイテムとして扱う */
  .ak-nav-hours__row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    padding: 0;
  }
  .ak-nav-hours__row + .ak-nav-hours__row {
    margin-top: clamp(12px, 9px + 0.8vw, 16px);
    padding-top: clamp(12px, 9px + 0.8vw, 16px);
    border-top: 1px dashed #dcdcdc;
    border-top-color: color-mix(in srgb, var(--theme-color) 22%, #fff);
  }
  .ak-nav-hours__label {
    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1rem);
    padding: 4px 10px;
  }
  .ak-nav-hours__when {
    display: contents;
  }
  .ak-nav-hours__days {
    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1rem);
    min-width: auto;
    color: #4a4a4a;
  }
  /* 午前・午後はそれぞれ独立した行にする。1行に詰めるために文字を縮める方式は
     端末のフォント差で破綻しやすく、実際に8.8pxまで潰れていた */
  .ak-nav-hours__time-group {
    flex-basis: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: 2px;
  }
  .ak-nav-hours__time {
    font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.65rem);
  }
  /* 行が分かれるので区切りの「/」は不要（各行に午前・午後が付く） */
  .ak-nav-hours__time-sep {
    display: none;
  }

  /* ---- お問い合わせ ---- */
  /* サイズは vw 基準の clamp で決める。コンテナクエリ(cqi)は古い iOS Safari が
     未対応で、その場合は宣言ごと無効になって既定値に戻り、かえってはみ出す。
     折り返しは white-space: nowrap（共通側）で禁止済み。 */
  .ak-nav-info__tel {
    /* 320〜430px では nowrap の番号がカード幅ぎりぎり（実測 余裕19px）で、
       実機のフォント差でにじみ出る。基準を下げて常に余裕を持たせる
       （それでも約27px で十分に大きく、高齢の患者さんにも読みやすい）。 */
    font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.6rem);
    gap: clamp(12px, 8px + 1vw, 14px);
    min-width: 0;
  }
  .ak-nav-info__tel-icon {
    font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  }
  /* TEL・受付時間を縦積みにし、フォームボタンをその下に幅いっぱいで表示 */
  .ak-nav-info__contact-row {
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: clamp(12px, 8px + 1vw, 16px);
    margin-bottom: 0;
  }
  .ak-nav-info__contact-left {
    gap: 6px;
    /* ※ container-type: inline-size は付けないこと。
       付けるとこの要素の高さが中身(約67px)より大きく(約242px)なり、
       justify-content:center と相まって TEL の上下に約87pxずつの
       大きな余白ができてしまう。 */
  }
  .ak-nav-info__hours-line {
    font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
    margin: 0;
  }
  .ak-nav-info__mail-link {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    padding: clamp(13px, 10px + 1vw, 16px) 18px;
    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1rem);
    background: var(--theme-color);
    color: #fff !important;
  }

  /* ---- 休診日 ---- */
  .ak-nav-info__closed-text {
    font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.25rem);
  }

  /* ---- 診療科目 ---- */
  .ak-nav-hours__tags {
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
  }
  .ak-nav-hours__tag {
    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1rem);
    padding: 5px 12px;
  }
}

  
/* ============================================================
   泉松会 HERO SECTION (TOP)
============================================================ */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end; /* 中身を下寄せ */
  justify-content: flex-start; /* 中身を左寄せ */
  min-height: 100vh; /* 全画面表示を維持 */
  padding-bottom: 60px; /* 下に少し余白を作る（お好みで調整） */
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-teal) 100%);
}


.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 5vw, 42px);
  color: var(--color-bg-beige);
  line-height: 1.35;
  margin-bottom: 20px;
}

.hero-title em {
  font-style: normal;
  color: var(--color-bg-beige);
}


/* ============================================================
   INFO BAR
============================================================ */


/* ============================================================
   カテゴリー
============================================================ */

/* カテゴリ一覧のベース設定 */
.t-clinic-archive .t-home-heading__ja {
  position: relative;
  padding-bottom: 10px;
}

/* ワンクリニック (senshou-clinic) のデザイン */
.p-category-senshou-clinic .t-home-heading__ja {
  color: #005bac; /* クリニックのメインカラー */
}
.p-category-senshou-clinic .c-news-cate {
  background-color: #005bac;
  color: #fff;
}

/* 栄養指導 (nutrition) のデザイン */
.p-category-nutrition .t-home-heading__ja {
  color: #2ecc71;
}
.p-category-nutrition .c-news-cate {
  background-color: #2ecc71;
}

/* ============================================================
   Sアニメーション
============================================================ */


@keyframes draw-s-slanted {
  0% {
    stroke-dashoffset: 800;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  /* 80%地点で左下まで描ききる */
  80% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  /* 最後はフェードアウトしながら消える */
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}


/* ============================================================
   NEWS BAR
============================================================ */


.about-text {
  color: var(--color-text-light);
  line-height: 2;
  margin-bottom: 16px;
  font-size: var(--fs-15);
}


.about-feature {
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  padding: 20px;
  border-left: 3px solid var(--color-primary);
}


/* ============================================================
   FACILITIES
============================================================ */
.facilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.facility-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  border: 1px solid var(--color-border);
}

.facility-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.facility-card-thumb {
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-48);
}

.facility-card-thumb.clinic { background: linear-gradient(135deg, #005B9A, #0077A8); }
.facility-card-thumb.kaigo { background: linear-gradient(135deg, #2E7D32, #43A047); }

.facility-card-body { padding: 24px; }

.facility-card-type {
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.facility-card-name {
  font-family: var(--font-heading);
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 12px;
}

.facility-card-info {
  font-size: var(--fs-13);
  color: var(--color-text-light);
  line-height: 1.7;
  margin-bottom: 20px;
}

.facility-card-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--color-primary);
}

.facility-card-link::after {
  content: '→';
  transition: var(--transition);
}

.facility-card:hover .facility-card-link::after { transform: translateX(4px); }

/* ============================================================
   NEWS LIST
============================================================ */
.news-list { display: flex; flex-direction: column; gap: 0; }

.news-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
  transition: var(--transition);
}

.news-item:hover { background: var(--color-primary-light); padding-left: 12px; padding-right: 12px; border-radius: var(--radius-sm); }

.news-date {
  flex-shrink: 0;
  font-size: var(--fs-13);
  color: var(--color-text-light);
  min-width: 100px;
}

.news-cat {
  flex-shrink: 0;
  font-size: var(--fs-11);
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 100px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  min-width: 80px;
  text-align: center;
}

.news-cat.cat-info { background: #E3F2FD; color: #1565C0; }
.news-cat.cat-column { background: #E8F5E9; color: #2E7D32; }
.news-cat.cat-recruit { background: #FFF3E0; color: #E65100; }

.news-title {
  font-size: var(--fs-14);
  color: var(--color-text);
  line-height: 1.6;
  flex: 1;
}

.news-item:hover .news-title { color: var(--color-primary); }

/* ============================================================
   PAGE HERO (inner pages)
============================================================ */
.page-hero {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-teal) 100%);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.page-hero-inner {
  position: relative;
  z-index: 1;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-13);
  color: rgba(255,255,255,0.6);
  margin-bottom: 16px;
}

.breadcrumb a { color: rgba(255,255,255,0.7); }
.breadcrumb a:hover { color: var(--color-white); }
.breadcrumb span { color: rgba(255,255,255,0.4); }

.page-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(26px, 4vw, 40px);
  color: var(--color-white);
  line-height: 1.35;
}

.page-hero-sub {
  font-size: var(--fs-14);
  color: rgba(255,255,255,0.75);
  margin-top: 10px;
  letter-spacing: 0.05em;
}

/* ============================================================
   FACILITY DETAIL PAGE
============================================================ */
.facility-detail-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.facility-detail-visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-80);
}

.facility-detail-visual.clinic-visual {
  background: linear-gradient(135deg, #005B9A, #0077A8);
}

.facility-detail-visual.kaigo-visual {
  background: linear-gradient(135deg, #2E7D32, #43A047);
}

.facility-detail-tag {
  display: inline-block;
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 100px;
  padding: 4px 14px;
  margin-bottom: 16px;
}

.facility-detail-name {
  font-family: var(--font-heading);
  font-size: clamp(22px, 3vw, 30px);
  color: var(--color-primary-dark);
  margin-bottom: 20px;
}

.facility-detail-desc {
  color: var(--color-text-light);
  line-height: 2;
  font-size: var(--fs-15);
  margin-bottom: 28px;
}

.facility-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
}

.facility-info-table th,
.facility-info-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.facility-info-table th {
  width: 120px;
  color: var(--color-text-light);
  font-weight: 600;
  background: var(--color-gray-light);
  border-right: 3px solid var(--color-primary);
}

.facility-info-table td { color: var(--color-text); }

/* Services Section */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service-item {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--color-primary);
  transition: var(--transition);
}

.service-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.service-icon { font-size: var(--fs-32); margin-bottom: 16px; }
.service-name {
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 10px;
}
.service-desc { font-size: var(--fs-13); color: var(--color-text-light); line-height: 1.7; }


/* --- 1. ベースコンテナの設定 --- */
.lcl-slider {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 540px; /* 全体の高さ */
  overflow: hidden;
}

/* 背景の薄いグレーの敷物 */
@media screen and (min-width: 768px) {
  .lcl-slider::before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: calc(100% - 137px);
    background-color: #fff;
  }
}

/* スマホ時の全体の高さ＋背景分割（PC版::before と同じ構造） */
@media screen and (max-width: 767px) {
  .lcl-slider {
    height: 64vw;
  }
  /* 上 1/3（≒21vw）をベースカラー、下 2/3 を白に */
  .lcl-slider::before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: calc(100% - 21vw); /* 64vw - 21vw ≈ 下2/3が白 */
    background-color: #fff;
  }
}

/* --- 2. スライドレーンの設定（ぐらつき対策適用） --- */
.lcl-slider .lcl-slider__in {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  gap: 28px; /* 写真同士のすき間 */
  
  /* 3Dアクセラレーションによるガタつき完全防止 */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  
  -webkit-animation: slideAni 45s infinite forwards linear;
  animation: slideAni 45s infinite forwards linear;
}

@media screen and (max-width: 767px) {
  .lcl-slider .lcl-slider__in {
    gap: 3.3vw;
  }
}

/* マウスホバー・アクティブ時の演出 */
@media(hover: hover) {
  .lcl-slider .lcl-slider__in:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }
}
.lcl-slider .lcl-slider__in.lcl-slider__in--on {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

/* --- 3. 画像共通設定（画質補正適用） --- */
.lcl-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 28px;
  display: block;
  
  /* 縮小時のエッジクッキリ補正 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: smooth;
  transform: translateZ(0);
}

/* --- 4. 各形状のサイズ定義（PC版：すべて440px高で統一） --- */

/* 1段の大きな長方形 */
.slider-item.size-rect-single {
  width: 580px;
  height: 440px;
  flex-shrink: 0;
}

/* 2段組の長方形を囲うボックス */
.slider-item-column {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 上下の長方形の間のすき間 */
  flex-shrink: 0;
}

/* 2段組の中に入る長方形 */
.slider-item-column .size-rect {
  width: 380px;  
  height: 210px; /* (210px * 2) + 20px = ぴったり440px */
}

/* --- 5. 各形状のサイズ定義（スマホ版レスポンシブ） --- */
@media screen and (max-width: 767px) {
  .slider-item.size-rect-single {
    width: 68.7vw;
    height: 52.1vw;
  }
  .slider-item-column {
    gap: 2.3vw;
  }
  .slider-item-column .size-rect {
    width: 45vw;
    height: 24.9vw;
  }
  .lcl-slider img {
    border-radius: 3.3vw;
  }
}

/* --- 6. 無限ループアニメーション（3Dグラフィック駆動） --- */
@keyframes slideAni {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
@-webkit-keyframes slideAni {
  0% { -webkit-transform: translate3d(0, 0, 0); }
  100% { -webkit-transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   p-clinic-intro （上部挨拶 ＋ 6つの特徴 統合セクション）
   ========================================================================== */
  

/* ==========================================================================
   p-clinic-intro__top（上部挨拶セクション：背景アニメーション連動版）
   ========================================================================== */


  /* section 自体：上下ともドーム型（上凸・下凸）で完結するセクション */
  .p-clinic-intro {
    background: var(--color-bg);
    /* 上：中央が高いドーム / 下：中央が低いドーム（上下対称） */
    border-radius: 50% 50% 50% 50% / 100px 100px 100px 100px;
    /* box-shadow スプレッドで均一幅の縁取り */
    box-shadow: 0 0 0 10px var(--theme-color);
    /* この縁取りは要素の「左右」にも10pxはみ出す。セクションは全幅なので
       通常は画面外に隠れて見えないが、端末が横方向にわずかでもズームアウト
       すると、画面右端（左端）に施設カラーの縦線として現れてしまう。
       上下のアーチぶん(±20px)だけ残し、左右は要素の端で切り取ることで、
       画面内の見た目は変えずに、はみ出した縦線が描かれないようにする。 */
    clip-path: inset(-20px 0 -20px 0);
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-top: -100px;    /* 上アーチを t-home-news 白エリアに重ねる */
    margin-bottom: -100px; /* 下アーチを l-concept 白エリアに重ねる */
  }
  

  /* -------------------------------------------------------------------------
     左側：メッセージカラム
     ------------------------------------------------------------------------- */


  /* ==========================================================================
     背景を生き生きと動かすためのアニメーション（魔法の記述）
     ※border-radiusの縦横比を滑らかに変えることで、流体のような動きを作ります
     ========================================================================== */
  
  /* 青い丸の変形アニメーション */
  @keyframes waveAnimationBlue {
    0% {
      border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
      transform: translate(0, 0) rotate(0deg);
    }
    50% {
      border-radius: 70% 30% 52% 48% / 60% 40% 60% 40%;
      transform: translate(5px, -10px) rotate(8deg); /* わずかに位置もズラす */
    }
    100% {
      border-radius: 50% 50% 30% 70% / 40% 60% 40% 60%;
      transform: translate(-5px, 5px) rotate(-5deg);
    }
  }
  
  /* 緑の丸の変形アニメーション */
  @keyframes waveAnimationGreen {
    0% {
      border-radius: 50% 50% 30% 70% / 40% 60% 40% 60%;
      transform: translate(0, 0) rotate(0deg);
    }
    50% {
      border-radius: 38% 62% 60% 40% / 43% 57% 41% 59%;
      transform: translate(-10px, 5px) rotate(-12deg);
    }
    100% {
      border-radius: 65% 35% 50% 50% / 55% 45% 55% 45%;
      transform: translate(5px, -5px) rotate(6deg);
    }
  }
  
  
  /* -------------------------------------------------------------------------
     スマホ対応
     ------------------------------------------------------------------------- */
  @media (max-width: 1023px) {
    .p-clinic-intro__top { padding: 60px 0 30px; }
    .p-clinic-intro { border-radius: 50% 50% 50% 50% / 60px 60px 60px 60px; margin-top: -60px; margin-bottom: -60px; }
    .p-clinic-intro__top-inner { gap: 32px; margin: 40px auto; }
    .p-clinic-intro__photo-col { padding: 16px; }
    .p-clinic-intro__main-title { font-size: var(--fs-36); }
    .p-clinic-intro__lead { font-size: var(--fs-19); line-height: 2.0; }

    .p-clinic-intro__deco-blob.mod-blue {
      width: 220px;
      height: 220px;
      top: -30px;
      left: -30px;
      animation: waveAnimationBlue 8s infinite alternate ease-in-out;
    }
    .p-clinic-intro__deco-blob.mod-green {
      width: 260px;
      height: 260px;
      bottom: -30px;
      right: -30px;
      animation: waveAnimationGreen 10s infinite alternate ease-in-out;
    }
    .p-clinic-intro__photo-frame { border-radius: 24px; }
  }


  /* ==========================================================================
   p-asymmetry-features
   ・写真＝左／文章＝右で全項目を同方向に統一した「読ませる」レイアウト
   ・スクロールに合わせて1項目ずつ下からふわっと出現（IntersectionObserver）
   ・モバイル：写真上／文章下に縦積み
   ========================================================================== */

/* ==========================================================================
   p-feature-panels（濃い施設カラーの特徴パネルナビ）
   ・p-asymmetry-features の上に配置する導入的なパネル群
   ・各パネルは下部の詳細セクション（#c-feature-N）へリンク
   ========================================================================== */
.p-feature-panels {
  position: relative;
  padding: 0 24px 80px;
  background: var(--color-primary-light);
}
.p-feature-panels__inner {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  z-index: 1;
}

/* ─── ヘッダー ─── */
.p-feature-panels__head {
  text-align: center;
  margin-bottom: 64px;
}
.p-feature-panels__symbol img { height: 44px; width: auto; }
.p-feature-panels__en {
  font-family: "Montserrat", sans-serif;
  font-size: var(--fs-13);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--theme-color);
  margin: 14px 0 8px;
}
.p-feature-panels__title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: clamp(2rem, 3.8vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  margin: 0;
  color: #333;
}
.p-feature-panels__num-accent {
  font-family: "Montserrat", "Zen Maru Gothic", sans-serif;
  font-size: 1.4em;
  color: var(--theme-color);
  margin-right: 0.05em;
}
.p-feature-panels__catch {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 24px 0 0;
  color: #444;
}
.p-feature-panels__lead {
  max-width: 960px;
  margin: 18px auto 0;
  font-size: var(--fs-21);
  line-height: 2.05;
  font-weight: 500;
  color: #6b6b6b;
  letter-spacing: 0.03em;
  text-indent: 1em;
}

/* ─── パネルグリッド ─── */
.p-feature-panels__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.p-feature-panels__item {
  display: flex;
}
.p-feature-panels__link {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 190px;
  padding: 26px 26px 22px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--theme-color), #fff 88%);
  border: 1px solid color-mix(in srgb, var(--theme-color), transparent 55%);
  color: var(--theme-color);
  text-decoration: none;
  overflow: hidden;
  /* transform のみ：コンポジタ処理でメインスレッドを使わない */
  transition: transform 0.28s ease, border-color 0.28s ease;
  will-change: transform;
}
.p-feature-panels__link::after {
  content: "\203A";
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-size: var(--fs-29);
  font-weight: 700;
  line-height: 1;
  color: var(--theme-color);
  opacity: 0.45;
  transition: opacity 0.28s ease;
  pointer-events: none;
  z-index: 1;
}
.p-feature-panels__link.is-photo::after {
  color: #fff;
  opacity: 0.7;
}
.p-feature-panels__link:hover::after,
.p-feature-panels__link:focus-visible::after {
  opacity: 1;
}
/* 写真パネル：背景に写真を敷く（画像はインラインstyleで指定） */
.p-feature-panels__link.is-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.28s ease, border-color 0.28s ease;
}
/* 写真マスク：下側を濃くしてラベル可読性を確保、全体は薄め */
.p-feature-panels__link.is-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--theme-color), #000 20%) 0%,
      color-mix(in srgb, var(--theme-color), transparent 55%) 55%,
      transparent 100%);
  opacity: 0.72;
  transition: opacity 0.28s ease;
  z-index: 0;
}
/* 写真パネルのテキスト・アイコンは白 */
.p-feature-panels__link.is-photo .p-feature-panels__num,
.p-feature-panels__link.is-photo .p-feature-panels__label,
.p-feature-panels__link.is-photo .p-feature-panels__icon {
  color: #fff;
}
/* コンテンツはマスクより前面へ */
.p-feature-panels__num,
.p-feature-panels__label {
  position: relative;
  z-index: 1;
}
.p-feature-panels__num {
  font-family: "Montserrat", sans-serif;
  font-size: var(--fs-40);
  font-weight: 800;
  line-height: 1;
  color: color-mix(in srgb, var(--theme-color), #fff 50%);
}
.p-feature-panels__icon {
  position: absolute;
  top: 24px;
  right: 22px;
  width: 34px;
  height: 34px;
  color: color-mix(in srgb, var(--theme-color), #fff 20%);
  z-index: 1;
}
.p-feature-panels__icon svg {
  width: 100%;
  height: 100%;
}
.p-feature-panels__label {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: var(--fs-20);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-top: auto;
  padding-top: 18px;
  color: var(--theme-color);
}
/* ホバー：浮き上がり */
.p-feature-panels__link:hover,
.p-feature-panels__link:focus-visible {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--theme-color), transparent 25%);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--theme-color), transparent 68%);
}
.p-feature-panels__link.is-photo:hover,
.p-feature-panels__link.is-photo:focus-visible {
  box-shadow: inset 0 0 0 3px var(--theme-color), 0 12px 32px color-mix(in srgb, var(--theme-color), transparent 68%);
}
.p-feature-panels__link.is-photo:hover::before,
.p-feature-panels__link.is-photo:focus-visible::before {
  opacity: 0.25;
}

/* ─── レスポンシブ ─── */
@media (max-width: 900px) {
  .p-feature-panels__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .p-feature-panels { padding: 60px 16px 60px; }
  .p-feature-panels__head { margin-bottom: 36px; }
  .p-feature-panels__lead { font-size: var(--fs-17); line-height: 1.9; text-indent: 0; }
  .p-feature-panels__grid { gap: 10px; }
  .p-feature-panels__link { padding: 18px 16px 16px; min-height: 150px; }
  .p-feature-panels__num { font-size: var(--fs-30); }
  .p-feature-panels__icon { width: 24px; height: 24px; top: 16px; right: 14px; }
  .p-feature-panels__label { font-size: var(--fs-16); padding-top: 14px; }
  .p-feature-panels__link { border-width: 1.5px; }
  .p-feature-panels__link:active {
    transform: scale(0.96);
    border-color: color-mix(in srgb, var(--theme-color), transparent 10%);
    transition: transform 0.1s ease, border-color 0.1s ease;
  }
}
@media (max-width: 340px) {
  .p-feature-panels__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   p-asymmetry-features
   ========================================================================== */

/* 全体のベース設定 */
.p-asymmetry-features {
  padding: 40px 0 80px;
  position: relative;
}
/* 独立ページ（当院の特徴）版：上下余白を確保 */
.p-asymmetry-features--page {
  padding: 72px 0 96px;
}
/* パネルから #c-feature-N でジャンプした際、固定ヘッダーに隠れないよう余白 */
.p-asymmetry-features__row[id] {
  scroll-margin-top: 120px;
}

/* ─── 特徴ページ：トップへ戻る導線 ─── */
.p-clinic-features-back {
  text-align: center;
  padding: 0 24px 96px;
}
.p-clinic-features-back__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border: 2px solid var(--theme-color, #8a7d6a);
  border-radius: 50px;
  color: var(--theme-color, #8a7d6a);
  font-weight: 700;
  font-size: var(--fs-16);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.p-clinic-features-back__link svg {
  width: 18px;
  height: 18px;
}
.p-clinic-features-back__link:hover,
.p-clinic-features-back__link:focus-visible {
  background: var(--theme-color, #8a7d6a);
  color: #fff;
}

/* ─── セクションヘッダー ─────────────────────────────── */
.p-asymmetry-features__title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 40px;
}
.p-asymmetry-features__symbol { color: var(--theme-color); }
.p-asymmetry-features__symbol img { height: 45px; width: auto; }
.p-asymmetry-features__clinic-label {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: var(--fs-16); font-weight: 700;
  color: #333; margin: 0; letter-spacing: 0.1em;
}
.p-asymmetry-features__section-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: var(--fs-32); font-weight: 700;
  color: #333; letter-spacing: 0.15em;
  line-height: 1.2; margin: 0;
}
.p-asymmetry-features__num-accent { color: var(--theme-color); }
.p-asymmetry-features__en-label {
  font-size: var(--fs-12); color: var(--theme-color);
  letter-spacing: 0.35em; font-weight: 600;
  text-transform: capitalize; margin: 0;
}

/* ─── リード文 ──────────────────────────────────────── */
.p-asymmetry-features__lead-wrap {
  max-width: 820px; margin: 0 auto;
  text-align: center; padding: 0 20px;
}
.p-asymmetry-features__lead {
  font-size: var(--fs-21); line-height: 2.05; color: #4a4a4a; margin: 0;
  font-weight: 500; letter-spacing: 0.03em;
}

/* ─── リスト（写真＝左・文章＝右で全項目統一） ─────────── */
.p-asymmetry-features__inner {
  max-width: 1060px;
  margin: 56px auto 0;
  padding: 0 24px;
}
.p-asymmetry-features__row {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 64px;
}
.p-asymmetry-features__row:last-child { margin-bottom: 0; }

/* ─── 写真（角丸長方形・向きを統一） ─────────────────── */
.p-asymmetry-features__photo {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}
.p-asymmetry-features__photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.p-asymmetry-features__row:hover .p-asymmetry-features__photo img {
  transform: scale(1.05);
}

/* 写真なし → アイコン（薄い施設カラー地） */
.p-asymmetry-features__icon {
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  background: color-mix(in srgb, var(--theme-color), #fff 90%);
  display: flex; align-items: center; justify-content: center;
  color: var(--theme-color);
}
.p-asymmetry-features__icon svg { width: 96px; height: 96px; }

/* ─── テキスト ──────────────────────────────────────── */
.p-asymmetry-features__eyebrow {
  display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px;
}
.p-asymmetry-features__num-tag {
  font-family: "Montserrat", sans-serif;
  font-size: var(--fs-12); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: var(--theme-color);
  padding: 4px 12px; border-radius: var(--radius-sm);
}
.p-asymmetry-features__tag {
  font-size: var(--fs-15); font-weight: 700;
  color: var(--theme-color); letter-spacing: 0.1em;
}
.p-asymmetry-features__item-title {
  font-size: var(--fs-28); font-weight: 700;
  color: #111; line-height: 1.5;
  margin: 0 0 18px; letter-spacing: 0.02em;
}
.p-asymmetry-features__item-text {
  font-size: var(--fs-18); color: #444;
  line-height: 2; letter-spacing: 0.03em; margin: 0;
}

/* ─── スクロール出現アニメ（下からふわっと） ──────────── */
.p-asymmetry-features.is-reveal-ready .p-asymmetry-features__row {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-asymmetry-features.is-reveal-ready .p-asymmetry-features__row.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .p-asymmetry-features.is-reveal-ready .p-asymmetry-features__row {
    opacity: 1; transform: none; transition: none;
  }
}

/* ─── レスポンシブ（縦積み・写真上／文章下） ──────────── */
@media (max-width: 900px) {
  .p-asymmetry-features__inner { margin-top: 40px; padding: 0 20px; }
  .p-asymmetry-features__row {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 52px;
  }
  .p-asymmetry-features__photo,
  .p-asymmetry-features__icon { aspect-ratio: 16 / 10; }
  .p-asymmetry-features__icon svg { width: 72px; height: 72px; }
  .p-asymmetry-features__item-title { font-size: var(--fs-22); margin-bottom: 14px; }
  .p-asymmetry-features__item-text  { font-size: var(--fs-17); line-height: 2; }
  .p-asymmetry-features__section-title { font-size: var(--fs-26); }
  .p-asymmetry-features__en-label { font-size: var(--fs-12); }
  .p-asymmetry-features__lead { font-size: var(--fs-17); line-height: 1.9; }
}

/* ==========================================================================
   p-policy（Clinic Policy 風：装飾グラデ背景＋角丸画像＋色付き大番号・タイトル）
   ・写真＝左／文章＝右で全項目を同方向に統一
   ・淡いクリーム地に施設カラーのグラデーションを重ねて単調さを回避
   ・番号は大きく施設カラー、画像は角丸で項目により枠サイズを可変
   ・スクロールで各項目が下からふわっと出現
   ========================================================================== */
.p-policy {
  position: relative;
  padding: 88px 0 104px;
  /* 項目の端からセクション（画面）端までの距離（内側パディング40px＋中央寄せ余白） */
  --edge-bleed: calc(40px + max(0px, (100vw - 1400px) / 2));
  /* 背景は生成り地のみ（装飾は各項目のドームに一本化） */
  background: var(--color-primary-light);
  overflow: hidden;
}

.p-policy__inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ─── セクション見出し ─── */
.p-policy__head {
  text-align: center;
  margin-bottom: 64px;
}
.p-policy__head-title .num { color: var(--theme-color); }

/* ─── 項目 ─── */
.p-policy__item {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 60px;
  align-items: center;
  margin-bottom: 180px;
  position: relative;
  z-index: 0;
}
.p-policy__item:last-child { margin-bottom: 0; }

/* 番号の角から画像方向へフェードアウトする施設カラーのグラデーション。
   番号側（rev/非rev）で起点の左右が交互になり、項目ごとの区切りが分かる */
.p-policy__item::before {
  content: "";
  position: absolute;
  inset: -110px 0 -60px; /* 上へ広げ、盛り上がった弧が番号の上に出るように */
  z-index: -1;
  pointer-events: none;
  filter: blur(20px); /* トップラインをぼかす */
  /* 上下端をなだらかにフェードさせ、ボックス端でのハードな切れ目を消す */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
}
/* 通常＝画像左 → 左辺（画面左端）を起点に、円弧を縦向きに立てて右（文章）へフェード（円は画像側） */
.p-policy__item::before {
  right: 0;
  left: calc(-1 * var(--edge-bleed)); /* 濃い側を画面左端（画像側）までくっつける */
  background: radial-gradient(circle clamp(460px, 50vw, 740px) at 0% 38%,
    color-mix(in srgb, var(--theme-color), #fff 80%) 0%,
    color-mix(in srgb, var(--theme-color), #fff 85%) 54%,
    transparent 66%);
}
/* 反転＝画像右 → 右辺（画面右端）を起点に、円弧を縦向きに立てて左（文章）へフェード（円は画像側）。
   ※ 01（先頭）は rev に含めず、基底ルールの左側の円を使う */
.p-policy__item--rev::before {
  left: 0;
  right: calc(-1 * var(--edge-bleed)); /* 濃い側を画面右端（画像側）までくっつける */
  background: radial-gradient(circle clamp(460px, 50vw, 740px) at 100% 38%,
    color-mix(in srgb, var(--theme-color), #fff 80%) 0%,
    color-mix(in srgb, var(--theme-color), #fff 85%) 54%,
    transparent 66%);
}
/* 通常＝画像左／文章右（grid-row:1 で反転時の自動改行を防ぎ横並びを維持） */
.p-policy__visual  { grid-column: 1; grid-row: 1; }
.p-policy__content { grid-column: 2; grid-row: 1; }
/* 反転＝文章左／画像右（左右交互のzigzag） */
.p-policy__item--rev { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); }
.p-policy__item--rev .p-policy__visual  { grid-column: 2; }
.p-policy__item--rev .p-policy__content { grid-column: 1; }

/* ─── 画像（角丸・項目でサイズ可変） ─── */
.p-policy__visual { position: relative; }
.p-policy__photo {
  position: relative;
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  aspect-ratio: 600 / 415;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.14);
}
.p-policy__photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* 先頭項目はワイドな枠（901:515） */
.p-policy__item--lead .p-policy__photo { aspect-ratio: 901 / 515; }

/* 写真なし → アイコン（淡い施設カラー地） */
.p-policy__icon {
  aspect-ratio: 600 / 415;
  border-radius: 26px;
  background: color-mix(in srgb, var(--theme-color), #fff 88%);
  display: flex; align-items: center; justify-content: center;
  color: var(--theme-color);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.10);
}
.p-policy__icon svg { width: 108px; height: 108px; }

/* ─── スライダー（先頭項目：複数画像を切替） ─── */
.p-policy__slider {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  aspect-ratio: 600 / 415;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.14);
}
.p-policy__item--lead .p-policy__slider { aspect-ratio: 901 / 515; }
.p-policy__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.p-policy__slide.is-active { opacity: 1; }
.p-policy__slide img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.p-policy__dots {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 9px;
  z-index: 3;
}
.p-policy__dot {
  width: 8px; height: 8px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.p-policy__dot.is-active { background: #fff; transform: scale(1.3); }

/* 反転項目ではサブ画像を左下へミラー配置 */
.p-policy__item--rev .p-policy__sub { right: auto; left: -20px; }

/* =========================================================================
   02（オンラインHDF）専用：やや小さめの縦写真＋右端の丸バッジ＋
   01のリード見出しと同じ装飾言語＋写真へはみ出すダイナミックなタイトル
   ========================================================================= */
/* 写真は少し縮小（縦4:5）。visualを写真幅に絞り右寄せして周囲に装飾の余白を作る */
.p-policy__item--02 { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: start; }
.p-policy__item--02 .p-policy__visual {
  width: 420px; max-width: 100%; margin-left: auto;
  z-index: 0; /* 装飾円の重なり基準 */
}
.p-policy__item--02 .p-policy__photo { aspect-ratio: 4 / 5; max-width: 100%; margin: 0; }
/* 写真の周囲余白に装飾円（lead-absimg::before を踏襲、写真の外側へ配置） */
.p-policy__item--02 .p-policy__visual::before {
  content: "";
  position: absolute;
  left: -42px; top: -34px;
  width: 118px; height: 118px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--theme-color), #fff 72%);
  z-index: -1;
}
.p-policy__item--02 .p-policy__visual::after {
  content: "";
  position: absolute;
  left: -30px; bottom: -30px;
  width: 152px; height: 152px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--theme-color), #fff 58%);
  z-index: -1;
}
/* 文章列を縦積みにして各要素の左右寄せを制御 */
.p-policy__item--02 .p-policy__content {
  display: flex; flex-direction: column; align-items: flex-start;
  padding-top: 0.4em;
}

/* 丸バッジ「全装置対応」：サブ画像の代わりに右端へ配置 */
.p-policy__badge {
  position: absolute;
  right: -50px; bottom: 26px;
  width: 138px; height: 138px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background: var(--theme-color);
  color: #fff;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
  z-index: 6;
}
/* 内側の細いリング（参考サイト風の二重丸） */
.p-policy__badge::before {
  content: "";
  position: absolute; inset: 9px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
}
.p-policy__badge span {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: var(--fs-18); font-weight: 700; line-height: 1.45;
  letter-spacing: 0.08em;
}

/* 名取透析クリニックは現時点で全装置対応ではないため「全装置対応」バッジを非表示。
   将来的に全装置対応になったら、この1ブロックを削除すれば復帰する。 */
body.is-natoritouseki-clinic .p-policy__badge { display: none; }

/* 見出しブロック：01の lead-tit を踏襲（番号＋縦組み英字＋マーカーラベル＋背後の装飾円） */
.p-policy__tit02 {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: row; align-items: center;
  gap: 24px;
  margin-bottom: 14px;
}
.p-policy__tit02 .p-policy__lead-numwrap { margin-bottom: 0; }
.p-policy__tit02 .p-policy__lead-eyebrow { margin-bottom: 0; }
/* 右カラム：FEATUREとラベルを縦積み */
.p-policy__tit02__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
/* 旧・tit02固定配置の丸は無効化（番号アンカー方式に置き換え） */
.p-policy__tit02::before { content: none; }
/* 背後の丸は番号（先頭の0）を中心にアンカー。em基準で番号サイズに追従＝PC/モバイルで統一 */
.p-policy__tit02 .p-policy__lead-num { position: relative; z-index: 0; margin-bottom: 0; }
.p-policy__tit02 .p-policy__lead-num::before {
  content: "";
  position: absolute;
  left: 0.32em;              /* 先頭「0」の中心付近 */
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.32em; height: 1.32em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--theme-color), #fff 60%);
  z-index: -1;
}
/* 番号背後の丸（tit02はz-index:1）がタイトル・本文にかぶらないよう、h3/本文を丸より前面へ */
.p-policy__content .p-policy__lead-h3,
.p-policy__content .p-policy__text { position: relative; z-index: 2; }
/* タイトルは1列・左寄せ（装飾パネルなし） */
.p-policy__title02 {
  align-self: flex-start;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  text-align: left;
  position: relative;
  z-index: 5;
  margin: 2px 0 14px;
  padding: 0;
}
/* 02タイトルの改行はモバイルのみ有効（デスクトップは1行） */
.u-policy-sp-br { display: none; }

/* =========================================================================
   03・05・06：横写真＋01・02と揃えた装飾見出し（番号が写真上端に重なる）
   左右はzigzag（--rev）に従い、見出しブロックを写真側へ食い込ませる
   ========================================================================= */
/* 写真の上端と番号の上端を揃える（上揃え） */
.p-policy__item--deco { align-items: start; }
.p-policy__item--deco .p-policy__content {
  display: flex; flex-direction: column; align-items: flex-start;
}
/* 写真左（通常）：見出しを左へ食い込ませる */
.p-policy__item--deco:not(.p-policy__item--rev) .p-policy__tit02 {
  transform: translateX(clamp(-150px, -9vw, -70px));
}
/* 写真右（rev）：見出しを右端に寄せて右（写真側）へ食い込ませる */
.p-policy__item--deco.p-policy__item--rev .p-policy__tit02 {
  align-self: flex-end;
  transform: translateX(clamp(70px, 9vw, 150px));
}

/* 03：写真左＋右カラムに「番号→タイトル→本文」を縦に揃える（王道・読みやすさ重視）。
   番号は写真に食い込ませず、タイトル・本文と左端を揃える */
.p-policy__item--deco.p-policy__item--03 .p-policy__tit02 {
  transform: none;
}
/* 03：上部に少し余白（前項目との間隔がここだけ詰まって見えるため。
   .p-policy__inner はblockでマージン相殺されるため padding で確実に空ける） */
.p-policy__item--03 { padding-top: 40px; }

/* 04・06：見出しブロックを左寄せ（写真右へ食い込ませない） */
.p-policy__item--deco.p-policy__item--04 .p-policy__tit02,
.p-policy__item--deco.p-policy__item--06 .p-policy__tit02 {
  align-self: flex-start;
  transform: none;
}


/* 04：栄養指導の写真下に白ラベルを2つ並べて少し重ねる */
.p-policy__photo-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.p-policy__photo-labels img {
  position: absolute;
  width: clamp(110px, 16vw, 160px);
  height: auto;
}
.p-policy__photo-label--tl {
  top: -16px;
  left: -16px;
}
.p-policy__photo-label--br {
  bottom: -16px;
  right: -16px;
}

/* ─── テキスト（大きな番号＋斜線ラベル＋タイトル） ─── */
.p-policy__heading {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  margin: 0 0 22px;
}
.p-policy__num {
  flex-shrink: 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(3.4rem, 6.4vw, 5.4rem);
  font-weight: 800; line-height: 0.86;
  color: var(--theme-color); letter-spacing: 0.02em;
}
.p-policy__heading-body { padding-top: 0.28em; }
.p-policy__label {
  display: inline-block;
  position: relative;
  padding-left: 1.7em;
  font-family: "Montserrat", "Zen Maru Gothic", sans-serif;
  font-size: var(--fs-15); font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--theme-color);
  margin-bottom: 0.6em;
}
/* 斜線アクセント（参考サイトの span::before を踏襲） */
.p-policy__label::before {
  content: "";
  position: absolute;
  left: 0.5em; top: 0.05em;
  width: 1px; height: 1.15em;
  background: var(--theme-color);
  transform: rotate(45deg);
}
.p-policy__title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700; line-height: 1.45;
  color: #222; letter-spacing: 0.04em;
  margin: 0;
}
.p-policy__text {
  font-size: var(--fs-20); line-height: 2.05; /* 本文は法人系ページ(20px)と統一 */
  font-weight: 500; /* 少し太くして可読性を上げる */
  color: #4a4a4a; letter-spacing: 0.03em;
  margin: 20px 0 0;
  text-indent: 1em; /* 段落先頭を全角1マス字下げ */
}
/* 本文からコラムへ誘導するボタン。見た目は既存の .c-button.-top-blue
   （施設カラーのピルボタン）をそのまま使い、ここでは余白だけを整える。
   本文が字下げされているので text-indent を打ち消す */
.p-policy__more {
  margin: 28px 0 0;
  text-indent: 0;
}
/* 本文内の下線強調（施設カラーの下線） */
.p-policy__uline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--theme-color);
}
.p-policy__text-body {
  display: block;
  text-indent: 1em;
}

/* =========================================================================
   先頭ブロック：参考サイト policy01 を寸法どおり再現
   ・右にスライダー（最大901×515／約70%）
   ・左上に大きな番号＋ラベル＋タイトル（絶対配置でスライダーに食い込む）
   ・左下に小さなスタッガー画像＋装飾円
   ・下に love_list の5枚サムネイル（220×220）
   ========================================================================= */
.p-policy__item--lead {
  display: block;
  position: relative;
  overflow: visible;
}
.p-policy__lead-row {
  position: relative;
  margin-bottom: 46px;
}
/* スライダー＝右寄せ（約70%／最大901px） */
.p-policy__lead-main {
  width: 70%;
  max-width: 901px;
  margin-left: auto;
  margin-right: 0;
}
.p-policy__item--lead .p-policy__slider {
  aspect-ratio: 901 / 515;
  margin-bottom: 30px;
}
.p-policy__lead-style {
  width: 70%;
  max-width: 901px;
  margin-left: auto;
  margin-right: 0;
}
/* 本文の下に余白（サムネイルとの間） */
.p-policy__lead-style .p-policy__text { margin: 0 0 48px; }
/* 左上：番号＋ラベル＋タイトル（絶対配置・スライダー左端に食い込む） */
.p-policy__lead-tit {
  position: absolute;
  left: 0; top: 0;
  z-index: 3;
  width: 50%;
  padding: 6px 20px 14px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
/* 旧・lead-tit固定配置の円は無効化（番号アンカー方式に統一） */
.p-policy__lead-tit::before { content: none; }
/* 左上の装飾円：番号（先頭の0）を中心にアンカー。em基準で番号サイズに追従＝PC/モバイル統一 */
.p-policy__lead-tit .p-policy__lead-num { position: relative; z-index: 0; }
.p-policy__lead-tit .p-policy__lead-num::before {
  content: "";
  position: absolute;
  left: 0.32em;              /* 先頭「0」の中心付近 */
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.32em; height: 1.32em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--theme-color), #fff 60%);
  z-index: -1;
}
.p-policy__lead-num {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2.8rem, 5.5vw, 4.2rem);
  font-weight: 800; line-height: 1;
  color: var(--theme-color); letter-spacing: 0.02em;
  text-shadow: 0 2px 18px rgba(255, 255, 255, 0.8);
}
/* 番号の横に装飾英字（横組み） */
.p-policy__lead-numwrap {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.p-policy__lead-numen {
  writing-mode: horizontal-tb;
  font-family: "Montserrat", sans-serif;
  font-size: var(--fs-12); font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: color-mix(in srgb, var(--theme-color), #fff 42%);
  user-select: none;
  padding: 0 0 0 0.5em;
}
/* ラベル：マーカー風の下地で強調 */
.p-policy__lead-eyebrow {
  display: inline-block; position: relative;
  margin-left: 0;
  padding: 0 0.18em;
  font-family: "Montserrat", "Zen Maru Gothic", sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  font-weight: 800; letter-spacing: 0.08em;
  color: var(--theme-color);
  background: linear-gradient(transparent 58%,
    color-mix(in srgb, var(--theme-color), #fff 76%) 58%);
}
/* タイトルは本文の上（右カラム）に配置 */
.p-policy__lead-h3 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  font-weight: 700; line-height: 1.5;
  color: #1a1a1a; letter-spacing: 0.04em;
  margin: 14px 0 22px; /* 見出し上に少し余白 */
}
/* タイトル内の <span> は施設カラーで強調（参考サイトの h3 span を踏襲） */
.p-policy__lead-h3 span,
.p-policy__title span { color: var(--theme-color); }
/* 左下：小さなスタッガー画像＋装飾円 */
.p-policy__lead-absimg {
  position: absolute;
  left: 0; bottom: 0;
  width: 26%; max-width: 280px;
  z-index: 2;
}
/* 下端は本文末に固定。タイトル移動で空いた分、さらに縦長に配置 */
.p-policy__lead-absimg img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16);
}
.p-policy__lead-absimg::before {
  content: "";
  position: absolute;
  right: -26px; bottom: -18px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--theme-color), #fff 60%);
  z-index: -1;
}
/* サブ画像の上部にも装飾円を置いて余白の寂しさを解消 */
.p-policy__lead-absimg::after {
  content: "";
  position: absolute;
  left: 18%; top: -104px;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--theme-color), #fff 74%);
  z-index: -1;
}
/* 下：設備概要のポイント（ak-nav-cards__links の見た目に合わせたパネル） */
.p-policy__lead-specs {
  list-style: none; margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.p-policy__spec {
  flex: 0 0 calc(25% - 12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--theme-color) 6%, #f7f3e9) 0%,
    color-mix(in srgb, var(--theme-color) 16%, #f7f3e9) 100%);
  border-radius: 14px;
  padding: 22px 10px 18px;
  border: 2px solid color-mix(in srgb, var(--theme-color) 35%, transparent);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  min-height: 140px;
}
.p-policy__spec-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background-color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--theme-color);
  font-size: var(--fs-22);
}
.p-policy__spec-label {
  font-size: var(--fs-20); font-weight: 700;
  color: #222; text-align: center; line-height: 1.55;
}
.p-policy__spec-sub {
  display: block;
  font-size: var(--fs-15); font-weight: 700;
  color: var(--theme-color);
  line-height: 1.4;
  margin-top: 2px;
}
/* パネルは左から1枚ずつ、下からゆっくりふんわりフェードイン */
.p-policy.is-reveal-ready .p-policy__lead-specs li {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 1.5s ease, transform 1.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.p-policy.is-reveal-ready .p-policy__lead-specs.is-visible li {
  opacity: 1;
  transform: none;
}
/* 基底の transition ショートハンドに勝つよう詳細度を合わせる */
.p-policy.is-reveal-ready .p-policy__lead-specs li:nth-child(1) { transition-delay: 0s; }
.p-policy.is-reveal-ready .p-policy__lead-specs li:nth-child(2) { transition-delay: 0.24s; }
.p-policy.is-reveal-ready .p-policy__lead-specs li:nth-child(3) { transition-delay: 0.48s; }
.p-policy.is-reveal-ready .p-policy__lead-specs li:nth-child(4) { transition-delay: 0.72s; }
@media (prefers-reduced-motion: reduce) {
  .p-policy.is-reveal-ready .p-policy__lead-specs li {
    opacity: 1; transform: none; transition: none;
  }
}
@media (max-width: 900px) {
  /* 縦積み時は左端（番号側）を起点に、円弧状に盛り上げて下方向へフェード（項目の区切りを出す） */
  .p-policy { --edge-bleed: 22px; } /* モバイルは内側パディング22px＝画面端までの距離 */
  .p-policy__item::before,
  .p-policy__item--rev::before,
  .p-policy__item--lead::before {
    top: -44px; bottom: -24px; right: 0;
    left: calc(-1 * var(--edge-bleed)); /* 濃い側を画面左端までくっつける */
    filter: blur(16px);
    background: radial-gradient(circle 320px at 0% 42%,
      color-mix(in srgb, var(--theme-color), #fff 70%) 0%,
      color-mix(in srgb, var(--theme-color), #fff 75%) 54%,
      transparent 68%);
  }

  /* スライダーを上に置き、その下に「番号（左）＋機械室（右）」を横並びにして縦を圧縮 */
  .p-policy__lead-row {
    display: grid;
    grid-template-columns: 1fr 40%;
    grid-template-areas:
      "slider slider"
      "tit    absimg"
      "style  style";
    column-gap: 16px;
    align-items: center;
  }
  .p-policy__lead-main {
    grid-area: slider;
    width: 100%; max-width: 100%; margin: 0 0 22px;
  }
  .p-policy__lead-tit {
    grid-area: tit;
    position: relative; left: auto; top: auto;
    width: 100%; padding: 0; margin: 0;
  }
  /* サブ画像（機械室）：番号の右に、少し小さめで配置 */
  .p-policy__lead-absimg {
    grid-area: absimg;
    display: block;
    position: relative; left: auto; bottom: auto;
    width: 100%; max-width: 100%;
    margin: 0;
  }
  .p-policy__lead-absimg::before,
  .p-policy__lead-absimg::after { display: none; }
  .p-policy__lead-style {
    grid-area: style;
    width: 100%; max-width: 100%;
    margin: 26px 0 0;
  }
  .p-policy__item--lead .p-policy__slider { aspect-ratio: 16 / 10; margin-bottom: 0; }

  /* 番号まわり：モバイルはサイズだけ調整、縦積みはベースを継承 */
  .p-policy__lead-numwrap { gap: 6px; margin-bottom: 8px; }
  .p-policy__lead-num { font-size: var(--fs-38); }
  .p-policy__lead-numen { font-size: var(--fs-11); letter-spacing: 0.3em; }
  .p-policy__lead-eyebrow { font-size: var(--fs-21); }
  .p-policy__tit02 { gap: 10px; margin-bottom: 30px; }
  .p-policy__tit02__text { gap: 0; }
  .p-policy__lead-h3 { font-size: var(--fs-24); margin-bottom: 16px; }
  .p-policy__lead-style .p-policy__text { margin-bottom: 34px; }

  /* 設備パネル：2枚×2段（ak-nav-cards__links と同じ挙動） */
  .p-policy__lead-specs { gap: 10px; }
  .p-policy__spec { flex: 0 0 calc(50% - 5px); }
  .p-policy__spec { min-height: auto; padding: 16px 10px 14px; gap: 8px; }
  .p-policy__spec-icon { width: 44px; height: 44px; font-size: var(--fs-19); }
  .p-policy__spec-label { font-size: var(--fs-14); line-height: 1.35; }
  .p-policy__spec-sub { font-size: var(--fs-12); }
}


/* ─── スクロール出現：番号→タイトル→本文を下からふわっとゆっくり（スタッガー） ─── */
.p-policy.is-reveal-ready .p-policy__item .p-policy__lead-tit,
.p-policy.is-reveal-ready .p-policy__item .p-policy__tit02,
.p-policy.is-reveal-ready .p-policy__item .p-policy__heading,
.p-policy.is-reveal-ready .p-policy__item .p-policy__lead-h3,
.p-policy.is-reveal-ready .p-policy__item .p-policy__title,
.p-policy.is-reveal-ready .p-policy__item .p-policy__text,
.p-policy.is-reveal-ready .p-policy__item .p-policy__more {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 1.5s ease, transform 1.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.p-policy.is-reveal-ready .p-policy__item.is-visible .p-policy__lead-tit,
.p-policy.is-reveal-ready .p-policy__item.is-visible .p-policy__tit02,
.p-policy.is-reveal-ready .p-policy__item.is-visible .p-policy__heading,
.p-policy.is-reveal-ready .p-policy__item.is-visible .p-policy__lead-h3,
.p-policy.is-reveal-ready .p-policy__item.is-visible .p-policy__title,
.p-policy.is-reveal-ready .p-policy__item.is-visible .p-policy__text,
.p-policy.is-reveal-ready .p-policy__item.is-visible .p-policy__more {
  opacity: 1;
  transform: none;
}
/* スタッガー：番号 → タイトル → 本文 の順にゆっくり出す */
.p-policy.is-reveal-ready .p-policy__item .p-policy__lead-tit,
.p-policy.is-reveal-ready .p-policy__item .p-policy__tit02,
.p-policy.is-reveal-ready .p-policy__item .p-policy__heading { transition-delay: 0s; }
.p-policy.is-reveal-ready .p-policy__item .p-policy__lead-h3,
.p-policy.is-reveal-ready .p-policy__item .p-policy__title { transition-delay: 0.22s; }
.p-policy.is-reveal-ready .p-policy__item .p-policy__text { transition-delay: 0.44s; }
/* ボタンは本文のあと、最後に出す */
.p-policy.is-reveal-ready .p-policy__item .p-policy__more { transition-delay: 0.66s; }
@media (prefers-reduced-motion: reduce) {
  .p-policy.is-reveal-ready .p-policy__item .p-policy__lead-tit,
  .p-policy.is-reveal-ready .p-policy__item .p-policy__tit02,
  .p-policy.is-reveal-ready .p-policy__item .p-policy__heading,
  .p-policy.is-reveal-ready .p-policy__item .p-policy__lead-h3,
  .p-policy.is-reveal-ready .p-policy__item .p-policy__title,
  .p-policy.is-reveal-ready .p-policy__item .p-policy__text,
  .p-policy.is-reveal-ready .p-policy__item .p-policy__more {
    opacity: 1; transform: none; transition: none;
  }
}

/* ─── レスポンシブ（縦積み） ─── */
@media (max-width: 900px) {
  .p-policy { padding: 60px 0 72px; }
  .p-policy__inner { padding: 0 22px; }
  .p-policy__head { margin-bottom: 44px; }
  .p-policy__item,
  .p-policy__item--rev {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 60px;
  }
  /* 縦積み時は常に画像→文章の順（交互配置・横並び固定は解除） */
  .p-policy__visual,
  .p-policy__content,
  .p-policy__item--rev .p-policy__visual,
  .p-policy__item--rev .p-policy__content { grid-column: auto; grid-row: auto; }
  .p-policy__photo,
  .p-policy__item--lead .p-policy__photo,
  .p-policy__slider,
  .p-policy__item--lead .p-policy__slider,
  .p-policy__icon { aspect-ratio: 16 / 10; }
  .p-policy__icon svg { width: 76px; height: 76px; }
  /* サブ画像：はみ出しを控えめに（交互とも右下寄せに統一） */
  .p-policy__sub,
  .p-policy__item--rev .p-policy__sub { width: 42%; right: 10px; left: auto; bottom: -16px; border-width: 4px; }
  .p-policy__heading { gap: 16px; margin-bottom: 16px; }
  .p-policy__num { font-size: var(--fs-48); }
  .p-policy__title { font-size: var(--fs-22); }
  .p-policy__text { font-size: var(--fs-18); line-height: 2; margin-top: 14px; }
  /* スライダーのドットは縦のまま右端に */

  /* 02専用：縦積み時は縦写真をセンター配置、タイトルは折返し可、装飾は簡素に */
  .p-policy__item--02 { grid-template-columns: 1fr; align-items: stretch; }
  .p-policy__item--02 .p-policy__visual { width: 72%; max-width: 300px; margin: 0 auto; }
  .p-policy__item--02 .p-policy__photo { aspect-ratio: 4 / 5; max-width: 100%; margin: 0; }
  .p-policy__item--02 .p-policy__content { padding-top: 0; }
  .p-policy__badge { width: 106px; height: 106px; right: -50px; bottom: -14px; }
  .p-policy__badge span { font-size: var(--fs-15); }
  .p-policy__item--02 .p-policy__visual::before { width: 76px; height: 76px; left: -14px; top: -16px; }
  .p-policy__item--02 .p-policy__visual::after { display: none; }
  .p-policy__title02 {
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    /* 24px のままだと約404px以下で「オンラインHDF(血液透析濾過)」が折り返すため、
       ビューポート幅に応じて縮小し1行に収める（実測: 375px時 約344px必要）。 */
    white-space: nowrap;
    font-size: clamp(15px, 5.9vw, 24px);
    margin: 0 0 8px;
    padding: 0;
  }
  /* 強制改行は非表示のまま・長文のみ自然折り返し */
  .u-policy-sp-br { display: none; }
  .p-policy__lead-h3 { overflow-wrap: break-word; }
  /* 03・05・06：縦積み時は見出しの食い込み・右寄せを解除（特異度を desktop と揃える） */
  .p-policy__item.p-policy__item--deco .p-policy__tit02 { transform: none; align-self: flex-start; }
  /* 04：写真下の丸ラベルはモバイルでサイズ・文字を詰める */
  .p-policy__photo-labels img { width: clamp(80px, 20vw, 110px); }
  .p-policy__photo-label--tl { top: -10px; left: -10px; }
  .p-policy__photo-label--br { bottom: -10px; right: -10px; }

  /* === 02〜06：見出し(tit02)を写真の「上」（外側）に配置。写真は下に全体表示 === */
  /* item を縦フレックス化し、content を透過して中身を item直下の要素として並べ替える */
  .p-policy__item--02,
  .p-policy__item--deco { display: flex; flex-direction: column; gap: 0; position: relative; }
  .p-policy__item--02 .p-policy__content,
  .p-policy__item--deco .p-policy__content { display: contents; }
  /* 並び順：見出し → 写真 → タイトル → 本文 */
  .p-policy__item--02 .p-policy__tit02,
  .p-policy__item--deco .p-policy__tit02 {
    order: 1; position: static; margin: 0 0 30px; transform: none; align-self: flex-start;
  }
  .p-policy__item--02 .p-policy__visual,
  .p-policy__item--deco .p-policy__visual { order: 2; }
  .p-policy__item--02 .p-policy__lead-h3,
  .p-policy__item--deco .p-policy__lead-h3 { order: 3; margin-top: 22px; }
  .p-policy__item--02 .p-policy__text,
  .p-policy__item--deco .p-policy__text { order: 4; }
  /* コラムへのボタンは本文の後ろ。order 未指定(=0)のままだと
     見出しより前に回り込み、タイトルの上に出てしまう。
     この幅では1カラムに積み上がるので、ボタンは中央に置く（PCは左寄せのまま） */
  .p-policy__item--02 .p-policy__more,
  .p-policy__item--deco .p-policy__more {
    order: 5;
    /* 親が align-items:start なので、text-align では中央にならない
       （ラッパー自体がボタン幅に縮むため）。align-self で列の中央に置く */
    align-self: center;
    text-align: center;
  }
  /* 見出しは写真の外（生成り地）に載るので、出現は上下移動させずフェードのみ */
  .p-policy.is-reveal-ready .p-policy__item--02 .p-policy__tit02,
  .p-policy.is-reveal-ready .p-policy__item--deco .p-policy__tit02 { transform: none; }
}

/* Staff Section */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.staff-card {
  text-align: center;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 28px 20px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.staff-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.staff-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-32);
  margin: 0 auto 16px;
}

.staff-position { font-size: var(--fs-11); color: var(--color-accent); font-weight: 700; margin-bottom: 6px; }
.staff-name { font-size: var(--fs-16); font-weight: 700; color: var(--color-primary-dark); }
.staff-name-kana { font-size: var(--fs-11); color: var(--color-text-light); margin-top: 4px; }


.dialysis-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  border: 1px solid var(--color-border);
  transition: var(--transition);
}

.dialysis-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}


/* ============================================================
   NEWS PAGE
============================================================ */
.news-page-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: start;
}

.news-filter {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}


.news-filter-btn.active,
.news-filter-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-light);
}


.news-full-item {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
  transition: var(--transition);
}

.news-full-item:hover { background: var(--color-primary-light); padding: 24px 16px; border-radius: var(--radius-sm); margin: 0 -16px; }

.news-full-meta { flex-shrink: 0; }

.news-full-date {
  font-size: var(--fs-13);
  color: var(--color-text-light);
  margin-bottom: 6px;
}

.news-full-title {
  font-size: var(--fs-15);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 8px;
}

.news-full-item:hover .news-full-title { color: var(--color-primary); }

.news-full-excerpt { font-size: var(--fs-13); color: var(--color-text-light); line-height: 1.7; }

/* Sidebar */
.sidebar-widget {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}

.sidebar-widget-title {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--color-primary-dark);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 10px;
  margin-bottom: 16px;
}


/* ==========================================================================
   施設ギャラリー：スタイリング
   ========================================================================== */
/* ギャラリー全体のレイアウト */
.t-gallery-section {
  padding: 80px 0;
  overflow: hidden;
  background: var(--color-bg);
}

/* ヘッダー：p-asymmetry-features__title-wrap と同レイアウト */
.t-gallery-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 40px;
}
.t-gallery-head__symbol {
  color: var(--theme-color);
}
.t-gallery-head__symbol img { height: 45px; width: auto; }
.t-gallery-head__title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: var(--fs-32);
  font-weight: 700;
  color: #333;
  letter-spacing: 0.15em;
  line-height: 1.2;
  margin: 0;
}
.t-gallery-head__en {
  font-size: var(--fs-12);
  color: var(--theme-color);
  letter-spacing: 0.35em;
  font-weight: 600;
  text-transform: capitalize;
  margin: 0;
}

/* ─── センターフォーカスカルーセル ─── */

/* スライダービューポート */
.t-gallery-slider-area {
  position: relative;
  height: 360px;
  margin-top: 40px;
}

/* トラック */
.t-gallery-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 全カード：中央基準の絶対配置・デフォルトは非表示 */
.t-gallery-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 420px;
  cursor: pointer;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.4);
  transition:
    transform  0.55s cubic-bezier(0.23, 1, 0.32, 1),
    opacity    0.55s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.55s ease;
  will-change: transform, opacity;
}

/* 中央 */
.t-gallery-card[data-offset="0"] {
  transform: translate(-50%, -50%) scale(1);
  z-index: 10;
  opacity: 1;
  pointer-events: auto;
  cursor: zoom-in;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
}
/* +1 */
.t-gallery-card[data-offset="1"] {
  transform: translate(calc(-50% + 330px), -50%) scale(0.76);
  z-index: 5;
  opacity: 0.72;
  pointer-events: auto;
}
/* -1 */
.t-gallery-card[data-offset="-1"] {
  transform: translate(calc(-50% - 330px), -50%) scale(0.76);
  z-index: 5;
  opacity: 0.72;
  pointer-events: auto;
}
/* +2 */
.t-gallery-card[data-offset="2"] {
  transform: translate(calc(-50% + 570px), -50%) scale(0.56);
  z-index: 1;
  opacity: 0.35;
}
/* -2 */
.t-gallery-card[data-offset="-2"] {
  transform: translate(calc(-50% - 570px), -50%) scale(0.56);
  z-index: 1;
  opacity: 0.35;
}

.t-gallery-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.t-gallery-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.t-gallery-card[data-offset="0"]:hover img {
  transform: scale(1.05);
}
.t-gallery-card__name {
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--theme-color);
  padding: 10px 15px;
  text-align: center;
  background: #fff;
  letter-spacing: 0.05em;
}

/* ナビゲーションボタン */
.t-gallery-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
  margin-bottom: 80px;
}
.t-gallery-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--theme-color);
  background: var(--theme-color);
  color: #fff;
  font-size: var(--fs-22);
  font-weight: bold;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.t-gallery-btn:hover {
  background: #fff;
  color: var(--theme-color);
}

/* モバイル：カード幅縮小・±2は非表示 */
@media (max-width: 768px) {
  .t-gallery-head__title  { font-size: var(--fs-26); }
  .t-gallery-head__en     { font-size: var(--fs-12); }
  .t-gallery-head__symbol img { height: 36px; }
  .t-gallery-head         { margin-bottom: 24px; }
  .t-gallery-section      { padding: 48px 0; }
}

@media (max-width: 768px) {
  .t-gallery-slider-area {
    height: 240px;
    margin-top: 30px;
  }
  .t-gallery-card {
    width: 270px;
  }
  .t-gallery-card[data-offset="1"] {
    transform: translate(calc(-50% + 210px), -50%) scale(0.76);
  }
  .t-gallery-card[data-offset="-1"] {
    transform: translate(calc(-50% - 210px), -50%) scale(0.76);
  }
  .t-gallery-card[data-offset="2"],
  .t-gallery-card[data-offset="-2"] {
    opacity: 0;
    pointer-events: none;
  }
  .t-gallery-btn {
    width: 48px;
    height: 48px;
    font-size: var(--fs-18);
  }
}

/* ═══════════════════════════════════════════════════════
   t-access-new（交通アクセスセクション）
═══════════════════════════════════════════════════════ */

.t-access-new {
  background: var(--color-bg);
  padding: 80px 0;
}

/* welfare なし（muratatouseki-clinic 等）は l-concept が存在しないため
   p-clinic-intro の margin-bottom:-100px を margin-top で相殺する */
.t-access-new.mod-no-welfare {
  margin-top: 120px; /* デスクトップ: -100px 相殺 + 20px 余白 */
}
@media (max-width: 1023px) {
  .t-access-new.mod-no-welfare {
    margin-top: 80px;  /* モバイル: -60px 相殺 + 20px 余白 */
  }
}

/* 泉松ハウス・福祉ホーム名取は直前が .l-concept（負マージンなし）のため、
   上の mod-no-welfare 相殺マージンが余分な余白になる（電話ボタン下が空きすぎる）。
   .l-concept が直前のときだけ相殺マージンを打ち消す。
   ※ この隣接組み合わせは上記2ページでのみ発生する
     （welfare のあるクリニックページの .t-access-new は mod-no-welfare が付かない）。 */
.l-concept + .t-access-new.mod-no-welfare {
  margin-top: 0;
}

/* ── ヘッダー（共通スタイル） ── */
.t-access-new__head {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 10px; margin-bottom: 48px;
}
.t-access-new__symbol { color: var(--theme-color); }
.t-access-new__symbol img { height: 45px; width: auto; }
.t-access-new__title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: var(--fs-32); font-weight: 700;
  color: #222; letter-spacing: 0.15em; margin: 0;
}
.t-access-new__en {
  font-size: var(--fs-13); color: var(--theme-color);
  letter-spacing: 0.35em; font-weight: 600; text-transform: capitalize; margin: 0;
}

/* ── コンテナ ── */
.t-access-new__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── 2カラムグリッド：左（情報）＋ 右（マップ） ── */
.t-access-new__grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 40px;
  align-items: stretch;
}

/* ══════════════ 左カラム：施設情報 ＋ 経路ボタン ══════════════ */
.t-access-new__info-side {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  gap: 0;
}

/* 医療法人名（施設名の上） */
.t-access-new__corp-name {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--theme-color);
  letter-spacing: 0.1em;
  margin: 0 0 4px;
  opacity: 0.8;
}

/* 施設名 */
.t-access-new__facility-name {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: var(--fs-22); font-weight: 800;
  color: var(--theme-color);
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #dcd6c8;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* ── 基本情報リスト（yaizu スタイル：シンプル横並び） ── */
.t-access-new__info-list { margin: 0; }
.t-access-new__info-item {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: 0 12px;
  padding: 13px 0;
  border-bottom: 1px solid #eee;
  align-items: baseline;
}
.t-access-new__info-item:last-of-type { border-bottom: none; }
.t-access-new__info-item dt {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-12); font-weight: 700;
  color: var(--theme-color); white-space: nowrap;
  letter-spacing: 0.05em;
}
/* フラットアイコン（バッジなし・テーマカラー） */
.t-access-new__info-item dt i {
  font-size: var(--fs-13);
  color: var(--theme-color);
  width: auto; height: auto;
  background: none; border-radius: 0;
  flex-shrink: 0;
}
.t-access-new__info-item dt span {
  font-size: var(--fs-12);
}
.t-access-new__info-item dd {
  margin: 0; font-size: var(--fs-16); color: #333; line-height: 1.8;
}

/* 「（地図）」リンク：PC・モバイル両方表示 */
.t-access-new__map-link {
  display: inline;
  margin-left: 6px;
  font-size: var(--fs-13);
  color: var(--theme-color);
  text-decoration: underline;
  letter-spacing: 0.02em;
}
.t-access-new__map-link:hover { opacity: 0.75; }

/* ── 現在地からの経路（yaizu スタイル） ── */
.t-access-new__route {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 2px solid #dcd6c8;
}
.t-access-new__route-heading {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: var(--fs-16); font-weight: 800;
  color: var(--theme-color);
  margin: 0 0 6px;
  letter-spacing: 0.06em;
}
.t-access-new__route-desc {
  font-size: var(--fs-12); color: #666;
  margin: 0 0 14px; line-height: 1.6;
}

/* 3ボタングリッド（yaizu スタイル：フラットアイコン上・テキスト下） */
.t-access-new__route-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.t-access-new__route-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 6px 14px;
  border: 1px solid var(--theme-color);
  border-radius: 4px;
  color: var(--theme-color);
  background: #fff;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  text-align: center;
}
/* フラットアイコン（円バッジなし・大きめ） */
.t-access-new__route-btn i {
  font-size: var(--fs-32);
  color: var(--theme-color);
  display: block;
  width: auto; height: auto;
  background: none; border-radius: 0;
  transition: color 0.2s;
}
.t-access-new__route-btn span {
  font-size: var(--fs-13); font-weight: 700;
  letter-spacing: 0.04em; display: block;
}
.t-access-new__route-btn:hover {
  background: var(--theme-color); color: #fff;
}
.t-access-new__route-btn:hover i { color: #fff; }

/* ══════════════ 右カラム：Google マップ ══════════════ */
.t-access-new__map-wrap {
  display: flex; flex-direction: column;
}
.t-access-new__map {
  flex: 1;
  border: 5px solid var(--theme-color);
  border-radius: 20px;
  overflow: hidden;
  min-height: 460px;
}
.t-access-new__map iframe {
  width: 100%; height: 100%;
  min-height: 460px;
  display: block;
}
.t-access-new__map-placeholder {
  padding: 20px; color: #888; font-size: var(--fs-16);
}

/* ── モバイル ── */
@media (max-width: 768px) {
  .t-access-new__title { font-size: var(--fs-26); }
  .t-access-new__en    { font-size: var(--fs-12); }
}

@media (max-width: 768px) {
  .t-access-new { padding: 60px 0; }
  .t-access-new__container { padding: 0 16px; }
  .t-access-new__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .t-access-new__info-side {
    padding: 24px 20px;
    border-radius: 16px;
  }
  .t-access-new__facility-name { font-size: var(--fs-19); margin-bottom: 16px; padding-bottom: 12px; }
  .t-access-new__info-item { grid-template-columns: 5em 1fr; gap: 0 10px; padding: 11px 0; }
  .t-access-new__info-item dd { font-size: var(--fs-15); }
  .t-access-new__tel { font-size: var(--fs-16); }
  /* 経路ボタン：モバイルも3列維持、サイズ縮小 */
  .t-access-new__route-btns { gap: 6px; }
  .t-access-new__route-btn { padding: 14px 4px 10px; gap: 6px; }
  .t-access-new__route-btn i { font-size: var(--fs-26); }
  .t-access-new__route-btn span { font-size: var(--fs-11); }
  .t-access-new__route-desc { font-size: var(--fs-12); }
  .t-access-new__map-wrap { display: none; }
}

/* --- モーダル（拡大表示）の装飾 --- */
.t-gallery-modal {
  display: none; /* 初期状態は非表示 */
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85); /* 背景を暗く */
  padding: 40px 20px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}

/* モーダル表示時のスタイル */
.t-gallery-modal.is-active {
  display: flex;
}

/* 画像とテキストを相対配置するためのコンテナ */
.modal-container {
  position: relative;
  display: inline-block; /* 画像の幅に合わせる */
  max-width: 90%;
}

.modal-content {
  display: block; /* 下の隙間を消す */
  max-width: 100%;
  max-height: 80vh;
  border: 8px solid var(--theme-color);
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

/* 右下の名前表示 */
.modal-caption {
  position: absolute;
  right: 20px;
  bottom: 20px;
  background: rgba(255, 255, 255, 0.9); /* 白背景を少し透過 */
  color: #333;
  padding: 8px 15px;
  font-size: var(--fs-21);
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin: 0;
  pointer-events: none; /* テキストがクリックの邪魔をしないように */
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: var(--fs-40);
  font-weight: bold;
  cursor: pointer;
}

/* スマホ用調整：枠を少し細く、画像を大きく */
@media (max-width: 768px) {
  .modal-content {
      max-width: 95%;
      border-width: 5px; /* スマホは枠を少し細く */
  }
  .modal-container {
      max-width: 95%;
  }
  .modal-caption {
      right: 30px;
      bottom: 15px;
      font-size: var(--fs-13);
      padding: 5px 10px;
  }
}

/* ナビゲーションボタンの基本スタイル */
.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: var(--fs-24);
  cursor: pointer;
  z-index: 10001;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-nav:hover {
  background: rgba(255, 255, 255, 0.4);
}

.modal-nav.-prev { left: 30px; }
.modal-nav.-next { right: 30px; }

/* スマホではボタンを少し小さく、端に寄せる */
@media (max-width: 768px) {
  .modal-nav {
      width: 44px;
      height: 44px;
      font-size: var(--fs-18);
      background: rgba(0, 0, 0, 0.3); /* スマホは見やすいように暗めに */
  }
  .modal-nav.-prev { left: 10px; }
  .modal-nav.-next { right: 10px; }
}


/* ============================================================
   FOOTER
============================================================ */
.site-footer {
  position: relative;
  background: linear-gradient(165deg, #006438 0%, #00552e 45%, #003c20 100%);
  color: rgba(255,255,255,0.72);
  overflow: hidden;
}


/* 背景の装飾シンボル（控えめに） */
.site-footer::after {
  content: '';
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,168,204,0.10) 0%, rgba(0,168,204,0) 70%);
  pointer-events: none;
}

.footer-main {
  position: relative;
  z-index: 1;
  padding: 72px 0 56px;
  background: linear-gradient(165deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.03) 28%,
    rgba(0,0,0,0.06) 70%,
    rgba(0,0,0,0.16) 100%);
}

/* フッターも代表サイト共通ガターで全幅展開（1400px中央寄せを廃止し、
   ヘッダー／トップ各セクションと左右位置を統一） */
.footer-main .container,
.footer-bottom .container {
  max-width: none;
  padding-left: var(--corp-gutter);
  padding-right: var(--corp-gutter);
}

/* 代表サイトフッター：関連施設バナーは footer-grid の下に内包。
   緑グラデの上に溶け込むよう背景は透過し、上に区切り線のみ */
.site-footer .p-footer-banners-section {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 52px;
  padding: 44px 0 8px;
}

.footer-grid {
  display: grid;
  /* ブランド列（ロゴ・説明・お問い合わせボタン）を、下段3バナーの1枚分の幅
     （= (全幅 − バナー間gap16px×2) / 3）に一致させる */
  grid-template-columns: calc((100% - 32px) / 3) 1fr;
  gap: 56px;
}

/* サイトマップ（ヘッダーの各リンク＋ページ内ナビ項目を一覧化）
   各列は等間隔（固定gap）で右寄せ配置 */
.footer-sitemap__grid {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: space-between;
  max-width: 620px;
  margin: 0 auto;   /* 列幅は保ったまま、ブロックをトラック内で中央寄せ（大画面で右に寄りすぎない） */
  column-gap: 48px;
  row-gap: 32px;
}

.footer-sitemap__group {
  display: flex;
  flex-direction: column;
}

/* 最終列（お知らせ／コラム／採用情報）は他列と同じく左揃え */
.footer-sitemap__group--end {
  align-items: flex-start;
  text-align: left;
}

/* 4列目は子リンクを持たないため、下線・アクセントバーは付けない */
.footer-sitemap__group--end .footer-sitemap__head {
  padding-bottom: 0;
  border-bottom: none;
}

.footer-sitemap__group--end .footer-sitemap__head::after {
  content: none;
}

/* 親（ヘッダーのリンク）＝白・太字。下にアクセント下線 */
.footer-sitemap__head {
  position: relative;
  font-size: var(--fs-17);
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.02em;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  transition: var(--transition);
}

.footer-sitemap__head::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 28px;
  height: 2px;
  background: #c9a45c;
}

.footer-sitemap__head:hover { color: #e0c17f; }

/* 4列目：親リンクを縦に連続配置する場合の間隔 */
.footer-sitemap__group > .footer-sitemap__head + .footer-sitemap__head {
  margin-top: 4px;
}

/* 子（ページ内ナビ項目） */
.footer-sitemap__sub {
  list-style: none;
  padding: 0;
  margin: 0 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-sitemap__sub li a {
  position: relative;
  font-size: var(--fs-15);
  color: rgba(255,255,255,0.6);
  transition: var(--transition);
}

.footer-sitemap__sub li a:hover { color: var(--color-white); }

/* 施設案内：施設名の右に外部リンク（別ウィンドウ）アイコン */
.footer-sitemap__extlink {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.footer-sitemap__exticon {
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 0.25s ease;
}

.footer-sitemap__extlink:hover .footer-sitemap__exticon { opacity: 1; }

/* ブランド列 */
.footer-brand {
  display: inline-block;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ヘッダーロゴと同様、ホバーでトップへのリンクと分かるよう透け感を出す */
.footer-brand:hover { opacity: 0.72; }
.footer-brand:active { opacity: 0.55; transform: translateY(1px); }

.footer__logo {
  max-width: 300px;
  height: auto;
  margin-bottom: 22px;
}

/* お問い合わせボタン（footer-desc の下・同じ幅で展開） */
.footer-contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 380px;
  margin-bottom: 28px;
  padding: 19px 24px;
  border-radius: 999px;   /* カプセル状（ヘッダーに合わせた丸み） */
  background: linear-gradient(135deg, #cfe3d3 0%, #e7ddc4 55%, #F7F3E9 100%);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--fs-15);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.footer-contact-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.26);
  filter: brightness(1.04);
  color: var(--color-primary);
}

.footer-contact-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}


.footer-contact-btn__text { flex: 0 1 auto; }


.footer-desc {
  font-size: var(--fs-15);
  line-height: 2;
  margin-bottom: 36px;
}

/* 連絡先カード */
.footer-contact {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 22px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}


.footer-bottom {
  position: relative;
  z-index: 1;
  background: rgba(0,0,0,0.22);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 18px 0;
  font-size: var(--fs-12);
  color: rgba(255,255,255,0.45);
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* コピーライト内の改行はPCでは無効（1行）、モバイルのみ有効 */
.footer-copy__br { display: none; }

.footer-links { display: flex; gap: 24px; }
.footer-links a {
  position: relative;
  color: rgba(255,255,255,0.45);
  transition: var(--transition);
}
.footer-links a:hover { color: rgba(255,255,255,0.9); }

/* ============================================================
   各施設フッター（調整版）
============================================================ */

.p-footer-clinic-new {
  position: relative;
  background-color: #f7f3e9;
  background-color: transparent;
  padding-top: 0;
  z-index: 1;
}


/* 波の高さ分(-100px)からスタート */
.p-footer-bg-decoration {
  position: absolute;
  /* 波の高さ分(-100px)からスタート */
  top: 0;
  left: 0;
  width: 100%;
  
  /* svhではなく、親要素の高さ100% + 上に突き出た100px分をカバー */
  height: calc(100%); 
  
  pointer-events: none;
  z-index: 3;
  overflow: hidden;

  /* 下方向(L 2000 1000の1000)を、余裕を持って3000くらいに伸ばすとより安全です
  clip-path: path("M 0 100 C 150 0 350 100 500 50 C 650 0 850 100 2000 50 L 2000 3000 L 0 3000 Z");*/
  
  background-color: rgb(247, 243, 233);
  background-image: 
      radial-gradient(at 10% 90%, var(--grad-color-1) 0%, transparent 80%), 
      radial-gradient(at 90% 90%, var(--grad-color-2) 0%, transparent 80%), 
      radial-gradient(at 50% 10%, var(--grad-color-3) 0%, transparent 80%);
}

/* 施設ごとのカラー変数 */
/* 第一（青系）：中間の青(color-2)を強調 */
.is-senshou-clinic {
  --grad-color-1: rgba(50, 100, 255, 0.1);
  --grad-color-2: rgba(0, 51, 153, 0.25); 
  --grad-color-3: rgba(100, 200, 255, 0.1);
}

/* 第二（赤系）：最初の赤(color-1)を強調 */
.is-muratatouseki-clinic {
  --grad-color-1: rgba(255, 50, 50, 0.25); 
  --grad-color-2: rgba(255, 100, 100, 0.1);
  --grad-color-3: rgba(255, 200, 150, 0.15);
}

/* 第三（緑系）：最後の緑(color-3)を強調 */
.is-natoritouseki-clinic {
  --grad-color-1: rgba(100, 200, 100, 0.1);
  --grad-color-2: rgba(150, 255, 150, 0.1);
  --grad-color-3: rgba(0, 153, 51, 0.25);
}

/* 背景色自体の微調整（波との一体化） */
.is-senshou-clinic.p-footer-clinic-new, .is-senshou-clinic .p-footer-wave path { fill: #f7f3e9; }
.is-muratatouseki-clinic.p-footer-clinic-new, .is-muratatouseki-clinic .p-footer-wave path { fill: #f7f3e9; }
.is-natoritouseki-clinic.p-footer-clinic-new, .is-natoritouseki-clinic .p-footer-wave path { fill: #f7f3e9; }

/* 円の配置 */
/* --- 背景グラデーションの装飾：配置調整 --- */
.p-footer-bg-decoration__circle {
  position: absolute;
  filter: blur(80px);
  border-radius: 50%;
  opacity: 0.6;
}


/* お知らせヒーローの radial-gradient (at 10% 10% 等) の位置に合わせる */
/* 個別円（__circle）を使う場合の反転配置 */
.-c1 {
  width: 70%; height: 70%;
  bottom: -10%; /* topからbottomへ */
  left: -10%; 
  background: var(--grad-color-1);
}

.-c2 {
  width: 70%; height: 70%;
  bottom: -10%; /* topからbottomへ */
  right: -10%;
  background: var(--grad-color-2);
}

.-c3 {
  width: 80%; height: 80%;
  top: 10%; /* bottomからtopへ（波の裏側あたり） */
  left: 10%; 
  background: var(--grad-color-3);
}

/* --- メインコンテンツ --- */
.p-footer-clinic-new .container {
  position: relative;
  z-index: 10; /* 最前面へ */
}

/* wp-custom-infosection が p-footer-bg-decoration(z-index:3) に隠れないよう前面に */
.p-footer-clinic-new .wp-custom-infosection {
  position: relative;
  z-index: 10;
}


/* --- メインコンテンツのコンテナ --- */
.p-footer-clinic-new .container {
  position: relative;
  z-index: 10; /* グラデーション装飾(z-index:3)より上へ */
}

/* ============================================================
   施設情報ラッパー：左＝施設情報、右＝ナビ
============================================================ */
.p-footer-info-wrap {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 48px;
  padding: 48px 20px 40px;
  align-items: start;
  position: relative;
  z-index: 10;
}

/* --- 左側：施設情報エリア --- */
.p-footer-info__logo-link {
  display: inline-block;
  transition: opacity 0.25s ease;
}
.p-footer-info__logo-link:hover { opacity: 0.72; }
.p-footer-info__logo-link:active { opacity: 0.55; }

.p-footer-info__logo img {
  max-width: 350px;
  height: auto;
  margin-bottom: 30px;
}

.p-footer-info__address {
  font-style: normal;
  line-height: 1.8;
  margin-bottom: 30px;
  font-size: var(--fs-16);
  color: #333;
}


/* --- フッターナビゲーション（縦型テキストリンク） --- */
.p-footer-nav {
  padding-top: 8px;
}

.p-footer-nav__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.p-footer-nav__list li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.p-footer-nav__list li:nth-child(-n+2) {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.p-footer-nav__list li:nth-child(odd) {
  border-right: 1px solid rgba(0, 0, 0, 0.07);
}

.p-footer-nav__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 8px;
  text-decoration: none;
  color: #444;
  font-size: var(--fs-18);
  font-weight: 500;
  transition: color 0.2s, padding-left 0.2s;
}

.p-footer-nav__list a::after {
  content: "\203A";
  font-size: var(--fs-16);
  color: var(--theme-color);
  opacity: 0.7;
}

.p-footer-nav__list a:hover {
  color: var(--theme-color);
  padding-left: 6px;
}


/* ============================================================
   モバイル対応（〜900px）
============================================================ */
@media (max-width: 900px) {
  /* バナーセクション */
  .p-footer-banners-section {
    padding: 24px 0 28px;
  }

  /* 情報＋ナビ：縦積み */
  .p-footer-info-wrap {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px 12px 32px;
  }

  /* ナビ：モバイルでは2列グリッド */
  .p-footer-nav {
    padding-top: 0;
  }

  .p-footer-nav__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .p-footer-nav__list li {
    border-top: none;
    border-bottom: 1px solid rgba(0,0,0,0.07);
  }

  .p-footer-nav__list li:nth-child(-n+2) {
    border-top: 1px solid rgba(0,0,0,0.07);
  }

  .p-footer-nav__list li:nth-child(odd) {
    border-right: 1px solid rgba(0,0,0,0.07);
  }

  .p-footer-nav__list a {
    font-size: var(--fs-12);
    padding: 13px 4px;
  }

  /* 住所・電話を中央寄せ */
  .p-footer-info {
    text-align: center;
  }

  .p-footer-info__numbers {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 4px;
  }

  .p-footer-info__num-group {
    gap: 3px;
  }

  .p-footer-info__num-sep {
    display: none;
  }

  .p-footer-info__tel-note {
    text-align: center;
  }

  /* ロゴサイズ調整 */
  .p-footer-info__logo img {
    width: 260px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .is-senshou-clinic .p-footer-info__logo img {
    transform: translateX(20px);
  }

  /* 住所サイズ */
  .p-footer-info__address {
    font-size: var(--fs-14);
  }

  /* 旧互換 */
  .p-footer-main-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 60px 0 40px;
  }

  .p-footer-related-facilities {
    padding: 20px 0 !important;
  }

  .p-footer-info__address {
      font-size: var(--fs-14);
  }

  .p-footer-related-tel {
    margin-bottom: 10px;
}

  /* タグ（ラベル）も中央寄せ */
  .p-footer-info__tags {
      justify-content: center;
  }

  /* 電話ボタンの幅を100%にして、押しやすく */
  .c-tel-btn {
      width: 100%;
      max-width: 400px; /* 広がりすぎ防止 */
      margin-left: auto;
      margin-right: auto;
      justify-content: center;
      font-size: var(--fs-20);
      padding: 12px 20px;
  }

  /* 診療時間パネルのパディングを調整 */
  .p-footer-hours-panel {
      padding: 20px;
  }

  .p-footer-map iframe {
    min-height: 300px; /* 少し低くすると情報の全体像が見やすくなります */
}
}

/* --- 下部エリア（法人情報全体） --- */
/* ============================================================
   施設バナー 3カラム
============================================================ */
/* ============================================================
   バナーセクション（フッター上部・別背景）
============================================================ */
.p-footer-banners-section {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  padding: 32px 0 36px;
}

.p-footer-banners-section .container {
  position: relative;
  z-index: 10;
}

.p-footer-banners-section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 28px;
}

.p-footer-banners-section__symbol {
  color: var(--theme-color);
}
.p-footer-banners-section__symbol img { height: 45px; width: auto; }

.p-footer-banners-section__title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: var(--fs-32);
  font-weight: 700;
  color: #222;
  letter-spacing: 0.15em;
  margin: 0;
}

.p-footer-banners-section__en {
  font-size: var(--fs-13);
  color: var(--theme-color);
  letter-spacing: 0.35em;
  font-weight: 600;
  text-transform: capitalize;
  margin: 0;
}

@media (max-width: 768px) {
  .p-footer-banners-section__title { font-size: var(--fs-26); }
  .p-footer-banners-section__en    { font-size: var(--fs-12); }
  .p-footer-banners-section__symbol img { height: 36px; }
}

.p-footer-facility-banners__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.p-footer-facility-card {
  display: flex;
  position: relative;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: #333;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 110px;
  /* ホバー時の角ちらつき防止：GPUレイヤー化＋角クリップを安定させる */
  transform: translateZ(0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.p-footer-facility-card:hover {
  transform: translateY(-4px) translateZ(0);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
}

.p-footer-facility-card__photo {
  width: 40%;
  flex-shrink: 0;
  overflow: hidden;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.p-footer-facility-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 常に少しオーバースキャンさせ、画像の縁がコンテナ境界に
     ぴったり乗ることで起きる下辺の1pxちらつきを防ぐ */
  transform: scale(1.04) translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.4s ease;
}

.p-footer-facility-card:hover .p-footer-facility-card__photo img {
  transform: scale(1.09) translateZ(0);
}

.p-footer-facility-card__body {
  padding: 18px 20px 18px 18px;
  flex: 1;
  min-width: 0;   /* nowrap テキストが縮む余地を確保 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  transition: background-color 0.3s ease;
}

.p-footer-facility-card__corp {
  display: block;
  font-size: clamp(11px, 1.0vw, 15px);
  color: #333;
  line-height: 1.4;
  white-space: nowrap;
}

.p-footer-facility-card__name {
  display: block;
  font-size: clamp(14px, 1.3vw, 21px);
  font-weight: 500;
  color: #333;
  line-height: 1.35;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color 0.3s ease;
}

/* ホバー：本文全体をうっすら施設カラーに、施設名は施設カラーの濃色に */
.p-footer-facility-card:hover .p-footer-facility-card__body {
  background-color: color-mix(in srgb, var(--theme-color) 12%, #fff);
}

.p-footer-facility-card:hover .p-footer-facility-card__name {
  color: var(--theme-color);
}

.p-footer-facility-card__icon {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background-color: var(--theme-color, #1e3a8a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .p-footer-facility-banners__grid {
    gap: 10px;
  }

  .p-footer-facility-card {
    min-height: 88px;
  }

  .p-footer-facility-card__photo {
    width: 34%;
  }

  .p-footer-facility-card__body {
    padding: 14px 14px 14px 12px;
  }
}

@media (max-width: 768px) {
  .p-footer-facility-banners__grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .p-footer-facility-card:last-child {
    grid-column: auto;
    max-width: none;
  }

  .p-footer-facility-card__photo {
    width: 36%;
  }
}

/* ============================================================ */

.p-footer-bottom-area {
  margin-top: 0; /* 上の余白を完全になくす */
  padding: 40px 0 20px;
  background-color: var(--theme-color) !important; /* 施設カラーを背景に */
  color: #fff; /* 文字はすべて白抜き */
  position: relative;
  z-index: 5;
}

/* 会社名とボタンを並べるフレックスBOX */
.p-footer-corporate-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 控えめな白い線 */
  padding-bottom: 20px;
  margin-bottom: 20px;
}


/* 法人サイトへリンクボタン（スケルトンデザイン） */
.btn-corp-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.1); /* ほんのり白く透過 */
  border: 1px solid rgba(255, 255, 255, 0.5); /* 白い枠線 */
  color: #fff;
  padding: 12px 25px;
  text-decoration: none;
  border-radius: 4px;
  font-size: var(--fs-14);
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-corp-link:hover {
  background: #fff;
  color: var(--theme-color); /* ホバーで色が反転 */
  transform: translateY(-2px);
}

/* 矢印（CSSで描く小さな三角） */
.btn-corp-link::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* コピーライト行（コピー＋リンク） */
.p-footer-copy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* コピーライト */
.p-footer-copy {
  text-align: left;
  font-size: var(--fs-12);
  letter-spacing: 0.05em;
  opacity: 0.7; /* 少し控えめに */
}

/* コピーライト横のリンク（個人情報保護方針・職員専用ページ） */
.p-footer-copy-links {
  display: flex;
  gap: 20px;
}
.p-footer-copy-links a {
  color: #fff;
  font-size: var(--fs-12);
  letter-spacing: 0.03em;
  opacity: 0.7;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
.p-footer-copy-links a:hover { opacity: 1; }

.corp-info__link {
  display: inline-block;
  transition: opacity 0.25s ease;
}
.corp-info__link:hover { opacity: 0.72; }
.corp-info__link:active { opacity: 0.55; }

.corp-info img {
  max-width: 250px;
  height: auto;
}

/* モバイル対応：縦並びにする */
@media (max-width: 768px) {
  .p-footer-bottom-area {
    padding: 20px 0 16px;
  }

  .p-footer-corporate-flex {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding-bottom: 16px;
  }
  .corp-info img { max-width: 200px; }

  /* モバイルではロゴ画像がリンクを兼ねるためボタンは非表示 */
  .btn-corp-link {
    display: none;
  }

  .p-footer-copy {
    text-align: center;
    font-size: .5882352941em;
  }

  .p-footer-copy-row {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }
  .p-footer-copy-links {
    justify-content: center;
    gap: 16px;
  }
  .p-footer-copy-links a { font-size: var(--fs-11); }
}

/* --- 法人ボタン --- */


/* ラベルのコンテナ */
.p-footer-info__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 15px 0 20px; /* ロゴと住所との間隔 */
}

/* ラベル単体 */
.c-tag {
  display: inline-block;
  padding: 3px 10px;
  font-size: var(--fs-14); /* 少し小さめが上品です */
  font-weight: 700;
  color: #fff; /* 文字は白抜き */
  background-color: var(--theme-color);
  border-radius: 5px; /* ほんのり角丸 */
  letter-spacing: 0.05em;
  line-height: 1.4;
}


/* コンテナ全体 */
.p-footer-info__contact-box {
  margin-top: 20px;
  font-family: 'Quicksand', 'M PLUS Rounded 1c', sans-serif;
}

/* 電話・FAX 横並び */
.p-footer-info__numbers {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 6px;
}

.p-footer-info__num-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.p-footer-info__num-label {
  font-size: var(--fs-11);
  font-weight: 600;
  color: #888;
  letter-spacing: 0.08em;
}

.p-footer-info__num {
  font-size: var(--fs-16);
  font-weight: 700;
  color: #333;
  text-decoration: none;
  letter-spacing: 0.05em;
}

a.p-footer-info__num:hover {
  color: var(--theme-color);
}

.p-footer-info__num-sep {
  font-size: var(--fs-14);
  color: #bbb;
  line-height: 1;
  display: inline-flex;
  align-self: center;
}


@media (max-width: 900px) {
  .p-footer-info__numbers {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 4px;
  }

  .p-footer-info__num-group {
    gap: 3px;
  }

  .p-footer-info__num-sep {
    display: none;
  }
}


/* 電話・FAX共通アイテム */
.p-footer-info__contact-box p {
  color: #555;
  font-size: var(--fs-13);
  font-weight: 300;
  margin-bottom: 10px;
}


/* --- モバイル調整 --- */
@media (max-width: 900px) {
  .p-footer-info__contact-box {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央寄せ */
  }
  
  .c-contact-number {
    font-size: var(--fs-24);
  }

  .c-contact-form-btn {
    max-width: 100%;
  }
}

/* PCでは改行を無効化 */
.u-sp-only {
  display: none;
}

@media (max-width: 900px) {
  /* スマホ（900px以下）で改行を有効化 */
  .u-sp-only {
    display: inline;
  }
}

/* --- 関連施設エリア（修正版） --- */


/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .facilities-grid { grid-template-columns: repeat(2, 1fr); }
  .staff-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-col--brand { grid-column: 1 / -1; }
  /* スタック時はサイトマップを全幅・4等分に戻し、3バナー・ブランドと左右を揃える */
  .footer-sitemap__grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: none;
    margin-left: 0;
    column-gap: 40px;
  }
  .about-grid { gap: 40px; }
}

@media (max-width: 768px) {
  .section { padding: 56px 0; }

  .site-nav, .header-cta { display: none; }
  .hamburger { display: flex; }

  .hero { min-height: 500px; }
  .hero-stats { flex-wrap: wrap; gap: 20px; }

  .about-grid { grid-template-columns: 1fr; }
  .about-badge { bottom: -10px; left: 10px; }

  .facilities-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .dialysis-cards { grid-template-columns: 1fr; }
  .staff-grid { grid-template-columns: repeat(2, 1fr); }

  .facility-detail-intro { grid-template-columns: 1fr; }

  .news-page-grid { grid-template-columns: 1fr; }
  .news-bar-inner { flex-wrap: wrap; gap: 10px; }

  /* ── モバイルフッター：全体を圧縮して高さを抑える ── */
  .footer-main { padding: 40px 0 28px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-col--brand .footer-brand { display: block; text-align: center; }
  .footer__logo { margin-bottom: 14px; }
  .footer-desc { font-size: var(--fs-13); line-height: 1.75; margin-bottom: 20px; }
  .footer-col--brand .footer-contact-btn {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4px;
    padding: 15px 22px;
  }

  /* サイトマップ：文字と余白を詰める */
  .footer-sitemap__grid { grid-template-columns: repeat(2, 1fr); gap: 16px 16px; }
  .footer-sitemap__group--end { align-items: flex-start; text-align: left; }
  .footer-sitemap__head { font-size: var(--fs-15); margin-bottom: 8px; padding-bottom: 6px; }
  .footer-sitemap__sub { gap: 5px; }
  .footer-sitemap__sub li a { font-size: var(--fs-13); }

  /* 関連施設バナー：カード高さ・余白を圧縮 */
  .site-footer .p-footer-banners-section { margin-top: 28px; padding: 24px 0 4px; }
  .p-footer-facility-banners__grid { gap: 8px; }
  .p-footer-facility-card { min-height: 70px; }
  .p-footer-facility-card__body { padding: 11px 16px 11px 14px; }

  /* 下部：コピーライト＋リンクを詰める */
  .footer-bottom { padding: 14px 0; }
  .footer-bottom-inner { flex-direction: column; gap: 8px; text-align: center; }
  .footer-copy { line-height: 1.7; text-align: center; font-size: var(--fs-10); letter-spacing: 0.02em; white-space: nowrap; }
  .footer-copy__br { display: none; }   /* 1行・中央揃え（施設毎フッターと同等サイズ） */
  .footer-links { justify-content: center; }

  .header-main-inner { flex-wrap: wrap; gap: 12px; }
}

@media (max-width: 480px) {
  .about-features { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
  .staff-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ANIMATIONS
============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


.fade-in { animation: fadeIn 0.6s ease-out forwards; }

/* ============================================================
   MOBILE HEADER
============================================================ */

/* PC: SPヘッダーを非表示 */
@media (min-width: 769px) {
  .l-header-sp {
    display: none !important;
  }
}

/* SP: PCヘッダーを非表示 */
@media (max-width: 768px) {
  .l-header-clinic { display: none !important; }
}

/* SP: グローバルメニューボタンのリセット */
@media (max-width: 768px) {
  .p-global-menu button {
    border: none;
    outline: none;
  }
}

@media (max-width: 768px) {

  /* --- ヘッダー全体（透明・固定） --- */
  .l-header-sp {
    position: fixed;
    top: 5px;
    left: 0;
    width: 100%;
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
    z-index: 9999;
    /* PC版(.l-header-clinic)と同じ理由：透明な全幅fixedバーのままだと
       ロゴ・アクション(電話/アクセス/メニュー)以外の余白もクリックを奪う。
       ここで無効化し、実際に見えている要素だけ下で復活させる。 */
    pointer-events: none;
  }

  .l-header-sp .p-header-logo-sp,
  .l-header-sp .p-header-actions {
    pointer-events: auto;
  }

  /* --- トップカラーライン（固定・全幅） --- */
  .p-header-top-line {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: var(--theme-color);
    z-index: 10000;
  }

  /* --- ヘッダー内側 ---
     align-items: stretch にして、ロゴ側の白背景をp-header-actionsと
     同じ高さまで伸ばす（center のままだと高さの差分だけ上下に隙間が出る） */
  .p-header-sp-inner {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 0;
  }

  /* --- ロゴ（残りスペース全体を画像エリアとして使用） --- */
  .p-header-logo-sp {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    background: #fff;
    padding: 8px 12px;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin: 0;
  }

  .p-header-logo-sp img {
    display: block;
    height: auto;
    width: auto;
    max-height: 44px; /* アクションボタン(60px)の高さ - 上下padding(8px*2)に合わせた上限。
                          固定pxなので、以前のmax-height:100%(親がflexのstretchで
                          高さが決まる循環参照のため効かなかった)と違い確実に効く */
    max-width: 100%;  /* ロゴが横長で画面が狭い場合はこちらが先に効き、縦横比を保ったまま
                          縮小する（375px幅の村田・名取クリニックのロゴが潰れていた問題の対策） */
  }

  /* --- アクションボタンエリア --- */
  .p-header-actions {
    display: flex;
    flex-shrink: 0;
    margin-left: 0;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 0;
    overflow: hidden;
  }

  /* --- 各アクションボタン --- */
  .p-header-action-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    text-decoration: none;
    outline: none;
    color: #fff;
  }

  /* アイコンラッパー */
  .icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: visible;
  }

  /* ラベル */
  .p-header-action-item .label {
    font-size: var(--fs-10);
    font-weight: 800;
    line-height: 1;
    margin: 0;
    padding: 0;
    color: #fff;
  }

  /* ボタン背景グラデーション（右に行くほど濃く） */
  .p-header-action-item.--tel {
    background-color: color-mix(in srgb, var(--theme-color), transparent 70%);
  }
  .p-header-action-item.--access {
    background-color: color-mix(in srgb, var(--theme-color), transparent 35%);
  }
  .p-header-action-item.--menu {
    background-color: var(--theme-color);
  }

  /* アイコン */
  .p-header-action-item .icon-wrap i {
    font-size: var(--fs-18);
    color: #fff;
    display: block;
    line-height: 1;
  }

  .p-header-action-item.--tel i {
    transform: rotate(15deg);
  }

  /* ハンバーガーメニュー三本線 */
  .p-header-menu-lines {
    top: 0 !important;
    width: 20px;
    height: 2px;
    background-color: #fff;
    position: relative;
    margin: 11px;
  }
  .p-header-menu-lines::before,
  .p-header-menu-lines::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    left: 0;
  }
  .p-header-menu-lines::before { top: -6px; }
  .p-header-menu-lines::after { top: 6px; }

  /* メニュー開閉時：三本線が×になる */
  body.is-menu-open .p-header-menu-lines {
    background-color: transparent !important;
  }
  body.is-menu-open .p-header-menu-lines::before {
    top: 0;
    transform: rotate(45deg);
  }
  body.is-menu-open .p-header-menu-lines::after {
    top: 0;
    transform: rotate(-45deg);
  }

}

/* 施設案内グリッド */
.facilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin-top: 50px;
}


/* 変数設定 */
:root {
  --corp-green: #00552e;
  --corp-beige: #F7F3E9;
  --text-main: #333;
  --text-sub: #666;
}

.t-nanshu-section {
  padding: clamp(80px, 10vw, 160px) 0;
  background-color: var(--corp-beige);
  overflow: hidden;
  position: relative;
}


.t-nanshu-label .line {
  width: 40px;
  height: 1px;
  background: var(--corp-green);
}


/* 全体の土台 */
.v-group-submerge {
  position: relative;
  padding: 140px 0;
  background-color: var(--bg-color);
  overflow: hidden;
}


/* 右から左への無限スクロール */
@keyframes v-scroll-left-submerge {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* 半分（1セット分）進んでループ */
}


@keyframes floatMove {
  from { transform: translate(0, 0) rotate(0deg); }
  to { transform: translate(-30px, 50px) rotate(5deg); }
}


.sub-title {
  display: block;
  color: var(--theme-color);
  font-weight: 700;
  font-size: var(--fs-14);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.main-title {
  font-size: var(--fs-35);
  color: #333;
  margin-bottom: 40px;
  position: relative;
  padding-bottom: 15px;
}

.main-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background: var(--theme-color);;
}


.position {
  font-size: var(--fs-14);
  color: #718096;
  margin-bottom: 5px;
}

.name {
  font-size: var(--fs-29);
  color: #1a365d;
  font-weight: 700;
}

.name span {
  font-size: var(--fs-16);
  color: #a0aec0;
  margin-left: 15px;
  font-weight: normal;
}


/* レスポンシブ対応（スマホ表示） */
@media (max-width: 968px) {
  .director-container {
      flex-direction: column;
      text-align: center;
      gap: 40px;
  }
  
  .director-image {
      max-width: 80%;
      margin: 0 auto;
  }

  .main-title::after {
      left: 50%;
      transform: translateX(-50%);
  }

  .image-accent {
      display: none; /* スマホではシンプルに */
  }
}


.role {
  font-size: var(--fs-14);
  font-weight: bold;
  margin-bottom: 5px;
}


.name-en {
  font-size: var(--fs-14);
  color: #a69f88;
  margin-top: -5px;
}


/* Google Fontsの明朝体を使用することを推奨します */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');


/* --- アニメーション用クラス（JSまたはAOS等で使用） --- */
.fade-in-up.is-active {
    opacity: 1;
    transform: translateY(0);
}


.fade-in-left.is-active {
    opacity: 1;
    transform: translateX(0);
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');


.position {
    font-size: var(--fs-14);
    color: #888;
    margin-bottom: 5px;
}

.name {
    font-size: var(--fs-32);
    margin: 0;
}

.name small {
    font-size: var(--fs-14);
    font-weight: 400;
    color: #b5ada2;
    margin-left: 15px;
}


.photo-frame {
    position: relative;
    width: 100%;
    /* 浮き出る効果用の初期状態 */
    transform: translateY(40px);
    opacity: 0;
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.8s linear;
}

.photo-frame img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0 100px 0 0; /* アートクリニック風の角丸 */
}


/* アニメーション用のアクティブクラス */
.js-reveal.is-visible .photo-frame,
.js-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');


/* 写真本体の枠 */
.photo-frame {
    position: relative;
    z-index: 2;
    background: #fff;
    padding: 15px; /* 写真を額縁のように囲う白枠 */
    box-shadow: 10px 10px 40px rgba(0,0,0,0.1);
}

.photo-frame img {
    width: 100%;
    height: auto;
    display: block;
    /* 写真自体の下部を消さず、ハッキリ見せる */
}

/* アニメーション用クラス */
.js-reveal.is-visible .photo-container,
.js-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.name { font-size: var(--fs-29); margin: 0; color: var(--theme-color);}
.name small { font-size: var(--fs-13); color: #b5ada2; margin-left: 10px; }


/* フォーム全体のコンテナ */
.p-form-container {
  background-color: #F7F3E9; /* 指定のベージュ */
  padding: 40px;
  border-radius: 8px;
  max-width: 800px;
  margin: 0 auto;
}


/* 入力フィールドのスタイル */
.wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%;
  padding: 15px;
  font-size: var(--fs-18); /* 高齢者向けに大きく */
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  box-sizing: border-box;
}

/* フォーカス時の色（プライマリカラーの青を使用） */
.wpcf7-form-control:focus {
  border-color: #003399;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 51, 153, 0.3);
}

/* プライバシーポリシー同意エリア */
.p-form-privacy {
  text-align: center;
  margin: 30px 0;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

/* チェックボックスを大きくして押しやすくする */
.wpcf7-acceptance input {
  transform: scale(1.8);
  margin-right: 15px;
  vertical-align: middle;
}

/* 送信ボタンのスタイル（プライマリカラーの緑） */
.p-form-submit {
  text-align: center;
}

.wpcf7-submit {
  background-color: #009933; /* 指定の緑 */
  color: #fff;
  font-size: var(--fs-20);
  font-weight: bold;
  padding: 20px 80px;
  border: none;
  border-radius: 50px; /* 角丸で優しさを演出 */
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 0 #006622; /* 押しボタン風の立体感 */
}

.wpcf7-submit:hover {
  opacity: 0.9;
  transform: translateY(2px);
  box-shadow: 0 2px 0 #006622;
}

/* エラーメッセージ（バリデーション） */
.wpcf7-not-valid-tip {
  color: #FF0000;
  font-size: var(--fs-14);
  font-weight: bold;
  margin-top: 5px;
}

.l-concept {
  background-color: #ffffff; /* p-clinic-intro 下部ドームとのコントラスト確保 */
  padding: 300px 0 120px;    /* 上に余白多め確保（下アーチの重なりを吸収） */
  position: relative;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
}

.l-concept__inner {
  max-width: 1200px;
  margin: 0 0 0 auto;
  /* ≤1200px: inner は左端から始まるので 写真幅45% + 60px でちょうど60pxの隙間 */
  padding-left: calc(45% + 60px);
  padding-right: 4%;
  width: 100%;
  position: relative;
  z-index: 2;
}
/* >1200px: margin-left:auto で inner が右にシフトする分を差し引いて常に60pxの隙間を維持
   計算式: 1260px - 55vw = (1200 + 60) - (100% - 45%) × vw */
@media (min-width: 1200px) {
  .l-concept__inner {
    padding-left: max(60px, calc(1260px - 55vw));
  }
}

.l-concept__flex {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 3vw;
  /* position:relative なし → circle-photo は l-concept__inner を containing block にする */
}

/* 背景の巨大な英字（右側に配置） */

/* 縦書き見出し（一番右） */
.l-concept__title-wrap {
  writing-mode: vertical-rl;
  font-family: "Zen Maru Gothic", sans-serif;
  color: var(--theme-color);
  flex-shrink: 0;
}

.l-concept__title {
  font-size: var(--fs-50);
  line-height: 1.8;
  letter-spacing: 0.15em;
  font-weight: 800;
}

.l-concept__title .small {
  font-size: var(--fs-34);
  display: inline-block;
  margin-bottom: 1em;
}

/* 文章（中央） */
.l-concept__body {
  max-width: 560px;
  padding-top: 60px;
  display: flex;
  flex-direction: column;
}

.l-concept__text {
  font-size: var(--fs-20); /* 本文は法人系ページ(20px)と統一 */
  line-height: 2.2;
  color: #333;
  font-weight: 600;
}
.l-concept__text p { margin: 0; }
.l-concept__text p + p { margin-top: 1em; }

/* --- 画像（左端ピッタリ・arc ゾーンに食い込む） --- */
.l-concept__image-full {
  position: absolute;
  top: 0;              /* l-concept 上端＝p-clinic-intro arc ゾーン起点にピッタリ揃える */
  left: 0;
  width: 45%;
  height: 100%;        /* セクション全体をカバー */
  z-index: 0;          /* p-clinic-intro(z-index:1)の後ろ → arc透明角から画像が透けて見える */
  /* グレー線アーティファクト対策：上端 2% だけ透明にフェード */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 4%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 4%);
}

.l-concept__image-full > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 右端のみマスク（上端は ::before の白グラデで処理） */
  -webkit-mask-image: linear-gradient(to right, black 55%, transparent 100%);
  mask-image: linear-gradient(to right, black 55%, transparent 100%);
  border-radius: 0;
  box-shadow: none;
}

/* 丸くり抜き写真：l-concept__flex 内に絶対配置
   display:contents でコンテナを透過 → 各 circle-photo が flex の relative に対して配置 */
.l-concept__circle-photos {
  display: contents;
}
.l-concept__circle-photo {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  opacity: 0;
  animation: circlePhotoFadeIn 0.8s ease forwards;
  z-index: 3; /* l-concept__inner(z-index:2) より上に出す */
}
/* mod-1：image-full エリア内・l-concept__title と同じ高さ
   left: calc(45% - 200px) = image-full 右端(45%)から 200px 左。
   どのビューポートでも 45% = l-concept(フル幅)の 45% = image-full 右端と一致するので
   テキストエリアに被ることがない。
   top: 300px = l-concept の padding-top と同値 ≒ title-wrap の上端 */
.l-concept__circle-photo.mod-1 {
  top: 200px;
  left: calc(45% - 200px);
  bottom: auto;
  right: auto;
  animation-delay: 0.2s;
}
/* mod-2：縦書きタイトル下あたり（右下） */
.l-concept__circle-photo.mod-2 {
  bottom: 100px;
  right: 20px;
  top: auto;
  left: auto;
  animation-delay: 0.5s;
}
.l-concept__circle-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes circlePhotoFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ラベル・見出し・ボタン */
.l-concept__label {
  font-size: var(--fs-15);
  letter-spacing: 0.35em;
  color: var(--theme-color);
  font-weight: 700;
  margin: 0 0 10px;
}
.l-concept__headline {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: var(--fs-38);
  font-weight: 800;
  color: #333;
  line-height: 1.4;
  margin: 0 0 24px;
}
.l-concept__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  align-self: center;
  padding: 16px 40px;
  background-color: var(--theme-color);
  color: #fff;
  border-radius: 50px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: var(--fs-18);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.l-concept__btn--tel .l-concept__btn-tel-number {
  font-size: var(--fs-24);
  font-weight: 800;
  letter-spacing: 0.08em;
}
.l-concept__btn:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

/* レスポンシブ（〜768px） */
@media screen and (max-width: 768px) {

  /* セクション：padding-top:0 で image-full が l-concept 上端（= arc ゾーン起点）に来る */
  .l-concept {
    padding: 0 0 60px;
    display: block;
    min-height: 0;
  }

  /* 画像エリア：通常フロー全幅・固定高さ。
     z-index:0 で p-clinic-intro(z-index:1) の背後に → PC と同様に arc ブリード。
     mask は不要（p-clinic-intro が上端を覆うのでグレー線は見えない）。 */
  .l-concept__image-full {
    position: relative;
    transform: none;
    width: 100%;
    height: 300px;
    margin: 0;
    z-index: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* 画像：下部フェードアウト */
  .l-concept__image-full > img {
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    border-radius: 0;
    object-position: center 40%;
  }

  /* 丸写真：l-concept 基準の絶対配置（display:contents はデスクトップと共通） */
  .l-concept__circle-photos {
    display: contents;
  }
  .l-concept__circle-photo {
    width: 90px;
    height: 90px;
  }
  /* mod-1：メイン写真の左上 */
  .l-concept__circle-photo.mod-1 {
    top: 50px;
    left: 10px;
    bottom: auto;
    right: auto;
  }
  /* mod-2：title-wrap の下・右寄せ */
  .l-concept__circle-photo.mod-2 {
    top: 250px;
    right: 16px;
    bottom: auto;
    left: auto;
    transform: none;
  }

  /* 本文エリア */
  .l-concept__inner {
    padding: 28px 20px 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    position: relative; /* title-wrap の containing block を inner に固定 */
  }

  /* フレックス縦積み */
  .l-concept__flex {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 縦書きタイトル：メイン写真の右上に絶対配置。
     l-concept__inner は image-full(300px) の直後から始まるので
     top: calc(16px - 230px) = -214px → 写真上端から 86px の位置に相当。 */
  .l-concept__title-wrap {
    display: block;
    position: absolute;
    top: calc(16px - 230px);
    right: 16px;
    z-index: 4;
  }
  .l-concept__title {
    font-size: var(--fs-21);
    line-height: 1.6;
    /* 写真との同化を防ぐ：白縁取り＋ハロー＋影 */
    text-shadow:
      0 0 2px rgba(255, 255, 255, 1),
      0 0 6px rgba(255, 255, 255, 1),
      0 0 12px rgba(255, 255, 255, 1),
      0 0 20px rgba(255, 255, 255, 0.9),
      2px 2px 0 rgba(255, 255, 255, 1),
      -2px -2px 0 rgba(255, 255, 255, 1),
      2px -2px 0 rgba(255, 255, 255, 1),
      -2px 2px 0 rgba(255, 255, 255, 1),
      2px 0 0 rgba(255, 255, 255, 1),
      -2px 0 0 rgba(255, 255, 255, 1),
      0 2px 0 rgba(255, 255, 255, 1),
      0 -2px 0 rgba(255, 255, 255, 1),
      0 4px 8px rgba(0, 0, 0, 0.45);
  }
  .l-concept__title .small {
    font-size: var(--fs-14);
  }

  .l-concept__body {
    padding-top: 0;
    max-width: 100%;
  }
  .l-concept__headline { font-size: var(--fs-24); }
  .l-concept__text { font-size: var(--fs-18); line-height: 2; }

  /* ボタン中央寄せ */
  .l-concept__btn {
    align-self: center;
  }
}


/* ═══════════════════════════════════════════════════════
   l-director-neo（院長ごあいさつ） ─ p-clinic-intro 内に統合
═══════════════════════════════════════════════════════ */
.l-director-neo {
  padding: 40px 0 140px;
}

/* ─── タイトルヘッダー（p-asymmetry-features と同スタイル） ─── */
.l-director-neo__title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-top: 24px;
  margin-bottom: 60px;
}
.l-director-neo__symbol {
  color: var(--theme-color);
}
.l-director-neo__symbol img { height: 45px; width: auto; }
.l-director-neo__clinic-label {
  font-size: var(--fs-16);
  font-weight: 700;
  color: #333;
  margin: 0;
  letter-spacing: 0.1em;
}
.l-director-neo__section-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: var(--fs-32);
  font-weight: 700;
  color: #333;
  letter-spacing: 0.15em;
  line-height: 1.2;
  margin: 0;
}
.l-director-neo__en-label {
  font-size: var(--fs-12);
  color: var(--theme-color);
  letter-spacing: 0.35em;
  font-weight: 600;
  text-transform: capitalize;
  margin: 0;
}

/* ─── メイン：写真 ＋ 挨拶文（2カラムグリッド）─── */
.l-director-neo__main {
  max-width: 1400px;
  margin: 0 auto 80px;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
}

/* 写真カラム */
.l-director-neo__photo-col {
  position: relative;
}

/* 左下はみ出しデコブロブ（集合写真と同スタイル） */
.l-director-neo__deco-blob {
  position: absolute;
  bottom: -50px;
  left: -50px;
  width: 380px;
  height: 380px;
  background-color: color-mix(in srgb, var(--theme-color), #fff 72%);
  filter: blur(1px);
  pointer-events: none;
  z-index: 0;
  animation: waveAnimationBlue 12s infinite alternate ease-in-out;
}

.l-director-neo__photo-frame {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.10);
}
.l-director-neo__photo-frame img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
/* テキストカラム */
.l-director-neo__text-col {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
}
.l-director-neo__greeting-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: var(--fs-26);
  font-weight: 900;
  color: var(--theme-color);
  letter-spacing: 0.04em;
  line-height: 1.6;
  margin: 0;
}
.l-director-neo__greeting-text {
  font-size: var(--fs-20); /* 本文は法人系ページ(20px)と統一 */
  font-weight: 500;
  line-height: 2.05;
  color: #4a4a4a;
  letter-spacing: 0.03em;
}
.l-director-neo__greeting-text p {
  margin: 0;
  text-indent: 1em; /* 段落先頭を全角1マス字下げ */
}
.l-director-neo__greeting-text p + p { margin-top: 1.2em; }
/* ─── シンボル透かし（text-col 内 絶対配置） ─── */
.l-director-neo__name-watermark {
  position: absolute;
  right: -10px;
  bottom: -10px;
  height: 220px;
  width: auto;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ─── 院長名 プロフィール ─── */
.l-director-neo__profile {
  border-top: 2px solid var(--theme-color);
  padding-top: 20px;
  position: relative;
  z-index: 1;
}
.l-director-neo__post {
  font-size: var(--fs-15);
  font-weight: 700;
  color: var(--theme-color, #8a7d6a);
  letter-spacing: 0.03em;
  margin: 0 0 6px;
  /* 直下の院長名（.l-director-neo__name）が右揃えのため、役職も右に揃える */
  text-align: right;
}
.l-director-neo__post-line { display: inline; }
.l-director-neo__post-sep { display: inline; }
.l-director-neo__name {
  display: flex;
  flex-direction: row-reverse; /* DOM順(名前→英字)のまま、見た目だけ英字を左・名前を右にする */
  align-items: baseline;
  justify-content: flex-start;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: var(--fs-34);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #1a1a1a;
  margin: 0;
  text-align: right;
}
.l-director-neo__name-en {
  font-family: "Montserrat", sans-serif;
  font-size: var(--fs-16);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #999;
  margin-right: 0.6em;
}

/* ─── 経歴エリア ─── */
.l-director-neo__career {
  max-width: 1400px;
  margin: 60px auto 0;
  padding: 0 40px 0;
}
/* 経歴・保有資格等を左右並びに。保有資格等側は年数付きの付随情報
   （学会評議員など）を本文と分けて2行目の小さいバッジにしているため、
   本文自体は短く、この列幅でもnowrapで収まりやすい */
.l-director-neo__career-grid {
  display: grid;
  /* 以前は 1fr 1.3fr の左右2カラムだったが、資格欄が狭く長い資格名が
     折り返し・横スクロールして読みづらかった。経歴／保有資格を上下2段に分け、
     各段を全幅にして折り返さずに表示する（泉松会概要ページの行組みに近い見せ方）。 */
  grid-template-columns: 1fr;
  gap: 44px 0;
  align-items: start;
}
/* 経歴を載せず保有資格だけを掲載する施設（名取透析クリニック）。
   2列（1fr 1.3fr）のままだと資格欄が左の狭い列に寄って右半分が
   まるごと空いてしまうため、読みやすい幅の1列にして中央に置く。
   1023px以下では下の指定で1列になるが、min() により 100% に落ちるので
   モバイルでも破綻しない */
.l-director-neo__career-grid.-quals-only {
  grid-template-columns: min(680px, 100%);
  justify-content: center;
}
/* 名取（資格のみ）は中央寄せの1列レイアウト。資格も3件と少ないため
   2列にせず1列で全幅に見せる（.-quals-only の中だけ上の2列指定を打ち消す） */
.l-director-neo__career-grid.-quals-only .l-director-neo__qualifications ul {
  columns: 1;
}
.l-director-neo__career-grid.-quals-only .l-director-neo__qualifications li.-col-break {
  break-before: auto;
}

/* ─── セクション見出し（略歴 / 保有資格 共通） ─── */
.l-director-neo__career-label {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: var(--fs-20);
  font-weight: 800;
  color: var(--theme-color, #8a7d6a);
  letter-spacing: 0.15em;
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.l-director-neo__career-label::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 1.1em;
  background: var(--theme-color, #8a7d6a);
  border-radius: 2px;
  flex-shrink: 0;
}
.l-director-neo__career-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e8e2d8;
}

/* ─── 略歴タイムライン ─── */
.l-director-neo__career-history {
  position: relative;
}
.l-director-neo__career-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  position: relative;
}
.l-director-neo__career-list::before {
  content: "";
  position: absolute;
  left: 170px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, #dcd6c8 80%, transparent);
}
.l-director-neo__career-item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  margin-bottom: 0;
  padding: 12px 0;
  position: relative;
}
.l-director-neo__career-item::before {
  content: "";
  position: absolute;
  left: 170px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--theme-color, #8a7d6a);
  border: 3px solid #F7F3E9;
  box-shadow: 0 0 0 1px var(--theme-color, #8a7d6a);
  z-index: 1;
}
.l-director-neo__career-item:last-child { padding-bottom: 0; }
.l-director-neo__career-item dt {
  font-family: "Montserrat", "Zen Maru Gothic", sans-serif;
  font-weight: 800;
  color: var(--theme-color, #8a7d6a);
  font-size: var(--fs-15);
  flex-shrink: 0;
  line-height: 1.8;
  text-align: right;
  white-space: nowrap;
  padding-right: 14px;
}
.l-director-neo__career-item dd {
  font-weight: 600;
  color: #444;
  line-height: 1.8;
  margin: 0;
  font-size: var(--fs-16);
  padding-left: 10px;
}

/* ─── 略歴の補足項目（同じ在籍期間内での役職異動など） ─── */
.l-director-neo__career-sub {
  list-style: none;
  margin: 4px 0 0;
  padding: 0 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.l-director-neo__career-sub li {
  display: flex;
  align-items: baseline;
  /* space-between だと年号が右端まで飛んで不自然だったため、役職名の直後に置く */
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0 6px;
  font-size: var(--fs-14);
  font-weight: 600;
  color: #928a76;
  line-height: 1.6;
  position: relative;
  padding-left: 14px;
}
.l-director-neo__career-sub li::before {
  content: "－";
  position: absolute;
  left: 0;
  color: #c9c0ab;
}
.l-director-neo__career-sub-role {
  min-width: 0;
  color: #333;
}
.l-director-neo__career-sub-year {
  font-family: "Montserrat", "Zen Maru Gothic", sans-serif;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ─── 保有資格等 カラム ─── */
.l-director-neo__career-right {
  display: flex;
  flex-direction: column;
}
/* 項目の文言が長く折り返させたくないため、コンテナクエリで実際の
   横幅に応じてフォントサイズを縮小する。それでも収まらない極端に
   長い項目は、行内だけ横スクロールできるようにして折り返しを防ぐ */
.l-director-neo__qualifications {
  container-type: inline-size;
}
.l-director-neo__qualifications ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* 資格が多い施設（泉松=12件）では1カラム全幅だと縦に長く右側も空くため2列にする。
     grid の行方向（左右交互）ではなく、multicol で「上から順に左列→右列」と流す。
     長い資格名は列内で自然に折り返し、横スクロールはさせない。
     列の区切り位置は .-col-break を付けた項目で制御する（下の break-before）。 */
  columns: 2;
  column-gap: 48px;
}
.l-director-neo__qualifications li {
  break-inside: avoid; /* 1項目が列をまたいで分断されないように */
}
.l-director-neo__qualifications li.-col-break {
  break-before: column; /* この項目から右列を開始する */
}
.l-director-neo__qualifications li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: clamp(0.82rem, calc(2.3cqi - 0.3px), 1rem);
  font-weight: 700;
  color: #444;
  padding: 8px 0;
  border-bottom: 1px solid #f0ece5;
  line-height: 1.6;
}
.l-director-neo__qualifications li:last-child { border-bottom: none; }
.l-director-neo__qualifications-bullet {
  flex-shrink: 0;
  color: var(--theme-color, #8a7d6a);
  font-size: 0.7em;
  align-self: center; /* 表記名の中央に合わせて縦中央に置く（泉松会ページと統一） */
}
.l-director-neo__qualifications-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.l-director-neo__qualifications-text {
  font-size: inherit;
  /* 2列では列幅を超える資格名があるため、横スクロールではなく通常の折り返しにする */
  white-space: normal;
  min-width: 0;
}
.l-director-neo__qualifications-text::-webkit-scrollbar {
  display: none;
}
/* 学会評議員（年数）など付随情報は本文より小さい別行にして、
   本文自体の長さを短くし、nowrapで収まりやすくする */
.l-director-neo__qualifications-sub {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  /* 学会評議員（年号）は本文と同じ色・サイズ・太さにそろえる（色付け・縮小をしない） */
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  white-space: nowrap;
  overflow-x: auto;
  min-width: 0;
  scrollbar-width: none;
}
.l-director-neo__qualifications-sub-year {
  font-family: inherit; /* 本文と同じ書体（Montrserrat にしない） */
}
.l-director-neo__qualifications-sub::-webkit-scrollbar {
  display: none;
}

/* ─── レスポンシブ ─── */
/* 経歴本文の「、」での改行制御。既定（PC・タブレット）は読点を表示し改行しない。
   モバイル(<=768px)でのみ読点を隠して改行する（下の @media で切り替え）。 */
.u-career-sp-br { display: none; }
.u-career-comma { display: inline; }

/* ── PC（1024px〜）：経歴も保有資格と同じく2列で表示し、右側の空きをなくす ──
   2列にすると縦の一本線・ドットが列をまたげないため、PCでは線とドットを外し、
   各項目を独立した行として見せる。年号は各項目に付くので対応関係は保たれる。
   上から順に左列→右列（＝古い年から新しい年）に流れる。
   タブレット・スマホ（1023px以下）は従来どおり1列のタイムライン表示。 */
@media (min-width: 1024px) {
  .l-director-neo__career-list {
    display: block;
    columns: 2;
    column-gap: 48px;
  }
  /* リスト全体に引く1本線は使わず、各項目の左端に線を引いて列ごとにつなげる */
  .l-director-neo__career-list::before { display: none; }
  .l-director-neo__career-item {
    break-inside: avoid;
    grid-template-columns: 145px 1fr; /* 年号 | 経歴名 */
    column-gap: 24px;                 /* 縦線と経歴名の間の隙間 */
    row-gap: 0;
    padding: 9px 0;
    align-items: start;
    position: relative;
  }
  /* 縦線：年号の右(145px)に縦に通す。各項目の高さいっぱいに引くと、
     縦に隙間なく積まれる項目どうしで線がつながり、経歴のつながりを表現できる。
     （ドットは表示しない） */
  .l-director-neo__career-item::before {
    display: block;
    content: "";
    position: absolute;
    left: 145px;
    top: 0;
    bottom: 0;
    transform: none;
    width: 1px;
    height: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #dcd6c8;
    z-index: 0;
  }
  .l-director-neo__career-item::after { display: none; } /* ドットは非表示 */
  /* 年号は左寄せ。線の手前で止まるよう右側に余白を取る */
  .l-director-neo__career-item dt {
    text-align: left;
    padding-right: 14px;
  }
  .l-director-neo__career-item dd {
    padding-left: 0;
  }
}

@media (max-width: 1023px) {
  .l-director-neo__main {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 20px;
  }
  .l-director-neo__career {
    padding: 0 20px 0;
  }
  .l-director-neo__career-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  /* この幅では2列だと1列あたりが狭く資格名が細切れに折り返すため、1列に戻す。
     1列時は .-col-break の強制列改行が余分な2列目を作ってしまうので無効化する。 */
  .l-director-neo__qualifications ul {
    columns: 1;
  }
  .l-director-neo__qualifications li.-col-break {
    break-before: auto;
  }
  /* 経歴：PC版に合わせ、ドットは表示せず縦線1本でつながりを表現し、年号は左寄せにする。
     縦線(career-list::before)は単一列のこの幅でも1本の連続線として残る。 */
  .l-director-neo__career-item::before { display: none; } /* ドット非表示 */
  .l-director-neo__career-item dt { text-align: left; }
  .l-director-neo__deco-blob {
    width: 240px;
    height: 240px;
    bottom: -30px;
    left: -30px;
  }
}
@media (max-width: 768px) {
  .l-director-neo__section-title { font-size: var(--fs-26); }
  .l-director-neo__en-label      { font-size: var(--fs-12); }
  .l-director-neo                { padding: 32px 0 80px; }
  .l-director-neo__name-watermark { height: 160px; }
  .l-director-neo__greeting-title { font-size: var(--fs-22); }
  .l-director-neo__greeting-text  { font-size: var(--fs-18); }
  .l-director-neo__name          { font-size: var(--fs-27); }
  /* モバイルでは「法人名・理事長」「クリニック名・院長」を2行に分けて表示 */
  .l-director-neo__post-line { display: block; }
  .l-director-neo__post-sep  { display: none; }
  /* この幅では長い項目を折り返しなしで収めるとフォントが判読不能なほど
     小さくなってしまうため、横スクロールではなく通常の折り返しに戻す */
  .l-director-neo__qualifications-text {
    white-space: normal;
    overflow-x: visible;
  }
  /* 「学会評議員（年号）」は年号が学会評議員に紐づくため、モバイルでも
     本文の下の行に分けて表示する（デスクトップと同じ2行構成）。
     sub は base の flex のまま（学会評議員＋年号を横並びで1行に）、
     収まらなければ折り返す。 */
  .l-director-neo__qualifications-sub {
    white-space: normal;
    overflow-x: visible;
  }
  /* 役職名が折り返す幅では space-between だと年数だけ離れて浮いてしまうため、
     役職名の直後に年数が続く自然な並びに切り替える */
  .l-director-neo__career-sub li {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 8px;
  }
  .l-director-neo__greeting-title {
    overflow-wrap: anywhere;
    word-break: auto-phrase;
  }
  .l-director-neo__post {
    overflow-wrap: anywhere;
    word-break: auto-phrase;
  }
  /* モバイルは横幅が狭いので、年号と経歴名を横並びにせず縦に積む。
     年号を1行目、経歴名を2行目に置き、経歴名は画面の左右幅いっぱいに使う。
     つながりは左端の細い縦線（career-list::before）で表現し、各項目は
     線の分だけ左に余白を空ける。 */
  .l-director-neo__career-item {
    display: block;              /* grid をやめて縦積み */
    padding: 8px 0 8px 18px;     /* 左端の縦線の分だけ内容を右へ */
  }
  .l-director-neo__career-item dt {
    display: block;
    font-size: var(--fs-14);
    text-align: left;
    padding: 0;
    margin-bottom: 2px;
  }
  .l-director-neo__career-item dd {
    padding-left: 0;             /* 経歴名は全幅で表示 */
  }
  /* 縦線は左端に寄せて、全項目を貫く1本のレールにする */
  .l-director-neo__career-list::before { left: 4px; }
  /* 経歴本文：モバイルは「、」を隠して、その位置で改行する */
  .u-career-comma { display: none; }
  .u-career-sp-br { display: inline; }
  /* モバイルの名目フォントサイズを統一：保有資格名を経歴名(1rem)に合わせる
     （既定は container query の clamp で 0.82rem まで縮んでいた） */
  .l-director-neo__qualifications li {
    font-size: var(--fs-16);
  }
}
@media (max-width: 768px) {
  .l-director-neo__deco-blob {
    width: 160px;
    height: 160px;
    bottom: -20px;
    left: -20px;
  }
}

/* ── 院長写真なし：モノグラムバッジ variant ── */
.l-director-neo--no-photo .l-director-neo__main {
  grid-template-columns: 200px 1fr;
  gap: 60px;
}
.l-director-neo__monogram-col {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
}
.l-director-neo__monogram {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--theme-color), #fff 55%),
    color-mix(in srgb, var(--theme-color), #fff 78%));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-48);
  color: var(--theme-color);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--theme-color), transparent 72%);
  flex-shrink: 0;
}
@media (max-width: 1023px) {
  .l-director-neo--no-photo .l-director-neo__main {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .l-director-neo__monogram-col {
    justify-content: center;
    padding-top: 0;
  }
}

/* ============================================
   汎用固定ページ（page.php）の本文カード
   幅は他ページ（.p-about-inner）に揃えて最大1400px
   ============================================ */
.p-page-body {
    max-width: 1400px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    padding: 48px;
    box-shadow: var(--shadow-sm);
    line-height: 2;
    color: var(--color-text);
}