:root {
  --title-font: "Zen Maru Gothic", sans-serif;
  --title-weight: 700;
  --title-size: 2.8rem;
  --main-font: "Noto Sans JP", sans-serif;
  --main-weight: 400;
  --main-size: 1.6rem;
}

.main {
  background-color: #F6F8FB;
}

/* ヒーローセクション */
.misaki-page-hero {
  position: relative;
  width: 100%;
  height: 28.5rem;
  margin-top: min(10rem, 110px);
  overflow: hidden;
  color: #fff;
  font-family: 'Zen Maru Gothic', sans-serif;
}

.misaki-page-hero__visual,
.misaki-page-hero__shade {
  position: absolute;
  inset: 0;
}

.misaki-page-hero__visual {
  overflow: hidden;
}

.misaki-page-hero__visual img {
  position: absolute;
  top: -36.4rem;
  left: 0;
  width: 144rem;
  height: 96.012rem;
  max-width: none;
  object-fit: contain;
  transform: scale(-1, -1);
  rotate: calc(180deg);
}

.misaki-page-hero__shade {
  background: rgba(0, 0, 0, 0.29);
}

.misaki-page-hero__title {
  position: absolute;
  top: 10.3rem;
  left: 50%;
  min-width: 10.6rem;
  height: 6.9rem;
  text-align: center;
  font-weight: 700;
  transform: translateX(-50%);
}

.misaki-page-hero__title span {
  position: absolute;
  left: 50%;
  white-space: nowrap;
  transform: translateX(-50%);
}

.misaki-page-hero__title-ja {
  top: 0;
  font-size: 2.8rem;
}

.misaki-page-hero__title-en {
  top: 4.6rem;
  font-size: 1.6rem;
}

/* ヒーローセクションここまで */



.palliative img {
  width: 8.8rem;
  height: 8rem;
  object-fit: cover;
}

.palliative h2 {
  font-family: var(--title-font);
  font-weight: var(--title-weight);
  font-size: var(--title-size);
  letter-spacing: calc(0 / 100 * 28 / 10 * 1rem);
  color: #575757;
}

.palliative p {
  font-family: var(--title-font);
  font-weight: var(--title-weight);
  font-size: var(--main-size);
  letter-spacing: calc(0 / 100 * 28 / 10 * 1rem);
  color: #B7B7B7;
}

.palliative {
  display: flex;
  gap: 1.2rem;
  width: 125rem;
  margin: 0 auto;
  text-align: left;
}

.palliative__section {
  background-image: url("../img/palliative/heartbg_img_pic1.svg");
  background-size: 58.4rem 53.1rem;
  background-position: right 17rem;
  background-repeat: no-repeat;
  margin-top: 12.2rem;
}

.palliative__care__container {
  width: 116rem;
  margin: 0 auto;

}

.palliative__care__title {
  font-family: var(--title-font);
  font-weight: var(--title-weight);
  font-size: var(--title-size);
  line-height: calc(50 / 28);
  letter-spacing: calc(20 / 100 * 28 / 10 * 1rem);
  color: #FF97AB;
  text-align: left;
  margin-top: 4.9rem;
}

.palliative__care__container p {
  font-family: var(--main-font);
  font-weight: var(--main-weight);
  font-size: var(--main-size);
  line-height: calc(34 / 16);
  letter-spacing: calc(0 / 100 * 28 / 10 * 1rem);
  color: #575757;
  text-align: left;
  margin-top: 4rem;
}



.palliative__care__wrap img {
  width: 55.8rem;
  height: 32.1rem;
  object-fit: cover;
}

.palliative__care__wrap {
  display: flex;
  gap: 5rem;
  padding-top: 3.6rem;
  padding-bottom: 12rem;
}

.palliative__care__text {
  width: 55.2rem;
  height: 21.2rem;
  margin-top: 3.7rem;
  background-color: #FFFFFF;
  border: solid 0.3rem #F6B8C4;
}

.palliative__care__text h3 {
  font-family: var(--main-font);
  font-weight: var(--title-weight);
  font-size: 1.8rem;
  line-height: calc(34 / 18);
  color: #FFFFFF;
  background: #F6B8C4;
  clip-path: polygon(0% 0, 100% 0, 90% 100%, 0 100%);
  display: inline-block;
  padding-right: 13.8rem;
  padding-left: 3.5rem;

}

.palliative__care__text p {
  font-family: var(--main-font);
  font-weight: var(--main-weight);
  font-size: var(--main-size);
  line-height: calc(34 / 16);
  color: #575757;
  text-align: left;
  width: 47.4rem;
  margin: 3.4rem auto 0rem;
}

@media screen and (max-width:699.98px) {

  .misaki-page-hero {
    width: 37.5rem;
    height: 26.8rem;
    margin-top: 8.4rem;
  }

  .misaki-page-hero__visual img {
    top: -19rem;
    left: -27rem;
    width: 92.9rem;
    height: 61.932rem;
  }

  .misaki-page-hero__title {
    top: 8.4rem;
    min-width: 9.3rem;
    height: 5.4rem;
  }

  .misaki-page-hero__title-ja {
    font-size: 2.4rem;
  }

  .misaki-page-hero__title-en {
    top: 3.5rem;
    font-size: 1.4rem;
  }




  .palliative__section {
    background-size: 28.4rem 57rem;
    margin-top: 4.6rem;
  }

  .palliative {
    width: 35.1rem;
  }

  .palliative h2 {
    font-size: 2.4rem;
  }

  .palliative__care__container {
    width: 35.1rem;
  }

  .palliative__care__wrap img {
    width: 22rem;
    height: 12.6rem;

  }

  .palliative__care__wrap {
    flex-direction: column;
    gap: 0rem;
    align-items: end;
  }

  .palliative__care__text {
    width: 35.1rem;
    margin-top: 0rem;

  }

  .palliative__care__text p {
    width: 31.9rem;
    margin: 1.6rem auto 2rem;
  }
}