@charset "utf-8";

/*
 mainTtl
============================================= */
.bg_area{
  position:relative;
  height:410px;
  background:url(https://r.r10s.jp/evt/event/rankingyearly/2020/_pc/img/top/main_visual/pc_bg.png) center top no-repeat #da496e;
}
.pc_title{
  position:relative;
  width:950px;
  height:410px;
  text-align:center;
  margin:0 auto;
}
.pc_title:before,
.pc_title:after{
  content:'';
  display:block;
  height:100%;
  position:absolute;
}
.pc_title:before{
  background:url(https://r.r10s.jp/evt/event/rankingyearly/2020/_pc/img/top/main_visual/main_ttl_bg_left.jpg) repeat-x right top;
  padding-left:500%;
  margin-left:-500%;
  top:0;
  left:-365px;
}
.pc_title:after{
  background:url(https://r.r10s.jp/evt/event/rankingyearly/2020/_pc/img/top/main_visual/main_ttl_bg_right.jpg) repeat-x right top;
  padding-right:500%;
  margin-right:-500%;
  top:0;
  right:-365px;
}
.bg_area .mainTtlLead{
  width: 950px;
  font-size:18px;
  text-align:center;
  line-height:1.555;
  color:#ffffff;
  display: block;
  position: absolute;
  bottom: 10px;
  left:50%;
  margin-left:-475px;
}
.pc_title_animation{
  width:1680px;
  height:410px;
  position:absolute;
  top:0;
  left:50%;
  margin-left:-840px;
}
.box-shadow{
  box-shadow:0px 3px 10px rgba(221, 114, 25, .8)
}
.drop-shadow{
  -webkit-filter:drop-shadow(0px 3px 10px rgba(221, 114, 25, .8));
  -moz-filter:drop-shadow(0px 3px 10px rgba(221, 114, 25, .8));
  filter:drop-shadow(0px 0px 10px rgba(221, 114, 25, .8));
}
.tamaboke_1{
  position:absolute;
  top:25px;
  left:525px;
  animation:img_box_burst 3s ease-in-out infinite;
  animation-delay:0s;
  transform-origin:50% 50%;
  margin:1rem 0 !important;
  opacity:0;
}
@keyframes img_box_burst{
  0%{
    opacity:0
  }
  33.33333%{
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
    transform:translateX(-10px) translateY(-10px);
    opacity:1
  }
  66.66667%{
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
    transform:translateX(-20px) translateY(-20px);
    opacity:.8
  }
  100%{
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
    transform:translateX(-20px) translateY(-20px);
    opacity:0
  }
}
.tamaboke_2{
  position:absolute;
  top:120px;
  left:435px;
  animation:img_box_burst2 3s ease-in-out infinite;
  animation-delay:2s;
  transform-origin:25% 25%;
  margin:1rem 0 !important;
  opacity:0;
}
@keyframes img_box_burst2{
  0%{
    opacity:0
  }
  33.33333%{
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
    transform:translateX(-10px);
    opacity:.5
  }
  66.66667%{
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
    transform:translateX(-20px);
    opacity:1
  }
  100%{
    opacity:0
  }
}
.tamaboke_3{
  position:absolute;
  top:10px;
  left:1025px;
  animation:img_box_burst3 5s ease-in infinite;
  animation-delay:1s;
  transform-origin:0% 50%;
  margin:1rem 0 !important;
  opacity:0;
}
@keyframes img_box_burst3{
  0%{
    opacity:.2
  }

  20%{
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
    transform:translateY(-10px);
    opacity:0
  }

  40%{
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
    transform:translateY(-20px);
    opacity:.8
  }

  100%{
    transform:scale(1.2);
    transform:scale(1.2);
    transform:translateY(-20px);
    opacity:0
  }
}
.tamaboke_4{
  position:absolute;
  top:175px;
  left:1135px;
  animation:img_box_burst4 4s ease-in-out infinite;
  animation-delay:3s;
  transform-origin:25% 25%;
  margin:1rem 0 !important;
  opacity:0;
}
@keyframes img_box_burst4{
  0%{
    opacity:0
  }
  25%{
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
    opacity:.6
  }
  50%{
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
    transform:translateX(20px) translateY(20px);
    opacity:.5
  }
  100%{
    opacity:0
  }
}
.tamaboke_5{
  position:absolute;
  top:310px;
  left:550px;
  animation:img_box_burst5 5s linear infinite;
  animation-delay:2s;
  transform-origin:50% 50%;
  margin:1rem 0 !important;
  opacity:0;
}
@keyframes img_box_burst5{
  0%{
    transform:translateX(0);
    opacity:0
  }
  20%{
    transform:translateX(-10px);
    opacity:1
  }
  40%{
    transform:translateX(-20px);
    opacity:1
  }
  100%{
    transform:translateX(-25px);
    opacity:0
  }
}
.tamaboke_6{
  position:absolute;
  top:205px;
  left:1060px;
  animation:img_box_burst6 4s ease-in-out infinite;
  animation-delay:1s;
  transform-origin:50% 25%;
  margin:1rem 0 !important;
  opacity:0;
}
@keyframes img_box_burst6{
  0%{
    opacity:0
  }
  25%{
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
    transform:translateX(10px);
    opacity:.5
  }
  50%{
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
    transform:translateX(20px);
    opacity:1
  }
  100%{
    opacity:0
  }
}
.tamaboke_7{
  position:absolute;
  top:-10px;
  left:590px;
  animation:img_box_burst7 3s ease-in-out infinite;
  animation-delay:0s;
  transform-origin:50% 50%;
  margin:1rem 0 !important;
  opacity:0;
}
@keyframes img_box_burst7{
  0%{
    opacity:0
  }
  33.33333%{
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
    transform:translateX(-10px) translateY(-10px);
    opacity:1
  }
  66.66667%{
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
    transform:translateX(-20px) translateY(-20px);
    opacity:1
  }
  100%{
    opacity:0
  }
}
.tamaboke_8{
  position:absolute;
  top:235px;
  left:420px;
  animation:img_box_burst8 5s ease-in-out infinite;
  animation-delay:2s;
  transform-origin:25% 25%;
  margin:1rem 0 !important;
  opacity:0;
}
@keyframes img_box_burst8{
  0%{
    opacity:0
  }
  20%{
    -webkit-transform:scale(1.0);
    transform:scale(1.0);
    transform:translateX(-10px);
    opacity:.5
  }
  40%{
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
    transform:translateX(-20px);
    opacity:.9
  }
  100%{
    opacity:0
  }
}
.tamaboke_9{
  position:absolute;
  top:10px;
  left:215px;
  animation:img_box_burst9 4s ease-in-out infinite;
  animation-delay:5s;
  transform-origin:25% 25%;
  margin:1rem 0 !important;
  opacity:0;
}
@keyframes img_box_burst9{
  0%{
    opacity:0
  }
  25%{
    -webkit-transform:scale(0.8);
    transform:scale(0.8);
    transform:translateX(10px) translateY(10px);
    opacity:.6
  }
  50%{
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
    transform:translateX(20px) translateY(20px);
    opacity:.8
  }
  100%{
    opacity:0
  }
}
.tamaboke_10{
  position:absolute;
  top:315px;
  left:970px;
  animation:img_box_burst10 5s linear infinite;
  animation-delay:3s;
  transform-origin:50% 50%;
  margin:1rem 0 !important;
  opacity:0;
}
@keyframes img_box_burst10{
  0%{
    transform:translateX(0);
    opacity:0
  }
  25%{
    transform:translateX(10px) translateY(10px);
    opacity:1
  }
  50%{
    transform:translateX(20px) translateY(20px);
    opacity:1
  }
  100%{
    transform:translateX(20px) translateY(20px);
    opacity:0
  }
}
.tamaboke_11{
  position:absolute;
  top:80px;
  left:450px;
  animation:img_box_burst11 7s ease-in-out infinite;
  animation-delay:1s;
  transform-origin:50% 50%;
  margin:1rem 0 !important;
  opacity:0;
}
@keyframes img_box_burst11{
  0%{
    transform:scale(0.8);
    transform:scale(0.8);
    transform:translateX(50%) translateY(50%);
    opacity:0
  }
  25%{
    transform:scale(0.8);
    transform:scale(0.8);
    transform:translateX(0%) translateY(0%);
    opacity:1
  }
  50%{
    transform:scale(0.8);
    transform:scale(0.8);
    transform:translateX(-100%) translateY(-100%);
    opacity:1
  }
  100%{
    transform:scale(0.8);
    transform:scale(0.8);
    transform:translateX(-100%) translateY(-100%);
    opacity:0
  }
}
.tamaboke_12{
  position:absolute;
  top:140px;
  left:1195px;
  animation:img_box_burst12 3s linear infinite;
  animation-delay:0s;
  transform-origin:50% 50%;
  margin:1rem 0 !important;
  opacity:0;
}
@keyframes img_box_burst12{
  0%{
    transform:translateX(-50%) translateY(50%);
    opacity:0
  }
  25%{
    transform:translateX(0%) translateY(0%);
    opacity:1
  }
  75%{
    transform:translateX(50%) translateY(-50%);
    opacity:.5
  }
  100%{
    transform:translateX(50%) translateY(-50%);
    opacity:0
  }
}
.tamaboke_13{
  position:absolute;
  top:350px;
  left:675px;
  animation:img_box_burst13 5s linear infinite;
  animation-delay:2s;
  transform-origin:25% 25%;
  margin:1rem 0 !important;
  opacity:0;
}
@keyframes img_box_burst13{
  0%{
    transform:translateX(50%) translateY(-50%);
    opacity:0
  }
  20%{
    transform:translateX(0%) translateY(0%);
    opacity:.8
  }
  40%{
    transform:translateX(-50%) translateY(50%);
    opacity:.6
  }
  100%{
    transform:translateX(-50%) translateY(50%);
    opacity:0
  }
}
.tamaboke_14{
  position:absolute;
  top:340px;
  left:920px;
  animation:img_box_burst14 5s linear infinite;
  animation-delay:2s;
  transform-origin:100% 100%;
  margin:1rem 0 !important;
  opacity:0;
}
@keyframes img_box_burst14{
  0%{
    opacity:0
  }
  25%{
    transform:translateY(10px);
    opacity:.5
  }
  50%{
    transform:translateY(20px);
    opacity:.7
  }
  100%{
    transform:translateY(20px);
    opacity:0
  }
}
.tamaboke_15{
  position:absolute;
  top:190px;
  left:1135px;
  animation:img_box_burst15 5s linear infinite;
  animation-delay:3s;
  transform-origin:50% 50%;
  margin:1rem 0 !important;
  opacity:0;
}
@keyframes img_box_burst15{
  0%{
    transform:translateX(0);
    opacity:0
  }

  33.33333%{
    transform:translateX(10px) translateY(10px);
    opacity:1
  }

  66.66667%{
    transform:translateX(40px) translateY(20px);
    opacity:.5
  }

  100%{
    transform:translateX(40px) translateY(20px);
    opacity:0
  }
}
.tamaboke_16{
  position:absolute;
  top:15px;
  left:470px;
  animation:img_box_burst16 5s linear infinite;
  animation-delay:0s;
  transform-origin:50% 50%;
  margin:1rem 0 !important;
  opacity:0;
}
@keyframes img_box_burst16{
  0%{
    transform:translateX(50%) translateY(50%);
    opacity:0
  }
  25%{
    transform:translateX(0%) translateY(0%);
    opacity:1
  }
  50%{
    transform:translateX(-50%) translateY(-50%);
    opacity:.5
  }
  100%{
    transform:translateX(-50%) translateY(-50%);
    opacity:0
  }
}
.tamaboke_17{
  position:absolute;
  top:340px;
  left:800px;
  animation:img_box_burst17 6s linear infinite;
  animation-delay:4s;
  transform-origin:25% 25%;
  margin:1rem 0 !important;
  opacity:0;
}
@keyframes img_box_burst17{
  0%{
    transform:translateY(0%);
    opacity:0
  }
  20%{
    transform:translateY(50%);
    opacity:1
  }
  40%{
    transform:translateY(100%);
    opacity:.5
  }
  100%{
    transform:translateY(100%);
    opacity:0
  }
}
.tamaboke_18{
  position:absolute;
  top:205px;
  left:1075px;
  animation:img_box_burst18 6.5s linear infinite;
  animation-delay:1s;
  transform-origin:100% 100%;
  margin:1rem 0 !important;
  opacity:0;
}
@keyframes img_box_burst18{
  0%{
    transform:translateX(-50%);
    opacity:0
  }
  33.33333%{
    transform:translateX(0%);
    opacity:1
  }
  66.66667%{
    transform:translateX(50%);
    opacity:.5
  }
  100%{
    transform:translateX(50%);
    opacity:0
  }
}
.tamaboke_19{
  position:absolute;
  top:15px;
  left:770px;
  animation:img_box_burst19 5s ease infinite;
  animation-delay:0.5s;
  transform-origin:100% 100%;
  margin:1rem 0 !important;
  opacity:0;
}
@keyframes img_box_burst19{
  0%{
    transform:translateY(0);
    opacity:0
  }
  33.33333%{
    transform:translateY(-75%);
    opacity:.8
  }
  66.66667%{
    transform:translateY(-125%);
    opacity:.8
  }
  100%{
    transform:translateY(-150%);
    opacity:0
  }
}
.tamaboke_20{
  position:absolute;
  top:280px;
  left:520px;
  animation:img_box_burst20 6.5s linear infinite;
  animation-delay:3.5s;
  transform-origin:25% 25%;
  margin:1rem 0 !important;
  opacity:0;
}

@keyframes img_box_burst20{
  0%{
    transform:translateX(0%);
    opacity:0
  }
  20%{
    transform:translateX(-50%);
    opacity:1
  }
  40%{
    transform:translateX(-100%);
    opacity:.5
  }
  100%{
    transform:translateX(-100%);
    opacity:0
  }
}


/*
 overall
===================================================== */
.overall{
  background:url(https://r.r10s.jp/evt/event/rankingyearly/2020/_pc/img/cmn/bg/con_bg01.jpg) no-repeat center top #e5a865;
  width:100%;
  margin:0 -500%;
  padding:20px 500% 80px;
  overflow:hidden;
}
.overallInner{
  width:950px;
  position:relative;
}
.overall .balloonLeft{
  display:block;
  width:182px;
  height:307px;
  position:absolute;
  top:10px;
  left:-52px;
  -webkit-animation:float_1333 3s linear infinite;
  animation:float_1333 3s linear infinite;
  -webkit-transform-origin:50% 50%;
  transform-origin:50% 50%;
}
@keyframes float_1333 {
  0% { transform:translateY(0) }
  33.33333% { transform:translateY(-20px) }
  66.66667% { transform:translateY(0) }
  100% { transform:translateY(0) }
}
.overall .balloonRight{
  display:block;
  width:281px;
  height:482px;
  position:absolute;
  top:-138px;
  right:-85px;
  -webkit-animation:float_1808 3s linear infinite;
  animation:float_1808 3s linear infinite;
  -webkit-transform-origin:50% 50%;
  transform-origin:50% 50%;
}
@keyframes float_1808 {
  0% { transform:translateY(0) }
  50% { transform:translateY(-30px) }
  100% { transform:translateY(0) }
}


/* rankWrap */
.overall .rankWrap{margin-top:-26px;}
.overall .rankBigLink{
  display:block;
  color:#333333!important;
  position:relative;
  overflow:visible;
}
.overall .rankBigLink:hover img{opacity:1!important;}

.overall .rankBox .rankBigLink:hover .rankItemImg .imageBase{
  background-position:left bottom;
  -webkit-filter:drop-shadow(10px 10px 10px rgba(255, 255, 255, .3));
  -moz-filter:drop-shadow(10px 10px 10px rgba(255, 255, 255, .3));
  filter:drop-shadow(10px 10px 10px rgba(255, 255, 255, .3));
}

.overall .rankBox .rankItemImg .imageBase{
  display:block;
  position:relative;
  z-index:100;
  width:100%;
  height:100%;
  overflow:visible;
}
.overall .rankBox .rankItemImg .rankItemImg{
  display:block;
  width:100%;
  height:100%;
  position:relative;
  z-index:10;
}
.overall .rankBox._01 .rankItemImg .imageBase{
  width:400px;
  padding-top:400px;
  background:url(https://r.r10s.jp/evt/event/rankingyearly/2020/_cmn/img/top/overall/overall_item01.png) no-repeat left top;
}
/* IE Edge */
_:-ms-lang(x), .rankBox._01 .rankItemImg:before{
  position: absolute;
  content: "";
  display:block;
  width: 400px;
  height: 400px;
  left: 20px;
  bottom: 0px;
  background: url(https://r.r10s.jp/evt/event/rankingyearly/2020/_pc/img/top/hover_01.png) no-repeat left top;
  z-index:-1;
}
_:-ms-lang(x), .rankBox._01 .rankItemImg:hover:after{
  position: absolute;
  content: "";
  display:block;
  width: 400px;
  height: 400px;
  left: 20px;
  bottom: 0px;
  background: url(https://r.r10s.jp/evt/event/rankingyearly/2020/_pc/img/top/hover_01.png) no-repeat left top;
  z-index:50;
}

.overall .rankBox._02 .rankItemImg .imageBase{
  width:221px;
  padding-top:221px;
  background:url(https://r.r10s.jp/evt/event/rankingyearly/2020/_cmn/img/top/overall/overall_item02.png) no-repeat left top;
  -webkit-background-size: 221px auto;
  -moz-background-size: 221px auto;
  background-size: 221px auto;
}
/* IE Edge */
_:-ms-lang(x), ._2col .rankBox .rankItemImg:after{
	position:absolute;
	content:"";
	width:221px;
	height:221px;
	left:0;
	bottom:0;	
  background: url(https://r.r10s.jp/evt/event/rankingyearly/2020/_pc/img/top/hover_under.png) no-repeat left top;
  z-index:-1;
}
_:-ms-lang(x), ._2col .rankBox .rankItemImg:hover:after{
	position:absolute;
	content:"";
	width:221px;
	height:221px;
	left:0;
	bottom:0;	
  background: url(https://r.r10s.jp/evt/event/rankingyearly/2020/_pc/img/top/hover_under.png) no-repeat left top;
  z-index:50;
}

.overall .rankBox._03 .rankItemImg .imageBase{
  width:221px;
  padding-top:221px;
  background:url(https://r.r10s.jp/evt/event/rankingyearly/2020/_cmn/img/top/overall/overall_item03.png) no-repeat left top;
  -webkit-background-size: 221px auto;
  -moz-background-size: 221px auto;
  background-size: 221px auto;
}

.overall .rankBox._04 .rankItemImg .imageBase{
  width:221px;
  padding-top:221px;
  background:url(https://r.r10s.jp/evt/event/rankingyearly/2020/_cmn/img/top/overall/overall_item04.png) no-repeat left top;
  -webkit-background-size: 221px auto;
  -moz-background-size: 221px auto;
  background-size: 221px auto;
}

.overall .rankBox._05 .rankItemImg .imageBase{
  width:221px;
  padding-top:221px;
  background:url(https://r.r10s.jp/evt/event/rankingyearly/2020/_cmn/img/top/overall/overall_item05.png) no-repeat left top;
  -webkit-background-size: 221px auto;
  -moz-background-size: 221px auto;
  background-size: 221px auto;
}

.overall .rankBox .rankIcon{text-align:center;}
.overall .rankBoxInner{letter-spacing:-.5em;}
.overall .rankBoxInner .rankBoxImg,
.overall .rankBoxInner .rankBoxTxt{
  display:inline-block;
  vertical-align:bottom;
  letter-spacing:normal;
}
.overall .rankBox._01 .rankBoxInner .rankBoxImg{width:405px;}
.overall .rankBox._01 .rankBoxInner .rankBoxTxt{
  width:464px;
  margin-right:81px;
}
.overall .rankBox._01 .rankItemShop{margin-top:-36px;}
.overall ._2col .rankBoxInner .rankBoxImg{width:221px;}
.overall ._2col .rankBoxInner .rankBoxTxt{
  width:221px;
  padding-left:22px;
  background-color:transparent;
  position:relative;
  overflow:visible;
  z-index:100;
}
.overall ._2col{
  letter-spacing:-.5em;
  margin-top:-36px;
  margin-bottom:76px;
}
.overall ._2col .rankBox{
  display:inline-block;
  vertical-align:top;
  letter-spacing:normal;
  width:464px;
  margin-top:72px;
  margin-left:22px;
}
.overall ._2col .rankBox:first-child,
.overall ._2col .rankBox:nth-child(2n+1){margin-left:0;}

.overall .rankBox .rankItemShop{
  font-size:16px;
  font-weight:bold;
  line-height:1.25;
}
.overall .rankBox .rankItemName{
  font-size:22px;
  font-weight:bold;
  line-height:1.286;
  margin:8px 0;
}
.overall .rankBox .rankItemName > span{font-size:18px;}
.overall .rankBox .rankItemDescription{
  font-size:16px;
  line-height:1.25;
  color:#555555!important;
}
.overall .rankBox .rankBigLink .moreBtn{
  width:464px;
  height:0;
  padding-top:60px;
  margin:12px auto 0;
  overflow:hidden;
  background:url(https://r.r10s.jp/evt/event/rankingyearly/2020/_pc/img/cmn/overall_btn.png) left top;
}
.overall ._2col .rankBox .rankBigLink .moreBtn{
  width:221px;
  padding-top:50px;
  background:url(https://r.r10s.jp/evt/event/rankingyearly/2020/_pc/img/cmn/overall_btn02.png) left top;
}
.overall .rankBox .rankBigLink:hover .moreBtn{background-position:left bottom;}
.overall .rankBox._01 .rankItemImg{
  width:100%;
  margin:10px 0 8px;
}
.overall .rankBox .rankItemShop{font-size:18px;}
.overall .rankBox._01 .rankItemName{
  font-size:28px;
  line-height:1.286;
}
.overall .rankBox._01 .rankItemDescription{
  font-size:18px;
  line-height:1.286;
}
.overall ._2col .rankBox .rankItemImg{
  width:100%;
  margin:-24px 0 0;
}
.overall .btnTop30{
  width:464px; 
  margin:0 auto 3px;
  padding-bottom:2px;
}
.overall .btnTop30 a{
  display:inline-block;
  vertical-align:middle;
  width:100%;
  padding:13px 0;
  margin:0 auto;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  font-size:28px;
  font-weight:bold;
  color:#ffffff!important;
  text-decoration:none!important;
  line-height:1em;
  letter-spacing:.1em;
  border:solid 2px #ffffff;
  border-radius:30px;
  background-color:#e5a865;
}
:-ms-lang(x)::-ms-backdrop, .overall .btnTop30 a{
  line-height:1; 
  padding:18px 0 8px;
}

.overall .btnTop30 a > span{
  position:relative;
  width:100%;
}
.overall .btnTop30 a > span:after{
  content:'';
  position:absolute;
  display:block;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 0 12px 12px;
  border-color:transparent transparent #ffffff transparent;
  right:-22px;
  bottom:4px;
}
:-ms-lang(x)::-ms-backdrop, .overall .btnTop30 a > span:after{
  bottom:12px;
}
.overall .btnTop30 a:hover{
  border:solid 2px #ffffff;
  background-color:#ffffff;
  color:#e5a865!important;
}
.overall .btnTop30 a:hover > span:after{border-color:transparent transparent #e5a865 transparent;}