/*
 * ANIMATION
 * -------------------------------------------------------------------
*/
 .fade-in { opacity: 0;}
 /* ie11 ハック*/
 @media all and (-ms-high-contrast:none){
 .fade-in {
  opacity: 1;
 }
 }
 .in {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
 }
 
 @-webkit-keyframes fadeIn {
  from {
   opacity: 0;
  }
  to {
   opacity: 1;
  }
 }
 
 @keyframes fadeIn {
  from {
   opacity: 0;
  }
  to {
   opacity: 1;
  }
 }
 
 .fade-up {
  opacity: 0;
  transform: translate(0,30px);
  -webkit-transform: translate(0,30px);
 }
 /* ie11 ハック*/
 @media all and (-ms-high-contrast:none){
 .fade-up {
  opacity: 1;
  transform: translate(0,0);
  -webkit-transform: translate(0,0);
 }
 }
 .up {
  -webkit-animation-name: fadeUp;
  animation-name: fadeUp;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
 }
 
 .delay01 { animation-delay: 0.5s;}
 .delay02 { animation-delay: 1s;}
 @media screen and (max-width: 768px) {
  .delay01 { animation-delay: 0s;}
  .delay02 { animation-delay: 0s;}
 }
 
 @-webkit-keyframes fadeUp {
  from {
   opacity: 0;
   transform: translate(0,30px);
   -webkit-transform: translate(0,30px);
  }
  to {
   opacity: 1;
   transform: translate(0,0);
   -webkit-transform: translate(0,0);
  }
 }
 @keyframes fadeUp {
  from {
   opacity: 0;
   transform: translate(0,30px);
   -webkit-transform: translate(0,30px);
  }
  to {
   opacity: 1;
   transform: translate(0,0);
   -webkit-transform: translate(0,0);
  }
 }
 
 .mask_wrap{
  display: table;
  overflow: hidden;
 }
 .mask-wrap .mask{
  display: table;
  line-height: 0;
  position: relative;
  left: -100%;
  overflow: hidden;
 }
 .mask-wrap .mask-bg{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #111;
  z-index: 10;
 }
 .zoom {
  display: block;
  overflow: hidden;
 }
 .zoom img {
  display: block;
  @include transition;
 }
 a:hover .zoom img {
  transform:scaleX(1.1)scaleY(1.1);
  -webkit-filter:brightness(1.1);
  filter:brightness(1.1);
  @include max768 {
    transform: none;
    filter: none;
  }
 }

.focus {
  position: relative;
  display: block;
  overflow: hidden
}
.focus::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: solid 0 rgba(255, 255, 255, 0.5);
  @include transition;
}
a:hover .focus::after {
  border-width: 1.5rem;
  @include max768 {
    border-width: 0;
  }
}
.focus img {
  display: block;
  @include transition;
}
a:hover .focus img {
  -webkit-transform: scale(1.1) rotate(1deg);
  transform: scale(1.1) rotate(1deg);
  -webkit-filter:brightness(1.1);
  filter:brightness(1.1);
  @include max768 {
    transform: none;
    filter: none;
  }
}


/*
 * ANIMATION END
 * -------------------------------------------------------------------
*/