@charset "utf-8";

/*
 * CTA Component - Narrow Container Override (PC)
 *
 * CTAコンポーネントは1000px+幅の広いカラム用に設計されているが、
 * ブログ記事等のカラム幅（.main = 760px）では文字が変な位置で折り返してしまう。
 * .article_contents 内では横並びを縦積みに切り替えてレイアウト崩れを防ぐ。
 *
 * またblog.cssの汎用ルール（.article_box a { text-decoration: underline } や
 * .article_contents h2 { border-bottom: ... } 等）がCTA内部にも効いてしまうので
 * CTA内では打ち消す。
 */

/* === blog.css の汎用ルール打ち消し（PC/SP共通で効く） === */
/* CTA内のリンクのアンダーライン解除 */
.article_box .contactInfo2 a,
.article_box .contactInfo2 a:hover,
.article_box .contactInfo3 a,
.article_box .contactInfo3 a:hover,
.article_box .urgent_and_recommend a,
.article_box .urgent_and_recommend a:hover {
    text-decoration: none !important;
}

/* CTA（cta_contact）見出し上部の余白詰め
   common_new_top.css の `.contactInfo2 { margin: 50px auto 0; }` と
   `.contactInfo2 h2 { padding: 30px 10px 20px; }` が積み重なって
   見出し上に余白が出すぎるため、ショートコード利用時は控えめに */
.contactInfo2 {
    margin-top: 20px !important;
}
.contactInfo2 h2 {
    padding-top: 10px !important;
    padding-bottom: 8px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* CTA内h2の余分なボーダー解除（.article_contents h2 の border-bottom 打ち消し） */
.article_contents .contactInfo2 h2,
.article_contents .urgent_and_recommend h2 {
    border-bottom: none !important;
}

/* CTA内h3の余分な左ボーダー解除（.article_contents h3 の border-left 打ち消し） */
.article_contents .contactInfo2 h3,
.article_contents .contactInfo3 h3,
.article_contents .urgent_and_recommend h3 {
    border-left: none !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    margin: 0 !important;
}

/* CTA内p の余分な padding-bottom 解除（.article_contents p の padding-bottom 打ち消し） */
.article_contents .contactInfo2 p,
.article_contents .contactInfo3 p,
.article_contents .urgent_and_recommend p {
    padding-bottom: 0 !important;
}

@media screen and (min-width: 1000px) {
    /* === contactInfo2 系（cta_contact 用）=== */
    /* 横並びの2カラム（電話＋スタッフ）を縦積みに */
    .article_contents .contactInfo2 {
        padding: 20px 30px;
    }

    .article_contents .contactInfo2-staff,
    .article_contents .contactInfo2-num,
    .article_contents .contactInfo2-estimate {
        width: 100% !important;
        margin: 20px 0 !important;
        float: none !important;
        height: auto !important;
    }

    /* スタッフ画像とテキストの内部レイアウトはそのまま（横並び維持） */
    .article_contents .contactInfo2-staff {
        max-width: 600px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* === urgent_and_recommend 系（cta_urgent 用）=== */
    /* 危篤・急ぎ／事前相談の2カラムを縦積みに */
    .article_contents .cont_first_btm {
        flex-direction: column;
    }

    .article_contents .cont_first_btm ul {
        flex-direction: column;
    }

    .article_contents .cont_first_btm li,
    .article_contents .cont_first_emergency,
    .article_contents .cont_first_beforehand {
        width: 100% !important;
    }

    .article_contents .cont_first_emergency + .cont_first_beforehand,
    .article_contents .cont_first_beforehand + .cont_first_emergency {
        margin-top: 20px;
    }
}