@charset "utf-8";

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

  当院の特徴

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

.tokucho-box {
  border-radius:10px;
  background-color:#fff;
}

.tokucho-ttl {
  position:relative;
}

.tokucho-ttl .hdline {
  color:#12aaa5;
  font-weight:700;
  line-height:1.4;
}

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

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

.tokucho-ttl .no text {
  fill:#fff;
  stroke:#12aaa5;
  stroke-width:2;
  stroke-linejoin:round;
}
    
.tokucho-txt p {
  padding-top:1em;
  text-align:left;
}

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

.tokucho-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) {
  .tokucho {
    padding-top:0.5em;
    padding-bottom:96px;
  }
  
  .tokucho-box:not(:first-child) {
    margin-top:80px;
  }
  
  .tokucho-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;
  }
  
  .tokucho-ttl {
    grid-column:1 / 2;
    grid-row:1;
    -ms-grid-column:1;
    -ms-grid-row:1;
    text-align:left;
    padding:96px 72px 0 72px;
  }
  
  .tokucho-ttl .no {
    width:96px;
    position:absolute;
    left:40px;
    top:-0.4em;
  }
  
  .tokucho-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;
  }
  
  .tokucho-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;
  }

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

@media screen and (max-width:640px) {
  .tokucho {
    padding-bottom:2.5em;
  }
  
  .tokucho-box {
    padding:0 1.75em 2em 1.75em;
  }
  
  .tokucho-box:not(:first-child) {
    margin-top:2.5em;
  }
  
  .tokucho-ttl {
    padding-top:3.75em;
    padding-bottom:1.5em;
  }
  
  .tokucho-ttl .no {
    font-size:2.4em;
    width:2.2em;
    background-size:auto 0.18em;
    position:absolute;
    left:50%;
    top:-0.4em;
    transform:translateX(-50%);
  }
  
  .tokucho-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;"
  }
  
  .tokucho-photo.photos img {
    height:-webkit-calc(250 / 640 * 100vw);
    height:calc(250 / 640 * 100vw);
  }
  
  .tokucho-txt {
    padding-top:0.5em;
  }
  
  .tokucho-txt .btn {
    padding-top:1.75em;
    padding-bottom:0.5em;
  }
}

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