@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.2
*/

/* 🔗 垢抜けた極上ゴシック体（Noto Sans JP）の読み込み（掠れ防止） */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/* ---------------------------------
   1. 全体設定（かすれ防止・くっきり垢抜けデザイン）
--------------------------------- */
body, input, button, select, textarea {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 16px !important;
    color: #333333 !important;
    font-weight: 400 !important; /* 💡かすれを防ぐちょうど良い太さに固定 */
    line-height: 1.8 !important;
    letter-spacing: 0.05em !important;
    -webkit-font-smoothing: antialiased !important; /* 💡文字をなめらかにくっきりさせる魔法 */
    -moz-osx-font-smoothing: grayscale !important;
}

.entry-content p {
    margin-bottom: 2.0em !important;
}

/* 本文の「太字」を確実に反映させる */
b, strong, .bold {
    font-weight: 700 !important;
}

/* ---------------------------------
   2. 不要要素の削除
--------------------------------- */
.pagination, .home .pagination { display: none !important; }
.entry-card-snippet, .entry-card-excerpt, .related-entry-card-snippet, .related-entry-card-excerpt { display: none !important; }
.cat-label { display: none !important; }

/* ---------------------------------
   3. プロフィールエリア
--------------------------------- */
.sidebar .author-box {
    margin-top: 60px !important;
    padding-top: 15px !important;
}
.author-box .author-thumb {
    text-align: center !important;
    margin: -60px auto 15px !important;
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
}
.author-box .author-thumb img {
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin: 0 auto !important;
    display: inline-block !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08) !important;
}

/* ---------------------------------
   4. メルマガ・メール更新通知ウィジェット
--------------------------------- */
.widget-title,
.widget_text .widget-title,
.jetpack_subscription_widget .widget-title,
.sidebar .widget-title {
    color: #333333 !important;
    font-weight: 700 !important;
}

.jetpack_subscription_widget input[type="submit"],
.widget_text input[type="submit"],
.mail-magazine input[type="submit"],
.wp-block-jetpack-subscriptions form button,
#subscribe-submit button {
    background-color: #d8a4a6 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 25px !important;
    font-weight: bold !important;
    text-align: center !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-appearance: none !important;
}

/* ---------------------------------
   5. コメントフォーム関連
--------------------------------- */
#comment-area #submit,
#comment-area input[type="submit"],
#comment-area button[type="submit"],
.comment-form #submit {
    background-color: #eeeeee !important; 
    color: #333333 !important;           
    border: 1px solid #dddddd !important; 
    padding: 12px 28px !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    text-align: center !important;
    display: inline-block !important;
    position: static !important;
    float: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
    transition: background-color 0.2s ease !important;
}
#comment-area #submit:hover {
    background-color: #e2e2e2 !important;
}

/* ---------------------------------
   6. ブログカード
--------------------------------- */
.blogcard, .internal-blogcard {
    position: relative !important;
    background-color: #ffffff !important;
    border: 1px solid #d8a4a6 !important;
    border-radius: 4px !important;
    padding: 20px !important;
    padding-bottom: 50px !important; 
    margin: 2.5em 0 !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.blogcard-thumbnail, .internal-blogcard-thumbnail {
    width: 160px !important;
    flex-shrink: 0 !important;
    margin-right: 20px !important;
}
.blogcard-thumbnail img, .internal-blogcard-thumbnail img {
    width: 100% !important;
    height: auto !important;
}
.blogcard-content, .internal-blogcard-content {
    flex: 1 !important;
    text-align: left !important;
    display: block !important;
    margin: 0 !important;
    min-width: 0 !important;
}
.blogcard-title, .internal-blogcard-title {
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}
.blogcard-title a, .internal-blogcard-title a {
    text-align: left !important;
    display: block !important;
    color: #333333 !important;
    font-weight: bold !important;
    line-height: 1.5 !important;
}
.blogcard-snippet, .internal-blogcard-snippet, .blogcard-footer, .internal-blogcard-footer { display: none !important; }
.blogcard-label {
    display: block !important;
    background-color: #d8a4a6 !important;
    color: #ffffff !important;
    position: absolute !important;
    top: -14px !important;
    left: 15px !important;
    padding: 4px 18px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    z-index: 10 !important;
}
.blogcard::after, .internal-blogcard::after {
    content: '記事を読む »' !important;
    display: block !important;
    position: absolute !important;
    bottom: 14px !important;
    right: 18px !important;
    background-color: #d8a4a6 !important;
    color: #ffffff !important;
    padding: 5px 24px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    z-index: 10 !important;
}

/* ---------------------------------
   7. 記事下の表示順序入れ替え
--------------------------------- */
.single-post #main {
    display: flex !important;
    flex-direction: column !important;
}
.single-post #main > .article { order: 1 !important; }
.single-post #main > #comment-area {
    order: 2 !important;
    margin-top: 40px !important;
    margin-bottom: 40px !important;
    width: 100% !important;
}
.single-post #main > .under-entry-content {
    order: 3 !important;
    width: 100% !important;
}
.single-post #main > .ad-area { order: 4 !important; }

/* ---------------------------------
   8. 見出し・目次・編集画面の余白修正（✨エラー除去済み！完全復活✨）
--------------------------------- */
.article h2,
.entry-content h2 { 
    background: #f5f5f5 !important; 
    border-left: 6px solid #d8a4a6 !important; 
    border-bottom: none !important; 
    border-top: none !important;
    border-right: none !important;
    padding: 14px 18px !important; 
    margin: 50px 0 25px 0 !important; 
    font-weight: 700 !important; 
}

.article h3,
.entry-content h3 { 
    background: #f5f5f5 !important; 
    border-bottom: 4px double #d8a4a6 !important; 
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 12px 15px !important; 
    margin: 2.2em 0 1.2em !important; 
    font-weight: 700 !important; 
}

.toc { 
    border: 1px solid #ebebeb !important; 
    background-color: #fcfcfc !important; 
    padding: 25px !important; 
    margin-bottom: 45px !important; 
}

.editor-styles-wrapper { padding-left: 30px !important; padding-right: 30px !important; }

/* ---------------------------------
   9. カテゴリの黒文字化 ＆ 書いた人（投稿者）の削除
--------------------------------- */
.post-author, .author-info { display: none !important; }
.post-footer .entry-categories-tags { display: none !important; }
.entry-categories a.cat-link {
    color: #333333 !important;
    background-color: transparent !important;
    border: none !important;
    font-weight: bold !important;
    font-size: 15px !important;
    padding: 0 !important;
}
.entry-categories .fa, .entry-categories .fas { display: none !important; }