.Train { grid-area: Train; }

.container_train {  display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    "TrainName TrainSchedule TrainRemain";
    opacity: 0.75;
    background-color: black;
    text-align: center;
    font-size: 3vh;
    color: white;
}

.TrainName { grid-area: TrainName; }

.TrainSchedule { grid-area: TrainSchedule; }

.TrainRemain { grid-area: TrainRemain; position: relative;}

.TrainRemainChart {
    height: 100%;
    width: 0%;
    background-color: red;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;                 /* 背面に配置 */
}

.TrainRemainContent {
    position: relative;
    z-index: 1;                 /* 前面に表示 */
}