/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Author     : kojima
*/
@media screen and (min-width: 1921px){
    html, body {
        background-color: #fff;
        color: #333333;
        font-family: "Segoe UI";
        font-weight: bold;
        height: calc(100vw*880/1920);
        width: calc(100vw*1920/1920);
        margin: 0 auto;

        font-size: calc(100vw*20/1920);
        line-height: 1.2;
    }

    .content {
        text-align: center;
    }

    .pos-ref {
        position: relative;
    }

    .header {
        width: 100%;
        height: calc(100vw*40/1920);
    }

    .header_title {
        font-size: calc(100vw*30/1920);
        position: absolute;
        top: calc(100vw*5/1920);
        left: calc(100vw*15/1920);
    }

    .header_corp {
        position: absolute;
        top: calc(100vw*-5/1920);
        right: 0px;
    }

    .footer_rights {
        width: calc(100vw*1920/1920);
        height: calc(100vw*20/1920);
        font-size: calc(100vw*16/1920);
    }

    .main_bg {
        width: calc(100vw*1920/1920);
        height: calc(100vw*882/1920);
        overflow: hidden;
    }
    .main_bg img{
        height: calc(100vw*916/1920);
        width: calc(100vw*1920/1920);
    }


    .layer{
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .centering {
        align-items: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .centeringImg{
     margin-left: 26px;
    }

    .input_form {
        border:0;
        font-size:calc(100vw*20/1920);
        font-family:Arial, sans-serif;
        color:#111;
        height: calc(100vw*32/1920);
        width: calc(100vw*320/1920);
    }

    .frame_title {
        position: absolute;
        top: calc(100vw*183/1920);
        left: calc(100vw*708/1920);
    }

    .frame_titleText{
        color:#FFFFFF;
        font-weight: 600;
        font-size: calc(100vw*62/1920);
        text-align: center;
        width: calc(100vw*504/1920);
    }
    .frame_titleText img{
        vertical-align: middle;
        margin-top:calc(100vw*-10/1920);
        width:calc(100vw*72/1920);
        height:calc(100vw*72/1920);
    }

    .input_frame {
        color: #ffffff;
        width: calc(100vw*504/1920);
        height: calc(100vw*316/1920);
    }

    .input_BG {
        background-image: url("../img/login/bg_base02.png"); 
        height: calc(100vw*316/1920);  
        background-size: calc(100vw*504/1920) calc(100vw*316/1920); 
        opacity: 0.1;
    }

    .button_frame {
        left: calc(100vw*100/1920);
        width: calc(100vw*256/1920);
        height: calc(100vw*44/1920);
        color: #333333;
        font-size: calc(100vw*20/1920);
        font-weight: 500;
        background-image: url("../img/login/bt_login_nor.png");
        background-repeat: no-repeat;
        background-size: contain;
    }

    .button_frame:hover {
        background-image: url("../img/login/bt_login_over.png");
    }

    .button_frame:active {
        color: #FFFFFF;
        background-image: url("../img/login/bt_login_dwn.png");
    }

    .ghost_always {
        opacity: 0;
    }

    .ghost_hover:hover {
        opacity: 0;
    }

    .item_box {
        position: relative;
        width: calc(100vw*448/1920);
        font-weight: 500;
    }

    .scale_small {
        height: calc(100vw*16/1920);
    }

    .scale_middle {
        height: calc(100vw*32/1920);
    }

    .scale_large {
        height: calc(100vw*64/1920);
    }

    .go_right {
        position: absolute;
        right: 0px;
    }

    .resetCss_Button {
        padding: 0;
        border: none;
        background-color: transparent;  
    }

}


@media screen and ( max-width:1920px ){

    html, body {
        background-color: #fff;
        color: #333333;
        font-family: "Segoe UI";
        font-weight: bold;
        height: 880px;
        width: 1920px;
        margin: 0 auto;

        font-size: 20px;
        line-height: 1.2;
    }

    .content {
        text-align: center;
    }

    .pos-ref {
        position: relative;
    }

    .header {
        width: 100%;
        height: 40px;
    }

    .header_title {
        font-size: 30px;
        position: absolute;
        top: 5px;
        left: 15px;
    }

    .header_corp {
        position: absolute;
        top: -5px;
        right: 0px;
    }

    .footer_rights {
        width: 1920px;
        height: 20px;
        font-size: 16px;
    }

    .main_bg {
        width: 1920px;
        height: 882px;
        overflow: hidden;
    }
    .main_bg img{
        height: 916px;
        width: 1920px;
    }

    .layer{
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .centering {
        align-items: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .centeringImg{
     margin-left: 26px;
    }

    .input_form {
        border:0;
        font-size:20px;
        font-family:Arial, sans-serif;
        color:#111;
        height: 32px;
        width: 320px;
    }

    .frame_title {
        position: absolute;
        top: 183px;
        left: 708px;
    }

    .frame_titleText{
        color:#FFFFFF;
        font-weight: 600;
        font-size: 62px;
        text-align: center;
        width: 504px;
    }
    .frame_titleText img{
        vertical-align: middle;
        margin-top:10px;
        width:72px;
        height:72px;
    }

    .input_frame {
        color: #ffffff;
        width: 504px;
        height: 316px;
    }

    .input_BG {
        background-image: url("../img/login/bg_base02.png"); 
        height: 316px;  
        background-size: 504px 316px; 
        opacity: 0.1;
    }

    .button_frame {
        left: 100px;
        width: 256px;
        height: 44px;
        color: #333333;
        font-size: 20px;
        font-weight: 500;
        background-image: url("../img/login/bt_login_nor.png");
    }

    .button_frame:hover {
        background-image: url("../img/login/bt_login_over.png");
    }

    .button_frame:active {
        color: #FFFFFF;
        background-image: url("../img/login/bt_login_dwn.png");
    }

    .ghost_always {
        opacity: 0;
    }

    .ghost_hover:hover {
        opacity: 0;
    }

    .item_box {
        position: relative;
        width: 448px;
        font-weight: 500;
    }

    .scale_small {
        height: 16px;
    }

    .scale_middle {
        height: 32px;
    }

    .scale_large {
        height: 64px;
    }

    .go_right {
        position: absolute;
        right: 0px;
    }

    .resetCss_Button {
        padding: 0;
        border: none;
        background-color: transparent;  
    }

}