@charset "utf-8";

/*--------------------
シャッフルアニメ用
--------------------*/
#cpcontent .anime{
  width: 840px;
  height: 840px;
  margin: 20px auto;
  background-image: url(./../img/input/anime_bg_01.jpg);
  background-size: cover;
  position: relative;
}

/*ボタン*/
#cpcontent .anime .btn_onoff{
  position: relative;
  display: block;
}
#cpcontent .anime .btn_onoff img{
  position: absolute;
  top: 0;
  left: 0;
}
#cpcontent .anime .btn_onoff img.on_img{
  opacity: 0;
  transition: all 0.3s;
}
#cpcontent .anime .btn_onoff.on img.on_img{
  opacity: 1;
}

/*scene1*/
#cpcontent .anime .scene1{
  position: absolute;
  width: 840px;
  height: 840px;
}
#cpcontent .anime .scene1 .text{
  padding: 75px 0 0 0;
  transition: opacity 1s;
}
#cpcontent .anime .scene1 .btns{
  margin: 386px 0 0 0;
  transition: opacity 1s;
}
#cpcontent .anime .scene1 .btns .btn_start{
  width: 510px;
  height: 114px;
  margin: 0 auto;
}

#cpcontent .anime .scene1 .cards{
  position: absolute;
  top: 420px;
  left: 420px;
}
#cpcontent .anime .scene1 .cards .card{
  background: none;
  width: 0;
  height: 0;
  position: absolute;
  transform: translate(0, 0);
  transition: transform 1s;
}
#cpcontent .anime .scene1 .cards .card img{
  position: absolute;
  width: 85px;
  height: 125px;
  left: -42px;
  top: -62px;
  transition: opacity 1.5s;
}

/*scene2*/
#cpcontent .anime .scene2{
  position: absolute;
  width: 840px;
  height: 840px;
  display: none;
}
#cpcontent .anime .scene2 .effect{
  position: absolute;
  opacity: 1;
  animation: effect1 3s linear infinite;
}
@keyframes effect1 {
	0% {opacity: 0;}
  29% {opacity: 0;}
  30% {opacity: 1;}
  35% {opacity: 0;}
  69% {opacity: 0;}
  70% {opacity: 1;}
  74% {opacity: 0;}
  75% {opacity: 1;}
  80% {opacity: 0;}
  100% {opacity: 0;}
}
#cpcontent .anime .scene2 .cards{
  position: absolute;
  top: 420px;
  left: 420px;
}
#cpcontent .anime .scene2 .cards .card{
  background: none;
  width: 0;
  height: 0;
  position: absolute;
  transform: translate(0, -300px);
  transition: all 2s linear;
}
#cpcontent .anime .scene2 .cards .card img{
  position: absolute;
  width: 100px;
  height: 144px;
  left: -50px;
  top: -72px;
  /*box-shadow:0px 0px 6px 1px #000000;
  border-radius:6px;*/
  /*animation: spin1 1.5s linear infinite;*/
}
@keyframes spin1 {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@keyframes spin2 {
	0% {transform: rotate(360deg);}
	100% {transform: rotate(0deg);}
}
@keyframes spin3 {
	0% {transform: rotate(360deg);}
	100% {transform: rotate(0deg);}
}


/*scene3*/
#cpcontent .anime .scene3{
  position: absolute;
  width: 840px;
  height: 840px;
  display: none;
}
#cpcontent .anime .scene3 .btns{
  padding: 608px 0 0 0;
  transition: opacity 0.5s;
}
#cpcontent .anime .scene3 .btns .btn_stop{
  width: 510px;
  height: 110px;
  margin: 0 auto;
}


/*scene5*/
#cpcontent .anime .scene5{
  position: absolute;
  width: 840px;
  height: 840px;
  display: none;
}
#cpcontent .anime .scene5 .cards{
  position: absolute;
  top: 420px;
  left: 420px;
}
#cpcontent .anime .scene5 .cards .card{
  background: none;
  width: 0;
  height: 0;
  position: absolute;
  transform: translate(0, -300px);
  transition: transform 0.1s linear;
}
#cpcontent .anime .scene5 .cards .card img{
  position: absolute;
  width: 100px;
  height: 144px;
  left: -50px;
  top: -72px;
  /*box-shadow:0px 0px 6px 1px #000000;
  border-radius:6px;*/
  transition: transform 0.1s linear;
}
#cpcontent .anime .scene5 .arrange{
  position: absolute;
  top: 420px;
  left: 420px;
  z-index: 100;
}
#cpcontent .anime .scene5 .arrange .card{
  background: none;
  width: 0;
  height: 0;
  position: absolute;
  opacity: 0;
  transform: translate(0, -300px);
  transition: all 1s ease;
}
#cpcontent .anime .scene5 .arrange .card img{
  position: absolute;
  width: 110px;
  height: 154px;
  left: -55px;
  top: -77px;
  /*box-shadow:0px 0px 18px 6px #ffffff;
  border-radius:6px;*/
  /*animation: glow 3s linear infinite;*/
}
@keyframes glow {
0% {box-shadow:0px 0px 10px 3px #ffffff;}
50% {box-shadow:0px 0px 15px 6px #ffffff;}
100% {box-shadow:0px 0px 10px 3px #ffffff;}
}
#cpcontent .anime .scene5 .arrange .card.pos1{
  transform: translate(0px, -100px);
}
#cpcontent .anime .scene5 .arrange .card.pos2{
  transform: translate(55px, 50px);
}
#cpcontent .anime .scene5 .arrange .card.pos3{
  transform: translate(0px, 200px);
}
#cpcontent .anime .scene5 .arrange .card.pos4{
  transform: translate(-55px, 50px);
}
#cpcontent .anime .scene5 .arrange .card.pos5{
  transform: translate(-165px, 50px);
}
#cpcontent .anime .scene5 .arrange .card.pos6{
  transform: translate(165px, 50px);
}
#cpcontent .anime .scene5 .arrange .card.pos7{
  transform: translate(0, -250px);
}
#cpcontent .anime .scene5 .arrange .card.pos8{
  transform: translate(300px, 50px);
}
#cpcontent .anime .scene5 .arrange .card.pos9{
  transform: translate(-300px, 50px);
}
#cpcontent .anime .scene5 .arrange .card.pos10{
  transform: translate(0, 350px);
}
#cpcontent .anime .scene5 .arrange .card.on{
  opacity: 1;
}
#cpcontent .anime .scene5 .arrange .card.pos1.on{
  transform: translate(0px, -150px);
}
#cpcontent .anime .scene5 .arrange .card.pos2.on{
  transform: translate(55px, 0px);
}
#cpcontent .anime .scene5 .arrange .card.pos3.on{
  transform: translate(0px, 150px);
}
#cpcontent .anime .scene5 .arrange .card.pos4.on{
  transform: translate(-55px, 0px);
}
#cpcontent .anime .scene5 .arrange .card.pos5.on{
  transform: translate(-165px, 0px);
}
#cpcontent .anime .scene5 .arrange .card.pos6.on{
  transform: translate(165px, 0px);
}
#cpcontent .anime .scene5 .arrange .card.pos7.on{
  transform: translate(0, -300px);
}
#cpcontent .anime .scene5 .arrange .card.pos8.on{
  transform: translate(300px, 0);
}
#cpcontent .anime .scene5 .arrange .card.pos9.on{
  transform: translate(-300px, 0);
}
#cpcontent .anime .scene5 .arrange .card.pos10.on{
  transform: translate(0, 300px);
}


/*scene6*/
#cpcontent .anime .scene7{
  position: absolute;
  width: 840px;
  height: 840px;
  display: none;
  z-index: 600;
}
#cpcontent .anime .scene7 .btns{
  margin: 608px 0 0 0;
  transition: opacity 0.5s;
  position: relative;
}
#cpcontent .anime .scene7 .btns a{
  position: absolute;
}
#cpcontent .anime .scene7 .btns .btn_free{
  width: 406px;
  height: 110px;
  top: 0;
  left: 25px;
}
#cpcontent .anime .scene7 .btns .btn_pay{
  width: 406px;
  height: 110px;
  top: 0;
  right: 25px;
}
#cpcontent .anime .scene7 .btns .btn_allfree{
  width: 410px;
  height: 110px;
  top: 0;
  left: 50%;
  margin: 0 0 0 -215px;
}