@charset "utf-8";

.l-learn {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--size-column) * 2);
    align-items: center;
    margin-bottom: var(--size-03);
}

#sec-tix .l-learn-img {
    order: 2;
}

#sec-tix .l-learn-cnt {
    order: 1;
}

.l-learn-service .c-head-sub {
    display: flex;
    gap: var(--size-02);
    align-items: center;
    padding-bottom: var(--size-01);
}

.l-learn .c-head-sub {
    display: flex;
    gap: var(--size-02);
    align-items: center;
    padding-bottom: var(--size-01);
}

/* 画像共通 */
/* .l-learn-img {
    width: 50vw;
    overflow: hidden;
}

.l-learn-img img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

.l-learn-img:first-child {
    justify-self: end;
}

.l-learn-img:last-child {
    justify-self: start;
} */

.l-theme {
    margin-top: var(--size-03);
}

.l-theme .c-head {
    font-size: var(--font-size-l);
    color: var(--color-primary-500);
}

#sec-mv .p-mv-inner {
    padding-bottom: var(--size-03);
}

#sec-mv .p-mv-img {
    background-image: linear-gradient(180deg, transparent 56%, rgba(21, 26, 63, .18)), url(../../service/img/ai/mv.png);
}


#sec-course .l-course .l-course-slider {
    margin-top: var(--size-03);
}


#sec-course .l-ls {
    margin-top: var(--size-06);
    background-color: var(--color-primary-50);
    padding: var(--size-06);
}

#sec-course .l-ls-inner {
    display: flex;
    gap: var(--size-column);
}

#sec-course .l-ls-lineup {
    margin-top: var(--size-03);
    padding-top: var(--size-03);
    border-top: solid 1px var(--color-primary-200);
}


#sec-course .l-ls-lineup ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--size-column);
    row-gap: var(--size-015);
}

#sec-custom .l-custom-card {
    margin-top: var(--size-03);
}

#sec-custom .l-custom-card .p-head-num {
    font-size: var(--font-size-s);
}

#sec-custom .l-custom-cta {
    background-color: var(--color-primary-50);
    margin-top: var(--size-06);
}

#sec-custom .l-custom-cta .p-link .p-link-ttl {
    color: var(--color-primary-500);
    font-weight: var(--font-weight-heavy);
}

#sec-custom .l-custom-cta .p-link .p-link-icon {
    background-color: var(--color-primary-500);
}

#sec-custom .l-custom-cta .p-link a.p-link-box:hover .p-link-icon {
    background-color: var(--color-primary-700);
}


#sec-tix .l-tix-card {
    margin-top: var(--size-03);
}



#sec-function .l-function {
    border-top: solid 1px var(--color-primary-100);
    border-bottom: solid 1px var(--color-primary-100);
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin-top: var(--size-05);
}

/* 左ナビ */
#sec-function .l-function-nav {
    position: sticky;
    top: calc(var(--height-header) + 60px);
    align-self: start;
}

#sec-function .l-function-list {
    position: relative;
    display: flex;
    gap: var(--size-03);
    align-items: center;
    padding: var(--size-04) var(--size-02);
    border-bottom: 1px solid var(--color-primary-100);
    transition:
        color .3s ease,
        background-color .3s ease;
}

#sec-function .l-function-list.is-active {
    border-right: solid 3px var(--color-primary-500);
    background: var(--hover-grad);
}

#sec-function .l-function-list.is-active .l-function-ttl {
    color: var(--color-primary-500);
    font-weight: var(--font-weight-bold);
}

#sec-function .l-function-ttl {
    color: var(--color-gray-700);
    font-size: var(--font-size-s);
}


/* 右側 */
#sec-function .l-function-cnt {
    min-width: 0;
    border-left: solid 1px var(--color-primary-100);
}

#sec-function .l-function-item {
    display: block;
    padding: var(--size-06);
    border-bottom: solid 1px var(--color-primary-100);
}

#sec-function .l-function-item:last-child {
    border-bottom: 0;
}



/* 番号 */
#sec-function .l-function-num {
    display: flex;
    align-items: center;
    gap: var(--size-02);
    margin-top: var(--size-06);
}

#sec-function .l-function-num .p-head-num {
    font-size: var(--font-size-s);
}

#sec-function .l-function-num .p-head-en {
    color: var(--color-primary-300);
}


/* 搭載サービス */
#sec-function .l-function-service {
    padding-top: var(--size-02);
    margin-top: var(--size-02);
    border-top: solid 1px var(--color-primary-200);
    display: flex;
    align-items: center;
    gap: var(--size-02);
}

#sec-function .l-function-service .c-head {
    font-size: var(--font-size-s);
    color: var(--color-primary-500);
}

#sec-function .l-function-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #b7c0ff0f;
    width: var(--size-10);
    height: var(--size-10);
    border-radius: var(--radius-m);
    border: 1px solid #b7c0ff57;
}


#sec-support {
    background-color: var(--color-primary-50);
}

#sec-support .l-support {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--size-column) * 2);
    padding: var(--size-06) 0;
    border-top: solid 1px var(--color-primary-300);
    border-bottom: solid 1px var(--color-primary-300);
    position: relative;
}

#sec-support .l-support .l-support-box {
    position: relative;
}


#sec-support .l-support .l-support-box:last-of-type::before {
    content: "";
    position: absolute;
    left: calc(var(--size-column) / 2 * -2);
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: var(--color-primary-200);
}

#sec-subsidy .p-link .p-link-box {
    border-color: var(--color-primary-300);
}


@media only screen and (max-width:1024px) {
}

@media only screen and (max-width:768px) {
    .l-learn {
        grid-template-columns: 1fr;
        gap: var(--size-03);
    }

    .l-learn-img {
        order: 1 !important;
    }

    .l-learn-cnt {
        order: 2 !important;
    }

    #sec-course .l-ls-inner {
        flex-direction: column-reverse;
    }

    #sec-course .l-ls-lineup ul {
        grid-template-columns: repeat(2, 1fr);
    }


}

@media (max-width: 520px) {
    
    #sec-course .l-ls-lineup ul {
        grid-template-columns: 1fr;
    }

    #sec-function .l-function {
        display: block;
    }

    #sec-function .l-function-icon img {
        width: auto;
        max-width: var(--size-08);
        max-height: var(--size-08);
    }

    #sec-function .l-function-nav {
        display: none;
    }

    #sec-function .l-function-item {
        padding-left: var(--size-02);
        padding-right: var(--size-02);
    }

    #sec-function .l-function-cnt {
        border: none;
    }

    #sec-support .l-support {
        grid-template-columns: 1fr;
    }

    #sec-support .l-support .l-support-box:last-of-type::before {
        width: 100%;
        height: 1px;
        left: 50%;
        transform: translateX(-50%);
        top: calc(var(--size-column) * -1);
    }

}