@charset "utf-8";   

/* VISUAL */
#visual { margin-bottom:6rem }
.visual__slide , .visual__inner , .slide__list , .slide { width:100% ; box-sizing:border-box }
.visual__slide , .visual__inner { position:relative } 
.visual__inner , .visual__slide { overflow:hidden }  
.visual__inner        { height:100vh ; min-height:80rem ; max-height:108rem }
.slide__list , .slide { height:100% }
.slide__list { position:absolute ; left:0 ; top:0 ; z-index:5 }
.slide { 
    overflow:hidden ;
    display:block ; height:100% ; position:absolute ; left:0 ;
    background:no-repeat center ; background-size:cover ; z-index:6 } 

.slide:nth-child(1)  { top:-100% } 
.slide:nth-child(2)  { top:0 } 
.slide:nth-child(3)  { top:100% }
.slide:nth-child(4)  { top:200% }
.slide:nth-child(5)  { top:300% }
.slide:nth-child(6)  { top:400% }
.slide:nth-child(7)  { top:500% }
.slide:nth-child(8)  { top:600% }
.slide:nth-child(9)  { top:700% }
.slide:nth-child(10) { top:800% }
.slide:nth-child(11) { top:900% }

.slide__img , .slide__img::before , .slide__img::after {  display:block ; width:100% ; height:100% }
.slide__img::before , .slide__img::after {
    content:"" ; position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) scale(1.01) ;
    transition:0.3s all ;
}
.slide__img::before { background:no-repeat center ; background-size:cover }
.slide__img::after  { background-color:rgba(0,0,0,0.5) }

.slide1 .slide__img::before { background-image:url(../img/visual_slide1.jpg) }
.slide2 .slide__img::before { background-image:url(../img/visual_slide2.jpg) }
.slide3 .slide__img::before { background-image:url(../img/visual_slide3.jpg) }
.slide4 .slide__img::before { background-image:url(../img/visual_slide4.jpg) }
.slide5 .slide__img::before { background-image:url(../img/visual_slide5.jpg) }
.slide6 .slide__img::before { background-image:url(../img/visual_slide6.jpg) }
.slide7 .slide__img::before { background-image:url(../img/visual_slide7.jpg) }
.slide8 .slide__img::before { background-image:url(../img/visual_slide8.jpg) }
.slide9 .slide__img::before { background-image:url(../img/visual_slide9.jpg) }
 
.slide__box { 
    position:absolute ; left:50% ; top:45% ; transform:translateX(-50%) ; z-index:8 ;
    width:84% ; text-align:center 
} 

.slide__list > .slide:first-child .slide__box ,
.slide__list > .slide:last-child .slide__box { display:none }
 
.slide__title , .slide__txt { width:100% ; line-height:120% ; box-sizing:border-box ; color:#ffffff ; word-break:keep-all }

.slide__title { 
    font-size:4rem ; font-weight:600 ; letter-spacing:-0.2rem ; 
    margin-bottom:2rem }
.slide__txt { 
    font-size:1.6rem ; font-weight:300 ;
    margin-bottom:0.5rem
}
 
.slide__title , .slide__txt , .slide__link { transition:0.5s all ; position:relative ; top:0rem ; opacity:1 }
.slide__box , .slide__link > span::before , .slide__link > span::after { transition:0.3s all }
.slide__link { 
    display:inline-block ; overflow:hidden ; padding:1.3rem 4rem 1.5rem 2rem ; margin-top:3rem ;
    border-radius:3rem ;
    font-size:1.4rem ; line-height:120% ; color:rgba(255,255,255,0.7);
    position:relative ; background-color:rgba(0,0,0,0.5) ;
} 
.slide__link > span { 
    display:block ; width:1.5rem ; height:1.5rem ;
    position:absolute ; right:1.5rem ; top:50% ; transform:translateY(-50%) ;
    font-size:0 ; color:transparent ; opacity:0.5 ;
}
.slide__link > span::before , .slide__link > span::after {
    display:block ; content:"" ; width:90% ; height:0.1rem ;
    background-color:#ffffff ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ; 
}
.slide__link > span::before { transform:translate(-50%,-50%) rotate(90deg) } 

.slide__link:hover , .slide__link:focus { background-color:rgba(0,0,0,0.8) ; color:#ffffff } 
.slide__link:hover > span , .slide__link:focus > span   { opacity:1 }
.slide__link:hover > span::before , .slide__link:focus > span::before ,
.slide__link:hover > span::after  , .slide__link:focus > span::after  { height:0.2rem }
.slide__link:hover > span::before , .slide__link:focus > span::before { transform:translate(-50%,-50%) rotate(180deg) }
.slide__link:hover > span::after  , .slide__link:focus > span::after  { transform:translate(-50%,-50%) rotate(90deg) }
 
.now .slide__title , .now .slide__txt , .now .slide__link { 
    transition:0.3s ;
    top:0 ; opacity:1 ; 
    animation-duration:3s ;
    animation-iteration-count:1 ; 
}
.now .slide__title { animation-name:visual_txt1; }
.now .slide__txt   { animation-name:visual_txt2; }
.now .slide__link  { animation-name:visual_txt3; }
 
@keyframes visual_txt1 { 
    0%     { opacity:0 ; top:2rem }   
    20%    { opacity:0 ; top:2rem } 
    35%    { opacity:1 ; top:0 }  
    100%   { opacity:1 ; top:0 } 
}

@keyframes visual_txt2 {  
    0%    { opacity:0 ; top:2rem }   
    30%    { opacity:0 ; top:2rem } 
    50%   { opacity:1 ; top:0 }  
    100%  { opacity:1 ; top:0 } 
}

@keyframes visual_txt3 { 
    0%    { opacity:0 ; top:2rem }   
    40%    { opacity:0 ; top:2rem } 
    60%   { opacity:1 ; top:0 }  
    100%  { opacity:1 ; top:0 } 
}

.visual__slide.stop .now .slide__title ,
.visual__slide.stop .now .slide__txt ,
.visual__slide.stop .now .slide__link { 
    animation:none ;
    opacity:1 ; top:0
}

.visual__slide.stop .slide__list > .slide:first-child .slide__box ,
.visual__slide.stop .slide__list > .slide:last-child .slide__box { display:block }



/* PREV+NEXT */
.slide__prevNext { 
    width:3rem ; 
    position:absolute ; left:0 ; top:50% ; z-index:9 ;
    transform:translateY(-50%)
} 
.slide__prevNext::before {
    width:1.5rem ; height:1px ; display:block ; content:"" ;
    position:absolute ; left:50% ; top:50% ; transform:translateX(-50%) ;
    background-color:#ffffff ; opacity:0.15 ;
} 
.slide__PN__btn , .slide__PN__btn::before { transition:0.3s all ; overflow:hidden }
.slide__PN__btn {
    width:3rem ; height:3rem ; position:relative ;
    font-size:0 ; color:transparent ; text-indent:-99rem ;
    background-color:rgba(0,0,0,0.1) ; 
    overflow:hidden ; border-radius:0.4rem ;
}
.slide__PN__btn::before { 
    display:block ; content:"" ; width:0.7rem ; height:0.7rem ;
    position:absolute ; left:50% ; transform:translate(-50%,-50%) ; opacity:0.3 ;
    border:solid 0.2rem #ffffff ;  
} 

.slide__PN__btn.prev::before  { 
    border-right:none ; border-bottom:none ; 
    transform:translate(-50%,-50%) rotate(45deg) ; top:55% }

.slide__PN__btn.next::before  { 
    border-top:none ; border-left:none ;  
    transform:translate(-50%,50%) rotate(45deg) ; bottom:55% }
 
.slide__PN__btn:hover::before , .slide__PN__btn:focus::before { opacity:0.8 }
.slide__PN__btn:hover , .slide__PN__btn:focus { background-color:rgba(0,0,0,0.3) }
.slide__PN__btn.prev:hover::before , .slide__PN__btn.prev:focus::before  { 
    transform:translate(-50%,-50%) rotate(45deg) scale(1.1)}
.slide__PN__btn.next:hover::before , .slide__PN__btn.next:focus::before  { 
    transform:translate(-50%,50%) rotate(45deg) scale(1.1)}




/* PAGE */
.slide__bottom { 
    position:absolute ; right:0.5rem ; bottom:0 ; z-index:9 ;
    width:2rem ; height:100% } 
.slide__pagination , .slide__stopPlay {
    text-align:center ; font-size:0 ;
    position:absolute ; left:50% ; transform:translateX(-50% ) 
}

.slide__pagination { 
    width:1rem ;  
    bottom:4rem ; 
    display:flex ; flex-wrap:wrap ; align-content:flex-end ; 
}
.slide__pagination .page { margin:0.5rem auto ; display:inline-block }
.slide__pagination .page > a {
    width:1rem ; height:1rem ; display:block ; overflow:hidden ; border-radius:2rem ;
    font-size:0 ; color:transparent ;
    background-color:#ffffff ; transition:0.3s all ; opacity:0.3 ;
} 
.slide__pagination .page.now > a ,
.slide__pagination .page > a:hover , .slide__pagination .page > a:focus { opacity:1 }
.slide__pagination .page.now > a { height:4rem ; opacity:1 }



/* STOP/PLAY  */
.slide__stopPlay , .slide__SP__btn , .slide__SP__btn::before  { display:block ; width:2rem ; height:2rem }
.slide__stopPlay { bottom:0.5rem }
.slide__SP__btn , .slide__SP__btn::before { transition:0.3s all ; overflow:hidden }
.slide__SP__btn  { 
    box-sizing:border-box ; background-color:rgba(0,0,0,0.3) ; border-radius:100% ;
    font-size:0 ; color:transparent ; 
    position:relative ;
} 
.slide__SP__btn::before { 
    content:"" ; opacity:0.8 ;
    background:url(../img/icon_PP.png) no-repeat left top ; background-size:auto 2rem ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.slide__SP__btn.play::before { background-position:right top } 
.slide__SP__btn.play ,
.stop .slide__SP__btn.stop { display:none }
.stop .slide__SP__btn.play { display:block }

.slide__SP__btn:hover { background-color:rgba(0,0,0,0.8) }
.slide__SP__btn:hover::before { opacity:1 }




 
@media all and (min-width:1024px){ 
   
    /* VISUAL */  
    .slide1 .slide__img::before { background-image:url(../img/visual_slide1.jpg) }
    .slide2 .slide__img::before { background-image:url(../img/visual_slide2.jpg) }
    .slide3 .slide__img::before { background-image:url(../img/visual_slide3.jpg) }
    .slide4 .slide__img::before { background-image:url(../img/visual_slide4.jpg) }
    .slide5 .slide__img::before { background-image:url(../img/visual_slide5.jpg) }
    .slide6 .slide__img::before { background-image:url(../img/visual_slide6.jpg) }
    .slide7 .slide__img::before { background-image:url(../img/visual_slide7.jpg) }
    .slide8 .slide__img::before { background-image:url(../img/visual_slide8.jpg) }
    .slide9 .slide__img::before { background-image:url(../img/visual_slide9.jpg) }
 
    .slide__box   { width:86% ; max-width:120rem ; text-align:left }
    .slide__title { font-size:5rem ; margin-bottom:2rem ; letter-spacing:-0.2rem }
    .slide__txt   { font-size:1.8rem }
    .slide__link  { 
        padding:0.8rem 5rem 1rem 3rem ; border-radius:3rem ;
        font-size:1.8rem ; line-height:2.8rem ; 
    } 
    .slide__link > span { right:2.5rem }
  
 

    /* PREV+NEXT */ 
    .slide__prevNext { 
        position:static ; width:auto ;
        transform:none ;
    }
    .slide__prevNext::before { display:none }
     
    .slide__PN__btn { 
        position:absolute ; left:-6rem ; z-index:9 ; 
        width:5rem ; height:5rem ; border-radius:100% ;
        opacity:0 ;
    }
    .slide__PN__btn::before { width:1rem ; height:1rem}
    .slide__PN__btn.prev , .slide__PN__btn.next { margin:0  }
    .slide__PN__btn.prev { bottom:50.2% }
    .slide__PN__btn.next { top:50.2% }

    .visual__slide:hover .slide__PN__btn , .slide__PN__btn:focus { left:1rem ; opacity:1  }
     



    /* PAGE + STOP/PLAY  */ 
    .slide__stopPlay { bottom:1rem }
 
   
} 





@media print {  }