@charset "UTF-8";
@import "reset.css";
/* =======================================

    tabata-dent.com
    layouts.css

 -----------------------------------------
  INDEX
 -----------------------------------------
  01. Universal Setting

  02. Header

  03. Global Navigation
 
  04. Main Contents

  05. Sub Contents(Right Sidebar)

  06. Footer

  07. Home Page Styles

  08. Sub Page Styles
  	
		08-01. Greeting
		08-02. Diet
		08-03. Chiropractic
		08-04. FAQ
		08-05. Access
		08-06. Topics
		08-07. diaryPro admin 

  09. Miscellaneous

  10. Clearfix

========================================== */


/* 01. Universal Setting
========================================== */
body {
    text-align: center;
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
    line-height: 1.75;
    color: #252525;
    font-size: 16px;
	background:#fff url(../images/foil_@2X.png);
	background-size:8px 8px;
		-webkit-background-size:8px 8px;
		-moz-background-size:8px 8px;
}
img {
    vertical-align: bottom;
}
a {
    color: #82a74d;
    text-decoration:none;
}
a:hover {
	color:#95b468;
    text-decoration:underline;
}


/* 02. Header
========================================== */
#header{
	width:100%;
	background:#fff;
}
#header-inner{
	width:1080px;
	height:100px;
	margin:0 auto;
	text-align:left;
	position:relative;
	font-size:80%;
}
#header #site-desc{
	padding-top:15px;
	color:#333;
}
#header #site-title{
	padding-top:8px;
	margin-left:1px;
}
#header .tel{
	position:absolute;
	top:17px;
	right:0;
}
#btn-menu{
	display:none;
}

/* 03. Global Navigation
========================================== */
#gnav{
	width:100%;
	height:62px;
	background:url(../images/gnav_bk.jpg) repeat-x;
	display:block;
}
#jPanelMenu-menu{
	display:none;
}
#gnav ul{
	width:1080px;
	margin:0 auto;
}
#gnav li{
	float:left;
}
#gnav a span{
	display:none;
}
div#main-visual{
	width:1050px;
	margin:15px auto 25px auto;
}


/* 04. Main Contents
========================================== */
#shadow{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:12px;
	background:url(../images/shadow_bk.png) repeat-x;
}
#container{
	width:100%;
	padding:30px 0 90px 0;
	position:relative;
}
#main{
	width:1018px;
	margin:0 auto;
	padding:30px;
	background:#fff;
	border:1px solid #e8e8e8;
	border-radius:12px;
	box-shadow:0 0 6px rgba(0,0,0,0.1);
}
#content-wrapper{
	width:940px;
	text-align:left;
	margin:0 auto;
	padding:40px 0 40px 0;
	font-size:95%;
}
#main h2{
	margin-bottom:30px;
}
#main h3{
	font-size:120%;
	font-weight:bold;
	margin:50px 0 20px 0;
	padding:10px 10px 10px 15px;
	color:#00a3d8;
	letter-spacing:1px;
	background:url(../images/heading_bk.gif);
	border-left:7px solid #00a3d8;
}
#main h4{
	font-size:110%;
	font-weight:bold;
	margin:30px 0 10px 0;
	color:#00a3d8;
	border-bottom:1px dotted #aaa;
}
.box{
	width:1038px;
	padding:20px;
	background:#fff;
	border:1px solid #e8e8e8;
	border-radius:12px;
	box-shadow:0 0 6px rgba(0,0,0,0.1);
	margin-bottom:30px;
}
.box.catch{
	width:998px !important;
	padding:40px 40px 35px 40px !important;
	font-size:100% !important;
	line-height:1.85 !important;
}
.box.catch .leftcolumn{
	width:650px;
	float:left;	
}
.box.catch .rightcolumn{
	width:300px;
	float:right;
}
ul.col3{
	margin-bottom:30px;
}
ul.col3 li{
	float:left;
	background:#fff;
	border:1px solid #e8e8e8;
	border-radius:10px;
	box-shadow:0 0 6px rgba(0,0,0,0.1);
	margin-right:30px;
	width:298px;
	padding:15px 20px;
	font-size:80%;
	line-height:1.5;
	position:relative;
}
ul.col3 li.last{
	margin-right:0;
}
ul.col3 li img{
	float:right;
	padding:3px 0 0 5px;
}
ul.col3 li p.link{
	position:absolute;
	top:20px;
	right:18px;
}
.info .leftcolumn{
	width:234px;
	float:left;
	padding-left:5px;
}
.info .rightcolumn{
	width:765px;
	float:right;
}
.heading{
	color:#00a3d8;
	font-weight:bold;
	padding-right:1em;
}
.tel-num{
	font-size:130%;
	font-weight:bold;
}
table.timetable{
	border:none;
	width:100%;
	margin-top:-0.5em;
	font-size:90%;
}
.timetable td, .timetable th{
	text-align:center;
	border:none;
	width:10.72%;
}
.timetable th{
	background:#e6e7e2;
	color:#000;
	border-right:1px solid #fff;
	padding:3px 0;
}
.timetable th.end{
	border-right:1px solid #e6e7e2;
}
	
.timetable th.row-heading{
	background:#f0ede1;
	border-top:1px solid #fff;
	width:25%;
	border-right:none;
}
.timetable th.row-heading.end{
	border-bottom:1px dotted #f0ede1;
}
.timetable td{
	border-right:1px dotted #aaa;
	border-bottom:1px dotted #aaa;
	color:#555;
}
.available{
	font-size:160%;
	color:#00a3d9;
}
td.blank{
	border:none;
}


/* 06. Footer
========================================== */
#footer{
	width:100%;
	background:#5cb1cd;
}
#footer-inner{
	width:1080px;
	font-size:80%;
	margin:0 auto;
	padding:30px 0 60px 0;
	text-align:left;
	position:relative;
}
#footer-inner a{
	color:#fff;
	text-decoration:none;
}
#footer-inner a:hover{
	text-decoration:underline;
}
#footer-inner li{
	float:left;
	padding-right:25px;
}
#footer-inner li a{
	background:url(../images/footer_link_marker.gif) no-repeat 0 45%;
	padding-left:20px;
}
#footer-inner hr{
	border:none;
	border-top:1px solid #4a8ea4;
	box-shadow:0 -1px 0 #85c5da;
	margin:30px 0;
}
.footer-tel{
	margin-top:10px;
}
p#copyright{
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
	font-size:85%;
	letter-spacing:1px;
	position:absolute;
	bottom:55px;
	right:0;
}
p#copyright span{
	text-transform:uppercase;
	padding:0 0.5em;
}
/* 07. Home Page Styles
========================================== */
#home #container{
	padding:50px 0 90px 0;
}
#home #main{
	width:1080px;
	padding:0;
	text-align:left;
	border:none;
	border-radius:0;
	box-shadow:none;
	margin-bottom:0;
	background:none;
}
#home .box.catch h2{
	margin-bottom:30px !important;
}
#home h3{
	font-size:125%;
	color:#00a3d8;
	font-weight:bold;
	background:url(../images/heading_marker.jpg) no-repeat 0 45%;
	padding:2px 0 2px 22px !important;
	border-left:none;
	border-bottom:1px dotted #ccc;
	margin:0 0 10px 0 !important;
}
#home .info h2{
	font-size:115%;
	color:#00a3d8;
	font-weight:bold;
	background:url(../images/heading_marker.jpg) no-repeat 0 45%;
	padding:2px 0 2px 22px;
	border-bottom:1px dotted #ccc;
	margin-bottom:25px;
	letter-spacing:2px;
}
#mainvisual{
	width:100%;
	height:420px;
	margin:0 auto;
	background:#f8f8f5;
	position: relative;
}
#mainvisual-inner {
	position: relative;
	width: 100%;
	overflow: hidden;
}
#mainvisual-inner .img {
	position: absolute;
	display: none;
	width: 1280px;		/* 画像の幅 */
	margin-left: -640px;	/* -(画像の幅÷2) */
	padding-left: 50%;
	top: 0;
}
#mainvisual-inner .img:first-child {
	position: relative;
	display: block;
}
#mainvisual-btn {
	display:block;
	width: 100%;
	height: 10px;
	margin-top: 25px;
	text-align: center;
}
#mainvisual-btn div {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 8px;
	overflow: hidden;
	vertical-align: top;
	
}
#mainvisual-btn a {
	display: block;
	width: 10px;
	height: 20px;
	z-index:9999;
}
#mainvisual-btn a:link,
#mainvisual-btn a:visited {
	margin-top: 0px;
}
#mainvisual-btn a:hover,
#mainvisual-btn a:active,
#mainvisual-btn a.current {
	margin-top: -10px;
}
#mainvisual-btn a img {
	vertical-align: top;
}
#mainvisual-arrow {
	position: absolute;
	z-index: 200;
	width: 100%;
	top: 48%;
	left: 0;
	margin-top: 0px;
}
#mainvisual-arrow-inner {
	position: relative;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}
#mainvisual-arrow .prev,
#mainvisual-arrow .next {
	position: absolute;
	width: 27px;
	height: 27px;
	overflow: hidden;
}
#mainvisual-arrow .prev {
	left: -35px;
     top: 0;
}
#mainvisual-arrow .next {
	right: -35px;
     top: 0;
}
#mainvisual-arrow a {
	display: block;
	width: 27px;
	height: 54px;
}
#mainvisual-arrow a:link,
#mainvisual-arrow a:visited {
	margin-top: 0px;
}
#mainvisual-arrow a:hover,
#mainvisual-arrow a:active {
	margin-top: -27px;
}
#mainvisual-arrow a img {
	vertical-align: top;
}	


/* 08. Lower Page Styles
========================================== */

/* 08-01. Access
	---------------------------------------- */
#access #main h2{
	color:#00a3d8;
	font-weight:bold;
	font-size:150%;
	letter-spacing:1px;
	margin-bottom:20px;
	border-bottom:1px dotted #aaa;
}
#access dt{
	color:#00a3d8;
	font-weight:bold;
	clear:both;
	float:left;
	padding-right:2em;
}
#access dd{
	float:left;
}


/* 08-01. Dental Surgery
	---------------------------------------- */
#surgery .leftcolumn{
	width:690px;
	float:left;
}
#surgery .rightcolumn{
	width:200px;
	float:right;
}
#surgery .leftcolumn2{
	width:185px;
	float:left;
}
#surgery .rightcolumn2{
	width:735px;
	float:right;
}
#surgery .wrapper2{
	margin-top:30px;
}
#surgery #main .wrapper2 h4{
	margin-top:0;
}

	/* 08-01. Denture
	---------------------------------------- */
	#denture .attention-box{
	width:520px;
	margin:0 auto;
	padding:20px;
}
#denture .wrapper .leftcolumn{
	width:620px;
	float:left;
}
#denture .wrapper .rightcolumn{
	width:300px;
	float:right;
}
#denture .attention-box .leftcolumn{
	width:120px;
	float:left;
}
#denture .attention-box .rightcolumn{
	width:380px;
	float:right;
}
	
	
	/* 08-02. Equipment
	---------------------------------------- */
	#equipment .leftcolumn{
	width:350px;
	float:left;
}
#equipment .rightcolumn{
	width:560px;
	float:right;
}
ul.photo{
	margin-top:20px;
}
ul.photo li{
	float:left;
	margin-right:30px;
}
	
	
	/* 08-03. Greeting
	---------------------------------------- */
	span.name{
	font-size:160%;
	font-weight:bold;
	color:#00a3d8;
	letter-spacing:2px;
}
span.name-en{
	font-family:Arial, Helvetica, sans-serif;
	font-size:85%;
	color:#151515;
}
.certificate{
	margin-top:1em;
}
#greeting .leftcolumn{
	width:250px;
	float:left;
}
#greeting .rightcolumn{
	width:610px;
	float:right;
}
	
	
	/* 08-04. Implant
	---------------------------------------- */
	#implant #main h3{
	margin-top:30px;
}
#implant .leftcolumn{
	width:660px;
	float:left;
}
#implant .rightcolumn{
	width:240px;
	float:right;
}
#implant .leftcolumn2{
	width:740px;
	float:left;
}
#implant .rightcolumn2{
	width:180px;
	float:right;
	padding-top:5px;
}
#implant dl.price{
	margin-top:10px;
}
#implant dl.price dt{
	background:#00a3d8;
	color:#fff;
	padding:10px 15px;
	float:left;
}
#implant dl.price dd{
	background:#eaf7fb;
	padding:10px 20px;
	float:left;	
}
#implant dl.price dd span{
	color:#ec1d12;
	font-weight:bold;
}
#implant dl.price dd span span{
	font-size:70%;
}
	
	
	/* 08-05. Information
	---------------------------------------- */
	#information .leftcolumn{
	width:170px;
	float:left;
}
#information .rightcolumn{
	width:690px;
	float:right;
	padding-top:10px;
}
	
	
	/* 08-06. Whitening
	---------------------------------------- */
	#whitening .leftcolumn{
	width:690px;
	float:left;
}
#whitening .rightcolumn{
	width:200px;
	float:right;
}
	


/* 09. Miscellaneous
========================================== */
ul.list{
	margin:20px 0 10px 20px;
}
ul.list li{
	font-size:105%;
	background:url(../images/list_marker.gif) no-repeat 0 50%;
	padding-left:30px;
	margin-bottom:0.5em;
}
.attention-box{
	background:#eaf7fb;
	padding:30px;
	border-radius:4px;
}
p#page-top{
	position:absolute;
	right:0;
	top:-32px;
}
p.map{
	margin-left:95px;
}
p.note{
	color:#cc1b10;
	line-height:1.55;
	margin-top:10px;
}
p.btn{
	text-align:center;
	margin-top:20px;
}
.btn a{
	display:inline-block;
	background:#00a3d9 url(../images/button_marker.gif) no-repeat 40px 50%;
	color:#fff;
	font-weight:bold;
	text-decoration:none;
	padding:15px 40px 15px 65px;
	border-radius:4px;
}
.btn a:hover{
	opacity:0.75;
}
.hidden{
	position:absolute;
	left:-9999px;
}
p.link a{
	background:url(../images/link_marker.gif) no-repeat 0 45%;
	padding-left:20px;
}
	


/* 10. Clearfix
========================================== */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* End hide from IE-mac */