@charset "UTF-8";

/* ========================================================
                      * Layout style *
========================================================= */

.card_link > a {
  color: #fff !important;
}

.lineUpModal.modaal-wrapper {
}

.lineUpModal .modaal-container {
  width: 35rem;
  background: none;
  box-shadow: none;
}

.lineUpModal .modaal-content-container {
  padding: 0;
  text-align: center;

}

.lineUpModalInner {
  position: relative;
  z-index: 0;
}

.lineUpModalInner img {
  width: 100%;
  max-width: 100%;
}

.lineUpModalInner .card {
}

.lineUpModalInner .card_back {
  position: absolute;
  top: 0;
  left: 0;
}

.lineUpModalInner .card_front{
  opacity: 1;
}

.lineUpModalInner .card_off {
}

.lineUpModalInner .card_hover {
  transition: opacity .2s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

/* active時*/
.modaal-focus .lineUpModalInner .card_back {
  animation: mawaru2 1s ease-in-out 0s 1 forwards;
}


.modaal-focus .lineUpModalInner .card_front {
  animation: mawaru 1s ease-in-out 0s 1 forwards;
}


@keyframes mawaru {
  0% {
    opacity: 0;
    transform: rotateY(180deg);
  }

  100% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

@keyframes mawaru2 {
  0% {
    opacity: 1;
    transform: rotateY(0deg);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotateY(180deg);
  }
}

.lineUpModal .modaal-close {
  opacity: 0;
  animation: mawaru 1s ease-in-out 0s 1 forwards;
  position: absolute;
  top: -3.4rem;
  right: -2.7rem;
  width: 3rem;
  height: 3rem;
  background: url(../../Contents/ImagesPkg/lp/2022AdventCalendar/close_btn2.svg) 0 0 no-repeat !important;
  background-size: 100% !important;
}

.lineUpModal .modaal-close::before,
.lineUpModal .modaal-close::after {
  display: none;
}

@keyframes close_btn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*=======================================
                    PC
========================================*/


@media screen and (min-width: 768px)  {

.lineUpModalInner .card_front a:hover .card_off {
  opacity: 0;
}

.lineUpModalInner .card_front a:hover .card_hover {
  opacity: 1;
}

}



/*=======================================
                    SP
========================================*/

@media only screen and (max-width: 767px) {

  .lineUpModal .modaal-inner-wrapper {
    padding: 0 !important;
  }


  .lineUpModal .modaal-container {
    width: calc(360 * (100vw / 375));
    height: calc(450 * (100vw / 375));
  }


  .lineUpModal .modaal-close {
    top: calc(-40 * (100vw / 375));
    right: calc(0 * (100vw / 375));
    width: calc(30 * (100vw / 375));
    height: calc(30 * (100vw / 375));
  }


  .lineUpModalInner .card_front .card_hover {
    display: none;
  }


}