#card_first {
	position: absolute;
	top:220px;
	left:250px;
	height: 0px;
	overflow: hidden;
	opacity: 0;
	transition: 1.5s ease-in-out 1.5s;
}
#card_first.is-showup {
	opacity: 1;
	height: 423px;
}

.card_black {
	position: absolute;
	top:50px;
	left:150px;
}
#card_open {
	position: absolute;
	top:50px;
	left:150px;
	height: 705px;
	overflow: hidden;
	opacity: 0;
	transition: 0.8s ease-in-out 0s;
}
#card_open.is-show {
	opacity: 1;
}


.gacha_neko{
	position: absolute; 
	left: 510px; 
	top: 450px;
}

#mirror_light{
	position: absolute;
	top:100px;
	left:-400px;
	overflow: hidden;
	opacity: 1;
	transition: 1s ease-in-out 0s;
}
#mirror_light.move_up{
	opacity: 0;
	top:-800px;
	left:0px;
}

.card {
    position: relative;
    width: 500px;
}
.card_reverse {
    position: absolute;
    width: 500px;
    top: 0;
    left: 0;
}
 
/* 表面の表示 */
.card_surface {
    opacity: 1;
    transform: rotateY(0deg);
    transition:
        opacity 100ms 150ms,
        transform 600ms 50ms;
}
.card_reverse {
    opacity: 0;
    transform: rotateY(90deg);
    transition:
        opacity 50ms 200ms,
        transform 600ms;
}
 
/* 裏面の表示 */
.card_surface2 {
    opacity: 0;
    transform:rotateY(90deg);
    transition:
        opacity 50ms 200ms,
        transform 600ms;
}
.card_reverse2 {
    opacity: 1;
    transform:rotateY(0deg);
    transition:
        opacity 100ms 150ms,
        transform 600ms 50ms;
}



#talk_box2{
	position: absolute; 
	left: -200px; 
	top: 450px;
	width:0px;
	transform-origin: 0 0;
	transform: rotate(-10deg);
	overflow: hidden;
	opacity: .5;
	transition: 0.5s ease-in 1s;
}

#talk_box2.fade_in{
	opacity: 1;
	width:1200px;
}
#talk_box2.move_down2{
	top: 600px;
}

#gacha_dialog_base{
	position: relative; 
	left: 0px; 
	top: 0px;
	opacity: 1;
	width:1200px;
	background-color:#fff;
	transition: 0.5s ease-in;
}
#gacha_dialog_base.fade_out{
	opacity: 0;
}
#gacha_dialog_text{
	position: relative; 
	left: 200px; 
	top: 0px;
	width:780px;
	padding:20px 10px;
	font-size: 1.6em;
	line-height:1.5em;
	color:#000;
	border:0px solid red;
	text-align:center;
}
.kira{
	position: absolute; 
}
.kira_fadeout{
	position: absolute; 
}

.kira1{
	position: absolute; 
	left: 160px; 
	top: 160px;
	width:40px;
//	border:1px solid red;
}
.kira2{
	position: absolute; 
	left: 130px; 
	top: 200px;
	width:20px;
}
.kira3{
	position: absolute; 
	left: 660px; 
	top: 100px;
	width:50px;
}
.kira4{
	position: absolute; 
	left: 600px; 
	top: 600px;
	width:50px;
}
.kira5{
	position: absolute; 
	left: 200px; 
	top: 550px;
	width:30px;
}

/*
.show {
	opacity: 1;
//	visibility: visible;
	transform: translateY(0px);
}
*/


/*
$(function(){
    $(window).scroll(function (){
        $('.fadein_card').each(function(){
            var targetElement = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > targetElement - windowHeight + 200){
                $(this).css('opacity','1');
                $(this).css('transform','translateY(0)');
            }
        });
    });
});

.fadein_card {	
	position: absolute;
	top:0;
	left:0;
	overflow: hidden;
}
.fadein_card:before {
  animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes fadein_card {
  100% {
    transform: translateX(100%);
  }
}
*/