@charset "utf-8";



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


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

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


    #simulation2 #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;
    }

    #simulation2 #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;
    }

    #simulation2 #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;
    }

    #simulation2 #design .kv .product {
        width: 828px;
        height: 320px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        background-image: url(img/des_kv_product.png);
        position: relative;
    }
    #simulation2 #design .kv .product .cap{
        font-size: 12px;
        position: absolute;
        /* right: 20px;
        top: calc(100% - 20px); */
        left: calc(100%);
        bottom: 30px;
        white-space: nowrap;
    }



    #simulation2 #design .kv .lead {
        font-size: 20px;
        text-align: center;
        margin-top: 10px;
        line-height: 2em;
    }
  
 
    
  
    
    #simulation2 #design .mainimage {
        width: 498px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }
  
    

    #simulation2 #design .mainimage a{
        display: block;
       /* background-image: url(img/des_main_hitarea.png);
       background-size: 100% 100%; */
       width: 420px;
       height: 260px;
       position: absolute;
       left: 35px;
       top: 50px;
    }
    #simulation2 #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;
        display: none;
    }
    


    #simulation2 #design .box {
        margin-top: 60px;
       border:4px #9bca5b solid;
       border-radius: 40px;
       padding: 40px 0px;
       width: 700px;
       box-sizing: border-box;
       margin-left: auto;
       margin-right: auto;
    }
    #simulation2 #design .box .tit {
        font-weight: 500;
        color: #e7390d;
        font-size: 26px;
        line-height: 1.35em;
    }
    #simulation2 #design .box .body {
        font-size: 16px;
       margin-top: 30px;
       margin-bottom: 0;
    }

    #simulation2 #design .box.box1{
        padding-left: 50px;
        padding-right: 50px;
    }
    #simulation2 #design .box.box1 .images {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    #simulation2 #design .box.box1 .images .image {
        width: 274px;
        margin-bottom: 30px;
     }
 
    
     #simulation2 #design .box.box1 .images .image .cap {
        font-size: 20px;
        border: 1px solid #333333;
    width: 100px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
        border-radius: 100px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
     }
 
     


  
     #simulation2 #design .box.box2{
       padding-left: 20px;
       padding-right: 20px;
     }
     #simulation2 #design .box.box2 .image{
        width: 471px;
        margin-left: auto;
        margin-right: auto;
     }

     #simulation2 #design .box.box2 .column{
        background-color: #f4f4f4;
        padding: 20px;
        border-radius: 30px;
        text-align: left;
        margin-top: 40px;
     }

     #simulation2 #design .box.box2 .column .ctit{
        font-size: 26px;
        font-weight: bold;
        text-align: center;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
     }
     #simulation2 #design .box.box2 .column .cbody{
        font-size: 16px;
     }
     #simulation2 #design .box.box2 .column .prof{
        border-top: 1px dotted #666666;
        padding-top: 30px;
        margin-top: 30px;
        display: flex;
        
     }


     #simulation2 #design .box.box2 .column .prof .text{
        flex:1;
        font-size: 16px;
      }
      #simulation2 #design .box.box2 .column .prof .cimage{
        width: 148px;
        margin-left: 30px;
      }



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

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

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



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

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



}

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

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

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

}

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




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

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

    #simulation2 #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%;
    }

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

    #simulation2 #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;
    }



    #simulation2 #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;
    }


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


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

 


    





     
    #simulation2 #design .mainimage {
        margin-left: 3vw;
        margin-right: 3vw;
        position: relative;
    }
  
    #simulation2 #design .mainimage a{
        display: block;
       /* background-image: url(img/des_main_hitarea.png);
       background-size: 100% 100%; */
       width: 70vw;
       height: 46vw;
       position: absolute;
       left: 6vw;
       top: 6vw;
       /* background-color: rgba(255,0,0,0.5); */
    }
    #simulation2 #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;
        display: none;
    }
    


    #simulation2 #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;
    }

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

    #simulation2 #design .box.box1{
        padding-left: 3vw;
        padding-right: 3vw;
    }
    #simulation2 #design .box.box1 .images {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    #simulation2 #design .box.box1 .images .image {
        width: calc(50% - 2vw);
        margin-bottom: 3vw;
     }
 
    
     #simulation2 #design .box.box1 .images .image .cap {
        font-size: 12px;
        border: 1px solid #333333;
    width: 6em;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
        border-radius: 100px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2vw;
     }
 
     



    #simulation2 #design .box.box2{
        padding-left: 6vw;
        padding-right: 6vw;
      }
      #simulation2 #design .box.box2 .image{
      
      }
 
      #simulation2 #design .box.box2 .column{
         background-color: #f4f4f4;
         padding: 3vw;
         border-radius: 15px;
         text-align: left;
         margin-top: 3vw;
      }
 
      #simulation2 #design .box.box2 .column .ctit{
         font-size:18px;
         font-weight: bold;
         text-align: center;
         width: fit-content;
         margin-left: auto;
         margin-right: auto;
      }
      #simulation2 #design .box.box2 .column .cbody{
         font-size: 12px;
      }
      #simulation2 #design .box.box2 .column .prof{
         border-top: 1px dotted #666666;
         padding-top: 3vw;
         margin-top: 3vw;
         display: flex;
         
      }
 
 
      #simulation2 #design .box.box2 .column .prof .text{
         flex:1;
         font-size: 12px;
       }
       #simulation2 #design .box.box2 .column .prof .cimage{
         width: 20vw;
         margin-left: 3vw;
       }
 

       


    


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

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

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



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

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



}