@charset "utf-8";
@import url("css/reset.css");
@import url("css/responsive.gs.12col.css");

html {
  background-image: none;
}

body {
	background-color: #f6ecdd !important;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro";
	letter-spacing: 0.05em;
	line-height : 2.0;
	color: #51342d;
	font-size: 17px;
}
a {
	color: #51342d;
}
img{
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
  }

/* drawer */ 
.drawer-main {background-color: #352720;}
.drawer-nav-list {text-align: center;}
	.drawer-nav-list li{border-bottom:1px solid #fff;padding: 1em; }
	.drawer-nav-list li a {display: block; color: #fff;font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;}

button.drawer-toggle.drawer-hamburger {
    display: none;
}

@media only screen and (max-width: 1023px) {
	button.drawer-toggle.drawer-hamburger {
	    display: block;
	}
}

/*[end] drawer*/

header {
	height: 115px;
	background-color: #da6507;
}
 

@media only screen and (max-width: 767px) {
   #nav #address{
		display: none !important;
	}
}

   .fixed {
      position: fixed;
      z-index: 1;
      /*background: white;　不要であればいらないです*/
      width: 100%;
    }

#nav {
     float: left;
     font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
}
	#nav img {
		margin-top: 13px;
	}
	#nav ul li {
		margin-top: 43px;
		list-style-type: none;
	}
    #nav li{
        margin-left: 3em;
        float: left;
        vertical-align: middle;
     }
    #nav a{
          text-decoration: none;
          color: #161210;
          font-size: 14px;
          display: block;
          float: left;
     }

#address {
	margin-top: 33px !important;
	float: right;
	text-align: right;
	font-size: 12px;
	font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
	top: 0;
	bottom: 0;
	margin: auto;
}

#hero {
	height: 580px;
	position: relative;
}

#hero-sub {
	height: 420px;
	position: relative;
}

#name {
	margin-top: 67px;
	text-align: right;
}

#headline {
	height: 100px;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 0px;
	background: rgba(53,39,32,.8);
	display: table-cell;
	vertical-align: middle;
}

footer{
	height: 199px;
	width: 100%;
    float: left;
    background: url(images/bottom-bg.jpg) no-repeat;
	background-position: center center; 
	background-size: cover;
	color: #fff;
	position: relative;
}
	 footer ul {
	text-align: center;
	 }
     footer li{
          display: inline;
          margin-right: 25px;
     }
     footer a{
          text-decoration: underline;
          color: #fff;
          font-size: 18px;
     }
     footer small {
     	font-size: 12px;
     }
#foot-color {
	margin-top:55px;
}

/* index */
#intro {
	margin-right: auto;
	margin-left: auto;
	font-size: 17px;
}

#gift {
	background: url(images/gift-bg.jpg) no-repeat center;
	background-position: center center;
	height: 500px;
	float: left;
	position: relative;
	font-size: 14px;
}

#gift-inside {
	position: absolute;
	text-align: center;
	height: 75%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#facebook {
	text-align: center;
}

/* about */
.info table tr td { border: none;}
.info1 td {
	width: 115px;
}

/* menu */
.kome {
	font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro";
}

table.coffee {
	margin-left: 2em; 
}
table.takeout {
	margin-left: 2em;
	width: 175px; 
}
table.tea {
	margin-left: 2em; 
	width: 325px;
}
table.variation {
	margin-left: 2em; 
	width: 285px;
}
table.cake {
	margin-left: 2em; 
	width: 395px;
}
table.toast {
	margin-left: 2em;
	width: 365px; 
}
table.drippack {
	margin-left: 2em;
	width: 200px; 
}
table.giftpack {
	margin-left: 2em;
	width: 200px; 
}

/* beans */
.kodawari {
	margin-top:-10px;
	padding-right:25px;
}
.beans h3 {
	font-weight: bold;
}
.beans img {
	margin-bottom:20px;
}


/* mame,kaji,kame */
.top-text {
	padding-right: 2em;
}

#pankuzu {
	margin-bottom: 5%;
}
#footer{
	margin-bottom: 40px;
	}
	#footer ul{
		text-align: right;
	}
    #footer li{
          display: inline;
          margin-left: 30px;
     }
    #footer a{
          text-decoration: underline;
          font-size: 18px;
          color: #51342d;
    }
    #footer small {
     	font-size: 12px;
		margin-left: 60px;
    }

/* mamezou */
#headline-mame {
	height: 100px;
	width: 100%;
	position: absolute;
	bottom: 0px;
	background: rgba(136,85,77,.8);
	text-align:center;
}

#btm-menu-mame {
	text-align: right;
}

#contact-mame {
	padding-left: 50px;
}

#buttomline-mame {
	background: #5f2620;
	height: 25px;
	text-align: right;
}

/* kaji */
#headline-kaji {
	height: 100px;
	width: 100%;
	position: absolute;
	bottom: 0px;
	background: rgba(101,101,151,.8);
	text-align:center;
}

#btm-menu-kaji {
	text-align: right;
}

#contact-kaji {
	padding-left: 30px;
}

#buttomline-kaji {
	background: #3f3f7d;
	height: 25px;
	text-align: right;
}


.vertical-margin5 h3 {
	font-weight: bold;
	padding-bottom: 15px;
	line-height: 1.6;
}

/* kamenosuke */
#headline-kame {
	height: 100px;
	width: 100%;
	position: absolute;
	bottom: 0px;
	background: rgba(92,78,70,.8);
	text-align:center;
}

#btm-menu-kame {
	text-align: right;
}

#contact-kame {
	padding-left: 50px;
}

#buttomline-kame {
	background: #352720;
	height: 25px;
	text-align: right;
}

.mail {
	font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
	font-size: 24px;
}

.in-center {
	text-align: center;
}
.block-center {
	width: auto;
	margin: 0 auto;
}

.ver-center {
	position: absolute;
	text-align: center;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

.vertical-margin3 {
	margin-bottom: 3%;
}

.vertical-margin5 {
	margin-bottom: 5%;
}

.vertical-margin {
	margin-bottom: 8%;
}

.padding {
	padding: 2em;
}

a:hover {
	filter: alpha(opacity=50);
	-ms-filter:"alpha(opacity=50)";
	opacity: 0.5;
}

/* googe map*/
.google-maps {
	margin-bottom: 11%;
	text-align: center;
}

div#copy-pc{
	display: block;
	text-align: center;
	margin-right: 10px;
}

div#copy-mobile{
	display: none;
}

#foot-inside {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

/* for tablet */
@media only screen and (max-width: 1023px) {
	ul#pc {
		display: none;
	}
	div#address{
		display: none;
	}

	#facebook {
		display: block;
		width: 100%;
	}

	#gift {
		display: block;
		width: 100%;
	}

	/* menu */
	#coffee-menu, #takeout-menu, #manu-img, #tea-menu, #variation-menu, #cake-menu, #toast-menu, #drippack, #giftpack, #gift-img {
		width: 100%;
		padding-left: 3em;
	}

	td.cell1 {	width: 77%; }
	td.cell2 {	width: 23%; }
	td.cell3 {	width: 65%; }
	td.cell4 {	width: 35%; }

	#gift-left { text-align: center; }
	
	#gift-right { margin: 0 auto; }

	table.coffee, table.takeout, table.tea,	table.variation, table.cake, table.toast, table.drippack, table.giftpack {
		margin: 4em;
		margin-top: 2em;
		width: 100%;
	}

	/* beans */

	#kodawari-1 {
		width: 100%;
		margin-bottom: 3%;
	}

	#kodawari-2 {
		margin-left: 3em;
		width: 88%;
	}

 }

/* for mobile */
@media only screen and (max-width: 767px) { 
	#foot-color {
		background-color: #352720; 
	    padding: 0 0;
	    margin-top: 0px;
	} 
	footer {
		background: none; /*!important */
		background-color: #352720;
		height: 0px;
	}
	footer li{
        display: inline;
    }
	div#btm-menu {
		display: block;
		width: 100%;
		padding-top: 40px;
	}

		#btm-menu ul {
			background-color: #352720;
		}
		#btm-menu a {
			padding-top: 40px;
			padding-bottom: 5px;
			display: block;
			position: relative;
			border-bottom: 1px solid #fff;
			padding: 0 10% 2% 10%;
			color: #fff;
			font-weight: bold;
			text-decoration: none;
		}

		#btm-menu a:after {
			display: block;
			position: absolute;
			top: 50%;
			right: 12%;
			width: 9px;
			height: 9px;
			margin-top: -20px;
			border-top: solid 1px #fff;
			border-right: solid 1px #fff;
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			content: "";
		}

	/* kame */
	div#btm-menu-kame {
		display: block;
		width: 100%;
		background-color: #352720;
		color: #fff;
	}
		#btm-menu-kame a {
			display: block;
			position: relative;
			border-bottom: 1px solid #fff;
			padding: 0 10% 2% 10%;
			color: #fff !important;
			font-weight: bold;
			text-decoration: none;
		}

		#btm-menu-kame a:after {
			display: block;
			position: absolute;
			top: 50%;
			right: 12%;
			width: 9px;
			height: 9px;
			margin-top: -10px;
			border-top: solid 1px #fff;
			border-right: solid 1px #fff;
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			content: "";
		}
		#btm-menu-kame small{
			display: none;
		}

	#buttomline-kame {	display: none; }	
	#contact-kame {
		padding-top: 20px;
		text-align: center;
		background-color: #352720;
	}

	div.kame {
	background-color: #352720;
	}

	/* mame */
	div#btm-menu-mame {
		display: block;
		width: 100%;
		background-color: #5f2620;
		color: #fff;
	}
		#btm-menu-mame a {
			display: block;
			position: relative;
			border-bottom: 1px solid #fff;
			padding: 0 10% 2% 10%;
			color: #fff;
			font-weight: bold;
			text-decoration: none;
		}

		#btm-menu-mame a:after {
			display: block;
			position: absolute;
			top: 50%;
			right: 12%;
			width: 9px;
			height: 9px;
			margin-top: -10px;
			border-top: solid 1px #fff;
			border-right: solid 1px #fff;
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			content: "";
		}
		#btm-menu-mame small{
			display: none;
		}

	#buttomline-mame {
		display: none;
	}
	#contact-mame {
		padding-top: 20px;
		text-align: center;
		background-color: #5f2620;
	}

	div.mame {
		background-color: #5f2620;
	}		

	/* kaji */
	div#btm-menu-kaji {
		display: block;
		width: 100%;
		background-color: #3f3f7d;
		color: #fff;
	}
		#btm-menu-kaji a {
			display: block;
			position: relative;
			border-bottom: 1px solid #fff;
			padding: 0 10% 2% 10%;
			color: #fff; 
			font-weight: bold;
			text-decoration: none;
		}

		#btm-menu-kaji a:after {
			display: block;
			position: absolute;
			top: 50%;
			right: 12%;
			width: 9px;
			height: 9px;
			margin-top: -10px;
			border-top: solid 1px #fff;
			border-right: solid 1px #fff;
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			content: "";
		}
		#btm-menu-kaji small{
			display: none;
		}

	#buttomline-kaji {
		display: none;
	}
	#contact-kaji {
		padding-top: 20px;
		text-align: center;
		background-color: #3f3f7d;
	}
	
	div.kaji {
		background-color: #3f3f7d;
	}	

	div#coffee-menu, div#takeout-menu, div#tea-menu, div#variation-menu, div#cake-menu, div#toast-menu, div#drippack, div#giftpack {
		padding-left: 3em;
	}

	div.info-mobile {
		padding-left: 2em;
	}
	div.mobile-padding {
		padding-left: 3em; 
		padding-right: 3em;
	}

	table.coffee, table.takeout, table.tea, table.variation, table.cake, table.toast, table.drippack, table.giftpack {
		margin: 0 auto;
	}

	div.contact {
		text-align: center;
		margin-top: 8px;
	}	
	div#copy-pc{
		display: none;
	}
	div#copy-mobile{
		display: block;
		text-align: center;
		margin-top: 48px;
		margin-bottom: 60px;
		color: #fff;
	}

	.top-text {
	padding-right: 0em;
	}
	
	#pankuzu {
		padding-left: 3em;
	}

	small {
		font-size: 12px;
	}
}


@media (max-width: 960px) {
.google-maps {
	position: relative;
	padding-bottom: 38%; 
	height: 0;
	overflow: hidden;
	}
	.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	}
}