/***************************************************
 * Generated by SVG Artista on 3/24/2023, 1:23:54 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

@-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
  animation: animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}

@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
  animation: animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}

@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
  animation: animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}

@-webkit-keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
  animation: animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}

@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-5 {
  -webkit-animation: animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
  animation: animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
}

@-webkit-keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-6 {
  -webkit-animation: animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
  animation: animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
}

@-webkit-keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-7 {
  -webkit-animation: animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s both;
  animation: animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s both;
}


/* 繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ */
.ani01 {
  animation: fadeIn 5s linear;
  animation-fill-mode: both;
}

.ani02 {
  animation: fadeIn 0.6s linear;
  animation-fill-mode: both;
}

.ani03 {
  animation: fadeIn 0.9s linear;
  animation-fill-mode: both;
}

/* ---------------------------- */
/* --- Animation --- */
/* ---------------------------- */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*-----*/

.item {
  transform: translateY(20px);
  opacity: 0;
  transition: .7s;
}

.item.show {
  transform: translateY(0);
  opacity: 1;
}

/*-----*/


/*==================================================
縺ｵ繧上▲
===================================*/

/* 縺昴�蝣ｴ縺ｧ */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 荳九°繧� */

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 荳翫°繧� */

.fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 蟾ｦ縺九ｉ */

.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadeLeft02 {
  animation-name: fadeLeftAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadeLeft03 {
  animation-name: fadeLeftAnime;
  animation-duration: 1.1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadeLeft04 {
  animation-name: fadeLeftAnime;
  animation-duration: 1.4s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 蜿ｳ縺九ｉ */

.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繧偵＠縺溘ｉ蜃ｺ迴ｾ縺吶ｋ隕∫ｴ�縺ｫ縺ｯ縺倥ａ縺ｫ騾城℃0繧呈欠螳壹€€*/

.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
  opacity: 0;
}

/*==================================================
  繝代ち繝�
  ===================================*/


/* 荳九∈ */
.flipDown {
  animation-name: flipDownAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes flipDownAnime {
  from {
    transform: perspective(2500px) rotateX(100deg);
    opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
    opacity: 1;
  }
}


/* 蟾ｦ縺ｸ */
.flipLeft {
  animation-name: flipLeftAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: left center;
  opacity: 0;
}

@keyframes flipLeftAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
    opacity: 0;
  }

  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}


/* 蟾ｦ荳翫∈ */
.flipLeftTop {
  animation-name: flipLeftTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes flipLeftTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(-15deg);
    opacity: 0;
  }

  to {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}

/* 蜿ｳ縺ｸ */
.flipRight {
  animation-name: flipRightAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: right center;
  opacity: 0;
}

@keyframes flipRightAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
    opacity: 0;
  }

  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}

/* 蜿ｳ荳翫∈ */
.flipRightTop {
  animation-name: flipRightTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes flipRightTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(25deg);
    opacity: 0;
  }

  to {
    transform: translate(0, 1) rotate(0deg);
    opacity: 1;
  }
}

/* 繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繧偵＠縺溘ｉ蜃ｺ迴ｾ縺吶ｋ隕∫ｴ�縺ｫ縺ｯ縺倥ａ縺ｫ騾城℃0繧呈欠螳壹€€*/

.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger {
  opacity: 0;
}

/*==================================================
  縺上ｋ縺｣
  ===================================*/


/* X 霆ｸ�育ｸｦ縺ｸ�� */
.rotateX {
  animation-name: rotateXAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotateXAnime {
  from {
    transform: rotateX(0);
    opacity: 0;
  }

  to {
    transform: rotateX(-360deg);
    opacity: 1;
  }
}

/*縲€Y霆ｸ�域ｨｪ縺ｸ�� */
.rotateY {
  animation-name: rotateYAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotateYAnime {
  from {
    transform: rotateY(0);
    opacity: 0;
  }

  to {
    transform: rotateY(-360deg);
    opacity: 1;
  }
}

/* Z 霆ｸ�亥ｷｦ縺ｸ�� */
.rotateLeftZ {
  animation-name: rotateLeftZAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotateLeftZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0;
  }

  to {
    transform: rotateZ(-360deg);
    opacity: 1;
  }
}

/*縲€Z 霆ｸ�亥承縺ｸ�� */
.rotateRightZ {
  animation-name: rotateRightZAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotateRightZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0;
  }

  to {
    transform: rotateZ(360deg);
    opacity: 1;
  }
}

/* 繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繧偵＠縺溘ｉ蜃ｺ迴ｾ縺吶ｋ隕∫ｴ�縺ｫ縺ｯ縺倥ａ縺ｫ騾城℃0繧呈欠螳壹€€*/

.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger {
  opacity: 0;
}

/*==================================================
  繝懊Φ繝�€√ヲ繝･繝�
  ===================================*/

/* 諡｡螟ｧ */
.zoomIn {
  animation-name: zoomInAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes zoomInAnime {
  from {
    transform: scale(0.6);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 邵ｮ蟆� */
.zoomOut {
  animation-name: zoomOutAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes zoomOutAnime {
  from {
    transform: scale(1.2);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繧偵＠縺溘ｉ蜃ｺ迴ｾ縺吶ｋ隕∫ｴ�縺ｫ縺ｯ縺倥ａ縺ｫ騾城℃0繧呈欠螳壹€€*/

.zoomInTrigger,
.zoomOutTrigger {
  opacity: 0;
}

/*==================================================
  縺倥ｏ縺｣
  ===================================*/

/* 縺ｼ縺九＠縺九ｉ蜃ｺ迴ｾ */
.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }

  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}

/* 繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繧偵＠縺溘ｉ蜃ｺ迴ｾ縺吶ｋ隕∫ｴ�縺ｫ縺ｯ縺倥ａ縺ｫ騾城℃0繧呈欠螳壹€€*/

.blurTrigger {
  opacity: 0;
}

/*==================================================
  縺ｫ繧��繧�
  ===================================*/

/* 貊代ｉ縺九↓螟牙ｽ｢縺励※蜃ｺ迴ｾ */
.smooth {
  animation-name: smoothAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  transform-origin: left;
  opacity: 0;
}

@keyframes smoothAnime {
  from {
    transform: translate3d(0, 100%, 0) skewY(12deg);
    opacity: 0;
  }

  to {
    transform: translate3d(0, 0, 0) skewY(0);
    opacity: 1;
  }
}

/* 繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繧偵＠縺溘ｉ蜃ｺ迴ｾ縺吶ｋ隕∫ｴ�縺ｫ縺ｯ縺倥ａ縺ｫ騾城℃0繧呈欠螳壹€€*/

.smoothTrigger {
  opacity: 0;
}

/*==================================================
  繧ｹ繝ｼ繝�ｼ域棧邱壹′莨ｸ縺ｳ縺ｦ蜃ｺ迴ｾ��
  ===================================*/

/*譫�邱壹′莨ｸ縺ｳ縺ｦ蜃ｺ迴ｾ*/

.lineTrigger {
  position: relative;
  /* 譫�邱壹′譖ｸ縺九ｌ繧句渕轤ｹ*/
  opacity: 0;
}

.lineTrigger.lineanime {
  animation-name: lineAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes lineAnimeBase {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*荳贋ｸ狗ｷ�*/
.lineTrigger::before,
.lineTrigger::after {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  background: #333;
  /* 譫�邱壹�濶ｲ*/
}

/*蟾ｦ蜿ｳ邱�*/
.line2::before,
.line2::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 0;
  background: #333;
  /* 譫�邱壹�濶ｲ*/
}

/*荳顔ｷ�*/
.lineTrigger::before {
  top: 0;
  left: 0;
}

.lineTrigger.lineanime::before {
  animation: lineAnime .5s linear 0s forwards;
  /*陦ｨ遉ｺ縺輔ｌ縺ｦ0遘貞ｾ後↓荳顔ｷ壹′0.5遘偵°縺代※陦ｨ遉ｺ*/
}

/*蜿ｳ邱�*/
.line2::before {
  top: 0;
  right: 0;
}

.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 .5s linear .5s forwards;
  /*陦ｨ遉ｺ縺輔ｌ縺ｦ0.5遘貞ｾ後↓蜿ｳ邱壹′0.5遘偵°縺代※陦ｨ遉ｺ*/
}

/*荳狗ｷ�*/
.lineTrigger::after {
  bottom: 0;
  right: 0;
}

.lineTrigger.lineanime::after {
  animation: lineAnime .5s linear 1s forwards;
  /*陦ｨ遉ｺ縺輔ｌ縺ｦ1遘貞ｾ後↓荳狗ｷ壹′0.5遘偵°縺代※陦ｨ遉ｺ*/
}

/*蟾ｦ邱�*/
.line2::after {
  bottom: 0;
  left: 0;
}

.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 .5s linear 1.5s forwards;
  /*陦ｨ遉ｺ縺輔ｌ縺ｦ1.5遘貞ｾ後↓蟾ｦ邱壹′0.5遘偵°縺代※陦ｨ遉ｺ*/
}

@keyframes lineAnime {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@keyframes lineAnime2 {
  0% {
    height: 0%;
  }

  100% {
    height: 100%;
  }
}

/*譫�邱壼�蛛ｴ縺ｮ隕∫ｴ�*/

.lineTrigger.lineanime .lineinappear {
  animation: lineInnerAnime .5s linear 1.5s forwards;
  /*1.5遘貞ｾ後↓荳ｭ螟ｮ縺ｮ繧ｨ繝ｪ繧｢縺�0.5遘偵°縺代※陦ｨ遉ｺ*/
  opacity: 0;
  /*蛻晄悄蛟､繧帝€城℃0縺ｫ縺吶ｋ*/
}

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

  100% {
    opacity: 1;
  }
}


/*==================================================
  繧ｷ繝｣繝�ｼ郁レ譎ｯ濶ｲ縺御ｼｸ縺ｳ縺ｦ蜃ｺ迴ｾ��
  ===================================*/

/*閭梧勹濶ｲ縺御ｼｸ縺ｳ縺ｦ蜃ｺ迴ｾ�亥�騾夲ｼ�*/
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  /*縲€縺ｯ縺ｿ蜃ｺ縺溯牡隕∫ｴ�繧帝國縺吶€€*/
  opacity: 0;
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*荳ｭ縺ｮ隕∫ｴ�*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

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

  100% {
    opacity: 1;
  }
}

/*蟾ｦ縺九ｉ*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*莨ｸ縺ｳ繧玖レ譎ｯ濶ｲ縺ｮ險ｭ螳�*/
}

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }

  50% {
    transform-origin: left;
    transform: scaleX(1);
  }

  50.001% {
    transform-origin: right;
  }

  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

/*蜿ｳ縺九ｉ*/
.bgRLextend::before {
  animation-name: bgRLextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*莨ｸ縺ｳ繧玖レ譎ｯ濶ｲ縺ｮ險ｭ螳�*/
}

@keyframes bgRLextendAnime {
  0% {
    transform-origin: right;
    transform: scaleX(0);
  }

  50% {
    transform-origin: right;
    transform: scaleX(1);
  }

  50.001% {
    transform-origin: left;
  }

  100% {
    transform-origin: left;
    transform: scaleX(0);
  }
}

/*荳九°繧�*/
.bgDUextend::before {
  animation-name: bgDUextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*莨ｸ縺ｳ繧玖レ譎ｯ濶ｲ縺ｮ險ｭ螳�*/
}

@keyframes bgDUextendAnime {
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
  }

  50% {
    transform-origin: bottom;
    transform: scaleY(1);
  }

  50.001% {
    transform-origin: top;
  }

  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}

/*荳翫°繧�*/
.bgUDextend::before {
  animation-name: bgUDextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*莨ｸ縺ｳ繧玖レ譎ｯ濶ｲ縺ｮ險ｭ螳�*/
}

@keyframes bgUDextendAnime {
  0% {
    transform-origin: top;
    transform: scaleY(0);
  }

  50% {
    transform-origin: top;
    transform: scaleY(1);
  }

  50.001% {
    transform-origin: bottom;
  }

  100% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
}

/* 繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繧偵＠縺溘ｉ蜃ｺ迴ｾ縺吶ｋ隕∫ｴ�縺ｫ縺ｯ縺倥ａ縺ｫ騾城℃0繧呈欠螳壹€€*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger {
  opacity: 0;
}




/*==================================================
  繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ險ｭ螳�
  ===================================*/

/* 繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ縺ｮ蝗樊焚繧呈ｱｺ繧√ｋCSS*/

.count2 {
  animation-iteration-count: 2;
  /*縺薙�謨ｰ蟄励ｒ蠢�ｦ∝屓謨ｰ蛻�↓螟画峩*/
}

.countinfinite {
  animation-iteration-count: infinite;
  /*辟｡髯舌Ν繝ｼ繝�*/
}

/* 繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ繧ｹ繧ｿ繝ｼ繝医�驕�ｻｶ譎る俣繧呈ｱｺ繧√ｋCSS*/

.delay-time05 {
  animation-delay: 0.5s;
}

.delay-time1 {
  animation-delay: 1s;
}

.delay-time15 {
  animation-delay: 1.5s;
}

.delay-time2 {
  animation-delay: 2s;
}

.delay-time25 {
  animation-delay: 2.5s;
}

/* 繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ閾ｪ菴薙′螟牙喧縺吶ｋ譎る俣繧呈ｱｺ繧√ｋCSS*/

.change-time05 {
  animation-duration: 0.5s;
}

.change-time1 {
  animation-duration: 1s;
}

.change-time15 {
  animation-duration: 1.5s;
}

.change-time2 {
  animation-duration: 2s;
}

.change-time25 {
  animation-duration: 2.5s;
}