/* ==========================================================================
   custom.css - 相生おとなこども矯正歯科 追加スタイル
   更新日: 2026-06-08
   ※ メインの style.css は直接編集しない。追記はこのファイルに行う。
   ========================================================================== */

/* --------------------------------------------------------------------------
   クリック無効化ユーティリティ
   公開前ページ・ドロップダウン親リンクなどに class="unlink" を付与
   -------------------------------------------------------------------------- */
.unlink {
  pointer-events: none;
  cursor: default;
}

/* --------------------------------------------------------------------------
   TOP teeth-box（アクティビティ）
   見出し「当院のアクティビティトレーニングについて」下の説明文を少し右へ
   ※SP(≤768px)は既存style.cssで別指定があるためPC(≥769px)のみに限定
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  .teeth-box .teeth-box__main--txt p {
    padding-left: 3rem;
  }
}

/* --------------------------------------------------------------------------
   TOP wait-box（様子見セクション）写真位置調整
   写真は元々ビューポート基準(left:18rem)、テキストは中央寄せコンテナ基準のため
   画面幅で重なり位置がズレて子どもの顔に文字が被る。
   calcで写真をコンテナ左端基準に追従させ、子どもを左へ逃がす（幅非依存）。
   ※SP(≤768px)は別途centered指定があるためPC(≥769px)のみに限定
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  section.wait-box::after {
    left: calc((100% - 111rem) / 2 - 14rem);
  }
}

/* --------------------------------------------------------------------------
   TOP open-box（JR相生駅すぐ）開業告知＋Googleマップ埋め込み
   元の open.webp は「左:開業告知＋無料相談会／右:静止地図」の1枚もの。
   告知部分だけ open-info.webp（SP:open-info_sp.webp）に切り出して残し、
   地図部分のみライブの iframe に差し替え。
   PCは告知画像と地図を横並び（高さ47rem＝元画像比率）、SPは縦積み。
   -------------------------------------------------------------------------- */
.open-box__info img {
  display: block;
}
.open-box__map iframe {
  display: block;
  width: 100%;
  border: 0;
}
@media (min-width: 769px) {
  .open-box__main {
    display: flex;
    align-items: stretch;
  }
  .open-box__info {
    flex: 0 0 auto;
  }
  .open-box__info img {
    height: 47rem;
    width: auto;
  }
  .open-box__map {
    flex: 1 1 auto;
  }
  .open-box__map iframe {
    height: 47rem;
  }
}
@media (max-width: 768px) {
  .open-box__info img {
    width: 100%;
    height: auto;
  }
  .open-box__map {
    margin-top: 3rem;
  }
  .open-box__map iframe {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* --------------------------------------------------------------------------
   フッター clinic-box の住所＆予約ボタンを脱・画像化
   ・ロゴは画像（住所バーを切り落とした logo-clinic-name.webp）
   ・住所はプレーンテキスト（既存と同じベージュバー #c3b795 をCSSで再現）
   ・電話／WEB予約ボタンは btn-*.webp をやめ、SVGアイコン＋テキストで実装
     tel.svg(#de9289) / cal.svg(#fff)。矢印はCSS三角形。
   -------------------------------------------------------------------------- */
.clinic-box__address {
  width: 100%;
  max-width: 55.4rem;
  margin: 0 auto;
  background: #c3b795;
  color: #fff;
  text-align: center;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  padding: 1rem 1.5rem;
}
/* ===== 予約ボタン共通 .cbtn（フッター／ヘッダー／フローティング共用）=====
   構造・配色・矢印は共通。各設置場所はサイズ差分だけを下で指定。 */
.cbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  position: relative;
  border-radius: 10rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}
.cbtn__icon {
  flex: 0 0 auto;
}
.cbtn::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
}
.cbtn--tel {
  background: #fff;
  border: 2px solid #de9289;
  color: #de9289;
}
.cbtn--tel::after {
  border-left-color: #de9289;
}
.cbtn--web {
  background: #de9289;
  border: 2px solid #de9289;
  color: #fff;
}
.cbtn--web::after {
  border-left-color: #fff;
}
/* テーマの汎用 a{color} 等に負けないよう、テキスト色を明示固定 */
.cbtn--tel .cbtn__label,
.cbtn--tel .cbtn__num {
  color: #de9289;
}
.cbtn--web .cbtn__label,
.cbtn--web .cbtn__num {
  color: #fff;
}
/* 単一行ラベル（ヘッダー／フッター）：ラベルと数字をベースラインでなく縦中央で揃える
   ※フローティングは2行構成のため対象外 */
.header__main--right .cbtn__label,
.clinic-box__main--btn .cbtn__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* フッター clinic-box（PC2列／SP1列・既存グリッドのまま）*/
.clinic-box__main--btn .cbtn {
  padding: 2rem 4rem;
  font-size: 2.4rem;
}
.clinic-box__main--btn .cbtn__icon {
  width: 2.8rem;
  height: 2.8rem;
}
.clinic-box__main--btn .cbtn__num {
  font-size: 3.2rem;
}
.clinic-box__main--btn .cbtn::after {
  right: 3rem;
  border-width: 0.7rem 0 0.7rem 1.1rem;
}

/* ヘッダー右の電話ボタン（PC専用・36remカラム。隣のWEB予約は画像のまま）*/
.header__main--right .cbtn {
  width: 100%;
  height: 6rem;
  padding: 0 1.2rem;
  gap: 0.6rem;
  font-size: 1.8rem;
  letter-spacing: 0;
}
.header__main--right .cbtn__icon {
  width: 2.7rem;
  height: 2.7rem;
}
.header__main--right .cbtn__num {
  font-size: 2.9rem;
  position: relative;
  top: -0.2rem;
}
.header__main--right .cbtn::after {
  right: 1.3rem;
  border-width: 0.6rem 0 0.6rem 1rem;
}

/* --------------------------------------------------------------------------
   SP追従バー：3分割の長方形ボタン（求人情報／矯正相談(LINE)／WEB予約）
   旧・角丸cbtn構成を廃止し、端から端まで等幅3分割の長方形に。
   求人=ゴールド #c3b795 ／ 矯正相談=LINEグリーン #06c755 ／ WEB予約=ピンク #de9289。
   -------------------------------------------------------------------------- */
.floating-box {
  padding: 0;
}
.floating-box__main {
  gap: 0;
  justify-content: stretch;
  grid-template-columns: repeat(3, 1fr);
}
.fbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  height: 9rem;
  padding: 0.4rem 0.8rem;
  color: #fff;
  line-height: 1.2;
  text-align: center;
}
.fbtn + .fbtn {
  border-left: 1px solid rgba(255, 255, 255, 0.45);
}
.fbtn__icon {
  flex: 0 0 auto;
  width: 4.4rem;
  height: 4.4rem;
}
.fbtn__txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.fbtn__txt small {
  font-size: 2.2rem;
  font-weight: 500;
}
.fbtn__txt strong {
  font-size: 3.2rem;
  font-weight: 700;
}
.fbtn,
.fbtn .fbtn__txt small,
.fbtn .fbtn__txt strong {
  color: #fff;
}
.fbtn--recruit {
  background: #c3b795;
}
.fbtn--line {
  background: #06c755;
}
.fbtn--line .fbtn__icon {
  width: 5.6rem;
  height: 5.6rem;
}
.fbtn--web {
  background: #de9289;
}

@media (max-width: 768px) {
  .clinic-box__address {
    max-width: 65rem;
    font-size: 3rem;
  }
  .clinic-box__main--btn .cbtn {
    font-size: 3rem;
    padding: 2.6rem;
  }
  .clinic-box__main--btn .cbtn__num {
    font-size: 3.4rem;
  }
  .clinic-box__main--btn .cbtn__icon {
    width: 3.4rem;
    height: 3.4rem;
  }
}

/* --------------------------------------------------------------------------
   フッター clinic-box の診療時間表を脱・画像化（calenda.webp → HTMLテーブル）
   曜日×午前/午後の○×グリッド。ヘッダー行はグレー背景・白文字。
   実データ：月=午後のみ／火水金土=午前午後／木・日=休診。
   -------------------------------------------------------------------------- */
.hours-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid #d1d1d1;
}
.hours-table th,
.hours-table td {
  border: 1px solid #d1d1d1;
  text-align: center;
  vertical-align: middle;
  padding: 1.1rem 0.3rem;
  font-size: 1.8rem;
  line-height: 1.4;
  color: var(--text-color);
}
.hours-table thead th {
  background: grey;
  color: #fff;
  font-weight: 700;
}
.hours-table tbody th {
  font-weight: 500;
  white-space: nowrap;
}
.hours-table th:first-child,
.hours-table td:first-child {
  width: 30%;
}
.hours-table__note {
  margin: 1.2rem 0 0;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--text-color);
}
@media (max-width: 768px) {
  .hours-table th,
  .hours-table td {
    font-size: 2.6rem;
    padding: 1.4rem 0.2rem;
  }
  .hours-table__note {
    font-size: 2.2rem;
  }
}

/* --------------------------------------------------------------------------
   投稿一覧（archive）／投稿詳細（single）の右サイドナビ（回遊強化・新規）
   .site-content__main.has-side を2カラム化し、template-parts/sidebar.php の
   CATEGORY / POPULAR / PAST ウィジェットを右に並べる。
   ・PC(≥769px)：本文 flex:1 ＋ サイドバー 30rem 固定。一覧カードは2列に。
   ・SP(≤768px)：1カラム（本文の下にサイドバー）。
   配色はテーマ変数を流用（見出し・ドット=--background-loud / 矢印=--loud-color）。
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  .site-content__main.has-side {
    display: flex;
    align-items: flex-start;
    gap: 5rem;
  }
  .site-content__main.has-side > article {
    flex: 1 1 auto;
    min-width: 0;
  }
  .site-content__main.has-side > .side-box {
    flex: 0 0 30rem;
    width: 30rem;
  }
  /* サイドバーで本文幅が狭まるため、一覧カードは3列→2列へ */
  .site-content__main.has-side .list-post {
    grid-template-columns: repeat(2, 1fr);
    gap: 3.5rem;
  }
}

/* ウィジェット共通 */
.side-box {
  width: 100%;
}
.side-widget + .side-widget {
  margin-top: 4rem;
}
.side-widget__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  background: var(--background-loud);
  color: #fff;
  border-radius: 1rem;
  text-align: center;
  padding: 1.4rem 1rem;
  line-height: 1.2;
}
.side-widget__head .en {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.side-widget__head .ja {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.side-widget__body {
  padding: 1rem 0 0;
}

/* CATEGORY */
.side-cat li {
  border-bottom: 1px dashed #d8d8d8;
}
.side-cat li:last-child {
  border-bottom: none;
}
.side-cat li a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 0.3rem 1.4rem 0;
  color: var(--text-color);
  font-size: 1.7rem;
  line-height: 1.5;
}
.side-cat li a::before {
  content: '';
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--background-loud);
}
.side-cat li a::after {
  content: "\f0da";
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
  margin-left: auto;
  color: var(--loud-color);
}

/* POPULAR / PAST 記事リスト */
.side-posts li {
  border-bottom: 1px dashed #d8d8d8;
}
.side-posts li:last-child {
  border-bottom: none;
}
.side-posts li a {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.2rem;
  align-items: center;
  position: relative;
  padding: 1.5rem 1.8rem 1.5rem 0;
}
.side-posts li a::after {
  content: "\f0da";
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  color: var(--loud-color);
}
.side-posts figure {
  width: 7rem;
  height: 7rem;
  border-radius: 0.6rem;
  overflow: hidden;
}
.side-posts figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.side-posts .text h3 {
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--text-color);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.side-posts .text time {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.3rem;
  color: var(--loud-color);
}

@media (max-width: 768px) {
  .side-box {
    margin-top: 6rem;
  }
  .side-widget + .side-widget {
    margin-top: 5rem;
  }
  .side-widget__head .en {
    font-size: 3.6rem;
  }
  .side-widget__head .ja {
    font-size: 2.2rem;
  }
  .side-cat li a {
    font-size: 2.8rem;
    padding: 2rem 0.3rem 2rem 0;
  }
  .side-cat li a::before {
    width: 1.4rem;
    height: 1.4rem;
  }
  .side-posts li a {
    grid-template-columns: 11rem 1fr;
    gap: 1.8rem;
    padding: 2rem 2.4rem 2rem 0;
  }
  .side-posts figure {
    width: 11rem;
    height: 11rem;
  }
  .side-posts .text h3 {
    font-size: 2.7rem;
  }
  .side-posts .text time {
    font-size: 2.2rem;
  }
}

/* --------------------------------------------------------------------------
   治療費用ページ（/price/）のtabelsテーブル個別調整
   ・対象は class="tabels price-table" の表のみ（症例表など他の.tabelsには非適用）
   ・右列（金額）を右寄せ／テーブル幅をPCで80%・中央寄せ
   -------------------------------------------------------------------------- */
.page-inner .entry-content .tabels.price-table table td:last-child {
  text-align: right;
}
@media (min-width: 769px) {
  .page-inner .entry-content .tabels.price-table {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --------------------------------------------------------------------------
   フローティング（SP追従）LINE予約ボタン　※電話ボタンから差し替え
   LINEブランドグリーン #06C755。アイコン・文字・矢印は白。
   サイズ・レイアウトは既存の .floating-box__main .cbtn を流用。
   アイコンは images/line-icon.webp（公式LINEアイコンを別途配置）。
   -------------------------------------------------------------------------- */
.cbtn--line {
  background: #06C755;
  border: 2px solid #06C755;
  color: #fff;
}
.cbtn--line::after {
  border-left-color: #fff;
}
.cbtn--line .cbtn__label,
.cbtn--line .cbtn__num {
  color: #fff;
}

/* --------------------------------------------------------------------------
   TOP open-box の装飾オーバーレイがGoogleマップのクリックを奪う問題
   .open-box::before（open-thumb.webp）が幅100%・高さ100%・z-index:1で全面を覆い、
   透明部分も含めて下のiframe（地図）のクリック・操作を横取りしていた。
   装飾はそのまま、クリックだけ透過させて地図を操作可能にする。
   -------------------------------------------------------------------------- */
.open-box::before {
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   フッター clinic-box の予約ボタンを 電話・LINE・WEB予約 の3つ横並びに
   既存はPC2列（grid repeat(2,1fr)）。PCのみ3列化＋3つ収まるよう余白・文字を調整。
   SP（≤768px）は既存の1列縦積みのまま。
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  .clinic-box__main--btn {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
  }
  /* 右paddingを広めにして矢印スペースを確保（文字と三角形の重なり防止） */
  .clinic-box__main--btn .cbtn {
    padding: 1.8rem 3.4rem 1.8rem 1.8rem;
    font-size: 1.8rem;
  }
  .clinic-box__main--btn .cbtn__icon {
    width: 2.4rem;
    height: 2.4rem;
  }
  .clinic-box__main--btn .cbtn__num {
    font-size: 2.2rem;
  }
  .clinic-box__main--btn .cbtn::after {
    right: 1.4rem;
    border-width: 0.5rem 0 0.5rem 0.9rem;
  }
}

/* --------------------------------------------------------------------------
   グロナビ「医院案内」ドロップダウン（PCホバー展開）
   親liにhas-submenu、子に.submenu（医院情報/アクセス/新着情報/求人情報）。
   ※.nav-bar-menu ul は display:flex のため .submenu は flex-direction:column で縦並びに。
   -------------------------------------------------------------------------- */
/* バー自体を前面に＝サブメニューが後続セクションの下に潜らないように */
.nav-bar-menu {
  position: relative;
  z-index: 50;
}
.nav-bar-menu ul li.has-submenu {
  position: relative;
}
.nav-bar-menu ul li .submenu {
  display: none;
  position: absolute;
  top: calc(100% + 2rem);
  right: 0;
  left: auto;
  flex-direction: column;
  min-width: 15rem;
  width: max-content;
  background: #999;
  padding: 0;
  z-index: 999;
}
/* 親liとサブメニューの間（バー下padding分）の隙間でホバーが切れないよう橋渡し */
.nav-bar-menu ul li .submenu::before {
  content: '';
  position: absolute;
  top: -2rem;
  left: 0;
  right: 0;
  height: 2rem;
}
.nav-bar-menu ul li.has-submenu:hover .submenu {
  display: flex;
}
.nav-bar-menu ul li .submenu li {
  width: 100%;
  border-right: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.nav-bar-menu ul li .submenu li:last-child {
  border-bottom: none;
}
.nav-bar-menu ul li .submenu li a {
  justify-content: flex-start;
  padding: 1.5rem 3rem;
  font-size: 2rem;
  line-height: 1.4;
  white-space: nowrap;
}
.nav-bar-menu ul li .submenu li a:hover {
  background: rgba(0, 0, 0, 0.12);
}

/* グロナビの▼（fa-sort-down）がテキスト上辺に寄る問題を縦中央へ
   既存の margin-top:-.8rem が上方向に押し上げていたため解除 */
.nav-bar-menu ul li a i {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   ヒーロー内の新着情報（banner__main--txt）の文字を少し小さく
   -------------------------------------------------------------------------- */
.banner__main--txt .labels {
  font-size: 2.6rem;
  line-height: 4.2rem;
}
.banner__main--txt time,
.banner__main--txt a {
  font-size: 2rem;
}

@media (max-width: 768px) {
  /* SPヘッダーロゴを中央→左寄せ */
  .header__main {
    justify-content: flex-start;
    padding-left: 3rem;
  }
  /* SPヒーロー下の新着情報バーを中央→左寄せ＋少し小さく */
  .banner__main--txt {
    text-align: left;
  }
  .banner__main--txt .labels {
    margin: 0;
    width: 10rem;
    font-size: 2rem;
    line-height: 3rem;
  }
  .banner__main--txt .info {
    justify-content: flex-start;
  }
  .banner__main--txt time,
  .banner__main--txt a {
    font-size: 1.9rem;
  }
}

/* --------------------------------------------------------------------------
   SP追従インスタアイコン（参考画像に倣い、追従バーの上・右に固定）
   バー高さ9rem＋余白の上に円形アイコンを配置。PCは非表示（ヘッダーにIGあり）。
   -------------------------------------------------------------------------- */
.float-insta {
  display: none;
}
@media (max-width: 768px) {
  .float-insta {
    display: block;
    position: fixed;
    right: 1.5rem;
    bottom: 10.5rem;
    width: 10rem;
    height: 10rem;
    z-index: 98;
    line-height: 0;
  }
  .float-insta img {
    width: 100%;
    height: 100%;
    display: block;
  }
}