html,body{
	width:100%;
	height:100%;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	letter-spacing:0.1em;
}
img{
	width:100%;
}

body{
	background: url(../images/bg.gif);
}
#coffee{
	
	position:relative;
	margin:0;
	padding:0;
}



/* ------------------------

 header

------------------------ */

#header{
	background: url(../images/hd_bg.gif)  repeat-x center bottom;
	width:100%;
	position:relative;
	padding-bottom:60px;
	overflow:hidden;
}
#header #hd_logo{
	overflow:hidden;
}
#header #hd_logo .logo_tit01{
	font-weight:bold;
	font-size:10px;
	letter-spacing:1px;
	color: #666;
}
#header #hd_logo .logo_tit02{
	font-weight:900;
	font-size:14px;
	letter-spacing:10px;
}
#header #hd_logo .logo_img{
	margin-top:10px;
	width:230px;
	
}


#header #hd_lead{
	width:100%;
	height:150px;
	margin-top:5px;
	position:relative;
}
#header #hd_lead .lead_bg{
	position:absolute;
	width:100%;
	padding:0 20px;
}
#header #hd_lead p{
	position:absolute;
	padding-top:40px;
	font-size:12px;
	text-align:center;
	width:100%;
}

#header .zo{
	width:100%;
	height:60px;
	position:absolute;
	bottom:-60px;
	left:0px
}

/* ------------------------

 menu

------------------------ */

#menu {
	padding: 10px 15px 30px 15px;
	background:#f2eee5;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	margin-bottom:20px;
	box-shadow: 2px 2px 10px #666;
	-moz-box-shadow: 2px 2px 10px #666;
	-webkit-box-shadow: 2px 2px 10px #666;
}
#menu h3 {
	margin:10px 0;
	padding:6px 5px;
	background: url(../images/menu_bg.gif);
	height:28px;
	width: 100%;
	color:#fff;
	font-size:16px;
	text-align:center;
	
}
#menu li{
	padding:5px 0;
}
#menu a{
	color:#434343;
}
#menu a:hover{
	color:#630;
}

/* ------------------------

 main

------------------------ */

#main {
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 10px 15px 30px 15px;
	background:#f2eee5;
	border-radius: 10px;
  	-moz-border-radius: 10px;
  	-webkit-border-radius: 10px;
	box-shadow: 2px 2px 10px #666;
	-moz-box-shadow: 2px 2px 10px #666;
	-webkit-box-shadow: 2px 2px 10px #666;

}
#main h3 {
	margin:10px 0;
	padding:6px 5px;
	background: url(../images/menu_bg.gif);
	height:28px;
	width: 100%;
	color:#fff;
	font-size:16px;
	text-align:center;
}


#main .tp_unit{
	position:relative;
	overflow:hidden;
	zoom:1;
	padding-bottom:10px;
}
#main .tp_unit .photo{
	background:#fff;
	border:1px solid #E3E3E3;
	margin-top:15px;
	
}
#main .tp_unit .photo.tate{
	padding:0 50px;
}
#main .tp_unit .copy{
	margin-top:15px;
}


#main .main_area{
	padding:10px 20px;
	line-height:24px;
	letter-spacing:2px;
	font-size:14px;
}




/* ------------------------

 footer

------------------------ */


#footer {
	clear:both;
	width:100%;
	font-size:12px;
	text-align:right;
	padding:20px 0px 30px 0px;

}


/* ------------------------

 extra

------------------------ */

#extraDiv1 {
	background-image: url(../images/akinai.png);
	background-repeat: no-repeat;
	background-position: center;
	height: 350px;
	width: 300px;
	position: absolute;
	top: 670px;
	left: 220px;
	z-index: 1;
}

/* ------------------------

 common

------------------------ */

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


.fs_18{
	font-size:18px;
}
.fs_16{
	font-size:16px;
}
.fs_14{
	font-size:14px;
}
.fs_12{
}
.fs_10{
}

.fc_01{
	color:#960;
}
.fw_b{
	font-weight:bold;
}
.pt10{
	padding-top:10px;
}
.pt20{
	padding-top:20px;
}
.mgt20{
	margin-top:20px;
}
table{
	border-bottom:1px solid #CCC;
	border-right:1px solid #CCC;
}
table tr{
}
table tr td{
	border-top:1px solid #CCC;
	border-left:1px solid #CCC;
}

.box01{
	background:#963;
	padding:10px 20px;
	color:#fff;
	border-radius: 10px;
  	-moz-border-radius: 10px;
  	-webkit-border-radius: 10px;
}
.box01 a{
	color:#fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}




@media (max-width: 767px) {
#header .zo{
	margin-top:0px;
}
#header #hd_logo .logo_tit01{
	font-size:9px;
	letter-spacing:1px;
}
#header #hd_logo .logo_tit02{
	font-weight:900;
	font-size:14px;
	letter-spacing:6px;
}
#header #hd_logo .logo_tit01{
	padding-top:10px;
}

#header #hd_lead .lead_bg{
	max-width:260px;
	padding:0 0px;
}
#header #hd_lead p{
	
	padding-top:30px;
	font-size:10px;

	max-width:260px;
}
#footer {
	text-align:center;
}
}

@media (min-width: 768px) and (max-width: 991px) {
#header #hd_logo .logo_tit01{
	padding-top:10px;
}
#main .tp_unit .photo.tate{
	padding:0 35px;
}
}

@media (min-width: 992px) and (max-width: 1199px) {
#header #hd_logo .logo_tit01{
	padding-top:60px;
}
#header #hd_lead .lead_bg{
	padding:0 0px;
}
#main .tp_unit .photo.tate{
	padding:0 40px;
}
}

@media (min-width: 1200px) {
#header #hd_logo .logo_tit01{
	padding-top:60px;
}
}