@charset "utf-8"; 
/* MOBILE */
body , .sticky #header { background-color:#313131 }
body #header , #main , #footer { min-width:35rem } 
body.navOpen , body.searchOpen { overflow:hidden }



/* header / z-index.90 */ 
#header , .header__container { width:100% }
#header { 
    min-height:5rem ;
    position:fixed ; left:0 ; top:0 ; z-index:90 ;
}
.sticky #header { box-shadow:0 0 0.3rem rgba(0,0,0,0.3) }
.header__container { position:relative }

.logo__history { width:25rem ; position:absolute ; left:50% ; top:0 ; transform:translateX(-50%) }
.logo__history::after { display:block ; content:"" ; clear:both }
#logo , #logo > a { 
    font-size:0 ; color:transparent ; 
    display:block ; overflow:hidden ; width:16.7rem ; height:5rem 
}
#logo { float:left }
#logo > a { background:url(../img/logo.png) no-repeat center ; background-size:cover }

.VH__now , #VH__btn__open , .VH__body , .VH__vol { display:none }
.vol__history , .VH__header , .VH__vol { width:8rem ; display:block }
.vol__history { float:right ; margin-top:1rem }
.VH__now , .VH__vol { font-size:2rem ; line-height:2.8rem ; font-weight:600 }
.VH__vol { 
    background-color:#ff9828 ; border-radius:0.4rem ; 
    color:#111111 ; text-align:center ;
    padding:0.1rem 0 ; 
} 

#btn_navOpen > b , #btn_navOpen span { 
    display:block ; overflow:hidden ; font-size:0 ; color:transparent ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ; 
}
.sticky #header , #btn_navOpen > b , #btn_navOpen span ,
#btn_navOpen span:nth-child(1)::before , #btn_navOpen span:nth-child(1)::after { transition:0.3s all } 
#btn_navOpen , #btn_searchOpen , #btn_searchOpen > b { 
    width:5rem ; height:5rem ;
    position:absolute ; top:0; 
} 
#btn_navOpen { left:0 } 
#btn_navOpen > b { width:3rem ; height:3rem  }
#btn_navOpen span , #btn_navOpen span:nth-child(1)::before  { background-color:#ffffff }
#btn_navOpen span { width:2.8rem ; height:0.2rem ; border-radius:1rem }
#btn_navOpen span:nth-child(1) , #btn_navOpen:hover span:nth-child(3) , #btn_navOpen:focus span:nth-child(3) { top:23% }
#btn_navOpen span:nth-child(2) { top:50% }
#btn_navOpen span:nth-child(3) , #btn_navOpen:hover span:nth-child(1) , #btn_navOpen:focus span:nth-child(1) { top:77% }
#btn_navOpen span:nth-child(1) , #btn_navOpen:hover span:nth-child(1) , #btn_navOpen:focus span:nth-child(1) { background:none } 

#btn_navOpen span:nth-child(1)::before , #btn_navOpen span:nth-child(1)::after { 
    display:block ; content:"" ; overflow:hidden ; 
    border-radius:1rem ; height:100% ; 
    position:absolute ; top:0
}
#btn_navOpen span:nth-child(1)::before { width:2.2rem ; left:0 }
#btn_navOpen span:nth-child(1)::after  { width:0.2rem ; right:0 ; background-color:#ff9828 }
 
#btn_navOpen:hover span , #btn_navOpen:focus span { background-color:#ff9828 } 
#btn_navOpen:hover span:nth-child(2) , #btn_navOpen:focus span:nth-child(2) { transform:translate(-50%,-50%) rotate(180deg) } 
#btn_navOpen:hover span:nth-child(1)::before , #btn_navOpen:focus span:nth-child(1)::before { width:0 }
#btn_navOpen:hover span:nth-child(1)::after , #btn_navOpen:focus span:nth-child(1)::after   { width:100% } 

#btn_searchOpen { right:0 }
#btn_searchOpen > b { 
    font-size:0 ; color:transparent ; overflow:hidden ;
    display:block ;  
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) scale(0.9) ;
    background:url(../img/icon_sprite.png) no-repeat left top ; background-size:auto 10rem ;
    transition:0.3s all ;
}
.searchOpen #btn_searchOpen > b { background-position:left bottom }
#btn_searchOpen:hover > b , #btn_searchOpen:focus > b { transform:translate(-50%,-50%) scale(1) }

.navOpen #btn_navOpen span:nth-child(1) , .navOpen #btn_navOpen span:nth-child(3) {top:50% ; left:50% }
.navOpen #btn_navOpen span:nth-child(2) { opacity:0 }
.navOpen #btn_navOpen span:nth-child(1) { transform:translate(-50%,-50%) rotate(45deg) } 
.navOpen #btn_navOpen span:nth-child(3) { transform:translate(-50%,-50%) rotate(135deg) }  

 

/* nav */
#nav , #SW_search , .nav__inner { width:100% }
#nav , #SW_search  { 
    position:fixed ; left:-101% ; top:0 ; z-index:88 ; padding-top:6rem ;
    height:100vh ; background-color:#313131 }
.navOpen #nav { left:0 }
.nav__inner   { display:none ; overflow:auto ; height:100% }
.navOpen .nav__inner { display:block }
.nav__deep1__list { margin-bottom:1rem }
.navOpen #nav , .nav__deep1__item:hover , .nav__deep1__link::before ,
.nav__deep1__link:hover , .nav__deep1__link:focus , .nav__deep2__link { transition:0.3s all }
.nav__deep1__item:hover { background-color:rgba(0,0,0,0.3) ; } 

.nav__deep1__link {
    display:block ; padding:1.2rem 0.2rem 1.4rem ;
    border:solid 1px rgba(255,255,255,0.1) ; border-left:none ; border-right:none ;
    font-size:2.2rem ; line-height:3rem ; color:#ffffff ; text-align:center ; font-weight:500 ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
    position:relative
}
.nav__deep1__link:hover , .nav__deep1__link:focus { background-color:rgba(0,0,0,0.2) } 
.nav__deep1__link.now { background-color:rgba(0,0,0,0.1) } 
.nav__deep1__link::before {
    display:block ; content:"" ; width:0 ; height:1px ; 
    background-color:#ff9828 ; opacity:0 ;
    position:absolute ; left:50% ; bottom:-1px ; transform:translateX(-50%) ;
}
.nav__deep1__item:hover .nav__deep1__link::before , .nav__deep1__link.now::before ,
.nav__deep1__link:hover::before , .nav__deep1__link:focus::before { width:100% ; opacity:1 }

.nav__deep2__list { padding:1.2rem 0rem 3rem ; font-size:0 ; text-align:center }
.nav__deep2__item { display:inline-block ; margin:0.3rem }
.nav__deep2__link {
    display:block ; border:solid 1px rgba(255,255,255,0.1) ; border-radius:0.4rem ;
    font-size:1.6rem ; line-height:2.4rem ; color:#ffffff ; color:rgba(255,255,255,0.6) ;
    padding:0.5rem 1.5rem 0.7rem ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
}
.nav__deep2__link:hover , .nav__deep2__link:focus {
    background-color:#ffffff ; border-color:#ffffff ; color:#111111 ; 
    text-shadow:none ; 
}
.nav__deep2__link.now { border-color:#ff9828 ; color:#ffffff }
.nav__deep2__link.now:hover , .nav__deep2__link.now:focus { background-color:#ff9828 ; color:#111111 } 

.nav__deep3__list , .nav__etc { display:none }

.btn__close , .btn__close::before , .btn__close::after { transition:0.3s all }
.btn__close {
    display:block ; overflow:hidden ; width:3rem ; height:3rem ; margin:0 auto 2rem ;
    font-size:0 ; color:transparent ;
    position:relative ; opacity:0.3 ;
}
.btn__close:hover , .btn__close:focus { opacity:1 }
.btn__close::before , .btn__close::after {
    display:block ; content:"" ; width:1.6rem ; height:1px ;
    background-color:#ffffff ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) rotate(45deg) ; 
} 
.btn__close::after { transform:translate(-50%,-50%) rotate(135deg) }
.btn__close:hover::before , .btn__close:focus::before { transform:translate(-50%,-50%) rotate(135deg) }
.btn__close:hover::after , .btn__close:focus::after   { transform:translate(-50%,-50%) rotate(225deg) }

 

/* search */
.searchOpen #SW_search , .SWS__btn{ transition:0.3s all }  
#SW_search { 
    height:100vh ; background-color:rgba(0,0,0,0.7) ;
    left:-101% ; padding:0 } 
#SW_search::before {
    display:block ; content:"" ; width:94% ; height:0 ; 
    border-bottom:dashed 1px rgba(255,255,255,0.1) ;
    position:absolute ; left:50% ; top:6rem ; transform:translateX(-50%) ;
}
.searchOpen #SW_search { left:0 }
#SW_search_form { 
    display:none ; text-align:center ; width:100% ; margin:auto ;
    background-color:#313131 ; padding:9rem 0 2rem ; box-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
} 
.searchOpen #SW_search_form { display:block }
#SW_search_form fieldset    { display:block ; width:90% ; max-width:60rem ; text-align:center ; margin:0 auto 2rem }
#SWS_kind , #SWS_word , .SWS__btn { 
    width:100% ; font-size:1.8rem ; line-height:2.8rem ; color:#ffffff ;
    padding:1rem 1.5rem 1.2rem ; 
    border-radius:0.6rem ;
}
#SWS_kind , #SWS_word { border:solid 1px rgba(255,255,255,0.1) ; margin-bottom:0.7rem } 
.SWS__btn {
    background-color:#ff9828 ; 
    color:#111111 ; text-align:center ; font-weight:500 ;
    margin-bottom:0 ;
}
.SWS__btn:hover , .SWS__btn:focus { color:#ff9828 ; background-color:#111111 ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) } 
#SW_search_close { margin-bottom:0 }



/* main */
#main { padding-top:6rem }
#main::after { display:block ; overflow:hidden ; content:"" ; clear:both ; width:0 ; height:0 }


/* aside */
#aside { background-color:#ffffff ; width:100% ; padding:8rem 0 0 }
.aside__list { 
    width:32rem ; margin:auto ; overflow:hidden ;
    border:solid 1px rgba(0,0,0,0.1) ; border-bottom:none ;
    border-radius:0.8rem 0.8rem 0 0 ;
}
.aside__list::after { display:block ; content:"" ; clear:both }
.aside__item { width:25% ; height:8rem ; float:left ; position:relative  }
.aside__item::after {
    display:block ; content:"" ; width:1px ; height:2rem ;
    background-color:#000000 ; opacity:0.1 ; ; 
    position:absolute ; left:0 ; top:50% ; transform:translateY(-50%) ;
} 
.aside__item:first-child::after , .aside__item:last-child::after  { display:none }
.aside__link { 
    display:block ; width:7rem ; height:7rem ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    font-size:0 ; color:transparent
}
.aside__icon , .aside__icon::before { display:block ; overflow:hidden ; width:5rem ; height:5rem }
.aside__icon { position:absolute ; left:50% ; top:0 ; transform:translateX(-50%) } 
.aside__icon::before , .item4 .aside__icon { position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%)  }
.aside__icon::before {
    content:"" ; opacity:0.7 ;
    background:url(../img/icon_sprite.png) no-repeat 0 0 ; background-size:auto 10rem  
}
.item1 .aside__icon::before { background-position:-30rem -5rem }
.item2 .aside__icon::before { background-position:-35rem -5rem }
.item3 .aside__icon::before { background-position:-40rem -5rem }
.item4 .aside__icon::before { background-position:-45rem 0rem ; opacity:1 } 

.item4 .aside__link { background-color:#313131 ; width:100% ; height:100% }
.item4 .aside__icon { margin:0 }
.aside__text { 
    display:block ; width:100% ; opacity:0.7 ;
    font-size:1.2rem ; line-height:1.8rem ; text-align:center ;
    position:absolute ; left:0 ; bottom:0 ;
}
.aside__icon::before , .aside__text , .item4 .aside__link { transition:0.3s all }
.aside__link:hover .aside__icon::before , .aside__link:focus .aside__icon::before { opacity:1 ; transform:translate(-50%,-50%) scale(0.9)  }
.aside__link:hover .aside__text , .aside__link:focus .aside__text { opacity:1 ; color:#111111}

.item4 .aside__link:hover , .item4 .aside__link:focus { background-color:#ff9828 }
.item4 .aside__link:hover .aside__icon::before , .item4 .aside__link:focus .aside__icon::before { background-position:-45rem -5rem  }



/* footer */
#footer , .footer__inner { position:relative }
#footer { 
    width:100% ; background-color:#ffffff ; box-shadow:0 0 0.3rem rgba(0,0,0,0.2) ;
    padding:4rem 0 ; text-align:center ;
}
#footer::after { 
    display:block ; content:"" ; width:100% ; height:1px ; 
    background-color:#000000 ; opacity:0.1 ;
    position:absolute ; left:0 ; top:0
} 
.footer__inner { width:94% ; margin:auto } 

.footer__sns   { width:18rem ; margin:auto }
.footer__sns , .footer__info , .footer__family { font-size:0 ; margin-bottom:3rem } 
.footer__sns::after { display:block ; content:"" ; clear:both }
.footer__sns__item , .footer__sns__link { display:block ; width:5rem ; height:5rem }
.footer__sns__item  { float:left ; margin-right:1.5rem } 
.footer__sns__item:last-child { margin-right:0 }
.footer__sns__link  { 
    border-radius:100% ; position:relative ; background-color:#313131 ;
    font-size:0 ; color:transparent ; 
}
.footer__sns__link , .footer__sns__link::before , .footer__fami__link { transition:0.3s all }
.footer__sns__link::before {  
    display:block ; content:"" ; width:100% ; height:100% ; opacity:0.9 ;
    background:url(../img/icon_sprite.png) no-repeat 0 0 ; background-size:auto 10rem ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) scale(0.9) ;
}
.item1 .footer__sns__link::before { background-position:-10rem 0 }
.item2 .footer__sns__link::before { background-position:-15rem 0 }
.item3 .footer__sns__link::before { background-position:-20rem 0 }
.footer__sns__link:hover , .footer__sns__link:focus { background-color:#111111 }
.footer__sns__link:hover::before , .footer__sns__link:focus::before { opacity:1 ; transform:translate(-50%,-50%) scale(1) } 


.footer__info li , .footer__copy , .footer__sauce { font-size:1.6rem ; line-height:2.6rem ; word-break:keep-all }
.footer__info li { 
    display:inline-block ; margin-bottom:0.5rem ; position:relative ;
    padding:0 2rem ;
}
.footer__info li::after { 
    display:block ; content:"" ; width:1px ; height:1rem ; background-color:#000000 ; opacity:0.1 ;
    position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
}
.footer__info li:first-child { display:block ; padding:0 }
.footer__info li:last-child  { padding-right:0 }
.footer__info li:first-child::after ,
.footer__info li:last-child::after { display:none }

.footer__family { max-width:60rem ; margin-left:auto ; margin-right:auto }
.footer__fami__item , .footer__fami__link { display:block ; width:100% }
.footer__fami__item { margin-bottom:0.7rem } 
.footer__fami__link {
    font-size:1.6rem ; line-height:2.8rem ; color:#ffffff ;
    padding:0.7rem 0.5rem ; border-radius:0.6rem ;
    background-color:#313131 ;
}
.footer__fami__link:hover , .footer__fami__link:focus { background-color:#ff9828 ; color:#111111 }
.footer__copy { margin-bottom:1.5rem } 





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

    body { background:url(../img/bg_txt.png) no-repeat right top #313131 ; background-attachment:fixed }
      


    /* header / z-index.90 */
    #header { min-height:8rem }
    .header__container { width:96% ; max-width:150rem ; margin:auto }
    #btn_navOpen { left:0 ; top:1.5rem }
    #btn_navOpen , #btn_navOpen > b { width:5rem ; height:5rem }
    #btn_navOpen span { width:3.6rem ; height:0.4rem ; border-radius:1rem }
    #btn_navOpen span:nth-child(1)::before { width:3rem }
    #btn_navOpen span:nth-child(1)::after  { width:0.4rem }
    #btn_navOpen span:nth-child(1) , #btn_navOpen:hover span:nth-child(3) , #btn_navOpen:focus span:nth-child(3) { top:28% } 
    #btn_navOpen span:nth-child(3) , #btn_navOpen:hover span:nth-child(1) , #btn_navOpen:focus span:nth-child(1) { top:72% } 

    .logo__history { 
        width:43rem ; min-height:6rem ;
        position:absolute ; left:50% ; top:1rem ; transform:translateX(-50%) }
    #logo , #logo > a { width:20rem ; height:6rem }

    .VH__now , #VH__btn__open , .VH__body   { display:block }
    .vol__history , .VH__header , .VH__body { width:22rem }
    .vol__history , .VH__header { position:relative }
    .VH__header , .VH__header::before { height:4rem ; border-radius:0.6rem }
    .VH__header { padding:0 0 0 10rem ; background-color:#313131 }
    .open .VH__header   { background-color:#ffffff }
    .VH__header::before { 
        display:block ; content:"" ; width:100% ; box-sizing:border-box ;
        border:solid 1px rgba(255,255,255,0.1) ;
        position:absolute ; left:0 ; top:0 ;  ;
    }
    .VH__vol , .VH__now { padding:0.6rem 0 }
    .VH__vol { width:9rem ; position:absolute ; left:0 ; top:0 }
    .VH__now {  
        font-size:1.8rem ; font-weight:400 ; color:#ffffff ; 
        text-shadow:0 0 0.3rem rgba(0,0,0,0.2) ; 
    }
    .open .VH__now { color:#111111 ; text-shadow:none }
    #VH__btn__open {
        width:100% ; height:100% ; display:block ; overflow:hidden ; 
        font-size:0 ; color:transparent ; 
        position:absolute ; right:0 ; top:0
    }
    #VH__btn__open::before {
        display:block ; content:"" ; width:0.6rem ; height:0.6rem ; opacity:0.6 ;
        border:solid 0.1rem #ffffff ; border-top:none ; border-left:none ;
        position:absolute ; right:0.7rem ; top:1.9rem ; transform:translate(-50%,-50%) rotate(45deg) ;
    }
    .open #VH__btn__open::before , .open #VH__btn__open:hover::before , .open #VH__btn__open:focus::before {
        top:2.2rem ; transform:translate(-50%,-50%) rotate(225deg) scale(1.1) ;
        border-color:#111111 
    }
    #VH__btn__open::before { transition:0.3s all }
    #VH__btn__open:hover::before , #VH__btn__open:focus::before { opacity:1 ; transform:translate(-50%,-50%) rotate(45deg) scale(1.1) }

    .VH__body , .VH__item__link , .VH__item__link > b { transition:0.3s all }
    .VH__body { 
        width:100% ; height:0 ; overflow:hidden ; border-radius:0.6rem ;
        position:absolute ; left:0 ; top:4.5rem ; opacity:0 ;
        padding:0rem 2rem ; background-color:rgba(0,0,0,0.8) ;
    }
    .open .VH__body { padding-top:1rem ; padding-bottom:1rem ; opacity:1 ; height:auto }
    .VH__list , #VH__btn__close { display:none }
    .open .VH__list , .open #VH__btn__close { display:block }
    .VH__list { margin-bottom:0.5rem }
    
    .VH__item:last-child .VH__item__link  { text-align:center } 
    .VH__item__link {
        display:block ; padding:0.5rem 0.2rem 0.7rem ; opacity:0.8 ;
        font-size:1.6rem ; line-height:2.8rem ; text-align:left ; color:#ffffff ; 
        border-bottom:solid 1px rgba(255,255,255,0.1) ;
    }
    .VH__item__link > b {
        display:inline-block ; width:35% ; margin-right:0.5rem ;
        font-size:inherit ; line-height:inherit ; text-align:right ; font-weight:inherit ;
        color:#ff9828 
    }
    .VH__item__link:hover , .VH__item__link:focus { border-color:#ff9828 ; opacity:1 }

    #VH__btn__close , #VH__btn__close::before , #VH__btn__close::after , #btn_searchOpen { transition:0.3s all }
    #VH__btn__close {
        overflow:hidden ; position:relative ; 
        width:2rem ; height:2rem ; margin:auto ; opacity:0.4 ;
        font-size:0 ; color:transparent 
    }
    #VH__btn__close:hover , #VH__btn__close:focus { opacity:1 }
    #VH__btn__close::before , #VH__btn__close::after {
        display:block ; content:"" ; width:1.4rem ; height:0.1rem ; background-color:#ffffff ;
        position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    }
    #VH__btn__close::before { transform:translate(-50%,-50%) rotate(45deg) }
    #VH__btn__close::after  { transform:translate(-50%,-50%) rotate(135deg) }
    #VH__btn__close:hover::before  , #VH__btn__close:focus::before { transform:translate(-50%,-50%) rotate(135deg) }
    #VH__btn__close:hover::after  , #VH__btn__close:focus::after   { transform:translate(-50%,-50%) rotate(225deg) }

    #btn_searchOpen { top:1.5rem }
    #btn_searchOpen > b { background-position:-5rem 0 }
    .searchOpen #btn_searchOpen > b { background-position:-5rem -5rem }

    .navOpen #btn_navOpen span:nth-child(1) , .navOpen #btn_navOpen span:nth-child(3) {top:50% ; left:50% }



    /* nav */
    #nav { padding-top:11rem  }
    .nav__inner { margin:auto }
    .nav__deep1__list , .nav__etc { max-width:150rem ; margin:auto }
    .nav__deep1__list { margin-bottom:6rem ; padding-top:0.5rem }
    .nav__deep1__list::after { display:block ; content:"" ; clear:both }
    .nav__deep1__item {
        display:block ; width:14rem ; float:left ;
        position:relative ; min-height:37rem ;
    }
    .nav__deep1__item::after { 
        display:block ; content:"" ; width:1px ; height:100% ; background:#ffffff ;
        opacity:0.1 ; position:absolute ; right:0 ; top:0
    } 
    .nav__deep1__item:hover { background:none }
    .nav__deep1__link , .nav__deep2__list , .nav__deep2__link { border-radius:0 ; border:0 ; word-break:keep-all }
    .nav__deep1__item:last-child::after { display:none }

    .nav__deep1__item:nth-child(1) , .nav__deep1__item:nth-child(5) , .nav__deep1__item:nth-child(7) { width:15.5% }
    .nav__deep1__item:nth-child(2) , .nav__deep1__item:nth-child(3) , .nav__deep1__item:nth-child(4) { width:12.7% }
    .nav__deep1__item:nth-child(6) { width:15.4% }

    .nav__deep2__list { padding-bottom:0 }
    .nav__deep2__item { margin:0 auto 1rem ; display:block }
    .nav__deep2__item:last-child { margin-bottom:0 } 

    .nav__deep1__link , .nav__deep2__list { width:90% ; margin:auto } 
    .nav__deep2__link { font-size:2.8rem ; line-height:3.8rem ; padding:0.5rem 0.2rem 0.7rem }
    .nav__deep2__link {
        font-size:1.8rem ; line-height:2.8rem ; text-align:center ; font-weight:400 ;
        padding:0.5rem 0.5rem 0.7rem ; position:relative
    }

    .nav__deep1__link.now , .nav__deep2__link.now , .nav__deep1__link:hover , .nav__deep1__link:focus ,
    .nav__deep2__link:hover , .nav__deep2__link:focus { background:none ; color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) }
    .nav__deep2__link::before {
        display:block ; overflow:hidden ; content:"" ; width:0 ; height:1px ; background-color:#ffffff ;
        position:absolute ; bottom:0 ; left:50% ; transform:translateX(-50%) ; opacity:0.15 ;
        transition:0.3s all ;
    }
    .nav__deep2__link.now { border:solid 1px rgba(255,255,255,0.2) ; border-radius:0.4rem }
    .nav__deep2__link.now::before , .nav__deep2__link:hover::before , .nav__deep2__link:focus::before , .nav__etc { width:100% }  
    .nav__deep2__link.now:hover , .nav__deep2__link.now:focus { color:#ffffff ; background:none ; border-color:rgba(255,255,255,0.5) }  
    .nav__deep2__link.now::before { display:none }
    .nav__deep2__link.noLine::before { border:none }

    .nav__etc { display:block ; font-size:0 ; text-align:left ; margin-bottom:2rem ; width:98% }
    .nav__etc::after { display:block ; content:"" ; clear:both }
 
    .NE__list , .NEL__item { float:left }
    .NEL__item { position:relative }
    .NEL__item::after {
        display:block ; content:"" ; width:1px ; height:1rem ;
        background-color:#ffffff ; opacity:0.1 ;
        position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
    } 
    .NEL__item:last-child:after  { display:none }
    .NE__list , .nav__btn__event { border-radius:0.4rem }
    .NE__list { font-size:0 ; margin-bottom:1rem ; border:solid 1px rgba(255,255,255,0.1) ; margin-right:1rem }
    .NE__list::after { display:block ; content:"" ; clear:both }
    .NEL__link , .NEL__link::after , .nav__btn__event { transition:0.3s all }

    .NEL__link , .nav__btn__event  { padding:1rem 2.5rem 1.2rem ; font-size:1.6rem ; line-height:2.8rem }
    .NEL__link { 
        display:block ;  ; position:relative ;
        color:rgba(255,255,255,0.8)
    }
    .NEL__link:hover , .NEL__link:focus { color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;}
    .NEL__link::after {
        display:block ; content:"" ; overflow:hidden ; width:0 ; height:1px ;
        background-color:#ff9828 ; opacity:0 ;
        position:absolute ; left:50% ; bottom:-1px ; transform:translateX(-50%) ;
    } 
    .NEL__link:hover::after , .NEL__link:focus::after { width:100% ; opacity:1 }

    .nav__btn__event { 
        display:block ; float:left ; margin-bottom:1rem ;
        background-color:#ff9828 ; 
        color:#444444 ; font-weight:500 ;
    }
    .nav__btn__event:hover , .nav__btn__event:focus {
        background-color:#111111 ; color:#ff9828 ;
        text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
    }

    .nav__sns { width:17rem ; float:right }
    .nav__sns::after { display:block ; content:"" ; clear:both }
    .nav__sns__item  { float:left ; margin-right:1rem }
    .nav__sns__item:last-child { margin-right:0 }
    .nav__sns__link , .nav__sns__link::before { width:5rem ; height:5rem ; display:block ; transition:0.3s all }
    .nav__sns__link {
        overflow:hidden ; border-radius:100% ; 
        font-size:0 ; color:transparent ;
        position:relative ; background-color:rgba(255,255,255,0.1) ;
    }
    .nav__sns__link::before {
        content:"" ;
        background:url(../img/icon_sprite.png) no-repeat -10rem 0 ; background-size:auto 10rem ;
        position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) scale(0.9) ; opacity:0.7 ; 
    }
    .item2 .nav__sns__link::before { background-position:-15rem 0 }
    .item3 .nav__sns__link::before { background-position:-20rem 0 }
    .nav__sns__link:hover , .nav__sns__link:focus { background-color:rgba(255,255,255,0.15) ; }
    .nav__sns__link:hover::before , .nav__sns__link:focus::before { transform:translate(-50%,-50%) scale(1) ; opacity:1 }

    .nav__deep3__list , .nav__deep3__link { transition:0.3s all }
    .nav__deep3__list { 
        display:block ; border:solid 1px rgba(255,255,255,0.1) ; border-radius:0.4rem ;
        padding:0.5rem 1rem ; margin-top:0.5rem ;
    }
    .nav__deep2__item:hover .nav__deep3__list { border-color:rgba(255,255,255,0.3) }
    .nav__deep3__link {
        display:block ; padding:0.9rem 0.1rem ;
        font-size:1.4rem ; line-height:2rem ; text-align:center ; color:rgba(255,255,255,0.6) ;
        word-break:keep-all ;
        border-bottom:solid 1px rgba(255,255,255,0.1) ;
    }
    .nav__deep3__link.now { color:#ffffff }
    .nav__deep3__item:last-child .nav__deep3__link { border:none }
    .nav__deep3__link:hover , .nav__deep3__link:focus { color:#ffffff ; border-color:rgba(255,255,255,0.3) }



    /* search  */
    #SW_search_form { padding-top:12rem }
    #SW_search::before { width:98% ; top:8rem }

    #SWS_kind , #SWS_word { margin-right:0.5rem}
    #SWS_kind { width:15rem }
    #SWS_word { width:33rem ; padding:0.9rem 1.5rem 1.1rem ; }
    .SWS__btn { width:7rem }
 


    /* main */
    #main { padding-top:9rem }
     


    /* aside */
    #aside , .aside__list { 
        width:7rem ; height:34rem ; padding:0 ; margin:0 ;
        border-radius:0.8rem 0 0 0.8rem ;
    }
    #aside { 
        position:fixed ; right:-8rem ; bottom:10% ; z-index:80 ;  
        box-shadow:0 0 0.3rem rgba(0,0,0,0.3) ; background:none ;  
        transition:0.3s all ;
    }
    .sticky #aside { right:0 }
    .aside__list { 
        border:none ;
        background:linear-gradient(to bottom ,
            #ffffff 0 ,
            #ffffff 27rem ,
            #313131 27rem ,
            #313131 100% );  
    }
    .aside__item { width:100% ; height:9rem }
    .aside__item:last-child { height:7rem ; border-radius:0 }
    .aside__item::after { width:3rem ; height:0.1rem ; left:50% ; top:0 ; transform:translateX(-50%) }



    /* footer */
    #footer { padding:5rem 0 ; box-shadow:none }
    .footer__inner { width:98% ; max-width:140rem ; margin:auto }
    .footer__inner::before { 
        display:block ; content:"" ; width:21rem ; height:5rem ; margin-bottom:3rem ;
        background:url(../img/icon_sprite.png) no-repeat right top ; background-size:auto 10rem ;
    }
    .footer__sns { margin:0 ; position:absolute ; left:25rem ; top:0 }
    .footer__info , .footer__copy { width:90rem ; text-align:left }
    .footer__info { margin-bottom:1.5rem }
    .footer__info li , .footer__info li:first-child  { display:inline-block }
    .footer__info li:first-child  { padding-right:2rem }
    .footer__info li:nth-child(3) { padding-right:0 }
    .footer__info li:nth-child(3)::after { display:none }
    .footer__info li:nth-child(4) { padding-left:0 }
     
    .footer__family { 
        display:inline-block ; width:auto ; max-width:none ;
        position:absolute ; right:0 ; top:0 ;
        font-size:0 ;
    }
    .footer__fami__item { display:inline-block ; margin:0 ; width:auto ; position:relative }
    .footer__fami__item::after {
        display:block ; content:"" ; width:1px ; height:1rem ;
        background-color:#ffffff ; opacity:0.15 ;
        position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
    }
    .footer__fami__item:last-child:after { display:none }
    .footer__fami__link {
        padding:1rem 2.5rem 1.2rem ;
        border-radius:0 ;
    }
    .footer__fami__item:first-child .footer__fami__link { border-radius:0.6rem 0 0 0.6rem } 
    .footer__fami__item:last-child .footer__fami__link { border-radius:0 0.6rem 0.6rem 0 } 
    .footer__copy { margin-bottom:0 }

    .footer__sauce {
        display:inline-block ; width:auto ;
        position:absolute ; right:0 ; bottom:0 ;
    }
 
}   





/* PRINT */
@media print {  }