@charset "UTF-8";
@import "base.css";

/*=======================TOC=======================*/
/*                                                 */
/*                   Base                          */
/*                   Container                     */
/*                   Header                        */
/*                   Navigation                    */
/*                   Footer                        */
/*                   Contents                      */
/*                   Index                         */
/*                   Concept                       */
/*                   Clinic                        */
/*                   Treatment                     */
/*                   Implant                       */
/*                   Ortho                         */
/*                   Esthe                         */
/*                   Whitening                     */
/*                   D2D (Door to Door)            */
/*                   Access                        */
/*                   Sitemap                       */
/*                                                 */
/*=======================TOC-END===================*/

/*====================COLOR SCHEME=================*/
/*                                                 */
/*        Main Color - White          #ffffff      */
/*        Main Color - Turquoise      #029eb7      */
/*        Main Color - Blue           #0a4fb4      */
/*                                                 */
/*        Sub Color - Black           #000000      */
/*                                                 */
/*==================COLOR SCHEME-END===============*/


/*---------- Base -----------*/

/*-- 冒頭の @import で外部CSSを読み込み --*/


body { background: url(../images/bg.jpg) center top repeat; }


/*---------- Container -----------*/


#wrapper {
	width: 800px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	background: #fff url(../images/wrapper_bg.jpg) 0 0 repeat-y;
	color: #333322;
	}

#main {
	clear: both;
	margin: 0;
	padding: 36px 0 0 0;
	background: url(../images/main_bg.gif) 0 0 no-repeat;
	}

#container {
	width: 629px;
	float: left;
	}

#content {
	margin: 0 10px 0 40px;
	padding: 0;
	line-height: 1.6;
	}



/*---------- Header -----------*/

#header {
	background: url(../images/header_bg.jpg) 0 0 no-repeat;
	width: 629px;
	height: 130px;
	padding-top: 20px;
	}
* html #header { height: 150px; }

#header .alpha {
	float: left;
	width: 272px;
	}
#header .beta {
	float: left;
	width: 350px;
	}
	
#header h1 {
	text-indent: -9999px;
	margin: 0;
	padding: 0;
	line-height: 1.0;
	background: url(../images/h1_logo.jpg) 0 0 no-repeat;
	}
#header h1 a {
	display: block;
	height: 101px;
	}

#header p#clinic_ja {
	text-indent: -9999px;
	height: 70px;
	margin: 0;
	padding: 0;
	background: url(../images/clinic_ja.jpg) 0 0 no-repeat;
	}

#header ul#header_menu {
	width: 345px;
	height: 37px;
	list-style: none;
	margin: 8px 0 0 2px;
	padding: 0;
	}
#header ul#header_menu li {
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	float: left;
	}

ul#header_menu li#nav02 a {
	width: 88px;
	height: 37px;
	display: block;
	background: url(../images/header_navi.png) 0 0 no-repeat;
	}
ul#header_menu li#nav03 a {
	width: 51px;
	height: 37px;
	display: block;
	background: url(../images/header_navi.png) -88px 0 no-repeat;
	}
ul#header_menu li#nav04 a {
	width: 53px;
	height: 37px;
	display: block;
	background: url(../images/header_navi.png) -139px 0 no-repeat;
	}
ul#header_menu li#nav05 a {
	width: 87px;
	height: 37px;
	display: block;
	background: url(../images/header_navi.png) -192px 0 no-repeat;
	}
ul#header_menu li#nav06 a {
	width: 66px;
	height: 37px;
	display: block;
	background: url(../images/header_navi.png) -279px 0 no-repeat;
	}

/*---------- Navigation -----------*/

#navi {
	width: 171px;
	float: right;
	background: url(../images/navigation_bg.jpg) 0 0 no-repeat;
	}

#navi p {
	margin: 90px 0 0 15px;
	padding: 0;
	text-indent: -9999px;
	background: url(../images/navi_tel.png) 0 0 no-repeat;
	height: 16px;
	}

#navi ul,
#navi ol,
#navi li {
	list-style: none;
	margin: 0;
	padding: 0;
	}

#navi ul li#nav07 { margin: 18px 0 4px 84px; }
#navi ul li#nav07 a {
	text-indent: -9999px;
	display: block;
	height: 18px;
	background: url(../images/navi_home.png) 0 0 no-repeat;
	}

#navi ol {
	width: 122px;
	height: 270px;
	margin-left: 18px;
	}
#navi ol li { text-indent: -9999px; }
#navi ol li a {
	display: block;
	height: 30px;
	}

#navi li#nav08 a { background: url(../images/navigation.png) 0 0 no-repeat; }
#navi li#nav09 a { background: url(../images/navigation.png) 0 -30px no-repeat; }
#navi li#nav10 a { background: url(../images/navigation.png) 0 -60px no-repeat; }
#navi li#nav11 a { background: url(../images/navigation.png) 0 -90px no-repeat; }
#navi li#nav12 a { background: url(../images/navigation.png) 0 -120px no-repeat; }
#navi li#nav13 a { background: url(../images/navigation.png) 0 -150px no-repeat; }
#navi li#nav14 a { background: url(../images/navigation.png) 0 -180px no-repeat; }
#navi li#nav15 a { background: url(../images/navigation.png) 0 -210px no-repeat; }
#navi li#nav16 a { background: url(../images/navigation.png) 0 -240px no-repeat; }

#navi li#nav08 a:hover { background: url(../images/navigation.png) -122px 0 no-repeat; }
#navi li#nav09 a:hover { background: url(../images/navigation.png) -122px -30px no-repeat; }
#navi li#nav10 a:hover { background: url(../images/navigation.png) -122px -60px no-repeat; }
#navi li#nav11 a:hover { background: url(../images/navigation.png) -122px -90px no-repeat; }
#navi li#nav12 a:hover { background: url(../images/navigation.png) -122px -120px no-repeat; }
#navi li#nav13 a:hover { background: url(../images/navigation.png) -122px -150px no-repeat; }
#navi li#nav14 a:hover { background: url(../images/navigation.png) -122px -180px no-repeat; }
#navi li#nav15 a:hover { background: url(../images/navigation.png) -122px -210px no-repeat; }
#navi li#nav16 a:hover { background: url(../images/navigation.png) -122px -240px no-repeat; }

#navi dl#group { margin: 30px 0 24px 17px; }
#navi dl#group dt {
	text-indent: -9999px;
	background: url(../images/group_title.png) 0 0 no-repeat;
	height: 20px;
	margin-left: 20px
	}
#navi dd#nav17 { margin: 0 0 3px 0; }
#navi dd#nav18 { margin: 0 0 3px 0; }
#navi li#nav19 { margin: 0 0 3px 17px; }

#navi .nav-info { width:115px;
height:280px;
border:1px solid #0099CC;
margin-left:18px;
line-height:140%;
padding-left:3px;
padding-right:0px;
margin-top:10px;
margin-bottom:10px;
}

/*---------- Footer -----------*/

#footer {
	clear: both;
	background: url(../images/footer_bg.jpg) 0 0 no-repeat;
	height: 60px;
	width: 800px;
	font-size: 77%;
	color: #88889c;
	position: relative;
	}

ul#footer_menu {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 24px;
	right: 198px;
	}
ul#footer_menu li { display: inline; }

#footer address {
	position: absolute;
	bottom: 4px;
	right: 198px;
	color: #fff;
	}

/*---------- Contents -----------*/

a { color: #0a4fb4; }
a:hover { color: #029eb7; }

h2 {
	text-indent: -9999px;
	height: 30px;
	}

h3 {
	text-indent: -9999px;
	height: 29px;
	}

h4 {
	margin: 16px 0 12px 12px;
	padding: 0 0 0 6px;
	border-left: 6px solid #3383b6;
	line-height: 1.0;
	font-size: 107%;
	font-weight: bold;
	}

.section {
	background: url(../images/section_bg.png) bottom repeat-x;
	margin: 21px 0;
	position: relative;
	padding-bottom: 30px;
	}

.section p,
.section ul,
.section ol,
.section dl,
.section address {
	margin: 16px 10px 0 10px;
	padding: 0;
	}

.section p.to_top {
	clear: both;
	text-align: right;
	line-height: 1.0;
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 0;
	right: 0;
	}
.section p.to_top img { display: block; }

img.photo {
	background: url(../images/img_bg.png) 0 0 no-repeat;
	padding: 6px;
	display: block;
	}

img.image_r {
	float: right;
	margin: 0 0 16px 16px;
	}
img.image_l {
	float: left;
	margin: 0 16px 16px 0;
	}

.center { text-align: center; }


/*---------- Index -----------*/

#index #main { padding-top: 12px; }

#index #content .alpha {
	width: 266px;
	float: left;
	}
#index #content .beta {
	width: 266px;
	margin: 21px 0 0 0;
	float: right;
	position: relative;
	}

#index #content .gamma {
	width: 266px;
	margin: 0;
	float: right;
	}

#index h2 { height: 32px; }
#index h2#title01 { background: url(../images/h2_index02.png) 0 0 no-repeat; }
#index h2#title02 { background: url(../images/h2_index03.png) 0 0 no-repeat; }

#index h3 {
	text-indent: 0;
	color: #3184b6;
	margin: 12px 16px 6px 16px;
	height: 1em;
	}

#index .lead {
	background: url(../images/index_lead_bg.jpg) top center no-repeat;
	padding: 192px 16px 0 16px;
	}

#index #content .alpha { padding-bottom: 18px; }
#index #content .beta { padding-bottom: 32px; }
#index #content .gamma { padding-bottom: 16px; }

#index .section { padding-bottom: 0; }

#index .section p.description { margin: 12px 16px 0 16px; }

#index .section address {
	margin: 0 0 12px 16px;
	padding-bottom: 30px;
	line-height: 1.3;
	background: url(../images/aeon_logo.jpg) bottom left no-repeat;
	}

#index .section dl { margin: 0 16px 20px 16px; }
#index .section dl dt {
	width: 3em;
	float: left;
	}
#index .section dl dd { margin-left: 3em; }

.section p.detail {
	clear: both;
	text-align: right;
	line-height: 1.0;
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 0;
	right: 0;
	}
.section p.detail img { display: block; }


/*---------- Concept -----------*/

#concept h2#title01 { background: url(../images/h2_concept01.png) 0 0 no-repeat; }
#concept h3#title02 { background: url(../images/h3_concept02.png) 0 0 no-repeat; }

#concept .vcard dl { margin: 0 0 16px 16px; }
#concept .vcard dl dt {
	margin: 0;
	padding: 0;
	float: left;
	width: 3em;
	}
#concept .vcard dl dd { margin-left: 4em; }

dl.cv dt {
	float: left;
	width: 6em;
	margin: 0;
	padding: 0;
	}
dl.cv dd {
	margin-left: 5em;
	}


/*---------- Clinic -----------*/

#clinic h2#title01 { background: url(../images/h2_clinic01.png) 0 0 no-repeat; }

#clinic .section { padding-bottom: 20px; }

#clinic #content .alpha {
	width: 220px;
	float: left;
	}
#clinic #content .beta {
	width: 290px;
	float: right;
	}


/*---------- Treatment -----------*/

#treatment h2#title01 { background: url(../images/h2_treatment01.png) 0 0 no-repeat; }
#treatment h3#title02 { background: url(../images/h3_treatment02.png) 0 0 no-repeat; }
#treatment h3#title03 { background: url(../images/h3_treatment03.png) 0 0 no-repeat; }
#treatment h3#title04 { background: url(../images/h3_treatment04.png) 0 0 no-repeat; }
#treatment h3#title05 { background: url(../images/h3_treatment05.png) 0 0 no-repeat; }
#treatment h3#title06 { background: url(../images/h3_treatment06.png) 0 0 no-repeat; }

#treatment .section { padding-bottom: 20px; }

/*---------- Implant -----------*/

#implant h2#title01 { background: url(../images/h2_implant01.png) 0 0 no-repeat; }
#implant h3#title02 { background: url(../images/h3_implant02.png) 0 0 no-repeat; }
#implant h3#title03 { background: url(../images/h3_implant03.png) 0 0 no-repeat; }
#implant h3#title04 { background: url(../images/h3_implant04.png) 0 0 no-repeat; }

#implant #content ol {
	list-style-position: outside;
	margin-left: 18px;
	}
#implant #content ol h4 {
	margin: 0;
	padding: 0;
	border: none;
	}
#implant #content ol li {
	padding: 0;
	margin-left: 16px;
	}
#implant #content ol li p {
	margin: 6px 6px 18px 0;
	padding: 0;
	}

#implant .case img {
	float: left;
	margin: 0 6px 12px 0;
	}

#implant .case img.arrow { margin-top: 45px; }

p.caption { clear: both; }

/*---------- Ortho -----------*/

#ortho h2#title01 { background: url(../images/h2_ortho01.png) 0 0 no-repeat; }
#ortho h3#title02 { background: url(../images/h3_ortho02.png) 0 0 no-repeat; }
#ortho h3#title03 { background: url(../images/h3_ortho03.png) 0 0 no-repeat; }


/*---------- Esthe -----------*/

#esthe h2#title01 { background: url(../images/h2_esthe01.png) 0 0 no-repeat; }
#esthe h3#title02 { background: url(../images/h3_esthe02.png) 0 0 no-repeat; }


/*---------- Whitening -----------*/

#whitening h2#title01 { background: url(../images/h2_whitening01.png) 0 0 no-repeat; }
#whitening h3#title02 { background: url(../images/h3_whitening02.png) 0 0 no-repeat; }
#whitening h3#title03 { background: url(../images/h3_whitening03.png) 0 0 no-repeat; }

#whitening p.case {
	width: 480px;
	margin: 16px auto 0 auto;
	background: url(../images/arrow.png) center center no-repeat;
	}


/*---------- D2D -----------*/

#d2d h2#title01 { background: url(../images/h2_d2d01.png) 0 0 no-repeat; }
#d2d h3#title02 { background: url(../images/h3_d2d02.png) 0 0 no-repeat; }

#d2d #content dl dt {
	margin: 16px 0 12px 12px;
	padding: 0 0 0 6px;
	border-left: 6px solid #3383b6;
	line-height: 1.0;
	font-size: 107%;
	font-weight: bold;
	}
#d2d #content dl dd { margin-bottom: 24px; }

#d2d p.contact {
	font-weight: bold;
	color: #0a4fb4;
	text-align: right;
	margin: 12px 16px 16px 0;
	}


/*---------- Access -----------*/

#access h2#title01 { background: url(../images/h2_access01.png) 0 0 no-repeat; }
#access h2#title02 { background: url(../images/h2_access02.png) 0 0 no-repeat; }

#access dl.adr { margin-left: 0; }

#access dl.adr dt {
	width: 4.7em;
	float: left;
	}
#access dl.adr dd { margin-left: 4.7em; }

#access table.officehour {
	color: #333322;
	margin: 16px 0 16px 16px;
	border: 1px solid #e6e6e6;
	border-collapse: collapse;
	width: 266px;
	float: left;
	}
#access table.officehour th,
#access table.officehour td {
	padding: 3px 12px;
	border-top: 1px solid #e6e6e6;
	border-left: 1px solid #e6e6e6;
	text-align: center;
	}
#access table.officehour th {
	background: #e6e6e6;
	border-top: 1px solid #fff;
	}
	
#access #content .reserve {
	width: 266px;
	margin: 0;
	float: right;
	padding-bottom: 18px;
	}


/*---------- Sitemap -----------*/

#sitemap h2#title01 { background: url(../images/h2_sitemap01.png) 0 0 no-repeat; }

#sitemap #content dl dt {
	margin: 16px 0 12px 12px;
	padding: 3px 0 2px 21px;
	background: url(../images/link.png) center left no-repeat;
	line-height: 1.0;
	font-size: 107%;
	font-weight: bold;
	}
#sitemap #content dl dd { margin-bottom: 4px; }