@charset "UTF-8";

/* PC
============================================================================= */
.mainvisual-area {
  position: relative;
  background: #FFEE00 url(../image/confetti-bg001.svg) no-repeat center top / 100vw auto;
  padding-bottom: 2.928vw;
}
.mainvisual-area.cloud-bottom::before {
  top: 26.4vw;
  bottom: auto;
}
.mainvisual-area.cloud-bottom::after {
  content: "";
  background: #fff;
  width: 100vw;
  height: 100%;
  position: absolute;
  left: 0;
  top: 67vw;
  z-index: 0;
}
.mainvisual-area img{
  width: 100%;
}

/* mainvisual__inner */
.mainvisual__inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
  z-index: 2;
}

/* mainvisual__hero */
.mainvisual__hero {
  width: 72.474vw;
  margin: 0 auto;

  padding-top: 4.905vw;
  padding-right: 3.221vw;

  position: relative;
  z-index: 10;
}

/* mainvisual__sub */
.mainvisual__sub {
  text-align: center;
  margin-top: 1.171vw;
}
.mainvisual__sub-text.text001 {
  font-size: 2.562vw;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
}
.mainvisual__sub-text.text001 .text-big {
  font-size: 2.928vw;
  letter-spacing: 0;
}
.mainvisual__sub-text.text002 {
  font-size: 1.83vw;
  font-weight: 500;
  margin-top: 1.464vw;
}

/* mainvisual__campaign */
.mainvisual__campaign {
  margin-top: 1.245vw;
  position: relative;
  z-index: 10;
}
.mainvisual__campaign-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.098vw;
  margin-left: -1.464vw;
}
.mainvisual__campaign-badge {
  padding-top: 0.732vw;
}
.mainvisual__campaign-badge p {
  background: #003CFF;
  color: #fff;
  font-size: 1.464vw;
  font-weight: 700;
  padding: 0.732vw 1.903vw;
  border-radius: 73.133vw;
}
.mainvisual__campaign-date p {
  font-size: 2.196vw;
  color: #003CFF;
  font-weight: 700;
}
.mainvisual__campaign-date span {
  font-size: 3.66vw;
}

/* mainvisual__media */
.mainvisual__media-ph {
  position: absolute;
  z-index: 8;
}
.mainvisual__media-ph.photo001 {
  width: 13.397vw;
  top: 2.562vw;
  left: 2.05vw;
}
.mainvisual__media-ph.photo002 {
  width: 16.911vw;
  top: 17.35vw;
  left: 2.782vw;
}
.mainvisual__media-ph.photo003 {
  width: 18.668vw;
  top: 4.539vw;
  right: 2.05vw;
}
.mainvisual__media-ph.photo004 {
  width: 14.861vw;
  top: 21.01vw;
  right: 8.492vw;
  z-index: 9;
}
.mainvisual__media-ch {
  position: absolute;
}
.mainvisual__media-ch.illust001 {
  width: 29.722vw;
  bottom: 3.66vw;
  left: -2.562vw;
}

/* notes */
.mainvisual-area ul.notes {
  width: 54.905vw;
  margin: 7px auto 0;

  font-size: 1.098vw;
  font-weight: 400;
  color: #484848;
}

/* SP
============================================================================= */
@media screen and (max-width: 767px) {
  .mainvisual-area {
    padding-bottom: 8vw;
    overflow: clip;
  }
  .mainvisual-area.cloud-bottom::before {
    top: 70.4vw;
  }
  .mainvisual-area.cloud-bottom::after {
    top: 109.4vw;
  }

  /* mainvisual__hero */
  .mainvisual__hero {
    width: 98.4vw;
    padding: 18.4vw 0 0;
    margin-left: 0;
  }

  /* mainvisual__sub */
  .mainvisual__sub {
    margin-top: 2.133vw;
  }
  .mainvisual__sub-text.text001 {
    font-size: 5.867vw;
  }
  .mainvisual__sub-text.text001 .text-big {
    font-size: 8vw;
    padding-left: 6.667vw;
  }
  .mainvisual__sub-text.text002 {
    font-size: 4vw;
    margin-top: 4.8vw;
    display: inline-block;
  }

  /* mainvisual__campaign */
  .mainvisual__campaign {
    margin-top: 5.333vw;
  }
  .mainvisual__campaign-row {
    gap: 0;
    margin-left: 0;
    flex-direction: column;
  }
  .mainvisual__campaign-badge {
    padding-top: 0;
  }
  .mainvisual__campaign-badge p {
    font-size: 4.8vw;
    padding: 1.867vw 8vw;
  }
  .mainvisual__campaign-date p {
    font-size: 4vw;
  }
  .mainvisual__campaign-date span {
    font-size: 9.333vw;
  }
  .mainvisual__campaign-date span span{
    font-size: 6vw;
  }

  /* mainvisual__media */
  .mainvisual__media-ph.photo001 {
    width: 18.933vw;
    top: -2.667vw;
    left: 21.6vw;
    z-index: 2;
  }
  .mainvisual__media-ph.photo002 {
    width: 28.267vw;
    top: -0.267vw;
    left: -3.2vw;
    z-index: 1;
  }
  .mainvisual__media-ph.photo003 {
    width: 30.933vw;
    top: -2.4vw;
    right: 20.533vw;
    transform: rotate(6.4deg);
  }
  .mainvisual__media-ph.photo004 {
    width: 24.8vw;
    top: 15.2vw;
    right: -0.8vw;
    transform: rotate(6.4deg);
  }
  .mainvisual__media-ch.illust001 {
    bottom: 78.4vw;
    width: 32vw;
    left: -5.867vw;
  }

  /* notes */
  .mainvisual-area ul.notes {
    width: 90%;
    font-size: 2.667vw;
    margin-top: 0.533vw;
    padding-right: 0;
  }
}