/*
 * ningen-dokku.net PHP 版スタイルシート
 * Next.js 版 (Tailwind) のクラス名・見た目を再現する軽量 CSS
 * ユーティリティクラス (Tailwind 相当) + コンポーネントクラス
 */

/* ---------- ベース ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: #f9fafb; /* gray-50 */
  color: #1f2937; /* gray-800 */
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
ul, ol { list-style: none; }

/* ---------- レイアウト ---------- */
.header-inner {
  max-width: 64rem; margin: 0 auto;
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.75rem 1rem;
}
@media (min-width: 640px) {
  .header-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.container { max-width: 64rem; margin: 0 auto; width: 100%; flex: 1; padding: 1.5rem 1rem; }
.site-footer { margin-top: 2rem; border-top: 1px solid #e5e7eb; background: #fff; }
.footer-inner { max-width: 64rem; margin: 0 auto; padding: 1.5rem 1rem; font-size: 0.875rem; color: #6b7280; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-link:hover { color: #0f766e; }
.footer-copy { margin-top: 1rem; }

/* ---------- ヘッダ ---------- */
.site-logo { font-size: 1.125rem; font-weight: 700; color: #0f766e; } /* teal-700 */
.site-logo-img { height: 2.5rem; width: auto; display: block; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.875rem; }
.nav-link { color: #4b5563; }
.nav-link:hover { color: #0f766e; }

/* ---------- ユーティリティ ---------- */
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-10 > * + * { margin-top: 2.5rem; }
.page-title { font-size: 1.5rem; font-weight: 700; }
.section-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; }
.box-title { font-weight: 600; margin-bottom: 0.75rem; }
.article-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
.text-lead { font-size: 0.875rem; color: #4b5563; }
.text-subtle { color: #6b7280; font-size: 0.875rem; }
.text-link { color: #0f766e; }
.text-link:hover { text-decoration: underline; }
.more-right { margin-top: 0.75rem; text-align: right; }
.more-link { font-size: 0.875rem; color: #0f766e; }
.more-link:hover { text-decoration: underline; }
.mt-1 { margin-top: 0.25rem; }

/* ---------- ヒーロー ---------- */
.hero {
  border-radius: 0.75rem;
  background: linear-gradient(to bottom right, #0d9488, #14b8a6); /* teal-600 → teal-500 */
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: #fff;
}
.hero-title { font-size: 1.875rem; font-weight: 700; }
@media (min-width: 640px) { .hero-title { font-size: 1.5rem; } .hero { font-size: 1.5rem; } }
.hero-lead { margin-top: 0.5rem; font-size: 0.875rem; color: #f0fdfa; }
.hero-search { margin: 1.25rem auto 0; display: flex; gap: 0.5rem; max-width: 36rem; }
.hero-search-input {
  width: 100%; border: 0; border-radius: 0.375rem;
  padding: 0.625rem 1rem; color: #1f2937; font-size: 1rem;
}
.hero-search-button {
  border: 0; border-radius: 0.375rem; cursor: pointer;
  background: #115e59; /* teal-800 */
  color: #fff; font-weight: 600; padding: 0.625rem 1.25rem;
}
.hero-search-button:hover { background: #134e4a; /* teal-900 */ }

/* ---------- 検索フォーム ---------- */
.search-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.search-input {
  flex: 1 1 14rem; border: 1px solid #d1d5db; border-radius: 0.375rem;
  padding: 0.5rem 0.75rem; font-size: 0.95rem;
}
.search-select {
  border: 1px solid #d1d5db; border-radius: 0.375rem;
  padding: 0.5rem 0.5rem; background: #fff; font-size: 0.95rem;
}
.search-button {
  border: 0; border-radius: 0.375rem; cursor: pointer;
  background: #0f766e; color: #fff; font-weight: 600; padding: 0.5rem 1.25rem;
}
.search-button:hover { background: #115e59; }

/* ---------- カードグリッド ---------- */
.card-grid { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 施設カード ---------- */
.facility-card {
  border: 1px solid #e5e7eb; border-radius: 0.5rem;
  background: #fff; padding: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.facility-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.facility-card-title { font-weight: 600; }
.facility-card-link { color: #115e59; }
.facility-card-link:hover { text-decoration: underline; }
.facility-rank {
  margin-right: 0.5rem; display: inline-block; width: 1.5rem;
  text-align: center; color: #d97706; /* amber-600 */
}
.facility-card-rating { margin-top: 0.25rem; }
.facility-card-address {
  margin-top: 0.25rem; font-size: 0.875rem; color: #4b5563;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.facility-card-area {
  margin-top: 0.25rem; display: inline-block;
  font-size: 0.75rem; color: #6b7280;
}
.facility-card-area:hover { color: #0f766e; }
.badge {
  flex-shrink: 0; border-radius: 0.25rem; background: #f0fdfa; /* teal-50 */
  padding: 0.125rem 0.5rem; font-size: 0.75rem; color: #0f766e;
  white-space: nowrap;
}

/* ---------- 星評価 ---------- */
.rating-stars { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; }
.stars-amber { color: #f59e0b; } /* amber-500 */
.stars-dim { color: #d1d5db; }
.stars-text { color: #4b5563; }

/* ---------- 口コミ ---------- */
.review-list > li + li { margin-top: 0.75rem; }
.review-item {
  border: 1px solid #e5e7eb; border-radius: 0.5rem;
  background: #fff; padding: 1rem;
}
.review-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.review-rating { color: #f59e0b; font-size: 0.875rem; }
.review-date { font-size: 0.75rem; color: #9ca3af; }
.review-title { margin-top: 0.25rem; font-weight: 600; }
.review-body {
  margin-top: 0.25rem; font-size: 0.875rem; color: #4b5563;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.review-facility-link {
  margin-top: 0.5rem; display: inline-block;
  font-size: 0.75rem; color: #0f766e;
}
.review-facility-link:hover { text-decoration: underline; }

/* ---------- パンくず ---------- */
.breadcrumb { margin-bottom: 1rem; font-size: 0.875rem; color: #6b7280; }
.breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.breadcrumb-item { display: flex; align-items: center; gap: 0.25rem; }
.breadcrumb-link:hover { color: #0f766e; }
.breadcrumb-current { color: #374151; }

/* ---------- 地域グリッド ---------- */
.region-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
}
@media (min-width: 640px) { .region-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 768px) { .region-grid { grid-template-columns: repeat(6, 1fr); } }
.region-cell {
  border: 1px solid #e5e7eb; border-radius: 0.25rem; background: #fff;
  padding: 0.375rem 0.5rem; text-align: center; font-size: 0.875rem;
}
.region-cell:hover { border-color: #14b8a6; color: #0f766e; }
.region-count { margin-left: 0.25rem; font-size: 0.75rem; color: #9ca3af; }

/* ---------- カテゴリカード ---------- */
.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .category-grid { grid-template-columns: repeat(4, 1fr); } }
.category-card {
  border: 1px solid #e5e7eb; border-radius: 0.5rem; background: #fff;
  padding: 1rem; text-align: center; display: block;
}
.category-card:hover { border-color: #14b8a6; }
.category-label { display: block; font-weight: 600; color: #115e59; }
.category-count { font-size: 0.75rem; color: #6b7280; }

/* ---------- ボックス / 情報 ---------- */
.box { border: 1px solid #e5e7eb; border-radius: 0.5rem; background: #fff; padding: 1rem; }
.box-wide { border: 1px solid #e5e7eb; border-radius: 0.5rem; background: #fff; padding: 1.5rem; font-size: 0.875rem; line-height: 1.7; }
.box-text { font-size: 0.875rem; color: #374151; white-space: pre-line; }
.title-meta { margin-top: 0.25rem; display: flex; align-items: center; gap: 0.75rem; }
.info-list > .info-row { display: grid; grid-template-columns: 6rem 1fr; gap: 0.5rem; padding: 0.5rem 0; }
.info-list > .info-row + .info-row { border-top: 1px solid #f3f4f6; }
.info-term { font-weight: 500; color: #6b7280; font-size: 0.875rem; }
.info-desc { font-size: 0.875rem; white-space: pre-line; }
.maps-link { margin-top: 0.75rem; display: inline-block; font-size: 0.875rem; color: #0f766e; }
.maps-link:hover { text-decoration: underline; }

/* ---------- タブ (ランキング) ---------- */
.tab-nav { display: flex; gap: 0.5rem; }
.tab {
  border-radius: 9999px; padding: 0.375rem 1rem; font-size: 0.875rem;
  border: 1px solid #e5e7eb; background: #fff;
}
.tab:hover { border-color: #14b8a6; }
.tab-active { background: #0f766e; color: #fff; border-color: #0f766e; }

/* ---------- チップ (市区町村リンク) ---------- */
.chip-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  border: 1px solid #e5e7eb; border-radius: 0.25rem; background: #fff;
  padding: 0.25rem 0.5rem; font-size: 0.875rem;
}
.chip:hover { border-color: #14b8a6; color: #0f766e; }

/* ---------- ページネーション ---------- */
.pagination { display: flex; justify-content: center; gap: 0.5rem; padding-top: 1rem; }
.pagination-link {
  border: 1px solid #e5e7eb; border-radius: 0.25rem; background: #fff;
  padding: 0.25rem 0.75rem; font-size: 0.875rem;
}
.pagination-current { padding: 0.25rem 0.75rem; font-size: 0.875rem; color: #4b5563; }

/* ---------- リスト ---------- */
.numbered-list { list-style: decimal inside; }
.numbered-list > li { margin-bottom: 0.25rem; }
.numbered-list > li + li { margin-top: 0.25rem; }
.bulleted-list { list-style: disc inside; }
.bulleted-list > li { margin-bottom: 0.25rem; }
.list-note { margin-left: 0.5rem; font-size: 0.75rem; color: #6b7280; }

/* ---------- ボタン ---------- */
.button-primary {
  display: inline-block; border-radius: 0.375rem;
  background: #0f766e; color: #fff; padding: 0.5rem 1rem;
}
.button-primary:hover { background: #115e59; }

/* ---------- pages テーブル旧 HTML の最低限整形 ---------- */
.page-body dl { margin: 1rem 0; }
.page-body dt { font-weight: 600; margin-top: 0.75rem; }
.page-body dd { margin-left: 1rem; }
.page-body p { margin-bottom: 0.75rem; }
.page-body h2, .page-body h3 { font-weight: 600; margin: 1rem 0 0.5rem; }
.page-body ul { list-style: disc inside; margin-bottom: 0.75rem; }
.page-body ol { list-style: decimal inside; margin-bottom: 0.75rem; }
.page-body table { border-collapse: collapse; width: 100%; margin-bottom: 0.75rem; }
.page-body th, .page-body td { border: 1px solid #e5e7eb; padding: 0.375rem 0.5rem; font-size: 0.8125rem; }

/* ---------- 医院詳細 写真・HP・予約・検査種別 ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; }
.photo-cell { display: block; border-radius: 0.5rem; overflow: hidden; border: 1px solid #e5e7eb; }
.photo-img { width: 100%; height: 140px; object-fit: cover; display: block; }
.hp-link { color: #0f766e; text-decoration: underline; word-break: break-all; }
.hp-link:hover { color: #115e59; }
.reserve-btn {
  display: inline-block; background: #0f766e; color: #fff; font-weight: 700;
  padding: 0.625rem 1.5rem; border-radius: 0.5rem; text-decoration: none;
  transition: background 0.15s;
}
.reserve-btn:hover { background: #115e59; }
.exam-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.exam-badge {
  background: #ecfdf5; color: #0f766e; border: 1px solid #99f6e4;
  padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600;
}

/* ---------- 口コミ投稿フォーム ---------- */
.review-write { margin-top: 1rem; }
.review-form { display: flex; flex-direction: column; gap: 1rem; }
.form-field { display: flex; flex-direction: column; gap: 0.375rem; }
.form-label { font-weight: 600; color: #374151; }
.form-input, .form-textarea {
  border: 1px solid #d1d5db; border-radius: 0.5rem; padding: 0.5rem 0.75rem;
  font-size: 0.9375rem; width: 100%; box-sizing: border-box;
}
.form-input:focus, .form-textarea:focus { outline: 2px solid #14b8a6; outline-offset: 1px; border-color: #14b8a6; }
.rating-select { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 0.5rem; }
.rating-option { cursor: pointer; }
.rating-option input { margin-right: 0.25rem; }
.form-actions { display: flex; gap: 0.75rem; align-items: center; }
.button-secondary {
  display: inline-block; border: 1px solid #d1d5db; background: #fff; color: #374151;
  padding: 0.5rem 1.25rem; border-radius: 0.5rem; text-decoration: none; font-weight: 600;
}
.button-secondary:hover { background: #f9fafb; }
.alert-error {
  background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
  padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1rem;
}

/* ---------- 地方別タブ（全国マップの代替） ---------- */
.region-tabs { margin-bottom: 1rem; }
.region-tabs-nav { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.75rem; }
.region-tab {
  border: 1px solid #e5e7eb; border-radius: 9999px; background: #fff;
  padding: 0.375rem 0.875rem; font-size: 0.875rem; color: #4b5563; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.region-tab:hover { border-color: #14b8a6; color: #0f766e; }
.region-tab.is-active { background: #0f766e; border-color: #0f766e; color: #fff; }
.region-tab-panel { display: none; }
.region-tab-panel.is-active { display: block; }

/* ---------- その他 ---------- */
.space-y-4 > article > section + section,
.space-y-6 > section + section { margin-top: 0; } /* 親の space-y に任せる */
.about-sections section + section { margin-top: 1rem; }

/* ---------- 特集カード ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.feature-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.25rem;
  background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 100%);
  text-decoration: none; transition: box-shadow 0.15s, transform 0.15s;
}
.feature-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }
.feature-label {
  align-self: flex-start; background: #0f766e; color: #fff;
  font-size: 0.75rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 9999px;
}
.feature-title { font-size: 1.125rem; font-weight: 700; color: #0f172a; line-height: 1.4; }
.feature-more { font-size: 0.875rem; color: #0f766e; font-weight: 600; }

/* ---------- おすすめ医院（PickUp） ---------- */
.pickup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.pickup-card {
  display: flex; gap: 0.875rem; align-items: flex-start;
  border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 0.875rem;
  background: #fff; text-decoration: none; transition: box-shadow 0.15s, transform 0.15s;
}
.pickup-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }
.pickup-img { width: 120px; height: 90px; object-fit: cover; border-radius: 0.5rem; flex-shrink: 0; }
.pickup-body { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.pickup-name { font-size: 0.9375rem; font-weight: 700; color: #0f172a; line-height: 1.3; }
.pickup-area { font-size: 0.8125rem; font-weight: 500; color: #6b7280; }
.pickup-text { font-size: 0.8125rem; color: #4b5563; line-height: 1.5; }