@charset "utf-8";

/*====================================================================================================

  当院について

====================================================================================================*/

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

 イントロ
  
----------------------------------------------------------------------------------------------------*/
.m-red {
  background: linear-gradient(rgba(255,255,255,0) 55%, #ffd3c7 55%);
  font-weight: 400; 
}

.m-blue {
  background: linear-gradient(rgba(255,255,255,0) 55%, #CAEDE2 55%);
  font-weight: 400; 
}

.m-green {
  background: linear-gradient(rgba(255,255,255,0) 55%, #81E69F 55%);
  font-weight: 400; 
}



.clinic-intro .inner{
  display: flex;
}

@media screen and (min-width: 641px) {
  .clinic-intro .inner{
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .clinic-intro .inner .img-box{
    max-width: 500px;
  }

  .clinic-intro .inner .txt-box{
    max-width: 750px;
    margin-right: 30px;
  }
    
}

@media screen and (max-width: 640px) {
  .clinic-intro .inner{
    flex-wrap: wrap;
    justify-content: center;
  }
    
  .clinic-intro .inner .txt-box{
    margin-bottom: 30px;
  }

}

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

 4つのお願い
  
----------------------------------------------------------------------------------------------------*/

span.sub{
  font-size: 20px;
}

.cancel-policy-hdline {
  text-align: center;
}

.cancel-policy-list{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.cancel-policy-list li{
  background-color: #F2FFDB;
  border-radius: 30px;
  box-sizing: border-box;
}

.cancel-policy-list li dl dt {
  position: relative;
  text-align: center;
  color: #19873b;
}

.cancel-policy-list li dl dt span{
  color: rgba(133,204,155,0.5);
  position: absolute;
} 

@media screen and (min-width: 641px) {
  .cancel-policy{
    margin-top: 80px;
  }
    
  .cancel-policy-list{
    margin-top: 60px;
    margin-bottom: 30px;
  }
    
  .cancel-policy-list li{
    width: calc( 50% - 15px);
    padding: 30px 60px;
  }
    
  .cancel-policy-list li:nth-child(odd){
    margin-right: 30px;
  }
    
  .cancel-policy-list li:nth-child(-n+2){
    margin-bottom: 30px;
  }
    
  .cancel-policy-list li dl dt {
    margin-bottom: 30px;
  }
  
  .cancel-policy-list li dl dt span{
    font-size: 100px;
    top: -100px;
    left: -64px;
  } 
  
  .cancel-policy-list li dl dd .img-box{
   margin-bottom: 30px;
  }
    
}

@media screen and (max-width: 640px) {
  .cancel-policy{
    margin-top: 100px;
  }
    
  .cancel-policy-list{
    margin-top: 60px;
    margin-bottom: 45px;
  }
    
  .cancel-policy-list li{
    width:100%;
    padding: 20px 30px 30px 30px;
  }
    
  .cancel-policy-list li:not(:last-child){
    margin-bottom: 45px;
  }
    
  .cancel-policy-list li dl dt {
    margin-bottom: 20px;
  }
    
  .cancel-policy-list li dl dt span{
    font-size: 80px;
    top: -80px;
    left: -36px;
  }
    
  .cancel-policy-list li dl dd .img-box{
    margin-bottom: 20px;
  }
    
}

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

キャンセルポリシーについて

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

.about-cancel-policy{
  background-color: #F2FFDB;
  border-radius: 30px;
  box-sizing: border-box;
}

.about-cancel-policy h3{
  text-align: center;
  color: #DC8369;
}

.about-cancel-policy h3::before{
  content: "";
  display: inline-block;
  background:url("../image/caution.png");
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: contain;
}

.about-cancel-policy .inner{
  display: flex;
}

.about-cancel-policy .inner  .img-box{
  max-width: 500px;
}

@media screen and (min-width: 641px) {
  .about-cancel-policy{
    padding: 30px 60px;
  }
    
  .about-cancel-policy h3::before{
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
    
  .about-cancel-policy h3{
    margin-bottom: 30px;
  }
    
  .about-cancel-policy .inner{
    flex-wrap: nowrap;
  }
    
  .about-cancel-policy .inner .txt-box{
    max-width: 630px;
    margin-right: 30px;
  }
    
}

@media screen and (max-width: 640px) {
  .about-cancel-policy{
    padding: 20px 30px 30px 30px;
  }
    
  .about-cancel-policy h3::before{
    width: 40px;
    height: 40px;
    margin-right: 5px;
  }
  
  .about-cancel-policy h3{
    margin-bottom: 20px;
  }
    
  .about-cancel-policy .inner{
    flex-wrap: wrap;
  }
    
  .about-cancel-policy .inner .txt-box{
    width: 100%;
    margin-bottom: 30px;
  }

}

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

感染対策について
  
----------------------------------------------------------------------------------------------------*/

.infection-control > dl{
  margin: 60px 0;
}

.infection-control-hdline {
  text-align: center;
  background-color: #32a5d7;
  padding: 0.5em 0;
  border-radius: 20px;
}

.infection-control-hdline::before{
  content: "";
  display: inline-block;
  background: url(../image/infection-control-hdline.png);
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: contain;
}

.infection-control-list{
  list-style: none;
}

.infection-control-list{
  display: flex;
  flex-wrap: wrap;
}

.infection-control-item{
  background-color: #D1F0F7;
  border-radius: 30px;
  box-sizing: border-box;
}

.infection-control-item img{
	border-radius: 30px;
}

.infection-control-ttl{  
  text-align: center;
}

.infection-control-ttl{
  margin-bottom: 20px;
}

.infection-control-ttl span.point{
  font-size: 15px;
  font-weight: 300px;
  color:#32a5d7;
  display: block;
}

@media screen and (min-width: 641px) {
  .infection-control {
    margin-top: 80px;
  }
    
  .infection-control-hdline::before{
    width: 40px;
    height: 40px;
    margin-right: 5px;
  }
    
  .infection-control > dl{
    margin: 60px 0;
  }
    
  .infection-control-item{
    padding: 30px 60px;
  }
    
  .infection-control-item:not(:last-child){
    margin-bottom: 30px;
  }
    
  .infection-control-list li.infection-control-item:nth-child(1),
  .infection-control-list li.infection-control-item:nth-child(4) {
    width: 100%;
  }

  .infection-control-list li.infection-control-item:nth-child(2),
  .infection-control-list li.infection-control-item:nth-child(3) {
    width: calc( 50% - 15px );
  }

  .infection-control-list li.infection-control-item:nth-child(2){
    margin-right:30px;
  }
    
  .infection-control-item > p{
    margin-top: 20px;
  }
}

@media screen and (max-width: 640px) {
  .infection-control {
    margin-top: 120px;
  }
    
  .infection-control-hdline::before{
    width: 30px;
    height: 30px;
    margin-right: 5px;
  }
    
  .infection-control > dl{
    margin: 40px 0;
  }
    
  .infection-control-item{
    padding: 20px 20px 30px 20px;
  }
    
  .infection-control-item:not(:last-child){
    margin-bottom: 40px;
  }
    
  .infection-control-list li.infection-control-item {
    width: 100%;
  }

  .infection-control-list li.infection-control-item:nth-child(2){
    margin-right:0px;
  }
    
  .infection-control-item > p{
    margin-top: 10px;
  }
}

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

階層下

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

.h-1down-list {
  list-style: none;
}
/*-------------------------------------------

滅菌した器具の使用

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

.sterilization-list{
  display: flex;
}

.sterilization-list li{
  background-color: #fff;
  border-radius: 30px;
  box-sizing: border-box;
}

.sterilization-list li dt{
  text-align: center;
}

.sterilization-list li dd:first-of-type{
  margin: 10px 0 20px;
}

@media screen and (min-width: 641px) {
  .sterilization-list{
    flex-wrap: nowrap;
  }
  .sterilization-list li{
    width: calc( 50% - 15px );
    padding: 15px 30px;
  }
    
  .sterilization-list li:first-child{
    margin-right: 30px;
  }

}

@media screen and (max-width: 640px) {
  .sterilization-list{
    flex-wrap: wrap;
  }
    
  .sterilization-list li{
    width: 100%;
    padding: 10px 20px 20px 20px;
  }
    
  .sterilization-list li:first-child{
    margin-bottom: 30px;
  }

}

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

院内の水へのこだわり

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

.water-list{
  list-style: disc;
  background-color: #fff;
  border-radius: 30px;
  box-sizing: border-box;
}

.water-list li:not(:last-child){
  border-bottom: dashed 2px #ededed;
}

.water-list {
  margin-bottom: 30px;
}

@media screen and (min-width: 641px) {
  .water-list {
    padding: 15px 30px 15px 60px;
  }
    
  .water-list li:not(:last-child){
    margin-bottom: 10px;
    padding-bottom: 5px;
  }
}

@media screen and (max-width: 640px) {
  .water-list {
    padding: 20px 20px 20px 40px;
  }
    
  .water-list li:not(:last-child){
    margin-bottom: 15px;
    padding-bottom: 10px;
  }
}

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

院内・器材紹介
  
----------------------------------------------------------------------------------------------------*/

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

.img-auto-width {
	position:relative;
	width:calc(100% + 30px);
}

.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);
}

/* 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: 750px) {
	.img-auto-width { width: 100% !important; }
	.img-auto-width img, .img-auto-width figure, .img-auto-width .item { width:100% !important; }
	.img-auto-width.column4 { width:calc(100% + 30px) !important; }
	.img-auto-width.column4 figure, .img-auto-width.column4 .item { width:calc(50% - 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;
}
/* -----------------------------------------------------------------------------
	
 -------------------------------------------------------------------------------*/

.item-intro{
	text-align: left;
	font-size: 16px;
}

.clinic-intro-hdline{
  text-align: center;
  background-color: #F2FFDB;
  box-sizing: border-box;
	border: 1px solid #67C383;
  padding: 0.5em 0;
  border-radius: 20px;
  color: #19873b;
}

.clinic-intro-hdline-small{
  text-align: center;
  /*background-color: #F2FFDB;*/
  padding: 0.5em 0;
  border-radius: 20px;
  color: #19873b;border: 1px solid #67C383;
}

@media screen and (min-width: 641px) {
  .clinic-intro-hdline{
	margin-top:60px;
    margin-bottom:30px;
  }
	
  .clinic-intro-hdline-small{
	margin-top:60px;
    margin-bottom:30px;
  }
}

@media screen and (max-width: 640px) {
  .clinic-intro-hdline{
	margin-top:30px;
    margin-bottom:20px;
  }
	
  .clinic-intro-hdline-small{
	margin-top:30px;
    margin-bottom:20px;
  }
}
/* -----------------------------------------------------------------------------
	
 -------------------------------------------------------------------------------*/


.readmore {
	position: relative;
	/* margin: 50px auto 0; */
	padding: 0 0 75px;
  }
  
  .readmore label {
	position: absolute;
	display: table;
	left: 50%;
	bottom: 0;
	margin: 0 auto;
	width: 200px;
	padding: 10px 0;
	color: #19873b;
	text-align: center;
	border-radius: 5px;
	background-color: #F2FFDB;
	transform: translateX(-50%);
	cursor: pointer;
	z-index: 1;
  border-radius: 8px;
  }
  
  .readmore label::before{
	content: '施設基準詳細';
  }
  
  .readmore input[type="checkbox"]:checked ~ label::before {
	content: '元に戻す';
  }
  
  .readmore input[type="checkbox"]{
	display: none;
  }
  
  .readmore-content {
	position: relative;
	/* height: 200px; */
	height: 0px;
	overflow: hidden;
  }
  
  .readmore input[type="checkbox"]:checked ~ .readmore-content {
	height: auto;
  }