/* ============================================================
   CTA（assets/inc/contact.php の強化CTA ＋ トップ index.html のヒーローCTA）
   common.css はビルド生成物のため汚さず、本ファイルで管理。
   header-b.php で読み込む。
   ============================================================ */

/* ---- 下部CTAブロック ---- */
.cta-lead {
    line-height: 1.8;
    opacity: .92;
}

.contact-btn-primary {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}

.contact-btn-sub {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    font-size: 1.05em;
    font-weight: 500;
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .85);
    border-radius: .375rem;
    text-decoration: none;
}

.contact-btn-sub:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.cta-assurance {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    font-size: .95rem;
}

.cta-assurance li {
    display: inline-flex;
    align-items: center;
}

.cta-trust {
    font-size: .8rem;
    opacity: .85;
    border-top: 1px solid rgba(255, 255, 255, .25);
    padding-top: .9rem;
    max-width: 560px;
    margin: 0 auto;
}

/* ---- ヒーロー：テキスト・CTAを左寄せ（コンテナ幅1140に揃える） ---- */
.mv .mv-messages {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

.mv .mv-lead .row {
    justify-content: flex-start !important;
}

/* ---- ヒーローCTA（回転メッセージとは別に常設） ---- */
.mv .mv-cta {
    position: absolute;
    left: 0;
    right: 0;
    top: 62vh;
    max-width: 1140px;
    margin: 0 auto;
    text-align: left;
    padding: 0 24px;
    pointer-events: auto; /* .mv-overlay の pointer-events:none を打ち消す */
}

.mv .mv-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #0f5c87;
    font-weight: bold;
    font-size: clamp(1rem, 2vw, 1.25rem);
    text-decoration: none;
    padding: 14px 34px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
    transition: background .2s;
}

.mv .mv-cta-primary:hover {
    background: #eaf3fb;
    color: #0f5c87;
}

.mv .mv-cta-secondary {
    display: inline-flex;
    align-items: center;
    color: #fff;
    text-decoration: underline;
    font-size: .95rem;
    margin-left: 20px;
}

.mv .mv-cta-secondary:hover {
    color: #d6e8f7;
}

@media (max-width: 575.98px) {
    /* スマホは「テキスト → CTA」を縦に積み、絶対配置による重なり・はみ出しを防ぐ */
    .mv .mv-overlay {
        padding-top: 14vh;
    }

    /* 文字を画面内に収める（左右に余白を確保し、行が右端からはみ出さないように） */
    .mv .mv-message {
        box-sizing: border-box;
        padding: 0 6px;
    }

    .mv .mv-lead {
        /*margin-bottom: 1rem;*/
    }

    .mv .mv-lead .row {
        margin-left: 0;
        margin-right: 0;
    }

    .mv .mv-lead .row > [class*="col"] {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }

    .mv .mv-lead h1.h2 {
        font-size: 1.8em;
        line-height: 1.4;
    }

    /* 1枚目のメッセージ(h1)のみ */
    .mv .mv-lead h3, .mv .mv-lead .h3 {
        font-size: 1em;
        line-height: 1.55;
    }

    .mv .mv-messages {
        position: relative;
        min-height: 28vh; /* 最長メッセージ分の領域を確保してCTAと重ならないように */
        padding-left: 0; /* スマホでは不要（文字の左右余白は .mv-message 側で確保） */
        padding-right: 0;
    }

    .mv .mv-cta {
        position: static; /* 絶対配置をやめ、メッセージ領域の下に通常フローで配置 */
        top: auto;
        bottom: auto;
        padding: 0 22px;
    }

    .mv .mv-cta-secondary {
        margin: 14px 0 0;
    }
}

/* アンカー着地時に固定ヘッダーで隠れないように */
#main, #contact-tel {
    scroll-margin-top: 110px;
}