/* _setting CSS */
body {
  height: 100%;
  margin: 0;
  background: #000;
}

.h_line a:before {
  background: #fff;
}

#footer .inner {
  color: #fff;
}
#footer .inner .sns li a {
  border: 1px solid #fff;
}
#footer .inner .sns li a svg {
  stroke: #fff;
}
#footer .inner .sns .facebook svg {
  fill: #fff;
  stroke: none;
}

#wrapper {
  display: flex;
  position: relative;
  align-items: center;
  overflow: hidden;
  color: #fff;
}
#wrapper a {
  color: #fff;
}
#wrapper:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1 !important;
  width: 100%;
  height: 100%;
  background: #959696 url(../images/index/bg_img1.jpg) no-repeat center center/cover;
  transform: translate(-50%, -50%);
  transition: 5s;
  transition-delay: 0.8s;
  filter: grayscale(100%);
  writing-mode: inherit;
}
#wrapper .vis_wrap {
  position: relative;
  z-index: 100;
  width: 100%;
  opacity: 0;
  transition: 3.5s;
  transition-delay: 1.5s;
}
#wrapper .top_logo {
  position: relative;
  margin: 0 0 20px;
  color: #fff;
  font-size: 4.8rem;
  letter-spacing: 0.08em;
}
#wrapper .top_logo span {
  display: inline-block;
  transform: rotate(1deg) translateY(20px);
  transition: 1.5s ease-in-out;
  transition-delay: 1.4s;
}
#wrapper .top_link {
  display: flex;
  position: relative;
}
#wrapper .top_link li {
  margin: 0 55px 0 0;
  transform: rotate(3deg) translateY(25px);
  opacity: 0;
  transition: 1.6s ease-in-out;
  transition-delay: 1.6s;
}
#wrapper .top_link li:nth-of-type(2) {
  transition-delay: 1.7s;
}
#wrapper .top_link li:nth-of-type(3) {
  transition-delay: 1.8s;
}
#wrapper .top_link li:nth-of-type(4) {
  transition-delay: 1.9s;
}
#wrapper .top_link li a {
  display: block;
  position: relative;
  padding: 0 10px 0 23px;
  font-size: 2.8rem;
}
#wrapper .top_link li a:before {
  content: '';
  position: absolute;
  top: 45%;
  left: 0;
  width: 15px;
  height: 1px;
  background: #fff;
  transition: inherit;
}
#wrapper.sf_on:before {
  filter: grayscale(0);
}
#wrapper.sf_on .vis_wrap,
#wrapper.sf_on .top_logo span,
#wrapper.sf_on .top_link,
#wrapper.sf_on .top_link li {
  transform: rotate(0) translateY(0);
  opacity: 1;
}

.footer {
  z-index: 1;
  transition-delay: 3s;
}

/* min-width:751px | 751px ~
------------------------------------------------------------------------- */
@media screen and (min-width: 751px) {
  /* @media screen
  ------------------------------------------------------------------------- */
  #wrapper {
    padding: 0 14.28571vw;
  }

  /* @media screen
  ------------------------------------------------------------------------- */
}
/* ////.min-width:751px | 751px ~
---------------------------------------------------------------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
max-width:750px | ~ 750px
------------------------------------------------------------------------- */
@media screen and (max-width: 750px) {
  /* @media screen
  ------------------------------------------------------------------------- */
  #wrapper .top_logo {
    margin: 0 0 9.33333vw;
    font-size: 8vw;
    text-align: center;
  }
  #wrapper .top_logo span {
    transform: translateY(10vw);
    transition: 1.4s ease-in-out;
    transition-delay: 1s;
  }
  #wrapper .top_link {
    display: inline-block;
    position: relative;
  }
  #wrapper .top_link li {
    margin: 0 0 6.66667vw;
    transform: translateY(3vw);
    transition: 1.6s ease-in-out;
    transition-delay: 1.6s;
  }
  #wrapper .top_link li:nth-of-type(2) {
    transition-delay: 2s;
    transform: translateY(3.5vw);
  }
  #wrapper .top_link li:nth-of-type(3) {
    transition-delay: 2.4s;
    transform: translateY(4vw);
  }
  #wrapper .top_link li:nth-of-type(4) {
    transition-delay: 2.8s;
    transform: translateY(4.5vw);
  }
  #wrapper .top_link li:last-child {
    margin: 0;
  }
  #wrapper .top_link li a {
    display: inline-block;
    position: relative;
    padding: 0 0 0 23px;
    transition: 0.4s;
    font-size: 6.93333vw;
  }
  #wrapper .top_link li a:before {
    content: '';
    position: absolute;
    top: 45%;
    left: 0;
    width: 15px;
    height: 1px;
    background: #fff;
    transition: inherit;
  }
  #wrapper.sf_on:before {
    filter: grayscale(0);
  }
  #wrapper.sf_on .vis_wrap,
  #wrapper.sf_on .top_logo,
  #wrapper.sf_on .top_link,
  #wrapper.sf_on .top_link li {
    transform: rotate(0) translateY(0);
    opacity: 1;
  }

  /* @media screen
  ------------------------------------------------------------------------- */
}