@charset "UTF-8";

img {
	max-width: 100%;
	height: auto;
}

.sp_none { display: inherit !important;}
.pc_none { display: none !important;}


/* !Clearfix
---------------------------------------------------------- */
.clearfix,
.ochaMenu,
.ochaMenu li a {
	display: block;
	min-height: 1%;
}
.clearfix:after,
.ochaMenu:after,
.ochaMenu li a:after {
	clear: both;
	content:".";
	display: block;
	height: 0;
	visibility: hidden;
}
* html .clearfix,
* html .ochaMenu,
* html .ochaMenu li a {
	height: 1%;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}


/* List
---------------------------------------------------------- */
.featuredlist #main { width: auto;}

/*HeaderPc
---------------------------------------------------------- */
#ochaHeader {
	background: url(/gourmet/featured/tea/images/bg02.png) 0 0 repeat-y;
	border-top: #470 solid 10px;
	height: 250px;
	position: relative;
}
	#ochaHeader p {
		position: absolute;
		top: -10px;
		z-index: 100;
	}
	#ochaHeader h1 {
		width: 300px;
		position: absolute;
		top: 50px;
		left: 180px;
		z-index: 110;
	}
.tourism #ochaHeader {
	background: url(/gourmet/featured/tea/images/bg03.png) 0 -3px repeat-y;
	border-top: #470 solid 10px;
	height: 180px;
}
	.tourism #ochaHeader p {
		top: 10px;
	}
	.tourism #ochaHeader .listTitle {
		width: 260px;
		position: absolute;
		top: 20px;
		left: 250px;
		z-index: 110;
	}

/*Navi*/
#ochaNavi {
	background: #470;
	height: 60px;
	text-align: center;
	position: relative;
}
	#ochaNavi ul {
		margin: 15px 0;
		padding: 0;
		border-right: solid 1px #fff;
		position: absolute;
		z-index: 120;
		left: 160px;
	}
		#ochaNavi ul li {
			color: #fff;
			display: inline-block;
			border-left: solid 1px #fff;
			width: 100px;
			font-size: 18px;
			height: 30px;
		}
		#ochaNavi ul li:last-child { width: 120px;}
			#ochaNavi ul li a {
				margin: 0;
				color: #fff;
				font-weight: bold;
				text-align: center;
				text-decoration: none;
				padding: 0 10px;
				display: block;
			}
			#ochaNavi ul li a {
				color: #fff;
				text-decoration: none;
			}
			#ochaNavi ul li a:hover,
			#ochaNavi ul li.current a {
				color: #000;
				text-decoration: none !important;
			}
.tourism #ochaNavi {
	height: 50px;
	margin: 0 0 30px;
}
	.tourism #ochaNavi ul {
		margin: 15px 0;
		left: 152px;
	}
		.tourism #ochaNavi ul li {
			font-size: 16px;
			height: 20px;
		}
		.tourism #ochaNavi ul li:last-child,
		.tourism #ochaNavi ul li:first-child { width: 120px;}
	.textType01 { display: none;}

#eventFeatured_copy { padding: 0 0 30px;}
	.intro {
		background: url(./images/img_ocha01.jpg) right center no-repeat;
		background-size: 260px;
		min-height: 120px;
		padding: 20px 270px 20px 0;
		margin: 0 0 30px;
	}
		.intro dt {
			color: #470;
			font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
			font-size: 154%;
			line-height: 1.4;
			font-weight: bold;
			margin: 0 0 10px;
		}
		.intro dd {
			font-size: 108%;
			line-height: 1.8;
		}
	.ochaMenu {}
		.ochaMenu li { float: left;}
			.ochaMenu li a {
				width: 190px;
				height: 220px;
				display: block;
				padding: 15px;
				background: #deebcc;
			}
			.ochaMenu li:nth-child(2n) a { background: #dcd4dd;}
			.ochaMenu li a:hover {
				filter:alpha(opacity=60);
				-moz-filter:"alpha(opacity=60)";
				-webkit-filter:"alpha(opacity=60)";
				opacity:0.6;
			}
				.ochaMenu li .imgType01 { margin: 0 0 10px;}
				.ochaMenu li dl {}
					.ochaMenu li dt {
						text-align: center;
						color: #000;
						font-size: 124%;
						line-height: 1.4;
						font-weight: bold;
					}
					.ochaMenu li dd {
						margin: 2px 0 0;
						color: #444;
						font-size: 93%;
					}

.featured_tit-icon { background:url(./images/icon.png) 0 0 no-repeat;}

/* !color
---------------------------------------------------------- */
#featured h2.featured_tit {
	color: #fff;
	background-color: #709600;
}
.sec01 { border: solid 2px #709600;}
#spot-listS { border-top: solid 2px #709600;}

/* areaLink */
.areaLink {
	position: absolute;
	display: inline;
	top: 6px;
	right: 15px;
	font-size: 93%;
	line-height: 1.4;
	font-weight: normal;
	color: #fff;
}
.areaLink a:link,
.link-area {
    color: #fff;
	text-decoration: none;
}
.areaLink a:visited { color: #fff; text-decoration: none;}
.areaLink a:active { color: #000; text-decoration: none;}
.areaLink a:hover { color: #000; text-decoration: none;}
.areaLink a.current { color: #000;}
.areaLink span:hover { color: #000; text-decoration: none;}
.areaLink span.area-selected { color: #000;}



@media only print, screen and (max-width: 40.063em) {
/* !SP
---------------------------------------------------------- */
/* !Layout
---------------------------------------------------------- */

html { overflow-y: scroll;}
body { text-align: center;}


/* HeaderSp
---------------------------------------------------------- */
#featured { margin-top: 10px;}

#ochaHeader {
	background: url(./images/bg01.png) 0 0 repeat-y;
	background-size: 100%;
	border-top: #470 solid 5px;
	height: 170px;
	position: relative;
}
	#ochaHeader p {
		position: absolute;
		top: -5px;
		z-index: 100;
	}
	#ochaHeader h1 {
		width: 50%;
		position: absolute;
		top: 1.5em;
		left: 25%;
		z-index: 110;
	}
.tourism #ochaHeader {
	background: url(./images/bg01.png) 0 0 repeat-y;
	background-size: 100%;
	border-top: #470 solid 5px;
	height: 120px;
}
	.tourism #ochaHeader p {
		top: 10px;
	}
	.tourism #ochaHeader .listTitle {
		width: 40%;
		position: absolute;
		top: 0.8em;
		left: 30%;
		z-index: 110;
	}

/*Navi*/
#ochaNavi {
	background: #470;
	height: 50px;
	text-align: center;
	position: relative;
}
	#ochaNavi ul {
		margin: 15px 0;
		padding: 0;
		border-right: none;
		position: absolute;
		z-index: 120;
		left: 0;
		width: 100%;
	}
		#ochaNavi ul li {
			color: #fff;
			display: inline-block;
			border-left: none;
			border-right: solid 1px #fff;
			width: 30%;
			font-size: 15px;
			height: 20px;
		}
		#ochaNavi ul li:last-child { width: 30%; border: none;}
			#ochaNavi ul li a {
				margin: 0;
				color: #fff;
				font-weight: bold;
				text-align: center;
				text-decoration: none;
				padding: 0 10px;
				display: block;
			}
			#ochaNavi ul li a,
			#ochaNavi ul li a:visited,
			#ochaNavi ul li a:active,
			#ochaNavi ul li a:focus {
				color: #fff;
				text-decoration: none;
			}
			#ochaNavi ul li a:hover,
			#ochaNavi ul li.current a {
				color: #000;
				text-decoration: none !important;
			}
.tourism #ochaNavi {
	height: 50px;
	margin: 0;
}
	.tourism #ochaNavi ul {
		margin: 15px 0;
		left: 0;
	}
		.tourism #ochaNavi ul li {
			font-size: 15px;
			height: 20px;
		}
		.tourism #ochaNavi ul li:last-child,
		.tourism #ochaNavi ul li:first-child { width: 30%;}
		.tourism #ochaNavi ul li.dnSP { display: none;}
	.textType01 {
		display: inherit;
		text-align: right;
		width: 94%;
		margin: 3%;
		font-weight: bold;
		font-size: 108%;
	}
	.textType01 a { color: #470;}

#eventFeatured_copy { padding: 0 0 30px;}
	.intro {
		background: url(./images/img_ocha01.jpg) center top no-repeat;
		background-size: 200px;
		min-height: inherit;
		padding: 135px 15px 15px;
		margin: 20px 0;
	}
		.intro dt {
			font-size: 139%;
			margin: 0 0 10px;
			text-align: center;
		}
		.intro dd {
			font-size: 100%;
		}
	.ochaMenu {
		border-top: #ccc solid 1px;
	}
		.ochaMenu li {
			float: none;
			border-bottom: #ccc solid 1px;
		}
			.ochaMenu li a {
				width: auto;
				height: auto;
				display: block;
				padding: 15px;
				background: #fff;
			}
			.ochaMenu li:nth-child(2n) a { background: #fff;}
			.ochaMenu li a:hover {
				filter:alpha(opacity=100);
				-moz-filter:"alpha(opacity=100)";
				-webkit-filter:"alpha(opacity=100)";
				opacity:1.0;
			}
				.ochaMenu li .imgType01 {
					margin: 0;
					width: 30%;
					float: left;
				}
				.ochaMenu li dl {
					width: 65%;
					float: right;
				}
					.ochaMenu li dt {
						text-align: left;
						font-size: 116%;
						color: #470;
					}
					.ochaMenu li dd {
						margin: 2px 0 0;
						color: #444;
						font-size: 93%;
					}

.featured_tit-icon { background:url(./images/icon.png) 0 0 no-repeat;}

/* !color
---------------------------------------------------------- */
#featured h2.featured_tit { }
.sec01 { border: none;}
#spot-listS { border-top: solid 2px #709600;}

/* areaLink */
.areaLink {
    position: inherit;
	display: table;
	margin:-2px 0 10px -32px;
	padding: 0 0 5px 0;
	font-size: 100%;
	line-height: 1.4;
	font-weight: normal;
}
.areaLink a:link { }
.areaLink a:visited  { }
.areaLink a:active { }
.areaLink a:hover { }
.areaLink a.current { }
.areaLink span:hover { }
.areaLink span.area-selected  { }

/* !List
---------------------------------------------------------- */
#featured.otonaList { margin: 25px 0 10px 0;}
.otonaList01 { margin: 20px 0 0;}
	.otonaList01 li {
		width: 40%;
		min-height: 180px;
		margin: 0 10% 0 5%;
		float: left;
	}
	.otonaList01 li:nth-child(2n),
	.otonaList01 li:last-child {
		margin: 0 5% 0 0;
	}
		.otonaList01 li dl {}
			.otonaList01 li dl figure {
				width: auto;
				height: auto;
				display: table-cell;
				text-align: center;
				vertical-align: middle;
			}
			.otonaList01 li dl dt {
				font-size: 93%;
				line-height: 1.3;
				margin: 5px 0 0;
			}
			.otonaList01 li dl dd {
				font-size: 85%;
				line-height: 1.3;
				color: #666;
			}

}

@media only screen and (max-width: 414px) {
	#ochaHeader { height: 160px;}
	.tourism #ochaHeader { height: 110px;}
}
@media only screen and (max-width: 375px) {
	#ochaHeader { height: 140px;}
	.tourism #ochaHeader { height: 100px;}
}
@media only screen and (max-width: 320px) {
	#ochaHeader { height: 120px;}
	.tourism #ochaHeader { height: 90px;}
}