@charset "utf-8";
/*
Wallpoet
Regular 400
font-family: 'Wallpoet', cursive;

Montserrat
SemiBold 600
font-family: 'Montserrat', sans-serif;

蛍光イエロー　
#dcff00  
220,255,0

蛍光ブルー　
#00fcff  
0,252,255

/*-------------------------------------------------
	main
--------------------------------------------------*/
main { position: relative; height: 100vh; z-index: 1;}
main .video_wrap{ position: absolute; background: rgba(0,0,0,0.3); width: 100%; height: 100%; z-index: 2;}
main .video_dot{ position: absolute; background: url(../img/video_dot.gif); width: 100%; height: 100%; z-index: 1;}
/* on / off */
.main_pc{display: block;}
.main_sp{display: none;}
@media screen and (orientation: portrait) {
.main_pc{display: none;}
.main_sp{display: block;}
}/*END*/
main .main_wrap{ overflow: hidden; position: relative; }
main .full_video{ position: absolute; }
main .full_video_sp{ position: absolute; height: 100vh; }
/*inner*/
main .inner{ position: absolute; left: 5%; top: 0; width: 90%; height: 100%; margin: 0 auto; z-index: 3; text-align: center; display: flex; align-items: center; justify-content: center;}
main .inner div{ display: inline-block; width: 100%; }
/*h1*/
main .inner h1{ width: 43%; margin: 0 auto; }
@media screen and (orientation: portrait) {
main .inner h1{ width: 70%; }
}/*END*/

/*-------- sns --------*/
#main .sns{ position: absolute; right: 30px; bottom: 40px; color: #fff; display: flex; align-items: center; z-index: 5; }
@media screen and (max-width: 640px)  {
#main .sns{ position: absolute; right: 20px; bottom: 30px; }
#main .sns p { display: none; }
}/*END*/

/*-------- scroll --------*/
.scroll{ height: 8vh; width: 100px; margin-left: -50px; position: absolute; left: 50%; bottom: 0; z-index: 5; }
.scroll .scroll_inner{ height: 100%; width: 100%; overflow:hidden; position: relative; z-index: 5; transition: .3s; }
.scroll a{ display: block; width: 100%; height: 100%; position: relative; z-index: 200; transition: 0.3s; cursor: pointer; color: #fff; text-decoration: none;}
.scroll a .scroll_wheel{ width: 1px; height: 100%;  opacity: 0; animation: scroll_wheel 1s .5s 1 forwards ease-out; background:rgba(255,255,255,.3); display: block; position: absolute; left: 50%; bottom:0px; margin-left: -0.5px; transition: 0.3s;}
@keyframes scroll_wheel { 0% { bottom:0%; opacity: 0;} 100% { bottom:0%; opacity: 1;}}
.scroll a .scroll_wheel:after { opacity: 1; width: 100%; height: 25%; animation: scroll_wheel_after 1.5s 0.5s infinite normal ease; background:#fff; position: absolute; content:" "; display:block; z-index: 11; left: 0%; top:-100%; }
@keyframes scroll_wheel_after { 0% { top:-25%;} 60% { top:100%;} 100% { top:100%;}}
.scroll a:hover { opacity: 0.5;}
.scroll_txt{ font-size: 13px; line-height: 1; letter-spacing: 1px; position: absolute; top: -35px; left: 50%; width: 100px; margin-left: -50px; text-align: center;}



/*-------------------------------------------------
	timer
--------------------------------------------------*/
.timer_show{ display: none;}





/*-------------------------------------------------
	read
--------------------------------------------------*/
#read{ background: #fff; }
#read.co{padding: 0;}
#read .inner{ padding: 90px 0 90px; margin: 0 auto; width: 90%; max-width: 1200px; text-align: center;}
#read .inner h2.copy{ font-size: 57px; line-height: 1;  font-weight: bold; color: #fff;  font-family:'メイリオ', 'Meiryo', sans-serif; font-weight: bold; }
#read .inner h2.copy span{ padding:11px 13px 3px 13px; display: inline-block; background: url('../img/noise2.gif') top center;  }
#read .inner h2.copy span.copy2 { margin-top: 12px; }
/*Chrome ハック*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #read .inner h2.copy span { padding:11px 13px 3px 13px; }}
/*Firefox ハック*/
@-moz-document url-prefix(){ #read .inner h2.copy span { padding:11px 13px 3px 13px; }}
/*safari ハック*/
_::-webkit-full-page-media, _:future, :root #read .inner h2.copy span { padding:7px 13px 8px 13px; }
/*Edge ハック*/
@supports (-ms-ime-align: auto){ #read .inner h2.copy span { padding:7px 13px 8px 13px; }}
/*ie ハック*/
@media all and (-ms-high-contrast: none){ #read .inner h2.copy span { padding:7px 13px 8px 13px; }}

.read_h2{ margin-top: 50px;}

/*--------- 1300px ---------*/
@media screen and ( max-width: 1300px) {
#read .inner{ padding: 7.7vw 0 7.7vw; }
#read .inner h2.copy{ font-size: 4.38vw; }
#read .inner h2.copy span{ padding:0.85vw 1vw 0.2vw 1vw; display: inline-block; background-size: 79.5vw; }
#read .inner h2.copy span.copy2 { margin-top: .95vw; }
/*Chrome ハック*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #read .inner h2.copy span { padding:0.85vw 1vw 0.2vw 1vw; }}
/*Firefox ハック*/
@-moz-document url-prefix(){ #read .inner h2.copy span { padding:0.85vw 1vw 0.2vw 1vw; }}
/*safari ハック*/
_::-webkit-full-page-media, _:future, :root #read .inner h2.copy span { padding:.55vw 1.02vw .65vw 1.02vw; }
/*Edge ハック*/
@supports (-ms-ime-align: auto){ #read .inner h2.copy span { padding:.7vw 1.2vw .8vw 1.2vw; }}
/*ie ハック*/
@media all and (-ms-high-contrast: none){ #read .inner h2.copy span { padding:.7vw 1.2vw .8vw 1.2vw; }}
}/*END*/
/*--------- 1070px ---------*/
@media screen and ( max-width: 1024px) {
#read .inner{ padding: 9vw 0 9vw; margin: 0 auto; width: 100%;}
#read .inner h2.copy{ font-size: 4.4vw; }
#read .inner h2.copy span{ padding:1vw 1.2vw 0.3vw 1.2vw; display: inline-block; background-size: 97vw; }
#read .inner h2.copy span.copy2 { margin-top: 1.1vw; }
/*Chrome ハック*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #read .inner h2.copy span { padding:1vw 1.2vw 0.3vw 1.2vw; }}
/*Firefox ハック*/
@-moz-document url-prefix(){ #read .inner h2.copy span { padding:1vw 1.2vw 0.3vw 1.2vw; }}
/*safari ハック*/
_::-webkit-full-page-media, _:future, :root #read .inner h2.copy span { padding:.7vw 1.2vw .8vw 1.2vw; }
/*Edge ハック*/
@supports (-ms-ime-align: auto){ #read .inner h2.copy span { padding:.7vw 1.2vw .8vw 1.2vw; }}
/*ie ハック*/
@media all and (-ms-high-contrast: none){ #read .inner h2.copy span { padding:.7vw 1.2vw .8vw 1.2vw; }}
}/*END*/
/*--------- 500px ---------*/
@media screen and ( max-width: 500px) {
#read .inner{ padding: 10vw 0 10vw; margin: 0 auto; width: 100%;}
#read .inner h2.copy{ font-size: 4.5vw; }
}/*END*/
/*--------- 400px ---------*/
@media screen and ( max-width: 400px) {
#read .inner{ padding: 12vw 0 12vw; }
}/*END*/


/* p */
#read .inner p{ width: 90%; margin: 50px auto 0; font-size: 24px; line-height: 1.9;}
@media screen and ( max-width: 1400px) {
#read .inner p{width: 90%; margin: 50px auto 0; font-size: 23px; }
}/*END*/
@media screen and ( max-width: 1150px) {
#read .inner p{width: 90%; margin: 50px auto 0; font-size: 2vw; }
}/*END*/
@media screen and ( max-width: 1024px) {
#read .inner p{width: 90%; margin: 50px auto 0; font-size: 23px; }
}/*END*/
@media screen and ( max-width: 945px) {
#read .inner p{width: 90%; margin: 5.2vw auto 0; font-size: 2.45vw; }
}/*END*/
@media screen and ( max-width: 640px) {
#read .inner p{width: 90%; margin: 5.2vw auto 0; font-size: 18px; }
#read .inner p br{display: none; }
#read .inner p span{display: inline-block; }
}/*END*/
@media screen and ( max-width: 500px) {
#read .inner p{width: 90%; margin: 5.2vw auto 0; font-size: 16px; }
#read .inner p br{display: none; }
#read .inner p span{display: inline-block; }
}/*END*/
@media screen and ( max-width: 450px) {
#read .inner p{width: 90%; margin: 5.2vw auto 0; font-size: 15px; }
#read .inner p br{display: none; }
#read .inner p span{display: inline-block; }
}/*END*/






/*-------------------------------------------------
	about
--------------------------------------------------*/
#about{ background: #eee; }
#about.co{padding: 0;}
#about .inner{ padding: 60px 0 70px; margin: 0 auto; width: 90%; max-width: 1200px; text-align: center;}
#about .inner h2.copy{ font-size: 57px; line-height: 1;  font-weight: bold; color: #fff;  font-family:'メイリオ', 'Meiryo', sans-serif; font-weight: bold; }
#about .inner h2.copy span{ padding:11px 13px 3px 13px; display: inline-block; background: url('../img/noise2.gif') top center;  }
#about .inner h2.copy span.copy2 { margin-top: 12px; }
/*Chrome ハック*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #about .inner h2.copy span { padding:11px 13px 3px 13px; }}
/*Firefox ハック*/
@-moz-document url-prefix(){ #about .inner h2.copy span { padding:11px 13px 3px 13px; }}
/*safari ハック*/
_::-webkit-full-page-media, _:future, :root #about .inner h2.copy span { padding:7px 13px 8px 13px; }
/*Edge ハック*/
@supports (-ms-ime-align: auto){ #about .inner h2.copy span { padding:7px 13px 8px 13px; }}
/*ie ハック*/
@media all and (-ms-high-contrast: none){ #about .inner h2.copy span { padding:7px 13px 8px 13px; }}

.about_h2{ margin-top: 0px;}

/*--------- 1300px ---------*/
@media screen and ( max-width: 1300px) {
#about .inner{ padding: 5vw 0 6vw; }
#about .inner h2.copy{ font-size: 4.38vw; }
#about .inner h2.copy span{ padding:0.85vw 1vw 0.2vw 1vw; display: inline-block; background-size: 79.5vw; }
#about .inner h2.copy span.copy2 { margin-top: .95vw; }
/*Chrome ハック*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #about .inner h2.copy span { padding:0.85vw 1vw 0.2vw 1vw; }}
/*Firefox ハック*/
@-moz-document url-prefix(){ #about .inner h2.copy span { padding:0.85vw 1vw 0.2vw 1vw; }}
/*safari ハック*/
_::-webkit-full-page-media, _:future, :root #about .inner h2.copy span { padding:.55vw 1.02vw .65vw 1.02vw; }
/*Edge ハック*/
@supports (-ms-ime-align: auto){ #about .inner h2.copy span { padding:.7vw 1.2vw .8vw 1.2vw; }}
/*ie ハック*/
@media all and (-ms-high-contrast: none){ #about .inner h2.copy span { padding:.7vw 1.2vw .8vw 1.2vw; }}
}/*END*/
/*--------- 1070px ---------*/
@media screen and ( max-width: 1024px) {
#about .inner{ padding: 60px 0 70px; margin: 0 auto; width: 100%;}
#about .inner h2.copy{ font-size: 4.4vw; }
#about .inner h2.copy span{ padding:1vw 1.2vw 0.3vw 1.2vw; display: inline-block; background-size: 97vw; }
#about .inner h2.copy span.copy2 { margin-top: 1.1vw; }
/*Chrome ハック*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #about .inner h2.copy span { padding:1vw 1.2vw 0.3vw 1.2vw; }}
/*Firefox ハック*/
@-moz-document url-prefix(){ #about .inner h2.copy span { padding:1vw 1.2vw 0.3vw 1.2vw; }}
/*safari ハック*/
_::-webkit-full-page-media, _:future, :root #about .inner h2.copy span { padding:.7vw 1.2vw .8vw 1.2vw; }
/*Edge ハック*/
@supports (-ms-ime-align: auto){ #about .inner h2.copy span { padding:.7vw 1.2vw .8vw 1.2vw; }}
/*ie ハック*/
@media all and (-ms-high-contrast: none){ #about .inner h2.copy span { padding:.7vw 1.2vw .8vw 1.2vw; }}
}/*END*/
/*--------- 500px ---------*/
@media screen and ( max-width: 500px) {
#about .inner{ padding: 60px 0 70px; margin: 0 auto; width: 100%;}
#about .inner h2.copy{ font-size: 4.5vw; }
}/*END*/
/* p */
#about .inner p{ width: 90%; margin: 50px auto 0; font-size: 24px; line-height: 1.9;}
@media screen and ( max-width: 1400px) {
#about .inner p{width: 90%; margin: 50px auto 0; font-size: 23px; }
}/*END*/
@media screen and ( max-width: 1150px) {
#about .inner p{width: 90%; margin: 50px auto 0; font-size: 2vw; }
}/*END*/
@media screen and ( max-width: 1024px) {
#about .inner p{width: 90%; margin: 50px auto 0; font-size: 23px; }
}/*END*/
@media screen and ( max-width: 945px) {
#about .inner p{width: 90%; margin: 5.2vw auto 0; font-size: 2.45vw; }
}/*END*/
@media screen and ( max-width: 640px) {
#about .inner p{width: 90%; margin: 5.2vw auto 0; font-size: 18px; }
#about .inner p br{display: none; }
#about .inner p span{display: inline-block; }
}/*END*/
@media screen and ( max-width: 500px) {
#about .inner p{width: 90%; margin: 5.2vw auto 0; font-size: 16px; }
#about .inner p br{display: none; }
#about .inner p span{display: inline-block; }
}/*END*/
@media screen and ( max-width: 450px) {
#about .inner p{width: 90%; margin: 5.2vw auto 0; font-size: 15px; }
#about .inner p br{display: none; }
#about .inner p span{display: inline-block; }
}/*END*/






#about .btn { margin-top: 50px; }
@media screen and ( max-width: 900px) {
#about .btn { margin-top: 5.5vw; }
}/*END*/
@media screen and ( max-width: 550px) {
#about .btn { margin: 7vw 0 3vw; }
}/*END*/

#gallery .btn a{ background: #dcff00; color: #000; }

.games_box_btn{display: none;}
@media screen and ( max-width: 1000px) {
#games .btn { margin-top: 40px;}
.games_box_btn{display: inline-block; margin-bottom: 10px;}
}/*END*/
@media screen and ( max-width: 750px) {
#games .btn { margin-top: 5vw;}
.games_box_btn{margin-bottom: 40px;}
}/*END*/

/*-------------------------------------------------
	co_about
--------------------------------------------------*/
.co_about_read{ padding: 70px 0; text-align: center;}
.co_about_read p{margin: 0 auto; width: 85%;}
@media screen and ( max-width: 1200px) {
.co_about_read{ padding: 70px 0; }
.co_about_read p {text-align: left;}
.co_about_read p br{display: none;}
}/*END*/
@media screen and ( max-width: 700px) {
.co_about_read{ padding: 10vw 0; }
}/*END*/


#co_about{ }
#co_about .co_main{ margin: 0 auto; width: 80%; max-width: 900px;}
#co_about .co_main .pc{ display: block; }
#co_about .co_main .sp{ display: none; }
@media screen and ( max-width: 1024px) {
#co_about .co_main .pc{ display: none; }
#co_about .co_main .sp{ display: block; }
}/*END*/


/*-------------------------------------------------
	mamechishiki
--------------------------------------------------*/

/* co */
.mamechishiki_co { padding: 80px 0 ; width: 90%; max-width: 1200px; margin: 0 auto; text-align: left; display: flex; align-items: center;}

.mamechishiki_co .txt_box{ width: 45%; max-width: 470px; margin-left: 8%;}
.mamechishiki_movie{ width: 50%; position: relative; }
.mamechishiki_movie a{ overflow: hidden; display: inline-block ; overflow: hidden; background: #000; position: relative; }

.mamechishiki_movie a img{ transition: 1s; }
.mamechishiki_movie a:hover img{ transform: scale(1.1); opacity: 0.6;}

.mamechishiki_co h3{ font-size: 45px;  font-weight: bold;}
.mamechishiki_co p{ margin-top: 10px; text-align: left;}



@media screen and ( max-width: 1200px) {
.mamechishiki_co { padding: 80px 0 ; width: 90%; margin: 0 auto; display: block; }
.mamechishiki_co .txt_box{ width: 90%; max-width: 800px; margin: 50px auto 0;}
.mamechishiki_movie{ width: 90%; position: relative; max-width: 500px; margin: 0 auto;}
.mamechishiki_co p br{display: none;}
}/*END*/
@media screen and ( max-width: 750px) {
.mamechishiki_co { padding: 60px 0 60px; width: 90%; margin: 0 auto; text-align: center;}
.mamechishiki_co h3{ font-size: 40px; }

.mamechishiki_main .mamechishiki_main_title h2{ font-size: 4vw;}
}/*END*/
@media screen and ( max-width: 540px) {
.mamechishiki_main .mamechishiki_main_title h2{ font-size: 4.5vw; }
}/*END*/






/*-------------------------------------------------
	STACK UP
--------------------------------------------------*/
/*stack_up_wrap*/
.stack_up_wrap .img_box{ background: #555; padding: 0 0; text-align: center; position: relative; }
.stack_up_wrap .img_box .stack_up{ width: 100%; height: 100%; display: inline-block; position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; z-index: 10;}
.stack_up_wrap .img_box .stack_up img{ max-width: 940px; width: 59%;}
.stack_up_wrap .img_box .about_slider{ overflow: hidden;}
.stack_up_wrap .img_box .about_slider div{ width: 2835px; display: flex; filter: grayscale(100%);}
.stack_up_wrap .img_box .about_slider div img{  width: 100%;}
@media screen and ( max-width: 1600px) {
.stack_up_wrap .img_box .about_slider div { width: 178%; }
}/*END*/
@media screen and ( max-width: 640px) {
.stack_up_wrap .img_box .stack_up img{ max-width: 940px; width: 70%;}
.stack_up_wrap .img_box .about_slider div { width: 250%; }
}/*END*/
.about_slider div { display: flex;}


/*-------------------------------------------------
	GAMES　ゲーム紹介
--------------------------------------------------*/
#games{ background: url(../img/games_bg.gif) center top fixed; text-align: center; }
.co2 #games{ background: url(../img/games_bg2.gif) center top ; text-align: center; }

.games_box{ margin: 40px auto 0; width: 85%; max-width: 1200px; display: flex; justify-content: space-between; }
.games_box li{ width: 46%;}
.games_box li .games_titlehead{ font-size: 30px; width: 100%; text-align: center; font-family: 'Wallpoet', cursive; font-weight: 400; }
.games_box li p.txt{ padding: 40px 0; font-size: 19px; font-weight: bold; text-align: left; margin: 0 auto; width: 94%;}
.co2 .games_box li p.txt{ padding: 40px 0; font-size: 20px; }
.games_box li p.txt span{ display: inline-block; }
@media screen and ( max-width: 1200px) {
.games_box li .games_titlehead{ font-size: 2.5vw;}
.games_box li p.txt{ padding: 3vw 0; font-size: 19px;}
}/*END*/
@media screen and ( max-width: 1100px) {
.games_box li p.txt{ padding: 3vw 0; font-size: 20px;}
.co2 .games_box li p.txt{ padding: 40px 0; font-size: 18px; }
}/*END*/
@media screen and ( max-width: 1000px) {
.games_box li .games_titlehead{ font-size: 38px; }
.games_box li p.txt{ padding: 40px 0; font-size: 22px;}
.co2 .games_box li p.txt{ padding: 40px 0; font-size: 18px; }
}/*END*/
@media screen and ( max-width: 750px) {
.games_box li .games_titlehead{ font-size: 5vw; }
}/*END*/
@media screen and ( max-width: 640px) {
.games_box li .games_titlehead{ font-size: 6vw; }
.games_box li p.txt{ padding: 35px 0; font-size: 19px;}
.co2 .games_box li p.txt{ padding: 35px 0; font-size: 19px;}
}/*END*/
@media screen and ( max-width: 500px) {
.games_box li p.txt{ padding: 30px 0; font-size: 17px;}
.co2 .games_box li p.txt{ padding: 30px 0; font-size: 17px;}
}/*END*/
@media screen and ( max-width: 500px) {
.games_box li .games_titlehead{ font-size: 6.5vw; }
}/*END*/

/* ----- games_movie ----- */
.games_movie a{ position: relative; cursor: pointer; display: block; overflow: hidden; }
.games_movie a img{ width: 100%; transition: 1s; filter: grayscale(100%);}
.games_movie a:hover img{ transform: scale(1.08); filter: grayscale(0%);}


.play{ position: relative;}

.play a span{ position: relative; display: inline-block; width: 60px; height: 60px; border-radius: 50%; box-sizing: border-box; z-index: 3; background: rgba(220,255,0,0); border: solid 2px rgba(220,255,0,1); transition: 0.3s; pointer-events: none; user-select: none; }
#event .play a span{ position: relative; display: inline-block; width: 60px; height: 60px; border-radius: 50%; box-sizing: border-box; z-index: 3; background:rgba(220,255,0,.7); border: solid 2px rgba(220,255,0,0); transition: 0.3s; pointer-events: none; user-select: none; }
#games .play a span{  position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -30px; z-index: 5; }
#event .play a span{ position: absolute;   top: 50%; left: 50%; margin: -30px 0 0 -30px; z-index: 5; }
.mamechishiki_movie.play a span{  position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -30px; z-index: 5; }

.play a span::after{ border-width: 10px 0 10px 16px; margin: -10px 0 0 -5px; left: 50%; top: 50%; position: absolute; z-index: 1; content: ''; display: block; width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #dcff00; transition: 0.6s; }
#event .play a span::after{ border-width: 10px 0 10px 16px; margin: -10px 0 0 -5px; left: 50%; top: 50%; position: absolute; z-index: 1; content: ''; display: block; width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #000; transition: 0.6s; }
@media screen and ( max-width: 450px) {
.play a span{ width: 50px; height: 50px; }
.play a span::after{ border-width: 8px 0 8px 13px; margin: -8px 0 0 -4px;  }
}/*END*/
@media screen and ( max-width: 400px) {
.play a span{ width: 40px; height: 40px; }
.play a span::after{ border-width: 6px 0 6px 9px; margin: -6px 0 0 -3px;  }
}/*END*/

/*hover*/
.play a:hover span{ background: rgba(220,255,0,1); }
.play a:hover span::after{ border-color: transparent transparent transparent #000; }

#event .play a:hover span{ background: rgba(220,255,0,1); }



/* play_wrap */
.play .play_wrap { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%;  pointer-events: none; user-select: none; display: flex; align-items: center; justify-content: center; text-align: center;}
/*play_txt*/
.play .play_wrap .play_txt{ display: block; text-decoration: none; color: #dcff00; text-align: center; }
.play .play_wrap .play_txt .play_txt_comingsoon{ margin-top: 0px; font-size: 18px; line-height: 1.3; letter-spacing: 1px; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);}
.play .play_wrap .play_txt .play_txt_head{ margin-top: 10px; font-size: 14px; line-height: 1.3; letter-spacing: 1px; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);}
.play .play_wrap .play_txt .play_txt_name{ margin-top: 5px; font-size: 16px; line-height: 1.3; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);}
.play .play_wrap .play_txt .play_txt_box{ margin-top: 10px; font-size: 14px; line-height: 1; padding: 3px 10px 2px; background: #dcff00 ; color: #000; display: inline-block;}
@media screen and ( max-width: 500px) {
.play .play_wrap .play_txt .play_txt_comingsoon{ margin-top: 0vw; font-size: 2.8vw;}

.play .play_wrap .play_txt .play_txt_head{ margin-top: 1vw; font-size: 2.3vw; }
.play .play_wrap .play_txt .play_txt_name{ margin-top: .5vw; font-size: 2.8vw; line-height: 1.3;}
.play .play_wrap .play_txt .play_txt_box{ margin-top: 1vw; font-size: 2.5vw; line-height: 1; padding: .7vw 1.5vw .25vw; }
}/*END*/
/*col*/
.games_box li:nth-child(2) .play a span{ background: rgba(0,252,255,0); border: solid 2px rgba(0,252,255,1); }
.games_box li:nth-child(2) .play a span::after{ border-color: transparent transparent transparent #00fcff; }
/*hover*/
.games_box li:nth-child(2) .play a:hover span{ background: rgba(0,252,255,1); }
.games_box li:nth-child(2) .play a:hover span::after{ border-color: transparent transparent transparent #000; }
@media screen and ( max-width: 1000px) {
.games_box{ margin: 40px auto 0; width: 80%; max-width: 600px !important; display: block !important;}
.games_box_inner{ margin: 0 auto; width: 90%; }
.games_box li{ width: 100%;}
.games_box li:nth-child(2){ margin-top: 80px;}
}/*END*/
@media screen and ( max-width: 700px) {
.games_box li:nth-child(2){ margin-top: 5vw;}
}/*END*/
@media screen and ( max-width: 640px) {
.games_box{ margin: 30px auto 0; width: 92%; max-width: 640px; display: block;}
.co2 .games_box{ margin: 30px auto 0; width: 100%; max-width: 640px; display: block;}
.games_box_inner{ margin: 0 auto; width: 88%; }
.co2 .games_box_inner{ margin: 0 auto; width: 95%; }
.co2 .games_box li:nth-child(2){ margin-top: 12vw;}
}/*END*/

/*----------------------
	RECORD　大会記録
------------------------*/
.record { padding: 50px 0 10px; }
.record h3 small{ margin-top: 15px; font-size: 24px; line-height: 1; display: block;  }
.record h3{ padding:0 0 5px; font-size: 53px; line-height: 1; font-family: 'Wallpoet', cursive; text-align: center; position: relative; display: block; z-index: 2; }
.record h3 span{ padding:0 8px; display: inline-block; position: relative; }
.record h3 span::after{ content: ''; display: block; position: absolute; left: 0; bottom: 2px; width: 100%; height: 20px; z-index: -1; }
@media screen and ( max-width: 399px) {
.record h3 small{ margin-top: 15px; font-size: 6vw; }
.record h3{ padding:0 0 1vw; font-size: 13.5vw; line-height: 1;  }
.record h3 span{ padding:0 1.5vw; }
.record h3 span::after{ content: ''; display: block; position: absolute; left: 0; bottom: .5vw; width: 100%; height: 5vw;  }
}/*END*/

.record h4 { margin:30px 0 20px; font-size: 20px; line-height: 1.5; font-weight: bold; display: block; padding: 3px 0 2px; color: #000; border-top: solid 3px #000; border-bottom: solid 3px #000; }
@media screen and ( max-width: 640px) {
.record h4 { margin:25px 0 15px; font-size: 18px; }
}/*END*/
@media screen and ( max-width: 370px) {
.record h4 { margin:25px 0 15px; font-size: 16px; }
}/*END*/

/* table */
.record table { margin-top: 20px; display: inline-block; margin: 0 auto;}
.record table th,
.record table td{ padding-top: 0px; padding-bottom: 5px;}
.record table th span{  padding:0 5px; font-weight: bold; position: relative; z-index: 2; white-space: nowrap;}
.record table th span::after{ content: ''; display: block; position: absolute; left: 0; bottom: 2px; width: 100%; height: 40%;z-index: -1; }
/* table [txt] [padding] */
.record table th,
.record table td{ font-size: 20px; line-height: 1.5;vertical-align: top;}
.record table th,
.record table td:nth-child(2){ padding-right: 30px; white-space: nowrap; }
@media screen and ( max-width: 1400px) {
.record table th,
.record table td{ font-size: 18px; }
.record table th,
.record table td:nth-child(2){ padding-right: 25px;}
}/*END*/
@media screen and ( max-width: 1200px) {
.record table th,
.record table td{ font-size: 16px; }
.record table th,
.record table td:nth-child(2){ padding-right: 20px;}
}/*END*/
@media screen and ( max-width: 1000px) {
.record table th,
.record table td{ font-size: 18px; }
}/*END*/
@media screen and ( max-width: 500px) {
.record table { display: table; width: 100%;}
.record table th,
.record table td{ font-size: 15px; padding:5px 0 ;}
.record table tr{border-bottom: solid 1px #000; }
.record table tr:last-child{border-bottom: none; }
.record table td {display: inline-block;}
}/*END*/
@media screen and ( max-width: 400px) {
.record table th,
.record table td{ font-size: 15px; }
.record table th,
.record table td:nth-child(2){ padding-right: 18px;}
.record table td {display: table-cell; }
}/*END*/
@media screen and ( max-width: 350px) {
.record table { display: table; width: 100%;}
.record table th{ padding: 0px; margin: 0px;}
.record table td {display: table-cell; padding: 0 0 5px;}
.record table td:nth-child(2){ padding-right: 15px;}
.record table tr{display: block; margin-bottom: 10px;}
.record table th{display: inline-block; }
.record table tr{border-bottom: solid 1px #000; }
.record table tr:last-child{border-bottom: none; }
}/*END*/

/*
.record{ margin-top: 50px; width: 100%;text-align: center; padding: 20px 30px 25px 30px; box-sizing: border-box; background: #fff;}
*/
.record_box{ padding: 0px 0 0px; text-align: left; }
/* move / zumi [col] */
.record.move h3 span::after,
.record.move table th span::after{  background: #dcff00; }
.record.zumi h3 span::after,
.record.zumi table th span::after{  background: #00fcff; }

#games .btn{ margin-top: 50px; }
@media screen and ( max-width: 1000px) {
#games .btn{ margin-top: 30px; }
}/*END*/


/*

蛍光イエロー　
#dcff00  
220,255,0

蛍光ブルー　
#00fcff  
0,252,255

*/

/*-------------------------------------------------
	CHALLENGER　チャレンジャー紹介
--------------------------------------------------*/

.yel{ background:#dcff00; display: inline-block; padding: 1px 6px; font-weight: bold !important;}

#challenger { background: #fff;}
#challenger p span{ display: inline-block;}


#challenger .read{ margin: 50px auto; width: 90%; max-width: 800px; text-align: center;}
.challenger_sl { position: relative;}
.challenger_sl ul.sl{ margin: 0 auto; width: 85%; max-width: 1250px; position: relative; z-index: 2;}
.challenger_sl ul.sl li{ margin: 0 20px; }
@media screen and ( max-width: 1470px) {
.challenger_sl ul.sl li{ margin: 0 1.5vw; }
}/*END*/
@media screen and ( max-width: 1000px) {
.challenger_sl ul.sl li{ margin: 0 2vw; }
}/*END*/
@media screen and ( max-width: 750px) {
.challenger_sl ul.sl li{ margin: 0 3vw; }
}/*END*/
.challenger_sl ul.sl li:nth-child(even){ margin-top: 75px; }
.challenger_sl ul.sl li .img_box{ position: relative; overflow: hidden;}
.challenger_sl ul.sl li .img_box img,
.challenger_sl ul.sl li .img_box a img{ width: 100%; filter: grayscale(0%); transition: 1s;}
.challenger_sl ul.sl li .img_box a:hover img{ transform: scale(1.05); filter: grayscale(0%);}
.challenger_sl ul.sl li .img_box .name{ position: absolute; left: 18px; bottom: 20px; font-size: 36px; line-height: 1.1; color: #dcff00; font-family: 'Montserrat', sans-serif; pointer-events: none; user-select: none; }
.challenger_sl ul.sl li .img_box .name.name1{ left: 18px; bottom: initial; top: 15px; font-size: 34px; }
.challenger_sl ul.sl li .img_box .name.name2{ left:initial; right: 15px; bottom: 15px; font-size: 34px; text-align: right; }
.challenger_sl ul.sl li .profile_box{ margin-top: 0px; font-size: 0;}
.challenger_sl ul.sl li .profile_box h5{ margin-top: 12px; font-size:16px; line-height: 1.5; font-weight: bold; }
.challenger_sl ul.sl li .profile_box p{ margin-top: 0px; font-size:13px; line-height: 1.5; font-weight: normal; }
.challenger_sl ul.sl li .profile_box p span{ display: inline-block; }
.challenger_sl ul.sl li .profile_box .profile_sns{ margin-top: 10px; }
.challenger_sl ul.sl li .profile_box .profile_sns p{ display: inline-block; font-size: 10px ; line-height: 1; font-weight: bold;}
.challenger_sl ul.sl li .profile_box .profile_sns a{ font-size: 12px; margin-right: 10px; display: inline-block; color: #000; transition: 0.3s;}
.challenger_sl ul.sl li .profile_box .profile_sns a:hover{ color: #999;}
.challenger_sl ul.sl li .profile_box .profile_sns a{ margin-right: 5px; display: inline-block; width: 25px; height: 25px; background-size: cover !important; text-indent: -9999px; position: relative;border-radius: 50%}
.challenger_sl ul.sl li .profile_box .profile_sns a.sns_fb{ background:url(../img/sns_fb.png) no-repeat center center ; position: relative; z-index: 2; }
.challenger_sl ul.sl li .profile_box .profile_sns a.sns_in{ background:url(../img/sns_in.png) no-repeat center center ; position: relative; z-index: 2; }
.challenger_sl ul.sl li .profile_box .profile_sns a.sns_tw{ background:url(../img/sns_tw.png) no-repeat center center ; position: relative; z-index: 2; }
.challenger_sl ul.sl li .profile_box .profile_sns a.sns_yt{ background:url(../img/sns_yt.png) no-repeat center center ; position: relative; z-index: 2; }
.challenger_sl ul.sl li .profile_box .profile_sns a{ background-color: #333 !important;}
.challenger_sl ul.sl li .profile_box .profile_sns a:hover{ background-color: #999 !important;}
.comingsoon { background: #000;}
.comingsoon .name{ opacity: 0.4;}
.comingsoon img{ opacity: 0.5;}
@media screen and ( max-width: 370px) {
.challenger_sl ul.sl li .profile_box .profile_sns a{ margin-right: 3px; width: 22px; height: 22px;}
}/*END*/
@media screen and ( max-width: 1470px) {
.challenger_sl ul.sl li:nth-child(even){ margin-top: 5.35vw; }
.challenger_sl ul.sl li .img_box .name{ left: 1.2vw; bottom: 1.3vw; font-size: 2.4vw;}
.challenger_sl ul.sl li .img_box .name.name1{ left: 1vw; top: 1vw; font-size: 2.3vw; bottom: initial; }
.challenger_sl ul.sl li .img_box .name.name2{ right: 1vw; bottom: 1vw; font-size: 2.3vw; left:initial; }

}/*END*/
@media screen and ( max-width: 1200px) {
.challenger_sl ul.sl li .profile_box p{  font-size:12px;}
}/*END*/
@media screen and ( max-width: 1000px) {
.challenger_sl ul.sl li .img_box .name{ left: 1.4vw; bottom: 1.5vw; font-size: 3.3vw;}
.challenger_sl ul.sl li .img_box .name.name1{ left: 1vw; top: 1vw; font-size: 3.1vw; }
.challenger_sl ul.sl li .img_box .name.name2{ right: 1vw; bottom: 1vw; font-size: 3.1vw; }
.challenger_sl ul.sl li .profile_box p{  font-size:13px;}
}/*END*/
@media screen and ( max-width: 750px) {
.challenger_sl ul.sl li:nth-child(even){ margin-top: 10vw; }
.challenger_sl ul.sl li .img_box .name{ left: 2vw; bottom: 2.1vw; font-size: 5vw;}
.challenger_sl ul.sl li .img_box .name.name1{ left: 1.8vw; top: 1.8vw; font-size: 4.4vw; }
.challenger_sl ul.sl li .img_box .name.name2{ right: 1.8vw; bottom: 1.8vw; font-size: 4.4vw; }
.challenger_sl ul.sl li .profile_box p{ font-size:12px;}
.challenger_sl ul.sl li .profile_box p span{ display: inline; }
.challenger_sl ul.sl li .profile_box p br{ display: none; }
}/*END*/

/* ---- obi ---- */
.challenger_sl .obi{ position: absolute; left: 0; top: 130px; height: 450px; width: 100%; background: url(../img/cha_line_bg.gif); z-index: 0;}
@media screen and ( max-width: 1470px) {
.challenger_sl .obi{ position: absolute; top: 8.8vw; height: 30.5vw; background-size: 15.3vw;}
}/*END*/
@media screen and ( max-width: 1000px) {
.challenger_sl .obi{ position: absolute; top: 11vw; height: 40vw; background-size: 24vw;}
}/*END*/
@media screen and ( max-width: 750px) {
.challenger_sl .obi{ position: absolute; top: 20vw; height: 54vw; background-size: 27vw;}
}/*END*/


/*  < prev | next >  */
.slick-prev ,
.slick-next { width: 10vw; height: 713px; color: black; position: absolute; text-indent:-9999px; z-index: 10; background: #f00;}
@media screen and ( max-width: 1470px) {
.slick-prev ,
.slick-next { width: 10vw; height: 48vw;}
}/*END*/
@media screen and ( max-width: 1000px) {
.slick-prev ,
.slick-next { width: 10vw; height: 62.3vw;}
}/*END*/
@media screen and ( max-width: 750px) {
.slick-prev ,
.slick-next { width: 10vw; height: 96vw;}
}/*END*/

.slick-prev { right:100%; }
.slick-next { left: 100%; }

/* top */
.slick-prev,
.slick-next { top: 0px; transition: 0.3s; }
.slick-prev:hover,
.slick-next:hover { opacity: 0.5; }
.slick-prev:before,
.slick-next:before { content: ''; width: 100%; height: 100%; display: block; position: absolute; left: 0px; top: 0px; }
.slick-prev:before{ background: url(../img/arrow_prev.svg) no-repeat center; }
.slick-next:before{ background: url(../img/arrow_next.svg) no-repeat center; }
.slick-prev:before,
.slick-next:before{ background-size: 50px;}


@media screen and ( max-width: 1580px) {
.slick-prev ,
.slick-next { width: 8vw;}
.slick-prev:before,
.slick-next:before{ background-size: 50px;}
}/*END*/
@media screen and ( max-width: 1500px) {
.slick-prev ,
.slick-next { width: 6.5vw;}
}/*END*/

@media screen and ( max-width: 500px) {
.slick-prev:before,
.slick-next:before{ background-size: 40px;}
}/*END*/
@media screen and ( max-width: 400px) {
.slick-prev:before,
.slick-next:before{ background-size: 30px;}
}/*END*/



/* button リセット*/
button.slick-prev ,
button.slick-next  { padding: 0; border: none; outline: none; font: inherit;color: inherit; background: none; }
/* dots ●○○○○ */
.slick-dots { margin-top: 40px; text-align: center; }
.slick-dots li { margin: 0px !important; width: 30px !important;/*ドット幅調整*/ display: inline-block; position: relative; text-indent:-9999px; }
.slick-dots li button:before { background: #ddd; content: ''; position: absolute; left: 50%; top: 50%;  margin: -5px 0 0 -5px; width: 10px !important; height: 10px; border-radius: 50%; }
.slick-dots li:hover button:before,
.slick-dots li.slick-active button:before{ background: #000;} /* active | hover */
.slick-dots li:only-child { display: none; }
.next_challenger{ position: relative; display: block; }
.next_challenger_txt{ background: #f00; width: 100%; display: block; transform:rotate(90deg); transform-origin:left top; position: absolute; left: 0px; top: 0px; font-size: 36px; line-height: 1.1; color: #dcff00; font-family: 'Montserrat', sans-serif;}
.next_challenger_txt small{ display: block; }

.challenger_banner{ margin: 80px auto 0; width: 90%; text-align: center; background: #fff;}
.challenger_banner p{ margin: 25px auto 0; width: 90%; max-width:570px ; text-align: center;}

.challenger_banner a{ transition: 0.5s; display: inline-block; color: #000;}
.challenger_banner a:hover{ opacity: 0.6;}
.challenger_banner a img{ transition: 0.5s;}
.challenger_banner a:hover img{ transform: scale(1.02);}


/*-------------------------------------------------
	GALLERY　ギャラリー
--------------------------------------------------*/
#gallery{ background: url(../img/gallery_bg2.gif) center top fixed; color: #fff; text-align: center;}
#gallery .read{ margin: 50px auto; width: 90%; max-width: 800px; text-align: center;}
.gallery_list { margin: 0 auto;  width: 85%; max-width: 1260px;  }
.gallery_list ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
.gallery_list ul li{ width: 15%; margin-top: 28px;}
.gallery_list ul li img{ width: 100%;}
@media screen and ( max-width: 1580px) {
.gallery_list ul li{ width: 15%; margin-top: 1.7vw;}
}/*END*/
@media screen and ( max-width: 1200px) {
.gallery_list ul li{ width: 23%; margin-top: 2.4vw;}
}/*END*/
@media screen and ( max-width: 800px) {
.gallery_list ul li{ width: 31%; margin-top: 3vw;}
}/*END*/

#gallery .btn { margin-top: 80px; }
@media screen and ( max-width: 1200px) {
#gallery .btn { margin-top: 70px; }
}/*END*/
@media screen and ( max-width: 850px) {
#gallery .btn { margin-top: 8vw; }
}/*END*/
@media screen and ( max-width: 640px) {
#gallery .btn { margin-top: 10vw; }
}/*END*/
@media screen and ( max-width: 500px) {
#gallery .btn { margin-top: 10vw; }
}/*END*/

/*-------------------------------------------------
	NEWS  ニュース
--------------------------------------------------*/
#news{ background: #f2f2f2; color: #000; text-align: center;}

/*　　別途 news.cssへ　*/


/*-------------------------------------------------
	pickup  ピックアップバナー エリア
--------------------------------------------------*/


#pickup{ background: #e3e3e3;}
#pickup .inner{ margin: 0 auto; padding: 75px 0; width: 90%; max-width: 1200px;}
#pickup .inner ul{ display: flex; flex-wrap: wrap;  justify-content: center; }
#pickup .inner ul li{width: 80%; max-width: 400px;margin: 16px 1.5%; overflow: hidden;}
@media screen and (max-width: 1333px) {
#pickup .inner{ padding: 5.6vw 0;}
#pickup .inner ul li{margin: 1.2vw 1.5%; }
}/*END*/
@media screen and (max-width: 1000px) {
#pickup .inner{ padding: 9vw 0;width: 95%; max-width: 800px;}
#pickup .inner ul li{ width: 80%; max-width: 400px; margin: 1.7vw 2%;}
}/*END*/
/* a hover */
#pickup .inner ul li a{ transition: .5s;}
#pickup .inner ul li a:hover{ opacity: 0.6;}
#pickup .inner ul li a img{ transition: .5s; vertical-align: bottom;}
#pickup .inner ul li a:hover img{ transform: scale(1.05);}

/*=================
　複数になったら下記
===================*/
/*
#pickup{ background: #e3e3e3;}
#pickup .inner{ margin: 0 auto; padding: 75px 0; width: 90%; max-width: 1200px;}
#pickup .inner ul{ display: flex; flex-wrap: wrap; }
#pickup .inner ul li{ width: 30%; margin: 16px 1.5%; overflow: hidden;}
@media screen and (max-width: 1333px) {
#pickup .inner{ padding: 5.6vw 0;}
#pickup .inner ul li{margin: 1.2vw 1.5%; }
}/*END*//*
@media screen and (max-width: 1000px) {
#pickup .inner{ padding: 9vw 0;width: 95%; max-width: 800px;}
#pickup .inner ul li{ width: 46%; margin: 1.7vw 2%;}
}/*END*/
/* a hover *//*
#pickup .inner ul li a{ transition: .5s;}
#pickup .inner ul li a:hover{ opacity: 0.6;}
#pickup .inner ul li a img{ transition: .5s; vertical-align: bottom;}
#pickup .inner ul li a:hover img{ transform: scale(1.05);}

/*-------------------------------------------------
	pickup  ピックアップバナー エリア
--------------------------------------------------*/


#pickup_banner{ background: #e3e3e3;}
#pickup_banner .inner{ margin: 0 auto; padding: 40px 0 0; width: 85%; max-width: 1200px; }
#pickup_banner .inner ul{ display: flex; flex-wrap: wrap; justify-content: center; }
#pickup_banner .inner ul li{width: 47%; margin: 16px 1.5%; overflow: hidden;}
#pickup_banner .inner ul li img{width: 100%;}
#pickup_banner .inner ul li .img_box{overflow: hidden;}
#pickup_banner .inner ul li a {color: #000;}
#pickup_banner .inner ul li a p{ margin: 15px 0 0 0; text-align: center;}

@media screen and (max-width: 1000px) {
#pickup_banner .inner{ padding: 40px 0 0; width: 85%; max-width: 700px;}
#pickup_banner .inner ul li{ width: 100%; max-width: 800px; margin: 3vw 0%;}
}/*END*/
/* a hover */
#pickup_banner .inner ul li a{ transition: .5s;}
#pickup_banner .inner ul li a:hover{ opacity: 0.6;}
#pickup_banner .inner ul li a img{ transition: .5s; vertical-align: bottom;}
#pickup_banner .inner ul li a:hover img{ transform: scale(1.05);}


/*-------------------------------------------------
	pickup  ピックアップバナー エリア
--------------------------------------------------*/

#pickup_banner2{ background: #e3e3e3;}
#pickup_banner2 .inner{ margin: 0 auto; padding: 40px 0 0; width: 85%; max-width: 1200px; }
#pickup_banner2 .inner ul{ display: flex; flex-wrap: wrap; justify-content: center; }
#pickup_banner2 .inner ul li{width: 80%; margin: 16px 1.5%; overflow: hidden;}
#pickup_banner2 .inner ul li img{width: 100%;}
#pickup_banner2 .inner ul li .img_box{overflow: hidden;}
#pickup_banner2 .inner ul li a {color: #000;}
#pickup_banner2 .inner ul li a p{ margin: 15px 0 0 0; text-align: center;}

@media screen and (max-width: 1000px) {
#pickup_banner2 .inner{ padding: 40px 0 0; width: 85%; max-width: 700px;}
#pickup_banner2 .inner ul li{ width: 100%; max-width: 800px; margin: 3vw 0%;}
}/*END*/
/* a hover */
#pickup_banner2 .inner ul li a{ transition: .5s;}
#pickup_banner2 .inner ul li a:hover{ opacity: 0.6;}
#pickup_banner2 .inner ul li a img{ transition: .5s; vertical-align: bottom;}
#pickup_banner2 .inner ul li a:hover img{ transform: scale(1.05);}






/*-------------------------------------------------
	contact  お問い合わせ
--------------------------------------------------*/
#contact{ background: #282828; color: #fff; text-align: center;}
#contact .inner{ padding-bottom: 40px; position: relative; width: 80%; max-width: 640px; margin: 0 auto; text-align: left; z-index: 100; mix-blend-mode:normal;}

.co2 #contact .inner{ padding:40px 0 0 0 !important;}
.contact #contact .inner{ padding:0px 0 0 0 !important;}
@media screen and (max-width: 750px) {
#contact .inner{ padding-bottom: 30px; }
#contact .read p{ text-align: left;}
#contact .read p br{ display: none; }
}/*END*/
#contact .read{ width: 85%; max-width:700px; padding: 60px 0 40px; margin: 0 auto; text-align: center; font-size: 16px; line-height: 1.8; font-weight: normal; }
.red{color: #dcff00}
/*form*/
table.contact_table { max-width: 650px; width: 90%; margin: 0 auto;}
table.contact_table td{ padding: 0 0 20px; font-size: 12px;}
#contact .inner  h4{ padding: 20px 0 6px; font-size: 16px; font-weight: 600;}
#contact .inner  h4 sup{font-size: 12px;}
#contact .inner p{ padding: 0px 0 ; font-size: 13px; font-weight: normal!important; }
#contact .inner input[type="text"], 
input[type="password"], 
textarea, 
select { mix-blend-mode:normal; margin: 0 0 8px; padding: 10px !important; box-sizing: border-box;color:#fff;background: #444 ;border: 1px solid #444; outline: none; border-radius: 5px;font-size: 16px; mix-blend-mode: difference; -webkit-appearance: none; transition: .5s;} 


/* select  ▲ ▼ */
.select { position: relative; }
.select select{ width: 100%;}
.select::before { position: absolute; right: 14px; top: 12px; content: ''; display: block; z-index: 200; width: 0; height: 0; border-width: 0 4px 6px 4px; border-style: solid; border-color: transparent transparent #888 transparent; content: ""; pointer-events: none;}
.select::after { position: absolute; right: 14px; top: 22px; content: ''; display: block; z-index: 200; width: 0; height: 0; border-width: 6px 4px 0 4px; border-style: solid; border-color: #888 transparent transparent transparent; content: ""; pointer-events: none;}
/*フォーカス時*/
input:focus,
textarea:focus{box-shadow:0px 0px 3px 1px #dcff00;border:1px solid #dcff00;}
input[type=radio]:focus { box-shadow:none; border:0px solid #000;}


/* radio_box */
.radio_box{ background: #444; padding: 8px 15px; border-radius: 5px;}



.w100{width: 100%;}


/*ボタン*/
input[type="button"],
input[type="submit"] { -webkit-appearance: none; margin-top: 10px; outline: none; }

input[type="submit"].submit,
a.submit{  display: inline-block; font-size: 17px; line-height: 1; letter-spacing: 2px; padding: 20px 50px; min-width: 150px; border-radius: 4px; color: #000; border: none; cursor:pointer; background-color:#dcff00;  font-weight: bold;  line-height: 1; text-decoration: none; transition: 0.3s; }
input[type="submit"].submit:hover,
a.submit:hover{ opacity: 0.6;}
@media screen and ( max-width: 640px) {
input[type="submit"].submit,
a.submit{ display: inline-block; font-size: 16px; padding: 18px 35px; }
}/*END*/
@media screen and ( max-width: 400px) {
input[type="submit"].submit,
a.submit{ display: inline-block; font-size: 15px;  padding: 16px 32px; }
}/*END*/






#contact .submit:hover { background:#dcff00!important; color: #000!important; text-decoration:none;}
#contact .back { display: inline-block; color: #000; background-color: #555; border: solid 2px #555; width: 40%; max-width: 210px;	padding:16px 0; text-align: center; font-size: 16px;	cursor:pointer;	transition: .4s;}
#contact .back:hover {	background-color:#777; border: solid 2px #777;}
#contact textarea{ width: 100%; }
@media screen and (max-width: 750px) {
#contact{ width: 100%; position: relative; }
#contact .inner h2{ font-size: 13.1vw; line-height: 1; font-weight: 600; z-index: 1; text-align: center; }
#contact .inner .read{ text-align: center; font-size: 13px; }
#contact .inner .contact_bar{ background: #c5c0ad; width: 2px; height: 20vw; margin: 10vw auto 30px; }
/*form*/
table.contact_table { max-width: 650px; width: 80%; margin: 0 auto;}
table.contact_table td{ padding: 0 0 20px; font-size: 12px;}
table.contact_table td h4{ padding: 0 0 10px; font-size: 16px; font-weight: 600;}
table.contact_table td h4 sup{font-size: 14px;}
table.contact_table td p{ padding: 0 0 10px; font-size: 12px; font-weight: normal;}
}/*END*/



.form_bottom{ margin-top: 20px; text-align: center;}

/*--------- バリテーション　文字 ----------*/
.error{ padding: 0; margin: 0; height: auto; color: #dcff00; font-weight: normal; }

/*-------確認ページ-------*/
#contact_check{ padding: 100px 0 150px; width:80%; max-width: 650px; margin: 0 auto;}
#contact_check h2{ font-size: 100px; font-weight: 600; line-height: 1; text-align: center;}
#contact_check p.read{ font-size: 16px; line-height: 1.8; text-align: center; padding: 50px 0;}
#contact_check table { width:100%; padding-bottom: 20px;}
#contact_check table td { width:100%; color:#fff; font-size:16px; line-height: 1.6; border-collapse:collapse; padding: 40px 0; border-bottom: solid 2px #333;}
#contact_check table td h4 { font-size: 16px; color: #444; padding: 0 0 3px 0;}
#contact_check input[type="submit"].submit,
#contact_check a.submit {display: inline-block; color: #000; border: solid 2px #f00; background: #c5c0ad; width: 40%; max-width: 210px; padding:16px 0; text-align: center; font-size: 16px; cursor:pointer; transition: .4s; }
#contact_check a.submit { }
@media screen and (max-width: 750px) {
#contact_check{ padding: 15vw 0 15vw; width:80%; max-width: 650px; margin: 0 auto;}
#contact_check h2{ font-size: 13.1vw; font-weight: 600; line-height: 1; text-align: center;}
#contact_check p.read{ font-size: 13px; line-height: 1.8; text-align: center; padding: 5vw 0;}
#contact_check table td { width:100%; color:#fff; font-size:16px; line-height: 1.6; border-collapse:collapse; padding: 30px 0; border-bottom: solid 2px #333;}
}/*END*/
@media screen and (max-width: 450px) {
#contact_check p.read{ font-size: 12px; line-height: 1.8; text-align: center; padding: 5vw 0;}
}/*END*/






/*-------------------------------------------------
	thanks
--------------------------------------------------*/
.thanks{  padding: 50px 0; }
#thanks{ width: 90%; padding: 0px 0; margin: 0 auto; text-align: center; background:#dcff00 !important;}
#thanks .thanks_inner{ width: 90%; max-width: 640px; margin: 0 auto; padding: 80px 0; }
#thanks h1{ text-align: center; font-size: 120px; line-height: 1; font-weight: 400; font-family: 'Wallpoet', cursive; }
#thanks h2{ text-align: center; font-size: 20px; font-weight: bold; }
#thanks .btn{ margin: 50px 0 0 0; }
@media (max-width: 1000px) {
#thanks h1{ text-align: center; font-size: 12vw; }
}/*END*/
@media (max-width: 640px) {
.thanks{ width: 100%; padding: 5vw 0; }
#thanks .thanks_inner{ width: 95%; margin: 0 auto; padding: 60px 5vw; box-sizing: border-box;}
#thanks .thanks_inner p.txt{ display: block; width: 100%; max-width: 400px;  margin: 0 auto; text-align: left;}
}/*END*/




/*-------------------------------------------------
	co2
--------------------------------------------------*/
.co2 h1{ padding: 60px 0 70px;}
@media screen and ( max-width: 1200px) {
.co2 h1{ padding: 70px 0 80px;}
}/*END*/
@media screen and ( max-width: 850px) {
.co2 h1{ padding: 8vw 0 9vw;}
}/*END*/
@media screen and ( max-width: 640px) {
.co2 h1{ padding: 12vw 0 14vw;}
}/*END*/
@media screen and ( max-width: 500px) {
.co2 h1{ padding: 12vw 0 14vw;}
}/*END*/

.co2 h1.title_ja{ font-size: 34px; padding: 0 0 20px; margin: 0; text-align: left; font-family:'メイリオ', 'Meiryo', sans-serif; font-weight: bold;}



/*-------------------------------------------------
	RECORD
--------------------------------------------------*/

.record #games{}
.record #games .games_box{ margin: 0px auto 0; padding: 50px 0 80px; width: 90%; max-width: 1300px; display: flex; justify-content: space-between; }
.record { padding: 10px 0 10px; }

/*-------------------------------------------------
	gallery
--------------------------------------------------*/
#content.gallery{ background: #333;  padding-bottom: 0px; }
#content.gallery .content_inner{ background: #333; color: #fff; padding-bottom: 80px;}
#content.gallery .pankuzu a{ color: #fff;}
#content.gallery .pankuzu li::after{ color: #fff;}
#content.gallery .content_inner .read{ width: 85%; margin: 0 auto; }

.vbox-content img{ max-width: 90vw; max-height: 90vh;}

.vbox-close{ background-color:none !important;}
.vbox-num{ background-color:none !important;}
.vbox-overlay{ background-color:none !important;}


/* button リセット*/

button{ padding: 0; border: none; outline: none; font: inherit;color: inherit; background: none; }




/*-------------------------------------------------
	co
--------------------------------------------------*/
.co_main_img{ width: 95.5%; margin: 0 auto; padding-top: 25px;}

@media screen and ( max-width: 1160px) {
.co_main_img{ width: 95.5%; margin: 0 auto; padding-top: 2.1vw;}
}/*END*/


/*-------------------------------------------------
	co
--------------------------------------------------*/

.challenger #contact { width: 100% !important;}



/*-------------------------------------------------
	topics
--------------------------------------------------*/
#topics{ padding: 30px 0 25px; background: #dcff00  ; }
#topics .inner{ max-width: 900px; width: 90%; margin: 0 auto; }
#topics .inner ul li {padding: 2px 0 13px;display: flex; overflow: hidden;}
#topics .inner ul li.hidden { opacity: 0; height: 0; padding: 0; margin: 0; }
.data{ display: flex; }
#topics a{ color: #000; text-decoration: none;}
#topics a:hover{ color: #000; text-decoration: underline;}
.date p{ margin-top: 5px; font-size: 12px; line-height: 1.5; white-space: nowrap; opacity: 0.9; }
.category p{  margin: 4px 20px ; font-size: 12px; line-height: 1.4; letter-spacing: 1px; text-align: center; width: 102px; padding: 3px 0 1px; background: #000; color: #fff;}
.topics_txt p{ margin-top: 3px; font-size: 14px; line-height: 1.5; }
#topics .topics_button {font-size: 14px; line-height: 1; letter-spacing: 2px; padding: 16px 60px;background: #fff;color: #000;margin: 15px auto ;display: flex; align-items: center;}
#topics .topics_button:hover {background: #000;color: #fff;}
@media (max-width: 1000px){
#topics{ padding: 22px 0 15px; }
#topics .inner{ max-width: 900px; width: 85%; margin: 0 auto; }
#topics .inner ul li{ padding: 4px 0 16px; display: block; }
}/*END*/


.sl_new{ display: block;}
.sl_new span{ margin-bottom: 4px; font-size: 12px; line-height: 1.4; display: inline-block; background: #f00; color: #fff; padding:1px 10px; letter-spacing: 1px; font-family: Arial, Helvetica, sans-serif;}



/*-------------------------------------------------
	event
--------------------------------------------------*/
#event{ padding: 70px 0 50px; text-align: center; color: #fff;}
/*
#event .about_h2{ color: #dcff00; }
*/

#event .inner { margin: 0 auto; padding: 80px 0 0; width: 85%; max-width: 1200px; }
#event .inner ul{ display: flex; justify-content: space-between; flex-wrap: wrap; }
#event .inner ul li{ width: 48%; margin-bottom: 45px; position: relative; }
#event .inner ul li a{  position: relative; }

#event .inner ul li .img_box{ overflow: hidden; position: relative;}
#event .inner ul li a .img_box img{transition: .5s; }
#event .inner ul li a:hover .img_box img{ transform: scale(1.05);opacity: 0.7;}

@media screen and ( max-width: 700px) {
#event{ padding: 10vw 0 10vw; text-align: center; color: #fff;}
#event .inner { margin: 0 auto; padding: 60px 0 0; width: 80%;}
#event .inner ul{ display: block; }
#event .inner ul li{ width: 100%; margin-bottom: 45px; }
}/*END*/



.banner_box{ background: #fff; text-align: center; padding: 80px 0;}
.banner_box a{ color: #000; display: block; width: 90%; max-width: 800px; margin: 0 auto;}
.banner_box a p{ margin-top: 10px;}
.banner_box a p span{ display: inline-block; text-decoration: underline; }
@media screen and (max-width: 640px) {
.banner_box a{ color: #000; display: block; width: 90%; max-width: 550px; margin: 0 auto;}
}/*END*/


.banner_box .pc{ display: block;}
.banner_box .sp{ display: none;}
@media screen and (max-width: 640px) {
.banner_box .pc{ display: none;}
.banner_box .sp{ display: block;}
}/*END*/


.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9のアスペクト比 */
    height: 0;
}

.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}






/*

蛍光イエロー　
#dcff00  
220,255,0

蛍光ブルー　
#00fcff  
0,252,255

*/