/* ==========================================================================
   pages-lesson.css
   ========================================================================== */

.p-lesson__section--pricing {
  margin-top: 56px;
}

.p-lesson__pricing {
  max-width: var(--pricing-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--pricing-gap);
  margin-bottom: var(--price-flow-gap);
}

.p-lesson__pricingGroup {
  background: var(--group-bg, #fff);
  border-radius: var(--group-radius, 10px);
  padding: var(--group-pad-y, 18px) var(--group-pad-x, 18px);
  border: var(--group-border, 1px) solid var(--line, var(--ui-border));
}

.p-lesson__pricingGroup > .c-h3 {
  margin: 0 0 var(--group-title-gap);
}

.p-lesson__pricingBlock + .p-lesson__pricingBlock {
  margin-top: var(--block-gap);
}

.p-lesson__priceRow {
  display: grid;
  grid-template-columns: 1fr var(--price-w);
  column-gap: var(--row-gap);
  margin-left: var(--row-x);
  max-width: var(--row-max);
  padding-right: var(--row-pad-right);
}

.p-lesson__priceValue {
  text-align: right;
  font-weight: 800;
}

.p-lesson__h4 {
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  color: var(--brand);
  margin-bottom: var(--block-inner-gap);
  margin-left: var(--h4-x);
}

/* H3-DOT-LSN */
.c-h3.c-h3--dot-lsn {
  position: relative;
  font-size: var(--h3-lsn-size);
  font-weight: var(--h3-lsn-weight);
  padding-left: var(--h3-lsn-x);
  color: var(--brand);
}

.c-h3.c-h3--dot-lsn::after {
  content: var(--h3-lsn-dot-content);
  display: block;
  margin-top: var(--h3-lsn-dot-top);
  padding-left: var(--h3-lsn-dot-x);
  font-size: var(--h3-lsn-dot-size);
  letter-spacing: var(--h3-lsn-dot-letter);
  color: var(--h3-lsn-dot-color);
}

/* Flow */
.p-lessonFlow {
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-lessonFlow__item + .p-lessonFlow__item {
  margin-top: var(--flow-step-gap);
}

.p-lessonFlowCard {
  display: flex;
  gap: var(--flow-gap);
  align-items: flex-start;
  background: var(--flow-card-bg, #fff);
  border: var(--flow-card-border, 1px) solid var(--line, var(--ui-border));
  border-radius: var(--flow-card-radius, 10px);
  padding: var(--flow-card-pad-y, 18px) var(--flow-card-pad-x, 18px);
}

.p-lessonFlowCard__icon {
  order: -1;
  flex: 0 0 var(--flow-icon-col);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-lessonFlowCard__icon img {
  display: block;
  width: var(--flow-icon-size);
  height: auto;
  transform: translateX(var(--flow-icon-x));
}

.p-lessonFlowCard__num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(
    calc(-50% + var(--flow-num-x)),
    calc(-50% + var(--flow-num-y))
  );
  font-size: var(--flow-num-size);
  font-weight: var(--flow-num-weight);
  color: var(--brand);
}

/* 確認（済）🌹 */
.p-lessonFlowCard__body {
  flex: 1 1 auto;
  min-width: 0;
}

.p-lessonFlowCard__text {
  margin-left: var(--flow-text-x);
}

.p-lessonFlowCard__title {
  text-align: left;
  color: var(--flow-title-color);
  margin-left: var(--flow-title-x);
}

/* 確認（済）🌹 */
.p-lessonFlowCard .p-lesson__cta {
  display: block;
  margin-top: var(--flow-incta-mt);
  margin-left: var(--flow-incta-x);
}

.p-lesson__cta--out {
  margin-top: var(--flow-outcta-mt);
  display: flex;
  justify-content: center;
}

/* 確認（済）🌹 */
.p-lesson__flowWrap {
  max-width: var(--pricing-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--pricing-gap);
}

/* ===== Lesson：見た目復旧パッチ ===== */

/* H3下の本文を“まとめて”動かさない（個別制御にする） */
.p-lesson__pricingBlock {
  padding-left: 0;
}

/* リスト（説明文）は独立ツマミで制御 */
.p-lesson__list {
  margin-top: var(--list-mt);
  padding-left: var(--list-x);
  transform: translateY(var(--lsn-desc-y));
  line-height: var(--list-line);
  font-size: var(--list-size);
  color: var(--list-color);
}

/* =========================================================
   Lesson｜コンセプト（H2外＋帯はcontainer内）
   ========================================================= */

.p-lesson__poster {
  background: var(--brand-primary);
  color: var(--text-invert);
  padding: 80px 0;
}

.p-lesson__posterInner {
  max-width: 720px;
  margin: 0 auto;
}

.p-lesson__posterInner p {
  margin: 0 0 12px;
  line-height: 1.8;
}

.p-lesson__lead {
  font-size: 1.35rem;
  font-weight: 700;
  margin-top: 26px;
  margin-bottom: 0;
  line-height: 1.6;
}