@charset "UTF-8";

/*-------------------------
__top_style
-------------------------*/

/*-------------------------
__mv
-------------------------*/
#main #login{background:url(/images/mv_bg.webp);wight:100%;height:calc(100svh - 34px);min-height:480px;max-height:800px;background-size:cover;background-position:50%;position:relative;}
#main #login::after{content:'';background-color:rgba(56,74,94,.5);position:absolute;left:0;right:0;top:0;bottom:0;z-index:99;}
#main #login .login_inner{position:relative;max-width:1180px;width:100%;height:100%;padding:40px;box-sizing:border-box;margin:0 auto;z-index:999;}
#main #login .login_inner .ttl_wrap{text-align:left;color:#fff;}
#main #login .login_inner .ttl_wrap .main_ttl{font-size:1.8rem;margin-bottom:30px;line-height:1.2;}
#main #login .login_inner .ttl_wrap .main_ttl .large{font-size:5rem;margin-right:10px;}

#main #login .login_wrap{position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:400px;}
#main #login .login_wrap .login_ttl{font-size:3.2rem;margin-bottom:16px;font-weight:700;color:#fff;}
#main #login .login_wrap .login_box{background:rgba(225,225,225,0.3);border-radius:10px;}
#main #login .login_wrap .login_box form{padding:20px;box-sizing:border-box;}
#main #login .login_wrap .login_box form .form_group{margin-bottom:20px;}
#main #login .login_wrap .login_box form .form_group input[type="text"],
#main #login .login_wrap .login_box form .form_group input[type="password"]{font-size:1.8rem;border:none;padding:10px 60px 10px 20px;box-sizing: border-box;border-radius:5px;width:100%;font-weight:700;transition:.3s;color: var(--blue2);}
#main #login .login_wrap .login_box form .form_group input[type="text"]::placeholder,
#main #login .login_wrap .login_box form .form_group input[type="password"]::placeholder{color: var(--gray2);transition:.3s;}
#main #login .login_wrap .login_box form .form_group button[type="submit"]{}
#main #login .login_wrap .login_box form .btn{background:var(--blue2);width:100%;padding:16px 40px;border:none;border-radius:5px;position:relative;cursor:pointer;transition:.3s;}
#main #login .login_wrap .login_box form .btn::before{content:"";position:absolute;right:40px;top:50%;transform:translateY(-50%)rotate(45deg);width:7px;height:7px;border-top:3px solid #fff;border-right:3px solid #fff;border-radius:1px;transition:.3s;}
#main #login .login_wrap .login_box form .btn span{font-size:2rem;color:#fff;text-align:left;font-weight:700;display:block;}


#main #login .login_wrap .login_box form .form_group #input_box{position: relative;}
#main #login .login_wrap .login_box form .form_group #input_box #view{position: absolute;top: 50%;right: 20px;transform: translateY(-50%);font-size: 1.8rem;}
#main #login .login_wrap .login_box form .form_group #input_box #view i.far.fa-eye{color:var(--blue1);}
#main #login .login_wrap .login_box form .form_group #input_box #view i.far.fa-eye-slash{color:var(--gray2);}

/*デフォルトで目のマークが出るものを非表示*/
input::-ms-reveal,  /* Edge */
input::-ms-clear,   /* Edge */
input::-webkit-contacts-auto-fill-button, /* Safari */
input::-webkit-credentials-auto-fill-button { /* Safari */
  display: none;
}


@media only screen and (min-width: 768px) {
	#main #login .login_wrap .login_box form .form_group input[type="text"]:hover,
	#main #login .login_wrap .login_box form .form_group input[type="password"]:hover{background:#e5e5e5;}
	#main #login .login_wrap .login_box form .btn:hover{background:var(--blue1);}
	#main #login .login_wrap .login_box form .btn:hover::before{right:20px;}
}
@media only screen and (max-width: 767px) {
	#main #login{height:calc(100svh - 54px);min-height:440px;}
	#main #login .login_inner{padding:20px;}
	#main #login .login_inner .ttl_wrap{width:100%;margin-bottom:20px;}
	#main #login .login_inner .ttl_wrap .main_ttl{font-size:1.4rem;margin-bottom:20px;}
	#main #login .login_inner .ttl_wrap .main_ttl .large{font-size:3.3rem;margin-right:5px;margin-bottom:-10px;display: block;}
	
	#main #login .login_wrap{max-width:300px;}
	#main #login .login_wrap .login_ttl{font-size:2.4rem;}
	#main #login .login_wrap .login_box form .form_group{margin-bottom:14px;}
	#main #login .login_wrap .login_box form .form_group input[type="text"],
	#main #login .login_wrap .login_box form .form_group input[type="password"]{font-size:1.6rem;}
	#main #login .login_wrap .login_box form .btn{padding:16px 20px;}
	#main #login .login_wrap .login_box form .btn span{font-size:1.8rem;}
}