@charset "UTF-8";

.my-cta-box {
    background: #e6f3ff;
    border: 2px solid #0066cc;
    border-radius: 10px;
    position: relative;
    padding: 2em;
    margin: 2em 0;
}

.my-cta-box_label {
    color: #fff;
    background-color: #000;
    font-size: 1em;
    line-height: 1;
    font-weight: 700;
    border-radius: 100vmax;
    position: absolute;
    top: -1em;
    left: 2em;
    padding: 0.5em 1em;
    z-index: 1;
}

.my-cta-box_label-text {
    display: block;
}

.my-cta-box_inner {
    position: relative;
}

h3.my-cta-box_title {
    font-size: 1.5em;
    font-weight: 700;
    text-align: center;
    border-bottom: none;
    padding: 0;
    margin: 0 0 0.6em;
    color: #111;
}

.my-cta-box_description {
    font-size: 1em;
    line-height: 1.5;
    border-radius: 10px;
    background: #fff;
    padding: 1em;
}

.my-cta-catch {
    color: #6B7280;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 0.6em;
}

.my-cta-box_button-wrap {
    margin-top: 1.3em;
}

.my-cta-box_button {
    background-color: #0066cc;
    color: #fff;
    max-width: 300px;
    width: 100%;
    display: flex;
    gap: 0.5em;
    align-items: center;
    justify-content: center;
    border-radius: 100vmax;
    margin: 0 auto;
    padding: 0.7em 1em;
    transition: .3s;
    text-decoration: none;
}

.my-cta-box_button:visited,
.my-cta-box_button:hover,
.my-cta-box_button:focus {
    color: #fff;
    text-decoration: none;
}

.my-cta-box_button-text {
    display: block;
    font-size: 1em;
    font-weight: 700;
}

.my-cta-box_button-arrow {
    display: block;
    width: 0.7em;
    flex-shrink: 0;
}

.my-cta-box_button-arrow svg {
    width: 100%;
    height: auto;
    display: block;
}

.my-cta-box_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.my-cta-box_content {
    flex: 1;
    min-width: 0;
}

.my-cta-box--layout-horizontal .my-cta-catch {
    text-align: left;
    margin: 0 0 0.35em;
}

.my-cta-box--layout-horizontal h3.my-cta-box_title {
    text-align: left;
    margin: 0 0 0.25em;
    font-size: 1.35em;
}

.my-cta-box--layout-horizontal .my-cta-box_description {
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: #6B7280;
    font-size: 0.95em;
}

.my-cta-box--layout-horizontal .my-cta-box_button-wrap {
    margin-top: 0;
    flex-shrink: 0;
}

.my-cta-box--layout-horizontal .my-cta-box_button {
    width: auto;
    min-width: 220px;
    max-width: none;
    padding: 0.95em 1.4em;
    border-radius: 6px;
    margin: 0;
}

.my-cta-box--blue {
    background: #e6f3ff;
    border-color: #0066cc;
}

.my-cta-box--blue .my-cta-box_button {
    background-color: #0066cc;
}

.my-cta-box--orange {
    background: #fff4e6;
    border-color: #f08c00;
}

.my-cta-box--orange .my-cta-box_button {
    background-color: #f08c00;
}

.my-cta-box--green {
    background: #e6fffa;
    border-color: #009973;
}

.my-cta-box--green .my-cta-box_button {
    background-color: #009973;
}

.my-cta-box--red {
    background: #fff0f5;
    border-color: #cc0066;
}

.my-cta-box--red .my-cta-box_button {
    background-color: #cc0066;
}

.my-cta-box--mono {
    background: #f5f5f5;
    border-color: #bfc5cc;
}

.my-cta-box--mono .my-cta-box_button {
    background-color: #243447;
}

.my-cta-box--mono .my-cta-catch {
    color: #6b7280;
}

.my-cta-box--blue-white,
.my-cta-box--orange-white,
.my-cta-box--green-white,
.my-cta-box--red-white,
.my-cta-box--mono-white {
    background: #fff;
}

.my-cta-box--blue-white .my-cta-box_description,
.my-cta-box--orange-white .my-cta-box_description,
.my-cta-box--green-white .my-cta-box_description,
.my-cta-box--red-white .my-cta-box_description,
.my-cta-box--mono-white .my-cta-box_description {
    background: #f3f4f6;
}

.my-cta-box--layout-horizontal.my-cta-box--blue-white .my-cta-box_description,
.my-cta-box--layout-horizontal.my-cta-box--orange-white .my-cta-box_description,
.my-cta-box--layout-horizontal.my-cta-box--green-white .my-cta-box_description,
.my-cta-box--layout-horizontal.my-cta-box--red-white .my-cta-box_description,
.my-cta-box--layout-horizontal.my-cta-box--mono-white .my-cta-box_description {
    background: transparent;
}

.my-cta-box--blue-white .my-cta-box_label,
.my-cta-box--orange-white .my-cta-box_label,
.my-cta-box--green-white .my-cta-box_label,
.my-cta-box--red-white .my-cta-box_label {
    background-color: #e03131;
}

.my-cta-box--blue-white {
    border-color: #0066cc;
}

.my-cta-box--blue-white .my-cta-box_button {
    background-color: #0066cc;
}

.my-cta-box--blue-white .my-cta-box_title {
    color: #0066cc;
}

.my-cta-box--orange-white {
    border-color: #f08c00;
}

.my-cta-box--orange-white .my-cta-box_button {
    background-color: #f08c00;
}

.my-cta-box--orange-white .my-cta-box_title {
    color: #f08c00;
}

.my-cta-box--green-white {
    border-color: #009973;
}

.my-cta-box--green-white .my-cta-box_button {
    background-color: #009973;
}

.my-cta-box--green-white .my-cta-box_title {
    color: #009973;
}

.my-cta-box--red-white {
    border-color: #cc0066;
}

.my-cta-box--red-white .my-cta-box_button {
    background-color: #cc0066;
}

.my-cta-box--red-white .my-cta-box_title {
    color: #cc0066;
}

.my-cta-box--mono-white {
    border-color: #bfc5cc;
}

.my-cta-box--mono-white .my-cta-box_button {
    background-color: #243447;
}

.my-cta-box--mono-white .my-cta-box_title {
    color: #243447;
}

.my-cta-box--layout-horizontal.my-cta-box--mono,
.my-cta-box--layout-horizontal.my-cta-box--mono-white {
    border-color: #c9cdd3;
}

.my-cta-box--layout-horizontal.my-cta-box--mono .my-cta-box_button,
.my-cta-box--layout-horizontal.my-cta-box--mono-white .my-cta-box_button {
    background-color: #243447;
}

@media (hover: hover) {
    .my-cta-box_button:hover {
        opacity: 0.9;
        transform: translateY(-2px);
    }
}

@media (max-width: 750px) {
    .my-cta-box {
        padding: 1.5em;
    }

    .my-cta-box_label {
        left: 1.5em;
    }

    .my-cta-box_row {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .my-cta-box--layout-horizontal .my-cta-catch {
        text-align: center;
    }

    .my-cta-box--layout-horizontal h3.my-cta-box_title {
        text-align: center;
    }

    .my-cta-box--layout-horizontal .my-cta-box_description {
        text-align: center;
    }

    .my-cta-box--layout-horizontal .my-cta-box_button {
        width: 100%;
        min-width: 0;
        max-width: 300px;
        margin: 0 auto;
    }
}

@media (max-width: 460px) {
    .my-cta-box {
        padding: 6vw 4vw;
        margin: 5vw 0;
    }

    .my-cta-box_label {
        top: -1em;
        left: 4vw;
        font-size: 3vw;
        padding: 0.5em 1em;
    }

    h3.my-cta-box_title {
        font-size: 3.6vw;
    }

    .my-cta-box--layout-horizontal h3.my-cta-box_title {
        font-size: 3.8vw;
    }

    .my-cta-box_description {
        font-size: 3vw;
        line-height: 1.7;
    }

    .my-cta-box_button-text {
        font-size: 3.5vw;
    }

    .my-cta-box_button-arrow {
        width: 1.8vw;
    }

    .my-cta-catch {
        font-size: 3vw;
    }

    .my-cta-box_row {
        gap: 3vw;
    }

    .my-cta-box--layout-horizontal .my-cta-box_button {
        padding: 0.9em 1.2em;
        border-radius: 1.4vw;
    }
}