@charset "utf-8";



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


    #simulation #design .kv {
        height: 560px;
    }

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


    #simulation #design .kv .titarea {
        display: block;
        background-image: url(img/des_kv_title_left.png);
        background-size: 581px 125px;
        background-repeat: no-repeat;
        background-position: left center;
        width: 100%;
        height: 140px;
    }

    #simulation #design .kv .titarea .inn {
        display: block;
        background-image: url(img/des_kv_title_right.png);
        background-size: 558px 134px;
        background-repeat: no-repeat;
        background-position: right center;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

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

    #simulation #design .kv .product {
        position: relative;
        width: 828px;
        height: 320px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        background-image: url(img/des_kv_product.png);
    }

    #simulation #design .kv .product .cap{
        font-size: 12px;
        position: absolute;
        /* right: 20px;
        top: calc(100% - 20px); */
        left: calc(100%);
        bottom: 30px;
        white-space: nowrap;
    }


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

  
    
    #simulation #design .mainimage {
        width: 595px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }
  
    

    #simulation #design .mainimage a{
        display: block;
       background-image: url(img/des_main_hitarea.png);
       background-size: 100% 100%;
       width: 312px;
       height: calc( 312px / 411 * 153 );
       position: absolute;
       left: 140px;
       top: 10px;
    }
    #simulation #design .mainimage a .ico{
        background-image: url(img/des_main_ico.png);
        background-size: 100% 100%;
        display: block;
        position: absolute;
        right: -15px;
        bottom: -15px;
        width: 52px;
        height: 52px;
        pointer-events: none;
    }
    


    #simulation #design .box {
        margin-top: 60px;
       border:4px #9bca5b solid;
       border-radius: 40px;
       padding: 40px 60px;
       width: 600px;
       box-sizing: border-box;
       margin-left: auto;
       margin-right: auto;
    }

    #simulation #design .box .image {
        border-radius: 40px;
        position: relative;
        overflow: hidden;
    }

    #simulation #design .box .tit {
        font-weight: 500;
        color: #e7390d;
        font-size: 26px;
        line-height: 1.35em;
    }
    #simulation #design .box .body {
       margin-top: 30px;
       margin-bottom: 0;
    }
    


  
    

     



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

    #simulation #design #newdesign .circle2 {
        right: -300px;
        top: 300px;
        width: 485px;
        height: 485px;
    }
    #simulation #design #newdesign .circle3 {
        left: -300px;
        top: 800px;
        width: 485px;
        height: 485px;
    }

    #simulation #design #newdesign .circle4 {
        right: -200px;
        top: 1200px;
        width: 380px;
        height: 380px;
    }



    #simulation #design #newdesign .circle5 {
        left: -200px;
        top: 1800px;
        width: 380px;
        height: 380px;
    }

    #simulation #design #newdesign .circle6 {
        right: -300px;
        top: 2000px;
        width: 485px;
        height: 485px;
    }



}

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

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

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

}

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




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

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

    #simulation #design .kv .titarea {
        display: block;
        background-image: url(img/des_kv_title_kazari.png);
        background-size: 100vw calc(100vw / 750 * 123);
        background-repeat: no-repeat;
        background-position: center top;
        width: 100%;
    }

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

    #simulation #design .kv h2 {
        display: block;
        background-image: url(img/des_kv_title_sp.png);
        background-size: 100% 100%;
        width: 40vw;
        height: calc(40vw / 354 * 70 );
        text-indent: -9999px;
        margin-left: auto;
        margin-right: auto;
    }



    #simulation #design .kv .product {
        background-image: url(img/des_kv_product_sp.png);
        background-size: 100% 100%;
        width: 96vw;
        height:calc(96vw / 731 * 285) ;
        margin-left: auto;
        margin-right: auto;
        margin-top: 3vw;
        position: relative;
        margin-bottom: 20px;
    }


    #simulation #design .kv .product .cap{
        font-size: 10px;
        text-align: right;
        position: absolute;
        right: 0;
        top: calc(100% - 10px);
    }



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

 







     
    #simulation #design .mainimage {
        margin-left: 3vw;
        margin-right: 3vw;
        position: relative;
    }
  
    #simulation #design .mainimage a{
        display: block;
       background-image: url(img/des_main_hitarea.png);
       background-size: 100% 100%;
       width: 44vw;
       height: calc( 44vw / 411 * 153 );
       position: absolute;
       left: 19vw;
       top: 1.2vw;
    }
    #simulation #design .mainimage a .ico{
        background-image: url(img/des_main_ico.png);
        background-size: 100% 100%;
        display: block;
        position: absolute;
        right: -2vw;
        bottom: -2vw;
        width: 8vw;
        height: 8vw;
        pointer-events: none;
    }
    


    #simulation #design .box {
        margin-top: 12vw;
       border:2px #9bca5b solid;
       border-radius: 20px;
       padding: 6vw 6vw;
       box-sizing: border-box;
       margin-left: auto;
       margin-right: auto;
    }

    #simulation #design .box .image {
        border-radius: 20px;
        position: relative;
        overflow: hidden;
    }

    #simulation #design .box .tit {
        font-weight: 500;
        color: #e7390d;
        font-size: 20px;
        line-height: 1.35em;
    }
    #simulation #design .box .body {
       margin-top: 6vw;
       margin-bottom: 0;
    }
    


  

    


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

    #simulation #design #newdesign .circle2 {
        left: -30vw;
        top: 40vw;
        width: 60vw;
        height: 60vw;
    }
    #simulation #design #newdesign .circle3 {
        right: -20vw;
        top: 120vw;
        width: 50vw;
        height: 50vw;
    }

    #simulation #design #newdesign .circle4 {
        left: -30vw;
        top: 160vw;
        width: 60vw;
        height: 60vw;
    }



    #simulation #design #newdesign .circle5 {
        right: -20vw;
        top: 210vw;
        width: 50vw;
        height: 50vw;
    }

    #simulation #design #newdesign .circle6 {
        left: -30vw;
        top: 320vw;
        width: 60vw;
        height: 60vw;
    }



}