@charset "utf-8";

body.navOpen { overflow:hidden }



/* Header */
#header , .header__container { display:block ; width:100% ; min-height:5rem }
#header { 
    position:fixed ; left:0 ; top:0 ; z-index:95 ; 
    background-color:#ffffff;
}

#header::after {
    display:block ; content:"" ; width:100% ; height:1px ; 
    position:absolute ; left:0 ; bottom:0 ; box-shadow:0 0 0.3rem rgba(0,0,0,0) ;
    background-color:rgba(0,0,0,0.05) ; transition:0.3s all ;
}
.sticky #header    { box-shadow:0 0 0.3rem rgba(0,0,0,0.1) }
.header__container { position:relative ; max-width:150rem ; margin:auto }
#KUM_logo { display:none }
#KUMM_logo , #KUMM_logo > h1 { display:block ; width:19rem ; height:3.4rem }
#KUMM_logo { position:absolute ; left:0.5rem ; top:50% ; transform:translateY(-50%) }
#KUMM_logo > h1 { position:relative ; color:#900123 ; font-family:'Paperozi',sans-serif }

.logo__name , .logo__date , .logo__vol { display:block ; color:inherit ; font-family:inherit ; line-height:100% ; position:absolute }
.logo__name { 
    font-size:3.2rem ; font-weight:900 ; letter-spacing:-0.15rem ;
    left:0 ; top:50% ; transform:translateY(-50%) ;
}
.logo__date , .logo__vol { left:11rem }
.logo__date { font-size:1rem ; font-weight:500 ; top:0.3rem }
.logo__vol  { font-size:1.6rem ; font-weight:800 ; bottom:0.3rem }

#btn_nav_open {
    display:block ; overflow:hidden ; width:5rem ; height:5rem ;
    position:absolute ; right:0.5rem ; top:0 ; 
    font-size:0 ; color:transparent ; text-indent:-999rem ;
}
#btn_nav_open > span { 
    display:block ; width:3rem ; height:0.2rem ;
    position:absolute ; left:50% ; transform:translate(-50%,-50%) ;
    background-color:#900123 ; transition:0.3s all ;
}
#btn_nav_open > span:nth-child(1) , #btn_nav_open:hover > span:nth-child(3) , #btn_nav_open:focus > span:nth-child(3) { top:33% }
#btn_nav_open > span:nth-child(2) { top:50% }
#btn_nav_open > span:nth-child(3) , #btn_nav_open:hover > span:nth-child(1) , #btn_nav_open:focus > span:nth-child(1) { top:67% }
#btn_nav_open:hover > span:nth-child(2) , #btn_nav_open:focus > span:nth-child(2) { transform:translate(-50%,-50%) rotate(180deg) }
 
.navOpen #btn_nav_open > span:nth-child(2) { opacity:0 }
.navOpen #btn_nav_open > span:nth-child(1) ,
.navOpen #btn_nav_open > span:nth-child(3) { left:50% ; top:50% }
.navOpen #btn_nav_open > span:nth-child(1) { transform:translate(-50%,-50%) rotate(45deg) }
.navOpen #btn_nav_open > span:nth-child(3) { transform:translate(-50%,-50%) rotate(-45deg) }
.navOpen #btn_nav_open:hover > span:nth-child(1) { transform:translate(-50%,-50%) rotate(135deg) }
.navOpen #btn_nav_open:hover > span:nth-child(3) { transform:translate(-50%,-50%) rotate(45deg) }
 


/* Navigation */
.navOpen #nav , .nav__link , .nav__link::after , .nav__btn__link ,
#btn_nav_close , #btn_nav_close::before , #btn_nav_close::after { transition:0.3s all }
#nav , #nav_wrap , #nav_right , .nav__container { width:100% ; height:100vh }
#nav { 
    position:fixed ; left:-100.5% ; top:0 ; z-index:90 ;
    background-color:#ffffff 
}
.navOpen #nav { left:0 }
#nav_wrap , #nav_left { display:none }
.navOpen #nav_wrap    { display:block }
#nav_right      { padding:5rem 0 3rem }
.nav__container { height:100% ; overflow:auto }

.nav__col.left { padding-top:2rem }
.nav__col { width:96% ; margin:auto }
.nav__sub { margin-bottom:4rem }
.nav__col__title {
    font-size:2.6rem ; line-height:110% ; font-weight:800 ; color:#900123 ;
    letter-spacing:-0.15rem ; margin-bottom:1rem ;
}
.nav__sub__title     { font-size:0 }
.nav__sub__title > a { display:block }
.nav__sub__title b , .nav__sub__title span { display:inline-block ; font-size:1.6rem ; line-height:100% ; transition:0.3s all }
.nav__sub__title b {  
    padding:0.5rem 1.2rem 0.7rem; margin:0 0.5rem 1rem 0 ;
    color:#ffffff ; font-weight:500 ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
    background-color:#900123 ; border-radius:4rem  
} 
.nav__sub__title span { color:#900123 ; font-weight:600 ; padding-top:0.5rem }

.nav__link {
    display:block ; padding:0.6rem 0.1rem 0.8rem ;
    font-size:1.6rem ; line-height:2.4rem ; word-break:keep-all ;
    border-bottom:solid 1px rgba(0,0,0,0.1) ; position:relative ;
}
.nav__link br { display:none }
.nav__link::after {
    display:block ; overflow:hidden ; content:"" ; width:0 ; height:1px ; 
    background-color:#900123 ;
    position:absolute ; left:0 ; bottom:-1px ;
}

#kumm11 .nav__link.item11 , #kumm12 .nav__link.item12 , #kumm13 .nav__link.item13 , #kumm14 .nav__link.item14 , #kumm15 .nav__link.item15 ,
#kumm21 .nav__link.item21 , #kumm22 .nav__link.item22 , #kumm23 .nav__link.item23 , #kumm24 .nav__link.item24 , #kumm25 .nav__link.item25 ,
#kumm31 .nav__link.item31 , #kumm32 .nav__link.item32 , #kumm33 .nav__link.item33 , #kumm34 .nav__link.item34 , #kumm35 .nav__link.item35 ,
#kumm41 .nav__link.item41 , #kumm42 .nav__link.item42 , #kumm43 .nav__link.item43 , #kumm44 .nav__link.item44 , #kumm45 .nav__link.item45 ,
#kumm46 .nav__link.item46 , #kumm47 .nav__link.item47 , #kumm48 .nav__link.item48 , #kumm49 .nav__link.item49 , #kumm51 .nav__link.item51 ,
.nav__link:hover { color:#111111 }

#kumm11 .nav__link.item11 , #kumm12 .nav__link.item12 , #kumm13 .nav__link.item13 , #kumm14 .nav__link.item14 , #kumm15 .nav__link.item15 ,
#kumm21 .nav__link.item21 , #kumm22 .nav__link.item22 , #kumm23 .nav__link.item23 , #kumm24 .nav__link.item24 , #kumm25 .nav__link.item25 ,
#kumm31 .nav__link.item31 , #kumm32 .nav__link.item32 , #kumm33 .nav__link.item33 , #kumm34 .nav__link.item34 , #kumm35 .nav__link.item35 ,
#kumm41 .nav__link.item41 , #kumm42 .nav__link.item42 , #kumm43 .nav__link.item43 , #kumm44 .nav__link.item44 , #kumm45 .nav__link.item45 ,
#kumm46 .nav__link.item46 , #kumm47 .nav__link.item47 , #kumm48 .nav__link.item48 , #kumm49 .nav__link.item49 , #kumm51 .nav__link.item51 { font-weight:500 }

#kumm11 .nav__link.item11::after , #kumm12 .nav__link.item12::after , #kumm13 .nav__link.item13::after , #kumm14 .nav__link.item14::after , #kumm15 .nav__link.item15::after ,
#kumm21 .nav__link.item21::after , #kumm22 .nav__link.item22::after , #kumm23 .nav__link.item23::after , #kumm24 .nav__link.item24::after , #kumm25 .nav__link.item25::after ,
#kumm31 .nav__link.item31::after , #kumm32 .nav__link.item32::after , #kumm33 .nav__link.item33::after , #kumm34 .nav__link.item34::after , #kumm35 .nav__link.item35::after ,
#kumm41 .nav__link.item41::after , #kumm42 .nav__link.item42::after , #kumm43 .nav__link.item43::after , #kumm44 .nav__link.item44::after , #kumm45 .nav__link.item45::after ,
#kumm46 .nav__link.item46::after , #kumm47 .nav__link.item47::after , #kumm48 .nav__link.item48::after , #kumm49 .nav__link.item49::after , #kumm51 .nav__link.item51::after ,
.nav__link:hover::after { width:100% }

.item40 .nav__col__title  { color:#bd8018 } 
.item40 .nav__link::after { background-color:#bd8018 } 
.item50 .nav__col__title  { color:#3e3a39 } 
.item50 .nav__link::after { background-color:#3e3a39 }

.nav__btns { font-size:0 ; text-align:center ; margin-bottom:2rem }
.nav__btn__item { display:inline-block ; margin:0.3rem }
.nav__btn__link {  
    display:block ; padding:0.5rem 1.5rem 0.7rem ;
    font-size:1.6rem ; line-height:2.4rem ;
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ;
}
.nav__btn__link:hover {
    background-color:#111111 ; border-color:#111111 ;
    color:#ffffff
} 
.nav_end , #btn_nav_close { width:2rem ; height:2rem }
.nav_end       { position:absolute ; bottom:1rem ; left:50% ; transform:translateX(-50%) }
#btn_nav_close {
    display:block ; overflow:hidden ; opacity:0.3 ;
    font-size:0 ; color:transparent ; text-indent:-99rem ;  
}

#btn_nav_close:hover { opacity:1 }
#btn_nav_close::before , #btn_nav_close::after {
    display:block ; content:"" ; width: 1.4rem ; height:1px ;
    background-color:#111111 ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
#btn_nav_close::before { transform:translate(-50%,-50%) rotate(45deg) }
#btn_nav_close::after  { transform:translate(-50%,-50%) rotate(-45deg) }
#btn_nav_close:hover::before , #btn_nav_close:hover::after { width:1.8rem }
#btn_nav_close:hover::before { transform:translate(-50%,-50%) rotate(135deg) }
#btn_nav_close:hover::after  { transform:translate(-50%,-50%) rotate(45deg) }



/* Footer */
#footer , .footer__container , .footer__nav  { width:100% }
#footer         { padding:4rem 0 ; background-color:#fafafa ; position:relative }
#footer::before {
    display:block ; content:"" ; width:100% ; height:1px ;
    position:absolute ; left:0 ; top:0 ; 
    background-color:rgba(0,0,0,0.1) ; 
}
.footer__logo { 
    display:block ; overflow:hidden ; width:18rem ; height:5rem ; 
    font-size:0 ; color:transparent ; text-indent:-99rem ;
    background:url(../img/splite_all.png) no-repeat left bottom ; background-size:auto 10rem ; 
    margin:0 auto 2rem
} 
 
.footer__nav { font-size:0 ; text-align:center ; margin-bottom:3rem }
.footer__nav__item { display:inline-block ; margin:0.3rem }
.footer__nav__link {
    display:block ; padding:1.2rem 2rem 1.3rem ; border-radius:0.4rem ;
    font-size:1.4rem ; line-height:100% ; border:solid 1px rgba(0,0,0,0.1) ;
    transition:0.3s all ;
}
.footer__nav__link:hover { color:#ffffff ; background-color:#111111 ; border-color:#111111 }
.footer__copy { 
    padding:0 1rem  ;
    font-size:1.4rem ; line-height:140% ; word-break:keep-all ; text-align:center ;
}

 

/* Aside */
#aside , #btn_top , #btn_top::before { transition:0.3s all } 
#aside   { 
    width:1px ; height:1px ;
    position:fixed ; right:0.5rem ; bottom:1rem ; z-index:80 
}
#btn_top { 
    display:block ; overflow:hidden ;  width:4rem ; height:4rem ;
    font-size:0 ; color:transparent ; text-indent:-99rem ;
    border-radius:100%  ; background-color:#3e3a39 ;
    position:absolute ; right:-7rem ; bottom:0 ;
} 
#btn_top::before {
    display:block ; content:"" ; width:0.6rem ; height:0.6rem ;
    border:solid 0.2rem #ffffff ; border-right:none ; border-bottom:none ;
    position:absolute ; left:50% ; top:53% ; transform:translate(-50%,-50%) rotate(45deg) ;
}
#btn_top:hover { background-color:#000000 }
#btn_top:hover::before { transform:translate(-50%,-50%) rotate(45deg) scale(1.1) }

.sticky #btn_top , #btn_top:focus { right:0 ; opacity:1 }



/* Month */
.item10:hover .nav__sub__title b , .item10 .nav__link::after { background-color:#e7b4b3 }
.item10:hover .nav__sub__title span { color:#e7b4b3 }

.item20:hover .nav__sub__title b , .item20 .nav__link::after { background-color:#94c0be }
.item20:hover .nav__sub__title span { color:#94c0be }

.item30:hover .nav__sub__title b , .item30 .nav__link::after { background-color:#bbb1ca }
.item30:hover .nav__sub__title span { color:#bbb1ca }





/* PC */
@media all and (min-width:1100px){
    
    /* Header */
    #header , .header__container { min-height:auto ; height:8rem }
    .sticky #header , .sticky .header__container { height:6rem}
    #header { background-color:rgba(255,255,255,0) }
    .sticky #header { background-color:#ffffff }
    .header__container { width:96% } 
    #header::after { background-color:#ffffff ; opacity:0.07 }
    .sticky #header::after { background-color:rgba(0,0,0,0.05) }

    #KUM_logo { 
        display:block ; overflow:hidden ; width:18rem ; height:5rem ; 
        font-size:0 ; color:transparent ; text-indent:-99rem ;
        background:url(../img/splite_all.png) no-repeat left top ; background-size:auto 10rem ;
        position:absolute ; left:0 ; top:50% ; transform:translateY(-50%) ;
    }
    .sticky #KUM_logo { background-position:left bottom }

    #KUMM_logo , #KUMM_logo > h1 { width:23rem ; height:4.2rem }
    #KUMM_logo { left:50% ; transform:translate(-50%,-50%) }

    #header , #header , .header__container , 
    #KUMM_logo > h1 , .logo__name , .logo__date , .logo__vol { transition:0.3s all }

    #KUMM_logo > h1 { color:#ffffff } 
    .sticky #KUMM_logo > h1 { color:#900123 } 
    .logo__name , .logo__date , .logo__vol { text-shadow:0 0 0.3rem rgba(0,0,0,0.1) }
    .logo__name { font-size:4rem }
    .logo__date { font-size:1rem ; opacity:0.7 ; font-weight:300 ; letter-spacing:0.07rem }
    .sticky .logo__date { opacity:1 }
    .logo__vol  { font-size:2.2rem }
    .logo__date , .logo__vol { left:14rem }
    #btn_nav_open { right:0 ; top:50% ; transform:translateY(-50%) }
    #btn_nav_open > span { background-color:#ffffff }
    .sticky #btn_nav_open > span { background-color:#900123 }



    /* Navigation */
    #nav { z-index:97 }
    #nav_wrap { position:relative ; padding-left:33% }
    #nav_left , #nav_right { display:block ; margin:0 ; padding:0 ; height:100% }
    #nav_left  { 
        width:33% ; overflow:hidden ; position:absolute ; left:0 ; top:0 ;
        background:url(../img/main_visual_mb.jpg) no-repeat center ; background-size:cover ;
    }
    #nav_left::before {
        display:block ; content:"" ; width:100% ; height:100% ;
        background-color:#000000 ; opacity:0.3 ;
        left:50% ; top:50% ; transform:translate(-50%,-50%)
    }
    #nav_left::before , .nav__logo { position:absolute }
    .nav__logo { right:0 ; top:50% ; transform:translateY(-50%) ; width:100% ; max-width:45rem ; text-align:center }
    .nav__logo__date , .nav__logo__vol , .nav__logo__name { 
        display:block ;  
        text-align:center ; font-family:'Paperozi',sans-serif ; line-height:100% ;
    } 
    .nav__logo__date , .nav__logo__vol { text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ; color:#ffffff }
    .nav__logo__date { font-size:2.2rem ; font-weight:500 ; margin-bottom:1rem }
    .nav__logo__vol  { font-size:4rem ; font-weight:700 ; margin-bottom:6rem }
    .nav__logo__name {
        font-weight:900 ; font-size:20rem ; color:transparent ;
        -webkit-text-stroke: 2px #ffffff ; opacity:0.8 ;
    }
   
    #nav_right { width:100% ; padding:8rem 0 0 0 ; position:relative }

    .nav_end { 
        width:100% ; max-width:105rem ; height:5rem ;
        position:absolute ; left:0 ; top:1.5rem ; transform:none ;
    }  
    #btn_nav_close { width:5rem ; height:5rem ; opacity:1 ; position:absolute ; right:0 ; top:0 }
    #btn_nav_close::before , #btn_nav_close::after , 
    #btn_nav_close:hover::before , #btn_nav_close:hover::after { width:3rem ; height:0.2rem ; background-color:#900123 } 
    
    .nav__container::after , .nav_end::after { display:block ; content:"" ; clear:both }
    .nav__col { width:50% ; float:left ; padding:0 ; margin:0 0 2rem 0 ; max-width:52.5rem }
    .nav__col.left  { padding:0 3rem 0 5rem }
    .nav__col.right { padding:0 5rem 0 3rem ; position:relative }

    .nav__col__title { margin-bottom:2rem }
    .nav__sub        { margin-bottom:5rem }
    .nav__sub:last-child { margin-bottom:0 } 
    .nav__sub__title , .item40 .nav__col__title , .item50 .nav__col__title { margin-bottom:1rem }
    .nav__sub__title b , .nav__sub__title span { font-size:1.8rem ; line-height:2.8rem ; letter-spacing:-0.05rem ; margin:0 }
    .nav__sub__title b { padding:0.5rem 2rem 0.7rem ; margin-right:1rem }
    .nav__sub__title span { padding-top:0.5rem }
 
    .nav__link      { font-size:1.8rem ; line-height:2.6rem ; padding:0.7rem 0.1rem ; letter-spacing:-0.05rem }
    .nav__link br   { display:block }

    .nav__btns      { text-align:left }
    .nav__btn__item { margin:0 0.3rem 0.3rem 0 }
    .nav__btn__item:last-child { margin-right:0 }
    .nav__btn__link { padding:0.7rem 1.5rem ; font-size:1.4rem }

    .nav__sub.item40 , .nav__sub.item50 { margin-bottom:8.5rem }
  

    /* Footer */
    .footer__container { width:96% ; max-width:150rem ; position:relative ; padding:0 0 0 25rem ; margin:auto }
    .footer__container::after { display:block ; content:"" ; clear:both } 
    .footer__logo { margin:0 ; position:absolute ; left:0 ; top:0 }
    .footer__copy { padding:1rem 0 0 0 ; text-align:left }

    .footer__nav { width:32rem ; float:right ;  margin:0 ; text-align:right }
    .footer__nav__item { margin:0 0 0 0.5rem }



    /* Aside */
    #aside { bottom:3.5rem ; right:1rem }
    #btn_top { width:5rem ; height:5rem }
    #btn_top::before { width:0.8rem ; height:0.8rem }
  
}





/* PRINT */
@media print {}