@charset "utf-8";   

body.navOpen { overflow:hidden }



/* Header */
#header , .header__container { width:100% ; min-height:5rem } 
#header , #nav { position:fixed ; left:0 ; top:0 }
#header { background-color:#ffffff ; z-index:95 }
#header::after {
    display:block ; content:"" ; width:100% ; height:1px ;
    background-color:rgba(0,0,0,0.1) ;
    position:absolute ; left:0 ; bottom:0 ; 
}
.header__container { position:relative }
#logo , #logo > a { display:block ; width:10rem ; height:3.5rem }
#logo , #btn_nav_open , #tnb_list { position:absolute ; top:50% ; transform:translateY(-50%) }
#logo { left:-0.5rem ; transform:translateY(-50%) scale(0.8) }
#logo > a {
    font-size:0 ; color:transparent ; overflow:hidden ;
    background:url(../img/logo.png) no-repeat left top ; background-size:10rem auto ;
}
 
#header , #btn_nav_open , #btn_nav_open > span { transition:0.3s all } 
#btn_nav_open {
    display:block ; overflow:hidden ; text-indent:-99rem ; width:5rem ; height:5rem ;
    right:0 
}
#btn_nav_open > span {  
    display:block ; width:3rem ; height:0.2rem ;
    background-color:#111111 ; border-radius:1rem ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
#btn_nav_open > span:nth-child(1) , #btn_nav_open:hover > span:nth-child(3) { top:35% }
#btn_nav_open > span:nth-child(3) , #btn_nav_open:hover > span:nth-child(1) { top:65% }
#btn_nav_open:hover > span:nth-child(2) { transform:translate(-50%,-50%) rotate(180deg) }

.navOpen #btn_nav_open > span { background-color:#ff6600 } 
.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) { top:50% ; left:50% ; width:2.4rem }
.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) , .navOpen #btn_nav_open:hover > span:nth-child(3) { top:50% ; left:50% ; width:3rem }
.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) }

#tnb_list  { display:block ; right:8rem }
#tnb_list::after { display:block ; content:"" ; clear:both }
.tnb__item { float:left ; margin-right:1.5rem ; padding-right:1.5rem ; position:relative }
.tnb__item::after {
    display:block ; content:"" ; width:1px ; height:1rem ; 
    background-color:rgba(0,0,0,0.15) ;
    position:absolute ; right:0 ; top:50% ; transform:translateY(-50%) ;
}
.tnb__item:last-child { margin-right:0 ; padding-right:0 }
.tnb__item:last-child::after { display:none }
.tnb__link { 
    display:block ; font-size:1.2rem ; line-height:100% ; padding-bottom:0.2rem ;
    transition:0.3s all ;
}
.tnb__link:hover { color:#111111 }



/* Nav */
#nav { 
    width:100% ; height:100vh ; 
    left:-101% ; z-index:94 ; padding-top:5rem ;
    background-color:#ffffff ;
}
.navOpen #nav { left:0 } 
#nav_container , #nav_bg { display:none }
.navOpen #nav_container  { display:block } 
#nav_right { width:100% ; height:100% ; overflow:auto }

#nav_list , #nav_etc , #btn_nav_close { margin:0 auto 2rem }
.navOpen #nav , .nav__link , .nav__link::after , 
.nav__sub__link , .nav__sub__link::after , .nav__sub__link > b , .nav__sub__link > span { transition:0.3s all }
.nav__link , .nav__sub { border-bottom:solid 1px rgba(0,0,0,0.1) }
.nav__link { 
    display:block ; padding:1.2rem 5% ; position:relative ;
    font-size:2rem ; line-height:120% ; font-weight:600 ; color:#222222 ; letter-spacing:-0.1rem ; 
} 
.nav__link::after {
    display:block ; content:"" ; overflow:hidden ; width:0 ; height:0.2rem ; 
    background-color:#ff6600 ;
    position:absolute ; left:0 ; bottom:-1px ;
}
.nav__item:hover .nav__link , .nav__link.now { color:#111111 }
.nav__item:hover .nav__link::after , .nav__link.now::after { width:100% }

.nav__sub { padding:0 5% 2rem }
.nav__sub__link { 
    position:relative ;
    display:block ; padding:1.2rem 0 ; border-bottom:solid 1px rgba(0,0,0,0.1) ; }
.nav__sub__link > b , .nav__sub__link > span { display:inline-block ; word-break:keep-all }

.nav__sub__link > b { 
    padding:0.3rem 0.7rem 0.5rem ; border-radius:0.4rem ; margin:0.2rem 0.3rem 0 0 ;
    font-size:1.1rem ; line-height:100% ; color:#ffffff ; 
    background-color:#444444 ;
}
.nav__sub__link > span { font-size:1.6rem ; line-height:140% ;}
.nav__sub__item:last-child .nav__sub__link { border-color:rgba(0,0,0,0) }
.nav__sub__link:hover > b , .nav__sub__link.now > b  { background-color:#ff6600 ; text-shadow:0 0 0.3rem rgba(0,0,0,0.1) }
.nav__sub__link:hover > span { color:#111111 }
.nav__sub__link::after {
    display:block ; overflow:hidden ; content:"" ; width:0 ; height:1px ;
    background-color:rgba(0,0,0,0.3) ;
    position:absolute ; left:0 ; bottom:-1px ;
}
.nav__sub__link:hover::after { width:100% ;}

#nav_etc { font-size:0 ; text-align:center }
#nav_etc > li { display:inline-block ; margin:0.2rem 0.5rem }
#nav_etc a , #nav_etc a::after { 
    display:block ; border-radius:0.4rem ; box-sizing:border-box ;
    transition:0.3s all ;
}
#nav_etc a { 
    padding:1rem 1.5rem 1.2rem ; font-size:1.4rem ; line-height:100% ;
    position:relative ; 
}
#nav_etc a::after {
    width:100% ; height:100% ; content:"" ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    border:solid 1px rgba(0,0,0,0.1)
}
#nav_etc a:hover  { background-color:#111111 ; color:#ffffff }
#nav_etc a:hover::after { opacity:0 }
  
.btn__close , .btn__close::before , .btn__close::after  { transition:0.3s all }
.btn__close {
    display:block ; overflow:hidden ; width:2rem ; height:2rem ; margin:auto ;
    font-size:0 ; color:transparent ; text-indent:-99rem ;
    position:relative ; opacity:0.3  
}
.btn__close::before , .btn__close::after {
    display:block ; content:"" ; width:1.4rem ; height:1px ; 
    background-color:#000000 ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.btn__close::before { transform:translate(-50%,-50%) rotate(45deg) }
.btn__close::after  { transform:translate(-50%,-50%) rotate(-45deg) }
.btn__close:hover   { opacity:1 } 
.btn__close:hover::before , .btn__close:hover::after { width:1.8rem }
.btn__close:hover::before { transform:translate(-50%,-50%) rotate(135deg) }
.btn__close:hover::after  { transform:translate(-50%,-50%) rotate(45deg) }




 
@media screen and (min-width:1024px){ 
    
    /* Header */
    #header , .header__container { min-height:8rem } 
    #header { background-color:rgba(0,0,0,0.5) } 
    .sticky #header , .navOpen #header  { background-color:#ffffff }
    .sticky #header { box-shadow:0 0 0.3rem rgba(0,0,0,0.1) }
    .navOpen #header { box-shadow:none } 
    .header__container { width:96% ; max-width:120rem ; margin:auto }
    #logo { left:0 ; transform:translateY(-50%) scale(1) }
    #logo > a { background-position:left bottom }
    .sticky #logo > a , .navOpen #logo > a { background-position:left top }
    #tnb_list { right:10rem }
    .tnb__link { color:rgba(255,255,255,0.7) ; text-shadow:0 0 0.3rem rgba(0,0,0,0.2) }
    .sticky .tnb__link , .navOpen .tnb__link { color:#444444 ; text-shadow:none }
    .sticky .tnb__link:hover , .navOpen .tnb__link:hover { color:#111111 } 
    .tnb__link:hover { color:#ffffff }
    .tnb__item::after { background-color:rgba(255,255,255,0.2) }
    .sticky .tnb__item::after , .navOpen .tnb__item::after { background-color:rgba(0,0,0,0.1) } 
    #btn_nav_open > span { background-color:#ffffff }
    .sticky #btn_nav_open > span  { background-color:#111111 }  
    .navOpen #btn_nav_open > span { background-color:#ff6600 } 



    /* Nav */
    #nav { padding-top:8rem }
    #nav::after , #nav_etc::after { display:block ; content:"" ; clear:both } 
    #nav_bg , #nav_right { height:100% ; display:block ; margin:0 }
    #nav_bg    { float:left ; width:50% }
    #nav_right { float:right ; width:50% }
    
    #nav_bg > span { display:block ; width:92% ; height:100% ; overflow:hidden ; position:relative }
    #nav_bg > span::before ,  #nav_bg > span::after {
        display:block ; content:"" ; width:100% ; height:100% ;
        position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) scale(1.05) ;
    }
    #nav_bg > span::before { background:url(../img/visual_slide1.jpg) no-repeat center ; background-size:cover }
    #nav_bg > span::after  { background-color:rgba(0,0,0,0.3) } 
    #nav_container { width:100% ; max-width:60rem ; padding:2rem 0 0 0.5rem ; position:relative }

    #nav_list  { margin-bottom:4rem }
    .nav__item { position:relative ; padding-left:12rem ; border-top:solid 1px rgba(0,0,0,0.1) }
    
    .nav__link {
        width:10rem ; padding:1rem 0 ; border:0 ;
        position:absolute ; left:0
    }
    .nav__sub { border:none ; margin-bottom:1rem ; padding:0 }
    .nav__item:first-child { padding-left:0 ; border-top:none } 
    .nav__item:first-child .nav__link { position:relative ; margin-bottom:1rem } 
    .nav__sub__link { padding:1.1rem 0 }

    #nav_etc { width:100% ; margin-bottom:2rem }
    #nav_etc > li { float:left ; margin:0 0.5rem 0 0 }
    #nav_etc > li:last-child { margin-right:0 }

    #btn_nav_close { 
        margin:0 ; 
        position:absolute ; right:0 ; bottom:0.8rem ;
    }
 
}
  




@media print {  }