@charset "UTF-8";

/* --- 1. 全体の基本設定 --- */
body {
    background-color: #F1E1A3;
    color: #332211;
    font-family: "MS PGothic", "Osaka", Arial, sans-serif;
    font-size: 12px;
    margin: 0; padding: 0; line-height: 1.4;
    padding-top: 50px;
    overflow-x: hidden;
}

a { text-decoration: none; color: #332211; }
a:hover { text-decoration: underline; color: #FF0000; }

/* --- 2. ヘッダー --- */
.site-header {
    background-color: #332211;
    color: #fff; height: 50px; width: 100%;
    position: fixed; top: 0; left: 0; z-index: 3000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.header-inner {
    max-width: 1000px; margin: 0 auto; height: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 15px; position: relative;
}
.site-title-box {
    font-size: 16px; font-weight: bold; color: #F1E1A3;
    display: flex; align-items: baseline;
}
.site-subtitle {
    font-size: 10px; font-weight: normal; margin-left: 10px; color: #fff;
}

/* --- ハンバーガーボタン --- */
.hamburger {
    display: none; background: none; border: none; cursor: pointer;
    width: 30px; height: 30px; padding: 0;
    position: absolute; right: 15px; top: 10px; z-index: 3001;
}
.hamburger span {
    display: block; width: 100%; height: 3px; background-color: #fff;
    position: absolute; left: 0; transition: all 0.3s; border-radius: 2px;
}
.hamburger span:nth-child(1) { top: 6px; }
.hamburger span:nth-child(2) { top: 13px; }
.hamburger span:nth-child(3) { bottom: 6px; }
.hamburger.active span:nth-child(1) { top: 13px; transform: rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { top: 13px; transform: rotate(-45deg); }


/* --- 3. レイアウト --- */
.wrapper {
    display: flex; max-width: 1000px; margin: 0 auto; min-height: 100vh;
    background-color: #FFFFFF;
    border-left: 1px dotted #332211; border-right: 1px dotted #332211;
}
.sidebar {
    width: 220px; background-color: #F1E1A3; padding: 15px;
    flex-shrink: 0; border-right: 1px solid #332211; box-sizing: border-box;
}
.main-content {
    flex-grow: 1; padding: 20px; background-color: #F1E1A3;
    overflow: hidden;
}

.menu-title {
    font-size: 13px; font-weight: bold; color: #553311;
    margin-top: 15px; margin-bottom: 5px; border-bottom: 1px dotted #553311;
}
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar li { margin-bottom: 4px; font-size: 12px; }

/* ▼▼▼ 左メニュー（草から探す）PC版設定・色付きライン ▼▼▼ */
.grass-menu-list { list-style: none; padding: 0; margin: 0; }
.grass-item { margin-bottom: 4px; }
.grass-item a {
    display: flex; align-items: center;
    text-decoration: none; color: #332211; font-size: 12px;
    background-color: #fff; /* 背景白 */
    border: 1px solid #ccc;
    border-left-width: 5px; /* 左線を太く */
    padding: 5px 8px; /* 余白調整 */
    transition: all 0.2s;
}
.grass-item a:hover {
    background-color: #ffeedd; transform: translateX(3px);
}

/* 各色の左線指定 */
.grass-item.green a { border-left-color: #55cc55; }
.grass-item.blue a  { border-left-color: #5555ee; }
.grass-item.red a   { border-left-color: #ee5555; }
.grass-item.yellow a{ border-left-color: #eecc55; }
.grass-item.white a { border-left-color: #cccccc; }
.grass-item.shining a { border-left-color: #cc55cc; }
.grass-item.m-red a { border-left-color: #ee6644; }
.grass-item.m-black a { border-left-color: #444444; }

.menu-grass-icon {
    width: 16px !important; height: 16px !important; margin-right: 8px;
    object-fit: contain; image-rendering: pixelated; vertical-align: middle;
}


/* --- 4. トップページ用ナビゲーション --- */
.nav-section { margin-bottom: 30px; }
.nav-section h2 {
    font-size: 14px; color: #332211;
    border-bottom: 2px solid #332211; padding-bottom: 5px; margin-bottom: 10px;
}
.nav-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px;
}
.nav-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background-color: #fff; border: 1px solid #332211;
    padding: 10px; border-radius: 4px; transition: all 0.2s ease;
    text-align: center; box-shadow: 2px 2px 0 rgba(51, 34, 17, 0.1);
    color: #332211; text-decoration: none; height: 100%; box-sizing: border-box;
}
.nav-btn:hover {
    background-color: #ffeedd; transform: translateY(-2px);
    box-shadow: 3px 3px 0 rgba(51, 34, 17, 0.2); color: #FF0000;
}
.nav-icon {
    width: 32px; height: 32px; object-fit: contain; margin-bottom: 5px; image-rendering: pixelated;
}
.nav-text { font-size: 12px; font-weight: bold; }
/* カウント表示用のスタイル */
.nav-count { font-size: 11px; font-weight: normal; color: #666; margin-top: 2px; }

.region-cat-title {
    font-size: 13px; font-weight: bold; color: #554433;
    background-color: #e0d0b0; padding: 4px 8px;
    margin-top: 15px; margin-bottom: 8px; border-left: 5px solid #332211;
}
.region-grid {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px;
}
.region-link {
    display: inline-block; font-size: 12px; color: #332211;
    text-decoration: none; padding: 2px 5px; border-bottom: 1px dotted #999; 
}
.region-link::before { content: "■"; color: #FF9933; margin-right: 4px; font-size: 10px; }
.region-link:hover { color: #FF0000; background-color: #fff0f0; border-bottom: 1px solid #FF0000; text-decoration: none; }


/* --- 5. 一覧ページ用（フィルタ・ソート） --- */
.filter-area {
    margin-bottom: 20px; padding: 10px;
    background-color: #fff; border: 1px solid #332211; font-size: 12px;
}
.filter-label { font-weight:bold; display:block; margin-bottom:5px; border-bottom:1px dotted #ccc; }
.filter-buttons { display:flex; flex-wrap:wrap; gap:5px; }
.filter-btn {
    display: inline-block; padding: 3px 8px;
    border: 1px solid #ccc; background:#f9f9f9; color:#332211;
    cursor: pointer; text-decoration:none;
}
.filter-btn:hover { background:#ffeebb; text-decoration:none; }
.filter-btn.active { background:#332211; color:#fff; border-color:#332211; }
/* カウント表示 */
.filter-count { font-size: 10px; color: #666; margin-left: 2px; }
.filter-btn.active .filter-count { color: #fff; }
/* 0本の場合のスタイル（薄くする） */
.filter-btn.disabled { opacity: 0.5; cursor: default; background: #eee; color: #999; border-color:#ddd; pointer-events: none; }


/* --- 6. マップカード --- */
.map-card {
    background-color: #FFFFFF; border: 1px solid #332211;
    padding: 10px; margin-bottom: 20px;
    box-shadow: 2px 2px 0px rgba(51, 34, 17, 0.2);
}
.map-title {
    font-size: 14px; font-weight: bold; border-bottom: 1px solid #332211;
    margin-bottom: 10px; padding-bottom: 3px;
}
.map-title::before { content: "■"; color: #FF9933; margin-right: 5px; }
.map-body { display: flex; gap: 15px; }
.map-img {
    width: 120px; height: 120px; background-color: #000;
    border: 1px solid #332211; flex-shrink: 0;
}
.map-img img { width: 100%; height: 100%; object-fit: contain; }

.grass-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 0; border-bottom: 1px dotted #ccc; font-size: 12px;
}
.grass-row.highlight { background-color: #fffaf0; border-bottom: 1px solid #dcc; }
.grass-info-left { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.grass-badge {
    display: inline-block; width: 60px; text-align: center;
    color: #fff; font-weight: bold; font-size: 11px; padding: 2px 0; flex-shrink: 0;
}
.grass-detail-text { font-size: 12px; }
.time-badge {
    background-color: #6b5b4e; color: #fff; padding: 1px 5px; font-size: 11px;
    border: 1px solid #5a4a3e; white-space: nowrap;
}
.count-highlight { color: #CC0000; font-weight: bold; font-size: 1.2em; }
.time-bold { font-weight: bold; }
.time-num { font-size: 1.3em; margin-right: 1px; }

/* --- 7. カテゴリメニュー（サイドバー） --- */
.category-header {
    font-size: 12px; font-weight: bold; color: #332211;
    background-color: #e0d0b0; padding: 5px 8px; margin-top: 5px;
    cursor: pointer; border-bottom: 1px solid #c0b090; display: flex; align-items: center;
}
.category-header:hover { background-color: #d0c0a0; }
.category-header span { margin-right: 5px; font-size: 10px; }
.category-list {
    list-style: none; padding: 0; margin: 0;
    background-color: #fffaf0; border-bottom: 1px solid #ccc;
}
.category-list li { padding: 0; margin: 0; border-bottom: 1px dotted #e0e0e0; }
.category-list li a {
    display: block; padding: 5px 10px 5px 20px;
    text-decoration: none; color: #332211; font-size: 12px;
}
.category-list li a:hover { background-color: #ffeedd; color: #FF0000; }

/* --- 8. 地域別マップ（テーブルレイアウト用） --- */
.region-map-container {
    text-align: center; margin-bottom: 20px;
    overflow-x: auto; width: 100%; display: block;
}
.region-table {
    margin: 0 auto; border-collapse: collapse; border-spacing: 0;
}
.region-table td { padding: 0; margin: 0; line-height: 0; }
.region-table img { display: block; border: none; }


/* --- 9. スマホ対応（右スライド・ヘッダー下） --- */
@media (max-width: 768px) {
    .site-subtitle { display: block; margin-left: 0; font-size: 10px; margin-top: 2px; }
    .site-title-box { display: block; }
    .wrapper { border: none; }
    .hamburger { display: block; } 
    
    .sidebar {
        position: fixed; top: 50px; right: -300px; left: auto;
        width: 250px; height: calc(100% - 50px);
        z-index: 2000; transition: right 0.3s ease;
        box-shadow: -2px 0 10px rgba(0,0,0,0.5);
        border-right: none; overflow-y: auto;
        padding: 20px; box-sizing: border-box; 
    }
    .sidebar.active { right: 0; }
    
/* ▼▼▼ 草メニュー（PCデザイン踏襲・2列）に書き換え ▼▼▼ */
    .grass-menu-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 15px; /* 横の余白 */
    }
    
    .grass-item {
        width: calc(50% - 4px); /* ギャップの半分を引いて2列に */
        margin-bottom: 0;
    }
    
    .grass-item a {
        display: flex;
        align-items: center;
        justify-content: flex-start; /* 左寄せ */
        padding: 8px; /* PC版に合わせる */
        border-radius: 0; /* 角丸なし */
        font-size: 12px;
        font-weight: normal;
        color: #332211;
        background-color: #fff; /* 背景は白 */
        border: 1px solid #ccc; /* 枠線はグレー */
        border-left-width: 5px; /* ★左の太線を復活 */
        text-decoration: none;
        box-shadow: none; /* 影なし */
    }
    
    .grass-item a:active {
        transform: translateY(1px);
        background-color: #f9f9f9;
    }
    
    /* 色分け（PCと同じ左線の色を指定し直す） */
    .grass-item.green a { border-left-color: #55cc55; }
    .grass-item.blue a  { border-left-color: #5555ee; }
    .grass-item.red a   { border-left-color: #ee5555; }
    .grass-item.yellow a{ border-left-color: #eecc55; }
    .grass-item.white a { border-left-color: #cccccc; }
    .grass-item.shining a { border-left-color: #cc55cc; }
    .grass-item.m-red a { border-left-color: #ee6644; }
    .grass-item.m-black a { border-left-color: #444444; }

    .menu-overlay {
        display: block; position: fixed; top: 50px; left: 0; width: 100%; height: calc(100% - 50px);
        background: rgba(0,0,0,0.5); z-index: 1500; opacity: 0; visibility: hidden; transition: opacity 0.3s;
    }
    .menu-overlay.active { opacity: 1; visibility: visible; }
    
    .map-body { flex-direction: column; }
    .map-img { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 300px; margin: 0 auto; }
}



/* ▼▼▼ MAPインデックス（目次） ▼▼▼ */
.map-index-area {
    background-color: #fff;
    border: 1px solid #332211;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.map-index-title {
    font-size: 13px; font-weight: bold; color: #332211;
    margin-bottom: 10px; border-bottom: 1px dotted #ccc;
    padding-bottom: 5px;
}
.map-index-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.map-index-list li {
    margin: 0;
}
.map-index-link {
    display: block;
    font-size: 11px; color: #332211; text-decoration: none;
    background-color: #f9f9f9; border: 1px solid #ddd;
    padding: 4px 8px; border-radius: 3px;
    transition: all 0.2s;
}
.map-index-link:hover {
    background-color: #ffeedd; color: #FF0000; border-color: #FF9933;
}
.index-count {
    font-weight: bold; color: #CC0000; margin-left: 3px;
}

/* ▼▼▼ 新しい並び替えボタン（アイコン付き） ▼▼▼ */
.sort-area-modern {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px; margin-bottom: 0;
}
.sort-label { font-size:11px; font-weight:bold; }

.sort-btn-icon {
    display: flex; align-items: center;
    padding: 5px 12px;
    background-color: #fff; border: 1px solid #332211;
    color: #332211; text-decoration: none; font-size: 12px; font-weight: bold;
    border-radius: 20px; /* 丸みをつける */
    transition: all 0.2s;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.sort-btn-icon img, .sort-btn-icon svg {
    width: 16px; height: 16px; margin-right: 6px;
}
.sort-btn-icon:hover {
    background-color: #ffeedd; transform: translateY(-1px);
    text-decoration: none; color: #FF0000;
}
.sort-btn-icon.active {
    background-color: #332211; color: #fff; border-color: #332211;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3);
}
/* アクティブ時のSVGの色反転 */
.sort-btn-icon.active svg path { fill: #fff; }


/* ▼▼▼ トップページ：メインビジュアル ▼▼▼ */
.main-visual {
    text-align: center;
    margin-bottom: 30px;
}

/* メインタイトル画像 */
.main-logo-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 15px; /* 中央寄せ & 下に余白 */
}

/* 説明テキスト */
.site-description {
    font-size: 13px;
    font-weight: bold;
    color: #332211;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* スマホ用改行クラス（PCでは非表示） */
.sp-br { display: none; }

/* 総数表示エリア */
.total-count-area {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* 総数ボックス */
.count-box {
    display: inline-block;
    background-color: #fff;
    border: 1px solid #332211;
    border-radius: 20px; /* 丸み */
    padding: 6px 15px;
    font-size: 13px;
    color: #332211;
    box-shadow: 2px 2px 0 rgba(51,34,17,0.1);
}
.count-box b {
    font-size: 15px;
    color: #CC0000;
}

/* スマホ対応（改行の有効化など） */
@media (max-width: 768px) {
    .sp-br { display: block; } /* スマホで改行 */
    .total-count-area {
        flex-direction: column; /* 縦並びにする場合 */
        align-items: center;
    }
    .count-box {
        width: 80%; /* 幅を広めに */
        text-align: center;
    }
}


/* ▼▼▼ 新しいシンプル並び替えエリア（白枠なし） ▼▼▼ */
.sort-area-simple {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px; margin-bottom: 20px;
}
.sort-label { font-size:11px; font-weight:bold; color:#332211; }

.sort-btn-icon {
    display: flex; align-items: center;
    padding: 5px 12px;
    background-color: #fff; border: 1px solid #332211;
    color: #332211; text-decoration: none; font-size: 12px; font-weight: bold;
    border-radius: 20px;
    transition: all 0.2s;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
/* アイコンサイズ */
.sort-btn-icon img, .sort-btn-icon svg {
    width: 16px; height: 16px; margin-right: 6px;
}
.sort-btn-icon:hover {
    background-color: #ffeedd; transform: translateY(-1px);
    text-decoration: none; color: #FF0000;
}
.sort-btn-icon.active {
    background-color: #332211; color: #fff; border-color: #332211;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3);
}
/* アクティブ時のSVGの色反転 */
.sort-btn-icon.active svg path { fill: #fff; }


/* ▼▼▼ MAPインデックス（フッター上） ▼▼▼ */
.map-index-area {
    background-color: #fff;
    border: 1px solid #332211;
    padding: 15px;
    margin-top: 30px; /* 上に余白 */
    margin-bottom: 20px;
    border-radius: 4px;
}
.map-index-title {
    font-size: 13px; font-weight: bold; color: #332211;
    margin-bottom: 10px; border-bottom: 1px dotted #ccc;
    padding-bottom: 5px;
}
.map-index-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.map-index-list li { margin: 0; }

.map-index-link {
    display: block;
    font-size: 11px; color: #332211; text-decoration: none;
    background-color: #f9f9f9; border: 1px solid #ddd;
    padding: 4px 8px; border-radius: 3px;
    transition: all 0.2s;
}
.map-index-link:hover {
    background-color: #ffeedd; color: #FF0000; border-color: #FF9933;
}
.index-count {
    font-weight: bold; color: #CC0000; margin-left: 2px;
}


/* ▼▼▼ 時間バッジ（幅統一） ▼▼▼ */
.time-badge {
    background-color: #6b5b4e;
    color: #fff;
    padding: 2px 0; /* 左右パディングは幅固定にするので削除 */
    font-size: 11px;
    border: 1px solid #5a4a3e;
    white-space: nowrap;
    
    /* ★ここがポイント：幅を統一して中央寄せ */
    display: inline-block;
    min-width: 60px; 
    text-align: center;
}

/* ▼▼▼ 並び替えエリア（横幅調整） ▼▼▼ */
.sort-area-simple {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 右寄せ */
    gap: 10px;
    margin-bottom: 20px;
}
.sort-label {
    font-size: 11px; font-weight: bold; color: #332211;
    white-space: nowrap; /* ラベルが折れないように */
}

.sort-btn-icon {
    display: inline-flex; /* 横幅を中身に合わせる */
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background-color: #fff; border: 1px solid #332211;
    color: #332211; text-decoration: none; font-size: 12px; font-weight: bold;
    border-radius: 20px;
    transition: all 0.2s;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    white-space: nowrap; /* ボタン内の改行防止 */
}

/* アイコンサイズ */
.sort-btn-icon svg {
    width: 16px; height: 16px; margin-right: 5px;
    fill: currentColor; /* 文字色に合わせる */
}

.sort-btn-icon:hover {
    background-color: #ffeedd; transform: translateY(-1px);
    text-decoration: none; color: #FF0000;
}
.sort-btn-icon.active {
    background-color: #332211; color: #fff; border-color: #332211;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3);
}

/* --- 草リストの装飾 --- */
.grass-row {
    display: flex; 
    align-items: flex-start; /* ★上揃えに変更 */
    justify-content: space-between;
    padding: 8px 0; /* 余白を少し広げる */
    border-bottom: 1px dotted #ccc; 
    font-size: 12px;
}
.grass-row.highlight { background-color: #fffaf0; border-bottom: 1px solid #dcc; }

.grass-info-left { 
    display: flex; 
    align-items: flex-start; /* ★上揃えに変更 */
    flex-wrap: wrap; 
    gap: 10px; 
    flex: 1; 
}

.grass-badge {
    display: inline-block; width: 60px; text-align: center;
    color: #fff; font-weight: bold; font-size: 11px; padding: 2px 0; flex-shrink: 0;
    margin-top: 1px; /* ★テキストとの位置微調整 */
}

.grass-detail-text { 
    font-size: 12px; 
    line-height: 1.5; /* 行間を整える */
}

/* 備考（場所など）のスタイル */
.grass-note {
    font-size: 11px; color: #555; margin-left: 5px;
}

/* 時間バッジ */
.time-badge {
    background-color: #6b5b4e; color: #fff; padding: 2px 0; font-size: 11px;
    border: 1px solid #5a4a3e; white-space: nowrap;
    display: inline-block; min-width: 60px; text-align: center;
    margin-left: 5px;
    margin-top: 1px; /* ★上揃え時の微調整 */
}
/* 並び替えボタンのアイコン調整 */
.sort-btn-icon img {
    width: 16px; height: 16px;
    margin-right: 6px;
    image-rendering: pixelated; /* ドット絵を綺麗に */
    object-fit: contain;
}


/* ▼▼▼ マップカード（アンカー位置調整） ▼▼▼ */
.map-card {
    background-color: #FFFFFF; border: 1px solid #332211;
    padding: 10px; margin-bottom: 20px;
    box-shadow: 2px 2px 0px rgba(51, 34, 17, 0.2);
    
    /* ★ヘッダー(50px)の分だけスクロール位置をずらす設定 */
    scroll-margin-top: 60px; 
}

/* --- 草リストの装飾 --- */
.grass-row {
    display: flex; 
    align-items: flex-start; /* ★上揃えに変更 */
    justify-content: space-between;
    padding: 8px 0; /* 余白を少し広げる */
    border-bottom: 1px dotted #ccc; 
    font-size: 12px;
}
.grass-row.highlight { background-color: #fffaf0; border-bottom: 1px solid #dcc; }

.grass-info-left { 
    display: flex; 
    align-items: flex-start; /* ★上揃えに変更 */
    flex-wrap: wrap; 
    gap: 10px; 
    flex: 1; 
}

.grass-badge {
    display: inline-block; width: 60px; text-align: center;
    color: #fff; font-weight: bold; font-size: 11px; padding: 2px 0; flex-shrink: 0;
    margin-top: 1px; /* ★テキストとの位置微調整 */
}

.grass-detail-text { 
    font-size: 12px; 
    line-height: 1.5; /* 行間を整える */
}

/* 備考（場所など）のスタイル */
.grass-note {
    font-size: 11px; color: #555; margin-left: 5px;
}

/* 時間バッジ */
.time-badge {
    background-color: #6b5b4e; color: #fff; padding: 2px 0; font-size: 11px;
    border: 1px solid #5a4a3e; white-space: nowrap;
    display: inline-block; min-width: 60px; text-align: center;
    margin-left: 5px;
    margin-top: 1px; /* ★上揃え時の微調整 */
}


/* --- スマホ対応（レイアウト調整） --- */
@media (max-width: 768px) {
    /* ... (前略：sidebarやheaderの設定はそのまま) ... */

    /* ▼▼▼ スマホ時の草詳細レイアウト変更 ▼▼▼ */
    .grass-row {
        align-items: flex-start; /* 上揃えにする（2行になっても時間は上） */
    }
    
    /* 備考を改行して2行目にする */
    .grass-note {
        display: block;       /* ブロック要素にして改行 */
        margin-left: 0;       /* 左の余白リセット */
        margin-top: 3px;      /* 上に少し隙間 */
        color: #666;
    }
    
    /* 文字が長すぎる場合の調整 */
    .grass-detail-text {
        line-height: 1.4;
    }
}


/* ▼▼▼ パンくずリスト ▼▼▼ */
.breadcrumb {
    font-size: 11px;
    color: #666;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #ccc;
    overflow-x: auto; /* スマホで長くなったら横スクロール */
    white-space: nowrap;
}
.breadcrumb a {
    color: #332211;
    text-decoration: none;
}
.breadcrumb a:hover {
    color: #FF0000;
    text-decoration: underline;
}
.breadcrumb span {
    margin: 0 5px;
    color: #999;
}
.breadcrumb .current {
    font-weight: bold;
    color: #332211;
}

/* ▼▼▼ フローティングTOPへ戻るボタン ▼▼▼ */
#page_top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    opacity: 0; /* 最初は隠す */
    visibility: hidden;
    transition: all 0.3s ease;
}
#page_top.show {
    opacity: 1;
    visibility: visible;
}
#page_top a {
    display: block;
    width: 50px;
    height: 50px;
    background-color: #332211; /* 焦げ茶 */
    color: #fff;
    text-align: center;
    line-height: 50px;
    border-radius: 50%; /* 丸くする */
    text-decoration: none;
    font-size: 24px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    font-family: Arial, sans-serif; /* 記号崩れ防止 */
}
#page_top a:hover {
    background-color: #554433;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

/* スマホでは少し小さく、位置を調整 */
@media (max-width: 768px) {
    #page_top {
        bottom: 15px;
        right: 15px;
    }
    #page_top a {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        opacity: 0.8; /* 邪魔にならないよう少し透過 */
    }
}


/* ▼▼▼ アクセス情報（行き方） ▼▼▼ */
.map-access {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 8px; /* 草リストとの間隔 */
    font-size: 12px;
    color: #332211;
    display: flex;
    align-items: center;
}
.map-access b {
    margin-right: 5px;
    color: #553311;
}
.access-icon {
    font-size: 14px;
    margin-right: 5px;
}


/* ▼▼▼ アクセス・Naviエリア ▼▼▼ */
.map-access-area {
    margin-top: 10px;
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* 行き方とボタンを左右に配置 */
    gap: 10px;
}

.access-text {
    font-size: 12px; color: #332211;
}
.access-text b { color: #553311; }
.access-icon { font-size: 14px; margin-right: 3px; }

/* Naviコピーボタン */
.navi-copy-btn {
    background-color: #fff;
    border: 1px solid #999;
    color: #333;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 15px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    font-weight: bold;
}
.navi-copy-btn:hover {
    background-color: #332211;
    color: #fff;
    border-color: #332211;
}
.navi-copy-btn:active {
    transform: translateY(1px);
}

/* ▼▼▼ コピー完了トースト通知 ▼▼▼ */
.copy-toast {
    position: fixed;
    bottom: 80px; /* TOPボタンより少し上 */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(51, 34, 17, 0.9);
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 12px;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.copy-toast.show {
    opacity: 1;
    visibility: visible;
    bottom: 90px; /* ふわっと浮き上がる */
}



/* ▼▼▼ マップ画像エリアの調整 ▼▼▼ */
.map-img-box {
    position: relative; /* アイコンを重ねる基準 */
    display: inline-block;
    width: 100%; height: 100%;
}

/* 拡大可能な場合のスタイル */
.map-img-box.zoomable {
    cursor: zoom-in; /* カーソルを虫眼鏡に */
}
.map-img-box.zoomable:hover {
    opacity: 0.9;
}

/* 虫眼鏡アイコン */
.zoom-icon {
    position: absolute;
    bottom: 5px; right: 5px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
    padding: 3px 6px;
    border-radius: 4px;
    pointer-events: none; /* アイコンをクリックしても親要素が反応するように */
}

/* ▼▼▼ モーダルウィンドウ（拡大表示） ▼▼▼ */
.modal-overlay {
    display: none; /* 最初は非表示 */
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    align-items: center; justify-content: center;
    cursor: zoom-out;
}
.modal-overlay.active {
    display: flex; /* アクティブ時に表示 */
    animation: fadeIn 0.2s ease;
}

.modal-content {
    max-width: 95%;
    max-height: 95%;
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    background: #000;
    line-height: 0; /* 画像の下の隙間消し */
}

.modal-content img {
    max-width: 100%;
    max-height: 90vh; /* 画面からはみ出さないように */
    width: auto; height: auto;
    object-fit: contain;
}

/* 閉じるボタン */
.modal-close {
    position: absolute; top: -40px; right: 0;
    color: #fff; font-size: 30px; font-weight: bold;
    cursor: pointer;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}