@charset "UTF-8";
/* =============================================================
   lower.css — 下層ページ（本文ページ・一覧・記事）のスタイル（手で直すのはこのファイル）

   読み込み（下層の本文ページ）: lower-base.css → lower.css → lower-parts.css → pages/<ページ>.css
     lower-base.css  … 移行キットの雛形から、下層で使っているルールだけを抜き出した基本スタイル
     lower.css       … このファイル。1. 共通ヘッダー/フッター/追従ボタン  2. 下層の見出し帯・本文の部品  3. コラム（ブログ）
     lower-parts.css … 本文の部品ごとの値（自動生成。HTML の style 属性をクラスにまとめたもの）
     pages/<ページ>.css … そのページだけのCSS（本番の埋め込みHTML由来。自動生成）
   TOP は top-reset.css + top.css だけを読む（このファイルは読まない）。
   ============================================================= */

/* #############################################################
   1. 共通ヘッダー / フッター / 追従ボタン（旧 site-chrome.css）
   ############################################################# */
/* =============================================================
   site-chrome.css — 共通ヘッダー/フッター/追従ボタン（下層ページ・一覧・記事で使用）
   旧サイトTOPの独自CSS（top.css）からヘッダー/フッター部分を抜き出し、
   素のタグ指定（header/footer/nav）を .sk-header / .sk-footer / #js-nav に限定したもの。
   TOP は top.css 一式を読むのでこのファイルは使わない。
   ============================================================= */
.sk-header { position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 1000; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); height: 120px; }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 5px 20px; display: flex; justify-content: space-between; align-items: center; }
.logo h1 { font-size: 12px; margin: 0; }
.logo img { width: 350px; height: auto; }
#js-nav { display: flex; margin-top: 10px; }
.nav-list { display: flex; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; padding: 0 30px; }
.nav-item>a { display: block; text-decoration: none; transition-duration: 0.5s; position: relative; text-decoration: none; color: #6b6b6b; text-decoration: none; font-weight: bold; }
.nav-item.has-submenu>a::after { content: ''; display: inline-block; margin-left: 7px; width: 6px; height: 6px; border-right: 1px solid #6b6b6b; border-bottom: 1px solid #6b6b6b; transform: rotate(45deg); vertical-align: middle; }
.sub-menu { display: none; position: absolute; top: 100%; left: 0; background: #6b6b6b; width: 200px; list-style: none; margin: 0; padding: 0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.sub-menu li a { color: #fff; padding: 12px 18px; display: block; text-align: center; text-decoration: none; }
.sub-menu li a:hover { background: #7FD5E7; }
.scroll-nav { height: 100px !important; }
.scroll-nav h1 { display: none; }
.scroll-nav .logo img { width: 250px; margin: 10px 0 0 0; }
.scroll-nav .sub-menu li a:hover { background: #7FD5E7; color: #fff; }
.underLine a::after { position: absolute; left: 0; content: ''; width: 100%; height: 2px; background: #7FD5E7; bottom: -1px; transform: scale(0, 1); transform-origin: left top; transition: transform 0.3s; }
.underLine a:hover::after { transform: scale(1, 1); }
.hamburger { display: none; flex-direction: column; cursor: pointer; width: 50px; height: 25px; position: relative; }
.hamburger span { position: absolute; height: 3px; width: 100%; background: #7FD5E7; transition: all 0.3s ease; }
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 15px; }
.hamburger span:nth-child(3) { top: 30px; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg); top: 10px; }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg); top: 10px; }
@media (max-width: 768px) {
  #js-nav { position: fixed; top: 70px; right: -100%; width: 80%; height: 100%; flex-direction: column; background: #fff; transition: right 0.3s ease; overflow-y: auto; }
  #js-nav.active { right: 0; }
  .nav-list { flex-direction: column; }
  .nav-item>a { padding: 20px; }
  .hamburger { display: flex; }
  .sub-menu { position: static; background: #7FD5E7; display: none; }
  .nav-item.open .sub-menu { display: block; }
  .sub-menu li a { border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
}
.logo img { width: 300px; margin-top: 5px; }
.scroll-nav .logo img { margin: 8px 0 0 0; }
@media (max-width: 480px) {
  .sk-header { height: 90px; }
  .h1 { font-size: 10px; }
  .scroll-nav { height: 90px; }
  .hamburger { width: 30px; }
  .hamburger span:nth-child(1) { top: 0; }
  .hamburger span:nth-child(2) { top: 9px; }
  .hamburger span:nth-child(3) { top: 18px; }
  .logo img { width: 230px; margin-top: 3px; }
}
@media (min-width: 769px) {
  .nav-item.has-submenu:hover .sub-menu { display: block; }
}
.pagetop { height: 70px; width: 70px; position: fixed; right: 0; bottom: 0; background: #7FD5E7; border: solid 2px #fff; display: flex; justify-content: center; align-items: center; z-index: 10000; }
.pagetop__arrow { height: 10px; width: 10px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: translateY(20%) rotate(-45deg); }
#slideL { z-index: 9999; cursor: pointer; position: fixed; bottom: 20%; right: -326px; background: #6b6b6b; width: 400px; color: #fff; font-size: 16px; }
.slide-inner p { writing-mode: vertical-rl; background: #7FD5E7; border: solid 2px #fff; color: #fff; font-size: 20px; font-weight: bold; padding: 55px 22px; }
.slide-inner { display: flex; }
.slide-inner img { width: 300px; height: auto; margin: 20px 0 0 10px; }
.slide-top { margin-top: 50px; }
.bottom { display: none; }
.sk-footer { width: 100%; height: auto; background: linear-gradient(90deg, rgba(196, 196, 196, 1), rgba(249, 249, 249, 1) 56%, rgba(255, 255, 255, 1)); padding-top: 50px; }
.footer-top { width: 100%; height: 300px; background-image: url('../img/uploads/2025/06/img-76b22dcc.webp'); background-repeat: no-repeat; background-size: cover; background-position-y: 83%; }
.footer-top-flex { display: flex; justify-content: space-evenly; }
.footerText { margin-top: 87px; }
.footerText h3 { text-align: center; font-size: 22px; font-weight: bold; color: #fff; }
.footerText p { text-align: center; padding-top: 30px; color: #fff; }
.f-img { margin-top: 61px; }
.f-img02 { margin-top: 20px; }
.footer-top-flex img { display: block; width: 400px; height: auto; transition-duration: .5s; }
.footer-top-flex img:hover { transform: scale(1.1); }
.footer-bottom { width: 100%; height: auto; background: linear-gradient(90deg, rgba(196, 196, 196, 1), rgba(249, 249, 249, 1) 56%, rgba(255, 255, 255, 1)); }
.footer-bottom-flex { display: flex; justify-content: center; gap: 215px; }
.footer-info { width: 550px; height: auto; text-align: center; }
.footer-info p { text-align: center; }
.f-logo { width: 400px; height: auto; margin: 50px auto 20px auto; transition-duration: .5s; }
.f-logo:hover { opacity: .5; }
.f-b-img { margin: 40px 0 50px 0; }
.f-b-img img { display: block; width: 250px; height: auto; margin: 20px auto; transition-duration: .5s; }
.f-b-img img:hover { transform: scale(1.1); }
.footer-menu-flex { display: flex; gap: 40px; margin-top: 145px; }
.footer-menu ul li { padding-top: 15px; }
.footer-menu ul a { text-decoration: none; color: #000; transition-duration: .5s; }
.footer-menu ul a:hover { text-decoration: underline #7FD5E7; opacity: .7; }
@media screen and (max-width:768px) {
  .sk-header, .sk-footer { max-width: 100%; }
  #slideL { display: none; }
  .slide-inner p { background: #7FD5E7; border: solid 2px #fff; color: #fff; font-size: 20px; font-weight: bold; padding: 55px 22px; }
  .slide-inner { display: block; }
  .slide-inner img { width: 300px; height: auto; margin: 20px 0 0 10px; }
  .slide-top { margin-top: 50px; }
  .bottom { display: flex; justify-content: flex-start; width: 83%; gap: 0; height: auto; position: fixed; z-index: 150; bottom: 3px; left: 0; }
  .bottomBtn { display: block; text-align: center; width: 48%; height: auto; margin: 0 auto; padding: 19px 0; border: 2px solid #fff; outline: 3px solid #7FD5E7; background: #7FD5E7; transition-duration: 0.5s; line-height: 120%; }
  .bottomBtn a { text-decoration: none; font-size: 18px; color: #fff; }
  .sk-header { display: block; }
  .scroll-nav .h-logo { margin: 5px 0 0 15px !important; }
  .sk-footer { width: 100%; height: auto; padding-bottom: 40px; }
  .footer-top { width: 100%; height: auto; background-image: url('../img/uploads/2025/06/img-63b5380e.webp'); background-repeat: no-repeat; background-size: cover; background-position-y: 83%; }
  .footer-top-flex { margin: 0 auto; display: block; justify-content: space-evenly; }
  .footerText { margin-top: 0; padding-top: 70px; }
  .footerText h3 { text-align: center; font-size: 20px; font-weight: bold; color: #fff; }
  .footerText p { text-align: center; padding-top: 30px; color: #fff; }
  .f-img { display: flex; flex-direction: column; align-items: center; list-style: none; padding: 0; margin: 0 auto; gap: 10px; }
  .f-img01 { margin-top: 30px; }
  .f-img02 { margin-top: 20px; margin-bottom: 60px; }
  .footer-top-flex img { display: block; width: 400px; height: auto; transition-duration: .5s; }
  .footer-bottom { width: 100%; height: auto; background: linear-gradient(90deg, rgba(196, 196, 196, 1), rgba(249, 249, 249, 1) 56%, rgba(255, 255, 255, 1)); }
  .footer-bottom-flex { display: block; justify-content: center; gap: 0; }
  .footer-info { width: 100%; height: auto; text-align: center; }
  .footer-info p { text-align: center; }
  .f-logo { width: 360px; height: auto; margin: 50px auto 20px auto; transition-duration: .5s; }
  .f-logo:hover { opacity: .5; }
  .f-b-img { margin: 40px 0 50px 0; }
  .f-b-img img { display: block; width: 250px; height: auto; margin: 20px auto; transition-duration: .5s; }
  .f-b-img img:hover { transform: scale(1.1); }
  .footer-menu-flex { display: flex; justify-content: center; gap: 100px; margin-top: 70px; }
  .footer-menu ul li { padding-top: 15px; }
  .footer-menu ul a { text-decoration: none; color: #000; transition-duration: .5s; }
  .footer-menu ul a:hover { text-decoration: underline #7FD5E7; opacity: .7; }
}
@media screen and (max-width:480px) {
  .sk-header, .sk-footer { max-width: 100%; }
  .sk-header { height: 95px; }
  .h1 { font-size: 10px !important; }
  .scroll-nav { height: 83px !important; }
  .scroll-nav .h2 { display: none; }
  .scroll-nav .h_logo { width: 230px; margin: 5px 0 0 15px; }
  .scroll-nav .logo img { width: 210px; margin: 5px 0 0 0; }
  .hamburger-btn { top: 6px; right: 8px; width: 100px; height: 70px; }
  .hamburger-btn span { left: 22px; width: 60px; height: 5px; }
  .hamburger-btn span:nth-child(1) { top: 20px; }
  .hamburger-btn span:nth-child(2) { top: 37px; }
  .hamburger-btn span:nth-child(3) { top: 55px; }
  .pagetop { height: 60px; width: 60px; }
  .bottomBtn { display: block; text-align: center; width: 47%; height: auto; margin: 0 auto; padding: 14px 0; border: 2px solid #fff; outline: 3px solid #7FD5E7; background: #7FD5E7; transition-duration: 0.5s; line-height: 120%; }
  .footerText { margin-top: 0; padding-top: 50px; }
  .footerText h3 { text-align: center; font-size: 18px; }
  .footerText p { font-size: 15px; }
  .f-img { width: 90%; }
  .f-logo { width: 250px; margin: 35px auto 20px auto; }
  .footer-info p { font-size: 15px; padding: 0 10px; }
  .footer-menu-flex { gap: 60px; }
}


/* フッターのお問い合わせ帯：上の灰色の余白（footer の padding-top 50px）をなくし、写真の帯から始める。
   帯の高さ・見出し位置は本番の下層ページ（Brizy フッター）の実測：高さ 357px／見出しは帯の上から 100px */
.sk-footer { padding-top: 0; }
@media (min-width: 769px) {
  .footer-top { height: 357px; }
  .footerText { margin-top: 100px; }
  .f-img { margin-top: 74px; }
}

/* #############################################################
   2. 下層ページの見出し帯・パンくず・本文の部品（旧 sk-lower.css）
   ############################################################# */
/* =============================================================
   sk-lower.css — 下層ページ（クリーン本文・一覧・記事）の装飾
     1. 共通ヘッダーの下層版（2段目：お悩み別ページ）と固定ヘッダー分の余白
     2. 下層ヒーロー（写真の帯＋白い見出し箱）・パンくず
     3. Brizy から変換した本文（clean-b の出力：fs-sec / fs-txt / fs-media / fs-grid / fs-row …）
   寸法は本番（https://sakurasaku-dc.com/about/ ほか）を 1366px / 390px で実測した値。
   Brizy の既定：コンテナ 1170px・列の内側余白 15px・部品の上下 10px（部品どうし 20px）・本文 16px/行間1.9。
   ============================================================= */

:root {
  --sk-gray: #6b6b6b;
  --sk-blue: #7FD5E7;
  --sk-body: rgb(28, 28, 28);   /* 本番の本文色（実測） */
  --sk-wrap: 1170px;
  --sk-header-h: 116px;         /* 下層の固定ヘッダーの高さ（細帯＋ロゴ。ナビは1段：お悩み別ページはプルダウンに集約） */
}

body.fs-page {
  padding-top: var(--sk-header-h);
  font-family: 'Noto Serif', 'Noto Serif JP', serif;
  color: var(--sk-body);
}
:where(body.fs-page) :where(h1, h2, h3, h4) { font-family: inherit; color: inherit; font-weight: 400; }

/* 共通パーツは TOP と同じ行間（ブラウザ既定）で組む。本文の行間1.9を継承すると予約タブ・フッターが崩れる */
.sk-header, .sk-footer, #slideL, .bottom, .pagetop { line-height: normal; }

/* ---------- 1. ヘッダー（下層版） ---------- */
.sk-header--lower { height: auto; min-height: var(--sk-header-h); background: linear-gradient(90deg, rgba(196, 196, 196, 1), rgba(249, 249, 249, 1) 40%, rgba(255, 255, 255, 1)); }
.sk-header--lower .header-inner { max-width: 1200px; align-items: center; padding: 6px 20px 10px; }
.sk-header--lower .logo h1, .sk-header--lower .logo .h1 { font-size: 11px; line-height: 1.3; color: #666; letter-spacing: -.02em; font-weight: 400; margin: 0 0 14px; }
.sk-header--lower .logo img { width: 265px; margin-top: 0; }
.sk-header--lower #js-nav { align-items: center; margin-top: 0; }
.sk-header--lower .nav-item { padding: 0 22px; }
.sk-header--lower .nav-item > a { color: #000; font-weight: 400; font-size: 15px; line-height: 1.6; }
.sk-header--lower .nav-item.has-submenu > a::after { border-color: #000; }
/* プルダウン：お悩み別の項目名が長いので、幅を文字に合わせる（最小は診療案内と同じ200px） */
.sk-header--lower .sub-menu { width: auto; min-width: 200px; white-space: nowrap; }
.sk-header--lower.scroll-nav { height: auto !important; min-height: 0; }
.sk-header--lower.scroll-nav .logo img { width: 220px; margin: 0; }

@media (max-width: 1100px) {
  .sk-header--lower .nav-item { padding: 0 12px; }
  .sk-header--lower .nav-item > a { font-size: 14px; }
}
@media (max-width: 768px) {
  :root { --sk-header-h: 90px; }
  .sk-header--lower { min-height: var(--sk-header-h); }
  .sk-header--lower .header-inner { padding: 5px 15px; }
  .sk-header--lower .logo h1, .sk-header--lower .logo .h1 { font-size: 10px; margin: 0 0 6px; }
  .sk-header--lower .logo img { width: 180px; }
  .sk-header--lower #js-nav { align-items: stretch; top: var(--sk-header-h); padding-bottom: 120px; }
  .sk-header--lower .nav-item { padding: 0; border-bottom: 1px solid #eee; }
  .sk-header--lower .nav-item > a { padding: 16px 20px; font-size: 15px; }
  .sk-header--lower .sub-menu { white-space: normal; }
}

/* ---------- 2. 下層ヒーロー（写真の帯 279px ＋ 下端に重なる白い箱 1170×159） ---------- */
.sk-hero { position: relative; height: 279px; margin-bottom: 35px; background-size: cover; background-position: center; }
.sk-hero__box { position: absolute; left: 50%; bottom: -35px; transform: translateX(-50%); width: min(var(--sk-wrap), calc(100% - 30px)); height: 159px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 15px; }
.sk-hero__title { margin: 0; font-size: 32px; line-height: 1.9; color: #000; letter-spacing: 0; }
.sk-hero__en { margin: 0; font-size: 14px; line-height: 1.4; color: var(--sk-blue); letter-spacing: .02em; }

/* パンくず（本番：ホーム › 現在ページ。現在ページは水色） */
.fs-crumb__inner { max-width: var(--sk-wrap); padding: 8px 0 0; margin: 0 auto; font-size: 16px; color: var(--sk-body); }
.fs-crumb a { color: var(--sk-body); }
.fs-crumb span { color: rgba(28, 28, 28, .35); margin: 0 6px; font-size: 12px; }
.fs-crumb em { color: var(--sk-blue); }

@media (max-width: 767px) {
  .sk-hero { height: 180px; margin-bottom: 30px; }
  .sk-hero__box { height: 110px; bottom: -30px; }
  .sk-hero__title { font-size: 22px; line-height: 1.5; }
  .sk-hero__en { font-size: 12px; }
  .fs-crumb__inner { padding: 6px 15px 0; font-size: 13px; }
}

/* ---------- 3. Brizy 変換本文（clean-b） ---------- */
.fs-main { display: block; }
.fs-body { font-size: 16px; line-height: 1.9; color: var(--sk-body); }
.fs-sec { position: relative; padding: var(--fs-sec-pt, 50px) var(--fs-sec-pr, 0px) var(--fs-sec-pb, 50px) var(--fs-sec-pl, 0px); background-color: var(--fs-sec-bg, transparent); }
.fs-sec.is-img { background-image: var(--fs-sec-img); background-size: cover; background-position: center; }
.fs-sec__in { max-width: var(--fs-sec-w, var(--sk-wrap)); margin: 0 auto; padding: 0; }
/* 部品どうしの間隔（Brizy：各部品の上下 10px） */
.fs-sec__in > *, .fs-rw > *, .fs-nest > *, .fs-row > *, .fs-media__txt > *, .fs-media__img > *, .fs-grid__col > *, .fs-colw > * { margin-top: 20px; }
.fs-sec__in > :first-child, .fs-rw > :first-child, .fs-nest > :first-child, .fs-row > :first-child, .fs-media__txt > :first-child, .fs-media__img > :first-child, .fs-grid__col > :first-child, .fs-colw > :first-child { margin-top: 0; }
.is-mt { margin-top: var(--fs-mt) !important; }
.is-mb { margin-bottom: var(--fs-mb) !important; }

/* 文字（Brizy のクラスから受け取った値：--fs-fz / --fs-lh / --fs-ls / --fs-fw / --fs-ff） */
.fs-txt > p, .fs-txt > h2, .fs-txt > h3, .fs-txt > h4, .fs-txt > h5, .fs-txt > h6, .fs-txt > ul, .fs-txt > ol {
  margin: 0;
  font-size: var(--fs-fz, 16px);
  line-height: var(--fs-lh, 1.9);
  letter-spacing: var(--fs-ls, 0);
  font-weight: var(--fs-fw, 400);
  font-family: var(--fs-ff, 'Noto Serif'), 'Noto Serif JP', serif;
}
/* 見出し色は本番の文字色（span の color）をそのまま引き継ぐ。指定の無い見出しは本文色 */
.fs-txt > h2, .fs-txt > h3, .fs-txt > h4, .fs-txt > h5, .fs-txt > h6 { color: inherit; }
.fs-txt ul, .fs-txt ol { padding-left: 1.5em; }
.fs-txt ul { list-style: disc; }
.fs-txt ol { list-style: decimal; }
.fs-txt a { color: inherit; text-decoration: none; }
.fs-txt a:hover { text-decoration: underline; }
/* アイコン付き文字（Brizy の brz-icon-text）：先頭にチェック／丸印 */
.fs-txt [data-icon] { position: relative; padding-left: 44px; } /* 本番：アイコン＋間隔で44px */
.fs-txt [data-icon]::before { content: ""; position: absolute; left: 3px; top: .55em; width: 15px; height: 15px; border: 1px solid #555; border-radius: 50%; }
.fs-txt [data-icon="check"]::after { content: ""; position: absolute; left: 7px; top: calc(.55em + 4px); width: 7px; height: 4px; border-left: 1.5px solid #555; border-bottom: 1.5px solid #555; transform: rotate(-45deg); }
.fs-tc { text-align: center; }
.fs-sp { line-height: 1.9; }
.fs-mark { background: linear-gradient(transparent 55%, rgba(127, 213, 231, .45) 55%); }
.fs-nest { padding: 0; }
/* 行の上下余白（本番の 行margin＋行padding＋列padding。clean-b が --fs-rw-t / --fs-rw-b で渡す） */
.fs-rw { padding: var(--fs-rw-t, 15px) var(--fs-rw-r, 10px) var(--fs-rw-b, 15px) var(--fs-rw-l, 10px); }
/* 1列の行：列（.brz-column__items）の左右余白を中身に。地色の帯（.fs-row）は帯の内側余白として持つ */
.fs-rw--one > :not(.fs-row):not(.fs-colw) { margin-left: var(--fs-cl, 15px); margin-right: var(--fs-cr, 15px); }
.fs-rw--one > .fs-row { padding-left: var(--fs-cl, 15px); padding-right: var(--fs-cr, 15px); }
.fs-rw--one > .fs-colw { padding-left: var(--fs-cl, 15px); padding-right: var(--fs-cr, 15px); }
.fs-sec__in > .fs-rw:first-child { padding-top: max(0px, calc(var(--fs-rw-t, 15px) - 5px)); }

/* 地色付きの行（グレーの見出し帯・水色の帯／カード） */
.fs-body .fs-row { display: block; background: var(--fs-rowbg, transparent); padding: 10px 15px; } /* layout.css の .fs-row（横並び）を打ち消す */
.fs-row--bd { border: var(--fs-rowbd); }
.fs-row--nobg { background: transparent; }
.fs-row.fs-row--dark, .fs-row.fs-row--blue { color: #fff; }
.fs-row.fs-row--dark :is(h2, h3, h4, p, span), .fs-row.fs-row--blue :is(h2, h3, h4, p, span) { color: #fff !important; }

/* 画像＋文章の2列（列幅は本番の％：--fs-mw-img / --fs-mw-txt） */
.fs-media { display: flex; align-items: center; }
.fs-media__txt { flex: 0 0 var(--fs-mw-txt, 50%); max-width: var(--fs-mw-txt, 50%); padding: 0 var(--fs-cr, 15px) 0 var(--fs-cl, 15px); }
.fs-media__img { flex: 0 0 var(--fs-mw-img, 50%); max-width: var(--fs-mw-img, 50%); padding: 0 var(--fs-cr, 15px) 0 var(--fs-cl, 15px); }
.fs-media--imgleft { flex-direction: row-reverse; }

/* 多列（--fs-gc があれば本番の列幅のまま） */
.fs-body .fs-grid { display: grid; gap: 0; }
.fs-body .fs-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-body .fs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fs-body .fs-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fs-body .fs-grid.is-gc { grid-template-columns: var(--fs-gc); }
.fs-grid__col { padding: 0 var(--fs-cr, 15px) 0 var(--fs-cl, 15px); min-width: 0; }
.fs-colw { width: var(--fs-colw); }
.fs-colw--right { margin-left: auto; }
.fs-colw--center { margin-inline: auto; }

/* 画像 */
.fs-fig { margin: 0; }
.fs-fig img { display: block; width: 100%; height: auto; }
.fs-fig--box { width: var(--fs-fgw, 100%); max-width: 100%; margin-inline: auto; }

/* 区切り線（--fs-hr-w / --fs-hr-h / --fs-hr-c） */
/* 本番の線（brz-line）は上下に 7px の内側余白を持つ（Brizy 既定）。透明の枠で同じ余白を取り、線は中身の部分だけ塗る */
.fs-hr { box-sizing: content-box; border: 0; border-block: 7px solid transparent; background: var(--fs-hr-c, #ccc); background-clip: content-box; width: var(--fs-hr-w, 100%); height: var(--fs-hr-h, 1px); margin: 20px auto; }
/* 余白部品（brz-spacer）。高さは clean-b が --fs-sp で渡す（部品どうしの 20px を差し引いた値） */
.fs-spacer { height: max(0px, var(--fs-sp, 0px)); }

/* チェック項目 */
.fs-checks { margin: 0; padding: 0; list-style: none; }
.fs-checks li { position: relative; padding: 4px 0 4px 30px; }
.fs-checks li::before { content: ""; position: absolute; left: 4px; top: .85em; width: 12px; height: 7px; border-left: 2px solid var(--sk-blue); border-bottom: 2px solid var(--sk-blue); transform: rotate(-45deg); }
.fs-checks .fs-txt { display: inline; }

/* 表 */
.fs-table-wrap { overflow-x: auto; }
.fs-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.fs-table th, .fs-table td { padding: 12px 14px; border-bottom: 1px solid #c8c8c8; text-align: left; vertical-align: top; font-weight: 400; }
.fs-table thead th { background: var(--sk-gray); color: #fff; }
.fs-table--kv th { width: 32%; font-weight: 700; }

/* ボタン */
.fs-btnwrap { text-align: center; }
.fs-body .fs-btn2 { display: inline-flex; align-items: center; justify-content: center; min-width: 280px; min-height: 52px; padding: 12px 40px; border: 1px solid var(--sk-gray); background: #fff; color: var(--sk-gray); font-size: 15px; transition: .3s; }
.fs-body .fs-btn2:hover { background: var(--sk-blue); border-color: var(--sk-blue); color: #fff; }

/* 地図・動画 */
.fs-map iframe { display: block; width: 100%; height: 450px; border: 0; }
/* アイコン（Brizy の brz-icon：down＝手順の間の下向き矢印 / check / go / tri） */
.fs-icon { margin-left: auto; margin-right: auto; width: 24px; height: 24px; position: relative; }
.fs-icon[data-icon="down"]::before { content: ""; position: absolute; left: 5px; top: 2px; width: 12px; height: 12px; border-right: 4px solid #555; border-bottom: 4px solid #555; transform: rotate(45deg); }
.fs-icon[data-icon="check"]::before { content: ""; position: absolute; left: 5px; top: 4px; width: 12px; height: 7px; border-left: 3px solid var(--sk-blue); border-bottom: 3px solid var(--sk-blue); transform: rotate(-45deg); }
.fs-icon[data-icon="go"]::before, .fs-icon[data-icon="tri"]::before { content: ""; position: absolute; left: 7px; top: 5px; border: 7px solid transparent; border-left: 10px solid var(--sk-blue); }

.fs-hide-pc { display: none !important; }

/* ---------- SP（Brizy のモバイル切替 767px） ---------- */
@media (max-width: 767px) {
  .fs-sec { padding: var(--fs-sec-pt-sp, var(--fs-sec-pt, 50px)) var(--fs-sec-pr-sp, var(--fs-sec-pr, 0px)) var(--fs-sec-pb-sp, var(--fs-sec-pb, 50px)) var(--fs-sec-pl-sp, var(--fs-sec-pl, 0px)); }
  .fs-rw { padding: var(--fs-rw-t-sp, var(--fs-rw-t, 15px)) var(--fs-rw-r-sp, var(--fs-rw-r, 10px)) var(--fs-rw-b-sp, var(--fs-rw-b, 15px)) var(--fs-rw-l-sp, var(--fs-rw-l, 10px)); }
  .fs-rw--one > :not(.fs-row):not(.fs-colw) { margin-left: var(--fs-cl-sp, var(--fs-cl, 15px)); margin-right: var(--fs-cr-sp, var(--fs-cr, 15px)); }
  .fs-rw--one > .fs-row, .fs-rw--one > .fs-colw { padding-left: var(--fs-cl-sp, var(--fs-cl, 15px)); padding-right: var(--fs-cr-sp, var(--fs-cr, 15px)); }
  /* スマホの最初の行：列の上 margin に加えて最初の部品の上余白（既定10px）を足す */
  .fs-sec__in > .fs-rw:first-child { padding-top: calc(var(--fs-rw-t-sp, var(--fs-rw-t, 15px)) + 10px); }
  .fs-sec__in { padding: 0; }
  .fs-txt > p, .fs-txt > h2, .fs-txt > h3, .fs-txt > h4, .fs-txt > h5, .fs-txt > h6, .fs-txt > ul, .fs-txt > ol { font-size: var(--fs-fz-sp, var(--fs-fz, 15px)); line-height: var(--fs-lh-sp, var(--fs-lh, 1.9)); letter-spacing: var(--fs-ls-sp, var(--fs-ls, 0)); font-weight: var(--fs-fw-sp, var(--fs-fw, 400)); }
  .fs-nest { padding: 0; }
  .fs-body .fs-row { padding-top: 8px; padding-bottom: 8px; }
  /* 縦積みの順番：Brizy はHTML順（画像が左＝先）。『列を反転』（fs-sprev）の行は逆順 */
  .fs-media { flex-direction: column; gap: 20px; align-items: stretch; }
  .fs-media--imgleft { flex-direction: column-reverse; }
  .fs-media--imgleft.fs-sprev { flex-direction: column; }
  .fs-media.fs-sprev:not(.fs-media--imgleft) { flex-direction: column-reverse; }
  .fs-media__txt, .fs-media__img { max-width: none; padding: 0 var(--fs-cr-sp, var(--fs-cr, 15px)) 0 var(--fs-cl-sp, var(--fs-cl, 15px)); }
  .fs-body .fs-grid.fs-sprev { display: flex; flex-direction: column-reverse; }
  .fs-media--keep { flex-direction: row; gap: 0; }
  .fs-media--keep.fs-media--imgleft { flex-direction: row-reverse; } /* 横並びのまま画像を左に（よくある質問の Q/A アイコンなど） */
  .fs-media--keep .fs-media__txt { flex-basis: var(--fs-mw-txt-sp); max-width: var(--fs-mw-txt-sp); padding: 0 5px; }
  .fs-media--keep .fs-media__img { flex-basis: var(--fs-mw-img-sp); max-width: var(--fs-mw-img-sp); padding: 0 5px; margin: 0; }
  .fs-body .fs-grid, .fs-body .fs-grid.is-gc { grid-template-columns: 1fr; }
  .fs-body .fs-grid.fs-grid--keep, .fs-body .fs-grid.fs-grid--keep.is-gc { grid-template-columns: var(--fs-gc-sp, repeat(2, minmax(0, 1fr))); }
  .fs-grid__col { padding: 0 var(--fs-cr-sp, var(--fs-cr, 15px)) 0 var(--fs-cl-sp, var(--fs-cl, 15px)); }
  .fs-grid__col + .fs-grid__col { margin-top: 20px; }
  .fs-body .fs-grid--keep .fs-grid__col + .fs-grid__col { margin-top: 0; }
  .fs-colw { width: 100%; }
  .fs-fig--box { width: var(--fs-fgw-sp, var(--fs-fgw, 100%)); }
  .fs-hr { width: var(--fs-hr-w-sp, var(--fs-hr-w, 100%)); }
  .fs-spacer { height: max(0px, var(--fs-sp-sp, var(--fs-sp, 0px))); }
  .fs-table--kv th, .fs-table--kv td { display: block; width: 100%; }
  .fs-table--kv th { border-bottom: 0; padding-bottom: 2px; }
  .fs-map iframe { height: 300px; }
  .fs-hide-pc { display: revert !important; }
  .fs-hide-sp { display: none !important; }
}

/* ---------- 部品の左右マージン（Brizy の部品ラッパ .brz-wrapper の margin/padding。clean-b が --fs-ml / --fs-mr で渡す） ---------- */
.is-ml { margin-left: var(--fs-ml, 0px) !important; }
.is-mr { margin-right: var(--fs-mr, 0px) !important; }
.fs-rw--one > .is-ml { margin-left: calc(var(--fs-cl, 15px) + var(--fs-ml, 0px)) !important; }
.fs-rw--one > .is-mr { margin-right: calc(var(--fs-cr, 15px) + var(--fs-mr, 0px)) !important; }
@media (max-width: 767px) {
  .is-ml { margin-left: var(--fs-ml-sp, var(--fs-ml, 0px)) !important; }
  .is-mr { margin-right: var(--fs-mr-sp, var(--fs-mr, 0px)) !important; }
  .fs-rw--one > .is-ml { margin-left: calc(var(--fs-cl-sp, var(--fs-cl, 15px)) + var(--fs-ml-sp, var(--fs-ml, 0px))) !important; }
  .fs-rw--one > .is-mr { margin-right: calc(var(--fs-cr-sp, var(--fs-cr, 15px)) + var(--fs-mr-sp, var(--fs-mr, 0px))) !important; }
}
.fs-tr { text-align: right; }
/* スマホだけ揃えが違う見出し・段落（Brizy の brz-text-xs-*） */
@media (max-width: 767px) {
  .fs-tl-sp { text-align: left !important; }
  .fs-tc-sp { text-align: center !important; }
  .fs-tr-sp { text-align: right !important; }
}
/* 下層ヘッダー：項目名を折り返さない（狭い PC 幅では余白と文字を詰める） */
@media (min-width: 769px) {
  .sk-header--lower .nav-item > a { white-space: nowrap; }
}
@media (min-width: 769px) and (max-width: 960px) {
  .sk-header--lower .nav-item { padding: 0 6px; }
  .sk-header--lower .nav-item > a { font-size: 13px; }
  .sk-header--lower .logo img { width: 210px; }
}

/* ---------- 表（項目名｜内容）：列幅・余白を本番どおりに（clean-b が --fs-kvw と th/td の --fs-cl / --fs-cr を渡す） ---------- */
.fs-table--kv.is-kvw th { width: var(--fs-kvw); }
.fs-table--kv th.is-cpad, .fs-table--kv td.is-cpad { padding-left: var(--fs-cl, 14px); padding-right: var(--fs-cr, 14px); }
/* 区切り線（.fs-hr）と1行ずつ組み合わせた表（医院概要・経歴・募集要項）：線は区切り線の1本だけ。表の罫線・上下余白は付けない */
.fs-table-wrap:has(+ .fs-hr) .fs-table th, .fs-table-wrap:has(+ .fs-hr) .fs-table td { border-bottom: 0; padding-top: 0; padding-bottom: 0; }
.fs-table-wrap:has(+ .fs-hr) .fs-table td { font-size: 16px; }
@media (max-width: 767px) {
  .fs-table--kv th.is-cpad, .fs-table--kv td.is-cpad { padding-left: var(--fs-cl-sp, var(--fs-cl, 0px)); padding-right: var(--fs-cr-sp, var(--fs-cr, 0px)); }
  .fs-table-wrap:has(+ .fs-hr) .fs-table td { font-size: 15px; padding-top: 4px; }
}
/* 1列の行の区切り線：列の左右余白の内側に収める（幅100%指定でも右へ突き抜けない） */
.fs-rw--one > .fs-hr { max-width: calc(100% - var(--fs-cl, 15px) - var(--fs-cr, 15px)); }
/* 表＋区切り線の縦の間隔（本番実測：文字の下 8px に線、線の下 32px に次の行） */
.fs-table-wrap + .fs-hr { margin-top: 1px; margin-bottom: 0; } /* 線の上の透明枠 7px と合わせて 8px */
.fs-hr + .fs-table-wrap { margin-top: 25px; } /* 線の下の透明枠 7px と合わせて 32px */
@media (max-width: 767px) {
  .fs-rw--one > .fs-hr { max-width: calc(100% - var(--fs-cl-sp, var(--fs-cl, 0px)) - var(--fs-cr-sp, var(--fs-cr, 0px))); }
  .fs-table-wrap:has(+ .fs-hr) .fs-table td { padding-top: 5px; }
  .fs-table-wrap + .fs-hr { margin-top: 5px; }
  .fs-hr + .fs-table-wrap { margin-top: 20px; }
}
@media (max-width: 767px) {
  .fs-table-wrap:has(+ .fs-hr) .fs-table th { line-height: 1.9; }
  .fs-table-wrap:has(+ .fs-hr) .fs-table td { line-height: 1.6; }
}

/* ---------- 部品どうしの間隔（Brizy：前の部品の下余白＋次の部品の上余白。既定20pxと違うところだけ clean-b が --fs-g / --fs-g-sp で渡す） ---------- */
.is-g { margin-top: var(--fs-g) !important; }
@media (max-width: 767px) {
  .is-g, .is-gsp { margin-top: var(--fs-g-sp, var(--fs-g, 20px)) !important; }
  /* スマホのコンテナ幅（Brizy のセクションごとの指定。例 94%） */
  .fs-sec.is-wsp > .fs-sec__in { max-width: var(--fs-sec-w-sp, 100%); }
}
@media (max-width: 767px) {
  /* 地色の帯（列の背景色）：帯の内側に部品の上下余白（10px）が入る。帯で始まる／終わる行は外側の余白を二重に足さない */
  .fs-body .fs-rw > .fs-row { padding-top: 10px; padding-bottom: 10px; }
  .fs-sec__in > .fs-rw:first-child:has(> .fs-row:first-child) { padding-top: var(--fs-rw-t-sp, var(--fs-rw-t, 15px)); }
  .fs-rw:has(> .fs-row:last-child) + * { margin-top: 10px; }
}
.fs-body .fs-hr--bar { border-block: 0; } /* 見出し横の縦棒：横線の上下余白は付けない */
.fs-body .fs-hr { margin-bottom: 0; } /* 線の下の間隔は次の部品の上マージン（20px／--fs-g）で取る。列の最後の線で列が伸びないように */


/* #############################################################
   3. コラム（ブログ）：一覧（/blog-3/・カテゴリー一覧）と記事
      本番（旧テーマのブログ表示）の寸法を実測して作り直したもの。
      マークアップは inc/blog.php ・ home.php / category.php / single.php ・ template-parts/blog/
   ############################################################# */
:root {
  --sk-blog-cat: #20c6e8;   /* カテゴリーのラベル */
  --sk-blog-line: #ddd;     /* カード・サイドバーの枠線 */
  --sk-blog-date: #999;     /* 日付 */
  --sk-blog-gray: #6b6b6b;  /* 英字の箱・パンくず・見出しの棒 */
  --sk-mincho: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, serif;
  --sk-gothic: Arial, "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
}

/* ---------- 一覧の見出し写真（幅1200×高さ400。左上に英字の箱） ---------- */
.sk-bhead { position: relative; max-width: 1200px; height: 400px; margin: 0 auto; background: url("../img/hero/blog.webp") center / cover no-repeat; display: flex; align-items: center; justify-content: center; }
.sk-bhead__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .3); }
.sk-bhead__en { position: absolute; top: 0; left: 0; z-index: 2; width: 150px; height: 150px; margin: 0; display: flex; align-items: center; justify-content: center; background: var(--sk-blog-gray); color: #fff; font-family: var(--sk-gothic); font-size: 16px; font-weight: 500; line-height: 1; white-space: nowrap; }
.sk-bhead__title { position: relative; z-index: 2; margin: 0; color: #fff; font-family: var(--sk-mincho); font-size: 28px; line-height: 1.5; font-weight: 500; text-align: center; }

/* ---------- パンくず（ホームはアイコン） ---------- */
.sk-bcrumb { max-width: 1200px; margin: 0 auto; }
.sk-bcrumb:has(+ .sk-blog--single) { max-width: 1000px; margin-bottom: 50px; }
.sk-bcrumb__list { display: flex; align-items: center; height: 70px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; color: var(--sk-blog-gray); white-space: nowrap; overflow: hidden; }
.sk-bcrumb__item { display: flex; align-items: center; flex: 0 0 auto; }
.sk-bcrumb__item + .sk-bcrumb__item::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin: 0 14px 0 10px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.sk-bcrumb__item a { color: inherit; }
.sk-bcrumb__item a:hover { color: #000; }
.sk-bcrumb__item--home i { font-size: 14px; color: #222; }
/* 現在ページ（記事タイトル）は長いので、入りきらない分を「…」で省略 */
.sk-bcrumb__item--current { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sk-bcrumb__item--current::before { display: inline-block; vertical-align: middle; }

/* ---------- 一覧 ---------- */
.sk-blog--archive { max-width: 1000px; margin: 0 auto; padding: 120px 0 150px; }

/* ---------- 記事カード（一覧：写真210px／関連記事：写真148px） ---------- */
.sk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); --sk-card-img: 210px; }
.sk-card { position: relative; }
.sk-card__link { display: block; color: #000; }
.sk-card__img { height: var(--sk-card-img); overflow: hidden; background: #f2f2f2; }
.sk-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .75s ease; }
.sk-card__link:hover .sk-card__img img { transform: scale(1.1); }
.sk-card__body { position: relative; box-sizing: border-box; height: 159px; padding: 25px 30px; background: #fff; border-left: 1px solid var(--sk-blog-line); border-bottom: 1px solid var(--sk-blog-line); }
.sk-card:nth-child(3n) .sk-card__body, .sk-card:last-child .sk-card__body { border-right: 1px solid var(--sk-blog-line); }
.sk-card__title { margin: 0; font-family: 'Noto Serif', 'Noto Serif JP', serif; font-size: 16px; line-height: 1.6; font-weight: 500; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.sk-card__link:hover .sk-card__title { text-decoration: underline; }
.sk-card__date { position: absolute; left: 30px; bottom: 30px; margin: 0; font-size: 14px; line-height: 1; color: var(--sk-blog-date); }
.sk-card__cat { position: absolute; left: 30px; top: calc(var(--sk-card-img) - 35px); z-index: 2; margin: 0; }
.sk-card__cat a { display: block; min-width: 110px; height: 35px; padding: 0 20px; box-sizing: border-box; background: var(--sk-blog-cat); color: #fff; font-size: 12px; line-height: 35px; text-align: center; }
/* 関連記事のカード（3列：233px幅） */
.sk-cards--related { --sk-card-img: 148px; }
.sk-cards--related .sk-card__body { height: 121px; padding: 17px 30px; }
.sk-cards--related .sk-card__title { font-size: 14px; }
.sk-cards--related .sk-card__date { bottom: 19px; font-size: 12px; }
.sk-cards--related .sk-card__cat { top: calc(var(--sk-card-img) - 30px); }
.sk-cards--related .sk-card__cat a { min-width: 90px; height: 30px; font-size: 10px; line-height: 30px; }

/* ---------- 記事（本文700px＋サイドバー250px） ---------- */
.sk-blog--single { max-width: 1000px; margin: 0 auto 150px; display: flex; justify-content: space-between; align-items: flex-start; }
.sk-post { width: 700px; min-width: 0; }
.sk-post__head { position: relative; margin-bottom: 38px; }
.sk-post__img { height: 440px; margin-bottom: 47px; overflow: hidden; background: #f2f2f2; }
.sk-post__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sk-post__cat { position: absolute; left: 0; top: 405px; z-index: 2; margin: 0; }
.sk-post__cat a { display: block; min-width: 110px; height: 35px; padding: 0 20px; box-sizing: border-box; background: var(--sk-blog-cat); color: #fff; font-size: 12px; line-height: 35px; text-align: center; }
.sk-post__title { margin: 0; font-family: var(--sk-gothic); font-size: 26px; line-height: 1.3; font-weight: 500; color: #000; }
.sk-post__date { margin: 9px 0 0; font-size: 14px; line-height: 1.5; color: var(--sk-blog-date); }

/* 本文（WordPress のエディタの中身） */
.sk-post__content { font-family: var(--sk-mincho); font-size: 16px; color: #000; }
.sk-post__content p { margin: 0 0 32px; font-family: 'Noto Serif', 'Noto Serif JP', serif; font-size: 16px; line-height: 2.2; color: #000; }
.sk-post__content img { max-width: 100%; height: auto; }
.sk-post__content .wp-block-image { margin: 0; text-align: center; }
.sk-post__content .wp-block-image img { display: inline-block; vertical-align: top; }
.sk-post__content ul, .sk-post__content ol { margin: 0 0 24px 24px; padding: 0; }
.sk-post__content li { line-height: 2.4; }
/* ボタン（エディタの「ボタン」ブロック。背景色はエディタで指定した色） */
.sk-post__content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .5em; margin: 0; }
.sk-post__content .wp-block-button__link { display: inline-block; padding: .792em 1.458em; border-radius: 9999px; background: #32373c; color: #fff; font-size: inherit; line-height: 1; text-align: center; text-decoration: none; }
.sk-post__content .wp-block-button__link:hover { opacity: .8; }
.sk-post__content .has-white-color { color: #fff !important; }
.sk-post__content ul { list-style: disc; }
.sk-post__content ol { list-style: decimal; }
/* 見出し（本番の管理画面「追加CSS」の「記事内 H2 / H3 デザイン」を移植。エディタで文字色を付けていても上書き） */
.sk-post__content h2.wp-block-heading, .sk-post__content h3.wp-block-heading { color: #1f2a37 !important; font-family: var(--sk-mincho); font-weight: 700; line-height: 1.35; letter-spacing: .02em; }
.sk-post__content h2.wp-block-heading { position: relative; margin: 2.2em 0 1em; padding: .9em 1em .9em 1.1em; background: #f1fbff; border: 1px solid #d9eef6; border-left: 7px solid #4fc3e6; border-radius: 12px; font-size: clamp(20px, 2.2vw, 26px); }
.sk-post__content h2.wp-block-heading::before { content: ""; position: absolute; left: -7px; top: 14px; width: 7px; height: calc(100% - 28px); background: linear-gradient(180deg, #4fc3e6, rgba(42, 167, 160, .35)); border-radius: 10px; }
.sk-post__content h3.wp-block-heading { position: relative; margin: 1.6em 0 .7em; padding: .2em 0 .55em 1.05em; border-bottom: 2px solid #d9eef6; font-size: clamp(18px, 1.9vw, 22px); }
.sk-post__content h3.wp-block-heading::before { content: ""; position: absolute; left: 0; top: .45em; width: .55em; height: .55em; background: #4fc3e6; border-radius: 999px; }
.sk-post__content h3.wp-block-heading::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 72px; height: 2px; background: #4fc3e6; }
.sk-post__content h2.wp-block-heading a, .sk-post__content h3.wp-block-heading a { color: inherit; text-decoration: none; }
.sk-post__content h2.wp-block-heading a:hover, .sk-post__content h3.wp-block-heading a:hover { text-decoration: underline; }

/* 監修医情報（本番の旧テーマに追記されていたCSSを移植） */
.sprvs-info { width: 100%; margin: 40px auto; padding: 20px; box-sizing: border-box; border: 1px solid #e6e6e6; border-radius: 12px; background: #fff; font-family: 'Noto Serif', serif; }
.sprvs-info__dl { margin: 0; }
.sprvs-info__title { font-weight: 400; font-size: 150%; line-height: 1; padding-bottom: 12px; margin-bottom: 14px; color: #000; border-bottom: 1px solid #eaeaea; }
.sprvs-info__body { margin: 0; display: grid; grid-template-columns: 160px 1fr; gap: 16px 20px; grid-template-areas: "photo heading" "meta meta"; align-items: start; }
.sprvs-info__heading { grid-area: heading; margin: 0; align-self: center; }
.sprvs-info__clinic { margin: 0 0 6px; font-size: 100%; line-height: 1; color: #555; }
.sprvs-info__grid { display: contents; }
.sprvs-info__photo { grid-area: photo; width: 160px; margin: 0; }
.sprvs-info__photo img { width: 100%; height: auto; display: block; border-radius: 10px; }
.sprvs-info__meta { grid-area: meta; min-width: 0; }
.sprvs-info__block { margin-bottom: 14px; }
.sprvs-info__block-title { margin: 0 0 8px; padding-left: 10px; font-weight: 600; font-size: 110%; line-height: 1.4; color: #444; border-left: 4px solid #111; }
.sprvs-info__table { width: 100%; border-collapse: collapse; border: 1px solid #eee; border-radius: 10px; overflow: hidden; }
.sprvs-info__table td { padding: 10px 12px; border-top: 1px solid #eee; vertical-align: top; font-size: 90%; font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", 游ゴシック, "Yu Gothic", Meiryo, sans-serif; line-height: 1.6; text-align: left; }
.sprvs-info__table tr:first-child td { border-top: none; }
.sprvs-info__year { width: 92px; white-space: nowrap; color: #666; background: #fafafa; }
.sprvs-info__desc { color: #333; }

/* 前後の記事（枠 350×120。PC はタイトル、スマホは「次の記事」の文字） */
.sk-pn { display: flex; justify-content: space-between; margin-top: 50px; }
.sk-pn__item { position: relative; box-sizing: border-box; width: 350px; height: 120px; display: flex; align-items: center; padding: 0 57px 0 30px; background: #fff; border: 1px solid var(--sk-blog-line); color: #000; }
.sk-pn__item--next { margin-left: auto; }
.sk-pn__item--prev { padding: 0 30px 0 57px; }
.sk-pn__item::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-top: 1px solid #000; border-right: 1px solid #000; }
.sk-pn__item--next::after { right: 30px; transform: rotate(45deg); }
.sk-pn__item--prev::after { left: 30px; transform: rotate(-135deg); }
.sk-pn__label { display: none; }
.sk-pn__title { font-family: 'Noto Serif', 'Noto Serif JP', serif; font-size: 16px; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.sk-pn__item:hover .sk-pn__title { text-decoration: underline; }

/* 関連記事 */
.sk-related { margin-top: 100px; }
.sk-related__ttl { position: relative; display: table; margin: 0 auto 48px; padding-top: 25px; font-family: var(--sk-mincho); font-size: 18px; line-height: 1; font-weight: 500; color: #000; }
.sk-related__ttl::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--sk-blog-gray); }

/* サイドバー（最近の記事・カテゴリー・アーカイブ） */
.sk-side { width: 250px; flex: 0 0 250px; }
.sk-side__widget { margin-bottom: 50px; }
.sk-side__ttl { position: relative; display: inline-block; margin: 0 0 20px; padding-top: 20px; font-family: var(--sk-mincho); font-size: 16px; line-height: 1; font-weight: 500; color: #000; }
.sk-side__ttl::before { content: ""; position: absolute; top: 0; left: 0; width: 80px; height: 3px; background: var(--sk-blog-gray); }
.sk-side-recent { margin: 0; padding: 0; list-style: none; }
.sk-side-recent__link { display: flex; height: 100px; color: #000; }
.sk-side-recent__img { flex: 0 0 100px; height: 100px; overflow: hidden; background: #f2f2f2; }
.sk-side-recent__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .75s ease; }
.sk-side-recent__link:hover img { transform: scale(1.1); }
.sk-side-recent__body { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 6px 18px 0; border: 1px solid var(--sk-blog-line); border-left: 0; background: #fff; }
.sk-side-recent__item + .sk-side-recent__item .sk-side-recent__body { border-top: 0; }
.sk-side-recent__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 14px; line-height: 1.6; font-weight: 500; }
.sk-side-recent__link:hover .sk-side-recent__title { text-decoration: underline; }
.sk-side-recent__date { display: block; font-size: 12px; line-height: 24px; color: var(--sk-blog-date); }
/* 開閉する箱（カテゴリーの子・アーカイブの月）。HTML の details/summary で開閉（JS なし） */
.sk-drop { margin: 0 0 -1px; background: #fff; border: 1px solid var(--sk-blog-line); }
.sk-drop__head { position: relative; display: block; height: 48px; padding: 0 44px 0 24px; font-size: 14px; line-height: 48px; color: #000; cursor: pointer; list-style: none; }
.sk-drop__head::-webkit-details-marker { display: none; }
.sk-drop__head a { color: inherit; }
details.sk-drop > .sk-drop__head::after { content: ""; position: absolute; right: 24px; top: 50%; width: 8px; height: 8px; margin-top: -7px; border-right: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(45deg); transition: transform .2s; }
details.sk-drop[open] > .sk-drop__head::after { margin-top: -2px; transform: rotate(-135deg); }
.sk-drop__list { margin: 0; padding: 0 0 10px; list-style: none; border-top: 1px solid var(--sk-blog-line); }
.sk-drop__list a { display: block; padding: 10px 24px; font-size: 14px; line-height: 1.6; color: #000; }
.sk-drop__list a:hover { background: #f6f6f6; }
.sk-side__widget:last-child .sk-drop__head { padding-left: 18px; }

/* ---------- スマホ ---------- */
@media (max-width: 767px) {
  .sk-bhead { height: 200px; }
  .sk-bhead__en { width: 80px; height: 80px; font-size: 14px; }
  .sk-bhead__title { font-size: 24px; }
  .sk-bcrumb, .sk-bcrumb:has(+ .sk-blog--single) { margin: 0; padding: 1px 20px 0; border-bottom: 1px solid var(--sk-blog-line); }
  .sk-bcrumb__list { height: 45px; }
  .sk-blog--archive { padding: 0 0 40px; overflow: hidden; }
  .sk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 -1px; --sk-card-img: 115px; }
  .sk-card:nth-child(3n) .sk-card__body { border-right: 0; }
  .sk-card:nth-child(2n) .sk-card__body, .sk-card:last-child .sk-card__body { border-right: 1px solid var(--sk-blog-line); }
  .sk-card__body { height: 121px; padding: 16px 20px; }
  .sk-card__title { font-size: 14px; }
  .sk-card__date { left: 20px; bottom: 20px; font-size: 12px; }
  .sk-card__cat { left: 20px; top: calc(var(--sk-card-img) - 30px); }
  .sk-card__cat a { min-width: 90px; height: 30px; padding: 0 15px; line-height: 30px; }
  .sk-cards--related { --sk-card-img: 114px; margin: 0 -20px; }
  .sk-cards--related .sk-card__body { height: 122px; padding: 17px 20px; }
  .sk-cards--related .sk-card__date, .sk-cards--related .sk-card__cat { left: 20px; }

  .sk-blog--single { display: block; margin: 0; padding: 0 20px 40px; }
  .sk-post { width: auto; }
  .sk-post__head { margin: 0 -20px 20px; }
  .sk-post__img { height: auto; aspect-ratio: 390 / 226; margin-bottom: 25px; }
  .sk-post__imgwrap { position: relative; }
  .sk-post__cat { top: calc(100vw * 226 / 390 - 30px); }
  .sk-post__cat a { min-width: 90px; height: 30px; line-height: 30px; }
  .sk-post__title { padding: 0 20px; font-size: 18px; }
  .sk-post__date { margin-top: 4px; padding: 0 20px; }
  .sk-post__content { font-size: 14px; }
  .sk-post__content p { font-size: 14px; line-height: 1.8; margin-bottom: 28px; }
  .sk-post__content ol, .sk-post__content ul { margin-left: 21px; }
  .sk-post__content li { line-height: 1.8; }
  .sk-post__content h2.wp-block-heading { margin: 20px 0; padding: .85em .9em .85em 1em; border-radius: 10px; }
  .sk-post__content h3.wp-block-heading { margin: 20px 0 12.6px; }
  .sk-post__content h3.wp-block-heading::after { width: 56px; }
  .sprvs-info { padding: 16px; width: auto; }
  .sprvs-info__body { grid-template-columns: 1fr; grid-template-areas: "heading" "photo" "meta"; }
  .sprvs-info__photo { width: auto; } /* 本番どおり写真を枠いっぱいに大きく */
  .sk-pn { margin-top: 30px; }
  .sk-pn__item { width: 50%; height: 50px; padding: 0; justify-content: center; }
  .sk-pn__item--prev { padding: 0; }
  .sk-pn__label { display: block; font-size: 14px; line-height: 50px; }
  .sk-pn__title { display: none; }
  .sk-pn__item--next::after { right: 15px; }
  .sk-pn__item--prev::after { left: 15px; }
  .sk-related { margin-top: 40px; }
  .sk-related__ttl { margin-bottom: 40px; padding-top: 15px; font-size: 15px; }
  .sk-side { width: auto; margin-top: 40px; }
  .sk-side__ttl { display: table; margin: 0 auto 35px; padding-top: 17px; }
}

/* #############################################################
   4. 下層のスマホメニュー（本番の下層と同じ：左から出るグレーのパネル）
      TOP のハンバーガーメニュー（右から出る白いメニュー）はそのまま。開閉は top.js
   ############################################################# */
@media (max-width: 768px) {
  .sk-header--lower #js-nav { top: 0; right: auto; left: -320px; z-index: 3; width: 312px; max-width: 80%; height: 100%; padding: 0 0 120px; background: #6b6b6b; transition: left .3s ease; font-family: 'Noto Serif', serif; }
  .sk-header--lower #js-nav.active { left: 0; }
  .sk-header--lower #js-nav::before { content: "Main Menu"; display: block; flex: 0 0 auto; height: 44px; line-height: 20px; padding: 12px 0; box-sizing: border-box; text-align: center; color: #fff; font-size: 13px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
  .sk-header--lower .nav-list { width: 100%; }
  .sk-header--lower .nav-item { position: relative; border-bottom: 1px solid rgba(255, 255, 255, .15); }
  .sk-header--lower .nav-item > a { display: block; padding: 10px 20px; font-size: 15px; line-height: 24px; color: #fff; }
  .sk-header--lower .nav-item.underLine > a::after { display: none; }
  /* 子メニューのある項目：右端の矢印（開くと下向き） */
  .sk-header--lower .nav-item.has-submenu > a { padding-right: 50px; }
  .sk-header--lower .nav-item.has-submenu > a::after { position: absolute; right: 28px; top: 19px; margin: 0; width: 7px; height: 7px; border-color: #fff; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .2s; }
  .sk-header--lower .nav-item.open > a::after { transform: rotate(45deg); top: 16px; }
  .sk-header--lower .sub-menu { background: transparent; padding: 0 0 0 10px; }
  .sk-header--lower .sub-menu li { border-top: 1px solid rgba(255, 255, 255, .15); }
  .sk-header--lower .sub-menu li a { display: block; text-align: left; padding: 10px 20px; border-bottom: 0; font-size: 15px; line-height: 24px; color: #fff; }
  /* 開いている間の暗幕（タップで閉じる。top.js が .sk-nav-overlay を追加） */
  .sk-nav-overlay { position: fixed; inset: 0; z-index: 2; background: rgba(0, 0, 0, .3); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .sk-nav-overlay.active { opacity: 1; visibility: visible; }
  .sk-header--lower .hamburger { z-index: 4; }
}

/* 虫歯治療・銀歯を白くしたい：アイコン付き見出し（縦棒｜見出し｜イラスト）の3列。
   スマホの列幅指定が 5%＋100%＋41% で画面からはみ出し、ページ全体が横に広がってヘッダーの三本線が画面外に出ていた。
   本番（Brizy）は列が縮んで収まる → 真ん中の列を「残りの幅」にして同じ比率にする */
@media (max-width: 767px) {
  .fs-body .fs-grid.fs-grid--keep.sk-grid-6 { --fs-gc-sp: 5% minmax(0, 1fr) 41%; }
}