/* PC表示用スタイル (1024px以上で読み込まれます) */
:root { --header-height: 70px; }

/* ============================================
        トップページ (index.php) のレイアウト
    ============================================= */

    /* ヒーローセクションを1画面分の高さに */
    #hero-animation {
        height: 100vh;
    }

    /* PCでのサイト紹介セクション */
    .site-introduction-section {
        padding: 100px 40px; /* 上下の余白を広めに */
    }

    .intro-container {
        max-width: 800px; /* PCでは少し幅を広げる */
    }

    .intro-title {
        font-size: 2.2rem;
        margin-bottom: 40px;
    }

    .intro-text {
        font-size: 1.1rem;
    }

    /* 分割ビューを解除し、通常の縦並びコンテナに */
    .nabe-split-view {
        display: block;
        height: auto;
    }

    .nabe-list-wrapper,
    .nabe-map-wrapper {
        display: block !important; /* モバイル用の表示切替を無効化 */
        height: auto; /* 高さを自動にリセット */
        overflow: visible; /* スクロールを解除 */
        scroll-margin-top: var(--header-height); /* PCでのスクロール位置調整 */
    }

    /* 写真リストエリア：高さはコンテンツに依存 */
    .nabe-list-wrapper {
        background-color: var(--bg-dark); /* 下の地図が透けないように背景色を設定 */
        height: auto;
        overflow: visible;
        /* コンテンツが少なくてもフッターが上がってこないように最小高さを確保 */
        min-height: calc(100vh - var(--header-height));
    }

    /* 地図エリア：1画面分の高さに固定 */
    .nabe-map-wrapper {
        height: 100vh;
        /* Flexboxコンテナにして、中の要素（ヘッダー、エリアセレクター、地図）を縦に並べる */
        display: flex !important;
        flex-direction: column;
    }

    /* PCでは不要なUIを非表示 */
    .view-toggle-btns,
    .back-to-list-btn,
    .view-toggle-fab {
        display: none !important;
    }

.nabe-header-group {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30px;
        height: 70px; /* PC版の高さ */
    }

    /* PCのdetail.phpでは戻るボタンを表示 */
    .back-to-archive-btn {
        display: inline-block !important; /* ボタンとして表示 */
    }

    /* PCでは2段に分けない */
    .nabe-logo-bar, .nabe-control-bar {
        border: none;
        height: auto;
        display: flex;
        align-items: center;
        gap: 30px;
    }
    
    .nabe-logo-link img {
        max-height: 45px; /* PC版は少し大きく */
    }

    .site-title-in-link {
        font-size: 1.5rem; /* h1 とサイズを合わせる */
    }
    .nabe-logo-bar h1.site-title-with-logo img {
        max-height: 40px;
    }
    .nabe-logo-bar h1.site-title-with-logo span {
        font-size: 1.5rem;
    }

    .hero-main-title {
        font-size: 4rem; /* PCでは大きく */
    }
    .hero-sub-title {
        font-size: 1rem;
        letter-spacing: 8px;
    }

    /* 吹き出し（InfoWindow）内の文字色を強制的に指定 */
.nabe-map-popup-custom {
    color: #333 !important; /* 全体の文字色を濃いグレーに */
}

/* カテゴリ（青色などのアクセント） */
.nabe-map-popup-custom .popup-cat {
    color: var(--accent) !important; /* サイトのアクセントカラーに統一 */
    font-size: 10px;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

/* スポット名（タイトル） */
.nabe-map-popup-custom h4 {
    color: #000 !important; /* タイトルは真っ黒で強調 */
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: bold;
}

/* 「VIEW DETAIL」などの補助テキスト */
.nabe-map-popup-custom .view-detail {
    color: #666 !important;
    font-size: 11px;
    text-decoration: underline; /* リンクであることを分かりやすく */
}

/* Google Maps 側の白い枠の背景を確実に白にする */
.gm-style-iw {
    background-color: #fff !important;
}

/* 地図本体が親要素からはみ出さないように調整 */
#main-map {
    /* 親要素(.nabe-map-wrapper)の残りの高さいっぱいに広がる */
    flex-grow: 1;
    /* style.cssの height: 100% !important を上書き */
    height: auto !important;
    min-height: 0; /* flexアイテムが縮小できるように、またモバイル用のmin-heightを上書き */
}

    /* 写真一覧のグリッド設定（PC用） */
    .nabe-grid-layout {
        /* 500px程度を上限の目安として、画面幅に合わせて列数を自動調整 */
        grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    }

    /* PCでのセクションヘッダー */
    .section-header {
        padding: 30px 40px;
    }
    .section-title-text {
        font-size: 1.5rem;
    }
    .area-title {
        font-size: 1.8rem;
        padding: 20px 40px;
    }

    /* PCでのエリアセレクター */
    .area-selector-container {
        padding: 0 40px 20px;
        flex-wrap: wrap; /* PCでは折り返す */
        overflow-x: visible;
    }

    /* PCでのタグフィルター制御 */
    .tag-filter-toggle-btn {
        display: none !important; /* トグルボタンは常に非表示 */
    }

    /* 「スポットごと」ビューの時、中のコンテナを非表示 */
    #list-section[data-view-mode="spots"] .tag-filter-container {
        display: none !important;
    }

    /* 「全写真」ビューの時、中のコンテナを強制的に表示 */
    #list-section[data-view-mode="all-photos"] .tag-filter-container {
        display: flex !important;
        padding: 20px 40px;
        border-top: none;
    }

    /* PC表示のタグフィルターは背景を不透明にし、下の地図が透けないようにする */
    .tag-filter-wrapper {
        background: var(--bg-dark);
        backdrop-filter: none;
    }

    /* ============================================
        詳細ページ (detail.php) のレイアウト
    ============================================= */

    .nabe-detail-container {
        display: grid !important;
        /* 左：1fr（画像エリア） / 右：500px（コンテンツエリア） */
        grid-template-columns: 1fr 500px !important;
        /* 全体スクロールにするため height: 100vh や overflow: hidden を解除 */
        height: auto !important; 
        min-height: calc(100vh - var(--header-height));
        margin-top: var(--header-height);
        overflow: visible !important; 
        align-items: start;
    }

    /* --- 左側：メイン画像 --- */
    .nabe-main-visual {
        grid-column: 1;
        grid-row: 1 / 3; /* タイトルとコンテンツの横にまたがる */
        
        /* 画面に固定する設定 */
        position: sticky;
        top: var(--header-height);
        height: calc(100vh - var(--header-height)) !important;
        
        display: flex;
        flex-direction: column; /* 画像とキャプションを縦に積む */
        align-items: center;
        justify-content: center;
        background: #000; /* 余白を黒で埋める */
        margin: 0 !important;
    }

    /* PCでのSwiper調整 */
    .main-visual-swiper {
        height: calc(100% - 40px); /* キャプションエリアの分を空ける */
    }
    .swiper-slide img {
        height: 100%;
        width: 100%;
        object-fit: contain;
    }

    .main-visual-caption {
        width: 100%;
        text-align: center;
        padding: 10px;
        color: #bbb; /* 背景の黒に対して読みやすい明るめのグレーに変更 */
        font-size: 0.85rem;
        background: #000;
    }

    /* --- 右側：タイトル --- */
    .nabe-detail-header {
        grid-column: 2;
        grid-row: 1;
        padding: 60px 40px 20px;
        background: var(--bg-dark);
        border-left: 1px solid var(--border-soft);
    }

    .nabe-detail-title {
        font-size: 2rem;
    }

    /* --- 右側：詳細コンテンツ --- */
    .nabe-detail-scroll-content {
        grid-column: 2;
        grid-row: 2;
        width: 500px !important;
        background: var(--bg-dark);
        border-left: 1px solid var(--border-soft);
        
        /* 個別のスクロールを解除 */
        height: auto !important;
        overflow: visible !important; 
        padding-top: 0;
        
        display: block; /* スマホのFlexboxを解除 */
    }

    /* 各セクションの横幅が500pxからはみ出さないよう調整 */
    .nabe-description-area,
    .nabe-sub-gallery,
    .nabe-map-section,
    .nabe-nearby-section,
    .nabe-site-footer {
        padding-left: 40px;
        padding-right: 40px;
        width: 100%;
        box-sizing: border-box;
    }

        .nabe-sub-gallery {
        grid-template-columns: repeat(2, 1fr); /* PCでも2列（または1列）で大きく見せる */
        gap: 20px;
        padding: 0 40px; /* 左右パディング復活 */
    }

    /* PCではギャラリー内のメイン写真も表示する */
    .gallery-item.is-main-photo {
        display: block;
    }

    /* PCギャラリー内のキャプションは非表示（メインエリアに出るため） */
    .gallery-caption {
        display: none;
    }

    .gallery-item {
        cursor: pointer;
        transition: opacity 0.3s;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

    .gallery-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

    .gallery-item:hover {
        opacity: 0.7;
    }
    
    .site-notes-section {
        padding: 60px 40px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px 60px;
    }
    .note-item {
        margin-bottom: 0;
    }

    /* PCでは詳細ページ用FABを非表示 */
    .detail-fab-container {
        display: none;
    }

    /* PCでは左下の戻るボタンも非表示 */
    .back-list-fab-left {
        display: none;
    }