@charset "UTF-8";
/* コンテンツ幅：PC */
/* 最大コンテンツ幅：PC */
/* サイドバー幅：PC */
@import url("https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:400,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Overlock:ital,wght@1,700&display=swap");
@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes floating {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

/* -------------------------------------------------------------------------------- */
/*	メインコンテンツ
/* -------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  #main__wrapper {
    padding-top: 50px;
  }
}

/* -------------------------------------------------------------------------------- */
/*	キービジュアル
/* -------------------------------------------------------------------------------- */
@media only screen and (min-width: 1280px) {
  body.home {
    overflow-x: hidden;
  }
}

#kv__wrapper {
  margin-top: -100px;
  overflow-x: hidden;
}

@media only screen and (min-width: 1280px) {
  #kv__wrapper {
    overflow-x: visible;
    margin-bottom: -70px;
  }
}

@media only screen and (max-width: 767px) {
  #kv__wrapper {
    overflow-x: visible;
    margin-top: 0;
  }
}

#kv {
  height: 760px;
  background-image: url("../images/home/kv_img@2x.png");
  background-position: right -20% bottom;
  background-repeat: no-repeat;
  background-size: 1400px;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  min-width: 653px;
}

@media only screen and (min-width: 768px) and (max-width: 880px) {
  #kv {
    left: 50vw;
    right: 50vw;
  }
}

@media only screen and (min-width: 1280px) {
  #kv {
    background-position: right 60px bottom;
  }
}

@media only screen and (min-width: 1600px) {
  #kv {
    background-position: center bottom;
  }
}

@media only screen and (max-width: 767px) {
  #kv {
    height: auto;
    width: auto;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    min-width: 0;
    background-image: url("../images/home/kv_img-xs@2x.png");
    background-position: center top;
    background-size: 100% auto;
    padding-top: 77.33333%;
    margin-bottom: -8%;
  }
}

#kv #kv_logo,
#kv #kv_phrase {
  position: absolute;
}

#kv #kv_logo img,
#kv #kv_phrase img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

#kv #kv_logo {
  top: 164px;
  right: 50%;
  margin-right: 110px;
  width: 20%;
  max-width: 274px;
  min-width: 246px;
  -webkit-animation: floating 3s ease infinite;
  animation: floating 3s ease infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@media only screen and (min-width: 1280px) {
  #kv #kv_logo {
    top: 74px;
    margin-right: 210px;
  }
}

@media only screen and (max-width: 767px) {
  #kv #kv_logo {
    right: auto;
    min-width: 126px;
    top: calc( 60px + 10%);
    left: 20px;
  }
}

#kv #kv_phrase {
  bottom: 40px;
  right: 50%;
  margin-right: -12%;
  width: 50%;
  max-width: 528px;
  min-width: 400px;
}

@media only screen and (min-width: 768px) and (max-width: 880px) {
  #kv #kv_phrase {
    margin-right: -20px;
    bottom: 0;
  }
}

@media only screen and (min-width: 880px) and (max-width: 992px) {
  #kv #kv_phrase {
    margin-right: -6%;
  }
}

@media only screen and (min-width: 1280px) {
  #kv #kv_phrase {
    bottom: 100px;
    margin-right: -110px;
    max-width: 597px;
  }
}

@media only screen and (min-width: 1280px) and (max-width: 1360px) {
  #kv #kv_phrase {
    margin-right: -12%;
  }
}

@media only screen and (min-width: 1480px) {
  #kv #kv_phrase {
    margin-right: -60px;
  }
}

@media only screen and (max-width: 767px) {
  #kv #kv_phrase {
    right: auto;
    bottom: auto;
    width: auto;
    min-width: 0;
    position: relative;
    margin-right: auto;
    top: -35px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media only screen and (min-width: 400px) and (max-width: 599px) {
  #kv #kv_phrase {
    top: -50px;
  }
}

@media only screen and (min-width: 600px) and (max-width: 699px) {
  #kv #kv_phrase {
    top: -60px;
  }
}

@media only screen and (min-width: 700px) and (max-width: 767px) {
  #kv #kv_phrase {
    top: -80px;
  }
}

/* -------------------------------------------------------------------------------- */
/*	予約
/* -------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  .contact#contact {
    position: relative;
  }
  .contact#contact .contact__list {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .contact#contact .contact__item {
    padding-left: 5px;
    padding-right: 5px;
  }
  .contact#contact .contact__item.phone, .contact#contact .contact__item.appointment {
    width: auto;
  }
  .contact#contact .contact__item.phone {
    -webkit-flex-basis: 54.16667%;
        -ms-flex-preferred-size: 54.16667%;
            flex-basis: 54.16667%;
  }
  .contact#contact .contact__item.appointment {
    margin-left: 0;
    -webkit-flex-basis: 45.83333%;
        -ms-flex-preferred-size: 45.83333%;
            flex-basis: 45.83333%;
  }
  .contact#contact .contact__item img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
}

/* -------------------------------------------------------------------------------- */
/*	ニコこどもクリニックの特長
/* -------------------------------------------------------------------------------- */
#features {
  max-width: 692px;
  margin-left: auto;
  margin-right: auto;
}

.features-dl .icon {
  display: block;
  width: 60px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: .4em;
}

.features-dl .icon img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

.features-dl > dt + dd {
  margin-top: 1.4em;
}

.features-dl .features-dl-link {
  margin-top: 1em;
}

#features-ouchi > dt + dd {
  background-image: url(../images/ouchi/logo-mark_niko-no-ouchi@2x.png);
  background-position: right -20px bottom;
  background-repeat: no-repeat;
  background-size: 200px;
  padding-bottom: 100px;
}

/* -------------------------------------------------------------------------------- */
/*	ピックアップ
/* -------------------------------------------------------------------------------- */
#pickup {
  padding-bottom: 60px;
  position: relative;
}

#pickup:before {
  content: "";
  display: block;
  width: 96px;
  height: 174px;
  background-image: url("../images/lib/character-01@2x.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  bottom: -40px;
  pointer-events: none;
}

#pickup__list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

#pickup__list > li {
  -webkit-flex-basis: 300px;
      -ms-flex-preferred-size: 300px;
          flex-basis: 300px;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  padding-left: 10px;
  padding-right: 10px;
}

@media only screen and (max-width: 767px) {
  #pickup__list > li {
    padding-left: 0;
    padding-right: 0;
    max-width: 260px;
  }
}

@media only screen and (max-width: 767px) {
  #pickup__list > li + li {
    margin-top: 20px;
  }
}

#pickup__list > li img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* -------------------------------------------------------------------------------- */
/*	各種おしらせ / Facebook タイムライン
/* -------------------------------------------------------------------------------- */
#latest-info {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media only screen and (max-width: 767px) {
  #latest-info {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
}

#latest-info #timetable-area {
  display: none;
}

@media only screen and (max-width: 767px) {
  #latest-info #timetable-area {
    display: block;
  }
}

#latest-info #news-area {
  padding-right: 20px;
  width: 100%;
}

@media only screen and (max-width: 767px) {
  #latest-info #news-area {
    padding-right: 0;
  }
}

#latest-info #fb-area {
  -webkit-flex-basis: 386px;
      -ms-flex-preferred-size: 386px;
          flex-basis: 386px;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  margin-top: 2.4em;
}

@media only screen and (max-width: 767px) {
  #latest-info #fb-area {
    -webkit-flex-basis: auto;
        -ms-flex-preferred-size: auto;
            flex-basis: auto;
    margin-top: 0;
    width: 100%;
  }
}

#news-ouchi {
  position: relative;
}

#news-ouchi:before {
  content: "";
  display: block;
  width: 106px;
  height: 156px;
  background-image: url("../images/lib/character-02@2x.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  top: -70px;
  pointer-events: none;
}

@media only screen and (max-width: 767px) {
  #news-ouchi:before {
    top: -40px;
  }
}

@media only screen and (max-width: 767px) {
  #news-ouchi .ttl-lv2 {
    padding-right: 106px;
  }
}

#fb-area {
  position: relative;
}

@media only screen and (max-width: 767px) {
  #fb-area {
    padding-bottom: 120px;
  }
}

#fb-area:before, #fb-area:after {
  content: "";
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  pointer-events: none;
}

#fb-area:before {
  width: 108px;
  height: 175px;
  background-image: url("../images/lib/character-03@2x.png");
  right: 0;
  bottom: -30px;
}

@media only screen and (max-width: 767px) {
  #fb-area:before {
    right: -30px;
    bottom: -70px;
  }
}

#fb-area:after {
  width: 129px;
  height: 180px;
  background-image: url("../images/lib/character-04@2x.png");
  right: 118px;
  bottom: -50px;
}

@media only screen and (max-width: 767px) {
  #fb-area:after {
    right: 38px;
    bottom: -90px;
  }
}

@media only screen and (max-width: 767px) {
  #fb-area .fb_iframe_widget,
  #fb-area .fb_iframe_widget > span,
  #fb-area .fb_iframe_widget iframe {
    height: 500px !important;
  }
}

/* -------------------------------------------------------------------------------- */
/*	サイドバー
/* -------------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
  #sidebar {
    padding-top: 50px;
  }
}

/* -------------------------------------------------------------------------------- */
/*	グローバルナビ
/* -------------------------------------------------------------------------------- */
#gnav .nav__list .nav__item.english:first-child {
  margin-bottom: 36px;
}
/*# sourceMappingURL=home.css.map */