@charset "utf-8";

/* FadeIn Animation */
.fadeInLeft {
  opacity: 0;
  transition: all 0.3s ease;
  transition-delay: 0.3s;
  transform: translateX(-100px);
}

.fadeInRight {
  opacity: 0;
  transition: all 0.3s ease;
  transition-delay: 0.3s;
  transform: translateX(100px);
}

.fadeInUp {
  opacity: 0;
  transition: all 0.3s ease;
  transition-delay: 0.3s;
  transform: translateY(100px);
}

.fadeInLeft.lazyloaded,
.fadeInRight.lazyloaded,
.fadeInUp.lazyloaded {
  opacity: 1;
  transform: translate(0, 0);
}

/* ローディング */
.load {
  opacity: 1;
  transform: scale(1, 1);
  transition: all 1s ease-in-out;
}

.load.animated {
  opacity: 0;
  transform: scale(3, 3);
}

.load .load_cloud01,
.load .load_cloud03 {
	transform: translateX(-100%);
  animation: slideInLeft 1s ease-out 0.5s forwards;
  -webkit-animation: slideInLeft 1s ease-out 0.5s forwards;
}

.load .load_cloud02 {
	transform: translateX(100%);
  animation: slideInRight 1s ease-out 0.5s forwards;
  -webkit-animation: slideInRight 1s ease-out 0.5s forwards;
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

@-webkit-keyframes slideInLeft {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

@-webkit-keyframes slideInRight {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

/* MV fadeIn */
.mv .mv_logo {
  opacity: 0;
}

.mv .mv_allimage,
.mv .mv_text,
.mv .mv_mark01,
.mv .mv_mark02 {
  opacity: 0;
  transform: translateY(50px);
}

.mv .mv_logo {
  transition: all 1s ease-in-out 2s;
}

.mv .mv_allimage {
  transition: all 0.5s ease-in-out 0.5s;
}

.mv .mv_text {
  transition: all 0.5s ease-in-out 0.8s;
}

.mv .mv_mark01 {
  transition: all 0.5s ease-in-out 1.3s;
}

.mv .mv_mark02 {
  transition: all 0.5s ease-in-out 1.3s;
}

.mv .mv_logo.animated {
  opacity: 1;
}

.mv .mv_logo.animated,
.mv .mv_allimage.animated,
.mv .mv_text.animated,
.mv .mv_mark01.animated,
.mv .mv_mark02.animated {
  opacity: 1;
  transform: translateY(0);
}

.mv .mv_chopper {
  transform: translateX(67%);
}

.mv .mv_lufy {
  transform: translateX(-27%);
}

.mv .mv_chopper,
.mv .mv_lufy {
  transition: transform 0.5s ease-in-out;
}

.mv .mv_chopper.animated,
.mv .mv_lufy.animated {
  transform: translateX(0);
}

@media (max-width: 1024px) {
  .mv .mv_chopper {
    transform: translateX(42%);
  }

  .mv .mv_lufy {
    transform: translateX(-14%);
  }
}

/* MENU */
#nav label.button {
  transform: translateY(-100%);
  transition: transform 0.3s ease-in 2s;
}

#nav label.button.animated {
  transform: translateY(0);
}

/* ご注文確認メールが届かないお客様へ */
.mail-tab {
  transform: translate(-100%, -50%);
  transition: all 0.5s ease-in 2s;
}

.mail-tab.animated {
  transform: translate(0, -50%);
}

@media (max-width: 1024px) {
  .mail-tab {
    transform: translate(0, 100%) !important;
  }
  .mail-tab.animated {
    transform: translate(0, 0) !important;
  }
}

/* 早期割引 */
.discount_fixed {
  transition: opacity 0.5s ease-in 2s;
}

.discount_fixed.animated {
  transform: translateY(0);
  opacity: 1;
}

.discount_fixed.delete {
  display: none;
}

/* 付属品　ぴょんと跳びながら出現 */
.goods .goods_chara {
  opacity: 0;
  transform: translateY(150px);
  transition: opacity 0.5s ease;
}

.bounceIn {
  animation: bounce-in 1s cubic-bezier(0.28, 0.84, 0.42, 1) forwards;
  -webkit-animation: bounce-in 1s cubic-bezier(0.28, 0.84, 0.42, 1) forwards;
}
@media (max-width: 1024px) {
  .bounceIn {
    animation: bounce-in-sp 1s cubic-bezier(0.14, 0.42, 0.21, 1) forwards;
    -webkit-animation: bounce-in-sp 1s cubic-bezier(0.14, 0.42, 0.21, 1)
      forwards;
  }
}
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }

  50% {
    opacity: 1;
    transform: translateY(0);
  }

  70% {
    opacity: 1;
    transform: translateY(45px);
  }

  85% {
    opacity: 1;
    transform: translateY(-8px);
  }

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

@-webkit-keyframes bounce-in {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }

  50% {
    opacity: 1;
    transform: translateY(-30px);
  }

  70% {
    opacity: 1;
    transform: translateY(15px);
  }

  85% {
    opacity: 1;
    transform: translateY(-8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes bounce-in-sp {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }

  50% {
    opacity: 1;
    transform: translateY(0);
  }

  70% {
    opacity: 1;
    transform: translateY(22px);
  }

  85% {
    opacity: 1;
    transform: translateY(-4px);
  }

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

@-webkit-keyframes bounce-in-sp {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }

  50% {
    opacity: 1;
    transform: translateY(-15px);
  }

  70% {
    opacity: 1;
    transform: translateY(7px);
  }

  85% {
    opacity: 1;
    transform: translateY(-4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* .menu 駒のように回る */
/* .menu .rotate_img {
    -webkit-animation: 4s rotate-interval 2s cubic-bezier(.74, .01, .35, .99) infinite forwards;
    animation: 4s rotate-interval 2s cubic-bezier(.74, .01, .35, .99) infinite forwards;
}

.menu .meat_lineup li:nth-child(2n) .rotate_img {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

.menu .seafood_lineup li:nth-child(2) .rotate_img,
.menu .seafood_lineup li:nth-child(4) .rotate_img,
.menu .seafood_lineup li:nth-child(5) .rotate_img,
.menu .seafood_lineup li:nth-child(7) .rotate_img,
.menu .seafood_lineup li:nth-child(10) .rotate_img,
.menu .seafood_lineup li:nth-child(12) .rotate_img,
.menu .seafood_lineup li:nth-child(13) .rotate_img,
.menu .seafood_lineup li:nth-child(15) .rotate_img {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

@media(max-width: 1024px) {
    .menu .seafood_lineup li:first-child .rotate_img,
    .menu .seafood_lineup li:nth-child(2n + 1) .rotate_img {
        -webkit-animation-delay: 2s !important;
        animation-delay: 2s !important;
    }

    .menu .seafood_lineup li:nth-child(2n) .rotate_img {
        -webkit-animation-delay: 4s;
        animation-delay: 4s;
    }
}

@-webkit-keyframes rotate-interval {
    0% {
        opacity: 1;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    30% {
        opacity: 1;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate-interval {
    0% {
        opacity: 1;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    30% {
        opacity: 1;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
} */

#meat .lightbox li .cy,
#seafood .lightbox li .cy {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: ease 1.4s;
  transition: ease 1.4s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  opacity: 0;
  -webkit-perspective: 150rem;
  perspective: 150rem;
}

#meat .lightbox li .cy.lazyloaded,
#seafood .lightbox li .cy.lazyloaded {
  opacity: 1;
  -webkit-transition-delay: 0 !important;
  transition-delay: 0 !important;
}

#meat .lightbox li .cy .front,
#seafood .lightbox li .cy .front {
  -webkit-transform: rotateY(540deg);
  transform: rotateY(540deg);
  -webkit-transition: 0.9s;
  transition: 0.9s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#meat .lightbox li .cy .back,
#seafood .lightbox li .cy .back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transition: 0.9s;
  transition: 0.9s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#meat .lightbox li .cy.lazyloaded .front,
#seafood .lightbox li .cy.lazyloaded .front {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

#meat .lightbox li .cy.lazyloaded .back,
#seafood .lightbox li .cy.lazyloaded .back {
  -webkit-transform: rotateY(-540deg);
  transform: rotateY(-540deg);
}

/* ランダム */
#seafood .lightbox li:nth-child(2) .cy,
#seafood .lightbox li:nth-child(2) .cy > * {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

#seafood .lightbox li:nth-child(3) .cy,
#seafood .lightbox li:nth-child(3) .cy > * {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

#seafood .lightbox li:nth-child(4) .cy,
#seafood .lightbox li:nth-child(4) .cy > * {
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

#seafood .lightbox li:nth-child(5) .cy,
#seafood .lightbox li:nth-child(5) .cy > * {
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}

#seafood .lightbox li:nth-child(6) .cy,
#seafood .lightbox li:nth-child(6) .cy > * {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

#seafood .lightbox li:nth-child(7) .cy,
#seafood .lightbox li:nth-child(7) .cy > * {
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

#seafood .lightbox li:nth-child(8) .cy,
#seafood .lightbox li:nth-child(8) .cy > * {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

#seafood .lightbox li:nth-child(9) .cy,
#seafood .lightbox li:nth-child(9) .cy > * {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

#seafood .lightbox li:nth-child(10) .cy,
#seafood .lightbox li:nth-child(10) .cy > * {
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

#seafood .lightbox li:nth-child(11) .cy,
#seafood .lightbox li:nth-child(11) .cy > * {
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}

#seafood .lightbox li:nth-child(12) .cy,
#seafood .lightbox li:nth-child(12) .cy > * {
  -webkit-transition-delay: 0.9s;
  transition-delay: 0.9s;
}

#seafood .lightbox li:nth-child(13) .cy,
#seafood .lightbox li:nth-child(13) .cy > * {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

#seafood .lightbox li:nth-child(14) .cy,
#seafood .lightbox li:nth-child(14) .cy > * {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

#seafood .lightbox li:nth-child(15) .cy,
#seafood .lightbox li:nth-child(15) .cy > * {
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

#seafood .lightbox li:nth-child(16) .cy,
#seafood .lightbox li:nth-child(16) .cy > * {
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}

#seafood .lightbox li:nth-child(17) .cy,
#seafood .lightbox li:nth-child(17) .cy > * {
  -webkit-transition-delay: 0.9s;
  transition-delay: 0.9s;
}

#seafood .lightbox li:nth-child(1) .cy.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#seafood .lightbox li:nth-child(2) .cy.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#seafood .lightbox li:nth-child(3) .cy.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#seafood .lightbox li:nth-child(4) .cy.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#seafood .lightbox li:nth-child(5) .cy.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#seafood .lightbox li:nth-child(6) .cy.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#seafood .lightbox li:nth-child(7) .cy.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#seafood .lightbox li:nth-child(8) .cy.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#seafood .lightbox li:nth-child(9) .cy.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#seafood .lightbox li:nth-child(10) .cy.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#seafood .lightbox li:nth-child(11) .cy.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#seafood .lightbox li:nth-child(12) .cy.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#seafood .lightbox li:nth-child(13) .cy.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#seafood .lightbox li:nth-child(14) .cy.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#seafood .lightbox li:nth-child(15) .cy.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#seafood .lightbox li:nth-child(16) .cy.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#meat .lightbox li:nth-child(1) .cy,
#meat .lightbox li:nth-child(1) .cy > * {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

#meat .lightbox li:nth-child(2) .cy,
#meat .lightbox li:nth-child(2) .cy > * {
  -webkit-transition-delay: 0.9s;
  transition-delay: 0.9s;
}

#meat .lightbox li:nth-child(3) .cy,
#meat .lightbox li:nth-child(3) .cy > * {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

#meat .lightbox li:nth-child(4) .cy,
#meat .lightbox li:nth-child(4) .cy > * {
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}

#meat .lightbox li:nth-child(5) .cy,
#meat .lightbox li:nth-child(5) .cy > * {
  -webkit-transition-delay: 0.9s;
  transition-delay: 0.9s;
}

#meat .lightbox li:nth-child(6) .cy,
#meat .lightbox li:nth-child(6) .cy > * {
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

#meat .lightbox li:nth-child(7) .cy,
#meat .lightbox li:nth-child(7) .cy > * {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

#meat .lightbox li:nth-child(8) .cy,
#meat .lightbox li:nth-child(8) .cy > * {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

#meat .lightbox li:nth-child(9) .cy,
#meat .lightbox li:nth-child(9) .cy > * {
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}

#meat .lightbox li:nth-child(10) .cy,
#meat .lightbox li:nth-child(10) .cy > * {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

#meat .lightbox li:nth-child(11) .cy,
#meat .lightbox li:nth-child(11) .cy > * {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

#meat .lightbox li:nth-child(12) .cy,
#meat .lightbox li:nth-child(12) .cy > * {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

#meat .lightbox li:nth-child(13) .cy,
#meat .lightbox li:nth-child(13) .cy > * {
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}

#meat .lightbox li:nth-child(14) .cy,
#meat .lightbox li:nth-child(14) .cy > * {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

#meat .lightbox li:nth-child(15) .cy,
#meat .lightbox li:nth-child(15) .cy > * {
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

#meat .lightbox li:nth-child(1) img.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#meat .lightbox li:nth-child(2) img.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#meat .lightbox li:nth-child(3) img.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#meat .lightbox li:nth-child(4) img.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#meat .lightbox li:nth-child(5) img.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#meat .lightbox li:nth-child(6) img.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#meat .lightbox li:nth-child(7) img.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#meat .lightbox li:nth-child(8) img.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#meat .lightbox li:nth-child(9) img.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#meat .lightbox li:nth-child(10) img.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#meat .lightbox li:nth-child(11) img.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#meat .lightbox li:nth-child(12) img.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#meat .lightbox li:nth-child(13) img.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#meat .lightbox li:nth-child(14) img.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#meat .lightbox li:nth-child(15) img.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

#meat .lightbox li:nth-child(16) img.lazyloaded {
  -webkit-transition-delay: unset;
  transition-delay: unset;
}

/* totop */
.totop {
  opacity: 0;
  transition: all 0.4s ease-in 2s;
}

.totop.animated {
  opacity: 1;
}