@charset "utf-8";

/* --------------------------------------------------------------
CSS Information

File name:		pages_layout.css
Style Info:		各カテゴリや各ページで使用する固有のスタイルを設定

Index:
	__1. 共通
		__1_1. 見出し
		__1_2. 表組み
	__2. ホーム
	__3. ブランドのご紹介
		__3_1. 大枠
		__3_2. デフォルト
		__3_3. ロゴエリア
		__3_4. 詳細情報表示エリア
		__3_5. 詳細情報のみのhtmlに適用
		__3_6. 詳細情報
	__4. 店舗情報一覧
		__4_1. タブ
		__4_2. 店舗情報
	__5. 会社のご紹介
	__6. リクルート情報
	__7. フランチャイズ募集
-------------------------------------------------------------- */

/*=====================================================
	__1. 共通
=====================================================*/
/*	__1_1. 見出し
----------------------------------------------- */
#contentsInner h1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 910px;
	padding: 15px 0 14px 18px;
	background: url(../img/common/bg_title.png) no-repeat left top;
}
#contentsInner h2 {
	margin: 30px 0 20px;
	padding: 10px 0 10px 18px;
	background: url(../img/common/bg_headline.png) repeat-x left top;
}
#contentsInner h3 {
	margin: 30px 0 20px;
	padding: 5px 0 5px 18px;
	background: url(../img/common/bg_crosshead.png) repeat-x left top;
	border-left: 6px solid #0095d9;
}
/*	__1_2. 表組み
----------------------------------------------- */
#contentsInner table {
	border-bottom: 1px solid #6f706e;
}
#contentsInner table th,
#contentsInner table td {
	padding: 5px 20px;
	border-top: 1px solid #6f706e;
	vertical-align: top;
}
#contentsInner table th {
	background-color: #efeded;
}
/*	__1_3. プラグイン
----------------------------------------------- */
#contentsInner dl.getPlugin {
	width: 640px;
	margin: 40px auto;
	line-height: 1.4;
	/zoom : 1;
}
#contentsInner dl.getPlugin:after { content: ''; display: block; clear: both; height: 0;}
#contentsInner dl.getPlugin dt {
	float: right;
	width: 460px;
}
/*	__1_4. マウスオーバー
------------------------------------------------*/
.alpha a:hover img {
	opacity: 0.65;
	filter: alpha(opacity=65); /* IE6用  */
}

/*=====================================================
	__2. ホーム
=====================================================*/
#home {
	height: 100%;
}
#home a:link,
#home a:visited {
	color: #fff;
	text-decoration: underline;
}
#home a:hover,
#home a:active {
	color: #fff;
	text-decoration: none;
}
#home a.externalLink {
	padding-left: 20px;
	background: url(../img/home/icon_external_link.png) no-repeat left center;
}
#home #contents {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color:#000;
	color: #fff;
	line-height: 1.4;
}
#home #contentsInner01 {
	position: relative;
	width: 100%;
	background-color: #FFF;
}
#home #contentsInner01 #logo {
	position: absolute;
	top: 0;
	left: 0;
}
#home #contentsInner01 #globalNav {
	width: 650px;
	margin-left: 237px;
}
#home #contentsInner01 #globalNav li {
	display: inline;
}
#home #contentsInner02 {
	position: relative;
	width: 1100px;
	min-height: 105px;
	margin: 20px 0 0 40px;
}
#home #contentsInner02 h2 {
	position: absolute;
	top: 5px;
	left: 0;
}
#home #contentsInner02 ul {
	width: 560px;
	margin-top: -5px;
	margin-bottom: 20px;
}
#home #contentsInner02 ul li {
	margin-top: 5px;
}
#home #contentsInner02 ul li dl {
	padding-left: 100px;
	/zoom : 1;
}
#home #contentsInner02 ul li dl:after { content: ''; display: block; clear: both; height: 0;}
#home #contentsInner02 ul li dl dt {
	clear: both;
	float: left;
	width: 130px;
}
#home #contentsInner02 ul li dl dd {
	margin-left: 130px;
}
#home #contentsInner02 .badge {
	position: absolute;
	top: 0;
	right: 460px;
}
#home #contentsInner02 .bnr {
	position: absolute;
	top: 0;
	right: 0;
}
#home img.bgimage {
	display: none;
}
#home img.loader {
	position: absolute;
	left: 50%;
	top: 40%;
	margin: -12px 0 0 -12px;
}
#home #slideshow div {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8;
	width: 400px;
	background: #000;
	color: #fff
}
#home #slideshow div .logo {
	margin-left: 15px;
}
#home #slideshow div .detail {
	position: absolute;
	top: 15px;
	right: 20px;
}
#home #slideshow div .name {
	padding: 5px 5px 5px 15px;
	background-color: #323232;
}
#home #slideshow .active {
	display:block;
	z-index:10;
}
#home #slideshow .last-active {
	z-index:9;
}

/*=====================================================
	__3. ブランドのご紹介
=====================================================*/
/*	__3_1. 大枠
----------------------------------------------- */
#brand div#contents div#wrap {
	position: relative;
	/zoom: 1;
}
/*	__3_2. デフォルト
----------------------------------------------- */
#brand div#contents div#wrap div#default {
	float: right;
	width: 450px;
	padding: 15px 10px 15px 0;
	background-color: #fff;
}
#brand div#contents div#wrap div#default p {
	padding-left: 25px;
	background: url(../brand/img/common/img_arrow_left.png) no-repeat left center;
}
/*	__3_3. ロゴエリア
----------------------------------------------- */
#brand div#contents div#wrap div#sub {
	position:relative;
	width: 430px;
	background-color: #5b5b5b;
	border-top-left-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-topleft: 10px;	border-bottom-left-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
	-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
	-moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
}
#brand div#contents div#wrap div#sub ul {
	position:relative;
	overflow: hidden;
	width: 430px;
	margin: 0 -7px 0 7px;
	padding-bottom: 7px;
	/zoom: 1;
}
#brand div#contents div#wrap div#sub ul li {
	position: relative;
	float: left;
	width: 134px;
	margin: 7px 7px 0 0;
}
#brand div#contents div#wrap div#sub ul li a,
#brand div#contents div#wrap div#sub ul li span.close {
	display: block;
	width: 118px;
	padding: 75px 5px 5px 5px;
	background-color: #8b8b8b;
	border: 3px solid #5b5b5b;
	color: #FFF;
	font-size: 84%;
	text-decoration: none;
}
#brand div#contents div#wrap div#sub ul li.large {
	width: 206px;
	margin-right: 5px;
}
#brand div#contents div#wrap div#sub ul li.large a {
	width: 190px;
	padding-top: 105px;
}
#brand div#contents div#wrap div#sub ul li a:hover,
#brand div#contents div#wrap div#sub ul li.active a {
	border-color: #ffdc00;
}
#brand div#contents div#wrap div#sub ul li a img,
#brand div#contents div#wrap div#sub ul li span.close img {
	position: absolute;
	top: 3px;
	left: 3px;
	background-color: #fff;
}
#brand div#contents div#wrap div#sub ul li a span {
	font-weight: bold;
}
/*	__3_4. 詳細情報表示エリア
----------------------------------------------- */
#brand div#wrap div#panelFrame {
	position: absolute;
	top: 0;
	left: 0;
	width: 450px;
	padding: 15px 10px 15px 0;
	background-color: #fff;
	display: none;
}
#brand div#wrap div#panelFrame div#loader {
	text-align: center;
}
#brand div#wrap div#panelFrame p#panelClose {
	position: absolute;
	top: 15px;
	right: 15px;
}
#brand div#wrap div#panelFrame p#panelClose a {
	padding-right: 20px;
	background: url(../brand/img/common/bg_close.png) no-repeat right center;
}
#brand div#wrap div#panelFrame p#panelClose a:hover {
	background-image: url(../brand/img/common/bg_close_on.png);
}
#brand div#panelInner .section {
	position: relative;
	min-height: 180px;
	height: auto !important;
	height: 180px;
	padding: 0 0 30px 220px;
}
#brand div#panelInner .section h2 {
	margin-bottom: 0;
	padding: 0;
	background: none;
	color: #5f0401;
	font-size: 123%;
	font-weight: bold;
}
#brand div#panelInner .section p {
	position: absolute;
	top: 0;
	left: 0;
	border: 2px solid #cbcbcb;
}
#brand div#panelInner .section ul.btns {
	margin-top: 15px;
}
#brand div#panelInner .section ul.btns li {
	margin-top: 10px;
}
#brand div#panelInner ul.pic li {
	margin-top: 15px;
}
#brand div#panelInner ul.pic li img {
	padding: 4px;
	border: 1px solid #cbcbcb;
}
/*	__3_5.ajaxで読み込まれるhtmlのみに適用
----------------------------------------------- */
.brandInfo div#container {
	position: relative;
	width: 450px;
	margin: 0 auto;
	padding: 15px 20px 30px;
	background-color: #fff;
}
.brandInfo div#container h1 {
	position: relative;
	width: 432px;
	margin: 10px 0 20px;
	padding: 15px 0 14px 18px;
	background: url(../img/common/bg_title.png) no-repeat left top;
}
/*	__3_6. 詳細情報（森のビアガーデン）
----------------------------------------------- */
#brandDetail #contentsInner h2 {
	margin-top: 0;
}
#brandDetail #contentsInner strong {
	color: #0095d9;
	font-size: 108%;
	font-weight: bold;
}
#brandDetail #contentsInner em {
	font-size: 108%;
	font-weight: bold;
}
#brandDetail #contentsInner .lead {
	margin-top: 20px;
}
#brandDetail #contentsInner .section {
	width: 580px;
	margin: 30px auto;
	padding: 20px 10px 10px 10px;
	background-color: #9c0200;
	color: #fff;
}
#brandDetail #contentsInner .section h3 {
	margin: 20px 0 0 0;
	padding: 0;
	background: none;
	border: 0;
	font-size: 123%;
	font-weight: bold;
	text-align: center;
}
#brandDetail #contentsInner .section .btnReserve {
	margin: 10px 0 20px;
}
#brandDetail #contentsInner .section .tel {
	margin: 10px 0;
}
#brandDetail #contentsInner .section .note {
	width: 400px;
	margin: 10px auto;
	padding: 10px;
	background-color: #fff;
	color: #000;
}
#brandDetail #contentsInner .section .note span {
	font-size: 1.3em;
	font-weight: bold;
}
#brandDetail #contentsInner .section p,
#brandDetail #contentsInner .section ul {text-align: center;}
#brandDetail #contentsInner .section ul li.firstChild { margin-top: 1em;}
#brandDetail #contentsInner .section strong {
	color: #ffff00;
}
#brandDetail #contentsInner .section02 {
	width: 580px;
	margin: 30px auto 0;
	padding: 10px;
	background-color: #e26532;
	color: #fff;
}
#brandDetail #contentsInner .section02 h3 {
	margin: 0 0 10px 0;
	padding: 0;
	background: none;
	border: 0;
	color: #ffff00;
	font-size: 123%;
	font-weight: bold;
	text-align: center;
}
#brandDetail #contentsInner .section02 p {
	margin-top: 1em;
	text-align: center;
}
#brandDetail #contentsInner .section02 dl {
	text-align: center;
}
#brandDetail #contentsInner .section02 dl dt {
	margin-top: 1em;
	font-weight: bold;
}
#brandDetail #contentsInner .section02 p span {
	color: #ffff00;
	font-size: 107.7%;
	font-weight: bold;
}
#brandDetail #contentsInner p.tabehodai {
	margin-bottom: 20px;
	text-align: center;
}
#brandDetail #contentsInner ul.note {
	margin-top: 20px;
}
#brandDetail #contentsInner ul.pic {
	margin-top: 20px;
	text-align: center;
}
#brandDetail #contentsInner ul.pic li {
	display: inline;
	margin: 0 30px;
}
#brandDetail #contentsInner div.menuBox {
	margin: 30px 0 0 25px;
}
#brandDetail #contentsInner div.menuBox:after { content: ''; display: block; clear: both; height: 0;}
#brandDetail #contentsInner div.menuBox div.menuBoxInner {
	float: left;
	padding: 15px;
	border: 1px solid #cbcbcb;
}
#brandDetail #contentsInner div.menuBox div.menu01 { width: 240px; margin-right: 26px;}
#brandDetail #contentsInner div.menuBox div.menu02 { width: 505px;}
#brandDetail #contentsInner div.menuBox div.menuBoxInner h4 {
	margin-bottom: 15px;
}
#brandDetail #contentsInner div.menuBox div div {
	float: left;
}
#brandDetail #contentsInner div.menuBox div div p.btnPdf {
	margin-top: 15px;
	text-align: center;
}
#brandDetail #contentsInner div.menuBox dl {
	clear: both;
	padding-top: 20px;
	text-align: center;
}
#brandDetail #contentsInner div.menuBox dl dt {
	margin-bottom: 15px;
}
#brandDetail #contentsInner table {
	margin: 10px 0 20px;
}

/*=====================================================
	__4. 店舗情報一覧
=====================================================*/
/*	__4_1. タブ
----------------------------------------------- */
#shop #contentsInner ul.tabNav {
	padding: 0 41px 0 42px;
	border-bottom: 1px solid #c0c0c0;
	/zoom : 1;
}
#shop #contentsInner ul.tabNav:after { content: ''; display: block; clear: both; height: 0;}
#shop #contentsInner ul.tabNav li {
	float: left;
	margin-bottom: -2px;
	text-indent: -9999px;
}
#shop #contentsInner ul.tabNav li a {
	outline: none;
	display: block;
	width: 199px;
	height: 37px;
	background-image: url(../shop/img/bg_tabnav.png);
	background-repeat: no-repeat;
}
#shop #contentsInner ul.tabNav li.tab1 a { background-position: 0 0;}
#shop #contentsInner ul.tabNav li.tab2 a { background-position: -199px 0;}
#shop #contentsInner ul.tabNav li.tab3 a { background-position: -398px 0;}
#shop #contentsInner ul.tabNav li.tab4 a { width: 200px; background-position: -597px 0;}

#shop #contentsInner ul.tabNav li.tab1 a:hover { background-position: 0 -37px;}
#shop #contentsInner ul.tabNav li.tab2 a:hover { background-position: -199px -37px;}
#shop #contentsInner ul.tabNav li.tab3 a:hover { background-position: -398px -37px;}
#shop #contentsInner ul.tabNav li.tab4 a:hover { background-position: -597px -37px;}

#shop #contentsInner ul.tabNav li.tab1 a:active,
#shop #contentsInner ul.tabNav li.tab1 a.active { background-position: 0 -74px;}
#shop #contentsInner ul.tabNav li.tab2 a:active,
#shop #contentsInner ul.tabNav li.tab2 a.active { background-position: -199px -74px;}
#shop #contentsInner ul.tabNav li.tab3 a:active,
#shop #contentsInner ul.tabNav li.tab3 a.active { background-position: -398px -74px;}
#shop #contentsInner ul.tabNav li.tab4 a:active,
#shop #contentsInner ul.tabNav li.tab4 a.active { background-position: -597px -74px;}
/*	__4_2. 店舗情報
----------------------------------------------- */
#shop #contentsInner .section div.senctionInner {
	position: relative;
	width: 400px;
	min-height: 50px;
	height: auto !important;
	height: 50px;
	margin: 0 auto;
	padding: 15px 160px 15px 120px;
	border-bottom: 1px dotted #c0c0c0;
}
#shop #contentsInner .section div.senctionInner.odd {
	background-color: #f9fcfd;
}
#shop #contentsInner .section div.senctionInner.boxOverOn {
	background-color: #eef8fd;
}
#shop #contentsInner .section div.senctionInner .shopName {
	margin: 0;
	padding-left: 15px;
	background: url(../shop/img/bg_crosshead.png) no-repeat left center;
	border: none;
	font-weight: bold;
}
#shop #contentsInner .section div.senctionInner .shopName span {
	color: #9fa0a0;
	font-size: 84%;
	font-weight: normal;
}
#shop #contentsInner .section div.senctionInner p.logo {
	position: absolute;
	top: 15px;
	left: 10px;
}
#shop #contentsInner .section div.senctionInner p.logo img {
	background-color: #fff;
	border: 1px solid #c0c0c0;
}
#shop #contentsInner .section div.senctionInner p.btnDetail {
	position: absolute;
	top: 25px;
	right: 10px;
}

/*=====================================================
	__5. 会社のご紹介
=====================================================*/
#company #contentsInner .section {
	width: 420px;
}
#company #contentsInner .section table {
	margin-bottom: 30px;
}
#company #contentsInner .section table th {
	width: 5.5em;
}
#company #contentsInner ul {
	position: absolute;
	top: 75px;
	right: 15px;
}
#company #contentsInner ul li {
	margin-bottom: 10px;
}
#company #contentsInner ul li img {
	padding: 4px;
	border: 1px solid #cbcbcb;
}

/*=====================================================
	__6. リクルート情報
=====================================================*/
#recruit #contentsInner ul.anchorBtn {
	text-align: center;
}
#recruit #contentsInner ul.anchorBtn li {
	display: inline;
	margin-right: 30px;
}
#recruit #contentsInner p.lead {
	margin-top: 15px;
	font-weight: bold;
}
#recruit #contentsInner ol {
	position: relative;
	width: 611px;
	padding-bottom: 36px;
	margin: 0 auto;
}
#recruit #contentsInner ol li {
	display: inline;
}
#recruit #contentsInner ol li span {
	position: absolute;
	bottom: 0;
}
#recruit #contentsInner ol li.entry01 span { left: 0;}
#recruit #contentsInner ol li.entry03 span { left: 260px;}
#recruit #contentsInner table {
	width: 625px;
	margin: 30px auto 0;
}
#recruit #contentsInner table th {
	width: 4.5em;
}

/*=====================================================
	__7. フランチャイズ募集
=====================================================*/
#fc #contentsInner .logoList {
	margin-top: 20px;
	text-align: center;
	letter-spacing: -.4em;
}
#fc #contentsInner .logoList li {
	display: inline;
	margin: 0 30px;
	letter-spacing: normal;
}
#fc #contentsInner .pic {
	margin-bottom: 15px;
}
#fc #contentsInner .btnSite {
	margin-top: 20px;
	text-align: center;
}
#fc #contentsInner .contact {
	margin-top: 50px;
	padding-top: 180px;
	background: url(../fc/img/bg_mail.png) no-repeat top center;
	text-align: center;
}
#fc #contentsInner .contact .note {
	width: 500px;
	margin: 15px auto;
	padding: 20px;
	background-color: #FFEAEA;
	text-align: left;
}
#fc #contentsInner .contact .note p {
	margin-top: 0;
	font-weight: bold;
	color: #900910;
	text-align: left;
}
#fc #contentsInner .contact .mailToNote {
	width: 450px;
	margin: 30px auto 0;
}
#fc #contentsInner .contact .mailToNote p {
	margin-top: 10px;
}
#fc #contentsInner .contact h4 {
	margin-bottom: -20px;
	color: #0095d9;
	font-size: 146%;
	font-weight: bold;
	text-align: center;
}
#fc #contentsInner .contact p {
	margin-top: 30px;
	text-align: center;
}
#fc #contentsInner .contact .tel {
	color: #0095d9;
	font-size: 123%;
	font-weight: bold;
}