.lp-header {
    font-family: 'Noto Sans JP', sans-serif;
    overflow-x: clip;
    position: relative;
    z-index: 1;
}

.lp-header::before {
    background-size: cover;
    content: '';
    inset: 0;
    position: absolute;
    z-index: 1;
}

.lp-header .lp-header-inner {
    position: relative;
    z-index: 2;
}

.lp-header .lp-header-inner::before {
    aspect-ratio: 1019/587;
    background-image: url(../../images/lp/header-machine.png);
    background-size: cover;
    content: '';
}

.lp-header .lp-header-logo a,
.lp-header .lp-header-logo img {
    display: block;
}

.lp-header .lp-header-title {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.lp-header .lp-header-description {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 2.1428571429;
}

.lp-header .lp-header-button-area {
    filter: drop-shadow(0 4px 12px rgba(36, 36, 36, 0.3));
}

.lp-header .lp-header-button-area .lp-header-button-prefix {
    background-color: #fff;
    border: 3px solid #fc7a02;
    border-radius: 4em;
    color: #372d31;
    font-weight: 700;
    padding-inline: 10px;
    position: relative;
    text-align: center;
    z-index: 2;
}

.lp-header .lp-header-button-area .lp-header-button-prefix::after {
    border-color: #fff transparent transparent;
    border-style: solid;
    border-width: 10px 8px 0;
    bottom: 3px;
    content: '';
    filter: drop-shadow(0 5px 0 #fc7a02);
    left: 50%;
    position: absolute;
    translate: -50% 100%;
}

.lp-header .lp-header-button-area > a {
    border-radius: 16px;
    color: #fff;
    display: block;
    font-weight: 700;
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-decoration: none;
    z-index: 1;
}

.lp-header .lp-header-button-area > a::after,
.lp-header .lp-header-button-area > a::before {
    content: '';
    inset: 0;
    position: absolute;
}

.lp-header .lp-header-button-area > a::before {
    background: linear-gradient(0deg, #ff930f, #ffb42d 63.06%, #fcd547 115.71%);
    transition: opacity 0.3s ease-in-out;
    z-index: 2;
}

.lp-header .lp-header-button-area > a::after {
    background: linear-gradient(0deg, #fcd547, #ffb42d 52.07%, #ff930f 115.71%);
    z-index: 1;
}

.lp-header .lp-header-button-area > a span {
    align-items: center;
    display: flex;
    font-size: 1.25rem;
    gap: 10px;
    justify-content: center;
    line-height: 1.6;
    position: relative;
    z-index: 3;
}

.lp-header .lp-header-button-area > a span::before {
    background-image: url(../../images/lp/icon-contact.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    height: 19px;
    width: 26px;
}

.lp-header .lp-header-button-area > a:active::before,
.lp-header .lp-header-button-area > a:hover::before {
    opacity: 0;
}
@media (min-width: 576px) {

    .lp-header {
        padding-block: 64px 51px;
    }

    .lp-header::before {
        background-image: url(../../images/lp/background-header-tablet.png);
    }

    .lp-header .lp-headear-inner-wrapper {
        padding-inline: 32px;
    }

    .lp-header .lp-header-inner {
        padding-inline-end: 48.73046875%;
        position: relative;
        z-index: 1;
    }

    .lp-header .lp-header-inner::before {
        height: 569px;
        left: 43.02083333%;
        position: absolute;
        top: 0;
        width: 988px;
        z-index: 1;
    }

    .lp-header .lp-header-text {
        position: relative;
        z-index: 2;
    }

    .lp-header .lp-header-logo {
        margin-block-end: 64px;
    }

    .lp-header .lp-header-logo a {
        width: 124px;
    }

    .lp-header .lp-header-title {
        font-size: 2.5rem;
        line-height: 1.8;
    }

    .lp-header .lp-header-description {
        margin-block-start: 40px;
    }

    .lp-header .lp-header-button-area {
        margin-block-start: 98px;
        position: relative;
        width: 300px;
        z-index: 2;
    }

    .lp-header .lp-header-button-area .lp-header-button-prefix {
        font-size: 0.875rem;
        line-height: 2.2857142857;
        margin-inline: 5.5px;
        padding-block: 1px 2px;
    }
}
@media (min-width: 1200px) {

    .lp-header {
        padding-block: 80px 81px;
    }

    .lp-header::before {
        background-image: url(../../images/lp/background-header-pc.png);
        left: 50%;
        right: auto;
        translate: -50% 0;
        width: 100vw;
    }

    .lp-header .lp-headear-inner-wrapper {
        margin-inline: auto;
        max-width: 1200px;
        padding-inline: 0;
    }

    .lp-header .lp-header-inner {
        padding-inline-end: 47.58333333%;
    }

    .lp-header .lp-header-inner::before {
        height: 587px;
        left: 47.75%;
        width: 1019px;
    }

    .lp-header .lp-header-logo {
        margin-block-end: 72px;
    }

    .lp-header .lp-header-logo a {
        width: 175px;
    }

    .lp-header .lp-header-title {
        font-size: 3.5rem;
        line-height: 1.4285714286;
    }

    .lp-header .lp-header-description {
        font-size: 1rem;
        line-height: 2;
        margin-block-start: 32px;
    }

    .lp-header .lp-header-button-area {
        margin-block-start: 54px;
        width: 340px;
    }

    .lp-header .lp-header-button-area .lp-header-button-prefix {
        font-size: 1rem;
        line-height: 2;
        margin-inline: 5px;
        padding-block: 5px;
    }

    .lp-header .lp-header-button-area > a {
        padding: 19px;
    }

    .lp-header .lp-header-button-area > a span {
        font-size: 1.25rem;
        line-height: 1.6;
    }

    .lp-header .lp-header-button-area > a span::before {
        height: 22px;
        width: 29px;
    }
}
@media (max-width: 575.96px) {

    .lp-header {
        padding-block: 60px 49px;
    }

    .lp-header::before {
        background-image: url(../../images/lp/background-header-sp.png);
    }

    .lp-header .lp-headear-inner-wrapper {
        padding-inline: 24px;
    }

    .lp-header .lp-header-inner {
        display: grid;
    }

    .lp-header .lp-header-inner::before {
        display: block;
        margin-block-start: 46px;
        order: 2;
    }

    .lp-header .lp-header-text {
        order: 1;
    }

    .lp-header .lp-header-logo {
        margin-block-end: 28px;
    }

    .lp-header .lp-header-logo a {
        width: 121px;
    }

    .lp-header .lp-header-title {
        font-size: 1.75rem;
        line-height: 2;
    }

    .lp-header .lp-header-description {
        margin-block-start: 24px;
    }

    .lp-header .lp-header-button-area {
        margin-block-start: 40px;
        order: 3;
    }

    .lp-header .lp-header-button-area .lp-header-button-prefix {
        font-size: 0.875rem;
        line-height: 1.8571428571;
        margin-inline: 3.5px;
        padding-block: 4px;
    }
}