@charset "utf-8";

main { position: relative; display: flex; flex-wrap: wrap; height: 100vh; width: 100%; justify-content: center; align-items: center; box-sizing: border-box;
	background: url(../images/common/mapselect/bg.jpg) no-repeat center top; 
	background-size: cover; 
}

#login_box .form_box .login_form_wrapper .box .room-options{display: flex;align-items: center;justify-content: left;gap: 20px; flex-wrap: wrap;margin-top: 20px;}
#login_box .form_box .login_form_wrapper .box .room-options input[type="radio"]{width: auto !important;}
#login_box .form_box .login_form_wrapper .box .room-options label{width: auto !important;align-content: center;justify-content: center;gap: 10px !important;}
#login_box .form_box .login_form_wrapper .box .room-options label span{margin-top: 5px;}

.avatar_select .input .room-options{display: flex;align-items: center;justify-content: left;gap: 20px; flex-wrap: wrap;margin-top: 20px;}
.avatar_select .input  input[type="radio"]{width: auto !important;height: auto !important;}




/* Map selection */
/* ------------------------------------------------------------ map_select select */

.map_select { display: flex; flex-wrap: wrap; box-sizing: border-box; padding: 30px ; overflow: auto; justify-content: center; align-items: center; position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100vh; }
.map_select .overlay { z-index: 998; position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; }
.map_select .avatar_inner { z-index: 999; position: relative;  border-radius: 15px; width: 94%; max-width: 708px; box-sizing: border-box; }
.map_select .avatar_inner h3 { z-index: 1; position: absolute; text-align: center; width: 100%; top: -19px; left: 0; }
.map_select .avatar_inner h3 span { background: #000; padding: 10px 20px; display: inline-block; border-radius: 50px; color: #fff; font-size: 30px; }
.map_select .container { padding: 70px 40px 40px; border-radius: 15px; overflow: auto; position: relative; height: 100%; background: #fff;background-size: cover; max-width: 960px; max-height: fit-content;}
.map_select ul { padding: 50px 0; display: flex; flex-wrap: wrap; justify-content: center; }
.map_select ul li { text-align: center; width: calc(100% / 5);  box-sizing: border-box; cursor: pointer; }
.map_select ul li img { width: 94%; height: auto; position: relative; z-index: 1; }
.map_select ul li label { position: relative; display: block; padding: 20px 5px 30px; overflow: hidden; }
.map_select ul li label span { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; }

.map_select ul li.active 
.map_select ul li img { width: 100%; height: auto; }
.map_select .btn { padding: 20px 0 0; }

.map_select .selected { text-align: center; padding: 0 0 20px; }
.map_select p.text { font-size: 14px; text-align: center; color: #000; line-height: 150%; padding: 0; }
.map_select p.text span { display: block; font-size: 21px; padding: 0 0 10px; }
.map_select .input { text-align: center; padding: 20px 0; }
/* .map_select .input input { width: 400px; height: 65px; line-height: 65px; box-sizing: border-box; padding: 0 10px; } */

.map_select ul li label input[type="radio"] { position: absolute; z-index: -1; opacity: 0; left: -100%; width: auto !important; height: auto !important; }
.map_select ul li label input[type="radio"]:checked + span { background: url(../images/avatar/selected.png) no-repeat center center; background-size: 90% 100%; }


.map_select .caution {  margin-bottom: 40px;}
.map_select .caution p { font-size: 14px; }
.map_select .caution p span { display: inline-block; width: 30px; padding-right: 5px;}
.map_select .caution p span:nth-of-type(2) { width: 37px; }
.map_select .caution p span:nth-of-type(3) { width: 46px; }
.map_select .caution p span img { display: block; width: 100%; height: auto;}

.map_select .input dl { display: flex; width: 570px; border: #00486E 1px solid; margin: 0 auto; border-radius: 15px; overflow: hidden;}
.map_select .input dt { width: 200px; padding: 25px 0; background: #00486E; color: #fff;}
.map_select .input dd { width: 370px; text-align: center; padding: 25px 0; }
.map_select .input dd a { color: #000;}

.map_select .room-options{padding: 25px 0 40px; display: flex;flex-wrap: wrap;gap: 10px;text-align: center; justify-content: center;margin: auto;}

.map_select .room-options label { width: 200px; border: #ddd 1px solid; border-radius: 15px; padding-bottom: 20px;}
.map_select .room-options label .crowdlevel { }
.map_select .room-options label .crowdlevel p { font-size: 16px; padding-top: 7px;}
.map_select .room-options label .crowdlevel.level-free { color: #33DB7E; padding: 30px 0 10px; }
.map_select .room-options label .crowdlevel.level-busy { color: #F3D924; padding: 40px 0 10px; }
.map_select .room-options label .crowdlevel.level-full { color: #CE2929; padding: 40px 0 10px; }
.map_select .room-options label span { display: flex; justify-content: center; align-items: center; font-size: 17px; font-family: "Noto-Sans-JP-Medium";}
.map_select .room-options label span span { padding-right: 8px;}
.map_select .room-options label input[type='radio'] { display: none;}
.map_select .logo h3 {font-size: 18px;  padding: 15px 0 0;color: #000;font-family: "Noto-Sans-JP-Medium"; text-align: center;}



/* ------------------------------------------------------------ password for map select */


#map_select_password{overflow: auto; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.7); display: flex; flex-wrap: wrap; box-sizing: border-box; padding: 90px 0 60px; position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100vh;}
#map_select_password .welcome_inner { width: 88%; max-width: 708px; border-radius: 15px; z-index: 999; position: relative; }
#map_select_password .container { border-radius: 15px; overflow: auto; position: relative; max-height: 100%;  padding: 28px 100px 25px; background: #fff; }
#map_select_password .logo h3 { font-size: 18px; padding: 15px 0 0; color: #000; font-family: "Noto-Sans-JP-Medium"; text-align: center;}
#map_select_password .form_box .link_box {text-align: center;  padding: 10px 0 48px;}
#map_select_password .form_box .link_box p{font-size: 14px; font-family: "Noto-Sans-JP-Medium"; line-height: 160%; color: #696969; display: block; }
#map_select_password .form_box .login_form_wrapper{width: 100%; margin: 0 auto;}
#map_select_password .form_box .login_form_wrapper .box{padding: 22px 0 0;}
#map_select_password .form_box .login_form_wrapper .box label{font-size: 14px;font-family: "Noto-Sans-JP-Medium"; width: 100%; height: auto; display: block; line-height: 143%; }
#map_select_password .form_box .login_form_wrapper .box input{width: 100%; height: auto; border: 1px solid #D1D1D1; border-radius: 8px; font-size: 14px; line-height: 160%; padding: 15px 17px; margin: 6px 0 0;}
#map_select_password .btn a{width: 286px; font-size: 21px; padding: 20px 0;font-family: "Noto-Sans-JP-Medium"; }
#map_select_password .success-alert p{font-size: 14px;line-height: 1.3; padding: 15px 0;padding-top: 20px;}




/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
	
	
	
	main { 	background-size: cover; }
	/* ------------------------------------------------------------ map_select */
	.avatar_select ul { padding: 30px 0 0;}
	.avatar_select .avatar_inner h3 span { font-size: 16px; top: -13px; }
	.avatar_select .container { padding: 30px 6%; }
	.avatar_select ul li { padding: 0px 1%; width: calc(100% / 3); }
	.avatar_select ul li label {padding: 5px 0px 22px;}
	.avatar_select p.text span { font-size: 16px; }
	.avatar_select .input input { height: 45px; line-height: 45px; width: 90%; max-width: 400px; }
	.avatar_select ul li label input[type="radio"]:checked + span { background: url(../images/avatar/selected.png) no-repeat center center; background-size: 95% 100%; }
	
	
	/* ------------------------------------------------------------ map_select select */
	.map_select { padding: 30px 5%; }
	.map_select .welcome_inner { width: 100%;}
	.map_select .container { padding: 70px 20px 40px; max-width: 100%;}
	
	
	.map_select .room-options label { width: 47%; padding-bottom: 20px;}
	.map_select .room-options label .crowdlevel p { font-size: 12px; padding-top: 7px;}
	.map_select .room-options label .crowdlevel.level-free { padding: 20px 0 10px; }
	.map_select .room-options label .crowdlevel.level-free img { width: 51px; height: auto; }
	.map_select .room-options label .crowdlevel.level-busy { padding: 30px 0 10px; }
	.map_select .room-options label .crowdlevel.level-busy img { width: 62px; height: auto; }
	.map_select .room-options label .crowdlevel.level-full { padding: 30px 0 10px; }
	.map_select .room-options label .crowdlevel.level-full img { width: 78px; height: auto; }
	.map_select .room-options label span { font-size: 14px; }
	.map_select .room-options label span span { padding-right: 3px;}
	.map_select .room-options label span span img { width: 10px; height: auto; }
	
	.map_select .caution p { line-height: 140%; }
	.map_select .caution p span { width: 25px; }
	.map_select .caution p span:nth-of-type(2) { width: 32px; }
	.map_select .caution p span:nth-of-type(3) { width: 41px; }

	.map_select .input dl { display: block; width: 100%; border: #00486E 2px solid;}
	.map_select .input dt { width: 100%; padding: 20px 0; font-size: 14px; }
	.map_select .input dd { width: 100%; text-align: center; padding: 15px 0; }
	.map_select .input dd a { font-size: 14px;}
	
	
	/* ------------------------------------------------------------ #new user email verficiaont #map_select_password */
	#map_select_password{padding: 20px 0 60px; }
	#map_select_password .container { padding: 50px 6% 30px; }
	#map_select_password .logo h3 { font-size: 16px; }
	#map_select_password .form_box .link_box {padding: 13px 0 24px;}
	#map_select_password .form_box .link_box a{font-size: 14px;}
	#map_select_password .form_box .login_form_wrapper .box{padding: 18px 0 0;}
	#map_select_password .form_box .login_form_wrapper .box label{font-size: 14px;}
	#map_select_password .form_box .login_form_wrapper .box input{font-size: 14px; padding: 10px 12px; margin: 3px 0 0;}
	#map_select_password .btn a{ max-width: 320px; width: 90%; font-size: 18px; padding: 20px 0; line-height: 100%; height: auto; }
		
	
	#map_select_password .container{padding: 45px 25px 40px;}
	#map_select_password .form_box .login_form_wrapper .box input{width: 100% !important;}
	
	
	
}