@charset "UTF-8";
/* Extracted from docs/doctor-page-v6.html */
/* =====================================================
   美容医療相談室 ドクターページ v5
   デザイン方針:
   - ベース: 白 #FFFFFF / 薄グレー #F7F7F7
   - テキスト: #222222 / サブ #555555 / ミュート #888888
   - ブランドカラー: #00BBBD → ボタン・リンク・タグ・左ボーダーのみ
   - カード: 枠線 #E8E8E8 / 影なし or 最小限
   - 情報密度: 高め、余白は一定
===================================================== */
a {
  color: #00bbbd;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ===== STICKY NAV ===== */
.snav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 2px solid #00bbbd;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.snav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  gap: 16px;
}

.snav-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.snav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ddd;
  flex-shrink: 0;
  border: 2px solid #00bbbd;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #999;
}

.snav-name {
  font-size: 14px;
  font-weight: 700;
  color: #222;
  white-space: nowrap;
}

.snav-clinic {
  font-size: 11px;
  color: #888;
}

.snav-btns {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  line-height: 1;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.btn:hover {
  opacity: 0.85;
}

.btn-teal {
  background: #00bbbd;
  color: #fff;
}

.btn-line {
  background: #06c755;
  color: #fff;
}

.btn-mail {
  background: #00bbbd;
  color: #fff;
}

.btn-tel {
  background: #4a6fa5;
  color: #fff;
}

.btn-ghost {
  background: #fff;
  color: #00bbbd;
  border: 1.5px solid #00bbbd;
}

/* ===== LAYOUT ===== */
.wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 0 60px;
}

.main {
  min-width: 0;
}

/* ===== CARD ===== */
.card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  margin-bottom: 16px;
  overflow: hidden;
}

.card-pad {
  padding: 24px;
}

/* セクション見出し */
.sec-head {
  /* font-family: "Noto Serif JP", serif; */
  font-size: 16px;
  font-weight: 700;
  color: #222;
  padding-left: 12px;
  border-left: 3px solid #00bbbd;
  margin-bottom: 18px;
  line-height: 1.4;
}

/* ===== HERO ===== */
.hero {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  margin-bottom: 16px;
  overflow: hidden;
}

.hero-top {
  padding: 24px 24px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.hero-photo {
  width: 110px;
  height: 140px;
  border-radius: 4px;
  background: #ddd;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #999;
  border: 1px solid #e8e8e8;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-info {
  flex: 1;
  min-width: 0;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.badge-teal {
  background: #00bbbd;
  color: #fff;
}

.badge-green {
  background: #06c755;
  color: #fff;
}

.badge-gray {
  background: #f0f0f0;
  color: #555;
}

.hero-name {
  /* font-family: "Noto Serif JP", serif; */
  font-size: 24px;
  font-weight: 700;
  color: #222;
  margin-bottom: 2px;
  line-height: 1.3;
}

.hero-name .suffix {
  font-size: 14px;
  font-weight: 400;
  color: #888;
  /* font-family: "Noto Sans JP", sans-serif; */
  margin-left: 6px;
}

.hero-clinic {
  font-size: 13px;
  color: #555;
  margin-bottom: 14px;
}

.hero-clinic a {
  color: #00bbbd;
}

.hero-kpi {
  display: flex;
  gap: 0;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
}

.kpi-item {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-right: 1px solid #e8e8e8;
}

.kpi-item:last-child {
  border-right: none;
}

.kpi-num {
  font-size: 20px;
  font-weight: 700;
  color: #00bbbd;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.kpi-num small {
  font-size: 11px;
  font-weight: 400;
  color: #888;
}

.kpi-label {
  font-size: 10px;
  color: #888;
  margin-top: 3px;
}

.hero-spec {
  padding: 12px 24px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.hero-spec-label {
  font-size: 11px;
  color: #888;
  font-weight: 700;
  min-width: 52px;
}

.spec-tag {
  font-size: 11px;
  color: #00bbbd;
  background: #f0fafa;
  border: 1px solid #c0ebec;
  padding: 2px 8px;
  border-radius: 3px;
}

.spec-tag-tech {
  font-size: 11px;
  color: #555;
  background: #f5f5f5;
  border: 1px solid #ddd;
  padding: 2px 8px;
  border-radius: 3px;
}

/* 推薦バー（ヒーロー下） */
.rec-bar {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 12px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
  min-width: 0;
}

.rec-bar-label {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  white-space: nowrap;
  flex-shrink: 0;
}

.rec-bar-scroll {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
}

.rec-bar-scroll--overflow::after {
  content: "";
  position: absolute;
  top: -12px;
  right: -20px;
  bottom: -12px;
  width: 42px;
  pointer-events: none;
  z-index: 1;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.055) 0%, rgba(0, 0, 0, 0) 100%);
  transition: opacity 0.2s ease;
}

.rec-bar-scroll--overflow.rec-bar-scroll--at-end::after {
  opacity: 0;
}

.rec-bar-list {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: #aeb8c6 #f0f2f5;
}

.rec-bar-scroll-hint {
  display: none;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 18px;
  margin: 0 0 0 2px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  cursor: default;
}

.rec-bar-scroll--overflow .rec-bar-scroll-hint {
  display: flex;
}

.rec-bar-scroll--overflow.rec-bar-scroll--at-end .rec-bar-scroll-hint {
  display: none;
}

.rec-bar-scroll-hint-chev {
  font-size: 12px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.2);
  line-height: 1;
  letter-spacing: -0.2em;
  margin-right: 1px;
}

.rec-bar-list::-webkit-scrollbar {
  height: 7px;
}

.rec-bar-list::-webkit-scrollbar-thumb {
  background: #aeb8c6;
  border-radius: 999px;
}

.rec-bar-list::-webkit-scrollbar-track {
  background: #f0f2f5;
  border-radius: 999px;
}

.rec-bar-item {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.rec-link-card {
  display: flex;
  gap: 8px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.rec-link-card:hover {
  background: #fafbfd;
  border-color: #eef1f4;
  box-shadow: none;
  text-decoration: none;
}

.rec-link-card:hover .rec-name {
  color: #333;
}

.rec-link-card--plain {
  cursor: default;
}

.rec-link-card--plain:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  text-decoration: none;
}

.rec-link-card--plain:hover .rec-name {
  text-decoration: none;
  color: #333;
}

/* 推薦ブロック（ヒーロー右列） */
.hero-rec {
  flex-shrink: 0;
  width: 160px;
  border-left: 1px solid #f0f0f0;
  padding-left: 16px;
  padding-bottom: 20px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.hero-rec-label {
  font-size: 10px;
  font-weight: 700;
  color: #888;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.hero-rec-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

.hero-actions {
  padding: 14px 24px;
  display: flex;
  gap: 8px;
}

/* ===== 相談室独自評価 ===== */
.editorial {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  margin-bottom: 16px;
  overflow: hidden;
  border-top: 3px solid #00bbbd;
}

.editorial-head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.editorial-score-wrap {
  flex-shrink: 0;
  text-align: center;
}

.editorial-label {
  display: inline-block;
  background: #00bbbd;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.editorial-score {
  /* font-family: "Noto Serif JP", serif; */
  font-size: 44px;
  font-weight: 700;
  color: #222;
  line-height: 1;
}

.editorial-score span {
  font-size: 14px;
  color: #888;
  font-weight: 400;
}

.editorial-stars {
  font-size: 16px;
  letter-spacing: 1px;
  color: #00bbbd;
  margin: 4px 0;
}

.editorial-tagline {
  font-size: 11px;
  color: #888;
}

.editorial-comment {
  flex: 1;
}

.editorial-comment-label {
  font-size: 11px;
  font-weight: 700;
  color: #00bbbd;
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}

.editorial-comment p {
  font-size: 13px;
  line-height: 1.85;
  color: #444;
  padding: 12px 14px;
  background: #f9f9f9;
  border-left: 2px solid #00bbbd;
  border-radius: 0 4px 4px 0;
}

.editorial-comment-sig {
  font-size: 11px;
  color: #888;
  margin-top: 6px;
}

.editorial-body {
  padding: 20px 24px;
}

/* おすすめポイント */
.point-list {
  list-style: none;
  margin-bottom: 16px;
}

.point-list li {
  display: flex;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
  color: #333;
  align-items: flex-start;
}

.point-list li:last-child {
  border-bottom: none;
}

.point-num {
  width: 20px;
  height: 20px;
  background: #00bbbd;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* こんな人向け */
.fit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.fit-box {
  border-radius: 4px;
  padding: 12px 14px;
}

.fit-box.ok {
  background: #f0faf0;
  border: 1px solid #c5e8c5;
}

.fit-box.ng {
  background: #fdf4f4;
  border: 1px solid #ecc8c8;
}

.fit-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.fit-box.ok .fit-title {
  color: #2a8040;
}

.fit-box.ng .fit-title {
  color: #b83232;
}

.fit-box ul {
  list-style: none;
}

.fit-box li {
  font-size: 12px;
  color: #444;
  padding: 2px 0;
}

.fit-box li::before {
  content: "・";
}

/* 人柄メモ */
.personality {
  background: #f9f9f9;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 13px;
  color: #444;
  line-height: 1.8;
  margin-bottom: 16px;
}

.personality-label {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  letter-spacing: 0.03em;
  margin-bottom: 5px;
}

/* KPI数値 */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.metric {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 12px 8px;
  text-align: center;
}

.metric-num {
  font-size: 22px;
  font-weight: 700;
  color: #00bbbd;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.metric-num small {
  font-size: 12px;
  font-weight: 400;
}

.metric-label {
  font-size: 10px;
  color: #888;
  margin-top: 4px;
  line-height: 1.4;
}

/* ===== プロフィール ===== */
.intro {
  font-size: 14px;
  line-height: 1.9;
  color: #444;
  margin-bottom: 20px;
}

/* タイムライン */
.timeline {
  position: relative;
  padding-left: 16px;
  margin-bottom: 18px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #ddd;
}

.tl-item {
  position: relative;
  padding: 0 0 12px 16px;
}

.tl-item::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 7px;
  width: 8px;
  height: 8px;
  background: #00bbbd;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #00bbbd;
}

.tl-year {
  font-size: 12px;
  font-weight: 700;
  color: #00bbbd;
}

.tl-desc {
  font-size: 13px;
  color: #444;
}

/* アコーディオン */
.acc {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  margin-bottom: 8px;
  overflow: hidden;
}

.acc-head {
  padding: 11px 14px;
  background: #f9f9f9;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.acc-head:hover {
  background: #f0fafa;
}

.acc-icon {
  font-size: 10px;
  color: #00bbbd;
  transition: transform 0.2s;
}

.acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.acc-body.open {
  max-height: 400px;
}

.acc-body-inner {
  padding: 10px 14px;
  font-size: 13px;
  color: #555;
  line-height: 1.85;
  border-top: 1px solid #f0f0f0;
}

.acc-body-inner li {
  list-style: none;
  padding: 2px 0;
}

.acc-body-inner li::before {
  content: "・";
  color: #00bbbd;
}

/* 論文 */
.paper {
  display: flex;
  gap: 12px;
  padding: 9px 12px;
  border-left: 2px solid #00bbbd;
  background: #f9f9f9;
  border-radius: 0 4px 4px 0;
  margin-bottom: 7px;
  font-size: 13px;
  color: #444;
}

.paper-year {
  font-size: 11px;
  font-weight: 700;
  color: #00bbbd;
  white-space: nowrap;
  padding-top: 2px;
}

/* ===== タブ ===== */
.tab-nav {
  display: flex;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tab-nav::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #888;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s;
}

.tab-btn.active {
  color: #00bbbd;
  border-bottom-color: #00bbbd;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* フィルタタグ */
.filter-row {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.ftag {
  padding: 4px 12px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid #ddd;
  background: #fff;
  color: #888;
  transition: all 0.15s;
}

.ftag.active {
  background: #00bbbd;
  color: #fff;
  border-color: #00bbbd;
}

/* 症例カード */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.case-card {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
}

.case-img {
  position: relative;
  padding-top: 62%;
  background: #e8e8e8;
}

.case-img-btn {
  cursor: zoom-in;
}

.case-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #aaa;
  flex-direction: column;
  gap: 4px;
}

.case-popup {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1100;
}

.case-popup.is-open {
  display: block;
}

.case-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.case-popup-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 980px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.case-popup-dialog img {
  max-width: 100%;
  max-height: 72vh;
  display: block;
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.case-popup-meta {
  width: min(92vw, 980px);
  margin-top: 12px;
  color: #222;
  line-height: 1.6;
  font-size: 13px;
  background: #fff;
  border-radius: 6px;
  padding: 10px 12px;
}

.case-popup-desc {
  margin-bottom: 4px;
  color: #222;
}

.case-popup-risk {
  color: #222;
}

.case-popup-close {
  position: absolute;
  top: -40px;
  right: 0;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.case-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 1;
}

.case-body {
  padding: 8px 10px;
}

.case-desc {
  font-size: 12px;
  color: #444;
  line-height: 1.6;
  margin-bottom: 5px;
}

.case-risk {
  font-size: 11px;
  color: #888;
  padding-top: 5px;
  border-top: 1px solid #f0f0f0;
  line-height: 1.5;
}

/* 口コミサマリー */
.review-sum {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 16px;
  background: #f9f9f9;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  margin-bottom: 14px;
}

.review-big-num {
  /* font-family: "Noto Serif JP", serif; */
  font-size: 44px;
  font-weight: 700;
  color: #222;
  line-height: 1;
}

.review-stars {
  font-size: 16px;
  color: #00bbbd;
  margin: 3px 0;
}

.review-total {
  font-size: 11px;
  color: #888;
}

.review-reasons {
  flex: 1;
}

.review-reasons-ttl {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  margin-bottom: 6px;
}

.rtag {
  display: inline-block;
  background: #fff;
  border: 1px solid #ddd;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  color: #555;
  margin: 2px;
}

/* 口コミカード */
.review-card {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 14px;
  margin-bottom: 10px;
}

.rc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}

.rc-user {
  font-size: 13px;
  font-weight: 700;
  color: #333;
}

.rc-meta {
  font-size: 11px;
  color: #888;
  margin-top: 2px;
}

.rc-score {
  font-size: 13px;
  color: #00bbbd;
  font-weight: 700;
}

.rc-title {
  font-size: 13px;
  font-weight: 700;
  color: #222;
  margin-bottom: 5px;
}

.rc-body {
  font-size: 13px;
  color: #555;
  line-height: 1.75;
}

.rc-foot {
  margin-top: 8px;
  font-size: 11px;
  color: #888;
  display: flex;
  gap: 14px;
}

/* 料金テーブル */
.price-table {
  width: 100%;
  border-collapse: collapse;
  border: solid 1px #f0f0f0;
  font-size: 13px;
  margin-bottom: 20px;
}

.price-table th {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #333;
  padding: 9px 12px;
  text-align: left;
}

.price-table td {
  padding: 9px 12px;
  border: 1px solid #f0f0f0;
  color: #333;
}

.price-table tr:last-child td {
  border-bottom: none;
}

.price-table tr:nth-child(even) td {
  background: #fafafa;
}

.price-em {
  color: #00bbbd;
  font-weight: 700;
}

.price-cat {
  font-size: 12px;
  font-weight: 700;
  color: #555;
  padding-bottom: 8px;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 10px;
}

/* もっと見るボタン */
.more-btn {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #555;
  cursor: pointer;
  transition: background 0.15s;
}

.more-btn:hover {
  background: #f9f9f9;
}

/* ===== クリニック情報 ===== */
.clinic-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.clinic-logo {
  width: 60px;
  height: 60px;
  background: #eee;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #aaa;
}

.clinic-name-ttl {
  font-size: 14px;
  font-weight: 700;
  color: #222;
  margin-bottom: 5px;
}

.clinic-detail {
  display: block;
  text-align: left;
  font-size: 12px;
  color: #666;
  line-height: 1.9;
}

.clinic-detail span {
  display: block;
}

/* ===== 医師メッセージ ===== */
.message-row {
  display: flex;
  gap: 14px;
}

.msg-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ddd;
  border: 2px solid #00bbbd;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #999;
  overflow: hidden;
}

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

.msg-bubble {
  flex: 1;
  background: #f9f9f9;
  border: 1px solid #e8e8e8;
  border-radius: 0 6px 6px 6px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.9;
  color: #444;
  position: relative;
}

.msg-bubble::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 14px;
  border: 7px solid transparent;
  border-right-color: #e8e8e8;
}

.msg-bubble::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 15px;
  border: 6px solid transparent;
  border-right-color: #f9f9f9;
}

/* ===== 掲載コンテンツ ===== */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.content-card {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s;
}

.content-card:hover {
  border-color: #00bbbd;
  text-decoration: none;
}

.content-thumb {
  padding-top: 50%;
  background: #e8e8e8;
  position: relative;
}

.content-thumb span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #aaa;
}

.content-body {
  padding: 10px 12px;
}

.content-type {
  font-size: 10px;
  color: #00bbbd;
  font-weight: 700;
  margin-bottom: 3px;
}

.content-ttl {
  font-size: 12px;
  font-weight: 700;
  color: #333;
  line-height: 1.5;
}

.sns-row {
  display: flex;
  gap: 8px;
}

.sns-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}

.sns-insta {
  background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af);
}

.sns-yt {
  background: #ff0000;
}

/* ===== FAQ ===== */
.faq-item {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  margin-bottom: 8px;
  overflow: hidden;
}

.faq-q {
  padding: 13px 14px;
  background: #f9f9f9;
  font-size: 14px;
  font-weight: 700;
  color: #222;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.faq-q-icon {
  color: #00bbbd;
  /* font-family: Georgia, serif; */
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.faq-a {
  padding: 12px 14px;
  font-size: 13px;
  color: #555;
  line-height: 1.8;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.faq-a-icon {
  color: #333;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
  /* font-family: Georgia, serif; */
}

/* ===== 関連医師 ===== */
.doc-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.doc-scroll::-webkit-scrollbar {
  display: none;
}

.doc-mini {
  flex-shrink: 0;
  width: 130px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}

.doc-mini:hover {
  border-color: #00bbbd;
}

.doc-mini-img {
  width: 100%;
  padding-top: 65%;
  background: #ddd;
}

.doc-mini-body {
  padding: 8px;
}

.doc-mini-name {
  font-size: 12px;
  font-weight: 700;
  color: #222;
  line-height: 1.3;
  margin-bottom: 2px;
}

.doc-mini-clinic {
  font-size: 10px;
  color: #888;
  margin-bottom: 4px;
}

.doc-mini-score {
  font-size: 11px;
  color: #00bbbd;
  font-weight: 700;
}

/* ===== SIDEBAR ===== */
.side-cta {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  border-top: 3px solid #00bbbd;
  padding: 18px;
  margin-bottom: 16px;
  text-align: center;
}

.side-cta h3 {
  font-size: 14px;
  font-weight: 700;
  color: #222;
  margin-bottom: 4px;
  line-height: 1.5;
}

.side-cta p {
  font-size: 12px;
  color: #888;
  margin-bottom: 12px;
  line-height: 1.6;
}

.side-cta .em {
  color: #00bbbd;
  font-weight: 700;
}

.side-btn {
  display: block;
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 8px;
  transition: opacity 0.15s;
}

.side-btn:hover {
  opacity: 0.85;
}

.side-btn.teal {
  background: #00bbbd;
  color: #fff;
}

.side-btn.line {
  background: #06c755;
  color: #fff;
}

.side-btn.mail {
  background: #00bbbd;
  color: #fff;
}

.side-btn.tel {
  background: #4a6fa5;
  color: #fff;
}

.side-btn.ghost {
  background: #fff;
  color: #555;
  border: 1px solid #ddd;
}

.side-note {
  font-size: 10px;
  color: #aaa;
}

.side-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}

.side-card h4 {
  font-size: 13px;
  font-weight: 700;
  color: #222;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

/* カレンダー空き */
.avail-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  text-align: center;
}

.avail-day {
  font-size: 9px;
  font-weight: 700;
  color: #888;
  margin-bottom: 3px;
}

.avail-mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin: 0 auto;
}

.avail-mark.ok {
  background: #e8f8f0;
  color: #2a8040;
}

.avail-mark.ng {
  background: #fdf4f4;
  color: #b83232;
}

.avail-mark.maybe {
  background: #fff8e0;
  color: #aa7700;
}

.avail-note {
  font-size: 10px;
  color: #aaa;
  text-align: center;
  margin-top: 8px;
}

/* 推薦ドクター */
.rec-item {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.rec-item:last-child {
  border-bottom: none;
}

.rec-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ddd;
  flex-shrink: 0;
  overflow: hidden;
}

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

.rec-name {
  font-size: 12px;
  font-weight: 700;
  color: #333;
}

.rec-clinic {
  font-size: 10px;
  color: #888;
}

/* サイド記事 */
.side-art {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  color: inherit;
}

.side-art:last-child {
  border-bottom: none;
}

.side-art:hover .side-art-ttl {
  color: #00bbbd;
}

.side-art-thumb {
  width: 48px;
  height: 36px;
  background: #ddd;
  border-radius: 3px;
  flex-shrink: 0;
}

.side-art-ttl {
  font-size: 11px;
  color: #333;
  line-height: 1.5;
}

/* ===== インタビュー抜粋 ===== */
.iv-article {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.iv-article.js-interview-switch {
  cursor: pointer;
}

.iv-article.js-interview-switch.is-active {
  background: #f7fbff;
}

.iv-article-thumb {
  width: 160px;
  height: 106px;
  flex-shrink: 0;
  background: #e8e8e8;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #aaa;
}

.iv-article-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.iv-article-info {
  flex: 1;
  min-width: 0;
}

.iv-article-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #00bbbd;
  letter-spacing: 0.06em;
  border: 1px solid #00bbbd;
  padding: 1px 7px;
  border-radius: 3px;
  margin-bottom: 7px;
}

.iv-article-ttl {
  font-size: 14px;
  font-weight: 700;
  color: #222;
  line-height: 1.55;
  margin-bottom: 6px;
}

.iv-article-meta {
  font-size: 11px;
  color: #aaa;
  margin-bottom: 10px;
}

.iv-article-link {
  font-size: 12px;
  font-weight: 700;
  color: #00bbbd;
  text-decoration: none;
}

.iv-article-link:hover {
  text-decoration: underline;
}

.iv-qa-list {
  margin-bottom: 8px;
}

.iv-qa {
  border-bottom: 1px solid #f0f0f0;
  padding: 14px 0;
}

.iv-qa:first-child {
  border-top: 1px solid #f0f0f0;
}

.iv-q {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  font-weight: 700;
  color: #222;
  margin-bottom: 10px;
  line-height: 1.55;
}

.iv-q-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: #00bbbd;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  /* font-family: Georgia, serif; */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.iv-a {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.iv-a-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: #f0f0f0;
  color: #555;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  /* font-family: Georgia, serif; */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.iv-a p {
  font-size: 13px;
  color: #555;
  line-height: 1.85;
}

.iv-more-btn {
  display: inline-block;
  padding: 10px 28px;
  border: 1.5px solid #00bbbd;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #00bbbd;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.iv-more-btn:hover {
  background: #00bbbd;
  color: #fff;
  text-decoration: none;
}

/* ===== サブタブ（インタビュー内）===== */
.subtab-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}

.subtab-btn {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid #ddd;
  background: #fff;
  color: #888;
  transition: all 0.15s;
  line-height: 1;
}

.subtab-btn.active {
  background: #00bbbd;
  border-color: #00bbbd;
  color: #fff;
}

.subtab-pane {
  display: none;
}

.subtab-pane.active {
  display: block;
}

/* ===== YouTubeカード ===== */
.yt-note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #888;
  background: #f9f9f9;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 9px 12px;
  margin-bottom: 16px;
}

.yt-note-icon {
  color: #ff0000;
  font-size: 14px;
}

.yt-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.yt-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0f0f0;
}

.yt-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.yt-thumb {
  width: 140px;
  flex-shrink: 0;
  text-decoration: none;
  position: relative;
  display: block;
}

.yt-thumb-inner {
  width: 140px;
  height: 78px;
  background: #222;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.yt-thumb-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.yt-thumb-placeholder {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
}

.yt-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.15s;
}

.yt-thumb:hover .yt-play {
  color: #ff0000;
}

.yt-duration {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
}

.yt-body {
  flex: 1;
  min-width: 0;
}

.yt-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #ff0000;
  border: 1px solid #ff0000;
  padding: 1px 6px;
  border-radius: 3px;
  margin-bottom: 5px;
}

.yt-ttl {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #222;
  line-height: 1.55;
  margin-bottom: 4px;
  text-decoration: none;
  transition: color 0.15s;
}

.yt-ttl:hover {
  color: #00bbbd;
}

.yt-meta {
  font-size: 11px;
  color: #aaa;
  margin-bottom: 8px;
}

.yt-watch-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ff0000;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 3px;
  text-decoration: none;
  transition: opacity 0.15s;
}

.yt-watch-btn:hover {
  opacity: 0.85;
  text-decoration: none;
}

.yt-icon {
  font-size: 9px;
}

/* ===== 推薦（インライン） ===== */
.rec-inline {
  padding: 12px 14px;
  background: #f9f9f9;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  margin-bottom: 14px;
}

.rec-inline-label {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  margin-bottom: 10px;
}

.rec-inline-list {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.rec-inline-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ===== 掲載記事リスト ===== */
.media-list {
  display: flex;
  flex-direction: column;
}

.media-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s;
}

.media-item:first-child {
  padding-top: 0;
}

.media-item:last-child {
  border-bottom: none;
}

.media-item:hover {
  opacity: 0.75;
}

.media-item:hover .media-ttl {
  color: #00bbbd;
}

.media-thumb {
  width: 100px;
  height: 66px;
  flex-shrink: 0;
  background: #e8e8e8;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #aaa;
}

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

.media-body {
  flex: 1;
  min-width: 0;
}

.media-cats {
  display: flex;
  gap: 5px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

.media-cat {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 3px;
}

.media-cat--area {
  background: #f0f0f0;
  color: #666;
}

.media-cat--surgery {
  background: #f0fafa;
  color: #00bbbd;
  border: 1px solid #c0ebec;
}

.media-ttl {
  font-size: 13px;
  font-weight: 700;
  color: #222;
  line-height: 1.55;
  margin-bottom: 5px;
  transition: color 0.15s;
}

.media-meta {
  font-size: 11px;
  color: #aaa;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 860px) {
  .wrap {
    grid-template-columns: 1fr;
  }
  .side {
    position: static;
  }
  .hero-kpi {
    flex-wrap: wrap;
  }
  .kpi-item {
    min-width: 80px;
  }
}
@media (max-width: 580px) {
  .hero-top {
    flex-direction: column;
  }
  .hero-photo {
    width: 100%;
    height: 100%;
  }
  .hero-rec {
    width: 100%;
    border-left: none;
    border-top: 1px solid #f0f0f0;
    padding-left: 0;
    padding-top: 12px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }
  .fit-row {
    grid-template-columns: 1fr;
  }
  .case-grid {
    grid-template-columns: 1fr 1fr;
  }
  .content-grid {
    grid-template-columns: 1fr;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
  }
  .snav-btns .btn-ghost {
    display: none;
  }
}

/*# sourceMappingURL=doctor-page-v6.css.map */