@charset "utf-8";

/***************************************************************************************************************************
　■全デバイス共通設定
***************************************************************************************************************************/

/**** 初期設定 ****/
body {
	color: #232828;
	text-align: center;
	-webkit-text-size-adjust: 100%;/*スマホの文字倍率自動調整のオフ*/
}

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

p {
	line-height: 1.5em;
	color: #232828;
	font-size: 16px;
	text-align: left;
}

td, tr {
	color: #232828;
	font-size: 16px;
}

li, dt, dd {
	color: #232828;
	font-size: 16px;
}


/**** リンクの色設定 ****/
a:link {
	color: #03797C;
	text-decoration: underline;
}

a:visited {
	color: #03797C;
	text-decoration: underline;
}

	
a:hover {
	color: #03797C;
	text-decoration: none;
	/*position:relative;
	top:1px;
	left:1px;*/
}

a:active {
	color: #03797C;
	text-decoration: none;
	}
	
a img {
	border: 0;
}


/*clearfix(clear divの代わり)*/
.clearfix:after {
	content: " ";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
	.clearfix {
		zoom: 1;/*for IE6/7*/
	}

.float_l {
	float: left;
}

.clear {
	clear: both;
}
	
/**** ダイレクト指定 ****/
.ta_rig {
	text-align: right;
}
	.ta_cen {
		text-align: center;
	}
	.ta_lef {
		text-align: left;
	}

/**** TELリンクを消す ****/
@media screen and (min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}

/***************************************************************************************************************************
　■全サイズ共通設定
***************************************************************************************************************************/

#header {
	width: 100%;
	max-width: 900px;
	height: 160px;
	margin: 0 auto;
	position: relative;
	margin-bottom: 10px;
}

	#header #btn_reservation {
		position:absolute;
		top: 0;
		right: 0;
		background-color: #29CBB7;
		border-radius: 0 0 8px 8px;
		box-shadow: 1px 1px 2px 0px #777;
		background: url(../img/format2/back_reservation.png) no-repeat 0 0;
	}
		#header #btn_reservation a{
			display: block;
			text-decoration: none;
			color: #FFFFFF;
			text-shadow: 1px 1px 2px #105048;
			letter-spacing: 0.1em;
			padding: 15px 10px 15px 40px;
            font-size: 18px;
		}

	#header #btn_reservation_add {
		position:absolute;
		top: 60px;
		right: 0;
        color: #ED8C72;
        font-size:14px;
	}

	#header #btn_contact {
		position:absolute;
		top: 0;
		right: 160px;
		background-color: #FBF8EE;
		border-radius: 0 0 8px 8px;
		box-shadow: 1px 1px 2px 0px #777;
		background: url(../img/format2/back_mail.png) no-repeat 0 0;
	}
		#header #btn_contact a{
			display: block;
			text-decoration: none;
			color: #686144;
			/*text-shadow: 1px 1px 2px #105048;*/
			letter-spacing: 0.1em;
			padding: 15px 10px 15px 50px;
		}

	#header h1 {
		position:absolute;
		bottom: 100px;
		left: 5px;
		font-size: 13px;
		font-weight: normal;
	}
		#header h1 br {
			display: none;
		}

	#header img.logo_img {
		position:absolute;
		bottom: 0;
		left: 0;
		width:95%;
		max-width: 430px;/*formatで書き出す横幅*/
	}
		#header img.logo_img_mobile {
			position:absolute;
			bottom: 0;
			left: 0;
			display: none;
		}
	
	#header #tel_address {
		position:absolute;
		bottom: 0;
		right: 0;
	}
		#header #tel_address p.tel {
			font-size: 20px;
			letter-spacing: 0.1em;
			background: url(../img/format2/icon_tel.png) no-repeat;
			padding-left: 23px;
		}
			#header #tel_address p.tel a {
				text-decoration: none;
				color: #232828;
			}
		#header #tel_address p.address {
			font-size: 14px;
			text-align: right;
			margin-top: 0.3em;
		}

@media screen and (max-width: 919px) {

	#header h1 {
		margin-left: 10px;
	}

	#header img.logo_img {
		left: 10px;
	}
	
	#header #tel_address {
		right: 10px;
	}

}

@media screen and (max-width: 700px) {

	#header {
		height: 180px;
	}
	
	#header h1 {
		text-align: left;
		font-size: 11px;
	}
		#header h1 br {
			display: inline;
		}
	
	#header #tel_address {
		display: none;
	}

}

@media screen and (max-width: 533px) {/*クリニックロゴを差し替え*/
	
	#header img.logo_img {
			display: none;
	}
		#header img.logo_img_mobile {
			display: block;
		}

}


		
	
/*トップページ以外の静止画像*/
#img_title_box {
	width: 900px;
	margin: 0 auto;
}

	
#mainlink {
	width: 100%;
	background-color: #FBF8EE;
	background-image: url(../img/format2/mainlink_back.png);
	/*	width: 100%;max-width: 900px;とすると、JQfixed_menuでfixedが付与されたときに、画面左上からの絶対配置になるので注意*/
	box-shadow: 0 2px 2px 1px #DDD;
	margin-bottom: 3px
}

	#mainlink ul {
		width: 100%;
		max-width: 900px;
		margin: 0px auto 0 auto;
		text-align: center;
	}

	#mainlink li {/*ボタンを横並びに*/
		float: left;
	}


	#mainlink li a {
		height:85px;/*ここを変えるとjquery_fixed_menu.jsに影響します*/
		text-indent: -9999px;
		background-image: url(../img/format2/mainlink2.png);
	}
	
		#mainlink a:hover {
			position:relative;
			top:0;
			left:0;
		}
		
		#mainlink a:focus {
			outline: none;
		}
	
	#mainlink li.home a {
		display: block;
		width: 60px;
		background-position: 0 0;
	}
			#mainlink li.home a:hover {
				background-position: 0 85px;
			}
	
	#mainlink li.first a {
		display: block;
		width: 160px;
		background-position: -60px 0;
	}
			#mainlink li.first a:hover {
				background-position: -60px 85px;
			}
	
	#mainlink li.clinic a {
		display: block;
		width: 160px;
		background-position: -220px 0;
	}
			#mainlink li.clinic a:hover {
				background-position: -220px 85px;
			}
	
	#mainlink li.staff a {
		display: block;
		width: 200px;
		background-position: -380px 0;
	}
			#mainlink li.staff a:hover {
				background-position: -380px 85px;
			}
	
	#mainlink li.medicalcare a {
		display: block;
		width: 160px;
		background-position: -580px 0;
	}
			#mainlink li.medicalcare a:hover {
				background-position: -580px 85px;
			}
	
	#mainlink li.access a {
		display: block;
		width: 160px;
		background-position: -740px 0;
	}
			#mainlink li.access a:hover {
				background-position: -740px 85px;
			}
	
	#mainlink li.yoyaku {
		display: none;
	}

@media screen and (max-width: 919px) and (min-width: 565px) {/*メニューを縮めて表示*/
#mainlink {
	background-image: url(../img/format2/mainlink_back_mobile.png);
	/*	width: 100%;max-width: 900px;とすると、JQfixed_menuでfixedが付与されたときに、画面左上からの絶対配置になるので注意*/
	overflow: hidden;
		width: 100%;
}
	#mainlink ul {
		position: relative;
		width: auto;
		left: 50%;
		float: left;
	}
	
	#mainlink li {
		position: relative;
		left: -50%;
	}/*ボタンを横並びに*/

	#mainlink li a {
		height:50px;/*ここを変えるとjquery_fixed_menu.jsに影響します*/
		box-sizing: border-box;
		text-indent: 0;
		background-image: none;
		color: #F4EADE;
		text-decoration: none;
		padding: 14px 14px 0 10px;
		font-size: 18px;
		letter-spacing: 0.1em;
	}
	
		#mainlink a:hover {
			position:relative;
			top:0;
			left:0;
			text-decoration: none;
		}
	
	#mainlink li.home a {
		width: 35px;
		background: url(../img/format2/mainlink_home_mobile.png) no-repeat 0 0;
		text-indent: -9999px;
	}
			#mainlink li.home a:hover {
				background-position: 0 0;
			}
	
	#mainlink li.first a {
		width: auto;
		background-position: 0 0;
	}
			#mainlink li.first a:hover {
		background-position: 0 0;
			}
	
	#mainlink li.clinic a {
		width: auto;
		background-position: 0 0;
	}
			#mainlink li.clinic a:hover {
		background-position: 0 0;
			}
	
	#mainlink li.staff a {
		width: auto;
		background-position: 0 0;
	}
			#mainlink li.staff a:hover {
		background-position: 0 0;
			}
	
	#mainlink li.medicalcare a {
		width: auto;
		background-position: 0 0;
	}
			#mainlink li.medicalcare a:hover {
		background-position: 0 0;
			}
	
	#mainlink li.fastlist a {
		width: auto;
		background-position: 0 0;
	}
			#mainlink li.fastlist a:hover {
		background-position: 0 0;
			}
	
	#mainlink li.access a {
		width: auto;
		background-position: 0 0;
	}
			#mainlink li.access a:hover {
		background-position: 0 0;
			}
}

@media screen and (max-width: 670px) and (min-width: 565px) {/*メニューをさらに縮めて表示*/
	
	#mainlink li a {
		padding: 14px 10px 0 10px;
		font-size: 16px;
		letter-spacing: 0em;
	}
}


@media screen and (min-width: 565px) {
.drawer-toggle,#menu_background {
	display: none;
}
}
/*↑より横幅が狭い時はmainlinkをdrawer表示*/
@media screen and (max-width: 564px) {
.drawer-toggle {
	background: none;
	color: #FFFFFF;
	padding: 60px  0 0 0;
	position: fixed;
	right: 0px;
	top: 120px;
	z-index: 1000;
	border: none;
	text-align: center;
	width: 60px;
	height: 90px;
}
/*↓は.drawer-toggleに指定すると、メニューを開いた時に×ボタンを表示しようとして表示されてしまうので、背景は↑と別にして×ボタン時に一緒に来ないようにした。
buttonと背景divが同じ場所・同じ大きさでぴったりと重なっているイメージ*/
#menu_background {
	background: url(../img/format2/menu_btn.png) no-repeat center -10px;
	position: fixed;
	right: 0px;
	top: 120px;
	z-index: 999;
	border: none;
	width: 60px;
	height: 90px;
}

#mainlink {/*モバイル時menuボタンを押したときの中に表示されるmainlink*/
	width: auto;
	background-color: #FBF8EE;
	background-image: none;
	box-shadow: none;
	margin-bottom: 0px
}

	#mainlink ul {
		width: 100%;
		max-width: none;
		margin: 0px;
		text-align: left;
	}

	#mainlink li {
		float: none;
		margin: 14px 0 0px 10px;
		letter-spacing: 0.1em;
		padding-bottom: 14px;
		border-bottom: 1px solid #A8C4B8;
	}


	#mainlink li a {
		height:auto;
		text-indent: 0;
		background-image: none;
		text-decoration: none;
		font-size: 17px;
	}
	
	#mainlink li.home a {
		display: inline;
		width: auto;
		background-position: 0 0;
	}
			#mainlink li.home a:hover {
		background-position: 0 0;
			}
	
	#mainlink li.first a {
		display: inline;
		width: auto;
		background-position: 0 0;
	}
			#mainlink li.first a:hover {
		background-position: 0 0;
			}
	
	#mainlink li.clinic a {
		display: inline;
		width: auto;
		background-position: 0 0;
	}
			#mainlink li.clinic a:hover {
		background-position: 0 0;
			}
	
	#mainlink li.staff a {
		display: inline;
		width: auto;
		background-position: 0 0;
	}
			#mainlink li.staff a:hover {
		background-position: 0 0;
			}
	
	#mainlink li.medicalcare a {
		display: inline;
		width: auto;
		background-position: 0 0;
	}
			#mainlink li.medicalcare a:hover {
		background-position: 0 0;
			}
	
	#mainlink li.fastlist a {
		display: inline;
		width: auto;
		background-position: 0 0;
	}
			#mainlink li.fastlist a:hover {
		background-position: 0 0;
			}
	
	#mainlink li.access a {
		display: inline;
		width: auto;
		background-position: 0 0;
	}
			#mainlink li.access a:hover {
		background-position: 0 0;
			}
	
	#mainlink li.yoyaku {/*スマホだけ表示*/
		display: block;
	}
	
	#mainlink li.yoyaku a {
		display: inline;
		width: auto;
		background-position: 0 0;
	}
			#mainlink li.yoyaku a:hover {
		background-position: 0 0;
			}
			
}
@media screen and (max-width: 440px) {/*menuを少し小さく*/
.drawer-toggle {
	padding: 35px  0 5px 0;
	width: 50px;
	height: 75px;
}
/*↓は.drawer-toggleに指定すると、メニューを開いた時に×ボタンを表示しようとして表示されてしまうので、背景は↑と別にして×ボタン時に一緒に来ないようにした。
buttonと背景divが同じ場所・同じ大きさでぴったりと重なっているイメージ*/
#menu_background {
	background: url(../img/format2/menu_btn.png) no-repeat center -15px;
	position: fixed;
	right: 0px;
	top: 120px;
	z-index: 999;
	border: none;
	width: 50px;
	height: 75px;
}
}
	
		
		
#contents {
	width: 100%;
	margin: 0px auto 0 auto;
	background: url(../img/format2/back_pattern2.jpg) repeat;
}
	.fixed_box {
		max-width: 900px;
		width: 100%;
		margin: 0px auto 0 auto;
	}
	.sized_box {
		width: 100%;
	}
@media screen and (max-width: 930px) {
	.fixed_box, sized_box {
		width: auto;
		margin: 0px 10px 0 10px;
	}
}
	.whitescreen {
		background-color: #FFF;
		border-radius: 10px;
		box-shadow: 1px 2px 2px 1px #EEE;
		padding-bottom: 20px;
		margin-top: 20px;
		padding: 20px;
	}
	
	#contents h2 {
		font-size: 20px;
		letter-spacing: 0.1em;
		text-align: center;
		border: 1px solid #014A95;
		font-weight: normal;
		padding: 15px;
		line-height: 2em;
        color: #014A95;
	}
		#contents h2 .subtitle {
			font-size: 13px;
			letter-spacing: 0.4em;
			line-height: 2em;
		}
			#contents h2.size_ll {
				width: 290px;
			}
			#contents h2.size_l {
				width: 240px;
			}
			#contents h2.size_m {
				width: 190px;
			}
			#contents h2.size_s {
				width: 150px;
			}
	
		#contents h2.white_alpha {
			background-color: rgba(255,255,255,0.65);
		}
			
	#contents h3 {
		font-size: 18px;
		letter-spacing: 0.1em;
		text-align: left;
		border-bottom: 1px solid #63A6CB;
		font-weight: normal;
		padding: 5px 0;
		margin-top: 35px;
		margin-bottom: 7px;
        color: #2988bc;
	}
			
        #contents h3.wide {
            margin-top: 60px;
        }

#footer {
	background: url(../img/format2/back_pattern3.jpg) repeat;
	margin: 0px auto 0 auto;
	padding: 30px 0;
}
	#footer p {
		text-align: center;
		font-size: 9px;
		letter-spacing: 0.3em;
		color: #FFF;
	}
		#footer p br {
			display: none;
		}

@media screen and (max-width: 594px) {
	#footer p br {
		display: inline;
	}
	#footer {/*pagetop_btnとかぶらないように*/
		padding: 10px 0;
	}
	
}

/*h2段落ブロックの上下マージン*/
#contents .first_margin {
	margin-top: 60px;
}

#contents .basic_margin {
	margin-top: 150px;
}

/*h3段落等のブロックの左右マージン*/
#contents .h3_l_margin {
	margin-left: 20px;
	padding-left: 7px;
}

#pagetop_btn {
	position: fixed;
	right: 30px;
	bottom: 20px;
	z-index: 999;
}
	#pagetop_btn :hover {
		position:relative;
		top:0;
		left:0;
	}

#goyoyakubig_btn {
	position: fixed;
	right: 30px;
	bottom: 20px;
	z-index: 999;
}
	#goyoyakubig_btn :hover {
		position:relative;
		top:0;
		left:0;
	}
#goyoyaku_btn {
	position: fixed;
	right: 30px;
	bottom: 20px;
	z-index: 999;
}
	#goyoyaku_btn :hover {
		position:relative;
		top:0;
		left:0;
	}
#gotel_btn {
	position: fixed;
	right: 30px;
	bottom: 100px;
	z-index: 999;
}
	#gotel_btn :hover {
		position:relative;
		top:0;
		left:0;
	}
@media screen and (min-width: 768px) {
#goyoyaku_btn {
	display: none;
}
#gotel_btn {
	display: none;
}
}
@media screen and (max-width: 767px) {
#goyoyakubig_btn {
	display: none;
}
}
@media screen and (max-width: 1120px) {
#pagetop_btn {
	right: 5px;
	bottom: 0px;
}
#goyoyaku_btn {
	right: 5px;
	bottom: 0px;
}
#gotel_btn {
	right: 5px;
	bottom: 70px;
}
}





/*h2下の標準的なp*/
p.basic {
	margin-left: 18px;
	margin-top: 18px;
	font-size: 16px;
}
	/*p下(2行目)の標準的なp*/
	p.basic2 {
		margin-left: 18px;
		margin-top: 0.5em;
		font-size: 16px;
	}
/*h2下の標準的なbox*/
.basic_box {
	margin-top: 27px;
}
	/*2段目以降の標準的なbox*/
	.basic_box2 {
		margin-top: 80px;
	}

.br_pc {
	/*display: none;*/
}
	.br_mobile_l {
		display: none;
	}
	.br_mobile_m {
		display: none;
	}
	.br_mobile_s {
		display: none;
	}

p.demo_guide {
	font-size: 90%;
	padding: 5px;
	margin-top: 20px;
	margin-bottom: 20px;
	color:rgba(255,108,117,1.00);	
}