@charset "utf-8";


#simulation{
    position: relative;
    overflow: hidden;
    /* font-family: 'M PLUS Rounded 1c', sans-serif; */
    font-family:'TBUDゴシック R' , 'TBUDGothic R', sans-serif;
    color: #4e4e4e;
    font-size: 16px;
}

#simulation img{
    width: 100%;
}
footer{
    position: relative;

}
.pagetop{
    position: relative;
}

#simulation .red{
    color: #e7390d;
 }

 #simulation .bold{
    font-weight:500;
  }

  #simulation .big{
    font-size: 140%;
  }

  #simulation .page {
    display: none;
}

#simulation .page.open {
    display: block;
}


#simulation #rem_menu ul li a.disable{
    display: none;
}


#simulation #popup{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    visibility: hidden;
    opacity:0;
    pointer-events: none;
    transition-duration: 400ms;
    transition-property:visibility,opacity ;
    overflow: auto;
}


#simulation #popup .back{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.2);
    pointer-events: all;
}


html.openPopup #simulation #popup{
    opacity:1;
    visibility: inherit;
}

#simulation #popup .outer{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
html.openPopup{
    overflow: hidden;
}



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

    .contents{
        margin: 0 0 0 0;
    }
    #simulation{
        margin-bottom: -36px;
    }

    #simulation .sp{
        display: none !important;
    }


    #simulation #rem_menu{
        background-color: #ee7455;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 150px;
        z-index: 1;
    }

    #simulation #rem_menu ul{
        display: flex;
        padding-top: 30px;
        padding-bottom: 30px;
        justify-content: center;
        align-items: center;
    }
    #simulation #rem_menu ul li a{
        display: block;
        width: 162px;
        height: 89px;
        text-indent: -9999px;
        margin-left: 20px;
        margin-right: 20px;
    }
    #simulation #rem_menu ul li a.top{
        background-image: url(img/mn_0.png);
     }
     #simulation #rem_menu ul li a.sound{
        background-image: url(img/mn_1.png);
     }
     #simulation #rem_menu ul li a.design{
        background-image: url(img/mn_2.png);
     }
     #simulation #rem_menu ul li a.function{
        background-image: url(img/mn_3.png);
     }


     #simulation.top #rem_menu{
        top: 620px;
    }
    #simulation.sound #rem_menu{
        top: 520px;
    }
    #simulation.design #rem_menu{
        top: 560px;
    }
    #simulation.function #rem_menu{
        top: 630px;
    }



     #simulation .page {

     }
     #simulation .page .kv{
         position: relative;
         z-index: 1;
    }

    #simulation .page .kv .inner{
        position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
   }
   #simulation .page .kv .buttons{
    display: flex;
    justify-content: center;
    align-items: center;
}


    
    #simulation .page .kv .back{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
    }


    #simulation .page .kv .kv_btn a{
        background-image: url(../simulation/img/kv_btn.png);
        width: 279px;
        height: 64px;
        background-size: 100% 100%;
        display: block;
        text-indent: -9999px;
        overflow: hidden;
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }


 
    


    #simulation .page .docs{
        margin-top: 150px;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    #simulation .page .docs .sec{
        width: 680px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        margin-bottom: 100px;
     }

     #simulation .page .docs .sec:last-child{
        margin-bottom: 0px;
     }

     #simulation .page .docs .sec .inner{
        position: relative;
     }

     #simulation .page .docs .sec .circle{
        position: absolute;
        background-image: url(img/circle.png);
        background-size: 100% 100%;
        z-index: -1;
     }

    #simulation .page .docs .sec .hd{
        background-image: url(img/line.png);
        background-size: 680px 13px;
        background-repeat: no-repeat;
        background-position: center bottom;
        padding-bottom: 40px;
    }

    #simulation .page .docs .sec .icon{
        background-image: url(img/icon.png);
        background-size: 100% 100%;
        width: 15px;
        height: 40px;
        margin-left: auto;
        margin-right: auto;
    }


    #simulation .page .docs .sec .en{
      text-align: center;
       margin-top: 20px;
       color: #7f7f7f;
       font-size: 20px;
       line-height: 1em;
       font-weight: 500;
    }


    #simulation .page .docs .sec h3{
        text-align: center;
        margin-top: 20px;
        font-size: 26px;
        line-height: 1em;
        font-weight: 500;
    }


    #simulation .page .docs .sec .body{
        margin-top: 40px;
        text-align: center;
    }
    #simulation .page .docs .sec .body p{
        line-height: 2.4em;
        margin-bottom: 20px;
    }

   
    
     

    

    #simulation .links{
        text-align: center;
        padding-bottom: 50px;
        position: relative;
    }
    #simulation .links ul li{
        margin-bottom: 30px;
    }
    #simulation .linkbtn{
        text-indent: -9999px;
        width: 378px;
        height: 76px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    #simulation .linkbtn.products{
        background-image: url(img/link_1.png);
    }
    #simulation .linkbtn.torikae{
        background-image: url(img/link_2.png);
    }


    #simulation #popup .inner{
        width: 600px;
        background-color: #fff;
        border-radius: 40px;
        box-sizing: border-box;
    }
    #simulation #popup .inner > div{
        padding: 40px;
    }
    #simulation #popup .tit{
        font-size: 26px;
        font-weight: 500;
        text-align: center;
        line-height: 1.35em;
    }

    #simulation #popup .image{
        width: 369px;
        overflow: hidden;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        border-radius: 40px;
    }


    #simulation #popup .body{
        text-align: center;
        margin-top: 20px;
        font-size: 16px;
        line-height: 2em;
     }
     #simulation #popup .linkbtn{
        margin-top: 20px;
        pointer-events: all;
        background-image: url(img/des_btn.png);
        width: 378px;
        height: 76px;
     }
    

     #simulation #popup .close a{
        display: block;
        background-image: url(img/modal_close.png);
        background-size: 100% 100%;
        width:75px ;
        height: 75px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        text-indent: -9999px;
        overflow: hidden;
        pointer-events: all;
     }
    


}

















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

    .topic-path {
        margin:0px 0px 0px 0px;
    }

    .contents{
        /* margin: 0 0 0 0; */
        margin-top: 0;
    }
    #simulation{
        font-size: 13px;
        margin-bottom: -42px;
    }
    
    
    #simulation .pc{
        display: none!important;
    }
  
    



    #simulation #rem_menu{
        position: fixed;
        background-color: #ee7455;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 10;
    }

    #simulation #rem_menu ul{
        display: flex;
        padding-top: 3vw;
        padding-bottom: 3vw;
        justify-content: center;
        align-items: center;
    }
    #simulation #rem_menu ul li a{
        display: block;
        width: 26vw;
        height: calc(26vw / 206 * 132);
        text-indent: -9999px;
        margin-left: 2vw;
        margin-right: 2vw;
        background-size: 100% 100%;
    }
    #simulation #rem_menu ul li a.top{
        background-image: url(img/mn_0_sp.png);
     }
     #simulation #rem_menu ul li a.sound{
        background-image: url(img/mn_1_sp.png);
     }
     #simulation #rem_menu ul li a.design{
        background-image: url(img/mn_2_sp.png);
     }
     #simulation #rem_menu ul li a.function{
        background-image: url(img/mn_3_sp.png);
     }

  
     






     #simulation .page {

    }
  
    #simulation .page .kv{
        position: relative;
        z-index: 1;
   }

   #simulation .page .kv .inner{
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       position: relative;
  }


  #simulation .page .kv .kv_btn a{
    background-image: url(../simulation/img/kv_btn_sp.png);
    width: 72vw;
    height: calc(72vw / 570 * 80);
    background-size: 100% 100%;
    display: block;
    text-indent: -9999px;
    overflow: hidden;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
   
#simulation .page#function .kv .kv_btn a{
    background-image: url(../simulation/img/kv_btn_sp2.png);
    width: 60vw;
    height: calc(60vw / 458 * 96);
    background-size: 100% 100%;
    display: block;
    text-indent: -9999px;
    overflow: hidden;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}


   #simulation .page .kv .back{
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       background-size: cover;
       background-position: center center;


-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 95%,rgba(0,0,0,0) );
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 95%,rgba(0,0,0,0) );

   }






  


   #simulation .page .docs{
       padding-top: 6vw;
       padding-bottom: 12vw;
   }

   #simulation .page .docs .sec{
       margin-left: 6vw;
       margin-right: 6vw;
       position: relative;
       margin-bottom: 12vw;
    }
    #simulation .page .docs .sec:last-child{
        margin-bottom: 0;
    }

    #simulation .page .docs .sec .inner{
       position: relative;
    }

    #simulation .page .docs .sec .circle{
       position: absolute;
       background-image: url(img/circle.png);
       background-size: 100% 100%;
       z-index: -1;
    }

   #simulation .page .docs .sec .hd{
       background-image: url(img/line_sp.png);
       background-size: 88vw calc(88vw / 690 * 20 );
       background-repeat: no-repeat;
       background-position: center bottom;
       padding-bottom: 40px;
   }

   #simulation .page .docs .sec .icon{
       background-image: url(img/icon.png);
       background-size: 100% 100%;
       width: calc(15px * 0.75);
       height:calc( 40px * 0.75);
       margin-left: auto;
       margin-right: auto;
   }


   #simulation .page .docs .sec .en{
     text-align: center;
      margin-top: 3vw;
      color: #7f7f7f;
      font-size: 12px;
      line-height: 1em;
      font-weight: 500;
   }


   #simulation .page .docs .sec h3{
       text-align: center;
       margin-top: 3vw;
       font-size: 23px;
       line-height: 1.25em;
       font-weight: 500;
   }


   #simulation .page .docs .sec .body{
       margin-top: 6vw;
       text-align: center;
   }
   #simulation .page .docs .sec .body p{
       line-height: 2.4em;
       margin-bottom: 3vw;
   }

  
   


   #simulation .links{
    text-align: center;
    padding-bottom: 12vw;
}
    #simulation .links ul li{
        margin-bottom: 6vw;
    }

    #simulation .linkbtn{
        text-indent: -9999px;
        width: 72vw;
        height: calc(72vw / 578 * 116);
        display: block;
        margin-left: auto;
        margin-right: auto;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    #simulation .linkbtn.products{
        background-image: url(img/link_1_sp.png);
    }
    #simulation .linkbtn.torikae{
        background-image: url(img/link_2_sp.png);
    }




    #simulation #popup .inner{
        width: calc(100vw - 12vw);
        background-color: #fff;
        border-radius: 20px;
        box-sizing: border-box;
    }
    #simulation #popup .inner > div{
        padding: 6vw;
    }
    #simulation #popup .tit{
        font-size: 17px;
        font-weight: 500;
        text-align: center;
        line-height: 1.35em;
    }

    #simulation #popup .image{
        width: 72vw;
        overflow: hidden;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-top: 6vw;
        border-radius: 20px;
    }


    #simulation #popup .body{
        text-align: center;
        margin-top: 6vw;
        font-size: 14px;
        line-height: 2em;
     }
     #simulation #popup .linkbtn{
        margin-top: 6vw;
        width: 64vw;
        pointer-events: all;
        background-image: url(img/des_btn_sp.png);
        height: calc(64vw / 486 * 116 );
     }
    

     #simulation #popup .close a{
        display: block;
        background-image: url(img/modal_close_sp.png);
        background-size: 100% 100%;
        width:16vw ;
        height: 16vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 6vw;
        text-indent: -9999px;
        overflow: hidden;
        pointer-events: all;
     }
   
     

     



}