@charset "utf-8";

@keyframes magpopup_pc {
  from {
    transform: translateX(100px) translateY(-50%);
    opacity:0;
  }
  to {
    transform: translateX(0) translateY(-50%);
    opacity:100;
  }
}

@keyframes magpopup_sp {
  from {
    transform: translateX(0) translateY(30px);
    opacity:0;
  }
  to {
    transform: translateX(0) translateY(0);
    opacity:100;
  }
}

.magpop{
  position:fixed;
  left:auto;
  top:50%;
  right:-10px;
  bottom:auto;
  margin:0;
  width:132px;
  height:286px;
  max-width:100%;
  transform: translateX(100px) translateY(-50%);
  opacity:0;
  animation-name: magpopup_pc;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode:forwards;
  z-index: 999;
}
@media (max-width: 767px) {
  .magpop{
    position:fixed;
    left:auto;
  	top:auto;
    right:-10px;
    bottom:-15px;
    width:auto;
  	height:auto;
    max-width:283px;
    border-radius:10px;
    transform: translateX(0) translateY(30px);
    opacity:0;
	  animation-name: magpopup_sp;
	  animation-duration: 1s;
	  animation-delay: 1s;
	  animation-fill-mode:forwards;
  }
}

.magpop.hide{
	display:none;
}
@media (max-width: 767px) {
	.magpop.hide{
	}
}

.magpop-inner{
	display:block;
  text-align:center;
  position:relative;
}
@media (max-width: 767px) {
  .magpop-inner{
    
  }
}

.magpop-inner > a{
	display: block;
	z-index: 10;
}
.magpop-inner a:hover{
	text-decoration:none;
  cursor:pointer;
  opacity:0.7;
}
@media (max-width: 767px) {
  .magpop-inner > a{
  }
}


.magpop-inner figure{
  display:block;
}

.magpop-inner figure img{
  max-width:100%;
}
@media (max-width: 767px) {
  .magpop-inner figure img{
  	
  }
}

.magpop-inner figure img.pc{
  display:inline-block;
}
@media (max-width: 767px) {
  .magpop-inner figure img.pc{
  	display:none;
  }
}

.magpop-inner figure img.sp{
  display:none;
}
@media (max-width: 767px) {
  .magpop-inner figure img.sp{
  	display:inline-block;
  }
}


.magpop-inner button{
  margin:0 auto;
  padding:0;
  border:none;
  background-color:transparent
}
.magpop-inner button:hover{
  cursor:pointer;
  opacity:0.7;
}
.magpop-inner button.close{
	position:absolute;
	right:25px;
	top:10px;
	width:25px;
	height:25px;
	z-index: 11;
}
@media (max-width: 767px) {
  .magpop-inner button.close{
		right:auto;
		top:12px;
		left:12px;
		width:22px;
		height:22px;
  }
}

.magpop-inner button img{
  max-width:100%;
}