/*ログイン画面 要素*/

div.div_title
{
    position:absolute;
    left:50%;
    top: 340px;
    width:1000px;
    height:60px;
    transform: translateX(-50%);
    background-color: var(--col_back_title);
    border-radius: 10px;
}

span.sp_title
{
    position: absolute;
    left:0px;
    top:50%;
    width: 100%;
    height: auto;
    transform: translateY(-50%);
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    color: var(--col_txt_bright);
}

div.div_submit
{
    position: absolute;
    left: 50%;
    top: 450px;
    transform: translateX(-50%);
    width: 900px;
    height:400px;
	font-size: 21px;
	font-weight: bold;
}

form.form_login
{
    position: absolute;
    left: 0px;
    top:0px;
    width:100%;
    height:350px;
}


span.sp_item
{
    position: absolute;
    left:100px;
    width: 150px;
    font-size: 21px;
    font-weight: bold;
}

#sp_login_id
{
    top: 0px;
}

#sp_pwd
{
    top: 50px;
}


input.txt_login_id
{
    position: absolute;
    width: 700px;
    height: 50px;
    left: 100px;
    top:0px;
    font-size: 20px;
    text-align: left;
    border-radius: 5px;

}

input.txt_login_pwd
{
    position: absolute;
    left: 100px;
    top: 80px;
    width: 700px;
    height: 50px;
    font-size: 20px;
    text-align: left;
    border-radius: 5px;
}

img.img_show_pwd
{
    position: absolute;
    left:735px;
    top: 105px;
    height: 30px;
    transform: translateY(-50%);
    z-index: 1;
}

input.chk_login_rec
{
    position: absolute;
    left: 100px;
    top:160px;
    width: 20px;
    height: 20px;
}

label.lbl_login_rec
{
    position: absolute;
    left: 130px;
    top: 160px;
    width: auto;
    text-align: left;
    font-size: 18px;
}

input.btn_login
{
    position: absolute;
    left: 50%;
    top:200px;
    transform: translateX(-50%);
    z-index:1;
	width:240px;
	height:60px;
	color: var(--col_txt_bright);
	font-size: 23px;
	font-weight: bold;
	background-color: var(--col_btn_login);
	border: solid 2px var(--col_btn_login);
	border-radius: 5px;

}

input.btn_login:hover
{
    border: double 2px var(--col_border);
	background-color: var(--col_btn_thin);
	color: #000000;
}

input.btn_submit:focus
{
	outline: 0;
}


span.sp_login_alert
{
    position: absolute;
    left: 0;
    top: 280px;
    width: 100%;
    height: 70px;
    font-size: 16px;
    text-align: center;
    color:var(--col_txt_alert);
}

img.rpif
{
    left: 50%;
}

@media screen and (orientation: portrait) and (max-width: 500px)
{
    img.img_title{left: 1vw; height: auto; width: 70vw; transform: none;}
    img.img_penta{left: 100vw; top:90px;  width: 25vw; height: auto; transform:translateX(-100%)}
    div.div_title{ left:1vw; top:240px; width: 98vw;  transform: none;}
    div.div_submit{left: 1vw; width: 98vw; height: 350px; transform: none;}
    input.txt_login_id{left: 0px; width: 100%;}
    input.txt_login_pwd{left:0px; width: 100%;}
    img.img_show_pwd{left:84%;}
}

@media screen and (orientation: portrait) and (max-width: 500px) and (max-height: 700px)
{
    div.div_submit{top:320px;}
}