/* ── 共通セクション ── */
.section { padding: 4.5rem 2rem; }
.section.alt { background: var(--warm-50); }
.container { max-width: 800px; margin: 0 auto; }

.section-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--gold-600);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.section-title {
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 700;
  color: var(--gold-800);
  letter-spacing: 0.06em;
  margin-bottom: 0.8rem;
  line-height: 1.5;
}
.divider {
  width: 40px; height: 2px;
  background: var(--gold-200);
  margin: 0 0 2.5rem;
}
.body-text {
  font-size: 15px;
  color: var(--text-main);
  line-height: 2.1;
  margin-bottom: 1.2rem;
}

/* ── ページ内目次 ── */
.symptom-index {
  padding: 3rem 2rem 0;
}
.symptom-index-lead {
  font-size: 15px;
  color: var(--text-main);
  line-height: 2.1;
  margin-bottom: 1.5rem;
}
.symptom-index-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.symptom-index-list a {
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 1px solid var(--warm-100);
  border-radius: 40px;
  background: #fff;
  color: var(--gold-800);
  font-size: 13px;
  font-family: 'Noto Sans JP', sans-serif;
  text-decoration: none;
  transition: background 0.2s;
}
.symptom-index-list a:hover { background: var(--gold-50); }

/* ── 各症状セクション ── */
/* 見出しが上部の固定メニューに隠れないように（セクションの上余白と合わせて調整） */
.section[id] {
  scroll-margin-top: 56px;
}
.symptom-detail-head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 0.4rem;
}
.symptom-detail-head img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
}
.symptom-detail-head .section-title { margin-bottom: 0; }
.symptom-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 2rem;
  list-style: none;
  padding: 0;
}
.symptom-tags li {
  font-size: 12.5px;
  color: var(--text-sub);
  font-family: 'Noto Sans JP', sans-serif;
  background: var(--gold-50);
  border-radius: 6px;
  padding: 0.25rem 0.7rem;
}
.section.alt .symptom-tags li { background: #fff; }
.symptom-subhead {
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-800);
  margin: 2rem 0 0.8rem;
  padding-left: 0.8rem;
  border-left: 3px solid var(--gold-200);
  line-height: 1.6;
}
/* ── 図解：不通則痛・不栄則痛 ── */
.pain-figure {
  margin: 1.8rem 0 2rem;
  padding: 1.8rem 1.5rem 1.5rem;
  background: var(--gold-50);
  border-radius: 12px;
}
.pain-figure-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-800);
  text-align: center;
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
}
.pain-figure-lead,
.pain-figure-foot {
  font-size: 14px;
  color: var(--text-main);
  line-height: 1.9;
  text-align: center;
}
.pain-figure-lead { margin-bottom: 1.4rem; }
.pain-figure-foot { margin-top: 1.2rem; }
.pain-figure-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.pain-card {
  background: #fff;
  border: 1px solid var(--warm-100);
  border-radius: 10px;
  padding: 1.2rem 1.1rem 1rem;
}
.pain-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.7rem;
  margin-bottom: 0.6rem;
}
.pain-card-term {
  font-size: 18px;
  font-weight: 700;
  color: var(--gold-800);
  letter-spacing: 0.08em;
}
.pain-card-read {
  font-size: 12px;
  color: var(--text-sub);
}
.pain-card-tag {
  font-size: 13px;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--warm-800);
  margin: -0.2rem 0 0.4rem;
}
.pain-card-svg {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0.6rem;
}
.pain-card-text {
  font-size: 14px;
  color: var(--text-main);
  line-height: 1.9;
  margin-bottom: 0.8rem;
}
.pain-card-text strong { color: var(--gold-800); }
.pain-card-list {
  font-size: 12.5px;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--text-sub);
  line-height: 1.7;
  border-top: 1px dashed var(--warm-100);
  padding-top: 0.7rem;
}
.pain-card-list dt { font-weight: 700; color: var(--warm-800); }
.pain-card-list dd { margin: 0 0 0.4rem; }

/* 通則不痛・栄則不痛（整え方の考え方） */
.pain-care {
  margin-top: 1.2rem;
  background: #fff;
  border: 1px solid var(--warm-100);
  border-radius: 10px;
  padding: 1.3rem 1.1rem 1.1rem;
}
.pain-care-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-800);
  text-align: center;
  margin-bottom: 0.4rem;
}
.pain-care-lead {
  font-size: 14px;
  color: var(--text-main);
  line-height: 1.9;
  text-align: center;
  margin-bottom: 1rem;
}
.pain-care-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.pain-care-col {
  background: var(--gold-50);
  border-radius: 8px;
  padding: 1rem 1rem 0.9rem;
}
.pain-care-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.7rem;
  margin-bottom: 0.5rem;
}
.pain-care-text {
  font-size: 14px;
  color: var(--text-main);
  line-height: 1.9;
  margin-bottom: 0.4rem;
}
.pain-care-text strong, .pain-care-note strong { color: var(--gold-800); }
.pain-care-list {
  margin: 0 0 0.6rem 1.2em;
  padding: 0;
  font-size: 13px;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--text-sub);
  line-height: 1.8;
}
.pain-care-tatoe {
  font-size: 13px;
  color: var(--warm-800);
  line-height: 1.8;
  margin-bottom: 0.5rem;
}
.pain-care-yojo {
  font-size: 12.5px;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--text-sub);
  line-height: 1.7;
  border-top: 1px dashed var(--warm-100);
  padding-top: 0.5rem;
}
.pain-care-yojo span {
  display: block;
  font-weight: 700;
  color: var(--warm-800);
}
.pain-care-note {
  font-size: 14px;
  color: var(--text-main);
  line-height: 1.9;
  margin-top: 1rem;
  text-align: center;
}

.symptom-note {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.9;
  font-family: 'Noto Sans JP', sans-serif;
  margin-top: 1.5rem;
}
/* 各症状の最後の「↑ ほかのお悩みを見る」（ページ上部の症状一覧へ戻る） */
#symptom-list { scroll-margin-top: 60px; }
/* 本文中の「不通則痛」「不栄則痛」（痛みの図解へのリンク） */
.pain-term-link {
  color: var(--gold-800);
  font-weight: 700;
  border-bottom: 1px solid var(--gold-200);
}
.pain-term-link:hover { color: var(--gold-600); border-bottom-color: var(--gold-600); }
#pain-futsu, #pain-fuei { scroll-margin-top: 100px; }
.symptom-to-list {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 13px;
  color: var(--gold-600);
  font-family: 'Noto Sans JP', sans-serif;
  text-decoration: none;
  border-bottom: 1px solid var(--gold-100);
  padding-bottom: 2px;
}
.symptom-to-list:hover { color: var(--gold-800); border-bottom-color: var(--gold-600); }
.symptom-back {
  display: inline-block;
  margin-bottom: 2rem;
  font-size: 13px;
  color: var(--text-sub);
  font-family: 'Noto Sans JP', sans-serif;
  text-decoration: none;
}
.symptom-back:hover { color: var(--gold-600); }

/* ── CTAバナー ── */
.cta-banner {
  background: var(--gold-800);
  color: #fff;
  text-align: center;
  padding: 4rem 2rem;
}
.cta-banner h2 {
  font-size: clamp(18px, 3vw, 26px);
  font-weight: 700;
  margin-bottom: 0.8rem;
}
.cta-banner p {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 2rem;
  line-height: 1.9;
}
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-white {
  background: #fff; color: var(--gold-800);
  padding: 0.8rem 2rem; border-radius: 40px;
  font-size: 14px; font-weight: 700;
  font-family: 'Noto Sans JP', sans-serif;
}
.btn-outline {
  border: 1.5px solid rgba(255,255,255,0.6);
  color: #fff; padding: 0.8rem 2rem;
  border-radius: 40px; font-size: 14px;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ── フッター ── */
footer {
  background: var(--gold-900);
  color: rgba(255,255,255,0.6);
  text-align: center;
  padding: 2.5rem 1rem;
  font-size: 12px;
  line-height: 1.9;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ── 固定予約ボタン ── */
.float-reserve {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 999;
}
.float-reserve a {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--gold-600); color: #fff;
  font-size: 13px; font-weight: 700;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.08em;
  padding: 0.75rem 1.4rem;
  border-radius: 40px;
  box-shadow: 0 4px 16px rgba(155,122,0,0.35);
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
}
.float-reserve a:hover {
  background: var(--gold-800);
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  nav { padding: 0 1rem; }
  .nav-links { display: none; }
  .section { padding: 3.5rem 1rem; }
  .symptom-index { padding: 2.5rem 1rem 0; }
  .symptom-detail-head img { width: 56px; height: 56px; }
  .pain-figure { padding: 1.4rem 1rem 1.2rem; }
  .pain-figure-cards { grid-template-columns: 1fr; }
  .pain-figure-lead, .pain-figure-foot { text-align: left; }
  .pain-care-cols { grid-template-columns: 1fr; }
  .pain-care-lead, .pain-care-note { text-align: left; }
  .float-reserve { bottom: 1.2rem; right: 1rem; }
  .float-reserve a { font-size: 12px; padding: 0.65rem 1.1rem; }
}