@charset "utf-8";
/*====================================================================================================

  当院の治療

====================================================================================================*/
@media screen and (min-width:641px) {
  .not-top .center-cols{
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
  }
}

.wrap{
  width: 100%;
  overflow-x: hidden;
}

.caution{
  font-weight: bold;
  color: #ef858c;
}

.treatment-hdline{
  position:relative;
  text-align: center;
  font-weight: 500;
}

.treatment-hdline::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 8px;
  background-image: url(../../image/icon/dots-green.svg);
  background-position: center;
  background-size: contain;
  z-index: 1;
  bottom: 0;
  left:50%;
  transform: translateX(-50%);
}

.treatment-table p{
  text-align: right;
}

.treatment-table{
  width:100%;
}

.medical-subjects{
  list-style: none;
}

.medical-subjects{
  display: flex;
}

.medical-subjects li{
  width: 49%;
  padding: 0.4em;
  line-height: 1.4;
  text-align: center;
  background-color: #ef858c;
  border-radius: 30px;
  font-weight: 500;
  color: #fff;
}

.medical-subjects li:first-child{
  margin-right: 2%;
}

.tel-btn{
  background-color: #e2f3f7;
  text-align: center;
  border-radius: 30px;
  max-width: 640px;
  border:2px solid #12aaa5;
}

.tel-btn a{
  color: #12aaa5;
  text-decoration: none;
}

.introduction-ttl  {
  position: relative;
  padding: 0.5em;
  background: #63c0ad;
  color: white;
  font-weight: 500;
}

.introduction-ttl::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}


@media screen and (min-width:641px) {
  .treatment-hdline{
    padding-bottom: 20px;
    margin-bottom: 60px;
  }

  .treatment-table{
    margin-bottom: 120px;
  }

  .introduction-ttl{
    margin-bottom: 60px;
  }

  .tel-btn{
    margin:60px auto;
  }
}

@media screen and (max-width:640px) {
  .treatment-hdline{
    padding-bottom: 20px;
    margin-bottom: 30px;
  }

  .treatment-table{
    margin-bottom: 90px;
  }

  .introduction-ttl{
    margin-bottom: 30px;
  }

  .tel-btn{
    margin:30px auto;
  }
}

/* -----------------------------------------------------------------------------
	responsive img-auto-width
 -------------------------------------------------------------------------------*/

.img-auto-width {
	position:relative;
	width:calc(100% + 30px);
}
@media screen and (max-width:1100px){
.img-auto-width {
	position:relative;
	width:calc(100% + 30px);
	padding-left: 30px;
	padding-right:30px;
	box-sizing: border-box;
}
}
.img-auto-width img, .img-auto-width figure, .img-auto-width .item {
	width:calc(25% - 30px);
	height:auto;
	margin-right:30px;
	margin-bottom:30px;
	float:left;
	transition:0.3s;
}

.img-auto-width.column3 img, .img-auto-width.column3 figure, .img-auto-width.column3 .item {
	width:calc(33.333% - 30px);
	height:auto;
	margin-right:30px;
	margin-bottom:30px;
	float:left;
	transition:0.3s;
}

.img-auto-width.column2 img, .img-auto-width.column2 figure, .img-auto-width.column2 .item {
	width:calc(50% - 30px);
	height:auto;
	margin-right:30px;
	margin-bottom:30px;
	float:left;
	transition:0.3s;
}

/* figure */

@media screen and (max-width: 900px) {
	.img-auto-width img, .img-auto-width figure, .img-auto-width .item { width:calc(33.333% - 30px); }
}

@media screen and (max-width: 800px) {
	.img-auto-width img, .img-auto-width figure, .img-auto-width .item { width:calc(50% - 30px); }
}

@media screen and (max-width: 640px) {
	.img-auto-width img, .img-auto-width figure, .img-auto-width .item { width:calc(100% - 30px)!important; }
}

.img-auto-width figure { text-align:center; }

.img-auto-width figure img {
	width:100% !important;
	height:auto;
	margin-bottom:15px;
}

/* alternative */

.img-auto-width .item a {
	width:100%;
	height:300px !important;
	display:block;
	background-position:center top;
	background-repeat:no-repeat;
	background-size:contain;
}

/* alternative figure */

.img-auto-width .item figure {
	width:100% !important;
}

.img-auto-width .item figure a {
	margin-bottom:15px;
}