@charset "utf-8";

@import "reset.css";

/*-- common --*/
/* anchor */
	a {
		color: #666;
		text-decoration: none;
	}
	a:hover {
		color: #666;
		text-decoration: underline;
	}
	.on a {
		cursor: default;
		pointer-events: none;
	}
	.bt a:hover,
	.bt.on a {
		opacity: 0.7;
		filter: alpha(opacity=70);
		-ms-filter: "alpha(opacity=70)";
	}

/* fList */
	.fList li { float: left;}
	.fList li img { vertical-align: top;}

/* parts */
	.ar { text-align: right;}
	.ac { text-align: center;}
	.mb05 { margin-bottom: 5px;}
	.mb10 { margin-bottom: 10px;}
	.mb15 { margin-bottom: 15px;}
	.mb20 { margin-bottom: 20px;}
	.mb25 { margin-bottom: 25px;}
	.mb30 { margin-bottom: 30px;}
	.f14 { font-size: 14px;}
	.f18 { font-size: 18px;}
	.fl { float: left;}
	.fr { float: right;}

	.indent {
		padding-left: 1em;
		text-indent: -1em;
	}

	.divide .fl,
	.divide .fr { width: 48.245%;}
@media screen and (max-width: 600px) {
	.divide .fl,
	.divide .fr {
		float: none;
		width: 100%;
	}
	.divide .fl { margin-bottom: 25px;}
}

	.pc { display: block;}
	.sp { display: none;}
@media screen and (max-width: 600px) {
	.pc { display: none;}
	.sp { display: block;}
}

/* wrap */
	.wrap {
		clear: both;
		position: relative;
		margin-left: auto;
		margin-right: auto;
	}
	.base .wrap { width: 870px;}
@media screen and (max-width: 890px) {
	.base .wrap {
		width: auto;
		padding-left: 10px;
		padding-right: 10px;
	}
}


/*-- layout --*/
	body {
		color: #666;
		font-size: 12px;
		line-height: 1.5;
		font-family: 'Hiragino Mincho ProN', serif;
		background: #eee;
	}
	#wrap {
		padding-bottom: 40px;
		background: #fff;
	}

/* header */
	#header { padding: 24px 0 23px;}
	#header h1 { text-align: center;}
	#header h1 a {
		display: inline-block;
		padding: 5px 10px;
	}
	#header ul {
		position: absolute;
		top: 0;
		right: 0;
	}
	#header .fList li { float: none;}
	#header li.btFb { margin-bottom: 5px;}
	#header li.btTw { padding-left: 13px;}
	#header li.btTw iframe { width: 90px !important;}
@media screen and (max-width: 890px) {
	#header { padding-bottom: 3px;}
	#header ul {
		top: auto;
		bottom: 0;
		right: 20px;
	}
	#header li { float: left;}
}
@media screen and (max-width: 600px) {
	#header .wrap { padding-bottom: 55px;}
	#header li.btTw { padding-left: 10px;}
}

	/* navi */
	#nav {
		padding-bottom: 25px;
		background: #fff;
	}
	#nav li { width: 16.667%;}
	#nav li.first,
	#nav li.last { width: 16.666%;}
	#nav li a {
		display: block;
		width: 100%;
		padding-bottom: 11px;
		text-align: center; 
		background-color: #fff;
		background-position: 50% 100%;
		background-repeat: no-repeat;
	}
	#nav li a:hover { background-image: url(../imgs/nav-a_ov.gif);}
	#nav li.on a { background-image: url(../imgs/nav-a_on.gif);}
@media screen and (max-width: 890px) {
	#nav li,
	#nav li.first,
	#nav li.last { width: 33.333%;}
	#nav li a { padding-top: 20px;}
}
@media screen and (max-width: 600px) {
	#nav li,
	#nav li.first,
	#nav li.last { width: 50%;}
}

/* main */
	#main {
		width: 940px;
		margin: 0 auto 35px;
		color: #fff;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	#main .inner { padding: 30px 0 25px;}
	#main h2 {
		margin-bottom: 58px;
		font-size: 20px;
		font-weight: bold;
		letter-spacing: 1px;
		text-shadow: 0 0 5px #000;
	}
	#main .logo .first { margin-right: 35px;}
@media screen and (max-width: 940px) {
	#main {
		width: 100%;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
	}
}
@media screen and (max-width: 600px) {
	#main h2 { margin-bottom: 30px;}
	#main .logo .first { margin: 0 0 20px 0;}
}

/* container */
	#container {
		clear: both;
		text-align: left;
	}
	/* section */
	.section { clear: both;}

/* column */
	.column .side {
		float: left;
		width: 31.034%;
	}
	.column .content {
		float: right;
		width: 65.517%;
	}
@media screen and (max-width: 600px) {
	.column .side,
	.column .content {
		float: none;
		width: 100%;
	}
}
	.side .section { margin-top: 40px;}
	.side .section .inner {
		font-size: 10px;
		margin-top: 30px;
	}
	.side .section:first-child { margin-top: 0;}
	.side .section .inner.first { margin-top: 0;}
	.side h4 {
		margin-bottom: 15px;
		line-height: 1;
	}
	.side .info li { padding: 2px 0;}
	.side .info span { display: block;}
@media screen and (max-width: 600px) {
	.side { margin-top: 40px;}
	.side .section .inner { font-size: 12px;}
	.side h4 { font-size: 14px;}
}

	.content .section { margin-top: 80px;}
	.content .section.first { margin-top: 0;}
	.content .section .inner { clear: both;}
	.content h3 {
		margin-bottom: 20px;
		font-size: 20px;
		line-height: 1;
		text-align: center;
	}

@media screen and (max-width: 600px) {
	.content h3 { line-height: 1.3;}
}
	.content .lead {
		margin-bottom: 50px;
		line-height: 1.8;
		text-align: center;
	}
@media screen and (max-width: 600px) {
	.content .lead { margin-bottom: 30px;}
}
	.content .photo li { width: 48.245%;}
	.content .photo img {
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	.content .photo li.p02,
	.content .photo li.p04 { margin-left: 3.51%;}
	.content .photo li.p01,
	.content .photo li.p02 { margin-bottom: 20px;}
@media screen and (max-width: 600px) {
	.content .photo li {
		float: none;
		width: 100%;
	}
	.content .photo li.p02,
	.content .photo li.p04 { margin-left: 0;}
	.content .photo li.p01,
	.content .photo li.p02,
	.content .photo li.p03 { margin-bottom: 10px;}
}


	.side .bt img { width: 88%;}
@media screen and (max-width: 600px) {
	.side .bt { text-align: center;}
}

/* bnr */
	.bnr {
		clear: both;
		margin-top: 60px;
	}
	.bnr li {
		float: left;
		width: 48.245%;
	}
	.bnr li.bnr02,
	.bnr li.bnr04 { float: right;}
	.bnr li.bnr01,
	.bnr li.bnr02 { margin-bottom: 20px;}
	.bnr li a:hover,
	.bnr li.on a {
		opacity: 0.7;
		filter: alpha(opacity=70);
		-ms-filter: "alpha(opacity=70)";
	}
@media screen and (max-width: 600px) {
	.bnr { margin-top: 40px;}
	.bnr li {
		float: none !important;
		width: 88%;
		margin: 0 auto;
	}
	.bnr li.bnr01,
	.bnr li.bnr02,
	.bnr li.bnr03 { margin-bottom: 10px;}
}

/* footer */
	#footer {
		clear: both;
		padding: 30px 0 20px;
		background: #eee;
	}
	.fNav {
		margin-bottom: 25px;
		line-height: 1;
	}
	.fNav li {
		margin-left: 15px;
		padding-left: 15px;
		border-left: 1px #666 solid;
	}
	.fNav li.first {
		margin-left: 0;
		padding-left: 0;
		border-left: none;
	}
	.fNav a { line-height: 1;}
	.fNav a:hover {
		color: #999;
		text-decoration: none;
	}
	.fNav li.on a { color: #ce002e;}
	.contact .fList li {
		margin-right: 60px;
		font-size: 10px;
	}
	.copyright {
		font-size: 10px;
		text-align: right;
	}
@media screen and (max-width: 600px) {
	.fNav .fList {
		padding-bottom: 25px;
		border-bottom: 1px #aeaeae dashed;
	}
	.fNav .fList li {
		float: none;
		margin-left: 0;
		padding: 4px 0;
		border-left: none;
	}
	.fNav a { font-size: 14px;}
	.contact .fList li {
		float: none;
		margin: 0 0 20px 0;
		font-size: 12px;
	}
}

/*-- each --*/
/* top */
	#top #main { background-image: url(../imgs/top/main.jpg);}
	#top #main .inner { padding: 35px 0 32px;}
	#top #main h2 { margin-bottom: 45px;}
@media screen and (max-width: 600px) {
	#top .content h3 span { display: block;}
}

/* kitasando */
	#kitasando #main {
		background-image: url(../kitasando/imgs/main.jpg);
		background-position: 65% 50%;
	}

/* drink */
	#drink #main { background-image: url(../drink/imgs/main.jpg);}
	#drink .content .inner { line-height: 1.8;}
	#drink .content .inner h4 {
		margin-bottom: 20px;
		line-height: 1.5;
	}
	#drink .content .box { padding-left: 1em;}
@media screen and (max-width: 600px) {
	#drink .content .inner { line-height: 2;}
}

/* food */
	#food #main { background-image: url(../food/imgs/main.jpg);}
	#food .content .inner { line-height: 1.8;}
	#food .content .inner h4 {
		margin-bottom: 20px;
		line-height: 1.5;
	}
	#food .content .box { padding-left: 1em;}
@media screen and (max-width: 600px) {
	#food .content .inner { line-height: 2;}
}

/* atelier */
	#atelier #main {
		background-image: url(../atelier/imgs/main.jpg);
		background-position: 40% 50%;
	}

/* contact */
	#contact #main { background-image: url(../contact/imgs/main.jpg);}

/* beer */
	#beer #main { background-image: url(../beer/imgs/main.jpg);}
	#beer .beerList .divide { margin-bottom: 60px;}
	#beer .beerList h4 {
		margin-bottom: 10px;
		font-size: 20px;
		line-height: 1;
	}
	#beer .beerList h5 {
		font-size: 14px;
		line-height: 1;
	}
	#beer .beerList .section { margin-top: 20px;}
	#beer .beerList .photo {
		float: left;
		width: 36.36%;
	}
	#beer .beerList .photo img { width: 100%;}
	#beer .beerList .txt {
		float: right;
		width: 60%;
	}
	#beer .beerList .price { margin-top: 10px;}
@media screen and (max-width: 940px) {
	#beer .beerList .photo,
	#beer .beerList .txt {
		float: none;
		width: 100%;
	}
	#beer .beerList .photo { text-align: center;}
	#beer .beerList .photo img { width: auto;}
	#beer .beerList .txt { margin-top: 20px;}
	#beer .beerList .price { text-align: right;}
}
@media screen and (max-width: 600px) {
	#beer .beerList .divide .fl { margin-bottom: 60px;}
}