/**
 * 症例ページ専用スタイルシート — v6.0 最終版
 * ファイル名: case-style.css
 */

.case-archive-page,
.case-single-page {
  --navy:      #1a4a5e;
  --navy-dk:   #0d3347;
  --navy-lt:   #2a6a8e;
  --teal:      #7bbfca;
  --bg:        #f8f6f2;
  --bg-card:   #ffffff;
  --text:      #2c2c2c;
  --text-sub:  #666666;
  --text-muted:#999999;
  --border:    #e0d8ce;
  --radius:    4px;
  --shadow:    0 2px 20px rgba(26,74,94,.07);
  --shadow-lg: 0 8px 40px rgba(26,74,94,.14);
}

/* ================================================
   共通: HERO
   ================================================ */
.case-hero {
  background: linear-gradient(160deg, #3d8c86 0%, #66aca6 60%, #7dbdb7 100%);
  padding: 80px 24px 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.case-hero::before {
  content: 'CASE';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(100px, 18vw, 200px);
  font-weight: 300; letter-spacing: .25em;
  color: rgba(255,255,255,.035);
  pointer-events: none; user-select: none;
}
.case-hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123,191,202,.4), transparent);
}
.case-hero__eyebrow {
  display: block; font-size: 11px; letter-spacing: .5em;
  color: var(--teal); text-transform: uppercase; margin-bottom: 14px;
}
.case-hero__title {
  font-size: clamp(22px, 4vw, 32px); font-weight: 400;
  color: #fff; letter-spacing: .12em; margin: 0;
}
.case-hero__sub {
  font-size: 12px; color: rgba(255,255,255,.55);
  margin-top: 10px; letter-spacing: .06em;
}

/* 共通: タグ */
.tag { display: inline-block; padding: 3px 10px; font-size: 10px; letter-spacing: .04em; border-radius: 2px; line-height: 1.6; }
.tag--cond { background: rgba(26,74,94,.08); color: var(--navy); border: 1px solid rgba(26,74,94,.18); }

/* 共通: BA strip */
.ba-word { font-size: 10px; letter-spacing: .3em; color: var(--text-muted); }
.ba-word--after { color: var(--navy); }
.ba-line { flex: 1; max-width: 100px; height: 1px; background: linear-gradient(to right, #ccc, var(--navy)); position: relative; }
.ba-line::after { content: ''; position: absolute; right: -1px; top: -3px; border-left: 6px solid var(--navy); border-top: 3px solid transparent; border-bottom: 3px solid transparent; }

/* ================================================
   一覧: FILTER BAR
   ================================================ */
.case-filter-bar {
  background: var(--bg-card); border-bottom: 1px solid var(--border);
  padding: 22px 24px 18px; position: sticky; top: 0; z-index: 200;
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
}
.case-filter-bar__inner { max-width: 860px; margin: 0 auto; }
.case-filter-bar__heading {
  font-size: 11px; color: var(--text-muted); letter-spacing: .18em;
  margin-bottom: 13px; display: flex; align-items: center; gap: 8px;
}
.case-filter-bar__heading::before {
  content: ''; display: block; width: 3px; height: 10px;
  background: var(--navy); border-radius: 2px; flex-shrink: 0;
}
.case-filter-bar__row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.case-filter-bar__field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 220px; }
.case-filter-bar__label { font-size: 10px; color: var(--text-muted); letter-spacing: .1em; }
.case-filter-bar__select {
  -webkit-appearance: none; appearance: none;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231a4a5e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 36px 10px 14px; font-size: 13px; font-family: inherit;
  color: var(--text); cursor: pointer; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.case-filter-bar__select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(123,191,202,.18); }
.case-filter-bar__btn {
  background: #66aca6; color: #fff; border: none;
  border-radius: var(--radius); padding: 0 28px; height: 40px;
  font-size: 12px; font-family: inherit; letter-spacing: .15em;
  cursor: pointer; white-space: nowrap; transition: background .2s;
}
.case-filter-bar__btn:hover { background: #3d8c86; }
.case-filter-bar__reset {
  display: inline-block; margin-top: 8px; font-size: 10px;
  color: var(--text-muted); cursor: pointer; text-decoration: none;
}
.case-filter-bar__reset:hover { color: var(--navy); }

.case-results-bar { max-width: 860px; margin: 28px auto 16px; padding: 0 24px; }
.case-results-bar__count { font-size: 12px; color: var(--text-muted); }
.case-results-bar__count strong { font-size: 22px; color: var(--navy); font-weight: 500; margin-right: 3px; }

/* ================================================
   一覧: CARD LIST
   ================================================ */
.case-list {
  max-width: 860px; margin: 0 auto 100px; padding: 0 24px;
  display: flex; flex-direction: column; gap: 36px;
}
.case-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: box-shadow .3s, transform .3s;
  animation: caseUp .5s ease both;
}
.case-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.case-list .case-card:nth-child(1) { animation-delay: .05s; }
.case-list .case-card:nth-child(2) { animation-delay: .11s; }
.case-list .case-card:nth-child(3) { animation-delay: .17s; }
.case-list .case-card:nth-child(4) { animation-delay: .23s; }
.case-list .case-card:nth-child(5) { animation-delay: .29s; }
@keyframes caseUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

.case-card__topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 22px; background: linear-gradient(to right, #f4f1ec, #faf8f4);
  border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 8px;
}
.case-card__no { font-size: 11px; letter-spacing: .3em; color: var(--text-muted); }
.case-card__tags { display: flex; gap: 5px; flex-wrap: wrap; }

/* 一覧：BEFORE / AFTER の2枚 */
.case-card__images { display: grid; grid-template-columns: 1fr 1fr; }
.case-card__img-cell {
  position: relative; aspect-ratio: 4/3; overflow: hidden; background: #e8e4de;
}
.case-card__img-cell + .case-card__img-cell { border-left: 3px solid var(--bg-card); }
.case-card__img-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.case-card:hover .case-card__img-cell img { transform: scale(1.04); }
.case-card__img-ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: #bbb; font-size: 11px; background: #ede8df;
}
.case-card__img-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.62));
  color: rgba(255,255,255,.9); font-size: 9px; letter-spacing: .25em;
  text-align: center; padding: 18px 6px 7px;
}
.case-card__ba-strip {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; padding: 8px 16px; border-top: 1px solid var(--border);
}
.case-card__body { padding: 22px 22px 24px; }
.case-card__desc { font-size: 13px; line-height: 1.95; color: var(--text); margin-bottom: 20px; }
.case-card__footer { text-align: right; }
.case-card__btn {
  display: inline-block; background: #66aca6; color: #fff;
  padding: 11px 28px; font-size: 12px; letter-spacing: .12em;
  text-decoration: none; border-radius: var(--radius); transition: background .2s;
}
.case-card__btn:hover { background: #3d8c86; }

.case-empty { text-align: center; padding: 80px 20px; color: var(--text-muted); font-size: 14px; }

/* ================================================
   詳細ページ
   ================================================ */
.case-single-wrap { max-width: 860px; margin: 0 auto 100px; padding: 0 24px; }

.case-breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 20px 0 24px; font-size: 11px; color: var(--text-muted);
}
.case-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.case-breadcrumb a:hover { color: var(--navy); }

.case-single__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }

/* グループラベル */
.case-single__group { margin-bottom: 6px; }
.case-single__group-label {
  display: inline-block; padding: 5px 16px;
  font-size: 10px; letter-spacing: .35em;
  border-radius: var(--radius) var(--radius) 0 0; font-weight: 500;
}
.case-single__group-label--before { background: var(--text-muted); color: #fff; }
.case-single__group-label--after  { background: var(--navy); color: #fff; }

/* 画像グリッド（4〜5枚） */
.case-single__img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 3px;
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.case-single__img-grid--before { border-top: 3px solid var(--text-muted); }
.case-single__img-grid--after  { border-top: 3px solid var(--navy); }

.case-single__img-cell {
  position: relative; aspect-ratio: 4/3; overflow: hidden; background: #e8e4de;
}
.case-single__img-cell img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s;
}
.case-single__img-cell:hover img { transform: scale(1.05); }

/* 説明文 */
.case-single__desc {
  font-size: 14px; line-height: 2; color: var(--text);
  margin-bottom: 32px; padding: 22px 24px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
}

/* セクション */
.case-single__section { margin-bottom: 22px; }
.case-single__section-title {
  font-size: 11px; font-weight: 500; letter-spacing: .22em; color: var(--navy);
  margin-bottom: 10px; padding-bottom: 7px;
  border-bottom: 1px solid rgba(26,74,94,.15);
}

/* 詳細テーブル */
.case-single__detail-table {
  width: 100%; border-collapse: collapse;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.case-single__detail-table tr { border-bottom: 1px solid var(--border); }
.case-single__detail-table tr:last-child { border-bottom: none; }
.case-single__detail-table th {
  width: 130px; padding: 12px 16px; font-size: 12px; font-weight: 400;
  color: var(--text-muted); background: #faf8f4;
  white-space: nowrap; vertical-align: top; text-align: left;
}
.case-single__detail-table td { padding: 12px 16px; font-size: 13px; color: var(--text); vertical-align: top; }

/* リスク＆費用 */
.case-single__risk-cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; }
.case-single__risk-list {
  list-style: none; padding: 16px 18px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
}
.case-single__risk-list li {
  font-size: 12px; color: var(--text-sub);
  padding: 4px 0 4px 14px; position: relative; line-height: 1.75;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.case-single__risk-list li:last-child { border-bottom: none; }
.case-single__risk-list li::before { content: '·'; position: absolute; left: 0; color: var(--text-muted); font-size: 16px; line-height: 1.3; }
.case-single__cost-table {
  width: 100%; border-collapse: collapse;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.case-single__cost-table tr { border-bottom: 1px solid var(--border); }
.case-single__cost-table tr:last-child { border-bottom: none; }
.case-single__cost-table td { padding: 12px 16px; font-size: 13px; }
.case-single__cost-table td:first-child { color: var(--text-muted); font-size: 12px; }
.case-single__cost-table td:last-child { text-align: right; color: var(--navy); font-weight: 500; }

/* 戻るボタン */
.case-single__back-wrap { text-align: center; margin-top: 20px; }
.case-single__back-btn {
  display: inline-block; padding: 13px 36px;
  border: 1px solid var(--navy); color: var(--navy);
  font-size: 12px; letter-spacing: .15em; text-decoration: none;
  border-radius: var(--radius); transition: background .2s, color .2s;
}
.case-single__back-btn:hover { background: var(--navy); color: #fff; }

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 640px) {
  .case-filter-bar__row { flex-direction: column; }
  .case-card__images { grid-template-columns: 1fr; }
  .case-card__img-cell + .case-card__img-cell { border-left: none; border-top: 3px solid var(--bg-card); }
  .case-single__img-grid { grid-template-columns: repeat(2, 1fr); }
  .case-single__risk-cost-grid { grid-template-columns: 1fr; }
  .case-single__detail-table th { width: 100px; }
}

/* ================================================
   追加セクション（治療の流れ・医療費控除・料金・料金表）
   ================================================ */
.case-extra-section {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 2px solid var(--border);
}
.case-extra-section__title {
  font-size: 18px; font-weight: 500; letter-spacing: .1em;
  color: var(--navy); margin-bottom: 16px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(26,74,94,.15);
}
.case-extra-section__lead {
  font-size: 13px; line-height: 1.9; color: var(--text-sub);
  margin-bottom: 24px;
}
.case-extra-section__body p {
  font-size: 13px; line-height: 1.9; color: var(--text); margin-bottom: 12px;
}
.case-extra-section__link-wrap { text-align: right; margin-top: 16px; }
.case-extra-section__link {
  font-size: 12px; color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--navy); padding-bottom: 2px;
  transition: opacity .2s;
}
.case-extra-section__link:hover { opacity: .7; }
.case-extra-section__note { font-size: 11px; color: var(--text-muted); }

/* STEPリスト */
.case-steps { display: flex; flex-direction: column; gap: 20px; margin-bottom: 16px; }
.case-step {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
}
.case-step__num {
  display: flex; flex-direction: column; align-items: center;
  min-width: 48px; color: var(--navy);
}
.case-step__num span { font-size: 9px; letter-spacing: .15em; }
.case-step__num strong { font-size: 24px; font-weight: 300; line-height: 1; }
.case-step__body h3 { font-size: 14px; font-weight: 500; color: var(--navy); margin-bottom: 6px; }
.case-step__body p { font-size: 12px; line-height: 1.85; color: var(--text-sub); }

/* 医療費控除計算式 */
.case-koujyo-formula {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px; margin: 16px 0;
}
.case-koujyo-formula__item {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px;
  font-size: 12px; text-align: center; line-height: 1.5;
}
.case-koujyo-formula__sign { font-size: 18px; color: var(--navy); font-weight: 300; }

/* FAQリスト */
.case-faq-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.case-faq-item {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.case-faq-item__q {
  background: #f4f1ec; padding: 12px 16px;
  font-size: 13px; font-weight: 500; color: var(--navy);
  display: flex; align-items: center; gap: 8px;
}
.case-faq-item__q::before {
  content: 'Q'; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; background: var(--navy); color: #fff;
  border-radius: 50%; font-size: 11px; flex-shrink: 0;
}
.case-faq-item__a {
  padding: 12px 16px; font-size: 12px; line-height: 1.85; color: var(--text);
  display: flex; align-items: flex-start; gap: 8px;
}
.case-faq-item__a::before {
  content: 'A'; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; background: #66aca6; color: #fff;
  border-radius: 50%; font-size: 11px; flex-shrink: 0; margin-top: 1px;
}

/* 料金表画像 */
.case-price-table-wrap { text-align: center; }
.case-price-table-img {
  max-width: 500px; width: 100%; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}

@media (max-width: 640px) {
  .case-step { flex-direction: column; gap: 10px; }
  .case-step__num { flex-direction: row; gap: 6px; align-items: baseline; }
  .case-koujyo-formula { flex-direction: column; align-items: stretch; }
  .case-koujyo-formula__sign { text-align: center; }
}
/* 料金表テーブル */
.case-price-table-wrap { max-width: 560px; margin: 0 auto; }
.case-pt-header { text-align: center; padding: 20px 0 16px; border-bottom: 2px solid #489790; margin-bottom: 20px; }
.case-pt-title { font-size: 20px; font-weight: 500; color: #2a5c58; }
.case-pt-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.case-pt-section-label { font-size: 11px; letter-spacing: .15em; color: #489790; margin: 16px 0 8px; padding-left: 4px; font-weight: 500; }
.case-pt-table { width: 100%; border-collapse: collapse; background: var(--bg-card); border: 1px solid #b8d9d7; border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.case-pt-table tr { border-bottom: 1px solid #d8ecea; }
.case-pt-table tr:last-child { border-bottom: none; }
.case-pt-table td { padding: 14px 16px; font-size: 14px; color: var(--text); }
.case-pt-table td:last-child { text-align: right; font-size: 16px; font-weight: 500; color: #2a5c58; }
.case-pt-table tr.featured { background: rgba(72,151,144,.08); }
.case-pt-table tr.featured td:first-child { color: #2a5c58; font-weight: 500; }
.case-pt-sub-table { width: 100%; border-collapse: collapse; background: var(--bg-card); border: 1px solid #d8ecea; border-radius: var(--radius); overflow: hidden; }
.case-pt-sub-table tr { border-bottom: 1px solid #eaf4f3; }
.case-pt-sub-table tr:last-child { border-bottom: none; }
.case-pt-sub-table td { padding: 11px 16px; font-size: 13px; color: var(--text-muted); }
.case-pt-sub-table td:last-child { text-align: right; color: var(--text); }