@charset "utf-8";

/* Shared responsive guardrails for the site at 1024, 768, 414 and 375px. */
*,
*::before,
*::after { box-sizing: border-box; }

img,
iframe,
video { max-width: 100%; }

@media (max-width: 1100px) {
  .header_inner--redesign .header_logo { width: 150px; padding-inline: 12px; }
  .header_nav--drawer .header_menu-link { gap: 4px; padding-inline: 3px; font-size: 12px; }
  .header-reservation-actions--desktop .header_menu-link-contact { width: 82px; gap: 4px; padding-inline: 4px; }
  .header-reservation-actions--desktop .header_contact-icon { width: 17px; height: 17px; }
  .header-reservation-actions--desktop p { font-size: 12px; }

  .guide-page__inner { width: min(100% - 40px, 960px); }
  .guide-concerns__grid { gap: 22px; }
  .guide-concern { gap: 14px; }
  .guide-concern__icon { flex-basis: 84px; width: 84px; height: 84px; }
  .guide-promise { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding-inline: 18px; }
  .guide-promise__image { width: 110px; height: 110px; }

  .information-page__inner { width: min(100% - 40px, 900px); }
  .information-gallery__grid { gap: 18px 14px; }

  .price-page__layout { grid-template-columns: minmax(170px, 210px) minmax(0, 1fr); gap: 32px; width: min(100% - 40px, 1120px); }
  .price-table__row { grid-template-columns: minmax(0, 1.4fr) minmax(120px, .8fr); }
}

@media (max-width: 900px) and (min-width: 768px) {
  .header { height: 64px; }
  .header_inner--redesign { height: 64px; padding-inline: 12px; }
  .header_inner--redesign .header_logo { width: min(42vw, 180px); padding: 0; }
  .header_inner--redesign .header_logo img { width: 100%; max-width: none; max-height: 48px; object-fit: contain; }
  .header-reservation-actions--desktop { display: none; }
  .header-reservation-actions--bar { position: fixed; top: 0; right: clamp(56px, 11.5vw, 90px); z-index: 8010; display: flex; height: 64px; }
  .header-reservation-actions--bar .header_menu-link-contact { flex-direction: column; gap: 2px; width: clamp(72px, 16.5vw, 130px); height: 100%; padding: 5px 3px; }
  .header-reservation-actions--bar .header_contact-icon { width: 23px; height: 23px; }
  .header-reservation-actions--bar p { font-family: var(--top-serif, serif); font-size: 12px; }
  .header-menu-toggle { position: fixed; top: 0; right: 0; z-index: 8011; display: flex; width: clamp(56px, 11.5vw, 90px); height: 64px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0; background: #fff; }
  .header-menu-toggle > div { position: absolute; left: 50%; width: 28px; height: 2px; background: #a18b1e; transform: translateX(-50%); }
  .header-menu-toggle > div:first-child { top: calc(50% - 5px); }
  .header-menu-toggle > div:last-child { top: calc(50% + 5px); }
  .header-menu-toggle[aria-expanded="true"] { visibility: hidden; }
  .header-menu-close { position: fixed; top: 0; right: clamp(144px, 33vw, 260px); z-index: 8031; display: block; width: clamp(52px, 11.5vw, 90px); height: 64px; }
  .header_nav--drawer { position: fixed; inset: 0; z-index: 8020; display: block; width: 100%; height: 100vh; height: 100dvh; overflow-x: hidden; overflow-y: auto; padding: 96px 10vw 48px; background: #fff; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(100%); transition: transform .3s ease, opacity .3s ease, visibility .3s ease; }
  .header_nav--drawer.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }
  .header_nav--drawer .header_menu { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; height: auto; }
  .header_nav--drawer .header-menu-item { display: block; width: 100%; flex: none; }
  .header_nav--drawer .header_menu-link { display: flex; justify-content: flex-start; width: 100%; min-height: 32px; height: auto; padding: 8px 0; color: #a18b1e; font-size: clamp(19px, 2.7vw, 24px) !important; line-height: 1.5; text-align: left; white-space: normal; }
  .header_nav--drawer .header_menu-dot { display: none; }
  .header-menu-item--medical { margin-top: 12px; }
  .header-mega-menu { position: static; display: flex; flex-direction: column; gap: 0; width: 100%; padding: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .header-mega__mobile-heading { display: block; }
  .header-mega-toggle { display: block; width: 100%; padding: 17px 48px 17px 0; border-bottom: 1px solid #777; color: #a18b1e; font-size: 18px; }
  .header-mega-links { display: none; flex-direction: column; gap: 0; padding: 7px 0 12px 18px; }
  .header-mega-group.is-open .header-mega-links { display: flex; }
  .header-mega-links a { padding: 9px 0; color: #404040; font-size: 16px; }
  body.header-menu-open { overflow: hidden; }
  body.header-menu-open .header-reservation-actions--bar { display: none; }

  .price-page__layout { display: block; width: min(100% - 48px, 760px); padding-top: 48px; }
  .price-page__sidebar { position: static; max-height: none; overflow: visible; margin-bottom: 40px; padding: 0; }
  .price-page__category-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  .price-page__category + .price-page__category { margin-top: 0; }
  .price-page__category-links a { overflow-wrap: anywhere; }
  .price-page__main { width: 100%; }
}

@media (max-width: 767px) {
  html,
  body { max-width: 100%; overflow-x: clip; }

  .header_inner--redesign .header_logo { width: min(42vw, 180px); padding: 0; }
  .header_inner--redesign .header_logo img { display: block; width: 100%; max-width: none; max-height: 48px; object-fit: contain; }

  .guide-page__inner,
  .guide-page__inner--narrow,
  .guide-page__inner--faq,
  .information-page__inner { width: calc(100% - 32px); }
  .guide-page p,
  .information-page p,
  .message-page p,
  .access-page p,
  .price-page p { overflow-wrap: anywhere; word-break: normal; }

  .guide-concerns__grid,
  .guide-promises__grid,
  .information-gallery__featured,
  .information-gallery__grid { min-width: 0; }
  .guide-flow__item,
  .guide-flow__item > div,
  .guide-faq__question,
  .guide-faq__answer,
  .information-overview__value,
  .price-page__main { min-width: 0; }

  .information-anchor-nav { width: 100%; }
  .information-anchor-nav a { min-width: 0; overflow-wrap: anywhere; }
  .information-anchor-nav a > p { min-width: 0; }

  .price-page__layout { display: block; width: calc(100% - 32px); padding-top: 32px; }
  .price-page__sidebar { display: block; position: static; max-height: none; overflow: visible; margin-bottom: 32px; padding: 0; }
  .price-page__category-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .price-page__category { min-width: 0; }
  .price-page__category-links { grid-template-columns: minmax(0, 1fr); }
  .price-page__category-links a { min-width: 0; min-height: 48px; overflow-wrap: anywhere; }
  .price-table { min-width: 0; }
  .price-table__row { grid-template-columns: minmax(0, 1fr) minmax(88px, .7fr); }
  .price-table__row > div,
  .price-table__row > p { min-width: 0; overflow-wrap: anywhere; }

  .access-page__content { width: calc(100% - 32px); }
  .access-info__row { min-width: 0; }
  .access-gallery__layout { min-width: 0; }
}

@media (max-width: 420px) {
  .header_inner--redesign { padding-inline: 8px; }
  .header_inner--redesign .header_logo { width: min(40vw, 150px); }
  .header-reservation-actions--bar .header_menu-link-contact { width: clamp(68px, 18vw, 76px); }

  .guide-intro { padding-inline: 16px; }
  .guide-intro__title { max-width: calc(100% - 40px); }
  .guide-intro__title::before { left: -19px; }
  .guide-intro__title::after { right: -19px; }
  .guide-flow__item { grid-template-columns: minmax(92px, 30%) minmax(0, 1fr); gap: 12px; }
  .guide-flow__item img { width: 100%; }
  .guide-faq__item { padding-inline: 14px; }
  .guide-faq__question { padding-right: 28px; padding-left: 32px; }
  .guide-faq__answer { padding-left: 32px; }

  .information-overview__row { grid-template-columns: 68px minmax(0, 1fr); gap: 8px; }
  .information-anchor-nav a { flex-basis: 100%; }

  .price-page__layout { width: calc(100% - 28px); }
  .price-page__category-list { grid-template-columns: minmax(0, 1fr); }
  .price-page__category-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-page__category-links a { padding: 9px 8px; font-size: 12px; }
  .price-page__fee-title { overflow-wrap: anywhere; }
  .price-table__row { grid-template-columns: minmax(0, 1fr) minmax(78px, .72fr); }
  .price-table__row > div,
  .price-table__row > p { padding-inline: 6px; font-size: 12px; }

  .message-page__greeting { padding-inline: 16px; }
  .message-page__summary { padding: 18px 16px; }
  .message-page__credentials { padding-inline: 16px; }

  .access-page__content { width: calc(100% - 28px); }
  .access-info__row { grid-template-columns: 36px minmax(0, 1fr); gap: 9px; }
  .access-info__icon { width: 34px; height: 34px; }
  .access-gallery__layout { grid-template-columns: minmax(0, 1fr) 58px; gap: 5px; }
}


/* Mobile layouts: portrait hero, readable column categories, compact feature headings */
@media (max-width: 767px) {

  body .top-fv .top-fv__slider {
    top: 20% !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: 50vh !important;
    height: 50svh !important;
    aspect-ratio: auto !important;
  }
  body .top-fv .top-fv__slider > .top-fv__slide,
  body .top-fv .top-fv__slider > .top-fv__slide > .top-fv__visual {
    height: 100% !important;
    min-height: 0 !important;
  }
  body .top-fv .top-fv__slider > .top-fv__slide > .top-fv__visual > img {
    object-fit: cover !important;
    object-position: center 34% !important;
  }
  body .top-fv .top-fv__slider .top-fv__visual::after {
    content: "" !important;
    position: absolute !important;
    z-index: 2;
    inset: 0;
    display: block !important;
    background: linear-gradient(180deg, rgba(253, 252, 248, 0) 38%, rgba(253, 252, 248, .18) 62%, rgba(253, 252, 248, .72) 100%);
    pointer-events: none;
  }
  body .top-fv .top-fv__copy {
    left: 6% !important;
    bottom: 9% !important;
    width:fit-content!important;
    text-align: left !important;
  }
  body .top-fv .top-fv__eyebrow,
  body .top-fv .top-fv__brand { text-align: left !important; }
  body .top-fv .top-fv__brand { font-size: clamp(40px, 11vw, 56px) !important; }
  body .top-fv .top-fv__tagline { font-size: 16px !important; }

  .top-features .top-feature__title {
    min-height: 0;
    font-size: 18px !important;
    line-height: 1.5;
  }

  .medical-column__category,
  .medical-column-detail .medical-news__category { display: block; width: 100%; }
  .medical-column__category > .webgene-blog,
  .medical-column-detail .medical-news__category > .webgene-blog {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
  }
  .medical-column__category .webgene-item,
  .medical-column-detail .medical-news__category .webgene-item {
    flex: 0 1 auto;
    width: auto !important;
    max-width: 100%;
  }
  .medical-column .sideLink,
  .medical-column-detail .sideLink {
    display: inline-flex;
    width: auto !important;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}


/* Tablet: keep the price sidebar available while scrolling and prevent header overflow */
@media (min-width: 768px) and (max-width: 1024px) {
  .price-page__layout {
    display: grid !important;
    grid-template-columns: minmax(160px, 200px) minmax(0, 1fr) !important;
    align-items: start;
    gap: 24px !important;
  }
  .price-page__sidebar {
    position: sticky !important;
    top: 84px !important;
    align-self: start;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    margin: 0 !important;
  }
  .price-page__category-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (min-width: 901px) and (max-width: 1024px) {
  .header_nav--drawer { display: none !important; }
}


/* Tablet header, centered footer navigation, and FV title spacing */
@media (min-width: 768px) and (max-width: 1024px) {
  .header, .header_inner--redesign { height: 64px; }
  .header_inner--redesign { align-items: center; padding-inline: 16px; }
  .header_inner--redesign .header_logo { flex: 0 0 auto; width: min(28vw, 190px); margin-right: auto; padding: 0; }
  .header-reservation-actions--desktop { display: none !important; }
  .header-reservation-actions--bar { position: fixed; top: 0; right: 64px; z-index: 8030; display: flex !important; height: 64px; }
  .header-reservation-actions--bar .header_menu-link-contact { display: flex; flex-direction: column; width: 92px; height: 64px; gap: 2px; padding: 5px 3px; }
  .header-reservation-actions--bar .header_contact-icon { width: 21px; height: 21px; }
  .header-reservation-actions--bar p { font-size: 12px; }
  .header-menu-toggle { position: fixed; top: 0; right: 0; z-index: 8032; display: flex !important; width: 64px; height: 64px; align-items: center; justify-content: center; background: #fff; }
  .header-menu-toggle > div { position: absolute; left: 50%; width: 28px; height: 2px; background: #a18b1e; transform: translateX(-50%); }
  .header-menu-toggle > div:first-child { top: calc(50% - 5px); }
  .header-menu-toggle > div:last-child { top: calc(50% + 5px); }
  .header_nav--drawer { position: fixed; inset: 0; z-index: 8020; display: block !important; width: 100%; height: 100dvh; overflow-x: hidden; overflow-y: auto; padding: 96px 10vw 48px; background: #fff; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(100%); }
  .header_nav--drawer.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }
  .header_nav--drawer .header_menu { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; height: auto; }
  .header_nav--drawer:not(.is-open) .header-menu-item { display: none !important; }
  .header_nav--drawer.is-open .header-menu-item { display: block !important; width: 100%; flex: none; }
  .header_nav--drawer .header_menu-link { display: flex; justify-content: flex-start; width: 100%; min-height: 42px; height: auto; padding: 8px 0; color: #a18b1e; font-size: 22px !important; line-height: 1.5; text-align: left; white-space: normal; }
  .header_nav--drawer .header_menu-dot { display: none; }
  .header_nav--drawer .header-mega-menu { position: static !important; display: flex !important; flex-direction: column; width: 100%; padding: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .header_nav--drawer .header-mega__mobile-heading, .header_nav--drawer .header-mega-toggle { display: block; }
  .header_nav--drawer .header-mega-group { padding: 0 0 10px; border: 0; border-bottom: 1px solid #777; }
  .header_nav--drawer .header-mega-toggle { width: 100%; padding: 16px 32px 12px 0; color: #a18b1e; font-size: 17px; text-align: left; }
  .header_nav--drawer .header-mega-links { display: none; flex-direction: column; gap: 0; padding: 6px 0 12px 16px; }
  .header_nav--drawer .header-mega-group.is-open .header-mega-links { display: flex; }
  .header_nav--drawer .header-mega-links a { padding: 7px 0; font-size: 16px; white-space: normal; }
  .header_nav--drawer .header-menu-close { position: fixed; top: 0; right: 0; z-index: 8033; display: block; width: 64px; height: 64px; }
  .header_nav--drawer.is-open .header-reservation-actions--drawer { position: fixed; top: 0; right: 64px; z-index: 8032; display: flex; height: 64px; }
  .header-reservation-actions--drawer .header_menu-link-contact { flex-direction: column; width: 92px; height: 64px; gap: 2px; padding: 5px 3px; }
  body.header-menu-open .header-reservation-actions--bar { display: none !important; }

  .footer-main__links { width: min(100%, 520px); margin-inline: auto; gap: 22px 24px; }
  .footer-main__medical-grid { gap: 18px 24px; }

  body .top-fv > h1.top-fv__seo-title { top: 14px !important; right: 16px !important; width: calc(100% - 32px) !important; font-size: 11px !important; line-height: 1.3 !important; }
}

/* Center arrow artwork in every circular button icon. */
:root {
  --circle-arrow-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2 8 6 4 10' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --circle-arrow-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2 8 6 4 10' fill='none' stroke='%23A18B1E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --circle-arrow-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2 8 6 4 10' fill='none' stroke='%23319A2E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --circle-arrow-down-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4 6 8 10 4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --circle-arrow-down-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4 6 8 10 4' fill='none' stroke='%23A18B1E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body .top-fv .top-fv__reserve a::before,
.top-news .top-news__more::before,
.top-greeting__link::before,
.top-feature__link::before,
.top-medical-card::before,
.top-column__category::before,
.top-column__more::before,
.newsDetail-back a::before,
.columnDetail-back__link::before {
  background-image: var(--circle-arrow-white) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 9px 9px !important;
}
body .top-fv .top-fv__reserve a::after,
.top-news .top-news__more::after,
.top-greeting__link::after,
.top-feature__link::after,
.top-medical-card::after,
.top-column__category::after,
.top-column__more::after,
.newsDetail-back a::after,
.columnDetail-back__link::after {
  content: none !important;
}
.newsDetail-back a:hover::before,
.columnDetail-back__link:hover::before {
  background-image: var(--circle-arrow-gold) !important;
}

.btn__arrow,
.medical-card__arrow,
.footer-access__more::after,
.top-button::after,
.top-link-block::after {
  background-image: var(--circle-arrow-white) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 9px 9px !important;
}
.btn__arrow::before,
.medical-card__arrow::before { content: none !important; }
.footer-access__more::after,
.top-button::after,
.top-link-block::after { content: "" !important; }

.medical-anchor-nav a::after {
  background-image: var(--circle-arrow-down-white) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 9px 9px !important;
}
.medical-anchor-nav a::before { content: none !important; }
.medical-anchor-nav a:hover::after {
  background-image: var(--circle-arrow-down-gold) !important;
}

.footer-reservation__arrow {
  background-image: var(--circle-arrow-gold) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 9px 9px !important;
}
.footer-reservation__button:first-child .footer-reservation__arrow {
  background-image: var(--circle-arrow-green) !important;
}
.footer-reservation__arrow::before { content: none !important; }

/* Square mobile FV photo, positioned from one fifth of the viewport. */
@media (max-width: 767px) {
  body .top-fv .top-fv__slider { top: 25% !important; border-radius: 0 !important; clip-path: none !important; }
  body .top-fv .top-fv__slider > .top-fv__slide,
  body .top-fv .top-fv__slider > .top-fv__slide > .top-fv__visual,
  body .top-fv .top-fv__slider > .top-fv__slide > .top-fv__visual > img { border-radius: 0 !important; clip-path: none !important; }
}


/* Keep desktop reservation buttons readable from 1025px to 1100px. */
@media (min-width: 1025px) and (max-width: 1100px) {
  .header-reservation-actions--desktop .header_menu-link-contact {
    flex-direction: column;
    gap: 2px;
    padding: 3px 2px;
  }
  .header-reservation-actions--desktop .header_menu-link-contact p {
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .header-reservation-actions--desktop .header_contact-icon {
    width: 19px;
    height: 19px;
  }
}

/* Place treatment articles before their navigation on phones. */
@media (max-width: 767px) {
  .medical-detail__inner {
    display: flex;
    flex-direction: column;
  }
  .medical-detail__inner > .medical-detail__main { order: 0; }
  .medical-detail__inner > .medical-sidebar { order: 1; }
}

/* Indicate horizontal scrolling for wide tables in article content. */
.article-table-scroll-hint[hidden] { display: none !important; }
@media (max-width: 767px) {
  .webgene-item table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .article-table-scroll-hint:not([hidden]) {
    display: block;
    margin: 12px 0 8px;
    color: #a48d12;
    font-size: 12px;
    line-height: 1.5;
    text-align: right;
  }
}

/* Hide the category links in the TOP column section on phones. */
@media (max-width: 767px) {
  .top-column__categories { display: none !important; }
}

/* News article title on phones. */
@media (max-width: 767px) {
  .newsDetailTit { font-size: 24px !important; }
}

/* Keep both greeting portraits arched when their images are replaced. */
.top-greeting__image img,
.message-page__portrait {
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
}