@charset "utf-8";

#sec-mv .l-mv-subsidy {
    background-color: var(--color-primary-50);
    font-size: var(--font-size-s);
    padding: var(--size-005) var(--size-02);
    font-weight: var(--font-weight-bold);
    margin-top: var(--size-03);
    color: var(--color-primary-500);
}

#sec-mv .l-mv-subsidy p {
    position: relative;
}

#sec-mv .l-mv-subsidy p::before {
    content: "";
    width: var(--size-025);
    height: var(--size-025);
    background-image: url("/service/dx-training/img/icon-light.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    margin-right: var(--size-01);
    vertical-align: -0.3em;
}

#sec-subsidy .l-subsidy {
    padding: var(--size-06) 0 0;
    border-bottom: none;
}


#sec-subsidy .l-subsidy-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#sec-subsidy .p-middle {
    width: 100%;
}


#sec-subsidy .l-subsidy-chart {
    justify-content: center;
}

#sec-subsidy .l-subsidy-wrap {
    display: grid;
    gap: var(--size-02);
    padding-left: var(--size-03);
}


#sec-subsidy .l-subsidy-support {
    display: flex;
    gap: var(--size-10);
    margin: var(--size-04) 0;
    align-items: center;
}


#sec-subsidy .l-subsidy-support-box {
    position: relative;
    font-weight: var(--font-weight-bold);
    padding-bottom: var(--size-03);
    border-bottom: solid 1px var(--color-primary-100);
}


#sec-subsidy .l-subsidy-support-box .p-label {
    display: block;
    margin-bottom: var(--size-01);
}



#sec-subsidy .l-subsidy-support-box .p-num {
    font-size: var(--font-size-h2);
    color: var(--color-primary-500);
    line-height: 1;
}


/* 共通
------------------------------ */

#sec-subsidy .l-subsidy-box {
    display: grid;
    align-items: center;
    gap: var(--size-02);
}

#sec-subsidy .l-subsidy-cnt {
    display: flex;
    align-items: center;
    gap: var(--size-02);
    font-weight: var(--font-weight-bold);
}

#sec-subsidy .l-subsidy-ttl {
    color: var(--color-gray-600);
}


/* グラフ
------------------------------ */

#sec-subsidy .l-subsidy-graph-row {
    grid-template-columns: 120px minmax(0, 1fr) 120px;
}

#sec-subsidy .l-subsidy-graph {
    width: 100%;
    height: var(--size-01);
}

#sec-subsidy .l-subsidy-cost {
    text-align: right;
    font-weight: var(--font-weight-bold);
}

#sec-subsidy .l-subsidy-cost .p-num {
    font-size: var(--font-size-h4);
    line-height: 1;
}


/* 研修費用
------------------------------ */

#sec-subsidy .l-subsidy-value {
    padding-bottom: var(--size-02);
    border-bottom: solid 1px var(--color-primary-100);
}

#sec-subsidy .l-subsidy-value .l-subsidy-graph {
    background-color: var(--color-primary-300);
}

#sec-subsidy .l-subsidy-value .l-subsidy-cost {
    color: var(--color-gray-700);
}


/* 助成
------------------------------ */

#sec-subsidy .l-subsidy-formula-row {
    grid-template-columns: 120px minmax(0, 1fr);
}

#sec-subsidy .l-subsidy-formula {
    text-align: right;
    font-size: var(--font-size-s);
}

#sec-subsidy .l-subsidy-formula .p-num {
    color: var(--color-primary-500);
    font-weight: var(--font-weight-heavy);
}

#sec-subsidy .l-subsidy-formula .p-num {
    font-size: var(--font-size-xl);
}


/* 企業負担
------------------------------ */

#sec-subsidy .l-subsidy-self {
    padding-top: var(--size-02);
    border-top: solid 1px var(--color-primary-100);
}

#sec-subsidy .l-subsidy-self .l-subsidy-graph {
    background-color: var(--color-gray-100);
}

#sec-subsidy .l-subsidy-self .l-subsidy-graph::before {
    content: "";
    display: block;
    width: 40%;
    height: 100%;
    background-color: var(--color-primary-500);
}

#data-ai #sec-subsidy .l-subsidy-self .l-subsidy-graph::before,
#vision #sec-subsidy .l-subsidy-self .l-subsidy-graph::before {
    width: 20%;
}

#sec-subsidy .l-subsidy-self .l-subsidy-cost .p-num {
    font-size: var(--font-size-h1);
    color: var(--color-primary-500);
}

#sec-subsidy .l-subsidy-total {
    background-color: var(--color-primary-50);
    padding: var(--size-02);
    margin-top: var(--size-03);
    text-align: center;
}

#sec-subsidy .l-subsidy-total p {
    letter-spacing: var(--letter-spacing-s);
    font-weight: var(--font-weight-bold);
}

#sec-subsidy .l-subsidy-total .p-num {
    color: var(--color-primary-500);
    font-size: var(--font-size-h3);
}

#sec-cta .p-cta-box .c-card-ttl,
#sec-cta .p-cta-box .c-card-inner {
    padding-top: 0;
    gap: 0;
}



/* TOP */
#type-top #sec-mv .p-mv-img {
    background-image: linear-gradient(180deg, transparent 56%, rgba(21, 26, 63, .18)), url(/service/dx-training/img/mv.jpg);
}

#type-top #sec-about {
    background-color: var(--color-primary-50);
}

#type-top #sec-about .l-about .c-head {
    display: block;
}

#type-top #sec-program .l-program .p-border-y:first-of-type {
    border-bottom: 0;
}


#type-top #sec-goal {
    background-color: var(--color-primary-50);
}


/* 個別研修ページ */
#type-dtl .l-h1-sub {
    letter-spacing: var(--letter-spacing-s);
    font-size: var(--font-size-m);
    display: block;
    margin-top: var(--size-02);
    color: var(--color-primary-400);
}

#type-dtl .p-note {
    margin-top: var(--size-06);
    margin-bottom: var(--size--04);
}


#type-dtl #sec-mv .p-mv-inner {
    align-items: flex-start;
}


#type-dtl #sec-about .l-about-text {
    justify-content: center;
}

#type-dtl #sec-about .l-about-target {
    margin-top: var(--size-06);

}

#type-dtl #sec-about .l-about-target .c-list {
    margin-top: var(--size-02);
}

#type-dtl #sec-about .l-about-target .c-list ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--size-column);
    row-gap: var(--size-015);
}

#type-dtl #sec-outcome {
    background-color: var(--color-primary-50);
}

#type-dtl .l-curr {
    margin-top: var(--size-05);
    border-top: solid 1px var(--color-primary-200);
    border-bottom: solid 1px var(--color-primary-200);
}

#type-dtl .l-curr-box {
    margin-left: var(--size-06);
    border-bottom: solid 1px var(--color-primary-100);
    padding: var(--size-06) 0;
}


#type-dtl .l-curr-day {
    padding-top: var(--size-005);
}

#type-dtl .l-curr-day .l-curr-ampm {
    position: relative;
    font-size: var(--font-size-s);
    padding-left: var(--size-005);
}


#type-dtl .l-curr-day .l-curr-ampm::before {
    content: "/";
    padding-right: var(--size-005);
    color: var(--color-primary-200);
}

#type-dtl .l-curr-cnt {
    position: relative;
}


#type-dtl .l-curr-cnt::before {
    content: "";
    position: absolute;
    left: var(--size--06);
    top: var(--size-02);
    width: var(--size-01);
    height: var(--size-01);
    border-radius: 50%;
    background: var(--color-primary-400);
    box-shadow: 0 0 0 7px var(--color-primary-50);
}

#type-dtl .l-curr-cnt::after {
    content: "";
    position: absolute;
    left: calc(var(--size--06) + var(--size-005));
    top: var(--size-02);
    height: calc(100% + var(--size-12));
    width: 1px;
    z-index: -1;
    background: var(--color-primary-100);
}

#type-dtl .l-curr-box:last-of-type .l-curr-cnt::after {
    height: 100%;
}




#type-dtl .l-curr-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-column);
}


#type-dtl .l-curr-list {
    background-color: var(--color-primary-50);
    padding: var(--size-03);
    margin-top: var(--size-03);
    font-size: var(--font-size-s);
}

#type-dtl .l-curr-list dl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--size-column);

}

#type-dtl .l-curr-list dt {
    margin-bottom: var(--size-01);
    color: var(--color-primary-500);
    font-weight: var(--font-weight-bold);
    grid-column: 1 / -1;
}

#type-dtl #sec-outline {
    background-color: var(--color-primary-50);
}

#type-dtl #sec-outline .l-outline {
    display: grid;
    gap: var(--size-column);
    grid-template-columns: 1fr 3fr;
}

#type-dtl #sec-outline .l-outline-list dl {
    padding: var(--size-02) 0;
    column-gap: var(--size-08);
}

#type-dtl #sec-outline .l-outline-list dl:not(:last-of-type) {
    border-bottom: solid 1px var(--color-primary-100);
}

#type-dtl #sec-outline .l-outline-list dt {
    min-width: 6em;
}

#type-dtl #sec-outline .p-middle {
    margin-top: var(--size-03);
    padding-top: var(--size-03);
    border-top: solid 1px var(--color-primary-200);
}

#type-dtl #sec-other {
    background-color: var(--color-gray-50);
}

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

@media only screen and (max-width:768px) {
    #type-dtl #sec-mv .p-mv-inner {
        flex-direction: column;
    }

    #type-dtl #sec-about .l-about-target .c-list ul {
        grid-template-columns: 1fr;
    }

    #type-dtl #sec-outline .l-outline {
        grid-template-columns: 1fr;
        gap: 0;
    }

    #type-dtl #sec-outline .l-outline-list dl {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 520px) {

    #type-dtl .l-curr-list dl {        
        grid-template-columns: 1fr;
    }

    #sec-subsidy .l-subsidy-support {
        gap: var(--size-03);
        justify-content: center;
    }

    #sec-subsidy .l-subsidy-wrap {
        padding-left: 0;
    }

    #sec-subsidy .l-subsidy-formula,
    #sec-subsidy .l-subsidy-cost {
        text-align: left;
    }

    #sec-subsidy .l-subsidy-graph-row {
        grid-template-columns: 60px minmax(0, 1fr) 100px;
    }


    #sec-subsidy .l-subsidy-formula-row {
        flex-direction: column;
        display: flex;
        align-items: start;
        gap: 0;
    }
}