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

.mod_12_section {
  background: url(@@A@@images/mod-12-bg-1.webp) no-repeat center center;
  background-size: cover;
  padding: 5% 0;
}
.mod_12_section .mod_12_title {
  font-weight: bold;
}
.mod_12_section .mod_12_title small {
  font-size: 1rem;
  display: block;
}
@media (max-width: 1020px) {
  .mod_12_section .mod_12_content_wrap {
    max-width: 96%;
    padding: 5% 2%;
  }
}
.mod_12_section.typeA .mod_12_content_wrap {
  background: var(--color-bg);
  padding: 5%;
}
.mod_12_section.typeA.inverse .mod_12_content_wrap {
  background: var(--color-text); color: var(--color-bg); }
.mod_12_section.typeB {
  position: relative;
}
.mod_12_section.typeB .mod_12_content_wrap {
  padding: 2.5%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  transition: 0.4s;
}
.mod_12_section.typeB .mod_12_content_wrap:hover {
  background: var(--color-primary-dark);
  transition: 0.75s; color: var(--color-on-primary); }
.mod_12_section.typeB .mod_12_title a {
  text-decoration: none;
  color: var(--color-on-primary);
}
.mod_12_section.typeB .mod_12_title a:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.mod_12_section.fade-in .mod_12_content_wrap {
  opacity: 0;
  transform: translateY(20px);
}
.mod_12_section.visible .mod_12_content_wrap {
  opacity: 1;
  transition: 1s;
  transform: translateY(0);
}