.philosophy {
  background-color: #fdfbfd;
  font-family:
    "Zen Maru Gothic",
    system-ui,
    -apple-system,
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  .philosophy__inner {
    padding: 46px 13px 80px;
  }

  .philosophy__contents-container {
    background-color: #fff6fc;
    box-shadow: inset 0px 0px 9px 6px rgba(247, 201, 212, 0.52);
    height: max-content;
    padding: 55px 20px;
    width: 100%;

    /* タブレット（中〜大）: 最大幅を設けて中央寄せ */
    @media (min-width: 568px) and (max-width: 767px) {
      margin-inline: auto;
      max-width: 560px;
    }

    /* PC: 2カラムグリッド */
    @media (min-width: 768px) {
      align-items: start;
      column-gap: 40px;
      display: grid;
      grid-template-areas:
        "image text-content"
        "image subject-title"
        "image target-list";
      grid-template-columns: 1fr 1fr;
      margin-inline: auto;
      width: 90%;
    }
  }

  .philosophy__content-wrapper {
    display: contents;
  }

  .philosophy__text-content {
    @media (max-width: 567px) {
      display: contents;
    }

    @media (min-width: 768px) {
      grid-area: text-content;
    }
  }

  .philosophy__content-heading {
    margin-inline: auto;
    margin-bottom: 10px;
    width: fit-content;
  }

  .philosophy__content-heading-text {
    color: #e7a1ab;
    font-size: 24px;
    font-weight: bold;

    @media (max-width: 567px) {
      font-size: clamp(18px, 3.45vw + 4.45px, 24px);
    }
  }

  .philosophy__content-description {
    color: #6e6e6e;
    font-size: 20px;
    line-height: 2.5;
    margin-bottom: 2em;
    text-align: center;
    white-space: nowrap;

    @media (max-width: 567px) {
      font-size: clamp(10px, 4.05vw - 2.96px, 20px);
    }
  }

  .philosophy__content-image {
    display: block;
    height: auto;
    margin-bottom: 37px;
    width: fit-content;

    /* タブレット: 画像を中央寄せ・適度なサイズ */
    @media (min-width: 568px) and (max-width: 767px) {
      margin-inline: auto;
      width: 55%;
    }

    @media (min-width: 768px) {
      align-self: center;
      grid-area: image;
      margin-inline: auto;
      margin-bottom: 0;
      width: 80%;
    }
  }

  .philosophy__content-subject-title {
    color: #e7a1ab;
    font-size: 24px;
    font-weight: bold;
    margin-inline: auto;
    margin-bottom: 12px;
    width: fit-content;

    @media (max-width: 567px) {
      font-size: clamp(18px, 3.45vw + 4.45px, 24px);
    }

    @media (min-width: 768px) {
      grid-area: subject-title;
    }
  }

  .philosophy__content-target-list {
    @media (min-width: 768px) {
      grid-area: target-list;
    }
  }

  .philosophy__content-target-list-item {
    position: relative;
    color: #6e6e6e;
    font-size: 20px;
    line-height: 2;
    margin-inline: auto;
    margin-bottom: 8px;
    text-align: center;
    width: fit-content;

    @media (max-width: 567px) {
      font-size: clamp(12px, 4.6vw + -6.07px, 20px);
    }

    &::before {
      position: absolute;
      top: 50%;
      left: -20px;
      aspect-ratio: 1 / 1;
      background-image: url("/wp-content/uploads/2026/02/heart_icon.svg");
      background-repeat: no-repeat;
      background-size: contain;
      content: "";
      height: 15px;
      transform: translateY(-50%);
      width: 15px;
    }

    &::after {
      position: absolute;
      top: 50%;
      right: -20px;
      aspect-ratio: 1 / 1;
      background-image: url("/wp-content/uploads/2026/02/heart_icon.svg");
      background-repeat: no-repeat;
      background-size: contain;
      content: "";
      height: 15px;
      transform: translateY(-50%);
      width: 15px;
    }
  }
}