@charset "UTF-8";

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



/* =======================================
  02. Parts（title / button / link / list / table / category / background / icon）
======================================= */
/* ------ title -------*/
/* .hb_ttl_main */
.hb_ttl_main ruby[data-ruby]::before{
  font-weight: 700;
}

/* .hb_ttl_article_main（記事h1：筆の下線） */
.hb_ttl_article_main{
  background-image: url(../../img/daytime/news/bg_hb_ttl_article_main.webp);
  color: var(--color-hb-font-base);
}

/* .hb_ttl_article_sub（記事h2：筆背景） */
.hb_ttl_article_sub{
  text-shadow:
    -1px -1px 3px #000,
    1px -1px 3px #000,
    -1px 1px 3px #000,
    1px 1px 3px #000;
}
.hb_ttl_article_sub span{
  background-image: url(../../img/daytime/news/bg_hb_ttl_article_sub.webp);
  color: #fff;
}

/* .hb_ttl_article_topic（記事h3：ベージュの筆背景） */
.hb_ttl_article_topic span{
  background-image: url(../../img/daytime/news/bg_hb_ttl_article_topic.webp);
}

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

/* ------ background -------*/
.horobeat_wrapper{
  background-image: url(../../img/daytime/bg_hb_daytime_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{
  --hb-news-bg-alpha: 0.6; /* 背景全体の不透明度（0〜1） */
  --hb-news-bg-edge: rgba(247, 193, 161, var(--hb-news-bg-alpha));   /* 左右の端の色（カテゴリのクラスで上書き） */
  --hb-news-bg-center: rgba(255, 255, 255, var(--hb-news-bg-alpha)); /* 中央の色（白） */

  background: linear-gradient(
    90deg,
    var(--hb-news-bg-edge) 0%,
    var(--hb-news-bg-edge) 5%,
    12%,
    var(--hb-news-bg-center) 30%,
    var(--hb-news-bg-center) 70%,
    88%,
    var(--hb-news-bg-edge) 95%,
    var(--hb-news-bg-edge) 100%
  );
}
.hb_news_item > a{
  color: var(--color-hb-font-base);
}

/* カテゴリごとの端の色 */
.hb_news_item_campaign{
  --hb-news-bg-edge: rgba(247, 193, 161, var(--hb-news-bg-alpha)); /* #f7c1a1 */
}
.hb_news_item_product{
  --hb-news-bg-edge: rgba(182, 218, 243, var(--hb-news-bg-alpha)); /* #b6daf3 */
}
.hb_news_item_event{
  --hb-news-bg-edge: rgba(212, 231, 185, var(--hb-news-bg-alpha)); /* #d4e7b9 */
}
.hb_news_item_other{
  --hb-news-bg-edge: rgba(208, 175, 134, var(--hb-news-bg-alpha)); /* #d0af86 */
}

/* ------ search ------- */
.hb_search_none{
  --hb-search-none-bg: rgba(255, 255, 255, 0.6);
  --hb-search-none-color: var(--color-hb-font-base);
}

/* ------ faq ------- */
/* Q.・A.のアイコン */
.hb_faq_question::before{
  background-image: url(../../img/daytime/faq/icon_hb_faq_q.webp);
}
.hb_faq_answer::before{
  background-image: url(../../img/daytime/faq/icon_hb_faq_a.webp);
}

/* ------ link ------- */
/* .hb_link_top_box */
.hb_link_top_box{
  --hb-link-top-bg-alpha: 0.6; /* 背景全体の不透明度（0〜1） */
  --hb-link-top-bg-edge: rgba(247, 193, 161, var(--hb-link-top-bg-alpha));   /* 左右の端の色（#f7c1a1） */
  --hb-link-top-bg-center: rgba(255, 255, 255, var(--hb-link-top-bg-alpha)); /* 中央の色（白） */
}
.hb_link_top_item > a{
  background: linear-gradient(
    90deg,
    var(--hb-link-top-bg-edge) 0%,
    var(--hb-link-top-bg-edge) 5%,
    12%,
    var(--hb-link-top-bg-center) 30%,
    var(--hb-link-top-bg-center) 70%,
    88%,
    var(--hb-link-top-bg-edge) 95%,
    var(--hb-link-top-bg-edge) 100%
  );
  color: var(--color-hb-font-base);
}

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

/* ------ .hb_breadcrumb ------- */
.hb_breadcrumb_item{
  --hb-breadcrumb-arrow-color: #000;
}


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

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


/* =======================================
  05. Animation（floating / fade）
======================================= */


/* =======================================
  06. Page（トップページ）.page_hb_top
======================================= */
.page_hb_top main{
  padding-top: var(--size-hb-50);
}
@media screen and (max-width: 767px){
  .page_hb_top main{
    padding-top: var(--size-hb-20);
  }
}

/* =======================================
  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(255, 255, 255, 0.6);       /* カードの背景 */
  --hb-event-search-border: var(--color-hb-yellow);       /* カードの枠 */
  --hb-event-search-name: #000;                         /* 店舗名 */
  --hb-event-search-address: #5d5246;                   /* 住所 */
  --hb-event-search-line: #e3d6bc;                      /* 表の区切り線 */
  --hb-event-search-ttl-bg: #f4ecdc;                    /* 項目名の背景 */
  --hb-event-search-ttl-color: #6b4f1f;                 /* 項目名の文字 */
  --hb-event-search-txt: #000;                          /* 値の文字 */
  --hb-event-search-map-bg: #000;                       /* MAPボタンの背景 */
  --hb-event-search-map-color: #fff;                    /* 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）
======================================= */