@charset "UTF-8";
/* =============================================================
   common.css — 全ページ共通
   リセット / 変数 / ヘッダー・ナビ・SPメニュー / フッター / 追従ボタン / ヒーロー / パンくず / 診療時間表
   TOP専用は front.css、下層ページ専用は under.css。HTML に <style>・style="" は書かない。
   ============================================================= */

/* ---------- 変数 ---------- */
:root {
  --fs-primary: #21bdbd;
  --fs-primary-dark: #178484;
  --fs-primary-light: #64d1d1;
  --fs-primary-soft: #e9f8f8;
  --fs-accent: #faaf18;
  --fs-text: #2e2e2e;
  --fs-heading: #178484;
  --fs-muted: #666;
  --fs-line: #ddd;
  --fs-white: #fff;
  --fs-font-base: 'Noto Serif JP', serif;
  --fs-font-sans: 'Noto Sans JP', sans-serif;
  --fs-font-en: 'Great Vibes', cursive;
}

/* ---------- リセット ---------- */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, em, strong, img, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, dd, dl, dt, figure {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--fs-font-base);
  color: var(--fs-text);
  -webkit-text-size-adjust: 100%;
}
table { border-collapse: collapse; border-spacing: 0; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; background: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--fs-primary-dark); outline-offset: 2px; }
ol, ul { list-style: none; }
h1, h2, h3, h4 { font-family: var(--fs-font-base); }
p { font-size: 16px; line-height: 180%; }
button, a.button { cursor: pointer; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.u-hidden { visibility: hidden; pointer-events: none; }
.u-b0 { border: 0; }

/* ---------- PCナビ（TOP: ヒーロー直下 / 下層: ヘッダー右） ---------- */
.nav {
  width: 100%;
  background: #fff;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: all .3s ease-in-out;
}
.nav.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 15;
}
.nav-list {
  display: flex;
  justify-content: space-around;
  width: 100%;
  max-width: 1200px;
}
.nav-item { position: relative; }
.nav-item a {
  color: #666;
  font-size: 16px;
  font-weight: bold;
  padding: 15px 20px;
  display: block;
  position: relative;
  transition: color .3s ease;
}
.nav-item a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 0;
  height: 2px;
  background: var(--fs-primary);
  transition: all .3s ease-out;
  transform: translateX(-50%);
}
.nav-item a:hover::after { width: 100%; }
.nav-item a:hover { color: var(--fs-primary); }
.nav--under .nav-item a.active { color: var(--fs-primary); }
.has-dropdown .dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
  border-radius: 8px;
  padding: 10px 0;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity .4s ease, transform .4s ease;
}
.dropdown li { padding: 8px 20px; }
.dropdown li a { color: #666; display: block; font-size: 14px; padding: 0; font-weight: normal; transition: background .3s ease, padding-left .3s ease; }
.dropdown li a::after { display: none; }
.dropdown li a:hover { background: #f4f4f4; padding-left: 25px; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  z-index: 1;
}

/* ---------- 下層ページのヘッダー ---------- */
.fs-topbar { padding: 6px 10px 0; background: #fff; }
.fs-topbar__h1 { font-size: 12px; line-height: 1.4; color: #444; font-weight: 400; max-width: 1366px; margin: 0 auto; }
.fs-header { background: #fff; position: relative; z-index: 10; }
.fs-header__inner { max-width: 1366px; margin: 0 auto; padding: 0 10px 8px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.fs-logo img { width: 228px; height: auto; }
.nav--under { width: auto; flex: 1; justify-content: flex-end; padding: 0; }
.nav--under .nav-list { max-width: 900px; justify-content: space-between; }
.nav--under .nav-item a { font-size: 13px; font-weight: 400; color: #333; padding: 12px 14px; }
.nav--under .nav-item a::after { bottom: 4px; }

/* ---------- SPメニュー（ハンバーガー＋全画面パネル） ---------- */
.hamburger { display: none; }
.header__nav-area { display: none; }
@media (max-width: 768px) {
  .nav { display: none; }
  .hamburger {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background-color: var(--fs-primary);
    z-index: 10000;
    border: none;
    margin: 0;
    padding: 0;
  }
  .hamburger__line {
    display: block;
    height: 2px;
    position: absolute;
    top: 23px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    background-color: #fff;
    transition: .4s;
  }
  .hamburger__line::before, .hamburger__line::after {
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    background-color: #fff;
    transition: inherit;
  }
  .hamburger__line::before { top: -6px; }
  .hamburger__line::after { top: 6px; }
  .hamburger.-active .hamburger__line { background-color: transparent; }
  .hamburger.-active .hamburger__line::before { transform: rotate(45deg); top: 0; }
  .hamburger.-active .hamburger__line::after { transform: rotate(-45deg); top: 0; }
  .hamburger__text { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 100%; }
  .hamburger__text::before { content: "Menu"; display: block; text-align: center; color: #fff; font-size: 10px; font-weight: 900; }
  .hamburger.-active .hamburger__text::before { content: "Close"; }

  .header__nav-area {
    display: block;
    position: fixed;
    top: 0;
    left: -100%;
    z-index: 1000;
    height: 100vh;
    width: 100%;
    visibility: hidden;
    padding-top: 60px;
    background-color: var(--fs-primary-light);
    transition: .4s ease-in-out;
    overflow-y: auto;
  }
  .header__nav-area.-active { left: 0; visibility: visible; }
  .global-navigation { padding: 40px 25px 120px; }
  .global-navigation__list > li { padding-bottom: 10px; border-bottom: 2px solid #fff; }
  .global-navigation__list > li + li { margin-top: 10px; }
  .global-navigation__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-weight: 400;
    transition: color .4s;
    font-size: 1rem;
    font-family: var(--fs-font-base);
  }
  .global-navigation__link.-accordion {
    position: relative;
    background: none;
    border: none;
    appearance: none;
    width: 100%;
    padding: 0;
    text-align: left;
  }
  .global-navigation__link.-accordion::after {
    content: '';
    display: block;
    height: 12px;
    position: absolute;
    top: 50%;
    right: 5px;
    width: 2px;
    background-color: #fff;
    transform: translateY(-50%);
    transition: transform .4s;
  }
  .global-navigation__link.-accordion::before {
    content: '';
    display: block;
    height: 2px;
    position: absolute;
    top: 50%;
    right: 0;
    width: 12px;
    background-color: #fff;
    transform: translateY(-50%);
  }
  .global-navigation__link.-active::after { transform: translateY(-50%) rotate(-90deg); }
  .accordion { height: 0; overflow: hidden; visibility: hidden; transition: .4s; }
  .accordion.-active { height: auto; padding-top: 20px; visibility: visible; }
  .accordion__list li { font-size: 1rem; }
  .accordion__list li + li { margin-top: 20px; }
  .accordion__link { color: #fff; font-family: var(--fs-font-base); }

  /* 下層ヘッダー：ロゴ左・ハンバーガー右（細帯の h1 は SEO 用に残し、画面上は隠す。TOP は本番どおり表示） */
  .fs-topbar { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fs-header__inner { padding: 4px 70px 10px 10px; }
  .fs-logo img { width: 202px; }
}

/* ---------- フッター ---------- */
.footer {
  position: relative;
  padding: 40px 20px;
  background: url(../img/uploads/2025/06/E9F8F8.webp) center / cover no-repeat;
}
.footerinner { position: relative; z-index: 2; color: #363636; }
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
}
.footer-logo img { width: 300px; margin: 0 auto; }
.footer-info { text-align: left; font-size: 14px; color: #363636; }
/* 住所のまとまり（住所・TEL・WEB予約ボタン）。TOPは3カラムのまま、下層は住所の下にボタン */
.is-top .footer-contact { display: contents; }
body:not(.is-top) .footer-contact { display: flex; flex-direction: column; align-items: flex-start; }
body:not(.is-top) .footer-reservation { margin-top: 14px; }
@media (min-width: 769px) {
  /* 下層ページのフッター：左=ロゴ+診療時間表、右=住所のまとまり（本番の間隔） */
  body:not(.is-top) .footer-top { justify-content: flex-start; align-items: flex-start; }
  body:not(.is-top) .footer-logo { flex: 0 0 540px; }
  body:not(.is-top) .footer-schedule { margin: 0; padding: 15px 0; }
  body:not(.is-top) .footer-contact { margin-left: 90px; padding-top: 40px; }
}
.fs-mark { color: var(--fs-primary); }
body:not(.is-top) .footer-schedule .note { text-align: left; }
.footer-info p { position: relative; padding-left: 25px; margin: 5px 0; font-size: 14px; }
.footer-info p::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fs-primary-dark);
}
.footer-info p:nth-child(1)::before, .footer-info p:nth-child(2)::before { content: "\f3c5"; }
.footer-info p:nth-child(3)::before { content: "\f238"; }
.footer-info p:nth-child(4)::before { content: "\f095"; }
.footer-schedule { text-align: center; flex-grow: 1; margin: 0 20px; padding: 15px; border-radius: 8px; }
.footer-schedule h3 { font-size: 20px; color: var(--fs-primary-dark); margin-bottom: 10px; }
.note { font-size: 14px; color: #363636; margin-top: 5px; }
.footer-reserve-btn {
  display: inline-block;
  background: linear-gradient(to right, var(--fs-primary), var(--fs-primary-light));
  color: #fff;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: bold;
  box-shadow: 0 6px 12px rgba(33, 189, 189, .3);
}
.footer-reserve-btn::after { content: "→"; margin-left: 10px; }
.footer-links { display: flex; justify-content: space-between; max-width: 1100px; margin: 20px auto; }
.footer-section { width: 30%; }
.footer-section ul li { margin-bottom: 8px; }
.footer-section ul li a { color: #363636; font-size: 14px; }
.footer-section ul li a:hover { color: var(--fs-primary); }
.footer-bottom { text-align: center; font-size: 14px; color: #555; border-top: 1px solid #ddd; padding-top: 15px; }
.footer-bottom p { font-size: 14px; }
.is-top .footer-reserve-btn { background: var(--fs-primary); border-radius: 5px; box-shadow: none; padding: 10px 20px; font-weight: normal; }
.is-top .footer-reserve-btn::after { content: none; }
@media (max-width: 768px) {
  .footer-top { display: block; }
  .footer-schedule { margin: 15px 0; }
  .footer-logo img { width: 240px; }
  .footer-schedule h3 { font-size: 17px; }
  /* 予約ボタンは中央（インラインのままだと親の幅によって左に寄る） */
  body:not(.is-top) .footer-contact { align-items: stretch; }
  .footer-reservation { display: flex; justify-content: center; margin-top: 20px; }
  /* 下層ページのSPフッターは本番どおり左揃え（診療時間表は全幅・予約ボタンは左） */
  body:not(.is-top) .footer-reservation { justify-content: flex-start; }
  body:not(.is-top) .footer-schedule { margin: 15px 0 0; padding: 0; }
  body:not(.is-top) .footer-logo img { margin: 0 auto; }
  body:not(.is-top) .footer-info p { font-size: 17px; padding-left: 32px; margin: 12px 0; }
  body:not(.is-top) .footer-info p::before { font-size: 20px; }
  body:not(.is-top) .footer-bottom { text-align: center; }
  .footer-reserve-btn { display: block; min-width: 240px; text-align: center; }
  /* メニュー：左=メインメニュー（1列）、右=診療メニュー（3グループを縦に連結）の2列 */
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-items: start; }
  .footer-section { width: auto; grid-column: 2; }
  .footer-section:first-child { grid-column: 1; grid-row: 1 / span 3; }
  .footer-section ul li { margin-bottom: 10px; }
  .footer-section ul li a { display: inline-block; line-height: 1.6; }
}

/* ---------- 診療時間表 ---------- */
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, .1);
}
.schedule-table th, .schedule-table td { padding: 10px; border: 1px solid #ddd; text-align: center; font-size: 14px; }
.schedule-table th { background: linear-gradient(to bottom, var(--fs-primary), var(--fs-primary-light)); color: #fff; font-weight: bold; }
.schedule-table td { background: #fff; color: #666; }
.schedule-table .sat { color: var(--fs-primary); font-weight: bold; }
.schedule-table .closed { background: #eee; color: var(--fs-primary-dark); }
@media (max-width: 768px) {
  .schedule-table th, .schedule-table td { font-size: 12px; padding: 6px; }
}

/* ---------- 追従ボタン・ページトップ ---------- */
#page-top {
  position: fixed;
  right: 5px;
  bottom: 130px;
  height: 60px;
  font-weight: bold;
  transform: rotate(90deg);
  font-size: 100%;
  line-height: 1.5rem;
  color: #737373;
  padding: 0 0 0 35px;
  border-top: solid 1px;
  font-family: var(--fs-font-base);
  z-index: 900; /* SPメニュー(1000)・ハンバーガー(10000)より下。メニューを開いたとき重ならない */
}
#page-top::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
  width: 15px;
  border-top: solid 1px;
  transform: rotate(35deg);
  transform-origin: left top;
}
.r_floating { position: fixed; z-index: 1500; right: 0; top: 20%; }
.r_floating li a { display: block; width: 110px; height: 110px; background-size: cover; }
.r_floating__btn.is-tel { background-image: url(../img/uploads/2025/05/3-4.webp); }
.r_floating__btn.is-web { background-image: url(../img/uploads/2025/05/2-2.webp); }
@media (max-width: 768px) {
  .r_floating { right: 0; left: 0; bottom: 0; top: auto; width: 100%; display: flex; justify-content: space-around; padding: 10px 0; }
  .r_floating li a { width: 180px; height: 60px; margin: 0 auto; }
  .r_floating__btn.is-tel { background-image: url(../img/uploads/2025/07/telbanner.webp); }
  .r_floating__btn.is-web { background-image: url(../img/uploads/2025/05/2-1.webp); }
  #page-top { bottom: 190px; }
}

/* ---------- 下層ヒーロー（写真＋暗幕＋白タイトル＋英字） ---------- */
.fs-hero {
  position: relative;
  min-height: 290px;
  background: center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}
.fs-hero__mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .03); }
.fs-hero__inner { position: relative; padding: 20px; }
.fs-hero__title { font-size: 50px; line-height: 1.4; letter-spacing: .08em; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.fs-hero__line { display: none; }
.fs-hero__en { font-size: 30px; letter-spacing: .12em; color: #fff; margin-top: 4px; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
@media (max-width: 768px) {
  .fs-hero { min-height: 150px; }
  .fs-hero__title { font-size: 30px; }
  .fs-hero__en { font-size: 21px; }
}

/* ---------- パンくず ---------- */
.fs-crumb { max-width: 1366px; margin: 0 auto; padding: 18px 94px 0; font-size: 13px; }
.fs-crumb__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fs-crumb a { color: #333; }
.fs-crumb a:hover { color: var(--fs-primary); }
.fs-crumb span { color: var(--fs-primary); font-size: 16px; line-height: 1; }
.fs-crumb em { font-style: normal; color: #555; }
@media (max-width: 768px) {
  .fs-crumb { padding: 20px 15px 0; font-size: 15px; }
}

/* ---------- SPメニュー：下層ページ版（TOPは上の全画面パネル）----------
   本番の下層ページ：ヘッダーに teal の3本線（背景なし）→ タップで左から画面幅80%のパネル（見出し「Main Menu」）＋右に暗幕 */
.global-navigation__title { display: none; }
@media (max-width: 768px) {
  body:not(.is-top) .hamburger { position: absolute; top: 16px; right: 15px; width: 30px; height: 30px; background: transparent; z-index: 10000; }
  body:not(.is-top) .hamburger.-active { position: fixed; }
  body:not(.is-top) .hamburger__text { display: none; }
  body:not(.is-top) .hamburger__line, body:not(.is-top) .hamburger__line::before, body:not(.is-top) .hamburger__line::after {
    width: 30px; height: 3px; border-radius: 3px; background-color: var(--fs-primary);
  }
  body:not(.is-top) .hamburger__line { top: 14px; left: 0; transform: none; }
  body:not(.is-top) .hamburger__line::before { top: -10px; }
  body:not(.is-top) .hamburger__line::after { top: 10px; }
  /* 開いても3本線のまま（色だけ濃くなる） */
  body:not(.is-top) .hamburger.-active .hamburger__line, body:not(.is-top) .hamburger.-active .hamburger__line::before, body:not(.is-top) .hamburger.-active .hamburger__line::after { background-color: var(--fs-primary-dark); }
  body:not(.is-top) .hamburger.-active .hamburger__line::before { transform: none; top: -10px; }
  body:not(.is-top) .hamburger.-active .hamburger__line::after { transform: none; top: 10px; }
  /* 暗幕＋左からのパネル */
  body:not(.is-top) .header__nav-area {
    left: 0; padding-top: 0; background: rgba(0, 0, 0, .3); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
  }
  body:not(.is-top) .header__nav-area.-active { opacity: 1; visibility: visible; }
  body:not(.is-top) .global-navigation {
    width: 80%; height: 100%; padding: 0; overflow-y: auto; background: var(--fs-primary-light);
    transform: translateX(-100%); transition: transform .35s ease;
  }
  body:not(.is-top) .header__nav-area.-active .global-navigation { transform: translateX(0); }
  body:not(.is-top) .global-navigation__title { display: block; margin: 0; padding: 10px; text-align: center; color: #fff; font-size: 16px; line-height: 1.6; border-bottom: 1px solid rgba(255, 255, 255, .3); }
  body:not(.is-top) .global-navigation__list > li { padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .3); }
  body:not(.is-top) .global-navigation__list > li + li { margin-top: 0; }
  body:not(.is-top) .global-navigation__link { padding: 14px 20px; font-size: 17px; line-height: 1.6; }
  body:not(.is-top) .global-navigation__link.-accordion { padding: 14px 20px; width: 100%; }
  /* 「＋」ではなく「›」 */
  body:not(.is-top) .global-navigation__link.-accordion::before { content: none; }
  body:not(.is-top) .global-navigation__link.-accordion::after {
    width: 9px; height: 9px; right: 28px; top: 50%; background: none;
    border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translateY(-50%) rotate(45deg);
  }
  body:not(.is-top) .global-navigation__link.-active::after { transform: translateY(-70%) rotate(135deg); }
  body:not(.is-top) .accordion.-active { padding: 0 0 8px; background: rgba(255, 255, 255, .12); }
  body:not(.is-top) .accordion__list li + li { margin-top: 0; }
  body:not(.is-top) .accordion__link { display: block; padding: 11px 20px 11px 36px; font-size: 16px; }
}

/* TOP のフッター「診療時間」は本番どおり 18px（下層ページは 20px / SP 17px） */
.is-top .footer-schedule h3 { font-size: 18px; }
@media (max-width: 768px) { .is-top .footer-schedule h3 { font-size: 18px; } }