/* ページ全体のデザイン（背景と基本の文字色） */
body {
    background-color: #c9ddb8; /* ほんのり薄いグレーの背景 */
    color: #333333; /* 読みやすい濃いグレーの文字 */
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* --- 全体のレイアウト調整（スマホとPC対応） --- */
.container {
    max-width: 600px; /* パソコンで見ても広がりすぎないように最大幅を決める */
    margin: 0 auto; /* 左右の余白を自動にして、画面の真ん中に寄せる */
    padding: 20px; /* スマホで見たときに画面の端に文字がくっつかないようにする */
}

/* --- ヘッダー（ロゴとタイトル）の横並び設定 --- */
.header-container {
    display: flex; /* 箱の中身（ロゴとタイトル）を横並びにする魔法の呪文 */
    align-items: center; /* ロゴとタイトルの上下の中心を揃える */
    margin-bottom: 20px; /* ヘッダーの下に余白を作る */
    gap: 15px; /* ロゴとタイトルの間に15pxの隙間を空ける */
}

/* --- トップ画像（ロゴ）のデザイン --- */
.header-image {
    max-width: 80px; /* 横並びにするため、ロゴのサイズを固定 */
    height: auto; 
    border-radius: 8px; /* 好みに合わせて画像の角を少し丸くしています */
    flex-shrink: 0; /* タイトルが長くなってもロゴが潰れないようにする */
}

/* 一番大きな見出し（h1）のデザイン */
h1 {
    color: #770000; /* 深みのあるえんじ色（早稲田カラーのような赤） */
    margin: 0; /* 不要な余白を消す */
    line-height: 1.3; /* 行間を少し開けて、改行された時も読みやすくする */
    
    /* ★ここが画面幅に合わせて文字サイズを自動調整する魔法です */
    /* 最小1.2rem、基本は画面幅の5%＋ロゴ幅を考慮、最大1.8rem で伸び縮みします */
    font-size: clamp(1.2rem, 5vw, 1.8rem); 
}

/* --- YouTube動画をスマホに合わせる魔法 --- */
iframe {
    width: 100%; /* 横幅を画面にぴったり合わせる */
    height: auto; /* 高さを自動調整する */
    aspect-ratio: 16 / 9; /* 縦横の比率をYouTubeの標準サイズに固定する */
    margin-bottom: 20px; /* 動画の下に余白を作る */
}

/* --- レーススケジュールのデザイン --- */

/* リスト全体を「白いカード」にする */
.race-list {
    list-style: none; /* ここで黒い点を消します！ */
    padding: 0;
    margin: 0;
    background-color: #ffffff; /* 背景を真っ白に */
    border-radius: 8px; /* 箱の角を少し丸くする */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* ほんのり影をつける */
}

/* リストの各項目（行）のデザイン */
.race-list li {
    padding: 16px; /* 内側に余白をとる */
    border-bottom: 1px solid #eeeeee; /* 下に薄いグレーの区切り線を引く */
    display: flex; /* 文字を横並びにする魔法の呪文 */
    justify-content: space-between; /* 左右に端寄せして配置する */
    align-items: center; /* 上下の中央に揃える */
}

/* 最後の行だけは、下の区切り線を消す */
.race-list li:last-child {
    border-bottom: none;
}

/* 種目名の文字デザイン */
.race-name {
    font-weight: bold; /* 少し太字にする */
}

/* ラウンド名の文字デザイン */
.race-round {
    color: #666666; /* 少し薄いグレーにする */
    font-size: 0.9em; /* 少し文字を小さくする */
}

/* --- タブメニューのデザイン --- */
.tab-menu {
    display: flex; /* 横並びにする */
    gap: 10px; /* タブ同士の隙間 */
    margin-bottom: 20px; /* タブの下に余白を作る */
}

.tab-item {
    flex: 1; /* 2つのタブが均等の幅に広がるようにする */
    text-align: center; /* 文字を真ん中に寄せる */
    padding: 10px 0; /* 上下の厚み */
    background-color: #ffffff; /* 通常時の背景色（白） */
    color: #333333; /* 文字の色 */
    text-decoration: none; /* 下線を消す */
    font-weight: bold; /* 太字にする */
    border-radius: 6px; /* 角を少し丸くする */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* ほんのり影をつける */
    transition: background-color 0.2s; /* 色が変わるときのエフェクト */
}

/* 今開いているページのタブのデザイン（アクティブ状態） */
.tab-item.active {
    background-color: #770000; /* 早稲田カラーのえんじ色 */
    color: #ffffff; /* 文字を白くする */
}

/* マウスを載せたときのデザイン */
.tab-item:hover {
    opacity: 0.9;
}