@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* 投稿ページ内のスタイルを強制的に適用 */
.single-post .table th,
.single-post .table td {
    border: 1px solid #ddd !important;
    padding: 10px !important;
    text-align: center !important;
}
/* 親要素にテーブルをフィットさせる */
.table-wrapper {
    max-width: 100%; /* 親要素にフィット */
    overflow-x: auto; /* 横スクロールを許可（必要な場合） */
    margin: 0 auto; /* 中央揃え */
}

/* テーブル全体を縮小し、文字サイズも調整 */
.table {
    width: 100%; /* 親要素内に収める */
    border-collapse: collapse; /* 枠線を折りたたむ */
    font-size: 10px; /* フォントサイズを縮小 */
    table-layout: auto; /* 列幅を自動調整 */
    transform: scale(0.9); /* 全体を縮小 */
    transform-origin: top left; /* 縮小の基点を左上に */
}

.table th, .table td {
    border: 1px solid #ddd; /* 枠線 */
    text-align: center; /* テキストを中央揃え */
    padding: 5px; /* セル内の余白を減らす */
    white-space: nowrap; /* テキストの折り返しを防止 */
    overflow: hidden; /* 内容がセルを超えた場合に隠す */
    text-overflow: ellipsis; /* 省略記号を表示 */
}

/* ヘッダーのスタイル */
.table th {
    background-color: #f2f2f2;
    font-weight: bold;
}verflow: ellipsis; /* 省略記号を表示 */
}


/* カレンダーとボタンのスタイル */
.calendar-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.nav-button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    margin: 0 10px;
}

.nav-button:hover {
    background-color: #005f8c;
}

form {
    display: inline-block;
    margin: 0;
}

input[type="date"] {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 200px;
    text-align: center;
}

button[type="submit"] {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
}

button[type="submit"]:hover {
    background-color: #005f8c;
}

.today-button {
    text-align: center;
    margin-bottom: 20px;
}

/* レースカレンダーのスタイル */
.race-calendar {
    display: grid;
    gap: 10px;
    margin: 20px auto;
}

.central-calendar {
    grid-template-columns: repeat(3, 1fr);
    max-width: 600px;
    margin: 0 auto;
}

.local-calendar {
    grid-template-columns: repeat(4, 1fr);
    max-width: 800px;
    margin: 0 auto;
}
.race-button {
    display: inline-block;
    padding: 15px 20px;
    font-size: 20px;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 20px; /* ボタンの丸み */
    margin: 25px;
    font-weight: bold;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.7)); /* グラデーション */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 影 */
    transition: all 0.3s ease; /* ホバー時のアニメーション */
}

.race-button:hover {
    transform: translateY(-5px); /* ホバー時に浮かせる */
    filter: brightness(1.2); /* 明るくする */
}


.race-button:hover {
    background-color: #e0e0e0;
    border-color: #aaa;
}

/* 中央競馬・地方競馬の見出しを中央揃え */
.race-heading {
    text-align: center;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: bold;
}






/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/



/* タブレット向け（横幅768px以下） */
@media screen and (max-width: 768px) {
    .table {
        font-size: 9px; /* 少し縮小 */
        transform: scale(0.85); /* 縮小率を調整 */
    }
    .table th, .table td {
        padding: 4px;
    }
}

/* スマホ向け（横幅480px以下） */
@media screen and (max-width: 480px) {
    .table {
        font-size: 8px; /* 小さい文字サイズ */
        transform: scale(0.8); /* さらに縮小 */
    }
    .table th, .table td {
        padding: 3px;
    }
}