@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/earlyaccess/notoserifjp.css);
@charset "utf-8";

/*default*/
html { scroll-behavior: smooth; -webkit-scroll-behavior: smooth;}
img { max-width: 100%; border: 0;}
img a { outline : none;}
a:focus { outline: 0;}
a, img { 
	text-decoration: none;
	transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
}
body {
	width: 100%;
	height: auto;
	margin: 0 auto;
	font-family: 'Noto Sans JP', Helvetica, Arial, sans-serif !important;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	position: relative;
}
.wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.sec_wrapper {
	max-width: 1920px;
	width: 1300px;
	margin: 0 auto;
	padding-top: 6%;
}
.clear { clear: both;}

/* hover effect */
.hv-effect {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hv-effect:hover, .hv-effect:focus, .hv-effect:active {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

/*header*/
.header {
	width: 100%;
	height: auto;
	margin: 0 auto;
	position: relative;
	z-index: 9;
}
.header .top_menu {
	margin: 0 auto;
    display: flex;
    width: 100%;
    position: fixed;
    padding: 1% 0;
    background: rgba(11,11,11,0.92);
    text-align: center;
    justify-content: center;
    align-items: center;
}
.top_menu .menu_wrap {
	display: inline-flex;
    width: 100%;
    align-items: center;
	justify-content: center;
}
.top_logo {
	position: relative;
	text-align: center;
}
.top_logo img { width: 70%;}
.top_menu ul{
	display: inline-flex;
	margin: 0 1% 0 2%;
} 
.top_menu .main-nav li { 
	margin: 0 20px;
	position: relative;
}
.top_menu .sns-nav { 
	margin: 0 1%;
	position: relative;
}
.top_menu .sns-nav img { 
	width: 70%;
}
.top_menu .login_btn {
	background: #fff;
    padding: 10px 15px;
    /*width: 100%;*/
    border-radius: 50px;
    color: #000;
    font-size: 1.2rem;
    font-weight: 800;
	transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
}
.top_menu .main-nav li a:hover { opacity: 0.7;}
.top_menu .sns-nav img:hover { transform: scale(1.05);}
.top_menu .login_btn:hover {
	background: #1366e0;
	color: #fff;
}
.top_menu .soon { opacity: 0.6;}

.header_m, #cd-lateral-nav { display: none;}


.submenu {
	position: absolute;
    width: 100%;
    top: 50px;
    z-index: 99;
    background: rgba(0 0 0/80%);
    display: flex;
    flex-direction: column;
    font-size: 1.2rem;
    color: #fff;
    border-radius: 5px;
    padding: 10px 0;
    visibility: hidden;
}
.main-nav li:hover .submenu {
	visibility: visible;
}
.submenu .sub-list {
	width: 100%;
}
.submenu .sub-list a:hover  {
	opacity: .7;
}



/*index*/
.index_kv {
	width: 100%;
	position: relative;
	margin-top: -1%;
}
.index_m_kv,
.index-effect-m {
	display: none;
}
.index-effect {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1;
}
#bgVideo {
	position: relative;
	right: 0;
	bottom: 0;
	top: 11%;
	width: 100%;
	min-width: 100%;
	min-height: 100%;
  }





/*common*/
.state {
	position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
	margin: 1% auto 1% auto;
}
.state .state_on {
	position: relative;
    background: #1d64bc;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    padding: 10px 30px;
    border-radius: 50px;
    text-shadow: 0 0 3px black;
	margin-right: 2%;
}
.state .state_off {
	position: relative;
    background: #535353;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    padding: 10px 30px;
    border-radius: 50px;
    text-shadow: 0 0 3px black;
	margin-right: 2%;
}
.state .state_stay {
	position: relative;
    background: #104280;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    padding: 10px 30px;
    border-radius: 50px;
    text-shadow: 0 0 3px black;
	margin-right: 2%;
}
.state .signin_count {
	position: relative;
    background: #212121;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    width: 30%;
    text-align: center;
    padding: 10px 16px;
    border-radius: 50px;
}
.user_infor {
	width: 100%;
    background: url(../images/frame-1.png) center center no-repeat;
    font-size: 2.4rem;
    font-weight: 600;
    color: #1b1b1b;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    padding: 3% 0;
}
.user_infor .account,
.user_infor .name {
	position: relative;
	margin: 0 1.5%;
}
img.item {
	margin-right: 10px;
    position: relative;
    top: 2px;
}


/*join*/
.join {
	background: url('../images/bg-2.jpg') center top no-repeat, #000;
	background-size: 100%;
	position: relative;
	width: 100%;
}
.join .join_btn {
	display: flex;
    justify-content: center;
	padding: 2% 0 8% 0;
}
.join_btn .create_team,
.join_btn .join_team {
	margin: 0 4%;
	transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
}
.join_btn .create_team:hover,
.join_btn .join_team:hover {
	filter: brightness(140%);
	-webkit-filter: brightness(120%);
	transform: scale(1.02);
}


/*create*/
.create {
	background: url('../images/bg-2.jpg') center top no-repeat, #000;
	background-size: 100%;
	position: relative;
	width: 100%;
}
.main_section {
	position: relative;
	width: 100%;
	padding: 2% 0 3% 0;
}
.main_section .c_inside {
	background: url('../images/frame-2_content.jpg') center top repeat-y;
	width: 100%;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
	text-align: center;
	padding: 4% 0 2% 0;
}
.main_section .c_inside p {
	color: #212121;
    font-size: 3.4rem;
    font-weight: 900;
    margin: 4% auto;
}
.main_section .c_inside input.input-field {
	width: 100%;
    display: inline-block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 0px;
    border-radius: 100px;
    padding: 5%;
    outline: none;
    margin: 5% auto;
    background: #212121;
    font-size: 1.8rem;
    text-align: center;
	color: #fff;
}
.main_section .check {
	font-weight: 500;
    font-size: 1.2rem;
    color: #535353;
}
.main_section input[type=radio] {
	width: 20px;
    height: 20px;
    position: relative;
    top: 3px;
    margin-right: 1%;
}
.main_section .submit {
	position: relative;
	width: fit-content;
    margin: 5% auto;
	transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
}
.main_section .submit:hover {
	filter: brightness(110%);
	-webkit-filter: brightness(110%);
	transform: translateY(-5px);
}
.main_section .warning {
	position: relative;
    font-weight: 500;
    margin-bottom: 2%;
    color: red;
}


/*team*/
.team {
	background: url('../images/bg-3.jpg') center top no-repeat, #000;
	background-size: 100%;
	position: relative;
	width: 100%;
}
.team .t_inside {
	background: url('../images/frame-2_content.jpg') center top repeat-y;
	width: 100%;
    background-size: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.team .t_inside .notice {
	/*position: absolute;*/
        max-width: 80%;
    margin-right: 10px;
    right: 5%;
    font-weight: 600;
    color: #535353;
}
.team .team_name,
.team .team_code {
	font-size: 2rem;
    font-weight: 600;
    color: #1b1b1b;
    margin: 0.5% 0% 0.5% 6%;
	display: inline-flex;
    align-items: center;
}
.team .team_code span {
	background: #212121;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: #fff;
    height: 48px;
    padding: 0 1.6rem;
    margin: 0 20px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
	position: relative;
}
.team_code .copy {
	position: relative;
	transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
}
.team_code .copy:hover {
	filter: brightness(90%);
	-webkit-filter: brightness(90%);
}
.team table.member-list {
	width: 45%;
    margin: 3% 0 0 8%;
    border: 4px solid #000;
    font-size: 2rem;
    font-weight: 600;
	text-align: center;
    line-height: 3rem;
	border-collapse: collapse;
}
.member-list .cerrent {
	background: #fff;
    color: #1d64bc;
    border: 4px solid #000;
}
.member-list .other {
	background: white;
	color: #1b1b1b;
	border: 4px solid #000;
}
.team .sure {
	position: absolute;
    top: 170px;
    right: 5vw;
}
.team .sure img { width: 80% }
.team .team_leave {
	position: relative;
    right: 7%;
    width: 100%;
    text-align: right;
    margin-top: 5%;
}
.team .team_leave a {
	font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    background: #535353;
    padding: 0.5rem 2rem;
    border-radius: 50px;
    text-align: center;
}
.team .team_leave a:hover { background: #333333;}
.team .notice_dc {
	color: #fff;
    font-weight: 700;
    text-align: center;
	animation: flash 700ms ease infinite alternate;
	padding-bottom: 6%;
}
@keyframes flash {
	from { 
		text-shadow: 0 0 3px #dd1919, 0 0 3px #dd1919, 0 0 3px #dd1919;
	 }	
	to { 
		text-shadow: 0 0 3px #dd1919, 0 0 3px #dd1919, 0 0 3px #dd1919, 0 0 6px #dd1919, 0 0 8px #dd1919, 0 0 12px #dd1919;
	 }
}


/*rule*/
.rule {
	background: url('../images/bg-5.jpg') center top fixed no-repeat;
	background-size: 100%;
	position: relative;
	width: 100%;
}
.rule .title {
	position: relative;
    text-align: center;
    margin: 4% auto;
}
.rule .rule_content {
	position: relative;
	margin: 0 auto;
	width: 100%;
}
.rule .rule_content .r_inside {
	color: #fff;
    font-size: 1.4rem;
    line-height: 2.6rem;
	font-weight: 500;
    background: url('../images/frame-3_content.png') center top repeat-y;
	width: 100%;
    background-size: 100%;
}
.rule_content .r_inside .r_main_txt { padding: 3% 8%;}
.rule .rule_content ol li {
	font-size: 2rem;
    margin: 6% auto 2% 2.2rem;
	list-style: decimal;
	font-weight: 700;
}
.rule .rule_content span.small {
	font-size: 1rem;
    font-weight: 300;
}



/*live*/
.live {
	background: url('../images/bg-5.jpg') center top fixed no-repeat;
	background-size: cover;
	position: relative;
	width: 100%;
}
.live .live_vedio {
	position: relative;
	width: 100%;
	padding: 5% 0;
}



/*lightbox*/
.lightbox {
	background: rgba(0 0 0 / 75%);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lightbox .box-rule {
	width: 35%;
    position: relative;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    padding: 2%;
    color: #1e1e1e;
    z-index: 99;
}
.lightbox .box-scroll {
    position: relative;
    width: 100%;
    padding: 1%;
    margin-top: 8%;
}
.lightbox .box-title {
    text-align: center;
	margin: 0 auto 7% auto;
}
.lightbox .box-close {
	position: absolute;
    right: 5%;
}
.lightbox .box-content {
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 3rem;
}
.lightbox .box-content ol {
	list-style: decimal;
    margin: 1rem 0 1rem 1.2rem;
}
.lightbox .box-content ol li span { color: #ea3939;}
.lightbox .box-scroll::-webkit-scrollbar { width: 5px;}
.lightbox .box-scroll::-webkit-scrollbar-track { background: #f1f1f1;}
.lightbox .box-scroll::-webkit-scrollbar-thumb { background: #888; border-radius: 10px;}
.lightbox .box-scroll::-webkit-scrollbar-thumb:hover { background: #555;}

.lightbox .box-content .code1 {
	font-weight: 900;
    margin-left: 2%;
    color: #1d64bc;
}
.lightbox .yn_btn {
	width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
}
.lightbox .certain,
.lightbox .cancel {
	width: 150px;
    font-size: 2rem;
    text-align: center;
    font-weight: 800;
    color: #fff;
    border-radius: 10px;
    padding: 10px 0;
	margin: 0 5px;
	transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
}
.lightbox .certain { background: #1d64bc;}
.lightbox .cancel { background: #535353;}
.lightbox .certain:hover, .lightbox .cancel:hover {
	filter: brightness(120%);
	-webkit-filter: brightness(120%);
}


/*footer*/
.footer {
	width: 100%;
    background: rgba(11,11,11);
    font-weight: 300;
    position: relative;
    padding: 3% 0;
    text-align: center;
	z-index: 3;
}
.footer .link { margin: 0 auto 2% auto;}
.footer .link a {
	color: #fff;
	text-decoration: none;
	margin: 0 1%;
	font-size: 14px;
}
.footer .copyright {
	color: #777;
    font-size: 12px;
    margin-top: 10px;
}
.footer .copyright a { color: #007bff;}





/*----------------------------------------4K---------------------------------------------------*/
@media screen and (min-width:2200px) {

	.index_kv { margin-top: -3%;}
}
/*----------------------------------------Mac book---------------------------------------------------*/
@media screen and (max-width:1440px) {
	
	#bgVideo { top: 3%;}

	.rule .rule_content { width: 80%;}
	
}
/*----------------------------------------小尺寸筆電---------------------------------------------------*/
@media screen and (max-width:1280px) and (min-width:1025px) {
	
	.sec_wrapper { width: 1000px;}
	.top_menu .main-nav li a { margin: 0 10px;}

	#bgVideo { top: -3%;}

	.state .signin_count { font-size: 1rem;}
	.team .sure { right: 1vw;}
	.team .sure img { width: 90%;}
}
/*----------------------------------------ipad pro-----------------------------------------*/
@media screen and (max-width:1024px) {
	
	.sec_wrapper { width: 90%;}
	.top_menu .main-nav li { margin: 0 10px;}
	.top_menu .sns-nav { display: none;}

	.index_kv, .index-effect { display: none;}
	.index_m_kv { display: block; width: 100%; position: relative;}
	.index-effect-m { display: block; position: absolute; z-index: 1;}
	

	.state .signin_count { font-size: 1rem;}
	.user_infor { font-size: 1.8rem;}
	.main_section { padding: 3% 0;}
	img.item { top: 0px; width: 22px;}

	.join, .create, .team { height: 88vh;}
	.team .t_inside .notice { position: relative; right: 0; width: 94%; margin-bottom: 2%;}
	.team .sure { right: 1vw;}
	.team .sure img { width: 90%;}

	.rule { background-size: cover;}
	.rule .rule_content { width: 90%;}

	.lightbox .box-rule { width: 65%; padding: 4%;}
	.lightbox .box-close { width: 4%;}
	.lightbox .box-scroll { margin-top: 2%;}
}
/*----------------------------------------ipad-----------------------------------------*/
@media screen and (max-width:768px) {
	
	.sec_wrapper { padding-top: 3%;}
	.header .top_menu { display: none;}

	.state .signin_count { display: flex; align-items: center; justify-content: center; width: 40%;}
	.user_infor { font-size: 1.2rem;}
	img.item { width: 14px; margin-right: 4px;}
	.state .state_on, .state .state_off, .state .state_stay { font-size: 1rem;}

	.join, .create, .team { height: 76vh;}
	.main_section .c_inside p { font-size: 2.4rem;}
	.main_section .c_inside input.input-field { font-size: 1.6rem;}
	.team .team_name, .team .team_code { font-size: 1.8rem;}
	.team .team_code span { font-size: 1.2rem; height: 36px;}
	.team_code .copy { width: 80%; bottom: 2px;}
	.team table.member-list { width: 50%; font-size: 1.6rem;}
	.team .sure { right: -64px;}
	.team .sure img { width: 80%;}

	.lightbox .box-close { top: 6%;}
	.lightbox .box-scroll { margin-top: 4%;}
	.lightbox .box-title { width: 50%;}
	.lightbox .box-content { font-size: 1.4rem; line-height: 2.4rem;}
	.lightbox .box-content ol { margin: 0 0 0 2rem;}
}
/*----------------------------------------------------------------------------------------------------*/
@media screen and (max-width:767px) {

	.top_logo img { width: 36%;}

	.state { flex-direction: column; align-items: center;}
	.state .state_on, .state .state_off, .state .state_stay { font-size: 12px; width: 100%; padding: 10px 0; margin-right: 0;}
	.state .signin_count { font-size: 12px; font-weight: 500; width: 100%; padding: 10px 0; margin-top: 2%;}
	.user_infor { font-size: 12px;}
	img.item { width: 8px; margin-right: 2px;}

	.join, .create { height: 70vh;}
	.team { height: auto;}
	.main_section .c_inside p { font-size: 1.2rem;}
	.main_section .c_inside input.input-field { font-size: 1rem; padding: 4% 0; margin: 3% auto; width: 84%;}
	.main_section .check { font-size: 12px;}
	.main_section input[type=radio] { width: 10px; height: 10px; top: 0; margin-right: 2%;}
	.main_section .submit { width: 50%;}
	.main_section .warning { font-size: 12px; transform: scale(0.8);}
	.team .t_inside .notice { font-size: 12px;}
	.team .team_name, .team .team_code { font-size: 0.8rem;}
	.team .team_code span { font-size: 14px; height: 24px; padding: 0 1rem; margin: 0 10px;}
	.team_code .copy { bottom: 1px;}
	.team table.member-list { width: 70%; font-size: 1rem; margin: 4% auto; border: 2px solid #000; line-height: 2.4rem;}
	.member-list .cerrent, .member-list .other { border: 2px solid #000;}
	.team .sure { right: 4vw; text-align: right; margin-top: 26vw;}
	.team .sure img { width: 27%;}
	.team .team_leave { right: 0; left: 10%; text-align: left; margin-top: 10%; margin-bottom: 2%;}
	.team .team_leave a { font-size: 12px; padding: 4px 1rem;}
	.team .notice_dc { font-weight: 600; font-size: 12px; line-height: 20px;}

	.rule .title { width: 50%;}
	.rule .rule_content { width: 100%;}
	.rule .rule_content .r_inside { font-size: 0.8rem; line-height: 1.6rem;}
	.rule .rule_content ol li { font-size: 1.4rem; margin: 12% auto 5% 1.4rem;}
	.rule .rule_content span.small { font-size: 12px;}

	.lightbox .box-rule { width: 74%; padding: 6%;}
	.lightbox .box-content { font-size: 12px; line-height: 20px;}
	.lightbox .box-close { top: unset;}
	.lightbox .box-scroll { margin-top: 6%;}
	.lightbox .certain, .lightbox .cancel { width: 80px; font-size: 12px; border-radius: 5px; padding: 3px 0;}

	.footer { padding: 10% 0;}
	.footer .link { margin: 0 auto 4% auto; width: 90%;}
	.footer .link a { margin: 0 4%; font-size: 12px; line-height: 20px;}
	.footer .logo { width: 60%; margin: 0 auto;}
	.footer .copyright { margin-top: 4%;}

}
/*----------------------------------------------------------------------------------------------------*/
@media screen and (max-width:362px) {
	
	.main_section .c_inside p { font-size: 1rem;}
	.main_section .c_inside input.input-field { font-size: 0.8rem;padding: 3% 0; width: 84%;}

	.team .sure { margin-top: 34vw;}

}