/* ============================================================
   コース旅程ページ 共通スタイル
   ------------------------------------------------------------
   style.css に無いパーツのみを補う。背景色に依存しない設計。
   yokohamako / kisarazuko の <style> に同一内容で重複していたものを
   外出しした。

   使い方（style.css より後に読み込む）:
     <link rel="stylesheet" href="/cruise/css/style.css">
     <link rel="stylesheet" href="/cruise/css/course.css">

   前提のマークアップ:
     <header class="page-header small-hero" style="background-image:url(…)">
     <section class="white-block" id="route-main">  … 旅程概要
     <section class="navy-block" id="chart">        … 航海図
     <section class="white-block" id="links">       … 関連リンク
   ============================================================ */

/* ---- ヒーロー ---------------------------------------------- */
/* ヒーロー画像を1枚で表示（タイル状の繰り返しを防止） */
.small-hero{
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    position:relative;
    overflow:hidden;
}
/* 暗転オーバーレイをヘッダー内に限定（下のセクションへ被らないように） */
.small-hero .video-overlay{position:absolute;inset:0;pointer-events:none;}

/* ---- 旅程概要セクション ------------------------------------ */
/* 見出し〜写真の背景を白に（背景色・グラデ・擬似要素・オーバーレイのいずれでも白くする） */
#route-main{background:#ffffff !important;background-image:none !important;}
#route-main > .inner{background:#ffffff !important;background-image:none !important;}
#route-main::before,#route-main::after,
#route-main > .inner::before,#route-main > .inner::after{
    content:none !important;background:none !important;display:none !important;}
#route-main .lead-text{background:transparent !important;background-image:none !important;}

/* ---- 写真並び ---------------------------------------------- */
/* 既定は2枚並び。3枚のときは .k-photo-row.cols-3 を併記する */
.k-photo-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px;}
.k-photo-row img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;display:block;
    box-shadow:0 8px 24px rgba(20,36,58,.12);}
.k-photo-row.cols-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:600px){.k-photo-row,.k-photo-row.cols-3{grid-template-columns:1fr;}}

/* ---- 表（船速と旅程時間など） ------------------------------ */
.k-table{width:100%;border-collapse:collapse;font-size:.95rem;margin-top:6px;}
.k-table th,.k-table td{border:1px solid rgba(160,160,160,.4);padding:9px 12px;}
.k-table tr:first-child th{background:rgba(28,58,94,.08);}
.k-table tbody th,.k-table th[scope="row"]{background:rgba(128,128,128,.10);white-space:nowrap;text-align:center;}

/* ---- 注意書き（浅瀬・定置網など） -------------------------- */
.k-note{
    margin-top:18px;padding:18px 22px;
    background:rgba(128,128,128,.10);
    border-left:3px solid #bfa154;border-radius:4px;
    display:flex;gap:16px;align-items:flex-start;line-height:1.9;
}
.k-note-icon{flex:0 0 auto;font-size:1.3rem;color:#bfa154;margin-top:.15em;}

/* ---- 航海図 ------------------------------------------------ */
/* 航海図が画面からはみ出さないように */
#chart .route-map-hero{max-width:100%;overflow:hidden;}
#chart .route-map-hero img{width:100%;max-width:100%;height:auto;display:block;margin:0 auto;border-radius:6px;}

/* 航海図に添える拡大図（浅瀬の詳細など）。
   元画像が小さいことが多いので拡大しすぎないよう max-width で抑える */
#chart .k-chart-sub{margin:26px auto 0;max-width:420px;text-align:center;}
#chart .k-chart-sub img{width:100%;height:auto;display:block;border-radius:6px;}
#chart .k-chart-cap{margin-top:10px;font-size:.85rem;letter-spacing:.03em;opacity:.75;}

/* ---- 関連リンク（大きめ・分かりやすく） -------------------- */
.k-links-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:8px;}
.k-link-card{display:flex;align-items:center;gap:16px;padding:20px 22px;
    background:#fff;border:1px solid rgba(28,58,94,.15);border-left:4px solid #bfa154;
    border-radius:6px;text-decoration:none;color:#1c3a5e;
    box-shadow:0 4px 14px rgba(20,36,58,.06);transition:all .25s;}
.k-link-card:hover{background:#1c3a5e;border-color:#1c3a5e;color:#fff;transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(20,36,58,.18);}
.k-link-card:hover .k-link-icon{color:#fff;}
.k-link-icon{flex:0 0 auto;font-size:1.4rem;color:#bfa154;width:1.6em;text-align:center;transition:color .25s;}
.k-link-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.k-link-title{font-size:1.02rem;font-weight:600;letter-spacing:.02em;}
.k-link-sub{font-size:.78rem;opacity:.65;letter-spacing:.05em;}