/* indexBox */
#indexBox{position: fixed;width: 100%;height: 100%;background: rgba(0, 0, 0, .7);top: 0;left: 0;z-index: 999;}
#indexBox #adboxrow{position: relative;margin: 15vh auto 0;width: 33%;  background: url(/images/02/adbig.jpg) no-repeat 50% / cover;}
#indexBox #adboxrow a#closePop{position: absolute;width: 30px;height: 30px; background: #36b13a; border-radius: 50%;  text-align: center;line-height: 30px;color: #fff; top: -15px;right:-6px;}

#newsBox .titleBox, #lookfor .titleBox, #youtubeBox .titleBox{ margin-bottom: 30px; border-bottom: 0; }
#newsBox .titleBox h4, #lookfor .titleBox h4, #youtubeBox .titleBox h4{ text-align: center; font-size: 26px; }
#lookfor .titleBox h4{    margin-top: 40px;}

/* newsBox */
#newsBox ul li .info p a{margin-top: 5px;padding: 5px 0;background-color: #ea7e00;display: block;text-align: center;color: #fff;line-height: 100%;}
#newsBox ul .slick-prev, #newsBox ul .slick-next{ width: 40px; height: 40px; background-color: #14191d; line-height: 15px; }
#newsBox ul .slick-prev{ left: -65px; }
#newsBox ul .slick-prev:before{ content: '<'; }
#newsBox ul .slick-next{ right: -65px; }
#newsBox ul .slick-next:before{ font-weight: bold; content: '>'; }
#newsBox ul li {margin: 10px;box-shadow: 0 0 5px rgb(0 0 0 / 0.15);}
#newsBox ul li .newImg { margin: 0; }
#newsBox ul li .info {overflow: hidden;padding: 20px;margin: 0;}
#newsBox ul li .info .left{ width: calc(100% - 80px); display: inline-block; vertical-align: bottom; }
#newsBox ul li .info .right{ width: 75px; display: inline-block; vertical-align: bottom; `}
#newsBox ul li .info .right p { text-align: right; }
#newsBox ul li .info .right p b{ margin-top: 5px; padding: 6.5px 0; background-color: #3a3a3a; display: block; text-align: center; font-size: 14px; font-weight: normal; color: #fff; }
#newsBox ul li .info h3 a{font-size: 19px;font-weight: bold;}
#newsBox ul li .info .left p {font-size: 14px;margin-top: 6px;}
#newsBox ul li .info .left article{
    color: #8c8c8c;
    font-size: 13px;
}
#newsBox ul li .info h3 b {font-size: 12px;font-weight: normal;color: #afafb0;margin-left: 5px;}
#newsBox ul li .info .left p b{ margin-left: 5px; font-size: 35px; color: #cd1627; }
#newsBox ul li .newImg a.photo { background-size: cover; background-position: 50% 50%; }

/* lookfor */
#lookfor{ margin-bottom: 50px; }
#lookfor .more, #latest .more{
    text-align: center;
    margin-top: 40px;
}
#lookfor .more a, #latest .more a{
    display: inline-block;
    background: #36b13a;
    color: #fff;
    padding: 15px 50px;
}
#lookfor .more a:hover, #latest .more a:hover{background: #2a903a;}
#lookfor .chooses{ text-align: center; margin-bottom: 30px; }
#lookfor .chooses select{ padding: 7px; border-radius: 5px; }
#lookfor ul{ overflow: hidden; }
#lookfor ul li{float: left;width: calc((100%/5) - 60px);background-color: #f8f9f9;margin: 10px;padding: 20px;position: relative;}
#lookfor ul li .seemore{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    -webkit-transition: all 0.6s linear;
    -o-transition: all 0.6s linear;
    transition: all 0.6s linear;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(80px);
    opacity: 0;
}
#lookfor ul li:hover .seemore{
    transform: translateY(0);
    opacity: 1;}
#lookfor ul li .seemore a{
    display: block;
    text-align: center;
    background: #36b13a;
    color: #fff;
    padding: 7px 0;
}
#lookfor ul li a.photo{ background-size: cover; }
#lookfor ul li .top{ overflow: hidden; }
#lookfor ul li .top .newImg{ float: left; width: 60px; }
#lookfor ul li .top .textt{ float: right; width: calc(100% - 75px); }
#lookfor ul li .top .textt h3 a{color: #14191d;font-size: 20px;display: block;line-height: 100%;overflow: hidden;height: 20px;}
#lookfor ul li .top .textt p{ color:#4e4f50; font-size: 14px; }
#lookfor ul li .info{ margin-top: 10px; }
#lookfor ul li .info .law{ text-align: center; }
#lookfor ul li .info article{
    color: #8c8c8c;
    font-size: 13px;
    text-align: center;
}
#lookfor ul li .info .law b{font-size: 50px;color: #ce1b2b;display: block;line-height: 50px;text-align: center;font-family: 'Roboto', sans-serif;}
#lookfor ul li .info .law b span{
    color: #000;
    vertical-align: bottom;
}
#lookfor ul li .info .attention{ margin: 5px 0; }
#lookfor ul li .info .attention b{ display: block; background-color: #3a3a3a; text-align: center; padding: 5px 0; color: #fff; font-weight: normal; }
#lookfor ul li .info .attention a{ display: block; background-color: #ea7e00; text-align: center; padding: 5px 0; color: #fff; }
#lookfor ul li .info .fan{ text-align: center; font-size: 12px; color: #606162; }

/* latest */
#latest{ margin-bottom: 100px; }
#latest .titleBox, #competition .titleBox{ position: relative; border-bottom: 0; }
#latest .titleBox h4{font-size: 26px;text-align: center;background-color: #f3f0f0;padding: 7px 0;}
#latest .titleBox a{background-color: #16b13a;color: #fff;position: absolute;top: 0;right: 0;padding: 15px 45px;}
#latest ul li { padding: 15px; border-bottom: 1px solid #f3f0f0; overflow: hidden; position: relative; }
#latest ul li:hover{background: #f9f9f9;}
#latest ul li .left{ float: left; width: 75%; }
#latest ul li .left .lateimg{
    overflow: hidden;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    float: left;
    width: 105px;
    margin-right: 20px;
    position: relative;
}
#latest ul li .left .lateimg p{
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 1;
    color: #a7a7a7;
    display: inline-block;
    padding: 0 5px;
    font-size: 12px;
    border: 1px solid #a7a7a7;
    border-radius: 5px;
    line-height: 150%;
}
#latest ul li .left .latetext{
    float: left;
    width: calc(100% - 125px);
}
#latest ul li article{padding-left: 10px;line-height: 100%;position: relative;}
#latest ul li article:after{content:'';position:absolute;width: 3px;height: 20px;background: #36b13a;top: 7px;left: 0;}
#latest ul li article a{
    color: #656565;
}
#latest ul li .right{ position: absolute; right: 15px; bottom: 22px; width: 20%; text-align: end; }
#latest ul li .right p{ display: inline-block; margin-left: 10px; }
#latest ul li .right p a{background-color: #333334;color: #fff;padding: 4.5px 20px;font-size: 12px;border-radius: 5px;display: inline-block;vertical-align: middle;}
#latest ul li:hover .right p a{background:#16b13a;}
#latest ul li .left h3{ font-size: 20px; }
#latest ul li:hover .left h3{color:#16b13a;}
#latest ul li .left .latetext p{color:#524f4f;overflow: hidden;height: 45px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: 16px;line-height: 140%;}
#latest ul li:hover .left .latetext p{opacity:.7;}

/* youtubeBox */
#youtubeBox {padding: 50px 0;background-image: url(/images/02/index-live-bg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;margin-bottom: 50px;display: none;}
#youtubeBox .slick-prev {
    height: 125px;
    background: #2f2f2f;
    width: 30px;
    left: -30px;
    z-index: 99;
}
#youtubeBox .slick-prev:before{content: '<';font-family: 'Roboto', sans-serif !important;color: #fff;opacity: 1;}
#youtubeBox .slick-next {
    height: 125px;
    background: #2f2f2f;
    width: 30px;
    right: -30px;
    z-index: 99;
}
#youtubeBox .slick-next:before{content: '>';font-family: 'Roboto', sans-serif !important;color: #fff;opacity: 1;}
#youtubeBox ul li {
    padding: 15px;
    border-bottom: 5px solid #36b23a;
    background: #fafafa;
    margin: 10px;
    box-shadow: 0 0 5px rgb(0 0 0 / 10%);
}
#youtubeBox ul li .date{
    overflow: hidden;
}
#youtubeBox ul li .date p {
    color: #616161;
    font-size: 14px;
    float: left;
}
#youtubeBox ul li .date p.seelive {
    float: right;
}
#youtubeBox ul li .date p.seelive a{
    color: #36b23a;
}
#youtubeBox ul li .gameteam{
    overflow: hidden;
}
#youtubeBox ul li .gameteam .left{
    display: inline-block;


    width: calc(100% - 40px);
}
#youtubeBox ul li .gameteam .left p{}
#youtubeBox ul li .gameteam .left p img{
    width: 30px;
    display: inline-block;
    margin-right: 10px;
}
#youtubeBox ul li .gameteam .right{
    display: inline-block;
    width: 35px;
    text-align: center;
}
#youtubeBox ul li .gameteam .right h3{
    font-size: 25px;
    display: inline-block;
    font-family: 'Roboto', sans-serif !important;
}
#competition{
    margin-bottom: 50px;
}
#competition .titleBox h4{text-align: center;}
#gameul{border: 1px solid #e6e6e6;}
#gameul li{
    padding: 15px;
    border-bottom: 1px solid #e6e6e6;
    overflow: hidden;
}
#gameul li .left{float: left;width: calc(100% - 170px);}
#gameul li .left h3{
    display: inline-block;
    vertical-align: text-bottom;
    font-size: 16px;
    line-height: 100%;
    width: calc(100% - 302px);
    text-align: center;
    border-left: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
}
#gameul li .left p{
    display: inline-block;
    vertical-align: text-bottom;
    font-size: 15px;
    line-height: 100%;
    width: 150px;
    text-align: center;
}
#gameul li .right{float: right;width: 170px;}
#gameul li .right a{
    color: #fff;
    background: #ce1b2b;
    font-size: 18px;
    text-align: center;
    display: block;
    animation: blink 0.5s infinite alternate ease-in-out;
    -webkit-animation: blink 0.5s infinite alternate ease-in-out;
    -moz-animation: blink 0.5s infinite alternate ease-in-out;
    -ms-animation: blink 0.5s infinite alternate ease-in-out;
    -o-animation: blink 0.5s infinite alternate ease-in-out;
}
@keyframes blink {
	0% { background: #ce1b2b;}
	100% { background: #b10303;  }
}

@-webkit-keyframes blink {
	0% { background: #ce1b2b;}
	100% { background: #b10303;  }
}

@-moz-keyframes blink {
	0% { background: #ce1b2b;}
	100% { background: #b10303;  }
}

@-ms-keyframes blink {
	0% { background: #ce1b2b;}
	100% { background: #b10303;  }
}

@-o-keyframes blink {
	0% { background: #ce1b2b;}
	100% { background: #b10303;  }
}
#gt2{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 5px;
    -webkit-appearance: none;
    background: url(/images/02/arrow.png) no-repeat scroll 98% center transparent;
    background-repeat: no-repeat;
    background-position: 95% 50%;
    padding: 8px 8px;
    width: 250px;
}
#competition .chooses{
    text-align: center;
    margin: 40px 0;
}


@media screen and (max-width: 1024px) {
	#lookfor ul li .top .newImg{ float: none; width: 100%; }
	#lookfor ul li .top .textt{ float: none; width: 100%; margin-top: 5px; }
	#lookfor ul li .top .textt h3 a{ text-align: center; }
	#lookfor ul li .top .textt p{ text-align: center; }
	#newsBox ul .slick-next{ right: -10px; z-index: 2; }
	#newsBox ul .slick-prev{ left: -10px; z-index: 2; }
	#lookfor ul li .info .law b{ font-size: 40px; }
}
@media screen and (max-width: 768px) {
	#newsBox ul li .info h3 b{ display: block; margin: 0; }
	#lookfor ul li{ width: calc((100%/2) - 60px); }
	#latest ul li .right p{ display: block; margin: 5px 0 0; }
	#latest ul li .right p a{ display: block; text-align: center; }
	#gameul li .left p, #gameul li .left h3{
    vertical-align: middle;
}
}
@media screen and (max-width: 640px) {
	#latest ul li .left h3 { line-height: 130%;}
	#newsBox ul li .info .left{ display: block; width: 100%; }
	#newsBox ul li .info{ padding: 15px; }
	#newsBox ul li .info .right{ display: block; width: 100%; }
	#newsBox ul li .info .right p{text-align:center}
	#newsBox ul .slick-prev, #newsBox ul .slick-next{ width: 25px; height: 25px; line-height: 9px; }
	#newsBox ul .slick-next:before, #newsBox ul .slick-prev:before{ font-size: 15px; }
	#newsBox ul li{ margin: 5px; }
	#lookfor ul li{margin: 5px;width: calc((100%/1) - 30px);display: flex;flex-direction: column;align-items: flex-end;padding: 15px;}
	#lookfor ul li .top{display:flex;flex-wrap: wrap;justify-content: flex-end;width: 65%;}
	#lookfor ul li .top .newImg{width: 28%;border-radius: 50%;overflow: hidden;position: absolute;left: 10px;}
	#lookfor ul li .top .textt{width: 100%;margin: 0;}
	#lookfor ul li .seemore{position:relative;opacity: 1;transform: translateY(0);width: 65%;}
	#lookfor ul li .seemore a{font-size: 14px;padding: 2px 0;border-radius: 5px;}
	#lookfor ul li .top .textt h3 a, #lookfor ul li .top .textt p{text-align: left;}
	#lookfor ul li .top .textt p{margin-top: 5px;line-height: 100%;}
	#lookfor ul li .info{display:flex;flex-wrap: wrap;align-items: center;width: 65%;justify-content: flex-start;margin-top: 0;}
	#lookfor ul li .info .law{display:flex;align-items: center;flex-wrap: wrap;font-size: 17px;}
	#lookfor ul li .info article{display:none;}
	#lookfor ul li .info .fan{margin-left: 6px;}
	#lookfor ul li .info .law b{font-size: 17px;line-height: 150%;}
	#lookfor ul li .info .law b span{font-size: 13px;}
	#latest .titleBox a, #competition .titleBox a{ position: relative; display: block; text-align: center; padding: 5px 0; }
	#latest ul li .left{float: none; width: 100%}
	#latest ul li .left .lateimg, #latest ul li .left .latetext{width: 100%;margin: 0;float: none;}
	#latest ul li .left .lateimg img{width: 100%}
	#latest ul li .right{position: relative;right: 0;bottom: 0;width: 100%;text-align: left;}
    #latest ul li .right p{
    margin: 0 10px 0 0;
}
    #indexBox #adboxrow{width: 80%;}
    #youtubeBox ul li {
    margin: 10px 20px;
}
#youtubeBox .slick-prev{
    left: -15px;
}
#youtubeBox .slick-next{
    right: -15px;
}
#gameul li .left p, #gameul li .left h3{
    display: block;
    width: 100%;
    margin: 10px 0;
    FONT-VARIANT: JIS04;
    FONT-VARIANT: JIS04;
}
#gameul li .left, #gameul li .right{
    float: none;
    width: 100%;
    text-align: center;
}
#gameul li .right a{
    background: #e91e1e;
    color: #fff;
    display: inline-block;
    padding: 0 20px;
    animation: blink 0.5s infinite alternate ease-in-out;
    -webkit-animation: blink 0.5s infinite alternate ease-in-out;
    -moz-animation: blink 0.5s infinite alternate ease-in-out;
    -ms-animation: blink 0.5s infinite alternate ease-in-out;
    -o-animation: blink 0.5s infinite alternate ease-in-out;
}
@keyframes blink {
	0% { background: #f00;}
	100% { background: #b10303;  }
}

@-webkit-keyframes blink {
	0% { background: #f00;}
	100% { background: #b10303;  }
}

@-moz-keyframes blink {
	0% { background: #f00;}
	100% { background: #b10303;  }
}

@-ms-keyframes blink {
	0% { background: #f00;}
	100% { background: #b10303;  }
}

@-o-keyframes blink {
	0% { background: #f00;}
	100% { background: #b10303;  }
}
}