@charset "utf-8";

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;

  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  margin: 0;
  color: var(--ink);
  background: #fff;
  line-height: 1.7;
  font-size: 14px;
}

main {
  flex-grow: 1;
  background: linear-gradient(180deg, #f7fbfd 0%, #ffffff 46%, #f7fbfd 100%);
}

img {
  display: block;
  width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

ul:where(:not([class])) {
  list-style-type: disc;
  padding-left: 1.2em;
}

ol:where(:not([class])) {
  list-style-type: decimal;
  padding-left: 1.2em;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 
body:has(.media-top) .top-owner-btn {
  display: none;
} */

.btn.outline {
  transition: .2s;

  border-color: #9ac9d2;
  color: var(--teal-dark);
}

.btn.outline:hover {
  color: #fff;
  background: var(--teal-dark);

  border-color: var(--teal);
}

.photo {
  min-height: auto;

  border-radius: 6px;
  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;
}

.breadcrumb-wrap {
  background: #fff;
  border-bottom: 2px solid #dbe8ef;
}

.breadcrumb {
  font-size: 12px;
  color: #5a7188;
  padding-top: 14px;
  padding-bottom: 14px;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.breadcrumb a {
  color: #687c96;
  font-weight: normal;
}

.container:has(.breadcrumb) {
  overflow-x: auto;
  scrollbar-width: thin;
}

.breadcrumb .wrap {
  overflow-x: auto;
}

.breadcrumb .pankuzu {
  display: flex;
  gap: 6px;
}

.breadcrumb li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  word-break: keep-all;
  flex-shrink: 0;
}

.breadcrumb li:not(:last-of-type)::after {
  content: "＞";
  font-size: 1em;
}

.breadcrumb li:last-child span {
  font-weight: bold;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.hero-cat {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hero-cat a {
  border: 2px solid #dbe8ef;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 180px;
  gap: 16px;
}

.article-page .hero-inner {
  min-height: 140px;
}

.hero-inner .pr {
  font-size: 11px;
  border: 1px solid #5b6b83;
  padding: 4px 8px;
  line-height: 1;
}

.clinics-clinic-page .feature-card {
  display: block;
}

.archive .media-card-grid {
  gap: 30px 20px;
}

a.media-card:hover img,
a.feature-card:hover img {
  transform: scale(1.05);
}

.media-card .media-card-img,
.feature-card-img {
  aspect-ratio: 845 / 494;
  padding: 0;
  overflow: hidden;
}

.media-card .media-card-img img,
.feature-card-img img {
  transition: .4s;
}

.feature-card .tag {
  margin-bottom: 10px;
}

.feature-card .post-ttl {
  font-size: 16px;
}

.owner-update-card ul {
  margin: 1em 0;

  padding-left: 1.2em;
}

.tag.pr {
  margin-bottom: 10px;

  background: #fff4df;
  color: #925d00;
}

.consulting .tag {
  background: var(--white);
  margin-bottom: 10px;
}

.sidebar {
  position: static;

  top: 92px;
  display: grid;
  gap: 16px;
}

.sidebar .card-ttl {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}

.sidebar-img {
  margin-bottom: 20px;

  height: 132px;
}

.sidebar .chips {
  margin-bottom: 14px;
}

.sidebar .view-more {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.popular-list li a:hover {
  text-decoration: underline;
}

.article-body {
  min-width: 0;

  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 34px;
  font-size: 16px;
}

@media (max-width: 1000px) {
  .article-body {
    padding: 24px;
  }
}

.article-body>:last-child {
  margin-bottom: 0;
}

.column-article h2 span {
  width: auto;
  height: auto;
  display: block;
  border-radius: 0;
  color: var(--ink);
  font-size: 1em;
  background: transparent;
  place-items: start;
}

.thumbnail {
  margin-bottom: 24px;
}

/* /area/配下のクリニック一覧（.clinic-result-pagination。assets/css/clinic-result-card.css）
   と見た目を揃えている。あちらはbutton直列、こちらはpaginate_links()のul/li/a構造のため、
   最終的にリンク／ボタンとして見える要素（li > *）に同じスタイルを当てている。 */
.pagination {
  margin: 50px 0 0;
}

.pagination ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: fit-content;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.pagination li>* {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid #c7dbe4;
  border-radius: 8px;
  background: var(--white);
  color: #496278;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.pagination li a:hover {
  background: var(--blue-light);
  border-color: var(--teal);
}

.pagination li:has(.current)>* {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}

.pagination li:has(.dots)>* {
  border: none;
  background: none;
  min-width: auto;
  padding: 0;
}

.pagination .dots {
  width: 30px;
}

@media (max-width: 1000px) {
  .media-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .archive .media-card-grid {
    gap: 10px;
  }
}

.top-footer p {
  margin: 1.3em 0;
  line-height: 1.7;
}


.article-page .section {
  background: #fff;
  border-top: 1px solid var(--line);
}



/* パーツ */

:root {
  --c-btn: #df8190;
  --blue-light: #eaf7fa;

  --ink: #10213f;
  --muted: #526b80;
  --line: #b6ceda;
  --line-strong: #7fa9bc;
  --soft: #f6f9fc;
  --soft-blue: #edf7fb;
  --teal: #007382;
  --teal-dark: #006f7d;
  --teal-soft: #eaf8fa;
  --navy: #12305b;
  --text: #1f354d;
  --rose: #c9828d;
  --rose-soft: #fff5f5;
  --gold: #b78b45;
  --white: #fff;
  --shadow: 0 16px 40px rgba(16, 33, 63, .08);
  --radius: 12px;
  --radius-panel: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "YuGothic", "Segoe UI", sans-serif;
}

.article-body textarea {
  width: 100%;
  height: 120px;
}

.article-body a {
  color: #1A0DAB;
  text-decoration: underline;
  transition: .4s;
}

.article-body a:hover {
  opacity: .6;
}

:where(.article-body) p {
  margin-bottom: 1em;
}

.article-body h2 {
  display: block;
  margin: 70px 0 40px;
  padding: 0.6em;
  border-top: 3px solid var(--teal);
  border-bottom: 3px solid var(--teal);
}

.article-body h3 {
  margin: 40px 0 26px;
  padding: 0.4em 0.6em;
  border-left: 3px solid var(--teal);
  font-size: 22px;
}

.article-body h4 {
  font-size: 20px;
  margin: 34px 0 20px;
}

.subhead {
  position: relative;
  margin: 34px 0 20px;
  padding-left: 1.3em;
  font-size: 20px;
  font-weight: bold;
}

.subhead::before {
  position: absolute;
  top: .46em;
  left: 3px;
  content: '';
  display: block;
  width: .8em;
  aspect-ratio: 1 / 1;
  background: var(--teal);
}

.numhead {
  position: relative;
  margin: 34px 0 20px;
  padding-left: 2.3em;
  font-size: 20px;
  font-weight: bold;
}

.numhead-num {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  width: 1.8em;
  aspect-ratio: 1 / 1;
  background: var(--teal);
  color: var(--white);
  border-radius: 4px;
}

.pink {
  color: var(--rose);
  font-weight: bold;
}

.blue {
  color: var(--teal);
  font-weight: bold;
}

.caution {
  display: inline-block;
  font-size: 11px;
  color: #707070;
}

p .caution {
  margin-bottom: 0;
}

*:has(+.caution) {
  margin-bottom: 2px;
}

.bold {
  font-weight: bold;
}

.marker {
  background: linear-gradient(transparent 70%, #ffff99 70%);
  font-weight: bold;
}

.w100-img {
  width: 100%;
  margin-bottom: 26px;
}

.w80-img {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 26px;
}

.tbl {
  width: 100%;
  margin-bottom: 26px;
  table-layout: fixed;
  font-size: 14px;
}

.tbl,
.tbl td,
.tbl th {
  border: 1px solid var(--line);
}

.tbl thead th {
  background: #94cacf;
  border: 1px solid #e3e3e3;
}

.tbl thead th,
.tbl tbody th {
  font-weight: bold;
  text-align: center;
}

.tbl tbody th {
  background: var(--soft);
}

.tbl th,
.tbl td {
  padding: 15px 10px;
  vertical-align: middle;
  text-align: center;
}

.tbl th>:first-child,
.tbl td>:first-child {
  margin-top: 0;
}

.tbl th>:last-child,
.tbl td>:last-child {
  margin-bottom: 0;
}

.tbl th ul:where(:not([class])),
.tbl td ul:where(:not([class])),
.tbl th ol:where(:not([class])),
.tbl td ol:where(:not([class])),
.tbl th .checklist,
.tbl td .checklist {
  text-align: left;
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
}

.tbl th ul:where(:not([class])) li,
.tbl td ul:where(:not([class])) li,
.tbl th ol:where(:not([class])) li,
.tbl td ol:where(:not([class])) li,
.tbl th .checklist li,
.tbl td .checklist li {
  width: fit-content;
}

.tbl img {
  margin: 0 auto;
}

.tbl-logo {
  margin: 0 auto 4px;
  max-width: 150px;
}

.tbl .c-btn {
  width: 100%;
}

.tbl .c-btn a {
  width: 100%;
  min-width: auto;
  font-size: 16px;
  padding: 10px 14px;
}

:where(.article-body) .box {
  padding: 24px;
  border-radius: 8px;
}

.simplebox {
  border: 1px solid var(--line);
  margin-bottom: 26px;
}

:where(.article-body) .box:has(+.box) {
  margin-bottom: 20px;
}

:where(.article-body) .box>:first-child {
  margin-top: 0;
}

:where(.article-body) .box>:last-child {
  margin-bottom: 0;
}

.colorbox {
  border: 1px solid var(--line);
  background: var(--blue-light);
  margin-bottom: 26px;
}

.box-ttl {
  font-weight: bold;
  font-size: 20px;
  margin: 30px 0 20px;
}

.box .box-ttl {
  margin-bottom: 16px;
}

.article-body ul:where(:not([class])),
.article-body ol:where(:not([class])) {
  margin-bottom: 26px;
}

ul:where(:not([class])) li+li,
ol:where(:not([class])) li+li,
.checklist li+li {
  margin-top: 10px;
}

.checklist {
  margin-bottom: 26px;
}

.checklist li {
  position: relative;
  padding-left: 1.4em;
}

.checklist li::before {
  position: absolute;
  top: 0.4em;
  left: 0;
  content: "";
  display: block;
  width: .8em;
  aspect-ratio: 3 / 2;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}

:where(.article-body) .flex {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 26px;
}

:where(.article-body) .flex img {
  width: 48%;
  height: auto;
}

:where(.article-body) .flex .flex-inner>:first-child {
  margin-top: 0;
}

:where(.article-body) .flex .flex-inner>:last-child {
  margin-bottom: 0;
}

:where(.article-body) .float {
  margin-bottom: 26px;
}

:where(.article-body) .float::after {
  content: "";
  display: tbl;
  clear: both;
}

:where(.article-body) .float img {
  float: left;
  max-width: 48%;
  margin: 0 20px 10px 0;
}

:where(.article-body) .float-inner>:first-child {
  margin-top: 0;
}

:where(.article-body) .float-inner>:last-child {
  margin-bottom: 0;
}

.arrow-down {
  display: block;
  color: var(--teal);
  line-height: 1;
  width: 40px;
  aspect-ratio: 1 / 1;
  margin: 30px auto;
  border: 4px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
}

.arrow-down.small {
  width: 20px;
  margin: 20px auto;
  border: 3px solid currentColor;
  border-left: 0;
  border-bottom: 0;
}

*:has(+.arrow-down.small) {
  margin-bottom: 20px;
}

.quote {
  position: relative;
  padding-top: 70px;
  padding-left: 30px;
  margin-bottom: 26px;
  font-style: italic;
  background: var(--soft);
}

.quote::before {
  position: absolute;
  top: 18px;
  left: 30px;
  content: "";
  display: block;
  width: 40px;
  aspect-ratio: 1 / 1;
  background: url(../img/quote-icon.png) center center / contain no-repeat;
}

.quote::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 14px;
  height: 100%;
  border-left: 3px solid var(--line);
  border-right: 3px solid var(--line);
}

.fukidashi {
  position: relative;
  font-size: 17px;
  width: fit-content;
  min-width: 40%;
  padding: .6em 1em;
  margin: 36px auto 26px;
  font-weight: bold;
  text-align: center;
  color: var(--white);
  background: var(--teal);
  border-radius: 8px;
  line-height: 1.5;
}

.fukidashi::after {
  display: block;
  position: absolute;
  content: "";
  border-top: 20px solid var(--teal);
  border-left: 20px solid transparent;
  border-right: 19px solid transparent;
  left: 50%;
  bottom: -13px;
  z-index: 1;
  margin-left: -20px;
}

.matome {
  margin-top: 36px;
  margin-bottom: 26px;
  border: 1px solid #ead6c4;
  background: #fffaf4;
}

.matome-ttl {
  display: block;
  text-align: center;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: bold;
  color: var(--gold);
}

.matome-inner>:first-child {
  margin-top: 0;
}

.matome-inner>:last-child {
  margin-bottom: 0;
}

.survey {
  margin-bottom: 26px;
  background: var(--soft);
}

.survey>:last-child {
  margin-bottom: 0;
}

.survey-ttl {
  font-size: 18px;
  margin-bottom: 16px;
  text-align: center;
  font-weight: bold;
}

.survey-inner>:first-child {
  margin-bottom: 0;
}

.survey-inner>:last-child {
  margin-bottom: 0;
}

.smalltext {
  margin-bottom: 26px;
  background: var(--soft);
}

.smalltext-ttl {
  position: relative;
  padding-left: 1.4em;
  font-weight: bold;
  margin-bottom: 14px;
}

.smalltext-ttl::before {
  position: absolute;
  top: .4em;
  left: 0;
  content: "";
  display: block;
  background: var(--teal);
  width: .8em;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.smalltext .smalltext-inner>* {
  font-size: max(88%, 11px);
  margin-bottom: 20px;
}

.smalltext-inner>:last-child {
  margin-bottom: 0;
}

.c-btn {
  width: fit-content;
  margin: 30px auto 40px;
}

.c-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 300px;
  max-width: 100%;
  min-height: 60px;
  font-size: 18px;
  font-weight: bold;
  color: var(--white);
  text-decoration: none;
  padding: 14px 20px;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  background: var(--c-btn);
  box-shadow: inset 0 -8px 5px -5px rgba(0, 0, 0, 0.3);
}

.article-body .tag {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-content: center;
  padding: 0;
  margin-bottom: 26px;
  background: none;
}

.article-body .tag .item {
  background: var(--soft);
  color: var(--muted);
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: 0;
  display: inline-block;
  padding: 8px 12px;
  margin-top: 0;
  margin-bottom: 0;
  box-sizing: border-box;
  font-weight: normal;
}

.article-body .tag .item.on {
  background: var(--blue-light);
  color: var(--teal-dark);
  font-weight: bold;
}

.scrolltbl {
  overflow-x: auto;
  width: 100%;
  margin-bottom: 26px;
}

.scrolltbl thead th {
  width: min(45vw, 220px);
}

.scrolltbl thead th:first-of-type {
  width: min(34vw, 180px);
}

.scrolltbl .tbl {
  min-width: 110%;
  margin-bottom: 0;
}

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

.stickytbl-top thead {
  position: sticky;
  top: 70px;
  left: 0;
  z-index: 5;
}

@media (max-width: 1000px) {
  .stickytbl-top thead {
    top: 60px;
  }
}

.stickytbl-top thead th:not(:last-of-type) {
  position: relative;
}

.stickytbl-top thead th:not(:last-of-type):after {
  position: absolute;
  top: 0;
  right: -1px;
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background: #d4d4d4;
}

.scrolltbl .stickytbl-left {
  min-width: 110%;
}

.stickytbl-left {
  will-change: transform;
}

.stickytbl-left thead th {
  background: var(--soft);
}

.stickytbl-left tbody th,
.stickytbl-left thead th:first-child {
  position: sticky;
  top: 0;
  left: 0;
  background: #94cacf;
  z-index: 1;
}

.stickytbl-left tbody th::before,
.stickytbl-left thead th:first-child::before {
  position: absolute;
  top: 0;
  left: -1px;
  content: "";
  display: block;
  height: 100%;
  width: 1px;
  background: var(--line);
}

.jump {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 26px;
}

.jump .item {
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
}

.jump .item::before {
  display: none;
}

.jump a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 60px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  text-decoration: none;
}

.jump a:hover {
  background: var(--blue-light);
  opacity: 1;
}

.numbering {}

.numbering li {
  padding-left: 0;
  margin-bottom: 26px;
}

.numbering li::before {
  display: none;
}

.numbering-ttl {
  position: relative;
  margin: 34px 0 20px;
  padding-left: 2.3em;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.6;
}

.numbering-num {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  width: 1.8em;
  aspect-ratio: 1 / 1;
  background: var(--teal);
  color: var(--white);
  border-radius: 4px;
}

.numlist-inner:first-child {
  margin-top: 0;
}

.numlist-inner:last-child {
  margin-bottom: 0;
}

.pickup {
  font-size: 20px;
  padding: 14px 20px;
  margin: 34px 0 20px;
  font-weight: bold;
  background: var(--blue-light);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.pickup-text {
  font-size: 14px;
  display: block;
  margin-bottom: 4px;
  font-weight: normal;
}

.pickup>:first-child {
  margin-top: 0;
}

.pickup>:last-child {
  margin-bottom: 0;
}

.flow {
  margin-bottom: 26px;
}

.flow-ttl {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 20px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 10px;
  line-height: 1.6;
}

.flow-num {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 45px;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--teal);
  background: var(--blue-light);
  font-size: 20px;
  color: var(--teal);
}

.flow-num::before {
  position: absolute;
  top: 50%;
  right: -7px;
  transform: translateY(-50%) rotate(45deg);
  content: "";
  display: block;
  width: 12px;
  aspect-ratio: 1 / 1;
  border-top: 1px solid var(--teal);
  border-right: 1px solid var(--teal);
  background: var(--blue-light);
}

.flow .flow-ttl p {
  font-size: 20px;
  margin-bottom: 0;
}

.flow-inner p {
  margin-bottom: 8px;
}

.flow-inner {
  padding-left: 40px;
  margin-left: 24px;
  border-left: 1px solid var(--teal);
}

.flow-inner>:last-child {
  margin-bottom: 0;
}

.article-page .faq {
  margin-bottom: 26px;
  border: none;
}


.faq:has(+ .faq) {
  margin-bottom: 0;
}

.faqQ {
  position: relative;
  font-size: 16px;
  margin-bottom: 18px;
  font-weight: bold;
  padding-left: 40px;
}

.faqQ-icon {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  aspect-ratio: 1 / 1;
  background: var(--teal);
  color: var(--white);
  border-radius: 4px;
  font-size: 14px;
}

.faqA {
  position: relative;
  margin-bottom: 0;
  padding-left: 40px;
}

.faqA-icon {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  aspect-ratio: 1 / 1;
  background: var(--rose);
  color: var(--white);
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
}

.search-container tbl {
  max-width: 100%;
  word-break: break-all;
}

.search-container tbl thead th:nth-child(2) {
  width: 15%;
}

.right-link,
.right-link-icon {
  width: fit-content;
  font-size: 14px;
  margin: auto 0 auto auto;
  margin-bottom: 26px;
  text-align: right;
}

.right-link-icon a {
  position: relative;
  padding-left: 1.25em;
}

.right-link-icon a::before {
  content: '';
  position: absolute;
  top: .2em;
  left: 0px;
  display: block;
  background: url(../img/link-icon.png) center center / contain no-repeat;
  width: 1em;
  aspect-ratio: 1 / 1;
}

.right-link:has(+.right-link),
.right-link:has(+.right-link-icon),
.right-link-icon:has(+.right-link),
.right-link-icon:has(+.right-link-icon) {
  margin-bottom: 8px;
}

.imgscroll {
  width: 100%;
  background: var(--soft);
  box-sizing: border-box;
  overflow-x: auto;
  white-space: nowrap;
  margin-bottom: 26px;
}

.imgscroll-wrap {
  width: fit-content;
  display: flex;
  justify-content: center;
}

.imgscroll-list {
  display: flex;
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.imgscroll-list li {
  flex: 0 0 calc(33.33% - 16px);
  max-width: calc(33.33% - 16px);
  padding-left: 0;
  box-sizing: border-box;
  text-align: center;
  position: relative;
}

.imgscroll-list li::before {
  display: none;
}

.imgscroll-list li:last-child::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  height: 1px;
  width: 24px;
  background-color: transparent;
}

.imgscroll-list img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 8px;
}

.imgscroll-list .caption {
  display: block;
  max-width: 100%;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .imgscroll-list li {
    flex: 0 0 calc(50% - 16px);
    max-width: calc(50% - 16px);
  }
}

.imgscroll.center li {
  width: 33.33%;
}

.imgscroll.center {
  overflow-x: hidden;
}

.imgscroll.center .imgscroll-list {
  justify-content: center;
}

.tabarea {
  margin-bottom: 26px;
}

.tab-list {
  display: flex;
  gap: 4px;
}

.tab-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  gap: 5px;
  border-bottom: 2px solid var(--teal);
  padding: 0 20px;
  margin: 24px 0 10px;
}

.tab.active {
  background-color: var(--white);
  position: relative;
  color: var(--teal);
}

.tab {
  border-radius: 5px 5px 0 0;
  flex: auto;
  text-align: center;
  border: 2px solid var(--teal);
  border-bottom: none;
  cursor: pointer;
  width: 100%;
  min-height: 50px;
  padding: 4px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 13px;
  line-height: 1.4;
  background: var(--soft);
}

.tab::before {
  display: none;
}

.tab-wrap {
  display: none;
  padding: 12px 14px 14px;
  border: 2px solid var(--teal);
  border-top: none;
}

.tab-wrap.show {
  display: block;
}

.tab-wrap>:first-child {
  margin-top: 0;
}

.tab-wrap>:last-child {
  margin-bottom: 0;
}

.meritdemerit {
  margin-bottom: 26px;
}

.meritdemerit:has(+.meritdemerit) {
  margin-bottom: 10px;
}

.meritdemerit[data-type="merit"] {
  border: 2px solid var(--rose);
}

.meritdemerit[data-type="merit"] .meritdemerit-ttl {
  background: #ffedeb;
  border-bottom: 2px solid var(--rose);
}

.meritdemerit[data-type="demerit"] {
  border: 2px solid #bfbbbe;
}

.meritdemerit[data-type="demerit"] .meritdemerit-ttl {
  background: var(--soft);
  border-bottom: 2px solid #bfbbbe;
}

.meritdemerit-ttl {
  padding: 10px 24px;
  font-weight: bold;
  font-size: 18px;
}

.meritdemerit-inner {
  padding: 20px 24px;
}

.meritdemerit-inner>:last-child {
  margin-bottom: 0;
}

.meritdemerit-list {
  position: relative;
  margin: 0;
  margin-bottom: 16px;
}

.meritdemerit-list li {
  padding-left: 1.2em;
  position: relative;
}

.meritdemerit-list li+li {
  margin-top: 10px;
}

.meritdemerit-list li:last-child {
  margin-bottom: 0;
}

.meritdemerit-list li:before {
  content: '';
  display: block;
  position: absolute;
  left: .2em;
  top: .6em;
  width: .4em;
  aspect-ratio: 1 / 1;
  border-radius: 100px;
  transform: scale(1);
}

.meritdemerit[data-type="merit"] .meritdemerit-list li:before {
  background-color: var(--rose);
}

.meritdemerit[data-type="demerit"] .meritdemerit-list li:before {
  background-color: #45303e;
}

.meritdemerit-flex {
  display: flex;
  gap: 16px;
  margin-bottom: 26px;
}

.meritdemerit-flex .meritdemerit {
  margin-bottom: 0;
  flex: 1;
}

.meritdemerit-flex .meritdemerit-inner {
  flex-grow: 1;
}

.review-scroll {
  overflow-x: scroll;
  display: flex;
  gap: 16px;
  margin-bottom: 26px;
}

.review {
  width: 100%;
  max-width: 82%;
  background: var(--soft);
  padding: 20px;
  border: 1px solid var(--line);
  white-space: normal;
  overflow: hidden;
  scroll-snap-align: center;
  flex-shrink: 0;
}

.review-top {
  width: 100%;
  margin-bottom: 0;
}

.review-name {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}

.review-label {
  display: flex;
  flex-direction: column;
  width: 100%;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  margin-bottom: 16px;
}

.review-label li+li {
  margin-top: 8px;
}

.review-label span {
  display: inline-block;
  padding: 4px 6px;
  border-radius: 10px;
  margin-right: 8px;
  background: var(--teal);
  color: var(--white);
  font-weight: bold;
  font-size: 12px;
  letter-spacing: .08em;
}

.review-bottom {}

.review .review-bottom>:last-child,
.review .review-bottom-inner>:last-child {
  margin-bottom: 0;
}

.review-bottom.flex {
  gap: 14px;
  margin-bottom: 0;
}

.review-bottom.flex img {
  width: 45%;
  height: auto;
}

.map {
  margin-bottom: 26px;
}

.map-ttl {
  position: relative;
  font-size: 16px;
  width: fit-content;
  min-width: 40%;
  padding: .6em 1em;
  margin: 30px auto 22px;
  font-weight: bold;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--muted);
  border-radius: 8px;
  line-height: 1.5;
}

.map-ttl::before {
  background: var(--white);
  border-bottom: 1px solid var(--muted);
  border-right: 1px solid var(--muted);
  bottom: -.9em;
  content: "";
  width: 1em;
  aspect-ratio: 1 / 1;
  left: 50%;
  position: absolute;
  -webkit-transform: rotate(45deg) translateX(-50%);
  transform: rotate(45deg) translateX(-50%);
  visibility: visible;
}

.acco {
  margin-bottom: 26px;
}

.acco-ttl {
  position: relative;
  cursor: pointer;
  border: 2px solid var(--line);
  margin-bottom: -1px;
  padding: 13px 50px 12px 20px;
  position: relative;
  font-weight: bold;
  font-size: 18px;
}

.acco-ttl.action {
  background: var(--soft);
}

.acco-inner {
  display: none;
  padding: 15px 20px 15px;
}

.acco-info>:last-child {
  margin-bottom: 0;
}

.acco-cont {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.acco-subttl {
  flex-shrink: 0;
  font-weight: bold;
}

.acco-btn {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  display: block;
  width: 20px;
  aspect-ratio: 1 / 1;
}

.acco-btn::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: var(--teal);
}

.acco-btn::after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: '';
  width: 2px;
  height: 100%;
  background: var(--teal);
}

.acco-ttl.action .acco-btn::after {
  display: none;
}

.relatedpost {
  margin: 40px 0;
}

.article-body .relatedpost-ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 16px;
}

.relatedpost-ttl::before,
.relatedpost-ttl::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--teal);
}

.relatedpost-ttl span {
  flex-shrink: 0;
  max-width: 80%;
  line-height: 1.6;
}

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

.relatedpost-post .image-wrap {
  width: 100%;
  margin-bottom: 8px;
  overflow: hidden;
}

.relatedpost-post .image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  transition: .4s;
}

.relatedpost-post .relatedpost-post-ttl {
  font-size: 14px;
  margin-bottom: 0;
}

.relatedpost-post a .relatedpost-post-ttl {
  color: #1A0DAB;
}


/* ==========================================================================
   人間ドック・健診施設 検索 / 結果（/area/, /search/）
   既存の .container / .btn / .field / .input / .tag / .chip / .clinic-card /
   .sidebar / .page-layout / .search-panel を土台に、無接頭辞クラスで追加。
   ========================================================================== */

.checkup-hero {
  padding: 30px 0 24px;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
  color: #61778f;
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 12px;
}

.meta strong {
  color: var(--teal);
}

.checkup-hero-media span {
  color: var(--teal-dark);
  font-weight: 800;
  font-size: 13px;
}

.checkup-hero-search h1 {
  font-size: 32px;
}

.checkup-hero-conditions {
  display: inline-block;
  margin-left: 10px;
  color: var(--muted);
  font-weight: 400;
}

/* --- 検索パネル --- */
.checkup-search-panel {
  padding: 0;
  overflow: hidden;
  margin-bottom: 40px;
  border: 2px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.search-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}

.search-tab {
  flex: 1;
  border: 0;
  background: var(--soft);
  color: #38536b;
  font-weight: 800;
  padding: 16px 14px;
  cursor: pointer;
  font-size: 14px;
}

.search-tab.active {
  background: #fff;
  color: var(--teal);
  box-shadow: inset 0 -3px 0 var(--teal);
}

.checkup-form {
  padding: 22px;
}

/* .input は元々「div疑似入力」向けの display:flex; align-items:center; で、
   input[type=date] に適用するとネイティブの日付ピッカーのクリック領域が中央の実サイズだけに
   縮んでしまう（上下に隙間ができてクリックが反応しない）。日付欄だけ通常のblockに戻す。 */
.checkup-form input[type="date"].input {
  display: block;
}

/* カンプの form-grid（4列）。地域(region-field)は全幅、検査カテゴリ(wide)は2列分。 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: start;
}

.form-grid .field.wide,
.category-box.wide {
  grid-column: span 2;
}

.field.full,
.condition-panel.full {
  grid-column: 1 / -1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 都道府県・市区町村・路線・駅（PCは横並び。都道府県以外は選択後に有効化される） */
.area-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

/* 路線・駅の複数選択（トグルボタン + チェックボックスのドロップダウンパネル） */
.multiselect {
  position: relative;
}

.multiselect-toggle {
  width: 100%;
  text-align: left;
  cursor: pointer;
  position: relative;
  padding-right: 30px;
}

.multiselect-toggle:disabled {
  cursor: not-allowed;
  opacity: .6;
}

/* 都道府県セレクトと同じ「下向き矢印」を表示する（クリックできる場所だとひと目でわかるように） */
.multiselect-toggle:after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #7e8ea0;
  border-bottom: 2px solid #7e8ea0;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.multiselect-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 12px 24px rgba(20, 57, 80, .14);
  padding: 10px;
  max-height: 240px;
  overflow-y: auto;
  display: grid;
  gap: 6px;
}

/* display:gridを指定したことでブラウザ標準の [hidden]{display:none} が上書きされてしまうため、
   hidden属性が付いている間は明示的に非表示にする（常時表示されてしまうバグの修正）。 */
.multiselect-panel[hidden] {
  display: none;
}

.multiselect-panel label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #36516a;
}

.multiselect-panel input {
  accent-color: var(--teal);
  width: 15px;
  height: 15px;
}

.assist-note {
  color: var(--muted);
  font-size: 12px;
  margin: 6px 0 0;
}

.check-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 12px;
  max-height: 220px;
  overflow-y: auto;
}

.check-list label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #36516a;
  font-size: 13px;
}

.check-list input {
  accent-color: var(--teal);
  width: 15px;
  height: 15px;
}

.category-box,
.condition-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fbfdfe;
  margin-bottom: 18px;
}

.box-title {
  font-size: 13px;
  font-weight: 800;
  color: #234064;
  margin-bottom: 10px;
}

.price-range {
  display: grid;
  grid-template-columns: 1fr 16px 1fr;
  align-items: center;
  gap: 6px;
}

.price-range span {
  text-align: center;
  color: var(--muted);
}

.search-submit {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 18px;
  align-items: center;
  margin-top: 14px;
}

.count-box {
  border: 1px solid #b8dfe7;
  background: linear-gradient(180deg, var(--soft-blue), #fff);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.count-box .label {
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

.count-box small {
  color: var(--muted);
  font-weight: 700;
}

.count-box strong {
  color: var(--ink);
  font-size: 34px;
  letter-spacing: .04em;
  line-height: 1;
}

.search-submit-btn {
  height: 52px;
  width: 100%;
}

/* --- タブ2「わからない人」: PCは右半分に気になる体の部位・こだわり条件 --- */
/* 左右を独立した高さで並べる（グリッドの行を共有すると、右カラムが伸びた時に
   左カラム側の後続要素の位置がずれるため、2カラムとも単一セルのグリッドにしている）。
   検索ボタン(.search-submit)はunknown-layoutの外側・兄弟要素として置き、
   PC/SPともに常に「地域〜フィールド → 部位/こだわり条件 → 検索ボタン」の順で表示される。 */
.unknown-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: 22px;
  align-items: start;
}

.unknown-left {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-content: start;
}

.unknown-left .field.wide,
.unknown-left .condition-panel.full {
  grid-column: 1 / -1;
}

.unknown-right {
  display: grid;
  gap: 14px;
  align-content: start;
}

/* unknown-right は480px幅の狭いカラムのため、人体図を縮小して収める */
.unknown-right .body-map {
  height: 540px;
}

.unknown-right .anatomy-map {
  transform: scale(.88);
  transform-origin: top center;
}

/* --- 人体イラスト（実寸法はカンプ準拠。数値を変えるとホットスポット/ラベルがずれるので注意） --- */
.body-picker {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.body-map {
  height: 620px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdfe, #f4fbfd);
  position: relative;
  overflow: hidden;
  padding: 18px;
}

.anatomy-map {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.anatomy-figure {
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  width: 250px;
  height: 555px;
}

.silhouette {
  position: absolute;
  inset: 0;
}

.silhouette .head {
  position: absolute;
  left: 94px;
  top: 0;
  width: 62px;
  height: 70px;
  border-radius: 50% 50% 45% 45%;
  background: #fde2d4;
  border: 1px solid #f3bfa9;
}

.silhouette .neck {
  position: absolute;
  left: 109px;
  top: 62px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #fde2d4;
  border-left: 1px solid #f3bfa9;
  border-right: 1px solid #f3bfa9;
}

.silhouette .torso {
  position: absolute;
  left: 61px;
  top: 88px;
  width: 128px;
  height: 250px;
  border-radius: 62px 62px 34px 34px;
  background: #fde2d4;
  border: 1px solid #f3bfa9;
}

.silhouette .pelvis {
  position: absolute;
  left: 68px;
  top: 316px;
  width: 114px;
  height: 86px;
  border-radius: 36px 36px 48px 48px;
  background: #fde2d4;
  border: 1px solid #f3bfa9;
}

.silhouette .arm {
  position: absolute;
  top: 104px;
  width: 42px;
  height: 245px;
  border-radius: 34px;
  background: #fde2d4;
  border: 1px solid #f3bfa9;
}

.silhouette .arm.l {
  left: 24px;
  transform: rotate(8deg);
}

.silhouette .arm.r {
  right: 24px;
  transform: rotate(-8deg);
}

.silhouette .leg {
  position: absolute;
  top: 388px;
  width: 50px;
  height: 150px;
  border-radius: 28px;
  background: #fde2d4;
  border: 1px solid #f3bfa9;
}

.silhouette .leg.l {
  left: 72px;
}

.silhouette .leg.r {
  right: 72px;
}

.organ {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(0, 90, 120, .18);
  box-shadow: 0 2px 5px rgba(38, 60, 88, .08);
  pointer-events: none;
}

.organ.brain {
  left: 103px;
  top: 14px;
  width: 44px;
  height: 32px;
  background: #f59392;
}

.organ.thyroid {
  left: 110px;
  top: 76px;
  width: 30px;
  height: 18px;
  background: #d58fd8;
}

.organ.lung-l {
  left: 70px;
  top: 112px;
  width: 55px;
  height: 80px;
  border-radius: 60% 45% 50% 50%;
  background: #8cc9ec;
}

.organ.lung-r {
  right: 70px;
  top: 112px;
  width: 55px;
  height: 80px;
  border-radius: 45% 60% 50% 50%;
  background: #8cc9ec;
}

.organ.heart {
  left: 111px;
  top: 142px;
  width: 35px;
  height: 35px;
  background: #e95464;
  transform: rotate(45deg);
  border-radius: 50% 50% 10% 50%;
}

.organ.liver {
  left: 80px;
  top: 206px;
  width: 74px;
  height: 44px;
  background: #e26c87;
  border-radius: 60% 45% 45% 50%;
}

.organ.stomach {
  left: 139px;
  top: 214px;
  width: 42px;
  height: 56px;
  background: #f3a03b;
  border-radius: 48% 48% 60% 48%;
}

.organ.pancreas {
  left: 102px;
  top: 253px;
  width: 78px;
  height: 18px;
  background: #efc04d;
  border-radius: 16px;
  transform: rotate(-8deg);
}

.organ.kidney-l {
  left: 72px;
  top: 268px;
  width: 28px;
  height: 48px;
  background: #a66dd7;
  border-radius: 50%;
}

.organ.kidney-r {
  right: 72px;
  top: 268px;
  width: 28px;
  height: 48px;
  background: #a66dd7;
  border-radius: 50%;
}

.organ.colon {
  left: 82px;
  top: 302px;
  width: 86px;
  height: 70px;
  background: transparent;
  border: 10px solid #ed8f42;
  border-radius: 22px;
}

.organ.pelvis {
  left: 100px;
  top: 364px;
  width: 52px;
  height: 34px;
  background: #dc7fa5;
  border-radius: 28px 28px 18px 18px;
}

.hotspot,
.anatomy-hotspot {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, .01);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  z-index: 3;
}

.hotspot:disabled {
  cursor: not-allowed;
}

.anatomy-hotspot:hover:not(:disabled),
.anatomy-hotspot.active {
  background: rgba(7, 137, 154, .18);
  outline: 2px solid rgba(7, 137, 154, .45);
}

.anatomy-hotspot.brain {
  left: 101px;
  top: 8px;
  width: 50px;
  height: 44px;
}

.anatomy-hotspot.eye {
  left: 92px;
  top: 45px;
  width: 66px;
  height: 25px;
}

.anatomy-hotspot.thyroid {
  left: 104px;
  top: 70px;
  width: 42px;
  height: 30px;
}

.anatomy-hotspot.lung {
  top: 106px;
  width: 58px;
  height: 92px;
}

.anatomy-hotspot.lung.l {
  left: 66px;
}

.anatomy-hotspot.lung.r {
  right: 66px;
}

.anatomy-hotspot.heart {
  left: 104px;
  top: 134px;
  width: 50px;
  height: 52px;
}

.anatomy-hotspot.breast {
  top: 175px;
  width: 50px;
  height: 35px;
}

.anatomy-hotspot.breast.l {
  left: 73px;
}

.anatomy-hotspot.breast.r {
  right: 73px;
}

.anatomy-hotspot.liver {
  left: 75px;
  top: 200px;
  width: 84px;
  height: 58px;
}

.anatomy-hotspot.stomach {
  left: 132px;
  top: 210px;
  width: 56px;
  height: 68px;
}

.anatomy-hotspot.pancreas {
  left: 95px;
  top: 248px;
  width: 92px;
  height: 30px;
}

.anatomy-hotspot.kidney {
  top: 262px;
  width: 36px;
  height: 60px;
}

.anatomy-hotspot.kidney.l {
  left: 66px;
}

.anatomy-hotspot.kidney.r {
  right: 66px;
}

.anatomy-hotspot.colon {
  left: 76px;
  top: 294px;
  width: 100px;
  height: 86px;
}

.anatomy-hotspot.pelvis {
  left: 92px;
  top: 356px;
  width: 68px;
  height: 48px;
}

.anatomy-hotspot.bone {
  left: 72px;
  top: 396px;
  width: 108px;
  height: 126px;
}

.part-chip,
.anatomy-label {
  position: absolute;
  min-width: 96px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  color: #294763;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(30, 64, 86, .07);
  z-index: 4;
}

.anatomy-label:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.anatomy-label:hover:not(:disabled),
.anatomy-label.active {
  border-color: var(--teal);
  background: var(--soft-blue);
  color: var(--teal-dark);
}

.anatomy-label:after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  background: #9db3c2;
}

.anatomy-label.left:after {
  left: 100%;
  width: 70px;
}

.anatomy-label.right:after {
  right: 100%;
  width: 70px;
}

.anatomy-label[data-part="脳"] {
  left: 0px;
  top: 10px;
}

.anatomy-label[data-part="脳"]:after {
  width: 138px;
}

.anatomy-label[data-part="目・耳・鼻"] {
  left: 0px;
  top: 49px;
}

.anatomy-label[data-part="目・耳・鼻"]:after {
  width: 124px;
}

.anatomy-label[data-part="甲状腺"] {
  right: 0px;
  top: 72px;
}

.anatomy-label[data-part="甲状腺"]:after {
  width: 142px;
}

.anatomy-label[data-part="肺"] {
  left: 0px;
  top: 126px;
}

.anatomy-label[data-part="肺"]:after {
  width: 108px;
}

.anatomy-label[data-part="心臓"] {
  right: 0px;
  top: 145px;
}

.anatomy-label[data-part="心臓"]:after {
  width: 125px;
}

.anatomy-label[data-part="乳房"] {
  left: 0px;
  top: 184px;
}

.anatomy-label[data-part="乳房"]:after {
  width: 116px;
}

.anatomy-label[data-part="肝臓"] {
  right: 0px;
  top: 218px;
}

.anatomy-label[data-part="肝臓"]:after {
  width: 143px;
}

.anatomy-label[data-part="胃"] {
  left: 0px;
  top: 234px;
}

.anatomy-label[data-part="胃"]:after {
  width: 136px;
}

.anatomy-label[data-part="すい臓"] {
  right: 0px;
  top: 260px;
}

.anatomy-label[data-part="すい臓"]:after {
  width: 126px;
}

.anatomy-label[data-part="腎臓"] {
  left: 0px;
  top: 286px;
}

.anatomy-label[data-part="腎臓"]:after {
  width: 112px;
}

.anatomy-label[data-part="大腸"] {
  right: 0px;
  top: 318px;
}

.anatomy-label[data-part="大腸"]:after {
  width: 123px;
}

.anatomy-label[data-part="子宮・卵巣"] {
  left: 0px;
  top: 365px;
}

.anatomy-label[data-part="子宮・卵巣"]:after {
  width: 126px;
}

.anatomy-label[data-part="前立腺・膀胱"] {
  right: 0px;
  top: 374px;
}

.anatomy-label[data-part="前立腺・膀胱"]:after {
  width: 119px;
}

.anatomy-label[data-part="骨・関節"] {
  left: 0px;
  top: 444px;
}

.anatomy-label[data-part="骨・関節"]:after {
  width: 128px;
}

.anatomy-label[data-part="血管"] {
  right: 0px;
  top: 458px;
}

.anatomy-label[data-part="血管"]:after {
  width: 132px;
}

.body-part-checks {
  display: none;
}

/* --- こだわり条件・悩みから選ぶ の開閉トグル --- */
.condition-toggle {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  text-align: left;
  padding: 0 12px;
  color: #445a70;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.condition-panel {
  display: none;
  margin-top: 10px;
}

.condition-panel.open {
  display: block;
}

/* --- 検索結果カード（横型・カンプ準拠。縦型の.clinic-cardとは別コンポーネント） --- */
.checkup-list {
  display: flex;
  flex-direction: column;
}

.checkup-list-card {
  position: relative;
  display: grid;
  grid-template-columns: 178px 1fr 228px;
  gap: 16px;
  border: 1px solid #c9dce8;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 14px;
  padding: 15px 14px;
  box-shadow: 0 5px 12px rgba(25, 70, 96, .04);
  min-height: 188px;
}

.checkup-list-card .rank {
  position: absolute;
  left: 12px;
  top: 12px;
  background: var(--teal);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.checkup-list-card .photo {
  height: 154px;
  border-radius: 7px;
  background: linear-gradient(135deg, #eef8fb, #fff);
  border: 1px dashed #b8d5df;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2b7c8a;
  font-weight: 900;
  text-align: center;
  font-size: 12px;
  overflow: hidden;
}

.checkup-list-card .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.checkup-list-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #15335f;
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkup-list-card .pr {
  background: #fff1b8;
  color: #8a6a00;
  border-radius: 4px;
  font-size: 11px;
  padding: 2px 5px;
}

.checkup-list-card .fav {
  margin-left: auto;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  color: #a2b0bd;
  font-size: 17px;
  cursor: pointer;
}

.checkup-list-card .fav.active {
  color: #e25a7a;
  border-color: #f6c7d2;
  background: #fff6f8;
}

.checkup-list-card .info {
  margin: 2px 0;
  color: #536981;
  font-size: 13px;
}

.checkup-list-card .summary {
  margin: 8px 0;
  color: #52677e;
  font-size: 13px;
}

.checkup-list-card .price-line {
  font-size: 13px;
  color: #60758b;
  margin-top: 8px;
}

.checkup-list-card .price-line strong {
  font-size: 18px;
  color: #12315d;
  margin: 0 8px 0 4px;
}

.checkup-list-card .dept-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.checkup-list-card .dept-tag {
  background: #eef7fa;
  border: 1px solid #cfe5ec;
  color: #287384;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.4;
}

.checkup-list-card .schedule {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkup-list-card .cal {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  color: #486077;
}

.checkup-list-card .cal th,
.checkup-list-card .cal td {
  border: 1px solid #b9ccd9;
  text-align: center;
  padding: 2px 3px;
  line-height: 1.35;
}

.checkup-list-card .cal th {
  background: #eef5f8;
  font-weight: 900;
}

.checkup-list-card .tag-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 0;
}

.checkup-list-card .tag {
  background: #f3f7fa;
  border: 1px solid #d6e3eb;
  border-radius: 5px;
  color: #536a80;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.checkup-list-card .tag.strong {
  background: var(--soft-blue);
  color: var(--teal-dark);
  border-color: #c5e7ed;
}

.checkup-list-card .cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
}

.checkup-list-card .btn-detail,
.checkup-list-card .btn-site {
  height: 38px;
  border-radius: 6px;
  font-weight: 900;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkup-list-card .btn-detail {
  border: 1px solid var(--teal);
  background: #fff;
  color: var(--teal);
}

.checkup-list-card .btn-site {
  border: 0;
  background: var(--teal);
  color: #fff;
}

.article-placeholder-grid {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 10px;
}

/* ==========================================================================
   共通: 検索結果一覧系ページ（area-index-page / checkups-index-page /
   checkup-area-city-page / checkup-national-page 等）で重複していたCSSの集約。
   ページ間で完全に同一の値だったルールのみをここに集約している（値が違うものは
   各ページのスコープ内に残したまま。詳細は各ページのセクション見出しコメント参照）。
   ========================================================================== */

.index-caption {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--teal);
  font-weight: 900;
  font-size: 13px;
}

.faq-item.open .faq-a {
  display: block;
}

/* section-jump-nav: ページ内メニュー（全ページ共通クラス）。以前はh2-jump-nav（taxonomy-area.php
   の.section-jump-navと役割が完全に重複する別名・別デザインのコンポーネント）と2つ存在していたが、
   section-jump-navに統一した（ユーザー指示）。デザインは元のsection-jump-nav（taxonomy-area.php）
   側の値を踏襲している。
   番号バッジ（.section-jump-number）はCSSカウンターで自動採番する（.section-jump-navで
   counter-reset: section-jump-number）。PHP側が条件付きでリンクを出し分けても、実際にDOMへ
   出力された.section-jump-linkの数だけカウントされるため、途中の項目が非表示になっても
   残りの番号が自動で繰り上がる（旧h2-jump-numberと同じ仕組み）。 */
.section-jump-link {
  min-width: 0;
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #98bfd3;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(18, 49, 93, .035);
  counter-increment: section-jump-number;
}

.section-jump-link:hover {
  border-color: var(--teal);
  background: #fbfeff;
  box-shadow: 0 8px 18px rgba(0, 143, 163, .10);
}

.section-jump-number {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.section-jump-number::before {
  content: counter(section-jump-number, decimal-leading-zero);
}

.section-jump-copy {
  min-width: 0;
  display: block;
}

.section-jump-title {
  display: block;
  color: var(--navy);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.45;
}

.section-jump-description {
  display: block;
  margin-top: 5px;
  color: #58718a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.small-note {
  font-size: 12px;
  color: #75899b;
}

.result-summary p {
  margin: 2px 0 0;
  color: #60768b;
  font-size: 12px;
}

.toolbar-result-count {
  color: var(--teal);
  display: inline-block;
}

.section-head .sort {
  height: 38px;
  border: 1.5px solid var(--line-strong, #aac4d1);
  border-radius: 6px;
  padding: 0 10px;
  color: #4b6178;
  background: #fff;
  flex: none;
}

.faq-item.open .faq-q:after {
  content: "−";
}

.exam-visual:before {
  content: "";
  position: absolute;
  left: 28px;
  top: 10px;
  width: 88px;
  height: 88px;
  border: 14px solid #cfeaf0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #b8dce5;
}

.exam-visual:after {
  content: "＋";
  position: absolute;
  right: 7px;
  bottom: 0;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  color: #fff;
  font-size: 28px;
  border: 5px solid #fff;
}

.compare-table th:last-child,
.compare-table td:last-child {
  border-right: 0;
}

.compare-table tr:last-child td {
  border-bottom: 0;
}

.compare-table tbody td:first-child,
.compare-table tbody th {
  font-weight: 900;
  color: #15345d;
  background: #fbfdfe;
}

.faq,
.faq-list {
  border-top: 2px solid var(--line-strong, #aac4d1);
}

.faq-item {
  border-bottom: 1.5px solid var(--line-strong, #aac4d1);
}

.faq-q {
  width: 100%;
  min-height: 52px;
  border: 0;
  background: #fff;
  text-align: left;
  padding: 17px 46px 17px 42px;
  position: relative;
  font-weight: 900;
  font-size: 14px;
  color: #17375d;
  cursor: pointer;
}

.faq-q:hover {
  background: #f4fafb;
}

.faq-q:before {
  content: "Q";
  position: absolute;
  left: 12px;
  top: 15px;
  color: var(--teal);
  font-size: 17px;
}

.faq-q:after {
  content: "＋";
  position: absolute;
  right: 15px;
  top: 14px;
  color: var(--teal);
  font-size: 18px;
}

.faq-a {
  display: none;
  padding: 8px 42px 18px;
  color: #536b81;
  font-size: 14px;
  background: #fff;
}

/* .guide-grid/.guide/.calloutはcheckup-area-city-page/checkup-area-pageの2ページで
   完全に同じ見た目（選び方ガイドのカード）だったため、ページ固有スコープへの複製をやめて
   ここに1本化した。checkup-national-page（.callout配色が別）・area-city-page（旧デザインは
   .guide-card独自スタイルだったが、ユーザー指示で他ページと見た目を揃えたためこの共通クラスに
   移行）の.calloutは見た目が異なる/存在しないため、必要な場合のみページ固有スコープで扱う。 */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.guide {
  border: 1.5px solid var(--line-strong, #aac4d1);
  border-radius: 12px;
  padding: 18px;
  background: #fff;
}

.guide b {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
}

.guide h3 {
  margin: 10px 0 7px;
  color: #15365e;
  font-size: 16px;
  line-height: 1.4;
}

.guide:not(:has(h3))>p:first-child {
  margin: 0px 0 7px;
  color: #15365e;
  font-size: 16px;
  line-height: 1.4;
}

.guide p {
  margin: 0;
  color: #5c7287;
  font-size: 12.5px;
  line-height: 1.65;
}

.guide ul {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #e1ebf0;
  padding-left: 0;
}

.guide li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 7px;
  align-items: start;
  color: #526b81;
  font-size: 11.5px;

}

.guide li::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--teal-soft);
  color: var(--teal-dark);
  font-size: 10px;
  font-weight: 900;
}

.callout {
  margin-top: 18px;
  padding: 15px 17px;
  border: 1px solid #efd09d;
  border-left: 5px solid var(--orange, #ec7f28);
  background: var(--orange-soft, #fff7e8);
  border-radius: 8px;
  color: #664b2f;
}

@media(max-width: 680px) {
  .guide-grid {
    grid-template-columns: 1fr;
  }
}

.cross-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.cross-card {
  border: 1.5px solid var(--line-strong, #aac4d1);
  border-radius: 12px;
  padding: 18px;
  background: #fbfdfe;
  display: block;
  position: relative;
  height: 100%;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.cross-card:hover {
  border-color: var(--teal);
  box-shadow: 0 8px 20px rgba(0, 143, 163, .10);
  transform: translateY(-2px);
}

.cross-card:after {
  content: "›";
  position: absolute;
  right: 14px;
  bottom: 6px;
  color: var(--teal);
  font-size: 30px;
}

.cross-card h3 {
  margin: 0 0 8px;
  color: #14335d;
}

.cross-card p {
  width: 98%;
  font-size: 12px;
  color: #4f6883;
}

.section.alt {
  background: #f8fcfd;
  border-top: 1px solid #e5eef3;
  border-bottom: 1px solid #e5eef3;
}

.section.white {
  background: #fff;
}

/* .section-headの基本ルール（display:flex等）は本ファイル末尾（旧site.cssから統合）で
   全ページ共通定義済み。SP時もstyle_sp.css側で768px以下は行のまま詰める設計＝
   「1行に収め、リンクは折り返さない」（もっと見るリンク等、他ページの.section-head
   はこの挙動のままにしたい）。ここでは重複定義しない。
   クリニック一覧見出し（.clinic-result-list-block内の.section-head）だけはSP時に
   .title-setと並び順セレクトを縦積みにしたいため、下のスコープ付きルールで
   .clinic-result-list-block .section-headだけ上書きする（ユーザー指示：全ページの
   .section-headに影響させたくない）。 */
@media(max-width: 680px) {
  .clinic-result-list-block .section-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .clinic-result-list-block .section-head> :nth-child(2) {
    align-self: flex-end;
  }
}

.section-jump-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  counter-reset: section-jump-number;
}

.result-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border: 1px solid #b8dfe7;
  background: #f1fbfd;
  border-radius: 12px;
  padding: 16px 19px;
  margin-bottom: 16px;
}

.result-summary div {
  font-size: 14px;
}

.result-summary strong {
  font-size: 32px;
  color: var(--navy);
}

@media(max-width: 980px) {
  .section-jump-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-jump-link {
    min-height: 78px;
    padding: 13px 15px;
  }
}

@media(max-width: 768px) {
  .section-jump-nav {
    grid-template-columns: 1fr;
    gap: 9px;
  }
}

@media(max-width: 680px) {

  .result-summary {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ==========================================================================
   エリアから探す（都道府県一覧） /area/
   カンプ（area_top_mockup.html）のCSSをほぼそのまま移植。
   カンプの :root 変数はサイト全体の :root と衝突するため、.area-index-page に
   スコープしたカスタムプロパティとして再定義している（値はカンプと同一）。
   カンプ自身のヘッダー・フッターのCSSは使わない（テーマ側の header.php/footer.php を使うため）。
   ========================================================================== */

.contents {
  padding: 0;
  border-bottom: 0;
}

/* ページ共通構成: .breadcrumb-wrap（無いページもある） → .hero>.container → .contents>.container。
   .heroは.breadcrumb-wrap直後（無ければヘッダー直下）の上余白を自前で持つ。
   .heroの直後に.contentsが続く場合、.contentsの上パディングと二重になるため打ち消す
   （.hero内の検索ハブ等は.search-zone自体がmargin-top:40pxを持つので、間隔はそちらに任せる。
   assets/css/search-hub.css参照）。ページ固有の余白が必要な場合は各ページのスコープ
   （例: .clinics-clinic-page .hero、.checkup-area-city-page .hero）で上書きする。 */
.hero {
  padding: 26px 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 270px;
  gap: 30px;
  align-items: start;
}

.hero-grid h1 {
  margin: 0 0 14px;
  color: #102d5b;
  font-size: 33px;
  letter-spacing: .02em;
}

@media (max-width: 900px) {
  .hero-grid h1 {
    font-size: 28px;
  }
}

.hero-card {
  position: relative;
  height: 178px;
  border-radius: 18px;
  border: 2px solid var(--line-strong);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.area-city-page .hero-card {
  background: #3b4245;
}

.hero-card-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.area-city-page .hero-card .hero-card-image {
  padding: 0;
}

.checkups-index-page .hero-card .hero-card-image,
.checkup-national-page .hero-card .hero-card-image {
  padding: 0;
  object-fit: cover;
}


.hero-card .pin {
  position: absolute;
  width: 34px;
  height: 34px;
  background: var(--teal);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  top: 48px;
  left: 53%;
}

.hero-card .pin:after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #fff;
}

/* checkup-area-page（都道府県）・checkup-area-city-page（市区町村）で共通のラベル文言スタイル。
   area-archive-pageは見た目が異なる（ピル型）ため、より詳細度の高い.area-archive-page .map-labelで上書きする。 */
.map-label {
  position: absolute;
  bottom: 14px;
  color: var(--teal-dark);
  font-weight: 900;
}

.title-set {
  display: flex;
  gap: 11px;
  align-items: center;
}

.title-set .mark {
  width: 5px;
  height: 29px;
  background: var(--teal);
  border-radius: 3px;
  flex: none;
}

.title-set h2 {
  margin: 0;
  color: #14335d;
  font-size: 22px;
}

.title-set .sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.area-index-page .map-shape {
  width: 190px;
  height: 125px;
  background: linear-gradient(135deg, #d8eef4, #eef9fb);
  clip-path: polygon(8% 28%, 26% 8%, 46% 14%, 61% 0, 89% 18%, 83% 48%, 98% 65%, 68% 94%, 48% 82%, 28% 100%, 14% 77%, 0 58%);
  border: 2px solid var(--line-strong);
}

.role-note {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  padding: 14px 17px;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: #41596e;
  font-size: 13px;
}

.role-note .ico-i {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal-soft);
  color: var(--teal-dark);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: 1px solid #bfe3ea;
}

.role-note b {
  color: #12375e;
}

.area-index-page .data-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.area-index-page .summary-item {
  padding: 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
}

.area-index-page .summary-item span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.area-index-page .summary-item strong {
  display: block;
  margin-top: 2px;
  color: var(--navy);
  font-size: 21px;
}

.area-index-page .data-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.area-index-page .data-tab {
  position: relative;
  padding: 14px 18px;
  border: 2px solid #bfd6e1;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0, #f8fbfc 100%);
  color: #496277;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(22, 67, 91, .10);
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}

.area-index-page .data-tab:hover {
  background: linear-gradient(180deg, #ffffff 0, #f2f9fb 100%);
  color: var(--teal-dark);
  border-color: #9fc3d0;
  box-shadow: 0 10px 22px rgba(22, 67, 91, .14);
}

.area-index-page .data-tab:active {
  transform: translateY(1px);
}

.area-index-page .data-tab.active {
  background: linear-gradient(180deg, #0ea2b5 0, #008fa3 100%);
  color: #fff;
  border-color: #007382;
  box-shadow: 0 12px 24px rgba(0, 143, 163, .28);
}

.area-index-page .data-panel {
  display: none;
  padding: 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
}

.area-index-page .data-panel.active {
  display: block;
}

.area-index-page .data-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.area-index-page .region-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.area-index-page .region-filter button {
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: #456176;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.area-index-page .region-filter button:hover {
  border-color: var(--teal);
  background: #f0fafb;
  box-shadow: 0 3px 9px rgba(0, 143, 163, .10);
}

.area-index-page .region-filter button.active {
  border-color: var(--teal);
  background: var(--teal-soft);
  color: var(--teal-dark);
}

.area-index-page .region-filter button.is-disabled {
  border-color: #dbe8ee;
  background: #f4f7f9;
  color: #a9b7bf;
  cursor: default;
}

.area-index-page .region-filter button.is-disabled:hover {
  border-color: #dbe8ee;
  background: #f4f7f9;
  box-shadow: none;
}

.area-index-page .compact-select {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.area-index-page .compact-select select {
  height: 34px;
  border: 1.5px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  color: #36556e;
  padding: 0 9px;
}

.area-index-page .data-table-wrap {
  overflow-y: auto;
  border: 1px solid #dbe8ee;
  border-radius: 8px;
}

.area-index-page .data-table-wrap.is-all {
  max-height: 420px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.area-index-page .data-table-wrap.is-all .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 #dbe8ee;
}

.area-index-page .data-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.area-index-page #prefDataBody {
  font-size: 14px;
}

.area-index-page .data-table th,
.area-index-page .data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e1ebf0;
  text-align: right;
  white-space: nowrap;
}

.area-index-page .data-table th {
  background: #f4fafb;
  color: #456176;
  font-size: 11px;
}

.area-index-page .data-table th:first-child,
.area-index-page .data-table td:first-child {
  text-align: left;
}

.area-index-page .data-table td:first-child {
  color: #153958;
  font-weight: 900;
}


.area-index-page .cell-main {
  color: var(--teal-dark);
  font-weight: 900;
}

.area-index-page .cell-sub {
  display: block;
  color: #8798a7;
  font-size: 10px;
}

.area-index-page .pref-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 3px 7px;
  border: 1px solid #c8dce5;
  border-radius: 5px;
  background: #fff;
  color: #567184;
  font-size: 9.5px;
  font-weight: 900;
  vertical-align: middle;
  cursor: pointer;
}

.area-index-page .pref-link:hover {
  border-color: var(--teal);
  background: var(--teal-soft);
  color: var(--teal-dark);
  box-shadow: 0 2px 7px rgba(0, 143, 163, .10);
}

.area-index-page .data-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.area-index-page .exam-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid #dbe8ee;
  border-radius: 9px;
  background: #f6fbfc;
}

.area-index-page .exam-panel-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.area-index-page .checkups-index-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border-radius: 7px;
  background: var(--teal);
  color: #fff;
  font-weight: 900;
}

.area-index-page .checkups-index-link:hover {
  filter: brightness(.96);
  box-shadow: 0 5px 13px rgba(22, 67, 91, .17);
  transform: translateY(-1px);
}

.area-index-page .exam-overview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.area-index-page .exam-data-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.area-index-page .exam-data-row:hover {
  border-color: var(--teal);
  background: var(--teal-soft);
  box-shadow: 0 7px 16px rgba(0, 143, 163, .10);
  transform: translateY(-1px);
}

.area-index-page .exam-data-row strong {
  display: block;
  color: #14335d;
}

.area-index-page .exam-data-row span {
  color: var(--muted);
  font-size: 11px;
}

.area-index-page .exam-data-row:after {
  content: "検査ページを見る ›";
  grid-column: 1 / -1;
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 900;
}

.area-index-page .exam-count {
  text-align: right;
}

.area-index-page .exam-count b {
  display: block;
  color: var(--teal-dark);
  font-size: 18px;
}

.area-index-page .exam-count small {
  color: var(--muted);
}

@media (max-width: 760px) {
  .area-index-page .data-summary {
    grid-template-columns: 1fr 1fr;
  }

  .area-index-page .data-tools {
    align-items: flex-start;
    flex-direction: column;
  }

  .area-index-page .data-tab {
    padding: 12px 7px;
  }

  .area-index-page .data-table-wrap.is-all {
    max-height: 360px;
  }

  .area-index-page .pref-link {
    margin-left: 4px;
  }

  .area-index-page .exam-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .area-index-page .exam-overview {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   都道府県アーカイブ /area/{都道府県slug}/
   カンプ（ningendock_area_mockup_mvp_v6.html）のCSSを移植。カンプの「tokyo-」で
   始まるクラス名（このページを全都道府県で使い回すため地域名を含められない）は
   generic な名前（clinic-result-*）に置き換えている。ward-report-v19配下は
   ダミーデータ表示のみのためカンプのクラス名をそのまま使っている。
   検索UI（.search-zone）は template-parts/search-hub.php + assets/css/search-hub.css
   をそのまま使うため、ここでは定義しない。
   ========================================================================== */

/* ヒーロー画像を白背景で見せるため、他ページ共通のradial-gradient背景を上書きする */
.area-archive-page .hero-card {
  background: #fff;
}

.area-archive-page .image-placeholder {
  width: 100%;
  height: 100%;
  border: 1px dashed #b8d5df;
  background: linear-gradient(135deg, #eef8fb, #fff);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #2b7c8a;
  font-weight: 900;
  line-height: 1.5;
}

.area-archive-page .image-placeholder small {
  display: block;
  color: #6d8198;
  font-size: 12px;
  font-weight: 800;
}

/* --- 市区町村別・健診施設データ（ward-report-v19。ダミーデータ表示のみ） --- */

.area-archive-page .ward-report-v19 {
  padding: 0;
  overflow: hidden;
  border: 1px solid #d9e6ed;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow, 0 18px 44px rgba(26, 65, 86, .08));
}

.area-archive-page .ward-report-header {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: flex-end;
  padding: 28px 30px 24px;
  background: linear-gradient(135deg, #f7fcfd 0, #fff 70%);
  border-bottom: 1px solid #e4edf2;
}

.area-archive-page .ward-report-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--teal);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.area-archive-page .ward-report-header h2 {
  margin: 0;
  color: #112f59;
  font-size: 25px;
  letter-spacing: .01em;
}

.area-archive-page .ward-report-header p {
  max-width: 720px;
  margin: 7px 0 0;
  color: #61778e;
  font-size: 13px;
}

.area-archive-page .ward-report-total {
  display: flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
}

.area-archive-page .ward-report-total strong {
  color: #12315d;
  font-size: 38px;
  line-height: 1;
}

.area-archive-page .ward-report-total span {
  color: #6b7f94;
  font-size: 12px;
  font-weight: 900;
}

.area-archive-page .ward-condition-section {
  padding: 26px 30px 30px;
}

.area-archive-page .ward-condition-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.area-archive-page .ward-condition-head h3 {
  margin: 0;
  color: #17375f;
  font-size: 19px;
}

.area-archive-page .ward-condition-head p {
  margin: 5px 0 0;
  color: #6f8397;
  font-size: 12px;
  font-weight: 700;
}

.area-archive-page .ward-condition-type-switch {
  margin-bottom: 14px;
  padding: 13px;
  border: 1.5px solid #c5dbe5;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fcfd, #eef8fa);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.area-archive-page .ward-condition-type-guide {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 2px 9px;
}

.area-archive-page .ward-condition-type-guide strong {
  color: #17375f;
  font-size: 12px;
}

.area-archive-page .ward-condition-type-guide span {
  color: #6f8397;
  font-size: 10.5px;
  font-weight: 700;
}

.area-archive-page .ward-condition-type-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.area-archive-page .ward-condition-type-tab {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  min-height: 64px;
  padding: 10px 34px 10px 11px;
  border: 1.5px solid #a9c4d2;
  border-radius: 9px;
  background: #fff;
  color: #36516a;
  text-align: left;
  box-shadow: 0 3px 8px rgba(23, 67, 91, .09);
  cursor: pointer;
}

.area-archive-page .ward-condition-type-tab:after {
  content: "›";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  line-height: 1;
  color: #6e91a3;
  font-weight: 900;
}

.area-archive-page .ward-condition-type-tab .tab-icon {
  grid-row: 1/3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #b9d3de;
  border-radius: 7px;
  background: #edf7fa;
  color: var(--teal-dark);
  font-size: 14px;
  font-weight: 900;
}

.area-archive-page .ward-condition-type-tab>span:not(.tab-icon) {
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.3;
}

.area-archive-page .ward-condition-type-tab small {
  font-size: 10px;
  color: #71869a;
  font-weight: 700;
  line-height: 1.35;
}

.area-archive-page .ward-condition-type-tab:hover {
  border-color: var(--teal);
  background: #f5fbfc;
}

.area-archive-page .ward-condition-type-tab.active {
  border-color: var(--teal-dark);
  background: var(--teal);
  color: #fff;
  box-shadow: 0 6px 14px rgba(0, 143, 163, .22);
}

.area-archive-page .ward-condition-type-tab.active:after {
  content: "表示中";
  right: 9px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 9px;
}

.area-archive-page .ward-condition-type-tab.active .tab-icon {
  border-color: #fff;
  background: #fff;
  color: var(--teal-dark);
}

.area-archive-page .ward-condition-type-tab.active small {
  color: #e9fbfd;
}

.area-archive-page .ward-condition-tab-panel {
  padding: 11px 12px 3px;
  border: 1px solid #d8e8ef;
  border-radius: 10px;
  background: #fbfdfe;
  margin-bottom: 10px;
}

.area-archive-page .ward-condition-tab-panel[hidden] {
  display: none;
}

.area-archive-page .ward-condition-tab-label {
  display: block;
  margin-bottom: 5px;
  color: #60758b;
  font-size: 10.5px;
  font-weight: 900;
}

.area-archive-page .ward-condition-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 1px 10px;
  scrollbar-width: thin;
}

.area-archive-page .ward-condition-tab {
  flex: 0 0 auto;
  border: 1.5px solid #c7dce5;
  background: #fff;
  color: #426078;
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(23, 67, 91, .05);
}

.area-archive-page .ward-condition-tab:hover {
  border-color: var(--teal);
  background: #f4fbfc;
  color: var(--teal-dark);
}

.area-archive-page .ward-condition-tab.active {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
  box-shadow: 0 5px 12px rgba(0, 143, 163, .18);
}

.area-archive-page .ward-condition-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 6px 0 12px;
  padding: 12px 14px;
  border: 1px solid #d5e6ed;
  border-radius: 10px;
  background: #f8fcfd;
}

.area-archive-page .ward-condition-summary strong {
  color: #17375f;
  font-size: 14px;
}

.area-archive-page .ward-condition-summary span {
  color: #687e92;
  font-size: 11px;
  font-weight: 700;
}

.area-archive-page .ward-condition-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 230px auto;
  gap: 10px;
  align-items: end;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid #d8e8ef;
  border-radius: 10px;
  background: #fff;
}

.area-archive-page .ward-tool label {
  display: block;
  margin-bottom: 4px;
  color: #36556e;
  font-size: 11px;
  font-weight: 900;
}

.area-archive-page .ward-tool select {
  width: 100%;
  height: 40px;
  border: 1.5px solid #a9c4d2;
  border-radius: 8px;
  background: #fff;
  color: #314d69;
  padding: 0 34px 0 10px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(23, 67, 91, .06);
}

.area-archive-page .ward-result-count {
  align-self: center;
  color: #6b8194;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.area-archive-page .ward-result-count strong {
  color: #17375f;
  font-size: 15px;
  margin-right: 3px;
}

.area-archive-page .ward-condition-list {
  border: 1px solid #d8e8ef;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.area-archive-page .ward-condition-empty {
  padding: 28px 15px;
  text-align: center;
  color: #7a8da0;
  font-size: 13px;
}

.area-archive-page .ward-condition-row {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(170px, 1fr) 90px 164px;
  gap: 14px;
  align-items: center;
  padding: 13px 15px;
  border-bottom: 1px solid #e8f0f4;
}

.area-archive-page .ward-condition-row:last-child {
  border-bottom: 0;
}

.area-archive-page .ward-name strong {
  display: block;
  color: #294762;
  font-size: 13px;
}

.area-archive-page .ward-name small {
  display: block;
  color: #7a8da0;
  font-size: 10px;
  margin-top: 2px;
}

.area-archive-page .ward-value-track {
  height: 10px;
  border-radius: 999px;
  background: #edf4f7;
  overflow: hidden;
}

.area-archive-page .ward-value-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), #65c0cc);
}

.area-archive-page .ward-value {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 3px;
  color: #12315d;
}

.area-archive-page .ward-value b {
  font-size: 19px;
}

.area-archive-page .ward-value small {
  font-size: 10px;
  color: #71869a;
  font-weight: 900;
}

.area-archive-page .ward-search-btn {
  padding: 8px 12px;
  white-space: nowrap;
  border: 1px solid var(--teal);
  background: #fff;
  color: var(--teal);
  border-radius: 6px;
  font-weight: 900;
  cursor: pointer;
}

.area-archive-page .ward-search-btn:hover {
  background: var(--teal-soft);
}

.area-archive-page .show-all-wards {
  display: block;
  margin: 16px auto 6px;
  padding: 10px 24px;
  border: 1.5px solid var(--teal);
  background: #fff;
  color: var(--teal);
  border-radius: 7px;
  font-weight: 900;
  cursor: pointer;
}

.area-archive-page .show-all-wards[hidden] {
  display: none;
}

.area-archive-page .ward-condition-note {
  margin: 12px 0 0;
  color: #71869a;
  font-size: 11px;
}

@media(max-width: 800px) {
  .area-archive-page .ward-report-header {
    display: block;
    padding: 22px;
  }

  .area-archive-page .ward-report-total {
    margin-top: 14px;
  }

  .area-archive-page .ward-condition-section {
    padding: 22px;
  }
}

@media(max-width: 700px) {

  .area-archive-page .ward-condition-section,
  .area-archive-page .ward-report-header {
    padding: 20px 18px;
  }

  .area-archive-page .ward-condition-head {
    display: block;
  }

  .area-archive-page .ward-condition-summary {
    display: block;
  }

  .area-archive-page .ward-condition-summary span {
    display: block;
    margin-top: 4px;
  }

  .area-archive-page .ward-condition-tools {
    grid-template-columns: 1fr;
  }

  .area-archive-page .ward-result-count {
    justify-self: start;
  }

  /* スクロールはさせず、バー（.ward-value-track）の実体だけがグリッドの
     1列目からはみ出る形にする（ユーザー指示）。1列目を素の1frのままにすると
     自動的な最小サイズがバーのmin-width（160px）に引っ張られ、行・一覧全体の
     幅が広がってしまう。minmax(0,1fr)で1列目のトラック自体の最小幅を0に
     固定してしまえば、行・一覧の幅はそのままに、バーの箱（min-width:160px）
     だけがトラックの外へ視覚的にはみ出す（トラック幅が160px未満の場合）。
     はみ出た部分が.ward-condition-listのoverflow:hidden（角丸クリップ用）で
     切れないよう、この幅では一時的にvisibleにする。 */
  .area-archive-page .ward-condition-list {
    overflow: visible;
  }

  .area-archive-page .ward-condition-row {
    grid-template-columns: minmax(0, 1fr) 160px;
    grid-template-rows: auto auto;
    gap: 8px 10px;
  }

  .area-archive-page .ward-name {
    grid-column: 1;
    grid-row: 1;
  }

  .area-archive-page .ward-value-track {
    grid-column: 1;
    grid-row: 2;
    min-width: 160px;
  }

  .area-archive-page .ward-condition-row .ward-search-btn {
    font-size: 13px;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .area-archive-page .ward-value {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }
}

@media(max-width: 640px) {
  .area-archive-page .ward-condition-type-guide {
    display: block;
  }

  .area-archive-page .ward-condition-type-guide span {
    display: block;
    margin-top: 2px;
  }

  .area-archive-page .ward-condition-type-tabs {
    grid-template-columns: 1fr;
  }

  .area-archive-page .ward-condition-type-tab {
    min-height: 58px;
  }
}


/* ==========================================================================
   市区町村アーカイブ /area/{都道府県slug}/{市区町村URL用スラッグ}/
   （taxonomy-area.php。$selected_region_termがある場合の分岐）
   カンプ（ningendock_adachi_area_mockup_mvp_v6.html）のCSSを移植。
   クリニックカード（.clinic-result-*）は都道府県アーカイブと共通のため
   assets/css/clinic-result-card.css 側で定義（ここには含めない）。
   ========================================================================== */

.area-city-page .purpose-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 15px;
  border: 1.5px solid var(--line-strong);
  border-left: 4px solid var(--teal);
  border-radius: 10px;
  background: #f8fcfd;
  padding: 14px 17px;
  font-size: 13px;
}

.area-city-page .purpose-note strong {
  color: var(--navy);
}

.area-city-page .area-card {
  background: #fff;
  border: 2px solid var(--line-strong);
  border-radius: 20px;
  box-shadow: none;
  padding: 16px;
}

.area-city-page .area-card-image-only {
  padding: 0;
  overflow: hidden;
}

.area-city-page .area-map {
  height: 150px;
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  background: linear-gradient(135deg, #eaf7fa, #fdfefe);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.area-city-page .area-map-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.area-city-page .area-card-image-only {
  height: 178px;
  border-radius: 18px;
}

.area-city-page .area-card-image-only .area-map {
  height: 100%;
  border: 0;
  border-radius: 18px;
}

.area-city-page .ward-shape {
  position: absolute;
  width: 155px;
  height: 95px;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  background: #d6eef2;
  clip-path: polygon(14% 8%, 46% 0, 70% 16%, 95% 13%, 100% 44%, 84% 63%, 91% 91%, 60% 100%, 34% 84%, 12% 96%, 0 67%, 7% 38%);
}

.area-city-page .area-card-image-only .ward-shape {
  width: 220px;
  height: 145px;
  top: 36px;
}

.area-city-page .ward-pin {
  position: absolute;
  left: 54%;
  top: 43px;
  width: 20px;
  height: 20px;
  background: var(--teal);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.area-city-page .area-card-image-only .ward-pin {
  top: 82px;
}

.area-city-page .ward-pin:after {
  content: "";
  position: absolute;
  inset: 6px;
  background: #fff;
  border-radius: 50%;
}


/* .section-headの見出し（.section-head > .title-set）はこのページの4セクション
   （施設一覧より下の「検査カテゴリ別対応施設数」「受診先を選ぶ3つのポイント」
   「近隣区から探す」「よくある質問」）すべてで.title-setのみを子に持つ構成に揃えたため、
   ページ固有の.section-head上書き（余白・整列・独自h2/pスタイル）は不要になった
   （グローバルな.section-head/.title-setのスタイルをそのまま使う。ユーザー指示：
   ほかのページの.title-setと同じでOK）。 */

.area-city-page .main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 25px;
  align-items: start;
}

.area-city-page .category-wrap {
  border: 1px solid #dbe8ee;
  border-radius: 8px;
  overflow: auto;
  background: #fff;
  box-shadow: 0 5px 16px rgba(28, 70, 96, .05);
}

.area-city-page .category-table {
  width: 100%;
  border-collapse: collapse;
}

.area-city-page .category-table th,
.area-city-page .category-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e1ebf0;
  text-align: left;
}

.area-city-page .category-table tr:last-child td {
  border-bottom: 0;
}

.area-city-page .category-table th {
  background: #f4fafb;
  color: #456176;
  font-size: 11px;
}

.area-city-page .category-table th:nth-child(4),
.area-city-page .category-table td:nth-child(4) {
  text-align: center;
}

.area-city-page .category-table th:last-child {
  color: #718396;
  background: #f4f8fa;
}

.area-city-page .category-table td:last-child {
  background: #fbfcfd;
}

.area-city-page .category-name {
  font-weight: 900;
  color: var(--navy);
  font-size: 14px;
}

.area-city-page .category-count {
  font-weight: 900;
  color: var(--teal-dark);
}

.area-city-page .category-detail {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  min-width: 230px;
}

.area-city-page .category-price {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.area-city-page .category-price small {
  display: block;
  color: #94a3b1;
  font-size: 10px;
  font-weight: 700;
}

.area-city-page .category-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 3px 7px;
  border: 1px solid #c8dce5;
  border-radius: 5px;
  font-size: 9.5px;
  color: var(--teal-dark);
  background: #fff;
  font-weight: 900;
  white-space: nowrap;
}

.area-city-page .category-link:hover {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.area-city-page .category-link-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 3px 7px;
  font-size: 9.5px;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

.area-city-page .category-note {
  margin: 12px 0 0;
  color: #6c8094;
  font-size: 12px;
}

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

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

.compare-card h3 {
  margin: 0;
  color: var(--navy);
  font-size: 17px;
}

.nearby-link-card {
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
}

.nearby-link-card:hover {
  border-color: var(--teal);
  box-shadow: 0 8px 20px rgba(0, 143, 163, .1);
}

.nearby-link-card p {
  margin: 8px 0 0;
  color: #647a8f;
  font-size: 12px;
  min-height: 30px;
  flex: 1;
}

.nearby-link-card span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e6eef2;
  color: var(--teal);
  font-size: 16px;
  font-weight: 600;
}

.nearby-link-card span b {
  color: #698095;
  font-size: 21px;
  line-height: 1;
  font-weight: 900;
}

@media(max-width: 768px) {
  .hero-grid {
    gap: 16px;
    grid-template-columns: 1fr;
  }

  .hero-card {
    height: auto;
    max-width: 500px;
    margin: 0 auto;
  }

  .section:has(.section-jump-nav) {
    padding-top: 0;
  }

}

@media(max-width: 980px) {

  .area-city-page .main-grid {
    grid-template-columns: 1fr;
  }

  .area-city-page .compare-grid,
  .checkup-area-city-page .compare-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width: 680px) {

  .area-city-page .compare-grid,
  .checkup-area-city-page .compare-grid {
    grid-template-columns: 1fr;
  }

  .area-city-page .category-wrap {
    overflow: auto;
  }

  .area-city-page .category-table {
    min-width: 720px;
  }
}

/* ==========================================================================
   検査名×都道府県×市区町村 /checkups/{検査名slug}/{都道府県slug}/{市区町村URL用スラッグ}/
   （template-checkup-area-city.php）
   カンプ（brain_dock_tokyo_adachi_mockup_mvp_v4.html）のCSSを移植。
   クリニックカード（.clinic-result-*）は都道府県アーカイブと共通のため
   assets/css/clinic-result-card.css 側で定義（ここには含めない）。
   ========================================================================== */


.checkup-area-city-page .hero-card:before {
  content: "";
  width: 170px;
  height: 115px;
  background: #cde9ee;
  clip-path: polygon(18% 4%, 63% 0, 91% 20%, 83% 50%, 100% 80%, 62% 96%, 29% 83%, 5% 57%);
  display: block;
}

/* hero-card画像（cl_get_area_hero_image_url('city', ...)。/area/{都道府県}/{市区町村}/
   （taxonomy-area.phpの.area-city-page）と同じ画像・同じ背景処理にする（ユーザー指示）。
   画像が無い場合は上のプレースホルダー（青い多角形）のまま変えない。 */
.checkup-area-city-page .hero-card:has(.hero-card-image) {
  background: #3b4245;
}

.checkup-area-city-page .hero-card:has(.hero-card-image):before {
  content: none;
}

.checkup-area-city-page .hero-card .hero-card-image {
  padding: 0;
}

.checkup-area-city-page .area-note {
  padding: 14px 16px;
  border: 1.5px solid var(--line-strong, #aac4d1);
  border-radius: 10px;
  background: #fff;
}

.checkup-area-city-page .area-note strong {
  color: var(--navy);
}

.checkup-area-city-page .nearby-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.checkup-area-city-page .nearby-links a {
  padding: 7px 10px;
  border: 1px solid var(--line-strong, #aac4d1);
  border-radius: 7px;
  background: #fff;
  color: var(--teal-dark);
  font-weight: 900;
  font-size: 11px;
}


@media(max-width: 680px) {
  .checkup-area-city-page .hero-copy h1 {
    font-size: 27px;
  }

  .checkup-area-city-page .cross {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   検査名×都道府県 /checkups/{検査名slug}/{都道府県slug}/（市区町村未指定）
   （template-checkup-area.php）
   national版（全国）とarea-city版（都道府県×市区町村）の中間の階層。カンプ
   （brain_dock_tokyo_mockup_mvp_v5.html）のヒーロー・比較表の見た目を移植しつつ、
   national版・area-city版と同じ深さに揃えている。section-jump-nav・result-summaryは
   複数ページで完全に同じ値だったため、ページ固有スコープへの複製はやめ、共通ブロック
   （.section-jump-nav/.result-summary）に1本化した。
   市区町村比較表（.city-compare-table）のみこのページ固有。
   ========================================================================== */



.checkup-area-page .hero-card:before {
  content: "";
  width: 170px;
  height: 115px;
  background: #cde9ee;
  clip-path: polygon(3% 47%, 16% 34%, 24% 13%, 40% 22%, 49% 7%, 62% 19%, 78% 14%, 95% 32%, 86% 49%, 98% 66%, 75% 75%, 61% 93%, 43% 80%, 27% 94%, 18% 72%, 5% 67%);
  display: block;
}

/* hero-card画像（cl_get_area_hero_image_url('prefecture', ...)。/area/{都道府県}/
   （taxonomy-area.phpの.area-archive-page）と同じ画像を使う（ユーザー指示）。
   背景は元々の白背景のままでよいため上書きせず、プレースホルダーの多角形のみ非表示にする。 */
.checkup-area-page .hero-card:has(.hero-card-image):before {
  content: none;
}


/* --- 市区町村比較表（対応施設が多い市区町村・料金帯から見た選び方カード） --- */

.checkup-area-page .compare-overview {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  margin-bottom: 18px;
}

.checkup-area-page .compare-card {
  border: 1.5px solid var(--line-strong, #aac4d1);
  border-radius: 12px;
  background: #fff;
  padding: 19px;
}

.checkup-area-page .compare-card h3 {
  margin: 0 0 13px;
  color: #15365e;
  font-size: 17px;
}

.checkup-area-page .bar-row {
  display: grid;
  grid-template-columns: 76px 1fr 42px;
  gap: 10px;
  align-items: center;
  margin: 10px 0;
  font-size: 12px;
}

.checkup-area-page .bar-bg {
  height: 12px;
  background: #edf4f7;
  border-radius: 999px;
  overflow: hidden;
}

.checkup-area-page .bar {
  height: 100%;
  background: var(--teal);
  border-radius: 999px;
}

.checkup-area-page .bar-row strong {
  text-align: right;
  color: #17385f;
}

.checkup-area-page .insight {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 4px solid var(--orange, #ec7f28);
  background: var(--orange-soft, #fff7e8);
  color: #6a4d2b;
  font-size: 12.5px;
}

.checkup-area-page .price-pills {
  display: grid;
  gap: 10px;
}

.checkup-area-page .price-pill {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  border: 1px solid var(--line, #d8e6ed);
  border-radius: 9px;
  padding: 11px 12px;
  align-items: center;
}

.checkup-area-page .price-pill strong {
  color: #14365e;
}

.checkup-area-page .price-pill span {
  color: #60768b;
  font-size: 12px;
}

.checkup-area-page .price-pill em {
  font-style: normal;
  color: var(--teal-dark);
  font-weight: 900;
}

@media(max-width: 860px) {
  .checkup-area-page .compare-overview {
    grid-template-columns: 1fr;
  }
}

.checkup-area-page .table-wrap {
  overflow-x: auto;
  padding-bottom: 2px;
  margin-top: 20px;
}

.checkup-area-page .city-compare-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #dbe8ee;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  font-size: 12px;
}

.checkup-area-page .city-compare-table th,
.checkup-area-page .city-compare-table td {
  padding: 10px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.checkup-area-page .city-compare-table th:last-child,
.checkup-area-page .city-compare-table td:last-child {
  border-right: 0;
  text-align: center;
  white-space: nowrap;
}

.checkup-area-page .city-compare-table tr:last-child td {
  border-bottom: 0;
}

.checkup-area-page .city-compare-table th {
  background: #f4fafb;
  color: #456176;
  font-weight: 900;
  font-size: 11px;
  white-space: nowrap;
}

.checkup-area-page .city-compare-table th:nth-child(2),
.checkup-area-page .city-compare-table th:nth-child(3),
.checkup-area-page .city-compare-table th:nth-child(4),
.checkup-area-page .city-compare-table td:nth-child(2),
.checkup-area-page .city-compare-table td:nth-child(3),
.checkup-area-page .city-compare-table td:nth-child(4) {
  text-align: right;
}

.checkup-area-page .city-compare-table td:first-child {
  font-weight: 900;
  color: #15365e;
  text-align: left;
}

.checkup-area-page .mini-bar {
  width: 90px;
  height: 8px;
  margin-right: 7px;
  border-radius: 999px;
  background: #edf4f7;
  display: inline-block;
  vertical-align: middle;
}

.checkup-area-page .mini-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--teal);
}

.checkup-area-page .city-compare-link {
  display: inline-flex;
  padding: 3px 7px;
  border: 1px solid #c8dce5;
  border-radius: 5px;
  color: var(--teal-dark);
  font-size: 9.5px;
  font-weight: 900;
}

.checkup-area-page .city-compare-link:hover {
  border-color: var(--teal);
  background: var(--teal-soft);
}

/* 上位12件より下の市区町村行（.expand-cities-btnクリックでshowを付け外し。assets/js/script.js） */
.checkup-area-page .city-compare-table tr.city-extra {
  display: none;
}

.checkup-area-page .city-compare-table tr.city-extra.show {
  display: table-row;
}

.checkup-area-page .expand-cities-wrap {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.checkup-area-page .expand-cities-btn {
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--teal);
  border-radius: 999px;
  background: #fff;
  color: var(--teal-dark);
  font-weight: 900;
  cursor: pointer;
}

.checkup-area-page .expand-cities-btn:hover {
  background: var(--teal-soft);
}

/* ==========================================================================
   検査から探す トップ /checkups/（template-checkups-index.php）
   カンプ（checkups_top_mockup_v16_mvp.html）のCSSを移植。
   カンプの:root変数はサイト全体の:rootと衝突するため、.checkups-index-pageにスコープした
   カスタムプロパティとして再定義している（値はカンプと同一。tonmanaドキュメント§3.3の
   検査カテゴリアクセントカラーに対応）。
   .hero / .hero-grid / .contents / .section 等の共通クラスはarea-index-page等と同じ
   既存定義をそのまま使う。検索UIはtemplate-parts/search-hub.php（assets/css/search-hub.css）。
   ========================================================================== */

.checkups-index-page {
  --checkups-pink: #e86980;
  --checkups-pink-soft: #fff1f4;
  --checkups-orange-soft: #fff7e9;
  --checkups-purple: #8268bf;
  --checkups-purple-soft: #f5f1ff;
}

.checkups-index-page .exam-visual {
  width: 148px;
  height: 112px;
  position: relative;
}

.checkups-index-page .section {
  padding: 25px 0;
}

/* --- 検査グループ・検査カード --- */

.checkups-index-page .exam-group {
  margin: 0 0 28px;
}

.checkups-index-page .exam-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
  padding: 0 2px;
}

.checkups-index-page .exam-group-head h3 {
  margin: 0;
  color: #15345d;
  font-size: 16px;
}

.checkups-index-page .exam-group-head span {
  font-size: 11px;
  color: #6b8193;
}

.checkups-index-page .primary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.checkups-index-page .exam-card {
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 310px;
  transition: .18s ease;
}

.checkups-index-page .exam-card:hover {
  border-color: var(--teal);
  box-shadow: 0 8px 20px rgba(23, 67, 91, .10);
  transform: translateY(-2px);
}

.checkups-index-page .card-top {
  height: 8px;
  background: var(--teal);
}

.checkups-index-page .exam-card.pink .card-top {
  background: var(--checkups-pink);
}

.checkups-index-page .exam-card.orange .card-top {
  background: var(--orange, #ec7f28);
}

.checkups-index-page .exam-card.purple .card-top {
  background: var(--checkups-purple);
}

.checkups-index-page .card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.checkups-index-page .card-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.checkups-index-page .category {
  font-size: 11px;
  font-weight: 900;
  color: var(--teal-dark);
  background: var(--teal-soft);
  border: 1px solid #bfe3ea;
  border-radius: 999px;
  padding: 3px 9px;
}

.checkups-index-page .exam-card.pink .category {
  color: #bf4961;
  background: var(--checkups-pink-soft);
  border-color: #f3c1cb;
}

.checkups-index-page .exam-card.orange .category {
  color: #b96c22;
  background: var(--checkups-orange-soft);
  border-color: #f0d2a4;
}

.checkups-index-page .exam-card.purple .category {
  color: #684ca3;
  background: var(--checkups-purple-soft);
  border-color: #d9cdf4;
}

.checkups-index-page .count {
  font-size: 11px;
  color: #71879a;
  font-weight: 800;
}

.checkups-index-page .exam-name {
  font-size: 20px;
  line-height: 1.35;
  color: #102d5b;
  margin: 0 0 8px;
  font-weight: 900;
}

.checkups-index-page .exam-desc {
  font-size: 12.5px;
  font-weight: normal;
  color: #4f6883;
  margin: 0 0 14px;
}

.checkups-index-page .detail-list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  border-top: 1px solid #d8e5ec;
  color: var(--ink);
  font-weight: normal;
}

.checkups-index-page .detail-list li {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid #e2ebf0;
  padding: 7px 0;
  font-size: 11.5px;
}

.checkups-index-page .detail-list strong {
  width: 68px;
  flex: none;
  color: #314f69;
}

.checkups-index-page .card-link {
  margin-top: auto;
  border: 1.5px solid var(--teal);
  color: var(--teal-dark);
  border-radius: 6px;
  padding: 10px;
  text-align: center;
  font-weight: 900;
  font-size: 12.5px;
}

.checkups-index-page .expandable-grid {
  display: none;
  margin-top: 16px;
}

.checkups-index-page .expandable-grid.open {
  display: grid;
}

.checkups-index-page .more-exams-wrap {
  text-align: center;
  margin-top: 16px;
}

.checkups-index-page .more-exams-btn {
  min-width: 260px;
  border: 1.5px solid var(--teal);
  background: #fff;
  color: var(--teal-dark);
  border-radius: 7px;
  padding: 11px 20px;
  font-weight: 900;
  cursor: pointer;
}

.checkups-index-page .more-exams-btn:hover {
  background: var(--teal-soft);
}

.checkups-index-page .more-exams-btn span {
  margin-left: 10px;
  font-size: 17px;
}

/* --- 検査・健診結果・検査機器の比較表 --- */

.checkups-index-page .compare-tabs {
  display: flex;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  background: #f2f8fa;
}

.checkups-index-page .compare-tab {
  flex: 1;
  border: 0;
  border-right: 1px solid var(--line, #c2d7e2);
  background: #f2f8fa;
  color: #38536b;
  font-weight: 900;
  padding: 14px;
  cursor: pointer;
}

.checkups-index-page .compare-tab:last-child {
  border-right: 0;
}

.checkups-index-page .compare-tab.active {
  background: #fff;
  color: var(--teal);
  box-shadow: inset 0 -3px 0 var(--teal);
}

.checkups-index-page .compare-wrap {
  overflow-x: auto;
  border-radius: 0 0 10px 10px;
}

.checkups-index-page .compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  font-size: 12px;
}

.checkups-index-page .compare-table th,
.checkups-index-page .compare-table td {
  padding: 12px 14px;
  border-right: 1px solid #d5e3ea;
  border-bottom: 1px solid #d5e3ea;
  text-align: left;
  color: #40566f;
  vertical-align: top;
  font-weight: bold;
  background: #fff;
}

.checkups-index-page .compare-table thead th {
  background: #f2fafc;
  color: #17375d;
  font-weight: 900;
}

/* --- FAQ・クロスリンク（枠線・角丸・余白・背景・pは共通の.cross-card。2957行目付近） --- */

@media(max-width: 980px) {
  .checkups-index-page .primary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 680px) {
  .checkups-index-page .primary-grid {
    grid-template-columns: 1fr;
  }

  .checkups-index-page .compare-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .checkups-index-page .compare-tab {
    border-right: 0;
    border-bottom: 1px solid var(--line, #c2d7e2);
  }

  .checkups-index-page .compare-tab:last-child {
    border-bottom: 0;
  }

  .checkups-index-page .compare-table {
    min-width: 720px;
  }

  .cross-links {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   検査名（都道府県未指定・全国版） /checkups/{検査名slug}/
   （template-checkup-national.php）
   カンプ（brain_dock_national_mockup_mvp_v10.html）のCSSを移植。
   .breadcrumb-wrap / .contents / .hero / .hero-grid / .hero-card / .role-note / .meta は
   area-index-page・checkups-index-page等と共通の既存クラスをそのまま使う。
   クリニックカード（.clinic-result-*）は都道府県アーカイブ・
   検査名×都道府県×市区町村ページと共通のため assets/css/clinic-result-card.css 側で定義
   （ここには含めない）。section-jump-nav / result-summary / toolbar は
   checkup-area-city-pageの同名クラスと同じ見た目のため、ここでも同じ値で複製している。
   ========================================================================== */

.checkup-national-page .exam-visual {
  width: 148px;
  height: 112px;
  position: relative;
}

.reset-btn {
  border: 0;
  background: transparent;
  color: var(--teal-dark);
  font-weight: 900;
  cursor: pointer;
}

.checkup-national-page .clinic-result-empty {
  border: 1px dashed var(--line-strong, #aac4d1);
  border-radius: 10px;
  background: #f7fafc;
  padding: 18px;
  color: var(--muted);
}

/* --- 都道府県アコーディオン --- */

.checkup-national-page .pref-hub {
  padding: 0;
}

.checkup-national-page .pref-panel {
  border: 1.5px solid var(--line-strong, #aac4d1);
  border-radius: 12px;
  background: #fff;
  padding: 16px;
}

@media (max-width: 768px) {
  .checkup-national-page .pref-panel {
    padding: 15px;
  }
}

.checkup-national-page .pref-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 14px;
}

.checkup-national-page .pref-head h2 {
  margin: 0;
  color: #14335d;
  font-size: 20px;
}

.checkup-national-page .pref-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.checkup-national-page .region-accordion {
  display: grid;
  gap: 10px;
}

.checkup-national-page .region-acc {
  border: 1.5px solid var(--line-strong, #aac4d1);
  border-radius: 10px;
  background: #fbfdfe;
  overflow: hidden;
}

.checkup-national-page .region-acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  font-weight: 900;
  color: #153958;
  background: #fff;
}

.checkup-national-page .region-acc summary::-webkit-details-marker {
  display: none;
}

.checkup-national-page .region-acc summary .region {
  min-width: 6em;
}

.checkup-national-page .region-acc summary .region-meta {
  font-size: 11px;
  color: #60788d;
  font-weight: 800;
}

.checkup-national-page .region-acc summary:after {
  display: block;
  width: 18px;
  aspect-ratio: 1 / 1;
  content: "＋";
  color: var(--teal-dark);
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

.checkup-national-page .region-acc[open] summary {
  background: #eef8fa;
}

.checkup-national-page .region-acc[open] summary:after {
  content: "−";
  font-weight: normal;
}

/* クリニックが1件も無い地方: summaryをグレーアウトし、pointer-events:noneでアコーディオンの
   開閉自体をできなくする（HTMLタグはis-emptyでも通常の地方と同じdetails/summaryのまま。
   template-checkup-national.php参照）。 */
.checkup-national-page .region-acc.is-empty summary {
  cursor: default;
  pointer-events: none;
  color: #9aabb8;
  background: #f4f7f9;
}

.checkup-national-page .region-acc.is-empty summary .region-meta {
  color: #9aabb8;
}

.checkup-national-page .region-acc.is-empty summary:after {
  color: #c3ced5;
}

.checkup-national-page .region-acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  font-weight: 900;
  color: #9aabb8;
  cursor: default;
}

@media (max-width: 768px) {
  .checkup-national-page .region-acc-head {
    padding: 10px;
  }
}

.checkup-national-page .region-acc-head .region {
  min-width: 6em;
}

.checkup-national-page .region-acc-head .region-meta {
  font-size: 11px;
  color: #9aabb8;
  font-weight: 800;
}

.checkup-national-page .region-list-empty {
  margin: 0;
  padding: 14px 16px 18px;
  color: #7a8da0;
  font-size: 12px;
}

.pref-link-line:last-child,
.region-list .pref-link-line:nth-last-child(-n+2) {
  border-bottom: 0;
}

@media (max-width: 640px) {
  .region-list .pref-link-line:nth-last-child(2) {
    border-bottom: 1px solid #e5eef3;
  }
}

.checkup-national-page .region-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
  padding: 0 16px 14px;
  background: #fff;
}

.checkup-national-page .pref-link-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #e5eef3;
  color: #2c7180;
  font-size: 12px;
  font-weight: 800;
}

.checkup-national-page .pref-link-line b {
  color: #14335d;
}

.checkup-national-page .pref-mini-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid #cfe0e8;
  border-radius: 999px;
  background: #fff;
  color: #60788d;
  font-size: 10px;
  font-weight: 900;
}

.checkup-national-page .pref-mini-link:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
  background: #f7fcfd;
}

/* --- 基本情報（decision-grid） --- */

.checkup-national-page .decision-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.checkup-national-page .info-card {
  border: 1.5px solid var(--line-strong, #aac4d1);
  border-radius: 12px;
  background: #fff;
  padding: 20px;
}

.checkup-national-page .info-card h3 {
  margin: 0 0 10px;
  color: #15345d;
  font-size: 18px;
}

.checkup-national-page .info-card p {
  margin: 0;
  color: #526a80;
  font-size: 14px;
}

.checkup-national-page .recommend-card {
  border-color: #efc98f;
  background: linear-gradient(135deg, #fff8e9, #fffdf8);
}

.checkup-national-page .recommend-card h3 {
  color: #9a5b15;
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkup-national-page .recommend-card h3:before {
  content: "★";
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e58a2f;
  color: #fff;
  font-size: 15px;
}

.checkup-national-page .recommend-card p {
  margin-top: 16px;
  background: #fff;
  border-left: 5px solid #d96d52;
  color: #69453e;
  padding: 14px 16px;
  border-radius: 0 9px 9px 0;
}

.checkup-national-page .recommend-card p strong {
  color: #a74838;
}


.checkup-national-page .tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.checkup-national-page .tag {
  font-size: 10px;
  font-weight: 600;
  border: 1px solid #d6e3eb;
  border-radius: 5px;
  background: #f3f7fa;
  color: #536a80;
  padding: 4px 8px;
}

.checkup-national-page .recommend-card .tag.primary {
  background: #fff;
  border-color: #e9c789;
  color: #8b5a1f;
}

.checkup-national-page .info-card ul {
  counter-reset: info-card-step;
  list-style: none;
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
}

.checkup-national-page .info-card ul li {
  position: relative;
  min-height: 30px;
  padding-left: 36px;
  color: #60768a;
  font-size: 12px;
}

.checkup-national-page .info-card ul li::before {
  counter-increment: info-card-step;
  content: counter(info-card-step);
  position: absolute;
  left: 0;
  top: -.2em;
  width: 28px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
}

.checkup-national-page .info-card ul li strong {
  color: #1b3c5e;
  font-size: 14px;
}

.checkup-national-page .recommend-card ul li::before {
  background: #e58a2f;
}

.checkup-national-page .flow {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 0;
}

.checkup-national-page .flow-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
}

.checkup-national-page .flow-row .num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.checkup-national-page .flow-row strong {
  display: block;
  color: #1b3c5e;
}

.checkup-national-page .flow-row span {
  display: block;
  font-size: 12px;
  color: #60768a;
}

.checkup-national-page .callout {
  margin-top: 16px;
  border-left: 5px solid #d96d52;
  background: #fff;
  padding: 14px 16px;
  border-radius: 0 9px 9px 0;
  color: #6d5128;
}

.checkup-national-page .callout strong {
  color: #8c5d18;
}

/* --- 選び方（比較表） --- */

.checkup-national-page .compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid var(--line-strong, #aac4d1);
  border-radius: 12px;
  overflow: hidden;
  font-size: 12px;
  background: #fff;
}

.checkup-national-page .compare-table th,
.checkup-national-page .compare-table td {
  padding: 12px 13px;
  border-right: 1px solid #d5e3ea;
  border-bottom: 1px solid #d5e3ea;
  text-align: left;
  vertical-align: top;
}

.checkup-national-page .compare-table thead th {
  background: #eef8fa;
  color: #17375d;
}

.checkup-national-page .compare-table thead th:first-of-type {
  min-width: 110px;
}

/* --- 受診前チェック（article-grid） --- */

.checkup-national-page .article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.checkup-national-page .article-card {
  border: 1.5px solid var(--line-strong, #aac4d1);
  border-radius: 11px;
  background: #fff;
  padding: 18px;
}

.checkup-national-page .article-card .label {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  color: var(--teal-dark);
  background: var(--teal-soft);
  border: 1px solid #bfe3ea;
  border-radius: 999px;
  padding: 3px 8px;
  margin-bottom: 9px;
}

.checkup-national-page .article-card h3 {
  margin: 0 0 7px;
  color: #15345d;
  font-size: 16px;
}

.checkup-national-page .article-card p {
  margin: 0;
  color: #5d7287;
  font-size: 12.5px;
  line-height: 1.7;
}

.checkup-national-page .article-points {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #e1ebf0;
}

.checkup-national-page .article-point {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 7px;
  align-items: start;
  color: #526b81;
  font-size: 11.5px;
}

.checkup-national-page .article-point:before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--teal-soft);
  color: var(--teal-dark);
  font-size: 10px;
  font-weight: 900;
}

/* --- FAQ・クロスリンク --- */

/* .cross-cardのホバー演出・「›」矢印は共通スタイル（3254行目付近）に統一済み。 */

@media(max-width: 768px) {
  .checkup-national-page .region-list {
    grid-template-columns: 1fr;
  }

  .checkup-national-page .article-grid {
    grid-template-columns: 1fr;
  }

  .checkup-national-page .compare-table {
    min-width: 600px;
  }
}


/* ==========================================================================
   クリニック詳細 /clinics/{slug}/
   カンプ（clinic-detail-design-v13.html）のHTML構造・コピーを移植。
   .breadcrumb-wrap / .contents / .hero / .hero-grid / .container / .btn / .tag /
   .chip / .card / .muted は front-page.php・template-area-index.php と共通の
   既存クラスをそのまま使う。色は本ファイル内の:rootを再利用し、カンプ独自の色は
   ステータス表示等の限定用途のみ最小限で追加している。
   まだACFフィールドとは連携していない（べた書きのサンプル文言）。
   ========================================================================== */
.clinics-clinic-page .hero {
  padding: 36px 0 0;
}

.clinics-clinic-page .hero-gallery {
  display: block;
}

.clinics-clinic-page .gallery-main {
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--soft-blue), var(--soft));
  box-shadow: var(--shadow);
  position: relative;
}

/* .clinics-clinic-page .gallery-main::after {
  content: "外観・院内写真";
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #fff;
  background: rgba(18, 42, 85, .68);
  font-size: 12px;
  font-weight: 800;
} */

.clinics-clinic-page .gallery-main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.clinics-clinic-page .thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.clinics-clinic-page .thumb {
  height: 56px;
  min-height: auto;
  border-radius: 6px;
  border: 2px solid transparent;
  background-color: var(--soft);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  opacity: .72;
  padding: 0;
}

.clinics-clinic-page .thumb::before,
.clinics-clinic-page .thumb::after {
  display: none;
}

.clinics-clinic-page .thumb.active {
  border-color: var(--teal);
  opacity: 1;
}

.clinics-clinic-page .contents {
  padding: 26px 0 60px;
  border-bottom: 0;
}

/* --- hero 左カラム --- */
.clinics-clinic-page h1 {
  margin: 0 0 14px;
  font-size: clamp(30px, 4vw, 44px);
}

.clinics-clinic-page .hero-status {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
}

.clinics-clinic-page .verified-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.clinics-clinic-page .verified-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 800;
}

.clinics-clinic-page .updated-text {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.clinics-clinic-page .department-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.clinics-clinic-page .department-label {
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
}

.clinics-clinic-page .tag {
  display: inline-flex;
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--muted);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}

.clinics-clinic-page .hero-meta {
  display: grid;
  gap: 8px;
  margin: 0 0 20px;
  color: var(--navy);
  font-size: 14px;
}

.clinics-clinic-page .hero-meta p {
  position: relative;
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding-left: 1.7em;
}

.clinics-clinic-page .hero-meta .hero-address::before,
.clinics-clinic-page .hero-meta .hero-access::before {
  position: absolute;
  top: .3em;
  left: 0;
  content: "";
  display: block;
  width: 1.2em;
  aspect-ratio: 1 / 1;
}

.clinics-clinic-page .hero-meta .hero-address::before {
  background: url(../img/hero-address-icon.svg) center center / contain no-repeat;
}

.clinics-clinic-page .hero-meta .hero-access::before {
  background: url(../img/hero-access-icon.svg) center center / contain no-repeat;
}

.clinics-clinic-page .hero-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.clinics-clinic-page .btn {
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fff;
  color: var(--teal-dark);
  font-weight: 800;
  cursor: pointer;
  transition: .18s ease;
  font-size: 16px;
}

.clinics-clinic-page .btn:has(+.btn) {
  margin-top: 0;
}

.clinics-clinic-page .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 126, 145, .12);
}

.clinics-clinic-page .btn.reserve {
  position: relative;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  border-color: var(--teal-dark);
  color: #fff;
  box-shadow: 0 8px 18px rgba(0, 115, 130, .2);
}

.clinics-clinic-page .btn.phone {
  position: relative;
  background: var(--teal-soft);
  border-color: var(--line-strong);
  color: var(--teal-dark);
}

.clinics-clinic-page .btn.reserve::before,
.clinics-clinic-page .btn.phone::before {
  content: "";
  display: block;
  width: 1.2em;
  aspect-ratio: 1 / 1;
}

.clinics-clinic-page .btn.reserve::before {
  background: url(../img/reserve-btn-icon.svg) center center / contain no-repeat;
}

.clinics-clinic-page .btn.phone:before {
  background: url(../img/phone-btn-icon.svg) center center / contain no-repeat;
}

.clinics-clinic-page .btn.line {
  background: #06c755;
  border-color: #06c755;
  color: #fff;
  box-shadow: 0 6px 14px rgba(6, 199, 85, .18);
}

.clinics-clinic-page .btn.small {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 13px;
}

.clinics-clinic-page .btn.block {
  width: 100%;
}

/* --- ページ内タブ --- */
.clinics-clinic-page .sticky-tabs-wrap {
  position: sticky;
  top: 82px;
  z-index: 5;
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

@media (max-width: 1000px) {
  .clinics-clinic-page .sticky-tabs-wrap {
    top: 60px;
  }

  .clinics-clinic-page section.section {
    scroll-margin-top: 120px;
  }

}

.clinics-clinic-page .sticky-tabs {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  overflow-x: auto;
  gap: 4px;
}

.clinics-clinic-page .tab-link {
  padding: 14px 14px;
  color: var(--muted);
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.clinics-clinic-page .tab-link.active {
  color: var(--teal-dark);
  border-bottom-color: var(--teal);
}

/* --- 本文2カラムレイアウト（横幅・gapは.page-grid共通。ここではpaddingのみ上書き） --- */
.clinics-clinic-page .page-grid {
  padding: 28px 0 30px;
}

.clinics-clinic-page section.section {
  padding-top: 0;
  scroll-margin-top: 140px;
  margin-bottom: 34px;
  padding-bottom: 0;
}

.clinics-clinic-page .page-grid .clinic-main-col>:last-child {
  margin-bottom: 0;
}

.clinics-clinic-page .section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--navy);
  font-size: 22px;
  line-height: 1.4;
}

.clinics-clinic-page .section-title::before {
  content: "";
  width: 5px;
  height: 20px;
  border-radius: 999px;
  background: var(--teal);
}

/* --- 基本情報テーブル --- */
.clinics-clinic-page .info-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.clinics-clinic-page .info-table th,
.clinics-clinic-page .info-table td {
  border-bottom: 1px solid var(--line);
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.clinics-clinic-page .info-table tr:last-child th,
.clinics-clinic-page .info-table tr:last-child td {
  border-bottom: 0;
}

.clinics-clinic-page .info-table th {
  width: 150px;
  color: var(--navy);
  background: var(--soft);
  font-weight: 800;
}

.clinics-clinic-page .inline-summary {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
}

.clinics-clinic-page .department-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.clinics-clinic-page .department-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.clinics-clinic-page .department-card b {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--navy);
  font-size: 14px;
}

.clinics-clinic-page .department-icon {
  width: 20px;
  aspect-ratio: 1 / 1;
  border-radius: 5px;
  object-fit: cover;
  flex: none;
}

.clinics-clinic-page .department-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.clinics-clinic-page .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid var(--line-strong);
  background: #fff;
}

.clinics-clinic-page .status-pill.ok {
  color: var(--teal-dark);
  border-color: var(--line-strong);
  background: var(--teal-soft);
}

.clinics-clinic-page .status-pill.limited {
  color: #b87900;
  border-color: #f2d598;
  background: #fffaf0;
}

.clinics-clinic-page .table-note {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

/* --- 診療時間テーブル --- */
.clinics-clinic-page .hours-table-scroll {
  width: 100%;
  overflow: auto;
}

.clinics-clinic-page .hours-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #f2f9fb;
  background: #fff;
  border-radius: 8px;
  font-size: 14px;
}

.clinics-clinic-page .hours-table tbody tr {
  border-top: 1px solid var(--line-strong);
}

.clinics-clinic-page .hours-table thead th+th,
.clinics-clinic-page .hours-table td {
  border-left: 1px solid var(--line-strong);
}

.clinics-clinic-page .hours-table th,
.clinics-clinic-page .hours-table td {
  padding: 11px 8px;
  text-align: center;
}

.clinics-clinic-page .hours-table th {
  background: #f1f7fa;
  color: var(--navy);
  font-weight: 900;
  min-width: 40px;
}

.clinics-clinic-page .hours-table th:first-of-type {
  min-width: 80px;
}

.clinics-clinic-page .hours-table th:first-of-type,
.clinics-clinic-page .hours-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
}

.clinics-clinic-page .hours-table th:first-of-type::after,
.clinics-clinic-page .hours-table tbody th::after {
  position: absolute;
  top: 0;
  right: -1px;
  content: "";
  display: block;
  height: 100%;
  width: 1px;
  background: var(--line-strong);
}

.clinics-clinic-page .hours-table .closed {
  background: #e3e7ec;
  color: var(--muted);
  font-weight: 800;
}

.clinics-clinic-page .note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  background: none;
  border: 0;
  padding: 0;
}

/* --- コース概要 --- */
.clinics-clinic-page .course-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
  color: var(--muted);
  font-size: 13px;
}

.clinics-clinic-page .plans {
  display: grid;
  gap: 16px;
}

.clinics-clinic-page .plan-card {
  display: grid;
  grid-template-columns: 180px 1fr 170px;
  gap: 18px;
  align-items: stretch;
  scroll-margin-top: 140px;
}

.clinics-clinic-page .plan-photo {
  height: 126px;
  border-radius: 8px;
  background: var(--soft);
  border: 1px solid var(--line);
  overflow: hidden;
}

.clinics-clinic-page .plan-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.clinics-clinic-page .plan-card h3 {
  margin: 0 0 7px;
  color: var(--navy);
  font-size: 18px;
  font-weight: bold;
}

.clinics-clinic-page .plan-desc {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clinics-clinic-page .plan-desc.expanded {
  display: block;
  -webkit-line-clamp: unset;
}

.clinics-clinic-page .plan-copy-block {
  margin-bottom: 16px;
}

.clinics-clinic-page .more-btn {
  display: inline-flex;
  margin: 6px 0 0;
  padding: 0;
  color: var(--teal-dark);
  background: transparent;
  border: 0;
  font-weight: 800;
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.clinics-clinic-page .plan-cost-title {
  margin: 12px 0 6px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
}

.clinics-clinic-page .plan-cost {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  font-size: 12px;
}

.clinics-clinic-page .plan-cost-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
}

.clinics-clinic-page .plan-cost-row:last-child {
  border-bottom: 0;
}

.clinics-clinic-page .plan-cost-row span {
  min-width: 5em;
}

.clinics-clinic-page .plan-cost-row b {
  color: var(--navy);
}

.clinics-clinic-page .plan-cost-note {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.clinics-clinic-page .recommend-details {
  margin-top: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--soft);
  overflow: hidden;
}

.clinics-clinic-page .recommend-details summary {
  list-style: none;
  cursor: pointer;
  padding: 9px 12px;
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.clinics-clinic-page .recommend-details summary::-webkit-details-marker {
  display: none;
}

.clinics-clinic-page .recommend-details summary::after {
  content: "\2304";
  font-size: 15px;
}

.clinics-clinic-page .recommend-details[open] summary::after {
  content: "\2303";
}

.clinics-clinic-page .recommend-details ul {
  margin: 0;
  padding: 4px 14px 12px 28px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}

.clinics-clinic-page .recommend-details ul li+li {
  margin-top: 6px;
}

.clinics-clinic-page .plan-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clinics-clinic-page .price {
  justify-content: flex-start;
  gap: 6px 4px;
  font-size: 22px;
  color: var(--navy);
  font-weight: 900;
  line-height: 1.2;
  border: none;
  padding: 0;
  flex-wrap: wrap;
}

.clinics-clinic-page .price-note {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 2px;
  font-weight: bold;
}

.clinics-clinic-page .plan-meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 18px;
  gap: 6px;
  align-self: stretch;
}

.clinics-clinic-page .mini {
  padding: 4px 8px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
}

/* --- 予約方法 / 結果 / おすすめ（カード群） --- */
.clinics-clinic-page .reservation-grid,
.clinics-clinic-page .three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* MVP: LINE相談が現在未使用のため予約方法カードを2列に調整（clinic-detail-design-mvp-v1.html準拠） */
.clinics-clinic-page .reservation-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.clinics-clinic-page .reservation-grid .feature-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.clinics-clinic-page .reservation-grid .feature-card {}

.clinics-clinic-page .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.clinics-clinic-page .feature-card h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 16px;
}

.clinics-clinic-page .feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.clinics-clinic-page .feature-cta {
  display: flex;
  align-items: flex-end;
  margin-top: 14px;
  flex: 1;
}

.clinics-clinic-page .check-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.clinics-clinic-page .check-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
}

.clinics-clinic-page .check-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 900;
}

/* --- 医師・認定 --- */
.clinics-clinic-page .doctor-card {
  display: block;
  /* grid-template-columns: 110px 1fr;
  gap: 16px; */
  align-items: center;
}

.clinics-clinic-page .doctor-photo {
  width: 110px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: var(--soft);
  border: 1px solid var(--line);
}

.clinics-clinic-page .doctor-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clinics-clinic-page .doctor-card h3 {
  margin: 0 0 6px;
  color: var(--navy);
}

.clinics-clinic-page .doctor-card p {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--muted);
}

.clinics-clinic-page .credential-list {
  margin-top: 18px;
  display: grid;
  gap: 18px;
}

.clinics-clinic-page .credential-section {
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}

.clinics-clinic-page .credential-section h3 {
  position: relative;
  margin: 0 0 8px;
  padding-left: 14px;
  color: var(--navy);
  font-size: 17px;
}

.clinics-clinic-page .credential-section h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 4px;
  height: 1.1em;
  border-radius: 999px;
  background: var(--teal);
}

.clinics-clinic-page .credential-section p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
}

.clinics-clinic-page .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.clinics-clinic-page .info-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 900;
  cursor: help;
}

.clinics-clinic-page .info-tag::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: 240px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(18, 42, 85, .95);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.65;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: .16s ease;
  z-index: 30;
  pointer-events: none;
}

.clinics-clinic-page .info-tag:not([data-tip=""]):hover::after,
.clinics-clinic-page .info-tag:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.clinics-clinic-page .equipment-tag {
  position: relative;
}

.clinics-clinic-page .equipment-tag::after {
  display: none;
}

.clinics-clinic-page .equipment-popover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: 240px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(18, 42, 85, .96);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: .16s ease;
  z-index: 40;
  pointer-events: none;
  text-align: left;
}

.clinics-clinic-page .equipment-photo {
  display: block;
  height: 90px;
  border-radius: 7px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, .16);
}

.clinics-clinic-page .equipment-popover p {
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.65;
}

.clinics-clinic-page .equipment-tag:hover .equipment-popover,
.clinics-clinic-page .equipment-tag:focus-visible .equipment-popover {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* --- アクセス --- */
.clinics-clinic-page .map-card {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 18px;
  align-items: center;
}

.clinics-clinic-page .map-card p {
  margin: .6em 0;
}

.clinics-clinic-page .map-card>div>:first-child {
  margin-top: 0;
}

.clinics-clinic-page .map-visual {
  height: 210px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--soft);
  position: relative;
}

.clinics-clinic-page .map-visual iframe {
  width: 100%;
  height: 100%;
}

/* --- お知らせ --- */
.clinics-clinic-page .news-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.clinics-clinic-page .news-item {
  display: grid;
  grid-template-columns: 96px 76px 1fr 20px;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.clinics-clinic-page .news-item:last-child {
  border-bottom: 0;
}

.clinics-clinic-page .news-label {
  border-radius: 999px;
  background: #fff4dc;
  color: #b87800;
  text-align: center;
  padding: 2px 8px;
  font-weight: 900;
  font-size: 11px;
}

.clinics-clinic-page .guide-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.clinics-clinic-page .guide-card {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
}

.clinics-clinic-page .guide-photo {
  aspect-ratio: 845 / 494;
  background: var(--soft);
  position: relative;
}

.clinics-clinic-page .guide-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clinics-clinic-page .medical-card .guide-photo::after {
  content: "健診施設";
  position: absolute;
  left: 10px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--navy);
  font-size: 11px;
  font-weight: 900;
}

.clinics-clinic-page .guide-body {
  padding: 10px;
}

.clinics-clinic-page .guide-body b {
  display: block;
  color: var(--navy);
  font-size: 13px;
  line-height: 1.55;
}

.clinics-clinic-page .guide-body small {
  color: var(--muted);
  display: inline-block;
  margin-top: 6px;
}

.clinics-clinic-page .guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.clinics-clinic-page .guide-meta span {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--soft-blue);
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
}

/* --- サイドバー --- */
.clinics-clinic-page .clinic-side {
  position: sticky;
  top: 150px;
  display: grid;
  gap: 16px;
}

.side-card {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(24, 62, 90, .055);
}

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

.clinics-clinic-page .side-card h3 {
  margin: 0 0 13px;
  color: var(--navy);
  font-size: 18px;
}

.clinics-clinic-page .side-subtitle {
  margin-bottom: 10px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 900;
}

.clinics-clinic-page .side-course-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 3行目以降は.is-expanded付与まで折りたたむ（grid-auto-rows:0で高さ0にして隠す）。
     列数はブレークポイントで変わる（4列→2列→4列）ため、行の境界はJS側で数値計算せず
     グリッドの自動配置に任せる。 */
  grid-template-rows: repeat(2, auto);
  grid-auto-rows: 0;
  overflow: hidden;
  gap: 12px 8px;
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.clinics-clinic-page .side-course-icons.is-expanded {
  grid-template-rows: none;
  grid-auto-rows: auto;
  overflow: visible;
}

.clinics-clinic-page .side-course-icon {
  display: grid;
  justify-items: center;
  gap: 5px;
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  /* 親.side-course-iconsのoverflow:hiddenはpadding外周でしかクリップされないため、
     grid-auto-rows:0で高さ0になった3行目以降がpadding分だけはみ出して見えてしまう。
     項目自体にもoverflow:hiddenを付け、0px行では確実に中身をクリップする。 */
  overflow: hidden;
}

.clinics-clinic-page .side-course-icon>span:first-of-type {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--teal);
  color: #fff;
  font-style: normal;
  font-size: 16px;
  overflow: hidden;
}

.clinics-clinic-page .side-course-icon>span:first-of-type img {
  width: 58%;
  aspect-ratio: 1 / 1;
}

.clinics-clinic-page .side-course-icon.is-female i {
  background: #ec5aa5;
}

.clinics-clinic-page .side-course-icon.is-blue i {
  background: #2f77d6;
}

.clinics-clinic-page .side-course-icons-more-btn {
  display: none;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* --- クロスリンク・ページトップ --- */
.clinics-clinic-page .link-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.clinics-clinic-page .link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font-weight: 900;
}

.pagetop {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--navy);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  z-index: 40;
}

.pagetop .cl-arrow {
  transform: rotate(-45deg) translate(-2px, 2px);
  width: 10px;
  height: 10px;
}

.clinics-clinic-page .hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
}

@media (max-width: 1000px) {

  /* minmax(0, 1fr)にする理由: 素の1fr は minmax(auto, 1fr) と同じで、
     中身（診療時間テーブル等）の最小コンテンツ幅より縮まずページがはみ出す。
     0を下限にすることでトラックが縮小でき、内側のoverflow:autoが機能する。 */
  .clinics-clinic-page .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .clinics-clinic-page .page-grid {
    padding: 28px 0;
  }

  .clinics-clinic-page .clinic-side {
    position: static;
  }

  .clinics-clinic-page .reservation-grid,
  .clinics-clinic-page .three-col,
  .clinics-clinic-page .department-grid,
  .clinics-clinic-page .side-course-icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clinics-clinic-page .guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {

  .clinics-clinic-page .hero-actions,
  .clinics-clinic-page .two-col,
  .clinics-clinic-page .reservation-grid,
  .clinics-clinic-page .three-col,
  .clinics-clinic-page .department-grid,
  .clinics-clinic-page .link-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .clinics-clinic-page .plan-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .clinics-clinic-page .map-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .clinics-clinic-page .guide-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .clinics-clinic-page .news-item {
    grid-template-columns: 78px 68px minmax(0, 1fr);
  }

  .clinics-clinic-page .news-item>span:last-child {
    display: none;
  }

  .clinics-clinic-page .side-course-icons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .clinics-clinic-page .info-table th {
    width: 110px;
  }
}

/* ==========================================================================
   site.cssから移設（ユーザー指示：メディアクエリなし、またはmax-width>800pxのルール）
   ========================================================================== */

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

.cl-arrow {
  display: inline-block;
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  box-sizing: border-box;
  vertical-align: middle;
}

.cl-arrow-right {
  transform: rotate(45deg);
}

.cl-arrow-left {
  transform: rotate(-135deg);
}

.cl-arrow-up {
  transform: rotate(-45deg);
}

.cl-arrow-down {
  transform: rotate(135deg);
}

.cl-arrow-line {
  position: relative;
  display: inline-block;
  width: 11px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
}

.cl-arrow-line::after {
  content: "";
  position: absolute;
  top: -3px;
  right: 0;
  width: 7px;
  height: 7px;
  border: 0;
  border-top: solid 1px currentColor;
  border-right: solid 1px currentColor;
  transform: rotate(45deg);
}

.cl-arrow-line-ne {
  transform: rotate(-45deg);
}

.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 {
  max-width: 1180px;
  padding: 0 18px;
  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;

  min-width: 0;
}

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

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

.logo img {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
}

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

.nav a {
  position: relative;
  transition: color .18s ease;
}

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

.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transition: transform .18s ease;
}

.nav a:not(.btn):hover::after,
.nav a:not(.btn):focus-visible::after {
  transform: scaleX(1);
}

.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;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.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:active {
  transform: translateY(1px);
}

.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);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 900;
  color: #005f6d;
}

.eyebrow:before {
  content: "";
  width: 20px;
  height: 3px;
  border-radius: 3px;
  background: var(--teal);
  animation: kkEyebrowPulse 2.8s ease-in-out infinite;
}

@keyframes kkEyebrowPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 143, 163, .32)
  }

  50% {
    box-shadow: 0 0 0 5px rgba(0, 143, 163, 0)
  }
}

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

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

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

h3 {
  font-size: 18px;
}

.lead {
  max-width: 820px;
  margin: 0;
  color: #395168;
  font-size: 14px;
}

.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: 38px 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;
}

.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;
}

.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);
}

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

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

.doctor-card>:last-child {
  margin-bottom: 0;
}

.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;
  transition: .4s;
}

a.tag:hover {
  opacity: .6;
}

.tag.topics-cat {
  border-color: #c8d6ee;
  background: #eff3ff;
  color: #385b95;
}

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

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

.page-layout:not(:has(> .sidebar)) {
  max-width: 1000px;
  grid-template-columns: 1fr;
}

/* --- 本文＋サイドバーの2カラムレイアウト（共通クラス名）。
   クリニック詳細（single-clinic.php）・topics詳細（single-topics.php）・
   お問い合わせ（page-contact.php）の3ページで共通化している（ユーザー指示。
   以前はclinic-page-grid / page-layout / page-grid(.contact-page配下)と
   ページごとに別クラス・別の横幅・gapだったため揃えた）。
   横幅・gapの値自体は.page-layoutと同じ（300px / 24px）。ページ固有の余白・
   padding等は各ページのスコープ済みセレクタ側で追加する。 */
.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1000px) {
  .page-grid {
    grid-template-columns: 1fr;
  }
}

.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:has(:not(.thumbnail))>:first-child,
.article-body:has(:not(.thumbnail)) .mokuji_area_wrap>:first-child {
  margin-top: 0;
}

.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-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 .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 .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;
}

.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;
  color: #5b6b83;
  font-size: 13px;
  gap: 2px 14px;
}

.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-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;
}

.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);
}

.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 {
  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;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin-bottom: 16px;
}

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

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

.section-head .text-link {
  position: relative;
  color: var(--teal-dark);
  font-weight: 800;
  font-size: 12px;
}

.section-head .text-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .22s ease;
}

.section-head .text-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.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 {
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid #d8e4ed;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;

}

.clinic-card img,
.media-card img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1px solid #e3edf4;
}

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

.card-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

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

.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 80px;
}

.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;
}

.cl-footer-cta-group {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.btn.outline.cl-footer-cta-btn {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--teal);
  color: var(--teal-dark);
  font-weight: 800;
  margin: 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}

.btn.outline.cl-footer-cta-btn:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.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;
}

.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;
}

.nav-toggle {
  display: none;
}

.nav-toggle-btn {
  display: none;
}

.notice-box a {
  align-items: center;
}

.notice-box span {
  align-self: center;
  height: fit-content;
  line-height: 1.5;
}

.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;
}

.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;
}

.conne-slider-viewport {
  padding: 10px 0 16px;
}

.conne-slider-viewport {
  touch-action: pan-y;
}

.conne-slider-track img {
  -webkit-user-drag: none;
  user-select: none;
}

.chips .chip,
.chip {
  white-space: nowrap;
}

.risk-box {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 14px;
}

.risk-box>a {
  justify-self: start;
}

@media (max-width: 900px) {


  .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;
  }

  .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 {
    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%;
  }

}

@media (max-width: 1000px) {
  .media-card-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .top-search-grid,
  .top-category-blocks,
  .area-grid,
  .specialty-grid,
  .clinic-card-grid,
  .consulting-band,
  .bottom-info {
    grid-template-columns: 1fr;
  }

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

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

  .btn.outline.cl-footer-cta-btn {
    width: 100%;
    max-width: 300px;
  }

  .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;
  }

  .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;
  }

  .header-inner {
    padding: 16px 18px;
  }

  .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;
  }

  .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::after {
    display: none;
  }

  .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);
  }

  .footer-top-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 18px;
  }

  .footer-top-grid>div:first-child {
    grid-column: 1 / -1;
  }

  .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;
  }

  .top-category-card .card-arrow {
    display: none;
  }

}

@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);
  }

}