/* CSS Document */
/*----- last up date 20220522 -----*/

header{background:#fff; height:120px; position:relative;}
header h1 {
	width: 20%;
	max-width: 428px;
	position: absolute;
	top: 0;
	bottom: -30px;
	left: 10%;
	max-height: 33px;
	margin: auto;
}

main article div.contentWrap {
	width: 100%;
	height: calc(100vh - 120px);
	background: url(https://presidents-brain.com/site/wp-content/themes/twentytwentyone-pb/assets/images/login/login_bg.jpg) no-repeat center top /100%;
	position: relative;
}

main article div.contentWrap form ul {
	max-width: 600px;
	width: 80%;
	background: rgba(255,255,255,.6);
	position: absolute;
	top: -120px;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 50px 80px;
	margin: auto;
	height: 400px;
}
main article div.contentWrap.contentWrapA form ul {
	max-width: 600px;
	width: 80%;
	background: rgba(255,255,255,.6);
	position: absolute;
	top: -120px;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 80px;
	margin: auto;
	height: 400px;
}
	
main article div.contentWrap form ul li{
	width:100%;
	text-align:center;
	}

main article div.contentWrap form ul li.input:not(.btn) {display: flex; margin-bottom:10px;}

main article div.contentWrap form ul li.input:not(.btn) input {
	width: 400px;
	height: 80px;
	font-size: min(4vw , 20px);
	padding: 15px;
	border: none;
}
main article div.contentWrap form ul li.input:not(.btn):before{
	content:"";
	background:no-repeat center center , #002A38;
	width:80px;
	height:80px;
}

main article div.contentWrap form ul li.input:nth-of-type(1):before{
	background:url(https://presidents-brain.com/site/wp-content/themes/twentytwentyone-pb/assets/images/login/login_icon_01.png) no-repeat center center , #002A38;
	}
main article div.contentWrap form ul li.input:nth-of-type(2):before{
	background:url(https://presidents-brain.com/site/wp-content/themes/twentytwentyone-pb/assets/images/login/login_icon_02.png) no-repeat center center , #002A38;
	}

main article div.contentWrap form ul li.btn input,
main article div.contentWrap form ul li.btn a {
	width: 240px;
	height: 50px;
	font-size: min(3vw , 15px);
	padding: 15px;
	border: #002A38 2px solid;
	border-radius: 50px;
	background: none;
	color: #002A38;
	font-weight: bold;
	margin-top: min(10% , 30px);
	display: inline-block;
}

main article div.contentWrap form ul li.title{margin-bottom:30px;}
main article div.contentWrap form ul li.title img{max-width:419px;}
main article div.contentWrap form ul li a{color:#000000; margin-top:20px; display:block; font-size:min(3vw , 15px);}
main article div.contentWrap form ul li p{font-size:min(3vw , 15px);}

@media only screen and (max-width:840px){
header {height: 15vw;}
header h1 {
	width: 35%;
	max-width: 428px;
	left: 10%;
	max-height: 12vw;
	margin: auto;
	bottom: 0;
}

main article div.contentWrap {
	width: 100%;
	height: 100vh;
	background: url(https://presidents-brain.com/site/wp-content/themes/twentytwentyone-pb/assets/images/login/login_bg.jpg) no-repeat center center / 150% auto , #242426;
	position: relative;
}

main article div.contentWrap form ul,
main article div.contentWrap.contentWrapA form ul {
	max-width: 600px;
	width: 80%;
	background: rgba(255,255,255,.6);
	position: absolute;
	top: -120px;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 5vw;
	margin: auto;
	height: 70vw;
}
main article div.contentWrap form ul li.input:not(.btn) {
	display: flex;
	margin-bottom: 5vw;
}

main article div.contentWrap form ul li.input:not(.btn)::before {
	content: "";
	background: no-repeat center center , #002A38;
	width: 15vw;
	height: 15vw;
}

main article div.contentWrap form ul li.input:nth-of-type(1)::before {
	background: url(https://presidents-brain.com/site/wp-content/themes/twentytwentyone-pb/assets/images/login/login_icon_01.png) no-repeat center center / 50% auto , #002A38;
}
main article div.contentWrap form ul li.input:nth-of-type(2)::before {
	background: url(https://presidents-brain.com/site/wp-content/themes/twentytwentyone-pb/assets/images/login/login_icon_02.png) no-repeat center center / 50% auto , #002A38;
}

main article div.contentWrap form ul li.input:not(.btn) input {
	width: calc(100% - 15vw);
	height: 15vw;
	font-size: min(4vw , 20px);
	padding: 2vw;
	border: none;
}

main article div.contentWrap form ul li.btn input {
	width: 80%;
	height: 12vw;
	font-size: min(4vw , 20px);
	padding: 0 3vw;
	border: #002A38 2px solid;
	border-radius: 50px;
	background: none;
	color: #002A38;
	font-weight: bold;
	margin-top: min(10vw , 10px);
}

}