@charset "utf-8";
/* MOBILE ****/

/* WRAP */
#SYP_wrap { display:block ; padding-top:50px }



/* HEADER */
#SYP_header , #SYP_header_inner { display:block }
#SYP_header { 
    width:100% ; min-width:300px ; position:fixed ; left:0px ; top:0px ; z-index:90 ; 
    background:url(../images/dot_b10.png) repeat-x 0px 49px #000  ; min-height:50px  }
#SYP_logo , #SYP_logo > a { display:block ; overflow:hidden  }
#SYP_logo , #SYP_logo > a { width:180px ; height:40px }
#SYP_logo { margin:10px auto }
#SYP_logo > a { font-size:0em ; text-indent:-9999px ; background:url(/images/logo.svg) no-repeat 0px 0px ; background-size:180px 30px }

#SYP_nav_btn , #SYP_nav_btn b , #SYP_nav_btn span { display:block ; overflow:hidden  }
#SYP_nav_btn b , #SYP_nav_btn span { transition:0.3s all }
#SYP_nav_btn , #SYP_nav_btn b { width:50px ; height:50px }
#SYP_nav_btn { position:fixed ; left:0px ; top:0px ; z-index:91 }
#SYP_nav_btn b { position:relative ; background-color:#000 }
#SYP_nav_btn span { 
    position:absolute ; left:50% ; transform:translate(-50%,-50%) ; font-size:0em ; text-indent:-9999px ;  
    width:28px ; height:4px ; border-radius:10px ; background-color:#ffffff }
#SYP_nav_btn span:nth-child(1) { top:15px }
#SYP_nav_btn span:nth-child(2) { top:50% }
#SYP_nav_btn span:nth-child(3) { top:35px }

.open #SYP_nav_btn span:nth-child(1) { top:50% ; transform:translate(-50%,-50%) rotate(-45deg)}
.open #SYP_nav_btn span:nth-child(2) { opacity:0  }
.open #SYP_nav_btn span:nth-child(3) { top:50% ; transform:translate(-50%,-50%) rotate(45deg)}
.open #SYP_nav_btn b { background-color:#000 }

#SYP_nav , #SYP_nav > ul , .SYP_nav_li , .SYP_sub , .SYP_nav00 , .SYP_nav { display:block ; overflow:hidden }
#SYP_nav { 
    width:100% ; overflow:auto ; height:100vh  ; box-sizing:border-box;     
    position:fixed ; left:-100% ; top:50px ; z-index:89 ; background-color:rgba(0,0,0,0.6)  }
.open #SYP_nav { left:0px }
#SYP_nav > ul { background-color:#ffffff }
#SYP_nav , .SYP_nav00 , .SYP_nav_li , .SYP_nav , #SYP_nav_close b { transition:0.3s all }
.SYP_nav00 { 
    font-size:1.1em ; line-height:1em ; color:#ffffff ; text-align:center ; font-weight:500 ;  
    background-color:#294c98 ; padding:17px 5px }
.SYP_nav00.active { background-color: #44B634; color: #fff;} 
.SYP_nav00 > span { display:none }
.SYP_sub { padding:5px ; padding-bottom:15px ; text-align:center ; background:none }
.SYP_sub_li { display:inline-block }

.SYP_nav { 
    font-size:1em ; line-height:1.4em ; border:solid 1px rgba(0,0,0,0.1) ; box-sizing:border-box ;  
    padding:7px 20px ; border-radius:60px ; margin:6px ; word-break:keep-all  } 

.SYP_nav.active {border:solid 1px rgba(0,0,0,0.4) ; color: #000 ;}
#SYP_nav_close , #SYP_nav_close b , #SYP_nav_close span { display:block ; overflow:hidden }
#SYP_nav_close , #SYP_nav_close b { width:20px ; height:20px }
#SYP_nav_close { margin:20px auto ; margin-bottom:70px }
#SYP_nav_close b { position:relative ; opacity:0.6  }
#SYP_nav_close span { 
    position:absolute ; left:50% ; top:50% ;    
    width:20px ; height:2px ; background-color:#ffffff ;  
    border-radius:10px ; font-size:0em ; text-indent:-9999px }
#SYP_nav_close span:nth-child(1) { transform:translate(-50%,-50%) rotate(-45deg) }
#SYP_nav_close span:nth-child(2) { transform:translate(-50%,-50%) rotate(45deg) }
#SYP_nav_close:hover b { opacity:1 }



/* ASIDE */
#SYP_aside , #SYP_aside_top , #SYP_aside_top span { display:block ; overflow:hidden }
#SYP_aside { margin-bottom:50px }
#SYP_aside_top , #SYP_aside_top span { width:60px ; height:60px ; transition:0.3s all  }
#SYP_aside_top { margin:auto ; background-color:rgba(0,0,0,0.7) ; border-radius:4px }
#SYP_aside_top span { background:url(../images/top_icon.png) no-repeat 0px 0px ; opacity:0.7 ; font-size:0em ; text-indent:-9999px }
#SYP_aside_top:hover { background-color:rgba(0,0,0,0.9) }
#SYP_aside_top:hover span { opacity:1 }

 

/* FOOTER */
#SYP_footer , #SYP_footer_nav , #SYP_footer_copy , .SYP_FN_list , .SYP_FN_a { display:block ; overflow:hidden }
#SYP_footer { background-color:#333333;font-size: 0.9em;    color: rgba(255,255,255,0.8);    letter-spacing: 0.5px;}
#SYP_footer_nav { background-color:#224182 ; padding:10px }

.SYP_FN_list { text-align:center } 
.SYP_FN_list li { display:inline-block ; margin:10px }
.SYP_FN_a {  
    font-size:0.8em ; line-height:1em ; color:rgba(255,255,255,0.8) ; transition:0.3s all ;  
    background-color:rgba(255,255,255,0.05) ; border:solid 1px rgba(255,255,255,0.2); 
    padding:10px 20px ; border-radius:40px }
.SYP_FN_a:hover { background-color:rgba(0,0,0,0.6) ; border-color:rgba(0,0,0,0.1) ; color:#ffffff }

#SYP_footer_copy { padding:50px 20px }
.SYP_footer_inner p span, .SYP_footer_inner p a { text-align:left ; font-size:0.9em ; line-height:1.6em ; color:rgba(255,255,255,0.9); line-height:inherit ;font-weight:inherit ; display:inline-block ;word-break:keep-all; }  
.SYP_footer_inner p span{ padding: 6px 0;width: 100%; }
.SYP_footer_inner p.copy span{ padding-top: 12px; font-size:0.67em;}
.SYP_footer_inner p.copy a{ font-size:0.67em;}


.lang { font-size:inherit ; line-height:inherit ; color:inherit ; font-weight:inherit }



/* PC ****/
@media all and (min-width:1100px){
 
    /* WRAP */
    #SYP_wrap { padding-top:0px }    
    /* HEADER */
    #SYP_header , .SYP_header_inner { display:block ; overflow:hidden  }
    #SYP_header , .SYP_nav00 , .SYP_nav00 > span , .SYP_nav > span { transition:0.3s all }
    #SYP_header { min-height:80px ; height:80px ; background-color:rgba(0,0,0,0.3) ; background-position:0px 79px  }
    
    #SYP_header.sticky , #SYP_header.open , #SYP_header:hover { background-color:#ffffff } 
    #SYP_header:hover , #SYP_header.open { height:400px } 
    #SYP_header:hover { border-bottom:solid 1px rgba(0,0,0,0.1) ; box-shadow:0px 0px 3px rgba(0,0,0,0.3)  }
    
    #SYP_logo { position:fixed ; margin:0px ; top:20px ; left:40px ; z-index:91 }
    #SYP_logo > a { background-image:url(../images/logo.png) ; background-size:180px 80px  }
    #SYP_header.sticky #SYP_logo > a ,
    #SYP_header.open #SYP_logo > a , #SYP_header:hover #SYP_logo > a  { background-position:0px -40px }
    #SYP_nav_btn { right:40px ; top:15px; display: none; }
    #SYP_nav_btn b { background:none }
    

    #SYP_nav , .SYP_nav_li { margin:0px }
    #SYP_nav { position:static ; padding-left:260px ; padding-right:130px ; height:auto ; background:none }
    #SYP_nav > ul { background:none }
    .SYP_nav_li { float:left ; display:block ; overflow:hidden ; position:relative ; width:15% ; padding:0px  }
    .SYP_nav_li.li3 { width:19% }
    .SYP_nav_li.li6 { width:13% }
    .open .SYP_nav00 , .SYP_nav00 { line-height:80px ; padding:0px ; font-weight:400 ; color:rgba(255,255,255,0.8) ; background:none ; position:relative }
    .SYP_nav00 > span , .SYP_nav > span { display:block ; overflow:hidden }
    .SYP_nav00 > span { 
        opacity:0 ; position:absolute ; left:0px ; top:0px ; 
        width:100% ; height:2px ; background-color:#44B634 }
    .SYP_nav00:hover > span { opacity:1 }
    .SYP_sub { padding:0px ; height:0px  }
    #SYP_nav_close { width:0px ; height:0px ; margin:0px; display: none; }
    .SYP_sub_li , .SYP_nav { margin:0px ; display:block ; overflow:hidden } 
    .SYP_nav_li .SYP_nav.active{ background-color: #fff; border: none;}
    .SYP_nav00:hover > span { background-color:#44B634 ; opacity:1 ; display:block } 
    
    .sticky .SYP_nav00 , .open .SYP_nav00 , #SYP_header:hover .SYP_nav00 { color:#444444 }
    .SYP_nav00.active,  #SYP_nav00:hover{ background: none;}
    #SYP_header.open .SYP_sub , #SYP_header:hover .SYP_sub { height:320px ; padding-top:10px } 
    .open .SYP_nav , .SYP_nav { margin:0px ; position:relative ; padding:13px 5px ; border:0px ; border-radius:0px }
   
    .open .SYP_nav > span , .SYP_nav > span {  position:absolute ; left:50% ; bottom:0px ; transform:translateX(-50%) ; opacity:0 ;    width:20px ; height:2px ; border-radius:10px ; background-color:#2b51a3  }
    .SYP_nav00.active  > span , .SYP_sub .SYP_nav.active  > span , .SYP_sub .SYP_nav:hover  > span{ opacity:1 ; }
    
    #SYP_header:hover #SYP_nav_btn span { background-color:#000000 }
    #SYP_header:hover #SYP_nav_btn span:nth-child(1) { top:50% ; transform:translate(-50%,-50%) rotate(-45deg)}
    #SYP_header:hover #SYP_nav_btn span:nth-child(2) { opacity:0  }
    #SYP_header:hover #SYP_nav_btn span:nth-child(3) { top:50% ; transform:translate(-50%,-50%) rotate(45deg)}
    #SYP_header:hover #SYP_nav_btn b { background-color:none }
    
    .sticky #SYP_nav_btn span , .open #SYP_nav_btn span { background-color:#111111 } 
    .open #SYP_nav_btn , .open #SYP_nav_btn b { background:none }
    .open #SYP_nav_btn b { opacity:0.5 }
    .open #SYP_nav_btn:hover b { opacity:0.8 }
    
    .open #SYP_nav_close {    position:absolute ; left:50% ; bottom:5px ; transform:translate(-50%,-50%) ;   width:20px ; height:20px }
    .open #SYP_nav_close b { opacity:0.3 }
    .open #SYP_nav_close:hover b { opacity:1 }
    .open #SYP_nav_close span { background-color:#111111 }
    
    
    
    /* ASIDE */
    #SYP_aside {   position:fixed ; right:0px ; bottom:0px ; z-index:80 ; opacity:0 ; transition:0.3s all ;   width:60px ; height:60px ; margin:0px ; }
    #SYP_aside.active { opacity:1 }
    #SYP_aside_top { border-radius:0px }
 
    

    /* FOOTER */
    #SYP_footer_nav { padding:0px }
    .SYP_footer_inner p {padding: 6px 0;  color: rgba(255,255,255,0.8);font-size:  14px;  }
    .SYP_footer_inner p span, .SYP_footer_inner p a{    font-size:  14px; display:inline ;        color: rgba(255,255,255,0.8);        letter-spacing: 0.5px;}
    .SYP_footer_inner p.copy{padding-top: 12px;}
    .SYP_FN_list , .SYP_footer_inner { display:block ; overflow:hidden  }
    .SYP_FN_list , .SYP_footer_inner { width:1100px ; margin:auto  }
    .SYP_FN_list li { margin:0px ; padding:0px ; float:right }
    .SYP_FN_list li:first-child { float:left }
    .SYP_FN_a { border-radius:0px ; border:0px ; padding:20px 30px }
    .SYP_FN_list li:nth-child(3) { border-right:solid 1px rgba(255,255,255,0.15)}
 
    #SYP_footer_copy { padding:40px 0px  }
    .SYP_FP { font-size:0.9em ; color:rgba(255,255,255,0.8) ; letter-spacing:0.5px  }
    .SYP_FP span { margin:0px ; padding:0px 10px }
    .SYP_FP.link{ margin-bottom: 2em;}
    .SYP_FP.link a{ padding:0 16px; font-size: 0.67em; color: #efefef;}
    .SYP_FP.info { margin-bottom:10px }
    .SYP_FP.address { margin-bottom:20px }
    .SYP_FP.address span {  background:url(../images/dot_w10.png) no-repeat 100% 8px ; background-size:1px 10px }
    .SYP_FP.address span:last-child { background:none }
}