#kv .container {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

#kv .shape {
    position: absolute;
    z-index: 5;
}

#kv .middle_btn {
    position: absolute;
    top: 35%;
    left: 50%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-color: white;
    border-style: solid;
    border-radius: 1000px;
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    font-weight: bold;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}

#kv .jump {
    position: absolute;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-animation: jump_button_float 3s infinite;
            animation: jump_button_float 3s infinite;
    background-color: rgba(255,255,255,.7);
    border-radius: 100%;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    font-family: HiraginoMaruGothicProN, sans-serif;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

#kv .jump .small {
    font-weight: bold;
}

#kv .jump img {
    display: block;
}

@media (min-width: 1441px) {
    #kv {
        height: calc(100vh - 100px);
        margin-top: 100px;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    #kv .container {
        border-radius: 82px;
    }

    #kv .middle_btn {
        border-width: 3px;
        -webkit-box-shadow: inset 0 0 20px 0 white;
                box-shadow: inset 0 0 20px 0 white;
        font-size: 30px;
        height: 154px;
        width: 556px;
    }

    #kv .middle_btn .big {
        font-size: 40px;
    }

    #kv .middle_btn .line1 {
        margin-bottom: 10px;
    }

    #kv .jump {
        left: calc(50% - (211px / 2));
        /*bottom: 92px;*/
        bottom: 0;
        -webkit-filter: drop-shadow(0 3px 20px white);
                filter: drop-shadow(0 3px 20px white);
        height: 211px;
        width: 211px;
    }

    #kv .jump .line:nth-child(1) {
        margin-top: 30px;
        margin-bottom: 15px;
    }

    #kv .jump .line:nth-child(2) {
        letter-spacing: 2.5px;
        margin-bottom: 30px;
    }

    #kv .jump .big {
        font-size: 42px;
    }

    #kv .jump .med {
        font-size: 30px;
    }

    #kv .jump .small {
        font-size: 26px;
    }

    #kv .jump img {
        height: 17px;
        width: 37px;
    }

    #kv .blue_circle {
        right: -170px;
        bottom: 10px;
        width: 350px;
    }

    #kv .green_triangle {
        top: -130px;
        right: -230px;
        width: 450px;
    }

    #kv .orange_circle {
        top: 150px;
        left: -130px;
        width: 350px;
    }

    #kv .yellow_square {
        left: 30px;
        bottom: -120px;
        width: 350px;
    }
}

@media (max-width: 1440px) and (min-width: 751px) {
    #kv {
        height: calc(100vh - (100vw * 100 / 1440));
        margin-top: calc(100vw * 100 / 1440);
        padding-top: calc(100vw * 24 / 1440);
        padding-bottom: calc(100vw * 24 / 1440);
    }

    #kv .container {
        border-radius: calc(100vw * 82 / 1440);
    }

    #kv .middle_btn {
        border-width: calc(100vw * 3 / 1440);
        -webkit-box-shadow: inset 0 0 20px 0 white;
                box-shadow: inset 0 0 20px 0 white;
        font-size: calc(100vw * 30 / 1440);
        height: calc(100vw * 154 / 1440);
        width: calc(100vw * 556 / 1440);
    }

    #kv .middle_btn .big {
        font-size: calc(100vw * 40 / 1440);
    }

    #kv .middle_btn .line1 {
        margin-bottom: calc(100vw * 10 / 1440);
    }

    #kv .jump {
        left: calc(50% - (100vw * 211 / 1440 / 2));
        /*bottom: calc(100vw * 92 / 1440);*/
        bottom: 0;
        -webkit-filter: drop-shadow(0 calc(100vw * 3 / 1440) calc(100vw * 20 / 1440) white);
                filter: drop-shadow(0 calc(100vw * 3 / 1440) calc(100vw * 20 / 1440) white);
        height: calc(100vw * 211 / 1440);
        width: calc(100vw * 211 / 1440);
    }

    #kv .jump .line:nth-child(1) {
        margin-top: calc(100vw * 30 / 1440);
        margin-bottom: calc(100vw * 10 / 1440);
    }

    #kv .jump .line:nth-child(2) {
        margin-bottom: calc(100vw * 30 / 1440);
        letter-spacing: calc(100vw * 2.5 / 1440);
    }

    #kv .jump .big {
        font-size: calc(100vw * 42 / 1440);
    }

    #kv .jump .med {
        font-size: calc(100vw * 30 / 1440);
    }

    #kv .jump .small {
        font-size: calc(100vw * 26 / 1440);
    }

    #kv .jump img {
        height: calc(100vw * 17 / 1440);
        width: calc(100vw * 37 / 1440);
    }

    #kv .blue_circle {
        right: calc(100vw * -170 / 1440);
        bottom: calc(100vw * 10 / 1440);
        width: calc(100vw * 350 / 1440);
    }

    #kv .green_triangle {
        top: calc(100vw * -130 / 1440);
        right: calc(100vw * -230 / 1440);
        width: calc(100vw * 450 / 1440);
    }

    #kv .orange_circle {
        top: calc(100vw * 150 / 1440);
        left: calc(100vw * -130 / 1440);
        width: calc(100vw * 350 / 1440);
    }

    #kv .yellow_square {
        left: calc(100vw * 30 / 1440);
        bottom: calc(100vw * -120 / 1440);
        width: calc(100vw * 330 / 1440);
    }
}

@media (min-width: 751px) {
    #kv .container {
        background-image: url(../img/kv/preview.png);
    }
}

@media (max-width: 750px) {
    #kv {
        height: calc(100vh - (100vw * 75 / 750));
        margin-top: calc(100vw * 75 / 750);
        padding-bottom: calc(100vw * 20 / 750);
    }

    #kv .container {
        background-image: url(../img/kv/preview_sp.png);
        border-radius: calc(100vw * 20 / 750);
    }

    #kv .middle_btn {
        border-width: calc(100vw * 3 / 750);
        -webkit-box-shadow: inset 0 0 20px 0 white;
                box-shadow: inset 0 0 20px 0 white;
        font-size: calc(100vw * 30 / 750);
        height: calc(100vw * 154 / 750);
        width: calc(100vw * 556 / 750);
    }

    #kv .middle_btn .big {
        font-size: calc(100vw * 40 / 750);
    }

    #kv .middle_btn .line1 {
        margin-bottom: calc(100vw * 10 / 750);
    }

    #kv .jump {
        left: calc(50% - (100vw * 211 / 750 / 2));
        /*bottom: calc(100vw * 60 / 750);*/
        bottom: 0;
        -webkit-filter: drop-shadow(0 0 calc(100vw * 10 / 750) white);
                filter: drop-shadow(0 0 calc(100vw * 10 / 750) white);
        height: calc(100vw * 211 / 750);
        width: calc(100vw * 211 / 750);
    }

    #kv .jump .line:nth-child(1) {
        margin-top: calc(100vw * 30 / 750);
        margin-bottom: calc(100vw * 15 / 750);
    }

    #kv .jump .line:nth-child(2) {
        letter-spacing: calc(100vw * 2.5 / 750);
        margin-bottom: calc(100vw * 30 / 750);
    }

    #kv .jump .big {
        font-size: calc(100vw * 42 / 750);
    }

    #kv .jump .med {
        font-size: calc(100vw * 30 / 750);
    }

    #kv .jump .small {
        font-size: calc(100vw * 26 / 750);
    }

    #kv .jump img {
        height: calc(100vw * 17 / 750);
        width: calc(100vw * 37 / 750);
    }

    #kv .blue_circle {
        right: calc(100vw * -100 / 750);
        bottom: calc(100vw * 70 / 750);
        width: calc(100vw * 240 / 750);
    }

    #kv .green_triangle {
        top: calc(100vw * -50 / 750);
        right: calc(100vw * -120 / 750);
        width: calc(100vw * 260 / 750);
    }

    #kv .orange_circle {
        top: calc(100vw * 190 / 750);
        left: calc(100vw * -90 / 750);
        width: calc(100vw * 200 / 750);
    }

    #kv .yellow_square {
        left: calc(100vw * -30 / 750);
        bottom: calc(100vw * -110 / 750);
        width: calc(100vw * 200 / 750);
    }
}

@-webkit-keyframes jump_button_float {
    0%, 100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(-5%);
                transform: translateY(-5%);
    }
}

@keyframes jump_button_float {
    0%, 100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(-5%);
                transform: translateY(-5%);
    }
}