@charset "utf-8";
/* サイト全体のサイズ指定 */

.Wafer_Handling_Lab{position: relative;}
/* 画面サイズ指定 */


 .Wafer_Handling_Lab{height:960px;}  

@media screen and (max-width:500px){
  .Wafer_Handling_Lab{height:600px;} 
}

@media screen and (min-width:501px) and (max-width:999px){
  .Wafer_Handling_Lab{height:768px;} 
}

@media screen and (min-width:1000px) and (max-width:1365px){
  .Wafer_Handling_Lab{height:600px;} 
}

@media screen and (min-width:1366px) and (max-width:1535px){
  .Wafer_Handling_Lab{height:648px;} 
}



@media screen and (min-width:1536px) and (max-width:1599px){
  .Wafer_Handling_Lab{height:744px;} 
}

 





.content-inner{max-width: 1150px;margin: 0 auto;padding-top: 250px;}





@media screen and (min-width:501px) and (max-width:999px){
  .content-inner{padding-top:350px;}
}
@media screen and (min-width:1200px) and (max-width:1600px){
  .content-inner{max-width: 1000px;}
}


@media screen and (min-width:1000px) and (max-width:1199px){
  .content-inner{max-width: 900px;}
}




@media screen and (min-width:1000px) and (max-width:1365px){
  .content-inner{padding-top:140px;}
}


@media screen and (min-width:1366px) and (max-width:1535px){
  .content-inner{padding-top:166px;}
}


@media screen and (min-width:1536px) and (max-width:1599px){
  .content-inner{padding-top:210px;}
}


/* graphic */
.graphic{
 
  position: absolute;
  top: 0;
  left: 0;

  }

  @media screen and (max-width:999px){
    .graphic{
 
   display: none;
    
      }


      .graphic_sp{position: absolute;top:0px;left: 0px;}

      .graphic_sp2{position: absolute;bottom:0px;right: 0px;}



  }

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





    .graphic_sp img{height: 200px;}


    


    .graphic_sp2 img{height: 200px;}









}

  @media screen and (min-width:501px) and (max-width:999px){
  





      .graphic_sp img{height: 300px;}


      


      .graphic_sp2 img{height: 300px;}









  }



@media screen and (min-width:1000px) and (max-width:1365px){
  .graphic img{height: 600px;}
}

@media screen and (min-width:1366px) and (max-width:1535px){
  .graphic img{height: 648px;}
}

@media screen and (min-width:1536px) and (max-width:1599px){
  .graphic img{height: 744px;}
}

@media screen and (min-width:1600px) {
  .graphic img{height: 960px;}
}


@media screen and (min-width:1000px) {
  .graphic_sp{display: none;}
  .graphic_sp2{display: none;}
}


  /* video */
  /* .video{ 
    width: 100%;
  
    background: url(../img/graphic-alternative.jpg) no-repeat center/cover;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: -1;

  }*/

    .video{ 
    width: 100%;
  
    background: url(../img/main_pc.jpg) no-repeat center/cover;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: -1;

  }
  
  .video::after{
    content: '';
    width: 100%;
    height: 100%;
    background-color: #0F0F0F;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.72;
}
  
  
  .video video{
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  


  @media screen and (max-width:500px){
    .video{height:600px;} 
  }

  @media screen and (min-width:500px) and (max-width:999px){
    .video{
     
      height: 768px;
    
  
    }

    .video::after{
     
      height: 768px;
 
  }
  }

  @media screen and (min-width:1000px) and (max-width:1365px){
    .video{
     
      height: 600px;
    
  
    }

    .video::after{
     
      height: 600px;
 
  }
  }

  @media screen and (min-width:1366px) and (max-width:1535px){
    .video{
     
      height: 648px;
    
  
    }

    .video::after{
     
      height: 848px;
 
  }
  }



  @media screen and (min-width:1536px) and (max-width:1599px){
    .video{
     
      height:744px;
    
  
    }

    .video::after{
     
      height: 744px;
 
  }
  }




  @media screen and (min-width:1600px){
    .video{
     
      height: 960px;
    
  
    }

    .video::after{
     
      height: 960px;
 
  }
  }




















/* サイト全体のフォント指定 */
body {
    font-family: 'Noto Sans JP',Arial, Helvetica, sans-serif; 
   /* color:white; */
    }

    li{list-style: none;}
.text_head{color: white;}



@media screen and (min-width:1000px) {
  .text_head_sp{display: none;}
}

@media screen and (max-width:500px) {
  .text_head_sp{display: none;}
}
.wafer{letter-spacing: 0.1em;padding-right: 15px;}
.handling{letter-spacing: 0.1em;padding-right: 15px;}
.text_head h1{font-size: 44px; font-weight: 900;text-align: center;padding-bottom: 30px;}
@media screen and (max-width:500px) {
  .text_head h1{font-size: 23px;padding-bottom: 15px;}
}



@media screen and (min-width:501px) and ( max-width:620px) {
  .text_head h1{font-size: 34px;}
}


@media screen and (min-width:501px) and ( max-width:999px) {
  .text_head h1{font-size: 36px;padding-bottom: 15px;}
}

@media screen and (min-width:1000px) and ( max-width:1599px) {
  .text_head h1{font-size: 30px;padding-bottom: 15px;}
}


.text_head p{font-size: 18px;text-align: center;padding-bottom: 60px;letter-spacing: 0.2em;}


@media screen and (max-width:500px) {
  .text_head p{font-size: 13px;padding: 0 12px;}
}



@media screen and (min-width:501px) and ( max-width:1599px) {
  .text_head p{font-size: 14px;}
}

@media screen and  ( max-width:999px) {
  .text_head p{padding-bottom: 32px;line-height: 1.8;}

}
@media screen and (min-width:501px) and ( max-width:1400px) {
  .text_head p{padding-bottom: 28px;}

}

@media screen and (min-width:1401px) and ( max-width:1600px) {
  .text_head p{font-size: 14px;padding-bottom: 44px;}

}

.search_content-inner h2{font-size: 28px;font-weight:500 ;text-align: center;padding-bottom: 60px;color: white;}
.search_content-inner_sp h2{font-weight: 500;}


@media screen and (min-width:1000px){

  .search_content-inner_sp{display: none;}
  
}
@media screen and (max-width:999px){
  .search_content-inner_sp{background-color:#888380 ;}
  
}


@media screen and (max-width:999px) {
  .search_content-inner_sp{background-color:#888380;padding:30px 0 30px 0 ;}
  }












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

  .search_content-inner{display: none;}
  
}
/* .search_content-inner h2:before{ content: url('../img/.svg'); } */
@media screen and (min-width:768px) and ( max-width:1599px) {
  .search_content-inner h2{padding-bottom: 28px;font-size: 20px;}

}

.serch_ttl{display: flex;justify-content: center;}




@media screen and ( max-width:999px) {
  .serch_ttl{padding-bottom: 20px;}
  }











.serch_img{padding-right: 10px;}
.serch_img img{width: 28px;} 
@media screen and (max-width:500px) {
  .serch_img img{width: 16px;}

}
@media screen and (min-width:501px) and ( max-width:1599px) {
  .serch_img img{width: 24px;}

}


@media screen and ( max-width:999px) {
  .wafer_group{display: flex;
    flex-wrap: wrap;

   
}}


@media screen and (max-width: 500px){
.wafer_group {
 
    width: 310px;
    margin: 0 auto;
}
}


@media screen and (min-width:821px) and ( max-width:999px) {
  .wafer_group{display: flex;
    flex-wrap: wrap;
 width: 800px;
 margin:0 auto;
   
}}


@media screen and (min-width:501px) and ( max-width:620px) {
  .wafer_group{
    display: flex;
    flex-wrap: wrap;
    width: 480px;
    margin:0 auto;


}}

@media screen and (min-width:621px) and ( max-width:820px) {
  .wafer_group{
   
   width: 600px;
    margin:0 auto;


}}




.wafer_group_ttl{font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: white;}



  @media screen and (max-width:500px) {
    .wafer_group_ttl{font-size: 14px;
   ;}}









  .photo_mask_group_ttl{

    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: white;

  }


  @media screen and (max-width:500px) {
  
    .photo_mask_group_ttl{

      font-size: 14px;
   
    }
  
  }











  .environment_group_ttl{

    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: white;

  }




  @media screen and (max-width:500px) {
 
    .environment_group_ttl {font-size: 14px;
  }}

  @media screen and (min-width:501px) and ( max-width:1599px) {
    .wafer_group_ttl{font-size: 18px;
      font-weight: 900;
      letter-spacing: 0.1em;
      color: white;}
    
      .photo_mask_group_ttl{
    
        font-size: 18px;
        font-weight: 900;
        letter-spacing: 0.1em;
        color: white;
    
      }
      .environment_group_ttl{
    
        font-size: 18px;
        font-weight: 900;
        letter-spacing: 0.1em;
        color: white;
    
      }
  
  }


.wafer_modal_ttl{font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: white;}




.mokuteki{letter-spacing: 0.1em;  text-decoration: none;
   border-bottom: 1px solid white;
   padding-bottom: 2px;}
   @media screen and (min-width:501px) and ( max-width:999px) {
    .wafer_group_ttl{font-size: 18px;font-weight:900;}
    .mokuteki{
   color:#ffff;
      font-size: 20px;}
  }



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

    .mokuteki{
      color: #ffff;
   
    font-size: 16px;}
  }



   @media screen and (min-width:501px) and ( max-width:1599px) {
    .wafer_group_ttl{font-size: 18px;font-weight:900;}
    .mokuteki{
   
      padding-bottom: 0.6px;}
  }



.search_content-inner p{font-size:18px ;font-weight: 500;}
@media screen and (min-width:1000px) and ( max-width:1199px) {
  .search_content-inner p{font-size:14px ;}

}

@media screen and (min-width:1200px) and ( max-width:1599px) {
  .search_content-inner p{font-size:16px ;}

}







@media screen and (min-width:501px) {
  .soroeru{display:none ;}

}











/* search_content-inner */
.wafer_group_wrapper{text-align: center;padding-bottom: 38px;}
@media screen and (max-width:500px) {
  .wafer_group_wrapper{padding-bottom: 20px;}

}
@media screen and (min-width:501px) and ( max-width:1599px) {
  .wafer_group_wrapper{padding-bottom: 10px;}

}





.photo_mask_group__wrapper{padding-right: 68px;text-align: center;}

@media screen and (min-width:768px) and ( max-width:1599px) {
  .photo_mask_group__wrapper {
    padding-right: 36.3px;
    
}
}




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

  .photo_mask_group__wrapper {
    padding-right: 0px;
    padding-bottom: 20px;
}
}


.environment_group__wrapper{text-align: center;}


.wafer_group_ttl__wrapper{background-color: #A50034;
  display: inline-block;
  padding: 10px 40px;
margin-bottom: 30px;}



@media screen and ( max-width:500px) {
  .wafer_group_ttl__wrapper{
    margin-bottom: 10px;
    padding: 10px 28px;
}

}




@media screen and (min-width:501px) and ( max-width:1599px) {
  .wafer_group_ttl__wrapper{
    margin-bottom: 16px;
    padding: 8px 40px;
}

}

@media screen and (min-width:1401px) and ( max-width:1600px) {
  .wafer_group_ttl__wrapper{ margin-bottom: 22px;}

}









.photo_mask_group_ttl__wrapper{
  background-color: #386843;
  display: inline-block;
  padding: 10px 40px;
margin-bottom: 30px;

}

@media screen and ( max-width:500px) {
  .photo_mask_group_ttl__wrapper{
    padding: 10px 28px;
    margin-bottom: 10px;
  }

}

@media screen and (min-width:501px) and ( max-width:1599px) {
  .photo_mask_group_ttl__wrapper{
    padding: 8px 36px;
  margin-bottom: 18px;
  
  }

}

@media screen and (min-width:1401px) and ( max-width:1600px) {
  .photo_mask_group_ttl__wrapper{

    margin-bottom: 22px;
    
    }}





.environment_group_ttl__wrapper{
  background-color: #007AA9;
  display: inline-block;
  padding: 10px 40px;
margin-bottom: 30px;

}

@media screen and (max-width:500px) {
  .environment_group_ttl__wrapper{

  margin-bottom: 10px;
  
  }
}

@media screen and (min-width:501px) and ( max-width:1599px) {
  .environment_group_ttl__wrapper{
    padding: 8px 36px;
  margin-bottom: 18px;
  
  }
}

@media screen and (min-width:1401px) and ( max-width:1600px) {
  .environment_group_ttl__wrapper{

    margin-bottom: 22px;
    
    }}


    .button__inner{box-shadow: 1.6px 6px 12px #818181;padding:14px 0; cursor:pointer;}

    .button__inner_1,.button__inner_2,.button__inner_3{box-shadow: 1.6px 6px 12px #818181;padding:14px 0; cursor:pointer;}{box-shadow: 1.6px 6px 12px #818181;padding:14px 0; cursor:pointer;}
    

    @media screen and (max-width:500px) {
      .button__inner{
    padding: 10px 0;
  
    }
    
    }


    @media screen and (min-width:501px) and ( max-width:1599px) {
      .button__inner,.button__inner_1,.button__inner_2,.button__inner_3{
    padding: 10px 0;
  
    }
   
    }
  

.wafer_group_1,.wafer_group_2{display: flex;text-align: center;}

.button__inner_1{display: flex ;background-color: #ffff;justify-content: center;border-radius: 0.4rem;position: relative;font-size: 18px;color:#A50034 ;width:168px;}
.button__inner_2{display: flex ;background-color: #ffff;justify-content: center;border-radius: 0.4rem;position: relative;font-size: 18px;color:#A50034 ;width:248px;}
.button__inner_3{display: flex ;background-color: #ffff;justify-content: center;border-radius: 0.4rem;position: relative;font-size: 18px;color:#A50034 ;width:190px;}
.wafer_group .button__inner{display: flex ;background-color: #ffff;justify-content: center;border-radius: 0.4rem;position: relative;font-size: 18px;color:#A50034 ;}
.wafer_group_2 .button__inner{width: 185px;}
@media screen and (min-width: 1200px) and (max-width: 1600px){
  .button__inner_1{
    width:131px;
}

.button__inner_2{
  width:246px;
}

.button__inner_3{
  width:190px;
}

}

@media screen and (min-width: 1000px) and (max-width: 1199px){
  .button__inner_1{
    width:119px;
}

.button__inner_2{
  width:213px;
}

.button__inner_3{
  width:171px;
}

}

@media screen and (min-width: 501px) and (max-width: 999px){
  #demoslide4  .button__inner {
    
      font-size: 14px;
  }}




@media screen and ( max-width:500px) {
  .wafer_group .button__inner{
width: 147px;
font-size: 13px;
}

}

@media screen and (min-width: 501px) and (max-width: 620px){
.wafer_group .button__inner {
    width: 232px;
    font-size: 16px;
}}

@media screen and (min-width:621px) and ( max-width:999px) {
  .wafer_group .button__inner{
width:192px;
font-size: 16px;
}

}


@media screen and (min-width:1000px) and ( max-width:1199px) {
  .wafer_group .button__inner{
width:144px;

}

}

@media screen and (min-width:1200px) and ( max-width:1599px) {
  .wafer_group .button__inner{
width:160px;font-size: 16px;
border-radius: 0.4rem;
}

}
.photo_mask_group .button__inner{display: flex;color:#32673C ;width: 210px;background-color: #ffff;justify-content: center;border-radius: 0.4rem;position: relative;}   

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

  .photo_mask_group .button__inner{width: 147px; border-radius: 0.4rem;font-size: 13px;}   
}

@media screen and (min-width:501px) and ( max-width:620px) {

  .photo_mask_group .button__inner{width: 232px; border-radius: 0.4rem;}   
}
@media screen and (min-width:621px) and ( max-width:999px) {

  .photo_mask_group .button__inner{width: 192px; border-radius: 0.4rem;}   
}
@media screen and (min-width:1000px) and ( max-width:1199px) {
  .photo_mask_group .button__inner{width: 166.82px; border-radius: 0.4rem;}   
 
}

@media screen and (min-width:1200px) and ( max-width:1599px) {
  .photo_mask_group .button__inner{width: 186.4px; border-radius: 0.4rem;}   
 
}
















.environment_group .button__inner{display: flex;color:#007AA9 ;width: 210px;background-color: #ffff;justify-content: center;border-radius: 0.4rem;position: relative;}

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

  .environment_group .button__inner{width: 147px; border-radius: 0.4rem;font-size: 13px;}   
}

@media screen and (min-width:501px) and ( max-width:620px) {

  .environment_group .button__inner{width: 232px; border-radius: 0.4rem;}   
}

@media screen and (min-width:621px) and ( max-width:999px) {

  .environment_group .button__inner{width: 192px; border-radius: 0.4rem;}   
}

@media screen and (min-width:1000px) and ( max-width:1199px) {
  .environment_group .button__inner{width: 166.4px; border-radius: 0.4rem;}   
}

@media screen and (min-width:1200px) and ( max-width:1599px) {
  .environment_group .button__inner{width: 186.4px; border-radius: 0.4rem;}   
}


.button{display: flex;padding-right:8px;padding-bottom: 10px;z-index: 100;}

@media screen and (max-width:999px) {
  .button {
  
    padding-right: 4px;
    padding-left: 4px;
   
} 
}
.button:hover{opacity: 0.8;}
  
 
.wafer_group_1 :last-of-type,.photo_mask_group:last-of-type,.environment_group :last-of-type{padding-right: 0px;}

.wafer_group svg,.photo_mask_group svg,.environment_group__wrapper svg{position: absolute;right: 7.6px;top:18px;}
@media screen and (min-width:501px) and ( max-width:1599px) {
  .wafer_group svg,.photo_mask_group svg,.environment_group__wrapper svg{right: 2px;top:13px;}
}


@media screen and (max-width:500px) {
  .wafer_group svg,.photo_mask_group svg,.environment_group__wrapper svg{top:12px;}
}




.photo_mask_group,.environment_group{display: flex;}

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

  .photo_mask_group,.environment_group{width:310px;margin:0 auto;}
}


@media screen and (min-width:501px) and ( max-width:620px) {

  .photo_mask_group,.environment_group{width:480px;margin:0 auto;}
}





@media screen and (min-width:621px) and ( max-width:820px) {

  .photo_mask_group,.environment_group{width:600px;margin:0 auto;}
}


@media screen and (min-width:821px) and ( max-width:999px) {

  .photo_mask_group,.environment_group{width:800px;margin:0 auto;}
}


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

  .photo_mask_group,.environment_group{display: flex;flex-wrap: wrap;}
}






.photo_and_environment{display: flex;}

@media screen and (max-width:999px) {
  .photo_and_environment{display: block;}
}



    /* graphic */
  
  
    /* video */


   /* footer */
   footer{color: #666666;text-align: center;margin-top: 70px;}




   


.links{display: flex;justify-content: center;}

@media screen and ( max-width:999px) {
  .links{display: block;}
}







.links li{padding-right:20px ;}


  .links li{font-size: 13px;}


@media screen and ( max-width:999px) {
  .links li{padding-bottom: 10px;}
}



.links li:last-child{padding-right:0px ;}
footer div{padding-bottom:30px;}

.links li:hover{color:#A50034}






/*スクロールボタンの指定*/
.scroll{
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
  right: -3px;
  a{
    letter-spacing: 0.6px;
    position: relative;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    padding: 0 0 40px;
    /*矢印を作成する*/
    &:before{
      content: "";
      position: absolute;
      width: 14px;
      height: 14px;
      left: 0;
      right: 0;
      bottom: 25px;
      margin: auto;
      border-bottom: 2px solid #fff;
      border-right: 2px solid #fff;
      transform: rotate(45deg);
      animation: move 2s infinite;
    }
  }
}
@media screen and (max-width:999px) {

  .SCROLL{display:none ;}
}








/*矢印をアニメーションする*/
@keyframes move {
  0% {
    transform: rotate(45deg) translate(0, 0);
  }
  20% {
    transform: rotate(45deg) translate(10px, 10px);
  }
  40% {
    transform: rotate(45deg) translate(0, 0);
  }
}


.Introduction{text-align: center;}
.Introduction img{width: 645px;padding-top: 20px;}
.Introduction_sp img{width: 248px;}
.Introduction_sp{text-align: center;padding-top: 64px;}
.Introduction img:hover {
	opacity: 0.5 ;}
 .Introduction_sp img:hover {
	opacity: 0.5 ;
}
@media screen and (max-width:999px) {

  .Introduction{display: none;}
}