/* NAVIGATION */
@charset "UTF-8";

/** NAVIGATION MENU
-------------------------------------*/
#navigation
{
	width: 100%;
	display:inline-block;
	position: fixed !important;
    position: absolute;
    color: #666666;
    background-color: #ffffff;
    z-index: 10000;
}
#menu_box
{
	height: 35px;
	margin: 15px 0;
}

#menu_box a
{
    text-decoration: none;
}

.navi_logo
{
	display: inline;
    padding-left: 10px;
    margin: 0 15px 0 5px;
}

#menu
{
	display: inline;
	overflow: hidden;
    vertical-align: middle;
}

#menu .navi_menu
{
	display: inline-block;
    margin: 3px 12px;
}

#menu a img {
    width: 100%;
}

#navi_line {
    position: fixed !important;
    width: 100%;
    height: 2px;
	background-image: linear-gradient(90deg, #999, #999, #999);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom left;
}

#toggle { display: none; }

/** Toggle MENU -under960px-
-------------------------------------*/
@media only screen and (max-width: 960px)
{
	#menu {	display: none; }
	
	.navi_logo img
	{
		width: 60%;
		max-width: 260px;
	    margin-top: 5px;
	}
	#menu
	{
		position: absolute;
    	text-align: right;
    	top: 60px;
    	right: 0;
    	width: 150px;
    	background-color: rgba(255, 255, 255, 0.8);
    	padding-top: 10px;
	}
	
	#navigation li.navi_menu
	{
    	margin: 10px 0;
    	padding-right: 10px;
   	}

	/* ToggleMark */
	#toggle{
		display: inline-block;
		position: relative;
    	float:right;
    	width: 90px;
    	background-color: #ccc;
	}
	#toggle a{
		display: block;
		position: relative;
    	text-align: right;
    	padding: 10px 50px 10px 15px;
		text-decoration: none;
	}
	#toggle a:hover{
		color: #333;
	}
	#toggle:before{
    	display: block;
    	content: "";
    	position: absolute;
    	top: 50%;
    	right: 10px;
    	width: 20px;
    	height: 20px;
    	margin-top: -10px;
    	background: #666;
	}
	#toggle a:before, #toggle a:after{
		display: block;
    	content: "";
    	position: absolute;
    	top: 50%;
    	right: 10px;
    	width: 20px;
    	height: 4px;
    	background: #ccc;
	}
	#toggle a:before{
    	margin-top: -6px;
  	}
	#toggle a:after{
    	margin-top: 2px;
	}
}

/** smartphone
-------------------------------------*/
@media only screen and (max-width: 768px)
{
	#menu {	display: none; }
	
	#menu_box
	{
		height: 35px;
		margin: 5px 0;
	}
	
	.navi_logo img
	{
		width: 60%;
		max-width: 260px;
	}
	#menu
	{
		position: absolute;
    	text-align: right;
    	top: 60px;
    	right: 0;
    	width: 150px;
    	background-color: rgba(255, 255, 255, 0.8);
    	padding-top: 10px;
	}
	
	#navigation li.navi_menu
	{
    	margin: 10px 0;
    	padding-right: 10px;
   	}

	/* ToggleMark */
	#toggle
	{
		display: inline-block;
		position: relative;
    	float:right;
    	width: 90px;
    	background-color: #ccc;
	}
	#toggle a
	{
		display: block;
		position: relative;
    	text-align: right;
    	padding: 10px 50px 10px 15px;
		text-decoration: none;
	}
	#toggle a:hover
	{
		color: #333;
	}
	#toggle:before
	{
    	display: block;
    	content: "";
    	position: absolute;
    	top: 50%;
    	right: 10px;
    	width: 20px;
    	height: 20px;
    	margin-top: -10px;
    	background: #666;
	}
	#toggle a:before, #toggle a:after{
		display: block;
    	content: "";
    	position: absolute;
    	top: 50%;
    	right: 10px;
    	width: 20px;
    	height: 4px;
    	background: #ccc;
	}
	#toggle a:before{
    	margin-top: -6px;
  	}
	#toggle a:after{
    	margin-top: 2px;
	}
}