@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap");
/*-------------------------------------------
px→vw
 * ex)
   width: sp(200)
   width: tab(200)
-------------------------------------------*/
.chocollectionCol {
  background-image: url(../../images/recommend/chocollection/bg_deco_01.png);
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100%;
  background-color: #fffbbf;
  padding: 5.04132vw 0;
}
@media screen and (min-width: 768px) {
  .chocollectionCol {
    padding: 61px 0 45px;
  }
}
.chocollectionCol .mvCol {
  position: relative;
  padding: 0 0 8.59504vw;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .chocollectionCol .mvCol {
    padding: 0 0 104px;
  }
}
.chocollectionCol .mvCol__tit {
  width: 38.42975vw;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .chocollectionCol .mvCol__tit {
    width: 465px;
  }
}
.chocollectionCol .mvCol__txt01 {
  width: 28.67769vw;
  margin: 4.95868vw auto 0;
}
@media screen and (min-width: 768px) {
  .chocollectionCol .mvCol__txt01 {
    width: 347px;
    margin: 60px auto 0;
  }
}
.chocollectionCol .mvCol__txt02 {
  width: 27.7686vw;
  margin: 4.95868vw auto 0;
}
@media screen and (min-width: 768px) {
  .chocollectionCol .mvCol__txt02 {
    width: 336px;
    margin: 60px auto 0;
  }
}
.chocollectionCol .mvCol__txt03 {
  width: 44.95868vw;
  margin: 4.6281vw auto 0;
}
@media screen and (min-width: 768px) {
  .chocollectionCol .mvCol__txt03 {
    width: 544px;
    margin: 56px auto 0;
  }
}
.chocollectionCol .mvCol__deco01 {
  position: absolute;
  top: 5.53719vw;
  right: 2.2314vw;
  width: 20.49587vw;
}
@media screen and (min-width: 768px) {
  .chocollectionCol .mvCol__deco01 {
    top: 67px;
    right: 27px;
    width: 248px;
  }
}
.chocollectionCol .mvCol__deco02 {
  position: absolute;
  top: 12.14876vw;
  left: 6.77686vw;
  width: 19.75207vw;
}
@media screen and (min-width: 768px) {
  .chocollectionCol .mvCol__deco02 {
    top: 147px;
    left: 82px;
    width: 239px;
  }
}
.chocollectionCol .mvCol__deco03 {
  position: absolute;
  top: 27.02479vw;
  right: 10.33058vw;
  width: 17.10744vw;
}
@media screen and (min-width: 768px) {
  .chocollectionCol .mvCol__deco03 {
    top: 337px;
    right: 125px;
    width: 207px;
  }
}
.chocollectionCol .mvCol__deco04 {
  position: absolute;
  top: 41.32231vw;
  left: 2.47934vw;
  width: 18.59504vw;
}
@media screen and (min-width: 768px) {
  .chocollectionCol .mvCol__deco04 {
    top: 500px;
    left: 30px;
    width: 225px;
  }
}
.chocollectionCol .mvCol__deco05 {
  position: absolute;
  top: 52.56198vw;
  right: 1.98347vw;
  width: 20.49587vw;
}
@media screen and (min-width: 768px) {
  .chocollectionCol .mvCol__deco05 {
    top: 636px;
    right: 24px;
    width: 248px;
  }
}
.chocollectionCol .bnrList {
  margin-top: 3vw;
}
@media screen and (min-width: 768px) {
  .chocollectionCol .bnrList {
    margin-top: 22px;
  }
}
.chocollectionCol .bnrList:nth-child(1) {
  margin-top: 0;
}
.chocollectionCol .bnrList__link {
  display: block;
}

.chocollectionCol__inner {
  padding: 0 4.13223vw;
}
@media screen and (min-width: 768px) {
  .chocollectionCol__inner {
    padding: 0 50px;
  }
}

[data-inview="left"] {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s, transform 0.6s;
}
[data-inview="left"].is-inview_start {
  opacity: 1;
  transform: translateX(0);
}

[data-inview="right"] {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s, transform 0.6s;
}
[data-inview="right"].is-inview_start {
  opacity: 1;
  transform: translateX(0);
}

[data-inview="bottom"] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s, transform 0.6s;
}
[data-inview="bottom"].is-inview_start {
  opacity: 1;
  transform: translateY(0);
}

[data-inview="top_mv_txt"] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s, transform 0.6s;
}
[data-inview="top_mv_txt"]:nth-of-type(1) {
  animation-delay: 0.4s;
  transition-delay: 0.4s;
}
[data-inview="top_mv_txt"]:nth-of-type(2) {
  animation-delay: 0.8s;
  transition-delay: 0.8s;
}
[data-inview="top_mv_txt"]:nth-of-type(3) {
  animation-delay: 1.2s;
  transition-delay: 1.2s;
}
[data-inview="top_mv_txt"].is-inview_start {
  opacity: 1;
  transform: translateY(0);
}

[data-inview="top_mv_illust01"] {
  opacity: 0;
  transform: translateX(30px) rotate(30deg);
  transition: opacity 0.6s, transform 0.6s;
}
[data-inview="top_mv_illust01"].is-inview_start {
  opacity: 1;
  transform: translateX(0) rotate(0deg);
}

[data-inview="top_mv_illust02"] {
  opacity: 0;
  transform: translateX(-30px) rotate(-30deg);
  transition: opacity 0.6s, transform 0.6s;
  transition-delay: 0.3s;
}
[data-inview="top_mv_illust02"].is-inview_start {
  opacity: 1;
  transform: translateX(0) rotate(0deg);
}

[data-inview="top_mv_illust03"] {
  opacity: 0;
  transform: translateX(30px) rotate(30deg);
  transition: opacity 0.6s, transform 0.6s;
  transition-delay: 0.6s;
}
[data-inview="top_mv_illust03"].is-inview_start {
  opacity: 1;
  transform: translateX(0) rotate(0deg);
}

[data-inview="top_mv_illust04"] {
  opacity: 0;
  transform: translateX(-30px) rotate(-30deg);
  transition: opacity 0.6s, transform 0.6s;
  transition-delay: 0.9s;
}
[data-inview="top_mv_illust04"].is-inview_start {
  opacity: 1;
  transform: translateX(0) rotate(0deg);
}

[data-inview="top_mv_illust05"] {
  opacity: 0;
  transform: translateX(30px) rotate(30deg);
  transition: opacity 0.6s, transform 0.6s;
  transition-delay: 1.2s;
}
[data-inview="top_mv_illust05"].is-inview_start {
  opacity: 1;
  transform: translateX(0) rotate(0deg);
}