@charset "UTF-8";

/* 美容内服ページ固有の色・画像。レイアウトは treatment.css で共通化。 */
.mp-beauty-internal-page {
  --mp-treatment-accent: #48A8E0;
  --mp-treatment-surface: #F4FBFF;
  --mp-treatment-type-surface: #F4FBFF;
  --mp-treatment-hero-bg-pc: url("../../images/beauty-internal/hero-bg-pc.png");
  --mp-treatment-hero-bg-sp: url("../../images/beauty-internal/hero-bg-sp.png");
  --mp-treatment-points-bg: url("../../images/beauty-internal/bg-texture.png");
  --mp-treatment-check-icon: url("../../images/beauty-internal/check-icon.svg");

  /* 処方薬一覧セクション下の余白 */
  --mp-beauty-items-padding-bottom-pc: 105px;
  --mp-beauty-items-padding-bottom-tablet: 47px;
  --mp-beauty-items-padding-bottom-sp: 53px;
  --mp-beauty-set-body-cta-gap-sp: 0px;
}

.mp-beauty-internal-page .mp-medical-diet-items {
  padding-bottom: 68px;
}

.mp-medical-diet-types {
  padding-top: 69px;
  padding-bottom: 70px;
}

.mp-medical-diet-types .mp-medical-diet-section__head h2::after {
  width: 120%;
}

.mp-medical-diet-type__image img:not(.mp-medical-diet-type__image-no-max-width) {
  max-width: 56%;
}

.mp-beauty-internal-page .mp-medical-diet-type__image {
  position: relative;
}

.mp-beauty-internal-page .mp-medical-diet-type__image img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  max-height: 69%;
}

.mp-medical-diet-type:nth-child(even) {
  grid-template-columns: 457px 482px;
}

.mp-medical-diet-sets .mp-medical-diet-section__head::after {
  width: 216px;
}

.mp-medical-diet-items .mp-medical-diet-section__head::after {
  width: 276px;
}

/* Tablet: medical-diet と同じ1列構成に統一する。 */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .mp-beauty-internal-page .mp-medical-diet-type,
  .mp-beauty-internal-page .mp-medical-diet-type:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .mp-beauty-internal-page .mp-medical-diet-type__head,
  .mp-beauty-internal-page .mp-medical-diet-type__body,
  .mp-beauty-internal-page .mp-medical-diet-type:nth-child(even) .mp-medical-diet-type__head,
  .mp-beauty-internal-page .mp-medical-diet-type:nth-child(even) .mp-medical-diet-type__body {
    grid-column: 1;
    margin-left: 0;
  }

  .mp-beauty-internal-page .mp-medical-diet-type__media,
  .mp-beauty-internal-page .mp-medical-diet-type:nth-child(even) .mp-medical-diet-type__media {
    grid-column: 1;
    grid-row: 3;
    width: min(457px, 100%);
    margin: 0 auto;
  }

  .mp-beauty-internal-page .mp-medical-diet-type__image {
    width: 100%;
    height: auto;
    aspect-ratio: 457 / 448;
  }
}

@media screen and (max-width: 767px) {
  .mp-medical-diet-hero__inner {
    width: 100%;
  }

  .mp-medical-diet-sets .mp-medical-diet-section__head::after {
    width: 44%;
  }

  .mp-medical-diet-items .mp-medical-diet-section__head::after {
    width: 64%;
  }

  .mp-medical-diet-sets .mp-medical-diet-section__head {
    margin-bottom: 38px;
  }

  .mp-beauty-internal-page .mp-medical-diet-sets__grid--mobile .mp-medical-diet-set-card ul {
    box-sizing: border-box;
    height: calc(4.7em + 16px);
    white-space: normal;
  }

  .mp-beauty-internal-page .mp-medical-diet-sets__grid--mobile .mp-medical-diet-set-card ul.mp-medical-diet-set-card__items--two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mp-beauty-internal-page .mp-medical-diet-sets__grid--mobile .mp-medical-diet-set-card:nth-child(2) ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mp-beauty-internal-page .mp-medical-diet-sets__grid--mobile .mp-medical-diet-set-card:nth-child(2) ul li {
    grid-column: auto;
    white-space: nowrap;
  }

  .mp-beauty-internal-page .mp-medical-diet-sets__grid--mobile .mp-medical-diet-set-card li {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .mp-beauty-internal-page .mp-medical-diet-sets__grid--mobile .mp-medical-diet-set-card__prices {
    display: flex;
    align-items: flex-end;
    min-height: 0;
    margin-top: 6px;
    padding-top: 8px;
  }

  .mp-beauty-internal-page .mp-medical-diet-sets__grid--mobile .mp-medical-diet-set-card__price,
  .mp-beauty-internal-page .mp-medical-diet-sets__grid--mobile .mp-medical-diet-set-card:first-child .mp-medical-diet-set-card__price {
    display: flex;
    flex-wrap: nowrap;
  }

  .mp-beauty-internal-page .mp-medical-diet-sets__grid--mobile .mp-medical-diet-set-card__price strong {
    white-space: nowrap;
  }

  .mp-beauty-internal-page .mp-medical-diet-sets__grid--mobile .mp-medical-diet-set-card__cta--sp {
    margin-top: var(--mp-beauty-set-body-cta-gap-sp);
  }

  .mp-beauty-internal-page .mp-medical-diet-sets__grid--mobile .mp-medical-diet-set-card,
  .mp-beauty-internal-page .mp-medical-diet-sets__grid--mobile .mp-medical-diet-set-card:nth-child(1),
  .mp-beauty-internal-page .mp-medical-diet-sets__grid--mobile .mp-medical-diet-set-card:nth-child(2) {
    height: auto;
  }

  .mp-medical-diet-items .mp-medical-diet-item-card h3 {
    font-size: 16px;
  }

  .mp-medical-diet-items .mp-medical-diet-items__grid {
    gap: 20px 12px;
  }

  /* Safariで縦長画像が拡大・トリミングされる問題を回避 */
  .mp-beauty-internal-page .mp-medical-diet-item-card:nth-child(-n + 2) .mp-medical-diet-item-card__image {
    position: relative;
  }

  .mp-beauty-internal-page .mp-medical-diet-item-card:nth-child(-n + 2) .mp-medical-diet-item-card__image img {
    position: absolute;
    inset: 8px;
    width: calc(100% - 16px) !important;
    height: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    max-height: calc(100% - 16px) !important;
    object-fit: contain;
    object-position: center;
  }

  .mp-medical-diet-items__grid .mp-medical-diet-note {
    margin-top: 10px;
  }

  body.mp-beauty-internal-page .mp-medical-diet-sets > .mp-medical-diet-note.mp-medical-diet-sets__note--mobile {
    margin-top: 50px;
  }

  .mp-beauty-internal-page .mp-medical-diet-items {
    padding-bottom: 38px;
  }

  .mp-medical-diet-section.mp-medical-diet-types{
    padding: 25px 0 49px;
  }

  .mp-beauty-internal-page .mp-medical-diet-type__image img {
    max-height: 100%;
  }

  .mp-medical-diet-sets__grid--mobile .mp-medical-diet-set-card:first-child .mp-medical-diet-set-card__prices {
    min-height: 0;
    margin-top: 6px;
    margin-bottom: 10px;
  }

  .mp-medical-diet-sets__grid--mobile .mp-medical-diet-set-card:nth-child(2) .mp-medical-diet-set-card__prices {
    min-height: 0;
    margin-top: 6px;
  }
}

@media screen and (min-width: 1200px) {
  .mp-beauty-internal-page .mp-medical-diet-type__image {
    height: 430px;
    aspect-ratio: auto;
  }

  /* 偶数項の右側コンテンツを、奇数項の予約ボタン左端に揃える */
  .mp-beauty-internal-page .mp-medical-diet-type:nth-child(even) .mp-medical-diet-type__head,
  .mp-beauty-internal-page .mp-medical-diet-type:nth-child(even) .mp-medical-diet-type__body {
    margin-left: calc((457px - 344px) / 2);
  }
}