/* features-mod-08.css — ベースライン(自動読込・module-base.css前提)。編集せず上書きで調整。 */
@charset "UTF-8";

.mod_08_section .mod_08_title {
  display: block;
}
.mod_08_section .mod_08_title small {
  display: block;
  font-size: 0.75rem;
}
.mod_08_section .mod_08_title span {
  display: inline-block;
  position: relative;
}
.mod_08_section .mod_08_title span:after {
  content: "";
  background: var(--color-primary);
  position: absolute;
  width: 100%;
  display: block;
  left: 0;
  right: 0;
  bottom: -95%; color: var(--color-on-primary); }
@media (min-width: 768px) {
  .mod_08_section.typeA .container .row, .mod_08_section.typeB .container .row {
    position: relative;
  }
  .mod_08_section.typeA .container .row .mod_08_txt-box, .mod_08_section.typeB .container .row .mod_08_txt-box {
    position: absolute;
    top: 50%;
    margin: auto;
  }
  .mod_08_section.typeA .container .row:not(.reverse) .mod_08_txt-box, .mod_08_section.typeB .container .row:not(.reverse) .mod_08_txt-box {
    right: 0;
  }
  .mod_08_section.typeA .container .row.reverse .mod_08_txt-box, .mod_08_section.typeB .container .row.reverse .mod_08_txt-box {
    left: 0;
  }
}
.mod_08_section.typeB .row {
  background: var(--color-primary); color: var(--color-on-primary); }
.mod_08_section.typeB .row .mod_08_txt-box {
  padding: 4%;
}
.mod_08_section.typeB .container > .row {
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .mod_08_section.typeB .container {
    padding: 0;
  }
}
.mod_08_section.typeC {
  background: var(--color-primary); color: var(--color-on-primary); }
@media (min-width: 768px) {
  .mod_08_section.typeC .mod_08_txt-box {
    padding: 4%;
  }
  .mod_08_section.typeC .row .mod_08_img-box {
    position: relative;
  }
  .mod_08_section.typeC .row .mod_08_img-box figure {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    overflow: hidden;
    width: 1920px;
    width: 50vw;
  }
  .mod_08_section.typeC .row .mod_08_img-box figure img {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
  }
}
@media (min-width: 768px) and (max-width: 1020px) {
  .mod_08_section.typeC .row .mod_08_img-box figure img {
    height: 100%;
    width: auto;
    max-width: none;
  }
}
@media (min-width: 768px) {
  .mod_08_section.typeC .row.reverse .mod_08_img-box figure {
    right: auto;
    left: 0;
  }
  .mod_08_section.typeC .row.reverse .mod_08_img-box figure img {
    right: auto;
    left: 0;
  }
  .mod_08_section.typeC .container > .row {
    margin-bottom: 0;
  }
}
@media (max-width: 767px) {
  .mod_08_section.typeC .container {
    padding: 0;
  }
  .mod_08_section.typeC .container .mod_08_txt-box {
    padding: 2% 2% 4%;
  }
}
.mod_08_section.inverse .mod_08_title span:after {
  background: #FFF;
}
.mod_08_section.fade-in .mod_08_txt-box {
  opacity: 0;
}
.mod_08_section.fade-in .mod_08_title span {
  overflow: hidden;
  transform: translateY(20px);
}
.mod_08_section.fade-in .mod_08_title span:after {
  opacity: 1;
  height: 100%;
  transition: 0.5s;
  bottom: 0;
}
.mod_08_section.visible .mod_08_txt-box {
  opacity: 1;
  transition: 0.5s;
}
.mod_08_section.visible .mod_08_title span {
  transform: translateY(0);
  transition: 1s;
}
.mod_08_section.visible .mod_08_title span:after {
  opacity: 1;
  transition: 0.5s 0.5s;
  bottom: -95%;
}
@media (min-width: 768px) {
  .mod_08_section.typeA.fade-in .mod_08_txt-box, .mod_08_section.typeB.fade-in .mod_08_txt-box {
    transform: translateY(-40%);
  }
}
@media (min-width: 768px) {
  .mod_08_section.typeA.visible .mod_08_txt-box, .mod_08_section.typeB.visible .mod_08_txt-box {
    transform: translateY(-50%);
  }
}
.mod_08_section .more .add_arrow {
  margin-left: 0;
}