@charset "utf-8";

/*----------------------------------------------------
    PC・SP共通css
----------------------------------------------------*/
.l-siteinfo__sitename:before{
    content: "PR";
    background: #000;
    color: #fff;
    text-align: center;
    width: fit-content;
    margin-right: 1rem;
    font-size: 1.5rem;
    padding: 0 1rem;
    display: block;
    margin: 0rem auto 0.5rem;
}

.l-footer-copy a.l-footer-bottom__copy__link:before  {
    content: "【PR】";
}

p.cite {
  word-break: break-all;
  word-break: break-word;
  margin: 10px 0;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  scrollbar-width: thin;
  color: #666;
  word-break: break-all;
  font-size: 1rem;
  line-height: 1.4;
  scrollbar-color: #C0C0C0 #eee;
}

p.caption {
  text-align: center;
  display: grid;
}

p.caption img {
  margin: 0 auto;
}

p.center {
  text-align: center;
}

h5.l-parts02__three-columns__title {
  text-align: center;
  display: block;
}

p {
  margin: 20px 0px;
}

p.inyou {
  font-size: 0.8rem;
  text-align: right;
  margin: -10px 0 40px 0;
}

.l-mv__content__title2 {
  color: #0065ac;
}

p.cite.f {
  text-align: left;
  font-size: 0.8rem;
}

.cite::-webkit-scrollbar {
  height: 5px;
}

.cite::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #C0C0C0;
}

.official {
  margin: 0 auto;
  margin-top: 50px;
  background: #f5f5f559;
  border-radius: 30px 30px 30px 30px;
}

.official ul {
  display: block;
  margin: auto;
  padding: 20px;
  max-height: 300px;
  overflow-y: scroll;
  border: 1px solid #0065ac;
  margin-bottom: 15px;
}

.official ul li {
  display: block;
  border-bottom: 1px dashed #ccc;
  margin-bottom: 10px;
  padding: 0px 0px 5px 0px;
  text-align: left;
}

.official ul li span {
  font-size: 0.8em;
  display: block;
  background: none;
  color: #000;
  margin: 0px;
  font-weight: bold;
}

.official ul div {
  padding: 0rem 1rem;
  border-left: 6px double #333;
  font-weight: bold;
}

.official h5 {
  font-size: 1.3em;
  border-bottom: 1px solid #0065ac;
  padding-left: 10px;
}

.official h6 {
  font-size: 1.2em;
  border-bottom: 1px dashed #333;
}

.official h4,
.official h5,
.official h6 {
  font-weight: bold;
  margin: 20px 0;
}

p.mini {
  font-size: 12px;
  text-align: right;
}

.clinic-img {
  margin: auto;
  display: block;
  width: auto;
}

.references {
  text-align: center;
  color: #707070;
}

.map-frame {
  width: 100%;
}

.l-main-area table.time8 tr:nth-child(2) th {
  width: 12%;
}

p.caption.left {
  text-align: left;
  font-size: 1.2rem;
}

/* oki_20220719 */

.kanren {
  position: relative;
  box-sizing: border-box;
}

.midasi {
  border-bottom: 2px dotted #333;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
}

.kanren br {
  display: none;
}

/* アコーディオンのときに下記追加 */
.readmore-content {
  position: relative;
  overflow: hidden;
  height: 100px;
}

.readmore-content::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  content: "";
  /*以下お好み グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/
  height: 50px;
  z-index: 1;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 50%, #fff 100%);
}

/* 続きを読むボタン */
.readmore-label {
  display: table;
  bottom: 5px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  margin: 5px auto;
  z-index: 2;
  padding: 3px 10px;
  background-color: #084e96;
  border-radius: 10px;
  color: #FFF;
}

.readmore-label:before {
  content: "\7D9A\304D\3092\8AAD\3080";
}

.readmore-check {
  display: none;
}

/*チェック時にボタンを非表示*/
.readmore-check:checked~.readmore-label {
  position: static;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  /* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
  /* display: none; */
}

.readmore-check:checked~.readmore-label:before {
  content: "\9589\3058\308B";
}

/*チェック時に高さを自動に戻す*/
.readmore-check:checked~.readmore-content {
  height: auto;
}

/*チェック時グラデーション等を削除*/
.readmore-check:checked~.readmore-content::before {
  display: none;
}

/*2022.02.04*/
.top-pr__box {
  position: relative;
  background: url(https://www.teethlooking-good.com/wp/wp-content/uploads/top_pr_20220204.jpg) no-repeat center;
  background-size: cover;
  padding: 70px 30px 50px;
}

.l-lists__box h4 {
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: bold;
  color: #58d5df;
}

.toc-full-open {
  display: inline-block;
  width: 100%;
}

.toc-full-open .accordion_btn {
  position: relative;
  display: block;
  margin: 5rem auto 1rem;
  padding: 2rem 5rem 2rem 3rem;
  max-width: 360px;
  width: 80%;
  background: #0065ac;
  text-align: center;
  text-decoration: none;
  font-weight: 900;
  font-size: 1.8rem;
  line-height: 1.4;
  color: #fff;
  cursor: pointer;
  transition: .2s;
  border-radius: 75pt;
}

.toc-full-open .accordion_btn:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
  transition: .2s;
  right: 20px;
  width: 20px;
  height: 2px;
}

.toc-full-open .accordion_btn:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
  transition: .2s;
  right: 29px;
  width: 2px;
  height: 20px;
}

.toc-full-open .accordion_btn.is-open:after {
  transform: rotate(90deg);
}

.toc-full-open .accordion-item {
  transition: .3s;
  display: none;
}

.toc-full-open .accordion-item.is-open {
  max-height: 100%;
  opacity: 1;
}

.toc-full-open #toc {
  width: 100%;
  max-width: 700px;
  font-size: 14px;
}

#toc {
  width: 89%;
  margin: 0 auto 5rem auto;
  padding: 3rem 4rem;
  background: #f1f3f4;
  border-radius: 0.5rem;
}

#toc .ttl {
  position: relative;
  padding: 3rem 0 0 0;
  color: #000;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}

#toc .ttl::before {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  padding: 0.5rem 2rem 0.3rem 2rem;
  background: #58d5df;
  border-radius: 5rem;
  color: #fff;
  font-family: "Roboto Condensed";
  font-size: 1.6rem;
  font-weight: normal;
  letter-spacing: 0.05rem;
  line-height: 1.1;
  text-align: center;
  content: "Index";
}

.l-main-area ol.chapter {
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 1.4;
}

.l-main-area ol.chapter li {
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 1.4;
}

.l-main-area ol.chapter li:before {
  position: absolute;
  left: 0.7rem;
  top: 0.7rem;
  width: 10px;
  height: 10px;
  background: #a0adb0;
  border-radius: 50%;
  content: "";
}

.l-main-area ol.chapter li>ol.chapter li:before {
  position: absolute;
  left: 3.5rem;
  top: 0.5rem;
  width: 8px;
  height: 8px;
  background: none;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  border-radius: 0;
  content: "";
}

.l-main-area ol.chapter li a {
  display: block;
  margin: 1rem 0;
  padding: 0px 4rem 0.8rem 3rem;
  background: url(https://www.teethlooking-good.com/wp/wp-content/themes/SE023/img/Arrow_b.svg) no-repeat right 2rem top 18%;
  background-size: 9px auto;
  border-bottom: 1px solid #000;
  text-decoration: none;
}

.l-main-area ol.chapter li a:hover {
  text-decoration: none;
  opacity: 1;
  transition: none;
}

.l-main-area ol.chapter li>ol.chapter li a {
  padding: 0 4rem 0.8rem 5rem;
}


/*----------------------------------------------------
    PCサイトcss
----------------------------------------------------*/

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

  /*/////////////PC用のCSSをここに作成してください。/////////////*/
  /*/////////////必ず中括弧の中に作成してください。/////////////*/
  p.cite {
    text-align: right;
    color: #999;
    font-size: 0.8rem;
    margin-top: 1.5rem;
  }

  div.compari table th {
    width: 10%;
  }

  .base table tr th {
    width: 12.5%;
    word-break: normal;
  }

  .base table tr td {
    text-align: center;
    word-break: normal;
  }

  span.time-sm {
    font-size: 1.37rem;
  }

  .l-mv__content__catch {
    font-size: 1.5rem;
    font-weight: 100;
  }

  div.comparison-area__title.ch {
    text-align: center;
    font-weight: bold;
    padding-top: 25px;
    font-size: 2.8rem;
    margin-bottom: -50px;
  }

  .l-parts__text {
    font-weight: 100;
    padding: 6rem 12rem 2.5rem;
  }

  p.l-parts__text.com {
    width: 70%;
    margin: 0 auto;
  }

  span:not([class]) {
    color: #ff634b;
    font-size: 1.7rem;
    letter-spacing: .03em;
    font-weight: bold;
  }

  br.sp {
    display: none;
  }

  .feature.sp {
    display: none;
  }

  .official {
    width: 80%;
    padding: 20px 50px;
  }

  .clinic-img {
    max-width: 567px;
  }

  .l-lists__box {
    width: 100%;
  }
.l-siteinfo__sitename {
    font-size: 16px;
}
}




/*----------------------------------------------------
    SPサイトcss
----------------------------------------------------*/

@media screen and (max-width: 930px) {
  /*/////////////SP用のCSSをここに作成してください。/////////////*/
  /*/////////////必ず中括弧の中に作成してください。/////////////*/

  .base table {
    width: auto;
    max-width: 100%;
    margin: 0 auto 20px;
    display: table;
  }

  .base table tr {
    display: table-row;
    width: 100%;
  }

  .base table thead th, .base table thead td, .base table tbody th, .base table tbody td {
    display: table-cell;
    padding: 5px;
    width: 12.5%;
    word-break: normal;
    text-align: center;
  }

  .base table .time-sm {
    font-size: .8em;
    display: inline-block;
    line-height: 1.4;
    word-break: normal;
  }

  .l-main-area .btn-internal a {
    font-size: 1.45rem;
  }

  p.l-mv__content__catch {
    font-size: 1.2rem;
    font-weight: 100;
    width: 250px;
  }

  .l-mv__content__title2 {
    font-size: 2.2rem;
    text-align: left;
  }

  .l-mv {
    background: url(img/mv.png) no-repeat top 39px left 3px;
    background-size: cover;
  }

  div.compari {
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    box-sizing: border-box;
  }

  div.compari tr {
    display: table-row;
  }

  div.compari tr th {
    width: 20%;
  }

  div.compari tr td {
    width: 15%;
  }

  div.compari tr th, div.compari tr td {
    display: table-cell;
  }

  div.compari table {
    width: 1000px;
  }

  div.comparison-area__title.ch {
    text-align: center;
    font-weight: bold;
    padding-top: 15px;
    font-size: 1.8rem;
    margin-bottom: -15px;
  }

  .l-parts__text {
    font-weight: 100;
    padding: 1rem 1.8rem 1.5rem;
    font-size: 1.5rem;
  }

  span:not([class]) {
    color: #ff634b;
    font-size: 1.5rem;
    letter-spacing: .03em;
  }

  br.sp {
    display: block;
  }

  .l-parts02__box .btn-web a {
    padding: 1.7rem 4rem 1.7rem 3.5rem;
  }

  .l-siteinfo {
    padding: 0.7rem 8rem;
  }

  .l-siteinfo__sitename {
    font-size: 1.6rem;
  }

  .official {
    width: 100%;
    background: #f5f5f559;
    border-radius: 30px;
    padding: 5% 10%;
    margin-top: 50px;
  }

  .official ul {
    width: 100%;
    padding: 15px;
  }

  .l-main-area .official ul:not([class]) {
    margin: 0 auto;
  }

  iframe#instagram-embed-0 {
    min-width: initial !important;
  }

  .references {
    font-size: 1rem;
  }

  .clinic-img {
    max-width: 70%;
  }

  .l-main-area table.time8 th, .l-main-area table.time8 td {
    display: table-cell;
    line-height: 1.2;
    padding: 9px 3px;
    font-size: 12px;
    width: auto;
    text-align: center;
  }

  .l-main-area table.time8 td span.time-sm {
    font-size: 10px;
  }

  .l-main-area table.time8 tr {
    display: table-row;
  }

  .l-main-area table.time8 {
    width: 100%;
  }

  .top-pr__box {
    padding: 50px 15px 20px;
    background: url(https://www.teethlooking-good.com/wp/wp-content/uploads/top_pr_20220204.jpg) no-repeat center right;
    background-size: cover;
  }

  .toc-full-open .accordion_btn {
    padding: 1rem 5rem 1rem 3rem;
    width: 70%;
    margin: 2rem auto;
  }

  .toc-full-open #toc {
    width: 90%;
  }

  .toc-full-open #toc ol li a {
    font-size: 12px;
  }

  #toc {
    width: 100%;
    padding: 1.5rem;
  }

  #toc .ttl {
    padding: 3rem 0 0 0;
    font-size: 2rem;
  }

  #toc .ttl::before {
    font-size: 1.4rem;
  }

  .comparison-list-sp-scroll {
    display: flex;
    max-width: 800px;
    margin: auto;
    overflow-x: auto;
    flex-flow: nowrap;
  }
  .comparison-list-sp-scroll .comparison-box {
    width: 90%;
    padding: 8px;
    margin: 3px;
    flex-shrink: 0;
    list-style: none;
  }
  .comparison-list-sp-scroll .comparison-box .btn-web,
  .comparison-list-sp-scroll .comparison-box .btn-tel {
    width: 100%;
  }

}