/*=========================
  page mv
=========================*/
section.page-mv {
  height: 500px;
  position: relative;
  .mv-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .page-title {
    position: absolute;
    z-index: 1;
    top: 60%;
    left: 50%;
    translate: -50% -50%;
    color: #ffffff;
    text-shadow: 0px 3px 6px rgb(0 0 0 / 0.5);
    text-align: center;
    .jp {
      font-size: 3rem;
      font-weight: 700;
    }
    .en {
      font-size: 2rem;
    }
  }
}
@media (max-width: 960px) {
  section.page-mv {
    height: 300px;
    .mv-img {
      object-fit: cover;
      object-position: 75% 50%;
    }
    .page-title {
      top: 65%;
      left: 0%;
      translate: 0% -50%;
      width: 100%;
      .jp {
        font-size: 2rem;
      }
      .en {
        font-size: 1.5rem;
      }
    }
  }
}

/* common */
.page-section-title {
  text-align: center;
  text-wrap: balance;
  position: relative;
  margin-bottom: 3rem;
  .bg-img {
    margin-inline: auto;
  }
  .title {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
  }
}
@media (max-width: 960px) {
  .page-section-title {
    margin-bottom: 1rem;
    .bg-img {
      width: 120px;
    }
    .title {
      font-size: 2rem;
    }
  }
}

/*=========================
  当院の特徴
=========================*/
section.clinic-features {
  padding-top: 5rem;
  .texts-image {
    position: relative;
    margin-bottom: 5rem;
    .texts {
      position: absolute;
      z-index: 1;
      bottom: 0;
      left: 0;
      width: 50%;
      max-width: 750px;
      margin-left: 10%;
      background-color: #ffffff;
      padding: 5%;
      .title {
        font-size: 1.75rem;
        font-weight: 700;
        padding-bottom: 1.5rem;
        margin-bottom: 1.5rem;
        border-bottom: #000538 2px dotted;
      }
      .text {
        font-size: 1.1rem;
      }
    }
    .image {
      width: 65%;
      height: 600px;
      margin-left: auto;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .texts-image.reverse {
    .texts {
      left: initial;
      right: 0;
      margin-left: initial;
      margin-right: 10%;
    }
    .image {
      margin-left: initial;
      margin-right: auto;
    }
  }
  .flex-images {
    padding: 5rem 0;
    margin-bottom: 5rem;
    background-color: #eff3f5;
    position: relative;
    .inner {
      width: calc(100% - 2rem);
      max-width: 1200px;
      margin-inline: auto;
    }
    .flex {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2rem;
    }
    .title {
      text-align: center;
      line-height: 1;
      margin-bottom: 3rem;
      .en {
        color: #7076b4;
        font-size: 2rem;
        margin-bottom: 1rem;
      }
      .jp {
        font-size: 2.5rem;
      }
    }
    .text {
      font-size: 1.25rem;
      text-align: center;
      text-wrap: balance;
      margin-bottom: 3rem;
    }
    .item {
      .item-img {
        width: 100%;
        min-height: fit-content;
        aspect-ratio: 4/3;
        margin-bottom: 0.5rem;
      }
      .item-title {
        text-align: center;
        font-size: 1.25rem;
      }
    }
    .bg-img {
      position: absolute;
      bottom: 0;
      right: 0;
      width: calc(200 / 1920 * 100vw);
    }
  }
}
@media (max-width: 960px) {
  section.clinic-features {
    .texts-image,
    .texts-image.reverse {
      .texts {
        position: static;
        width: calc(100% - 2rem);
        max-width: 1200px;
        margin-inline: auto;
        margin-bottom: 2rem;
        padding: 0;
        .title {
          font-size: 1.25rem;
          text-align: center;
          text-wrap: balance;
        }
      }
      .image {
        width: 100%;
        height: 240px;
      }
    }
    .flex-images {
      .inner {
        width: 80%;
      }
      .flex {
        flex-direction: column;
      }
      .title {
        margin-bottom: 3rem;
        .en {
          font-size: 1.5rem;
        }
        .jp {
          font-size: 2rem;
        }
      }
      .text {
        font-size: 1rem;
        margin-bottom: 3rem;
      }
      .bg-img {
        display: none;
      }
    }
  }
}

/*=========================
  院内紹介
=========================*/
section.clinic-gallery {
  margin-bottom: 5rem;
  .container {
    width: calc(100% - 2rem);
    max-width: 1200px;
    margin-inline: auto;
  }
  .main-carousel {
    margin-bottom: 2rem;
    width: 100%;
    max-width: 800px;
    margin-inline: auto;
  }
  .thumbnail-carousel {
    .splide__slide {
      opacity: 0.6;
    }
    .splide__slide.is-active {
      opacity: 1;
      border: solid 2px rgb(0 0 0 / 1);
    }


  }
  .splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/*=========================
  設備紹介
=========================*/
section.clinic-equipment {
  margin-bottom: 5rem;
  .container {
    width: calc(100% - 2rem);
    max-width: 1200px;
    margin-inline: auto;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  .grid-item {
    .item-img {
      width: 100%;
      height: fit-content;
      aspect-ratio: 4/3;
      margin-bottom: 0.5rem;
    }
    .item-title {
      text-align: center;
      font-size: 1.25rem;
    }
  }
}
@media (max-width: 960px) {
  section.clinic-equipment {
    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
    .grid-item {
      .item-img {
      }
      .item-title {
        font-size: 1rem;
      }
    }
  }
}

/*=========================
  院長紹介
=========================*/
section.clinic-director {
  margin-bottom: 5rem;
  .container {
    width: calc(100% - 2rem);
    max-width: 1200px;
    margin-inline: auto;
  }
  .main-image {
    position: relative;
    margin-bottom: 3rem;
    .director-img {
      width: 100%;
      height: 500px;
      object-fit: cover;
    }
    .director-name {
      position: absolute;
      bottom: 4%;
      left: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      border-bottom: #707070 1px solid;
      padding-bottom: 0.5rem;
      .post {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100vmax;
        background-color: #ffffff;
        aspect-ratio: 1/1;
        width: 60px;
        min-height: fit-content;
        font-size: 1.25rem;
        box-shadow: 0px 3px 6px rgb(0 0 0 / 0.1);
      }
      .jp {
        font-size: 2.5rem;
      }
      .en {
        font-size: 1.5rem;
      }
    }
  }
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
    .text {
      width: 60%;
      /* font-size: 1.1rem; */
      font-weight: 300;
    }
    .img {
      width: 40%;
      min-height: fit-content;
      aspect-ratio: 4/3;
      object-fit: cover;
    }
  }
  .profile {
    padding: 3rem 0;
    background-color: #eff3f5;
    .flex {
      width: calc(100% - 2rem);
      max-width: 1200px;
      margin-inline: auto;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 2rem;
    }
    .flex-left {
      width: 50%;
    }
    .flex-right {
      width: 50%;
    }
    .title {
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }
    .career {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 2rem;
      li {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1/-1;
        line-height: 2;
        margin-bottom: 0.5rem;
      }
    }
    .associations {
      li {
        line-height: 2;
        margin-bottom: 0.5rem;
      }
    }
  }
}
@media (max-width: 960px) {
  section.clinic-director {
    .main-image {
      position: relative;
      margin-bottom: 2rem;
      .director-img {
        width: 100%;
        height: 240px;
        margin-bottom: 0.5rem;
      }
      .director-name {
        position: static;
        padding-bottom: 0.5rem;
        width: 90%;
        margin-inline: auto;
        .post {
          width: 45px;
          min-height: fit-content;
          font-size: 0.8rem;
        }
        .jp {
          font-size: 1.75rem;
        }
        .en {
          display: none;
        }
      }
    }
    .flex {
      flex-direction: column;
      .text {
        width: 100%;
      }
      .img {
        width: 85%;
        max-width: 500px;
        margin-inline: auto;
      }
    }
    .profile {
      .flex {
        flex-direction: column;
        .flex-left {
          width: 100%;
        }
        .flex-right {
          width: 100%;
        }
        .title {
          text-align: center;
          text-wrap: balance;
        }
        .career {
          column-gap: 1rem;
          li {
          }
        }
      }
    }
  }
}

/*=========================
  歯科医師のご紹介
=========================*/
section.clinic-doctor {
  margin-bottom: 5rem;
  .container {
    width: calc(100% - 2rem);
    max-width: 1200px;
    margin-inline: auto;
  }
  .flex {
    margin-bottom: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    .texts {
      width: 60%;
      .title {
        font-size: 2rem;
        margin-bottom: 2rem;
      }
      .text {
        margin-bottom: 2rem;
      }
      .name {
        display: flex;
        align-items: center;
        gap: 1rem;
        width: fit-content;
        border-bottom: #707070 1px solid;
        padding-bottom: 0.5rem;
        .post {
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 100vmax;
          background-color: #ffffff;
          aspect-ratio: 1/1;
          width: 60px;
          min-height: fit-content;
          font-size: 0.9rem;
          text-align: center;
          text-wrap: balance;
          box-shadow: 0px 3px 6px rgb(0 0 0 / 0.1);
        }
        .jp {
          font-size: 2.5rem;
        }
        .en {
          font-size: 1.5rem;
        }
      }
    }
    .img {
      width: 40%;
      min-height: fit-content;
      aspect-ratio: 4/3;
      object-fit: cover;
    }
  }
  .profile {
    padding: 3rem 0;
    background-color: #eff3f5;
    .flex {
      width: calc(100% - 2rem);
      max-width: 1200px;
      margin-inline: auto;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 2rem;
    }
    .flex-left {
      width: 50%;
    }
    .flex-right {
      width: 50%;
    }
    .title {
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }
    .career {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 2rem;
      li {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1/-1;
        line-height: 2;
        margin-bottom: 0.5rem;
      }
    }
    .associations {
      li {
        line-height: 2;
        margin-bottom: 0.5rem;
      }
    }
  }
}
@media (max-width: 960px) {
  section.clinic-doctor {
    .flex {
      flex-direction: column;
      .texts {
        width: 100%;
        .title {
          font-size: 1.5rem;
          text-align: center;
          text-wrap: balance;
          margin-bottom: 2rem;
        }
        .text {
          margin-bottom: 2rem;
        }
        .name {
          width: 90%;
          margin-inline: auto;
          justify-content: center;
          .post {
            width: 50px;
            font-size: 0.8rem;
          }
          .jp {
            font-size: 2rem;
          }
          .en {
            display: none;
          }
        }
      }
      .img {
        width: 100%;
        max-width: 500px;
        margin-inline: auto;
      }
    }
    .profile {
      padding: 3rem 0;
      background-color: #eff3f5;
      .flex {
        flex-direction: column;
      }
      .flex-left {
        width: 100%;
      }
      .flex-right {
        width: 100%;
      }
      .title {
        text-align: center;
        text-wrap: balance;
      }
      .career {
        column-gap: 1rem;
        li {
        }
      }
      .associations {
        li {
          line-height: 2;
          margin-bottom: 0.5rem;
        }
      }
    }
  }
}