@charset "UTF-8";

* {
	margin:0;
	padding:0;
	line-height:1.6;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:12px;
	list-style-type:none;
}

/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

.fade {
	-webkit-transition: 0.4s ease-in-out; 
	-moz-transition: 0.4s ease-in-out; 
	-ms-transition: 0.4s ease-in-out; 
	-o-transition: 0.4s ease-in-out;  
	transition: 0.4s ease-in-out;  
}
.fade:hover {
	opacity: 0.8;  
    filter: alpha(opacity=60);  
}


/* ------ 基本レイアウト------ */

html {
overflow: auto;
}

body{
overflow: hidden; /*はみ出た部分をどうするか*/
}

#header,#main,#footer,img {
    width: 100%;
}

body {
	background-color:#FFFFFF;
	margin:0;
	color: #333;
}

/* スマホの時は改行 */
 .br_sp{ display: block; }
@media only screen and (min-width: 769px) {
	.br_sp{ display: none; }
}



/* モバイル　Mobile Layout: 480px and below. */
  
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 89.45%;
	padding-left: 0.275%;
	padding-right: 0.275%;
	clear: none;
	float: none;
}

/* ------ モバイルヘッダー------ */

#header {
	margin-top:5px;
}

#header .row {
	position: relative;
}

#header #logo h1 {
	font-size:100%;
	text-align:center;
	color:#666;
	font-weight:400;
	padding-bottom:3px;
}

#header #logo p {
	width:200px;
	height:auto;
	padding:3px 0 0 0;
	margin-left:auto;
	margin-right:auto;
}

#header #tel h2 {
	width:220px;
	padding:2px 0;
	margin-top:8px;
	margin-left:auto;
	margin-right:auto;
}

/* ------ モバイルナビ------ */

#nav ul {
	text-align:center;
	padding-top:5px;
	padding-left:0;
	margin-top:0;
}

#nav ul li {
	float: left;
	width: 49.3%;
	background: #96caff; /* Old browsers */
    background: -moz-linear-gradient(top,  #96caff 0%, #3399ff 38%, #1188ff 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#96caff), color-stop(38%,#3399ff), color-stop(99%,#1188ff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #96caff 0%,#3399ff 38%,#1188ff 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #96caff 0%,#3399ff 38%,#1188ff 99%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #96caff 0%,#3399ff 38%,#1188ff 99%); /* IE10+ */
	background: linear-gradient(to bottom,  #96caff 0%,#3399ff 38%,#1188ff 99%); /* W3C */
	padding:10px 0;
	margin:0.5% 0.3% 0 0.3%;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
	display: inline;
}

#nav ul li:hover {
	background: #54a9ff; /* Old browsers */
	background: -moz-linear-gradient(top,  #54a9ff 0%, #3582f4 38%, #0262f2 99%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#54a9ff), color-stop(38%,#3582f4), color-stop(99%,#0262f2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #54a9ff 0%,#3582f4 38%,#0262f2 99%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #54a9ff 0%,#3582f4 38%,#0262f2 99%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #54a9ff 0%,#3582f4 38%,#0262f2 99%); /* IE10+ */
	background: linear-gradient(to bottom,  #54a9ff 0%,#3582f4 38%,#0262f2 99%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54a9ff', endColorstr='#0262f2',GradientType=0 ); /* IE6-9 */
}

#nav a {
	display: block;
	position: relative;
	height: auto;
	font-size:150%;
	color:#FFF;
	text-decoration:none;
}

/* ------ モバイルスライド------ */

#slide {
	clear:both;
	width:99%;
	padding-top:1px;
}

#slide ul.bxslider,
#slide ul.bxslider li {
    margin:0;
}

/* ------ モバイルメイン------ */

.pick_up ul {
	display: inline-block;
	padding-left:0;
	padding-top: 10px;
	padding-bottom:5px;
}

.pick_up ul li {
	width: 98%;
	padding:8px 0;
	margin:0 auto;
}


/* ------ モバイルお知らせ------ */

.notice {
	clear:both;
	padding-bottom:5px;
	width:95%;
	border:3px solid #1B87F2;
	-moz-border-radius:9px;
	-webkit-border-radius:9px;
	border-radius:9px;
	margin:25px auto;
}

.notice h4 {
	font-size:140%;
	font-weight:normal;
	color: #FFF;
	padding:7px 0 7px 15px;
	text-shadow:1px 1px 0 #338CE0;
	border-bottom:1px solid #DDD;
	background-color:#1B87F2;
}

.notice dl {
	padding-top:5px;
	padding-bottom:10px;
	height:160px;
	overflow:scroll;
	overflow-x:hidden;
}

.notice dt {
	color:#222;
	font-size:125%;
	margin-left:7px;
}

.notice dd {
	font-size:120%;
	padding-top:2px;
	margin-left:13px;
}
.notice dt a,
.notice dd a {
	font-size: .9rem;
	font-weight: bold;
	color: #3A73F2;
}
.notice dt a:hover,
.notice dd a:hover {
	color: #7197EC;
}

.notice hr {
	border-style:dotted;
}
/* ------ モバイル駐車場------ */
.parking{
	padding:0.5em 0 3em;
}
.parking_img{
	width: 90%;
	max-width: 600px;
	margin: 0 auto;
}
.parking_txt{
	font-size: 120%;
	text-align: center;
	padding-top: 5px;
}


/* ------ モバイル診察時間------ */

#time p {
	font-size:120%;
}
#time table {
	clear:both;
	width:99.5%;
	margin-bottom:5px;
}

#time table th,
#time table td {
	font-size:115%;
	border:1px solid #ccc;
	padding:8px;
	width:auto;
}

#time table th {
	background-color: #E6E3E3;
}

#time table td {
	text-align:center;
}

/* ------ モバイル院長紹介------ */

#director {
	text-align:center;
	padding-bottom:15px;
}

#director h4 img {
	width:220px;;
	padding:15px 0 5px 0;
}

#director p {
	padding:15px 0 5% 0;
	margin-top:3px;
}

#director p a {
	color: #1B87F2;
	font-size:130%;
	font-weight:600;
	text-decoration:none;
	padding:3% 6% 3% 8%;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
	border:2px solid #1B87F2;
}

#director p a:hover {
	color:#FFF;
	background-color:#1B87F2;
}

/* ------ モバイルページトップ------ */

#footer #page-top {
	position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 75%;
}

#footer #page-top a {
	font-size:150%;
	background:rgba(0,120, 280,0.5);
    text-decoration: none;
    color: #fff;
    width: 140px;
    padding: 20px 0;
    text-align: center;
    display: block;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
    border-radius: 10px;
}

#footer #page-top a:hover {
	text-decoration: none;
    background-color: rgba(0, 150, 280, 0.5);
}

/* ------ モバイルフッター------ */

#footer {
	width:100%;
	background: #96caff; /* Old browsers */
    background: -moz-linear-gradient(top,  #96caff 0%, #3399ff 38%, #1188ff 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#96caff), color-stop(38%,#3399ff), color-stop(99%,#1188ff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #96caff 0%,#3399ff 38%,#1188ff 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #96caff 0%,#3399ff 38%,#1188ff 99%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top,  #96caff 0%,#3399ff 38%,#1188ff 99%); /* IE10+ */
   background: linear-gradient(to bottom,  #96caff 0%,#3399ff 38%,#1188ff 99%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96caff', endColorstr='#1188ff',GradientType=0 ); /* IE6-9 */
}

#footer_nav ul {
	text-align:center;
	padding-top: 10px;
}

#footer_nav ul li a {
	color:#fff;
	width:45%;
	float:left;
	font-size:120%;
	text-shadow:1px 1px 0 #54A2F2;
	margin-bottom: 15px;
}

#footer_nav ul li a:hover {
	color:#0000cd;
}

#footer #address {
	text-align:center;
}

#footer #address a img {
	width:140px;
	padding:20px 0;
}

#footer #address #footer_tel {
	padding-bottom:1%;
}

#footer #address #footer_tel a {
	color:#fff;
	text-decoration:none;
	font-size:140%;
}

#footer_fax {
	color:#fff;
	font-size:140%;
	padding-bottom:1%;
}

#footer #address #footer_add {
	color:#fff;
	font-size:115%;
	padding-bottom:20px;
}

#footer #copy {
	color:#fff;
	font-size:90%;
	text-align:center;
	padding:3%;
	margin-bottom:80px;
}






/* ------ モバイルパンくず------ */

#breadrumb {
	padding:0 0 0 8px;
}

#breadrumb {
	color:#666;
}

#breadrumb a {
	color:#1B87F2;
}






/* ------ モバイルアクセス------ */

#map {
	position:relative;
	padding-bottom:55.25%;
	height:0;
	overflow:hidden;
}

#map iframe,
#mapr object,
#map embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 99.5%;
	height: 93.5%;
}

#company {
	display:block;
	padding-bottom:15px;
}

#company h4 {
	font-size:130%;
	padding:5px 0 5px 10px;
	border-left:5px solid #3399ff;
	margin:15px  0 10px 0;
}

#company table {
	clear:both;
	width:99.5%;
	margin-top:20px;
	margin-bottom:25px;
}

#company table th,
#company table td {
	font-size:115%;
	border:1px solid #ccc;
	padding:10px;
	width:auto;
}

#company table th {
	width:27%;
	background-color: #E6E3E3;
}

/* ------ モバイル院長紹介ページ------ */

#main_doctor {
	width:100%;
}

#main_doctor h4 {
	font-size:140%;
	padding:5px 0 5px 10px;
	border-left:5px solid #3399ff;
	margin:15px  0 10px 0;
}

#slide #message,
#main_doctor #message {
	color: #0F7FEE;
	font-weight:700;
	font-size:150%;
}

#main_doctor p {
	font-size:120%;
	padding:0% 1.5%;
}

#doctor_body img {
	width:200px;
	display:block;
	padding:20px 0 10px 0;
	margin-left:auto;
	margin-right:auto;
}

#doctor_body h4 {
	font-size:140%;
	padding:5px 0 5px 10px;
	border-left:5px solid #3399ff;
	margin:15px  0 10px 0;
}

#doctor_body table td {
	font-size:120%;
	padding:3px 2px;
}

/* ------ モバイル診察空間ページ------ */

#main_clinic ul {
	padding-left:0;
}

#main_clinic ul li {
	width: 99%;
}

#main_clinic ul li .space_text{
	padding:1% 1% 4% 1%;
	font-size:125%;
	height:60px;
}

#main_clinic h4 {
	clear:both;
	font-size:140%;
	padding:5px 0 5px 10px;
	border-left:5px solid #3399ff;
	margin:15px  0 10px 0;
}

#main_clinic .bring li {
	width:91%;
	font-size:120%;
	padding:7px;
	margin-left:3%;
	border-bottom:1px dotted #6EADEC ;
}


/* ------ モバイル医療設備ページ------ */

#slide #message {
	padding-bottom:12px;
	padding-top:15px;
}

#main_clinic h5 {
	font-size:135%;
	text-align:center;
}



/* ------ モバイル治療案内ページ------ */

#main_treatment {
	padding-bottom:15px;
}

#main_treatment h4 {
	clear:both;
	font-size:140%;
	padding:5px 0 5px 10px;
	border-left:5px solid #3399ff;
	margin:15px  0 10px 0;
}

#main_treatment #whitening {
	color:#3399ff;
	font-size:140%;
	font-weight:600;
	border-bottom:1px dotted #3399ff;
	margin:0 3px;
	padding-bottom:8px;
}

#main_treatment .whitening_img {
	width:100%;
	padding:15px 0;
}

.rate-table {
	padding-bottom:15px;
}

.rate-table table {
	clear:both;
	width:97%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:1%;
}

.rate-table table th,
.rate-table table td {
	text-align:center;
	font-size:115%;
	border:1px solid #FFF;
	padding:13px 0;
	width:auto;
}

.rate-table table th {
	width:50%;
	color:#FFF;
	background-color:#5FA9F4;
}

.rate-table table td {
	color:#5FA9F4;
	font-weight:600;
	background-color:#E0EEFC;
	padding-left:20px;
}

#main_treatment h5 {
	font-size:125%;
	padding:5px;
	color: #FB8FD1;
}








.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}



/* タブレットTablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
	clear: none;
	float: none;
	margin-left: auto;
}

/* ------ タブレットヘッダー------ */

#header .row {
	position: relative;
}

#header #logo h1 {
	text-align:left;
	padding-left:5px;
}

#header #logo p {
	float:left;
	padding:3px;
}

#header #tel h2 {
	float:right;
	padding-right:5px;
	margin-top:5px;
}

/* ------ タブレットナビ------ */

#nav ul {
	padding-left:0;
	padding-top:0;
}

#nav ul li {
	width: 32.9%;
	margin:0.15%;
}

/* ------ タブレットスライド------ */

#slide {
	clear:both;
	width:99.5%;
}

/* ------ タブレットメイン------ */

.pick_up {
	padding-top:25px;
	padding-bottom:0px;
}

.pick_up ul {
	padding-left:0;
	padding-bottom: 0;
}

.pick_up ul li {
	float: left;
	display:inline;
	width: 31%;
	padding: 1.1%;
}


/* ------タブレットお知らせ------ */

.notice {
	clear:both;
	width:97%;
	margin-bottom:40px;
	margin-top: 15px;
}

/* ------ タブレット診察時間------ */

#time {
	float:left;
	width:65%;
	padding-top:2%;
	padding-left:2%;
	margin-bottom:2%;
}

#time p {
	font-size:120%;
}
#time table {
	width:99%;
}

#time table th,
#time table td {
	font-size:105%;
	border:1px solid #ccc;
	padding:8px;
}

#time table th {
	width:auto;
	background-color: #E6E3E3;
}

#time table td {
	width:auto;
	text-align:center;
}

/* ------ タブレット院長紹介------ */

#director {
	float:right;
	width:33%;
	margin-bottom:2%;
}

#director h4 img {
	width:80%;
	max-width:170px;
	padding:2% 0 10px 0;
}

#director p {
	padding:4% 0 5% 0;
}

#director p a {
	font-size:100%;
	padding:10px 5% 10px 7%;
}


/* ------ タブレットフッター------ */

#footer {
	clear:both;
}
	#footer_nav{
		padding: 10px 0;
	}

#footer_nav ul li a {
	width:30%;
}

#footer #address a img {
	float:left;
	width:30%;
	max-width:180px;
	padding:3% 5% 3% 5%;
}

#footer #address #footer_tel {
	float: right;
	padding:3% 5% 0 5%;
}

#footer #address #footer_tel a {
	color:#fff;
	text-decoration:none;
	font-size:150%;
}

#footer_fax {
	float:right;
	color:#fff;
	font-size:150%;
	padding:0 5% 0 5%;
}

#footer #address #footer_add {
	float: right;
	color:#fff;
	font-size:120%;
	padding:0 5% 1% 0;
}

#footer #copy {
	clear:both;
	color:#fff;
	font-size:90%;
	text-align:center;
	padding:2%;
}

/* ------ タブレット院長紹介ページ------ */

#main_doctor p {
	font-size:125%;
}

#main_doctor {
	width:100%;
}

#doctor_body img {
	float: right ;
	width:33%;
	padding:2% 2% 0 0;
}

#doctor_body h4 {
	width:60%;
	float:left;
	display:inline;
	padding:0.2% 0 0.2% 2%;
	margin:5%  1% 1.5% 0;
}

#doctor_body table {
	float:left;
	display:inline;
	width:60%;
}

#doctor_body table td {
	font-size:125%;
	padding:3px 2px;
}

#company {
	clear:both;
}

/* ------ タブレットアクセスページ------ */

#map {
	padding-bottom:48.25%;
}

#map iframe,
#mapr object,
#map embed {
	height: 92.5%;
}

#company table th {
	width:18%;
}


/* ------ タブレット診察空間ページ------ */

#main_clinic ul {
	padding-left:0;
}

#main_clinic ul li {
	float: left;
	display:inline;
	width:40%;
	padding:2% 5%;
}

#main_clinic ul li img {
	padding-bottom:1%;
}

#main_clinic ul li .space_text {
	height:100px;
}

#main_clinic {
	padding-bottom:20px;
}

#main_clinic .bring li {
	clear:both;
	margin-left:0.5%;
}




/* ------ タブレット治療案内ページ------ */

#main_treatment #whitening {
	width:97%;
}

#main_treatment .whitening_img {
	width:90%;
	margin:0 auto;
}









.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}



/*パソコン　 Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

.gridContainer {
	width: 88.5%;
	max-width: 960px;
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
	clear: none;
	float: none;
	margin-left: auto;
}

/* ------ パソコンヘッダー------ */

#header {
	width: 100%;
	text-align:center;
}

#header .row {
	width: 100%;
}

#header #logo p {
	width:265px;
}

#header #tel h2 {
	width:265px;
	padding-right:8px;
	margin-top:10px;
}


/* ------ パソコンナビ------ */

#nav ul {
}

#nav ul li {
	width: 16.4%;
	margin:0.1%;
}




/* ------ パソコンメイン------ */

.pick_up ul {
	padding-left:0;
}

.pick_up ul li {
	width: 31.2%;
	padding: 1%;
}


/* ------ パソコンお知らせ------ */
.notice {
	width:80%;
	margin-bottom:40px;
}

/* ------ パソコン診察時間------ */

#time p {
	font-size:140%;
}

#time table th,
#time table td {
	font-size:120%;
	border:1px solid #ccc;
	padding:10px;
}

/* ------ パソコン院長紹介------ */

#director p a {
	font-size:120%;
	padding:10px 7% 10px 9%;
}

/* ------ パソコントップページへ------ */

#toppage a img {
	width:17%;
}


/* ------ パソコンフッター------ */

#footer_nav ul {
	padding-left:0;
}

#footer_nav ul li a {
	width:16%;
	padding-bottom:0;
	letter-spacing: 1px;
}
#footer #address a img {
	float:left;
	width:25%;
	padding:3% 10% 3% 5%;
}

#footer #address #footer_tel {
	float: right;
	padding:3% 5% 0 5%;
}

#footer #address #footer_tel a {
	color:#fff;
	text-decoration:none;
	font-size:180%;
}

#footer_fax {
	float:right;
	color:#fff;
	font-size:170%;
	padding:0 5% 0 15%;
}

#footer #address #footer_add {
	float: right;
	color:#fff;
	font-size:140%;
	padding:0 5% 1% 0;
}

#footer #copy {
	clear:both;
	color:#fff;
	font-size:90%;
	text-align:center;
	padding:30px 0 0;
}

/* ------ パソコン院長紹介ページ------ */

#doctor_body img {
	float: right ;
	width:27%;
	padding:3% 3% 0 0;
}

#doctor_body table td {
	font-size:130%;
	padding:5px 7px;
}

/* ------ パソコン診察空間ページ------ */

#main_clinic ul li .space_text {
	font-size:140%;
}



/* ------ パソコント治療案内ページ------ */

#main_treatment .whitening_img {
	float:left;
	width:45%;
	padding:15px 2.5%;
	margin-left:-5px;
}








#footer{
margin: 0 -500%; /* マージンを追記 */
padding: 0 500%; /* マージンで横にはみ出した部分を戻す */
}



.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}