@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.2.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/************************************
** ストラボブランドデザイン統合スタイル
************************************/

/* Google Fonts はここで @import しない（2026-08-03）。
   CSS内の @import は「style.css を読み終えてから」フォントCSSを取りに行く直列チェーンになり、
   レンダリングをブロックする。さらに Cocoon 本体が site-font-notosansjp で
   Noto Sans JP を別途読んでいるため、この @import は Noto Sans JP の二重取得になっていた。
   実測: 記事1ページでフォントだけで 1.67MB / 88ファイル。
   現在は functions.php の wp_head で Shippori Mincho のみ非同期ロードしている。 */

/* サイト全体のデフォルトフォント上書き */
body {
    /* 本文はWebフォントを使わず、OSごとの最良の和文書体を取りにいく（2026-08-03）。
       Noto Sans JP のWebフォント配信は記事1ページで56ファイル/1,071KBあり、
       ページ全体の転送量の半分近くを占めていたため廃止。
       - Android の sans-serif は Noto Sans CJK JP なので、そもそも同等の書体が端末にある
       - 游ゴシックはWindowsで細く描画され本文が読みづらいため意図的に入れていない
       - BIZ UDPGothic は Windows 10(1809+)/11 同梱のUD書体で可読性が高い */
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* サイトタイトル、記事タイトル、見出し、メニュー：親しみやすく洗練されたモダンサンセリフを適用 */
.site-name,
.entry-title,
.article h2,
.article h3,
.article h4,
.menu-header-container a,
.mobile-menu-buttons {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 800 !important;
}

/* サイト全体の基本色とリンクホバーアクション（ポップなコーラルへの変化） */
a {
    color: #1e293b;
    transition: color 0.25s ease, transform 0.25s ease;
}
a:hover {
    color: #ff6b6b;
    text-decoration: none;
}

/* カテゴリーラベルやタグ、新着バッジ（ぷっくりピル型・ビタミンコーラルグラデーション） */
.cat-label,
.new-entry::after,
.tag-link,
.tag-label {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.03em !important;
    border-radius: 9999px !important;
    padding: 3px 12px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
}
.cat-label:hover,
.tag-link:hover {
    transform: translateY(-2px) scale(1.04) !important;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.45) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   ポップ＆モダン 見出しデザイン (h2 / h3 / h4) のスタイリング
   ========================================================================== */

/* h2 見出し: ふんわりソフトグラデーション背景 ＋ 左グラデーションピルバー ＋ 軽やかなシャドウ */
.article h2 {
    position: relative !important;
    padding: 1.1rem 1.4rem 1.1rem 1.6rem !important;
    background: linear-gradient(135deg, #fff5f2 0%, #fffbf0 100%) !important;
    border: 1px solid #ffe8e0 !important;
    border-left: 7px solid #ff6b6b !important;
    border-radius: 16px !important;
    color: #1e293b !important;
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
    margin: 3.5rem 0 1.5rem 0 !important;
    box-shadow: 0 6px 20px -3px rgba(255, 107, 107, 0.1) !important;
}

/* h3 見出し: カラフルな丸ドットバッジ ＋ ポップなアクセントアンダーライン */
.article h3 {
    position: relative !important;
    padding: 0.75rem 0.5rem 0.75rem 2rem !important;
    border-bottom: 2px dashed #fed7aa !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
    color: #1e293b !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin: 2.5rem 0 1.2rem 0 !important;
}
.article h3::before {
    content: "" !important;
    position: absolute !important;
    left: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 12px !important;
    height: 12px !important;
    background: linear-gradient(135deg, #ff6b6b 0%, #ffa07a 100%) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(255, 107, 107, 0.4) !important;
}

/* h4 見出し: ポップな矢印ピルアクセント */
.article h4 {
    padding: 0.5rem 0 0.5rem 1.5rem !important;
    position: relative !important;
    color: #334155 !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    border: none !important;
    margin: 1.8rem 0 1rem 0 !important;
}
.article h4::before {
    content: "▶" !important;
    font-size: 0.75rem !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #ff8e53 !important;
}

/* ==========================================================================
   ヘッダー・ナビゲーションのスタイリング
   ========================================================================== */

/* ヘッダー全体 */
.header {
    background-color: #0f172a !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* サイト名（ロゴ） */
.site-name a {
    color: #fff !important;
    letter-spacing: 0.15em !important;
    transition: color 0.3s ease !important;
}
.site-name a:hover {
    color: #fbbf24 !important;
}
/* キャッチフレーズ */
.tagline {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* グローバルナビゲーション（ヘッダーメニュー） */
.navi,
.navi-in,
#navi {
    background-color: #0f172a !important;
}
#navi .navi-in a,
.menu-header a,
.menu-header-container a,
#navi .menu-item a,
.navi .menu-item a,
.navi-in .menu-header .menu-item a {
    color: #ffffff !important;
    font-size: 0.95rem !important;
    padding: 1.4rem 1.8rem !important;
    transition: all 0.3s ease !important;
}
#navi .navi-in a:hover,
.menu-header a:hover,
.menu-header-container a:hover,
#navi .menu-item a:hover,
.navi .menu-item a:hover,
.navi-in .menu-header .menu-item a:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #fbbf24 !important;
}

/* カレント（現在表示しているページ）のアクティブ表示 */
#navi .current-menu-item a,
#navi .current_page_item a,
.navi-in .menu-header .current-menu-item a {
    color: #fbbf24 !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* モバイルヘッダー・メニューボタン */
.mobile-header-menu-buttons {
    background-color: #0f172a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}
.mobile-menu-buttons {
    color: #fff !important;
}
.mobile-menu-buttons:hover {
    color: #fbbf24 !important;
}

/* ==========================================================================
   フッターのスタイリング
   ========================================================================== */

/* フッター全体 */
.footer {
    background-color: #0f172a !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-top: 4px solid #f0932b !important;
    padding: 50px 0 !important;
}
.footer a {
    color: rgba(255, 255, 255, 0.8) !important;
}
.footer a:hover {
    color: #fbbf24 !important;
}
.footer-copy {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.8rem !important;
    margin-top: 25px !important;
}

/* ==========================================================================
   ブログ共通 UIパーツ（角丸・シャドウ）の最適化
   ========================================================================== */

/* ボタンパーツの丸みとホバー挙動 */
.wp-block-button__link,
.btn,
.comment-submit {
    border-radius: 50px !important;
    font-weight: bold !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.wp-block-button__link:hover,
.btn:hover,
.comment-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
    filter: brightness(1.05) !important;
}

/* ==========================================================================
   ポップ＆モダン ブログカード（一覧・関連記事）のスタイリング
   ========================================================================== */

/* カード本体：コロンとした大きな角丸 ＋ 浮遊感のある多層ソフトシャドウ */
.entry-card-wrap,
.related-entry-card-wrap {
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
    margin-bottom: 24px !important;
    padding: 16px !important;
    display: block !important;
    position: relative !important;
}

/* ホバー時の軽快なリフトアップとポップなシャドウ拡散 */
.entry-card-wrap:hover,
.related-entry-card-wrap:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 30px -8px rgba(255, 107, 107, 0.15), 0 10px 15px -5px rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(255, 107, 107, 0.35) !important;
}

/* サムネイル画像エリア：角丸 ＋ 微ズーム */
.entry-card-thumb,
.related-entry-card-thumb {
    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
    background: #f1f5f9 !important;
}
.entry-card-thumb img,
.related-entry-card-thumb img,
.sidebar .wpp-thumbnail {
    border-radius: 14px !important;
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;
    object-fit: cover !important;
}
.entry-card-wrap:hover .entry-card-thumb img,
.related-entry-card-wrap:hover .related-entry-card-thumb img {
    transform: scale(1.06) !important;
}

/* サムネイル左上のカテゴリーラベル（フロート配置） */
.entry-card-thumb .cat-label,
.related-entry-card-thumb .cat-label {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 2 !important;
}

/* カード内タイトル：モダンサンセリフ ＋ ホバー時のポップカラー変化 */
.entry-card-title,
.related-entry-card-title {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.12rem !important;
    line-height: 1.55 !important;
    color: #1e293b !important;
    margin: 0 0 8px 0 !important;
    transition: color 0.25s ease !important;
}
.entry-card-wrap:hover .entry-card-title,
.related-entry-card-wrap:hover .related-entry-card-title {
    color: #ff6b6b !important;
}

/* 本文スニペット（抜粋） */
.entry-card-snippet {
    color: #64748b !important;
    font-size: 0.86rem !important;
    line-height: 1.65 !important;
    margin-bottom: 10px !important;
}

/* メタ情報（日付・タグ） */
.entry-card-meta {
    color: #94a3b8 !important;
    font-size: 0.8rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.entry-card-info .post-date,
.entry-card-info .post-update {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #f8fafc !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    color: #64748b !important;
}
.entry-card-categorys .entry-category {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border-radius: 9999px !important;
    padding: 2px 10px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   個別記事ページ（シングル投稿）のポップ＆モダン装飾
   ========================================================================== */

/* サイト全体・記事背景のトーン統一 */
body.blog,
body.single,
body.archive,
body.category,
body.tag {
    background-color: #f8fafc !important;
}
.article {
    background: #ffffff !important;
    border-radius: 24px !important;
    padding: 2.8rem 2.4rem !important;
    box-shadow: 0 10px 35px -5px rgba(0, 0, 0, 0.04), 0 2px 10px -2px rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
}
@media screen and (max-width: 768px) {
    .article {
        padding: 1.6rem 1.2rem !important;
        border-radius: 18px !important;
    }
}

/* 記事タイトル（H1） */
.entry-title {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif !important;
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 1.2rem !important;
}
@media screen and (max-width: 768px) {
    .entry-title {
        font-size: 1.45rem !important;
    }
}

/* ==========================================================================
   ポップ＆モダンな目次（TOC）デザイン
   ========================================================================== */
.toc {
    background: #ffffff !important;
    border: 2px solid #ffedd5 !important;
    border-radius: 20px !important;
    padding: 1.8rem !important;
    box-shadow: 0 10px 25px -5px rgba(255, 126, 95, 0.08) !important;
    margin: 2.5rem 0 !important;
    position: relative !important;
}
.toc::before {
    content: "INDEX 📋" !important;
    display: inline-block !important;
    background: linear-gradient(135deg, #ff7e5f, #feb47b) !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    padding: 4px 14px !important;
    border-radius: 9999px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 2px 8px rgba(255, 126, 95, 0.3) !important;
}
.toc-title {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin-bottom: 1rem !important;
    text-align: left !important;
}
.toc-content ol,
.toc-content ul {
    padding-left: 1.2rem !important;
}
.toc-content li {
    margin-bottom: 8px !important;
    line-height: 1.6 !important;
}
.toc-content a {
    color: #475569 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}
.toc-content a:hover {
    color: #ff6b6b !important;
    padding-left: 4px !important;
}

/* ==========================================================================
   ポップ＆モダンなページネーション
   ========================================================================== */
.pagination {
    margin: 3rem 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
}
.pagination .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.pagination .page-numbers:hover {
    background: #fff5f2 !important;
    color: #ff6b6b !important;
    border-color: #ff6b6b !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.2) !important;
}
.pagination .current {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(255, 107, 107, 0.4) !important;
    transform: scale(1.05) !important;
}

/* ==========================================================================
   サイドバー ウィジェットのポップ＆モダン化
   ========================================================================== */
.widget-sidebar-title {
    position: relative !important;
    padding: 0.75rem 1rem 0.75rem 1.2rem !important;
    background: linear-gradient(135deg, #fff5f2 0%, #fffbf0 100%) !important;
    border-left: 5px solid #ff7e5f !important;
    border-radius: 12px !important;
    color: #1e293b !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    margin-bottom: 1.2rem !important;
    box-shadow: 0 2px 10px rgba(255, 126, 95, 0.06) !important;
}
.widget-sidebar-title::before,
.widget-sidebar-title::after {
    display: none !important;
    content: none !important;
}
.sidebar .widget {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 1.5rem !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 2rem !important;
}

/* 中身が空または子要素を持たないウィジェットは完全非表示（不要な白い余白ボックスを完全に消去） */
.sidebar .widget:empty,
.sidebar .widget:not(:has(*)),
.sidebar .popular-posts:not(:has(ul, ol, div, p, a, h3, h2, h4, img)),
#wpp-4:not(:has(ul, ol, div, p, a, h3, h2, h4, img)) {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    height: 0 !important;
    min-height: 0 !important;
}

/* 運営者情報ウィジェット内の二重枠・余白の最適化 */
.sidebar #custom_html-5 .textwidget img {
    border-radius: 14px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
.sidebar .operator-box {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* ==========================================================================
   ヘッダーメニュー内の目立つCTAボタン（無料説明会）のスタイリング
   ========================================================================== */

/* 他のメニュー項目（ブログ等）の高さと完全に同調させるため、floatとdisplayを明示的に設定 */
#navi .navi-in .menu-header .menu-cta-btn {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    display: inline-block !important;
    float: left !important;
}

/* ボタン本体: 他のメニューの高さ（約58px）に対し、マージンと高さを物理計算して完璧に中央に当てる */
#navi .navi-in .menu-header .menu-cta-btn a {
    background: linear-gradient(90deg, #f0932b, #ed4c67) !important; /* ゴールド×ピンクグラデーション */
    color: #ffffff !important;
    font-weight: 900 !important;
    border-radius: 50px !important;
    
    /* 物理的な縦中央配置の計算値 */
    display: block !important;
    padding: 0 24px !important; /* 左右のみパディング */
    height: 36px !important; /* ボタンの高さを36pxに固定 */
    line-height: 36px !important; /* ボタン内で文字を縦中央に */
    margin-top: 11px !important; /* 上の余白: (58px - 36px)/2 = 11px */
    margin-bottom: 11px !important; /* 下の余白: 11px */
    margin-left: 10px !important;
    margin-right: 10px !important;
    
    box-shadow: 0 4px 15px rgba(237, 76, 103, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    text-align: center !important;
}

#navi .navi-in .menu-header .menu-cta-btn a:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(237, 76, 103, 0.45) !important;
    background: linear-gradient(90deg, #f0932b, #ed4c67) !important;
    color: #ffffff !important;
    filter: brightness(1.1) !important;
}

/* モバイル表示時はメニューの中で他の項目と馴染ませる（はみ出さないように） */
@media screen and (max-width: 1023px) {
    #navi .navi-in .menu-header .menu-cta-btn {
        display: block !important;
        height: auto !important;
        margin: 10px 0 !important;
    }
    #navi .navi-in .menu-header .menu-cta-btn a {
        display: block !important;
        margin: 10px 20px !important;
        text-align: center !important;
        padding: 1rem !important;
    }
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* ==========================================================================
   無料説明会フォームページ（固定ページID: 2870）の最上部余白バグ解消
   ========================================================================== */

/* 本文内のインラインCSS `body { padding: var(--space-8) var(--space-4) }` が
   Cocoonの外側全体のbodyに干渉して、ヘッダーより上に白い余白が発生するバグを強制リセット */
body.page-id-2870 {
    padding: 0 !important;
    margin: 0 !important;
}

/* 本文内の body padding を内側のフォームのラッパー (.page-wrapper) に安全に移植 */
body.page-id-2870 .entry-content .page-wrapper {
    padding: var(--space-8) var(--space-4) !important;
    margin-top: 2rem !important; /* コンテンツとヘッダーの間にスマートなマージンを確保 */
    margin-bottom: 2rem !important;
}

@media (max-width: 480px) {
    body.page-id-2870 .entry-content .page-wrapper {
        padding: var(--space-6) var(--space-4) !important;
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
}

/* ==========================================================================
   「このサイトについて」ページ（#about-strabo）の見出しスタイル干渉解消
   ========================================================================== */
#about-strabo h3 {
    border: none !important;
    padding: 0 !important;
    background: none !important;
}
#about-strabo h3::before,
#about-strabo h3::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================================
   知識ロードマップ（.strabo-map-card）の見出しスタイル干渉解消（WordPress整形対策済）
   ========================================================================== */
.article .strabo-map-card h3,
.strabo-map-card h3 {
    display: inline-block !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: #ffffff !important; /* 親側で確実に白を指定 */
    font-size: 22px !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
    position: static !important;
}
/* WordPressのTOC自動整形によるインラインCSS消失対策として、内部のspanも強制上書き */
.article .strabo-map-card h3 span,
.strabo-map-card h3 span {
    color: #ffffff !important; 
    font-size: 22px !important;
    font-weight: bold !important;
    font-family: sans-serif !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.article .strabo-map-card h3::before,
.article .strabo-map-card h3::after,
.strabo-map-card h3::before,
.strabo-map-card h3::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
}



/* ==========================================================================
   追従（固定）ヘッダー・メニューのプレミアム・スタイリング調整
   ========================================================================== */

/* 追従時もブランドカラーのディープネイビー背景・白テキストを絶対維持 */
.fixed-header,
.fixed-header #header-container,
.fixed-header .header,
.fixed-header .header-in,
.fixed-header #navi,
.fixed-header .navi,
.fixed-header .navi-in {
    background-color: #0f172a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

.fixed-header #navi .navi-in a,
.fixed-header .menu-header a,
.fixed-header .menu-header-container a,
.fixed-header #navi .menu-item a {
    color: #ffffff !important;
    /* 追従時の高さ（約48px）に合わせて縦パディングをスマートに縮小 */
    padding: 0.95rem 1.6rem !important; 
}

/* 追従時のホバーアクション */
.fixed-header #navi .navi-in a:hover,
.fixed-header #navi .menu-item a:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #fbbf24 !important;
}

/* 追従時における目立つCTAボタン（無料説明会）の垂直中央配置の再計算 */
.fixed-header #navi .navi-in .menu-header .menu-cta-btn a {
    height: 32px !important; /* ボタンの高さを32pxにコンパクト化 */
    line-height: 32px !important; /* 文字の縦中央 */
    margin-top: 8px !important;  /* 上余白: (48px - 32px)/2 = 8px */
    margin-bottom: 8px !important; /* 下余白: 8px */
    padding: 0 20px !important; /* 左右余白を微調整 */
    font-size: 13px !important;
    background: linear-gradient(90deg, #f0932b, #ed4c67) !important;
}
/* ↑ 2026-08-03: ここの閉じ括弧が抜けており、以降 約5.7KB分のCSS
   （.stravo-answer-box、モバイルメニュー配色など）が全て無効化されていた。 */
.fixed-header #navi .navi-in .menu-header .menu-cta-btn a:hover {
    transform: scale(1.05) !important;
    background: linear-gradient(90deg, #f0932b, #ed4c67) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   ストラボ専用：脳科学的アンサーボックスの共通スタイリング（文字かぶれ防止）
   ========================================================================== */
.stravo-answer-box {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border: 2px solid #f0932b !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* ボックス内の見出し：テーマ側のフォント色や背景装飾を強制リセット */
.stravo-answer-box h3,
.article .stravo-answer-box h3 {
    color: #f0932b !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    font-size: 1.15em !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-bottom: 1px solid #334155 !important;
    padding: 0 0 8px 0 !important;
    background: transparent !important;
    position: static !important;
}
.stravo-answer-box h3::before,
.stravo-answer-box h3::after {
    content: none !important;
    display: none !important;
}

/* ボックス内のリストとテキスト */
.stravo-answer-box ul {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}
.stravo-answer-box ul li {
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    color: #f8fafc !important;
    line-height: 1.65 !important;
    font-size: 0.95em !important;
}
.stravo-answer-box ul li:last-child {
    margin-bottom: 0 !important;
}
.stravo-answer-box ul li .num {
    color: #f0932b !important;
    font-weight: bold !important;
}
.stravo-answer-box ul li strong {
    color: #ffffff !important;
    font-weight: bold !important;
}

/* 共感チェックリスト（ul不使用・テーマのdisc回避版） */
.stravo-answer-box .check-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    color: #f8fafc !important;
    line-height: 1.65 !important;
    font-size: 0.95em !important;
}
.stravo-answer-box .check-item::before {
    content: none !important;
    display: none !important;
}
.stravo-answer-box .check-item .check-mark {
    color: #f0932b !important;
    font-weight: bold !important;
    font-size: 1.15em !important;
    line-height: 1.4 !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   ドロップダウン・サブメニューのポップ＆モダンスタイリング（完全改修版）
   ========================================================================== */

/* 1. 親メニュー「受講生の声」と下矢印アイコン（▼）の自然なインライン配置 */
#navi .navi-in > ul > li.menu-item-has-children > a,
.fixed-header #navi .navi-in > ul > li.menu-item-has-children > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
#navi .navi-in > ul > li.menu-item-has-children > a .caption-wrap {
    display: inline-flex !important;
    width: auto !important;
}
#navi .navi-in > ul > li.menu-item-has-children > a .has-icon {
    position: static !important; /* 不自然な絶対配置を解除して文字のすぐ右に配置 */
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 4px !important;
    font-size: 11px !important;
    opacity: 0.8 !important;
    transition: transform 0.25s ease !important;
    height: auto !important;
}
#navi .navi-in > ul > li.menu-item-has-children:hover > a .has-icon {
    transform: rotate(180deg) !important; /* ホバー時に矢印がクルッと反転 */
    color: #fbbf24 !important;
}

/* 2. 【PC用】サブメニューのカードデザイン（非ホバー時は完全に非表示） */
#navi .navi-in ul.sub-menu,
#navi .navi-in .sub-menu,
.menu-header .sub-menu,
#navi .sub-menu,
.navi-in .menu-header .sub-menu,
.fixed-header #navi .navi-in ul.sub-menu,
.fixed-header #navi .sub-menu {
    display: none !important; /* 非ホバー時は完全に非表示（skin-colors-black等のスリット残骸を根絶） */
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(6px) !important;
    width: 190px !important;
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.05) !important;
    padding: 8px !important;
    margin: 0 !important;
    z-index: 9999 !important;
    list-style: none !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
}

/* ホバー時に美しく表示（親メニューにホバーした時のみカードが開く） */
#navi .navi-in > ul > li:hover > ul.sub-menu,
#navi .navi-in > ul > li:focus-within > ul.sub-menu,
.fixed-header #navi .navi-in > ul > li:hover > ul.sub-menu,
.fixed-header #navi .navi-in > ul > li:focus-within > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
}

/* 3. サブメニュー内のリスト項目 (li) のリセット */
#navi .navi-in .sub-menu li,
#navi .sub-menu li,
.navi-in .menu-header .sub-menu li,
#navi .navi-in > ul li:hover > ul > li,
.fixed-header #navi .sub-menu li {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important; /* skin-colors-blackの固定60px/0pxを完全解除 */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: none !important;
}

/* 4. サブメニュー内のリンク (a) をモダンなボタン風にデザイン */
#navi .navi-in .sub-menu a,
.menu-header .sub-menu a,
#navi .sub-menu a,
#navi .sub-menu .menu-item a,
.navi-in .sub-menu .menu-item a,
.navi-in .menu-header .sub-menu a,
.fixed-header #navi .sub-menu a,
.fixed-header #navi .sub-menu .menu-item a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    color: #1e293b !important;
    background: transparent !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 5. 内部テキスト・ラッパー（.caption-wrap, .item-label）の3重パディング・はみ出し・色化けを完全防止 */
#navi .navi-in .sub-menu a *,
.menu-header .sub-menu a *,
#navi .sub-menu a *,
.navi-in .menu-header .sub-menu a *,
#navi .navi-in .sub-menu a .caption-wrap,
#navi .navi-in .sub-menu a .item-label,
.fixed-header #navi .sub-menu a * {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    display: inline-block !important;
    width: auto !important;
    white-space: nowrap !important;
    overflow: visible !important;
    color: #1e293b !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 6. アイコンをリンクの前につける（装飾アクセント） */
#navi .navi-in .sub-menu a::before,
#navi .sub-menu a::before {
    content: "◆";
    font-size: 0.65rem;
    color: #ff7e5f;
    margin-right: 8px;
    opacity: 0.85;
    transition: transform 0.2s ease;
}

/* 7. サブメニュー項目のホバーアクション（ポップ＆モダンなコーラルアクセント） */
#navi .navi-in .sub-menu a:hover,
.menu-header .sub-menu a:hover,
#navi .sub-menu a:hover,
#navi .sub-menu .menu-item a:hover,
.navi-in .sub-menu .menu-item a:hover,
.navi-in .menu-header .sub-menu a:hover,
.fixed-header #navi .sub-menu a:hover,
.fixed-header #navi .sub-menu .menu-item a:hover {
    background: linear-gradient(135deg, #fff5f2 0%, #fff1ec 100%) !important;
    color: #ff6b6b !important;
    transform: translateX(4px) !important;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.12) !important;
}
#navi .navi-in .sub-menu a:hover *,
.menu-header .sub-menu a:hover *,
#navi .sub-menu a:hover *,
.navi-in .menu-header .sub-menu a:hover *,
#navi .navi-in .sub-menu a:hover .caption-wrap,
#navi .navi-in .sub-menu a:hover .item-label,
.fixed-header #navi .sub-menu a:hover * {
    color: #ff6b6b !important;
    background: transparent !important;
}
#navi .navi-in .sub-menu a:hover::before,
#navi .sub-menu a:hover::before {
    transform: scale(1.2);
    color: #ff6b6b;
}

/* 8. 【モバイル用】スライドメニュー内のサブメニュー補正 */
.mobile-menu ul.sub-menu,
.mobile-menu .sub-menu,
#navi .navi-in > .menu-mobile .sub-menu {
    background: rgba(15, 23, 42, 0.7) !important;
    border-left: 3px solid #ff7e5f !important;
    padding: 4px 0 4px 12px !important;
    margin: 4px 0 !important;
    display: block !important;
    position: static !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: auto !important;
    transform: none !important;
}
.mobile-menu .sub-menu li,
#navi .navi-in > .menu-mobile .sub-menu li {
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
}
.mobile-menu .sub-menu a,
#navi .navi-in > .menu-mobile .sub-menu a,
.mobile-menu .sub-menu a *,
#navi .navi-in > .menu-mobile .sub-menu a * {
    background: transparent !important;
    color: #ffffff !important;
    font-size: 0.9rem !important;
    padding: 8px 12px !important;
    display: block !important;
    box-shadow: none !important;
}
.mobile-menu .sub-menu a:hover,
#navi .navi-in > .menu-mobile .sub-menu a:hover,
.mobile-menu .sub-menu a:hover *,
#navi .navi-in > .menu-mobile .sub-menu a:hover * {
    color: #fbbf24 !important;
}

/************************************
** モバイルでアイキャッチ画像を非表示（2026-08-03）
**
** 記事ページのLCP要素はアイキャッチ画像だった。モバイルではヘッダー＋
** アピールエリアの下にあり、「画像のダウンロード完了」までLCPが確定しない。
** 非表示にするとLCP要素が本文テキストに変わり、CSS到着直後に確定する。
** （画像を最適化するのではなく、描画対象から外すのが最短という判断）
**
** OGP画像としての役割は og:image で別途出しているため影響なし。
** デスクトップでは従来どおり表示する。
************************************/
@media screen and (max-width: 834px) {
  .entry-content .eye-catch,
  .article .eye-catch,
  .eye-catch-wrap {
    display: none !important;
  }
}

/* ==========================================================================
   ポップ＆モダン 前後の記事ナビ（.pager-post-navi）
   ========================================================================== */
.pager-post-navi {
    margin: 3rem 0 !important;
    gap: 16px !important;
}
.pager-post-navi a {
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 18px !important;
    padding: 14px 18px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    color: #1e293b !important;
}
.pager-post-navi a:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px rgba(255, 107, 107, 0.15) !important;
    border-color: rgba(255, 107, 107, 0.35) !important;
    color: #ff6b6b !important;
}
.pager-post-navi a figure {
    border-radius: 12px !important;
    overflow: hidden !important;
}
.pager-post-navi a figure img {
    border-radius: 12px !important;
    transition: transform 0.3s ease !important;
}
.pager-post-navi a:hover figure img {
    transform: scale(1.08) !important;
}
.prev-post-title,
.next-post-title {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

/* ==========================================================================
   ポップ＆モダン 関連記事エリア（.related-entries）
   ========================================================================== */
.related-entry-heading {
    position: relative !important;
    padding: 0.8rem 1.4rem !important;
    background: linear-gradient(135deg, #fff5f2 0%, #fffbf0 100%) !important;
    border-left: 6px solid #ff7e5f !important;
    border-radius: 14px !important;
    color: #1e293b !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    margin: 3rem 0 1.5rem 0 !important;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.08) !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}
.related-entry-heading::before,
.related-entry-heading::after {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   ポップ＆モダン 引用（blockquote）＆吹き出し装飾
   ========================================================================== */
.article blockquote {
    background: #fff9f6 !important;
    border-left: 5px solid #ffa07a !important;
    border-radius: 14px !important;
    padding: 1.2rem 1.6rem !important;
    margin: 2rem 0 !important;
    color: #475569 !important;
    font-size: 0.95rem !important;
    box-shadow: 0 4px 12px rgba(255, 160, 122, 0.08) !important;
}
.speech-bubble {
    border-radius: 16px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}

/* ==========================================================================
   ポップ＆モダン ブログカード（内部リンク・外部リンクカード）
   ========================================================================== */
.blogcard {
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 18px !important;
    padding: 14px !important;
    box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    margin: 2rem 0 !important;
}
.blogcard:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 25px -5px rgba(255, 107, 107, 0.15) !important;
    border-color: rgba(255, 107, 107, 0.35) !important;
}
.blogcard-thumbnail img {
    border-radius: 12px !important;
    transition: transform 0.3s ease !important;
}
.blogcard:hover .blogcard-thumbnail img {
    transform: scale(1.05) !important;
}
.blogcard-title {
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.5 !important;
    transition: color 0.2s ease !important;
}
.blogcard:hover .blogcard-title {
    color: #ff6b6b !important;
}

/* ==========================================================================
   ポップ＆モダン テーブルデザイン
   ========================================================================== */
.wp-block-table {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    margin: 2.5rem 0 !important;
    border: 1px solid #e2e8f0 !important;
}
.wp-block-table table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}
.wp-block-table th {
    background: linear-gradient(135deg, #fff5f2 0%, #fffbf0 100%) !important;
    color: #1e293b !important;
    font-weight: 800 !important;
    padding: 14px 16px !important;
    border-bottom: 2px solid #fed7aa !important;
    border-right: 1px solid #e2e8f0 !important;
}
.wp-block-table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-right: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    font-size: 0.95rem !important;
}
.wp-block-table tr:last-child td {
    border-bottom: none !important;
}
.wp-block-table th:last-child,
.wp-block-table td:last-child {
    border-right: none !important;
}