@media screen and (min-width:601px) {
    #skillTop .m-container {
        width: 1200px
    }
}

@media print {
    #skillTop .m-container {
        width: 100%
    }
}

#skillTop .skill-pickup {
    margin-bottom: 40px
}

@media screen and (max-width:600px) {
    #skillTop .skill-pickup {
        padding: 0 16px
    }
}

#skillTop .skill-pickup h3 {
    color: #fda600;
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 18px
}

@media screen and (max-width:600px) {
    #skillTop .skill-pickup h3 {
        font-size: 16px
    }
}

#skillTop .skill-pickup__list {
    display: flex;
    justify-content: space-between
}

@media screen and (max-width:600px) {
    #skillTop .skill-pickup__list {
        flex-direction: column
    }

}



#skillTop .new_pick_up{
    background:#e7f4f5;
    padding:40px 30px 30px 30px;
    margin:0 0 30px 0;
}
#skillTop .new_pick_up h3{
    text-align:center;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fda600;
}
#skillTop .new_pick_up ul{
    display: flex;
    flex-wrap: wrap;
}
#skillTop .new_pick_up ul li{
    width:100%;
    max-width:560px;
    border:2px solid #ffbc05;
    background:#FFF;
    display:inline-block;
    margin:20px 20px 0px 0;
    padding:20px;
    border-radius: 10px;        /* CSS3草案 */
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 10px;   /* Firefox用 */
    box-shadow:5px 5px 10px #CCC;
}
#skillTop .new_pick_up ul li .left{
    width:80%;
    float:left;
    padding:0 20px 0 0;
}
#skillTop .new_pick_up ul li .left div{
    font-weight:700;
    font-size:21px;
    margin:0 0 10px 0;
}
#skillTop .new_pick_up ul li .left p{
    color:#003399;
    font-size:16px;
    line-height:19pt;
    font-weight:700;
}
#skillTop .new_pick_up ul li .left p span{
    display:inline-block;
    margin:10px 0 0 0;
    font-size:13px;
    line-height:17pt;
    font-weight:400;
    color:#666;
}
#skillTop .new_pick_up ul li a .left div{
    color:#000;
}
#skillTop .new_pick_up ul li a:hover .left{
    text-decoration:underline;
}
#skillTop .new_pick_up ul li .right{
    width:20%;
    float:right;
}
#skillTop .new_pick_up ul li .right p{
    text-align:right;
    margin:0 0 0px 0;
}
#skillTop .new_pick_up ul li .right span{
    margin:0 0 5px 0;
}
#skillTop .new_pick_up ul li .right img{
    width:100%;
    max-width:100%;
}
#skillTop .new_pick_up ul li:nth-child(2),
#skillTop .new_pick_up ul li:nth-child(4){
    margin:20px 0px 0px 0;
}

.onlyPC{
    display:block;
}


@media screen and (max-width:600px) {
    #skillTop .new_pick_up ul li .left div{
        font-weight:700;
        font-size:18px;
        line-height:21pt;
        margin:0 0 10px 0;
    }
    #skillTop .new_pick_up ul li .left{
        width:70%;
        float:left;
        padding:0 15px 0 0;
    }
    #skillTop .new_pick_up ul li .right{
        width:30%;
        float:right;
    }
    #skillTop .new_pick_up{
        padding:30px 20px 20px 20px;
    }
    .label--online {
        background-color: #ff3399;
    }
    .onlyPC{
        display:none;
    }
    #skillTop .new_pick_up ul li{
        width:100%;
        max-width:100;
        border:2px solid #ffbc05;
        margin:20px 0px 0px 0;
        padding:20px;
    }
    #skillTop .new_pick_up ul li:nth-child(2),
    #skillTop .new_pick_up ul li:nth-child(4){
        margin:20px 0px 0px 0;
    }
}

#skillTop .skill-pickup__list li {
    border: 2px solid #ffbc05;
    width: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 32px;
    font-size: 16px
}

@media screen and (max-width:600px) {
    #skillTop .skill-pickup__list li {
        width: 100%;
        margin-bottom: 8px;
        padding: 8px 20px;
        font-size: 15px
    }
}

#skillTop .skill-pickup__list li a {
    text-align: center;
    color: #000;
    text-decoration: underline
}

#skillTop .skill-pickup__list li a:hover {
    text-decoration: none
}

@media print,
screen and (min-width:601px) {
    #skillTop .l-main__header {
        margin-bottom: 10px
    }

    #skillTop .description {
        margin-bottom: 20px
    }

    #skillTop .lnav {
        margin-bottom: 32px
    }

    #skillTop .lnav__cat {
        display: flex;
        border-bottom: 2px solid #fff
    }

    #skillTop .lnav__cat dt {
        width: 200px;
        display: flex;
        align-items: center;
        padding: 4px 20px;
        font-size: 128.57143%;
        font-weight: 700;
        background: #0089bb;
        color: #fff
    }

    #skillTop .lnav__cat dd {
        width: 1000px;
        padding: 8px 20px;
        background: #e7f4f5
    }

    #skillTop .lnav__cat dd ul {
        display: flex;
        flex-wrap: wrap;
        margin: -4px -32px 0 0
    }

    #skillTop .lnav__cat dd ul li {
        font-size: 16px;
        margin: 4px 32px 0 0
    }

    #skillTop .lnav__cat dd ul li > a {
        padding: 3px 0 3px 18px;
        background: url(/open-course/img/common/icon_arc-allor_b.png) no-repeat left center
    }

    #skillTop .course {
        margin-bottom: 70px
    }

    #skillTop .course .courseHead h3 {
        font-size: 128.57143%;
        font-weight: 700;
        margin-bottom: 10px
    }

    #skillTop .map {
        font-size: 16px
    }

    #skillTop .map thead {
        background-color: #0068b7;
        color: #fff;
        text-align: center;
        font-weight: 700
    }

    #skillTop .map thead th {
        padding: 0 5px;
        text-align:center;
        vertical-align: middle;
    }

    #skillTop .map thead th + th {
        border-left: 1px solid #fff
    }

    #skillTop .map thead th:nth-child(1) {
        width: 200px
    }

    #skillTop .map thead th:nth-child(2) {
        width: 120px
    }

    #skillTop .map tbody td,
    #skillTop .map tbody th {
        padding: 10px;
        text-align: left;
        vertical-align: top;
        border: 1px solid #eee;
        border-top: none;
        border-color: #ccc #eee;
        font-weight: 700
    }

    #skillTop .map tbody th {
        font-weight: 700;
        border-left: 1px solid #ccc
    }

    #skillTop .map tbody p:first-child {
        margin-bottom: 5px
    }

    #skillTop .map tbody p:last-child {
        margin-bottom: 0
    }

    #skillTop .map tbody a {
        text-decoration: underline
    }

    #skillTop .map tbody a:hover {
        text-decoration: none
    }

    #skillTop .map tbody td:nth-last-child(1),
    #skillTop .map tbody td:nth-last-child(2) {
        padding-bottom: 10px;
        border: none;
        border-bottom: 1px solid #ccc;
        font-weight: 400
    }

    #skillTop .map tbody td:nth-last-child(1) + td,
    #skillTop .map tbody td:nth-last-child(2) + td {
        border-right: 1px solid #ccc;
        width: 36.7%;
    }

    #skillTop .map tbody .map__item--bdDot td:nth-last-child(1),
    #skillTop .map tbody .map__item--bdDot td:nth-last-child(2) {
        border-bottom: 1px dotted #ccc
    }

    #skillTop .map .map__item--fresh td {
        background-color: #fafcf5
    }

    #skillTop .map .map__item--young td {
        background-color: #f2fbf2
    }

    #skillTop .map .map__item--middle td {
        background-color: #f7fdff
    }

    #skillTop .map .map__item--leader td {
        background-color: #e5f7ff
    }

    #skillTop .map .map__item--manage td {
        background-color: #fffcf7
    }

    #skillTop .map__rowOdd .courseTable__item {
        background-color: #f1f9ff
    }
}

@media print {

    .-pc-global-footer,
    .l-breadcrumbs__wrap,
    .l-headBar,
    .lnav,
    .m-banner,
    .m-related,
    .print {
        display: none
    }

    ul {
        list-style: none
    }

    .lnav__cat,
    .skill-pickup__list {
        padding: 0 !important
    }

    * {
        box-sizing: border-box
    }
}

#skillTop .ranking_btn {
    width: 737px;
    margin: -20px auto 50px;
}

#skillTop .ranking_btn ul li {
    padding: 15px;
    border: solid 2px #0069bb;
    background-color: #e6f2fb;
    text-align: center;
    font-weight: bold;
}

#skillTop .ranking_btn ul li a {
    color: #0069bb;
}

/*# sourceMappingURL=maps/skill.css.map */