@charset "utf-8";

/* HEADER */
#header , .header__inner , #header::after { width:100% }
#header { 
    position:fixed ; left:0 ; top:0 ; z-index:95 ;
    background-color:#ffffff ;
    box-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
}
.nOpen #header , #logo , #logo > a ,
.nav__btn__open , .nav__btn__open::before , .nav__btn__open::after { transition:0.3s all }
.nOpen #header { box-shadow:none }
#header::after {
    display:block ; content:"" ; height:1px ; 
    background-color:rgba(0,0,0,0.1) ;
    position:absolute ; left:0 ; top:5rem
}
.header__inner { position:relative ; min-height:5rem }
#logo , .nav__btn__open , #header::after { z-index:98 }
#logo { position:absolute ; left:0.5rem ; top:0.5rem }
#logo , #logo > a { width:7.5rem ; height:4rem ; display:block }
#logo > a , .nav__btn__open { font-size:0 ; color:transparent }
#logo > a { background:url(../img/logo.png) no-repeat center ; background-size:cover }

.nav__btn__open , .nav__btn__open::before , .nav__btn__open::after { display:block ; position:absolute }
.nav__btn__open { 
    width:5rem ; height:5rem ;
    right:0 ; top:0 ;  
}
.nav__btn__open::before , .nav__btn__open::after { 
    width:2.6rem ; height:0.2rem ; content:"" ; overflow:hidden ;
    background-color:#111111 ; border-radius:1rem ;
    left:50% ; transform:translate(-50%,-50%) ; 
}
.nav__btn__open::before { top:40% }
.nav__btn__open::after  { top:60% }
.nav__btn__open:hover::before , .nav__btn__open:focus::before { top:60% ; transform:translate(-50%,-50%) rotate(180deg) }
.nav__btn__open:hover::after , .nav__btn__open:focus::after   { top:40% ; transform:translate(-50%,-50%) rotate(180deg) }

.nOpen .nav__btn__open { background-color:#401f4c }
.nOpen .nav__btn__open::before , .nOpen .nav__btn__open::after { background-color:#ffffff }
.nOpen .nav__btn__open::before { top:50% ; transform:translate(-50%,-50%) rotate(45deg) }
.nOpen .nav__btn__open::after  { top:50% ; transform:translate(-50%,-50%) rotate(-45deg) }
.nOpen .nav__btn__open:hover::before , .nOpen .nav__btn__open:focus::before ,
.nOpen .nav__btn__open:hover::after , .nOpen .nav__btn__open:focus::after   { top:50% ; width:3rem }
.nOpen .nav__btn__open:hover::before , .nOpen .nav__btn__open:focus::before { transform:translate(-50%,-50%) rotate(135deg) }
.nOpen .nav__btn__open:hover::after , .nOpen .nav__btn__open:focus::after   { transform:translate(-50%,-50%) rotate(45deg) }




/* NAV */
#nav { 
    width:100% ; height:100vh ; background-color:#ffffff ; 
    position:fixed ; left:-101% ; top:0 ; z-index:96 ;
    padding-top:5rem ; transition:0.3s all ;
}
.nOpen #nav { left:0 }
.nav__inner { width:100% ; height:100% ; overflow:auto }
.nav__inner , .nav__list , .nav__item , .nav__link , .nav__aside  { width:100% ; display:block }
.nav__link , .nav__link::before { transition:0.3s all }
.nav__link {
    position:relative ; padding:1.5rem 0.5rem 1.7rem ;
    font-size:2rem ; line-height:2.8rem ; font-weight:600 ; color:#444444 ; text-align:center ;
    border-bottom:solid 1px rgba(0,0,0,0.1) ; 
} 
.nav__link::before {
    height:0.3rem ; content:"" ; display:block ; width:0 ;
    background-color:#f7901e ;
    position:absolute ; left:50% ; bottom:-1px ; transform:translateX(-50%) ;
}

#JL10 .item10 .nav__link , #JL11 .item10 .nav__link , #JL12 .item10 .nav__link , #JL13 .item10 .nav__link ,
#JL20 .item20 .nav__link , #JL30 .item30 .nav__link ,
#JL40 .item40 .nav__link , #JL50 .item50 .nav__link ,
.nav__link:hover , .nav__link:focus { color:#111111 }

#JL10 .item10 .nav__link , #JL11 .item10 .nav__link , #JL12 .item10 .nav__link , #JL13 .item10 .nav__link , 
#JL20 .item20 .nav__link , #JL30 .item30 .nav__link ,
#JL40 .item40 .nav__link , #JL50 .item50 .nav__link { background-color:#401f4c ; color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) }

#JL10 .item10 .nav__link::before , #JL11 .item10 .nav__link::before , #JL12 .item10 .nav__link::before , #JL13 .item10 .nav__link::before , 
#JL20 .item20 .nav__link::before , #JL30 .item30 .nav__link::before ,
#JL40 .item40 .nav__link::before , #JL50 .item50 .nav__link::before { display:none }
.nav__link:hover::before , .nav__link:focus::before { width:100% }
 
.nav__aside { 
    padding:1.5rem 0.5rem ; text-align:center ; font-size:0 ;
    border-bottom:solid 1px rgba(0,0,0,0.1) ;
}
.nav__aside__btn { 
    transition:0.3s all ;
    display:inline-block ; margin:0.3rem 0.5rem ; padding:0.5rem 2.5rem 0.7rem ; 
    border-radius:4rem ; background-color:#ffffff ;
    font-size:1.6rem ; line-height:2.8rem ; font-weight:500 ;
    border:solid 1px rgba(0,0,0,0.1) ; box-sizing:border-box 
}
.nav__aside__btn:hover , .nav__aside__btn:focus {
    color:#ffffff ; background-color:#111111 ; border-color:#111111 ;
}

.nav__btn__close , .nav__btn__close::before , .nav__btn__close::after { transition:0.3s all }
.nav__btn__close { 
    width:2rem ; height:2rem ; position:relative ; opacity:0.3 ;
    display:block ; margin:1.5rem auto ;
    font-size:0 ; color:transparent
} 
.nav__btn__close::before , .nav__btn__close::after {
    display:block ; content:"" ; width:1.8rem ; height:0.1rem ;
    background-color:#111111 ;
    position:absolute ; left:50% ; top:50%
}
.nav__btn__close::before { transform:translate(-50%,-50%) rotate(45deg) }
.nav__btn__close::after  { transform:translate(-50%,-50%) rotate(-45deg) }

.nav__btn__close:hover , .nav__btn__close:focus { opacity:0.7 }
.nav__btn__close:hover::before , .nav__btn__close:focus::before { transform:translate(-50%,-50%) rotate(135deg) }
.nav__btn__close:hover::after , .nav__btn__close:focus::after   { transform:translate(-50%,-50%) rotate(45deg) }



/* MAIN */    
#main  { padding-top:5rem }
.JL__p { 
    font-size:1.8rem ; line-height:3rem ; text-align:center ;
    word-break:keep-all ; margin-bottom:3rem 
}
.JL__p a { font-size:inherit ; line-height:inherit ; color:inherit ; font-weight:inherit }
.JL__p a:hover , .JL__p a:focus { text-decoration:underline }
.JL__p:last-child { margin-bottom:0 }




/* FOOTER */
#footer { width:100% ; padding:3rem 0; background-color:#401f4c } 
.footer__container { width:96% ; max-width:110rem ; margin:auto }
.footer__container::after { display:block ; content:"" ; clear:both }
#footer a , #footer p  { color:#ffffff ; font-size:1.4rem ; line-height:110% ; font-weight:400 ; opacity:0.9 }  
#footer p { float:right ; padding-top:0.8rem }
#footer a { 
    display:block ; float:left ; padding:0.8rem 1.5rem ; border-radius:0.4rem ;
    border:solid 1px rgba(255,255,255,0.1) ; box-sizing:border-box ;
    transition:0.3s all ;
}
#footer a:hover { background-color:#ffffff ; border-color:#ffffff ; color:#401f4c ; font-weight:400  }





/* PC **********/
@media screen and (min-width:1100px){
 
    /* HEADER */
    #header { background:none ; box-shadow:none }
    .header__inner  { min-height:7rem ; width:98% ; max-width:140rem ; margin:auto }
    #header::after  { background-color:rgba(255,255,255,0.1) ; top:7rem }

    #logo , #logo > a { width:9.4rem ; height:5rem ; display:block }
    #logo { left:0 ; top:1rem }
    .nav__btn__open { display:none }

    .sticky #header , .white #header { 
        background-color:#ffffff ;
        transition:0.3s background-color ;
    }
    .sticky #header::after , .white #header::after { background-color:rgba(0,0,0,0.1) }



    /* NAV */
    #nav , .nav__inner { width:100% ; height:auto ; padding:0 }  
    #nav { position:static ; background:none } 
    .nav__inner { margin:auto ; overflow:inherit }
    .nav__list  { width:100% ; max-width:60rem ; margin:auto }
    .nav__list::after { display:block ; content:"" ; clear:both }
    .nav__item  { display:block ; width:25% ; float:left }
    .nav__link  { 
        font-size:2rem ; padding:2rem 0 2.2rem ; color:#ffffff ; font-weight:400 ;
        text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ; opacity:0.8 ; border:0
    } 
    .sticky .nav__link , .white .nav__link { color:#111111 ; text-shadow:none }
    .nav__link::before { bottom:auto ; top:0 }
    .nav__link:hover , .nav__link:focus { color:#ffffff ; opacity:1 }
    .sticky .nav__link:hover , .sticky .nav__link:focus ,
    .white .nav__link:hover , .white .nav__link:focus { color:#111111 }

    #JL10 .item10 .nav__link , #JL11 .item10 .nav__link , #JL12 .item10 .nav__link , #JL13 .item10 .nav__link , 
    #JL20 .item20 .nav__link , #JL30 .item30 .nav__link ,
    #JL40 .item40 .nav__link , #JL50 .item50 .nav__link { background:none ; opacity:1 }

    #JL10.sticky .item10 .nav__link , #JL11.sticky .item10 .nav__link , #JL12.sticky .item10 .nav__link , #JL13.sticky .item10 .nav__link , 
    #JL20.sticky .item20 .nav__link , #JL30.sticky .item30 .nav__link ,
    #JL40.sticky .item40 .nav__link , #JL50.sticky .item50 .nav__link ,
    #JL10.white .item10 .nav__link , #JL11.white .item10 .nav__link , #JL12.white .item10 .nav__link , #JL13.white .item10 .nav__link , 
    #JL20.white .item20 .nav__link , #JL30.white .item30 .nav__link ,
    #JL40.white .item40 .nav__link , #JL50.white .item50 .nav__link { color:#111111 ; text-shadow:none }

    #JL10 .item10 .nav__link::before , #JL11 .item10 .nav__link::before , #JL12 .item10 .nav__link::before , #JL13 .item10 .nav__link::before , 
    #JL20 .item20 .nav__link::before  , #JL30 .item30 .nav__link::before  ,
    #JL40 .item40 .nav__link::before , #JL50 .item50 .nav__link::before  { width:100% ; display:block ; background-color:#401f4c }

    .nav__btn__close { display:none }
    .nav__aside {
        width:20rem ; text-align:right ; border:none ; padding:0 ; 
        position:absolute ; right:0 ; top:1.5rem ; 
    }
    .nav__aside__btn { 
        margin:0 ; border-color:rgba(255,255,255,0) ;
        background-color:rgba(255,255,255,0.1) ;
        color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ; font-weight:400 ;
    }
    .nav__aside__btn.blog { margin-left:1rem }

    .sticky .nav__aside__btn , .white .nav__aside__btn { background-color:#111111 }
    .sticky .nav__aside__btn:hover , .sticky .nav__aside__btn:focus ,
    .white .nav__aside__btn:hover , .white .nav__aside__btn:focus { background-color:#401f4c ; color:#ffffff }
 

 
    /* MAIN */    
    #main { padding-top:0}
 

}