﻿@charset "utf-8"; 

html, body{overflow:visible}
#evbest_wrap{background:#110a09 url('../../img/event/bg_evbest.png') repeat-x;overflow:hidden;}
#evbest_wrap .inner{max-width:1120px;margin:0 auto;background: url('../../img/event/bg_evbest_inner.png') no-repeat center top;}
#evbest_wrap .inner img{max-width:100%;display:block;margin:0 auto;}
.evbest_top{position:relative;background: url('../../img/event/bg_evbest_top.png') no-repeat center top;}
.evbest_top .top_gif{position:absolute;left:9%;top:16%;}
.circle_wrap01 span{position:absolute;top:0;left:0;width:100%; height:100%;opacity: 0; animation: lightani 0.5s infinite alternate;}
.circle_wrap02 span{position:absolute;bottom:0;left:0;width:100%;height:100%; opacity: 0; animation: lightani 0.5s infinite alternate;z-index:1;}
.circle_wrap02 .visual{position:absolute;bottom:0;left:0;width:100%;height:100%;background: url('../../img/event/img_evbest_visual.png') no-repeat center bottom / 100% auto;z-index:2;}
.circle_wrap01 span:nth-child(1) {background: url('../../img/event/img_evbest_circle01-1.png') no-repeat center top / 100% auto;}
.circle_wrap01 span:nth-child(2) {background: url('../../img/event/img_evbest_circle01-2.png') no-repeat center top / 100% auto; animation-delay: 0.5s;}
.circle_wrap02 span:nth-child(1) {background: url('../../img/event/img_evbest_circle02-1.png') no-repeat center bottom / 100% auto;}
.circle_wrap02 span:nth-child(2) {background: url('../../img/event/img_evbest_circle02-2.png') no-repeat center bottom / 100% auto;animation-delay: 0.5s;}
.circle_wrap02 span:nth-child(3) {background: url('../../img/event/img_evbest_circle02-3.png') no-repeat center bottom / 100% auto; animation-delay: 1s;}
.evbest_prd-wrap{padding:0 0 120px;background: url('../../img/event/img_evbest_circle03.png') no-repeat center top / 100% auto;text-align:center;z-index:2}
.evbest_prd-wrap div{text-align:center;}
.evbest_prd-wrap .txt-img{display:block;margin:120px auto 90px !important;}
.evbest_prd-wrap a{display:block;margin-top:90px;}
.evbest_prd-wrap a + a{margin-top:60px;}
.evbest_notice-wrap{padding:150px 0 120px;}

@keyframes lightani {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

canvas#canvas {
    position:absolute;
    height:100px;
    top:0;
    left:0;
    display: block;
    z-index:1;
}

@media screen and (max-width:1120px){
    #evbest_wrap .inner{padding:0 20px;}
    .evbest_prd-wrap,
    .evbest_notice-wrap{padding:0 0 10.71vw;}
    .evbest_prd-wrap .txt-img{margin:10.71vw auto 8.04vw !important;}
    .evbest_prd-wrap a{margin-top:8.04vw;}
    .evbest_prd-wrap a + a{margin-top:4.46vw;}
}
