@charset "utf-8";


/* POPUP */
body { overflow:auto }
body.popup { overflow:hidden }
.popup #KIIP_popup { display:block }
#KIIP_popup , #KIIP_popup_inner , #KIIP_popup_btn , #KIIP_popup_today { width:100% ; box-sizing:border-box }
#KIIP_popup { 
    overflow:hidden ; display:none ; height:100vh ;
    background-color:rgba(0,0,0,0.6) ;
    position:fixed ; left:0 ; top:0 ; z-index:120 ;
}
#KIIP_popup_inner {
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    width:96% ; max-width:60rem ; overflow:hidden ; border-radius:0.4rem ;
}
#KIIP_popup_inner img { width:100% }
#KIIP_popup_close {  
    width:2rem ; height:2rem ; display:block ;  
    position:absolute ; left:0.5rem ; top:0.5rem ;
    font-size:0 ; color:transparent ; opacity:0.8 ;
}
#KIIP_popup_close::before , #KIIP_popup_close::after { 
    display:block ; content:"" ; width:2rem ; height:0.1rem ;
    background-color:#000000 ; transition:0.3s all ;
    position:absolute ; left:50% ; top:50%
}
#KIIP_popup_close::before { transform:translate(-50%,-50%) rotate(45deg) }
#KIIP_popup_close::after  { transform:translate(-50%,-50%) rotate(-45deg) } 
#KIIP_popup_close:hover::before { transform:translate(-50%,-50%) rotate(135deg) }
#KIIP_popup_close:hover::after  { transform:translate(-50%,-50%) rotate(45deg) }

#KIIP_popup_btn , #KIIP_popup_btn > span , #KIIP_today_close { transition:0.3s all }
#KIIP_popup_btn { 
    display:block ;
    background-color:#000000 ; text-align:center ;
    padding:1.3rem 0.5rem 1.5rem ;
}
#KIIP_popup_btn > span { 
    display:inline-block ; letter-spacing:-0.1rem ; padding-left:2.5rem ;
    font-size:1.8rem ; line-height:2.4rem ; font-weight:500 ; color:#ffffff ;
    background:url(../img/popup_icon.png) no-repeat left center ; background-size:1.8rem auto ;
}
#KIIP_popup_btn:hover { background-color:#000000 }
#KIIP_popup_btn:hover > span { color:#fdc036 ; background:none ; padding:0 }

#KIIP_popup_today { overflow:hidden ; background-color:#ffffff }
#KIIP_popup_today input { margin:1rem 0.3rem 0 1rem }
#KIIP_popup_today label { font-size:1.4rem ; line-height:2rem ; margin-top:0.7rem ; display:inline-block }
#KIIP_today_close {
    font-size:1.4rem ; line-height:2rem ; color:#ffffff ;
    background-color:#007f60 ; padding:0.8rem 1.5rem 1rem ; 
    display:block ; float:right ;
}
#KIIP_today_close:hover { background-color:#111111 }



/* MAIN */
#main { margin-bottom:5rem }



/* VISUAL */
.visual , .visual::before , .visual::after { width:100% ; height:35rem }
.visual { 
    margin-bottom:5rem ; position:relative ;
    overflow:hidden ; 
}
.visual::before , .visual::after {
    display:block ; content:"" ;
    position:absolute ; left:50% ; top:50% ; 
    transform:translate(-50%,-50%) scale(1.2)
}
.visual::before { 
    background:url(../img/main_thum_00_MB.jpg) no-repeat center ; background-size:cover ; 
    z-index:5 ;
    animation-name:main_visual ;
    animation-delay:0.5s ;
    animation-duration:60s ;
    animation-iteration-count:infinite 
} 
@keyframes main_visual { 
    0%   { transform:translate(-50%,-50%) scale(1.2) }   
    45%  { transform:translate(-50%,-50%) scale(1) }       
    50%  { transform:translate(-50%,-50%) scale(1) }    
    95%  { transform:translate(-50%,-50%) scale(1.2) } 
    100% { transform:translate(-50%,-50%) scale(1.2) }   
}
.visual::after { background-color:rgba(0,0,0,0.3) ; z-index:6 }

.visual__info , .visual__main { 
    position:absolute ; left:50% ; z-index:7 ; transform:translateX(-50%) ; 
    text-align:center ; display:block ; 
}
.visual__info { top:9rem ;  width:20rem } 

.visual__title , .visual__date , .visual__main { color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) }
.visual__title , .visual__date { position:relative }
.visual__title , .visual__date { 
    display:inline-block ; overflow:hidden ; position:relative ;
    font-size:1.8rem ; line-height:3.4rem ; font-weight:600 ; 
}
.visual__title::before , .visual__date::before {
    width:100% ; height:0.2rem ; display:block ; content:"" ;
    background-color:#67b828 ;
    position:absolute ; right:0 ; bottom:0 ;
}

.visual__main {  
    font-size:4rem ; line-height:5rem ; font-weight:600 ; text-align:center ; word-break:keep-all ;
    letter-spacing:-0.02rem ; top:19rem ;
    width:90% ; margin:auto ; 
}
.visual__main > br { display:none } 
 
.visual_ani_btn , .visual_ani_paused , .visual_ani_play { width:2rem } 
.visual_ani_btn { position:absolute ; right:1rem ; bottom:1rem ; z-index:7 }
.visual_ani_btn::after { display:block ; content:"" ; clear:both }
.visual_ani_paused , .visual_ani_play { 
    display:block ; overflow:hidden ; height:2rem ; border-radius:100% ; 
    font-size:0 ; color:transparent ; 
    border:solid 1px rgba(255,255,255,0.2) ; opacity:0.5 ;
    background:url(../img/btn_PP.png) no-repeat ;
    transition:0.3s all ;
}
.visual_ani_paused:hover , .visual_ani_play:hover , 
.visual_ani_paused:focus , .visual_ani_play:focus  { opacity:1 } 
.visual_ani_paused { background-position:-1px -1px } 
.visual_ani_play   { background-position:-21px -1px ; display:none } 

.visual.paused::before { animation-play-state:paused }
.visual.paused .visual_ani_paused { display:none }
.visual.paused .visual_ani_play   { display:block }



/* MAIN THEME */
.mainTheme , .inInfo , .libraryNews { 
    font-size:0 ;
    width:100% ; margin-bottom:5rem ; padding:0  2rem ; box-sizing:border-box } 
.mainTheme::after { display:block ; content:"" ; clear:both }     
.mainTheme , .inInfo { margin-bottom:4rem }  
.mainTheme { text-align:center ; font-size:0 } 
.MT__title , .II__title , .lib__title , .news__title { 
    font-size:2rem ; line-height:2.6rem ; color:#999999 ; font-weight:600 ; 
    text-align:center ; letter-spacing:-0.1rem ; margin-bottom:1rem ; 
}

.MT__item__tag { 
    display:block ; padding:0.3rem 2rem 0.5rem 1rem  ; background-color:#67b828 ;
    font-size:1.4rem ; line-height:1.8rem ; color:#ffffff ; font-weight:500 ; 
    text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ; border-radius:0 2rem 2rem 0.4rem ;
    position:absolute ; left:0 ; top:17.4rem ;
    transition:0.3s all ;
}
.MT__item:hover .MT__item__tag {
    background-color:#111111 ; 
    color:#9ae410
}

.MT__item { width:100% ; position:relative ; display:inline-block ; text-align:left } 
.MT__item__img {
    display:block ; overflow:hidden ; width:100% ; height:20rem ;    
    position:relative ; border-radius:0.6rem
}
.MT__item__img::before , .MT__item__img::after , .MT__item__link { 
    width:100% ; height:100% ; display:block ; box-sizing:border-box ;
    position:absolute
}
.MT__item__img::before , .MT__item__img::after { 
    content:"" ; transition:0.3s all ; 
    left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.MT__item__img::before { background:no-repeat center top ; background-size:cover}
.MT__item__img::after  { background-color:rgba(0,0,0,0.1) }
.MT__item:hover .MT__item__img::before { transform:translate(-50%,-50%) scale(1.1) }
.MT__item:hover .MT__item__img::after  { background-color:rgba(0,0,0,0.3) }

.MT__item__title { 
    display:block ; width:100% ;  padding:0.5rem ; box-sizing:border-box ;
    font-size:2rem ; line-height:2.6rem ; font-weight:600 ;  
    word-break:keep-all ; letter-spacing:-0.1rem ;
}
.MT__item__write { font-size:1.4rem ; line-height:1.8rem ; color:#444444 ; padding:0 0.5rem }
.MT__item:hover .MT__item__title { color:#111111}

.MT__item__title > br { display:none }
.item13 .MT__item__title > br { display:block }

.MT__item__link { left:0 ; top:0 }
.MT__item__link::before , .MT__item__link::after {
    display:block ; content:"" ; overflow:hidden ; border-radius:100% ;
    width:6rem ; height:6rem ; 
    position:absolute ; left:50% ; top:14rem ; transform:translate(-50%,-50%) ;
    transition:0.3s all ; opacity:0 ;
}
.MT__item__link::before { background-image:linear-gradient(#67b828,#73be38) }
.MT__item__link::after  { background:url(../img/icon_more.png) no-repeat center ; background-size:3rem auto }

.MT__item:hover .MT__item__link::before , .MT__item:hover .MT__item__link::after ,
.MT__item:focus .MT__item__link::before , .MT__item:focus .MT__item__link::after  { opacity:1 ; top:10rem }
.MT__item:hover .MT__item__link::before , .MT__item:focus .MT__item__link::before { opacity:0.8 }

.item11 { margin-bottom:2rem ; max-width:60rem }
.item12 , .item13 { margin:0.5rem 1%}
.item12 { width:58% }
.item13 { width:38% ; max-width:22rem }

.item11 .MT__item__img::before { background-image:url(../img/main_thum_11_MB.jpg) }
.item12 .MT__item__img::before { background-image:url(../img/main_thum_12.jpg) }
.item13 .MT__item__img::before { background-image:url(../img/main_thum_13.jpg) }



/* IP INFO */
.II__list , .II__item , .II__item__link , .II__item__title { width:100% ; box-sizing:border-box ; display:block }
.II__list { 
    border-radius:0.6rem ; border:solid 1px rgba(0,0,0,0.1) ;
    padding:0.5rem 1.5rem ;
}
.II__item__link {
    padding:1rem 0 ; border-bottom:solid 2px #67b828 ;
    position:relative ;
}
.II__item:last-child .II__item__link { border-bottom:none }
.II__item__img , .II__item__title > br { display:none } 
.II__item__tag { font-size:1.4rem ; line-height:2rem ; color:#636363 }
.II__item__title { 
    font-size:1.8rem ; line-height:2.4rem ; font-weight:600 ; color:#444444 ;
    word-break:keep-all ;
}
.II__item__link::after {
    display:block ; content:"" ; width:3rem ; height:1rem ;
    background:url(../img/slide_more_MB.png) no-repeat center ; background-size:cover ;
    position:absolute ; right:0 ; top:1.4rem ;
    opacity:0.3 ;
}
.II__item__tag , .II__item__title , .II__item__link::after { transition:0.3s all }
.II__item__link:hover .II__item__tag , .II__item__link:hover .II__item__title , 
.II__item__link:focus .II__item__tag , .II__item__link:focus .II__item__title { color:#000000 }
.II__item__link:hover::after , .II__item__link:focus::after { opacity:0.7 ; right:1.5rem }



/* LIBRARY */
.library { margin-bottom:5rem ; text-align:center } 
.lib__item {
    display:inline-block ; width:48% ; margin:0 1% ;
    max-width:16rem ; overflow:hidden ;
}
.lib__item__link { 
    display:block ;  width:100% ; height:18rem ; border-radius:0.6rem ;
    position:relative ; margin-bottom:1.5rem ;
}
.item31 .lib__item__link { background-image:linear-gradient(#ca863a,#e1943c) }
.item32 .lib__item__link { background-image:linear-gradient(#78aa33,#91d13c) }
.lib__item__img { 
    display:block ; width:16rem ; height:14rem ; transition:0.3s all ;
    background:no-repeat center ; background-size:cover ;
    position:absolute ; left:50% ; top:5rem ; transform:translateX(-50%) ;
}
.item31 .lib__item__img { background-image:url(../img/main_thum_31_illust.png) }
.item32 .lib__item__img { background-image:url(../img/main_thum_32_illust.png) }
.lib__item__tag {
    display:block ; padding-top:1.5rem ;
    font-size:2.2rem ; line-height:2.6rem ; color:#ffffff ; font-weight:600 ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
}
.lib__item__link:hover .lib__item__img , .lib__item__link:focus .lib__item__img {
    transform:translateX(-50%) scale(1.1)
}



/* NEWS */
.news { text-align:center }
.news , .news__item , .news__item__img , .news__item__img::after ,
.news__item__list , .news__item__li , .news__item__link { width:100% ; box-sizing:border-box }
.news__item { display:inline-block ; max-width:26rem ; margin:0 0.5rem 3rem ; position:relative }
.news__item:last-child { margin-bottom:0 }
.news__item__tag { 
    display:block ; margin-bottom:1rem ;
    font-size:1.4rem ; line-height:1.8rem ; font-weight:500 ; color:#444444 ; text-align:left ;
}
.news__item__img , .news__item__img::before , .news__item__img::after ,
.news__item__tag , .news__item__more , .news__link__more ,
.news__link__more::before , .news__link__more::after { transition:0.3s all }
.news__item__img , .news__item__img::before , .news__item__img::after , .news__item__list { overflow:hidden ; border-radius:0.6rem ; display:block }
.news__item__img , .news__item__img::before , .news__item__img::after , .news__item__list.img { height:18rem }
.news__item__img { 
    position:relative ; overflow:hidden ;
    font-size:0 ; color:transparent
}

.news__item__img::before , .news__item__img::after { 
    content:"" ; display:block ; width:100% ; height:100% ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;

} 
.news__item__img::before {  
    background:url(../img/main_thum_41.jpg) no-repeat center ; background-size:cover 
}
.news__item__img::after { border:solid 0.4rem #67b828 ; opacity:0 }
/* .news__item__img:hover:before , .news__item__img:focus:before { transform:translate(-50%,-50%) scale(1.05) } */
.news__item__img:hover:after , .news__item__img:focus:after { opacity:1 }
.news__item__more {
    display:inline-block ; overflow:hidden ; border-radius:2rem ; padding:0.2rem 1rem 0.4rem ;
    font-size:1.1rem ; line-height:1.4rem ; font-weight:600 ; color:#ffffff ; 
    text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ; background-color:rgba(0,0,0,0.3) ;
    position:absolute  ; top:0
} 
.news__item:hover .news__item__tag , .news__item:focus .news__item__tag   { color:#111111 }
.news__item:hover .news__item__more , .news__item:focus .news__item__more { background-color:#111111 }
.item41 .news__item__more { left:6.5rem }
.item42 .news__item__more { left:7.6rem }

.news__item__list { border:solid 1px rgba(0,0,0,0.1) ; padding:1rem 2rem }
.news__item__link {
    display:block ; position:relative ; 
    font-size:1.8rem ; line-height:2.4rem ; font-weight:500 ; color:#444444 ; text-align:left ;
    word-break:keep-all ; padding:1rem 0 ;
    border-bottom:solid 2px #444444 ;
}
.news__item__link > br { display:none }
.news__item__li:last-child .news__item__link { border-bottom:none }
.news__link__more { 
    display:block ; width:1rem ; height:1rem ; opacity:0.2 ;
    position:absolute ; right:0 ; bottom:2rem    
}
.news__link__more::before , .news__link__more::after {
    display:block ; content:"" ; width:1rem ; height:0.2rem ; 
    background-color:#000000 ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.news__link__more::before { transform:translate(-50%,-50%) rotate(90deg) } 
.news__item__link:hover .news__link__more , .news__item__link:focus .news__link__more { opacity:0.7 }
.news__item__link:hover .news__link__more::before , .news__item__link:focus .news__link__more::before { transform:translate(-50%,-50%) rotate(180deg) } 
.news__item__link:hover .news__link__more::after , .news__item__link:focus .news__link__more::after   { transform:translate(-50%,-50%) rotate(90deg) } 

.news__item__list.img { position:relative ; border:none }
.img .news__item__li , .img .news__item__link { 
    width:100% ; height:100% ; box-sizing:border-box ; padding:0 ; margin:0 ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) scale(1.01) ;
}
.img .news__item__link {
    font-size:0 ; color:transparent ; line-height:0 ;
    background:url(../img/main_thum_42.jpg) no-repeat center ; background-size:cover ;
    transition:0.3s all ;
}
.img .news__item__link:hover { transform:translate(-50%,-50%) scale(1.05) }
.img .news__link__more { display:none }



/* PC **********/
@media all and (min-width:1100px){

    /* MAIN */
    .main__inner::after { display:block ; content:"" ; clear:both } 
 


    /* VISUAL */
    .visual { width:31% ; height:70rem ; margin:0 ; float:left ; border-radius:0.6rem } 
    .visual::before , .visual::after { width:100% ; height:100% }
    .visual::before { background-image:url(../img/main_thum_00.jpg) }

    .visual__info , .visual__main { left:auto ; right:15% ; transform:none ; text-align:right }
    .visual__info  { top:5rem } 
    .visual__main { 
        width:84% ; top:17rem ;
        font-size:4.6rem ; line-height:6rem ; font-weight:600 ;  
        letter-spacing:-0.2rem ;   
    }
    .visual__main > br { display:block } 



    /* MAIN THEME */    
    .mainTheme , .inInfo , .libraryNews { width:66% ; margin:0 ; padding:0 ; float:right ; background-color:#ffffff } 
    .mainTheme { height:30rem ; margin:0 }

    .MT__title , .II__title , .lib__title , .news__title { 
        width:0 ; overflow:hidden ; opacity:0 ;
        position:absolute ; right:0 ; z-index:-1 ;
        font-size:1.4rem ; line-height:2rem ; text-align:left ; color:rgba(0,0,0,0.3)
    }
    .MT__title , .lib__title { 
        padding-bottom:1rem ; top:23rem ;  
        border-bottom:solid 1px rgba(0,0,0,0.1) ;
    }
    .MT__item { margin:0 ; display:block }
    .item11 , .item12 , .item13 { float:left }
    .item11 , .item12 { margin-right:0.5%}
    .item11 { width:42% } 
    .item12 { width:33% } 
    .item13 { width:24% } 
 
    .item11 .MT__item__img::before { background-image:url(../img/main_thum_11.jpg) } 
    .MT__item__title { font-size:1.8rem ; line-height:2.4rem }

    .MT__item__title > br { display:block }
    .item11 .MT__item__title > br { display:none }



    /* IP INFO */
    .inInfo { margin-bottom:3.2rem }
    .II__title { border-top:solid 1px rgba(0,0,0,0.1) ; padding-top:0.5rem }
    .II__list  { 
        border:0 ; padding:0 ;background:#ffffff; overflow:hidden ; 
        display:flex ; flex-wrap:wrap
    } 
    .II__item , .II__item__link  { padding:0 }
    .II__item { height:16rem ; flex:1 ; position:relative ; transition:0.5s all }
    .II__item::after { 
        display:block ; content:"" ;
        width:1px ; height:100% ; background-color:#ffffff ; opacity:0.05 ;
        position:absolute ; left:0 ; top:0
    }
    .II__item__link { border:none ; background:#eee ; height:100% }
    .II__item__img , .II__item__img::after { transition:0.3s all }
    .II__item__img , .II__item__img::after { width:100% ; height:100% }
    .II__item__img { 
        position:relative ; display:block ;
        background:no-repeat center ; background-size:cover ;
    }
    .II__item__img::after {
        display:block ; content:"" ; background-color:rgba(0,0,0,0.5) ;
        position:absolute ; left:0 ; top:0
    }
    .item21 .II__item__img { background-image:url(../img/main_thum_21.jpg) } 
    .item22 .II__item__img { background-image:url(../img/main_thum_22.jpg) } 
    .item23 .II__item__img { background-image:url(../img/main_thum_23.jpg) } 

    .item21:hover .II__item__img , .item21:focus .II__item__img { background-image:url(../img/main_thum_21_wide.jpg) } 
    .item22:hover .II__item__img , .item22:focus .II__item__img { background-image:url(../img/main_thum_22_wide.jpg) } 
    .item23:hover .II__item__img , .item23:focus .II__item__img { background-image:url(../img/main_thum_23_wide.jpg) } 

    .II__item__tag , .II__item__title {
        position:absolute ; ; left:0 ;
        padding-left:1rem ; box-sizing:border-box ;
    }
    .II__item__tag { 
        display:block ; padding:0.3rem 2rem 0.5rem 1rem  ; background-color:#ffffff ;
        font-size:1.4rem ; line-height:1.8rem ; color:#1891e5 ; font-weight:500 ; 
        border-radius:0 2rem 2rem 0.4rem ;
        position:absolute ; top:5.5rem ;   
    }  
    .II__item__tag::after {
        display:block ; content:"" ; width:2rem ; height:1rem ;
        background:url(../img/slide_more.png) no-repeat center ; background-size:2rem auto ;
        position:absolute ; right:0 ; top:45% ; transform:translateY(-50%) ;
        opacity:0 ; transition:0.3s all ;
    } 
    .II__item__title { 
        top:8.5rem ; width:96% ;
        color:#ffffff ; font-size:1.8rem ; line-height:2.4rem ; font-weight:500 ;
        word-break:keep-all ;
    }
    .II__item__title::after , .II__item__link::after , .II__item__title > br { display:none } 

    .II__item__link:hover .II__item__tag , .II__item__link:hover .II__item__title , 
    .II__item__link:focus .II__item__tag , .II__item__link:focus .II__item__title   { color:#ffffff ; padding-left:2rem } 
    .II__item__link:hover .II__item__tag , .II__item__link:focus .II__item__tag { 
        padding-right:4rem ; padding-left:1.2rem ; border-radius:2rem ; left:1rem ; 
        font-weight:500 ; color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
        background-color:#1891e5 ;
    }
    .II__item__link:hover .II__item__tag::after , .II__item__link:focus .II__item__tag::after { opacity:1 ; right:1rem }
 
    .II__item__link:hover .II__item__title , .II__item__link:focus .II__item__title { font-size:2.2rem ; line-height:2.8rem }  
    .II__item:hover , .II__item:focus { flex:2 } 

    .II__item__title > br ,
    .II__item:hover .II__item__title > br { display:block }
    


    /* LIBRARY */
    .libraryNews::after , .library::after , .news::after { display:block ; content:"" ; clear:both } 
    .lib__title { top:57.1rem}
    .library { margin:0 ; width:37% ; float:left ; padding-top:2.8rem }
    .lib__item { margin:0 ; width:49.5% }
    .item31 , .item41  { float:left }
    .item32 , .item42  { float:right }



    /* NEWS */
    .news { width:61% ; float:right } 
    .news__title { top:61.1rem }
    .news__item__link { line-height:2.4rem  ; padding:1.5rem 0 }
    .news__item__link > br { display:block }
    .news__item { display:block ; margin:0 ; width:49.5% } 
    .news__item__list { min-height:18rem }
   
} 


/* FULL **********/
@media all and (min-width:1600px){
    .MT__title , .II__title , .lib__title , .news__title { width:12rem ; opacity:1 }
}