/* =========================================================
  menu_tub（非アク浮き／アク接触型）
========================================================= */
.menu-tub-wrap{
  margin:10px 0 4px;
}

.menu-tub{
  display:flex;
  width:100%;
  gap:3px;
  align-items:flex-end;
  border-bottom:2px solid rgba(0,0,0,.14);
}

/* 非アク（基本） */
.menu-tub__tab{
  position:relative;
  flex:1 1 0;
  min-width:0;
  text-align:center;

  padding:4px 8px 3px;

  text-decoration:none;
  font-weight:800;
  letter-spacing:.01em;

  background:#f3f4f6;
  color:#666;

  border:1px solid rgba(0,0,0,.12);
  border-bottom:0;
  border-radius:8px 8px 0 0;

  margin-bottom:4px;

  opacity:.85;
  transition:all .12s ease;
}

/* 上のアクセントライン */
.menu-tub__tab::before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:3px;
  height:3px;
  border-radius:999px;
  background:var(--tab-accent, rgba(0,0,0,.25));
  opacity:.55;
}

/* アクティブ（少しだけ高く） */
.menu-tub__tab.is-active{
  background:#fff;
  color:#111;
  opacity:1;

  padding:6px 8px 5px;

  margin-bottom:0;

  z-index:2;
  box-shadow:0 -2px 6px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.18);
}

/* 下線を消す白帯（アクのみ） */
.menu-tub__tab.is-active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:2px;
  background:#fff;
}

/* hover */
.menu-tub__tab:hover{
  opacity:.92;
}

/* SP調整 */
@media (max-width:520px){
  .menu-tub{ gap:2px; }

  .menu-tub__tab{
    padding:6px 6px 5px;
    font-size:12px;
    border-radius:7px 7px 0 0;
    margin-bottom:4px;
  }

  .menu-tub__tab.is-active{
    padding:8px 6px 7px;
    margin-bottom:0;
  }

  .menu-tub__tab::before{
    top:4px;
    left:9px;
    right:9px;
  }
}

/* タブカラー */
.menu-tub__tab:nth-child(1){ --tab-accent:#4f8cff; }
.menu-tub__tab:nth-child(2){ --tab-accent:#ff4fa3; }
.menu-tub__tab:nth-child(3){ --tab-accent:#00c2a8; }
.menu-tub__tab:nth-child(4){ --tab-accent:#cccccc; }
.menu-tub__tab:nth-child(5){ --tab-accent:#ff8a3d; }
.menu-tub__tab:nth-child(6){ --tab-accent:#8a5cff; }



/* =========================================================
  Title bar（race_list_v2 と同等の見た目）
  ★「first-child 強制 0」を回避するため、br-race-title を例外指定
========================================================= */

/* まず：タブ直下の余白を詰めたい場合（影響範囲を限定）
   ※ post_content 全体に 0 を掛けると他ブロック死ぬのでやらない */
.post_content .menu-tub-wrap{
  margin-bottom:0 !important;
}

/* ここが肝：
   SWELL が「post_content の first-child margin-top:0」を当ててくるので
   br-race-title が first-child の時だけ 4px を“同条件で”上書きする */
.post_content > .br-race-title:first-child{
  margin-top:4px !important;
}
.post_content div > .br-race-title:first-child{
  margin-top:4px !important;
}

/* br-race-title が first-child じゃないケースも一応ケア */
.post_content .br-race-title{
  margin-top:4px !important;
  margin-bottom:0 !important; /* タイトル下の余白も不要なら */
}

/* タイトル帯：枠線なし・淡い水色 */
.br-race-title{
  display:flex;
  align-items:center;
  gap:10px;

  padding:10px 12px;
  background:#e3f2fd;
  border:none;
  border-radius:0;
}



/* 左側 */
.br-race-title__left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.br-race-title__venue{
  font-weight:900;
  font-size:16px;
  color:#111;
  white-space:nowrap;
}

.post_content > *{
  margin-bottom: 0 !important;
}
.br-race-title__rno{
  font-weight:900;
  font-size:16px;
  color:#111;
  white-space:nowrap;
}

.br-race-title__kind{
  font-weight:800;
  font-size:14px;
  color:#111;
  opacity:.85;
  white-space:nowrap;
}

/* 右：締切（白ピル） */
.br-race-title__right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.br-race-title__close{
  font-weight:900;
  font-size:13px;
  color:#111;

  background:#fff;
  border:1px solid rgba(15,23,42,.14);
  border-radius:999px;
  padding:6px 10px;
  line-height:1;
  white-space:nowrap;
}

/* 下の6色バーは不要 */
.br-race-title__lane{ display:none !important; }

/* SP微調整 */
@media (max-width:520px){
  .br-race-title{ padding:10px 10px; } /* 下0を維持 */
  .br-race-title__venue,
  .br-race-title__rno{ font-size:15px; }
  .br-race-title__kind{ font-size:13px; }
  .br-race-title__close{ font-size:12px; padding:6px 9px; }
}











/* =========================================================
  menu_tub SP横スクロール対応
  - 文字は1行固定
  - 省略なし
  - 全タブ同幅
========================================================= */
@media (max-width: 520px) {
  .menu-tub-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .menu-tub {
    display: flex;
    width: max-content;
    min-width: 100%;
    gap: 2px;
    flex-wrap: nowrap;
  }

  .menu-tub__tab {
    flex: 0 0 96px;
    min-width: 96px;
    max-width: 96px;

    /* ★高さ復元 */
    padding: 10px 6px 6px;
    font-size: 12px;
    line-height: 1.6;

    white-space: nowrap;
    word-break: keep-all;

    border-radius: 7px 7px 0 0;
    margin-bottom: 4px;
  }

  .menu-tub__tab.is-active {
    padding: 12px 6px 8px;
    margin-bottom: 0;
  }

  .menu-tub__tab::before {
    top: 4px;
    left: 9px;
    right: 9px;
  }

  .menu-tub-wrap::-webkit-scrollbar {
    display: none;
  }

  .menu-tub-wrap {
    scrollbar-width: none;
  }
}