@charset "UTF-8";

/*---------------------------------------------------------
character ベース
---------------------------------------------------------*/


.item-chara__img {
  position: absolute;
  height: auto;
}
.item-chara__balloon {
  height: auto;
  position: absolute;
  opacity: 0;
  transition: 0.3s;
}
.item-chara__balloon.move {
  opacity: 1;
}
.item-chara__open {
  position: absolute;
  cursor: pointer;
  height: auto;
}

/*キャラ1人目*/

.item-chara__img.item-01 {
  bottom: 18%;
  left: -3%;
  width: 53%;
}
.item-chara__balloon.item-01 {
  width: 24%;
  top: 0%;
  left: 28%;
}
.item-chara__open.item-01 {
  bottom: 0;
  left: 5%;
  width: 40%;
}

/*キャラ2人目*/

.item-chara__img.item-02 {
  bottom: 18%;
  left: 47%;
  width: 53%;
}
.item-chara__balloon.item-02 {
  width: 21%;
  top: 5%;
  left: 74%;
}
.item-chara__open.item-02 {
  bottom: 0;
  left: 53%;
  width: 40%;
}

/*キャラ3人目*/

.item-chara__img.item-03 {
  bottom: 15%;
  left: 0%;
  width: 49%;
}
.item-chara__balloon.item-03 {
  width: 24%;
  top: 11%;
  left: 26%;
}
.item-chara__open.item-03 {
  bottom: 0;
  left: 5%;
  width: 40%;
}

/*キャラ4人目*/

.item-chara__img.item-04 {
  bottom: 15%;
  left: 46%;
  width: 56%;
}
.item-chara__balloon.item-04 {
  width: 21%;
  top: 5%;
  left: 75%;
}
.item-chara__open.item-04 {
  bottom: 0;
  left: 53%;
  width: 40%;
}

/*キャラ5人目*/

.item-chara__img.item-05 {
  bottom: 15%;
  left: 8%;
  width: 35%;
}
.item-chara__balloon.item-05 {
  width: 24%;
  top: 14%;
  left: 26%;
}
.item-chara__open.item-05 {
  bottom: 0;
  left: 5%;
  width: 40%;
}

/*キャラ6人目*/

.item-chara__img.item-06 {
  bottom: 15%;
  left: 53%;
  width: 44%;
}
.item-chara__balloon.item-06 {
  width: 21%;
  top: 8%;
  left: 74%;
}
.item-chara__open.item-06 {
  bottom: 0;
  left: 53%;
  width: 40%;
}

/*キャラ7人目*/

.item-chara__img.item-07 {
  bottom: 15%;
  left: 4%;
  width: 46%;
}
.item-chara__balloon.item-07 {
  width: 24%;
  top: 10%;
  left: 28%;
}
.item-chara__open.item-07 {
  bottom: 0;
  left: 5%;
  width: 40%;
}











/*-------------------------------------------------------------
fade-in
------------------------------------------------------------*/

.fade-in {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.fade-in.active {
  opacity: 1;
  transform: translateY(0)
}

/* 共通フェードイン用クラス */
.fade-in2 {
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

/* スクロールでアクティブ時のみ transformY */
@media (max-width: 768px) {
  .fade-in2 {
    transform: translateY(100px);
    transition: opacity .2s ease-in-out,transform 1s ease-in-out;
  }
  .fade-in2.active {
    opacity: 1;
    transform: translateY(0);
  }
}

/* PC用 activeは opacity のみ */
@media (min-width: 769px) {
  .fade-in2.active {
    opacity: 1;
  }
}