@charset "UTF-8";
/* CSS Document */
/*
	base
-----------------------------------------------------------------------------------------------*/
/* 起点 */
.jsAnm {
  opacity: 0;
}

/* ふわっと
============================== */
.anmFadeIn.jsAnmStart {
  animation: anmFadeIn 1s ease 0.5s forwards;
}
@keyframes anmFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ふわっと消える
============================== */
.anmFadeOut.jsAnmStart {
  animation: anmFadeOut 1s ease 0.5s forwards;
}
@keyframes anmFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* 下からふわっと
============================== */
.anmFadeUp.jsAnmStart {
  animation: anmFadeUp 1s ease 0.5s forwards;
}
@keyframes anmFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 上からふわっと
============================== */
.anmFadeDown.jsAnmStart {
  animation: anmFadeDown 1s ease 0.5s forwards;
}
@keyframes anmFadeDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 右からふわっと
============================== */
.anmFadeRight.jsAnmStart {
  animation: anmFadeRight 1s ease 0.5s forwards;
}
@keyframes anmFadeRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 左からふわっと
============================== */
.anmFadeLeft.jsAnmStart {
  animation: anmFadeLeft 1s ease 0.5s forwards;
}
@keyframes anmFadeLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* updown フワフワ01
============================== */
@keyframes anmUpdown01 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.anmUpdown01.jsAnmStart {
  opacity: 0;
  animation:
    anmFadeIn 2s ease 0.5s forwards,
    anmUpdown01 5s ease 0s infinite;
}

/* リバース */
@keyframes anmUpdownR01 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
.anmUpdownR01.jsAnmStart {
  opacity: 0;
  animation:
    anmFadeIn 2s ease 0.5s forwards,
    anmUpdownR01 5s ease 0s infinite;
}

/* updown フワフワ02
============================== */
@keyframes anmUpdown02 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}
.anmUpdown02.jsAnmStart {
  opacity: 0;
  animation:
    anmFadeIn 2s ease 0.5s forwards,
    anmUpdown02 5s ease 0s infinite;
}

/* リバース */
@keyframes anmUpdownR02 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}
.anmUpdownR02.jsAnmStart {
  opacity: 0;
  animation:
    anmFadeIn 2s ease 0.5s forwards,
    anmUpdownR02 5s ease 0s infinite;
}

/* updown フワフワ03
============================== */
@keyframes anmUpdown03 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}
.anmUpdown03.jsAnmStart {
  opacity: 0;
  animation:
    anmFadeIn 2s ease 0.5s forwards,
    anmUpdown03 5s ease 0s infinite;
}

/* リバース */
@keyframes anmUpdownR03 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(0);
  }
}
.anmUpdownR03.jsAnmStart {
  opacity: 0;
  animation:
    anmFadeIn 2s ease 0.5s forwards,
    anmUpdownR03 5s ease 0s infinite;
}

/* ぼかし
============================== */
.anmBlur.jsAnmStart {
  animation: anmBlur 1.5s ease 0.5s forwards;
}
@keyframes anmBlur {
  from {
    opacity: 0;
    filter: blur(20px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* height 0 → 100%
============================== */
.anmH100.jsAnmStart {
  animation: anmH100 1s ease 0.5s forwards;
}
@keyframes anmH100 {
  from {
    opacity: 0;
    height: 0;
  }
  to {
    opacity: 1;
    height: 100%;
  }
}

/*
	要素
-----------------------------------------------------------------------------------------------*/
/* ページ全体
============================== */
#wrapper {
  opacity: 0;
  animation: anmFadeIn 0.8s ease 0.2s forwards;
}

/* list
============================== */
@media print, screen and (min-width: 813px) {
  .clm2 li.jsAnm,
  .clm3 li.jsAnm,
  .clm4 li.jsAnm {
    opacity: 0;
  }
  .clm2 li.jsAnm.jsAnmStart:nth-of-type(2n + 1),
  .clm3 li.jsAnm.jsAnmStart:nth-of-type(3n + 1),
  .clm4 li.jsAnm.jsAnmStart:nth-of-type(4n + 1) {
    animation: anmFadeUp 1s ease 0.5s forwards;
  }
  .clm2 li.jsAnm.jsAnmStart:nth-of-type(2n + 2),
  .clm3 li.jsAnm.jsAnmStart:nth-of-type(3n + 2),
  .clm4 li.jsAnm.jsAnmStart:nth-of-type(4n + 2) {
    animation: anmFadeUp 1s ease 0.8s forwards;
  }
  .clm3 li.jsAnm.jsAnmStart:nth-of-type(3n + 3),
  .clm4 li.jsAnm.jsAnmStart:nth-of-type(4n + 3) {
    animation: anmFadeUp 1s ease 1.1s forwards;
  }
  .clm4 li.jsAnm.jsAnmStart:nth-of-type(4n + 4) {
    animation: anmFadeUp 1s ease 1.4s forwards;
  }
}