@charset "UTF-8";
/*----------------------------------------------------------------------
------------------------------------------------------------------------

layout CSS File

File Name		layout.css
Note			共通レイアウト用スタイルシート


New Creation	09.06.03
Update			10.02.24


Created By		Yoshiaki Murakami

------------------------------------------------------------------------
----------------------------------------------------------------------*/

/*----------------------------------------------------------------------
------------------------------------------------------------------------
目次

1. htmlタグ
2. container
3. 共通部分
4. header
5. main
6. sub
7. footer

------------------------------------------------------------------------
----------------------------------------------------------------------*/

/*----------------------------------------------------------------------
1. htmlタグ
----------------------------------------------------------------------*/
html {
	height:100%;
	overflow-y:scroll;
}

body {
	height:100%;
	background:#fff;
}

a {
	color:#fff;
}

a:hover {
/*	color:#ff776e !important;*/
	color:#ff776e;
}


p {
	color:#898989;
}

#smartphone {
	text-align:center;
	background:#335351;
}

#smartphone a {
	display:block;
	padding:30px 0px;
	font-size:3em;
	font-weight:bold;
	color:#fff;
	text-shadow:1px 1px 1px rgba(255,255,255,0.2);
}

/*----------------------------------------------------------------------
2. contaier
----------------------------------------------------------------------*/
#container {
	position:relative;
	margin:0px auto;
	min-height:100%;
}

body > #container {
	height:auto;
}

* html #container {
	height:100%;
	text-align:left;
}


/*----------------------------------------------------------------------
3. 共通部分
----------------------------------------------------------------------*/
#container .navi {
	margin:0px auto;
	padding:0px 3px;
	width:902px;
}

* html #container .navi {
	margin:0px;
	width:908px;
}

#container .navi li {
	float:left;
	display:inline;
	background-position:left top;
	background-repeat:no-repeat;
}

#container .navi .top {
	background-image:url(../img/navi_top_h.gif);
}

#container .navi .failure {
	background-image:url(../img/navi_failure_h.gif);
}

#container .navi .selection {
	background-image:url(../img/navi_selection_h.gif);
}

#container .navi .siliconbag {
	background-image:url(../img/navi_siliconbag_h.gif);
}

#container .navi .newremedy {
	background-image:url(../img/navi_newremedy_h.gif);
}

#container .navi .doctor {
	background-image:url(../img/navi_doctor_h.gif);
}

#container .navi .qa {
	background-image:url(../img/navi_qa_h.gif);
}

#container .navi li a {
	display:block;
	height:49px;
}

#container .navi .top a {
	width:58px;
}

#container .navi .failure a {
	width:139px;
}

#container .navi .selection a {
	width:171px;
}

#container .navi .siliconbag a {
	width:167px;
}

#container .navi .newremedy a {
	width:150px;
}

#container .navi .doctor a {
	width:112px;
}

#container .navi .qa a {
	width:105px;
}


/*----------------------------------------------------------------------
4. header
----------------------------------------------------------------------*/
#container #header {
	border-top:6px solid #335351;
	background:url(../img/header_bg.gif) left top repeat;
}

* html #container #header {
	text-align:center;
}

* html #container #header img {
	behavior:url(js/iepngfix.htc);
}

#container #header .wrapper {
	position:relative;
	margin:0px auto;
/*	width:900px;*/
	width:908px;
	height:108px;
	background:url(../img/header_wrapper_bg.png) 188px bottom no-repeat;
}

* html #container #header .wrapper {
	text-align:left;
	behavior:url(js/iepngfix.htc);
}

#container #header .wrapper h1 {
	margin-bottom:1px;
	margin-left:3px;
	line-height:30px;
	color:#fff;
}

* html #container #header .wrapper h1 {
	padding-top:10px;
	height:30px;
	line-height:1em;
}

#container #header .wrapper #logo {
	float:left;
	display:inline;
}

* html #container #header .wrapper #logo img {
	display:relative;
}

#container #header .wrapper .sitemap {
	position:absolute;
	top:0px;
	right:10px;
	padding-left:13px;
	background:url(../img/arrow1.gif) left 5px no-repeat;
	line-height:20px;
}

#container #header .wrapper .sitemap:hover {
	background-image:url(../img/arrow10.gif);
}

#container #header .wrapper .info {
	float:right;
	display:inline;
/*	margin-top:10px;*/
	margin-top:-20px;
	margin-right:-5px;
	padding:17px 12px 12px 10px;
	width:441px;
	background:url(../img/header_info_bg.png) left top no-repeat;
}

* html #container #header .wrapper .info {
	width:339px;
	behavior:url(js/iepngfix.htc);
}

#container #header .wrapper .info dt {
	padding:4px 0px 0px 10px;
}

* html #container #header .wrapper .info dt {
	height:15px;
}

* html #container #header .wrapper .info dt img {
}

*+html #container #header .wrapper .info dt {
}

#container #header .wrapper .info dd {
	padding:0px 0px 0px 4px;
}

* html #container #header .wrapper .info dd {
}

#container #header .wrapper .info dd ul {
	height:27px;
}

#container #header .wrapper .info dd ul li {
	float:left;
	display:inline;
}

#container #header .wrapper .info dd ul .consultation {
/*	margin-right:2px;*/
}

#container #header .wrapper .info dd ul .counseling {
}

#container #header .wrapper .info dd ul li a {
	height:29px;
}

#container #header .wrapper .info dd ul .consultation a {
	width:116px;
}

#container #header .wrapper .info dd ul .counseling a {
	width:132px;
}

#container #header #gnavi {
	clear:both;
	padding:1px 0px;
	background:url(../img/navi_bg.gif) left top repeat-x;
}


/*----------------------------------------------------------------------
5. content & main
----------------------------------------------------------------------*/
#container #content {
	padding-bottom:167px;
	background:#e7f1f0;
}

* html #container #content {
	text-align:center;
}

#container #content .wrapper {
	position:relative;
/*	width:900px;*/
	width:908px;
	margin:0px auto;
}

* html #container #content .wrapper {
	text-align:left;
}

#container #content .wrapper #main {
	float:left;
	display:inline;
/*	padding:20px 20px 0px 0px;
	width:660px;*/
	padding:20px 32px 0px 0px;
	width:668px;
}

* html #container #content .wrapper #main {
/*	width:680px;*/
	width:700px;
}


/*----------------------------------------------------------------------
6. sub
----------------------------------------------------------------------*/
#container #content .wrapper #sub {
	float:left;
	display:inline;
/*	padding:28px 0px 0px 20px;
	width:200px;*/
	padding:28px 0px 0px 0px;
	width:208px;
}

#container #content .wrapper #sub div {
	margin-bottom:20px;
}

* html #container #content .wrapper #sub div {
	width:208px;
	height:1%;
}

#container #content .wrapper #sub .workshop {
	margin-right:8px;
	margin-left:8px;
}

* html #container #content .wrapper #sub .workshop {
	width:192px;
}


/*----------------------------------------------------------------------
7. footer
----------------------------------------------------------------------*/
#container #footer {
	position:absolute;
	bottom:0px;
	width:100%;
	background:url(../img/footer_bg.gif) left 51px repeat-x;
}

* html #container #footer {
	text-align:center
}

* html #container #footer img {
	behavior:url(js/iepngfix.htc);
}

#container #footer #fnavi {
	padding:1px 0px;
	background:url(../img/navi_bg.gif) left top repeat-x;
}

#container #footer .wrapper {
	position:relative;
	margin:0px auto;
	padding:32px 0px 8px;
	width:900px;
	background:url(../img/footer_wrapper_bg.png) 195px top no-repeat;
}

* html #container #footer .wrapper {
	text-align:left;
	behavior:url(js/iepngfix.htc);
}

#container #footer .wrapper #footertext {
	width:817px;
	line-height:1.4em;
	color:#fff;
}

#container #footer .wrapper #footertext a {
	color:#fff;
}

#container #footer .wrapper #pagetop {
	position:absolute;
	right:0px;
	bottom:0px;
	background:url(../img/pagetop_h.png) left top no-repeat;
}

* html #container #footer .wrapper #pagetop ,
* html #container #footer .wrapper #pagetop img {
	behavior:url(js/iepngfix.htc);
}

#container #footer .wrapper #pagetop a {
	width:105px;
	height:24px;
}

#container #footer address {
	background:#335351;
	line-height:20px;
	text-align:center;
	color:#fff;
}

