@charset "UTF-8";

/*-------------------------------------------------------------------------
『フラクセル2』	index用スタイルシート
----------------------------------------------------------------------------

	作成日時		2007/08/31
	最終更新日		2009/05/14

	製作者			Yoshiaki Murakami

----------------------------------------------------------------------------
--------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------
見出し
----------------------------------------------------------------------------

	1		インポート
	2		ヘッダー
		2.1	メインイメージ
		2.2	グローバルナビゲーション
		2.3	クリニック紹介 リンク
		2.4	what's new
		2.5	キャンペーン

	3		メインコンテンツ
		3.1	フラクセル2とは
		3.2	フラクセル2への進化ポイント
		3.3	フラクセル2をすると

----------------------------------------------------------------------------
--------------------------------------------------------------------------*/


/*-------------------------------------------------------------------------
1	インポート
--------------------------------------------------------------------------*/
@import url("base.css");/*　タグ・汎用クラス・フッター　*/

/*-------------------------------------------------------------------------
2	ヘッダー
--------------------------------------------------------------------------*/
#container #header {
/*	height:867px;*/
	height:692px;
	background:url(../img/header_bg.jpg) left top no-repeat #1f0e6a;
	overflow:hidden;
}

/*
2.2	ロゴ
---------------------------------------------*/
#container #header h2 {
	float:left;
	margin:13px 0px 17px 30px;
	width:285px;
	height:51px;
	background:url(../img/logo.gif) left top no-repeat;
	text-indent:-1000em;
}

/*
3.1	お問い合わせ
---------------------------------------------*/
#container #header #contact {
	float:right;
	margin:11px 28px 0px 0px;
	width:362px;
	height:58px;
}

#container #header #contact dt {
	float:left;
	margin:0px 5px 0px 0px;
	width:59px;
	height:55px;
	background:url(../img/contact.gif) left top no-repeat;
	text-indent:-1000em;
}

#container #header #contact dd {
	float:left;
}

#container #header #contact #tel {
	margin-left:3px;
	width:209px;
	height:23px;
	background:url(../img/tel.gif) left top no-repeat;
	text-indent:-1000em;
}

#container #header #contact #businesshour {
	margin-left:7px;
	width:71px;
	height:21px;
	background:url(../img/businesshour.gif) left top no-repeat;
	text-indent:-1000em;
}

#container #header #contact #reserve a {
	display:block;
	margin:4px 0px 0px 0px;
	width:105px;
	height:30px;
	background:url(../img/reserve.gif) left top no-repeat;
	text-indent:-1000em;
}

#container #header #contact #consultation {
	margin-right:1px;
}

#container #header #contact #consultation a {
	display:block;
	margin:4px 0px 0px 0px;
	width:192px;
	height:30px;
	background:url(../img/email.gif) right top no-repeat;
	text-indent:-1000em;
}

#container #header #contact #reserve a:hover ,
#container #header #contact #consultation a:hover {
	background-position:left bottom;
}

/*
2.1	メインイメージ
---------------------------------------------*/
#container #header h3 {
	clear:both;
	width:790px;
	height:277px;
	background:url(../img/mainimage.jpg) left top no-repeat;
	text-indent:-1000em;
}

/*
2.2	グローバルナビゲーション
---------------------------------------------*/
#container #header #gnavi {
/*	margin-top:188px;*/
}

* html #container #header #gnavi {
	width:790px;
}

#container #header #gnavi h4 {
	margin-left:30px;
	width:107px;
	height:17px;
	background:url(../img/title_menu.gif) left top no-repeat;
	text-indent:-1000em;
}

#container #header #gnavi ul {
	margin:4px 0px 0px 24px;
	background:url(../img/gnavi.jpg) left top no-repeat;
}


#container #header #gnavi ul li {
	float:left;
	width:248px;
	height:93px;
	list-style-type:none;
}

#container #header #gnavi ul li dl {
	position:relative;
}

#container #header #gnavi ul li dl dt {
	height:0px;
	text-indent:-1000em;
}

* html #container #header #gnavi ul li dl dt {
	display:none;
}

#container #header #gnavi ul li dl dd {
	padding:6px;
	width:234px;
	height:80px;
	font-size:1.2em;
}

#container #header #gnavi ul .case dl dd ,
#container #header #gnavi ul .price dl dd ,
#container #header #gnavi ul .faq dl dd {
	padding-top:7px;
}

* html #container #header #gnavi ul li dl dd {
	padding:6px;
}

* html #container #header #gnavi ul .case dl dd ,
* html #container #header #gnavi ul .price dl dd ,
* html #container #header #gnavi ul .faq dl dd {
	padding-top:7px;
}

#container #header #gnavi ul li dl dd a {
	display:block;
	padding:40px 17px 15px 84px;
	width:133px;
	height:25px;
	background:url(../img/gnavi.jpg) no-repeat;
	color:#666;
	text-decoration:none;
	line-height:1.5em;
	overflow:hidden;
}

* html #container #header #gnavi ul li dl dd a {
	font-size:0.8em;
}

*+html #container #header #gnavi ul li dl dd a {
	font-size:0.8em;
}

#container #header #gnavi ul .about dl dd a {
	background-position:-6px -6px;
}

#container #header #gnavi ul .about dl dd a:hover {
	background-position:-6px -192px;
}

#container #header #gnavi ul .cure dl dd a {
	background-position:-254px -6px;
}

#container #header #gnavi ul .cure dl dd a:hover {
	background-position:-254px -192px;
}

#container #header #gnavi ul .treatment dl dd a {
	background-position:-502px -6px;
}

#container #header #gnavi ul .treatment dl dd a:hover {
	background-position:-502px -192px;
}

#container #header #gnavi ul .case dl dd a {
	background-position:-6px -100px;
}

#container #header #gnavi ul .case dl dd a:hover {
	background-position:-6px -286px;
}

#container #header #gnavi ul .price dl dd a {
	background-position:-254px -100px;
}

#container #header #gnavi ul .price dl dd a:hover {
	background-position:-254px -286px;
}

#container #header #gnavi ul .faq dl dd a {
	background-position:-502px -100px;
}

#container #header #gnavi ul .faq dl dd a:hover {
	background-position:-502px -286px;
}

/*
2.3	クリニック紹介 リンク
---------------------------------------------*/
#container #header #clinic_header {
	margin:7px 30px 0px 0px;
	float:right;
}

* html #container #header #clinic_header {
	margin-right:25px;
	width:225px;
}


*+html #container #header #clinic_header {
	margin-right:53px;
	width:225px;
}

#container #header #clinic_header h4 {
	height:0px;
	text-indent:-1000em;
}

* html #container #header #clinic_header h4 {
	display:none;
}

*+html #container #header #clinic_header h4 {
	display:none;
}

#container #header #clinic_header dl {
}

#container #header #clinic_header dl dt {
	font-size:1.2em;
	color:#fff;
	text-transform:uppercase;
}

#container #header #clinic_header dl #introduction {
	line-height:12px;
	font-size:12px;
}

#container #header #clinic_header dl #introduction a {
	float:right;
	padding-left:12px;
	background:url(../img/list_intro.gif) left bottom no-repeat;
	text-decoration:none;
	color:#fff;
}

* html #container #header #clinic_header dl #introduction a {
	background-position:left top;
	line-height:1.1em;
}

*+html #container #header #clinic_header dl #introduction a {
	background-position:left top;
	line-height:1.1em;
}

#container #header #clinic_header dl #introduction a:hover {
	background:url(../img/list_intro_h.gif) left bottom no-repeat;
	color:#f173ac;
}

* html #container #header #clinic_header dl #introduction a:hover {
	background-position:left top;
}

*+html #container #header #clinic_header dl #introduction a:hover {
	background-position:left top;
}

/*
2.4	what's new
---------------------------------------------*/
#container #header #whatsnew {
	position:absolute;
	left:30px;
	top:400px;
	width:356px;
	height:160px;
	background:#FEECF5;
	border:1px solid #feecf5;
	font-size:1.1em;
	overflow:hidden;
}

#container #header #whatsnew h4 {
	width:356px;
	height:17px;
	background:url(../img/title_whatsnew.gif) left top no-repeat;
	text-indent:-1000em;
}

#container #header #whatsnew ol li {
	clear:both;
	border-bottom:1px dotted #4A3483;
	list-style-type:none;
	line-height:1.2em;
	color:#4A3483;
	overflow:hidden;
}

* html #container #header #whatsnew ol li {
	height:auto;
}

*+html #container #header #whatsnew ol li {
	height:auto;
}


#container #header #whatsnew ol li a {
	float:left;
	margin:5px 0px;
	padding-left:5px;
	width:295px;
	border-left:5px solid #b9accd;
	text-decoration:none;
	color:#4A3483;
}

#container #header #whatsnew ol .new a {
/*	background:url(../img/icon_new.gif) 209px center no-repeat;*/
}

#container #header #whatsnew ol .new a img {
	margin-left:3px;
	border:none;
}

#container #header #whatsnew ol li a:hover {
	color:#F287B7;
}

#container #header #whatsnew ol #last a {

}

#container #header #whatsnew ol li span {
	float:right;
	margin:5px 0px;
	padding:1px;
	background:#b9accd;
	color:#fff;
}

/*
2.5	キャンペーン
---------------------------------------------*/
#container #header #campaign {
	position:absolute;
	right:30px;
	top:400px;
}

#container #header #campaign a img {
	border:none;
}

/*-------------------------------------------------------------------------
3	メインエリア
--------------------------------------------------------------------------*/
#container #main #about h2 {
	position:absolute;
	top:-13px;
	left:30px;
	width:108px;
	height:17px;
	background:url(../img/about.gif) left top no-repeat;
	text-indent:-1000em;
}

/*
3.1	フラクセル2とは
---------------------------------------------*/
#container #main #fraxel2 {
	float:left;
	width:358px;
	padding-bottom:30px;
}

#container #main #fraxel2 h3 {
	margin-bottom:16px;
	width:358px;
	height:26px;
	background:url(../img/title_fraxel2.gif) left top no-repeat;
	text-indent:-1000em;
}

#container #main #fraxel2 p {
	padding:0px 16px;
	font-size:1.4em;
	color:#333;
	line-height:1.5em;
}

/*
3.2	フラクセル2への進化ポイント
---------------------------------------------*/
#container #main #point {
	float:right;
	padding-bottom:30px;
	width:358px;
}

#container #main #point h3 {
	margin-bottom:16px;
	width:358px;
	height:26px;
	background:url(../img/title_point.gif) left top no-repeat;
	text-indent:-1000em;
}

#container #main #point ul {
	margin:0px 16px;
	font-size:1.4em;
	color:#333;
}

#container #main #point ul li {
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom:2px solid #685396;
	list-style-type:none;
}

#container #main #point ul li dl {
	position:relative;
	min-height:99px;
}

#container #main #point ul li dl dt {
	margin-right:86px;
	padding-left:22px;
	font-weight:bold;
	line-height:18px;
	color:#4A3483;
}

#container #main #point ul #one dt {
	background:url(../img/list_one.gif) left top no-repeat;
}

#container #main #point ul #two dt {
	background:url(../img/list_two.gif) left top no-repeat;
}

#container #main #point ul #three dt {
	background:url(../img/list_three.gif) left top no-repeat;
}

#container #main #point ul li dl dd {
	margin:0px 0px 0px 22px;
	padding:0.5em 0px 0px;
	line-height:1.5em;
}

#container #main #point ul li dl .cut {
	float:right;
	margin:-1.5em 0px 0px 6px;
	padding:0px;
	width:80px;
	background:#999;
}

#container #main #point ul li dl .cut img {
	width:80px;
	vertical-align:bottom;
}

#container #main #point .more {
	margin-right:16px;
	text-align:right;
}

#container #main #point .more a {
	float:right;
	padding-left:14px;
	background:url(../img/list.gif) left bottom no-repeat;
	text-decoration:none;
	font-size:1.2em;
	line-height:12px;
	color:#4A3483;
}

#container #main #point .more a:hover {
	border:none;
	background:url(../img/list_h.gif) left bottom no-repeat;
	color:#F287B7;
}

/*
3.3	クリニック紹介
---------------------------------------------*/
#container #main #clinic_main {
	clear:both;
	margin-bottom:20px;
	padding-bottom:10px;
	background:url(../img/footer_clinic.gif) left bottom no-repeat #FEECF5;
} 

* html #container #main #clinic_main {
	clear:none;
	width:730px;
}

#container #main #clinic_main h3 {
	width:730px;
	height:39px;
	background:url(../img/title_clinic.gif) left top no-repeat;
	text-indent:-1000em;
}

#container #main #clinic_main dl {
	position:relative;
	padding:14px 20px 10px;
	min-height:180px;
	border-right:2px solid #685396;
	border-left:2px solid #685396;
	overflow:hidden;
}

* html #container #main #clinic_main dl {
	height:180px;
}

#container #main #clinic_main dl dt {
	margin:6px 0px 10px 226px
}

#container #main #clinic_main dl dd {
	margin-left:226px;
	padding-top:10px;
	border-top:1px solid #716860;
}

#container #main #clinic_main dl .cut {
	position:absolute;
	left:20px;
	top:20px;
	margin:0px;
	padding:0px;
	border:none;
}

#container #main #clinic_main dl dd p {
	margin-bottom:1em;
	font-size:1.4em;
}

#container #main #clinic_main dl dd .address {
	font-size:1.2em;
}

#container #main #clinic_main dl dd p a {
	text-transform:lowercase;
}

#container #main #clinic_main dl dd p a:hover {
	text-decoration:none;
	color:#f173ac;
}

#container #main #clinic_main dl .more {
	border:none;
	padding-top:0px;
}

#container #main #clinic_main dl .more a {
	float:right;
	padding-left:14px;
	background:url(../img/list2.gif) left bottom no-repeat;
	text-decoration:none;
	font-size:1.2em;
	line-height:12px;
	color:#4A3483;
}

#container #main #clinic_main dl .more a:hover {
	border:none;
	background:url(../img/list2_h.gif) left bottom no-repeat;
	color:#F287B7;
}