@charset "utf-8";

.must {
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
}

.empty {
    color: #ff0000;
    font-weight: bold;
    font-style: italic;
}

.change {
    font-style: italic;
}

@keyframes flash {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.flash-text {
    animation: flash 1.5s infinite;
}

table {
    text-align: center;
}

.alert {
    text-align: center !important;
    background-color: rgba(255, 99, 71, 0.5) !important;
}

.alert-success {
    text-align: center !important;
    background-color: rgba(30, 144, 255, 0.5) !important;
}

.label-text {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font-weight: bold;
}

.link {
    color: blue;
}

.link:hover {
    color: red;
}

.prediction {
    color: red;
}

.red {
    color: red;
    font-size: x-large;
}

.taikai {
    font-size: 20px;
    font-weight: bold;
}

.bumon {
    font-size: 20px;
    font-weight: bold;
}

.leg {
    font-style: italic;
    font-weight: bold;
}

#leg_map {
    position: flex;
    width: 70%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.map_text {
    text-align: center;
    font-weight: bold;
}

.select_time {
    text-align: center;
}

#time_selector {
    font-size: 20px;
    text-align: center;
    text-align-last: center;
}

.th_lines {
    border: 0.5px #c0c0c0 solid;
    background-color: #006cb7;
    color: #ffffff;
}

.td_lines {
    border: 0.5px #c0c0c0 solid;
}

.leg_table .tr_lines:nth-child(odd) {
    background-color: #eeeeef !important;
}

.leg_table .tr_lines:nth-child(even) {
    background-color: #ffffff !important;
}

.th_lines_show {
    border: 0.5px #c0c0c0 solid;
    background-color: #006cb7;
    color: #ffffff;
}

.td_lines_show {
    border: 0.5px #c0c0c0 solid;
}

.odd-row {
    background-color: #eeeeef;
    /* 白背景 */
}

.even-row {
    background-color: #ffffff;
    /* 青背景 */
}

.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.pagination-wrapper .pagination {
    display: flex;
    list-style: none;
    padding: 0;
}

.pagination-wrapper .pagination li {
    margin: 0 5px;
}

.pagination-wrapper .pagination li a {
    padding: 10px 15px;
    border: 1px solid #ddd;
    color: #007bff;
    text-decoration: none;
}

.pagination-wrapper .pagination li a:hover {
    background-color: #f1f1f1;
    border-color: #007bff;
}

.taikai_logo {
    width: 80%;
    height: auto;
    text-align: center;
    margin: 0 auto;
}

.auto_refresh {
    font-weight: bold;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #2196F3;
}

input:checked+.slider:before {
    transform: translateX(26px);
}

.search_box {
    width: 300px;
    border: 0.5px solid #000000;
    background-color: #ffffff;
}

.result_select {
    border: 0.5px solid #000000;
    background-color: #ffffff;
}

.digital-clock {
    font-family: 'Digital-7', 'Courier New', Courier, monospace;
    color: #ffff00;
    background-color: #333333;
    padding: 10px;
    border-radius: 10px;
    display: inline-block;
    letter-spacing: 0.1em;
}

.origin-add {
    text-align: center;
    margin: 30px 0 10px 0;
}

.origin-text {
    font-weight: bold;
}

.origin-memo {
    font-size: 0.9em;
    color: #444;
}

.pdf-button {
    background: #e0e3e7 !important;
    color: #222 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    margin-right: 10px !important;
    font-weight: bold !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 2px 4px #0001 !important;
    font-size: 1.05em !important;
}

.pdf-button:hover {
    background: #d0d3d7 !important;
    color: #111 !important;
}

.jpg-button {
    background: #e0e3e7 !important;
    color: #222 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-weight: bold !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 2px 4px #0001 !important;
    font-size: 1.05em !important;
}

.jpg-button:hover {
    background: #d0d3d7 !important;
    color: #111 !important;
}

.image-button:hover {
    background: #d0d3d7 !important;
    color: #111 !important;
}

.download-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.certificate-preview-area {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 1000px;
    width: 100%;
    /* 白背景枠の高さに合わせて調整 */
}

.certificate-preview-area img {
    max-width: 800px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

#custom_image_preview {
    left: 260px !important;
    bottom: 80px !important;
    width: 330px !important;
    height: 200px !important;
}

@media (max-width: 768px) {
    .must {
        font-size: 10px;
    }

    .taikai_welcome {
        font-size: 13px;
    }

    .bumon {
        font-size: 15px;
    }

    .bumon_name {
        font-size: 13px !important;
    }

    #leg_map {
        width: 100%;
        height: 100%;
    }

    .th_lines {
        font-size: 10px;
    }

    .td_lines {
        font-size: 10px;
    }

    .th_lines_show {
        font-size: 10px;
    }

    .td_lines_show {
        font-size: 10px;
    }

    .cation {
        font-size: 13px;
    }

    .red {
        font-size: 15px;
    }

    .auto_refresh {
        font-size: 11px;
    }

    .pagination-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        padding-left: 0;
        padding-right: 8px;
        box-sizing: border-box;
        display: block;
    }

    .pagination-wrapper .pagination {
        flex-wrap: nowrap;
        min-width: max-content;
        margin-left: 0 !important;
        padding-left: 0 !important;
        justify-content: flex-start !important;
    }

    .pagination-wrapper .pagination li {
        margin: 0 5px;
        flex: 0 0 auto;
    }

    .download-buttons {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .download-buttons .btn {
        width: 90vw !important;
        max-width: 350px;
        min-width: 180px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
        justify-content: center;
        text-align: center;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex;
        align-items: center;
    }

    .certificate-preview-area {
        display: block;
        min-height: unset;
        padding: 0;
    }

    .certificate-preview-area img {
        max-width: 100vw;
        width: 100%;
        height: auto;
    }

    #custom_image_preview {
        left: 10% !important;
        bottom: 7% !important;
        width: 41% !important;
        height: 18% !important;
    }

    .search-help {
        font-size: 12px;
        margin-top: 10px;
        padding-left: 15px;
    }

    .search-box {
        padding-left: 15px;
    }

    .top-page {
        margin-left: 15px;
    }
}