/* Layout general */
.ccfjc-line-wrapper {
    --line-bg: #004578;
    --line-color: #ffffff;
    --detail-top: 0px;
    width: 99.6vw;
    max-width: 99.6vw;
    margin: 0;
    margin-left: calc(50% - 50vw);
    background: var(--line-bg);
    padding: 100px 1rem;
    position: relative;
    overflow: hidden;
}

.ccfjc-line-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.ccfjc-line-item {
    position: relative;
    cursor: pointer;
    color: #ffffff;
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.ccfjc-line-title {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 1.4rem;
    font-weight: 800;
    align-items: flex-start;
    position: relative;
    width: max-content;
    margin: 0;
    padding: 0;
}

.ccfjc-line-underline {
    display: block;
    height: 4px;
    width: 100%;
    background: var(--line-color);
    position: relative;
    left: 0;
}

.ccfjc-line-item.is-right .ccfjc-line-title {
    padding-right: 5%;
    text-align: right;
    align-items: flex-end;
    justify-content: flex-end;
}

.ccfjc-line-item.is-right .ccfjc-line-underline {
    margin-left: 0;
    margin-right: 0;
    left: auto;
    right: 0;
    width: 100%;
}

.ccfjc-line-item.is-right {
    justify-content: flex-end;
}

.ccfjc-line-item.is-left .ccfjc-line-title {
    padding-left: 5%;
    padding-right: 0;
    text-align: left;
    align-items: flex-start;
}

.ccfjc-line-item.is-left .ccfjc-line-underline {
    width: 100%;
    left: 0;
}

.ccfjc-line-item.is-active .ccfjc-line-underline,
.ccfjc-line-item:hover .ccfjc-line-underline {
    width: 100%;
    right: 0;
}

.ccfjc-line-detail {
    position: absolute;
    top: var(--detail-top);
    right: 1.5rem;
    max-width: 48%;
    color: #ffffff;
    font-size: 1.05rem;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.ccfjc-line-detail.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ccfjc-line-detail.align-left {
    left: 5%;
    right: auto;
    text-align: left;
}

.ccfjc-line-detail.align-right {
    right: 5%;
    left: auto;
    text-align: right;
}

@media (max-width: 768px) {
    .ccfjc-line-wrapper {
        padding: 100px 1.25rem;
    }

    .ccfjc-line-list {
        padding: 0;
        gap: 1.5rem;
    }

    .ccfjc-line-detail {
        position: relative;
        max-width: 100%;
        right: auto;
        margin-top: 0.75rem;
        top: auto;
        transform: none;
    }
}