.wfb__pro .howto {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 36px 20px;
  width: 100%;
  max-width: 800px;
  height: auto;
  margin-inline: auto
}

.wfb__pro .howto__fv-heading figure {
  width: 100%;
  aspect-ratio: 335/43;
  margin-inline: auto
}

.wfb__pro .howto__fv-heading figure img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.wfb__pro .howto__fv-title {
  margin-top: 35px;
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  line-height: 1em
}

.wfb__pro .howto__fv-image {
  width: 72%;
  aspect-ratio: 241/147;
  margin-inline: auto;
  margin-top: 15px
}

.wfb__pro .howto__fv-image img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.wfb__pro .howto__section {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.wfb__pro .howto__section-heading {
  color: #303030;
  font-size: 17px;
  font-weight: 600;
  line-height: 1em;
  padding-bottom: 7px;
  border-bottom: solid 1px #000
}

.wfb__pro .howto__section-link {
  display: block;
  color: #1f59ba;
  font-weight: 600;
  text-decoration: underline
}

.wfb__pro .howto__section-introduction-link {
  margin-top: 20px;
  text-align: right;
  display: block;
  color: #1f59ba;
  font-weight: 600;
  text-decoration: underline
}

.wfb__pro .howto__section-text {
  color: #303030
}

.wfb__pro .howto__section-image {
  width: 100%;
  aspect-ratio: 335/207;
  margin-inline: auto
}

.wfb__pro .howto__section-image.setting {
  aspect-ratio: 335/210
}

.wfb__pro .howto__section-image img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.wfb__pro .howto__section-list {
  padding-left: 1em
}

.wfb__pro .howto__section-list-item {
  position: relative;
  padding-left: 1em;
  color: #303030
}

.wfb__pro .howto__section-list-item::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "\25CF"
}

.wfb__pro:has(.introduction) {
  overflow: hidden;
  width: 100%;
  height: auto
}

.wfb__pro .about__article {
  display: flex;
  flex-direction: column;
  gap: 40px
}

.wfb__pro .about__article.flex {
  flex-direction: row;
  gap: 60px
}

.wfb__pro .about__article-pc {
  position: relative;
  flex: 1;
  width: 420px
}

.wfb__pro .about__article-pc img {
  position: relative;
  width: 100%;
  z-index: 5
}

.wfb__pro .about__article-pc:before,
.wfb__pro .about__article-pc::after {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 230px;
  pointer-events: none;
  content: "";
  z-index: 10
}

.wfb__pro .about__article-pc::before {
  right: calc(100% - 34px);
  background: linear-gradient(to left, transparent 0%, #fff 6%, #fff 100%)
}

.wfb__pro .about__article-pc::after {
  left: calc(100% - 33px);
  background: linear-gradient(to right, transparent 0%, #fff 6%, #fff 100%)
}

.wfb__pro .about__article-pc:is(.introduction *) {
  margin-inline: auto;
  margin-top: 10px
}

.wfb__pro .about__article-images {
  position: absolute;
  top: 5px;
  left: 39px;
  display: flex;
  z-index: 2;
  transition: -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
  transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

.wfb__pro .about__article-images[data-value="0"] {
  -webkit-transform: translateX(calc(-343px * 0));
  transform: translateX(calc(-343px * 0))
}

.wfb__pro .about__article-images[data-value="1"] {
  -webkit-transform: translateX(calc(-343px * 1));
  transform: translateX(calc(-343px * 1))
}

.wfb__pro .about__article-images[data-value="2"] {
  -webkit-transform: translateX(calc(-343px * 2));
  transform: translateX(calc(-343px * 2))
}

.wfb__pro .about__article-images[data-value="3"] {
  -webkit-transform: translateX(calc(-343px * 3));
  transform: translateX(calc(-343px * 3))
}

.wfb__pro .about__article-images[data-value="4"] {
  -webkit-transform: translateX(calc(-343px * 4));
  transform: translateX(calc(-343px * 4))
}

.wfb__pro .about__article-images[data-value="5"] {
  -webkit-transform: translateX(calc(-343px * 5));
  transform: translateX(calc(-343px * 5))
}

.wfb__pro .about__article-img {
  position: relative;
  width: 343px
}

.wfb__pro .about__article-indicator {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  margin-top: 15px
}

.wfb__pro .about__article-indicator-item {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #e0e0e0;
  cursor: pointer
}

.wfb__pro .about__article-indicator-item.is-active {
  background-color: #4f4f4f;
  pointer-events: none
}

.wfb__pro .introduction {
  display: flex;
  flex-direction: column;
  gap: 45px;
  padding: 36px 20px;
  width: 100%;
  max-width: 800px;
  height: auto;
  margin-inline: auto
}

.wfb__pro .introduction__fv-heading figure {
  width: 100%;
  aspect-ratio: 335/43;
  margin-inline: auto
}

.wfb__pro .introduction__fv-heading figure img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.wfb__pro .introduction__fv-title {
  margin-top: 10px;
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  line-height: 1em
}

.wfb__pro .introduction__fv-image {
  width: 72%;
  aspect-ratio: 241/147;
  margin-inline: auto;
  margin-top: 15px
}

.wfb__pro .introduction__fv-image img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.wfb__pro .introduction__fv-points {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 30px
}

.wfb__pro .introduction__fv-point {
  background-color: #0c419a;
  color: #fff;
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  line-height: 44px;
  width: 150px
}

.wfb__pro .introduction__fv-lead {
  display: flex;
  flex-direction: column;
  margin-top: 30px
}

.wfb__pro .introduction__section {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.wfb__pro .introduction__section-heading {
  color: #303030;
  font-size: 17px;
  font-weight: 600;
  line-height: 1em;
  padding-bottom: 7px;
  border-bottom: solid 1px #000
}

.wfb__pro .introduction__section-link {
  display: block;
  color: #1f59ba;
  font-weight: 600;
  text-decoration: underline
}

.wfb__pro .introduction__section-link:is(.introduction__fv-lead *) {
  margin-top: 20px
}

.wfb__pro .introduction__section-text {
  color: #303030
}

.wfb__pro .introduction__section-image {
  width: 100%;
  aspect-ratio: 335/207;
  margin-inline: auto
}

.wfb__pro .introduction__section-image.setting {
  aspect-ratio: 335/210
}

.wfb__pro .introduction__section-image img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.wfb__pro .introduction__section-list {
  padding-left: 1em
}

.wfb__pro .introduction__section-list-item {
  position: relative;
  padding-left: 1.3em;
  color: #303030
}

.wfb__pro .introduction__section-list-item::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "\25CF"
}

@media(min-width: 830px) {

  .wfb__pro .introduction__section-link,
  .wfb__pro .about__article-indicator-item {
    transition: opacity .25s ease-in-out;
    will-change: opacity
  }

  .wfb__pro .introduction__section-link:hover,
  .wfb__pro .about__article-indicator-item:hover {
    opacity: .6
  }
}

@media(max-width: 829px) {
  .wfb__pro .about__article.flex {
    flex-direction: column;
    gap: 40px
  }

  .wfb__pro .about__article-pc {
    width: 320px;
    margin-inline: auto
  }

  .wfb__pro .about__article-pc:before,
  .wfb__pro .about__article-pc::after {
    height: 180px
  }

  .wfb__pro .about__article-pc::before {
    right: calc(100% - 5px)
  }

  .wfb__pro .about__article-pc::after {
    left: calc(100% - 5px)
  }

  .wfb__pro .about__article-images {
    top: 4px;
    left: 29px
  }

  .wfb__pro .about__article-images[data-value="0"] {
    -webkit-transform: translateX(calc(-262px * 0));
    transform: translateX(calc(-262px * 0))
  }

  .wfb__pro .about__article-images[data-value="1"] {
    -webkit-transform: translateX(calc(-262px * 1));
    transform: translateX(calc(-262px * 1))
  }

  .wfb__pro .about__article-images[data-value="2"] {
    -webkit-transform: translateX(calc(-262px * 2));
    transform: translateX(calc(-262px * 2))
  }

  .wfb__pro .about__article-images[data-value="3"] {
    -webkit-transform: translateX(calc(-262px * 3));
    transform: translateX(calc(-262px * 3))
  }

  .wfb__pro .about__article-images[data-value="4"] {
    -webkit-transform: translateX(calc(-262px * 4));
    transform: translateX(calc(-262px * 4))
  }

  .wfb__pro .about__article-images[data-value="5"] {
    -webkit-transform: translateX(calc(-262px * 5));
    transform: translateX(calc(-262px * 5))
  }

  .wfb__pro .about__article-img {
    width: 262px
  }
}