@charset "utf-8";
/* ===============================================
  [1]LAYOUT
  [2]COMMON-STYLE
  [3]HEADER
  [4]FOOTER
  [5]foodservice
  [6]foodserviceDetail
  [7]chef/recipeSearch
=============================================== */

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

	/*------------------------------------------------
	  [1]LAYOUT
	------------------------------------------------*/
	#page #areaWrapper1 {
		width: 100%;
		margin: 0 auto 30px;
		padding: 0;
	}
	#mainArea #area0 > div > div {
		width: 100%;
		padding: 0 5px;
	}
	#mainArea .pc {
		display: none;
	}
	#mainArea .sp {
		display: block;
	}

	/*------------------------------------------------
	  [2]COMMON-STYLE
	------------------------------------------------*/

	/* font
	------------------------------------------------*/

	#page {
		min-width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		font-family:"HraKakuProN-W6", "HelveticaNeue";
		-webkit-text-size-adjust: none;
	}
	
	/* ttl
	------------------------------------------------*/

	.h1Wrap,
	.h2Wrap {
		margin: 0 0 15px;
		padding: 0;
		border: 1px solid #D6D5B5;
		border-radius: 5px;
		font-size: 75%;
	}
	.h1Wrap .h1Inner,
	.h2Wrap .h2Inner {
		position: relative;
		overflow: hidden;
		padding: 8px;
	}
	.h1Wrap .h1Inner span.line,
	.h2Wrap .h2Inner span.line {
		height: calc(100% - 16px);
		background: #E60012;
		border-radius: 0px;
	}
	.h1Wrap .h1Inner h1,
	.h2Wrap .h12nner h2 {
		padding: 3px 0 3px 10px;
	}

	/* table
	------------------------------------------------*/

	table {
		width: 100%;
		margin: 0 0 15px;
		border-collapse: collapse;
		border-spacing: 0;
	}
	table th {
		width: 25%;
	}


	/*------------------------------------------------
	  [3]HEADER
	------------------------------------------------*/


	/*------------------------------------------------
	  [4]FOOTER
	------------------------------------------------*/


	/*------------------------------------------------
	  [5]foodservice
	------------------------------------------------*/

	.foodservice {
		margin: 0 0 30px;
		padding: 12px 5px 5px;
		background: #F8F8F8;
	}
	.foodservice .ttl {
		display: none;
	}
	.foodservice ul {
		padding: 0;
		border-top: none;
	}
	.foodservice ul li {
		width: 50%;
		padding: 0 5px;
		border-bottom: none;
	}
	.foodservice ul li a {
		padding: 20px 0 10px;
	}
	
	/* categoryWrap
	------------------------------------------------*/

	.categoryWrap {
		padding: 0!important;
	}
	.categoryWrap > div > div {
		float: none!important;
		width: 100%!important;
	}

	/*------------------------------------------------
  	[6]foodserviceDetail
	------------------------------------------------*/

	/* foodserviceDetail
	------------------------------------------------*/

	.foodserviceDetail {
		margin: 0 0 30px;
	}
	.foodserviceDetail .foodserviceDetailRecipe {
		display: flex;
		position: static;
		width: auto;
		margin: 10px 0 0;
	}
	.foodserviceDetail .foodserviceDetailRecipe a {
		display: inline-block;
		position: static;
		width: auto;
		padding: 10px;
		background: none;
		font-size: 110%;
		margin: 0px;
	}
	.foodserviceDetail .foodserviceDetailRecipe a.specialLinkSp {
		display: inline-block;
		position: static;
		width: auto;
		padding: 0px;
		background: none;
		font-size: 110%;
		text-align: top;
		order: 1;
		padding-left: 5px;
	}
	.foodserviceDetail .foodserviceDetailRecipe a.specialLinkPc {
		display: none;
	}
	.foodserviceDetail .foodserviceDetailLeft {
		float: none;
		width: 280px;
		margin: 0 auto 10px;
	}
	.foodserviceDetail .foodserviceDetailLeft .mainImage ul {
		margin: 0 0 10px;
	}
	.foodserviceDetail .foodserviceDetailLeft .mainImage ul li {
		width: 280px;
		height: 280px;
		text-align: center;
	}
	.foodserviceDetail .foodserviceDetailLeft .mainImage .flex-control-nav {
		overflow: hidden;
		margin: 0 -1% 0 0;
	}
	.foodserviceDetail .foodserviceDetailLeft .mainImage .flex-control-nav li img {
		max-width: 19%!important;
		margin: 0 1% 0 0;
	}
	.foodserviceDetail .foodserviceDetailRight {
		float: none;
		width: 100%;
		padding: 0;
	}
	.foodserviceDetail .foodserviceDetailRight .ttl {
		margin: 5px 0 15px;
		padding: 0 0 10px;
		border-bottom: 1px dotted #999999;
		font-weight: bold;
		font-size: 150%;
	}

	/* foodserviceDetailTable
	------------------------------------------------*/

	#mainArea .foodserviceDetailTable table {
		margin: 0 0 20px;
		border-bottom: 1px solid #D6D6B6;
	}
	#mainArea .foodserviceDetailTable table th,
	#mainArea .foodserviceDetailTable table td {
		display: block;
		width: 100%;
		font-weight: normal;
		vertical-align: middle;
	}
	#mainArea .foodserviceDetailTable table th {
		text-align: center;
	}
	#mainArea .foodserviceDetailTable table td {
		border-top: none;
		border-bottom: none;
	}
	#mainArea .foodserviceDetailTable table td .puInline {
		display: block;
		width: 85%;
		margin: 10px auto 0;
		padding: 12px;
		background: #CC0033;
		text-align: center;
		border-radius: 25px;
	}

	/* foodserviceDetailList
	------------------------------------------------*/

	.foodserviceDetailList {
		padding: 20px 10px 10px;
		background: #F8F8F8;
	}
	.foodserviceDetailList ul {
		padding: 0;
		border-top: none;
	}
	.foodserviceDetailList ul li {
		width: 50%;
		margin: 0 0 10px;
		padding: 0 5px;
		border-bottom: none;
	}

	/* cbox
	------------------------------------------------*/

	#allergieInfo {
		width: 270px;
		padding: 5px;
		font-size: 83%;
	}
	#allergieInfo h3 {
		display: block;
		padding: 5px;
		font-weight: bold;
		text-align: center;
	}
	#allergieInfo p {
		margin: 0 0 10px;
	}
	#allergieInfo p.btn {
		margin: 0;
		text-align: center;
	}
	#allergieInfo p.btn a {
		display: inline-block;
		padding: 10px 20px;
		font-size: 120%;
		font-weight: bold;
	}
	#allergieInfo dl dt {
		padding: 5px;
		font-size: 100%;
	}
	#allergieInfo dl dd {
		padding: 5px;
		font-size: 100%;
	}

	/*------------------------------------------------
	  [7]chef/recipeSearch
	------------------------------------------------*/

	/* Search
	------------------------------------------------*/

	.chefSearch,
	.recipeSearch {
		border: none;
		background: #F7F5EF;
		border-radius: 0;
	}
	.chefSearch .searchBtn,
	.recipeSearch .searchBtn {
		float: none;
		width: 100%;
	}
	.chefSearch .searchBtn ul,
	.recipeSearch .searchBtn ul {
		padding: 10px 5px 5px;
		border-right: none;
		border-bottom: 1px solid #D6D5B5;
		font-size: 120%;
	}
	.chefSearch .searchBtn ul li,
	.recipeSearch .searchBtn ul li {
		width: 31%;
		margin: 0 1% 10px;
	}
	.chefSearch .searchBtn ul li a,
	.recipeSearch .searchBtn ul li a {
		font-size: 83%;
	}
	.chefSearch .searchForm,
	.recipeSearch .searchForm {
		float: none;
		width: 100%;
	}
	.chefSearch .searchForm form,
	.recipeSearch .searchForm form {
		overflow: hidden;
		margin: 10px;
	}
	.chefSearch .searchForm form input[type="text"],
	.recipeSearch .searchForm form input[type="text"] {
		float: left;
		width: 73%;
		margin: 0 3% 0 0;
		padding: 10px 6px;
		border: none;
	}
	.chefSearch .searchForm form input[type="submit"],
	.recipeSearch .searchForm form input[type="submit"] {
		float: right;
		width: 24%;
		height: auto;
		padding: 9px 8% 9px 8px;
		color: #FFFFFF;
		background: url(/library/common/img/icn_search.png) no-repeat 88% center #FF6701;
		background-size: 16px;
		font: 110% "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
		text-indent: 0;
		border-radius: 3px;
	}

}