.train-detail-modal {
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s;
    pointer-events: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.train-detail-content {
    background: #fff;
    color: #222;
    border-radius: 12px;
    padding: 32px 28px 24px 28px;
    min-width: 320px;
    max-width: 90vw;
    box-shadow: 0 6px 32px rgba(0,0,0,0.18);
    position: relative;
    font-family: "M PLUS 1", sans-serif;
    text-align: left;
    animation: modalPop 0.2s;
}

@keyframes modalPop {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.train-detail-close {
    position: absolute;
    top: 12px;
    right: 18px;
    font-size: 2em;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
    pointer-events: auto;
}

    .train-detail-close:hover {
        color: #1976d2;
    }

#train-detail-body h2 {
    margin-top: 0;
    font-size: 1.3em;
    color: #1976d2;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

#train-detail-body p {
    margin: 0 0 10px 0;
    font-size: 1.05em;
}

#train-detail-body table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 8px;
}

#train-detail-body th, #train-detail-body td {
    border: 1px solid #eee;
    padding: 6px 12px;
    text-align: left;
    font-size: 1em;
}

#train-detail-body th {
    background: #f5f5f5;
    color: #1976d2;
    width: 5em;
}


.train-car-image-row {
    text-align: center;
    margin-bottom: 0.6em;
}

.car-image {
    height: 80px;
    margin: 0 0px;
    vertical-align: middle;
}




.train-direction-u {
    text-align: right; /* 中央揃え */
    margin-top: 0.1em; /* 上マージン */
    font-size: 0.2em; /* 文字サイズ */
    font-weight: 500; /* 太字 */
    color: #222; /* 文字色（青系） */
    letter-spacing: 0.1em; /* 文字間隔 */
}

.train-direction-d {
    text-align: left; /* 中央揃え */
    margin-top: 0.1em; /* 上マージン */
    font-size: 0.2em; /* 文字サイズ */
    font-weight: 500; /* 太字 */
    color: #222; /* 文字色（青系） */
    letter-spacing: 0.1em; /* 文字間隔 */
}

.route-direction {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.route-direction-u {
    text-align: right; /* 中央揃え */
    margin-top: 0.1em; /* 上マージン */
    font-size: 0.2em; /* 文字サイズ */
    font-weight: 500; /* 太字 */
    color: #222; /* 文字色（青系） */
    letter-spacing: 0.1em; /* 文字間隔 */
}

.route-direction-d {
    text-align: left; /* 中央揃え */
    margin-top: 0.1em; /* 上マージン */
    font-size: 0.2em; /* 文字サイズ */
    font-weight: 500; /* 太字 */
    color: #222; /* 文字色（青系） */
    letter-spacing: 0.1em; /* 文字間隔 */
}