@charset "utf-8";
/* index.jsp */
 
/* VISUAL */
#K_visual { 
    display:block ; overflow:hidden ; transition:0.3s all ;
    width:100% ; height:40rem ; box-sizing:border-box ; position:relative ;
    background:url(../img/main_visual_MB.jpg) no-repeat center ; background-size:cover }
#K_visual::before {
    display:block ; overflow:hidden ; content:"" ;
    width:100% ; height:100% ; background-color:rgba(0,0,0,0.3) ;
    position:absolute ; left:0 ; top:0
}
#K_theme_bg { 
    display:block ; overflow:hidden ; width:70rem ; height:70rem ; border-radius:100% ;
    position:absolute ; right:7% ; bottom:14% ; opacity:0.8 ; 
    transition:0.3s all ;
    background:rgb(18,107,150);    
    background:linear-gradient(to bottom, rgba(18,107,150,1) 50%,rgba(85,145,63,1) 100%);    
} 

#K_theme , #K_theme > b , #K_theme > strong { width:100% ; box-sizing:border-box }
#K_theme > b , #K_theme > strong { 
    display:block ; word-break:keep-all ;
    text-align:center ; color:#ffffff ; text-shadow:0 0 0.2rem rgba(0,0,0,0.2) ; }
#K_theme { position:absolute ; left:0 ; top:45% ; transform:translateY(-50%) } 
#K_theme > b { font-size:2rem ; line-height:2.4rem ; font-weight:300 ; margin-bottom:1.2rem } 
#K_theme > strong { font-size:4rem ; line-height:4.4rem ; font-weight:600 ; letter-spacing:-0.2rem }



/* VISUAL SCROLL */
#KM_scroll { display:none }



/* MAIN THEME */
#KM_theme , #KM_theme_list , .KM_theme_box , .KM_theme_title , .KM_theme_title  > p { width:100% ; box-sizing:border-box }
#KM_theme { margin-bottom:7rem }
.KM_theme_box { height:14rem ; position:relative }
.KM_theme_title { padding:0 0.5rem 0 1.5rem ; position:absolute ; left:0 ; top:50% ; transform:translateY(-50%) }
.KM_theme_box::before , .KM_theme_link { position:absolute ; left:0 ; top:0 ; display:block ; content:"" ; width:100% ; height:100% }
.KM_theme_box::before { background-color:rgba(0,0,0,0.4) }
.KM_theme_box { background:no-repeat center ; background-size:cover }
.KM_theme_box:nth-child(1) { background-image:url(../img/theme1_img_MB.jpg) }
.KM_theme_box:nth-child(2) { background-image:url(../img/theme2_img_MB.jpg) }
.KM_theme_box:nth-child(3) { background-image:url(../img/theme3_img_MB.jpg) }
.KM_theme_title  > p { 
    font-size:1.4rem ; line-height:2rem ; color:#ffffff ;  word-break:keep-all ;
    padding-top:0.5rem ; opacity:0.8 }
.KM_theme_title  > p > br { display:none }    

.KM_theme_link { font-size:0 ; color:transparent }
.KM_theme_title > b { 
    display:inline-block ; overflow:hidden ; padding:0 1rem 0.2rem 1rem ; border-radius:2rem ;
    background-color:#36caff ; margin-bottom:0.5rem ; letter-spacing:-0.05rem ;
    font-size:1.4rem ; line-height:2rem ; color:#000000 ; font-weight:400 ;
 }
.KM_theme_title > span > br { display:none }
.KM_theme_title > span {
    display:block ; opacity:0.8 ;
    font-size:2rem ; line-height:2.6rem ; color:#ffffff ; font-weight:500 ; letter-spacing:-0.1rem ; 
    text-shadow:0 0 0.2rem rgba(0,0,0,0.3) ; word-break:keep-all ;
}
.KM_theme_box , .KM_theme_box::before , .KM_theme_title > b , .KM_theme_title > span { transition:0.3s all }
.KM_theme_box:hover::before { background-color:rgba(0,0,0,0.7) }
/* .KM_theme_box:hover { background-size:115% auto } */
.KM_theme_box:hover .KM_theme_title > span { opacity:1 }



/* ETC */
#KM_etc , #KM_etc_inner , #KM_info ,
.KM_info_box , .KM_info_title , .KM_info_title > h6 , .KM_info_title > p { width:100% ; box-sizing:border-box }
#KM_etc_inner { position:relative }
#KM_etc { padding:0 2rem }
.KM_etc_title { 
    font-size:2.4rem ; line-height:3rem ; font-weight:600 ; color:#111111 ; letter-spacing:-0.15rem ;
    text-align:center ; padding-bottom:1rem ; border-bottom:solid 1px rgba(0,0,0,0.1) ;
}
.KM_info_box , .KM_info_box > b , .KM_info_title > h6 , .KM_info_box::after , .KM_info_link::after { transition:0.3s all }
#KM_info  { margin-bottom:6rem }
.KM_info_box { padding:1.5rem 0.3rem ; padding-right:3rem ; position:relative ; border-bottom:solid 0.1rem rgba(0,0,0,0.1) }
.KM_info_box > b { 
    display:block ; margin-bottom:0.5rem ; 
    font-size:1.2rem ; line-height:1.8rem ; font-weight:400 ; color:#444444 } 
.KM_info_title > h6 { 
    display:block ; overflow:hidden ;
    font-size:2rem ; line-height:2.6rem ; font-weight:400 ; text-align:left ; word-break:keep-all ;
    letter-spacing:-0.05rem ; color:#000000
} 
.KM_info_title > p { display:none }
.KM_info_link {
    display:block ; width:100% ; height:100% ;
    position:absolute ; left:0 ; top:0 ;
    font-size:0 ; color:transparent
}

.KM_info_box.active { border-color: #5ea129 }
.KM_info_box.active .KM_info_title > h6 { color:#5ea129 }
.KM_info_title > h6 br { display:none }
.KM_info_box::after {
    display:block ; content:"" ; width:0 ; height:0.1rem ;
    background-color:#5ea129 ;
    position:absolute ; left:50% ; bottom:0 ; transform:translateX(-50%) ;
}
.KM_info_box.active::after { width:100% }
.KM_info_link::after { 
    width:2.5rem ; height:1.5rem ; display:block ; overflow:hidden ; content:"" ;
    background:url(../img/icon_arrow.png) no-repeat center ; background-size:2.5rem ;
    position:absolute ; right:2rem ; bottom:1.8rem ; opacity:0 ;
}
.KM_info_box.active .KM_info_link::after { right:0.3rem ; opacity:0.3 }



/* KIIP LIB */
#KM_lib { width:100% ; box-sizing:border-box ; font-size:0 ; text-align:center ; margin-bottom:6rem }
#KM_lib > .KM_etc_title { border-color:transparent } 
.KM_data { 
    display:inline-block ; overflow:hidden ; margin:0 0.3rem 2rem 0.3rem ; 
    width:18rem ; height:27rem ; overflow:hidden ; border-radius:0.4rem } 

.KM_data , .KM_data::before , .KM_data_link > span , .KM_data_link > span::before , .KM_data_link > span::after ,
.KM_data_title > h3 , .KM_data_title > p { transition:0.3s all }
.KM_data { 
    position:relative;
    background:url(../img/book2.jpg) no-repeat center #ccc ; background-size:18rem auto ; 
}
.KM_data.book { background-image:url(../img/book1.jpg) }
.KM_data::before {
    display:block ; overflow:hidden ; content:"" ;
    width:100% ; height:100% ; background-color:#000000 ; opacity:0.5 ;
    position:absolute ; left:0 ; top:0
}
.KM_data:hover { background-size:20rem auto }
.KM_data:hover::before { opacity:0.7 }
.KM_data_title , .KM_data_title > h3 , .KM_data_title > p { width:100% ; box-sizing:border-box ; display:block }
.KM_data_title { 
    padding:0 1rem ;
    position:absolute ; left:0 ; top:50% ; transform:translateY(-50%) ;
}
.KM_data_title > h3 , .KM_data_title > p { text-align:center ; color:#ffffff ; word-break:keep-all ; text-shadow:0 0 0.2rem rgba(0,0,0,0.3) }
.KM_data_title > h3 { font-size:2.6rem ; line-height:3rem ; font-weight:600 ; margin-bottom:2rem }
.KM_data_title > p { font-size:1.2rem ; line-height:1.8rem ; opacity:0.7 ; height:5.4rem } 
.KM_data_link ,  .KM_data_link > span { display:block ; overflow:hidden ; position:absolute }
.KM_data_link { width:100% ; height:100% ; left:0 ; top:0 }
.KM_data_link > span { 
    font-size:0 ; color:transparent ; width:2.5rem ; height:2.5rem ;
    left:50% ; bottom:1.6rem ; transform:translateX(-50%) ; opacity:0.8 ;
}
.KM_data:hover .KM_data_title > p { opacity:1 }
.KM_data_link > span::before , .KM_data_link > span::after {
    display:block ; content:"" ; width:1.8rem ; height:0.2rem ; 
    background-color:#85e13d ; position:absolute ; left:50% ; top:50%
}
.KM_data_link > span::before { transform:translate(-50%,-50%) rotate(0deg) }
.KM_data_link > span::after  { transform:translate(-50%,-50%) rotate(90deg) }

.KM_data:hover .KM_data_link > span , .KM_data .KM_data_link:focus > span { opacity:1 }
.KM_data:hover .KM_data_link > span::before , 
.KM_data .KM_data_link:focus > span::before { transform:translate(-50%,-50%) rotate(90deg) ; width:2.4rem }
.KM_data:hover .KM_data_link > span::after ,
.KM_data .KM_data_link:focus > span::after { transform:translate(-50%,-50%) rotate(180deg) ; width:2.4rem }



/* NEWS */
#KM_news .KM_news_box , .KM_news_box > h3 , .KM_news_box > p { width:100% ; box-sizing:border-box ; overflow:hidden }
.KM_news_box , .KM_news_box > h3 , .KM_news_box > p , .KM_news_link::before , .KM_news_box::after { transition:0.3s all } 
#KM_news  { margin-bottom:5rem ; text-align:center }
.KM_news_box { 
    max-width:48rem ; display:inline-block ; text-align:left ; background:url(../img/board_bg.gif) repeat-y left top ;
    padding:1.5rem 1rem 1.5rem 7rem ; margin:0.5rem ;
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ; position:relative }
#KM_notice , #KM_briefing { background-color:#ffffff }   
.KM_news_box > h3 { 
    font-size:1.4rem ; line-height:2rem ; font-weight:500 ;
    padding-bottom:0.5rem ; margin-bottom:0.7rem ; border-bottom:solid 1px rgba(0,0,0,0.1) }
.KM_news_box > p { font-size:1.8rem ; line-height:2.6rem ; font-weight:400 ; word-break:keep-all ; letter-spacing:-0.1rem ; color:rgba(0,0,0,0.6) }
.KM_news_box > p > br { display:none }
.KM_news_box::before , .KM_news_box::after { display:block ; content:"" ; width:5rem ; height:100% ; position:absolute ; left:0 ; top:0 }
.KM_news_box::before {  
    background: rgb(89,141,48);    
    background: linear-gradient(to bottom,  rgba(89,141,48,1) 0%,rgba(121,191,65,1) 100%);     
}
.KM_news_box::after { background:url(../img/icon_speak_w.png) no-repeat center ; background-size:3rem auto ; opacity:0.6 }
#KM_briefing.KM_news_box::before { 
    background: rgb(1,33,78);   
    background: linear-gradient(to bottom,  rgba(1,33,78,1) 0%,rgba(1,44,106,1) 100%);   
}
#KM_briefing.KM_news_box::after { background-image:url(../img/icon_board_w.png) }
.KM_news_link {
    display:block ; width:100% ; height:100% ; 
    font-size:0 ; color:transparent ; position:absolute ; left:0 ; top:0
}
.KM_news_box > p > br { display:none }
.KM_news_link:focus { border:solid 0.2rem #5ea129 ; box-sizing:border-box } 
#KM_briefing .KM_news_link:focus { border-color: #012353;}
.KM_news_link::before {
    display:block ; content:"" ; width:3rem ; height:1.5rem ;
    position:absolute ; left:14rem ; top:1.5rem ; opacity:0 ;
    background:url(../img/icon_arrow.png) no-repeat center ; background-size:2.4rem auto ; 
}
.KM_news_box:hover > h3 { color:#5b9131 }
#KM_briefing.KM_news_box:hover > h3 { color:#012353 }
.KM_news_box:hover .KM_news_link::before { left:16rem ; opacity:0.5 ;}

.KM_news_box:hover::after { opacity:1 }
.KM_news_box:hover > p { color:#000000 }





/* PC **********/
@media all and (min-width:1100px){
 
    /* VISUAL */
    #K_visual { 
        height:100vh ; min-height:84rem ; max-height:108rem ; margin:auto ; max-width:192rem ;
        background:none ; background-color:#000000 ;
    }
    #K_visual::before {
        background:url(../img/main_visual.jpg) no-repeat center ; background-size:cover ; opacity:0.8 ; 
        width:101% ; height:101% ; left:50% ; top:50% ; 
        transform:translate(-50%,-50%) scale(1.2) ; 
        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) }   
    }
 
    #K_visual::after {
        display:block ; overflow:hidden ; content:"" ; width:100% ; height:3rem ;  
        position:absolute ; left:0 ; bottom:-0.3rem ; opacity:0 ; transition:0.3s opacity ;
        background:url(../img/visual_round.png) no-repeat left bottom ; background-size:100% 3rem ;
    }
    .show #K_visual::after { opacity:1 }

    #K_theme_bg { 
        width:120rem ; height:120rem ; 
        position:absolute ; right:50% ; bottom:20% ; opacity:0.9 ; 
    } 
    
    #K_theme { max-width:140rem ; left:50% ; top:25% ; transform:translateX(-50%) ; padding:0 2rem }
    #K_theme > b , #K_theme > strong { text-align:left }
    #K_theme > b { font-size:3.6rem ; line-height:4rem ; margin-bottom:2rem ;}
    #K_theme > strong { font-size:5rem ; line-height:6.8rem }
 
 

    /* VISUAL SCROLL */
    #KM_scroll { 
        display:block ; width:4rem ; height:4rem ; opacity:1 ;
        position:absolute ; bottom:1rem ; left:50% ; transform:translateX(-50%) ;
        font-size:0 ; color:transparent
    }
    .show #KM_scroll { opacity:0 }
    #KM_scroll::after ,  #KM_scroll::before {
        display:block ; overflow:hidden ; content:"" ; width:1rem ; height:1rem ;
        border:solid 0.2rem #ffffff ; border-left:0 ; border-top:0 ;
        position:absolute ; left:50% ; transform:translate(-50%,-50%) rotate(45deg) ;
        animation-duration:2.5s ;
        animation-timing-function:ease-in-out ;  
        animation-iteration-count:infinite ;
    } 
    #KM_scroll::before { 
        top:35% ; opacity:0.6 ; 
        animation-name:scroll_down1 ;
        animation-delay:1s ;
    }
    #KM_scroll::after  { 
        top:50% ; opacity:0.3 ; 
        animation-name:scroll_down2 ;
        animation-delay:1s ;
    }

    @keyframes scroll_down1 { 
        0%   { opacity:0.6 ; top:35% }  
        30%  { opacity:0 ; top:135% }  
        31%  { opacity:0 ; top:35% }  
        35%  { opacity:0 ; top:35% } 
        45%  { opacity:0.6 ; top:35% }  
        100% { opacity:0.6 ; top:35% }   
    }
    @keyframes scroll_down2 { 
        0%   { opacity:0.3 ; top:50% }  
        20%  { opacity:0 ; top:150% }  
        21%  { opacity:0 ; top:50% }  
        35%  { opacity:0 ; top:50% } 
        40%  { opacity:0.3 ; top:50% }  
        100% { opacity:0.3 ; top:50% }   
    }



    /* MAIN THEME */
    #KM_theme , #KM_theme_list , .KM_theme_box { overflow:hidden }
    #KM_theme { max-width:110rem ; margin:auto ; margin-top:-25rem }
    #KM_theme_list { width:81rem ; float:right }
    .KM_theme_box { 
        width:26rem ; height:30rem ; border-radius:0.4rem ; float:left ; margin-left:1rem ; background-size:26.2rem auto ;  
        margin-top:3rem ; transition:0.5s all ;
    }
    
    .KM_theme_box:nth-child(1) { background-image:url(../img/theme1_img.jpg) }
    .KM_theme_box:nth-child(2) { background-image:url(../img/theme2_img.jpg) }
    .KM_theme_box:nth-child(3) { background-image:url(../img/theme3_img.jpg) }
    .KM_theme_box:hover { background-size:30rem auto ; box-shadow:0 0.1rem 0.4rem rgba(0,0,0,0.3) }
 
    .KM_theme_title { top:17rem ; transform:none }
    .KM_theme_title > span { min-height:5.2rem }
    .KM_theme_box:first-child .KM_theme_title > span > br { display:block }



    /* ETC */
    #KM_etc { padding:0 ; padding-top:9rem }
    #KM_etc_inner { max-width:110rem ; margin:auto }
    #KM_info_list { min-height:24rem }
    


    /* IP INFO */
    #KM_info { max-width:53rem ; margin:0 ; height:39rem }
    /* .KM_info_title > h6 br { display:block } */
    .KM_etc_title { font-size:2.8rem ; padding-bottom:1.5rem ; text-align:left ; overflow:hidden }
    .KM_info_box { padding:1.5rem 0.5rem 1.5rem 13rem }
    .KM_info_box > b { 
        width:13rem ; box-sizing:border-box ; padding-left:0.3rem ; 
        letter-spacing:-0.05rem ;
        position:absolute ; left:0 ; top:1.7rem }
    .KM_info_title { width:35rem }  

    .KM_info_title > h6 { 
        width:100% ; box-sizing:border-box ; 
    }  /* word-wrap:break-word ; white-space:nowrap ; overflow:hidden ; text-overflow:ellipsis */

    .KM_info_title > p , .KM_info_box:hover .KM_info_title > p  { 
        transition:0.3s all ; opacity:0 ; height:0 ;
        display:block ; overflow:hidden ; font-size:1.6rem ; line-height:2.2rem ; padding-top:0 }  
 
    .KM_info_box.active .KM_info_title > p {
        padding-top:1rem ;  height:3.2rem ; opacity:0.8 ;
        word-wrap:break-word ; white-space:nowrap ; overflow:hidden ; text-overflow:ellipsis
    } 
    .KM_info_link::after { right:0 ; bottom:0}
    .KM_info_box.active .KM_info_link::after { bottom:2rem ; opacity:0.4 }
    .KM_info_box.active > b { opacity:0.9 }

    .KM_theme_title  > p { line-height:2rem ; padding-top:0.7rem ; height:4.5rem }
    .KM_info_box:nth-of-type(4) .KM_info_title > h6 br ,
    .KM_theme_title  > p > br { display:block }   



    /* KIIP LIB */
    #KM_lib { width:53rem ; position:absolute ; top:0 ; right:0 ; z-index:10 }
    .KM_data { display:block ; margin:0 ; width:26rem ; height:38rem ; background-size:26rem auto }
    .KM_data.book { float:left }
    .KM_data.data { float:right }
    .KM_data:hover { background-size:28rem auto } 

    .KM_data_title > h3 { font-size:4rem ; line-height:4.4rem ; margin-bottom:3rem }
    .KM_data_title > p { font-size:1.4rem ; line-height:2rem } 
    .KM_data_link > span { bottom:3rem }
    .KM_info_box:nth-child(2) .KM_info_title > h6 br { display:block }



    /* NEWS */
    #KM_news { 
        position:relative ; z-index:5 ; margin:0 ;
        width:100% ; height:35rem ; box-sizing:border-box ; overflow:hidden ;
        background:url(../img/news_bg.jpg) no-repeat center ; background-size:cover ; 
    } 
    .KM_news_box { 
        display:block ; margin:0 ; max-width:53rem ; border:none ; box-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
        position:absolute ; top:10rem ; left:50% ; padding-left:9rem ; 
    }
    #KM_notice.KM_news_box { margin-left:-55rem }
    #KM_briefing.KM_news_box { margin-left:2rem } 
    .KM_news_box::before , .KM_news_box::after { width:7rem }
    .KM_news_box::after { background-size:4rem auto }
 
    .KM_news_link::before { left:15rem }
    .KM_news_box:hover .KM_news_link::before { left:17rem }
 
}