/* Learning diagrams v7: preserve the site palette while giving every concept a readable layout. */
.lr-flow-v7__steps,
.it-learning-v7__steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lr-flow-v7__steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
}

.lr-flow-v7__steps li,
.it-learning-v7__steps li {
  position: relative;
  min-width: 0;
  padding: 18px 16px 20px;
  border-top: 2px solid #a9d7d8;
  background: #fff;
}

.lr-flow-v7__steps li:not(:last-child)::after,
.it-learning-v7__steps li:not(:last-child)::after {
  position: absolute;
  z-index: 1;
  top: 48%;
  right: calc(clamp(14px, 2vw, 26px) * -0.78);
  content: "";
  width: 12px;
  height: 12px;
  border-top: 2px solid #78b9b7;
  border-right: 2px solid #78b9b7;
  transform: rotate(45deg);
}

.lr-flow-v7__visual {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  margin-bottom: 14px;
  border-bottom: 1px solid #d4e9e8;
}

.lr-flow-v7__visual > span {
  color: #0f6870;
  font: 700 24px/1 var(--f-num);
}

.lr-flow-v7__visual svg {
  justify-self: end;
  display: block;
  width: 64px;
  height: 58px;
}

.lr-flow-v7__steps b,
.it-learning-v7__steps b {
  display: block;
  color: #1d3c40;
  font-size: 18px;
  line-height: 1.5;
}

.lr-flow-v7__steps small,
.it-learning-v7__steps small {
  display: block;
  margin-top: 5px;
  color: #557579;
  font-size: 14px;
  line-height: 1.6;
}

.lr-flow-v7__steps li:nth-child(2) { border-color: #ed9a3d; }
.lr-flow-v7__steps li:nth-child(2) .lr-flow-v7__visual > span { color: #cf6c14; }

.it-learning-v7__steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 38px);
}

.it-learning-v7__steps li { padding: 20px 22px 22px; }
.it-learning-v7__steps li:nth-child(2) { border-color: #efb779; }
.it-learning-v7__visual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 84px;
  margin-bottom: 12px;
  border-bottom: 1px solid #d4e9e8;
}
.it-learning-v7__visual > span {
  color: #0f6870;
  font: 600 13px/1.4 var(--f-en);
  letter-spacing: .1em;
}
.it-learning-v7__visual svg { display: block; width: 86px; height: 70px; flex: 0 0 auto; }
.it-learning-v7__steps li:nth-child(2) .it-learning-v7__visual > span { color: #cf6c14; }

.it-support-v7 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.it-support-v7__card {
  min-width: 0;
  padding: 12px 14px 15px;
  border-top: 2px solid #a9d7d8;
  background: #f5faf9;
}
.it-support-v7__card:nth-child(2) { border-color: #efb779; }
.it-support-v7__card:nth-child(3) { border-color: #83c2c4; }
.it-support-v7__card:nth-child(4) { border-color: #d5bca1; }
.it-support-v7__scene {
  display: grid;
  place-items: center;
  min-height: 104px;
  margin-bottom: 9px;
  background: #eaf8f8;
}
.it-support-v7__card:nth-child(2) .it-support-v7__scene { background: #fff4e8; }
.it-support-v7__card:nth-child(3) .it-support-v7__scene { background: #edf7f6; }
.it-support-v7__card:nth-child(4) .it-support-v7__scene { background: #f5f1eb; }
.it-support-v7__scene svg { display: block; width: min(100%, 220px); height: auto; }
.it-support-v7__card > b { color: #1d3c40; font-size: 17px; line-height: 1.5; }
.it-support-v7__card > p { margin: 4px 0 0; color: #557579; font-size: 14px; line-height: 1.65; }

@media (max-width: 900px) {
  .lr-flow-v7__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .lr-flow-v7__steps li::after { display: none; }
  .it-learning-v7__steps { gap: 14px; }
  .it-learning-v7__steps li { padding: 17px 15px; }
  .it-learning-v7__steps li:not(:last-child)::after { right: -10px; }
}

@media (max-width: 560px) {
  .lr-flow-v7__steps { gap: 10px; }
  .lr-flow-v7__steps li { padding: 13px 11px 15px; }
  .lr-flow-v7__visual { gap: 4px; min-height: 58px; margin-bottom: 10px; }
  .lr-flow-v7__visual > span { font-size: 21px; }
  .lr-flow-v7__visual svg { width: 52px; height: 48px; }
  .lr-flow-v7__steps b { font-size: 16px; }
  .lr-flow-v7__steps small { font-size: 13px; }

  .it-learning-v7__steps { grid-template-columns: 1fr; gap: 11px; }
  .it-learning-v7__steps li { padding: 13px 14px 15px; }
  .it-learning-v7__steps li:not(:last-child)::after {
    top: auto;
    right: 50%;
    bottom: -8px;
    display: block;
    width: 10px;
    height: 10px;
    background: #eaf8f8;
    transform: translateX(50%) rotate(135deg);
  }
  .it-learning-v7__visual { min-height: 65px; margin-bottom: 8px; }
  .it-learning-v7__visual svg { width: 74px; height: 58px; }
  .it-learning-v7__steps b { font-size: 18px; }

  .it-support-v7 { gap: 9px; }
  .it-support-v7__card { padding: 9px 9px 11px; }
  .it-support-v7__scene { min-height: 82px; margin-bottom: 7px; }
  .it-support-v7__card > b { font-size: 16px; }
  .it-support-v7__card > p { font-size: 13px; }
}