@media (max-width:960px) {
    .main {
        position: relative;
        overflow: hidden;
    }

    .main_bg img,
    .main_chara img,
    .main_catch img,
    .logo img,
    .release img,
    .appicon img,
    .merit_bg1 img,
    .merit_bg2 img,
    .merit_bg3 img,
    .merit_title img,
    .merit_cont_catch img,
    .merit_cont_text img,
    .merit_cont_img img,
    .dl_appicon img,
    .dl_bg1 img,
    .dl_bg2 img,
    .download_title img {
        width: 100%;
    }

    .main_bg {
        z-index: 0;
        line-height: 0;
    }

    .main_catch {
        width: 20%;
        position: absolute;
        top: 1%;
        right: 1%;
        z-index: 2;
    }

    .logo {
        width: 64%;
        position: absolute;
        top: 62%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .release {
        width: 64%;
        position: absolute;
        top: 82%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .appicon {
        width: 90%;
        position: absolute;
        top: 89%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        gap: 20px;
        z-index: 2;
        justify-content: center;
    }

    .main_chara {
        width: 100%;
        position: absolute;
        bottom: 0;
        z-index: 1;
        line-height: 0;
    }


    .about {
        width: 100%;
        padding-bottom: 20px;
        text-align: center;
        background: linear-gradient(90deg, rgb(248, 148, 174), rgb(250, 198, 212));
    }

    .about_img img {
        width: 100%;
        max-width: 300px;
        padding-top: 30px;
        position: relative;
        z-index: 2;
    }

    .about_cont img {
        margin: 10px 0;
        width: 96%;
    }



    .merit {
        width: 100%;
        background-color: #fff;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        padding-bottom: 30px;
    }

    .merit_title {
        width: 96%;
        max-width: 622px;
        text-align: center;
        margin: 0 auto;
        padding: 60px 0 0 0;
        position: relative;
        z-index: 2;
    }

    .merit_bg1,
    .merit_bg2,
    .merit_bg3 {
        position: absolute;
        overflow: hidden;
    }

    .merit_bg1 {
        top: 10px;
        right: -100px;
        width: 70%;
    }

    .merit_bg2 {
        position: absolute;
        top: 50%;
        left: -100px;
        width: 70%;
    }

    .merit_bg3 {
        position: absolute;
        top: 80%;
        right: -100px;
        width: 70%;
    }

    .double-border {
        width: 86%;
        color: #F99AB2;
        position: relative;
        border: 2px solid #F99AB2;
        margin: 0 auto;
        box-sizing: border-box;
        background-color: #fff;
    }

    .double-border::after {
        position: absolute;
        top: -10px;
        left: -10px;
        bottom: -10px;
        right: -10px;
        border: 4px solid;
        content: '';
        z-index: -1;
    }

    .merit_cont1,
    .merit_cont2,
    .merit_cont3 {
        position: relative;
        z-index: 2;
        margin-top: 30px;
        padding: 30px 2%;
    }

    .merit_cont {
        position: relative;
        z-index: 1;
    }

    .merit_cont1 .merit_cont_catch {
        position: relative;
        width: 96%;
    }

    .merit_cont1 .merit_cont_text {
        max-width: 476px;
        width: 75%;
        position: relative;
        margin-top: 20px;
        left: 10%;
    }

    .merit_cont1 .merit_cont_img {
        position: relative;
        text-align: center;
        margin-top: 20px;
        left: 10px;
        z-index: 0;
    }

    .merit_cont2 .merit_cont_catch {
        position: relative;
        width: 96%;
    }

    .merit_cont2 .merit_cont_text {
        max-width: 486px;
        width: 75%;
        position: relative;
        margin-top: 20px;
        left: 10%;
    }

    .merit_cont2 .merit_cont_img {
        position: relative;
        text-align: center;
        margin-top: 20px;
        z-index: 0;
    }

    .merit_cont3 .merit_cont_catch {
        position: relative;
        width: 96%;
    }

    .merit_cont3 .merit_cont_text {
        max-width: 570px;
        width: 75%;
        position: relative;
        margin-top: 20px;
        left: 10%;
    }

    .merit_cont3 .merit_cont_img {
        position: relative;
        text-align: center;
        margin-top: 20px;
        z-index: 0;
    }

    .download {
        width: 100%;
        background-color: #F897B0;
        text-align: center;
        padding: 60px 0;
        position: relative;
        overflow: hidden;
    }

    .download_title {
        max-width: 338px;
        margin: 0 auto;
        width: 70%;
    }

    .dl_bg1 {
        width: 30%;
        position: absolute;
        left: -8%;
        top: -10px;
        z-index: 0;
    }

    .dl_bg2 {
        width: 30%;
        position: absolute;
        right: -8%;
        bottom: -10px;
        z-index: 0;
    }

    .dl_appicon {
        width: 96%;
        display: flex;
        margin: 30px auto 0 auto;
        gap: 20px;
        justify-content: center;
        position: relative;
        z-index: 1;
    }

    footer {
        width: 96%;
        margin: 0 auto;
        padding: 60px 0;
    }

    .footer_btn {
        display: flex;
        justify-content: center;
        margin: 0 auto;
        gap: 30px
    }

    .texthover a {
        transition: 0.5s;
    }

    .texthover a:hover {
        color: #F897B0;
        transition: .5s;
    }

    footer p {
        margin-top: 30px;
        line-height: 1.5em;
        text-align: center;
    }


}