@charset "utf-8";   

body.navOpen { overflow:hidden }



/* Header */
#header , .header__container { width:100% ; min-height:5rem }
#header , #nav   { position:fixed ; top:0 ; background-color:#ffffff }
#header          { z-index:95 ; left:0 } 
.sticky #header  { box-shadow:0 0 0.3rem rgba(0,0,0,0.1) } 
.navOpen #header { box-shadow:none }
#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  { width:10rem ; height:3.5rem }
#logo , #btn_nav_open , #tnb_list { position:absolute ; top:50% ; transform:translateY(-50%) }
#logo     { left:0 ; transform:translateY(-50%) scale(0.8) }
#logo > a {
    display:block ; overflow:hidden ;
    background:url(../img/logo.png) no-repeat left top ; background-size:10rem auto ;
    font-size:0 ; color:transparent ; text-indent:-99rem ;
}

#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 { 
    right:6rem ;
    font-size:0 ; text-align:center ; 
}
.tnb__link {
    display:inline-block ; margin:0.2rem ; padding:0.3rem 1rem 0.5rem ;
    font-size:1.4rem ; line-height:100% ; 
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ;
    transition:0.3s all ;
}
.tnb__link:hover { background-color:#444444 ; border-color:#444444 ; color:#ffffff }



/* Nav */
#nav {
    width:100% ; height:100vh ; padding-top:5rem ;
    z-index:94 ; left:-101%
}
.navOpen #nav { left:0 }
.nav__container , .as__container { display:block ; width:100% }
.nav__container      { height:100% ; overflow:auto ; display:none }
.navOpen .nav__container { display:block } 
#as_form , #nav_list { width:90% ; max-width:50rem ; margin:auto }

#as_form       { margin-bottom:0.5rem } 
.as__container { 
    display:block ; width:100% ; padding:1rem 6rem 0 0 ;
    position:relative ; border-bottom:solid 0.2rem #ff6600 
} 

#as_word { width:100% ; font-size:1.8rem ; line-height:100% ; padding:1.2rem 0.2rem }
#as_btn  {
    display:block ; overflow:hidden ; text-indent:-99rem ; width:5rem ; height:5rem ; 
    position:absolute ; right:0 ; bottom:0
}
#as_btn > span , #as_btn > span::before , #as_btn > span::after , .navOpen #nav { transition:0.3s all }
#as_btn > span { width:100% ; height:100% ; font-size:0 ; color:transparent ; overflow:hidden }
#as_btn:hover > span { transform:translate(-50%,-50%) scale(1.1) } 
#as_btn > span , #as_btn > span::before , #as_btn > span::after { 
    display:block ;
    position:absolute ; left:50% ; top:50% ; 
    transform:translate(-50%,-50%) ;
} 

#as_btn > span::before , #as_btn > span::after { content:"" }
#as_btn > span::before { 
    width:1.8rem ; height:1.8rem ; border-radius:100% ;
    box-sizing:border-box ; border:solid 0.2rem #ff6600 
}
#as_btn > span::after { 
    width:0.8rem ; height:0.2rem ; border-radius:1rem ;
    background-color:#ff6600 ;
    transform:translate(-50%,-50%) rotate(45deg) ; left:68% ; top:68%
}

#nav_list { margin-bottom:2rem }
.nav__link , .nav__link::after , .nav__sub__link::after , .nav__sub__link::before { transition:0.3s all }
.nav__link { 
    display:block ; position:relative ; padding:1.5rem 0.2rem ;
    font-size:2rem ; line-height:120% ; font-weight:600 ; 
    border-bottom:solid 1px rgba(0,0,0,0.1) ;
}
.nav__link::after , .nav__sub__link::after {
    display:block ; content:"" ; width:0 ; 
    
    position:absolute ; left:0 ; bottom:-1px ;
} 
.nav__sub__link {
    display:block ; position:relative ; padding:1.2rem 0.2rem 1.2rem 1.5rem ;
    font-size:1.6rem ; line-height:120% ;
    border-bottom:solid 1px rgba(0,0,0,0.1) ;
}
.nav__sub__link::before {
    display:block ; content:"" ; width:0.6rem ; height:0.2rem ; 
    background-color:rgba(0,0,0,0.3) ;
    position:absolute ; left:0.3rem ; top:2rem
}
.nav__sub__link::after { height:0.1rem ; background-color:rgba(0,0,0,0.3) }

.nav__link::after { height:0.2rem ; background-color:#ff6600 }
.nav__link:hover , .nav__sub__link:hover { color:#111111 }
.nav__sub__link:hover::before { background-color:#ff6600 }
.nav__item:hover .nav__link::after , .nav__sub__link:hover::after { width:100% } 

.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) }

#btn_nav_close { margin-bottom:1rem }

#sitemap { display:none }
 


 
@media screen and (min-width:1024px){ 
   
    /* Header */
    #header , .header__container { min-height:8rem }
    #header { background-color:rgba(0,0,0,0.3) }
    .sticky #header , .navOpen #header { background-color:#ffffff ; box-shadow:none }
    .header__container , .nav__container , #sm_list { width:96% ; max-width:120rem ; margin:auto }
    #header::after { 
        background-color:rgba(255,255,255,0.1) ;
        position:absolute ; left:0 ; bottom:0
    } 
    .sticky #header::after , .navOpen #header::after { background-color:rgba(0,0,0,0.1) }
   
    #logo { transform:translateY(-50%) scale(1) ; left:50% ; transform:translate(-50%,-50%) }
    #logo > a  { background-position:left bottom } 
    .sticky #logo > a , .navOpen #logo > a { background-position:left top }

    #btn_nav_open { right:auto ; left:0 } 
    #btn_nav_open > span { background-color:#ffffff }
    .sticky  #btn_nav_open > span  , .navOpen  #btn_nav_open > span { background-color:#111111 }

    #tnb_list  { text-align:right ; right:0 }
    #tnb_list::after { display:block ; content:"" ; clear:both } 
    .tnb__link { 
        display:block ; float:left ; position:relative ;
        color:rgba(255,255,255,0.7) ; line-height:100% ; border:none ; border-radius:0 ;
        padding:0 0 0.2rem 0 ; margin:0 4rem 0 0 ;  
    }
    .sticky .tnb__link  , .navOpen .tnb__link  { color:#444444 }
    .tnb__link::after { 
        display:block ; content:"" ; width:1px ; height:1rem ; 
        background-color:rgba(255,255,255,0.2) ;
        position:absolute ; right:-2rem ; top:50% ; transform:translateY(-50%) ;
    }
    .sticky .tnb__link::after  , .navOpen .tnb__link::after { background-color:rgba(0,0,0,0.1) }
    .tnb__link:hover { background:none ; color:#ffffff }
    .sticky .tnb__link:hover  , .navOpen .tnb__link:hover { color:#111111 }

    .tnb__link:last-child { margin-right:0 }
    .tnb__link:last-child::after { display:none }



    /* Nav */ 
    #nav , .navOpen #nav , .sticky #nav { display:block ; left:0 ; top:8rem } 
    #nav { background:none ; z-index:96 ; transition:0.3s all } 
    .sticky #nav ,  .navOpen #nav { background-color:#ffffff }
    .sticky #nav { box-shadow:0 0.2rem 0.3rem rgba(0,0,0,0.1) }
    .nav__container { display:block } 
    #nav , .nav__container { padding:0 ; overflow:initial ; height:auto }
    .nav__container { position:relative ; padding-right:20rem } 
    #as_form { position:absolute ; right:0 ; top:0 ; width:17rem } 
    .as__container { padding-top:0 ; padding-right:5.1rem }
    #as_word   { 
        color:#ffffff ; background:none ; padding:1.2rem 0.2rem ;
        font-size:1.6rem ;
    }
    .sticky #as_word , .navOpen #as_word { color:#444444 }
    #nav_list  { width:100% ; margin:auto ; max-width:none ; display:flex ; flex-wrap:wrap }
    .nav__item { flex-grow:1 ; position:relative }
    .nav__link { 
        color:rgba(255,255,255,0.7) ; font-size:1.6rem ; font-weight:500 ; text-align:center ;
        text-shadow:0 0 0.3rem rgba(255,255,255,0.2) ; border-color:rgba(255,255,255,0.1) ;
    } 
    .nav__link::after { bottom:auto ; top:0 ; height:0.3rem }
    .sticky .nav__link, .navOpen .nav__link { color:#444444 ; border-color:rgba(0,0,0,0.1) ;}
    .nav__item:hover .nav__link { color:#ffffff }
    .sticky .nav__item:hover .nav__link , .navOpen .nav__item:hover .nav__link { color:#111111}
    .nav__link::after { left:50% ; transform:translateX(-50%) }
    
    #btn_nav_close { 
        width:1px ; height:1px ; opacity:0 ; margin:0 ;
        position:absolute ; right:0 ; bottom:0 ;
    }

    .nav__sub {
        display:block ; height:0 ; overflow:hidden ; opacity:0 ;
        position:absolute ; left:50% ; top:4.7rem ; transform:translateX(-50%) ;
        width:96% ; background-color:#ffffff ;
        border-radius:0.4rem ;  
        padding:0rem 1rem ; 
        transition:0.3s all ;
    }
    .nav__item:hover .nav__sub , .nav__sub.active { 
        overflow:initial ; height:auto ; opacity:1 ;
        padding: 1rem ; border:solid 1px rgba(0,0,0,0.1) ;
        box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.2) ;
    }
    .nav__sub__link { padding:0.7rem 0.2rem ; text-align:center }
    .nav__sub__link::before { display:none } 
    .nav__sub__link::after  { left:50% ; transform:translateX(-50%) }
    .nav__sub__item:last-child .nav__sub__link { border-color:rgba(0,0,0,0) } 


    .navOpen #nav { left:-101% }
    .navOpen .nav__container { display:none } 

    .navOpen #btn_nav_open > span { background-color:#ff6600 }



    /* Sitemap */
    #sitemap { 
        position:fixed ; left:-101% ; top:0 ; 
        width:100% ; height:100vh ; padding-top:8rem ; background-color:#ffffff ;
        display:block ;
    }
    .navOpen #sitemap { left:0 ; transition:0.3s all }
    .sm__container    { display:none ; overflow:auto  ; width:100% ; height:100% }
    .navOpen .sm__container { display:block }

    #sm_list { padding-top:3rem ; margin-bottom:2rem }
    #sm_list::after { display:block ; content:"" ; clear:both }
    .sm__item , .sm__item:first-child .sm__link { width:45% }
    .sm__item { float:left ; margin-right:5% ; margin-bottom:2rem }
    .sm__item:first-child { width:100% ; margin-right:0 }
    .sm__item:nth-child(3) , .sm__item:nth-child(5) , 
    .sm__item:nth-child(7) , .sm__item:nth-child(9) { float:right ; margin-left:5% ; margin-right:0 }
 
    .sm__link , .sm__link::after  { transition:0.3s all }
    .sm__link { 
        display:block ; margin-bottom:0.5rem ;
        font-size:2.2rem ; line-height:120% ; font-weight:600 ; color:#222222 ; letter-spacing:-0.1rem ;
        padding:1rem 0.2rem ; border-bottom:solid 1px rgba(0,0,0,0.1) ;
        position:relative ;
    }
    .sm__link::after {
        display:block ; content:"" ; width:0 ; height:0.2rem ;
        background-color:#ff6600 ;
        position:absolute ; left:0 ; bottom:-1px ;
    }
    .sm__item:hover .sm__link { color:#000000 }
    .sm__item:hover .sm__link::after { width:100% } 
 
    .sm__sub__link , .sm__sub__link > b , .sm__sub__link > span , .sm__sub__link::after { transition:0.3s all } 
    .sm__sub__link { 
        display:block ; padding:1rem 0.1rem ;
        border-bottom:dashed 1px rgba(0,0,0,0.05) ;
        position:relative ;
    }
    .sm__sub__link > b , .sm__sub__link > span { display:inline-block }
    .sm__sub__link > b { 
        font-size:1.2rem ; line-height:100% ; color:#ffffff ;
        background-color:#666666 ; margin-right:0.3rem ; margin-top:0.3rem ;
        padding:0.3rem 0.7rem 0.5rem ; border-radius:0.4rem ;
    }
    .sm__sub__link > span    { font-size:1.8rem ; line-height:140% }
    .sm__sub__link:hover > b { background-color:#000000 }
    .sm__sub__link:hover > span { color:#000000 } 
    .sm__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 ;
    }
    .sm__sub__link:hover::after { width:100% }

    #sm_close { margin-bottom:1.5rem }
  
} 
  




@media print {  }