@charset "utf-8";
* { }
html { font-size:14px; overflow:auto; -webkit-text-size-adjust: 100%; }
body {
	line-height:1.4; color:#221814; overflow:hidden;
	background:#FFF url(../img/bg.jpg);
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", "Meiryo", sans-serif;
	}

body, h1, h2, h3, h4, dl, dd, ul, form, textarea, figure { margin:0; padding:0; font-size:100%; }

img, input[type="image"] { font-size:0; line-height:0; vertical-align:bottom; }
ul { list-style-type:none; }
fieldset { border:none; }
strong { font-size:1.2em; }
em { font-style:normal; font-weight:bold; }
label { display:inline-block; }
/*
input { -webkit-appearance: none; }
table { border-collapse:collapse; border-spacing:0; }
*/

article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; }

/*回り込み解除clearfix*/
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

/* 共通 ------------------------ */
a { color:#006d2c; text-decoration:none; }
a:active, a:hover { text-decoration:underline; }
a img { border-width:0px; }

.serif {
	font-family:
		"游明朝体", "Yu Mincho", YuMincho,
		"ヒラギノ明朝 ProN W6", "HiraMinProN-W6",
		"ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; }
.left   { text-align:left; }
.center { text-align:center; }
.right  { text-align:right; }
.small  { font-size:0.85em; }
.big    { font-size:1.2em; }
.bold { font-weight:bold; }
.indent{ text-indent: -1em; padding-left: 1em; }
.attention{ color:#B20000; }
.clear { clear:both; }
.hide { display:none; }
.iblock { display:inline-block; }
.wide { width:100%; }

ul.disc, ul.square { padding-left:1.3em; }
.disc li { list-style-type:disc; }
.square li { list-style-type:square; }
.upper-alpha li { list-style-type:upper-alpha; }
ul.upper-alpha, ol { margin-left:1.5em; padding:0; }

ul.col3 li { float:left; width:33.33%; }

.mt10 { margin-top:10px; }

img.middle { vertical-align:middle; }

.white { color:#FFF; }
.red { color:#B20000; }
.orange { color:#F75A0D; }
.yellow { color:#FFC40E; }

.fleft { float:left; }
.fright { float:right; }

.flex { display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; }
.flex-between { justify-content:space-between; -webkit-justify-content:space-between; }
.flex-center  { justify-content:center; -webkit-justify-content:center; }
.flex-align-center { -webkit-box-align:center; -webkit-align-items:center; align-items:center; }

.pc_none { display:none; }

a, .anime {
	-ms-transition: all .5s;
	transition: all .5s;
}

#wrapper { width:980px; margin:auto; position:relative; }
.fw { margin-left:-500%; margin-right:-500%; padding-left:500%; padding-right:500%; /*Full Width*/ }
@media print {
  .fw { margin-left:0; margin-right:0; padding-left:0; padding-right:0; }
}

/* anime------------------------*/
a.bean { display:inline-block; position:relative; }
a.bean:before { content:url(../img/bean.png); position:absolute; }
a.bean:hover:before{
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: bounce;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}

/* header------------------------*/
header { margin-bottom:17px; padding-top:15px; }
header .hsub1 { position:absolute; top:36px; left:372px; }
header .hsub1 li { float:left; margin-right:60px; }
header .hsub1 .bean:before { left:-19px; }
header .hsub1 li.m_magazine { margin:18px 0 0 -15px; }
header .hsub1 li.m_magazine .bean:before { left:88px; top:14px; }

header .hsub2 { position:absolute; top:29px; right:0; }
header .hsub2 .bean:before { top:10px; left:18px; }
header .hsub2 li { margin-bottom:8px; text-align:right; }
/*
header .hsub2 .cart {
	display:inline-block;  padding:11px 19px; 9px; background:#dda31f; border-radius:8px; position:relative; }
header .hsub2 .cart:before {
		display:blcok; position:absolute; top:-7px; left:-34px; line-height:1;
		padding:9px 7px 7px 9px; border-radius:21px;
		content:url(../img/h_ico_cart.png); background:#FFF; border:2px solid #006d2c;
	}
*/

header .snsLink { position:absolute; top:75px; right:260px; }
header .snsLink li + li { margin-left:8px; }
header .snsLink img { width:32px; }


/* header 共通トップページ------------------------*/
#common_top header .logo { text-align:center;}
#common_top header .snsLink { top:70px; right:10px; }

/* gnav------------------------*/
#gnav { margin-top:21px; background:#006d2c; border-radius:8px; }
#gnav > ul { padding:5px 0 10px; }
#gnav ul { overflow: hidden; }
#gnav li { float:left; padding:0 5px 0 54px; position:relative; }
#gnav li a { display:block; height:46px; overflow:hidden; position:relative; }
#gnav li img { display: block; top:0; position: absolute; }

#gnav li.home a			{ width:81px;  }		#gnav li.home a img 		{ left:0; }
#gnav li.shop a			{ width:94px;  }		#gnav li.shop a img 		{ left:-81px; }
#gnav li.beans a 		{ width:113px; }		#gnav li.beans a img 		{ left:-175px; }
#gnav li.menu a 		{ width:97px;  }		#gnav li.menu a img 		{ left:-288px; }
#gnav li.blog a			{ width:98px;  }		#gnav li.blog a img 		{ left:-385px; }
#gnav li.shopping a	{ width:100px;  }		#gnav li.shopping a img	{ left:-483px; }

#gnav li a:hover img, #gnav li.current img { top:-46px; }
#gnav li.current:before { position:absolute; top:12px; left:28px; content:url(../img/gnav_current.png); }

#gnav .snsLink { position:static; padding:5px 10px 50px; }
#gnav .snsLink li + li { border-top:0; }
#gnav .snsLink li a { position:static; padding:0; border:1px solid; border-color:rgba(255,255,255,.5); border-radius:3px; }
#gnav .snsLink li img { position:static; }

/* gnav 共通トップページ------------------------*/
#common_top #gnav { background:#4e3912; }
#common_top #gnav li { padding:0 5px 0 56px; }
#common_top #gnav li:hover:before { content:url("../img/gnav_current.png"); left:25px; position:absolute; top:12px; }
#common_top #gnav li.shimogamo a { width:134px;  }		#common_top #gnav li.shimogamo a img { left:0; }
#common_top #gnav li.zoukeidai a { width:159px;  }		#common_top #gnav li.zoukeidai a img { left:-134px; }
#common_top #gnav li.shopping a  { width:95px; }	  	#common_top #gnav li.shopping a img  { left:-292px; }
#common_top #gnav li.event a 		 { width:130px;  }		#common_top #gnav li.event a img 		 { left:-386px; }
#common_top #gnav li.blog a			 { width:99px;   }		#common_top #gnav li.blog a img 		 { left:-516px; }

/* contents------------------------*/
#contents { position:relative; }

a.btn {
	display:inline-block; min-width:170px; line-height:35px; text-align:center;
	color:#3e2e03; background:#f0e9d5;
	border-top:1px solid #857342;
	border-right:2px solid #3e2e03;
	border-bottom:2px solid #3e2e03;
	border-left:1px solid #857342;
	}
	a.btn:before { content:url(../img/arrow.png); margin-right:8px; vertical-align:middle; }

a.arrow { display:inline-block; padding-left:13px; color:#3e2e03; background:url(../img/arrow.png) no-repeat 0 50%; }


/*店舗情報*/
.shop_data { padding-top:14px; }
.shop_data dl { margin-top:5px; line-height:2; }
.shop_data dt { float:left; padding:10px 0; font-weight:bold; }
.shop_data dd { margin-left:100px; padding:10px 0; background:url(../img/dot_line.png) repeat-x 0 100%; }

/*焙煎*/
.roast1  { background:#cda539; }
.roast2  { background:#c97420; }
.roast23 { background:#ac631b; }
.roast3  { background:#9d3f0c; }
.roast34 { background:#7d320a; }
.roast4  { background:#521f03; }
.roast99 { background:#006D2C; }

/* login------------------------*/
#login { display:none; }
#loginForm { line-height:1.7; }
#loginForm h2 { padding:15px 20px; font-size: 1.1em; background:url(../img/ob_line.png) repeat-x 0 100%; }
#loginForm form { padding:15px 20px; }
#loginForm dl { width:300px; margin:0 auto 1em; }
#loginForm input { width:292px; }
#loginForm input[type=checkbox]  { width:auto; }
#loginForm input[type=submit] { padding:8px 5px; background:#DDA31F; border:none; border-radius:8px; cursor:pointer; }

/*form*/
input[type="text"], input[type="email"], input[type="password"], textarea, select {
	margin:3px 0; padding:4px; border:1px solid #CCC; border-radius:2px; box-shadow:1px 1px 2px rgba(200,200,200,0.5) inset; }input:focus, textarea:focus { box-shadow:0 0 4px rgba(202, 176, 81, 0.8); }
input.t { width:15%; }
input.s { width:30%; }
input.m { width:60%; }
input.l { width:100%; box-sizing:border-box; }

.submit { margin:30px 0; text-align:center; }


/* footer------------------------*/

#pagetop { margin:0; position:fixed; bottom:40px; right:20px; z-index:10; }
#pagetop a { height:45px; display:block; }
#pagetop a:hover { margin-bottom:5px; }

footer { padding-top:35px; background:url(../img/bg_footer.png) no-repeat 100% 50px; }
footer a { color:#221814; }

footer .data { float:left; width:132px; padding:0 30px 20px 20px; }

footer .arrow li { margin:14px 0 0; line-height:1; }
footer .arrow li a { padding-left:20px; color:#403000; background:url(../img/f_arrow.png) no-repeat 1px .4em; }

footer .nav { float:right; width:780px; padding-top:38px; }
footer .con1 {
	padding-bottom:14px; background:url(../img/dot_line2.png) repeat-x bottom left;
}
footer .con1 > li { float:left; width:145px; }
footer .con1 > li > a { font-size:15px; font-weight:bold; color:#006d2c; }
footer .con1 > li:not(.shop) { margin-top:-2.5em; }
footer .con1 li.home { margin:0 0 1em; }
footer .con1 li.menu { width:170px; }
footer .con1 .shop { clear:left; }
footer .con1 li li { margin:6px 0; }
footer .con1 li li a { padding-left:16px; background:url(../img/arrow.png) no-repeat 4px .45em }
footer .con1 .shopping { width:320px; }
footer .con1 .shopping ul { width:140px; margin-right:18px; float:left; }

footer .con2 { width:100%; margin:18px 0; }
footer .con2 li { width:auto; float:left; margin-right:20px; }
footer .con2 li a { display:inline-block; padding-left:17px; background:url(../img/f_bean.png) no-repeat 0 .2em }

footer .copy { clear:both; margin-bottom:0; line-height:30px; font-size:12px; color:#FFF; background:#006d2c; }
footer .copy a { color:#FFF; }

/* footer 共通トップページ------------------------*/
footer .con1 > li > a { color:#4e3912; }
#common_top footer .copy { background-color:#4e3912; }

@media screen and (max-width: 600px) {
#common_top footer .copy { background:none; margin:10px auto 0; }
#common_top footer .copy a { color:#4e3912; }
}


@media screen and (max-width: 600px) {
  #common_top header .logo { text-align:left; }
  #common_top header .logo img { max-width:150px; }
  #common_top header .snsLink { top:18px; right:60px; }
  #common_top #gnav li { padding-left:6px; }
}