@charset "utf-8";

* {
    margin: 0;
    padding: 0;
}

body {
    line-height: 1.5;
}

th, td {
    padding: 0.05rem 0.4rem;
    line-height: 1.35;
}

th {
    border-bottom: 1px solid black;
}

td {
    border-bottom: 1px dashed black;
}

.special-remark {
    color: red;
    font-weight: bold;
}

/* 画面上部固定表示のダイヤ種別 (配置設定) */
.dia-type-navi {
    position: sticky;
    width: 100%;
    top: 0;
}

/* 画面上部固定表示のダイヤ種別 (文字) */
.dia-type-navi p {
    text-align: center;
}

/* 画面上部固定表示のダイヤ種別 (平日ダイヤ) */
.dia-type-navi-weekdays {
    background-color: seagreen;
    color: white;
}

/* 画面上部固定表示のダイヤ種別 (土曜ダイヤ) */
.dia-type-navi-saturdays {
    background-color: #FFFF60;
    color: black;
}

/* 画面上部固定表示のダイヤ種別 (日祝ダイヤ) */
.dia-type-navi-holidays {
    background-color: #FF66B8;
    color: white;
}

/* ページ全体の背景色と文字色 */
#background {
    width: 100%;
    background-color: white;
    color: black;
}

.all-contents {
    max-width: 1300px;
    margin: 0 auto;
    padding: 1rem;
}

.top-navi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.subtitle {
    margin-top: 0.1rem;
    font-size: larger;
}

#background.weekdays {
    background-color: #F0FFF4;
}

#background.saturdays {
    background-color: #FFFFEF;
}

#background.holidays {
    background-color: #FFF5FA;
}

header {
    padding: 1rem;
}

header.weekdays {
    background: linear-gradient(to right, #F0FFF0, #99FF99);
    border: 2px solid #8AE68A
}

header.saturdays {
    background: linear-gradient(to right, #FFFFD0, #FFFF88);
    border: 2px solid #F5F520;
}

header.holidays {
    background: linear-gradient(to right, #FFF0F0, #FF99CC);
    border: 2px solid #FF69B4;
}

header h2 {
    margin-top: 0.5rem;
}

header .nav-link {
    margin: 1rem 0;
}

.nav-link ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
    list-style-type: '▶ ';
    list-style-position: inside;
}

.contents {
    padding: 1em 0;
}

.contents ol {
    list-style-position: inside;
}

.contents-summary h2 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.update-info dt {
    border-bottom: 3px ridge #4169E1;
    width: fit-content;
    padding: 0 1em;
}

.all-contents dd {
    text-indent: -1.35rem;
    margin-left: 2.2rem;
    text-align: justify;
}

.update-info dd:last-child {
    margin-bottom: 0;
}

.update-info dd::before {
    content: '→ ';
}

table {
    border: 2px solid black;
    border-collapse: collapse;
    margin: 0.3rem 0;
}

.operation-list td {
    vertical-align: top;
    letter-spacing: .16px;
}

.operation-list td:last-child {
    font-family: monospace, sans-serif;
}

.operation-list td:first-child, .operation-list td:nth-child(2) {
    text-align: center;
}

.change-list tr, .change-list td {
    text-align: center;
}

.change-list th:nth-child(3), .change-list th:nth-child(4),
.change-list td:nth-child(3), .change-list td:nth-child(4) {
    text-align: left;
}

.change-list td:nth-child(5), .change-list td:nth-child(6) {
    text-align: left;
}

.change-list td:nth-child(6) {
    max-width: 13ic;
}

.operation-table {
    margin: 1rem 0;
}

/* 福岡（天神）駅工事に伴う臨時車両系統 */
tr.extra-car-operation {
    background-color: #99E6FF;
}
tr.suspended-car-operation {
    background-color: #CCCCCC;
}


@media screen and (min-width: 601px) {
    .operation-table th:first-child { width: 4ic; }
    .operation-table th:nth-child(2) { width: 4ic; }
    .operation-table th:nth-child(3), .operation-table td:nth-child(3) { min-width: 4ic; max-width: 6ic; }
    .operation-table td:nth-child(4), .operation-table td:nth-child(6){ width: 5.3ic; }
    .operation-table td:nth-child(5), .operation-table td:nth-child(7){ width: 5ch; }
    .operation-table td:nth-child(5), td:nth-child(7) { text-align: right; }
    .operation-table td:last-child {
        max-width: 110ch;
    }
}

/* 各列は線で区切る */
.operation-table th, .operation-table td {
    border-left: 1px solid black;
}

/* ただし、出入庫の駅と時刻の間を区切らない */
.operation-table td:nth-child(5), .operation-table td:nth-child(7) {
    border-left: unset;
}

th.formation { width: 100px; }
th.opcode { width: 45px; }
th.note { width: 140px; }

/* 変更部分を赤文字に */
td.henkou, span.henkou {
    color: red;
}

td.henkou2, tr.henkou2 {
    color: red;
    background-color: #FFFF99;
}

td.henkou3, tr.henkou3 {
    color: #DC143E;
    background-color: #F5DCF5;
}

td.henkou4, tr.henkou4 {
    color: #DC143E;
    background-color: #FFCC99;
}

td.henkou5, tr.henkou5 {
    color: red;
    background-color: #DDFF99;
}

ul.operation-remark {
    list-style-type: square;
    list-style-position: outside;
}

ul.operation-remark li {
    margin-left: 1rem;
}

@media screen and (max-width: 600px) {
    .operation-table th:first-child { width: 4ic; }
    .operation-table th:nth-child(2) { width: 4ic; }
    .operation-table th:nth-child(3) { width: 4ic; }
    .operation-table td:nth-child(4), .operation-table td:nth-child(6){ width: 5ic; }
    .operation-table td:nth-child(5), .operation-table td:nth-child(7){ width: 5ch; }
    .operation-table td:nth-child(5), td:nth-child(7) { text-align: right; }

    .all-contents {
        padding: 0.5rem;
    }

    .contents {
        padding-left: 0;
        padding-right: 0;
    }

    .operation-table td {
        padding: 0 0.2rem;
    }

    .change-list td {
        font-size: small;
        font-family: monospace, sans-serif;
        vertical-align: top;
    }

    .nav-link ul {
        grid-template-columns: 1fr 1fr;
    }
}

/* スマートフォンでも文字を縮小しつつ表が整うように */
@media screen and (max-width: 820px) {
    .operation-table table {
        width: 100%;
    }
    .operation-table, .change-list {
        max-width: 100%;
    }
    .operation-table th:first-child { width: 2ch; }
    .operation-table th:nth-child(2) { width: 2ch; }
    .operation-table th:nth-child(3) { width: 2ic; }
    .operation-table td:nth-child(4), .operation-table td:nth-child(6){ width: 3.1ic; }
    .operation-table td:nth-child(5), .operation-table td:nth-child(7){ width: 5ch; }
    .operation-table td:nth-child(5), td:nth-child(7) { text-align: right; }
    .operation-table td:last-child { max-width: 26ch; }
    .operation-list th, .operation-list td {
        font-size: 80%;
    }

    .operation-table td {
        padding: 0 0.15rem;
    }

    .change-list th {
        font-size: 70%;
    }
    .change-list td {
        font-size: 85%;
        padding: 0 0.2rem;
    }
    .change-list th:first-child { width: 2ch; }
    .change-list th:nth-child(2) { width: 2ic; }
    .change-list th:nth-child(3), .change-list th:nth-child(4) {
        width: 2ic;
    }
    .dia-type-navi p {
        font-size: 80%;
    }
}

@media screen and (max-width: 480px) {
    .operation-list th, .operation-list td {
        font-size: 70%;
    }
    .daytime-category-info th, .daytime-category-info td {
        font-size: 80%;
    }
    .contents p, .contents dd, .contents li {
        font-size: 90%;
    }
}

/* ダークモード対応 */
.dark-theme {
    #background {
        color: #E0E0E0;
    }

    a:link {
        color: #66CCFF;
    }
    a:visited {
        color: #FF99FF;
    }
    .special-remark {
        color: #FF6666;
    }

    #background.weekdays {
        background-color: #003300;
    }
    #background.saturdays {
        background-color: #333300;
    }
    #background.holidays {
        background-color: #330033;
    }

    header.weekdays {
        background: linear-gradient(to right, #004400, #008800);
        border-color: #00CC00;
    }
    header.saturdays {
        background: linear-gradient(to right, #666600, #CCCC00);
        border-color: #FFFF33;
    }
    header.holidays {
        background: linear-gradient(to right, #660033, #FF66AA);
        border-color: #FF3399;
    }

    .update-info dt {
        border-bottom: 3px ridge #66AAFF;
    }

    .dia-type-navi-weekdays {
        background-color: #006600;
        color: #DDFFDD;
    }
    .dia-type-navi-saturdays {
        background-color: #CCCC33;
        color: #222200;
    }
    .dia-type-navi-holidays {
        background-color: #CC0066;
        color: #FFCCEE;
    }

    table,th, td {
        border-color: #AAAAAA;
    }
    td.henkou, span.henkou {
        color: #FF6666;
    }
    tr.henkou2, td.henkou2 {
        background-color: #666633;
        color: #FFAAAA;
    }
    tr.henkou3, td.henkou3 {
        background-color: #663366;
        color: #FF8888;
    }
    tr.henkou4, td.henkou4 {
        background-color: #664422;
        color: #FF8888;
    }
    .operation-table th, .operation-table td {
        border-left-color: #AAAAAA;
    }
    tr.extra-car-operation {
        background-color: #006680;
    }
    tr.suspended-car-operation {
        background-color: #666666;
    }
}