@charset "UTF-8";

/* =======================================
  01. Base（reset / :root / typography / ruby）
======================================= */
/* ------ Reset -------*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}
html,body {
  -webkit-text-size-adjust: 100%;
}

/* ------ root (PC：1060px基準 / スマホ：390px基準） -------*/
:root {
  /* font-family */
  --font-hb-gothic: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  --font-hb-mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "HGS明朝E", "MS PMincho", serif;

  /* color */
  --color-hb-red: #c7231f;
  --color-hb-blue: #3e669a;
  --color-hb-green: #357421;
  --color-hb-yellow: #b5861c;
  --color-hb-font-base: #000;
  --color-hb-font-night: #fff;

  /* size */
  --size-hb-5:   min(0.472vw, 5px);
  --size-hb-10:  min(0.943vw, 10px);
  --size-hb-15:  min(1.415vw, 15px);
  --size-hb-20:  min(1.887vw, 20px);
  --size-hb-25:  min(2.358vw, 25px);
  --size-hb-30:  min(2.830vw, 30px);
  --size-hb-40:  min(3.774vw, 40px);
  --size-hb-50:  min(4.717vw, 50px);
  --size-hb-60:  min(5.660vw, 60px);
  --size-hb-70:  min(6.604vw, 70px);
  --size-hb-80:  min(7.547vw, 80px);
  --size-hb-90:  min(8.491vw, 90px);
  --size-hb-100: min(9.434vw, 100px);
  --size-hb-120: min(11.321vw, 120px);
  --size-hb-140: min(13.208vw, 140px);

  /* font size */
  --font-size-hb-xs:   min(1.321vw, 14px);
  --font-size-hb-base: min(1.509vw, 16px);
  --font-size-hb-md:   min(1.698vw, 18px);
  --font-size-hb-lg:   min(1.887vw, 20px);
  --font-size-hb-xl:   min(2.264vw, 24px);
  --font-size-hb-2xl:  min(2.491vw, 26.4px);
  --font-size-hb-3xl:  min(2.642vw, 28px);

  /* font size（article） */
  --font-size-hb-article-body:  min(1.698vw, 18px);
  --font-size-hb-article-main:  min(3.774vw, 40px);
  --font-size-hb-article-sub:   min(3.396vw, 36px);
  --font-size-hb-article-topic: min(2.736vw, 29px);
  --font-size-hb-article-item:  min(2.453vw, 26px);
  --font-size-hb-article-minor: min(2.358vw, 25px);

  /* font size（ruby） */
  --font-size-hb-ruby-base: clamp(6.5px, 50%, 8px);
  --font-size-hb-ruby-ttl:  clamp(8px, 42%, 11px);
}

@media screen and (max-width: 767px) {
  :root {
    /* size */
    --size-hb-5:   1.282vw;  /* 390px時 5px */
    --size-hb-10:  2.564vw;  /* 390px時 10px */
    --size-hb-15:  3.846vw;  /* 390px時 15px */
    --size-hb-20:  5.128vw;  /* 390px時 20px */
    --size-hb-25:  6.410vw;  /* 390px時 25px */
    --size-hb-30:  7.692vw;  /* 390px時 30px */
    --size-hb-40:  10.256vw; /* 390px時 40px */
    --size-hb-50:  12.821vw; /* 390px時 50px */
    --size-hb-60:  15.385vw; /* 390px時 60px */
    --size-hb-70:  17.949vw; /* 390px時 70px */
    --size-hb-80:  20.513vw; /* 390px時 80px */
    --size-hb-90:  23.077vw; /* 390px時 90px */
    --size-hb-100: 25.641vw; /* 390px時 100px */
    --size-hb-120: 30.769vw; /* 390px時 120px */
    --size-hb-140: 35.897vw; /* 390px時 140px */


    /* font size（本文用：上限あり） */
    --font-size-hb-xs:    min(2.821vw, 14px); /* 390px時 11px */
    --font-size-hb-base:  min(3.077vw, 15px); /* 390px時 12px */
    --font-size-hb-md:    min(3.333vw, 16px); /* 390px時 13px */
    --font-size-hb-lg:    min(3.590vw, 17px); /* 390px時 14px */

    /* font size（見出し用：画面幅に比例） */
    --font-size-hb-xl:    3.974vw; /* 390px時 15.5px */
    --font-size-hb-2xl:   4.231vw; /* 390px時 16.5px */
    --font-size-hb-3xl:   4.487vw; /* 390px時 17.5px */


    /* font size（article） */
    --font-size-news-2xl:  min(5.641vw, 24px); /* 390px時 約22px */
    --font-size-news-xl:   min(5.128vw, 23px); /* 390px時 約20px */
    --font-size-news-lg:   min(4.359vw, 20px); /* 390px時 約17px */
    --font-size-news-md:   min(4.103vw, 19px); /* 390px時 約16px */
    --font-size-news-base: min(3.846vw, 18px); /* 390px時 約15px */

    /* font size（article） */
    --font-size-hb-article-body:  min(3.846vw, 18px); /* 390px時 15px */
    --font-size-hb-article-main:  min(5.641vw, 26px); /* 390px時 22px */
    --font-size-hb-article-sub:   min(5.128vw, 24px); /* 390px時 20px */
    --font-size-hb-article-topic: min(4.615vw, 21px); /* 390px時 18px */
    --font-size-hb-article-item:  min(4.359vw, 20px); /* 390px時 17px */
    --font-size-hb-article-minor: min(4.103vw, 19px); /* 390px時 16px */

    /* font size（ruby） */
    --font-size-hb-ruby-ttl:  clamp(6.5px, 42%, 8px);
  }
}

/* ------ typography -------*/
.horobeat_wrapper{
  font-size: 62.5%;
}
.horobeat_wrapper main{
  color: var(--color-hb-font-base);
  font-family: var(--font-hb-mincho);
  font-size: var(--font-size-hb-base);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.6;
}
.horobeat_wrapper main h1,
.horobeat_wrapper main h2,
.horobeat_wrapper main h3,
.horobeat_wrapper main h4,
.horobeat_wrapper main h5{
  font-weight: 600;
}
.horobeat_wrapper main p{
  margin-bottom: 1.5em;
}
.horobeat_wrapper main p:last-child{
  margin-bottom: 0;
}

/* ------ ruby -------*/
.horobeat_wrapper ruby[data-ruby]{
  position: relative;
  white-space: nowrap;
}
.horobeat_wrapper ruby[data-ruby]::before{
  content: attr(data-ruby);
  position: absolute;
  top: -1.1em;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  text-align: center;
  font-size: var(--font-size-hb-ruby-base);
  white-space: nowrap;
}
.horobeat_wrapper rt{
  display: none;
}

/* ------ image -------*/
img{
  display: block;
}


/* =======================================
  02. Parts（title / button / link / list / table / category / background / icon）
======================================= */
/* ------ title -------*/
/* .hb_ttl_main */
.hb_ttl_main{
  color: #fff;
  font-size: var(--font-size-hb-2xl);
  letter-spacing: 0.4em;
  margin-bottom: 1.25em;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.75);
  text-align: center;
}
.hb_ttl_main span{
  background-image: url(../../img/common/bg_hb_ttl_main.webp);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  display: inline-block;
  margin: 0 auto;
  padding: 0 2em;
  padding-top: 1.25em;
  height: min(9.245vw, 98px);
  min-width: min(33.113vw, 351px);
}
.hb_ttl_main ruby[data-ruby]::before{
  font-size: var(--font-size-hb-ruby-ttl);
  top: -1em;
  text-shadow:
  2px 2px 2px rgba(0, 0, 0, 0.75),
  0 0 3px rgba(0, 0, 0, 0.75),
  0 0 2px rgba(0, 0, 0, 0.75);
}
@media screen and (max-width: 767px) {
  .hb_ttl_main{
    text-shadow: 1.5px 1.5px 1.5px rgba(0, 0, 0, 0.75);
  }
  .hb_ttl_main span{
    height: 15.513vw; /* 390px時 60.5px */
    min-width: 56.41vw;  /* 390px時 220px */
  }
  .hb_ttl_main ruby[data-ruby]::before{
    text-shadow:
    1.5px 1.5px 1.5px rgba(0, 0, 0, 0.75),
    0 0 3px rgba(0, 0, 0, 0.75),
    0 0 2px rgba(0, 0, 0, 0.75);
  }
}

/* .hb_ttl_sub */
.hb_ttl_sub{
  color: #fff;
  font-size: var(--font-size-hb-2xl);
  letter-spacing: 0.2em;
  margin-bottom: 1.2em;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.75);
  text-align: center;
}
.hb_ttl_sub span{
  background-image: url(../../img/common/bg_hb_ttl_sub.webp);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  display: inline-block;
  margin: 0 auto;
  line-height: 1.9;
  padding: 0 1.5em;
  padding-top: 0.4em;
  height: min(6.415vw, 68px);
  min-width: min(31.132vw, 330px);
}
.hb_ttl_sub.hb_ttl_sub_red span{
  background-image: url(../../img/common/bg_hb_ttl_sub_red.webp);
}
.hb_ttl_sub.hb_ttl_sub_blue span{
  background-image: url(../../img/common/bg_hb_ttl_sub_blue.webp);
}
.hb_ttl_sub.hb_ttl_sub_large span{
  min-width: min(56.604vw, 600px);
}
.hb_ttl_sub.hb_ttl_sub_small{
  font-size: var(--font-size-hb-lg);
}
.hb_ttl_sub.hb_ttl_sub_small span{
  height: auto;
  line-height: 1.6;
  min-width: min(24.528vw, 260px);
  padding: 0.6em 1.5em 0.35em;
}
.hb_ttl_sub ruby[data-ruby]::before{
  font-size: var(--font-size-hb-ruby-ttl);
  top: -1em;
}
.hb_ttl_sub.ruby_none span {
  padding-top: 0.25em;
}
@media screen and (max-width: 767px) {
  .hb_ttl_sub{
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
  }
  .hb_ttl_sub span{
    padding-top: 0.6em;
    padding-bottom: 0.5em;
    height: auto;
    min-height: 12.308vw; /* 390px時 48px */
    min-width: 56.41vw;  /* 390px時 220px */
  }
  .hb_ttl_sub.ruby_none span {
    padding-top: 0.75em;
    line-height: 1.4;
  }
  .hb_ttl_sub.hb_ttl_sub_small span{
    min-height: 0;
    min-width: 51.282vw; /* 390px時 200px */
  }
}

/* .hb_ttl_item */
.hb_ttl_item{
  color: #fff;
  font-size: calc(var(--font-size-hb-md) * 0.95);
  letter-spacing: 0.2em;
  margin-bottom: 1.2em;
}
.hb_ttl_item span{
  display: inline-block;
  isolation: isolate;
  padding: 0.5em 1em 0.25em;
  position: relative;
  min-width: min(16.038vw, 170px);
  text-align: center;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.75),
    0 0 3px rgba(0, 0, 0, 0.75);
}
.hb_ttl_item span::before{
  background: url("../../img/common/bg_hb_ttl_brush.webp") center / 100% 100% no-repeat;
  content: '';
  inset: -55% -8% -40% 0;
  position: absolute;
  z-index: -1;
}
.hb_ttl_item.ruby_none span {
  padding: 0.25em 2.2em;
}
@media screen and (max-width: 767px) {
  .hb_ttl_item span{
    min-width: 30.769vw; /* 390px時 120px */
  }
  .hb_ttl_item ruby[data-ruby]::before{
    font-size: var(--font-size-hb-ruby-base);
    top: -0.8em;
  }
}

/* .hb_ttl_howto（其の〜：筆の下線） */
.hb_ttl_howto{
  align-items: center;
  display: flex;
  font-size: var(--font-size-hb-3xl);
  gap: 0.6em;
  letter-spacing: 0.15em;
  line-height: 1.4;
  margin-bottom: 1em;
  padding: 0.5em 0 0.45em;
  position: relative;
}
.hb_ttl_howto::after{
  background: linear-gradient(90deg, var(--color-hb-yellow) 55%, rgba(181, 134, 28, 0.35));
  bottom: 0;
  content: '';
  height: min(0.566vw, 6px);
  left: 0;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 10' preserveAspectRatio='none'%3E%3Cpath d='M0 4.5C30 1.2 90 .8 200 1.6S600 2.6 800 3.2 960 4 1000 5C960 6 900 6.4 800 6.8S400 8 200 8.6 30 9.6 0 6.5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 10' preserveAspectRatio='none'%3E%3Cpath d='M0 4.5C30 1.2 90 .8 200 1.6S600 2.6 800 3.2 960 4 1000 5C960 6 900 6.4 800 6.8S400 8 200 8.6 30 9.6 0 6.5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  position: absolute;
  right: 0;
}
.hb_ttl_howto_num{
  color: #fff;
  flex: none;
  font-size: 0.65em;
  isolation: isolate;
  letter-spacing: 0.15em;
  padding: 0.7em 1.5em 0.35em 1.2em;
  position: relative;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.75),
    0 0 3px rgba(0, 0, 0, 0.75);
}
.hb_ttl_howto_num::before{
  background: url("../../img/common/bg_hb_ttl_brush.webp") center / 100% 100% no-repeat;
  content: '';
  inset: -50% -4% -33% -4%;
  position: absolute;
  z-index: -1;
}
.hb_ttl_howto ruby[data-ruby]::before{
  font-size: var(--font-size-hb-ruby-ttl);
  top: -1em;
}
.hb_ttl_howto_num ruby[data-ruby]::before{
  font-size: var(--font-size-hb-ruby-base);
  top: -0.8em;
}
@media screen and (max-width: 767px){
  .hb_ttl_howto{
    margin-bottom: var(--size-hb-20);
    padding-bottom: 0.6em;
  }
  .hb_ttl_howto::after{
    height: 1.282vw; /* 390px時 5px */
  }
}

/* .hb_ttl_num（番号付きの見出し：黒い四角の番号＋金の下線） */
.hb_ttl_num{
  align-items: center;
  border-bottom: 1px solid rgba(181, 134, 28, 0.7);
  display: flex;
  font-size: var(--font-size-hb-md);
  gap: 0.6em;
  letter-spacing: 0.1em;
  line-height: 1.6;
  margin-bottom: 0.6em;
  padding: 0.4em 0;
}
.hb_ttl_num_icon{
  align-items: center;
  background-color: #000;
  color: #fff;
  display: flex;
  flex: none;
  font-size: 0.85em;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  aspect-ratio: 1 / 1;
  width: 1.7em;
}
@media screen and (max-width: 767px){
  .hb_ttl_num{
    font-size: var(--font-size-hb-lg);
    gap: 0.5em;
  }
}

/* .hb_ttl_article_main（記事h1：筆の下線） */
.hb_ttl_article_main{
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: min(80.377vw, 852px) auto;
  font-size: var(--font-size-hb-article-main);
  letter-spacing: 0.15em;
  margin-bottom: 1em;
  padding-bottom: 0.6em;
  text-align: center;
}

/* .hb_ttl_article_sub（記事h2：筆背景） */
.hb_ttl_article_sub{
  font-size: var(--font-size-hb-article-sub);
  letter-spacing: 0.1em;
  margin-bottom: 0.8em;
  text-align: center;
}
.hb_ttl_article_sub span{
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #fff;
  display: inline-block;
  min-width: 100%;
  padding: 0.5em 1.5em 0.25em;
}

/* .hb_ttl_article_topic（記事h3：ベージュの筆背景） */
.hb_ttl_article_topic{
  font-size: var(--font-size-hb-article-topic);
  letter-spacing: 0.1em;
  margin-bottom: 0.8em;
  text-align: center;
}
.hb_ttl_article_topic span{
  background-image: url(../../img/common/news/bg_hb_ttl_article_topic.png);
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #000;
  display: inline-block;
  min-width: 100%;
  padding: 0.7em 1.5em 0.5em;
}

/* .hb_ttl_article_item（記事h4：菱形の背景） */
.hb_ttl_article_item{
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #fff;
  font-size: var(--font-size-hb-article-item);
  letter-spacing: 0.1em;
  margin-bottom: 0.8em;
  padding: 0.25em 1em 0em;
  text-align: center;
}

/* .hb_ttl_article_minor（記事h5：【】で囲む） */
.hb_ttl_article_minor{
  font-size: var(--font-size-hb-article-minor);
  letter-spacing: 0.1em;
  margin-bottom: 0.8em;
  text-align: center;
}
.hb_ttl_article_minor::before{ content: '【'; }
.hb_ttl_article_minor::after{  content: '】'; }

/* 記事見出しのルビ */
:is(.hb_ttl_article_main, .hb_ttl_article_sub, .hb_ttl_article_topic, .hb_ttl_article_item, .hb_ttl_article_minor) ruby[data-ruby]::before{
  font-size: var(--font-size-hb-ruby-ttl);
}

/* ------ button -------*/
.hb_btn, a.hb_btn {
  color: #fff;
  display: block;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: 0.3s all;
}
@media (hover: hover) {
  .hb_btn:hover{
    text-decoration: none;
    transform:scale(0.95);
  }
}
.hb_btn:last-child{
  margin-bottom: 0;
}
.hb_btn.none{
  pointer-events: none;
}
@media screen and (max-width: 767px){
  .hb_btn img{
    width: 100%;
    height: auto;
  }
}

/* .hb_btn_primary（六角形：模様の画像＋CSSの金枠） */
a.hb_btn_primary{
  --hb-btn-h: min(4.245vw, 45px);                 /* ボタンの高さ */
  --hb-btn-tip: calc(var(--hb-btn-h) * 0.3);     /* 左右の三角の幅（高さに比例） */
  --hb-btn-line: 1.5px;                           /* 枠線の太さ */
  --hb-btn-line-color: #b5861c;                   /* 枠線の色 */
  --hb-btn-bg: #1b1b1b url(../../img/common/bg_hb_btn_texture.webp) center / cover no-repeat;

  align-items: center;
  background-color: var(--hb-btn-line-color);
  clip-path: polygon(
    var(--hb-btn-tip) 0, calc(100% - var(--hb-btn-tip)) 0, 100% 50%,
    calc(100% - var(--hb-btn-tip)) 100%, var(--hb-btn-tip) 100%, 0 50%
  );
  display: flex;
  font-size: var(--font-size-hb-lg);
  gap: 0.3em;
  isolation: isolate;
  justify-content: center;
  max-width: 100%;
  min-height: var(--hb-btn-h);
  min-width: min(30.189vw, 320px);
  padding: 0 calc(var(--hb-btn-tip) + 0.8em);
  position: relative;
}
/* 中の模様（枠線の分だけ内側に） */
a.hb_btn_primary::before{
  --hb-btn-tip-in: calc(var(--hb-btn-tip) - var(--hb-btn-line) * 0.54);

  background: var(--hb-btn-bg);
  clip-path: polygon(
    var(--hb-btn-tip-in) 0, calc(100% - var(--hb-btn-tip-in)) 0, 100% 50%,
    calc(100% - var(--hb-btn-tip-in)) 100%, var(--hb-btn-tip-in) 100%, 0 50%
  );
  content: '';
  inset: var(--hb-btn-line) calc(var(--hb-btn-line) * 1.14);
  position: absolute;
  z-index: -1;
}
a.hb_btn_primary.hb_btn_large{
  --hb-btn-h: min(5.189vw, 55px);
  font-size: var(--font-size-hb-3xl);
  min-width: min(45.566vw, 483px);
}
a.hb_btn_primary.hb_btn_small{
  --hb-btn-h: min(3.774vw, 40px);
  font-size: var(--font-size-hb-md);
  min-width: min(23.019vw, 244px);
}
a.hb_btn_primary.hb_btn_small.hb_btn_small_beige{
  --hb-btn-line-color: #000;
  --hb-btn-bg: #d9c7a6 url(../../img/common/bg_hb_btn_texture_beige.webp) center / cover no-repeat;
}
a.hb_btn_primary.hb_btn_xsmall{
  --hb-btn-h: min(3.396vw, 36px);
  font-size: var(--font-size-hb-md);
  min-width: min(21.509vw, 228px);
}
a.hb_btn_primary span{
  padding: 0.05em 0 0;
}
a.hb_btn_primary.ruby_none span {
  padding: 0;
}
a.hb_btn_primary.hb_btn_large span{
  width: min(28.302vw, 300px);
}
@media screen and (max-width: 767px){
  a.hb_btn_primary,
  a.hb_btn_primary.hb_btn_large{
    --hb-btn-h: 9.744vw; /* 390px時 38px */
    font-size: var(--font-size-hb-xl);
    min-width: 71.795vw; /* 390px時 280px */
  }
  a.hb_btn_primary.hb_btn_small{
    --hb-btn-h: 7.692vw; /* 390px時 30px */
    font-size: var(--font-size-hb-base);
    min-width: 35.897vw; /* 390px時 140px */
  }
  a.hb_btn_primary.hb_btn_xsmall{
    --hb-btn-h: 7.692vw; /* 390px時 30px */
    font-size: var(--font-size-hb-md);
    min-width: 46.154vw; /* 390px時 180px */
  }
  a.hb_btn_primary.hb_btn_large span{
    width: 43.59vw; /* 390px時 170px */
  }
}

a.hb_btn_primary ruby[data-ruby]::before{
  font-size: clamp(6.5px, 50%, 7.5px);
  top: -1em;
}
@media screen and (max-width: 767px){
  a.hb_btn_primary ruby[data-ruby]::before{
    font-size: clamp(5.5px, 50%, 7px);
  }
}

a.hb_btn_primary::after{
  content: '';
  aspect-ratio: 25 / 11;
  background-image: url(../../img/common/hb_icon_arrow_btn.webp);
  background-size: 100% auto;
  background-repeat: no-repeat;
  display: inline-block;
  width: var(--size-hb-30);
}
a.hb_btn_primary.hb_btn_large::after{
  width: min(3.302vw, 35px);
}
a.hb_btn_primary.hb_btn_small::after{
  width: var(--size-hb-25);
}
a.hb_btn_primary.hb_btn_xsmall::after{
  width: min(2.075vw, 22px);
}
@media screen and (max-width: 767px){
  a.hb_btn_primary::after,
  a.hb_btn_primary.hb_btn_large::after{
    width: var(--size-hb-20);
  }
  a.hb_btn_primary.hb_btn_small::after,
  a.hb_btn_primary.hb_btn_xsmall::after{
    width: var(--size-hb-15);
  }
}

/* .hb_btn_secondary */
.hb_btn_secondary{
  color: #fff;
  font-size: calc(var(--font-size-hb-lg) * 1.1);
  letter-spacing: 0.15em;
  margin-bottom: 1.5em;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.75);
  text-align: center;
}
.hb_btn_secondary span{
  background-image: url(../../img/common/bg_hb_ttl_main.webp);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  display: inline-block;
  margin: 0 auto;
  padding: 0 2em;
  padding-top: 1.6em;
  height: min(9.245vw, 98px);
  min-width: min(33.113vw, 351px);
}
.hb_btn_secondary ruby[data-ruby]::before{
  font-size: var(--font-size-hb-ruby-ttl);
}
@media screen and (max-width: 767px){
  .hb_btn_secondary span{
    padding-top: 1.4em;
    height: 15.513vw; /* 60.5px */
    min-width: 56.41vw;  /* 220px */
  }
}

/* ------ link -------*/
/* .hb_txt_link */
.hb_txt_link{
  color: var(--color-hb-font-base);
  text-decoration: underline;
  word-wrap: break-word;
}
@media (hover: hover) {
  .hb_txt_link:hover{
    text-decoration: none;
  }
}

/* ------ list -------*/
/* 共通 */
.horobeat_wrapper li{
  padding: 0;
  margin: 0;
}
.horobeat_wrapper li::before{
  display: none;
}

/* .hb_list_box */
.horobeat_wrapper .hb_list_box{
  position: relative;
  margin: 0;
}
.horobeat_wrapper .hb_list_box li{
  padding-left: 1.2em;
  position: relative;
}
.horobeat_wrapper .hb_list_box li::before{
  content: '・';
  display: block;
  position: absolute;
  left: 0;
  top: auto;
  background: none;
  width: auto;
  height: auto;
}

/* .hb_list_circle_box */
.horobeat_wrapper .hb_list_box.hb_list_circle_box li::before{
  content: '●';
}

/* .hb_list_notes_box */
.horobeat_wrapper .hb_list_box.hb_list_notes_box li::before{
  content: '※';
}

/* .hb_list_toc_box */
.horobeat_wrapper .hb_list_toc_box{
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-hb-lg);
  gap: 0.8em;
  margin: 0 auto;
  max-width: 100%;
  width: fit-content;
}
.hb_list_toc_box a{
  align-items: flex-start;
  color: inherit;
  display: flex;
  gap: 0.4em;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.hb_list_toc_box a::before{
  aspect-ratio: 14 / 21;
  background-color: currentColor;
  content: '';
  flex: none;
  margin-top: 0.15em;
  -webkit-mask: url("../../img/common/icon_hitodama.svg") center / contain no-repeat;
  mask: url("../../img/common/icon_hitodama.svg") center / contain no-repeat;
  width: 0.75em;
}
@media (hover: hover){
  .hb_list_toc_box a:hover{
    opacity: 0.7;
  }
}

/* ------ table -------*/
/* .hb_table */
.hb_table{
  border-collapse: collapse;
  margin: 0 auto;
  table-layout: fixed;
  width: 100%;
}
.hb_table th,
.hb_table td{
  border: 1px solid #333;
  color: #000;
  font-size: var(--font-size-hb-lg);
  padding: 0.4em 1em 0.2em;
  text-align: center;
}
.hb_table th{
  background: #b3b3b3 url(../../img/common/news/bg_hb_table_th.webp) center / cover no-repeat;
  font-weight: 600;
  width: 50%;
}
.hb_table td{
  background-color: rgba(255, 255, 255, 0.8);
}


/* ------ category -------*/
.hb_cat{
  --hb-cat-color: #000;

  align-items: center;
  background-color: var(--hb-cat-color);
  color: #fff;
  display: flex;
  font-size: var(--font-size-hb-lg);
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-decoration: none;
  padding: var(--size-hb-10);
  width: min(20.755vw, 220px);
}
.hb_cat_all{
  --hb-cat-color: #000;
}
.hb_cat_product{
  --hb-cat-color: var(--color-hb-blue);
}
.hb_cat_event{
  --hb-cat-color: var(--color-hb-green);
}
.hb_cat_campaign{
  --hb-cat-color: var(--color-hb-red);
}
.hb_cat_other{
  --hb-cat-color: var(--color-hb-yellow);
}
.hb_cat_expansion{
  --hb-cat-color: var(--color-hb-red);
}
.hb_cat_starter{
  --hb-cat-color: var(--color-hb-blue);
}
.hb_cat_goods{
  --hb-cat-color: var(--color-hb-yellow);
}
@media screen and (min-width: 768px){
  .horobeat_wrapper .hb_cat_product ruby[data-ruby]::before{
    letter-spacing: 0.3em;
  }
}
@media screen and (max-width: 767px){
  .hb_cat{
    font-size: var(--font-size-hb-md);
    letter-spacing: 0.1em;
    padding: var(--size-hb-5);
    width: 23.077vw; /* 390px時 90px */
  }
}

/* ------ background -------*/
.horobeat_wrapper{
  background-size: 100% auto;
  background-position: top center;
  background-repeat: repeat-y;
}

/* .hb_bg_primary */
.hb_bg_primary::before{
  content: '';
  background-image: url(../../img/common/bg_primary_pc_top.webp);
  display: block;
  aspect-ratio: 2236 / 150;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  height: 75px; /* 固定 */
  width: 100%;
  z-index: 1;
}
.hb_bg_primary{
  background-image: url(../../img/common/bg_primary_pc_body.webp);
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
  position: relative;
  margin: 0 auto;
  max-width: 1000px;
  width: 100%;
}
.hb_bg_primary::after{
  content: '';
  background-image: url(../../img/common/bg_primary_pc_bottom.webp);
  display: block;
  aspect-ratio: 2235 / 150;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  position: absolute;
  bottom: 0;
  height: 75px; /* 固定 */
  width: 100%;
  z-index: 1;
}
.hb_bg_primary_inner{
  padding: var(--size-hb-60);
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 767px){
  .hb_bg_primary::before{
    background-image: url(../../img/common/bg_primary_sp_top.webp);
    aspect-ratio: 1030 / 233;
  }
  .hb_bg_primary{
    background-image: url(../../img/common/bg_primary_sp_body.webp);
    max-width: 100%;
  }
  .hb_bg_primary::after{
    background-image: url(../../img/common/bg_primary_sp_bottom.webp);
    aspect-ratio: 1030 / 150;
  }
  .hb_bg_primary_inner{
    padding: var(--size-hb-30) 2em;
  }
}

/* ------ icon -------*/
/* .hb_icon_sns_x */
.hb_icon_sns_x {
  aspect-ratio: 1 / 1;
  text-align: center;
}
a.hb_icon_sns_x{
  color: var(--color-hb-font-base);
  font-family: var(--font-hb-mincho);
  font-size: var(--font-size-hb-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
}
.hb_icon_sns_x img{
  width: 100%;
  height: auto;
}
@media screen and (max-width: 767px){
  a.hb_icon_sns_x{
    font-size: calc(var(--font-size-hb-xs) * 0.8);
  }
}


/* =======================================
  03. Components
（news / event / product / pager / category / article / toc / card / search / cardlist / modal / movie / faq / link / slider / breadcrumb）
======================================= */
/* ------ news ------- */
/* .hb_news_list_box */
.hb_news_list_box{
  display: flex;
  flex-direction: column;
  gap: var(--size-hb-20);
  margin: 0 auto;
  max-width: min(90.566vw, 960px);
  width: 100%;
}
.hb_news_list_box ruby[data-ruby]{
  white-space: nowrap;
}
@media screen and (max-width: 767px){
  .hb_news_list_box{
    gap: var(--size-hb-10);
    max-width: 100%;
  }
}

/* .hb_news_item */
.hb_news_item{
  border: 2.5px solid var(--color-hb-yellow);
  font-family: var(--font-hb-mincho);
}
.hb_news_item.is-hidden{
  display: none;
}
.hb_news_item > a{
  align-items: center;
  display: flex;
  gap: var(--size-hb-25);
  padding: var(--size-hb-15);
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .hb_news_item > a:hover{
    opacity: 0.7;
  }
}
@media screen and (max-width: 767px){
  .hb_news_item{
    border-width: 0.385vw;
  }
  .hb_news_item > a{
    gap: var(--size-hb-10);
    padding: 2.051vw; /* 390px時 8px */
  }
}

/* .hb_news_thumb */
.hb_news_thumb{
  align-items: center;
  aspect-ratio: 1 / 1;
  display: flex;
  width: min(20.755vw, 220px);
}
.hb_news_thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media screen and (max-width: 767px){
  .hb_news_thumb{
    width: 25.641vw; /* 390px時 100px */
  }
}

/* .hb_news_content */
.hb_news_content{
  flex: 1;
  min-width: 0;
}

/* .hb_news_info */
.hb_news_info{
  align-items: center;
  display: flex;
  gap: var(--size-hb-20);
  margin-bottom: var(--size-hb-40);
}
@media screen and (max-width: 767px){
  .hb_news_info{
    gap: 2.051vw; /* 390px時 8px */
    margin-bottom: var(--size-hb-10);
  }
}

/* .hb_news_item .hb_cat */
.hb_news_item .hb_cat{
  font-size: calc(var(--font-size-hb-lg) * 1.1);
  padding: var(--size-hb-10) var(--size-hb-20);
}
.hb_news_item .hb_cat ruby[data-ruby]::before{
  display: none;
}
@media screen and (max-width: 767px){
  .hb_news_item .hb_cat{
    font-size: var(--font-size-hb-md);
    letter-spacing: 0;
    min-width: 23.077vw; /* 390px時 90px */
    padding: var(--size-hb-5);
  }
}

/* .hb_news_date */
.hb_news_date{
  font-size: calc(var(--font-size-hb-lg) * 1.1);
  letter-spacing: 0.15em;
  white-space: nowrap;
}
@media screen and (max-width: 767px){
  .hb_news_date{
    font-size: var(--font-size-hb-md);
  }
}

/* .hb_news_ttl */
.hb_news_ttl{
  font-size: var(--font-size-hb-md);
  letter-spacing: 0.05em;
  line-height: 1.9;
}
@media screen and (max-width: 767px){
  .hb_news_ttl{
    font-size: var(--font-size-hb-lg);
  }
}

/* ------ event ------- */
/* .hb_event_list_box */
.hb_event_list_box{
  display: grid;
  gap: var(--size-hb-40) var(--size-hb-30);
  grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 767px){
  .hb_event_list_box{
    gap: var(--size-hb-20);
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

/* .hb_event_item（白背景＋枠：中身の量に合わせて伸びる） */
.horobeat_wrapper .hb_event_item{
  background-image: url(../../img/common/event/bg_hb_event_item.webp);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  padding: 3px;
}
.hb_event_item_inner{
  background-color: #fff;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--size-hb-25) var(--size-hb-25) var(--size-hb-20);
}
@media screen and (max-width: 767px){
  .horobeat_wrapper .hb_event_item{
    padding: 2px;
  }
  .hb_event_item_inner{
    padding: var(--size-hb-15);
  }
}

/* .hb_event_thumb */
.hb_event_thumb{
  aspect-ratio: 1 / 1; /* 正方形。横長・縦長の画像は切らずに中央に表示（お知らせ一覧と同じ） */
  margin-bottom: var(--size-hb-15);
  overflow: hidden;
}
.hb_event_thumb img{
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}
.hb_event_content{
  display: flex;
  flex: 1;
  flex-direction: column;
}
.hb_event_content .hb_btn{
  align-self: center;
  margin-top: auto;
}

/* .hb_event_txt */
.horobeat_wrapper .hb_event_txt{
  font-size: var(--font-size-hb-xs);
  letter-spacing: 0.05em;
  line-height: 2;
  margin-bottom: var(--size-hb-15);
}
@media screen and (max-width: 767px){
  .horobeat_wrapper .hb_event_txt{
    font-size: var(--font-size-hb-base);
  }
}

/* ------ product ------- */
/* .hb_product_list_box */
.hb_product_list_box{
  display: flex;
  flex-direction: column;
  gap: var(--size-hb-40);
  margin: 0 auto;
  max-width: 1000px;
}
@media screen and (max-width: 767px){
  .hb_product_list_box{
    gap: var(--size-hb-20);
  }
}

/* .hb_product_item */
.hb_product_item{
  position: relative;
}
.hb_product_item.is-hidden{
  display: none;
}
.hb_product_item .hb_bg_primary_inner{
  display: flex;
  align-items: center;
  gap: var(--size-hb-20);
  padding: var(--size-hb-30);
}
@media screen and (max-width: 767px){
  .hb_product_item .hb_bg_primary_inner{
    gap: var(--size-hb-10);
    padding: var(--size-hb-15) var(--size-hb-10);
  }
}

/* .hb_product_thumb */
.hb_product_thumb{
  flex: none;
  width: min(23.585vw, 250px);
}
.hb_product_thumb img{
  width: 100%;
}
@media screen and (max-width: 767px){
  .hb_product_thumb{
    width: 23.077vw; /* 390px時 90px */
  }
}

/* .hb_product_content（カテゴリ・商品名・発売日/値段・詳しくはこちら） */
.hb_product_content{
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.hb_product_content .hb_cat{
  font-size: calc(var(--font-size-hb-lg) * 1.1);
  margin-bottom: var(--size-hb-20);
}
.hb_product_content .hb_cat_expansion,
.hb_product_content .hb_cat_goods{
  padding-top: min(1.132vw, 12px);
}
@media screen and (max-width: 767px){
  .hb_product_content .hb_cat{
    font-size: var(--font-size-hb-md);
    margin-bottom: var(--size-hb-10);
    min-width: 23.077vw; /* 390px時 90px */
    padding-left: 1em;
    padding-right: 1em;
    width: fit-content;
  }
  .hb_product_content .hb_cat_expansion,
  .hb_product_content .hb_cat_goods{
    padding-top: 2.051vw; /* 390px時 8px */
  }
}

/* .hb_product_ttl */
.hb_product_ttl{
  font-size: var(--font-size-hb-md);
  line-height: 1.9;
  margin-bottom: 1em;
}

/* .hb_product_info（発売日 / 値段） */
.hb_product_info{
  font-size: var(--font-size-hb-md);
  line-height: 1.9;
  margin: 0;
}
.hb_product_info > div{
  display: flex;
  flex-wrap: wrap;
}
.hb_product_info dt{
  font-weight: 500;
}
.hb_product_info dd{
  margin: 0;
}
@media screen and (max-width: 767px){
  .hb_product_ttl, .hb_product_info{
    letter-spacing: 0.05em;
  }
  .hb_product_info{
    font-size: var(--font-size-hb-base);
  }
}

/* .hb_product_btn */
.hb_product_btn{
  display: block;
  margin-top: auto;
  transition: opacity 0.3s ease;
  width: min(21.321vw, 226px);
  position: absolute;
  bottom: var(--size-hb-25);
  right: var(--size-hb-25);
}
.hb_product_btn img{
  width: 100%;
}
@media (hover: hover){
  .hb_product_btn:hover{
    opacity: 0.7;
  }
}
@media screen and (max-width: 767px){
  .hb_product_btn{
    align-self: flex-end;
    margin-top: var(--size-hb-10);
    position: relative;
    bottom: auto;
    right: auto;
    width: min(41.026vw, 160px);
  }
}

/* ------ pager ------- */
/* .hb_pager_box */
.hb_pager_box{
  margin-top: var(--size-hb-40);
}
.hb_pager_list{
  display: flex;
  gap: min(0.566vw, 6px);
  justify-content: center;
}
.hb_pager_item{
  -webkit-appearance: none;
  appearance: none;
  align-items: center;
  background-color: #999;
  border: 0;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-family: var(--font-hb-mincho);
  font-size: var(--font-size-hb-md);
  height: min(2.642vw, 28px);
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  padding: 0;
  transition: opacity 0.3s ease;
  width: min(2.642vw, 28px);
}
.hb_pager_item.is-active{
  background-color: #000;
  cursor: default;
}
.hb_pager_item:disabled{
  cursor: default;
  opacity: 0.4;
}
@media (hover: hover) {
  .hb_pager_item:not(.is-active):not(:disabled):hover{
    opacity: 0.7;
  }
}
@media screen and (max-width: 767px){
  .hb_pager_box{
    margin-top: var(--size-hb-30);
  }
  .hb_pager_list{
    gap: 1.538vw; /* 390px時 6px */
  }
  .hb_pager_item{
    height: min(8.205vw, 32px);
    width:  min(8.205vw, 32px);
  }
}

/* .hb_pager_gap（ページ送りの「…」：4ページ以上のときに出る。押せない、表示だけ）
   ・大きさは番号のボタン（.hb_pager_item）と同じ。文字は灰色（昼・夜どちらでも見える）
   ・PCだけ／スマホだけの「…」は、共通の .pc／.sp で出し分ける */
.hb_pager_gap{
  align-items: center;
  color: #999;
  cursor: default;
  display: flex;
  font-family: var(--font-hb-mincho);
  font-size: var(--font-size-hb-md);
  height: min(2.642vw, 28px);
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  user-select: none;
  width: min(2.642vw, 28px);
}
@media screen and (max-width: 767px){
  .hb_pager_gap{
    height: min(8.205vw, 32px);
    width:  min(8.205vw, 32px);
  }
}

/* ------ category ------- */
/* .hb_cat_box */
.hb_cat_box{
  --hb-cat-off: #999; /* 選択していないボタンの色 */

  display: flex;
  gap: var(--size-hb-15);
  margin: 0 auto var(--size-hb-60);
  scroll-margin-top: calc(50px + var(--size-hb-20)); /* ページ送りで戻ったとき、固定ヘッダーに隠れないように */
}
.hb_cat_box > li{
  flex: 1 1 0;
}
/* 選択していないボタンはグレー、選択中（.is-active）だけカテゴリの色 */
.hb_cat_box .hb_cat{
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--hb-cat-off);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-hb-mincho);
  min-height: min(4.34vw, 46px);
  transition: background-color 0.3s ease, opacity 0.3s ease;
  width: 100%;
}
.hb_cat_box .hb_cat.is-active{
  background-color: var(--hb-cat-color);
  cursor: default;
}
.hb_cat_box .hb_cat_product,
.hb_cat_box .hb_cat_other,
.hb_cat_box .hb_cat_expansion,
.hb_cat_box .hb_cat_goods{
  padding-top: min(1.132vw, 12px); /* ルビの分 */
}
@media (hover: hover) {
  .hb_cat_box .hb_cat:not(.is-active):hover{
    opacity: 0.7;
  }
}
@media screen and (max-width: 767px){
  .hb_cat_box{
    flex-wrap: wrap;
    gap: var(--size-hb-10);
    justify-content: center;
    margin-bottom: var(--size-hb-30);
  }
  .hb_cat_box > li{
    flex: none;
    width: calc((100% - var(--size-hb-10)) / 2);
  }
  .hb_cat_box .hb_cat{
    min-height: var(--size-hb-30);
  }
  .hb_cat_box .hb_cat_product,
  .hb_cat_box .hb_cat_other,
  .hb_cat_box .hb_cat_expansion,
  .hb_cat_box .hb_cat_goods{
    padding-top: 2.051vw; /* 390px時 8px */
  }
}

/* ------ article ------- */
/* .hb_article_img */
.hb_article_img{
  display: block;
  margin: 0 auto;
  height: auto;
  width: 100%;
}
.hb_article_img:last-child{
  margin-bottom: 0;
}
.hb_article_img.img_l{
  max-width: 100%;
}
.hb_article_img.img_m{
  max-width: 80%;
}
.hb_article_img.img_s{
  max-width: 60%;
}
.hb_article_img_main{
  margin-bottom: var(--size-hb-60);
  max-width: min( 90.566vw, 960px);
}
@media screen and (max-width: 767px){
  .hb_article_img.img_l,
  .hb_article_img.img_m,
  .hb_article_img.img_s {
    max-width: 100%;
  }
  .hb_article_img_main{
    margin-bottom: var(--size-hb-40);
  }
}

/* .hb_article_body */
.hb_article_body{
  font-size: var(--font-size-hb-article-body);
  line-height: 1.9;
  margin: 0 auto;
  max-width: min( 81.132vw, 860px);
}
.hb_article_body .hb_ttl_article_sub{   margin-top: var(--size-hb-80); }
.hb_article_body .hb_ttl_article_topic{ margin-top: var(--size-hb-60); }
.hb_article_body .hb_ttl_article_item{  margin-top: var(--size-hb-60); }
.hb_article_body .hb_ttl_article_minor{ margin-top: var(--size-hb-50); }
.hb_article_body > :first-child{
  margin-top: 0;
}
.hb_article_body .hb_article_img,
.hb_article_body .hb_table,
.hb_article_body .hb_article_map{
  margin-block: var(--size-hb-30);
}
.hb_article_body p ruby[data-ruby]::before{
  top: -1.2em;
}
.hb_article_body .hb_article_img{
  width: 100%;
}
.hb_article_body .hb_list_box{
  margin-bottom: 1.5em;
}
.hb_article_body > :last-child{
  margin-bottom: 0;
}
@media screen and (max-width: 767px){
  .hb_article_body .hb_ttl_article_sub{   margin-top: var(--size-hb-40); }
  .hb_article_body .hb_ttl_article_topic{ margin-top: var(--size-hb-40); }
  .hb_article_body .hb_ttl_article_item{  margin-top: var(--size-hb-30); }
  .hb_article_body .hb_ttl_article_minor{ margin-top: var(--size-hb-20); }
  .hb_article_box > .hb_article_img{
    margin-bottom: var(--size-hb-40);
  }
  .hb_article_body{
    max-width: 100%;
  }
}
/* 目次から飛んだときに、固定ヘッダーに隠れないようにする */
.hb_article_body [id]{
  scroll-margin-top: calc(50px + var(--size-hb-30));
}

/* .hb_article_map */
.hb_article_map{
  aspect-ratio: 16 / 10;
}
.hb_article_map iframe{
  border: 0;
  display: block;
  height: 100%;
  width: 100%;
}

/* .hb_event_iframe（イベント詳細：外部のページの埋め込み）
   ・幅いっぱい・高さ 745px。中身が長いときは iframe の中でスクロールする
   ・スマホは画面の高さの 75% まで（iframe が画面より高いと、ページを下へスクロールできなくなるため） */
.hb_event_iframe{
  margin: var(--size-hb-60) 0 0;
}
.hb_event_iframe iframe{
  background: #fff;
  border: 1px solid #ccc;
  display: block;
  height: 745px;
  width: 100%;
}
@media screen and (max-width: 767px){
  .hb_event_iframe{
    margin-top: var(--size-hb-40);
  }
  .hb_event_iframe iframe{
    height: min(745px, 75vh);
    height: min(745px, 75svh); /* アドレスバーの分を除いた高さ（使えないブラウザは上の 75vh） */
  }
}

/* .hb_event_shop_sec（イベント詳細：開催店舗一覧の見出し → 注意 の間隔）
   10/30 event_shop.css（イベント検索の CSS。今は読み込まない）から同じ指定をここに足した */
.hb_event_shop_ttl{
  margin-bottom: var(--size-hb-40);
}
.hb_event_shop_sec .hb_event_search_note{
  margin-bottom: var(--size-hb-40);
}

/* .hb_news_prize_box（記事：景品画像の拡大ボタン） */
/* メインの画像と、その上に重ねるボタン（位置は画像の幅・高さに対する %。旧サイトの 1260px の画面での位置から計算） */
.hb_news_prize_box {
  position: relative;
  max-width: min(90.566vw, 960px);
  margin: 0 auto var(--size-hb-60);
}
.hb_news_prize_box .hb_article_img {
  margin: 0;
}

.hb_news_prize_btn {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.hb_news_prize_btn img {
  display: block;
  width: 100%;
  height: auto;
}
@media (hover: hover) {
  .hb_news_prize_btn:hover {
    opacity: 0.7;
  }
}

/* 画像 980×1307（TSUTAYA 他）: 下 75px・右 65px・幅 268px */
.hb_news_prize_btn_01 {
  bottom: 5.738%;
  right: 6.633%;
  width: 27.347%;
}
/* 画像 980×1307（コロコロBASE）: 下 75px・右 326px・幅 227px */
.hb_news_prize_btn_02 {
  bottom: 5.738%;
  right: 33.265%;
  width: 23.163%;
}
/* 画像 980×1307（コロコロBASE）: 下 70px・右 42px・幅 250px */
.hb_news_prize_btn_03 {
  bottom: 5.356%;
  right: 4.286%;
  width: 25.510%;
}
/* 画像 980×1111（一部カード取り扱い店舗）: 下 120px・右 70px・幅 268px */
.hb_news_prize_btn_04 {
  bottom: 10.801%;
  right: 7.143%;
  width: 27.347%;
}

/* 画像 2000×2000（ホロビート名人戦）: カード全体に重ねるボタン（虫眼鏡はボタン画像の左下）。カードの中心に合わせて配置 */
/* 優勝賞：hb_icon_modal_l_w.webp（表示 400px） */
.hb_news_prize_btn_meijinsen_win { top: 44.45%; left: 5.05%; width: 20%; }
/* 参加賞：hb_icon_modal_s_w.webp（表示 160px）。上の段 01〜03、下の段 04〜06 */
.hb_news_prize_btn_meijinsen_01,
.hb_news_prize_btn_meijinsen_02,
.hb_news_prize_btn_meijinsen_03,
.hb_news_prize_btn_meijinsen_04,
.hb_news_prize_btn_meijinsen_05,
.hb_news_prize_btn_meijinsen_06 { width: 8%; }
.hb_news_prize_btn_meijinsen_01 { top: 69.875%; left: 34.8%; }
.hb_news_prize_btn_meijinsen_02 { top: 68.925%; left: 42.8%; }
.hb_news_prize_btn_meijinsen_03 { top: 69.625%; left: 50.55%; }
.hb_news_prize_btn_meijinsen_04 { top: 79.575%; left: 35.5%; }
.hb_news_prize_btn_meijinsen_05 { top: 79.175%; left: 43.05%; }
.hb_news_prize_btn_meijinsen_06 { top: 79.425%; left: 50.8%; }

@media screen and (max-width: 767px) {
  .hb_news_prize_box {
    max-width: 100%;
    margin-bottom: var(--size-hb-40);
  }
}

/* .hb_table_store（記事：店舗一覧の表） */
/* 旧サイトの表の見た目（見出しの行が黒）。ほかの表（.hb_table だけのもの）は新しいサイトの見た目のまま */
.hb_table_scroll {
  width: 100%;
}
.hb_table.hb_table_store {
  border-collapse: collapse;
  margin: 2em auto;
  table-layout: auto;
  width: 100%;
}
.hb_table_store th,
.hb_table_store td {
  border: 1.5px solid #000;
  box-sizing: border-box;
  line-height: 1.7;
  text-align: left;
}
.hb_table_store th {
  background: #000;
  border-bottom-color: #f3e6d6;
  border-right-color: #f3e6d6;
  color: #fff;
  font-size: min(1.429vw, 18px);
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: min(1.190vw, 15px) min(1.190vw, 15px) min(0.794vw, 10px);
  text-align: center;
  width: auto;
}
.hb_table_store th:last-child {
  border-right-color: #000;
}
.hb_table_store td {
  background: none;
  color: #000;
  font-size: min(1.429vw, 18px);
  font-weight: 500;
  letter-spacing: 0.02em; /* 旧サイトの本文と同じ（新しいサイトは 0.1em で、店舗名の全角英字が広がる） */
  padding: min(0.794vw, 10px) min(1.190vw, 15px);
}
.hb_table_store .th_date {
  width: 10%;
}
.hb_table_store .th_time,
.hb_table_store .th_capacity,
.hb_table_store .th_prefecture {
  width: 8%;
}
.hb_table_store .th_store {
  width: 25%;
}
.hb_table_store .th_address {
  width: auto;
}

@media screen and (max-width: 767px) {
  /* スマホは表を横にスクロール */
  .hb_table_scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hb_table.hb_table_store {
    margin: 1em auto 2em;
    width: 800px;
    max-width: none;
  }
  .hb_table_store th {
    font-size: min(3.846vw, 18px);
    padding: min(2.564vw, 10px) min(2.051vw, 8px) min(2.051vw, 8px);
  }
  .hb_table_store td {
    font-size: min(3.846vw, 18px);
    padding: min(2.051vw, 8px);
  }
}

/* ------ toc ------- */
/* .hb_toc_box */
.hb_toc_box{
  margin-bottom: var(--size-hb-60);
}
.hb_toc_box .hb_bg_primary_inner{
  padding: var(--size-hb-40);
}
.hb_toc_box .hb_ttl_sub{
  margin-bottom: 1em;
}
@media screen and (max-width: 767px){
  .hb_toc_box{
    margin-bottom: var(--size-hb-40);
  }
  .hb_toc_box .hb_bg_primary_inner{
    padding: var(--size-hb-20);
  }
}

/* ------ card -------*/
/* .hb_card_list_box（カード一覧：PC 5列 / SP 3列） */
.hb_card_list_box{
  display: grid;
  gap: var(--size-hb-30);
  grid-template-columns: repeat(5, 1fr);
}
/* 3列（商品詳細のシークレットカードなど） */
.hb_card_list_box.col3{
  gap: var(--size-hb-15);
  grid-template-columns: repeat(3, 1fr);
}
.hb_card_item img{
  aspect-ratio: 2232 / 3118;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}
/* モーダルあり（<button> で <img> を包む） */
.hb_card_item button{
  -webkit-appearance: none;
  appearance: none;
  aspect-ratio: 2232 / 3118;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  display: block;
  overflow: hidden;
  padding: 0;
  transition: opacity 0.3s ease;
  width: 100%;
}
.hb_card_item button:focus-visible{
  outline: none;
  opacity: 0.7;
}
@media (hover: hover){
  .hb_card_item button:hover{
    opacity: 0.7;
  }
}
@media screen and (max-width: 767px){
  .hb_card_list_box{
    gap: var(--size-hb-10);
    grid-template-columns: repeat(3, 1fr);
  }
  .hb_card_list_box.col3{
    gap: var(--size-hb-10);
  }
}

/* ------ search ------- */
/* .hb_search_box（検索ボックス全体） */
.hb_search_box{
  --hb-search-gold: #9b7a2e;
  --hb-search-h: min(3.585vw, 38px);
  --hb-search-bg: rgba(255, 255, 255, 0.6); /* 背景色（夜は night.css で指定） */

  background-color: var(--hb-search-bg);
  margin: 0 auto;
  padding: var(--size-hb-60) var(--size-hb-80);
}
.hb_search_inner{
  display: grid;
  gap: var(--size-hb-40) var(--size-hb-60);
  grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 767px){
  .hb_search_box{
    --hb-search-h: min(9.744vw, 38px);
    padding: var(--size-hb-30) var(--size-hb-20);
  }
  .hb_search_inner{
    gap: var(--size-hb-30);
    grid-template-columns: 1fr;
  }
}

/* .hb_search_more（検索条件の開閉：フリーワード以外の条件） */
.hb_search_more{
  display: flex;
  grid-column: 1 / -1;
  justify-content: center;
}
.hb_search_more_btn{
  -webkit-appearance: none;
  appearance: none;
  align-items: center;
  background-color: #fff;
  border: 1px solid var(--hb-search-gold);
  border-radius: 0;
  color: var(--hb-search-gold);
  cursor: pointer;
  display: flex;
  font-family: var(--font-hb-mincho);
  font-size: var(--font-size-hb-lg);
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.15em;
  line-height: 1.4;
  min-height: calc(var(--hb-search-h) * 1.2);
  padding: 0.5em 2.8em 0.3em; /* 左右は右端のアイコンの分を空ける */
  position: relative;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  width: min(35.566vw, 377px);
}
@media (hover: hover){
  .hb_search_more_btn:hover{
    opacity: 0.7;
  }
}
.hb_search_more_btn:focus:not(:focus-visible){
  outline: none;
}
.hb_search_more_btn:focus-visible{
  outline: 2px solid var(--hb-search-gold);
  outline-offset: 2px;
}
/* ＋／－のアイコン（ボタンの右端に固定。開いているときは縦線を消して「－」に） */
.hb_search_more_icon{
  background-color: var(--hb-search-gold);
  border-radius: 50%;
  height: 1.2em;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2em;
}
.hb_search_more_icon::before,
.hb_search_more_icon::after{
  background-color: #fff;
  content: '';
  height: 2px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.6em;
}
.hb_search_more_icon::after{
  transform: translate(-50%, -50%) rotate(90deg);
}
.hb_search_more_btn[aria-expanded="true"] .hb_search_more_icon::after{
  display: none;
}
/* 文言の切り替え（閉じているとき：追加する／開いているとき：閉じる） */
.hb_search_more_btn[aria-expanded="true"] .hb_search_more_txt_add,
.hb_search_more_btn[aria-expanded="false"] .hb_search_more_txt_close{
  display: none;
}
/* 開閉する中身（.hb_search_inner と同じ2列） */
.hb_search_more_content{
  display: grid;
  gap: var(--size-hb-40) var(--size-hb-60);
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
}
.hb_search_more_content[hidden]{
  display: none;
}
@media screen and (max-width: 767px){
  .hb_search_more_btn{
    width: 76.923vw; /* 390px時 300px（検索ボタンと同じ幅） */
  }
  .hb_search_more_content{
    gap: var(--size-hb-30);
    grid-template-columns: 1fr;
  }
}

/* .hb_search_item（項目ごとのまとまり） */
.hb_search_item{
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}
.hb_search_item_full{
  grid-column: 1 / -1;
}

/* .hb_search_ttl（項目の見出し） */
.hb_search_ttl{
  background: linear-gradient(to right, transparent, var(--hb-search-gold) 5%, var(--hb-search-gold) 95%, transparent) left bottom / 100% 1px no-repeat;
  color: var(--hb-search-gold);
  float: left; /* legend をふつうのブロックとして扱うため */
  font-size: var(--font-size-hb-lg);
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.4;
  margin-bottom: min(1.415vw, 15px);
  padding: 0 0 0.35em 0.75em;
  width: 100%;
}
.hb_search_ttl + *{
  clear: both;
}
.hb_search_ttl ruby[data-ruby]::before{
  font-size: var(--font-size-hb-ruby-ttl);
  top: -1em;
}
@media screen and (max-width: 767px){
  .hb_search_ttl{
    font-size: calc(var(--font-size-hb-lg) * 1.1);
    margin-bottom: var(--size-hb-10);
  }
}

/* .hb_search_input（テキスト入力） */
.hb_search_input{
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #999;
  border-radius: 0;
  color: #000;
  display: block;
  font-family: var(--font-hb-gothic);
  font-size: var(--font-size-hb-xs);
  height: var(--hb-search-h);
  letter-spacing: 0.1em;
  padding: 0 0.8em;
  width: 100%;
}
.hb_search_input::placeholder{
  color: #999;
}
.hb_search_input:focus,
.hb_search_select select:focus,
.hb_search_num input:focus{
  outline: none;
}
.hb_search_input_search{
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat 0.7em center / 1.1em;
  padding-left: 2.2em;
}
@media screen and (max-width: 767px){
  .hb_search_input{
    font-size: var(--font-size-hb-md);
  }
}

/* .hb_search_suggest（カード名の候補：オートコンプリート）
   ・夜も白い背景のまま（検索ボックスと同じ） */
.hb_search_suggest_wrap{
  position: relative;
}
.hb_search_suggest{
  background: #fff;
  border: 1px solid #999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  left: 0;
  list-style: none;
  margin: 4px 0 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 0;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 10;
}
.hb_search_suggest li{
  color: #231815;
  cursor: pointer;
  padding: 8px 12px;
}
.hb_search_suggest li[aria-selected="true"],
.hb_search_suggest li:hover{
  background: #f1e7d0;
}

/* .hb_search_check（チェックボックス：四角＋チェック） */
.hb_search_check{
  align-items: center;
  cursor: pointer;
  display: flex;
  font-family: var(--font-hb-gothic);
  font-size: var(--font-size-hb-xs);
  font-weight: 400;
  gap: 0.4em;
  line-height: 1.4;
  width: fit-content;
}
.hb_search_check input{
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #333;
  border-radius: 0;
  cursor: pointer;
  flex: none;
  height: 1.1em;
  margin: 0;
  width: 1.1em;
}
.hb_search_check input:checked{
  background: #000 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b7a2e' stroke-width='4'%3E%3Cpath d='M3 12l6 6L21 5'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.hb_search_check input:focus-visible{
  outline: 2px solid var(--hb-search-gold);
  outline-offset: 2px;
}
.hb_search_box .hb_search_item > .hb_search_check{
  margin-bottom: 1em;
}
.hb_search_ttl + .hb_search_check{
  padding-top: 0.9em;
}
@media screen and (max-width: 767px){
  .hb_search_check{
    font-size: var(--font-size-hb-md);
  }
}

/* .hb_search_target_box（検索対象） */
.hb_search_target_box{
  align-items: center;
  background-color: rgba(222, 208, 176, 0.35);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1.4em;
  margin-top: min(1.415vw, 15px);
  padding: 1em 1em 0.7em;
}
.hb_search_target_label{
  color: var(--hb-search-gold);
  font-size: var(--font-size-hb-base);
  letter-spacing: 0.1em;
}
@media screen and (max-width: 767px){
  .hb_search_target_box{
    gap: 0.8em 1.2em;
    margin-top: var(--size-hb-10);
  }
  .hb_search_target_label{
    font-size: var(--font-size-hb-lg);
    text-align: center;
    width: 100%;
  }
}

/* .hb_search_toggle_box（チェックボックス：ボタン表示） */
.hb_search_toggle_box{
  display: flex;
  gap: 2px;
}
.hb_search_toggle_box_grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.hb_search_toggle_item{
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}
.hb_search_toggle_item input{
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}
.hb_search_toggle_item span{
  background-color: #b3b3b3;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: var(--font-size-hb-xs);
  font-family: var(--font-hb-gothic);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.3;
  padding: 0.6em 0.2em 0.5em;
  text-align: center;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}
.hb_search_toggle_item input:checked + span{
  background-color: #000;
}
.hb_search_toggle_item input:disabled + span{
  cursor: not-allowed;
}
.hb_search_toggle_item input:focus-visible + span{
  outline: 2px solid var(--hb-search-gold);
  outline-offset: 2px;
}
@media (hover: hover){
  .hb_search_toggle_item input:not(:checked):not(:disabled) + span:hover{
    opacity: 0.7;
  }
}
@media screen and (max-width: 767px){
  .hb_search_toggle_box_grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .hb_search_toggle_item span{
    font-size: var(--font-size-hb-md);
  }
  /* レアリティの「すべて」のみ */
  .hb_search_toggle_item input[name="rarity[]"][value="all"] + span{
    align-items: center;
    display: flex;
    font-size: var(--font-size-hb-base);
    height: calc(var(--font-size-hb-md) * 2.4);
    justify-content: center;
    letter-spacing: 0;
    padding: 0.1em 0.2em 0;
  }
}

/* .hb_search_select（プルダウン） */
.hb_search_select{
  position: relative;
}
.hb_search_select select{
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #999;
  border-radius: 0;
  color: #000;
  cursor: pointer;
  display: block;
  font-family: var(--font-hb-gothic);
  font-size: var(--font-size-hb-xs);
  height: var(--hb-search-h);
  letter-spacing: 0;
  padding: 0 2.5em 0 0.8em; 
  text-align: left;
  text-align-last: left;
  width: 100%;
}
.hb_search_select select:has(option:first-child:checked){
  letter-spacing: 0.25em;
  text-align: center;
  text-align-last: center;
}
.hb_search_select::after{
  border-left: 0.45em solid transparent;
  border-right: 0.45em solid transparent;
  border-top: 0.75em solid var(--hb-search-gold);
  content: '';
  font-size: var(--font-size-hb-xs);
  pointer-events: none;
  position: absolute;
  right: 0.9em;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px){
  .hb_search_select select{
    font-size: var(--font-size-hb-md);
  }
}

/* .hb_search_range_box（下限〜上限） */
.hb_search_range_box{
  align-items: center;
  display: flex;
  gap: 0.8em;
}
.hb_search_range_txt{
  flex: none;
}
.hb_search_num{
  background-color: #fff;
  border: 1px solid #999;
  display: flex;
  flex: 1 1 0;
  height: var(--hb-search-h);
  min-width: 0;
}
.hb_search_num input{
  -moz-appearance: textfield;
  appearance: textfield;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #000;
  flex: 1;
  font-family: var(--font-hb-gothic);
  font-size: var(--font-size-hb-xs);
  min-width: 0;
  padding: 0 0.5em;
  text-align: center;
}
.hb_search_num input::-webkit-inner-spin-button,
.hb_search_num input::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.hb_search_num input::placeholder{
  color: #999;
}
.hb_search_num_btn{
  border-left: 1px solid #ccc;
  display: flex;
  flex: none;
  flex-direction: column;
  width: min(1.792vw, 19px);
}
.hb_search_num_btn button{
  -webkit-appearance: none;
  appearance: none;
  background-color: #f5f5f5;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  flex: 1;
  padding: 0;
  position: relative;
}
.hb_search_num_btn button + button{
  border-top: 1px solid #ccc;
}
.hb_search_num_btn button::before{
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  content: '';
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.hb_search_num_btn [data-step="up"]::before{
  border-bottom: 5px solid var(--hb-search-gold);
}
.hb_search_num_btn [data-step="down"]::before{
  border-top: 5px solid var(--hb-search-gold);
}
@media screen and (max-width: 767px){
  .hb_search_num input{
    font-size: var(--font-size-hb-md);
  }
  .hb_search_num_btn{
    width: 6.41vw; /* 390px時 25px */
  }
}

/* .hb_search_btn（この条件で検索） */
.hb_search_btn{
  -webkit-appearance: none;
  appearance: none;
  align-items: center;
  aspect-ratio: 377 / 45;
  background: url(../../img/common/bg_hb_btn_form.webp) center / 100% 100% no-repeat;
  border: 0;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-family: var(--font-hb-mincho);
  font-size: calc(var(--font-size-hb-xl) * 0.96);
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.2em;
  margin: var(--size-hb-60) auto 0;
  transition: transform 0.3s ease;
  width: min(35.566vw, 377px);
}
.hb_search_btn span{
  padding: 0.1em 0 0;
}
@media screen and (min-width: 768px){
  .hb_search_btn ruby[data-ruby]::before{
    top: -0.5em;
  }
}
@media screen and (max-width: 767px){
  .hb_search_btn{
    margin-top: var(--size-hb-40);
    width: 76.923vw; /* 390px時 300px */
  }
  .hb_search_btn span{
    padding: 1em 0 0.5em;
  }
}

/* .hb_search_col3_box（3列で並べる：参加制限・分類・フォーマット） */
.hb_search_col3_box{
  display: grid;
  gap: var(--size-hb-40) var(--size-hb-30);
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 767px){
  .hb_search_col3_box{
    gap: var(--size-hb-30);
    grid-template-columns: 1fr;
  }
}

/* .hb_search_ttl_note（見出しの補足：※複数選択可 など） */
.hb_search_ttl_note{
  color: #666;
  font-size: 0.6em;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-left: 1em;
}

/* 〜でつなぐ中のプルダウン・日付は、同じ幅にする */
.hb_search_range_box > .hb_search_select,
.hb_search_range_box > .hb_search_date{
  flex: 1 1 0;
  min-width: 0;
}

/* .hb_search_date（日付：カレンダーで選ぶ） */
.hb_search_date{
  position: relative;
}
.hb_search_date .hb_search_input{
  cursor: pointer;
  padding-right: 2.6em;
}
.hb_search_date_btn{
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--hb-search-gold);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font-size: var(--font-size-hb-xs);
  height: 1.4em;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16'/%3E%3Cpath d='M3 10h18M8 2v5M16 2v5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16'/%3E%3Cpath d='M3 10h18M8 2v5M16 2v5'/%3E%3C/svg%3E") center / contain no-repeat;
  padding: 0;
  position: absolute;
  right: 0.8em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.4em;
}

/* .hb_search_calendar（カレンダー：JSで作る） */
.hb_search_calendar{
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  color: #000;
  font-family: var(--font-hb-gothic);
  left: 0;
  position: absolute;
  top: calc(100% + 8px);
  width: min(27.358vw, 290px);
  z-index: 20;
}
.hb_search_calendar[hidden]{
  display: none;
}
.hb_search_calendar_head{
  align-items: center;
  background-color: #000;
  color: #fff;
  display: flex;
  font-size: var(--font-size-hb-base);
  justify-content: space-between;
  letter-spacing: 0.1em;
  padding: 0.6em;
}
.hb_search_calendar_nav{
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  height: 1.6em;
  padding: 0;
  position: relative;
  width: 1.6em;
}
.hb_search_calendar_nav::before{
  border-bottom: 0.45em solid transparent;
  border-top: 0.45em solid transparent;
  content: '';
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.hb_search_calendar_nav[data-move="-1"]::before{
  border-right: 0.7em solid #fff;
}
.hb_search_calendar_nav[data-move="1"]::before{
  border-left: 0.7em solid #fff;
}
.hb_search_calendar_table{
  border-collapse: collapse;
  font-size: var(--font-size-hb-xs);
  margin: 0.4em 0;
  table-layout: fixed;
  text-align: center;
  width: 100%;
}
.hb_search_calendar_table th{
  font-weight: 500;
  padding: 0.6em 0 0.3em;
}
.hb_search_calendar_table td{
  padding: 0;
}
.hb_search_calendar_table button{
  -webkit-appearance: none;
  appearance: none;
  aspect-ratio: 5 / 4;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font: inherit;
  padding: 0;
  width: 100%;
}
.hb_search_calendar_table .is-sun{
  color: var(--color-hb-red);
}
.hb_search_calendar_table .is-sat{
  color: var(--color-hb-blue);
}
.hb_search_calendar_table button.is-selected{
  background-color: #000;
  color: #fff;
  font-weight: 700;
}
@media (hover: hover){
  .hb_search_calendar_table button:not(.is-selected):hover{
    background-color: #f3efe8;
  }
}
.hb_search_calendar_foot{
  display: flex;
  justify-content: space-between;
  padding: 0.3em 0.8em 0.9em;
}
.hb_search_calendar_foot button{
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #999;
  border-radius: 0;
  color: #000;
  cursor: pointer;
  font-family: var(--font-hb-gothic);
  font-size: var(--font-size-hb-xs);
  letter-spacing: 0.1em;
  padding: 0.45em 1em;
}
@media screen and (max-width: 767px){
  .hb_search_calendar{
    width: 76.923vw; /* 390px時 300px */
  }
  /* 右側（終了日）のカレンダーは、入力欄の右の端にそろえて開く */
  .hb_search_range_box > .hb_search_date:last-child .hb_search_calendar{
    left: auto;
    right: 0;
  }
}

/* .hb_search_area（エリア・都道府県：2段階・複数選択） */
.hb_search_area{
  position: relative;
}
.hb_search_area_btn{
  -webkit-appearance: none;
  appearance: none;
  align-items: center;
  background-color: #fff;
  border: 1px solid #999;
  border-radius: 0;
  color: #000;
  cursor: pointer;
  display: flex;
  font-family: var(--font-hb-gothic);
  font-size: var(--font-size-hb-xs);
  gap: 0.5em;
  height: var(--hb-search-h);
  letter-spacing: 0.05em;
  padding: 0 2.5em 0 0.8em;
  position: relative;
  text-align: left;
  width: 100%;
}
/* ピンのアイコン */
.hb_search_area_btn::before,
.hb_search_area_head::before{
  background-color: var(--hb-search-gold);
  content: '';
  flex: none;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
  height: 1.7em;
  width: 1.45em;
}
/* 右の▼ */
.hb_search_area_btn::after{
  border-left: 0.45em solid transparent;
  border-right: 0.45em solid transparent;
  border-top: 0.75em solid var(--hb-search-gold);
  content: '';
  pointer-events: none;
  position: absolute;
  right: 0.9em;
  top: 50%;
  transform: translateY(-50%);
}
.hb_search_area_txt{
  display: block;
  flex: 1;
  line-height: 1.4;
  min-width: 0;
  overflow: hidden;
  padding-top: 0.15em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hb_search_area_txt.is-empty{
  letter-spacing: 0.25em;
  text-align: center;
}

/* 開いたときのパネル（.is-open が付くと、ふわっと下に開く） */
.hb_search_area_panel{
  --hb-search-area-speed: 0.35s; /* 開く速さ */

  background-color: #fff;
  border-top: 3px solid var(--hb-search-gold);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  color: #000;
  font-family: var(--font-hb-gothic);
  left: 0;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  top: calc(100% + 8px);
  transform: translateY(-10px);
  transition:
    opacity var(--hb-search-area-speed) ease,
    transform var(--hb-search-area-speed) ease,
    visibility 0s linear var(--hb-search-area-speed);
  visibility: hidden;
  width: 100%;
  z-index: 20;
}
.hb_search_area_panel.is-open{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity var(--hb-search-area-speed) ease,
    transform var(--hb-search-area-speed) ease,
    visibility 0s;
  visibility: visible;
}
.horobeat_wrapper .hb_search_area_head{
  align-items: center;
  background-color: #000;
  color: #fff;
  display: flex;
  font-size: var(--font-size-hb-xs);
  gap: 0.6em;
  letter-spacing: 0.15em;
  margin: 0;
  padding: 0.9em 1.2em 0.6em;
}
.hb_search_area_list{
  max-height: min(31.132vw, 330px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.horobeat_wrapper .hb_search_area_item{
  border-bottom: 1px solid #e5e5e5;
}
/* エリアの行（チェック以外の場所を押すと、都道府県が開く） */
.hb_search_area_row{
  align-items: center;
  cursor: pointer;
  display: flex;
  padding: 0.5em 0.8em 0.5em 1.2em;
  transition: background-color 0.3s ease;
}
.hb_search_area_item.is-open .hb_search_area_row{
  background-color: #f3efe8;
}
.hb_search_area_row .hb_search_check{
  flex: none;
  font-size: var(--font-size-hb-base);
  font-weight: 600;
}
/* 開閉ボタン（∨） */
.hb_search_area_toggle{
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  flex: none;
  height: 2.2em;
  margin-left: auto;
  padding: 0;
  position: relative;
  width: 2.2em;
}
.hb_search_area_toggle::before{
  border-bottom: 1.5px solid #888;
  border-right: 1.5px solid #888;
  content: '';
  height: 0.55em;
  left: 50%;
  position: absolute;
  top: 45%;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform var(--hb-search-area-speed) ease, top var(--hb-search-area-speed) ease;
  width: 0.55em;
}
.hb_search_area_toggle[aria-expanded="true"]::before{
  border-color: var(--hb-search-gold);
  top: 60%;
  transform: translate(-50%, -50%) rotate(-135deg);
}
/* 都道府県（.is-open が付くと、高さがゆっくり広がる） */
.hb_search_pref_wrap{
  display: grid;
  grid-template-rows: 0fr;
  transition:
    grid-template-rows var(--hb-search-area-speed) ease,
    visibility 0s linear var(--hb-search-area-speed);
  visibility: hidden;
}
.hb_search_area_item.is-open .hb_search_pref_wrap{
  grid-template-rows: 1fr;
  transition:
    grid-template-rows var(--hb-search-area-speed) ease,
    visibility 0s;
  visibility: visible;
}
.hb_search_pref_list{
  background-color: #faf8f4;
  min-height: 0;
  overflow: hidden;
}
.horobeat_wrapper .hb_search_pref_list li{
  border-top: 1px solid #ece8e1;
}
/* 都道府県は、行全体を押してチェックできるようにする */
.hb_search_pref_list .hb_search_check{
  padding: 0.7em 1.2em 0.6em 2.6em;
  transition: background-color 0.3s ease;
  width: 100%;
}
@media (hover: hover){
  .hb_search_pref_list .hb_search_check:hover{
    background-color: #f3efe8;
  }
}
/* 一部だけ選ばれているエリア（−） */
.hb_search_check input:indeterminate{
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.5'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center / 100% no-repeat;
}
/* 決定ボタン */
.hb_search_area_foot{
  border-top: 1px solid #e5e5e5;
  padding: 1em;
  text-align: center;
}
.hb_search_area_ok{
  -webkit-appearance: none;
  appearance: none;
  background-color: #000;
  border: 2px solid var(--hb-search-gold);
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-hb-gothic);
  font-size: var(--font-size-hb-base);
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 0.8em 0;
  width: min(25vw, 265px);
}
@media screen and (max-width: 767px){
  .hb_search_area_btn{
    font-size: var(--font-size-hb-md);
  }
  .hb_search_area_list{
    max-height: 70vw;
  }
  .hb_search_area_ok{
    width: 61.538vw; /* 390px時 240px */
  }
}

/* .hb_search_result_box（検索結果） */
.hb_search_result_info{
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-hb-10) var(--size-hb-20);
  justify-content: space-between;
  margin-bottom: var(--size-hb-20);
}
.hb_search_result_num{
  align-items: baseline;
  background-color: #000;
  color: #fff;
  display: flex;
  font-family: var(--font-hb-gothic);
  font-size: var(--font-size-hb-xl);
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.05em;
  line-height: 1;
  min-width: min(18.868vw, 200px);
  padding: 0.4em 1em 0.4em;
}
.hb_search_result_num ruby{
  font-size: 0.7em;
}
.hb_search_result_info .hb_search_check{
  font-size: var(--font-size-hb-base);
}
@media screen and (max-width: 767px){
  .hb_search_result_num{
    min-width: 33.333vw; /* 390px時 130px */
  }
  .hb_search_result_info .hb_search_check{
    font-size: var(--font-size-hb-md);
  }
}

/* .hb_search_none（検索結果が0件のとき）
  色は daytime.css / night.css で指定 */
  .horobeat_wrapper .hb_search_none{
  background-color: var(--hb-search-none-bg);
  border: 2.5px solid var(--color-hb-yellow);
  color: var(--hb-search-none-color);
  font-family: var(--font-hb-mincho);
  font-size: var(--font-size-hb-lg);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.8;
  margin: var(--size-hb-50) auto;
  max-width: min(71.698vw, 760px);
  padding: var(--size-hb-30);
  text-align: center;
}
.hb_search_none::before{
  background-color: var(--color-hb-yellow);
  content: '';
  display: block;
  margin: 0 auto 0.6em;
  height: 2.2em;
  width: 2.2em;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M8 8l5 5M13 8l-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M8 8l5 5M13 8l-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media screen and (max-width: 767px){
  .horobeat_wrapper .hb_search_none{
    border-width: 0.385vw;
    max-width: 90%;
    margin-top: var(--size-hb-30);
    padding: var(--size-hb-20) var(--size-hb-10);
  }
}

/* ------ cardlist（カード詳細：モーダルの中身） ------- */
/* .hb_cardlist_detail_box（カード詳細：画像＋項目） */
.hb_cardlist_detail_box{
  align-items: start;
  display: grid;
  gap: var(--size-hb-40);
  grid-template-columns: min(27.075vw, 287px) 1fr;
}
.hb_cardlist_detail_img{
  aspect-ratio: 2232 / 3118;
  overflow: hidden;
}
.hb_cardlist_detail_img img{
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* 項目の一覧 */
.hb_cardlist_detail_list{
  font-family: var(--font-hb-gothic);
  font-size: var(--font-size-hb-base);
  margin: 0;
}
.hb_cardlist_detail_item{
  align-items: center;
  border-bottom: 1px solid #999;
  display: grid;
  grid-template-columns: min(16.038vw, 170px) 1fr;
  line-height: 1.9;
  padding: 0.5em 0 0.2em;
}
.hb_cardlist_detail_item dd{
  font-weight: 400;
  letter-spacing: 0.05em;
  margin: 0;
}

/* 項目名・見出し（人魂アイコン付き） */
.hb_cardlist_detail_item dt,
.hb_cardlist_detail_ttl{
  align-items: center;
  display: flex;
  font-family: var(--font-hb-gothic);
  font-weight: 700;
  gap: 0.35em;
}
.hb_cardlist_detail_item dt::before,
.hb_cardlist_detail_ttl::before{
  aspect-ratio: 14 / 21;
  background-color: currentColor;
  content: '';
  flex: none;
  -webkit-mask: url("../../img/common/icon_hitodama.svg") center / contain no-repeat;
  mask: url("../../img/common/icon_hitodama.svg") center / contain no-repeat;
  width: 12px;
}
@media screen and (max-width: 767px){
  .hb_cardlist_detail_item dt::before,
  .hb_cardlist_detail_ttl::before{
    width: 10px;
  }
}

/* カードの能力・フレーバーテキスト */
.hb_cardlist_detail_txt_box{
  display: grid;
  gap: var(--size-hb-30);
  grid-template-columns: 1fr 1fr;
  margin-top: var(--size-hb-25);
}
.hb_cardlist_detail_ttl{
  font-size: var(--font-size-hb-base);
  margin-bottom: 0.6em;
}
.hb_cardlist_detail_txt_item p{
  color: #333;
  font-size: calc(var(--font-size-hb-base) * 0.95);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.9;
}
.hb_cardlist_detail_txt_item p ruby[data-ruby]::before{
  top: -1.1em;
}
@media screen and (max-width: 767px){
  .hb_cardlist_detail_box{
    gap: var(--size-hb-20);
    grid-template-columns: 1fr;
  }
  .hb_cardlist_detail_img{
    margin: 0 auto;
    width: 60%;
  }
  .hb_cardlist_detail_list,
  .hb_cardlist_detail_ttl,
  .hb_cardlist_detail_txt_item p{
    font-size: var(--font-size-hb-md);
  }
  .hb_cardlist_detail_item{
    grid-template-columns: 34vw 1fr;
  }
  .hb_cardlist_detail_txt_box{
    gap: 0;
    grid-template-columns: 1fr;
    margin-top: 0;
  }
  .hb_cardlist_detail_txt_item{
    border-bottom: 1px solid #999;
    line-height: 1.9;
    padding: 0.5em 0 0.2em;
  }
}

/* ------ modal ------- */
/* .hb_modal_box（<dialog>） */
.hb_modal_box{
  background-color: #222;
  border: 0;
  color: var(--color-hb-font-base);
  font-family: var(--font-hb-mincho);
  margin: auto;
  max-height: 90vh;
  max-width: min(77.358vw, 820px);
  overflow-y: auto;
  overscroll-behavior: none;
  padding: 0;
  width: calc(100% - var(--size-hb-60));
}
.hb_modal_box[open],
.hb_modal_box[open]::backdrop{
  animation: hb-modal-fade 0.3s ease;
}
.hb_modal_box::backdrop{
  background-color: rgba(0, 0, 0, 0.35);
}
.hb_modal_box:focus,
.hb_modal_box:focus-visible{
  outline: none;
}
.hb_modal_box,
.hb_card_item button{
  -webkit-tap-highlight-color: transparent;
}

/* 上タイトルの帯 */
.hb_modal_head{
  /* 画像は daytime.css / night.css で指定 */
  background-color: #fff;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  padding: var(--size-hb-30) 4em var(--size-hb-70);
  position: relative;
}
.hb_modal_ttl{
  color: var(--hb-modal-head-color, #fff); /* 色は daytime.css / night.css で指定 */
  font-size: min(3.019vw, 32px);
  font-weight: 500;
  padding-left: 0.1em;
  text-align: center;
}
.hb_modal_ttl ruby[data-ruby]::before{
  font-size: var(--font-size-hb-ruby-ttl);
}

/* 閉じるボタン */
.hb_modal_btn{
  -webkit-appearance: none;
  appearance: none;
  align-items: center;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  padding: 0;
  position: absolute;
  right: var(--size-hb-25);
  top: var(--size-hb-20);
  transition: opacity 0.3s ease;
}
.hb_modal_btn:focus{
  outline: none;
}
/* 閉じるボタン */
.hb_modal_btn_icon{
  /* 色は daytime.css / night.css で指定 */
  aspect-ratio: 62 / 100;
  background-color: var(--hb-modal-head-color, #fff);
  display: block;
  -webkit-mask: url("../../img/common/cardlist/icon_hb_modal_close.webp") center / contain no-repeat;
  mask: url("../../img/common/cardlist/icon_hb_modal_close.webp") center / contain no-repeat;
  width: var(--size-hb-30);
}
@media (hover: hover){
  .hb_modal_btn:hover{
    opacity: 0.7;
  }
}

/* 中身 */
.hb_modal_content{
  background-color: #fff;
  padding: var(--size-hb-10) var(--size-hb-40);
}

/* 下の帯 */
.hb_modal_inner::after{
  /* 画像は daytime.css / night.css で指定 */
  background-color: #fff;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: '';
  display: block;
  height: min(6.981vw, 74px);
}

/* モーダルを開いている間は、後ろのページをスクロールさせない */
html.is-modal-open{
  overflow: hidden;
}

@keyframes hb-modal-fade{
  from{ opacity: 0; }
  to{   opacity: 1; }
}
@media screen and (max-width: 767px){
  .hb_modal_box{
    max-height: 85vh;
    max-width: none;
    width: 92%;
  }
  .hb_modal_head{
    background-size: 100% 100%;
    padding: var(--size-hb-20) 4em var(--size-hb-40);
  }
  .hb_modal_ttl{
    font-size: var(--font-size-hb-lg);
  }
  .hb_modal_btn{
    right: var(--size-hb-10);
    top: var(--size-hb-10);
  }
  .hb_modal_btn_icon{
    width: min(6.41vw, 25px);
  }
  .hb_modal_content{
    padding: var(--size-hb-10) var(--size-hb-20);
  }
  .hb_modal_inner::after{
    height: 12.821vw; /* 390px時 50px */
  }
}

/* .hb_news_modal（お知らせ記事：景品画像の拡大表示）
   ※カードのポップアップ（.hb_modal_box）とは別の部品。開閉は common.js の initNewsModal */
/* 開く・閉じるときにふわっと表示（.is-open は JS が付け外しする） */
.hb_news_modal {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.3s;
}
.hb_news_modal::backdrop {
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.3s;
}
.hb_news_modal.is-open,
.hb_news_modal.is-open::backdrop {
  opacity: 1;
}
.hb_news_modal:focus {
  outline: none;
}
.hb_news_modal_inner {
  position: relative;
}
.hb_news_modal_img {
  display: block;
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: calc(100vh - 120px);
}
/* 閉じるボタン：画像の右上の上に置く（旧サイトと同じ。10/26 修正: 横向きの値をいつもの値にしていたため、スマホで画面の右の外にはみ出していた） */
.hb_news_modal_close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}
/* スマホ横向き（画面の高さが低いとき）：画像を高さいっぱいにして、閉じるボタンは画像の右に置く（旧サイトと同じ） */
@media (orientation: landscape) and (max-height: 500px) {
  .hb_news_modal_img {
    max-width: calc(100vw - 120px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }
  .hb_news_modal_close {
    top: 0;
    right: -48px;
  }
}

/* ------ movie ------- */
.hb_movie_box{
  background-image: url(../../img/common/hb_bg_movie.webp);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: min(1.415vw, 15px) min(1.132vw, 12px);
}
.hb_movie_inner{
  aspect-ratio: 16 / 9;
}
.hb_movie_box iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ------ faq ------- */
/* .hb_faq_list_box（よくある質問の一覧） */
.hb_faq_list_box{
  /* 昼・夜で変える色（夜は night.css で指定） */
  --hb-faq-color: var(--color-hb-font-base);  /* 本文の文字色 */
  --hb-faq-line: var(--color-hb-yellow);      /* 区切りの点線 */
  --hb-faq-cat-bg: #000;                      /* カテゴリの背景 */
  --hb-faq-cat-color: #fff;                   /* カテゴリの文字 */
  --hb-faq-source-bg: #fff;                   /* カード名の背景（10/30 収録先から） */
  --hb-faq-source-border: #999;               /* カード名の枠線 */
  --hb-faq-source-color: #000;                /* カード名の文字 */

  --hb-faq-icon-size: var(--size-hb-80);     /* アイコンの大きさ */
  --hb-faq-icon-gap: min(1.887vw, 20px);      /* アイコンと文字の間 */

  color: var(--hb-faq-color);
}

/* .hb_faq_item（質問1件分） */
.horobeat_wrapper .hb_faq_item{
  border-bottom: 1px solid var(--hb-faq-line);
  padding: var(--size-hb-40) var(--size-hb-10);
}

.hb_faq_item.is-hidden{
  display: none;
}

/* .hb_faq_info（カテゴリ・カード名。10/30 収録先からカード名に） */
.hb_faq_info{
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-hb-10);
  margin-bottom: var(--size-hb-25);
}
.hb_faq_cat,
.hb_faq_source{
  display: inline-block;
  font-weight: 600;
  font-size: var(--font-size-hb-xs);
  font-family: var(--font-hb-gothic);
  letter-spacing: 0.1em;
  line-height: 1.9;
  padding: 0.15em 1.5em 0.05em;
  text-align: center;
}
.hb_faq_cat{
  background-color: var(--hb-faq-cat-bg);
  color: var(--hb-faq-cat-color);
  min-width: min(13.208vw, 140px);
}
.hb_faq_source{
  background-color: var(--hb-faq-source-bg);
  border: 1px solid var(--hb-faq-source-border);
  color: var(--hb-faq-source-color);
  font-weight: 500;
}
/* .hb_faq_card（カード名のラベル。10/30 追加）
   ・見た目は .hb_faq_source（収録先のラベルだったもの）と同じ。カードが見つからないときは .hb_faq_source の文字だけ
   ・押せるもの（.hb_faq_card_btn）は <button>。ボタンの標準の見た目を消して、マウスを乗せたとき・キーボードで選んだときだけ変える */
.hb_faq_card{
  display: inline-block;
}
.hb_faq_card_btn{
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  margin: 0;
  transition: opacity 0.3s ease;
}
@media (hover: hover){
  .hb_faq_card_btn:hover{
    opacity: 0.7;
  }
}
.hb_faq_card_btn:focus:not(:focus-visible){
  outline: none;
}
.hb_faq_card_btn:focus-visible{
  outline: 2px solid var(--hb-faq-source-color);
  outline-offset: 2px;
}

/* .hb_faq_content（Q.とA.） */
.hb_faq_question,
.hb_faq_answer{
  align-items: center; /* 1行のときはアイコンの中央、2行以上は上からそろう */
  display: flex;
  font-size: var(--font-size-hb-md);
  line-height: 1.9;
  margin: 0;
  min-height: var(--hb-faq-icon-size);
  padding-left: calc(var(--hb-faq-icon-size) + var(--hb-faq-icon-gap));
  position: relative;
}
.hb_faq_question{
  font-weight: 600;
}
.hb_faq_answer{
  font-weight: 400;
  margin-top: var(--size-hb-20);
}
.hb_faq_question::before,
.hb_faq_answer::before{
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: var(--hb-faq-icon-size);
  left: 0;
  position: absolute;
  top: 0;
  width: var(--hb-faq-icon-size);
}
/* アイコンの画像は daytime.css / night.css で指定 */
@media screen and (max-width: 767px){
  .hb_faq_list_box{
    --hb-faq-icon-size: 10.256vw; /* 390px時 40px */
    --hb-faq-icon-gap: 3.077vw;   /* 390px時 12px */
  }
  .horobeat_wrapper .hb_faq_item{
    padding: var(--size-hb-25) 0;
  }
  .hb_faq_info{
    margin-bottom: var(--size-hb-15);
  }
  .hb_faq_cat{
    min-width: 20.513vw; /* 390px時 80px */
  }
  .hb_faq_answer{
    margin-top: var(--size-hb-15);
  }
}

/* ------ link ------- */
/* .hb_link_box */
.hb_link_box{
  display: flex;
  gap: var(--size-hb-15);
  justify-content: center;
}
@media screen and (max-width: 767px){
  .hb_link_box{
    gap: var(--size-hb-10);
  }
}

/* .hb_link_top_box */
.hb_link_top_box{
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: min(91.509vw, 970px);
}
.hb_link_top_item{
  width: 48.2%;
}
.hb_link_top_item > a{
  border: 2px solid var(--color-hb-yellow);
  display: block;
  height: 100%;
  padding: min(0.660vw, 7px) min(0.660vw, 7px) 0;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .hb_link_top_item > a:hover{
    opacity: 0.7;
  }
}
@media screen and (max-width: 767px){
  .hb_link_top_item > a{
    border:  0.385vw solid var(--color-hb-yellow);
    padding: 0.769vw 0.769vw 0;
  }
}

.hb_link_top_thumb{
  display: block;
}
.hb_link_top_thumb img{
  aspect-ratio: 449 / 222;
  object-fit: cover;
  width: 100%;
}
.hb_link_top_ttl{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-hb-2xl);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.4;
  min-height: min(8.396vw, 89px);
  text-align: center;
}
.hb_link_top_ttl ruby[data-ruby]::before{
  font-size: var(--font-size-hb-ruby-ttl);
}
.hb_link_top_icon{
  flex: none;
  height: 1.5em;
  margin-right: 0.3em;
  width: auto;
}
@media screen and (max-width: 767px){
  .hb_link_top_ttl{
    font-size: var(--font-size-hb-md);
    padding: min(3.077vw, 12px) 0 min(1.282vw, 5px);
  }
  .hb_link_top_ttl ruby[data-ruby]::before{
    font-size: var(--font-size-hb-ruby-base);
  }
}

/* ------ slider共通（.hb_slider_box） ------- */
.hb_slider_box{
  --hb-slider-arrow-front: #231815;     /* 矢印（手前） */
  --hb-slider-arrow-back: #7a7a7a;      /* 矢印（奥） */
  --hb-slider-bar-off: #000;            /* 未選択のバー */
  --hb-slider-bar-track: #fff;          /* 選択中のバーの下地 */
  --hb-slider-bar-on: #000;             /* 左から右へ流れる色 */

  margin: 0 auto;
  padding-bottom: var(--size-hb-25); /* バーの分 */
  width: 100%;
}
@media screen and (max-width: 767px){
  .hb_slider_box{
    padding-bottom: var(--size-hb-30);
  }
}

/* 矢印 */
.hb_slider_box .splide__arrow{
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--size-hb-40);
  opacity: 1;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.3s ease;
  width: var(--size-hb-40);
  z-index: 1;
}
.hb_slider_box .splide__arrow--prev{
  left: 0;
  right: auto;
}
.hb_slider_box .splide__arrow--next{
  left: auto;
  right: 0;
}
.hb_slider_box .splide__arrow svg{
  display: block;
  height: auto;
  transform: none;
  width: min(3.302vw, 35px); /* 35 × 25px */
}
.hb_slider_box .splide__arrow--next svg{
  transform: scaleX(-1);
}
.hb_slider_box .splide__arrow polygon:first-child{
  fill: var(--hb-slider-arrow-back);
}
.hb_slider_box .splide__arrow polygon:last-child{
  fill: var(--hb-slider-arrow-front);
}
@media screen and (max-width: 767px){
  .hb_slider_box .splide__arrow svg{
    width: 7.179vw; /* 390px時 28 × 20px */
  }
}
@media (hover: hover) {
  .hb_slider_box .splide__arrow:hover{
    opacity: 0.7;
  }
}

/* バー（ページネーション） */
.hb_slider_box .splide__pagination{
  gap: var(--size-hb-10);
  margin-top: var(--size-hb-15);
  padding: 0;
  position: absolute;
  top: 100%;
  right: 0;
  bottom: auto;
  left: 0;
}
.hb_slider_box .splide__pagination__page{
  -webkit-appearance: none;
  appearance: none;
  background: var(--hb-slider-bar-off);
  border: var(--hb-slider-bar-border, 0); /* 枠線は night.css で指定 */
  border-radius: 100vmax;
  cursor: pointer;
  display: block;
  height: min(0.755vw, 8px);
  margin: 0;
  opacity: 1;
  padding: 0;
  position: relative;
  transform: none;
  width: min(5.189vw, 55px);
}
.hb_slider_box .splide__pagination__page::before{
  content: '';
  position: absolute;
  inset: -10px 0;
}
.hb_slider_box .splide__pagination__page.is-active{
  background: var(--hb-slider-bar-track);
  transform: none;
}
.hb_slider_box .splide__pagination__page.is-active::after{
  content: '';
  background: var(--hb-slider-bar-on);
  border-radius: inherit;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--hb-slider-progress, 0) * 100%);
}
@media screen and (max-width: 767px){
  .hb_slider_box .splide__pagination{
    gap: 2.051vw;        /* 390px時 8px */
    margin-top: var(--size-hb-20);
  }
  .hb_slider_box .splide__pagination__page{
    height: 1.667vw; /* 390px時 6.5px */
    width: 11.795vw; /* 390px時 46px */
  }
}
@media (prefers-reduced-motion: reduce){
  .hb_slider_box .splide__pagination__page.is-active::after{
    width: 0;
  }
}

/* ------ slider（.hb_slider_mv_box） ------- */
/* 中央に1枚＋左右が見切れる */
.hb_slider_mv_box{
  --hb-slider-arrow-front: #fff;
  --hb-slider-arrow-back: rgba(255, 255, 255, 0.5);
  --hb-slider-mv-side: calc(27% + 0.694vw); /* 左右の見切れの幅（JS の padding と同じ値） */
}
.hb_slider_mv_box .splide__arrow{
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.6));
}
/* 矢印：中央の画像の左右 */
.hb_slider_mv_box .splide__arrow--prev{
  left: auto;
  right: calc(100% - var(--hb-slider-mv-side) + var(--size-hb-10));
}
.hb_slider_mv_box .splide__arrow--next{
  left: calc(100% - var(--hb-slider-mv-side) + var(--size-hb-10));
  right: auto;
}
@media screen and (max-width: 767px){
  .hb_slider_mv_box .splide__arrow--prev{
    left: 0.385vw; /* 390px時 1.5px */
    right: auto;
  }
  .hb_slider_mv_box .splide__arrow--next{
    left: auto;
    right: 0.385vw;
  }
}

/* .hb_slider_mv_item */
.hb_slider_mv_item a{
  display: block;
  transition: opacity 0.3s ease;
}
.hb_slider_mv_item picture{
  display: block;
}
.hb_slider_mv_item img{
  aspect-ratio: 1200 / 628;
  object-fit: cover;
  width: 100%;
}
@media (hover: hover) {
  .hb_slider_mv_item a:hover{
    opacity: 0.9;
  }
}
@media screen and (max-width: 767px){
  .hb_slider_mv_item img{
    aspect-ratio: 1 / 1;
  }
}

/* ------ slider（.hb_slider_product_box） ------- */
.hb_slider_box.hb_slider_product_box{
  --hb-slider-bar-border: 1px solid #000;
  padding-bottom: 0;
}
.hb_slider_product_box .splide{
  background-color: #fff;
  margin: 0 auto;
  max-width: calc(750px + var(--size-hb-30) * 2); /* 画像の表示幅 750px ＋ 白枠 */
  padding: var(--size-hb-25) var(--size-hb-30) var(--size-hb-40);
}
.hb_slider_product_box .splide__arrow--prev{
  left: auto;
  right: calc(100% - var(--size-hb-15));
}
.hb_slider_product_box .splide__arrow--next{
  left: calc(100% - var(--size-hb-15));
  right: auto;
}
.hb_slider_product_box .splide__pagination{
  bottom: var(--size-hb-15);
  margin-top: 0;
  top: auto;
}
@media screen and (max-width: 767px){
  .hb_slider_box.hb_slider_product_box{
    --hb-slider-arrow-front: #fff;
    --hb-slider-arrow-back: rgba(255, 255, 255, 0.5);
    padding: 0;
  }
  .hb_slider_product_box .splide{
    padding: var(--size-hb-10) var(--size-hb-10) var(--size-hb-30);
  }
  .hb_slider_product_box .splide__arrow--prev{
    left: var(--size-hb-10);
    right: auto;
    top: 47%;
  }
  .hb_slider_product_box .splide__arrow--next{
    left: auto;
    right: var(--size-hb-10);
    top: 47%;
  }
  .hb_slider_product_box .splide__pagination{
    bottom: var(--size-hb-15);
  }
}

/* .hb_slider_product_item */
.hb_slider_product_item a{
  display: block;
  transition: opacity 0.3s ease;
}
.hb_slider_product_item picture{
  display: block;
}
.hb_slider_product_item img{
  aspect-ratio: 1200 / 628;
  object-fit: cover;
  width: 100%;
}
@media (hover: hover){
  .hb_slider_product_item a:hover{
    opacity: 0.9;
  }
}
@media screen and (max-width: 767px){
  .hb_slider_product_item img{
    aspect-ratio: 1 / 1;
  }
}

/* ------ .hb_breadcrumb ------- */
.hb_breadcrumb_box {
  margin: 0 auto;
  padding: 15px var(--size-hb-25) var(--size-hb-40);
  position: relative;
  width: 100%;
  z-index: 1;
}
.hb_breadcrumb_list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-hb-10);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hb_breadcrumb_item {
  align-items: center;
  display: flex;
  font-family: var(--font-hb-gothic);
  font-size: calc(var(--font-size-hb-xs) * 0.9);
}
.hb_breadcrumb_item:not(:last-child)::after{
  /* 色は daytime.css / night.css で指定 */
  content: '';
  aspect-ratio: 1 / 1;
  background-color: var(--hb-breadcrumb-arrow-color, #000);
  display: block;
  flex: none;
  margin-left: var(--size-hb-10);
  -webkit-mask: url("../../img/common/icon_hb_breadcrumb_arrow.svg") center / contain no-repeat;
  mask: url("../../img/common/icon_hb_breadcrumb_arrow.svg") center / contain no-repeat;
  width: calc(var(--size-hb-10) * 1.2);
}
.hb_breadcrumb_item a {
  color: var(--color-hb-font-base);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.hb_breadcrumb_item span {
  color: var(--color-hb-font-base);
  font-weight: 400;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 767px) {
  .hb_breadcrumb_box {
    max-width: 100%;
    padding: var(--size-hb-15) var(--size-hb-20) var(--size-hb-30);
  }
  .hb_breadcrumb_list {
    gap: var(--size-hb-5);
  }
  .hb_breadcrumb_item {
    font-size: calc(var(--font-size-hb-base) * 0.9);
  }
  .hb_breadcrumb_item:not(:last-child)::after {
    margin-left: var(--size-hb-5);
  }
}
@media (hover: hover) {
  .hb_breadcrumb_item > a:hover {
    text-decoration: underline;
  }
}


/* =======================================
  04. Layout（wrapper / container / header / footer）
======================================= */
/* ------ box -------*/
.horobeat_wrapper{
  isolation: isolate; /* 中の z-index をこの中だけで完結させる（タカラトミー共通ヘッダーより上に出ないように） */
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}
/* ホロビートのメニューを開いている間だけ、タカラトミー共通ヘッダーより上に出す */
@media screen and (max-width: 1299px){
  body.is-menu-open .horobeat_wrapper{
    z-index: 10000;
  }
}
.horobeat_wrapper main {
  padding-bottom: var(--size-hb-30);
}
.horobeat_wrapper section {
  position: relative;
  z-index: 1;
}
.horobeat_wrapper .container {
  margin: 0 auto;
  max-width: 1000px;
  position: relative;
  padding: 0;
  width: calc(100% - var(--size-hb-60)); /* 左右 30px */
}
@media screen and (max-width: 767px){
  .horobeat_wrapper main {
    padding-bottom: var(--size-hb-20);
  }
  .horobeat_wrapper .container {
    width: 92%;
  }
}

/* ------ header -------*/
/* ナビだけ、1299px 以下でスマホのメニュー（ハンバーガー）に切り替える */
@media screen and (min-width: 1300px){
  .hb_nav_sp{ display: none !important; }
}
@media screen and (max-width: 1299px){
  .hb_nav_pc{ display: none !important; }
}

.hb_header{
  min-height: 50px; /* 固定 */
  margin-top: var(--size-hb-15);
}

/* .hb_nav */
.hb_nav{
  position: relative;
  width: 100%;
  z-index: 101;
}
.hb_nav.is-fixed{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}
@media screen and (max-width: 1299px){
  /* 全画面の背景（画像は daytime.css / night.css で指定） */
  .hb_nav::before{
    content: '';
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    visibility: hidden;
    z-index: -1;
  }

  /* 文字・アイコン・線・閉じるボタンの色は --hb-nav-open-color（daytime.css / night.css で指定） */
  .hb_nav.is-open{
    color: var(--hb-nav-open-color, #000);
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: fixed;
  }
  .hb_nav.is-open::before{
    opacity: 1;
    visibility: visible;
  }
  body.is-menu-open{
    overflow: hidden;
  }
}

/* .hb_nav_inner */
.hb_nav_inner{
  --hb-nav-line: rgba(0, 0, 0, 0.2); /* 区切り線 */

  align-items: center;
  background-color: #e73528;
  display: flex;
  gap: clamp(16px, 3.774vw, 40px);
  min-height: 50px;
  padding: 0 var(--size-hb-20);
  position: relative;
}
@media screen and (max-width: 1299px){
  .hb_nav_inner{
    gap: var(--size-hb-15);
    padding: 0 var(--size-hb-15);
  }
  .hb_nav.is-open .hb_nav_inner{
    align-content: flex-start;
    align-items: flex-start;
    background-color: transparent;
    flex-wrap: wrap;
    gap: 0;
    min-height: 100%;
    padding: var(--size-hb-15) var(--size-hb-15) 10vw;
  }
}

/* .hb_nav_logo */
.hb_nav_logo{
  flex: none;
  text-decoration: none;
  width: min(99.375vw, 159px);
}
.hb_nav_logo img{
  height: auto;
  width: 100%;
}
@media screen and (max-width: 1299px){
  .hb_nav_logo{
    width: min(38.462vw, 170px); /* 390px時 150px */
  }

  /* ロゴの色は --hb-nav-open-color（daytime.css / night.css で指定） */
  .hb_nav.is-open .hb_nav_logo{
    position: relative;
  }
  .hb_nav.is-open .hb_nav_logo img{
    opacity: 0;
  }
  .hb_nav.is-open .hb_nav_logo::before{
    content: '';
    background-color: var(--hb-nav-open-color, #000);
    inset: 0;
    -webkit-mask: url("../../img/common/logo_horobeat_cardgame.svg") left top / 100% auto no-repeat;
    mask: url("../../img/common/logo_horobeat_cardgame.svg") left top / 100% auto no-repeat;
    position: absolute;
  }
}

/* .hb_nav_menu / .hb_nav_list */
.hb_nav_menu,
.hb_nav_list{
  align-self: stretch;
  display: flex;
}
.hb_nav_list{
  gap: clamp(8px, 5.48vw - 34px, 24px); /* 768px時 8px 〜 1060px時 24px */
}
.hb_nav_list > li{
  align-items: center;
  display: flex;
}
@media screen and (max-width: 1299px){
  .hb_nav_menu{
    display: none;
  }
  .hb_nav.is-open .hb_nav_menu{
    animation: hb-nav-fade 0.3s ease;
    display: block;
    flex: 0 0 100%;
  }
  .hb_nav_list{
    display: block;
  }
  .hb_nav_list > li{
    border-bottom: 1px solid currentColor;
    display: block;
  }
}

/* .hb_nav_item */
.hb_nav_item{
  align-items: center;
  color: #000;
  display: flex;
  gap: 0.45em;
  font-family: var(--font-hb-gothic);
  font-size: clamp(11px, 1.226vw, 13px);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-decoration: none;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}
@media (hover: hover){
  .hb_nav_item:hover{
    opacity: 0.7;
  }
}
@media screen and (max-width: 1299px){
  .hb_nav_item{
    font-size: min(3.333vw, 13px); /* max 13px */
  }
  .hb_nav_menu .hb_nav_item{
    color: inherit;
    font-size: min(3.718vw, 14.5px); /* max 14.5px */
    gap: 0.5em;
    letter-spacing: 0.05em;
    line-height: 1;
    padding: min(3.846vw, 15px); /* max 15px */
    width: 100%;
  }
}

/* .hb_nav_icon */
.hb_nav_icon{
  aspect-ratio: 14 / 21;
  background-color: currentColor;
  display: block;
  flex: none;
  -webkit-mask: url("../../img/common/icon_hitodama.svg") center / contain no-repeat;
  mask: url("../../img/common/icon_hitodama.svg") center / contain no-repeat;
  width: 1.08em; /* 文字 13px のとき 14px */
}
@media screen and (max-width: 1299px){
  .hb_nav_menu .hb_nav_icon{
    width: 0.95em; /* 390px時 約15 × 23px */
  }
}

/* .hb_nav_sub */
.hb_nav_sub{
  position: relative;
}
.hb_nav_sub_trigger{
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  padding: 0;
}

/* .hb_nav_arrow */
.hb_nav_arrow{
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid currentColor;
  display: block;
  transition: transform 0.3s ease;
}
.hb_nav_sub.is-open .hb_nav_arrow{
  transform: rotate(180deg);
}
@media screen and (max-width: 1299px){
  .hb_nav_arrow{
    margin-left: auto;
  }
}

/* .hb_nav_sub_panel */
.hb_nav_sub_panel{
  background-color: #e73528;
  border-top: 1px solid var(--hb-nav-line);
  left: 0;
  min-width: min(16.981vw, 180px);
  opacity: 0;
  position: absolute;
  top: 100%;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  visibility: hidden;
}
.hb_nav_sub.is-open .hb_nav_sub_panel{
  opacity: 1;
  visibility: visible;
}
@media screen and (max-width: 1299px){
  .hb_nav_sub_panel{
    background-color: transparent;
    border-top: 0;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 1;
    position: static;
    transition: grid-template-rows 0.3s ease, visibility 0.3s ease;
  }
  .hb_nav_sub.is-open .hb_nav_sub_panel{
    grid-template-rows: 1fr;
  }
}

/* .hb_nav_sub_list */
.hb_nav_sub_list{
  padding: 6px 0;
}
.hb_nav_sub_list .hb_nav_item{
  justify-content: space-between;
  padding: 8px 16px;
}
.hb_nav_sub_list .hb_nav_item::after{
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  content: '';
  flex: none;
  height: 0.45em;
  margin-left: 1em;
  transform: rotate(45deg);
  width: 0.45em;
}
@media screen and (max-width: 1299px){
  .hb_nav_sub_list{
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }
  .hb_nav_sub_list > li{
    border-top: 1px solid currentColor;
  }
  .hb_nav_sub_list .hb_nav_item{
    font-size: min(3.718vw, 14.5px); /* max 14.5px */
    padding: min(4.615vw, 18px) min(4.615vw, 18px) min(4.615vw, 18px) min(7.692vw, 30px); /* max 18px / 30px */
  }
}

/* .hb_nav_cardlist */
@media screen and (max-width: 1299px){
  .hb_nav_cardlist{
    margin-left: auto;
  }
  .hb_nav.is-open .hb_nav_cardlist{
    display: none;
  }
}

/* .hb_nav_toggle */
@media screen and (max-width: 1299px){
  .hb_nav_toggle{
    -webkit-appearance: none;
    appearance: none;
    align-items: center;
    background: none;
    border: 0;
    border-radius: 0;
    color: #000;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-family: var(--font-hb-gothic);
    font-size: min(2.564vw, 10px); /* max 10px */
    font-weight: 700;
    gap: min(1.538vw, 6px); /* max 6px */
    justify-content: center;
    letter-spacing: 0.08em;
    line-height: 1;
    min-height: 50px;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
  }
  /* 三本線（真ん中の線＝本体、上下の線＝::before / ::after） */
  .hb_nav_toggle_bar{
    background-color: currentColor;
    border-radius: 2px;
    display: block;
    height: 3px;
    margin: min(2.051vw, 8px) 0; /* 上下の線の分 */
    position: relative;
    width: min(6.667vw, 26px); /* max 26px */
  }
  .hb_nav_toggle_bar::before,
  .hb_nav_toggle_bar::after{
    background-color: currentColor;
    border-radius: 2px;
    content: '';
    height: 3px;
    left: 0;
    position: absolute;
    width: 100%;
  }
  .hb_nav_toggle_bar::before{
    top: max(-2.051vw, -8px);
  }
  .hb_nav_toggle_bar::after{
    top: min(2.051vw, 8px);
  }
  .hb_nav_toggle:focus:not(:focus-visible){
    outline: none;
  }
  .hb_nav_toggle:focus-visible{
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
  .hb_nav.is-open .hb_nav_toggle{
    color: inherit;
    height: min(12.8vw, 50px);
    margin: 0 0 0 auto;
    min-height: 0;
    width: min(8.13vw, 31.7px);
  }
  .hb_nav.is-open .hb_nav_toggle::before{
    content: '';
    background-color: currentColor;
    height: 100%;
    -webkit-mask: url("../../img/common/hb_icon_nav_close.webp") center / contain no-repeat;
    mask: url("../../img/common/hb_icon_nav_close.webp") center / contain no-repeat;
    width: 100%;
  }
  .hb_nav.is-open .hb_nav_toggle .hb_nav_toggle_bar{
    display: none;
  }
  .hb_nav.is-open .hb_nav_toggle_txt{
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

/* .hb_nav_sns */
@media screen and (max-width: 1299px){
  .hb_nav_sns{
    color: inherit;
    display: block;
    margin: var(--size-hb-30) 0 0 var(--size-hb-20);
    transition: opacity 0.3s ease;
    width: min(12.821vw, 50px);
  }
  .hb_nav_sns_icon{
    aspect-ratio: 1 / 1;
    background-color: currentColor;
    display: block;
    -webkit-mask: url("../../img/common/hb_icon_sns_x.svg") center / contain no-repeat;
    mask: url("../../img/common/hb_icon_sns_x.svg") center / contain no-repeat;
  }
}
@media screen and (max-width: 1299px) and (hover: hover){
  .hb_nav_sns:hover{
    opacity: 0.7;
  }
}

/* animation */
@keyframes hb-nav-fade{
  from{ opacity: 0; }
  to{   opacity: 1; }
}

/* ------ footer -------*/
.hb_footer{
  position: relative;
  z-index: 1;
}

/* .hb_footer_sns_box */
.hb_footer_sns_box{
  background-color: #e73528;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--size-hb-20);
}
.hb_footer_sns_box .hb_icon_sns_x img {
  margin-bottom: var(--size-hb-5);
  width: min(5.472vw, 58px);
}
@media screen and (max-width: 767px){
  .hb_footer_sns_box{
    padding: var(--size-hb-15);
  }
  .hb_footer_sns_box .hb_icon_sns_x img {
    width: min( 8.718vw, 34px);
  }
}

/* .hb_footer_info_box */
/* 文字とロゴの色は --hb-footer-info-color / --hb-footer-logo-filter（daytime.css / night.css で指定） */
.hb_footer_info_box{
  color: var(--hb-footer-info-color, #000);
  padding: var(--size-hb-50) 0;
}
.hb_footer .hb_footer_logo{
  filter: var(--hb-footer-logo-filter, brightness(0));
  margin: 0 auto var(--size-hb-20);
  width: min(20.755vw, 220px);
}
.hb_footer .hb_footer_copy{
  font-size: calc(var(--font-size-hb-xs) * 0.8);
  font-family: var(--font-hb-gothic);
  margin-bottom: 0.5em;
  text-align: center;
}
.hb_footer .hb_footer_note{
  font-size: calc(var(--font-size-hb-xs) * 0.8);
  font-family: var(--font-hb-gothic);
  text-align: center;
}
@media screen and (max-width: 767px){
  .hb_footer_info_box{
    padding: var(--size-hb-30) 0;
  }
  .hb_footer .hb_footer_logo{
    width: 56.41vw;
  }
}


/* =======================================
  05. Animation（floating / fade）
======================================= */
/* ------ floating（浮遊） -------*/
.floating {
  display: flex;
  justify-content: center;
  margin-bottom: var(--size-hb-50);

  animation: 
    floating-y 3s infinite alternate ease-in-out,
    floating-x 4.11s infinite alternate ease-in-out,
    floating-rotate 5.19s infinite alternate ease-in-out;
}
@media screen and (max-width: 767px){
  .floating {
    margin-bottom: var(--size-hb-20);
  }
}
@keyframes floating-y {
	0% { translate: 0 -20px; }
	100% { translate: 0 15px; }
}
@keyframes floating-x {
	0% { transform: translateX(-10px); }
	100% { transform: translateX(5px); }
}
@keyframes floating-rotate {
	0% { rotate: -5deg; }
	100% { rotate: 3deg; }
}
@media screen and (max-width: 767px){
  @keyframes floating-y {
    0%   { translate: 0 -10px; }
    100% { translate: 0 8px; }
  }
  @keyframes floating-x {
    0%   { transform: translateX(-5px); }
    100% { transform: translateX(3px); }
  }
  @keyframes floating-rotate {
    0%   { rotate: -2deg; }
    100% { rotate: 2deg; }
  }
}

/* ------ Fade (ふわっと表示) -------*/
.fadeInUp {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}
.fadeInUp.is-show {
  opacity: 1;
  transform: translateY(0);
}


/* =======================================
  06. Page（トップページ）.page_hb_top
======================================= */
.page_hb_top .section_mb{
  margin-bottom: var(--size-hb-100);
}
@media screen and (max-width: 767px){
  .page_hb_top .section_mb{
    margin-bottom: var(--size-hb-40);
  }
}

/* ------ #hb_sec_top_mv -------*/
#hb_sec_top_mv{
  z-index: 100;
}
#hb_sec_top_mv .container{
  max-width: 100%;
  width: 100%;
}
/* ------ #hb_sec_top_bnr -------*/
.hb_top_bnr img{
  display: block;
  height: auto;
  width: 100%;
}
.bnr_event2026{
  margin: 0 auto;
  max-width: 840px;
}
@media screen and (max-width: 767px){
  .bnr_event2026{
    width: 90%;
  }
}


/* =======================================
  06. Page（初めてのかたへ）.page_hb_beginner
======================================= */
/* ------ 共通 -------*/
.horobeat_wrapper .hb_beginner_lead{
  font-size: var(--font-size-hb-md);
  font-weight: 600;
  margin-bottom: 2em;
  letter-spacing: 0.1em;
  line-height: 1.9;
  text-align: center;
}
@media screen and (max-width: 767px){
  .horobeat_wrapper .hb_beginner_lead{
    margin-bottom: 1.5em;
    text-align: left;
  }
}

/* ------ #hb_sec_beginner_about -------*/
.hb_beginner_about_box{
  align-items: center;
  display: flex;
  gap: var(--size-hb-40);
  justify-content: center;
}
.horobeat_wrapper .hb_beginner_about_txt{
  font-size: var(--font-size-hb-lg);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 2.3;
  margin-bottom: 0;
}
.hb_beginner_about_name{
  font-size: var(--font-size-hb-xl);
  font-weight: 700;
}
.hb_beginner_about_txt em{
  background: linear-gradient(transparent 68%, rgba(233, 196, 106, 0.55) 68%);
  color: var(--color-hb-red);
  font-size: var(--font-size-hb-3xl);
  font-style: normal;
  font-weight: 700;
  padding: 0 0.1em;
}
.hb_beginner_about_img{
  filter: drop-shadow(4px 6px 8px rgba(70, 35, 10, 0.35));
  flex: none;
  transform: rotate(3deg);
  width: min(21.698vw, 230px);
}
.hb_beginner_about_img img{
  width: 100%;
}
@media screen and (max-width: 767px){
  #hb_sec_beginner_about .hb_ttl_sub span{
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
  }
  .hb_beginner_about_box{
    flex-direction: column;
    gap: var(--size-hb-20);
  }
  .horobeat_wrapper .hb_beginner_about_txt{
    font-size: var(--font-size-hb-md);
    line-height: 2.1;
    text-align: center;
  }
  .hb_beginner_about_name{
    font-size: var(--font-size-hb-xl);
  }
  .hb_beginner_about_txt em{
    font-size: var(--font-size-hb-2xl);
  }
  .hb_beginner_about_img{
    width: 33.333vw; /* 390px時 130px */
  }
}

/* ------ #hb_sec_beginner_rarity -------*/
.hb_rarity_list{
  align-items: flex-start;
  display: flex;
  gap: var(--size-hb-15);
  justify-content: space-between;
}
.hb_rarity_item{
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
.hb_rarity_item img{
  border-radius: min(0.66vw, 7px);
  box-shadow: 0 4px 10px rgba(60, 30, 10, 0.2);
  width: 100%;
}
.hb_rarity_label{
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  line-height: 1;
  margin-top: var(--size-hb-15);
}
.hb_rarity_ttl{
  font-size: var(--font-size-hb-3xl);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.hb_rarity_txt{
  font-size: var(--font-size-hb-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* SR・DR（金の光・金文字） */
.hb_rarity_item_sr img,
.hb_rarity_item_dr img{
  box-shadow:
    0 0 0 2.5px rgba(216, 172, 69, 0.9),
    0 0 24px 5px rgba(240, 196, 80, 0.7);
}
.hb_rarity_item_sr .hb_rarity_ttl,
.hb_rarity_item_dr .hb_rarity_ttl{
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(180deg, #d9a632 0%, #b37e14 45%, #7a4f06 70%, #b8862a 100%);
  color: transparent;
  font-size: calc(var(--font-size-hb-3xl) * 1.4);
}
.hb_rarity_item_dr .hb_rarity_ttl{
  background-image: linear-gradient(180deg, #d9a032 0%, #b5401a 40%, #8c1c10 70%, #b8702a 100%);
}
.hb_rarity_item_sr .hb_rarity_txt,
.hb_rarity_item_dr .hb_rarity_txt{
  /* 周りの境目（一周）をぼかす：横と縦のグラデーションを重ねたマスク */
  --hb-rarity-fade-x: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  --hb-rarity-fade-y: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);

  background: linear-gradient(90deg, #8a5a0c, #c9952a 50%, #8a5a0c);
  color: #fff;
  -webkit-mask: var(--hb-rarity-fade-x), var(--hb-rarity-fade-y);
  -webkit-mask-composite: source-in;
  mask: var(--hb-rarity-fade-x), var(--hb-rarity-fade-y);
  mask-composite: intersect;
  padding: 1.5em 1.8em 0.9em; /* 上はルビの分を広く。ぼかした部分に文字がかからないよう左右も広く */
}
.hb_rarity_item_dr .hb_rarity_txt{
  background: linear-gradient(90deg, #8e1712, #c6231e 30%, #d8a136 50%, #c6231e 70%, #8e1712);
}
.hb_rarity_item_dr .hb_rarity_txt ruby[data-ruby]::before{
  top: -1em;
}
@media screen and (max-width: 767px){
  .hb_rarity_item_sr .hb_rarity_txt,
  .hb_rarity_item_dr .hb_rarity_txt{
    --hb-rarity-fade-x: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    padding: 1.5em 1em 0.9em;
    white-space: nowrap;
  }
  .hb_rarity_item_dr .hb_rarity_txt{
    min-width: 100%;
  }
}
/* スーパーレア：ルビがないので上下の余白を同じに（高さは伝承レアと同じ） */
.hb_rarity_item_sr .hb_rarity_txt{
  padding-bottom: 1.2em;
  padding-top: 1.2em;
}
@media screen and (max-width: 767px){
  .hb_rarity_list{
    flex-wrap: wrap;
    gap: var(--size-hb-20) var(--size-hb-15);
    justify-content: center;
  }
  .hb_rarity_item{
    flex: none;
    width: calc((100% - var(--size-hb-15) * 2) / 3);
  }
  .hb_rarity_item img{
    border-radius: 1.538vw; /* 390px時 6px */
  }
  .hb_rarity_txt{
    font-size: var(--font-size-hb-xs);
    letter-spacing: 0.05em;
  }
}

/* ------ #hb_sec_beginner_start -------*/
.hb_beginner_deck_list{
  display: flex;
  gap: var(--size-hb-40);
  justify-content: center;
}
.hb_beginner_deck_item{
  width: min(35.849vw, 380px);
}
.hb_beginner_deck_item a{
  display: block;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.hb_beginner_deck_img{
  margin: 0 auto;
  width: 64%;
}
.hb_beginner_deck_img img{
  filter: drop-shadow(0 6px 10px rgba(60, 30, 10, 0.3));
  transition: transform 0.3s ease;
  width: 100%;
}
.hb_beginner_deck_ttl{
  margin-top: var(--size-hb-15);
}
.hb_beginner_deck_ttl img{
  width: 100%;
}
@media (hover: hover){
  .hb_beginner_deck_item a:hover .hb_beginner_deck_img img{
    transform: translateY(-4px);
  }
}
@media screen and (max-width: 767px){
  .hb_beginner_deck_list{
    align-items: center;
    flex-direction: column;
    gap: var(--size-hb-30);
  }
  .hb_beginner_deck_list.box_mb{
    margin-bottom: var(--size-hb-30);
  }
  .hb_beginner_deck_item{
    width: 90%;
  }
  .hb_beginner_deck_img{
    width: 56%;
  }
  .hb_beginner_deck_ttl{
    margin-top: var(--size-hb-10);
  }
}

/* ------ #hb_sec_beginner_movie -------*/
#hb_sec_beginner_movie .hb_movie_box{
  background: none;
  padding: 0;
}

/* ------ #hb_sec_beginner_howto -------*/
/* 番号（八角形） */
.hb_howto_num{
  align-items: center;
  aspect-ratio: 1 / 1;
  background-color: #000;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  color: #ef2e2a;
  display: inline-flex;
  flex: none;
  font-family: var(--font-hb-gothic);
  font-size: var(--font-size-hb-md);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  width: var(--size-hb-30);
}
@supports (text-box: trim-both cap alphabetic){
  .hb_howto_num{
    text-box: trim-both cap alphabetic;
    width: var(--size-hb-25);
  }
}
@supports not (text-box: trim-both cap alphabetic){
  .hb_howto_num{
    padding-top: 0.1em;
  }
}
.hb_howto_num_red{
  color: #fff;
  background-color: var(--color-hb-red);
}
.hb_howto_num_gold{
  color: #fff;
  background-color: var(--color-hb-yellow);
}

/* 其の一：カードの種類 */
.hb_howto_kind_list{
  display: grid;
  gap: var(--size-hb-30);
  grid-template-columns: 1fr 1fr;
}
.horobeat_wrapper .hb_howto_kind_item{
  background-color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: flex-start;
  gap: var(--size-hb-20);
  padding: var(--size-hb-20);
}
.horobeat_wrapper .hb_howto_kind_item ruby[data-ruby]::before{
  letter-spacing: 0.1em;
}
@media screen and (max-width: 767px){
  .horobeat_wrapper .hb_howto_kind_item{
    gap: var(--size-hb-15);
    padding: var(--size-hb-15);
  }
}
.hb_howto_kind_img{
  flex: none;
  width: var(--size-hb-140);
}
.hb_howto_kind_img img{
  width: 100%;
}
/* .hb_howto_kind_ttl（角を落とした札の形：外側が黒い枠） */
.hb_howto_kind_ttl{
  --hb-kind-cut: 0.4em;   /* 角の斜めの大きさ */
  --hb-kind-line: 2px;    /* 枠線の太さ */

  background-color: #000;
  clip-path: polygon(
    0 var(--hb-kind-cut), var(--hb-kind-cut) 0,
    calc(100% - var(--hb-kind-cut)) 0, 100% var(--hb-kind-cut),
    100% calc(100% - var(--hb-kind-cut)), calc(100% - var(--hb-kind-cut)) 100%,
    var(--hb-kind-cut) 100%, 0 calc(100% - var(--hb-kind-cut))
  );
  display: inline-block;
  font-size: var(--font-size-hb-lg);
  letter-spacing: 0.15em;
  line-height: 1.4;
  margin-bottom: 0.6em;
  min-width: min(16.981vw, 180px);
  padding: var(--hb-kind-line);
}
/* 内側（文字の入る面） */
.hb_howto_kind_ttl > span{
  --hb-kind-cut-in: calc(var(--hb-kind-cut) - var(--hb-kind-line) * 0.4);

  align-items: center;
  background-color: #000;
  clip-path: polygon(
    0 var(--hb-kind-cut-in), var(--hb-kind-cut-in) 0,
    calc(100% - var(--hb-kind-cut-in)) 0, 100% var(--hb-kind-cut-in),
    100% calc(100% - var(--hb-kind-cut-in)), calc(100% - var(--hb-kind-cut-in)) 100%,
    var(--hb-kind-cut-in) 100%, 0 calc(100% - var(--hb-kind-cut-in))
  );
  color: var(--color-hb-red);
  display: flex;
  font-weight: 700;
  gap: 0.3em;
  justify-content: center;
  padding: 0.3em 1em 0.2em;
}
/* 人魂アイコン */
.hb_howto_kind_ttl > span::before{
  aspect-ratio: 14 / 21;
  background-color: currentColor;
  content: '';
  flex: none;
  -webkit-mask: url("../../img/common/icon_hitodama.svg") center / contain no-repeat;
  mask: url("../../img/common/icon_hitodama.svg") center / contain no-repeat;
  width: 0.7em;
}
.hb_howto_kind_ttl_white > span{
  background-color: #fff;
}
@media screen and (max-width: 767px){
  .hb_howto_kind_ttl{
    --hb-kind-line: 1.5px;
    min-width: 35.897vw; /* 390px時 140px */
  }
}
.horobeat_wrapper .hb_howto_kind_txt{
  line-height: 1.9;
}

/* 其の一：カードの見かた */
.hb_howto_parts_ttl{
  align-items: center;
  display: flex;
  font-size: var(--font-size-hb-xl);
  gap: 1em;
  justify-content: center;
  margin: var(--size-hb-50) 0 var(--size-hb-30);
}
.hb_howto_parts_ttl::before,
.hb_howto_parts_ttl::after{
  background-color: var(--color-hb-yellow);
  content: '';
  height: 1px;
  width: min(9.434vw, 100px);
}
.hb_howto_parts_box{
  align-items: start;
  display: grid;
  gap: var(--size-hb-30);
  grid-template-columns: min(37.736vw, 400px) 1fr;
}
.hb_howto_parts_img_list{
  display: grid;
  gap: var(--size-hb-15);
  grid-template-columns: 1fr 1fr;
}
.hb_howto_parts_img img{
  width: 100%;
}
.hb_howto_parts_img_item{
  text-align: center;
}
.hb_howto_parts_img_txt{
  font-size: var(--font-size-hb-base);
  margin: 0.8em 0 0;
  min-width: 80%;
}
.hb_howto_parts_img_txt > span{
  padding: 0.35em 0.8em 0.25em;
}
.hb_howto_parts_list{
  display: grid;
  list-style: none;
  gap: var(--size-hb-10);
  grid-template-columns: 1fr 1fr;
}
.horobeat_wrapper .hb_howto_parts_item{
  background-color: rgba(255, 255, 255, 0.6);
  border-left: 3px solid var(--color-hb-red);
  padding: var(--size-hb-10) var(--size-hb-15);
}
.hb_howto_parts_item_ttl{
  align-items: center;
  color: var(--color-hb-red);
  display: flex;
  font-size: var(--font-size-hb-base);
  font-weight: 700;
  gap: 0.4em;
  margin-bottom: 0.3em;
  padding-top: 0.4em; /* ルビの分 */
}
.hb_howto_parts_item_txt{
  font-size: var(--font-size-hb-xs);
  line-height: 1.9;
}
@media screen and (max-width: 767px){
  .hb_howto_kind_list{
    gap: var(--size-hb-15);
    grid-template-columns: 1fr;
  }
  .hb_howto_kind_img{
    width: 23.077vw; /* 390px時 90px */
  }
  .hb_howto_parts_img_txt{
    font-size: var(--font-size-hb-md);
    min-width: 80%;
  }
  .hb_howto_parts_ttl{
    margin: var(--size-hb-40) 0 var(--size-hb-20);
  }
  .hb_howto_parts_ttl::before,
  .hb_howto_parts_ttl::after{
    width: 15.385vw; /* 390px時 60px */
  }
  .hb_howto_parts_box{
    gap: var(--size-hb-20);
    grid-template-columns: 1fr;
  }
  .hb_howto_parts_list{
    grid-template-columns: 1fr;
  }
  .hb_howto_parts_item_ttl{
    font-size: var(--font-size-hb-lg);
  }
  .hb_howto_parts_item_txt{
    font-size: var(--font-size-hb-md);
  }
}

/* 其の二：勝利条件 */
.hb_howto_win_list{
  display: grid;
  gap: var(--size-hb-30);
  grid-template-columns: 1fr 1fr;
}
.horobeat_wrapper .hb_howto_win_item{
  align-items: center;
  background-color: rgba(255, 255, 255, 0.6);
  border: 2px solid var(--color-hb-red);
  display: flex;
  gap: var(--size-hb-20);
  padding: var(--size-hb-15) var(--size-hb-20);
}
.hb_howto_win_item .hb_howto_num{
  font-size: var(--font-size-hb-2xl);
  width: var(--size-hb-50);
}
.hb_howto_win_txt{
  font-size: var(--font-size-hb-md);
  font-weight: 700;
  line-height: 1.9;
}
.hb_howto_win_txt em{
  color: var(--color-hb-red);
  font-style: normal;
}
@media screen and (max-width: 767px){
  .hb_howto_win_list{
    gap: var(--size-hb-15);
    grid-template-columns: 1fr;
  }
  .horobeat_wrapper .hb_howto_win_item{
    gap: var(--size-hb-15);
    padding: var(--size-hb-15);
  }
  .hb_howto_win_item .hb_howto_num{
    font-size: var(--font-size-hb-2xl);
    width: var(--size-hb-30);
  }
  .hb_howto_win_txt{
    font-size: var(--font-size-hb-lg);
  }
}

/* 其の三：ゲームの準備 */
.hb_howto_prep_box{
  align-items: start;
  display: grid;
  gap: var(--size-hb-40);
  grid-template-columns: 1fr 1fr;
}
.horobeat_wrapper .hb_howto_prep_txt{
  font-size: var(--font-size-hb-base);
  margin-bottom: 1em;
}
.hb_howto_prep_img{
  margin-bottom: var(--size-hb-20);
}
.hb_howto_prep_img img{
  box-shadow: 0 4px 10px rgba(60, 30, 10, 0.2);
  width: 100%;
}
.hb_howto_prep_note{
  font-size: var(--font-size-hb-xs);
  margin-top: 1em;
  text-align: center;
}
.horobeat_wrapper .hb_howto_step_item{
  align-items: flex-start;
  border-bottom: 1px solid rgba(122, 90, 32, 0.5);
  display: flex;
  gap: 0.8em;
  padding: 0.8em 0 0.6em;
}
.horobeat_wrapper .hb_howto_step_item:first-child{
  padding-top: 0;
}
.hb_howto_step_item .hb_howto_num{
  font-size: var(--font-size-hb-lg);
  width: min(3.302vw, 35px);
}
.hb_howto_step_txt{
  font-size: var(--font-size-hb-base);
  line-height: 2;
}
.hb_howto_step_note{
  display: block;
  font-size: 0.85em;
}
@media screen and (max-width: 767px){
  .hb_howto_prep_box{
    gap: var(--size-hb-30);
    grid-template-columns: 1fr;
  }
  .hb_howto_step_item .hb_howto_num{
    font-size: var(--font-size-hb-md);
    width: var(--size-hb-25);
  }
  .hb_howto_prep_txt,
  .hb_howto_step_txt{
    font-size: var(--font-size-hb-md);
  }
}

/* 其の四：ゲームの進め方 */
.hb_howto_step_list,
.hb_howto_phase_list{
  list-style: none;
}
/* 見出しの下・PHASEの後の説明文 */
.horobeat_wrapper .hb_howto_phase_lead,
.horobeat_wrapper .hb_howto_phase_end{
  font-size: var(--font-size-hb-md);
  line-height: 1.9;
  text-align: center;
}
.horobeat_wrapper .hb_howto_phase_lead{
  margin-bottom: var(--size-hb-20);
}
.horobeat_wrapper .hb_howto_phase_end{
  margin-top: var(--size-hb-30);
}
/* ラウンドの進行の枠 */
.hb_howto_round_box{
  background-color: rgba(110, 80, 30, 0.2);
  margin-top: calc(min(6.415vw, 68px) / 2 + var(--size-hb-20)); /* 見出しの半分＋余白 */
  padding: calc(min(6.415vw, 68px) / 2 + var(--size-hb-30)) var(--size-hb-40) var(--size-hb-40);
  position: relative;
}
.hb_howto_round_box .hb_howto_round_ttl{
  left: 50%;
  margin: 0;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
@media screen and (max-width: 767px){
  .hb_howto_round_box{
    margin-top: calc(12.308vw / 2 + var(--size-hb-20));
    padding: calc(12.308vw / 2 + var(--size-hb-20)) var(--size-hb-15) var(--size-hb-20);
  }
}
.hb_howto_phase_list{
  --hb-howto-phase-bg: rgba(189, 167, 145, 1); /* PHASEの帯の色 */
  --hb-howto-phase-accent: #fff; /* PHASE・先手後手の文字色 */
  --hb-howto-phase-gap: var(--size-hb-50); /* PHASEどうしの間（矢印の入る所） */

  display: flex;
  flex-direction: column;
  gap: var(--hb-howto-phase-gap);
}
.hb_howto_phase_item{
  background-color: rgba(255, 255, 255, 0.6);
  position: relative;
}
/* 間の▼ */
.horobeat_wrapper .hb_howto_phase_item + .hb_howto_phase_item::before{
  border-left: min(1.698vw, 18px) solid transparent;
  border-right: min(1.698vw, 18px) solid transparent;
  border-top: min(1.887vw, 20px) solid #333;
  content: '';
  display: block;
  height: 0;
  left: 50%;
  position: absolute;
  top: calc(var(--hb-howto-phase-gap) / -2);
  transform: translate(-50%, -50%);
  width: 0;
}
@media screen and (max-width: 767px){
  .hb_howto_phase_list{
    --hb-howto-phase-gap: var(--size-hb-40);
  }
  .horobeat_wrapper .hb_howto_phase_item + .hb_howto_phase_item::before{
    border-left-width: 3.846vw;  /* 390px時 15px */
    border-right-width: 3.846vw;
    border-top-width: 4.103vw;   /* 390px時 16px */
  }
}
.hb_howto_phase_ttl{
  align-items: center;
  /* background-color: var(--hb-howto-phase-bg); */
  background-image: url(../../img/common/bg_hb_ttl_sub.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 102% 102%;
  color: #fff;
  display: flex;
  font-size: var(--font-size-hb-lg);
  gap: 0.6em;
  letter-spacing: 0.15em;
  padding: 0.5em 1em 0.3em;
}
.hb_howto_phase_num{
  border: 1px solid var(--hb-howto-phase-accent);
  color: var(--hb-howto-phase-accent);
  font-size: 0.6em;
  letter-spacing: 0.1em;
  margin-right: 0.5em;
  padding: 0.2em 0.6em;
}
.hb_howto_phase_tag{
  color: var(--hb-howto-phase-accent);
  font-size: 0.6em;
}
.hb_howto_phase_body{
  font-size: var(--font-size-hb-base);
  line-height: 2;
  padding: var(--size-hb-20) var(--size-hb-25);
}
.horobeat_wrapper .hb_howto_phase_body p{
  margin-bottom: 0;
}
.hb_howto_phase_step_list{
  margin: 0;
}
.hb_howto_phase_step_item{
  align-items: start;
  border-bottom: 1px solid rgba(122, 90, 32, 0.4);
  display: grid;
  gap: var(--size-hb-15);
  grid-template-columns: min(21.698vw, 230px) 1fr;
  padding: 0.6em 0;
}
.hb_howto_phase_step_item:first-child{
  padding-top: 0;
}
.hb_howto_phase_step_item:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}
.hb_howto_phase_step_item dt{
  background-color: #000;
  color: #fff;
  font-size: var(--font-size-hb-xs);
  letter-spacing: 0.05em;
  padding: 0.3em 0.5em 0.2em;
  text-align: center;
}
.hb_howto_phase_step_item dd{
  margin: 0;
  margin-top: 0.2em;
  line-height: 1.9;
}
.hb_howto_phase_step_item .hb_howto_num{
  font-size: var(--font-size-hb-xs);
  width: var(--size-hb-25);
}
.hb_howto_phase_method_list{
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  margin-top: 1em;
}
.hb_howto_phase_method_list li{
  align-items: center;
  display: flex;
  gap: 0.4em;
}
.horobeat_wrapper .hb_howto_phase_dot_list{
  margin-top: 0.5em;
}
.horobeat_wrapper .hb_howto_phase_dot_list li{
  padding-left: 1.2em;
  position: relative;
}
.horobeat_wrapper .hb_howto_phase_dot_list li::before{
  content: '◆';
  display: block;
  position: absolute;
  left: 0;
  top: var(--size-hb-5);
  background: none;
  width: auto;
  height: auto;
  color: var(--color-hb-yellow);
  font-size: 0.8em;
}
@media screen and (max-width: 767px){
  .hb_howto_phase_ttl{
    gap: 0.5em;
    letter-spacing: 0.1em;
    padding: 0.6em 0.8em 0.3em;
  }
  .hb_howto_phase_body{
    font-size: var(--font-size-hb-md);
    padding: var(--size-hb-15);
  }
  .hb_howto_phase_step_item{
    gap: 0.3em;
    grid-template-columns: 1fr;
  }
  .hb_howto_phase_step_item dt{
    font-size: var(--font-size-hb-base);
    padding: 0 1.5em;
    width: fit-content;
  }
  .hb_howto_phase_tag{
    font-size: 1em;
  }
  .hb_howto_phase_method_list li{
    align-items: flex-start;
  }
  .hb_howto_phase_method_list .hb_howto_num{
    margin-top: calc((var(--font-size-hb-md) * 1.9 - var(--size-hb-25)) / 2);
  }
}

#hb_sec_beginner_howto .hb_howto_box + .hb_link_box .hb_btn_primary{
  width: min(35.566vw, 377px);
}


/* =======================================
  06. Page（ルール）.page_hb_rule
======================================= */
/* ------ #hb_sec_rule_movie -------*/
#hb_sec_rule_movie .hb_movie_box{
  margin: 0 auto;
  max-width: min(92.453vw, 980px);
}

/* ------ #hb_sec_rule_basic -------*/
.hb_rule_list{
  display: flex;
  flex-direction: column;
  gap: var(--size-hb-40);
  margin: var(--size-hb-50) auto 0;
  max-width: min(82.075vw, 870px);
}
.hb_rule_item{
  align-items: center;
  display: grid;
  gap: var(--size-hb-30);
  grid-template-columns: 1fr auto;
}
.hb_rule_ttl{
  font-size: calc(var(--font-size-hb-lg) * 1.2);
  letter-spacing: 0.15em;
}
.horobeat_wrapper .hb_rule_txt{
  font-size: var(--font-size-hb-md);
  margin-top: 0.3em;
  line-height: 1.9;
}
.hb_rule_item.hb_rule_item_playsheet{
  border-top: 1px solid #b5861c;
  grid-template-columns: min(22.642vw, 240px) 1fr;
  padding-top: var(--size-hb-40);
}
.hb_rule_playsheet_list{
  display: grid;
  gap: var(--size-hb-30);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hb_rule_playsheet_item{
  text-align: center;
}
.horobeat_wrapper .hb_rule_playsheet_txt{
  font-weight: 700;
  line-height: 1.8;
  margin-bottom: 0.5em;
  text-align: center;
}
.hb_rule_playsheet_img{
  margin-bottom: 1.25em;
  width: 100%;
}
.hb_rule_playsheet_img img{
  aspect-ratio: 840 / 594;
  border: 1px solid #d7c9a8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: block;
  height: auto;
  width: 100%;
}
.hb_rule_playsheet_item a.hb_btn_primary{
  min-width: 100%;
}
@media screen and (max-width: 767px){
  .hb_rule_list{
    gap: var(--size-hb-30);
    margin-top: var(--size-hb-30);
  }
  .hb_rule_item{
    gap: var(--size-hb-15);
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hb_rule_item.hb_rule_item_playsheet{
    padding-top: var(--size-hb-30);
    grid-template-columns: 1fr;
  }
  .hb_rule_playsheet_list{
    grid-template-columns: 1fr;
  }
  .hb_rule_playsheet_img{
    max-width: 76.923vw; /* 390px時 300px */
  }
  .hb_rule_playsheet_item a.hb_btn_primary{
    --hb-btn-h: 9.744vw; /* 390px時 38px */
    font-size: var(--font-size-hb-xl);
    min-width: 71.795vw; /* 390px時 280px */
  }
  .hb_rule_playsheet_item a.hb_btn_primary span{
    width: 43.59vw; /* 390px時 170px */
  }
}


/* =======================================
  06. Page（お問い合わせ）.page_hb_inquiry
======================================= */
/* ------ 共通 -------*/
.hb_inquiry_txt_box{
  line-height: 1.9;
}
.hb_inquiry_txt_box .hb_txt_link{
  text-underline-offset: 0.2em;
}
@media screen and (max-width: 767px){
  .hb_inquiry_txt_box{
    font-size: var(--font-size-hb-md);
  }
}

/* ------ #hb_sec_inquiry_privacy -------*/
.hb_inquiry_addr_box{
  background-color: rgba(255, 255, 255, 0.6);
  border-left: 4px solid var(--color-hb-yellow);
  margin-top: var(--size-hb-15);
  padding: var(--size-hb-15) var(--size-hb-20);
}
.hb_inquiry_addr_box strong{
  font-weight: 700;
}
@media screen and (max-width: 767px){
  .hb_inquiry_addr_box{
    border-left-width: 3px;
  }
}

/* ------ #hb_sec_inquiry_contact -------*/
.hb_inquiry_note_box{
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(181, 134, 28, 0.55);
  margin-top: var(--size-hb-20);
  padding: var(--size-hb-15) var(--size-hb-25);
}
#hb_sec_inquiry_contact .hb_link_box{
  margin-top: var(--size-hb-50);
}
#hb_sec_inquiry_contact a.hb_btn_primary.hb_btn_large{
  font-size: var(--font-size-hb-lg);
  padding: 0 2.2em;
  gap: 0.5em;
  width: auto;
}
#hb_sec_inquiry_contact a.hb_btn_primary.hb_btn_large span{
  width: auto;
}
#hb_sec_inquiry_contact a.hb_btn_primary.hb_btn_large::after{
  width: var(--size-hb-30);
}
@media screen and (max-width: 767px){
  #hb_sec_inquiry_contact .hb_ttl_sub.hb_ttl_sub_large span{
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
  .hb_inquiry_note_box{
    margin-top: var(--size-hb-15);
    padding: var(--size-hb-10) var(--size-hb-15);
  }
  #hb_sec_inquiry_contact .hb_link_box{
    margin-top: var(--size-hb-30);
  }
  #hb_sec_inquiry_contact a.hb_btn_primary.hb_btn_large{
    --hb-btn-h: 15.385vw; /* 390px時 60px（2行分） */
    font-size: var(--font-size-hb-lg);
    line-height: 1.6;
    padding: 0.3em calc(var(--hb-btn-tip) + 0.5em);
    width: 100%;
  }
}


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


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


/* =======================================
  06. Page（商品情報）.page_hb_product_list / .page_hb_product_detail
======================================= */
/* ------ .page_hb_product_list（一覧） -------*/
.page_hb_product_list .hb_ttl_main ruby[data-ruby]::before {
  letter-spacing: 0.5em;
  left: 49%;
}

/* ------ .page_hb_product_detail（詳細） -------*/
#hb_sec_product_detail .hb_bg_primary_inner{
  padding-left: var(--size-hb-50);
  padding-right: var(--size-hb-50);
}
@media screen and (max-width: 767px){
  #hb_sec_product_detail .hb_bg_primary_inner{
    padding-top: var(--size-hb-15);
    padding-left: 2em;
    padding-right: 2em;
  }
}

/* .hb_product_detail_box（画像＋商品情報） */
.hb_product_detail_box{
  align-items: start;
  display: grid;
  gap: var(--size-hb-20);
  grid-template-columns: min(35.849vw, 380px) 1fr; /* 画像はPCで400px */
}
@media screen and (max-width: 767px){
  .hb_product_detail_box{
    gap: var(--size-hb-15);
    grid-template-columns: 1fr;
  }
}

/* .hb_product_img（正方形） */
.hb_product_img{
  aspect-ratio: 1 / 1;
}
.hb_product_img img{
  height: 100%;
  object-fit: contain;
  width: 100%;
}
@media screen and (max-width: 767px){
  .hb_product_img{
    margin: 0 auto;
    width: 100%;
  }
}

/* .hb_product_detail_cat（カテゴリ：.hb_ttl_sub のプレートを左寄せで使用） */
.hb_ttl_sub.hb_product_detail_cat{
  margin-bottom: 0.5em;
  text-align: left;
}
.hb_ttl_sub.hb_product_detail_cat span{
  min-width: min(28.302vw, 300px);
  text-align: center;
}
@media screen and (max-width: 767px){
  .hb_ttl_sub.hb_product_detail_cat span{
    min-width: 46.154vw; /* 390px時 180px */
  }
}

/* .hb_product_detail_ttl（商品名：h1） */
.hb_product_detail_ttl{
  font-size: var(--font-size-hb-3xl);
  letter-spacing: 0.1em;
  line-height: 1.7;
  margin-bottom: var(--size-hb-30);
}
@media screen and (max-width: 767px){
  .hb_product_detail_ttl{
    font-size: var(--font-size-hb-2xl);
    margin-bottom: var(--size-hb-20);
  }
}

/* .hb_product_detail_item（見出し＋内容のまとまり） */
.horobeat_wrapper .hb_product_detail_txt{
  font-size: var(--font-size-hb-md);
  letter-spacing: 0.1em;
  line-height: 1.9;
}

/* 商品説明 */
.horobeat_wrapper .hb_list_box.hb_product_detail_txt{
  line-height: 1.9;
}

/* .hb_secret_box（シークレットカード） */
.hb_secret_box{
  container-type: inline-size; /* ピックアップ枠のカード幅の基準 */
  display: flex;
  flex-direction: column;
  gap: var(--size-hb-30);
}
/* .hb_card_pickup（ピックアップ枠） */
#hb_sec_product_detail .hb_card_pickup .hb_bg_primary_inner{
  padding: var(--size-hb-30) var(--size-hb-30) var(--size-hb-20);
}
/* 2枚で折り返し・中央そろえ（幅は枠の外のカードと同じ） */
.hb_card_pickup .hb_card_list_box.col3{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.hb_card_pickup .hb_card_list_box.col3 .hb_card_item{
  width: calc((100cqw - var(--size-hb-15) * 2) / 3);
}
.horobeat_wrapper .hb_card_pickup_credit{
  font-size: var(--font-size-hb-xs);
  letter-spacing: 0.1em;
  margin-top: 1em;
  text-align: right;
}
@media screen and (max-width: 767px){
  #hb_sec_product_detail .hb_card_pickup .hb_bg_primary_inner{
    padding: var(--size-hb-20) var(--size-hb-20) var(--size-hb-10);
  }
  .hb_card_pickup .hb_card_list_box.col3 .hb_card_item{
    width: calc((100cqw - var(--size-hb-10) * 2) / 3);
  }
}

/* .hb_product_detail_card_box（収録カード） */
.hb_product_detail_card_box .hb_card_list_box{
  gap: var(--size-hb-20);
}
@media screen and (max-width: 767px){
  .hb_product_detail_card_box .hb_card_list_box{
    gap: var(--size-hb-10);
  }
}

#hb_sec_product_detail .hb_link_box{
  flex-wrap: wrap;
  margin-top: var(--size-hb-20);
}
@media screen and (max-width: 767px){
  #hb_sec_product_detail .hb_link_box{
    margin-top: var(--size-hb-10);
  }
}
/* 購入・カードリストのボタン：標準のボタンと同じ大きさにする */
@media screen and (min-width: 768px){
  #hb_sec_product_detail a.hb_btn_primary.hb_btn_small{
    --hb-btn-h: min(4.245vw, 45px);     /* 高さ 45px */
    font-size: var(--font-size-hb-lg);   /* 20px */
    min-width: min(30.189vw, 320px);     /* 幅 320px */
  }
}


/* =======================================
  06. Page（イベント）
  .page_hb_event_list / .page_hb_event_article / .page_hb_event_search
======================================= */
/* ------ .page_hb_event_search（検索） -------*/
.horobeat_wrapper .hb_event_search_note_txt{
  font-size: var(--font-size-hb-md);
  line-height: 2.2;
  text-align: center;
}
.hb_event_search_note_txt strong{
  background: linear-gradient(transparent 68%, rgba(233, 196, 106, 0.55) 68%);
  font-style: normal;
  font-weight: 700;
  padding: 0 0.1em;
}
@media screen and (max-width: 767px){
  .hb_event_search_note{
    margin-top: var(--size-hb-40);
  }
  .horobeat_wrapper .hb_event_search_note_txt{
    font-size: var(--font-size-hb-base);
    text-align: left;
  }
  .hb_event_search_note_txt .txt_small{
    display: block;
    margin-top: 0.5em;
  }
}

/* 検索結果（日付ごとのまとまり） */
.hb_event_search_day + .hb_event_search_day{
  margin-top: var(--size-hb-60);
}
.hb_event_search_day.is-hidden,
.hb_event_search_item.is-hidden{
  display: none;
}

/* 日付（.hb_ttl_sub の帯を使う） */
.hb_event_search_date{
  font-size: var(--font-size-hb-xl);
  margin-bottom: 1em;
}
.hb_event_search_week{
  font-size: 0.75em;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px){
  .hb_event_search_date span{
    height: var(--size-hb-60);
  }
}

/* .hb_event_search_result（検索結果全体）
   色は daytime.css / night.css の「06. Page（イベント）」で指定 */
.hb_event_search_result{
  color: var(--hb-event-search-txt);
}

/* .hb_event_search_list_box（店舗の一覧） */
.hb_event_search_list_box{
  display: flex;
  flex-direction: column;
  gap: var(--size-hb-25);
}
.horobeat_wrapper .hb_event_search_item{
  background-color: var(--hb-event-search-bg);
  border: 2.5px solid var(--hb-event-search-border);
}

/* 店舗名・住所・MAP */
.hb_event_search_head{
  align-items: center;
  display: flex;
  gap: var(--size-hb-20);
  justify-content: space-between;
  padding: var(--size-hb-20) var(--size-hb-30);
}
.hb_event_search_name{
  color: var(--hb-event-search-name);
  font-family: var(--font-hb-mincho);
  font-size: var(--font-size-hb-xl);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.horobeat_wrapper .hb_event_search_address{
  color: var(--hb-event-search-address);
  font-family: var(--font-hb-gothic);
  font-size: var(--font-size-hb-xs);
  letter-spacing: 0.05em;
  line-height: 1.6;
  margin: 0.3em 0 0;
}
.hb_event_search_map{
  align-items: center;
  background-color: var(--hb-event-search-map-bg);
  color: var(--hb-event-search-map-color);
  display: flex;
  flex: none;
  font-family: var(--font-hb-gothic);
  font-size: var(--font-size-hb-xs);
  font-weight: 700;
  gap: 0.5em;
  letter-spacing: 0.08em;
  padding: 0.6em 1em;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.hb_event_search_map:visited{
  color: var(--hb-event-search-map-color);
}
/* ピンのアイコン */
.hb_event_search_map::before{
  background-color: var(--hb-event-search-map-icon);
  content: '';
  flex: none;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
  height: 1.4em;
  width: 1.2em;
}
@media (hover: hover){
  .hb_event_search_map:hover{
    opacity: 0.7;
  }
}

/* .hb_event_search_data（イベント名〜応募方法：PCは5列） */
/* 2026-10-21 変更: フォーマットを出さなくなったので6列 → 5列。広い列をイベント名に（イベント名・受付時間・大会開始・参加制限・応募方法） */
.hb_event_search_data{
  border-top: 1px solid var(--hb-event-search-line);
  display: grid;
  font-family: var(--font-hb-gothic);
  grid-template-columns: minmax(0, 31fr) minmax(0, 13fr) minmax(0, 13fr) minmax(0, 15fr) minmax(0, 15fr);
  margin: 0;
  text-align: center;
}
.hb_event_search_data_item{
  display: flex;
  flex-direction: column;
}
.hb_event_search_data_item + .hb_event_search_data_item{
  border-left: 1px solid var(--hb-event-search-line);
}
.hb_event_search_data_ttl{
  background-color: var(--hb-event-search-ttl-bg);
  border-bottom: 1px solid var(--hb-event-search-line);
  color: var(--hb-event-search-ttl-color);
  font-size: var(--font-size-hb-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  padding: 0.9em 0.3em 0.5em; /* 上はルビの分 */
}
.hb_event_search_data_txt{
  align-items: center;
  color: var(--hb-event-search-txt);
  display: flex;
  flex-grow: 1;
  font-size: var(--font-size-hb-base);
  justify-content: center;
  line-height: 1.9;
  margin: 0;
  padding: 1em 0.5em 0.8em;
}
/* ルビと文字が別々に並ばないよう、中身は span でまとめる */
.hb_event_search_data_txt > span{
  display: block;
}
.hb_event_search_data_txt.hb_event_search_cat{
  font-weight: 700;
}
@media screen and (max-width: 767px){
  .hb_event_search_day + .hb_event_search_day{
    margin-top: var(--size-hb-40);
  }
  .hb_event_search_list_box{
    gap: var(--size-hb-15);
  }
  .hb_event_search_head{
    align-items: flex-start;
    gap: var(--size-hb-10);
    padding: var(--size-hb-15);
  }
  .hb_event_search_name{
    font-size: var(--font-size-hb-lg);
  }
  .hb_event_search_map{
    padding: 0.6em 0.8em;
  }
  /* スマホは イベント名（1段まるごと）＋ 2列×2段 */
  /* 2026-10-21 変更: 6項目の3列×2段 → 5項目なので、イベント名を1段に、残り4つを2列×2段に */
  .hb_event_search_data{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hb_event_search_data_item:first-child{
    grid-column: 1 / -1;
  }
  .hb_event_search_data_item:nth-child(2n){
    border-left: 0;
  }
  .hb_event_search_data_item:nth-child(n + 2){
    border-top: 1px solid var(--hb-event-search-line);
  }
  .hb_event_search_data_ttl{
    letter-spacing: 0.05em;
  }
  .hb_event_search_data_txt{
    padding: 1em 0.3em 0.8em;
  }
  .hb_event_search_data_txt small{
    display: block;
  }
  .hb_event_search_data_txt small ruby[data-ruby]::before{
    letter-spacing: 0.01em;
  }
}



/* =======================================
  06. Page（お知らせ）.page_hb_news_list / .page_hb_news_article
======================================= */
/* ------ #hb_sec_news_list（一覧） -------*/
#hb_sec_news_list .container{
  max-width: 1060px;
}

/* ------ #hb_sec_news_article（詳細） -------*/
/* 記事ごとの店舗一覧の表の列幅 */
/* 261015：ホロビートお披露目体験会 TSUTAYA他各店舗 */
.hb_table_store.hb_table_261015_01 .th_date {
  width: 12%;
}
.hb_table_store.hb_table_261015_01 .th_store {
  width: 35%;
}
@media screen and (max-width: 767px) {
  .hb_table_store.hb_table_261015_01 .th_date {
    width: auto;
  }
}


/* =======================================
  07. Utilities（text / margin / align / pc・sp）
======================================= */
/* ------ text size -------*/
.txt_small{
  font-size: 90%;
}
.txt_xsmall{
  font-size: 80%;
}
.txt_large{
  font-size: 150%;
}

/* ------ text color -------*/
.txt_red{
  color: var(--color-hb-red);
}
.txt_green{
  color: var(--color-hb-green);
}
.txt_blue{
  color: var(--color-hb-blue);
}

/* ------ text（改行させない） -------*/
.txt_nowrap{
  white-space: nowrap;
}

/* ------ margin -------*/
.section_mb{
  margin-bottom: var(--size-hb-80);
}
.case_mb{
  margin-bottom: var(--size-hb-50);
}
.box_mb{
  margin-bottom: var(--size-hb-30);
}
@media screen and (max-width: 767px){
  .section_mb{
    margin-bottom: var(--size-hb-50);
  }
  .case_mb{
    margin-bottom: var(--size-hb-30);
  }
  .box_mb{
    margin-bottom: var(--size-hb-20);
  }
}

/* ------ align -------*/
.center{
  text-align: center;
}

/* ------ pc・sp -------*/
@media screen and (min-width: 768px) {
  .sp { display: none !important; }
}
@media screen and (max-width: 767px) {
  .pc { display: none !important; }
}