/* s-doctor-001: 医師メッセージセクション */

.s-doctor-001 {
  position: relative;
  padding-top: var(--wp--preset--spacing--3-xl);
  padding-bottom: var(--wp--preset--spacing--3-xl);
  background-color: var(--wp--preset--color--gray-lightest);
  overflow: hidden;

  /* ピンク装飾矩形（左側） */
  &::before {
    content: "";
    position: absolute;
    top: var(--wp--preset--spacing--2-xl);
    left: 0;
    width: 40%;
    max-width: 480px;
    height: 65%;
    background-color: var(--wp--preset--color--secondary-lightest);
    border-radius: 0 var(--wp--custom--border--radius--2-xl) var(--wp--custom--border--radius--2-xl) 0;
    z-index: 0;
  }

  > * {
    position: relative;
    z-index: 1;
  }

  /* セクション見出しのオーバーライド */
  .c-heading-001 {
    margin-bottom: var(--wp--preset--spacing--xl);
  }

  .c-heading-001 .c-heading-001__en {
    color: var(--wp--preset--color--secondary);
    font-family: var(--wp--preset--font-family--noto-serif);
    font-style: italic;
    font-size: var(--wp--preset--font-size--2-xl);
    letter-spacing: var(--wp--custom--letter-spacing--normal);
    text-transform: none;
  }

  /* 2カラムレイアウト */
  .s-doctor-001__content {
    gap: var(--wp--preset--spacing--xl);
    align-items: flex-start;
  }

  .s-doctor-001__left {
    flex-basis: 35%;
  }

  .s-doctor-001__right {
    flex-basis: 65%;
    display: flex;
    align-items: center;
    position: relative;
  }

  /* 縦書き装飾テキスト */
  .s-doctor-001__right::after {
    content: "Beauty & Health Support";
    position: absolute;
    right: calc(-1 * var(--wp--preset--spacing--md));
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: var(--wp--preset--font-size--tiny);
    color: var(--wp--preset--color--gray-light);
    letter-spacing: var(--wp--custom--letter-spacing--extra-wide);
    line-height: var(--wp--custom--line-height--extra);
  }
}

/* レスポンシブ */
@media (max-width: 781px) {
  .s-doctor-001 {
    padding-top: var(--wp--preset--spacing--2-xl);
    padding-bottom: var(--wp--preset--spacing--2-xl);

    &::before {
      width: 55%;
      height: 45%;
      top: var(--wp--preset--spacing--lg);
    }

    .s-doctor-001__content {
      flex-direction: column;
    }

    .s-doctor-001__left,
    .s-doctor-001__right {
      flex-basis: 100%;
    }

    .s-doctor-001__right::after {
      display: none;
    }
  }
}

/* ══════════════════════════════════════════════════
   背景
   ══════════════════════════════════════════════════ */

/** @element root  @group 背景  @label 白  @order 1 */
.s-doctor-001--bg-white {
  background-color: var(--wp--preset--color--white);
}

/* ══════════════════════════════════════════════════
   装飾
   ══════════════════════════════════════════════════ */

/** @element root  @group 装飾  @label 装飾なし  @order 1 */
.s-doctor-001--deco-none::before {
  display: none;
}

/** @element root  @group 装飾  @label プライマリ装飾  @order 2 */
.s-doctor-001--deco-primary::before {
  background-color: var(--wp--preset--color--primary-light);
}

/* ══════════════════════════════════════════════════
   レイアウト
   ══════════════════════════════════════════════════ */

/** @element root  @group レイアウト  @label 逆順（右写真）  @order 1 */
.s-doctor-001--reverse .s-doctor-001__content {
  flex-direction: row-reverse;
}