/*
 * Final responsive tuning
 * ページ固有の表情は残し、文字の収まり・余白・見出しスケールだけを統一する。
 */

:root {
  --kon-display-xl: clamp(38px, 3.7vw, 52px);
  --kon-display-lg: clamp(30px, 3vw, 42px);
  --kon-section-space: clamp(84px, 7vw, 112px);
}


/* トップ CONCEPT：コピーより写真の印象を少し強くする。 */
@media (min-width: 992px) {
  .concept__inner {
    width: min(1280px, calc(100% - 72px));
    gap: clamp(40px, 4vw, 58px);
  }

  .concept__text {
    flex: 0 0 36%;
    width: 36%;
  }

  .concept__image {
    flex: 1 1 64%;
    width: 64%;
  }

  .concept h2 {
    font-size: clamp(40px, 3.55vw, 52px) !important;
    line-height: 1.42;
  }

  .concept .lead {
    font-size: 17px !important;
    line-height: 2.05;
  }
}

/* PCでもファーストビューの見出しが写真を圧迫しない上限にする。 */
.page-title h1,
.general-hero h1,
.kids-hero h1,
.implant-page h1,
.whitening-hero h1,
.ortho-hero h1,
.ortho-hero h2,
.mouth-hero h1,
.perio-hero h1,
.preventive-hero h1,
.esthetic-hero h1,
.blog-hero h1 {
  font-size: var(--kon-display-xl) !important;
}

:where(
  .general-page,
  .kids-page,
  .implant-page,
  .whitening-page,
  .ortho-page,
  .mouth-page,
  .perio-page,
  .preventive-page,
  .esthetic-page,
  .treatment-page,
  .reservation-page,
  .lower-page--first,
  .lower-page--clinic,
  .lower-page--price,
  .lower-page--recruit,
  .blog-page,
  .single-page
) h2 {
  font-size: var(--kon-display-lg) !important;
}

/* ブログ一覧は記事を読み比べやすいコンパクトな見出しスケールにする。 */
.blog-page .blog-intro h1 {
  font-size: clamp(26px, 2.7vw, 34px) !important;
}

.blog-page .post-card h2 {
  font-size: clamp(18px, 1.5vw, 22px) !important;
}

.blog-page .sidebar-widget__title {
  font-size: 18px !important;
}

.blog-single .blog-article__header h1 {
  font-size: clamp(24px, 2.4vw, 30px) !important;
}

.blog-single .blog-article__content h2 {
  font-size: clamp(21px, 2vw, 25px) !important;
}

.blog-single .blog-article__content h3 {
  font-size: clamp(18px, 1.7vw, 21px) !important;
}

.blog-single .related-posts h2,
.blog-single .sidebar-widget__title {
  font-size: 18px !important;
}

/* トップの診療科目名は、アイコンの下で不要に2行へ割らない。 */
.clinic-menu__item {
  min-width: 0;
}

.clinic-menu__item span,
.clinic-menu__item strong {
  font-size: 15px;
  letter-spacing: .035em;
  line-height: 1.45;
  white-space: nowrap;
}

/* 生成素材は説明の主役にせず、長い文章をほどく編集写真として扱う。 */
.treatment-editorial-photo {
  margin: 30px 0 0;
  overflow: hidden;
  border: 8px solid rgba(255, 255, 255, .92);
  border-radius: 8px 34px 8px 34px;
  background: #eef8f8;
  box-shadow: 0 18px 42px rgba(30, 76, 99, .11);
}

.treatment-editorial-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.treatment-editorial-photo figcaption {
  padding-top: 8px;
  color: #7d8b91;
  font-size: 11px;
  line-height: 1.6;
}

.treatment-editorial-photo--implant {
  max-width: 430px;
  transform: rotate(-.7deg);
}

.treatment-editorial-photo--general {
  max-width: 420px;
  transform: rotate(.6deg);
}

.treatment-editorial-photo--periodontal {
  width: min(760px, 100%);
  margin: 46px auto 0;
}

@media (max-width: 800px) {
  :root {
    --kon-display-xl: clamp(26px, 7.2vw, 30px);
    --kon-display-lg: clamp(21px, 5.7vw, 24px);
    --kon-section-space: 42px;
  }

  body {
    font-size: 16px;
  }

  main small,
  .site-footer small {
    font-size: 12px !important;
  }

  .section-heading {
    margin-bottom: 38px !important;
  }

  .for-you,
  .facilities-section,
  .access-section {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  .footer-access-section {
    padding-top: 52px !important;
    padding-bottom: 56px !important;
  }

  .reservation-cta {
    padding-top: 52px !important;
    padding-bottom: 58px !important;
  }

  /* 下層ページ共通のフォトヘッダーをSPでは短く、タイトルも控えめにする。 */
  .global-page-hero {
    min-height: 260px !important;
    background-position: 72% center !important;
  }

  .global-page-hero__title {
    margin-top: 58px !important;
    padding: 12px 16px 14px !important;
  }

  .global-page-hero__title p {
    margin-bottom: 6px !important;
    font-size: 12px !important;
    letter-spacing: .16em !important;
  }

  .global-page-hero__title h1,
  .global-page-hero__page-title {
    font-size: clamp(22px, 6.4vw, 26px) !important;
    line-height: 1.35 !important;
    letter-spacing: .07em !important;
  }

  .breadcrumb {
    margin-top: 16px !important;
    font-size: 13px !important;
  }

  :where(
    .general-page,
    .kids-page,
    .implant-page,
    .whitening-page,
    .ortho-page,
    .mouth-page,
    .perio-page,
    .preventive-page,
    .esthetic-page,
    .treatment-page,
    .lower-page--first,
    .lower-page--clinic,
    .lower-page--price,
    .lower-page--recruit,
    .access-page
  ) {
    font-size: 15px !important;
    line-height: 1.82 !important;
  }

  .page-title h1,
  .general-hero h1,
  .kids-hero h1,
  .implant-page h1,
  .whitening-hero h1,
  .ortho-hero h1,
  .ortho-hero h2,
  .mouth-hero h1,
  .perio-hero h1,
  .preventive-hero h1,
  .esthetic-hero h1,
  .blog-hero h1 {
    line-height: 1.42 !important;
    letter-spacing: .025em !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  :where(
    .general-page,
    .kids-page,
    .implant-page,
    .whitening-page,
    .ortho-page,
    .mouth-page,
    .perio-page,
    .preventive-page,
    .esthetic-page,
    .treatment-page,
    .reservation-page,
    .lower-page--first,
    .lower-page--clinic,
    .lower-page--price,
    .lower-page--recruit,
    .blog-page,
    .single-page
  ) h2 {
    font-size: var(--kon-display-lg) !important;
    line-height: 1.5 !important;
    letter-spacing: .035em !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  :where(
    .general-page,
    .kids-page,
    .implant-page,
    .whitening-page,
    .ortho-page,
    .mouth-page,
    .perio-page,
    .preventive-page,
    .esthetic-page,
    .treatment-page,
    .reservation-page,
    .lower-page
  ) h3 {
    font-size: clamp(17px, 4.7vw, 19px) !important;
    line-height: 1.55;
  }

  /* インプラントの流れは、各要素を縦に並べてSPでも順番に読みやすくする。 */
  .implant-section-head,
  .implant-flow__header {
    margin-bottom: 34px !important;
  }

  .implant-flow__list {
    gap: 12px !important;
  }

  .implant-step {
    gap: 14px !important;
    padding: 22px 18px !important;
  }

  .implant-step__image {
    width: min(168px, 58vw) !important;
  }

  .implant-step__image--text {
    height: min(168px, 58vw) !important;
  }

  .implant-step p {
    line-height: 1.78 !important;
  }

  /* 採用ページは各セクションと特徴カードを詰め、一覧性を高める。 */
  .recruit-message,
  .recruit-benefits,
  .recruit-jobs,
  .recruit-feature,
  .recruit-person,
  .recruit-requirements,
  .recruit-worries,
  .recruit-learning,
  .recruit-voice,
  .recruit-day,
  .recruit-form,
  .recruit-copy,
  .recruit-dh-work {
    padding: 46px 0 !important;
  }

  .recruit-page {
    font-size: 15px !important;
    line-height: 1.82 !important;
  }

  .recruit-hero__copy > p:last-child,
  .recruit-role-hero > div > p:last-child {
    font-size: 15px !important;
    line-height: 1.82 !important;
  }

  .recruit-heading {
    margin-bottom: 30px !important;
  }

  .recruit-benefits article {
    padding: 18px !important;
  }

  .recruit-benefits article > strong {
    font-size: 32px !important;
  }

  .recruit-benefits h3 {
    margin: 10px 0 8px !important;
  }

  .recruit-benefits p {
    font-size: 15px !important;
    line-height: 1.68 !important;
  }

  /* 下層のファーストビュー。高さを内容基準にし、空白を圧縮する。 */
  .general-hero,
  .kids-hero,
  .implant-hero,
  .whitening-hero,
  .ortho-hero,
  .mouth-hero,
  .perio-hero,
  .preventive-hero,
  .esthetic-hero {
    min-height: 0 !important;
    padding-top: 28px !important;
    padding-bottom: 58px !important;
  }

  .general-hero__grid,
  .kids-hero__grid,
  .implant-hero__grid,
  .whitening-hero__grid,
  .ortho-hero__grid,
  .mouth-hero__grid,
  .perio-hero > div > div,
  .preventive-hero__grid,
  .esthetic-hero__grid {
    gap: 30px !important;
    margin-top: 34px !important;
  }

  /* 診療ページ各セクションの過大な上下余白を統一。 */
  .general-manifesto,
  .general-pmtc,
  .general-diagnosis,
  .general-tools,
  .general-added,
  .kids-about,
  .kids-family,
  .kids-prevention,
  .kids-extra,
  .implant-intro,
  .implant-feature,
  .implant-flow,
  .implant-fee,
  .whitening-intro,
  .whitening-home,
  .whitening-office,
  .whitening-contact,
  .ortho-section,
  .mouth-intro,
  .mouth-benefits,
  .mouth-consider,
  .mouth-flow,
  .mouth-faq,
  .perio-section,
  .preventive-ec,
  .preventive-tool,
  .preventive-next,
  .esthetic-philosophy,
  .esthetic-cycle,
  .esthetic-resin,
  .esthetic-consult {
    padding-top: var(--kon-section-space) !important;
    padding-bottom: var(--kon-section-space) !important;
  }

  .concept {
    padding: 54px 0 58px !important;
  }

  .concept__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 34px !important;
    width: min(100% - 32px, 660px) !important;
  }

  .concept__text {
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  .concept__image {
    width: 100% !important;
  }

  .concept-bg {
    top: -44px !important;
    left: -10px !important;
    font-size: 66px !important;
  }

  .concept-en {
    margin-bottom: 18px !important;
    font-size: 13px !important;
  }

  .concept h2 {
    margin-bottom: 24px !important;
    font-size: clamp(27px, 7.4vw, 31px) !important;
    line-height: 1.48 !important;
    letter-spacing: .035em;
  }

  .concept .line {
    margin-bottom: 25px !important;
  }

  .concept .lead {
    margin-bottom: 28px !important;
    font-size: 16px !important;
    line-height: 1.9 !important;
  }

  .clinic-menu {
    padding-top: 54px !important;
    padding-bottom: 58px !important;
  }

  .clinic-menu__inner {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 12px !important;
  }

  .clinic-menu__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 30px !important;
  }

  .clinic-menu__item {
    gap: 12px !important;
  }

  .clinic-menu__item img {
    max-width: 154px !important;
  }

  .clinic-menu__item span,
  .clinic-menu__item strong {
    font-size: 15px !important;
    letter-spacing: 0;
  }

  /* トップの特徴・院長欄に残っていたPC固定幅を解除。 */
  .features__inner {
    width: 100% !important;
    max-width: none !important;
  }

  .feature,
  .feature--reverse {
    display: flex !important;
    flex-direction: column !important;
    gap: 26px !important;
    min-height: 0 !important;
    padding: 46px 20px 50px !important;
  }

  .feature__visual,
  .feature--reverse .feature__visual,
  .feature__text,
  .feature--reverse .feature__text {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .feature__visual,
  .feature--reverse .feature__visual {
    order: 1 !important;
  }

  .feature__text,
  .feature--reverse .feature__text {
    order: 2 !important;
    padding: 24px 0 0 !important;
  }

  .feature__title {
    margin-bottom: 18px !important;
    font-size: clamp(22px, 6.2vw, 27px) !important;
  }

  .feature__description {
    font-size: 16px !important;
    line-height: 1.9 !important;
  }

  /* 院内紹介は1枚ずつ見せ、左右に軽く振ってリズムをつくる。 */
  .facilities-section__inner {
    width: 100% !important;
    max-width: none !important;
  }

  .facilities-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 48px !important;
  }

  .facility-card {
    width: 82% !important;
    max-width: 420px;
    justify-self: center;
  }

  .facility-card:nth-child(odd) {
    transform: translateX(-4%);
  }

  .facility-card:nth-child(even) {
    transform: translateX(4%);
  }

  .doctor-section__inner,
  .doctor-section__content,
  .doctor-section__message,
  .doctor-section__visual,
  .doctor-profile {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .doctor-section__content {
    display: flex !important;
    flex-direction: column !important;
    gap: 34px !important;
  }

  .doctor-section__visual {
    order: 1 !important;
  }

  .doctor-profile {
    order: 2 !important;
  }

  .doctor-section__message {
    order: 3 !important;
  }

  /* 院長紹介は本文を画面端から離し、SPで間延びする上下余白を整える。 */
  .doctor-section {
    padding: 48px 0 !important;
  }

  .doctor-section__inner {
    padding-inline: 20px !important;
  }

  .doctor-section__line {
    margin-block: 22px !important;
  }

  .doctor-photo-story {
    padding: 46px 0 !important;
  }

  .doctor-history {
    padding: 36px 0 48px !important;
  }

  .doctor-history__inner {
    width: calc(100% - 32px) !important;
  }

  .doctor-profile {
    margin-top: -16px !important;
    padding: 26px 20px !important;
  }

  /* 共通アクセス表はSP幅に収め、ページ全体の横スクロールを防ぐ。 */
  .footer-access-section .access-hours {
    overflow: hidden;
  }

  .footer-access-section .access-hours__table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
    font-size: 11px !important;
  }

  .footer-access-section .access-hours__table th,
  .footer-access-section .access-hours__table td {
    padding: 9px 2px !important;
  }

  .footer-access-section .access-hours__table th:first-child {
    width: 82px !important;
  }

  .footer-access-section .access-hours__table tbody td {
    font-size: 14px !important;
  }

  .footer-access-section .access-hours__scroll {
    overflow-x: hidden !important;
  }

  /* アクセスページの診療時間表も横スクロールなしで全列を表示する。 */
  .access-schedule {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }

  .access-schedule__body {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 14px 16px !important;
  }

  .access-schedule__table-wrap {
    width: 100%;
    margin-right: 0 !important;
    overflow-x: hidden !important;
  }

  .access-schedule table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
  }

  .access-schedule th,
  .access-schedule td {
    padding: 10px 2px !important;
  }

  .access-schedule thead th {
    font-size: 12px !important;
    line-height: 1.25;
  }

  .access-schedule th:first-child {
    width: 88px;
    font-size: 12px !important;
  }

  .access-schedule tbody td {
    font-size: 15px !important;
  }

  .access-schedule .is-closed {
    font-size: 12px !important;
  }

  .access-page__intro {
    padding-top: 46px !important;
    padding-bottom: 42px !important;
  }

  .access-overview {
    padding-bottom: 48px !important;
  }

  .access-map-section {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }

  .access-section-heading {
    margin-bottom: 26px !important;
  }

  /* 医院案内のページ内ナビは、横移動させずコンパクトな3＋2段にする。 */
  .clinic-index {
    width: calc(100% - 24px) !important;
    overflow: visible !important;
  }

  .clinic-index__inner {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px !important;
    overflow: visible !important;
    border-radius: 18px !important;
  }

  .clinic-index__item {
    grid-column: span 2;
    gap: 5px !important;
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 7px 3px !important;
    border-radius: 13px !important;
  }

  .clinic-index__item:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .clinic-index__icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
  }

  .clinic-index__icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .clinic-index__text {
    font-size: clamp(10px, 2.8vw, 11px) !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-align: center;
  }

  /* 画像と本文を縦積みにした時の異様な空白を抑える。 */
  .kids-about__grid,
  .kids-family__inner,
  .kids-extra__grid,
  .implant-intro__grid,
  .implant-flow__header,
  .implant-fee__grid,
  .whitening-intro__grid,
  .whitening-office__grid,
  .esthetic-philosophy__grid,
  .esthetic-cycle__grid,
  .esthetic-resin__grid,
  .esthetic-consult__grid,
  .preventive-ec__grid,
  .preventive-tool__grid,
  .perio-split,
  .perio-method,
  .perio-check,
  .perio-prevent {
    gap: 34px !important;
  }

  .implant-intro__title {
    position: static !important;
  }

  .treatment-compact-nav {
    padding-block: 46px !important;
  }

  .treatment-compact-nav__grid {
    gap: 9px !important;
  }

  .treatment-compact-nav__item strong {
    font-size: 12px !important;
    line-height: 1.35;
    word-break: keep-all;
  }

  /* SP density pass: 装飾のための固定余白を、内容量に合う高さへ戻す。 */
  .section-heading,
  .treatment-section__heading,
  .clinic-heading,
  .first-heading {
    margin-bottom: 28px !important;
  }

  .treatment-editorial-photo,
  .treatment-editorial-photo--periodontal {
    width: 100%;
    max-width: none;
    margin-top: 24px;
    border-width: 5px;
    border-radius: 7px 24px 7px 24px;
    transform: none;
  }

  .section-contact {
    padding: 42px 18px !important;
  }

  .section-contact h2 {
    margin-bottom: 10px !important;
  }

  .section-contact__buttons {
    gap: 12px !important;
    margin-top: 22px !important;
  }

  .section-contact__buttons .c-link-button {
    width: min(100%, 300px) !important;
    min-height: 58px;
    padding: 12px 24px !important;
  }

  .footer-access-section,
  .reservation-cta {
    padding-top: 44px !important;
    padding-bottom: 46px !important;
  }

  .treatment-section {
    padding-block: 42px !important;
  }

  .treatment-intro__grid {
    gap: 26px !important;
  }

  .treatment-menu__item {
    min-height: 0 !important;
    gap: 14px !important;
    padding: 18px 10px !important;
  }

  .treatment-menu__item .treatment-icon {
    width: 46px !important;
    height: 46px !important;
  }

  .treatment-detail {
    padding-block: 38px !important;
  }

  .kids-prevention__cards {
    gap: 14px !important;
    margin-top: 30px !important;
  }

  .kids-prevention__cards article {
    min-height: 0 !important;
    padding: 66px 22px 22px !important;
  }

  .kids-card-icon {
    margin-bottom: 14px !important;
  }

  .kids-prevention__note {
    margin-top: 24px !important;
    padding: 20px 22px !important;
  }

  .esthetic-cycle__steps {
    gap: 8px !important;
    margin-top: 30px !important;
    padding: 18px !important;
  }

  .esthetic-cycle__steps i {
    line-height: 1 !important;
  }

  .esthetic-resin__body li,
  .esthetic-price {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .clinic-section {
    padding-block: 42px !important;
  }

  .clinic-promise__list,
  .clinic-safety__list,
  .clinic-painless__list {
    gap: 14px !important;
  }

  .clinic-promise-card,
  .clinic-safety-card,
  .clinic-painless-card {
    min-height: 0 !important;
    padding: 22px !important;
  }

  .clinic-promise-card__text,
  .clinic-safety-card__text,
  .clinic-painless-card__text {
    margin-top: 10px !important;
  }

  .clinic-safety__intro,
  .clinic-painless__main {
    gap: 28px !important;
    margin-bottom: 32px !important;
  }

  .first-visit {
    padding-top: 42px !important;
    padding-bottom: 68px !important;
  }

  .first-intro {
    gap: 26px !important;
    margin-bottom: 54px !important;
    padding: 28px 22px !important;
  }

  .first-section {
    margin-top: 54px !important;
  }

  .first-note-grid {
    gap: 14px !important;
  }

  .first-note {
    padding: 24px 22px !important;
  }

  .first-note svg {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 14px !important;
  }

  .first-prepare__inner {
    gap: 20px !important;
    padding: 24px 18px !important;
  }

  .first-prepare li {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }

  .first-flow-section {
    padding: 38px 14px !important;
  }

  .first-flow__item,
  .first-flow__item:not(:has(.first-photo)) {
    padding-block: 17px !important;
  }

  .first-contact {
    margin-top: 54px !important;
    padding: 38px 18px !important;
  }
}

/* Desktop: give the three core treatment journeys a clearer, wider illustration rhythm. */
@media (min-width: 801px) {
  :is(.general-flow__head, .kids-flow__heading, .esthetic-flow__heading, .preventive-flow__heading),
  :is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) {
    max-width: 1040px;
  }

  :is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) li,
  :is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) li:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: clamp(30px, 4vw, 48px);
    min-height: 250px;
    padding: 26px 30px;
  }

  :is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) figure {
    width: 100%;
    max-width: 360px;
    justify-self: end;
    overflow: hidden;
    border-radius: 16px;
  }

  :is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) figure img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
  }
}

/* Editorial atmosphere for simple heading-and-copy sections. */
.kids-extra,
.preventive-next {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.kids-extra::before,
.preventive-next::before,
.kids-extra::after,
.preventive-next::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.kids-extra::before {
  z-index: -2;
  inset: -18px;
  background: url("../images/treatment/pediatric/smiling-child-generated-1200.webp") 76% 42% / cover no-repeat;
  filter: blur(7px) saturate(.78);
  opacity: .32;
  transform: scale(1.035);
}

.kids-extra::after {
  z-index: -1;
  background: linear-gradient(90deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .92) 54%, rgba(255, 245, 247, .62) 100%);
}

.kids-extra__grid {
  position: relative;
  z-index: 1;
}

.kids-extra__grid > div:first-child {
  padding-left: 30px;
  border-left: 4px solid rgba(242, 119, 145, .78);
}

.preventive-next::before {
  z-index: -2;
  inset: -18px;
  background: url("../images/treatment/preventive/original-cleaning.jpg") center 48% / cover no-repeat;
  filter: blur(6px) saturate(.72);
  opacity: .48;
  transform: scale(1.035);
}

.preventive-next::after {
  z-index: -1;
  background: linear-gradient(90deg, rgba(31, 67, 87, .93), rgba(53, 91, 114, .82) 56%, rgba(39, 82, 101, .72));
}

.preventive-next .preventive-shell {
  position: relative;
  z-index: 1;
}

@media (max-width: 800px) {
  .kids-extra::before,
  .preventive-next::before {
    opacity: .22;
  }

  .kids-extra::after {
    background: rgba(255, 255, 255, .88);
  }

  .kids-extra__grid > div:first-child {
    padding-left: 22px;
    border-left-width: 3px;
  }

  .preventive-next::after {
    background: rgba(42, 76, 96, .9);
  }
}

@media (max-width: 380px) {
  .clinic-menu__item span,
  .clinic-menu__item strong {
    font-size: 15px !important;
  }

  .concept h2 {
    font-size: 29px !important;
  }
}

/* PC footer: three clear contact choices after the page content. */
.site-footer__contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto 38px;
}

.site-footer__contact-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 19px 20px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 18px;
  color: #18346c;
  background: #fff;
  box-shadow: 0 16px 36px rgba(3, 21, 52, .24);
  text-align: left;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.site-footer__contact-card:hover {
  box-shadow: 0 20px 42px rgba(3, 21, 52, .3);
  transform: translateY(-3px);
}

.site-footer__contact-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #3b7da9, #28658f);
}

.site-footer__contact-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.site-footer__contact-card--tel .site-footer__contact-icon {
  background: linear-gradient(135deg, #28b7b4, #15939b);
}

.site-footer__contact-card--reserve .site-footer__contact-icon {
  background: linear-gradient(135deg, #f88baa, #ed678e);
}

.site-footer__contact-card span:nth-child(2) {
  display: grid;
  gap: 4px;
}

.site-footer__contact-card small {
  color: #668090;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.site-footer__contact-card strong {
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: .05em;
}

.site-footer__contact-card > b {
  color: #2f759f;
  font-size: 24px;
  font-weight: 400;
}

@media (max-width: 767px) {
  .site-footer__contact-grid {
    display: none;
  }
}

/* KON ALIGNER EXPANSION CSS START */
.mouth-aligner-map { margin-bottom: 110px; }
.mouth-aligner-map__heading { display: grid; grid-template-columns: 1fr 1fr; column-gap: 70px; margin-bottom: 46px; }
.mouth-aligner-map__heading .mouth-label, .mouth-aligner-map__heading h2 { grid-column: 1; }
.mouth-aligner-map__heading h2 { margin-bottom: 0; font-size: clamp(29px, 3.45vw, 43px); }
.mouth-aligner-map__heading > p:last-child { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; font-size: 17px; }
.mouth-aligner-map__systems { display: grid; grid-template-columns: minmax(0, 1.35fr) 50px minmax(0, .85fr); align-items: stretch; }
.mouth-aligner-map__system { padding: 34px; background: #fff; border-radius: 22px; box-shadow: 0 16px 42px rgba(49, 75, 114, .08); }
.mouth-aligner-map__system--invisalign { border-top: 4px solid #ef9b73; }
.mouth-aligner-map__system--suresmile { border-top: 4px solid var(--c); }
.mouth-aligner-map__system small { color: #7b8a91; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.mouth-aligner-map__system h3 { margin: 5px 0 3px; font-size: 27px; }
.mouth-aligner-map__system p { margin: 0; font-size: 14px; }
.mouth-aligner-map__system ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.mouth-aligner-map__system--suresmile ul { grid-template-columns: 1fr; }
.mouth-aligner-map__system li { padding: 18px; background: #f4f8f8; }
.mouth-aligner-map__system li strong, .mouth-aligner-map__system li span { display: block; }
.mouth-aligner-map__system li strong { color: var(--m); font-size: 18px; }
.mouth-aligner-map__system li span { margin-top: 5px; color: #65757d; font-size: 12px; line-height: 1.6; }
.mouth-aligner-map__or { display: grid; place-items: center; color: var(--c); font: 700 13px Georgia, serif; }
.mouth-aligner-map__note { margin: 16px 0 0; color: #6f7d83; font-size: 12px; }
.mouth-go-plus__heading h2 span { display: block; white-space: nowrap; }

.mouth-go-compare { margin-bottom: 110px; padding: clamp(30px, 5vw, 60px); background: rgba(255, 255, 255, .68); border-radius: 26px; }
.mouth-go-compare__heading { display: grid; grid-template-columns: .82fr 1.18fr; column-gap: 70px; margin-bottom: 38px; }
.mouth-go-compare__heading .mouth-label, .mouth-go-compare__heading h2 { grid-column: 1; }
.mouth-go-compare__heading h2 { margin-bottom: 0; font-size: clamp(29px, 3.5vw, 42px); }
.mouth-go-compare__heading > p:last-child { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
.mouth-go-compare__table-wrap { overflow-x: auto; border: 1px solid #dce8e8; border-radius: 16px; background: #fff; }
.mouth-go-compare__table { width: 100%; min-width: 680px; border-collapse: collapse; line-height: 1.65; }
.mouth-go-compare__table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mouth-go-compare__table th, .mouth-go-compare__table td { padding: 17px 19px; border-right: 1px solid #e1ebeb; border-bottom: 1px solid #e1ebeb; text-align: left; vertical-align: top; }
.mouth-go-compare__table tr > *:last-child { border-right: 0; }
.mouth-go-compare__table tbody tr:last-child > * { border-bottom: 0; }
.mouth-go-compare__table thead th { background: var(--m); color: #fff; }
.mouth-go-compare__table tbody th { width: 20%; background: #f3f8f8; color: var(--m); font-size: 14px; }
.mouth-go-compare__table td { width: 40%; font-size: 14px; }
.mouth-go-compare__table td:nth-child(3) { background: #fff8f4; }
.mouth-go-compare__table small { color: #718087; }
.mouth-go-compare__note { margin: 16px 0 0; color: #6f7d83; font-size: 12px; }

.mouth-go-plus__guide { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 18px; }
.mouth-go-plus__guide article { padding: 32px 34px; background: #fff; }
.mouth-go-plus__guide article:first-child { border-top: 3px solid #97c700; }
.mouth-go-plus__guide article:last-child { border-top: 3px solid #19a7c7; }
.mouth-go-plus__guide h3 { margin: 6px 0 20px; font-size: 22px; }
.mouth-go-plus__guide ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.mouth-go-plus__guide li { position: relative; padding-left: 23px; }
.mouth-go-plus__guide li::before { position: absolute; left: 0; color: var(--c); content: "✓"; font-weight: 700; }

.mouth-scope-rail { margin: 84px 0 96px; }
.mouth-scope-rail__heading { display: grid; grid-template-columns: .82fr 1.18fr; column-gap: 80px; align-items: end; }
.mouth-scope-rail__heading .mouth-label,
.mouth-scope-rail__heading h2 { grid-column: 1; }
.mouth-scope-rail__heading h2 { margin-bottom: 0; }
.mouth-scope-rail__heading > p:last-child { grid-column: 2; grid-row: 1 / 3; margin: 0; font-size: 16px; }
.mouth-scope-rail__steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 42px; background: rgba(46,170,169,.25); }
.mouth-scope-rail__steps::before { position: absolute; top: 98px; right: 16%; left: 16%; height: 1px; background: rgba(46,170,169,.42); content: ""; }
.mouth-scope-rail__steps article { position: relative; z-index: 1; display: grid; justify-items: center; min-height: 320px; padding: 28px 24px 30px; background: #fff; text-align: center; }
.mouth-scope-rail__steps .mouth-range {
  width: min(156px, 82%);
  height: auto;
  aspect-ratio: 1;
  margin-bottom: 18px;
  background-color: #f8fbfa;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(30, 76, 91, .08);
}
.mouth-scope-rail__steps small { color: var(--c); font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.mouth-scope-rail__steps strong { margin-top: 6px; color: var(--m); font-size: 18px; }
.mouth-scope-rail__steps p { margin: 5px 0 0; color: var(--m); font-size: 16px; font-weight: 700; line-height: 1.45; }

.mouth-go-plus__showcase { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1.1fr; margin-top: 56px; overflow: hidden; background: #050605; color: rgba(255,255,255,.76); box-shadow: 0 28px 80px rgba(20,30,36,.18); }
.mouth-go-plus__showcase > img { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .95; }
.mouth-go-plus__showcase::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(2,3,2,.98) 0%, rgba(2,3,2,.91) 44%, rgba(2,3,2,.12) 72%, rgba(2,3,2,.16) 100%); content: ""; }
.mouth-go-plus__showcase-copy { min-height: 520px; padding: clamp(44px, 6vw, 78px); }
.mouth-go-plus__showcase-brand { margin: 0 0 18px; color: #9cc51a; font: 700 clamp(24px, 3vw, 42px)/1.15 "Avenir Next", sans-serif; letter-spacing: -.02em; }
.mouth-go-plus__showcase-brand sup { font-size: .38em; vertical-align: top; }
.mouth-go-plus__showcase h3 { margin: 0 0 22px; color: #fff; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.35; letter-spacing: .04em; }
.mouth-go-plus__showcase h3 span { display: block; white-space: nowrap; }
.mouth-go-plus__showcase-copy > p:not(.mouth-go-plus__showcase-brand) { max-width: 520px; margin: 0; font-size: 15px; }
.mouth-go-plus__showcase-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 38px; background: rgba(255,255,255,.18); }
.mouth-go-plus__showcase-stats div { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 16px 14px; background: rgba(4,5,4,.72); }
.mouth-go-plus__showcase-stats strong { color: #b6d83f; font: 700 34px/1 "Avenir Next", sans-serif; }
.mouth-go-plus__showcase-stats span { color: rgba(255,255,255,.74); font-size: 10px; line-height: 1.55; }
.mouth-go-plus__showcase-features { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(4,5,4,.92); border-top: 1px solid rgba(255,255,255,.16); }
.mouth-go-plus__showcase-features article { padding: 28px 30px 32px; border-right: 1px solid rgba(255,255,255,.13); }
.mouth-go-plus__showcase-features article:last-child { border-right: 0; }
.mouth-go-plus__showcase-features span { color: #9cc51a; font: 700 11px/1 "Avenir Next", sans-serif; letter-spacing: .14em; }
.mouth-go-plus__showcase-features h4 { margin: 10px 0 8px; color: #fff; font-size: 16px; }
.mouth-go-plus__showcase-features p { margin: 0; color: rgba(255,255,255,.63); font-size: 12px; line-height: 1.8; }

.mouth-intro__grid { grid-template-columns: .62fr 1fr .78fr; gap: clamp(30px, 4vw, 56px); align-items: center; }
.mouth-intro__photo { grid-column: 3; position: relative; width: min(100%, 300px); margin: 0; overflow: hidden; aspect-ratio: 4 / 5; justify-self: end; background: #f1f3f5; }
.mouth-intro__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 66%; }
.mouth-intro__photo figcaption,
.mouth-suresmile__heading figcaption,
.mouth-benefits__lead figcaption { position: absolute; right: 14px; bottom: 10px; padding: 5px 9px; background: rgba(255,255,255,.86); color: #5d7078; font-size: 10px; letter-spacing: .04em; }

.mouth-suresmile { padding: 120px 0; background: #f4f8fb; }
.mouth-suresmile__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 64px 80px; }
.mouth-suresmile__heading h2 { font-size: clamp(24px, 2.25vw, 32px) !important; }
.mouth-suresmile__heading h2 span { white-space: nowrap; }
.mouth-suresmile__heading p:last-child { margin-bottom: 0; }
.mouth-suresmile__heading figure { position: relative; width: min(72%, 280px); margin: 30px auto 0; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 0 22px 0 22px; background: #dce9ee; }
.mouth-suresmile__heading figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 56%; }
.mouth-suresmile__features { display: grid; gap: 14px; }
.mouth-suresmile__features article { padding: 28px 30px; background: #fff; border-left: 3px solid var(--c); }
.mouth-suresmile__features span { color: var(--c); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.mouth-suresmile__features h3 { margin: 8px 0; font-size: 20px; }
.mouth-suresmile__features p { margin: 0; font-size: 14px; }
.mouth-suresmile__process { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; background: #cfe1e5; }
.mouth-suresmile__process li { position: relative; min-height: 180px; padding: 30px 24px; background: #fff; }
.mouth-suresmile__process li:not(:last-child)::after { position: absolute; top: 50%; right: -12px; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #fff; content: "→"; transform: translateY(-50%); }
.mouth-suresmile__process span { display: block; color: var(--c); font: 700 26px/1 Georgia, serif; }
.mouth-suresmile__process strong { display: block; margin-top: 18px; color: var(--m); line-height: 1.5; }
.mouth-suresmile__process small { display: block; margin-top: 8px; color: #667780; font-size: 12px; line-height: 1.7; }
.mouth-suresmile__footer { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: end; }
.mouth-suresmile__footer p { margin: 0; }
.mouth-suresmile__footer a { padding: 12px 0; border-bottom: 1px solid var(--c); color: var(--m); font-weight: 700; text-decoration: none; white-space: nowrap; }
.mouth-suresmile__footer a span { color: var(--c); }

.mouth-compare { padding: 120px 0; background: #fff; }
.mouth-compare__heading { display: grid; grid-template-columns: .82fr 1.18fr; column-gap: 80px; }
.mouth-compare__heading .mouth-label, .mouth-compare__heading h2 { grid-column: 1; }
.mouth-compare__heading h2 { margin-bottom: 0; }
.mouth-compare__heading h2 span { display: block; white-space: nowrap; }
.mouth-compare__heading > p:last-child { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; font-size: 17px; }
.mouth-compare__ranges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 820px; margin: 56px auto 38px; }
.mouth-compare__ranges article { display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto auto; gap: 0 20px; align-items: center; padding: 18px; background: #f4f8f8; }
.mouth-compare__ranges .mouth-range { grid-row: 1 / 3; border-radius: 50%; }
.mouth-compare__ranges p { align-self: end; margin: 0; color: var(--c); font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.mouth-compare__ranges strong { align-self: start; color: var(--m); font-size: 17px; }
.mouth-compare__table-wrap { overflow-x: auto; border: 1px solid #dce8e8; border-radius: 18px; box-shadow: 0 18px 50px rgba(49, 75, 114, .07); }
.mouth-compare__table { width: 100%; min-width: 720px; border-collapse: collapse; background: #fff; line-height: 1.65; }
.mouth-compare__table caption { padding: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mouth-compare__table th, .mouth-compare__table td { padding: 18px 20px; border-right: 1px solid #e1ebeb; border-bottom: 1px solid #e1ebeb; text-align: left; vertical-align: top; }
.mouth-compare__table tr > *:last-child { border-right: 0; }
.mouth-compare__table tbody tr:last-child > * { border-bottom: 0; }
.mouth-compare__table thead th { background: var(--m); color: #fff; font-family: "Zen Maru Gothic", sans-serif; }
.mouth-compare__table thead th:first-child { background: #263d5f; }
.mouth-compare__table tbody th { width: 17%; background: #f3f8f8; color: var(--m); font-size: 14px; }
.mouth-compare__table td { width: 41.5%; font-size: 14px; }
.mouth-compare__table td small { color: #718087; }
.mouth-compare__price th, .mouth-compare__price td { background: #fff9e9; }
.mouth-compare__price td { color: var(--m); font-size: 20px; font-weight: 700; }
.mouth-compare__price td small { font-size: 12px; font-weight: 400; }
.mouth-compare__note { margin: 18px 0 0; color: #6f7d83; font-size: 12px; }

.mouth-retreatment { padding: 120px 0; background: #f8f4ee; }
.mouth-retreatment__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(44px, 5vw, 72px); align-items: center; }
.mouth-retreatment__copy > p { margin: 0 0 18px; }
.mouth-retreatment__copy ul { display: grid; gap: 10px; margin: 26px 0; padding: 0; list-style: none; }
.mouth-retreatment__copy li { position: relative; padding-left: 24px; }
.mouth-retreatment__copy li::before { position: absolute; left: 0; color: var(--c); content: "✓"; font-weight: 700; }
.mouth-retreatment__copy .mouth-retreatment__caution { padding: 16px 18px; background: rgba(255, 255, 255, .76); color: #65757d; font-size: 13px; }
.mouth-retreatment__copy a { display: flex; justify-content: space-between; margin-top: 26px; padding: 14px 0; border-bottom: 1px solid var(--c); color: var(--m); font-weight: 700; text-decoration: none; }
.mouth-retreatment__copy a span { color: var(--c); }
.mouth-retreatment__case { display: grid; grid-template-columns: 1fr; gap: 14px; }
.mouth-retreatment__case figure { position: relative; margin: 0; overflow: hidden; border-radius: 20px; background: #fff; }
.mouth-retreatment__case img { display: block; width: 100%; height: auto; }
.mouth-retreatment__case > p { grid-column: 1 / -1; margin: 0; color: #718087; font-size: 11px; }

.mouth-benefits__lead { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(42px, 7vw, 90px); align-items: center; }
.mouth-benefits__lead figure { position: relative; width: min(100%, 500px); margin: 0 0 0 auto; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 22px 0 22px 0; background: #fff; }
.mouth-benefits__lead figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) {
  .mouth-scope-rail__heading > .mouth-label { display: none; }
  .mouth-aligner-map__heading, .mouth-go-compare__heading, .mouth-scope-rail__heading, .mouth-suresmile__grid, .mouth-compare__heading, .mouth-retreatment__grid { grid-template-columns: 1fr; }
  .mouth-aligner-map { margin-bottom: 72px; }
  .mouth-aligner-map__heading .mouth-label, .mouth-aligner-map__heading h2, .mouth-aligner-map__heading > p:last-child, .mouth-go-compare__heading .mouth-label, .mouth-go-compare__heading h2, .mouth-go-compare__heading > p:last-child { grid-column: 1; grid-row: auto; }
  .mouth-aligner-map__heading > p:last-child, .mouth-go-compare__heading > p:last-child { margin-top: 14px; font-size: 16px; }
  .mouth-aligner-map__systems { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
  .mouth-aligner-map__or { display: none; }
  .mouth-aligner-map__system { padding: 14px 10px 12px; border-radius: 14px; box-shadow: 0 8px 22px rgba(49, 75, 114, .07); }
  .mouth-aligner-map__system--invisalign, .mouth-aligner-map__system--suresmile { border-top-width: 3px; }
  .mouth-aligner-map__system small { display: none; }
  .mouth-aligner-map__system > div { display: flex; flex-direction: column; }
  .mouth-aligner-map__system h3 { order: 2; margin: 4px 0 0; color: #718087; font-size: 11px; line-height: 1.35; }
  .mouth-aligner-map__system p { order: 1; min-height: 3.2em; color: var(--m); font-size: 13px; font-weight: 700; line-height: 1.6; }
  .mouth-aligner-map__system ul { grid-template-columns: 1fr; gap: 6px; margin-top: 12px; }
  .mouth-aligner-map__system li { padding: 10px 9px; }
  .mouth-aligner-map__system li strong { font-size: 14px; }
  .mouth-aligner-map__system li span { margin-top: 3px; font-size: 9px; line-height: 1.5; }
  .mouth-go-compare { margin-bottom: 72px; padding: 26px 20px; }
  .mouth-go-compare__table-wrap { width: calc(100vw - 16px); margin-right: 0; margin-left: calc(50% - 50vw + 8px); overflow-x: visible; border-radius: 10px; }
  .mouth-go-compare__table { min-width: 0; table-layout: fixed; }
  .mouth-go-compare__table tbody th { width: 24%; }
  .mouth-go-compare__table td { width: 38%; }
  .mouth-go-compare__table th, .mouth-go-compare__table td { padding: 10px 8px; font-size: 11px; overflow-wrap: anywhere; }
  .mouth-go-plus__guide { grid-template-columns: 1fr; }
  .mouth-scope-rail { margin: 58px 0 68px; }
  .mouth-scope-rail__heading > p:last-child { grid-column: 1; grid-row: auto; }
  .mouth-scope-rail__steps { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 20px 0 0; padding: 0; overflow: visible; background: transparent; }
  .mouth-scope-rail__steps::before { display: none; }
  .mouth-scope-rail__steps article { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; align-items: center; justify-items: start; min-height: 0; padding: 10px 16px 10px 12px; border: 1px solid rgba(46,170,169,.2); border-radius: 14px; text-align: left; }
  .mouth-scope-rail__steps article:last-child { grid-column: auto; }
  .mouth-scope-rail__steps .mouth-range { grid-column: 1; grid-row: 1 / 3; width: 72px; margin: 0; border-radius: 12px; }
  .mouth-scope-rail__steps small { display: none; }
  .mouth-scope-rail__steps strong { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: 16px; line-height: 1.45; }
  .mouth-scope-rail__steps p { grid-column: 2; grid-row: 2; align-self: start; margin: 3px 0 0; font-size: 14px; line-height: 1.4; }
  .mouth-go-plus__showcase { grid-template-columns: 1fr; }
  .mouth-go-plus__showcase > img { object-position: 62% center; opacity: .58; }
  .mouth-go-plus__showcase::after { background: linear-gradient(180deg, rgba(2,3,2,.96) 0%, rgba(2,3,2,.82) 64%, rgba(2,3,2,.9) 100%); }
  .mouth-go-plus__showcase-copy { min-height: 520px; padding: 38px 24px; }
  .mouth-go-plus__showcase-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mouth-go-plus__showcase-stats div { grid-template-columns: 1fr; gap: 5px; padding: 13px 6px; text-align: center; }
  .mouth-go-plus__showcase-stats strong { font-size: 29px; }
  .mouth-go-plus__showcase-stats span { font-size: 9px; }
  .mouth-go-plus__showcase-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: visible; }
  .mouth-go-plus__showcase-features article { padding: 22px 18px; border-right: 1px solid rgba(255,255,255,.13); border-bottom: 0; }
  .mouth-go-plus__showcase-features article:last-child { grid-column: 1 / -1; }
  .mouth-go-plus__guide article { padding: 26px 22px; }
  .mouth-go-plus__expanded { gap: 30px; margin-top: 34px; padding: 24px; }
  .mouth-go-plus__expanded figure { max-width: 400px; margin: auto; }
  .mouth-suresmile, .mouth-compare { padding: 76px 0; }
  .mouth-suresmile__grid { gap: 34px; }
  .mouth-suresmile__features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mouth-suresmile__features article { padding: 20px 16px; }
  .mouth-suresmile__features article:last-child { grid-column: 1 / -1; }
  .mouth-suresmile__features h3 { font-size: 17px; }
  .mouth-suresmile__features p { font-size: 13px; line-height: 1.75; }
  .mouth-suresmile__process { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-right: 0; padding: 0; overflow: visible; background: transparent; }
  .mouth-suresmile__process li { min-height: 0; padding: 20px 16px; border: 1px solid #dce8e8; border-radius: 16px; }
  .mouth-suresmile__process li:not(:last-child)::after { display: none; }
  .mouth-suresmile__footer { grid-template-columns: 1fr; gap: 14px; }
  .mouth-suresmile__footer a { white-space: normal; }
  .mouth-compare__heading .mouth-label, .mouth-compare__heading h2, .mouth-compare__heading > p:last-child { grid-column: 1; grid-row: auto; }
  .mouth-compare__heading > p:last-child { margin-top: 12px; font-size: 16px; }
  .mouth-compare__ranges { grid-template-columns: 1fr; gap: 10px; margin-top: 36px; }
  .mouth-compare__ranges article { grid-template-columns: 88px 1fr; }
  .mouth-compare__table-wrap { width: calc(100vw - 16px); margin-right: 0; margin-left: calc(50% - 50vw + 8px); overflow-x: visible; border-radius: 10px; }
  .mouth-compare__table { min-width: 0; table-layout: fixed; }
  .mouth-compare__table tbody th { width: 24%; }
  .mouth-compare__table td { width: 38%; }
  .mouth-compare__table th, .mouth-compare__table td { padding: 10px 8px; font-size: 11px; overflow-wrap: anywhere; }
  .mouth-retreatment { padding: 76px 0; }
  .mouth-retreatment__case { grid-template-columns: 1fr; }
  .mouth-retreatment__case > p { grid-column: 1; }
  .mouth-intro__grid { grid-template-columns: 1fr; gap: 24px; }
  .mouth-intro__photo { grid-column: 1; width: min(48vw, 180px); aspect-ratio: 4 / 5; justify-self: center; }
  .mouth-suresmile__heading figure { width: min(74vw, 280px); }
  .mouth-benefits__lead { grid-template-columns: 1fr; gap: 28px; }
  .mouth-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mouth-benefit-grid article { min-height: 0; padding: 18px 14px; }
  .mouth-benefit-grid article:last-child { grid-column: 1 / -1; }
  .mouth-benefit-grid h3 { margin: 8px 0 10px; font-size: 16px; line-height: 1.55; }
  .mouth-benefit-grid p { font-size: 13px; line-height: 1.75; }
}

@media (prefers-reduced-motion: reduce) {
}
/* KON ALIGNER EXPANSION CSS END */

/*
 * Mobile fixed controls
 * 右上メニューと、電話・WEB予約・ページ先頭の3分割バー。
 */
@media (min-width: 768px) {
  .fixed-contact {
    display: block !important;
    top: auto;
    right: 24px;
    bottom: 24px;
    left: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    pointer-events: none;
  }

  .fixed-contact__inner {
    display: block;
    width: auto;
    min-height: 0;
  }

  .fixed-contact__item {
    display: none;
  }

  .fixed-contact__top {
    width: 92px;
    height: 92px;
    border: 1px solid rgba(255, 255, 255, .72);
    background: rgba(0, 174, 191, .76);
    box-shadow: 0 12px 30px rgba(24, 74, 102, .22);
    backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .28s ease, transform .28s ease, background .2s ease;
  }

  .fixed-contact__top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .fixed-contact__top:hover {
    background: rgba(7, 151, 168, .9);
    transform: translateY(-4px);
  }

  .fixed-contact__top small {
    display: none;
  }
}

/* PC右下：小さなページトップと、モバイルと同じ操作の固定メニュー。 */
.desktop-drawer-host {
  position: static !important;
  z-index: auto !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.desktop-drawer-host .gnav:not(.is-open) {
  display: none !important;
}

@media (min-width: 1121px) {
  .fixed-contact {
    bottom: 92px;
  }

  .fixed-contact__top {
    width: 56px;
    height: 56px;
  }

  .fixed-contact__top > span {
    font-size: 20px;
  }

  .menu-button {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 3004;
    display: block;
    width: 94px;
    height: 48px;
    margin: 0;
    border: 1px solid rgba(22, 155, 171, .38);
    border-radius: 24px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 7px 20px rgba(34, 87, 104, .16);
  }

  .menu-button span {
    left: 14px;
    width: 19px;
  }

  .menu-button span:nth-child(1) { top: 14px; }
  .menu-button span:nth-child(2) { top: 21px; }
  .menu-button span:nth-child(3) { top: 28px; }
  .menu-button.is-open span:nth-child(1),
  .menu-button.is-open span:nth-child(3) { top: 21px; }

  .menu-button b {
    position: absolute;
    top: 50%;
    right: 11px;
    width: 42px;
    color: #167e89;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    text-align: center;
    white-space: nowrap;
    transform: translateY(-50%);
  }

  .site-header .gnav.is-open {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 3003;
    display: block;
    width: min(430px, 100vw);
    height: 100dvh;
    margin: 0;
    padding: 72px 22px 128px;
    overflow-y: auto;
    border: 0;
    background: #fff !important;
    box-shadow: -14px 0 42px rgba(35, 77, 97, .18);
    animation: menu-drawer-in .22s ease-out both;
  }

  .site-header .gnav.is-open,
  .site-header .gnav.is-open .gnav__list,
  .site-header .gnav.is-open .gnav__item,
  .site-header .gnav.is-open .gnav__link,
  .site-header .gnav.is-open .gnav__parent {
    transition: none !important;
  }

  body.admin-bar .site-header .gnav.is-open {
    top: 32px;
    height: calc(100dvh - 32px);
  }

  .site-header .gnav.is-open::before,
  .site-header .gnav.is-open::after {
    display: none;
  }

  .site-header .gnav.is-open .gnav__list {
    display: block;
    width: 100%;
    height: auto;
  }

  .site-header .gnav.is-open .gnav__item {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid #e9f2f4;
  }

  .site-header .gnav.is-open .gnav__item::before,
  .site-header .gnav.is-open .gnav__item:last-child::after {
    display: none;
  }

  .site-header .gnav.is-open .gnav__parent {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    align-items: center;
    width: 100%;
  }

  .site-header .gnav.is-open .gnav__link {
    width: auto;
    height: auto;
    min-height: 58px;
    padding: 14px 6px;
    font-size: 16px;
    letter-spacing: .06em;
  }

  .site-header .gnav.is-open .gnav__link::after,
  .site-header .gnav.is-open .gnav__icon {
    display: none;
  }

  .site-header .gnav.is-open .gnav__submenu-button {
    position: relative;
    top: auto;
    right: auto;
    display: grid;
    width: 34px;
    height: 34px;
    margin: 0 6px;
    place-items: center;
    border-radius: 50%;
    color: #159fa9;
    background: #eaf9fa;
  }

  .site-header .gnav.is-open .gnav__submenu-button svg {
    display: none;
  }

  .site-header .gnav.is-open .gnav__submenu-button::before,
  .site-header .gnav.is-open .gnav__submenu-button::after {
    position: absolute;
    width: 12px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    content: "";
  }

  .site-header .gnav.is-open .gnav__submenu-button::after {
    transform: rotate(90deg);
  }

  .site-header .gnav.is-open .gnav__submenu-button[aria-expanded="true"]::after {
    transform: rotate(0);
  }

  .site-header .gnav.is-open .gnav__submenu {
    position: static;
    width: 100%;
    min-width: 0;
    max-height: 0;
    padding: 0 8px;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    background: #f5fbfc;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: max-height .3s ease, padding .3s ease;
  }

  .site-header .gnav.is-open .gnav__item.is-submenu-open > .gnav__submenu {
    max-height: 700px;
    padding: 4px 8px 10px;
  }

  .site-header .gnav.is-open .gnav__submenu a {
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.45;
  }

  .site-header .gnav.is-open .gnav__contact {
    display: grid;
    gap: 10px;
    margin-top: 24px;
  }

  .site-header .gnav.is-open .gnav__contact-tel,
  .site-header .gnav.is-open .gnav__contact-reserve,
  .site-header .gnav.is-open .gnav__contact-form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 58px;
    padding: 9px 18px;
    border-radius: 999px;
  }

  .site-header .gnav.is-open .gnav__contact-tel {
    border: 1px solid #8bd7dc;
    color: #159fa9;
    background: #fff;
  }

  .site-header .gnav.is-open .gnav__contact-tel small { display: block; font-size: 9px; }
  .site-header .gnav.is-open .gnav__contact-tel strong { display: block; font-size: 18px; }
  .site-header .gnav.is-open .gnav__contact-reserve { color: #fff; background: #f25f87; font-size: 15px; font-weight: 700; }
  .site-header .gnav.is-open .gnav__contact-form { color: #fff; background: #2a6b9d; font-size: 15px; font-weight: 700; }

  body.is-menu-open {
    overflow: hidden;
  }

  body.is-menu-open .fixed-contact {
    right: 446px;
    bottom: 24px;
  }
}

@keyframes menu-drawer-in {
  from {
    opacity: .88;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .gnav.is-open {
    animation: none;
  }
}

/* ログイン中はWordPress管理バーの下に追従ヘッダーを配置する。 */
body.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 1120px) {
  /* backdrop-filter が fixed の基準をヘッダー内へ変えてしまうため、
     モバイルでは解除してメニューボタンを画面右上へ固定する。 */
  .site-header,
  body.home .site-header,
  .site-header.site-header--lower-visual,
  body.home .site-header.site-header--lower-visual {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .menu-button {
    position: fixed !important;
    top: 12px;
    right: 12px;
    z-index: 3002 !important;
    margin: 0 !important;
    border: 1px solid rgba(22, 155, 171, .34) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 7px 20px rgba(34, 87, 104, .13);
  }

  /* 閉じたナビを画面外へ translate するとページ幅が2倍になるため、
     画面内の同じ位置でクリップして隠す。 */
  .site-header .gnav {
    position: fixed !important;
    top: 72px !important;
    right: 0 !important;
    left: auto !important;
    width: min(430px, 100vw) !important;
    max-width: 100vw !important;
    transform: none !important;
    clip-path: inset(0 0 0 100%);
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease, clip-path .28s ease !important;
  }

  .site-header .gnav.is-open {
    clip-path: inset(0 0 0 0);
    pointer-events: auto;
  }

  body.admin-bar .menu-button {
    top: 44px;
  }

  body.admin-bar .site-header .gnav {
    top: 104px !important;
    height: calc(100vh - 104px);
    height: calc(100dvh - 104px);
  }
}

/* ドロワー内の診療科目は、最初から見渡せる2カラムにする。 */
.site-header .gnav.is-open .gnav__item.is-submenu-open > .gnav__submenu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 6px;
}

.site-header .gnav.is-open .gnav__item.is-submenu-open .gnav__submenu li {
  min-width: 0;
}

.site-header .gnav.is-open .gnav__item.is-submenu-open .gnav__submenu a {
  min-width: 0;
  gap: 5px !important;
  padding: 7px 4px !important;
  font-size: 13px !important;
  white-space: normal;
}

.site-header .gnav.is-open .gnav__item.is-submenu-open .gnav__submenu-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.site-header .gnav.is-open .gnav__item.is-submenu-open .gnav__submenu-icon svg {
  width: 16px;
  height: 16px;
}

.site-header .gnav.is-open .gnav__item.is-submenu-open .gnav__submenu-item--separator {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }

  body.admin-bar .menu-button {
    top: 58px;
  }

  body.admin-bar .site-header .gnav {
    top: 118px !important;
    height: calc(100vh - 118px);
    height: calc(100dvh - 118px);
  }
}

@media (max-width: 767px) {
  body {
    padding-bottom: 0;
  }

  .site-header-inner {
    width: 100% !important;
    padding: 0 12px 0 10px;
  }

  .site-header .logo,
  .site-header .logo .custom-logo-link {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .site-header .logo img,
  .site-header .logo .custom-logo {
    width: min(264px, calc(100vw - 128px)) !important;
    max-width: 264px !important;
    max-height: 56px !important;
  }

  .site-header-inner::after {
    display: none !important;
  }

  .fixed-contact {
    display: block !important;
    z-index: 3000;
    border-top: 0;
    background: #fff;
    box-shadow: 0 -7px 24px rgba(31, 71, 91, .13);
    backdrop-filter: none;
  }

  .fixed-contact__inner {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 28.333fr)) minmax(0, 15fr) !important;
    grid-template-rows: 64px !important;
    grid-auto-flow: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 64px !important;
    margin: 0 !important;
    overflow: hidden;
  }

  .fixed-contact__item,
  .fixed-contact__top {
    position: static !important;
    width: auto !important;
    min-width: 0;
    height: 64px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: hidden;
  }

  .fixed-contact__item--tel {
    grid-column: 1 !important;
  }

  .fixed-contact__item--web {
    grid-column: 2 !important;
  }

  .fixed-contact__item--form {
    grid-column: 3 !important;
    background: linear-gradient(135deg, #3b7da9, #28658f) !important;
  }

  .fixed-contact__top {
    grid-column: 4 !important;
  }

  .fixed-contact__item {
    display: flex;
    gap: 7px !important;
    padding: 6px 8px;
    color: #fff !important;
  }

  .fixed-contact__item--tel {
    background: linear-gradient(135deg, #27b8c0, #1aa6b1) !important;
  }

  .fixed-contact__item--web {
    background: linear-gradient(135deg, #f47b98, #ef6286) !important;
  }

  .fixed-contact__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #fff;
    background: linear-gradient(145deg, #3267a9, #27548d);
    text-align: center;
  }

  .fixed-contact__icon {
    display: grid;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    place-items: center;
    font-size: 0 !important;
  }

  .fixed-contact__icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .fixed-contact__label {
    min-width: 0;
    align-items: flex-start;
  }

  .fixed-contact__label small {
    order: 1;
    margin: 0 0 1px !important;
    font-size: 11px !important;
    font-weight: 500;
    line-height: 1.15;
    white-space: nowrap;
  }

  .fixed-contact__label strong {
    order: 2;
    font-size: clamp(12px, 3.6vw, 16px) !important;
    line-height: 1.2;
    letter-spacing: .015em;
    white-space: nowrap;
  }

  .fixed-contact__top > span {
    font-size: 19px;
    line-height: 1;
  }

  .fixed-contact__top small {
    display: block !important;
    margin: 0 !important;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 8px !important;
    font-style: normal;
    line-height: 1.1;
    white-space: normal;
  }

  body.is-menu-open .fixed-contact {
    z-index: 3001;
  }
}
/* 2026-07-22: clearer section backgrounds across lower pages.
   Keep the palette clean and restrained; use solid colors for section rhythm. */
.entry-content--clinic {
  --clinic-blue-bg: #e7f7f8;
  --clinic-pink-bg: #ffedf3;
  --clinic-yellow-bg: #fff4d8;
  --clinic-navy-bg: #eaf0f8;
}

.doctor-history { background: #e2f7f9; }

@media (min-width: 768px) {
  .doctor-history {
    padding-block: clamp(64px, 6vw, 88px);
  }
}

.lower-page--staff {
  --staff-director-pale: #ddf4f5;
  --staff-hygienist-pale: #e2f3ee;
  --staff-technician-pale: #fff1d2;
  --staff-assistant-pale: #ffe5eb;
}

.treatment-page { --tr-pale: #e3f5f6; }
.treatment-menu { background: #eef8f8; }
.treatment-compact-nav { background: #edf7f7; }
.treatment-related { background: #fff2e8; }

.general-diagnosis { background: #e2f5f5; }
.general-tool-card { background: #edf7f7; }
.general-tool-card:nth-child(2) { background: #ffede7; }

.kids-page { --k-sky: #d2f1f7; }
.kids-family { background: #fff0eb; }
.kids-prevention { background: #dff5f4; }
.kids-prevention__cards article:nth-child(1) .kids-card-icon { background: #ffedaa; }
.kids-prevention__cards article:nth-child(2) .kids-card-icon { background: #ffe0e7; }
.kids-prevention__cards article:nth-child(3) .kids-card-icon { background: #d5f2ec; }

.mouth-page {
  --m: #173b72;
  --c: #20aeb5;
  --s: #e8f7f7;
}
.mouth-benefits { border-top: 48px solid #fff; background: #fff0f4; }
.mouth-video-section { background: #e8f7f7; }
.mouth-simulation { background: #eaf8fa; }

.perio-page {
  --p: #173b72;
  --a: #20aeb5;
  --l: #e8f7f7;
  color: #40566b;
}
.perio-hero { background: #eaf8fa; }
.perio-hero p,
.perio-label,
.perio-progress span { color: #159fa9; }
.perio-section--dark { background: #173b72; }
.perio-symptoms li { border-bottom-color: #c7e3e5; }
.perio-hero__photo::after { border-color: rgba(32, 174, 181, .38); }

.preventive-page {
  --p: #173b72;
  --a: #20aeb5;
  --l: #eaf8fa;
  color: #40566b;
}
.preventive-hero { background: #eaf8fa; }
.preventive-hero__grid p:first-child,
.preventive-label,
.preventive-points span { color: #159fa9; }
.preventive-tool { background: #f1f9fa; }
.preventive-tool__image { background: #dff3f5; }

.ortho-page {
  --o: #173b72;
  --a: #20aeb5;
  --p: #eaf8fa;
  color: #40566b;
}
.ortho-hero { background: #eaf8fa; }
.ortho-notice {
  background: #fff0f4;
  border-bottom-color: #f3d8e1;
}
.ortho-hero__grid img { box-shadow: 20px 20px 0 rgba(32, 174, 181, .16); }

.esthetic-page {
  --e-ink: #173b72;
  --e-gold: #20aeb5;
  --e-beige: #eaf8fa;
  --e-mauve: #ef718d;
  color: #40566b;
}
.esthetic-hero { background: #eaf8fa; }
.esthetic-consult { background: #f1f9fa; }
.esthetic-price { background: #eef8f8; }

.implant-page {
  --im-ink: #173b72;
  --im-slate: #40566b;
  --im-teal: #20aeb5;
  --im-copper: #ef718d;
  --im-ivory: #fff0f4;
  --im-mint: #e8f7f7;
}
.implant-flow::before { background: #eaf8fa; }
.implant-fee { background: #eef8f8; }
.implant-line__button { background: #20aeb5; }

.whitening-page {
  --w-ink: #173b72;
  --w-mint: #20aeb5;
  --w-pale: #e8f7f7;
  --w-warm: #fff0f4;
  color: #40566b;
}
.whitening-office__price { background: #e8f7f7; }

.access-schedule__body { background: #eaf6f6; }
.access-stations__icon { background: #dff4f5; }

.reservation-intro__contact { background: #e1f5f4; }
.reservation-policy { background: #f1e8dc; }
.reservation-consent { background: #dcf3f3; }
.reservation-flow__grid article { background: #eaf7f8; }
.reservation-flow__grid article:nth-child(2) { background: #ffedf1; }

.recruit-benefits,
.recruit-feature,
.recruit-dh-work,
.recruit-learning { background: #e9f6f6; }
.recruit-worries,
.recruit-day { background: #fff0e9; }

.blog-page,
.blog-single { background: #fff; }
.post-treatment-links { background: #eaf6f6; }
.post-treatment-link { background: #e6f5f5; }

.price-ratings { background: #eef6f6; }
.price-card__foot { background: #fff3ec; }
.price-notes { background: #eaf6f6; }
/* ======================================
   Lower-page scroll reveal
   大きな本文セクションだけに適用し、描画負荷を抑える。
====================================== */
.has-site-reveal body:not(.home) .site-reveal {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 1.35s ease,
    transform 1.3s cubic-bezier(.2, .65, .3, 1);
}

.has-site-reveal body:not(.home) .site-reveal--from-left {
  transform: translate3d(-18px, 12px, 0) scale(.995);
}

.has-site-reveal body:not(.home) .site-reveal--from-right {
  transform: translate3d(18px, 12px, 0) scale(.995);
}

.has-site-reveal body:not(.home) .site-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

@media (max-width: 767px) {
  .has-site-reveal body:not(.home) .site-reveal {
    transform: translate3d(0, 9px, 0);
    transition-duration: 1.15s;
  }

  .has-site-reveal body:not(.home) .site-reveal--from-left {
    transform: translate3d(-10px, 9px, 0) scale(.997);
  }

  .has-site-reveal body:not(.home) .site-reveal--from-right {
    transform: translate3d(10px, 9px, 0) scale(.997);
  }

  .has-site-reveal body:not(.home) .site-reveal.is-visible {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-site-reveal body:not(.home) .site-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 2026-08-09 client revisions: mobile actions, treatment visuals and content order. */
@media (min-width: 1121px) {
  .gnav__item--mobile-only {
    display: none;
  }
}

@media (max-width: 1120px) {
  .gnav__parent {
    grid-template-columns: minmax(0, 1fr) 64px !important;
    min-height: 64px;
  }

  .gnav__submenu-button {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px;
    margin: 0 6px !important;
    touch-action: manipulation;
  }

  .gnav__submenu-button::before,
  .gnav__submenu-button::after {
    width: 16px !important;
    height: 2px !important;
  }

  .gnav__contact-form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 58px;
    padding: 9px 18px;
    border-radius: 999px;
    color: #fff;
    background: #2a6b9d;
    font-size: 15px;
    font-weight: 700;
  }
}

.mouth-flow li {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 270px) !important;
  align-items: center;
}

.mouth-flow li figure {
  margin: 0;
}

.mouth-flow li figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  object-fit: cover;
}

.mouth-flow-illustration {
  display: block;
  width: 100%;
  aspect-ratio: 916 / 343;
  border: 0;
  border-radius: 0;
  background-image: url("../images/treatment/mouthpiece/mouthpiece-flow-illustrations.png");
  background-repeat: no-repeat;
  background-size: 100% 500%;
}

.mouth-flow-illustration--1 { background-position: center 0%; }
.mouth-flow-illustration--2 { background-position: center 28.3%; }
.mouth-flow-illustration--3 { background-position: center 53.6%; }
.mouth-flow-illustration--4 {
  background-size: 116% auto;
  background-position: center 76%;
}
.mouth-flow-illustration--5 { background-position: center 100%; }

.mouth-flow li > div p {
  margin-top: .6em;
}

/* Treatment flows: make sequence and direction immediately recognizable. */
.mouth-flow ol {
  position: relative;
  padding-left: 88px;
  border-top: 0;
  counter-reset: mouth-journey;
}

.mouth-flow ol::before {
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 26px;
  width: 2px;
  background: linear-gradient(to bottom, var(--c), rgba(46, 170, 169, .2));
  content: "";
}

.mouth-flow li {
  position: relative;
  counter-increment: mouth-journey;
}

.mouth-flow li::before {
  position: absolute;
  top: 24px;
  left: -88px;
  z-index: 1;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 5px solid var(--s);
  border-radius: 50%;
  color: #fff;
  background: var(--c);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  content: counter(mouth-journey, decimal-leading-zero);
  box-shadow: 0 8px 20px rgba(31, 116, 126, .18);
}

.mouth-flow li:not(:last-child)::after {
  position: absolute;
  bottom: -8px;
  left: -71px;
  z-index: 1;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 0;
  color: var(--c);
  background: var(--s);
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  content: "v";
  transform: none;
}

/* Compact treatment journeys: reuse the mouthpiece flow language. */
:is(.general-flow, .kids-flow, .esthetic-flow, .preventive-flow) {
  --compact-flow-accent: #2eaaa9;
  --compact-flow-bg: #f1f8f7;
}

.general-flow { --compact-flow-accent: var(--g-teal); --compact-flow-bg: #fff8e9; }
.kids-flow { --compact-flow-accent: var(--k-mint); --compact-flow-bg: #f4fbfb; }
.esthetic-flow { --compact-flow-accent: var(--e-gold); --compact-flow-bg: #fff; }
.preventive-flow { --compact-flow-accent: var(--a); --compact-flow-bg: #fff; }

:is(.general-flow__head, .kids-flow__heading, .esthetic-flow__heading, .preventive-flow__heading) {
  max-width: 920px;
  margin-right: auto;
  margin-left: auto;
}

:is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) {
  position: relative;
  display: block;
  max-width: 920px;
  margin: 38px auto 0;
  padding: 0 0 0 88px;
  border-top: 0;
  background: transparent;
  list-style: none;
  counter-reset: compact-treatment-flow;
}

:is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list)::before {
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 26px;
  width: 2px;
  background: linear-gradient(to bottom, var(--compact-flow-accent), color-mix(in srgb, var(--compact-flow-accent) 20%, transparent));
  content: "";
}

:is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) li,
:is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) li:nth-child(even) {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 250px);
  gap: 34px;
  align-items: center;
  min-height: 0;
  padding: 24px 8px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--compact-flow-accent) 24%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  counter-increment: compact-treatment-flow;
}

:is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) li:nth-child(even) :is(.general-flow__copy, .kids-flow__copy, .esthetic-flow__copy, .preventive-flow__copy),
:is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) li:nth-child(even) figure {
  order: initial;
}

:is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) li::before {
  position: absolute;
  top: 24px;
  left: -88px;
  z-index: 2;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 5px solid var(--compact-flow-bg);
  border-radius: 50%;
  color: #fff;
  background: var(--compact-flow-accent);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  content: counter(compact-treatment-flow, decimal-leading-zero);
  box-shadow: 0 8px 20px rgba(31, 116, 126, .16);
}

:is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) li:not(:last-child)::after {
  position: absolute;
  right: auto;
  bottom: -8px;
  left: -71px;
  z-index: 2;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: var(--compact-flow-accent);
  background: var(--compact-flow-bg);
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  content: "v";
  transform: none;
}

:is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) figure {
  width: 100%;
  max-width: 250px;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

:is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center 38%;
}

:is(.kids-flow__copy, .esthetic-flow__copy, .preventive-flow__copy) > span {
  display: none;
}

@media (min-width: 801px) {
  .whitening-steps {
    column-gap: 42px;
    row-gap: 46px;
  }

  .whitening-steps li {
    min-height: 230px;
    padding: 34px 32px 32px;
  }

  .whitening-steps li:nth-child(1)::before,
  .whitening-steps li:nth-child(2)::before {
    position: absolute;
    top: 50%;
    right: -28px;
    z-index: 2;
    width: 17px;
    height: 17px;
    border-top: 4px solid var(--w-mint);
    border-right: 4px solid var(--w-mint);
    background: var(--w-warm);
    content: "";
    transform: translateY(-50%) rotate(45deg);
  }

  .whitening-steps li:nth-child(3)::before {
    position: absolute;
    right: 50%;
    bottom: -30px;
    z-index: 2;
    width: 17px;
    height: 17px;
    border-right: 4px solid var(--w-mint);
    border-bottom: 4px solid var(--w-mint);
    background: var(--w-warm);
    content: "";
    transform: translateX(50%) rotate(45deg);
  }

  .whitening-steps li:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
  }

  .whitening-steps li:nth-child(5) {
    grid-column: 2;
    grid-row: 2;
  }

  .whitening-steps li:nth-child(6) {
    grid-column: 1;
    grid-row: 2;
  }

  .whitening-steps li:nth-child(4)::before,
  .whitening-steps li:nth-child(5)::before {
    position: absolute;
    top: 50%;
    left: -28px;
    z-index: 2;
    width: 17px;
    height: 17px;
    border-bottom: 4px solid var(--w-mint);
    border-left: 4px solid var(--w-mint);
    background: var(--w-warm);
    content: "";
    transform: translateY(-50%) rotate(45deg);
  }
}

/* iPhone 17 (402px) heading wraps: avoid one- or two-character final lines. */
@media (max-width: 430px) {
  body.home main :is(h1, h2, h3, h4),
  body.page main :is(h1, h2, h3, h4) {
    text-wrap: pretty;
  }

  body.home main .section-heading__title {
    font-size: clamp(22px, 6vw, 24px) !important;
    letter-spacing: .045em !important;
  }

  body :is(
    .home-main,
    .lower-page,
    .treatment-page,
    .general-page,
    .kids-page,
    .esthetic-page,
    .implant-page,
    .whitening-page,
    .ortho-page,
    .mouth-page,
    .perio-page,
    .preventive-page,
    .recruit-page,
    .access-page
  ) :is(h1, h2, h3, h4) {
    text-wrap: pretty;
  }

  body :is(
    .section-heading__title,
    .clinic-heading__title,
    .first-heading h2,
    .recruit-heading h2,
    .reservation-heading h2,
    .access-section-heading h2,
    .treatment-section__heading h2,
    .treatment-blog-links__heading h2
  ) {
    font-size: clamp(22px, 6vw, 24px) !important;
    letter-spacing: .045em !important;
  }

  :is(
    .general-page,
    .kids-page,
    .esthetic-page,
    .implant-page,
    .whitening-page,
    .ortho-page,
    .mouth-page,
    .perio-page,
    .preventive-page,
    .treatment-page,
    .lower-page--first,
    .lower-page--recruit,
    .lower-page--reservation
  ) h2 {
    letter-spacing: .04em !important;
  }

  .lower-page--price .price-card h4 {
    font-size: 21px !important;
    letter-spacing: .035em !important;
  }
}

.mouth-price dl {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-top: 28px;
}

.mouth-price dl > div {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  padding: 0 26px !important;
  border-right: 1px solid #d5e1e0 !important;
  border-bottom: 0;
}

.mouth-price dl > div dt,
.mouth-price dl > div dd {
  grid-column: 1;
}

.mouth-price dl > div dt {
  align-self: end;
  color: #425874;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.mouth-price__range-number {
  display: inline-block;
  margin: 0 3px;
  font-family: Georgia, "Zen Maru Gothic", serif;
  font-size: clamp(38px, 4.2vw, 56px);
  font-weight: 700;
  line-height: .85;
  vertical-align: -.12em;
}

.mouth-price__range-card--5 .mouth-price__range-number { color: #557cbe; }
.mouth-price__range-card--6 .mouth-price__range-number { color: #e98245; }
.mouth-price__range-card--7 .mouth-price__range-number { color: #62a26b; }

.mouth-price dl > div dd {
  align-self: start;
}

.mouth-price dl > div .mouth-range {
  grid-column: 1;
  grid-row: 3;
  margin-top: 20px;
}

.mouth-price dl > div:last-child {
  border-right: 0 !important;
}

.mouth-price__head {
  padding-bottom: 22px;
  border-bottom: 1px solid #d5e1e0;
}

.mouth-price__head .mouth-label {
  margin: 0 0 6px;
}

.mouth-price__head h3 {
  margin: 0;
  color: var(--m);
  font-size: clamp(26px, 3vw, 38px) !important;
  line-height: 1.45;
}

.mouth-range {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(46, 170, 169, .18);
  border-radius: 18px;
  background-image: url("../images/treatment/mouthpiece/mouthpiece-treatment-ranges-v3.png");
  background-repeat: no-repeat;
  background-size: 300% 100%;
}

.mouth-range--5 { background-position: 0 center; }
.mouth-range--6 { background-position: 50% center; }
.mouth-range--7 { background-position: 100% center; }

.mouth-cases {
  padding: 120px 0;
  background: #fff;
}

.mouth-cases__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 7vw, 90px);
  align-items: center;
}

.mouth-cases__grid figure {
  margin: 0;
}

.mouth-cases__grid img {
  display: block;
  width: 100%;
  border-radius: 22px;
}

.mouth-cases__grid a {
  display: inline-flex;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 22px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #c13a8b, #f06f58);
  font-weight: 700;
}

.whitening-fee-card {
  border-radius: 20px;
  box-shadow: 0 16px 38px rgba(31, 71, 91, .1);
}

.whitening-fee-card strong {
  display: block;
  color: #244a72;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.5;
}

.home-updates .home-instagram {
  width: 100%;
  margin: 22px 0 26px;
  padding: 28px 0 26px;
  border-radius: 26px;
}

@media (max-width: 767px) {
  .fixed-contact__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .fixed-contact__item--form {
    grid-column: 3 !important;
    background: linear-gradient(135deg, #3b7da9, #28658f) !important;
  }

  .fixed-contact__top {
    position: fixed !important;
    right: 14px !important;
    bottom: 78px !important;
    z-index: 1002;
    display: grid !important;
    grid-column: auto !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    place-items: center;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, .82) !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, rgba(50, 103, 169, .74), rgba(39, 84, 141, .78)) !important;
    box-shadow: 0 8px 22px rgba(37, 82, 140, .24) !important;
    backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) !important;
    transition: opacity .28s ease, transform .28s ease !important;
  }

  .fixed-contact__top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) !important;
  }

  .fixed-contact__top > span {
    font-size: 23px;
    line-height: 1;
  }

  .fixed-contact__top small {
    display: none !important;
  }

  .fixed-contact__item {
    gap: 4px !important;
    padding-inline: 4px !important;
  }

  .fixed-contact__label small {
    font-size: clamp(7px, 2.1vw, 10px) !important;
  }

  .fixed-contact__label strong {
    font-size: clamp(10px, 3vw, 14px) !important;
  }

  .fixed-contact__item--tel .fixed-contact__label small {
    display: none;
  }

  .fixed-contact__item--tel .fixed-contact__label strong {
    font-size: clamp(10px, 3.1vw, 14px) !important;
  }

  .treatment-compact-nav__item--mouthpiece {
    gap: 5px !important;
    padding-inline: 7px !important;
  }

  .treatment-compact-nav__item--mouthpiece strong {
    font-size: clamp(11px, 3.1vw, 13px) !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
  }

  .mouth-flow li {
    grid-template-columns: 1fr !important;
  }

  .mouth-flow ol {
    padding-left: 52px;
  }

  .mouth-flow ol::before {
    left: 17px;
  }

  .mouth-flow li::before {
    top: 20px;
    left: -52px;
    width: 36px;
    height: 36px;
    border-width: 4px;
    font-size: 12px;
  }

  .mouth-flow li:not(:last-child)::after {
    left: -44px;
  }

  :is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) {
    margin-top: 28px;
    padding-left: 52px;
  }

  :is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list)::before {
    left: 17px;
  }

  :is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) li,
  :is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) li:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(112px, 38%);
    gap: 14px;
    padding: 18px 0;
  }

  :is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) li::before {
    top: 18px;
    left: -52px;
    width: 36px;
    height: 36px;
    border-width: 4px;
    font-size: 12px;
  }

  :is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) li:not(:last-child)::after {
    left: -44px;
  }

  :is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) figure {
    max-width: none;
    border-radius: 0;
  }

  :is(.general-flow__copy, .kids-flow__copy, .esthetic-flow__copy, .preventive-flow__copy) h3 {
    margin: 5px 0 7px;
    font-size: 18px;
  }

  :is(.general-flow__copy, .kids-flow__copy, .esthetic-flow__copy, .preventive-flow__copy) p {
    font-size: 13px;
    line-height: 1.65;
  }

  /* Treatment explanations need full reading width on narrow screens. */
  :is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) li,
  :is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) li:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  :is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) figure {
    width: min(100%, 300px);
  }

  .whitening-steps li:not(:last-child)::before {
    position: absolute;
    right: auto;
    bottom: -8px;
    left: 50%;
    z-index: 2;
    width: 12px;
    height: 12px;
    border-right: 3px solid var(--w-mint);
    border-bottom: 3px solid var(--w-mint);
    background: var(--w-warm);
    content: "";
    transform: translateX(-50%) rotate(45deg);
  }

  .mouth-price {
    padding: 24px 20px;
  }

  .mouth-price dl > div {
    grid-template-columns: minmax(0, 1fr) minmax(118px, 42%);
    gap: 16px;
    padding: 22px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #d5e1e0;
  }

  .mouth-price dl {
    grid-template-columns: 1fr !important;
    margin-top: 0;
  }

  .mouth-price dl > div .mouth-range {
    grid-column: 2;
    grid-row: 1 / 3;
    margin-top: 0;
  }

  .mouth-price__range-number {
    font-size: 42px;
  }

  .mouth-price dd small {
    display: inline-block;
    font-size: 10px;
    white-space: nowrap;
  }

  .mouth-price dl > div:last-child {
    border-bottom: 0;
  }

  .mouth-cases {
    padding: 72px 0;
  }

  .mouth-cases__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .home-updates .home-instagram {
    margin-block: 18px 22px;
    padding-block: 22px 26px;
  }
}

@media (max-width: 420px) {
  .fixed-contact__item--form .fixed-contact__icon {
    display: none;
  }

  .fixed-contact__item--form .fixed-contact__label {
    align-items: center;
    text-align: center;
  }

  .fixed-contact__item--form .fixed-contact__label strong {
    font-size: clamp(10px, 3.1vw, 13px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .gnav.is-open {
    animation: none !important;
  }
}

/* モバイルメニューを、文字付きで認識しやすいボタンにする。 */
@media (max-width: 1120px) {
  .menu-button {
    width: 94px !important;
    height: 48px !important;
    border: 1px solid rgba(22, 155, 171, .38) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 7px 20px rgba(34, 87, 104, .14);
  }

  .menu-button span {
    left: 14px !important;
    width: 19px;
    height: 2px;
  }

  .menu-button span:nth-child(1) { top: 14px; }
  .menu-button span:nth-child(2) { top: 21px; }
  .menu-button span:nth-child(3) { top: 28px; }
  .menu-button.is-open span:nth-child(1),
  .menu-button.is-open span:nth-child(3) { top: 21px; }

  .menu-button b {
    position: absolute;
    top: 50%;
    right: 11px;
    width: 42px;
    color: #167e89;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    text-align: center;
    white-space: nowrap;
    transform: translateY(-50%);
  }
}

/* ドロワー全体を2カラム化し、縦スクロール量を抑える。 */
.site-header .gnav.is-open .gnav__list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.site-header .gnav.is-open .gnav__item {
  order: 1;
  min-width: 0;
  overflow: hidden;
  border: 2px solid #d3e8eb !important;
  border-radius: 12px;
  background: #f9fcfd;
}

.site-header .gnav.is-open .gnav__item--home { grid-column: 1 / -1; order: 1; }
.site-header .gnav.is-open .gnav__item--first { order: 2; }
.site-header .gnav.is-open .gnav__item--clinic { order: 3; }
.site-header .gnav.is-open .gnav__item--access { order: 4; }
.site-header .gnav.is-open .gnav__item--topics { order: 5; }
.site-header .gnav.is-open .gnav__item--medical { order: 6; }
.site-header .gnav.is-open .gnav__item--staff { order: 7; }
.site-header .gnav.is-open .gnav__item--recruit { order: 8; }

.site-header .gnav.is-open .gnav__item--medical,
.site-header .gnav.is-open .gnav__item.is-submenu-open {
  grid-column: 1 / -1;
}

.site-header .gnav.is-open .gnav__parent {
  min-height: 54px !important;
}

.site-header .gnav.is-open .gnav__item--default-open {
  border-color: #b8dce1 !important;
  background: #f2fafb;
}

.site-header .gnav.is-open .gnav__item--default-open > .gnav__parent {
  grid-template-columns: minmax(0, 1fr) !important;
  border-bottom: 1px solid #c9e3e6;
  background: #e3f4f6;
}

.site-header .gnav.is-open .gnav__item--default-open .gnav__submenu-button {
  display: none !important;
}

.site-header .gnav.is-open .gnav__item:not(.gnav__item--has-child) .gnav__parent {
  display: block !important;
}

.site-header .gnav.is-open .gnav__link {
  min-height: 54px !important;
  padding: 9px 8px !important;
  color: #183f6a;
  font-size: 15px !important;
  font-weight: 700;
}

.site-header .gnav.is-open .gnav__item--default-open > .gnav__parent .gnav__link {
  font-size: 16px !important;
}

.site-header .gnav.is-open .gnav__text {
  gap: 2px;
}

.site-header .gnav.is-open .gnav__en {
  margin-top: 0;
  font-size: 8px !important;
}

.site-header .gnav.is-open .gnav__contact {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
}

.site-header .gnav.is-open .gnav__contact-tel {
  grid-column: 1 / -1;
}

.site-header .gnav.is-open .gnav__contact-reserve,
.site-header .gnav.is-open .gnav__contact-form {
  min-width: 0;
  min-height: 54px;
  padding-inline: 10px;
  font-size: 14px;
}

/* Use one clean sans-serif numeral system for visible prices and indexes. */
.mouth-price__range-number,
.mouth-price dd,
.implant-price-main strong,
.implant-fee-total strong,
.implant-fee-flow__number,
.implant-feature-card > span,
.treatment-points__number,
.treatment-detail__index,
.recruit-benefits article > strong,
.doctor-history__number,
.feature__number {
  font-family: "Avenir Next", "Helvetica Neue", "Zen Maru Gothic", sans-serif;
  font-variant-numeric: tabular-nums;
}

.mouth-consider__grid {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 760px);
}

.mouth-consider {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #f3faf9 !important;
}

.mouth-consider::before {
  position: absolute;
  z-index: -2;
  inset: -18px;
  background: url("../images/treatment/mouthpiece/generated/digital-scan-consultation.jpg") center 46% / cover no-repeat;
  content: "";
  filter: blur(7px) saturate(.78);
  opacity: .42;
  transform: scale(1.035);
}

.mouth-consider::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .94) 48%, rgba(239, 249, 248, .72) 72%, rgba(232, 247, 246, .48) 100%);
  content: "";
}

.mouth-consider__grid > div {
  padding-left: 34px;
  border-left: 4px solid rgba(46, 170, 169, .82);
}

@media (max-width: 800px) {
  .mouth-consider::before {
    background-position: 58% center;
    opacity: .25;
  }

  .mouth-consider::after {
    background: rgba(255, 255, 255, .86);
  }

  .mouth-consider__grid > div {
    padding: 28px 22px;
    border-left-width: 3px;
    background: rgba(255, 255, 255, .58);
    backdrop-filter: blur(3px);
  }
}

@media (max-width: 767px) {
  .for-you__visual {
    width: calc(100vw + 40px);
    max-width: none;
    margin-inline: calc(50% - 50vw - 20px);
  }
}

/* Mobile: keep lower-resolution clinic imagery compact and add a gentle rhythm. */
@media (max-width: 767px) {
  .clinic-tour-card__photo,
  .general-diagnosis__visual {
    width: 72%;
  }

  .clinic-tour-card:nth-child(odd) .clinic-tour-card__photo,
  .general-diagnosis__visual:nth-child(odd) {
    margin-right: auto;
    margin-left: 5%;
  }

  .clinic-tour-card:nth-child(even) .clinic-tour-card__photo,
  .general-diagnosis__visual:nth-child(even) {
    margin-right: 5%;
    margin-left: auto;
  }

  .clinic-tour-card__photo {
    margin-top: 12px;
    border-radius: 18px;
  }
}

/* ======================================
   Readable small type
   本文用途の14〜15pxを16px基準にし、ラベル・注釈類は従来サイズを保つ。
====================================== */
body {
  font-size: 16px;
}

/* 下層ページも、英字ラベル＋見出し＋説明文の縦密度を共通化する。 */
:is(.clinic-heading, .first-heading, .recruit-heading, .reservation-heading, .access-section-heading, .treatment-section__heading, .treatment-blog-links__heading) {
  margin-bottom: clamp(30px, 3vw, 44px) !important;
}

:is(.clinic-heading__en, .clinic-heading__eyebrow, .first-heading > p:first-child, .recruit-heading > p:first-child, .reservation-heading > p:first-child, .access-section-heading > p:first-child, .treatment-section__heading > p:first-child, .treatment-blog-links__heading > p:first-child) {
  margin-bottom: 5px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

:is(.clinic-heading__lead, .first-heading > span, .recruit-heading > span, .reservation-heading > span, .access-section-heading > span, .treatment-section__heading > span, .treatment-blog-links__heading > span) {
  margin-top: 10px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

:is(.section-heading__title, .clinic-heading__title, .first-heading h2, .recruit-heading h2, .reservation-heading h2, .access-section-heading h2, .treatment-section__heading h2, .treatment-blog-links__heading h2) {
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: clamp(28px, 2.7vw, 40px) !important;
  line-height: 1.35 !important;
}

.section-heading__lead,
.clinic-menu__item span,
.clinic-menu__item strong,
.feature__button,
.home-instagram__heading > a,
.home-notice__body p,
.home-blog__list a span,
.gnav__submenu a,
.gnav__contact-reserve,
.doctor-profile__list li,
.staff-page__lead,
.staff-message,
.clinic-promise-card__text,
.clinic-safety-card__text,
.clinic-painless-card__text,
.clinic-tour-card__text,
.clinic-standards__item p,
.clinic-standards__item li,
.recruit-benefits p,
.reservation-policy__rules p,
.reservation-checks span,
.reservation-flow__grid p,
.post-card p,
.post-treatment-links > p:not(.post-treatment-links__label),
.treatment-menu__text small,
.treatment-compact-nav__heading > a,
.treatment-compact-nav__item strong,
.treatment-blog-links__heading > span,
.treatment-blog-links__all,
.first-note p,
.first-prepare li,
.first-flow__body p,
.first-policy__intro p,
.first-policy__rules p,
.first-policy__closing,
.whitening-steps p,
.whitening-contact__inner > p,
.mouth-benefit-grid p,
.mouth-faq p,
.implant-compare li,
.clinic-video-library__lead,
.access-stations p,
.access-stations small {
  font-size: 16px !important;
}

@media (max-width: 767px) {
  :where(
    .general-page,
    .kids-page,
    .implant-page,
    .whitening-page,
    .ortho-page,
    .mouth-page,
    .perio-page,
    .preventive-page,
    .esthetic-page,
    .treatment-page,
    .lower-page--first,
    .lower-page--clinic,
    .lower-page--price,
    .lower-page--recruit,
    .access-page,
    .recruit-page
  ) {
    font-size: 16px !important;
  }
}

/* 下層ページのファーストビューは、背景を隠さずタイトルだけを表示。 */
body:not(.home) .global-page-hero__title > p {
  animation: kon-page-hero-title-in .9s ease both;
}

body:not(.home) .global-page-hero__title > h1,
body:not(.home) .global-page-hero__title > .global-page-hero__page-title {
  animation: kon-page-hero-title-in 1s cubic-bezier(.2, .65, .3, 1) .1s both;
}

@keyframes kon-page-hero-title-in {
  from {
    opacity: 0;
    transform: translate3d(0, 9px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__catch h1,
  .home-hero__catch > p,
  body:not(.home) .global-page-hero__title > p,
  body:not(.home) .global-page-hero__title > h1,
  body:not(.home) .global-page-hero__title > .global-page-hero__page-title {
    animation: none;
  }
}

/* Mobile medical menu: give the long mouthpiece label breathing room. */
@media (max-width: 767px) {
  .treatment-compact-nav__item--mouthpiece {
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 5px !important;
    padding: 10px 18px !important;
  }

  .treatment-compact-nav__item--mouthpiece .treatment-compact-nav__icon {
    width: 22px;
    height: 22px;
  }

  .treatment-compact-nav__item--mouthpiece .treatment-compact-nav__icon svg {
    width: 18px;
    height: 18px;
  }

  .treatment-compact-nav__item--mouthpiece strong {
    font-size: 14px !important;
    line-height: 1.3 !important;
    letter-spacing: -.03em !important;
    white-space: nowrap;
  }

  @media (max-width: 360px) {
    .treatment-compact-nav__item--mouthpiece {
      grid-template-columns: 18px minmax(0, 1fr) !important;
      gap: 3px !important;
      padding-inline: 6px !important;
    }

    .treatment-compact-nav__item--mouthpiece .treatment-compact-nav__icon {
      width: 18px;
      height: 18px;
    }

    .treatment-compact-nav__item--mouthpiece .treatment-compact-nav__icon svg {
      width: 16px;
      height: 16px;
    }

    .treatment-compact-nav__item--mouthpiece strong {
      font-size: 12px !important;
    }
  }

  body.home .section-heading--compact {
    margin-bottom: 24px !important;
  }

  body:not(.home) .section-heading,
  :is(.clinic-heading, .first-heading, .recruit-heading, .reservation-heading, .access-section-heading, .treatment-section__heading, .treatment-blog-links__heading) {
    margin-bottom: 24px !important;
  }

  body:not(.home) .section-heading__en { margin-bottom: 4px !important; font-size: 10px !important; }
  body:not(.home) .section-heading__lead { font-size: 13px !important; line-height: 1.55 !important; letter-spacing: .035em !important; }

  :is(.section-heading__title, .clinic-heading__title, .first-heading h2, .recruit-heading h2, .reservation-heading h2, .access-section-heading h2, .treatment-section__heading h2, .treatment-blog-links__heading h2) {
    font-size: clamp(22px, 6.4vw, 26px) !important;
    line-height: 1.35 !important;
  }

  body .treatment-blog-links__heading h2 {
    font-size: 22px !important;
    letter-spacing: 0 !important;
  }

  :is(.clinic-heading__lead, .first-heading > span, .recruit-heading > span, .reservation-heading > span, .access-section-heading > span, .treatment-section__heading > span, .treatment-blog-links__heading > span) {
    margin-top: 7px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  /* 医院ブログ一覧は、日付・タイトル・矢印を1行に収めて高さを抑える。 */
  .home-blog .home-update-title--row {
    padding: 18px 20px 14px;
  }

  .home-blog .home-update-title h3 {
    font-size: 18px;
  }

  .home-blog .home-update-title--row > a {
    font-size: 11px;
  }

  .home-blog__list {
    padding: 0 20px 20px;
  }

  .home-blog__list a {
    grid-template-columns: 70px minmax(0, 1fr) 12px;
    gap: 8px;
    min-height: 50px;
    padding: 7px 0;
  }

  .home-blog__list time {
    grid-column: auto;
    font-size: 10px;
    letter-spacing: .025em;
    white-space: nowrap;
  }

  .home-blog__list a span {
    min-width: 0;
    font-size: 12px !important;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-blog__list a b {
    font-size: 12px;
  }

  /* お知らせはモバイルでは抜粋を省き、要点だけを短く見せる。 */
  .home-notice__body p {
    display: none !important;
  }

  .home-notice__article {
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 5px 10px;
    padding: 18px 20px 20px;
  }

  .home-notice__article time {
    font-size: 10px;
  }

  .home-notice__body h4 {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
  }

  .home-notice .home-updates__arrow {
    font-size: 18px;
  }
}

/* Treatment hero headings: balance phrases and cap oversized desktop type. */
.perio-hero__copy h1,
.ortho-hero__grid h2,
.implant-hero__copy h1 {
  font-size: clamp(36px, 3.1vw, 44px) !important;
  line-height: 1.5 !important;
}

.lower-page--clinic .clinic-promise-card__title {
  font-size: clamp(18px, 1.45vw, 21px) !important;
  line-height: 1.55 !important;
  text-wrap: balance;
}

.recruit-page--role .recruit-copy h2 {
  font-size: clamp(28px, 2.15vw, 31px) !important;
  line-height: 1.6 !important;
}

.recruit-page--role .recruit-feature h2 {
  font-size: clamp(30px, 2.5vw, 36px) !important;
  line-height: 1.5 !important;
}

.perio-hero__copy h1,
.ortho-hero__grid h2 {
  text-wrap: balance;
}

.perio-hero__copy h1 br,
.ortho-hero__grid h2 br {
  display: none;
}

@media (max-width: 767px) {
  .perio-hero__copy h1 {
    font-size: clamp(31px, 9vw, 36px) !important;
  }

  .ortho-hero__grid h2 {
    font-size: 28px !important;
  }

  .ortho-food h3 {
    margin-top: 22px !important;
  }

  /* Keep desktop-scale section spacing from carrying into narrow screens. */
  :is(
    .kids-flow,
    .esthetic-flow,
    .implant-column,
    .mouth-video-section,
    .mouth-simulation,
    .mouth-go-plus,
    .mouth-suresmile,
    .mouth-compare,
    .mouth-retreatment,
    .mouth-cases,
    .preventive-flow
  ) {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .price-section {
    padding-bottom: 56px !important;
  }

  body.home .features {
    padding-top: 64px !important;
  }

  body.home .home-updates {
    padding-bottom: 58px !important;
  }

  .implant-hero__copy h1 {
    font-size: 30px !important;
  }

  .implant-flow__header {
    gap: 18px !important;
    margin-bottom: 30px !important;
  }

  .implant-flow__header h2 {
    margin-bottom: 0 !important;
  }

  /* Only tighten heading pairs whose original mobile spacing is still oversized. */
  :is(
    .kids-label,
    .esthetic-label,
    .esthetic-overline,
    .implant-label,
    .whitening-label,
    .whitening-overline,
    .concept-en,
    .first-kicker,
    .kids-en,
    .mouth-hero .mouth-label,
    .mouth-intro .mouth-label,
    .mouth-retreatment .mouth-label,
    .preventive-ec .preventive-label,
    .preventive-next .preventive-label
  ):has(+ :is(h1, h2, h3, h4)) {
    margin-bottom: 0 !important;
  }

  :is(
    .kids-label,
    .esthetic-label,
    .esthetic-overline,
    .implant-label,
    .whitening-label,
    .whitening-overline,
    .concept-en,
    .first-kicker,
    .kids-en,
    .mouth-hero .mouth-label,
    .mouth-intro .mouth-label,
    .mouth-retreatment .mouth-label,
    .preventive-ec .preventive-label,
    .preventive-next .preventive-label
  ) + :is(h1, h2, h3, h4) {
    margin-top: clamp(4px, 1.5vw, 6px) !important;
  }

  /* This intro uses a 32px grid gap, so offset only the label-to-title space. */
  .reservation-intro > .reservation-label {
    margin-bottom: -31px !important;
  }

  .lower-page--clinic .clinic-promise-card__title {
    font-size: 20px !important;
  }

  .recruit-page--role .recruit-copy h2 {
    font-size: 26px !important;
  }

  .recruit-page--role .recruit-feature h2 {
    font-size: 28px !important;
  }
}
/* Avoid top-only arch crops on treatment photography. */
.esthetic-consult__photo,
.perio-hero img {
  border-radius: 18px;
}

@media (max-width: 800px) {
  .general-manifesto__grid {
    grid-template-areas:
      "title"
      "photo"
      "copy";
    gap: 30px;
  }

  .general-manifesto__title {
    padding-bottom: 18px;
  }
}

/* Keep staff-led photography compact on mobile only. */
@media (min-width: 801px) {
  .recruit-hero,
  .recruit-role-hero {
    grid-template-columns: minmax(0, 1.3fr) minmax(360px, .7fr);
    min-height: 520px;
  }

  .recruit-hero__visual,
  .recruit-role-hero > img {
    min-height: 520px;
  }
}

@media (max-width: 800px) {
  .whitening-hero__photo,
  .mouth-hero figure,
  .general-hero__photo,
  .implant-hero__photo,
  .preventive-hero__grid figure,
  .esthetic-original-photo,
  .esthetic-consult__photo,
  .kids-family__photo,
  .treatment-photo--intro,
  .recruit-hero__visual,
  .recruit-role-hero > img,
  .recruit-feature__grid > img,
  .first-photo:has(img[alt*="カウンセリング"]) {
    width: 72%;
    max-width: 420px;
    margin-inline: auto;
    justify-self: center;
  }

  .recruit-hero__visual,
  .recruit-role-hero > img {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
  }
}

/* Final desktop sizing shared by every illustrated treatment journey. */
@media (min-width: 801px) {
  :is(.general-flow__head, .kids-flow__heading, .esthetic-flow__heading, .preventive-flow__heading),
  :is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) {
    max-width: 1040px;
  }

  :is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) li,
  :is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) li:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 42px;
    min-height: 250px;
    padding: 26px 30px;
  }

  :is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) figure {
    width: 360px;
    max-width: 360px;
    justify-self: end;
    overflow: hidden;
    border-radius: 16px;
  }

  :is(.general-flow__list, .kids-flow__list, .esthetic-flow__list, .preventive-flow__list) figure img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
  }
}