@charset "utf-8";

html{
	scroll-padding-top: 100px;
}
#food-brand{
	color: #000;
}
#food-brand a{
	color: #000;
	text-decoration: none;
	transition: 0.3s all;
}
#food-brand a:hover{
	opacity: 0.6;
}
#food-brand.brand-contents{
	max-width: 990px;
	width: 100%;
	font-size: 16px;
	margin: 55px auto 90px;
}
#food-brand .brand-menu{
	display: flex;
	width: 80%;
	margin: 0 auto;
}
#food-brand .brand-menu a{
	display: inline-block;
	width: 100%;
}
#food-brand .brand-menu .brand-menu-item{
	width: calc(100% / 10);
	font-size: 22px;
	text-align: center;
	font-weight: bold;
}
#food-brand .brand-menu .brand-menu-item:not(:last-of-type){
	border-right: solid 1px #aaa;
}
#food-brand .brand-wrap{
	display: flex;
	flex-direction: column;
	gap: 70px;
	margin-top: 50px;
}
#food-brand .brand-wrap .brand-list .brand-title{
	border-bottom: 1px solid #aaa;
	margin-bottom: 30px;
	padding-bottom: 4px;
	font-size: 26px;
	font-weight: bold;
}
#food-brand .brand-wrap .brand-list .brand-item{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px 50px;
}
#food-brand .brand-wrap .brand-list .brand-item::after{
	display: none;
}
#food-brand .brand-wrap .brand-list .brand-item a{
	display: inline-block;
	width: 100%;
}

@media screen and (max-width: 599px) {
	#food-brand.brand-contents{
		padding: 50px 20px 0;
		box-sizing: border-box;
		font-size: 15px;
	}
	#food-brand .brand-menu{
		flex-wrap: wrap;
		row-gap: 12px;
		width: 90%
	}
	#food-brand .brand-menu .brand-menu-item{
		width: calc(100% / 5);
		box-sizing: border-box;
		font-size: 20px;
	}
	#food-brand .brand-menu .brand-menu-item:nth-of-type(5){
		border-right: none;
	}
	#food-brand .brand-wrap{
		gap: 50px;
	}
	#food-brand .brand-wrap .brand-list .brand-title{
		margin-bottom: 25px;
		font-size: 20px;
	}
	#food-brand .brand-wrap .brand-list .brand-item{
		grid-template-columns: 1fr;
		gap: 20px;
	}
}