/********************************************************************************************
	<<<　pcr.css　>>>
	※PCRのcss
/********************************************************************************************/


@charset "utf-8";

/* ---------------------------------------------------------------------------------------------
   カラム

--------------------------------------------------------------------------------------------- */

/* カラムの幅を決めてあげてください */
.w100 {	width: 100%; }
.w70 {	width: calc(70% - 1em); padding-right: 1em;}
.w50 {	width: calc(50% - 1em); }
.w30 {	width: calc(30% - 1em); }

@media (max-width: 750px) {

	.w70 {	padding-right: 0em;}

}

/* ---------------------------------------------------------------------------------------------
   汎用パーツ

--------------------------------------------------------------------------------------------- */
.t_left { text-align: left;	font-size: 90%;}
.red {	color: #FF8080; }
.primarycolor { color: #2b8be0; }

/* ---------------------------------------------------------------------------------------------
   pcrベース

--------------------------------------------------------------------------------------------- */
.wrapper {
	max-width: 1300px;
	margin: 0 auto;
}



/* ---------------------------------------------------------------------------------------------

　   flex

--------------------------------------------------------------------------------------------- */
.flex_box {
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
    justify-content: space-between;
}

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


@media (max-width: 750px) {

	.flex_box {
		flex-direction: column;
	}
	.flex_box > div {
		width: 100%;
	}
	.flex_box img {
		width: 100%;
		padding: 0.5em;
		height: 100% /*auto*/ ;
	}
}

.flex-box {
  display: flex;
}
.flex-box .align-left {
  flex: 1 0 auto;
}
.flex-box .align-right {
  flex: 0 1 auto;
}


/* ---------------------------------------------------------------------------------------------

　   汎用　画像

--------------------------------------------------------------------------------------------- */
.img_block {
	padding-top: 2em;
	padding-bottom: 4em;

}


.photos ul {
	display: flex;
	justify-content: space-between;
	display: -webkit-flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
}
.photos li {
	width: calc(32% - .3em);
	padding: 1em;
	list-style: none;

}
.photos img {
	margin-bottom: 0.5em;
	display: block;
	margin: auto;
	border: 1px #ccc solid;
	border-radius: 0px;
}
.photos p {
	font-size: 0.9rem;
 	text-align: center;
}


@media screen and (max-width : 750px) {
	.photos {
		margin-left: -2rem;
    	margin-right: -2rem;
	}
	.photos li { width: calc(50% - 0.5em); 	padding: 0em; }
	.photos img { width: 150%; }
	.photos p {
			font-size: 80%;
 			text-align: center;
			line-height: 1rem;
	}
}

.imgcenter {
  	display: flex;
  	justify-content: center;
  	align-items: center;
	text-align: center;
}

.img_w30 {
	width: 31%;    /* 横幅を割合で指定 */
    height: auto;  /* 高さは自動指定 */
}


/* ---------------------------------------------------------------------------------------------

　   横並びボタン

--------------------------------------------------------------------------------------------- */





/* ---------------------------------------------------------------------------------------------

　   各コンテンツページ

--------------------------------------------------------------------------------------------- */
/*ページタイトル*/

.pagewidth {
  width: 100%;       /* スマホなどの時は画面幅いっぱいに広げる */
  max-width: 1000px;  /* PCなどでは最大800pxに制限する */
  margin: 0 auto;
}


/* ---------------------------------------------------------------------------------------------

	お知らせ」ブロック

--------------------------------------------------------------------------------------------- */
.newsbk {
	background: #FFFFFF;
	padding: 3em;
}

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

	.newsbk { padding: 1em; }

}

.new {

	padding: 1em;
	width: 100%;

}

@media (max-width: 750px) {

	.new { width: 100%; }

}

/*日付(dt)、記事(dd)共通設定*/
.new dt {
	border-bottom: none;
	padding: 5px 5px 5px 5px;
	color: #404040;
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	.new dt {
		border-bottom: dashed #E0E0E0 thin;
		padding: 5px 5px 5px 5px;
		line-height: 2em;
	}
}

.new dd {		/*上下、左右へのボックス内の余白*/
	border-bottom: dashed #E0E0E0 thin;
	padding: 5px 0 0px 0;
	color: #404040;
}

	/*日付の横のマーク（共通設定）*/
.new dt span {
		display: inline-block;	/*表示させる*/
		width: 7em;				/*幅。7文字(em)分。*/
/*		background: #77d6ca;*/		/*背景色  ここでの色指定はころします*/
		font-size: 0.8em;		/*文字サイズを親要素の80%に。*/
		text-align: center;		/*文字をセンタリング*/
		margin-right: 1em;		/*アイコンの右側に空けるスペース*/
		align-self: flex-start;	/*高さを間延びさせない指定*/
		line-height: 1.8;		/*行間を少し狭く*/
		position: relative;top: 0.4em;	/*上下の配置バランスの微調整*/
		border-radius: 2px;		/*角を丸くする指定*/
		color: #faf8f7;	/*文字色*/
		margin-left: 1em;		/*アイコンの右側に空けるスペース*/
		vertical-align: middle;

}

	/*icon-bg1設定。サンプルテンプレートでは「重要」と書いてあるマーク*/
	.new dt span.icon-bg1 {
		background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
		color: #faf8f7;	/*文字色*/

	}

	/*icon-bg2設定。サンプルテンプレートでは「イベント」と書いてあるマーク*/
	.new dt span.icon-bg2 {
		background: var(--secondary-color);	/*背景色。css冒頭で指定しているsecondary-colorを読み込みます*/
		color: #faf8f7;	/*文字色*/
	}




	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	/*お知らせブロック*/
	.new {
		display: flex;		/*flexボックスを使う指定*/
		flex-wrap: wrap;	/*折り返す指定*/
	}

	/*日付(dt)設定*/
	.new dt {
		width: 14em;	/*幅。14文字(em)分。アイコン分も含んだ幅にします。*/
		display: flex;	/*flexボックスを使う指定*/
		justify-content: space-between;	/*日付とアイコンをそれぞれ端に寄せる*/
	}

	/*記事(dd)設定*/
	.new dd {
		width: calc(100% - 14em);	/*「14em」は上の「.new dt」のwidthの値です。*/
	}

	}/*追加指定ここまで*/


/* ---------------------------------------------------------------------------------------------
	フロー図
--------------------------------------------------------------------------------------------- */

.flow_design {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flow {
  padding-left: 0;
}

.flow > li {
  list-style-type: none;
  position: relative;
  padding-left: 50px;
}

.flow > li:not(:last-child) {
  padding-bottom: 10px;
}

.flow > li .icon01 {
  width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  border-radius: 100vh;
  display: inline-block;
  background: var(--primary-color);
  color: #fff;
  position: absolute;
  left: 0;
}

.flow > li:not(:last-child)::before {
  content: '';
  background: #c3c3c3;
  width: 2px;
  height: 100%;
  position: absolute;
  top: calc(50% - -20px);
  left: 15px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.flow > li dl dt {
  font-size: 1em;
  font-weight: 400;
  color: var(--primary-color);
}

.flow > li dl dd {
  margin-left: 0;
}

/* ---------------------------------------------------------------------------------------------
	見出し
--------------------------------------------------------------------------------------------- */


.page-head_tit {
      position: relative;
      width: fit-content;
      isolation: isolate;
	padding: 28px 0 28px 50px;
	margin-left: 15%;
	margin-bottom: 2em;

}

    .page-head_tit::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      width: 90px;
      height: 90px;
      background:#e8eff8;
      border-radius:50%;
      transform: translateY(-50%);
      z-index: -1;
    }

    .page-head_tit::after {
      content: "";
      position: absolute;
      top: 50%;
      right: calc(100% - 30px);
      width: 100vw;
      height: 1px;
      border-top:1px dashed #3d6ca8;
      transform: translateY(-50%);
      z-index: -2;
    }

    .page-head_tit h3 {
      margin: 0;
      color: #00549d;
      font-size: 32px;
      font-weight: 600;
      letter-spacing: 0.12em;
      line-height: 1.5;
      white-space: nowrap;
    }

    .page-heading__description {
      width: fit-content;
      margin: 45px 0 0 52%;
      color: #222;
      font-size: 17px;
      font-weight: 700;
      line-height: 1.8;
    }

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

      .page-head_tit {
/*
        margin-left: 30px;
        padding: 20px 0 20px 35px;
*/
        margin-left: 0;
        padding: 20px 0 20px 20px;
        	/* 長いとはみでちゃうよ */
      }

      .page-head_tit::before {
        width: 65px;
        height: 65px;
      }

      .page-head_tit::after {
        right: calc(100% - 20px);
      }

      .page-head_tit h3 {
/*        font-size: 25px;	*/	/* 長い見出しだとあふれてしまうため */
        font-size: 20px;
      }

      .page-heading__description {
        width: auto;
        margin: 30px 0 0;
        font-size: 14px;
      }
    }


/* ---------------------------------------------------------------------------------------------
	横並びインデックスボタン
--------------------------------------------------------------------------------------------- */

.wrapper {
	max-width: 90%;
	margin: 0 auto;
}

.wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
	margin-top: 1em;
	margin-bottom: 1em;
	justify-content:center;
}

.wrap a { text-decoration: none; }

@media not all and (min-width: 768px) {

	 .wrap {
		justify-content:center;
		gap: 20px;
	}

	 .wrap div { width: 100% }

}



/* ---------------------------------------------------------------------------------------------
	医院案内
--------------------------------------------------------------------------------------------- */



/* ---------------------------------------------------------------------------------------------

	テーブル

--------------------------------------------------------------------------------------------- */

table {
  border-collapse: collapse;
  width: 100%;
}

.tb01 th,

.tb01 th {
	width: 30%;
}
.tb01 td {
  padding: 10px;
  border: 1px solid #999;
  background: #FFFFFF;
  text-align:left;
  box-sizing:border-box;
}

.tb01 th {
  border: 1px solid #999;
  background-color: #eee;
  text-align: center;

}

.tb01 tr td p {
	
	color: #FF8080;
	text-align: left;
	border-bottom: dashed #FF8080 thin;

}


@media screen and (max-width: 640px) {
  .tb01 {
    width: 100%;
  }
  table.tb01 th,
  table.tb01 td {
    display: block;
    width: 100%;
    border-bottom:none;
  }
  .tb01 tr:last-child{
    border-bottom: solid 1px #ccc;
  }
}



/* ---------------------------------------------------------------------------------------------

   ボタン

--------------------------------------------------------------------------------------------- */


.button-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--primary-color);
    border-radius: 15px;
    background-color: var(--primary-color);
    color: #fff;
    font-size: 1em;
	padding: 0.5em 2em 0.5em 2em;
	margin: 0 auto 0 auto;

}

.button-1::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
}

@media(max-width:750px) {
	.button-1 {
    	display: flex;
    	justify-content: center;
    	align-items: center;
    font-size: 90%;
	padding: 10px;
	margin: 0 auto 0 auto;
	width: 100%

	}
}



/* ---------------------------------------------------------------------------------------------

   ボックス

--------------------------------------------------------------------------------------------- */

.box {
	border-radius: 10px;	/*円形にする*/
	border: thin solid var(--primary-color);
	width: 100%;
	background: #fff;
	padding: 1em;
	margin: 1em;

}


//* ---------------------------------------------------------------------------------------------

	リスト list-1「ごあいさつ」にて使用 list_m 「診療案内」にて使用

--------------------------------------------------------------------------------------------- */

.list-1 {
  border: 2px solid #2589d0;
}

.list-1 >div {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	margin: 0;
  	padding: 10px 0;
  	color: #fff;
  	font-weight: normal;
	border-radius: 5px 5px 0 0;
	background-color: var(--primary-color);

}

.list-1 ul {
  	list-style-type: disc;
  	background-color: #fff;
	border-radius: 0px 0 5px 5px;
	padding: 1em 1em 1em 2.5em;
	margin: 0em 0em 3rem 0em;

}

.list-1 li {
  padding: .3em .3em .3em 0;
}

.list-1 li::marker {
  color: #2589d0;
  font-size: 1.1em;
}

.list-1 ol {
  	background-color: #fff;
	border-radius: 0px 0 5px 5px;
	list-style: decimal;
	padding: 1em 1em 1em 2.5em;
	margin: 0em 0em 1rem 0em;

}

.list-1 ol li {
	padding: 0em .3em 0em 0;

}

.list-1 ol li::marker {
  color: #2589d0;
  font-size: 1.1em;
}


.list_bk {
	background: #fff;	/*背景色（古いブラウザ用）*/
	border-radius: 10px;	/*円形にする*/
	padding: 1em;

}

.list_bk2 {
	/*背景色（古いブラウザ用）*/
	border-radius: 10px;	/*円形にする*/
	padding: 1em;
	border: thin solid var(--primary-color);

}



.list_med {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 100%;
	padding-top: 1em;
	line-height: 16pt;
}

.list_med th {
  width: 25%;
  box-sizing: border-box;
  vertical-align: top;
  text-align: left;
	font-weight: normal;
	padding-left: 1em;
	line-height: 16pt;
}
.list_med td {
  	width: 25%;
  	box-sizing: border-box;
  	padding: 8px;
  	vertical-align: top;
  	text-align: left;
	padding-left: 1em;
	line-height: 16pt;
}

.list_med a {

	text-decoration: none;
}

@media all and (max-width: 750px) {
	.list_med tr {
		margin-bottom: 0em;
		line-height: 14pt;
	}
  	.list_med th {
    	display: block;
    	width: 100%;
		line-height: 14pt;
  		padding: 5px;
  }
	.list_med td {
    	display: block;
    	width: 100%;
		line-height: 14pt;
  		padding: 5px;
	}

}

.list_med2 {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 100%;
	padding-top: 1em;
	line-height: 16pt;
}

.list_med2 th {
  width: 50%;

  box-sizing: border-box;
  vertical-align: top;
  text-align: left;
	font-weight: normal;
	padding-left: 1em;
	line-height: 16pt;
}
.list_med2 td {
  	width: 50%;

  	box-sizing: border-box;
  	padding: 10px;
  	vertical-align: top;
  	text-align: left;
	padding-left: 1em;
	line-height: 16pt;
}

.list_med2 a {

	text-decoration: none;
}

@media all and (max-width: 750px) {
	.list_med2 tr {
		margin-bottom: 0em;
		line-height: 14pt;
	}
  	.list_med2 th {
    	display: block;
    	width: 100%;
		line-height: 14pt;
  		padding: 5px;
  }
	.list_med2 td {
    	display: block;
    	width: 100%;
		line-height: 14pt;
  		padding: 5px;
	}

}


/* ---------------------------------------------------------------------------------------------

   アンカー

--------------------------------------------------------------------------------------------- */

@media(max-width:750px){
	/* スマホでページ内ジャンプをした際にヘッダー分下げてやるやつ */
	.anchor{						/* ヘッダやメニューの作りによっては変わる */
		display: block;
		padding-top: 60px;
		margin-top: -60px;
	}
}


/* ------------------------------------------------------

	地図

------------------------------------------------------- */
.map_canvas {
	width: 100%;
	height: 450px;
/*	padding: 5px;*/
	border: 0px #ccc solid;
	padding: 1em;

}

@media(max-width:750px) {

	.map_canvas { height: 300px; }

}



/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }

}