/* カラー定義（元の画像に近い緑色を設定） */
:root {
    --mail-cta-green: #00A651;
    /* メインの緑色 */
    --mail-cta-dark: #009147;
    /* 右側（矢印背景）の濃い緑色 */
    --mail-cta-shadow: #00783A;
    /* 下部の立体感（影）の色 */
}

/* バナーの大枠 */
.css-mail-banner {
    display: flex;
    width: 100%;
    max-width: 411px;
    background-color: var(--mail-cta-green);
    border-radius: 12px;
    text-decoration: none !important;
    overflow: hidden;
    box-shadow: 0 4px 0 var(--mail-cta-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease;
    margin: 0 auto;
    container-type: inline-size;
}

/* ホバー時の押し込みアクション */
.css-mail-banner:hover {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--mail-cta-shadow);
    opacity: 0.95;
}

/* 左側のメインコンテンツエリア */
.css-mail-banner__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(6px, 2.5cqw, 10px) 2% clamp(8px, 3cqw, 12px);
    min-width: 0;
}

/* 「24時間いつでも受付中」のバッジ */
.css-mail-banner__badge {
    background-color: #ffffff;
    color: var(--mail-cta-green);
    font-size: clamp(10px, 4cqw, 16px);
    font-weight: 900;
    padding: 2px clamp(10px, 6cqw, 24px);
    border-radius: 999px;
    display: inline-block;
    margin-bottom: clamp(4px, 2cqw, 8px);
    white-space: nowrap;
    line-height: 1.4;
}

/* アイコンと「無料メール査定」のコンテナ */
.css-mail-banner__main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 4cqw, 16px);
    width: 100%;
}

/* 再現したSVGアイコンのサイズ指定 */
.css-mail-banner__icon {
    width: clamp(36px, 16cqw, 64px);
    height: auto;
    flex-shrink: 0;
    margin-bottom: 2px;
}

/* 「無料メール査定」テキスト */
.css-mail-banner__text {
    color: #ffffff;
    font-size: clamp(16px, 7.5cqw, 28px);
    font-weight: 900;
    white-space: nowrap;
    letter-spacing: 0.05em;
    font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}

/* 右側の矢印背景エリア */
.css-mail-banner__arrow-bg {
    width: 11%;
    min-width: clamp(24px, 8.5cqw, 36px);
    background-color: var(--mail-cta-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 右側の白い三角形（矢印） */
.css-mail-banner__arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: clamp(6px, 2.5cqw, 10px) 0 clamp(6px, 2.5cqw, 10px) clamp(8px, 3.5cqw, 14px);
    border-color: transparent transparent transparent #ffffff;
}