@charset "utf-8";


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

  予防メインテナンス

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

@media screen and (min-width:641px) {
}

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

.not-top .center-cols{
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.prevention-hdline{
  position:relative;
  text-align: center;
  font-weight: 300;
  font-family: "Noto Serif Japanese";
}

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

.prevention-gallery{
  display: grid;
}

@media screen and (min-width:641px) {
  .prevention-hdline{
    padding-bottom: 20px;
    margin-bottom: 30px;
  }
  .prevention-gallery{
    margin: 40px 0 160px;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
}

@media screen and (max-width:640px) {
  .prevention-hdline{
    padding-bottom: 10px;
    margin-bottom: 15px;
  }

  .prevention-gallery{
    margin: 40px 0 80px;
    grid-template-columns: repeat(1,1fr);
    grid-column-gap: 0px;
    grid-row-gap: 30px;
  }
}


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

  予防メインテナンス

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

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

.back-blue {
  background-color: #D1F0F7;
}

.maintenance-box {
  background-color: #efebe2;
  position: relative;
}

.maintenance-box:not(:first-of-type)::before{
  content: "";
  z-index: -1;
  position: absolute;
  width: 2px;
  height: 100px;
  background-color: #ededed;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
}

.maintenance-ttl {
  position:relative;
}

.maintenance-ttl .hdline {
  /*color:#19873b;*/
  color:#b19e74;
  /*font-weight:700;*/
  font-weight:400;
  line-height:1.4;
  /*font-family: "Noto Serif Japanese";*/
}

.maintenance-ttl .no {
  line-height:1;
  font-weight:900;
  text-align:center;
  padding-bottom:0.3em;
  border-bottom:4px dotted #7c693f;
}

.maintenance-ttl .no svg {
  display:inline-block;
  width:1em;
  height:1em;
  overflow:visible;
}

.maintenance-ttl .no text {
  fill:#7c693f;
  /*stroke:#7c693f;*/
  /*stroke:#e2dbc9;*/
  font-family: "Noto Serif Japanese";
  /*stroke-width:2;*/
  /*stroke-width:1;*/
  stroke-linejoin:round;
}
    
.maintenance-txt p {
  padding-top:1em;
  text-align:left;
}

.maintenance-txt .btn {
  padding-top:2em;
}

.maintenance-photo.photos {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}

.photos__item--2 {
  width:67%;
}

.photos__item--1 {
  width:30%;
}

@media print,screen and (min-width:641px) {
  .maintenance {
    padding-top:0.5em;
    padding-bottom:96px;
  }
  
  .maintenance-box:not(:first-child) {
    margin-top:80px;
  }
	
	.maintenance-box:last-child {
    margin-bottom:160px;
  }
  
  .maintenance-box {
    display:grid;
    display:-ms-grid;
    grid-template-columns:50% 50%;
    grid-template-rows:auto auto;
    -ms-grid-columns:50% 50%;
    -ms-grid-rows:auto auto;
  }
  
  .maintenance-ttl {
    grid-column:1 / 2;
    grid-row:1;
    -ms-grid-column:1;
    -ms-grid-row:1;
    text-align:left;
    padding:96px 72px 0 72px;
  }
  
  .maintenance-ttl .no {
    /*width:96px;*/
	  width: 120px;
    position:absolute;
    left:40px;
    top:-0.4em;
  }
  
  .maintenance-txt {
    grid-column:1 / 2;
    grid-row:2;
    -ms-grid-column:1;
    -ms-grid-row:2;
    text-align:left;
    padding:0.2em 72px 72px 72px;
  }
  
  .maintenance-photo {
    grid-column:2 / 3;
    grid-row:1 / 4;
    -ms-grid-column:2;
    -ms-grid-row:1;
    -ms-grid-row-span:3;
    padding:56px 56px 56px 0;
  }

  .maintenance-photo img {
    /*border-radius:8px;*/
    /*height:390px;*/
    height:300px;
    object-fit:cover;
    font-family:"object-fit:cover;"
  }
 
}

@media screen and (max-width:640px) {
  .maintenance {
    padding-bottom:2.5em;
  }
  
  .maintenance-box {
    padding:0 1.75em 2em 1.75em;
  }
  
  .maintenance-box:not(:first-child) {
    margin-top:2.5em;
  }
	
  .maintenance-box:last-child {
    margin-bottom:80px;
  }
  
  .maintenance-ttl {
    padding-top:3.75em;
    padding-bottom:1.5em;
  }
  
  .maintenance-ttl .no {
    font-size:2.4em;
    width:2.2em;
    background-size:auto 0.18em;
    position:absolute;
    left:50%;
    top:-0.4em;
    transform:translateX(-50%);
  }
  
  .maintenance-photo img {
/*    border-radius:5px;*/
    width:100%;
    height:-webkit-calc(300 / 640 * 100vw);
    height:calc(300 / 640 * 100vw);
    object-fit:cover;
    font-family:"object-fit:cover;"
  }
  
  .maintenance-photo.photos img {
    height:-webkit-calc(250 / 640 * 100vw);
    height:calc(250 / 640 * 100vw);
  }
  
  .maintenance-txt {
    padding-top:0.5em;
  }
  
  .maintenance-txt .btn {
    padding-top:1.75em;
    padding-bottom:0.5em;
  }
}

@media screen and (max-width:560px) {
  .maintenance-box {
    padding-left:1.5em;
    padding-right:1.5em;
  }
}



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

  当院の診療に関するQ&A

====================================================================================================*/
.qa-hdline{
  padding-top: 40px;
  margin-bottom: 40px;
}
.qa{
	padding-bottom: 80px;
}

.qa-box{
  border-radius:10px;
  background-color:#fff;
  margin-bottom: 80px;
  padding: 30px;
}
.qa-box:last-of-type{
  margin-bottom: 0px;
}

.qa-ttl{
  font-size:1.33em;
  font-weight: 400;
  padding-bottom: 10px;
  border-bottom: 3px dotted #dedede;
  text-indent: -2.22em;
  padding-left: 2.22em;
}

.qa-txt{
  text-indent: -2.4em;
  padding-left: 2.4em;
  
}
.qa-ttl::before{
  content: "Q.";
  font-weight: 400;
  color: #32a5d7;
}

.qa-txt::before{
  content: "A.";
  font-weight: 400;
  color: #eb3c46;
  line-height: 1.4;
}

.qa-ttl::before{
  font-size:1.66em;
  margin-right: 10px;
}

.qa-txt::before{
  font-size:2.11em;
  margin-right: 10px;
}

.qa-ttl{
  margin-bottom: 20px;
}

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

  セルフケアについて

====================================================================================================*/
.selfcare{
  display: flex;
  align-items: center;
}

@media print,screen and (min-width:641px) {
  .selfcare{
    margin-top: 80px;
    margin-bottom: 80px;
  }
	
  .selfcare-box dt{
    margin-bottom:20px;
  }
	
  .selfcare img{
    max-width:400px; 
  }
	
  .selfcare-box{
    margin-right: 30px;
  }
}

@media screen and (max-width:640px) {
  .selfcare{
    flex-wrap: wrap;
	margin-top: 60px;
    margin-bottom: 60px;
  }

  .selfcare-box dt{
    margin-bottom:10px;
  }
	
  .selfcare img{
    width: 100%; 
  }	
	
  .selfcare-box{
    margin-bottom: 20px;
  }
}
/*====================================================================================================

  POICウォーターについて

====================================================================================================*/
@media print,screen and (min-width:641px) {
  .poic-box{
    margin-bottom:20px;
  }
  .poic-box dt{
    margin-bottom:20px;
  }
}

@media screen and (max-width:640px) {
  .poic-box{
    margin-bottom:30px;
  }
  .poic-box dt{
    margin-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;
}


div.movie-box {
  width: 100%;/*背景色を横幅いっぱいに広げる*/
  text-align: center;
  padding: 4% 4% 4% 4%;/*ここで動画の周りの余白を調整*/
  background: #e6e6e6;/*余白の背景色*/
  }
  video.vid_main {
  width: 100%;
  max-width: 900px;/*PC版での最大幅*/
  }

@media screen and (min-width:641px) {
  .movie-box{
    margin: 40px auto 160px;
  }
}

@media screen and (max-width:640px) {
  .movie-box{
    margin: 40px auto 80px;
  }
}