@charset "UTF-8";

/* ------ loading ------ */
#loading img {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 45px;
    /* height: 384px; */
    background: #fff;
    z-index: 9999;
    margin-right: auto;
    margin-left: auto;
    /* [disabled]right: 50%; */
    left: 47%;
    top: 25vh;
}

/* ------ navbar ------ */
@-webkit-keyframes animation-gHeader {
    0% {	opacity: 0;}
    50% {	opacity: 0;}
    100% {	opacity: 0.7;}
}
@keyframes animation-gHeader {
    0% {	opacity: 0;}
    50% {	opacity: 0;}
    100% {	opacity:0.7;}
}
.navbar.on {
    animation-name: animation-gHeader;
    animation-duration: 5s;
    animation-delay: 0;
    animation-fill-mode: forwards;
}

/* ------ stalker ------ */
#stalker {
    pointer-events: none;
    position: fixed;
    top: -13px;
    left: -13px;
    width: 26px;
    height: 26px;
    background: rgba(51,44,37,0.2);
    border-radius: 50%;
    transform: translate(0,0);
    transition: transform 0.2s;
    transition-timing-function: ease-out;
    z-index: 999;
}

/* ------ mainvisual ------ */
#mainvisual {
    position: relative;
      width: 100%;
      max-height: 100%;
      min-height: 100%;
  }

  @keyframes kenburnsDownLeft {
      0% {
      -ms-transform: scale(1.1);
      -webkit-transform: scale(1.1);
          transform: scale(1.1);
      }
      100% {
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
          transform: scale(1);
      }
  }
  .vegas-timer {  display: none;}

  @media screen and (max-width: 768px) {
      #mainvisual {
          min-height: 500px;
      height: 100vh;
          margin: 0;
      }
  }

  #mainvisual_wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
  }

/* ------ effect-scale ------ */
.effect-scale {
    width: 100%;
    /* [disabled]height: 220px; */
    overflow: hidden;
}
.effect-scale a {
    display: block;
}
.effect-scale img {
    object-fit: cover;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

/* works */
#works .work_list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}
#works .work_img img {
    width: 360px;
    height: 220px;
    object-fit: cover;
}

/* hover */
#works .work_list a:hover img {
	-webkit-transform: scale(1.03);
	transform: scale(1.03);
}