@charset "utf-8";   

/* VISUAL */
#visual , .visual__img { position:relative } 
#visual {
    width:100% ; height:100vh ; min-height:60rem ; max-height:108rem ;
    overflow:hidden ; margin-bottom:6rem ;
} 
.visual__img , .visual__img::before , .visual__img::after { display:block ; width:100% ; height:100% } 
.visual__img::before , .visual__img::after , .visual__box { position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) }
.visual__img::before , .visual__img::after { 
    content:"" ;
    transform:translate(-50%,-50%) scale(1.1)
}
.visual__img::before {  
    background:url(../img/visual_slide1.jpg) no-repeat center ; background-size:cover ; 
    animation-name:main_visual_img ;
    animation-delay:0.5s ;
    animation-duration:60s ;
    animation-iteration-count:infinite 
}
@keyframes main_visual_img { 
    0%   { transform:translate(-50%,-50%) scale(1.1) }   
    45%  { transform:translate(-50%,-50%) scale(1) }       
    50%  { transform:translate(-50%,-50%) scale(1) }    
    95%  { transform:translate(-50%,-50%) scale(1.1) } 
    100% { transform:translate(-50%,-50%) scale(1.1) }   
}
#visual.paused .visual__img::before { animation-play-state:paused }

.visual__img::after { background-color:rgba(0,0,0,0.5) }
 
.visual__box { width:90% ; top:55% ; display:block ; text-align:center }
.visual__title , .visual__p , .visual__link { 
    color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ; word-break:keep-all ;
    opacity:0 ; position:relative ; top:2rem ; 
    animation-name:main_visual_text ;   
    animation-duration:30s ;
    animation-iteration-count:infinite
}
.visual__title { 
    font-size:4rem ; line-height:120% ; font-weight:100 ; letter-spacing:-0.2rem ; 
    margin-bottom:2rem ; 
    animation-delay:1s ;
} 
  
@keyframes main_visual_text { 
    0%   { opacity:0 ; top:2rem }    
    2%   { opacity:1 ; top:0 }    
    96%  { opacity:1 ; top:0 } 
    98%  { opacity:0 ; top:2rem } 
    0%   { opacity:0 ; top:2rem }  
}

#visual.paused .visual__title , #visual.paused .visual__p , #visual.paused .visual__link  {
    animation:none ;
    opacity:1 ; top:0
} 

.visual__title > b { color:inherit ; line-height:inherit ; word-break:inherit ; font-weight:500 ; letter-spacing:inherit ; text-shadow:inherit }
.visual__p { font-size:1.4rem ; line-height:140% ; font-weight:300 ; margin-bottom:0.5rem } 
.visual__link {
    display:inline-block ; padding:1rem 2rem ; margin-top:3rem ;
    font-size:1.4rem ; line-height:120% ; color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.1) ;
    border:solid 1px rgba(255,255,255,0.1) ; border-radius:0.4rem ;
}
 
.visual__p:nth-of-type(1) { animation-delay:1.3s }
.visual__p:nth-of-type(2) { animation-delay:1.5s }
.visual__link { animation-delay:1.7s ; transition:0.3s all }  

.visual__link:hover {
    background-color:rgba(255,255,255,0.9) ; border-color:rgba(255,255,255,0.9) ;
    color:#222222 ; text-shadow:none ;
}
 
.visual__btns , .visual__btn { display:block ; width:2rem ; height:2rem }
.visual__btns { position:absolute ; right:1rem ; bottom:1rem ; overflow:hidden }
.visual__btn , .visual__btn::before { transition:0.3s all }
.visual__btn  { 
    font-size:0 ; color:transparent ;  
    overflow:hidden ; border-radius:100% ;
    background-color:rgba(255,255,255,0.1) ;
    position:relative ;
}
.visual__btn::before {
    display:block ; content:"" ; width:100% ; height:100% ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    background:url(../img/icon_PP.png) no-repeat left top ; background-size:auto 2rem ;
    opacity:0.5 ;
}
.paused .visual__btn.play::before { background-position:right top } 
.visual__btn:hover , .visual__btn:focus { background-color:rgba(0,0,0,0.6) }
.visual__btn:hover::before , .visual__btn:focus::before { opacity:1 }  
.paused .visual__btn.stop , .visual__btn.play { display:none } 
.paused .visual__btn.play  { display:block } 




 
@media screen and (min-width:1024px){
 
    /* VISUAL */ 
    #visual { margin-bottom:8rem } 
    .visual__img::before { background-image:url(../img/visual_slide1.jpg) } 
    .visual__title       { font-size:6rem ; margin-bottom:3rem ; letter-spacing:-0.5rem } 
    .visual__title > b   { letter-spacing:-0.2rem } 
    .visual__p , .visual__link { font-size:1.6rem ; letter-spacing:0 }

}  





@media print {  }