@charset "utf-8";
/* -----------------------------------------------------
* サイトの共通部分に適用させるCSS
* create: 2013/04/11 
* author: sakaguchi

*INDEX
* 1.キーイメージの設定
* 2.中央コンテンツの設定
	*ランチバナー
	*おすすめラインナップ
* 3.右コンテンツの設定
	*ブログ新着情報
	*ご挨拶
----------------------------------------------------- */
 /* ----------------------------------------------------------------------------------------------------
 * ▼　1.970px
 * --------------------------------------------------------------------------------------------------*/
 @media only screen and (min-width:970px) and (max-width:1279px){
	 header section.content,
	 footer section.content{
		 padding: 0 20px;
		 width: 930px;
	 }
	 header h1 img{
		 width: 200px;
		 padding-top: 10px;
	 }
	 div#wrap{
		 width: 930px;
		 margin: 0 auto;
	 }
	 div#wrap section.keyimg{
		 margin-bottom: 30px;
	 }
	 div#wrap section.center{
		 margin-right: 0px;
	 }
	 div#wrap section.right{
		 overflow: hidden;
		 width: 930px !important;
	 }
	 div#wrap section.right article.info{
		 width: 300px;
		 float: left;
		 margin-right: 30px;
	 }
	 div#wrap section.right article.greeting{
		 width: 600px;
		 float: left;
	 }
	 div#wrap section.right article.greeting section.text{
		 padding-bottom: 90px;
	 }
	 section.facebook{
 	 width: 930px;
	 margin-top: 20px;
	 }

	 section.facebook ul img.facebook{
		 margin-top: 10px;
	 }		 

	 section.facebook ul img.mpm {
	 }
	 section.facebook ul img.bunner{
		 /*margin-top: 0;*/
		 margin-top:5px;
	 }
	 section.facebook ul img.yt_bnr {
		 /*margin-top: 0;*/
		margin-top:5px;
   }
	 
 	 section.facebook ul img.breadtimes  {
		 margin-top:5px;
	 }
 	 section.facebook ul img.ameblo  {
		 margin-top:5px;
	 }
 	 section.facebook ul img.facebook_bran {
		 margin-top: 5px;
	 }

 }
  /* ----------------------------------------------------------------------------------------------------
 * ▼　2.600px
 * --------------------------------------------------------------------------------------------------*/
 @media only screen and (min-width:640px){
 	p.top{
		display: none;
	}
 }
 @media only screen and (min-width:640px) and (max-width:969px){
	 header section.content,
	 footer section.content{
		 padding: 0 20px;
		 width: 630px;
	 }
	 header section.content h1{
		 margin-bottom: 30px;
	 }
     header section.content nav ul li{
		 width: 188px;
		 height: 25px;
		 padding-top: 5px;
		 padding-bottom: 10px;
		 margin-bottom: 10px;
		 float: left;
		 margin-right: 15px;
		 background: url(../images/bg/footer_title_bg.png) repeat;
	 }
	 header section.content nav ul li:hover,
	 header section.content nav ul li#onpage{
		 background: url(../images/item/detail_bg.png) repeat;
	 }
	 header section.content nav ul li:nth-child(3n){
		 margin-right: 0px;
	 }
	 div#wrap{
		 width: 630px;
		 margin: 0 auto;
	 }
	 div#wrap section.keyimg{
		 text-align: center;
		 margin: 0 0 30px 15px;
	 }
	 div#wrap section.center{
		 overflow: hidden;
		 width: 630px;
		 margin-bottom: 20px;
	 }
	 div#wrap section.center article.bunner{
		 width: 300px;
		 float: left;
		 margin-right: 30px;
	 }
	 div#wrap section.center article.lineup{
		 width: 300px;
		 float: left;
	 }
	 div#wrap section.right{
		 overflow: hidden;
		 width: 630px;
	 }
	 div#wrap section.right article.info{
		 width: 300px;
		 float: left;
		 margin-right: 30px;
	 }
	 div#wrap section.right article.greeting{
		 width: 300px;
		 float: left;
	 }
	 section.facebook{
	 	width: 630px;
		margin-top: 10px;
	 }
	 section.facebook ul img.mpm{
     margin-top:10px;
	 }

	 section.facebook ul img.facebook{
		 width: 300px;
     margin-bottom:10px;
	 }
 
 	 section.facebook ul img.bunner{
		 /*margin-top: 0;*/
		 margin-top:3px;
	 }
	 section.facebook ul img.yt_bnr {
		 /*margin-top: 0;*/
		margin-top:3px;
   }
	 
 	 section.facebook ul img.breadtimes  {
		 margin-top: 10px;
	 }
   
 	 section.facebook ul img.ameblo  {
     margin-bottom:60px;
 	 }

 	 section.facebook ul img.facebook_bran {
     width:300px;
     height:auto;
	 }

 }
   /* ----------------------------------------------------------------------------------------------------
 * ▼　3.300px
 * --------------------------------------------------------------------------------------------------*/
 @media only screen and (min-width:300px) and (max-width:639px){
	 header section.content,
	 footer section.content,
	 div#wrap{
		 width: 300px;
		 padding: 0;
	 }
	 header section.content h1{
		 margin-left: 15px;
		 margin-bottom: 10px;
	 }
	 header section.content nav ul{
		 overflow: hidden;
	 }
	 header section.content nav ul li{
		 width: 143px;
		 height: 30px;
		 float: left;
		 margin-right: 10px;
		 margin-bottom: 10px;
		 padding: 0;
		 background: url(../images/bg/footer_title_bg.png) bottom repeat-x;
		 border: none;
		 border-radius: 0;
	 }
	 header section.content nav ul li#onpage{
		 border: none;
		 background: url(../images/item/detail_bg.png) repeat;
	 }
	 header section.content nav ul li:hover{
		 border: none;
		 background: url(../images/item/detail_bg.png) repeat;
	 }
	 header section.content nav ul li:nth-child(even){
		 margin-right: 0px;
	 }
	 div#wrap section.keyimg{
		 margin-bottom: 30px;
	 }
	 div#wrap section.keyimg img{
		 width: 298px;
	 }
	 div#wrap section.center{
		 overflow: hidden;
		 width: 300px;
		 margin-bottom: 30px;
	 }
	 div#wrap section.center article.lineup{
		 height: 280px;
	 }
	 div#wrap section.center article.lineup p.blanc{
		 bottom: 0;
	 }
	 div#wrap section.center article.lineup p.bunner{
		 bottom: 0;
	 }
	 section.facebook{
	 	width: 310px;
		margin-top: 20px;
	 }
	 section.facebook ul img.mpm {
     margin-top:10px;
		 width: 300px;
	 }
	 section.facebook ul img.yt_bnr{
		 margin-top: 10px;
	 }
	 section.facebook ul img.bunner{
		 margin-top: 10px;
	 }

	 section.facebook ul img.ameblo{
		 margin-top: 10px;
	 }
	 section.facebook ul img.facebook{
		 margin-top: 10px;
	 }
 	 section.facebook ul img.breadtimes {
		 margin-top: 10px;
		 text-align:left;
	 }

 	 section.facebook ul img.ameblo  {
		 margin-top: 5px;
 	 }

 	 section.facebook ul img.facebook_bran {
		 margin-top: 5px;
     width:300px;
	 }
	 
	#facebox .content img {
	  border: 0;
	  margin: 0;
	width:300px;}


 }
    /* ----------------------------------------------------------------------------------------------------
 * ▼　4.商品一覧
 * --------------------------------------------------------------------------------------------------*/
  @media only screen and (min-width:300px) and (max-width:1279px){
 	body.item div#wrap section#ui-tab ul#tab li{
		 margin-bottom: 10px;
 	}
  }
  @media only screen and (min-width:970px) and (max-width:1279px){
 	body.item div#wrap section#ui-tab section ul li img{
		width: 210px;
 	}
  }
   @media only screen and (min-width:639px) and (max-width:969px){
	   body.item div#wrap section#ui-tab section ul li img{
		 width: 185px;
 	   }
   }
   @media only screen and (min-width:300px) and (max-width:639px){
	   body.item div#wrap section#ui-tab ul#tab{
		   width: 290px;
		   margin: 0 auto;
		   padding: 0;
	   }
	   body.item div#wrap section#ui-tab ul#tab li{
		   width: 125px;
		   float: left;
		   margin-right: 10px;
	   }
	   body.item div#wrap section#ui-tab ul#tab li:nth-child(odd){
		   margin-right: 10px;
	   }
	   body.item div#wrap section#ui-tab section ul li img{
		 width: 298px;
 	   }
   }
  /* ----------------------------------------------------------------------------------------------------
 * ▼　5.店舗紹介
 * --------------------------------------------------------------------------------------------------*/
 @media only screen and (min-width:970px) and (max-width:1279px){
	 div#wrap section.title p{
		 width: 250px;
		 padding-top: 0px;
		 font-size: 14px;
	 }
	 div#wrap section.shoplist article{
		 width: 900px;
	 }
	 div#wrap section.shoplist article div.clear section.info{
		 width: 480px;
	 }
 }
 @media only screen and (min-width:300px) and (max-width:639px){
	 div#wrap section.shoplist article{
		 width: 270px;
	 }
	 div#wrap section.shoplist article h3{
		 font-size: 14px;
	 }
	 div#wrap section.shoplist article div.clear section.info{
		 width: 270px;
		 margin-bottom: 20px;
	 }
	 div#wrap section.shoplist article div.clear section.map iframe{
		 width: 265px;
	 }
 }
 @media only screen and (min-width:300px) and (max-width:639px){
 section.link_bunner{
	 width: 300px;
	 margin-bottom: 30px;
 }
 section.link_bunner p{
	 width: 248px;
	 margin-right: 10px;
 }
 section.link_bunner p a{
	 font-size: 12px;
 }
 div#wrap section.partnername h3{
	 width: 300px;
 }

 div#wrap section.partnername h3 img{
	 display: block;
 }
 div#wrap section.partnername p{
	 display: none;
 }
 div.partner section.map div.maparea{
	 display: none;
 }
 div#wrap section.shoplist article div.clear section.info a{
	 display: none;
 }
 div#wrap section.shoplist article div.clear section.map img{
	 margin-top: 0;
	 z-index: 1;
	 width: 390px;
	 height: 260px;
 }
 }
   /* ----------------------------------------------------------------------------------------------------
 * ▼　6.スタッフ紹介
 * --------------------------------------------------------------------------------------------------*/
 @media only screen and (min-width:970px) and (max-width:1279px){
	 body.staff div#wrap article{
		 width: 900px;
	 }
	 body.staff div#wrap article section.prof{
		 width: 670px;
	 }
	 body.staff div#wrap article section.prof dd{
		 width: 570px;
	 }
	 body.staff section.recruit{
		 width: 900px;
		 overflow: hidden;
	 }
	 body.staff section.recruit section.recruitdata{
		 width: 900px;
	 }
	 body.staff section.recruit section.recruitdata h2{
		 font-size: 14px;
	 }
	 body.staff section.recruit section.recruitdata section.info{
		 overflow: hidden;
	 }
	 body.staff section.recruit section.recruitdata section.info dl{
		 width: 200px;
		 height: 120px;
		 float: left;
		 margin-right: 30px;
	 }
	 body.staff section.recruit section.recruitdata section.info dl:nth-child(4){
		 margin-right: 0px;
	 }
 }
 @media only screen and (min-width:639px) and (max-width:969px){
	 body.staff section.recruit{
		 width: 610px;
	 }
 }
 @media only screen and (min-width:300px) and (max-width:639px){
	 body.staff div#wrap article{
		 width: 270px;
	 }
	 body.staff div#wrap article section.photo{
		 width: 270px;
		 text-align: center;
	 }
	 body.staff div#wrap article section.prof{
		 width: 270px;
	 }
	 body.staff section.recruit{
		 width: 270px;
	 }
	 body.staff section.recruit h2{
		 width: 270px;
		 font-size: 12px;
	 }
	 body.staff section.recruit p.banner{
		 display: none;
	 }
	 body.staff section.recruit dl{
		 width: 270px;
	 }
 }
/* ----------------------------------------------------------------------------------------------------
 * ▼　7.運営会社
 * --------------------------------------------------------------------------------------------------*/
 @media only screen and (min-width:970px) and (max-width:1279px){
	 div#wrap section.company,
	 div#wrap section.rightcontent{
		 width: 900px;
	 }
	 div#wrap section.company table{
		 width: 900px;
		 margin: 0 auto;
	 }
	 div#wrap section.rightcontent article{
		 width: 900px;
	 }
	 div#wrap section.rightcontent article div.clear section.info{
		 width: 580px;
	 }
 }
 @media only screen and (min-width:300px) and (max-width:639px){
	 div#wrap section.company,
	 div#wrap section.rightcontent{
		 width: 300px;
	 }
	 div#wrap section.company table{
		 width: 300px;
	 }
	 div#wrap section.rightcontent article{
		 width: 270px;
	 }
	 div#wrap section.rightcontent article iframe{
		 width: 260px;
	 }
 }
 /* ----------------------------------------------------------------------------------------------------
 * ▼　8.お問合せ
 * --------------------------------------------------------------------------------------------------*/
@media only screen and (min-width:640px) and (max-width:969px){
	body.contact div#wrap{
		width: 620px;
	}
	body.contact div#wrap dl dd{
		width: 400px;
	}
	body.contact div#wrap dl dd input,
	body.contact div#wrap dl dd textarea,
	body.contact div#wrap dl dd select{
		width: 398px;
	}
}
@media only screen and (min-width:300px) and (max-width:639px){
	body.contact div#wrap{
		width: 300px;
	}
	section.mailform{
		width: 300px;
	}
	body.contact div#wrap section.mailform dl{
		width: 300px;
	}
	body.contact div#wrap section.mailform dl dt{
		width: 300px;
	}
	body.contact div#wrap section.mailform dl dd{
		width: 300px;
	}
	body.contact div#wrap section.mailform dl dd input,
	body.contact div#wrap section.mailform dl dd textarea,
	body.contact div#wrap section.mailform dl dd select{
		width: 288px;
	}
}
 /* ----------------------------------------------------------------------------------------------------
 * ▼　9.TOPページ
 * --------------------------------------------------------------------------------------------------*/
@media only screen and (min-width:970px) and (max-width:1279px){
	body.top div#wrap aside{
		width: 970px;
		overflow: hidden;
	}
	body.top aside p.poster{
		float: left;
		margin-right: 30px;
		width: 300px;
	}
	body.top aside article.lineup{
		width: 300px;
		float: left;
	}
	body.top section.bunner{
		width: 970px;
		text-align: right;
		margin-top: -125px;
	}
	body.top footer{
		clear: both;
	}
}
@media only screen and (min-width:640px) and (max-width:969px){
	body.top div#wrap section#main{
		width: 630px;
		margin: 0 auto 30px;
	}
	body.top div#wrap section#main article.keyimg{
		width: 600px;
		margin: 0 auto 30px;
	}
	body.top div#wrap section#main section.right_content{
		width: 630px;
		overflow: hidden;
	}
	body.top div#wrap section#main section.right_content article{
		float: left;
	}
	body.top div#wrap section#main section.right_content article.greeting{
		width: 300px;
		margin-right: 30px;
	}
	body.top div#wrap section#main section.right_content article.info{
		width: 270px;
		margin-right: 0px;
	}
	body.top div#wrap section#main section.right_content article.info ul li{
		width: 248px;
		margin-bottom: 10px;
		height: 60px;
	}
	body.top div#wrap aside{
		width: 630px;
		margin: 0 auto;
	}
	body.top aside p.poster{
		float: left;
		width: 300px;
		margin-right: 25px;
	}
	body.top aside p.poster img{
		width: 298px;
	}
	body.top aside article.lineup{
		width: 300px;
		float: left;
		margin-right: 0px !important;
	}
	body.top section.bunner{
		width: 630px;
		margin: 0 auto;
		padding: 0;
	}
}
@media only screen and (min-width:300px) and (max-width:639px){
	body.top div#wrap section#main{
		width: 300px;
		margin: 0 auto;
	}
	body.top div#wrap section#main article.keyimg{
		margin-bottom: 30px;
	}
	body.top div#wrap section#main article.keyimg img{
		width: 300px;
	}
}
/* ----------------------------------------------------------------------------------------------------
 * ▼　10.求人ページ
 * --------------------------------------------------------------------------------------------------*/
 @media only screen and (min-width:970px) and (max-width:1279px){
	 body.recruit div#wrap h2 img{
		 width: 920px;
	 }
	 /* 人材募集概要 */
	 body.recruit div#wrap section.content01{
		 background: url(/images/recruit/contents01_img01.png) no-repeat top 20px right 20px , rgba(255,255,255,0.6);
	 }
	 body.recruit div#wrap section.content01 p.text03{
		 float: none;
	 }
	 body.recruit div#wrap section.content01 nav.recruit_nav{
		 float: none;
		 margin-top: 20px;
	 }
	 body.recruit div#wrap section.content01 nav.recruit_nav ul li{
		 margin-left: 20px;
	 }
	 body.recruit div#wrap section.content01 nav.recruit_nav ul li:first-child{
		 margin-right: 20px;
	 }
	 /* 募集要項 */
	 body.recruit div#wrap article.recruit_contents{
		 width: 920px;
	 }
	 body.recruit div#wrap article.recruit_contents img{
		 width: 400px;
	 }
	 body.recruit div#wrap article.recruit_contents section.recruit_list{
		 width: 458px;
	 }
	 body.recruit div#wrap article.recruit_contents section.recruit_list dl dt{
		 width: 120px;
	 }
	 body.recruit div#wrap article.recruit_contents section.recruit_list dl dd{
		 width: 320px;
	 }
	 body.recruit div#wrap article.recruit_contents section.recruit_list p.apply_btn img{
		 width: 220px;
	 }
	 /* 応募フォーム */
	 body.recruit div#wrap article.apply_content section.applyform dl dt{
		 width: 160px;
	 }
	 body.recruit div#wrap article.apply_content section.applyform dl dd{
		width: 740px;
		float: left;
	 }
	 body.recruit div#wrap article.apply_content section.applyform dl dd input,
	 body.recruit div#wrap article.apply_content section.applyform dl dd select,
	 body.recruit div#wrap article.apply_content section.applyform dl dd textarea{
		border-radius: 5px;
		padding: 5px;
		border: solid 1px #533c34;
		width: 678px;
	 }
	 body.recruit div#wrap article.apply_content section.applyform dl dd select{
		 width: 688px;
	 }
 }
 @media only screen and (min-width:639px) and (max-width:969px){
	 /* 人材募集概要 */
	 body.recruit div#wrap section.content01{
		 background: url(/images/recruit/contents01_img01.png) no-repeat top 20px right 20px , rgba(255,255,255,0.6);
	 }
	 body.recruit div#wrap h2{
		 text-align: center;
	 }
	 body.recruit div#wrap h2 img{
		 width: 600px;
	 }
	 body.recruit div#wrap section.content01 p img{
		 width: 560px;
	 }
	 body.recruit div#wrap section.content01 p.text03 img{
		 width: 360px;
		 margin-bottom: 20px;
	 }
	 body.recruit div#wrap section.content01 nav.recruit_nav ul li img{
		 width: 180px;
	 }
	 /* 募集要項 */
	 body.recruit div#wrap article.recruit_contents img.title_img{
		 display: none;
	 }
	 body.recruit div#wrap article.recruit_contents h3{
		 display: block;
		 font-family: handmade;
		 color: #533c34;
		 font-size: 20px;
		 margin-bottom: 10px;
		 font-weight: normal;
	 }
	 body.recruit div#wrap article.recruit_contents section.recruit_list{
		 width: 580px;
	 }
	 body.recruit div#wrap article.recruit_contents section.recruit_list dl dt{
		 width: 100px;
	 }
	 body.recruit div#wrap article.recruit_contents section.recruit_list dl dd{
		 width: 460px;
	 }
	 body.recruit div#wrap article#recruit01 section.recruit_list,
	 body.recruit div#wrap article#recruit03 section.recruit_list{
		 margin-left: 0;
	 }
	 body.recruit div#wrap article#recruit02 section.recruit_list{
		 margin-right: 0;
		 float: left;
	 }
	 /* 募集フォーム */
	 body.recruit div#wrap article.apply_content section.applyform dl dt{
		 width: 100px;
	 }
	 body.recruit div#wrap article.apply_content section.applyform dl dd{
		width: 530px;
		float: left;
	 }
	 body.recruit div#wrap article.apply_content section.applyform dl dd input,
	 body.recruit div#wrap article.apply_content section.applyform dl dd select,
	 body.recruit div#wrap article.apply_content section.applyform dl dd textarea{
		border-radius: 5px;
		padding: 5px;
		border: solid 1px #533c34;
		width: 468px;
	 }
	 body.recruit div#wrap article.apply_content section.applyform dl dd select{
		 width: 478px;
	 }
 }
 @media only screen and (min-width:300px) and (max-width:639px){
	 /* 人材募集概要 */
	 body.recruit div#wrap section.content01{
		 background:  rgba(255,255,255,0.6);
		 margin: 30px 0 50px;
	 }
	 body.recruit div#wrap h2{
		 text-align: center;
	 }
	 body.recruit div#wrap h2 img{
		 width: 300px;
	 }
	 body.recruit div#wrap section.content01 p img{
		 width: 260px;
	 }
	 body.recruit div#wrap section.content01 p.text02{
		 margin: 10px 0;
	 }
	 body.recruit div#wrap section.content01 p.text03 img{
		 width: 200px;
		 margin-bottom: 20px;
	 }
	 body.recruit div#wrap section.content01 nav.recruit_nav{
		 margin-left: 0;
	 }
	 body.recruit div#wrap section.content01 nav.recruit_nav ul li img{
		 width: 80px;
	 }
	 /* 募集要項 */
	 body.recruit div#wrap article.recruit_contents img.title_img{
		 display: none;
	 }
	 body.recruit div#wrap article.recruit_contents h3{
		 display: block;
		 font-family: handmade;
		 color: #533c34;
		 font-size: 16px;
		 margin-bottom: 10px;
		 font-weight: normal;
	 }
	 body.recruit div#wrap article.recruit_contents section.recruit_list{
		 width: 278px;
		 padding: 10px;
	 }
	 body.recruit div#wrap article.recruit_contents section.recruit_list dl dt{
		 width: 70px;
		 font-size: 12px;
	 }
	 body.recruit div#wrap article.recruit_contents section.recruit_list dl dd{
		 width: 190px;
		 font-size: 10px;
	 }
	 body.recruit div#wrap article#recruit01 section.recruit_list,
	 body.recruit div#wrap article#recruit03 section.recruit_list{
		 margin-left: 0;
	 }
	 body.recruit div#wrap article#recruit02 section.recruit_list{
		 margin-right: 0;
		 float: left;
	 }
	 /* 募集フォーム */
	 body.recruit div#wrap article.apply_content section.applyform dl dt{
		 width: 100px;
		 font-size: 12px;
	 }
	 body.recruit div#wrap article.apply_content section.applyform dl dd{
		width: 200px;
		float: left;
	 }
	 body.recruit div#wrap article.apply_content section.applyform dl dd input,
	 body.recruit div#wrap article.apply_content section.applyform dl dd select,
	 body.recruit div#wrap article.apply_content section.applyform dl dd textarea{
		border-radius: 5px;
		padding: 5px;
		border: solid 1px #533c34;
		width: 168px;
	 }
	 body.recruit div#wrap article.apply_content section.applyform dl dd select{
		 width: 178px;
	 }
	 p.pagetop img{
		 margin-top: 30px;
		 display: none;
	 }
 }