@charset "UTF-8";

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

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

/* Google Fonts のインポート */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=Shippori+Mincho:wght@700&display=swap');

/* サイト全体のデフォルトフォント上書き */
body {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", 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: "Shippori Mincho", "Georgia", serif !important;
    font-weight: 700 !important;
}

/* サイト全体の基本色とリンクホバーアクション */
a {
    color: #16213e;
    transition: color 0.3s ease;
}
a:hover {
    color: #f0932b;
    text-decoration: none;
}

/* カテゴリーラベルやタグ、新着バッジ */
.cat-label,
.new-entry::after,
.tag-link,
.tag-label {
    background-color: #f0932b !important;
    color: #fff !important;
    font-weight: bold !important;
    border-radius: 4px !important;
}

/* ==========================================================================
   見出しデザイン (h2 / h3) のスタイリング
   ========================================================================== */

/* h2 見出し: 左太線ゴールド ＋ 薄いネイビー背景 ＋ 角丸 */
.article h2 {
    padding: 1.2rem 1.5rem !important;
    background: rgba(22, 33, 62, 0.04) !important;
    border-left: 7px solid #f0932b !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 0 15px 15px 0 !important;
    color: #0f172a !important;
    font-size: 1.6rem !important;
    line-height: 1.4 !important;
    margin: 3.5rem 0 1.5rem 0 !important;
}

/* h3 見出し: 左にゴールドの四角点 ＋ 下部に薄いゴールドのアンダーライン */
.article h3 {
    padding: 0.8rem 0.5rem 0.8rem 1.8rem !important;
    border-bottom: 2px solid rgba(240, 147, 43, 0.2) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: none !important;
    color: #0f172a !important;
    font-size: 1.35rem !important;
    position: relative !important;
    margin: 2.5rem 0 1.2rem 0 !important;
}
.article h3::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 10px !important;
    height: 10px !important;
    background-color: #f0932b !important;
    border-radius: 2px !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,
.entry-card-thumb img,
.sidebar .wpp-thumbnail {
    border-radius: 15px !important;
    overflow: hidden !important;
}
.entry-card-wrap {
    border: 1px solid rgba(0,0,0,0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
sidebar .wpp-thumbnail {
    border-radius: 15px !important;
    overflow: hidden !important;
}
.entry-card-wrap {
    border: 1px solid rgba(0,0,0,0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.entry-card-wrap:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05) !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;
.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;
}