@charset "utf-8";

/* --------------------------------- */
/* 千音寺こどもクリニック用メインCSS */
/* --------------------------------- */
/* Modified : 2018/10/31 0:01 */


/* ===================== */
/* ■全環境用のベースCSS */
/* ===================== */

	/* ------------ */
	/* ▼ページ全体 */
	/* ------------ */
	body {
		font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic","游ゴシック","YuGothic",sans-serif;
		margin: 0px;
		padding: 0px;
		background-color: #fff;
		background-image: url("./imgs/bg_noise50.gif");
		-webkit-text-size-adjust: 100%;
	}

	/* ▼汎用 */
	a:hover img {
		opacity: 0.75;	/* 画像リンクにマウスが載ったときの半透明化度 */
	}

	/* ------------ */
	/* ▼ヘッダ区画 */
	/* ------------ */
	.headbox {
		position: relative;
	}

		/* ▼クリニックロゴ */
		h1 {
			margin: 0;
			padding: 0;
			z-index: 120;
		}

		/* ………………………… */
		/* ▼スライドショー領域 */
		/* ………………………… */
		.slideshowCover {
			position: relative;
		}

		#headslideshow {
			margin: 0px;
			padding: 0px;
		}

			/* ▼スライドショー用表示候補群 */
			#slideshowbox {
				width: 100%;
				position: relative;
			}

			#slideshowbox p {
				position: absolute;
				top:  0;
				left: 0;
				right: 0;	/* 左右0にすることで原寸を超えて拡大もできる */
				z-index: 8;
				opacity: 0.0;
				background-color: white;
				margin: 0;
			}

			#slideshowbox p.active {
				z-index: 10;
				opacity: 1.0;
			}

			#slideshowbox p.last-active {
				z-index: 9;
			}

			#slideshowbox p img {
				width: 100%;
				height: auto;
				display: block;
			}

			/* ▼スクリプト無効の場合の固定表示（＋表示空間確保） */
			#noslideshow img {
				width: 100%;
				height: auto;
				display: block;
			}

			/* ▼お知らせ枠 */
			#infoBox {
				background-color: #FFCC66;
				margin: 0;
				width: 100%;
				z-index: 30;
				opacity: 0.95;
				position: absolute;
				bottom: 0;
				height: 100px;
				display: table;
				border-spacing: 0;
			}

				/* ▼お知らせタイトル */
				.infoTitle {
					display: table-cell;
					padding: 0 1em;
					white-space: nowrap;
					max-width: 135px;
				}
				.infoTitle p {
					text-align: center;
					background-color:rgba(255,255,255,0.8);
					border-radius: 1em;
					padding: 0.3em 1em;
					margin: 0 auto;
				}

				/* ▼お知らせ本文領域 */
				.infoBody {
					display: table-cell;
					padding: 0 16px;	/* 配置調整のためにpxで指定する */
				}
					/* ▼moreリンク */
					.morelink {
						background-color: rgba(255,255,255,0.8);
						border-radius: 10px;
						margin: 0;
						padding: 0;
						width: 52px;
						font-size: 0.85em;
						float: right;
						text-align: center;
					}
					.morelink a {
						display: block;
						padding: 6px;
						text-decoration: none;
					}
					.morelink a:hover {
						text-decoration: underline;
					}
					/* ▼お知らせ本文 */
					#infoMsg {
						background-color:rgba(255,255,255,0.8);
						border-radius: 0.75em;
						margin: 16px 0;		/* 配置調整のためにpxで狭めに指定する */
						padding: 5px 8px 5px 16px;
						line-height: 1.35;
						height: 67px;
						overflow: auto;
					}

						/* ▼お知らせ本文の中身 */
						.tegalog-date { color: #555; font-size: 0.85em; }
						.tegalog-main { color: #000; }

			/* ▼画像に重ねるボタン群：お花(風船)ボタン群 */
			.ohanaBox {
				list-style-type: none;
				position: absolute;
				z-index: 25;
				margin: 0;
				padding: 0;
				text-align: center;
			}

				/* ▼ボタン項目 */
				.ohana {
					display: inline-block;
					vertical-align: middle;
				}

				/* ▼ボタン */
				.ohana a {
					display: block;
				}
				.ohana img  {
					display: block;
				}

			/* ▼画像に重ねるボタン群：電話ボタン */
			.telButton {
				position: absolute;
				bottom: 100px;
				left: 0;
				z-index: 20;
				margin: 0;
				padding: 0;
			}
			.rsvButton {
				position: absolute;
				bottom: 186px;
				left: 0;
				z-index: 21;
				margin: 0;
				padding: 0;
			}

	/* ------------ */
	/* ▼メイン区画 */
	/* ------------ */
	main {
		margin: 5em 0 0 0;
	}

		/* ▼メインコンテンツ汎用ボックス */
		.mainbox {
			margin: 1em 0;
		}

		/* ▼サブタイトル */
		.subtitle {
			margin: 1em 0;
			text-align: center;
		}

		/* ………………… */
		/* ▼診療案内領域 */
		/* ………………… */
		.medicalArea .subtitle { margin-bottom: 0; }
		.medicalmenu {
			list-style-type: none;
			margin: 0;
			padding: 0;
			text-align: center;
		}
			/* ▼猫メニュー項目 */
			.medicalmenuItem {
				display: inline-block;
			}
				.catlink {
					display: block;
				}
				/* ▼猫メニュー項目内の画像 */
				.catlink img {
					display: block;
				}
				/* ▼猫メニューにマウスが載ったとき */
				.catlink img:first-child {
					position: relative;
					opacity: 1;
					top: 0;
				}
				.catlink:hover img:first-child {
					top: -5px;
					opacity: 0.8;
					transition: all 0.1s ease-out;
				}

		/* ………………… */
		/* ▼医師紹介領域 */
		/* ………………… */
		.doctorsArea {
			margin: 4em 1em;
		}

		.doctorBox {
			margin: 1em auto;
			max-width: 1200px;
			border-radius: 20px;
			background-color: #f2efce;
			background-image: url('./imgs/bg_bee.gif');
			position: relative;
		}

			/* ▼医師コメント枠 */
			.doctorMessage {
			}

				/* ▼医師コメントタイトル */
				.doctorMessageTitle {
					font-size: 1.2em;
					margin: 0.5em 0 1em 0;
				}

				/* ▼医師コメント本文 */
				.doctorMessageBody {
					line-height: 1.5;
				}

				/* ▼医師コメント署名 */
				.doctorMessageName {
					text-align: right;
				}

			/* ▼医師写真に付随させる補足枠 */
			.underDoctorPhoto {
				max-width: 380px;	/* 写真の横幅をボックスの最大幅にする */
			}

		/* …………………… */
		/* ▼当院の紹介領域 */
		/* …………………… */
		.clinicArea {
			margin: 2em auto;
		}

			/* ▼サブタイトル直下の文章 */
			.clinicAim {
				margin: 4em 2em;
			}

			/* ▼当院紹介BOX */
			.clinicBox {
				position: relative;
			}

			/* ▼当院の紹介ベース画像 */
			.clinicBase {
				text-align: center;
			}
			.clinicBase img {
				max-width: 100%;
				height: auto;
			}

			/* ▼当院の紹介ベース画像に載せる本文 */
			.clinicGuide {
				margin: 0;
				padding: 0;
				position: absolute;
				line-height: 1.6;
				text-align: left;
			}

		/* ………………… */
		/* ▼アドレス領域 */
		/* ………………… */
		.addressArea {
			margin: 3em auto;
			text-align: center;
		}
		.addressArea img {
			max-width: 100%;
			height: auto;
		}

			/* アドレス領域の中身 */
			.addressBox {
				margin: 0;
				padding: 1em 0;
				background-image: url('./imgs/bg_balloon.gif');
			}

			/* ▼外部サイトリンクバナー */
			.outerLinkBox {
				padding: 1em 0;
			}
				.outerLinkBanner {
					display: inline-block;
					margin: 0;
					padding: 3px 1em;
					border-radius: 1em;
					background-color: white;
				}

		/* …………………… */
		/* ▼Google MAP領域 */
		/* …………………… */
		.bottomGoogleMap {
			width: 100%;
		}


	/* ------------ */
	/* ▼フッタ区画 */
	/* ------------ */
	footer {
		margin: 3em 0 0 0;
		position: relative;
	}

		/* ▼マスコット */
		.footerMascots {
			background-image: url("./imgs/footer01.png");
			background-repeat: repeat-x;
			background-position: top center;
			width: 100%;
			min-height: 69px;
		}

		/* ▼著作権表示枠 */
		.copyright {
			background-color: #d4e8da;
			color: #006285;
			text-align: center;
			font-size: 0.8em;
			margin: 0;
			padding: 1em;
		}

		/* ▼TOPへ戻るボタン領域 */
		.scroll2Top {
			margin: 0;
			padding: 0;
			min-height: 90px;	/* ボタン自体がフッタのマスコットと重ならないようにするため */
		}
		.scroll2Top a {
			display: block;
			width: 100px;
			height: 100px;
			float: right;
		}
		.scroll2Top img {
			display: inline-block;
		}


/* ===================================================== */
/* ■モバイル画面（横幅 767px以下）専用の追加・上書きCSS */
/* ===================================================== */
@media all and (max-width:767px) {

	.pc-only { display: none !important; }

	/* ------------ */
	/* ▼ヘッダ区画 */
	/* ------------ */

		/* ▼クリニックロゴ */
		h1 {
			position:fixed;	/* ページ最上部に常時固定 */
			top:0;
			width: 100%;
			z-index: 100;
			background-color: rgba(255,255,255,0.75);
		}
		h1 a {
			display: block;
			padding: 7px 0;
		}
		h1 img {
			max-width: 100%;
			height: auto;
			display: block;
		}

		/* ………………………… */
		/* ▼スライドショー領域 */
		/* ………………………… */
		.slideshowCover {
		}

			/* ▼画像に重ねるボタン群：お花(風船)ボタン群 */
			.ohanaBox {
				max-width: 110px;
				height: auto;
				top: 70px;
				right: 0;
			}

				/* ▼ボタン画像 */
				.ohana img  {
					width: 100px;
				}

			/* ※大きいボタンを含める場合 */
			.ohanaBox.bigOhanaBox {
				max-width: 210px;
				top: 14.5%;
			}
				/* ▼大ボタン画像 */
				.ohana.bigBalloon img  {
					width: 200px;
				}

			/* ▼画像に重ねるボタン群：電話ボタン */
			.telButton {
				bottom: 95px;
				left: 0;
			}
			.telButton img,
			.rsvButton img {
				width: 50%;
			}
			.rsvButton {
				bottom: 140px;
				left: 5px;
			}

			/* ▼お知らせ枠 */
				/* ▼お知らせ本文領域 */
				.infoBody {
					padding: 0 12px;	/* 配置調整のためにpxで狭めに指定する */
				}
					/* ▼お知らせ本文 */
					#infoMsg {
						margin: 12px 0;	/* 配置調整のためにpxで狭めに指定する */
						padding: 6px 10px;
						line-height: 1;	/* モバイルではかなり詰める(でないと文字数によってはスライドショー画像の大部分が隠れる可能性があるから) */
						height: 67px;
						overflow: auto;
					}
						/* ▼お知らせ本文の中身 */
						.tegalog-date { font-size: 0.6em; }
						.tegalog-main { font-size: 0.75em; }
						/* ▼モバイル用moreリンク */
						.moreinfo {
							margin: 0;
							padding: 4px 5px 7px 0;
							font-size: 0.9em;
							font-weight: bold;
							text-align: right;
						}


		/* ▼ドロワーメニュー(モバイルのみ) */
		.drawerMenu * {
			margin: 0;
			padding: 0;
			outline: none;
			border: none;
			font: inherit;
			font-family: inherit;
			font-size: 100%;
			font-style: inherit;
			font-weight: inherit;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			text-align: left;
			text-decoration: none;
			list-style: none;
		}

			/* ▼ドロワーボタンの表示と動作 */
			.drawerMenu .drawerBg {
				width: 100%;
				height: 100%;
				position: fixed;
				z-index: 999;
				background-color: rgba(51, 51, 51, 0.5);
				display: none;
				top: 0;
				left: 0;
			}
			.drawerMenu .drawerBtn {
				display: block;
				background: none;
				border: none;
				padding: 0;
				width: 42px;
				letter-spacing: 0.1em;
				cursor: pointer;
				position: fixed;
				top: 6px;		/* ボタンの配置(上) */
				right: 10px;	/* ボタンの配置(右) */
				z-index: 1001;
				text-align: center;
				outline: none;
			}
			.drawerMenu .drawerBtn.active .drawerBar {	width: 49px; }
			.drawerMenu .drawerBtn.active .drawerBar1 {	transform: rotate(30deg); }
			.drawerMenu .drawerBtn.active .drawerBar2 {	opacity: 0;	}
			.drawerMenu .drawerBtn.active .drawerBar3 {	transform: rotate(-30deg); }
			.drawerMenu .drawerBtn.active .drawerLabelMenu {	display: none;	}
			.drawerMenu .drawerBtn.active .drawerLabelClose {	display: block;	}
			.drawerMenu .drawerBar {
				display: block;
				height: 2px;
				margin: 10px 0;
				transition: all 0.2s;
				transform-origin: 0 0;
			}

			/* ▼ドロワーボタンの色 */
			.drawerMenu .drawerBtn { color: #276490; }
			.drawerMenu .drawerBtn .drawerBar { background-color: #276490; }

			/* ▼ドロワーボタン下のラベル */
			.drawerMenu .drawerText {
				text-align: center;
				font-size: 10px;
			}
			.drawerMenu .drawerLabelClose {
				letter-spacing: 0.08em;
				display: none;
			}
			.drawerMenu .drawerLabelMenu {
				display: block;
			}

			/* ▼モバイル用メニュー本体(ラッパー) */
			.drawerMenu .drawerNaviWrapper {
				background-color: rgba(255,255,255,0.9);	/* 重なるメニューの背景色 */
				width: 312px;								/* 重なるメニューの横幅 */
				height: 100%;
				transition: all 0.2s;
				transform: translate(312px);
				position: fixed;
				top: 0;
				right: 0;
				z-index: 1000;	/* 最前面表示 */
			}
			.drawerMenu .drawerNaviWrapper.open {
				transform: translate(0);
			}

			/* ▼モバイル用メニュー本体 */
			.drawerMenu .drawerNaviList {
				padding: 100px 6px;
			}

			/* ▼モバイル用メニュー項目 */
			.drawerMenu a {
				color: inherit;
				text-decoration: none;
				display: block;
				padding: 9px 18px;
				border-bottom: 1px dashed #ccc;
			}
			.drawerMenu a:visited {
			  color: inherit;
			}
			.drawerMenu a:hover {
				background-color: snow;
			}


	/* ------------ */
	/* ▼メイン区画 */
	/* ------------ */
	main {
	}

		/* ▼サブタイトル */
		.subtitle {
			margin: 2em 0;
		}

		/* ………………… */
		/* ▼診療案内領域 */
		/* ………………… */
		.medicalmenu {
		}
			/* ▼猫メニュー項目 */
			.medicalmenuItem {
				display: inline-block;
			}
				.catlink {
					display: block;
				}
				/* ▼猫メニュー項目内の画像 */
				.catlink img {
					max-width: 150px;
				}

		/* ………………… */
		/* ▼医師紹介領域 */
		/* ………………… */
		.doctorBox {
			padding: 1em;
		}

			/* ▼医師写真 */
			.doctorPhoto {
				text-align: center;
			}
			.doctorPhoto img {
				max-width: 100%;
				height: auto;
			}
			/* ▼医師コメント */
			.doctorMessage {
				font-size: 0.9em;
			}

			/* ▼医師写真に付随させる補足枠 */
			.underDoctorPhoto {
				text-align: center;
			}

		/* …………………… */
		/* ▼当院の紹介領域 */
		/* …………………… */
		.clinicArea {
			margin: 2em auto;
		}

			/* ▼サブタイトル直下の文章 */
			.clinicAim {
				margin: 2em 1em;
				font-size: 0.9em;
			}

			/* ▼当院紹介BOX */
			.clinicBox {
				max-width: 500px;
				height: auto;
				margin: auto;
			}

			/* ▼当院の紹介ベース画像に載せる本文 */
			.clinicGuide {
				width: 35%;
				font-size: 0.7em;
			}
			.guideUpperLeft  { top: 18%; left:  6%; } /* 上側・左寄せ */
			.guideUpperRight { top: 18%; right: 6%; } /* 上側・右寄せ */
			.guideLowerLeft  { bottom: 11%; left:  6%; } /* 下側・左寄せ */
			.guideLowerRight { bottom: 13%; right: 6%; } /* 下側・右寄せ */

}


/* ========================================================= */
/* ■やや大きいスマホ画面（横幅 375px以上）用の補足上書きCSS */
/* ========================================================= */
@media screen and (min-width:375px) {

	/* ------------ */
	/* ▼ヘッダ区画 */
	/* ------------ */
		/* ………………………… */
		/* ▼スライドショー領域 */
		/* ………………………… */
		.slideshowCover {
		}

			/* ▼画像に重ねるボタン群：お花(風船)ボタン群 */
			.ohanaBox {
				max-width: 125px;
				height: auto;
				top: 83px;
				right: 0;
			}

				/* ▼ボタン画像 */
				.ohana img  {
					width: 120px;
				}

			/* ▼お知らせ枠 */
				/* ▼お知らせ本文領域 */
					/* ▼お知らせ本文 */
					#infoMsg {
						line-height: 1.2;
					}
						/* ▼お知らせ本文の中身 */
						.tegalog-main { font-size: 0.84em; }

	/* ------------ */
	/* ▼メイン区画 */
	/* ------------ */

		/* ………………… */
		/* ▼診療案内領域 */
		/* ………………… */
		.medicalmenu {
		}
			/* ▼猫メニュー項目 */
			.medicalmenuItem {
			}
				.catlink {
					margin: 0 15px;
				}

		/* …………………… */
		/* ▼当院の紹介領域 */
		/* …………………… */
			/* ▼当院の紹介ベース画像に載せる本文 */
			.clinicGuide {
				font-size: 0.8em;
				line-height: 1.5;
			}
			.guideUpperLeft  { top: 18%; left:  6%; } /* 上側・左寄せ */
			.guideUpperRight { top: 18%; right: 6%; } /* 上側・右寄せ */
			.guideLowerLeft  { bottom: 12%; left:  6%; } /* 下側・左寄せ */
			.guideLowerRight { bottom: 12%; right: 6%; } /* 下側・右寄せ */


}


/* =================================================== */
/* ■タブレット画面（横幅 500px以上）用の補足上書きCSS */
/* =================================================== */
@media screen and (min-width:500px) {

	/* ------------ */
	/* ▼ヘッダ区画 */
	/* ------------ */
		/* ………………………… */
		/* ▼スライドショー領域 */
		/* ………………………… */
			/* ▼画像に重ねるボタン群：お花(風船)ボタン群 */
			.ohanaBox {
				max-width: 300px;
				height: auto;
				top: 120px;
				right: 1em;
			}
				/* ▼ボタン画像 */
				.ohana img  {
					width: 140px;
				}

			/* ※大きいボタンを含める場合 */
			.ohanaBox.bigOhanaBox {
				max-width: 400px;
				top: 13%;
			}
				/* ▼大ボタン画像 */
				.ohana.bigBalloon img  {
					width: 350px;
				}

			/* ▼画像に重ねるボタン群：電話ボタン */
			.telButton img {
				width: 75%;
			}
			.rsvButton {
				bottom: 160px;
				left: 7px;
			}
			.rsvButton img {
				width: 75%;
			}

	/* ------------ */
	/* ▼メイン区画 */
	/* ------------ */

		/* …………………… */
		/* ▼当院の紹介領域 */
		/* …………………… */
			/* ▼当院の紹介ベース画像に載せる本文 */
			.clinicGuide {
				width: 34%;
				font-size: 0.8em;
			}
			.guideUpperLeft  { top: 18%; left:  6%; } /* 上側・左寄せ */
			.guideUpperRight { top: 18%; right: 6%; } /* 上側・右寄せ */
			.guideLowerLeft  { bottom: 15%; left:  6%; } /* 下側・左寄せ */
			.guideLowerRight { bottom: 15%; right: 6%; } /* 下側・右寄せ */

}

/* ===================================================== */
/* ■PCサイズ画面（横幅 768px以上）専用の追加・上書きCSS */
/* ===================================================== */
@media screen and (min-width:768px) {

	.mobile-only { display: none !important; }

	/* ------------ */
	/* ▼ヘッダ区画 */
	/* ------------ */
	header {
		/* background-image: url("./imgs/bg_top01.gif"); ※天井飾りOFF */
		/* background-repeat: repeat-x;                  ※天井飾りOFF */
		padding-top: 50px;
	}
	.headbox {
		/* background-image: url("./imgs/bg_flower01.gif"); ※ヘッダ背景花OFF */
		/* background-position: 0 -30px;                    ※ヘッダ背景花OFF */
	}

		/* ▼クリニックロゴ */
		h1 {
			max-width: 1200px;
			margin: 0 auto;
		}
		h1 a {
			max-width: 25%;
			display: block;
			margin: auto;
		}
		h1 a:hover img {
			opacity: 1;		/* マウスが載ったときに背後の花画像が透けないように */
		}
		h1 img {
			max-width: 100%;
			height: auto;
			background-image: url("./imgs/bg_noise50.gif");		/* 背景を花画像にしないため */
		}

		/* ▼グローバルメニュー(PCのみ) */
		.globalmenuArea {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index:1;
		}
			.globalmenuBox {
				display: table;
				margin: 0 auto;
				padding: 0;
				width: 100%;
				max-width: 1200px;
				list-style-type: none;
			}
				/* ▼メニュー項目 */
				.menuItem {
					display: table-cell;
					text-align: center;
					width: 12.5%;
					position: relative;
				}
				.menuButton img {
					max-width: 100%;
					height: auto;
				}
				/* ▼メニュー中心の境界 */
				.menuSeparator {
					display: table-cell;
					cursor: pointer;
					/*width: 25%;*/
				}

				/* ▼メニュー項目のアニメーション */
				.menuButton::after {
					position: absolute;
					content: "";
					height: 120px;
					opacity: 0;		/* Animation:A */
					top: -5px;		/* Animation:B */
					left: 0;
					right: 0;
					background-image: url("./imgs/navi_hover.png");
					background-position: center top;
					background-repeat: no-repeat;
					transition: all 0.5s ease-in-out;
					z-index: -1;
				}
				.menuButton:hover:after {
					top: -15px;		/* Animation:A */
					opacity: 0.7;	/* Animation:B */
				}

		/* ………………………… */
		/* ▼スライドショー領域 */
		/* ………………………… */
		.slideshowCover {
			margin: 0 1em;
			max-width: 1600px;
		}

			/* ▼スライドショーの画像 */
			#slideshowbox img,
			#noslideshow img {
				border-radius: 1em 1em 0 0;
			}

			/* ▼画像に重ねるボタン群：お花(風船)ボタン群 */
			.ohanaBox {
				max-width: 330px;	/* やや小さめの風船を上2個＆下1個で並べるように */
				height: auto;
				top: 1em;
				right: 0;
			}

				/* ▼ボタン画像 */
				.ohana img  {
					width: 145px;
				}

			/* ※大きいボタンを含める場合 */
			.ohanaBox.bigOhanaBox {
				max-width: 480px;
				top: 0;
			}
				/* ▼大ボタン画像 */
				.ohana.bigBalloon img  {
					width: 400px;
				}

			/* ▼画像に重ねるボタン群：電話ボタン */
			.telButton img {
				width: 70%;		/* スライドショー画像がよく見えるように、小さめにする */
				height: auto;
			}
			.rsvButton {
				bottom: 164px;
				left: 6px;
			}

			/* ▼お知らせ枠 */
			#infoBox {
				position: static;	/* このサイズではお知らせ枠をスライドショー画像の下端には重ねない */
			}
				/* ▼お知らせ本文領域 */
					/* ▼お知らせ本文 */
					#infoMsg {
						line-height: 1.35;
					}
						/* ▼お知らせ本文の中身 */
						.tegalog-main { font-size: 1em; }



	/* ------------ */
	/* ▼メイン区画 */
	/* ------------ */
	main {
	}

		/* ▼サブタイトル */
		.subtitle {
			margin: 4em 0;
		}
		/* ▼サブタイトル前後のイラスト */
		.subtitle span:before { content: url("./imgs/page_title_L.png"); }
		.subtitle span:after  { content: url("./imgs/page_title_R.png"); }

		/* ………………… */
		/* ▼医師紹介領域 */
		/* ………………… */
		.doctorsArea {
			margin: 4em 2em;
		}

		.doctorBox:after {
			content: "";
			clear: both;
			display: block;
		}

			/* ▼医師写真 */
			.doctorPhoto {
			}
			.doctor1 .doctorPhoto { float: left;  } /* 医師1は写真を左寄せ */
			.doctor2 .doctorPhoto { float: right; } /* 医師2は写真を右寄せ */

			/* ▼医師コメント */
			.doctorMessage {
				margin: 1em;
				padding: 1em;
			}
			.doctor1 .doctorMessage { margin-left: 380px;  } /* 写真の面積だけ左側に余白を設ける(文字が回り込むのを防ぐため) */
			.doctor2 .doctorMessage { margin-right: 380px; } /* 写真の面積だけ右側に余白を設ける(文字が回り込むのを防ぐため) */

			/* ▼医師写真に付随させる補足枠 */
			.underDoctorPhoto {
				width: 380px;
				text-align: center;
				position: absolute;		/* PCでは医師写真のすぐ下に配置させる */
				top: 320px;
				right: 0;				/* ※右側に寄せる場合専用 */
			}

		/* …………………… */
		/* ▼当院の紹介領域 */
		/* …………………… */
		.clinicArea {
			margin: 2em auto;
			max-width: 1200px;
			text-align: center;
		}

			/* ▼サブタイトル直下の文章 */
			.clinicAim {
				line-height: 1.7;
			}

			/* ▼当院の紹介ボックス */
			.clinicBox {
				display: inline-block;
				width: 500px;
				border: 2px solid #e6cdb5;
				border-radius: 7px;
				margin: 15px;
			}

			/* ▼当院の紹介ベース画像 */
			.clinicBase {
			}

			/* ▼当院の紹介ベース画像に載せる本文 */
			.clinicGuide {
				width: 190px;
				font-size: 0.9em;
			}
			.guideUpperLeft  { top: 110px; left:  5%; } /* 上側・左寄せ */
			.guideUpperRight { top: 110px; right: 3%; } /* 上側・右寄せ */
			.guideLowerLeft  { top: 390px; left:  5%; } /* 下側・左寄せ */
			.guideLowerRight { top: 390px; right: 5%; } /* 下側・右寄せ */


	/* ------------ */
	/* ▼フッタ区画 */
	/* ------------ */

		/* ▼マスコット */
		.footerMascots {
			background-image: url("./imgs/footer_1600.png");
			background-repeat: repeat-x;
			width: 100%;
			min-height: 230px;
		}

		/* ▼TOPへ戻るボタン領域 */
		.scroll2Top {
			position: absolute;
			bottom: 6px;	/* ボタンはフッタのマスコットより下に埋まるようにする */
			right: 6px;
			min-height: 0;
			margin: 0;
			padding: 0;
		}

}

/* ============================================== */
/* ■大PC画面（横幅 1200px以上）用の補足上書きCSS */
/* ============================================== */
@media screen and (min-width:1200px) {

	/* ------------ */
	/* ▼ヘッダ区画 */
	/* ------------ */
		/* ………………………… */
		/* ▼スライドショー領域 */
		/* ………………………… */
			/* ▼画像に重ねるボタン群：お花(風船)ボタン群 */
			.ohanaBox {
				max-width: 380px;
				height: auto;
				top: 1em;
				right: 1em;
			}

				/* ▼ボタン画像 */
				.ohana img  {
					width: 180px;
				}

			/* ▼画像に重ねるボタン群：電話ボタン */
			.telButton img {
				width: 100%;
				height: auto;
			}
			.rsvButton {
				bottom: 186px;
			}
			.rsvButton img {
				width: 100%;
				height: auto;
			}

			/* ▼お知らせ枠 */
			#infoBox {
				position: absolute;		/* お知らせ枠をスライドショー画像の下端から重ねる */
				opacity: 0.9;			/* PCでは透明度をやや高くする */
			}


	/* ------------ */
	/* ▼メイン区画 */
	/* ------------ */
		/* ………………… */
		/* ▼診療案内領域 */
		/* ………………… */
			/* ▼猫メニュー項目 */
				.catlink {
					margin: 30px;
				}

}

/* ============================================== */
/* ■大PC画面（横幅 1624px以上）用の補足上書きCSS */
/* ============================================== */
@media screen and (min-width:1624px) {

	/* ------------ */
	/* ▼ヘッダ区画 */
	/* ------------ */
		/* ………………………… */
		/* ▼スライドショー領域 */
		/* ………………………… */
		.slideshowCover {
			margin: 0 auto;
		}
}


/* ==================== */
/* ■旧ブラウザ向けHack */
/* ==================== */
@media all and (-ms-high-contrast:none){
	.menuButton img {
		width: 100%\0;
		max-width: 140px;
	}
}



/* ================= */
/* ■スクリプト用CSS */
/* ================= */

/* ▼loopSlider  */
.loopSliderWrap { top: 0; left: 0; height: 200px; overflow: hidden; position: absolute; }
.loopSlider { margin: 3em auto; width: 100%; /*max-width:1600px;*/ height: 200px; text-align: left; position: relative; overflow: hidden; }
.loopSlider ul { height: 200px; float: left; overflow: hidden; }
.loopSlider ul li { width: 300px; height: 200px; float: left; display: inline; overflow: hidden; }
.loopSlider * { margin: 0; padding: 0; }
.loopSliderWrap:after { content: ""; display: none; clear: none; }