@charset "UTF-8";

/* CSS Infomation --------------------

K's clinic 皮ふ科ウェブサイト

File name: common.css
description: このウェブサイト共通のスタイルです。
Date: 2009/07/23
Editors: Sayoko Nishimura, Wataru Shitami
Table of contents:

	*reset style
		*layout
		*font
	*default style
	*common style
		*header
		*container
		*footer

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

/* Update history --------------------

Date: 2009/07/23
Last editor: Wataru Shitami
Contents of update: -

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



/* reset style - layout */

html {
	color: #000;
	background: #FFF;
	overflow: scroll;
	overflow: -moz-scrollbars-vertical;     /* 短いページで縦スクロールバー領域が表示されない設定をリセット */
	overflow-x: scroll;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset, img { border: 0; }

li { list-style: none; }

caption, th { text-align: left; }

th { vertical-align: baseline; }

/* reset style - fonts */

body {
	font-size: 11px;
	line-height: 1.6;
}

select, input, button, textarea { font: 99%; }

table {
	font-size: inherit;
	font: 100%;
}

address, caption, em, strong, th {
	font-style:normal;
	font-weight:normal;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}

input, textarea, select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

input, textarea, select { *font-size: 100%;
}

/* default style */

body { font-family: Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, Arial, Helvetica, sans-serif; }

a {
	color: #000000;
	text-decoration: none;
}

a:visited { text-decoration: none; }

a:hover {
	color: #E4007F;
	text-decoration: underline;
}

a:active { color: #333333; }

.offleft {
	text-indent: -9999px; /*テキストを画面外へ飛ばす*/
	overflow: hidden; /*Firefoxで点線が画面外まで表示される設定を回避*/
}

.offleft-none { /*オフレフトしてもスペースが残る場合*/
	width: 0;
	height: 0;
	text-indent: -9999px;
	overflow: hidden;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix { min-height: 1px; }

*html .clearfix { height: 1px; }

#outline {
	width: 798px;
	margin: 0 auto;
	background: url(images/back.jpg) repeat-y;
}

/* common style - header */

#header {
	width: 780px;
	height: 210px;
	margin: 0 auto;
	position: relative;
}

h1 a {
	display: block;
	width: 290px;
	height: 100px;
	background: url(images/h1.jpg) no-repeat;
	position: absolute;
	top: 8px;
	left: 0;
}

#description {
	width: 780px;
	height: 7px;
	background-color: #666;
}

#keyvisual {
	position: absolute;
	top: 7px;
	left: 290px;
}

#keyvisual img {
	width: 490px;
	height: 100px;
}

#header-nav {
	width: 780px;
	height: 37px;
	border-top: 1px dotted #CCC;
	border-bottom: 1px dotted #CCC;
	background: url(images/menu-back.gif) repeat-x 0 0;
	position: absolute;
	top: 107px;
	left: 0;
}

#header-nav li {
	float: left;
}

#header-nav a {
	display: block;
	height: 27px;
	text-align: center;
	padding-top: 10px;
}

#header-nav a:hover {
	color: #E4007F;
	text-decoration: none;
	background: url(images/menu-back.gif) repeat-x 2px -37px;
}

#header-nav span {
	color: #999;
	float: right;
}

#home {
	width: 80px;
	position: relative;
}

#home span {
	color: #999;
	float: right;
	position: absolute;
	top: 10px;
	left: 78px;
}

#doctor {
	width: 90px;
	position: relative;
}

#doctor span {
	color: #999;
	float: right;
	position: absolute;
	top: 10px;
	left: 88px;
}

#about {
	width: 120px;
	position: relative;
}

#about span {
	color: #999;
	float: right;
	position: absolute;
	top: 10px;
	left: 118px;
}

#contact {
	width: 114px;
	position: relative;
}

#contact span {
	color: #999;
	float: right;
	position: absolute;
	top: 10px;
	left: 112px;
}

#request {
	width: 92px;
	position: relative;
}

#request span {
	color: #999;
	float: right;
	position: absolute;
	top: 10px;
	left: 90px;
}

#appoint {
	width: 132px;
	position: relative;
}

#appoint span {
	color: #999;
	float: right;
	position: absolute;
	top: 10px;
	left: 130px;
}

#counsel {
	width: 152px;
	position: relative;
}

#counsel span {
	color: #999;
	float: right;
	position: absolute;
	top: 10px;
	left: 150px;
}

#breadcrumbs {
	font-size: 10px;
	color: #666;
	text-align: right;
	width: 750px;
	padding: 0 15px;
	position: absolute;
	top: 160px;
	left: 0;
}

/* common style - container */

#container {
	width: 780px;
	margin: 0 auto;
}

#left-column {
	width: 180px;
	float: left;
}

#cal-outline {
	width: 179px;
	margin-top: 30px;
}

#cal {
	width: 179px;
	height: 155px;
}

#cal-outline p {
	font-size: 10px;
	color: #666;
	line-height: 130%;
	padding: 0px 10px;
}

li#cosmetic h3, li#dermatology a, #other a {
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 179px;
	height: 47px;
	border: 1px dotted #CCC;
	background: url(images/side-nav.jpg) no-repeat;
	margin-bottom: 15px;
}

li#dermatology a { background-position: -180px 0; }

li#dermatology a:hover { background-position: -180px -50px; }

li#recruit a { background-position: -360px 0;margin-top: 20px; }

li#recruit a:hover { background-position: -360px -50px; }

li#sitemap a { background-position: -540px 0; }

li#sitemap a:hover { background-position: -540px -50px; }

.lv2>a {
	display: block;
	font-size: 12px;
	color: #666;
	width: 162px;
	padding-left: 18px;
	height: 20px;
	padding-top: 9px;
	border-bottom: 1px dotted #CCC;
}

.lv2>a:hover {
	text-decoration: none;
	background: url(images/cosme-back.jpg) no-repeat;
}

.lv2 ul {
	margin-top: 15px;
	margin-bottom: 30px;
	margin-left: 18px;
}

.lv2-link {
	display: block;
	font-size: 12px;
	color: #666;
	width: 162px;
	padding-left: 18px;
	height: 20px;
	border-bottom: 1px dotted #CCC;
	margin-bottom: 60px;
}

.lv2-link ul {
	margin-top: 15px;
	margin-bottom: 30px;
	margin-left: 18px;
}

.lv3 a {
	display: inline-block;
	font-size: 10px;
	line-height: 130%;
	margin-bottom: 10px;
}

#right-column {
	width: 570px;
	float: right;
}

#right-column h2 {
	font-size: 10px;
	height: 18px;
	padding-top: 2px;
	border-bottom: 1px dotted #CCC;
	margin-bottom: 30px;
}

#topics h2 {
	width: 429px;
	padding-left: 126px;
	background: url(images/topics-title.jpg) no-repeat;
}

#recommend h2 {
	width: 374px;
	padding-left: 181px;
	background: url(images/recommend-title.jpg) no-repeat;
}

#infomation h2 {
	width: 366px;
	padding-left: 189px;
	background: url(images/info-title.jpg) no-repeat;
}

.inline { margin-bottom: 50px; }

#topics li { float: left; }

#topics li a {
	display: block;
	width: 178px;
	height: 74px;
	padding-top: 74px;
	background: url(images/topics.jpg) no-repeat;
	margin-right: 10px;
	margin-bottom: 10px;
	position: relative;
}

#topics li a:hover {
	color: #000;
	text-decoration: none;
}

#topics h3 {
	font-size: 14px;
	padding-left: 15px;
	background: url(images/square-gr.jpg) no-repeat 0 3px;
}

#topics p {
	font-size: 10px;
	line-height: 130%;
	width: 158px;
	position: absolute;
	bottom: 10px;
	left: 15px;
}

li#topic01 h3 span,li#topic06 h3 span {
	font-size: 9px;
}

.orange {
	color: #EA5504;
}

li#topic01 p {
	font-size: 12px;
}

li#topic01 a:hover { background-position: 0 -148px; }

li#topic02 a { background-position: -178px 0; }

li#topic02 a:hover { background-position: -178px -148px; }

li#topic03 a { background-position: -356px 0; }

li#topic03 a:hover { background-position: -356px -148px; }

li#topic04 a { background-position: -534px 0;cursor: default; }

li#topic05 a { background-position: -712px 0; }

li#topic05 a:hover { background-position: -712px -148px; }

li#topic06 a { background-position: -890px 0; }

li#topic06 a:hover { background-position: -890px -148px; }

li#topic07 a { background-position: -1068px 0; }

li#topic07 a:hover { background-position: -1068px -148px; }

li#topic08 a { background-position: -1246px 0; }

li#topic08 a:hover { background-position: -1246px -148px; }

#text-menu { margin-bottom: 20px; }

#text-menu li { float: left; }

#text-menu a {
	display: inline-block;
	font-size: 12px;
	padding-left: 15px;
	background: url(images/raquo-bk.jpg) no-repeat 0 6px;
	margin-right: 26px;
}

#text-menu a:hover {
	text-decoration: none;
	background-position: 0 -7px;
}

#image-menu li { float: left; }

#image-menu a {
	display: block;
	width: 176px;
	height: 146px;
	border: 1px dotted #CCC;
	margin-right: 10px;
}

#image-menu a:hover {
	color: #333;
	text-decoration: none;
	border: 1px dotted #999;
}

#image-menu h3 {
	font-size: 12px;
	padding-left: 15px;
	background: url(images/square-gr.jpg) no-repeat 0 2px;
	margin-top: 12px;
	margin-bottom: 10px;
}

#image-menu p {
	font-size: 11px;
	color: #666;
	line-height: 140%;
	margin-left: 15px;
}

#image-menu a:hover p {
	color: #E4007F;
}

#environ a { background: url(images/environ.jpg) no-repeat 10px 90px; }

#lavilin a { background: url(images/lavilin.jpg) no-repeat 90px 75px; }

#medi-soap a { background: url(images/medi-soap.jpg) no-repeat 20px 85px; }

#infomation dl { margin-left: 25px; }

#infomation dt {
	margin-right: 1em;
	float: left;
	display: inline;
}

/* common style - footer */

#footer {
	width: 780px;
	margin: 120px auto 0;
	clear: both;
}

#footer-nav {
	width: 580px;
	height: 22px;
	padding-top: 8px;
	padding-left: 200px;
}

#footer-nav li { float: left; }

#footer-nav a {
	font-size: 10px;
	color: #666;
	margin: 10px;
}

#footer-nav a:hover {
	color: #E4007F;
}

address {
	font-size: 10px;
	color: #FFF;
	text-align: center;
	width: 780px;
	height: 22px;
	padding-top: 8px;
	background-color: #666;
}