@charset "UTF-8";
/*============================================================= 04_modules =============================================================*/
.mod_inner01 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media screen and (max-width: 599px) {
  .mod_inner01 {
    padding: 0 10px;
  }
}
@media screen and (min-width: 600px) {
  .mod_inner01 {
    width: 1100px;
    margin: 0 auto;
    padding: 0;
  }
}
/*!  button
================================================ */
/*
#styleguide
mod_btn01

mod_btn01

```
<p class="btn mod_btn01"><a href="/implant/message/"><span>詳細を見る</span></a></p>
```
*/
.mod_btn01 {
  max-width: 265px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

@media screen and (min-width: 600px) {
  .mod_btn01 {
    max-width: 380px;
  }
}
.mod_btn01 a {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 10px 35px;
  border-radius: 3px;
  background: #c8a772;
  color: #fff;
  font-size: 22.4px;
  font-size: 1.4rem;
  text-align: center;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

@media screen and (min-width: 600px) {
  .mod_btn01 a {
    padding: 14px 35px;
    font-size: 1.6rem;
  }

  .mod_btn01 a:hover {
    background: #be9758;
  }

  .mod_btn01 a:hover:before {
    background: #c39f65;
  }
}
.mod_btn01 a span {
  position: relative;
  z-index: 1;
  font-weight: 600;
}

.mod_btn01 a:before {
  display: block;
  position: absolute;
  top: 0;
  left: -10%;
  z-index: 0;
  width: 60%;
  height: 100%;
  background: #cdaf7f;
  content: "";
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transform: skew(-45deg);
  transform: skew(-45deg);
}

.mod_btn01 a:after {
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  width: 18px;
  height: 6px;
  margin-top: -2px;
  background: url("../img/common/ico_arw01_white.png") no-repeat center;
  background-size: contain;
  content: "";
}

@media screen and (min-width: 600px) {
  .mod_btn01 a:after {
    right: 20px;
  }
}
/*  .mod_btn01
================================================== */
.mod_btn01.has-no-bg {
  max-width: 200px;
  margin-top: 10px;
}

.mod_btn01.has-no-bg a {
  border: 1px solid #fff;
  background: none;
  padding: 5px 35px;
}

.mod_btn01.has-no-bg a:before {
  content: none;
}

.mod_btn01.has-no-bg a:after {
  right: 25px;
}

@media screen and (min-width: 600px) {
  .mod_btn01.has-no-bg {
    max-width: 270px;
    margin-top: 30px;
  }

  .mod_btn01.has-no-bg a {
    border: 2px solid #fff;
    padding: 8px 35px;
  }

  .mod_btn01.has-no-bg a:after {
    right: 20px;
  }

  .mod_btn01.has-no-bg a:hover {
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    opacity: 0.7;
  }
}
/*
#styleguide
mod_btn02

mod_btn02

```
<p class="btn mod_btn02"><a href="/implant/treatment/"><span>インプラントの治療方法を見る</span></a></p>
<p class="btn mod_btn02 is_small"><a href="/implant/treatment/"><span>インプラントの治療方法を見る</span></a></p>
```
*/
.mod_btn02 {
  max-width: 315px;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (min-width: 600px) {
  .mod_btn02 {
    max-width: 380px;
  }
}
.mod_btn02 a {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 10px 30px;
  border-radius: 3px;
  background: #40bec5;
  color: #fff;
  font-weight: 600;
  font-size: 22.4px;
  font-size: 1.4rem;
  text-align: center;
}

@media screen and (min-width: 600px) {
  .mod_btn02 a {
    padding: 14px 35px;
    font-size: 1.6rem;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  .mod_btn02 a:hover {
    background: #00acb5;
  }

  .mod_btn02 a:hover:before {
    background: #1db5bd;
  }
}
.mod_btn02 a:before {
  display: block;
  position: absolute;
  top: 0;
  left: -10%;
  z-index: 0;
  width: 60%;
  height: 100%;
  background: #63c7cd;
  content: "";
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transform: skew(-45deg);
  transform: skew(-45deg);
}

.mod_btn02 a span {
  position: relative;
  z-index: 1;
  font-weight: 500;
}

.mod_btn02 a:after {
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  width: 18px;
  height: 6px;
  margin-top: -3px;
  background: url("../img/common/ico_arw01_white.png") no-repeat center;
  background-size: contain;
  content: "";
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

@media screen and (min-width: 600px) {
  .mod_btn02 a:after {
    right: 20px;
  }
}
.mod_btn02.is_small {
  width: 112px;
}

@media screen and (min-width: 600px) {
  .mod_btn02.is_small {
    width: 160px;
  }
}
.mod_btn02.is_small a {
  padding-left: 14px;
  font-size: 19.2px;
  font-size: 1.2rem;
  text-align: left;
}

@media screen and (min-width: 600px) {
  .mod_btn02.is_small a {
    padding: 11px 35px;
    font-size: 1.4rem;
  }
}
.mod_btn02.is_small a:after {
  right: 9px;
}

/*!  cv
================================================ */
/* #styleguide mod_cv01 mod_cv01 ``` <div class="mod_cv01"> <div class="mod_cv01_inner mod_inner01"> <div class="mod_cv01_content"> <p class="mod_cv01_copy">インプラントをご検討中の方へ</p> <p class="mod_cv01_tit is_font_serif">インプラント相談予約</p> <p class="mod_cv01_label">3D-CTによる正確な診断・院長が<br class="viewSp">納得できるまでわかりやすく説明</p> <p class="mod_cv01_txt">当院では、患者さんが抱えていらっしゃるインプラントのお悩みや疑問、<br>費用や期間などを丁寧にお話しさせて<br class="viewSp">頂いております。<br class="viewSp">お気軽にご相談ください。</p> <p class="mod_cv01_tel viewPc"><span>06-6372-5000</span> </p> <ul class="mod_cv01_btn_list cf"> <li class="mod_cv01_btn mod_cv01_btn_tel viewSp"><a href="tel:06-6372-5000"><span>06-6372-5000</span></a></li> <li class="mod_cv01_btn mod_cv01_btn_reservation"><a href="/implant/contact/"><span>インプラント相談予約</span></a></li> <li class="mod_cv01_btn"><a href="/implant/contact/#contactForm"><span>無料メール相談</span></a></li> </ul> </div> </div> </div> ``` */
.mod_cv01 {
  background: #caab78;
  color: #fff;
  text-align: center;
}

.mod_cv01 .mod_cv01_inner {
  position: relative;
  padding: 36px 15px 46px;
}

@media screen and (min-width: 600px) {
  .mod_cv01 .mod_cv01_inner {
    padding: 71px 400px 81px 0;
  }
}
.mod_cv01 .mod_cv01_inner:before {
  display: block;
  position: absolute;
  right: 0;
  bottom: 23%;
  width: 256px;
  height: 258px;
  background: url("../img/common/bg_mod_cv01_sp.png") no-repeat center;
  background-size: contain;
  content: "";
}

@media screen and (min-width: 600px) {
  .mod_cv01 .mod_cv01_inner:before {
    right: -61px;
    bottom: 0;
    width: 579px;
    height: 559px;
    background-image: url("../img/common/bg_mod_cv01_pc.png");
    background-position: center top;
    background-size: 579px;
  }
}
.mod_cv01 .mod_cv01_content {
  position: relative;
  z-index: 1;
  padding-top: 10px;
}

.mod_cv01 .mod_cv01_content:before {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 43px;
  height: 78px;
  background: url("../img/common/ico_mod_cv01.png") no-repeat center;
  background-size: contain;
  content: "";
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.mod_cv01 .mod_cv01_copy {
  display: inline-block;
  position: relative;
  z-index: 1;
  font-weight: 500;
  font-size: 20.8px;
  font-size: 1.3rem;
  text-align: center;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}

@media screen and (min-width: 600px) {
  .mod_cv01 .mod_cv01_copy {
    font-size: 2.7rem;
  }
}
.mod_cv01 .mod_cv01_copy:before,
.mod_cv01 .mod_cv01_copy:after {
  display: block;
  position: absolute;
  top: 50%;
  width: 1px;
  height: 15px;
  margin-top: -6px;
  background: #fff;
  content: "";
}

@media screen and (min-width: 600px) {
  .mod_cv01 .mod_cv01_copy:before,
.mod_cv01 .mod_cv01_copy:after {
    height: 30px;
  }
}
.mod_cv01 .mod_cv01_copy:before {
  left: -20px;
  -webkit-transform: skew(30deg);
  transform: skew(30deg);
}

@media screen and (min-width: 600px) {
  .mod_cv01 .mod_cv01_copy:before {
    left: -36px;
  }
}
.mod_cv01 .mod_cv01_copy:after {
  right: -20px;
  -webkit-transform: skew(-30deg);
  transform: skew(-30deg);
}

@media screen and (min-width: 600px) {
  .mod_cv01 .mod_cv01_copy:after {
    right: -36px;
  }
}
.mod_cv01 .mod_cv01_tit {
  position: relative;
  z-index: 1;
  line-height: 1;
  margin: 6px -10px 0;
  font-weight: 500;
  font-size: 54.4px;
  font-size: 3.4rem;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
  letter-spacing: 0.02em;
}

@media screen and (min-width: 600px) {
  .mod_cv01 .mod_cv01_tit {
    margin: 6px 0 0;
    font-size: 6.8rem;
  }
}
.mod_cv01 .mod_cv01_label {
  line-height: 1.43;
  margin-top: 22px;
  padding: 8px 0;
  border-radius: 5px;
  background: #bd9758;
}

@media screen and (min-width: 600px) {
  .mod_cv01 .mod_cv01_label {
    margin-top: 20px;
    padding: 7px 0;
    border-radius: 21px;
    font-size: 2rem;
  }
}
.mod_cv01 .mod_cv01_txt {
  margin-top: 10px;
}

@media screen and (max-width: 599px) {
  .mod_cv01 .mod_cv01_txt {
    padding-right: 80px;
    text-align: left;
  }
}
@media screen and (min-width: 600px) {
  .mod_cv01 .mod_cv01_txt {
    line-height: 1.83;
    margin-top: 25px;
    font-size: 1.6rem;
  }
}
.mod_cv01 .mod_cv01_btn_list {
  margin-top: 25px;
}

@media screen and (min-width: 600px) {
  .mod_cv01 .mod_cv01_btn_list {
    margin-top: 32px;
  }
}
@media screen and (min-width: 600px) {
  .mod_cv01 .mod_cv01_btn {
    float: left;
    width: 250px;
  }
}
.mod_cv01 .mod_cv01_btn + .mod_cv01_btn {
  margin-top: 10px;
}

@media screen and (min-width: 600px) {
  .mod_cv01 .mod_cv01_btn + .mod_cv01_btn {
    margin: 0;
  }

  .mod_cv01 .mod_cv01_btn + .mod_cv01_btn + .mod_cv01_btn {
    margin: 0 0 0 20px;
  }
}
.mod_cv01 .mod_cv01_btn a {
  display: block;
  line-height: 1.19;
  padding: 13px 0;
  border-radius: 5px;
  background: #5ac6cc;
  color: #fff;
  font-size: 25.6px;
  font-size: 1.6rem;
  text-align: center;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-box-shadow: inset 0 -3px 0 0 #39acb4;
          box-shadow: inset 0 -3px 0 0 #39acb4;
}

@media screen and (min-width: 600px) {
  .mod_cv01 .mod_cv01_btn a {
    line-height: 1.28;
    padding: 13px 0 16px;
    font-size: 1.8rem;
    -webkit-box-shadow: inset 0 -6px 0 0 #39acb4;
            box-shadow: inset 0 -6px 0 0 #39acb4;
  }

  .mod_cv01 .mod_cv01_btn a:hover {
    background: #1db5bd;
  }
}
.mod_cv01 .mod_cv01_btn a span {
  display: inline-block;
  position: relative;
  padding-left: 36px;
  font-weight: 500;
}

@media screen and (min-width: 600px) {
  .mod_cv01 .mod_cv01_btn a span {
    padding: 26px 0 0;
  }
}
.mod_cv01 .mod_cv01_btn a span:before {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 15px;
  background: url("../img/common/ico_mail01.png") no-repeat center;
  background-size: contain;
  content: "";
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media screen and (min-width: 600px) {
  .mod_cv01 .mod_cv01_btn a span:before {
    top: 0;
    left: 50%;
    width: 27px;
    height: 20px;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }
}
@media screen and (min-width: 600px) {
  .mod_cv01 .mod_cv01_btn.mod_cv01_btn_tel {
    width: 448px;
    line-height: 1;
    margin-top: -17px;
  }
}
.mod_cv01 .mod_cv01_btn.mod_cv01_btn_tel a {
  padding: 14px 0 18px;
  border: 2px solid #d1ac83;
  background-color: #fff;
  -webkit-box-shadow: inset 0 -3px 0 0 #dcdee2;
          box-shadow: inset 0 -3px 0 0 #dcdee2;
}

@media screen and (max-width: 599px) {
  .mod_cv01 .mod_cv01_btn.mod_cv01_btn_tel a {
    color: #262626;
  }
}
@media screen and (min-width: 600px) {
  .mod_cv01 .mod_cv01_btn.mod_cv01_btn_tel a {
    padding: 0;
    border: 0;
    background-color: transparent;
    text-align: left;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}
.mod_cv01 .mod_cv01_btn.mod_cv01_btn_tel span {
  display: inline-block;
  padding-left: 30px;
  font-weight: 700;
  font-size: 48px;
  font-size: 3rem;
}

@media screen and (min-width: 600px) {
  .mod_cv01 .mod_cv01_btn.mod_cv01_btn_tel span {
    padding: 0 0 0 56px;
    font-size: 5.4rem;
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
  }
}
.mod_cv01 .mod_cv01_btn.mod_cv01_btn_tel span:before {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  background: url("../img/common/ico_tel01_brown.png") no-repeat center;
  background-size: contain;
  content: "";
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media screen and (min-width: 600px) {
  .mod_cv01 .mod_cv01_btn.mod_cv01_btn_tel span:before {
    width: 43px;
    height: 45px;
    background-image: url("../img/common/ico_tel_shadow01.png");
  }
}
.mod_cv01 .mod_cv01_btn.mod_cv01_btn_tel .mod_cv01_btn_time {
  display: inline-block;
  line-height: 1.36;
  margin-top: 5px;
  font-size: 17.6px;
  font-size: 1.1rem;
  text-align: left;
}

@media screen and (min-width: 600px) {
  .mod_cv01 .mod_cv01_btn.mod_cv01_btn_tel .mod_cv01_btn_time {
    display: block;
    line-height: 1.69;
    margin-top: 2px;
    font-size: 1.3rem;
  }
}
/* #styleguide mod_list01 mod_list01 ``` <ul class="list mod_list01"> <li class="mod_list01_item"><a href="" class="cf"> <p class="mod_list01_tit is_font_serif">CASE <span>01</span></p> <div class="mod_list01_img"><img src="/implant/img/dummy/img_dummy01.png" alt=""></div> <div class="mod_list01_area_txt"> <p class="mod_list01_info is_color_fox cf"><span>治療内容</span></p> <p class="mod_list01_copy">ここにテキストが入ります</p> <p class="mod_list01_txt">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p> </div> </a></li> <li class="mod_list01_item"><a href="" class="cf"> <p class="mod_list01_tit is_font_serif">CASE <span>02</span></p> <div class="mod_list01_img"><img src="/implant/img/dummy/img_dummy01.png" alt=""></div> <div class="mod_list01_area_txt"> <p class="mod_list01_info is_color_fox cf"><span>治療内容</span></p> <p class="mod_list01_copy">ここにテキストが入ります</p> <p class="mod_list01_txt">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p> </div> </a></li> </ul> ``` */
@media screen and (min-width: 600px) {
  .mod_list01 {
    padding: 0 50px;
  }
}
.mod_list01 .mod_list01_item + .mod_list01_item {
  margin-top: 30px;
}

@media screen and (min-width: 600px) {
  .mod_list01 .mod_list01_item + .mod_list01_item {
    margin-top: 74px;
  }
}
.mod_list01_item a {
  display: block;
  position: relative;
  padding: 30px 30px 28px;
  background: #fff;
  -webkit-box-shadow: 2px 3px 10px 0 rgba(0, 0, 0, 0.15);
          box-shadow: 2px 3px 10px 0 rgba(0, 0, 0, 0.15);
}

@media screen and (min-width: 600px) {
  .mod_list01_item a {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  .mod_list01_item a:hover {
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}
@media screen and (min-width: 600px) {
  .mod_list01_item a {
    padding: 50px 59px 62px;
  }
}
.mod_list01_item .mod_list01_tit {
  position: absolute;
  top: -25px;
  right: 20px;
  line-height: 1;
  font-weight: 500;
  font-size: 19.2px;
  font-size: 1.2rem;
}

@media screen and (min-width: 600px) {
  .mod_list01_item .mod_list01_tit {
    top: -35px;
    right: 35px;
    font-size: 1.5rem;
  }
}
.mod_list01_item .mod_list01_tit span {
  position: relative;
  bottom: -7px;
  font-weight: 500;
  font-size: 64px;
  font-size: 4rem;
}

@media screen and (min-width: 600px) {
  .mod_list01_item .mod_list01_tit span {
    font-size: 5rem;
  }
}
.mod_list01_item .mod_list01_tit:before {
  display: block;
  position: absolute;
  top: 28px;
  left: -30%;
  width: 30px;
  height: 1px;
  background: #262626;
  content: "";
  -webkit-transform: rotate(-55deg);
  transform: rotate(-55deg);
}

@media screen and (min-width: 600px) {
  .mod_list01_item .mod_list01_tit:before {
    top: 37px;
    left: -42px;
    width: 40px;
  }
}
@media screen and (min-width: 600px) {
  .mod_list01_item .mod_list01_img {
    float: left;
    width: 250px;
  }
}
@media screen and (max-width: 599px) {
  .mod_list01_item .mod_list01_area_txt {
    margin-top: 20px;
  }
}
@media screen and (min-width: 600px) {
  .mod_list01_item .mod_list01_area_txt {
    float: left;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: calc(100% - 250px);
    padding-left: 50px;
  }
}
.mod_list01_item .mod_list01_info span {
  display: inline-block;
  line-height: 1.9;
  margin-right: 10px;
  padding: 0 10px;
  background: #63c7cd;
  color: #fff;
  font-weight: 500;
  font-size: 22.4px;
  font-size: 1.4rem;
}

@media screen and (min-width: 600px) {
  .mod_list01_item .mod_list01_info span {
    line-height: 1.5;
    margin-right: 18px;
    padding: 7px 20px;
    font-size: 1.4rem;
  }
}
.mod_list01_item .mod_list01_copy {
  margin-top: 8px;
  font-weight: 500;
  font-size: 30.4px;
  font-size: 1.9rem;
}

@media screen and (min-width: 600px) {
  .mod_list01_item .mod_list01_copy {
    font-size: 2.4rem;
  }
}
.mod_list01_item .mod_list01_txt {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid #dbba8d;
  font-size: 20.8px;
  font-size: 1.3rem;
}

@media screen and (min-width: 600px) {
  .mod_list01_item .mod_list01_txt {
    line-height: 1.87;
    margin-top: 18px;
    padding-top: 22px;
    font-size: 1.5rem;
  }
}
/* #styleguide mod_list02 mod_list02 ``` <ul class="list mod_list02 cf"> <li><a href="/implant/promise/"><img src="/implant/img/common/bnr_mod_list02_01_sp.png" alt="10年後も満足できる治療を 6つのお約束"></a></li> </li> <li><a href="/implant/treatment/"><img src="/implant/img/common/bnr_mod_list02_02_sp.png" alt="あらゆる難症例に対応可能 インプラント治療方法"></a></li> </li> <li><a href="/implant/price/"><img src="/implant/img/common/bnr_mod_list02_03_sp.png" alt="適正価格で10年保証 料金・保証"></a></li> </li> <li><a href="/implant/contact/"><img src="/implant/img/common/bnr_mod_list02_04_sp.png" alt="不安なことを解消 インプラント相談予約"></a></li> </ul> ``` */
@media screen and (min-width: 600px) {
  .mod_list02 {
    margin: 0 -4px;
  }
}
.mod_list02 li {
  float: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 50%;
}

@media screen and (min-width: 600px) {
  .mod_list02 li {
    width: 277px;
    background: no-repeat center;
    background-size: contain;
  }

  .mod_list02 li img {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  .mod_list02 li:hover img {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  .mod_list02 li:nth-child(1) {
    background-image: url("../img/common/bnr_mod_list02_01_pc_o.png");
  }

  .mod_list02 li:nth-child(2) {
    background-image: url("../img/common/bnr_mod_list02_02_pc_o.png");
  }

  .mod_list02 li:nth-child(3) {
    background-image: url("../img/common/bnr_mod_list02_03_pc_o.png");
  }

  .mod_list02 li:nth-child(4) {
    background-image: url("../img/common/bnr_mod_list02_04_pc_o.png");
  }
}
/*!  pager
================================================ */
/*!  tit
================================================ */
.mod_tit01 {
  line-height: 1.23;
  font-weight: 600;
  font-size: 32px;
  font-size: 2rem;
  text-align: center;
}

@media screen and (min-width: 600px) {
  .mod_tit01 {
    line-height: 1.4;
    font-size: 4rem;
    letter-spacing: 0.05em;
  }
}
.mod_tit01 .mod_tit01_sub {
  font-size: 41.6px;
  font-size: 2.6rem;
}

@media screen and (min-width: 600px) {
  .mod_tit01 .mod_tit01_sub {
    font-size: 5rem;
  }
}
.mod_tit01 span {
  font-weight: 600;
}

.mod_tit02 {
  line-height: 1.5;
  font-weight: 600;
  font-size: 35.2px;
  font-size: 2.2rem;
  text-align: center;
}

@media screen and (min-width: 600px) {
  .mod_tit02 {
    line-height: 1.4;
    font-size: 4.4rem;
    letter-spacing: 0.05em;
  }
}
.mod_tit03 {
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 12px;
  font-weight: 500;
  font-size: 38.4px;
  font-size: 2.4rem;
  text-align: center;
  letter-spacing: 4px;
  letter-spacing: 0.25rem;
}

.mod_tit03 span {
  color: #b98a4b;
  font-weight: 500;
}

.mod_tit03 .is_small {
  display: block;
  line-height: 1.2;
  font-weight: 500;
  font-size: 1.4rem;
}

.mod_tit03:before,
.mod_tit03:after {
  position: absolute;
  right: 0;
  left: 0;
  width: 40px;
  margin: 0 auto;
  background: #262626;
  content: "";
}

.mod_tit03:before {
  bottom: 3px;
  height: 2px;
}

.mod_tit03:after {
  bottom: 0;
  height: 1px;
}

@media screen and (max-width: 599px) {
  .mod_tit03.double {
    line-height: 1.30769;
    margin-bottom: 30px;
    padding-bottom: 23px;
  }
}
@media screen and (min-width: 600px) {
  .mod_tit03 {
    margin-bottom: 40px;
    padding-bottom: 25px;
    font-size: 4rem;
    letter-spacing: 0.25rem;
  }

  .mod_tit03 .is_small {
    font-size: 2.4rem;
  }

  .mod_tit03:before,
.mod_tit03:after {
    width: 90px;
  }

  .mod_tit03:before {
    bottom: 4px;
    height: 2px;
  }

  .mod_tit03:after {
    bottom: 0;
    height: 1px;
  }
}
@media screen and (min-width: 600px) and (max-width: 599px) {
  .mod_tit03.double {
    line-height: 1.30769;
    margin-bottom: 30px;
    padding-bottom: 23px;
  }
}
.mod_tit04 {
  line-height: 1.57895;
  font-weight: 600;
  font-size: 30.4px;
  font-size: 1.9rem;
  text-align: center;
}

@media screen and (min-width: 600px) {
  .mod_tit04 {
    line-height: 1.4;
    font-size: 4rem;
    letter-spacing: 0.05em;
  }
}
.mod_tit04 span {
  line-height: 1.20833;
  color: #b98a4b;
  font-weight: 600;
  font-size: 38.4px;
  font-size: 2.4rem;
}

@media screen and (min-width: 600px) {
  .mod_tit04 span {
    font-size: 5rem;
  }
}
.mod_tit05 {
  line-height: 1.6;
  font-weight: 500;
  font-size: 32px;
  font-size: 2rem;
  text-align: center;
}

.mod_tit05 span {
  line-height: 1.34615;
  color: #b98a4b;
  font-weight: 500;
  font-size: 41.6px;
  font-size: 2.6rem;
}

@media screen and (min-width: 600px) {
  .mod_tit05 {
    line-height: 1.5;
    font-size: 4rem;
  }

  .mod_tit05 span {
    line-height: 1.4;
    font-size: 5rem;
  }
}
.mod_tit06 {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  line-height: 1.31579;
  margin-bottom: 21px;
  padding: 15px 5px 16px 35px;
  border-top: 4px solid #63c7cd;
  background: #fff;
  font-weight: 500;
  font-size: 30.4px;
  font-size: 1.9rem;
  -webkit-box-shadow: 0 0 3px 0 #b0b0b0;
          box-shadow: 0 0 3px 0 #b0b0b0;
}

.mod_tit06:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  width: 7px;
  height: 25px;
  margin: auto 0;
  background: url(../img/facility/bg01.png) no-repeat center center;
  background-size: contain;
  content: "";
}

.mod_tit06.double:before {
  height: 50px;
  background: url(../img/facility/bg02.png) no-repeat center center;
  background-size: contain;
}

.mod_tit06.tri:before {
  height: 75px;
  background: url(../img/common/bg02.png) no-repeat center center;
  background-size: contain;
}

@media screen and (min-width: 600px) {
  .mod_tit06 {
    margin-bottom: 50px;
    padding: 22px 5px 26px 64px;
    font-size: 2.8rem;
  }

  .mod_tit06:before {
    left: 29px;
    width: 11px;
    height: 40px;
    background: url(../img/facility/bg01.png) no-repeat center center;
    background-size: contain;
  }

  .mod_tit06.double:before {
    left: 29px;
    width: 11px;
    height: 40px;
    background: url(../img/facility/bg01.png) no-repeat center center;
    background-size: contain;
  }

  .mod_tit06.tri:before {
    height: 75px;
    background: url(../img/common/bg02.png) no-repeat center center;
    background-size: contain;
  }
}
/*!  txt
================================================ */
.mod_txt {
  line-height: 1.71429;
  font-weight: 400;
  font-size: 22.4px;
  font-size: 1.4rem;
}

@media screen and (min-width: 600px) {
  .mod_txt {
    line-height: 1.983;
    font-size: 1.6rem;
  }
}
.mod_link01 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.mod_link01 a {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 23px;
  background: url("../img/common/ico_arw02.png") no-repeat left center;
  background-size: 18px;
  color: #b98a4b;
  font-size: 20.8px;
  font-size: 1.3rem;
  text-decoration: underline;
}

.mod_link01 a:before {
  position: absolute;
  top: 5px;
  right: -18px;
  width: 10px;
  height: 10px;
  background: url(../img/common/ico_link01.png) no-repeat center top;
  background-size: contain;
  content: "";
}

/*!  box
================================================ */
.mod_box01 {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 15px;
  background: #fff;
  -webkit-box-shadow: 2px 3px 10px 0 rgba(0, 0, 0, 0.15);
          box-shadow: 2px 3px 10px 0 rgba(0, 0, 0, 0.15);
}

.mod_box01 .boxInner {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 25px 24px 16px;
  border: 1px solid #63c7cd;
}

.mod_box01_slider .mod_box01_slider_item {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 5px;
}

@media screen and (min-width: 600px) {
  .mod_box01_slider .mod_box01_slider_item {
    padding: 0 18px;
  }
}
.mod_box01_slider .slick-list {
  overflow: inherit;
}

.mod_box01_slider {
  margin: 0 -5px;
}

@media screen and (min-width: 600px) {
  .mod_box01_slider {
    margin: 0 -68px;
  }
}
/*!  mod_column01
================================================ */
/* #styleguide mod_section01 mod_section01 ``` <section class="mod_section01"> <div class="inner mod_inner01 cf"> <div class="mod_section01_img"><img src="/implant/img/home/img_implant01.png" alt=""></div> <a class="mod_section01_content" href="/implant/facility/"> <div class="mod_section01_content_inner"> <p class="mod_section01_copy">関西屈指の専用手術室と<br>最新の機材のご紹介</p> <div class="mod_section01_ico"><img src="/implant/img/common/ico_mod_section01.png" alt=""></div> <h2 class="mod_section01_tit is_font_serif">インプラント治療設備</h2> </div> </a> </div> </section> <section class="mod_section01 is_reverse"> <div class="inner mod_inner01 cf"> <div class="mod_section01_img"><img src="/implant/img/home/img_implant02.png" alt=""></div> <a class="mod_section01_content" href="/implant/knowledge/"> <div class="mod_section01_content_inner"> <p class="mod_section01_copy">インプラント治療で失敗しないために</p> <div class="mod_section01_ico"><img src="/implant/img/common/ico_mod_section02.png" alt=""></div> <h2 class="mod_section01_tit is_font_serif">わかりやすい<br>インプラント治療の<br class="viewSp">基礎知識</h2> </div> </a> </div> </section> ``` */
.mod_section01 {
  position: relative;
}

.mod_section01:after {
  display: block;
  clear: both;
  content: "";
}

.mod_section01 .inner {
  position: relative;
}

.mod_section01 + .mod_section01 {
  margin-top: 35px;
}

@media screen and (min-width: 600px) {
  .mod_section01 + .mod_section01 {
    margin-top: 60px;
  }
}
.mod_section01 .mod_section01_img {
  margin: 0 -10px;
}

@media screen and (min-width: 600px) {
  .mod_section01 .mod_section01_img {
    float: right;
    margin: 0 -410px 0 0;
  }
}
@media screen and (min-width: 600px) {
  .mod_section01.is_reverse .mod_section01_img {
    float: left;
    margin: 0 0 0 -410px;
  }
}
.mod_section01 .mod_section01_content {
  display: table;
  position: relative;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 300px;
  overflow: hidden;
  margin-top: -30px;
  background: #5fc3c9;
  color: #fff;
  text-align: center;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-box-shadow: 2px 3px 10px 0 rgba(0, 0, 0, 0.15);
          box-shadow: 2px 3px 10px 0 rgba(0, 0, 0, 0.15);
}

@media screen and (min-width: 600px) {
  .mod_section01 .mod_section01_content {
    position: absolute;
    top: 50%;
    left: 35px;
    width: 500px;
    height: 440px;
    margin: 0;
    margin-top: -220px;
  }

  .mod_section01 .mod_section01_content:hover {
    background: #7fcfd4;
  }

  .mod_section01 .mod_section01_content:hover:before {
    background: #82d2d7;
  }
}
.mod_section01 .mod_section01_content:before {
  display: block;
  position: absolute;
  top: 0;
  left: -50%;
  width: 100%;
  height: 100%;
  background: #63c7cd;
  content: "";
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transform: skew(-45deg);
  transform: skew(-45deg);
}

.mod_section01 .mod_section01_content:after {
  display: block;
  position: absolute;
  right: 5px;
  bottom: 5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #fff #fff transparent;
  content: "";
}

@media screen and (min-width: 600px) {
  .mod_section01 .mod_section01_content:after {
    right: 10px;
    bottom: 10px;
    border-width: 9px;
  }
}
.mod_section01.is_reverse .mod_section01_content {
  right: 30px;
  left: auto;
}

.mod_section01 .mod_section01_content_inner {
  display: table-cell;
  position: relative;
  z-index: 1;
  vertical-align: middle;
}

@media screen and (min-width: 600px) {
  .mod_section01 .mod_section01_content_inner {
    padding-bottom: 22px;
  }
}
.mod_section01 .mod_section01_ico {
  width: 58px;
  margin: 17px auto 0;
}

@media screen and (min-width: 600px) {
  .mod_section01 .mod_section01_ico {
    width: 90px;
    margin: 30px auto 0;
  }
}
.mod_section01 .mod_section01_copy {
  line-height: 1.56;
  font-size: 25.6px;
  font-size: 1.6rem;
}

@media screen and (min-width: 600px) {
  .mod_section01 .mod_section01_copy {
    font-size: 1.8rem;
  }
}
.mod_section01 .mod_section01_tit {
  margin-top: 15px;
  font-weight: 500;
  font-size: 35.2px;
  font-size: 2.2rem;
  letter-spacing: 0.08em;
}

@media screen and (min-width: 600px) {
  .mod_section01 .mod_section01_tit {
    line-height: 1.17;
    margin-top: 30px;
    font-size: 3rem;
  }
}
/* #styleguide mod_section02 mod_section02 ``` <section class="mod_section02"> <div class="mod_section02_inner mod_inner01"> <div class="mod_section02_main"> <div class="mod_section02_area_txt"> <div class="mod_section02_num is_num01"><img src="/implant/img/common/txt_number01.png" alt="01"></div> <h2 class="mod_section02_copy is_font_serif">3D-CTを駆使した<br>正確な診断</h2> <p class="mod_section02_txt">当院では、インプラント治療の安全性と治療のクオリティーを高めるために、最新の高度医療機器である3D-CTを導入しております。立体的（三次元）に撮影できる装置で、従来のレントゲンでは見えなかった「骨の厚さ」「神経・血管の位置」「骨内の空洞の位置」などを正確に確認することができます。導入している個人歯科医院は、日本ではまだまだ少ない状況です。また、当院が導入しているCTは、患者様の安全にこだわり、日本より厳しいヨーロッパ水準の低被爆のドイツ製です。通常の歯科用CTの8分の1～10分の1程度ですので、ご安心下さい。</p> </div> <div class="mod_section02_img"><img src="/implant/img/promise/img01_01.png" alt=""></div> </div> <div class="mod_section02_sub mod_inner01"> <div class="mod_section02_sub_inner"> <ul class="mod_section02_list is_column3"> <li class="mod_section02_list_item"> <div class="mod_section02_list_img"><img src="/implant/img/promise/img01_sub01_sp.png" alt=""></div> <p class="mod_section02_list_tit is_font_serif">コンピュータ分析ソフトによる<br>高精度なシミュレーション</p> <p class="mod_section02_list_txt">3D-CTのデータをもとに、インプラントの埋入ポイント、⾓度、深さについて、高精度なシミュレーションを行います。これにより、機能性・審美性の高い手術が可能になります。 </p> </li> <li class="mod_section02_list_item"> <div class="mod_section02_list_img"><img src="/implant/img/promise/img01_sub02_sp.png" alt=""></div> <p class="mod_section02_list_tit is_font_serif">最新の3D-CTで神経・血管の<br>細かな位置まで正確に把握</p> <p class="mod_section02_list_txt">最新の3D-CTを使用することで、骨の形状・神経・血管の位置が正しく確認でき、出血や痛みの少ない、安全で確実なインプラント治療が可能になります。</p> </li> <li class="mod_section02_list_item"> <div class="mod_section02_list_img"><img src="/implant/img/promise/img01_sub03_sp.png" alt=""></div> <p class="mod_section02_list_tit is_font_serif">ノーベルガイドによる<br>理想的なインプラントの再現</p> <p class="mod_section02_list_txt">シミュレーションをもとに、治療のためのガイド（ノーベルガイド）を作成します。ガイドがあることで余計な切開をする必要がなく、患者様の負担の少ない安全な治療を行うことができます。</p> </li> </ul> </div> </div> </div> </section> <section class="mod_section02"> <div class="mod_section02_inner mod_inner01"> <div class="mod_section02_main is_reverse"> <div class="mod_section02_area_txt"> <div class="mod_section02_num is_num02"><img src="/implant/img/common/txt_number02.png" alt="02"></div> <h2 class="mod_section02_copy is_font_serif">確かな技術力と<br>高い専門性</h2> <p class="mod_section02_txt">インプラント治療は、手術ですので、担当する歯科医の技術の高さ・経験の豊富さ・知識の深さがとても大切です。<br>しかし、インプラントを施術するのに特別な資格は必要なく、インプラント専門医でなくても、経験が少なくても、施術できるのが現状です。一方当院では、全てインプラント学会認定医師である院長・芳本が担当しております。年間300例以上を担当し、各種学会・学術セミナーにも積極的に参加するなど、最新の治療技術を身に着けた熟練の医師ですので、安心して手術をお任せいただけます。</p> </div> <div class="mod_section02_img"><img src="/implant/img/promise/img02_01.png" alt=""></div> </div> <div class="mod_section02_sub mod_inner01"> <div class="mod_section02_sub_inner"> <ul class="mod_section02_list is_column3"> <li class="mod_section02_list_item"> <div class="mod_section02_list_img"><img src="/implant/img/promise/img02_sub01_sp.png" alt=""></div> <p class="mod_section02_list_tit is_font_serif">年間300例以上の治療実績の<br>インプラント学会認定専門医</p> <p class="mod_section02_list_txt">当院のインプラントの手術は、これまで数多くの症例を経験してきた院長が全て手がけており、長い経験で培った確かな技術と経験で安心・安全な手術を行っています。 </p> </li> <li class="mod_section02_list_item"> <div class="mod_section02_list_img"><img src="/implant/img/promise/img02_sub02_sp.png" alt=""></div> <p class="mod_section02_list_tit is_font_serif">最新の技術・治療方法の<br>習得と導入</p> <p class="mod_section02_list_txt">院長は患者様の「最新の質の高い医療を受けたい」という気持ちにしっかりお応えできるよう、学術セミナーや各種学会などにも頻繁に参加し、最新の治療技術・知識を習得しています。</p> </li> <li class="mod_section02_list_item"> <div class="mod_section02_list_img"><img src="/implant/img/promise/img02_sub03_sp.png" alt=""></div> <p class="mod_section02_list_tit is_font_serif">歯科技工士他<br>専門スタッフとのチーム連携</p> <p class="mod_section02_list_txt">製作者の技術の違いで、治療後に被せる人工歯の出来が大きく左右されます。当院では優秀な歯科技工士と連携し、機能性・審美性ともに患者様に最適な人工歯を提供しています。</p> </li> </ul> </div> </div> </div> </section> ``` */
@media screen and (min-width: 600px) {
  .mod_section02 + .mod_section02 {
    margin-top: 100px;
  }
}
.mod_section02_inner {
  position: relative;
  padding-bottom: 50px;
  background-image: url("../img/common/bg_section02.png");
  background-repeat: no-repeat;
  background-position: right 0 top 50px;
  background-size: 225px;
}

@media screen and (max-width: 599px) {
  .mod_section02_inner {
    padding-top: 50px;
  }
}
@media screen and (min-width: 600px) {
  .mod_section02_inner {
    padding-bottom: 100px;
    background-position: left top 10px;
    background-size: 450px;
  }
}
.mod_section02_inner:after {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: 238px;
  background: #e8f3f4;
  background-image: url("../img/common/bg_border01.png");
  background-repeat: repeat-y;
  background-size: auto 1px;
  content: "";
}

@media screen and (min-width: 600px) {
  .mod_section02_inner:after {
    background-image: url("../img/common/bg_border01_pc.png");
    background-size: auto 2px;
  }
}
@media screen and (min-width: 600px) {
  .mod_section02_inner:after {
    right: auto;
    left: 100%;
    width: 200vw;
    height: 480px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
.mod_section02:last-of-type .mod_section02_inner {
  padding-bottom: 85px;
}

@media screen and (min-width: 600px) {
  .mod_section02:last-of-type .mod_section02_inner {
    padding-bottom: 160px;
  }
}
.mod_section02_main .mod_section02_img {
  margin: 22px -10px 0;
}

@media screen and (min-width: 600px) {
  .mod_section02_main .mod_section02_img {
    position: relative;
    right: -410px;
    width: 1000px;
    margin: 0 0 0 auto;
  }
}
@media screen and (min-width: 600px) {
  .mod_section02_main.is_reverse .mod_section02_img {
    right: auto;
    left: -410px;
    margin: 0 auto 0 0;
  }
}
@media screen and (max-width: 599px) {
  .mod_section02_main .mod_section02_area_txt {
    padding: 0 5px;
  }
}
@media screen and (min-width: 600px) {
  .mod_section02_main .mod_section02_area_txt {
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 1;
    width: 570px;
  }

  .mod_section02_main .mod_section02_area_txt.is-pc-middle {
    top: 110px;
  }
}
@media screen and (min-width: 600px) {
  .mod_section02_main.is_reverse .mod_section02_area_txt {
    right: 0;
    left: auto;
    width: 560px;
  }
}
.mod_section02_main .mod_section02_area_txt .mod_section02_num.is_num01 {
  width: 42px;
}

@media screen and (min-width: 600px) {
  .mod_section02_main .mod_section02_area_txt .mod_section02_num.is_num01 {
    width: 84px;
  }
}
.mod_section02_main .mod_section02_area_txt .mod_section02_num.is_num02 {
  width: 49px;
}

@media screen and (min-width: 600px) {
  .mod_section02_main .mod_section02_area_txt .mod_section02_num.is_num02 {
    width: 98px;
  }
}
.mod_section02_main .mod_section02_area_txt .mod_section02_num.is_num03 {
  width: 46px;
}

@media screen and (min-width: 600px) {
  .mod_section02_main .mod_section02_area_txt .mod_section02_num.is_num03 {
    width: 92px;
  }
}
.mod_section02_main .mod_section02_area_txt .mod_section02_num.is_num04 {
  width: 50px;
}

@media screen and (min-width: 600px) {
  .mod_section02_main .mod_section02_area_txt .mod_section02_num.is_num04 {
    width: 100px;
  }
}
.mod_section02_main .mod_section02_area_txt .mod_section02_num.is_num05 {
  width: 46px;
}

@media screen and (min-width: 600px) {
  .mod_section02_main .mod_section02_area_txt .mod_section02_num.is_num05 {
    width: 92px;
  }
}
.mod_section02_main .mod_section02_area_txt .mod_section02_num.is_num06 {
  width: 49px;
}

@media screen and (min-width: 600px) {
  .mod_section02_main .mod_section02_area_txt .mod_section02_num.is_num06 {
    width: 98px;
  }
}
.mod_section02_main .mod_section02_area_txt .mod_section02_copy {
  line-height: 1.36;
  margin-top: 15px;
  font-weight: 600;
  font-size: 35.2px;
  font-size: 2.2rem;
}

.mod_section02_main .mod_section02_area_txt .mod_section02_copy .is-small {
  font-size: 1.5rem;
}

@media screen and (min-width: 600px) {
  .mod_section02_main .mod_section02_area_txt .mod_section02_copy {
    line-height: 1.42;
    margin-top: 25px;
    margin-right: 27px;
    font-size: 3.8rem;
  }

  .mod_section02_main .mod_section02_area_txt .mod_section02_copy .is-small {
    font-size: 2.5rem;
  }
}
.mod_section02_main .mod_section02_area_txt .mod_section02_txt {
  line-height: 1.73;
  margin-top: 15px;
}

@media screen and (min-width: 600px) {
  .mod_section02_main .mod_section02_area_txt .mod_section02_txt {
    line-height: 2;
    margin-top: 25px;
  }
}
.mod_section02_sub {
  position: relative;
  position: relative;
  z-index: 1;
  margin-top: -50px;
  padding: 10px;
  background: #fff;
  -webkit-box-shadow: 2px 3px 10px 0 rgba(0, 0, 0, 0.15);
          box-shadow: 2px 3px 10px 0 rgba(0, 0, 0, 0.15);
}

@media screen and (min-width: 600px) {
  .mod_section02_sub {
    margin-top: -90px;
    padding: 9px;
  }
  .mod_section02_sub.is-mt0 {
    margin-top: 0;
  }
}
.mod_section02_sub .mod_section02_sub_inner {
  padding: 29px 24px 23px;
  border: 1px solid #63c7cd;
  background: #fff;
}

@media screen and (min-width: 600px) {
  .mod_section02_sub .mod_section02_sub_inner {
    padding: 48px 40px 50px;
  }
}
@media screen and (min-width: 600px) {
  .mod_section02_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
@media screen and (min-width: 600px) {
  .mod_section02_list .mod_section02_list_item {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  .mod_section02_list .mod_section02_list_item.has_btn {
    position: relative;
    padding-bottom: 70px;
  }
}
@media screen and (max-width: 599px) {
  .mod_section02_list .mod_section02_list_item + .mod_section02_list_item {
    margin-top: 20px;
  }
}
@media screen and (min-width: 600px) {
  .mod_section02_list.is_column2 {
    margin-right: 10px;
    padding-left: 10px;
  }
}
@media screen and (min-width: 600px) {
  .mod_section02_list.is_column2 .mod_section02_list_item {
    width: 470px;
    margin-right: 40px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .mod_section02_list.is_column2 .mod_section02_list_item:nth-child(2n) {
    margin-right: 0;
  }

  .mod_section02_list.is_column2 .mod_section02_list_item .mod_section02_list_img {
    margin-right: -20px;
    margin-left: -20px;
  }
}
@media screen and (min-width: 600px) {
  .mod_section02_list.is_column3 .mod_section02_list_item {
    width: 320px;
    margin-right: 20px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .mod_section02_list.is_column3 .mod_section02_list_item:nth-child(3n) {
    margin-right: 0;
  }

  .mod_section02_list.is_column3 .mod_section02_list_item .mod_section02_list_img {
    margin-right: -20px;
    margin-left: -20px;
  }
}
.mod_section02_list .mod_section02_list_tit {
  line-height: 1.63;
  margin-top: 17px;
  font-weight: 600;
  font-size: 28.8px;
  font-size: 1.8rem;
  text-align: center;
}

@media screen and (min-width: 600px) {
  .mod_section02_list .mod_section02_list_tit {
    line-height: 1.7;
    margin-top: 30px;
    margin-right: -10px;
    margin-left: -10px;
    font-size: 2rem;
  }
}
.mod_section02_list .mod_section02_list_txt {
  line-height: 1.73;
  margin-top: 8px;
}

@media screen and (min-width: 600px) {
  .mod_section02_list .mod_section02_list_txt {
    line-height: 1.8;
    margin-top: 17px;
    font-size: 1.5rem;
  }
}
.mod_section02_list .mod_section02_list_btn {
  margin-top: 15px;
}

@media screen and (min-width: 600px) {
  .mod_section02_list .mod_section02_list_btn {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 270px;
    font-size: 1.5rem;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .mod_section02_list .mod_section02_list_btn a {
    padding: 9px 35px;
  }
}
/*  .mod_iframe01
================================================ */
.mod_iframe01 {
  margin-top: 40px;
  padding: 0 15px;
}

.mod_iframe01_inner {
  padding: 2px;
  border: 2px solid #b2e6ea;
  background: #fff;
}

.mod_iframe01_inner.is_bg_none {
  background-color: transparent;
}

.mod_iframe01.is_no_border .mod_iframe01_inner {
  padding: 0;
  border: 0;
}

.mod_iframe01.is_inner_section,
.mod_iframe01.is_inner_section .mod_iframe01_content {
  padding: 0;
}

.mod_iframe01 .mod_iframe01_tit {
  padding: 10px;
  text-align: center;
  color: #fff;
  font-size: 1.9rem;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.1em;
  background: #63c7cd;
}

.mod_iframe01 .mod_iframe01_content {
  padding: 21px 18px;
}

.mod_iframe01 .mod_iframe01_item_tit {
  padding-bottom: 7px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: #d2a971;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.mod_iframe01 .mod_iframe01_item {
  position: relative;
  width: 100%;
}

.mod_iframe01 .mod_iframe01_list_item + .mod_iframe01_list_item {
  margin-top: 10px;
}

.mod_iframe01 .mod_iframe01_item:after {
  content: "";
  display: block;
  width: 100%;
  padding-top: 67%;
}

.mod_iframe01 .mod_iframe01_item iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mod_iframe01 .mod_iframe01_txt {
  margin-top: 5px;
  text-align: right;
  font-size: 1.2rem;
}

@media all and (min-width: 600px) {
  .mod_iframe01 {
    margin-top: 80px;
    padding: 0;
  }

  .mod_iframe01_inner {
    padding: 4px;
    border-width: 4px;
  }

  .mod_iframe01 .mod_iframe01_tit {
    padding: 15px;
    font-size: 2.8rem;
  }

  .mod_iframe01 .mod_iframe01_content {
    padding: 40px 47px 44px;
  }

  .mod_iframe01_list_item {
    width: 540px;
    margin: 0 auto;
  }

  .mod_iframe01 .mod_iframe01_item:after {
    padding-top: 360px;
  }

  .mod_iframe01 .mod_iframe01_item_tit {
    padding-bottom: 14px;
    font-size: 1.8rem;
  }

  .mod_iframe01 .mod_iframe01_list.is_column2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .mod_iframe01 .mod_iframe01_list.is_column2 .mod_iframe01_list_item {
    width: 50%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  .mod_iframe01 .mod_iframe01_list.is_column2 .mod_iframe01_item.is_tit_blank {
    margin-top: 41px;
  }

  .mod_iframe01 .mod_iframe01_list.is_column2 .mod_iframe01_list_item:nth-child(odd) {
    padding-right: 5px;
  }

  .mod_iframe01 .mod_iframe01_list.is_column2 .mod_iframe01_list_item:nth-child(even) {
    padding-left: 5px;
  }

  .mod_iframe01 .mod_iframe01_list_item + .mod_iframe01_list_item {
    margin-top: 0;
  }

  .mod_iframe01 .mod_iframe01_list_item:nth-child(n+3) {
    margin-top: 20px;
  }

  .mod_iframe01 .mod_iframe01_txt {
    margin-top: 0;
    font-size: 1.6rem;
    position: relative;
  }
}
/*  .c-recommend01
================================================== */
.c-recommend01 {
  padding: 45px 0 0;
}
.c-recommend01.has-ico .c-recommend01__area-img {
  position: relative;
  margin-top: 24px;
}
.c-recommend01.has-ico .c-recommend01__area-img:before {
  position: absolute;
  top: -2px;
  right: -31px;
  width: 72px;
  height: 72px;
  content: "";
  background: url(../img/common/ico_check01.png) no-repeat center/contain;
}
.c-recommend01.is-woman02 .c-recommend01__area-img {
  width: 162px;
}
.c-recommend01.has-border .c-recommend01__box {
  position: relative;
  z-index: 1;
}
.c-recommend01.has-border .c-recommend01__box:before {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 100%;
  height: 100%;
  content: "";
  background: url(../img/common/bg_recommend01_sp.jpg) no-repeat center/cover;
  z-index: -1;
}
.c-recommend01.has-border .c-recommend01__box-in {
  position: relative;
  border: 5px solid #ecd7b9;
  padding: 15px 22px 200px;
  background: #fff;
}
.c-recommend01.has-border .c-recommend01__area-img {
  position: absolute;
  bottom: -5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  margin: 0;
}
.c-recommend01-head {
  margin-bottom: 24px;
  text-align: center;
  letter-spacing: 0.1em;
  line-height: 1.4;
}
.c-recommend01-head span {
  font-weight: 500;
}
.c-recommend01-head__in {
  position: relative;
  display: inline-block;
  font-size: 2.2rem;
}
.c-recommend01-head__in:before, .c-recommend01-head__in:after {
  position: absolute;
  content: "";
  width: 3px;
  height: 55px;
  background: #ba8b4c;
  bottom: -5px;
}
.c-recommend01-head__in:before {
  left: -37px;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
.c-recommend01-head__in:after {
  right: -37px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.c-recommend01-head__in .is_marker_deep {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(70%, #efe1ce));
  background: linear-gradient(transparent 70%, #efe1ce 70%);
}
.c-recommend01__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}
.c-recommend01-list {
  position: relative;
  z-index: 1;
}
.c-recommend01-list:before {
  position: absolute;
  top: 48%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  left: 50%;
  width: 104%;
  height: 177px;
  content: "";
  background: url(../img/common/bg_logo01.png) no-repeat center/contain;
  z-index: -1;
}
.c-recommend01-list__item {
  position: relative;
  padding: 9px 5px 9px 28px;
  font-size: 1.5rem;
  line-height: 1.5;
  border-bottom: 1px dotted #c1c1c1;
}
.c-recommend01-list__item-small {
  font-size: 1.4rem;
}
.c-recommend01-list__item:before {
  position: absolute;
  top: 12px;
  left: 0;
  width: 19px;
  height: 17px;
  content: "";
  background: url(../img/common/ico_list_check01.png) no-repeat center/contain;
}
.c-recommend01__area-img {
  width: 150px;
  margin: 12px auto 0;
}
@media screen and (min-width: 600px) {
  .c-recommend01 {
    padding: 102px 0;
  }
  .c-recommend01.has-ico .c-recommend01__area-img {
    position: relative;
    margin-top: 0;
  }
  .c-recommend01.has-ico .c-recommend01__area-img:before {
    top: -117px;
    right: 10px;
    width: 150px;
    height: 150px;
  }
  .c-recommend01.is-woman02 .c-recommend01__area-img {
    width: 36%;
    margin-left: 12px;
  }
  .c-recommend01.has-border .c-recommend01-head {
    margin-bottom: 44px;
  }
  .c-recommend01.has-border .c-recommend01__box {
    display: block;
  }
  .c-recommend01.has-border .c-recommend01__box:before {
    top: 10px;
    left: 10px;
    background: url(../img/common/bg_recommend01_pc.jpg) no-repeat center/cover;
  }
  .c-recommend01.has-border .c-recommend01__box-in {
    position: relative;
    border: 10px solid #ecd7b9;
    padding: 44px 500px 95px 60px;
  }
  .c-recommend01.has-border .c-recommend01__area-img {
    bottom: -10px;
    left: 62%;
    -webkit-transform: none;
            transform: none;
  }
  .c-recommend01-head {
    margin-bottom: 69px;
  }
  .c-recommend01-head__in {
    font-size: 4rem;
  }
  .c-recommend01-head__in:before, .c-recommend01-head__in:after {
    width: 4px;
    height: 65px;
    bottom: -1px;
  }
  .c-recommend01-head__in:before {
    left: -49px;
  }
  .c-recommend01-head__in:after {
    right: -49px;
  }
  .c-recommend01__box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .c-recommend01-list {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .c-recommend01-list:before {
    width: 105%;
    height: 361px;
  }
  .c-recommend01-list__item {
    padding: 7px 5px 7px 35px;
    font-size: 2.2rem;
  }
  .c-recommend01-list__item-small {
    font-size: 1.8rem;
  }
  .c-recommend01-list__item:before {
    top: 13px;
    width: 25px;
    height: 22px;
  }
  .c-recommend01__area-img {
    width: 33%;
    margin: 0 0 0 45px;
  }
}