@charset "utf-8";   

/* VISUAL */ 
#visual {
    width:100% ; height:100vh ; min-height:40rem ; max-height:45rem ;
    overflow:hidden ; position:relative ; margin-bottom:6rem ;
    background-color:#000000 ;
}  
#visual.stop { background:url(./mov/mov_img2.jpg) no-repeat center ; background-size:cover }
#visual::before, .visual__box, .visual__mov { position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) } 
#visual::before, .visual__mov { width:100% ; height:100% ; display:block } 
#visual::before {
    content:"" ; z-index:4 ;
    transition:0.3s all ; background-color:rgba(0,0,0,0.4) ; 
} 
#visual.stop::before { background-color:rgba(0,0,0,0.6) } 
.visual__box {  
    display:block ; width:90% ; z-index:5 ; 
    text-align:center 
} 
.visual__title, .visual__p { 
    color:#ffffff ; word-break:keep-all ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.3) 
} 
.visual__title { 
    font-size:4rem ; line-height:120% ; font-weight:600 ; letter-spacing:-0.2rem ; 
    margin-bottom:1.5rem 
} 
.visual__p { 
    font-size:1.4rem ; line-height:160% ; font-weight:300 ; 
    margin-bottom:2rem 
}   
.visual__p:last-child { margin-bottom:0 } 
.visual__btns, .visual__btn { display:block ; width:2rem ; height:2rem } 
.visual__btns { position:absolute ; right:1rem ; bottom:1rem ; z-index:6 } 
.visual__btn {
    overflow:hidden ; border-radius:100% ; opacity:0.7 ;
    font-size:0 ; color:transparent ;   
    background:url(../img/icon_PP.png) no-repeat rgba(0,0,0,0.6) ;
    transition:0.3s all;
} 
.visual__btn:hover { opacity:1 } 
.visual__btn.stop  { background-position:left top }
.visual__btn.play  { background-position:right top ; display:none } 
.stop .visual__btn.stop  { display:none }
.stop .visual__btn.play  { display:block }

 
.visual__mov {  
    width:100% ; height:100% ; object-fit:cover ;
    z-index:3 ; border:0; 
} 
.stop .visual__mov { opacity:0 ; pointer-events:none ;  visibility:hidden }





@media screen and (min-width:1024px){
    #visual { max-height:100rem ; min-height:80rem ; margin-bottom:8rem } 
    .visual__title { 
        font-size:6rem ; letter-spacing:-0.3rem ; font-weight:400 ;
        margin-bottom:4rem 
    } 
    .visual__p { font-size:1.8rem }
}





@media print { }
