@charset "UTF-8";

/* ---------------------------------------------------------------- */
/* -------------------------- HOME ページ -------------------------- */
/* ---------------------------------------------------------------- */
.mv {
  height: 685px;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
  }
}

.mv__bg {
  background: rgb(242, 172, 62, .3);
  width: 100%;
  height: 685px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.mv__inner {
  font-size: 3em;
  width: 10em;
  font-weight: 600;
  color: #fff;
  text-shadow: 0px 0px 5px #69491a;
  position: absolute;
  top: 30%;
  left: 75%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

@media screen and (max-width: 979px) {
  .mv__inner {
    font-size: 2.3em;
    top: 5em;
    width: 10em;
    left: 52%;
    transform: translate(-50%, -50%);
  }
}


/* feature */
.feature {
  background-color: antiquewhite;
  padding: 80px 0;
}

@media screen and (max-width: 979px) {
  .feature {
    padding: 40px 0;
  }
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.item {
  padding: 20px;
  width: 32%;
  background-color: #f9f9f9;

  img {
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 979px) {
  .item {
    padding: 20px;
    width: calc(100% - 20px);
    margin: 20px auto auto;
  }

}

.item:not(:nth-child(3n+3)) {
  margin-right: 2%;
}

@media screen and (max-width: 979px) {
  .item:not(:nth-child(3n+3)) {
    margin-right: auto;
  }
}

.item:nth-child(n+4) {
  margin-top: 30px;
}

@media screen and (max-width: 979px) {
  .item:nth-child(n+4) {
    margin-top: 20px;
  }
}

h4 {
  color: #F2AB39;
  text-align: center;
  margin: 5px 0;
}

/*!!!!!!! 代表挨拶 !!!!!!!*/

.greeting {
  max-width: 980px;

  img {
    width: min(100%, 300px);
    height: min(100%, 300px);
    object-fit: cover;
  }

  @media screen and (max-width: 979px) {
    img {
      margin: auto;
    }
  }
}

@media screen and (max-width: 979px) {
  .greeting {
    margin-inline: 20px;
  }
}

.greeting__txt {
  width: calc(100% - 500px);

  h3 {
    padding: .5em 0;
    color: #fff;
    background: #69491A;
    display: inline;
  }

  @media screen and (max-width: 979px) {
    h3 {
      display: block;
      font-size: 20px;
      margin-top: 20px;
      text-align: center;
    }
  }

  /* p {
    margin-top: 1.5em;
  } */

  h4 {
    text-align: left;
    color: #69491A;
  }

}

@media screen and (max-width: 979px) {
  .greeting__txt {
    width: 100%;
  }
}

/*!!!!!!! こんなお悩みはございませんか !!!!!!!*/

.trouble {
  background-color: #FFFDEC;
  padding-bottom: 80px;
  margin-top: 80px;

  h2 {
    font-size: 35px;
    text-align: center;
  }

  @media screen and (max-width: 979px) {
    h2 {
      font-size: 22px;
    }
  }
}

@media screen and (max-width: 979px) {
  .trouble {
    padding-bottom: 40px;
    margin-top: 40px;
  }
}

.trouble__box {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #fff;
  box-sizing: border-box;
  margin-top: 30px;
  /* 
  img {
    width: 270px;
    height: 200px;
    object-fit: cover;
    margin: auto;
  } */
}

@media screen and (max-width: 750px) {
  .trouble__box {
    margin-top: 20px;
    padding-bottom: 30px;
    flex-wrap: wrap;

    img {
      margin-bottom: 1em;
    }
  }
}

.trouble__box-txt {
  width: calc(100% - 305px);

  ul li {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
  }

  ul li:not(:last-of-type) {
    margin-bottom: 1em;
  }
}

@media screen and (max-width: 979px) {
  .trouble__box-txt {
    width: 100%;
    margin-inline: 20px;

    ul li {
      font-size: 16px;
    }
  }
}

.trouble__box+p {
  margin-top: 20px;
  margin-inline: 20px;
  text-align: center;
}

.check-box ul {
  position: relative;
}

.check-box ul li {
  list-style-type: none !important;
}

.check-box ul li:before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 30px;
  background: url(../img/check-box.png) no-repeat;
  background-size: inherit;
  margin-right: 8px;
}

/*!!!!!!! ご予約・ご相談はこちらから !!!!!!!*/


/*!!!!!!! 多くの患者様にご愛顧いただいています !!!!!!!*/
.impression {
  position: relative;

  img {
    width: calc(100% / 3 - 10px);
  }

  img:nth-child(n+4) {
    margin-top: 15px;
  }

  p {
    text-align: center;
    margin-top: 20px;
    margin-inline: 20px;
  }
}

.impression__bg {
  background-color: #FFFDEC;
  padding-block: 80px;
}

@media screen and (max-width: 979px) {
  .impression__bg {
    padding-block: 70px;
    padding-bottom: 40px;
  }
}

/* flow */
.flow {
  max-width: 980px;
}


.ranking {
  counter-reset: rank;
  padding: 0;
  width: min(calc(100% - 20px), 750px);
  margin: 0 auto;
}

.ranking li {
  position: relative;
  display: flex;
  justify-content: space-between;
  /* flex-wrap: wrap; */
  align-items: center;
}

.ranking li:not(:last-child) {
  margin-bottom: 50px;
}

.ranking li div {
  margin-left: 30px;
  width: calc(100% - 380px);
}

@media screen and (max-width: 979px) {
  .ranking li div {
    margin-inline: 20px;
    width: 100%;
  }
}

.ranking li::before {
  counter-increment: rank;
  content: "Step " counter(rank);
  position: absolute;
  font-size: 2em;
  color: #ffbc00;
  top: -1.1em;
  left: 0;
}

@media screen and (max-width: 550px) {
  .ranking li {
    flex-wrap: wrap;
    justify-content: center;
  }

  .ranking li::before {
    left: 1em;
  }
}

.ranking img {
  width: min(100%, 310px);
  object-fit: cover;
  border-radius: 0px 120px 0px 120px;
  border: solid #ffbc00;
}

/* ribon */
.ribon {
  width: min(100%, 700px);
  line-height: 60px;
  position: absolute;
  height: 60px;
  margin: 0 auto 30px;
  padding: 0 2rem;
  text-align: center;
  color: #fff;
  background: #F2AB39;
  left: 50%;
  transform: translate(-50%);
  top: 7%;
}

@media screen and (max-width: 979px) {
  .ribon {
    width: 75%;
    margin: 0 auto 20px;
    font-size: 18px;
    line-height: 1.2;
    height: 60px;
    padding: .5em 0rem;
    text-align: center;
    color: #fff;
    background: #F2AB39;
    top: 4%;
  }
}

.ribon:before,
.ribon:after {
  position: absolute;
  top: 0;
  display: block;
  height: 48px;
  content: '';
  border: 30px solid #F2AB39;
}

.ribon:before {
  left: -40px;
  border-left-width: 15px;
  border-left-color: transparent;
}

.ribon:after {
  right: -40px;
  border-right-width: 15px;
  border-right-color: transparent;
}

.ribon span {
  position: relative;
  display: block;
}

.list ul {
  border: solid 2px #ffb03f;
  padding: 0.5em 1em;
  position: relative;
}

.list ul li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none !important;
  /*ポチ消す*/
}

.list ul li:before {
  content: "\f00c";
  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
  font-weight: 900;
  margin-right: 0.6rem;
  color: #f2ac41;
}

/*!!!!!!! 診療内容 !!!!!!!*/

.treatment {
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;

    li {
      width: calc(100% / 3 - 60px);
    }

    @media screen and (max-width: 979px) {
      li {
        width: calc(100% / 2 - 10px);
      }
    }

    li a {
      width: 100%;
      border: solid 1px #69491A;
      background-color: #69491A;
      color: #fff;
      display: block;
      line-height: 3.8;
      text-align: center;
      transition: all .3s;
    }

    li a:hover {
      color: #69491A;
      background-color: #fff;
      transition: all .3s;

    }
  }

  @media screen and (max-width: 979px) {
    ul {
      gap: 20px;
    }
  }

  .btn-box {
    display: flex;
    justify-content: flex-end;
    margin-top: 60px;
  }

  @media screen and (max-width: 979px) {
    .btn-box {
      margin-top: 30px;
    }
  }
}


/* ---------------------------------------------------------------- */
/* -------------------------- 料金ページ --------------------------- */
/* ---------------------------------------------------------------- */
/*!!!!!!! 保険適用時の料金のご案内 !!!!!!!*/

.all-info {
  p {
    line-height: 2;
  }
}

/*!!!!!!! テーブル !!!!!!!*/

.table_wrap {
  overflow-x: auto;
}

.table_wrap:nth-child(n+2) {
  margin-top: 30px;
}

.table_wrap+p {
  margin-top: 10px;
}

.price_table table {
  width: 980px;
  border: solid 1px #F2AC41;

  tr:nth-of-type(odd) {
    background-color: #FFFDEC;
  }

  th,
  td {
    border: solid 1px #F2AC41;
  }

  th {
    width: 50%;
    text-align: left;
    padding-left: 30px;
    padding-block: 20px;
    font-weight: normal;
  }

  td {
    width: 25%;
    text-align: center;
    padding-block: 20px;
  }

}

@media screen and (max-width: 979px) {
  .price_table table {
    width: 100%;

    th {
      width: 50%;
      text-align: left;
      padding: 10px;
      font-weight: normal;
    }

    td {
      width: 25%;
      text-align: center;
      padding: 10px;
    }
  }
}


.contact.second {
  margin-top: 0;
}


/* ---------------------------------------------------------------- */
/* ---------------------- 当院のご案内ページ -------------------------- */
/* ---------------------------------------------------------------- */
.greeting {

  img {
    width: min(100%, 450px);
    height: min(100%, 450px);
    object-fit: cover;
    border: solid 1px #69491A;
  }

  @media screen and (max-width: 979px) {
    img {
      margin: auto;
    }
  }

  .f-box__justify-sb {
    margin-bottom: 2em;
  }

  p {
    margin-top: 0.5em;
  }

  .greeting__about h3 {
    padding: .5em 1em;
    color: #fff;
    background: #69491A;
    display: block;
    margin-top: 10px;
    letter-spacing: 1px;
  }

  ul {
    margin-top: 10px;
  }

  @media screen and (max-width: 979px) {
    h3 {
      display: block;
      font-size: 20px;
      margin-top: 20px;
      text-align: center;
      padding-left: 0;
    }

    ul,
    p {
      margin-top: 10px;
    }
  }
}

.co_brown {
  font-size: 24px;
  margin-top: 0;
}

.greeting h3 {
  padding: .5em 1em;
  color: #fff;
  background: #69491A;
  display: block;
}

@media screen and (max-width: 979px) {
  .greeting__about {
    width: 100%;

    p:first-of-type {
      font-size: 20px;
      margin-top: 20px;
    }
  }
}

.address_txt {
  font-size: 24px;
  text-align: center;
}

.address_txt+p {
  text-align: center;
  margin-top: 20px;
}

.address {
  @media screen and (max-width: 979px) {
    iframe {
      width: 100%;
      height: 300px;
    }
  }
}

.info {
  h2 {
    font-size: 24px;
  }

  @media screen and (max-width: 979px) {
    h2 {
      font-size: 20px;
    }
  }

  .f-box__justify-sb {
    margin-top: 50px;
  }

  @media screen and (max-width: 979px) {
    .f-box__justify-sb {
      margin-top: 30px;
    }
  }

  figure {
    display: block;
    width: calc(100% / 3 - 30px);

    dl {
      margin-top: .5em;

      dt {
        color: #69491A;
      }

      dd {
        line-height: 1.8;
      }
    }
  }

  @media screen and (max-width: 979px) {
    figure {
      display: block;
      width: 100%;
    }

    figure:nth-child(n+2) {
      margin-top: 20px;
    }
  }
}

/*!!!!!!! 代表挨拶 !!!!!!!*/


/*!!!!!!!! 院内設備 !!!!!!!!!!!*/

.equipment {
  figure {
    display: block;
    width: calc(100% / 3 - 16px);

    figcaption {
      display: block;
      width: 100%;
      background-color: #F2AB39;
      color: #fff;
      text-align: center;
      line-height: 3;
    }
  }

  figure:nth-child(n+4) {
    margin-top: 24px;
  }

  @media screen and (max-width: 979px) {
    figure {
      display: block;
      width: 100%;
    }

    figure:nth-child(n+2) {
      margin-top: 20px;
    }
  }
}

/*!!!!!!!! 院内設備 !!!!!!!!!!!*/

/*!!!!!!!! 診療時間 !!!!!!!!!!!*/

.table_wrap {
  overflow-x: auto;
}

.time_table table {
  width: 980px;
  text-align: center;
  box-sizing: border-box;
  margin: auto;
  th,td {
    border: none;
  }
  th {
    background-color: #F2AB39;
    color: #fff;
    padding: 10px;
  }

  td {
    width: 40px;
    padding: 20px 10px;
    border-bottom: solid 1px #ccc;
  }
}

.table_wrap+p {
  margin-top: 16px;
}
 @media screen and (max-width: 767px) {
  .time_table table {
    width: 100%;
    th {
      padding: 5px;
    }
    td {
      width: auto;
      padding: 5px;
    }
  }
 }


/* ---------------------------------------------------------------- */
/* -------------------------- 施術一覧ページ -------------------------- */
/* ---------------------------------------------------------------- */

.insurance-info p:first-of-type {
  text-align: center;
  margin-bottom: 1em;
}

.insurance-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  li {
    width: calc(100% / 3 - 10px);
    margin-top: 10px;

    a {
      width: 100%;
      display: block;
      background-color: #69491A;
      border: solid 1px #69491A;
      color: #fff;
      line-height: 3;
      text-align: center;
      transition: all .3s;
    }

    a:hover {
      color: #69491A;
      background-color: #fff;
    }
  }

  @media screen and (max-width: 767px) {
    li {
      width: calc(100% / 2 - 5px);
    }
  }
}


.insurance-no-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  li {
    width: calc(100% / 3 - 10px);
    margin-top: 10px;

    a {
      width: 100%;
      display: block;
      background-color: #FFFDEC;
      border: solid 1px #F2AC41;
      color: #F2AC41;
      line-height: 3;
      text-align: center;
      transition: all .3s;
    }

    a:hover {
      color: #fff;
      background-color: #F2AC41;
    }
  }

  @media screen and (max-width: 767px) {
    li {
      width: calc(100% / 2 - 5px);
    }
  }
}

/* ---------------------------------------------------------------- */
/* -------------------------- お知らせページ -------------------------- */
/* ---------------------------------------------------------------- */
.post-archive-thumbnail {
  object-fit: contain;
  height: auto;
}

.news__list {
  display: flex;
  align-items: center;
  gap: 20px;

  border-bottom: solid 2px #EFEFEF;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
  .news__list {
    flex-direction: column;
  }

  .col-sm-3 {
    width: 100%;
  }
}

.news_title {
  width: min(calc(100% - 20px), 1200px);
  margin: auto;
}

.news-day {
  margin-block: 10px;
}


.article {
  figcaption {
    margin-top: 20px;
  }
}

.wp-post-image {
  display: block;
  width: 100%;
  object-fit: contain;
  background-color: antiquewhite;
}

.page_nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: min(calc(100% - 20px), 970px);
  margin: auto;
}

@media screen and (max-width: 787px) {
  .page_nav {
      gap: 10px;
  }
}
.btn__brown,
.btn__orange {
  display: block;
  color: #fff;
  border-radius: 30px;
  padding: 15px 50px;
  transition: all .3s;
  line-height: 1.2;
  text-align: center;
}
.btn__brown {
  background-color: #69491A;
  border: solid 1px #69491A;
}
.btn__brown:hover {
  background-color: #fff;
  color: #69491A;
}
.btn__orange {
  background-color: #F2AB39;
  border: solid 1px #F2AB39;
}
.btn__orange:hover {
  background-color: #fff;
  color: #F2AB39;
}

/*  ページネーション */
.pagination {
  display: flex;
  justify-content: center;
  margin: 3rem 0 5rem 0;
}


.nav-links {
  display: flex;
}

.page-numbers {
  display: inline-block;
  margin-right: 10px;
  padding: 15px 20px;
  border: 2px solid #f2ac41;
  border-radius: 10px;
  color: #f2ac41;
}

.page-numbers.current {
  background: #f2ac41;
  color: #ffffff;
}

.page-numbers.dots {
  background: transparent;
  box-shadow: none;
  border: none;
  color: #666666;
}


/* レスポンシブデザインのためのメディアクエリ */
@media (max-width: 600px) {

  .page-numbers,
  .page-numbers.current {
    padding: 15px 20px;
    /* パディングを小さく */
  }
}


/* ---------------------------------------------------------------- */
/* -------------------------- お問合せページ -------------------------- */
/* ---------------------------------------------------------------- */
.title__contact {
  text-align: center;
  font-weight: 400;
  font-size: 24px;
  margin-top: 100px;
}

@media screen and (max-width: 979px) {
  .title__contact {
    font-size: 20px;
    margin-top: 60px;
  }
}

.page-contact form {
  width: min(calc(100% - 20px), 740px);
  margin: auto;
  margin-top: 50px;
}

.form__box {
  margin-top: 30px;
}

@media screen and (max-width: 979px) {
  .form__box {
    margin-top: 20px;
  }
  .page-contact p {
    text-align: left;
  }
}

.form__box dt {
  color: #707F89;
}

.form__box .notice {
  background-color: #69491A;
  color: #fff;
  display: inline-block;
  margin-left: 5px;
  padding-inline: 7px;
}

.wpcf7-text {
  height: 50px;
  padding-left: 20px;
  width: 100%;
  border: solid 1px #CDD6DD;
  margin-top: 7px;
  font-size: 16px;
}

.wpcf7-textarea {
  margin-top: 7px;
  width: 100%;
  border: solid 1px #CDD6DD;
  height: 180px;
  font-size: 16px;
  font-weight: normal;
  padding: 20px;
}
input::placeholder {
  color: #CCC;
}

.wpcf7-not-valid-tip {
  color: #B70000;
}

.privacy-box {
  width: 100%;
  height: 170px;
  overflow-y: auto;
  margin-top: 7px;
  border: solid 1px #CDD6DD;
  padding: 10px;
}
.privacy-box p {
  line-height: 1.5 !important;
}

.submit__box {
  margin-top: 40px;
  margin-bottom: 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-around;
  align-items: center;
}

.submit,
.wpcf7-submit,
.confirm-btn {
  border: solid 1px #69491A;
  background-color: #69491A;
  color: #fff;
  transition: all .3s;
  text-align: center;
  border-radius: 30px;
  display: block;
  width: 270px;
  margin: auto;
  font-size: 16px;
  font-weight: bold;
  padding-block: 10px;
  cursor: pointer;
}

.submit:hover,
.wpcf7-submit:hover,
.confirm-btn:hover {
  background-color: #fff;
  color: #69491A;
  transition: all .3s;
}

.wpcf7-previous {
  border: solid 1px #CDD6DD;
  background-color: #CDD6DD;
  color: #fff;
  transition: all .3s;
  text-align: center;
  border-radius: 30px;
  display: block;
  width: 270px;
  margin: auto;
  font-size: 16px;
  font-weight: bold;
  padding-block: 10px;
  cursor: pointer;
}
.wpcf7-previous:hover {
  background-color: #fff;
  color: #CDD6DD;
  transition: all .3s;
}
.wpcf7-spinner {
  display: none !important;
}

/*!!!!!!!! Conf !!!!!!!!!*/

.conf_txt {
  height: 50px;
  padding-left: 20px;
  width: 100%;
  background-color: #FFFDEC;
  margin-top: 7px;
  font-size: 16px;
  display: flex;
  align-items: center;
}
.conf_txt-area {
  margin-top: 7px;
  width: 100%;
  background-color: #FFFDEC;
  height: 180px;
  font-size: 16px;
  font-weight: normal;
  padding: 20px;
  overflow-y: auto;
}


/*!!!!!!!! thanks !!!!!!!!!*/

/* ---------------------------------------------------------------- */
/* ----------------------- 各施術のページ 共通　----------------------- */
/* ---------------------------------------------------------------- */

.check_list,
p:not(:first-of-type),
.treatmemt-main ul {
  margin-top: 10px;
  line-height: 2;
}

.check_list li,
.treatmemt-main li {
  position: relative;
  padding-left: 1.5em;
}

.check_list li::before,
.treatmemt-main li::before {
  content: '';
  display: block;
  width: 16px;
  height: 8px;
  border-left: 2px solid #F2AC41;
  border-bottom: 2px solid #F2AC41;
  transform: rotate(-45deg);
  position: absolute;
  left: 0;
  top: .3em;
}

@media screen and (max-width: 979px) {
  .check_list li::before,
  .treatmemt-main li::before {
    top: .5em;
  }
}

.section__inner h4 {
  color: #F2AC41;
  text-align: left;
}

.em-box {
  margin-top: 20px;
  border: 3px solid #F2AC41;
  padding: 10px 20px;

  p:last-of-type {
    margin-top: 20px;
  }
}


/* ---------------------------------------------------------------- */
/* ----------------------- 各施術のページ 共通　----------------------- */
/* ---------------------------------------------------------------- */