/* 森本歯科クリニック トップページ — スタイル（外部読み込み） */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
/* スマホ専用の改行（既定は非表示） */
[data-r~="spbr"] { display: none; }

/* ===== キーフレーム ===== */
@keyframes floatA { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(2deg); } }
@keyframes floatB { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(12px) rotate(-3deg); } }
@keyframes bobble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes blobMorph { 0%, 100% { border-radius: 46% 54% 52% 48% / 44% 48% 52% 56%; } 33% { border-radius: 54% 46% 44% 56% / 52% 44% 56% 48%; } 66% { border-radius: 44% 56% 58% 42% / 50% 56% 44% 50%; } }
@keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .5; } }

/* ===== レスポンシブ ===== */
/* ヘッダー：横メニューが収まらなくなる手前でハンバーガーへ切替 */
@media (max-width: 1080px) {
  [data-r~="hide"] { display: none !important; }
  [data-r~="drawer-btn"] { display: flex !important; }
  #top-header { position: sticky !important; top: 0 !important; z-index: 50 !important; box-shadow: 0 4px 16px rgba(122,90,60,.08); }
  #top-header > div { padding-top: 12px !important; padding-bottom: 12px !important; }
}
@media (max-width: 960px) {
  [data-r-root] > section, [data-r-root] > footer { padding-left: 18px !important; padding-right: 18px !important; }
  [data-r~="secpad"] { padding-top: 60px !important; padding-bottom: 60px !important; }
  [data-r~="grid"] { grid-template-columns: 1fr !important; gap: 30px !important; }
  [data-r~="grid-dir"] { grid-template-columns: 1fr !important; gap: 30px !important; }
  [data-r~="grid-dir"] > div:first-child { width: 100%; max-width: 360px; margin: 0 auto; }
  [data-r~="grid3"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-r~="grid4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-r~="pad"] { padding: 30px 24px !important; }
  [data-r~="flexcol"] { flex-direction: column !important; align-items: stretch !important; }
  [data-r~="stack"] { flex-direction: column !important; align-items: flex-start !important; }
  #info { margin-top: 24px !important; }
  /* キッズクラブ：スマホでは写真を本文の下へ（gridのまま並べ替え） */
  #card-kids > div:nth-child(1) { order: 2; }
  #card-kids > div:nth-child(2) { order: 1; }
  /* キッズクラブ・保育スタッフ：スマホで写真比率を4:3に固定し重なりを維持 */
  #kids-photos img, #staff-photos img { height: auto !important; aspect-ratio: 4 / 3; }
  #kids-photos, #staff-photos { min-height: 0 !important; aspect-ratio: 3 / 2; }
  /* 注目診療②：スマホで①③と同じく画像を上・本文を下に */
  #pickup-2 > div:nth-child(1) { order: 2 !important; }
  #pickup-2 > div:nth-child(2) { order: 1 !important; }
  /* 院長紹介：スマホでは「見出し → 院長写真・氏名 → 本文」の順に */
  #greeting-grid { grid-template-columns: 1fr !important; grid-template-areas: 'heading' 'photo' 'body' !important; row-gap: 26px !important; }
  /* 注目診療：スマホでは各見出しと見出し下の画像を中央寄せ（本文は左寄せのまま） */
  [data-pk-text] { text-align: center !important; }
  [data-pk-text] [data-r~="stack"] { align-items: center !important; }
  [data-pk-text] p { text-align: left !important; }
}
/* ヒーロー：768px以下でスマホレイアウト（見出し→本文→画像→ボタン） */
@media (max-width: 768px) {
  #hero-grid { grid-template-columns: 1fr !important; column-gap: 0 !important; row-gap: 20px !important; grid-template-areas: 'tags' 'head' 'image' 'btns' !important; }
  #hero-grid h1 { margin-top: 0 !important; }
  #hero-image { margin: 14px auto !important; }
  #hero-badge { left: auto !important; right: 8px !important; top: -14px !important; }
  #hero-cta { margin-top: 0 !important; }
  [data-r~="deskbr"] { display: none !important; }
  [data-r~="spbr"] { display: inline !important; }
}
@media (max-width: 620px) {
  [data-r~="grid3"], [data-r~="grid4"] { grid-template-columns: 1fr !important; }
  [data-r~="herosec"] { padding-top: 12px !important; padding-bottom: 52px !important; }
  #top-header img { height: 54px !important; }
}
/* スマホ：親子セクションのカード余白を詰めて幅を広く使う */
@media (max-width: 600px) {
  #family-inner { padding-left: 14px !important; padding-right: 14px !important; }
  #family [data-r~="pad"] { padding: 28px 18px !important; }
}
/* スマホ：ヒーローの見出し以外を少し小さく＋ボタン横並び維持 */
@media (max-width: 480px) {
  [data-r~="herotags"] { flex-wrap: nowrap !important; gap: 6px !important; }
  [data-r~="herotags"] span { font-size: 10.5px !important; padding: 4px 9px !important; }
  #hero-grid { padding-left: 0 !important; padding-right: 0 !important; }
  #top h1 { font-size: 26px !important; }
  #top p { font-size: 14.5px !important; }
  #top-header img { height: 48px !important; }
  #hero-cta { gap: 10px !important; flex-wrap: nowrap !important; }
  #hero-cta a { padding: 13px 16px !important; font-size: 14px !important; white-space: nowrap; }
}
/* スマホ：下部固定CTAバー */
@media (max-width: 820px) {
  #mobile-cta { display: flex !important; }
  [data-r-root] { padding-bottom: 74px; }
}
/* スマホ：親子セクションの白い雲を見出しに重ねない（上端の装飾とも重ならない位置へ） */
/* スマホ：親子セクション見出し上のふわふわ雲の装飾は非表示 */
@media (max-width: 700px) {
  #cloud-l, #cloud-r { display: none !important; }
}
/* コラム・SNS：狭い幅でも各カラム（コラム / 医院の日常）が画面外にはみ出さないように */
#column [data-r~="grid"] > div { min-width: 0; }

/* 院内・設備：画像右レイアウトをスマホで「画像→本文」の順に並べ替え */
@media (max-width: 960px) {
  [data-r~="order1"] { order: 1 !important; }
  [data-r~="order2"] { order: 2 !important; }
}

/* サブページ ヒーロー（ページ名→画像→パンくず） */
@media (max-width: 768px) {
  [data-r~="phero-text"] { text-align: center; }
  [data-r~="phero-word"] { font-size: clamp(44px, 15vw, 72px) !important; bottom: -32px !important; right: 20px !important; }
  [data-r~="phero-img"] { width: calc(100% - 32px) !important; margin: 0 16px !important; border-radius: 20px !important; overflow: hidden !important; }
}

/* トップ ヒーロー：スマホで2枚目メイン画像を右寄りに */
@media (max-width: 768px) {
  #fv-main-2 img {
    object-position: 70% center !important;
  }
}

/* 共通フッター：スマホで電話番号カードを中央寄せ */
@media (max-width: 768px) {
  [data-r~="flexcol"] > div:first-child {
    text-align: center !important;
  }
}

/* 採用情報：スマホでも3枚写真の比率を4:3に固定 */
@media (max-width: 768px) {
  #recruit-photo-1,
  #recruit-photo-2,
  #recruit-photo-3 {
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
}

/* LINE歯科相談：スマホでQRコードが切れないよう修正 */
@media (max-width: 768px) {
  #line-qr {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* LINE歯科相談：スマホで2カラムグリッドを縦積みに */
@media (max-width: 768px) {
  [data-r~="grid2"] {
    grid-template-columns: 1fr !important;
  }
  [data-r~="grid2"] image-slot {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
}

/* 画像スロットがグリッド/フレックスの既定の最小幅（intrinsic 240px）で画面外にはみ出すのを防ぐ */
[data-r-root] image-slot { min-width: 0; }
[data-r~="order1"], [data-r~="order2"] { min-width: 0; }

/* フッターDC：セクション左右パディングをスマホで縮小（直接子でないため個別指定） */
@media (max-width: 960px) {
  #access { padding-left: 18px !important; padding-right: 18px !important; }
  #cta { padding-left: 18px !important; padding-right: 18px !important; }
  footer[data-screen-label] { padding-left: 18px !important; padding-right: 18px !important; }
}
/* アクセスグリッドをスマホで1列化し、テーブルのはみ出しを防ぐ */
@media (max-width: 768px) {
  #access [data-r~="grid"] { grid-template-columns: 1fr !important; }
  #access [data-r~="grid"] > div { min-width: 0; }
}

/* フッターDC：CTAの電話番号カードをスマホで調整 */
@media (max-width: 500px) {
  [data-r~="cta-tel"] { font-size: 24px !important; }
  [data-r~="cta-tel-card"] { padding-left: 18px !important; padding-right: 18px !important; }
}
/* 採用情報：募集要項カードをスマホで調整（縦積みグリッド・余白縮小） */
@media (max-width: 700px) {
  #job-details { padding-left: 20px !important; padding-right: 20px !important; }
  #job-details [data-r~="row"] { grid-template-columns: 1fr !important; gap: 4px !important; }
  #job-details [data-r~="rowlabel"] { padding-bottom: 2px !important; }
}

/* 院内・設備：スマホ表示では全画像を4:3に固定 */
@media (max-width: 960px) {
  #facility-wait-1,
  #facility-room-1,
  #facility-kids-1,
  #equip-hygiene-1,
  #equip-diag-1,
  #facility-toilet,
  #facility-barrier,
  #facility-counsel,
  #equip-autoclave,
  #equip-handpiece-clean,
  #equip-handpiece-steri,
  #equip-ct,
  #equip-scanner,
  #equip-cadcam,
  #equip-microscope,
  #equip-anesthesia,
  #equip-saliva {
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
}

/* microCMS リッチテキスト本文スタイル */
.microcms-body { font-size: 16px; line-height: 2; color: #54422F; }
.microcms-body h2 { font-family: 'Zen Maru Gothic', sans-serif; font-size: clamp(18px, 2.6vw, 22px); font-weight: 700; margin: 48px 0 16px; padding-left: 16px; border-left: 4px solid #EE7B3C; }
.microcms-body h3 { font-family: 'Zen Maru Gothic', sans-serif; font-size: clamp(16px, 2.2vw, 19px); font-weight: 700; margin: 36px 0 12px; }
.microcms-body p  { margin: 0 0 20px; }
.microcms-body ul, .microcms-body ol { margin: 0 0 20px; padding-left: 24px; }
.microcms-body li { margin-bottom: 6px; }
.microcms-body img { max-width: 100%; height: auto; border-radius: 16px; margin: 24px 0; display: block; }
.microcms-body a  { color: #D9601F; text-decoration: underline; }
.microcms-body strong { font-weight: 700; }
.microcms-body blockquote { margin: 24px 0; padding: 18px 22px; background: #FBF6EF; border-left: 4px solid #E4D5C4; border-radius: 0 12px 12px 0; color: #6A5746; }
.microcms-body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14.5px; }
.microcms-body th, .microcms-body td { padding: 10px 14px; border: 1px solid #E4D5C4; }
.microcms-body th { background: #FBF6EF; font-weight: 700; }

/* サブページヒーロー画像：PC表示で表示範囲を下寄りに */
@media (min-width: 961px) {
  #page-hero, #recruit-hero, #line-hero { object-position: center 30%; }
}