@charset "utf-8";
/* CSS Document */

/* ==============================

・ベース追加設定
・共通クラス設定
・ヘッダー/フッター
・その他特定箇所id

============================== */

/* ===== ベース追加設定 ===== */

body{
	width:100%;
	margin:0px;
	padding:0px;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
  font-size:18px;
	line-height:30px;
  color:#000;
  background:#FFF;
}



/* ===== 共通クラス設定 ===== */

/*
　ヘッダー部のみ、#headerと#mainで設定
　その他コンテンツは、.containerと.contentsで設定
*/


.container{
	clear:both;
	width:100%;
	background:url(../cafebar/images/cts_bg.jpg) #FFF top repeat-x;
	text-align:left;
}

.container .contents{
	clear:both;
	width:950px;
	padding-top:25px;
	margin-right:auto;
	margin-left:auto;
	background:url(../cafebar/images/cts_bg.jpg) #FFF top repeat-x;
}

.container .contents .box{
	border-bottom:1px solid #382112;
	border-right:1px solid #382112;
	border-left:1px solid #382112;
}

.container .contents .brown{
	padding-top:10px;
	background:url(../cafebar/images/cts_bg_brown.gif) #FFF repeat-x;
}
.container .contents .red{
	padding-top:10px;
	background:url(../cafebar/images/cts_bg_red.gif) #FFF repeat-x;
}


/* お問い合わせ */
.contact{
	clear:both;
	position:relative;
	width:960px;
	height:110px;
	margin-right:auto;
	margin-left:auto;
	background:url(../cafebar/images/contact_bg.gif) left top no-repeat;
}
.contact p{
	position:absolute;
	width:270px;
	height:45px;
	top:53px;
	right:32px;
}
.pageup{
	width:960px;
	margin:20px auto 40px;
	text-align:right;
}


.txtyellow{
	color:#f9c72a;
	font-size:24px;
	line-height:36px;
}


/* 余白 */
.mb10{ margin-bottom:10px;}
.mb15{ margin-bottom:15px;}
.mb20{ margin-bottom:20px;}
.mb30{ margin-bottom:30px;}
.mb50{ margin-bottom:50px;}

.ml10{ margin-left:10px;}
.ml20{ margin-left:20px;}
.mr10{ margin-right:10px;}
.mr20{ margin-right:20px;}

.mt10{ margin-top:10px;}
.mt20{ margin-top:20px;}
.mt25{ margin-top:25px;}
.mt30{ margin-top:30px;}

.pt10{ padding-top:10px;}
.pl40{ padding-left:40px;}
.pr40{ padding-right:40px;}


/* レイアウト */
.fleft{ float:left;}
.fright{ float:right;}
.txtright{ text-align:right;}
.txtcenter{ text-align:center;}

.clear{ clear:both;}
.clearnone{ display:none; clear:both;}

.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

.clearfix { display: inline-table; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */


.w420{ width:420px;}
.w600{ width:600px;}



/* ===== ヘッダー/フッター ===== */

#header{
	width:100%;
	background:url(../cafebar/images/h_bg.jpg) #FFF top repeat-x;
	text-align:center;
}

#header #main{
	position:relative;
	width:960px;
	height:595px;
	margin-right:auto;
	margin-left:auto;
	background:url(../cafebar/images/h_mainbg.jpg) left top no-repeat;
}

#header #main h1{
	position:absolute;
	width:175px;
	height:28px;
	top:20px;
	left:10px;
}
#header #main h2{
	position:absolute;
	width:460px;
	height:210px;
	top:80px;
	left:10px;
}
#header #main ul{
	position:absolute;
	width:393px;
	height:35px;
	top:10px;
	right:1px;
}
	#header #main ul li{
		float:left;
		margin-right:4px;
	}
#header #main p{
	position:absolute;
	width:960px;
	height:268px;
	bottom:0px;
	left:0px;
}

#footer {
	margin:0px;
	padding:0px;
	color:#FFF;
	background:#000;
	border-bottom:8px solid #FD0;
	font-size:12px;
}
	#footer .contents{
		clear:both;
		position:relative;
		width:940px;
		margin:0px auto -8px;
		padding:18px 10px 15px;
		background:#000;
		border-bottom:8px solid #FD0;
	}
	#footer .contents 
	#footer .contents a,#footer .contents a:visited{
		color:#FFF;
	}
	#footer .contents a:hover{
		color:#CCC;
		text-decoration:none;
	}



/* ===== その他特定箇所id ===== */

#point{
	background:url(../cafebar/images/point_bg.jpg) right top no-repeat;
}
	#point .box{ font-size:20px;}

#loss{
	width:840px;
	height:140px;
	margin-right:auto;
	margin-left:auto;
	padding-top:10px;
	background:url(../cafebar/images/point02_loss.gif) left top no-repeat;
}
	#loss dt{
		display:none;
	}
	#loss dd{
		margin-left:300px;
		font-size:18px;
	}
	#loss dd span{
		font-weight:bold;
	}

#ope{
	width:840px;
	height:140px;
	margin-right:auto;
	margin-left:auto;
	padding-top:20px;
	background:url(../cafebar/images/point03_ope.gif) left top no-repeat;
}
	#ope dt{
		display:none;
	}
	#ope dd{
		margin-left:280px;
		margin-bottom:10px;
		font-size:18px;
		line-height:20px;
	}
	#ope dd span{
		font-weight:bold;
	}
	#ope dd span.layout{
		padding-left:8em;
		font-weight:normal;
	}

#ex .ex_box{
	clear:both;
	padding:20px 25px;
	font-size:18px;
}
	#ex .ex_box dl{
		width:570px;
		
	}
	#ex .ex_box dt{
		margin-bottom:10px;
	}

#service p.w450{ width:450px;}
#service p.w440{ width:440px;}

#service01{
	position:relative;
}
	#service01 p.text{
		width:590px;
	}
	#service01 p.photo{
		position:absolute;
		width:300px;
		height:240px;
		top:40px;
		right:20px;
	}

#kinou .box ul{
	margin:20px 0px 0px 19px;
}
	#kinou .box li{
		float:left;
		width:410px;
		border:1px solid #000;
		padding:19px;
	}
	#kinou .box li dl dd{
		height:40px;
		padding-left:20px;
		line-height:40px;
	}
	#kinou .box li dl dd.bg01{ background:#CCC;}
	#kinou .box li dl dd.bg02{ background:#e0e0e0;}

#faq .box dl{
	margin:10px 20px;
	padding-top:10px;
	padding-bottom:10px;
	background:url(../cafebar/images/faq_bg.gif) bottom repeat-x;
}
	#faq .box dt{
		margin-bottom:10px;
		padding-left:50px;
		background:url(../cafebar/images/faq_q.gif) left top no-repeat;
	}
	#faq .box dd{
		margin-bottom:10px;
		padding-left:60px;
		background:url(../cafebar/images/faq_a.gif) left top no-repeat;
	}
	#faq .box .bgnone{
		background:none;
	}