@charset "UTF-8";

/* CSS Document */

body header{
	position: fixed;
	top: 0;
	z-index: 999;
	width: 100%;
	background-color: #000;
	color: #fff;
}
body header img{
	width: 30%;
}
body header a{
	color: #fff;
}


.mainnav ul{
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid #888;
	border-bottom: 1px solid #888;
}
.mainnav ul li{
	text-align: center;
	width: 100%;
}
.mainnav ul a{
	display: block;
	padding: 0.5rem 5%;
}
.mainnav ul .fs{
	font-size: 0.5em;
}

/*----------------------
スマホ以下
----------------------*/
@media screen and (max-width: 767px) {
	.mainnav li ~ li{
		border-top: 1px solid #888;
	}
}

/*----------------------
タブレット以上
----------------------*/
@media screen and (min-width: 768px) {
	body header img {
		width: 100%;
		max-width: 110px;
	}
	.mainnav{
		display: flex;
		justify-content: space-between;
	}
	.mainnav ul{
		border-top: none;
	}
	.mainnav ul li{
		border-left: 1px solid #888;
		width: 10em;
	}


}

/*----------------------
PC以上
----------------------*/
@media screen and (min-width: 1024px) {
	header {
		max-width: 1280px;
	}
}