@charset "UTF-8";
/* =========================================================================
   HOSPIT article body components  (THE THOR child)
   記事本文内の共通ブロックを HOSPIT トーンで装飾。
   共有マーカー .hospit-fitness-article 配下にスコープしているため、
   個別記事に手を入れなくても同じ見た目が当たる。
   ========================================================================= */

.hospit-fitness-article {
  --a-ink: #16403d;
  --a-teal: #3f9b98;
  --a-teal-dark: #2f7c79;
  --a-coral: #e07a6f;
  --a-pink: #d97aa8;
  --a-green: #5aab7a;
  --a-blue: #5a8fd0;
  --a-gray: #7d8a86;
  --a-text: #2c3a36;
  --a-muted: #66746f;
  --a-line: #e4ece9;
  --a-soft: #f4f7f5;
  color: var(--a-text);
  line-height: 2;
  font-size: 16px;
}
.hospit-fitness-article > *:first-child { margin-top: 0; }
.hospit-fitness-article p { margin: 0 0 1.4em; }
.hospit-fitness-article a { color: var(--a-teal-dark); text-decoration: none; border-bottom: 1px solid rgba(63,155,152,0.35); }
.hospit-fitness-article a:hover { color: var(--a-teal); border-bottom-color: var(--a-teal); }

/* ---- headings -------------------------------------------------------- */
.hospit-fitness-article h2 {
  font-weight: 900;
  font-size: clamp(22px, 3vw, 27px);
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--a-ink);
  margin: 2.2em 0 0.9em;
  padding: 0.1em 0 0.1em 16px;
  border-left: 5px solid var(--a-teal);
}
.hospit-fitness-article h3 {
  font-weight: 800;
  font-size: clamp(18px, 2.4vw, 21px);
  line-height: 1.55;
  color: var(--a-ink);
  margin: 1.8em 0 0.7em;
}

/* ---- small print ----------------------------------------------------- */
.hospit-fitness-article .note-small,
.hospit-fitness-article .pr-note,
.hospit-fitness-article .mini-note,
.hospit-fitness-article .caption,
.hospit-fitness-article .studio-caption {
  font-size: 13px;
  color: var(--a-muted);
  line-height: 1.8;
}
.hospit-fitness-article .mini-note { margin-top: 8px; }

/* ---- editorial note (調査・編集方針) --------------------------------- */
.hospit-fitness-article .editor-note {
  background: var(--a-soft);
  border: 1px solid #e2ebe7;
  border-left: 4px solid var(--a-teal);
  border-radius:10px;
  padding: 20px 22px;
  margin: 0 0 32px;
  font-size: 14px;
  line-height: 1.9;
  color: #4a5852;
}
.hospit-fitness-article .editor-note p { margin: 0 0 0.8em; font-size: 13px;color: inherit}
.hospit-fitness-article .editor-note p:last-child { margin-bottom: 0; }
.hospit-fitness-article .editor-note strong { color: var(--a-ink); }
.hospit-fitness-article .editor-note ul { margin: 0.6em 0; padding-left: 1.3em; }
.hospit-fitness-article .editor-note li { margin: 0.3em 0;font-size: 13px; }

/* ---- lead / summary boxes -------------------------------------------- */
.hospit-fitness-article .lead-box,
.hospit-fitness-article .summary-box {
  background: linear-gradient(135deg, #f0f7f5, #eef4f8);
  border: 1px solid var(--a-line);
  border-radius:10px;
  padding: 26px 28px;
  margin: 28px 0;
}
.hospit-fitness-article .lead-box h2,
.hospit-fitness-article .summary-box h2,
.hospit-fitness-article .lead-box h3,
.hospit-fitness-article .summary-box h3 {
  margin-top: 0;
  border-left: none;
  padding-left: 0;
}
.hospit-fitness-article .lead-box ul,
.hospit-fitness-article .summary-box ul {
  margin: 0.4em 0 0;
  padding-left: 1em;
  list-style: none;
}
.hospit-fitness-article .lead-box li,
.hospit-fitness-article .summary-box li {
  position: relative;
  padding-left: 0;
  margin: 0.6em 0;
  line-height: 1.8;
}
.hospit-fitness-article .lead-box li::before,
.hospit-fitness-article .summary-box li::before {
/*
  content: "";
*/
  position: absolute;
  left: 4px;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--a-teal);
}

/* ---- table of contents ----------------------------------------------- */
.hospit-fitness-article .toc-box {
  background: #fff;
  border: 1px solid var(--a-line);
  border-radius:10px;
  padding: 22px 26px;
  margin: 28px 0;
}
.hospit-fitness-article .toc-box > p:first-child {
  font-weight: 800;
  font-size: 15px;
  margin: 0 0 12px;
  color: var(--a-ink);
}
.hospit-fitness-article .toc-box ol {
  margin: 0;
  padding-left: 1.4em;
  counter-reset: hx-toc;
}
.hospit-fitness-article .toc-box ol li {
  margin: 0.5em 0;
  padding-left: 6px;
}
.hospit-fitness-article .toc-box a { border-bottom: none; }
.hospit-fitness-article .toc-box a:hover { color: var(--a-teal); }

/* ---- comparison tables ----------------------------------------------- */
.hospit-fitness-article .compare-table-wrap {
  overflow-x: auto;
  margin: 28px 0;
  border: 1px solid var(--a-line);
  border-radius:10px;
  -webkit-overflow-scrolling: touch;
}
.hospit-fitness-article .compare-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 14.5px;
}
.hospit-fitness-article .compare-table-wrap th,
.hospit-fitness-article .compare-table-wrap td {
  padding: 14px 16px;
  border-bottom: 1px solid #edf1ef;
  border-right: 1px solid #edf1ef;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.hospit-fitness-article .compare-table-wrap thead th {
  background: var(--a-ink);
  color: #dbe9e6;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  border-right-color: rgba(255,255,255,0.12);
}
.hospit-fitness-article .compare-table-wrap tbody tr:nth-child(even) td { background: #fafcfb; }
.hospit-fitness-article .compare-table-wrap tbody td strong { color: var(--a-ink); font-weight: 800; }
.hospit-fitness-article .compare-table-wrap a { border-bottom: none; font-weight: 700; }

/* ---- generic card grids ---------------------------------------------- */
.hospit-fitness-article .cta-grid,
.hospit-fitness-article .area-grid,
.hospit-fitness-article .point-grid,
.hospit-fitness-article .related-grid {
  display: grid;
  gap: 18px;
  margin: 28px 0;
}
.hospit-fitness-article .cta-grid,
.hospit-fitness-article .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hospit-fitness-article .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hospit-fitness-article .point-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.hospit-fitness-article .cta-card,
.hospit-fitness-article .area-card,
.hospit-fitness-article .point-card,
.hospit-fitness-article .related-card {
  background: #fff;
  border: 1px solid var(--a-line);
  border-radius:10px;
  padding: 24px 24px 26px;
}
.hospit-fitness-article .cta-card h3,
.hospit-fitness-article .area-card h3,
.hospit-fitness-article .point-card h3,
.hospit-fitness-article .related-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
}
.hospit-fitness-article .cta-card p,
.hospit-fitness-article .area-card p,
.hospit-fitness-article .point-card p { margin: 0 0 0.9em; font-size: 14.5px; color: #4a5852; }
.hospit-fitness-article .cta-card p:last-child,
.hospit-fitness-article .area-card p:last-of-type { margin-bottom: 0; }

/* accent boxes: colored top border + tinted heading */
.hospit-fitness-article .pilates-box { border-top: 3px solid var(--a-teal); }
.hospit-fitness-article .hot-box     { border-top: 3px solid var(--a-coral); }
.hospit-fitness-article .women-box   { border-top: 3px solid var(--a-pink); }
.hospit-fitness-article .private-box { border-top: 3px solid var(--a-green); }
.hospit-fitness-article .pilates-box h3 { color: var(--a-teal-dark); }
.hospit-fitness-article .hot-box h3     { color: #c85f54; }
.hospit-fitness-article .women-box h3   { color: #b85b8c; }
.hospit-fitness-article .private-box h3 { color: #3f8b5f; }

/* ---- badges ---------------------------------------------------------- */
.hospit-fitness-article .area-card .badge,
.hospit-fitness-article .badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 11px;
  border-radius:10px;
  margin: 0 6px 12px 0;
  background: rgba(63,155,152,0.12);
  color: var(--a-teal-dark);
}
.hospit-fitness-article .badge.hot   { background: rgba(224,122,111,0.14); color: #c85f54; }
.hospit-fitness-article .badge.pink  { background: rgba(217,122,168,0.14); color: #b85b8c; }
.hospit-fitness-article .badge.green { background: rgba(90,171,122,0.15); color: #3f8b5f; }
.hospit-fitness-article .badge.gray  { background: #eef1ef; color: #5c6b66; }

/* ---- point cards (numbered checklist) -------------------------------- */
.hospit-fitness-article .point-card { border-top: 3px solid var(--a-teal); }
.hospit-fitness-article .point-card h3 { color: var(--a-ink); font-size: 16px; }

/* ---- caution box ----------------------------------------------------- */
.hospit-fitness-article .caution-box {
  background: #fff5f3;
  border: 1px solid #f4d9d4;
  border-radius:10px;
  padding: 22px 24px;
  margin: 28px 0;
}
.hospit-fitness-article .caution-box h3 {
  margin: 0 0 8px;
  color: #c85f54;
  font-size: 16px;
}
.hospit-fitness-article .caution-box p { margin: 0; color: #7a5450; font-size: 14px; line-height: 1.9; }

/* ---- FAQ ------------------------------------------------------------- */
.hospit-fitness-article .faq-box {
  background: #fff;
  border: 1px solid var(--a-line);
  border-radius:10px;
  padding: 20px 22px;
  margin: 14px 0;
}
.hospit-fitness-article .faq-box h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--a-ink);
  padding-left: 30px;
  position: relative;
}
.hospit-fitness-article .faq-box h3::before {
/*
  content: "Q";
*/
  position: absolute;
  left: 0;
  top: -1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--a-teal);
  color: #fff;
  font-family: "Archivo", sans-serif;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hospit-fitness-article .faq-box p { margin: 0 30px; font-size: 14.5px; color: #4a5852; }

/* ---- related links --------------------------------------------------- */
.hospit-fitness-article .related-card { background: var(--a-soft); }
.hospit-fitness-article .related-card ul { margin: 0; padding-left: 1.2em; }
.hospit-fitness-article .related-card li { margin: 0.5em 0; line-height: 1.7; }

/* ---- CTA buttons ----------------------------------------------------- */
.hospit-fitness-article .cta-button,
.hospit-fitness-article .area-hub-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 50px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--a-teal);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  border-bottom: none;
  margin-top: 6px;
  transition: background 0.2s, transform 0.2s;
}
.hospit-fitness-article .cta-button:hover,
.hospit-fitness-article .area-hub-link:hover {
  background: var(--a-teal-dark);
  color: #fff !important;
  transform: translateY(-1px);
  border-bottom: none;
}
.hospit-fitness-article .cta-button.hot   { background: var(--a-coral); }
.hospit-fitness-article .cta-button.hot:hover { background: #d06a5f; }
.hospit-fitness-article .cta-button.pink  { background: var(--a-pink); }
.hospit-fitness-article .cta-button.pink:hover { background: #c96a98; }
.hospit-fitness-article .cta-button.green { background: var(--a-green); }
.hospit-fitness-article .cta-button.green:hover { background: #4c9a6b; }
.hospit-fitness-article .cta-button.blue  { background: var(--a-blue); }
.hospit-fitness-article .cta-button.blue:hover { background: #4a7fc0; }
.hospit-fitness-article .cta-button.gray  { background: #5c6b66; }
.hospit-fitness-article .cta-button.gray:hover { background: #4c5b56; }

/* ---- responsive ------------------------------------------------------ */
@media (max-width: 768px) {
  .hospit-fitness-article { font-size: 15px; }
  .hospit-fitness-article .cta-grid,
  .hospit-fitness-article .area-grid,
  .hospit-fitness-article .point-grid,
  .hospit-fitness-article .related-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   AUTHORITATIVE OVERRIDES  (loads last; scoped to the article body .content)
   Fixes ordered-list numbering, badge contrast, and dark-CTA text color
   across every article type (riahs / studio / fitness / pillar …).
   ========================================================================= */

/* ---- Ordered lists: sequential numbers, no overlap ------------------- */
.hospitx .content ol {
  list-style: decimal outside !important;
  padding-left: 1.8em !important;
  margin: 0 0 1.4em;
}
.hospitx .content ol > li {
  list-style: decimal outside !important;
  margin: 0.45em 0;
  padding-left: 0.25em;
}
.hospitx .content ol ol { list-style: lower-roman outside !important; margin: 0.35em 0 0.6em; }

/* Native TOC wrappers keep decimal + breathing room */
.hospitx .content .toc ol,
.hospitx .content .toc-box ol,
.hospitx .content .studio-toc ol {
  list-style: decimal outside !important;
  padding-left: 1.7em !important;
}
.hospitx .content .toc ol li,
.hospitx .content .toc-box ol li,
.hospitx .content .studio-toc ol li { padding-left: 0.25em; margin: 0.35em 0; }

/* Custom-counter / bullet lists must NOT get a native decimal marker */
.hospitx .content ol.step-list,
.hospitx .content .step-list,
.hospitx .content ol.studio-review-list,
.hospitx .content .studio-review-list {
  list-style: none !important;
  padding-left: 0 !important;
}
.hospitx .content .step-list > li {
  list-style: none !important;
  padding-left: 4.2em;
}

/* Authoritative STEP badge (single ::before — sequential, non-overlapping) */
.hospitx .content .step-list { counter-reset: step; }
.hospitx .content .step-list > li { position: relative; }
.hospitx .content .step-list > li::before {
  counter-increment: step;
  content: "STEP " counter(step);
  position: absolute;
  left: 0.9em;
  top: 0.95em;
  display: inline-flex;
  align-items: center;
  background: var(--a-teal, #3f9b98);
  color: #fff;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 10px;
  padding: 0.3em 0.6em;
  white-space: nowrap;
}

/* ---- Badges: white background so they don't blend into tinted cards -- */
.hospitx .content .badge {
  background: #fff !important;
  color: #33807d !important;          /* readable default (was sometimes white-on-white) */
  border: 1px solid rgba(20, 49, 47, 0.14);
  box-shadow: 0 1px 2px rgba(20, 49, 47, 0.05);
}
/* keep the accent colour readable on white for coded variants */
.hospitx .content .badge.hot,
.hospit-fitness-article .badge.hot   { color: #c85f54 !important; }
.hospitx .content .badge.pink,
.hospit-fitness-article .badge.pink  { color: #b85b8c !important; }
.hospitx .content .badge.green,
.hospit-fitness-article .badge.green { color: #3f8b5f !important; }
.hospitx .content .badge.gray,
.hospit-fitness-article .badge.gray  { color: #5c6b66 !important; }

/* ---- Dark CTA boxes: force white text (was inheriting dark body p) --- */
.hospitx-body .cta-box,
.hospitx-body .cta-box p,
.hospitx-body .cta-box h2,
.hospitx-body .cta-box h3,
.hospitx-body .cta-box strong,
.hospitx-body .cta-box a:not(.cta-button):not(.studio-btn),
.hospitx .content .cta-box,
.hospitx .content .cta-box p,
.hospitx .content .cta-box h2,
.hospitx .content .cta-box h3,
.hospitx .content .cta-box strong {
  color: #fff !important;
}
/* CTA button inside dark box keeps its own (light) styling */
.hospitx .content .cta-box .cta-button { color: #16403d !important; background: #fff !important; }