@charset "utf-8";
/***************************************************************
File name  　　　　 : 　　　common.css
Description 　　　　:　　　 共通スタイル定義
Date       　　　　 :      2015/04
Table of contents:
・body
・header
・footer
**************************************************************/
/*-------------------------------------------------------------
body
-------------------------------------------------------------*/
body{
	font-family: Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-size:12px;
	color:#333333;
	width:320px;
	margin:0 auto;
	position:relative;
}
#bodyWrap{
	width:320px;
	overflow-x:hidden;
	position:relative;
	overflow-y:hidden;
}

/*-------------------------------------------------------------
header
-------------------------------------------------------------*/
header{
	position:relative;
}
header h1{
	font-size:10px;
	height:20px;
	line-height:20px;
	background:#827259;
	color:#fff;
	text-align:center;
}
header h1 + div{
	height:65px;
	text-align:center;
	position:relative;
}
header #menuBtn{
	width:28px;
	height:20px;
	border-radius:18px;
	background:#ece9e5;
	position:absolute;
	top:15px;
	left:15px;
	padding:16px 0 0 8px;
}
header #menuBtn div{
	width:19px;
	height:3px;
	border-radius:2px;
	background:#827259;
	position:relative;
}
header #menuBtn div:before{
    content: "";
	width:19px;
	height:3px;
	border-radius:2px;
	background:#827259;
    position: absolute;
    top: -6px;
    left: 0px;
}
header #menuBtn div:after{
    content: "";
	width:19px;
	height:3px;
	border-radius:2px;
	background:#827259;
    position: absolute;
    top: 6px;
    left: 0px;
}

header h1 + div img{
	padding:23px 0 0;
}
header #searchBtn{
	width:28px;
	height:27px;
	border-radius:19px;
	background:#92836b;
	position:absolute;
	top:15px;
	right:15px;
	padding:9px 0  0 8px;

}
header #searchBtn div{
	width:16px;
	height:16px;
	border-radius:8px;
	background:#fff;
	position:relative;
}
header #searchBtn div:before{
    content: "";
	width:10px;
	height:10px;
	border-radius:5px;
	background:#92836b;
    position: absolute;
    top: 3px;
    left: 3px;
}
header #searchBtn div:after{
    content: "";
	width:4px;
	height:9px;
	border-radius:6px;
	background:#fff;
    position: absolute;
    top: 10px;
    left: 14px;
	transform: rotate(-50deg);
	-webkit-transform:rotate(-50deg);
}
header > ul{
}
header > ul > li{
	float: left;
	width:106px;
	height:3px;
	background:#53c8be;
}
header > ul > li:first-child{
	background:#ec8a8b;
	border-right:1px solid #f8f3ea;
}
header > ul > li:last-child{
	background:#f6ae20;
	border-left:1px solid #f8f3ea;
}
/*-------------------------------------------------------------
menu
---------------------------------------------------------*/
#menuWrap{
	 position:absolute;
	 top:0;
	 left:0;
	 z-index:5;
	 width:320px;
	 background:#fff;
	 height:1500px;
	 opacity:0;
	 display:none;
}
#menu{
	width:210px;
	position:absolute;
	top:0;
	left:-210px;
	z-index:10;
	background:#f5f0e9;
}
#menu > div{
	height:25px;
	padding:25px 0 0 180px;
}
#menu > div > div{
	width:17px;
	height:2px;
	background:#827259;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	position:relative;
}
#menu > div > div:after{
	content:"";
	width:17px;
	height:2px;
	background:#827259;
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	position:absolute;
	top:0px;
	left:0px;
}
#menu ul{
	margin:0 0 50px;
}
#menu ul li{
	height:44px;
	line-height:44px;
	background:#ded4c6;
	border-bottom:1px solid #baad96;
}
#menu ul li a{
	width:100%;
	height:100%;
	display:block;
}
#menu ul li  > div,
#menu ul li a > div{
	padding:0 0 0 15px;
	position:relative;
}
#menu ul .menuTtl{
	background:#827259 !important;
	color:#fff;
	font-size:14px;
	font-weight:bold;
	border-bottom:1px solid #baad96;
}

#menu ul li a > div:before{
	content:"";
	width:3px;
	height:10px;
	background:#827259;
	border-radius:3px;
	position:absolute;
	top:15px;
	right:20px;
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
}
#menu ul li a > div:after{
	content:"";
	width:3px;
	height:10px;
	background:#827259;
	border-radius:3px;
	position:absolute;
	top:20px;
	right:20px;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
}



#serach{
	position:absolute;
	top:88px;
	left:0;
	z-index:10;
	background:#f5f0e9;
	width:320px;
	display:none;
}
#serach form > ul{
	padding:35px 0 0;
}
#serach form > ul > li{
	border-top:1px solid #fff;
	padding:14px 0 35px 15px;
	font-size:13px;
	position:relative;
}
#serach ul .serachTtl{
	padding:0 0 8px 10px;
	border-top: none;
	border-bottom:1px solid #cccccc;
}
#serach ul .serachTtl div{
	font-size:16px;
	font-weight:bold;
	line-height:1;
}
#serach ul .serachTtl #serach1{
	background:url(../img/common/serach/ico_area.gif) left no-repeat;
	background-size:11px 16px;
	line-height:16px;
	padding:0 0 0 16px;
}
#serach ul .serachTtl #serach2{
	background:url(../img/common/serach/ico_alcohol.gif) left no-repeat;
	background-size:8px 23px;
	line-height:23px;
	margin:0 0 0 5px;
	padding:0 0 0 14px;
}
#serach ul .serachTtl #serach3{
	background:url(../img/common/serach/ico_fixate.gif) left no-repeat;
	background-size:16px 15px;
	line-height:15px;
	padding:0 0 0 20px;
}
#serach ul .serachTtl #serach4{
	background:url(../img/common/serach/ico_freeWord.gif) left no-repeat;
	background-size:16px 16px;
	line-height:16px;
	padding:0 0 0 20px;
}

#serach form > ul > li > p{
	margin:15px 0 0;
}
#serach form > ul > li >  p:first-child{
	margin:0;
}
#serach form > ul > li > label{
	margin:0 20px 0 0;
}
#serach form > ul > li >  ul{
}
#serach form > ul > li >  ul li{
	float: left;
	width:145px;
	padding:0 0 15px;
}
#serach form > ul > li >  ul li:nth-child(2){
	width:160px;
}

#serach ul li input[type="checkbox"]{
	margin:0 5px 0 0;
	line-height:1;
}
#serach ul li input[type="text"]{
	width:278px;
	height:30px;
	border:1px solid #fff;
	margin:0 0 0 -5px;
	padding:5px 10px;
	background:#fff;
	border-radius:5px;
	-webkit-border-radius:5px;
}
#serach ul li #serachIco{
	width:16px;
	height:16px;
	border-radius:8px;
	background:#cccccc;
	position:absolute;
	top:25px;
	right:28px;
	z-index:5;
}
#serach ul li #serachIco:before{
	content:"";
	width:10px;
	height:10px;
	border-radius:5px;
	background:#fff;
	position:absolute;
	top:3px;
	left:3px;
	z-index:5;
}

#serach ul li #serachIco:after{
	content:"";
	width:4px;
	height:8px;
	border-radius:4px;
	background:#cccccc;
	position:absolute;
	top:10px;
	right:-1px;
	z-index:5;
	transform:rotate(-50deg);
	-webkit-transform:rotate(-50deg);
}
#serach #searchCriteriaBtn{
	width:300px;
	height:50px;
	text-align:center;
	font-size:16px;
	margin:0 auto 60px;
	background:#98743c;
	background: -webkit-linear-gradient(-90deg, #b18b50 0, #8b6831 100%);
	background: -moz-linear-gradient(180deg, #b18b50 0, #8b6831 100%);
	background: linear-gradient(180deg, #b18b50 0, #8b6831 100%);
	border-radius:8px;
}
#serach #searchCriteriaBtn p{
	line-height:50px;
	color:#fff;
	text-shadow:1px 1px 1px rgba(0,0,0,0.1);
	-webkit-text-shadow:1px 1px 1px rgba(0,0,0,0.1);
}
#serachCloseBtn{
	position:absolute; 
	top:-10px;
	right:0;
	width:100px;
	height:25px;
}
#serachCloseBtn div{
	position:absolute;
	top:0;
	right:25px;
	width:2px;
	height:17px;
	background:#827259;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
}
#serachCloseBtn div:after{
	content:"";
	position:absolute;
	top:0;
	right:0;
	width:2px;
	height:17px;
	background:#827259;
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
}

/*-------------------------------------------------------------
path
---------------------------------------------------------*/
#path{
}
#path ol{
	/*padding:34px 0 10px 10px;*/
	padding:0 0 10px 10px;

}
#path ol li{
	display: inline;
    line-height: 1;
    font-size: 11px;
    margin: 0 4px 0 0;
}
#path ol li a{
	padding:0 6px 0 0;
	text-decoration:underline;
}

/*-------------------------------------------------------------
main
-------------------------------------------------------------*/
main{
	background:#f5f0e9;
}
main>h2{
	border-top:1px solid #f8f3ea;
	height:39px;
	line-height:39px;
	font-size:16px;
	font-weight:bold;
	color:#696052;
	padding:0 0 0 13px;
	background:#ebe3d7;
	margin:0 0 30px;
}

main section h2{
	padding:24px 0 9px 15px;
	border-bottom:1px solid #cfcece;
}
main #newShop > ul{
	border-top:1px solid #fff;
}
main #newShop > ul >li{
}
main #newShop > ul >li ul{
	padding:0 10px;
}
main #newShop > ul >li ul li{
	float: left;
	width:195px;
	height:90px;
	padding:10px 0;
	border-bottom:1px solid #fff;
	position:relative;
}
main #newShop > ul >li ul li:first-child{
	width:105px;
}
main #newShop > ul >li ul li p:first-child{
	margin:0;
}
main #newShop > ul >li ul li p{
	margin:0 0 0 5px;
}
main #newShop > ul >li ul li .wineIco{
	display:inline-block;
	width:45px;
	height:16px;
	line-height:16px;
	background:#ec8a8b;
	font-size:10px;
	font-weight:bold;
	color:#fff;
	text-align:center;
	text-shadow:1px 1px 1px rgba(0,0,0,0.1);
	-webkit-text-shadow:1px 1px 1px rgba(0,0,0,0.1);
}
main #newShop > ul >li ul li .sakeIco{
	display:inline-block;
	width:35px;
	height:16px;
	line-height:16px;
	background:#53c8be;
	font-size:10px;
	font-weight:bold;
	color:#fff;
	text-align:center;
	text-shadow:1px 1px 1px rgba(0,0,0,0.1);
	-webkit-text-shadow:1px 1px 1px rgba(0,0,0,0.1);
}
main #newShop > ul >li ul li .beerIco{
	display:inline-block;
	width:65px;
	height:16px;
	line-height:16px;
	background:#f6ae20;
	font-size:10px;
	font-weight:bold;
	color:#fff;
	text-align:center;
	text-shadow:1px 1px 1px rgba(0,0,0,0.1);
	-webkit-text-shadow:1px 1px 1px rgba(0,0,0,0.1);
}
main #newShop > ul >li ul li h3{
	color:#2261b0;
	line-height:1;
	font-size:13px;
	font-weight:bold;
	padding:8px 0 10px;
}
main #newShop > ul >li ul li .newShopTxt{
	margin:0;
	font-size:11px;
}
main #newShop > ul >li ul li div{
	width:3px;
	height:10px;
	background:#cccccc;
	border-radius:3px;
	position:absolute;
	top:50px;
	right:5px;
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
}
main #newShop > ul >li ul li div:after{
	content:"";
	width:3px;
	height:10px;
	background:#cccccc;
	border-radius:3px;
	position:absolute;
	top:4px;
	right:4px;
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
}
main #featuredShop{
}
main #featuredShop > ul{
	border-top:1px solid #fff;
	padding:20px 0 0;
}
main #featuredShop > ul > li{
	position:relative;
}
main #featuredShop > ul #featuredShop1{
	width:320px;
	height:160px;
	background:url(../img/common/featuredShop/photo1.jpg)  top left no-repeat;
	background-size:100%;
}
main #featuredShop > ul #featuredShop2{
	width:320px;
	height:160px;
	background:url(../img/common/featuredShop/photo2.jpg) top left no-repeat;
	background-size:100%;
}
main #featuredShop > ul #featuredShop3{
	width:320px;
	height:160px;
	background:url(../img/common/featuredShop/photo3.jpg) top left no-repeat;
	background-size:100%;
}
main #featuredShop > ul #featuredShop4{
	width:320px;
	height:160px;
	background:url(../img/common/featuredShop/photo4.jpg) top left no-repeat;
	background-size:100%;
}
main #featuredShop > ul #featuredShop5{
	width:320px;
	height:160px;
	background:url(../img/common/featuredShop/photo5.jpg) top left no-repeat;
	background-size:100%;
}
main #featuredShop > ul #featuredShop6{
	width:320px;
	height:160px;
	background:url(../img/common/featuredShop/photo6.jpg) top left no-repeat;
	background-size:100%;
}
main #featuredShop > ul #featuredShop7{
	width:320px;
	height:160px;
	background:url(../img/common/featuredShop/photo7.jpg) top left no-repeat;
	background-size:100%;
}
main #featuredShop > ul #featuredShop8{
	width:320px;
	height:160px;
	background:url(../img/common/featuredShop/photo8.jpg) top left no-repeat;
	background-size:100%;
}
main #featuredShop > ul #featuredShop9{
	width:320px;
	height:160px;
	background:url(../img/common/featuredShop/photo9.jpg) top left no-repeat;
	background-size:100%;
}
main #featuredShop > ul #featuredShop10{
	width:320px;
	height:160px;
	background:url(../img/common/featuredShop/photo10.jpg) top left no-repeat;
	background-size:100%;
}

main #featuredShop > ul > li a{
	display:block;
	width:100%;
	height:100%;
}
main #featuredShop > ul > li a .featuredShopshasow{
		width:320px;height:60px;   position:absolute; bottom:0; left:0;
		background-image: -webkit-linear-gradient(-90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0.5) 100%);
		background-image: -moz-linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,0.5) 100%);
		background-image: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,0.5) 100%);
		background-position: 50% 50%;
		-webkit-background-origin: padding-box;
		background-origin: padding-box;
		-webkit-background-clip: border-box;
		background-clip: border-box;
		-webkit-background-size: auto auto;
		background-size: auto auto;
}
main #featuredShop > ul li ul{
	width:100%;
	height:45px;
	position:absolute;
	bottom:0;
}
main #featuredShop > ul li ul li{
	float: left;
	width:255px;
}
main #featuredShop > ul li ul li:first-child{
	width:60px;
	padding:0 0 0 5px;
}
main #featuredShop  ul li ul li p{
	margin:0;
	padding:0;
	line-height:1 !important;
}
main #featuredShop  ul li ul li h3{
	line-height:1;
	color:#fff;
	font-size:15px;
	font-weight:bold;
	padding:4px 0 5px;
}
main #featuredShop  ul li ul li p{
	line-height:1;
	color:#fff;
	font-size:12px;
}
main #featuredShop  ul li ul li div{
	width:3px;
	height:10px;
	background:#fff;
	border-radius:3px;
	position:absolute;
	bottom:25px;
	right:15px;
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);

}
main #featuredShop  ul li ul li div:after{
	content:"";
	width:3px;
	height:10px;
	background:#fff;
	border-radius:3px;
	position:absolute;
	bottom:-4px;
	right:4px;
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
}


main #specialContents{
}
main #specialContents > ul{
	border-top:1px solid #fff;
	padding:20px 0 0px;
	width:300px;
	margin:0 auto;
}
main #specialContents > ul > li{
	position:relative;
}
main #specialContents > ul > li a{
	display:block;
	width:1000%;
	height:100%;
}
main #specialContents > ul > li h3{
	font-size:13px;
	font-weight:bold;
	color:#2261b0;
	line-height:1;
	padding:14px 0 8px 5px;
}
main #specialContents > ul > li p{
	padding:0 0 20px 5px;
	width:195px;
}
main #specialContents > ul > li div{
	width:3px;
	height:10px;
	background:#dad8d6;
	border-radius:3px;
	position:absolute;
	top:148px;
	right:10px;
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
}
main #specialContents > ul > li div:after{
	content:"";
	width:3px;
	height:10px;
	background:#dad8d6;
	border-radius:3px;
	position:absolute;
	top:4px;
	right:4px;
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
}

/*#cmnSns{
	padding:20px 0;
}
#cmnSns li{
	float:left;
	margin:0 0 0 5px;
}
#cmnSns li:first-child{
	margin:0 0 0 7px;
}
#cmnSns #cmnSnsFb {
    width: 70px !important;
    overflow: hidden !important;
}*/

#cmnSns{
	padding:20px 0;
	width:275px;
	margin:0 auto;
}
#cmnSns li{
	float:left;
}
#cmnSns li:nth-child(1){
	width:105px;
	overflow:hidden;
}
#cmnSns li:nth-child(2){
	width:80px;
}
#cmnSns li:nth-child(3){
	width:85px;
}

#prMain a{
	display:block;
	width:100%;
	height:100%;
}
#prMain a img{
	margin:0 0 15px;
}



/*-------------------------------------------------------------
footer
-------------------------------------------------------------*/
footer{
	width:320px;
}
footer > a >div{
	background:#9d8e77;
	background-image: -webkit-linear-gradient(-90deg, #9d8e77 0, #827259 100%);
	background-image: -moz-linear-gradient(180deg, #9d8e77 0, #827259 100%);
	background-image: linear-gradient(180deg, #9d8e77 0, #827259 100%);
	background-position: 50% 50%;
	-webkit-background-origin: padding-box;
	background-origin: padding-box;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-background-size: auto auto;
	background-size: auto auto;
	height:35px;
	position:relative;
}
footer div div{
	width:3px;
	height:10px;
	background:#dad8d6;
	border-radius:3px;
	position:absolute;
	top:12px;
	left:151px;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
}
footer div div:after{
	content:"";
	width:3px;
	height:10px;
	background:#dad8d6;
	border-radius:3px;
	position:absolute;
	top:-4px;
	right:-4px;
	transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
}


footer ul{
}
footer ul li{
	height:48px;
}
footer ul li a{
	display:block;
	width:100%;
	height:100%;
	line-height:48px;
	box-sizing:border-box;
	font-size:13px;
	padding:0 0 0 16px;
	background:#f5f0e9;
	border-bottom:1px solid #fff;
}
footer ul li:last-child a{
	border-bottom:none;
}


footer p{
	height:50px;
	line-height:50px;
	text-align:center;
	font-size:10px;
}


/*-------------------------------------------------------------
a hover
-------------------------------------------------------------*/
a,
.blkLink{
	color:#333;
	text-decoration:none;
	opacity:1;
	filter: alpha(opacity=100);      
	-ms-filter: "alpha(opacity=100)"; 
	-moz-opacity:1;                 
	-khtml-opacity: 1;             
	zoom:1;
	transition-property:opacity;
	transition-duration:0.5s;
	transition-timing-function:ease;
}
a:hover,
a > img:hover,
.blkLink:hover{
	cursor:pointer;
	opacity:0.7;
	filter: alpha(opacity=70);      
	-ms-filter: "alpha(opacity=70)"; 
	-moz-opacity:0.7;                 
	-khtml-opacity: 0.7;             
	zoom:1;
}
.blkLink > a{
	width:100%;
	height:100%;
	display:block;
}
a img{
	box-shadow: #000 0 0 0;
}

/*-------------------------------------------------------------
other
-------------------------------------------------------------*/
/* clear */
.clear{
	clear: both;
}
/* clearfix */
.clearfix:after {
	display: block;
	visibility: hidden;
	content: ".";
	clear: both;
	height: 0;
	font-size: 0;
	line-height: 0;
}
input{
	vertical-align: middle;
	position:relative;
	top:-1px;
}
input::selection,
textarea::selection{
	color:#333;
}
label{
	cursor: pointer;
}











.gMapInfo{
	width:225px;
}

.gMapInfo ul{
}
.gMapInfo ul li{
	float: left;
	width:125px;
	height:90px;
	padding:10px 0;
	border-bottom:1px solid #fff;
	position:relative;
}
.gMapInfo ul li:first-child{
	width:90px;
	padding:0 10px 0 0;
}
.gMapInfo ul li p{
}
.gMapInfo ul li p:first-child{
	margin:0;
}
.gMapInfo ul li .wineIco{
	display:inline-block;
	width:35px;
	height:16px;
	line-height:16px;
	background:#ec8a8b;
	font-size:10px;
	transform:scale(0.5);
	 -webkit-transform:scale(0.75);
	font-weight:bold;
	color:#fff;
	text-align:center;
	text-shadow:1px 1px 1px rgba(0,0,0,0.1);
	-webkit-text-shadow:1px 1px 1px rgba(0,0,0,0.1);
}
.gMapInfo ul li .sakeIco{
	display:inline-block;
	width:28px;
	height:16px;
	line-height:16px;
	background:#53c8be;
	font-size:10px;
	transform:scale(0.5);
	 -webkit-transform:scale(0.75);
	font-weight:bold;
	color:#fff;
	text-align:center;
	text-shadow:1px 1px 1px rgba(0,0,0,0.1);
	-webkit-text-shadow:1px 1px 1px rgba(0,0,0,0.1);
}
.gMapInfo ul li .beerIco{
	display:inline-block;
	width:55px;
	height:16px;
	line-height:16px;
	background:#f6ae20;
	font-size:10px;
	transform:scale(0.5);
	 -webkit-transform:scale(0.75);
	font-weight:bold;
	color:#fff;
	text-align:center;
	text-shadow:1px 1px 1px rgba(0,0,0,0.1);
	-webkit-text-shadow:1px 1px 1px rgba(0,0,0,0.1);
}
.gMapInfo ul li h3{
	color:#2261b0;
	line-height:1;
	font-size:13px;
	font-weight:bold;
	padding:8px 0 10px;
	text-decoration:underline;
}
.gMapInfo ul li .newShopTxt{
	margin:0;
	font-size:11px;
}
.gMapInfo ul li div{
	width:3px;
	height:10px;
	background:#cccccc;
	border-radius:3px;
	position:absolute;
	top:50px;
	right:5px;
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
}
.gMapInfo ul li div:after{
	content:"";
	width:3px;
	height:10px;
	background:#cccccc;
	border-radius:3px;
	position:absolute;
	top:4px;
	right:4px;
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
}