/* ======================================
   rihobeer.com UI最適化 v2.3.1 (2026-03-18)
   第13条準拠: Cocoon標準テーマ準拠
   ====================================== */

/* --- ヘッダーコンパクト化 --- */
.header-container .site-logo-image,
.header-container-in .header-in img {
    max-height: 280px !important;
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
}

/* --- 記事タイトル強調 --- */
.article h1.entry-title {
    font-size: 1.6em;
    line-height: 1.4;
    margin-bottom: 0.5em;
    padding-bottom: 0.3em;
    border-bottom: 2px solid #e0e0e0;
}

/* --- 目次改善 --- */
.toc {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 1em;
    margin: 1.5em 0;
}

/* --- モバイル最適化 --- */
@media (max-width: 768px) {
    .header-container .site-logo-image,
    .header-container-in .header-in img {
        max-height: 160px !important;
    }
    .article h1.entry-title {
        font-size: 1.3em;
    }
    .navi-in ul li {
        font-size: 0.85em;
    }
}

/* ======================================
   UI最適化 v2.2.0: E-E-A-T + トップページ改善
   ====================================== */

.author-box {
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 1.2em !important;
    margin: 1em 0 !important;
    background: #fafafa !important;
}
.author-box .author-name {
    font-size: 1.1em !important;
    font-weight: bold !important;
}
.sidebar .widget {
    margin-bottom: 1.5em;
}
.sidebar .widget-title {
    font-size: 1em;
    padding: 0.5em 0.8em;
    border-radius: 4px;
}
.popular-entry-card {
    transition: transform 0.2s ease;
}
.popular-entry-card:hover {
    transform: translateY(-2px);
}
.tagcloud a {
    display: inline-block !important;
    padding: 4px 10px !important;
    margin: 3px !important;
    border: 1px solid #ddd !important;
    border-radius: 16px !important;
    font-size: 0.85em !important;
    text-decoration: none !important;
    transition: background 0.2s !important;
}
.tagcloud a:hover {
    background: #f0f0f0 !important;
}
.breadcrumb {
    padding: 8px 0 !important;
    margin-bottom: 8px !important;
    font-size: 0.85em !important;
}
.entry-date {
    font-size: 0.85em;
    color: #666;
}
@media (max-width: 768px) {
    .popular-entry-card-thumb {
        min-height: 120px !important;
    }
    .tagcloud a {
        font-size: 0.8em !important;
        padding: 3px 8px !important;
    }
}

/* ======================================
   UI最適化 v2.3.1: recommend_books制御 + ナビ + 言語
   ====================================== */

.recommendations {
    display: none !important;
}
.content-top .widget_polylang {
    max-width: 200px !important;
    margin-left: auto !important;
}
.content-top .widget_polylang select {
    padding: 4px 8px !important;
    font-size: 0.85em !important;
}
.navi-in ul {
    justify-content: center !important;
}
.navi-in ul li a {
    padding: 8px 14px !important;
    font-size: 0.9em !important;
    white-space: nowrap !important;
}
@media (max-width: 768px) {
    .content-top .widget_polylang {
        display: none !important;
    }
}

/* --- グローバルナビ --- */
#navi {
    background: #fff !important;
    border-bottom: 2px solid #d4a017 !important;
    position: relative !important;
    z-index: 99 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}
#navi .navi-in ul {
    justify-content: center !important;
}
#navi .navi-in ul li a {
    color: #333 !important;
    padding: 10px 16px !important;
    font-size: 0.9em !important;
}
#navi .navi-in ul li a:hover {
    color: #d4a017 !important;
    background: #f8f4e8 !important;
}

/* ======================================
   フロントページ セクション型レイアウト
   ====================================== */
.front-sections {
    max-width: 100%;
    margin-bottom: 30px;
}
.front-section {
    margin-bottom: 25px;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
}
.front-section-title {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 0 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #d4a017;
    color: #333;
}
.front-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.front-cards-3 {
    grid-template-columns: repeat(3, 1fr);
}
.front-card {
    display: block;
    text-decoration: none;
    color: #333;
    border-radius: 6px;
    overflow: hidden;
    background: #fafafa;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid #eee;
}
.front-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.front-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}
.front-card-cat {
    display: inline-block;
    font-size: 0.7em;
    background: #d4a017;
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    margin: 8px 8px 4px;
}
.front-card-title {
    display: block;
    font-size: 0.85em;
    font-weight: bold;
    padding: 0 8px 10px;
    line-height: 1.4;
}
.front-tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.front-tool-link {
    display: block;
    text-align: center;
    padding: 10px;
    background: #fef3c7;
    color: #92400e;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: bold;
    transition: background 0.2s;
    border: 1px solid #f59e0b;
}
.front-tool-link:hover {
    background: #fde68a;
}
.front-about-inner {
    display: flex;
    align-items: center;
    gap: 20px;
}
.front-about-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.front-about-text h3 {
    margin: 0 0 8px;
    font-size: 1.1em;
}
.front-about-text p {
    font-size: 0.9em;
    color: #555;
    margin: 0 0 8px;
}
.front-about-links a {
    display: inline-block;
    margin-right: 12px;
    font-size: 0.85em;
    color: #d4a017;
    text-decoration: none;
}
.sidebar .tagcloud {
    max-height: 300px;
    overflow: hidden;
}
@media (max-width: 768px) {
    .front-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .front-cards-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .front-card img {
        height: 100px;
    }
    .front-tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .front-about-inner {
        flex-direction: column;
        text-align: center;
    }
}
.entry-content .front-cards {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 15px !important;
}
.entry-content .front-cards-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}
.entry-content .front-tools-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
}
@media (max-width: 768px) {
    .entry-content .front-cards,
    .entry-content .front-cards-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .entry-content .front-tools-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

body.home .article-header,
body.home .sns-share,
body.home .date-tags,
body.home .entry-title {
    display: none !important;
}
body.home .entry-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.home .entry-content p:first-child:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.home .dn_sbm_fukidashi {
    margin-top: 0 !important;
}
.front-sections .google-auto-placed,
.front-sections ins.adsbygoogle {
    display: none !important;
}
.sidebar .tagcloud {
    max-height: 280px !important;
    overflow: hidden !important;
}
.sidebar .tagcloud a {
    display: inline-block !important;
    padding: 4px 12px !important;
    margin: 3px !important;
    border: 1px solid #ddd !important;
    border-radius: 20px !important;
    font-size: 0.8em !important;
    text-decoration: none !important;
    color: #555 !important;
    background: #fafafa !important;
    transition: all 0.2s !important;
}
.sidebar .tagcloud a:hover {
    background: #f0e6c8 !important;
    border-color: #d4a017 !important;
    color: #333 !important;
}

/* ======================================
   v3.0.1: ナビ言語リンク非表示（v2.3.1互換）
   ====================================== */
#navi li.lang-item {
    display: none !important;
}

/* ======================================
   Phase 4-9 モダン化 (2026-03-19)
   ====================================== */

/* Phase 4-1: PC言語ドロップダウン完全非表示 */
.content-top .widget_polylang {
    display: none !important;
}

/* Phase 4-2: スティッキーナビ（スクロール時固定） */
#navi {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
}

/* Phase 4-3: ナビホバーアニメーション（ゴールド下線） */
#navi .navi-in a {
    position: relative !important;
}
#navi .navi-in a::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 0 !important;
    height: 3px !important;
    background: #d4a017 !important;
    transition: width 0.3s ease, left 0.3s ease !important;
}
#navi .navi-in a:hover::after {
    width: 80% !important;
    left: 10% !important;
}

/* Phase 5-1: フロントページ投稿一覧の短縮 */
body.home .list {
    max-height: 1200px !important;
    overflow: hidden !important;
    position: relative !important;
}
body.home .list::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 120px !important;
    background: linear-gradient(transparent, #fff) !important;
    pointer-events: none !important;
}

/* Phase 5-2: カード影・ホバー強化 */
.front-card {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
.front-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* Phase 6-1: セクション見出し左ボーダーアクセント */
.front-section-title {
    border-left: 4px solid #d4a017 !important;
    padding-left: 16px !important;
    border-bottom: none !important;
    font-size: 1.35em !important;
    font-weight: 700 !important;
}

/* Phase 6-2: コンテンツ余白改善 */
body.home .main {
    padding: 24px 20px !important;
}
@media (max-width: 768px) {
    body.home .main {
        padding: 16px 12px !important;
    }
}

/* Phase 8-1: フッターダークテーマ */
#footer {
    background-color: #1a1a2e !important;
    color: #ccc !important;
    padding: 2em 0 !important;
}
#footer a {
    color: #d4a017 !important;
    transition: color 0.2s !important;
}
#footer a:hover {
    color: #f0c040 !important;
}
#footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    padding-top: 1em !important;
}
#footer .site-name-text {
    color: #fff !important;
}
#footer .copyright {
    color: #999 !important;
}


/* ======================================
   Phase 10: 余白最適化 + モダンレイアウト (2026-03-19)
   ====================================== */

/* ヘッダーコンテナ全体の高さ制限 */
.header-container {
    max-height: 240px !important;
    overflow: hidden !important;
}
@media (max-width: 768px) {
    .header-container {
        max-height: 140px !important;
    }
}

/* 検索ボックスの余白縮小 */
.search-box {
    margin: 8px 0 12px !important;
}

/* ナビ下の余白除去 */
#navi {
    margin-bottom: 0 !important;
}

/* コンテンツエリア上部の余白縮小 */
.content-in {
    padding-top: 8px !important;
}
body.home .content-in {
    padding-top: 0 !important;
}

/* フロントページのメインエリア余白最適化 */
body.home .main {
    padding: 12px 16px !important;
}
@media (max-width: 768px) {
    body.home .main {
        padding: 8px 10px !important;
    }
}

/* セクション間の余白縮小 */
.front-section {
    margin-bottom: 16px !important;
    padding: 16px !important;
}

/* カード画像の高さをPC/モバイルで最適化 */
.front-card img {
    height: 160px !important;
    object-fit: cover !important;
}
@media (max-width: 768px) {
    .front-card img {
        height: 110px !important;
    }
}

/* サイドバーとメインの間の余白 */
.content-in .wrap {
    gap: 16px !important;
}

/* 記事一覧カードの余白縮小 */
.entry-card-wrap {
    margin-bottom: 12px !important;
}

/* フロントページ全体をコンパクトに */
body.home .entry-content {
    padding: 0 !important;
}

/* ナビバーコンパクト化 */
#navi .navi-in a {
    padding: 8px 14px !important;
}

/* 検索ボックスの角丸・モダン化 */
.search-edit {
    border-radius: 24px !important;
    padding: 8px 16px !important;
    border: 1px solid #ddd !important;
    transition: border-color 0.2s !important;
}
.search-edit:focus {
    border-color: #d4a017 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(212,160,23,0.15) !important;
}
.search-submit {
    border-radius: 0 24px 24px 0 !important;
    background: #d4a017 !important;
    border: none !important;
    color: #fff !important;
}

/* ブルワリータブセクションの余白最適化 */
body.home .brewery-tabs {
    margin-top: 8px !important;
}


/* ======================================
   Phase 10-fix: ヘッダー余白修正 (2026-03-19)
   ====================================== */

/* ヘッダーコンテナはoverflow:visibleに戻す（ナビが隠れる問題の修正） */
.header-container {
    max-height: none !important;
    overflow: visible !important;
}

/* ヘッダーロゴ画像のみ高さ制限 */
.header-container .site-logo-image,
.header-container-in .header-in img {
    max-height: 200px !important;
}
@media (max-width: 768px) {
    .header-container .site-logo-image,
    .header-container-in .header-in img {
        max-height: 120px !important;
    }
}

/* ヘッダー全体の上下paddingを削減 */
.header .header-in {
    padding: 8px 0 !important;
}


/* ======================================
   Phase 11: モバイル徹底最適化 (2026-03-19)
   ====================================== */

@media (max-width: 480px) {

    /* --- 11-1: ヘッダーさらにコンパクト化 --- */
    .header .header-in {
        padding: 2px 0 !important;
    }
    .header-container .site-logo-image,
    .header-container-in .header-in img {
        max-height: 80px !important;
    }

    /* --- 11-2: 検索バー非表示（モバイルボトムバーに検索あり） --- */
    .search-box,
    #search-2,
    .content-top .search-box {
        display: none !important;
    }

    /* --- 11-3: ナビバーコンパクト＋横スクロール --- */
    #navi {
        border-bottom: 1px solid #d4a017 !important;
    }
    #navi .navi-in {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    #navi .navi-in ul {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        padding: 0 8px !important;
    }
    #navi .navi-in a {
        padding: 8px 12px !important;
        font-size: 0.82em !important;
        white-space: nowrap !important;
    }

    /* --- 11-4: コンテンツエリア余白最小化 --- */
    body.home .main {
        padding: 4px 8px !important;
    }
    body.home .entry-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* --- 11-5: フロントセクション最適化 --- */
    .front-section {
        margin-bottom: 10px !important;
        padding: 10px !important;
        border-radius: 6px !important;
    }
    .front-section-title {
        font-size: 1.05em !important;
        margin-bottom: 8px !important;
        padding-left: 10px !important;
        border-left-width: 3px !important;
    }

    /* --- 11-6: カード2列のまま余白最適化 --- */
    .entry-content .front-cards,
    .entry-content .front-cards-3 {
        gap: 8px !important;
    }
    .front-card {
        border-radius: 6px !important;
    }
    .front-card img {
        height: 90px !important;
    }
    .front-card-cat {
        font-size: 0.6em !important;
        padding: 1px 6px !important;
        margin: 4px 6px 2px !important;
    }
    .front-card-title {
        font-size: 0.75em !important;
        padding: 2px 6px 6px !important;
        line-height: 1.3 !important;
    }

    /* --- 11-7: ツールグリッド2列のまま余白最適化 --- */
    .entry-content .front-tools-grid {
        gap: 6px !important;
    }
    .front-tool-link {
        padding: 8px 4px !important;
        font-size: 0.75em !important;
        border-radius: 6px !important;
    }

    /* --- 11-8: E-E-A-T著者カードモバイル最適化 --- */
    .front-about-inner {
        gap: 12px !important;
    }
    .front-about-avatar {
        width: 70px !important;
        height: 70px !important;
    }
    .front-about-text h3 {
        font-size: 0.95em !important;
    }
    .front-about-text p {
        font-size: 0.82em !important;
        line-height: 1.5 !important;
    }

    /* --- 11-9: ブルワリータブ横スクロール化 --- */
    .brewery-tabs .tab-buttons,
    .tab-buttons {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 0 !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
    }
    .brewery-tabs .tab-buttons::-webkit-scrollbar,
    .tab-buttons::-webkit-scrollbar {
        display: none !important;
    }
    .tab-buttons button,
    .brewery-tabs .tab-buttons button {
        flex-shrink: 0 !important;
        font-size: 0.75em !important;
        padding: 6px 10px !important;
        white-space: nowrap !important;
        border-radius: 16px !important;
        margin-right: 4px !important;
    }

    /* --- 11-10: ブルワリー記事カードモバイル最適化 --- */
    .brewery-tabs .tab-content .entry-card-wrap,
    .tab-content .entry-card-wrap {
        margin-bottom: 8px !important;
    }
    .tab-content h3 {
        font-size: 0.85em !important;
        line-height: 1.3 !important;
    }
    .tab-content .entry-card-snippet {
        font-size: 0.78em !important;
        line-height: 1.4 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* --- 11-11: 吹き出し（マスコット会話）コンパクト化 --- */
    .speech-wrap {
        margin: 8px 0 !important;
    }
    .speech-balloon {
        padding: 8px 12px !important;
        font-size: 0.85em !important;
    }
    .speech-person {
        width: 50px !important;
    }

    /* --- 11-12: 広告制御（フロントページ上部） --- */
    body.home .header-container .google-auto-placed,
    body.home .header-container ins.adsbygoogle {
        max-height: 60px !important;
        overflow: hidden !important;
    }
    body.home .content-top .google-auto-placed,
    body.home .content-top ins.adsbygoogle {
        display: none !important;
    }

    /* --- 11-13: フッター前セクション（おすすめリンク・ブログ村）改善 --- */
    .footer-links-section,
    .blogmura-section {
        padding: 12px !important;
    }

    /* --- 11-14: reCAPTCHAバッジ非表示（フォームページ以外） --- */
    body.home .grecaptcha-badge {
        visibility: hidden !important;
    }

    /* --- 11-15: 全体のタッチターゲット最適化 --- */
    .front-tool-link,
    .front-card,
    .tab-buttons button,
    #navi .navi-in a {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .front-card {
        display: block !important;
    }

    /* --- 11-16: 記事タイトル最適化（個別記事ページ） --- */
    .article h1.entry-title {
        font-size: 1.15em !important;
        line-height: 1.35 !important;
        margin-bottom: 0.3em !important;
        padding-bottom: 0.2em !important;
    }

    /* --- 11-17: モバイルボトムバー改善 --- */
    .mobile-menu-buttons {
        box-shadow: 0 -2px 8px rgba(0,0,0,0.1) !important;
        border-top: 1px solid #eee !important;
    }
    .mobile-menu-buttons .menu-button {
        font-size: 0.7em !important;
    }

    /* --- 11-18: 記事ページ余白最適化 --- */
    .article {
        padding: 12px !important;
    }
    .entry-content {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
    .entry-content h2 {
        font-size: 1.2em !important;
        margin: 1.2em 0 0.6em !important;
    }
    .entry-content h3 {
        font-size: 1.05em !important;
        margin: 1em 0 0.5em !important;
    }

    /* --- 11-19: テーブルの横スクロール保証 --- */
    .entry-content table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* --- 11-20: 画像の角丸 --- */
    .entry-content img {
        border-radius: 6px !important;
    }
}

/* 481px〜768px タブレット補正 */
@media (min-width: 481px) and (max-width: 768px) {
    .header-container .site-logo-image,
    .header-container-in .header-in img {
        max-height: 100px !important;
    }
    .front-card img {
        height: 120px !important;
    }
    body.home .main {
        padding: 12px 14px !important;
    }
}

/* ======================================
   Phase 11-fix: 広告制御 + カードレイアウト修正 (2026-03-19)
   ====================================== */

@media (max-width: 480px) {

    /* --- 広告: ヘッダー周辺の自動広告を高さ制限 --- */
    .header-container ins.adsbygoogle,
    .header-container .google-auto-placed,
    .header .google-auto-placed,
    #header-in .google-auto-placed {
        max-height: 50px !important;
        overflow: hidden !important;
    }

    /* --- コンテンツ上部の自動配置広告を非表示 --- */
    body.home .content-top ins.adsbygoogle,
    body.home .content-top .google-auto-placed,
    body.home .wrap ins.adsbygoogle:first-of-type {
        display: none !important;
    }

    /* --- ページ上部のアンカー/オーバーレイ広告制限 --- */
    body.home .google-auto-placed:first-child,
    body.home ins.adsbygoogle[data-ad-format="auto"]:first-of-type {
        max-height: 90px !important;
        overflow: hidden !important;
    }

    /* --- カードを1列に変更（390pxで2列はテキスト潰れる） --- */
    .entry-content .front-cards,
    .entry-content .front-cards-3 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* --- 1列時のカード横レイアウト（画像左+テキスト右） --- */
    .front-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
    }
    .front-card img {
        width: 120px !important;
        min-width: 120px !important;
        height: auto !important;
        min-height: 80px !important;
        object-fit: cover !important;
        border-radius: 6px 0 0 6px !important;
    }
    .front-card-info {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 8px 10px !important;
        flex: 1 !important;
    }
    .front-card-cat {
        margin: 0 0 4px 0 !important;
        font-size: 0.65em !important;
    }
    .front-card-title {
        font-size: 0.82em !important;
        padding: 0 !important;
        line-height: 1.35 !important;
    }

    /* --- ツールグリッドは3列に（2列だとスカスカ） --- */
    .entry-content .front-tools-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }
    .front-tool-link {
        font-size: 0.7em !important;
        padding: 8px 2px !important;
    }
}

/* ======================================
   Phase 11-fix2: カテゴリラベル重なり修正 (2026-03-19)
   ====================================== */

@media (max-width: 480px) {
    /* カテゴリラベルを画像の上に重ねる（カード横レイアウト時） */
    .front-card {
        position: relative !important;
    }
    .front-card-cat {
        position: absolute !important;
        top: 4px !important;
        left: 4px !important;
        z-index: 2 !important;
        margin: 0 !important;
        padding: 2px 6px !important;
        font-size: 0.6em !important;
        border-radius: 3px !important;
        opacity: 0.9 !important;
    }
    /* タイトルの上マージンを除去 */
    .front-card-title {
        margin-top: 0 !important;
    }
}