@charset "utf-8";
/* =========================================================
   じょうじ歯科クリニック  静的HTML版の追加CSS（2026.10）
   style.css＝旧テーマのデザインそのまま／このファイル＝静的化の調整とスマホ表示
   ========================================================= */

/* ---------- 静的化の調整（PC） ---------- */
.sp-only,.sp-br{display:none !important}
.menu-btn,.sp-menu,.sp-tel-btn{display:none}
.sr-only{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
a[href^="tel:"]{color:inherit;text-decoration:none}
.min{font-family:"Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","Noto Serif JP","Noto Serif CJK JP",serif}
.han{font-family:Hannari,"Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","Noto Serif JP","Noto Serif CJK JP",serif}
#doctor,#access,#shika,#syoni,#shoki,#whitening,#xray,.news-all-box{scroll-margin-top:20px}

/* 見出しタグにしたところ（旧サイトは p）：見た目は旧サイトのまま */
h2{font-size:13px;font-weight:normal;margin:0 0 18px;line-height:inherit}
h3.footer-guide-name,h3.news-all-catch{background:none;padding:0;font-weight:normal}
h3.news-all-catch{color:#52463F}
#catchArea h2{margin:0}
#catchArea .catch-text{font-size:40px;color:#8AB039;letter-spacing:.2em;line-height:1.4}
#top-news .top-news-title{font-size:13px}

/* ヘッダー：「WEBからのお問い合わせ」ボタンをやめたので、電話番号を右端に */
#header-tel-area{left:auto;right:0}
#header-tel-no{white-space:nowrap}

/* 先生の写真（2026.10 差し替え） */
#top-doctor-area{background-image:url(/assets/img/top-doctor-2026.jpg)}
#clinic-doctor-area{background-image:url(/assets/img/clinic-doctor-bg-2026.jpg)}
#globalNavi a[aria-current]{opacity:1}

/* 地図（旧サイトの Google Maps API の代わりに埋め込み地図） */
.map-frame{width:100%}
.map-frame iframe{display:block;width:100%;height:100%;border:0}
.clinic-map{margin-bottom:20px}

/* 診療時間表（旧サイトは画像。時間を直せるように表に） */
.time-table{width:478px;border-collapse:collapse;margin-bottom:12px;border-bottom:solid 1px #9A8C80}
.time-table thead th{background:#755B4A;color:#FFF;font-weight:normal;font-size:16px;height:40px;letter-spacing:.1em;padding:0}
.time-table thead th.tt-head{width:160px;letter-spacing:.2em}
.time-table tbody th{color:#755B4A;font-weight:normal;font-size:16px;text-align:center;white-space:nowrap;padding:0}
.time-table tbody tr:first-child th,.time-table tbody tr:first-child td{padding-top:14px}
.time-table tbody tr:last-child th,.time-table tbody tr:last-child td{padding-bottom:12px}
.time-table td{text-align:center;height:28px;padding:0}
.tt-arrow{display:inline-block;font-size:9px;color:#9A8C80;margin:0 7px;vertical-align:2px}
.tt-on,.tt-sat{display:inline-block;width:14px;height:14px;border:2px solid #8AB039;border-radius:50%;position:relative;vertical-align:middle}
.tt-on::after,.tt-sat::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#8AB039}
.tt-sat{border-color:#A9932C}
.tt-sat::after{background:#A9932C}
.tt-off{display:inline-block;width:14px;height:14px;position:relative;vertical-align:middle}
.tt-off::after{content:"";position:absolute;left:50%;top:-1px;width:1px;height:17px;background:#9A8C80;transform:rotate(45deg)}
#footer-time-hosoku2{line-height:1.6}
#footer-time-area{top:18px}

/* 下に出るバー（ロゴ・電話番号）：旧サイトと同じくスクロールで出る */
#footer-con-area{display:block;visibility:hidden;transform:translateY(100%);transition:transform .25s,visibility .25s}
#footer-con-area.is-show{visibility:visible;transform:none}
#footer-con-area.is-stop{position:absolute;padding-top:20px;transform:none}
#footer-con .footer-con-logo{position:absolute;top:-6px;left:0;height:86px;width:428px;margin:0}
#footer-con .footer-con-logo a{display:block;height:86px;width:428px;outline-style:none;text-indent:-9999px;background:url(/assets/img/logo.png)}
#footer-con #header-tel-area{top:18px;right:0;left:auto}

/* フッターの写真（差し替え） */
#footer-img img{width:222px;height:175px;object-fit:cover}
#clinic-info-gaikan img{width:460px;height:auto}

/* お問い合わせ：フォームをやめて電話だけに */
#contact-time{width:478px;margin:40px auto 60px}

/* トピックス：3件 */
#topics-area ul li{height:auto;min-height:420px}
.topics-img .news_image{background-size:contain;background-color:#FFF}

/* ふわっと表示：JavaScript が無いときは最初から表示 */
html:not(.js) .guide-kamoku-name,html:not(.js) .guide-kamoku-text,html:not(.js) #footer-guide-menu ul li,
html:not(.js) #guide-visit-check,html:not(.js) #visit-info-10years,.anim-done{visibility:visible !important}

/* 新着情報 */
#js-top-news{min-height:150px}
.news-all-text p{font-size:16px;margin-bottom:12px}
.news-img{margin:16px 0}
.news-img img{display:block;max-width:min(100%,420px);height:auto;border:1px solid #EEE}
.news-files{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 0;list-style:none;padding:0}
.news-files a{display:inline-flex;align-items:center;gap:10px;max-width:100%;box-sizing:border-box;padding:8px 18px 8px 14px;border:1px solid #8AB039;color:#8AB039 !important;text-decoration:none;font-size:14px;line-height:1.4;background:#FFF;border-radius:6px}
.news-files a::before{content:"";width:6px;height:6px;border-top:2px solid #8AB039;border-right:2px solid #8AB039;transform:rotate(45deg);flex-shrink:0}
.news-files a.pdf::before{width:16px;height:20px;border:0;transform:none;background:linear-gradient(135deg,#fff 0 30%,transparent 30%),#D02619;border-radius:2px}
.news-files a small{flex-shrink:0;font-size:10px;color:#fff;background:#D02619;padding:0 5px;letter-spacing:.06em}
.news-all-date .cate{color:#8AB039;font-size:13px}
.news-more{text-align:center;margin:10px 0 40px}
.news-more button{font:inherit;font-size:15px;color:#FFF;background:#8AB039;border:0;border-radius:4px;padding:14px 60px;cursor:pointer;transition:.3s}
.news-more button:hover{border-radius:12px}
#side_right .cat-item a{box-sizing:border-box}

/* 404 */
.notfound{width:980px;max-width:100%;margin:0 auto 60px;text-align:center}
.notfound p{font-size:16px}
.notfound-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;list-style:none;padding:0}

/* =========================================================
   スマホ（767px以下）
   旧サイトはスマホ用プラグイン（WPtouch）で別表示だったため、ここで新しく組み直し
   ========================================================= */
@media (max-width:767px){
  body{background-size:auto 400px;padding-bottom:58px}
  body,p,td,th,li{font-size:14px}
  img{max-width:100%;height:auto}
  .sp-only{display:block !important}
  .sp-br{display:inline !important}
  .pc-br,.pc-only{display:none !important}

  /* ---- ヘッダー ---- */
  #header-area{height:auto}
  #header{width:auto;height:auto;padding:8px 64px 10px 12px}
  #header h1{position:static;font-size:9px;letter-spacing:.05em;line-height:1.5;margin:0 0 6px}
  #header #logo{position:static;width:230px;height:46px}
  #header #logo a{width:230px;height:46px;background-size:contain;background-repeat:no-repeat}
  #header #header-tel-area{display:none}
  #globalNavi{display:none}
  .menu-btn{display:block;position:absolute;top:18px;right:8px;width:50px;height:50px;padding:0;border:0;background:none;cursor:pointer;z-index:300}
  .menu-btn span{display:block;width:26px;height:2px;margin:6px auto;background:#8AB039;transition:.3s}
  .menu-btn em{display:block;font-style:normal;font-size:9px;color:#8AB039;line-height:1;letter-spacing:.06em;font-family:"Times New Roman",serif}
  .menu-open .menu-btn{position:fixed;top:10px}
  .menu-open .menu-btn span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .menu-open .menu-btn span:nth-child(2){opacity:0}
  .menu-open .menu-btn span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .menu-open{overflow:hidden}
  .sp-menu{display:block;position:fixed;inset:0;z-index:250;box-sizing:border-box;padding:70px 20px 90px;background:#FBFDF3;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .menu-open .sp-menu{opacity:1;visibility:visible}
  .sp-menu-list{margin:0 0 24px;padding:0;list-style:none;border-top:1px solid #DDE5C8}
  .sp-menu-list li{border-bottom:1px solid #DDE5C8;font-size:16px}
  .sp-menu-list a{display:block;padding:13px 6px;color:#52463F;text-decoration:none;font-family:"Times New Roman","游明朝",YuMincho,"Hiragino Mincho ProN","Noto Serif JP","Noto Serif CJK JP",serif}
  .sp-menu-list a::after{content:"›";float:right;color:#8AB039}
  .sp-menu-list li.sub a{padding:9px 6px 9px 24px;font-size:14px;color:#8A7B70}
  .sp-menu-tel{text-align:center}
  .sp-menu-tel a{display:block;background:#8AB039;color:#FFF !important;border-radius:8px;padding:12px;font-size:20px;letter-spacing:.06em}
  .sp-menu-tel small{display:block;font-size:12px;color:#8A7B70;margin-top:6px}

  /* ---- 下層ページ共通 ---- */
  #main{margin:20px 0 40px}
  #catchArea{width:auto;margin:0 16px 20px}
  #catchArea img{max-height:44px;width:auto}
  #catchArea .catch-text{font-size:24px}
  #breadNavi{width:auto;margin:0 16px 20px;font-size:12px;line-height:1.6}
  #contents-area{width:auto;padding:0 16px}
  #contents{width:auto;float:none;margin:0}
  #side_right{width:auto;float:none;margin-top:30px}
  #side_right .cat-item{width:auto}
  #side_right .cat-item a{width:100%}

  /* ---- TOP ---- */
  #main-top{margin:0}
  #top-main-area{height:230px;background-size:auto 230px;background-position:center top}
  #top-main{width:auto;height:230px}
  #top-main-huki1,#top-main-huki2{width:96px;height:auto}
  #top-main-huki1{left:2px;top:0}
  #top-main-huki2{right:2px;top:10px}
  #top-message-area{height:auto;padding:30px 16px 34px;background-size:cover;background-position:center}
  #top-message-title{margin:0 auto 16px;max-width:92%}
  #top-message-title-under{font-size:17px;letter-spacing:.08em;line-height:1.6;margin-bottom:16px}
  #top-message-text{font-size:14px;text-align:left;line-height:1.9}
  #top-message-text br{display:none}
  /* NEWS（緑）と TOPICS（茶）を上下に。背景写真は左右で色が分かれているので、スマホでは色だけ */
  #top-news-area{background:none;padding:0}
  #top-news{width:auto}
  .top-news-box,#top-news div.top-news-box:last-child{width:auto;float:none;padding:28px 16px 30px}
  #top-news-blog{background:linear-gradient(135deg,#AECF76,#99B350)}
  #top-news-topics{background:linear-gradient(135deg,#A8968A,#A28C81)}
  #top-blog-area ul li{font-size:14px;line-height:1.6;margin-bottom:8px}
  #top-blog-area ul li a{display:block;padding-left:0;font-size:14px}
  #js-top-news{min-height:0}
  #top-news-topics ul li{width:auto;float:none;margin:0 0 14px !important;display:flex;gap:12px;align-items:center}
  .top-topi-l,.top-topi-r{float:none;margin:0}
  .top-topi-l{flex-shrink:0}
  .top-topi-r{width:auto}
  #top-doctor-area{background:#FBFDF3;padding:34px 0 30px;margin-bottom:0}
  #top-doctor{width:auto;padding:0 16px}
  #top-doctor-title{font-size:24px;margin-bottom:16px}
  .top-doctor-photo{margin:0 0 16px}
  .top-doctor-photo img{display:block;width:100%;border-radius:8px}
  #top-doctor-text,#top-doctor-topics{width:auto}
  #top-doctor-text{font-size:14px}
  #top-doctor-name{position:static;margin:0 0 14px}
  #top-doctor-pro{position:static;text-align:center;margin:0}
  #top-doctor-pro img{width:110px}

  /* ---- 診療案内（フッター上の3つ） ---- */
  #footer-guide-area{height:auto;background-size:auto 100%;background-position:center top;padding-bottom:40px}
  #footer-guide{width:auto;padding:0 16px}
  #footer-guide-title{padding-top:96px;margin-bottom:24px}
  #footer-guide-kaba{width:120px;top:-6px;left:10px}
  #footer-guide-menu ul li{width:auto;float:none;margin:0 0 28px}
  .footer-guide-name{font-size:24px;margin-bottom:12px}
  .footer-guide-img-area{width:100%;max-width:306px;margin:0 auto 12px}
  .footer-guide-text{font-size:14px}

  /* ---- フッター ---- */
  #footer-con-area{display:none !important}
  #footer-area{height:auto}
  #footer{width:auto;height:auto;padding:24px 16px 10px}
  #footer-img,#footer-info-area,#footer-time-area,#footer-navi-area{position:static;width:auto;margin:0 0 20px}
  #footer-img{height:auto;text-align:center}
  #footer-img img{width:100%;max-width:340px;height:auto;aspect-ratio:222/175}
  #footer-info{text-align:center}
  #footer-info-p{width:auto;max-width:280px;margin:0 auto}
  .time-table{width:100%}
  .time-table thead th{font-size:14px;height:36px;letter-spacing:0}
  .time-table thead th.tt-head{width:auto;letter-spacing:.05em}
  .time-table tbody th{font-size:14px}
  .tt-arrow{margin:0 3px}
  #footer-time-hosoku{line-height:1.7}
  .footer-time-close{margin-left:0;display:inline-block}
  #footer-time-hosoku2{font-size:12px}
  #footer-navi-area{border-top:solid 1px #BFD38E;padding-top:20px;margin:0}
  #footer-navi-area ul{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;padding:0}
  #footer-navi-area ul li{width:auto;float:none;line-height:1.6}
  #footer-map-area{height:240px}
  #footer-map-area .map-frame{height:240px !important}
  #footer-bottom-area{height:auto;padding-bottom:16px}
  address{font-size:11px;line-height:1.7;padding:0 12px;letter-spacing:0;box-sizing:border-box}
  .sp-tel-btn{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:200;height:58px;align-items:center;justify-content:center;gap:8px;background:#8AB039;color:#FFF !important;text-decoration:none;font-size:22px;letter-spacing:.06em;font-family:Hannari,"Times New Roman",serif;box-shadow:0 -2px 8px rgba(0,0,0,.15)}
  .sp-tel-btn small{font-size:10px;line-height:1.3;letter-spacing:0;font-family:sans-serif;border-left:1px solid rgba(255,255,255,.6);padding-left:8px}
  .sp-tel-icon{font-size:18px}

  /* ---- クリニック紹介 ---- */
  #clinic-message-area{padding:24px 16px}
  #clinic-message-title{font-size:16px;letter-spacing:.04em;line-height:1.6;padding-bottom:16px;margin-bottom:16px}
  #clinic-message-text{font-size:14px;text-align:left;line-height:1.9}
  #clinic-message-text br{display:none}
  #clinic-doctor-area{background:#9BBC54;padding:30px 0}
  #clinic-doctor{width:auto;padding:0 16px}
  #clinic-doctor-title{font-size:22px}
  #clinic-doctor li{font-size:14px;line-height:1.8}
  #clinic-doctor-name{position:static;margin:16px 0 14px;color:#FFF;background-image:none;padding-top:0}
  #clinic-doctor-kaba{display:none}
  .clinic-doctor-photo{margin:0}
  .clinic-doctor-photo img{display:block;width:100%;border-radius:8px}
  #clinic-info{width:auto;padding:30px 16px}
  #clinic-info-l,#clinic-info-r{width:auto;float:none}
  #clinic-info-logo img{width:230px}
  #clinic-infp-address{font-size:14px;line-height:1.6}
  .clinic-info-t th,.clinic-info-t td{font-size:14px;letter-spacing:0}
  #clinic-info-kamoku ul{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:0}
  #clinic-info-kamoku ul li{width:auto;float:none;margin:0;font-size:13px;letter-spacing:0}
  #clinic-info-r{margin:20px 0}
  #clinic-info-gaikan img{width:100%}
  #clinic-info-img-area ul{display:grid;grid-template-columns:1fr 1fr;gap:16px 10px;padding:0}
  #clinic-info-img-area ul li{width:auto;float:none;margin:0}
  .clinic-info-img{width:auto;height:auto;margin-bottom:8px}
  .clinic-info-img img{width:100%}
  .clinic-info-img-dai{font-size:16px}
  .clinic-info-img-text{font-size:13px}
  .clinic-info-img-text br{display:none}
  #clinic-map-top{width:auto;padding:0 16px}
  #clinic-map-top-l,#clinic-map-top-r{width:auto;float:none;text-align:left}
  #clinic-map-top-l img{width:170px}
  #clinic-map-top-r{font-size:14px;line-height:1.6}
  .clinic-map{height:300px !important}
  #clinic-map-car{width:auto;max-width:280px;height:56px;line-height:56px;font-size:20px}

  /* ---- 診療案内 ---- */
  #guide-area{width:auto;padding:0 16px}
  .guide-kamoku-info,.guide-kamoku-img{width:auto;float:none !important}
  .guide-kamoku-name{font-size:32px}
  .guide-kamoku-text{font-size:14px}
  .guide-kamoku-img{margin-bottom:10px}
  #syoni{display:flex;flex-direction:column-reverse}
  .guide-toku-img ul{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:0}
  .guide-toku-img ul li{width:auto;float:none;margin:0}
  .guide-toku-img ul li img{width:100%}
  .guide-kamoku-bottom{font-size:14px;text-align:left}
  .guide-kamoku-bottom br{display:none}
  #guide-visit-area{padding:20px 16px}
  #guide-visit-area-l,#guide-visit-area-r{width:auto;float:none}
  #guide-visit-img{margin-bottom:16px}
  #guide-visit-more{width:auto;max-width:240px}
  #guide-visit-check{width:70px;top:-30px;right:10px}

  /* ---- 訪問歯科治療 ---- */
  #visit-top-area{height:auto;background-size:auto 240px;background-position:58% top;padding-top:250px}
  #visit-top{width:auto;height:auto;padding:0 16px}
  #visit-top-text{position:static;margin:0 0 20px;text-align:center}
  #visit-top-text img{width:100%;max-width:360px}
  #visit-info-top{font-size:18px;padding:0 16px}
  #visit-info-top br{display:none}
  #visit-info-area{width:auto;padding:12px 10px 60px;margin:0 16px 40px}
  .visit-info-t,.visit-info-t tbody,.visit-info-t tr{display:block;width:100%}
  .visit-info-t th,.visit-info-t td{display:block;width:auto !important;box-sizing:border-box}
  .visit-info-t td{padding:8px 4px 14px;font-size:14px}
  #visit-info-10years{width:110px;bottom:-40px;right:10px}
  #visit-tel-area{padding:0 16px}
  #visit-tel-top{width:auto}
  #visit-tel-no{font-size:34px}
  #visit-tel-no span{background-size:30px;padding-left:38px}

  /* ---- お問い合わせ ---- */
  #contact-top-area{width:auto;padding:0 16px}
  #contact-top-text{font-size:14px;text-align:left}
  #contact-tel{font-size:34px}
  #contact-tel span{background-size:30px;padding-left:38px}
  #contact-tel-under{width:auto}
  #contact-time{width:auto;margin:30px 16px 40px}

  /* ---- 新着情報・トピックス ---- */
  .news-all-catch{font-size:18px;line-height:1.5}
  .news-all-text,.news-all-text p{font-size:14px}
  #topics-area{width:auto;padding:0 16px}
  #topics-area ul{padding:0}
  #topics-area ul li{width:auto;float:none;padding:0 0 24px !important;margin:0 0 24px !important;border-right:none;border-bottom:dotted 2px #8AB039;min-height:0}
  .topics-img,.topics-img .news_image{width:100%;height:240px}
  .topics-text p{font-size:14px}

  /* ---- リンク・サイトマップ ---- */
  #link-area,#sitemap-area{width:auto;padding:0 16px}
  #link-top,#sitemap-top-text{font-size:14px}
  .link-box-l,.link-box-r{width:auto;float:none}
  .link-box-l{margin-bottom:12px}
  .link-box-text,.link-box-url{font-size:14px}
  .link-box-url{word-break:break-all;line-height:1.6}
  .sitemap-navi-retu{width:auto;height:auto;float:none;padding:0 !important;margin:0 0 20px !important;border-right:none}
  .sitemap-name{font-size:17px}

  .notfound{padding:0 16px;box-sizing:border-box}
}