/* Y'S GEAR : shoplist.css */


.srockText {
	margin: 5px 0 30px 0;
	color: #464646;
}


/*======================================================================*
 *  [ areaNav | エリア選択 ] 
 *======================================================================*/

.areaNav {
	display: table;
	width: 100%;
	padding: 13px 13px 13px 15px;
	box-sizing: border-box;
	background: #c2c4dd;
	font-size: 15px;
	font-size: 1.5rem;
}

.areaNav h2 {
	display: table-cell;
	width: 7em;
	color: #363a90;
	vertical-align: middle;
}

.areaNav ul {
	display: table-cell;
}
.areaNav li {
	float: left;
	width: 20%;
	padding: 2px;
	box-sizing: border-box;
}
.areaNav li a {
	display: block;
	padding: 2px 0;
	border: 1px solid #fff;
	background: #fff;
	color: #363a90;
	text-align: center;
}
.areaNav li span {
	display: block;
	padding: 2px 0;
	border: 1px solid #ebebeb;
	background: #ebebeb;
	color: #aaa;
	text-align: center;
}


/*======================================================================*
 *  [ shopList | ショップリスト ] 
 *======================================================================*/

.shopList {
	margin: 30px 0 40px 0;
	color: #464646;
}

.shopList h2 {
	margin: 0 0 10px 0;
	padding: 3px 0 3px 7px;
	border-left: 5px solid #363a90;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.2;
}

.shopList table, 
.shopList th, 
.shopList td {
	border: 1px solid #b4b4b4;
	box-sizing: border-box;
}
.shopList th, 
.shopList td {
	padding: 5px 10px;
	vertical-align: middle;
}

.shopList table {
	width: 100%;
}

.shopList thead th {
	background: #969696;
	color: #fff;
	font-size: 13px;
	font-size: 1.3rem;
}

.shopList tbody tr:nth-child(odd) {
	background: #ebebeb;
}
.shopList tbody th {
	width: 30%;
	text-align: left;
	font-weight: normal;
}

/* [ 項目ごと設定 ] */
.shopList .zip, 
.shopList .tel { white-space: nowrap; }
.shopList .zip { width: 5em; }
.shopList .tel { width: 7em; }
.shopList .close { width: 5em; text-align: center; }
.shopList .hour { width: 9em; }


/*======================================================================*
 *  [ Media Queries 568 ] 
 *======================================================================*/

@media screen and (max-width: 568px) {
	
	/*======================================================================*
	 *  [ areaNav | エリア選択 ] 
	 *======================================================================*/
	
	.areaNav {
		display: block;
		width: auto;
		margin: 0 -10px;
		padding: 10px 9px 9px 9px;
	}
	
	.areaNav h2 {
		display: block;
		width: auto;
		margin: 0 0 5px 0;
		text-align: center;
	}
	
	.areaNav ul {
		display: block;
	}
	.areaNav li {
		padding: 1px;
	}
	
	
	/*==================================================================*
	 *  [ shopList | ショップリスト ] 
	 *==================================================================*/
	
	.shopList table, 
	.shopList thead, 
	.shopList tbody, 
	.shopList tr,
	.shopList th, 
	.shopList td {
		display: block;
	}
	
	/* [ IE9対策 ] */
	:root .shopList tr,
	:root .shopList th, 
	:root .shopList td {
		float: left\0/;
		clear: both\0/;
	}
	.shopList table:after {
		display: block;
		clear: both;
		content: "";
	}
	
	.shopList thead {
		display: none;
	}
	
	.shopList tr {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
	}

	.shopList tbody th, 
	.shopList tbody td {
		width: auto !important;
		border: none;
		padding:0;
	}
	.shopList tbody th {
		width: 100%;
		margin: 0 0 5px 0;
		font-size: 14px;
		font-size: 1.4rem;
		font-weight: bold;
	}
	
	/* [ 項目ごと設定 ] */
	.shopList .tel { margin: 5px 0 0 0; }
	.shopList .close, 
	.shopList .hour {
		display: inline-block;
		margin: 0 10px 0 0;
	}
	
	/* [ 追加テキスト ] */
	.shopList .zip:before { content: "〒 "; }
	.shopList .tel:before { content: "TEL："; }
	.shopList .close:before { content: "定休日："; }
	.shopList .hour:before { content: "営業時間："; }
	
}


/*======================================================================*
 *  [ Media Queries 480 ] 
 *======================================================================*/

@media screen and (max-width: 480px) {
	
	/*==================================================================*
	 *  [ areaNav | エリア選択 ] 
	 *==================================================================*/
	
	.areaNav li {
		width: 25%;
	}
	
}