@charset "utf-8";

/* -------------------------------------------------------------------
	file Information
	
	File name:      				relief.css
	Created:   					    2011
	Last update:				    2011-05-15
	by Author Style Info:		reliefページCSS
	
	Author:									OSM by image graff
	Author URI: 						http://osm.main.jp/work

------------------------------------------------------------------- */
/* -----------------------------------------------------------
	setup
----------------------------------------------------------- */
/* ---------------------------------------
	PIE.htc
--------------------------------------- */
#nav-relief {
	behavior: url(../PIE.htc) \9;/* IE6,7,8 */
}

/* -----------------------------------------------------------
	#section
----------------------------------------------------------- */
#section {
	padding: 0;
	background: #fff url(../images/relief/section_bg.png) repeat-x 0 0;
	
	-webkit-border-bottom-right-radius: 0;
	-webkit-border-bottom-left-radius: 0;
	-moz-border-radius-bottomright: 0;
	-moz-border-radius-bottomleft: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

/* -----------------------------------------------------------
	#nav-relief
----------------------------------------------------------- */
#nav-relief {
	overflow: hidden;
	margin-bottom: 20px;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: #ccc 1px 1px 5px;
	-moz-box-shadow: 1px 1px 5px #ccc;
	box-shadow: 1px 1px 5px #ccc;
	position: relative\9;/* PIE.htc IE6,7,8 */
}
#nav-relief li,
#nav-relief li a {
	width: 240px;
	background-image: url(../images/relief/nav_bt.png);
	background-repeat: no-repeat;	
}
#nav-relief li {
	float: left;
	height: 135px;
}
#nav-relief li.current,
#nav-relief li a {
	display: block;
	overflow: hidden;
	height: 0;
	padding-top: 135px;
	line-height: 2;
}
#nav-relief li.nav1 a {
	background-position: 0 0;
}
#nav-relief li.nav2 a {
	background-position: -240px 0;
}
#nav-relief li.nav3 a {
	background-position: -480px 0;
}
#nav-relief li.nav4 a {
	background-position: -720px 0;
}
#nav-relief li.nav1 a:hover {
	background-position: 0 -135px;
}
#nav-relief li.nav2 a:hover {
	background-position: -240px -135px;
}
#nav-relief li.nav3 a:hover {
	background-position: -480px -135px;
}
#nav-relief li.nav4 a:hover {
	background-position: -720px -135px;
}
#nav-relief .nav1.current {
	background-position: 0 -270px;
}
#nav-relief .nav2.current {
	background-position: -240px -270px;
}
#nav-relief .nav3.current {
	background-position: -480px -270px;
}
#nav-relief .nav4.current {
	background-position: -720px -270px;
}

/* -----------------------------------------------------------
	#head
----------------------------------------------------------- */
#head {
	position: relative;
	overflow: hidden;
	height: 427px;
	font-family: "jun201","じゅん201","Hiragino Maru Gothic Pro", "ヒラギノ丸ゴ Pro W4","メイリオ","Meiryo","ＭＳ Ｐゴシック",Osaka,sans-serif;
	color: #444;
}
#head .ttl {
	position: absolute;
}
#head h2 {
	margin-bottom: 15px;
	font-size: 315%;
	font-weight: bold;
	letter-spacing: 0.15em;
}
#head p {
	font-size: 140%;
	line-height: 1.65;
	letter-spacing: 0.1em;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
#head p {
	line-height: 1.7;
}
}

/* -----------------------------------------------------------
	#contents
----------------------------------------------------------- */
#contents h3,
#contents h4 {
	font-size: 185%;
	font-weight: bold;
}
#contents h3 span {
	display: inline-block;
	margin: -4px 0 0 -8px;
	font-family: "jun201","じゅん201","Hiragino Maru Gothic Pro", "ヒラギノ丸ゴ Pro W4","メイリオ","Meiryo","ＭＳ Ｐゴシック",Osaka,sans-serif;
	font-size: 10px;
	font-weight: normal;
	vertical-align: top;
}
#contents p {
	font-size: 105%;
	line-height: 1.55;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
#contents p {
	line-height: 1.6;
}
}

/* -----------------------------------------------------------
	#remarks
----------------------------------------------------------- */
#remarks {
	
}
#remarks .article {
	padding: 38px 90px;
	background: url(../images/relief/remarks_bg.png) repeat-x 0 0;
}
#remarks h3 {
	margin-bottom: 18px;
	font-size: 140%;
	font-weight: bold;
}
#remarks p {
	font-size: 95%;
	line-height: 1.45;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
#remarks p {
	line-height: 1.5;
}
}

/* -----------------------------------------------------------
	.top(健康管理の安心) 用CSS
----------------------------------------------------------- */
.top #head {
	background: url(../images/relief/top_head_bg.jpg) no-repeat 59px bottom;
}
.top #head .ttl {
	top: 172px;
	left: 416px;
}
.top #contents {
	position: relative;
	padding: 520px 0 58px 60px;
	background: url(../images/relief/top_cont_bg.jpg) no-repeat 29px 134px;
}
.top #contents p {
	position: absolute;
	top: 10px;
	left: 373px;
	overflow: hidden;
	width: 290px;
	height: 0;
	padding-top: 205px;
	background: url(../images/relief/top_cont_copy_bg.png) no-repeat 0 0;
	line-height: 2;
}
.top #contents li {
	overflow: hidden;
	width: 862px;
	height: 0;
	line-height: 2;
}
.top #contents .list-1,
.top #contents .list-2,
.top #contents .list-3,
.top #contents .list-4,
.top #contents .list-5 {
	background-image: url(../images/relief/top_list_morning_bg.png);
	background-repeat: no-repeat;
}
.top #contents .list-6,
.top #contents .list-7,
.top #contents .list-8,
.top #contents .list-9,
.top #contents .list-10 {
	background-image: url(../images/relief/top_list_daytime_bg.png);
	background-repeat: no-repeat;
}
.top #contents .list-11,
.top #contents .list-12,
.top #contents .list-13,
.top #contents .list-14 {
	background-image: url(../images/relief/top_list_evening_bg.png);
	background-repeat: no-repeat;
}
.top #contents .list-1 {
	padding-top: 50px;
	background-position: 0 0;
}
.top #contents .list-2 {
	padding-top: 175px;
	background-position: 0px -50px;
}
.top #contents .list-3 {
	padding-top: 50px;
	background-position: 0px -225px;
}
.top #contents .list-4 {
	padding-top: 125px;
	background-position: 0px -275px;
}
.top #contents .list-5 {
	padding-top: 175px;
	background-position: 0px -400px;
}
.top #contents .list-6 {
	padding-top: 50px;
	background-position: 0 0;
}
.top #contents .list-7 {
	padding-top: 100px;
	background-position: 0px -50px;
}
.top #contents .list-8 {
	padding-top: 50px;
	background-position: 0px -150px;
}
.top #contents .list-9 {
	padding-top: 75px;
	background-position: 0px -200px;
}
.top #contents .list-10 {
	padding-top: 125px;
	background-position: 0px -275px;
}
.top #contents .list-11 {
	padding-top: 125px;
	background-position: 0 0;
}
.top #contents .list-12 {
	padding-top: 100px;
	background-position: 0px -125px;
}
.top #contents .list-13 {
	padding-top: 100px;
	background-position: 0px -225px;
}
.top #contents .list-14 {
	padding-top: 225px;
	background-position: 0px -325px;
}

/* -----------------------------------------------------------
	.study(ご検討中の安心) 用CSS
----------------------------------------------------------- */
.study #head {
	background: url(../images/relief/study_head_bg.jpg) no-repeat 484px bottom;
}
.study #head .ttl {
	top: 101px;
	right: 505px;
	text-align: right;
}
.study #contents {
	padding: 50px 90px 96px;
}
.study #contents h3 {
	margin-bottom: 32px;
	line-height: 1.35;
}
.study #contents .atcl-1 {
	min-height: 339px;
	margin-bottom: 104px;
	padding: 90px 0 0 382px;
	background: url(../images/relief/study_cont_atcl_1_bg.jpg) no-repeat 0 0;
}
* html .study #contents .atcl-1 {
	height: 339px;/* IE6 */
}

.study #contents .atcl-micro {
	min-height: 562px;
	margin-bottom: 104px;
	padding:  4px 382px 0 0;
	background: url(../images/relief/study_cont_atcl_microchip_bg.jpg) no-repeat right 90px;
}
* html .study #contents .atcl-1 {
	height: 563px;/* IE6 */
}

.study #contents .atcl-2 {
	min-height: 311px;
	margin-bottom: 111px;
	/*padding: 4px 382px 0 0;*/
	padding: 4px 0 0 382px;
	background: url(../images/relief/study_cont_atcl_2_bg.jpg?ver2) no-repeat 0 0;
}
* html .study #contents .atcl-2 {
	height: 311px;/* IE6 */
}
.study #contents .atcl-3 {
	min-height: 250px;
	/*padding: 0 0 0 382px;*/
	padding: 0 382px 0 0;
	background: url(../images/relief/study_cont_atcl_3_bg.png) no-repeat right 58px;
}
* html .study #contents .atcl-3 {
	height: 250px;/* IE6 */
}
.study #remarks {
	padding-bottom: 41px;
}

/* class */
.study .more {
	text-align: right;
}

/* letter-spacingの調整-------------------- */
@media screen and (-webkit-min-device-pixel-ratio:0){
.study #contents {
	padding-left: 96px;
	padding-right: 96px;
}
}
.study #contents p {
	letter-spacing: 0.05em;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
.study #contents p {
	letter-spacing: 0;
}
}

/* -----------------------------------------------------------
	.contract(ご契約時の安心) 用CSS
----------------------------------------------------------- */
.contract #head {
	background: url(../images/relief/contract_head_bg.jpg) no-repeat right bottom;
}
.contract #head .ttl {
	top: 135px;
	left: 90px;
}
.contract #contents {
	padding: 78px 90px 99px;
}
.contract #contents h3 {
	margin-bottom: 72px;
	text-align: center;
}
.contract #contents h4 {
	margin-bottom: 24px;
}
.contract #contents .article {
	padding: 0 0 0 149px;
	background: url(../images/relief/contract_cont_atcl_bg.png) no-repeat 0 0;
}
.contract #contents .article .inner {
	padding: 0 0 0 149px;
}
.contract #contents .atcl-1 {
	margin-bottom: 114px;
}
.contract #contents .atcl-2 {
	margin-bottom: 117px;
}
.contract #contents p {
	letter-spacing: 0;
}
.contract #remarks {
	padding-bottom: 41px;
}
.contract #remarks p {
	margin-bottom: 1em;
}
.contract #remarks .article .inner {
	padding-left: 270px;
	min-height: 250px;
}
* html .contract #remarks .article .inner {
	height: 250px;/* IE6 */
}
.contract #remarks .atcl-1 .inner {
	background: url(../images/relief/contract_remarks_atcl_1_bg.jpg) no-repeat 0 0;
}
.contract #remarks .atcl-2 .inner {
	background: url(../images/relief/contract_remarks_atcl_2_bg.jpg) no-repeat 0 0;
}

/* -----------------------------------------------------------
	.after(アフターサービスの安心) 用CSS
----------------------------------------------------------- */
.after #head {
	background: url(../images/relief/after_head_bg.jpg) no-repeat 0 bottom;
}
.after #head .ttl {
	top: 193px;
	left: 456px;
}
.after #head h2 {
	letter-spacing: -0.05em;
}
.after #contents {
	padding: 110px 90px 99px;
}
.after #contents p {
	margin-bottom: 1em;
}
.after #contents h3 {
	margin-bottom: 14px;
}
.after #contents .atcl-1 {
	min-height: 251px;
	margin-bottom: 75px;
	padding: 0 0 0 270px;
	background: url(../images/relief/after_cont_atcl_1_bg.jpg) no-repeat 0 0;
}
* html .after #contents .atcl-1 {
	height: 251px;/* IE6 */
}
.after #contents .atcl-2 {
	min-height: 251px;
	margin-bottom: 59px;
	padding: 0 280px 0 0;
	background: url(../images/relief/after_cont_atcl_2_bg.png) no-repeat right 0;
}
* html .after #contents .atcl-2 {
	height: 251px;/* IE6 */
}
.after #contents .atcl-3 {
	min-height: 250px;
	padding: 0 0 0 270px;
	background: url(../images/relief/after_cont_atcl_3_bg.jpg) no-repeat 0 0;
}
* html .after #contents .atcl-3 {
	height: 250px;/* IE6 */
}
.after #remarks {
	padding-bottom: 68px;
}

/* class */
.after .more {
	text-align: right;
}
.after .more a {
	display: inline-block;
	background-color: #666;
	min-height: 28px;
	padding: 0 12px;
	color: #fff;
	font-size: 95%;
	line-height: 28px;
	letter-spacing: 0.1em;
	text-decoration: none;
	
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	border-radius: 14px;
	position: relative\9;/* PIE.htc IE6,7,8 */
}
* html .after .more a {
	height: 28px;
}
.after .more a:hover {
	text-decoration: underline;
}

/* letter-spacingの調整-------------------- */
@media screen and (-webkit-min-device-pixel-ratio:0){
.after #contents {
	padding-left: 101px;
	padding-right: 101px;
}
}
.after #contents p {
	letter-spacing: 0.05em;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
.after #contents p {
	letter-spacing: 0;
}
}