/* ============================================================
   精密審美会 採用サイト — 医院紹介 ページ固有スタイル
   Figma: 59:288 (医院紹介-PC) 1440×2884
   ============================================================ */

/* --- セカンダリMV — Clinic固有オーバーライド ---
   Figma: Clinics 1 (59:479) 303×78px
   ======================================= */
.secondary-mv--clinic .secondary-mv__title-logo {
  max-width: 303px;
  margin-bottom: -41px; /* Figma: ロゴ下端Y=-14, テキスト上端Y=-55, overlap=41px */
}

/* --- 医院コンテンツ（白背景エリア: 名前・紹介文・ギャラリー） --- */
.clinic-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 120px 0;
}

/* Figma: 59:292 — fs=32, fw=400, ls=2.56, lh=52, #1556A6 */
.clinic-content__name {
  font-size: 32px;
  font-weight: 400;
  color: #1556A6;
  letter-spacing: 2.56px;
  line-height: 52px;
  margin-bottom: var(--spacing-md);
}

/* Figma: 59:300 — fs=16, fw=400, ls=1.28, lh=25, #333 */
.clinic-content__desc {
  margin-bottom: var(--spacing-lg);
}

.clinic-content__desc p {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.28px;
  line-height: 25px;
  color: #333;
}

/* --- 画像ギャラリー ---
   Figma: メイン 750×480 中央配置, サムネイル 192×123
   ======================================= */
.clinic-gallery {
  margin-bottom: var(--spacing-xl);
  text-align: center;
}

/* メイン画像 — Figma: 59:333 750×480 中央配置 */
.clinic-gallery__main {
  margin: 0 auto var(--spacing-sm);
  max-width: 750px;
}

.clinic-gallery__main img {
  width: 100%;
  max-width: 750px;
  aspect-ratio: 750 / 480;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

/* キャプション — Figma: 59:339 fs=12, 中央揃え */
.clinic-gallery__caption {
  margin-top: var(--spacing-xs);
  font-size: 12px;
  letter-spacing: 0.96px;
  color: #000;
  text-align: center;
}

/* ドットインジケータ — Figma: 59:349 (8×8 circles, gap=12) */
.clinic-gallery__dots {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: var(--spacing-sm) 0;
}

.clinic-gallery__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D9D9D9;
  cursor: pointer;
  transition: background 0.3s;
}

.clinic-gallery__dot.is-active {
  background: #32A9E1;
}

/* サムネイルカルーセル — 現行サイトSlick asNavFor相当 */
.clinic-gallery__thumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 750px;
  margin: 0 auto;
  position: relative;
}

/* 左右ナビボタン */
.clinic-gallery__nav {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
  z-index: 2;
}

.clinic-gallery__nav:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* ビューポート — overflow:hidden でクリッピング */
.clinic-gallery__viewport {
  overflow: hidden;
  flex: 1;
}

/* トラック — translateXでスライド */
.clinic-gallery__track {
  display: flex;
  gap: 8px;
  transition: transform 0.4s ease;
}

.clinic-gallery__thumb {
  width: 120px;
  min-width: 120px;
  height: 77px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  transition: border-color 0.3s, opacity 0.3s;
  flex-shrink: 0;
}

.clinic-gallery__thumb.is-active {
  border-color: #32A9E1;
  opacity: 1;
}

.clinic-gallery__thumb:not(.is-active) {
  opacity: 0.6;
}

.clinic-gallery__thumb:hover {
  opacity: 1;
}

.clinic-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* --- 医院情報テーブル ---
   Figma: 59:414 (750×951), th=230px, td=520px
   Rectangle 7: #EEF8FF 背景はここから開始
   ======================================= */
.clinic-info {
  background: #EEF8FF;
  border-radius: 0 50px 0 50px;
  max-width: 1200px;
  margin: var(--spacing-xl) auto 0;
  padding: 80px 120px;
}

/* Figma: 59:476 — fs=32, fw=400, ls=2.56, #1556A6 */
.clinic-info__heading {
  font-size: 32px;
  font-weight: 400;
  color: #1556A6;
  letter-spacing: 2.56px;
  line-height: 52px;
  max-width: 750px;
  margin: 0 auto var(--spacing-md);
}

.clinic-info__table {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  border-collapse: collapse;
}

.clinic-info__table tr {
  border-bottom: 1px solid #333;
}

/* Figma: th fs=16, fw=700, ls=1.28 / td fs=16, fw=400, ls=1.28 */
.clinic-info__table th,
.clinic-info__table td {
  text-align: left;
  font-size: 16px;
  letter-spacing: 1.28px;
  line-height: 24px;
  color: #333;
}

.clinic-info__table th {
  padding: 10px 30px;
  width: 230px;
  font-weight: 700;
  vertical-align: middle;
}

.clinic-info__table td {
  padding: 24px 30px;
  font-weight: 400;
}

.clinic-info__table td a {
  color: #333;
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 3px;
  transition: color 0.3s;
}

.clinic-info__table td a:hover {
  color: #32A9E1;
}

/* Figma: 地図 460×247 */
.clinic-info__map {
  width: 100%;
  max-width: 460px;
  overflow: hidden;
  border-radius: 8px;
}

.clinic-info__map iframe {
  display: block;
  width: 100%;
  height: 250px;
  border-radius: 8px;
}


/* ============================================================
   SP レスポンシブ (max-width: 768px)
   Figma: 59:307 (医院紹介-SP) 430×2724
   ============================================================ */
@media (max-width: 768px) {

  /* MV — Clinic固有SPオーバーライド
     Figma: Clinics 2 = 178×46px */
  .secondary-mv--clinic .secondary-mv__title-logo {
    max-width: 178px;
    left: 21px;                            /* Figma SP: x=43, inner余白22 → 21px */
  }




  /* Figma SP: コンテンツ余白 LR=22px（フレーム左端からテキストX=22） */
  .clinic-content {
    padding: 40px 22px 0;
  }

  /* Figma SP: 医院名 fs=25 ls=2.0 lh=40 #1556A6 */
  .clinic-content__name {
    font-size: 25px;
    letter-spacing: 2px;
    line-height: 40px;
    color: #1556A6;
  }

  /* Figma SP: 紹介文 fs=14 ls=1.12 lh=25 #333 (PC: fs=16) */
  .clinic-content__desc p {
    font-size: 14px;
    letter-spacing: 1.12px;
    line-height: 25px;
  }

  /* Figma SP: メイン画像 386×248 radius=10 */
  .clinic-gallery__main img {
    max-width: 100%;
  }

  /* Figma SP: サムネイル — ネイティブ横スクロール化 */
  .clinic-gallery__thumbs {
    gap: 4px;
  }

  /* SP: ナビボタン非表示 → スワイプで操作 */
  .clinic-gallery__nav {
    display: none;
  }

  /* SP: viewportを横スクロール可能に */
  .clinic-gallery__viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* スクロールバー非表示 */
    scrollbar-width: none; /* Firefox */
  }
  .clinic-gallery__viewport::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .clinic-gallery__thumb {
    width: 108px;
    min-width: 108px;
    height: 69px;
  }

  /* Figma SP: ドットインジケータ 5×5 gap=12.5 */
  .clinic-gallery__dot {
    width: 5px;
    height: 5px;
  }

  /* Figma SP: キャプション fs=12 ls=0.96 lh=52 */
  .clinic-gallery__caption {
    font-size: 12px;
    letter-spacing: 0.96px;
  }

  /* Figma SP: 医院情報背景 430×1541 #EEF7FF radii=[0,50,0,50] 全幅 */
  .clinic-info {
    padding: 40px 22px;
    border-radius: 0 50px 0 50px;
    margin-bottom: 40px;
  }

  /* Figma SP: 医院情報見出し fs=25 ls=2.0 lh=40 (PC: fs=32) */
  .clinic-info__heading {
    font-size: 25px;
    letter-spacing: 2px;
    line-height: 40px;
  }

  /* Figma SP: テーブル行 — th/td をブロック化、padding LR=8px */
  .clinic-info__table th,
  .clinic-info__table td {
    display: block;
    width: 100%;
    padding: 8px 8px;
  }

  .clinic-info__table th {
    padding-bottom: 0;
    color: #333;
    font-size: 14px;
  }

  /* Figma SP: td fs=16 ls=1.28 lh=24 — clampで360px対応
     360px→13.3px(20文字/行), 430px→16px */
  .clinic-info__table td {
    font-size: clamp(13px, 3.7vw, 16px);
    letter-spacing: 1.28px;
    line-height: 24px;
  }

  /* Figma SP: 地図 357×247 → 全幅対応 */
  .clinic-info__map {
    max-width: 100%;
  }
}