/*---------------------------------
	mobile
---------------------------------*/
@media screen and (max-width: 768px) {
  body {
    background: url(../img/bg.jpg) repeat center top #a0a0a0;
    background-size: auto 100%;
  }
  header {
    width: 100%;
    height: 60px;
  }
  .cloud li.c_01 {
    top: 30%;
  }
  .cloud li.c_02 {
    top: 55%;
  }
  .cloud li.c_03 {
    top: 50%;
  }
  .cloud li.c_04 {
    top: 5%;
  }
  .cloud li.c_05 {
    top: 15%;
  }
  /*---------------------------------
	section
  ---------------------------------*/
  section#contents {
    min-height: 600px;
  }
  /*---------------------------------
	slider
  ---------------------------------*/
  div.slider {
    min-height: 600px;
    margin: 54px auto 0 auto;
  }
  div.slider .arrow {
    width: 40px;
    height: 63px;
    top: calc(50% - 60.5px);
  }
  div.slider .arrow.left {
    left: calc(50% - 220px);
  }
  div.slider .arrow.right {
    right: calc(50% - 220px);
  }
  div.slider .arrow.left:hover {
    transform: translateX(0);
  }
  div.slider .arrow.right:hover {
    transform: translateX(0) scaleX(-1);
  }
  div.slider ul.list {
    min-height: 600px;
    left: calc(50% - 175px);
  }
  div.slider ul.list li.left {
    transform: translate3d(-320px, 37px, 0);
  }
  div.slider ul.list li.center {
    transform: translate3d(0, 0, 0);
    width: 350px;
  }
  div.slider ul.list li.right {
    transform: translate3d(370px, 37px, 0);
  }

  /*---------------------------------
	card-layout
  ---------------------------------*/
  div.card {
    width: 350px;
    height: 520px;
    top: calc(50% - 289.5px);
    left: calc(50% - 175px);
  }
  div.card .front {
    width: 350px;
    height: 520px;
  }
  div.card li.domitore {
    top: 89px;
    right: 0;
    width: 91px;
  }
  div.card li.airou {
    top: 145px;
    right: 140px;
    width: 38px;
  }
  div.card li.ena {
    top: 134px;
    right: 61px;
    width: 47px;
  }
  div.card li.honda {
    top: 90px;
    left: 65px;
    width: 181px;
  }
  div.card li.ryunosuke {
    top: 158px;
    right: 40px;
    width: 94px;
  }
  div.card li.mochi {
    top: 83px;
    left: 90px;
    width: 158px;
  }
  div.card li.garuku {
    top: 232px;
    left: 22px;
    width: 71px;
  }
  div.card li.card_text {
    bottom: 0;
    left: 0;
  }
  div.card li.zeni {
    bottom: 145px;
    left: 110px;
    width: 22px;
  }
  div.card li.green {
    top: -1221px;
    left: 2px;
  }
  .animate div.card li.green {
    animation: confetti_green 45s linear infinite;
    -webkit-animation: confetti_green 45s linear infinite;
    -ms-animation: confetti_green 45s linear infinite;
  }
  div.card li.yellow {
    top: -280px;
    left: 40px;
  }
  .animate div.card li.yellow {
    animation: confetti_yellow 45s linear infinite;
    -webkit-animation: confetti_yellow 45s linear infinite;
    -ms-animation: confetti_yellow 45s linear infinite;
  }
  div.card li.white {
    top: -280px;
    left: 18px;
  }
  .animate div.card li.white {
    animation: confetti_white 15s linear infinite;
    -webkit-animation: confetti_white 15s linear infinite;
    -ms-animation: confetti_white 15s linear infinite;
  }
  /*---------------------------------
	bnrArea
---------------------------------*/
  #bnrArea {
    background: rgba(0, 0, 0, 0.8);
  }
  #bnrArea ul {
    flex-wrap: wrap;
    width: 92%;
    height: auto;
    margin: 0 auto;
    padding: 20px 0;
  }
  #bnrArea ul li {
    width: 48%;
    margin: 0 1% 20px;
  }
  #bnrArea ul li a {
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: opacity 0.3s;
  }
  #bnrArea ul li a:hover {
    opacity: 0.8;
  }
  /*---------------------------------
	footer
---------------------------------*/
  footer {
    width: 100%;
  }
  /*---------------------------------
    move
  ---------------------------------*/
  @keyframes confetti_green {
    0% {
      top: -1221px;
    }
    100% {
      top: 0px;
    }
  }

  @keyframes confetti_yellow {
    0% {
      top: -986px;
    }
    100% {
      top: 0px;
    }
  }
  @keyframes confetti_white {
    0% {
      top: -280px;
    }
    100% {
      top: -32px;
    }
  }
  @keyframes airou {
    0% {
      transform: translate(0, 0) rotate(-40deg);
    }
    3% {
      transform: translate(0, 0) rotate(-40deg);
    }
    25% {
      transform: translate(20px, -20px) rotate(-20deg);
    }
    50% {
      transform: translate(40px, 0) rotate(0deg);
    }
    56% {
      transform: translate(40px, 0) rotate(0deg);
    }
    75% {
      transform: translate(20px, -20px) rotate(-20deg);
    }
    97% {
      transform: translate(0, 0) rotate(-40deg);
    }
    100% {
      transform: translate(0, 0) rotate(-40deg);
    }
  }
  @keyframes honda {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    80% {
      transform: translate(-20px, -10px) rotate(-10deg);
    }
    100% {
      transform: translate(0, 0) rotate(0deg);
    }
  }
  @keyframes mochi {
    0% {
      transform: scaleX(1);
    }
    80% {
      transform: scaleX(1.33) rotate(-5.5deg) translate(-1.5px, -10px);
    }
    100% {
      transform: scaleX(1);
    }
  }
  @keyframes ryunosuke {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    80% {
      transform: translate(20px, -13px) rotate(10deg);
    }
    100% {
      transform: translate(0, 0) rotate(0deg);
    }
  }
  @keyframes garuku {
    0% {
      transform: translateY(0);
    }
    10% {
      transform: translateY(-10px);
    }
    20% {
      transform: translateY(0);
    }
    30% {
      transform: translateY(-10px);
    }
    40% {
      transform: translateY(0);
    }
    55% {
      transform: translateY(0);
    }
    70% {
      transform: translate(5px, -40px);
    }
    90% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes zeni {
    0% {
      transform: translate(0);
    }
    10% {
      transform: translate(2px, -2px);
    }
    50% {
      transform: translate(5px, 40px);
    }
    65% {
      transform: translate(0px, 45px);
      opacity: 1;
    }
    70% {
      transform: translate(0px, 50px);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
}