@import "font.css";	
/***********************************************************************************************************************
* リサイズ	767px以下から800pxまで
***********************************************************************************************************************/
@media screen and (max-width: 767px) {

body{
	/*font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo','ＭＳ Ｐゴシック','sans-serif';*/
	font-size: 12px;	
	font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto,'Noto Sans Japanese',"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif !important;

	padding-top: 50px;
}
h1,h2,h3,h4,h5,h6,strong,th,.Bld{
	font-weight:bold;
	/*font-family: 'ヒラギノ角ゴ Pro W6','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo','ＭＳ Ｐゴシック','sans-serif' !important;*/
	font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto,'Noto Sans Japanese',"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif !important;
}
button{
	/*font-family: 'ヒラギノ角ゴ Pro W6','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo','ＭＳ Ｐゴシック','sans-serif' !important;*/
	font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto,'Noto Sans Japanese',"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif !important;
	}

.hover:hover{
	-ms-filter: "alpha( opacity=100 )";
	    filter: alpha( opacity=100 );
	opacity: 1;
}
.font-mintyo{
	font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto,'Noto Sans Japanese',"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif !important;

}
/***********************************************************************************************************************
* 基本構造
***********************************************************************************************************************/
/*ヘッダー*/
header{
	position: fixed;
	width: 100%;
	height: 60px;
	padding: 0;
	z-index: 100;
	top: 0px;
}
.header{
	height: 50px;
	padding: 0;
}
	.header__logo{
		width: 100px;
		margin: 0 auto;
		padding-top: 11px;
	}
	.header__anniversary{
		position: absolute;
		top: 50%;
		left: 10px;
		margin-top: -16px;
		width: 86px;
	}

	header #menu-button{
		display: block;
		position: absolute;
		top: 17px;
		right: 10px;
		width: 70px;
		height: 25px;
	}
		header #menu-button>p{
			font-weight: bold;
			margin-top: 9px;
			font-size: 10px;
			margin-top: 2px;
		}
		header .menu-button__line{
			position: absolute;
			top: 0px;
			/*right: 0px;*/
			width: 31px;
			height: 24px
		}
			header .menu-button__line>div{
				width: 100%;
				height: 2px;
				background: #fff;
				position: absolute;
				-webkit-transition: all .5s;
				        transition: all .5s;
			}
			header .menu-button__line>div:nth-child(1){
				top: 0px;
				left: 0px;
				-webkit-transform: translate(0%,0%);
				        transform: translate(0%,0%);
			}
				header #menu-button.active .menu-button__line>div:nth-child(1) {
					top: 50%;
					-webkit-transform: translate(-5%,-50%) rotate(45deg);
					        transform: translate(-5%,-50%) rotate(45deg);
				}
			header .menu-button__line>div:nth-child(2){
				top: 11px;
				left: 0px;
			}
				header #menu-button.active .menu-button__line>div:nth-child(2) {
					opacity: 0;
				}
			header .menu-button__line>div:nth-child(3){
				top: 21px;
				left: 0px;
				-webkit-transform: translate(0%,0%);
				        transform: translate(0%,0%);
			}
				header #menu-button.active .menu-button__line>div:nth-child(3) {
					top: 50%;
					-webkit-transform: translate(-5%,-50%) rotate(-45deg);
					        transform: translate(-5%,-50%) rotate(-45deg);
				}

	header nav{
		position: absolute;
		background: #E7D8CD;
		top: 60px;
		left: 100%;
		width: 100%;
		border-top: 1px solid #f0f0f0;
		-webkit-transition: all .3s ease;
		   -moz-transition: all .3s ease;
		    -ms-transition: all .3s ease;
		     -o-transition: all .3s ease;
		        transition: all .3s ease;
					-webkit-box-sizing: border-box;
					   -moz-box-sizing: border-box;
					    -ms-box-sizing: border-box;
					     -o-box-sizing: border-box;
					        box-sizing: border-box;
		overflow-y: scroll;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		z-index: 2;
	}
	header a{
		color: #422F21;
	}
	header nav.active{
		left: 0px;
	}
		header nav a{position: relative}
			header nav a::after{
				content: "";
				position: absolute;
				width: 10px;
				height: 10px;
				top: 50%;
				right: 10px;
				margin-top: -6px;
				border-top: 1px solid #422F21;
				border-right: 1px solid #422F21;
				-webkit-transform: rotate(45deg);
				   -moz-transform: rotate(45deg);
				    -ms-transform: rotate(45deg);
				     -o-transform: rotate(45deg);
				        transform: rotate(45deg);
			}
		.header__menu{
			width: 100%;
			text-align: left;
			letter-spacing: normal;
		}
			.header__menu li{
				display: block;
				width: 100% !important;
				border:none;
				border-bottom: 1px solid #f0f0f0;
			}
			.header__menu li:last-child{
				border-right: none;
			}
				.header__menu li a{
					display: block;
					padding: 20px;
				}
					.header__menu li a span{
						display: inline-block;
						font-size: 123%;
						line-height: 1em;
						margin-bottom: 0px;
						vertical-align: baseline;
					}
					.header__menu li a em{
						display: inline-block;
						line-height: 1em;
						vertical-align: baseline;
						margin-left: 10px;
					}
		.header__menu2{
			position: relative;
			top: 0px;
			right: 0px;
			text-align: left;
		}
			.header__menu2 li{
				float: none;
				margin-left: 0px;
				border-bottom: 1px solid #f0f0f0;
			}
			.header__menu2 li:last-child{
				background: none;
				padding-left: 0px;
			}
				.header__menu2 li a{
					display: block;
					font-size: 123%;
					line-height: 1em;
					padding: 15px 20px;
				}
				.header__menu2 li:last-child a{
					background: url("../img/header/cart.png") 20px center no-repeat;
					background-size: 15px;
					padding: 15px 20px 15px 43px;
				}

		.header__menu3{
			position: relative;
			top: 0px;
			right: 0px;
			text-align: left;
		}
			.header__menu3 li{
				position: relative;
				float: none;
				margin-left: 0px;
				padding-left: 0px;
				border-bottom: 1px solid #f0f0f0;
			}
				.header__menu3 li::after{
					display: none;
				}
				.header__menu3 li a{
					display: block;
					font-size: 123%;
					line-height: 1em;
					padding: 15px 20px;
				}
		.header__menu4{
			padding-bottom: 0px;
		}
			.header__menu4 li{
				border-bottom: 1px solid #f0f0f0;
			}
				.header__menu4 li a{
					display: block;
					font-size: 123%;
					line-height: 1em;
					padding: 15px 20px;
				}

/*フッター*/
footer{
	padding-top: 20px;
}
	.footer__area-top{
		background: url("../img/footer/bg.jpg") left top repeat;
		background-size: 25px;
		padding: 20px 0 0;
	}
		/*店舗検索*/
		.footer__area-top__search{
			float: none;
			width: 100%;
		}
			.footer__area-top__search ul{
				padding-bottom: 20px;
			}
				.footer__area-top__search li{
					margin-bottom: 5px;
					padding-right: 20px;
				}
					.footer__area-top__search li a{
						width: 100%;
						padding: 3px 0px 3px 20px;
					}
					.footer__area-top__search li a {
					    width: 90%;
					    padding: 0px 0px 0px 20px;
					    font-size: 0.85em;
					}
		/*67th*/
		.footer__area-top__info{
			float: none;
			width: 100%;
			padding-bottom: 0px;
		}
			.footer__area-top__info__contents{
				display: block;
				width: 92%;
				padding: 15px 10px 20px;
				border-bottom: none;
			}
				.footer__area-top__info__contents__tel{
					display: block;
					width: 100%;
					margin-bottom: 5px;
				}
					.footer__area-top__info__contents__tel__title{
						margin-bottom: 5px;
					}
					.footer__area-top__info__contents__tel p{
						display: block;
						background: url("../img/footer/icon-tel.png") left center no-repeat;
						background-size: 27px;
						padding-left: 30px;
						font-size: 184.6%;
						line-height: 31px;
					}
				.footer__area-top__info__contents__access{
					display: block;
					width: 100%;
				}
					.footer__area-top__info__contents__access__info li:last-child{
						padding-left: 15px;
					}
						.footer__area-top__info__contents__access__info li a{
							padding: 10px 25px 10px 20px;
						}
						.footer__area-top__info__contents__access__info li p{
							font-size: 94%;
						}
						.footer__area-top__info__title {
						    padding: 0px 0 1em;
						    width: 96%;
						    margin: 0 auto;
						    border-bottom: 1px solid #422F21;
						}
	.footer__area-bottom{
		padding: 20px 0;
		text-align: center;
	}
		.footer__area-bottom nav ul{
			display: none;
		}
		.footer__logo{
			margin-bottom: 10px;
		}
			.footer__logo img{
				width: 96px;
			}
		#copryright{
			font-size: 92.3%;
			color: #aaa;
		}
.footer__area-top__info__contents {
    display: block;
    width: 86%;
    padding: 15px 0 20px;
    margin: 0 auto;
    border-bottom: none;
}
.footer__area-top__info__contents__access__info li a {
    padding: 5px 25px 5px 15px;
}
/*ページ遷移ボタン*/
#pagetop{
	position: fixed;
	right: 10px;
	bottom: 10px;
	-ms-filter: "alpha( opacity=0 )";
	    filter: alpha( opacity=0 );
	opacity: 0;
	-webkit-transition: opacity .5s ease;
	   -moz-transition: opacity .5s ease;
	    -ms-transition: opacity .5s ease;
	     -o-transition: opacity .5s ease;
	        transition: opacity .5s ease;
}
#pagetop.open{
	-ms-filter: "alpha( opacity=100 )";
	    filter: alpha( opacity=100 );
	opacity: 1;
}
	#pagetop a{
		display: block;
		width: 40px;
		height: 40px;
	}
		#pagetop a::after{
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0px;
			height: 0px;
			margin: -16px 0 0 -8px;
			border: 8px solid transparent;
			border-bottom: 14px solid #fff;
		}


/*コンテンツ*/
#container{padding: 0 10px; width: auto;}
#main{
	float: none;
	width: 100%;
	padding: 0px; position: relative;
}
/*下層サイドエリア*/
#side{
	float: none;
	width: 94%;
	/*border: 1px solid #422F21;*/
	padding: 20px 0 0;
	margin: 0 auto;
}
#side img{max-width: 100%;}
#side nav li{
	width: 49%;
	margin: 0.2em 0.5%;
	display: inline-block;
}

#side .side__main-banner,
#side .side__sub-banner{
	width: 100%;
	margin: 0 auto 0;
}
#side .mail{
	width: 70%;
}
#side .side_rec{
	background: #B8E5F4;
}

#side .side_rec li{
	display: inline-block;
	width: 50%;
	text-align: center;
	padding: 0.5em 0;
}
#side .side_rec li a{
	color: #00A3D9;
	font-weight: bold;
	font-size: 1.1em;
}
.wrap{width: 100%;}
.pc{display: none !important;}
.sp{display: block !important;}

/***********************************************************************************************************************
* TOPページ
***********************************************************************************************************************/
/*メインビジュアル*/
#keyimage{
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
	opacity: 0;
}

ul.link-banner{
	display: block;
	width: 80%;
	margin: 0 auto 1.5em;
}
ul.link-banner li{
	display: block;
	width: 100%;
	margin: 0 0 0.5em;
	padding: 0;
}
ul.link-banner li:nth-child(2n) {
    padding-left: 0px;
}

.campaign{
	display: block;
	width: 95%;
	margin: 0 auto 1.5em;
}

/*タイトル*/
.border-title{
	background: url("../img/border-title.jpg") left bottom repeat-x;
	padding: 5px 0 15px 0;
}
	.border-title .font-mintyo{
		display: block;
		font-size: 138.4%;
		line-height: 1em;
	}
	.border-title p{
		display: block;
		margin: 8px 0 0 0;
	}

/*ニュース*/
.news-list{
	margin-bottom: 30px;
}
	.news-list__title{
		margin-right: 0px;
	}
		.news-list__title ul{
			width: 100%;
			padding: 20px 0 10px;
		}
			.news-list__title li{
				width: auto;
			}
			.news-list__title li:first-child{
				width: 100px !important;
			}
			.news-list__title li:last-child{
				width: 4em;
			}
	.news-list__contents.mCustomScrollbar{
		height:auto;
	}
		.news-list__contents ul li a{
			position: relative;
			display: table;
			width: 100%;
		}
			.news-list__contents ul li time{
				width: 100px;
			}


/*オープン・リニューアル情報*/
.open-renewal-list{
	padding: 10px 0;
}
	.open-renewal-list li{
		float: none;
		width: 100%;
		padding-right: 0px;
	}
	.open-renewal-list li:nth-child(2n){
		padding-left: 0px;
	}
/*お知らせ・トピックス情報*/
.info-topics-list{
	padding: 10px 0 0;
}
	.info-topics-list li{
		float: none;
		width: 100%;
		padding-right: 0px;
	}
	.info-topics-list li:nth-child(2n){
		padding-left: 0px;
	}
		.info-topics-list__info__title{
			font-size: 123%;
			line-height: 1.6em;
		}

.info-topics-list2{
	padding: 10px 0 20px 0px;
}
.info-topics-list2 li {
    margin-left: 10px;
}


.info-topics-table {
	border-collapse: collapse;
	text-align: left;
	margin: 10px 0 20px;

}
.info-topics-table th {
	padding: 5px 0 5px 10px;
	font-weight: bold;
	vertical-align: top;
	border: 0px;
	color: red;
}
.info-topics-table td {
	padding: 5px 0 5px 5px;
	vertical-align: top;
	border: 0px;
}


/***********************************************************************************************************************
* 下層ページパーツ
***********************************************************************************************************************/

.font22{font-size: 138.4% !important;}
.mg-b20{margin-bottom: 10px !important;}


/*パンくずリスト*/
.breadcrumb{
	display: none;
}

/*メインタイトル*/
.headline--main{
	font-size: 200%;
	margin: 1.5em 0 20px;
}

.lower-box{padding: 0 0px 30px;}


/*菊屋とは*/
.about-tbl{
	margin-bottom: 10px;
}
	.about-tbl th{
		font-size: 92.3%;
		line-height: 1.2em;
		vertical-align: middle;
	}
	.about-tbl td{
		font-size: 92.36%;
	}

/*業態案内*/
.gyoutai{
	margin-bottom: 40px;
}
	.gyoutai>h2{
		/*width: 100px;*/
	}
	.gyoutai>h2 img{
		width: 140px;
	}
	.gyoutai>p{
		font-size: 107.6%;
		line-height: 1.6em;
	}
	.gyoutai>table{
		margin-bottom: 20px;
	}
		.gyoutai>table th{
			width: 8em;
			padding-right: 1em;
			vertical-align: top;
		}

/*店舗検索*/
.shop-prefecture{
	margin-bottom: 20px;
}
	.shop-prefecture li{
		width: 33.33%;
		padding-left: 4px;
		padding-bottom: 5px;
	}

.shop-list{
	margin-bottom: 20px;
}
	.shop-list li{
		display: table;
		border-bottom: 1px solid #ddd;
	}
		.shop-list li>a{
			width: 8em;
			padding: 0.5em 1em;
			font-size: 100%;
		}
		.shop-list li>p{
			display: table-cell;
			padding: 0.5em 1em;
			vertical-align: middle;
		}
		.shop-list__gyoutai{
			width: 70px;
			padding: 0.5em 1em 0.5em 0;
		}

/*店舗詳細*/
.shop-detail{
	padding: 0 0px 20px;
}
	.shop-detail__box{
		margin-bottom: 15px;
	}
	.shop-detail__thumb{
		float: left;
		width: 40%;
		text-align: center;
	}
	.shop-detail__info{
		width: 60%;
		padding-left: 20px;
	}
		.shop-detail__info__gyotai{
			width: 90px;
			margin-bottom: 10px;
		}
		.shop-detail__info__title{
			font-size: 138.4%;
			line-height: 1.4em;
			margin-bottom: 5px;
		}
		.shop-detail__info table{
			font-size: 100%;
			line-height: 1.4em;
		}
			.shop-detail__info table th{
				width: 5em;
				padding-bottom: 5px;
			}
			.shop-detail__info table td{
				padding-bottom: 5px;
			}
	.shop-detail__text{
		font-size: 107.6%;
		line-height: 1.6em;
		margin-bottom: 20px;
	}
	.shop-detail__title{
		font-size: 138.4%;
		margin-bottom: 10px;
	}
	.shop-detail__thumb-list{
		margin-bottom: 20px;
	}
		.shop-detail__thumb-list li{
			width: 25%;
			padding: 0 5px;
		}
	.shop-detail__event-title,
	.shop-detail__staff-title{
		font-size: 138.4%;
	}
	.shop-detail__event-text,
	.shop-detail__staff-text{
		font-size: 107.6%;
		line-height: 1.6em;
		margin-bottom: 30px;
	}

/*会社案内*/
.company-info{
	display: block;
	margin-bottom: 20px;
}
	.company-info th{
		display: block;
		width: auto;
		padding: 10px 10px 0;
		border-bottom: none;
	}
	.company-info td{
		display: block;
		width: auto;
		padding: 5px 10px 10px;
	}
		.company-info td a.a-button{
			display: block;
			width: 8em;
			margin: 5px 0 0;
		}

.company-history{
	margin-bottom: 20px;
}
	.company-history th{
		padding: 5px;
	}
	.company-history td{
		padding: 5px;
	}

/*地図・アクセス*/
.map{
	margin-bottom: 20px;
}
	.map iframe{
		height: 250px;
	}

.company-navi li{
	padding: 0 10px;
}
	.company-navi li a{
		font-size: 100%;
	}

.rinen-msg{
	padding: 15px;
	margin-bottom: 20px;
}
	.rinen-msg__title{
		font-size: 153.8%;
		line-height: 1em;
		margin-bottom: 10px;
	}
	.rinen-msg p{
		font-size: 123%;
		line-height: 1.2em;
		margin-bottom: 5px;
	}

	.rinen-msg ul{
		margin: 20px 0 0;
		font-size: 100%;
	}
		.rinen-msg ul li{
			margin-bottom: 0.5em;
		}
		.rinen-msg ul li:last-child{
			margin-bottom: 0;
		}
/*店舗採用*/
.recruit-info{
	width: 100%;
	border: 1px solid #ddd;
	border-bottom: none;
}
	.recruit-info th{
		padding: 5px;
		font-size: 92.3%;
		line-height: 1.5em;
	}
	.recruit-info th:nth-child(1){width: 4em;}
	.recruit-info th:nth-child(3){width: 4em;}
	.recruit-info td{
		padding: 5px;
		font-size: 92.3%;
		line-height: 1.5em;
	}

/*お取引（お問い合わせ）*/
.contact-tbl{
	display: block;
}
	.contact-tbl th{
		display: block;
		width: auto;
		padding: 10px 10px 0;
		border: none;
	}
		.contact-tbl th span{
			position: relative;
			top: 0px;
			right: 0px;
			margin-left: 10px;
			text-align: left;
		}
	.contact-tbl td{
		display: block;
		width: auto;
		padding: 5px 10px 10px;
	}
		.contact-tbl td input{
			width: 100%;
			-webkit-box-sizing: border-box;
			   -moz-box-sizing: border-box;
			    -ms-box-sizing: border-box;
			     -o-box-sizing: border-box;
			        box-sizing: border-box;
			-webkit-appearance: none;
			-webkit-border-radius: 0px;
			        border-radius: 0px;
		}
		.contact-tbl td select{
			margin-bottom: 0px;
/*			-webkit-appearance: none;*/
			-webkit-border-radius: 0px;
			        border-radius: 0px;
		}
		.contact-tbl td span{
			display: block;
		}
		.contact-tbl td textarea{
			height: 100px;
			-webkit-appearance: none;
			-webkit-border-radius: 0px;
			        border-radius: 0px;
		}
		.contact-tbl td font{
			margin-top: 5px;
		}

.form-button{
	text-align: center;
}
	.form-button input{
		display: inline-block;
		width: 40%;
		-webkit-appearance: none;
		-webkit-border-radius: 0px;
		        border-radius: 0px;
	}
	.form-button input[type="reset"]{
		background: #BBB;
	}
	.form-button input[type="submit"]{
		background: #422F21;
	}

/*ポイントカード*/
.point-card{
	margin: 20px 0 20px;
}
	.point-card__title{
		position: relative;
		font-size: 138.4%;
		line-height: 1.6em;
		padding-left: 30px;
		margin-bottom: 5px;
	}
		.point-card__title span{
			position: absolute;
			left: px;
			top: 2px;
			width: 25px;
			height: 25px;
			font-size: 70%;
			line-height: 25px;
		}
.point-title{
	width: 11em;
}
.point-special{
	padding: 1em;
	border: 3px solid #ccc;
}
	.point-special__title{
		font-size: 138.4%;
		margin-bottom: 5px;
	}
	.point-special .list-dotted{
		font-size: 107.6%;
		line-height: 1.6em;
	}


/* end リサイズ */
}
/***********************************************************************************************************************
* リサイズ	640px以下
***********************************************************************************************************************/
@media screen and (max-width: 640px) {
	.h-box{
		display: table;
		width: 100%;
	}
	.header__logo{
		display: table-cell;
		position: static;

	}
	.header__logo img{
		max-height: 38px;
		width: auto;
		margin-right: 31px;
	}
	.header__anniversary{
		display: table-cell;
		position: static;		
	}
	.header__anniversary img{
		max-height: 38px;
		width: auto;
	}
	.header #menu-button{
		display: table-cell;
		position: static;
		width: 31px;	
	}
	#menu-button p{
		display: none;
	}
	.header .menu-button__line{
		top: 15px;

	}

}

/***********************************************************************************************************************
* リサイズ	320px以下
***********************************************************************************************************************/
@media screen and (max-width: 320px) {
	.shop-list li>a{
		width: 5em;
	}
	.shop-list__gyoutai{
		width: 50px;
	}
}