/* ============================================
   s-doctor-01 — TOPページ Doctor セクション
   ============================================ */

.s-doctor-01 {
  position: relative;
  padding: var(--section-py) 0 0;
  /* 回転した装飾ピンク帯(::before/::after)の横はみ出しをクリップ（SP横スクロール防止） */
  overflow-x: clip;
}

/* wp-block-group デフォルト無効化（inner/content/catch/desc/btn は除外） */
.s-doctor-01 .wp-block-group:not([class*="__inner"]):not([class*="__content"]):not([class*="__catch"]):not([class*="__desc"]):not([class*="__btn"]):not([class*="c-heading"]) {
  max-width: none;
  padding: 0;
}

/* c-heading-07 をコンテナ幅内に配置 */
.s-doctor-01 .c-heading-07.wp-block-group {
  display: block;
  container-type: inline-size;
  max-width: var(--width-inner);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  z-index: 4;
  position: relative;
}

/* wp:image → s-doctor-01__photo として使用 */
.s-doctor-01__photo-img {
  margin: 0;
  height: 100%;
}

.s-doctor-01__photo-img img {
  display: block;
  width: 100%;
  height: 100%;
  /* container-type は不要（img自身を問い合わせるCQ無し）。付けると画像が intrinsic 高さで描画され
     SPで縦アスペクト比が壊れ上に巨大な空白が出るため削除 */
  max-width: var(--width-narrow);
  object-fit: contain;
  object-position: center bottom;
}

/* wp:separator → line-border */
.s-doctor-01 .wp-block-separator {
  flex: 1;
  height: 0;
  border-top: 1px solid var(--color-primary);
  opacity: 0.4;
  margin: 0;
}

/* wp:buttons → read more ボタン */
.s-doctor-01__more-btn .wp-block-button__link {
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-family: var(--font-family-en);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wider);
  padding: var(--space-sm) var(--space-4-xl);
}

/* 右上 ピンク三角 */
.s-doctor-01__inner::before {
  content: "";
    position: absolute;
    top: -60%;
    right: -10%;
    width: 60%;
    height: 80%;
    background: var(--color-primary-light);
    transform: rotate(-25deg);
    transform-origin: top right;
    pointer-events: none;
    z-index: 0;
}

/* 斜めピンク帯 — 写真と文字の境界 */
.s-doctor-01__inner::after {
        content: "";
    position: absolute;
    bottom: -675px;
    left: 0%;
    width: 42rem;
    height: 112rem;
    background: var(--color-primary-light);
    transform: rotate(65deg);
    pointer-events: none;
    z-index: 3;
}

/* --- "Doctor" + アイコン + 線（1行に並ぶ） --- */
.s-doctor-01__title {
  display: block;
  font-family: var(--font-family-en);
  font-size: var(--font-size-8-xl);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-none);
  color: var(--color-white);
  letter-spacing: var(--letter-spacing-wide);
  position: relative;
  z-index: 1;
  padding: 0 var(--container-padding);
  container-type: inline-size;
  max-width: var(--width-inner);
  margin: 0 auto;
}

.s-doctor-01__line {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--space-md);
  padding: 0 var(--container-padding);
  container-type: inline-size;
  max-width: var(--width-inner);
  margin: var(--space-md) auto var(--space-5-xl);
  position: relative;
  z-index: 1;
}

.s-doctor-01__line-border {
  flex: 1;
  height: 1px;
  background: var(--color-primary);
  opacity: 0.4;
}

.s-doctor-01__line-icon {
  flex-shrink: 0;
}

/* --- Inner Container (写真 + コンテンツ + キャッチ) --- */
/* z-index なし: 子要素が section の stacking context で直接競合 */
.s-doctor-01__inner {
  position: relative;
  container-type: inline-size;
  max-width: var(--width-inner);
  margin: 0 auto;
  padding: 0 ;
  display: flex;
  flex-direction: column;
  gap: var(--space-5-xl);
}

/* --- 写真エリア --- */
.s-doctor-01__photo-wrap {
  position: relative;
  z-index: 1;
}

.s-doctor-01__photo {
  display: block;
  width: 100%;
  max-height: 50rem;
  object-fit: contain;
  object-position: center bottom;
}

/* --- "Akie Matsunaga" ウォーターマーク --- */
.s-doctor-01__name-en {
  display: none;
}

/* --- 縦書きキャッチコピー --- */
.s-doctor-01__catch {
  writing-mode: vertical-rl;
  font-family: var(--font-family-jp);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--letter-spacing-hero);
  color: var(--color-text);
}

.s-doctor-01__catch-main,
.s-doctor-01__catch-sub {
  display: block;
  white-space: nowrap;
}

.s-doctor-01__catch-main {
  font-size: var(--font-size-2-xl);
  line-height: var(--line-height-loose);
  margin-left: var(--space-xl);
}

.s-doctor-01__catch-sub {
  font-size: var(--font-size-md);
  line-height: var(--line-height-loose);
}

/* --- コンテンツエリア --- */
.s-doctor-01__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}


.s-doctor-01__clinic {
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-text);
  margin: 0;
}

.s-doctor-01__position {
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-text);
}

.s-doctor-01__desc {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  color: var(--color-text);
}

.s-doctor-01__desc p {
  margin-bottom: var(--space-xl);
}

.s-doctor-01__desc p:last-child {
  margin-bottom: 0;
}

.s-doctor-01__btn-wrap {
  text-align: center;
  margin-top:var(--space-2-xl);
  width: 100%;
}

/* --- read more ボタン --- */
.s-doctor-01__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-4-xl);
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-family: var(--font-family-en);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wider);
  text-decoration: none;
  transition: opacity var(--transition-normal);
}

.s-doctor-01__more:hover {
  opacity: 0.8;
}

/* read more 末尾の「・」を ot-g-01 オーナメント（白=塗りピル用）に置換 */
.s-doctor-01__more-dot {
  display: inline-block;
  width: var(--font-size-2-xs);
  height: var(--font-size-2-xs);
  margin-left: var(--space-xs);
  font-size: 0;
  color: transparent;
  line-height: var(--line-height-none);
  background: url("../../images/icon/icon--ot-g-01-white.svg") center / contain no-repeat;
}

/* SP: B案。写真と縦書きを1行、本文を次の行へ。PCのCQは変更しない。
   WordPressのflow余白とPC用装飾をこの幅だけ解除し、空の行を作らない。 */
@media (max-width: 599px) {
  .s-doctor-01 .c-heading-07.wp-block-group {
    padding-block: var(--space-sm) var(--space-3-xl);
  }

  .s-doctor-01 .c-heading-07__en {
    font-size: var(--font-size-5-xl);
    color: var(--color-primary);
  }

  .s-doctor-01 .c-heading-07__title {
    margin-top: var(--space-xs);
    font-size: var(--font-size-sm);
  }

  .s-doctor-01 {
    padding-block: var(--space-6-xl);
  }

  .s-doctor-01 .s-doctor-01__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3-xl) var(--space-md);
    padding-inline: var(--container-padding);
    min-height: 0;
  }

  .s-doctor-01__inner::before,
  .s-doctor-01__inner::after {
    content: none;
  }

  .s-doctor-01__inner > * {
    margin-block: 0;
    min-width: 0;
  }

  .s-doctor-01 .s-doctor-01__photo-wrap {
    grid-column: 1;
    grid-row: 1;
    position: static;
    width: auto;
    height: auto;
  }

  .s-doctor-01__photo,
  .s-doctor-01__photo-img,
  .s-doctor-01__photo-img img {
    height: auto;
    max-height: none;
    width: 100%;
    object-fit: contain;
  }

  .s-doctor-01 .s-doctor-01__catch {
    grid-column: 2;
    grid-row: 1;
    position: static;
    transform: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    writing-mode: vertical-rl;
    align-self: center;
  }

  .s-doctor-01__catch-main,
  .s-doctor-01__catch-sub {
    margin: 0;
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-wide);
  }

  .s-doctor-01__catch-main {
    font-size: var(--font-size-xl);
  }

  .s-doctor-01__catch-sub {
    font-size: var(--font-size-2-xs);
  }

  .s-doctor-01 .s-doctor-01__content {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    padding: 0;
    gap: var(--space-xs);
  }

  .s-doctor-01__content > * {
    margin-block: 0;
  }

  .s-doctor-01 .s-doctor-01__desc {
    margin-top: var(--space-md);
    font-size: var(--font-size-lg);
  }

  .s-doctor-01__desc p + p {
    margin-top: var(--space-xl);
  }

  .s-doctor-01__desc p {
    margin-bottom: 0;
  }

  .s-doctor-01__position {
    font-size: var(--font-size-xl);
  }

  .s-doctor-01 .s-doctor-01__btn-wrap {
    margin-top: var(--space-2-xl);
  }
}

/* =============================================
   Responsive: PC (min-width: 768px)
   ============================================= */
@container (min-width: 600px) {
  /* "Doctor" — 大型、中央寄り */
  .s-doctor-01__title {
    margin-right:31rem;
    font-size: 10rem;
    text-align: center;
    padding-right: 30%;
  }

  /* 装飾ライン — "Doctor"の右から右端へ */
  .s-doctor-01__line {
    margin-top: calc(var(--space-md) * -1);
    margin-bottom: var(--space-5-xl);
    padding-left: 35%;
  }

  /* 内部レイアウト — position で写真を左端に飛び出させる */
  .s-doctor-01__inner {
    position: relative;
    min-height: 65rem;
    container-type: inline-size;
    max-width: var(--width-inner);
    margin: 0 auto;
    padding: 0;
  }

  /* 写真 — 左端（viewport端）から42%、ピンク帯の下 */
  /* width 必須: position:absolute + 子 img の width:100% は循環参照で幅0に潰れるため明示する */
  .s-doctor-01__photo-wrap {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 42%;
    z-index: 2;
  }

  .s-doctor-01__photo-img {
    height: 100%;
    margin: 0;
  }

  .s-doctor-01__photo,
  .s-doctor-01__photo-img img {
    max-height: none;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top center;
  }

  /* "Akie Matsunaga" — inner 基準の absolute、ピンク帯の上 */
  .s-doctor-01__name-en {
    display: block;
    position: absolute;
    bottom: var(--space-5-xl);
    left: 0;
    font-family: var(--font-family-en);
    font-size: 10rem;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-xs);
    color: var(--color-white);
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
  }

  /* コンテンツ — 右側、ピンク帯の上 */
  .s-doctor-01__content {
    margin-left: 45%;
    min-width: 0;
    justify-content: flex-start;
    padding-top: var(--space-3-xl);
    padding-right: 17rem;
    position: relative;
    z-index: 4;
  }

  .s-doctor-01__clinic {
    font-size: var(--font-size-md);
  }

  .s-doctor-01__position {
    font-size: var(--font-size-xl);
    letter-spacing: var(--letter-spacing-display);
  }

  .s-doctor-01__desc {
    font-size: var(--font-size-md);
  }

  /* 縦書きキャッチ — 右端、2列横並び */
  .s-doctor-01__catch {
    position: absolute;
    right: var(--space-3-xl);
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
  }

  .s-doctor-01__catch-main {
    font-size: var(--font-size-3-xl);
    margin-left: var(--space-2-xl);
  }

  .s-doctor-01__catch-sub {
    font-size: var(--font-size-xs);
  }
}