@charset "UTF-8";
/**
 * SWELL Base CSS
 *
 * このファイルはSWELLテーマの標準スタイルを打ち消す・調整するための共通CSSです。
 * 他サイトへ流用できます。
 *
 * 【注意】
 * - サイト固有のデザイン（色・フォントサイズ・装飾）はここに書かない
 * - デザイン値はCSS変数で参照し、style.css側で定義する
 * - SWELL内部クラスに依存する指定が多いため、テーマ更新時は動作確認すること
 */

/* ==========================================================================
   Fallback Variables
   style.css で上書きされることを前提としたデフォルト値
   ========================================================================== */
:root {
  /* ---- Color ---- */
  --c-primary: #333;
  --c-primary-ink: #333;
  --c-heading: #333;
  --c-text: #333;
  --c-text-sub: #666;
  --c-on-primary: #fff;
  --c-bg: #fff;
  --c-bg-alt: #f5f5f5;
  --c-bg-tint: #f0f0f0;
  --c-border: #ddd;
  --c-border-strong: #999;
  --c-shadow: #000;

  /* ---- Typography ---- */
  --fs-h2: 1.5rem;
  --fs-h4: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --lh-tight: 1.5;

  /* ---- Shape ---- */
  --bw: 1px;
  --bw-thick: 2px;
  --r-card: 8px;

  /* ---- Shadow ---- */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Section Header
   .post_content 起点で詳細度を上げ、SWELLの margin: 4em 0 2em を打ち消す
   ========================================================================== */
.section__header {
  margin-bottom: 40px;
}

.post_content .section__header .section__eyebrow {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: 0.05em;
  margin: 0 0 12px;
}

.post_content .section__header .section__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--c-heading);
  margin: 0 0 16px;
}

.post_content .section__header p:last-child {
  font-size: 15px;
  color: var(--c-text-sub);
  margin: 0;
}

/* ==========================================================================
   Hours Table Structure
   受診案内（診療時間部分）- 狭い画面で崩れないための構造的な指定
   ========================================================================== */
/* 角丸のはみ出し防止（border-collapse: collapse との併用対策） */
/* figure に指定することで表自体に角丸が効く */
figure.hours__table,
figure.gp__table {
  border-radius: var(--r-card);
  overflow: hidden;
}

/* SP: 表全体を親幅に収める */
@media (max-width: 959px) {
  .hours__table table,
  .gp__table table {
    width: 100%;
    table-layout: auto;
  }

  /* 左列: 折り返さない */
  .hours__table tbody th,
  .gp__table tbody th {
    white-space: nowrap;
  }

  /* 曜日列: 均等幅（診療時間表専用） */
  .hours__table th:not(:first-child),
  .hours__table td {
    width: calc(100% / 8);
  }
}

/* ==========================================================================
   Top Page Layout Override
   トップページのメインコンテンツ上下余白を0に
   SWELL側がIDで指定しているため、こちらもID込みで指定する
   ========================================================================== */
.top #content {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* ==========================================================================
   Footer Widget Area
   フッターウィジェットエリアのレイアウト
   SWELL内部クラス .w-footer に依存
   ========================================================================== */
@media (min-width: 960px) {
  .l-footer .w-footer.-col2 {
    align-items: center;
  }
  .l-footer .w-footer__box:first-child {
    flex: 4;
  }
  .l-footer .w-footer__box:last-child {
    flex: 6;
  }
}

/* ==========================================================================
   Footer Navigation Menu
   フッターのナビゲーションメニューウィジェット
   SWELL内部クラス .c-listMenu に依存
   ========================================================================== */
/* 矢印アイコンを非表示 */
.l-footer .c-listMenu a::before {
  display: none;
}

/* フォントサイズ・パディング・ボーダー */
.l-footer .c-listMenu a {
  font-size: 13px;
  padding: 0.5em 0;
  border-bottom: none;
}

/* ホバー：背景色変化なし・opacity・移動なし */
.l-footer .c-listMenu a:hover {
  background-color: transparent;
  opacity: 0.7;
  /* SWELLデフォルトの padding-left 変化を止める */
  padding-left: 0;
}

/* SP・PC共通: 横並び */
.l-footer .c-listMenu ul.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 1.5em;
}

/* PC: 右寄せ・縦中央揃え */
@media (min-width: 960px) {
  .l-footer .c-listMenu ul.menu {
    justify-content: flex-end;
    align-items: center;
  }
}

/* ==========================================================================
   Global Navigation
   グローバルナビゲーション
   SWELL内部クラス .c-gnav に依存
   ========================================================================== */
.c-gnav > li > a {
  transition: color 0.2s ease;
}

.c-gnav > li:hover > a {
  background-color: transparent;
  color: var(--c-primary);
}

/* ==========================================================================
   SP Menu (スマホ開閉メニュー)
   SWELL内部クラス .p-spMenu, .c-listMenu に依存
   ========================================================================== */
/* MENUタイトルの帯を非表示 */
.p-spMenu .c-widget__title.-spmenu {
  display: none;
}

/* MENUタイトルを消した分、navの負のマージンをリセット */
.p-spMenu .p-spMenu__nav {
  margin-top: 0;
}

/* メニュー項目の矢印を非表示 */
.p-spMenu .c-listMenu a::before {
  display: none;
}

/* ホバー時の右方向への移動を止める */
.p-spMenu .c-listMenu a {
  padding-left: 1em;
}

.p-spMenu .c-listMenu a:hover {
  padding-left: 1em;
}

/* サブメニューがある場合のpadding調整 */
.p-spMenu .c-listMenu .sub-menu a,
.p-spMenu .c-listMenu .children a {
  padding-left: 2em;
}

.p-spMenu .c-listMenu .sub-menu a:hover,
.p-spMenu .c-listMenu .children a:hover {
  padding-left: 2em;
}

/* ==========================================================================
   SP Fixed Footer Buttons (固定フッターボタン) - 構造
   SWELL内部クラス #fix_bottom_menu に依存
   色指定は style.css 側で行う
   ========================================================================== */
/* ボタンを隙間なく敷き詰める */
#fix_bottom_menu .menu_list {
  padding-top: 0;
  align-items: stretch;
}

/* リンクを親の高さいっぱいに、中身は中央寄せ */
#fix_bottom_menu .menu-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* ==========================================================================
   Rich Columns - SP Reverse
   リッチカラムのスマホ時の縦積み順を逆にする
   SWELL内部クラス .swell-block-columns__inner に依存

   【使い方】
   リッチカラムブロックの「追加CSSクラス」に cols--sp-reverse を追加する。
   スマホ列数は「1」に設定すること（2列以上では効果が不明確になる）。
   ========================================================================== */
@media (max-width: 959px) {
  .cols--sp-reverse > .swell-block-columns__inner {
    flex-direction: column-reverse;
  }
}