@charset "UTF-8";



.p-learning-guide{

    background: var(--gray-color-light);

}



.p-learning{

    padding-top: var(--page-top-padding-top);

}

.p-learning__item{

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    background: #fff;

    padding: calc(50 * var(--px));

    border-radius: var(--radius-base);

    box-shadow: var(--shadow-base);

}

.p-learning__item:nth-child(n+2){

    margin-top: calc(50 * var(--px));

}

.p-learning__main{

    width: calc(100% - (400 * var(--px)));

    padding-right: calc(60 * var(--px));

}

.p-learning__head{

    display: flex;

    align-items: center;

}

.p-learning__number{

    width: calc(54 * var(--px));

    height: calc(54 * var(--px));

    background: url(../img/common/title-decoration.svg) center top / cover no-repeat;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    color: #fff;

    text-shadow: var(--shadow-text);

}

.p-learning__number01{

    font-size: calc(11 * var(--px));

    font-weight: 600;

}

.p-learning__number02{

    font-size: calc(28 * var(--px));

    font-family: var(--number-font-family);

    font-weight: 600;

    margin-top: calc(2 * var(--px));

}

.p-learning__title{

    margin-left: calc(15 * var(--px));

}

.p-learning__title01{

    display: block;

    font-size: var(--fs-base);

}

.p-learning__title02{

    display: block;

    font-size: var(--fs-large-title);

    font-weight: 600;

    margin-top: calc(10 * var(--px))

}

.p-learning__text{

    margin-top: calc(20 * var(--px));

    font-size: var(--fs-base);

    line-height: var(--lh-base);

}

.p-learning__image{

    width: calc(400 * var(--px));

    flex-shrink: 0;

    border-radius: var(--radius-base);

    overflow: hidden;

}

.p-learning__image img{

    width: 100%;

    height: auto;

}

.p-learning__pc-level{

    width: 100%;

    display: flex;

    justify-content: space-between;

    margin-top: calc(30 * var(--px));

}

.p-learning__pc-level img{

    width: calc(50% - calc(25 * var(--px)));

    height: auto;

}

.p-learning__sp-level{

    display: none;

}

.p-learning__note{

    font-size: var(--fs-small-text);

    line-height: var(--lh-base);

    margin-top: calc(10 * var(--px));

}

.p-learning__moodle{

    background: var(--gray-color-light);

    padding: calc(20 * var(--px));

    margin-top: calc(20 * var(--px));

    border-radius: var(--radius-base);

}

.p-learning__moodle-text{

    font-size: var(--fs-tiny-text);

    line-height: var(--lh-tighter);

    margin-top: calc(12 * var(--px));

}

.p-learning__moodle-logo{

    display: flex;

    align-items: flex-end;

}

.p-learning__moodle-logo__image{

    width: calc(110 * var(--px));

}

.p-learning__moodle-logo__image img{

    width: 100%;

    height: auto;

}

.p-learning__moodle-logo__text{

    font-size: var(--fs-tiny-text);

    margin-left: calc(10 * var(--px));

}

@media screen and (max-width: 767px) {

    .p-learning__list{

        display: block;

    }

    .p-learning__item{

        width: 100%;

        display: flex;

        flex-direction: column;

        padding: calc(30 * var(--px)) calc(20 * var(--px));

    }

    .p-learning__main{

        width: 100%;

        padding-right: 0;

    }

    .p-learning__number{

        width: calc(44 * var(--px));

        height: calc(44 * var(--px));

        background-size: cover;        

    }

    .p-learning__number01{

        font-size: calc(10 * var(--px));

    }

    .p-learning__number02{

        font-size: calc(24 * var(--px));

    }

    .p-learning__title{

        margin-left: calc(12 * var(--px));

    }

    .p-learning__title01{

        font-size: var(--fs-small-text);

    }

    .p-learning__title02{

        margin: calc(7 * var(--px)) 0 0;

    }

    .p-learning__item:nth-child(n+2){

        margin-top: calc(30 * var(--px));

    }

    .p-learning__image{

        width: 100%;

        margin-top: calc(20 * var(--px));

    }

    .p-learning__pc-level{

        display: none;

    }

    .p-learning__sp-level{

        display: block;

        margin: calc(15 * var(--px)) 0 calc(25 * var(--px));

    }

    .p-learning__sp-level img{

        width: 100%;

        height: auto;

    }

    .p-learning__sp-level img:last-child{

        margin-top: calc(3 * var(--px));

    }

    .p-learning__moodle-text{

        line-height: var(--lh-tight);

    }

}