@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
*/

/* 🔗 Zen Maru Gothic フォント読み込み */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

/* ---------------------------------
   1. 全体設定
--------------------------------- */
body, input, button, select, textarea {
    font-family: 'Zen Maru Gothic', sans-serif !important;
    font-size: 17px !important;
    color: #333333 !important;
    line-height: 2.0 !important;
}

.entry-content p {
    font-size: 17px !important;
    margin-bottom: 2.4em !important;
    color: #333333 !important;
    line-height: 2.0 !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. ボタン・フォーム関連の修正
--------------------------------- */
/* メール通知ボタンの文字色・背景色 */
.jetpack_subscription_widget input[type="submit"],
.widget_text input[type="submit"],
.mail-magazine input[type="submit"],
#subscribe-submit button,
.wp-block-jetpack-subscriptions form 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;
}

/* コメント送信ボタンの飛び出しバグ修正 */
.comment-form, #commentform, .form-submit {
    position: static !important;
    display: block !important;
    margin-top: 20px !important;
    clear: both !important;
}
#submit {
    position: static !important;
    display: inline-block !important;
    margin: 0 !important;
    float: none !important;
}

/* ---------------------------------
   5. ブログカード（ピンク細枠・タイトル左寄せ・本文なし）
--------------------------------- */
.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;
    font-size: 18px !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;
}

/* ---------------------------------
   6. 見出し設定
--------------------------------- */
.article h2 { background: #f5f5f5 !important; border-left: 6px solid #d8a4a6 !important; padding: 14px 18px !important; margin: 50px 0 25px 0 !important; }
.article h3 { background: #f5f5f5 !important; border-bottom: 4px double #d8a4a6 !important; padding: 12px 15px !important; margin: 2.2em 0 1.2em !important; }

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