/* global
------------------------------------- */
#mainImg { background-image: url(../img/dentures/mainimg01_sp.png); }

#mainImg .tit:before { top: -16px; left: -80px; width: 109.5px; height: 23.5px; background-image: url(../img/dentures/txt_mainimg01.png); }

@media all and (min-width: 600px) { #mainImg { background-image: url(../img/dentures/mainimg01_pc.png); }
  #mainImg .tit:before { top: -24px; left: -64px; width: 142px; height: 31px; } }

span.green { color: #7cbc00; }

@media all and (max-width: 599px) { .col2 .img + .img { margin-top: 10px; } }

@media all and (min-width: 600px) { .col2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
  .col2 .img { width: 540px; } }

@media all and (max-width: 599px) { .col3 .img + .img { margin-top: 10px; } }

@media all and (min-width: 600px) { .col3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
  .col3 .img { width: 352px; } }

.arw { position: relative; }

.arw:after { display: block; content: ""; position: absolute; bottom: -10px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 138px; height: 30px; background: url(../img/common/arw_down01.png) no-repeat center/cover; }

@media all and (min-width: 600px) { .arw:after { bottom: 50%; right: -30px; left: auto; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); width: 43px; height: 92px; background: url(../img/common/arw_right05.png) no-repeat center/43px; } }

.bg_white { background-color: #fff; border-radius: 10px; padding: 0 20px; }

@media all and (min-width: 600px) { .bg_white { border-radius: 15px; padding: 0 50px; } }

#intro .inner { padding-top: 18px; }

#intro .lead { text-align: center; margin-bottom: 20px; }

#intro .about .box .txt { margin-top: 14px; }

#intro .compare { margin-top: 30px; }

#intro .compare .wrapper { position: relative; padding: 36px 20px 30px; box-sizing: border-box; background: #fff; box-shadow: 0px 4px 15px 0px rgba(4, 0, 0, 0.1), inset 0px 0px 0px 14px rgba(241, 241, 241, 0.004); }

#intro .compare .wrapper:before { content: ""; position: absolute; top: 6px; left: 6px; width: calc(100% - 14px); height: calc(100% - 14px); border: 1px solid #f1f1f1; }

#intro .compare .box { padding-bottom: 26px; }

#intro .compare .box + .box { padding-top: 18px; border-top: 2px solid #eeeeee; padding-bottom: 3px; }

#intro .compare .box .list + .list { margin-top: 10px; }

#intro .compare .box .list dt { font-weight: 500; }

#intro .recommend { margin-top: 90px; }

#intro .recommend .checkList { margin: 34px 0 0; padding: 18px 20px 22px; box-sizing: border-box; border-radius: 10px; background: #f7f7f7; }

#intro .recommend .checkList .item { line-height: 1.6; position: relative; padding: 8px 0 8px 30px; border-bottom: 1px dashed #cccbcb; }

#intro .recommend .checkList .item:before { content: ""; position: absolute; top: 12px; left: 0; width: 17px; height: 14px; background: url(../img/esthetic/ico_check01.png) no-repeat center/cover; }

@media all and (min-width: 600px) { #intro .inner { padding-top: 66px; }
  #intro .lead { text-align: center; margin-bottom: 20px; }
  #intro .about { margin-top: 41px; }
  #intro .about .box .tit { float: right; margin-top: -5px; width: 506px; }
  #intro .about .box .img { float: left; width: 540px; }
  #intro .about .box .txt { float: right; width: 520px; margin-top: 3px; line-height: 1.86667; font-size: 1.5rem; }
  #intro .compare { margin-top: 50px; }
  #intro .compare .wrapper { margin-top: 39px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 36px 50px 21px; }
  #intro .compare .wrapper .box { width: 470px; padding-bottom: 26px; }
  #intro .compare .wrapper .box .tit { font-size: 1.8rem; margin-bottom: 21px; }
  #intro .compare .wrapper .box .list + .list { margin-top: 23px; }
  #intro .compare .wrapper .box .list dt { margin-bottom: 9px; }
  #intro .compare .wrapper .box .list dd { font-size: 1.5rem; }
  #intro .compare .wrapper .box + .box { padding-top: 0; border: none; padding-left: 30px; border-left: 2px solid #eeeeee; padding-bottom: 3px; }
  #intro .recommend .checkList { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 52px 0 0; padding: 32px 50px 32px; }
  #intro .recommend .checkList .item { width: calc(50% - 56px); padding: 8px 0 8px 26px; font-size: 1.5rem; }
  #intro .recommend .checkList .item:before { top: 12px; left: 0; width: 21px; height: 17px; }
  @-moz-document url-prefix() { #intro .recommend .checkList .item:before { width: 21.5px; height: 17.5px; } } }

#treatment { background-color: #ddf0e9; margin-top: 50px; }

#treatment .inner { padding-top: 55px; padding-bottom: 50px; }

@media all and (min-width: 600px) { #treatment { margin: 102px 0; }
  #treatment .inner { padding-top: 92px; padding-bottom: 100px; } }

#treatment .transparent .lead { margin-bottom: 15px; }

#treatment .transparent .wrapper { padding-top: 24px; padding-bottom: 23px; }

#treatment .transparent .wrapper .box .list { margin-top: 14px; }

#treatment .transparent .wrapper .box .list .item { position: relative; margin-bottom: 8px; padding: 2px 0 10px 14px; border-bottom: 1px dashed #cccbcb; line-height: 1.42857; }

#treatment .transparent .wrapper .box .list .item:before { content: ""; position: absolute; top: 10px; left: 0; width: 5px; height: 5px; background: #7cbc00; border-radius: 50%; }

@media all and (min-width: 600px) { #treatment .transparent .lead { margin-bottom: 35px; font-size: 1.5rem; }
  #treatment .transparent .wrapper { padding-top: 34px; padding-bottom: 43px; }
  #treatment .transparent .wrapper .tit { font-size: 1.8rem; }
  #treatment .transparent .wrapper .box { display: -webkit-box; display: -ms-flexbox; display: flex; }
  #treatment .transparent .wrapper .box .img { width: 352px; margin-right: 40px; }
  #treatment .transparent .wrapper .box .list { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-top: -7px; }
  #treatment .transparent .wrapper .box .list .item { font-size: 1.5rem; }
  #treatment .transparent .wrapper .box .list .item:before { width: 6px; height: 6px; } }

#treatment .gallery { margin-top: 25px; }

#treatment .gallery .box + .box { margin-top: 15px; }

#treatment .gallery .box .tit { font-size: 1.6rem; font-weight: 500; margin-bottom: 9px; }

#treatment .gallery .box .images + .images { margin-top: 20px; }

#treatment .gallery .box .notice { margin-top: 30px; padding: 15px; background-color: #fff; border-radius: 10px; border: 1px solid #b6b5b5; }

@media all and (min-width: 600px) { #treatment .gallery { margin-top: 29px; }
  #treatment .gallery .box + .box { margin-top: 15px; }
  #treatment .gallery .box .tit { font-size: 2.6rem; }
  #treatment .gallery .box .images + .images { margin-top: 20px; }
  #treatment .gallery .box .notice { margin-top: 50px; padding: 20px; border-radius: 25px; } }

#treatment .silicone { margin-top: 32px; }

#treatment .silicone .box { padding-top: 16px; padding-bottom: 26px; }

#treatment .silicone .box .list .item { line-height: 1.6; position: relative; padding: 8px 0 8px 30px; border-bottom: 1px dashed #cccbcb; }

#treatment .silicone .box .list .item:before { content: ""; position: absolute; top: 12px; left: 0; width: 17px; height: 14px; background: url(../img/esthetic/ico_check01.png) no-repeat center/cover; }

#treatment .silicone .box .tit { font-size: 1.6rem; font-weight: 500; margin-bottom: 9px; }

#treatment .silicone .txt { margin-top: 16px; }

#treatment .silicone .merit { margin-top: 14px; padding: 20px 20px 26px; border-radius: 10px; box-sizing: border-box; background: #f8f8f8; }

#treatment .silicone .merit .list .item { position: relative; margin-bottom: 8px; padding: 2px 0 8px 14px; border-bottom: 1px dashed #cccbcb; line-height: 1.42857; }

#treatment .silicone .merit .list .item:before { content: ""; position: absolute; top: 10px; left: 0; width: 5px; height: 5px; background: #7cbc00; border-radius: 50%; }

@media all and (min-width: 600px) { #treatment .silicone { margin-top: 67px; }
  #treatment .silicone .box { padding-top: 30px; padding-bottom: 32px; }
  #treatment .silicone .box .list .item { font-size: 1.5rem; padding: 8px 0 8px 28px; }
  #treatment .silicone .box .list .item:before { top: 14px; width: 21px; height: 17px; }
  #treatment .silicone .box .tit { font-size: 2.6rem; }
  #treatment .silicone .txt { margin-top: 36px; font-size: 1.5rem; }
  #treatment .silicone .merit { margin-top: 35px; padding: 38px 50px 26px; border-radius: 15px; }
  #treatment .silicone .merit .tit { font-size: 1.8rem; }
  #treatment .silicone .merit .list { margin-top: -9px; }
  #treatment .silicone .merit .list .item { font-size: 1.5rem; margin-bottom: 8px; padding: 4px 0 8px 13px; } }

#treatment .implant { margin-top: 36px; }

#treatment .implant .txt { margin-bottom: 24px; }

#treatment .implant .box .tit { font-size: 1.6rem; font-weight: 500; margin-bottom: 9px; }

#treatment .implant .notice { margin-top: 30px; padding: 15px; background-color: #fff; border-radius: 10px; border: 1px solid #b6b5b5; }

@media all and (min-width: 600px) { #treatment .implant { margin-top: 70px; }
  #treatment .implant .txt { margin-bottom: 24px; font-size: 1.5rem; }
  #treatment .implant .box .tit { font-size: 2.6rem; }
  #treatment .implant .notice { margin-top: 50px; padding: 20px; border-radius: 25px; } }

#treatment .cap { margin-top: 26px; }

#treatment .cap .txt { margin-bottom: 29px; }

#treatment .cap .box .tit { font-size: 1.6rem; font-weight: 500; margin-bottom: 9px; }

#treatment .cap .box .notice { margin-top: 30px; padding: 15px; background-color: #fff; border-radius: 10px; border: 1px solid #b6b5b5; }

@media all and (min-width: 600px) { #treatment .cap { margin-top: 68px; }
  #treatment .cap .txt { font-size: 1.5rem; }
  #treatment .cap .images + .images { margin-top: 40px; }
  #treatment .cap .box .tit { font-size: 2.6rem; }
  #treatment .cap .box .notice { margin-top: 50px; padding: 20px; border-radius: 25px; } }

#treatment .over { padding-top: 52px; margin-top: -26px; }

#treatment .over .txt { margin-bottom: 14px; }

#treatment .over .box .tit { font-size: 1.6rem; font-weight: 500; margin-bottom: 9px; }

#treatment .over .box .notice { margin-top: 30px; padding: 15px; background-color: #fff; border-radius: 10px; border: 1px solid #b6b5b5; }

@media all and (min-width: 600px) { #treatment .over { padding-top: 169px; margin-top: -98px; }
  #treatment .over .txt { font-size: 1.5rem; margin-bottom: 21px; }
  #treatment .over .box .tit { font-size: 2.6rem; }
  #treatment .over .box .notice { margin-top: 50px; padding: 20px; border-radius: 25px; } }

/* #flow
------------------------------------- */
#flow { padding-top: 55px; }

#flow .list { margin-bottom: 40px; }

#flow .list .listItem { margin-top: 30px; }

#flow .list .listItem .sub { text-align: center; font-weight: 500; font-size: 1.8rem; margin: 10px 0 5px; }

@media all and (min-width: 600px) { #flow { padding-top: 0; }
  #flow .list { margin-bottom: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
  #flow .list .listItem { width: 32%; margin-top: 10px; }
  #flow .list .listItem .sub { font-size: 1.9rem; margin: 10px 0; }
  #flow .txt { text-align: center; } }

/* .price
------------------------------------- */
.price { position: relative; margin-bottom: 50px; background: url(../img/esthetic/bg_price01_sp.png) no-repeat center/cover; }

.price .inner { padding-top: 50px; }

.price:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 65px; background: #fff; }

.price .inner { padding-bottom: 40px; }

.price .areaBtn { position: relative; background: #fff; box-shadow: 0px 3px 10px 0px rgba(4, 0, 0, 0.2); border-radius: 10px; }

@media all and (min-width: 600px) { .price .areaBtn { box-shadow: 0px 6px 20px 0px rgba(4, 0, 0, 0.3); } }

.price .areaBtn .detail { padding: 15px 20px 30px; text-align: center; }

.price .areaBtn .detail .sub { position: relative; display: inline-block; font-size: 1.8rem; font-weight: 500; line-height: 1.8; }

.price .areaBtn .detail .sub span { color: #7cbc00; }

.price .areaBtn .detail .sub:before { content: ""; position: absolute; top: -4px; left: -18px; width: 38px; height: 12px; background: url(../img/esthetic/txt_price01.png) no-repeat center/cover; }

.price .areaBtn .detail .txt { padding-top: 9px; }

.price .areaBtn .detail .btn { padding-top: 15px; }

@media all and (min-width: 600px) { .price { margin-bottom: 140px; background: transparent; }
  .price:before { top: 180px; height: 214px; background: url(../img/esthetic/bg_price01_pc.png) no-repeat center/cover; -webkit-transform: translateX(-200px); -ms-transform: translateX(-200px); transform: translateX(-200px); }
  .price .inner { padding-top: 100px; padding-bottom: 40px; }
  .price .areaBtn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; width: 100%; margin: 0; }
  .price .areaBtn .detail { padding: 56px 80px 40px 0; }
  .price .areaBtn .detail .sub { font-size: 2.6rem; letter-spacing: 0.05em; }
  .price .areaBtn .detail .sub:before { top: -12px; }
  .price .areaBtn .detail .btn { margin: 0 0 0 -20px; padding-top: 10px; }
  .price .areaBtn .detail .btn a { height: 60px; } }