@charset "utf-8";
* {
  box-sizing: border-box;
}

.navInner h2.no_open a {
  color: #333;
  display: block;
  width: 100%;
  padding: 0 !important;
}
.navInner h2.no_open::before, .navInner h2.no_open::after {
  content: none;
}
.navWrap.panel-active {
  overflow-y: auto;
  z-index: 13;
}
@media screen and (max-width: 1199px) {
  .navInner li a {
    padding: 15px 15px 15px 0 !important;
  }
  .navInner h2 {
    padding-right: 15px;
  }
  .navInner .accordion i {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(50%);
    font-size: 14px;
    margin-top: -7px;
  }
  .navInner h2::before {
    top: 60%;
  }
  .navInner h2::after {
    top: 60%;
  }
}
.lp_wrap{
  min-height: calc(100vh - 105px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lp_wrap img{
 width: 100%;
 vertical-align: bottom;
}
.lp_wrap li{
  list-style-type: none;
}
.lp_wrap a{
  text-decoration: none;
}


.lp_fv{
  --fv-stage-width: max(100%, calc((100dvh - 105px) * 1.6));
  --fv-stage-shift-y: 40px;
  --fv-light-size: clamp(82px, 8vw, 120px);
  --fv-light-left-x: 8.3%;
  --fv-light-left-y: 15%;
  --fv-light-right-x: 71.5%;
  --fv-light-right-y: 5.3%;
  --fv-light-bottom-x: 99%;
  --fv-light-bottom-y: 47%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  flex: 1;
  display: flex;
  align-items: center;
  background-image: none;

}

.fv_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.fv_bg-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.fv_svg-light {
  mix-blend-mode: screen;
}

.fv_svg-light-sp-right {
  display: none;
}

.fv_svg-spark {
  opacity: 0.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: svgFireworkCrackle 5.2s infinite ease-in-out;
  will-change: opacity, transform;
}


.fv_svg-spark-delay {
  animation-delay: 1.8s;
}

.fv_svg-spark-delay-center {
  animation-delay: 0.8s;
}

.fv_svg-spark-delay-sp {
  animation-delay: 2.6s;
}
.fv_fireworks {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.lp_wrap::before,
.lp_fv::before,
.lp_fv::after {
  content: none;
  display: none;
}
.lp_fv .content_wrap{
  max-width: 1020px;
  width: 100%;
  margin: 100px auto 0;
  padding: 0;
  position: relative;
  z-index: 2;
}
.fv_logo-img{
  max-width: 1000px;
  width: 100%;
  margin: 0 auto 50px;
  opacity: 0;
  transform: translateY(34px);
  animation: fvFadeUp 0.9s ease-out 0.15s forwards;
}
.fv_date{
  max-width: 740px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 0 auto 60px;
  opacity: 0;
  transform: translateY(34px);
  animation: fvFadeUp 0.9s ease-out 0.35s forwards;
}
.fv_date-ttl{
  background-color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  color: #FFF;
  padding: 20px 30px;
}
.fv_date-text{
  font-family: "Montserrat", sans-serif;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  color: #000;
  letter-spacing: 0.025em;
  white-space: nowrap;
}
.fv_date-text .num{
  font-family: "Montserrat", sans-serif;
  font-size: 42px;
  font-weight: bold;
  text-align: center;
  color: #000;
}

.fv_text{
  max-width: 740px;
  width: 100%;
  background-color: #FFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: bold;
  color: #b82d8f;
  text-align: center;
  border-radius: 20px;
  padding: 20px 0;
  margin: 0 auto;
  box-shadow:
    0 0 4px rgba(184, 45, 143, 0.45),
    0 0 10px rgba(184, 45, 143, 0.5),
    0 0 18px rgba(184, 45, 143, 0.25);
  opacity: 0;
  transform: translateY(34px);
  animation: fvFadeUp 0.9s ease-out 0.55s forwards;
}
.fv_copyright{
  position: absolute;
  right: max(20px, calc((100% - 1200px) / 2));
  bottom: 20px;
  z-index: 3;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #000;
}



.lp_fv .content_wrap::before {
  content: none !important;
}


.br-sp {
    display: none;
  }


@keyframes svgFireworkCrackle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.72) rotate(0deg);
  }
  5% {
    opacity: 0.9;
    transform: scale(1.06) rotate(4deg);
  }
  10% {
    opacity: 0.08;
    transform: scale(0.84) rotate(-2deg);
  }
  17% {
    opacity: 0.8;
    transform: scale(1.02) rotate(3deg);
  }
  24% {
    opacity: 0.08;
    transform: scale(0.86) rotate(-2deg);
  }
  31% {
    opacity: 0.7;
    transform: scale(1) rotate(3deg);
  }
  42% {
    opacity: 0.03;
    transform: scale(0.86) rotate(0deg);
  }
  84% {
    opacity: 0;
    transform: scale(0.72) rotate(0deg);
  }
}
@keyframes leftFireworkCrackle {
  0%, 100% {
    opacity: 0.12;
    transform: translate(-50%, -50%) translateZ(0) scale(0.86) rotate(0deg);
  }
  10% {
    opacity: 0.95;
    transform: translate(-50%, -50%) translateZ(0) scale(1.08) rotate(5deg);
  }
  18% {
    opacity: 0.25;
    transform: translate(-50%, -50%) translateZ(0) scale(0.92) rotate(-3deg);
  }
  31% {
    opacity: 0.85;
    transform: translate(-50%, -50%) translateZ(0) scale(1.04) rotate(2deg);
  }
  44% {
    opacity: 0.3;
    transform: translate(-50%, -50%) translateZ(0) scale(0.88) rotate(-2deg);
  }
  62% {
    opacity: 0.75;
    transform: translate(-50%, -50%) translateZ(0) scale(1.02) rotate(4deg);
  }
  76% {
    opacity: 0.28;
    transform: translate(-50%, -50%) translateZ(0) scale(0.9) rotate(0deg);
  }
}

@keyframes rightFireworkCrackle {
  0%, 100% {
    opacity: 0.12;
    transform: translate(50%, -50%) translateZ(0) scale(0.86) rotate(0deg);
  }
  12% {
    opacity: 0.95;
    transform: translate(50%, -50%) translateZ(0) scale(1.08) rotate(-5deg);
  }
  21% {
    opacity: 0.28;
    transform: translate(50%, -50%) translateZ(0) scale(0.92) rotate(3deg);
  }
  38% {
    opacity: 0.82;
    transform: translate(50%, -50%) translateZ(0) scale(1.04) rotate(-2deg);
  }
  50% {
    opacity: 0.3;
    transform: translate(50%, -50%) translateZ(0) scale(0.88) rotate(2deg);
  }
  68% {
    opacity: 0.72;
    transform: translate(50%, -50%) translateZ(0) scale(1.02) rotate(-4deg);
  }
  82% {
    opacity: 0.2;
    transform: translate(50%, -50%) translateZ(0) scale(0.9) rotate(0deg);
  }
}

@keyframes fvFadeUp {
  0% {
    opacity: 0;
    transform: translateY(34px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv_logo-img,
  .fv_date,
  .fv_text {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
/* responsive adjustments */
@media screen and (max-width: 1024px) {
  .lp_fv {
    --fv-stage-width: max(100%, calc((100dvh - 105px) * 1.6));
    --fv-stage-shift-y: 30px;
    --fv-light-size: clamp(82px, 11.8vw, 120px);
    --fv-light-left-x: 8.3%;
    --fv-light-left-y: 16.8%;
    --fv-light-right-x: 71.5%;
    --fv-light-right-y: 5.3%;
    --fv-light-bottom-y: 43%;
  }

  .lp_fv .content_wrap {
    padding: 0px 20px;
    margin: 0 auto;
  }

  .fv_logo-img {
    max-width: 820px;
    margin-bottom: 40px;
  }

  .fv_date {
    max-width: 680px;
    margin-bottom: 50px;
  }

  .fv_date-ttl {
    font-size: 28px;
    padding: 10px 20px;
  }

  .fv_date-text {
    font-size: 32px;
  }

  .fv_date-text .num {
    font-size: 38px;
  }

  .fv_text {
    max-width: 680px;
    font-size: 28px;
    padding: 20px 20px;
  }

}

@media screen and (max-width: 910px) {
  .fv_bg-svg {
    transform: none;
  }
}

@media screen and (max-width: 767px) {
  .lp_wrap {
    min-height: auto;
  }
  .br-sp {
    display: block;
  }

  .lp_fv {
    --fv-stage-width: max(100%, calc((100dvh - 105px) * 1.6));
    --fv-stage-shift-y: 0px;
    --fv-light-size: clamp(70px, 20vw, 100px);
    --fv-light-left-x: 39%;
    --fv-light-left-y: 12%;
    --fv-light-right-x: 90%;
    --fv-light-right-y: 18%;
    --fv-light-bottom-x: 91%;
    --fv-light-bottom-y: 42%;
    flex: none;
    min-height: clamp(600px, 132vw, 720px);
    align-items: center;
    padding: 30px 0;
  }

  .lp_fv .content_wrap {
    padding: 0 20px;
  }

  .fv_logo-img {
    margin-bottom: 30px;
  }

  .fv_date {
    flex-direction: row;
    gap: 10px;
    margin-bottom: 30px;
  }

  .fv_date-ttl {
    font-size: 18px;
    padding: 10px 20px;
  }

  .fv_date-text {
    font-size: 20px;
    line-height: 1.25;
  }

  .fv_date-text .num {
    font-size: 24px;
  }

  .fv_text {
    max-width: 100%;
    font-size: 18px;
    line-height: 1.35;
    border-radius: 10px;
    padding: 10px 20px;
  }

  .fv_svg-light-sp-right {
    display: block;
  }
}

@media screen and (max-width: 480px) {
  .lp_fv {
    --fv-stage-shift-y: -10px;
    padding: 30px 0;
    min-height: 600px;
  }

  .fv_logo-img {
    margin-bottom: 30px;
  }

  .fv_date {
    gap: 10px;
    margin-bottom: 30px;
  }

  .fv_date-ttl {
    font-size: 15px;
    padding: 10px 10px;
  }

  .fv_date-text {
    font-size: 17px;
  }

  .fv_date-text .num {
    font-size: 22px;
  }

  .fv_text {
    font-size: 16px;
    padding: 10px 10px;
  }

}

/* ==================================================
   本番情報コンテンツ
   ================================================== */

/* MVは通常どおりスクロールさせ、背景レイヤーだけを固定する
-------------------------------------------------- */
.lp_fv{
  min-height: calc(100vh - 60px);
}
.fv_bg{
  position: fixed;
  top: 60px;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
}
/* canvasは置換要素で inset では伸びないため、サイズを明示する */
.fv_fireworks{
  position: fixed;
  top: 60px;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100%;
  height: calc(100vh - 60px);
}
/* z-index は付けない。付けるとスタッキングコンテキストができ、
   絞り込みパネルがヘッダー(z-index:1000)より前面に出せなくなる */
.lp_contents{
  position: relative;
  width: 100%;
}
/* ページ内リンクの着地位置がヘッダーに隠れないようにする */
#booth,
#map{
  scroll-margin-top: 80px;
}
/* LINE UP は見出しそのものが飛び先なので、上に余裕を持たせる */
#lineup{
  scroll-margin-top: 120px;
}
/* 固定したFVがフッターに重ならないようにする */
footer,
.copyright{
  position: relative;
  z-index: 2;
}
.lp_contents .content_wrap{
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

/* スクロールで表示するアニメーション
-------------------------------------------------- */
.js-reveal{
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}
.js-reveal.is-shown{
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}
/* 横並びのブロックは少しずらして表示する */
.map_list li.js-reveal:nth-child(2),
.tokuten + .tokuten.js-reveal{
  transition-delay: 0.15s;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal,
  .js-reveal.is-shown{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* セクション見出し
-------------------------------------------------- */
.sec_ttl{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 48px;
  font-weight: bold;
  line-height: 1.7;
  text-align: center;
  color: #FFF;
  text-shadow:
    0 0 6px rgba(185, 44, 143, 0.9),
    0 0 16px rgba(185, 44, 143, 0.7),
    0 0 30px rgba(185, 44, 143, 0.45);
}
.sec_ttl-en{
  font-family: "Montserrat", sans-serif;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.sec_ttl-en::after{
  content: "";
  display: block;
  width: 154px;
  height: 2px;
  background-color: #FFF;
  margin: 16px auto 0;
  box-shadow:
    0 0 6px rgba(185, 44, 143, 0.9),
    0 0 14px rgba(185, 44, 143, 0.6);
}

/* 会場写真
-------------------------------------------------- */
.fes_photo picture{
  display: block;
}
.fes_photo img{
  display: block;
  width: 100%;
  height: auto;
}

/* ダーツハイブブース
-------------------------------------------------- */
.lp_booth{
  background-color: rgba(19, 8, 54, 0.7);
  padding: 70px 0 80px;
}
.lp_booth .sec_ttl{
  margin-bottom: 80px;
}
.lp_booth .sec_ttl-en{
  margin: 84px 0 0;
}

/* ダーツハイブブース > 注意事項
-------------------------------------------------- */
.caution_panel{
  background-image: repeating-linear-gradient(-45deg, #f3c91c 0 11px, #000 11px 24px);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 30px;
}
.caution_inner{
  background-color: #FFF;
  border-radius: 6px;
  padding: 30px;
}
.caution_ttl{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.7;
  text-align: center;
  color: #000;
  margin-bottom: 26px;
}
.caution_ttl img{
  width: 26px;
  flex-shrink: 0;
}
.caution_lead{
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
  text-align: center;
  color: #000;
  margin-bottom: 30px;
}
.caution_red{
  color: #cc0000;
}
.time_list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.time_list li{
  background-color: #f5f5f5;
  text-align: center;
  padding: 16px 10px;
}
.time_ttl{
  font-size: 17px;
  font-weight: bold;
  line-height: 1.7;
  color: #000;
}
.time_num{
  font-size: 30px;
  font-weight: bold;
  line-height: 1.7;
  color: #000;
  margin-top: 8px;
}
.time_num span{
  font-size: 16px;
  font-weight: bold;
}
.time_sub{
  font-size: 14px;
  font-weight: bold;
  line-height: 1.7;
  color: #000;
  margin-top: 0;
}
.caution_link{
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.caution_link .link_btn{
  max-width: 590px;
  width: 100%;
  background-color: #FFF;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* ダーツハイブブース > 購入特典
-------------------------------------------------- */
.tokuten{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 70px;
  background-color: #f9f0d3;
  border-radius: 20px;
  padding: 40px;
}
.tokuten + .tokuten{
  margin-top: 20px;
}
.tokuten_body{
  flex: 1;
}
.tokuten_ttl{
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 34px;
  font-weight: bold;
  line-height: 1.7;
  color: #b92c8f;
  margin-bottom: 30px;
}
.tokuten_ttl img{
  width: 31px;
  flex-shrink: 0;
}
.tokuten_lead{
  background-color: #FFF;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  color: #333333;
  padding: 20px;
  margin-bottom: 20px;
}
.tokuten_lead p + p{
  margin-top: 28px;
}
.lp_contents .caution_link-x{
  color: #3b3a7e;
  text-decoration: underline;
}
.tokuten_note li{
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  color: #333333;
}
.tokuten_img{
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 480px;
  flex-shrink: 0;
}
.tokuten_img li{
  position: relative;
  width: 233px;
}
.lp_contents .tokuten_img-single li{
  width: 476px;
}
.tokuten_side{
  position: absolute;
  top: -12px;
  left: -22px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background-color: #000;
  border-radius: 50%;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.7;
  color: #FFF;
}

/* ダーツハイブブース > ページ内リンク
-------------------------------------------------- */
.link_btn{
  display: block;
  position: relative;
  background-color: #FFF;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
  color: #262626;
  font-weight: bold;
  padding: 15px 50px;
  cursor: pointer;
  transition: 0.2s;
}
.link_btn:hover{
  background-color: #333333;
  color: #FFF;
}
.link_btn:hover i{
  color: #FFF;
}
.lp_contents .link_icon{
  position: absolute;
  top: 50%;
  left: 26px;
  width: 24px;
  margin-top: -11px;
}
.link_btn i{
  position: absolute;
  top: 50%;
  right: 26px;
  font-size: 16px;
  color: #333333;
  margin-top: -8px;
}
.note_list li{
  font-size: 14px;
  line-height: 1.7;
  color: #333333;
}

/* カテゴリー
-------------------------------------------------- */
.lp_category{
  background-color: rgba(19, 8, 54, 0.7);
  padding: 0 0 60px;
}
.cat_ttl{
  display: none;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.7;
  text-align: center;
  color: #333333;
  margin-bottom: 30px;
}
/* 絞り込みUI */
.cat_trigger{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  background-color: #FFF;
  border: none;
  border-radius: 50px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.7;
  color: #333333;
  padding: 30px 20px;
  margin: 0 auto;
  cursor: pointer;
  transition: 0.2s;
}
.cat_trigger:hover{
  background-color: #333333;
  color: #FFF;
}
.cat_trigger:hover .btn_icon,
.cat_apply:hover .btn_icon{
  filter: brightness(0) invert(1);
}
.cat_trigger i{
  font-size: 14px;
  color: #b92c8f;
}
.cat_overlay{
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2900;
  background-color: rgba(0, 0, 0, 0.68);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.cat_overlay.is-open{
  opacity: 1;
  visibility: visible;
}
/* .cat_modal が位置と開閉アニメーションを担う。×はこの中に入れてパネルに追従させる */
.cat_modal{
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 3000;
  width: min(1200px, calc(100vw - 80px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -46%) scale(0.98);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s ease;
}
.cat_modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.cat_panel{
  max-height: min(80vh, 620px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #FFF;
  border-radius: 6px;
  padding: 30px;
}
.cat_panel-head{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 22px;
}
.cat_panel-ttl{
  font-size: 18px;
  font-weight: bold;
  line-height: 1.7;
  color: #333333;
}
/* 「×」はパネルの右上外側に白で置く */
.cat_panel-close{
  position: absolute;
  top: -46px;
  right: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background-color: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #FFF;
  padding: 0;
  cursor: pointer;
  transition: 0.2s;
}
.cat_panel-close:hover{
  opacity: 0.7;
}
.cat_list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 20px;
}
.cat_btn{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 62px;
  background-color: #FFF;
  border: 2px solid #b92c8f;
  border-radius: 5px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.7;
  text-align: center;
  color: #b92c8f;
  padding: 8px 18px;
  cursor: pointer;
  transition: 0.2s;
}
.cat_btn i{
  display: none;
  position: absolute;
  top: 50%;
  left: 18px;
  font-size: 16px;
  transform: translateY(-50%);
}
/* hover で背景色と文字色を反転させる */
.cat_btn:hover{
  background-color: #b92c8f;
  color: #FFF;
}
.cat_btn-all{
  border-color: #333333;
  color: #333333;
}
.cat_btn.is-active{
  background-color: #b92c8f;
  border-color: #b92c8f;
  font-weight: bold;
  color: #FFF;
}
.cat_btn.is-active i{
  display: inline-block;
}
.cat_btn-all:hover{
  background-color: #333333;
  color: #FFF;
}
.cat_btn.is-active:hover{
  background-color: #FFF;
  color: #b92c8f;
}
/* 「すべて」は絞り込み解除ボタンのため、選択中でも塗り・チェックを付けない */
.cat_btn-all.is-active{
  background-color: #FFF;
  border-color: #333333;
  color: #333333;
}
.cat_btn-all.is-active i{
  display: none;
}
.cat_btn-all.is-active:hover{
  background-color: #333333;
  color: #FFF;
}
.cat_apply{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  background-color: #FFF;
  border: 1px solid #e5e5e5;
  border-radius: 50px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.7;
  color: #333333;
  padding: 15px 20px;
  margin: 24px auto 0;
  cursor: pointer;
  transition: 0.2s;
}
/* 絞り込むボタンのアイコン画像（56×36pxを高さ基準で縮小） */
.cat_trigger .btn_icon,
.cat_apply .btn_icon{
  width: 26px;
  height: auto;
  flex-shrink: 0;
}
.cat_apply:hover{
  background-color: #333333;
  border-color: #333333;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  color: #FFF;
}
/* 配色は入れ替え：絞り込む＝白 / 一覧に戻る＝ピンク
   幅は上部のトリガー（max-width 520px）に揃える */
.item_back .cat_trigger{
  width: 100%;
  max-width: 520px;
  min-width: 0;
  background-color: #FFF;
  color: #333333;
}
.item_back .cat_trigger i{
  color: #b92c8f;
}
.item_back .cat_trigger:hover{
  background-color: #333333;
  color: #FFF;
}

/* 商品一覧
-------------------------------------------------- */
.lp_item{
  background-color: rgba(19, 8, 54, 0.7);
  padding: 40px 0 80px;
}
.item_lead{
  font-size: 14px;
  line-height: 1.7;
  color: #FFF;
  margin-bottom: 40px;
}
.item_list{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 70px 30px;
}
.item_visual{
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #FFF;
  border-radius: 5px;
  padding: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}
/* タグは重ねて配置し、白ボックスの高さに影響させない */
.item_labels{
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 5px;
}
/* タグは .item_labels に修飾クラスを付けると疑似要素で表示される
   item_labels-limited  → 日本ダーツ祭り2026 限定商品（ピンク）
   item_labels-preorder → 先行販売（ブルーグリーン） */
.item_labels::before,
.item_labels::after{
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.7;
  color: #FFF;
  padding: 2px 8px;
}
.item_labels-limited::before{
  content: "日本ダーツ祭り2026 限定商品";
  background-color: #b92c8f;
}
.item_labels-preorder::after{
  content: "先行販売";
  background-color: #338ea5;
}
.lp_contents .item_img{
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
}
/* 購入制限も画像に重ねる（白ボックスの高さに影響させない） */
.item_limit{
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  line-height: 1.7;
  color: #333333;
}
.item_limit img{
  width: 17px;
  flex-shrink: 0;
}
a.item_visual{
  transition: 0.2s;
}
a.item_visual:hover{
  opacity: 0.85;
}
.item_name{
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  height: 4.8em;
  color: #FFF;
  margin-bottom: 20px;
}
.item_name a{
  color: #FFF;
}
.item_name a:hover{
  text-decoration: underline;
}
.item_price{
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6em;
  height: 3.2em;
  color: #FFF;
  margin-bottom: 20px;
}
.item_price span{
  font-size: 13px;
  font-weight: 500;
}
.item_link{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.item_link a{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  line-height: 1.7;
  color: #FFF;
}
.item_link a:hover{
  text-decoration: underline;
}
.item_link-site i{
  color: #338ea5;
}
.item_link-digital i{
  color: #b92c8f;
}
/* 商品一覧に戻る */
.item_back{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 60px;
}
.item_back-btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  background-color: #b92c8f;
  border-radius: 50px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.7;
  text-align: center;
  color: #FFF;
  padding: 15px 30px;
  transition: 0.2s;
}
.item_back-btn:hover{
  background-color: #FFF;
  color: #b92c8f;
}
.item_back-btn:hover i{
  color: #b92c8f;
}
.item_back-btn i{
  font-size: 14px;
  color: #FFF;
}
.item_empty{
  display: none;
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
  color: #FFF;
  padding: 40px 0;
}

.link-digicon{
	display: block;
	width: 100%;
	background: #020026;
	color: #ffffff;
	text-align: center;
	font-size: 14px;
	line-height: 1em;
	border-radius: 5px;
	padding: 12px 0;
	position: relative;
	transition: 0.2s;
}
.link-digicon:hover{
	background: #b92c8f;
}

.link-digicon i{
	color: #862574;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	transition: 0.2s;
}
.link-digicon:hover i{
	right: 15px;
	color: #ffffff;
}

.link-digicon.noMove:hover i{
	right: 20px;
}

/* ブースマップ
-------------------------------------------------- */
.lp_map{
  background-color: rgba(19, 8, 54, 0.7);
  padding: 80px 0 0;
}
.lp_map .sec_ttl{
  margin-bottom: 60px;
}
.map_list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.map_ttl{
  font-size: 18px;
  font-weight: bold;
  line-height: 1.7;
  text-align: center;
  color: #FFF;
  margin-bottom: 20px;
}
.map_img{
  background-color: #FFF;
  border-radius: 10px;
  padding: 40px;
}

/* 整理券・注意事項
-------------------------------------------------- */
.lp_info{
  background-color: rgba(19, 8, 54, 0.7);
  padding: 80px 0;
}
.info_box{
  background-color: #FFF;
  border-radius: 10px;
  padding: 40px;
  scroll-margin-top: 80px;
}
.info_box + .info_box{
  margin-top: 40px;
}
.info_ttl{
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 34px;
  font-weight: bold;
  line-height: 1.7;
  color: #b92c8f;
  margin-bottom: 30px;
}
.info_ttl img{
  width: 31px;
  flex-shrink: 0;
}

/* responsive adjustments
-------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .sec_ttl {
    font-size: 32px;
  }

  .sec_ttl-en {
    font-size: 26px;
  }

  .lp_booth .sec_ttl {
    margin-bottom: 55px;
  }

  .lp_booth .sec_ttl-en {
    margin: 60px 0 0;
  }

  .time_list {
    gap: 16px;
  }

  .time_num {
    font-size: 25px;
  }

  .caution_link {
    margin-top: 36px;
  }

  .tokuten {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    padding: 30px;
  }

  .tokuten_img {
    justify-content: center;
    gap: 50px;
  }

  .lp_contents .tokuten_img-single li {
    width: 100%;
    max-width: 476px;
  }

  .cat_list {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .item_list {
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 20px;
  }
}

@media screen and (max-width: 767px) {
  .sec_ttl {
    font-size: 24px;
  }

  .sec_ttl-en {
    font-size: 34px;
  }

  .lp_booth {
    padding: 45px 0 50px;
  }

  .lp_booth .sec_ttl {
    margin-bottom: 40px;
  }

  .lp_booth .sec_ttl-en {
    margin: 45px 0 0;
  }

  .sec_ttl-en::after {
    width: 110px;
    margin-top: 12px;
  }

  .caution_panel {
    border-radius: 8px;
    padding: 7px;
    margin-bottom: 20px;
  }

  .caution_inner {
    border-radius: 4px;
    padding: 20px;
  }

  .caution_ttl {
    font-size: 18px;
    gap: 12px;
    margin-bottom: 16px;
  }

  .caution_ttl img {
    width: 20px;
  }

  .caution_lead {
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
    margin-bottom: 20px;
  }

  .time_list {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .time_list li {
    padding: 14px 10px;
  }

  .time_num {
    font-size: 22px;
    margin-top: 4px;
  }

  .time_sub {
    margin-top: 4px;
  }

  .caution_link {
    margin-top: 24px;
  }

  .tokuten {
    border-radius: 10px;
    gap: 20px;
    padding: 20px;
  }

  .tokuten + .tokuten {
    margin-top: 16px;
  }

  .tokuten_lead p + p {
    margin-top: 18px;
  }

  .tokuten_ttl {
    font-size: 20px;
    gap: 10px;
    margin-bottom: 14px;
  }

  .tokuten_ttl img {
    width: 26px;
  }

  .lp_fv {
    min-height: clamp(600px, 132vw, 720px);
  }

  .fv_copyright {
    right: max(10px, calc((100% - 1020px) / 2));
    bottom: 10px;
    font-size: 12px;
  }

  .lp_contents .br-pc {
    display: none;
  }

  .tokuten_img {
    gap: 40px;
  }

  .tokuten_img li {
    width: calc(50% - 20px);
  }

  .lp_contents .tokuten_img-single li {
    width: 100%;
    max-width: 100%;
  }

  .link_btn {
    font-size: 13px;
    padding: 15px 40px;
  }

  .lp_contents .link_icon {
    left: 16px;
    width: 20px;
    margin-top: -9px;
  }

  .link_btn i {
    right: 18px;
  }

  .note_list li {
    line-height: 1.7;
  }

  /* SPは前後のセクションと繋げる */
  .lp_category {
    background-color: rgba(19, 8, 54, 0.7);
    padding: 0px 0 40px;
  }

  /* SP：カテゴリーは下から出るパネルで選択する
  -------------------------------------------------- */
  .cat_ttl {
    display: none;
  }

  .cat_trigger {
    padding: 14px 20px;
  }

  .cat_modal {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }

  .cat_modal.is-open {
    transform: translateY(0);
  }

  .cat_panel {
    max-height: 80vh;
    border-radius: 6px 6px 0 0;
    padding: 16px 20px 20px;
  }

  .cat_panel-head {
    justify-content: space-between;
    margin-bottom: 16px;
  }

  .cat_panel-ttl {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.7;
    color: #333333;
  }

  .cat_panel-close {
    top: -42px;
    right: 14px;
    width: 34px;
    height: 34px;
    font-size: 26px;
  }

  .cat_list {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cat_btn {
    min-height: 44px;
    font-size: 13px;
    padding: 8px 16px;
  }

  .cat_btn i {
    left: 14px;
    font-size: 14px;
  }

  .item_back .cat_trigger{
    width: 100%;
    min-width: 0;
  }

  .lp_item {
    padding: 30px 0 50px;
  }

  .item_lead {
    margin-bottom: 20px;
  }

  .item_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 15px
  }

  .item_visual {
    margin-bottom: 10px;
  }

  .item_labels {
    top: 8px;
    left: 8px;
    right: 8px;
    gap: 4px;
  }

  .item_labels::before,
  .item_labels::after {
    font-size: 9px;
    padding: 2px 6px;
  }

  .item_limit {
    bottom: 8px;
    left: 8px;
  }

  .item_limit img {
    width: 14px;
  }

  .item_name {
	display: -webkit-box; /* 必須 */
	-webkit-box-orient: vertical; /* 必須 */
	-webkit-line-clamp: 3; /* 行数を制限 */
	overflow: hidden; /* はみ出た部分を非表示 */
	height: 4.8em;
    font-size: 13px;
    margin-bottom: 10px;
  }

  .item_price {
    font-size: 13px;
    margin-bottom: 10px;
  }
  
  .item_price span{
  	font-size: 10px;
  }

  .item_link {
    gap: 4px 14px;
  }

  .item_link a {
    font-size: 13px;
    gap: 5px;
  }
  
  .link-digicon{
  	font-size: 12px;
  }
  
  .link-digicon i{
  	right: 10px;
  }
  
   .link-digicon:hover i,
   .link-digicon.noMove:hover i{
   	right: 10px;
   }

  .lp_map {
    padding: 50px 0 0;
  }

  .lp_map .sec_ttl {
    margin-bottom: 35px;
  }

  .map_list {
    grid-template-columns: 1fr;
    gap: 30px;
  }


  .map_img {
    padding: 20px;
  }

  .item_back {
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
  }

  .item_back-btn {
    min-width: 0;
    width: 100%;
    font-size: 13px;
    padding: 14px 20px;
  }

  .lp_info {
    padding: 50px 0;
  }

  .info_box {
    padding: 20px;
  }

  .info_box + .info_box {
    margin-top: 20px;
  }

  .info_ttl {
    font-size: 18px;
    gap: 10px;
    margin-bottom: 14px;
  }

  .info_ttl img {
    width: 24px;
  }
}

@media screen and (max-width: 480px) {
  .tokuten_img {
    gap: 24px;
  }

  .tokuten_img li {
    width: calc(50% - 12px);
  }

  .tokuten_side {
    top: -8px;
    left: -12px;
    width: 34px;
    height: 34px;
  }

}