﻿html {
    touch-action: manipulation;
}

body {
    margin: 0px;
    padding: 0px;
    font-family: 'Noto Sans JP', sans-serif;
    user-select: none;
    /*
    width: 100vw;
    height: 100vh;
    background-image: url(../images/temp/login_A.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    */
}

input[type="submit"] {
    -webkit-appearance: none;
}

/*-------------------*/
/*--amgen4--*/
/*-------------------*/

#bg_upper {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    width: 100vw;
    height: 78.9vw;
    background-image: url(../images/bg/top_j_u.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    display: none;
}

#bg_upper_top {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    width: 100vw;
    height: 74.2vw;
    background-image: url(../images/bg/top_j_u2.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    display: none;
}

#bg_bottom {
    position: absolute;
    top: 78vw;
    left: 0px;
    margin: 0px;
    padding: 0px;
    width: 100vw;
    height: 65vw;
    background-image: url(../images/bg/top_j_b.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
}

#bg_bottom_top {
    position: absolute;
    top: 71.1vw;
    left: 0px;
    margin: 0px;
    padding: 0px;
    width: 100vw;
    height: 65vw;
    background-image: url(../images/bg/top_j_b.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
}

#footer_line {
    position: absolute;
    top: 128vw;
    left: 0px;
    margin: 0px;
    padding: 0px;
    width: 100vw;
    height: 3vw;
    background-image: url(../images/bg/footer_line.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
}

#footer_line_top {
    position: absolute;
    top: 121.1vw;
    left: 0px;
    margin: 0px;
    padding: 0px;
    width: 100vw;
    height: 3vw;
    background-image: url(../images/bg/footer_line.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
}

#logo {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 134.45vw;
    left: calc(50vw - (14.6vw / 2));
    width: 14.6vw;
    height: 3.8vw;
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    opacity: 1.0;
    cursor: pointer;
}

#logo_top {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 126.2vw;
    left: calc(50vw - (14.6vw / 2));
    width: 14.6vw;
    height: 3.8vw;
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    opacity: 1.0;
    cursor: pointer;
}

/*-------------------*/
#wrap {
    position: absolute;
    top: 0;
    left 0;
    margin: 0;
    width: 100%;
    height: 100%;
    /*background-image: url(../cont_img/template3_j.png);*/
    background-repeat: no-repeat;
    background-size: cover;
}

#btnLang {
    z-index: 10;
    position: absolute;
    top: 6vw;
    left: 80.5vw;
    margin: 0;
    width: 13.8vw;
    height: 6vw;
    background-image: url(../images/lang_j.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    cursor: pointer;
}

/*--------------
    TOP
--------------*/


#top_Div {
}

#btn_start {
    position: absolute;
    z-index: 5;
    margin: 0px;
    padding: 0px;
    top: 55.1vw;
    left: calc((100vw - 33.7vw) / 2);
    width: 33.7vw;
    height: 36.2vw;
    cursor: pointer;
    background-image: url(../images/btn_start_j.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    display: none;
}

#kanshu {
    position: absolute;
    top: 107.2vw;
    left: calc(50% - (4.8% / 2));
    width: 4.8%;
    text-align: center;
    color: #0063c3;
    /*color: #ff0000;*/
    font-size: 1.9vw;
    /*padding-bottom: 0.18vw;*/
    padding-bottom: 0.1vw;
    border-bottom: solid 0.5px #0063c3;
}

#prof {
    position: absolute;
    top: 111.5vw;
    width: 100%;
    text-align: center;
    color: #0063c3;
    /*color: #ff0000;*/
    font-size: 1.9vw;
    line-height: 3.1vw;
}

#excuse {
    position: absolute;
    top: 120.5vw;
    left: calc(50% - (81vw / 2));
    width: 81vw;
    text-align: left;
    color: #0063c3;
    /*color: #ff0000;*/
    font-size: 1.7vw;
    line-height: 2.3vw;
    letter-spacing: 0.005em;
}

#footer_top {
    position: absolute;
    text-align: center;
    top: 133vw;
    width: 100%;
    height: 3.7vw;
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
}



/*--------------
    CASE SELECT
--------------*/

#case_select_Div {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 0vw;
    left: 0px;
    width: 100%;
    text-align: center;
    color: #0063c3;
    font-size: 3.3vw;
    display: none;
}

#btn_case01_j, #btn_case02_j, #btn_case03_j {
    position: absolute;
    /*left: calc((100vw - 71.09vw) / 2);*/
    left: 14.57vw;
    width: 71.09vw;
    height: 30vw;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    cursor: pointer;
    display: none;
}

#btn_case01_e, #btn_case02_e, #btn_case03_e {
    position: absolute;
    /*left: calc((100vw - 86.9vw) / 2);*/
    left: 6.7vw;
    width: 86.9vw;
    height: 30vw;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    cursor: pointer;
    display: none;
}

#btn_case01_j, #btn_case01_e {
    top: 35vw;
}

#btn_case02_j, #btn_case02_e {
    top: 64vw;
}

#btn_case03_j, #btn_case03_e {
    top: 93vw;
}

#btn_case01_j {
    background-image: url(../images/btn_case01_j.png);
}

#btn_case02_j {
    background-image: url(../images/btn_case02_j.png);
}

#btn_case03_j {
    background-image: url(../images/btn_case03_j.png);
}

#btn_case01_e {
    background-image: url(../images/btn_case01_e.png);
}

#btn_case02_e {
    background-image: url(../images/btn_case02_e.png);
}

#btn_case03_e {
    background-image: url(../images/btn_case03_e.png);
}


/*--------------
    GENDER SELECTOR
--------------*/

#gender_selecter_Div {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 0vw;
    left: 0px;
    width: 100%;
    height: calc(130vw - 60.4vw);
    text-align: center;
    color: #0063c3;
    font-size: 3.2vw;
    display: none;
}

#btn_man, #btn_woman {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 69.4vw;
    width: 32.4vw;
    height: 37.9vw;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    display: none;
}

#btn_man {
    left: 14.2vw;
    background-image: url(../images/btn_man_j.png);
}

#btn_woman {
    left: 54.6vw;
    background-image: url(../images/btn_woman_j.png);
}


/*--------------
    SIMULATOR VIEW
--------------*/

#sim_view_set {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 53.96vw;
    left: 6.5vw;
    width: 87.2vw;
    height: 83.78vw;
    text-align: center;
    color: #0063c3;
    font-size: 3.2vw;
    background-image: url(../images/sim_base_j.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    display: none;
}

#main_view {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 0vw;
    left: 0vw;
    width: 69.87vw;
    height: 49.39vw;
}

#fview_Img {
    width: 100%;
    object-fit: cover;
}

#btn_mag {
    position: absolute;
    z-index: 10;
    margin: 0px;
    padding: 0px;
    top: calc(100% - 9.87vw);
    left: calc(100% - 9.87vw);
    width: 9.87vw;
    height: 9.87vw;
    background-image: url(../images/mag_plus.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    cursor: pointer;
}


#btnIndicator, #btnPics {
    z-index: 5;
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 5.97vw;
    left: 71.64vw;
    width: 13.78vw;
    height: 41.64vw;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
}

#btnPics {
    background-image: url(../images/sim_btn/sbtn_img_m.png);
}

#btnIndicator {
    background-image: url(../images/sim_btn/btn_frame_1.png);
}

#btn_f, #btn_s, #btn_b {
    z-index: 10;
    position: absolute;
    margin: 0px;
    padding: 0px;
    left: 72.31vw;
    width: 12.43vw;
    height: 12.43vw;
    background-image: url(../images/sim_btn/btn_clear.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    cursor: pointer;
}

#btn_f {
    top: 6.64vw;
}

#btn_s {
    top: 20.54vw;
}

#btn_b {
    top: 34.51vw;
}

#sim_slider {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 60.18vw;
    left: 0vw;
    width: 100%;
    height: 19.6vw;
    appearance: none;
    cursor: pointer;
    user-select: none;
}

#indicator {
    position: absolute;
    z-index: 5;
    margin: 0px;
    padding: 0px;
    width: 9.7vw;
    height: 6vw;
    top: 52.13vw;
    font-size: 3vw;
    text-align: center;
    background-image: url(../images/indicator.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom center;
    user-select: none;
}

#scale {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 65.91vw;
    left: 2.2vw;
    width: 80.5vw;
    height: 10vw;
    background-image: url(../images/scale.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    user-select: none;
}

#slider-round {
    position: absolute;
    width: 75.48vw;
    top: 0vw;
    left: 5.7vw;
    height: 4vw;
    border-radius: 2vw;
    background-color: #b3b3b3;
    user-select: none;
}

    #slider-round .noUi-connects {
        border-radius: 2vw;
    }

    #slider-round .noUi-connect {
        background-color: #0063c3;
    }

    #slider-round .noUi-handle {
        top: -1.2vw;
        width: 6vw;
        height: 6vw;
        border-radius: 3.2vw;
        border: 0.8vw solid white;
        background-color: #0063c3;
        box-shadow: 0 0 1vw gray;
        cursor: pointer;
    }

        #slider-round .noUi-handle::after {
            display: none;
        }

        #slider-round .noUi-handle::before {
            display: none;
        }

#btn_back {
    position: absolute;
    z-index: 5;
    margin: 0px;
    padding: 0px;
    top: 133.2vw;
    left: 7vw;
    width: 4.3%;
    height: 5.4vw;
    cursor: pointer;
}

    #btn_back img {
        width: 100%;
        object-fit: contain;
    }

#btn_home {
    position: absolute;
    z-index: 5;
    margin: 0px;
    padding: 0px;
    top: 133.2vw;
    left: 89vw;
    width: 4.3%;
    height: 5.4vw;
    cursor: pointer;
}

    #btn_home img {
        width: 100%;
        object-fit: contain;
    }


#frontView {
    position: absolute;
    top: 10vw;
    left: calc((820 - 400) / 2);
    display: none;
}

#sideView {
    position: absolute;
    top: calc(10vw + 336px + 3vw);
    left: calc((820 - 400) / 2);
    display: none;
}

#loadingCover {
    position: absolute;
    z-index: 10;
    background-color: white;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    opacity: 0.5;
    display: none;
}

#loading_anim {
    position: absolute;
    top: 50%;
    transform: scale(2);
    left: calc(50% - (23px / 2));
}


/*-----------login-----------*/
#loginRect {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 27.2vw;
    left: calc((100vw - 82.9vw) / 2);
    width: 82.9vw;
    height: 50vw;
    text-align: center;
    background-color: #0063c3;
    /*
    background-color: olivedrab;
    background-image: url(../images/login_template.png);
    background-size: contain;
    background-position: top left;
        */
}

#loginRectTitle {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 4.52vw;
    left: calc((100% - 66.8vw) / 2);
    width: 66.8vw;
    height: 11.95vw;
    text-align: center;
    font-size: 2.88vw;
    color: #ffffff;
}

    #loginRectTitle .loginRectTitle_e {
        font-size: 2vw;
    }


#login_fail_A, #login_fail_B {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 11.95vw;
    left: calc((100% - 66.8vw) / 2);
    width: 66.8vw;
    height: 5.4vw;
    text-align: center;
    font-weight: bold;
    color: red;
    display: none;
}

#forms {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 16.83vw;
    left: calc((100% - 66.8vw) / 2);
    width: 66.4vw;
    height: 16.83vw;
}

#loginIdName, #loginIdArea, #loginPwName, #loginPwArea {
    position: absolute;
    margin: 0px;
    padding: 0px;
    height: 7.44vw;
}

#loginIdName, #loginPwName {
    left: 0vw;
    width: 15.4vw;
    color: #ffffff;
    text-align: left;
    font-size: 2.5vw;
    /*上下中央揃え*/
    display: flex;
    align-items: center;
    /*ここまで*/
}

#loginIdArea, #loginPwArea {
    left: 15.4vw;
    width: 50.5vw;
    text-align: left;
    font-size: 1.4em;
}

#loginIdName, #loginIdArea {
    top: 0vw;
}

#loginPwName, #loginPwArea {
    top: 9.51vw;
}

.input_login {
    width: 100%;
    height: 100%;
    font-size: 2.88vw;
}

#loginButton {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 21.95vw;
    left: calc((100% - 26.46vw) / 2);
    width: 26.46vw;
    height: 6.58vw;
}

    #loginButton input {
        width: 100%;
        height: 100%;
        font-size: 2.1vw;
        font-weight: bold;
        color: #0063c3;
        border-radius: 3.29vw;
        border-style: none;
        background-color: #ffffff;
        cursor: pointer;
    }

#noticeFU {
    position: absolute;
    top: 82vw;
    left: 0px;
    margin: 0px;
    padding: 0px;
    width: 100vw;
    height: 44.9vw;
    text-align: center;
    color: #0063c3;
}

    #noticeFU br {
        line-height: 0.5vw;
    }

.noticeTitleJ {
    font-weight: bold;
    font-size: 2.6vw;
}


.noticeTitleE {
    font-weight: bold;
    font-size: 1.9vw;
    line-height: 3.1vw;
}

#noticeTitleE {
    position: absolute;
    top: 17vw;
    width: 100vw;
    text-align: center;
    /*color: green;*/
    display: block;
}

#noticeJ_PC {
    font-size: 1.7vw;
    line-height: 1vw;
    /*color: red;*/
}


/*
.noticeJ {
    font-size: 1.73vw;
    line-height: 1vw;
    color: red;
}
*/

/*
.noticeE {
    font-size: 1.63vw;
    line-height: 2.4vw;
}
*/

#noticeE_PC {
    position: absolute;
    top: 20vw;
    width: 100vw;
    text-align: center;
    /*color: green;*/
    display: block;
    font-size: 1.6vw;
    line-height: 2.4vw;
}

.noticeBR {
    line-height: 1vw;
}

#noticeJ_IP {
    display: none;
}

#noticeE_IP {
    display: none;
}

#login_Logo {
    position: absolute;
    top: 31.5vw;
    left: 0vw;
    width: 100vw;
    height: 3.8vw;
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

#notice_period {
    position: absolute;
    top: 39vw;
    width: 100vw;
    text-align: center;
    font-size: 1.73vw;
    display: block;
}

/* ==================================== */
@media screen and (max-width: 640px) {
    #topLogo {
        top: 45vw;
    }

    .noticeTitleJ {
        position: absolute;
        top: 0vw;
        width: 100vw;
        text-align: center;
        /*color: green;*/
        display: block;
    }

    #noticeTitleE {
        position: absolute;
        top: 17vw;
        width: 100vw;
        text-align: center;
        /*color: green;*/
        display: block;
    }

    .noticeBR {
        line-height: 0.01vw;
    }

    #noticeJ_IP {
        position: absolute;
        top: 5vw;
        width: 100vw;
        text-align: center;
        font-size: 1.73vw;
        line-height: 3vw;
        display: block;
        /*color: red;*/
    }

    #noticeE_IP {
        position: absolute;
        top: 20vw;
        width: 100vw;
        text-align: center;
        font-size: 1.6vw;
        line-height: 2.5vw;
        display: block;
        /*color: red;*/
    }

    #noticeJ_PC {
        display: none;
    }

    #noticeE_PC {
        display: none;
    }

    #topLogo {
        top: 70vw;
    }

    #slider-round {
        left: 4.5vw;
    }
}

/* ==================================== */

@media screen and (max-width: 480px) {

    #footer_line {
        top: 165vw;
    }

    #logo {
        top: 174.45vw;
    }

    #sim_view_set {
        width: 87.2vw;
        height: 84.15vw;
        background-image: url(../images/sim_base_m_j.png);
    }

    #main_view {
        width: 87.2vw;
        height: 61.7vw;
    }

    #btnIndicator, #btnPics {
        top: 62vw;
        height: 22.43vw;
        width: 100%;
        left: 0vw;
    }

    #btnPics {
        background-image: url(../images/sim_btn/sbtn_img_m_m.png);
    }

    #btnIndicator {
        background-image: url(../images/sim_btn/btn_frame_m_1.png);
    }

    #btn_f, #btn_s, #btn_b {
        top: 63.9vw;
        width: 19.5vw;
        height: 17.8vw;
    }

    #btn_f {
        left: 22.43vw;
    }

    #btn_s {
        left: 44.26vw;
    }

    #btn_b {
        left: 66.09vw;
    }

    #sim_slider {
        top: 95vw;
    }

    #slider-round {
        left: 5vw;
    }

    #indicator {
        top: 85.5vw;
        padding-left: 3.5vw;
        font-size: 2vw;
    }

    #scale {
        top: 103vw;
        left: 4vw;
    }

    #btn_back {
        top: 173.2vw;
    }

    #btn_home {
        top: 173.2vw;
    }

    .noticeTitleJ {
        position: absolute;
        top: 0vw;
        width: 100vw;
        text-align: center;
        /*color: green;*/
        display: block;
    }

    #noticeTitleE {
        position: absolute;
        top: 17vw;
        width: 100vw;
        text-align: center;
        /*color: green;*/
        display: block;
    }

    .noticeBR {
        line-height: 0.01vw;
    }

    #noticeJ_IP {
        position: absolute;
        top: 5vw;
        width: 100vw;
        text-align: center;
        font-size: 1.73vw;
        line-height: 3vw;
        display: block;
        /*color: red;*/
    }

    #noticeE_IP {
        position: absolute;
        top: 20vw;
        width: 100vw;
        text-align: center;
        font-size: 1.6vw;
        line-height: 2.5vw;
        display: block;
        /*color: red;*/
    }

    #noticeJ_PC {
        display: none;
    }

    #noticeE_PC {
        display: none;
    }

    #topLogo {
        top: 70vw;
    }

    #loginIdName {
        top: 1.5vw;
    }

    #loginPwName {
        top: 12vw;
    }
}

@media screen and (min-width: 1020px) {
    #slider-round {
        left: 6.3vw;
    }
}
