@charset "UTF-8";
/* 共通 */

.container {
	text-align: center;
}

#container .mix {
	display:none;
	margin-top: 1em;
	vertical-align: top;
	position: relative;
}

.selected{
	background-color: #000 !important;
	color: #fff !important;
}

.page-numbers li {
	display: inline-block;
}

.kind {
	position: absolute;
    top: 0;
    right: 0;
    background: #fff;
}

.object-fit-img img {
	object-fit: cover;
	font-family: 'object-fit: cover;';
}

/* SP_size */
@media only screen and (max-width: 768px) {

body{
	font-size: 1.2rem;
	line-height: 180%;
}

.contents_width{
	width: 92%;
	margin: 0 auto;
}

#wrapper{
	background: url(../../common/img/img_sp_introduction_bg.jpg) no-repeat top left;
	background-size: 100%;
	padding-bottom: 4%;
}

#wrapper > h2{
	width: 13%;
	margin: 0 auto;
}

.controls{
	text-align: center;
	margin: 4% 0;
}

.filter{
	background-color: #fff;
	border: #000 solid 0.1rem;
	width: 6rem;
    height: 6rem;
    border-radius: 3rem;
	margin: 0 0.46rem 1rem 0.46rem;
}

.container .mix,
.container .gap {
	display:inline-block;
	width: 138px;
	margin: 0 3px;
}

.container .mix {
	min-height: 165px;
}

.menu_img{
	height: 97px;
	overflow: hidden;
}

.container .mix{
	border: #c9c9c8 solid 1px;
	border-radius: 4px;
	overflow: hidden;
	background-color: #f2f2ea;
}

.recipe_text_box{
	padding: 4px;
}

.recipe_text{
	font-size: 80%;
	width: 100%;
	text-align: left;
	line-height: 160%;
}

span.product{
	background-color: #61615e;
	padding: 4px;
	border-radius: 2px;
	color: #fff;
	font-size: 100%;
}

.recipe_title{
	font-weight: bold;
	font-size: 1.2rem !important;
	clear: both;
	text-align: left;
	padding: 0 4px;
}

.kind{
	border: #000 solid 1px;
	width: 30px;
	height: 30px;
	border-radius: 15px;
	text-align: center;
	margin: 5px 6px 0 0;
	padding-top: 0.3rem;
}

.arrow_part{
	text-align: center;
}

}

@media only screen and (orientation : portrait) and (max-width: 768px) { /*横向きの際に適用*/

}

/* PC_size */
@media only screen and (min-width: 769px) {


body{
	font-size: 1.4rem;
	line-height: 200%;
}

#wrapper{
	background: url(../../common/img/img_pc_introduction_bg.jpg) no-repeat top left;
	background-size: 100%;
}

#contents_box{
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	padding-top: 4rem;
	position: relative;
}

#wrapper > h2{
	width: 96px;
	margin: 0 auto;
}

.contents_width{
	padding: 0 5%;
}

.controls{
	text-align: center;
	margin: 4% 0;
}

.filter{
	background-color: #fff;
	border: #000 solid 0.1rem;
	width: 6rem;
    height: 6rem;
    border-radius: 3rem;
	margin: 0 0.46rem 1rem 0.46rem;
}

.container .mix,
.container .gap {
	display:inline-block;
	width: 258px;
	margin: 0 3px;
}

.container .mix{
	border: #c9c9c8 solid 1px;
	border-radius: 4px;
	background-color: #f2f2ea;
	margin-bottom: 1%;
	min-height: 30rem;
}

.recipe_text_box{
	padding: 4px 8px 8px 8px;
	text-align: left;
}

.recipe_text{
	background-color: #61615e;
	padding: 4px;
	border-radius: 2px;
	color: #fff;
	font-size: 80%;
}

.recipe_box img{
	width: 100%;
	height: 100%;
}

.recipe_title{
	font-weight: bold;
	font-size: 1.4rem !important;
	text-align: left;
	clear: both;
	margin-left: 8px;
}

.kind{
	border: #000 solid 1px;
	width: 30px;
	height: 30px;
	border-radius: 15px;
	text-align: center;
	margin: 6px 10px 0 0;
}

.arrow_part{
	overflow: hidden;
	border-top: #f2f2ea solid 0.2rem;
	padding: 4% 0;
	text-align: center;
}

.arrow_text{
	color: #505050;
	width: 20%;
}

/*.arrow_text:hover{
	text-decoration: underline;
}
*/

.arrow_num{
	width: 60%;
	display: inline-block;
	text-align: center;
}

.menu_img{
	height: 184px;
	overflow: hidden;
	margin-bottom: 3%;
}

}