@charset="utf-8";
  

 
#main { background-color: #171717;  overflow: hidden;  position:relative; } 
 
#main div > div {  width:100%;  height:780px; }

#main section { width:100%; max-width:100%!important;  position: absolute; top:30%; left:0; overflow: visible;}
#main section .tx { width:100%; max-width:1300px; display: block; color:#fff; margin:0 auto; padding-left:5%;}
#main section .tx > p:first-child { font-size:2.8em; font-weight:600; text-transform: uppercase; color:rgb(167, 167, 167); }
#main section .tx > p:nth-child(2) { font-size:2.1em; margin:-5px 0 30px; }
#main section .tx > span { font-size:1em; display: block; max-width:370px; }
#main section .tx a { display: block; margin-top:50px; color:#fff; position: relative; width:100%; max-width:370px;  }
#main section .tx a p {font-weight:100;}
#main section .tx a p span { padding-left:5px;  font-weight:500; }
#main section .tx a button { background-image: url('../../images/btn.png'); padding:26px; background-size: contain; transition: all .5s;  position: absolute; left:150px; top:-15px; }
#main section .tx a:hover button { left:170px; top:-15px;}

.slide-box div {    }
.main01 { background-image: url('../../images/main01.png'); background-size: 50%; background-position:  right 10%; padding:20%;  }
.main02 { background-image: url('../../images/main02.jpg'); background-size: cover;  background-position: center right; padding:12% 20%;   } 

.slick-dots { position:absolute;  bottom:5%; left:50%; transform: translate(-50%, -50%);  width:75px;  }
.slick-dots li  {  }
.slick-dots button { width:13px; height:11px; background-color: #fff; border-radius: 35px; margin:3px; font-size:0; transition: all .3s; }

.slick-active button { width:30px; height:11px;  transition: all .3s;  background-color: #00b3f0;}



@media only screen  and (max-width:800px){   
  .main01 { background-size: 100%; background-position:center 30px; padding:20%;  }
  .main02 { background-size: cover;  background-position: center right;  } 
  .visual_txt h2 { font-size:.6em;}
  .visual_txt p { width:80%; }
}





 
.slick-arrow { position:absolute; padding:20px; font-size:0; }
.slick-prev {  top:45%; left:20%; z-index: 9; background-image: url('../../images/btn-prev.png'); transition:all .3s; }
.slick-next { top:45%; right:20%; background-image: url('../../images/btn-next.png'); transition:all .3s; }
.slick-prev:hover { background-image: url('../../images/btn-prev100.png'); transition:all .3s;}
.slick-next:hover { background-image: url('../../images/btn-next100.png');transition:all .3s; }


@media only screen  and (max-width:800px){  
  .slick-arrow { position:absolute; padding:4%; font-size:0; } 

}
 
@media only screen  and (max-width:480px){   
  .slick-arrow { position:absolute; padding:7%; font-size:0; } 
}
   


 

#area { width:100%;  font-size:1em;  padding:150px 0; background-image: url('../../images/bg.png'); background-position:65% center; background-size: 23%; overflow: hidden;}
#area .box_wrap { display: flex; flex-wrap:wrap; justify-content: center; align-items: center;}
#area .box_wrap > div { flex:1;  }
#area .box_wrap .sid {  flex:1; text-align: center; opacity: .5;  color:#666;   }
#area .box_wrap .sid p { font-size:.9rem; font-weight:500; }
#area .box_wrap .sid span { text-transform: uppercase; font-size:1.2em;  font-weight:500; }
#area .box_wrap .sid img  { width:40%; margin:0 auto; display: block;}
#area .box_wrap .cen {  flex:2.2;  }
#area .box_wrap .cen div { width:50%; float:left;    }
#area .box_wrap .cen div img { width:90%; margin-top:30px;  transform:rotate(-15deg);}
#area .cen .tx { padding-left:3%;}
#area .cen .tx p { text-transform: uppercase; padding:5px 0; color:#2e2e2e;  }
#area .cen .tx p:first-child { text-transform: uppercase; font-size:1em; font-weight:400; }
#area .cen .tx p:nth-child(2) { font-weight:600; font-size:3.3em; letter-spacing:-.5px; line-height:1em; }
#area .cen .tx p:nth-child(2) span {   font-size:1rem;  line-height:1em; }
#area .cen .tx > span { display: block; padding:10px 0 5px; color:#666; max-width:300px;  }  
#area .cen .tx > span:nth-child(3) { margin-top:15px; }
#area .cen .tx > span:nth-child(4) { font-size:.9em; display: none;}
#area .cen .tx a { display: inline-block; padding:15px 40px;   background-color: #383532; color:#fff; border-radius: 25px; box-shadow: 2px 2px 5px rgb(163, 163, 163); margin-top:50px; }



@media only screen  and (max-width:800px){   
  #area { padding:100px 0; background-position:center 80%; background-size: 70%;}
  #area .box_wrap .cen div { width:100%; float:left;    }
  #area .cen .tx p:nth-child(2) { font-size:2.5em; }
  #area .cen .tx a { padding:10px 20px; }

}



@media only screen  and (max-width:480px){    
  #area .box_wrap .sid {  flex: 0!important; }
}