@charset "UTF-8";
/* CSS Document */

.houseTopContainer {
  margin-top: 77px;
  position: relative;
  height: 673px;
}




.houseTopHouse {
  position: absolute;
  right: 50px;
  top: 100px;
  z-index: 100;
}

.houseTopBongo {
  position: absolute;
  right: 254px;
  top: 298px;
  z-index: 50;
  transform-origin: bottom;
  animation: 1s ease-in-out infinite bongoTop;
}
.houseTopLastin {
  position: absolute;
  right: 690px;
  top: 477px;
  z-index: 200;
}
.houseTopEssen {
  position: absolute;
  right: 620px;
  top: 45px;
  z-index: 200;  
}
.houseTopEnelabokun {
  position: absolute;
  top:674px;
  right:148px;
  transform: scale(0.5);
  z-index: 200;
}
.houseTopEnelabokun .topEnelabo {
  width: 144px;
  height: 302px;
  position: absolute;
  bottom: 0px;
  right: 160px;
  z-index: 200;
  animation: 2s ease-in-out infinite waiting;
}


.houseTopTitle {
  position: absolute;
  left: 20%;
  top: 50%;
}
.houseTopNego {
  width: 95px;
  height: 150px;
}


.houseTopNego2 {
  position: absolute;
  right: 790px;
  top: 388px;
  z-index: 900;
}


/* フキダシ */
.houseTopFuki_cafe {
  position: absolute;
  top: 206px;
  right: 119px;
  z-index: 800;
  transform-origin: bottom left;
}
.houseTopFuki_charge {
  position: absolute;
  top: 440px;
  right: 395px;
  z-index: 800;
  transform-origin: bottom left;
}
.houseTopFuki_suiko {
  position: absolute;
  top: 225px;
  right: 621px;
  z-index: 800;
  transform-origin: bottom right;
}
.houseTopFuki_hijo {
  position: absolute;
  top: 23px;
  right: 215px;
  z-index: 800;
  transform-origin: center left;
}
.houseTopFuki_hijo_r {
  position: absolute;
  top: 43px;
  right: 602px;
  z-index: 800;
  transform-origin: center right;
}

.houseTopFuki_cafe:hover, .houseTopFuki_charge:hover, .houseTopFuki_suiko:hover, .houseTopFuki_hijo:hover, .houseTopFuki_hijo_r:hover {
  animation: 0.2s ease-in-out 2 laboTopFukidashi;
}



/* 各シングル */
.houseSingleContainer {
  margin-top: 66px;
  flex: 1;
}






/* 下部のボタン */
.houseTopBtns {
  margin-top: 33px;
}
.houseTopBtn {
  margin-bottom: 7px;
}

.houseNavBtn {
  display: block;
  margin-bottom: 7px;
  transition: .3s;
}
.houseNavBtn:hover {
  transform: rotate(10deg);
}
.btn_img-cafe {
  width: 170px;
}
.btn_img-charge {
  width: 194px;
}
.btn_img-suiko {
  width: 145px;
}
.btn_img-hijo {
  width: 174px;
}




@media screen and (max-width: 953px) {
  .houseTopContainer {
    right: -125px;
    height: 689px;
    top: -26px;
  }
  
  .houseTopEssen {
    right: 440px;
  }
  .houseTopFuki_hijo_r {
    top: 43px;
    right: 423px;
  }
  
}
@media screen and (max-width: 767px) {
  .houseTopContainer {
    right: -125px;
  }
  .houseTopFukidashi {
    display: none;  
  }
}

@media screen and (max-width: 730px) {
  .houseTopContainer {
    right: -187px;
  }
}


@media screen and (max-width: 656px) {
  .houseTopContainer {
    transform: scale(0.9);
    height: 591px;
    top: -61px;
  }
}
@media screen and (max-width: 579px) {
  .houseTopContainer {
    transform: scale(0.8);
    height: 529px;
    top: -77px;
  }
}
@media screen and (max-width: 528px) {
  .houseTopContainer {
    transform: scale(0.7);
    height: 468px;
    top: -96px;
  }
}
@media screen and (max-width: 445px) {
  .houseTopContainer {
    transform: scale(0.6);
    height: 427px;
    top: -100px;
  }
  .btn_img-cafe {
    width: 126px;
  }
  .btn_img-charge {
    width: 146px;
  }
  .btn_img-suiko {
    width: 111px;
  }
  .btn_img-hijo {
    width: 131px;
  }
}
@media screen and (max-width: 374px) {
  .houseTopContainer {
    transform: scale(0.5);
    height: 344px;
    top: -101px;
  }
  .btn_img-cafe {
    width: 100px;
  }
  .btn_img-charge {
    width: 113px;
  }
  .btn_img-suiko {
    width: 86px;
  }
  .btn_img-hijo {
    width: 104px;
  }
}



/* エネラボカフェ */
.cafeContainer {
  position: relative;
  top: 0;
  left: 0;
  height: 728px;
}
.cafeContainer .cafe_forPC .table {
  position: absolute;
  bottom: 0;
  left: 180px;
  z-index: 100;
}
.cafeContainer .cafe_forPC .salad {
  position: absolute;
  bottom: 280px;
  left: 488px;
  z-index: 200;
  animation-delay: 5s;
  transition-timing-function: ease-in-out;
  animation: hurueru 1.5s  infinite;
}
.cafeContainer .cafe_forPC .coffee {
  position: absolute;
  bottom: 288px;
  left: 693px;
  z-index: 300;
  animation-delay: 3s;
  transition-timing-function: ease-in-out;
  animation: yureru 2s infinite;
}
.cafeContainer .cafe_forPC .fouk {
  position: absolute;
  bottom: 270px;
  left: 600px;
  z-index: 400;
  animation-delay: 0.5s;
  transition-timing-function: ease-in-out;
  animation: hurueru 1.5s  infinite;
}
.cafeContainer .cafe_forMobile {
  display: none;
}

/* ふるえるアニメーション */
@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

@keyframes yureru {
    0% {transform: rotateZ(0deg)}
    50% {transform: rotateZ(5deg)}
    100% {transform: rotateZ(0deg)}
}

.f_salad {
  position: absolute;
  bottom: 359px;
  left: 371px;
  z-index: 500;
  /* ぼかしフェードの初期設定 */
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  transition: opacity 1s ease, filter .5s ease, transform .5s ease;
  pointer-events: none;
}
.wrap_salad:hover .f_salad {
  /* ホバー時の設定 */
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  pointer-events: auto;
}


.f_coffee {
  position: absolute;
  bottom: 350px;
  left: 731px;
  z-index: 500;
  /* ぼかしフェードの初期設定 */
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  transition: opacity 1s ease, filter .5s ease, transform .5s ease;
  pointer-events: none;
}
.wrap_coffee:hover .f_coffee {
  /* ホバー時の設定 */
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  pointer-events: auto;
}


.f_fouk {
  position: absolute;
  bottom: 149px;
  left: 484px;
  z-index: 500;
  /* ぼかしフェードの初期設定 */
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  transition: opacity 1s ease, filter .5s ease, transform .5s ease;
  pointer-events: none;
}
.wrap_fouk:hover .f_fouk {
  /* ホバー時の設定 */
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  pointer-events: auto;
}

/* ページ読み込み時にフキダシを順に表示 */
.f_salad.show { 
  opacity: 1; 
  filter: blur(0); 
  transform: translateY(0);
  transition-delay: 0.2s;
}
.f_coffee.show { 
  opacity: 1; 
  filter: blur(0); 
  transform: translateY(0);
  transition-delay: 0.8s;
}
.f_fouk.show { 
  opacity: 1; 
  filter: blur(0); 
  transform: translateY(0);
  transition-delay: 1.4s;
}
.fadeout-all .f_salad,
.fadeout-all .f_coffee,
.fadeout-all .f_fouk {
  opacity: 0;
  filter: blur(10px);
  transition-delay: 0s !important;
}



/* カフェのテキスト */
.cafe_text {
  position: absolute;
  top: 50px;
  right: 50px;
  width: 600px;
  font-size: 18px;
  line-height: 1.8;
  color: #666666;
}


/* カフェに居るボンゴ */
.cafe_bongo {
  position: relative;
  bottom: -310px;
  right: -1030px;
}
.cafe_bongo_head {
  position: absolute;
  top: 0px;
  left: 70px;
  z-index: 650;
}
.cafe_bongo_foot {
  position: absolute;
  top: 226px;
  left: 107px;
  z-index: 600;
}
.cafe_bongo_arm {
  position: absolute;
  top: 130px;
  left: -15px;
  z-index: 600;
  transform-origin: 103px 25px;
  animation: cafeBongoArm 1s ease-in-out infinite;
}
@keyframes cafeBongoArm {
    0% {transform: rotateZ(10deg)}
    50% {transform: rotateZ(60deg)}
    100% {transform: rotateZ(0deg)}
}

@media screen and (max-width: 1445px) {
  .cafe_bongo {
    right: -900px;
  }
}
@media screen and (max-width: 1245px) {
  .cafe_bongo {
    right: -800px;
  }
  .cafeContainer .cafe_forPC .table {
    left: 80px;
  }
  .cafeContainer .cafe_forPC .salad {
    left: 388px;
  }
  .cafeContainer .cafe_forPC .coffee {
    left: 593px;
  }
  .cafeContainer .cafe_forPC .fouk {
    left: 500px;
  }
}
@media screen and (max-width: 1145px) {
  .cafe_bongo {
    right: -650px;
  }
  .cafeContainer .cafe_forPC .table {
    left: 0px;
  }
  .cafeContainer .cafe_forPC .salad {
    left: 308px;
  }
  .cafeContainer .cafe_forPC .coffee {
    left: 513px;
  }
  .cafeContainer .cafe_forPC .fouk {
    left: 420px;
  }
}