/* ============================================================
   meHug PC Layout — min-width: 1025px
   モバイルレイアウトは一切変更しない。
   このファイルは PC のみに適用される。
   ============================================================ */

/* ======================== CSS 変数 ======================== */
:root {
    --pc-sidebar-w: 260px;
    --pc-sidebar-bg: #ffffff;
    --pc-sidebar-text: #374151;
    --pc-sidebar-text-hover: #111827;
    --pc-sidebar-accent: #0f766e;
    --pc-sidebar-divider: #e5e7eb;
    --pc-header-h: 64px;
    --pc-content-max-w: 960px;
    --pc-teal: #0d9488;
    --pc-teal-dark: #0f766e;
}

/* ============================================================
   1. サイドバー — 常時表示・ダークテーマ
   ============================================================ */
@media (min-width: 1025px) {
    /* サイドバーを常時表示 */
    .menu_nav {
        left: 0 !important;
        opacity: 1 !important;
        width: var(--pc-sidebar-w) !important;
        background: var(--pc-sidebar-bg) !important;
        border-right: 1px solid var(--pc-sidebar-divider) !important;
        box-shadow: none !important;
        transition: none !important;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: #d1d5db transparent;
    }
    .menu_nav::-webkit-scrollbar {
        width: 4px;
    }
    .menu_nav::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 2px;
    }

    /* メニューコンテナ */
    .menu-container {
        background: transparent !important;
        border: none !important;
        max-width: none !important;
    }

    /* メニューリスト */
    .menu-list {
        padding-top: 0.75rem !important;
    }
    .menu-list a {
        color: var(--pc-sidebar-text) !important;
        text-decoration: none !important;
        display: block;
    }
    .menu-list a:hover {
        color: var(--pc-sidebar-text-hover) !important;
    }

    /* メニューアイテム */
    .menu-item {
        border-bottom: 1px solid var(--pc-sidebar-divider) !important;
        padding: 13px 18px !important;
        transition: background 0.2s ease;
        border-radius: 0;
        position: relative;
    }
    .menu-item:hover {
        background: #f3f4f6 !important;
    }
    .menu-item span {
        color: var(--pc-sidebar-text) !important;
        font-size: 0.82rem !important;
        font-weight: 500 !important;
    }
    .menu-item:hover span {
        color: var(--pc-sidebar-text-hover) !important;
    }
    .menu-item i {
        color: #9ca3af !important;
        font-size: 0.65rem !important;
    }
    .menu-item img {
        width: 20px !important;
        height: 20px !important;
        border-radius: 4px;
    }

    /* アクティブ状態 */
    .menu-list a.pc-sidebar-active .menu-item {
        background: #f0fdfa !important;
        border-left: 3px solid var(--pc-sidebar-accent) !important;
    }
    .menu-list a.pc-sidebar-active .menu-item span {
        color: var(--pc-sidebar-accent) !important;
        font-weight: 700 !important;
    }

    /* セクションヘッダー */
    .menu-section {
        background: #f9fafb !important;
        color: #9ca3af !important;
        font-size: 0.68rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.08em !important;
        padding: 0.8rem 18px 0.4rem !important;
        border-bottom: 1px solid var(--pc-sidebar-divider) !important;
    }

    /* サイドバーフッター */
    .menu-container > div:last-child {
        border-top: 1px solid var(--pc-sidebar-divider) !important;
        padding: 1.25rem 18px !important;
    }
    .menu-container > div:last-child img {
        opacity: 0.6;
        transition: opacity 0.2s;
    }
    .menu-container > div:last-child:hover img {
        opacity: 1;
    }

    /* ハンバーガーメニューボタン非表示 */
    .toggle_btn {
        display: none !important;
    }

    /* オーバーレイマスク非表示 */
    #mask {
        display: none !important;
    }
    .open #mask {
        display: none !important;
    }

    /* ボトムナビ非表示 */
    .bottom-nav {
        display: none !important;
    }

    /* フッタースペーサー非表示 */
    .mobile-footer-spacer {
        display: none !important;
    }
}

/* ============================================================
   2. ヘッダー — fixed + サイドバー右側から
   ============================================================ */
@media (min-width: 1025px) {
    .home-fixed-header {
        left: var(--pc-sidebar-w) !important;
        right: 0 !important;
        height: var(--pc-header-h) !important;
        padding: 0 2rem !important;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        background: rgba(255, 255, 255, 0.96) !important;
    }
    /* ヘッダーロゴ */
    .home-fixed-header > a {
        left: calc(50%) !important;
    }
    /* ヘッダースペーサー */
    .home-fixed-header + div {
        height: var(--pc-header-h) !important;
    }
}

/* ============================================================
   3. コンテンツエリア — サイドバー分のオフセット
   ============================================================ */
@media (min-width: 1025px) {
    .content-wrapper {
        margin-left: var(--pc-sidebar-w) !important;
        padding-top: 0 !important;
    }

    /* homeページコンテナ — 中央寄せ */
    .home-page {
        max-width: var(--pc-content-max-w) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 1.5rem !important;
    }

    /* 汎用コンテナ — 中央寄せ */
    .content-wrapper > .container,
    .content-wrapper > .container-fluid {
        max-width: var(--pc-content-max-w) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    /* ゲストログインカード */
    #guestLoginCard,
    #guestLoginCardCenter {
        left: var(--pc-sidebar-w) !important;
        width: calc(100% - var(--pc-sidebar-w)) !important;
    }

    /* 共通ローディング — サイドバー分オフセットして中央に */
    #loadingOverlay {
        left: var(--pc-sidebar-w) !important;
        width: calc(100% - var(--pc-sidebar-w)) !important;
    }

    /* 成功/キャンセルバナー */
    #success-top-banner,
    #cancel-top-banner {
        left: var(--pc-sidebar-w) !important;
    }

    /* シェアフロートボタン */
    .share-float-btn {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* ============================================================
   4. ホームページ — セクションレイアウト改善
   ============================================================ */
@media (min-width: 1025px) {

    /* --- me農家セクション --- */
    .pickup-ec-section .find-farmer-banner {
        max-width: 720px;
    }

    /* --- イベントセクション --- */
    .event-section {
        padding: 1.5rem 0 1.5rem !important;
    }
    .event-section-header {
        padding: 0 1.5rem 0.85rem !important;
    }
    .event-section-title {
        font-size: 1.15rem !important;
    }
    /* 横スクロール → グリッド */
    .event-scroll-container {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
        gap: 1.5rem !important;
        overflow-x: visible !important;
        padding: 0 1.5rem !important;
    }
    .event-slide {
        flex: none !important;
        min-width: 0 !important;
    }
    .event-slide:last-child {
        margin-right: 0 !important;
    }
    /* スクロールドット非表示 */
    .event-scroll-dots {
        display: none !important;
    }
    /* スクロールヒント非表示 */
    .event-scroll-hint {
        display: none !important;
    }
    /* イベントカード：PC用ホバー（1枚カード全体） */
    .event-home-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    }
    .event-home-card .event-banner-link:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    .event-home-card .event-list-item-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    /* バナー：農家表示を少し上へ。オーバーレイ文言が上に伸びたときに「参加者募集中」と被らないよう上余白を確保 */
    .event-banner-farmer {
        top: 0.35rem !important;
    }
    .event-banner-participants {
        top: 0.35rem !important;
    }
    .event-banner-overlay {
        padding-top: 2.35rem !important;
    }

    /* --- ピックアップ農家さん --- */
    .pickup-farmers-section {
        padding: 1.5rem 0 2rem !important;
    }
    .pickup-farmers-header {
        padding: 0 1.5rem 0.85rem !important;
    }
    .pickup-farmers-title {
        font-size: 1.15rem !important;
    }
    /* 無限スクロール → グリッド */
    .pickup-farmers-scroll {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem !important;
        overflow: visible !important;
        padding: 0 1.5rem !important;
    }
    .pickup-farmers-track {
        display: contents !important;
        animation: none !important;
    }
    /* 2つ目の無限スクロール複製を非表示 */
    .pickup-farmers-track[aria-hidden="true"] {
        display: none !important;
    }
    .pickup-farmer-card {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 5;
    }
    .pickup-farmer-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    }

    /* --- ピックアップEC商品 --- */
    .pickup-ec-section {
        padding: 1rem 0 2rem !important;
    }
    .pickup-ec-title {
        font-size: 1.15rem !important;
    }
    .pickup-ec-scroll {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem !important;
        overflow: visible !important;
        padding: 0 1.5rem 0.25rem !important;
    }
    .pickup-ec-card {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 5;
    }
    .pickup-ec-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    }

    /* --- セクション共通パディング --- */
    .ec-concept-copy {
        padding: 0 1.5rem !important;
    }
    .find-farmer-banner {
        padding: 4px 1.5rem 0 !important;
    }

    /* --- セクションタイトル --- */
    .pickup-ec-title,
    .pickup-farmers-title,
    .event-section-title {
        font-weight: 700 !important;
    }
}

/* ============================================================
   5. 農家showページ — ヒーロー制限
   ============================================================ */
@media (min-width: 1025px) {
    .farmer-hero {
        max-height: 62vh !important;
        min-height: 380px !important;
        border-radius: 20px !important;
        margin: 1rem 2rem 0 !important;
    }
    .farmer-hero-bg img,
    .farmer-hero-bg video.farmer-hero-media {
        object-position: center 20% !important;
    }
    .farmer-show {
        max-width: 960px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* 他の農家さん — ホームのピックアップ農家と同サイズ */
    .other-farmers-scroll {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.25rem !important;
    }
    .other-farmer-card {
        aspect-ratio: 4 / 5 !important;
    }
}

/* ============================================================
   6. 日誌showページ — ヒーロー制限
   ============================================================ */
@media (min-width: 1025px) {
    .journal-hero {
        max-height: 62vh !important;
        min-height: 380px !important;
        border-radius: 20px !important;
        margin: 1rem 2rem 0 !important;
    }
}

/* ============================================================
   7. イベントページ
   ============================================================ */
@media (min-width: 1025px) {
    .events-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .events-header {
        padding-left: 2rem !important;
    }
    .events-tabs {
        padding-left: 2rem !important;
    }
}

/* ============================================================
   8. 農家マップページ
   ============================================================ */
@media (min-width: 1025px) {
    /* style_farmer_map.css の margin-left を打ち消す（content-wrapper で既にオフセット済み） */
    .farmer-map-page {
        margin-left: 0 !important;
        height: calc(100dvh - var(--pc-header-h)) !important;
    }
    .fmap-breadcrumb-wrap {
        padding-left: 2rem !important;
    }
    .fmap-tabs {
        padding-left: 2rem !important;
    }
}

/* ============================================================
   9. me友ページ — 2カラムグリッド
   ============================================================ */
@media (min-width: 1025px) {
    .me-friends-instagram {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 2rem;
    }
}

/* ============================================================
   10. DMページ
   ============================================================ */
@media (min-width: 1025px) {
    .dm-page {
        padding-bottom: 0 !important;
    }
    .dm-sidebar {
        padding-top: 1rem !important;
    }
    .dm-sidebar-header {
        padding-top: 1rem !important;
    }
}

/* ============================================================
   11. ECショップページ
   ============================================================ */
@media (min-width: 1025px) {
    /* ショップ：サイドバー表示 */
    .shop-page-body .menu_nav {
        display: block !important;
        left: 0 !important;
        opacity: 1 !important;
    }
    .shop-page-body .content-wrapper {
        margin-left: var(--pc-sidebar-w) !important;
    }

    /* ショップ用ハンバーガーメニュー非表示 */
    .shop-page-body .shop-header-menu#shopMenuOpen {
        display: none !important;
    }

    /* カート・履歴を右寄せ */
    .shop-page-body .shop-header-actions {
        margin-left: auto !important;
    }

    /* ヘッダー・ボトムバー：サイドバー右側のコンテンツ中央に配置 */
    .shop-page-body .shop-header {
        left: calc(50% + var(--pc-sidebar-w) / 2) !important;
        transform: translateX(-50%) !important;
    }
    .shop-page-body .shop-bottom-bar {
        left: calc(50% + var(--pc-sidebar-w) / 2) !important;
        transform: translateX(-50%) !important;
    }

    /* コンテナ */
    .shop-page-body .container.home-page {
        max-width: var(--shop-max-w) !important;
        margin: 0 auto !important;
    }
}

/* ============================================================
   11b. meアルバムページ — 2カラムグリッド
   ============================================================ */
@media (min-width: 1025px) {
    .me-albums-page {
        max-width: 960px !important;
    }
    .me-albums-page .page-center-title {
        grid-column: 1 / -1;
    }
    .me-albums-page nav {
        grid-column: 1 / -1;
    }
    /* アルバムカードを2列グリッドに */
    .me-albums-page {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
    }
    .me-albums-page > nav,
    .me-albums-page > h1 {
        grid-column: 1 / -1;
    }
}

/* ============================================================
   11c. プロフィールページ
   ============================================================ */
@media (min-width: 1025px) {
    /* プロフィール写真を中央寄せ */
    .home-page-top .profile {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* ============================================================
   12. 共通要素 — PC調整
   ============================================================ */
@media (min-width: 1025px) {
    /* パンくずリスト */
    .content-wrapper .breadcrumb,
    .content-wrapper nav[aria-label="breadcrumb"] {
        padding-left: 2rem !important;
        padding-top: 1.25rem !important;
    }

    /* ホームに戻るリンク */
    .page-home-back-link {
        padding-left: 2rem !important;
    }

    /* 推奨カードグリッド */
    .recommended-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* 日誌フィードグリッド — 4列 */
    .journal-feed-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
    }

    /* 日誌セクション — 中央寄せ */
    .journal-feed-block {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    .journal-feed-section {
        max-width: var(--pc-content-max-w);
        margin-left: auto;
        margin-right: auto;
    }

    /* モーダル */
    .pf-modal-panel {
        left: calc(50% + var(--pc-sidebar-w) / 2) !important;
    }

    /* me日誌フロートボタン */
    .journal-float-btn {
        right: 2rem !important;
        bottom: 2rem !important;
    }

    /* シェアフロートボタン */
    .share-float-btn {
        right: 2rem !important;
        bottom: 2rem !important;
    }
}

/* ============================================================
   13. 中画面 (1025px–1279px) — サイドバー幅縮小
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1279px) {
    :root {
        --pc-sidebar-w: 230px;
    }
}

/* ============================================================
   14. PC ホバーエフェクト・トランジション強化
   ============================================================ */
@media (min-width: 1025px) {
    /* カード共通ホバー */
    .combo-info-card:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
        transform: translateY(-1px);
    }
    .combo-info-card {
        transition: box-shadow 0.25s ease, transform 0.25s ease;
    }

    /* リンクのスムーズなトランジション */
    .menu-list a {
        transition: color 0.2s ease;
    }
}

/* ============================================================
   15. PC用タイポグラフィ微調整
   ============================================================ */
@media (min-width: 1025px) {
    /* ページタイトル */
    .page-center-title {
        font-size: 1.3rem !important;
    }

    /* コンテンツタイトル */
    .content-title {
        font-size: 1.5rem !important;
    }

    /* セクションタイトル */
    .section-title {
        font-size: 1.05rem !important;
    }
}

/* ============================================================
   16. ワイドスクリーン (1440px+)
   ============================================================ */
@media (min-width: 1440px) {
    .event-scroll-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .pickup-farmers-scroll {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .pickup-ec-scroll {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .recommended-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}