/* インジケーター全体のコンテナ */
.news-dot {
    position: absolute;
    top: 22%;
    left: 0;
    /* 位置は調整してください */
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    /* ドット間の距離 */
    z-index: 30;
}

.dot {
    position: relative;
    /* 波紋の基準位置にするために追加 */
    width: 8px;
    height: 8px;
    background-color: #d3d3d2;
    border-radius: 50%;
    z-index: 2;
}

/* 波紋（リップル）用のスタイル */
.ripple {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #bbfa45;
    /* 広がる波紋の色（現在のドット色に合わせる） */
    border-radius: 50%;
    z-index: -1;
    /* ドットより後ろ側に表示 */
    pointer-events: none;
}

/* 縦棒の共通設定 */
.indicator-line-base,
.indicator-line-fill {
    position: absolute;
    top: 4px;
    /* 最初のドットの中心から開始 */
    width: 1px;
    background-color: #d3d3d2;
    z-index: 1;
    transform-origin: top;
}

/* 充填されるバー */
.indicator-line-fill {
    background-color: #bbfa45;
    /* 充填される色 */
    scale: 1 0;
    /* 最初は高さ0 */
    z-index: 2;
}

/* 記事の初期状態 */
.kiji {
    opacity: 0;
    visibility: hidden;
    grid-area: 1 / 1;
    /* 重ねて配置することで、親が一番背の高い要素に合わせる */
}

/* 最初の記事だけ表示 */
.kiji:first-child {
    opacity: 1;
    visibility: visible;
}

.newsarea {
    position: relative;
}