@charset "utf-8";




#simulation #function .product {
   display: none;
}
#simulation #function .product.open {
    display: block;
 }
 
 #simulation #function .sec{
    display: none;
 }
 #simulation #function .sec.open{
    display: block;
 }
 

 #simulation #function .sec .hd .en span{
    font-size: 150%;
    display: inline-block;
    margin-left: 0.25em;
 }
 
 #simulation #function .sec .hd h3 span{
    font-size: 65%;
    display: inline-block;
    margin-left: 0.25em;
 }
 



 


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


    #simulation #function .kv {
        height: 630px;
    }

  

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

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

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

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


 
    

    #simulation #function .kv .product .imagearea {
        position: relative;
    }

    #simulation #function .kv .product .cap{
        font-size: 12px;
        position: absolute;
        left: calc(100% + 20px);
        bottom: 30px;
        white-space: nowrap;
        margin-bottom: 0;
    }
  
    
    #simulation #function .kv .pbtn {
        text-indent: -9999px;
        position: absolute;
        display: block;
        background-size: 100% 100%;
     }

     #simulation #function .kv .changebtn a {
        text-indent: -9999px;
        display: block;
        background-size: 100% 100%;
        width: 279px;
        height: 64px;
        margin-left: auto;
        margin-right: auto;
     }
 
     #simulation #function .kv #product1 .changebtn a {
        background-image: url(img/func_kv_change_1.png);
     }
     #simulation #function .kv #product2 .changebtn a {
        background-image: url(img/func_kv_change_2.png);
     }
 





     #simulation #function .kv #product1 .imagearea {
        width: 311px;
        margin-left: auto;
        margin-right: auto;
    }

    #simulation #function .kv #product1 .image {
        background-image: url(img/func_kv_product_1.png);
        width: 311px;
        height: 310px;
    }

    #simulation #function .kv #product1 #p1_1 {
        background-image: url(img/func_kv_product_1_1.png);
        width: 203px;
        height: 60px;
        left: -15px;
        top: 185px;
     }
 


     #simulation #function .kv #product2{
         margin-top: 20px;
     }
     #simulation #function .kv #product2 .imagearea {
        width: 507px;
        margin-left: auto;
        margin-right: auto;
    }

    #simulation #function .kv #product2 .image {
        background-image: url(img/func_kv_product_2.png);
        width: 507px;
        height: 277px;
    }

    #simulation #function .kv #product2 #p2_1 {
        background-image: url(img/func_kv_product_2_1.png);
        width: 167px;
        height: 54px;
        left: 62px;
        top: -8px;
     }
     #simulation #function .kv #product2 #p2_2 {
        background-image: url(img/func_kv_product_2_2.png);
        width: 174px;
        height: 54px;
        left: 258px;
        top: -8px;
     } 
     #simulation #function .kv #product2 #p2_3 {
        background-image: url(img/func_kv_product_2_3.png);
        width: 142px;
        height: 58px;
        left: -52px;
        top: 125px;
     }

     #simulation #function .kv #product2 #p2_4 {
        background-image: url(img/func_kv_product_2_4.png);
        width: 143px;
        height: 82px;
        left: 275px;
        top: 68px;
     }
 


     #simulation #function .sec{
         margin-bottom: 50px;
     }

     #simulation #function .sec .mainimage {
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
     }
     
     

     #simulation #function .sec h4 {
        margin-top: 30px;
        font-size: 24px;
        font-weight: 500;
        line-height: 1.5em;
        text-align: center;
     }
     
     #simulation #function .sec .cap {
        margin-top: 80px;
        font-size: 12px;
        line-height: 2em;
        text-indent: -1em;
        margin-left: 1em;
        width: 520px;
        margin-left: auto;
        margin-right: auto;
     }
     

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

    #simulation #function .box .image {
        position: relative;
        overflow: hidden;
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
    }

    #simulation #function .box .tit {
        font-weight: 500;
        text-align: center;
        font-size: 26px;
        line-height: 1.35em;
    }
    #simulation #function .box .body {
        margin-top: 30px;
        margin-bottom: 0;
     }
    
     



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

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

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






    #simulation #function #p1_1_sec .mainimage {
        width: 520px;
     }
     
 
     #simulation #function #p2_1_sec .mainimage {
        width: 340px;
     }
     
     #simulation #function #p2_2_sec .box {
        margin-top: 30px;
        border:4px #866032 solid;
        padding: 40px;
     }
     #simulation #function #p2_2_sec .box .image {
        margin-top: 0;
     }
     
     #simulation #function #p2_2_sec .mainimage {
        width: 350px;
     }

     

     #simulation #function #p2_3_sec .mainimage {
        width: 350px;
     }
     #simulation #function #p2_4_sec .mainimage {
        width: 640px;
     }
     

     #simulation #function .linkbtn.unit{
        background-image: url(img/func_2_1_btn.png);
    }
    #simulation #function .linkbtn.haikan{
        background-image: url(img/func_2_4_btn.png);
    }


}



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

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

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

}























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



    #simulation #function .kv {
        padding-top: 6vw;
        padding-bottom: 6vw;
    }

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

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

    #simulation #function .kv h2 {
        margin-top: 6vw;
        display: block;
        background-image: url(img/func_kv_title_sp.png);
        background-size: 100% 100%;
        width: 60vw;
        height: calc(60vw / 504 * 138 );
        text-indent: -9999px;
        margin-left: auto;
        margin-right: auto;
    }

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










    #simulation #function .kv .product .imagearea {
        position: relative;
    }
    #simulation #function .kv .product .cap{
        font-size: 10px;
        text-align: right;
        /* margin-top: 10px; */
        margin-bottom: 20px;
    }
    
  
    
    #simulation #function .kv .pbtn {
        text-indent: -9999px;
        position: absolute;
        display: block;
        background-size: 100% 100%;
     }

     #simulation #function .kv .changebtn a {
        text-indent: -9999px;
        display: block;
        background-size: 100% 100%;
        width: 60vw;
        height: calc( 60vw / 458 * 96 );
        margin-left: auto;
        margin-right: auto;
        margin-top: 2vw;
     }
 
     #simulation #function .kv #product1 .changebtn a {
        background-image: url(img/func_kv_change_1_sp.png);
     }
     #simulation #function .kv #product2 .changebtn a {
        background-image: url(img/func_kv_change_2_sp.png);
     }

    
     #simulation #function .kv .product .image {
        background-size: 100% 100%;
    }



     #simulation #function .kv #product1{
         margin-top: 6vw;
     }
     #simulation #function .kv #product1 .imagearea {
        width: 82vw;
        margin-left: auto;
        margin-right: auto;
    }

    #simulation #function .kv #product1 .image {
        background-image: url(img/func_kv_product_1.png);
        background-size: 100% 100%;
        width: 82vw;
        height: calc(82vw / 311 * 310 );
    }

    #simulation #function .kv #product1 #p1_1 {
        background-image: url(img/func_kv_product_1_1_sp.png);
        width: 56vw;
        height: calc(56vw / 419 * 110);
        left: -6vw;
        top: 50vw;
     }
 


     #simulation #function .kv #product2{
         margin-top: 18vw;
     }
     #simulation #function .kv #product2 .imagearea {
        width: 96vw;
        margin-left: auto;
        margin-right: auto;
    }

    #simulation #function .kv #product2 .image {
        background-image: url(img/func_kv_product_2_sp.png);
        width: 96vw;
        height: calc(96vw / 731 * 390);
    }

    #simulation #function .kv #product2 #p2_1 {
        background-image: url(img/func_kv_product_2_1_sp.png);
        width: 36vw;
        height: calc(36vw / 287 * 142);
        left: 7vw;
        top: -12vw;
     }
     #simulation #function .kv #product2 #p2_2 {
        background-image: url(img/func_kv_product_2_2_sp.png);
        width: 40vw;
        height: calc(40vw / 321 * 142);
        right: 7vw;
        top: -12vw;
     } 
     #simulation #function .kv #product2 #p2_3 {
        background-image: url(img/func_kv_product_2_3_sp.png);
        width: 35vw;
        height: calc(35vw / 289 * 137);
        left: 7vw;
        bottom: 16vw;
     }

     #simulation #function .kv #product2 #p2_4 {
        background-image: url(img/func_kv_product_2_4_sp.png);
        width: 35vw;
        height: calc(35vw / 290 * 149 );
        right: 8vw;
        bottom: 21vw;
     }
 






    
    
 
     #simulation #function .docs {
         padding-top: 0;
         padding-bottom: 12vw;
     }





     
    #simulation #function .mainimage {
        margin-left: 6vw;
        margin-right: 6vw;
        position: relative;
        margin-top: 6vw;
    }
    
    
    #simulation #function .sec h4 {
        margin-top: 6vw;
        font-size: 19px;
        font-weight: 500;
        line-height: 1.5em;
        text-align: center;
     }
     
     #simulation #function .sec .cap {
        margin-top: 9vw;
        font-size: 10px;
        line-height: 2em;
        text-indent: -1em;
        margin-left: 1em;
     }



    #simulation #function .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 #function .box .image {
        position: relative;
        margin-top: 6vw;
    }

    #simulation #function .box .tit {
        font-weight: 500;
        font-size: 20px;
        line-height: 1.35em;
        text-align: center;
    }
    #simulation #function .box .body {
       margin-top: 6vw;
       margin-bottom: 0;
    }
    


  


    #simulation #function .sec .circle1 {
        right: -20vw;
         top: -20vw;
         width: 50vw;
         height: 50vw;
     }
 
     #simulation #function .sec .circle2 {
         left: -30vw;
         top: 40vw;
         width: 60vw;
         height: 60vw;
     }
     #simulation #function .sec .circle3 {
         right: -20vw;
         top: 120vw;
         width: 50vw;
         height: 50vw;
     }
 
     #simulation #function .sec .circle4 {
         left: -30vw;
         top: 160vw;
         width: 60vw;
         height: 60vw;
     }
 
    
    

     #simulation #function #p1_1_sec .box .image {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
     }

     #simulation #function #p2_1_sec .mainimage {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
     }


     #simulation #function #p2_2_sec .box {
        margin-top: 6vw;
        border:2px #866032 solid;
        padding: 6vw;
     }
     #simulation #function #p2_2_sec .box .image {
        margin-top: 0;
     }
     #simulation #function #p2_2_sec .mainimage {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
     }


     #simulation #function #p2_3_sec .mainimage {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
     }
     #simulation #function #p2_4_sec .mainimage {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
     }
     #simulation #function #p2_4_sec .cap {
        text-align: center;
     }


     #simulation #function .linkbtn.unit{
        background-image: url(img/func_2_1_btn_sp.png);
    }
    #simulation #function .linkbtn.haikan{
        background-image: url(img/func_2_4_btn_sp.png);
    }



}