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

.th03_bnr .th03_bnr_text {
  padding: 15px;
  color: var(--color-on-primary);
  background: color-mix(in srgb, #664d3c 70%, transparent);
}
.th03_bnr .th03_bnr_text h2,
.th03_bnr .th03_bnr_text h3 {
  color: var(--color-on-primary);
}
.th03_bnr .th03_bnr_text h2:after, .th03_bnr .th03_bnr_text h2:before,
.th03_bnr .th03_bnr_text h3:after,
.th03_bnr .th03_bnr_text h3:before {
  content: none;
}
@media (min-width: 768px) {
  .th03_bnr .th03_bnr_text {
    padding: 50px;
  }
}
.th03_bnr .th03_bnr_button.more a {
  border-color: color-mix(in srgb, var(--color-on-primary) 30%, transparent);
  color: var(--color-on-primary);
}
@media (max-width: 480px) {
  .th03_bnr .th03_bnr_button.more a {
    width: 100%;
    max-width: none;
  }
}
.th03_bnr .th03_bnr_button.more a:after {
  border-color: var(--color-on-primary);
  right: 8%;
}
.th03_bnr .th03_bnr_button.more a:hover {
  color: var(--color-text);
}
.th03_bnr .th03_bnr_button.more a:hover:after {
  border-color: var(--color-text);
}

@media (min-width: 768px) {
  .th03_bnr {
    position: relative;
  }
  .th03_bnr + .th03_bnr {
    margin-top: 5%;
  }
  .th03_bnr .th03_bnr_img {
    position: absolute;
    left: 45%;
    right: auto;
    top: 0;
    margin: auto;
    overflow: visible;
    padding-top: 40%;
  }
  .th03_bnr .th03_bnr_img > * {
    position: absolute;
    top: 0;
    right: -100%;
    left: 0;
    text-align: left;
  }
  .th03_bnr .th03_bnr_text {
    position: relative;
    z-index: 100;
    width: 55%;
    overflow: hidden;
    min-height: calc(0 * 1);
    background-size: auto;
  }
}
@media (min-width: 768px) and (max-width: 900px) {
  .th03_bnr .th03_bnr_text {
    width: 80%;
  }
}
@media (min-width: 768px) {
  .th03_bnr .th03_bnr_text p:not(.th03_bnr_button) {
    line-height: 2;
    margin-bottom: 4em;
  }
  .th03_bnr .th03_bnr_button {
    position: absolute;
    bottom: 55px;
    left: 55px;
    width: 280px;
    max-width: 100%;
  }
  .th03_bnr .reverse .th03_bnr_img {
    left: auto;
    right: 45%;
  }
  .th03_bnr .reverse .th03_bnr_img > * {
    right: 0;
    left: -100%;
    text-align: right;
  }
  .th03_bnr.fade-in .th03_bnr_img {
    opacity: 0;
    transition: 1s 0.5s;
  }
  .th03_bnr.fade-in .th03_bnr_text {
    opacity: 0;
    transition: 1s 0.5s;
  }
  .th03_bnr.visible .th03_bnr_img, .th03_bnr:not(.fade-in) .th03_bnr_img {
    transform: translate(0, -33px);
    opacity: 1;
  }
  .th03_bnr.visible .th03_bnr_text, .th03_bnr:not(.fade-in) .th03_bnr_text {
    transform: translate(0, 33px);
    opacity: 1;
  }
}