/* LP: 認知行動療法とは (cbt-about) */

:root {
  --cbt-space-h1-section: 40px;
  --cbt-space-section-divider: 40px;
  --cbt-space-title-body: 16px;
  --cbt-space-body-cards: 40px;
  --cbt-space-cards-summary: 40px;
  --cbt-space-process-step: 16px;
  --cbt-space-process-cards: 24px;
}

body.lp-sub .main .section-stack {
  gap: 0;
  /* padding-top: 0; */
}

/* 共通見出しの余白は CBT ページ内でリセット（ブロックごとに指定） */
body.lp-sub .main .cbt-block .section-title {
  margin: 0 0 var(--cbt-space-title-body);
}

body.lp-sub .main .cbt-block--divided {
  margin-top: var(--cbt-space-section-divider);
  padding-top: var(--cbt-space-section-divider);
  border-top: 1px solid var(--color-border);
}

/* 1. 概要 */
body.lp-sub .main .cbt-block--overview {
  margin-top: var(--cbt-space-h1-section);
}

/* 2. 効果（2カラム・縦中央） */
body.lp-sub .main .cbt-block--effect.row-2 {
  align-items: center;
}

/* 3. 4つの側面（導入 → カード → まとめで余白がそれぞれ異なる） */
body.lp-sub .main .cbt-block--four-aspects-cards {
  margin-top: var(--cbt-space-body-cards);
  margin-bottom: var(--cbt-space-cards-summary);
  padding: 24px 0;
}

body.lp-sub .main .cbt-block--four-aspects-closing {
  margin-top: 0;
}

body.lp-sub .main .cbt-block--four-aspects-closing .lead-paragraph {
  margin: 0;
  color: var(--color-text);
}

/* 5. 進め方（Figma 141:96 — flex-col gap 16px + カード行 py 24px） */
body.lp-sub .main .cbt-block--process {
  display: flex;
  flex-direction: column;
  gap: var(--cbt-space-process-step);
}

body.lp-sub .main .cbt-block--process > .section-title,
body.lp-sub .main .cbt-block--process > .num-heading,
body.lp-sub .main .cbt-block--process > .lead-paragraph {
  margin-top: 0;
  margin-bottom: 0;
}

body.lp-sub .main .cbt-block--process > .sibling-cards {
  margin-top: 0;
  padding: var(--cbt-space-process-cards) 0;
  align-items: flex-start;
}

body.lp-sub .main .cbt-block--process > .skill-row {
  margin-top: 0;
  padding: var(--cbt-space-process-cards) 0;
  align-items: stretch;
}

body.lp-sub .main .card__header {
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
}

/* カード内余白（Figma: flex-col gap 12px + padding） */
body.lp-sub .main .card,
body.lp-sub .main .skill-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.lp-sub .main .chart-box .card,
body.lp-sub .main .diagram-box.card,
body.lp-sub .main .skill-card {
  align-items: center;
}

body.lp-sub .main .chart-box .card.card--p32 {
  padding: 24px;
}

body.lp-sub .main .card__title,
body.lp-sub .main .card__caption {
  margin: 0;
}

body.lp-sub .main .card .list-stack {
  padding: 12px 0;
  gap: 12px;
}

body.lp-sub .main .cbt-block--process .card .list-stack {
  gap: 0;
}

body.lp-sub .main .skill-card__title {
  display: flex;
  flex-direction: column;
  gap: 0;
}

body.lp-sub .main .skill-card ul {
  list-style: disc;
}

body.lp-sub .main .skill-card ul.skill-card__list--marked {
  list-style: none;
  padding-left: 0;
}

body.lp-sub .main .skill-card li {
  display: list-item;
}

body.lp-sub .main .skill-card ul.skill-card__list--marked li {
  display: block;
}

body.lp-sub .main .skill-card__item--bullet {
  padding-left: 1em;
  text-indent: -1em;
}

.card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: var(--color-text);
}

.card__caption {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  text-decoration: underline;
  color: var(--color-text);
}

.media-fix {
  position: relative;
  overflow: hidden;
}

.media-fix img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chart-box {
 width: 368px;
}

.chart-box .media-fix {
  height: 214px;
}

.diagram-box .media-fix {
  height: 500px;
}

.sibling-cards {
  display: flex;
  align-items: stretch;
  gap: 40px;
  width: 100%;
}

.sibling-cards .card {
  flex: 1 1 0;
  min-width: 0;
}

.list-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 0;
  font-size: 16px;
}

.card--tall .list-stack {
  padding: 12px 0;
  gap: 12px;
}

body.lp-sub .main .card:not(.card--tall) .list-stack {
  padding: 12px 0;
  gap: 0;
}

.card--tall .list-stack:first-child {
  padding-top: 12px;
}

.list-stack__label {
  margin: 0;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-primary);
}

.list-stack__body {
  margin: 0;
  font-weight: 400;
  line-height: 1.42;
  color: var(--color-text);
}

.card--tall {
  padding: 32px;
}

.card--tall .list-stack + .list-stack {
  border-top: 0;
}

.num-heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0;
}

body.lp-sub .main .num-heading ol {
  margin: 0;
  padding: 0;
  list-style: decimal;
  list-style-position: outside;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text);
}

body.lp-sub .main .num-heading ol li {
  /* margin-left: 27px; */
  padding-left: 0;
  line-height: 1.6;
}

.num-heading p {
  margin: 0;
  padding-left: 0.25em;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

.skill-row {
  display: flex;
  align-items: stretch;
  gap: 40px;
  width: 100%;
}

.skill-card {
  flex: 1 1 0;
  min-width: 0;
  padding: 24px;
}

.skill-card__icon {
  width: 170px;
  height: 121px;
  margin: 0 auto;
  position: relative;
  flex-shrink: 0;
}

.skill-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.skill-card__title {
  margin: 0;
  padding: 12px 0 0;
  width: 100%;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: var(--color-primary);
}

.skill-card ul {
  margin: 0;
  padding: 0 0 12px 1.5em;
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
}

.skill-card li {
  margin-bottom: 0.5em;
}

.skill-card li:last-child {
  margin-bottom: 0;
}

@media (max-width: 1100px) {
  body.lp-sub .main .cbt-block--effect.row-2,
  .sibling-cards,
  .skill-row {
    flex-direction: column;
    align-items: stretch;
  }

  body.lp-sub .main .cbt-block--process > .sibling-cards {
    align-items: stretch;
  }

  body.lp-sub .main .cbt-block--process > .sibling-cards .card {
    width: 100%;
  }

  .chart-box {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  :root {
    --cbt-space-h1-section: 32px;
    --cbt-space-section-divider: 32px;
    --cbt-space-title-body: 12px;
    --cbt-space-body-cards: 32px;
    --cbt-space-cards-summary: 32px;
    --cbt-space-process-step: 16px;
    --cbt-space-process-cards: 24px;
    --cbt-cards-row-gap: 24px;
    --cbt-four-aspects-row-py: 16px;
  }

  body.lp-sub .main .cbt-block .section-title {
    margin-bottom: var(--cbt-space-title-body);
  }

  body.lp-sub .main .cbt-block--four-aspects-cards {
    padding: var(--cbt-four-aspects-row-py) 0;
  }

  body.lp-sub .main .cbt-block--four-aspects-cards .card__header p:last-child {
    white-space: nowrap;
  }

  body.lp-sub .main .cbt-block--process > .sibling-cards,
  body.lp-sub .main .cbt-block--process > .skill-row {
    flex-direction: column;
    gap: var(--cbt-cards-row-gap);
  }

  body.lp-sub .main .cbt-block--process > .skill-row {
    align-items: stretch;
  }

  .sibling-cards,
  .skill-row {
    gap: var(--cbt-cards-row-gap);
  }

  .cbt-block--effect.row-2 {
    gap: 32px;
    align-items: stretch;
  }

  .card--tall {
    padding: 16px;
  }

  .skill-card {
    padding: 16px;
    flex: none;
    width: 100%;
  }

  .chart-box {
    width: 100%;
    max-width: none;
  }

  .chart-box .media-fix {
    height: 214px;
  }

  .diagram-box .media-fix {
    height: auto;
    aspect-ratio: 536 / 500;
  }
}