@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;
  }
}



/* エネラボカフェ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*
  構造（single-house-cafe.php）
    .cafeContainer
      .cafe_text        … テキスト
      .cafe_stage       … テーブル・料理・フキダシ・ボンゴ
  PC版：.cafe_stage は位置の基準にしない（中身は .cafeContainer 基準の px 指定）
  モバイル版：.cafe_stage を基準に % で配置し、画面幅に合わせて全体を拡大縮小する
*/
.cafeContainer {
  position: relative;
  top: 0;
  left: 0;
  height: 728px;
}
.cafeContainer .table {
  position: absolute;
  bottom: 0;
  left: 180px;
  z-index: 100;
}
.cafeContainer .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 .coffee {
  position: absolute;
  bottom: 288px;
  left: 693px;
  z-index: 300;
  animation-delay: 3s;
  transition-timing-function: ease-in-out;
  animation: yureru 2s infinite;
}
.cafeContainer .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;
}

/* ふるえるアニメーション */
@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)}
}


/* フキダシ（共通の初期状態：ぼかしフェードで隠す） */
.cafe_fuki {
  position: absolute;
  z-index: 500;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  transition: opacity 1s ease, filter .5s ease, transform .5s ease;
  pointer-events: none;
}
.f_salad {
  bottom: 359px;
  left: 371px;
}
.f_coffee {
  bottom: 350px;
  left: 731px;
}
.f_fouk {
  bottom: 149px;
  left: 484px;
}

/* 料理などをタップ（クリック）できることを示す */
.cafe_item {
  cursor: pointer;
}

/* ホバーで表示（マウスなど、ホバーできる端末だけ）
   タッチ端末ではタップ後にホバー状態が残るため、JSの is-open で表示する */
@media (hover: hover) {
  .wrap_salad:hover .f_salad,
  .wrap_coffee:hover .f_coffee,
  .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;
}

/* タップで表示（JSで is-open を付与。数秒後に自動で閉じる） */
.cafeContainer .cafe_fuki.is-open {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  pointer-events: auto;
}



/* カフェのテキスト */
.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;
  /* 幅を0にして、横にずらした分がページの横スクロールにならないようにする（中身は absolute） */
  width: 0;
}
.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;
  /* 肩の位置（bongo_arm_l.png 114×211 の 103px, 25px）。% にしておくと縮小しても肩がずれない */
  transform-origin: 90.35% 11.85%;
  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 .table {
    left: 80px;
  }
  .cafeContainer .salad {
    left: 388px;
  }
  .cafeContainer .coffee {
    left: 593px;
  }
  .cafeContainer .fouk {
    left: 500px;
  }
}
@media screen and (max-width: 1145px) {
  .cafe_bongo {
    right: -650px;
  }
  .cafeContainer .table {
    left: 0px;
  }
  .cafeContainer .salad {
    left: 308px;
  }
  .cafeContainer .coffee {
    left: 513px;
  }
  .cafeContainer .fouk {
    left: 420px;
  }
}


/* エネラボカフェ モバイル版（767px以下、または縦向きで1080px以下） - - - - - */
/* トップページのSNSテレビ（sns-tv.css / ENELABO_SNS_MOBILE_MQ）と同じ条件 */
/*
  .cafe_stage を 560×740 の舞台として、中身を % で配置している。
  配置を変えるときは「舞台上の px ÷ 560（横）／ ÷ 740（縦）」で % を出す。
    テーブル   ( 30, 240) 幅455（table_m2：奥の2個だけ）
    サラダ     ( 80, 287) 幅186
    コーヒー   (311, 223) 幅102
    カトラリー (192, 339) 幅130（PC版と同じく、サラダの皿の右側に立てかける）
    フキダシ   サラダ(12, 88) 幅270 ／ コーヒー(265, 17) 幅262 ／ カトラリー(0, 370) 幅261
               ※文字が小さくなりすぎないよう、PC版の1.45倍の比率にしている
               ※サラダとコーヒーはモバイル用の画像（f_salad_mb / f_coffee_mb）
    ボンゴ     (169, 410) 幅391（PC版の組み立て 423×345 を0.924倍）
*/
@media (max-width: 767.98px), (orientation: portrait) and (max-width: 1080px) {

  .cafeContainer {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 28px;
  }

  .cafe_text {
    position: static;
    width: 100%;
    max-width: 560px;
    padding: 0 8px;
    font-size: clamp(15px, 2.2vw, 18px); /* スマホ15px〜タブレット縦18px */
    line-height: 1.9;
    word-break: auto-phrase; /* 対応ブラウザでは文節で改行 */
  }
  .cafe_text p {
    margin-bottom: 0.9em;
  }

  .cafe_stage {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 560 / 740;
  }

  /* 舞台の中身：% で配置。PC版の bottom / right の指定は打ち消す */
  .cafe_stage .table,
  .cafe_stage .salad,
  .cafe_stage .coffee,
  .cafe_stage .fouk,
  .cafe_stage .cafe_fuki,
  .cafe_stage .cafe_bongo {
    position: absolute;
    bottom: auto;
    right: auto;
  }
  .cafe_stage .table img,
  .cafe_stage .salad img,
  .cafe_stage .coffee img,
  .cafe_stage .fouk img,
  .cafe_stage .cafe_fuki img {
    display: block;
    width: 100%;
    height: auto;
  }

  .cafe_stage .table  { left:  5.357%; top: 32.432%; width: 81.250%; }
  .cafe_stage .salad  { left: 14.286%; top: 38.784%; width: 33.214%; }
  .cafe_stage .coffee { left: 55.536%; top: 30.135%; width: 18.214%; }
  .cafe_stage .fouk   { left: 34.286%; top: 45.811%; width: 23.214%; }

  .cafe_stage .f_salad  { left:  2.143%; top: 11.892%; width: 48.214%; }
  .cafe_stage .f_coffee { left: 47.321%; top:  2.297%; width: 46.786%; }
  .cafe_stage .f_fouk   { left:  0;      top: 50.000%; width: 46.607%; }

  /* フキダシはボンゴより手前に */
  .cafe_stage .cafe_fuki {
    z-index: 700;
  }

  /* ボンゴ：423×345 の箱の中に、頭・足・腕を % で組み立てる */
  .cafe_stage .cafe_bongo {
    left: 30.179%;
    top: 55.405%;
    width: 69.750%;
    aspect-ratio: 423 / 345;
  }
  .cafe_stage .cafe_bongo img {
    height: auto;
  }
  .cafe_stage .cafe_bongo_head { left: 20.095%; top:  0;       width: 79.905%; }
  .cafe_stage .cafe_bongo_foot { left: 28.842%; top: 65.507%; width: 41.844%; }
  .cafe_stage .cafe_bongo_arm  { left:  0;      top: 37.681%; width: 26.950%; }
}


/* 動きを減らす設定の端末では、揺れ続けるアニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  .cafeContainer .salad,
  .cafeContainer .coffee,
  .cafeContainer .fouk,
  .cafe_bongo_arm {
    animation: none;
  }
  .cafe_fuki {
    filter: none;
    transform: none;
  }
}