@charset "utf-8";  
/* Mobile */

/* Visual */
.visual__slide , .visual__container , .slide__container , .slide__group { width:100% ; height:40rem }
.slide__item , .slide__img { width:100% ; height:100%} 
.visual__container , .slide__container { position:relative }
.visual__slide { background-color:#ffffff ; margin:0 auto 4rem ; overflow:hidden } 
.slide__control , .slide__btn , .slide__pagination { position:absolute ; z-index:30 }
.slide__group { position:absolute ; z-index:10 }
.slide__item  { position:absolute ; z-index:12 ; opacity:0 }
.slide__item.now  { z-index:15 ; opacity:1}
.slide__img , .slide__img > span , .slide__img::after { display:block ; overflow:hidden ; width:100% ; height:100% } 
.slide__img > span , .slide__img::after {
    content:"" ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.slide__img > span { background:no-repeat center ; background-size:cover }
.slide__img::after  { 
    background:rgba(0,0,0,0.5) ;
    background:linear-gradient(to bottom, rgba(0,0,0,0) 0% , rgba(0,0,0,0) 10% , rgba(0,0,0,0.5) 60% , rgba(0,0,0,0.6) 100%); 
}
/*
.index1 .slide__img > span { background-image:url(../img/slide_1_MB.jpg) }
.index2 .slide__img > span { background-image:url(../img/slide_2_MB.jpg) }
.index3 .slide__img > span { background-image:url(../img/slide_3_MB.jpg) }
.index4 .slide__img > span { background-image:url(../img/slide_4_MB.jpg) }
.index5 .slide__img > span { background-image:url(../img/slide_5_MB.jpg) }
.index6 .slide__img > span { background-image:url(../img/slide_6_MB.jpg) }
.index7 .slide__img > span { background-image:url(../img/slide_7_MB.jpg) }
.index8 .slide__img > span { background-image:url(../img/slide_8_MB.jpg) }
.index9 .slide__img > span { background-image:url(../img/slide_9_MB.jpg) }
*/
.slide__box , .slide__box__link { width:100% }
.slide__box { 
    padding:0 5rem ; 
    position:absolute ; left:50% ; bottom:7rem ; transform:translateX(-50%) 
} 
.slide__box__link { text-align:center ; display:block }
.slide__box__tag , .slide__box__title { display:block }
.slide__box__tag , .slide__box__title > b , .slide__box__text > span { 
    text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
    color:#ffffff ; word-break:keep-all 
}
.slide__box__tag , .slide__box__title > b { transition:0.3s all }
.slide__box__tag { 
    display:inline-block ; background-color:#54db37 ; padding:0.2rem 1.5rem 0.4rem ; border-radius:3rem ;
    font-size:1.6rem ; line-height:2.8rem ; font-weight:600 ; color:#ffffff ;
    margin:0 auto 1rem }
.slide__box__link:hover .slide__box__tag { background-color:#111111 ; color:#54db37 }
.slide__box__title > b {  
    font-size:3rem ; line-height:4rem ; font-weight:600 ;
    border-bottom:solid 1px rgba(255,255,255,0) ;
}
.slide__box__title span { 
    font-size:inherit ; line-height:inherit ; color:inherit ;
    text-shadow:inherit ; font-weight:300 ; word-break:inherit ;
}
.slide__box__link:hover .slide__box__title > b { border-color:rgba(255,255,255,0.2) }
.slide__box__title br , .slide__box__text { display:none }
 

.slide__control , .slide__control__btn { display:block ; width:2rem ; height:2rem ; font-size:0 ; color:transparent }
.slide__control      { right:1rem ; bottom:1rem }
.slide__control__btn { position:relative }
.slide__control__btn::before , .slide__control__btn::after { 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    width:100% ; height:100% ; transition:0.3s all ;
    display:block ; content:"" ; border-radius:100% ; box-sizing:border-box ;
}
.slide__control__btn::before { background:url(../img/icon_pause_play.png) no-repeat left top ; opacity:0.5 }
.slide__control__btn::after  { border:solid 1px rgba(255,255,255,0.1)}

.slide__control__btn.play::before   { background-position:right top } 
.visual__slide.stop .slide__control__btn.play { display:block }
.slide__control__btn.play , .visual__slide.stop .slide__control__btn.pause { display:none }
.slide__control__btn:hover::before { opacity:1 ; background-color:rgba(0,0,0,0.8) }
.slide__control__btn:hover::after  { border-color:rgba(0,0,0,0) }

.slide__btn , .slide__btn::before  { transition:0.3s all }
.slide__btn {  
    font-size:0 ; color:transparent ; 
    width:4rem ; height:4rem ; border-radius:100% ;
    background-color:rgba(0,0,0,0.1) ; opacity:0 ;
    top:50% ; transform:translateY(-50%) ;
}
.slide__btn::before {
    display:block ; content:"" ; width:0.8rem ; height:0.8rem ;
    border:solid 0.1rem #ffffff ; 
    transform:translate(-50%,-50%) rotate(45deg) ;
    position:absolute ; top:50% ; opacity:0.5 ;
}
#slide_btn_prev { left:-6.5rem }
#slide_btn_next { right:-6.5rem }
.visual__slide:hover .slide__btn , .visual__slide:focus .slide__btn { opacity:1 }
.visual__slide:hover #slide_btn_prev , #slide_btn_prev:focus { left:0.5rem }
.visual__slide:hover #slide_btn_next , #slide_btn_next:focus { right:0.5rem } 

#slide_btn_prev::before   { border-right:none ; border-top:none ; left:55% }
#slide_btn_next::before   { border-left:none ; border-bottom:none ; left:45%}
.slide__btn:hover         { background-color:rgba(0,0,0,0.6) }
.slide__btn:hover::before { opacity:1 ; transform:translate(-50%,-50%) rotate(45deg) scale(1.1) }

.slide__pagination { 
    width:90% ; position:absolute ; left:50% ; bottom:1.4rem ; 
    transform:translateX(-50%) ;
    text-align:center ; font-size:0 ;
}
.slide__page { 
    display:inline-block ; width:0.8rem ; height:0.8rem ; border-radius:2rem ; 
    font-size:0 ; color:transparent ; transition:0.3s all ;
    background-color:#ffffff ; opacity:0.2 ;
    margin:0.2rem 0.5rem
}
.slide__page:hover , .slide__page.now  { opacity:1 }
.slide__page.now   { width:4rem }



/* main - banner */
.main__sec    { margin:0 auto 8rem ; width:100% ; text-align:center ; font-size:0 ; line-height:0 } 
.main__sec:last-child { margin-bottom:0 }
.main__banner , .etc__item { 
    display:inline-block ; margin:0 1% 1rem ; 
    width:48% ; max-width:32rem ; min-width:30rem  
}
.main__banner { position:relative ; height:22rem }
.main__banner::before , .main__banner::after {
    display:block ; content:"" ; width:100% ; height:100% ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.main__banner , .main__banner::before , .main__banner::after { border-radius:0.6rem ; box-sizing:border-box }
.main__banner::before { background:no-repeat center ; background-size:cover }
.main__banner::after  { border:solid 1px rgba(0,0,0,0.05) }
.main__banner.event::before        { background-image:url(../img/banner_event_MB.jpg) }
.main__banner.subscription::before { background-image:url(../img/banner_subs_MB.jpg) }



/* main - etc */ 
.etc__list { display:flex ; justify-content:center ; flex-wrap:wrap }
.etc__item , .etc__item::after { border-radius:0.6rem }
.etc__item { 
    background-color:#ffffff ; position:relative ; margin-bottom:2rem ; overflow:hidden ;
    box-shadow:0.5rem 0.5rem 0 rgba(0,0,0,0.05) ;
    padding:26.5rem 2rem 2rem ; text-align:left ;
}
.etc__item::after , .etc__img::before , .etc__img::after , .etc__more  { 
    display:block ; content:"" ; width:100% ; height:100% ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    box-sizing:border-box ;
}
.etc__item::after { border:solid 1px rgba(0,0,0,0.1) }
.etc__img { 
    display:block ; width:100% ; height:25rem ;
    position:absolute ; left:0 ; top:0 ; 
    overflow:hidden ; 
}
.etc__img::before { background:no-repeat center ; background-size:cover ; z-index:5 }
.etc__img::after  { background-color:#111111 ; opacity:0.1 ; z-index:6 }
.etc__more { 
    z-index:7 ; top:60% ; width:7rem ; height:7rem ; opacity:0 ; 
    display:block ; border-radius:100% ;
    font-size:0 ; color:transparent ;
    background:url(../img/sprite_icons.png) no-repeat left top ; background-size:auto 14rem ;
    background-color:#1663aa ; 
}
#etc__item1 .etc__img::before { background-image:url(../img/thum_img21.jpg) }
#etc__item2 .etc__img::before { background-image:url(../img/thum_img22.jpg) }
#etc__item3 .etc__img::before { background-image:url(../img/thum_img31.jpg) }
#etc__item4 .etc__img::before { background-image:url(../img/thum_img41.jpg) }

.etc__tag , .etc__title { font-weight:500 ; word-break:keep-all }
.etc__tag   { 
    display:block ; width:100% ; 
    font-size:1.4rem ; line-height:2.2rem ; color:#1663aa ;
    margin-bottom:0.5rem }
.etc__title { 
    display:inline ; border-bottom:solid 1px rgba(0,0,0,0) ;
    font-size:2rem ; line-height:2.8rem ; color:444444 
}

.etc__img::before , .etc__img::after , .etc__title , .etc__more { transition:0.3s all }
.etc__item:hover .etc__img::before { transform:translate(-50%,-50%) scale(1.1) }
.etc__item:hover .etc__img::after  { opacity:0.5 }
.etc__item:hover .etc__title       { color:#111111 ; border-color:rgba(0,0,0,0.2) } 
.etc__item:hover .etc__more        { opacity:0.9 ; top:50% }



/* main - history */
.sec_title {
    font-size:3.6rem ; line-height:4.4rem ; color:#111111 ; text-align:center ; font-weight:700 ;
    margin-bottom:3rem ; letter-spacing:-0.1rem ;
}



/* main - archive */
.archive__list { text-align:center ; font-size:0  }
.archive__link , .main__history__btn { display:none }
.archive__link { margin:0 0.5rem 2rem ; width:20rem } 
.archive__link:nth-child(1) , .archive__link:nth-child(2) , 
.archive__link:nth-child(3) , .archive__link:nth-child(4)    { display:inline-block } 
.archive__img , .archive__img::after { border-radius:0.6rem }
.archive__img {  
    display:block ; width:100% ; height:27rem ;
    position:relative;
} 
.archive__img { background:no-repeat center ; background-size:cover }
.archive__img::after  {  
    display:block ; content:"" ; width:100% ; height:100% ; box-sizing:border-box ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.archive__img::after {  border:solid 1px rgba(0,0,0,0.1) }
.archive__txt {  
    display:block ; padding:0.5rem 0.2rem 0.7rem ;
    font-size:1.6rem ; line-height:2.8rem ; text-align:center ;
    position:relative;
}
.archive__txt::after { 
    display:block ; width:0 ; height:1px ; content:"" ;
    background-color:#54db37 ;
    position:absolute; left:50% ; bottom:0 ; transform:translateX(-50%) ;
 } 
.archive__txt , .archive__img::after , .archive__txt::after { transition:0.3s all }
.archive__link:hover .archive__txt   { color:#111111 }
.archive__link:hover .archive__img::after { border:solid 0.3rem #54db37 ; opacity:0.7 }
.archive__link:hover .archive__txt::after { width:100% }  

  




@media screen and (min-width:1024px){ 

    .visual__slide , .main__sec { width:98% ; max-width:128rem }


 
    /* Visual */
    .visual__slide , .visual__container , .slide__container , .slide__group {  height:60rem }
    

    .visual__slide { overflow:inherit }
    .slide__group  { border-radius:1rem ; overflow:hidden }

    /*
    .index1 .slide__img > span { background-image:url(../img/slide_1_PC.jpg) }
    .index2 .slide__img > span { background-image:url(../img/slide_2_PC.jpg) }
    .index3 .slide__img > span { background-image:url(../img/slide_3_PC.jpg) }
    .index4 .slide__img > span { background-image:url(../img/slide_4_PC.jpg) }
    .index5 .slide__img > span { background-image:url(../img/slide_5_PC.jpg) }
    .index6 .slide__img > span { background-image:url(../img/slide_6_PC.jpg) }
    .index7 .slide__img > span { background-image:url(../img/slide_7_PC.jpg) }
    .index8 .slide__img > span { background-image:url(../img/slide_8_PC.jpg) }
    .index9 .slide__img > span { background-image:url(../img/slide_9_PC.jpg) }
    */


    .slide__box { padding:0 ; width:90% ; max-width:100rem ; bottom:auto ; top:45% }
    .slide__box__link  { text-align:left ; width:auto } 
    .slide__box__title { margin-bottom:3rem }
    .slide__box__title > b  { font-size:5rem ; line-height:7rem ; margin-bottom:3rem ; padding-bottom:0.3rem }  
    .slide__box__title br , .slide__box__text { display:block }
    .slide__box__text span { 
        font-size:1.8rem ; line-height:3rem ; word-break:keep-all ;
        border-bottom:solid 1px rgba(255,255,255,0) ;
        transition:0.3s all ; opacity:0.8 ; padding-bottom:0.4rem ; 
    }
    .slide__box__link:hover .slide__box__text span { opacity:1 ; border-color:rgba(255,255,255,0.2) }

    .slide__btn { 
        top:50% ; transform:translate(-50%,-50%) ; right:auto ; opacity:1 ; margin:0 ;
        background-color:#ffffff ;
        width:6rem ; height:6rem
    }
    #slide_btn_prev , .visual__slide:hover #slide_btn_prev , #slide_btn_prev:focus { left:0 }
    #slide_btn_next , .visual__slide:hover #slide_btn_next , #slide_btn_next:focus { left:100% } 
    .slide__btn::before { border-color:#111111 ; width:1rem ; height:1rem }
    .slide__btn::after  {
        display:block ; content:"" ; box-sizing:border-box ;
        width:100% ; height:100% ; box-shadow:0 0.2rem 0.3rem rgba(0,0,0,0.2) ;
        border-radius:100% ; border:solid 1px rgba(0,0,0,0.05)
    }
    .slide__btn:hover { background-color:#ffffff }



    /* main */
    .main__sec { margin-bottom:10rem }
    #sec_banner::after  { display:block ; content:"" ; clear:both } 
    .main__banner       {  margin:0 ; height:16rem }
    .main__banner.event { float:left ; width:52.3437% ; max-width:67rem}
    .main__banner.subscription { float:right ; width:45.3125% ; max-width:58rem }
    .main__banner.event::before        { background-image:url(../img/banner_event_PC.jpg) }
    .main__banner.subscription::before { background-image:url(../img/banner_subs_PC.jpg) }
    .main__banner , .main__banner::before , .main__banner::after { border-radius:1.2rem }



    /* main - etc */ 
    .etc__list { justify-content:space-between ; flex-wrap:nowrap }
    .etc__item { margin:0 ; width:23.8281% ; min-width:auto }



    /* main - archive */
    .archive__container , .archive__list , .archive__slide { width:100% ; position:relative }
    .archive__container { padding:0 4rem }
    .archive__list      { overflow:hidden ; padding:0.5rem 0 }
    .archive__list , .archive__slide  { height:32rem }

    .archive__link , .archive__link:nth-child(1) , .archive__link:nth-child(2) , 
    .archive__link:nth-child(3) , .archive__link:nth-child(4)  { display:block ; margin:0 }
    .archive__link { position:absolute ; top:0 ; width:16.6666% ; max-width:20rem }

  
    .main__history__btn , .main__history__btn::before { transition:0.3s all }
    .main__history__btn { 
        display:block ; width:4rem ; height:4rem ; 
        position:absolute ; top:45% ; transform:translateY(-50%) ;
        font-size:0 ; color:transparent 
    }
    .main__history__btn::before {
        display:block ; content:"" ; width:1.2rem ; height:1.2rem ; box-sizing:border-box ;
        border:solid 1px #111111 ; opacity:0.5 ;
        position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) rotate(45deg) ;
    } 
    .main__history__btn.prev { left:1rem }
    .main__history__btn.next { right:1rem }

    .main__history__btn.prev::before  { border-top:none ; border-right:none ; left:55% }
    .main__history__btn.next::before  { border-bottom:none ; border-left:none ; left:45% }

    .main__history__btn:hover::before { opacity:1 ; transform:translate(-50%,-50%) rotate(45deg) scale(1.1) }
 


    /* main - archive */
    .archive__txt , .archive__link:hover .archive__txt { color:#ffffff } 



    /* footer */
    #footer { padding-top:15rem ; margin-top:-10rem }
    #main   { margin-bottom:0}
} 
    
@media print { 
     
}