@charset "utf-8";
/*
 * ヘッダー・メニュー・レスポンシブ（全ページ共通）。common/inc/header.html とセット。
 * 既存の base.css / reset.css の固定幅（960px）を、ここで画面幅に合わせて伸び縮みするように上書きする。
 */

/* ===== レスポンシブの土台 =====
 * 古い CSS の境目（768/769px）を 979/980px に上げてある。979px 以下は伸び縮みするタブレット・スマホ用レイアウト、
 * 980px 以上は 960px 幅の PC レイアウト。 */
@media screen and (min-width: 980px) {
  html, body { min-width: 0 !important; }
  .widthfix { width: auto !important; max-width: 960px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
  img { max-width: 100%; }
}
@media screen and (min-width: 980px) and (max-width: 1000px) {
  .widthfix { padding-left: 16px; padding-right: 16px; }
  #headerArea .inner.widthfix { padding-left: 0; padding-right: 0; }
}

/* ===== PC：グローバルメニュー＋診療内容のサブメニュー ===== */
.ldc-burger, .ldc-spnav { display: none; }

@media screen and (min-width: 980px) {
  /* ヘッダーの position（下層は fixed）は元の CSS のまま。サブメニューの重なり順だけ指定 */
  #headerArea { z-index: 1000; }
  #headerArea.fixed { z-index: 99999; }
  #headerArea .inner.widthfix { position: relative; }
  /* li を基準にせず、ヘッダー幅いっぱいにサブメニューを出すため */
  #headerArea .inner.widthfix #gnav .list.cf > li.has-sub { position: static; }
  #headerArea .inner.widthfix #gnav .list.cf > li > a { position: relative; height: 100%; }

  .gn-sub {
    position: absolute; left: 0; right: 0; top: 100%;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s;
    text-align: left; cursor: default; z-index: 1000;
  }
  #gnav .has-sub:hover .gn-sub,
  #gnav .has-sub:focus-within .gn-sub { opacity: 1; visibility: visible; transform: none; }
  #gnav .has-sub:hover > a { background-color: rgba(255, 255, 255, .12); }

  .gn-sub-inner {
    display: flex; gap: 32px;
    padding: 30px 32px 32px;
    background: linear-gradient(135deg, rgba(10, 58, 63, .97), rgba(0, 104, 114, .96));
    border-top: 3px solid #f5d066;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
    color: #fff;
  }
  .gn-sub-head { flex: 0 0 210px; padding-right: 28px; border-right: 1px solid rgba(255, 255, 255, .2); }
  .gn-sub-head .en { font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 34px; letter-spacing: .12em; line-height: 1; }
  .gn-sub-head .ja { margin-top: 8px; font-size: 14px; letter-spacing: .2em; color: #f5d066; font-weight: bold; }
  .gn-sub-head .txt { margin: 16px 0 20px; font-size: 12px; line-height: 1.9; color: rgba(255, 255, 255, .85); }
  #headerArea .inner.widthfix #gnav .list.cf .gn-sub .gn-sub-head .all {
    position: relative; display: inline-block; width: auto; height: auto; left: auto; top: auto; padding: 9px 34px 9px 16px;
    border: 1px solid rgba(255, 255, 255, .6); color: #fff; font-size: 13px; text-decoration: none;
    transition: background-color .2s, color .2s;
  }
  #headerArea .inner.widthfix #gnav .list.cf .gn-sub .gn-sub-head .all::after { content: "\f105"; font-family: FontAwesome; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
  #headerArea .inner.widthfix #gnav .list.cf .gn-sub .gn-sub-head .all:hover { background: #f5d066; color: #26231c; border-color: #f5d066; }

  .gn-sub-list { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 14px; align-content: start; }
  #headerArea .inner.widthfix #gnav .list.cf .gn-sub .gn-sub-list li { float: none; width: auto; height: auto; border: 0; position: static; }
  #headerArea .inner.widthfix #gnav .list.cf .gn-sub .gn-sub-list a {
    position: static; width: auto; height: auto;
    display: flex; align-items: center; gap: 12px; padding: 6px 8px;
    color: #fff; text-decoration: none; font-size: 14px; line-height: 1.4; letter-spacing: .03em;
    border-radius: 3px; transition: background-color .2s, color .2s;
  }
  #headerArea .inner.widthfix #gnav .list.cf .gn-sub .gn-sub-list img {
    position: static; top: auto; flex: 0 0 64px; width: 64px; height: 44px; object-fit: cover;
    border-radius: 2px; opacity: .9; transition: opacity .2s;
  }
  #headerArea .inner.widthfix #gnav .list.cf .gn-sub .gn-sub-list a:hover { background: rgba(255, 255, 255, .1); color: #f5d066; }
  #headerArea .inner.widthfix #gnav .list.cf .gn-sub .gn-sub-list a:hover img { opacity: 1; }
}

/* ===== スマホ・タブレット（979px 以下）：バーガーボタン＋全画面メニュー ===== */
@media screen and (max-width: 979px) {
  #headerArea .inner.widthfix #gnav .list.pc.cf { display: none !important; }

  .ldc-burger {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    position: absolute; top: 0; right: 0; width: 80px; height: 80px;
    padding: 0; border: 0; cursor: pointer; color: #fff;
    background: #2f9ea7 url(../img/gnav_btn_bg.gif) repeat left top;
    -webkit-tap-highlight-color: transparent;
  }
  .ldc-burger .bars { position: relative; display: block; width: 30px; height: 20px; }
  .ldc-burger .bars i {
    position: absolute; left: 0; width: 100%; height: 3px; border-radius: 2px; background: #fff;
    transition: transform .25s, opacity .2s, top .25s;
  }
  .ldc-burger .bars i:nth-child(1) { top: 0; }
  .ldc-burger .bars i:nth-child(2) { top: 8.5px; }
  .ldc-burger .bars i:nth-child(3) { top: 17px; }
  .ldc-nav-open .ldc-burger .bars i:nth-child(1) { top: 8.5px; transform: rotate(45deg); }
  .ldc-nav-open .ldc-burger .bars i:nth-child(2) { opacity: 0; }
  .ldc-nav-open .ldc-burger .bars i:nth-child(3) { top: 8.5px; transform: rotate(-45deg); }
  .ldc-burger .lbl { font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 11px; letter-spacing: .12em; line-height: 1; }

  .ldc-spnav {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; top: 80px; z-index: 99998;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    background: linear-gradient(160deg, #0a3a3f 0%, #00636c 100%);
    color: #fff;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  .ldc-nav-open .ldc-spnav { opacity: 1; visibility: visible; transform: none; }
  html.ldc-nav-open, html.ldc-nav-open body { overflow: hidden; }
  html.ldc-nav-open #headerArea { z-index: 99999; }

  .ldc-spnav-body { padding: 8px 20px 40px; border-top: 3px solid #f5d066; }
  .ldc-spnav-main li { border-bottom: 1px solid rgba(255, 255, 255, .18); }
  .ldc-spnav-main a {
    position: relative; display: block; padding: 16px 30px 16px 0;
    color: #fff; text-decoration: none; font-size: 17px; font-weight: bold; letter-spacing: .08em;
  }
  .ldc-spnav-main a::after { content: "\f105"; font-family: FontAwesome; font-weight: normal; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: #f5d066; }
  .ldc-spnav-main .en { display: block; margin-bottom: 2px; font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 400; font-size: 11px; letter-spacing: .25em; color: #f5d066; }

  .ldc-spnav-svc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 0 18px; border-bottom: 1px solid rgba(255, 255, 255, .18); }
  .ldc-spnav-svc a {
    display: flex; align-items: center; min-height: 44px; padding: 8px 10px 8px 12px; box-sizing: border-box;
    background: rgba(255, 255, 255, .08); border-left: 3px solid #00a0ad;
    color: #fff; text-decoration: none; font-size: 13px; line-height: 1.4;
  }
  .ldc-spnav-svc a:active { background: rgba(255, 255, 255, .18); }

  .ldc-spnav-cta { display: flex; gap: 10px; margin: 24px 0 16px; }
  .ldc-spnav-cta a {
    flex: 1; display: block; padding: 14px 8px; text-align: center; border-radius: 4px;
    color: #fff; text-decoration: none; font-size: 15px; font-weight: bold;
  }
  .ldc-spnav-cta .tel { background: #f0b100; }
  .ldc-spnav-cta .web { background: #e2583f; }
  .ldc-spnav-info { font-size: 12px; line-height: 1.8; color: rgba(255, 255, 255, .8); text-align: center; }
}
@media screen and (max-width: 480px) {
  .ldc-burger { width: 55px; height: 55px; gap: 4px; }
  .ldc-burger .bars { width: 24px; height: 16px; }
  .ldc-burger .bars i { height: 2px; }
  .ldc-burger .bars i:nth-child(2) { top: 7px; }
  .ldc-burger .bars i:nth-child(3) { top: 14px; }
  .ldc-nav-open .ldc-burger .bars i:nth-child(1),
  .ldc-nav-open .ldc-burger .bars i:nth-child(3) { top: 7px; }
  .ldc-burger .lbl { font-size: 9px; }
  .ldc-spnav { top: 55px; }
}

/* ===== 下層ページの大見出し（h1：画像→テキスト） ===== */
#wrapper h1.ldc-pagettl { text-align: center; margin: 10px 0 44px; line-height: 1; }
h1.ldc-pagettl .en {
  display: block;
  font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 500;
  font-size: 44px; letter-spacing: .14em; color: #26231c;
}
h1.ldc-pagettl .ja { display: block; margin-top: 10px; font-size: 14px; letter-spacing: .3em; color: #00838e; font-weight: bold; }
h1.ldc-pagettl::after {
  content: ""; display: block; width: 44px; height: 3px; margin: 18px auto 0;
  background: #00a0ad;
}
@media screen and (max-width: 979px) {
  #wrapper h1.ldc-pagettl { margin-bottom: 30px; }
  h1.ldc-pagettl .en { font-size: 32px; }
  h1.ldc-pagettl .ja { font-size: 13px; }
}

/* ===== 本文の幅：大きい画面では 1160px まで広げる ===== */
@media screen and (min-width: 1200px) {
  .widthfix { max-width: 1160px; }
}

/* ===== PC メニュー4項目（コラム追加）に合わせた幅の配分 ===== */
@media screen and (min-width: 980px) {
  #headerArea .inner.widthfix .logo { width: 25%; }
  #headerArea .inner.widthfix #gnav { width: 49%; }
  #headerArea .inner.widthfix #gnav .list.cf .nav01 { width: 24%; }
  #headerArea .inner.widthfix #gnav .list.cf .nav02 { width: 21%; }
  #headerArea .inner.widthfix #gnav .list.cf .nav03 { width: 33%; border-right: solid 1px #00a1ae; }
  #headerArea .inner.widthfix #gnav .list.cf .nav04 { width: 21%; }
  #headerArea .inner.widthfix .logo img { max-width: 100%; height: auto; }
}

/* ===== フッター（全ページ共通・common/inc/footer.html） ===== */
#footerArea.ldc-footer { position: relative; background: #0b3337; color: rgba(255, 255, 255, .88); padding: 0; margin: 0; }
.ldc-footer a { color: inherit; text-decoration: none; }

/* 予約の帯 */
.ldc-fcta { background: linear-gradient(120deg, #00838e 0%, #00a0ad 60%, #2bb3bd 100%); color: #fff; }
.ldc-fcta .widthfix { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-top: 44px; padding-bottom: 44px; }
.ldc-fcta .en { font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: .35em; color: #f5d066; }
.ldc-fcta .ttl { margin: 6px 0 4px; font-size: 26px; font-weight: bold; letter-spacing: .06em; }
.ldc-fcta .sub { font-size: 14px; opacity: .9; }
.ldc-fcta-btns { display: flex; gap: 12px; flex-shrink: 0; }
.ldc-fcta-btns a {
  display: flex; align-items: center; gap: 12px; min-width: 250px; padding: 14px 22px; border-radius: 4px;
  font-size: 24px; font-weight: bold; line-height: 1.15; transition: transform .2s, box-shadow .2s;
}
.ldc-fcta-btns a:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .18); }
.ldc-fcta-btns i { font-size: 26px; }
.ldc-fcta-btns small { display: block; font-size: 11px; font-weight: normal; opacity: .85; }
.ldc-footer .ldc-fcta-btns .tel { background: #f0b100; color: #fff; font-family: "Oswald", "Arial Narrow", sans-serif; letter-spacing: .03em; }
.ldc-footer .ldc-fcta-btns .tel small { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; color: rgba(255, 255, 255, .9); }
.ldc-footer .ldc-fcta-btns .web { background: #e2583f; color: #fff; }

/* 本体 */
.ldc-fmain { padding: 60px 0 50px; }
.ldc-fgrid { display: grid; grid-template-columns: 1.25fr 1.35fr .8fr 1.2fr; gap: 40px; }
.ldc-flogo img { width: 220px; height: auto; }
.ldc-fclinic .name { margin: 14px 0 10px; font-size: 16px; font-weight: bold; color: #fff; }
.ldc-fclinic address { font-style: normal; font-size: 13px; line-height: 1.9; }
.ldc-fclinic address a { font-family: "Oswald", sans-serif; font-size: 18px; color: #fff; letter-spacing: .04em; }
.ldc-fclinic .sns { margin-top: 14px; }
.ldc-fclinic .sns a { display: inline-block; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; font-size: 13px; transition: background .2s; }
.ldc-fclinic .sns a:hover { background: rgba(255, 255, 255, .12); }
.ldc-footer .hd { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .18); font-family: "Oswald", sans-serif; font-size: 15px; letter-spacing: .25em; color: #f5d066; }
.ldc-footer .hd span { margin-left: 10px; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 11px; letter-spacing: .1em; color: rgba(255, 255, 255, .7); }
.ldc-fnav ul.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.ldc-fnav li a { position: relative; display: block; padding: 5px 0 5px 14px; font-size: 13px; line-height: 1.5; transition: color .2s; }
.ldc-fnav li a::before { content: "\f105"; font-family: FontAwesome; position: absolute; left: 0; color: #2bb3bd; }
.ldc-fnav li a:hover { color: #f5d066; }
.ldc-fhours table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: center; }
.ldc-fhours th, .ldc-fhours td { padding: 7px 2px; border-bottom: 1px solid rgba(255, 255, 255, .14); font-weight: normal; }
.ldc-fhours tr:first-child th { color: rgba(255, 255, 255, .7); }
.ldc-fhours td { color: #2bc4cf; }
.ldc-fhours td.x { color: rgba(255, 255, 255, .4); }
.ldc-fhours tr th:first-child { text-align: left; white-space: nowrap; font-family: "Oswald", sans-serif; letter-spacing: .03em; }
.ldc-fhours .note { margin-top: 10px; font-size: 12px; color: #f5d066; }

.ldc-fcopy { padding: 18px 16px; text-align: center; font-size: 11px; letter-spacing: .12em; color: rgba(255, 255, 255, .55); background: #082629; font-family: "Oswald", sans-serif; }

/* ページ先頭へ */
.ldc-footer #pageTop {
  position: fixed; right: 18px; bottom: 18px; z-index: 900; width: 48px; height: 48px; margin: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(10, 58, 63, .9); color: #fff; font-size: 24px; box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}
.ldc-footer #pageTop span { display: none; }

/* スマホの固定ボタン（電話・WEB予約） */
.ldc-spbar { display: none; }

@media screen and (max-width: 979px) {
  .ldc-fcta .widthfix { flex-direction: column; align-items: stretch; text-align: center; gap: 18px; padding: 34px 16px; }
  .ldc-fcta .ttl { font-size: 20px; }
  .ldc-fcta-btns { flex-direction: column; }
  .ldc-fcta-btns a { min-width: 0; justify-content: center; font-size: 22px; }
  .ldc-fmain { padding: 40px 0 30px; }
  .ldc-fgrid { grid-template-columns: 1fr; gap: 30px; padding: 0 20px; }
  .ldc-footer #pageTop { bottom: 70px; right: 12px; width: 42px; height: 42px; }

  .ldc-spbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; box-shadow: 0 -4px 14px rgba(0, 0, 0, .15); }
  .ldc-spbar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px; color: #fff; text-decoration: none; font-size: 15px; font-weight: bold; }
  .ldc-spbar .tel { background: #f0b100; }
  .ldc-spbar .web { background: #e2583f; }
  .ldc-spbar i { font-size: 18px; }
  body { padding-bottom: 54px; }
  .ldc-nav-open .ldc-spbar { display: none; }
}

/* ===== ヘッダーの WEB予約ボタン（PC）と、メニュー項目の幅の再配分 ===== */
.hd-web { display: none; }
@media screen and (min-width: 980px) {
  /* ロゴ 22% ＋ メニュー（48% − Instagram の 60px）＋ Instagram 60px ＋ WEB予約 13% ＋ 電話 17% ＝ 100% */
  #headerArea .inner.widthfix .logo { width: 22%; }
  #headerArea .inner.widthfix #gnav { width: calc(48% - 60px); }
  #headerArea .inner.widthfix .instagram { width: 60px; }
  #headerArea .inner.widthfix #gnav .list.cf .nav01 { width: 27%; }
  #headerArea .inner.widthfix #gnav .list.cf .nav02 { width: 24%; }
  #headerArea .inner.widthfix #gnav .list.cf .nav03 { width: 24%; }
  #headerArea .inner.widthfix #gnav .list.cf .nav04 { width: 24%; }
  #headerArea .inner.widthfix .tel { width: 17%; }
  #headerArea .inner.widthfix .tel img.pc { max-width: 90%; height: auto; }
  #headerArea .inner.widthfix .hd-web { display: block; float: left; width: 13%; height: 100%; }
  #headerArea .inner.widthfix .hd-web a {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%;
    background: #e2583f; color: #fff; text-decoration: none; font-weight: bold; font-size: 17px; line-height: 1.15;
    transition: background .2s;
  }
  #headerArea .inner.widthfix .hd-web a:hover { background: #c9472f; }
  #headerArea .inner.widthfix .hd-web i { font-size: 22px; }
  #headerArea .inner.widthfix .hd-web small { display: block; font-size: 10px; font-weight: normal; opacity: .9; }
}

/* ===== フッターの診療時間表：大きく読みやすく ===== */
@media screen and (min-width: 980px) {
  .ldc-fgrid { grid-template-columns: 1.15fr 1.25fr .7fr 1.6fr; gap: 36px; }
}
.ldc-fhours table { font-size: 15px; }
.ldc-fhours th, .ldc-fhours td { padding: 11px 3px; }
.ldc-fhours tr:first-child th { font-size: 14px; font-weight: bold; color: #fff; }
.ldc-fhours tr th:first-child { font-size: 16px; color: #fff; }
.ldc-fhours td { font-size: 17px; }
.ldc-fhours .note { margin-top: 12px; font-size: 14px; }

/* WebP 用に自動で付けている <picture>（common/inc/site.php の ldc_webp_filter）はレイアウトに影響させない */
picture { display: contents; }
picture > source { display: none; }