@charset "UTF-8";
.small {
  line-height: 1.6em;
  font-size: 85%;
}
/* pcのみ画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンのみ画像が表示される */
@media only screen and (max-width: 480px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

/* 文字色 */
.main {color: #7e5d23;}
.sub {color: #e98379;}
.accent {color: #fdf3f2;}

/* レイアウトボックス・背景色 */
section h2 {
    text-align: center;
    color: #7e5d23;
    font-size: clamp(25px, 2.5vw, 30px);
    font-weight: bold;
    padding-top: 40px;
    margin: auto;
    width: fit-content;
    position: relative;
}
section h2 img{
  position: absolute;
  right: -35px;
  top: 25%;
  width: 30px;
  height: 30px;
}
@media only screen and (min-width: 798px) {
}
article h2,
article h3 {
    color: #7e5d23;
    font-size: clamp(22px, 2.5vw, 26px);
    font-weight: bold;
    margin-bottom: 15px;
}
section {position: relative;}
section.tri:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    right: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 30px solid transparent;
    border-left: 30px solid transparent;
    border-bottom: 0;
    z-index: 5;
}
.bg_main.tri:after {border-top: 30px solid #f2f7f7;}
.bg_sub.tri:after {border-top: 30px solid #fff9e8;}
.bg_accent.tri:after {border-top: 30px solid #fdf3f2;}
.bg_white.tri:after {border-top: 30px solid #fff;}

article {padding: 20px 0 20px}
article + article {
  padding: 0 0 20px;
}
@media only screen and (min-width: 798px) {
  article {padding: 20px 0 50px}  
}
.bg_main {background: #f2f7f7;}
.bg_sub {background: #fff9e8;}
.bg_accent {background: #fdf3f2;}
.bg_white {background: #fff;}
.bg_gray {background: #eee !important;}
.bg_doted {
  background: radial-gradient(#f1f6f4 52%, transparent 52%);
  background-size: 12px 12px;
}

/*ページ内リンク用CSS*/
.ownLinks{
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #7e5d23;
  margin: auto;
  padding: 20px;
}
.ownLinks a{
  font-size: 14px,2.5vw,15px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  padding-left: 20px;
  padding-right: 3%;
}
.ownLinks a:before{
  content: "";
  position: relative;
  bottom: 1px;
  left: -2px;
  display: inline-block;
  margin-right: 10px;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
  transition: 0.4s;
}
.ownLinks a:hover:before{
  left: 3px;
}

/*共通レイアウトCSS*/
.mt10{margin-top: 10px !important;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mt40{margin-top: 40px !important;}
.mt50{margin-top: 50px !important;}
.mt60{margin-top: 60px !important;}
.mt70{margin-top: 70px !important;}
.mt80{margin-top: 80px !important;}
.mt90{margin-top: 90px !important;}
.mt100{margin-top: 100px !important;}
.mb10{margin-bottom: 10px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.mb40{margin-bottom: 40px !important;}
.mb50{margin-bottom: 50px !important;}
.mb60{margin-bottom: 60px !important;}
.mb70{margin-bottom: 70px !important;}
.mb80{margin-bottom: 80px !important;}
.mb90{margin-bottom: 90px !important;}
.mb100{margin-bottom: 100px !important;}

.pt10{padding-top: 10px !important;}
.pt20{padding-top: 20px !important;}
.pt30{padding-top: 30px !important;}
.pt40{padding-top: 40px !important;}
.pt50{padding-top: 50px !important;}
.pt60{padding-top: 60px !important;}
.pt70{padding-top: 70px !important;}
.pt80{padding-top: 80px !important;}
.pt90{padding-top: 90px !important;}
.pt100{padding-top: 100px !important;}
.pb10{padding-bottom: 10px !important;}
.pb20{padding-bottom: 20px !important;}
.pb30{padding-bottom: 30px !important;}
.pb40{padding-bottom: 40px !important;}
.pb50{padding-bottom: 50px !important;}
.pb60{padding-bottom: 60px !important;}
.pb70{padding-bottom: 70px !important;}
.pb80{padding-bottom: 80px !important;}
.pb90{padding-bottom: 90px !important;}
.pb100{padding-bottom: 100px !important;}

.mx10{margin-left: 10px;margin-right: 10px;}
.mx20{margin-left: 20px;margin-right: 20px;}
.mx30{margin-left: 30px;margin-right: 30px;}
.mx40{margin-left: 40px;margin-right: 40px;}
.mx50{margin-left: 50px;margin-right: 50px;}
.mx60{margin-left: 60px;margin-right: 60px;}
.mx70{margin-left: 70px;margin-right: 70px;}
.mx80{margin-left: 80px;margin-right: 80px;}
.mx90{margin-left: 90px;margin-right: 90px;}
.mx100{margin-left: 100px;margin-right: 100px;}
.my10{margin-top: 10px;margin-bottom: 10px;}
.my20{margin-top: 20px;margin-bottom: 20px;}
.my30{margin-top: 30px;margin-bottom: 30px;}
.my40{margin-top: 40px;margin-bottom: 40px;}
.my50{margin-top: 50px;margin-bottom: 50px;}
.my60{margin-top: 60px;margin-bottom: 60px;}
.my70{margin-top: 70px;margin-bottom: 70px;}
.my80{margin-top: 80px;margin-bottom: 80px;}
.my90{margin-top: 90px;margin-bottom: 90px;}
.my100{margin-top: 100px;margin-bottom: 100px;}

.px10{padding-left: 10px;padding-right: 10px;}
.px20{padding-left: 20px;padding-right: 20px;}
.px30{padding-left: 30px;padding-right: 30px;}
.px40{padding-left: 40px;padding-right: 40px;}
.px50{padding-left: 50px;padding-right: 50px;}
.px60{padding-left: 60px;padding-right: 60px;}
.px70{padding-left: 70px;padding-right: 70px;}
.px80{padding-left: 80px;padding-right: 80px;}
.px90{padding-left: 90px;padding-right: 90px;}
.px100{padding-left: 100px;padding-right: 100px;}
.py10{padding-top: 10px;padding-bottom: 10px;}
.py20{padding-top: 20px;padding-bottom: 20px;}
.py30{padding-top: 30px;padding-bottom: 30px;}
.py40{padding-top: 40px;padding-bottom: 40px;}
.py50{padding-top: 50px;padding-bottom: 50px;}
.py60{padding-top: 60px;padding-bottom: 60px;}
.py70{padding-top: 70px;padding-bottom: 70px;}
.py80{padding-top: 80px;padding-bottom: 80px;}
.py90{padding-top: 90px;padding-bottom: 90px;}
.py100{padding-top: 100px;padding-bottom: 100px;}

.order01{order: 1!important;}
.order02{order: 2!important;}
.order03{order: 3!important;}

.Box{
    max-width: 1280px;
    margin: auto;
    font-size: clamp(15px,2vw,16px);
    text-align: justify;
}
.Box .txt{
    font-size: clamp(15px,2vw,16px);
}
.Box p{
    line-height: 1.8em;
}
.w840{max-width: 840px;margin: auto;}

.leftBox,.rightBox {width: 100%;padding: 20px;order: 1;position: relative;}
.leftBox .txt,.rightBox .txt {order: 3;}
.leftBox.picture,.rightBox.picture {padding:0;}
.Box picture {padding: 0;border-radius: 20px;object-fit: cover;height: 450px;width: auto;}

.opt-txt,
.leftBox .opt-txt,
.rightBox .opt-txt{
  width: 100%;
  max-width: 1090px;
  font-size: clamp(13px,3vw,14px);
  text-align: left;
  margin: -20px auto 20px;
  padding: 10px;
  background-color:#eee;
}
.leftBox .opt-txt,
.rightBox .opt-txt{
  position: absolute;
  bottom: 0;
  margin: auto;
  background-color:rgba(255,255,255,0.8);
}
.opt-txt strong{
  margin-right: 5px;
}
@media only screen and (max-width: 1100px) {
  .opt-txt{
    padding: 20px;
  }
  .leftBox .opt-txt,
  .rightBox .opt-txt{
    position: initial;
    background-color:#eee;
    padding: 20px;
  } 
}

@media only screen and (min-width: 798px) {
    .leftBox,.rightBox {width: calc(50% - 15px);}
    .txt {max-width: 440px;}
    .leftBox.txt {margin: 0 15px 0 auto;}
    .rightBox.txt {margin: 0 auto 0 15px;order: 2;}
    .leftBox.picture {margin: 0 0 0 auto;padding:0;text-align: right;}
    .rightBox.picture {margin: 0 auto 0 0;padding:0;}
}

/*Q&Aのtxtがサイズ変わっちゃうので追記*/
.faq__list .block .box__a .txt{
  max-width: 100%;
}

/* MV */
.mv,
.mv img {
  position: relative;
  width: 100%;
  height: 65vh;
  max-height: 280px;
  object-fit: cover;
  object-position: 63% center;
}
.mv {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.mv__catch {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 15px 15px 10px;
  border-radius: 0 10px 0 0;
}
.mv .ttl {
  width: 100%;
  font-size: clamp(25px, 2.5vw, 40px);
  font-weight: bold;
  color: #4d4d4d;
  line-height: 1.5em;
}
.mv .ttl__top {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7e5d23;
  padding: 5px 18px;
  color: #fff;
  font-size: clamp(10px, 3.5vw, 14px);
  font-feature-settings: "palt";
  letter-spacing: 0.03em;
}
@media only screen and (min-width: 1280px) {
  .mv,
  .mv img {
    max-height: 460px;
    object-position: center center;
  }
  .mv__catch {
    top: 35%;
    margin: 0 20%;
    height: fit-content;
    padding: 20px;
    border-radius: 10px;
  }
}

/*診療の特徴を説明*/
.w840 ul.count {
    width: 100%;
    display: flex;
    justify-content: center;
    column-gap: 25px;
    flex-wrap: wrap;
}
.w840 ul.count li {
    width: calc(100% - 40px);
    position: relative;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.w840 ul.count li:last-child {
    margin-bottom: 0;
}
.w840 ul.count li span {
    font-size: 125%;
    font-weight: bold;
    color: #7e5d23;
    line-height: 1.4em;
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    margin: auto;
    padding: 6px 0;
    width: 95%;
}
.w840 ul.count li picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: #fff;
    padding: 0;
    margin: auto;
}
.w840 ul.count li picture img{
  height: auto;
  width: 55%;
  margin-top: 8px;
}
.w840 ul.count li p{
    text-align: justify;
    margin: 10px auto 0;
    font-size: clamp(15px,2vw,15px);
    width: 55%;
}
.w840 ul.count li p strong{
  font-size: 120%;
  color: #7e5d23;
  display: inline-block;
  width: 100%;
  text-align: center;
  padding-bottom: 5px;
}

/*テキストかアイコンのみの場合*/
.w840 ul.count.only {
  column-gap: 15px;
}
.w840 ul.count.only li {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background-color: #fff;
    align-content: center;
    padding-bottom: 0;
}
.w840 ul.count.only li img{
  height: auto;
  width: 45%;
  margin-top: 35px;
}
.w840 ul.count.only li p{
  font-size: clamp(13px, 2vw, 14px);
  width: 90%;
  text-align: justify;
}

@media only screen and (min-width: 798px) {
    .w840 ul.count li {
        width: calc(33% - 25px);
        align-content: flex-start;
        margin-bottom: 0;
        padding-bottom: 30px;
    }
    .w840 ul.count li p{
        width: 90%;
        margin: auto;
    }
    .w840 ul.count li picture {
      width: 160px;
      height: 160px;
      margin-bottom: -15px;
    }

  .w840 ul.count.only li {
      width: 160px;
      height: 160px;
      margin-left: 40px;
      margin-right: 40px;
  }
}

/*親知らずページ、メリットのレイアウト流用*/
.any_ver .w840 ul.count li {
  margin-top: 60px;
}
.any_ver .w840 ul.count li span{
  width: 100%;
  top: -45px;
  text-align: left;
  padding-left: 44%;
}
.any_ver .w840 ul.count li span small{
  font-weight: normal;
}
.any_ver .w840 ul.count li picture {
  margin-top: -45px;
}
.any_ver .w840 ul.count li picture img{
  width: 100%;
  margin-top: 0;
}
@media only screen and (min-width: 798px) {
  .any_ver .w840 ul.count li {
    width: calc(25% - 20px);
  }
  .any_ver .w840 ul.count li span{
    top: -25px;
    text-align: center;
    padding-left: 0;   
  }
  .any_ver .w840 ul.count li picture {
    margin-top: 45px;
    margin-bottom: 8px;
  }
}

.links {
  font-size: clamp(15px,2vw,17px);
  text-align: center;
  color: white;
  background: #7e5d23;
  border-radius: 25px;
  border: solid 1px #7e5d23;
  padding: 15px 18px 15px 0;
  margin: 15px auto;
  display: block;
  position: relative;
  transition: 0.4s;
}
.links:after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  position: absolute;
  right: 20px;
  top: 36%;
  transform: rotate(-45deg);
  transition: 0.4s;
}
.links:hover {
  background: #fff;
  color: #7e5d23;
}
.links:hover:after {
  content: "";
  right: 10px;
  border-right: 2px solid #7e5d23;
  border-bottom: 2px solid #7e5d23;
}
.txticon {
  font-size: clamp(15px,2vw,16px);
  text-align: center;
  color: white;
  padding: 6px 15px;
  margin: 0.5% auto;
  display: inline-block;
}
.txticon.c1 {background: #7e5d23;}
.txticon.c2 {background: #ff933b;}
.txticon.c3 {background: #00b900;}
.txticon.c4 {background: #e98379;}

.links.w100 {width: 100%;}
.links.w50 {width: calc(49% - 1px);display: inline-block;}
.links.w50 + .links.w50{margin-left: 1%;}
.txticon.w100 {width: 100%;}
.txticon.w80 {width: 78%;}
.txticon.w50 {width: 49%;margin-right: 0.5%;}

/*診療の流れ*/
.flow_article{
  width: 100%;
  height: 100%;
  min-height: 120px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-between;
  position: relative;
}
.flow_article p{
  font-size: clamp(13px,2.5vw,14px);
  line-height: 1.6em;
  width: calc(55% - 5px);
  padding: 15px 15px 15px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
}
.flow_article p strong{
  font-size: clamp(15px,2.5vw,16px);  
  display: block;
  margin-bottom: 5px;
  width: 100%;
}
.flow_article picture{
  width: 45%;
  height: auto;
  min-height: 180px;
  max-height: 280px;
  padding: 0;
  display: flex;
}
.flow_article picture img{
  object-fit: cover;
  object-position: center;
  border-radius: 10px 0 0 10px;
}
.flow_article .number{
  width: 35px;
  height: 35px;
  border-radius: 20px;
  background-color: #86c22a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -10px;
  left: -10px;
  font-size: 18px;
  padding-bottom: 2px; 
}
.flow_article.bg_gray{
  border: 2px solid #7e5d23;
  position: relative;
}
.flow_article.bg_gray:after{
  content: "";
  position: absolute;
  top: -10px;
  right: 15%;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-bottom: 10px solid #7e5d23;
  border-top: 0;
}

@media only screen and (min-width: 798px) {
  .flow_article p{
    padding: 20px 25px 20px 10px;
  }
  .flow_article picture{
    max-height: 160px;
  }
}

/*料金*/
.price{
  font-weight: bold;
  color: #e98379;
  margin-top: 15px;
}
.price strong{
  font-size: clamp(28px,2.5vw,35px);
  margin-left: 5px;
  margin-right: 5px;
}

/*複数種類あるバージョン*/
.oyashirazu .ceramic_inner{
  justify-content: space-between;  
}
.oyashirazu .treatment{
  width: calc(100% - 60px);
  padding: 10px 0;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px dashed #222;
}
.oyashirazu .treatment p{
  width: fit-content;
  text-align: left;
  margin: 0 auto 0 0;
}
.oyashirazu .treatment p.price{
  font-size: clamp(18px,2.5vw,22px);
  text-align: right;
  margin: 0 0 0 auto;
}
.oyashirazu .treatment p.price small{
  font-size: 13px;
  font-weight: normal;
}
@media only screen and (min-width: 798px) {
  .oyashirazu .treatment{
    width: calc(100% - 100px);
  }  
}
.ceramic_maker{
  font-size: clamp(18px,2.5vw,22px);
  font-weight: bold;
  text-align: left;
  color: #7e5d23;
  background-color: #fff;
  padding: 30px 30px 10px;
  margin-bottom: -5px;
  border-radius: 10px 10px 0 0;
}
.ceramic_inner{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  margin-bottom: 30px;
}
.ceramic_inner p.inner_txt{
  font-size: clamp(13px,2.5vw,14px);
  padding: 0 30px 30px;
  text-align: left;
  width: 100%;
}
.ceramic_item{
  width: 90%;
  padding: 20px 15px 15px;
  border-top: dashed 1px #222;
}
.ceramic_item_title{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: bold;
  color: #7e5d23;
}
.ceramic_unit{
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.ceramic .price{
  font-size: 22px;
  margin-top: 15px;
  margin-right: 0px;
}
.ceramic .price small{
  font-size: 13px;
  font-weight: normal;
}
.othercosts{
  text-align: left;
  font-size: clamp(14px,3vw,15px);
  text-indent: -1.3em;
  padding-left: 1.3em;
}
.othercosts:before{
  content: "●";
  color: #c1c1c1;
  margin-right: 4px;
}
@media only screen and (min-width: 798px) {
  .ceramic_maker{
    padding: 30px 50px 20px;
  }
  .ceramic_inner p.inner_txt{
    padding: 0 50px 30px;
  }
  .ceramic_item{
    width: calc(25% - 5px);
    padding: 20px 15px 15px;
    border-top: none;
  }
  .ceramic_item_title{
    display: initial;
  }
}

/*モニター募集リンクテキスト*/
.monitor {
  margin: 15px auto 0;
  width: 100%;
  max-width: 800px;
}
.monitor a {
  font-size: clamp(14px,2.5vw,15px);
  color: #7e5d23;
  position: relative;
  text-align: center;
  padding: 10px 8px 12px 0;
  display: block;
}
.monitor a:before {
  content: "\025b6";
  font-size: 80%;
  margin-right: 5px;
  position: relative;
  bottom: 2px;
}

/*注意事項*/
.attention {
  max-width: 800px;
  padding: 30px;
  margin: 0 auto;
  border-radius: 15px;
}
.attention p{
  font-size: clamp(12px,2.5vw,13px);
  line-height: 1.5em;
  margin-bottom: 4px;
  padding-left: 1.2em;
  text-indent: -1.2em;
}
.attention p:before{
  content: "●";
  font-size: 80%;
  color: #bbb;
  margin-right: 6px;
}
.attention p:last-child{
  margin-bottom: 0;
}

/* パンくず */
.breadcrumb {
}
.breadcrumb .list {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: auto;
}
.breadcrumb .list li {
    padding: 20px 5px 20px 15px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}
.breadcrumb .list li a {
    color: #4d4d4d;
    display: block;
    position: relative;
    display: inline-block;
}
.breadcrumb .list li a::before {
    content: "";
    width: 5px;
    height: 5px;
    border-top: solid 1px #4d4d4d;
    border-right: solid 1px #4d4d4d;
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
@media only screen and (max-width: 767px) {
  .breadcrumb .list li {
    font-size: 10px;
  }
}

/*自費診療レイアウト共有CSS*/