.technology-application__intro {
    padding: 4rem 8rem 2.5rem;
    text-align: center;
    background: #fff;
}

.technology-application__title {
    color: #000;
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 1.3;
}

.technology-application__summary {
    max-width: 72rem;
    margin: 1rem auto 0;
    color: #646464;
    font-size: 0.85rem;
    line-height: 1.8;
}

.technology-application__highlights,
.applyBox .content .msg.technology-application__highlights {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.technology-application__highlights--single-row {
    max-width: 84rem;
}

.technology-application__highlight-row {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.technology-application__highlight + .technology-application__highlight::before {
    margin: 0 0.2rem;
    content: '｜';
}

@media screen and (min-width: 751px) {
    .technology-application__highlights--single-row .technology-application__highlight-row,
    .technology-application__highlights--single-row .technology-application__highlight {
        white-space: nowrap;
    }
}

.technology-application {
    display: flex;
    width: 100%;
    height: 30rem;
    overflow: hidden;
    background: #0a1430;
}

.mainContent > .applyBox--mobile {
    display: none;
}

.technology-application__hero {
    position: relative;
    flex: 0 0 58%;
    height: 100%;
    overflow: hidden;
    background-color: #07112c;
}

.technology-application__panel {
    position: absolute;
    inset: 0;
    display: block;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.technology-application__panel.is-active {
    opacity: 1;
    visibility: visible;
}

.technology-application__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: calc(100% + 2px);
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.technology-application__hero::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, rgba(2, 9, 29, 0.2) 0%, rgba(2, 9, 29, 0) 72%);
    pointer-events: none;
}

.technology-application__copy {
    position: absolute;
    z-index: 2;
    /* top: 9.65rem; */
    /* left: 8.5rem; */
    /* top: 50%;
    transform: translateY(-50%); */
    /* left: 0; */
    padding: 0 8rem;
    /* width: 30rem; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    color: #fff;
}

.technology-application__hero-title {
    margin: 0;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 400;
    transition: opacity 0.2s ease;
}

.technology-application__description {
    /* display: -webkit-box;
    min-height: 3.6rem;
    max-height: 6.4rem; */
    margin: 0.8rem 0 0;
    /* overflow: hidden; */
    color: #fff;
    font-size: 0.8rem;
    line-height: 2;
    font-weight: 400;
    /* -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; */
    transition: opacity 0.2s ease;
}

.technology-application__more {
    width: 1.4rem;
    height: 1.4rem;
    margin-top: 2.8rem;
    border-radius: 50%;
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.technology-application__more img {
    width: 100%;
    height: 100%;
}

.technology-application__panel:hover .technology-application__more,
.technology-application__panel:focus-visible .technology-application__more {
    transform: translateX(0.25rem);
    background: rgba(255, 255, 255, 0.12);
}

.technology-application__menu {
    position: relative;
    isolation: isolate;
    flex: 0 0 42%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    background: #4e298b;
}

.technology-application__menu::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    background: url('../images/technology-application/technology-grid.jpg') center / cover no-repeat;
    mix-blend-mode: overlay;
    opacity: 0.4;
    pointer-events: none;
}

.technology-application__item {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: #fff;
    transition: background-color 0.25s ease;
}

.technology-application__item:nth-child(4n) {
    border-right: 0;
}

.technology-application__item:nth-child(n + 9) {
    border-bottom: 0;
}

.technology-application__item:nth-child(n + 13) {
    display: none;
}

.technology-application__label,
.technology-application__detail {
    position: absolute;
    left: 1.2rem;
    right: 1.2rem;
    color: #fff;
    overflow-wrap: anywhere;
}

.technology-application__label {
    top: 6.1rem;
    font-size: .9rem;
    line-height: 1.4rem;
    opacity: 1;
    white-space: nowrap;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.25s ease;
}

.technology-application__detail {
    top: 50%;
    left: 0.8rem;
    right: 0.65rem;
    display: -webkit-box;
    max-height: 5rem;
    overflow: hidden;
    font-size: 0.8rem;
    line-height: 1.4rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    opacity: 0;
    transform: translateY(calc(-50% + 0.8rem));
    transition: opacity 0.2s ease, transform 0.25s ease;
}

.technology-application__line {
    display: block;
    width: 1.15rem;
    height: 0.15rem;
    margin-bottom: 0.4rem;
    border-radius: 0.1rem;
    background: #ee9640;
}

.technology-application__item:hover,
.technology-application__item:focus-visible,
.technology-application__item.is-active {
    background-image: url('../images/technology-application/technology-item-hover.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.technology-application__item:hover .technology-application__label,
.technology-application__item:focus-visible .technology-application__label,
.technology-application__item.is-active .technology-application__label {
    opacity: 0;
    transform: translateY(-0.6rem);
}

.technology-application__item:hover .technology-application__detail,
.technology-application__item:focus-visible .technology-application__detail,
.technology-application__item.is-active .technology-application__detail {
    opacity: 1;
    transform: translateY(-50%);
}

@media screen and (max-width: 750px) {
    .technology-application__highlights,
    .applyBox .content .msg.technology-application__highlights {
        gap: 0rem;
    }

    .technology-application__highlight-row {
        flex-direction: column;
        gap: 0rem;
    }

    .technology-application__highlight + .technology-application__highlight::before {
        content: none;
    }

    .technology-application__intro {
        display: none;
    }

    .technology-application {
        display: none;
    }

    .mainContent > .applyBox--mobile {
        display: block;
    }
}