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

/*::::::::::::::: 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: 2px dotted #EBE8E4; /*下線*/
}

/* 項目名 */
.hyo01 th {
	color: #9C8D9B;
    font-weight: 600; /*太さ*/
    text-align: left;
	border-bottom: 2px dotted #EBE8E4; /*下線*/
}

/*------- 表02 ※thが青背景 -------*/

.hyo02 {
	margin: 0px auto;
}

.hyo02 table {
    border-collapse: collapse;
	line-height: 1.4;
}

.hyo02 th,
.hyo02 td {
    border-collapse: collapse;
	border: 1px solid #CCC;
	padding: 10px; /*余白*/
	vertical-align: middle;
}

.hyo02 th {
    font-weight: 400; /*太さ*/
    text-align: center;
	color: #FFF;
	background-color: #8FA7BA;
}

/*------- 表03 ※スタッフ紹介 -------*/

.hyo03 {
	margin: 0px auto;
}

.hyo03 table {
    border-collapse: collapse;
}

.hyo03 th {
    border-collapse: collapse;
	padding: 12px 0; /*余白*/
	vertical-align: top;
	line-height: 1.5;
	border-bottom: 1px solid #999;
	font-weight: 500;
}

.hyo03 td {
    border-collapse: collapse;
	padding: 12px 0; /*余白*/
	vertical-align: top;
	line-height: 1.5;
	border-bottom: 1px solid #999;
	font-weight: 300;
}

/* スクロールテーブル */

.scrolltable {
  overflow-x: scroll;
}

.scrolltable table {
  width: 100%;
  min-width: 1020px;
  border-collapse: collapse;
}


/*** 表 ※レスポンシブ対応 ***/

.hyo_sp dl {
	display: table;
	width: 100%;
}

.hyo_sp dl dt,
.hyo_sp dl dd {
	display: table-cell;
	box-sizing: border-box;
}

.hyo_sp dl dt {
	width: 30%;
	padding: 10px 5px;
	font-weight: 600;
	color: #7A180F;
	border-bottom: 1px dashed #7A180F;
}

.hyo_sp dl dd {
	width: 70%;
	padding: 10px 5px;
	border-bottom: 1px dashed #7A180F;
}


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

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

.flex_box .inner .item a {
    display: block;
    color: #000; /*文字色*/
	font-size: 1.7rem;
    text-align: center;
    width: 100%;
    padding: 15px 10px;
	box-sizing: border-box;
}

.flex_box .inner .item a:hover {
	background-color: #F0F0F0;
}

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

/*------- 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_contents {
	background-color: #F2F2F2;
}

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

.top_box01 {
	width: 1020px;
	margin: 0 auto 70px;
}

.top_box01 .inner {
	background: linear-gradient(82deg, transparent 18%, #384854 0);
	margin-right: calc(50% - 50vw);
}

.top_box01 .img {
	position: relative;
}

.top_box01 .img img {
	position: absolute;
	top: 80px;
	left: -120px;
	width: 500px;
}

.top_box01 .txt {
	width: 1020px;
	padding: 50px 0 50px 430px;
	box-sizing: border-box;
	color: #FFF;
	line-height: 1.7;
	font-weight: 200;
}

.top_box01 .txt h3 {
	font-size: 2.8rem;
	font-weight: 400;
	line-height: 1.5;
	margin-bottom: 30px;
}

.top_box01 .txt h3 .en {
	display: block;
	font-size: 1.5rem;
	font-weight: 300;
	letter-spacing: 0.1em;
}

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

.top_box02 ul {
	display: table;
	width: 100%;
}

.top_box02 ul li {
	display: table-cell;
	width: 33.3333%;
	text-align: center;
	vertical-align: middle;
	padding: 20px;
	font-size: 2.4rem;
}

.top_box02 ul li a {
	display: block;
	background: #FFFFFF;
	border-radius: 50%;
	width: 90%;
	height: 90%;
}

.top_box02 ul li span.num {
	display: block;
	color: #CCC;
	font-size: 3rem;
}

.top_box02 ul li span.txt {
	display: block;
	color: #8D0000;
	font-size: 1.4rem;
}

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

/*------- 水色　二重丸 -------*/

.step-wrap01 {
	counter-reset:count;
	position: relative;
	padding-top: 10px;
}

.step-title01 {
	font-weight: 600;
	font-size: 1.8rem;
	line-height: 1.4;
	color: #384854;
}

.step-body01 {
	font-weight: 300;
	padding: 15px 0 20px 10px;
	line-height: 1.5;
	color: #777777;
}

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

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

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

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


/*----------------------------------------*/
/* ステップ 数字                           */
/*----------------------------------------*/

.step-wrap02 {
 counter-reset: count;
 margin: 2em 0;
 position: relative;
}
.step-content02 {
 padding: .3em 1.3em 1.8em;
 margin: 0;
 position: relative;
}
.step-content02::before {
	content: "";
    display: block;
    width: 39px;
    height: 39px;
    background: #5DC7E7;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}
.step-content02::after {
 content: "";
 display: block;
 height: calc(100% - 55px);
 border-left: dotted 3px #707070;
 position: absolute;
 top: 45px;
 left: 18px;
}
.step-label02 {
 color: #fff;
 font-size: 10px;
 position: absolute;
 top: 4px;
 left: 9px;
}
.step-label02::after {
 counter-increment: count;
 content: counter(count);
 position: absolute;
 font-size: 2.5rem;
 top: -8px;
 left: 4px;
}
.step-title02 {
 color: #5DC7E7;
 font-weight: bold;
 font-size: 1.7rem;
 margin-left: 1.5em;
}
.step-body02 {
 padding: 0 0 0 1.6em;
}

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



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

.post_section {
	display: flex;
	width: 100%;
	margin-bottom: 60px;
}

.post_title {
	width: 25%;
}

.post_midashi {
	color: #384854;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	margin-bottom: 20px;
}

.post_midashi span {
	display: block;
	font-size: 5rem;
	font-weight: lighter;
	margin-bottom: 10px;
}

.post_box {
	width: 75%;
}

.post_box ul {
	padding-bottom: 10px;
}

.post_box ul li {
	display: table;
	width: 100%;
	border-bottom: 1px solid rgba(56,72,84,.5);
	padding: 0 0 16px;
	margin-bottom: 16px;
	box-sizing: border-box;
}

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

.post_box ul li span.date {
	color: #8D0000;
	width: 130px;
	font-weight: 600;
	text-align: center;
}

.post_box ul li span.link {
	padding-left: 20px;
}

/* リンク */
.post_box li a { font-weight: normal; 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: none; opacity: 0.6; }
.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: #9C8D9B;
	color: #FFFFFF;
	text-align: center;
	padding: 4px 12px;
	border-radius: 100vh;
	margin-right: 12px;
	}

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

.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;
	border-bottom: 2px solid #F7F5F4;
    }

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

.q_a dt:before {
	position: absolute;
	display: block;
	content: "Q";
	left: 0;
	top: 0;
	text-align: center;
	color: #715E70; /*文字色*/
	font-size: 2.4rem; /*文字サイズ*/
	font-weight: 300; /*文字太さ*/
	background-color: #EBE6E9; /*背景色*/
	width: 40px;
	height: 40px;
	line-height: 40px;
}

.q_a dd {
	position: relative;
	padding: 4px 0 4px 55px;
	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: 300; /*文字太さ*/
	background-color: #9F8B97; /*背景色*/
	width: 40px;
	height: 40px;
	line-height: 40px;
}

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

.gmap {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
}
.gmap iframe,
.gmap object,
.gmap embed {
	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;
}

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

/*--------- 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%; }

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

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

	.top_box01 {
		width: 100%;
		padding: 0 30px;
		box-sizing: border-box;
	}

	.top_box01 .img img {
		left: -30px;
		width: 400px;
	}

	.top_box01 .txt {
		width: 100%;
		padding: 50px 30px 50px 410px;
	}

}

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

   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%; }
	
	
	/*** 表 ※レスポンシブ対応 ***/

	.hyo_sp dl,
	.hyo_sp dl dt,
	.hyo_sp dl dd {
		display: block;
		width: 100%;
	}

	.hyo_sp dl dt {
		padding: 15px 5px 0;
		border-bottom: none;
	}

	.hyo_sp dl dd {
		padding: 10px 5px 15px;
	}v
	
	/*-----------------------------------------
	   トップページ
	-----------------------------------------*/

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

	.top_box01 {
		width: 100%;
		margin: 0 auto;
		background: #384854;
		padding: 30px 0;
		box-sizing: border-box;
	}

	.top_box01 .inner {
		width: 92%;
		background: transparent;
		margin: 0 auto;
	}

	.top_box01 .img {
		position: static;
		margin-bottom: 30px;
	}

	.top_box01 .img img {
		position: static;
		width: 50%;
	}

	.top_box01 .txt {
		width: 100%;
		padding: 0;
	}

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

	.post_section {
		display: block;
		margin-bottom: 60px;
	}

	.post_title {
		width: 100%;
	}

	.post_midashi {
		color: #384854;
		font-size: 1.5rem;
		font-weight: 400;
		line-height: 1;
		margin-bottom: 20px;
	}

	.post_midashi span {
		display: block;
		font-size: 5rem;
		font-weight: lighter;
		margin-bottom: 10px;
	}

	.post_box {
		width: 100%;
		border-top: 1px solid rgba(56, 72, 84, .5);
		padding-top: 16px;
	}
	
	.post_box ul li span.date {
		width: 110px;
		text-align: left;
	}
	
	.post_box ul li span.link {
		padding-left: 0;
	}
	
}

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

   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: 15px;
	}

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

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

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

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

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

	.top_box01 .img img {
		width: 80%;
	}
	
	/*------- 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%;
		}
	


}