@font-face {
    font-family: "UDShinGoNTPr6N";
    font-weight: 400;
    src: url("../AM-JP-UDShinGoNTPr6N-Reg.otf");
}

@font-face {
    font-family: "UDShinGoNTPr6N";
    font-weight: 600;
    src: url("../AM-JP-UDShinGoNTPr6N-DeBold.otf");
}

@font-face {
    font-family: "HiraginoKakuGothicPro";
    font-weight: 400;
    src: url("../Hiragino Kaku Gothic Pro W3.otf");
}

@font-face {
    font-family: "HiraginoKakuGothicPro";
    font-weight: 600;
    src: url("../Hiragino Kaku Gothic Pro W6.otf");
}

@font-face {
    font-family: "ShinGoR";
    src: url("../ShinGoR_v2.ttf");
}

@font-face {
    font-family: "GenJyuuGothicX_B";
    src: url("../GenJyuuGothicX-P-Bold.ttf");
}

@font-face {
    font-family: "NHK-Clock";
    src: url("../NHK-Clock_TTF.ttf");
}

:root {
    --standard-height: 1.5vw;
    --lv1: #0099D6;
    --lv2: #fdf400;
    --lv3: #A71111;
    --lv4: #CD02F7;
    --lv1Text: #fff;
    --lv2Text: #000;
    --lv3Text: #fff;
    --lv4Text: #fff;
}

body {
    margin: 0;
    padding: 0;
    background: #000;
    display: flex;
    align-items: center;
    height: 100vh;
}

.wapper {
    width: 70%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
    display: flex;
    .clock {
        font-size: calc(2 * var(--standard-height));
        font-family: "NHK-Clock";
        position: absolute;
        top: calc(2.3 * var(--standard-height));
        right: calc(38.45 * var(--standard-height));
        z-index: 50;
        letter-spacing: calc(-.125 * var(--standard-height));
        color: #fff;
        text-shadow: calc(0.000 / 24 * var(--standard-height))  calc(2.000 / 24 * var(--standard-height)) #000,
                     calc(0.765 / 24 * var(--standard-height))  calc(1.848 / 24 * var(--standard-height)) #000,
                     calc(1.414 / 24 * var(--standard-height))  calc(1.414 / 24 * var(--standard-height)) #000,
                     calc(1.848 / 24 * var(--standard-height))  calc(0.765 / 24 * var(--standard-height)) #000,
                     calc(2.000 / 24 * var(--standard-height))  calc(0.000 / 24 * var(--standard-height)) #000,
                     calc(1.848 / 24 * var(--standard-height))  calc(-0.765 / 24 * var(--standard-height)) #000,
                     calc(1.414 / 24 * var(--standard-height))  calc(-1.414 / 24 * var(--standard-height)) #000,
                     calc(0.765 / 24 * var(--standard-height))  calc(-1.848 / 24 * var(--standard-height)) #000,
                     calc(0.000 / 24 * var(--standard-height))  calc(-2.000 / 24 * var(--standard-height)) #000,
                     calc(-0.765 / 24 * var(--standard-height)) calc(-1.848 / 24 * var(--standard-height)) #000,
                     calc(-1.414 / 24 * var(--standard-height)) calc(-1.414 / 24 * var(--standard-height)) #000,
                     calc(-1.848 / 24 * var(--standard-height)) calc(-0.765 / 24 * var(--standard-height)) #000,
                     calc(-2.000 / 24 * var(--standard-height)) calc(-0.000 / 24 * var(--standard-height)) #000,
                     calc(-1.848 / 24 * var(--standard-height)) calc(0.765 / 24 * var(--standard-height)) #000,
                     calc(-1.414 / 24 * var(--standard-height)) calc(1.414 / 24 * var(--standard-height)) #000,
                     calc(-0.765 / 24 * var(--standard-height)) calc(1.848 / 24 * var(--standard-height)) #000,
                     0 0 calc(.2 * var(--standard-height)) #000,
                     0 0 calc(.2 * var(--standard-height)) #000,
                     0 0 calc(.2 * var(--standard-height)) #000;
    }

    .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* background-image: url("../sample.png"); */
        background-image: url("../nhkBg.png");
        background-size: cover;
        background-position: center;
        z-index: 0;
    }
}

.control {
    width: 30%;
    aspect-ratio: 16 / 21;
    background: rgb(54, 54, 54);
    overflow: auto;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    color: #fff;
}

.control {
    font-family: "HiraginoKakuGothicPro";
    .container {
        padding: 0 calc(.25 * var(--standard-height));
        display: flex;
        flex-wrap: wrap;
    }

    .title {
        width: 100%;
        font-size: calc(1.5 * var(--standard-height));
        background-color: #387691;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: calc(1.25 * var(--standard-height));
    }

    > *:not(:first-child) {
        margin-top: calc(.25 * var(--standard-height));
    }

    .btn {
        background-color: #5b5b5b;
        color: #fff;
        font-size: var(--standard-height);
        border-radius: calc(.25 * var(--standard-height));
        cursor: pointer;
        margin: calc(.25 * var(--standard-height)) 0 0 calc(.25 * var(--standard-height));
        padding: 0 calc(.25 * var(--standard-height));
    }

    .btn:hover {
        background-color: #979797;
    }

    .btn.focus {
        background-color: #8cfd84;
        color: #000;
        font-weight: 600;
    }

    .screen {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .info {
        .area {
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            width: 100%;
        }

        .detail {
            font-size: var(--standard-height);
            width: 100%;
            .area {
                width: calc(9.5 * var(--standard-height));
                display: inline-block;
                font-weight: 600;
                font-size: calc(.85 * var(--standard-height));
            }

            &.lv1 {
                background: var(--lv1);
                color: var(--lv1Text);
            }

            &.lv2 {
                background: var(--lv2);
                color: var(--lv2Text);
            }

            &.lv3 {
                background: var(--lv3);
                color: var(--lv3Text);
            }

            &.lv4 {
                background: var(--lv4);
                color: var(--lv4Text);
            }
        }
    }

    .input {
        .area, .station {
            font-size: calc(.85 * var(--standard-height));
            width: calc(9.5 * var(--standard-height));
            display: inline-block;

            &.whole {
                color: #a5cfff;
                font-style: italic;
            }
        }

        .parent {
            color: #a5cfff;
            font-weight: 600;
            margin-right: calc(.125 * var(--standard-height));
            font-size: calc(.6 * var(--standard-height));
        }

        .detail {
            display: flex;
            margin-top: calc(.25 * var(--standard-height));
        }

        .confirm {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: calc(.25 * var(--standard-height));
        }

        input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            margin: 0;
        }

        input[type="number"] {
            font-family: "HiraginoKakuGothicPro";
            width: calc(1.5 * var(--standard-height));
            font-size: var(--standard-height);
            padding: 0 calc(.25 * var(--standard-height));
            border-radius: calc(.125 * var(--standard-height));
            border: none;
            background-color: #fff;
            color: #000;
            margin-left: calc(.25 * var(--standard-height));
            &.time {
                width: calc(3 * var(--standard-height));
            }
        }
    }
}