/* ==========================================================================
   ASIAN FAIR 2026 ソート機能・絞り込みパネル 追加CSS（整理版）
   既存の asian2026.css に追記、またはこのファイルを別途読み込んでください
   ========================================================================== */
:root {
  --color-main: #e84737;
  --color-second: #fbc600;
  --color-bg: #4e361c;
  --brand-brown: #4e361c;
  --white: #fff;
}

.sp {
  display: none !important;
}

.pc {
  display: block !important;
}

.filter-btn {
  display: block;
  align-items: center;
  gap: 7px;
  border-radius: 0;
  border: none;
  background: #fff;
  color: var(--color-bg);
  cursor: pointer;
  transition:
    opacity 0.18s,
    background-color 0.18s,
    color 0.18s;
}

.filter-btn:hover {
  opacity: 0.6;
}

.sort__title {
  width: 94%;
  margin: 40px auto;
  text-align: center;
}

.sort__title img {
  height: 60px;
  width: auto;
}

#sort__anchor {
  scroll-margin-top: 110px;
  /* ← ここの数値 */
}

/* ── .filter-btn の状態（ドット・チェック・ホバー） ── */
.niku2026 .filter-btn .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  background: #ccc;
}

.niku2026 .filter-btn .check {
  margin-left: 2px;
  font-size: 0.78rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.niku2026 .filter-btn.active .check {
  opacity: 1;
}

/* ── アクティブ時の枠線（ファーストビュー用／5カテゴリ共通） ──
   /* 右固定パネル（.filter-panel-inner）のボタンには当たらないよう */
.niku2026 .controls .filter-btn.active {
  background: var(--color-main);
  color: var(--color-second);
}

/* ── 右固定フィルターパネル（スクロール後に表示） ── */
.filter-panel-inner {
  position: fixed;
  bottom: 40px;
  right: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateX(12px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  z-index: 1;
  min-width: 100px;
}

.filter-panel-inner.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.filter-panel-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #999;
  margin-bottom: 2px;
  padding-left: 2px;
}

.filter-divider {
  height: 1px;
  background: #eee;
  margin: 3px 0;
}

.filter-panel-inner .filter-btn {
  padding: 9px 0px 9px 12px;
  border-radius: 10px;
  font-size: 0.84rem;
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  background: none;
  border: none;
}

.filter-panel-inner .filter-btn .right__btn {
  text-align: center;
  font-weight: bold;
  color: var(--color-main);
  font-size: 12px;
  margin-bottom: 4px;
}

.right__btn.pc {
  display: block;
}

.right__btn.sp {
  display: none;
}

.filter-panel-inner .filter-btn .right__btn__img {
  width: 90px;
  height: 90px;
  background-color: #fff;
  border-radius: 50px 0 0 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.filter-panel-inner .filter-btn .right__btn__img img {
  width: 70px;
}

.filter-panel-inner .filter-btn .check {
  margin-left: auto;
}



/* ── ページトップへ戻るボタン（右固定パネル内） ── */
.pagetop-btn {
  padding: 36px 0px 16px;
  color: var(--color-main);
  background-color: var(--color-second);
  cursor: pointer;
  transition: all 0.18s;
  /* width: calc(100% - 12px); */
  margin: 0;
  border: 2px solid var(--color-second);
  border-radius: 12px 0px 0 12px;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  font-size: 20px;
  font-weight: bold;
  position: relative;
}

.pagetop-btn::before {
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  /* background-image: url(../images/icon_arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--color-main); */
  background-color: var(--color-main);
  -webkit-mask-image: url("../../assets/images/icon_arrow.svg");
  mask-image: url("../../assets/images/icon_arrow.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  top: 16px;
  left: 50%;
  transform: translate(-50%, 0);
}

.pagetop-btn:hover {
  background-color: var(--color-main);
  color: var(--color-second);
}
.pagetop-btn:hover::before {
  background-color: var(--color-second);
}

/* トップへ戻るボタン（使用されていない旧スタイル） */
/* .back-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 4px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1.5px solid #ddd;
  background: transparent;
  color: #888;

  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.18s;
  width: 100%;
}

.back-to-top:hover {
  border-color: #d92e3e;
  color: #d92e3e;
}

.back-to-top svg {
  flex-shrink: 0;
  transition: transform 0.2s;
}

.back-to-top:hover svg {
  transform: translateY(-2px);
} */

/* ── カードの絞り込み非表示制御 ── */


/* ── モーダル内 dt カラー（現在dtタグは使用されていないためコメントアウト） ── */
/* .modal dt.dt-towers {
  background-color: #ea5539;
  color: #fff;
}

.modal dt.dt-gate {
  background-color: #4e361c;
  color: #fff;
} */

/* ==========================================================================
   メディアクエリ（max-width: 768px に統一）
   ========================================================================== */

@media (max-width: 768px) {
  .sp {
    display: block !important;

  }

  #sort__anchor {
    scroll-margin-top: 40px;
    /* ← ここの数値 */
  }
}

@media (max-width: 768px) {
  .pc {
    display: none !important;
  }

  .sort__title {
    margin: 30px auto 20px;
  }

  .sort__title img {
    height: 20px;
    width: auto;
  }

  /* 右固定パネル → 下部固定・横一列レイアウトに切り替え */
  .filter-panel-inner {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0px;
    padding: 10px 0 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    min-width: unset;
    width: 100%;
    transform: translateX(0);
    /* セーフエリア対応（iPhoneホームバー） */
    /* padding-bottom: calc(10px + env(safe-area-inset-bottom)); */
  }

  /* ラベルと区切り線はSPでは非表示 */
  .filter-panel-label,
  .filter-divider {
    display: none;
  }

  /* ボタンを横並び・コンパクトに */
  .filter-panel-inner .filter-btn {
    padding: 10px 0px 0;
    font-size: 0.78rem;
    width: calc((100% - 40px) / 5);
    flex-direction: row;
    white-space: nowrap;
    margin: 0 4px 0;
  }

  .right__btn.pc {
    display: none;
  }

  .right__btn.sp {
    display: block;
  }

  .filter-btn.active .right__btn {
    color: #fff;
  }

  .filter-panel-inner .filter-btn .right__btn__img {
    width: auto;
    height: 70px;
    border-radius: 40px 40px 0 0;
    flex-direction: column;
    justify-content: end;
  }

  .filter-panel-inner .filter-btn .right__btn__img img {
    width: 50px;
  }

  .pagetop-btn {
    width: 100%;
    margin: 0;
    border-radius: 0;
    padding-block: 12px;
  }

  .pagetop-btn::before {
    content: none;
    padding: 20px 0;
  }

  .pagetop-btn .span {
    position: relative;
  }

  .pagetop-btn span {
    position: relative;
  }

  .pagetop-btn span::before {
    position: absolute;
    content: "";
    width: 12px;
    height: 12px;
    background-image: url(../images/icon_arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 50%;
    left: -28px;
    transform: translate(0, -50%);
  }

  .cmn-footer--link_list {
    flex-direction: column;
    justify-content: flex-start;
    padding: 16px 0 66px 20px;
    margin-bottom: 0;
  }
}

/* 7/16 追記 */
/* li.card--tag.card--tag-hour {
  width: auto;
  background-color: var(--color-second);
  padding: 8px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  letter-spacing: 1px;
}

li.card--tag.card--tag-hour span {
  text-align: left;
  font-size: 14px;
  color: var(--color-main);
}

li.card--tag.card--tag-hour span.time_w+span.time_w {
  border-top: dashed 1px var(--color-main);
}

li.card--tag.card--tag-hour span.time {
  font-size: 16px;
  padding: 4px 0;
  border-radius: 6px;
  display: block;
  text-align: center;
  margin-bottom: 10px;
  color: var(--color-second);
  background-color: var(--color-main);
}

@media (max-width: 768px) {
  .modal-scroll__col.modal-scroll__col--icon {
    display: inline-block;
  }

  li.card--tag.card--tag-hour {
    align-items: center;
  }

  li.card--tag.card--tag-hour span.time {
    background: none;
    color: var(--color-main);
  }

  li.card--tag.card--tag-hour span {
    font-size: 14px;
  }

  li.card--tag.card--tag-hour span.time {
    font-size: 16px;
  }

   li.card--tag.card--tag-hour {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  li.card--tag.card--tag-hour span.time {
    margin-bottom: 0;
  } 
}

*/

/* ---------- 改行 ---------- */
.u-word {
  display: inline-block;
}

/* ---------- リード ---------- */
.copy {
  background-color: var(--color-second);
  color: var(--color-main);
  font-family: "corporate-logo-ver2", sans-serif;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 0.3em;
  text-align: center;
  padding: 0.5em;

  @media (max-width: 768px) {
    font-size: 24px;
  }
}

.lead {
  color: var(--white);
  font-family: "corporate-logo-ver2", sans-serif;
  font-size: 28px;
  font-weight: bold;
  /* font-feature-settings: 'palt'; */
  line-height: 1.4;
  text-align: center;
  padding-top: 1em;
  padding-inline: 4%;

  @media (max-width: 768px) {
    font-size: 20px;
  }
}

.lead--small {
  color: var(--white);
  font-family: "corporate-logo-ver2", sans-serif;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  padding-top: 1em;
  padding-inline: 4%;

  @media (max-width: 768px) {
    font-size: 16px;
  }
}



/* ==========================================================
   ABエリア入れ替え + 階連動切り替え スタイル (ab-switch)
   ========================================================== */


/* ---------- ABタブ (押すと表示順が入れ替わる) ---------- */
.ab-tabs {
  display: flex;
  /* gap: 16px; */
  justify-content: center;
  max-width: 640px;
  margin-inline: auto;
  padding: 0;
}

.ab-tab {
  flex: 1;
  border: 3px solid var(--color-main);
  border: none;
  background: var(--color-main);
  color: #fff;

  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 1em;
  /* border-radius: 100px; */
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  text-align: center;
  /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); */
}

.ab-tab:hover {
  opacity: 0.95;
  /* transform: translateY(-2px); */
}

.ab-tab.is-active {
  background: var(--color-second);
  color: var(--color-main);
  /* box-shadow: 0 6px 16px rgba(232, 71, 55, 0.35); */
}

/* ---------- ABセクション本体 (flexのorderで表示順を制御) ---------- */
.ab-wrap {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.ab-section {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ab-section.is-swapping {
  opacity: 0;
  transform: translateY(12px);
}

.ab-section .section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  border-bottom: 3px solid var(--brand-brown);
  padding-bottom: 10px;
}

.ab-section .section-head h2 {
  font-size: 22px;
  font-weight: 900;
  color: var(--brand-brown);
  margin: 0;
}

.ab-section .section-head .badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-brown);
  background: rgba(78, 54, 28, 0.12);
  padding: 4px 12px;
  border-radius: 100px;
  letter-spacing: 0.05em;
}

/* ---------- 12F/13F タブ (A・B共通の状態で連動する) ---------- */
.floor-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  text-align: center;
  margin-bottom: 40px;

  @media (max-width: 768px) {
    gap: 10px;
    margin-bottom: 20px;
  }
}

.floor-tab {
  border: 2px solid var(--color-second);
  border-radius: 100px;
  background: var(--color-second);
  color: var(--color-main);
  font-size: 24px;
  font-weight: 700;
  padding: 10px 40px;
  /* box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.3); */
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;

  /* &:hover {
    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.35);
  } */

  &:active {
    transform: translateY(1px);
  }

  @media (max-width: 768px) {
    font-size: 18px;
  }
}

.floor-tab.is-active {
  background: var(--color-main);
  color: var(--color-second);
}
.floor-tab:hover {
  background: var(--color-main);
  color: var(--color-second);
}

/* ---------- 12F/13F 同時表示(orderで上下を入れ替える) ---------- */
.floor-groups {
  display: flex;
  flex-direction: column;
  gap: 80px;

  @media (max-width: 768px) {
    gap: 24px;
  }
}

.floor-group {
  display: flex;
  flex-direction: column;
}

.floor-heading {
  font-size: 32px;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 40px;
  letter-spacing: 0.05em;
  text-align: center;

  @media (max-width: 768px) {
    font-size: 18px;
    margin-bottom: 12px;
  }
}

/* ul.[hidden] の非表示制御 */
.wrap_shops ul[hidden],
ul[hidden] {
  display: none !important;
}

/* ==========================================================
   全店ランダム表示 + エリア誘導 + フロア内ランダム スタイル (ab-random)
   ========================================================== */
.section-title {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--brand-brown);
  margin: 0 0 16px;
  text-align: center;
}

.section-title--all {
  color: var(--white);
}

/* ---------- 全店ランダムエリア ---------- */
.all-random {
  padding-block: 40px;
}

/* ---------- カード内のエリア・フロアタグ ---------- */
.card .li-floor-tag {
  display: inline-block;
  margin: 4px 6px 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-main);
  background: rgba(232, 71, 55, 0.1);
  padding: 2px 8px;
  border-radius: 100px;
}

/* ---------- ソートボタン(A/B, アンカーリンク) ---------- */
.nav-wrap {
  background-color: var(--color-second);
  padding-block: 20px;

  @media (max-width: 768px) {
    padding: 8px;
  }
}

.icon-arrow-down {
  /* background: url(../../assets/images/icon_arrow-down.svg) no-repeat center center; */
  /* background-size: contain; */
  width: 28px;
  height: 28px;
  display: inline-block;
  background-color: var(--color-main);

  -webkit-mask-image: url("../../assets/images/icon_arrow-down.svg");
  mask-image: url("../../assets/images/icon_arrow-down.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon-arrow-up {
  width: 18px;
  height: 18px;
  display: inline-block;
  background-color: var(--color-main);

  -webkit-mask-image: url("../../assets/images/icon_arrow-down.svg");
  mask-image: url("../../assets/images/icon_arrow-down.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transform: rotate(90deg);

}


.sort-tabs {
  display: flex;
  gap: 0px;
  justify-content: center;
  max-width: 1400px;
  margin-inline: auto;
  padding: 0 16px;

  @media (max-width: 768px) {
    padding: 0;
  }
}

.sort-tabs .sort-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  color: var(--color-main);

  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s;
  text-align: center;
  line-height: 1.2;


  @media (max-width: 768px) {
    font-size: 14px;
    text-align: center;
    line-height: 1.2;
    padding: 8px;
  }

}

.sort-tabs .sort-tab:hover {
  opacity: 0.95;
  background-color: var(--color-main);
  color: var(--color-second);
}

.sort-tabs .sort-tab:hover .icon-arrow-down,
.sort-tabs .sort-tab.is-active .icon-arrow-down,
.sort-tabs--floating .sort-tab:hover .icon-arrow-up,
.sort-tabs--floating .sort-tab.is-active .icon-arrow-up {
  background-color: var(--color-second);
}

.sort-tabs .sort-tab.is-active {
  background: var(--color-main);
  color: var(--color-second);
}

.sort-tab-line {
  width: 3px;
  background-color: var(--color-main);
}


/* 監視用ダミー要素 */
#sortAnchor {
  height: 1px;
}

/* ---------- フローティングパネル(下部固定) ---------- */
.sort-tabs--floating {
  box-sizing: border-box;
  position: fixed;
  right: 0;
  bottom: 100px;
  /* 初期値。実際の位置はJSで自動計算して上書きします */
  left: auto;
  max-width: none;
  margin: 0;
  padding-inline: 0;
  z-index: 998;
  /* filter-panel-innerより奥、他のUIより手前 */
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(12px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.sort-tabs--floating.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.sort-tabs--floating .sort-tab {
  box-sizing: border-box;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  width: 80px;
  min-height: 250px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.4;
  /* 2行ぶんの行間 */
  padding: 24px 0;
  border-radius: 12px 0 0 12px;
  border: 2px solid var(--color-second);
  border-right: 0;
  background-color: var(--color-second);
  color: var(--color-main);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s;
}

.sort-tabs--floating .sort-tab.is-active {
  background: var(--color-main);
  color: var(--color-second);

}

/* ---------- エリアセクション ---------- */
.area-section {
  padding-bottom: 56px;
  padding-top: 40px;
  scroll-margin-top: 70px;
}

.area-section .area-head {
  display: flex;
  align-items: center;
  justify-content: center;
}


.area-section .area-head h2 {
  font-size: 40px;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 20px;
}



/* ---------- SP(スマホ)のみ：FV直下のソートボタン(A/B)をヘッダー下に固定表示 & 下部フローティング非表示 ---------- */
@media (max-width: 768px) {
  #sortTabsInline {
    position: sticky;
    top: 70px;
    z-index: 200;
  }

  .sort-tabs--floating {
    display: none !important;
  }

  .area-section {
    scroll-margin-top: 114px;
  }

  .area-section .area-head h2 {
    font-size: 18px;
  }
}

@media (max-width: 428px) {
  #sortTabsInline {
    top: 50px;
  }

  /* .area-section {
    scroll-margin-top: 94px;
  } */
}

/* 共通footerの上書き  */
.cmn-footer--copyright_wrapper {


  @media (max-width: 768px) {
    padding-bottom: 80px;
  }
}


/* 「全店表示」ボタン */
.all-view-btn {
  position: fixed;
  right: 0;
  bottom: 100px; /* JSで自動計算して上書きします */
  z-index: 998;
  width: 80px;
  padding: 14px 8px;
  border: 2px solid var(--color-second);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  background: var(--color-second);
  color: var(--color-main);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  /* writing-mode: vertical-rl; 縦書き。TW/GTボタンと見た目を揃える想定 */
  text-orientation: mixed;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateX(12px);
  transition: opacity .25s ease, transform .25s ease, color .2s ease, background-color .2s ease;
}
.all-view-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.all-view-btn:hover{
  background-color: var(--color-main);
  color: var(--color-second);
}

/* SPでも右固定のまま(sort-tabs--floatingのようにdisplay:noneにしない) */
@media (max-width: 767px) {
  .all-view-btn {
    /* PCと同じrightのまま。位置調整が必要ならここで上書き */
    font-size: 16px;
  }
}
/* ==========================================================================
   ウィンドウ縦幅が狭い場合（高さ900px以下）の右固定ボタン縮小
   ========================================================================== */
@media (max-height: 900px) and (min-width: 769px) {
  .filter-panel-inner,
  .all-view-btn,
  .sort-tabs--floating {
    scale: 0.8;
    transform-origin: right bottom;
  }
}