@charset "utf-8";

/* ================================================================ */
/* 食                                                               */
/* ================================================================ */
.shoku-box{
	background: url(../img/shoku/bg.jpg) repeat-y;
	padding-bottom:20px;
}

.shoku-box h2{
	text-align:center;
	margin:10px 0;
}


.shoku-box-list{
	text-align:center;
}
.shoku-box-list > ul {
	letter-spacing: -.40em;
 }
.shoku-box-list > ul li{
	width: 225px;
	margin: 5px;
	text-align:center;
	display: inline-block; 
	vertical-align: top;
	letter-spacing: normal;
}

.shoku-box-list > ul li .item-box{
	border-radius: 5px;
	text-align:center;
	padding:8px;
	background: #e58615;
}

.shoku-box-list > ul li .photo-box img{
	border-radius: 3px 3px 0 0;
	width:100%;
}
.shoku-box-list > ul li .item-attr{
	border-radius: 0 0 3px 3px;
	padding:5px;
	background:#fff;
}

.shoku-box-list > ul li .item-name{
	font-size:16px;
	font-weight:bold;
	text-align:center;
	background:#B66200;
	color:#fff;
	border-radius:3px;
	padding:5px 0;
}
.shoku-box-list > ul li .item-text{
	text-align:left;
	font-size:13px;
	padding:4px 5px;
	color:#333;
}

.shoku-box-list > ul li .shoku-bannar{
	margin-bottom:3px;
}

.shoku-box-list > ul li .shoku-bannar img{
	width:100%;
}

.shoku-box-list > ul li.long {
	width: 695px;
	margin: 10px auto;
	display: flex;
	align-items: flex-start;
}
.shoku-box-list > ul li.long .item-box {
	flex-shrink: 0;
	width: 225px;
	margin-right: 15px;
}
.shoku-box-list > ul li.long .movie {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.shoku-box-list > ul li.long .movie iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

/* brand */
.brand-box {
	overflow: hidden;
}
.brand-box img {
	max-width: 100%;
}
.brand-box h2 {
	padding: 40px 10px;
	text-align: center;
}
.brand-box ul li {
	margin: 0 20px 30px;
	padding: 15px;
	border-radius: 10px;
	box-shadow: 0 0 8px #c3c3c3;
}
.brand-box ul li img {
	margin-bottom: 20px;
}
.brand-box .movie {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.brand-box .movie iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}
.brand-box .pdf {
	margin: 20px;
	padding: 20px 20px 0;
	border: 1px solid #ccc;
	font-size: 120%;
}
.brand-box .pdf p {
	margin-bottom: 20px
}



/* ================================================================================================ */
/* レスポンシブ対応                                                                                 */
/* ================================================================================================ */
@media screen and (max-width: 980px) {



}

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

	.shoku-box-list > ul li{
		width: 46%;
		margin:5px 4px;
		margin-bottom:10px;
	}
	.shoku-box-list > ul li.long {
		width: calc(92% + 4px);
	}
	.shoku-box-list > ul li.long .item-box {
		width: 49%;
		margin-left: -2px;
		margin-right: 10px;
	}
}

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

	.shoku-box-list > ul li{
		width: 100%;
		margin:0;
	}

	.shoku-box-list > ul li .item-box{
		margin:10px;
	}

	.shoku-box-list > ul li.long {
		display: block;
		width: auto;
	}
	.shoku-box-list > ul li.long .item-box {
		width: auto;
		margin: 10px;
	}
	.shoku-box-list > ul li.long .movie {
		width: auto;
		margin: 0 20px 20px;
	}


	
	.shoku-box-list > ul li .photo-box {
			width:110px;
			float:right;
			margin-top:45px;
			margin-right:8px;
			margin-left:5px;
			margin-bottom:5px;
	}

	.shoku-box-list > ul li .item-name{
		text-align:left;
		padding-left:10px;
	}

	.shoku-box-list > ul li .item-text{
		margin-bottom:10px;
	}

	.shoku-box-list > ul li .photo-box img{
		border:solid 1px #ccc;
	}


}