@charset "utf-8";

/* トップページ：デザインスタイル
 * **************************************************
 * mainImg [ メイン画像 ]
 * Information [ お知らせ ]
 * troubleshooting [ こんなとき ]
 * recommend [ 健康おすすめ情報 ]
 * **************************************************
 */

 /* ======================================
　mainImg [ メイン画像 ]
====================================== */
/* Media Queries 切替 */
@media all and (max-width: 480px) {
	#headerWapper{
		margin: 0 auto;
		height: auto;
		width: 100%;
		position: relative;
		overflow: hidden;
	}

	/***** TOPイメージぼかし *****/
		#headerWapper .mainImgShadowl,
		#headerWapper .mainImgShadowr{
			display: none;
		}
	/**********************/

	section#mainImg {
		overflow:hidden;
		margin: 0;
		padding: 0;
		position: relative;
	}
	section#mainImg p.mainImgShadow{
		display: block;
		width: 100%;
		height: 5%;

		position: absolute;
		top:0;
		left: 0;

		content: "";
		font-size: 0;
		line-height: 0;
		zoom: 1;
		z-index: 100;

		background: -webkit-gradient(linear, left top, left bottom, from(rgba(120,120,120,0.4)), to(transparent));
		background: -o-linear-gradient(top, rgba(120,120,120,0.4), transparent);
		background: linear-gradient(to bottom, rgba(120,120,120,0.4), transparent);
		background: -moz-linear-gradient(top,rgba(120,120,120,0.4),rgba(120,120,120,0));
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeaaaaaa', endColorstr='#00eeeeee', GradientType=0)";
	}
	section#mainImg div {
		height: auto;
		width: 100%;
		max-width: 100%;
	}
	section#mainImg img {
		height: auto;
		width: 100%;
		max-width: 100%;
		display: block;
	}
}

/* リンク */
section#mainImg .sliderLink {
	position: absolute;
	bottom: 5px;
	right: 10px;
	text-align: center;
}
section#mainImg .sliderLink a {
	z-index: 210;
	position: relative;
	display: block;
}
section#mainImg .sliderLink img {
	width: 90px;
	height: auto;
}

/* Media Queries 切替 */
@media all and (min-width: 481px) {
	/* メイン画像 */
	#headerWapperW{
		background-color: #fff;
	}
	#headerWapper{
		margin: 0 auto;
		height: auto;
		width: 970px;
		position: relative;
	}

	/***** TOPイメージぼかし *****/
		#headerWapper .mainImgShadowl,
		#headerWapper .mainImgShadowr{
			display: block;
			width: 60px;
			height: 386px;

			content: "";
			font-size: 0;
			line-height: 0;
			zoom: 1;
			z-index: 100;
		}
		#headerWapper .mainImgShadowl{
			position: absolute;
			float: left;
			top:0;
			left: 0;

			background: -webkit-gradient(linear, left, right, from(rgba(255,255,255,1)), to(transparent));
			background: -o-linear-gradient(left, rgba(255,255,255,1), transparent);
			background: linear-gradient(to right, rgba(255,255,255,1), transparent);
			background: -moz-linear-gradient(left,rgba(255,255,255,1),rgba(255,255,255,0));
			-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#00eeeeee', GradientType=1)";
		}
		#headerWapper .mainImgShadowr{
			position: absolute;
			float: right;
			top:0;
			right: 0;

			background: -webkit-gradient(linear, right, left, from(rgba(255,255,255,1)), to(transparent));
			background: -o-linear-gradient(right, rgba(255,255,255,1), transparent);
			background: linear-gradient(to left, rgba(255,255,255,1), transparent);
			background: -moz-linear-gradient(right,rgba(255,255,255,1),rgba(255,255,255,0));
			-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00eeeeee', endColorstr='#ffffffff', GradientType=1)";
		}
	/**********************/



	section#mainImg {
		overflow:hidden;
		margin: 0 auto;
		height: 330px;
		width: 970px;
		position: relative;
	}
	section#mainImg p.mainImgShadow{
		display: block;
		width: 970px;
		height: 7px;

		position: absolute;
		top:0;
		left: 0;

		content: "";
		font-size: 0;
		line-height: 0;
		zoom: 1;
		z-index: 100;

		background: -webkit-gradient(linear, left top, left bottom, from(rgba(120,120,120,0.4)), to(transparent));
		background: -o-linear-gradient(top, rgba(120,120,120,0.4), transparent);
		background: linear-gradient(to bottom, rgba(120,120,120,0.4), transparent);
		background: -moz-linear-gradient(top,rgba(120,120,120,0.4),rgba(120,120,120,0));
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeaaaaaa', endColorstr='#00eeeeee', GradientType=0)";
	}

	section#mainImg div {
		height: 330px;
		width: 970px;
	}
	section#mainImg img {
		z-index: 190;
		height: 330px;
		width: 970px;
	}

	/* リンク */
	section#mainImg .sliderLink {
		position: absolute;
		bottom: 30px;
		left: 760px;
		text-align: center;
	}
	section#mainImg .sliderLink a {
		z-index: 101;
		position: relative;
		display: block;
	}
	section#mainImg .sliderLink img {
		width: 150px;
		height: auto;
	}
	section#mainImg .sliderLink a:hover img {
		opacity: 0.95;
	}
}


/* ======================================
　Information [ お知らせ ]
====================================== */
section#information{
	margin: 0 auto;
	width: 100%;
	background: url(../images/index/bg_sp_ttl.jpg) repeat-x left top;
}
section#information .infoShadow{
		display: none;
}
section#information p{
	margin: 0;
	padding: 15px 0 0 5px;
	height: 36px;
	font-size: 1.1em;
	line-height: 1.2em;
	font-weight: bold;
	color: #474747;
}
section#information p span {
	margin: 0;
	padding: 7px 0 7px 32px;
	background: url(../images/index/mark_news.png) no-repeat left center;
	text-decoration: none;
	color: #474747;
}
/* 「一覧を見る」ボタン：非表示 */
section#information p img {
	visibility: hidden;
	margin: 0;
	padding: 0;
	height:0px;
}

section#information ul{
	margin: 0;
	padding: 2% 0;
	background-color: #FFFFFF;
}
section#information li{
	margin: 0;
	padding: 8px 5%;
	font-size: 1.0em;
	border-top: 1px dotted #dddddd;
}
/* 第1要素：ボーダー：非表示 */
section#information li:first-child{
	border-top: none;
}
/* お知らせアイコン */
#content #information li img{
	padding: 0 10px 0 0;
}
section#information dl,
section#information dt,
section#information dd {
	margin: 0;
	padding: 0;
}
section#information li a{
	display:block;
}
/* Media Queries 切替 */
@media all and (min-width: 481px) {
	section#information {
		margin: 0 0 30px 0;
		width: 648px;
		height: auto;
		background: none;
		background-color: #faeff1;
		border: 1px solid #e7e6db;
		position: relative;
	}
	section#information p{
		font-size: 16px;
		line-height: 1.3em;
		font-weight: bold;
		color: #474747;
		width: 628px;
		margin: 0;
		padding: 18px 0 20px 5px;
		height: 21px;
		background: transparent url(../images/index/top_osirase_midasi.png) no-repeat left top;
		position: relative;
		top:-8px;
		left: 2px;
	}
	section#information p span {
		margin: 0;
		padding: 0 0 0 90px;
		background: none;
		text-decoration: none;
		color: #fff;
		font-weight: normal;
		font-size: 14px;
	}
	section#information .infoShadow{
		display: block;
		width: 650px;
		height: 5px;

		position: absolute;
		bottom:-5px;
		left: -1px;

		content: "";
		font-size: 0;
		line-height: 0;
		zoom: 1;
		z-index: 100;
		border: none;
		outline: none;

		background: -webkit-gradient(linear, left top, left bottom, from(rgba(120,120,120,0.4)), to(transparent));
		background: -o-linear-gradient(top, rgba(120,120,120,0.4), transparent);
		background: linear-gradient(to bottom, rgba(120,120,120,0.4), transparent);
		background: -moz-linear-gradient(top,rgba(120,120,120,0.4),rgba(120,120,120,0));
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeaaaaaa', endColorstr='#00eeeeee', GradientType=0)";
	}

	/* 「一覧を見る」ボタン：表示 */
	section#information p img {
		visibility: visible;
		float:right;
		position:relative; top:3px; right: 25px;
		margin: 0;
		padding: 0;
		height:17px;
	}
	section#information ul{
		margin: 0 20px 25px 25px;
		padding: 0;
		background-color: transparent;
		max-height: 14.2em;
		height: auto;
		overflow-y: auto;
	}
	section#information li{
		margin: 0;
		padding: 0;
		font-size: 100%;
		border-top: none;
		border-bottom: 1px dotted #dddddd;
		line-height: 1.6em;
	}
	section#information li:after {
		content:".";
		display:block;
		height:0px;
		clear:both;
		visibility:hidden;
	}
	section#information li img{
		padding: 0 10px 0 0;
		vertical-align: middle;
	}
	section#information dl {
		clear: both;
		display: table;
		margin: 0;
		padding: 0;
	}
	section#information dt {
		display: table-cell;
		margin: 0;
		padding: 8px 0;
		white-space:nowrap;
	}
	section#information dd {
		display: table-cell;
		margin: 0;
		padding: 8px 0 8px 10px;
	}
	section#information li a{
		display:inline;
	}
}

/* ======================================
　 troubleshooting [ こんなとき ]
====================================== */
section#troubleshooting{
	position: relative; top:-1px; left:0px;
	margin: 5px auto 0 auto;
	padding: 0 0 20px 0;
	text-align: center;
}
section#troubleshooting span.thShadow{
	display: none;
}
section#troubleshooting p{
	margin: 0 0 2px 0;
	padding: 8px 0 0 5px;
	height: 30px;
	font-size: 1.1em;
	text-align: left;
	line-height: 1.2em;
	font-weight: bold;
	color: #474747;
}
section#troubleshooting p span {
	margin: 0;
	padding: 7px 0 7px 32px;
	background: url(../images/index/mark_troubleshooting.png) no-repeat left center;
}

section#troubleshooting dl {
	margin: 0 auto;
	width: 100%;
}
section#troubleshooting div.health dl {
}

/* こんなとき：画像タイトル：非表示 */
section#troubleshooting dt {
	visibility: hidden;
	margin: 0;
	padding: 0;
	height:0px;
}
section#troubleshooting div.consultation img {
	vertical-align: bottom;
}
section#troubleshooting div.consultation dt {
	background: none;
}
section#troubleshooting dd {
	margin: 0;
	padding: 0;
	text-align: left;
}
section#troubleshooting dd ul {
	margin: 0;
	padding: 0;
}

section#troubleshooting dd li {
	margin: 0;
	padding: 14px 5% 14px 5%;
	font-size: 1.2em;
	border-bottom:1px solid #cdcdcb;
}
section#troubleshooting li a {
	padding: 0 0 0 12px;
	color:#474747;
	display: block;
	text-decoration: none;
}

/* 受診編 */
div.consultation li a {
	background: url(../images/index/listmark_consultation.gif) no-repeat left center;
}
/* ライフイベント編 */
div.lifeEvent li a {
	background: url(../images/index/listmark_lifeevent.gif) no-repeat left center;
}
/* 保険証編 */
div.insuranceCertificate li a {
	background: url(../images/index/listmark_insuranceCertificate.gif) no-repeat left center;
}
/* 健康づくり編 */
div.health li a {
	background: url(../images/index/listmark_health.gif) no-repeat left center;
}
/* Media Queries 切替 */
@media all and (min-width: 481px) {
	section#troubleshooting {
		zoom: 1;
		/* margin:0 0 -40px 0; */
		margin-bottom: -20px;
		padding: 0 0 1px 10px;
		background-color: #fbfbf9;
		border: 1px solid #e7e6db;
		position: relative;
		width: 638px;
		height: auto;
	}
	section#troubleshooting span.thShadow{
		display: block;
		width: 650px;
		height: 5px;
		clear: both;

		position: relative;
		bottom:-6px;
		left: -11px;

		content: "";
		font-size: 0;
		line-height: 0;
		zoom: 1;
		z-index: 100;
		border: none;
		outline: none;

		background: -webkit-gradient(linear, left top, left bottom, from(rgba(120,120,120,0.4)), to(transparent));
		background: -o-linear-gradient(top, rgba(120,120,120,0.4), transparent);
		background: linear-gradient(to bottom, rgba(120,120,120,0.4), transparent);
		background: -moz-linear-gradient(top,rgba(120,120,120,0.4),rgba(120,120,120,0));
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeaaaaaa', endColorstr='#00eeeeee', GradientType=0)";
	}
	section#troubleshooting p {
		display: block;
		width: 552px;
		height: 34px;
		background: transparent url(../images/index/tsMidasi.png) no-repeat left top;
		position: relative;
		top:-11px;
		left: 5px;
		margin: 0;
		padding: 26px 0 0 94px;
		font-size: 14px;
		line-height: 1.4em;
		color: #fff;
		font-weight: normal;
	}
	section#troubleshooting p span {
		margin: 0;
		padding: 0;
		background: none;
	}
	section#troubleshooting div {
		float:left;
		margin: 0 10px 20px 0;
		padding: 0;
		width: 309px;
		background: #fff;
	}
	section#troubleshooting div.health dl {
		border-bottom:none;
	}
	section#troubleshooting dl {
		margin: 0 auto;
		width: 315px;
		background: none;
	}

	/* こんなとき：画像タイトル：表示 */
	section#troubleshooting dt {
		visibility: visible;
		margin: 0;
		padding: 0;
		height: 75px;
		width: 315px;
		background: none;
	}
	section#troubleshooting dt img {
		height: 75px;
		width: 315px;
	}
	section#troubleshooting dd {
		margin: 0;
		padding: 0;
		background: none;
		text-align: left;
		border: none;
	}

	section#troubleshooting dd ul {
		margin: 0 10px 10px 10px;
		width: 293px;
	}
	section#troubleshooting dd li {
		margin: 0;
		padding: 4px 5px 4px 5px;
		font-size: 1.0em;
		border-bottom:1px #CCC dashed;
	}
	section#troubleshooting dd li a {
		padding: 0 0 0 18px;
		color:#474747;
		display: block;
		text-decoration: none;
	}
	/* 偶数行ストライプ */
	section#troubleshooting li.odd{
		background: #fff;
	}
	/* 受診編 */
	div.consultation li a {
		background: url(../images/index/listmark.gif) no-repeat 0 4px;
	}
	/* ライフイベント編 */
	div.lifeEvent li a {
		background: url(../images/index/listmark.gif) no-repeat 0px 4px;
	}
	/* 保険証編 */
	div.insuranceCertificate li a {
		background: url(../images/index/listmark.gif) no-repeat 0px 4px;
	}
	/* 健康づくり編 */
	div.health li a {
		background: url(../images/index/listmark.gif) no-repeat 0px 4px;
	}
}

/* ======================================
　recommend [ 健康おすすめ情報 ]
====================================== */
#index aside.recommend{
	background: url(../images/index/bg_sp_ttl.jpg) repeat-x left top;
}
#index aside.recommend p{
	text-align: center;
	margin: 0;
	padding: 15px 0 0 5px;
	height: 36px;
	font-size: 1.1em;
	text-align: left;
	line-height: 1.2em;
	font-weight: bold;
	color: #474747;
}
#index aside.recommend p span {
	margin: 0;
	padding: 7px 0 7px 32px;
	background: url(../images/index/mark_recommend.png) no-repeat left center;
}

#index aside.recommend ul {
	margin: 0 auto 10px auto;
	padding: 0;
}
#index aside.recommend li {
	margin: 0;
	padding: 14px 5%;
	font-size: 1.2em;
	text-align: left;
 color: #474747;
	border-bottom:1px solid #cdcdcb;
}

/* 偶数行ストライプ */
#index aside.recommend li.odd{
	background: #faf9f4;
}
#index aside.recommend li a {
	padding: 0 0 0 12px;
	color:#474747;
	display: block;
	text-decoration: none;
	background: url(../images/index/listmark_recommend.gif) no-repeat left center;
}
/* Media Queries 切替 */
@media all and (min-width: 481px) {
	#index aside.recommend{
		text-align: center;
		background: none;
		background-color: transparent;
		position: relative;
		padding-top: 59px;
	}
	#index aside.recommend p {
		width: 259px;
		height:47px;
		margin: 0;
		padding: 0;
		font-size: 16px;
		line-height: 1.3em;
		color: #474747;
		background:transparent url(../images/index/right_midasi.png) no-repeat left top;
		position: absolute;
		top:0;
		left: 0;
	}
	#index aside.recommend p span {
		margin: 0;
		padding: 7px 0 7px 32px;
		background: none;
		visibility:  hidden;
	}

	#index aside.recommend ul {
		margin: 0 auto 0 auto;
		padding: 0;
		width: auto;
		border-bottom: none;
	}
	#index aside.recommend li {
		text-align: center;
		padding: 0 0 5px 0;
		min-height:60px;
		height:auto !important;
		height:60px;
		width: 234px;
		background-color: transparent;
		text-indent : 0;
		border-bottom: none;
	}
	#index aside.recommend li:first-child + * + * + * + * + * {
		margin-bottom: 20px;
	}

	#index aside.recommend li.odd{
		background: transparent;
	}
	/* 第1要素：ボーダー：非表示 */
	#index aside.recommend li:first-child {
		border-top: none;
	}
	#index aside.recommend li a {
		padding: 0 0 0 3px;
		background: none;
	}
	#index aside.recommend li img{
		margin: 0;
		padding: 0;
		vertical-align: bottom;
	}
	#index aside.recommend li.long,
	#index aside.recommend li.long img{
		height: 85px;
	}
	#index aside.recommend li#reader{
		font-size: 60%;
		line-height: 1.2em;
		font-weight: bold;
	}
	#index aside.recommend li#reader img{
		height: auto;
		width: auto;
	}
	#index aside.recommend li.mt20{
		margin-top: 20px;
	}
}