/*潮見表*/
#tide-table {
    width: 100%;
    margin: 20px 0;
    user-select: none;
}

/*テーブル*/
#tide-table table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

#tide-table table tbody {
    padding: 5px;
}

#tide-table table tbody tr {
    border-bottom: 1px solid #696969;
    border-left: 1px solid #696969;
}

#tide-table table tbody tr:nth-child(even) {
    background: #f5f5f5;
}

#tide-table table tbody tr.today {
    background: #fafad2;
}

#tide-table table tbody tr th {
    color: black;
    font-weight: bold;
    padding: 5px;
    background: #c9c9c9;
}

#tide-table table tbody tr.today td {
    font-weight: bold;
}

#tide-table table tbody tr th,
#tide-table table tbody tr td {
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid #696969;
}

@media print,
screen and (max-width: 744px) {

    #tide-table table tbody tr td.full,
    #tide-table table tbody tr td.low {
        font-size: 1.1rem;
    }
}

/*ヘッダー（年月）*/
#tide-table table tbody tr.ym {
    border-top: 1px solid #696969;
}

#tide-table table tbody tr.ym th ul {
    display: flex;
}

#tide-table table tbody tr.ym th ul li {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#tide-table table tbody tr.ym th ul li.this {
    width: 50%;
    padding: 10px;
    font-size: 1.5em;
}

#tide-table table tbody tr.ym th ul li.button a {
    padding: 5px 10px;
    color: #333;
    border: 1px solid #696969;
    border-radius: 5px;
    background-color: #f1f1f1;
    transition: 0.3s;
}

#tide-table table tbody tr.ym th ul li.button a:hover {
    transform: translateY(3px);
    text-decoration: none;
}

/*日付*/
#tide-table table tbody tr td.day {
    color: black;
}

/*日曜日*/
#tide-table table tbody tr td.red {
    color: orangered;
}

/*土曜日*/
#tide-table table tbody tr td.blue {
    color: royalblue;
}

/*潮汐*/
#tide-table table tbody tr td.tide-level {
    color: black;
    font-weight: bold;
}

/*注釈*/
#tide-table table tbody tr.annotation td {
    padding: 10px;
    background: #dcdcdc;
}

/*データ提供*/
#tide-table table tbody tr.data-from {
    border-bottom: none;
    border-left: none;
}

#tide-table table tbody tr.data-from td {
    padding: 10px 0;
    text-align: right;
    border-right: none;
}