@charset "UTF-8";

/* ■■■■　スマートフォン（共通）■■■■ */

/* ヘッダ */
#l_head{
height: 85px;
background-color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 6px 5px rgba(0, 0, 0, 0.1);
}
#l_head .chara{
height: 70px;
width: auto;
padding: 0 7% 0 0;
}
#l_head .rogo{
width: 136px;
height: 31px;
}

/* ロゴ表示画面の背景色 */
.rogop{
background-attachment:fixed!important;
background-image: linear-gradient(163deg, rgba(0, 91, 171, 1) 35%, rgba(251, 46, 255, 1) 90%);
}
.rogop .container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.rogop img{
width: 36%;
height: auto;
filter: brightness(0) invert(1);
}

/* フォーム */
form{text-align: center;}

form .item{
font-size: 24px;
font-weight: 600;
}
form .item.id{
padding: 14% 0 3% 0;
}
form .item.pass{
padding: 8% 0 3% 0;
}

/* エラー表示 */
.lerror{
width: 90%;
margin: 7% auto -30px auto;
color: #e95050;
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 20px 25px 20px 25px;
border: #FF0004 solid 1px;
background-color: #fefafa;
}


/* ボタン */
.btn1{
margin: 60px 0 0 0;
}





/* ■■■■　タブレット　■■■■ */
@media screen and (min-width: 600px) {

.rogop img{
width: 23%;
}

}



/* ■■■■　P C　■■■■ */
@media screen and (min-width: 1025px) {

.rogop img{
width: 16%;
}

/* エラー表示 */
.lerror{
width: 70%;
margin: 7% auto -70px auto;
}

}