/*
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
*/

a:link { color: #ffffff; }
a:visited { color: #ffffff; }
a:hover { color: #ffffff; }
a:active { color: #ffffff; }

@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;  
        text-align: center;

        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: -5px;
        right: 0px;
    }

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

    .main_bg img {
        width: calc(100vw*1920/1920);
        height: calc(100vw*880/1920);
    }


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

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

    .layer_w {
        width: calc(100vw*1054/1920);
        margin: calc(100vw*150/1920) calc(100vw*436/1920) 0px calc(100vw*430/1920);
    }


    .frame_title {
        position: absolute;
        top: 150px;
        left: 430px;
    }

    .frame_brank {
        left: 26px;
    }

    .title_stretch {
        padding: 29px 0px;
    }

    .button_BG {
        width: calc(100vw*440/1920);
        height: calc(100vw*196/1920);
        position: absolute;
        background-image: url("../img/portal/bg_base01.png");
        opacity: 0.1;
    }

    .anchor {
        position: relative;
        width: calc(100vw*447/1920);
        height: calc(100vw*206/1920);
    }

    .button_conteinor {
        color: #ffffff;
        align-items: center;
        display: flex;
        justify-content: center;
        width: calc(100vw*440/1920);
        height: calc(100vw*196/1920);
        position: absolute;
        flex-direction: column;
    }

    .button_frame {
        width: 256px;
        height: 96px;
        background-image: url("../img/portal/bt_login_l_over.png");
        margin-top: -26px;
    }

    .button_frame:active {
        background-image: url("../img/portal/bt_login_l_down.png");
    }

    .ghost:hover {
        opacity: 0;
    }

    .button_login{
        width: calc(100vw*260/1920);
        height: calc(100vw*78/1920);
        border:1px solid #afafbb;
        border-radius : calc(100vw*7/1920);
        cursor: pointer;
    }

    .button_ma{
        background-color: #f97c7c;
        color: #000000;
    }
    .button_ma:hover{
        background-color: #c00000;
        color: #ffffff;
    }
    .button_tr{
        background-color: #c1a7e0;
        color: #000000;
        margin-top: calc(100vw*12/1920);
    }
    .button_tr:hover{
        background-color: #723db3;
        color: #ffffff;
    }

    .button_login_text{
        display: inline-block; 
        margin-top: calc(100vw*21/1920); 
        line-height: calc(100vw*32/1920);

        font-size: calc(100vw*26/1920);
        font-family: 'Meiryo UI';

    }

    .column_left{
        display: inline-block;
        font-weight: 500;
        color: #FFFFFF;
        width: calc(100vw*440/1920);
        margin-left: calc(100vw*10/1920);
    }

    .column_left img{
        vertical-align: middle;
        margin-top:calc(100vw*-10/1920);
        width:calc(100vw*72/1920);
        height:calc(100vw*72/1920);
    }

    .column_left_logo{
        vertical-align: top;
        font-size: calc(100vw*72/1920);
        font-weight: 600;
    }

    .logo_right{
        width: calc(100vw*550/1920);
        display: inline-block;
        margin-left:calc(100vw*48/1920)
    }

    .img_wb{
        height: calc(100vw*302/1920);
        width: calc(100vw*402/1920);
    }

    .img_sp{
        height: calc(100vw*225/1920);
        width: calc(100vw*116/1920);
    }

    .label_row{
        height: calc(100vw*174/1920);
    }

    .lbl_wb_img{
        height: calc(100vw*74/1920);
        width: calc(100vw*97/1920);
    }
    .lbl_sp_img{
        height: calc(100vw*74/1920);
        width: calc(100vw*40/1920);
    }
    .lbl_operator{
        font-size: calc(100vw*30/1920);
    }
    .lbl_content{
        font-size: calc(100vw*48/1920);
    }
    .lbl_right{
        margin-left: calc(100vw*40/1920);
    }    

    .column_right{
        display: inline-block;
        font-weight: 500;
        color: #FFFFFF;
        width:calc(100vw*440/1920);
        margin-left: calc(100vw*64/1920);
        margin-right: calc(100vw*90/1920);
    }

    .row_middle{
        margin-top: calc(100vw*40/1920);
        line-height: calc(100vw*48/1920);
        vertical-align: top;
        font-family: Meiryo UI;
    }
    .explain{
        margin-top:15px;
    }

    .app_link_ios{
        top: calc(100vw*-5/1920);
        position: relative;
        display: block;
        margin: calc(100vw*8/1920);
        height: calc(100vw*72/1920);
    }

    .app_link_android{
    /*    display:block;
        margin:16px;
        height: 64px; 
        margin-top:0px;*/
        width: calc(100vw*215/1920);
        height: calc(100vw*72/1920);
    }

    .app_link_ios img{
        height: 100%;
    }
}

@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;
    text-align: center;

    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;
}

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

    .main_bg img {
        width: 1920px;
        height: 880px;
    }


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

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

    .layer_w {
        width: 1054px;
        margin: 150px 436px 0px 430px;
    }


.frame_title {
    position: absolute;
    top: 150px;
    left: 430px;
}

.frame_brank {
    left: 26px;
}

.title_stretch {
    padding: 29px 0px;
}

.button_BG {
    width: 440px;
    height: 196px;
    position: absolute;
    background-image: url("../img/portal/bg_base01.png");
    opacity: 0.1;
}

.anchor {
    position: relative;
    width: 447px;
    height: 206px;
}

.button_conteinor {
    color: #ffffff;
    align-items: center;
    display: flex;
    justify-content: center;
    width: 440px;
    height: 196px;
    position: absolute;
    flex-direction: column;
}

.button_frame {
    width: 256px;
    height: 96px;
    background-image: url("../img/portal/bt_login_l_over.png");
    margin-top: -26px;
}

.button_frame:active {
    background-image: url("../img/portal/bt_login_l_down.png");
}

.ghost:hover {
    opacity: 0;
}

.button_login{
    width: 260px;
    height: 78px;
    border:1px solid #afafbb;
    border-radius : 7px;
    cursor: pointer;
}

.button_ma{
    background-color: #f97c7c;
    color: #000000;
}
.button_ma:hover{
    background-color: #c00000;
    color: #ffffff;
}
.button_tr{
    background-color: #c1a7e0;
    color: #000000;
    margin-top: 12px;
}
.button_tr:hover{
    background-color: #723db3;
    color: #ffffff;
}

.button_login_text{
    display: inline-block; 
    margin-top: 21px; 
    line-height: 32px;

        font-size: 26px;
        font-family: 'Meiryo UI';

}

.column_left{
    display: inline-block;
    font-weight: 500;
    color: #FFFFFF;
    width: 440px;
    margin-left: 10px;
}

    .column_left img{
        vertical-align: middle;
        margin-top:-10px;
        width:72px;
        height:72px;
    }

    .column_left_logo{
        vertical-align: top;
        font-size: 72px;
        font-weight: 600;
    }

    .logo_right{
        width: 550px;
        display: inline-block;
        margin-left:48px
    }

    .img_wb{
        height: 302px;
        width: 402px;
    }

    .img_sp{
        height: 225px;
        width: 116px;
    }

    .label_row{
        height: 174px;
    }

    .lbl_wb_img{
        height: 74px;
        width: 97px;
    }
    .lbl_sp_img{
        height: 74px;
        width: 40px;
    }
    .lbl_operator{
        font-size: 30px;
    }
    .lbl_content{
        font-size: 48px;
    }
    .lbl_right{
        margin-left: 40px;
    }    


.column_right{
    display: inline-block;
    font-weight: 500;
    color: #FFFFFF;
    width:440px;
    margin-left: 64px;
    margin-right: 90px;
}

.row_middle{
    margin-top: 40px;
    line-height: 48px;
    vertical-align: top;
    font-family: Meiryo UI;
}
.explain{
	margin-top:15px;
}

.app_link_ios{
    top: -5px;
    position: relative;
    display: block;
    margin: 8px;
    height: 72px;
}

.app_link_android{
        width: 215px;
        height: 72px;
}

.app_link_ios img{
    height: 100%;
    }

}