:root {
  --ink: #10213f;
  --muted: #5b6b83;
  --line: #dce5ee;
  --soft: #f6f9fc;
  --soft-blue: #edf7fb;
  --teal: #07899a;
  --teal-dark: #067383;
  --rose: #c9828d;
  --rose-soft: #fff5f5;
  --gold: #b78b45;
  --white: #fff;
  --shadow: 0 16px 40px rgba(16, 33, 63, .08);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "YuGothic", "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  line-height: 1.7;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.header-inner,
.container {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
}

.header-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0;
}

.logo span {
  color: var(--teal);
}

.logo small {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
}

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  font-weight: 700;
  color: #273954;
}

.nav a:hover {
  color: var(--teal);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.btn.primary {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.btn.primary:hover {
  background: var(--teal-dark);
}

.btn.rose {
  background: var(--rose);
  border-color: var(--rose);
  color: #fff;
}

.btn.outline {
  border-color: #9ac9d2;
  color: var(--teal-dark);
}

.hero {
  background: linear-gradient(180deg, #f8fbfd 0%, #fff 100%);
  border-bottom: 1px solid var(--line);
}

.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 40px;
  align-items: center;
}

.hero-art {
  width: 100%;
  display: block;
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.hero-inner {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 46px 0 40px;
}

.breadcrumb {
  margin: 18px auto 0;
  width: min(1180px, calc(100% - 48px));
  color: var(--muted);
  font-size: 13px;
}

.breadcrumb a {
  color: var(--teal-dark);
}

.eyebrow {
  color: var(--teal-dark);
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 10px;
}

h1,
h2,
h3 {
  line-height: 1.35;
  margin: 0;
}

h1 {
  font-size: 40px;
  letter-spacing: 0;
}

h2 {
  font-size: 25px;
  margin-bottom: 20px;
}

h3 {
  font-size: 18px;
}

.lead {
  color: var(--muted);
  font-size: 16px;
  max-width: 760px;
  margin: 14px 0 0;
}

.search-panel {
  margin-top: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 18px;
}

.search-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr auto;
  gap: 12px;
  align-items: end;
}

.field label {
  display: block;
  color: #273954;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 6px;
}

.input {
  min-height: 46px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 14px;
  color: var(--muted);
  background: #fff;
  display: flex;
  align-items: center;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.chip {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 7px 13px;
  color: #42536b;
  font-size: 13px;
  font-weight: 700;
}

.section {
  padding: 48px 0;
}

.section-gap {
  margin-top: 42px;
}

.section.soft {
  background: var(--soft);
}

.section.beauty {
  background: #fffafa;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
}

.card:hover {
  border-color: #a8d3dc;
}

.route-card {
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.route-card.with-image {
  min-height: 320px;
  padding: 0;
  overflow: hidden;
}

.route-card.with-image .card-body {
  padding: 20px;
}

.card-image {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}

.route-card .meta,
.muted {
  color: var(--muted);
  font-size: 14px;
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.link-pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 14px;
  background: #fff;
  color: #243a57;
  font-weight: 700;
  font-size: 14px;
}

.feature-card {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 14px;
  min-height: 130px;
}

.feature-card .feature-image {
  width: 116px;
  height: 96px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #e0e9ef;
}

.photo {
  border-radius: 6px;
  min-height: 96px;
  background:
    linear-gradient(135deg, rgba(7, 137, 154, .16), rgba(16, 33, 63, .04)),
    repeating-linear-gradient(90deg, #eef4f8 0, #eef4f8 10px, #f8fbfd 10px, #f8fbfd 20px);
  border: 1px solid #e0e9ef;
}

.media-img {
  width: 100%;
  display: block;
  border-radius: 8px;
  border: 1px solid #e0e9ef;
  object-fit: cover;
  background: #fff;
}

.hero-photo {
  min-height: 260px;
  box-shadow: var(--shadow);
}

.sidebar-img {
  height: 132px;
}

.map-img {
  min-height: 220px;
}

.doctor-card {
  display: grid;
  grid-template-columns: 126px 1fr;
  gap: 18px;
  align-items: center;
}

.doctor-img {
  width: 126px;
  height: 148px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.photo.beauty-photo {
  background:
    linear-gradient(135deg, rgba(201, 130, 141, .18), rgba(183, 139, 69, .08)),
    repeating-linear-gradient(90deg, #fff1f1 0, #fff1f1 10px, #fffafa 10px, #fffafa 20px);
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--soft-blue);
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 800;
}

.tag.pr {
  background: #fff4df;
  color: #925d00;
}

.tag.rose-tag {
  background: var(--rose-soft);
  color: #a85260;
}

.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 16px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.table th,
.table td {
  border-bottom: 1px solid var(--line);
  padding: 13px 16px;
  text-align: left;
  font-size: 14px;
}

.table th {
  width: 170px;
  background: #f8fbfd;
  color: #263b58;
}

.hours td,
.hours th {
  text-align: center;
}

.article-body {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 34px;
}

.article-body p {
  color: #31425c;
}

.toc,
.note {
  background: #f5fbfd;
  border: 1px solid #d3edf2;
  border-radius: 8px;
  padding: 18px;
  margin: 24px 0;
}

.note.rose-note {
  background: #fff7f7;
  border-color: #f1d4d7;
}

.footer {
  border-top: 1px solid var(--line);
  padding: 34px 0;
  background: #fbfdff;
  color: var(--muted);
  font-size: 13px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 24px;
}

.footer a {
  display: block;
  margin: 6px 0;
}

.hero-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 32px;
  align-items: center;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.mini-list {
  display: grid;
  gap: 10px;
}

.mini-list a {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: #243a57;
  font-weight: 700;
}

.price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.price strong {
  color: #a85260;
}

.simple-page {
  min-height: 420px;
}

.article-top {
  background: linear-gradient(180deg, #f7fbfd 0%, #fff 78%);
}

.article-index .article-top {
  border-bottom: 1px solid var(--line);
}

.article-search {
  margin-top: 0;
}

.beauty-hero {
  background: linear-gradient(180deg, #fff7f8 0%, #fff 100%);
}

.beauty-list-hero {
  background:
    linear-gradient(90deg, rgba(255, 248, 249, .98) 0%, rgba(255, 248, 249, .92) 48%, rgba(255, 248, 249, .48) 100%),
    linear-gradient(180deg, #fff7f8, #fff);
}

.beauty-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 42px;
  align-items: center;
}

.beauty-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.beauty-hero-points span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #f0cbd1;
  color: #a85260;
  font-weight: 800;
  font-size: 13px;
}

.beauty-hero-visual {
  position: relative;
}

.beauty-main-photo {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  border: 1px solid #f0d9dd;
  box-shadow: 0 20px 48px rgba(168, 82, 96, .16);
}

.beauty-mini-photos {
  position: absolute;
  left: -34px;
  bottom: -28px;
  display: grid;
  grid-template-columns: 108px 108px;
  gap: 12px;
}

.beauty-mini-photos img {
  width: 108px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  border: 4px solid #fff;
  box-shadow: 0 12px 28px rgba(16, 33, 63, .14);
}

.profile-hero {
  background: linear-gradient(180deg, #f8fbfd 0%, #fff 100%);
}

.profile-hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 470px;
  gap: 44px;
  align-items: center;
}

.profile-copy h1 {
  margin-top: 10px;
}

.profile-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.profile-facts span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #cfe1ed;
  color: #23667a;
  font-size: 13px;
  font-weight: 800;
}

.profile-facts.rose-facts span {
  border-color: #f0cbd1;
  color: #a85260;
}

.profile-visual-card {
  padding: 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #d6e2ec;
  box-shadow: var(--shadow);
}

.profile-visual-card.rose-card {
  border-color: #f0d9dd;
  box-shadow: 0 18px 44px rgba(168, 82, 96, .12);
}

.profile-visual-card .hero-photo {
  min-height: 300px;
  border-radius: 8px;
  box-shadow: none;
}

.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.photo-strip img {
  width: 100%;
  height: 84px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e0e9ef;
}

.profile-feature {
  min-height: 180px;
}

.profile-feature > img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-bottom: 10px;
}

.profile-doctor {
  grid-template-columns: 148px 1fr;
  align-items: start;
}

/* Beauty clinic profile comp */
.beauty-profile-page {
  background: #fffdfd;
}

.beauty-profile-header {
  border-bottom-color: #f0d8dc;
}

.beauty-profile-header .top-logo span,
.beauty-profile-page .logo span {
  color: #df7f91;
}

.beauty-owner-btn {
  border-color: #f0bfc8;
  color: #c45f72;
}

.beauty-breadcrumb {
  color: #9a8790;
  border-bottom: 1px solid #f2e2e5;
  padding-bottom: 14px;
}

.beauty-breadcrumb a {
  color: #c45f72;
}

.beauty-profile-hero {
  padding: 30px 0 42px;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 237, 239, .75), transparent 28%),
    linear-gradient(180deg, #fffafa 0%, #fff 100%);
}

.beauty-profile-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: 42px;
  align-items: center;
}

.beauty-profile-kicker {
  margin: 0 0 10px;
  color: #a8737d;
  font-size: 18px;
  font-weight: 700;
}

.beauty-profile-copy h1 {
  font-size: 44px;
  line-height: 1.28;
  color: #1a2440;
  margin-bottom: 18px;
}

.beauty-badges,
.beauty-tags,
.beauty-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.beauty-badges {
  align-items: center;
  margin-bottom: 18px;
}

.beauty-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid #f0c2ca;
  border-radius: 4px;
  background: #fff;
  color: #c45f72;
  font-size: 13px;
  font-weight: 800;
}

.beauty-badges span:first-child {
  border-color: #9bd7dc;
  color: #17818c;
}

.beauty-badges small {
  color: #7c7380;
  font-weight: 700;
}

.beauty-tags a {
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid #eadde0;
  border-radius: 4px;
  background: #fff;
  color: #4e5266;
  font-size: 13px;
  font-weight: 800;
}

.profile-address {
  margin: 20px 0 30px;
  color: #4f596d;
  font-size: 14px;
}

.profile-address p {
  margin: 6px 0;
}

.beauty-hero-actions .btn {
  min-width: 170px;
}

.solid-wide {
  min-width: 190px;
  box-shadow: 0 12px 24px rgba(196, 95, 114, .2);
}

.soft-rose {
  border-color: #efc8ce;
  color: #c45f72;
  background: #fff;
}

.beauty-gallery-main {
  width: 100%;
  height: 305px;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #f0d7dc;
  box-shadow: 0 18px 42px rgba(126, 83, 91, .12);
}

.beauty-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.beauty-gallery-thumbs img {
  width: 100%;
  height: 78px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #f0d7dc;
}

.beauty-profile-main-section {
  padding-top: 0;
}

.beauty-profile-layout {
  grid-template-columns: minmax(0, 1fr) 340px;
}

.beauty-profile-main > h2 {
  font-size: 21px;
  margin-bottom: 14px;
}

.first-visit-box {
  display: grid;
  grid-template-columns: 56px 1fr 190px;
  gap: 18px;
  align-items: center;
  margin-bottom: 26px;
  padding: 20px 22px;
  border: 1px solid #f0d6dc;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff8f9, #fff);
}

.heart-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 2px solid #d56d7e;
  border-radius: 50%;
  color: #d56d7e;
  font-size: 28px;
}

.first-visit-box h2 {
  margin-bottom: 4px;
  font-size: 20px;
}

.first-visit-box p {
  margin: 0;
  color: #5d6375;
  font-size: 14px;
}

.first-visit-links {
  display: grid;
  gap: 10px;
}

.first-visit-links a {
  display: flex;
  justify-content: space-between;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid #efc8ce;
  border-radius: 4px;
  color: #c45f72;
  font-weight: 800;
  font-size: 13px;
}

.profile-table th,
.beauty-hours th {
  background: #fffafa;
}

.external-link {
  color: #c45f72;
  font-weight: 800;
}

.beauty-menu-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.beauty-menu-card {
  min-height: 168px;
  padding: 18px 14px;
  border: 1px solid #f0d7dc;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.beauty-menu-card img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  margin-bottom: 8px;
}

.beauty-menu-card h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.beauty-menu-card p {
  margin: 0 0 10px;
  color: #697083;
  font-size: 12px;
  line-height: 1.6;
}

.beauty-menu-card span {
  color: #c45f72;
  font-size: 12px;
  font-weight: 800;
}

.price-table th {
  background: #fff1f3;
}

.price-table td:last-child {
  color: #27324a;
  font-weight: 800;
  text-align: right;
}

.risk-box {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 18px;
  align-items: center;
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid #f1cfd5;
  border-radius: 8px;
  background: #fff8f9;
}

.risk-box h2 {
  margin-bottom: 8px;
  color: #c45f72;
  font-size: 19px;
}

.risk-box ul {
  margin: 0;
  padding-left: 1.2em;
  color: #5d6375;
  font-size: 14px;
}

.risk-box a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  border: 1px solid #efc8ce;
  border-radius: 4px;
  color: #c45f72;
  font-weight: 800;
}

.doctor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.doctor-profile-card {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 16px;
  padding: 16px;
  border: 1px solid #e9e2e4;
  border-radius: 8px;
  background: #fff;
}

.doctor-profile-card img {
  width: 118px;
  height: 145px;
  object-fit: cover;
  border-radius: 6px;
}

.doctor-profile-card h3 {
  margin-bottom: 4px;
}

.doctor-profile-card p {
  margin: 0 0 8px;
  font-size: 13px;
}

.doctor-profile-card a {
  color: #c45f72;
  font-weight: 800;
  font-size: 13px;
}

.facility-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.facility-grid span {
  min-height: 70px;
  display: grid;
  place-items: center;
  border: 1px solid #ede2e4;
  border-radius: 6px;
  background: #fff;
  color: #5d6375;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}

.access-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: center;
}

.profile-notices {
  padding: 0 18px;
}

.beauty-sidebar {
  gap: 18px;
}

.beauty-side-card {
  padding: 22px;
  border: 1px solid #ecdde0;
  border-radius: 8px;
  background: #fff;
}

.beauty-side-card h3 {
  margin-bottom: 14px;
}

.clinic-summary img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 16px;
}

.clinic-summary dl {
  margin: 0;
}

.clinic-summary dt {
  margin-top: 12px;
  color: #8a7b84;
  font-size: 12px;
  font-weight: 800;
}

.clinic-summary dd {
  margin: 3px 0 0;
  color: #4f596d;
  font-size: 13px;
}

.clinic-summary > a,
.side-more {
  display: block;
  margin-top: 16px;
  color: #b97044;
  text-align: center;
  font-weight: 800;
  font-size: 13px;
}

.reserve-card {
  background: linear-gradient(180deg, #fff8f9, #fff);
}

.reserve-card .btn {
  width: 100%;
  margin-top: 10px;
}

.reserve-card p {
  text-align: center;
  color: #8a7b84;
  font-size: 13px;
}

.side-link-list {
  display: grid;
}

.side-link-list a,
.nearby-list a {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #f1e6e8;
  color: #4e5266;
  font-size: 13px;
  font-weight: 800;
}

.side-link-list a::after {
  content: "窶ｺ";
  color: #d56d7e;
}

.nearby-list a {
  display: block;
}

.nearby-list span {
  display: block;
  margin-top: 2px;
  color: #8a7b84;
  font-size: 12px;
}

.owner-update-card {
  background: linear-gradient(180deg, #fff7f8, #fff);
}

.owner-update-card p,
.owner-update-card li {
  color: #5d6375;
  font-size: 13px;
}

.owner-update-card ul {
  padding-left: 1.2em;
}

.owner-update-card .btn {
  width: 100%;
}

.beauty-related {
  padding-top: 20px;
}

.beauty-guide-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.beauty-guide-row a {
  position: relative;
  min-height: 154px;
  overflow: hidden;
  border: 1px solid #e9e2e4;
  border-radius: 8px;
  background: #fff;
}

.beauty-guide-row img {
  width: 100%;
  height: 92px;
  object-fit: cover;
  display: block;
}

.beauty-guide-row span {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #fff4f5;
  color: #c45f72;
  font-size: 12px;
  font-weight: 800;
}

.beauty-guide-row strong,
.beauty-guide-row small {
  display: block;
  padding: 0 12px;
}

.beauty-guide-row strong {
  margin-top: 10px;
  color: #27324a;
  font-size: 13px;
}

.beauty-guide-row small {
  color: #8a7b84;
  font-size: 12px;
}

.beauty-pr-band-section {
  padding-top: 0;
}

.beauty-pr-band {
  min-height: 98px;
  display: grid;
  grid-template-columns: 1fr 320px 120px;
  gap: 22px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid #f0d7dc;
  border-radius: 8px;
  background: #fff;
}

.beauty-pr-band span {
  display: inline-flex;
  margin-right: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  background: #b97044;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.beauty-pr-band p {
  margin: 6px 0 0;
  color: #697083;
  font-size: 13px;
}

.beauty-pr-band img {
  width: 100%;
  height: 74px;
  object-fit: cover;
  border-radius: 6px;
}

.beauty-pr-band em {
  color: #4e5266;
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

/* General hospital profile / specialty / article comp layouts */
.hospital-profile-hero {
  padding: 36px 0;
  background: linear-gradient(180deg, #f7fbfe 0%, #fff 100%);
  border-bottom: 1px solid #dce5ee;
}

.hospital-profile-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 470px;
  gap: 48px;
  align-items: center;
}

.hospital-profile-hero h1 {
  font-size: 42px;
  margin-bottom: 14px;
}

.hospital-badges,
.hospital-tags,
.hospital-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hospital-badges {
  align-items: center;
  margin-bottom: 16px;
}

.hospital-badges span {
  padding: 5px 12px;
  border: 1px solid #91cbd3;
  border-radius: 4px;
  background: #f5fcfd;
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 800;
}

.hospital-badges small {
  color: #64748b;
  font-weight: 700;
}

.hospital-tags a {
  padding: 6px 14px;
  border: 1px solid #d7e3ed;
  border-radius: 4px;
  background: #fff;
  color: #273954;
  font-weight: 800;
  font-size: 13px;
}

.hospital-actions .btn {
  min-width: 170px;
}

.hospital-main-photo {
  width: 100%;
  height: 300px;
  display: block;
  object-fit: cover;
  border: 1px solid #d7e3ed;
  border-radius: 3px;
}

.hospital-profile-layout {
  grid-template-columns: minmax(0, 1fr) 340px;
}

.hospital-facilities {
  grid-template-columns: repeat(7, 1fr);
}

.hospital-sidebar .top-search-btn,
.hospital-owner-card .btn {
  width: 100%;
  margin-top: 14px;
}

.hospital-related {
  padding-top: 16px;
}

.profile-link-band {
  padding-top: 0;
}

.profile-link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.profile-link-grid a {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #d7e3ed;
  border-radius: 8px;
  background: #fff;
  color: #17345d;
  font-weight: 800;
  text-align: center;
}

.profile-link-grid img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.specialty-hero {
  padding: 48px 0 0;
  background:
    linear-gradient(90deg, rgba(247, 251, 253, .96) 0%, rgba(247, 251, 253, .86) 56%, rgba(247, 251, 253, .38) 100%),
    url("../images/comp/hospital-doctor.png") right 48px top 22px / 360px auto no-repeat,
    linear-gradient(180deg, #f6fbfd, #fff);
  border-bottom: 1px solid #dce5ee;
}

.specialty-hero-grid {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
}

.specialty-icon-large {
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  border: 1px solid #cde3ec;
  border-radius: 50%;
  background: #fff;
}

.specialty-icon-large img {
  width: 58px;
  height: 58px;
}

.specialty-hero h1 {
  font-size: 38px;
}

.specialty-hero p {
  color: #334961;
  font-weight: 700;
}

.specialty-search {
  transform: translateY(50%);
  margin-top: 20px;
}

.prefecture-tabs {
  margin-bottom: 16px;
}

.region-table {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid #d7e3ed;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.region-table > div {
  min-height: 250px;
  padding: 20px 22px;
  border-right: 1px solid #e3edf4;
}

.region-table > div:last-child {
  border-right: 0;
}

.region-table strong,
.region-table a {
  display: block;
}

.region-table strong {
  margin-bottom: 12px;
  color: #17345d;
}

.region-table a {
  padding: 5px 0;
  color: #334961;
  font-size: 14px;
}

.symptom-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.symptom-grid a,
.article-symptoms div {
  min-height: 172px;
  padding: 18px 14px;
  border: 1px solid #d7e3ed;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.symptom-grid img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 10px;
}

.symptom-grid h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.symptom-grid p {
  color: #5b6b83;
  font-size: 12px;
  line-height: 1.6;
}

.symptom-grid span {
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 800;
}

.clinic-list-table td {
  font-size: 13px;
}

.clinic-list-table a {
  color: var(--teal-dark);
  font-weight: 800;
}

.compact-links {
  grid-template-columns: repeat(2, 1fr);
}

.compact-links a {
  min-height: 62px;
}

.column-hero {
  padding: 40px 0;
  background: linear-gradient(180deg, #f7fbfd 0%, #fff 100%);
  border-bottom: 1px solid #dce5ee;
}

.column-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 42px;
  align-items: center;
}

.column-hero h1 {
  margin: 18px 0 10px;
  font-size: 42px;
  line-height: 1.25;
}

.column-hero p {
  color: #334961;
  font-size: 18px;
  font-weight: 700;
}

.column-hero img {
  width: 100%;
  height: 292px;
  object-fit: cover;
  border-radius: 4px;
}

.column-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 26px;
  color: #5b6b83;
  font-weight: 800;
  font-size: 13px;
}

.column-layout {
  grid-template-columns: minmax(0, 1fr) 320px;
}

.column-article h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  font-size: 24px;
}

.column-article h2 span {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  background: #083b78;
  color: #fff;
  font-size: 16px;
}

.column-toc ol {
  columns: 2;
  margin: 10px 0 0;
  padding-left: 1.4em;
  color: #17345d;
  font-weight: 700;
}

.article-symptoms {
  grid-template-columns: repeat(3, 1fr);
}

.article-symptoms div {
  min-height: auto;
  text-align: left;
}

.article-check-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: center;
}

.article-check-grid li {
  margin: 8px 0;
  color: #334961;
}

.article-check-grid img {
  width: 100%;
  height: 166px;
  object-fit: cover;
  border-radius: 8px;
}

.article-items {
  grid-template-columns: repeat(5, 1fr);
}

.article-clinic-search {
  margin: 30px 0;
  box-shadow: none;
}

.article-clinic-search .top-search-grid {
  grid-template-columns: 1fr 1fr 180px;
}

.article-related-grid {
  grid-template-columns: repeat(4, 1fr);
}

.article-disclaimer {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 20px;
  margin-top: 34px;
  padding: 18px 22px;
  border: 1px solid #ead6c4;
  border-radius: 8px;
  background: #fffaf4;
  color: #66513e;
  font-size: 13px;
}

.popular-list ol {
  margin: 0;
  padding-left: 1.4em;
}

.popular-list li {
  margin: 12px 0;
  color: #334961;
  font-size: 13px;
  font-weight: 800;
}

.area-link-bottom {
  padding-top: 0;
}

.area-link-bottom .profile-link-grid {
  grid-template-columns: repeat(6, 1fr);
}

.hospital-index-hero {
  min-height: 520px;
  padding: 74px 0 48px;
  background:
    linear-gradient(90deg, rgba(247, 251, 253, .98) 0%, rgba(247, 251, 253, .82) 52%, rgba(247, 251, 253, .18) 100%),
    url("../images/comp/top-hero-hospital.png") right top / 64% auto no-repeat,
    linear-gradient(180deg, #f7fbfd, #fff);
  border-bottom: 1px solid #dce5ee;
}

.hospital-index-copy {
  max-width: 520px;
}

.hospital-index-copy h1 {
  font-size: 44px;
  margin-bottom: 20px;
}

.hospital-index-copy p {
  color: #334961;
  font-size: 18px;
  font-weight: 700;
}

.hospital-index-search {
  margin-top: 42px;
}

.hospital-region-table {
  margin-top: 8px;
}

.hospital-specialty-grid {
  grid-template-columns: repeat(8, 1fr);
}

.small-benefits {
  grid-template-columns: repeat(3, 1fr);
  margin: 14px 0;
}

.small-benefits span {
  min-height: 46px;
  font-size: 12px;
}

/* Article-focused top comp */
.article2-page {
  background: #fff;
}

.article2-header {
  border-bottom-color: #dce5ee;
}

.conne-fv-slider {
  padding: 42px 0 52px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 12%, rgba(65, 147, 174, .09), transparent 28%),
    linear-gradient(180deg, #f7fbfd 0%, #fff 100%);
}

.conne-slider-viewport {
  width: 100%;
  overflow: hidden;
  padding: 10px 0 0;
}

.conne-slider-track {
  display: flex;
  gap: 40px;
  align-items: stretch;
  transition: transform .48s ease;
  will-change: transform;
}

.conne-slide {
  flex: 0 0 640px;
  padding: 0;
  opacity: .58;
  transition: opacity .28s ease, transform .28s ease;
}

.conne-slide.is-active,
.conne-slide.is-active-next {
  opacity: 1;
}

.conne-slide.is-active {
  transform: translateY(-3px);
}

.conne-slide a {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 10px rgba(50, 88, 195, .3);
  transition: opacity .28s ease;
}

.conne-slide a:hover {
  opacity: .72;
}

.conne-fv-img {
  width: 100%;
  height: 250px;
  background: #eaf2f7;
}

.conne-fv-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.conne-fv-text {
  height: 110px;
  padding: 7px 34px 20px;
  background: #fff;
}

.conne-fv-text h2 {
  margin: 0;
  color: #17345d;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.65;
}

.conne-fv-text time {
  display: block;
  margin-top: 10px;
  color: #23667a;
  font-size: 14px;
  font-weight: 800;
}

.conne-slider-dots {
  position: relative;
  top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.conne-slider-dots button {
  width: 60px;
  height: 20px;
  padding: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity .28s ease;
}

.conne-slider-dots button:hover {
  opacity: .65;
}

.conne-slider-dots button::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: #a6b6d7;
}

.conne-slider-dots button.active::before {
  background: #23667a;
}

.article2-hero {
  position: relative;
  padding: 46px 0 24px;
  background: linear-gradient(180deg, #f8fbfd 0%, #fff 100%);
  overflow: hidden;
}

.article2-carousel {
  overflow: hidden;
  padding: 0 8px;
}

.article2-track {
  display: flex;
  transition: transform .42s ease;
  will-change: transform;
}

.article2-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(480px, .95fr);
  gap: 18px;
  padding: 0 3px 4px;
}

.article2-feature-card,
.article2-pick-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #dce5ee;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(16, 33, 63, .08);
}

.article2-feature-card {
  min-height: 318px;
}

.article2-feature-card img,
.article2-pick-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.article2-feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 52%, rgba(255,255,255,.08) 100%);
}

.article2-feature-card > div {
  position: absolute;
  left: 34px;
  bottom: 32px;
  z-index: 1;
  width: min(420px, calc(100% - 64px));
}

.article2-feature-card span,
.article2-pick-card span,
.article2-card-row span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 4px;
  background: #eef7fb;
  color: #23667a;
  font-size: 12px;
  font-weight: 800;
}

.article2-feature-card span {
  margin-bottom: 14px;
}

.article2-feature-card h1 {
  margin-bottom: 12px;
  font-size: 31px;
  line-height: 1.32;
}

.article2-feature-card p,
.article2-feature-card time {
  color: #42536b;
  font-weight: 700;
}

.article2-feature-card time,
.article2-pick-card time {
  display: block;
  margin-top: 16px;
  font-size: 12px;
}

.article2-pick-card {
  min-height: 0;
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 14px;
  padding: 12px;
}

.article2-pick-card img {
  height: 94px;
  border-radius: 6px;
  border-bottom: 0;
  grid-row: 1 / 4;
}

.article2-pick-card span {
  width: fit-content;
  margin: 0 0 8px;
}

.article2-pick-card span.rose,
.article2-card-row span.rose {
  background: #fff4f5;
  color: #a85260;
}

.article2-pick-card h2 {
  padding: 0;
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.article2-pick-card time {
  padding: 0;
  color: #5b6b83;
}

.article2-pick-stack {
  display: grid;
  gap: 12px;
}

.article2-arrow {
  position: absolute;
  top: 214px;
  z-index: 2;
  width: 52px;
  height: 52px;
  border: 1px solid #dce5ee;
  border-radius: 50%;
  background: #fff;
  color: #17345d;
  font-size: 30px;
  box-shadow: 0 10px 24px rgba(16, 33, 63, .08);
  cursor: pointer;
}

.article2-arrow-left {
  left: 32px;
}

.article2-arrow-right {
  right: 32px;
}

.article2-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}

.article2-dots button {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: #cbd9e4;
}

.article2-dots button.active {
  width: 18px;
  border-radius: 999px;
  background: var(--teal);
}

.article2-menu-section {
  padding: 30px 0 28px;
}

.article2-menu-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.article2-menu-grid a {
  min-height: 150px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  padding: 18px 14px;
  border: 1px solid #dce5ee;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.article2-menu-grid img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.article2-menu-grid strong {
  color: #17345d;
}

.article2-menu-grid span {
  color: #5b6b83;
  font-size: 12px;
  line-height: 1.6;
}

.article2-search-section {
  padding: 8px 0 38px;
}

.article2-search-panel {
  padding: 28px 30px;
  border: 1px solid #dce5ee;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(16, 33, 63, .05);
}

.article2-search-panel h2 {
  margin-bottom: 4px;
}

.article2-search-panel p {
  margin: 0 0 20px;
  color: #5b6b83;
}

.article2-search-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 180px;
  gap: 18px;
  align-items: end;
}

.article2-keywords {
  margin-top: 18px;
}

.article2-section {
  padding: 34px 0;
}

.article2-section:nth-of-type(2n + 1) {
  background: #fff;
}

.article2-card-row {
  display: grid;
  gap: 20px;
}

.article2-card-row.five {
  grid-template-columns: repeat(5, 1fr);
}

.article2-card-row.four {
  grid-template-columns: repeat(4, 1fr);
}

.article2-card-row a {
  min-height: 250px;
  overflow: hidden;
  border: 1px solid #dce5ee;
  border-radius: 8px;
  background: #fff;
}

.article2-card-row img {
  width: 100%;
  height: 126px;
  display: block;
  object-fit: cover;
  border-bottom: 1px solid #e5edf4;
}

.article2-card-row span {
  margin: 14px 14px 8px;
}

.article2-card-row h3 {
  padding: 0 14px;
  font-size: 16px;
}

.article2-card-row p,
.article2-card-row time {
  display: block;
  padding: 0 14px;
  color: #5b6b83;
  font-size: 12px;
}

.article2-card-row time {
  margin-top: 12px;
}

.article2-card-row.interview img {
  height: 146px;
}

.article2-supervisor-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.article2-supervisor-row a {
  min-height: 72px;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #dce5ee;
  border-radius: 8px;
  background: #fff;
}

.article2-supervisor-row img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  grid-row: span 2;
}

.article2-supervisor-row span {
  color: #23667a;
  font-size: 11px;
  font-weight: 800;
}

.article2-supervisor-row strong {
  color: #17345d;
  font-size: 13px;
}

.article2-cta-section {
  padding: 44px 0;
}

.article2-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.article2-cta {
  min-height: 210px;
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 20px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #dce5ee;
  border-radius: 8px;
  background: #fff;
}

.article2-cta.hospital {
  background: linear-gradient(135deg, #edf9fc, #fff);
}

.article2-cta.clinic {
  border-color: #f0cbd1;
  background: linear-gradient(135deg, #fff5f6, #fff);
}

.article2-cta div {
  padding-left: 28px;
}

.article2-cta p {
  color: #5b6b83;
}

.article2-cta span {
  display: inline-flex;
  min-width: 176px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--teal);
  color: #fff;
  font-weight: 800;
}

.article2-cta.clinic span {
  background: #cf6174;
}

.article2-cta img {
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.interview-grid .feature-card {
  min-height: 150px;
}

.media-hero {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 34px 0 42px;
}

.media-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: stretch;
}

.carousel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.carousel-track {
  display: flex;
  transition: transform .45s ease;
}

.carousel-slide {
  min-width: 100%;
  padding: 22px;
}

.slide-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 20px;
  align-items: stretch;
}

.slide-photo {
  width: 100%;
  min-height: 280px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  border: 1px solid #e6edf4;
}

.thumb {
  min-height: 250px;
  border-radius: 8px;
  border: 1px solid #e6edf4;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(7, 137, 154, .18), rgba(255, 255, 255, .82)),
    radial-gradient(circle at 80% 20%, rgba(7, 137, 154, .25), transparent 34%),
    linear-gradient(160deg, #edf8fb 0%, #fff 100%);
}

.thumb.rose-thumb {
  background:
    linear-gradient(135deg, rgba(201, 130, 141, .2), rgba(255, 255, 255, .84)),
    radial-gradient(circle at 80% 20%, rgba(201, 130, 141, .22), transparent 34%),
    linear-gradient(160deg, #fff4f4 0%, #fff 100%);
}

.thumb.gold-thumb {
  background:
    linear-gradient(135deg, rgba(183, 139, 69, .2), rgba(255, 255, 255, .86)),
    radial-gradient(circle at 80% 20%, rgba(183, 139, 69, .22), transparent 34%),
    linear-gradient(160deg, #fff8ec 0%, #fff 100%);
}

.thumb::before,
.thumb::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
}

.thumb::before {
  width: 160px;
  height: 160px;
  right: 28px;
  top: 34px;
}

.thumb::after {
  width: 92px;
  height: 92px;
  left: 42px;
  bottom: 34px;
}

.thumb-label {
  position: absolute;
  left: 22px;
  top: 22px;
  z-index: 1;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(255,255,255,.9);
  color: var(--teal-dark);
  font-weight: 800;
  font-size: 12px;
}

.slide-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slide-copy h1 {
  font-size: 34px;
}

.carousel-controls {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.dots {
  display: flex;
  gap: 6px;
}

.dot {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: #bdd2dc;
  cursor: pointer;
}

.dot.active {
  background: var(--teal);
}

.media-menu {
  display: grid;
  gap: 10px;
}

.menu-tile {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
}

.article-card {
  padding: 0;
  overflow: hidden;
}

.article-card .thumb {
  min-height: 150px;
  border: 0;
  border-radius: 0;
}

.article-card > img.card-image {
  border-bottom: 1px solid var(--line);
}

.article-card-body {
  padding: 16px;
}

.author-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
}

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, #fff 0 18px, transparent 19px),
    linear-gradient(135deg, #ddecf3, #f9fbfd);
  border: 1px solid var(--line);
}

@media (max-width: 900px) {
  .header-inner {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px 0;
  }

  .nav {
    flex-wrap: wrap;
    gap: 12px;
  }

  .search-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .page-layout,
  .hero-profile,
  .profile-hero-panel,
  .beauty-hero-grid,
  .beauty-profile-hero-grid,
  .first-visit-box,
  .beauty-menu-grid,
  .doctor-grid,
  .facility-grid,
  .access-grid,
  .beauty-guide-row,
  .beauty-pr-band,
  .hospital-profile-hero-grid,
  .specialty-hero-grid,
  .region-table,
  .symptom-grid,
  .column-hero-grid,
  .article-symptoms,
  .article-check-grid,
  .article-items,
  .article-clinic-search .top-search-grid,
  .article-related-grid,
  .article-disclaimer,
  .area-link-bottom .profile-link-grid,
  .hospital-specialty-grid,
  .small-benefits,
  .footer-grid,
  .media-shell,
  .slide-grid,
  .home-hero-grid,
  .article2-menu-grid,
  .article2-search-grid,
  .article2-card-row.five,
  .article2-card-row.four,
  .article2-supervisor-row,
  .article2-cta-grid,
  .article2-cta,
  .article2-slide {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: 30px;
  }

  .sidebar {
    position: static;
  }

  .beauty-mini-photos {
    position: static;
    margin-top: 12px;
  }

  .beauty-profile-copy h1 {
    font-size: 32px;
  }

  .beauty-gallery-main {
    height: 240px;
  }

  .specialty-search {
    transform: none;
  }

  .region-table > div {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid #e3edf4;
  }

  .article2-hero {
    padding-top: 24px;
  }

  .conne-fv-slider {
    padding: 20px 0 30px;
  }

  .conne-slider-track {
    gap: 0;
  }

  .conne-slide {
    flex-basis: 100%;
    opacity: 1;
  }

  .conne-slide a {
    border-radius: 0;
    box-shadow: none;
  }

  .conne-fv-img {
    height: 230px;
  }

  .conne-fv-text {
    height: 160px;
    padding: 18px 26px 20px;
  }

  .conne-fv-text h2 {
    font-size: 17px;
  }

  .conne-fv-text time {
    font-size: 13px;
  }

  .conne-slider-dots {
    top: -19px;
  }

  .conne-slider-dots button {
    width: 44px;
  }

  .conne-slider-dots button::before {
    width: 29px;
  }

  .article2-feature-card {
    min-height: 300px;
  }

  .article2-pick-card {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .article2-pick-card img {
    height: 86px;
  }

  .article2-feature-card > div {
    left: 22px;
    bottom: 24px;
    width: calc(100% - 44px);
  }

  .article2-feature-card h1 {
    font-size: 26px;
  }

  .article2-arrow {
    top: 188px;
    width: 44px;
    height: 44px;
  }

  .article2-arrow-left {
    left: 10px;
  }

  .article2-arrow-right {
    right: 10px;
  }

  .article2-search-panel {
    padding: 22px;
  }

  .article2-cta div {
    padding: 24px 24px 0;
  }

  .article2-cta img {
    height: 180px;
  }
}

/* Top page comp-matched layout */
.top-page {
  background: #fff;
}

.top-container {
  width: min(1280px, calc(100% - 72px));
  margin: 0 auto;
}

.top-header {
  position: sticky;
  background: rgba(255, 255, 255, .98);
}

.top-header-inner {
  width: min(1280px, calc(100% - 72px));
  min-height: 82px;
}

.top-logo {
  font-size: 32px;
}

.top-nav {
  gap: 26px;
}

.top-owner-btn {
  min-height: 44px;
  color: #087888;
  border-color: #94c9d2;
}

.top-hero {
  position: relative;
  min-height: 474px;
  overflow: hidden;
  background: #eef8fb;
  border-bottom: 1px solid var(--line);
}

.top-hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(246, 251, 253, .98) 0%, rgba(246, 251, 253, .9) 42%, rgba(246, 251, 253, .2) 66%, rgba(246, 251, 253, .06) 100%),
    url("../images/comp/top-hero-hospital.png") right 54px / 58% auto no-repeat,
    linear-gradient(180deg, #eef8fb, #fff);
}

.top-hero-inner {
  position: relative;
  padding: 58px 0 34px;
}

.top-hero-copy {
  max-width: 620px;
}

.top-kicker {
  margin: 0 0 22px;
  color: #223957;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.8;
}

.top-hero h1 {
  font-size: 48px;
  letter-spacing: 0;
  line-height: 1.36;
}

.top-search {
  margin-top: 36px;
  background: #fff;
  border: 1px solid #d2e0eb;
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(16, 33, 63, .14);
  padding: 22px 24px;
}

.top-search-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 150px;
  gap: 18px;
  align-items: end;
}

.top-field label {
  display: block;
  margin-bottom: 8px;
  color: #243a57;
  font-size: 15px;
  font-weight: 800;
}

.top-field a {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border: 1px solid #d7e3ed;
  border-radius: 6px;
  color: #718095;
  background: #fff;
  font-weight: 700;
}

.top-field span {
  color: var(--teal);
}

.field-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  object-fit: contain;
}

.top-search-btn {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: linear-gradient(135deg, #07899a, #087786);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(7, 137, 154, .22);
}

.top-section {
  padding: 34px 0;
}

.top-section-soft {
  background: #f6f9fc;
}

.top-category-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  padding-top: 54px;
}

.top-category-card {
  min-height: 300px;
  position: relative;
  display: grid;
  grid-template-columns: 180px 1fr 24px;
  gap: 26px;
  align-items: center;
  border-radius: 8px;
  border: 1px solid #cfe1ed;
  padding: 44px 42px;
  background: linear-gradient(135deg, #f3fbff, #fff);
}

.top-category-card.beauty {
  border-color: #f1d0d6;
  background: linear-gradient(135deg, #fff5f6, #fff);
}

.category-photo {
  width: 180px;
  height: 180px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #d8e4ed;
  box-shadow: 0 14px 30px rgba(16, 33, 63, .12);
}

.category-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #9ecbeb;
  font-size: 42px;
}

.top-category-card.beauty .category-icon {
  background: #e78d9d;
}

.category-main h2 {
  margin-bottom: 8px;
}

.category-main p {
  margin: 0 0 18px;
  font-weight: 700;
  color: #344760;
}

.category-main dl {
  margin: 0 0 18px;
  background: rgba(255,255,255,.72);
}

.category-main dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #e4edf4;
  padding: 9px 12px;
  font-size: 14px;
}

.category-main dt {
  color: var(--muted);
}

.category-main dd {
  margin: 0;
  color: #17345d;
  font-weight: 800;
}

.mini-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.mini-tags span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 5px 11px;
  border-radius: 4px;
  background: #f0f8fb;
  color: #23667a;
  font-size: 12px;
  font-weight: 800;
}

.mini-tags.rose span {
  background: #fff4f5;
  color: #a85260;
}

.card-arrow {
  font-size: 34px;
  color: #24415e;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.section-head h2 {
  margin: 0;
  font-size: 24px;
}

.section-head a {
  color: var(--teal-dark);
  font-weight: 800;
  font-size: 14px;
}

.section-head.compact {
  justify-content: flex-start;
}

.section-head.compact p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.top-pr {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 4px;
  background: #f7b71b;
  color: #fff;
  font-size: 12px;
  vertical-align: middle;
}

.area-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.area-directory {
  margin-top: 30px;
}

.area-card {
  min-height: 82px;
  position: relative;
  border: 1px solid #d6e2ec;
  border-radius: 6px;
  padding: 18px 18px 18px 96px;
  background: #fff;
  overflow: hidden;
}

.area-card strong,
.area-card small {
  display: block;
}

.area-card small {
  color: var(--muted);
}

.prefecture-shape {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 74px;
  height: 54px;
  transform: translateY(-50%);
  object-fit: contain;
  opacity: .94;
}

.specialty-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 18px;
}

.specialty-grid a {
  min-height: 112px;
  display: grid;
  place-items: center;
  gap: 10px;
  border: 1px solid #d6e2ec;
  border-radius: 6px;
  background: #fff;
  text-align: center;
  padding: 16px 10px;
}

.specialty-grid img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.specialty-directory {
  margin-top: 28px;
}

.specialty-card {
  min-height: 186px;
}

.specialty-card img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  margin-bottom: 8px;
}

.specialty-card .tag {
  margin-bottom: 8px;
}

.specialty-card.beauty-card {
  background: #fffafa;
  border-color: #f1d4d7;
}

.clinic-card-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.clinic-card,
.media-card {
  position: relative;
  border: 1px solid #d8e4ed;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.clinic-card img,
.media-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid #e3edf4;
}

.clinic-card > div,
.media-card > div {
  padding: 16px;
}

.clinic-card h3,
.media-card h3 {
  font-size: 17px;
  margin-bottom: 7px;
}

.clinic-card p,
.clinic-card small,
.media-card time {
  color: var(--muted);
  font-size: 13px;
}

.pr-ribbon {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  background: #f7b71b;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
}

.center-link {
  text-align: center;
  margin-top: 20px;
}

.center-link a {
  color: var(--teal-dark);
  font-weight: 800;
}

.media-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.media-card span {
  display: inline-flex;
  background: #eef7fb;
  color: #23667a;
  padding: 4px 9px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 10px;
}

.media-card span.rose {
  background: #fff4f5;
  color: #a85260;
}

.consulting-band {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 20px;
  align-items: stretch;
  border: 1px solid #bfe2e9;
  border-radius: 8px;
  padding: 34px 38px;
  background: linear-gradient(135deg, #edf9fc, #fff);
}

.consulting-band h2 {
  margin-bottom: 10px;
}

.consulting-band p {
  color: var(--muted);
}

.consulting-card {
  background: #fff;
  border: 1px solid #d5e6ee;
  border-radius: 8px;
  padding: 24px;
}

.consulting-card span {
  color: var(--teal);
  font-size: 34px;
}

.consulting-card strong {
  color: var(--teal-dark);
}

.bottom-info {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
}

.notice-box,
.owner-box {
  border: 1px solid #d8e4ed;
  border-radius: 8px;
  background: #fff;
  padding: 24px;
}

.notice-box h2 {
  margin-bottom: 14px;
}

.notice-box a {
  display: grid;
  grid-template-columns: 120px 90px 1fr;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid #edf2f5;
  color: #334961;
  font-size: 14px;
}

.notice-box span {
  width: fit-content;
  padding: 2px 8px;
  border-radius: 4px;
  background: #fff0c8;
  color: #9a6c00;
  font-size: 12px;
  font-weight: 800;
}

.owner-box {
  display: grid;
  gap: 12px;
  align-content: center;
}

.owner-box p {
  color: var(--muted);
  margin: 0;
}

.owner-box > a:not(.top-search-btn) {
  color: var(--teal-dark);
  font-weight: 800;
  text-align: center;
}

.top-footer {
  background: #032747;
  color: #dbeaf2;
  padding: 44px 0 30px;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, 1fr);
  gap: 34px;
}

.footer-logo {
  color: #fff;
  font-size: 28px;
}
.footer-logo img {
  filter: brightness(0) invert(1);
}

.top-footer p,
.top-footer a {
  color: #dbeaf2;
  font-size: 13px;
}

.top-footer a {
  display: block;
  margin: 8px 0;
}

.top-footer strong {
  display: block;
  color: #fff;
  margin-bottom: 10px;
}

@media (max-width: 1000px) {
  .top-search-grid,
  .top-category-blocks,
  .area-grid,
  .specialty-grid,
  .clinic-card-grid,
  .media-card-grid,
  .consulting-band,
  .bottom-info,
  .footer-top-grid {
    grid-template-columns: 1fr;
  }

  .top-hero h1 {
    font-size: 34px;
  }

  .top-category-card {
    grid-template-columns: 1fr;
  }
}

/* Area hospital listing comp */
.area-list-page {
  background: #fff;
  color: #122641;
}

.area-list-page .site-header {
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid #dbe8ef;
  box-shadow: 0 8px 22px rgba(16, 33, 63, .04);
}

.area-list-header-inner,
.area-list-container {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.area-list-header-inner {
  min-height: 74px;
}

.area-list-logo {
  font-size: 31px;
}

.area-list-logo span {
  color: #098899;
}

.area-list-nav {
  gap: 24px;
  font-size: 14px;
}

.area-list-owner-btn {
  min-height: 44px;
  padding-inline: 18px;
  border-color: #7eb9c5;
  border-radius: 5px;
  color: #087b8a;
}

.area-list-hero {
  padding: 28px 0 26px;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 78%, #fff 100%);
  border-bottom: 1px solid #e2edf3;
}

.area-list-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 56px;
  align-items: start;
}

.area-list-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 34px;
  color: #64758b;
  font-size: 12px;
  font-weight: 800;
}

.area-list-breadcrumb a {
  color: #087f90;
}

.area-list-breadcrumb span::before {
  content: ">";
  margin-right: 10px;
  color: #9ba9b9;
}

.area-list-hero h1 {
  margin: 0 0 18px;
  color: #10213f;
  font-size: 39px;
  line-height: 1.28;
  letter-spacing: 0;
}

.area-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 18px;
  color: #2b536a;
  font-size: 13px;
  font-weight: 800;
}

.area-list-meta span + span {
  position: relative;
  margin-left: 18px;
  padding-left: 18px;
}

.area-list-meta span + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 14px;
  background: #b9cad5;
  transform: translateY(-50%);
}

.area-list-hero p {
  max-width: 760px;
  margin: 0;
  color: #4f637a;
  font-size: 14px;
  font-weight: 700;
  line-height: 2;
}

.area-list-hero-grid > img {
  width: 300px;
  max-width: 100%;
  display: block;
  margin: 4px 12px 0 auto;
}

.area-list-search {
  margin-top: 26px;
  padding: 23px 24px 18px;
  border: 1px solid #d7e6ee;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(16, 33, 63, .05);
}

.area-list-search-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr 1.08fr 142px;
  gap: 18px;
  align-items: end;
}

.area-list-search-grid div {
  display: grid;
  gap: 8px;
}

.area-list-search-grid label {
  color: #132945;
  font-size: 13px;
  font-weight: 800;
}

.area-list-search-grid div a {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  border: 1px solid #dbe7ef;
  border-radius: 5px;
  color: #63758c;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}

.area-list-search-grid div a::after {
  content: "竚�";
  color: #7c91a5;
  font-size: 13px;
}

.area-list-search-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: #038899;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 10px 20px rgba(3, 136, 153, .16);
}

.area-list-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.area-list-chips a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 6px 18px;
  border: 1px solid #d5e4ec;
  border-radius: 999px;
  background: #fff;
  color: #24435e;
  font-size: 12px;
  font-weight: 800;
}

.area-list-recommend {
  padding: 30px 0 35px;
  background: #fff;
  border-bottom: 1px solid #dce9f0;
}

.area-list-recommend h2,
.area-list-head h2,
.area-bottom-filter h2 {
  margin: 0;
  color: #132945;
  font-size: 22px;
  letter-spacing: 0;
}

.area-article-slider {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 20px;
  align-items: center;
  margin-top: 18px;
}

.area-article-slider button {
  width: 42px;
  height: 42px;
  border: 1px solid #a8cbd8;
  border-radius: 50%;
  background: #fff;
  color: #237384;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.area-article-track {
  display: flex;
  gap: 22px;
  min-width: 0;
}

.area-article-track.is-rotating a {
  transition: transform .24s ease, box-shadow .24s ease;
}

.area-article-track a {
  flex: 1 1 0;
  min-width: 0;
  padding: 16px 16px 18px;
  border: 1px solid #d8e7ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(16, 33, 63, .04);
}

.area-article-track a:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(16, 33, 63, .08);
}

.area-article-track img {
  width: 100%;
  aspect-ratio: 315 / 144;
  display: block;
  object-fit: cover;
  border-radius: 5px;
}

.area-article-track span {
  display: inline-flex;
  margin: 14px 0 8px;
  padding: 4px 10px;
  border-radius: 4px;
  background: #ecf8fb;
  color: #087f90;
  font-size: 11px;
  font-weight: 800;
}

.area-article-track h3 {
  min-height: 52px;
  color: #132945;
  font-size: 18px;
  line-height: 1.45;
}

.area-article-track p {
  min-height: 50px;
  margin: 9px 0 12px;
  color: #5e7085;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.75;
}

.area-article-track time {
  color: #687c91;
  font-size: 12px;
  font-weight: 700;
}

.area-article-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 14px;
}

.area-article-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c7d7e1;
}

.area-article-dots span.active {
  background: #07899a;
}

.area-more-btn {
  min-height: 40px;
  width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border: 1px solid #0791a4;
  border-radius: 4px;
  color: #087f90;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}

.area-more-btn::after {
  content: "窶ｺ";
  margin-left: 22px;
  font-size: 20px;
  line-height: 1;
}

.area-list-main-section {
  padding: 30px 0 12px;
  background: #fff;
}

.area-list-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 294px;
  gap: 30px;
  align-items: start;
}

.area-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.area-list-head p {
  margin: 0;
  color: #53677e;
  font-size: 11px;
  font-weight: 800;
}

.area-list-head span {
  color: #c8911b;
}

.area-hospital-list {
  display: grid;
  gap: 12px;
}

.area-hospital-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 250px 192px;
  gap: 16px;
  align-items: center;
  min-height: 152px;
  padding: 12px 13px;
  border: 1px solid #dce8ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(16, 33, 63, .035);
}

.area-hospital-card > img {
  width: 132px;
  height: 128px;
  display: block;
  border-radius: 5px;
  object-fit: cover;
}

.area-hospital-body h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: #14334f;
  font-size: 16px;
  line-height: 1.35;
}

.area-hospital-body h3 span {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #098899;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.area-hospital-body h3 em {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 6px;
  border-radius: 3px;
  background: #fff0c3;
  color: #a56b00;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.area-hospital-body p {
  position: relative;
  margin: 4px 0;
  padding-left: 16px;
  color: #4d6279;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.area-hospital-body p::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .65em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #72b5c1;
}

.area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 9px 0 7px;
}

.area-tags span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid #dce8ef;
  border-radius: 3px;
  background: #f8fbfd;
  color: #50667e;
  font-size: 11px;
  font-weight: 800;
}

.area-hospital-body small {
  display: block;
  color: #4d8291;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.6;
}

.area-hospital-card table {
  width: 100%;
  border-collapse: collapse;
  color: #516982;
  font-size: 10px;
  text-align: center;
}

.area-hospital-card th,
.area-hospital-card td {
  min-width: 20px;
  padding: 5px 4px;
  border: 1px solid #d9e7ef;
  line-height: 1.15;
}

.area-hospital-card th {
  background: #f4f8fb;
  color: #344d67;
  font-weight: 900;
}

.area-hospital-card td:first-child,
.area-hospital-card th:first-child {
  min-width: 76px;
  text-align: left;
}

.area-card-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.area-card-actions a {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #07899a;
  border-radius: 4px;
  color: #07899a;
  background: #fff;
  font-size: 13px;
  font-weight: 900;
}

.area-card-actions a:nth-child(2) {
  background: #07899a;
  color: #fff;
}

.area-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 22px 0 0;
}

.area-pagination a,
.area-pagination span {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d7e5ed;
  border-radius: 5px;
  color: #3d526b;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}

.area-pagination a:first-child,
.area-pagination a:last-child {
  min-width: 58px;
}

.area-pagination a.active {
  border-color: #07899a;
  background: #07899a;
  color: #fff;
}

.area-pagination span {
  border-color: transparent;
  background: transparent;
}

.area-list-sidebar {
  display: grid;
  gap: 20px;
}

.area-list-sidebar section {
  padding: 22px;
  border: 1px solid #d8e7ef;
  border-radius: 8px;
  background: #fff;
}

.area-list-sidebar h3 {
  margin: 0 0 16px;
  color: #132945;
  font-size: 18px;
}

.area-list-sidebar section:not(.area-update-box) a {
  position: relative;
  display: block;
  padding: 10px 18px 10px 0;
  border-bottom: 1px solid #edf3f6;
  color: #087f90;
  font-size: 13px;
  font-weight: 800;
}

.area-list-sidebar section:not(.area-update-box) a::after {
  content: "窶ｺ";
  position: absolute;
  right: 0;
  color: #8ca4b4;
  font-size: 18px;
}

.area-list-sidebar section:not(.area-update-box) a:last-child {
  border-bottom: 0;
}

.area-update-box {
  overflow: hidden;
  border-color: #0791a4 !important;
}

.area-update-box h3 {
  color: #07899a;
  line-height: 1.55;
}

.area-update-box p {
  margin: 0 0 18px;
  color: #4e647a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.9;
}

.area-update-box a {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 4px;
  background: #07899a;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.area-update-box img {
  width: 100%;
  display: block;
  margin: 0 auto;
}

.area-bottom-filter {
  padding: 34px 0 38px;
  background: #fff;
}

.area-bottom-filter .area-list-container {
  padding: 24px;
  border: 1px solid #d8e7ef;
  border-radius: 8px;
  background: #fbfdff;
}

.area-filter-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin: 18px 0;
}

.area-filter-grid label {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid #d8e7ef;
  border-radius: 5px;
  background: #fff;
  color: #324a63;
  font-size: 13px;
  font-weight: 800;
}

.area-filter-grid input {
  width: 16px;
  height: 16px;
  accent-color: #07899a;
}

.area-filter-submit {
  min-height: 44px;
  width: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  border-radius: 5px;
  background: #07899a;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.area-list-page .top-footer {
  padding: 34px 0 18px;
  border-top: 1px solid #dce8ef;
  background: #fff;
  color: #213852;
}

.area-list-page .top-footer p,
.area-list-page .top-footer a {
  color: #4e6379;
  font-size: 12px;
  line-height: 1.8;
}

.area-list-page .top-footer strong {
  color: #132945;
}

.area-list-page .footer-logo {
  color: #132945;
}

.area-list-page .footer-logo span {
  color: #07899a;
}

.area-list-page .footer-outline {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  border: 1px solid #f0a8b2;
  border-radius: 4px;
  color: #cf6174 !important;
  font-weight: 900;
}

@media (max-width: 1120px) {
  .area-hospital-card {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .area-hospital-card table,
  .area-card-actions {
    grid-column: 2;
  }

  .area-card-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .area-filter-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .area-list-header-inner {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px 0;
  }

  .area-list-nav {
    flex-wrap: wrap;
    gap: 12px;
  }

  .area-list-hero-grid,
  .area-list-search-grid,
  .area-list-layout,
  .footer-top-grid {
    grid-template-columns: 1fr;
  }

  .area-list-hero h1 {
    font-size: 32px;
  }

  .area-article-slider {
    grid-template-columns: 1fr;
  }

  .area-article-slider button {
    display: none;
  }

  .area-article-track,
  .area-hospital-card {
    grid-template-columns: 1fr;
  }

  .area-article-track {
    flex-direction: column;
  }

  .area-hospital-card > img {
    width: 100%;
    height: auto;
    aspect-ratio: 132 / 92;
  }

  .area-hospital-card table,
  .area-card-actions {
    grid-column: auto;
  }

  .area-filter-grid {
    grid-template-columns: 1fr;
  }

  .area-filter-submit {
    width: 100%;
  }
}

/* Beauty category top comp */
.beauty-category-page {
  background: #fff;
  color: #162843;
}

.beauty-category-container {
  width: min(1280px, calc(100% - 72px));
  margin: 0 auto;
}

.beauty-category-header {
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid #f0d6dc;
}

.beauty-category-header-inner {
  width: min(1280px, calc(100% - 72px));
  min-height: 82px;
}

.beauty-category-logo {
  font-size: 32px;
}

.beauty-category-logo span {
  color: #cf6174;
}

.beauty-category-nav {
  gap: 24px;
}

.beauty-category-owner-btn {
  min-height: 44px;
  color: #cf6174;
  border-color: #efb7c1;
}

.beauty-category-hero {
  position: relative;
  min-height: 472px;
  overflow: hidden;
  background: #fff6f7;
}

.beauty-category-hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.9) 38%, rgba(255,255,255,.34) 67%, rgba(255,255,255,.06) 100%),
    url("../images/comp/beauty-profile-hero.png") right center / 66% auto no-repeat,
    linear-gradient(180deg, #fff6f7, #fff);
}

.beauty-category-hero-inner {
  position: relative;
  min-height: 472px;
  display: grid;
  grid-template-columns: minmax(0, 570px) 1fr;
  align-items: center;
  gap: 28px;
  padding: 58px 0 74px;
}

.beauty-category-copy h1 {
  margin: 0 0 24px;
  font-size: 45px;
  line-height: 1.34;
  letter-spacing: 0;
}

.beauty-category-copy h1 span {
  color: #cf6174;
}

.beauty-category-copy p {
  max-width: 560px;
  margin: 0;
  color: #4a5d76;
  font-size: 17px;
  font-weight: 700;
  line-height: 2;
}

.beauty-category-hero-cards {
  align-self: end;
  justify-self: end;
  display: grid;
  grid-template-columns: repeat(3, 150px);
  gap: 16px;
  margin: 0 16px 6px 0;
}

.beauty-category-hero-cards a {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #f0d6dc;
  border-radius: 8px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 34px rgba(168, 82, 96, .16);
}

.beauty-category-hero-cards img {
  width: 100%;
  height: 96px;
  display: block;
  border-radius: 6px;
  object-fit: cover;
}

.beauty-category-hero-cards strong {
  color: #162843;
  font-size: 14px;
}

.beauty-category-search-section {
  position: relative;
  z-index: 2;
  margin-top: -44px;
}

.beauty-category-search {
  padding: 26px;
  border: 1px solid #f1d6dc;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(168, 82, 96, .13);
}

.beauty-category-search-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 160px;
  gap: 18px;
  align-items: end;
}

.beauty-category-field label {
  display: block;
  margin-bottom: 8px;
  color: #162843;
  font-size: 14px;
  font-weight: 800;
}

.beauty-category-field a {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid #e8d8dd;
  border-radius: 6px;
  background: #fff;
  color: #728094;
  font-size: 14px;
  font-weight: 700;
}

.beauty-category-field span {
  color: #cf6174;
}

.beauty-category-search-btn {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: linear-gradient(135deg, #df7890, #c84e69);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 26px rgba(207, 97, 116, .22);
}

.beauty-category-keywords {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.beauty-category-keywords strong {
  color: #cf6174;
  font-size: 13px;
}

.beauty-category-keywords a {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 5px 18px;
  border: 1px solid #f0bdc7;
  border-radius: 999px;
  color: #cf6174;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.beauty-category-section {
  padding: 52px 0 28px;
}

.beauty-category-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.beauty-category-section-head h2,
.beauty-guide-section h2 {
  margin: 0;
  color: #162843;
  font-size: 29px;
  letter-spacing: 0;
}

.beauty-category-section-head a {
  color: #cf6174;
  font-size: 13px;
  font-weight: 800;
}

.beauty-treatment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.beauty-treatment-grid a {
  min-height: 156px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  grid-template-rows: 42px 1fr;
  column-gap: 14px;
  row-gap: 8px;
  align-items: start;
  overflow: hidden;
  padding: 18px;
  border: 1px solid #f1d7dc;
  border-radius: 8px;
  background: #fff;
}

.beauty-treatment-grid a > img:last-child {
  width: 112px;
  height: 104px;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: end;
  border-radius: 6px;
  object-fit: cover;
}

.beauty-treatment-icon {
  width: 42px;
  height: 42px;
  grid-column: 1;
  grid-row: 1;
  object-fit: contain;
}

.beauty-treatment-grid a > div {
  grid-column: 1;
  grid-row: 2;
}

.beauty-treatment-grid h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.beauty-treatment-grid p {
  margin: 0;
  color: #66778d;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}

.beauty-category-area-section {
  padding-top: 62px;
}

.beauty-area-layout {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 46px;
  align-items: center;
}

.beauty-area-map p {
  display: none;
  margin: 0 0 18px;
  color: #4a5d76;
  font-weight: 700;
  line-height: 1.8;
}

.beauty-area-map img {
  width: 260px;
  max-width: 100%;
  display: block;
}

.beauty-region-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.beauty-region-grid a {
  min-height: 126px;
  position: relative;
  display: block;
  padding: 24px 44px 20px 24px;
  border: 1px solid #f1d7dc;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff, #fff9fa);
}

.beauty-region-grid a::after {
  content: "窶ｺ";
  position: absolute;
  right: 24px;
  top: 28px;
  color: #cf6174;
  font-size: 24px;
  line-height: 1;
}

.beauty-region-grid strong {
  display: block;
  margin-bottom: 12px;
  color: #162843;
  font-size: 18px;
}

.beauty-region-grid span {
  color: #5f7086;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}

.beauty-clinic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.beauty-clinic-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #f1d7dc;
  border-radius: 8px;
  background: #fff;
}

.beauty-ribbon {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 4px;
  background: #cf6174;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.beauty-ribbon.teal {
  background: #3d8b99;
}

.beauty-clinic-card > img {
  width: 100%;
  height: auto;
  aspect-ratio: 144 / 106;
  display: block;
  object-fit: cover;
  border-bottom: 1px solid #f2dde2;
}

.beauty-clinic-card > div {
  padding: 16px;
}

.beauty-clinic-card h3 {
  min-height: 48px;
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.55;
}

.beauty-clinic-card p,
.beauty-clinic-card small {
  display: block;
  color: #607187;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
}

.beauty-clinic-card div div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0;
}

.beauty-clinic-card span:not(.beauty-ribbon) {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  background: #f7f8fb;
  color: #66778d;
  font-size: 11px;
  font-weight: 800;
}

.beauty-clinic-card em {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  border: 1px solid #efb7c1;
  border-radius: 4px;
  color: #cf6174;
  font-style: normal;
  font-weight: 800;
}

.beauty-column-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.beauty-column-grid a {
  overflow: hidden;
  border: 1px solid #f1d7dc;
  border-radius: 8px;
  background: #fff;
}

.beauty-column-grid span {
  display: inline-flex;
  margin: 14px 14px 8px;
  padding: 4px 9px;
  border-radius: 4px;
  background: #fff2f4;
  color: #cf6174;
  font-size: 12px;
  font-weight: 800;
}

.beauty-column-grid span.teal {
  background: #edf8fa;
  color: #317889;
}

.beauty-column-grid img {
  width: calc(100% - 28px);
  height: 128px;
  display: block;
  margin: 0 14px 12px;
  border-radius: 6px;
  object-fit: cover;
}

.beauty-column-grid h3 {
  min-height: 48px;
  margin: 0;
  padding: 0 14px;
  font-size: 15px;
  line-height: 1.6;
}

.beauty-column-grid time {
  display: block;
  padding: 14px;
  color: #607187;
  font-size: 12px;
}

.beauty-guide-section {
  padding-bottom: 62px;
}

.beauty-guide-section h2 {
  margin-bottom: 22px;
}

.beauty-first-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.beauty-first-guide-grid a {
  min-height: 116px;
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: center;
  padding: 22px 34px 22px 20px;
  border: 1px solid #f1d7dc;
  border-radius: 8px;
  background: #fff;
}

.beauty-first-guide-grid a::after {
  content: "窶ｺ";
  position: absolute;
  right: 18px;
  color: #cf6174;
  font-size: 22px;
}

.beauty-first-guide-grid img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  grid-row: span 2;
}

.beauty-first-guide-grid strong {
  color: #cf6174;
}

.beauty-first-guide-grid span {
  color: #607187;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
}

.beauty-category-footer {
  padding: 48px 0 24px;
  background: #fbfcfe;
  border-top: 1px solid #f1d7dc;
}

.beauty-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
}

.beauty-category-footer p,
.beauty-category-footer a {
  color: #4d5f75;
  font-size: 13px;
  line-height: 1.8;
}

.beauty-category-footer a {
  display: block;
  margin: 8px 0;
}

.beauty-category-footer strong {
  display: block;
  margin-bottom: 12px;
  color: #162843;
}

.beauty-footer-brand p {
  margin: 14px 0 18px;
}

.beauty-footer-btn {
  min-height: 42px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 220px;
  border: 1px solid #efb7c1;
  border-radius: 4px;
  color: #cf6174 !important;
  font-weight: 800;
}

.beauty-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 38px;
  padding-top: 18px;
  border-top: 1px solid #edf1f5;
  color: #6f7f93;
}

@media (max-width: 1000px) {
  .beauty-category-header-inner {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px 0;
  }

  .beauty-category-nav {
    flex-wrap: wrap;
    gap: 12px;
  }

  .beauty-category-hero-bg {
    background:
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.72)),
      url("../images/comp/beauty-profile-hero.png") center top / cover no-repeat;
  }

  .beauty-category-hero-inner,
  .beauty-category-search-grid,
  .beauty-treatment-grid,
  .beauty-area-layout,
  .beauty-region-grid,
  .beauty-clinic-grid,
  .beauty-column-grid,
  .beauty-first-guide-grid,
  .beauty-footer-grid {
    grid-template-columns: 1fr;
  }

  .beauty-category-copy h1 {
    font-size: 34px;
  }

  .beauty-category-hero-cards {
    justify-self: stretch;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
  }

  .beauty-treatment-grid a {
    grid-template-columns: minmax(0, 1fr) 110px;
  }

  .beauty-treatment-grid a > img:last-child {
    width: 110px;
  }

  .beauty-footer-bottom {
    flex-direction: column;
  }
}

/* =========================================================
   ver01 繝ｬ繧ｹ繝昴Φ繧ｷ繝門ｯｾ蠢懊Ξ繧､繝､繝ｼ
   1. 繝倥ャ繝€繝ｼ縺ｮ繝上Φ繝舌�繧ｬ繝ｼ繝｡繝九Η繝ｼ蛹厄ｼ�JS荳崎ｦ√�checkbox繝医げ繝ｫ��
   2. SP譎ゅ�蟾ｦ蜿ｳ菴咏區繧�15px縺ｫ邨ｱ荳€
   3. 繝輔ャ繧ｿ繝ｼ縺ｮSP譛€驕ｩ蛹�
   譌｢蟄倥Ν繝ｼ繝ｫ縺ｯ螟画峩縺帙★縲∵悽繝悶Ο繝�け繧貞ｾ悟享縺｡縺ｧ荳頑嶌縺阪☆繧九€�
   ========================================================= */

/* --- 繝上Φ繝舌�繧ｬ繝ｼ驛ｨ蜩�ｼ�PC縺ｧ縺ｯ髱櫁｡ｨ遉ｺ�� --- */
.nav-toggle { display: none; }
.nav-toggle-btn { display: none; }

/* === 繝上Φ繝舌�繧ｬ繝ｼ繝｡繝九Η繝ｼ�医ち繝悶Ξ繝�ヨ縲彜P: 縲�1000px�� === */
@media (max-width: 1000px) {
  /* 繝倥ャ繝€繝ｼ繧呈ｨｪ荳ｦ縺ｳ縺ｫ蝗ｺ螳夲ｼ医Ο繧ｴ蟾ｦ繝ｻ繝上Φ繝舌�繧ｬ繝ｼ蜿ｳ�峨€よ里蟄倥�column蛹悶ｒ謇薙■豸医☆ */
  .header-inner,
  .top-header-inner,
  .area-list-header-inner,
  .beauty-category-header-inner {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    min-height: 60px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    position: relative;
  }

  .logo { font-size: 22px; }

  /* 繝上Φ繝舌�繧ｬ繝ｼ繝懊ち繝ｳ陦ｨ遉ｺ */
  .nav-toggle-btn {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    border-radius: 6px;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ink, #10213f);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }

  /* 繝翫ン繧偵ラ繝ｭ繝��繝€繧ｦ繝ｳ繝代ロ繝ｫ蛹厄ｼ�site-header蝓ｺ貅悶〒蜈ｨ蟷�ｼ� */
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    background: #fff;
    border-top: 1px solid var(--line, #e4ebf2);
    border-bottom: 1px solid var(--line, #e4ebf2);
    box-shadow: 0 14px 26px rgba(8, 28, 54, .12);
    padding: 6px 0;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }
  .nav-toggle:checked ~ .nav { display: flex; }

  /* 繝上Φ繝舌�繧ｬ繝ｼ竊津励い繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ */
  .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* 繝峨Ο繝��繝€繧ｦ繝ｳ蜀��繝ｪ繝ｳ繧ｯ謨ｴ蠖｢ */
  .nav a {
    display: block;
    padding: 13px 15px;
    border-bottom: 1px solid #f0f4f8;
    font-size: 15px;
    line-height: 1.4;
  }
  .nav > a:last-child { border-bottom: none; }

  /* 繝翫ン蜀��繝懊ち繝ｳ�域軸霈峨�譖ｴ譁ｰ縺ｯ縺薙■繧� 遲会ｼ峨�繝代ロ繝ｫ蜀��繧ｿ繝ｳ隱ｿ縺ｫ */
  .nav a.btn,
  .nav a.btn.outline,
  .nav .top-owner-btn,
  .nav .area-list-owner-btn,
  .nav .beauty-category-owner-btn,
  .nav .beauty-owner-btn {
    margin: 8px 15px;
    min-height: 44px;
    display: flex;
    border-radius: 6px;
    border: 1px solid var(--teal, #07899a);
    color: var(--teal, #07899a);
  }
}

/* === SP譛€驕ｩ蛹厄ｼ医€�768px��: 蟾ｦ蜿ｳ菴咏區15px邨ｱ荳€ + 繝輔ャ繧ｿ繝ｼ === */
@media (max-width: 768px) {
  /* 蜷�さ繝ｳ繝�リ縺ｮ蟾ｦ蜿ｳ菴咏區繧�15px縺ｫ邨ｱ荳€�育ｸｦ譁ｹ蜷代�菴咏區繝ｻ繝槭�繧ｸ繝ｳ縺ｯ貂ｩ蟄假ｼ� */
  .container,
  .header-inner,
  .top-header-inner,
  .hero-inner,
  .top-container,
  .area-list-container,
  .area-list-header-inner,
  .beauty-category-container,
  .beauty-category-header-inner {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box;
  }

  /* --- 繝輔ャ繧ｿ繝ｼSP譛€驕ｩ蛹厄ｼ井ｸ€闊ｬ逞�劼邉ｻ�� --- */
  .top-footer { padding: 28px 0 24px; }
  .footer-top-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 18px;
  }
  .footer-top-grid > div:first-child { grid-column: 1 / -1; }
  .footer-logo { font-size: 22px; }
  .top-footer strong { margin-bottom: 6px; }
  .top-footer a { margin: 6px 0; }

  /* --- 繝輔ャ繧ｿ繝ｼSP譛€驕ｩ蛹厄ｼ育ｾ主ｮｹ繧ｫ繝�ざ繝ｪ�� --- */
  .beauty-category-footer { padding: 32px 0 20px; }
  .beauty-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 18px;
  }
  .beauty-footer-grid > .beauty-footer-brand { grid-column: 1 / -1; }
  .beauty-footer-btn { width: 100% !important; }
  .beauty-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 24px;
  }
}

/* === 迢ｭ蟷�SP�医€�460px��: 繝輔ャ繧ｿ繝ｼ繧�1繧ｫ繝ｩ繝�縺ｫ === */
@media (max-width: 460px) {
  .footer-top-grid,
  .beauty-footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* === SP: 繝��繝悶Ν縺ｮ縺ｯ縺ｿ蜃ｺ縺怜ｯｾ遲厄ｼ医€�768px�� === */
@media (max-width: 768px) {
  /* 繧ｰ繝ｪ繝�ラ繝医Λ繝�け繧�0縺ｾ縺ｧ邵ｮ蟆丞庄閭ｽ縺ｫ縺吶ｋ��min-content逕ｱ譚･縺ｮ縺ｯ縺ｿ蜃ｺ縺鈴亟豁｢�� */
  .page-layout,
  .hospital-profile-layout,
  .beauty-profile-layout,
  .area-list-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* 髟ｷ縺ФRL遲峨�騾｣邯壽枚蟄怜�繧呈釜繧願ｿ斐☆ */
  .table th,
  .table td,
  .table td a,
  .profile-table td,
  .profile-table td a,
  .area-list-main td,
  .area-hospital-card td {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* 螟壼�縺ｮ險ｺ逋よ凾髢楢｡ｨ縺ｯ讓ｪ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ縺ｧ蜿ｯ隕匁€ｧ繧堤｢ｺ菫� */
  table.hours,
  table.beauty-hours {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* 繝壹�繧ｸ繝阪�繧ｷ繝ｧ繝ｳ縺ｯ謚倥ｊ霑斐＠縺ｦ縺ｯ縺ｿ蜃ｺ縺励ｒ髦ｲ縺� */
  .area-pagination {
    flex-wrap: wrap;
  }
}

/* =========================================================
   ver01 菫ｮ豁｣繝ｬ繧､繝､繝ｼ�医き繝�ざ繝ｪ繧ｫ繝ｼ繝� / 繧ｰ繝ｪ繝�ラ螟壼�蛹� / 繝舌ャ繧ｸ��
   ========================================================= */

/* (4) 縺顔衍繧峨○繝舌ャ繧ｸ: 繧ｰ繝ｪ繝�ラ縺ｮstretch縺ｧ邵ｦ髟ｷ縺ｫ縺ｪ繧九�繧帝亟縺守ｴｰ髟ｷ繝舌ャ繧ｸ縺ｫ */
.notice-box a { align-items: center; }
.notice-box span {
  align-self: center;
  height: fit-content;
  line-height: 1.5;
}

/* (3) 髯｢蜀�ｨｭ蛯吶�蟇ｾ蠢� / 險ｺ逋らｧ醍岼繧｢繧､繧ｳ繝ｳ遲峨�繧ｳ繝ｳ繝代け繝医げ繝ｪ繝�ラ縺ｯ
       SP縺ｧ繧�1蛻励↓縺帙★隍�焚蛻励〒隕九○繧具ｼ育ｾ弱＠縺輔�蛻ｩ萓ｿ諤ｧ蜆ｪ蜈茨ｼ� */
@media (max-width: 768px) {
  .specialty-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .facility-grid  { grid-template-columns: repeat(3, 1fr) !important; }
  .specialty-directory { grid-template-columns: repeat(2, 1fr) !important; }
  .symptom-grid,
  .hospital-specialty-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .facility-grid span { min-height: 56px; font-size: 12px; }
  .specialty-grid a { min-height: 96px; padding: 14px 8px; }
  .specialty-card { min-height: 150px; }
}
@media (max-width: 460px) {
  .specialty-grid,
  .facility-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* (2) 繝医ャ繝励€後き繝�ざ繝ｪ縺九ｉ謗｢縺吶€阪き繝ｼ繝峨�SP譛€驕ｩ蛹�
       - 蜀��菴咏區繧�15px縺ｫ縲�℃蜑ｰ縺ｪ菴咏區繧定ｧ｣豸�
       - 蜀咏悄縺ｯ豁｣譁ｹ蠖｢繧偵ｄ繧∵ｨｪ髟ｷ縺ｧ鄒弱＠縺� */
@media (max-width: 1000px) {
  .top-category-card {
    grid-template-columns: 1fr !important;
    padding: 15px !important;
    gap: 14px !important;
    min-height: 0;
  }
  .category-photo {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  /* 繧ｫ繝ｼ繝牙承遶ｯ縺ｮ陬�｣ｾ遏｢蜊ｰ蛻励�SP縺ｧ縺ｯ荳崎ｦ� */
  .top-category-card .card-arrow { display: none; }
}

/* === 縺顔衍繧峨○��notice-box�峨�SP譛€驕ｩ蛹� ===
   PC縺ｮ3繧ｫ繝ｩ繝��域律莉�/繝舌ャ繧ｸ/繧ｿ繧､繝医Ν�峨�SP縺ｧ縺ｯ
   繧ｿ繧､繝医Ν蛻励′逞ｩ縺帙※邵ｦ菴咏區縺瑚�繧峨�縺溘ａ縲�
   1陦檎岼: 譌･莉�+繝舌ャ繧ｸ / 2陦檎岼: 繧ｿ繧､繝医Ν蜈ｨ蟷� 縺ｫ蜀肴ｧ区� */
@media (max-width: 768px) {
  .notice-box { padding: 15px; }
  .notice-box h2 { margin-bottom: 8px; }
  .notice-box a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 10px 0;
  }
  .notice-box time { font-size: 12px; color: #6c7e95; }
  .notice-box strong {
    flex-basis: 100%;
    line-height: 1.55;
  }
}

/* =========================================================
   ver01 繝�じ繧､繝ｳ繝代せ v2
   - PC: 髢｢騾｣險ｺ逋らｧ醍岼繝懊ち繝ｳ / index2 CTA / 繧ｹ繝ｩ繧､繝€繝ｼ蠖ｱ蛻�ｌ
   - SP: 縲悟庶縺ｾ繧九€阪〒縺ｯ縺ｪ縺上€檎ｾ弱＠縺乗紛逅�＆繧後◆縲崎｡ｨ遉ｺ縺ｸ蜈ｨ髱｢隱ｿ謨ｴ
   ========================================================= */

/* --- PC: 髢｢騾｣縺吶ｋ險ｺ逋らｧ醍岼繝懊ち繝ｳ�医い繧､繧ｳ繝ｳ縺ｨ繝�く繧ｹ繝医�繝舌Λ繝ｳ繧ｹ隱ｿ謨ｴ�� --- */
.profile-link-grid.compact-links a {
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
  text-align: left;
  line-height: 1.4;
}
.profile-link-grid.compact-links img {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}

/* --- PC: index2 荳矩ΚCTA�医�繧ｿ繝ｳ譁�ｭ励�縺ｯ縺ｿ蜃ｺ縺励�逕ｻ蜒上→繝�く繧ｹ繝医�荳肴純縺�ｧ｣豸茨ｼ� --- */
.article2-cta { align-items: stretch; }
.article2-cta > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 26px 0 26px 28px;
}
.article2-cta h2 { font-size: 21px; }
.article2-cta span {
  min-width: 0;
  padding: 0 22px;
  white-space: nowrap;
}
.article2-cta img {
  height: 100%;
  min-height: 210px;
}

/* --- PC: index2 繧ｹ繝ｩ繧､繝€繝ｼ�亥ｷｦ蜿ｳ繧ｹ繝ｩ繧､繝峨�荳狗ｫｯ繝ｻ蠖ｱ縺悟�繧後ｋ蝠城｡鯉ｼ� --- */
.conne-slider-viewport { padding: 10px 0 16px; }

/* === SP 繝�じ繧､繝ｳ繝代せ�医€�768px�� === */
@media (max-width: 768px) {

  /* --- 邵ｦ繝ｪ繧ｺ繝�: 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ菴咏區縺ｮ蝨ｧ邵ｮ --- */
  .section { padding: 30px 0; }
  .top-section { padding: 24px 0; }
  .section-gap { margin-top: 28px; }
  .hero-inner { padding: 26px 0 22px; }
  .card { padding: 14px; }

  /* 隕句�縺励し繧､繧ｺ */
  h1,
  .top-hero h1,
  .beauty-category-copy h1,
  .area-list-hero h1 { font-size: 25px; }

  /* 繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ隕句�縺�: 1陦後↓蜿弱ａ縲√Μ繝ｳ繧ｯ縺ｯ謚倥ｊ霑斐＆縺ｪ縺� */
  .section-head { gap: 10px; margin-bottom: 14px; }
  .section-head h2 { font-size: 19px; }
  .section-head > a { flex: 0 0 auto; font-size: 12px; white-space: nowrap; }

  /* --- 蝨ｰ蝓溘°繧画爾縺呻ｼ�region-table��: 逵悟錐繧偵メ繝��蛹悶＠縺ｦ髱｢縺ｧ隕九○繧� --- */
  .region-table { grid-template-columns: 1fr; }
  .region-table > div {
    min-height: 0;
    padding: 13px 15px;
    border-right: 0;
    border-bottom: 1px solid #e3edf4;
  }
  .region-table > div:last-child { border-bottom: 0; }
  .region-table strong { margin-bottom: 9px; font-size: 14px; }
  .region-table a {
    display: inline-block;
    padding: 6px 13px;
    margin: 0 6px 6px 0;
    border: 1px solid #d7e3ed;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    line-height: 1.4;
  }

  /* --- 驛ｽ驕灘ｺ懃恁繧ｫ繝ｼ繝会ｼ�area-grid��: 2蛻励�繧ｳ繝ｳ繝代け繝医き繝ｼ繝� --- */
  .area-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .area-card { min-height: 0; padding: 13px 10px 13px 66px; }
  .prefecture-shape { left: 8px; width: 48px; height: 40px; }
  .area-card strong { font-size: 14px; }
  .area-card small { font-size: 11px; }

  /* --- 逞�劼繧ｫ繝ｼ繝�: 邵ｦ遨阪∩繧偵ｄ繧√€∝�逵溷ｷｦ縺ｮ讓ｪ蝙九Μ繧ｹ繝医↓ --- */
  .clinic-card-grid { gap: 10px; }
  .clinic-card {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: stretch;
  }
  .clinic-card img {
    width: 118px;
    height: 100%;
    aspect-ratio: auto;
    border-bottom: 0;
    border-right: 1px solid #e3edf4;
  }
  .clinic-card > div { padding: 11px 13px; }
  .clinic-card h3 { font-size: 15px; margin: 0 0 4px; }
  .clinic-card p,
  .clinic-card small { font-size: 12px; }

  /* --- 險倅ｺ九き繝ｼ繝�: 蜷後§縺丞�逵溷ｷｦ縺ｮ讓ｪ蝙九Μ繧ｹ繝医↓ --- */
  .media-card-grid { gap: 10px; }
  .media-card {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    align-items: stretch;
  }
  .media-card img {
    height: 100%;
    aspect-ratio: auto;
    border-bottom: 0;
    border-right: 1px solid #e3edf4;
  }
  .media-card > div { padding: 10px 12px; }
  .media-card span { margin-bottom: 6px; padding: 2px 7px; }
  .media-card h3 { font-size: 14px; line-height: 1.5; }
  .media-card time { font-size: 11px; }

  /* --- 鄒主ｮｹ繧ｯ繝ｪ繝九ャ繧ｯ繧ｫ繝ｼ繝� / 繧ｳ繝ｩ繝�繧ｫ繝ｼ繝� --- */
  .beauty-clinic-grid { gap: 10px; }
  .beauty-clinic-card {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    align-items: stretch;
  }
  .beauty-clinic-card > img {
    width: 124px;
    height: 100%;
    aspect-ratio: auto;
    border-bottom: 0;
    border-right: 1px solid #f2dde2;
  }
  .beauty-clinic-card > div { padding: 10px 12px; }
  .beauty-ribbon { top: 8px; left: 8px; padding: 3px 7px; font-size: 10px; }
  .beauty-column-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .beauty-menu-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .beauty-menu-card { min-height: 0; padding: 14px 10px; }

  /* --- 豎守畑繧ｫ繝ｼ繝峨げ繝ｪ繝�ラ: 1蛻苓誠縺｡繧偵ｄ繧√※2蛻励↓ --- */
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  /* feature-card 縺ｯ蜈�€�€悟�逵溷ｷｦ縺ｮ讓ｪ蝙九き繝ｼ繝峨€阪↑縺ｮ縺ｧ1蛻励�縺ｾ縺ｾ遨阪� */
  .grid-3:has(.feature-card) { grid-template-columns: 1fr !important; }
  .grid-4:not(:has(.clinic-card)) { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .article2-card-row.five,
  .article2-card-row.four { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .article2-card-row a { min-height: 0; }

  /* --- 繝輔ャ繧ｿ繝ｼ: 迢ｭ蟷�〒繧�2蛻励ｒ邯ｭ謖�ｼ�1蛻励�髢灘ｻｶ縺ｳ遖∵ｭ｢�� --- */
  .footer-top-grid,
  .beauty-footer-grid { grid-template-columns: 1fr 1fr !important; }
}

/* === 隧ｳ邏ｰ繝壹�繧ｸ SP: 髢｢騾｣險倅ｺ� 縺ｨ 繧ｨ繝ｪ繧｢繝ｪ繝ｳ繧ｯ蟶ｯ縺ｮ譛€驕ｩ蛹厄ｼ医€�768px�� === */
@media (max-width: 768px) {
  /* (1) 髢｢騾｣險倅ｺ九�險ｺ逋ゅぎ繧､繝�: 繧ｵ繝�繝榊ｷｦ繝ｻ譛ｬ譁�承縺ｮ讓ｪ蝙九Μ繧ｹ繝医↓ */
  .beauty-guide-row { grid-template-columns: 1fr; gap: 10px; }
  .beauty-guide-row a {
    min-height: 0;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    padding: 8px;
  }
  .beauty-guide-row img {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 104px;
    height: 72px;
    border-radius: 6px;
  }
  .beauty-guide-row span {
    position: static;
    justify-self: start;
    margin: 0;
    padding: 2px 8px;
  }
  .beauty-guide-row strong,
  .beauty-guide-row small { padding: 0; }
  .beauty-guide-row strong { font-size: 14px; line-height: 1.5; margin: 3px 0; }
  .beauty-guide-row small { color: #6c7e95; font-size: 11px; }

  /* (2) 縲娯雷笳九ｒ謗｢縺吶€阪Μ繝ｳ繧ｯ蟶ｯ: 邏ｰ髟ｷ縺�1蛻励↓ */
  .profile-link-band .profile-link-grid { grid-template-columns: 1fr; gap: 10px; }
  .profile-link-band .profile-link-grid a {
    min-height: 0;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 16px;
    font-size: 14px;
  }
  .profile-link-band .profile-link-grid img { width: 28px; height: 28px; }
}

/* === index2 繧ｹ繝ｩ繧､繝€繝ｼ SP: 菴咏區縺ｮ譛€蟆丞喧 + 繝輔Μ繝�け蟇ｾ蠢懊�荳句慍 === */
.conne-slider-viewport { touch-action: pan-y; }
.conne-slider-track img { -webkit-user-drag: none; user-select: none; }

@media (max-width: 768px) {
  .conne-fv-slider { padding: 12px 0 14px; }
  .conne-slider-viewport { padding: 4px 0 0; }

  /* 繧ｫ繝ｼ繝牙�繝�く繧ｹ繝�: 蝗ｺ螳�160px竊貞�螳ｹ縺ｫ蠢懊§縺滄ｫ倥＆縺ｸ */
  .conne-fv-text {
    height: auto;
    min-height: 0;
    padding: 13px 18px 14px;
  }
  .conne-fv-text time { margin-top: 6px; }

  /* 繝壹�繧ｸ繝阪�繧ｷ繝ｧ繝ｳ繝ｻ繧､繝ｳ繧ｸ繧ｱ繝ｼ繧ｿ繝ｼ: 荳贋ｸ九�辟｡鬧�ｒ髯､蜴ｻ縺励▽縺､繧ｿ繝��鬆伜沺縺ｯ遒ｺ菫� */
  .conne-slider-dots { top: 0; margin-top: 2px; }
  .conne-slider-dots button {
    width: 40px;
    height: 24px;
    padding: 11px 8px;
  }
  .conne-slider-dots button::before { width: 24px; height: 2px; }
}

/* === index2 繝｡繝九Η繝ｼ繧ｫ繝ｼ繝�: SP縺ｧ1蛻励�髢灘ｻｶ縺ｳ繧偵ｄ繧�2蛻励↓ === */
@media (max-width: 768px) {
  .article2-menu-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .article2-menu-grid a { min-height: 0; padding: 14px 10px; }
  .article2-menu-grid strong { font-size: 14px; }
  .article2-menu-grid span { font-size: 11px; }
}

/* === 荳ｭ騾泌濠遶ｯ縺ｪ陦梧釜繧後�髦ｲ豁｢ === */
/* 繝√ャ繝励�蜀�Κ縺ｧ謚倥ｊ霑斐＆縺壹€√メ繝��縺斐→谺｡陦後∈騾√ｋ */
.chips .chip,
.chip { white-space: nowrap; }

/* === 繝ｪ繧ｹ繧ｯ繝ｻ蜑ｯ菴懃畑繝ｻ豕ｨ諢丈ｺ矩��: 縲瑚ｩｳ縺励￥隕九ｋ縲阪ｒ譛ｬ譁��荳九∈ === */
.risk-box {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 14px;
}
.risk-box > a { justify-self: start; }

/* === 蜀�ｧ代け繝ｪ繝九ャ繧ｯ繧呈爾縺呻ｼ域眠逹€鬆�ｼ�: SP縺ｯ繝��繝悶Ν竊偵き繝ｼ繝峨Μ繧ｹ繝亥喧 === */
@media (max-width: 768px) {
  .clinic-list-table,
  .clinic-list-table tbody { display: block; border: 0; background: transparent; }
  .clinic-list-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px 12px;
    margin-bottom: 10px;
    padding: 13px 15px;
    border: 1px solid var(--line, #e4ebf2);
    border-radius: 8px;
    background: #fff;
  }
  .clinic-list-table td {
    display: block;
    grid-column: 1 / -1;
    padding: 0 !important;
    border: 0 !important;
    font-size: 12px;
    color: #5b6b83;
  }
  /* 蛹ｻ髯｢蜷� */
  .clinic-list-table td:first-child {
    font-size: 15px;
    font-weight: 800;
    color: #17345d;
    margin-bottom: 2px;
  }
  /* 譖ｴ譁ｰ譌･ + 隧ｳ邏ｰ繝懊ち繝ｳ繧呈怙邨り｡後↓蟾ｦ蜿ｳ驟咲ｽｮ */
  .clinic-list-table td:nth-child(5) {
    grid-column: 1;
    align-self: center;
    color: #8a99ad;
    font-size: 11px;
    margin-top: 6px;
  }
  .clinic-list-table td:last-child {
    grid-column: 2;
    grid-row: 5;
    justify-self: end;
    margin-top: 6px;
  }
  .clinic-list-table td:last-child a {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid var(--teal, #07899a);
    border-radius: 6px;
    color: var(--teal, #07899a);
    font-weight: 700;
    font-size: 12px;
  }
}