/* ============================================
   ひすい歯科 採用サイト — 院長紹介ページ専用スタイル
   doctor.css
   ※ .page-main / .breadcrumb / .page-title / アニメーションは common.css で定義
   モバイルファースト（ブレイクポイント: 751px）
   ============================================ */

/* ----------------------------------------
   院長キャッチコピーセクション
   ---------------------------------------- */

.doctor-catch {
  padding: 14vw 0 10vw;
  background-color: var(--color-white);
}

.doctor-catch__main {
  font-family: 'Klee One', serif;
  font-size: var(--fs-h2-big-sp);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: 1.4;
  margin-bottom: 6vw;
  position: relative;
  /* 左端の縦アクセントライン（::before）から本文までの距離。
     カード左ボーダーと本文の関係（.sv-voice 等）と同じ値に揃える */
  padding-left: var(--pad-card-sp);
}

/* キャッチ左端の縦アクセントライン */
.doctor-catch__main::before {
  content: '';
  display: block;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--main-color), var(--main-color-hover));
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 2px;
}

.doctor-catch__lead {
  font-size: var(--fs-body-sp);
  color: var(--color-dark-gray);
  line-height: 1.9;
}

/* ----------------------------------------
   院長プロフィールカード
   ---------------------------------------- */

.doctor-profile {
  background-color: var(--color-bg);
  padding: 10vw 0;
}

.doctor-profile__photo-wrap {
  position: relative;
  margin-bottom: 6vw;
}

/* 仕様書 5章 .bd — 角丸8px + ボーダー + 白背景 + padding 0.4em */
.doctor-profile__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: 8px;
  display: block;
  border: 1px solid var(--color-gray);
  background-color: var(--color-white);
  padding: 0.4em;
}

.doctor-profile__photo-wrap::after {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  background: linear-gradient(90deg, var(--main-color), var(--main-color-hover));
  border-radius: 2px;
  margin-top: 1.5em;
}

.doctor-profile__name-block {
  margin-bottom: 4vw;
}

.doctor-profile__role {
  display: block;
  font-size: var(--fs-xs-sp);
  font-weight: var(--fw-medium);
  color: var(--main-color);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.4em;
}

.doctor-profile__name {
  font-size: var(--fs-h2-small-sp);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: 1.3;
}

.doctor-profile__name-en {
  display: block;
  font-family: var(--font-en);
  /* --font-en はイタリックで使う。指定を落とすとロゴのローマン体と競合する */
  font-style: italic;
  font-weight: 500;
  font-size: 4vw;
  /* --color-light-brown(#B7A895) は背景 --color-bg(#F3F0EC) 上でコントラスト比 2.1:1 と
     WCAG AA(4.5:1) 未達。セリフ体はヘアラインが細くさらに沈むため、
     .page-title__en と同じ理由で同系の濃い方を使う（4.80:1） */
  color: var(--color-brown);
  letter-spacing: 0.06em;
  margin-top: 0.4em;
}

.doctor-profile__bio {
  font-size: var(--fs-body-sp);
  color: var(--color-dark-gray);
  line-height: 1.9;
}

/* ----------------------------------------
   メッセージ本文エリア
   ---------------------------------------- */

.doctor-message {
  padding: 14vw 0 0;
  background-color: var(--color-white);
}

.doctor-message__section {
  margin-bottom: 12vw;
}

.doctor-message__section:last-child {
  margin-bottom: 0;
}

.doctor-message__body {
  font-size: var(--fs-body-sp);
  color: var(--color-dark-gray);
  line-height: 1.9;
}

.doctor-message__body p {
  margin-bottom: 1.4em;
}

.doctor-message__body p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------
   外部講師研修ギャラリー（自動横スクロール）
   ---------------------------------------- */

.doctor-training {
  background-color: var(--color-bg);
}

.doctor-training__lead {
  margin-top: 3vw;
  /* SP は他の __lead と同じ --fs-body-sp(3.8vw)。PC 側で --fs-body(16px) に上がる。
     ここだけ SP でも --fs-body 固定になっており、狭い画面で本文より大きく見えていた */
  font-size: var(--fs-body-sp);
  /* 読ませる本文なので、他の __lead（.doctor-catch__lead / .faq-intro__lead /
     .recruit-catch__lead / .flow-section__lead / .hyg-catch__lead）と同じ本文色。
     --color-light-brown は見出しに添えるキッカー用で（→ 仕様書 2章）、
     背景 --color-bg(#F3F0EC) 上で 2.04:1 と読ませる文章には足りなかった */
  color: var(--color-dark-gray);
  line-height: 1.8;
}

.doctor-training__slider {
  margin-top: 6vw;
  overflow: hidden;              /* .innr 幅で見切れ表示 */
}

.doctor-training__slider .swiper-slide {
  width: 70vw;                   /* 1.2枚見せ＝次スライドがちら見え */
}

.doctor-training__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  transition: transform var(--transition-base);
}

/* 自動スクロールを等速に（Swiper autoplay + linear） */
.doctor-training__slider .swiper-wrapper {
  transition-timing-function: linear;
}

/* モーション低減の配慮 */
@media (prefers-reduced-motion: reduce) {
  .doctor-training__slider .swiper-wrapper {
    transition-timing-function: ease;
  }
}

/* ----------------------------------------
   CTA（下層ページ版）
   ---------------------------------------- */

.doctor-cta {
  padding: 14vw 0;
  background: linear-gradient(160deg, var(--color-white) 0%, var(--main-color-pale) 100%);
  position: relative;
  overflow: hidden;
}

.doctor-cta::before {
  content: '';
  position: absolute;
  bottom: -15%;
  left: -10%;
  width: 55vw;
  height: 55vw;
  border-radius: 50%;
  background-color: rgba(16, 208, 171, 0.05);
  pointer-events: none;
}

.doctor-cta__inner {
  position: relative;
  z-index: 1;
}

.doctor-cta__copy {
  font-family: 'Klee One', serif;
  font-size: var(--fs-h2-small-sp);
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: 6vw;
}

/* ----------------------------------------
   PC（751px 以上）
   ---------------------------------------- */

@media (min-width: 751px) {

  .doctor-catch {
    padding: 80px 0 60px;
  }

  .doctor-catch .innr {
    display: flex;
    align-items: flex-start;
    gap: 60px;
  }

  .doctor-catch__text { flex: 1; }

  .doctor-catch__main {
    font-size: 2.5rem;
    margin-bottom: 30px;
    padding-left: 28px;
  }

  .doctor-catch__lead { font-size: var(--fs-body); }

  .doctor-profile { padding: 80px 0; }

  .doctor-profile__inner {
    display: flex;
    gap: 60px;
    align-items: flex-start;
  }

  .doctor-profile__photo-side {
    width: 300px;
    flex-shrink: 0;
  }

  .doctor-profile__photo-wrap { margin-bottom: 0; }
  .doctor-profile__photo      { aspect-ratio: 3 / 4; }

  .doctor-profile__info  { flex: 1; }
  .doctor-profile__role  { font-size: var(--fs-xs); margin-bottom: 0.5em; }
  .doctor-profile__name  { font-size: var(--fs-h2-small2); }
  .doctor-profile__name-en { font-size: 1.125rem; margin-top: 0.5em; }
  .doctor-profile__bio   { font-size: var(--fs-body); margin-top: 20px; }
  .doctor-profile__name-block { margin-bottom: 20px; }

  .doctor-message { padding: 80px 0 0; }
  .doctor-message__section { margin-bottom: 70px; }
  .doctor-message__body    { font-size: var(--fs-body); }

  .doctor-training__lead   { margin-top: 16px; font-size: var(--fs-body); }
  .doctor-training__slider { margin-top: 32px; }
  .doctor-training__slider .swiper-slide { width: 360px; } /* 1080px内に約3枚＋余白 */
  .doctor-training__img:hover { transform: scale(1.02); }

  .doctor-cta { padding: 100px 0; }

  .doctor-cta::before {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -80px;
  }

  .doctor-cta__copy {
    font-size: 1.5rem;
    margin-bottom: 30px;
  }
}

/* .font-klee 上書き（common.css より後に読み込まれるため詳細度で競合回避） */
.doctor-catch__main.font-klee {
  font-family: 'Klee One', serif;
}