@charset "utf-8";
/* =========================================================
   富田産科婦人科クリニック  静的HTML化の調整＋スマホ表示（2026.11）
   旧テーマの style.css はそのまま。ここで上書きしています
   ・PC（1100px〜）：旧サイトと同じ
   ・タブレット（768〜1099px）：PC表示を縮小（ページ側の viewport で width=1100）
   ・スマホ（〜767px）：このファイルの後半
   ========================================================= */

/* ---------- 共通（PC） ---------- */
.menu-btn, .sp-menu, .sp-fix-bar { display: none; }
a.tel-link { color: inherit; text-decoration: none; }
@media (min-width: 768px) { a.tel-link { pointer-events: none; } }
#contents > div[id], #contents > article, .anchor { scroll-margin-top: 90px; }
img { max-width: 100%; height: auto; }
#breadNavi span { color: inherit; }

/* TOPのスライド（bxSlider の代わり：3枚をフェード） */
#top-head-slide ul { position: relative; height: 680px; margin: 0; padding: 0; }
#top-head-slide ul li { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity .5s ease; }
#top-head-slide ul li:first-child { opacity: 1; }
#top-head-slide.ready ul li { opacity: 0; }
#top-head-slide.ready ul li.on { opacity: 1; z-index: 1; }

/* 見出しの h2（TOPのお知らせ）は旧サイトの p と同じ見た目に */
h2.top-osirase-dai { font-weight: normal; }

/* 診療時間表（/inc/hours.html。TOP・診療案内・サイドの3か所で共通） */
.time-t { width: 100%; }
.time-t th.time-head { width: 30%; }
.time-t th { width: 10%; }
.time-t td.time-time span { white-space: nowrap; }
#side-info-area .time-t td.time-time span { display: block; }
.time-t td img { width: 12px; height: auto; }
.hours-close, .hours-menkai { font-size: 14px; line-height: 1.6; margin-bottom: 4px; }
#side-info-area .hours-close, #side-info-area .hours-menkai { font-size: 13px; margin-bottom: 6px; }
#guide-time-info .top-clinic-time-tantou, #guide-time-info .hours-close, #guide-time-info .hours-menkai { text-align: center; }
#guide-time-info .hours-close, #guide-time-info .hours-menkai { display: inline-block; margin: 0 .5em 4px; font-size: 13px; }
#guide-time-info { text-align: center; }
#guide-time-info .time-t { text-align: left; }

/* 地図（APIキー不要の埋め込み） */
.map-embed { width: 100%; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
#clinic-access-map { margin-bottom: 20px; }

/* TOP：分娩予約状況（廃止）のあとの右側にバナーを縦に並べる */
#top-osirase-r #top-osirase-banner-area ul li { width: 100%; float: none; margin: 0 0 30px; }
#top-osirase-r #top-osirase-banner-area ul li:last-child { margin-bottom: 0; }
#top-osirase-r #top-osirase-banner-area img { border-radius: 10px; display: block; }
#js-top-news li a { margin-left: 30px; }
#js-top-news li.news-fallback a { margin-left: 0; }

/* フッター：インスタのバナー（旧サイトはロゴと同じ枠） */
#footer-info-insta { display: table-cell; vertical-align: middle; width: 273px; margin-bottom: 0; padding-right: 44px; }
#footer-info-insta img { width: 100%; }

/* 医師紹介の写真 */
.clinic-doctor-photo { margin: 0 0 24px; }
.clinic-doctor-photo img { display: block; width: 100%; height: auto; }

/* 診療案内：ネット予約のバナー */
.guide-yoyaku-banner { text-align: center; margin: 25px 0; }
.guide-yoyaku-banner img { margin: 0 auto; }

/* エムセラ */
.emsella-img { text-align: center; }
.emsella-img img, #contents .aligncenter { display: block; margin: 20px auto; }

/* 指針・身体的拘束・404（文章だけのページ） */
.doc-box p { font-size: 15px; line-height: 2; margin-bottom: 14px; }
.doc-box p.doc-h { font-size: 18px; margin: 32px 0 10px; padding-bottom: 6px; border-bottom: dashed 1px #D5C5BC; }
.doc-box p.doc-h2 { font-weight: bold; color: #78644D; margin: 20px 0 8px; }
.notfound-links { margin: 20px 0 0; }
.notfound-links li { line-height: 42px; padding: 0 10px; border-bottom: dashed 1px #CFC0B6; background: url(/assets/img/arrow2.png) no-repeat right 10px center; background-size: 18px; }
.notfound-links a { color: #78644C; text-decoration: none; display: block; }

/* 求人情報 */
.recruit-box p { margin-bottom: 4px; font-size: 15px; }
.recruit-box p.recruit-h { font-size: 18px; margin: 26px 0 8px; padding-bottom: 6px; border-bottom: dashed 1px #D5C5BC; }
.recruit-box .recruit-img { margin-bottom: 10px; }
.recruit-box .recruit-img img { display: block; width: 100%; border-radius: 4px; }
.recruit-box .recruit-contact { margin-top: 26px; padding: 16px 20px; background: #FDF7F3; border-radius: 4px; }

/* お知らせ（一覧・詳しいページ） */
#all-news-box-area .con-box { float: none; }
#all-news-box-area .all-news-box { margin-bottom: 15px; }
#single-news-naiyou p { margin-bottom: 14px; }
#single-news-naiyou img { max-width: 100%; height: auto; }
.news-img { margin: 10px 0 18px; }
.news-img img { display: block; max-width: 100%; height: auto; border-radius: 4px; }
.news-files { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.news-files a { display: inline-block; padding: 8px 16px; border: 1px solid #D5C5BC; border-radius: 20px; background: #fff; color: #78644D; text-decoration: none; font-size: 14px; line-height: 1.4; }
.news-files a.pdf::before { content: "📄 "; }
.news-files small { font-size: 10px; color: #fff; background: #E23733; border-radius: 3px; padding: 1px 4px; margin-left: 6px; vertical-align: 1px; }
.news-back { text-align: center; margin: 10px 0 30px; clear: both; }
.news-back a { display: inline-block; padding: 10px 40px; background: #fff; border: solid 1px #D5C5BC; border-radius: 4px; color: #78644D; text-decoration: none; }
.news-notfound { float: none !important; }
.wp-pagenavi { text-align: center; padding: 10px 0 20px; }
.wp-pagenavi a, .wp-pagenavi span { display: inline-block; min-width: 40px; line-height: 40px; margin: 0 3px 6px; background: #fff; border: solid 1px #D5C5BC; border-radius: 4px; color: #78644D; text-decoration: none; }
.wp-pagenavi span.current { background: #EE8586; border-color: #EE8586; color: #fff; }
.news-fallback { float: none !important; }

/* 今いるページのメニュー（main.js が aria-current を付ける） */
#nav-area ul li a[aria-current] { color: #EE8586; }
header h1, #header-bar-area { z-index: 3; }
/* 開閉パネル（更年期治療）：最初は閉じておく */
.js .switchDetail { display: none; }
.js .switchDetail.is-open { display: block; }

/* =========================================================
   スマホ（〜767px）
   ========================================================= */
@media (max-width: 767px) {
  #wrapper, #wrapper-sp { min-width: 0; overflow: hidden; }
  body { padding-bottom: 62px; }
  p { margin-bottom: 14px; }
  h3 { font-size: 21px; padding-top: 50px; margin-bottom: 24px; background-size: 40px; }
  h4 { font-size: 16px; padding: 8px 12px; }
  table { max-width: 100%; }

  /* ---- ヘッダー ---- */
  header, .home header { height: auto; display: flex; flex-direction: column; background: url(/assets/img/header-brown.jpg) repeat; background-size: 600px; }
  header h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; left: 0; top: 0; }
  #header-bar-area { order: 1; position: relative; width: auto; left: auto; bottom: auto; margin: 0; height: 60px; }
  #header-bar { height: 60px; }
  #header-bar #logo { width: 236px; top: 14px; left: 12px; }
  #header-bar #logo a { width: 236px; height: 31px; background-size: contain; }
  #header-tel-area, #header-close-area { display: none; }
  #content { display: none; }
  #header-bar-area { z-index: auto; }
  .menu-btn { display: block; position: fixed; right: 6px; top: 6px; width: 50px; height: 48px; border: 0; padding: 0; background: rgba(120,100,77,.92); border-radius: 6px; cursor: pointer; z-index: 120; }
  .menu-btn span { position: absolute; left: 13px; width: 24px; height: 2px; background: #fff; transition: .25s; }
  .menu-btn span:nth-child(1) { top: 12px; }
  .menu-btn span:nth-child(2) { top: 19px; }
  .menu-btn span:nth-child(3) { top: 26px; }
  .menu-btn em { position: absolute; left: 0; right: 0; bottom: 4px; font-style: normal; font-size: 9px; color: #fff; letter-spacing: .1em; line-height: 1; }
  .menu-open .menu-btn span:nth-child(1) { top: 19px; transform: rotate(45deg); }
  .menu-open .menu-btn span:nth-child(2) { opacity: 0; }
  .menu-open .menu-btn span:nth-child(3) { top: 19px; transform: rotate(-45deg); }
  .sp-menu { display: block; position: fixed; inset: 0; z-index: 110; background: #FAF0EE; overflow-y: auto; padding: 60px 20px 90px; visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s; }
  .menu-open .sp-menu { visibility: visible; opacity: 1; }
  .menu-open { overflow: hidden; }
  .sp-menu nav { height: auto; padding: 0; background: none; }
  .sp-menu-list { margin: 0 0 20px; border-top: dashed 1px #CFC0B6; }
  .sp-menu-list li { border-bottom: dashed 1px #CFC0B6; }
  .sp-menu-list a { display: block; padding: 13px 34px 13px 8px; color: #78644D; text-decoration: none; font-family: 'utsukushi', "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", serif; font-size: 16px; line-height: 1.4; background: url(/assets/img/arrow2.png) no-repeat right 8px center; background-size: 18px; }
  .sp-menu-list li.sub a { padding-left: 26px; font-size: 14px; }
  .sp-menu-list a[aria-current] { color: #EE8586; }
  .sp-menu-btns p { margin: 0 0 10px; }
  .sp-menu-btns a { display: block; text-align: center; text-decoration: none; border-radius: 4px; padding: 12px; line-height: 1.4; }
  .sp-menu-tel a { background: #78644D; color: #fff; font-size: 20px; }
  .sp-menu-tel small { display: block; font-size: 11px; }
  .sp-menu-web a { background: #EE8586; color: #fff; font-size: 16px; }

  /* ---- TOPのスライド ---- */
  #top-head-slide { order: 2; position: relative; left: auto; margin: 0; width: 100%; height: 64vw; }
  #top-head-slide ul, #top-head-slide ul li { height: 64vw; }
  #top-head-slide ul li#slide1, #top-head-slide ul li#slide2, #top-head-slide ul li#slide3 { background-attachment: scroll; background-size: cover; background-position: center center !important; }
  .top-head-catch { width: auto; padding: 36vw 10px 0; font-size: 14px; text-shadow: 0 0 8px rgba(0,0,0,.45); }
  .top-head-catch span { font-size: 19px; }

  /* 背景の固定（fixed）はスマホでは効かない・崩れるので通常のスクロールに */
  #footer-con-area, #top-osirase-area, .top-menu-box, #catch-area { background-attachment: scroll !important; background-size: cover !important; }

  /* ---- 下層ページの見出し・パンくず ---- */
  #catch-area { padding: 28px 16px; background-position: center !important; }
  h2#catch-title { font-size: 21px; margin-bottom: 8px; }
  #catch-text { font-size: 12px; }
  #catch-text br { display: none; }
  #breadNavi { width: auto; margin: 0 12px 16px; line-height: 1.6; }

  /* ---- 本文・サイド ---- */
  #contents-area { width: auto; margin: 0 10px 30px; }
  #contents { width: auto; float: none; }
  .con-box { width: auto; float: none; padding: 26px 16px; }
  #side_left { width: auto; float: none; margin-top: 24px; }
  #side-banner-area ul { display: flex; gap: 10px; }
  #side-banner-area ul li { flex: 1; }
  #single-news-title { font-size: 20px; }
  #single-news-naiyou, #single-news-naiyou p { font-size: 15px; }
  .all-news-title { font-size: 17px; }

  /* ---- TOP ---- */
  #top-message { width: auto; padding: 30px 16px 10px; }
  #top-message-image { position: static; width: 72%; margin: 0 auto 10px; }
  #top-message-text-area { width: auto; height: auto; }
  #top-message-title, #top-message-text { writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; float: none; height: auto; margin: 0 0 16px; }
  #top-message-title { font-size: 22px; text-align: center; }
  #top-message-title br:nth-of-type(2n+1) { display: none; }
  #top-message-text { font-size: 14px; line-height: 2; }
  #top-message-text br { display: none; }
  #top-message-box-area { margin: 10px 0 0; }
  /* 丸の画像（328×400）と同じ縦横比の箱にして、文字は丸の白い部分に下からそろえる */
  #top-message-box-area ul li { float: none; margin: 0 auto 16px; max-width: 328px; width: 100%; height: auto; aspect-ratio: 328 / 400; padding: 0 0 12%; box-sizing: border-box; background-size: 100% 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
  #top-message-box-area .top-message-box-dai { margin-bottom: 10px; }
  #top-message-box-area ul li:last-child { margin-right: auto; }
  .top-menu-box { width: 100%; float: none; }
  #top-osirase { width: auto; padding: 30px 10px; }
  #top-osirase-l, #top-osirase-r { width: auto; float: none; }
  #top-osirase-r { margin-top: 20px; }
  #top-osirase-r #top-osirase-banner-area ul { display: flex; gap: 10px; }
  #top-osirase-r #top-osirase-banner-area ul li { flex: 1; margin: 0; }
  .top-osirase-box { padding: 22px 16px; }
  .top-osirase-dai { font-size: 18px; }
  #top-news-area ul li { padding-left: 0; padding-right: 0; }
  #top-news-area #js-top-news li a { display: block; margin-left: 0; line-height: 1.6; }
  #top-clinic-info { width: auto; padding: 30px 16px; }
  #top-clinic-info-l, #top-clinic-info-r { width: auto; float: none; }
  #top-clinic-info-r { margin-top: 10px; }
  #top-clinic-info-r .map-embed { height: 300px !important; }
  #top-clinic-info-logo img { width: 260px; }

  /* ---- フッター ---- */
  #footer-con { width: auto; padding: 44px 16px; }
  #footer-con-title { font-size: 14px; text-align: left; }
  #footer-con-title br:first-child { display: block; }
  #footer-con-tr-area { width: auto; }
  #footer-con-t, #footer-con-r { float: none; display: block; width: auto; margin: 0 auto 14px; }
  #footer-con-tel { font-size: 26px; }
  #footer-con-tel-hosoku { text-align: center; padding: 0; }
  #footer-con-reserve { width: 260px; margin: 0 auto; }
  #footer-area { width: auto; padding: 50px 16px 20px; }
  #footer-navi-area { margin-bottom: 30px; }
  .footer-navi-box, #footer-navi-area div.footer-navi-box:first-child { width: 50%; box-sizing: border-box; padding: 0 10px 16px; border: 0; }
  #footer-info-area { display: block; text-align: center; }
  #footer-info-logo, #footer-info-insta, #footer-info-wifi { display: block; width: auto; padding: 0; margin: 0 auto 14px; max-width: 300px; }
  #footer-bottom { width: auto; height: auto; padding: 10px 12px; }
  ul#footer-link { width: auto; float: none; text-align: center; }
  ul#footer-link li { display: inline-block; float: none; margin: 0 10px; }
  address { float: none; width: auto; text-align: center; line-height: 1.6; padding: 6px 0 10px; }

  /* 画面下の固定ボタン */
  .sp-fix-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; box-shadow: 0 -2px 6px rgba(0,0,0,.12); }
  .sp-fix-bar a { flex: 1; display: block; text-align: center; color: #fff; text-decoration: none; font-size: 15px; line-height: 1.3; padding: 9px 4px 10px; font-family: 'utsukushi', "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", serif; }
  .sp-fix-bar a span { display: block; font-size: 16px; }
  .sp-fix-tel { background: #78644D; }
  .sp-fix-web { background: #EE8586; }


  /* ---- 各ページ：PCの固定幅・左右に飛び出す画像をスマホ幅に ---- */
  .ob-image, .con-image, #guide-time-head, #clinic-access-map { margin-left: -16px; margin-right: -16px; }
  .gyne-box-l, .gyne-box-r, .jiki-box-l, .jiki-box-r, #jiki-car-img, #jiki-car-text,
  #kounenki-top-syogai-img, #kounenki-top-syogai-text, .kounenki-syojyo-box, .syussan-box, .kamoku-box, .doctor-sikaku-box,
  .reserve-who-box, #nyuin-about-box-l, #nyuin-about-box-r, #jisan-mama-list-l, #jisan-mama-list-r, #jisan-ikuji-list-l, #jisan-ikuji-list-r,
  .sitemap-retu, ul#clinic-access-gaikan li, #clinic-access-logo, #clinic-access-address, .clinic-doctor-head-info, #nyuin-about-top-text {
    width: auto !important; float: none !important; margin-right: 0 !important; }
  .gyne-box-r, .jiki-box-r, #jiki-car-img, #kounenki-top-syogai-img, #nyuin-about-box-r { margin: 0 auto 16px !important; max-width: 300px; }
  .gyne-box-l { margin-bottom: 10px; }
  ul#clinic-access-gaikan { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  ul#clinic-access-gaikan li { margin: 0 !important; }
  #clinic-access-logo { max-width: 260px; margin-bottom: 8px; }
  #clinic-access-map .map-embed { height: 300px !important; }
  #clinic-policy-area { margin: 0 -16px -26px; padding-bottom: 20px; }
  #clinic-policy-area ul { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  #clinic-policy-area ul li { float: none; margin: 0 !important; }
  #guide-time-head { height: 230px; background-size: cover !important; background-position: center !important; }
  #guide-time-tel-area-area { width: 100%; left: 0; }
  #guide-time-tel-area { height: auto; padding: 8px 12px; }
  #guide-time-tel { float: none; font-size: 26px; }
  #guide-time-tel-text { float: none; padding: 4px 0 0; font-size: 11px; }
  .kamoku-box ul li a { width: 100%; box-sizing: border-box; }
  #nyuin-about-image { position: static; width: 70%; margin: 0 auto 10px; }
  #jisan-list ul li { width: 100%; margin-right: 0; }
  .kounenki-tiryou-box-t th, .kounenki-tiryou-kouka-t th, .ob-bosi-t th { width: 32%; }
  .kounenki-tiryou-kouka-t { width: 100%; }
  .ob-bosi-t th, .ob-bosi-t td, .kounenki-tiryou-box-t th, .kounenki-tiryou-box-t td, .kounenki-tiryou-kouka-t th, .kounenki-tiryou-kouka-t td, .doctor-reki-t th, .doctor-reki-t td { padding-left: 8px !important; padding-right: 8px !important; }
  .doctor-reki-t th { width: 26%; white-space: nowrap; }
  #sango .pc-tl { padding: 1em .6em .4em; }
  .sitemap-retu { padding-top: 0; }
  #guide-time-info .time-t td, #guide-time-info .time-t th { font-size: 15px; padding: 6px 2px; }
  #guide-time-info .time-t td.time-time span { display: block; }
  .faq-a-box { padding: 16px; }

  /* ---- 施設紹介：写真のコラージュ → 2列の並びに ---- */
  .floor-box { height: auto; margin: 0 -16px; padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
  .floor-img1, .floor-img2, .floor-img3 { position: static !important; width: auto !important; }
  #floor1 .floor-img1, #floor2 .floor-img1, #floor3 .floor-img1 { grid-column: 1 / 3; width: 86% !important; margin: 0 auto; }
  .floor-hane { display: none; }
  .floor-main-img { margin: 0 -16px; }
  .floor-text br { display: none; }
  #floor-wifi-img { float: none; width: auto; margin: 0 0 14px; }
  #floor-wifi-text { float: none; width: auto; }
}
/* 幅の狭いスマホ（iPhone SE など）：TOPの丸の中の文字を少し小さく */
@media (max-width: 375px) {
  #top-message-box-area .top-message-box-dai { font-size: 22px; margin-bottom: 8px; }
  #top-message-box-area .top-message-box-text { font-size: 13px; line-height: 1.7; }
  #top-message-box-area ul li { padding-bottom: 10%; }
}