/* ======================================
CASE：元デザイン完全復活【最終・整理版】
適用：LP（#syuzaidouga-lp）内のみ
HTML完全一致／重複・競合なし
====================================== */

/* ===============================
CASE セクション全体
=============================== */
#syuzaidouga-lp .lp-case {
  padding: 96px 20px 48px; /* ← PRICEとの余白は48px */
}

/* ===============================
見出しまわり
=============================== */
#syuzaidouga-lp .lp-case .lp-sec-kicker {
  display: block;
  text-align: center;
  margin-bottom: 16px;
}

#syuzaidouga-lp .lp-case .lp-section-title {
  text-align: center;
  margin-bottom: 32px;
}

#syuzaidouga-lp .lp-case .lp-section-lead {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}

/* ===============================
CASE 一覧
=============================== */
#syuzaidouga-lp .lp-case-list {
  display: flex;
  flex-direction: column;
  gap: 48px; /* 事例①②の間 */
}

/* ===============================
CASE ブロック（罫線で囲う）
=============================== */
#syuzaidouga-lp .case-block {
  width: 100%;
  border: 1px solid #e5e5e5;
  padding: 56px 48px;
  overflow: visible; /* アコーディオン対策 */
}

/* ===============================
CASE 内部レイアウト
=============================== */
#syuzaidouga-lp .case-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: flex-start;
}

/* 左右反転 */
#syuzaidouga-lp .case-inner.is-reverse {
  direction: rtl;
}
#syuzaidouga-lp .case-inner.is-reverse > * {
  direction: ltr;
}

/* ===============================
画像
=============================== */
#syuzaidouga-lp .case-media {
  position: relative;
}
#syuzaidouga-lp .case-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* hover バッジ */
#syuzaidouga-lp .case-video-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  opacity: 0;
  transition: opacity .2s ease;
}
#syuzaidouga-lp .case-video-link:hover .case-video-badge {
  opacity: 1;
}

/* ===============================
テキスト
=============================== */
#syuzaidouga-lp .case-body {
  max-width: 560px;
}

#syuzaidouga-lp .case-meta {
  font-size: 13px;
  margin-bottom: 12px;
  color: #555;
}

#syuzaidouga-lp .case-title {
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 24px;
}

#syuzaidouga-lp .case-phase {
  font-size: 14px;
  font-weight: 700;
  margin: 32px 0 12px;
}

/* 箇条書き */
#syuzaidouga-lp .case-before,
#syuzaidouga-lp .case-after {
  list-style: none;
  padding-left: 0;
  margin-bottom: 24px;
}

#syuzaidouga-lp .case-before li,
#syuzaidouga-lp .case-after li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 8px;
}

#syuzaidouga-lp .case-before li::before,
#syuzaidouga-lp .case-after li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0;
  color: #0099cc;
  font-size: 0.9em;
}

#syuzaidouga-lp .case-result {
  margin-top: 16px;
  font-weight: 600;
}

/* ===============================
アコーディオン（完全復活）
=============================== */
#syuzaidouga-lp .case-detail {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
}

#syuzaidouga-lp .case-detail.is-open {
  max-height: 3000px; /* 中身量に依存しない安全値 */
}

/* ===============================
アコーディオンボタン
=============================== */
#syuzaidouga-lp .case-more {
  margin-top: 24px;
  padding: 10px 20px;
  border: 1px solid #0099cc;
  background: transparent;
  color: #0099cc;
  cursor: pointer;
}

/* テーマ標準ボタンのみ無効化（case-more は殺さない） */
#syuzaidouga-lp .lp-case .wp-block-button__link {
  display: none;
}

/* ===============================
SP
=============================== */
@media (max-width: 768px) {
  #syuzaidouga-lp .case-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  #syuzaidouga-lp .case-body {
    max-width: none;
  }

  #syuzaidouga-lp .case-block {
    padding: 40px 20px;
  }
}

/* ======================================
PROBLEM：最終・衝突なし確定版
対象：.lp-problem のみ
HTML変更なし
====================================== */

/* セクション */
.lp-problem {
  padding: 120px 20px;
}

/* 見出し */
.lp-problem .lp-sec-kicker,
.lp-problem .lp-section-title {
  text-align: center;
}

/* リード */
.lp-problem .lp-section-lead {
  max-width: 760px;
  margin: 32px auto 0;
  line-height: 1.9;
}

/* ===============================
イラスト＋吹き出し全体
=============================== */

.lp-problem-visual {
  max-width: 1100px;
  margin: 64px auto 80px;
}

/* 行（上段・下段） */
.lp-problem-visual .problem-row {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 64px;
}

/* ペア（基準） */
.lp-problem-visual .problem-pair {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

/* 左右の向き */
.lp-problem-visual .pair-left {
  justify-content: flex-end;
}

.lp-problem-visual .pair-right {
  justify-content: flex-start;
}

/* 人物 */
.lp-problem-person {
  width: 160px;
  height: auto;
  position: relative;
  z-index: 1;
  display: block;
}

.lp-problem-person.is-small {
  width: 130px;
}

/* ===============================
吹き出し
=============================== */

.lp-problem-balloon {
  position: absolute;
  max-width: 200px;
  padding: 14px 18px;
  background: #fff6cc;
  border: 2px solid #0099cc;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.6;
  z-index: 2;
  text-align: left;
}

/* しっぽ */
.lp-problem-balloon::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
}

/* 左ペア */
.pair-left .lp-problem-balloon {
  top: -12px;
  right: 140px;
}

.pair-left .lp-problem-balloon::after {
  top: 24px;
  right: -16px;
  border-left-color: #0099cc;
}

/* 右ペア */
.pair-right .lp-problem-balloon {
  top: -12px;
  left: 140px;
}

.pair-right .lp-problem-balloon::after {
  top: 24px;
  left: -16px;
  border-right-color: #0099cc;
}

/* ======================================
PROBLEM：SP 吹き出し位置を完全統一
吹き出し → イラスト
====================================== */
@media (max-width: 768px) {

  .lp-problem {
    padding: 96px 20px;
  }

  /* 行は縦積み */
  .lp-problem-visual .problem-row {
    flex-direction: column;
    gap: 40px;
  }

  /* ペアも縦積み＋順序制御 */
  .lp-problem-visual .problem-pair {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  /* 吹き出しは必ず上 */
  .lp-problem-balloon {
    order: 1;
    position: static !important;
    max-width: 280px;
    margin: 0 auto;
    text-align: center;
  }

  .lp-problem-balloon::after {
    display: none;
  }

  /* イラストは必ず下 */
  .lp-problem-person {
    order: 2;
    width: 160px;
    margin: 0 auto;
    display: block;
  }

  .lp-problem-person.is-small {
    width: 140px;
  }

}
/* ======================================
PROBLEM：リード文を中央寄せ
====================================== */

.lp-problem .lp-section-lead {
  max-width: 760px;
  margin: 32px auto 0;
  text-align: center;
  line-height: 2;
}


/* ===============================
BENEFIT：レイアウト最終・整理版
=============================== */

/* セクション全体：中央基準 */
.lp-benefit {
  text-align: center;
}

/* ===============================
リード・説明文
=============================== */

/* メインコピー（太め・やや大きめ） */
.lp-benefit .lp-benefit-lead:first-of-type {
  font-size: 22px;
  line-height: 1.7;
  margin-bottom: 32px;
}

/* 説明文（中央・やや細め） */
.lp-benefit .lp-benefit-lead.is-center {
  max-width: 520px;
  margin: 0 auto 48px;
  line-height: 1.9;
}

/* ===============================
BENEFIT：図タイトル（旧 closing の役割）
=============================== */

.lp-benefit-figure-title {
  font-weight: bold;
  color: #0099cc;        /* ブルー */
  margin-bottom: 1.6em; /* 1行分の余白 */
  text-align: center;   /* 図タイトルなので中央 */
}

/* ===============================
BENEFITリスト（3ボックス）
=============================== */

.lp-benefit-list {
  display: flex;
  justify-content: center;
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.lp-benefit-list li {
  width: 240px;
  padding: 32px 24px;
  border: 2px solid #0099cc;
  text-align: center;
  line-height: 1.7;
  color: #0099cc;          /* 文字色ブルー */
}

.lp-benefit-list li strong {
  color: #0099cc;          /* strongも統一 */
}

/* ===============================
SP調整
=============================== */
@media (max-width: 768px) {

  .lp-benefit .lp-benefit-lead:first-of-type {
    font-size: 18px;
  }

  .lp-benefit .lp-benefit-lead.is-center {
    max-width: 90%;
    margin-bottom: 40px;
  }

  .lp-benefit-list {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .lp-benefit-list li {
    width: 100%;
    max-width: 320px;
  }
}

/* ======================================
BENEFIT：3つの囲み 最終デザイン
====================================== */

/* 囲み全体 */
.lp-benefit-list {
  display: flex;
  justify-content: center;
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各ボックス */
.lp-benefit-list li {
  width: 260px;
  min-height: 140px;              /* 高さをそろえる */
  padding: 28px 24px;
  border: 1.5px solid #0099cc;    /* 少し細く */
  border-radius: 16px;            /* ← 硬さ解消 */
  background: #fff;
  
  display: flex;                  /* 縦中央寄せ */
  align-items: center;
  justify-content: center;

  text-align: center;
  line-height: 1.7;
  color: #0099cc;
}

/* 中の文字 */
.lp-benefit-list li strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #0099cc;
}

/* ===============================
SP（縦並び）
=============================== */
@media (max-width: 768px) {
  .lp-benefit-list {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .lp-benefit-list li {
    width: 100%;
    max-width: 320px;
    min-height: auto;
    padding: 24px 20px;
  }
}
/* ===============================
PROBLEM セクション：赤背景を解除
=============================== */
.lp-problem,
.problem,
.problem-section {
  background: transparent !important;
  background-color: #fff !important;
}