@charset "UTF-8";
/* /shop/e/eLrilakkumagoods202506/
----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&family=M+PLUS+Rounded+1c:wght@700;800&display=swap');

/* reset
---------------------- */
#rilakkuma{
	color:#3d0a0d;
	font-size: 24px;
	font-weight: 800;
	font-family: YakuHanRP, "M PLUS Rounded 1c", sans-serif;
	text-align: center;
}
#rilakkuma *{
	box-sizing: border-box;
}
#rilakkuma p{
	transform: rotate(0.03deg);
}
#rilakkuma a{
	color:#3d0a0d;
}

/* contents
---------------------- */
#rilakkuma .main{
	height:925px;
	background: url(/img/event_L/eLrilakkumagoods202506/main_bg.png)top no-repeat;
	position: relative;
	overflow:hidden;
	padding-top: 133px;
}
#rilakkuma .main span.m1{
	position: absolute;
	top:465px;
	right:209px;
	opacity: 0;
	animation: fadeIn 1.5s ease-in 4s forwards;
	display:block;
	width:187px;
	height:258px;
}
#rilakkuma .main span.m1 img{
	animation: tilt .8s ease-out 6s;
}
#rilakkuma .main span.m2{
	position: absolute;
	top:531px;
	left:230px;
	opacity: 0;
	animation: fadeIn 1.5s ease-in 4s forwards;
	display:block;
	width:137px;
	height:165px;
}
#rilakkuma .main span.m2 img{
	animation: popUp .3s ease-in 6.8s forwards 2;
}

#rilakkuma .main img.m3{
	position: absolute;
	top:469px;
	right:53px;
	opacity: 0;
	animation: fadeInRight .5s ease-in 4s forwards;
}
#rilakkuma .main img.m4{
	position: absolute;
	top:730px;
	left:331px;
	opacity: 0;
	animation: fadeInUp .5s ease-in 4s forwards;
}
#rilakkuma .main img.p1{
	position: absolute;
	top:-58px;
	left:-15px;
	opacity: 0;
	animation: fadeIn .5s ease-in 4s forwards;
}
#rilakkuma .main img.p2{
	position: absolute;
	top:-107px;
	right:-14px;
	opacity: 0;
	animation: fadeIn .5s ease-in 4s forwards;
}
#rilakkuma .main img.p3{
	position: absolute;
	top:573px;
	left:7px;
	opacity: 0;
	animation: fadeIn .5s ease-in 4s forwards;
}
#rilakkuma .main img.p4{
	position: absolute;
	top:634px;
	right:15px;
	opacity: 0;
	animation: fadeIn .5s ease-in 4s forwards;
}
#rilakkuma .main img.r1{
	position: absolute;
	top:277px;
	left:14px;
	opacity: 0;
	animation: fadeInLeft .5s ease-in 4s forwards;
}
#rilakkuma .main img.r2{
	position: absolute;
	top:276px;
	right:12px;
	opacity: 0;
	animation: fadeInRight .5s ease-in 4s forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}
@keyframes tilt {
  0% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(28deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes popUp {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-15px); /* 上に10px */
  }
  100% {
    transform: translateY(0);
  }
}
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* ユーザー操作を無効化 */
  transition: opacity 1s ease;
  z-index: 10; /* 他の要素より優先して表示 */
}

#overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/img/event_L/eLrilakkumagoods202506/main_start_bg.png) top no-repeat;
  background-size: cover; /* 背景が画面いっぱいに表示される */

  /* 最初はマスクを小さくしておく */
  -webkit-mask-image: radial-gradient(circle 129px at center 68%, transparent 99%, black 100%);
  mask-image: radial-gradient(circle 129px at center 68%, transparent 99%, black 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;

  opacity: 1; /* 最初は完全に表示 */
}
/* #overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 1s ease;
  z-index: 1;
}

#overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/img/event_L/eLrilakkumagoods202506/main_start_bg.png)top no-repeat;
  -webkit-mask-image: radial-gradient(circle 129px at center 68%, transparent 99%, black 100%);
  mask-image: radial-gradient(circle 129px at center 68%, transparent 99%, black 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
	background-color:#efd6af;
} */
#rilakkuma .lead{
	height:706px;
	background: url(/img/event_L/eLrilakkumagoods202506/lead_bg.png) no-repeat top;
	margin-top: -50px;
	position: relative;
  z-index: 99;/* overlayより上 */
	padding-top: 160px;
	position: relative;
}
#rilakkuma .lead img{
	opacity:0;
}
#rilakkuma .lead img.active{
	animation: fadeIn .5s ease-out;
	opacity:1;
}
#rilakkuma .lead span{
	display:block;
	width:115px;
	height:115px;
	position: absolute;
}
#rilakkuma .lead span:nth-child(1){
	background:url(/img/event_L/eLrilakkumagoods202506/lead_p1.png)no-repeat;
	background-size:contain;
	top:72px;
	left:101px;
	animation: shakeY 7s ease-out infinite;
}
#rilakkuma .lead span:nth-child(2){
	width:117px;
	background:url(/img/event_L/eLrilakkumagoods202506/lead_p2.png)no-repeat;
	background-size:contain;
	top:305px;
	left:50px;
	animation: tilt 3s ease-out infinite;
}
#rilakkuma .lead span:nth-child(3){
	width:114px;
	height:117px;
	background:url(/img/event_L/eLrilakkumagoods202506/lead_p3.png)no-repeat;
	background-size:contain;
	bottom:61px;
	left:91px;
	animation: shakeY2 14s ease-out infinite;
}
#rilakkuma .lead span:nth-child(4){
	background:url(/img/event_L/eLrilakkumagoods202506/lead_p4.png)no-repeat;
	background-size:contain;
	top:72px;
	right:101px;
	animation: shakeY3 20s ease-out infinite;
}
#rilakkuma .lead span:nth-child(5){
	width:113px;
	width:117px;
	background:url(/img/event_L/eLrilakkumagoods202506/lead_p5.png)no-repeat;
	background-size:contain;
	top:305px;
	right:50px;
	animation: shakeY2 18s ease-out infinite;
}
#rilakkuma .lead span:nth-child(6){
	width:118px;
	background:url(/img/event_L/eLrilakkumagoods202506/lead_p6.png)no-repeat;
	background-size:contain;
	bottom:61px;
	right:91px;
	animation: tilt 5s ease-out infinite;
}
@keyframes shakeY {

  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -3px, 0);
    transform: translate3d(0, -3px, 0)
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 3px, 0);
    transform: translate3d(0, 3px, 0)
  }
}
@keyframes shakeY2 {

  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0)
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0)
  }
}
@keyframes shakeY3 {

	0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(15px, 0, 0);
    transform: translate3d(15px, 0, 0)
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0)
  }
}
#rilakkuma .prod {
	background:url(/img/event_L/eLrilakkumagoods202506/prod_bg2.png)no-repeat top 115px center,
	url(/img/event_L/eLrilakkumagoods202506/prod_bg1.png)repeat-y;
	background-color:#cbf19b;
	margin-top: -25px;
	padding-top: 140px;
	padding-bottom: 128px;
	position: relative;
	overflow: hidden;
}
#rilakkuma .prod > div{
	text-align: center;
}
#rilakkuma .prod a.js-modal-open{
	display:inline-block;
	position: relative;
	margin-bottom: 158px;
}
#rilakkuma .prod .prod2 a.js-modal-open{
	margin-bottom: 150px;
}
#rilakkuma .prod a.js-modal-open:hover{
	opacity:.9;
}
#rilakkuma .prod a.js-modal-open:hover img,
#rilakkuma .prod a.js-modal-open:hover div,
#rilakkuma .prod a.js-modal-open:hover span{
	transform:scale(1.05);
}
#rilakkuma .prod img.shop,
#rilakkuma .prod span.click{
	opacity:0;
}
#rilakkuma .prod img.shop.active,
#rilakkuma .prod span.click.active{
	animation: fadeIn ease-in .5s forwards;
}
#rilakkuma .prod span.click{
	position: absolute;
	top:225px;
	left:-73px;
	z-index:2;
}
#rilakkuma .prod a.js-modal-open:hover span.click{
}
#rilakkuma .prod span.click img{
	animation: tilt2 ease-in 3s infinite forwards;
}
#rilakkuma .prod1{
	background:url(/img/event_L/eLrilakkumagoods202506/prod1_bg.png)no-repeat top left -83px;
	padding-top: 5px;
	padding-left: 5px;
	margin-top: 170px;
	position: relative;
	height:950px;
}
#rilakkuma .prod1 div.win{
	width:188px;
	height:96px;
	border:5px solid #6b503f;
	position: absolute;
	top:285px;
	right:139px;
	overflow: hidden;
}
#rilakkuma .prod1 div.win span{
	display:block;
	position: absolute;
	animation: prod1-win 2.5s infinite;
}
@keyframes prod1-win {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(5px);
	}
}
#rilakkuma .prod1 div.win span:nth-child(1),
#rilakkuma .prod1 div.win span:nth-child(2),
#rilakkuma .prod1 div.win span:nth-child(3),
#rilakkuma .prod1 div.win span:nth-child(4){
	width:48px;
	height:80px;
	background:url(/img/event_L/eLrilakkumagoods202506/prod1_w1.png)no-repeat;
}
#rilakkuma .prod1 div.win span:nth-child(1){
	bottom:-12px;
	left:-10px;
	animation-delay: .1s;
}
#rilakkuma .prod1 div.win span:nth-child(2){
	bottom:10px;
	left:35px;
	animation-delay: .3s;
}
#rilakkuma .prod1 div.win span:nth-child(3){
	bottom:-20px;
	left:30px;
	animation-delay: .5s;
}
#rilakkuma .prod1 div.win span:nth-child(4){
	bottom:-13px;
	left:70px;
	animation-delay: .7s;
}
#rilakkuma .prod1 div.win span:nth-child(5),
#rilakkuma .prod1 div.win span:nth-child(6),
#rilakkuma .prod1 div.win span:nth-child(7),
#rilakkuma .prod1 div.win span:nth-child(8){
	width:41px;
	height:50px;
	display:block;
	background:url(/img/event_L/eLrilakkumagoods202506/prod1_w2.png)no-repeat;
}
#rilakkuma .prod1 div.win span:nth-child(5){
	bottom:25px;
	right:-10px;
	animation-delay: .1s;
}
#rilakkuma .prod1 div.win span:nth-child(6){
	bottom:-2px;
	right:-5px;
	animation-delay: .3s;
}
#rilakkuma .prod1 div.win span:nth-child(7){
	bottom:30px;
	right:27px;
	animation-delay: .5s;
}
#rilakkuma .prod1 div.win span:nth-child(8){
	bottom:-10px;
	right:32px;
	animation-delay: .7s;
}
#rilakkuma .prod1 .g1{
	position: absolute;
	top:115px;
	left:-85px;
	/* z-index:1; */
}
#rilakkuma .prod1 .g2{
	position: absolute;
	top:253px;
	right:-64px;
	z-index:1;
}
#rilakkuma .prod1 .r1{
	position: absolute;
	top:66px;
	left:58px;
	animation: prod1-r1 ease-out 5s infinite forwards;
	transform: rotate(0) scaleX(-1);
}
#rilakkuma .prod1 .r1p{
	position: absolute;
	top:97px;
	left:208px;
	animation: prod3-r2p ease-in-out 5s infinite forwards;
}
@keyframes prod1-r1 {
  0% {
    transform: rotate(0) scaleX(-1) translateY(0);
  }
  7% {
    transform: rotate(-2deg) scaleX(-1) translateY(0);
  }
	15% {
		transform: rotate(0) scaleX(-1) translateY(0);
	}
	50% {
		transform: rotate(0) scaleX(-1) translateY(0);
	}
	53% {
		transform: rotate(0) scaleX(-1) translateY(-8px);
	}
  56%, 100% {
    transform: rotate(0) scaleX(-1) translateY(0);
  }
}
#rilakkuma .prod1 .r2{
	position: absolute;
	top:448px;
	right:330px;
	transform: translateX(400px);
}
#rilakkuma .prod1 .r2.active {
  animation: prod1-r2 2s ease-out .5s forwards;
  transform-origin: center center;
}
@keyframes prod1-r2 {
  0% {
    transform: translateX(400px) translateY(0);
    opacity: 0;
  }
  30% {
    transform: translateX(300px) translateY(-20px);
    opacity: 1;
  }
  50% {
    transform: translateX(180px) translateY(10px);
  }
  70% {
    transform: translateX(100px) translateY(-10px);
  }
  85% {
    transform: translateX(50px) translateY(5px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
#rilakkuma .prod1 .r2.active img {
  animation: popUp2 5s ease-out 4s infinite forwards;
}
#rilakkuma .prod1 .c1{
	position: absolute;
	top:813px;
	left:39px;
	animation: popUp2 6s infinite;
}
#rilakkuma .prod1 .c2{
	position: absolute;
	bottom:8px;
	right:314px;
	animation: shakeY2 12s infinite;
}
#rilakkuma .prod1 .c3{
	position: absolute;
	bottom:6px;
	right:48px;
	animation: tilt 4s infinite;
}
#rilakkuma .prod1 .c1 img{

}
#rilakkuma .prod1 .step span{
	opacity:0;
	position: absolute;
	display:block;
	width:24px;
	height:26px;
	background:url(/img/event_L/eLrilakkumagoods202506/prod_step.png)no-repeat;
}
#rilakkuma .prod1 .step span.active{
	animation: fadeIn ease-in .5s forwards;
}
#rilakkuma .prod1 .step span:nth-child(1){
	bottom:294px;
	right:403px;
}
#rilakkuma .prod1 .step span:nth-child(2){
	bottom:236px;
	right:389px;
	transform:rotate(-12deg);
	animation-delay:.5s;
}
#rilakkuma .prod1 .step span:nth-child(3){
	bottom:215px;
	right:444px;
	transform:rotate(-12deg);
	animation-delay:.8s;
}
#rilakkuma .prod1 .step span:nth-child(4){
	bottom:160px;
	right:415px;
	transform:rotate(-33deg);
	animation-delay:1.1s;
}
#rilakkuma .prod1 .step span:nth-child(5){
	bottom:168px;
	left:369px;
	transform:rotate(-60deg);
}
#rilakkuma .prod1 .step span:nth-child(6){
	bottom:153px;
	left:426px;
	transform:rotate(-60deg);
	animation-delay:.5s;
}
#rilakkuma .prod1 .step span:nth-child(7){
	bottom:94px;
	left:410px;
	transform:rotate(-60deg);
	animation-delay:.8s;
}
#rilakkuma .prod1 .step span:nth-child(8){
	bottom:89px;
	left:472px;
	transform:rotate(-72deg);
	animation-delay:1.1s;
}
#rilakkuma .prod1 .step span:nth-child(9){
	bottom:35px;
	left:455px;
	transform:rotate(-95deg);
	animation-delay:1.3s;
}
#rilakkuma .prod2{
	background:url(/img/event_L/eLrilakkumagoods202506/prod2_bg.png)no-repeat top left -49px;
	padding-top: 114px;
	padding-left: 5px;
	margin-top: -7px;
	position: relative;
	height:1233px;
}
#rilakkuma .prod2 div.win{
	width:188px;
	height:96px;
	background:#c5e1e8 url(/img/event_L/eLrilakkumagoods202506/prod2_win_bg.png)no-repeat;
	background-size: cover;
	border:5px solid #7cbcbf;
	position: absolute;
	top:282px;
	right:138px;
	overflow: hidden;
}
#rilakkuma .prod2 div.win span{
	display:block;
	position: absolute;
	animation: tilt2 2.5s infinite;
}
@keyframes prod2-win {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(5px);
	}
}
#rilakkuma .prod2 div.win span:nth-child(1),
#rilakkuma .prod2 div.win span:nth-child(2),
#rilakkuma .prod2 div.win span:nth-child(3),
#rilakkuma .prod2 div.win span:nth-child(4){
}
#rilakkuma .prod2 div.win span:nth-child(1){
	width:54px;
	height:90px;
	background:url(/img/event_L/eLrilakkumagoods202506/prod2_w1.png)no-repeat;
	background-size:contain;
	top:-17px;
	left:0;
	animation-delay: .1s;
}
#rilakkuma .prod2 div.win span:nth-child(2){
	width:41px;
	height:98px;
	background:url(/img/event_L/eLrilakkumagoods202506/prod2_w2.png)no-repeat;
	background-size:contain;
	top:-12px;
	left:51px;
	animation-delay: .3s;
}
#rilakkuma .prod2 div.win span:nth-child(3){
	width:54px;
	height:88px;
	background:url(/img/event_L/eLrilakkumagoods202506/prod2_w3.png)no-repeat;
	background-size:contain;
	top:-16px;
	right:36px;
	animation-delay: .5s;
}
#rilakkuma .prod2 div.win span:nth-child(4){
	width:38px;
	height:100px;
	background:url(/img/event_L/eLrilakkumagoods202506/prod2_w4.png)no-repeat;
	background-size:contain;
	top:-15px;
	right:3px;
	animation-delay: .7s;
}
#rilakkuma .prod2 .g1{
	position: absolute;
	top:553px;
	left:-85px;
	z-index:1;
}
#rilakkuma .prod2 .g2{
	position: absolute;
	top:253px;
	right:-64px;
	z-index:1;
}
#rilakkuma .prod2 .g3{
	position: absolute;
	top:816px;
	left:92px;
	z-index:1;
}
#rilakkuma .prod2 .r1{
	position: absolute;
	top:555px;
	left:300px;
	transform: translateX(-280px) scaleX(-1);
}
#rilakkuma .prod2 .r1.active {
  animation: prod2-r1 2s ease-out .5s forwards;
  transform-origin: center center;
}
@keyframes prod2-r1 {
  0% {
    transform: translateX(-280px) translateY(0) scaleX(-1);
    opacity: 0;
  }
  30% {
    transform: translateX(-150px) translateY(-20px) scaleX(-1);
    opacity: 1;
  }
  50% {
    transform: translateX(-100px) translateY(10px) scaleX(-1);
  }
  70% {
    transform: translateX(-70px) translateY(-10px) scaleX(-1);
  }
  85% {
    transform: translateX(-30px) translateY(5px) scaleX(-1);
  }
  100% {
    transform: translateX(0) translateY(0) scaleX(-1);
  }
}
#rilakkuma .prod2 .r1.active img {
  animation: popUp2 5s ease-out 4s infinite forwards;
}
#rilakkuma .prod2 .c1{
	position: absolute;
	top:670px;
	left:135px;
	z-index:2;
	animation: prod2-c1 3s infinite;
	transform: rotate(8deg);
}
@keyframes prod2-c1 {
	0%, 100% {
		transform: rotate(8deg);
	}
	50% {
		transform: rotate(-10deg);
	}
}
#rilakkuma .prod2 .c2{
	position: absolute;
	bottom:196px;
	right:76px;
	animation: prod2-c2 2.5s infinite;
}
@keyframes prod2-c2 {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(13px);
	}
}
#rilakkuma .prod2 .c3{
	position: absolute;
	top:813px;
	left:39px;
}
#rilakkuma .prod2 .c1 img{

}
#rilakkuma .prod2 .step span{
	opacity:0;
	position: absolute;
	display:block;
	width:24px;
	height:26px;
	background:url(/img/event_L/eLrilakkumagoods202506/prod_step.png)no-repeat;
}
#rilakkuma .prod2 .step span.active{
	animation: fadeIn ease-in .5s forwards;
}
#rilakkuma .prod2 .step span:nth-child(1){
	bottom:450px;
	left:365px;
	transform:rotate(-80deg);
}
#rilakkuma .prod2 .step span:nth-child(2){
	bottom:393px;
	left:370px;
	transform:rotate(-80deg);
	animation-delay:.5s;
}
#rilakkuma .prod2 .step span:nth-child(3){
	bottom:394px;
	left:429px;
	transform:rotate(-85deg);
	animation-delay:.8s;
}
#rilakkuma .prod2 .step span:nth-child(4){
	bottom:330px;
	left:423px;
	transform:rotate(-65deg);
	animation-delay:1.1s;
}
#rilakkuma .prod2 .step span:nth-child(5){
	bottom:266px;
	right:470px;
	transform:rotate(-15deg);
}
#rilakkuma .prod2 .step span:nth-child(6){
	bottom:250px;
	right:528px;
	transform:rotate(5deg);
	animation-delay:.5s;
}
#rilakkuma .prod2 .step span:nth-child(7){
	bottom:194px;
	right:509px;
	transform:rotate(-8deg);
	animation-delay:.8s;
}
#rilakkuma .prod2 .step span:nth-child(8){
	bottom:187px;
	right:574px;
	transform:rotate(10deg);
	animation-delay:1.1s;
}
#rilakkuma .prod2 .step span:nth-child(9){
	bottom:140px;
	right:554px;
	transform:rotate(5deg);
	animation-delay:1.3s;
}
#rilakkuma .prod3{
	background:url(/img/event_L/eLrilakkumagoods202506/prod3_bg.png)no-repeat top left -79px;
	padding-top: 102px;
	padding-left: 5px;
	margin-top: -174px;
	position: relative;
	height:926px;
}
#rilakkuma .prod3 div.win{
	width:188px;
	height:96px;
	background:#afb8c4 url(/img/event_L/eLrilakkumagoods202506/prod3_win_bg.png)no-repeat;
	background-size: cover;
	border:5px solid #5e6e8f;
	position: absolute;
	top:282px;
	right:138px;
	overflow: hidden;
}
#rilakkuma .prod3 div.win span{
	display:block;
	position: absolute;
	animation: tilt2 2.5s infinite;
}
@keyframes prod3-win {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(5px);
	}
}
#rilakkuma .prod3 div.win span:nth-child(1),
#rilakkuma .prod3 div.win span:nth-child(2),
#rilakkuma .prod3 div.win span:nth-child(3),
#rilakkuma .prod3 div.win span:nth-child(4){
}
#rilakkuma .prod3 div.win span:nth-child(1){
	width:71px;
	height:72px;
	background:url(/img/event_L/eLrilakkumagoods202506/prod3_w1.png)no-repeat;
	background-size:contain;
	top:9px;
	left:15px;
	animation-delay: .1s;
}
#rilakkuma .prod3 div.win span:nth-child(2){
	width:74px;
	height:74px;
	background:url(/img/event_L/eLrilakkumagoods202506/prod3_w2.png)no-repeat;
	background-size:contain;
	top:9px;
	right:15px;
	animation-delay: .3s;
}
#rilakkuma .prod3 .g1{
	position: absolute;
	top:553px;
	left:-85px;
	z-index:1;
}
#rilakkuma .prod3 .g2{
	position: absolute;
	top:300px;
	right:-64px;
	z-index:1;
}
#rilakkuma .prod3 .g3{
	position: absolute;
	top:816px;
	left:92px;
	z-index:1;
}
#rilakkuma .prod3 .r1{
	position: absolute;
	top:512px;
	right:343px;
	transform: translateX(400px);
}
#rilakkuma .prod3 .r1.active {
  animation: prod1-r2 1.5s ease-out forwards;
  transform-origin: center center;
}
@keyframes prod3-r1 {
  0% {
    transform: translateX(400px) translateY(0);
    opacity: 0;
  }
  30% {
    transform: translateX(300px) translateY(-10px);
    opacity: 1;
  }
  50% {
    transform: translateX(180px) translateY(10px);
  }
  70% {
    transform: translateX(100px) translateY(-10px);
  }
  85% {
    transform: translateX(50px) translateY(5px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
#rilakkuma .prod3 .r1.active img {
  animation: popUp2 5s ease-out 4s infinite forwards;
}
#rilakkuma .prod3 .r2{
	position: absolute;
	top:656px;
	right:70px;
	z-index:2;
	animation: prod3-r2 ease-out 5s infinite forwards;
}
#rilakkuma .prod3 .r2p{
	position: absolute;
	top:686px;
	right:228px;
	z-index:2;
		animation: prod3-r2p ease-in-out 5s infinite forwards;
}
@keyframes prod3-r2 {
  0% {
    transform: rotate(0) translateY(0);
  }
  7% {
    transform: rotate(2deg) translateY(0);
  }
	15% {
		transform: rotate(0) translateY(0);
	}
	50% {
		transform: rotate(0) translateY(0);
	}
	53% {
		transform: rotate(0) translateY(-5px);
	}
  56%, 100% {
    transform: rotate(0) translateY(0);
  }
}
@keyframes prod3-r2p {
  0% {
    transform: translateY(0);
  }
  8% {
    transform: translateY(-35px) rotate(-12deg);
  }
	16% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(0);
	}
	53% {
		transform: translateY(-5px);
	}
  56%, 100% {
    transform: translateY(0);
  }
}
#rilakkuma .prod3 .c1{
	position: absolute;
	bottom:55px;
	left:50px;
	z-index:2;
	animation: prod3-c1 2.5s infinite;
}
@keyframes prod3-c1 {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(24px);
	}
}

@keyframes bounceSlideIn {
  0% {
    transform: translateX(-340px) translateY(0);
    opacity: 0;
  }
  30% {
    transform: translateX(-240px) translateY(-20px);
    opacity: 1;
  }
  50% {
    transform: translateX(-140px) translateY(10px);
  }
  70% {
    transform: translateX(-60px) translateY(-10px);
  }
  85% {
    transform: translateX(-20px) translateY(5px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
@keyframes tilt2 {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(-15deg);
  }
  15% {
    transform: rotate(2deg);
  }
  20% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#rilakkuma .prod a.p2 {
	display:block;
	width:222px;
	height:270px;
	position: absolute;
	top:712px;
	right:127px;
	transform:translateX(353px);
}
#rilakkuma .prod.active2 a.p2 {
  animation: bouncySlideIn 1.5s ease-out 1s forwards;
  transform-origin: center center;
}
#rilakkuma .prod.active2 a.p2 img{
	animation: popUp2 5s ease-in-out 3s infinite;
}
@keyframes bouncySlideIn {
  0% {
    transform: translateX(353px) translateY(0);
    opacity: 0;
  }
  10% {
    transform: translateX(300px) translateY(-8px);
    opacity: 1;
  }
  20% {
    transform: translateX(250px) translateY(6px);
  }
  30% {
    transform: translateX(200px) translateY(-6px);
  }
  40% {
    transform: translateX(150px) translateY(5px);
  }
  50% {
    transform: translateX(100px) translateY(-4px);
  }
  60% {
    transform: translateX(60px) translateY(3px);
  }
  70% {
    transform: translateX(30px) translateY(-2px);
  }
  80% {
    transform: translateX(15px) translateY(1px);
  }
  90% {
    transform: translateX(5px) translateY(0px);
  }
  100% {
    transform: translateX(0px) translateY(0);
  }
}
@keyframes popUp2 {
  0%,6%,12% {
    transform: translateY(0);
  }
  3%,9% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}
#rilakkuma .prod a.p3 {
	display:block;
	width:188px;
	height:316px;
	position: absolute;
	top:132px;
	left:40px;
	opacity:0;
}
#rilakkuma .prod a.p3.active {
	animation: fadeIn 1s ease-in .5s forwards;
}
#rilakkuma .prod a.p3.active img {
	animation: wobble2 8s infinite 4s ease-in-out;
	transform-origin: center center;
}
#rilakkuma .prod a.p4 {
	display:block;
	width:152px;
	height:345px;
	position: absolute;
	top:240px;
	left:200px;
	opacity:0;
}
#rilakkuma .prod a.p4.active {
	animation: fadeIn 1s ease-in .5s forwards;
}
#rilakkuma .prod a.p4.active img {
	animation: wobble2 8s infinite 2s ease-in-out;
	transform-origin: center center;
}
#rilakkuma .prod a.p5 {
	display:block;
	width:189px;
	height:321px;
	position: absolute;
	top:152px;
	right:155px;
	opacity:0;
}
#rilakkuma .prod a.p5.active {
	animation: fadeIn 1s ease-in .5s forwards;
}
#rilakkuma .prod a.p5.active img {
	animation: wobble2 10s infinite 3s ease-in-out;
	transform-origin: center center;
}
#rilakkuma .prod a.p6 {
	display:block;
	width:132px;
	height:358px;
	position: absolute;
	top:273px;
	right:53px;
	animation: wobble1 5s infinite 2s ease-in-out;
	transform-origin: top center;
	opacity:0;
}
#rilakkuma .prod a.p6.active {
	animation: fadeIn 1s ease-in .5s forwards;
}
#rilakkuma .prod a.p6.active img {
	animation: wobble2 8s infinite 1s ease-in-out;
	transform-origin: center center;
}
#rilakkuma .prod a.p7 {
	display:block;
	width:255px;
	height:256px;
	position: absolute;
	top:78px;
	right:340px;
	opacity:0;
}
#rilakkuma .prod a.p7.active {
	animation: fadeIn 2s ease-in .5s forwards;
}
#rilakkuma .prod a.p7.active img {
	animation: wobble2 15s infinite 2s ease-in-out;
	transform-origin: center center;
}
#rilakkuma .prod a.p8 {
	display:block;
	width:268px;
	height:268px;
	position: absolute;
	top:362px;
	left:410px;
	opacity:0;
}
#rilakkuma .prod a.p8.active {
	animation: fadeIn 1.5s ease-in .5s forwards;
}
#rilakkuma .prod a.p8.active img {
	animation: wobble2 15s infinite 1s ease-in-out;
	transform-origin: center center;
}
#rilakkuma .prod .scroll-container {
	text-align: center;
	animation: float 3s ease-in-out infinite;
	display:block;
}

#rilakkuma .prod .scroll-text {
	color:#5b3e30;
	font-size: 30px;
	font-weight: 500;
	padding-bottom: 20px;
}

#rilakkuma .prod .arrows {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#rilakkuma .prod .arrow {
	animation: bounce 2.5s infinite;
	position: absolute;
	top: 39px;
	left: calc(50% - 5px);
	width: 10px;
	height: 10px;
	border-left: 2px solid #5b3e30;
	border-bottom: 2px solid #5b3e30;
	transform: translate(-10px, -50%) rotate(-45deg);
}

#rilakkuma .prod .arrow:nth-child(2) {
top: 50px;
	animation-delay: .3s;
}

@keyframes bounce {
	0%, 100% {
		transform: translate(-5px, 0) rotate(-45deg);
		opacity: 1;
	}
	50% {
		transform: translate(-5px, 8px) rotate(-45deg);
		opacity: 0.6;
	}
}

@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-8px);
	}
}
#rilakkuma .slide {
	background:url(/img/event_L/eLrilakkumagoods202506/slide_bg.png)no-repeat top;
	margin-top: -30px;
	position: relative;
	overflow:hidden;
	padding-top: 100px;
	padding-bottom: 50px;
	margin-bottom: 85px;
}
#rilakkuma .slide .ttl {
	color:#fff;
	font-size: 48px;
	line-height: 1;
	background:url(/img/event_L/eLrilakkumagoods202506/slide_ttl_bg.png)no-repeat top;
	width:556px;
	height:132px;
	display:inline-block;
	padding-top: 25px;
}

/* キーフレーム：少し傾いて戻る動き */
@keyframes wobble1 {
  0%   { transform: rotate(0deg); }
  1%   { transform: rotate(3deg); }
  3%   { transform: rotate(-3deg); }
  5%   { transform: rotate(2deg); }
  7%   { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@keyframes wobble2 {
  0%   { transform: rotate(0deg); }
  1%   { transform: rotate(5deg); }
  3%   { transform: rotate(-5deg); }
  5%   { transform: rotate(3deg); }
  7%   { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
#rilakkuma .slide .ico {
	position:absolute;
	top:63px;
	right:117px;
	z-index:1;
}
#rilakkuma .slide.active .ico {
	animation: pyoko1 8s ease-out infinite;
}
#rilakkuma .slide.active .ico img {
	animation: pyoko2 8s linear infinite;
}
@keyframes pyoko1 {
  0%, 20% {
    transform: translateX(0) translateY(0);
    opacity: 1;
    visibility: visible;
  }
  21%, 24% {
    transform: translateX(0) translateY(15px);
  }
  23%, 26% {
    transform: translateX(0) translateY(0);
  }
  55% {
    transform: translateX(-990px) translateY(0);
    opacity: 1;
    visibility: visible;
  }
  80% {
    transform: translateX(-990px) translateY(0);
    opacity: 0;
    visibility: hidden;
  }
  81%{
    transform: translateX(320px) translateY(0);
    opacity: 0;
    visibility: hidden;
  }
  90% {
    transform: translateX(320px) translateY(0);
		opacity: 1;
    visibility: visible;
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
@keyframes pyoko2 {
	0%, 26%, 32%,38%,44%,50%,56%,63%,69%,75%,80%,92%,96% {
    transform: translateY(0);
  }
  29%,35%,41%,47%,53%,59%,65%,71%,77%,90%,94%,98% {
    transform: translateY(10px);
  }
}
#rilakkuma .slide ul.slick .slick-slide{
	transform:scale(.8);
	opacity:.7;
}
#rilakkuma .slide ul.slick .slick-current{
	transform:scale(1);
	opacity:1;
}
#rilakkuma .slide ul.slick .slick-slide *{
	margin:0 auto;
}
#rilakkuma .slide ul.slick .slick-slide span{
	display:block;
	font-size: 36px;
}
#rilakkuma .slick-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
	transform: translateY(-45px);
}
#rilakkuma .slick-arrow:hover {
	cursor: pointer;
}
#rilakkuma .prev-arrow {
  left: 150px;
  z-index: 10;
}
#rilakkuma .next-arrow {
  right: 150px;
}
#rilakkuma .slick-slide a:focus,
#rilakkuma .slick-slide a:active {
  outline: none;
}
#rilakkuma ul.banner{
	display: flex;
	gap: 60px;
	margin-bottom: 70px;
}
#rilakkuma ul.banner li{
	width:520px;
}
#rilakkuma ul.banner li a{
	color:#3d0a0d;
	display:block;
}
#rilakkuma ul.banner li a:hover{

}
#rilakkuma ul.banner li span{
	display:block;
	text-decoration: underline;
	margin-top: 1.1em;
}
#rilakkuma p.copyright{
	color:#fff;
	font-size: 15px;
	font-weight: 300;
	font-family: "Noto Sans JP", sans-serif;
	line-height: 1;
	background:#5c2f27;
	padding: 1.6em 0;
}
/* modal */
.modal{
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modal__bg{
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
}
.modal__content{
	width:100%;
	max-width:1500px;
	max-height:909px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
	padding-top: 25px;
	padding-bottom: 40px;
}
#modal01 .modal__content{
	background:url(/img/event_L/eLrilakkumagoods202506/modal_bg.png)no-repeat bottom center,
	url(/img/event_L/eLrilakkumagoods202506/modal1_bg.png)no-repeat;
	background-size:100% auto;
}
#modal02 .modal__content{
	background:url(/img/event_L/eLrilakkumagoods202506/modal_bg.png)no-repeat bottom center,
	url(/img/event_L/eLrilakkumagoods202506/modal2_bg.png)no-repeat;
	background-size:100% auto;
}
#modal03 .modal__content{
	background:url(/img/event_L/eLrilakkumagoods202506/modal_bg.png)no-repeat bottom center,
	url(/img/event_L/eLrilakkumagoods202506/modal3_bg.png)no-repeat;
	background-size:100% auto;
}
#closeModal {
	position: absolute;
	right: 55px;
	top: 60px;
	cursor: pointer;
}
.js-modal-open{
  /* text-decoration:underline !important; */
}
.js-modal-open:hover{
  cursor:pointer;
}
.modal__content > img:first-child{
	width:40%;
	max-width:603px;
	position:relative;
	z-index:2;
	margin-bottom: 2%;
}
#modal02 .modal__content > img:first-child{
	margin-bottom: 0;
}
#modal03 .modal__content > img:first-child{
	margin-bottom: 2.8%;
}
.modal__content ul{
	display:flex;
	-webkit-box-pack: center;
	justify-content: center;
	gap:200px;
}
#modal02 .modal__content ul{
	gap:50px;
	margin-top: -3.6%;
}
#modal03 .modal__content ul{
	gap:3.3%;
}
.modal__content ul li{
	font-size: 26px;
}
#modal01 .modal__content ul li{
	width:20.73%;
	max-width:311px;
}
#modal02 .modal__content ul li{
	width:34.26%;
	max-width:514px;
}
#modal03 .modal__content ul li{
	width:30%;
	max-width:462px;
}
.modal__content ul li p:first-child{
	margin-bottom: 10px;
}
#modal02 .modal__content ul li p:first-child{
	width:100%;
	margin-bottom: 0;
}
.modal__content ul li a:hover p:first-child img{
	transform:scale(1.05);
}
.modal__content ul li p:nth-child(2){
	line-height: 1.6;
	margin:0 -1em 10px;
}
#modal02 .modal__content ul li p:nth-child(2){
	line-height: 1.4;
}
.modal__content ul li p:nth-child(3){
	color:#fff;
	font-weight: bold;
	background:#e90625;
	border-radius:100vh;
	line-height: 1;
	padding: .5em;
	display:inline-block;
	width:280px;
}
.modal__content ul li p:nth-child(3) span::after{
	content:'';
	display:inline-block;
	background:url(/img/event_L/eLrilakkumagoods202506/modal_btn_arr.png)no-repeat;
	width:12px;
	height:20px;
	margin-left: 8px;
	margin-bottom: 4px;
	vertical-align: middle;
}
@media screen and (max-width:1500px) {
	.modal__content{
		padding-bottom: 2.667vw;
	}
	.modal__content ul li{
		font-size: 1.733vw;
	}
	.modal__content ul li p:nth-child(3){
		width:18.667vw;
	}
	#closeModal {
		right: 3.667vw;
		top: 4vw;
	}
	#closeModal img {
		width:6.6vw;
		height:auto;
	}
}