/* ========================================
   TOP PAGE - PROBLEM & KEY POINTS
   ======================================== */

/* ── PROBLEM セクション ────────────────── */
.problem {
  background: var(--clr-primary-lt);
  padding: var(--space-xl) 0;
}

.problem-title {
  text-align: center;
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  color: var(--clr-primary);
  font-weight: 700;
  margin-bottom: var(--space-lg);
}

.problem-content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xl);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-lg);
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  position: relative;
  text-align: left; /* 左揃えを明示 */
}

/* 点線ボーダー（CSSで作成）*/
.problem-content::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 2px dotted var(--clr-primary);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.problem-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.problem-item {
  display: flex;
  gap: 12px;
  font-size: 1.05rem;
  line-height: 1.7;
  align-items: flex-start;
  text-align: left; /* 左揃えを明示 */
}

.problem-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid var(--clr-primary);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 4px;
}

.problem-item-text {
  flex: 1;
  text-align: left; /* 左揃えを明示 */
}

.problem-illus {
  width: 240px;
  flex-shrink: 0;
}

.problem-illus img {
  width: 100%;
  height: auto;
}

.problem-solution {
  text-align: center;
  margin-top: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.problem-solution-logo {
  width: 140px;
}

.problem-solution-text {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  color: var(--clr-primary);
  font-weight: 700;
  line-height: 1.6;
}

/* ── KEY POINTS セクション ────────────────── */
.key-points {
  padding: var(--space-2xl) 0;
  background: var(--clr-white);
}

.key-points-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.key-point-card {
  background: var(--clr-primary-lt);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  height: 100%; /* 天地を揃える */
  text-align: center; /* カード全体を中央揃え */
}

.key-point-number {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--clr-primary);
  margin-bottom: 8px;
}

.key-point-num {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 3.5rem;
  color: var(--clr-primary);
  line-height: 1;
  margin-bottom: 16px;
}

.key-point-title {
  font-size: 1.3rem;
  color: var(--clr-primary); /* 青色に変更 */
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.5;
}

.key-point-desc {
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 20px;
  text-align: left; /* 本文は左揃え */
}

.key-point-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.key-point-feature {
  background: var(--clr-white);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: left; /* 左揃え */
}

.key-point-illus {
  margin: auto 0 20px 0; /* 下にイラスト、上を自動で埋める */
  text-align: center;
}

.key-point-illus img {
  width: 100%;
  max-width: 280px;
  height: auto;
}

.key-point-card .btn {
  margin: 0 auto; /* ボタンを中央配置 */
}

.key-point-cta {
  text-align: center;
}

/* ── FLOW セクション ────────────────────── */
.flow {
  padding: var(--space-2xl) 0;
  background: #def0ff; /* 背景色を追加 */
}

.flow-steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}

.flow-step {
  background: var(--clr-white);
  border: 3px dotted var(--clr-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: var(--space-lg);
  align-items: start; /* 上揃えに変更 */
  position: relative;
}

.flow-step-number-block {
  text-align: center;
}

.flow-step-number-block h3 {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--clr-primary);
  margin-bottom: 8px; /* STEPと数字の間隔を確保 */
}

.flow-step-number {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 3rem;
  color: var(--clr-primary);
  line-height: 1;
}

.flow-step-content {
  /* 見出し+本文のブロック */
}

.flow-step-title {
  font-size: 1.5rem;
  color: var(--clr-primary);
  font-weight: 700;
  margin-bottom: 16px;
}

.flow-step-desc {
  font-size: 1rem;
  line-height: 1.8;
}

.flow-step-illus {
  width: 200px;
  flex-shrink: 0;
}

.flow-step-illus img {
  width: 100%;
  height: auto;
}

/* 矢印（▼）CSS図形 */
.flow-arrow {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 16px solid var(--clr-primary);
  margin: -16px auto;
}

/* STEP 01のCTAボタン */
.flow-step-cta {
  margin-top: 16px;
  text-align: center;
}

.flow-step-cta .btn {
  margin: 0 auto;
}

/* ── WHY CHOOSE US セクション ────────────── */
.why-choose-us {
  padding: var(--space-2xl) 0;
  background: var(--clr-white);
}

.why-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.why-card {
  background: #fef5f5;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.why-card-number {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: #e5989b;
  margin-bottom: 8px; /* Reasonと数字の間隔を確保 */
}

.why-card-num {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 3.5rem;
  color: #e5989b;
  line-height: 1;
  margin-bottom: 16px;
}

.why-card-title {
  font-size: 1.2rem;
  color: var(--clr-primary);
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.5;
}

.why-card-stat {
  margin-bottom: 16px;
}

.why-card-stat-label {
  font-size: 0.9rem;
  color: var(--clr-text);
  margin-bottom: 8px;
}

.why-card-stat-value {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 3rem;
  color: var(--clr-primary);
  line-height: 1;
}

.why-card-stat-unit {
  font-size: 1.1rem;
  color: var(--clr-primary);
  margin-left: 8px;
}

.why-card-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  line-height: 1.7;
}

.why-card-illus {
  margin: auto 0 0 0;
  text-align: center;
}

.why-card-illus img {
  width: 100%;
  max-width: 280px;
  height: auto;
}

.why-cta {
  text-align: center;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── レスポンシブ ────────────────────────── */
@media (max-width: 900px) {
  .problem-content {
    grid-template-columns: 1fr;
  }

  .problem-illus {
    order: -1;
    margin: 0 auto;
  }

  .key-points-cards {
    grid-template-columns: 1fr;
  }

  /* スマホ/タブレット版レイアウト */
  .key-point-card {
    display: grid;
    grid-template-columns: 1fr 200px;
    grid-template-rows: auto auto auto auto auto auto;
    gap: 16px 24px;
    text-align: left;
  }

  .key-point-number {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: -12px; /* Featuresと数字の間を20px詰める（元8px + 追加12px = 20px）*/
  }

  .key-point-num {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 0; /* 元16pxのmargin-bottomを削除 */
  }

  .key-point-title {
    grid-column: 1 / 2; /* イラストと重ならないように */
    grid-row: 3;
    text-align: left;
  }

  .key-point-desc {
    grid-column: 1 / 2; /* イラストと重ならないように */
    grid-row: 4;
  }

  .key-point-features {
    grid-column: 1 / -1; /* 【3】赤い線まで広げる */
    grid-row: 5;
  }

  .key-point-illus {
    grid-column: 2;
    grid-row: 3 / 5; /* 【2】見出しの上部に合わせる（row 3から4まで）*/
    margin: 0;
    display: flex;
    align-items: flex-start; /* 上揃え */
  }

  .key-point-illus img {
    max-width: 200px;
  }

  .key-point-card .btn {
    grid-column: 1 / -1;
    grid-row: 6;
  }

  /* Flow - タブレット版もPC版と同じ3列レイアウト */
  .flow-step {
    grid-template-columns: 100px 1fr 180px;
    gap: var(--space-md);
  }

  .flow-step-number-block {
    grid-row: auto;
  }

  .flow-step-content {
    grid-column: 2;
  }

  .flow-step-illus {
    grid-column: 3;
    grid-row: 1;
    width: 180px;
    margin: 0;
    align-self: start;
  }

  .flow-step-cta {
    grid-column: 2;
  }

  /* Why Choose Us - タブレット版3列レイアウト */
  .why-cards {
    grid-template-columns: 1fr;
  }

  .why-card {
    display: grid;
    grid-template-columns: 1fr 1fr 180px;
    grid-template-rows: auto auto auto auto auto auto;
    gap: 16px 24px;
  }

  .why-card-number {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: -12px; /* スマホ版・タブレット版では詰める */
  }

  .why-card-num {
    grid-column: 1 / -1;
    text-align: center;
  }

  .why-card-title {
    grid-column: 1;
    grid-row: 3;
    text-align: left;
  }

  /* 最初のstatブロック */
  .why-card-stat:first-of-type {
    grid-column: 2;
    grid-row: 3;
  }

  /* 2番目のstatブロック（Card 02用）*/
  .why-card-stat:nth-of-type(2) {
    grid-column: 2;
    grid-row: 4;
  }

  .why-card-features {
    grid-column: 2;
    grid-row: 5;
  }

  .why-card-illus {
    grid-column: 3;
    grid-row: 3 / 6;
    margin: 0;
    display: flex;
    align-items: flex-start;
  }

  .why-card-illus img {
    max-width: 180px;
  }

  .why-cta {
    flex-direction: row;
    justify-content: center;
  }
}

/* ── PLAN SUMMARY セクション ────────────── */
.plan-summary-intro {
  background: #f4c2c2;
  padding: var(--space-2xl) 0 calc(var(--space-2xl) + 545px); /* 250px + 295px = 545px */
  text-align: center;
}

.plan-summary-intro .section-title {
  color: var(--clr-white);
  margin-bottom: 20px; /* デフォルトの80pxから75%削減 */
}

.plan-summary-intro .section-subtitle {
  color: var(--clr-text);
  font-weight: 700;
  margin-bottom: 12px; /* var(--space-lg)の25%（48px → 12px）*/
}

/* ふわふわスライダー */
.plan-fuwafuwa-slider {
  max-width: 500px;
  margin: 0 auto var(--space-lg);
}

.plan-fuwafuwa-slider .morphing-shape {
  width: 500px;
  height: 500px;
  margin: 0 auto;
}

.plan-fuwafuwa-slider img {
  width: 100%;
  height: auto;
  display: block;
}

.plan-summary-speech {
  max-width: 700px;
  margin: 0 auto var(--space-lg);
  background: var(--clr-white);
  padding: var(--space-lg);
  border-radius: 20px;
  position: relative;
}

.plan-summary-speech::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 18px solid var(--clr-white);
}

.plan-summary-speech p {
  line-height: 1.8;
  font-weight: 700;
}

.plan-summary-illus {
  max-width: 400px;
  margin: 0 auto;
  position: relative;
  z-index: 2; /* イラストを前面に */
}

.plan-summary-illus img {
  width: 100%;
  height: auto;
}

.plan-summary-index-title {
  text-align: center;
  font-size: 1.5rem;
  color: #e5989b;
  font-weight: 700;
  margin-bottom: var(--space-lg);
}

.plan-summary-index {
  background: #fef5f5;
  padding: var(--space-xl) 0 var(--space-2xl);
  margin-top: -860px; /* -565px - 295px = -860px（境界線を295px上げる）*/
  padding-top: calc(var(--space-xl) + 240px); /* イラストの下40pxにタイトルを配置（80px + 240px = 320px）*/
}

.plan-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 800px;
  margin: 0 auto var(--space-lg);
}

.plan-card {
  background: var(--clr-white);
  border: 2px solid #e5989b;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: center;
}

.plan-card .btn {
  justify-self: center; /* ボタンを中央配置 */
}

.plan-card-title {
  font-size: 1.4rem;
  color: #e5989b;
  font-weight: 700;
  margin-bottom: 12px;
}

.plan-card-desc {
  font-size: 1rem;
  margin-bottom: 12px;
}

.plan-card-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: #e5989b;
  margin-bottom: 12px;
}

.plan-card-price {
  font-size: 0.9rem;
  color: var(--clr-text);
}

.plan-card-price-value {
  font-size: 1.3rem;
  color: #e5989b;
  font-weight: 700;
  font-family: var(--font-en);
}

.plan-summary-cta {
  text-align: center;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── FAQ セクション ────────────────────── */
.faq {
  padding: var(--space-2xl) 0;
  background: var(--clr-white);
}

.faq-illus {
  max-width: 200px;
  margin: 0 auto var(--space-lg);
}

.faq-illus img {
  width: 100%;
  height: auto;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  border: 3px dotted var(--clr-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-question {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--clr-white);
  cursor: pointer;
  transition: background var(--dur-fast);
}

.faq-question:hover {
  background: var(--clr-bg);
}

.faq-q-icon {
  width: 40px;
  height: 40px;
  background: var(--clr-primary);
  color: var(--clr-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.faq-q-text {
  flex: 1;
  font-weight: 700;
  font-size: 1.05rem;
}

.faq-toggle {
  width: 32px;
  height: 32px;
  border: 2px solid var(--clr-primary);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--clr-primary);
  flex-shrink: 0;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-mid) var(--ease-out);
}

.faq-item.open .faq-answer {
  max-height: 500px;
}

.faq-item.open .faq-toggle::before {
  content: '−';
}

.faq-toggle::before {
  content: '+';
}

.faq-answer-content {
  display: flex;
  gap: 16px;
  padding: 20px 24px;
  background: var(--clr-bg);
}

.faq-a-icon {
  width: 40px;
  height: 40px;
  background: #b8e0d2;
  color: var(--clr-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.faq-a-text {
  flex: 1;
  line-height: 1.8;
}

.faq-cta {
  text-align: center;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── COMPANY セクション ────────────────── */
.company {
  padding: var(--space-2xl) 0 calc(var(--space-2xl) + 60px); /* 下部パディングを増やす */
  background: var(--clr-primary-lt);
  text-align: center;
}

.company-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--clr-primary);
  font-weight: 700;
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

.company-desc {
  max-width: 800px;
  margin: 0 auto var(--space-xl);
  font-size: 1.1rem;
  line-height: 2;
}

.company-logo {
  max-width: 320px; /* 400px × 80% = 320px */
  margin: 0 auto var(--space-lg);
}

.company-logo img {
  width: 100%;
  height: auto;
}

/* ── FINAL CTA セクション ────────────────── */
.final-cta {
  background: var(--clr-primary);
  padding: 0;
  position: relative;
}

.final-cta-content {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--clr-white); /* カード内の水色を削除 */
  border-radius: 32px;
  padding: var(--space-xl);
  position: relative;
  top: -100px; /* カードをより上に配置（境界線がカード上から25%になるように）*/
  border: 4px solid var(--clr-primary);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xl);
  align-items: center;
}

.final-cta-text h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--clr-primary);
  font-weight: 700;
  margin-bottom: 20px;
}

.final-cta-text p {
  font-size: 1.05rem;
  line-height: 1.9;
  margin-bottom: 24px;
}

.final-cta-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.final-cta-illus {
  width: 280px;
  flex-shrink: 0;
}

.final-cta-illus img {
  width: 100%;
  height: auto;
}

/* ── レスポンシブ（追加分）────────────────── */
@media (max-width: 900px) {
  /* Plan Summary Index - タブレット版は2列レイアウト（PC版と同様）*/
  .plan-card {
    grid-template-columns: 1fr auto;
  }

  /* Plan Summary Introスライダー - タブレット版 */
  .plan-fuwafuwa-slider .morphing-shape {
    width: 400px;
    height: 400px;
  }

  /* Plan Summary境界線調整 - タブレット版 */
  .plan-summary-intro {
    padding-bottom: calc(var(--space-2xl) + 436px); /* 545px × (400/500) = 436px */
  }

  .plan-summary-index {
    margin-top: -688px; /* -452px - 236px = -688px（295px × 400/500 = 236px）*/
    padding-top: calc(var(--space-xl) + 192px); /* 240px × (400/500) = 192px */
  }

  /* Company logo - タブレット版 60% */
  .company-logo {
    max-width: 240px; /* 400px × 60% = 240px */
  }

  /* 【3】Company/Final CTA境界線調整 - タブレット版 */
  .company {
    padding-bottom: calc(var(--space-2xl) + 60px);
  }

  .final-cta-content {
    grid-template-columns: 1fr;
    text-align: center; /* 【5】テキストを中央配置 */
    top: -100px; /* カードを上に配置 */
  }

  .final-cta-illus {
    order: -1;
    margin: 0 auto; /* 【4】上下の空きを50%に（paddingで調整）*/
    padding: 20px 0; /* 元40px → 20px */
  }

  .final-cta-buttons {
    justify-content: center; /* 【5】ボタンを中央配置 */
  }
  
  .why-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .problem-content {
    padding: var(--space-md);
  }

  .problem-solution {
    flex-direction: column;
    gap: 16px;
  }

  .problem-solution-logo {
    width: 120px;
  }

  /* Key Pointsのイラストを小さく */
  .key-point-card {
    grid-template-columns: 1fr 150px;
    gap: 12px 16px;
  }

  .key-point-illus img {
    max-width: 150px;
  }

  /* Plan Summary Introスライダー - スマホ版 */
  .plan-fuwafuwa-slider .morphing-shape {
    width: 300px;
    height: 300px;
  }

  /* Plan Summary境界線調整 - スマホ版 */
  .plan-summary-intro {
    padding-bottom: calc(var(--space-2xl) + 327px); /* 545px × (300/500) = 327px */
  }

  .plan-summary-index {
    margin-top: -516px; /* -339px - 177px = -516px（295px × 300/500 = 177px）*/
    padding-top: calc(var(--space-xl) + 144px); /* 240px × (300/500) = 144px */
  }

  /* Plan Summary Index - スマホ版は1列 */
  .plan-card {
    grid-template-columns: 1fr;
  }

  /* Flowのイラストを小さく */
  .flow-step {
    grid-template-columns: 80px 1fr;
    gap: var(--space-sm);
  }

  .flow-step-number-block {
    grid-row: 1 / 3;
  }

  .flow-step-illus {
    grid-column: 2;
    grid-row: 2;
    width: 120px;
    margin: 16px 0 0 0;
  }

  /* Why Choose Usのレイアウト修正 */
  .why-card {
    grid-template-columns: 1fr 150px;
    grid-template-rows: auto auto auto auto auto auto;
    gap: 12px 16px;
  }

  /* Company logo - スマホ版 60% */
  .company-logo {
    max-width: 240px; /* 400px × 60% = 240px */
  }

  /* 【3】Company/Final CTA境界線調整 - スマホ版 */
  .company {
    padding-bottom: calc(var(--space-2xl) + 60px);
  }

  .why-card-title {
    grid-column: 1;
    grid-row: 3;
  }

  /* 最初のstatブロック */
  .why-card-stat:first-of-type {
    grid-column: 1;
    grid-row: 4;
  }

  /* 2番目のstatブロック */
  .why-card-stat:nth-of-type(2) {
    grid-column: 1;
    grid-row: 5;
  }

  .why-card-features {
    grid-column: 1;
    grid-row: 6;
  }

  .why-card-illus {
    grid-column: 2;
    grid-row: 3 / 7;
  }

  .why-card-illus img {
    max-width: 150px;
  }

  /* 【9】CTAボタンを横並び・中央配置 */
  .why-cta {
    flex-direction: row; /* スマホも横並び */
    justify-content: center;
  }

  .final-cta-content {
    top: -80px; /* スマホ版でもカードを上に配置 */
    border-radius: 20px; /* 【7】角丸にする */
    text-align: center; /* 【8】テキストを中央配置 */
    background: var(--clr-white); /* カード内の水色を削除 */
  }

  .final-cta-buttons {
    flex-direction: column;
    align-items: center; /* 【8】ボタンを中央配置 */
  }

  .plan-summary-cta,
  .faq-cta {
    flex-direction: row; /* スマホも横並び */
    justify-content: center;
  }
}