@charset "utf-8";
/* CSS Document */


 
/* header */
#top-head {  top: 0px; width: 100%; margin: 0 auto 0; padding: 0; line-height: 1; z-index: 999; padding-bottom:20px;   }
#top-head a,#top-head { color: #fff; text-decoration: none; }
#top-head .inner { position: relative; }
#top-head .logo { float: left; font-size: 36px; }

 
/* Fixed */
#top-head.fixed { margin-top: 0; top: 0; position: fixed; padding-top: 10px; height: 55px; background: #fff; background: rgba(255,255,255,.7); transition: top 0.65s ease-in; -webkit-transition: top 0.65s ease-in; -moz-transition: top 0.65s ease-in; }
#top-head.fixed .logo { font-size: 24px; color: #333; }
#top-head.fixed #menu ul li a { color: #333; padding: 0 20px; }
 
/* Toggle Button */
#nav-toggle { display: none; position: absolute; right: 12px; top: 4em; width: 34px; height: 36px; cursor: pointer; z-index: 101; }
#nav-toggle div { position: relative; }
#nav-toggle span { display: block; position: absolute; height: 4px; width: 100%; background: #666; left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#nav-toggle span:nth-child(1) { top: 0; }
#nav-toggle span:nth-child(2) { top: 11px; }
#nav-toggle span:nth-child(3) { top: 22px; }
#mobile-head{
	display:none;
}


@media screen and (max-width: 1200px) {

	#top-head, .inner { width: 100%; padding: 0; }
    #top-head { top: 0; position: fixed; margin-top: 0;background-color:#fff; }
    /* Fixed reset */
    #top-head.fixed { padding-top: 0; background: transparent; }
    #mobile-head { background: #fff; width: 100%; height: 5em; z-index: 999; position:relative; border-bottom:#777 solid 1px;display:flex; }
    #top-head.fixed .logo,#top-head .logo { position: absolute; left: 13px; top: 13px; color: #333; font-size: 26px; }
   
	/* 開いてないときは画面外に配置 */
	#menu { position: absolute;top: -540px; background: #333; width: 100%; text-align: center; padding: 10px 0; 
		          -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; }
     #menu  ul li:first-child {
	 display:none;
	}   
    #menu ul { list-style: none; position: static; right: 0; bottom: 0; font-size: 14px; display:block; height:auto;}
    #menu ul li { float: none; position: static; margin:0; }
    #top-head #menu ul li a,#top-head.fixed #menu ul li a { width: 100%; display: block; color: #fff; padding: 18px 0; }
    #nav-toggle { display: block; }
	
	.menu-add {}
	
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) { top: 11px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg); }
    .open #nav-toggle span:nth-child(2) { width: 0; left: 50%; }
    .open #nav-toggle span:nth-child(3) { top: 11px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg); }
    
	
	/* #menu スライドアニメーション */
    .open #menu {/* #menu top + #mobile-head height */ 
		-moz-transform: translateY(600px); -webkit-transform: translateY(600px);transform: translateY(600px);}
}

@media(max-width: 1200px){
	#nav-toggle {  top: 14px;  }
}