@charset "utf-8";

	/* ----------------------------------
	トップページ
	------------------------------------- */
	
	/* スライダー
	##################################### */
			
	/* Browser Resets */
	.flex-container a:active,
	.flexslider a:active,
	.flex-container a:focus,
	.flexslider a:focus  {outline: none;}
	.slides,
	.flex-control-nav,
	.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
	
	/* FlexSlider Necessary Styles
	*********************************/
	.flexslider {width: 694px; height:264px; margin: 0 0 20px; _margin: 0; padding: 3px 3px 35px;}
	.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
	.flexslider .slides img {width: 694px; height:264px; display: block; overflow:hidden;}
	.flex-pauseplay span {text-transform: capitalize;}
	
	/* Clearfix for the .slides element */
	.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
	html[xmlns] .slides {display: block;}
	* html .slides {height: 1%;}
	
	/* No JavaScript Fallback */
	/* If you are not using another script, such as Modernizr, make sure you
	 * include js that eliminates this class on page load */
	.no-js .slides > li:first-child {display: block;}	
	
	/* FlexSlider Default Theme
	*********************************/
	.flexslider {background: url(../img/top/bg_slider.gif) no-repeat; position: relative; zoom: 1;}
	.flexslider .slides {zoom: 1;}
	.flexslider .slides > li {position: relative;}
	/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
	.flex-container {zoom: 1; position: relative;}
	
	/* Caption style */
	/* IE rgba() hack */
	.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
	.flex-caption {width: 96%; padding: 2%; margin: 0; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;}
	
	/* Direction Nav */
	.flex-direction-nav { height: 0; }
	.flex-direction-nav li a {width: 35px; height: 60px; margin: -13px 0 0; display: block; background: url(../img/top/bg_direction_nav.gif) no-repeat; position: absolute; top: 120px; cursor: pointer; text-indent: -999em;}
	.flex-direction-nav li .next {background-position: -35px 0; right: 0;}
	.flex-direction-nav li .prev {left: 0;}
	.flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}
	
	/* Control Nav */
	.flex-control-nav {width: 100%; position: absolute; bottom: 10px; _bottom: 45px; text-align: center;}
	.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
	.flex-control-nav li:first-child {margin: 0;}
	.flex-control-nav li a {width: 15px; height: 15px; display: block; background: url(../img/top/bg_control_nav.gif) no-repeat; cursor: pointer; text-indent: -999em; overflow:hidden;}
	.flex-control-nav li a:hover {background-position: 0 -15px;}
	.flex-control-nav li a.active {background-position: 0 -30px; cursor: default;}	
	


	/* H2 | h2.ttl-pgクラスとセットで使用 */

	h2#h2-top-column 		{ width: 340px; height: 40px; background: url(../img/top/ttl_h2_column.gif) no-repeat; }								/* 健康コラム おすすめ注目記事 */
	h2#h2-top-letter 		{ width: 340px; height: 40px; background: url(../img/top/ttl_h2_letter.gif) no-repeat; }								/* 耳よりだより */
	h2#h2-top-service		{ width: 700px; height: 40px; background: url(../img/top/ttl_h2_service.gif) no-repeat; margin-bottom: 10px; !important; }	/* ご提供サービス紹介 */
	h2#h2-top-topics		{ width: 700px; height: 40px; background: url(../img/top/ttl_h2_topics.gif) no-repeat; margin-bottom: 0 !important; }	/* トピックス */
	
	/* ご提供サービス紹介 */
	#top-service-section{
		width: 100%;
		margin-bottom: 30px;
		overflow: hidden;
	}
	
	ul#top-service-list li{
		display:block;
		width:188px;
		border:1px solid #222222;
		float:left;
		margin-right:20px;
		margin-bottom: 15px;
		padding:10px 15px;
		font-size:13px;
	}
	
	ul#top-service-list li.two-column{
		width:310px;
		margin-bottom: 0px;
		padding:10px 14px;
	}

	ul#top-service-list li h4{
		margin-bottom:10px;
	}
	
	span.top-service-text {
		width:105px;
		float:right;
		display:block;
		margin-bottom:10px;
	}
	
	ul#top-service-list li.two-column span.top-service-text {
		width:227px;
	}
	
	

	/* 健康コラム */
	#top-hcolumn-section {
		float: left;
		width: 340px;
		margin-bottom: 20px;
		overflow: hidden;
	}
		.top-hcolumn-article {
			width: 320px;
			background-color:#eeeeee;
			overflow: hidden;
			padding: 10px;
			border-bottom: 1px dotted #cccccc;
		}
			.top-hcolumn-img {
				float: left;
				height:135px;
			}
			.top-hcolumn-txt {
				float: right;
				width: 130px;
				overflow: hidden;
			}
				.top-hcolumn-att {
					width: 100%;
					overflow: hidden;
					margin-bottom: 10px;
				}
					.top-hcolumn-date {
						display: block;
						float: left;
						width: 80px;
						margin-bottom: 0px;
						color: #999999;
						/*font-size: 77%;*/
						overflow: hidden;
					}
					.top-hcolumn-icon1,
					.top-hcolumn-icon2,
					.top-hcolumn-icon3 {
						width: 130px;
						float: left;
						padding: 2px 0;
						color: #333;
						font-size: 84%;
						line-height: 1;
						margin: 0;
						text-align: center;
					}
					.top-hcolumn-icon1 { background-color: #ddc9e8; }
					.top-hcolumn-icon2 { background-color: #bcd8e6; }
					.top-hcolumn-icon3 { background-color: #D0E8C9; }


	/* 耳よりだより */
	#top-letter-section {
		float: right;
		width: 340px;
		margin-bottom: 20px;
		overflow: hidden;
	}
		.top-letter-article {
			width: 320px;
			background-color:#eeeeee;
			overflow: hidden;
			padding: 10px;
			border-bottom: 1px dotted #cccccc;
		}
			.top-letter-img {
				float: left;
				height:135px;
			}
			.top-letter-txt {
				float: right;
				width: 130px;
				overflow: hidden;
			}
				.top-letter-att {
					width: 100%;
					overflow: hidden;
					margin-bottom: 10px;
				}
					.top-letter-date {
						display: block;
						float: left;
						width: 80px;
						margin-bottom: 0px;
						color: #999999;
						/*font-size: 77%;*/
						overflow: hidden;
					}
					.top-letter-icon1,
					.top-letter-icon2,
					.top-letter-icon3 {
						width: 130px;
						float: left;
						padding: 2px 0;
						color: #333;
						font-size: 84%;
						line-height: 1;
						margin: 0;
						text-align: center;
					}
					.top-letter-icon1 { background-color: #FF999A; }
					.top-letter-icon2 { background-color: #99CDFF; }
					.top-letter-icon3 { background-color: #FFFFCD; }


	/* お知らせ */
	#top-info-section {
		width: 100%; /* total 600px */
		margin-bottom: 30px;
		overflow: hidden;
	}
		ul#top-info-list {
			display: block;
			width: 100%;
			overflow: hidden;
		}
			ul#top-info-list li {
				display: block;
				width: 670px; /* total 600px */
				border-bottom: 1px dotted #cccccc;
				padding: 15px 0 15px 30px;
				background: url(../img/common/icon/icon_arrow01.gif) no-repeat 10px 50%;
				overflow: hidden;
			}
			ul#top-info-list li:hover {
				background: #f4f4f4 url(../img/common/icon/icon_arrow01.gif) no-repeat 10px 50%;
			}
				ul#top-info-list li span.top-info-date {
					display: block;
					float: left;
					width: 70px; /* total90px */
					height: 13px;
					overflow: hidden;
					color: #333333;
					font-size: 84%;
					line-height: 1;
					margin-top: 3px;
				}
				ul#top-info-list li span.top-info-txt {
					display: block;
					float: right;
					width: 580px;
					overflow: hidden;
				}