@charset "UTF-8";
/* カラー */
/* テーマカラー */
/* テキストカラー */
/* ボーダーカラー */
/* フォント */
/* スペーサー */
/* コンテンツ・ページ幅 */
/* ブレークポイント */
/*========================================
  ## レスポンシブ対応（PC値とスマホ値を明示指定）

  [ 引数一覧 ]
  $property: CSSプロパティ名（例: font-size, margin-bottom）
  $pc-value: PC時の値（px単位）
  $sp-value: スマホ時の値（px単位、必須）

  [ 使い方 ]
  @include r(font-size, 25px, 18px);
  @include r(margin-bottom, 50px, 32px);

  PC～スマホ間は自動的にvw変換されます。
========================================*/
.p-mv {
  position: relative;
  width: 100%;
  height: 800px;
  margin-top: -57px;
  margin-inline: auto;
}
@media (max-width: 768px) {
  .p-mv {
    max-width: none;
    height: 580px;
  }
}
@media (max-width: 576px) {
  .p-mv {
    height: 154.6666666667vw;
  }
}

.p-mv__slider {
  width: 100%;
  height: 800px;
}
@media (max-width: 768px) {
  .p-mv__slider {
    height: 580px;
  }
}
@media (max-width: 576px) {
  .p-mv__slider {
    height: 100%;
  }
}

.p-mv__slider .swiper-slide {
  width: 100%;
  height: 800px;
}
@media (max-width: 768px) {
  .p-mv__slider .swiper-slide {
    height: 580px;
  }
}
@media (max-width: 576px) {
  .p-mv__slider .swiper-slide {
    height: 100%;
  }
}

.p-mv__slide-img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.p-mv__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.p-mv__copy {
  position: absolute;
  top: 533px;
  left: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: calc(100% - 64px);
}
@media (max-width: 768px) {
  .p-mv__copy {
    top: 274px;
    left: 20px;
    max-width: calc(100% - 40px);
  }
}
@media (max-width: 576px) {
  .p-mv__copy {
    top: 73.0666666667vw;
    left: 5.3333333333vw;
    max-width: calc(100% - 10.6666666667vw);
  }
}

.p-mv__title {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 10px 15px;
  background: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 70px;
  line-height: 80px;
  color: #415fd2;
  transition: opacity 0.4s ease;
}
@media (max-width: 768px) {
  .p-mv__title {
    padding: 8px 10px;
    font-size: 40px;
    line-height: 1.5;
  }
}
@media (max-width: 576px) {
  .p-mv__title {
    padding: 2.1333333333vw 2.6666666667vw;
    font-size: 10.6666666667vw;
  }
}

.p-mv__desc {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 10px 15px;
  background: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  color: #000000;
  transition: opacity 0.4s ease;
}
@media (max-width: 768px) {
  .p-mv__desc {
    padding: 8px 10px;
    font-size: 16px;
    line-height: 1.875;
  }
}
@media (max-width: 576px) {
  .p-mv__desc {
    padding: 2.1333333333vw 2.6666666667vw;
    font-size: 4.2666666667vw;
  }
}

.p-mv__content.is-text-fading .p-mv__title,
.p-mv__content.is-text-fading .p-mv__desc {
  opacity: 0;
}

.p-mv__content.is-slide-1 .p-mv__desc {
  max-width: 670px;
}
@media (max-width: 768px) {
  .p-mv__content.is-slide-1 .p-mv__desc {
    max-width: 370px;
  }
}
@media (max-width: 576px) {
  .p-mv__content.is-slide-1 .p-mv__desc {
    max-width: 82.6666666667vw;
  }
}

.p-mv__pagination {
  position: absolute;
  top: 770px;
  left: 51px;
  display: flex;
  gap: 25px;
}
@media (max-width: 768px) {
  .p-mv__pagination {
    top: 546px;
    left: 33px;
    gap: 13px;
  }
}
@media (max-width: 576px) {
  .p-mv__pagination {
    top: 145.6vw;
    left: 8.8vw;
  }
}

.p-mv__pagination-bar {
  display: block;
  width: 119px;
  height: 4px;
  border-radius: 2px;
  background: #ffffff;
}
@media (max-width: 768px) {
  .p-mv__pagination-bar {
    width: 62px;
  }
}

.p-mv__pagination-bar.is-active {
  background: #1dbbff;
}

.p-topics {
  width: 100%;
  background: #f7f7f7;
}

.p-topics__inner {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding: 0 50px 80px;
}
@media (max-width: 768px) {
  .p-topics__inner {
    padding: 0 20px 80px;
  }
}

.p-topics__list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 50px;
  margin: 0 0 47px;
  padding: 0;
  list-style: none;
}
@media (max-width: 768px) {
  .p-topics__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 40px;
  }
}

.p-topics__item {
  width: 100%;
  max-width: 400px;
}
@media (max-width: 768px) {
  .p-topics__item {
    max-width: none;
  }
}

.p-solution {
  width: 100%;
}

.p-solution__inner {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding: 0 13px 20px;
}
@media (max-width: 768px) {
  .p-solution__inner {
    padding: 0 20px;
  }
}

.p-solution__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 768px) {
  .p-solution__list {
    margin-inline: -20px;
  }
}

.p-solution__item {
  width: 100%;
}
@media (max-width: 768px) {
  .p-solution__item {
    width: 100%;
    margin-inline: 0;
  }
}

.p-solution__item:nth-child(2) .c-solution-card__body {
  top: 173px;
}
@media (max-width: 768px) {
  .p-solution__item:nth-child(2) .c-solution-card__body {
    top: 0;
  }
}

.p-solution__item:nth-child(2) .c-solution-card__lead {
  width: 100%;
  max-width: 451px;
}
@media (max-width: 768px) {
  .p-solution__item:nth-child(2) .c-solution-card__lead {
    max-width: 239px;
  }
}

.p-solution__item:nth-child(2) .c-solution-card__detail {
  width: 100%;
  max-width: 451px;
}
@media (max-width: 768px) {
  .p-solution__item:nth-child(2) .c-solution-card__detail {
    max-width: 335px;
  }
}
/*# sourceMappingURL=top.css.map */