@charset "UTF-8";
@import "base.css";

/*=======================TOC=======================*/
/*                                                 */
/*                   Base                          */
/*                   Container                     */
/*                   Header                        */
/*                   Navigation                    */
/*                   Footer                        */
/*                   Contents                      */
/*                   Index                         */
/*                   Staff                         */
/*                   Clinic                        */
/*                   Access                        */
/*                   Implant                       */
/*                   Esthe                         */
/*                   Ortho                         */
/*                   Denture                       */
/*                   Prevent                       */
/*                   Laser                         */
/*                   Sitemap                       */
/*                                                 */
/*=======================TOC-END===================*/

/*====================COLOR SCHEME=================*/
/*                                                 */
/*        Main Color - Turquoise Blue #3db5b4      */
/*        Main Color - Green          #487669      */
/*        Main Color - Light Blue     #6ae9de      */
/*                                                 */
/*        Sub Color - Yellow          #ff9700      */
/*                                                 */
/*==================COLOR SCHEME-END===============*/


/*---------- Base -----------*/

/*-- 冒頭の @import で外部CSSを読み込み --*/



/*---------- Container -----------*/

body { background: #c4fd61 url(../images/bg.png) center 2px repeat; }

#wrapper {
	width: 800px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	background: url(../images/wrapper.png) no-repeat;
	color: #737373;
	position: relative;
	}

#main {
	background: url(../images/main_bg.png) center repeat-y;
	margin: 0;
	padding: 0;
	}

#content {
	margin: 0;
	padding: 0;
	display: inline;
	float: right;
	clear: both;
	width: 600px;
	}


#headtxt{
	padding: 3px 0px;
	margin: 0px;
	color: #487669;
	text-align: left;
	font-size: smaller;
}
/*---------- Header -----------*/

#header {
	background: url(../images/header_bg.png) 0 0 no-repeat;
	height: 120px;
	width: 800px;
	margin: 0;
	padding: 0;
	}

#header .alpha {
	width: 400px;
	float: left;
	padding: 10px 0 0 9px;
	}
#header .beta {
	width: 300px;
	float: right;
	text-align: right;
	padding: 10px 4px 0 0;
	}

h1 {
	display: block;
	width: 237px;
	height: 51px;
	background: url(../images/h1.png) 0 0 no-repeat;
	margin: 0;
	padding: 0;
	height: 51px;
	line-height: 1.0;
	float: left;
	text-indent: -9999px;
	}

#header img#logo {
	display: block;
	float: left;
	margin: 0;
	}

#header address {
	color: #fff;
	font-size: 10px;
	margin: 0 7px 9px 0;
	}

#header p.tel {
	margin: 0;
	padding: 0;
	height: 70px;
	}


/*---------- Navigation -----------*/

#header ul#navigation {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 102px;
	height: 17px;
	float: right;
	text-align: left;
	}
#header ul#navigation li {
	text-indent: -9999px;
	margin: 0;
	padding: 0;
	height: 17px;
	float: left;
	}
ul#navigation li#nav01 a {
	display: block;
	width: 39px;
	height: 17px;
	background: url(../images/header_navi.gif) 0 0 no-repeat;
	}
ul#navigation li#nav02 a {
	display: block;
	width: 63px;
	height: 17px;
	background: url(../images/header_navi.gif) -39px 0 no-repeat;
	}

ul#navigation li#nav01 a:hover { background: url(../images/header_navi.gif) 0 1px no-repeat; }
ul#navigation li#nav02 a:hover { background: url(../images/header_navi.gif) -39px 1px no-repeat; }

#navi {
	width: 200px;
	margin: 0;
	padding: 0;
	float: left;
	background: transparent url(../images/navigation_bg.png) 0 0 no-repeat;
	text-align: center;
	}

#navi ul {
	margin: 0 10px;
	padding: 0;
	list-style: none;
	width: 180px;
	}

#navi ul li {
	text-indent: -9999px;
	margin: 0;
	padding: 0;
	}

#navi ul li a {
	display: block;
	width: 180px;
	}

#navi ul li#nav03 a {
	height: 37px;
	background: url(../images/navigation.png) 0 0 no-repeat;
	}
#navi ul li#nav04 a {
	height: 30px;
	background: url(../images/navigation.png) 0 -37px no-repeat;
	}
#navi ul li#nav05 a {
	height: 30px;
	background: url(../images/navigation.png) 0 -67px no-repeat;
	}
#navi ul li#nav06 a {
	height: 30px;
	background: url(../images/navigation.png) 0 -97px no-repeat;
	}
#navi ul li#nav07 a {
	height: 30px;
	background: url(../images/navigation.png) 0 -127px no-repeat;
	}
#navi ul li#nav08 a {
	height: 30px;
	background: url(../images/navigation.png) 0 -157px no-repeat;
	}
#navi ul li#nav09 a {
	height: 30px;
	background: url(../images/navigation.png) 0 -187px no-repeat;
	}
#navi ul li#nav10 a {
	height: 30px;
	background: url(../images/navigation.png) 0 -217px no-repeat;
	}
#navi ul li#nav11 a {
	height: 30px;
	background: url(../images/navigation.png) 0 -247px no-repeat;
	}
#navi ul li#nav12 a {
	height: 33px;
	background: url(../images/navigation.png) 0 -277px no-repeat;
	}

#navi ul li#nav03 a:hover {
	height: 37px;
	background: url(../images/navigation.png) -180px 0 no-repeat;
	}
#navi ul li#nav04 a:hover {
	height: 30px;
	background: url(../images/navigation.png) -180px -37px no-repeat;
	}
#navi ul li#nav05 a:hover {
	height: 30px;
	background: url(../images/navigation.png) -180px -67px no-repeat;
	}
#navi ul li#nav06 a:hover {
	height: 30px;
	background: url(../images/navigation.png) -180px -97px no-repeat;
	}
#navi ul li#nav07 a:hover {
	height: 30px;
	background: url(../images/navigation.png) -180px -127px no-repeat;
	}
#navi ul li#nav08 a:hover {
	height: 30px;
	background: url(../images/navigation.png) -180px -157px no-repeat;
	}
#navi ul li#nav09 a:hover {
	height: 30px;
	background: url(../images/navigation.png) -180px -187px no-repeat;
	}
#navi ul li#nav10 a:hover {
	height: 30px;
	background: url(../images/navigation.png) -180px -217px no-repeat;
	}
#navi ul li#nav11 a:hover {
	height: 30px;
	background: url(../images/navigation.png) -180px -247px no-repeat;
	}
#navi ul li#nav12 a:hover {
	height: 33px;
	background: url(../images/navigation.png) -180px -277px no-repeat;
	}


/*---------- Footer -----------*/

#footer {
	margin: 0 auto;
	text-align: center;
	padding: 8px 6px 2px 0;
	background: #3cb0b0 url(../images/footer_bg.jpg) center bottom no-repeat;
	font-size: 10px;
	color: #fff;
	width: 794px;
	}

*:first-child+html #footer ul { font-size: 9px; }
* html body #footer { width: 800px; font-size: 9px; }

#footer ul { 
	list-style: none;
	text-align: right;
	margin: 0 10px 2px 0;
	padding: 0;
	clear: both;
	}

#footer ul li { display: inline; }
#footer ul li a { color: #fff; }
#footer ul li a:hover { color: #ff9700; }


#footer p {
	color: #487669;
	text-align: right;
	margin-top: 8px;
	}

/*---------- Contents -----------*/

#main img.main_image {
	display: block;
	margin: 0;
	padding: 0;
	line-height: 1.0;
	}

.contentbody { margin: 0; padding: 12px; }

.contentbody p,
.contentbody ul {
	margin: 12px;
	line-height: 1.6;
	}
.contentbody ul li { margin-left: 12px; }

p.center { text-align: center; }

h2 {
	width: 599px;
	height: 32px;
	text-indent: -9999px;
	}

img.image_l {
	float: left;
	margin: 0 12px 12px 0;
	}
img.image_r {
	float: right;
	margin: 0 0 12px 12px;
	}

p.caution {
	background: url(../images/caution_bg.gif) 0 center no-repeat;
	margin-left: 24px;
	padding-left: 24px;
	}

ul.strong {
	font-weight: bold;
	color: #295cd1;
	}

table {
	font-size: 12px;
	color: #737373;
	}

.notice { color: red; }

/*---------- Index -----------*/

#index h2 { background: url(../images/h2_index.png) 0 0 no-repeat; }

#index .greeting {
	background: url(../images/index_contentbody.jpg) 0 0 no-repeat;
	padding-left: 190px;
	}

#index .greeting p {
	margin: 0;
	padding: 12px;
	background: url(../images/greeting_p_bg.png) left bottom no-repeat;
	}

#index .greeting p.welcome {
	margin: 0;
	padding: 0;
	width: 238px;
	height: 28px;
	float: right;
	text-indent: -9999px;
	background: url(../images/greeting.png) 0 0 no-repeat;
	}

#index h3 { text-indent: -9999px; }

#index h3#title01 {
	height: 23px;
	background: url(../images/h3_index01.png) 0 0 no-repeat;
	}

#index h3#title02 {
	height: 29px;
	background: url(../images/h3_index02.png) 0 0 no-repeat;
	}

#index h4 {
	height: 19px;
	margin: 0 0 0 120px;
	padding: 0;
	text-indent: -9999px;
	}

#index h4#title03 { background: url(../images/h4_index03.jpg) 0 0 no-repeat; }
#index h4#title04 { background: url(../images/h4_index04.jpg) 0 0 no-repeat; }
#index h4#title05 { background: url(../images/h4_index05.jpg) 0 0 no-repeat; }
#index h4#title06 { background: url(../images/h4_index06.jpg) 0 0 no-repeat; }


#index .pickup { background: url(../images/pickup_bg.png) 0 0 no-repeat; }

#index .pickup .menu {
	width: 275px;
	height: 90px;
	float: left;
	margin: 6px 6px 0 0;
	font-size: 10px !important;
	font-size: 9px;
	line-height: 1.2;
	}

#index .pickup #menu01 { background: url(../images/index_menu01.jpg) 0 0 no-repeat; }
#index .pickup #menu02 { background: url(../images/index_menu02.jpg) 0 0 no-repeat; }
#index .pickup #menu03 { background: url(../images/index_menu03.jpg) 0 0 no-repeat; }
#index .pickup #menu04 { background: url(../images/index_menu04.jpg) 0 0 no-repeat; }

#index .pickup .menu p { margin: 6px 6px 9px 120px; }

*:first-child+html #index .pickup .menu p { font-size: 9px; }

#index .pickup .menu p.detail {
	text-align: right;
	margin: 0 6px 0 0;
	padding: 0;
	}


/*---------- Staff -----------*/

#staff h2 { background: url(../images/h2_staff.png) 0 0 no-repeat; }

#staff h3 {
	text-indent: -9999px;
	height: 19px;
	clear:both;
	}
	
#staff h3#title01 { background: url(../images/h3_staff01.png) 0 0 no-repeat; }
#staff h3#title02 { background: url(../images/h3_staff02.png) 0 0 no-repeat; }
#staff h3#title03 { background: url(../images/h3_staff03.png) 0 0 no-repeat; }
#staff h3#title04 { background: url(../images/h3_staff04.png) 0 0 no-repeat; }
#staff h3#title05 { background: url(../images/h3_staff05.png) 0 0 no-repeat; }

#staff h4 {
	font-size: 14px;
	font-weight: bold;
	color: #295cd1;
	letter-spacing: 2px;
	}

#staff #content .alpha {
	width: 200px;
	float: left;
	}
#staff #content .beta {
	margin-left: 200px;
	}

#staff table.cv {
	margin: 1em 2em;
	padding: 0;
	}

#staff table.cv td {
	padding: 2px 4px;
	vertical-align: top;
	}
#staff table.cv td.month {
	padding: 2px 0;
	text-align: right;
	}

#staff ul.association { 
	list-style: none;
	margin: 1em 2em;
	padding: 0;
	}
#staff ul.association li {
	padding: 0;
	margin: 0 0 2px 6px;
	}


/*---------- Clinic -----------*/

#clinic h2 { background: url(../images/h2_clinic.png) 0 0 no-repeat; }

#clinic h3 {
	text-indent: -9999px;
	height: 19px;
	}
	
#clinic h3#title01 { background: url(../images/h3_clinic01.png) 0 0 no-repeat; }
#clinic h3#title02 { background: url(../images/h3_clinic02.png) 0 0 no-repeat; }

#clinic .view {
	width: 240px;
	padding: 0;
	margin: 0 12px 12px 12px;
	text-align: center;
	float: left;
	}

#clinic .view p.caption { margin: 0; }


/*---------- Access -----------*/

#access h2 { background: url(../images/h2_access.png) 0 0 no-repeat; }

#access h3 {
	text-indent: -9999px;
	height: 19px;
	}
	
#access h3#title01 { background: url(../images/h3_access01.png) 0 0 no-repeat; }
#access h3#title02 { background: url(../images/h3_access02.png) 0 0 no-repeat; }

#access dl.access {
	margin: 6px 24px;
	padding: 0;
	}
#access dl.access dt {
	border-left: 4px solid #3dae90;
	padding-left: 6px;
	line-height: 1.0;
	}
#access dl.access dd {
	margin: 8px 0 12px 24px;
	padding: 0;
	}

#access .contentbody address {
	line-height: 1.6;
	width: 200px;
	margin-top: 170px;
	float: left;
	}
#access .contentbody address span.caution {
	display: block;
	background: url(../images/caution_bg.gif) 0 center no-repeat;
	margin: 6px 0 0 0;
	padding-left: 24px;
	}

#access table.officehour {
	margin: 24px;
	float: left;
	border: 1px solid #ddd;
	border-collapse: collapse;
	}
#access table.officehour th,
#access table.officehour td {
	padding: 3px 6px;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	}

#access p.notice { margin-top: 24px; }

/*---------- Implant -----------*/

#implant h2 { background: url(../images/h2_implant.png) 0 0 no-repeat; }

#implant h3 {
	text-indent: -9999px;
	height: 19px;
	}
	
#implant h3#title01 { background: url(../images/h3_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; }


/*---------- Esthe -----------*/

#esthe h2 { background: url(../images/h2_esthe.png) 0 0 no-repeat; }

#esthe h3 {
	text-indent: -9999px;
	height: 19px;
	}
	
#esthe h3#title01 { background: url(../images/h3_esthe01.png) 0 0 no-repeat; }
#esthe h3#title02 { background: url(../images/h3_esthe02.png) 0 0 no-repeat; }
#esthe h3#title03 { background: url(../images/h3_esthe03.png) 0 0 no-repeat; }

p.case { text-align: center; }
p.case img { vertical-align: middle; }


/*---------- Ortho -----------*/

#ortho h2 { background: url(../images/h2_ortho.png) 0 0 no-repeat; }

#ortho h3 {
	text-indent: -9999px;
	height: 19px;
	}
	
#ortho h3#title01 { background: url(../images/h3_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; }


/*---------- Denture -----------*/

#denture h2 { background: url(../images/h2_denture.png) 0 0 no-repeat; }

#denture h3 {
	text-indent: -9999px;
	height: 19px;
	}
	
#denture h3#title01 { background: url(../images/h3_denture01.png) 0 0 no-repeat; }
#denture h3#title02 { background: url(../images/h3_denture02.png) 0 0 no-repeat; }
#denture h3#title03 { background: url(../images/h3_denture03.png) 0 0 no-repeat; }
#denture h3#title04 { background: url(../images/h3_denture04.png) 0 0 no-repeat; }

#denture .contentbody ul {
	margin: 1em 0;
	padding: 0 1em;
	}
#denture .contentbody ul li {
	margin: 0 0 2px 1em;
	padding: 0;
	}

#denture .contentbody .alpha {
	width: 200px;
	float: left;
	}
#denture .contentbody .beta { margin-left: 200px; }

/*---------- Prevent -----------*/

#prevent h2 { background: url(../images/h2_perio.png) 0 0 no-repeat; }

#prevent h3 {
	text-indent: -9999px;
	height: 19px;
	}
	
#prevent h3#title01 { background: url(../images/h3_perio01.png) 0 0 no-repeat; }
#prevent h3#title02 { background: url(../images/h3_perio02.png) 0 0 no-repeat; }
#prevent h3#title03 { background: url(../images/h3_perio03.png) 0 0 no-repeat; }
#prevent h3#title04 { background: url(../images/h3_perio04.png) 0 0 no-repeat; }


/*---------- Laser -----------*/

#laser h2 { background: url(../images/h2_laser.png) 0 0 no-repeat; }

#laser h3 {
	text-indent: -9999px;
	height: 19px;
	}
	
#laser h3#title01 { background: url(../images/h3_laser01.png) 0 0 no-repeat; }
#laser h3#title02 { background: url(../images/h3_laser02.png) 0 0 no-repeat; }


/*---------- Sitemap -----------*/

#sitemap h2 { background: url(../images/h2_sitemap.png) 0 0 no-repeat; }

#sitemap dl {
	margin: 24px;
	padding: 0;
	}
#sitemap dl dt {
	border-left: 4px solid #3dae90;
	padding-left: 6px;
	line-height: 1.0;
	}
#sitemap dl dd {
	margin: 8px 0 12px 24px;
	padding: 0;
	}

#sitemap dl a { color: #487669; }
#sitemap dl a:hover { color: #6ae9de; }



/*---------- table -----------*/
table.fee {
	width: 450px;
	margin: 10px 0 0 50px;
	border: 1px solid #ddd;
	border-collapse: collapse;
	}
table.fee th,
table.fee td {
	padding: 5px 10px;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	}

