/* ============================================================
   MIRAI 手順
   参照 .steps{list-style:none;counter-reset:step;padding:0}
        .steps li{counter-increment:step;position:relative;padding:26px 0 26px 55px;border-top:1px solid var(--line)}
        .steps li:before{content:counter(step,decimal-leading-zero);position:absolute;left:0;font:26px Georgia;color:#6f9eb8}
        .steps strong{font-weight:500;font-size:20px}
        .steps p{margin:12px 0 0}
   番号は counter で描く（画像・SVGを使わない）
   ============================================================ */
.mj-steps {
  background-color: rgb(var(--color-background));
}

.mj-steps__list {
  counter-reset: mj-step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mj-steps__item {
  counter-increment: mj-step;
  position: relative;
  padding: 26px 0 26px 55px;
  border-block-start: 1px solid var(--mj-line);
}

.mj-steps__item::before {
  content: counter(mj-step, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  font-family: var(--mj-font-figure);
  font-size: 26px;
  color: #6f9eb8;
}

/* base.css の .mj-item__title に勝たせる（参照 .steps strong{font-weight:500;font-size:20px}） */
.mj-steps .mj-steps__title {
  font-family: var(--mj-font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.7;
  margin: 0;
}

/* 参照 .steps p{margin:12px 0 0}（font-size指定なし＝本文18pxを継承） */
.mj-steps .mj-steps__item .mj-item__text {
  font-size: var(--mj-body-size);
  margin: 12px 0 0;
}

/* 参照 @media(max-width:760px){.steps li{padding-left:42px}.steps strong{font-size:18px}} */
@media (max-width: 760px) {
  .mj-steps__item { padding-inline-start: 42px; }
  .mj-steps .mj-steps__title { font-size: 18px; }
}