@charset "utf-8";

/* ------------------------- */
/* 佐藤クリニック用メインCSS */
/* ------------------------- */
/* Modified : 2019/02/13 10:30 */

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

	/* ================== */
	/* ▼ページ全体・汎用 */
	/* ================== */
	body {
		font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","游ゴシック","Yu Gothic","游ゴシック体","YuGothic",sans-serif;
		margin: 0;
		padding: 0;
		color: #545454;
		background-color: #fff;
		line-height: 1.4;
		-webkit-text-size-adjust: 100%;
	}

		/* ▽明朝系フォントの適用(※さくらインターネット経由Webフォント："リュウミン M-KL") */
		.tagline,
		.subtitle,
		.clinicArea h3,
		.cosmeticSubTitleBox,
		.serif {
			font-family: "リュウミン M-KL","Ryumin Medium KL","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","ヒラギノ明朝 Pro","Hiragino Mincho Pro","游明朝体","YuMincho","游明朝","Yu Mincho","HGS明朝E","HG明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
		}

		/* ▽ロゴたいぷゴシックの適用(※さくらインターネット経由Webフォント："フォーク R") */
		.tegalogLink,
		.outlineTitle,
		.detailTitle,
		.mapLink,
		.logotype {
			font-family: 'Zen Maru Gothic',"メイリオ",Meiryo,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","游ゴシック","Yu Gothic","游ゴシック体","YuGothic",sans-serif;
		}

		/* ▽消極的な改行制御区間 */
		.word {
			display: inline-block;
		}

		/* ▽画面幅に応じて自動縮小する画像 */
		.autoResize {
			max-width: 100%;
		}

		/* ▽リンク配色 */
		a:hover {
			color: #4e3f38;
		}

		/* ▽四角形リンクボタン */
		a.squareLinkButton {
			background-color: #8e9ca0;
			line-height: 1;
			padding: 0.5em 1em;
			color: #fff;
			text-decoration: none;
		}
		a.squareLinkButton.wide {
			letter-spacing: 0.15em;
		}
		a.squareLinkButton:hover {
			background-color: #4e3f38;
		}
			/* 美容ページの場合 */
			.cosmetic a.squareLinkButton { background-color: #c9a895; }
			.cosmetic a.squareLinkButton:hover { background-color: #d9abac; }


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

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

	/* ==================== */
	/* ▼スライドショー区画 */
	/* ==================== */
	.slideshowCover {
		position: relative;
		margin: 0 auto;
		max-width: 900px;
	}

	#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;
		}

		/* ---------------- */
		/* ▽上部案内文章枠 */
		/* ---------------- */
		.headMessageBox {
			text-align: center;
		}
			.tagline {
				font-size: 1.2em;
				color: #64939b;
				font-weight: bold;
			}
			.tagline .word {
				margin: 0 0.25em;
			}

	/* ==================== */
	/* ▼美容トップ画像区画 */
	/* ==================== */
	.headWideImageBox {
		text-align: center;
	}



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

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

		/* ▼サブタイトル */
		.subtitle {
			margin: 0;
			padding: 1em 0;
			color: #64939b;
			font-size: 1.5em;
			text-align: center;
		}

		/* ………………………… */
		/* ▼診療案内リンク領域 */
		/* ………………………… */
		.medicalLinkArea {
			margin: 0;
		}
		.medicalMenu {
			background-image: url("/imgs/bg_bee_blue.png");
			list-style-type: none;
			margin: 0;
			padding: 1.5em 0;
			text-align: center;
		}
		
		/*オンライン診療画像調整*/
		.onlineLink img	{
			width:70%;
			
		}

			/* ▽サブタイトル調整 */
			.medicalLinkArea .subtitle {
				letter-spacing: 0.4em;
			}

			/* ▼メニュー項目 */
			.medicalMenuItem {
				display: inline-block;
				vertical-align: middle;
				max-width: 315px;
				width: 30%;			/* 横並びサイズ調整(モバイル向けサイズ) */
				margin: 0 0px;		/* 横並び余白量調整(モバイル向けサイズ) */
			}
			.medicalMenuItem img {
				display: block;
				width: 100%;
				max-width: 100%;
			}

		/* ………………… */
		/* ▼お知らせ領域 */
		/* ………………… */
		.infoBody {
			margin: 1em 2em;
		}

			/* ▽お知らせ項目1つ */
			.tegalog-oneMsg {
				display: table;
				border-collapse: collapse;
				width: 100%;
			}
			.tegalog-oneMsg span {
				display: table-cell;
			}

				/* ▽お知らせ本文の中身 */
				.oneMsgHead { padding: 0 1em 0 0; }
				.tegalog-date { color: #555; font-size: 0.95em; padding: 1em; }
				.tegalog-main { color: #000; padding: 1em; width: 100%; }
				.tegalog-date,
				.tegalog-main { border-bottom: 1px dotted #999999; }

					/* URLが書かれた場合 */
					.url {
						word-break:break-all;	/* 自動リンクのはみ出しを防ぐ */
					}

			/* ▽お知らせ一覧リンクボタン */
			.tegalogLink {
				margin: 2em 0;
				text-align: center;
			}

		/* ………………… */
		/* ▼診療案内領域 */
		/* ………………… */
		.medicalArea {
			margin-top: 3em;
		}

			/* -------------------- */
			/* ▼診療科案内ボックス */
			/* -------------------- */
			.medicalOutline {
				border: 1px solid #94b3c3;
			}

				/* 美容 */
				.cosmetic .medicalOutline {
					border-color: #d9abad;
				}

				/* 見出し */
				.outlineTitle {
					background-color: #94b3c3;
					color: #fff;
					font-size: 1.25em;
					margin: 0;
					padding: 0.5em;
					text-align: center;
				}

				/* 美容：見出し */
				.cosmetic .outlineTitle {
					background-color: #d9abad;
				}

				/* 本文 */
				.outlineBody {
					margin: 0;
					padding: 1em;
					line-height: 1.5;
				}
				
				.outlineRead {/*オンライン診療リード文*/
					/*margin: 0;
					padding: 1em;
					line-height: 1.5;*/
					text-align: justify;
					text-justify: inter-ideograph;
					
				}
				
				.outlineSubtitle {
					font-size:larger;
					font-weight:bolder;
					text-align:center;
					
				}
				
				.outlineSubtitle a {
					text-decoration:none;
					color: inherit;
					
				}
				.outlineSubtitle a:visited {
			  		color: inherit;
				}
				.outlineSubtitle a:hover {
				background-color: snow;
				
				}
				
				/* ▼長方形ボタン */
				.moreButtonBox {
					margin: 2em 0;
				}
				.moreButton {
					display: block;
					margin: 0 auto;
					padding: 0 1em 0.67em 1em;
					border: 1px solid black;
					/*border-radius: 0.75em;*/
					max-width: 15em;
					text-align: center;
					line-height: 1;
					text-decoration: none;
					background-color: #fff;
					color: #000;
				}
				.moreButton:hover {
					background-color: #94b3c3;
					color: #fff;
					border: 1px solid #fff;
				}

				
				
			

			/* ---------------- */
			/* ▼診療科詳細情報 */
			/* ---------------- */
			.medialDetailBox {
				margin: 3.5em 5.2% 2em 5.2%;
				padding: 0 0 2em 0;
				border-bottom: 1px solid #999999;
			}
			
			
			.medialDetailBox:after {
				/* Micro Clearfix */
				content: "";
				clear: both;
				display: block;
			}
			/* ▼診療科詳細情報 ：オンラインページのための追記*/
			.medialDetaiarea {
			}
			.medialDetaiarea:after {
				/* Micro Clearfix */
				content: "";
				clear: both;
				display: block;
				
			}
			
			
			
				/* 見出し */
				.detailTitle {
					margin: 0 0 0.5em 0;
					color: #94b3c3;
					font-size: 1.5em;
					font-weight: normal;
				}

				/* 美容：見出し */
				.cosmetic .detailTitle {
					color: #d8abac;
				}

				/* 左画像 */
				.detailImage {
					margin: 0;
					width: 216px;
					float: left;
				}

				/* 右本文 */
				.detailBody {
					margin: 0 0 0 216px;
					line-height: 1.5;		/* 行間やや広め */
					/*text-align: justify;  両端揃え 
   					text-justify: inter-ideograph;  両端揃えの種類 */
				}

				/* ▽サブ説明枠 */
				.medicalDetailSub {
					clear: left;
					margin: 0 0 0 3em;
					padding: 1em 0 0 0;
				}
					/* 見出し */
					.detailSubTitle {
						margin: 0.5em 0;
						color: #94b3c3;
						font-size: 1.25em;
						font-weight: normal;
					}
					.detailSubTitle:before {
						content: '■';
					}

					/* 本文 */
					.medicalDetailSub .detailBody {
						margin: 0;
					}
					
						/* 診療内容リスト */
						.medicalDetailSubList {
						list-style-type: none;
						line-height: 1.65;
						margin: 0 0 0 7em;/* 箇条書き字下げ */
						padding: 1em;
						}
				
						.medicalDetailSubList li:before {
						content: '■';
						color: #94b3c3;
						margin-right: 0.34em;
						}
						
						/* オンラインページ診療内容リスト */
						.inBoxlist{
						list-style-type: none;
						line-height: 1.65;
						margin: 0 0 0 1em;/* 箇条書き字下げ */
						padding: 1em;
						}
						
						.inBoxlist li:before {
						content: '■';
						color: #94b3c3;
						margin-right: 0.34em;
						}
				

				/* ▽美容：サブ説明枠 */
				.cosmeticSubBox {
					clear: left;
					padding-top: 2.5em;
				}
				.detailTitle + .cosmeticSubBox {
					padding-top: 1em;
				}

		/* ………………… */
		/* ▼医師紹介領域 */
		/* ………………… */
		.doctorArea {
			margin: 3em 0 0 0;
			padding: 1px 0;
			background-color: #dfe8ed;
		}

		/* 蜂の巣枠 */
		.honeycombBox {
			background-image: url("/imgs/bg_bee_bxw.png");
			margin: 1em;
			padding: 1em;
		}

			/* ▽医師写真枠 */
			.doctorPhotoBox {
				background-color: #ccc;
				margin: 2em;
			}
			.doctorPhotoBox:after {
				/* Micro Clearfix */
				content: "";
				clear: both;
				display: block;
			}
				/* 顔写真 */
				.doctorPhoto {
					max-width: 223px;
					float: right;
					margin: 0;
				}
				.doctorPhoto img { display: block; }

				/* 名前・肩書き枠 */
				.doctorDetail {
					margin: 0;
					padding: 1em;
				}
					.name {
						font-size: 1.8em;
					}
					.titles {
						font-size: 1.4em;
						line-height: 1.5;
					}
					.katagaki {
						font-size: smaller;
					}

			/* ▽医師挨拶文 */
			.doctorGreetingBox {
				margin: 2em 0;
			}
				/* 本文 */
				.doctorGreeting {
					line-height: 1.6;	/* やや広め */
					text-align: justify; /* 両端揃え */
   					text-justify: inter-ideograph; /* 両端揃えの種類 */
				}
				/* 末尾署名 */
				.doctorSignature {
					text-align: right;
				}

			/* ▽医師経歴枠 */
			.doctorPersonalBox {
				margin: 2em 0 1em 0;
			}
				/* 見出し */
				.doctorPersonalTitle {
					font-size: 1em;
					font-weight: normal;
				}
				.doctorPersonalTitle:before {
					content: '■';
					color: #94b3c3;
					margin-right: 0.34em;
				}

				/* 経歴リスト */
				.doctorPersonalList {
					list-style-type: none;
					line-height: 1.65;
					margin: 0;
					padding: 0 0 0 1em;
				}

		/* ………………… */
		/* ▼設備機器領域 */
		/* ………………… */
		.facilityArea {
			margin: 0;
			padding: 2em 0 0.5em 0;
			background-color: #f2f2f0;
			text-align: center;
		}

			/* -------- */
			/* ▽見出し */
			/* -------- */
			.facilityArea h3 {
				width: 50%;
				min-width: 10em;
				margin: 1em auto;
				padding: 0.75em 1em;
				color: #fff;
				background-color: #9fc1c2;
				font-weight: normal;
				font-size: 1.3em;
			}

			.facilityArea h4 {
				color: #9fc1c2;
				/*font-weight: normal;*/
				letter-spacing: 1px;
				font-size: 1.3em;
			}

			/* 段組 */
			.columnsBox {
			}
				.oneColumnBox {
					background-color: #fff;
					padding: 1px 0;
				}

			/* 複合BOX */
			.complexWideBox {
				background-color: #fff;
				padding: 1px 0;
			}
			.complexWideBox .columnsBox {
			}

			/* 紹介画像枠 */
			.facilityImage {
				max-width: 75%;
				margin: auto;
			}

			/* 紹介文章 */
			.facilityGuide {
				text-align: left;
				width: 70%;
				margin: 1em auto;
			}

		/* ……………………………… */
		/* ▼院内スライドショー領域 */
		/* ……………………………… */
		.clinicSlideshowArea {
			max-width: 1200px;
			margin: auto;
			overflow: hidden;
		}

		/* ………………… */
		/* ▼院内紹介領域 */
		/* ………………… */
		.clinicArea {
			margin: 0;
			padding: 2em 0 0.5em 0;
			text-align: center;
		}

			/* -------- */
			/* ▽見出し */
			/* -------- */
			.clinicArea h3 {
				color: #64939b;
				font-size: 1.35em;
				letter-spacing: 1em;	/* 文字間隔 */
				margin-right: -1em;		/* 文字間隔(上と同じ分量にすること) */
			}

			/* 紹介枠 */
			.clinicBox {
				width: 75%;
				min-width: 300px;	/* 狭くなりすぎないようにする */
				margin: 4.5em auto 1em;
			}

			/* 最初の紹介枠 */
			.clinicBox:first-child {
				margin-top: 1.5em;
			}

		/* …………………………………… */
		/* ▼お知らせ一覧(てがろぐ)領域 */
		/* …………………………………… */
		.announceListArea {
		}

			/* ▽サブタイトル調整 */
			.announceListArea .subtitle {
				letter-spacing: 0.4em;
			}

			/* ▽リストメイン部分 */
			.announceListMain {
				background-image: url("/imgs/bg_bee_bxw.png");
				margin: 0;
				padding: 1.5em 0;
			}

			/* ▽リストメイン部分：美容皮膚科用 */
			body.cosmetic .announceListMain {
				background-image: url("/imgs/bg_bee_pxw.png");
			}

		/* ………………………… */
		/* ▼美容：ピンク枠領域 */
		/* ………………………… */
		.pinkBackArea {
			margin: 3em 0 0 0;
			padding: 1px 0;
			background-color: #f5e7e6;
		}
		.pinkBackArea + .pinkBackArea {
			margin-top: 0;	/* ピンク枠が連続する場合は、上部に余白を設けない。 */
		}

			/* 内側の白枠 */
			.whiteBox {
				background-color: #fff;
				max-width: 80%;
				margin: 1em auto;
				padding: 1em;
			}

				/* 見出し */
				.whiteBox h3 {
					color: #94b3c3;
					text-align: center;
				}

			/* チェックリスト */
			.checkList {
				width: 21em;
				margin: 1em auto;
				padding: 0;
			}
			.checkList li {
				margin: 3px 0;
				padding: 0 0 0 30px;
				line-height: 30px;
				list-style-type: none;
				background-image: url("/imgs/check.png");
				background-repeat: no-repeat;
				background-position: left center;
				background-size: 25px;
			}
			
			/* 注意書き */
			.attentionBox {
				margin: 2em auto ;
				text-align: justify;
				color:#777;
	
			}
			
			.midashi {
				line-height:1.8em;
				
			}
			.attentionBox p {
				font-size:samller;
				
			}

			
			

			/* Q and A */
			.qanda {
				margin: 1em auto;
				padding: 0;
				max-width: 80%;
			}
			.qanda li {
				margin: 3px 0;
				padding: 10px 0 10px 40px;
				line-height: 1.4;
				list-style-type: none;
				background-repeat: no-repeat;
				background-size: 30px;
				text-align: justify; /* 両端揃え */
   				text-justify: inter-ideograph; /* 両端揃えの種類 */
			}
			.qanda li.question {
				background-image: url("/imgs/Q.png");
				background-position: left 5px;
			}
			.qanda li.answer {
				margin-left: 35px;
				background-image: url("/imgs/A.png");
				background-position: left 6px;
				
			}
			
			

			/* ガイド文章 */
			.pinkGuide {
				text-align: center;
				font-size: 1em;
			}

			/* 料金種類テーブル */
			.itemListTable {
				width: 100%;
				max-width: 600px;
				margin: 1em auto;
				border: 1px solid #e3e3e3;
				border-collapse: collapse;
			}
			.itemListTable th,
			.itemListTable td {
				border-width: 0 1px;
				border-style: none solid;
				border-color: #e3e3e3;
				text-align: left;
				vertical-align: top;
				padding: 0.5em 1.5em;
				font-weight: normal;
			}
			.itemListTable td {
				color: #999;
			}

			/* 料金表 */
			.priceTableCover {
				margin: 0 0 3.5em 0;
				padding: 1em;
				background-color: #ebd6d5;
			}
				.priceTable {
					border-collapse: collapse;
					border: 2px solid #ebd6d5;
					margin: auto;
					width: 100%;
					max-width: 750px;
				}
				.priceTable td {
					border: 1px solid #dbb7b7;
					padding: 0.6em 0.4em;
					text-align: center;
				}
				.setPrice {
					color: #c36363;
				}

			/* 予約段組 */
			.reservationCover {
				display: table;
				border-spacing: 0;
				margin: 0;
				padding: 0;
			}
				.reservationLeftColumn {
					display: table-cell;
					width: 40%;
				}
				.reservationRightColumn {
					display: table-cell;
					padding-left: 1em;
				}

		/* ………………………………… */
		/* ▼美容皮膚科：小見出し領域 */
		/* ………………………………… */
		.cosmeticSubTitleBox {
			margin: 3em 0 1em 0;
			padding: 0;
			text-align: center;
			color: #94b3c3;
		}
		.cosmeticSubTitleBox h3 {
			font-size: 1.3em;
			letter-spacing: 1em;
			text-indent: 1em;
		}
		.cosmeticSubTitleBox p {
			letter-spacing: -1px;
		}
		
		
		/* ……………………………………… */
		/* ▼オンライン外来：ブルー枠領域 */
		/* ……………………………………… */
		
		.blueBackArea {
			margin: 3em 0 0 0;
			padding: 1px 0;
			background-color: #e9faff;
		}
		.blueBackArea + .blueBackArea {
			margin-top: 0;	/* ブルー枠が連続する場合は、上部に余白を設けない。 */
		}

			/* Q&A*/
			.qanda li.question_blue {
				background-image: url("/imgs/Q_blue.png");
				background-position: left 3px;
				
			}
			.qanda li.answer_blue {
				margin-left: 15px;
				background-image: url("/imgs/A.png");
				background-position: left 3px;
				
			}
			
				/* 料金表　ブルーの料金表のための追記*/
				.priceTableCover_blue {
				margin: 0 0 3.5em 0;
				padding: 1em;
				background-color: #e9faff;/*Table背景色*/
				}
				.priceTable_blue {
					border-collapse: collapse;
					border: 2px solid #e9faff;/*外枠*/
					margin: auto;
					width: 100%;
					max-width: 750px;
				}
				.priceTable_blue td {
					border: 1px solid #a8c7d6;
					padding: 0.6em 0.4em;
					text-align: center;
				}

		
	/* ------------ */
	/* ▼フッタ区画 */
	/* ------------ */
	footer {
		margin: 0;
		padding: 0;
	}

		/* ▼フッタ上部領域 */
		.upperFooter {
			margin: 0;
			padding: 1em;
			background-color: #f3f5f4;
		}

		/* ▼フッタ上部アドレス＆アクセス部分 */
		.addressAndAccess {
			max-width: 400px;
			margin: auto;
			padding: 0;
		}

		/* ……………… */
		/* ▼アドレス枠 */
		/* ……………… */
		.addressBox {
			text-align: center;
			margin: 3em 0;
		}

			/* 電話番号 */
			.tel {
				margin: 0.5em 0 0 0;
			}
				a.tel {
					display: inline-block;
					padding: 3px 10px 3px 0px;
					text-decoration: none;
					color: #545454;
					font-size: 1.55em;
					line-height: 1;
				}
				a.tel img {
					vertical-align: middle;
					width: 30px;
					height: 30px;
				}
				a.tel:hover {
					background-color: #8e9ca0;
					color: white;
				}

			/* 住所 */
			.address {
				font-size: 1.2em;
				margin: 0.5em 0;
			}

			/* 地図リンク */
			.mapLink {
				font-size: 1em;
			}

		/* ……………… */
		/* ▼アドレス枠 */
		/* ……………… */
		.accessBox {
			margin: 2em 0 0 0;
		}
			.accessDetails {
				margin: 0 auto;
				max-width: 400px;
			}

			/* 見出し */
			.accessWayTitle {
				font-weight: normal;
				margin: 0;
			}
			.accessWayTitle:before {
				content: '■';
				color: #94b3c3;
				margin-right: 0.34em;
			}

			/* 本文 */
			.accessWayBody {
				margin: 0.35em 0 1.25em 0;
			}

		/* ……………… */
		/* ▼診療時間表 */
		/* ……………… */
		.timetableBox {
			margin: 3em auto;
			max-width: 750px;
			text-align: center;
		}


		/* ………………………………………… */
		/* ▼千音寺こどもクリニックリンク枠 */
		/* ………………………………………… */
		.sennonjiLink {
			text-align: center;
			margin: 1em 0;
			padding: 0 0 4em 0;
		}

		/* …………………………… */
		/* ▼下部固定ボタン(共通) */
		/* …………………………… */
		.bottomFixButton {
			display: block;
			margin: 0;
			padding: 1em;
			background-color: #94b3c3;
			color: #fff;
			text-decoration: none;
			text-align: center;
			font-size: 1.2em;
			line-height: 1;
			opacity: 0.9;
		}

		/* …………………… */
		/* ▼診療予約ボタン */
		/* …………………… */
		.reservationButton {
			margin: 0;
			padding: 0;
			max-width: 8em;
			position: fixed;
			bottom: 20px;/*最初の値5*/
			left: 5px;
		}

		/* ……………………… */
		/* ▼TOPへ戻るボタン  */
		/* ……………………… */
		.scroll2Top {
			margin: 0;
			padding: 0;
			max-width: 4em;
			position: fixed;
			bottom: 20px;/*最初の値5*/
			right: 5px;/*最初の値5*/
		}
		
		



/* ===================================================== */
/* ■モバイル端末（横幅1023px以下）共通の追加・上書きCSS */
/* ===================================================== */
@media all and (max-width:1023px) {

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


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

		/* ---------------- */
		/* ▼クリニックロゴ */
		/* ---------------- */
		h1 {
			/* ※ロゴもページ最上部に常時固定する場合は下記3行を有効に */
			/*position: fixed;
			top: 0;
			z-index: 100; */
			width: 100%;
			background-color: rgba(255,255,255,0.75);
		}
		h1 a {
			display: block;
			padding: 0;
		}
		h1 img {
			width: 100%;
			height: auto;
			display: block;
		}

		/* -------------------------------- */
		/* ▼ドロワーメニュー(モバイルのみ) */
		/* -------------------------------- */
		.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: 31px;
				letter-spacing: 0.1em;
				cursor: pointer;
				position: fixed;
				top: 10px;		/* ボタンの配置(上) */
				right: 5px;		/* ボタンの配置(右) */
				z-index: 1001;
				text-align: center;
				outline: none;
				/* ▽配色と領域サイズ調整 */
				background-color: rgba(255,255,255,0.8);	/* 3本線枠の背景色 */
				padding: 6px 6px;							/* 3本線周囲の余白量 */
				box-sizing: content-box;
			}
			.drawerMenu .drawerBtn.active .drawerBar {	width: 26px; }					/* 3本線がクロスする場合の長さ */
			.drawerMenu .drawerBtn.active .drawerBar1 {	transform: rotate(33deg); }
			.drawerMenu .drawerBtn.active .drawerBar2 {	opacity: 0;	}
			.drawerMenu .drawerBtn.active .drawerBar3 {	transform: rotate(-34deg); }
			.drawerMenu .drawerBtn.active .drawerLabelMenu {	display: none;	}
			.drawerMenu .drawerBtn.active .drawerLabelClose {	display: block;	}
			.drawerMenu .drawerBar {
				display: block;
				height: 3px;			/* 3本線の太さ */
				margin: 4px 6px;		/* 3本線の「上下間隔」と「横の長さ」 */
				transition: all 0.2s;
				transform-origin: 0 0;
			}

			/* ▼ドロワーボタンの色 */
			.drawerMenu .drawerBtn { color: #276490; } /* 文字色 */
			.drawerMenu .drawerBtn .drawerBar { background: linear-gradient(to right,#297fac, #6ba086); } /* バーの色(元:#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;
			}

		/* ---------------- */
		/* ▽上部案内文章枠 */
		/* ---------------- */
			.tagline {
				font-size: 1.25em;
				letter-spacing: -0.02em;
				margin-top: 1.67em;
			}

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

		/* ………………… */
		/* ▼医師紹介領域 */
		/* ………………… */

			/* ▽医師写真枠 */
			.doctorPhotoBox {
				margin: 2em 4.5%;
			}

				/* 名前・肩書き枠 */
					.name {
					}
					.titles {
						font-size: 1.25em;
					}

		/* ………………… */
		/* ▼設備機器領域 */
		/* ………………… */
		.facilityArea {
			padding-top: 1px;
		}

			/* -------- */
			/* ▽見出し */
			/* -------- */
			.facilityArea h3 {
				width: 60%;
			}

			/* 段組 */
			.columnsBox {
				display: block;
				margin: 3em 0;
				width: auto;
			}
				.oneColumnBox {
					margin: 3em 2em;
					padding: 1.25em 0;
					display: block;
					width: auto;
				}

			/* 複合BOX */
			.complexWideBox {
				margin: 3em 2em;
				width: auto;
			}
			.complexWideBox .columnsBox {
				margin: 3em 2em;
				width: auto;
			}
			.complexWideBox .oneColumnBox {
				margin: 0;
				padding: 0;
				width: auto;
			}

			/* 紹介画像枠 */
			.facilityImage {
				max-width: 50%;
			}

			/* 紹介文章 */
			.facilityGuide {
			}

		/* ……………………………… */
		/* ▼院内スライドショー領域 */
		/* ……………………………… */
		.clinicSlideshowArea {
			box-sizing: border-box;
			width: 600px;
			height: 400px;				/* 掲載する画像の縦横比に合わせてこの値を書き換えないと、ズームアップ時に画像サイズが拡大してしまうので注意 */
		}
		.main_imgM {
			opacity: 0;
			width:100%;
			height:auto !important;
		}

		/* ………………………… */
		/* ▼美容：ピンク枠領域 */
		/* ………………………… */
			/* 予約段組 */
				/* 注意事項 */
				.reservationNotice {
					font-size: 0.75em;
				}
				
			/* 注意事項 */
				.attentionBox {
				padding:0;
				}
				

			.attentionBox p {
				font-size:1em;
				
			}


}

/* ===================================================== */
/* ■タブレット画面（横幅600px以上1023px以下）専用の追加・上書きCSS */
/* ===================================================== */
@media all and (min-width: 600px) and (max-width:1023px) {

	.pc-only { display: none !important; }
	
	/*オンライン診療画像調整*/
		.onlineLink img	{
			width:30%;
			min-width:300px;
			
			}
		
}

/* ====================================================== */
/* ■スマートフォン（横幅599px以下）専用の追加・上書きCSS */
/* ====================================================== */
@media all and (max-width:599px) {

	/* ================== */
	/* ▼ページ全体・汎用 */
	/* ================== */
	body {
		font-size: 0.85rem;
	}

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

		/* ………………… */
		/* ▼診療案内領域 */
		/* ………………… */

			/* ---------------- */
			/* ▼診療科詳細情報 */
			/* ---------------- */

				/* 左画像 */
				.detailImage {
					width: 83px;
				}

				/* 右本文 */
				.detailBody {
					margin: 0 0 0 99px;
				}

		/* ………………… */
		/* ▼医師紹介領域 */
		/* ………………… */

				/* 顔写真 */
				.doctorPhoto {
					max-width: 125px;
				}

				/* 名前・肩書き枠 */
				.doctorDetail p {
					margin: 0;
				}
					.name {
						font-size: 1.15em;
						padding: 0.75em 0 1em 0;
					}
					.titles {
						font-size: 0.93em;
						line-height: 1.25;
					}

			/* ▽医師挨拶文 */
				/* 末尾署名 */
				.doctorSignature img {
					width: 200px;
					height: auto;
				}


		/* ……………………………… */
		/* ▼院内スライドショー領域 */
		/* ……………………………… */
		.clinicSlideshowArea {
			width: 350px;
			height: 233px;				/* 掲載する画像の縦横比に合わせてこの値を書き換えないと、ズームアップ時に画像サイズが拡大してしまうので注意 */
		}

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

		/* ▼フッタ上部アドレス＆アクセス部分 */
		.addressAndAccess {
			width: 242px;
			margin: auto;
			padding: 0;
		}

		/* ……………… */
		/* ▼診療時間表 */
		/* ……………… */
		.scheduleComments {
			padding: 0 1em;
			text-align: left;
		}

}

/* ========================================================== */
/* ■やや小型な須スマホ（横幅374px以下）専用の追加・上書きCSS */
/* ========================================================== */
@media all and (max-width:374px) {

	/* ================== */
	/* ▼ページ全体・汎用 */
	/* ================== */
	body {
		font-size: 0.75rem;
	}

}

/* ========================================================== */
/* ■小型スマートフォン（横幅359px以下）専用の追加・上書きCSS */
/* ========================================================== */
@media all and (max-width:359px) {

	/* ------------ */
	/* ▼メイン区画 */
	/* ------------ */
	main {
		width: 100%;
		overflow: hidden;
	}

		/* ……………………………… */
		/* ▼院内スライドショー領域 */
		/* ……………………………… */
		.clinicSlideshowArea {
			width: 300px;
			height: 200px;				/* 掲載する画像の縦横比に合わせてこの値を書き換えないと、ズームアップ時に画像サイズが拡大してしまうので注意 */
		}

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

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

	/* ================== */
	/* ▼ページ全体・汎用 */
	/* ================== */

		/* ▽四角形リンクボタン */
		a.squareLinkButton {
			padding: 0.4em 1em 0.6em;	/* フォント「フォーク R」用の調整 */
		}

	/* ============ */
	/* ▼ヘッダ区画 */
	/* ============ */
	.headBox {
		margin: 1em 0 0 0;
		text-align: center;
	}

		/* ---------------- */
		/* ▼クリニックロゴ */
		/* ---------------- */
		h1 {
			display: inline-block;
			vertical-align: middle;
		}

		/* ---------------------------- */
		/* ▼グローバルメニュー(PCのみ) */
		/* ---------------------------- */
		.globalMenuArea {
			display: inline-block;
			vertical-align: middle;
		}
		.globalMenuBox {
			position: relative;
			z-index: 50;	/* スライドショーに消されないように、スライドショー関連よりも大きな値を指定する */
			list-style-type: none;
			width: 880px;
			margin: 0;
			padding: 0;
			*zoom: 1;
		}
		.globalMenuBox:before, .globalMenuBox:after{ content: ""; display: table; }
		.globalMenuBox:after{ clear: both; }

		/* ▽メイン(第1階層)メニュー項目 */
		.globalMenuBox li {
			position: relative;
			width: 14%;
			float: left;
			margin: 0;
			padding: 0;
			text-align: center;
		}
		.globalMenuBox li a {
			display: block;
			margin: 0;
			padding: 20px 0 20px;
			background: #fff;
			color: #545454;
			font-size: 1em;
			line-height: 1;
			text-decoration: none;
		}
		.globalMenuBox li.menuItem:not(:last-child) > a:after {
			content: '｜';
			color: #000;
		}
		.globalMenuBox li a:hover {
			color: #64939b;
		}

		/* ▽サブ(第2階層)メニュー */
		.globalMenuBox li ul{
			list-style: none;
			position: absolute;
			top: 100%;
			left: 0;
			margin: 0;
			padding: 0;
		}

		/* ▽サブメニュー項目 */
		.globalMenuBox li ul li{
			width: 100%;
		}
		.globalMenuBox li ul li a {
			padding: 0.8em 1em;
			border-top: 1px solid #fff;
			color: #fff;
			background-color: #8eafc2;
			text-align: center;
			line-height: 1.4;
			opacity: 0.6;
		}

		/* ▽リンク配色 */
		.globalMenuBox li.subItem:hover a {
			background-color: #6d9cae;
			color: #fff;
			opacity: 1;
		}

		/* ▽サブメニュー開閉(アニメーション) */
		.globalMenuBox li ul {
			opacity: 0;
			top: 50%;
			visibility: hidden;
			transition: .5s;
		}
		.globalMenuBox li:hover ul {
			top: 100%;
			visibility: visible;
			opacity: 1;
		}

		/* ---------------- */
		/* ▽上部案内文章枠 */
		/* ---------------- */
		.headMessageBox {
			position: absolute;
			left:  24.4%;		/* スライドショー画像が横900px固定の場合に220pxになるサイズ */
			right: 24.4%;		/* スライドショー画像が横900px固定の場合に220pxになるサイズ */
			bottom: 3.6%;
			z-index: 100;
			background-color: rgba(255,255,255,0.8);
			line-height: 1.3;
		}
			.tagline {
				font-size: 1.3em;
				margin: 0.75em 0 0.67em 0;
			}
			.guide {
				margin: 0.75em 0 1em 0;
			}

			/* 予約リンク */
			.reservationLink {
				line-height: 1;
				margin: 0.67em 0;
			}
			.reservationLink a {
				text-decoration: none;
				color: #545454;
			}

	/* ==================== */
	/* ▼スライドショー区画 */
	/* ==================== */
	.slideshowCover {
	}
		#SlideshowBox p,
		#NoSlideshow {
			max-height: 550px;	/* PC向けトリミング */
			overflow: hidden;
		}

	/* ------------ */
	/* ▼メイン区画 */
	/* ------------ */
		/* ………………………… */
		/* ▼診療案内リンク領域 */
		/* ………………………… */
		.medicalLinkArea {
			margin: 2em 0 0 0;
		}

			/* ▼メニュー項目 */
			.medicalMenuItem {
				width: 20%;			/* 横並びサイズ調整(PC向けサイズ) */
				margin: 0 10px;		/* 横並び余白量調整(PC向けサイズ) */
			}
			/* ▼moreボタン（オンライン診療ページ） */
			
			.moreButton {
				margin: 2.5em auto;
			}

		/* ………………… */
		/* ▼お知らせ領域 */
		/* ………………… */
		.infoBody {
			max-width: 700px;
			margin: 2em auto;
		}

			/* ▽お知らせ項目1つ */
				/* ▽お知らせ本文の中身 */
				.tegalog-main { padding-bottom: 2.5em; }

		/* ………………… */
		/* ▼診療案内領域 */
		/* ………………… */
		.medicalArea {
			max-width: 800px;
			margin: 2em auto;
		}
		

			/* -------------------- */
			/* ▼診療科案内ボックス */
			/* -------------------- */
				/* 本文 */
				.outlineBody {
					padding: 1.5em 9%;
				}


		/* ………………… */
		/* ▼医師紹介領域 */
		/* ………………… */
		.doctorArea {
			padding: 1px 12%;
		}

		/* 蜂の巣枠 */
		.honeycombBox {
			padding: 3em;
			margin: 2em 1em;
		}

			/* ▽医師写真枠 */
			.doctorPhotoBox {
				max-width: 700px;
				margin: 2em auto;
			}

		/* ………………… */
		/* ▼設備機器領域 */
		/* ………………… */
		.facilityArea {
		}

			/* 段組 */
			.columnsBox {
				display: table;
				max-width: 1075px;
				margin: 3em auto;
				border-spacing: 48px 0;	/* 左右→上下 の余白量 */
			}
				.oneColumnBox {
					margin: 0;
					padding: 1em 0;
					display: table-cell;
					width: 50%;
				}

			/* 複合BOX */
			.complexWideBox {
				max-width: 979px;
				margin: auto;
			}
			.complexWideBox .columnsBox {
				width: 100%;
				border-spacing: 3em 0;	/* 左右→上下 の余白量 */
			}

			/* 紹介文章 */
			.facilityGuide {
			}
			
		/* ………………… */
		/* ▼美容皮膚科*/
		/* ………………… */
		
			/* 注意書き */
			
			.attentionBox {
				margin: 2em 5% ;
				color:#777;
			}
			.attentionBox p {
				font-size:samller;
				
			}
			
}


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

	/* ==================== */
	/* ▼スライドショー区画 */
	/* ==================== */
	.slideshowCover {
	}
	
		/* ………………… */
		/* ▼美容皮膚科*/
		/* ………………… */
			/* 注意書き */
			
			.attentionBox {
				margin: 2em 5% ;
				color:#777;
			}
			.attentionBox p {
				font-size:samller;
				
			}
			
	
	
}



/* ======================= */
/* ■埋め込みツール等用CSS */
/* ======================= */
/* ――――――――――――――――― */
/* ★ズームアップスライドショー用CSS  */
/* ――――――――――――――――― */
.main_imgBox {
	height: 680px;
	overflow: hidden;
	position: relative;
}
.main_imgM {
	opacity: 0;
	width:100%;
	height:100%;
	object-fit: cover;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-animation: anime 36s 0s infinite;
	animation: anime 36s 0s infinite;
}
.main_imgM:nth-of-type(2) { -webkit-animation-delay: 6s; animation-delay: 6s; }
.main_imgM:nth-of-type(3) { -webkit-animation-delay: 12s; animation-delay: 12s; }
.main_imgM:nth-of-type(4) { -webkit-animation-delay: 18s; animation-delay: 18s; }
.main_imgM:nth-of-type(5) { -webkit-animation-delay: 24s; animation-delay: 24s; }
.main_imgM:nth-of-type(6) { -webkit-animation-delay: 30s; animation-delay: 30s; }

@keyframes anime {
	0% { opacity: 0; }
	8% { opacity: 1; }
	17% { opacity: 1; }
	25% { opacity: 0; transform: scale(1.2); z-index:9; }
	100% { opacity: 0; }
}
@-webkit-keyframes anime {
	0% { opacity: 0; }
	8% { opacity: 1; }
	17% { opacity: 1; }
	25% { opacity: 0; -webkit-transform: scale(1.2); z-index:9; }
	100% { opacity: 0; }
}

/* ―――――――――――― */
/* ★ループスライダー用CSS  */
/* ―――――――――――― */
/* ▼loopSlider  */
.loopSliderWrap { top: 0; left: 0; height: 275px; overflow: hidden; position: absolute; text-align: center; }
.loopSliderWrap p { margin:0; padding: 0; }
.loopSlider { margin: 3em auto; width: 100%; height: 270px; text-align: left; position: relative; overflow: hidden; }
.loopSlider ul { height: 265px; float: left; overflow: hidden; }
.loopSlider ul li { width: 270px; height: 260px; float: left; display: inline; overflow: hidden; border: 1px solid #eeeeee; padding: 20px 0; box-sizing: border-box; }
.loopSlider * { margin: 0; padding: 0; }
.loopSliderWrap:after { content: ""; display: none; clear: none; }

.loopBoxTitle { font-size: 1em;  color: #d8abac; }
.loopBoxGuide { font-size: 0.9em; color: #d8abac; }