html, body {
    font-family: '"メイリオ"', Arial, sans-serif, Helvetica;
    margin: 0px;
    padding: 0px;
}

div.spinner_box {
    width: 100%;
    margin-top: calc(min(100vh, 100%) / 2 - 16px);
    text-align: center;
}

div.spinner_body {
    width: 32px;
    height: 32px;
    margin: auto;
    border: 4px #ddd solid;
    border-top: 4px teal solid;
    border-radius: 50%;
    animation: sp-anime 1.0s infinite linear;
}

div.spinner_message {
    text-align: center;
    margin: auto;
    font-size: 15px;
    color: black;
}

@keyframes sp-anime {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes blink {
    0%,100% {
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    65% {
        opacity: 1;
    }
}

/* */
div.toolbar {
    display: grid;
    width: 100%;
    position: sticky;
    top: 0px;
    left: 0px;
    background-color: lightgray;
    color: teal;
    z-index: 10000;
}

img.toolbar_logo {
    grid-area: logo;
    margin-left: 10px;
}

div.toolbar_car {
    grid-area: car;
    text-align: left;
    overflow: hidden;
}

div.toolbar_name {
    grid-area: name;
    text-align: left;
    overflow: hidden;
}

div.toolbar_camera {
    grid-area: camera;
}

div.toolbar_menu {
    grid-area: menu;
}

button.toolbar_btn {
    grid-area: menu;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 3px 5px;
    outline: none;
    padding: 1px;
    float: left;
    background-color: lightgray;
    border: none;
    color: white;
}

button.toolbar_btnt:hover,
button.toolbar_btnt:focus {
    box-shadow: 0px 0px 10px 2px rgb(255 255 255 / 50%);
}

img.toolbar_btn_icon {
    display: block;
    margin: auto auto 15px auto;
    vertical-align: middle;
    border: none;
}

span.toolbar_btn_title {
    display: inline-block;
    position: fixed;
    transform: translateX(-50%);
    padding: 2px 0px;
    white-space: nowrap;
    font-size: 10px;
    line-height: 12px;
    width: max-content;
    color: teal;
}



input.toolbar_menu_check {
    display: none;
}

label.toolbar_menu_label {
    grid-area: menu;
    display: flex;
    height: 40px;
    width: 40px;
    justify-content: center;
    align-items: center;
    z-index: 90;
}

    label.toolbar_menu_label span,
    label.toolbar_menu_label span:before,
    label.toolbar_menu_label span:after {
        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: teal;
        position: absolute;
    }

        label.toolbar_menu_label span:before {
            bottom: 8px;
        }

        label.toolbar_menu_label span:after {
            top: 8px;
        }

div.toolbar_menu_box {
    position: fixed;
    right: 200vw;
    width: max-content;
    height: max-content;
    display: grid;
    grid-auto-rows: 45px;
    grid-template-columns: max-content;
    background-color: #F0FFF0;
}

button.toolbar_menu_box_item {
    grid-column: 1 / 2;
    color: teal;
    font-size: 15px;
    line-height: 45px;
    text-align: left;
    margin: 0px 5px;
    border: none;
    border-top: solid 1px teal;
    background-color: #F0FFF0;
}

#toolbar_menu_check:checked ~ label.toolbar_menu_label span {
    background-color: rgba(255, 255, 255, 0); /*メニューオープン時は真ん中の線を透明にする*/
}

    #toolbar_menu_check:checked ~ label.toolbar_menu_label span::before {
        bottom: 0;
        transform: rotate(45deg);
    }

    #toolbar_menu_check:checked ~ label.toolbar_menu_label span::after {
        top: 0;
        transform: rotate(-45deg);
    }

#toolbar_menu_check:checked ~ div.toolbar_menu_box {
    right: 0px;
}

iframe.lesson_video_video {
    width: 99%;
    height: 99%;
}
/*//+20240415J Vimeoを契約解除してvideo.jsを使用	↓↓↓↓↓*/
div.lesson_video_video {
    height: calc(100vh - 60px) !important;
    padding-top: initial !important;
}
/*//+20240415J Vimeoを契約解除してvideo.jsを使用	↑↑↑↑↑*/

div.ssc-checkbox-on::before {
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    content: '';
    display: block;
    height: 11px;
    margin-top: -1px;
    margin-left: 3px;
    position: absolute;
    width: 7px;
    transform: rotate(45deg);
}

/*//+20251017J 動画途中の問題に対応   ↓↓↓↓↓*/
div.ques_on {
    display: block !important;
}

div.ques_box {
    padding: 0;
    margin: 0;
    position: relative;
    grid-area: video_video;
    z-index: 100;
    display: none;
}

    div.ques_box div.ques {
        width: auto;
        height: 100%;
        aspect-ratio: 16 / 9;
        margin: auto;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
    }

        div.ques_box div.ques div.ques_img {
            max-width: 100%;
            max-height: 100%;
            padding: 0px;
            margin: auto;
        }

        div.ques_box div.ques img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            padding: 10px;
        }

        div.ques_box div.ques div.ques_msg {
            padding: 10px;
            color: black;
            margin: auto;
            text-align: left;
        }

        div.ques_box div.ques button {
            background-color: lightgray;
            border: 2px solid;
            border-color: black;
            border-radius: 20px;
            color: black;
            display: flex;
            justify-content: center;
            align-items: center;
        }

div.TypeA1 {
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-template-rows: calc(100% / 2) calc(100% / 2);
    grid-template-columns: 1fr;
    grid-template-areas:
        "msg"
        "btn1";
}

div.TypeA2 {
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-template-rows: calc(100% / 2) calc(100% / 2);
    grid-template-columns: 1fr 10px 1fr;
    grid-template-areas:
        "msg msg msg"
        "btn1 dmy1 btn2";
}

div.TypeA3 {
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-template-rows: calc(100% / 2) calc(100% / 2);
    grid-template-columns: 1fr 10px 1fr 10px 1fr;
    grid-template-areas:
        "msg msg msg msg msg"
        "btn1 dmy1 btn2 dmy2 btn3";
}

div.TypeA4 {
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-template-rows: calc(100% / 2) calc(100% / 2);
    grid-template-columns: 1fr 10px 1fr 10px 1fr 10px 1fr;
    grid-template-areas:
        "msg msg msg msg msg msg msg"
        "btn1 dmy1 btn2 dmy2 btn3 dmy3 btn4";
}

div.TypeB1 {
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-template-rows: calc(100% / 2) calc(100% / 2);
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
        "img msg"
        "btn1 btn1";
}

div.TypeB2 {
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-template-rows: calc(100% / 2) calc(100% / 2);
    grid-template-columns: 1fr 10px 1fr 10px 1fr 10px 1fr;
    grid-template-areas:
        "img img msg msg msg msg msg"
        "btn1 btn1 btn1 dmy1 btn2 btn2 btn2";
}

div.TypeB3 {
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-template-rows: calc(100% / 2) calc(100% / 2);
    grid-template-columns: 1fr 1fr 1fr 1fr 10px 1fr 1fr 1fr 1fr 10px 1fr 1fr 1fr 1fr;
    grid-template-areas:
        "img img img msg msg msg msg msg msg msg msg msg msg msg"
        "btn1 btn1 btn1 btn1 dmy1 btn2 btn2 btn2 btn2 dmy2 btn3 btn3 btn3 btn3";
}

div.TypeB4 {
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-template-rows: calc(100% / 2) calc(100% / 2);
    grid-template-columns: 1fr 10px 1fr 10px 1fr 10px 1fr;
    grid-template-areas:
        "img img msg msg msg msg msg"
        "btn1 dmy1 btn2 dmy2 btn3 dmy3 btn4";
}

div.TypeC1 {
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-template-rows: calc(100% / 3) calc(100% / 3) calc(100% / 3);
    grid-template-columns: 1fr;
    grid-template-areas:
        "img"
        "msg"
        "btn1";
}

div.TypeC2 {
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-template-rows: calc(100% / 3) calc(100% / 3) calc(100% / 3);
    grid-template-columns: 1fr 10px 1fr;
    grid-template-areas:
        "img img img"
        "msg msg msg"
        "btn1 dmy1 btn2";
}

div.TypeC3 {
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-template-rows: calc(100% / 3) calc(100% / 3) calc(100% / 3);
    grid-template-columns: 1fr 10px 1fr 10px 1fr;
    grid-template-areas:
        "img img img img img"
        "msg msg msg msg msg"
        "btn1 dmy1 btn2 dmy2 btn3";
}

div.TypeC4 {
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-template-rows: calc(100% / 3) calc(100% / 3) calc(100% / 3);
    grid-template-columns: 1fr 10px 1fr 10px 1fr 10px 1fr;
    grid-template-areas:
        "img img img img img img img"
        "msg msg msg msg msg msg msg"
        "btn1 dmy1 btn2 dmy2 btn3 dmy3 btn4";
}

    div.TypeC1 img,
    div.TypeC2 img,
    div.TypeC3 img,
    div.TypeC4 img {
        padding: 0px;
    }

/*//+20251017J 動画途中の問題に対応   ↑↑↑↑↑*/

div.ssc-checkbox-on-focus::before {
    border-right: 2px solid yellow;
    border-bottom: 2px solid yellow;
    content: '';
    display: block;
    height: 11px;
    margin-top: -1px;
    margin-left: 3px;
    position: absolute;
    width: 7px;
    transform: rotate(45deg);
}

/* */
@media screen and (max-width: 1024px) {
    div.toolbar {
        grid-template-rows: 20px 20px;
        grid-template-columns: 100px 1fr 40px 60px;
        grid-template-areas:
            "logo car camera menu"
            "logo name camera menu";
        height: 40px;
        font-size: 16px;
        line-height: 20px;
    }

    img.toolbar_logo {
        height: 40px;
    }

    div.toolbar_car {
        margin-left: 10px;
    }

    div.toolbar_name {
        margin-left: 10px;
    }

    label.toolbar_menu_label {
        height: 40px;
        width: 40px;
    }

    div.toolbar_menu_box {
        top: 40px;
    }

    button.toolbar_btn {
        height: 34px;
        width: 50px;
        font-size: 15px;
    }

    img.toolbar_btn_icon {
        width: 22px;
        height: 22px;
    }

    span.toolbar_btn_title {
        top: 23px;
    }
    /*//+20240415J Vimeoを契約解除してvideo.jsを使用	↓↓↓↓↓*/
    @media (orientation: landscape) {
        /* 横向き */
        div.lesson_video_video {
            height: calc(100vh - 40px) !important;
        }

        /*//+20251017J 動画途中の問題に対応   ↓↓↓↓↓*/
        div.ques_box {
            height: calc(100vh - 40px) !important;
        }
        /*
            div.ques_box div.ques {
                width: auto;
                height: 100%;
                aspect-ratio: 16 / 9;
                margin: auto;
                position: absolute;
                top: 0;
                left: 50%;
                transform: translate(-50%, 0);
            }

                div.ques_box div.ques div.ques_img {
                    height: calc((100vh - 40px) / 3) !important;
                }
        */
        /*//+20251017J 動画途中の問題に対応   ↑↑↑↑↑*/
    }

    @media (orientation: portrait) {
        /* 縦向き */
        div.lesson_video_video {
            height: calc(100vh - 160px) !important;
        }

        /*//+20251017J 動画途中の問題に対応   ↓↓↓↓↓*/
        div.ques_box {
            height: calc(100vh - 160px) !important;
        }

            div.ques_box div.ques {
                width: 100%;
                height: auto;
                aspect-ratio: 16 / 9;
                margin: auto;
                position: absolute;
                top: 50%;
                left: 0;
                transform: translate(0, -50%);
            }

                div.ques_box div.ques div.ques_img {
                    height: calc(100vw / 16 * 9 / 3) !important;
                }
        /*//+20251017J 動画途中の問題に対応   ↑↑↑↑↑*/
    }
    /*//+20240415J Vimeoを契約解除してvideo.jsを使用	↑↑↑↑↑*/
}

/* */
@media screen and (min-width: 1025px) {
    div.toolbar {
        grid-template-rows: 30px 30px;
        grid-template-columns: 140px 1fr 60px 80px;
        grid-template-areas:
            "logo car camera menu"
            "logo name camera menu";
        height: 60px;
        font-size: 21px;
        line-height: 30px;
    }

    img.toolbar_logo {
        height: 60px;
    }

    div.toolbar_car {
        margin-left: 30px;
    }

    div.toolbar_name {
        margin-left: 30px;
    }

    label.toolbar_menu_label {
        height: 60px;
        width: 60px;
    }

    div.toolbar_menu_box {
        top: 60px;
    }

    button.toolbar_btn {
        height: 54px;
        width: 70px;
        font-size: 15px;
    }

    img.toolbar_btn_icon {
        width: 32px;
        height: 32px;
    }

    span.toolbar_btn_title {
        top: 43px;
    }
}