@charset "UTF-8";



/* -------------*/

#mainv {
  position: relative;
  /* background: linear-gradient(165deg, rgb(97 105 255) 10%, rgb(3, 65, 156) 42%, rgb(60 46 107) 72%); */
  background: linear-gradient(145deg, rgb(94 110 255) 0%, rgb(6 129 214) 36%, rgb(3, 65, 156) 53%, rgb(100 86 123) 75%);

  &:after {
    position: absolute;
    content: "";
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/home/mainv/image/anchor-moon.svg);
    width: 995px;
    height: 985px;
    top: 142px;
    left: calc(50% - 60px);
    transform: translatex(-50%);
    pointer-events: none;
    z-index: 2;
  }

  .news-box {
    display: flex;
    gap: 40px;
    z-index: 3;
    position: relative;

    .titles {
      a {
        color: #fff;
        font-weight: normal;
      }
    }



    .news-list {
      padding-top: 15px;
      flex: 1;

      li {
        color: #fff;
      }
    }
  }

  .btn-type01 {
    margin-top: 30px;
  }
}


#home-message {
  background-image: url(../images/home/image-desc_message.jpg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  padding: 55px 0;
  margin-top: -295px;
  position: relative;

  .message-inner {
    z-index: 3;
    position: relative;
    color: #fff;
    text-align: center;
    font-family: var(--font-mincho);

    em {
      font-size: 2.8rem;
      font-weight: 600;
      margin-bottom: 15px;
      display: inline-block;
    }

    p {
      font-size: 1.7rem;
      line-height: 2.8;
      font-weight: 600;
    }
  }
}

#home-doctor {
  background: linear-gradient(165deg, rgb(97 105 255) 23%, rgb(3, 65, 156) 42%, rgb(76, 111, 137) 72%);

  .container-inner {
    padding-top: 50px;
    padding-bottom: 60px;
  }

  .staff-list {
    margin-top: 40px;

    >li {
      &:not(:last-child) {
        margin-bottom: 80px;
      }
    }

    .staff-inner {
      display: flex;
      gap: 47px;
    }

    .image-box {
      width: 180px;
    }

    .name-box {
      /* padding-left: 5px; */
      padding-top: 5px;

      .status {
        font-family: var(--font-mincho);
      }

      .name-ja {
        font-family: var(--font-mincho);
        font-weight: 600;
        margin-left: 5px;
        font-size: 2.2rem;
      }

      .name-en {
        font-family: var(--font-cinzel);
        font-size: 2.0rem;
      }
    }

    .propertybox {
      display: flex;
      gap: 35px;
      margin-top: -5px;

      ul {
        li {
          line-height: 2.05;
        }
      }

      dd {
        font-weight: bold;
      }

      dd {
        font-size: 1.4rem;
      }
    }
  }
}

#home-treatment {
  background: rgb(255 255 255 / 0.85);
  color: var(--color-primary);
  padding: 45px 0;

  h2 {
    font-size: 2.3rem;
    font-family: var(--font-mincho);
    margin-bottom: 12px;
  }

  .treatment-box {
    display: flex;
    gap: 60px;
    margin-bottom: 25px;

    .time-table {
      width: 448px;

      thead {
        th {
          background-color: var(--color-primary);
          color: #fff;
          padding: 3px 10px;
        }
      }

      tbody {

        th {
          padding-left: 15px;
        }

        td {
          padding: 8px 10px;
        }
      }
    }

    .detail {
      flex: 1;
      display: flex;
      gap: 55px;

      dt {
        font-weight: bold;
      }
    }
  }

}

#home-info {
  background: linear-gradient(165deg, rgb(236 234 247) 12%, rgb(164 164 229) 60%, rgb(236 230 235) 95% 72%);
  padding: 45px 0 60px;

  .info-box {
    background-image: url(../images/home/bg_gradient02.jpg);
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding: 47px 45px 35px;
    line-height: 1.5;
    letter-spacing: -0.015em;


    p {
      &:not(:last-child) {
        margin-bottom: 25px;
      }
    }

    .star {
      margin-bottom: 0 !important;

      span {
        background-image: url(../images/common/anchor-yellow_star.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;

        &.star01 {
          width: 24px;
          height: 33px;
          top: 25px;
          left: 22px;
        }

        &.star02 {
          width: 20px;
          height: 28px;
          bottom: 100px;
          right: 30px;
        }
      }
    }

    &:after {
      position: absolute;
      content: '';
      width: calc(100% - 20px);
      height: calc(100% - 25px);
      border: solid 2px #fff;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

}

/* googlemapやyoutube */
.iframe_wrap {
  position: relative;
  height: 350px;
  /* padding-top: 21.5%; */
  overflow: hidden;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }
}

@media all and (min-width: 751px) {

  /* MAINV */
  #mainv {
    min-height: 1040px;
    padding-bottom: min(270px, 28vh);

    .mv-inner {
      width: 1080px;
      margin: 0 auto 75px;
      display: flex;
      gap: 15px;
      justify-content: flex-end;
      align-items: center;
      padding-top: 213px;
      z-index: 3;
      position: relative;

      .text {
        display: block;
      }
    }
  }

}

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

  /* MAINV */
  #mainv {
    position: relative;
    padding-bottom: 40px;
    overflow: hidden;

    &:after {

      width: 414px;
      height: 410px;
      top: 115px;
      left: calc(50% + 12px);
    }


    .mv-inner {
      margin: 0 auto 40px;
      padding-top: 140px;
      position: relative;
      z-index: 4;

      .text {
        display: block;
        width: 279px;
        margin: 0 auto 10px;
      }

      .image {
        width: 285px;
        margin: auto;
      }
    }

    .news-box {
      flex-direction: column;
      gap: 0px;

      .title-level02 {
        margin-bottom: 15px;
      }

      .titles {
        font-weight: bold;
        margin-top: 4px;
        letter-spacing: 0;
      }



      .news-list {
        padding-top: 0px;
        flex: 1;
      }
    }

    .btn-type01 {
      margin-top: 15px;
    }
  }

  #home-message {
    padding: 32px 0;
    margin-top: 0;

    .message-inner {
      .title-level02 {
        margin-bottom: 12px;

        img {
          width: 45px;
        }
      }

      em {
        font-size: 1.6rem;
        margin-bottom: 5px;
      }

      p {
        font-size: 1.5rem;
        line-height: 2.2;
      }
    }
  }

  .home-doctor {
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/home/mainv/image/mainv_bg.jpg);
  }

  #home-doctor {
    .container-inner {
      padding-bottom: 45px;
      padding-top: 35px;
    }

    .staff-list {
      margin-top: 0px;

      >li {
        &:not(:last-child) {
          margin-bottom: 50px;
        }
      }

      .staff-inner {
        flex-direction: column;
        gap: 7px;

        .name {
          text-align: center;
        }
      }

      .image-box {
        width: 140px;
        margin: auto;
        line-height: 0;
      }

      .name-box {
        /* padding-left: 5px; */
        padding-top: 5px;

        .status {
          font-family: var(--font-mincho);
        }

        .name-ja {
          font-family: var(--font-mincho);
          font-weight: 600;
          margin-left: 5px;
          font-size: 2.2rem;
        }

        .name-en {
          font-family: var(--font-cinzel);
          font-size: 1.8rem;
        }
      }

      .propertybox {
        flex-direction: column;
        gap: 15px;
        margin-top: -5px;

        ul {
          li {
            line-height: 1.5;

            &:not(:last-child) {
              margin-bottom: 1px;
            }
          }
        }

        dd {
          font-weight: bold;
        }

        dd {
          font-size: 1.4rem;
        }
      }
    }
  }

  #home-treatment {
    background: rgb(255 255 255 / 0.85);
    color: var(--color-primary);
    padding: 25px 0;

    h2 {
      font-size: 1.9rem;
      margin-bottom: 5px;
    }

    .treatment-box {
      flex-direction: column;
      gap: 5px;
      margin-bottom: 25px;

      .time-table {
        width: 100%;

        thead {
          th {
            padding: 0px 10px;
          }
        }

        tbody {

          th {
            padding-left: 0;
            width: 110px;
            display: inline-block;
          }

          td {
            padding: 5px 10px;
          }
        }
      }

      .detail {
        flex-direction: column;
        gap: 15px;
      }
    }

  }

  #home-info {
    background-color: rgba(158, 200, 255, 1);
    background-image: linear-gradient(197deg, rgba(188, 187, 216, 1) 0%, rgba(87, 124, 219, 1) 100%, rgba(158, 200, 255, 1) 100%);
    padding: 45px 0 60px;

    .info-box {
      background-size: cover;
      padding: 25px;


      p {
        &:not(:last-child) {
          margin-bottom: 18px;
        }
      }

      .star {
        margin-bottom: 0 !important;

        span {
          &.star01 {
            width: 20px;
            height: 26px;
            top: 13px;
            left: 12px;
          }

          &.star02 {
            width: 10px;
            height: 20px;
            bottom: 110px;
            right: 25px;
          }
        }
      }

    }

  }
}