@charset "utf-8";
/* MV */
.top_swiper {
  .swiper-slide {
    position: relative;
  }
  picture {
    display: block;
    width: 100%;
  }
  picture img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 600px;
    @media screen and (max-width: 767px) {
      max-height: initial;
    }
  }
}

.swiper-slide {
  .cmn_container {
    position: relative;
  }
}
.mv_abs {
  position: absolute;
  z-index: 1;
  width: 100%;
  display: flex;
  margin: auto;
  flex-direction: column;
  padding-top: var(--space-65);
  @media screen and (max-width: 767px) {
    padding-top: 20px;
  }
  &:has(div[class="mv_slide2"]) {
    align-items: end;
    gap: 15px;
    padding-top: var(--space-45);
    @media screen and (max-width: 767px) {
      align-items: center;
      padding-top: 30px;
      .mv_abs--img {
        padding-bottom: 0;
      }
      .top_catchcopyTxt {
        line-height: 1.8;
      }
    }
  }
  &:has(.mv_block2) {
    .mv_abs--img {
      left: 0;
    }
  }
}
.top_catchcopy {
  font-size: var(--font-36);
  font-weight: 900;
  text-shadow: 0 0 10px #FFF, 0 0 10px #FFF, 0 0 10px #FFF;
  line-height: 1.5;
  letter-spacing: var(--letter-10);
  padding-bottom: var(--space-20);
}
.top_catchcopy--large {
  font-size: var(--font-56);
  color: var(--dark-blue);
}
.top_catchcopyTxt {
  font-size: var(--font-20);
  font-weight: 700;
  letter-spacing: var(--letter-10);
  .underline {
    border-bottom: 3px solid var(--dark-blue);
  }
}
.mv_slide2 .top_catchcopyTxt {
  .underline {
    font-weight: 900;
  }
}
.top_catchcopyTxt--large {
  font-size: var(--font-32);
  font-weight: 900;
}
.top_catchcopy--slide2 {
  padding-top: 10px;
  font-size: var(--font-20);
  font-weight: 700;
  line-height: 2;
  @media screen and (max-width:767px) {
    font-size: min(1.7rem, 3.3vw);
  }
}
.mv_abs--img {
  position: absolute;
  right: 0;
  @media screen and (max-width: 767px) {
    position: static;
    width: 80%;
    padding-bottom: 20px;
    margin: auto;
  }
}
.mv_block {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding-block: var(--space-30);
  @media screen and (max-width: 767px) {
    justify-content: center;
    margin-top: -60px;
    &::before {
      content: "";
      flex-basis: 100%;
      width: 0;
      order: 2;
    }
    .mv_item {
      flex: 0 0 103px;

      &:nth-child(1),
      &:nth-child(2) {
        order: 1;
      }

      &:nth-child(3),
      &:nth-child(4),
      &:nth-child(5) {
        order: 3;
      }
    }
  }
}
.mv_block2 {
  display: flex;
  gap: var(--space-20);
  padding-bottom: var(--space-20);
  line-height: 1.5;

}
.mv_item,
.mv_item2 {
  border-radius: 100px;
  text-align: center;
  display: flex;
  align-items: center;
}
.mv_item {
  background: var(--main-color);
  color: #fff;
  flex-direction: column;
  justify-content: space-evenly;
  min-width: 113px;
  min-height: 113px;
  @media screen and (max-width: 767px) {
    min-width: 103px;
    min-height: 103px;
  }
}
.mv_item2 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(19, 116, 170, 0.25) 100%), #FFF;
  box-shadow: 0 0 20px 0 #FFF inset;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.20));
  min-width: 183px;
  min-height: 183px;
  justify-content: center;
  @media screen and (max-width: 767px) {
    min-width: 103px;
    min-height: 103px;
  }
}
.mv_item--title {
  font-size: var(--font-20);
  font-weight: 900;
  line-height: 1;
}
.mv_item--txt {
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 18px;
}
.mv_item2--txt {
  font-size: var(--font-32);
  font-weight: 900;
  letter-spacing: var(--letter-10);
  color: var(--dark-blue);
  .mv_item2--txt_sub {
    font-size: var(--font-20);
    color: #000;
    line-height: 1.5;
  }
  @media screen and (max-width: 767px) {
    font-size: 1.9rem;
    .mv_item2--txt_sub {
      font-size: 1.4rem;
    }
  }
}
/* フェード */
.fade {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade.fadein {
  opacity: 1;
  transform: translateY(0);
}

/* MV下のバナー */
.top_bnr {
  position: relative;
  z-index: 3;
}
.top_bnr--flex {
  display: flex;
  justify-content: center;
  gap: var(--space-20);
  flex-wrap: wrap;
  margin-top: -50px;
  @media screen and (max-width:767px) {
    a {
      width: calc((100% - 15px) / 2);
    }
  }
}

/* こんなお悩みありませんか */
.top_worry {
  background: var(--main-color);
  color: #fff;
  margin: var(--space-65) auto -290px;
  @media screen and (max-width:767px) {
    margin-bottom: -150px;
  }
}
.worry_block {
  display: flex;
  justify-content: center;
  gap: var(--space-20);
  padding-top: var(--space-30);
  flex-wrap: wrap;
}
.worry_item {
  width: calc((100% - 80px) / 5);
  @media screen and (max-width: 767px) {
    width: calc((100% - 15px) / 2);
  }
}
.worry_item--txt {
  font-weight: 900;
  letter-spacing: var(--letter-08);
  text-align: center;
  color: #000;
  background-color: #fff;
  padding-block: 40px;
    line-height: 2;
  @media screen and (max-width: 767px) {
    padding: 15px 10px;
    font-size: min(1.5rem, 3.5vw);
    white-space: nowrap;
  }
}
/* 課題解決事例 */
.top_case {
  padding-top: 285px;
  @media screen and (max-width: 767px) {
    padding-top: 145px;
  }
}

.case_category {
  display: flex;
  gap: 10px;
}
.case_category--item {
  background: var(--main-color);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  padding-inline: var(--space-20);
}
.case_item--under {
  min-height: 250px;
}
/* 分野別の課題解決 */
.top_solutions {
  background: url(../img/top_solutions_bg.webp) center / cover no-repeat;
  padding-block: var(--space-65);
  margin-top: var(--space-30);
  position: relative;
  .more_btn {
    position: relative;
    z-index: 3;
  }
}
.sol_title {
  color: var(--main-color);
}
.sol_img {
  position: absolute;
  inset: 0 0 0 -720px;
  display: flex;
  align-items: center;
  justify-content: center;
  @media screen and (max-width: 767px) {
    position: static;
    width: 80%;
    margin: auto;
    padding-bottom: 20px;
  }
}
.sol_block {
  display: flex;
  justify-content: center;
  gap: var(--space-20);
  max-width: 380px;
  margin: auto;
  padding-block: var(--space-30);
  flex-wrap: wrap-reverse;
  @media screen and (max-width: 767px) {
    gap: 10px;
  }
}
.sol_item {
  background: #fff;
  box-shadow: 0 0 10px 0 var(--dark-blue);
  border-radius: 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  min-width: 113px;
  min-height: 113px;
}
.sol_item--title {
  color: var(--main-color);
  font-size: var(--font-20);
  font-weight: 900;
  line-height: 1;
  padding-top: 0.5rem;
}
.sol_item--txt {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 18px;
}

/* 選ばれる理由 */
.top_reason {
  display: flex;
  gap: var(--space-20);
  flex-wrap: wrap;
  padding-block: var(--space-30);
  counter-reset: num 0;
  @media screen and (max-width: 767px) {
    flex-direction: column;
  }
}
.top_reason--block {
  display: flex;
  width: calc((100% - 20px) / 2);
  .top_reason--r {
    flex-shrink: 0;
  }
  img {
    display: block;
    width: 208px;
    height: 208px;
  }
  @media screen and (max-width: 767px) {
    width: 100%;
    align-items: stretch;
    .top_reason--r {
      width: 125px;
      overflow: hidden;
      flex-shrink: 0;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
.top_reason--l {
  background: var(--main-color);
  color: #fff;
  padding: var(--space-20);
  max-height: 208px;
  width: 100%;
  @media screen and (max-width: 767px) {
    padding: 10px
  }
}
.top_reason--title {
  font-size: var(--font-32);
  font-weight: 900;
  letter-spacing: 0.4rem;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  &::before {
    counter-increment: num 1;
    content: counter(num) ' ';
    background: var(--sub-color);
    color: var(--main-color);
    border-radius: 100px;
    width: 56px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 1px;
    @media screen and (max-width: 767px) {
      width: 34px;
      height: 34px;
    }
  }
  @media screen and (max-width: 767px) {
    letter-spacing: 0.2rem;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
}
.top_reason--txt {
  font-size: 1.4rem;
}
.reason_sub {
  font-size: var(--font-20);
  display: contents;
}