@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

html {
    scroll-behavior: smooth;
}

div#anchor {
    position: relative;
    margin-top: -5.465vw;
    padding: 5.128vw 0;
    background: url(../img/works/anchor_bg.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top;
    z-index: 3;
}

div#work_2 {
    position: relative;
    margin-top: -6.465vw;
    padding: 5.128vw 0;
    background: url(../img/works/anchor_bg.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top;
    z-index: 8;
}

.floating-anchor {
    position: fixed;
    bottom: 0.366vw;
    right: 0.733vw;
    width: 2.564vw;
    color: #fff;
    padding: 0 0;
    text-decoration: none;
    z-index: 999;
}

[id^="anchor"] {
  scroll-margin-top: 7.326vw; /* ヘッダーの高さ分調整 */
}

.sec1 {
    margin-top: -5.469vw;
}

.sec12 {
    position: relative;
    background: url(../img/works/sec12_bg.png);
    background-size: cover;
    background-position: left top;
    padding-top: 8.791vw;
    margin-top: -6.447vw;
    padding-bottom: 12.821vw;
}

.sec12 .sec_inner {
    width: 94%;
    margin: auto;
}

.user_voice_wrap {
    margin: 4.615vw 0 0;
    overflow: hidden;
}

.cta {
    background: #fffcf3;
    padding-bottom: 14.652vw;
}

.cta_inner {
    position: relative;
    width: 84.982vw;
    margin: auto;
}

.cta_line_btn {
    position: absolute;
    top: 6.74vw;
    right: 13%;
    width: 25vw;
}

.sec_inner img {
    width: 100%;
}

.link_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.22vw 0;
    width: 95%;
    min-height: 3.663vw;
    margin: auto;
    border-bottom: solid 1px #BDBDBD;
}

.anchor_btn {
    color: #398D78;
    font-family: Raleway;
    font-size: 1.026vw;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.021vw;
    text-decoration: unset;
}

.link_flex span {
    width: 1.026vw;
    height: auto;
    display: flex;
    margin-right: 0.366vw;
}

@media(max-width:767px) {
    .sec12 {
        position: relative;
        background: url(../img/works/sec12_bg.png);
        background-size: cover;
        background-position: left top;
        padding-top: 3.333vw;
        margin-top: -21.795vw;
        padding-bottom: 0;
    }
    .sec12 .sec_inner {
        width: 94%;
        margin: auto;
        position: relative;
    }
    .user_voice_wrap {
        position: absolute;
        width: 95%;
        margin-left: 5%;
        bottom: 14.103vw;
    }
    .cta {
        background: #fffcf3;
        padding-bottom: 25.641vw;
    }
    .cta_line_btn {
        top: auto;
        bottom: 7.692vw;
        width: 80%;
        right: 10%;
    }

    .cta_inner {
        width: 100%;
    }

    .link_flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.769vw 0;
        width: 95%;
        min-height: 12.821vw;
        margin: auto;
        border-bottom: solid 1px #BDBDBD;
    }

    div#anchor {
        position: relative;
        margin-top: -5.128vw;
        padding: 17.949vw 0;
        background: url(../img/works/sp/anchor_bg.png);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: top;
        z-index: 3;
    }

    .anchor_btn {
        color: #398D78;
        font-family: Raleway;
        font-size: 3.59vw;
        font-style: normal;
        font-weight: 700;
        letter-spacing: -0.072vw;
        text-decoration: unset;
    }

    .link_flex span {
        width: 3.59vw;
        height: auto;
        display: flex;
        margin-right: 1.282vw;
    }

    div#work_3 {
        position: relative;
        z-index: 8;
        margin-top: -8vw;
    }

    div#work_4 {
        position: relative;
        z-index: 3;
        margin-top: -8vw;
    }

    div#work_5 {
        position: relative;
        z-index: 3;
        margin-top: -8vw;
    }

}