@charset "utf-8";




@media print,
screen and (min-width: 769px) {


    #simulation #sound .kv {
        height: 520px;
    }

    #simulation #sound .kv .back {
        background-image: url(img/snd_kv_back.jpg);
    }


    #simulation #sound .kv .titarea {
        display: block;
        background-image: url(img/snd_kv_title_left.png);
        background-size: 497px 133px;
        background-repeat: no-repeat;
        background-position: left center;
        width: 100%;
        height: 140px;
        margin-top: -20px;
    }

    #simulation #sound .kv .titarea .inn {
        display: block;
        background-image: url(img/snd_kv_title_right.png);
        background-size: 507px 96px;
        background-repeat: no-repeat;
        background-position: right center;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #simulation #sound .kv h2 {
        display: block;
        background-image: url(img/snd_kv_title.png);
        background-size: 100% 100%;
        width: 145px;
        height: 59px;
        text-indent: -9999px;
        margin-left: auto;
        margin-right: auto;
    }

    #simulation #sound .kv .product {
        width: 210px;
        margin-left: auto;
        margin-right: auto;
        margin-top: -20px;
    }

    #simulation #sound .kv .lead {
        font-size: 20px;
        text-align: center;
        margin-top: 20px;
        line-height: 2em;
    }

    #simulation #sound #history .circle1 {
        left: -200px;
        top: -200px;
        width: 380px;
        height: 380px;
    }

    #simulation #sound #history .circle2 {
        right: -300px;
        bottom: -200px;
        width: 485px;
        height: 485px;
    }


    #simulation #sound #melody .circle1 {
        left: -200px;
        top: 200px;
        width: 380px;
        height: 380px;
    }





    #simulation #sound #trademark .circle1 {
        right: -200px;
        top: -200px;
        width: 380px;
        height: 380px;
    }

    #simulation #sound #trademark .circle2 {
        left: -300px;
        bottom: -200px;
        width: 485px;
        height: 485px;
    }

    
    


}




@media only screen and (max-width: 1400px) and (min-width: 769px) {

    #simulation #sound .kv .titarea {
        background-position: calc(50% - 1400px / 2 + 497px / 2 ) center;
    }

    #simulation #sound .kv .titarea .inn {
        background-position: calc(50% + 1400px / 2 - 507px / 2 ) center;
    }

}




@media only screen and (max-width: 768px) {




    #simulation #sound .kv {
        height: calc(100vw / 750 * 910);
    }

    #simulation #sound .kv .back {
        background-image: url(img/top_kv_back_sp.jpg);
    }

    #simulation #sound .kv .titarea {
        display: block;
        background-image: url(img/snd_kv_title_kazari.png);
        background-size: 100% 100%;
        width: 100%;
        height: calc(100vw / 750 * 155);
        margin-top: -12vw;
    }

    #simulation #sound .kv .titarea .inn {
        display: block;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #simulation #sound .kv h2 {
        display: block;
        background-image: url(img/snd_kv_title_sp.png);
        background-size: 100% 100%;
        width: 30vw;
        height: calc(30vw / 228 * 88);
        text-indent: -9999px;
        margin-left: auto;
        margin-right: auto;
    }



    #simulation #sound .kv .product {
        width: 50vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 6vw;
    }

    #simulation #sound .kv .lead {
        font-size: 14px;
        text-align: center;
        margin-top: 6vw;
        line-height: 2em;
    }

    #simulation #sound #history .circle1 {
        left: -200px;
        top: -200px;
        width: 380px;
        height: 380px;
    }

    #simulation #sound #history .circle2 {
        right: -300px;
        bottom: -200px;
        width: 485px;
        height: 485px;
    }


    #simulation #sound #melody .circle1 {
        left: -200px;
        top: -200px;
        width: 380px;
        height: 380px;
    }

    #simulation #sound #melody .circle2 {
        right: -300px;
        bottom: -200px;
        width: 485px;
        height: 485px;
    }







    #simulation #sound #melody h3 {
        font-size: 19px;
    }





    #simulation #sound #history .circle1 {
        left: -20vw;
        top: -20vw;
        width: 50vw;
        height: 50vw;
    }

    #simulation #sound #history .circle2 {
        right: -30vw;
        bottom: -10vw;
        width: 60vw;
        height: 60vw;
    }




    #simulation #sound #melody .circle1 {
        left: -20vw;
        top: 20vw;
        width: 50vw;
        height: 50vw;
    }





    #simulation #sound #trademark .circle1 {
        right: -20vw;
        top: -20vw;
        width: 50vw;
        height: 50vw;
    }

    #simulation #sound #trademark .circle2 {
        left: -30vw;
        bottom: -10vw;
        width: 60vw;
        height: 60vw;
    }


    



}