@charset "UTF-8";

/*-----* アイキャッチ *-----*/
.EyecatchSec {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  > div {
    position: relative;
    > div {
      z-index: 2;
      display: block;
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
    }
  }
  video {
    display: block;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  h1 {
    z-index: 3;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 7rem;
    margin: auto;
    text-align: center;
    color: #fff;
    > small {
      font-size: 1.6rem;
    }
  }
  @media(max-width: 575.98px) {
    > div {
      height: 18rem;
      > div {
        height: 18rem;
      }
    }
    video {
      height: 18rem;
    }
  }
  @media(min-width: 576px) {
    > div {
      height: 20rem;
      > div {
        height: 20rem;
      }
    }
    video {
      height: 20rem;
    }
  }
  @media(min-width: 768px) {
    > div {
      height: 24rem;
      > div {
        height: 24rem;
      }
    }
    video {
      height: 24rem;
    }
  }
  @media(min-width: 992px) {
    > div {
      height: 24rem;
      > div {
        height: 24rem;
      }
    }
    video {
      height: 24rem;
    }
  }
  @media(min-width: 1200px) {
    > div {
      height: 27rem;
      > div {
        height: 27rem;
      }
    }
    video {
      height: 27rem;
    }
  }
  @media(min-width: 1400px) {
    > div {
      height: 30rem;
      > div {
        height: 30rem;
      }
    }
    video {
      height: 30rem;
    }
  }
}

/*-----* 上部ガイド *-----*/
.GuideSec {
  margin-top: -3rem;
  a {
    text-decoration: none;
    > .card {
      background-color: #fff;
      border-color: var(--main-color);
      transition: .4s;
      .material-symbols-outlined {
        color: var(--main-color);
        transition: .4s;
      }
    }
    &:hover {
      > .card {
        margin-top: -.7rem;
        background-color: var(--main-color);
        color: #fff;
        transition: .4s;
        .material-symbols-outlined {
          color: var(--main-color2);
          transition: .4s;
        }
      }
    }
  }
  .material-symbols-outlined {
    font-size: 3.5rem;
  }
}

/*-----* 診療科 *-----*/
.DepartmentSec {
  .col > a {
    display: inline-block;
    position: relative;
    color: var(--bs-body-color);
    &::after {
      position: absolute;
      font-family: "Material Icons";
      content: "\eac9";
      top: 0;
      right: .6rem;
      color: #fff;
      font-size: 1.3rem;
    }
    &:hover {
      background-color: var(--main-color);
      color: #fff;
    }
  }
}