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

doctor-recommend

----------------------------------------------- */
.lp_wrap .doctor-recommend {
  background-color: #fdeff2;
  overflow-x: hidden;
  z-index: 1;
}

.lp_wrap .doctor-recommend .ttl-slider {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
}
.lp_wrap .doctor-recommend .ttl-slider .slide-item {
  grid-area: 1 / 1;
  transform: translateX(0);
  animation: marquee 10s linear infinite;
}
.lp_wrap .doctor-recommend .ttl-slider .slide-item:nth-of-type(2) {
  transform: translateX(100%);
  animation: marquee2 10s linear infinite;
}

.lp_wrap .doctor-recommend .grid-box {
  display: grid;
}
.lp_wrap .doctor-recommend .grid-box .grid {
  grid-area: 1 / 1;
}


/* ----------- doctor ----------- */
.lp_wrap .doctor-recommend .doctor {
  position: relative;
  background: url(../images/doctor_bg.png) no-repeat center bottom / 100% auto;
}
.lp_wrap .doctor-recommend .doctor .ttl-slider .slide-item {
  width: min(calc(795/750 * 100vw), 795px);
}

.lp_wrap .doctor-recommend .doctor .grid-box-01 .grid-01,
.lp_wrap .doctor-recommend .doctor .grid-box-02 .grid-02,
.lp_wrap .doctor-recommend .doctor .grid-box-03 .grid-02 {
  transition-delay: 0s;
}
.lp_wrap .doctor-recommend .doctor .grid-box-01 .grid-02,
.lp_wrap .doctor-recommend .doctor .grid-box-02 .grid-01,
.lp_wrap .doctor-recommend .doctor .grid-box-03 .grid-01 {
  z-index: 2;
}


/* ----------- pharmacist ----------- */
.lp_wrap .doctor-recommend .pharmacist {
  position: relative;
  background: url(../images/pharmacist_bg.png) no-repeat center bottom / 100% auto;
}
.lp_wrap .doctor-recommend .pharmacist .ttl-slider .slide-item {
  width: min(calc(1054/750 * 100vw), 1054px);
}

.lp_wrap .doctor-recommend .pharmacist .grid-box-01 .grid-01,
.lp_wrap .doctor-recommend .pharmacist .grid-box-02 .grid-02,
.lp_wrap .doctor-recommend .pharmacist .grid-box-03 .grid-02 {
  transition-delay: 0s;
}
.lp_wrap .doctor-recommend .pharmacist .grid-box-01 .grid-02,
.lp_wrap .doctor-recommend .pharmacist .grid-box-02 .grid-01,
.lp_wrap .doctor-recommend .pharmacist .grid-box-03 .grid-01 {
  z-index: 2;
}
.lp_wrap .doctor-recommend .pharmacist .grid-box-02 .grid-04 {
   transition-delay: 0.5s;
}
.lp_wrap .doctor-recommend .pharmacist .grid-box-02 .grid-05 {
   transition-delay: 0.75s;
}



/* ---- Animations ---- */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes marquee2 {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}