/* ============================
   がん見直しページ専用 CSS
   ============================ */

/* 左カラム（flow-chart） */
#sc-left.gan-page .flow-chart {
  margin-top: 24px;
  padding: 16px;
  background: #f8f8f8;
  border-radius: 12px;
}

#sc-left.gan-page .flow-chart h4 {
  font-size: 1.4rem;
  margin-bottom: 16px;
  color: #2e5a4f;
  font-weight: bold;
  text-align: center;
}

#sc-left.gan-page .flow-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

#sc-left.gan-page .flow-box {
  border: 2px solid #2e5a4f;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 1.2rem;
  background: #fff;
  min-width: 220px;
  text-align: center;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#sc-left.gan-page .flow-box.emphasis {
  background: #2e5a4f;
  color: #fff;
  font-weight: bold;
  font-size: 1.25rem;
  line-height: 1.5;
  padding: 14px 18px;
  min-height: 95px;
}

#sc-left.gan-page .flow-arrow {
  font-size: 1.6rem;
  color: #2e5a4f;
  font-weight: bold;
}

#sc-left.gan-page .small-note {
  font-size: 1rem;
  color: #666;
  display: block;
  margin-top: 4px;
}

#sc-left.gan-page {
  overflow: hidden;
}

.gan-check-illust {
  width: 150px;
  display: block;
  margin: 12px auto 0;
}

/* ============================
   CASE①〜③：3ボックス横並び
   ============================ */

.review-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 40px 0;
  flex-wrap: nowrap;
}

.review-symbol {
  font-size: 2.4rem;
  font-weight: bold;
  color: #6f7d78;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  min-width: 40px;
}

/* ============================
   各ボックス
   ============================ */

.review-box {
  flex: 1;
  background: #ffffff;
  border: 1px solid #e5e1da;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.06);
}

.review-box h4 {
  color: #2e5a4f;
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 14px;
}

/* ============================
   保障リスト
   ============================ */

.review-box ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}

.review-box ul li {
  background: #faf7f2;
  border: 1px solid #e5dfd6;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 1.05rem;
  color: #4a4a4a;
  text-align: center;
}

/* 追加保障（ミント色） */
.review-box ul li.added {
  background: #e9f7f3;
  border: 1px solid #b7e2d7;
  color: #2e5a4f;
  font-weight: bold;
}

/* 古い保障（オレンジ） */
.review-box ul li.old {
  background: #fff3e6;
  border: 1px solid #f2d3b5;
  color: #a65f2f;
  font-weight: bold;
}

/* ============================
   CASEタイトル＋吹き出し
   ============================ */

.case-title-wrap {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 20px;
}

.case-title {
  border: 2px solid #006400;
  padding: 6px 12px;
  border-radius: 6px;
  display: inline-block;
  font-size: 1.5em;
  font-weight: bold;
  color: #006400;
}

.case-explain-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.case-balloon {
  background: #f4f8f7;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 1rem;
  color: #2e5a4f;
  position: relative;
  line-height: 1.45;
}

.case-balloon::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 10px;
  border: 7px solid transparent;
  border-right-color: #f4f8f7;
}

/* ============================
   A/B/C プラン比較
   ============================ */

.plan-compare {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.plan-card {
  flex: 1;
  border-radius: 8px;
  padding: 14px 10px;
  border: 1px solid #ddd;
  text-align: center;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-card h5 {
  font-size: 1.05rem;
  margin: 0;
  color: #2e5a4f;
  font-weight: bold;
}

.plan-card.plan-a {
  background: #e8f2fc;
  border: 1px solid #c9dff7;
}

.plan-card.plan-b {
  background: #f3ecff;
  border: 1px solid #dcd0f7;
}

.plan-card.plan-c {
  background: #fff8d8;
  border: 1px solid #f0e3b2;
}

/* ============================
   A社選択時の強調（selected-a）
   ============================ */

.review-box.selected-a ul li.added * {
  background: #e8f2fc !important;
  border-color: #c9dff7 !important;
}

.review-box.selected-a ul li.added {
  background: #e8f2fc !important;
  border-color: #c9dff7 !important;
  color: #2e5a4f !important;
  font-weight: bold !important;
  box-shadow: none !important;
}

/* ============================
   スマホ対応
   ============================ */

@media (max-width: 768px) {
  .review-flow {
    flex-wrap: wrap;
  }
  .review-symbol {
    font-size: 2rem;
    margin: 8px auto;
  }
  .case-title-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

.plan-label {
  display: inline-block;
  background: #e8f2fc;        /* A社カラーの薄いブルー */
  border: 1px solid #c9dff7;  /* A社カラーの枠 */
  color: #2e5a4f;             /* 深緑で統一 */
  font-size: 0.85rem;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
}


.plan-company {
  display: block;              /* ← 強制的に1行使う */
  font-weight: bold;
  color: #2e5a4f;
  margin-bottom: 2px;
  font-size: 0.95rem;
}

.plan-title {
  display: block;              /* ← これで必ず2行目に来る */
  font-size: 1.05rem;
  line-height: 1.4;
  color: #2e5a4f;
}


.plan-company,
.plan-title {
  display: block;   /* ← これが最重要！1行ずつ使う */
  width: 100%;      /* ← 横幅いっぱい使うので折り返されない */
  white-space: nowrap; /* ← 途中で勝手に折り返させない */
}


.decision-text {
  display: block;
  font-size: 0.9rem;
  margin-top: 4px;
  color: #2e5a4f;
}

.review-symbol {
  display: flex;
  flex-direction: column; /* ← これが縦並びの決め手 */
  align-items: center;
  justify-content: center;
}

.decision-text {
  font-size: 0.9rem;
  margin-top: 4px;
  color: #2e5a4f;
  font-weight: bold;
  text-align: center; /* ← 改行しても中央揃え */
}


.note-small {
  font-size: 0.85rem;
  color: #666;
  display: block;
  margin-top: 4px;
  line-height: 1.4;
}

.case-chara {
  width: 70px !important;   /* ← 好きなサイズに調整してOK */
  height: auto !important;
  display: block;
}

.case-explain-wrap {
  display: flex;
  align-items: flex-start; /* ← これが決め手 */
}

.case-chara {
  width: 70px;
  height: auto;
  flex-shrink: 0; /* ← 画像が伸びたり縮んだりしない */
}