#main{position: relative;}

.mobile_mode{display:none;margin-bottom:20px;}
.pc_mode{display:block;}
.pc_mode img,
.mobile_mode img{display:block;width:100%;}

@media (max-width:1399px) {
  body{letter-spacing:-0.6px;}

  .mobile_mode{display:none;}
 }

@media (max-width:716px) {

  .pc_mode{display:none;}
  .tablet_mode{display:none;}
  .mobile_mode{display:block;}
}

#visual{position: relative;}
#visual .slick-wrap{position: relative; z-index: 1;}
#visual .slick > div{position: relative; z-index: 1;}
#visual .slick > div .titbox img{display: block; width: auto;}
#visual .slick > div .titbox{position: absolute; left: 153px; top: 280px; }
#visual .slick > div .titbox img{animation:main1 .5s  linear;}
#visual .control{position: absolute; left: 180px; top: 614px; z-index: 100; width: 560px;}
#visual .control > button{position: absolute;  right: 0; top: 5px; z-index: 99;}
#visual .control > button.play{display: none;}
#visual .dots{position: absolute;  left: 0; top: 0;  z-index: 100;}
#visual .dots a{display: flex; flex-direction: column; color: #fff; white-space: nowrap; font-weight: 600; padding-top: 4px;}
#visual .dots a em{font-size: 15px;}
#visual .dots a strong{font-size: 19px; margin-top: -5px;}
#visual .slick-dots button{position: relative; font-size: 0; margin-right: 10px; width: 120px; height: 10px;  border: 1px solid #fff; transition: all .2s;}
#visual .slick-dots button::after{content: ''; position: absolute; left: 0; top: 0; bottom: 0; z-index: 10;  display: block;  width: 0%; background: #fff;}
#visual .slick-dots .slick-active button{ width: 120px;  background: rgba( 255, 255, 255, 0.5 );}
#visual .slick-dots .slick-active button::after{width: 100%; animation:main2 5s 1 both linear;}

@media (max-width:1400px) {
  #visual .slick-wrap{height: 760px;}
    #visual .slick .slick-slide .pc_mode img{height: 760px !important; object-fit: cover;}
  #visual .slick > div .titbox{position: absolute;left: 20px;top: 150px;}
  #visual .slick > div .titbox img{display: block; width: 720px;}
  #visual .control{left: 40px; top: auto; bottom: 150px;}
} 

@media (max-width:991px) {
  #visual .slick .slick-slide .mobile_mode img{height: 760px !important; object-fit: cover;}
  #visual .slick > div .titbox img{width: 550px;}
  #visual .control{ width: 357px;}
  #visual .slick-dots button,
  #visual .slick-dots .slick-active button{width: 70px;}
  #visual .dots a em{font-size: 14px;}
  #visual .dots a strong{font-size: 16px;}
} 

@media (max-width:760px) {
  #visual .slick > div .titbox{left: 10px; top: 120px;}
  #visual .slick > div .titbox img{width: 430px;}

  #visual .control{left: 20px; bottom: 100px; width: 310px;}
  #visual .slick-dots button,
  #visual .slick-dots .slick-active button{width: 60px;}
}

@media (max-width:500px) {
    #visual .slick > div .titbox img{width: 430px;}
}

@media (max-width:414px) {
  #visual .slick > div .titbox img{width: 330px;}
}

@keyframes main1{ 
    0%{opacity:0;transform:translateY(20%);}
    100%{opacity:1;transform:translateY(0%);}  
}

@keyframes main2{ 
  0%{width:0%;}
  100%{width:100%;} 
}