/* ======================================
   rihobeer.com UI最適化 v2.1.0 (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 を非表示 --- */
.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;
}

/* カード4列 */
.front-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

/* カード3列 */
.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;
}

/* About */
.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;
    }
}

/* グリッド強制4列 */
.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;
}


/* front-sections をコンテンツ最上部に近づける */
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-section内のAdSense自動挿入を抑制 */
.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;
}