/*===============================================
●smart.css  画面の横幅が1000pxまで
===============================================*/

@media screen and (max-width:1200px){
	.pc{
		display: none !important;
	}
	
	.sp{
		display: block!important;
	}
	
	header{
		padding: 10px;
		height: 70px;
	}
	
	nav,
	#header_shop{
		display: none;
	}
	
	h1{
		width: auto;
		height: auto;
	}
	
	.spmenu{
		color: #ffffff;
		font-size: 18px;
	}
	
	main{
		padding-top: 70px;
	}
	
	#nav-drawer {
		position: relative;
	}

	/*チェックボックス等は非表示に*/
	.nav-unshown {
		display:none;
	}

	/*アイコンのスペース*/
	#nav-open {
		display: inline-block;
		width: 40px;
		height: 40px;
		vertical-align: middle;
		margin-top: 5px;
		padding: 8px 5px;
		cursor: pointer;
		border: 2px solid #ffffff;
		border-radius: 3px;
		background: transparent;
		transition: .3s all;
	}

	/*ハンバーガーアイコンをCSSだけで表現*/
	#nav-open span, #nav-open span:before, #nav-open span:after {
		position: absolute;
		display: block;
		width: 26px;/*長さ*/
		height: 3px;/*線の太さ*/
		transition: .1s all;
		border-radius: 1px;
		background: #fff;
		content: '';
		cursor: pointer;
	}
	#nav-open span:before {
		bottom: -8px;
	}
	#nav-open span:after {
		bottom: -16px;
	}

	/*閉じる用の薄黒カバー*/
	#nav-close {
		display: none;/*はじめは隠しておく*/
		position: fixed;
		z-index: 99;
		top: 0;/*全体に広がるように*/
		left: 0;
		width: 100%;
		height: 100%;
		background: #000000;
		opacity: 0;
	}

	/*閉じる用のアイコンのスペース*/
	#nav-closebtn {
		display: inline-block;
		position: absolute;
		top: 15px;
		right: 10px;
		width: 40px;
		height: 40px;
		vertical-align: middle;
		margin-top: 5px;
		padding: 10px 5px;
		cursor: pointer;
		border: 2px solid #ffffff;
		border-radius: 3px;
		background: transparent;
		transition: .3s all;
	}

	/*閉じるアイコンをCSSだけで表現*/
	#nav-closebtn span:before, #nav-closebtn span:after {
		content: "";
		position: absolute;
		display: inline-block;
		top: 1px;
		left: 17px;
		width: 3px;
		height: 35px;
		border: 0;
		margin: 0;
		padding: 0;
		background: #fff;
	}
	#nav-closebtn span:before {
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#nav-closebtn span:after {
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	#nav-open:hover, #nav-closebtn:hover {
		background: #fff;
	}
	#nav-open:hover span, 
	#nav-open:hover span:before, 
	#nav-open:hover span:after, 
	#nav-closebtn:hover span:before, 
	#nav-closebtn:hover span:after{
		background-color: #e4270e;
	}


	/*中身*/
	#nav-content {
		overflow: auto;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 9999;/*最前面に*/
		width: 80%;
		max-width: 330px;/*最大幅（調整してください）*/
		height: 100%;
		background: #e4270e;
		transition: .3s ease-in-out;/*滑らかに表示*/
		-webkit-transform: translateX(105%);
		transform: translateX(105%);/*右に隠しておく*/
	}
	
	.offcanvas-right ul{
		margin: 20% auto;
		padding: 0;
		width: 90%;
		list-style-type: none;
	}
	
	.offcanvas-right li{
		width: 100%;
		margin-top: 30px;
		color: #ffffff;
	}
	
	.offcanvas-right li a{
		padding-left: 1em;
		color: #ffffff;
		font-size: 1.12em;
		position: relative;
	}
	
	.offcanvas-right li a:before{
		font-family: FontAwesome;
		content: "\f105";
		position: absolute;
		top: 55%;
		left: 0;
		margin-top: -12px;
		color: #ffffff;
	}


	/*チェックが入ったらもろもろ表示*/
	#nav-input:checked ~ #nav-close {
		display: block;/*カバーを表示*/
		opacity: .5;
	}

	#nav-input:checked ~ #nav-content {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);/*中身を表示（左へスライド）*/
		box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}
}


/*===============================================
●smart.css  画面の横幅が1024pxまで
===============================================*/

@media screen and (max-width:1024px){
	
	body {margin: 0}
	
	img {max-width:100%;width: 100%;height: auto;
	width /***/:auto;}
	
	
	/*------------------------------------------------------------
	footer
	------------------------------------------------------------*/

	footer{
		box-sizing: border-box;
		padding: 40px 20px;
		background: #191919;
	}

	#footer_wrap{
		width: 100%;
		-webkit-justify-content: center; /* Safari */
		justify-content:         center;
	}

	#footer_side{
		margin-right: 0;
		width: 100%;
	}
	
	.footer_box1,
	.footer_box2,
	.footer_btn2{
		display: none;
	}
	
	.footer_btn1{
		margin: 20px auto 0 auto;
	}
	
	#copy{
		margin-top: 20px;
		width: 100%;
		text-align: center;
	}

	#up {
		width: 100%;
	}

	#up > a:after {
		content: "\f102";
		position: absolute;
		top: 5px;
		right: 30px;
		font-size: 1.5em;
	}

	#up > a {
		display: block;
		border-radius: 0;
		height: auto;
		width: 100%;
		padding: 10px 0;
		background: #535353;
		position: static;
		font-family: FontAwesome;
		color: #ffffff;
		text-indent: 0;
		text-align: center;
	}

	/*------------------------------------------------------------
	index
	------------------------------------------------------------*/
	
	
	
	.slide_pc{
		display: none;
	}

	.slide_sp{
		display: block;
	}
	
	.bx-wrapper{
		margin-bottom: 0!important;
	}
	
	/* バナー */
	
	#index_bnrwrap{
		box-sizing: border-box;
		padding: 20px;
		width: 100%;
		margin: 20px auto;
	}
	
	#index_bnrwrap ul{
		-webkit-flex-wrap: wrap;
		flex-wrap:         wrap;
		-webkit-justify-content: center;
		justify-content:         center;
	}

	#index_bnrwrap li{
		padding: 15px;
		width:100%;
		height: auto;
		max-width: 446px;
		max-height: 335px;
	}
	
	/* お知らせ */
	
	.index_news{
		box-sizing: border-box;
		padding: 40px 20px;
		width: 100%;
		margin: 0 auto !important;
		-webkit-flex-wrap: wrap;
		flex-wrap:         wrap;
	}

	.index_news_m{
		width: 100%;
	}

	.index_news ul{
		width: 100%;
	}
	
	.index_news li{
		padding: 10px 0;
	}

	.index_news li a:after{
		right: 10px;
		font-size: 1em;
	}

	.index_news_img{
		width: 20%;
		max-width: 150px;
		margin:0 10px;
	}

	.index_news_img > img {
		max-width: 100%;
		max-height: 100%;
	}

	.index_news_text{
		font-size: 16px;
		padding-right: 12px;
	}
	
	.index_news_sp{
		display: block;
		width: 100%;
		padding-top: 20px;
	}
	
	.index_blogwrap{
		padding: 40px 20px;
	}

	.index_blog{
		width: 100%;
		-webkit-flex-wrap: wrap;
		flex-wrap:         wrap;
		-webkit-justify-content: center;
		justify-content:         center;
	}

	.index_blog_m{
		width: 100%;
		margin-bottom: 20px;
	}

	.index_blog ul{
		width: 100%;
	}

	.index_blog li{
		width: 48%;
	}

	.index_blog li a{
		padding: 10px;
		font-size: 20px;
	}
	
	/* お品書き */

	.index_menuwrap{
		padding: 40px 20px;
	}

	.index_menu{
		margin: 0 auto;
		width: 100%;
	}

	.index_menu h2{
		margin-bottom: 20px;
	}
	
	.slick-slide img{
		width: 50%;
	}

	.index_menu_text{
		font-size: 18px;
		line-height: 1em;
	}

	.index_menu_text span{
		font-size: 12px;
	}

	.index_menu_btn{
		margin: 20px auto 0 auto;
		width: 100%;
	}

	.index_menu_btn a{
		padding: 10px;
		display: block;
		font-size: 18px;
	}

	.index_menu_btn a:before{
		left: 10px;
	}

	.index_menu_btn a:after{
		top: 55%;
	}

	.index_menu_btn a:hover{
		background: #ef7d6e;
	}
	
	.slick-prev{
		left: 0!important;
		z-index: 9999;
	}
	
	[dir='rtl'] .slick-prev{
		left: auto;
		right: 0;
	}
	
	.slick-next{
		right: 0!important;
		z-index: 9999;
	}
	
	[dir='rtl'] .slick-next{
		right: auto;
		left: 0;
	}
	
	/* 金子屋について */
	.index_aboutwrap{
		padding: 40px 20px;
		width: 100%;
		height: auto;
		background-position: top 0 left -100px;
	}

	.index_about{
		width: 100%;
		text-align: center;
	}
	
	.index_about img{
		width: 60%;
		max-width: 190px;
	}

	.index_abouttext{
		margin:20px 0;
		width:100%;
		color: #ffffff;
		font-size: 16px;
		line-height: normal;
		text-align: left;
	}

	.index_about a{
		margin: 0 auto;
		padding: 10px 0;
		max-width: 200px;
	}

	.index_about a:after{
		top: 55%;
	}
	
	/* 店舗一覧 */

	.index_tenpowrap{
		box-sizing: border-box;
		padding: 40px 20px;
		width: 100%;
		font-size: 16px;
	}

	.index_tenpowrap h2{
		margin-bottom: 20px;
	}

	.index_tenpowrap ul{
		margin: 20px 0 0 0;
		-webkit-justify-content: center; /* Safari */
		justify-content:         center;
	}
	
	/* フッターバナー */
	.index_fbnrwrap{
		box-sizing: border-box;
		padding: 40px 20px;
	}

	.index_fbnrwrap ul{
		width: 100%;
		-webkit-flex-wrap: wrap; /* Safari */
		flex-wrap:         wrap;
		-webkit-justify-content: center; /* Safari */
		justify-content:         center;
	}

	.index_fbnrwrap li{
		box-sizing: border-box;
		margin-bottom: 10px;
		padding-top: 20px;
		max-width: 485px;
		height: 180px;
		text-align: center;
	}
	.index_fbnrwrap li:last-child{
		margin-bottom: 0;
	}

	.index_fbn1,
	.index_fbn2{
		background-position: center;
	}

	.index_fbtn{
		padding: 15px 0;
		max-width: 240px;
	}

	/* 詳細ページ：ヘッダー */
	#header-container {
		height: 100px;
	}

	.breadcrumbs {
		width: 100%;
		padding: 10px 20px;
	}

	/* 詳細ページ：共通 */
	.common_field {
		width: 100%;
	}

	/* お知らせ */

	.news_container {
		padding: 40px 20px;
	}

	.news_category {
		width: 100%;
		-webkit-box-ordinal-group:2;
		-ms-flex-order:2;
		-webkit-order:2;
		order:2;

	}

	.news_content {
		width: 100%;
		-webkit-box-ordinal-group:1;
		-ms-flex-order:1;
		-webkit-order:1;
		order:1;
	}

	.common_container {
		padding: 40px 20px;
		width: 100%;
	}

	/* お問い合わせ */

	.contactform_container {
		padding: 40px 20px;
		width: 100%;
	}

	.contactform_content {
		width: 100%;
	}

	.contactform_content dl {
		width: 100%;
	}

	/* 店舗一覧 */

	.shoplist_container {
		padding: 40px 20px;
	}

	.shoplist_content-card {
		width: 100%;
		padding: 10px;
	}

	.shoplist_content-card > img {
		margin: 0 auto;
		width: 50%;
		height: 50%;
	}

	.shoplist_content-inner {
		width: 100%;
		position: relative;
		text-align: center;
	}

	.shoplist_dbtn {
		margin: 15px auto 0;
		position: static;
		width: 80%;
	}

	.shoplist_dbtn a{
		padding: 10px 0;
		font-size: 14px;
	}

	/* 店舗詳細 */

	.shopname_container {
		width: 100%;
		margin: 0;
		padding: 40px 20px;
	}

	.shopname_title {
		position: static;
		width: 100%;
		height: auto;
		border: none;
		background: #e4270e;
		transform: none;
	}

	.shopname_title > span {
		position: static;
		letter-spacing: 2px;		
	}

	.shopname_cc{
		box-sizing: border-box;
		padding: 10px;
		font-size: 18px;
	}
	
	.shopname_cc > br{
		display: block;
	}
	
	.shopname_content > img {
		width: 100%;
		margin: 20px 0 0;
	}

	.shopnews_container {
		padding: 40px 20px;
	}

	.shopnews_content li a{
		padding: 15px;
	}

	.shopnews_content li a:after{
		top: 47%;
		right: 10px;
		font-size: 1em;
	}

	.shopnews_img {
		width: 20%;
		max-width: 150px;
		margin:0 10px;
	}

	.shopnews_img > img {
		max-width: 100%;
		max-height: 100%;
	}

	.shopnews_text {
		font-size: 16px;
		line-height: 1em;
		width: 70%;
	}

	.shopnews_text span{
		font-size: 12px;
	}

	.shopnews_btn{
		width: 100%;
		font-size: 18px;
	}

	.shopnews_btn a{
		width: 100%;
		font-size: 18px;
	}

	.shopnews_btn a:before{
		left: 25px;
	}

	.shopmenu_container {
		padding: 40px 20px;
	}

	.shopmenu_imglist li{
		margin: 0 0 25px;
		width: 48%;
		margin-bottom: 30px;
	}

	.shopmenu_text{
		font-size: 16px;
		line-height: 1em;
	}
	
	.shopmenu_textlist{
		margin: 35px 0;
	}

	.shopmenu_textlist li{
		width: 100%;
		font-size: 16px;
	}

	.shopmenu_textlist li:nth-child(4n-2), 
	.shopmenu_textlist li:nth-child(4n-3) {
		background: none;
	}

	.shopmenu_textlist li:nth-child(2n-1) {
		background: #FFFFFF;
	}

	.shopmenu_textlist li > span {
		font-size: 12px;
	}

	.shopmenu_btn{
		width: 100%;
		font-size: 18px;
	}

	.shopmenu_btn a{
		width: 100%;
		font-size: 18px;
	}

	.shopmenu_btn a:before{
		left: 10px;
	}

	.shopmap_container {
		padding: 40px 20px;
	}

	.shopmap_mapinner {
		width: 100%;
	}

	#shopmap_canvas {
		height: 300px;
	}
	
	.shopmap_infoinner {
		width: 100%;
		padding: 30px 0 0;
	}

	.shopmap_infoinner > h4 {
		padding: 15px;
		font-size: 18px;
	}

	.shopmap_infoinner > dl > dt {
		width: 100%;
	}

	.shopmap_infoinner > dl > dt:after {
		content: "";
	}

	.shopmap_infoinner > dl > dt:before {
		content: "●";
	}

	.shopmap_infoinner > dl > dd {
		width: 100%;
		border-bottom: 1px solid #666666;
	}

	.shopfood_container {
		padding: 40px 20px;
	}
	
	.shopfood_message {
		padding: 20px;
		font-size: 14px;
		text-align: left;
	}

	.shopfood_message > p {
		margin: 5px;
	}

	.shopfood_message > p > br {
		display: none;
	}
	
	/* 会社案内 */

	.aboutmessage_container {
		padding: 40px 20px 140px;
	}

	.aboutmessage_container:after {
		height: 100px;
		left: 0;
	}

	.aboutmessage_content {
		background-position: center top;
	}

	.aboutmessage_imginner {
		-webkit-box-ordinal-group: 2;
		-ms-flex-order: 2;
		-webkit-order: 2;
		order: 2;
		width: 50%;
		margin: 0 auto;
	}

	.aboutmessage_textinner {
		-webkit-box-ordinal-group: 1;
		-ms-flex-order: 1;
		-webkit-order: 1;
		order: 1;
		width: 100%;
		margin-bottom: 30px;
	}

	.aboutmessage_textinner > h4 {
		text-align: center;
	}

	.aboutmessage_textinner > h4 > img {
		width: 100%;
	}

	.aboutmessage_textinner > p {
		margin: 40px 0 0;
		font-size: 14px;
	}

	.aboutcommodity_container {
		padding: 40px 20px;
	}

	.aboutcommodity_content {
		margin: 30px auto;	
	}

	.aboutcommodity_card1 > h4, 
	.aboutcommodity_card2 > h4 {
		text-align: center;
		background: none;
		padding-bottom: 20px;
	}

	.aboutcommodity_card1 > h4 > img , 
	.aboutcommodity_card2 > h4 > img  {
		width: 100%;
	}

	.aboutmessage_inner {
		padding: 0 20px 20px;
	}

	.aboutmessage_inner > p {
		width: 100%;
		margin-bottom: 20px;
		font-size: 14px;
	}
	
	.aboutmessage_inner > img {
		width: 100%;
		height: 100%;
	}

	.aboutidea_container {
		padding: 0 20px;
	}

	.aboutcompany_container {
		padding: 40px 20px;
	}

	.aboutcompany_textinner {
		width: 100%;
	}

	.aboutcompany_h3title {
		text-align: center;
	}

	.aboutcompany_textcell > dl > dt {
		width: 100%;
	}

	.aboutcompany_textcell > dl > dt:after {
		content: "";
	}

	.aboutcompany_textcell > dl > dt:before {
		content: "●";
	}

	.aboutcompany_textcell > dl > dd {
		width: 100%;
		border-bottom: 1px solid #666666;
	}

	.aboutcompany_imginner {
		width: 100%;
		text-align: center;
	}

	/* メニュー */

	.menulist_container {
		padding: 40px 20px;
	}

	.menulist_imglist li{
		margin: 0 0 25px;
		width: 48%;
		margin-bottom: 30px;
	}

	.menulist_imglist:after, 
	.menulist_imglist:before {
		width: 0;
	}

	.menulist_text{
		font-size: 16px;
		line-height: 1em;
	}

	.menugyoza_container {
		padding: 40px 20px;
	}

	.menugyoza_content {
		background: none;
		min-height: auto;
	}

	.menugyoza_textinner {
		position: static;
		width: 100%;
	}

	.menugyoza_textinner > h4 > img {
		width: 100%;
	}

	.menugyoza_textinner > p {
		font-size: 14px;
	}

	.menugyoza_note {
		font-size: 16px;
	}

	.menugyoza_note > br {
		display: none;
	}

	.recruitlink_container {
		padding: 40px 20px;
	}

	.recruitlink_Internallink li {
		width: calc((100% - 15px) / 3);
	}

	.recruitlink_Internallink a{
		padding: 5px 0;
		font-size: 14px;
	}

	.recruitlink_Internallink a:after{
		right: 5px;
	}

	.recruitinterview_container {
		padding: 40px 20px;
	}

	/*.recruitinterview_imginner {
		width: 50%;
		margin: 0 auto;
	}*/

	.recruitinterview_textinner {
		width: 100%;
		margin-bottom: 30px;
	}

	.recruitinterview_textinner > p {
		margin: 20px 0 30px;
		font-size: 18px;
		text-align: center;
	}

	.recruitinterview_textinner > dl {
		margin-top: 15px;
	}
	
	.recruitinterview_textinner > dl > dt {
		font-size: 16px;
	}
	
	.recruitinterview_textinner > dl > dd {
		margin-top: 8px;
		font-size: 14px;
	}

	.recruitrecruitment_container {
		padding: 40px 20px;
	}

	.recruitecruitment_content {
		margin: 0 auto;
	}

	.recruitecruitment_title {
		width: 100%;
		font-size: 20px;
		text-align: center;
	}

	.recruitecruitment_textcell {
		width: 100%;
	}

	.recruitecruitment_textcell > dl > dt {
		width: 100%;
		font-size: 14px;
	}

	.recruitecruitment_textcell > dl > dt:before {
		content: "●";
	}
	
	.recruitecruitment_textcell > dl > dd {
		width: 100%;
		font-size: 14px;
	}

	.recruitecruitment_textcell > p {
		width: 100%;
		font-size: 14px;
	}

	.recruitflow_container {
		padding: 40px 20px;
	}

	.recruitflow_talent {
		width: 100%;
	}

	.recruitflow_talent > p {
		margin: 0 0 25px;
		padding: 15px;
		font-size: 20px;
	}

	.recruitflow_adoption {
		width: 100%;
		margin: 30px 0 0;
	}
	
	.recruitflow_adoption > ul > li {
		font-size: 14px;
	}

	.recruitflow_adoption > ul > li > span {
		font-size: 12px;
	}

	.recruitcontact_container {
		padding: 40px 20px;
	}
	
	.recruitcontact_content {
		padding: 0;
	}
	
	.recruitcontact_title {
		font-size: 18px;
	}
	
	.recruitcontact_tel {
		display: inline-block;
		margin: 10px 0;
		padding: 5px 15px;
		font-size: 18px;
	}
	
	.recruitcontact_tel > span {
		padding-right: 10px;
		font-size: 14px;
	}
	
	.recruitcontact_tanto {
		font-size: 14px;
	}

	.notfound_content {
		padding: 0;
	}

	.notfound_content > p {
		font-size: 14px;
	}
	
	/* 個人情報保護方針 */

	.privacy_container{
		box-sizing: border-box;
		padding: 20px;
		width: 100%;
	}

}