/* ======================================== *

 * 歯科診療ページ用 - 歯科以外のページでも使用する共通css

 * 使用箇所に .dental を付ける

/* ======================================== */



/* ---------- for SP ---------- */

/* 流れ */

.dental .flow .no { 

  font-size: 2.5rem;

  padding:0 10px 0 0;

}

.dental .flow h3 {

  text-align: left;

  margin: 0 auto 2rem;

  padding: 1rem 2rem;

}

.dental .flow .arrow {

  padding: 0.8rem 0.5rem 0.8rem;

}

.dental .flow .arrow:nth-of-type(2) {

  background-color: #fcfaf7;

}

.dental .flow .arrow:nth-of-type(3) {

  background-color: #fcf5ea;

}

.dental .flow .arrow:nth-of-type(4) {

  background-color: #fcf0de;

}

.dental .flow .arrow:nth-of-type(5) {

  background-color: #fcebd2;

}

.dental .flow .arrow:nth-of-type(6) {

  background-color: #fce6c5;

}

.dental .flow .arrow:not(:last-child):after {

  display: block;

  content: "";

  position:absolute;

  color: #412a1c;

  width: 0;

  height: 0;

  border-style: solid;

  border-color: transparent;

  border-width: 1em 0.8em;

  border-top-color: currentColor;

  border-bottom: 0;

  right:calc(50% - 0.8em);

  z-index: 20;

}

.dental .flow .wrap {

  margin-bottom: 5rem;

}

.dental .flow .arrow:last-of-type .wrap {

  margin-bottom: 100px;

}



/* 治療回数 */

.dental .times dl {

  width:100%;

  line-height: 1.6em;

  margin: 0.8rem auto;

}

.dental .times dt {

  width: 40%;

  background-color: #f2e5d2;

  border-radius: 0.1em;

  padding: 0.3rem;

  text-align: center;

}

.dental .times dd {

  width: 60%;

  padding: 0.3rem;

}

.dental .times ul {

  list-style: none;

  margin: 1rem auto;

}



/* 料金内訳表 */

.dental .price_dl {

  border: #CBACAD 1px solid;

  width: 85%;

  margin: 2rem auto 50px;

  padding: 1rem;

}

.dental .price_dl + hr {

  margin-top: 100px;

}

.dental .price_dl h3 {

  margin-top: 2rem;

  border: none;

}

.dental .price_dl dl {

  display: flex;

  flex-wrap: wrap;

  width: 100%;

  margin: 2rem 0;

}

.dental .price_dl dl dt {

  width: calc(100% - 10em);

  border-bottom: #ccc 1px dotted;

  padding: 0.4rem 0 0.4rem 0.4rem;

  margin: 0;

  font-weight: 100;

  overflow-wrap: break-word;

  line-height: 1.8em;

}

.dental .price_dl dl dd {

  width: 10em;

  padding: 0.4rem 0 0.4rem 0.4rem;

  border-bottom: #ccc 1px dotted;

  margin: 0;

  text-align: right;

  line-height: 1.8em;

}

.dental .price_dl .sum {

  text-align: right;

  line-height: 2.3em;

  border: none;

}

.dental .price_dl .sum dt:last-of-type,

.dental .price_dl .sum dd:last-of-type{

  background-color: #f2e5d2;

}



/* ※付きの注釈 */

.price_dl ul.mark {

  list-style: none;

  padding: 0;

  margin: 0 0 0 0.3rem;

}

.price_dl ul.mark li.first::before {

  margin-left: -1em;

  content: '※';

}

.price_dl ul.mark li {

  padding-left: 1em;

}





/* ---------- for Tablet ---------- */

@media screen and (min-width: 600px) {  

  /* 治療の流れ */

  .dental .flow h3,

  .dental .flow .col {

    width: 90%;

  }

}





/* ---------- for PC ---------- */

@media screen and (min-width: 1000px) {

  /* 治療の流れ */

.dental .flow h3 {

  width: 70%;

}

.dental .flow .col {

  width: 67%;

}

/* 料金内訳表 */

.dental .price_dl {

  min-width: 900px;

  width: 70%;

  padding: 3rem;

}

.dental .price_dl h3 {

  min-width: auto;

}

.dental .price_dl dl dt {

  padding: 0.4rem 0 0.4rem 1rem;

}

.dental .price_dl dl dd {

  padding: 0.4rem 1rem 0.4rem 0.4rem;

}



}