@charset "utf-8";

*,
*::before,
*::after {
  box-sizing: border-box;
}


a {
  text-decoration: none;
  color: #808080;
}

.loading.active .open_animation .container{
  position: absolute;
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  margin: 0;
  background-color: #fcfcfc;
  z-index: 9999;
}

.loading.open .open_animation .container{
  position: absolute;
  width: 100vw;
  height: 0vh;
  transition: 0.5s;
  z-index: 9998;
}

.loading.active .open_animation .container .icon {
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow:
    0 -30px 0 #eee,     /*  上  */
    21px -21px 0 #ddd,  /* 右上 */
    30px 0 0 #ccc,      /*  右  */
    21px 21px 0 #bbb,   /* 右下 */
    0 30px 0 #aaa,      /*  下  */
    -21px 21px 0 #999,  /* 左下 */
    -30px 0 0 #666,     /*  左  */
    -21px -21px 0 #000; /* 左上 */
  animation: rotate 1s steps(8) 0s infinite;
  z-index: 999;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.mask .mask_frontpage {
  width: 100vw;
  height: 100vh;
  display: block;
  position: absolute;
  background-color: #fff;
  background-image: radial-gradient(#f5f5f5 15%, transparent 10%);
  background-size: 10px 10px;
  opacity: 0.7;
  z-index: -70;
}

.mask .mask_other {
  width: 100vw;
  height: 100vh;
  display: block;
  position: absolute;
  opacity: 0.3;
  z-index: -70;
}

/* /////////////////////////////////// */
/* アニメーション */
/* /////////////////////////////////// */

@keyframes open-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes header-animation {
  0% {
    opacity: 0;
    transform: translateY(-10vh);
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0vh);
  }
}

@keyframes menu-animation {
  0% {
    opacity: 0;
    transform: translateY(10vh);
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0vh);
  }
}

@keyframes footer-animation {
  0% {
    opacity: 0;
    transform: translateY(10vh);
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0vh);
  }
}

.loading_otherpage.active .open_animation {
  animation: open-animation 0.5s infinite;
}

.header.active .container {
  animation: header-animation 0.3s;
}

.wrapper.active section:nth-of-type(1) .container .block {
  animation: menu-animation 0.7s;
}

.footer.active {
  animation: footer-animation 1s;
}

/* /////////////////////////////////// */
/* ヘッダーデザイン */
/* /////////////////////////////////// */

@media(max-width:919px) {
  .header {
    visibility: hidden;
  }
  
  .header.active {
    visibility: visible;
    z-index: 90;
  }
  
  header {
    position: absolute;
  }
  
  header .container {
    width: 100vw;
  }
  
  header .container .block {
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 20px;
    margin-bottom: 10px;
  }
  
  header .container .block h1 {
    font-size: 1rem;
    letter-spacing: 2px;
    line-height: 3rem;
    color: #181516;
  }
}

@media(min-width:920px){
  header .container .block h1 {
    font-size: 1rem;
    letter-spacing: 2px;
    line-height: 3rem;
    color: #181516;
  }

  header .container .block {
    padding-top: 50px;
    padding-left: 20vw;
    padding-bottom: 5px;
    margin-bottom: 5px;
  }
}