/* Home column link: a prominent but calm clinic-style card. */
html[lang="ja"] body .column-banner-card {
  position: relative;
  overflow: hidden;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  width: min(750px, 100%);
  min-height: 204px;
  padding: 42px 82px 39px 42px;
  border: 1px solid rgba(120, 180, 230, 0.42);
  border-left: 5px solid #78b4e6;
  border-radius: 18px;
  color: #667b88;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(249, 252, 255, 0.91) 51%, rgba(249, 252, 255, 0.20) 78%),
    url("/img/index/column-banner-clinic-20260827.webp") center center / cover no-repeat;
  box-shadow: 0 13px 32px rgba(74, 106, 125, 0.12);
  text-align: left;
  transform: none;
}

html[lang="ja"] body .column-banner-card::before {
  position: absolute;
  top: 25px;
  left: 42px;
  z-index: 1;
  content: "ORTHODONTIC COLUMN";
  color: rgba(82, 117, 141, 0.72);
  font-family: "Times New Roman", serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
}

html[lang="ja"] body .column-banner-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background: transparent;
}

html[lang="ja"] body .column-banner-card:hover,
html[lang="ja"] body .column-banner-card:focus-visible {
  border-color: rgba(78, 145, 199, 0.62);
  border-left-color: #4e91c7;
  box-shadow: 0 16px 34px rgba(74, 106, 125, 0.15);
  transform: translateY(-2px);
}

html[lang="ja"] body .column-banner-card__lead {
  position: relative;
  z-index: 1;
  color: #727b80;
  margin-top: 18px;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

html[lang="ja"] body .column-banner-card__title {
  position: relative;
  z-index: 1;
  color: #52758d;
  font-size: clamp(2.55rem, 4vw, 3.5rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: 0.06em;
}

/* Keep the compact navigation banner distinct from the homepage heading. */
html[lang="ja"] body .banner2 .column-banner-card {
  position: static;
  align-items: center;
  min-height: 104px;
  padding: 14px 18px;
  border: 1px solid rgba(120, 180, 230, 0.38);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(74, 106, 125, 0.06);
  text-align: center;
}

html[lang="ja"] body .banner2 .column-banner-card::before,
html[lang="ja"] body .banner2 .column-banner-card::after {
  display: none;
}

html[lang="ja"] body .banner2 .column-banner-card__lead {
  font-size: 1rem;
}

html[lang="ja"] body .banner2 .column-banner-card__title {
  font-size: clamp(1.7rem, 4vw, 2.2rem);
}

@media screen and (max-width: 599px) {
  html[lang="ja"] body .column-banner-card {
    gap: 4px;
    min-height: 190px;
    padding: 37px 45px 28px 23px;
    border-left-width: 4px;
    border-radius: 14px;
    background-position: 62% center;
  }

  html[lang="ja"] body .column-banner-card::before {
    top: 18px;
    left: 23px;
    font-size: 0.62rem;
  }

  html[lang="ja"] body .column-banner-card::after {
    inset: 0;
    background: transparent;
  }

  html[lang="ja"] body .column-banner-card__lead {
    margin-top: 10px;
    font-size: 1rem;
    letter-spacing: 0.04em;
  }

  html[lang="ja"] body .column-banner-card__title {
    font-size: 2.2rem;
  }

  html[lang="ja"] body .banner2 .column-banner-card {
    position: static;
    min-height: 76px;
    padding: 11px 12px;
  }
}