@charset "UTF-8";
/* ============================================================
   doctor — ドクター紹介（独立デザインページ）
   ------------------------------------------------------------
   PSD: 01_支給/260901/psd/wingclinic_doctor.psd（1920px・1:1）
   数値はレイヤー実測値。TOPと同じ部品（.section-title / .strength /
   .header-cv）はそのまま使い、このページ固有の差分だけ上書きする。

   ヒーロー（.p-hero）とヘッダーの透過挙動は lower.css 側。
============================================================ */

.p-doctor {
  /* --- PSD実測色 --- */
  --dr-bg:       #51b8c8;  /* ページ背景 */
  --dr-panel:    #4b4b4b;  /* プロフィールの濃色パネル */
  --dr-message:  #ededed;  /* メッセージボックス */
  --dr-text:     #727576;  /* 本文 */
  --dr-accent:   #51b8c8;  /* 見出し・罫線 */
  --dr-gold:     #d4bc8c;  /* 得意施術 */

  /* --- レイアウト --- */
  --dr-row:      1030px;   /* メッセージ幅＝行の基準（中央寄せ） */
  --dr-panel-w:  781px;
  --dr-panel-h:  670px;
  --dr-photo:    505px;

    --c-gold-light:  #d4bc8c;

  background: var(--dr-bg);
  color: var(--dr-text);
  font-family: var(--ff-serif);
  overflow: clip;            /* 写真のはみ出しで横スクロールが出ないように */
}

/* ============================================================
   Experience
============================================================ */
.p-doctor__exp {
  padding: 140px 20px 0;     /* ヒーロー下端 669 → 英字ボックス上端 809 */
}
.p-doctor__exp .section-title__en { opacity: .15; }   /* PSD: Experience 15% */
.p-doctor__lead {
  width: 742px;
  max-width: 100%;
  margin: 16px auto 0;
  text-align: center;
  color: var(--c-white);
  font-size: 18px;
  line-height: 36px;
  opacity: .7;
}

/* --- 強みカード（TOPの .strength をこのページ用に微調整） --- */
.p-doctor__strength {
  width: min(1446px, 92%);   /* PSD: 237 → 1683 */
  margin: 111px auto 0;
  /* 本文の固定幅(401px)が列の最小幅を押し広げないように */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.p-doctor .strength__item {
  min-height: 586px;
  padding: 20px 40px 40px;
}
.p-doctor .strength__circle { margin: 31px 0 32px; }
.p-doctor .strength__item-title {
  font-size: clamp(24px, 2.1vw, 30px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--dr-text);
}
.p-doctor .strength__item-text {
  width: 401px;
  max-width: 100%;
  margin-top: 36px;
  font-size: 16px;
  line-height: 30px;
  color: var(--dr-text);
}

/* ============================================================
   Our Doctors
============================================================ */
.p-doctor__doctors {
  padding: 138px 20px 110px; /* カード下端 1730 → 英字 1868 / 最終メッセージ 5707 → CV 5818 */
}
.p-doctor__doctors .section-title__en { opacity: .2; }

/* --- 1名ぶんの行 --- */
.p-doctor__dr {
  position: relative;
  width: var(--dr-row);
  max-width: 100%;
  margin: 70px auto 0;
}
.p-doctor__dr + .p-doctor__dr { margin-top: 120px; }

/* 濃色パネル */
.p-doctor__panel {
  position: relative;
  z-index: 1;
  width: var(--dr-panel-w);
  min-height: var(--dr-panel-h);
  padding: 32px 60px 16px var(--dr-pad-l, 160px);
  background: var(--dr-panel);
  color: var(--c-white);
}
.p-doctor__dr--left  .p-doctor__panel { margin-left: 320px; --dr-pad-l: 160px; --dr-indent: 8px; }
.p-doctor__dr--right .p-doctor__panel {margin-left: -60px;
    --dr-pad-l: 60px;
    --dr-indent: 8px; }

/* 写真（パネルに 114px 重なる） */
.p-doctor__photo {
  position: absolute;
  top: 85px;
  z-index: 2;
  width: var(--dr-photo);
  height: 500px;
  margin: 0;
}
.p-doctor__dr--left  .p-doctor__photo { left: -72px; }
.p-doctor__dr--right .p-doctor__photo { right: -69px; }
.p-doctor__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 写真の左から外側へ伸びる細い線（PSD: Shape 3 169x1 #ededed）
   写真に乗っている 84px ぶんは写真の書き出しに含まれているので、外側の 85px だけ描く */
.p-doctor__photo::before {
  content: "";
  position: absolute;
  top: 195px;
  left: -85px;
  width: 85px;
  height: 1px;
  background: var(--dr-message);
}

/* --- 名前行 --- */
.p-doctor__head {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  width: 345px;                        /* PSD: 名前下の罫線 345px */
  padding: 0 0 18px var(--dr-indent, 18px);
  border-bottom: 1px solid var(--dr-accent);
  white-space: nowrap;
}
.p-doctor__position {
  margin: 0 0 1px;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .1em;
  white-space: nowrap;
}
.p-doctor__name {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1em;
  white-space: nowrap;
}
.p-doctor__sns {
  display: flex;
  gap: 11px;
  margin: 0 0 -2px 62px;
  padding: 0;
  list-style: none;
}
.p-doctor__sns-link {
  display: block;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--c-gold-light) no-repeat center / 35px 35px;
}
.p-doctor__sns-link--instagram { background-image: url("../../images/doctor/icon_instagram.png"); }
.p-doctor__sns-link--x         { background-image: url("../../images/doctor/icon_x.png"); }

/* --- 経歴 / 資格 / 得意施術 --- */
.p-doctor__profile {
  margin: 19px 0 0;
  font-size: 16px;
  line-height: 30px;
}
/* 罫線は 345px 固定（PSD）。本文はそれより長くてもはみ出して良い */
.p-doctor__profile-item {
  width: 345px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--dr-accent);
}
.p-doctor__profile-item dt,
.p-doctor__profile-item dd {
  padding-left: var(--dr-indent, 18px);
  white-space: nowrap;
}
.p-doctor__profile-item + .p-doctor__profile-item { margin-top: 22px; }
.p-doctor__profile-item:last-child { border-bottom: 0; padding-bottom: 0; }
.p-doctor__profile dt { color: var(--dr-accent); }
.p-doctor__profile dd { margin: 0; color: var(--c-white); }
.p-doctor__profile-item--specialty dd,
.p-doctor__profile-item:last-child dd { color: var(--dr-gold); }   /* 得意施術 / 担当 はゴールド */

/* --- 実績バッジ --- */
.p-doctor__badges {
  margin: 31px 0 0;
  padding-left: 17px;                  /* PSD: 罫線 922 → バッジ 939 */
}
.p-doctor__dr--right .p-doctor__badges { padding-left: 0; margin-left: -5px; }
.p-doctor__badges img { display: block; height: auto; }
.p-doctor__badges figcaption {
  margin-top: 12px;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: .05em;
  color: var(--c-white);
}
.p-doctor__badges--right figcaption {
  width: 535px;
  text-align: right;
}

/* --- メッセージ --- */
.p-doctor__message {
  position: relative;
  z-index: 1;
  margin-top: 28px;
  padding:60px 40px 60px 40px;
  background: var(--dr-message);
}
.p-doctor__quote {
  margin: 0;
  font-size: 24px;
  line-height: 30px;
  color: var(--dr-accent);
}
.p-doctor__text {
  margin-top: 28px;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: .025em;
  color: var(--dr-text);
}
.p-doctor__text p { margin: 0; }

/* ============================================================
   タブレット・SP
   ------------------------------------------------------------
   SPデザインは未支給。PCの構造を保ったまま重なりを解いて
   縦積みにする暫定対応。SPデザインが来たら差し替える。
============================================================ */
@media (max-width: 1260px) {  /* PC横並びレイアウトの成立最小幅=1260px（実測） */
  /* 固定幅 401px の本文が 3 列の最小幅を押し広げて横にはみ出すのを防ぐ */
  .p-doctor__strength { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-doctor .strength__item { min-height: 0; padding: 20px 24px 32px; }
  .p-doctor .strength__item-title { font-size: 24px; line-height: 1.3; }
  .p-doctor .strength__item-text { width: auto; }
  .p-doctor__dr {
    display: flex;
    flex-direction: column;
    width: min(781px, 100%);
  }
  .p-doctor__photo { order: -1; }      /* 写真 → パネル → メッセージ の順に積む */
  .p-doctor__dr--left  .p-doctor__panel,
  .p-doctor__dr--right .p-doctor__panel { margin-left: 0; width: 100%; }
  .p-doctor__photo {
    position: static;
    width: min(505px, 100%);
    height: auto;
    margin: 0 auto 24px;
  }
  .p-doctor__photo::before { display: none; }
  .p-doctor__dr--left  .p-doctor__panel,
  .p-doctor__dr--right .p-doctor__panel { --dr-pad-l: 40px; --dr-indent: 0px; }
  .p-doctor__panel { padding: 38px 40px 30px; }
  .p-doctor__message { margin-top: 24px; }
}

@media (max-width: 768px) {
  .p-doctor__exp { padding: 40px 16px 0; } /* SP余白統一 */
  .p-doctor__lead { font-size: 15px; line-height: 30px; }
  .p-doctor__lead br { display: none; }
  .p-doctor__strength { margin-top: 28px; gap: 28px; grid-template-columns: 1fr; width: 100%; } /* SP余白統一 */
  .p-doctor .strength__item { min-height: 0; padding: 20px 24px 32px; }
  .p-doctor .strength__item-title { font-size: 22px; line-height: 1.4; }
  .p-doctor .strength__item-text { width: 100%; margin-top: 20px; font-size: 15px; line-height: 28px; }

  .p-doctor__doctors { padding: 40px 16px; }
  .p-doctor__dr { margin-top: 28px; }
  .p-doctor__dr + .p-doctor__dr { margin-top: 40px; }
  .p-doctor__panel { min-height: 0; padding: 28px 20px 28px; }
  .p-doctor__head { width: auto; padding-left: 0; gap: 12px; }
  .p-doctor__name { font-size: 24px; }
  .p-doctor__sns { margin-left: auto; }
  .p-doctor__profile { padding-left: 0; font-size: 15px; line-height: 28px; }
  .p-doctor__profile-item { width: auto; }
  .p-doctor__profile-item dt,
  .p-doctor__profile-item dd { padding-left: 0; white-space: normal; }
  .p-doctor__dr--right .p-doctor__badges { margin-left: 0; }
  .p-doctor__badges { margin-top: 28px; padding-left: 0; }
  .p-doctor__badges img { max-width: 100%; }
  .p-doctor__badges--right figcaption { width: auto; text-align: left; }
  .p-doctor__message { padding: 32px 20px 28px; }
  .p-doctor__quote { font-size: 18px; line-height: 28px; }
  .p-doctor__text { margin-top: 20px; font-size: 15px; line-height: 28px; }
}