.p-front-conversion {
    padding-block: 64.0px;
    background-color: var(--color-base);
}

.p-front-conversion__inner {
    width: min(100.0%, var(--content-width));
    margin-inline: auto;
    padding-inline: var(--inline-gutter);
}

.p-front-conversion__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48.0px;
    padding: 48.0px 64.0px;
    background-color: var(--color-main-light);
    border: 2.0px solid var(--color-main);
    border-radius: 16.0px;
}

.p-front-conversion__content {
    flex: 1.0;
}

.p-front-conversion__title {
    margin-bottom: 16.0px;
}

.p-front-conversion__title-sub {
    display: block;
    font-size: 14.0px;
    font-weight: 700;
    color: var(--color-main);
    margin-bottom: 8.0px;
}

.p-front-conversion__title-main {
    display: block;
    font-size: 28.0px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-main);
}

.p-front-conversion__text {
    font-size: 15.0px;
    line-height: 1.6;
    color: var(--color-text-main);
}

.p-front-conversion__actions {
    display: flex;
    flex-direction: column;
    gap: 24.0px;
    width: 320.0px;
}

.p-front-conversion__action-item {
    display: flex;
    flex-direction: column;
}

.p-front-conversion__action-label {
    font-size: 12.0px;
    font-weight: 700;
    color: var(--color-text-sub);
    margin-bottom: 8.0px;
    text-align: center;
}

.p-front-conversion__actions .c-button {
    width: 100.0%;
    padding-block: 1.0em;
    font-size: 16.0px;
    box-shadow: 0.0 4.0px 12.0px rgba(255, 147, 72, 0.20);
    flex-direction: column;
    /* 文字を縦に並べる */
    gap: 4.0px;
    min-height: 80.0px;
}

.p-front-conversion__tel-num {
    font-size: 24.0px;
    font-weight: 700;
}

.p-front-conversion__tel-info {
    font-size: 11.0px;
    font-weight: 500;
    opacity: 0.9;
}

@media screen and (max-width: 1024.0px) {
    .p-front-conversion__container {
        flex-direction: column;
        padding: 40.0px;
        text-align: center;
    }

    .p-front-conversion__actions {
        width: 100.0%;
        max-width: 400.0px;
    }
}

@media screen and (max-width: 767.0px) {
    .p-front-conversion {
        padding-block: 40.0px;
    }

    .p-front-conversion__container {
        padding: 32.0px 20.0px;
    }

    .p-front-conversion__title-main {
        font-size: 22.0px;
    }

    .p-front-conversion__tel-num {
        font-size: 20.0px;
    }
}