@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 { 
    display:block ; overflow:hidden ;  ; position:absolute ; left:0 ; top:0 ; 
    background:no-repeat center ; background-size:cover ; z-index:6 } 

.slide:nth-child(1)  { left:-100% } 
.slide:nth-child(2)  { left:0 } 
.slide:nth-child(3)  { left:100% }
.slide:nth-child(4)  { left:200% }
.slide:nth-child(5)  { left:300% }
.slide:nth-child(6)  { left:400% }
.slide:nth-child(7)  { left:500% }
.slide:nth-child(8)  { left:600% }
.slide:nth-child(9)  { left:700% }
.slide:nth-child(10) { left:800% }
.slide:nth-child(11) { left: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:47% ; transform:translateX(-50%) ; z-index:8 ;
    width:80% ; text-align:center
}
.slide__title , .slide__txt { width:100% ; box-sizing:border-box ; color:#ffffff ; word-break:keep-all }

.slide__title { 
    font-size:4rem ; line-height:140% ; font-weight:600 ; letter-spacing:-0.2rem ; 
    margin-bottom:1.5rem }
.slide__txt { 
    font-size:1.6rem ; line-height:140%; font-weight:300 ;
    margin-bottom:2rem ;
}
 
.slide__link , .slide__link > span::before , .slide__link > span::after { transition:0.3s all }
.slide__link { 
    display:inline-block ; overflow:hidden ; padding:1rem 4rem 1.2rem 2rem ; 
    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) }
 
 


/* PREV+NEXT */
.slide__prevNext { width:100% ; box-sizing:border-box }
.slide__PN__btn , .slide__PN__btn::before { transition:0.3s all }
.slide__PN__btn {
    width:3rem ; height:3rem ; position:absolute ; top:50% ; transform:translateY(-50%) ; z-index:9 ;
    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:"" ; position:absolute ; top:50% ; transform:translate(-50%,-50%) ; opacity:0.3 ;
    width:0.7rem ; height:0.7rem ; border:solid 0.2rem #ffffff ; border-bottom:none ; 
}
.slide__PN__btn.prev { left:0 ; border-right:none }
.slide__PN__btn.next { right:0 ; border-left:none }
.slide__PN__btn.prev::before  { border-right:none ; transform:translate(-50%,-50%) rotate(-45deg) ; left:55% }
.slide__PN__btn.next::before  { border-left:none ; transform:translate(50%,-50%) rotate(45deg) ; right: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 { 
    display:block ; width:96% ; 
    position:absolute ; bottom:1rem ; left:50% ; transform:translateX(-50%) ; z-index:9 ;
}
.slide__pagination { width:100% ; box-sizing:border-box ; text-align:center ; font-size:0 ; padding:0.3rem 0 }
.slide__pagination .page { display:inline-block ; margin:0 0.5rem }
.slide__pagination .page > a {
    width:1rem ; height:1rem ; display:block ; overflow:hidden ; border-radius:2rem ;
    font-size:0 ; color:transparent ; text-indent:99rem ;
    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 { width:4rem ; opacity:1 }



/* STOP/PLAY  */
.slide__stopPlay , .slide__SP__btn , .slide__SP__btn::before  { display:block ; width:2rem ; height:2rem }
.slide__stopPlay { position:absolute ; top:50% ; right:0 ; z-index:9 ; transform:translateY(-50%) ; }
.slide__SP__btn , .slide__SP__btn::before { transition:0.3s all }
.slide__SP__btn  { 
    box-sizing:border-box ; background-color:rgba(0,0,0,0.3) ; border-radius:100% ;
    font-size:0 ; color:transparent ; overflow:hidden ;
    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 */
    #visual { margin-bottom:8rem }
 
    .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 , .slide__bottom { width:90% ; max-width:120rem ; text-align:left } 
    .slide__box   { top:45.5% }
    .slide__title , .slide__txt , .slide__link { word-break:keep-all }
    .slide__title { font-size:5rem ; margin-bottom:2rem ; letter-spacing:-0.2rem }
    .slide__txt   { font-size:1.8rem ; margin-bottom:4rem }
    .slide__link  { 
        padding:1.3rem 5rem 1.5rem 3rem ; 
        border-radius:3rem ;
        font-size:1.8rem ;  
    } 
    .slide__link > span { right:2.5rem }
  
 

    /* PREV+NEXT */
    .slide__PN__btn { 
        width:5rem ; height:5rem ; border-radius:100% ; 
        opacity:0 ; overflow:hidden ; 
    }
    .slide__PN__btn.prev , .stop .slide__PN__btn.prev:hover { left:-6rem }
    .slide__PN__btn.next , .stop .slide__PN__btn.next:hover { right:-6rem }
    .slide__PN__btn::before { width:1rem ; height:1rem }
    .slide__PN__btn.prev:hover , .slide__PN__btn.prev:focus , .slide__PN__btn.next:hover , .slide__PN__btn.next:focus ,
    .visual__slide:hover .slide__PN__btn { opacity:1 }
    .visual__slide:hover .slide__PN__btn.prev , .slide__PN__btn.prev:hover , .slide__PN__btn.prev:focus { left:0.5rem }
    .visual__slide:hover .slide__PN__btn.next , .slide__PN__btn.next:hover , .slide__PN__btn.next:focus { right:0.5rem }
    .slide__PN__btn.prev:focus , .slide__PN__btn.next:focus { transition:none }



    /* PAGE */
    .slide__bottom { text-align:left ; padding:0 0 0 4rem ; bottom:2rem }
    .slide__pagination { text-align:left } 
    .slide__pagination .page { margin:0 0.7rem 0 0 }
    .slide__stopPlay { right:auto ; left:0 }
 
    
} 





@media print {  }