@charset 'UTF-8';

/* サンクスラボガイド-sp
      ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.page-top {
  background: var(--color15);
}

.page-top__ttl-item.page-top__ttl-item--color {
  color: var(--color04);
}

.page-top__sub-ttl {
  color: var(--color04);
}

.page-top__text {
  color: var(--color04);
}

/* ラボガイドヘッダースライダーsp */

.guide-slide {
  background-color: var(--color15);
  position: relative;
  overflow-x: clip;
  z-index: 0;
}

.guide-slide::before {
  display: inline-block;
  content: "";
  width: 100px;
  height: 100px;
  background-image: url(../../images/guide/guide-ring01.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: -50px;
  right: -28px;
}

.guide-slide::after {
  display: inline-block;
  content: "";
  width: 180px;
  height: 180px;
  background-image: url(../../images/guide/guide-ring02.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  bottom: -40px;
  left: -62px;
  z-index: -1;
}

.guide-slide .inner {
  position: relative;
}

.guide-slide .inner::before {
  display: inline-block;
  content: "";
  width: 65px;
  height: 65px;
  background-image: url(../../images/guide/guide-ring03.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 120px;
  right: 70px;
}

.guide-slide .guide-slide_box1 {
  margin: 0 0 12px;
}

.guide-slide .slick-initialized .slick-slide {
  padding: 0 6px;
}

.guide-slide .slick-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* サンクスラボ概要-sp */
.guide-overview {
  background: var(--color15);
  padding: 100px 0 150px;
}

.guide-overview__box {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

.guide-overview__left {
  width: 100%;
}

.guide-overview__right {
  width: 100%;
  margin: 30px 0 60px;
}

.guide-overview-img {
  width: 100%;
}

.guide-overview__dot {
  margin: 50px 0;
}

.guide-overview__dot-img {
  width: 18px;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

/* ラボガイドデータ-sp */
.guide-data {
  padding: 80px 0;
  position: relative;
  background-color: var(--color17);
}

.guide-data::before {
  display: block;
  content: "";
  width: 100%;
  height: 8vw;
  background-image: url(../../images/guide/guide-data-wave-sp1.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: -7.5vw;
  left: 0;
}

.guide-data::after {
  display: block;
  content: "";
  width: 100%;
  height: 8vw;
  background-image: url(../../images/guide/guide-data-wave-sp2.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -7.5vw;
  left: 0;
}

.guide-data__ttl {
  font-size: 15px;
  font-weight: 500;
  padding: 0 0 0 22px;
  position: relative;
  margin: 0 0 50px;
}

.guide-data__ttl::before {
  display: inline-block;
  content: "";
  width: 13px;
  height: 13px;
  background-image: url(../../images/common/cont-ttl-accent2.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.guide-data__ttl-color {
  display: inline-block;
  color: var(--color02);
  padding: 0 0 0 6px;
}

.guide-data__slide {
  margin: 0 0 50px;
  position: relative;
  z-index: 1;
}

.guide-data__slide::before {
  display: inline-block;
  content: "";
  width: 110px;
  height: 110px;
  background-image: url(../../images/guide/guide-ring04.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 65px;
  right: 0;
}

.guide-data__slide::after {
  display: inline-block;
  content: "";
  width: 90px;
  height: 90px;
  background-image: url(../../images/guide/guide-ring05.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -45px;
  left: 10px;
  z-index: -1;
}

.guide-data__slide .slick-initialized .slick-slide {
  padding: 0 16px;
}

.guide-data__slide .slick-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.guide-data__button {
  text-align: center;
}

.guide-data__button .common-btn {
  display: inline-block;
}

@media screen and (min-width: 577px) {
  /* サンクスラボガイド-tb
        ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
  .page-top__text {
    margin: 60px 0 0;
  }

  /* ラボガイドヘッダースライダーtb */
  .guide-slide::before {
    width: 200px;
    height: 200px;
    top: -90px;
    right: -60px;
  }

  .guide-slide::after {
    width: 360px;
    height: 360px;
    bottom: -90px;
    left: -150px;
  }

  .guide-slide .inner::before {
    width: 130px;
    height: 130px;
    top: 135px;
    right: 85px;
  }

  .guide-slide .guide-slide_box1 {
    margin: 0 0 24px;
  }

  .guide-slide .slick-initialized .slick-slide {
    padding: 0 12px;
  }

  /* サンクスラボ概要-tb */
  .guide-overview {
    padding: 260px 0;
  }

  .guide-overview__right {
    width: 100%;
    margin: 0 0 120px;
  }

  .guide-overview__dot {
    margin: 100px 0;
  }

  .guide-overview__dot-img {
    width: 36px;
  }

  /* ラボガイドデータ-tb */
  .guide-data {
    padding: 180px 0;
  }

  .guide-data::before {
    height: 8vw;
    top: -7.5vw;
  }

  .guide-data::after {
    height: 8vw;
    bottom: -7.5vw;
  }

  .guide-data__ttl {
    font-size: 30px;
    padding: 0 0 0 44px;
    margin: 0 0 100px;
  }

  .guide-data__ttl::before {
    width: 26px;
    height: 26px;
  }

  .guide-data__ttl-color {
    padding: 0 0 0 12px;
  }

  .guide-data__slide {
    margin: 0 0 100px;
  }

  .guide-data__slide::before {
    width: 220px;
    height: 220px;
    top: -120px;
    right: 0;
  }

  .guide-data__slide::after {
    width: 180px;
    height: 180px;
    bottom: -85px;
    left: 10px;
  }

  .guide-data__slide .slick-initialized .slick-slide {
    padding: 0 32px;
  }
}

@media screen and (min-width: 769px) {
  /* サンクスラボガイド-pc
        ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
  .page-top {
    margin: 0;
  }

  /* ラボガイドヘッダースライダーpc */
  .guide-slide::before {
    width: 283px;
    height: 283px;
    top: -130px;
    right: 70px;
  }

  .guide-slide::after {
    width: 390px;
    height: 390px;
    bottom: -110px;
    left: -150px;
  }

  .guide-slide .inner {
    max-width: none;
  }

  .guide-slide .inner::before {
    width: 163px;
    height: 163px;
    top: auto;
    bottom: -80px;
    right: 45px;
  }

  .guide-slide .guide-slide_box1 {
    margin: 0 0 28px;
  }

  .guide-slide .slick-initialized .slick-slide {
    padding: 0 14px;
  }


  /* サンクスラボ概要-pc */
  .guide-overview {
    padding: 150px 0 160px;
  }

  .guide-overview__box {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .guide-overview__left {
    width: 50%;
  }

  .guide-overview__right {
    width: 50%;
    margin: 0;
  }

  .guide-overview__dot {
    margin: 76px 0;
  }

  .guide-overview__dot-img {
    width: 27px;
  }

  /* ラボガイドデータ-pc */
  .guide-data {
    padding: 200px 0;
  }

  .guide-data::before {
    background-image: url(../../images/guide/guide-data-wave-pc1.png);
    height: 4vw;
    top: -3.9vw;
  }

  .guide-data::after {
    background-image: url(../../images/guide/guide-data-wave-pc2.png);
    height: 4vw;
    bottom: -3.9vw;
  }

  .guide-data__ttl {
    font-size: 20px;
    padding: 0 0 0 30px;
    margin: 0 0 65px;
  }

  .guide-data__ttl::before {
    width: 18px;
    height: 18px;
  }

  .guide-data__ttl-color {
    padding: 0 0 0 10px;
  }

  .guide-data__slide {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto 56px;
    padding: 0 220px;
  }

  .guide-data__slide::before {
    width: 220px;
    height: 220px;
    top: -120px;
    right: 0;
  }

  .guide-data__slide::after {
    width: 180px;
    height: 180px;
    bottom: -85px;
    left: 10px;
  }

  .guide-data__slide .slick-initialized .slick-slide {
    padding: 0 10px;
  }

  .guide-data__slide slick-arrow:before {
    content: "" !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
  }

  .guide-data__slide .slick-prev {
    display: inline-block;
    content: "";
    width: 56px;
    height: 56px;
    background-image: url(../../images/guide/guide-data-arrow-r.png) !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    left: -120px;
  }

  .guide-data__slide .slick-next {
    display: inline-block;
    content: "";
    width: 56px;
    height: 56px;
    background-image: url(../../images/guide/guide-data-arrow-l.png) !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    right: -125px;
  }

  .guide-data__slide .slick-prev:hover,
  .guide-data__slide .slick-next:hover {
    opacity: 0.5 !important;
  }

  .guide-data__slide .slick-prev::before,
  .guide-data__slide .slick-next::before {
    display: none;
  }

  .guide-data .inner {
    position: relative;
  }

  .guide-data .inner::before {
    display: inline-block;
    content: "";
    width: 137px;
    height: 137px;
    background-image: url(../../images/guide/guide-ring09.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50px;
    left: 10px;
  }

  .guide-data .inner::after {
    display: inline-block;
    content: "";
    width: 188px;
    height: 188px;
    background-image: url(../../images/guide/guide-ring10.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 50px;
    right: 10px;
  }
}