@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* カレンダーとボタンのスタイル */
.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;
}




/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* 共通スタイル */
.table {
    width: 100%; /* テーブルの幅を画面幅に合わせる */
    border-collapse: collapse; /* 枠線を折りたたむ */
    font-size: 14px; /* 初期の文字サイズ */
}
.table th, .table td {
    border: 1px solid #ddd; /* 枠線 */
    text-align: center; /* テキストを中央揃え */
    white-space: nowrap; /* 文字を折り返さない */
    overflow: hidden; /* 内容がセルを超えたら隠す */
    padding: 8px; /* セル内の余白 */
}

/* 横スクロールを許可（小さい画面用） */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* スムーズなスクロール */
}
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}


/* 横スクロールを許可（小さい画面用） */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* スムーズなスクロール */
}

/* スマホ向け（横幅480px以下） */
@media screen and (max-width: 480px) {
    .table {
        font-size: 10px; /* 全体の文字サイズを縮小 */
    }
    .table th, .table td {
        padding: 5px; /* セル内の余白を減らす */
    }
    .vertical-name {
        font-size: 8px; /* 縦書きテキストの文字サイズを縮小 */
    }
}

/* 小型スマホ向け（横幅375px以下） */
@media screen and (max-width: 375px) {
    .table {
        font-size: 9px; /* さらに小さい文字サイズ */
    }
    .table th, .table td {
        padding: 4px; /* さらに小さいセル内余白 */
    }
    .vertical-name {
        font-size: 7px; /* 縦書きテキストの文字サイズをさらに縮小 */
    }
}

/* タブレット向け（横幅768px以下） */
@media screen and (max-width: 768px) {
    .table {
        font-size: 12px; /* タブレット用に少し縮小 */
    }
    .table th, .table td {
        padding: 6px; /* セル内余白を調整 */
    }
    .vertical-name {
        font-size: 10px; /* 縦書きテキストの文字サイズを調整 */
    }
}

/* デスクトップ向け（768px以上） */
@media screen and (min-width: 769px) {
    .table {
        font-size: 14px; /* 通常の文字サイズ */
    }
    .table th, .table td {
        padding: 8px; /* 通常の余白 */
    }
    .vertical-name {
        font-size: 12px; /* 通常の縦書きサイズ */
    }
}