@charset "utf-8";

#wrapper{
  background-image:
    url("../../../img/bg_confetti.png"),
    url("../../../img/bg_blob_yellow.svg"),
    url("../../../img/bg_confetti_r.png"),
    url("../../../img/bg_blob_blue_3.svg"),
    url("../../../img/bg_confetti.png");
	background-repeat: no-repeat;
	background-position:
    left calc(-649px + (4 * ((100vw - 1200px) / 10))) top 1800px,
    right top 1800px,
    right 0px top 3000px,
    left -300px top 3300px,
    left 0 top 4200px;
	background-size: auto;
}
.inner1200{
  max-width: 1200px;
  width: auto;
  margin: 0 auto;
}
@media screen and (max-width: 520px){
  #wrapper{
    background-image: 
      url("../img/bg_blob_yellow.svg"),
      url("../img/bg_blob_blue_3.svg"),
      url("../img/bg_blob_green.svg"),
      url("../img/bg_confetti_r.png"),
      url("../img/bg_confetti.png");
    background-repeat: no-repeat;
    background-position: 
      right top 10%,
      left -20vw top 74%,
      right bottom -13em,
      right top 50%,
      left top 87%;
    background-size: 
      150vw auto,
      130vw auto,
      130vw auto,
      70vw auto,
      70vw auto;
  }
}

/*--------------------------------------------------------------------*/

#mainvisual .bg{
  background-color: #333;
  position: relative;
  mask-image: url(../img/common-mask-page-eyecatch.svg);
  mask-repeat: no-repeat;
  mask-position: center bottom;
  mask-size: 100% auto;
  -webkit-mask-image: url(../img/common-mask-page-eyecatch.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
  -webkit-mask-size: 100% auto;
}
#mainvisual .container{
  height: 52.6vw;
}
@media screen and (max-width: 520px){
  #mainvisual .container{
    height: 76vw;
  }
}

/*--------------------------------------------------------------------*/

#mainvisual{
  position: relative;
}
#mainvisual::before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 945px;
  height: 782px;
  max-width: 100vw;
  max-height: 82.7513vw;
  background-image:
    url("../../../img/bg_blob_green.svg");
	background-repeat: no-repeat;
	background-position:
    left center;
	background-size:
    contain;
  transform: translate(-5%, 70%);
  z-index: 1;
}
#mainvisual::after{
  z-index: 2;
}

/*--------------------------------------------------------------------*/

#contents{
  margin-top: -10em;
  padding-bottom: 6em;
}
@media screen and (max-width: 520px){
  #contents{
    margin-top: -10vw;
    padding-bottom: 3em;
  }
}

/*--------------------------------------------------------------------*/

section.group{
  display: none;
}

/*--------------------------------------------------------------------*/

section.-revealer{
  opacity: 0;
  transform: translate(0, 5em);
  transition: transform .5s, opacity .5s;
}
section.-revealer.-anim-start{
  opacity: 1;
  transform: translate(0, 0em);
}