/* ------------------------------------------------------------- */
/* StyleSection   Login CSS                                      */
/* ------------------------------------------------------------- */
#login {
	.blk1 {
	  position: relative;
	  width: 100%;
	  height: 90vh;
	}
	.blk1-inner {
	  border: 2px solid #E6E6E6;
	  border-radius: 10px;
	  box-shadow: 0px 0px 8px gray;
  }
  
  h1 {
    img {
			display: block;
			margin: 0 auto;
    }
  }
  
  p {
  	margin-top:20px;
  	text-align: center;
    font-size: 1.4rem;
  }
 
  .form-cont {
    width: 100%;
    margin-bottom: 8px;
    label {
    	font-size: 1.5rem;
    }
	  .input-group {
			margin-top: 4px;
		  input {
		  	height: 2rem;
		  	padding: 4px 6px;
		  	font-size: 1.4rem;
			  width: 98%;
			  border-radius: 6px;
				border: 1px solid #ccc;
			}
			
			input[type="text"]:focus, input[type="password"]:focus  {
				outline: 1px solid #80E8F7;
			}

			/*【注意】テキストサイズ・カラーは form_onlly.css */
			div {
			  padding: 4px 0;
			}
		}
		.input-group-check {
		  input {
		    width: 14px;
		    height: 14px;
		  }
		}
	}

	.form-cont-btn {
		margin-top: 40px;
		text-align: center;

		button {
		  color: #fff;
		  background-color: #860043;
			border-radius: 6px;
		  padding: 6px 60px;
		 	font-size: 1.2rem;
		}
		button:hover {
		  background-color: #C40062;
		}
	}

}

#login {
	.Custom-Item-Radio,
	.Custom-Item-Checkbox {
		accent-color: #c40062;
		transform: scale(1.5);
	}
}


@media screen and (min-width: 1051px) {

	.blk1-inner {
	  position: absolute;
	  padding: 20px 20px 40px 20px;
	  top: 50%;
	  left: 50%;
	  width: 400px;
	  transform: translate(-50%, -50%);
	  content: '';
  }


}

@media screen and (max-width: 1050px) {
	#login{
		.blk1 {
		  height: 100vh;
			position: absolute; /* 位置指定を有効にする */
			top: 50px;          /* 上から50pxの位置に配置 */
		}
		.blk1-inner {
			width:84vw;
			margin:  0 auto;            /* 中央寄せ */
		  padding: 20px 10px;
	  }
 		 h1 {
			img {
				width: 50%;
				display: block;
				margin: 0 auto;
			}
		}
	}
}