@charset "utf-8";

/* =========================
   Fonts & Base
========================= */
@font-face{
  font-family: "BLG";
  src: url(../font/bleage_font.ttf);
  font-weight: normal;
}
@font-face{
  font-family: "BN";
  src: url(../font/BebasNeue-Regular.ttf);
  font-weight: normal;
}
@font-face{
  font-family: "GS";
  src: url(../font/GeneralSans-Semibold.ttf);
  font-weight: 600;
}

html{
  font-size: 62.5%;
  scroll-padding-top: 0;
  overflow-x: hidden;
}
body{
  background:#fff;
  line-height: 1.6875;
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
  font-feature-settings: "palt";
}
*, *::before, *::after{ box-sizing: border-box; }
img{ vertical-align: bottom; display:block; height:auto; max-width:100%; }

p,span,h1,h2,h3,h4,div,nav,li,ul,a{
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
  font-feature-settings: "palt";
}

.module_title{ display:none; }
.blg-font{ font-family: "BLG"; }
.color-white{ color:#fff; }

/* responsive breaks */
.sp-br{ display:block; }
.pc-br{ display:none; }
@media (min-width:700px){
  .sp-br{ display:none; }
  .pc-br{ display:block; }
}

/* =========================
   KV
========================= */
picture img{ width:100%; }
.kv-contents{ position:relative; }

.kv-ttl{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  display:flex;
  align-items: baseline;
  gap:10px;
  margin-left:15px;
  font-weight: normal;
}
@media (min-width:700px){
  .kv-ttl{ margin-left:15%; }
}
.kv-ttl h1{ font-size:6rem; font-weight:normal; }
@media (min-width:700px){
  .kv-ttl h1{ font-size:10rem; }
}
.kv-ttl h2{ font-size:2rem; letter-spacing:.1rem; }
@media (min-width:700px){
  .kv-ttl h2{ font-size:3rem; letter-spacing:1.2rem; }
}

/* =========================
   Tabs
========================= */
.atcl1-schedule{ background:#fff; }
.schedule{ background:#fff; }

.tab-top{ background:#fff; padding:1rem 0; }
.tab{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  width: calc(100% - 60px);
  margin:0 auto;
}
@media (min-width:700px){
  .tab{ width:100%; max-width:900px; }
}

.tablist{
  list-style:none;
  border:.5px solid #aba185;
  text-align:center;
  padding:10px 0;
  cursor:pointer;
  font-size:1.5rem;
  letter-spacing:.2rem;
  color:#aba185;
  background:#fff;
}
.tablist.active{
  background:#aba185;
  color:#fff;
  border-color:#aba185;
}
@media (min-width:700px){
  .tablist{ font-size:1.6rem; font-weight:700; }
}

/* 固定高さを撤廃して背景切れ防止 */
.tabcontents{ height:auto; }

/* =========================
   Venue (会場)
========================= */
.venue-contents{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width: calc(100% - 20px);
  margin:0 auto;
  padding:30px 0;
}
@media (min-width:700px){
  .venue-contents{
    grid-template-columns:1fr 1fr 1fr;
    max-width:900px;
    padding:40px 0 30px;
  }
}
.venue-item{
  background:#fff;
  box-shadow:3px 3px 5px rgba(0,0,0,.05);
  font-size:1.4rem;
}
.venue-item img{ width:80px; margin:15px auto 0; }
.venue-item-ttl{ background:#313131; color:#fff; padding:8px 0; }
.venue-item-club{ font-size:1rem; padding-bottom:15px; }
.venue-item-gym{ font-weight:700; padding:0 10px; margin:0 auto; }

/* =========================
   Schedule
========================= */
.ttl-wrapper{
  width: calc(100% - 50px);
  max-width:900px;
  margin:0 auto;
}
.ttl-big{
  font-family:"BN";
  font-size:8rem;
  line-height:10rem;
  letter-spacing:.8rem;
  color:#222;
}
@media (min-width:700px){
  .ttl-big{
    font-size:15rem;
    line-height:15rem;
    letter-spacing:1rem;
  }
}
.ttl-small-wrap{
  display:flex;
  align-items:center;
  gap:20px;
  color:#222;
}
.ttl-small1{ font-size:1.6rem; font-weight:700; letter-spacing:.6rem; }
@media (min-width:700px){
  .ttl-small1{ font-size:2.8rem; letter-spacing:.7rem; }
}
.ttl-small2{ font-family:"GS"; font-size:1.2rem; line-height:1.3rem; letter-spacing:.3rem; }
@media (min-width:700px){
  .ttl-small2{ font-size:1.4rem; line-height:1.5rem; letter-spacing:.5rem; }
}

/* 高さはautoでコンテンツ量に追従 */
.schedule-contents{
  height:auto !important;
  gap:10px;
  margin:0 auto;
  padding:30px 0 60px;
}
@media (min-width:700px){
  .schedule-contents{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    max-width:900px;
    width:100%;
    padding:40px 0 100px;
  }
}

.schedule-item-east,
.schedule-item-west{
  background:#fff;
  border-top:.5px solid #aba185;
  border-bottom:.5px solid #aba185;
}
@media (min-width:700px){
  .schedule-item-east,
  .schedule-item-west{
    border:.5px solid #aba185;
  }
}

.schedule-item-wrapper{
  display:flex;
  justify-content:space-around;
  gap:10px;
  width: calc(100% - 50px);
  margin:0 auto;
  padding:15px 0;
}
@media (min-width:700px){
  .schedule-item-wrapper{
    width:100%;
    padding:20px 10px;
  }
}

.schedule-item-num{
  display:flex;
  justify-content:center;
  font-size:1.8rem;
  font-weight:600;
}
@media (min-width:700px){
  .schedule-item-num{ font-size:2.2rem; }
}

.schedule-item-logo img{ width:50px; margin:0 auto; }
@media (min-width:700px){
  .schedule-item-logo img{ width:60px; }
}
.schedule-item-logo p{ text-align:center; font-size:1.3rem; }

.date{
  padding:15px 0;
  background:#f0ede7;
  color:#0f0f0f;
  font-size:1.4rem;
  text-align:center;
}
@media (min-width:700px){
  .date{ font-size:1.6rem; }
}
.schedule-item-east:nth-child(odd) .date,
.schedule-item-west:nth-child(odd) .date{
  background:#d8d0b7;
}

.schedule-btn{
  display:block;
  width: calc(100% - 50px);
  margin:0 auto 15px;
  padding:10px 0;
  color:#fff;
  text-align:center;
  text-decoration:none;
  font-size:1.3rem;
  letter-spacing:.2rem;
  background:#222;
  background-image:url(../img/icon_arrowR3.svg);
  background-repeat:no-repeat;
  background-size:25px;
  background-position: right 10px center;
  padding-right:25px;
}
@media (min-width:700px){
  .schedule-btn{ font-size:1.4rem; padding:6px 0; margin:0 auto 10px; }
}

/* ボタン色系 */
.basket-live-btn{ background:#C30100; }
.youtube-btn,
.youtube-btn2{ background:#222; }
.box-score-btn-north,
.box-score-btn-east,
.box-score-btn-central,
.box-score-btn-west,
.box-score-btn-south{
  background:#222;
  color:#beb49b;
}

/* 数値左右の微調整 */
.num-home{ padding-right:4px; }
.num-away{ padding-left:4px; }

/* =========================
   Animations
========================= */
.fadeDown{ animation: fadeDownAnime .5s forwards; opacity:0; }
@keyframes fadeDownAnime{
  from{ opacity:0; transform:translateY(-100px); }
  to  { opacity:1; transform:translateY(0); }
}

/* タイトルのスムース表示 */
span.smoothText{ overflow:hidden; display:block; }
span.smoothTextTrigger{
  display:block;
  transition:.8s ease-in-out;
  transform: translate3d(0,100%,0) skewY(12deg);
  transform-origin:left;
}
span.smoothTextTrigger.smoothTextAppear{
  transform: translate3d(0,0,0) skewY(0);
}

/* =========================
   Footer
========================= */
.footer-schedule{ background:#fff; }
.footer-schedule-wrap{ background:#fff; padding-top:24px; }

/* =========================
   Etc.
========================= */
.tab-botom{ padding-bottom:5rem; }
.js-based-schedule,
.js-based-schedule-east,
.js-based-schedule-central,
.js-based-schedule-west,
.js-based-schedule-south{ display:none; }

/* 背景画像などの装飾（必要なら個別CSSへ）
.schedule-player{
  top:0; left:0; width:100%; z-index:1; opacity:.2;
}
@media (min-width:700px){
  .schedule-player{ top:-50%; left:0; width:70%; max-width:500px; opacity:1; }
}
*/

/* Footer text colors (既存クラス活かし) */
.footer-list-bl{ color:#222 !important; }
.footer-copyright-bl{ color:#000 !important; }