@charset "UTF-8";
/* =========================================
   症状別ページ専用スタイル
   page-symptom.php / .symptom-page スコープ
   方針: 既存テーマ style.css の .c-heading01 / .btn / .grid-col03 -merit /
        .features+.feature-card / .pattern__inner2 / .inner / .js-fadeUp を流用、
        ここでは固有コンポーネント＋ボタン補助モディファイアのみ定義
========================================= */

/* CSS変数 (symptom-page スコープ、フロントページとトンマナ共通) */
.symptom-page {
  --sp-main: #c06223;
  --sp-title: #3e2c28;
  --sp-heading: #6f584a;
  --sp-brown-sub: #85654e;
  --sp-cream: #f5f3ed;
  --sp-beige: #ece6dc;
  --sp-border: #cecece;
  --sp-text: #141414;
  --sp-line: #06C755;
  --sp-shadow-soft: 0 4px 20px -2px rgba(62, 44, 40, 0.05);
  --sp-shadow-card: 0 2px 10px rgba(62, 44, 40, 0.04);
  --sp-shadow-lg: 0 10px 15px -3px rgba(62, 44, 40, 0.08);

  letter-spacing: 0.05em;
}
.symptom-page * {
  box-sizing: border-box;
  margin-top: 0;
}
.symptom-page section[id] { scroll-margin-top: 100px; }
.symptom-page img { max-width: 100%; height: auto; display: block; }

/* セクション共通リード文 (.c-heading01直下のキャッチ) */
.symptom-page .sym-section-lead {
  text-align: center;
  font-size: 1.55rem;
  line-height: 1.8;
  color: var(--sp-text);
  margin: 1.6rem auto 4.0rem;
  max-width: 80rem;
}
@media (max-width: 768px) {
  .symptom-page .sym-section-lead { font-size: 4vw; }
}

/* ボタン補助 (.btn -color はテーマ標準を流用、-line / -tel をここで追加) */
.symptom-page .sym-cta {
  display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center;
  margin-top: 3.2rem;
}
.symptom-page .sym-cta--tel { margin-top: 1.2rem; }
.symptom-page .btn {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  gap: 0.8rem;
  padding: 1.4rem 3.0rem !important;
  border-radius: 50px !important;
  font-size: 1.5rem !important;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: opacity 0.3s, transform 0.2s, background-color 0.3s, color 0.3s;
  border: 1px solid transparent;
  min-width: 22rem;
  box-shadow: none;
}
.symptom-page .sym-cta .btn:hover::after {
  background-color: #05b04b;
}
.symptom-page .btn:hover { opacity: 0.92; transform: translateY(-2px); }
.symptom-page .btn i { width: 1.6rem; height: 1.6rem; flex-shrink: 0; }
.symptom-page .btn.-line {
  background-color: var(--sp-line);
  border-color: var(--sp-line);
  color: #fff;
}
.symptom-page .btn.-tel {
  background-color: #fff;
  border-color: var(--sp-main);
  color: var(--sp-main);
  font-family: 'Montserrat Alternates', 'Montserrat', sans-serif;
  letter-spacing: 0.06em;
}
@media (max-width: 600px) {
  .symptom-page .sym-cta { flex-direction: column; align-items: stretch; padding: 0 2rem; }
  .symptom-page .btn { width: 100%; min-width: 0; }
}

/* =========================================
   1. ヒーローイントロ
========================================= */
.symptom-page .sym-hero {
  position: relative;
  padding: 14.0rem 0 9.0rem;
  overflow: hidden;
  background: var(--sp-cream);
}
.symptom-page .sym-hero__bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.symptom-page .sym-hero__bg picture { display: block; width: 100%; height: 100%; }
.symptom-page .sym-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.symptom-page .sym-hero__overlay {
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(245, 243, 237, 0.55) 0%,
    rgba(245, 243, 237, 0.78) 55%,
    rgba(245, 243, 237, 0.92) 100%);
}
.symptom-page .sym-hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* ヒーロー見出し: ワイヤーHTMLの .hero-title スペック踏襲
   (font-size:6.0rem / line-height:1.3 / letter-spacing:-0.02em / font-weight:bold) */
.symptom-page .sym-hero .c-heading01 {
  font-size: 6.0rem;
  font-weight: 700;
  color: var(--sp-title);
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0 auto 2.4rem;
}
.symptom-page .sym-hero .c-heading01 span {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sp-main);
  margin-top: 1.2rem;
  font-family: 'Montserrat Alternates', 'Montserrat', sans-serif;
}

/* ヒーロー本文: ワイヤーHTMLの .hero-lead スペック踏襲
   (font-size:1.8rem / font-weight:500 / line-height:1.6) */
.symptom-page .sym-hero__lead {
  font-size: 1.8rem; line-height: 1.6;
  margin: 0 auto 4.0rem;
  max-width: 76rem;
  font-weight: 500;
}

@media (max-width: 768px) {
  .symptom-page .sym-hero { padding: 10.0rem 0 6.0rem; }
  .symptom-page .sym-hero .c-heading01 { font-size: 8vw; letter-spacing: -0.01em; }
  .symptom-page .sym-hero .c-heading01 span { font-size: 3.5vw; }
  .symptom-page .sym-hero__lead { font-size: 4.5vw; text-align: left; padding: 0 1rem; }
}

.symptom-page .tags {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.0rem; margin-bottom: 3.0rem;
}
.symptom-page .tag {
  background: #fff; border: 1px solid var(--sp-border); color: var(--sp-title);
  padding: 0.9rem 2.0rem; border-radius: 50px;
  font-size: 1.55rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 0.6rem;
  box-shadow: var(--sp-shadow-card);
}
.symptom-page .tag i,
.symptom-page .tag svg {
  width: 1.8rem !important; height: 1.8rem !important;
  color: var(--sp-main) !important;
}

.symptom-page .hero-points {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 3.0rem;
  margin: 5.0rem 0 4.0rem;
}
.symptom-page .hero-point {
  width: 15.0rem; height: 15.0rem;
  background: rgba(255, 255, 255, 0.97);
  border: 3px solid var(--sp-main);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative;
  box-shadow: var(--sp-shadow-lg);
  padding: 1.4rem;
}
.symptom-page .hero-point i,
.symptom-page .hero-point svg {
  width: 4.0rem !important; height: 4.0rem !important; color: var(--sp-main); margin-bottom: 0.6rem;
}
.symptom-page .hero-point-label {
  position: absolute; top: -1.4rem; left: 50%; transform: translateX(-50%);
  background: var(--sp-main); color: #fff;
  font-family: 'Montserrat Alternates', 'Montserrat', sans-serif;
  font-size: 1.4rem; font-weight: 700;
  padding: 0.4rem 1.6rem; border-radius: 20px; white-space: nowrap;
  letter-spacing: 0.08em;
  border: 3px solid #fff;
  box-shadow: var(--sp-shadow-soft);
}
.symptom-page .hero-point span {
  font-size: 1.55rem; font-weight: 700; line-height: 1.35; text-align: center;
  color: var(--sp-title);
}
@media (max-width: 768px) {
  .symptom-page .tag { font-size: 1.3rem; padding: 0.7rem 1.6rem; }
  .symptom-page .tag i,
  .symptom-page .tag svg { width: 1.5rem !important; height: 1.5rem !important; }
}
@media (max-width: 600px) {
  .symptom-page .hero-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    gap: 2.0rem 1.0rem;
    margin: 4.4rem 0 3.6rem;
  }
  .symptom-page .hero-point {
    width: 16.0rem; height: 16.0rem;
    border-width: 3px; padding: 1.4rem;
  }
  .symptom-page .hero-point span { font-size: 1.5rem; line-height: 1.4; }
  .symptom-page .hero-point i,
  .symptom-page .hero-point svg { width: 4.0rem !important; height: 4.0rem !important; margin-bottom: 0.6rem; }
  .symptom-page .hero-point-label { font-size: 1.4rem; padding: 0.4rem 1.4rem; top: -1.3rem; }
}
@media (max-width: 380px) {
  .symptom-page .hero-points { gap: 1.6rem 0.6rem; }
  .symptom-page .hero-point { width: 14.0rem; height: 14.0rem; padding: 1.0rem; }
}

/* =========================================
   2. MV直下オファー＆症状別ナビ
========================================= */
.symptom-page .sym-offer {
  padding: 4.0rem 0 6.0rem;
  background: #ffffff;
}
.symptom-page .sym-offer__price {
  max-width: 60.0rem; margin: 0 auto 4.0rem;
}
.symptom-page .sym-offer__inner {
  background: #fff;
  border: 2px solid var(--sp-main);
  border-radius: 14px;
  padding: 4.0rem 3.2rem;
  text-align: center;
  box-shadow: var(--sp-shadow-lg);
}
.symptom-page .sym-offer__lead {
  color: var(--sp-main); font-size: 1.7rem; font-weight: 700;
  margin: 0 0 0.8rem;
}
.symptom-page .sym-offer__menu {
  font-size: 1.9rem; font-weight: 700; color: var(--sp-title);
  border-bottom: 1px solid var(--sp-border);
  padding-bottom: 1.6rem; margin: 0 0 2.4rem;
}
.symptom-page .sym-offer__price-row {
  display: flex; justify-content: center; align-items: baseline; gap: 0.4rem;
  color: var(--sp-title);
}
.symptom-page .sym-offer__num {
  font-family: 'Montserrat Alternates', 'Montserrat', sans-serif;
  font-size: 5.6rem; font-weight: 700; color: var(--sp-main); line-height: 1;
}
.symptom-page .sym-offer__yen { font-size: 1.9rem; font-weight: 700; }
.symptom-page .sym-offer__tax { font-size: 1.3rem; color: var(--sp-brown-sub); margin-left: 0.6rem; }
.symptom-page .sym-offer__note {
  background: var(--sp-cream); padding: 1.4rem 1.6rem;
  border-radius: 14px; font-size: 1.3rem;
  margin-top: 2.4rem;
  text-align: center;
  line-height: 1.5;
}
.symptom-page .sym-offer__note p { margin: 0 0 0.4rem; }
.symptom-page .sym-offer__note p:last-child { margin-bottom: 0; }
.symptom-page .sym-offer__note a {
  color: var(--sp-main); text-decoration: underline;
  font-size: 1.6rem; font-weight: 900;
}

.symptom-page .nav-panel {
  background: #fff; border-radius: 14px;
  padding: 3.2rem;
  box-shadow: var(--sp-shadow-lg);
  border: 1px solid var(--sp-border);
}
.symptom-page .nav-panel__title { text-align: center; margin-bottom: 2.4rem; }
.symptom-page .nav-panel__title p {
  font-size: 1.9rem; font-weight: 700; color: var(--sp-title); margin: 0 0 0.4rem;
}
.symptom-page .nav-panel__title span {
  font-size: 1.3rem; color: var(--sp-brown-sub);
}
.symptom-page .nav-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem;
}
.symptom-page .nav-card {
  background: #fff; border: 1px solid var(--sp-border);
  border-radius: 14px; padding: 0; text-align: center;
  display: flex; flex-direction: column; align-items: stretch;
  transition: all 0.3s; box-shadow: var(--sp-shadow-card);
  text-decoration: none;
  overflow: hidden;
}
.symptom-page .nav-card:hover {
  border-color: var(--sp-main); background: var(--sp-cream);
  transform: translateY(-3px); box-shadow: var(--sp-shadow-soft);
}
.symptom-page .nav-card__image {
  width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sp-cream);
}
.symptom-page .nav-card__image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s;
}
.symptom-page .nav-card:hover .nav-card__image img { transform: scale(1.05); }
.symptom-page .nav-card span {
  font-weight: 700; color: var(--sp-title); font-size: 1.5rem;
  padding: 1.2rem 0.8rem; display: block;
  background: #fff;
}
.symptom-page .nav-card:hover span { background: var(--sp-cream); color: var(--sp-main); }
@media (max-width: 768px) {
  .symptom-page .nav-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .symptom-page .nav-panel { padding: 2.0rem; }
  .symptom-page .nav-card span { font-size: 1.3rem; padding: 1.0rem 0.6rem; }
}

/* =========================================
   3. お悩み (Trouble) — .pattern__inner2 と同じ bg_pattern02.png 背景
========================================= */
.symptom-page .sym-trouble {
  padding: 8.0rem 0;
  background-image: url(../img/common/bg_pattern02.png);
  background-repeat: repeat;
}
.symptom-page .problems-box {
  background: #fff; padding: 4.0rem; border-radius: 14px;
  border: 1px solid var(--sp-border); box-shadow: var(--sp-shadow-soft);
  max-width: 90.0rem; margin: 0 auto;
}
.symptom-page .problems-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 3.2rem;
}
.symptom-page .problem-item {
  background: var(--sp-cream); padding: 1.2rem 1.6rem; border-radius: 14px;
  border: 1px solid var(--sp-border); display: flex; align-items: flex-start; gap: 1.2rem;
}
.symptom-page .problem-icon {
  background: var(--sp-main); color: #fff; border-radius: 50%;
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0.4rem;
}
.symptom-page .problem-icon i { width: 1.6rem; height: 1.6rem; }
.symptom-page .problem-item p {
  font-weight: 500; font-size: 1.5rem; color: var(--sp-title); margin: 0.1rem 0 0;
}
.symptom-page .problems-box__pill {
  text-align: center; margin-top: 4.0rem;
}
.symptom-page .problems-box__pill span {
  display: inline-block;
  background: var(--sp-main);
  padding: 1.4rem 3.6rem;
  border-radius: 10px;
  font-weight: 700;
  border: 2px solid var(--sp-main);
  color: #fff;
  font-size: 2.8rem;
  letter-spacing: 0.1em;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .symptom-page .problems-box__pill span {
    font-size: 1.4rem;
    padding: 1.0rem 1.6rem;
    letter-spacing: 0;
    white-space: nowrap;
  }
}
@media (max-width: 380px) {
  .symptom-page .problems-box__pill span {
    font-size: 1.1rem;
    padding: 0.8rem 1.2rem;
  }
}
@media (max-width: 768px) {
  .symptom-page .sym-trouble { padding: 6.0rem 0; }
  .symptom-page .problems-box { padding: 2.0rem; }
  .symptom-page .problems-grid { grid-template-columns: 1fr; }
  .symptom-page .problem-item p { font-size: 1.3rem; }
}

/* =========================================
   4. Google レビュー (g-voice 既存セクション流用)
========================================= */
.symptom-page .sym-reviews { padding: 8.0rem 0; background: #fff; margin-top: 0; }
.symptom-page .sym-reviews .grw-cards { margin-top: 2.4rem; }
@media (max-width: 768px) {
  .symptom-page .sym-reviews { padding: 6.0rem 0; }
}

/* =========================================
   5. なぜ繰り返してしまうのか (Why?)
========================================= */
.symptom-page .sym-why { padding: 8.0rem 0; }
.symptom-page .reason-box {
  background: #fff; border: 1px solid var(--sp-border);
  border-radius: 14px; padding: 3.2rem;
  text-align: center; margin: 0 auto 4.0rem;
  box-shadow: var(--sp-shadow-soft);
  max-width: 120rem;
}
.symptom-page .reason-box p { font-size: 1.5rem; line-height: 1.9; margin: 0; }
.symptom-page .reason-box em {
  font-style: normal; font-weight: 700; color: var(--sp-main);
  border-bottom: 1px solid var(--sp-border);
}
.symptom-page .reason-grid { margin-top: 0; }
.symptom-page .reason-card {
  background: #fff; border: 1px solid var(--sp-border);
  border-radius: 14px; padding: 3.2rem 2.4rem;
  text-align: center; box-shadow: var(--sp-shadow-card);
}
.symptom-page .reason-icon {
  width: 6.4rem; height: 6.4rem; background: var(--sp-cream);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.6rem;
}
.symptom-page .reason-icon i,
.symptom-page .reason-icon svg { width: 4.0rem !important; height: 4.0rem !important; color: var(--sp-main); }
.symptom-page .reason-card h3 {
  font-size: 1.7rem; font-weight: 700; color: var(--sp-title);
  margin-bottom: 1.2rem;
}
.symptom-page .reason-card p {
  font-size: 1.35rem; line-height: 1.8; text-align: left;
  margin: 0 0 1.6rem;
}
.symptom-page .reason-card__img {
  display: block; width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  margin-top: auto;
}
@media (max-width: 768px) { .symptom-page .sym-why { padding: 6.0rem 0; } }

/* =========================================
   6. 症状別詳細 (Symptom Detail)
========================================= */
.symptom-page .sym-symptoms { padding: 8.0rem 0; background: #ffffff; }
.symptom-page .symptom-card {
  background: #fff; border-radius: 14px; border: 1px solid var(--sp-border);
  overflow: hidden; margin-bottom: 4.8rem;
  box-shadow: var(--sp-shadow-soft);
}
.symptom-page .symptom-card--last { margin-bottom: 0; }
.symptom-page .symptom-card__head {
  background: var(--sp-beige); padding: 1.6rem 2.4rem;
  border-bottom: 1px solid var(--sp-border);
  display: flex; align-items: center; gap: 1.2rem;
}
.symptom-page .symptom-card__icon {
  background: var(--sp-main); color: #fff;
  width: 5.4rem; height: 5.4rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.symptom-page .symptom-card__icon i { width: 2.4rem; height: 2.4rem; }
.symptom-page .symptom-card__icon img {
  width: 4.6rem; height: 4.6rem;
  display: block;
  object-fit: contain;
}
.symptom-page .symptom-card__head h3 {
  font-size: 2.2rem; font-weight: 700; color: var(--sp-title); margin: 0;
}
.symptom-page .symptom-card__body {
  padding: 3.2rem; display: flex; gap: 3.2rem;
}
.symptom-page .symptom-card__body--reverse { flex-direction: row-reverse; }
.symptom-page .symptom-card__text { flex: 1; }
.symptom-page .symptom-card__text > p { font-size: 1.5rem; line-height: 1.9; margin: 0 0 1.6rem; }
.symptom-page .symptom-card__image { flex: 1; }
.symptom-page .symptom-card__img {
  display: block; width: 100%; height: 100%;
  min-height: 26.0rem; max-height: 38.0rem;
  object-fit: cover;
  border-radius: 14px;
}
.symptom-page .trouble-list {
  background: var(--sp-cream); border: 1px solid var(--sp-border);
  border-radius: 14px; padding: 1.8rem 2.0rem; margin: 2.0rem 0;
}
.symptom-page .trouble-list__ttl {
  font-weight: 700; color: var(--sp-title);
  display: flex; align-items: center; gap: 0.8rem;
  font-size: 1.5rem; margin: 0;
}
.symptom-page .trouble-list__ttl i { width: 1.8rem; height: 1.8rem; color: var(--sp-main); }
.symptom-page .trouble-list ul {
  margin: 0.8rem 0 0 2.0rem; padding: 0;
  list-style-type: disc; font-size: 1.35rem;
}
.symptom-page .trouble-list ul li { margin-bottom: 0.4rem; line-height: 1.7; }
.symptom-page .policy-label {
  font-weight: 700; color: var(--sp-title);
  border-left: 4px solid var(--sp-main);
  padding-left: 1.2rem; margin: 0 0 0.8rem;
  font-size: 1.7rem;
}
.symptom-page .alert-box {
  background: #fdf5f3; border: 1px solid #f8c9c4;
  border-radius: 14px; padding: 1.2rem;
  display: flex; gap: 0.8rem; margin-top: 1.6rem;
}
.symptom-page .alert-box i { color: #ef4444; width: 1.6rem; height: 1.6rem; flex-shrink: 0; }
.symptom-page .alert-box p {
  margin: 0; font-size: 1.2rem; color: #b91c1c; line-height: 1.6;
}
@media (max-width: 768px) {
  .symptom-page .sym-symptoms { padding: 6.0rem 0; }
  .symptom-page .symptom-card__body,
  .symptom-page .symptom-card__body--reverse {
    flex-direction: column; padding: 2.4rem; gap: 2.4rem;
  }
  .symptom-page .symptom-card__head h3 { font-size: 1.8rem; }
}

/* =========================================
   7. CTA Banner (中段)
   sym-final-cta クラスに統一(下段最終CTAと同レイアウト・デザイン)
========================================= */

/* =========================================
   8. 当院3つのポイント (.grid-col03 -merit 互換)
========================================= */
.symptom-page .sym-points { padding: 8.0rem 0 6.0rem; }
.symptom-page .point-grid { margin-top: 4.0rem; }
.symptom-page .point-card {
  background: #fff; border: 1px solid var(--sp-border);
  border-radius: 14px; padding: 6.8rem 2.8rem 3.0rem;
  text-align: center; position: relative;
  box-shadow: var(--sp-shadow-soft);
}
.symptom-page .point-badge {
  position: absolute; top: -2.6rem; left: 50%; transform: translateX(-50%);
  background: var(--sp-main); color: #fff;
  font-family: 'Montserrat Alternates', 'Montserrat', sans-serif;
  font-weight: 700;
  padding: 0.6rem 2.0rem 0.5rem; border-radius: 50px;
  border: 4px solid #fff; letter-spacing: 0.05em;
  display: inline-flex; align-items: baseline; gap: 0.6rem;
  line-height: 1;
}
.symptom-page .point-badge__label {
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  opacity: 0.92;
}
.symptom-page .point-badge__num {
  font-size: 2.6rem;
  font-weight: 700;
}
.symptom-page .point-icon {
  width: 6.4rem; height: 6.4rem; background: var(--sp-cream);
  border: 1px solid var(--sp-border);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.6rem;
}
.symptom-page .point-icon i,
.symptom-page .point-icon svg { width: 4.0rem !important; height: 4.0rem !important; color: var(--sp-main); }
.symptom-page .point-card h3 {
  font-size: 1.7rem; font-weight: 700; color: var(--sp-title);
  border-bottom: 1px solid var(--sp-border);
  padding-bottom: 0.8rem; margin: 0 auto 1.6rem; display: inline-block;
}
.symptom-page .point-card p {
  font-size: 1.35rem; text-align: left; line-height: 1.8; margin: 0;
}
@media (max-width: 768px) { .symptom-page .sym-points { padding: 6.0rem 0 4.0rem; } }

/* =========================================
   9. Comparison
========================================= */
.symptom-page .sym-compare {
  padding: 8.0rem 0; background: #fff;
  border-top: 1px solid var(--sp-border);
  border-bottom: 1px solid var(--sp-border);
}
.symptom-page .compare-table {
  background: #fff; border-radius: 14px; border: 1px solid var(--sp-border);
  overflow: hidden; box-shadow: var(--sp-shadow-soft);
  max-width: 78.0rem; margin: 4.0rem auto 0;
}
.symptom-page .compare-row {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--sp-border);
}
.symptom-page .compare-row:last-child { border-bottom: none; }
.symptom-page .compare-th {
  padding: 1.6rem; text-align: center;
  font-weight: 700; font-size: 1.5rem;
}
.symptom-page .compare-th.left {
  border-right: 1px solid var(--sp-border);
  color: var(--sp-brown-sub);
  background: var(--sp-beige);
}
.symptom-page .compare-th.right {
  color: var(--sp-title);
  background: rgba(192, 98, 35, 0.08);
  line-height: 1.4;
}
.symptom-page .compare-th.right span { color: var(--sp-main); font-size: 1.15rem; }
.symptom-page .compare-td {
  padding: 1.6rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.symptom-page .compare-td.left {
  border-right: 1px solid var(--sp-border);
  color: var(--sp-brown-sub);
}
.symptom-page .compare-td.left i { color: var(--sp-border); width: 2.0rem; height: 2.0rem; margin-top: 0.6rem; }
.symptom-page .compare-td.right {
  background: rgba(192, 98, 35, 0.03);
  color: var(--sp-title); font-weight: 700;
}
.symptom-page .icon-check {
  width: 2.4rem; height: 2.4rem; background: var(--sp-main); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin-top: 0.6rem;
}
.symptom-page .icon-check i { width: 1.6rem; height: 1.6rem; }
@media (max-width: 768px) { .symptom-page .sym-compare { padding: 6.0rem 0; } }

/* =========================================
   10. 選ばれる理由 (.features+.feature-card 互換)
========================================= */
.symptom-page .sym-reasons { padding: 8.0rem 0 6.0rem; }
.symptom-page .sym-reasons .feature-image img {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: 14px;
}
.symptom-page .sym-reasons .feature-number {
  position: absolute;
  top: -3rem;
  left: -3rem;
  width: 82px;
  height: 82px;
  border: 1px solid #6f584a;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.32px;
  line-height: 21px;
  color: #6f584a;
  background: #ffffff70;
  font-family: 'Montserrat Alternates', 'Montserrat', sans-serif;
}
@media (max-width: 768px) {
  .symptom-page .sym-reasons { padding: 6.0rem 0 4.0rem; }
  .symptom-page .sym-reasons .feature-number {
    top: -1.6rem; left: -1.6rem;
    width: 64px; height: 64px;
  }
}

/* =========================================
   11. Benefits
========================================= */
.symptom-page .sym-benefits {
  padding: 6.0rem 0;
  background: #fff;
  border-top: 1px solid var(--sp-border);
}
.symptom-page .benefit-grid { margin-top: 3.2rem; }
.symptom-page .benefit-card {
  background: #fff; padding: 3.2rem 2.0rem 2.8rem;
  border-radius: 14px; border: 1px solid var(--sp-border);
  display: flex; flex-direction: column; align-items: center;
  gap: 1.2rem; box-shadow: var(--sp-shadow-soft);
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.symptom-page .benefit-card:hover { transform: translateY(-3px); box-shadow: var(--sp-shadow-lg); }
.symptom-page .benefit-card__icon {
  width: 7.6rem; height: 7.6rem;
  background: var(--sp-cream); border: 1px solid var(--sp-border);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.4rem;
}
.symptom-page .benefit-card__icon i,
.symptom-page .benefit-card__icon svg { color: var(--sp-main); width: 4.0rem !important; height: 4.0rem !important; }
.symptom-page .benefit-card h3 {
  font-size: 1.7rem; font-weight: 700; color: var(--sp-title); margin: 0;
  border-bottom: 1px solid var(--sp-border); padding-bottom: 0.8rem;
  display: inline-block; line-height: 1.4;
}
.symptom-page .benefit-card p {
  font-size: 1.3rem; line-height: 1.8; color: var(--sp-text);
  text-align: left; margin: 0;
}
@media (max-width: 768px) {
  .symptom-page .benefit-card { padding: 2.4rem 1.6rem 2.0rem; }
  .symptom-page .benefit-card__icon { width: 6.4rem; height: 6.4rem; }
  .symptom-page .benefit-card__icon i { width: 3.0rem; height: 3.0rem; }
  .symptom-page .benefit-card h3 { font-size: 1.5rem; }
  .symptom-page .benefit-card p { font-size: 1.25rem; }
}

/* =========================================
   12. Flow (page-service.php と同じ .flow / .flow_design01 / .flow01 を流用、
            symptom.css 側では追加スタイル不要)
========================================= */

/* =========================================
   13. Pricing
========================================= */
.symptom-page .sym-pricing {
  padding: 8.0rem 0; background: var(--sp-cream);
  border-top: 1px solid var(--sp-border);
}
@media (max-width: 768px) { .symptom-page .sym-pricing { padding: 6.0rem 0; } }

/* =========================================
   14. Testimonials (Voices)
========================================= */
.symptom-page .sym-voices { padding: 8.0rem 0; }
.symptom-page .testi-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem;
  margin-top: 2.4rem;
}
.symptom-page .testi-card {
  background: #fff; border: 1px solid var(--sp-border);
  border-radius: 14px; padding: 2.4rem;
  box-shadow: var(--sp-shadow-card);
}
.symptom-page .testi-card__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.6rem;
}
.symptom-page .testi-card .stars { display: flex; color: #eab308; gap: 0.2rem; }
.symptom-page .testi-card .stars i,
.symptom-page .testi-card .stars svg {
  width: 2.2rem !important; height: 2.2rem !important;
  fill: currentColor;
}
/* tag は枠を外し、アイコン部分を symptom-card__icon と同じテラコッタ円に */
.symptom-page .testi-card .tag {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 1.6rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 1.0rem;
  color: var(--sp-title);
}
.symptom-page .testi-card .tag i,
.symptom-page .testi-card .tag svg,
.symptom-page .testi-card .tag img {
  width: 3.6rem !important; height: 3.6rem !important;
  background: var(--sp-main);
  color: #fff !important;
  border-radius: 50%;
  padding: 0.6rem;
  box-sizing: border-box;
  flex-shrink: 0;
  object-fit: contain;
}
.symptom-page .testi-card h3 {
  font-weight: 700; font-size: 1.6rem; color: var(--sp-title);
  margin: 0 0 1.2rem; line-height: 1.45;
}
.symptom-page .testi-card > p {
  font-size: 1.35rem; line-height: 1.8; margin: 0 0 1.6rem;
}
.symptom-page .testi-card__meta {
  text-align: right; font-size: 1.15rem;
  color: var(--sp-brown-sub); margin: 0;
}
@media (max-width: 768px) {
  .symptom-page .sym-voices { padding: 6.0rem 0; }
  .symptom-page .testi-grid { grid-template-columns: 1fr; }
}

/* =========================================
   15. FAQ (page-service.php と同じ .faq / .accordion / .js-accordion-title を流用、
            symptom.css 側では追加スタイル不要)
========================================= */

/* =========================================
   16. Final CTA
========================================= */
.symptom-page .sym-final-cta {
  padding: 8.0rem 0;
  background: var(--sp-main);
  color: #fff;
}
.symptom-page .sym-final-cta .c-heading01,
.symptom-page .sym-final-cta .c-heading01 span {
  color: #fff !important;
}
.symptom-page .sym-final-cta .c-heading01 span { opacity: 0.85; }
.symptom-page .sym-final-cta p {
  color: #fff; font-size: 1.5rem; line-height: 1.9;
  margin: 2.0rem auto 3.2rem; max-width: 78.0rem;
  text-align: center;
}
/* Final CTA ボタン群: 大型化＋強い影＋ホバーリフトで目立たせる */
.symptom-page .sym-final-cta .sym-cta {
  gap: 1.8rem;
  margin-top: 4.0rem;
}
.symptom-page .sym-final-cta .btn {
  padding: 1.9rem 3.6rem !important;
  font-size: 1.7rem !important;
  min-width: 26rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  border: 2px solid #fff;
  box-shadow: none;
  transition: transform 0.3s ease, background-color 0.3s, color 0.3s;
  position: relative;
}
.symptom-page .sym-final-cta .btn:hover {
  transform: translateY(-4px);
  opacity: 1;
}
.symptom-page .sym-final-cta .btn svg,
.symptom-page .sym-final-cta .btn i {
  width: 2.0rem !important; height: 2.0rem !important;
}

/* WEB予約: メインCTA - 白塗り＋テラコッタ太字 */
.symptom-page .sym-final-cta .btn:not(.-line):not(.-tel) {
  background: #fff;
  color: var(--sp-main);
  border-color: #fff;
}
.symptom-page .sym-final-cta .btn:not(.-line):not(.-tel):hover {
  background: #fff;
  color: var(--sp-main);
}

/* LINE: 鮮やかな緑 */
.symptom-page .sym-final-cta .btn.-line {
  background: var(--sp-line);
  border-color: #fff;
  color: #fff;
}
.symptom-page .sym-final-cta .btn.-line:hover {
  background: #05b04b;
}

/* TEL: 透明＋白枠＋ホバー時うっすら塗り */
.symptom-page .sym-final-cta__tel.btn.-tel {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
  color: #fff;
  font-family: 'Montserrat Alternates', 'Montserrat', sans-serif;
  letter-spacing: 0.06em;
}
.symptom-page .sym-final-cta__tel.btn.-tel:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

@media (max-width: 768px) {
  .symptom-page .sym-final-cta .btn {
    padding: 1.6rem 2.4rem !important;
    font-size: 1.5rem !important;
    min-width: 0;
    width: 100%;
  }
  .symptom-page .sym-final-cta .sym-cta { gap: 1.2rem; }
}
@media (max-width: 768px) {
  .symptom-page .sym-final-cta { padding: 6.0rem 0; }
  .symptom-page .sym-final-cta p { font-size: 4vw; }
}

/* =========================================
   グローバル微調整 (.c-heading01 を本ページで読みやすく)
========================================= */
.symptom-page .c-heading01 {
  margin: 0 0 2.8rem;
}
.symptom-page .c-heading01 span {
  font-family: 'Montserrat Alternates', 'Montserrat', sans-serif;
  letter-spacing: 0.08em;
}
@media (max-width: 768px) {
  .symptom-page .c-heading01 { font-size: 5.5vw; margin-bottom: 2.0rem; }
  .symptom-page .c-heading01 span { font-size: 3.0vw; margin-top: 0.8vw; }
  /* SP時はc-heading01内の<br>を無効化して自然な折返しに */
  .symptom-page .c-heading01 br { display: none; }
}