/* ------------------
 advantage
------------------ */

.content-ttl::before {
  background: url('/en/img/advantage/icon-pagettl.svg');
}

.fs48 {
  font-size: 48px;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0;
}

.fs26 {
  font-size: 26px;
}

.fs20 {
  font-size: 20px;
}

.fs16 {
  font-size: 16px;
}

.adv-intro .innr {
  width: 90vw;
  margin: 0 auto;
}

.adv-explain {
  position: relative;
  width: 81.11111vw;
  padding-bottom: 8.68056vw;
  margin: clamp(0px, 56/1440 * 100vw, 56px) auto 0;
  line-height: 1.4;
}

.adv-explain-txt {
  display: flex;
  flex-direction: column;
  gap: clamp(0px, 20/1440 * 100vw, 20px);
}

.adv-explain .txt {
  width: 31.11111vw;
  font-weight: 300;
}

.adv-explain .slider-box {
  position: absolute;
  top: 4.3vw;
  right: 0;
  width: 42.22222vw;
  margin: -25px 0 0;
}

.adv-explain .media {
  position: absolute;
  top: 0;
  right: 0;
  width: 42.22222vw;
  margin: -25px 0 0;
  video {
    width: 100%;
    height: 100%;
  }
}

.adv-superiority {
  line-height: 1.4;
  background: #bcc5d1;
}

.adv-superiority .innr {
  width: 81.11111vw;
  padding: 14.44444vw 0 8.40278vw;
  margin: 0 auto;
}

.adv-superiority .innr .intro-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.adv-superiority .innr .intro-list li {
  width: calc(100vw / 3);
  border-right: 1px solid #abb8ca;
  ul {
    margin-bottom: 3.33333vw;
    list-style-type: disc;
    li {
      width: 100%;
      border: 0;
      word-break: break-word;
      overflow-wrap: anywhere;
    }
  }
}

.adv-superiority .innr .intro-list li:nth-child(2) dl {
  margin: 0 auto;
}

.adv-superiority .innr .intro-list li:last-child {
  border-right: none;
}

.adv-superiority .innr .intro-list li:last-child dl {
  margin: 0 0 0 auto;
}

.adv-superiority .innr .intro-list li dl {
  width: 21.11111vw;
}

.adv-superiority .innr .intro-list li dt {
  position: relative;
  height: 136px;
  margin-bottom: 2.77778vw;
  font-weight: 300;
}

.adv-superiority .innr .intro-list li dt:before {
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 2px;
  height: 1px;
  content: '';
  background: #3a4479;
}

.adv-superiority .innr .intro-list li dt::after {
  position: absolute;
  bottom: 0;
  display: block;
  width: 11.11111vw;
  content: '';
  border-bottom: 1px solid #d0d7e0;
}

.adv-superiority .innr .intro-list li dd p {
  margin-bottom: 3.33333vw;
  font-weight: 300;
}
.adv-superiority .innr .intro-list li dd p:has(+ ul) {
  margin-bottom: 1em;
}

@media screen and (max-width: 768px) {
  .fs48 {
    font-size: 8.20513vw;
  }
  .fs26 {
    font-size: 6.666666vw;
  }
  .fs20 {
    font-size: 4.10256vw;
  }
  .fs16 {
    font-size: 4.10256vw;
  }
  .adv-intro .innr {
    width: 94.35897vw;
  }
  .adv-explain {
    width: 94.35897vw;
    padding-bottom: 0;
    margin: 10.25641vw auto;
  }
  .adv-explain .txt {
    width: 82.05128vw;
    margin: 0 0 0 auto;
  }
  .adv-explain .slider-box {
    top: auto;
    right: 0;
    bottom: -12.30769vw;
    width: 94.35897vw;
  }
  .adv-explain .media {
    width: 94.35897vw;
    margin-top: 10.25641vw;
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
  }
  .adv-superiority .innr {
    width: 86.15385vw;
    padding: 29.74359vw 0 0;
  }
  .adv-superiority .innr .intro-list {
    display: block;
  }
  .adv-superiority .innr .intro-list li {
    width: 100%;
    padding-bottom: 3.07692vw;
    margin-bottom: 14.35897vw;
    border-right: none;
    border-bottom: 1px solid #abb8ca;
  }
  .adv-superiority .innr .intro-list li:nth-child(2) dl {
    margin: 0 auto;
  }
  .adv-superiority .innr .intro-list li:last-child {
    margin-bottom: 0;
    border-right: none;
    border-bottom: none;
  }
  .adv-superiority .innr .intro-list li:last-child dl {
    margin: 0 0 0 auto;
  }
  .adv-superiority .innr .intro-list li dl {
    width: 100%;
  }
  .adv-superiority .innr .intro-list li dt {
    width: 100%;
    height: auto;
    padding-bottom: 7.69231vw;
    margin-bottom: 10.25641vw;
  }
  .adv-superiority .innr .intro-list li dd p {
    margin-bottom: 10.25641vw;
  }
  .adv-superiority .innr .intro-list li dt::after {
    width: 41.02564vw;
  }
}

@media screen and (min-width: 1920px) {
  .fs48 {
    font-size: 64px;
    letter-spacing: 0;
  }
  .fs26 {
    font-size: 35px;
  }
  .fs20 {
    font-size: 27px;
  }
  .fs16 {
    font-size: 1.11111vw;
  }
  .adv-intro .innr {
    width: 1728px;
  }
  .adv-explain {
    width: 1557px;
    padding-bottom: 166px;
    margin: 102px auto 0;
  }
  .adv-explain .txt {
    width: 597px;
  }
  .adv-explain .slider-box {
    top: 189px;
    width: 810px;
  }
  .adv-superiority .innr {
    width: 1557px;
    padding: 277px 0 161px;
  }
  .adv-superiority .innr .intro-list li dl {
    width: 405px;
  }
  .adv-superiority .innr .intro-list li dt {
    width: 213px;
    height: 184px;
    margin-bottom: 53px;
  }
  .adv-superiority .innr .intro-list li dd p {
    margin-bottom: 64px;
  }
}

/*slider*/
.slider-box {
  padding-top: 2.222222222vw;
  overflow: hidden;
}

.swiper-slide {
  display: flex;
  justify-content: flex-end;
}

.swiper-slide-img {
  width: 100%;
  height: 100%;
  max-height: 430px;
}

.swiper-pagination {
  position: absolute;
  right: 5%;
  bottom: 97% !important;
  z-index: 1;
  display: flex;
  flex-direction: row-reverse;
  gap: 12px;
  align-items: center;
  width: 100%;
}

.swiper-pagination-bullet {
  width: 16px;
  height: 1px;
  margin: 0 6px;
  cursor: pointer;
  background-color: #3a4479;
  border-radius: 9999px;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  height: 12px;
  background: url('/en/common/img/icon-slider-on.svg') no-repeat center
    center/contain;
  background-size: 12px;
}

.dots-wrap {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
}
.dots-wrap li {
  width: 1.11111111vw;
  height: 1.11111111vw;
  margin: 0 1.11111111vw;
  cursor: pointer;
  background: url('/en/img/advantage/icon-slider-off.svg') no-repeat center
    center/contain;
}

.dots-wrap li button {
  display: none;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  outline: none;
}

@media screen and (max-width: 768px) {
  /*slider*/
  .slider-box {
    padding-top: clamp(0px, 24/388 * 100vw, 24px);
  }
  .swiper-pagination {
    bottom: 95% !important;
  }
}