#mekureru-box{
  position: fixed;
}

#mekureru-anime{
  position: fixed;
}

#mekureru-anime.size100{
  animation: scaleAnimation100 2.5s infinite alternate;
}

#mekureru-anime.size200{
  animation: scaleAnimation200 2.5s infinite alternate;
}



#mekureru-outside.mekureru-anime{
  opacity: 0;
}

.mekureru-box:hover #mekureru-outside {
  opacity: 1;
  width: 400px;   /* マウスオーバー時の幅 */
  height: 400px;  /* マウスオーバー時の高さ */
}

#mekureru-outside {
  /*  position: fixed; */
  position: fixed;
  border: 0px none transparent;
  -webkit-transition: 3s;
  /* For Safari 3.1 to 6.0 */
  transition: width 2s, height 2s, opacity 2s; 
  z-index: 99998;
  /* animation: scaleAnimation 2.5s infinite alternate; */
  margin-top: 0;
}

#mekureru-outside.mekureru-topleft {
  top: 0;
  left: 0;
}

#mekureru-outside.mekureru-topright {
  top: 0;
  right: 0;
}

#mekureru-outside.size100 {
  width: 100px;
  height: 100px;
}

#mekureru-outside.size200 {
  width: 200px;
  height: 200px;
}


#mekureru-anime.mekureru-topleft {
  top: 0;
  left: 0;
}

#mekureru-anime.mekureru-topright {
  top: 0;
  right: 0;
}
/*
@media screen and (max-width: 600px) {
  #mekureru-outside.sp-none {
    display: none;
  }
}
*/

/*
@media only screen and (max-device-width : 768px) {
*/

@media screen and (max-width: 600px) {
  /* Styles */
  #mekureru-outside {
    position: fixed;
    width: 100px;
    height: 100px;
    border: 0px none transparent;
    /* For Safari 3.1 to 6.0 */
    animation: scaleAnimation100 2.5s infinite alternate;
    z-index: 99998;
    background-size: 100px 100px !important;
  }
  #mekureru-outside.mekureru-anime{
    opacity: 1 ;
  }

  #mekureru-outside.sp-none {
    display: none;
  }

  #mekureru-anime {
    display: none;
/*    opacity: 0 ;  */
  }

  #mekureru-inside.mekureru-topleft{
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(243, 243, 243, 0.3) 45%, rgba(221, 221, 221, 0.3) 50%, rgb(170, 170, 170) 50%, rgb(187, 187, 187) 56%, rgb(204, 204, 204) 62%, rgb(243, 243, 243) 80%, rgb(255, 255, 255) 100%) repeat scroll 0% 0%, transparent !important;
  }
  
  #mekureru-inside.mekureru-topright{
    background: linear-gradient(225deg, rgba(255, 255, 255, 0), rgba(243, 243, 243, 0.3) 45%, rgba(221, 221, 221, 0.3) 50%, rgb(170, 170, 170) 50%, rgb(187, 187, 187) 56%, rgb(204, 204, 204) 62%, rgb(243, 243, 243) 80%, rgb(255, 255, 255) 100%) repeat scroll 0% 0%, transparent !important;
  }
}

@keyframes scaleAnimation200 {
  0% {
    width: 70px;
    height: 70px;
  }

  100% {
    width: 200px;
    height: 200px;
  }
}

@keyframes scaleAnimation100 {
  0% {
    width: 50px;
    height: 50px;
  }

  100% {
    width: 100px;
    height: 100px;
  }
}



#mekureru-outside:hover {
  border: 0px none transparent;
  width: 400px;
  height: 400px;
}

#mekureru-outside:hover #mekureru-inside {
  opacity: 1;
  transition: opacity 0.1s;
}

#mekureru-inside {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0px none transparent;
  transition: opacity 0.1s 2.9s;
}


#mekureru-inside.mekureru-topleft {
  top: 0;
  left: 0;
}

#mekureru-inside.mekureru-topright {
  top: 0;
  right: 0;
}

/*
#mekureru-inside {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(243, 243, 243, 0.3) 45%, rgba(221, 221, 221, 0.3) 50%, rgb(170, 170, 170) 50%, rgb(187, 187, 187) 56%, rgb(204, 204, 204) 62%, rgb(243, 243, 243) 80%, rgb(255, 255, 255) 100%) repeat scroll 0% 0%, transparent;
  background-image: url(http://mytestsite.local/wp-content/uploads/2023/06/「ビジネスで成功する一番の方法は、人からいくら取れるかをいつも考えるのではなく、人にどれだけのことをしてあげられるかを考えることである。-」-27.png);
  background-repeat: no-repeat;
  background-position: top left;
  border: 0px none transparent;
  transition: opacity 0.1s 2.9s;
}
*/

#mekureru-corner {
  position: absolute;
  width: 100%;
  height: 100%;
}

#mekureru-corner.mekureru-topleft {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(243, 243, 243, 0.3) 45%, rgba(221, 221, 221, 0.3) 50%, rgb(170, 170, 170) 50%, rgb(187, 187, 187) 56%, rgb(204, 204, 204) 62%, rgb(243, 243, 243) 80%, rgb(255, 255, 255) 100%) repeat scroll 0% 0%, transparent no-repeat scroll 0% 0%;
}

#mekureru-corner.mekureru-topright {
  background: linear-gradient(225deg, rgba(255, 255, 255, 0), rgba(243, 243, 243, 0.3) 45%, rgba(221, 221, 221, 0.3) 50%, rgb(170, 170, 170) 50%, rgb(187, 187, 187) 56%, rgb(204, 204, 204) 62%, rgb(243, 243, 243) 80%, rgb(255, 255, 255) 100%) repeat scroll 0% 0%, transparent no-repeat scroll 0% 0%;
}


#mekureru-corner a {
  display: block;
  height: 100%;
  width: 100%;
  text-decoration: none;
  background-color: transparent;
  border: none;
}

#mekureru-corner a:active {
  outline: none;
}