@charset "utf-8";


/*==================================================
  Menu
==================================================*/
#menu{
	position: relative;
	z-index: 2;
}


#menu_00{
	width: 100%;
	margin: 0;
	padding: 0;
}
#menu_01,
#menu_02,
#menu_03,
#menu_04{
	background-color: #000000;
	width: 100%;
	margin: 0;
	padding: 0;
}

#menu_05{
	background-color: #000000;
	width: 100%;
	margin: 0;
	padding: 0 0 10px 0;
}


.menu_inner{
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
}


.menu_inner p{
	margin: 0;
	padding: 0;
}


.menu_text{
	background-color: #000000;
	color: #ffffff;
	margin: 0;
	padding: 20px 30px;
}


.menu_text p{
	font-size: 1.4rem;
	line-height: 1.9;
	margin: 0;
	padding: 0;
}




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

	#menu_05{
		background-color: #000000;
		width: 100%;
		margin: 0;
		padding: 0 0 100px 0;
	}

}




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

	#menu_05{
		background-color: #000000;
		width: 100%;
		margin: 0;
		padding: 0 0 150px 0;
	}

	.menu_text{
		margin: 0;
		padding: 15px 20px;
	}


	.menu_text p{
		font-size: 1.2rem;
		line-height: 1.9;
		margin: 0;
		padding: 0;
	}

}




/*==================================================
  SlideMenu
==================================================*/
.menu_slide_inner{
	background-color: #000000;
	width: 100%;
	margin: 0;
	padding: 0 0 0 91px;
	box-sizing: border-box;
	position: relative;
}


.menu_slide_inner h3{
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
}


.slide{
	background-color: #000000;
	margin: 0;
	padding: 0;
}


.slide li{
	margin: 0;
	padding: 0;
}




/*==================================================
  ToppingMenu
==================================================*/
.topping{
	margin: 0;
	padding: 0;
	border-top: dotted 4px #cccccc;
	border-left: dotted 4px #cccccc;
}


.topping li{
	background-color: #ffffff;
	width: 20%;
	margin: 0;
	padding: 15px 25px;
	border-bottom: dotted 4px #cccccc;
	border-right: dotted 4px #cccccc;
	box-sizing: border-box;
	float: left;
}




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

	.topping li{
		width: 20%;
		padding: 10px 20px;
	}

}


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

	.topping li{
		width: 20%;
		padding: 5px 10px;
	}

}


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

	.topping li{
		width: 25%;
		padding: 5px 10px;
	}

}


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

	.topping li{
		width: 33.33333%;
		padding: 5px 10px;
	}

}


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

	.topping li{
		width: 50%;
		padding: 5px 10px;
	}

}


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

	.menu_slide_inner{
		padding: 0;
	}


	.menu_slide_inner h3{
		display: none;
	}

}




/*==================================================
  MenuNavi
==================================================*/
.menu_navi{
	background-color: #333333;
	width: 100px;
	height: 100vh;
	margin: 0;
	padding: 0;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1;
}


.menu_navi ul{
	margin: 0;
	padding: 0;
}


.menu_navi ul li{
	width: 100px;
	height: 100px;
	font-size: 1.4rem;
	line-height: 92px;
	color: #ffffff;
	margin: 0;
	padding: 4px;
	border-bottom: dotted 1px #000000;
	box-sizing: border-box;
	text-align: center;
}


.menu_navi ul li a{
	color: #ffffff;
}


.menu_navi ul li.active{
	color: #ff6600;
	border: solid 4px #666666;
	padding: 0;
}


.menu_navi ul li.active a{
	color: #ff9900;
}


.menu_navi p{
	color: #ffffff;
	margin: 0;
	padding: 20px 4px;
	text-align: center;
}


.menu_navi p i{
	width: 92px;
	font-size: 3.0rem;
	padding: 0 0 5px 0;
}




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

	.menu_navi{
		background-color: #333333;
		width: 100px;
		margin: 0;
		padding: 0;
		position: fixed;
		top: 100px;
		right: 0;
		z-index: 9999;
	}

}




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

	.menu_navi{
		display: none;
	}

}