/*-----------------------------------------
   共通
-----------------------------------------*/

/*::::::::::::::: YouTube :::::::::::::::*/

/* 動画を囲うdiv */
.video {
  position: relative;
  width:100%; /* 横幅は100%にしておく(ここを変えたい場合は実装コード2の方法を確認してください) */
  height:0; /* 高さは0にしておく(padding-topで高さを指定するため) */
  padding-top: 56.25%; /* 高さを指定(16:9) */
}

/* YouTube埋め込み用のiframe */
.video iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/*::::::::::::::: 表 :::::::::::::::*/

/*------- 表01（※クリニック概要で使用） -------*/

.hyo01 {
	margin:0px auto;
}

.hyo01 table {
    border-collapse: collapse;
}

.hyo01 th,
.hyo01 td {
    border-collapse: collapse;
	padding: 8px; /*余白*/
	vertical-align: top;
}

.hyo01 td {
	border-bottom: 1px solid #EBE8E4; /*下線*/
}

/* 項目名 */
.hyo01 th {
	color: #58834C;
    font-weight: 600; /*太さ*/
    text-align: left;
	border-bottom: 1px solid #EBE8E4; /*下線*/
}

/*------- 表02（※美容ページで使用） -------*/

.hyo02 {
	margin: 0px auto;
}

.hyo02 table {
    border-collapse: collapse;
}

.hyo02 th,
.hyo02 td {
    border-collapse: collapse;
	border: 2px solid #EBE8E4;
	padding: 8px 20px; /*余白*/
	vertical-align: middle;
}

.hyo02 th {
    font-weight: 600; /*太さ*/
    text-align: center;
	background-color: #F6FFF5;
}

/*------- 表03 ※経歴の表で使用 -------*/

.hyo03 {
	margin: 0px auto;
}

.hyo03 table {
    border-collapse: collapse;
}

.hyo03 th,
.hyo03 td {
    border-collapse: collapse;
	padding: 5px 0; /*余白*/
	vertical-align: top;
	line-height: 1.5;
}


/*-----------------------------------------
   横並び テキストボタン（フレックスボックス）
-----------------------------------------*/

.flex_box .inner {
	display: flex;
    flex-wrap: wrap;
    line-height: 1.5;
}

.flex_box .inner .item {
	display: flex;
    align-items: center;
    box-sizing: border-box;
	border: 1px solid #FF961D;
	border-radius: 10px;
}

.flex_box .inner .item a {
    display: block;
	font-size: 1.7rem;
    text-align: center;
    width: 100%;
    padding: 15px 10px;
	box-sizing: border-box;
}

.flex_box .inner .item a:hover {
	opacity: 0.7;
}

.flex_box .inner .item,
.flex_box .inner .item a,
.flex_box .inner .item a:hover,
.flex_box .inner .item a:visited {
	color: #FF961D; /*文字色*/
	text-decoration: none !IMPORTANT;
    font-weight: 500;
}

/*------- 色別 -------*/

.purple .item {
	background-color: #EBE6E9; /*背景色*/
	border: 2px solid #BFAEB8;
}

.pink .item {
	background-color: #FEEAE7; /*背景色*/
	border: 2px solid #F9BAB6;
}

.blue .item {
	background-color: #F0F4F8; /*背景色*/
	border: 2px solid #B3C7DD;
}

/*------- 2列 -------*/

.flex_box .clm2 {
	justify-content: space-between;
}

.flex_box .clm2 .item {
    width: 49%; 
	margin-bottom: 2%;
}

/*------- 3列  -------*/

.flex_box .clm3 {
	justify-content: flex-start;
}

.flex_box .clm3 .item {
    width: 32%;
	margin-right: 2%;
	margin-bottom: 2%;
}

.flex_box .clm3 .item:nth-child(3n) {
	margin-right: 0;
}

/*------- 4列  -------*/

.flex_box .clm4 {
	justify-content: flex-start;
}

.flex_box .clm4 .item {
	width: 23.5%;
	margin-right: 2%;
	margin-bottom: 2%;
}

.flex_box .clm4 .item:nth-child(4n) {
	margin-right: 0;
}

/*-----------------------------------------
   トップページ
-----------------------------------------*/

/*------- top_box01  -------*/

.top_box01 {
	text-align: center;
	line-height: 1.6;
	color: #9C8D9B;
	margin-bottom: 80px;
}


.top_box01 h3 {
	position: relative;
	font-size: 2.6rem;
	font-weight: 500;
	text-align: center;
	margin-bottom: 70px;
}

.top_box01 h3 span {
	position: relative;
	display: block;
	width: 240px;
	margin: 0 auto;
	color: #C0B4BF;
	font-size: 1.6rem;
	font-weight: 300;
	letter-spacing: 0.1em;
	font-style: italic;
	margin-top: 10px;
}

.top_box01 h3 span::before,
.top_box01 h3 span::after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 50px;
	height: 1px;
	background-color: #C0B4BF;
}

.top_box01 h3 span:before {
	left:0;
}
.top_box01 h3 span:after {
	right: 0;
}

/*------- top_box02  -------*/

.top_box02 h3 {
	color: #FFF;
	font-size: 2rem;
	text-align: center;
	font-weight: 500;
	line-height: 1.5;
	padding: 5px 25px;
	margin-bottom: 30px;
}
.top_box02 h3.purple { background-color: #BFAEB8; }
.top_box02 h3.pink { background-color: #F9BAB6; }
.top_box02 h3.blue { background-color: #B3C7DD; }

.top_box02 h4 {
	display: block;
	width: 100%;
	text-align: center;
	padding-bottom: 30px;
	color: #9C8D9B;
	font-size: 1.8rem;
	font-weight: 500;
}
.top_box02 h4 span {
	position: relative;
	display: inline-block;
	padding: 0 45px;
}
.top_box02 h4 span:before,
.top_box02 h4 span:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 40px;
	height: 1px;
	background-color: #9C8D9B;
	-webkit-transform: rotate(-60deg);
	transform: rotate(-60deg);
}
.top_box02 h4 span:before {
	left:0;
}
.top_box02 h4 span:after {
	right: 0;
}

/*-----------------------------------------
   ステップ
-----------------------------------------*/

/*------- 水色　美容ページで使用 -------*/

.step-wrap01 {
	counter-reset:count;
	margin: 2em 0;
	position: relative;
}

.step-title01 {
	font-weight: 500;
	font-size: 1.7rem;
}

.step-label01 {
	color: #768788;
	font-weight: bold;
	font-size: 1.6rem;
}

.step-label01::after {
	counter-increment:count;
	content:counter(count);
	position: relative;
	left: .3em;
}

.step-body01 {
	margin-top: .5em;
	padding: 0 0 0.8em;
}

.step-wrap01 > :last-of-type::after {
	display: none;
}

.step-content01 {
	padding: 0 0 1em 2em;
	margin: 0;
	position: relative;
}

.step-content01::before {
	content: "";
	display: block;
	width: 13px;
	height: 13px;
	background: #8DBBEF;
	border: solid 3px #ffffff;
	border-radius: 50%;
	position: absolute;
	top: 3px;
	left: 3px;
	box-shadow: 0 0 0 2px #8DBBEF;
}

.step-content01::after {
	content: "";
	display: block;
	height: calc(100% - 35px);
	border-left: solid 2px #CCC;
	position: absolute;
	top: 30px;
	left: 10px;
}


/*------- オンライン診療ページで使用 -------*/

.step-wrap02 {
	counter-reset:count;
	margin: 2em 0;
	position: relative;
}

.step-title02 {
	font-weight: 500;
}

.step-label02 {
	color: #768788;
	font-weight: bold;
	font-size: 1.6rem;
}

.step-label02::after {
	counter-increment:count;
	content:counter(count);
	position: relative;
	left: .3em;
}

.step-body02 {
	margin-top: .5em;
	padding: 0 0 0.8em;
}

.step-wrap02 > :last-of-type::after {
	display: none;
}

.step-content02 {
	padding: 0 0 1em 2em;
	margin: 0;
	position: relative;
}

.step-content02::before {
	content: "";
	display: block;
	width: 13px;
	height: 13px;
	background: #9C8D9B;
	border: solid 3px #ffffff;
	border-radius: 50%;
	position: absolute;
	top: 3px;
	left: 3px;
	box-shadow: 0 0 0 2px #9C8D9B;
}

.step-content02::after {
	content: "";
	display: block;
	height: calc(100% - 35px);
	border-left: dotted 5px #CCC;
	position: absolute;
	top: 30px;
	left: 10px;
}



/*-----------------------------------------
   お知らせ・ブログ
-----------------------------------------*/

.post_section {
	margin: 0 auto 70px;
	width: 60%;
	min-width: 500px;
}

.post_title {
}

.post_midashi {
	color: #578547;
	text-align: center;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 30px;
	display: flex;
	justify-content: center;
	gap: 0 30px;
}

.post_midashi::before,
.post_midashi::after {
	width: 2px;
	height: 34px;
	content: "";
	background-color: #FED586;
}

.post_midashi::before {
	margin-right: 0.5em;
	transform: rotate(30deg);
}

.post_midashi::after {
	margin-left: 0.5em;
	transform: rotate(30deg);
}

.post_box {
	margin-bottom: 30px;
}

.post_box li {
	display: table;
	width: 100%;
	border-bottom: 1px solid #E6E3DF;
	padding: 10px 5px;
	box-sizing: border-box;
}

.post_box li span.date,
.post_box li span.link {
    display: table-cell;
    line-height: 24px;
}

.post_box li span.date {
	color: #555;
	width: 110px;
	font-weight: 600;
}

/* リンク */
.post_box li a { font-weight: 300; text-decoration:none; }
.post_box li a:link { color: #000; text-decoration: none; }
.post_box li a:visited { color: #000; text-decoration: none; }
.post_box li a:hover { color: #000; text-decoration: underline; }
.post_box li a:active { color:#000; }


.oshirase li {
    position: relative;
	padding: 13px 5px 13px 30px;
}

.oshirase li:before {
    position: absolute;
    content: "";
    top: 23px;
    left: 12px;
    box-sizing: border-box;
    width: 6px; /*大きさ*/
    height: 6px; /*大きさ*/
    border-radius: 50%;
	background: #91C342; /*色*/
}

/*----------------------------------------*/
/* 診療案内                               */
/*----------------------------------------*/

.kyushin {
	background-color: #EA5432;
	color: #FFFFFF;
	text-align: center;
	padding: 4px 12px;
	border-radius: 100vh;
	margin-right: 12px;
	font-size: 1.5rem;
	}

/*------- 症状・病気から探す、小児皮膚科で使用  -------*/

.img_btn {
	display: flex;
    flex-wrap: wrap;
    line-height: 1.5;
	justify-content: flex-start;
}

.img_btn li {
	display: table;
    box-sizing: border-box;
	width: 32%;
	margin-right: 2%;
	margin-bottom: 2%;
	border: solid 1px #D9D2D7;
	border-bottom: solid 4px #B7A7B1;
}

.img_btn li:nth-child(3n) {
	margin-right: 0;
}

.img_btn li div {
	display: table-cell;
	vertical-align: middle;
	box-sizing: border-box;
}

.img_btn li div.img {
	width: 42%;
	padding: 10px 20px;
}

.img_btn li div.txt {
	width: 58%;
	padding: 10px 10px 10px 0;
	text-align: center;
}


.img_btn li a {
    display: block;
    color: #555; /*文字色*/
	font-size: 2.4rem;
}

.img_btn li a:hover {
	opacity: 0.7;
}

.img_btn li a,
.img_btn li a:hover,
.img_btn li a:visited {
	color: #555; /*文字色*/
	text-decoration: none !IMPORTANT;
    font-weight: 500;
}


/*----------------------------------------*/
/*　採用情報表　　　                      */
/*----------------------------------------*/

#me01 {
	width:100%;
	clear:both;
	margin:0px 0px 0px 0px;
	word-break: break-all;
}


#me01 td{
	padding: 10px 10px 10px 10px;
}

/*-----------------------------------------
   Q A
-----------------------------------------*/

.q_a {
	width: 100%;
	overflow: hidden;
    _zoom: 1;
    }

.q_a dt {
	position: relative;
	padding: 4px 0 4px 50px;
	margin-bottom: 10px;
	font-weight: 600;
}

.q_a dt:before {
	position: absolute;
	display: block;
	content: "Q";
	left: 0;
	top: 0;
	text-align: center;
	color: #FFF; /*文字色*/
	font-size: 2.4rem; /*文字サイズ*/
	font-weight: 500; /*文字太さ*/
	background-color: #578547; /*背景色*/
	width: 38px;
	height: 38px;
	line-height: 38px;
	border-radius: 50vh;
}

.q_a dd {
	position: relative;
	padding: 4px 0 4px 50px;
	margin-bottom: 20px;
}

.q_a dd:before {
	position: absolute;
	display: block;
	content: "A";
	left: 0;
	top: 0;
	text-align: center;
	color: #FFF; /*文字色*/
	font-size: 2.4rem; /*文字サイズ*/
	font-weight: 500; /*文字太さ*/
	background-color: #F28065; /*背景色*/
	width: 38px;
	height: 38px;
	line-height: 38px;
	border-radius: 50vh;
}

/*----------------------------------------*/
/*マップ                            */
/*----------------------------------------*/

.gmap {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
}
.gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

/*----------------------------------------*/
/*サイトマップ                            */
/*----------------------------------------*/

#sitemap_ce {
	width:70%;
	margin:0px auto 30px auto;
	text-align:center;
}

#sitemap_b5 {
	width:100%;
	clear:both;
	margin:0px auto 5px auto;
	text-align:left;
}

#sitemap_b10 {
	width:92%;
	clear:both;
	margin:0px auto 10px auto;
	text-align:left;
}

/*----------------------------------------*/
/*ページネーション                        */
/*----------------------------------------*/

.pagination {
     clear: both;
     padding: 20px 0;
     position: relative;
     font-size: 14px;
     line-height: 14px;
}
.pagination span, .pagination a {
     display: block;
     float: left;
     width: auto;
     margin: 2px 2px 2px 0;
     padding: 5px 9px 5px 9px;
     background-color: #fff;
     color: #555;
     text-decoration: none;
}
.pagination a {
     border: 1px solid #ccc;
}
.pagination a:hover{
     background-color: #ccc;
     border: 1px solid #ccc;
     color: #fff;
}
.pagination .current{
     padding: 5px 9px 5px 9px;
     background-color: #ccc;
     border: 1px solid #ccc;
     color: #fff;
}

/*----------------------------------------*/
/*Calendar Widget                         */
/*----------------------------------------*/

#wp-calendar {
	color: #555;
	width: 100%;
	text-align: center;
	border-spacing: 0px;
	padding-bottom:20px;
}
#wp-calendar caption,
#wp-calendar td,
#wp-calendar th {

	text-align: center;
}
#wp-calendar caption {
	padding: 5px 0 3px 0;
	}
#wp-calendar th {
	background: #f4f4f4;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-weight: bold;
}
#wp-calendar tfoot td {
	background: #f4f4f4;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

/*----------------------------------------*/
/*Archive Widget                          */
/*----------------------------------------*/
#side_middle{padding-bottom: 10px;}
#side_middle ul li{
	margin-bottom: 10px;
	padding-left: 10px;
	padding-top: 10px;
}

/*----------------------------------------*/
/* ggmap                        */
/*----------------------------------------*/

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*-----------------------------------------
   ※予備
-----------------------------------------*/

/*--------- button01 ---------*/

.button01 a {
	display: inline-block;
	color: #FFFFFF;
	font-size: 16px;
	padding: 12px 30px;
	border: 1px solid #F37499;
	border-radius: 6px;
	background-color : #F37499; 
	background : -webkit-linear-gradient(top, #F8AAC1, #F37499) ;
	background : linear-gradient(to bottom, #F8AAC1, #F37499) ; 
}

.button01 a:hover {
	text-decoration: none;
	background : -webkit-linear-gradient(top, #F37499, #F8AAC1) ;
	background : linear-gradient(to bottom, #F37499, #F8AAC1) ; 
}


/*****************************************************************************************

　・1060px以下　1020pxに左右20pxづつ足した数値
　・860px以下　横並びコンテンツ用
　・500px以下　モバイル

*****************************************************************************************/

/*:::::::::::::::::::::::::::::::::::::::::::::::::::

   501px〜1060px

:::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media only screen and (min-width: 501px) and (max-width: 1060px) {

	/*-----------------------------------------
	   共通
	-----------------------------------------*/

	/*::::::::::::::: 囲み :::::::::::::::*/

	.kakomi {
		padding: 40px;
	}

	/* 幅 */
	.haba80 { width: 90%; }
	.haba70 { width: 90%; }
	.haba60 { width: 90%; }

}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::

   1px〜860px

:::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media only screen and (min-width: 1px) and (max-width: 860px) {

	/*-----------------------------------------
	   共通
	-----------------------------------------*/

	/*::::::::::::::: 囲み :::::::::::::::*/
	
	.kakomi {
		padding: 25px;
	}

	/* 幅 */
	.haba80 { width: 100%; }
	.haba70 { width: 100%; }
	.haba60 { width: 100%; }

	
	/*-----------------------------------------
	  トップページ
	-----------------------------------------*/
	
	/*------- top_box03  -------*/

	.top_box03 {
		padding: 100px 0 80px;
	}

	/*-----------------------------------------
	   お知らせ・ブログ
	-----------------------------------------*/
	
	.post_midashi {
		margin-bottom: 30px;
	}
	
	.post_section {
		width: 100%;
		min-width: 100%;
	}

	.post_section li,
	.post_section li span.date,
	.post_section li span.link {
		display: block;
		width: auto;
	}
	
	.post_section li span.date {
		margin-bottom: 5px;
	}


}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::

   501px〜860px

:::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media only screen and (min-width: 501px) and (max-width: 860px) {

	/*-----------------------------------------
	   横並び テキストボタン（フレックスボックス）
	-----------------------------------------*/

	/*------- 3列  -------*/

	.flex_box .clm3 {
		justify-content: space-between;
	}

	.flex_box .clm3 .item {
		width: 49%;
		margin-right: 0;
	}

	/*------- 4列  -------*/

	.flex_box .clm4 .item {
		width: 32%;
	}
	
	.flex_box .clm4 .item:nth-child(4n) {
		margin-right: 2%;
	}
	
	.flex_box .clm4 .item:nth-child(3n) {
		margin-right: 0;
	}

	/*-----------------------------------------
	   診療案内
	-----------------------------------------*/

	/*------- 症状から探す  -------*/

	.shojo {
		justify-content: space-between;
	}

	.shojo li {
		width: 49%;
		margin-right: 0;
	}

	/*----------------------------------------*/
	/* 診療案内                               */
	/*----------------------------------------*/

	/*------- 症状・病気から探す、小児皮膚科で使用  -------*/

	.img_btn {
		justify-content: space-between;
	}

	.img_btn li {
		width: 49%;
		margin-right: 0;
	}
	
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::

   1px〜500px

:::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media only screen and (min-width: 1px) and (max-width: 500px) {
	
	/*-----------------------------------------
	   横並び テキストボタン（フレックスボックス）
	-----------------------------------------*/

	/*------- 2列 -------*/

	.flex_box .clm2 .item {
		width: 100%; 
		margin-bottom: 10px;
	}

	/*------- 3列  -------*/

	.flex_box .clm3 .item {
		width: 100%;
		margin-right: 0;
		margin-bottom: 10px;
	}

	/*------- 4列  -------*/

	.flex_box .clm4 {
		justify-content: space-between;
	}

	.flex_box .clm4 .item {
		width: 100%;
		margin-right: 0;
		margin-bottom: 10px;
	}
	
	/*-----------------------------------------
	   トップページ 
	-----------------------------------------*/

	/*------- top_box01  -------*/
	
	.top_box01 {
		padding: 60px 0 30px;
		margin-bottom: 60px;
	}

	.top_box01 h3 {
		font-size: 2.2rem;
		margin-bottom: 50px;
	}
	
	.top_box01 h3 span {
		margin-top: 5px;
	}
	
	/*------- top_box02  -------*/

	.top_box02 h3 {
		margin-bottom: 20px;
	}
	
	/*-----------------------------------------
	   お知らせ・ブログ
	-----------------------------------------*/

	.post_section {
		margin-bottom: 40px;
	}
	
	/*----------------------------------------*/
	/* 診療案内                               */
	/*----------------------------------------*/

	/*------- 症状・病気から探す、小児皮膚科で使用  -------*/

	.img_btn {
		justify-content: space-between;
	}

	.img_btn li {
		width: 100%;
		margin-right: 0;
	}
	
	.img_btn li div.img {
		width: 30%;
	}

	.img_btn li div.txt {
		width: 70%;
	}
	
	.img_btn li a {
		font-size: 2.2rem;
	}


	/*-----------------------------------------
	   Q A
	-----------------------------------------*/

	.q_a dd {
		margin-bottom: 15px;
	}

	/*-----------------------------------------
	   ※予備 
	-----------------------------------------*/

	/*------- トップページ  -------*/

	.threeclm .box {
		width: 100%;
		margin-bottom: 40px;
		}

	/*------- 店舗情報  -------*/

	.tenpo {
		display: block;
		padding: 15px;
		}

	.tenpo .box {
		display: block;
		padding: 5px;
		width: 100%;
		}


}