.top-page-service-strategy {
    gap: 100px;
}

.top-page-service-strategy__body {
    gap: 34px;
    padding-bottom: 0;
}

.top-page-service-strategy__heading h3 {
    color: #fff;
    font-size: 2.8rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.286;
}

.top-page-service-strategy__lead {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.25;
    max-width: 550px;
}

.top-page-service-strategy__tags {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 38px;
    max-width: 560px;
}

.top-page-service-strategy__tag {
    align-items: center;
    color: var(--tag-color);
    display: inline-flex;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.35;
    min-height: 30px;
    padding-left: var(--tag-icon-space, 44px);
    position: relative;
    transition: opacity 0.4s cubic-bezier(0, 0.55, 0.45, 1);
}

.top-page-service-strategy__tag:hover {
    color: var(--tag-color);
    opacity: 0.76;
}

.top-page-service-strategy__tag::before {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: var(--tag-icon-height);
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--tag-icon-width);
}

.top-page-service-strategy__tag--rpo {
    --tag-color: #68c7e7;
    --tag-icon-height: 34px;
    --tag-icon-space: 44px;
    --tag-icon-width: 36px;
}

.top-page-service-strategy__tag--rpo::before {
    background-image: url("../images/icons/service-icon01-hover.svg");
}

.top-page-service-strategy__tag--hr {
    --tag-color: #e97093;
    --tag-icon-height: 31px;
    --tag-icon-space: 42px;
    --tag-icon-width: 34px;
}

.top-page-service-strategy__tag--hr::before {
    background-image: url("../images/icons/service-icon02-hover.svg");
}

.top-page-service-strategy__tag--ad {
    --tag-color: #6ddc8c;
    --tag-icon-height: 27px;
    --tag-icon-space: 40px;
    --tag-icon-width: 35px;
}

.top-page-service-strategy__tag--ad::before {
    background-color: currentColor;
    mask: url("../images/top-page/service-strategy/icon-ad.png") no-repeat center / contain;
    -webkit-mask: url("../images/top-page/service-strategy/icon-ad.png") no-repeat center / contain;
}

.top-page-service-strategy__voice {
    align-items: center;
    background:
        linear-gradient(rgba(31, 31, 31, 0.75), rgba(31, 31, 31, 0.75)),
        url("../images/top-page/service-strategy/voice-bg.jpg") center 44% / cover;
    color: #fff;
    display: flex;
    font-size: 1.6rem;
    font-weight: 700;
    height: 75px;
    justify-content: center;
    max-width: 550px;
    overflow: hidden;
    position: relative;
    transition: opacity 0.4s cubic-bezier(0, 0.55, 0.45, 1);
    width: 100%;
}

.top-page-service-strategy__voice:hover {
    color: #fff;
    opacity: 0.82;
}

.top-page-service-strategy__voice-arrow {
    align-items: center;
    border: 1px solid #fff;
    border-radius: 50%;
    display: flex;
    height: 40px;
    justify-content: center;
    margin-left: 14px;
    transition: transform 0.4s cubic-bezier(0, 0.55, 0.45, 1);
    width: 40px;
}

.top-page-service-strategy__voice:hover .top-page-service-strategy__voice-arrow {
    transform: translateX(4px);
}

.top-page-service-strategy__voice-arrow img {
    display: block;
    height: 24px;
    width: 24px;
}

.top-page-service-strategy__visual {
    margin-bottom: 0;
    position: relative;
}

.top-page-service-strategy__visual img {
    aspect-ratio: 3 / 2;
    border-radius: 10px;
    display: block;
    object-fit: cover;
    width: 100%;
}

.top-page-service-strategy__visual .ff--rockville {
    align-items: center;
    bottom: 21px;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    font-size: 7rem;
    height: 24.7%;
    justify-content: center;
    letter-spacing: 3px;
    line-height: 0.7143;
    position: absolute;
    right: -10.8%;
    text-align: center;
    text-shadow: 0 0 10px rgba(31, 31, 31, 0.4);
    transform: rotate(-5deg);
    white-space: nowrap;
    width: 75.2%;
    z-index: 10;
}

.top-page-service-strategy__visual--mobile {
    display: none;
}

.top-page-service-training .zig__text {
    padding-bottom: 0;
}

.top-page-service-training__heading h3 {
    color: #fff;
    font-size: 2.8rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.286;
}

.top-page-service-training__lead {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.25;
    max-width: 550px;
}

.top-page-service-training .ff--rockville {
    bottom: -45px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 7rem;
    letter-spacing: 3px;
    line-height: 1;
    right: -50px;
    text-shadow: 0 0 10px rgba(31, 31, 31, 0.4);
}

@media screen and (max-width: 1200px) {
    .top-page-service-strategy {
        gap: 50px;
    }

    .top-page-service-strategy__tag {
        font-size: 1.6rem;
    }

    .top-page-service-strategy__visual .ff--rockville {
        right: -10.8%;
    }

    .top-page-service-training .ff--rockville {
        right: -24px;
    }
}

@media screen and (max-width: 992px) {
    .top-page .service {
        padding-bottom: clamp(90px, 10vw, 120px);
    }

    .top-page-service-strategy {
        margin-bottom: clamp(40px, 7vw, 60px);
    }

    .top-page-service-strategy__body {
        gap: 30px;
    }

    .top-page-service-strategy__visual--pc {
        display: none;
    }

    .top-page-service-strategy__visual--mobile {
        display: block;
        margin-bottom: 0;
    }

    .top-page .service .zig__img.mobile .ff--rockville,
    .top-page-service-strategy__visual--mobile .ff--rockville {
        align-items: center;
        bottom: clamp(-14px, calc(2.8vw - 35px), -7px);
        color: rgba(255, 255, 255, 0.9);
        display: flex;
        font-size: clamp(6rem, 7vw, 7rem);
        height: 24.7%;
        justify-content: center;
        letter-spacing: 3px;
        line-height: 0.7143;
        position: absolute;
        right: -10.8%;
        text-align: center;
        text-shadow: 0 0 10px rgba(31, 31, 31, 0.4);
        transform: rotate(-5deg);
        white-space: nowrap;
        width: 75.2%;
        z-index: 10;
    }

    .top-page .service .top-page-service-creative .zig__img.mobile .ff--rockville {
        font-size: clamp(6.2rem, 10.16vw, 9rem);
    }
}

@media screen and (max-width: 576px) {
    .top-page .service {
        padding-bottom: 90px;
    }

    .top-page-service-strategy__body {
        gap: 24px;
    }

    .top-page-service-strategy__heading h3 {
        font-size: 2.7rem;
    }

    .top-page-service-strategy__lead {
        font-size: 1.5rem;
        line-height: 2;
    }

    .top-page-service-strategy__tags {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .top-page-service-strategy__tag {
        font-size: 1.5rem;
        min-height: 28px;
    }

    .top-page-service-strategy__voice {
        height: 68px;
    }

    .top-page-service-strategy__voice-arrow {
        height: 36px;
        width: 36px;
    }

    .top-page .service .zig__img.mobile .ff--rockville,
    .top-page-service-strategy__visual--mobile .ff--rockville {
        bottom: clamp(-21px, calc(4vw - 35px), -14px);
        font-size: clamp(4.8rem, 12vw, 6rem);
        right: -10.8%;
    }

    .top-page .service .top-page-service-creative .zig__img.mobile .ff--rockville {
        font-size: clamp(6.2rem, 15.6vw, 7.8rem);
    }

    .top-page-service-training__heading h3 {
        font-size: 2.7rem;
    }

    .top-page-service-training__lead {
        font-size: 1.5rem;
        line-height: 2;
    }

}