/* ================================================================
   ClinicSelect — GoogleMAPの口コミを整理するサービス
   白・スカイブルーテーマ / シンプル・情報整理型
   ================================================================ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans',
    'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', sans-serif;
  background: #f8fafc;
  color: #0f172a;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ================================================================
   UTILITY
   ================================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* ================================================================
   REVEAL ANIMATION
   ================================================================ */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ================================================================
   TOP PAGE — HERO
   ================================================================ */
.cs-hero {
  background: linear-gradient(160deg, #f0f9ff 0%, #e0f2fe 40%, #f8fafc 100%);
  padding: 80px 20px 70px;
  text-align: center;
}
.cs-hero-inner { max-width: 720px; margin: 0 auto; }

.cs-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(14,165,233,.1); border: 1px solid rgba(14,165,233,.2);
  border-radius: 20px; padding: 6px 16px;
  font-size: 13px; font-weight: 600; color: #0ea5e9;
  margin-bottom: 32px;
}
.cs-badge-dot {
  width: 6px; height: 6px; background: #0ea5e9; border-radius: 50%;
  animation: csPulse 2s infinite;
}
@keyframes csPulse {
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.5; transform:scale(1.3); }
}

.cs-hero-title {
  font-size: clamp(26px, 5vw, 44px);
  font-weight: 900; line-height: 1.3;
  color: #0f172a; margin: 0 0 20px; letter-spacing: -.5px;
}
.cs-hero-sub {
  font-size: 16px; line-height: 1.8; color: #475569;
  margin: 0 0 36px;
}
.sp-only { display: none; }
@media (max-width: 480px) { .sp-only { display: block; } }

/* ── 検索ボックス ── */
.cs-search-box {
  background: white;
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,.1), 0 2px 8px rgba(14,165,233,.1);
  padding: 24px;
  text-align: left;
  margin-bottom: 32px;
}
.cs-search-form { margin-bottom: 14px; }
.cs-search-input-wrap {
  display: flex; align-items: center; gap: 8px;
  background: #f8fafc; border: 2px solid #e2e8f0;
  border-radius: 14px; padding: 12px 16px;
  transition: border-color .2s;
}
.cs-search-input-wrap:focus-within {
  border-color: #0ea5e9; background: white;
}
.cs-search-icon { font-size: 18px; flex-shrink: 0; }
.cs-search-input {
  flex: 1; border: none; background: none; outline: none;
  font-size: 16px; color: #0f172a;
}
.cs-search-input::placeholder { color: #94a3b8; }
.cs-search-btn {
  background: #0ea5e9; color: white; border: none;
  padding: 10px 22px; border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  white-space: nowrap; transition: background .18s;
}
.cs-search-btn:hover { background: #0284c7; }
.cs-search-examples {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cs-example-label { font-size: 12px; color: #94a3b8; font-weight: 600; white-space: nowrap; }
.cs-example-tag {
  font-size: 12px; font-weight: 600; color: #475569;
  background: #f1f5f9; border-radius: 8px; padding: 4px 10px;
  text-decoration: none; transition: all .15s;
}
.cs-example-tag:hover { background: #e0f2fe; color: #0ea5e9; }

/* ── 補足テキスト ── */
.cs-hero-note {
  font-size: 13px; color: #94a3b8; line-height: 1.7;
  background: white; border: 1px solid #e2e8f0;
  border-radius: 12px; padding: 14px 20px;
  max-width: 600px; margin: 0 auto;
}

/* ================================================================
   TOP PAGE — FEATURES（3点説明）
   ================================================================ */
.cs-features { padding: 60px 20px; background: white; }
.cs-features-inner {
  max-width: 960px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.cs-feature-card {
  text-align: center; padding: 32px 20px;
  border: 1px solid #e2e8f0; border-radius: 16px;
  transition: box-shadow .2s;
}
.cs-feature-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.08); }
.cs-feature-icon { font-size: 36px; margin-bottom: 16px; }
.cs-feature-title {
  font-size: 17px; font-weight: 800; color: #0f172a; margin: 0 0 12px;
}
.cs-feature-desc { font-size: 13px; line-height: 1.7; color: #64748b; margin: 0; }

/* ================================================================
   TOP PAGE — ROLE SECTION（ClinicSelect vs GoogleMAP）
   ================================================================ */
.cs-role-section { padding: 60px 20px; background: #f8fafc; }
.cs-role-inner {
  max-width: 860px; margin: 0 auto;
  display: flex; align-items: stretch; gap: 20px;
}
.cs-role-card {
  flex: 1; background: white; border-radius: 16px; padding: 28px 24px;
  border: 1px solid #e2e8f0;
}
.cs-role-card h3 {
  font-size: 16px; font-weight: 800; color: #0f172a; margin: 12px 0 16px;
}
.cs-role-card ul { list-style: none; margin: 0; padding: 0; }
.cs-role-card ul li {
  font-size: 13px; font-weight: 600; color: #475569; padding: 4px 0;
}
.cs-role-badge {
  display: inline-block; font-size: 11px; font-weight: 800;
  letter-spacing: 1px; padding: 4px 12px; border-radius: 8px;
}
.cs-badge-blue { background: #e0f2fe; color: #0284c7; }
.cs-badge-green { background: #dcfce7; color: #16a34a; }
.cs-role-divider {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; min-width: 100px; text-align: center;
}
.cs-role-arrow-icon { font-size: 28px; color: #94a3b8; }
.cs-role-divider p { font-size: 11px; color: #94a3b8; font-weight: 600; line-height: 1.5; }

/* ================================================================
   TOP PAGE — AREA SECTION
   ================================================================ */
.cs-area-section { padding: 60px 20px; background: white; }
.cs-area-inner { max-width: 960px; margin: 0 auto; }
.cs-section-title {
  font-size: 22px; font-weight: 800; color: #0f172a; margin: 0 0 28px;
  text-align: center;
}
.cs-area-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.cs-area-card {
  text-align: center; padding: 28px 12px;
  border: 1px solid #e2e8f0; border-radius: 14px;
  text-decoration: none; transition: all .2s; background: white;
}
.cs-area-card:hover {
  border-color: #0ea5e9; background: #f0f9ff;
  transform: translateY(-3px); box-shadow: 0 8px 24px rgba(14,165,233,.1);
}
.cs-area-emoji { font-size: 28px; margin-bottom: 10px; }
.cs-area-name { font-size: 16px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
.cs-area-count { font-size: 12px; color: #94a3b8; font-weight: 600; }

/* ================================================================
   TOP PAGE — PICKUP SECTION
   ================================================================ */
.cs-pickup-section { padding: 60px 20px; background: #f8fafc; }
.cs-pickup-inner { max-width: 960px; margin: 0 auto; }
.cs-pickup-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.cs-pickup-header .cs-section-title { margin: 0; text-align: left; }
.cs-see-all {
  font-size: 14px; font-weight: 700; color: #0ea5e9; text-decoration: none;
}
.cs-see-all:hover { color: #0284c7; }
.cs-pickup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cs-pickup-card {
  background: white; border-radius: 14px; padding: 20px;
  border: 1px solid #e2e8f0; text-decoration: none;
  transition: box-shadow .2s; display: block;
}
.cs-pickup-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.08); }
.cs-pickup-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 12px; gap: 8px;
}
.cs-pickup-name { font-size: 14px; font-weight: 800; color: #0f172a; margin-bottom: 2px; }
.cs-pickup-area { font-size: 12px; color: #94a3b8; font-weight: 600; }
.cs-pickup-premium-badge {
  background: #fef3c7; color: #d97706; font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 6px; white-space: nowrap; flex-shrink: 0;
}
.cs-pickup-rating { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; }
.cs-star { color: #f59e0b; font-size: 14px; }
.cs-rating-num { font-size: 15px; font-weight: 800; color: #0f172a; }
.cs-review-cnt { font-size: 12px; color: #94a3b8; }
.cs-pickup-good {
  font-size: 12px; color: #16a34a; font-weight: 600;
  background: #f0fdf4; border-radius: 8px; padding: 8px 10px;
}
.cs-pickup-good::before { content: '◎ '; }

/* ================================================================
   SEARCH / RESULTS PAGE
   ================================================================ */

/* ── Search Header（固定） ── */
.cs-search-header {
  background: white; border-bottom: 1px solid #e2e8f0;
  padding: 16px 20px 12px;
  position: sticky; top: 60px; z-index: 100;
}
.cs-search-header-inner { max-width: 900px; margin: 0 auto; }
.cs-sh-form { width: 100%; margin-bottom: 10px; }
.cs-sh-input-wrap {
  display: flex; align-items: center; gap: 8px;
  background: #f8fafc; border: 2px solid #e2e8f0;
  border-radius: 12px; padding: 10px 16px; transition: border-color .2s;
}
.cs-sh-input-wrap:focus-within { border-color: #0ea5e9; background: white; }
.cs-sh-input {
  flex: 1; border: none; background: none; outline: none;
  font-size: 15px; color: #0f172a;
}
.cs-sh-input::placeholder { color: #94a3b8; }
.cs-sh-btn {
  background: #0ea5e9; color: white; border: none;
  padding: 8px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.cs-sh-btn:hover { background: #0284c7; }
.cs-sh-examples {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cs-sh-ex-label { font-size: 11px; color: #94a3b8; font-weight: 600; white-space: nowrap; }
.cs-sh-ex-tag {
  font-size: 12px; font-weight: 600; color: #475569;
  background: #f1f5f9; border-radius: 8px; padding: 3px 10px;
  text-decoration: none; transition: all .15s;
}
.cs-sh-ex-tag:hover { background: #e0f2fe; color: #0ea5e9; }

/* ── Filter Bar ── */
.cs-filter-bar {
  background: #f8fafc; border-bottom: 1px solid #e2e8f0;
  padding: 10px 20px;
  position: sticky; top: 120px; z-index: 99;
}
.cs-filter-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  overflow-x: auto; scrollbar-width: none;
}
.cs-filter-inner::-webkit-scrollbar { display: none; }
.cs-filter-label { font-size: 12px; font-weight: 700; color: #64748b; white-space: nowrap; }
.cs-filter-chips { display: flex; gap: 8px; flex-wrap: nowrap; }
.cs-filter-chip {
  white-space: nowrap; padding: 6px 14px; border-radius: 20px;
  font-size: 12px; font-weight: 700; text-decoration: none;
  color: #475569; background: white; border: 1px solid #e2e8f0;
  transition: all .15s;
}
.cs-filter-chip:hover { border-color: #0ea5e9; color: #0ea5e9; }
.cs-filter-chip.active { background: #0ea5e9; color: white; border-color: #0ea5e9; }

/* ── Results Layout ── */
.cs-results-layout { max-width: 900px; margin: 0 auto; padding: 24px 20px; }
.cs-results-main { width: 100%; }
.cs-results-header { margin-bottom: 20px; }
.cs-results-title {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.cs-results-label { font-size: 16px; font-weight: 700; color: #0f172a; }
.cs-results-count {
  font-size: 14px; font-weight: 700; color: #0ea5e9;
  background: #e0f2fe; padding: 2px 10px; border-radius: 20px;
}
.cs-results-note { font-size: 11px; color: #94a3b8; margin: 0; }

/* ================================================================
   CLINIC CARD（検索結果・一覧共通）
   ================================================================ */
.cs-clinic-card {
  background: white; border: 1px solid #e2e8f0; border-radius: 16px;
  margin-bottom: 16px; overflow: hidden; transition: box-shadow .2s;
}
.cs-clinic-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.08); }

.cs-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 20px 20px 16px; gap: 16px;
  border-bottom: 1px solid #f1f5f9;
}
.cs-card-main-info { flex: 1; }
.cs-card-name-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap;
}
.cs-card-name { margin: 0; font-size: 18px; font-weight: 800; color: #0f172a; }
.cs-card-name-link { text-decoration: none; color: inherit; }
.cs-card-name-link:hover { color: #0ea5e9; }
.cs-premium-badge {
  background: #fef3c7; color: #d97706; font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 6px;
}
.cs-card-meta { display: flex; gap: 12px; font-size: 13px; color: #64748b; font-weight: 600; }
.cs-card-station { }
.cs-card-area { }

.cs-card-rating-block { text-align: right; flex-shrink: 0; }
.cs-card-stars { font-size: 13px; color: #f59e0b; letter-spacing: 1px; }
.cs-card-rating-num { font-size: 24px; font-weight: 900; color: #0f172a; line-height: 1; margin: 4px 0; }
.cs-card-review-cnt { font-size: 12px; color: #94a3b8; }
.cs-card-updated { font-size: 11px; color: #b0bec5; margin-top: 4px; }

/* ── Card Body: 良い点 / 留意点 / 口コミ特徴 ── */
.cs-card-body {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
}
.cs-card-section { padding: 16px 20px; }
.cs-card-good { border-right: 1px solid #f1f5f9; }
.cs-card-caution { border-right: 1px solid #f1f5f9; }
.cs-card-section-label {
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  margin-bottom: 10px; text-transform: uppercase;
}
.cs-label-good { color: #16a34a; }
.cs-label-caution { color: #d97706; }
.cs-label-char { color: #6366f1; }

.cs-point-list { list-style: none; margin: 0; padding: 0; }
.cs-point-list li {
  font-size: 12px; color: #374151; padding: 3px 0;
  display: flex; gap: 6px; line-height: 1.5;
}
.cs-point-mark { font-weight: 800; flex-shrink: 0; }
.cs-mark-good { color: #16a34a; }
.cs-mark-caution { color: #d97706; }

.cs-char-tags { display: flex; flex-direction: column; gap: 4px; }
.cs-char-tag { font-size: 12px; color: #475569; line-height: 1.5; }

/* ── Card Footer ── */
.cs-card-footer {
  display: flex; gap: 12px; padding: 16px 20px;
  border-top: 1px solid #f1f5f9; flex-wrap: wrap;
}
.cs-btn {
  display: inline-flex; align-items: center; padding: 10px 20px;
  border-radius: 10px; font-size: 13px; font-weight: 700;
  text-decoration: none; transition: all .18s; gap: 4px;
}
.cs-btn-primary { background: #0f172a; color: white; }
.cs-btn-primary:hover { background: #1e293b; }
.cs-btn-maps { background: white; color: #374151; border: 1.5px solid #e2e8f0; }
.cs-btn-maps:hover { border-color: #0ea5e9; color: #0ea5e9; }

/* ================================================================
   COMPARE TABLE（比較表）
   ================================================================ */
.cs-compare-section { margin-bottom: 32px; }
.cs-compare-title { font-size: 16px; font-weight: 800; color: #0f172a; margin: 0 0 16px; }
.cs-compare-scroll {
  overflow-x: auto; border-radius: 12px; border: 1px solid #e2e8f0;
}
.cs-compare-table {
  width: 100%; border-collapse: collapse; min-width: 700px;
  background: white; font-size: 13px;
}
.cs-compare-table thead { background: #f8fafc; }
.cs-compare-table th {
  padding: 12px 16px; text-align: left;
  font-size: 11px; font-weight: 800; color: #64748b;
  letter-spacing: 1px; border-bottom: 1px solid #e2e8f0;
}
.cs-compare-table td {
  padding: 14px 16px; border-bottom: 1px solid #f1f5f9; vertical-align: top;
}
.cs-compare-table tr:last-child td { border-bottom: none; }
.cs-compare-table tr:hover td { background: #f8fafc; }
.cs-compare-name { font-weight: 800; color: #0f172a; text-decoration: none; font-size: 13px; }
.cs-compare-name:hover { color: #0ea5e9; }
.cs-compare-area { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.cs-compare-rating { font-weight: 800; color: #f59e0b; }
.cs-compare-reviews { color: #64748b; }
.cs-compare-updated { color: #94a3b8; font-size: 11px; white-space: nowrap; }
.cs-compare-good { color: #16a34a; font-size: 12px; max-width: 200px; }
.cs-compare-caution { color: #d97706; font-size: 12px; max-width: 200px; }
.cs-compare-map-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 700;
  background: #f0f9ff; color: #0ea5e9;
  border: 1px solid #bae6fd; text-decoration: none;
  white-space: nowrap; transition: all .15s;
}
.cs-compare-map-btn:hover { background: #0ea5e9; color: white; }

/* ================================================================
   CLINIC DETAIL PAGE
   ================================================================ */

/* パンくず */
.cs-breadcrumb {
  background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 12px 20px;
}
.cs-breadcrumb-inner {
  max-width: 1140px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #64748b; flex-wrap: wrap;
}
.cs-breadcrumb-inner a { color: #0ea5e9; text-decoration: none; }
.cs-breadcrumb-inner a:hover { text-decoration: underline; }
.cs-bc-sep { color: #cbd5e1; }

/* レイアウト */
.cs-detail-layout {
  max-width: 1140px; margin: 0 auto; padding: 32px 20px;
  display: grid; grid-template-columns: 1fr 300px; gap: 32px;
}
.cs-detail-main { min-width: 0; }
.cs-detail-section { margin-bottom: 32px; }
.cs-detail-section-title {
  font-size: 20px; font-weight: 800; color: #0f172a; margin: 0 0 16px;
  padding-bottom: 12px; border-bottom: 2px solid #e2e8f0;
}
.cs-detail-card {
  background: white; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px;
}

/* 基本情報 */
.cs-detail-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.cs-detail-name-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.cs-detail-name { font-size: 26px; font-weight: 900; color: #0f172a; margin: 0; }
.cs-premium-badge-lg {
  background: #fef3c7; color: #d97706; font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 8px;
}
.cs-detail-location {
  display: flex; gap: 16px; font-size: 14px; color: #64748b; font-weight: 600; flex-wrap: wrap;
}
.cs-detail-rating-block { text-align: right; flex-shrink: 0; }
.cs-detail-stars { font-size: 18px; color: #f59e0b; }
.cs-detail-rating-num { font-size: 36px; font-weight: 900; color: #0f172a; line-height: 1.1; }
.cs-detail-review-cnt { font-size: 13px; color: #94a3b8; }

.cs-detail-info-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px;
}
.cs-detail-info-item { display: flex; align-items: flex-start; gap: 10px; }
.cs-info-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.cs-info-label { font-size: 11px; font-weight: 700; color: #94a3b8; letter-spacing: 1px; margin-bottom: 2px; }
.cs-info-value { font-size: 14px; font-weight: 700; color: #0f172a; }

/* GoogleMAP導線 */
.cs-maps-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cs-maps-btn {
  display: inline-flex; align-items: center; padding: 11px 20px;
  border-radius: 10px; font-size: 13px; font-weight: 700;
  text-decoration: none; transition: all .18s; gap: 6px;
}
.cs-maps-btn-primary { background: #0ea5e9; color: white; }
.cs-maps-btn-primary:hover { background: #0284c7; }
.cs-maps-btn-secondary { background: white; color: #374151; border: 1.5px solid #e2e8f0; }
.cs-maps-btn-secondary:hover { border-color: #0ea5e9; color: #0ea5e9; }
.cs-maps-note { font-size: 11px; color: #94a3b8; margin: 0; }

/* 良い点・留意点 */
.cs-points-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cs-points-heading {
  font-size: 15px; font-weight: 800; margin: 0 0 16px;
  display: flex; align-items: center; gap: 6px;
}
.cs-heading-good { color: #16a34a; }
.cs-heading-caution { color: #d97706; }
.cs-points-list { list-style: none; margin: 0; padding: 0; }
.cs-point-item {
  display: flex; gap: 8px; padding: 8px 0; font-size: 13px;
  border-bottom: 1px solid #f1f5f9; line-height: 1.5;
}
.cs-point-item:last-child { border-bottom: none; }
.cs-point-good { color: #374151; }
.cs-point-caution { color: #374151; }
.cs-point-mark-lg { font-size: 14px; font-weight: 900; flex-shrink: 0; margin-top: 1px; }

/* 医院側コメント */
.cs-clinic-comment {
  margin-top: 20px; background: #fffbeb;
  border: 1px solid #fde68a; border-radius: 12px; padding: 16px;
}
.cs-clinic-comment-header { margin-bottom: 10px; }
.cs-comment-badge {
  font-size: 12px; font-weight: 700; color: #d97706;
  background: #fef3c7; padding: 4px 10px; border-radius: 6px;
}
.cs-clinic-comment-text { font-size: 13px; line-height: 1.8; color: #374151; margin: 0; }

/* 口コミ傾向 */
.cs-trend-note { font-size: 12px; color: #94a3b8; margin: 0 0 20px; }
.cs-trend-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cs-trend-section { padding: 16px; background: #f8fafc; border-radius: 12px; }
.cs-trend-title { font-size: 14px; font-weight: 800; color: #0f172a; margin: 0 0 12px; }
.cs-trend-list { list-style: none; margin: 0; padding: 0; }
.cs-trend-good, .cs-trend-caution {
  display: flex; gap: 6px; padding: 4px 0; font-size: 12px; color: #374151; line-height: 1.5;
}
.cs-tm-good { color: #16a34a; font-weight: 800; flex-shrink: 0; }
.cs-tm-caution { color: #d97706; font-weight: 800; flex-shrink: 0; }
.cs-trend-caution-list { margin-top: 8px; }

/* 口コミ特徴リスト */
.cs-char-list { list-style: none; margin: 0; padding: 0; }
.cs-char-item {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 0; font-size: 13px; color: #374151;
  border-bottom: 1px solid #f1f5f9;
}
.cs-char-item:last-child { border-bottom: none; }
.cs-char-dot { color: #6366f1; font-size: 18px; line-height: 1; flex-shrink: 0; }

/* GoogleMAP詳細導線 */
.cs-maps-detail-top { margin-bottom: 20px; }
.cs-maps-detail-title { font-size: 17px; font-weight: 800; color: #0f172a; margin: 0 0 8px; }
.cs-maps-detail-desc { font-size: 13px; color: #64748b; line-height: 1.8; margin: 0; }
.cs-maps-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cs-maps-action-btn {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 16px 12px; border-radius: 12px; text-decoration: none;
  background: #f0f9ff; border: 1.5px solid #bae6fd; transition: all .2s;
}
.cs-maps-action-btn:hover { background: #0ea5e9; border-color: #0ea5e9; }
.cs-maps-action-btn:hover .cs-maps-action-text { color: white; }
.cs-maps-action-btn:hover .cs-maps-action-sub { color: rgba(255,255,255,.7); }
.cs-maps-action-icon { font-size: 24px; margin-bottom: 6px; }
.cs-maps-action-text { font-size: 13px; font-weight: 800; color: #0f172a; margin-bottom: 2px; }
.cs-maps-action-sub { font-size: 11px; color: #94a3b8; }

/* ── サイドバー ── */
.cs-detail-sidebar { }
.cs-sidebar-card {
  background: white; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 20px; margin-bottom: 20px;
}
.cs-sidebar-title { font-size: 14px; font-weight: 800; color: #0f172a; margin: 0 0 16px; }
.cs-sidebar-info { margin-bottom: 16px; }
.cs-sidebar-info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; font-size: 13px; border-bottom: 1px solid #f1f5f9;
}
.cs-sidebar-info-row:last-child { border-bottom: none; }
.cs-si-label { color: #64748b; font-weight: 600; }
.cs-si-value { font-weight: 700; color: #0f172a; }
.cs-sidebar-maps-btn {
  display: block; text-align: center; padding: 12px;
  background: #0ea5e9; color: white; border-radius: 10px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: background .18s;
}
.cs-sidebar-maps-btn:hover { background: #0284c7; }
.cs-sidebar-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-sidebar-tag {
  font-size: 12px; font-weight: 700; color: #374151;
  background: #f1f5f9; padding: 5px 10px; border-radius: 8px;
}
.cs-sidebar-nearby { margin-bottom: 12px; }
.cs-sidebar-nearby-item {
  display: block; padding: 10px 0; border-bottom: 1px solid #f1f5f9;
  text-decoration: none; transition: color .15s;
}
.cs-sidebar-nearby-item:last-child { border-bottom: none; }
.cs-sn-name { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 2px; }
.cs-sidebar-nearby-item:hover .cs-sn-name { color: #0ea5e9; }
.cs-sn-rating { font-size: 12px; color: #94a3b8; }
.cs-sidebar-see-all {
  display: block; font-size: 13px; font-weight: 700; color: #0ea5e9;
  text-decoration: none; text-align: center; padding: 8px;
}
.cs-sidebar-see-all:hover { color: #0284c7; }

/* ================================================================
   AREA PAGE
   ================================================================ */
.cs-area-page { max-width: 960px; margin: 0 auto; padding: 32px 20px; }
.cs-area-header { margin-bottom: 32px; }
.cs-area-title { font-size: 28px; font-weight: 900; color: #0f172a; margin: 0 0 8px; }
.cs-area-desc { font-size: 15px; color: #64748b; margin: 0; }

/* ================================================================
   CLINIC LIST PAGE
   ================================================================ */
.cs-list-layout { max-width: 1140px; margin: 0 auto; padding: 32px 20px; }
.cs-list-header { margin-bottom: 40px; text-align: center; }
.cs-list-title { font-size: 28px; font-weight: 900; color: #0f172a; margin: 0 0 8px; }
.cs-list-desc { font-size: 15px; color: #64748b; margin: 0; }
.cs-list-area-section { margin-bottom: 48px; }
.cs-list-area-title {
  font-size: 20px; font-weight: 800; color: #0f172a; margin: 0 0 20px;
  padding-bottom: 12px; border-bottom: 2px solid #e2e8f0;
}
.cs-list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cs-list-card {
  background: white; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 18px; text-decoration: none; display: block; transition: box-shadow .2s;
}
.cs-list-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.08); border-color: #0ea5e9; }
.cs-list-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 6px; gap: 8px;
}
.cs-list-card-name { font-size: 14px; font-weight: 800; color: #0f172a; }
.cs-list-premium {
  background: #fef3c7; color: #d97706; font-size: 9px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
}
.cs-list-card-meta { font-size: 12px; color: #94a3b8; margin-bottom: 8px; }
.cs-list-card-rating { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.cs-list-star { color: #f59e0b; font-size: 13px; }
.cs-list-rating { font-size: 15px; font-weight: 800; color: #0f172a; }
.cs-list-reviews { font-size: 11px; color: #94a3b8; }
.cs-list-card-good {
  font-size: 12px; color: #16a34a; background: #f0fdf4;
  border-radius: 6px; padding: 6px 8px; margin-bottom: 8px;
}
.cs-list-card-good::before { content: '◎ '; font-weight: 800; }
.cs-list-updated { font-size: 11px; color: #b0bec5; }

/* ================================================================
   NO RESULTS
   ================================================================ */
.cs-no-results { text-align: center; padding: 80px 20px; }
.cs-no-results-icon { font-size: 48px; margin-bottom: 20px; }
.cs-no-results h3 { font-size: 20px; font-weight: 800; color: #0f172a; margin: 0 0 12px; }
.cs-no-results p { font-size: 14px; color: #64748b; margin: 0 0 24px; }
.cs-no-results-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cs-area-link {
  padding: 10px 20px; border-radius: 10px; font-weight: 700;
  font-size: 14px; color: #0ea5e9;
  background: #f0f9ff; border: 1px solid #bae6fd; text-decoration: none;
}
.cs-area-link:hover { background: #0ea5e9; color: white; }

/* ================================================================
   RANKING PAGE
   ================================================================ */
.rk-tabs { display: flex; gap: 4px; padding: 10px 0; overflow-x: auto; scrollbar-width: none; }
.rk-tab {
  padding: 9px 18px; border-radius: 8px; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap;
  background: transparent; border: 1px solid #e2e8f0; color: #64748b; transition: all .18s;
}
.rk-tab.active { background: #0ea5e9; border-color: #0ea5e9; color: white; }
.rk-tab:hover:not(.active) { border-color: #0ea5e9; color: #0ea5e9; }
.rk-panel { }
.rk-panel.hidden { display: none; }
.rk-panel-header { margin-bottom: 20px; }
.rk-panel-title { font-size: 18px; font-weight: 800; color: #0f172a; margin: 0 0 8px; }
.rk-panel-desc { font-size: 13px; color: #64748b; margin: 0; line-height: 1.6; }
.rk-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: white; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 16px; margin-bottom: 10px; transition: box-shadow .2s;
}
.rk-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.rk-card-left { flex-shrink: 0; }
.rk-medal { font-size: 22px; min-width: 32px; text-align: center; line-height: 1; padding-top: 2px; }
.rk-card-body { flex: 1; min-width: 0; }
.rk-card-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.rk-name { font-size: 15px; font-weight: 800; color: #0f172a; }
.rk-area { font-size: 11px; color: #94a3b8; font-weight: 600; }
.rk-sub { font-size: 12px; color: #0ea5e9; font-weight: 700; margin-bottom: 10px; }
.rk-points { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.rk-good span {
  font-size: 12px; font-weight: 600; color: #16a34a;
  background: #f0fdf4; border-radius: 6px; padding: 3px 8px; display: inline-block;
}
.rk-caution span {
  font-size: 12px; font-weight: 600; color: #b45309;
  background: #fffbeb; border-radius: 6px; padding: 3px 8px; display: inline-block;
}
.rk-chars { display: flex; flex-wrap: wrap; gap: 4px; }
.rk-char-tag { font-size: 11px; color: #64748b; background: #f1f5f9; border-radius: 6px; padding: 2px 8px; }
.rk-card-right { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; }
.rk-btn-detail, .rk-btn-maps {
  display: block; text-align: center; padding: 7px 12px;
  border-radius: 8px; font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.rk-btn-detail { background: #0ea5e9; color: white; }
.rk-btn-detail:hover { background: #0284c7; }
.rk-btn-maps { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.rk-btn-maps:hover { background: #dcfce7; }
.ark-area-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ark-area-tab {
  padding: 8px 18px; border-radius: 99px; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  background: white; border: 1px solid #e2e8f0; color: #64748b; transition: all .2s;
}
.ark-area-tab.active { background: #0ea5e9; border-color: #0ea5e9; color: white; }
.ark-area-panel { }
.ark-area-panel.hidden { display: none; }
.ark-row {
  display: flex; align-items: center; gap: 12px;
  background: white; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 12px 16px; margin-bottom: 8px; cursor: pointer; transition: box-shadow .18s;
}
.ark-row:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }
.ark-medal { font-size: 20px; flex-shrink: 0; min-width: 28px; }
.ark-info { flex: 1; min-width: 0; }
.ark-name { font-size: 14px; font-weight: 800; color: #0f172a; margin-bottom: 4px; }
.ark-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: #94a3b8; font-weight: 600; margin-bottom: 4px; }
.ark-good { font-size: 12px; color: #16a34a; font-weight: 600; }
.ark-rating { font-size: 18px; font-weight: 900; color: #f59e0b; flex-shrink: 0; }

/* ================================================================
   BLOG PAGE
   ================================================================ */
.cs-blog-layout { max-width: 960px; margin: 0 auto; padding: 32px 20px; }
.cs-blog-header { margin-bottom: 40px; text-align: center; }
.cs-blog-title { font-size: 28px; font-weight: 900; color: #0f172a; margin: 0 0 8px; }
.cs-blog-desc { font-size: 15px; color: #64748b; }
.cs-blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.cs-blog-card {
  background: white; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 24px; text-decoration: none; display: block; transition: box-shadow .2s;
}
.cs-blog-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.cs-blog-card-cat {
  font-size: 11px; font-weight: 800; color: #0ea5e9;
  background: #e0f2fe; padding: 3px 8px; border-radius: 6px;
  display: inline-block; margin-bottom: 12px;
}
.cs-blog-card-title { font-size: 16px; font-weight: 800; color: #0f172a; margin: 0 0 12px; line-height: 1.4; }
.cs-blog-card-desc { font-size: 13px; color: #64748b; line-height: 1.7; margin: 0 0 16px; }
.cs-blog-card-meta { font-size: 11px; color: #94a3b8; }

/* ================================================================
   FOR-CLINIC PAGE
   ================================================================ */
.cs-for-clinic-layout { max-width: 860px; margin: 0 auto; padding: 32px 20px; }
.cs-for-clinic-header { margin-bottom: 40px; text-align: center; }
.cs-for-clinic-title { font-size: 28px; font-weight: 900; color: #0f172a; margin: 0 0 12px; line-height: 1.4; }
.cs-for-clinic-sub { font-size: 16px; color: #64748b; line-height: 1.7; }
.cs-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 40px 0; }
.cs-plan-card {
  background: white; border: 2px solid #e2e8f0; border-radius: 16px; padding: 28px 24px;
}
.cs-plan-card.cs-plan-featured { border-color: #0ea5e9; }
.cs-plan-name { font-size: 20px; font-weight: 800; color: #0f172a; margin: 0 0 6px; }
.cs-plan-price { font-size: 28px; font-weight: 900; color: #0ea5e9; margin: 0 0 20px; }
.cs-plan-features { list-style: none; margin: 0; padding: 0; }
.cs-plan-features li {
  font-size: 13px; color: #374151; padding: 6px 0;
  border-bottom: 1px solid #f1f5f9; display: flex; gap: 8px;
}
.cs-plan-features li:last-child { border-bottom: none; }

/* ================================================================
   COMMON SECTIONS
   ================================================================ */
/* GoogleMAP CTAバナー */
.cs-maps-cta {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 1px solid #bbf7d0; border-radius: 16px;
  padding: 28px 24px; margin: 32px 0; text-align: center;
}
.cs-maps-cta-title { font-size: 18px; font-weight: 800; color: #0f172a; margin: 0 0 8px; }
.cs-maps-cta-desc { font-size: 14px; color: #475569; margin: 0 0 20px; line-height: 1.7; }
.cs-maps-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #16a34a; color: white; padding: 12px 24px;
  border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background .18s;
}
.cs-maps-cta-btn:hover { background: #15803d; }

/* 留意点バナー */
.cs-caution-banner {
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 14px; padding: 20px 24px; margin: 24px 0;
  display: flex; gap: 14px; align-items: flex-start;
}
.cs-caution-banner-icon { font-size: 24px; flex-shrink: 0; }
.cs-caution-banner-title { font-size: 15px; font-weight: 800; color: #0f172a; margin: 0 0 6px; }
.cs-caution-banner-text { font-size: 13px; color: #64748b; line-height: 1.75; margin: 0; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 960px) {
  .cs-detail-layout { grid-template-columns: 1fr; }
  .cs-detail-sidebar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .cs-features-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  /* Card */
  .cs-card-body { grid-template-columns: 1fr; }
  .cs-card-good, .cs-card-caution { border-right: none; border-bottom: 1px solid #f1f5f9; }
  .cs-card-header { flex-direction: column; }
  .cs-card-rating-block { text-align: left; display: flex; align-items: center; gap: 12px; }
  .cs-card-rating-num { font-size: 18px; }

  /* Detail */
  .cs-points-grid { grid-template-columns: 1fr; }
  .cs-trend-grid { grid-template-columns: 1fr; }
  .cs-maps-actions { grid-template-columns: 1fr; }
  .cs-detail-info-grid { grid-template-columns: 1fr; }
  .cs-detail-header { flex-direction: column; }
  .cs-detail-rating-block { text-align: left; display: flex; align-items: center; gap: 12px; }
  .cs-detail-rating-num { font-size: 28px; }

  /* TOP */
  .cs-features-inner { grid-template-columns: 1fr; }
  .cs-area-grid { grid-template-columns: repeat(3, 1fr); }
  .cs-role-inner { flex-direction: column; }
  .cs-role-divider { flex-direction: row; min-width: auto; }
  .cs-pickup-grid { grid-template-columns: 1fr; }

  /* List */
  .cs-list-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-blog-grid { grid-template-columns: 1fr; }
  .cs-plan-grid { grid-template-columns: 1fr; }

  /* Ranking */
  .rk-card { flex-wrap: wrap; }
  .rk-card-right { flex-direction: row; width: 100%; }
  .rk-btn-detail, .rk-btn-maps { flex: 1; }

  /* Filter */
  .cs-filter-bar { top: 120px; }
}

@media (max-width: 640px) {
  .cs-detail-sidebar { grid-template-columns: 1fr; }
  .cs-pickup-header { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 480px) {
  .cs-area-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-card-footer { flex-direction: column; }
  .cs-btn { width: 100%; justify-content: center; }
  .cs-list-grid { grid-template-columns: 1fr; }
}