@charset "utf-8";




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

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



 


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


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

  

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

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

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

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


 
    

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

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

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


     

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

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

     #simulation2 #function .sec h4 {
        margin-top: 30px;
        font-size: 24px;
        font-weight: 500;
        line-height: 1.5em;
        text-align: center;
     }

     #simulation2 #function .sec .caps {
      /* width: 800px; */
      margin-left: auto;
      margin-right: auto;
        margin-top: 40px;
     }

     #simulation2 #function .sec .caps ul li {
        text-indent: -1em;
        margin-left: 1em;
        font-size: 12px;
        margin-bottom: 0.5em;
     }

     #simulation2 #function .sec .caps dl {
        display: flex;
        font-size: 12px;
        flex:1;
     }
     #simulation2 #function .sec .caps dd {
        flex:1;
        font-size: 12px;
     }

     #simulation2 #function .sec .caps > dl {
        margin-bottom: 0.5em;
     }

     
     

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

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


    

  

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



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

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

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





    #simulation2 #function #p1_1_sec .mainimage {
      width: 520px;
   }

 
     #simulation2 #function #p2_1_sec .mainimage {
        width: calc(1512px / 2);
     }
     
 
     #simulation2 #function #p2_2_sec .mainimage {
      width: calc(1628px / 2);
   }



   /* #simulation2 #function #p2_2_sec .caps2 ul li {
      font-size: 18px;
      font-weight: bold;
   } */

 
   #simulation2 #function #p2_4_sec .mainimage {
      width: calc(1346px / 2);
   }

   #simulation2 #function #p2_5_sec .mainimage {
      width:350px;
   }



   
  
      


}



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

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

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

}























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



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

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

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

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

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










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

     #simulation2 #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;
     }
 
     #simulation2 #function .kv #product1 .changebtn a {
        background-image: url(img/func_kv_change_1_sp.png);
     }
     #simulation2 #function .kv #product2 .changebtn a {
        background-image: url(img/func_kv_change_2_sp.png);
     }

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



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





     
    #simulation2 #function .mainimage {
        margin-left: 6vw;
        margin-right: 6vw;
        position: relative;
        margin-top: 6vw;
    }
    
    
    #simulation2 #function .sec h4 {
        margin-top: 6vw;
        font-size: 19px;
        font-weight: 500;
        line-height: 1.5em;
        text-align: center;
     }
 
     #simulation2 #function .sec .caps {
        margin-top: 6vw;
     }

     #simulation2 #function .sec .caps ul li {
        text-indent: -1em;
        margin-left: 1em;
        font-size: 10px;
        margin-bottom: 0.5em;
     }

     #simulation2 #function .sec .caps dl {
        display: flex;
        flex:1;
     }
     #simulation2 #function .sec .caps dt {
        font-size: 10px;
     }
     #simulation2 #function .sec .caps dd {
        font-size: 10px;
        flex:1;
     }

     #simulation2 #function .sec .caps > dl {
        margin-bottom: 0.5em;
     }




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

    #simulation2 #function .box .image {
        position: relative;
        margin-top: 6vw;
    }

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


  


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

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

     /* #simulation2 #function #p2_2_sec .caps2 ul li {
      font-size: 12px;
      font-weight: bold;
   } */
   #simulation2 #function #p2_5_sec .mainimage {
      width: 80%;
      margin-left: auto;
      margin-right: auto;
   }



   



}