/* テーブル基本スタイル（ゴールドver） */
.t_gold {
    width: 100%;
	align-items: center;
    border-collapse: collapse;
    margin: 15px 0px;
}

.t_gold th {
    background: #0d56bd; /* 落ち着いたゴールド */
    /* もしくは明るめが好きなら #e6c66d */
    color: #ffffff;      /* 背景が金なので文字は黒 */
    border: 1px solid #000000;
    padding: 12px 5px;
    font-weight: bold;
    text-shadow: none; /* 文字の影を消す */
	text-align: center;
}

.t_gold td {
    background: #a8d0ff; /* 背景より少しだけ明るい黒緑 */
    color: #000000;
    border: 1px solid #000000; 

    padding: 10px 5px;
	text-align: center;
}

/* ヘッダーの色（t_goldの空色を引き継ぐので指定不要ですが、念のため） */
    /* .t_gold.t_gold2 thead th {
        background-color: #003074; 
        color: #fff;
        font-weight: bold;
    } */

/* 賞金テーブルの優勝者だけさらに目立たせる用 */
.prize_table_gold .rank_1 td {
    background: #c02e2e; /* 優勝行の背景を赤に */
    color: #ffefa7;      /* 文字をゴールドに */
    font-weight: bold;
    border: 1px solid #000000;
}

/* ====================================
   スマホ用レスポンシブ設定 (600px以下)
   ==================================== */
@media screen and (max-width: 600px) {

    /* --- 1. 基本設定（文字サイズ調整など） --- */
    .t_gold th, .t_gold td {
        font-size: 90%;       /* 少し文字を小さく */
        padding: 8px 4px;     /* 余白を詰める */
        word-break: break-all;/* 長いURLなどがはみ出ないように */
    }

    /* --- 2. 縦積みレイアウト化（大会概要・選手案内用） --- */
    /* テーブルのセルをブロック要素にして縦に積む */
    .t_gold {
        display: block;
        width: 100%;
    }
    
    .t_gold tbody, .t_gold tr, .t_gold th, .t_gold td {
        display: block;
        width: 100%;
        box-sizing: border-box; /* パディングを含めた幅計算 */
    }

    .t_gold tr {
        margin-bottom: 15px;      /* 行ごとの間隔を空ける */
        border: 1px solid #0f143b;/* 外枠をつける */
    }

    .t_gold th {
        text-align: left;    /* スマホでは左揃えの方が見やすい */
        border-bottom: none; /* 上下の境界線を消して一体感を出す */
        width: 100%;
    }

    .t_gold td {
        text-align: left;    /* スマホでは左揃えの方が見やすい */
        border-top: none;    /* 上の線を消す */
        width: 100%;
    }


    /* --- 3. 例外設定：賞金表（.prize_table_gold） --- */
    /* 賞金表は縦積みにせず、横並び（テーブル形式）のままにする */
    .prize_table_gold {
        display: table; /* テーブルに戻す */
    }
    .prize_table_gold tbody {
        display: table-row-group;
    }
    .prize_table_gold tr {
        display: table-row;
        border: none;
        margin-bottom: 0;
    }
    .prize_table_gold th, .prize_table_gold td {
        display: table-cell;
        text-align: center; /* 中央揃えに戻す */
        border: 1px solid #0f143b; /* 枠線を戻す */
        width: 50%; /* 2列なので半分ずつ */
    }


    /* --- 4. 例外設定：ヤーデージ表（.scroll_box内） --- */
    /* スクロールエリア内のテーブルも横並びのままにする */
    .scroll_box .t_gold {
        display: table;
        min-width: 600px; /* スクロールさせるために幅を確保 */
    }
    .scroll_box .t_gold tbody {
        display: table-row-group;
    }
    .scroll_box .t_gold tr {
        display: table-row;
        margin-bottom: 0;
    }
    .scroll_box .t_gold th, .scroll_box .t_gold td {
        display: table-cell;
        width: auto; /* 幅なりにする */
        text-align: center;
        border: 1px solid #0f143b;
    }
}


/* =========================================
       5. 追加：縦列ヤーデージ表用 (t_gold2)
       ========================================= */
    
    /* --- スクロール設定の解除 --- */
    /* 元のscroll_boxの600px指定を打ち消して、画面幅に合わせる */
    .scroll_box .t_gold.t_gold2 {
        display: table;
        min-width: auto; /* 600px縛りを解除 */
        width: 100%;     /* 画面幅いっぱいにする */
    }

    /* --- テーブルレイアウトの復元 --- */
    /* t_goldの「縦積みカード化」を解除して、普通の表形式に戻す */
    .t_gold.t_gold2 tbody,
    .t_gold.t_gold2 thead {
        display: table-row-group;
    }

    .t_gold.t_gold2 tr {
        display: table-row;
        border: none;      /* 縦積み用の外枠を消す */
        margin-bottom: 0;  /* 行間の隙間を消す */
    }

    .t_gold.t_gold2 th,
    .t_gold.t_gold2 td {
        display: table-cell; /* セルとして表示 */
        width: auto;         /* 幅100%を解除 */
        text-align: center;  /* 中央揃え */
        vertical-align: middle;
        border: 1px solid #0f143b; /* 枠線をしっかり出す */
        
        /* 4列を収めるための文字調整 */
        font-size: 85%;      
        padding: 8px 2px;    /* 左右の余白を少し詰める */
    }


/* =========================================
   6. 追加：ヤーデージ表の横並び設定 (PC用)
   ========================================= */

/* PCでは横並びにする（Flexbox） */
.yardage_container {
    display: flex;             
    justify-content: space-between; 
    align-items: flex-start;   
    gap: 4%;                   
}

/* PCでのそれぞれの箱の幅 */
.yardage_box {
    width: 48%;
}


/* ====================================
   スマホ用レスポンシブ設定 (600px以下)
   ==================================== */
/* ★ここから下はスマホのみに適用させる★ */
@media screen and (max-width: 600px) {

    /* --- 横並び解除設定 --- */
    /* スマホではFlexboxを解除して縦積みに戻す */
    .yardage_container {
        display: block; 
    }
    
    .yardage_box {
        width: 100%;       
        margin-bottom: 30px;
    }


    /* --- 縦列ヤーデージ表用 (t_gold2) の設定 --- */
    /* .t_gold がスマホで縦カード化するのを防ぎ、表形式を維持する設定 */
    
    .scroll_box .t_gold.t_gold2 {
        display: table;
        min-width: auto;
        width: 100%;
    }

    .t_gold.t_gold2 tbody,
    .t_gold.t_gold2 thead {
        display: table-row-group;
    }

    .t_gold.t_gold2 tr {
        display: table-row;
        border: none;
        margin-bottom: 0;
    }

    .t_gold.t_gold2 th,
    .t_gold.t_gold2 td {
        display: table-cell;
        width: auto;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #0f143b;
        font-size: 85%;      
        padding: 8px 2px;
    }

}


/* =========================================
   スマートヘッダー＆アコーディオン設定
   ========================================= */

/* 1. 全体を囲むエリア（中央寄せ・幅制限） */
.smart_section {
    clear: both;
    width: 80%;             /* 画面の80%の幅 */
    max-width: 1000px;      /* PCで広がりすぎないように上限を設定 */
    margin: 0 auto 40px;    /* 上0、左右自動(中央寄せ)、下40px */
}

/* 2. クリックするヘッダー部分 */
.smart_header {
    display: flex;          /* 横並びにする */
    align-items: baseline;  /* 文字の下ラインを揃える */
    border-bottom: 1px solid #0c6c6c; /* 下線 */
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #fff;
    
    /* ▼アコーディオン用の追加設定▼ */
    cursor: pointer;        /* カーソルを指マークに */
    position: relative;     /* 矢印アイコンの基準位置 */
}

/* 3. 左側の「◇」アイコン */
.smart_header::before {
    content: "◇";
    font-size: 150%;
    color: #0c6c6c;
    margin-right: 15px;
    transform: translateY(3px); /* 位置の微調整 */
}

/* 4. 日本語タイトル */
.smart_header h2 {
    font-size: 180%;
    font-weight: normal;
    margin: 0;
    color: #ffffff;
    font-family: "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

/* 5. 英語タイトル */
.smart_header span {
    font-size: 60%;
    color: #0c6c6c;
    margin-left: 15px;
    letter-spacing: 0.1em;
    font-family: sans-serif;
}

/* 6. 右側の「▼」矢印アイコン（開閉の目印） */
.smart_header::after {
    content: "▼";
    font-size: 100%;
    color: #0c6c6c;
    position: absolute;   /* 絶対配置 */
    right: 30px;            
    top: 50%;             /* 上下の真ん中 */
    transform: translateY(-50%); /* 真ん中補正 */
    transition: transform 0.3s;  /* クルッと回るアニメーション設定 */
}

/* 7. 開いている時（openクラスがついた時）の矢印の向き */
.smart_header.open::after {
    transform: translateY(-50%) rotate(180deg); /* 180度回転 */
}

/* 8. 中身のエリア（最初は隠しておく） */
.smart_body {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    display: none; /* ★最初は非表示 */
}

/* 9. スマホ対応（幅が狭い時は少し横幅を広げる） */
@media screen and (max-width: 600px) {
    .smart_section {
        width: 95%; /* スマホでは画面いっぱい使う */
    }
    .smart_header h2 {
        font-size: 140%; /* タイトル文字を少し小さく */
    }
}

/* =========================================
   スマートヘッダー（アコーディオンなし版）
   ========================================= */

/* 1. 全体を囲むエリア */
.smart_section_02 {
    clear: both;
    width: 80%;
    max-width: 1000px;
    margin: 0 auto 40px;
}

/* 2. ヘッダー部分（クリック不可・矢印なし） */
.smart_header_02 {
    display: flex;          /* 横並び */
    align-items: baseline;  /* 文字の下ライン揃え */
    border-bottom: 1px solid #0c6c6c; /* 下線 */
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #fff;
    
    /* ▼変更点：カーソル指定とpositionを削除▼ */
    /* cursor: pointer;  ←削除（指マークにしない） */
}

/* 3. 左側の「◇」アイコン */
.smart_header_02::before {
    content: "◇";
    font-size: 150%;
    color: #0c6c6c;
    margin-right: 15px;
    transform: translateY(3px);
}

/* 4. 日本語タイトル */
.smart_header_02 h2 {
    font-size: 180%;
    font-weight: normal;
    margin: 0;
    color: #ffffff;
    font-family: "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

/* 5. 英語タイトル */
.smart_header_02 span {
    font-size: 60%;
    color: #0c6c6c;
    margin-left: 15px;
    letter-spacing: 0.1em;
    font-family: sans-serif;
}

/* ▼変更点：右側の矢印（::after）の設定を丸ごと削除しました▼ */

/* 6. 中身のエリア（常に表示） */
.smart_body_02 {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    /* display: none; ←削除（隠さずに常に表示） */
}

/* 7. スマホ対応（_02用） */
@media screen and (max-width: 600px) {
    .smart_section_02 {
        width: 95%;
    }
    .smart_header_02 h2 {
        font-size: 140%;
    }
}