@charset "UTF-8";
* {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: $font-family-base;
}

p {
  margin: 0;
}

.wrapper {
  padding-top: 3.4em;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.section {
  position: relative;
}

.container {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  max-width: none !important;
  padding-left: 0;
}

.bg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
  img {
      width: 100%;
  }
}

.copywriting {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 1em;
  margin-bottom: 2em;
  .bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: auto;
      height: 100%;
    }
  }
  .subtitle {
    margin-bottom: 0.5em;
    p {
      margin: 0;
      font-size: 1.1em;
      font-weight: 300;
      letter-spacing: 0.2em;
      color: #999999;
    }
  }
  .title {
    h2 {
      margin: 0;
      font-size: 2em;
      color: $green-d;
    }
  }
  &-r {
    .subtitle {
      margin-bottom: 0;
    }
    .title {
      margin-bottom: 0.5em;
    }
  }
  &-s {
    padding: 1.8em;
    margin-bottom: 0;
    .title {
      margin-bottom: 0;
    }
  }
}

.pc-show {
  display: block !important;
}

.mb-show {
  display: none !important;
}

.nicescroll-rails {
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: -0.18em;
    bottom: 0;
    display: block;
    height: 100%;
    width: 0.1em;
    background-color: rgba($gray, 0.2);
  }
}

.goToLine {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4.5em;
  z-index: 2;
  cursor: pointer;
  transition: 0.3s;;
  img {
    width: 100%;
    height: auto;
  }
  &:hover {
    transform: translateY(-50%) scale(1.1);
  }
}

@media screen and (max-width: 992px) {
  .wrapper {
    padding-top: 9em;
  }

  .container {
    width: 100%;
  }  

  .pc-show {
    display: none !important;
  }

  .mb-show {
    display: block !important;
  }
  .copywriting {
    margin-bottom: 4.5em;
    .subtitle {
      margin-bottom: 0.8em;
      p {
        font-size: 2.1em;
        font-weight: 400;
      }
    }
    .title {
      h2 {
        font-size: 3.7em;
        font-weight: 500;
      }
    }
    &-r {
      .title {
        margin-bottom: 1em;
      }
      .subtitle {
        margin-bottom: 0;
      }
    }
    &-s {
      padding: 3.3em 0;
    }
  }
  .nicescroll-rails {
    &::before {
      content: "";
      left: -0.27em;
    }
  }
  .goToLine {
    width: 8.5em;
  }
}