@charset "UTF-8";
/* =========================================================================
淡海ふれあい病院 parts.css ―― 本文（.sub_panel）貼り付け用の汎用パーツ
・テーブル / カード / アコーディオン / フォトグリッド
※ カラー・角丸・影は style.css の :root 変数（--green 等）を継承。
※ style.css より後に読み込み、本ファイルで各パーツを完結させる。
========================================================================= */
/* 各パーツ共通の下マージン（段落間と揃える） */
.table_box,
.cards,
.acc,
.photogrid,
.media{ margin:0 0 1.5rem; }
.table_box:last-child,
.cards:last-child,
.acc:last-child,
.photogrid:last-child,
.media:last-child{ margin-bottom:0; }
/* ========================================================================
WordPress 自動整形（wpautop）対策
本文へ貼ると、要素の隙間に空の や
が勝手に挿入され、グリッドや
レイアウトが崩れることがある。各パーツの“正規の子”は div / a / figure /
table / button / span なので、直下に来る素の
・
は想定外＝無効化する。
※ .card_body 直下の
（card_name / card_desc）は正規のため対象外。
※ 「カスタムHTML」ブロックに貼れば wpautop 自体が働かず、この対策は保険。
======================================================================== */
.cards > p, .cards > br,
.card > p, .card > br,
.card_body > br,
.photogrid > p, .photogrid > br,
.photogrid .photo > br, .photogrid .photo > p,
.photogrid figure > br, .photogrid figure > p,
.media > p, .media > br,
.media_img > p, .media_img > br,
.table_box > p, .table_box > br,
.acc > p, .acc > br,
.acc_item > p, .acc_item > br{ display:none !important; margin:0 !important; }
/* ※ .acc_body / .acc_inner の中（本文領域）に入る
は正規の本文なので消さない。
開閉は .acc_body の overflow:hidden＋高さ制御で行うため、中に
が増えても崩れない。 */
/* ========================================================================
1. テーブル
…
…
・横スクロール対応（スマホ）／グリーンヘッダー
・修飾: table_stripe（縞）／table_compact（余白小）／table_center（中央寄せ）
======================================================================== */
.table_box{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:0.75rem; box-shadow:0 1rem 0.5rem -0.75rem rgba(0,0,0,0.05); }
.table_box table{ width:100%; border-collapse:collapse; background:#fff; border:0; margin:0; }
.table_box caption{ text-align:left; font-weight:600; color:var(--green-d); padding:0.9rem 1.25rem; border-bottom:1px solid var(--line); }
.table_box th,
.table_box td{ padding:0.9rem 1.25rem; border-bottom:1px solid var(--line); border-right:1px solid var(--line-t); text-align:left; vertical-align:top; line-height:1.6; }
.table_box th:last-child,
.table_box td:last-child{ border-right:0; }
.table_box thead th{ background:var(--green); color:#fff; font-weight:600; white-space:nowrap; border-right-color:rgba(255,255,255,.25); }
.table_box tbody th{ background:var(--green-ll); color:var(--green-d); font-weight:600; white-space:nowrap; }
.table_box tr:last-child th,
.table_box tr:last-child td{ border-bottom:0; }
.table_box .note{ display:block; font-size:0.8125rem; color:var(--gray); }
.table_box .off{ color:var(--gray); }
/* 修飾 */
.table_stripe tbody tr:nth-child(even) td{ background:var(--green-ll); }
.table_compact th,
.table_compact td{ padding:0.55rem 0.85rem; }
.table_center th,
.table_center td{ text-align:center; }
.table_center thead th{ text-align:center; }
/* ========================================================================
2. カード
・自動折り返しグリッド。列数固定は cards_2 / cards_3 / cards_4
・.card がリンク（）なら hover で浮き上がる
======================================================================== */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.25rem; }
.cards_2{ grid-template-columns:repeat(2,1fr); }
.cards_3{ grid-template-columns:repeat(3,1fr); }
.cards_4{ grid-template-columns:repeat(4,1fr); }
.card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:1rem; overflow:hidden; box-shadow:0 1rem 0.5rem -0.75rem rgba(0,0,0,0.05); transition:.25s; }
a.card:hover{ opacity:1; transform:translateY(-4px); box-shadow:0 1.25rem 1.25rem -0.75rem rgba(0,0,0,0.12); }
.card_pic{ aspect-ratio:16/10; overflow:hidden; background:var(--green-ll); }
.card_pic img{ width:100%; height:100%; object-fit:cover; display:block; transition:.4s; }
a.card:hover .card_pic img{ transform:scale(1.05); }
.card_body{ display:flex; flex-direction:column; gap:0.5rem; flex:1; padding:1rem 1.25rem 1.25rem; line-height:1.5; }
.card_name{ display:flex; align-items:center; gap:0.25rem; font-size:clamp(1rem,1.6vw,1.25rem); font-weight:600; margin:0; }
.card_arrow{ margin-left:auto; flex-shrink:0; font-size:1.5rem; color:var(--green-d); transition:.25s; }
a.card:hover .card_arrow{ transform:translateX(3px); }
.card_desc{ color:var(--ink); margin:0; }
.card_tag{ align-self:flex-start; padding:0.15rem 0.75rem; background:var(--green-ll); color:var(--green-d); font-size:0.8125rem; font-weight:600; border-radius:999px; }
p:empty { display: none;}
/* ========================================================================
3. アコーディオン
… data-acc-single で1つだけ開く
… class に is-open で初期展開
…
等が勝手に増えても崩れない堅牢な方式。 */
.acc_body{ overflow:hidden; max-height:0; transition:max-height .3s ease; }
.acc_inner{ padding:1.25rem; }
.acc_inner > :first-child{ margin-top:0; }
.acc_inner > :last-child{ margin-bottom:0; }
/* JS 無効時のフォールバック（開いた状態で表示） */
.acc_item.is-open > .acc_body{ max-height:none; }
/* Q&A 用途（見出しアイコンを Q に）: acc の代わりに class="acc acc_qa" */
.acc_qa .acc_head::before{ content:"Q"; font-family:inherit; width:1.5rem; height:1.5rem; display:inline-flex; align-items:center; justify-content:center; font-size:0.9rem; color:#fff; background:var(--green); border-radius:50%; }
/* 見出しマークなし（「？」「Q」を消す）: class="acc acc_plain" */
.acc_plain .acc_head::before{ content:none; display:none; }
/* ========================================================================
5. メディア（画像＋文章の横並び）
・PC : 画像と文章を左右に並べる。画像は w**（例: w40=40%）で割合指定、
文章側は残り幅いっぱい（flex-grow:1）に自動で広がる。
・SP（≤768px）: 縦積みに切り替わり、画像は横幅100%表示になる。
・修飾: media_rev（画像を右／文章を左）／media_center（上下中央そろえ）
======================================================================== */
.media{ display:flex; align-items:flex-start; gap:1.5rem; }
.media_img{ flex:0 0 auto; } /* w** の幅を保持（縮まない） */
.media_img img{ width:100%; height:auto; display:block; border-radius:0.75rem; }
.media_body{ flex:1 1 0; min-width:0; line-height:1.7; } /* 残り幅いっぱい */
.media_body > :first-child{ margin-top:0; }
.media_body > :last-child{ margin-bottom:0; }
/* 幅未指定（w** を付けない）ときの既定は 40% */
.media > .media_img:not([class*="w"]){ width:40%; }
/* 修飾 */
.media_rev{ flex-direction:row-reverse; }
.media_center{ align-items:center; }
/* ========================================================================
4. フォトグリッド
… data-lightbox で拡大表示ON
説明
…