/* ============================================================
   MEDICALS CLINIC — カラーパレット
   テンプレートが参照している変数をここで一元管理している。
   （元は index.html 内の :root ブロックにあったものを移設）
   色を変えたいときはこの9つだけ触れば全ページに反映される。
   ============================================================ */
:root {
  /* ブランドアクセント（ボタン・見出しのEN・アイコン） */
  --s-color-36afd6c4: #2f6388ff;
  /* アクセントの淡い面（ヒーローの装飾円など）＝アクセント10% */
  --s-color-ac8edcb0: #2f63881a;

  /* ベース（ページ全体の地色） */
  --s-color-4c9a7605: #f1f3f5ff;
  /* カード・パネルの白 */
  --s-color-1e89dcb3: #ffffffff;

  /* 文字：見出し / 本文(88%) / 罫線(16%) */
  --s-color-94ba5d34: #2b3238ff;
  --s-color-8e8cf57d: #2b3238e0;
  --s-color-6aa9f86e: #2b323829;

  /* サブアクセント（アクセスボタンの緑） */
  --s-color-da9d89aa: #046241ff;
  /* 補助グレー */
  --s-color-f5927165: #c4c4c4ff;

  /* 書体 */
  --s-font-65a21bab: 'M PLUS Rounded 1c';
  --s-font-70b4e262: Montserrat;
}

/* ============================================================
   MEDICALS CLINIC — テンプレート素のCSSへの追加分
   Studio側のJSを外しているため、モバイルメニューを自前で用意する。
   テンプレートのCSSと競合しないよう mc- 接頭辞で独立させている。
   ============================================================ */

html, body { max-width: 100%; }

.mc-drawer {
  position: fixed;
  left: 0; right: 0;
  top: var(--mc-header-h, 64px);
  bottom: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  padding: 8px 20px calc(32px + env(safe-area-inset-bottom));
  background: var(--s-color-4c9a7605);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: "M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", sans-serif;
}
.mc-drawer[hidden] { display: none; }

.mc-drawer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mc-drawer li + li { border-top: 1px solid var(--s-color-6aa9f86e); }
.mc-drawer a {
  display: block;
  padding: 18px 2px;
  color: var(--s-color-94ba5d34);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.mc-drawer-cta {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mc-drawer .mc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.mc-drawer .mc-btn-line { background: var(--s-color-36afd6c4); color: #fff; }
.mc-drawer .mc-btn-tel {
  background: #fff;
  color: var(--s-color-36afd6c4);
  border: 1px solid color-mix(in srgb, var(--s-color-36afd6c4) 35%, transparent);
}

html.mc-nav-open,
html.mc-nav-open body { overflow: hidden; }

/* 画面が広いときはドロワーを使わない（テンプレート本来のナビが出る） */
@media screen and (min-width: 841px) {
  .mc-drawer { display: none !important; }
}

/* ============================================================
   クリニックロゴ（assets/medicals-cl.png）
   テンプレートは「マーク画像 ＋ 院名テキスト」の2要素構成だが、
   支給ロゴはワードマーク込みの1枚なので、テキスト側は隠す。
   ============================================================ */
.sd[data-s-806747b4-8c3f-4543-a5c0-1e36290f71c8] {   /* ロゴ画像（ヘッダー・フッター共通） */
  width: auto !important;
  height: 26px !important;
  max-width: none !important;
}
header .sd[data-s-806747b4-8c3f-4543-a5c0-1e36290f71c8] {   /* ヘッダーは大きめ */
  height: 36px !important;
}
.sd[data-s-0c091a5c-5e22-4be0-9b98-5b72a1790549] {   /* 旧：マーク横の「MEDICALS CLINIC」テキスト */
  display: none !important;
}
@media screen and (max-width: 840px) {
  .sd[data-s-806747b4-8c3f-4543-a5c0-1e36290f71c8] { height: 20px !important; }
  header .sd[data-s-806747b4-8c3f-4543-a5c0-1e36290f71c8] { height: 28px !important; }
}

/* ============================================================
   院長写真
   枠は 405×445（やや縦長）。テンプレート既定の object-fit:fill だと
   人物写真が潰れるため、上寄せトリミングに変更する。
   ============================================================ */
.sd[data-s-139689d4-be03-4b77-afae-0149b70baf98] {
  object-fit: cover !important;
  object-position: center center !important; /* 画像を枠と同じ 10:11 で書き出し済み */
  background: #e6e9ec;                       /* 読み込み前・余白の地色 */
}

/* ============================================================
   院長挨拶：写真（左）＋ 挨拶文（右）の2カラム
   テンプレートは医師カードを縦積みで横3枚並べる想定だが、
   院長1名のみの構成に合わせて横並びに組み替える。
   ============================================================ */
@media screen and (min-width: 841px) {
  /* カード本体を横並びに */
  .sd[data-s-4045f041-1134-4757-b7c9-fbb9aafd4a49] {
    flex-direction: row !important;
    /* 写真カラムと本文カラムの高さを揃える */
    align-items: stretch !important;
    /* テンプレートは3枚並べる前提で max-width:33.3% が入っているので解除 */
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    gap: clamp(28px, 3.4vw, 48px);
  }
  /* 左カラム：写真＋肩書き＋氏名 */
  .sd[data-s-4045f041-1134-4757-b7c9-fbb9aafd4a49] > .mc-doctor-col {
    flex: none !important;
    width: 400px !important;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  /* 固有の高さを持たせず、カラム（＝本文の高さ）を埋める */
  .mc-doctor-col > img.sd[data-s-139689d4-be03-4b77-afae-0149b70baf98] {
    width: 100% !important;
    height: 0 !important;
    flex: 1 1 0 !important;
    min-height: 300px;
    object-fit: cover !important;
    object-position: center 4% !important;
  }
  /* 肩書き・氏名は写真の外（下）に中央揃えで置く＝高さに影響させない */
  .mc-doctor-cap {
    position: absolute;
    top: calc(100% + 16px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;        /* 院長 ／ 氏名 ／ ローマ字 を横並び */
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  .mc-doctor-cap > * { margin: 0 !important; }
  /* キャプションの分の余白を確保 */
  .sd[data-s-4045f041-1134-4757-b7c9-fbb9aafd4a49] {
    padding-bottom: 92px;
  }
  /* 文章側は残り幅いっぱい */
  .sd[data-s-4045f041-1134-4757-b7c9-fbb9aafd4a49] > .sd[data-s-d3e54657-f4f3-4965-87a4-15e3ede7ad71] {
    flex: 1 1 auto !important;
    width: auto !important;
    /* 1行が長くなりすぎるのを防ぎ、右端の固定ボタンとの重なりも避ける */
    max-width: 800px !important;
    padding-top: 4px;
  }
  .sd[data-s-4045f041-1134-4757-b7c9-fbb9aafd4a49] .sd[data-s-2d977fa7] {
    width: auto !important;
  }
}
/* 段落間のアキ */
.sd[data-s-4045f041-1134-4757-b7c9-fbb9aafd4a49] .mc-greeting + .mc-greeting {
  margin-top: 1.1em;
}

/* ============================================================
   下層ページ（特定商取引法に基づく表記 ／ プライバシーポリシー）
   ヘッダー・フッターはトップページと共通。本文だけ独自に組む。
   ============================================================ */
.mc-legal {
  padding: clamp(48px, 7vw, 96px) 20px clamp(64px, 9vw, 120px);
  background: var(--s-color-4c9a7605, #f1f3f5);
  font-family: "M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--s-color-94ba5d34, #2b3238);
}
.mc-legal-inner {
  max-width: 880px;
  margin-inline: auto;
}
.mc-legal-en {
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--s-color-36afd6c4, #2f6388);
  margin: 0 0 6px;
}
.mc-legal-title {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 clamp(28px, 4vw, 44px);
}

/* --- 特商法：定義リスト --- */
.mc-legal-dl {
  margin: 0;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}
.mc-legal-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  border-bottom: 1px solid var(--s-color-6aa9f86e, rgba(43, 50, 56, .16));
}
.mc-legal-row:last-child { border-bottom: 0; }
.mc-legal-row dt {
  padding: 20px 24px;
  font-size: 15px;
  font-weight: 700;
  background: #fff;
}
.mc-legal-row dd {
  margin: 0;
  padding: 20px 24px;
  font-size: 15px;
  line-height: 1.9;
}
.mc-legal-row dd p { margin: 0; }
.mc-legal-row dd p + p { margin-top: 4px; }

/* --- プライバシーポリシー：本文 --- */
.mc-legal-body {
  background: #fff;
  border-radius: 14px;
  padding: clamp(24px, 4vw, 44px);
}
.mc-legal-lead {
  margin: 0 0 32px;
  font-size: 15px;
  line-height: 2;
}
.mc-legal-body h2 {
  margin: 36px 0 12px;
  font-size: 17px;
  font-weight: 700;
  padding-left: 12px;
  border-left: 3px solid var(--s-color-36afd6c4, #2f6388);
  line-height: 1.6;
}
.mc-legal-body h2:first-of-type { margin-top: 0; }
.mc-legal-body p { margin: 0 0 12px; font-size: 15px; line-height: 2; }
.mc-legal-body ul { margin: 0 0 12px; padding-left: 1.3em; }
.mc-legal-body ul > li { font-size: 15px; line-height: 2; list-style: disc; }
.mc-legal-contact { margin-top: 16px; }

.mc-legal a { color: var(--s-color-36afd6c4, #2f6388); text-decoration: underline; }

@media screen and (max-width: 720px) {
  .mc-legal-row { grid-template-columns: 1fr; }
  .mc-legal-row dt { padding-bottom: 8px; }
  .mc-legal-row dd { padding-top: 8px; }
}

/* フッターの規約リンク */
.mc-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 0 0 14px;
  font-family: "M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", sans-serif;
}
.mc-footer-legal a {
  font-size: 13px;
  color: var(--s-color-8e8cf57d, rgba(43, 50, 56, .88));
  text-decoration: none;
}
.mc-footer-legal a:hover { text-decoration: underline; }

/* 地図が表示できないときの代替リンク */
.mc-map-fallback {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: "M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 13px;
  color: var(--s-color-36afd6c4, #2f6388);
  text-decoration: underline;
}

/* ============================================================
   連携医療機関ページ
   ============================================================ */
.mc-alliance-sec {
  background: #fff;
  border-radius: 14px;
  padding: clamp(24px, 4vw, 40px);
  margin-top: 20px;
}
.mc-alliance-sec h2 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  padding-left: 12px;
  border-left: 3px solid var(--s-color-36afd6c4, #2f6388);
  line-height: 1.6;
}
.mc-alliance-sec p { margin: 0 0 10px; font-size: 15px; line-height: 2; }
.mc-alliance-note { color: var(--s-color-8e8cf57d, rgba(43,50,56,.88)); font-size: 14px !important; }

.mc-alliance-list { list-style: none; margin: 18px 0 0; padding: 0; }
.mc-alliance-item {
  padding: 22px 0;
  border-top: 1px solid var(--s-color-6aa9f86e, rgba(43, 50, 56, .16));
  display: grid;
  grid-template-columns: 150px 1fr;   /* 左に証書画像 */
  gap: 20px;
  align-items: start;
}
.mc-alliance-cert {
  margin: 0;
  grid-row: span 2;
}
.mc-alliance-cert img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--s-color-6aa9f86e, rgba(43, 50, 56, .16));
  border-radius: 4px;
  background: #fff;
}
.mc-alliance-body { min-width: 0; }
.mc-alliance-item:last-child { border-bottom: 1px solid var(--s-color-6aa9f86e, rgba(43, 50, 56, .16)); }
.mc-alliance-item h3 {
  margin: 0 0 10px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.6;
}
.mc-alliance-item dl { margin: 0; }
.mc-alliance-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 4px 12px;
  font-size: 14.5px;
  line-height: 1.9;
}
.mc-alliance-row + .mc-alliance-row { margin-top: 4px; }
.mc-alliance-row dt { color: var(--s-color-8e8cf57d, rgba(43,50,56,.88)); font-weight: 700; }
.mc-alliance-row dd { margin: 0; word-break: break-word; }
.mc-alliance-map {
  display: block;        /* 住所の下に改行して置く */
  margin-top: 2px;
  white-space: nowrap;
}
.mc-alliance-empty h3 { color: var(--s-color-8e8cf57d, rgba(43,50,56,.88)); font-weight: 500; }

@media screen and (max-width: 560px) {
  .mc-alliance-row { grid-template-columns: 1fr; gap: 0; }
  .mc-alliance-row dt { font-size: 13px; }
  .mc-alliance-item { grid-template-columns: 96px 1fr; gap: 14px; }
}

/* 利用規約の制定日 */
.mc-legal-date {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--s-color-6aa9f86e, rgba(43, 50, 56, .16));
  font-size: 14px;
  color: var(--s-color-8e8cf57d, rgba(43, 50, 56, .88));
}

/* 利用規約：条文の箇条書き */
.mc-legal-body ol {
  margin: 0 0 12px;
  padding-left: 1.6em;
}
.mc-legal-body ol > li {
  font-size: 15px;
  line-height: 2;
  margin-bottom: 6px;
  list-style: decimal;
}
/* 各号（入れ子）は (1) (2) … で表示 */
.mc-legal-body ol ol {
  counter-reset: sub;
  list-style: none;
  margin: 6px 0 4px;
  padding-left: 2.4em;
}
.mc-legal-body ol ol > li {
  counter-increment: sub;
  position: relative;
  list-style: none;
}
.mc-legal-body ol ol > li::before {
  content: "(" counter(sub) ")";
  position: absolute;
  left: -2.4em;
  width: 2em;
  text-align: right;
}

/* 複数施設をまとめた項目の施設名ラベル */
.mc-alliance-sub {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--s-color-36afd6c4, #2f6388);
  margin-top: 4px;
}
.mc-alliance-row dd > .mc-alliance-sub:first-child { margin-top: 0; }

/* 2施設目以降の区切り */
.mc-alliance-row + .mc-alliance-row--sep { margin-top: 18px; }