@charset "UTF-8";
/* =========================================
   happybag.CSS
   ========================================= */


/* メインビジュアル */
.hbmv {
  position: relative;
  overflow: hidden;
}

.hbmv .pc {
  width: 100%;
  display: block;
}

.hbmv .sp {
  display: none;
}

/* 小さい画像：共通 */
.hb-floating {
  position: absolute;
  width: 60px !important;
  height: auto;
  opacity: 0;
}

/* 位置 ＋ アニメーションを1ブロックでまとめると超読みやすい */
.hb-f1 {
  bottom: 2%; left: 47%;
  animation: hbFade1 10s infinite;
}

.hb-f2 {
  bottom: 2%; right: 33%;
  animation: hbFade2 10s infinite;
}

.hb-f3 {
  bottom: 2%; left: 33%;
  animation: hbFade3 10s infinite;
}

.hb-f4 {
  bottom: 2%; right: 17%;
  animation: hbFade4 10s infinite;
}

.hb-f5 {
  bottom: 2%; left: 17%;
  animation: hbFade5 10s infinite;
}

.hb-f6 {
  bottom: 2%; right: 2%;
  animation: hbFade6 10s infinite;
}

.hb-f7 {
  bottom: 2%; left: 2%;
  animation: hbFade7 10s infinite;
}


/* 1個目：一番最初に出て、80%まで表示、その後みんなで一斉に消える */
@keyframes hbFade1 {
  0%, 2%   { opacity: 0; transform: scale(0.9); }
  5%, 80%  { opacity: 1; transform: scale(1);   }
  90%,100% { opacity: 0; transform: scale(1.05); }
}

/* 2個目：少し遅れて出る（10%あたりから） */
@keyframes hbFade2 {
  0%, 12%  { opacity: 0; transform: scale(0.9); }
  15%, 80% { opacity: 1; transform: scale(1);   }
  90%,100% { opacity: 0; transform: scale(1.05); }
}

/* 3個目 */
@keyframes hbFade3 {
  0%, 22%  { opacity: 0; transform: scale(0.9); }
  25%, 80% { opacity: 1; transform: scale(1);   }
  90%,100% { opacity: 0; transform: scale(1.05); }
}

/* 4個目 */
@keyframes hbFade4 {
  0%, 32%  { opacity: 0; transform: scale(0.9); }
  35%, 80% { opacity: 1; transform: scale(1);   }
  90%,100% { opacity: 0; transform: scale(1.05); }
}

/* 5個目 */
@keyframes hbFade5 {
  0%, 42%  { opacity: 0; transform: scale(0.9); }
  45%, 80% { opacity: 1; transform: scale(1);   }
  90%,100% { opacity: 0; transform: scale(1.05); }
}

/* 6個目 */
@keyframes hbFade6 {
  0%, 52%  { opacity: 0; transform: scale(0.9); }
  55%, 80% { opacity: 1; transform: scale(1);   }
  90%,100% { opacity: 0; transform: scale(1.05); }
}

/* 7個目 */
@keyframes hbFade7 {
  0%, 62%  { opacity: 0; transform: scale(0.9); }
  65%, 80% { opacity: 1; transform: scale(1);   }
  90%,100% { opacity: 0; transform: scale(1.05); }
}


/* スマホ */
@media (max-width: 767px) {
  .hbmv .pc { display: none; }
  .hbmv .sp { display: block; width: 100%; }

  /* 浮遊画像も表示する（サイズだけ少し小さく） */
  .hb-floating-wrapper { display: block; }
  .hb-floating { width: 40px !important; }
}


/* 福袋ページ：ロゴだけ小さく表示 */
.happybag .block-photo-logo img {
  width: 20%;          /* ここでサイズ調整。30%とかでもOK */
  max-width: 100px;    /* 必要なら上限。いらなければ消してもOK */
  margin: 0 auto;      /* センター揃え */
  display: block;
  box-shadow: none !important;
  border-radius: 0 !important;
}



/* 地紋の上に白いボックスを置くセクション */
.happybag .hb-bg-panel-on-kamon {
  position: relative;
  padding: 100px 0;
  background-image: url("/img/usr/feature/happybag/0011.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: auto 1000px;
  overflow: hidden;
}

/* ★ 地紋を薄くするための白いオーバーレイ（透明度を変えて調整） */
.happybag .hb-bg-panel-on-kamon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(247, 246, 243, 0.281);  /* ← 0.3〜0.7くらいで好みの薄さに */
  z-index: 0;
}

/* 中央の白いボックス（ここに要素を全部入れる） */
.happybag .hb-panel-box {
  position: relative;
  z-index: 1;                 /* 地紋＋オーバーレイより前に出す */
  max-width: 1000px;           /* ボックスの横幅 */
  margin: 0 auto;             /* 中央寄せ */
  background: #ffffff;        /* 真っ白の下地 */
  padding: 40px 30px;         /* 内側の余白 */
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  border-radius: 0;           /* 丸くしたければ 6px とかに */
}

/* スマホ調整 */
@media (max-width: 768px) {
  .happybag .hb-bg-panel-on-kamon {
    padding: 50px 0;
  }
  .happybag .hb-panel-box {
    max-width: 80%;
    padding: 28px 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}