@charset "UTF-8";

.header {
  width: 100%;
}

.header-inner {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.top-mv {
  width: 50%;
}

.top-title {
  position: relative;
  width: 48%;
}

.top-logo {
  width: 100%;
  margin: 0 0 2.5rem;
  text-align: center;
}

.top-logo img {
  width: 95%;
}

.top-lead {
  width: 100%;
  text-align: center;
}

.top-lead img {
  width: 80%;
}

.top-logo img {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1))
    drop-shadow(0 0 6px rgba(255, 255, 255, 1))
    drop-shadow(0 0 6px rgba(255, 255, 255, 1));
}

.top-lead img {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1))
    drop-shadow(0 0 6px rgba(255, 255, 255, 1))
    drop-shadow(0 0 6px rgba(255, 255, 255, 1));
}

@media screen and (min-width: 1px) and (max-width: 743px) {
  .top-mv {
    width: 100%;
    background-color: #fff;
  }

  .top-mv img {
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #000 10%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #000 10%);
  }

  .top-title {
    width: 100%;
    padding: 13% 0 0;
    background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 60%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .top-logo {
    position: absolute;
    top: -9rem;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: center;
    z-index: 2;
  }

  .top-logo img {
    width: 94%;
  }

  .top-logo img {
    filter:
      drop-shadow(0 0 6px rgba(255, 255, 255, 1))
      drop-shadow(0 0 6px rgba(255, 255, 255, 1));
  }

  .top-lead img {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 1))
      drop-shadow(0 0 4px rgba(255, 255, 255, 1))
      drop-shadow(0 0 4px rgba(255, 255, 255, 1))
      drop-shadow(0 0 4px rgba(255, 255, 255, 1));
  }
}

@media screen and (min-width: 744px) and (max-width: 1024px) {
}

@media screen and (min-width: 1025px) {
}