/* /css/spot-pages.css  —  シミ系ページ共通スタイル（1ファイル運用） */
:root{
  --accent:#2fa69a;
  --accent-weak:#e8f6f4;
  --text:#20303a;
  --bg:#ffffff;
  --muted:#5e6b75;
  --card:#ffffff;
  --shadow:0 6px 16px rgba(0,0,0,.08);
  --radius:14px;
}

/* 名前空間で衝突回避 */
.spot-page{ color:var(--text); background:var(--bg); line-height:1.8; font-size:16px; }
.spot-page *{ box-sizing:border-box; }
.spot-page img{ max-width:100%; height:auto; display:block; border-radius:12px; }

/* ヒーロー */
.spot-hero{
  background:linear-gradient(180deg, var(--accent-weak), #fff 60%);
  border-radius:var(--radius);
  padding:2rem 1.25rem;
  box-shadow:var(--shadow);
  margin:0 auto 1.25rem;
}
.spot-hero h1{ margin:0 0 .5rem; font-size:clamp(1.4rem,3.5vw,2rem); }
.spot-hero .lead{ margin:.25rem 0 1rem; color:var(--muted); }

/* CTA */
.cta-group{ display:flex; gap:.75rem; flex-wrap:wrap; }
.cta-group.center{ justify-content:center; }
.cta-button{
  display:inline-block; padding:.9rem 1.2rem; border-radius:12px;
  background:var(--accent); color:#fff; text-decoration:none; font-weight:700;
  box-shadow:var(--shadow); transition:transform .12s ease, opacity .2s ease;
}
.cta-button:hover{ transform:translateY(-1px); opacity:.95; }
.cta-button.secondary{ background:#ffd; color:#5a5a00; }

/* セクション */
.spot-section{
  background:#fff; border-left:6px solid var(--accent); border-radius:10px;
  padding:1.25rem; margin:1rem 0; box-shadow:var(--shadow);
}
.spot-title{ margin:.2rem 0 1rem; font-size:1.25rem; }
.spot-list{ margin:.5rem 0 0 1.1rem; }
.spot-list li{ margin:.25rem 0; }

/* テーブル（横スクロール安全） */
.table-wrap{ overflow-x:auto; }
.spot-table{ width:100%; border-collapse:collapse; min-width:680px; }
.spot-table th, .spot-table td{ border:1px solid #e5e8ea; padding:.7rem .6rem; }
.spot-table thead th{ background:var(--accent-weak); }

/* カードグリッド */
.card-grid{
  display:grid; gap:1rem;
  grid-template-columns:1fr;
}
.spot-card{
  background:var(--card); border-radius:12px; box-shadow:var(--shadow);
  padding:1rem;
}
.spot-card h3{ margin:.2rem 0 .6rem; font-size:1.1rem; }

/* 診療フロー */
.flow-steps{ counter-reset:step; list-style:none; padding:0; margin:0; }
.flow-steps li{
  position:relative; padding:.75rem .75rem .75rem 2.4rem; margin:.4rem 0;
  background:#fff; border-radius:10px; box-shadow:var(--shadow);
}
.flow-steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:.7rem; top:.7rem;
  width:1.4rem; height:1.4rem; display:grid; place-items:center;
  border-radius:50%; font-size:.9rem; font-weight:700;
  color:#fff; background:var(--accent);
}

/* 症例ビフォーアフター */
.ba-grid{ display:grid; gap:.8rem; grid-template-columns:1fr 1fr; }
.ba-item figcaption{ margin-top:.35rem; font-size:.9rem; color:var(--muted); }

/* FAQ（常時展開） */
.faq-open h3{ font-size:1.05rem; margin:1rem 0 .3rem; }
.faq-open p{ margin:.2rem 0 .6rem; }

.note{ color:var(--muted); font-size:.9rem; }

/* レスポンシブ */
@media (max-width: 768px){
  .card-grid{ grid-template-columns:1fr; }
  .ba-grid{ grid-template-columns:1fr; }
  .cta-group{ flex-direction:column; }
}

/* --- dark-spots風の微調整（共通CSSに追記） --- */
.spot-hero--compact { padding: 1.6rem 1.25rem; }
.spot-hero--compact h1 { margin-bottom: .35rem; }

.subhead{
  margin: 1rem 0 .5rem;
  font-size: 1.05rem;
  color: var(--text);
  font-weight: 700;
}

.flow-steps--bignum li{
  padding-left: 3rem;
  min-height: 2.2rem;
}
.flow-steps--bignum li::before{
  width: 1.8rem; height: 1.8rem; font-size: 1rem;
}

.pc-only{ display:none; }
@media (min-width: 769px){
  .pc-only{ display:inline; }
}

.spot-links{
  margin: 1.25rem 0 2rem;
  text-align: center;
}
.spot-links .link-row a{
  color: #0a6c64;
  text-decoration: underline;
}
.spot-links .link-row a:hover{ opacity: .9; }

/* =========================
   症例スライダー
   ========================= */
.case-slider{
  position: relative;
  margin: .6rem 0 1.2rem;
}
.case-viewport{
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  box-shadow: var(--shadow);
  background: #fff;
}
.case-track{
  display: flex;
  gap: 0; /* 端が切れないよう gap 0 */
  width: max-content;
}
.case-slide{
  flex: 0 0 100%;
  scroll-snap-align: center;
  padding: .75rem;
}
.case-slide figure{ margin:0; }
.case-slide figcaption{
  margin-top: .4rem;
  font-size: .9rem;
  color: var(--muted);
  text-align: center;
}

/* ナビボタン */
.case-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff; font-weight: 700;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: grid; place-items: center;
  opacity: .95;
}
.case-prev{ left: .4rem; }
.case-next{ right: .4rem; }
.case-nav:hover{ opacity: 1; }

/* ドット */
.case-dots{
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin-top: .6rem;
}
.case-dots .dot{
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: #cfe7e4;
  border: 0;
  cursor: pointer;
}
.case-dots .dot.is-active{ background: var(--accent); }

/* モバイル最適化 */
@media (max-width: 768px){
  .case-nav{ width: 2rem; height: 2rem; }
}

/* =========================
   見出し装飾
   ========================= */
/* h2：ブラシ風の下線（背景に筆っぽい帯） */
.brush-underline{
  display: inline;
  background:
    linear-gradient(transparent 65%, var(--accent-weak) 0) no-repeat;
  background-size: 100% 1.1em; /* テキスト高さにフィット */
  background-position: 0 .25em;
  padding-bottom: .1em;
}

/* h3：マーカー風ハイライト */
.highlight{
  display: inline-block;
  background: linear-gradient(0deg, var(--accent-weak), var(--accent-weak));
  padding: .1rem .4rem;
  border-radius: .35rem;
}

/* 症例の解説ブロック */
.case-meta{
  margin-top: .6rem;
  background: #f9fcfb;
  border: 1px solid #e3f0ee;
  border-radius: 10px;
  padding: .75rem .85rem;
}

/* 説明は定義リストで整列 */
.case-info{
  display: grid;
  grid-template-columns: 6rem 1fr;
  column-gap: .8rem;
  row-gap: .35rem;
  margin: 0;
}
.case-info > div{ display: contents; }  /* dt/ddをグリッドに素直に流す */
.case-info dt{
  margin: 0;
  font-weight: 700;
  color: #1f2e35;
}
.case-info dd{
  margin: 0;
  color: var(--text);
}

.case-disclaimer{
  margin: .5rem 0 0;
  font-size: .85rem;
  color: var(--muted);
}

/* レスポンシブ */
@media (max-width: 768px){
  .case-info{ grid-template-columns: 5.2rem 1fr; }
}