@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 .vr_gate { padding: 10px 0 0 ; text-align: center; }
h1 .vr_gate a { font-size: 14px; border: 1px solid #000; display: inline-block; padding: 10px 10px; color: #fff; width: 177px; background: #000;}
h1 .private { padding: 10px 0 0; display: none; }

#help_btn { right: 260px; top: 59px; }
#help_btn a { color: #fff; display: block; height: 20px; line-height: 20px; padding: 0 0 0 30px;
	background: url(../images/index/icn_help.png?var=1) no-repeat left center; 
	background-size: 18px auto; 
}

#meta_lp { width: 260px; right: 40px; top: 110px; }

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

#loader { position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: #fff; z-index: 9999; }
#clouds p { width: 100%; height: 100%; position: fixed; z-index: 9998; top: 0; bottom: 0; transition: 2s; }
#clouds p.cloud1 { left: 0; background: url(../images/index/cloud1.png) no-repeat right center; background-size: cover; }
#clouds p.cloud2 { right: 0; background: url(../images/index/cloud2.png) no-repeat left center; background-size: cover; }
#clouds p.cloud1.close { left: -100%; }
#clouds p.cloud2.close { right: -100%; }

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

.header { position: fixed; z-index: 99; }
#menu_btn { right: 25px; top: 30px; cursor: pointer; }
#login_btn { right: 115px; 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: 30px; top: 40px; }
#logout_btn a { display: block; padding: 5px; text-align: center; }
#logout_btn a span { display: block; padding: 5px 0 0; color: #323336; font-size: 14px; font-family: "Noto-Sans-JP-Medium"; }
#logout_btn img { width: 30px; height: auto; }


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


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

#menu.show { right: 45px; }
#menu { -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; position: fixed; right: -150%; top: 0; bottom: 0; margin: auto; border-radius: 20px; z-index: 999; box-sizing: border-box;
	padding: 10px;
	width: 530px;
	height: calc(100% - 50px);
	background: linear-gradient(0deg, rgba(153, 41, 204, 0.9), rgba(108, 222, 245, 0.9));
	background: -webkit-linear-gradient(0deg, rgba(153, 41, 204, 0.9), rgba(108, 222, 245, 0.9));
}
#menu .menu_inner { background: #000; position: relative; height: 100%; border-radius: 20px; overflow: auto; max-height: 100%; height: 100%; }
#menu .container { position: relative; margin: auto; height: 100%; box-sizing: border-box; min-height: 828px;
	width: calc(100% - 80px);
	padding: 45px 0 250px;
}
#menu .menu_close { position: absolute; right: 40px; top: 45px; cursor: pointer; z-index: 1; }
#menu .logo { text-align: center; padding: 0 0 30px; }
#menu .nav .nav-item { float: left; width: calc(100% / 3); text-align: center; cursor: pointer; padding: 0 0 20px; position: relative; }
#menu .nav .nav-item::after { content: ''; display: block; position: absolute; width: 100%; background: #5b5b5b; bottom: 0; left: 0; height: 3px; }
#menu .nav .nav-item.swiper-slide-thumb-active::after {
	background: linear-gradient(0deg, rgba(153, 41, 204, 1), rgba(108, 222, 245, 1));
	background: -webkit-linear-gradient(0deg, rgba(153, 41, 204, 1), rgba(108, 222, 245, 1));
}
#menu .nav .nav-item img { width: 80%; height: auto; }

#menu .slider { height: calc(100% - 500px); position: relative; min-height: 100px; }
#menu .list { position: relative; margin: 10px 0; height: 100%; box-sizing: border-box; overflow: auto; }
#menu .list a { display: block; margin: 10px 0; position: relative; background: #fff; color: #000; border-radius: 20px; }
#menu .list a { padding: 12px 20px 12px 55px; }
#menu .list .soon { padding: 12px 20px 12px 130px; color: #8e8e8e; background: #dadada url(../images/index/comming_soon.png) no-repeat 15px center; background-size: auto 20px; }

#menu .live a { background: #fff url(../images/index/menu1.png) no-repeat left center; background-size: auto 30px; }
#menu .enter a { background: #fff url(../images/index/menu2.png) no-repeat 10px center; background-size: auto 18px; }
#menu .spot a img { left: 15px; top: 0; bottom: 0; margin: auto; position: absolute; }

#menu .menu_footer { width: 100%; left: 0; position: absolute; bottom: 0; }
#menu .menu_footer .logos { align-items: center; width: 100%; display: flex; justify-content: space-around; padding: 0 0 20px; }
#menu .menu_footer .logos li { padding: 20px 0; text-align: center; }

#menu .menu_footer .logos li.special { width: 46px; }
#menu .menu_footer .logos li.develop { width: 76px; }

#menu .menu_footer .logos li img { max-width: 90%; height: auto; }
#menu .menu_footer .logos li a { font-size: 10px; display: block; }
#menu .menu_footer .links { border-top: 1px solid #fff; align-items: center; display: flex; justify-content: space-between; padding: 15px 0; }
#menu .menu_footer .links a { display: block; font-size: 14px; }
#menu .menu_footer .bottom { padding: 0 0 30px; display: flex; justify-content: space-between; align-items: center; }
#menu .menu_footer .bottom .sns a { display: inline-block; padding: 0 5px; }
#menu .menu_footer .gray_link a { display: block; text-align: center; font-size: 14px; padding: 8px 0; background: #191919; }

/* ------------------------------------------------------------ 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: 10px; box-sizing: border-box; /* border-radius: 10px; */ /* background: rgba(149, 163, 179, 0.7); */ background: #3ca736; }

.btn_box{display: flex; max-width: 700px; margin: 0 auto; }
.btn { text-align: center;width: 100%; max-width: 340px; }
.btn_1{padding: 0 2.5% 0 0; }
.btn a,
.btn input[type="submit"] { border: none; border-radius: 50px; width: 100%; height: 80px; line-height: 80px; font-size: 24px; color: #fff; display: block; margin: auto; }

.btn .blue { background: #0086c4; }
.btn .green { background: #3ca736; }
.btn .gray { background: #596659; }
/* ------------------------------------------------------------ welcome */

.common_modal { 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; background: url(../images/index/welcome/bg_02.png) no-repeat center center; background-size: cover; }
.common_modal .overlay { top: 0; left: 0; position: absolute; width: 100%; height: 100%; z-index: 0; }
.common_modal .welcome_inner { width: 94%; max-width: 890px; border-radius: 15px; z-index: 999; position: relative; background: url(../images/index/welcome/bg.png) no-repeat center center; background-size: cover; margin: 0 auto; }
.common_modal .roof {width: 34.2%; height: auto;margin: 0 auto;display: block;max-width: 228px; padding: 0 0 20px; }
.common_modal .container { border-radius: 15px; overflow: auto; position: relative; height: 100%; padding: 34px 40px 52px; background-color:rgba(255,255,255,0.85) !important;border: 3px solid #4fb048;
}
.common_modal .slider { padding: 0 0 10px; max-width: 600px; margin: 0 auto; }
.common_modal .slider img { width: 100%; height: auto; }
.common_modal .slider p { font-size: 18px; color: #000; line-height: 160%; text-align: center; padding: 22px 0 20px;font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 400;font-style: normal;line-height: 200%; }

.common_modal .logo { text-align: center; }
.common_modal .logo h3 { font-size: 19px; color: #000; font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 700;font-style: normal; padding: 0 0 40px; letter-spacing: 0.05em; }
.common_modal .swiper-pagination { padding: 0 0 15px; }
.common_modal .swiper-pagination-bullet { background: #fff; width: 15px; height: 15px; margin: 0 5px; }
.common_modal .swiper-pagination-bullet-active { background: #ea2700; }

/*--------------------------------------------------------- login */
.common_modal{ border-radius: 15px; }
.common_modal .logn_box{position: relative;width: 88%; /* max-width: 700px; */ max-width: 890px;margin: 0 auto; }
#login.common_modal .container{padding: 9px 40px 49px}
#login.common_modal .welcome_inner { width: 94%; }
#login.common_modal .slider { padding: 0 0 9px; max-width: 630px; margin: 0 auto; }


#login.common_modal h3{top: -42px; right: 0%;text-align: center;position: absolute;width: 100%; left: auto;  z-index: 1000;font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 400;font-style: normal; }
#login.common_modal h3 span{background: #0086c4; border-radius: 50px; color: #fff; font-size: 30px;padding: 16px 36px; display: inline-block;letter-spacing: 0.05em; }
#login img{width: 100%; margin: 44px auto 30px; display: block; max-width: 350px; padding: 0px; }
#login p {text-align: center; font-size: 23px; padding: 0 0 11px;font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 700;font-style: normal; }
#login form .form-example{padding: 0 0 21px; }
#login form .form-example.form_2{padding: 0 0 39px; }
#login p.alert { padding: 0 0 30px; color: #ff0000; font-size: 16px; line-height: 150%; }

#login form .form-example span{display: block; font-size: 12px;font-family: source-han-sans-japanese, sans-serif;font-weight: 300;font-style: normal;padding: 10px 0 0; }

.common_modal form input{width: 87%; height: auto; height: 60px;padding: 0 25px; margin: 0 0 10px;font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 400;font-style: normal;border: 1px solid #ccc; font-size: 20px; }
#login.common_modal form input{width: 84%; }
.common_modal .form-example { max-width: 500px; margin: 0 auto; }
.common_modal .btn{text-align: center;width: 100%;max-width: 370px; margin: 0 auto; }
.common_modal .btn a,
.common_modal .btn input[type="submit"] {border: 1px solid #3ca736; font-size: 24px; font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 700;font-style: normal; color: #fff;height: 80px; width: 100%; cursor: pointer; }

.common_modal h3{color: #000; font-size: 40px; text-align: center;width: 100%; font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 700;font-style: normal; letter-spacing: 0.05em; }
/*--------------------------------------------------------- sign_up_1 */
#register.common_modal .container{padding: 27px 47px 55px; }
#register.common_modal .slider { padding: 0 0 9px; max-width: none;margin: 0 auto;text-align: center; border-bottom: 1px solid #d2d2d2; margin: 0 0 40px; }


.common_modal h3{padding: 16px 0; }
#register h4 { text-align: center; font-size: 18px; font-family: "fot-tsukuardgothic-std", sans-serif; line-height: 150%; font-weight: 400;font-style: normal; padding: 0 0 20px;letter-spacing: 0.05em; }
#register p{text-align: center; font-size: 20px; padding: 0 0 11px;font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 400;font-style: normal;letter-spacing: 0.05em; }
#register .fom_box{width:100%; margin: 0 auto; }

#register .radio .radio_box{display: flex;justify-content: space-between;width: 219px;margin: 0 auto; padding: 0 0 28px; }
#register .radio .radio_box .input_radio{padding: 0 13px 0 0; }
#register .radio .radio_box .radio_btn{display: flex; align-items: center; }
#register .radio .radio_box span {position: relative; font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 400;font-style: normal; font-size: 18px; display: }

#register .radio .radio_box input{-webkit-appearance: none; width: 25px; height: 25px; border-radius: 50%; border: 1px solid #d5d5d5;padding: 0px;margin: 0px; display: block; }
#register .radio .radio_box input:before{ content: ""; display: block; width: 60%; height: 60%; margin: 20% auto; border-radius: 50%; }
#register .radio .radio_box input:checked:before{background: #3ca736; }

#register form .form-tt {padding: 0 0 20px; }
#register form .btn { padding: 20px 0 0; }

#register form form .form-example.form_2{padding: 0 0 39px; }
#register form form input{width: 100%; height: auto; height: 60px;padding: 0 25px; margin: 0 0 10px;font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 400;font-style: normal; }
#register form form .form-example span{display: block; font-size: 12px;font-family: source-han-sans-japanese, sans-serif;font-weight: 300;font-style: normal; }

#register form form .btn input{border: 1px solid #3ca736; font-size: 24px; font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 700;font-style: normal; color: #fff;height: 80px; }

#register p.notion { font-size: 14px; text-align: left; }

#register p.alert { padding: 20px 0; }
#register p.alert span { display: block; color: #ee1010; padding: 2px 0; line-height: 150%; }

.common_modal form form .btn input:before{content: "";background: #3ca736; }
.common_modal .list{width: 78px; height: auto ; display: flex ; justify-content: space-between ;margin: 0 auto ; padding: 28px 0 30px; }
.common_modal .list li{width: 12px ; height: 12px; background: #d6d6d6 ; border-radius: 50% ;padding: 0px; }
.common_modal .list li.active_li{background: #0086c4; }

.common_modal form input{height: 66px;margin: 0px; }
/*--------------------------------------------------------- sign_up_2 */
/*
#sign_up_2.common_modal .container{padding: 27px 47px 55px; }
#sign_up_2.common_modal .slider { padding: 0 0 9px; max-width: none;margin: 0 auto;text-align: center; border-bottom: 1px solid #d2d2d2; margin: 0 0 40px; }



#sign_up_2 h3{padding: 16px 0; }
#sign_up_2 h4{font-size: 18px; font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 400;font-style: normal; padding: 0 0 20px; }
#sign_up_2 p{text-align: center; font-size: 20px; padding: 0 0 11px;font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 400;font-style: normal;letter-spacing: 0.05em; }
#sign_up_2 .fom_box{width:100%; margin: 0 auto; }
*/

#register .confirm { width: auto; margin: 0 auto; }

#register .confirm .table {width: 100%; padding: 0 0 50px; }
#register .confirm .table ul{border: 1px solid #cccccc; width: 100%; font-size: 18px;font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 400;font-style: normal; border-spacing:5px; display: flex; }
#register .confirm .table ul:not(:last-child){margin: 0 0 19px; }
#register .confirm .table ul .left {width: 100%; background: #eeeeee; text-align: left; padding: 24px 22px; border-right: 1px solid #cccccc; max-width: 418px;letter-spacing: 0.05em; }
#register .confirm .table ul .right {width: calc(100% - 418px ); background: #ffffff; padding: 24px 30px ; } 

#register .confirm .form-example { padding: 0 0 19px; }
#register .confirm form .form-example.form_2{padding: 0 0 39px; }
#register .confirm form input{width: 100%; height: auto; height: 60px; line-height: 60px; padding: 0 25px; margin: 0 0 10px;font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 400;font-style: normal; }
#register .confirm form .form-example span{display: block; font-size: 12px;font-family: source-han-sans-japanese, sans-serif;font-weight: 300;font-style: normal; }

#register .confirm form .btn input{border: 1px solid #3ca736; font-size: 24px; font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 700;font-style: normal; color: #fff;height: 80px; }
#sign_up_2.common_modal .list{padding: 30px 0 30px; }

/*--------------------------------------------------------- sign_up_3 */
.sign_up_3.common_modal .container{padding: 43px 47px 66px;background:none; }
.sign_up_3.common_modal .slider { padding: 0 0 9px; max-width: none;margin: 0 auto;text-align: center; border-bottom: 1px solid #d2d2d2; margin: 0 0 40px; }
.sign_up_3.common_modal .border_box{border-bottom: 1px solid #d2d2d2; }
.sign_up_3.common_modal .border_box h3{padding: 0 0 17px;; position: inherit; display: flex; align-items: center; justify-content: center; letter-spacing: 0.05em; }
.sign_up_3.common_modal .border_box h3 span{display: block; width: 37px;padding: 0px; margin: 0 15px 0 0; background: none; }
.sign_up_3.common_modal .border_box h3 span img{width: 100%; height: auto; }
.sign_up_3 .avatar_inner { width: 100%; max-width: 890px; border-radius: 15px; z-index: 999; position: relative; background: url(../images/index/welcome/bg.png) no-repeat center center; background-size: cover; margin: 0 auto; }

.sign_up_3 h4{font-size: 18px; font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 400;font-style: normal; padding: 0 0 20px; }
.sign_up_3 p{text-align: center; font-size: 20px; padding: 0 0 23px;font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 400;font-style: normal; line-height: 180%; letter-spacing: 0.07em; }
.sign_up_3 .box .avater{display: flex; 36px 4%; gap: 20px 8%; width: 100%; margin: 0 auto;justify-content: center; padding: 73px 0 74px; }
.sign_up_3 .box .avater li{ padding: 36px 0 0 ; width: 14%; }

.sign_up_3 .box .avater li img{width: 100%; } 
.sign_up_3 .box .avater li.active { background: url(../images/index/welcome/bg_04.png) no-repeat center center;  background-size: cover; }
.sign_up_3.common_modal .list{padding: 42px 0 30px; }
.sign_up_3.common_modal .box .btn{margin: 0 auto; padding: 0px; }


/*--------------------------------------------------------- sign_up_3 */
#error .container{padding: 98px 47px 96px; }
#error img{width: 96px;padding: 0 0 10px}
#error p{font-size: 40px;font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 700;font-style: normal; line-height: 147%;padding: 20px 0 0px;letter-spacing: 0.12em; }
#error .btn{padding: 48px 0 0; }
#error p span{border-bottom: 2px solid #e43539; color: #e43539; font-weight: 700;font-style: normal; }
/* ------------------------------------------------------------ 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: 28px; color: #fff; 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: url(../images/index/welcome/modal_bg.jpg) no-repeat center center;
	background-size: cover;
}
#help .info { display: flex; flex-wrap: wrap; justify-content: space-between; }
#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: linear-gradient(0deg, rgba(153, 41, 204, 1), rgba(108, 222, 245, 1));
	background: -webkit-linear-gradient(0deg, rgba(153, 41, 204, 1), rgba(108, 222, 245, 1));
}
#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 img { height: auto; display: block; }

/* ------------------------------------------------------------ mypage_modal */

#mypage { 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; }
#mypage .mypage_inner { width: 88%; max-width: 890px; border-radius: 15px; z-index: 999; position: relative; }
#mypage h3 { text-align: center; font-size: 28px; padding: 0 0 50px; }
#mypage .overlay { top: 0; left: 0; position: absolute; width: 100%; height: 100%; z-index: 0; }
#mypage .container { border-radius: 15px; overflow: auto; position: relative; height: 100%; padding: 60px 6% 30px;   background: #fff;}
#mypage .avatar { padding: 20px 0 0; display: flex; justify-content: center; flex-wrap: wrap; width: 100%; max-width: 700px; margin: auto; }
#mypage .avatar li { width: 25%; }
#mypage .avatar label { display: block; position: relative; overflow: hidden; padding: 30px 20px 20px; box-sizing: border-box; }
#mypage .avatar label input[type="radio"] { position: absolute; left: -100px; opacity: 0; }
#mypage .avatar label span { display: none; position: absolute; top: 0; width: 40px; height: 20px; margin: auto; left: 0; right: 0;
	background: url(../images/index/welcome/selected.png) no-repeat center center;
	background-size: 100% auto;
}
#mypage .avatar label input[type="radio"]:checked+span { display: block; }
#mypage .avatar label img { width: 100%; height: auto; }


/* ------------------------------------------------------------ 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: url(../images/index/bg2.jpg) no-repeat center center;
	background-size: cover;
}
.avatar_select ul { padding: 50px 0; display: flex; flex-wrap: wrap; justify-content: center; }
.avatar_select ul li { width: calc(100% / 4); padding: 20px 20px 40px; box-sizing: border-box; cursor: pointer; }
.avatar_select ul li.active { background: url(../images/avatar/selected.png) no-repeat center center; background-size: 90% 100%; }
.avatar_select ul li img { width: 100%; height: auto; }
.avatar_select .btn { padding: 20px 0 0; margin: 0 auto; }

.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; }

/* ------------------------------------------------------------ slide_modal */

#slide_modal { transition: 0.5s ease-in-out; left: -100%; position: fixed; top: 0; width: 100%; height: 100%; z-index: 999; }
#slide_modal.open { left: 0%; }
#slide_modal .overlay { position: absolute; z-index: 0; width: 100%; height: 100%; left: 0; top: 0; cursor: pointer; }
#slide_modal .inner { /* max-width: 800px; */ position: relative; width: 88%; left: 0; top: 0; height: 100%; background: #fff; max-width: 600px; }
#slide_modal .inner .close { position: absolute; top: 30px; left: 20px; z-index: 1; }
#slide_modal .inner iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; z-index: 0; }

/* ------------------------------------------------------------ map */

body { overflow: hidden; }

#map-wrapper { overflow: auto; width: 100%; height: 100vh; position: relative; z-index: 2;
	-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; }
#map .map_asset { pointer-events: none; width: 100%; height: auto; position: absolute; left: 0; top: 0; display: block; transition: 1s ease-out; }
#map img.bg { z-index: 1; width: 100%; height: auto; display: block; 
	background: #e6e6e6 url(../images/common/bg.png) no-repeat center center;
	background-size: cover; 
}
#map img.full_bg { /* display: none; */ }

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

/* ------------------------------------------------------------ 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;
}
#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/index/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: 3px 6px 4px; font-size: 11px; color: #fff; background: #181818; text-align: center; border-radius: 10px; 
	text-overflow: ellipsis;
	overflow: hidden;
	display: inline-block;
	max-height: 25px;
	white-space: nowrap;
	max-width: 100%;
	box-sizing: border-box;
}

#map .person.speaking p.name span {
	padding: 3px 6px 4px 20px;
	background: #000 url(../images/assets/speaker_on.png) no-repeat 5px center;
	background-size: auto 60%;
}

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

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

/* ------------------------------------------------------------ map block */

.block { position: absolute; z-index: 100; font-size: 8px;/* width: 1.1%; height: 1.8%; */ width: 0.93%; height: 2.22%; opacity: 1;
	transform: rotate(-60deg) skew(0deg, 30deg);
	background: rgba(144, 255, 103, 0.36);
}
.person { position: absolute; }

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

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

#chat { position: relative; flex-wrap: wrap; align-items: center; justify-content: space-between; transition: 0.5s; z-index: 996; position: fixed; display: flex;
	right: 50px; 
	bottom: 25px;
	box-sizing: border-box;
	border-radius: 20px;
	font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif;
}
#chat .form { width: 340px; position: relative; }
#chat .form form { height: 40px; border-radius: 20px; overflow: hidden; }
#chat .form input { border: none; }
#chat .form .box { display: flex; position: relative; }
#chat .form .box input[type="text"],
#chat .form .box textarea { width: 80%; box-sizing: border-box; border-radius: 0; background: #edf0f6; margin: 0; height: 40px; padding: 0 10px; } 
#chat .form .box textarea { border: none; resize: none; line-height: 40px; }

#chat .form .box input[type="submit"] { color: #fff; width: 20%; font-size: 14px; border-radius: 0; background: #b9041d;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
#chat .form .box a { display: block; height: 40px; line-height: 40px; background: #e1e1e1; width: 25%; font-size: 14px; text-align: center; }
#chat .form .box .emote_btn { z-index: 99; cursor: pointer; width: 25px; height: auto; position: absolute; right: 80px; top: 0; bottom: 0; margin: auto; }

#chat .btns { display: flex; }
#chat .btns div { margin: 0 10px; }

#chat .form .emote { position: absolute; top: 0; transition: 0.5s; display: flex; flex-wrap: wrap; }
#chat .form .emote.active { top: -50px; }
#chat .form .emote p { margin: 0 2px; cursor: pointer; text-align: center; border-radius: 50px; }
#chat .form .emote p img { width: 40px; height: auto; }

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

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

/* ------------------------------------------------------------ private chat mode */

#chat.private { background: #4a4a4a; }
#chat.private h4 { background: #333333 url(../images/index/icn_private.png) no-repeat 20px center; background-size: 20px auto; }
#chat.private .head { background: #101010; color: #fff; }
#chat.private .mode .btn a { background: #3ca275; }

/* ------------------------------------------------------------ private message */

#chat ul li.private .wb { position: relative; padding: 10px 25px 10px 10px; }
/*
#chat ul li.private.hidden .wb { background: #8e8e8e; color: #fff; }
#chat ul li.private.hidden p.name { color: #ebebeb; }
#chat ul li.private.hidden p.name span { }
*/
#chat ul li.private .wb::before { content: ''; display: block; width: 10px; height: 15px;
	background: url(../images/index/icn_private_bk.png) no-repeat center center;
	background-size: 100% auto;
	position: absolute;
	right: 10px;
	top: 5px;
}

/* ------------------------------------------------------------ voicecontrol */

#voice-control { width: 540px; background: rgba(0, 0, 0, 0.9); padding: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; position: fixed; right: 0; bottom: 0; left: 0; margin: auto; z-index: 996; box-sizing: border-box; } 
#voice-control ul { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
#voice-control ul li { width: calc(100% / 6); text-align: center; position: relative; padding: 0 0 25px; }

#voice-control ul li::after,
#voice-control span::after { color: #a5a5a5; left: 0; content: ''; position: absolute; width: 100%; bottom: 0; font-size: 12px; }

/*
#voice-control ul .li-switch::after { content: '通信開始'; }
#voice-control ul .li-mic::after { content: 'ミュート解除'; }
#voice-control ul .li-cam::after { content: 'ビデオ開始'; }
*/
#voice-control ul .li-loc::after { content: '現在地'; }
#voice-control ul .li-chat::after { content: 'チャット履歴'; }

#voice-control .btn { width: 30px; height: 30px; margin: auto; display: flex; flex-wrap: wrap; align-items: center; overflow: hidden; }
#voice-control span { cursor: pointer; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
	background-size: 100% auto !important;
}

#voice-control span.mic::after { content: 'ミュート解除'; }
#voice-control span.mic.on { background: url(../images/common/mic_on.png) no-repeat center center; }
#voice-control span.mic.off { background: url(../images/common/mic_off.png) no-repeat center center; }
#voice-control span.mic.disabled { background: url(../images/common/mic_disabled.png) no-repeat center center; }
#voice-control span.mic.on::after { content: 'ミュート'; }

#voice-control span.cam::after { content: 'ビデオ開始'; }
#voice-control span.cam.on { background: url(../images/common/cam_on.png) no-repeat center center; }
#voice-control span.cam.off { background: url(../images/common/cam_off.png) no-repeat center center; }
#voice-control span.cam.disabled { background: url(../images/common/cam_disabled.png) no-repeat center center; }
#voice-control span.cam.on::after { content: 'ビデオ停止'; }

#voice-control span.screen::after { content: '画面共有開始'; }
#voice-control span.screen.on { background: url(../images/common/screen_on.png) no-repeat center center; }
#voice-control span.screen.off { background: url(../images/common/screen_off.png) no-repeat center center; }
#voice-control span.screen.disabled { background: url(../images/common/screen_disabled.png) no-repeat center center; }
#voice-control span.screen.on::after { content: '画面共有停止'; }


#voice-area { position: fixed; top: 30px; left: 30px; z-index: 990; padding: 2px; border-radius: 50px; overflow: hidden;
	background: -webkit-linear-gradient(0deg, rgba(153, 41, 204, 1), rgba(108, 222, 245, 1));
}
#voice-area p { background: #000; color: #fff; padding: 0 30px; height: 45px; line-height: 45px; border-radius: 50px; }

#voice-loading { display: none; z-index: 998; position: fixed; top: 0; left: 0; width: 100%; text-align: center; }
#voice-loading p { display: inline-block; background: #000; color: #fff; padding: 10px 30px; }

/* ------------------------------------------------------------ switch */

.switch { position: relative; display: inline-block; width: 55px; height: 32px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.switch .slider:before { position: absolute; content: ""; height: 24px; width: 24px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }
.switch input:checked + .slider { background-color: #b9041d; }
.switch input:focus + .slider { box-shadow: 0 0 1px #292B2D; }
.switch input:checked + .slider:before { -webkit-transform: translateX(24px); -ms-transform: translateX(24px); transform: translateX(24px); }

/* Rounded sliders */
.switch .slider.round { border-radius: 34px; }
.switch .slider.round:before { border-radius: 50%; }

#voice-control .switch .slider::after { content: '通信開始'; bottom: -24px; }
#voice-control .switch input:checked + .slider:after { content: '通信終了'; }


/* ------------------------------------------------------------ login points popup start */
#login-points-popup{display: none;padding-top: 150px;}
.login-points-popup-inner{width: 94%;max-width: 774px;border-radius: 15px;z-index: 999;position: relative; background: url(../images/index/welcome/bg.png) no-repeat center center; background-size: auto;background-size: cover; margin: 0 auto;padding: 5px;}
.login-points-popup-inner .login-points-popup-body{ border-radius: 15px; overflow: auto; position: relative; height: 100%; padding: 34px 20px 97px; background-color: rgba(255,255,255,0.95) !important; border: 3px solid #4fb048; display: flex; flex-direction: column; justify-content: center; align-items: center;text-align: center;
}
.login-points-popup-body .points-popup-title{
	font-size: 56px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 30px;
    font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 700;font-style: normal;
}
.login-points-popup-body h3{padding: 0 ;}
.login-points-popup-body h3 img{width: 100%; height: auto;}
.login-points-popup-body .points-popup-title span{color: #e43539;font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 700;font-style: normal; background: url(../images/login/bg_1.png) repeat-x left bottom; background-size: 12px; padding: 0 0 25px; display: inline-block;}
.points-popup-content{ 	font-size: 23px;line-height: 1.3;font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 700;}
.points-popup-content span{font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 700;}
#points-popup-close{ background: #3ca736; width: 370px; height: auto; text-align: center; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 24px; margin-top: 40px; padding: 28px 0; font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 700; color: #fff; border-radius: 100px; }
#points-popup-content{text-align: center;}
/* ------------------------------------------------------------ login points popup end  */


/* ------------------------------------------------------------ quiz  popup start  */
#quiz-popup{
	cursor: pointer;
}
.start-quiz a{
	    font-size: 14px;
    border: 1px solid #000;
    display: inline-block;
    padding: 10px 10px;
    color: #000;
    width: 177px;
	text-align: center;
}
.quiz-popup-container{
	display: flex;
	align-items: center;
	justify-content: center;
}
.quiz-popup-inner{
	position: relative;
	background: url(../images/index/welcome/bg.png) no-repeat center center;
    max-width: 680px;
    padding: 10px ;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:15px;
    border-radius: 25px;
    background-size: cover;
    cursor: default;
}
.quiz-popup-inner .guiz_box{padding: 50px 40px; border: 3px solid #008000;  border-radius: 25px;background: rgba(255,255,255,0.9);}

.quiz-popup-inner .quize-title{
	font-size: max(30px, 1.4vw);
    font-weight: 300;
    text-align: center;
    padding: 0 0 32px;
}
.quiz-popup-inner .quize-title img{width: 100%; height: auto;}
.quiz-popup-inner .quiz-question-container{
	
}
.quiz-popup-inner .quiz-question-container{	display: flex; flex-direction: column;}
.quiz-popup-inner .quiz-question-container p{
	letter-spacing: 1.4;
	font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 700;font-style: normal; 
	font-size: 23px; text-align: center; padding: 0 0 36px;
}

.quiz-popup-inner .quiz-question-container form .radio_box:not(:last-child){margin: 0 auto 15px;}
.quiz-popup-inner .quiz-question-container form .radio_box{position: relative; width: 432px; display: flex; border: 1px solid #cccccc;  margin: 0 auto; font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 400;font-style: normal; font-size: 23px; padding: 21px 23px; display: flex;}



.quiz-popup-inner .quiz-question-container form .radio_box input[type=radio] { display: none; width: 100%; height: 100%; position: absolute; }

.quiz-popup-inner .quiz-question-container form span{display: block; width: 25px; height: 25px; position: relative; border-radius: 100%; border: 1px solid #cccccc; margin: 0 20px 0 0; position: relative;}

.quiz-popup-inner .quiz-question-container form .radio_box input[type="radio"]:checked + span:after {display: block; width: 14px; height: 14px; background: #3ca736; border-radius: 100%;content: "";top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); position: absolute;}


/*
.quiz-popup-inner .quiz-options{
	margin: 0 10px;
}
.quiz-popup-inner .quiz-options li{
	    background: #000;
   
    color: #fff;
    padding: 10px 5px;
    cursor: pointer;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 5px;
}
*/
.questions-number{
	position: absolute;
    top: 5px;
    left: 5px;
}

 #questions-correct-incorrect{
	 display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
 }
 #quiz-wrong-answer{
	width: 195px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 0 65px;
    }
 #quiz-correct-answer{
	width: 248px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    
    margin: 0 0 35px;
}
 #quiz-wrong-answer img,
 #quiz-correct-answer img{width: 100%; height: auto;}

 #quiz-wrong-answer {
    display: none;
 }

 #quiz-correct-answer {
    position: relative;
}
#quiz-final-result{padding: 0 0 20px;}

  #questions-correct-incorrect #result-text{font-size: 50px;font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 700;font-style: normal; padding: 0 0 42px;}
 .quiz-button{ display: flex; align-items: center; justify-content: center; background: #3ca736; width: 370px; padding: 28px 0; cursor: pointer; color: #fff; border-radius: 100px; font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 700;font-style: normal; font-size: 24px;}


#quiz-final-result{
	 display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#quiz-final-result p{
	font-size: 36px;
    font-weight: 100;
    font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 700;font-style: normal
}
#quiz-total-points{font-size: 36px;font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 700;font-style: normal; padding: 0 0 22px;}
#quiz-total-points span{font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 700;font-style: normal; }
#quiz-collected-points span{font-size: 59px;font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 700;font-style: normal;  }
#quiz-collected-points span.mini{background: url(../images/quiz/bg_1.png) repeat-x left bottom; background-size: 12px; display: inline-block;padding: 0 0 15px;}
#quiz-collected-points span.big{font-size: 70px;}
#quiz-collected-points{
	    font-size: 30px;
    margin-right: 10px;
    padding: 0 0 50px; 
}
#quiz-popup, #questions-options, #questions-correct-incorrect, #quiz-final-result,#quiz-wrong-answer,#quiz-correct-answer{
	display: none;
}
/* ------------------------------------------------------------ quiz  popup end  */


/* ------------------------------------------------------------ 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: 100px; 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; }
	h1 .vr_gate { padding: 0 0 0 ; }
	h1 .vr_gate a { font-size: 12px; display: inline-block; padding: 7px 21px; width: inherit; }

	#help_btn { right: 180px; 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; height: 45px; line-height: 45px; font-size: 18px; }
	
	.bg_color { padding: 5px; }
	
	/* ------------------------------------------------------------ header */
	
	#menu_btn { right: 15px; top: 15px; }
	#menu_btn img { width: 40px; height: auto; }
	#login_btn { top: 20px; right: 79px; }
	#login_btn a { font-size: 12px; height: 30px; line-height: 30px; width: 90px; }
	
	#logout_btn { right: 10px; top: 16px; }
	#logout_btn a span { font-size: 12px; }
	#logout_btn img { width: 22px; }

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

	.common_modal .welcome_inner { width: 94%; }
	.common_modal { padding: 90px 0 120px; }
	.common_modal .roof { width: 68.2%; padding: 0; }
	.common_modal .btn_box { display: flex;flex-direction: column-reverse; }
	.common_modal .logo img { width: 90%; height: auto; }
	.common_modal .logo h3 { font-size: 18px; padding: 15px 0; line-height: 150%; }
	.common_modal .slider { padding: 0 0 15px; }
	.common_modal .slider p { font-size: 14px; line-height: 150%; padding: 10px 0; }
	.common_modal .swiper-pagination-bullet { width: 10px; height: 10px; }
	.common_modal .swiper-pagination { padding: 0; }
	.common_modal .container { padding: 34px 20px 52px; }
	.btn { margin: 0 auto;padding: 10px 0 0; }

	/*--------------------------------------------------------- login */
	.common_modal{ border-radius: 15px; }
	.common_modal .logn_box{position: relative;width: 88%; /* max-width: 700px; */ max-width: 890px;margin: 0 auto; }
	#login.common_modal .container{padding: 0px 20px 38px; }
	#login.common_modal .welcome_inner { width: 100%; }
	#login.common_modal .slider { padding: 0 0 9px; max-width: 630px; margin: 0 auto; }
	
	
	#login.common_modal h3{top: -6%; right: 0; left: auto; }
	
	#login.common_modal h3 span{font-size: 16px;padding: 12px 16px; }
	#login img{width: 80%; margin: 53px auto 28px; display: block; padding: 0px; }
	#login p{text-align: center; font-size: 15px; padding: 0 0 11px; }
	#login form .form-example{padding: 0 0 24px; }
	#login form .form-example.form_2{padding: 0 0 39px; }
	
	#login form .form-example span{display: block; font-size: 12px; }
	
	.common_modal form input{width: 81%; height: auto; height: 60px;padding: 0 25px; margin: 0 0 10px; }
	.common_modal form { width: auto; margin: 0 auto; }
	.common_modal .btn{max-width: 370px; margin: 0 auto; }
	.common_modal .btn a,
	.common_modal .btn input[type="submit"]{ font-size: 16px; height: auto; width: 100%; }
	
	.common_modal h3{font-size: 24px; }
	/*--------------------------------------------------------- sign_up_1 */
	#register.common_modal .container{padding: 27px 20px 55px; }
	#register.common_modal .slider { padding: 0 0 9px; max-width: none;margin: 0 auto;text-align: center; border-bottom: 1px solid #d2d2d2; margin: 0 0 15px; }
	
	
	.common_modal h3{padding: 16px 0; }
	#register h4{font-size: 15px; padding: 0 0 20px; text-align: center;line-height: 200%; }
	#register p{text-align: center; font-size: 15px; padding: 0 0 11px; }
	#register .fom_box{width:100%; margin: 0 auto; }
	#register form .form-tt:nth-child(5){padding: 0 0 25px; }
	
	#register .radio .radio_box{width: 70%; padding: 0 0 28px; }
	#register .radio .radio_box .input_radio{padding: 0 13px 0 0; }
	#register .radio .radio_box .radio_btn{display: flex; align-items: center; }
	#register .radio .radio_box span {position: relative; font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 400;font-style: normal; font-size: 18px; display: block; }
	
	#register .radio .radio_box input{-webkit-appearance: none; width: 25px; height: 25px; border-radius: 50%; border: 1px solid #d5d5d5;padding: 0px;margin: 0px; display: block; }
	#register .radio .radio_box input:before{ content: ""; display: block; width: 60%; height: 60%; margin: 20% auto; border-radius: 50%; }
	#register .radio .radio_box input:checked:before{background: #3ca736; }
	
	#register form form .form-example.form_2{padding: 0 0 39px; }
	#register form form input{width: 100%; height: auto; height: 60px;padding: 0 25px; margin: 0 0 10px;font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 400;font-style: normal; }
	#register form form .form-example span{display: block; font-size: 12px;font-family: source-han-sans-japanese, sans-serif;font-weight: 300;font-style: normal; }
	
	#register form form .btn input{border: 1px solid #3ca736; font-size: 24px; font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 700;font-style: normal; color: #fff;height: 80px; }

	
	.common_modal form input{height: 50px;margin: 0px; }
	/*--------------------------------------------------------- sign_up_2 */
	#sign_up_2.common_modal .container{padding: 27px 20px 55px; }
	#sign_up_2.common_modal .welcome_inner { width: 94%; }
	#sign_up_2.common_modal .slider { padding: 0 0 9px; max-width: none;margin: 0 auto;text-align: center; border-bottom: 1px solid #d2d2d2; margin: 0 0 25px; }
	
	
	#sign_up_2 h3{padding: 16px 0; }
	#sign_up_2 h4{font-size: 18px; padding: 0 0 20px; }
	#sign_up_2 p{text-align: center; font-size: 15px; padding: 0 0 11px; }
	#sign_up_2 .fom_box{width:100%; margin: 0 auto; }
	#register .confirm { width: auto; margin: 0 auto; }
#register .confirm .table {width: 100%; padding: 0 0 25px; }
	#register .confirm .table ul{display: flex;  flex-direction: column; font-size: 15px; }
	#register .confirm .table ul .left {width: auto; padding: 3px 15px; max-width: 418px;line-height: 200%;border-right: none; border-bottom: 1px solid #cccccc; }
	#register .confirm .table ul .right { width: auto; padding: 12px 15px ; } 
	
	#register .confirm .form-example{padding: 0 0 19px; }
	#register .confirm form .form-example.form_2{padding: 0 0 39px; }
	#register .confirm form input{width: 100%; height: auto; height: 60px;padding: 0 25px; margin: 0 0 10px; }
	#register .confirm form .form-example span{display: block; font-size: 12px; }
	
	#register .confirm form .btn input{font-size: 24px; height: 80px; }
	#sign_up_2.common_modal .list{padding: 30px 0 30px; }
	
	/*--------------------------------------------------------- sign_up_3 */
	.sign_up_3.common_modal .container{padding: 43px 20px 66px; }
	.sign_up_3.common_modal .slider { padding: 0 0 9px; margin: 0 0 40px; }
	.sign_up_3.common_modal .border_box h3{padding: 0 0 17px; }
	.sign_up_3.common_modal .border_box h3 span{width: 9%;margin: 0 3% 0 0; }
	.sign_up_3.common_modal .border_box h3 span img{width: 100%; height: auto; }
	.sign_up_3 .avatar_inner { width: 89%; }
	
	.sign_up_3 h4{font-size: 18px; padding: 0 0 20px; }
	.sign_up_3 p{ font-size: 15px; padding: 0 0 23px; }
	.sign_up_3 .box .avater{display: flex; gap: 20px 10%; width: 100%;flex-wrap: wrap; justify-content: center; align-items: center;padding: 25px 0 37px; }
	.sign_up_3 .box .avater li{ padding: 20px 0 0 ;width: calc(100%/3);margin: 0 7% 0 0; }
	
/*
	.sign_up_3 .box .avater li:nth-child(1),
	.sign_up_3 .box .avater li:nth-child(2){margin: 0 7% 6% 0; }
	.sign_up_3 .box .avater li:nth-child(3){margin: 0 0 6%; }
*/
	.sign_up_3 .box .avater li img{width: 100%; } 
	.sign_up_3.common_modal .list{padding: 21px 0 10%; }
	.sign_up_3.common_modal .box .btn{margin: 0 auto; padding: 0px; }
	
	
	/*--------------------------------------------------------- sign_up_3 */
	#error .container{padding: 45px 20px 45px; }
	#error.common_modal .welcome_inner {  width: 100%; }
	#error img{width: 20%;padding: 0 0 10px}
	#error p{font-size: 24px; padding: 20px 0 0px; }
	#error .btn{padding: 24px 0 0; }

	/* ------------------------------------------------------------ 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 .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 img { width: 30%; }
	#help .info .other img:last-child { width: 60%; margin: 20px 0 0; }
	
/* ------------------------------------------------------------ mypage_modal */

	#mypage { padding: 30px 0 90px; }
	#mypage .mypage_inner { width: 80%; }
	#mypage h3 { font-size: 18px; padding: 0 0 30px; }
	#mypage .container {padding: 40px 4% 30px;}
	#mypage .avatar label input[type="radio"]:checked+span { display: block; }
	#mypage .avatar label img { width: 100%; height: auto; }
	#mypage .avatar { padding: 5px 3% 0; box-sizing: border-box; }
	#mypage .avatar li { width: 30%; }
	#mypage .avatar label { padding: 20px 10px; }
	#mypage .avatar label span { width: 25px; height: 15px; }
	#mypage .avatar label img { width: 100%; }


	/* ------------------------------------------------------------ avatar */
	
	.avatar_select .avatar_inner h3 span { font-size: 16px; top: -13px; }
	.avatar_select .container { padding: 30px 6%; }
	.avatar_select ul li { padding: 10px 4% 20px; width: calc(100% / 4); }
	.avatar_select p.text span { font-size: 16px; }
	.avatar_select .input input { height: 45px; line-height: 45px; width: 90%; max-width: 400px; }

	/* ------------------------------------------------------------ zoom */
	
	#zoom { right: 21px; width: 30px; bottom: 140px; }
	#zoom img { width: 100%; height: auto; }

	#chat { z-index: 998; bottom: 68px; border-radius: 0; max-width: inherit; left: 0; width: 100%; margin: auto; background: #000; padding: 12px 3%; }	
	#chat .btns { width: 55px; }
	#chat .btns img { width: 100%; height: auto; }
	#chat .btns div { margin: 0; width: 100%; padding: 0 5px; box-sizing: border-box; }
	#chat .form { width: 100%; }
	#chat .form form { height: 35px; }
	#chat .form .box input[type="text"] { width: 80%; }
	#chat .form .box input[type="submit"] { width: 20%; }
	#chat .form .box .emote_btn { right: 23%; }
	#chat .form .box textarea { line-height: 35px; height: 35px; }
	#chat .form .emote p img { width: 35px; }
	#chat .form .emote.active { top: -41px; }
	
	#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; }
	
	#voice-control { border-radius: 0; width: 100%; padding: 12px 15px; bottom: 0; z-index: 998; }
	#voice-control .btn { width: 22px; height: 22px; padding: 0; }
	#voice-control ul li img { width: 22px; height: auto; }
	
	#voice-control ul li { padding: 0 0 20px; width: calc(100% / 5); }
	#voice-control ul li.li-screen { display: none; }
	#voice-control ul li::after, 
	#voice-control span::after { font-size: 10px; }
	#voice-control .switch .slider::after { bottom: -20px; }
	
	#voice-area { top: 15px; left: 15px; }
	#voice-area p { padding: 0 20px; height: 35px; line-height: 35px; font-size: 14px; }
	
	#voice-loading p {font-size: 12px; padding: 8px 20px; }
	
	.switch { width: 48px; height: 24px; }
	.switch .slider::before { width: 17px; height: 17px; }
	
	/* ------------------------------------------------------------ login points popup start */
	.login-points-popup-body h3 {    padding: 0;}
	.login-points-popup-inner .login-points-popup-body {padding: 20px 20px 47px;}
	.login-points-popup-body .points-popup-title {font-size: 35px; margin-bottom: 30px;}
	.login-points-popup-body .points-popup-title span{ background: url(../images/login/bg_1.png) repeat-x left bottom; background-size: 10px; padding: 0 0 20px;}
	.points-popup-content{ font-size: 17px;}
	#points-popup-close{ width: 80%; font-size: 18px; margin-top: 10px; padding: 18px 0; }
	
	/* ------------------------------------------------------------ quiz  popup start  */
	.quiz-popup-inner { padding: 10px; width: 90%; margin: 0 auto; }
	.quiz-popup-inner .guiz_box {padding: 25px 20px;}
	.quiz-popup-inner .quiz-question-container p { font-size: 18px;padding: 0 0 20px; }
	
	.quiz-popup-inner .quiz-question-container form .radio_box:not(:last-child){margin: 0 auto 15px;}
	.quiz-popup-inner .quiz-question-container form {width: 100%; height: auto;}
	.quiz-popup-inner .quiz-question-container form .radio_box{position: relative; width: 80%; font-size: 15px ; padding: 10px 11px; }
	
	.quiz-popup-inner .quiz-question-container form span{width: 16px; height: 16px;  margin: 0 10px 0 0; }
	
	.quiz-popup-inner .quiz-question-container form .radio_box input[type="radio"]:checked + span:after {display: block; width: 11px; height: 11px; background: #3ca736; border-radius: 100%;content: "";top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); position: absolute;}

	#quiz-wrong-answer{ width: 50%; margin: 0 0 30px;}
	#quiz-correct-answer{ width: 50%; margin: 0 0 20px;}
	#quiz-wrong-answer img,
	#quiz-correct-answer img{width: 100%; height: auto;}
	.quiz-button { width: 80%; padding: 18px 0; font-style: normal; font-size: 18px;}
	#questions-correct-incorrect #result-text {font-size: 35px;padding: 0 0 21px;}
	
	#quiz-collected-points span {font-size: 30px;}
	#quiz-collected-points span.big {font-size: 42px;}
	#quiz-final-result p {font-size: 24px; padding: 0 0 15px}
	#quiz-collected-points {padding: 0 0 50px;}
	#quiz-final-result { padding: 0 0 10px;}
	
	#quiz-collected-points span.mini { background: url(../images/quiz/bg_1.png) repeat-x left bottom; background-size: 10px; padding: 0px 0 10px;}
}



/* My page css */
	#mypage .nicname-contianer input{height: 66px; margin: 0px; width: 90%;  height: auto; height: 60px;padding: 0 25px; padding-top: 0px; padding-right: 25px; padding-bottom: 0px;padding-left: 25px;margin: 0 0 10px;font-family: "fot-tsukuardgothic-std", sans-serif;font-weight: 400; font-style: normal; border: 1px solid #ccc;font-size: 20px;}
	#mypage .btn {margin: 0 auto !important;padding-top: 50px;padding-bottom: 30px; }
	#mypage .btn input {cursor: pointer;}
	#mypage #mypage-modal-form .msg{display: flex;justify-content: center;align-items: center;maring-bottom: 11px;padding-bottom: 10px;gap: 5px;}
	#mypage #mypage-modal-form .error{color: red !important;}
	#mypage #mypage-modal-form .success{color: green !important;}
	#mypage #mypage_close{position: absolute;right: 0; top: 0;width: 30px; padding: 14px; cursor: pointer;object-fit: cover; height: auto;opacity: 1; transition: opacity 0.5s ease:}
	#mypage #mypage_close:hover{opacity: 0.5;}
	
	
	#mypage	.mypage-success a{border: none; border-radius: 50px; width: 100%;  height: 68px;  line-height: 75px;  font-size: 24px; color: #fff;  display: block; margin: auto;  background: #3ca736; max-width: 250px;text-align: center;}
	
	#mypage	.mypage-success{margin: 20px 0 50px 0;}
	@media (max-width: 468px) {
	  #mypage .nicname-contianer input{ height: 50px;padding-right: 10px; padding-bottom: 0px;padding-left: 10px; }
	  #mypage #mypage_close{width: 25px;}
	}
	@media (max-width: 768px) {
	 #mypage	.mypage-success a{font-size: 20px;}
	}