@charset "UTF-8";

/* =======================================
  01. Base（reset / :root / typography / ruby）
======================================= */



/* =======================================
  02. Parts（title / button / link / list / table / category / background / icon）
======================================= */
/* ------ title -------*/
/* .hb_ttl_article_main（記事h1：筆の下線） */
.hb_ttl_article_main{
  background-image: url(../../img/night/news/bg_hb_ttl_article_main.webp);
  color: var(--color-hb-font-night);
}

/* .hb_ttl_article_sub（記事h2：筆背景） */
.hb_ttl_article_sub{
  text-shadow:
    -1px -1px 2px #f6f6f6,
    1px -1px 2px #f6f6f6,
    -1px 1px 2px #f6f6f6,
    1px 1px 2px #f6f6f6;
}
.hb_ttl_article_sub span{
  background-image: url(../../img/night/news/bg_hb_ttl_article_sub.webp);
  color: #000;
}
.hb_ttl_article_sub ruby[data-ruby]::before{
  font-weight: bolder;
}

/* .hb_ttl_article_topic（記事h3：ベージュの筆背景） */
.hb_ttl_article_topic{
  text-shadow:
    -1px -1px 2px #cdbc9b,
    1px -1px 2px #cdbc9b,
    -1px 1px 2px #cdbc9b,
    1px 1px 2px #cdbc9b;
}
.hb_ttl_article_topic span{
  background-image: url(../../img/night/news/bg_hb_ttl_article_topic.webp);
}
.hb_ttl_article_topic ruby[data-ruby]::before{
  font-weight: bolder;
}

/* .hb_ttl_article_item（記事h4：菱形の背景） */
.hb_ttl_article_item{
  background-image: url(../../img/night/news/bg_hb_ttl_article_item.webp);
}

/* .hb_ttl_article_minor（記事h5：【】で囲む） */
.hb_ttl_article_minor{
  color: var(--color-hb-font-night);
}

/* ------ background -------*/
.horobeat_wrapper{
  background-image: url(../../img/night/bg_hb_night_pc.webp);
}


/* =======================================
  03. Components
（news / event / product / pager / category / article / toc / card / search / cardlist / modal / movie / faq / link / slider / breadcrumb）
======================================= */
/* ------ news ------- */
/* .hb_news_item */
.hb_news_item{
  background: rgba(0, 0, 0, 0.5);
}
.hb_news_item > a{
  color: var(--color-hb-font-night);
}

/* ------ article ------- */
.hb_article_body p,
.hb_article_body .hb_list_box li,
.hb_article_body a.hb_txt_link{
  color: var(--color-hb-font-night);
  text-shadow:
    -1px -1px 30px #000,
    1px -1px 30px #000,
    -1px 1px 30px #000,
    1px 1px 30px #000;
}
.hb_article_body p ruby[data-ruby],
.hb_article_body .hb_list_box li ruby[data-ruby],
.hb_article_body a.hb_txt_link ruby[data-ruby]{
  text-shadow: none;
}

/* .hb_table_store（記事：店舗一覧の表） */
.hb_table_store th{
  background: #969696;
  border-color: #969696;
  border-bottom-color: #000;
  border-right-color: #000;
  color: #000;
}
.hb_table_store th:last-child{
  border-right-color: #969696;
}
.hb_table_store td{
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--color-hb-font-night);
}

/* ------ search ------- */
/* .hb_search_box（検索ボックス全体） */
.hb_search_box{
  --hb-search-bg: rgba(255, 255, 255, 0.9);
}
.hb_search_result_num{
  background-color: #926d26;
}
.hb_search_result_info .hb_search_check{
  color: var(--color-hb-font-night);
}
.hb_search_none{
  --hb-search-none-bg: rgba(0, 0, 0, 0.5);
  --hb-search-none-color: var(--color-hb-font-night);
}

/* ------ modal ------- */
.hb_modal_box{
  --hb-modal-head-color: #000; /* タイトル・閉じるボタン */
}
/* 上タイトルの帯 */
.hb_modal_head{
  background-image: url(../../img/common/cardlist/bg_hb_modal_head_night.webp);
}
/* 下の帯 */
.hb_modal_inner::after{
  background-image: url(../../img/common/cardlist/bg_hb_modal_foot_night.webp);
}

/* ------ faq ------- */
.hb_faq_list_box{
  --hb-faq-color: var(--color-hb-font-night);
  --hb-faq-cat-bg: #fff;
  --hb-faq-cat-color: #000;
  --hb-faq-source-bg: rgba(0, 0, 0, 0.6);
  --hb-faq-source-border: #fff;
  --hb-faq-source-color: #fff;
}
/* Q.・A.のアイコン */
.hb_faq_question::before{
  background-image: url(../../img/night/faq/icon_hb_faq_q.webp);
}
.hb_faq_answer::before{
  background-image: url(../../img/night/faq/icon_hb_faq_a.webp);
}
.hb_faq_question,
.hb_faq_answer{
  text-shadow:
    -1px -1px 30px #000,
    1px -1px 30px #000,
    -1px 1px 30px #000,
    1px 1px 30px #000
}
.hb_faq_question ruby[data-ruby],
.hb_faq_answer ruby[data-ruby]{
  text-shadow: none;
}

/* ------ link ------- */
/* .hb_link_top_box */
.hb_link_top_item > a{
  background: rgba(0, 0, 0, 0.5);
  color: var(--color-hb-font-night);
}

/* ------ slider ------- */
/* .hb_slider_mv_box */
.hb_slider_mv_box{
  --hb-slider-arrow-front: #fff;
  --hb-slider-arrow-back: rgba(255, 255, 255, 0.5);
  --hb-slider-bar-border: 1px solid #fff;
}

/* .hb_slider_product_box */
.hb_slider_product_box{
  --hb-slider-arrow-front: #808080;
  --hb-slider-arrow-back: #b2b2b2;
}

/* ------ .hb_breadcrumb ------- */
.hb_breadcrumb_item{
  --hb-breadcrumb-arrow-color: #fff;
}
.hb_breadcrumb_item a {
  color: var(--color-hb-font-night);
}
.hb_breadcrumb_item span {
  color: var(--color-hb-font-night);
}


/* =======================================
  04. Layout（wrapper / container / header / footer）
======================================= */
/* ------ header -------*/
.hb_nav{
  --hb-nav-open-color: #fff; /* 文字・アイコン・線・閉じるボタンの色 */
}
.hb_nav::before{
  background-image: url(../../img/night/bg_hb_nav_night.webp);
}


/* ------ footer -------*/
.hb_footer{
  --hb-footer-info-color: #fff; /* 文字の色 */
  --hb-footer-logo-filter: brightness(0) invert(1); /* ロゴの色 */
}


/* =======================================
  05. Animation（night background / night top）
======================================= */
/* ------ night background ------- */
.hb_night_chara_item{
  opacity: 0;
  position: absolute;
}
.hb_night_chara_item.is-show{
  animation: hb-chara-appear 3.5s ease var(--hb-chara-delay, 0s) both;
}

/* 出てくるタイミングをずらす（7体ごとに、ばらばらの遅れを繰り返す） */
.hb_night_chara_item:nth-child(7n+1){ --hb-chara-delay: 0s; }
.hb_night_chara_item:nth-child(7n+2){ --hb-chara-delay: 0.5s; }
.hb_night_chara_item:nth-child(7n+3){ --hb-chara-delay: 0.2s; }
.hb_night_chara_item:nth-child(7n+4){ --hb-chara-delay: 0.9s; }
.hb_night_chara_item:nth-child(7n+5){ --hb-chara-delay: 0.35s; }
.hb_night_chara_item:nth-child(7n+6){ --hb-chara-delay: 1.1s; }
.hb_night_chara_item:nth-child(7n){   --hb-chara-delay: 0.7s; }

/* 背景キャラクター：ぼやけた状態から、ふわっと浮かび上がる */
@keyframes hb-chara-appear{
  0%  { opacity: 0; filter: blur(8px); transform: translateY(10px) scale(0.97); }
  100%{ opacity: 1; filter: blur(0);   transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .hb_night_chara_item.is-show{
    animation: none;
    opacity: 1;
  }
}

/* 位置と大きさ */
.hb_night_chara{
  --hb-chara-scale: 1; /* 全体の倍率 */
  --hb-chara-u: calc(min(1px, 100vw / 1060) * var(--hb-chara-scale));

  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
@media screen and (max-width: 767px){
  .hb_night_chara{
    --hb-chara-scale: 0.9;            /* 大きさの倍率 */
    --hb-chara-sp: calc(100vw / 390); /* 位置の単位（390px幅で1px） */
  }
}

/* 位置と大きさ（数値は1440pxデザインのpx） */
.hb_night_chara_01{
  top: calc(117 * var(--hb-chara-u));
  left: calc(50% - 740 * var(--hb-chara-u));
  width: calc(163 * var(--hb-chara-u));
}
.hb_night_chara_02{
  top: calc(130 * var(--hb-chara-u));
  right: calc(50% - 800 * var(--hb-chara-u));
  width: calc(180 * var(--hb-chara-u));
}
.hb_night_chara_03{
  top: calc(360 * var(--hb-chara-u));
  right: calc(50% - 650 * var(--hb-chara-u));
  width: calc(177 * var(--hb-chara-u));
}
.hb_night_chara_04{
  top: calc(360 * var(--hb-chara-u));
  left: calc(50% - 696 * var(--hb-chara-u));
  width: calc(202 * var(--hb-chara-u));
}
.hb_night_chara_05{
  top: calc(470 * var(--hb-chara-u));
  left: calc(50% - 446 * var(--hb-chara-u));
  width: calc(229 * var(--hb-chara-u));
}
.hb_night_chara_06{
  top: calc(470 * var(--hb-chara-u));
  right: calc(50% - 370 * var(--hb-chara-u));
  width: calc(194 * var(--hb-chara-u));
}
.hb_night_chara_07{
  top: calc(700 * var(--hb-chara-u));
  left: calc(50% - 835 * var(--hb-chara-u));
  width: calc(282 * var(--hb-chara-u));
}
.hb_night_chara_08{
  top: calc(670 * var(--hb-chara-u));
  right: calc(50% - 800 * var(--hb-chara-u));
  width: calc(212 * var(--hb-chara-u));
}
.hb_night_chara_09{
  top: calc(940 * var(--hb-chara-u));
  right: calc(50% - 650 * var(--hb-chara-u));
  width: calc(193 * var(--hb-chara-u));
}
.hb_night_chara_10{
  top: calc(950 * var(--hb-chara-u));
  left: calc(50% - 200 * var(--hb-chara-u));
  width: calc(231 * var(--hb-chara-u));
}
.hb_night_chara_11{
  top: calc(1010 * var(--hb-chara-u));
  right: calc(50% - 340 * var(--hb-chara-u));
  width: calc(208 * var(--hb-chara-u));
}
.hb_night_chara_12{
  top: calc(1050 * var(--hb-chara-u));
  left: calc(50% - 840 * var(--hb-chara-u));
  width: calc(459 * var(--hb-chara-u));
}
.hb_night_chara_13{
  top: calc(1200 * var(--hb-chara-u));
  right: calc(50% - 740 * var(--hb-chara-u));
  width: calc(370 * var(--hb-chara-u));
}
.hb_night_chara_14{
  top: calc(1840 * var(--hb-chara-u));
  left: calc(50% - 430 * var(--hb-chara-u));
  width: calc(306 * var(--hb-chara-u));
}
.hb_night_chara_15{
  top: calc(1800 * var(--hb-chara-u));
  right: calc(50% - 620 * var(--hb-chara-u));
  width: calc(319 * var(--hb-chara-u));
}
.hb_night_chara_16{
  top: calc(2020 * var(--hb-chara-u));
  left: calc(50% - 810 * var(--hb-chara-u));
  width: calc(386 * var(--hb-chara-u));
}
.hb_night_chara_17{
  top: calc(2110 * var(--hb-chara-u));
  right: calc(50% - 400 * var(--hb-chara-u));
  width: calc(328 * var(--hb-chara-u));
}
.hb_night_chara_18{
  top: calc(2270 * var(--hb-chara-u));
  right: calc(50% - 880 * var(--hb-chara-u));
  width: calc(658 * var(--hb-chara-u));
}
.hb_night_chara_19{
  top: calc(2640 * var(--hb-chara-u));
  left: calc(50% - 740 * var(--hb-chara-u));
  width: calc(499 * var(--hb-chara-u));
}
.hb_night_chara_20{
  top: calc(2800 * var(--hb-chara-u));
  left: calc(50% - 160 * var(--hb-chara-u));
  width: calc(441 * var(--hb-chara-u));
}
.hb_night_chara_21{
  top: calc(3130 * var(--hb-chara-u));
  right: calc(50% - 990 * var(--hb-chara-u));
  width: calc(728 * var(--hb-chara-u));
}
.hb_night_chara_22{
  top: calc(3480 * var(--hb-chara-u));
  left: calc(50% - 1140 * var(--hb-chara-u));
  width: calc(939 * var(--hb-chara-u));
}
@media screen and (max-width: 767px){
  /* 位置（数値は390px幅でのpx） */
  .hb_night_chara_01{
    top: calc(70 * var(--hb-chara-sp));
    left: 0;
  }
  .hb_night_chara_02{
    top: calc(70 * var(--hb-chara-sp));
    right: calc(-10 * var(--hb-chara-sp));
  }
  .hb_night_chara_03{
    top: calc(160 * var(--hb-chara-sp));
    right: calc(20 * var(--hb-chara-sp));
  }
  .hb_night_chara_04{
    top: calc(190 * var(--hb-chara-sp));
    left: 0;
  }
  .hb_night_chara_05{
    top: calc(260 * var(--hb-chara-sp));
    left: calc(100 * var(--hb-chara-sp));
  }
  .hb_night_chara_06{
    top: calc(240 * var(--hb-chara-sp));
    right: calc(130 * var(--hb-chara-sp));
  }
  .hb_night_chara_07{
    top: calc(300 * var(--hb-chara-sp));
    left: calc(-30 * var(--hb-chara-sp));
  }
  .hb_night_chara_08{
    top: calc(300 * var(--hb-chara-sp));
    right: calc(20 * var(--hb-chara-sp));
  }
  .hb_night_chara_09{
    top: calc(390 * var(--hb-chara-sp));
    right: calc(50 * var(--hb-chara-sp));
  }
  .hb_night_chara_10{
    top: calc(410 * var(--hb-chara-sp));
    left: calc(160 * var(--hb-chara-sp));
  }
  .hb_night_chara_11{
    top: calc(430 * var(--hb-chara-sp));
    right: calc(50 * var(--hb-chara-sp));
  }
  .hb_night_chara_12{
    top: calc(470 * var(--hb-chara-sp));
    left: calc(-25 * var(--hb-chara-sp));
  }
  .hb_night_chara_13{
    top: calc(500 * var(--hb-chara-sp));
    right: calc(-20 * var(--hb-chara-sp));
  }
  .hb_night_chara_14{
    top: calc(710 * var(--hb-chara-sp));
    left: calc(80 * var(--hb-chara-sp));
  }
  .hb_night_chara_15{
    top: calc(670 * var(--hb-chara-sp));
    right: calc(40 * var(--hb-chara-sp));
  }
  .hb_night_chara_16{
    top: calc(760 * var(--hb-chara-sp));
    left: calc(-20 * var(--hb-chara-sp));
  }
  .hb_night_chara_17{
    top: calc(760 * var(--hb-chara-sp));
    right: calc(30 * var(--hb-chara-sp));
  }
  .hb_night_chara_18{
    top: calc(830 * var(--hb-chara-sp));
    right: calc(-45 * var(--hb-chara-sp));
  }
  .hb_night_chara_19{
    top: calc(970 * var(--hb-chara-sp));
    left: calc(10 * var(--hb-chara-sp));
  }
  .hb_night_chara_20{
    top: calc(1050 * var(--hb-chara-sp));
    left: calc(170 * var(--hb-chara-sp));
  }
  .hb_night_chara_21{
    top: calc(1210 * var(--hb-chara-sp));
    right: calc(-80 * var(--hb-chara-sp));
  }
  .hb_night_chara_22{
    top: calc(1430 * var(--hb-chara-sp));
    left: calc(-70 * var(--hb-chara-sp));
  }
}


/* ------ night top ------- */
/* 外側の箱：PC・スマホ共通の単位と倍率 */
.hb_top_chara{
  --hb-top-scale: 1; /* 大きさの倍率 */
  --hb-top-u: calc(min(1px, 100vw / 1060) * var(--hb-top-scale)); /* 1060px以上は1px、未満は縮む */
}

/* PC：グループで出ては消え、最後に全員が出そろう */
.hb_top_chara_pc{
  height: calc(546 * var(--hb-top-u)); /* エリアの高さ（1440pxデザインでのpx） */
  position: relative;
}
.hb_top_chara_pc_item{
  opacity: 0;
  position: absolute;
  will-change: opacity, filter;
}
/* 出ては消える */
.hb_top_chara_pc_item.is-peek{
  animation: hb-chara-peek 4s ease var(--hb-chara-delay, 0s) both;
}
/* 出て残る（is-peek より後に書く） */
.hb_top_chara_pc_item.is-show{
  animation: hb-chara-fade 4s ease var(--hb-chara-delay, 0s) both;
}

/* 位置と大きさ（数値は1440pxデザインでのpx） */
.hb_top_chara_01{
  bottom: calc(280 * var(--hb-top-u));
  left: calc(50% - 820 * var(--hb-top-u));
  width: calc(109 * var(--hb-top-u));
  z-index: 3;
}
.hb_top_chara_02{
  bottom: calc(150 * var(--hb-top-u));
  left: calc(50% - 780 * var(--hb-top-u));
  width: calc(121 * var(--hb-top-u));
  z-index: 4;
}
.hb_top_chara_03{
  bottom: calc(20 * var(--hb-top-u));
  left: calc(50% - 740 * var(--hb-top-u));
  width: calc(118 * var(--hb-top-u));
  z-index: 21;
}
.hb_top_chara_04{
  bottom: calc(386 * var(--hb-top-u));
  left: calc(50% - 240 * var(--hb-top-u));
  width: calc(135 * var(--hb-top-u));
  z-index: 5;
}
.hb_top_chara_05{
  bottom: 0;
  left: calc(50% - 900 * var(--hb-top-u));
  width: calc(153 * var(--hb-top-u));
  z-index: 6;
}
.hb_top_chara_06{
  bottom: calc(280 * var(--hb-top-u));
  right: calc(50% - 880 * var(--hb-top-u));
  width: calc(130 * var(--hb-top-u));
  z-index: 7;
}
.hb_top_chara_07{
  bottom: calc(-20 * var(--hb-top-u));
  left: calc(50% - 443 * var(--hb-top-u));
  width: calc(188 * var(--hb-top-u));
  z-index: 18;
}
.hb_top_chara_08{
  bottom: calc(240 * var(--hb-top-u));
  left: calc(50% - 600 * var(--hb-top-u));
  width: calc(142 * var(--hb-top-u));
  z-index: 20;
}
.hb_top_chara_09{
  bottom: calc(280 * var(--hb-top-u));
  right: calc(50% - 380 * var(--hb-top-u));
  width: calc(129 * var(--hb-top-u));
  z-index: 1;
}
.hb_top_chara_10{
  bottom: calc(-30 * var(--hb-top-u));
  left: calc(50% - 630 * var(--hb-top-u));
  width: calc(154 * var(--hb-top-u));
  z-index: 22;
}
.hb_top_chara_11{
  bottom: calc(-10 * var(--hb-top-u));
  right: calc(50% - 440 * var(--hb-top-u));
  width: calc(139 * var(--hb-top-u));
  z-index: 13;
}
.hb_top_chara_12{
  bottom: calc(30 * var(--hb-top-u));
  left: calc(50% - 500 * var(--hb-top-u));
  width: calc(306 * var(--hb-top-u));
  z-index: 8;
}
.hb_top_chara_13{
  bottom: calc(40 * var(--hb-top-u));
  left: calc(50% - 630 * var(--hb-top-u));
  width: calc(247 * var(--hb-top-u));
  z-index: 17;
}
.hb_top_chara_14{
  bottom: calc(-40 * var(--hb-top-u));
  right: calc(50% - 320 * var(--hb-top-u));
  width: calc(205 * var(--hb-top-u));
  z-index: 16;
}
.hb_top_chara_15{
  bottom: calc(20 * var(--hb-top-u));
  left: calc(50% - 290 * var(--hb-top-u));
  width: calc(213 * var(--hb-top-u));
  z-index: 19;
}
.hb_top_chara_16{
  bottom: 0;
  left: calc(50% - 110 * var(--hb-top-u));
  width: calc(257 * var(--hb-top-u));
  z-index: 15;
}
.hb_top_chara_17{
  bottom: 0;
  right: calc(50% - 630 * var(--hb-top-u));
  width: calc(219 * var(--hb-top-u));
  z-index: 11;
}
.hb_top_chara_18{
  bottom: calc(-40 * var(--hb-top-u));
  right: calc(50% - 950 * var(--hb-top-u));
  width: calc(439 * var(--hb-top-u));
  z-index: 9;
}
.hb_top_chara_19{
  bottom: calc(50 * var(--hb-top-u));
  right: calc(50% - 420 * var(--hb-top-u));
  width: calc(333 * var(--hb-top-u));
  z-index: 12;
}
.hb_top_chara_20{
  bottom: calc(70 * var(--hb-top-u));
  left: calc(50% - 280 * var(--hb-top-u));
  width: calc(294 * var(--hb-top-u));
  z-index: 14;
}
.hb_top_chara_21{
  bottom: calc(160 * var(--hb-top-u));
  right: calc(50% - 250 * var(--hb-top-u));
  width: calc(349 * var(--hb-top-u));
  z-index: 10;
}
.hb_top_chara_22{
  bottom: calc(-30 * var(--hb-top-u));
  right: calc(50% - 830 * var(--hb-top-u));
  width: calc(626 * var(--hb-top-u));
  z-index: 2;
}


/* スマホ：4グループで切り替え（大きさはPCの指定 × 倍率） */
.hb_top_chara_sp{
  display: none;
}
@media screen and (max-width: 767px){
  .hb_top_chara{
    --hb-top-scale: 1.7; /* スマホの大きさの倍率 */
  }
  .hb_top_chara_pc{
    display: none;
  }
  .hb_top_chara_sp{
    --hb-top-sp-u: calc(100vw / 390); /* 位置の単位（390px幅で1px） */

    display: block;
    height: calc(300 * var(--hb-top-sp-u)); /* エリアの高さ（390px幅でのpx） */
    position: relative;
  }

  /* グループ：同じ場所に重ねて、7.5秒ずつずらす */
  .hb_top_chara_sp_group{
    inset: 0;
    position: absolute;
  }
  .hb_top_chara_sp_group:nth-child(2){ --hb-group-delay: 7.5s; }
  .hb_top_chara_sp_group:nth-child(3){ --hb-group-delay: 15s; }
  .hb_top_chara_sp_group:nth-child(4){ --hb-group-delay: 22.5s; }

  /* キャラクター：グループの遅れ ＋ グループ内の遅れで、1体ずつ出て、1体ずつ消える */
  .hb_top_chara_sp_item{
    animation: hb-top-item 30s ease infinite both;
    animation-delay: calc(var(--hb-group-delay, 0s) + var(--hb-item-delay, 0s));
    opacity: 0;
    position: absolute;
    will-change: opacity, filter;
  }
  .hb_top_chara_sp_item:nth-child(2){ --hb-item-delay: 0.25s; }
  .hb_top_chara_sp_item:nth-child(3){ --hb-item-delay: 0.5s; }
  .hb_top_chara_sp_item:nth-child(4){ --hb-item-delay: 0.75s; }
  .hb_top_chara_sp_item:nth-child(5){ --hb-item-delay: 1s; }
  .hb_top_chara_sp_item:nth-child(6){ --hb-item-delay: 1.25s; }
  .hb_top_chara_sp_item:nth-child(7){ --hb-item-delay: 1.5s; }

  /* 位置（数値は390px幅でのpx／左右の向きはPCと同じ） */
  /* グループ 1 */
  .hb_top_chara_01{
    bottom: calc(190 * var(--hb-top-sp-u));
    left: calc(50 * var(--hb-top-sp-u));
  }
  .hb_top_chara_02{
    bottom: calc(120 * var(--hb-top-sp-u));
    left: calc(90 * var(--hb-top-sp-u));
  }
  .hb_top_chara_03{
    bottom: calc(30 * var(--hb-top-sp-u));
    left: calc(120 * var(--hb-top-sp-u));
  }
  .hb_top_chara_05{
    bottom: calc(20 * var(--hb-top-sp-u));
    left: calc(30 * var(--hb-top-sp-u));
  }
  .hb_top_chara_08{
    bottom: calc(170 * var(--hb-top-sp-u));
    left: calc(210 * var(--hb-top-sp-u));
  }
  .hb_top_chara_10{
    bottom: 0;
    left: calc(190 * var(--hb-top-sp-u));
  }
  .hb_top_chara_13{
    bottom: calc(50 * var(--hb-top-sp-u));
    left: calc(200 * var(--hb-top-sp-u));
  }

  /* グループ 2 */
  .hb_top_chara_04{
    bottom: calc(210 * var(--hb-top-sp-u));
    left: calc(200 * var(--hb-top-sp-u));
  }
  .hb_top_chara_07{
    bottom: calc(-30 * var(--hb-top-sp-u));
    left: calc(80 * var(--hb-top-sp-u));
  }
  .hb_top_chara_12{
    bottom: calc(-10 * var(--hb-top-sp-u));
    left: calc(40 * var(--hb-top-sp-u));
  }
  .hb_top_chara_15{
    bottom: 0;
    left: calc(180 * var(--hb-top-sp-u));
  }
  .hb_top_chara_20{
    bottom: calc(26 * var(--hb-top-sp-u));
    left: calc(186 * var(--hb-top-sp-u));
  }

  /* グループ 3 */
  .hb_top_chara_17{
    bottom: 0;
    right: calc(180 * var(--hb-top-sp-u));
  }
  .hb_top_chara_18{
    bottom: calc(-50 * var(--hb-top-sp-u));
    right: calc(-50 * var(--hb-top-sp-u));
  }
  .hb_top_chara_22{
    bottom: calc(-50 * var(--hb-top-sp-u));
    right: 0;
  }

  /* グループ 4 */
  .hb_top_chara_09{
    bottom: calc(160 * var(--hb-top-sp-u));
    right: calc(42 * var(--hb-top-sp-u));
  }
  .hb_top_chara_11{
    bottom: calc(-13 * var(--hb-top-sp-u));
    right: calc(32 * var(--hb-top-sp-u));
  }
  .hb_top_chara_14{
    bottom: calc(-38 * var(--hb-top-sp-u));
    right: calc(103 * var(--hb-top-sp-u));
  }
  .hb_top_chara_16{
    bottom: calc(-20 * var(--hb-top-sp-u));
    left: calc(40 * var(--hb-top-sp-u));
  }
  .hb_top_chara_19{
    bottom: calc(10 * var(--hb-top-sp-u));
    right: calc(30 * var(--hb-top-sp-u));
  }
  .hb_top_chara_21{
    bottom: calc(61 * var(--hb-top-sp-u));
    right: calc(124 * var(--hb-top-sp-u));
  }
}

/* 出ては消える：ぼやけた状態から浮かび上がる → 少し見せる → ぼやけながら消える */
@keyframes hb-chara-peek{
  0%  { opacity: 0;   filter: blur(8px); }
  40% { opacity: 0.8; filter: blur(0); }
  65% { opacity: 0.8; filter: blur(0); }
  100%{ opacity: 0;   filter: blur(6px); }
}
/* 出て残る：ぼやけた状態から浮かび上がる */
@keyframes hb-chara-fade{
  0%  { opacity: 0; filter: blur(4px); }
  100%{ opacity: 1; filter: blur(0); }
}
/* スマホのキャラクター：浮かび上がる → 表示 → ぼやけながら消える（30秒周期） */
@keyframes hb-top-item{
  0%    { opacity: 0; filter: blur(4px); }
  7%    { opacity: 1; filter: blur(0); }
  17%   { opacity: 1; filter: blur(0); }
  19.5% { opacity: 0; filter: blur(4px); }
  100%  { opacity: 0; filter: blur(4px); }
}

/* 動きを減らす設定の人には、最初から表示 */
@media (prefers-reduced-motion: reduce){
  .hb_top_chara_pc_item.is-show{
    animation: none;
    opacity: 1;
  }
  .hb_top_chara_sp_item{
    animation: none;
  }
  .hb_top_chara_sp_group:first-child .hb_top_chara_sp_item{
    opacity: 1;
  }
}


/* =======================================
  06. Page（トップページ）.page_hb_top
======================================= */
/* トップページだけ、背景キャラクター全体を下にずらす */
.page_hb_top .hb_night_chara{
  top: calc(690 * var(--hb-chara-u)); /* PC：1440pxデザインでのpx */
}
@media screen and (max-width: 767px){
  .page_hb_top .hb_night_chara{
    top: calc(540 * var(--hb-chara-sp)); /* スマホ：390px幅でのpx */
  }
}


/* =======================================
  06. Page（初めてのかたへ）.page_hb_beginner
======================================= */


/* =======================================
  06. Page（ルール）.page_hb_rule
======================================= */


/* =======================================
  06. Page（よくある質問）.page_hb_faq
======================================= */


/* =======================================
  06. Page（カード検索）.page_hb_cardlist
======================================= */


/* =======================================
  06. Page（商品情報）.page_hb_product_list / .page_hb_product_detail
======================================= */


/* =======================================
  06. Page（イベント）.page_hb_event_list / .page_hb_event_article / .page_hb_event_search
======================================= */
/* ------ .page_hb_event_search（検索） -------*/
/* 検索結果の色（使う場所は common.css） */
.hb_event_search_result{
  --hb-event-search-bg: rgba(0, 0, 0, 0.5);             /* カードの背景 */
  --hb-event-search-border: var(--color-hb-yellow);       /* カードの枠 */
  --hb-event-search-name: var(--color-hb-font-night);     /* 店舗名 */
  --hb-event-search-address: #ccc;                      /* 住所 */
  --hb-event-search-line: rgba(181, 134, 28, 0.6);      /* 表の区切り線 */
  --hb-event-search-ttl-bg: rgba(181, 134, 28, 0.3);   /* 項目名の背景 */
  --hb-event-search-ttl-color: #cfba8b;                 /* 項目名の文字 */
  --hb-event-search-txt: var(--color-hb-font-night);      /* 値の文字 */
  --hb-event-search-map-bg: #fff;                       /* MAPボタンの背景 */
  --hb-event-search-map-color: #000;                    /* MAPボタンの文字 */
  --hb-event-search-map-icon: var(--color-hb-yellow);     /* MAPボタンのピン */
}


/* =======================================
  06. Page（お知らせ）.page_hb_news_list / .page_hb_news_article
======================================= */


/* =======================================
  07. Utilities（text / margin / align / pc・sp）
======================================= */