@charset "UTF-8";
/* ===============================================================
  pediatric-dentistry.css

  目次
  1. ユーティリティ
  2. レイアウト（グリッド・カラム）
  3. ベーススタイル（body・header）
  4. PD イントロセクション
  5. PD アイテム（リスト・カード共通）
  6. タグ・タグリスト
  7. 治療内容（treatment-detail）
  8. FAQ

  ルール：
    固定サイズ        → calc(N * var(--px))
    可変フォント      → var(--fN)  ※1680px以下で縮小するもの
    var(--f17) / var(--f15) はそのまま維持
    clamp()はそのまま維持
    レスポンシブ      → @media screen and (max-width: 834px)
=============================================================== */
/* ---------------------------------------------------------------
  1. ユーティリティ
--------------------------------------------------------------- */
.en {
  font-family: var(--inter);
}

br.pc {
  display: block;
}

br.sp {
  display: none;
}

@media screen and (max-width: 834px) {
  br.pc {
    display: none;
  }
  br.sp {
    display: block;
  }
}
/* ---------------------------------------------------------------
  2. レイアウト（グリッド・カラム）
--------------------------------------------------------------- */
/* 2カラム */
.column-2 {
  display: grid;
  grid-template-columns: 47% 47%;
  align-items: center;
  justify-content: space-between;
}

@media screen and (max-width: 834px) {
  .column-2 {
    display: flex;
    flex-direction: column;
  }
}
/* 3カラム カード */
.PD-item__card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(40 * var(--px));
}

.PD-item__card .card {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.PD-item__card .card .PD-item__picture img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.PD-item__card .card .PD-item__text-box {
  margin-top: calc(20 * var(--px));
}

.PD-item__card .card .PD-item__sub-title {
  font-size: var(--f20);
  line-height: 1.5;
  font-weight: 400;
  color: #ee8f63;
}

.PD-item__card .card .PD-item__text {
  margin-top: calc(16 * var(--px));
  font-size: var(--f17);
  line-height: 2;
}

@media screen and (max-width: 834px) {
  .PD-item__card {
    grid-template-columns: 1fr;
    gap: calc(32 * var(--px));
  }
  .PD-item__card .card .PD-item__text-box {
    margin-top: calc(16 * var(--px));
  }
  .PD-item__card .card .PD-item__sub-title {
    font-size: var(--f18);
  }
  .PD-item__card .card .PD-item__text {
    font-size: calc(14 * var(--px));
    line-height: 1.9;
  }
}
/* ---------------------------------------------------------------
  3. ベーススタイル（body・header）
--------------------------------------------------------------- */
body {
  font-weight: 400;
}

/* ---------------------------------------------------------------
  4. PD イントロセクション
--------------------------------------------------------------- */
.PD-intro {
  padding: calc(120 * var(--px)) 0 0;
}

@media screen and (max-width: 834px) {
  .PD-intro {
    padding: calc(40 * var(--px)) 0 0;
  }
}
h2.PD-intro__title {
  font-size: var(--f40);
  font-weight: 500;
  text-align: center;
  font-family: var(--notoserif);
  margin-bottom: calc(37 * var(--px));
}

.PD-intro__text {
  max-width: calc(800 * var(--px));
  margin: 0 auto;
  width: 95%;
}

@media screen and (max-width: 834px) {
  h2.PD-intro__title {
    font-size: var(--f28);
    margin-bottom: calc(20 * var(--px));
  }
  .PD-intro__text {
    width: 100%;
  }
}
/* ---------------------------------------------------------------
  5. PD アイテム（リスト・カード共通）
--------------------------------------------------------------- */
.PD-list {
  margin-top: calc(120 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(90 * var(--px));
}

@media screen and (max-width: 834px) {
  .PD-list {
    margin-top: calc(60 * var(--px));
    gap: calc(48 * var(--px));
  }
}
.PD-item {
  background-color: #fff;
  border-radius: calc(30 * var(--px));
  padding: calc(60 * var(--px)) 5% calc(90 * var(--px));
}

@media screen and (max-width: 834px) {
  .PD-item {
    border-radius: calc(15 * var(--px));
    padding: calc(30 * var(--px)) 5% calc(40 * var(--px));
  }
}
.PD-item__title {
  background: #ee8f63;
}

.PD-item__text {
  font-size: var(--f17);
  margin-bottom: calc(64 * var(--px));
}

@media screen and (max-width: 834px) {
  .PD-item__text {
    margin-bottom: calc(30 * var(--px));
  }
}
/* PD アイテム イントロ */
.PD-item__intro {
  grid-template-columns: 46% 48%;
  margin-top: 70px;
  align-items: flex-start;
}

.PD-item__intro .PD-item__sub-title {
  font-size: var(--f32);
  line-height: 1.6;
  font-weight: 400;
}

.PD-item__intro .PD-item__text {
  margin-top: calc(30 * var(--px));
}

@media screen and (max-width: 834px) {
  .PD-item__intro {
    gap: calc(24 * var(--px));
    margin-top: 30px;
  }
  .PD-item__intro .PD-item__sub-title {
    font-size: var(--f24);
  }
  .PD-item__intro .PD-item__text {
    margin-top: calc(16 * var(--px));
    font-size: calc(14 * var(--px));
  }
}
/* ---------------------------------------------------------------
  6. タグ・タグリスト
--------------------------------------------------------------- */
.tag {
  margin-top: calc(30 * var(--px));
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--px));
}

.tag li {
  padding: calc(9 * var(--px)) calc(15 * var(--px));
  border-radius: calc(14 * var(--px));
  background: #ee8f63;
  color: #fff;
  line-height: 1;
  font-size: calc(15 * var(--px));
  font-weight: 400;
}

@media screen and (max-width: 834px) {
  .tag {
    margin-top: calc(20 * var(--px));
    gap: calc(8 * var(--px));
  }
  .tag li {
    font-size: calc(13 * var(--px));
    padding: calc(7 * var(--px)) calc(12 * var(--px));
  }
}
.tag-list {
  margin: calc(20 * var(--px)) 0;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--px));
}

.tag-list li {
  font-weight: 500;
  position: relative;
}

.tag-list li::before {
  content: "";
  width: calc(10 * var(--px));
  aspect-ratio: 1/1;
  background-color: #ee8f63;
  border-radius: 50%;
  margin-right: calc(10 * var(--px));
  display: inline-block;
}

@media screen and (max-width: 834px) {
  .tag-list li::before {
    margin-right: calc(7 * var(--px));
  }
}
/* ---------------------------------------------------------------
  7. 治療内容（treatment-detail）
--------------------------------------------------------------- */
.treatment-detail .PD-item__intro .PD-item__picture {
  background: #f8f6f1;
  padding: calc(44 * var(--px)) 13%;
}

.treatment-detail .PD-item__card {
  padding-top: calc(55 * var(--px));
  margin: calc(45 * var(--px)) 0 calc(80 * var(--px));
  border-top: 2px dotted #dddddd;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.treatment-detail .PD-item__card .card {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 48%;
}

.treatment-detail .PD-item__card .card .PD-item__picture {
  width: 48%;
}

.treatment-detail .PD-item__card .card .PD-item__text-box {
  width: 48%;
  margin-top: 0;
}

.treatment-detail .PD-item__card .card .PD-item__sub-title span {
  font-size: 10px;
}

.treatment-detail .PD-item__card .card .PD-item__text {
  font-size: var(--f15);
  margin-bottom: 0;
}

.treatment-detail .PD-item__intro.training .PD-item__sub-title {
  color: #ee8f63;
  font-size: var(--f20);
}
.treatment-detail .PD-item__intro.training .PD-item__sub-title span {
  font-size: 10px;
}

.treatment-detail .PD-item__intro.training .PD-item__text {
  margin: calc(10 * var(--px)) 0 0;
}

.treatment-detail .PD-item__intro.training .note {
  font-size: var(--f15);
}

@media screen and (max-width: 834px) {
  .treatment-detail .PD-item__card {
    flex-direction: column;
    gap: calc(32 * var(--px));
  }
  .treatment-detail .PD-item__card .card {
    flex-direction: column;
    width: 100%;
  }
  .treatment-detail .PD-item__card .card .PD-item__picture {
    width: 100%;
  }
  .treatment-detail .PD-item__card .card .PD-item__text-box {
    width: 100%;
    margin-top: calc(16 * var(--px));
  }
  .treatment-detail .PD-item__intro .PD-item__picture {
    padding: calc(24 * var(--px)) 16%;
  }
  .treatment-detail .PD-item__card {
    padding-top: calc(35 * var(--px));
    margin: calc(15 * var(--px)) 0 calc(30 * var(--px));
  }
}
/* ---------------------------------------------------------------
  8. FAQ
--------------------------------------------------------------- */
.PD-item__faq {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--px));
  margin-top: 70px;
}

.PD-item__faq dt {
  display: flex;
  font-size: var(--f24);
  align-items: center;
  gap: calc(20 * var(--px));
  margin-bottom: calc(12 * var(--px));
}

.PD-item__faq dt span {
  background: #ee8f63;
  aspect-ratio: 1/1;
  width: calc(70 * var(--px));
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--f30);
  aspect-ratio: 1/1;
}

.PD-item__faq dd {
  border-radius: calc(15 * var(--px));
  background: #f8f6f1;
  padding: calc(28 * var(--px)) 5%;
  margin-left: calc(90 * var(--px));
}

@media screen and (max-width: 834px) {
  .PD-item__faq {
    gap: calc(30 * var(--px));
    margin-top: 30px;
  }
  .PD-item__faq dt {
    font-size: var(--f18);
    gap: calc(10 * var(--px));
  }
  .PD-item__faq dt span {
    width: calc(50 * var(--px));
    height: calc(50 * var(--px));
    aspect-ratio: 1/1;
  }
  .PD-item__faq dd {
    border-radius: calc(10 * var(--px));
    padding: calc(20 * var(--px)) 5%;
    margin-left: 0;
  }
}
.under .access-block {
  padding-bottom: clamp(50 * var(--px), 6.7261904762vw, 113 * var(--px));
}

.footer {
  margin-top: 0;
}

.access-block__parking-map img {
  height: auto;
}/*# sourceMappingURL=pediatric-dentistry.css.map */