/* =========================================
   パンくずリスト（Yoast SEO）
   
   固定配置アプローチ：ヘッダーの直下に固定
   他の要素に影響を与えない
   
   フォント: Noto Sans JP / Questrial
   カラー: #333, #555, #666, #8f601e
========================================= */

/* =========================================
   基本レイアウト（固定配置）
========================================= */
.breadcrumbs-wrapper {
    position: fixed;
    top: 140px; /* ヘッダーの高さ */
    left: 0;
    right: 0;
    z-index: 999; /* ヘッダー(1000)の下 */
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    padding: 15px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.breadcrumbs {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Yoast SEOが出力する基本要素 */
.breadcrumbs,
.breadcrumbs span,
.breadcrumbs a {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    letter-spacing: 0.05em !important;
    color: #666 !important;
    line-height: 1.6 !important;
}

/* =========================================
   リンクスタイル
========================================= */
.breadcrumbs a {
    color: #666 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.breadcrumbs a:hover {
    color: #8f601e !important; /* ブランドカラー */
}

/* 現在のページ（リンクなし） */
.breadcrumbs .breadcrumb_last {
    color: #333 !important;
    font-weight: 400 !important;
}

/* =========================================
   次の要素のpadding調整
   パンくずリストが固定配置なので、次の要素に余白を確保
========================================= */

/* SHOPページのヘッダー */
.woocommerce-shop .shop-header {
    padding-top: 220px; /* パンくずリストの高さ分 */
}

/* 商品詳細ページ */
.single-product .woocommerce-product-gallery {
    padding-top: 220px; /* パンくずリストの高さ分 */
}

/* カート・チェックアウトページ */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
    padding-top: 220px; /* パンくずリストの高さ分 */
}

/* アーカイブページ */
.post-type-archive .shop-header {
    padding-top: 220px; /* パンくずリストの高さ分 */
}

/* EVENTSページ */
.post-type-archive-events .events-hero,
.single-events .events-hero {
    padding-top: 220px; /* パンくずリストの高さ分 */
}

/* PAST EVENTSページ（カスタムテンプレート） */
.page-template-archive-events-past .events-hero {
    padding-top: 220px; /* パンくずリストの高さ分 */
}

/* COMPANYページ */
.page-template-page-company .company-hero {
    padding-top: 220px; /* パンくずリストの高さ分 */
}

/* NEWSページ */
.page-template-page-news .news-hero {
    padding-top: 220px; /* パンくずリストの高さ分 */
}

/* CONTACTページ */
.page-template-page-contact .contact-hero {
    padding-top: 220px; /* パンくずリストの高さ分 */
}

/* =========================================
   レスポンシブ対応
========================================= */
@media screen and (max-width: 768px) {
    .breadcrumbs-wrapper {
        top: 60px; /* モバイルヘッダーの高さ */
        padding: 12px 0;
    }
    
    .breadcrumbs {
        padding: 0 15px;
    }
    
    .breadcrumbs,
    .breadcrumbs span,
    .breadcrumbs a {
        font-size: 12px !important;
        letter-spacing: 0.03em !important;
    }
    
    /* モバイル時の次の要素のpadding調整 */
    .woocommerce-shop .shop-header,
    .single-product .woocommerce-product-gallery,
    .woocommerce-cart .woocommerce,
    .woocommerce-checkout .woocommerce,
    .post-type-archive .shop-header,
    .post-type-archive-events .events-hero,
    .single-events .events-hero,
    .page-template-archive-events-past .events-hero,
    .page-template-page-company .company-hero,
    .page-template-page-news .news-hero,
    .page-template-page-contact .contact-hero {
        padding-top: 120px; /* パンくずリストの高さ分（モバイル） */
    }
}

@media screen and (max-width: 480px) {
    .breadcrumbs,
    .breadcrumbs span,
    .breadcrumbs a {
        font-size: 11px !important;
    }
}

/* =========================================
   オプション: アイコン付きホームリンク
   （必要に応じてコメント解除）
========================================= */
/*
.breadcrumbs span:first-child a::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    vertical-align: middle;
}
*/