@charset "utf-8";

body { font-size: 15px; background: #000; position: relative; min-width: 100%; opacity: 1; 
	font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif;
/* 	font-family:"ヒラギノ角ゴ Pro w3","Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif;  */
}
* { -ms-touch-action: manipulation; touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,0,0,0); }

a { text-decoration: none; color: #fff; }


.overlay { cursor: pointer; }

.header { position: fixed; z-index: 99; }

h1 { position: fixed; z-index: 99; left: 40px; top: 40px; }
h1 img { width: 200px; height: auto; }
h1 .back { padding: 10px 0 0 ; text-align: center; }
h1 .back a { font-size: 14px; border: 1px solid #000; display: inline-block; padding: 10px 10px; color: #000; width: 177px;}
h1 .private { padding: 10px 0 0; display: none; }

#help_btn { right: 350px; top: 60px; }
#help_btn a { color: #fff; display: block; height: 20px; line-height: 20px; padding: 0 0 0 30px;
	background: url(../images/map/icn_help.png) no-repeat left center; 
	background-size: 18px auto; 
}

.header_class-details{ background: #000; padding: 5px 5px; margin-top: 5px; font-size: 13px; display: flex; gap: 5px; align-items: center; justify-content: center;}
.header_class-details p,
.header_class-details span { color: #fff;}
/* #interview_timer.header_additonal-details { position: fixed; top: 130px; left: 90px; padding: 5px 10px; z-index: 10;} */


.module-vc { display: none; }

#map .tile, 
#map .door { opacity: 1; border: 1px solid #464646; }
#map .chair { width: 1.72%; pointer-events: auto !important; transition: none; }

.overlay{z-index: 998; position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer;}

.overlay_box img.modal-close{position: absolute; right: 39px; top: 37px; z-index: 1000; }
/* ------------------------------------------------------------ map tiles */

.tile { position: absolute; z-index: 10; font-size: 8px; width: 1%; aspect-ratio: 1/1.2; opacity: 1;
	transform: rotate(-60deg) skew(0deg, 30deg);
	-webkit-transform: rotate(-60deg) skew(0deg, 30deg);
	background: rgba(144, 255, 103, 0.36);
}

/* ------------------------------------------------------------ screen share */

.screen_share { display: none; left: 59.5%; top: 45.5%; width: 9.9%; height: 9.1%; position: absolute; background: #a0a0a0; z-index: 9;
	transform: skewX(0) skewY(30deg);
	-webkit-transform: skewX(0) skewY(30deg);
}
.screen_share video,
.screen_share .box { position: relative; width: 100% !important; height: 100%; pointer-events: none; }

/* ------------------------------------------------------------ clouds */

#loader { position: fixed; width: 100%; height: 100%; left: 0; top: 0;  background: #fff; z-index: 9999; }

/* ------------------------------------------------------------ header */

.header { position: fixed; z-index: 99; }
#menu_btn { right: 25px; top: 30px; cursor: pointer; }
#login_btn { right: 190px; top: 45px; border-radius: 25px; background: #b9041d; }
#login_btn a { display: block; height: 45px; line-height: 45px; max-height: 45px; overflow: hidden; width: 125px; padding: 0 10px; box-sizing: border-box; text-align: center; color: #fff; text-overflow: ellipsis; }
#logout_btn{ right: 40px; top: 45px; border-radius: 25px; background: #b9041d;}
#logout_btn a { display: block; height: 45px; line-height: 45px; max-height: 45px; overflow: hidden; width: 125px; padding: 0 10px; box-sizing: border-box; text-align: center; color: #fff; text-overflow: ellipsis; }

#lang_select { background: #000; padding: 5px; right: 20px; top: 120px; border: 1px solid #333; }
#lang_select p span { color: #fff; display: inline-block; text-align: center; width: 35px; height: 25px; line-height: 25px; cursor: pointer; }
#lang_select p span.active { background: #4d4d4d; }


#login { }
#login h2 { text-align: center; padding: 30px 0 60px; font-family: "Noto-Sans-JP-Medium"; }

#login .btn { padding: 0 0 100px; }
#login .btn a { border: none; background: #68b82b; display: inline-block; width: 94%; max-width: 300px; height: 60px; font-size: 16px; line-height: 60px; font-family: "Noto-Sans-JP-Medium"; color: #fff; border-radius: 40px; margin: 0 10px 10px; }
#login .btn a.fb { background: #4676ed; }



/* //--navbar custom dropwdown */
#goldmt_custom-dropdown1 { position: relative; width: 220px; }

#goldmt_custom-dropdown1 .goldmt_dropdown-selected {padding: 5px 5px; border: 1px solid rgb(192, 192, 192);display: flex; align-items: center; cursor: pointer; background-color: rgb(255, 255, 255); }

#goldmt_custom-dropdown1 .goldmt_dropdown-selected img { width: 100%;  height: 30px; object-fit: cover;}

#goldmt_custom-dropdown1 .goldmt_arrow-icon { width: 8px !important; margin-left: auto; transform: rotate(180deg); transform-origin: center; transition: transform 0.5s;  }

#goldmt_custom-dropdown1  .goldmt_rotate { transform: rotate(360deg);  }

#goldmt_custom-dropdown1  .goldmt_dropdown-list { display: none; position: absolute; background: white; border: 1px solid #ccc;width: 100%; z-index: 1000; }

#goldmt_custom-dropdown1  .goldmt_dropdown-option { padding: 10px; display: flex; align-items: center; cursor: pointer; border: none; box-shadow: inset 0 0 0 0.4px rgba(192, 192, 192, 1); }

#goldmt_custom-dropdown1 span{font-size: 11px !important;font-family: 'Noto-Sans-JP-Regular';}

#goldmt_custom-dropdown1 .goldmt_dropdown-option img {width: 100%; height: auto;  }

#goldmt_custom-dropdown1 .goldmt_dropdown-option:hover {background-color: #f0f0f0; }

        
#goldmt_custom-dropdown1 .goldmt_radio-button { display: none;  }

#goldmt_custom-dropdown1{ position: absolute; right: 15px; top: 100px; width: 205px; z-index: 400;  }
@media only screen and (min-width: 375px) and (max-width: 900px) {
	#goldmt_custom-dropdown1 { top: 65px;right:10px; width: 150px;}
	#login_btn {top: 10px;}
	#logout_btn {top: 10px;}
}




/* ------------------------------------------------------------ zoom */

#zoom { background: transparent; position: fixed; align-items: center; right: 47px; bottom: 130px; z-index: 98; }
#zoom p { cursor: pointer; text-align: center; width: 100%; }
#zoom p.disabled { opacity: 0.4; }

.bg_color { padding: 15px; box-sizing: border-box; border-radius: 10px; background: #00486E; }

.btn { text-align: center; }
.btn a,
.btn input[type="submit"] { border: none; border-radius: 50px; width: 360px; height: auto; line-height: 145%; font-size: 20px; color: #fff; display: block; margin: auto; font-family: 'Noto-Sans-JP-Bold'; padding: 20px 0;}
.btn .red { background: #AACE30; }
.btn .gray { background: #9B9B9B; }
.container .img{ width: 70%; max-width: 323px; height: auto; margin: 0 auto; display: block;}

/* ------------------------------------------------------------ welcome */

#welcome { 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; }

#welcome .overlay { top: 0; left: 0; position: absolute; width: 100%; height: 100%; z-index: 0; }
#welcome .welcome_inner { width: 88%; max-width: 708px; border-radius: 15px; z-index: 999; position: relative; }
#welcome .roof { position: absolute; z-index: 9; top: 0; left: 50%; width: 105%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
#welcome .container { border-radius: 15px; overflow: auto; position: relative; max-height: 100%;  padding: 53px 40px 67px; background: #fff; }
#welcome .slider { padding: 0 0 40px; }
#welcome .slider img { width: 100%; height: auto; }
#welcome .slider .slider_box_2{padding: 26px 0 0; max-height: 100px !important;overflow: hidden;}
#welcome .slider p {font-family: 'Noto-Sans-JP-Medium'; font-size: 17px; color: #000; line-height: 177%; text-align: center; }
#welcome .slider p span{font-size: 14px;line-height: 177%;font-family: 'Noto-Sans-JP-Medium'; }

#welcome .slider .slick-dots{bottom: -30px;}
#welcome .slider .slick-dots li{width: 12px; height: 12px;}
#welcome .slider .slick-dots li button { border #B5B5B5; border-radius: 100%; background: #B5B5B5; width: 100%; height: 100%; padding: 0;}
#welcome .slider .slick-dots li button:before{display: none;}
#welcome .slider .slick-dots li.slick-active button{background: #A40282;}
#welcome .slider button.slick-arrow{border-radius: 100%; background: #00486E; width: 50px; height: 50px; z-index: 1000; }
#welcome .slider button.slick-arrow:before{color: #00486E; content: ""; display: block;width: 0;height: 0; border-style: solid; position: absolute; top: 50%; transform: translateY(-50%); opacity: 1;}
#welcome .slider button.slick-prev:before{ border-top: 15px solid transparent; border-bottom: 15px solid transparent;  border-left: 0px;border-right: 20px solid #fff;left: 25%; }
#welcome .slider button.slick-next:before{ border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 20px solid #fff; border-right: 0px;right: 25%; }

#welcome .logo { text-align: center; padding: 35px 0 26px; }
#welcome .logo h3 { font-size: 20px; color: #000; font-family: "Noto-Sans-JP-Bold"; }
#welcome .swiper-pagination { padding: 0 0 15px; }
#welcome .swiper-pagination-bullet { background: #fff; width: 15px; height: 15px; margin: 0 5px; }
#welcome .swiper-pagination-bullet-active { background: #ea2700;}
#welcome .welcome_inner a{width: 286px; background: #AACE30;line-height: 145%; font-size: 21px; padding: 20px 0;font-family: "Noto-Sans-JP-Medium"; display: block; margin: 0 auto; border-radius: 50px; text-align: center;}
#welcome .welcome_inner .admission{position: absolute; transform: translateX(-50%); left: 50%; top: 0px;width: 100%;}
#welcome .btn_box{position: relative; padding: 0 0 70px;}
#welcome .btn_flex{display: none; position: absolute; transform: translateX(-50%); left: 50%; top: 0px;width: 100%;}
#welcome .btn_flex .flex{display: flex;max-width: 586px; margin: 0 auto;}
#welcome .btn_flex .flex a{width: 100%;}
#welcome .btn_flex .flex .member,
#welcome .btn_flex .flex .btn{width: 49%; }
#welcome .btn_flex .flex .member{margin: 0 2% 0 0 ;}
#welcome .btn_flex .flex .member a{background: #F5AB03;}

/* ------------------------------------------------------------ #login_box */
#login_box{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;}
#login_box .welcome_inner { width: 88%; max-width: 708px; border-radius: 15px; z-index: 999; position: relative; }
#login_box .container { border-radius: 15px; overflow: auto; position: relative; max-height: 100%;  padding: 28px 100px 100px; background: #fff; }
#login_box .logo h3 { font-size: 18px; padding: 15px 0 0; color: #000; font-family: "Noto-Sans-JP-Medium"; text-align: center;}
#login_box .form_box .link_box {text-align: center;  padding: 26px 0 48px;}
#login_box .form_box .link_box a{font-size: 14px; font-family: "Noto-Sans-JP-Medium";  border-bottom: 1px solid #000; line-height: 160%; color: #000; display: inline-block; }
#login_box .form_box .login_form_wrapper{width: 100%; margin: 0 auto;}
#login_box .form_box .login_form_wrapper .box{padding: 22px 0 0;}
#login_box .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%; }
#login_box .form_box .login_form_wrapper .box input{width: 92.5%; height: auto; border: 1px solid #D1D1D1; border-radius: 8px; font-size: 14px; line-height: 160%; padding: 15px 17px; margin: 6px 0 0;}
#login_box .btn a{width: 286px; font-size: 21px; padding: 20px 0;font-family: "Noto-Sans-JP-Medium"; }


/* ------------------------------------------------------------ in-valid-token-container */
.in-valid-token-container{text-align: center;padding: 20px 0;}
.in-valid-token-container p{margin-bottom: 30px; font-size: 16px;line-height: 1.6;}
.in-valid-token-container .btn{text-align: center;}
/* ------------------------------------------------------------ #new member email verification */
#new_email_verification{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;}
#new_email_verification .welcome_inner { width: 88%; max-width: 708px; border-radius: 15px; z-index: 999; position: relative; }
#new_email_verification .container { border-radius: 15px; overflow: auto; position: relative; max-height: 100%;  padding: 28px 100px 25px; background: #fff; }
#new_email_verification .logo h3 { font-size: 18px; padding: 15px 0 0; color: #000; font-family: "Noto-Sans-JP-Medium"; text-align: center;}
#new_email_verification .form_box .link_box {text-align: center;  padding: 10px 0 48px;}
#new_email_verification .form_box .link_box p{font-size: 14px; font-family: "Noto-Sans-JP-Medium"; line-height: 160%; color: #696969; display: inline-block; }
#new_email_verification .form_box .login_form_wrapper{width: 100%; margin: 0 auto;}
#new_email_verification .form_box .login_form_wrapper .box{padding: 22px 0 0;}
#new_email_verification .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%; }
#new_email_verification .form_box .login_form_wrapper .box input{width: 90%; height: auto; border: 1px solid #D1D1D1; border-radius: 8px; font-size: 14px; line-height: 160%; padding: 15px 17px; margin: 6px 0 0;}
#new_email_verification .btn a{width: 286px; font-size: 21px; padding: 20px 0;font-family: "Noto-Sans-JP-Medium"; }
#new_email_verification .success-alert p{font-size: 14px;line-height: 1.3; padding: 15px 0;padding-top: 20px;}
#new_email_verification .alert,
#login_box .alert {display: flex;flex-direction: column;color: red;padding: 10px 0 0;}


/* ------------------------------------------------------------ #reset_password_email-box verification */
#reset_password_email-box{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;}
#reset_password_email-box .welcome_inner { width: 88%; max-width: 708px; border-radius: 15px; z-index: 999; position: relative; }
#reset_password_email-box .container { border-radius: 15px; overflow: auto; position: relative; max-height: 100%;  padding: 28px 100px 25px; background: #fff; }
#reset_password_email-box .logo h3 { font-size: 18px; padding: 15px 0 0; color: #000; font-family: "Noto-Sans-JP-Medium"; text-align: center;}
#reset_password_email-box .form_box .link_box {text-align: center;  padding: 10px 0 48px;}
#reset_password_email-box .form_box .link_box p{font-size: 14px; font-family: "Noto-Sans-JP-Medium"; line-height: 160%; color: #696969; display: inline-block; }
#reset_password_email-box .form_box .login_form_wrapper{width: 100%; margin: 0 auto;}
#reset_password_email-box .form_box .login_form_wrapper .box{padding: 22px 0 0;}
#reset_password_email-box .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%; }
#reset_password_email-box .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;}
#reset_password_email-box .btn a{width: 286px; font-size: 21px; padding: 20px 0;font-family: "Noto-Sans-JP-Medium"; }
#reset_password_email-box .success-alert p{font-size: 14px;line-height: 1.3; padding: 15px 0;padding-top: 20px;}
#reset_password_email-box .alert{display: flex;flex-direction: column;color: red;margin-top: 5px;}



/* ------------------------------------------------------------ #reset-password-input-box */
#reset-password-input-box{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;}
#reset-password-input-box .welcome_inner { width: 88%; max-width: 708px; border-radius: 15px; z-index: 999; position: relative; }
#reset-password-input-box .container { border-radius: 15px; overflow: auto; position: relative; max-height: 100%;  padding: 28px 100px 55px; background: #fff; }
#reset-password-input-box .logo { text-align: center; padding: 35px 0 26px; }
#reset-password-input-box .logo h3 { font-size: 18px; padding: 15px 0 0; color: #000; font-family: "Noto-Sans-JP-Medium"; text-align: center;}
#reset-password-input-box .form_box .link_box {text-align: center;  padding: 10px 0 48px;}
#reset-password-input-box .form_box .link_box p{font-size: 14px; font-family: "Noto-Sans-JP-Medium"; line-height: 160%; color: #696969; display: inline-block; }
#reset-password-input-box .form_box .login_form_wrapper{width: 100%; margin: 0 auto;}
#reset-password-input-box .form_box .login_form_wrapper .box{padding: 22px 0 0;}
#reset-password-input-box .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%; }
#reset-password-input-box .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;}
#reset-password-input-box .btn a{width: 286px; font-size: 21px; padding: 20px 0;font-family: "Noto-Sans-JP-Medium"; }
#reset-password-input-box .success-alert{display: none;}
#reset-password-input-box .success-alert p{font-size: 14px;line-height: 1.3; padding: 15px 0;padding-top: 20px;}
#reset-password-input-box .alert{display: flex;flex-direction: column;color: red;margin-top: 5px;}


/* ------------------------------------------------------------ #mailchange_verification */

#mailchange_verification{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;}
#mailchange_verification .welcome_inner { width: 88%; max-width: 708px; border-radius: 15px; z-index: 999; position: relative; }
#mailchange_verification .container { border-radius: 15px; overflow: auto; position: relative; max-height: 100%;  padding: 28px 100px 55px; background: #fff; }
#mailchange_verification .logo { text-align: center; padding: 35px 0 26px; }
#mailchange_verification .logo h3 { font-size: 18px; padding: 15px 0 0; color: #000; font-family: "Noto-Sans-JP-Medium"; text-align: center;}
#mailchange_verification .btn a{width: 286px; font-size: 21px; padding: 20px 0;font-family: "Noto-Sans-JP-Medium"; }


/* ------------------------------------------------------------ ##registration_confirm */
#registration_confirm{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;}
#registration_confirm .logo h3 { font-size: 18px; padding: 15px 0 0; color: #000; font-family: "Noto-Sans-JP-Medium"; text-align: center;}
#registration_confirm .welcome_inner { width: 88%; max-width: 708px; border-radius: 15px; z-index: 999; position: relative; }
#registration_confirm .container { border-radius: 15px; overflow: auto; position: relative; max-height: 100%;  padding: 28px 100px 50px; background: #fff; }
#registration_confirm .form_box .msg { font-size: 18px; padding: 30px 0 0; color: green; font-family: "Noto-Sans-JP-Medium"; text-align: center;}

#registration_confirm .container {background: #fff;	border-radius: 10px;box-shadow: 0 0 10px rgba(0,0,0,0.1);padding: 40px 20px;max-width: 640px;margin: 0 auto;}
#registration_confirm h3 {text-align: center;font-size: 20px;color: #333;margin-bottom: 25px;font-family: 'Noto-Sans-JP-Medium';}
#registration_confirm .confirm-table {width: 100%;border-collapse: collapse;font-size: 14px;	margin-top: 20px;}
#registration_confirm .confirm-table th,
#registration_confirm .confirm-table td {text-align: left;padding: 12px 15px;border-bottom: 1px solid #EAEAEA;}
#registration_confirm .confirm-table th {background: #F5F7FA;width: 30%;font-weight: bold;color: #444;}
#registration_confirm .confirm-table td {color: #222;}

#registration_confirm .btn-group .btn{width: fit-content; background: #AACE30;line-height: 145%;font-size: 20px; padding: 10px 60px;font-family: "Noto-Sans-JP-Medium";display: block;border-radius: 50px;text-align: center;cursor: pointer;margin-top: 25px;}
#registration_confirm .btn-group{display: flex;flex-direction: row;gap:15px;}

#registration_confirm .btn-group {margin-top: 30px;display: flex;justify-content: center;gap: 20px;}
#registration_confirm .btn-group .btn.red {color: white;}

#registration_confirm .btn-group .btn.gray {background: #B0BEC5;color: white;}


/* ------------------------------------------------------------ #mail_change_confirm */
#email_change_confirm{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;}
#email_change_confirm .logo h3 { font-size: 18px; padding: 15px 0 0; color: #000; font-family: "Noto-Sans-JP-Medium"; text-align: center;}
#email_change_confirm .welcome_inner { width: 88%; max-width: 708px; border-radius: 15px; z-index: 999; position: relative; }
#email_change_confirm .container { border-radius: 15px; overflow: auto; position: relative; max-height: 100%;  padding: 28px 100px 50px; background: #fff; }
#email_change_confirm .form_box .msg { font-size: 18px; padding: 30px 0 0; color: green; font-family: "Noto-Sans-JP-Medium"; text-align: center;}

#email_change_confirm .container {background: #fff;	border-radius: 10px;box-shadow: 0 0 10px rgba(0,0,0,0.1);padding: 40px 20px;max-width: 640px;margin: 0 auto;}
#email_change_confirm h3 {text-align: center;font-size: 20px;color: #333;margin-bottom: 25px;font-family: 'Noto-Sans-JP-Medium';}


#email_change_confirm .btn-group .btn{width: fit-content; background: #AACE30;line-height: 145%;font-size: 20px; padding: 10px 60px;font-family: "Noto-Sans-JP-Medium";display: block;border-radius: 50px;text-align: center;cursor: pointer;margin-top: 25px;}
#email_change_confirm .btn-group{display: flex;flex-direction: row;gap:15px;}

#email_change_confirm .btn-group {margin-top: 30px;display: flex;justify-content: center;gap: 20px;}
#email_change_confirm .btn-group .btn.red {color: white;}

#email_change_confirm .btn-group .btn.gray {background: #B0BEC5;color: white;}



#email_change_confirm p{text-align: center;padding: 10px 0px; font-size: 20px;color: #06923E;}
#email_change_confirm p.expired-msg, #email_change_confirm p.invalid-msg{color: #FF3F33;}




/* ------------------------------------------------------------ #mail_change_confirm */
#email_change_confirm{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;}
#email_change_confirm .logo h3 { font-size: 18px; padding: 15px 0 0; color: #000; font-family: "Noto-Sans-JP-Medium"; text-align: center;}
#email_change_confirm .welcome_inner { width: 88%; max-width: 708px; border-radius: 15px; z-index: 999; position: relative; }
#email_change_confirm .container { border-radius: 15px; overflow: auto; position: relative; max-height: 100%;  padding: 28px 100px 50px; background: #fff; }
#email_change_confirm .form_box .msg { font-size: 18px; padding: 30px 0 0; color: green; font-family: "Noto-Sans-JP-Medium"; text-align: center;}

#email_change_confirm .container {background: #fff;	border-radius: 10px;box-shadow: 0 0 10px rgba(0,0,0,0.1);padding: 40px 20px;max-width: 640px;margin: 0 auto;}
#email_change_confirm h3 {text-align: center;font-size: 20px;color: #333;margin-bottom: 25px;font-family: 'Noto-Sans-JP-Medium';}


#email_change_confirm .btn-group .btn{width: fit-content; background: #AACE30;line-height: 145%;font-size: 20px; padding: 10px 60px;font-family: "Noto-Sans-JP-Medium";display: block;border-radius: 50px;text-align: center;cursor: pointer;margin-top: 25px;}
#email_change_confirm .btn-group{display: flex;flex-direction: row;gap:15px;}

#email_change_confirm .btn-group {margin-top: 30px;display: flex;justify-content: center;gap: 20px;}
#email_change_confirm .btn-group .btn.red {color: white;}

#email_change_confirm .btn-group .btn.gray {background: #B0BEC5;color: white;}



#email_change_confirm p{text-align: center;padding: 10px 0px; font-size: 20px;color: #06923E;}
#email_change_confirm p.expired-msg, #email_change_confirm p.invalid-msg{color: #FF3F33;}



/* ------------------------------------------------------------ #member */
#member{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 120px; position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100vh;}
#member .welcome_inner { width: 88%; max-width: 708px; border-radius: 15px; z-index: 999; position: relative; }
#member .container { border-radius: 15px; overflow: auto; position: relative; height: 100%;  padding: 28px 96px 60px; background: #fff; }
#member .container .input_tt{color: #000; font-family: "Noto-Sans-JP-Medium"; text-align: center; font-size: 14px; line-height: 140%; padding: 31px 0 0;}
#member .container .input_tt span{font-size: 14px; color: #E20101;}
#member .logo h3 { font-size: 18px; color: #000; font-family: "Noto-Sans-JP-Medium"; text-align: center;padding: 15px 0 0;}

#member .form_box .new_user_form{width: 100%; margin: 0 auto;}
#member .form_box .new_user_form .box{padding: 22px 0 0;}
#member .form_box .new_user_form .box .title{font-size: 14px;font-family: "Noto-Sans-JP-Medium"; width: 100%; height: auto; display: block; }
#member .form_box .new_user_form .box .title span{font-size: 14px; color: #E20101;}
#member .form_box .new_user_form .box .flex_box{display: flex;}
#member .form_box .new_user_form .box .flex_box.name input{width: 49%; height: auto;}
#member .form_box .new_user_form .box .flex_box.name input:first-child{margin-right:2%;}
#member .form_box .new_user_form .box input{width: 92.2%; height: auto; border: 1px solid #D1D1D1; border-radius: 8px; font-size: 14px; line-height: 160%; padding: 15px 17px; margin-top: 7px;}
#member .form_box .new_user_form .box .flex_box.data{ margin-top: 7px;}
#member .form_box .new_user_form .box .flex_box.data .st_box{width: 106px; height: auto; display: flex; align-items: center;}
#member .form_box .new_user_form .box .flex_box.data .st_box:not(:last-child){margin: 0 28px 0 0;}
#member .form_box .new_user_form .box .flex_box.data .st_box .p_box{position: relative; width: 84px; margin: 0 8px 0 0;}
#member .form_box .new_user_form .box .flex_box.data .st_box .p_box span{position: absolute;width: 9px; height: 20px; display: block; right: 10px; top: 50%; transform: translateY(-50%);}
#member .form_box .new_user_form .box .flex_box.data .st_box .p_box span:before{display: block; content: "";  border-bottom: 7px solid #000; border-left: 4px solid transparent; border-right: 4px solid transparent; height: 0; width: 0; position: absolute; right: 0px; top: 0px;}
#member .form_box .new_user_form .box .flex_box.data .st_box .p_box span:after{display: block; content: ""; border-top: 7px solid #000; border-left: 4px solid transparent; border-right: 4px solid transparent; height: 0; width: 0; position: absolute; right: 0px; bottom: 0px;}
#member .form_box .new_user_form .box .flex_box.data .st_box select{font-size: 14px; width: 100%;padding: 13px 0px 13px 20px;font-family: "Noto-Sans-JP-Medium"; border-radius: 10px; border: 1px solid #D1D1D1;-webkit-appearance: none; -moz-appearance: none; appearance: none;background: #fff;color: #000;}
#member .form_box .new_user_form .box .flex_box.data .st_box p{font-family: "Noto-Sans-JP-Medium";}

#member .form_box .new_user_form .radio_box .flex_box{border: 1px solid #D1D1D1;}
#member .form_box .new_user_form .radio_box .st_box{border-right: 1px solid #D1D1D1; width: 50%; height: auto; position: relative; border-radius: 0px; appearance: none; font-size: 16px;font-family: "Noto-Sans-JP-Medium"; padding: 13px 0 12px;}
#member .form_box .new_user_form .radio_box .st_box:last-child{border-right: none;}
#member .form_box .new_user_form .radio_box .st_box p{font-size: 11px;font-family: "Noto-Sans-JP-Medium"; line-height: 165%; text-align: center;width: 100%; height: auto; position: relative;}

#member .form_box .new_user_form .radio_box .flex_box{margin-top: 10px;}
#member .form_box .new_user_form .radio_box .st_box input[type="radio"]{display: none;}
#member .form_box .new_user_form .radio_box .st_box p span{width: 16px; height: 16px; display: block; position: absolute; border-radius: 50%; border: 1px solid #D1D1D1;top: 50%; ;transform: translateY(-50%); left: 12px;}
#member .form_box .new_user_form .radio_box .st_box input[type="radio"]:checked + p span::after { content: ''; display: block; border-radius: 50%; width: 10px; height: 10px; background: #00486E; position: absolute; top: 50%; left: 50%;transform: translate(-50%,-50%);}

#member .form_box .new_user_form .box .flex_box.data .st_box select::-ms-expand {display: none;}
#member .form_box .new_user_form .box .flex_box.data .st_box select option{font-size: 14px;}
#member .form_box .new_user_form .university .flex_box.data .st_box{width: 189px;}
#member .form_box .new_user_form .university .flex_box.data .st_box .p_box{width: 100%; height: auto;}
#member .form_box .new_user_form .university .flex_box.data .st_box .p_box span { width: 7px; height: 8px; }
#member .form_box .new_user_form .university .flex_box.data .st_box .p_box span:after{display: none;}
#member .form_box .new_user_form .university .flex_box.data .st_box .p_box span:before{ border-left: 7px solid black; border-top: 4px solid transparent; border-bottom: 4px solid transparent;}


#member .btn{margin: 31px auto 0;}
#member .btn a{width: 286px; font-size: 21px; padding: 20px 0;font-family: "Noto-Sans-JP-Medium";}


#member .form_box .new_user_form .box .register-mail{height: auto; border-radius: 8px; font-size: 14px; padding: 15px 0;margin-top: 7px;}
#member .welcome_inner .container form p.alert{display: flex !important;flex-direction: column !important;color: red;}


/* ------------------------------------------------------------ first-noti */

#first-noti { display: flex; flex-wrap:  wrap; justify-content: center; align-items: center; z-index: 999;  position: fixed; left: 0; top: 0; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; }
#first-noti .container { padding: 40px 0 0; position: relative; max-width: 820px; width: 94%; text-align: center; }
#first-noti .container h3 { position: absolute; left: 0; right: 0; top: 0; height: 80px; line-height: 80px; font-size: 24px; color: #fff; background: #000; padding: 0 30px; width: 88%; max-width: 375px; margin: auto; box-sizing: border-box; }
#first-noti .wbox { border-radius: 12px; background: #fff; padding: 100px 30px 60px; }
#first-noti .wbox figure { margin: auto; width: 94%; max-width: 534px; }
#first-noti .wbox img { width: 100%; height: auto; }
#first-noti .wbox .text { line-height: 220%; padding: 30px 0; } 
#first-noti .wbox .btn { padding: 30px 0 0; }
#first-noti .wbox .btn a { line-height: 70px; height: 70px; width: 42%; max-width: 315px; font-size: 20px;  display: inline-block; margin: 0 5px; }

/* ------------------------------------------------------------ help */

#help { 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; }
#help .help_inner { width: 88%; max-width: 890px; border-radius: 15px; z-index: 999; position: relative; }
#help h3 { text-align: center; font-size: 30px; font-family: 'Noto-Sans-JP-Bold'; color: #000; padding: 0 0 50px; }
#help .overlay { top: 0; left: 0; position: absolute; width: 100%; height: 100%; z-index: 0; }
#help .container { border-radius: 15px; overflow: auto; position: relative; height: 100%;  padding: 60px 6% 30px; background: #fff;}
#help .info { display: flex; flex-wrap: wrap; justify-content: space-between; }
#help .info .map { width: 100%; text-align: center; padding: 0 0 30px; }
#help .info .map h4 { font-size: 18px; text-align: center; color: #fff; padding: 10px; background: #00486E; font-family: 'Noto-Sans-JP-Bold';}
#help .info .map .map_img { display: flex; justify-content: space-between; padding-top: 15px; }
#help .info .map .map_img .map_sub { width: 40%; }
#help .info .map .map_img .map_main { width: 55%; display: flex; align-items: center; }
#help .info .map .map_img img { width: 100%; height: auto; }
#help .info .map .img_wrap { position: relative;}
#help .info .map .img_wrap p { position: absolute; top: 20px; left: 10px; font-size: 16px; font-family: "Noto-Sans-JP-Medium";}
#help .info .map .map_d { display: flex; justify-content: center;}
#help .info .map .map_d p { font-size: 14px; line-height: 140%; padding: 10px 15px; border: 1px solid #000; margin: 0 5px;}
#help .info .map .map_d p span { font-family: "Noto-Sans-JP-Medium"; color: red;}
#help .info .map .map_d p span.b { color: blue;}

#help .info .box { width: 49%; text-align: center; padding: 0 0 30px; }
#help .info .box img { margin: 15px 0 0; }
#help .info .box h4 { font-size: 18px; text-align: center; color: #fff; padding: 10px; background: #00486E; font-family: 'Noto-Sans-JP-Bold';}
#help .info .other { width: 100%; }
#help .info .other h4 { text-align: left; }
#help .info .other .chat { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-around; padding: 15px 0 0; }
#help .info .other .chat .map_func { width: 150px; }
#help .info .other .chat .chatform p,
#help .info .other .chat .map_func p { font-size: 14px; line-height: 120%;}
#help .info .other .chat .map_func img { margin: 10px auto;}
#help .info .other .chat img { height: auto; display: block; }

/* ------------------------------------------------------------ avatar select */

.avatar_select { display: flex; flex-wrap: wrap; box-sizing: border-box; padding: 30px 0; overflow: auto; justify-content: center; align-items: center; position: fixed; left: 0; top: 0; z-index: 999; background: rgba(0, 0, 0, 0.42); width: 100%; height: 100vh; }
.avatar_select .overlay { z-index: 998; position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; }
.avatar_select .avatar_inner { z-index: 999; position: relative;  border-radius: 15px; width: 94%; max-width: 890px; box-sizing: border-box; }
.avatar_select .avatar_inner h3 { z-index: 1; position: absolute; text-align: center; width: 100%; top: -19px; left: 0; }
.avatar_select .avatar_inner h3 span { background: #000; padding: 10px 20px; display: inline-block; border-radius: 50px; color: #fff; font-size: 30px; }
.avatar_select .container { padding: 70px 40px 40px; border-radius: 15px; overflow: auto; position: relative; height: 100%; 
	background: #fff;
	background-size: cover;
}
.avatar_select ul { padding: 50px 0; display: flex; flex-wrap: wrap; justify-content: center; }
.avatar_select ul li { text-align: center; width: calc(100% / 5);  box-sizing: border-box; cursor: pointer; }
.avatar_select ul li img { width: 94%; height: auto; position: relative; z-index: 1; }
.avatar_select ul li label { position: relative; display: block; padding: 20px 5px 30px; overflow: hidden; }
.avatar_select ul li label span { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; }
.avatar_select ul li label input[type="radio"] { position: absolute; z-index: -1; opacity: 0; left: -100%; }
.avatar_select ul li label input[type="radio"]:checked + span { background: url(../images/avatar/selected.png) no-repeat center center; background-size: 90% 100%; }

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

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

/* ------------------------------------------------------------ #point */

#point { 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; }
#point .overlay { top: 0; left: 0; position: absolute; width: 100%; height: 100%; z-index: 0; }
#point .welcome_inner { width: 88%; max-width: 1022px; border-radius: 15px; z-index: 999; position: relative; }
#point .roof { position: absolute; z-index: 9; top: 0; left: 50%; width: 105%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
#point .container { border-radius: 15px; overflow: auto; position: relative; height: 100%;  padding: 53px 40px 67px; background: #F2FBFF; }
#point .container .point_box{ width: 100%; height: auto; background: url(../images/map/welcome/bg_1.png) no-repeat center left 37%; background-size: 79%; text-align: center; position: absolute; bottom: -10%; left: 50%; transform: translateX(-50%);}
#point .container .box{position: relative;}
#point .container .point_box .pt{font-size: 53px;font-family: "Noto-Sans-JP-Medium"; padding: 19% 0 16%;}
#point .container .point_box .pt .big_pt{ font-size: 93px;font-family: "Helvetica Neue" , Helvetica , sans-serif; font-weight: 900;}


#point .container p.tt{text-align: center;font-family: "Noto-Sans-JP-Medium";font-size: 18px; line-height: 206%;}
#point .logo { text-align: center; padding: 0 0 31%;}
#point .logo h3 { font-size: 18px; padding: 10px 0 26px; color: #000; font-family: "Noto-Sans-JP-Medium"; }

#point .btn{padding: 34px 0 0;}
#point .btn a{width: 286px; font-size: 21px; padding: 20px 0;font-family: "Noto-Sans-JP-Medium";}
@media only screen and (max-width: 768px) {
	#point .logo { padding: 0 0 30%;}
	#point .container .point_box .pt{font-size: 35px;padding: 18.2% 0 13.7%;}
	#point .container .point_box .pt .big_pt{ font-size: 55px;}
}
/* ------------------------------------------------------------ map */

body { overflow: hidden; }

#map-wrapper { overflow: auto; width: 100%; height: 100vh; position: relative; z-index: 2; /* background: url(../images/assets/bg_3.jpg) no-repeat center center; */ background-color: #bfdeeb;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-overflow-style: none; 
    scrollbar-width: none;
}
#map-wrapper::-webkit-scrollbar { display: none; -webkit-appearance: none; width: 0; height: 0; opacity: 0; }
/*
#map { width: 3500px; margin: auto; cursor: pointer; position: relative;
	background: #e6e6e6 url(../images/common/bg.png) no-repeat center center;
	background-size: cover; 
}
*/

#map { width: 3500px; margin: auto; cursor: pointer; position: relative;
/*
	background: url(../images/assets/bg_3.jpg) no-repeat center center;
	background-size: cover; 
*/
	background-color: #bfdeeb;
}

#map .map_asset { pointer-events: none; width: 100%; height: auto; position: absolute; left: 0; top: 0; display: block; transition: 0.5s ease-out; }
#map img.bg { left: 5%; top: 5%; width: 80%; height: auto; z-index: 1;  display: block; position: absolute; }

/* ------------------------------------------------------------ clickable doors */

#map .door { position: absolute; z-index: 998; font-size: 8px; opacity: 1;
	transform: skew(0deg, 30deg);
	background: rgba(144, 255, 103, 0.36);
}

#map .entry1 { left: 19.3%; top: 65.7%; width: 3.8%; height: 10.3%; }
#map .entry2 { left: 21.3%; top: 56.2%; width: 2.8%; height: 9%; }
#map .entry3 { left: 32.1%; top: 50.2%; width: 1.8%; height: 8%; }
#map .entry4 { left: 59.25%; top: 29.5%; width: 1.8%; height: 8%; }

/* ------------------------------------------------------------  */

#map .pin { position: absolute; width: 0.8%; z-index: 999; }
#map .pin a { display: block; position: relative; }
#map .pin img { width: 100%; height: auto; }

#map .pin.object-hidden { opacity: 0.5; transition: 0.5s; pointer-events: none; }
#map .pin.object-near { opacity: 1; pointer-events: auto; }

/* ------------------------------------------------------------ marker */

#map .marker { width: 2.2%; text-align: center; }
#map .marker p { position: relative; }
#map .marker svg { width: 100%; height: auto; }
#map .marker p span { font-size: 12px; line-height: 15px; height: 15px; padding: 0 0 20px; display: block; color: #fff; top: 0; bottom: 0; margin: auto; position: absolute; width: 100%; }


#map .pin.private { width: 3%; }
#map .pin.private1 { top: 58%; left: 58%; }
#map .pin.private2 { top: 43%; left: 31%; }


#map .pin.enter { width: 3%; }
#map .pin.enter1 { top: 36%; left: 69.3%; }
#map .pin.enter2 { top: 15%; left: 36.2%; }
#map .pin.enter3 { top: 47%; left: 47.6%; }

#map .pin.homepage { width: 7%; top: 72%;left: 71%; text-align: center; }
#map .pin.homepage img { width: 26%; height: auto; }
#map .pin.homepage a { padding: 0 0 35%; display: block; }

#map .person { position: absolute; width: 4%; left: 7%; top: 60%; pointer-events: none;
	transition: 0.2s linear;
	-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	-o-transition: 0.2s linear;
	transition: 0.2s linear;
	font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif;
	margin-left: -1.45%;
	margin-top: 1.2%;
}
#map .person .wrap { position: relative; }
#map .person .wrap .box { position: absolute; bottom: 100%; width: 100%; }
#map .person img { width: 100%; height: auto; }

#map .person .chat { text-align: center; position: absolute; bottom: 102%; display: flex; flex-wrap: wrap; width: 250%; max-height: 46px;
	margin: 0 0 -25%;
	overflow: hidden;
	align-content: flex-end;
	position: relative;
	top: auto;
	left: -76%;
	padding: 0;
	height: 42px;
}
#map .person .chat.hide { height: 0; }
#map .person .chat p { position: absolute; display: none; width: 100%; text-align: center; transition: 0.5s;  margin: 2px 0 -5px; font-size: 12px; padding: 0 2px; }
#map .person .chat p span { position: relative; font-size: 10px; display: inline-block; padding: 4px 10px; border-radius: 10px; text-align: left; line-height: 130%; background: #fff; 
	box-shadow: 1px 1px 1px 1px #aaaaaa;
	line-height: 146%;
	text-overflow: ellipsis;
	overflow: hidden;
	display: inline-block;
	max-height: 25px;
	white-space: nowrap;
	max-width: 92%;
	box-sizing: border-box;
}

#map .person .chat p:nth-last-child(-n+3) { display: block; }

#map .person .chat p:first-child { top: -30px;	}
#map .person .chat p:nth-child(2) { top: 0; }
#map .person .chat p:nth-child(3) { top: 17px; }
#map .person .chat p:nth-child(4) { top: 60px; }

#map .person .chat p.private span { padding: 4px 10px 4px 25px; }
#map .person .chat p.private span::before { display: block; content: ''; width: 10px; height: 15px;
	position: absolute;
	left: 10px;
	top: 0;
	bottom: 0;
	margin: auto;
	background: #fff url(../images/map/icn_private_bk.png) no-repeat center center;
	background-size: 100% auto;
}

#map .person p.name { text-align: center; margin: 0 0 1px; left: -50%; min-width: 200%; width: 360%; position: relative;
	top: 0;
	left: 50%;
	-webkit-transform: translate(-50%,0);
	-ms-transform: translate(-50%,0);
	transform: translate(-50%,0);
}
#map .person p.name span { padding: 5px 10px 5px; font-size: 18px; color: #fff; background: #181818; text-align: center;
	border-radius: 100px;
	text-overflow: ellipsis;
	overflow: hidden;
	display: inline-block;
	max-height: 36px;
	white-space: nowrap;
	max-width: 100%;
	box-sizing: border-box;
	position: relative;
}

#map .person.speaking p.name span { padding-right: 20px; }
#map .person.speaking p.name span:after { display: block; content: ''; position: absolute; z-index: 1;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 12px; 
	height: 12px;
	right: 5px;
	background: url(../images/common/speaker_on.png) no-repeat center center;
	background-size: 100% auto;
}

#map .person.official p.name span {
	padding-left: 25px;
	background: #000 url(../images/common/verified.svg) no-repeat 5px center;
	background-size: auto 50%;
}

/* ------------------------------------------------------------ controls */

#controls { z-index: 100; cursor: pointer; position: fixed; bottom: 50px; left: 50px; width: 100px; height: 100px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.8);
}
#controls div { position: relative; width: 100%; height: 100%; }
#controls span { z-index: 1; display: block; position: absolute; margin: auto; width: 70%; height: 70%; }
#controls span img { width: 100%; height: auto; 
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}
#controls span.disabled img { opacity: 0.3; }
#controls .moveup { left: 0; right: 0; top: 2px; }
#controls .moveleft { left: 2px; top: 0; bottom: 0; }
#controls .moveright { right: 2px; top: 0; bottom: 0; }
#controls .movedown { left: 0; right: 0; bottom: 2px; }

#controls .me { border-radius: 50%; margin: auto; top: 0; bottom: 0; left: 0; right: 0; }

/* ------------------------------------------------------------ chat */

#show_chat { z-index: 98; position: fixed; width: 100px; right: 30px; bottom: 30px; cursor: pointer; }
#show_chat img { width: 100%; height: auto; }

/* ------------------------------------------------------------ chat_btn */

/* .footer { position: fixed; z-index: 101; } */
#chat_btn { cursor: pointer; }
#loc_btn { cursor: pointer; }

@media only screen and (min-device-width: 375px) and (max-device-width: 1000px) and (orientation: landscape) {
	h1 { left: 20px; top: 20px;}
	h1 img { width: 140px;}
	#help_btn { right: 290px; top: 22px;}
	#login_btn { right: 150px; top: 10px;}
	#logout_btn { right: 10px; top: 10px;}
	#zoom { right: 20px; bottom: 100px;}
	
	
	#welcome .slider .slider_box_2{ max-height: 200px !important;}
	
	
}

/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
	
	html { overflow: hidden; background: #fff; height: 100vh; max-height: -webkit-fill-available; }
	body { margin: 0 auto;position: fixed; overflow: hidden; width: 100%; height: 100vh; max-height: -webkit-fill-available; }

	h1 { left: 20px; top: 20px; }
	h1 img { width: 130px; height: auto; }
	h1 .back { padding: 0 0 0 ; }
	h1 .back a { font-size: 12px; border: 1px solid #000; display: inline-block; padding: 7px 5px; color: #000; width: inherit;}

	#help_btn { right: 210px; top: 26px; background: #000; border-radius: 50px; }
	#help_btn a { padding: 0; width: 20px; height: 20px; display: block; background-position: center center; }
	#help_btn span { display: none; }

	#meta_lp { width: 180px; right: 15px; top: 70px; }
	#meta_lp img { width: 100%; height: auto; }
	
	
	.btn { padding: 10px 0 0; }
	.btn a,
	.btn input[type="submit"] { width: 90%; max-width: 320px; line-height: 100%; padding: 20px 0; height: auto; font-size: 18px; }
	
	#interview_timer.header_additonal-details { top: 11vw; left: 80px;}
	
	.bg_color { padding: 5px; }

	.container .img { width: 60%;}
	/* ------------------------------------------------------------ header */

	#menu_btn { right: 15px; top: 15px; }
	#menu_btn img { width: 40px; height: auto; }
	#login_btn { top: 20px; right: 110px; }
	#login_btn a { font-size: 12px; height: 30px; line-height: 30px; width: 90px; }
	#logout_btn{ right: 10px; top: 20px;}
	#logout_btn a {font-size: 12px; height: 30px; line-height: 30px; width: 90px;}

	#lang_select { top: 72px; }
	#lang_select p span { font-size: 12px; width: 25px; height: 20px; line-height: 20px; }

	/* ------------------------------------------------------------ welcome */

	#welcome { padding: 10px 0 60px;}
	#welcome .container { padding: 30px 6%; }
	#welcome .logo img { width: 90%; height: auto; }
	#welcome .logo{padding: 15px 0; }
	#welcome .logo h3 { font-size: 16px; line-height: 150%; }
	#welcome .slider { padding: 0 0 20px; }
	#welcome .slider .slider_box_2{padding: 15px 0 0; }
	#welcome .slider p { font-size: 13px; line-height: 150%; }
	#welcome .swiper-pagination-bullet { width: 10px; height: 10px; }
	#welcome .swiper-pagination { padding: 0;}
	#welcome .welcome_inner a{width: 90%; font-size: 18px; padding: 20px 0; line-height: 100%;}
	#welcome .btn_flex .flex .btn{padding: 0px;}
	#welcome .btn_flex .flex a{font-size: 16px;}
	#welcome .btn_box{padding: 0 0 58px;}
	#welcome .slider button.slick-arrow{width: 35px; height: 35px; }
	#welcome .slider button.slick-prev{left: -15px;}
	#welcome .slider button.slick-next{right: -15px;}
	#welcome .slider button.slick-prev:before{ border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 15px solid #fff;left: 25%; }
	#welcome .slider button.slick-next:before{ border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #fff; right: 25%; }
	/* ------------------------------------------------------------ #login_box */
	#login_box{padding: 20px 0 60px; }
	#login_box .container { padding: 50px 6% 30px; }
	#login_box .logo h3 { font-size: 16px; }
	#login_box .form_box .link_box {padding: 13px 0 24px;}
	#login_box .form_box .link_box a{font-size: 14px;}
	#login_box .form_box .login_form_wrapper .box{padding: 18px 0 0;}
	#login_box .form_box .login_form_wrapper .box label{font-size: 14px;}
	#login_box .form_box .login_form_wrapper .box input{font-size: 14px; padding: 10px 12px; margin: 3px 0 0;}
	#login_box .btn a{ max-width: 320px; width: 90%; font-size: 18px; padding: 20px 0; line-height: 100%; height: auto; }
	
	
	/* ------------------------------------------------------------ #new user email verficiaont #new_email_verification */
	#new_email_verification{padding: 20px 0 60px; }
	#new_email_verification .container { padding: 50px 6% 30px; }
	#new_email_verification .logo h3 { font-size: 16px; }
	#new_email_verification .form_box .link_box {padding: 13px 0 24px;}
	#new_email_verification .form_box .link_box a{font-size: 14px;}
	#new_email_verification .form_box .login_form_wrapper .box{padding: 18px 0 0;}
	#new_email_verification .form_box .login_form_wrapper .box label{font-size: 14px;}
	#new_email_verification .form_box .login_form_wrapper .box input{font-size: 14px; padding: 10px 12px; margin: 3px 0 0;}
	#new_email_verification .btn a{ max-width: 320px; width: 90%; font-size: 18px; padding: 20px 0; line-height: 100%; height: auto; }
	
	
	/* ------------------------------------------------------------ #reset_password_email-box verficiaont */
	#reset_password_email-box{padding: 20px 0 60px; }
	#reset_password_email-box .container { padding: 50px 6% 30px; }
	#reset_password_email-box .logo h3 { font-size: 16px; }
	#reset_password_email-box .form_box .link_box {padding: 13px 0 24px;}
	#reset_password_email-box .form_box .link_box a{font-size: 14px;}
	#reset_password_email-box .form_box .login_form_wrapper .box{padding: 18px 0 0;}
	#reset_password_email-box .form_box .login_form_wrapper .box label{font-size: 14px;}
	#reset_password_email-box .form_box .login_form_wrapper .box input{font-size: 14px; padding: 10px 12px; margin: 3px 0 0;}
	#reset_password_email-box .btn a{ max-width: 320px; width: 90%; font-size: 18px; padding: 20px 0; line-height: 100%; height: auto; }
	
	
		/* ------------------------------------------------------------ #email_change_confirm */
	#email_change_confirm{padding: 20px 0 60px; }
	#email_change_confirm .container { padding: 50px 6% 30px; }
	#email_change_confirm .logo h3 { font-size: 16px; }
	#email_change_confirm .btn-group .btn{padding: 10px 30px; font-size: 15px;}
	#email_change_confirm .confirm-table th,
	#email_change_confirm .confirm-table td{padding: 12px 10px;font-size: 13px;}
	
	/* ------------------------------------------------------------ ##reset-password-input-box */
	#reset-password-input-box{padding: 20px 0 60px; }
	#reset-password-input-box .container { padding: 50px 6% 30px; }
	#reset-password-input-box .logo{padding: 15px 0; }
	#reset-password-input-box .logo h3 { font-size: 16px; line-height: 150%; }
	#reset-password-input-box .form_box .link_box {padding: 13px 0 24px;}
	#reset-password-input-box .form_box .link_box a{font-size: 14px;}
	#new_email_verification .form_box .login_form_wrapper .box{padding: 18px 0 0;}
	#reset-password-input-box .form_box .login_form_wrapper .box label{font-size: 14px;}
	#reset-password-input-box .form_box .login_form_wrapper .box input{font-size: 14px; padding: 10px 12px; margin: 3px 0 0;}
	#reset-password-input-box .btn a{ max-width: 320px; width: 90%; font-size: 18px; padding: 20px 0; line-height: 100%; height: auto; }
	
	
	
	/* ------------------------------------------------------------ #registration_confirm */
	#registration_confirm{padding: 20px 0 60px; }
	#registration_confirm .container { padding: 50px 6% 30px; }
	#registration_confirm .logo h3 { font-size: 16px; }
	#registration_confirm .btn-group .btn{padding: 10px 30px; font-size: 15px;}
	#registration_confirm .confirm-table th,
	#registration_confirm .confirm-table td{padding: 12px 10px;font-size: 13px;}
	
	
		/* ------------------------------------------------------------ #email_change_confirm */
	#email_change_confirm{padding: 20px 0 60px; }
	#email_change_confirm .container { padding: 50px 6% 30px; }
	#email_change_confirm .logo h3 { font-size: 16px; }
	#email_change_confirm .btn-group .btn{padding: 10px 30px; font-size: 15px;}
	#email_change_confirm .confirm-table th,
	#email_change_confirm .confirm-table td{padding: 12px 10px;font-size: 13px;}
	
	/* ------------------------------------------------------------ #member */
	#member .container {padding: 50px 6% 30px;}
	#member .container .input_tt{font-size: 12px; padding: 31px 0 0;}
	#member .container .input_tt span{font-size: 12px; }
	#member .logo h3 { font-size: 14px; }
	
	#member .form_box .new_user_form .box{padding: 22px 0 0;}
	#member .form_box .new_user_form .box .title{font-size: 12px;}
	#member .form_box .new_user_form .box .title span{font-size: 12px; }
	#member .form_box .new_user_form .box .flex_box{display: flex;}
	#member .form_box .new_user_form .box .flex_box.name input{width: 49%; height: auto;}
	#member .form_box .new_user_form .box .flex_box.name input:first-child{margin-right:2%;}
	#member .form_box .new_user_form .box input{font-size: 12px; padding: 10px; margin-top: 7px;}
	#member .form_box .new_user_form .box .flex_box.data{ margin-top: 7px;}
	#member .form_box .new_user_form .box .flex_box.data .st_box{width: 30%; }
	#member .form_box .new_user_form .university .flex_box.data .st_box {width: 45%;}
	#member .form_box .new_user_form .box .flex_box.data .st_box:not(:last-child){margin: 0 14px 0 0;}

	#member .form_box .new_user_form .box .flex_box.data .st_box .p_box{ width: 100%; margin: 0 4px 0 0;}
	#member .form_box .new_user_form .box .flex_box.data .st_box .p_box span{ width: 8px; height: 18px; right: 8px; }
	#member .form_box .new_user_form .box .flex_box.data .st_box .p_box span:before{border-bottom: 5px solid #000; border-left: 4px solid transparent; border-right: 4px solid transparent;}
	#member .form_box .new_user_form .box .flex_box.data .st_box .p_box span:after{border-top: 5px solid #000; border-left: 4px solid transparent; border-right: 4px solid transparent; }
	#member .form_box .new_user_form .university .flex_box.data .st_box .p_box span:before {border-left: 7px solid black;top: 4px solid transparent; border-bottom: 4px solid transparent;}	
	#member .form_box .new_user_form .box .flex_box.data .st_box select{font-size: 12px;padding:12px 0px 12px 10px;color: #000;}
	#member .form_box .new_user_form .university .flex_box.data .st_box .p_box span { width: 10px; height: 8px;}
	#member .form_box .new_user_form .radio_box .st_box{font-size: 13px;padding: 8px 0 9px;}
	
	#member .form_box .new_user_form .radio_box .flex_box{margin-top: 7px;}
	#member .form_box .new_user_form .radio_box .st_box p span{width: 12px; height: 12px; left: 5px;}
	#member .form_box .new_user_form .radio_box .st_box input[type="radio"]:checked + p span::after { width: 8px; height: 8px; }
	
	
	#member .form_box .new_user_form .box .flex_box.data .st_box select option{font-size: 14px;}
	#member .btn{margin: 31px auto 0;}
	#member .btn a{  max-width: 320px; width: 90%; font-size: 18px; padding: 20px 0; line-height: 100%; height: auto; }

	/* ------------------------------------------------------------ first-noti */

	#first-noti .container h3 { height: 60px; line-height: 60px; font-size: 18px; width: 70%; padding: 0; }
	#first-noti .container { padding: 30px 0 0; }
	#first-noti .wbox { padding: 60px 4% 30px; }
	#first-noti .wbox .text { padding: 30px 0 0; font-size: 14px; line-height: 180%; }
	#first-noti .wbox .btn { padding: 20px 0 0; }
	#first-noti .wbox .btn a { height: 50px; line-height: 50px; font-size: 16px; display: block; margin: 10px auto 0; width: 60%; max-width: 260px; }

	/* ------------------------------------------------------------ menu */

	#menu.show { right: 4%; }
	#menu { width: 92%; height: 94%; padding: 5px; }
	#menu .menu_close { top: 30px; right: 6%; }
	#menu .menu_close img { width: 25px; height: auto; }
	#menu .container { width: 90%; padding: 30px 0; min-height: 670px; }
	#menu .logo img { width: 80%; max-width: 308px; }
	#menu .nav .nav-item { padding: 0 0 10px; }
	#menu .nav .nav-item img { width: 72%; }
	#menu .list a { margin: 8px 0; font-size: 14px; }
	#menu .list a { padding: 8px 15px 8px 40px; }
	#menu .list .soon { padding: 8px 15px 8px 100px; background-size: auto 15px; background-position: 10px center; }
	#menu .live a { background-size: auto 20px; }
	#menu .enter a { background-size: auto 10px; }
	#menu .spot a img { width: 15px; height: auto; }
	#menu .menu_footer .links a { font-size: 12px; }
	#menu .menu_footer .bottom .sns a { padding: 0; }
	#menu .menu_footer .bottom .sns a img { width: 25px; height: auto; }
	#menu .menu_footer .bottom .jce { width: 120px; height: auto; }
	
	#menu .menu_footer .gray_link a { font-size: 12px; }
	
	#menu .menu_footer .logos { flex-wrap: wrap; justify-content: flex-start; }
	#menu .menu_footer .logos li { padding: 15px 0 0 ; }
	#menu .menu_footer .logos li.special,
	#menu .menu_footer .logos li.develop { width: 80px; text-align: left; }
	#menu .menu_footer .logos li.special a img,
	#menu .menu_footer .logos li.develop a img { max-width: 75%; }

	/* ------------------------------------------------------------ help */

	#help { padding: 30px 0 90px; }
	#help .help_inner { width: 80%; }
	#help .container { padding: 40px 4% 30px; }
	#help h3 { font-size: 18px; padding: 0 0 30px; }
	
	#help .info .map .map_img { display: block; }
	#help .info .map .map_img .map_sub { width: 100%; }
	#help .info .map .map_img .map_main { width: 100%; display: block; }
	#help .info .map .img_wrap { width: 90%; margin: 0 auto;}
	#help .info .map .img_wrap p { top: 20px; left: 10px; font-size: 13px;}
	#help .info .map .map_d { display: block; }
	#help .info .map .map_d p { width: 60%; font-size: 14px; line-height: 160%; padding: 7px 15px; margin: 0 auto 10px;}
	#help .info .map .map_d p span { font-family: "Noto-Sans-JP-Medium"; color: red;}
	#help .info .map .map_d p span.b { color: blue;}
	
	
	#help .info .box h4 { font-size: 16px; padding: 5px 10px; }
	#help .info .box { width: 100%; padding: 0 0 15px; }
	#help .info .box img { width: 60%; max-width: 250px; height: auto; }
	#help .info .other { padding: 0; }
	#help .info .other h4 { text-align: center; }
	
	#help .info .other .chat .map_func { width: 100%; }
	#help .info .other .chat .chatform p,
	#help .info .other .chat .map_func p { font-size: 14px; }
	#help .info .other .chat .map_func img {  width: 30%; margin: 10px auto;}
	#help .info .other .chat .chatform img { width: 80%; margin: 10px auto; }

	
	/* ------------------------------------------------------------ avatar */
	.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%; }

	/* ------------------------------------------------------------ #point */
	#point{padding: 0px 0 60px; }
	#point .container { border-radius: 15px; overflow: auto; position: relative; height: 100%; padding: 25px 6% 30px; }
	#point .container .point_box{ width: 100%; height: auto; background: url(../images/map/welcome/bg_1.png) no-repeat center left 37%; background-size: 100%; position: relative; margin: -15px 0 0px;}
	#point .container .point_box .pt{font-size: 20px;padding: 21% 0 16%;}
	#point .container .point_box .pt .big_pt{ font-size: 44px;}
	#point .container p.tt{font-size: 14px; line-height: 180%;}
	#point .logo { text-align: center; padding: 0 0 0px}
	#point .logo h3 { font-size: 14px; padding: 10px 0 0;}
	
	#point .btn{padding: 20px 0 0;}
	#point .btn a{ width: 75%; max-width: 320px; font-size: 18px; line-height: 100%; padding: 16px 0; height: auto; }
	/* ------------------------------------------------------------ zoom */

	#zoom { right: 21px; width: 55px; bottom: 140px; }
	#zoom img { width: 100%; height: auto; }

	#nav h2 { display: none; }
	#nav .box { top: -100%; z-index: 2; transition: 0.5s; padding: 50px 4% 30px; position: fixed; width: 100%; left: 0; height: 100%; box-sizing: border-box; }
	#nav .box.open { top: 0%; }
	#nav .box .close { display: block; position: absolute; right: 5%; top: 20px; }
	#nav .menu_open { display: block; position: fixed; z-index: 1; left: 19px; top: 200px; cursor: pointer; }
	
	#map-wrapper { height: 100%; max-height: -webkit-fill-available; transition: 0.5s; }
	#map-wrapper.chat_show { height: 50vh;  }
	#map { width: 800vw; }
	#map .person .chat p span { font-size: 8px; padding: 4px 5px; max-width: 92%; }
	#map .person p.name { margin: 0;  }
	#map .person p.name span { font-size: 10px; }
	#map .person .chat { max-height: 40px; height: 40px; padding: 0; }
	
	.avatar_select .box { height: 88%; }
	.avatar_select .box h4 { font-size: 24px; }
	.avatar_select .selected img { width: 70px; height: auto; }
	
	#map .person .chat p:nth-child(3) { top: 17px; }
	
	
	#show_chat { position: absolute; transition: 0.5s; width: 50px; right: 20px; top: 20px; }
	#show_chat.active { bottom: 50px; }
	
	.copyright { font-size: 8px; left: 15px; bottom: 15px; }
	
	.avatar_select .box h4 { font-size: 24px; }
	
	#controls { position: absolute; transition: 0.5s; bottom: 15px; left: 15px; width: 60px; height: 60px; }
	#controls.active { bottom: 50px; }
	#controls span { width: 50%; height: 50%; }

	#menu .menu_footer .links img { width: 70px; height: auto; }
	
	#map .marker { width: 2.8%; }
	#map .marker p span { font-size: 10px; }

}