@import "form.css";

.lp-common {
    position: relative;
    container-type: inline-size;
}

.lp-common section.main-visual h2 {
    color: #59472d;
    background: var(--site-color-white);
    font-size: 6cqw;
    letter-spacing: 2px;
    line-height: 2;
    padding: 9% 7%;
}

.lp-common section.main-visual .catch {
    position: relative;
    top: inherit;
    background: #fffdf0;
    color: #7c6a4f;
    margin-top: -3px;
    padding: 20px;
    line-height: 1.8;
}

.lp-common section.main-visual::after {
    content: "";
    background: url(../img/lp_bg_deco.jpg) no-repeat bottom;
    position: relative;
    bottom: 1px;
    display: block;
    width: 100%;
    height: 91px;
}

.lp-common section.heroine-intro {
    background: #7d705d;
    padding-top: 20px;
    position: relative;
    margin-top: -2px;
}

.lp-common section.heroine-intro::before {
    content: "";
    background: url(../img/bg_carousel.jpg) no-repeat top;
    background-size: 100%;
    position: absolute;
    top: 62cqw;
    left: 0;
    display: block;
    width: 100%;
    height: 40%;
}
.lp-common section.heroine-intro h3::after {
    content: "";
    background: url(../img/bg_carousel.jpg) no-repeat top;
    rotate: 180deg;
    background-size: 100%;
    position: absolute;
    bottom: 34cqw;
    left: 0;
    display: block;
    width: 100%;
    height: 40%;
}

.lp-common section.heroine-intro h3 {
    padding-top: 10px;
    font-size: 1.4em;
}

.lp-common section.lp-teller-intro {
    background: #fffdf0;
}

.lp-common section.lp-teller-intro::after {
    content: "";
    position: relative;
    background: linear-gradient(0deg, rgba(20, 20, 20, 1) 5%, rgba(20, 20, 20, 0.7) 30%, rgba(255, 253, 240, 1) 80%);
    display: block;
    width: 100%;
    height: 80px;
}

.lp-common section.lp-teller-intro * {
    color: #7c6a4f;
}

.lp-common section.lp-teller-intro h3 {
    border-bottom: 1px solid #7c6a4f;
    padding: 20px 20px 12px;
    margin: 0 20px;
    font-size: 1.5em;
}

.lp-common section.lp-teller-intro p {
    padding: 20px;
}

.lp-common .btn-area>img {
    display: block;
    margin: auto;
}

.lp-common .btn-area .btn-wrap {
    display: flex;
    justify-content: center;
    gap: 16px;
}