@charset "UTF-8";
/* /shop/e/eLSummerFes2607/
----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;800;900&display=swap');

/* reset
---------------------- */
#matsuri{
	color:#000;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	text-align: center;
	background:url(/img/event_L/eLmatsuri2024/top_bg.png)no-repeat top,
	url(/img/event_L/eLmatsuri202107/btm.png)no-repeat center bottom;
	background-color:#2184c7;
	padding-bottom: 424px;
}
#matsuri img{
	vertical-align: top;
}
/* contents
---------------------- */
#matsuri .main{
	position: relative;
	overflow:hidden;
}
#matsuri .main img{
	position: relative;
}
#matsuri.top .main .ttl{
	z-index:1;
}
#matsuri.top .main .ttl_anime{
	position: absolute;
	top:190px;
	left:104px;
	z-index:2;
}
#matsuri.top .main .ico{
	position: absolute;
	top:182px;
	right:70px;
	z-index:3;
}
#matsuri .main .f1{
	position: absolute;
	top:110px;
	left:-60px;
}
#matsuri .main .f2{
	position: absolute;
	top:-40px;
	right:121px;
}
#matsuri .main .f3{
	position: absolute;
	top:20px;
	left:300px;
}
#matsuri .main .f4{
	position: absolute;
	top:220px;
	right:-60px;
}
#matsuri .main .f5{
	position: absolute;
	top:370px;
	left:-40px;
}
.active{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
.f1.active{
animation-name:blinkAnime;
animation-duration:2s;
animation-delay:.5s;
}
.f2.active{
animation-name:blinkAnime;
animation-duration:3s;
animation-delay:0;
}
.f3.active{
animation-name:blinkAnime;
animation-duration:3s;
animation-delay:.5s;
}
.f4.active{
animation-name:fadeUpAnime;
animation-duration:3s;
animation-delay:0;
}
.f5.active{
animation-name:fadeUpAnime;
animation-duration:1.5s;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes blinkAnime{
	0% { opacity: 1; }
  25% { opacity: 0; }
	50% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
#matsuri > .base{
	width:1030px;
	background:rgba(255,255,255,.25);
	border-radius:12px;
	margin:-200px auto 0;
	position: relative;
	padding-left: 23px;
	padding-bottom: 33px;
}
#matsuri.top .base::before{
	content:url(/img/event_L/eLmatsuri2024/top_base_ico.png);
	position: absolute;
	top:-40px;
	left:-35px;
}
#matsuri.top .base .ttl{
	margin-top: -28px;
	z-index:1;
	position: relative;
}
#matsuri.top .base ul{
	margin-top: 20px;
}
#matsuri.top .base ul li{
	margin-bottom: 22px;
}
#matsuri .totop{
	margin-top:32px;
}