/* ============================================================================================
	FEATURED SERVICE LIST / PATTERN
============================================================================================ */
.hightime-service-list {
    position: relative;
    z-index: 1
}
.hightime-service-list .wp-block-spacer {
    background: var(--wp--preset--color--base)
}
.hightime-service-heading {
    position: relative;
    z-index: 1;
    padding: 0 .5em;
    font-size: clamp(40px, 8vw, 90px)
}
.hightime-service-heading::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: -.5em;
    z-index: -1;
    width: 4em;
    height: 1.5em;
    border: 4px solid var(--wp--preset--color--accent);
    border-right: 0;
    transform: translateY(-50%);
}
.hightime-service {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 8px;
    padding: 8px;
    background: var(--wp--preset--color--base)
}

@media screen and (min-width: 700px) {
    .hightime-service {
        grid-template-columns: repeat(2, 1fr)
    }
}

.hightime-service-item {
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 2px;
    overflow: hidden
}

/* service image */
.hightime-service-image {
    position: relative;
    width: 100%;
}
.hightime-service-image::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--wp--preset--color--accent);
}
.observe_is_active .hightime-service-image::before {
	animation: var(--reveal-animation);
	transform-origin: center right
}
@media screen and (min-width: 708px) {
    .hightime-service-item:nth-of-type(2) .hightime-service-image::before,
    .hightime-service-item:nth-of-type(4) .hightime-service-image::before {
        animation-delay: .2s
    }
}

.hightime-service-content {
    padding: 2em
}
.hightime-service-desc {
    margin: 1em 0 2em !important;
    font-size: 16px
}

/* service name */
.hightime-service-name-en {
    line-height: 1.2
}
.hightime-service-name-en,
.hightime-service-name-jp {
    opacity: 0;
}
.observe_is_active .hightime-service-name-en,
.observe_is_active .hightime-service-name-jp {
    animation: scaleIn .5s ease-in-out forwards;
}
.observe_is_active .hightime-service-name-jp {
    transition-delay: .1s;
}
@media screen and (min-width: 768px) {
    .hightime-service-item:nth-of-type(2) .hightime-service-name-en,
    .hightime-service-item:nth-of-type(4) .hightime-service-name-en {
        animation-delay: .2s;
    }
    .hightime-service-item:nth-of-type(2) .hightime-service-name-jp,
    .hightime-service-item:nth-of-type(4) .hightime-service-name-jp {
        animation-delay: .3s;
    }
}