@charset "UTF-8";

/*
 * Japanese typography and mobile fixed-navigation refinements.
 * Loaded after each page's existing CSS so the same rules apply site-wide.
 */
html[lang="ja"] body {
  line-break: strict;
}

html[lang="ja"] body :where(p, li, dt, dd, th, td, figcaption) {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: pretty;
}

html[lang="ja"] body :where(h1, h2, h3, h4, h5, h6, .page-heading-label) {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: balance;
}

html[lang="ja"] body :where(.section-photo figcaption, .news_list .txt small) {
  text-wrap: balance;
}

html[lang="ja"] body .kodomo-heading-line {
  display: block;
  text-wrap: balance;
}

html[lang="ja"] body .nowrap-term {
  white-space: nowrap;
}

html[lang="ja"] body :where(
  .home-line-contact__button,
  .column-button,
  .btn a,
  .bottom_botton a,
  .news_links a,
  .seo-next-links a,
  .treatment-local-guide__links a
) {
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: balance;
}

html[lang="ja"] body main :where(th, td) {
  overflow-wrap: break-word;
}

html[lang="ja"] body main :where(a[href^="http"], a[href^="mailto:"], code) {
  overflow-wrap: anywhere;
}

@supports (word-break: auto-phrase) {
  html[lang="ja"] body :where(p, li, dt, dd, figcaption, h1, h2, h3, h4, h5, h6, .page-heading-label) {
    word-break: auto-phrase;
  }
}

@media screen and (max-width: 599px) {
  html[lang="ja"] {
    scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  html[lang="ja"] header .txt {
    box-sizing: border-box;
    width: calc(100% - 74px);
    padding-right: 0;
  }

  /* Keep the homepage message at its original near-square size. */
  html[lang="ja"] body .mv .txt,
  html[lang="ja"] body .mv .txt p {
    white-space: nowrap;
    text-wrap: nowrap;
  }

  html[lang="ja"] body main :where(h1, h2, h3, h4, .page-heading-label),
  html[lang="ja"] body .align h2 {
    max-width: 100%;
    white-space: normal !important;
  }

  html[lang="ja"] body :where(.btn a, .bottom_botton a) {
    box-sizing: border-box;
    max-width: 100%;
    height: auto;
    min-height: 50px;
    padding: 10px 36px 10px 18px;
    line-height: 1.5;
  }

  html[lang="ja"] body .bottom_botton a::before {
    left: 18px;
  }

  /* Move the four clinic shortcuts away from headings and tables. */
  html[lang="ja"] header ul.cv {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed;
    top: auto;
    right: 0;
    bottom: env(safe-area-inset-bottom, 0px);
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: 0 -5px 18px rgba(65, 91, 110, 0.18);
    z-index: 999;
  }

  html[lang="ja"] header ul.cv li,
  html[lang="ja"] header ul.cv li:not(:last-child) {
    min-width: 0;
    margin: 0;
  }

  html[lang="ja"] header ul.cv li a {
    box-sizing: border-box;
    width: 100%;
    height: 64px;
    min-width: 0;
    padding: 5px 2px 4px;
    border-radius: 0;
    font-size: 1rem;
    line-height: 1.15;
    background: #FFA5AA;
  }

  html[lang="ja"] header ul.cv li:not(:last-child) a {
    border-right: 1px solid rgba(255, 255, 255, 0.5);
  }

  html[lang="ja"] header ul.cv li a::before {
    margin-bottom: 3px;
  }

  html[lang="ja"] body .sitemap .copy {
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  }

  html[lang="ja"] body .faqchat_btn {
    right: 8px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
  }

  html[lang="ja"] body .faqchat_btn_text {
    display: none;
  }

  html[lang="ja"] body .faqchat_btn_icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  html[lang="ja"] body .faqchat_panel {
    bottom: calc(132px + env(safe-area-inset-bottom, 0px));
    max-height: min(68vh, 640px);
    max-height: min(68dvh, 640px);
  }

  /* Keep the floating FAQ circle away from the LINE banner copy on the home page. */
  html[lang="ja"] body .bnr .line a {
    padding-right: 58px;
  }

  /* Decorative characters should not float over headings on small screens. */
  html[lang="ja"] body :where(.kodomo-scroll-friends, .kids-scroll-friends) {
    display: none;
  }

  /* Restore the width that was previously reserved for the right shortcut rail. */
  html[lang="ja"] body :where(.news_area--seo, .home-line-contact) {
    box-sizing: border-box;
    width: 90vw;
    max-width: 90vw;
    margin-right: auto;
    margin-left: auto;
  }

  html[lang="ja"] body .local-seo .content,
  html[lang="ja"] body .treatment-local-guide .content {
    box-sizing: border-box;
    width: 90vw;
    max-width: 90vw;
    margin-right: auto;
    margin-left: auto;
  }

  html[lang="ja"] body .home-photo-carousel {
    box-sizing: border-box;
    width: 90vw;
    max-width: 90vw;
    margin-right: auto;
    margin-left: auto;
  }

  html[lang="ja"] body #main #innai ~ :where(p, h3) {
    max-width: 100%;
  }

  html[lang="ja"] body main .kodomo-article-page {
    box-sizing: border-box;
    width: 90vw;
    max-width: 90vw;
    margin-right: auto;
    margin-left: auto;
  }

  html[lang="ja"] body .column-main h1 {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  html[lang="ja"] body .column-main .pankuzu {
    padding-right: 0;
  }

  html[lang="ja"] body .pankuzu li:last-child {
    text-wrap: balance;
  }

  html[lang="ja"] body .contact .box :where(.min, .contact-line-note) {
    word-break: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  html[lang="ja"] body main section.kodomo-article-page > h2:not(.no-style) {
    overflow-wrap: break-word;
    word-break: normal;
    text-wrap: balance;
  }

  /* Keep the two carefully paired child-orthodontic headings on two clean lines. */
  html[lang="ja"] body main .kodomo-article-page .entry-content h2 > .s1 {
    font-size: 1.7rem;
    letter-spacing: 0;
  }

  html[lang="ja"] body main .kodomo-article-page .entry-content h2 {
    padding-right: 1.2rem;
    padding-left: 1.2rem;
  }

  /* Give every homepage case card the full usable mobile width. */
  html[lang="ja"] body .case#guideline .case-slider .background_case {
    box-sizing: border-box;
    flex: 0 0 calc(100vw - 32px);
    width: calc(100vw - 32px);
    max-width: 390px;
    padding: 2rem 1.6rem;
  }

  html[lang="ja"] body .case#guideline .case-table th,
  html[lang="ja"] body main section[id^="case"] > table th {
    word-break: keep-all;
    overflow-wrap: normal;
  }

  /* Keep four- and five-column comparison tables readable instead of crushing every column. */
  html[lang="ja"] body .table-contents:has(table.price tr:first-child > :nth-child(4)) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  html[lang="ja"] body .table-contents:has(table.price tr:first-child > :nth-child(4))::before {
    content: "横にスワイプしてご覧いただけます";
    display: block;
    margin: 0 0 8px;
    color: #5f7f93;
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: center;
  }

  html[lang="ja"] body .table-contents:has(table.price tr:first-child > :nth-child(4)) table.price {
    min-width: 700px;
  }

  html[lang="ja"] body .table-contents:has(table.price tr:first-child > :nth-child(4)) table.price th {
    width: 100px !important;
    min-width: 100px;
  }

  html[lang="ja"] body .table-contents:has(table.price tr:first-child > :nth-child(4)) table.price td {
    min-width: 150px;
  }

  html[lang="ja"] body table[id^="price-table"] th {
    width: 40% !important;
  }

  html[lang="ja"] body table[id^="price-table"] td {
    width: 60% !important;
  }
}

/* Tablet widths previously kept desktop-only fixed widths and crushed comparison tables. */
@media screen and (min-width: 600px) and (max-width: 768px) {
  html[lang="ja"],
  html[lang="ja"] body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  html[lang="ja"] body .content {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  html[lang="ja"] header .txt {
    box-sizing: border-box;
    width: calc(100% - 110px);
    padding-right: 0;
  }

  html[lang="ja"] header ul.cv {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed;
    top: auto;
    right: 0;
    bottom: env(safe-area-inset-bottom, 0px);
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: 0 -5px 18px rgba(65, 91, 110, 0.18);
    opacity: 1;
    pointer-events: auto;
    transform: none;
    z-index: 999;
  }

  html[lang="ja"] header ul.cv li,
  html[lang="ja"] header ul.cv li:not(:last-child) {
    min-width: 0;
    margin: 0;
    transform: none;
  }

  html[lang="ja"] header ul.cv li a {
    box-sizing: border-box;
    width: 100%;
    height: 64px;
    min-width: 0;
    padding: 5px 2px 4px;
    border-radius: 0;
    font-size: 1rem;
    line-height: 1.15;
    background: #FFA5AA;
  }

  html[lang="ja"] header ul.cv li:not(:last-child) a {
    border-right: 1px solid rgba(255, 255, 255, 0.5);
  }

  html[lang="ja"] header ul.cv li a::before {
    margin-bottom: 3px;
  }

  html[lang="ja"] body .sitemap .copy {
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  }

  html[lang="ja"] body .faqchat_btn {
    right: 10px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
  }

  html[lang="ja"] body .faqchat_btn_text {
    display: none;
  }

  html[lang="ja"] body .faqchat_btn_icon {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }

  html[lang="ja"] body .faqchat_panel {
    bottom: calc(140px + env(safe-area-inset-bottom, 0px));
    max-height: min(68vh, 640px);
    max-height: min(68dvh, 640px);
  }

  html[lang="ja"] body :where(.kodomo-scroll-friends, .kids-scroll-friends) {
    display: none;
  }

  html[lang="ja"] body .feature .wrap {
    width: 100%;
    max-width: 100%;
  }

  html[lang="ja"] body .feature .in {
    box-sizing: border-box;
    width: min(660px, calc(100% - 32px));
  }

  html[lang="ja"] body .align .in {
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 100%;
    padding-right: 32px;
    padding-left: 32px;
    justify-content: center;
    gap: 24px;
  }

  html[lang="ja"] body .align .in .box,
  html[lang="ja"] body .align .in .box:not(:nth-child(4n + 1)) {
    margin-left: 0;
  }

  html[lang="ja"] body .bnr {
    box-sizing: border-box;
    width: 100%;
    padding-right: 16px;
    padding-left: 16px;
    gap: 14px;
  }

  html[lang="ja"] body .bnr > div {
    flex: 1 1 0;
    min-width: 0;
  }

  html[lang="ja"] body .bnr > div:not(:last-child) {
    margin-right: 0;
  }

  html[lang="ja"] body .bnr a {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
  }

  html[lang="ja"] body .bnr .covid a,
  html[lang="ja"] body .bnr .line a {
    padding-left: 112px;
  }

  html[lang="ja"] body .bnr .covid a::before,
  html[lang="ja"] body .bnr .line a::before {
    left: 24px;
  }

  html[lang="ja"] body .bnr .min {
    font-size: 1.6rem;
  }

  html[lang="ja"] body .bnr small {
    font-size: 1.2rem;
  }

  html[lang="ja"] body .table-contents:has(table.price tr:first-child > :nth-child(4)) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  html[lang="ja"] body .table-contents:has(table.price tr:first-child > :nth-child(4))::before {
    content: "横にスワイプしてご覧いただけます";
    display: block;
    margin: 0 0 8px;
    color: #5f7f93;
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: center;
  }

  html[lang="ja"] body .table-contents:has(table.price tr:first-child > :nth-child(4)) table.price {
    min-width: 700px;
  }

  html[lang="ja"] body .table-contents:has(table.price tr:first-child > :nth-child(4)) table.price th {
    width: 100px !important;
    min-width: 100px;
  }

  html[lang="ja"] body .table-contents:has(table.price tr:first-child > :nth-child(4)) table.price td {
    min-width: 150px;
  }
}

@supports (word-break: auto-phrase) {
  @media screen and (max-width: 599px) {
    html[lang="ja"] body .contact .box :where(.min, .contact-line-note),
    html[lang="ja"] body main section.kodomo-article-page > h2:not(.no-style) {
      word-break: auto-phrase;
    }
  }
}