/* ============================================================
   1. サイト基本設定（フォント・ロゴ・共通パーツ）
   ============================================================ */
body { font-family: 'Noto Sans JP', sans-serif; font-size: 18px; font-weight: 400; line-height: 2; }
.sp-megamenu-parent > li > a, .menu.nav-pills > li > a { font-family: 'Noto Sans JP', sans-serif; }

/* 外部リンクアイコン */
a[target="_blank"]::after { font-family: "Font Awesome 5 Free"; content: '\f360'; font-size: 105%; font-weight: 900; margin: 0 3px; }

/* ロゴサイズ制御 */
.logo-image, .logo-image-phone { height: 60px; }
@media(max-width: 992px) { .logo-image, .logo-image-phone { height: 36px; } }

/* 配色設定 */
#sp-bottom { background-color: #8D95A3; color: #FFFFFF; }
#sp-bottom a { color: #FFFFFF; }
#sp-footer { background-color: #6C727C; }

/* ============================================================
   2. 記事内の見出しデザイン (h1〜h4)
   ============================================================ */
h1:not([class]) { padding: 0.25em 0.5em; color: #494949; border-left: solid 5px #7db4e6; }
h2:not([class]) { padding: 0.5em; background: aliceblue; box-shadow: 0 0 4px rgba(0, 0, 0, 0.23); }
h3:not([class]) { padding: 0.5em; color: #494949; background: #fffaf4; border-left: solid 5px #ffaf58; }
h4:not([class]) { border-bottom: solid 3px black; }

/* ============================================================
   3. メニュー復活 & 全体余白の最適化
   ============================================================ */
#sp-section-1 { display: block !important; padding: 0 !important; margin: 0 !important; }
#sp-main-body { padding-top: 15px !important; padding-bottom: 40px !important; }
#sp-main-body, #sp-component { overflow: visible !important; height: auto !important; }

/* 不要なセクション排除 */
#sp-section-2, #sp-section-3, #sp-title, .sp-page-title, .sp-page-title:empty { display: none !important; height: 0 !important; }
.std-article, .blog-modern-layout, #article-list-container, .py-4, .py-5 { padding-top: 0 !important; margin-top: 0 !important; }
.pagination, .pagination-wrapper, .counter { display: none !important; }

/* ============================================================
   4. HOME (Itemid 101) 専用：Bio-Kun横並び
   ============================================================ */
.itemid-101 .std-article-header { display: none !important; }
.itemid-101 .hero-flex-container {
    display: flex !important; flex-direction: row !important; align-items: center !important;
    justify-content: center !important; gap: 25px !important; padding: 10px 20px !important;
    margin: 0 auto 15px !important; background: #f8f9fa; border-radius: 12px; border: 1px solid #eee;
}
.itemid-101 .hero-visual-image img { max-height: 80px !important; width: auto !important; }
.itemid-101 .hero-main-title { font-size: 1.5rem !important; margin-bottom: 0 !important; color: #181878; font-weight: 800; }
.itemid-101 .hero-sub-lead { font-size: 0.85rem !important; margin-top: 0 !important; color: #666; }

/* ============================================================
   5. ネイティブ広告装飾（記事内 & モジュール共通）
   ============================================================ */
/* 記事本文内の広告カード (.native-ad-card) と RAXOモジュールの両方に対応 */
.native-ad-card,
#native-ads-section .raxo-item-top,
.home-recommend-card .raxo-item-top {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-top: 6px solid #ffaf58 !important; /* オレンジのアクセント */
    border-radius: 15px !important;
    padding: 25px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
    margin: 30px 0 !important;
    display: block !important;
}

.native-ad-card:hover,
#native-ads-section .raxo-item-top:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.12) !important;
}

/* 広告内のバッジ（注目製品情報） */
.ad-badge {
    display: inline-block !important;
    background: #ffaf58 !important;
    color: #fff !important;
    padding: 3px 12px !important;
    border-radius: 50px !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    margin-bottom: 15px !important;
}

/* 広告タイトル */
.ad-title, .raxo-title a {
    color: #181878 !important;
    font-weight: 900 !important;
    font-size: 1.25rem !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
}

/* 広告内のボタン */
.btn-ad {
    display: inline-block !important;
    background: #181878 !important;
    color: #fff !important;
    padding: 8px 20px !important;
    border-radius: 50px !important;
    font-size: 0.85rem !important;
    font-weight: bold !important;
    margin-top: 10px !important;
}

/* ============================================================
   6. 著者プロフィールカード & 右サイドバー
   ============================================================ */
.author-profile-card.horizontal {
    background: #ffffff; border: 1px solid #e9ecef; border-top: 5px solid #181878;
    border-radius: 15px; padding: 30px !important; margin: 30px 0 !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.apc-body { display: flex; gap: 35px; align-items: flex-start; }
.apc-visual { flex-shrink: 0; width: 130px; }
.apc-img-wrap img { width: 100%; border-radius: 12px; border: 4px solid #f8f9fa; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.apc-name { color: #181878; font-size: 1.5rem; font-weight: 800; margin-bottom: 5px; }

/* サイドバー新規ユーザー */
.sidebar-card { background: #fff !important; border: 1px solid #e9ecef !important; border-top: 5px solid #181878 !important; border-radius: 12px; padding: 20px !important; margin-bottom: 30px; }
.user-card-item { background: #f8f9fa; border-radius: 10px; padding: 12px; margin-bottom: 12px; border: 1px solid #eee; transition: 0.3s ease; }
.user-card-item:hover { background: #fff; border-color: #181878; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.user-tag-box { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.user-attribute-tag { font-size: 0.7rem; background: #fff; border: 1px solid #ddd; padding: 2px 10px; border-radius: 20px; color: #666; }

/* ============================================================
   7. その他記事カード & ページ別微調整
   ============================================================ */
.magazine-card { transition: all 0.3s ease; border-radius: 15px !important; border: 1px solid #eee !important; }
.magazine-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important; }
.book-card-final { transition: transform 0.3s; border-radius: 12px !important; border: 1px solid #dee2e6 !important; }
.ratio-book-fixed { position: relative; width: 100%; padding-top: 133.33% !important; background: #f8f9fa; overflow: hidden; }

/* 製品ガイド空き除去 / コラム日付消去 / Xシェアボタン */
.itemid-352 #article-list-container { display: none !important; }
.itemid-112 .std-article-header .text-muted.small,
.itemid-112 .article-info, .itemid-885 .article-info, .itemid-115 .article-info, .itemid-114 .article-info { display: none !important; }
.btn-x-share { background-color: #000 !important; color: #fff !important; font-weight: bold; border-radius: 50px; }

/* スマホ表示調整 */
@media (max-width: 768px) {
    .apc-body, .itemid-101 .hero-flex-container { flex-direction: column !important; text-align: center !important; }
}