@charset "UTF-8";
/* オールオン4の料金訴求
   トップのご案内バナー（front-page.php）、オールオン4ページの料金欄（page-what-allon4.php）、
   料金ページの総額・デンタルローン欄（page-all-on-4_6.php）、デンタルローンの部品（dental-loan.php / dental-loan-note.php）で使う。
   囲み・影・色の帯は使わず、細い横線と余白、文字の大きさの差で組む。主役は総額。 */

.spd {
  --spd-ink: #222;
  --spd-sub: #4a453c;
  --spd-muted: #6b6457;
  --spd-link: #7d6f50;
  --spd-line: #d9d3c7;
  color: var(--spd-ink);
}
/* 親テーマの * { word-break: break-word } が全要素に付くため、文節で改行させる指定は子の要素にも当てる */
.spd,
.spd * {
  word-break: auto-phrase;
}
.spd *,
.spd *::before,
.spd *::after {
  box-sizing: border-box;
}
/* 既存の .what-allon402 p（下余白1.5em）などを打ち消す */
.spd p,
.spd figure,
.spd h3,
.spd h4 {
  margin: 0;
  padding: 0;
}
.spd img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.spd-nb {
  display: inline-block;
  max-width: 100%;
}

/* ---------- トップ：オールオン4治療のご案内バナー（画像は先方支給） ---------- */
.spd-banner {
  padding: 40px 20px 16px;
  background: #fff;
}
.spd-banner__link {
  display: block;
  max-width: 1000px;
  margin: 0 auto;
}
.spd-banner__link:hover {
  opacity: 0.88;
}
.spd-banner__link img {
  display: block;
  width: 100%;
}
.spd-banner .spd-banner__note {
  max-width: 1000px;
  margin: 12px auto 0;
  color: var(--spd-sub);
  font-size: 13px;
  line-height: 1.7;
}

/* ---------- オールオン4ページ：料金欄 ---------- */
.spd.spd-ao4lead {
  margin-bottom: 0;
  color: var(--spd-ink);
  font-size: 16px;
  line-height: 1.9;
}
/* 総額：上下の細い線で区切った1行。イラストを左、文字を右に置く
   （既存の #pricing figure の中央揃え・余白より強く指定する） */
#pricing .spd.spd-ao4 {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  column-gap: 40px;
  align-items: center;
  margin: 32px 0 0;
  padding: 28px 0;
  border-top: 1px solid var(--spd-line);
  border-bottom: 1px solid var(--spd-line);
  text-align: left;
}
.spd .spd-ao4__img img {
  display: block;
  width: 150px;
}
.spd .spd-ao4__name {
  color: var(--spd-ink);
  font-size: 15px;
  font-weight: bold;
  line-height: 1.6;
}
.spd .spd-ao4__price {
  margin-top: 4px;
  color: var(--spd-ink);
  font-size: 15px;
  font-weight: bold;
  line-height: 1.3;
}
.spd .spd-ao4__price b {
  font-size: 44px;
  letter-spacing: 0.01em;
}
.spd .spd-ao4__unit {
  margin-left: 2px;
}
.spd .spd-ao4__note {
  margin-top: 8px;
  color: var(--spd-sub);
  font-size: 14px;
  line-height: 1.7;
}
.spd .spd-ao4__incl {
  margin-top: 10px;
  color: var(--spd-muted);
  font-size: 13px;
  line-height: 1.7;
}
/* 見出しと同じ語のキャプションは画面には出さない（読み上げ用に残す） */
#pricing .spd.spd-ao4 figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- デンタルローン（オールオン4ページ・料金ページ共通） ---------- */
#pricing .spd-loan__h3 {
  margin: 56px 0 16px;
  padding: 0;
  border: 0;
  color: var(--spd-ink);
  font-size: 20px;
  font-weight: bold;
  line-height: 1.6;
  text-align: left;
}
.spd .spd-loan__text {
  margin: 0;
  font-size: 15px;
  line-height: 2;
}
.spd .spd-extlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.8;
}
.spd .spd-extlinks a {
  display: inline;
  color: var(--spd-link);
  font-weight: bold;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.spd .spd-extlinks a:hover {
  text-decoration: none;
}
.spd .spd-extlinks__label {
  flex-basis: 100%;
  color: var(--spd-muted);
  font-size: 12px;
}
.spd-ext::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.35em;
  vertical-align: -0.05em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 1h6v6h-2V4.4L7.7 9.7 6.3 8.3 11.6 3H9V1zM2 3h5v2H3v8h8V9h2v6H1V3h1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 1h6v6h-2V4.4L7.7 9.7 6.3 8.3 11.6 3H9V1zM2 3h5v2H3v8h8V9h2v6H1V3h1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 参考返済例：囲みを使わず、細い横線の下に置く。数字は総額より小さく */
.spd .spd-ex {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--spd-line);
}
.spd .spd-ex__kicker {
  color: var(--spd-muted);
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 1.6;
}
.spd .spd-ex__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 20px;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.5;
}
.spd .spd-ex__case,
.spd .spd-ex__value {
  font-weight: bold;
}
.spd .spd-ex__value b {
  margin: 0 2px;
  font-size: 28px;
  letter-spacing: 0.01em;
}
.spd .spd-ex__assume {
  margin-top: 4px;
  color: var(--spd-muted);
  font-size: 13px;
  line-height: 1.7;
}
/* 試算の条件と、自由診療・リスクの注記：囲みや色の帯は使わず、小さめの文字で */
.spd .spd-cond,
.spd .spd-freenote {
  margin-top: 16px;
  color: var(--spd-sub);
  font-size: 13px;
  line-height: 1.85;
  letter-spacing: 0.02em;
}
/* 試算の条件の中の数字のまとまりは、改行させないが行の扱いは本文と同じにする
   （inline-block だと直後の「）」「、」が行の頭に回るため） */
.spd .spd-cond .spd-nb {
  display: inline;
  white-space: nowrap;
}
.spd .spd-freenote a {
  display: inline;
  color: var(--spd-link);
  font-weight: bold;
  white-space: nowrap;
}

/* ---------- 料金ページ：上下顎オールオン4の総額 ---------- */
.spd.spd-sum {
  max-width: 1000px;
  margin: 0 auto 40px;
}
.spd .spd-sum__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 40px;
  padding: 24px 4px;
  border-top: 1px solid var(--spd-line);
  border-bottom: 1px solid var(--spd-line);
}
.spd .spd-sum__name {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
}
.spd .spd-sum__name small {
  display: block;
  color: var(--spd-muted);
  font-size: 13px;
  font-weight: normal;
}
.spd .spd-sum__price {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.3;
}
.spd .spd-sum__price b {
  font-size: 44px;
  letter-spacing: 0.01em;
}
.spd .spd-sum__unit {
  margin-left: 2px;
}
.spd .spd-sum__incl {
  margin-top: 12px;
  padding: 0 4px;
  color: var(--spd-muted);
  font-size: 13px;
  line-height: 1.7;
}

/* 料金ページのデンタルローン欄（既存のお支払いの項目の中に置く） */
.spd-payloan .spd-loan {
  margin-top: 4px;
}
/* 注記はお支払いの灰色の面の下に、面と同じ幅で置く */
.lowerPage_payment .spd .spd-freenote {
  max-width: 900px;
  margin: 24px auto 0;
}

@media screen and (max-width: 767px) {
  .spd-banner {
    padding: 24px 12px 4px;
  }
  .spd-banner .spd-banner__note {
    margin-top: 8px;
    font-size: 12px;
  }
  .spd.spd-ao4lead {
    font-size: 14px;
  }
  #pricing .spd.spd-ao4 {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
    margin-top: 24px;
    padding: 24px 0;
  }
  .spd .spd-ao4__img img {
    width: 120px;
  }
  .spd .spd-ao4__lbl {
    display: block;
    margin-bottom: 2px;
  }
  .spd .spd-ao4__price b,
  .spd .spd-sum__price b {
    font-size: 34px;
  }
  .spd .spd-ao4__note {
    font-size: 13px;
  }
  .spd .spd-ao4__incl,
  .spd .spd-sum__incl {
    font-size: 12px;
  }
  #pricing .spd-loan__h3 {
    margin-top: 40px;
    font-size: 18px;
  }
  .spd .spd-loan__text {
    font-size: 14px;
    line-height: 1.9;
  }
  .spd .spd-ex__line {
    font-size: 14px;
  }
  .spd .spd-ex__value b {
    font-size: 24px;
  }
  .spd .spd-cond,
  .spd .spd-freenote {
    font-size: 12px;
  }
  .spd .spd-sum__row {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 0;
  }
  .spd .spd-sum__name {
    font-size: 16px;
  }
}