@charset "UTF-8";
/*==================================================
相浦港のアクセス詳細ページ
==================================================*/
.info-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0 25px 0;
    font-size: 0.95rem;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.info-table th, .info-table td {
    border: 1px solid #767676;
    padding: 12px 15px;
    text-align: center;
    letter-spacing: 0.1em;
}

.info-table th {
    background-color: #1e3222;
    color: #ffffff;
    font-weight: bold;
}

.info-table tr:nth-child(even) {
    background-color: #f7f9f6;
}

.alert-title {
    font-weight: bold;
    color: #d9534f;
    margin-bottom: 8px;
}
.image-box {
    margin-bottom: 10px;
}

/* メディアクエリ*/
@media screen and (max-width: 768px) {
    #container { 
        width: 98%; 
    }
    body { 
        font-size: 0.9rem; 
        letter-spacing: 0.1em; 
    }
    main { 
        padding: 15px 10px; 
    }
    h1 { 
        font-size: 1.8rem; 
        padding: 15px 15px 15px 80px; 
    }
    h1:before { 
        width: 65px; 
        height: 55px; 
    }
    #slider { 
        height: auto; 
        width: 100%; 
        aspect-ratio: 16/9; 
        margin-bottom: 20px; 
    }

    nav {
        position: -webkit-sticky; 
        position: sticky; 
        top: 0; 
        z-index: 999;
        background: #1e3222; 
        padding: 0; 
        margin: 0 -10px 20px -10px; 
        border-radius: 0;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }    
    .timeline { 
        padding-left: 0; 
    }
    .timeline::before, .timeline-number, .timeline-goal { 
        display: none; 
    }
    .timeline-content { 
        padding: 15px 12px; 
        width: 100%; 
        box-sizing: border-box; 
    }
    .timeline-flex { 
        flex-direction: column; 
    }
    .timeline-flex .image-box { 
        width: 100%; 
        margin-bottom: 12px; 
    }
    .timeline-flex .text-box { 
        width: 100%; 
    }
    
    .main-intro { 
        margin-bottom: 0; 
        padding-bottom: 10px; 
    }
    .main-intro h2 { 
        font-size: 25px; 
        margin-bottom: 0; 
    }
    h4 { 
        margin-top: 0; 
        border-left: 4px solid #1e3222; 
        padding-left: 10px; 
    }
    #ROUTE-MAP, #FARES, #TIMETABLE { 
        padding: 0; 
    }
    #ROUTE-MAP h3, #FARES h3, #TIMETABLE h3 { 
        font-size: 22px; 
        margin-bottom: 0; 
    }
    
    .info-table, .info-table tbody, .info-table tr, .info-table td {
        display: block; 
        width: 100%; 
        box-sizing: border-box;
    }
    .info-table thead { 
        display: none; 
    }
    .info-table tr {
        margin-bottom: 15px; 
        border: 1px solid #767676;
        border-radius: 6px; 
        overflow: hidden; 
        background: #fff;
    }
    .label {
        text-align: left; 
        padding: 10px 15px; 
        border: none;
        border-bottom: 1px dashed #ddd; 
        font-size: 0.9rem;
    }
    .info-table td:last-child { 
        border-bottom: none; 
    }
    .info-table td:first-child { 
        background-color: #1e3222; 
        color: #fff; 
        font-weight: bold; 
    }
    .label::before {
        content: attr(data-label); 
        position: absolute; 
        left: 45px;
        width: 35%; 
        text-align: left; 
        font-weight: bold; 
        color: #1e3222;
    }
    .table-title { 
        text-align: center; 
        padding: 0; 
        width: 100%; 
    }
    .label {
        position: relative; 
        text-align: right; 
        padding: 10px 15px 10px 50%;
        border: none; 
        border-bottom: 1px dashed #ddd; 
        font-size: 0.9rem;
    }
    .label::before {
        content: attr(data-label); 
        position: absolute; 
        left: 15px;
        width: auto; 
        text-align: left; 
        font-weight: bold; 
        color: #1e3222;
    }
    .table-wrap, .info-table { 
        width: 100%; 
    }
    .alert-box { 
        margin-bottom: 0; 
    }
}