
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 9999;
  opacity: 1;
  display: none;
}

.loading.loaded {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s 0s ease-in-out;
}


.loading {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.loading .logo {
  max-width: 5em;
  margin-bottom: 1em;
}

.loading .bar {
  width: 0%;
  height: 2px;
  background: #E85532;
  margin-bottom: 10px;
  transition: width .3s;
  margin-right: auto;
}

.loading .progress_text {
  color: #E85532;
  font-size: .9em;
}


@media only screen and (min-width: 1000px) {
  body {
    font-size: 18px;
  }

  .l-main {
    background-color: #fff;
  }

  .l-wrapper,
  .l-header,
  .followerMenu,
  .toggleMenu {
    width: 30vw;
    min-width: 480px;
    max-width: 750px;
    margin-left: auto;
    left: auto
  }


  .contents-topmv {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 70vw;
    z-index: -1;
  }

  .contents-topmv h2 {
    position: absolute;
    left: 30px;
    bottom: 30px;
    z-index: 10;
    max-width: calc(100% - 270px);
  }

  .contents-topmv ul,
  .contents-topmv ul div {
    height: 100%;
  }

  .contents-topmv .slick-slide {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contents-topmv .slick-slide picture {
    height: 100%;
  }

  .contents-topmv .slick-slide img {
    min-height: 100%;
    min-width: 100%;
    object-fit: cover;
  }


  .contents-top01 .mv img {
    font-size: 38px;
  }

  .contents-top01 .topics img,
  .contents-top04 .capability img {
    font-size: 32px;
  }

  .contents-top03 {
    font-size: 1em;
    z-index: 2;
  }

  .contents-top05 .slider img {
    font-size: 32px;
  }
}

.contents-topmv ul {
  list-style: none;
  pointer-events: none;
}

.contents-topmv picture,
.contents-topmv img {
  display: block;
}


@media only screen and (max-width: 999px) {

  .contents-topmv {
    position: relative;
  }

  .contents-topmv h2 {
    position: absolute;
    left: .7em;
    bottom: 1em;
    z-index: 10;
  }

  .contents-topmv h2 img {
    width: auto;
    height: 9em;
  }

  .contents-topmv img {
    width: 100%;
  }
}
