@charset "utf-8";

/* -----------------------------------------------------------
	Site Name: Tateno dental clinic
	Author: Yamazen Communications co.,ltd.
	Comment: index.html style
	Since2010
----------------------------------------------------------- */
	
/*Index
	1.common and structure
	2.illst layout
	3.contents
	4.contents promise
	5.contents director
	
----------------------------------------------------------- */

/* 1.common and structure
---------------------------------------------------------------------------------------*/
/* width */
ul#ill{width:800px;}
div#concept,
div#concept h2,
div#concept p,
div#concept a{width:340px;}
div#info{width:415px;}
div#info h2,
div#info p{width:auto;}
div#info a{width:auto;}
div#info span{width:150px;}

ul#promise{width:340px;_width:340px;}
ul#promise li{width:320px;_width:320px;}/*ul-20px*/
ul#promise li h3{width:210px;}
ul#promise li a{width:107px;}
ul#promise li#iso p{width:180px;}
ul#promise li.btn   {width:340px;}
ul#promise li.btn span.gallery,
ul#promise li.btn span.gallery a{width:128px;}
ul#promise li.btn span.faq,
ul#promise li.btn span.faq a{width:182px;}

div#director,
div#director h2,
div#director p{width:415px;}
div#director p.add,
div#director p#profile{width:260px;}






body{
	background:url(../img/top/bkillust.jpg) no-repeat center -20px;
}

div#container{
	background-color:transparent;
}
.top div#header{
	height:420px;
	background:url(../img/bk_gnavi.png) repeat-x center 410px;
}

.top ul#gnavi{
	position:relative;
	height:115px;
	margin-top:255px;
	z-index:1000;
}

.top div#contents{
	_margin-top:-50px;
	background:none;
}

div#concept,
div#info,
ul#promise,
div#director{
	display:inline-block;
	*display:inline;
	margin:0 0 15px 0 ;
	padding:0;
	text-align:left;
	vertical-align:top;
	zoom:1;
}

div#concept{margin-right:35px;_margin-right:30px;}
ul#promise {margin-right:30px;}
div#director{}






/* 2.illst layout
---------------------------------------------------------------------------------------*/
ul#ill{
	margin:0 auto;
}

ul#ill li,
ul#ill li a{
	display:block;
	position:absolute;
}
ul#ill li.director{top:240px;margin-left:300px;}
ul#ill li.nurse   {top:240px;margin-left:370px;}
ul#ill li.family  {top:250px;margin-left:570px;}
ul#ill li.gmapa   {top:250px;margin-left:20px;}


#screenshot{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
	z-index:100000;
	}




/* 3.contents
---------------------------------------------------------------------------------------*/

div#concept h2,
div#info h2{
	height:60px;
	text-indent:-999999px;
	background:url(../img/top/st_standards.jpg) no-repeat left top;
}
div#concept a + h2{
	margin-top:15px;
	background:url(../img/top/st_concept.jpg) no-repeat left top;
}
div#concept p{}

div#concept a,
div#info a{
	display:block;
	margin-top:10px;
	padding-left:10px;
	background:url(../img/arr_green.gif) no-repeat left 0.5em;
}

div#info h2{
	background:url(../img/top/st_info.jpg) no-repeat left top;
}
div#info p span.indent{
	text-indent:5em;
}
div#info span.pic{
	display:block;
	float:right;
	margin-bottom:15px;
	font-size:12px;
	line-height:1.5;
}
div#info span img{
	display:block;
	margin:0 0 3px;
}
div#info span a{
	display:inline;
	padding:0;
	background:none;
}




/* 4.contents promise
---------------------------------------------------------------------------------------*/
ul#promise li{
	margin-bottom:20px;
	*margin-left:-16px;
	padding:10px;
	border:1px #cccccc solid;
}
ul#promise li h3{
	float:left;
	height:25px;
	text-indent:-999999px;
}

ul#promise li#iso       h3{background:url(../img/top/st_iso.gif)       no-repeat left top;}
ul#promise li#smile     h3{background:url(../img/top/st_smile.gif)     no-repeat left top;}
ul#promise li#lazer     h3{background:url(../img/top/st_lazer.gif)     no-repeat left top;}
ul#promise li#whitening h3{background:url(../img/top/st_whitening.gif) no-repeat left top;}
ul#promise li#tooth     h3{background:url(../img/top/st_tooth.gif)     no-repeat left top;}
ul#promise li#implant   h3{background:url(../img/top/st_implant.gif)   no-repeat left top;}

ul#promise li a{
	display:block;
	height:25px;
	_margin-bottom:5px;
	text-indent:-999999px;
	background:url(../img/btn_link.gif) no-repeat right 8px;
}
ul#promise li a:hover{
	background:url(../img/btn_link.gif) no-repeat right -17px;
}

ul#promise li#iso{
	min-height:140px;
	_height:140px;
	background:url(../img/top/iso_bonds.jpg) no-repeat 230px 10px;
}


ul#promise li.btn{
	height:25px;
	margin:0;
	*margin-left:-16px;
	padding:0;
	border:none;
}
ul#promise li.btn span{
	display:inline-block;
	*display:inline;
	height:25px;
	margin:0;
	padding:0;
	zoom:1;
}
ul#promise li.btn span.gallery{
	margin-right:15px;
}
ul#promise li.btn span.faq     a{background:url(../img/top/btn_faq.gif) no-repeat center -2px;}
ul#promise li.btn span.gallery a{background:url(../img/top/btn_facility.gif) no-repeat center top;}

ul#promise li.btn span.faq     a:hover{background:url(../img/top/btn_faq.gif) no-repeat center -27px;}
ul#promise li.btn span.gallery a:hover{background:url(../img/top/btn_facility.gif) no-repeat center -25px;}

	





/* 5.contents director
---------------------------------------------------------------------------------------*/
div#director h2{
	height:52px;
	text-indent:-999999px;
	background:url(../img/top/st_director.jpg) no-repeat left top;
}

div#director p.copy{
	margin:10px 0 15px;
}

div#director p#profile{
	min-height:401px;
	_height:401px;
	margin-top:-70px;
	padding:150px 155px 0 0;
	background:url(../img/top/director.png) no-repeat right top;
}