@charset "utf-8";
/* ========================================
   たいわゴルフクラブ - コースページ専用CSS
   ファイル名: course.css
   説明: コースページ（course.html）のスタイル定義
   ======================================== */

/* ========================================
   パンくずリスト
   説明: ページ上部のナビゲーション表示
   ======================================== */

.breadcrumb {
    /* 背景: 白から薄いグレーへのグラデーション */
    background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%);
    
    /* 余白 */
    padding: 10px 0;
    
    /* 下部の装飾 */
    border-bottom: 2px solid #e0e0e0; /* 2pxの灰色ボーダー */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 軽い影で立体感 */
}

/* パンくずリストのコンテナ */
.breadcrumb .container {
    max-width: 1360px; /* 最大幅 */
    margin: 0 auto; /* 中央揃え */
    padding: 0 20px; /* 左右に20pxの余白 */
}

/* パンくずリストの順序付きリスト */
.breadcrumb ol {
    list-style: none; /* リストマーカーを非表示 */
    display: flex; /* 横並び配置 */
    align-items: center; /* 垂直方向中央揃え */
    margin: 0;
    padding: 0;
    flex-wrap: wrap; /* 折り返しを許可（スマホ対応） */
}

/* パンくずリストの各アイテム */
.breadcrumb li {
    font-size: 13px;
    color: #555; /* グレー系のテキスト */
    font-weight: 500; /* やや太字 */
    display: flex;
    align-items: center;
}

/* パンくずリストの区切り文字（最後の要素以外） */
.breadcrumb li:not(:last-child)::after {
    content: '|'; /* 縦棒で区切る */
    margin: 0 15px; /* 左右に15pxの余白 */
    color: #666;
    font-weight: normal;
}

/* パンくずリストのリンク */
.breadcrumb a {
    color: #003d82; /* ブランドカラー（青） */
    text-decoration: none; /* 下線なし */
    transition: all 0.3s ease; /* スムーズな変化 */
    padding: 5px 10px; /* クリック領域を広げる */
    border-radius: 4px; /* 角を丸める */
}

/* パンくずリストのリンク - ホバー時 */
.breadcrumb a:hover {
    background-color: #003d82; /* 背景を青に */
    color: #ffffff; /* テキストを白に */
    transform: translateY(-1px); /* 1px上に移動 */
}

/* パンくずリストの現在ページ（最後の要素） */
.breadcrumb li:last-child {
    color: #333; /* 濃いグレー */
    font-weight: 600; /* 太字 */
}

/* ========================================
   ヒーロー画像エリア
   説明: ページタイトル画像とテキストのオーバーレイ
   ======================================== */

.hero-image {
    position: relative; /* 子要素の絶対配置の基準 */
    width: 100%;
    height: 400px; /* 高さ固定 */
    overflow: hidden; /* はみ出しを隠す */
}

/* ヒーロー画像 */
.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を枠内に収める（トリミング） */
    object-position: center; /* 中央を基準にトリミング */
}

/* ヒーロー画像上のテキスト */
.hero-text {
    position: absolute; /* 画像の上に重ねる */
    top: 50%; /* 上から50% */
    left: 50%; /* 左から50% */
    transform: translate(-50%, -50%); /* 中央に配置 */
    text-align: center;
    color: #ffffff; /* 白いテキスト */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* 黒い影で視認性向上 */
}

/* ヒーローエリアのメインタイトル */
.hero-title {
    font-family: 'Montserrat', sans-serif; /* 英字フォント */
    font-size: clamp(48px, 8vw, 72px); /* 可変サイズ: 最小48px、最大72px */
    font-weight: 800; /* 極太 */
    font-style: italic; /* 斜体 */
    margin: 0;
    letter-spacing: 0.05em; /* 文字間隔を広げる */
}

/* ヒーローエリアのサブタイトル */
.hero-subtitle {
    font-size: clamp(14px, 2.5vw, 18px); /* 可変サイズ: 最小14px、最大18px */
    margin: 8px 0 0;
    letter-spacing: 0.2em; /* 文字間隔を広げる */
    font-weight: 500;
}

/* ========================================
   コースページメインエリア
   説明: コンテンツ全体の背景と余白設定
   ======================================== */

.course-page {
    padding: 80px 0px 40px; /* 上80px、下40pxの余白 */
}

/* ページタイトル（非表示・SEO用） */
.page-title {
    /* スクリーンリーダー用に残すが視覚的には非表示 */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* コンテンツラッパー */
.wrap {
    max-width: 1400px; /* 最大幅 */
    margin: auto; /* 中央揃え */
    padding: 40px 20px; /* 上下40px、左右20pxの余白 */
}

/* ========================================
   コース紹介セクション
   説明: コース説明文とコースマップ
   ======================================== */

.course-intro {
    margin-bottom: 60px; /* 下に60pxの余白 */
}

/* コース紹介のコンテンツエリア */
.intro-content {
    display: grid; /* グリッドレイアウト */
    grid-template-columns: 1fr 1fr; /* 2カラム（左右均等） */
    gap: 60px; /* カラム間に60pxの余白 */
    align-items: start; /* 上端揃え */
}

/* 左側のテキストエリア */
.intro-text {
    padding-right: 20px; /* 右に20pxの余白 */
}

/* コース紹介のメインタイトル */
.intro-title {
    font-size: clamp(18px, 2vw, 24px); /* 可変サイズ: 最小18px、最大24px */
    font-weight: 700; /* 太字 */
    line-height: 1.8; /* 行間を広く */
    color: #333; /* 濃いグレー */
    margin: 0 0 20px; /* 下に20pxの余白 */
}

/* コース紹介の説明文 */
.intro-description {
    font-size: clamp(14px, 1.5vw, 16px); /* 可変サイズ: 最小14px、最大16px */
    line-height: 1.9; /* 行間を広く */
    color: #666; /* グレー */
    margin: 0;
}

/* 右側のマップエリア */
.intro-map {
    position: relative;
}

/* マップコンテナ */
.map-container {
    position: relative;
    width: 100%;
}

/* コースマップ画像 */
.course-map-img {
    width: 100%;
    height: auto; /* 縦横比を維持 */
    display: block;
}

/* コースマップ上のSVGオーバーレイ */
.course-map-overlay {
    position: absolute; /* 画像の上に重ねる */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* マップ上のホールリンク（円形エリア） */
.hole-link {
    fill: rgba(0, 61, 130, 0.2); /* 半透明の青（透明度20%） */
    stroke: transparent; /* 枠線なし */
    cursor: pointer; /* マウスカーソルをポインターに */
    transition: all 0.3s ease; /* スムーズな変化 */
}

/* マップ上のホールリンク - ホバー時 */
.hole-link:hover {
    fill: rgba(0, 61, 130, 0.5); /* 半透明の青（透明度50%） */
    stroke: #003d82; /* 青い枠線 */
    stroke-width: 3; /* 枠線の太さ3px */
}

/* マップ下の注釈 */
.map-note {
    text-align: center;
    font-size: 14px;
    color: #666;
    margin: 15px 0 0; /* 上に15pxの余白 */
    padding: 12px; /* 内側に12pxの余白 */
    border: 1px solid #e0e0e0; /* 薄いグレーの枠線 */
    border-radius: 4px; /* 角を丸める */
    background: #f9f9f9; /* 薄いグレーの背景 */
}

/* ========================================
   ヤーデージ表セクション
   説明: OUT/INコースの距離表
   ======================================== */

.yardage-section {
    margin-top: 80px; /* 上に80pxの余白 */
}

/* セクションタイトル */
.section-title {
    text-align: center;
    font-family: 'Montserrat', sans-serif; /* 英字フォント */
    font-size: clamp(28px, 4vw, 36px); /* 可変サイズ: 最小28px、最大36px */
    font-weight: 700; /* 太字 */
    font-style: italic; /* 斜体 */
    color: #003d82; /* ブランドカラー（青） */
    margin: 0 0 40px; /* 下に40pxの余白 */
    letter-spacing: 0.05em; /* 文字間隔を広げる */
}

/* ヤーデージ表コンテナ（OUT/INそれぞれ） */
.yardage-table-container {
    display: grid; /* グリッドレイアウト */
    grid-template-columns: 200px 1fr; /* 左200px、右は残りの幅 */
    gap: 0; /* 隙間なし */
    margin-bottom: 40px; /* 下に40pxの余白 */
    border: 2px solid #003d82; /* 青い枠線2px */
    border-radius: 8px; /* 角を丸める */
    overflow: hidden; /* はみ出しを隠す */
}

/* コースラベル（OUT/IN表示エリア） */
.course-label {
    background: #003d82; /* 青い背景 */
    display: flex;
    align-items: center; /* 垂直方向中央揃え */
    justify-content: center; /* 水平方向中央揃え */
    padding: 20px; /* 内側に20pxの余白 */
}

/* ラベルテキスト */
.label-text {
    color: #ffffff; /* 白いテキスト */
    font-size: clamp(20px, 2.5vw, 24px); /* 可変サイズ: 最小20px、最大24px */
    font-weight: 700; /* 太字 */
    text-align: center;
    line-height: 1.4; /* 行間 */
}

/* ラベルサブテキスト（"course"） */
.label-sub {
    display: block; /* ブロック要素化（改行） */
    font-size: clamp(12px, 1.5vw, 14px); /* 可変サイズ: 最小12px、最大14px */
    font-weight: 400; /* 通常の太さ */
    margin-top: 4px; /* 上に4pxの余白 */
}

/* テーブルラッパー（横スクロール対応） */
.table-wrapper {
    overflow-x: auto; /* 横スクロールを有効化 */
    background: #ffffff; /* 白い背景 */
}

/* ヤーデージ表本体 */
.yardage-table {
    width: 100%;
    border-collapse: collapse; /* セル間の隙間をなくす */
    min-width: 500px; /* 最小幅（スマホで横スクロール） */
}

/* テーブルヘッダー */
.yardage-table thead {
    background: #003d82; /* 青い背景 */
}

/* テーブルヘッダーセル */
.yardage-table th {
    color: #ffffff; /* 白いテキスト */
    font-weight: 700; /* 太字 */
    padding: 15px 10px; /* 上下15px、左右10pxの余白 */
    text-align: center; /* 中央揃え */
    font-size: clamp(12px, 1.4vw, 14px); /* 可変サイズ */
    border-right: 1px solid rgba(255, 255, 255, 0.2); /* 右側に半透明の白線 */
}

/* テーブルヘッダーセル - 最後の列 */
.yardage-table th:last-child {
    border-right: none; /* 最後の列は右ボーダーなし */
}

/* テーブルデータセル */
.yardage-table td {
    padding: 12px 10px; /* 上下12px、左右10pxの余白 */
    text-align: center; /* 中央揃え */
    border-bottom: 1px solid #e0e0e0; /* 下に薄いグレーの線 */
    border-right: 1px solid #e0e0e0; /* 右に薄いグレーの線 */
    font-size: clamp(13px, 1.5vw, 15px); /* 可変サイズ */
}

/* テーブルデータセル - 最後の列 */
.yardage-table td:last-child {
    border-right: none; /* 最後の列は右ボーダーなし */
}

/* テーブル行 - 偶数行（ゼブラストライプ） */
.yardage-table tbody tr:nth-child(even) {
    background: #f8f9fa; /* 薄いグレーの背景 */
}

/* テーブル行 - ホバー時 */
.yardage-table tbody tr:hover {
    background: #e8f4ff; /* 薄い青の背景 */
}

/* 合計行（OUT/IN） */
.yardage-table .total-row {
    background: #f0f0f0 !important; /* グレーの背景（強制） */
    font-weight: 700; /* 太字 */
}

/* 合計行のセル */
.yardage-table .total-row td {
    border-bottom: none; /* 下ボーダーなし */
}

/* ========================================
   ホール番号リンクのスタイル
   説明: Yardage表内のホール番号をクリッカブルに
   ======================================== */

/* ホール番号リンク - 基本スタイル */
.hole-number-link {
    /* 表示設定 */
    display: inline-block; /* インラインブロック要素 */
    
    /* 色とテキスト */
    color: #003d82; /* ブランドカラー（青） */
    text-decoration: none; /* 下線を削除 */
    font-weight: 700; /* 太字 */
    
    /* サイズと余白 */
    padding: 6px 12px; /* 上下6px、左右12pxの余白 */
    min-width: 32px; /* 最小幅32pxで統一感を出す */
    
    /* 角丸と枠線 */
    border-radius: 4px; /* 角を4px丸める */
    border: 2px solid #003d82; /* 2pxの青い枠線 */
    
    /* 背景グラデーション */
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    /* 左上から右下へ白からグレーへのグラデーション */
    
    /* テキスト配置 */
    text-align: center; /* 中央揃え */
    
    /* アニメーション */
    transition: all 0.3s ease; /* 全ての変化を0.3秒でスムーズに */
}

/* ホール番号リンク - ホバー時（マウスを乗せた時） */
.hole-number-link:hover {
    /* 背景色を青に反転 */
    background: linear-gradient(135deg, #003d82 0%, #0051a8 100%);
    /* 濃い青から明るい青へのグラデーション */
    
    /* テキスト色を白に変更 */
    color: #ffffff;
    
    /* 浮き上がる効果 */
    transform: translateY(-2px); /* 上に2px移動 */
    
    /* 影を追加して立体感を演出 */
    box-shadow: 0 4px 8px rgba(0, 61, 130, 0.3);
    /* 下に青みがかった影（不透明度30%） */
}

/* ホール番号リンク - フォーカス時（キーボード操作時） */
.hole-number-link:focus {
    /* アクセシビリティ対応: キーボードでの操作時にもわかりやすく */
    outline: 3px solid #0051a8; /* 青い枠線でフォーカスを明示 */
    outline-offset: 2px; /* 枠線を2px外側に配置 */
}

/* ホール番号リンク - アクティブ時（クリック時） */
.hole-number-link:active {
    /* クリックした瞬間の視覚的フィードバック */
    transform: translateY(0); /* 元の位置に戻す */
    box-shadow: 0 2px 4px rgba(0, 61, 130, 0.2); /* 影を小さく */
}

/* ========================================
   レスポンシブデザイン
   説明: 画面サイズに応じたスタイル調整
   ======================================== */

/* タブレット以下（768px以下） */
@media (max-width: 768px) {
    /* ヒーロー画像 */
    .hero-image {
        height: 250px; /* 高さを小さく */
    }
    
    /* コンテンツラッパー */
    .wrap {
        padding-left: 15px; /* 左余白を小さく */
        padding-right: 15px; /* 右余白を小さく */
    }
    
    /* コース紹介コンテンツ */
    .intro-content {
        grid-template-columns: 1fr; /* 1カラムに変更（縦並び） */
        gap: 40px; /* 間隔を調整 */
    }
    
    /* コース紹介テキスト */
    .intro-text {
        padding-right: 0; /* 右余白をなくす */
    }
    
    /* コース紹介タイトル */
    .intro-title {
        font-size: 16px; /* フォントサイズを固定 */
    }
    
    /* コース紹介説明文 */
    .intro-description {
        font-size: 14px; /* フォントサイズを固定 */
    }
    
    /* コースページメイン */
    .course-page {
        padding: 0; /* 上下の余白をなくす */
    }
    
    /* マップ注釈 */
    .map-note {
        font-size: 12px; /* フォントサイズを小さく */
    }
    
    /* ヤーデージ表コンテナ */
    .yardage-table-container {
        grid-template-columns: 1fr; /* 1カラムに変更（縦並び） */
    }
    
    /* コースラベル */
    .course-label {
        padding: 15px; /* 余白を小さく */
    }
    
    /* ヤーデージ表 */
    .yardage-table {
        font-size: 12px; /* フォントサイズを小さく */
    }
    
    /* テーブルセル */
    .yardage-table th,
    .yardage-table td {
        padding: 8px 4px; /* 余白を小さく */
    }
    
    /* ホール番号リンク */
    .hole-number-link {
        padding: 5px 10px; /* 余白を少し小さく */
        min-width: 28px; /* 最小幅を小さく */
        font-size: 13px; /* フォントサイズを調整 */
    }
}

/* スマートフォン（480px以下） */
@media (max-width: 480px) {
    /* ホール番号リンク - さらにコンパクトに */
    .hole-number-link {
        padding: 4px 8px; /* さらに余白を小さく */
        min-width: 24px; /* 最小幅をさらに小さく */
        font-size: 12px; /* フォントサイズもさらに調整 */
        border-width: 1px; /* 枠線を細く */
    }
}