.top-page-container{max-width:1200px;margin:0 auto;padding:0 0px;}
section{margin-bottom:30px;}
.section-title{font-size:18px;font-weight:bold;margin-bottom:15px;padding-left:10px;border-left:4px solid #1e9b31;}
/* ④中央競馬と地方競馬の重賞レース切替え表示 */
.race-content{padding:15px}
.race-table{
    width:100%;
    border-collapse:collapse;
    th, td{padding:10px;text-align:center;border:1px solid #ddd;}
    th{background-color:#f0f0f0;font-weight:bold;}
    a{
      color:#1e9b31;
      text-decoration:none;
      font-weight:bold;
      &:hover{
        text-decoration:underline;
      }
    }
}

/* コンテンツカラム */
.content-columns{display:flex;gap:30px;margin-bottom:30px;}
.main-column{flex:7;}
.side-column{flex:3;}
/* ⑦コラム記事をタグごとに表示 */

.tabbed-columns-section{margin-bottom:30px;}
.tab-navigation{
    display:flex;
    border-bottom:2px solid #e6cf00;
    margin-bottom:20px;
    overflow-x:auto;
    @media screen and (max-width:768px){
      border-width:1px;
      padding-bottom:16px;
      border-color:#eee;
      flex-wrap:wrap;
      gap:4px;
      overflow-x:visible;
    }
}

.tab-button{
    padding:10px 15px;
    background-color:#f5f5f5;
    border:none;
    border-radius:5px 5px 0 0;
    margin-right:5px;
    cursor:pointer;
    font-size:14px;
    white-space:nowrap;
    width:200px;
    @media screen and (max-width:768px){
      border-radius:4px;
      margin-right:0;
      width:calc(50% - 8px);
    }
    &.active{
      background-color:#e6cf00;
      color:#111;
    }
}

.column-articles{display:flex;flex-direction:column;gap:15px;}
.column-article{display:flex;background-color:#fff;border-radius:5px;overflow:hidden;box-shadow:0 2px 5px rgba(0, 0, 0, 0.1);}
.column-article-link{display:block;text-decoration:none;color:inherit;}
.column-article-link:hover{opacity:0.8;}
.article-image{
    height:110px;
    overflow:hidden;
    img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
}
.article-content{
    flex:1;
    padding:10px 15px;
    @media screen and (max-width:768px){
      padding:8px;
    }
}
.article-date{
    font-size:12px;
    color:#777;
}
.article-title{
    font-size:16px;
    font-weight:bold;
    margin:0 0 5px;
    line-height:1.4;
      .title-pc{display:inline;}
      .title-mobile{display:none;}
      @media screen and (max-width:768px){
        .title-pc{display:none;}
        .title-mobile{display:inline;}
      }
  }

.article-excerpt{
    font-size:13px;
    color:#555;
    line-height:1.5;
    @media screen and (max-width:768px){
      display:none;
    }
}

/* レスポンシブスタイル */
@media (max-width:768px){
    .content-columns{flex-direction:column;}
    .slide-item{height:300px;}
    .slide-title{font-size:20px;}
    .menu-items{flex-wrap:nowrap;}
    .menu-items li{flex:0 0 auto;}
    .article-image{flex:0 0 180px;}
}

.main-slider-section{
    margin-bottom:0;
    @media screen and (max-width:834px){margin-bottom:12px;width:calc(100% + 20px);margin-left:-10px;}
    .slick-dotted.slick-slider{margin-bottom:0;}
    .slider-nav{
        margin-top:0;
        margin-bottom:16px;

        div.slider-dots{
            ul.slick-dots{
                position:relative;
                bottom:0;
                @media screen and (max-width:834px){
                      display:block !important;
                  }
            }
        }

        @media screen and (max-width:834px){
          display:none;
        }
    }
}

/* モバイル表示専用クラス */
.mobile-only{display:none;}

@media screen and (max-width:768px){
  .mobile-only{display:block;}
  #sidebar{display:none;}
}