.mainvisual__img--item {
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: .5s;
  width: 100%;
}
.mainvisual__img--item.active {
  opacity: 1;
}
.mainvisual__img--item img {
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  transition: 4s ease-in-out;
  width: 100%;
}
.active.mainvisual__img--item img {
  transform: scale(1);
}

.mainvisual {
  align-items: center;
  /* background: url("../images/img-top_mv.png"); */
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  height: 100vh;
  justify-content: center;
  padding-top: 100px;
  position: relative;
  width: 100%;
}

.mainvisualCatch {
  background: rgba(255, 255, 255, .1);
  padding: 40px 56px 40px;
  position: relative;
}

.mainvisualCatch__word {
  color: #66a3bd;
  font-size: var(--fontSize16);
  font-weight: 500;
  letter-spacing: .05em;
  margin-top: 30px;
  text-align: center;
}

.mainvisualCatch__title {
  color: #66a3bd;
  font-size: var(--fontSize36);
  font-weight: 500;
  letter-spacing: .05em;
  margin-top: calc(8px * 2);
  text-align: center;
}

.mainvisualCatch__logo {
  margin-top: calc(8px * 3);
  text-align: center;
}

.mainvisualCatch__logo img {
  width: 550px;
}

.mainvisualNews {
  display: flex;
  justify-content: center;
  margin: 24px auto 0;
  max-width: 575px;
  position: relative;
  width: 100%;
}

.mainvisualNews__box {
  align-items: center;
  background: #fff;
  box-shadow: 0 7px 7px rgba(0,0,0,.2);
  display: flex;
  padding: calc(8px * 4) calc(8px * 2) calc(8px * 4) calc(8px * 5);
  position: relative;
  width: 100%;
}

.mainvisualNews__box::before {
  background: #989898;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  content: "";
  height: 10px;
  left: 10px;
  position: absolute;
  top: 10px;
  transform: rotate(90deg);
  width: 10px;
}

.mainvisualNews__box--title {
  font-size: var(--fontSize18);
  font-weight: 500;
  padding-right: calc(8px * 3);
  white-space: nowrap;
}

.mainvisualNews__boxPost {
  border-left: 1px solid var(--colorBase);
  padding: calc(8px * 2) 0 calc(8px * 2) calc(8px * 3);
}
.mainvisualNews__boxPost--date {
  color: var(--colorBase);
  font-size: 16px;
  font-weight: 400;
}

.mainvisualNews__boxPost--word {
  color: var(--colorBase);
  font-size: var(--fontSize14);
  font-weight: 400;
  line-height: 1.4;
  margin-top: calc(8px* 1);
}

.topNavi {
  padding: calc(8px * 12) 0 0;
  position: relative;
}

.topNavi::before {
  background: rgba(240, 253, 242, .8);
  border-radius: 60px;
  content: "";
  filter: blur(40px);
  height: 60%;
  left: 0;
  position: absolute;
  top: 20%;
  width: 90%;
  z-index: -100;
}

.topNavi__title{
  font-size: var(--fontSize36);
  font-weight: 500;
  letter-spacing: .05em;
  margin-top: calc(8px* 2);
  text-align: center;
}

.topNavi__subtitle{
  color: #66a3bd;
  font-size: var(--fontSize20);
  font-weight: 500;
  letter-spacing: .05em;
  margin-top: 20px;
  text-align: center;
  margin-bottom: 40px;
}

.topNavi__list {
  display: grid;
  gap: calc(8px * 6) calc(8px * 3);
  grid-template-columns: 1fr 1fr 1fr;
}

.topNavi__single {
  margin-top: calc(8px * 10);
}

.topNavi__img--inner {
  height: 413px;
  margin-top: 40px;
  position: relative;
}

.topNavi__img--item {
  height: auto;
  position: absolute;
  width: 365px;
}

.topNavi__img--item.left {
  left: 12%;
  top: 0;
}

.topNavi__img--item.right {
  bottom: 0;
  right: 10%;
}

@media screen and (max-width: 1024px) {
  .topNavi__img--inner {
    height: 250px;
  }
  .topNavi__img--item {
    width: 30vw;
  }
}

@media screen and (max-width: 767px) {
  .topNavi__img--inner {
    height: 300px;
  }
  .topNavi__img--item {
    width: 50vw;
  }
}

.topInfo {
  margin-top: calc(8px * 10);
  position: relative;
}

.topInfo::before {
  background: rgba(246, 248, 225, .8);
  border-radius: 60px;
  content: "";
  filter: blur(40px);
  height: 140%;
  position: absolute;
  right: 0;
  top: -10%;
  width: 90%;
  z-index: -100;
}

.topInfo .container {
  column-gap: calc(8px * 4);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.topThumbnail {
  padding-top: calc(8px * 12);
}

.topThumbnail__img img {
  height: auto;
  width: 70%;
}

.topOutpatient {
  padding: calc(8px * 16) 0 calc(8px * 14);
  position: relative;
}


.topOutpatient::before {
  background: rgba(248, 228, 225, .8);
  border-radius: 60px;
  content: "";
  filter: blur(40px);
  height: 80%;
  left: 0;
  position: absolute;
  top: 0;
  width: 90%;
  z-index: -100;
}

@media screen and (max-width: 767px) {
  .mainvisual {
    padding-top: 60px;
  }

  .mainvisualCatch {
    padding: 16px 8px 40px;
  }
  .mainvisualCatch__logo {
    margin-top:0;
    text-align: center;
  }

  .mainvisualCatch__logo img {
    width: 80%;
  }

  .mainvisualCatch__word {
    margin-top: 16px;
  }

  .mainvisualNews {
    margin: 24px 20px 0;
    width: auto;
  }

  .mainvisualNews__box {
    flex-wrap: wrap;
    padding: calc(8px * 2) calc(8px * 2) calc(8px * 2) calc(8px * 3);
  }

  .mainvisualNews__box--title {
    border-bottom: 1px solid var(--colorBase);
    padding-bottom: calc(8px * 1.5);
    padding-right: calc(8px * 0);
    width: 100%;
  }

  .mainvisualNews__boxPost {
    border-left: none;
    padding: calc(8px * 2) 0 calc(8px * 2) calc(8px * 0);
  }

  .mainvisualNews__boxPost--word {
    font-size: var(--fontSize14);
    font-weight: 400;
    line-height: 1.8;
    margin-top: calc(8px * 1);
  }

  .topNavi {
    padding: calc(8px * 6) 0 0;
  }

  .topNavi__list {
    gap: calc(8px * 3) 0;
    grid-template-columns: 100%;
  }

  .topNavi__single {
    margin-top: calc(8px * 5);
  }

  .topInfo {
    margin-top: calc(8px * 5);
  }

  .topInfo .container {
    grid-template-columns: 100%;
    row-gap: calc(8px * 3);
  }
}