@charset "UTF-8";
/*
 * custom.css
 * 案件: 鈴蘭台おとなこども歯科・矯正歯科
 * 更新日: 2026-05-27
 * 既存style.cssは触らず、追加分のみここに記述。
 * 統合時はこの内容をstyle.cssにマージし、本ファイルとfunctions.phpのenqueueを削除する。
 *
 * 【注意】本番サーバーのファイルが最新です。
 * 編集する際は必ずサーバーのファイルをローカルに落としてから編集すること。
 * ローカルの古いファイルで上書きすると最新の変更が消えます。
 */

/* ===== Utility: クリック無効化 ===== */
.unlink {
  pointer-events: none;
  cursor: none;
}

/* ===== Footer: メニュー右の▶︎マーク非表示 ===== */
#footer .footer__menu dl dd ul li a::after {
  content: none;
}

/* ===== Global Nav: ドロップダウン位置調整（左ズレ修正） ===== */
@media screen and (min-width: 769px), print {
  #navimain .navimain__inner > ul > li > ul {
    left: 0;
    width: 100%;
  }
}

/* ===== Global Nav: 項目数増加対応で文字サイズ・余白縮小 ===== */
@media screen and (min-width: 769px), print {
  #navimain .navimain__inner > ul > li {
    font-size: 15px;
    letter-spacing: 0.05em;
  }
  #navimain .navimain__inner > ul > li + li::before {
    margin: 0 8px;
  }
}

/* ===== PC: グローバルナビの追従（固定）を無効化 ===== */
@media screen and (min-width: 769px), print {
  /* base.js が付与する .fixed の position:fixed を打ち消して通常スクロールに戻す */
  .navimain__inner.fixed {
    position: static !important;
  }
  /* base.js がインラインで付ける padding-top（固定時のスペース確保）を打ち消す */
  #navimain {
    padding-top: 0 !important;
  }
}

/* ===== TOP: OPEN 歯並び相談会ボックスを2行センタリング＋リンク化 ===== */
body.pTop .opening__sec--content .opening__soudan {
  text-decoration: none;
  color: inherit;
}
body.pTop .opening__sec--content dl {
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.5;
}
body.pTop .opening__sec--content dl dt {
  margin-right: 0;
}

/* カラーロゴは全ビューポートで初期非表示（SPでの白ロゴと二重表示を防ぐ） */
.header__main--logo .logo-color {
  display: none;
}

/* ===== PC: ヘッダー（ロゴ＋CTA）をスクロール追従＋ロゴ切替 ===== */
@media screen and (min-width: 769px), print {
  /* 追従固定（初期は背景透明・白ロゴ） */
  .header {
    position: fixed;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }
  /* PCでのカラーロゴ表示サイズ */
  .header__main--logo .logo-color {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  /* ヒーロー(=グロナビ直前)通過後：白背景＋カラーロゴ */
  body.header-scrolled .header {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  body.header-scrolled .header__main--logo .logo-white {
    display: none;
  }
  body.header-scrolled .header__main--logo .logo-color {
    display: block;
  }
}

/* ===== Single: EZ-TOC 目次を緑系コンパクトデザインに ===== */
body.pChild .content #ez-toc-container {
  background: #f0f9f5 !important;
  border: 1px solid #d4ebe2 !important;
  border-radius: 4px;
  padding: 12px 20px;
  margin: 28px auto;
  max-width: 720px;
  width: 100%;
  box-shadow: none;
}
body.pChild .content #ez-toc-container .ez-toc-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #d4ebe2;
  padding: 0 0 8px;
  margin: 0 0 8px;
}
body.pChild .content #ez-toc-container .ez-toc-title {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #4d4d4d !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  background: transparent !important;
}
body.pChild .content #ez-toc-container .ez-toc-title-toggle {
  position: static;
  margin-left: auto;
}
body.pChild .content #ez-toc-container .ez-toc-title-toggle .ez-toc-pull-right {
  color: #61baa3;
  font-size: 11px;
  text-decoration: none;
}
body.pChild .content #ez-toc-container nav {
  margin: 0;
}
body.pChild .content #ez-toc-container nav > ul {
  margin: 0;
  padding: 0;
}
body.pChild .content #ez-toc-container ul li {
  font-size: 16px !important;
  line-height: 1.7;
  padding: 4px 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
body.pChild .content #ez-toc-container ul li::before {
  content: none !important;
}
body.pChild .content #ez-toc-container ul ul {
  padding-left: 20px !important;
  margin: 2px 0 !important;
}
body.pChild .content #ez-toc-container .ez-toc-link {
  color: #4d4d4d !important;
  text-decoration: none !important;
  font-weight: 400;
  font-size: 16px !important;
  line-height: 1.7 !important;
}
body.pChild .content #ez-toc-container .ez-toc-link:hover {
  color: #61baa3 !important;
}
body.pChild .content #ez-toc-container.counter-hierarchy ul li a::before,
body.pChild .content #ez-toc-container.ez-toc-counter nav ul li a::before {
  display: inline-block;
  min-width: 20px;
  text-align: center;
  background: #61baa3;
  color: #fff !important;
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
  margin-right: 8px;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  body.pChild .content #ez-toc-container {
    padding: 10px 14px;
    margin: 20px auto;
  }
  body.pChild .content #ez-toc-container .ez-toc-title {
    font-size: 15px !important;
  }
  body.pChild .content #ez-toc-container ul li {
    font-size: 15px !important;
  }
  body.pChild .content #ez-toc-container .ez-toc-link {
    font-size: 15px !important;
  }
  body.pChild .content #ez-toc-container ul ul {
    padding-left: 16px !important;
  }
}

/* ===== Single/Page: ヒーロータイトルとパンクズのサイズ縮小 ===== */
@media screen and (min-width: 769px), print {
  body.pChild .fv__title h1 {
    font-size: 36px;
  }
  body.pChild .breadcrum {
    padding: 24px 0 0;
  }
  body.pChild .breadcrum__main ul li {
    font-size: 14px;
    line-height: 1.5;
  }
}
@media screen and (max-width: 768px) {
  body.pChild .fv__title h1 {
    font-size: 22px;
    line-height: 1.4;
  }
  body.pChild .breadcrum__main ul {
    overflow: visible;
  }
  body.pChild .breadcrum__main ul li {
    font-size: 12px;
    white-space: normal;
  }
}

/* ===== Content: 全ページ本文の見出し・テキストサイズ階層整理＋余白統一 ===== */
@media screen and (min-width: 769px), print {
  .pChild .pChild__main .content h2 {
    font-size: 36px;
    margin: 56px 0 24px;
  }
  .pChild .pChild__main .content h3 {
    font-size: 28px;
    margin: 40px 0 20px;
  }
  .pChild .pChild__main .content h3::before {
    height: 100%;
    top: 0;
  }
  .pChild .pChild__main .content h4 {
    font-size: 22px;
    margin: 32px 0 16px;
  }
  .pChild .pChild__main .content h5 {
    font-size: 18px;
    margin: 24px 0 12px;
  }
  .pChild .pChild__main .content p {
    margin: 16px 0;
  }
  .pChild .pChild__main .content .wp-block-table {
    margin: 32px 0 40px;
  }
  .pChild .pChild__main .content table th {
    font-size: 18px;
  }
}

/* ===== Content: テーブルセルを縦中央揃え（2行項目の隣セルの上寄り対策） ===== */
.pChild .pChild__main .content .wp-block-table td,
.pChild .pChild__main .content .wp-block-table th {
  vertical-align: middle;
}

@media screen and (max-width: 768px) {
  .pChild .pChild__main .content h2 {
    font-size: 24px;
    margin: 40px 0 16px;
  }
  .pChild .pChild__main .content h3 {
    font-size: 20px;
    margin: 32px 0 16px;
  }
  .pChild .pChild__main .content h4 {
    font-size: 18px;
    margin: 24px 0 12px;
  }
  .pChild .pChild__main .content h5 {
    font-size: 16px;
    margin: 20px 0 10px;
  }
  .pChild .pChild__main .content p {
    font-size: 16px;
    margin: 12px 0;
  }
  .pChild .pChild__main .content ul li,
  .pChild .pChild__main .content ol li {
    font-size: 16px;
  }
  .pChild .pChild__main .content ol li::before {
    font-size: 16px;
  }
  .pChild .pChild__main .content .wp-block-table {
    margin: 24px 0 32px;
  }
  .pChild .pChild__main .content table th {
    font-size: 16px;
  }
  .pChild .pChild__main .content table td {
    font-size: 16px;
  }
}

/* ===== 全体: 横スクロール抑制（TOPページSP右余白対策） =====
   html/body には付けない（height:100%と併用するとスクロールコンテナ化し
   window の scroll イベントが発火しなくなるため）。コンテナ側で抑制する。 */
.container {
  overflow-x: hidden;
}

/* ===== SP: OPEN背景をPC画像共通化に伴い、左右を切らずに全体表示 =====
   横長PC画像(約1.836:1)を coverで固定高すると左右が切れるため、
   フル幅・自然比で全体を見せる（医院外観が分かるように） */
@media screen and (max-width: 768px) {
  body.pTop .opening__sec > picture img {
    height: auto;
    width: 100%;
    object-fit: contain;
  }
  /* 黄緑セクションを写真下部への重ね配置から通常フローへ（下に移動・建物に被らない） */
  body.pTop .opening__sec--content {
    position: static;
  }
}

/* ===== SP: ヒーロー周辺の余白圧縮 ===== */
@media screen and (max-width: 768px) {
  body.pTop .fv__main {
    padding-top: 0;
    padding-bottom: 0;
  }
  body.pTop .fv__main--text {
    height: auto;
  }
}

/* ===== SP: フッターのサイトマップ非表示 ===== */
@media screen and (max-width: 768px) {
  #footer .footer__menu {
    display: none;
  }
}

/* ===== SP: ソーシャルバーを下部固定追従に変更 ===== */
@media screen and (max-width: 768px) {
  /* 親 .header__main--right の overflow:auto + height:0 から .social を解放 */
  body .header__main--right {
    overflow: visible !important;
  }
  /* .navi は通常時非表示、ハンバーガー開時のみ表示（社員ボタンとnavi表示分離） */
  body .header__main--right .navi {
    display: none;
  }
  body #nav.active .navi {
    display: block;
  }
  /* .social は常時下部固定追従 */
  body .header__main--right .social {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9998;
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16.26667vw;
  }
  body {
    padding-bottom: 16.26667vw;
  }
  /* ハンバーガーメニュー開いている時は非表示 */
  body #nav.active .social {
    display: none;
  }
}

/* ===== Content: table.special 左カラムをtdと同サイズに統一（横スクロール対策） ===== */
.pChild .pChild__main .content .wp-block-table.special table tr td:nth-of-type(1) {
  font-size: 16px;
}

/* ===== Content: media-text（画像右）テキスト列の幅確保 ===== */
@media screen and (min-width: 769px), print {
  .pChild .pChild__main .content .wp-block-media-text.has-media-on-the-right {
    grid-template-columns: 1fr 40% !important;
  }
  /* media-text 内コンテンツ先頭要素の margin-top をリセット（画像上辺と見出し上辺を揃える） */
  .pChild .pChild__main .content .wp-block-media-text__content > *:first-child {
    margin-top: 0;
  }
  /* WP標準の content padding 0 8% を打ち消し、画像との距離は column-gap で確保 */
  .pChild .pChild__main .content .wp-block-media-text {
    column-gap: 32px;
  }
  .pChild .pChild__main .content .wp-block-media-text__content {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ===== Content: SP時 media-text を強制縦並び（コンテンツ幅確保） ===== */
@media screen and (max-width: 768px) {
  .pChild .pChild__main .content .wp-block-media-text {
    grid-template-columns: 100% !important;
  }
}

/* ===== Content: スタッフ紹介(.doctor) 画像を全幅化＋名前枠を左側 ===== */
.pChild .pChild__main .content .wp-block-media-text.doctor {
  grid-template-columns: 100% 0 !important;
}
.pChild .pChild__main .content .doctor .wp-block-media-text__media img {
  width: 100%;
  height: auto;
}
.pChild .pChild__main .content .doctor .wp-block-media-text__content {
  left: 0;
  right: auto;
  width: 30%;
  padding-left: 5%;
}
@media screen and (max-width: 768px) {
  .pChild .pChild__main .content .doctor .wp-block-media-text__content {
    width: 50%;
    padding-left: 5%;
  }
  .pChild .pChild__main .content .doctor .wp-block-media-text__content p {
    white-space: nowrap;
  }
}

/* ===== Content: has-background指定リストにグレー長方形装飾 ===== */
/* マーカー本体は style.css 既存（ul=緑丸 / ol=01.連番）を維持 */
.pChild .pChild__main .content ul.wp-block-list.has-background,
.pChild .pChild__main .content ol.wp-block-list.has-background {
  padding: 24px 32px;
  border-radius: 4px;
  margin: 24px 0;
}
@media screen and (max-width: 768px) {
  .pChild .pChild__main .content ul.wp-block-list.has-background,
  .pChild .pChild__main .content ol.wp-block-list.has-background {
    padding: 4vw 5vw;
  }
}

/* ===== Single: 投稿ヒーロータイトル 横幅70%・サイズ縮小（横広がり抑制） ===== */
@media screen and (min-width: 769px), print {
  body.pChild .fv__title h1.post-title {
    max-width: 70%;
    font-size: 30px;
  }
}
@media screen and (max-width: 768px) {
  body.pChild .fv__title h1.post-title {
    font-size: 20px;
  }
}

/* ===== Content: 画像ブロック(wp-block-image)の上下余白を圧縮 ===== */
@media screen and (min-width: 769px), print {
  .pChild .pChild__main .content figure.wp-block-image {
    margin: 24px 0 40px;
  }
}
@media screen and (max-width: 768px) {
  .pChild .pChild__main .content figure.wp-block-image {
    margin: 4vw 0 6.4vw;
  }
}

/* ===== TOP: 開業キャンペーンバナー メイン文＋注釈サイズ調整 ===== */
/* 開業キャンペーンのリボンを枠に対してセンタリング（base のpadding-left:80px等を打ち消す） */
body.pTop .campaign a > span {
  width: calc(100% + 147px);
  margin-right: -147px;
  padding-left: 0;
  padding-right: 147px;
  justify-content: center;
}
/* 人物：頭が切れないよう上揃え、テキストと重ならないよう右端側へ寄せる */
body.pTop .campaign a::after {
  background-position: 90% top;
}
@media screen and (min-width: 769px), print {
  body.pTop .campaign a em {
    font-size: 28px;
  }
  /* 77万の後ろの（税込）は小さく＆詰める（base span のpadding/width/marginを打ち消す） */
  body.pTop .campaign a em .tax {
    background: transparent;
    width: auto;
    padding: 0;
    margin-right: 0;
    margin-left: -0.3em;
    font-size: 18px;
    letter-spacing: 0;
    color: #4d4d4d;
  }
  /* 精密診断費用¥22,000→無料（注釈の上） */
  body.pTop .campaign a em .spot {
    background: transparent;
    display: block;
    width: 100%;
    padding: 0;
    margin-right: 0;
    margin-top: 6px;
    text-align: center;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #4d4d4d;
  }
  body.pTop .campaign a em .spot s {
    color: #999;
    margin: 0 0.1em;
  }
  body.pTop .campaign a em .spot strong {
    color: #e0566a;
    font-weight: 700;
    margin-left: 0.1em;
  }
  /* ※検査から保定まで込 は改行して約半分サイズ＋センタリング */
  body.pTop .campaign a em .note {
    background: transparent;
    display: block;
    width: 100%;
    padding: 0;
    margin-right: 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.05em;
    margin-top: 2px;
    color: #4d4d4d;
  }
}
@media screen and (max-width: 768px) {
  body.pTop .campaign a em {
    font-size: 3.73333vw;
  }
  body.pTop .campaign a em .tax {
    background: transparent;
    width: auto;
    padding: 0;
    margin-right: 0;
    margin-left: -0.3em;
    font-size: 2.66667vw;
    letter-spacing: 0;
    color: #4d4d4d;
  }
  body.pTop .campaign a em .spot {
    background: transparent;
    display: block;
    width: 100%;
    padding: 0;
    margin-right: 0;
    margin-top: 1vw;
    text-align: center;
    font-size: 2.66667vw;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #4d4d4d;
  }
  body.pTop .campaign a em .spot s {
    color: #999;
    margin: 0 0.1em;
  }
  body.pTop .campaign a em .spot strong {
    color: #e0566a;
    font-weight: 700;
    margin-left: 0.1em;
  }
  body.pTop .campaign a em .note {
    background: transparent;
    display: block;
    width: 100%;
    padding: 0;
    margin-right: 0;
    text-align: center;
    font-size: 2vw;
    line-height: 1.4;
    letter-spacing: 0.05em;
    margin-top: 0.5vw;
    color: #4d4d4d;
  }
}