@charset "UTF-8";
/* =========================================================================
   team-member.css — Doctor single（Figma 実体フレーム 16070:26916・1440×2600）
   縦方向はローカルギャップ（次要素Y −（前要素Y＋高さ））で積む。
   ========================================================================= */

/* ページ固有トークン（Figma 裸値・役割名） */
:root {
  --fs-doctor-name: 3.6rem; --lh-doctor-name: 3.8rem;  /* Display 8 Medium 36/38：医師名・口コミ見出し */
  --color-arrow-border: #ededed;                       /* 口コミ「次へ」ボタン枠 */
}

/* ---------- Header V2（top 14） ---------- */
.tm-top { padding-top: 1.4rem; }

/* ---------- プロフィール（470＋gap30＋570、高さ 423.762。ヘッダー下端99 → 141.637 = 42.637） ---------- */
.tm-profile {
  display: flex; align-items: flex-start; gap: 3rem;
  width: 107rem; margin: 4.2637rem auto 0;
}
.tm-profile__photo { width: 47rem; height: 42.3762rem; flex-shrink: 0; border-radius: var(--radius-card-lg); overflow: hidden; }
.tm-profile__photo img { width: 100%; height: 100%; object-fit: cover; }
/* 白カード 570×423.762・角丸20。中身は (48.873, 49.264) から */
.tm-profile__card {
  width: 57rem; height: 42.3762rem; flex-shrink: 0;
  padding: 4.9264rem 0 0 4.8873rem;
  background: var(--color-neutral-100); border-radius: var(--radius-card-lg);
}
.tm-profile__role {
  display: flex; align-items: center; width: fit-content; min-height: 2.4rem; padding: 0.3rem 0.6rem;   /* 111×24 */
  background: var(--color-neutral-100); border-radius: 0.4rem;
  box-shadow: 0 0.1rem 0.4rem rgba(108, 66, 170, 0.13);
  font-size: var(--fs-tag); line-height: var(--lh-tag); font-weight: 500; letter-spacing: 0; color: var(--color-neutral-800); white-space: nowrap;
}
/* 名前：Medium 36/38（タグ下端 214.9 → 243.9 = 29） */
.tm-profile__name {
  width: 28.3rem; margin-top: 2.9rem;
  font-size: var(--fs-doctor-name); line-height: var(--lh-doctor-name); font-weight: 500; color: var(--color-neutral-800);
}
.tm-profile__text { width: 47.1756rem; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-neutral-700); }
.tm-profile__text--1 { margin-top: 1rem; }                          /* 281.9 → 291.9 */
.tm-profile__text--2 { margin-top: 1.2rem; margin-left: 0.05rem; }  /* 363.9 → 375.9（x +0.5） */
.tm-profile__sns { display: flex; gap: 0.8rem; margin: 2.4234rem 0 0 0.05rem; } /* 471.9 → 496.134 */
.tm-profile__sns a, .tm-profile__sns img { display: block; width: 2rem; height: 2rem; }
.tm-profile__sns a:hover { opacity: 0.7; }

/* ---------- 医師について（幅619・中央。カード下端 565.398 → 642.398 = 77） ---------- */
.tm-about { width: 61.9rem; margin: 7.7rem auto 0; }
.tm-about__title { white-space: nowrap; }
.tm-about__text { width: 61.8631rem; margin-top: 1.2rem; }   /* 690.4 → 702.4 / 822.4 → 834.4 */

/* ---------- 区切り線（930.398 → 1050.398 = 120、1067.625×1 #D1D9E7） ---------- */
.tm-line {
  width: 106.7625rem; height: 0; margin: 12rem 0 0 calc(50% - 53.4938rem);   /* x 185.06 */
  border: 0; border-top: 1px solid var(--color-neutral-200);
}

/* ---------- お客様の声（線 → 見出し 1170.398 = 120） ---------- */
.tm-reviews { margin-top: calc(12rem - 1px); }   /* 線(1px)の上端 1050.4 → 1170.4 */
.tm-reviews__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  width: 107rem; margin-inline: auto;
}
.tm-reviews__intro { width: 50rem; }
/* 見出し：本体 Medium 36/38・強調 Medium Italic #AA6EFF。間の空白だけ Figma 上 46/48 */
.tm-reviews__title {
  width: 38.1268rem;
  font-size: var(--fs-doctor-name); line-height: var(--lh-doctor-name); font-weight: 500; color: var(--color-neutral-800);
}
.tm-reviews__space { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.046rem; }
.tm-reviews__desc { width: 50rem; margin-top: 0.9rem; }   /* 見出し上端 1170.4 → 1265.4（Figma 見出し高 88、実描画 86 のため +2） */
.tm-reviews__nav { display: flex; gap: 1.6rem; }
.tm-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4.6rem; height: 4.6rem; border-radius: 1.2rem; flex-shrink: 0;
}
.tm-arrow img { width: 2.4508rem; height: 2.4508rem; }
.tm-arrow--prev { background: rgba(209, 217, 231, 0.3); }   /* #D1D9E7・不透明度0.3 */
.tm-arrow--next { background: var(--color-neutral-100); border: 1px solid var(--color-arrow-border); }
.tm-arrow:hover { filter: brightness(0.97); }

/* カード列（説明下端 1337.4 → 1369.4 = 32。カード 759.59×407.346、間 21） */
.tm-reviews__slider { margin-top: 3.2rem; }
.tm-reviews__track { display: flex; gap: 2.1rem; width: max-content; margin-left: calc(50% - 53.4815rem); }
.tm-review {
  position: relative; width: 75.959rem; height: 40.7346rem; flex-shrink: 0;
  border-radius: var(--radius-card); overflow: hidden;
}
.tm-review__media { position: absolute; }
.tm-review--1 .tm-review__media { inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* カード2：縦グラデ（Figma 15903:5999）＋写真（left 60.52%・縦中央+7.73・比率 880/1376） */
.tm-review--2 {
  background: linear-gradient(180deg, #9c97b6 0%, #9c95b3 22.918%, #958ba7 40.164%, #7e748e 59.014%, #594e5e 77.463%, #4e424f 100%);
}
.tm-review--2 .tm-review__media {
  left: 60.52%; right: 0; top: calc(50% + 0.773rem); transform: translateY(-50%);
  width: 39.48%; height: auto; aspect-ratio: 880 / 1376;
}
/* 白い文字カード（inset 6% 52.12% 6% 2.77% → 21.04, 24.44, 342.63×358.46・角丸16） */
.tm-review__box {
  position: absolute; left: 2.104rem; top: 2.444rem; width: 34.263rem; height: 35.846rem;
  background: var(--color-neutral-100); border-radius: var(--radius-card);
}
.tm-review__quote-icon { position: absolute; left: 29.29rem; top: 3.666rem; width: 2.6476rem; height: 1.8912rem; }
.tm-review__text {
  position: absolute; left: 2.332rem; width: 29.602rem;
  font-size: 2.2rem; line-height: 2.6rem; font-weight: 500; letter-spacing: 0; color: var(--color-neutral-800);
}
.tm-review__text p { letter-spacing: 0; }
.tm-review--1 .tm-review__text { top: 16.082rem; }   /* 185.26 − 24.44 */
.tm-review--2 .tm-review__text { top: 13.214rem; }   /* 156.58 − 24.44 */
.tm-review__author { position: absolute; left: 2.332rem; top: 28.14rem; display: flex; flex-direction: column; }
.tm-review__name { font-size: 1.4rem; line-height: 2.2rem; font-weight: 500; letter-spacing: 0; color: var(--color-neutral-800); white-space: nowrap; }
.tm-review__place { margin-top: 0.1rem; font-size: 1.2rem; line-height: 1.8rem; font-weight: 500; color: var(--color-neutral-700); white-space: nowrap; }

/* ---------- フッター（カード下端 1776.744 → 1896.744 = 120） ---------- */
main + .site-footer { margin-top: 12rem; }

/* =========================================================================
   SP（<1024px）— 自作レイアウト（Figma に SP カンプなし）
   ========================================================================= */
@media (max-width: 1023px) {
  :root { --fs-doctor-name: 3rem; --lh-doctor-name: 3.4rem; }

  .tm-top { padding-top: 1.2rem; }

  .tm-profile { flex-direction: column; gap: 1.6rem; width: auto; max-width: 72rem; margin: 2.4rem var(--sp-inset) 0; }
  .tm-profile__photo { width: 100%; max-width: none; height: auto; aspect-ratio: 470 / 423.762; }
  .tm-profile__card { width: 100%; height: auto; padding: 2.4rem 2rem 2.8rem; }
  .tm-profile__name { width: auto; margin-top: 1.6rem; }
  .tm-profile__text { width: auto; }
  .tm-profile__text--2 { margin-left: 0; }
  .tm-profile__sns { margin: 2.4rem 0 0; }

  .tm-about { width: auto; max-width: 72rem; margin: 6.4rem var(--sp-inset) 0; }
  .tm-about__title { white-space: normal; }
  .tm-about__text { width: auto; }

  .tm-line { width: auto; max-width: 72rem; margin: 6.4rem var(--sp-inset) 0; }

  .tm-reviews { margin-top: 6.4rem; }
  .tm-reviews__head { flex-direction: column; align-items: flex-start; gap: 2.4rem; width: auto; max-width: 72rem; margin-inline: var(--sp-inset); }
  .tm-reviews__intro, .tm-reviews__title, .tm-reviews__desc { width: auto; }
  .tm-reviews__desc { margin-top: 1.2rem; }

  .tm-reviews__slider {
    margin-top: 2.4rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sp-inset);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .tm-reviews__slider::-webkit-scrollbar { display: none; }
  .tm-reviews__track { gap: 1.6rem; margin-left: 0; padding-inline: var(--sp-inset); }
  .tm-review { width: 30rem; height: 46rem; scroll-snap-align: start; }
  .tm-review--1 .tm-review__media { object-position: 85% center; }
  .tm-review--2 .tm-review__media { left: auto; right: -2rem; top: -2rem; transform: none; width: 22rem; }
  .tm-review__box { left: 1.2rem; right: 1.2rem; top: auto; bottom: 1.2rem; width: auto; height: auto; padding: 2rem; display: flex; flex-direction: column; }
  .tm-review__quote-icon { position: static; align-self: flex-end; }
  .tm-review__text, .tm-review--1 .tm-review__text, .tm-review--2 .tm-review__text { position: static; width: auto; margin-top: 1.6rem; font-size: 1.8rem; line-height: 2.4rem; }
  .tm-review__author { position: static; margin-top: 1.6rem; }

  main + .site-footer { margin-top: 6.4rem; }
}