.step-flow {
    display: flex;
    margin: 20px 0;
    padding: 0;
    list-style: none;
    background: #f0f0f0; /* 全体のベース色 */
}

.step-item {
    position: relative;
    flex: 1;
    padding: 15px 10px;
    text-align: center;
    background: #F5EFF7;
    color: #888;
    margin-right: 10px; /* 項目間の隙間 */
    font-weight: bold;
    font-size: 1.0rem;
}

/* 最後の項目のマージンは不要 */
.step-item:last-child {
    margin-right: 0;
}

.step-num {
    display: block;
    font-size: 1.0rem;
    margin-bottom: 3px;
    opacity: 0.7;
}

/* 完了したステップ */
.step-item.is-complete {
#    background: #2ecc71; /* 緑 */
    background: #3498db; /* 青 */
    color: #fff;
}

/* 現在のステップ（アクティブ） */
.step-item.is-active {
    background: #A488C0; /* 青 */
    color: #fff;
}

/* アクティブな項目に下線などのアクセントをつける場合 */
.step-item.is-active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0,0,0,0.2);
}


.scroll-box {
  width: 100%;        /* 横幅 */
  height: 600px;       /* 高さ（これを超えるとスクロール） */
  padding: 15px;       /* 内側の余白 */
  border: 1px solid #ccc; /* 枠線 */
  
  /* スクロールのための重要設定 */
  overflow-y: auto;    /* 縦方向に必要に応じてスクロールバーを表示 */
}