@media screen and (max-width: 640px) {
  #wrapper {
    padding: 0;
    position: relative;
    overflow: scroll;
  }
}

header.index {
  position: absolute;
  z-index: 10;
  width: 100%;
  margin: 0 auto;
  left: 0;
  right: 0;
}
header.index .inner {
  width: 97%;
  max-width: none;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
}
header.index .inner .logo {
  padding: 18px 0 0 0;
}
header.index .inner .btn_membertop {
  margin: 13px 20px 0 auto;
}
@media screen and (max-width: 640px) {
  header.index .inner .logo {
    padding: 22px 0 0 0;
  }
}
header.index.is-show {
  position: fixed;
  background: none;
}
header.index.is-show .inner {
  width: 100%;
  background: #FFF;
}
header.index.is-show .inner .logo {
  padding: 14px 0 0 0;
  max-width: 300px;
  line-height: 0;
  margin: 0;
}
@media screen and (max-width: 768px) {
  header.index.is-show .inner .logo {
    max-width: 255px;
  }
}
@media screen and (max-width: 480px) {
  header.index.is-show .inner .logo {
    max-width: 240px;
    padding: 17px 0 20px;
  }
}
header.index.is-show .inner .btn_membertop {
  margin: 20px 20px 0 auto;
}

.contents img {
  width: 100%;
  height: auto;
}

h2.title {
  font-size: clamp(22px, 1.6rem, 32px);
  font-weight: 400;
  display: flex;
  align-items: center;
  padding: 3% 0 1%;
  justify-content: center;
  line-height: 0;
  width: 100%;
  margin: 0;
  border-left: none;
  background: none;
}
h2.title::before {
  content: "";
  background-image: url(../img/common/ico01.svg);
  width: 8%;
  height: 8%;
  background-size: auto;
  display: inline-block;
  max-width: 48px;
  max-height: 48px;
  aspect-ratio: 1/1;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 5px 5px 0 0;
}
h2.title + .sh {
  text-align: center;
  letter-spacing: 6px;
  font-size: clamp(16px, 1.3em, 20px);
}
@media screen and (max-width: 480px) {
  h2.title {
    padding: 6% 8px 1% 0;
  }
  h2.title + .sh {
    letter-spacing: 3px;
    font-size: clamp(14px, 1em, 20px);
  }
}

.mainvisual {
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 640px) {
  .mainvisual {
    height: 650px;
  }
}
.mainvisual .copy {
  position: absolute;
  top: 0;
  left: 5%;
  font-size: clamp(30px, 1.9rem, 40px);
  bottom: 0;
  margin: auto;
  height: -moz-fit-content;
  height: fit-content;
}
@media screen and (max-width: 640px) {
  .mainvisual .copy {
    top: auto;
    bottom: 10%;
  }
}
.mainvisual::before {
  content: "";
  background-image: url(../img/index/mv_image.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 68%;
  display: block;
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
}
@media screen and (max-width: 640px) {
  .mainvisual::before {
    width: 100%;
    background-image: url(../img/index/mv_image_sp.png);
    background-size: contain;
    background-position: bottom;
  }
}
.mainvisual figure {
  display: block;
  position: relative;
  z-index: -1;
  width: 60%;
  margin: 0 0 0 auto;
}
.mainvisual figure img {
  width: 130%;
  height: auto;
  aspect-ratio: 1.6/1;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: left;
  object-position: left;
  max-height: 75vh;
  margin: 0 0 0 auto;
}
@media screen and (max-width: 640px) {
  .mainvisual figure {
    width: 100%;
  }
  .mainvisual figure img {
    aspect-ratio: unset;
    max-height: 100vh;
    width: 110%;
    -o-object-fit: contain;
       object-fit: contain;
    height: 100%;
    -o-object-position: center;
       object-position: center;
  }
}

.top_message {
  text-align: center;
  padding: 3rem 0;
  width: 90%;
  margin: 0 auto;
}
.top_message h2 {
  padding: 0 0 1.2rem 0;
  font-size: clamp(22px, 1.2rem, 26px);
}
.top_message div {
  padding: 0 0 1rem 0;
}
.top_message div p {
  margin: 0 0 0.8rem 0;
  font-size: 14px;
}
@media screen and (max-width: 640px) {
  .top_message div p {
    text-align: left;
    margin: 0 0 3rem;
  }
  .top_message div p br {
    display: none;
  }
}/*# sourceMappingURL=index.css.map */