/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 05 2022 | 01:51:38 */
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 29 2022 | 05:03:54 */
.bgextend, .bgappear, .bgUextend img, .bgDextend img, .bgRextend img, .bgLextend img {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  /*背景色が伸びて出現 共通*/ }

.bgextend {
  animation-name: bgextendAnimeBase;
  position: relative;
  /*　はみ出た色要素を隠す　*/
  overflow: hidden; }

@keyframes bgextendAnimeBase {
  /*中の要素*/
  from {
    opacity: 0; }

  to {
    opacity: 1; } }

.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-delay: 0.6s; }

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

  100% {
    opacity: 1; } }

.bgUextend::before, .bgDextend::before, .bgRextend::before, .bgLextend::before {
  animation-duration	: 1s;
  animation-fill-mode	: forwards;
  content				: "";
  position			: absolute;
  width				: 100%;
  height				: 100%;
  background-color	: black;
  /*伸びる背景色の設定*/
  /*--------- 上から --------*/ }

.bgUextend img {
  animation-name	: bgIMGextendAnime; }
  .bgUextend::before {
    animation-name	: bgUextendAnime; }

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

  50% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@keyframes bgUextendAnime {
  /*--------- 下から --------*/
  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); } }

.bgDextend img {
  animation-name	: bgIMGextendAnime; }
  .bgDextend::before {
    animation-name	: bgDextendAnime; }

@keyframes bgDextendAnime {
  /*--------- 左から --------*/
  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); } }

.bgRextend img {
  animation-name	: bgIMGextendAnime; }
  .bgRextend::before {
    animation-name	: bgRextendAnime; }

@keyframes bgRextendAnime {
  /*--------- 右から --------*/
  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); } }

.bgLextend img {
  animation-name	: bgIMGextendAnime; }
  .bgLextend::before {
    animation-name	: bgLextendAnime; }

@keyframes bgLextendAnime {
  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); } }