/*
 * ブログ詳細（UI/UXカテゴリ）用CTA
 * 適用範囲: #mypj.single .blog-conversion-cta 配下のみ（#mypj h2 等の既存指定より優先させるため body#mypj を先頭に付与）
 * 既存コンポーネント再利用: .c-basic-btn（主CTA）, .underline-circle-arrow（副CTA）
 * 色・角丸は既存SCSS変数の解決値: $col-bg-gray #fafafa / $col-line2 #c9c9c9 / $col-font-body #454c50 / $col-font-bs3 #666666 / $kadomaru-M 20px
 */

#mypj.single .blog-conversion-cta {
    margin: 60px 0;
    padding: 40px 40px 36px;
    background-color: #fafafa;
    border: 1px solid #c9c9c9;
    border-radius: 20px;
    color: #454c50;
    box-sizing: border-box;
}

#mypj.single .blog-conversion-cta h2.blog-conversion-cta__title {
    margin: 0 0 1em;
    padding: 0;
    border: 0;
    background: none;
    font-size: 1.375em;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
}
#mypj.single .blog-conversion-cta h2.blog-conversion-cta__title:before,
#mypj.single .blog-conversion-cta h2.blog-conversion-cta__title:after {
    display: none;
}

#mypj.single .blog-conversion-cta .blog-conversion-cta__text {
    margin: 0 0 1.75em;
    font-size: 0.9375em;
    line-height: 1.9;
    color: #666666;
}

#mypj.single .blog-conversion-cta .blog-conversion-cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25em 2em;
}

/* 主CTA: 既存 .c-basic-btn の width:100% / display:inline を上書き */
#mypj.single .blog-conversion-cta .blog-conversion-cta__primary {
    display: inline-block;
    width: auto;
    min-width: 280px;
    box-sizing: border-box;
}

/* 副CTA: 既存 .underline-circle-arrow（テキストリンク）を控えめに */
#mypj.single .blog-conversion-cta .blog-conversion-cta__secondary {
    flex: 0 0 auto;
}

@media only screen and (max-width: 767px) {
    #mypj.single .blog-conversion-cta {
        margin: 40px 0;
        padding: 28px 20px 46px;
        border-radius: 10px;
    }
    #mypj.single .blog-conversion-cta .blog-conversion-cta__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 1em;
    }
    #mypj.single .blog-conversion-cta .blog-conversion-cta__primary {
        display: block;
        width: 100%;
        min-width: 0;
    }
    #mypj.single .blog-conversion-cta .blog-conversion-cta__secondary {
        align-self: flex-start;
    }
}