/*==============================
 common
==============================*/

.column {
    margin-bottom: 120px;
}


.left-Column {
    width: calc(100% - 330px);
    float: left;
}

.ly-Column {
    margin-bottom: 160px;
}

.page-Ttl {
    color: #ffffff;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    background-image: linear-gradient(90deg, #4678bd 0%, #315b95 100%);
    border-left: 15px solid #205075;
    padding: 5px 20px;
    margin-bottom: 60px;
}

.label-Ttl {
    font-size: 32px;
    font-weight: bold;
    border-bottom: 2px solid #234798;
    padding-bottom: 10px;
    padding-left: 40px;
    margin-bottom: 50px;
    position: relative;
}

.label-Ttl::before {
    content: "";
    width: 31px;
    height: 33px;
    background-image: url(../images/common/label_icon.png);
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 1;
}

/*===== recommend-List =====*/

.recommend-List {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: #8cbbff;
    border: 2px solid #8cbbff;
    box-sizing: border-box;
}

.recommend-List h3 {
    width: 250px;
    font-size: 22px;
    font-weight: bold;
    padding: 20px 0px 20px 30px;
    box-sizing: border-box;
}

.recommend-List ul {
    width: calc(100% - 250px);
    background-color: #ffffff;
    padding: 20px 30px;
    box-sizing: border-box;
}

.recommend-List ul li {
    font-size: 16px;
    padding-left: 30px;
    position: relative;
}

.recommend-List ul li::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    border: 2px solid #8cbbff;
    position: absolute;
    top: 4px;
    left: 0;
    z-index: 1;
}

.recommend-List ul li::after {
    content: "";
    display: block;
    width: 4px;
    height: 10px;
    border-right: 3px solid #8cbbff;
    border-bottom: 3px solid #8cbbff;
    transform: rotate(45deg);
    position: absolute;
    top: 5px;
    left: 6px;
    z-index: 1;
}

.recommend-List ul li + li {
    margin-top: 10px;
}


.kiji{

}

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

    .column {
        margin-bottom: 100px;
    }

    .ly-Column {
        margin-bottom: 140px;
    }

    .left-Column {
        width: calc(100% - 290px);
    }

    .page-Ttl {
        font-size: 28px;
        margin-bottom: 50px;
    }

    .label-Ttl {
        font-size: 30px;
        margin-bottom: 40px;
    }

    .label-Ttl::before {
        top: 6px;
    }

    /*===== recommend-List =====*/

    .recommend-List ul {
        width: calc(100% - 220px);
    }

    .recommend-List h3 {
        width: 220px;
        font-size: 20px;
        padding: 20px 0px 20px 20px;
    }

}

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

    .column {
        margin-bottom: 80px;
    }

    .ly-Column {
        margin-bottom: 120px;
    }

    .left-Column {
        width: 100%;
    }

    .page-Ttl {
        font-size: 24px;
        margin-bottom: 40px;
    }

    .label-Ttl {
        font-size: 28px;
        margin-bottom: 30px;
    }

    /*===== recommend-List =====*/

    .recommend-List h3 {
        width: 100%;
        text-align: center;
        padding: 15px 0;
    }

    .recommend-List ul {
        width: 100%;
        padding: 20px;
    }

}


/*==============================
 hero-Standard
==============================*/

.hero-Standard .bg-Image {
    height: 35vw;
    background-size: cover;
    background-position: center center;
}

.hero-Standard .box {
    max-width: 1280px;
    width: 100%;
    position: absolute;
    right: 0;
    bottom: 12vw;   
    left: 0;
    margin: auto;
    z-index: 1;
}

.hero-Standard .box .txt {
    font-size: 24px;
    text-align: center;
    padding-top: 30px;
}

.hero-Standard .site-Ttl {
    color: #315e81;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    text-shadow: 3px 3px 0px #ffffff;
    padding: 0 20px;
}

.hero-Standard .site-Ttl span {
    display: block;
    font-size: 90px;
    margin-bottom: 10px;
}


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

    .hero-Standard .box {
        top: calc(50% + 20px);
        bottom: auto;
        transform: translateY(-50%);
    }

    .hero-Standard .bg-Image {
        height: 38vw;
    }

}

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

    .hero-Standard .site-Ttl {
        font-size: 28px;
    }

    .hero-Standard .site-Ttl span {
        font-size: 40px;
    }

    .hero-Standard .box .txt {
        font-size: 18px;
        padding-top: 20px;
    }

    .hero-Standard .bg-Image {
        height: 40vw;
    }

}

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

    .hero-Standard {
        padding-top: 60px;
    }

    .hero-Standard .site-Ttl {
        font-size: 24px;
    }

    .hero-Standard .site-Ttl span {
        font-size: 32px;
    }

    .hero-Standard .box .txt {
        font-size: 15px;
        padding-top: 10px;
    }

    .hero-Standard .bg-Image {
        height: 60vw;
    }
    
}

/*==============================
 course-Link
==============================*/

.course-Link .ttl {
    width: 50%;
    color: #034374;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 30px;
    float: right;
}

.course-Link .lb-Txt {
    display: block;
    line-height: 1;
    margin-bottom: 10px;
}

.course-Link .lb-Txt span {
    color: #315e81;
    font-size: 16px;
    padding-right: 40px;
    padding-left: 33px;
    position: relative;
}

.course-Link .lb-Txt span::before {
    content: "";
    width: 23px;
    height: 24px;
    background-image: url(../images/common/label_icon.png);
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.course-Link .lb-Txt span::after {
    content: "";
    display: block;
    width: 30px;
    height: 1px;
    background-color: #315e81;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
}

.course-Link .image {
    width: 50%;
    padding-right: 60px;
    margin-top: 50px;
    box-sizing: border-box;
    float: left;
}

.course-Link dl {
    width: 50%;
    float: right;
}

.course-Link dt {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 30px;
}

.course-Link dd {
    font-size: 16px;
    line-height: 2;
}

.course-Link .page-Btn {
    margin-top: 40px;
}

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

    .course-Link .ttl {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .course-Link dt {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .course-Link .image {
        padding-right: 40px;
    }

    .course-Link .page-Btn {
        width: 100%;
        margin-top: 30px;
    }

}

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

    .course-Link .ttl {
        width: 100%;
        font-size: 30px;
    }

    .course-Link .image {
        width: 100%;
        padding-right: 0;
        margin-top: 0;
        margin-bottom: 20px;
    }

    .course-Link dl {
        width: 100%;
    }
    
    .course-Link .page-Btn a {
        width: 100%;
    }

}


/*==============================
 sub-Corporate
==============================*/

.sub-Corporate .lb-Txt span {
    font-weight: bold;
}

.sub-Corporate .txt-Box {
    width: 55%;
    float: right;
}

.sub-Corporate .txt-Box .ttl {
    color: #034374;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 30px;
}

.sub-Corporate .txt-Box dl {
    margin-bottom: 40px;
}

.sub-Corporate .txt-Box dt {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 30px;
}

.sub-Corporate .txt-Box dd {
    font-size: 18px;
    line-height: 2;
}

.sub-Corporate .img-Box {
    width: 45%;
    padding-right: 60px;
    padding-bottom: 50px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.sub-Corporate .img-Box::before {
    content: "";
    display: block;
    width: 200px;
    height: 200px;
    background-image: url(../images/common/deco02.png);
    background-size: cover;
    background-position: center center;
    position: absolute;
    bottom: 0;
    left: 10px;
    z-index: -1;
}

.sub-Corporate .img-Box figure:first-of-type {
    padding-right: 40px;
}

.sub-Corporate .img-Box figure:last-of-type {
    padding-left: 160px;
    margin-top: 40px;
}

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

    .sub-Corporate .txt-Box .ttl {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .sub-Corporate .txt-Box dt {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .sub-Corporate .txt-Box dd {
        font-size: 16px;
    }

    .sub-Corporate .img-Box {
        padding-right: 40px;
    }

    .sub-Corporate .img-Box::before {
        width: 170px;
        height: 170px;
    }

}


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

    .sub-Corporate .txt-Box {
        width: 100%;
        float: none;
    }

    .sub-Corporate .txt-Box .ttl {
        font-size: 30px;
    }

    .sub-Corporate .img-Box {
        width: 100%;
        padding-right: 0;
        margin-top: 60px;
        float: none;
    }

    .sub-Corporate .img-Box::before {
        width: 140px;
        height: 140px;
    }

    .sub-Corporate .img-Box figure:last-of-type {
        padding-left: 130px;
        margin-top: 30px;
    }


}


/*==============================
 about
==============================*/

.about .ly-Box {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 80px;
}

.about .ly-Box .image {
    width: 50%;
    box-sizing: border-box;
}

.about .ly-Box .txt-Box {
    width: 50%;
}

.about .ly-Box .txt-Box p {
    font-size: 18px;
    line-height: 2;
}

.about .ly-Box .txt-Box p + p {
    margin-top: 20px;
}

.about .ly-Box .txt-Box h3 {
    font-size: 28px;
    font-weight: bold;
    border-bottom: 1px solid #333333;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.about .ly-Box .txt-Box h4 {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: -1px;
    margin-bottom: 20px;
}

.about .box-A .image {
    padding-right: 60px;
}

.about .box-B {
    flex-direction: row-reverse;
}

.about .box-B .image {
    padding-left: 60px;
}

.about .box-C {
    margin-bottom: 80px;
}

.about .box-C .txt-Box p {
    font-size: 18px;
    line-height: 2;
}

.about .box-C .txt-Box h3 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
}

.about .box-C .txt-Box p + p {
    margin-top: 20px;
}

.about .column-Ttl {
    font-size: 32px;
    font-weight: bold;
    padding-left: 38px;
    margin-bottom: 60px;
    position: relative;
}

.about .column-Ttl::before {
    content: "";
    width: 28px;
    height: 30px;
    background-image: url(../images/common/label_icon.png);
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 11px;
    left: 0;
    z-index: 1;
}


/*===== intro =====*/

.about .intro .ttl {
    color: #034374;
    font-size: 28px;
    font-weight: bold;
    padding-left: 80px;
    margin-bottom: 60px;
    position: relative;
}

.about .intro .ttl::before {
    content: "";
    display: block;
    width: 60px;
    height: 1px;
    background-color: #034374;
    position: absolute;
    top: 23px;
    left: 0;
    z-index: 1;
}

.about .intro .ly-Box {
    margin-bottom: 130px;
}

.about .intro .ly-Box .img-Box {
    width: 50%;
    box-sizing: border-box;
    position: relative;
}

.about .intro .box-A .img-Box {
    padding-right: 60px;
}

.about .intro .box-A .img-Box::before {
    content: "";
    display: block;
    width: 180px;
    height: 180px;
    background-image: url(../images/common/deco02.png);
    background-size: cover;
    background-position: center center;
    position: absolute;
    bottom: -47px;
    left: 23px;
    z-index: -1;
}

.about .intro .box-B .img-Box {
    padding-left: 60px;
} 

.about .intro .box-B .img-Box::before {
    content: "";
    display: block;
    width: 180px;
    height: 180px;
    background-image: url(../images/common/deco01.png);
    background-size: cover;
    background-position: center center;
    position: absolute;
    right: 20px;
    bottom: -48px;
    z-index: -1;
}

.about .intro .ly-Box .img-Box .image {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}

.about .intro .box-A .img-Box figure:first-of-type {
    padding-right: 40px;
}

.about .intro .box-A .img-Box figure:last-of-type {
    padding-left: 160px;
    margin-top: 40px;
}

.about .intro .box-B .img-Box figure:first-of-type {
    padding-left: 40px;
}

.about .intro .box-B .img-Box figure:last-of-type {
    padding-right: 160px;
    margin-top: 40px;
}


/*===== .act-Overview =====*/

.about .act-Overview .column-Ttl {
    border-bottom: 1px solid #333333;
    padding-bottom: 10px;
}

.about .act-Overview .txt-Box {
    margin-bottom: 80px;
}

.about .act-Overview .txt-Box p {
    font-size: 18px;
    line-height: 2;
}

.about .act-Overview .txt-Box p + p {
    margin-top: 20px;
}

.about .act-Overview .l-About {
    margin-bottom: 100px;
}

.about .act-Overview .l-About .txt-Box {
    margin-bottom: 50px;
}

.about .act-Overview .l-About dl {
    padding: 0 20px;
}

.about .act-Overview .l-About dl + dl {
    margin-top: 80px;
}

.about .act-Overview .l-About dl dt {
    font-size: 24px;
    font-weight: bold;
    padding-left: 20px;
    margin-bottom: 30px;
    position: relative;
}

.about .act-Overview .l-About dl dt::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 8px solid #034374;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    position: absolute;
    top: 14px;
    left: 0;
    z-index: 1;
}

.about .act-Overview .l-About dl dd {
    font-size: 18px;
    line-height: 2;
}

.about .act-Overview .l-About dl dd + dd {
    margin-top: 20px;
}

.about .act-Overview .l-About dl dd span {
    display: block;
    margin: 25px 0; 
}

.about .act-Overview .l-About dl dd span b {
    display: block;
    font-size: 23px;
}

.about .act-Overview .features {
    background-color: #e9f2ff;
    position: relative;
}

.about .act-Overview .features::before {
    content: "";
    display: block;
    width: 100%;
    height: calc(100% - 410px);
    background-image: url(../images/common/mask02.png);
    background-size: 100% 100%;
    position: absolute;
    top: -1px;
    right: 0;
    z-index: 1;
}

.about .act-Overview .features::after {
    content: "";
    display: block;
    width: 100%;
    height: calc(100% - 150px);
    background-image: url(../images/common/mask01.png);
    background-size: 100% 100%;
    position: absolute;
    right: 0;
    bottom: -1px;
    z-index: 1;
}

.about .act-Overview .features h3 {
    color: #034374;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.about .act-Overview .features h3::after {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background-color: #234798;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}

.about .act-Overview .features .list {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.about .act-Overview .features .list .item {
    width: calc(100% / 3 - 30px);
    margin-top: 40px;
    margin-right: 45px;
    position: relative;
}

.about .act-Overview .features .list .item:nth-child(1), 
.about .act-Overview .features .list .item:nth-child(2), 
.about .act-Overview .features .list .item:nth-child(3) {
    margin-top: 0;
}

.about .act-Overview .features .list .item:nth-child(3n) {
    margin-right: 0;
}

.about .act-Overview .features .list .item .image {
    margin-bottom: 20px;
}

.about .act-Overview .features .list .item dt {
    color: #002846;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

.about .act-Overview .features .list .item dt small {
    font-size: 15px;
}


/*===== .skill-Rank =====*/

.about .skill-Rank {
    background-color: #e9f2ff;
    padding: 120px 0;
}

.about .skill-Rank .column-Ttl {
    margin-bottom: 40px;
}

.about .skill-Rank .col {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 80px;
}

.about .skill-Rank .txt-Box {
    width: 50%;
}

.about .skill-Rank .txt-Box dt {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 30px;
}

.about .skill-Rank .txt-Box dd {
    font-size: 18px;
    line-height: 2;
}

.about .skill-Rank .txt-Box dd + dd {
    margin-top: 20px;
}

.about .skill-Rank .image {
    width: 50%;
    padding-left: 60px;
    box-sizing: border-box;
}

.about .skill-Rank .view-Col {
    margin-bottom: 80px;
}

.about .skill-Rank .view-Col dl + dl {
    margin-top: 60px;
}

.about .skill-Rank .view-Col dl dt {
    font-size: 26px;
    font-weight: bold;
    border-bottom: 1px solid #333333;
    padding-left: 20px;
    padding-bottom: 10px;
    margin-bottom: 30px;
    position: relative;
}

.about .skill-Rank .view-Col dl dt::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 8px solid #034374;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    position: absolute;
    top: 14px;
    left: 0;
    z-index: 1;
}

.about .skill-Rank .view-Col dl dd {
    font-size: 18px;
    line-height: 2;
}

.about .skill-Rank .list dl {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.about .skill-Rank .list dl + dl {
    margin-top: 30px;
}

.about .skill-Rank .list dl.item-A {
    border: 2px solid #7030a0;
}

.about .skill-Rank .list dl.item-B {
    border: 2px solid #4c85d9;
}

.about .skill-Rank .list dl.item-C {
    border: 2px solid #42c181;
}

.about .skill-Rank .list dl.item-D {
    border: 2px solid #ffaf00;
}

.about .skill-Rank .list dl.item-E {
    border: 2px solid #e54648;
}

.about .skill-Rank .list dl dt {
    display: flex;
    width: 280px;
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.about .skill-Rank .list dl.item-A dt {
    background-color: #7030a0;
}

.about .skill-Rank .list dl.item-B dt {
    background-color: #4c85d9;
}

.about .skill-Rank .list dl.item-C dt {
    background-color: #42c181;
}

.about .skill-Rank .list dl.item-D dt {
    background-color: #ffaf00;
}

.about .skill-Rank .list dl.item-E dt {
    background-color: #e54648;
}

.about .skill-Rank .list dl dt small {
    font-size: 16px;
    font-weight: normal;
}

.about .skill-Rank .list dl dd {
    display: flex;
    width: calc(100% - 280px);
    min-height: 130px;
    font-size: 16px;
    line-height: 1.8;
    background-color: #ffffff;
    flex-direction: column;
    justify-content: center;
    padding: 20px 30px;
    box-sizing: border-box;
}


/*===== .course-Link =====*/

.about .course-Link {
    background-color: #e9f2ff;
    padding: 120px 0;
}

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

    .about .ly-Box {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 60px;
    }

    .about .ly-Box .txt-Box h3 {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .about .ly-Box .txt-Box h4 {
        font-size: 20px;
        margin-bottom: 15px;
    }    

    .about .ly-Box .txt-Box p {
        font-size: 16px;
    }

    .about .ly-Box .txt-Box p + p {
        margin-top: 15px;
    }

    .about .box-A .image {
        padding-right: 40px;
    }

    .about .box-B .image {
        padding-left: 40px;
    }

    .about .box-C .txt-Box h3 {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .about .box-C .txt-Box p {
        font-size: 16px;
    }

    .about .box-C .txt-Box p + p {
        margin-top: 15px;
    }

    .about .column-Ttl {
        font-size: 30px;
        padding-left: 35px;
        margin-bottom: 40px;
    }

    
    /*===== intro =====*/

    .about .intro .ttl {
        font-size: 26px;
        padding-left: 60px;
        margin-bottom: 40px;
    }

    .about .intro .ttl::before {
        width: 45px;
        top: 20px;
    }

    .about .intro .ly-Box {
        margin-bottom: 80px;
    }


    /*===== .act-Overview =====*/
    
    .about .act-Overview .txt-Box {
        margin-bottom: 60px;
    }

    .about .act-Overview .txt-Box p {
        font-size: 16px;
    }

    .about .act-Overview .txt-Box p + p {
        margin-top: 15px;
    }

    .about .act-Overview .l-About {
        margin-bottom: 80px;
    }

    .about .act-Overview .l-About dl + dl {
        margin-top: 70px;
    }

    .about .act-Overview .l-About dl dt {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .about .act-Overview .l-About dl dd {
        font-size: 16px;
        line-height: 2;
    }

    .about .act-Overview .l-About dl dd span b {
        font-size: 20px;
    }

    .about .act-Overview .features h3 {
        font-size: 26px;
        margin-bottom: 40px;
    }

    .about .act-Overview .features .list .item {
        width: calc(100% / 3 - 20px);
        margin-top: 30px;
        margin-right: 30px;
    }

    .about .act-Overview .features .list .item .image {
        margin-bottom: 15px;
    }

    .about .act-Overview .features .list .item dt {
        font-size: 18px;
    }

    .about .act-Overview .features .list .item dt small {
        font-size: 14px;
    }

    /*===== .skill-Rank =====*/

    .about .skill-Rank {
        padding: 100px 0;
    }

    .about .skill-Rank .column-Ttl {
        margin-bottom: 30px;
    }

    .about .skill-Rank .txt-Box dt {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .about .skill-Rank .txt-Box dd {
        font-size: 16px;
    }

    .about .skill-Rank .txt-Box dd + dd {
        margin-top: 15px;
    }

    .about .skill-Rank .image {
        padding-left: 40px;
    }

    .about .skill-Rank .col {
        margin-bottom: 60px;
    }

    .about .skill-Rank .view-Col {
        margin-bottom: 60px;
    }

    .about .skill-Rank .view-Col dl + dl {
        margin-top: 40px;
    }

    .about .skill-Rank .view-Col dl dt {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .about .skill-Rank .view-Col dl dd {
        font-size: 16px;
    }

    .about .skill-Rank .list dl dt {
        width: 260px;
        font-size: 20px;
    }

    .about .skill-Rank .list dl dt small {
        font-size: 15px;
    }

    .about .skill-Rank .list dl dd {
        width: calc(100% - 260px);
    }


    /*===== .course-Link =====*/

    .about .course-Link {
        padding: 100px 0;
    }

}


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

    .about .ly-Box .image {
        width: 100%;
    }

    .about .ly-Box .txt-Box {
        width: 100%;
    }

    .about .box-A .image {
        padding-right: 0;
        margin-bottom: 30px;
    }

    .about .box-B .image {
        padding-left: 0;
        margin-bottom: 30px;
    }

    .about .box-C .txt-Box h3 {
        font-size: 20px;
    }

    .about .column-Ttl {
        font-size: 28px;
        padding-left: 32px;
        margin-bottom: 30px;
    }

    .about .column-Ttl::before {
        top: 9px;
    }

    /*===== .intro =====*/

    .about .intro .ttl {
        font-size: 24px;
        padding-left: 0;
        margin-bottom: 30px;
    }

    .about .intro .ttl::before {
        content: none;
    }

    .about .intro .ly-Box {
        flex-direction: column-reverse;
        margin-bottom: 60px;
    }

    .about .intro .ly-Box .img-Box {
        width: 100%;
        margin-top: 20px;
    }

    .about .intro .box-A .img-Box {
        padding-right: 0;
    }

    .about .intro .box-B .img-Box {
        padding-left: 0;
    }

    .about .intro .box-A .img-Box::before,
    .about .intro .box-B .img-Box::before {
        content: none;
    }

    .about .intro .box-A .img-Box figure:first-of-type {
        padding-right: 0;
        margin-bottom: 0;
    }

    .about .intro .box-B .img-Box figure:first-of-type {
        padding-left: 0;
        margin-bottom: 0;
    }

    .about .intro .box-A .img-Box figure:last-of-type,
    .about .intro .box-B .img-Box figure:last-of-type {
        display: none;
    }

    /*===== .act-Overview =====*/
    
    .about .act-Overview .txt-Box {
        margin-bottom: 50px;
    }

    .about .act-Overview .l-About dl {
        padding: 0 10px;
    }

    .about .act-Overview .features::before {
        height: 50%;
    }

    .about .act-Overview .features::after {
        height: 80%;
    }

    .about .act-Overview .features h3 {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .about .act-Overview .features h3::after {
        width: 30px;
    }

    .about .act-Overview .features .list .item {
        width: 100%;
        margin-top: 40px;
        margin-right: 0;
    }

    .about .act-Overview .features .list .item:nth-child(2), 
    .about .act-Overview .features .list .item:nth-child(3) {
        margin-top: 40px;
    }

    .about .act-Overview .features .list .item dt {
        font-size: 20px;
    }


    /*=====  .skill-Rank =====*/

    .about .skill-Rank {
        padding: 80px 0;
    }

    .about .skill-Rank .col {
        margin-bottom: 30px;
    }

    .about .skill-Rank .txt-Box {
        width: 100%;
    }

    .about .skill-Rank .txt-Box dt {
        font-size: 20px;
    }

    .about .skill-Rank .image {
        width: 100%;
        padding-left: 0;
        margin-top: 40px;
    }

    .about .skill-Rank .view-Col dl dt {
        font-size: 22px;
    }

    .about .skill-Rank .list dl {
        display: block;
    }

    .about .skill-Rank .list dl dt {
        width: 100%;
        font-size: 22px;
        padding: 20px 0;
    }

    .about .skill-Rank .list dl dd {
        width: 100%;
        padding: 20px;
    }

    /*===== .course-Link =====*/

    .about .course-Link {
        padding: 80px 0;
    }

}



/*==============================
 course
==============================*/


/*===== intro =====*/

.course .intro h2 {
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}

.course .intro p {
    font-size: 18px;
    line-height: 2;
}

.course .intro p + p {
    margin-top: 20px;
}

/*===== explanation =====*/

.course .explanation .txt-Box {
    margin-bottom: 50px;
}

.course .explanation .txt-Box h3 {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 30px;
}

.course .explanation .txt-Box p {
    font-size: 18px;
    line-height: 2;
}

.course .explanation .txt-Box p + p {
    margin-top: 20px;
}

.course .explanation .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 100px;
}

.course .explanation .list li {
    width: calc(100% / 2 - 20px);
    margin-top: 30px;
    margin-right: 40px;
}

.course .explanation .list li:nth-of-type(1),
.course .explanation .list li:nth-of-type(2) {
    margin-top: 0;
}

.course .explanation .list li:nth-of-type(2n) {
    margin-right: 0;
}

.course .explanation .list li a {
    display: block;
    height: 100%;
    text-align: center;
    box-shadow: 2px 2px 5px #aeaeae;
    border-radius: 5px;
    padding: 40px 20px 40px;
    transition: .6s all;
    box-sizing: border-box;
    position: relative;
}

.course .explanation .list li a:hover {
    background-color: #ebf2ff;
}

.course .explanation .list li a::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-right: 3px solid #234798;
    border-bottom: 3px solid #234798;
    position: absolute;
    right: 0;
    bottom: 20px;
    left: 0;
    margin: auto;
    transform: rotate(45deg);
    z-index: 2;
}

.course .explanation .list li span {
    display: block;
    color: #234798;
    font-size: 14px;
    font-weight: bold;
}

.course .explanation .list li p {
    font-size: 22px;
    font-weight: bold;
}


/*===== common-List =====*/

.common-List {
    padding-top: 140px;
    margin-top: -140px;
}

.common-List .list-Ttl {
    font-size: 28px;
    font-weight: bold;
    background-color: #e9f2ff;
    padding: 10px 40px;
    margin-bottom: 50px;
    border-radius: 5px;
    position: relative;
}

.common-List .list-Ttl::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    background-color: transparent;
    border-left: 8px solid #234798;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-radius: 0;
    position: absolute;
    top: 25px;
    left: 20px;
    z-index: 1;
}

.common-List .list-Overview {
    padding: 0 20px;
    margin-bottom: 60px;
}

.common-List .list-Overview dt {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 30px;
}

.common-List .list-Overview dd {
    font-size: 16px;
    line-height: 2;
}

.common-List .list-Overview dd + dd {
    margin-top: 20px;
}

.common-List ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 40px;
    margin-bottom: 60px;
}

.common-List ul li {
    width: calc(100% / 2 - 15px);
    margin-top: 30px;
    margin-right: 30px;
}

.common-List ul li:nth-of-type(1),
.common-List ul li:nth-of-type(2) {
    margin-top: 0;
}

.common-List ul li:nth-of-type(2n) {
    margin-right: 0;
}

.common-List ul li a {
    display: block;
    background-color: #666666;
    background-size: cover;
    background-position: center center;
    border-radius: 5px;
    position: relative;
}

.common-List ul li a::before {
    content: "";
    display: block;
    padding-top: 45%;
}

.common-List ul li a::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 5px;
    transition: .6s all;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.common-List ul li a:hover::after {
    background-color: rgba(51, 51, 51, 0.5);
}

.common-List ul li h4 {
    width: calc(100% - 60px);
    color: #ffffff;
    font-size: 26px;
    font-weight: bold;
    background-color: #4678bd;
    padding: 5px 20px;
    box-sizing: border-box;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    position: absolute;
    bottom: 20px;
    left: 0;
    z-index: 2;
    transition: .6s all;
}

.common-List ul li h4::before {
    content: "";
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    margin: auto;
    z-index: 1;
}

.common-List ul li h4::after {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-top: 2px solid #4678bd;
    border-right: 2px solid #4678bd;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 22px;
    bottom: 0;
    margin: auto;
    z-index: 2;
}

/*===== technicalSkill-List =====*/


.technicalSkill-List ul li.cad-Course a {
    background-image: url(../images/course/cad_list_image.jpg);
}

.technicalSkill-List ul li.cad-Course a h4 {
    background-color: #9c2988;
}

.technicalSkill-List ul li.cad-Course a h4::after {
    border-top: 2px solid #9c2988;
    border-right: 2px solid #9c2988;
}

.technicalSkill-List ul li.dtp-Course a {
    background-image: url(../images/course/dtp_list_image.jpg);
}

.technicalSkill-List ul li.dtp-Course a h4 {
    background-color: #e2ad0b;
}

.technicalSkill-List ul li.dtp-Course a h4::after {
    border-top: 2px solid #e2ad0b;
    border-right: 2px solid #e2ad0b;
}

.technicalSkill-List ul li.web-Course a {
    background-image: url(../images/course/web_list_image.jpg);
}

.technicalSkill-List ul li.web-Course a h4 {
    background-color: #0088df;
}

.technicalSkill-List ul li.web-Course a h4::after {
    border-top: 2px solid #0088df;
    border-right: 2px solid #0088df;
}

.technicalSkill-List ul li.office-Course a {
    background-image: url(../images/course/office_list_image.jpg);
}

.technicalSkill-List ul li.office-Course a h4 {
    background-color: #2a9d24;
}

.technicalSkill-List ul li.office-Course a h4::after {
    border-top: 2px solid #2a9d24;
    border-right: 2px solid #2a9d24;
}

.technicalSkill-List ul li.pro-Course a {
    background-image: url(../images/course/pro_list_image.jpg);
}

.technicalSkill-List ul li.pro-Course a h4 {
    background-color: #c5cc0c;
}

.technicalSkill-List ul li.pro-Course a h4::after {
    border-top: 2px solid #c5cc0c;
    border-right: 2px solid #c5cc0c;
}

.technicalSkill-List ul li.movie-Course a {
    background-image: url(../images/course/movie_list_image.jpg);
}

.technicalSkill-List ul li.movie-Course a h4 {
    background-color: #1fb8a8;
}

.technicalSkill-List ul li.movie-Course a h4::after {
    border-top: 2px solid #1fb8a8;
    border-right: 2px solid #1fb8a8;
}

.technicalSkill-List .basic-Btn {
    padding: 0 40px;
}

.technicalSkill-List .basic-Btn a {
    display: flex;
    flex-wrap: wrap;
    box-shadow: 2px 2px 5px #aeaeae;
    transition: .6s all;
}

.technicalSkill-List .basic-Btn a:hover {
    opacity: 0.5;
}

.technicalSkill-List .basic-Btn .bg-Image {
    width: calc(100% / 2 - 15px);
    background-image: url(../images/course/basic_image.jpg);
    background-size: cover;
    background-position: center center;
    margin-right: 30px;
}

.technicalSkill-List .basic-Btn .bg-Image::before {
    content: "";
    display: block;
    padding-top: 50%;
}

.technicalSkill-List .basic-Btn .box {
    display: flex;
    width: calc(100% / 2 - 15px);
    flex-direction: column;
    justify-content: center;
    padding-right: 30px;
    box-sizing: border-box;
}

.technicalSkill-List .basic-Btn .box h4 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.technicalSkill-List .basic-Btn .box h4 span {
    display: block;
    font-size: 16px;
}


.technicalSkill-List .basic-Btn .box p {
    color: #e4676b;
    font-size: 18px;
    font-weight: bold;
    padding-left: 30px;
    position: relative;
}

.technicalSkill-List .basic-Btn .box p::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: #e4676b;
    border-radius: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}

.technicalSkill-List .basic-Btn .box p::after {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5px;
    margin: auto;
    z-index: 2;
}


/*===== taketing-List =====*/

.taketing-List ul li h4 {
    background-color: #69cdf2;
}

.taketing-List ul li h4::after {
    border-top: 2px solid #69cdf2;
    border-right: 2px solid #69cdf2;
}

.taketing-List ul li.flowchart-Course a {
    background-image: url(../images/course/flowchart_list_image.jpg);
}

.taketing-List ul li.mental-Course a {
    background-image: url(../images/course/mental_list_image.jpg);
}

.taketing-List ul li.concept-Course a {
    background-image: url(../images/course/concept_list_image.jpg);
}

.taketing-List ul li.comm-Course a {
    background-image: url(../images/course/comm_list_image.jpg);
}

/*===== reskilling-List =====*/

.reskilling-List ul li h4 {
    background-color: #000d4f;
}

.reskilling-List ul li h4::after {
    border-top: 2px solid #000d4f;
    border-right: 2px solid #000d4f;
}

.reskilling-List ul li.sidejob-Course a {
    background-image: url(../images/course/sidejob_list_image.jpg);
}

.reskilling-List ul li.selfact-Course a {
    background-image: url(../images/course/selfact_list_image.jpg);
}

.reskilling-List ul li.problem-Course a {
    background-image: url(../images/course/problem_list_image.jpg);
}


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

    /*===== intro =====*/

    .course .intro h2 {
        font-size: 20px;
    }

    .course .intro p {
        font-size: 16px;
        line-height: 2;
    }

    .course .intro p + p {
        margin-top: 15px;
    }

    /*===== explanation =====*/

    .course .explanation .txt-Box {
        margin-bottom: 40px;
    }

    .course .explanation .txt-Box h3 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .course .explanation .txt-Box p {
        font-size: 16px;
    }

    .course .explanation .list {
        margin-bottom: 80px;
    }

    /*===== common-List =====*/

    .common-List {
        padding-top: 60px;
        margin-top: -60px;
    }

    .common-List .list-Ttl {
        font-size: 26px;
        padding: 10px 38px;
        margin-bottom: 40px;
    }

    .common-List .list-Overview {
        margin-bottom: 50px;
    }

    .common-List .list-Overview dt {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .common-List ul {
        padding: 0 20px;
        margin-bottom: 50px;
    }

    .common-List ul li h4 {
        width: calc(100% - 30px);
        font-size: 24px;
    }


    /*===== technicalSkill-List =====*/

    .technicalSkill-List .basic-Btn {
        padding: 0 20px;
    }

    .technicalSkill-List .basic-Btn .box h4 {
        font-size: 22px;
    }

    .technicalSkill-List .basic-Btn .box h4 span {
        font-size: 14px;
    }

    .technicalSkill-List .basic-Btn .box p {
        font-size: 16px;
        padding-left: 28px;
    }

}



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

    .course .intro h2 {
        text-align: left;
        margin-bottom: 20px;
    }

    /*===== explanation =====*/

    .course .explanation .list li {
        width: 100%;
        margin-right: 0;
    }

    .course .explanation .list li + li {
        margin-top: 20px;
    }

    /*===== common-List =====*/

    .common-List .list-Ttl {
        font-size: 24px;
        padding: 10px 25px;
        margin-bottom: 30px;
    }

    .common-List .list-Ttl::before {
        border-left: 6px solid #234798;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        top: 23px;
        left: 14px;
    }

    .common-List .list-Overview {
        padding: 0;
    }

    .common-List ul {
        padding: 0;
        margin-bottom: 40px;
    }

    .common-List ul li {
        width: 100%;
        margin-top: 20px;
        margin-right: 0;
    }

    .common-List ul li:nth-of-type(2) {
        margin-top: 20px;
    }

    .common-List ul li h4 {
        font-size: 22px;
    }

    /*===== technicalSkill-List =====*/

    .technicalSkill-List .basic-Btn {
        padding: 0;
    }

    .technicalSkill-List .basic-Btn .bg-Image {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .technicalSkill-List .basic-Btn .box {
        width: 100%;
        padding: 0 20px 30px;
    }

    .technicalSkill-List .basic-Btn .box h4 {
        margin-bottom: 10px;
    }

    .technicalSkill-List .basic-Btn .box h4 span {
        letter-spacing: -0.5px;
    }

    
}

/*==============================
 course-List
==============================*/

/*===== overview =====*/

.course-List .overview .col {
    display: flex;
    flex-wrap: wrap;
}

.course-List .overview .col .image {
    width: 50%;
    padding-right: 40px;
    box-sizing: border-box;
}

.course-List .overview .col .txt-Box {
    width: 50%;
}

.course-List .overview .col .txt-Box h2 {
    color: #315e81;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 30px;
}

.course-List .overview .col .txt-Box h2 b {
    font-size: 32px;
}

.course-List .overview .col .txt-Box dl dt {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 30px;
}

.course-List .overview .col .txt-Box dl dd {
    font-size: 18px;
    line-height: 2;
}


/*===== course-Navi =====*/

.course-List .course-Navi h2 {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
}

.course-List .course-Navi {
    background-color: #e9f2ff;
    padding: 80px 0;
}

.course-List .course-Navi .list {
    display: flex;
    flex-wrap: wrap;
}

.course-List .course-Navi .list .item {
    width: calc(100% / 2 - 10px);
    margin-top: 30px;
    margin-right: 20px;
}

.course-List .course-Navi .list .item:nth-child(1),
.course-List .course-Navi .list .item:nth-child(2) {
    margin-top: 0;
}

.course-List .course-Navi .list .item:nth-child(2n) {
    margin-right: 0;
}

.course-List .course-Navi .list .item a {
    display: block;
    position: relative;
}

.course-List .course-Navi .list .item a::after {
    content: "";
    width: calc(100% - 10px);
    height: 100%;
    background-color: #6087bd;
    border-radius: 10px;
    transition: .6s all;
    position: absolute;
    top: 10px;
    right: 0;
    z-index: 1;
}

.course-List .course-Navi .list .item a:hover::after {
    background-color: #c4dfff;
}

.course-List .course-Navi .list .item dl {
    background-color: #ffffff;
    padding: 20px;
    margin-right: 10px;
    border-radius: 10px;
    border: 1px solid #034374;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    transition: .6s all;
}

.course-List .course-Navi .list .item a:hover dl {
    background-color: #6087bd;
}

.course-List .course-Navi .list .item dl::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #034374;
    border-right: 2px solid #034374;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    margin: auto;
    z-index: 1;
    transition: .6s all;
}

.course-List .course-Navi .list .item a:hover dl::after {
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
}

.course-List .course-Navi .list .item dl dt {
    color: #034374;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    transition: .6s all;
}

.course-List .course-Navi .list .item a:hover dl dt {
    color: #ffffff;
}

.course-List .course-Navi .list .item dl dd {
    font-size: 15px;
    text-align: center;
    transition: .6s all;
}

.course-List .course-Navi .list .item a:hover dl dd {
    color: #ffffff;
}

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

    /*===== .overview =====*/

    .course-List .overview .col .txt-Box h2 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .course-List .overview .col .txt-Box h2 b {
        font-size: 30px;
    }

    .course-List .overview .col .txt-Box dl dt {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .course-List .overview .col .txt-Box dl dd {
        font-size: 16px;
    }

    /*===== course-Navi =====*/

    .course-List .course-Navi {
        padding: 60px 0;
    }

    .course-List .course-Navi .list .item dl dt {
        font-size: 20px;
        margin-bottom: 5px;
    }

}

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

    /*===== .overview =====*/

    .course-List .overview .col .image {
        width: 100%;
        padding-right: 0;
        margin-bottom: 30px;
    }

    .course-List .overview .col .txt-Box {
        width: 100%;
    }

    .course-List .overview .col .txt-Box h2 {
        font-size: 18px;
    }

    .course-List .overview .col .txt-Box h2 b {
        font-size: 28px;
    }

    .course-List .overview .col .txt-Box dl dt {
        font-size: 20px;
    }

    /*===== course-Navi =====*/

    .course-List .course-Navi .list .item {
        width: 100%;
        margin-right: 0;
    }

    .course-List .course-Navi .list .item:nth-child(2) {
        margin-top: 30px;
    }

    .course-List .course-Navi .list .item dl dt {
        font-size: 18px;
    }

}


/*==============================
 type-course
==============================*/

.type-course {
    padding-top: 140px;
    margin-top: -140px;
}

.type-course .page-Ttl {
    margin-bottom: 40px;
}

.type-course .txt-Box {
    line-height: 1.8;
    margin-bottom: 30px;
}

.type-course .txt-Box p {
    font-size: 16px;
    line-height: 2;
}

.type-course .txt-Box p + p {
    margin-top: 20px;
}

.type-course .note-Box {
    margin-bottom: 30px;
}

.type-course .note-Box p {
    color: #e00000;
    font-size: 16px;
    font-weight: bold;
    padding-left: 20px;
    position: relative;
}

.type-course .note-Box p::before {
    content: "\203B";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.type-course .recommend-List {
    margin-bottom: 80px;
}

.type-course .package-List {
    margin-top: 80px;
}

.type-course .package-List h3 {
    color: #034374;
    font-size: 26px;
    font-weight: bold;
    border-bottom: 1px solid #034374;
    padding-bottom: 10px;
    margin-bottom: 40px;
}

.type-course .item {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #cecece;
}

.type-course .item + .item {
    margin-top: 40px;
}

.type-course .item .image {
    width: 340px;
}

.type-course .item .image img {
    height: 100%;
    object-fit: cover;
}

.type-course .item .right-Box {
    width: calc(100% - 340px);
    padding: 30px;
    box-sizing: border-box;
}

.type-course .item .right-Box .catch {
    color: #234798;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
}

.type-course .item .right-Box .ttl {
    font-size: 28px;
    font-weight: bold;
    position: relative;
}

.type-course .item.hop .right-Box .ttl,
.type-course .item.step .right-Box .ttl,
.type-course .item.jump .right-Box .ttl,
.type-course .item.trial .right-Box .ttl,
.type-course .item.high .right-Box .ttl {
    padding-left: 35px;
}

.type-course .item .right-Box .ttl::before {
    content: "";
    display: block;
    width: 25px;
    height: 33px;
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 6px;
    left: 0;
    z-index: 1;
}

.type-course .item.hop .right-Box .ttl::before { 
    background-image: url(../images/course/hop_icon.png); 
}

.type-course .item.step .right-Box .ttl::before {
    background-image: url(../images/course/step_icon.png);
    top: 10px;
}

.type-course .item.jump .right-Box .ttl::before {
    background-image: url(../images/course/jump_icon.png);
    top: 7px;
}

.type-course .item.trial .right-Box .ttl::before {
    width: 30px;
    height: 39px;
    background-image: url(../images/course/trial_icon.png);
    top: 4px;
}

.type-course .item.high .right-Box .ttl::before {
    width: 30px;
    height: 39px;
    background-image: url(../images/course/high_icon.png);
    top: 4px;
}

.type-course .item .right-Box .cat {
    font-size: 0;
}

.type-course .item .right-Box .cat li {
    display: inline-block;
    color: #3b8ac7;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #3b8ac7;
    padding: 2px 10px;
    margin-top: 15px;
    margin-right: 5px;
    border-radius: 20px;
}

.type-course .item .right-Box .txt {
    font-size: 16px;
    margin-top: 20px;
}

.type-course .item .right-Box .btn-Box {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 30px;
}

.type-course .item .right-Box .btn-Box div + div {
    margin-left: 10px;
}

.type-course .item .right-Box .btn-Box div a {
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 15px 0;
    border-radius: 5px;
    transition: .6s all;
    position: relative;
}

.type-course .item .right-Box .btn-Box div a::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    margin: auto;
    z-index: 1;
    transition: .6s all;
}

.type-course .item .right-Box .btn-Box .schooling-Btn a {
    width: 240px;
    background-color: #315e81;
    border: 1px solid #315e81;
}

.type-course .item .right-Box .btn-Box .schooling-Btn a:hover {
    color: #315e81;
    background-color: transparent;
}

.type-course .item .right-Box .btn-Box div a:hover::after {
    border-top: 3px solid #315e81;
    border-right: 3px solid #315e81;
}

.type-course .item .right-Box .btn-Box .distance-Btn a {
    width: 160px;
    background-color: #1bb53f;
    border: 1px solid #1bb53f;
}

.type-course .item .right-Box .btn-Box .distance-Btn a:hover {
    color: #1bb53f;
    background-color: transparent;
}

.type-course .item .right-Box .btn-Box .distance-Btn a:hover::after {
    border-top: 3px solid #1bb53f;
    border-right: 3px solid #1bb53f;
}

.type-course .item .right-Box .btn-Box .online-Btn a {
    width: 160px;
    background-color: #ed9349;
    border: 1px solid #ed9349;
}

.type-course .item .right-Box .btn-Box .online-Btn a:hover {
    color: #ed9349;
    background-color: transparent;
}

.type-course .item .right-Box .btn-Box .online-Btn a:hover::after {
    border-top: 3px solid #ed9349;
    border-right: 3px solid #ed9349;
}

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

    .type-course {
        padding-top: 60px;
        margin-top: -60px;
    }

}

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

    .type-course .recommend-List {
        margin-bottom: 60px;
    }

    .type-course .package-List {
        margin-top: 60px;
    }

    .type-course .item .image {
        width: 260px;
    }

    .type-course .item .right-Box {
        width: calc(100% - 260px);
        padding: 30px 20px;
    }

    .type-course .item .right-Box .catch {
        font-size: 14px;
    }

    .type-course .item .right-Box .ttl {
        font-size: 26px;
    }

    .type-course .item.step .right-Box .ttl::before {
        top: 6px;
    }

    .type-course .item.jump .right-Box .ttl::before {
        top: 6px;
    }

    .type-course .item.trial .right-Box .ttl::before {
        top: 3px;
    }

    .type-course .item .right-Box .cat li {
        font-size: 13px;
    }

    .type-course .item .right-Box .btn-Box div + div {
        margin-left: 0;
    }

    .type-course .item .right-Box .btn-Box .schooling-Btn {
        width: 100%;
    }

    .type-course .item .right-Box .btn-Box .schooling-Btn a {
        width: 100%;
    }

    .type-course .item .right-Box .btn-Box .distance-Btn {
        width: calc(100% / 2 - 10px);
        margin-top: 20px;
        margin-right: 20px;
    }

    .type-course .item .right-Box .btn-Box .distance-Btn a {
        width: 100%;
    }

    .type-course .item .right-Box .btn-Box .online-Btn {
        width: calc(100% / 2 - 10px);
        margin-top: 20px;
    }

    .type-course .item .right-Box .btn-Box .online-Btn a {
        width: 100%;
    }

}


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

    .type-course .recommend-List {
        margin-bottom: 40px;
    }

    .type-course .package-List h3 {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .type-course .item .image {
        width: 100%;
        height: 220px;
    }

    .type-course .item .right-Box {
        width: 100%;
        padding: 30px 20px;
    }

    .type-course .item .right-Box .ttl {
        font-size: 24px;
    }

    .type-course .item.hop .right-Box .ttl, 
    .type-course .item.step .right-Box .ttl, 
    .type-course .item.jump .right-Box .ttl, 
    .type-course .item.trial .right-Box .ttl, 
    .type-course .item.high .right-Box .ttl {
        padding-left: 30px;
    }

    .type-course .item .right-Box .ttl::before {
        width: 20px;
        height: 26px;
    }

    .type-course .item.jump .right-Box .ttl::before {
        top: 7px;
    }

    .type-course .item.trial .right-Box .ttl::before {
        width: 25px;
        height: 31px;
        top: 5px;
    }

    .type-course .item .right-Box .cat li {
        font-size: 12px;
    }

    .type-course .item .right-Box .txt {
        font-size: 15px;
    }

    .type-course .item .right-Box .btn-Box .distance-Btn {
        width: 100%;
        margin-top: 20px;
        margin-right: 0;
    }

    .type-course .item .right-Box .btn-Box .online-Btn {
        width: 100%;
    }

}


/*==============================
 course-View
==============================*/

.course-View .column-Ttl {
    font-size: 32px;
    font-weight: bold;
    padding-left: 38px;
    margin-bottom: 60px;
    position: relative;
}

.course-View .column-Ttl::before {
    content: "";
    width: 28px;
    height: 30px;
    background-image: url(../images/common/label_icon.png);
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 11px;
    left: 0;
    z-index: 1;
}

/*===== .course-View .intro =====*/

.course-View .intro {
    margin-bottom: 100px;
}

.course-View .intro .txt-Box {
    margin-bottom: 40px;
}

.course-View .intro h2 {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}

.course-View .intro p {
    font-size: 18px;
    line-height: 2;
}

.course-View .intro .note {
    color: #e00000;
    font-size: 16px;
    font-weight: bold;
    padding-left: 20px;
    position: relative;
}

.course-View .intro .note::before {
    content: "\203B";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.course-View .intro .note a {
    color: #e00000;
    text-decoration: underline;
}

.course-View .intro p + p {
    margin-top: 20px;
}


/*===== .course-View .detail =====*/

.course-View .detail {
    margin-bottom: 120px;
}

.course-View .detail .inner {
    max-width: 860px;
    margin: 0 auto;
}

/* .overview */

.course-View .detail .overview {
    margin-bottom: 100px;
}

.course-View .detail .overview h3 {
    font-size: 28px;
    font-weight: bold;
    border-left: 10px solid #234798;
    padding: 5px 0 5px 20px;
}

.course-View .detail .overview .caps {
    padding-left: 33px;
    margin-top: 10px;
}

.course-View .detail .overview .caps p {
    padding-left: 20px;
    position: relative;
}

.course-View .detail .overview .caps p::before {
    content: "\203B";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.course-View .detail .overview .cat {
    font-size: 0;
    margin-bottom: 30px;
}

.course-View .detail .overview .cat li {
    display: inline-block;
    color: #3b8ac7;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #3b8ac7;
    padding: 2px 10px;
    margin-top: 20px;
    margin-right: 5px;
    border-radius: 20px;
}

.course-View .detail .price-Box dl {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.course-View .detail .price-Box dl dt,
.course-View .detail .price-Box div h4 {
    display: flex;
    width: 220px;
    font-size: 18px;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    background-color: #d5e7ff;
    border: 1px solid #ffffff;
    padding: 20px;
    box-sizing: border-box;
}

.course-View .detail .price-Box dl dd,
.course-View .detail .price-Box div ul {
    width: calc(100% - 220px);
    font-size: 20px;
    background-color: #e9f2ff;
    border: 1px solid #ffffff;
    box-sizing: border-box;
    padding: 20px;
}

.course-View .detail .price-Box dl dd small {
    font-size: 15px;
}

.course-View .detail .price-Box .cap {
    display: block;
    padding-left: 20px;
    position: relative;
}

.course-View .detail .price-Box .cap::before {
    content: "\203B";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.course-View .detail .price-Box div {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.course-View .detail .price-Box div ul li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.course-View .detail .price-Box div ul li + li {
    margin-top: 10px;
}

.course-View .detail .price-Box div ul li span {
    font-size: 18px;
}

.course-View .detail .price-Box div ul li span:first-of-type {
    width: 100px;
}

.course-View .detail .price-Box div ul li span:last-of-type {
    width: calc(100% - 100px);
    font-size: 15px;
}

.course-View .detail .price-Box div ul li b {
    font-size: 22px;
}

.course-View .detail .price-Box div ul li small {
    width: 100%;
    font-size: 15px;
}


/* .need-Skill */

.course-View .detail .need-Skill {
    margin-bottom: 100px;
}

.course-View .detail .need-Skill h3 {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 40px;
    position: relative;
}

.course-View .detail .need-Skill h3::after {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background-color: #234798;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}

.course-View .detail .need-Skill .list {
    background-color: #f8fbff;
    padding: 60px 50px;
}

.course-View .detail .need-Skill .list .item + .item {
    margin-top: 60px;
}

.course-View .detail .need-Skill .list .box dt {
    width: 200px;
    font-size: 24px;
    font-weight: bold;
    padding-left: 55px;
    float: left;
    position: relative;
}

.course-View .detail .need-Skill .list .item dt::before {
    content: "";
    display: block;
    width: 51px;
    height: 44px;
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: -5px;
    left: 0;
    z-index: 1;
}

.course-View .detail .need-Skill .list .item.rank-A dt::before {
    background-image: url(../images/course/rank_a_icon.png);
}

.course-View .detail .need-Skill .list .item.rank-B dt::before {
    background-image: url(../images/course/rank_b_icon.png);
}

.course-View .detail .need-Skill .list .item.rank-C dt::before {
    background-image: url(../images/course/rank_c_icon.png);
}

.course-View .detail .need-Skill .list .item.rank-D dt::before {
    background-image: url(../images/course/rank_d_icon.png);
}

.course-View .detail .need-Skill .list .item.rank-E dt::before {
    background-image: url(../images/course/rank_e_icon.png);
}

.course-View .detail .need-Skill .list .box dd {
    width: calc(100% - 280px);
    font-size: 16px;
    float: right;
}

.course-View .detail .need-Skill .list .box dd.btn {
    margin-top: 10px;
}

.course-View .detail .need-Skill .list .box dd.btn span {
    display: block;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
}

.course-View .detail .need-Skill .list .box dd.btn a {
    display: block;
    max-width: 380px;
    color: #e4676b;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    border: 1px solid #e4676b;
    padding: 10px 0;
    border-radius: 10px;
    position: relative;
    transition: .6s all;
}

.course-View .detail .need-Skill .list .box dd.btn a:hover {
    color: #ffffff;
    background-color: #e4676b;
}

.course-View .detail .need-Skill .list .box dd.btn a::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-top: 3px solid #e4676b;
    border-right: 3px solid #e4676b;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    margin: auto;
    z-index: 1;
    transition: .6s all;
}

.course-View .detail .need-Skill .list .box dd.btn a:hover::after {
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
}

.course-View .detail .need-Skill .list .box dd.b-Btn a {
    color: #234661;
    border: 1px solid #234661;
}

.course-View .detail .need-Skill .list .box dd.b-Btn a:hover {
    background-color: #234661;
}

.course-View .detail .need-Skill .list .box dd.b-Btn a::after {
    border-top: 3px solid #234661;
    border-right: 3px solid #234661;
}

/* .skill-Set */

.course-View .detail .skill-Set {
    margin-bottom: 100px;
}

.course-View .detail .skill-Set h3 {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 40px;
    position: relative;
}

.course-View .detail .skill-Set h3::after {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background-color: #234798;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}


.course-View .detail .skill-Set .image {
    max-width: 768px;
    margin: 0 auto;
}

/* .curriculum */

.course-View .detail .curriculum {
    margin-bottom: 100px;
}

.course-View .detail .curriculum h3 {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 40px;
    position: relative;
}

.course-View .detail .curriculum h3::after {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background-color: #234798;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}

.course-View .detail .curriculum table {
    width: 100%;
    border-collapse: collapse;
}

.course-View .detail .curriculum table th {
    font-size: 18px;
    background-color: #d5e7ff;
    border: 2px solid #ffffff;
    padding: 20px;
}

.course-View .detail .curriculum table td {
    font-size: 16px;
    background-color: #e9f2ff;
    border: 2px solid #ffffff;
    padding: 20px;
}

.course-View .detail .curriculum table td:first-of-type {
    width: 210px;
    font-weight: bold;
}

/* .cv-Btn */

.course-View .detail .cv-Btn a {
    display: block;
    max-width: 820px;
    margin: 0 auto;
    transition: .6s all;
    position: relative;
}

.course-View .detail .cv-Btn a::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #dba6ff;
    border-radius: 30px;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: -1;
    transition: .6s all;
}

.course-View .detail .cv-Btn a:hover:after {
    background-color: #ab39fa;
}

.course-View .detail .cv-Btn a span {
    display: block;
    color: #ffffff;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    line-height: 1.4;
    background-color: #ab39fa;
    border: 1px solid #ab39fa;
    padding: 30px;
    border-radius: 30px;
    position: relative;
    transition: .6s all;
}

.course-View .detail .cv-Btn a:hover span {
    color: #ab39fa;
    background-color: #ffffff;
}

.course-View .detail .cv-Btn a span::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-top: 4px solid #ffffff;
    border-right: 4px solid #ffffff;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    margin: auto;
    z-index: 1;
    transition: .6s all;
}

.course-View .detail .cv-Btn a:hover span::after {
    border-top: 4px solid #ab39fa;
    border-right: 4px solid #ab39fa;
}


/*===== .connection-Course =====*/

.connection-Course {
    background-color: #e9f2ff;
    padding: 120px 0;
}

.connection-Course h2 {
    font-size: 32px;
    font-weight: bold;
    border-left: 10px solid #234798;
    border-bottom: 1px solid #333333;
    padding: 10px 20px;
    margin-bottom: 60px;
}

.connection-Course .box {
    padding: 0 20px;
}

.connection-Course .box + .box {
    margin-top: 80px;
}

.connection-Course .box h3 {
    font-size: 28px;
    font-weight: bold;
    padding-left: 38px;
    margin-bottom: 40px;
    position: relative;
}

.connection-Course .box h3::before {
    content: "";
    width: 28px;
    height: 30px;
    background-image: url(../images/common/label_icon.png);
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 1;
}

.connection-Course .c-Box h3::before {
    background-image: url(../images/common/c_label_icon.png);
}

.connection-Course .o-Box h3::before {
    background-image: url(../images/common/o_label_icon.png);
}

.connection-Course .box .item {
    max-width: 900px;
    background-color: #ffffff;
    border: 1px solid #cecece;
    padding: 40px;
    margin: 0 auto;
    box-sizing: border-box;
}

.connection-Course .box .item + .item {
    margin-top: 40px;
}

.connection-Course .c-Box .item {
    background-color: #eaffef;
}

.connection-Course .o-Box .item {
    background-color: #fff5e6;
}

.connection-Course .box .item .catch {
    color: #234798;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
}

.connection-Course .box .item h4 {
    font-size: 28px;
    font-weight: bold;
}

.connection-Course .box .item .cat {
    font-size: 0;
}

.connection-Course .box .item .cat li {
    display: inline-block;
    color: #3b8ac7;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #3b8ac7;
    padding: 2px 10px;
    margin-top: 15px;
    margin-right: 5px;
    border-radius: 20px;
}

.connection-Course .box .item .txt {
    line-height: 1.8;
    margin-top: 20px;
}

.connection-Course .box .item .btn-Box {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 30px;
}

.connection-Course .box .item .btn-Box div + div {
    margin-left: 10px;
}

.connection-Course .box .item .btn-Box div a {
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 15px 0;
    border-radius: 5px;
    transition: .6s all;
    position: relative;
}

.connection-Course .box .item .btn-Box div a::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    margin: auto;
    z-index: 1;
    transition: .6s all;
}

.connection-Course .box .item .btn-Box .schooling-Btn a {
    width: 240px;
    background-color: #315e81;
    border: 1px solid #315e81;
}

.connection-Course .box .item .btn-Box .schooling-Btn a:hover {
    color: #315e81;
    background-color: transparent;
}

.connection-Course .box .item .btn-Box .schooling-Btn a:hover::after {
    border-top: 3px solid #315e81;
    border-right: 3px solid #315e81;
}

.connection-Course .box .item .btn-Box .distance-Btn a {
    width: 160px;
    background-color: #1bb53f;
    border: 1px solid #1bb53f;
}

.connection-Course .box .item .btn-Box .distance-Btn a:hover {
    color: #1bb53f;
    background-color: transparent;
}

.connection-Course .box .item .btn-Box .distance-Btn a:hover::after {
    border-top: 3px solid #1bb53f;
    border-right: 3px solid #1bb53f;
}

.connection-Course .box .item .btn-Box .online-Btn a {
    width: 160px;
    background-color: #ed9349;
    border: 1px solid #ed9349;
}

.connection-Course .box .item .btn-Box .online-Btn a:hover {
    color: #ed9349;
    background-color: transparent;
}

.connection-Course .box .item .btn-Box .online-Btn a:hover::after {
    border-top: 3px solid #ed9349;
    border-right: 3px solid #ed9349;
}


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

    .course-View .column-Ttl {
        font-size: 30px;
        margin-bottom: 40px;
    }

    /*===== .course-View .intro =====*/

    .course-View .intro h2 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .course-View .intro p {
        font-size: 16px;
    }

    /*===== .course-View .detail =====*/

    .course-View .detail .overview {
        padding: 0 30px;
        margin-bottom: 80px;
    }

    .course-View .detail .overview h3 {
        font-size: 26px;
    }

    .course-View .detail .price-Box dl dt,
    .course-View .detail .price-Box div h4 {
        width: 170px;
    }

    .course-View .detail .price-Box dl dd, .course-View .detail .price-Box div ul {
        width: calc(100% - 170px);
    }

    .course-View .detail .need-Skill {
        padding: 0 30px;
        margin-bottom: 80px;
    }

    .course-View .detail .need-Skill h3 {
        font-size: 26px;
        margin-bottom: 30px;
    }

    .course-View .detail .need-Skill .list {
        padding: 50px 40px;
    }

    .course-View .detail .need-Skill .list .box dt {
        font-size: 22px;
        padding-left: 45px;
    }

    .course-View .detail .need-Skill .list .item dt::before {
        width: 40px;
        height: 34px;
        top: 0;
    }

    .course-View .detail .skill-Set {
        padding: 0 30px;
        margin-bottom: 80px;
    }

    .course-View .detail .skill-Set h3 {
        font-size: 26px;
        margin-bottom: 30px;
    }

    .course-View .detail .curriculum {
        padding: 0 30px;
        margin-bottom: 80px;
    }

    .course-View .detail .curriculum h3 {
        font-size: 26px;
        margin-bottom: 30px;
    }

    .course-View .detail .cv-Btn {
        padding: 0 30px;
    }

    .course-View .detail .cv-Btn a span {
        font-size: 28px;
    }

    /*===== .connection-Course =====*/

    .connection-Course {
        padding: 100px 0;
    }

    .connection-Course h2 {
        font-size: 30px;
        margin-bottom: 50px;
    }

    .connection-Course .box + .box {
        margin-top: 60px;
    }

    .connection-Course .box h3 {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .connection-Course .box .item h4 {
        font-size: 26px;
    }
    

}

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

    .course-View .column-Ttl {
        font-size: 28px;
        margin-bottom: 30px;
    }

    /*===== .course-View .intro =====*/

    .course-View .intro h2 {
        text-align: left;
    }

    /*===== .course-View .detail =====*/

    .course-View .detail .overview {
        padding: 0;
        margin-bottom: 60px;
    }

    .course-View .detail .overview h3 {
        font-size: 24px;
        padding: 5px 0 5px 10px;
    }

    .course-View .detail .overview .cat {
        font-size: 0;
        margin-bottom: 20px;
    }

    .course-View .detail .overview .cat li {
        margin-top: 15px;
    }

    .course-View .detail .price-Box dl + dl,
    .course-View .detail .price-Box div {
        margin-top: 20px;
    }

    .course-View .detail .price-Box dl dt,
    .course-View .detail .price-Box div h4 {
        width: 100%;
        padding: 10px 20px;
    }

    .course-View .detail .price-Box dl dd,
    .course-View .detail .price-Box div ul {
        width: 100%;
    }

    .course-View .detail .need-Skill {
        padding: 0;
        margin-bottom: 60px;
    }

    .course-View .detail .need-Skill h3 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .course-View .detail .need-Skill .list {
        padding: 40px 20px;
    }

    .course-View .detail .need-Skill .list .box dt {
        width: 100%;
        font-size: 20px;
        padding-left: 35px;
        margin-bottom: 20px;
    }

    .course-View .detail .need-Skill .list .item + .item {
        margin-top: 40px;
    }

    .course-View .detail .need-Skill .list .item dt::before {
        width: 29px;
        height: 25px;
        top: 4px;
    }

    .course-View .detail .need-Skill .list .box dd {
        width: 100%;
    }

    .course-View .detail .need-Skill .list .box dd.btn {
        margin-top: 15px;
    }

    .course-View .detail .need-Skill .list .box dd.btn span {
        display: block;
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .course-View .detail .need-Skill .list .box dd.btn a {
        font-size: 14px;
    }

    .course-View .detail .need-Skill .list .box dd.btn a::after {
        width: 5px;
        height: 5px;
        border-top: 2px solid #e4676b;
        border-right: 2px solid #e4676b;
    }

    .course-View .detail .skill-Set {
        padding: 0;
        margin-bottom: 60px;
    }

    .course-View .detail .skill-Set h3 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .course-View .detail .curriculum {
        padding: 0;
        margin-bottom: 60px;
    }

    .course-View .detail .curriculum h3 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .course-View .detail .curriculum table td:first-of-type {
        width: 90px;
    }

    .course-View .detail .cv-Btn {
        padding: 0;
    }

    .course-View .detail .cv-Btn a::after {
        border-radius: 20px;
    }

    .course-View .detail .cv-Btn a span {
        font-size: 19px;
        border-radius: 20px;
        padding: 20px 30px;
    }

    .course-View .detail .cv-Btn a span::after {
        width: 6px;
        height: 6px;
        border-top: 2px solid #ffffff;
        border-right: 2px solid #ffffff;
    }

    /*===== .connection-Course =====*/

    .connection-Course {
        padding: 80px 0;
    }

    .connection-Course h2 {
        font-size: 28px;
        padding: 5px 10px;
        margin-bottom: 40px;
    }

    .connection-Course .box {
        padding: 0;
    }

    .connection-Course .box h3 {
        font-size: 24px;
        padding-left: 32px;
    }

    .connection-Course .box h3::before {
        content: "";
        width: 24px;
        height: 25px;
    }

    .connection-Course .box .item {
        padding: 30px 20px;
    }

    .connection-Course .box .item h4 {
        font-size: 24px;
    }

    .connection-Course .box .item .cat li {
        font-size: 12px;
    }

    .connection-Course .box .item .btn-Box {
        display: block;
    }

    .connection-Course .box .item .btn-Box div + div {
        margin-top: 20px;
        margin-left: 0;
    }

    .connection-Course .box .item .btn-Box .schooling-Btn a {
        width: 100%;
    }

    .connection-Course .box .item .btn-Box .distance-Btn a {
        width: 100%;
    }

    .connection-Course .box .item .btn-Box .online-Btn a {
        width: 100%;
    }

}

/*==============================
 product-List
==============================*/

.product-List .item {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #cecece;
}

.product-List .item + .item {
    margin-top: 40px;
}

.product-List .item .image {
    width: 340px;
}

.product-List .item .image img {
    height: 100%;
    object-fit: cover;
}


/*==============================
 lectures-Style
==============================*/

.lectures-Style .column-Ttl {
    font-size: 32px;
    font-weight: bold;
    padding-left: 38px;
    margin-bottom: 60px;
    position: relative;
}

.lectures-Style .column-Ttl::before {
    content: "";
    width: 28px;
    height: 30px;
    background-image: url(../images/common/label_icon.png);
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 11px;
    left: 0;
    z-index: 1;
}

.lectures-Style .sc-Col {
    padding-top: 140px;
    margin-top: -140px;
}

/*===== .intro =====*/

.lectures-Style .intro {
    margin-bottom: 80px;
}

.lectures-Style .intro .txt-Box dt {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
}

.lectures-Style .intro .txt-Box dd {
    font-size: 18px;
    line-height: 2;
}


/*===== .page-Menu =====*/

.lectures-Style .page-Menu {
    background-image: linear-gradient(90deg, #4678bd 0%, #315b95 100%);
    padding: 5px 0;
}

.lectures-Style .page-Menu .list {
    display: flex;
    justify-content: space-between;
}

.lectures-Style .page-Menu .list li {
    flex: 1;
    border-left: 1px solid #ffffff;
}

.lectures-Style .page-Menu .list li:last-of-type {
    border-right: 1px solid #ffffff;
}

.lectures-Style .page-Menu .list li a {
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
    position: relative;
    transition: .6s all;
}

.lectures-Style .page-Menu .list li a:hover {
    background-color: #62bbff;
}

.lectures-Style .page-Menu .list li a::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    margin: auto;
    z-index: 1;
    transition: .6s all;
}

.lectures-Style .page-Menu.under .list li a::after {
    border-top: 2px solid #ffffff;
    border-right: 0;
    border-bottom: 0;
    border-left: 2px solid #ffffff;
    top: 5px;
}

/*===== .features =====*/

.lectures-Style .features .outer {
    background-color: #e9f2ff;
    padding: 120px 0;
}

.lectures-Style .features .column-Ttl {
    margin-bottom: 100px;
}

.lectures-Style .features .item + .item {
    margin-top: 100px;
}

.lectures-Style .features .item h3 {
    width: 50%;
    font-size: 24px;
    font-weight: bold;
    border-bottom: 1px solid #333333;
    float: right;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.lectures-Style .features .item.reverse h3 {
    float: left;
}

.lectures-Style .features .item .image {
    width: 50%;
    padding-right: 60px;
    box-sizing: border-box;
    float: left;
    position: relative;
}

.lectures-Style .features .item.reverse .image {
    padding-right: 0;
    padding-left: 60px;
    float: right;
}

.lectures-Style .features .item .image::before {
    display: block;
    color: #aecfff;
    font-size: 120px;
    line-height: 1;
    font-family: "Urbanist", sans-serif;
    position: absolute;
    top: -60px;
    left: 0;
    z-index: 1;
}

.lectures-Style .features .item.reverse .image::before {
    left: 60px;
}

.lectures-Style .features .item:nth-child(1) .image::before {
    content: "01";
}

.lectures-Style .features .item:nth-child(2) .image::before {
    content: "02";
}

.lectures-Style .features .item:nth-child(3) .image::before {
    content: "03";
}

.lectures-Style .features .item .txt-Box {
    width: 50%;
    float: right;
}

.lectures-Style .features .item .txt-Box p {
    font-size: 16px;
    line-height: 1.8;
}


/*===== .time-Table =====*/

.lectures-Style .time-Table .txt-Box {
    margin-bottom: 80px;
}

.lectures-Style .time-Table .txt-Box p {
    font-size: 18px;
    line-height: 2;
    margin-top: 20px;
}

.lectures-Style .time-Table .txt-Box dl {
    margin-top: 20px;
}

.lectures-Style .time-Table .txt-Box dl dt {
    font-size: 18px;
    margin-bottom: 5px;
}

.lectures-Style .time-Table .txt-Box dl dd {
    font-size: 18px;
    padding-left: 20px;
    position: relative;
}

.lectures-Style .time-Table .txt-Box dl dd::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.lectures-Style .time-Table .txt-Box dl dd:nth-of-type(1)::before {
    content: "\2460";
}

.lectures-Style .time-Table .txt-Box dl dd:nth-of-type(2)::before {
    content: "\2461";
}

.lectures-Style .time-Table .table-Box {
    max-width: 820px;
    margin: 0 auto;
}

.lectures-Style .time-Table table {
    width: 100%;
    border-collapse: collapse;
}

.lectures-Style .time-Table table th {
    font-size: 18px;
    background-color: #d5e7ff;
    border: 2px solid #ffffff;
    padding: 15px 0;
}

.lectures-Style .time-Table table td {
    font-size: 18px;
    text-align: center;
    background-color: #e9f2ff;
    border: 2px solid #ffffff;
    padding: 15px 0;
}

.lectures-Style .time-Table table .ly-Cell td {
    background-color: #eaeaea;
}

.lectures-Style .time-Table .caps-List {
    border: 2px solid #d5e7ff;
    padding: 30px 40px;
    margin-top: 40px;
}

.lectures-Style .time-Table .caps-List li {
    font-size: 18px;
    padding-left: 20px;
    position: relative;
}

.lectures-Style .time-Table .caps-List li::before {
    content: "\30FB";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.lectures-Style .time-Table .caps-List li + li {
    margin-top: 10px;
}


/*===== .note =====*/

.lectures-Style .note .outer {
    background-color: #e9f2ff;
    padding: 100px 0;
}

.lectures-Style .note .list {
    background-color: #ffffff;
    padding: 40px;
}

.lectures-Style .note .list li {
    font-size: 18px;
    padding-left: 20px;
    position: relative;
}

.lectures-Style .note .list li::before {
    content: "\30FB";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}


.lectures-Style .note .list li + li {
    margin-top: 20px;
}


/*===== .flow =====*/

.lectures-Style .flow .item {
    border: 2px solid #d5e7ff;
    padding: 40px;
    box-sizing: border-box;
    position: relative;
}

.lectures-Style .flow .item + .item {
    margin-top: 40px;
}

.lectures-Style .flow .item + .item::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 40px solid #315e81;
    position: absolute;
    top: -42px;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}

.lectures-Style .flow .item h3 {
    width: calc(100% - 400px);
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 30px;
    float: left;
}

.lectures-Style .flow .item h3 span {
    display: block;
    color: #315e81;
    font-size: 24px;
    font-weight: bold;
    padding-left: 20px;
    font-family: "Urbanist", sans-serif;
    position: relative;
}

.lectures-Style .flow .item h3 span::before {
    content: "";
    display: block;
    width: 15px;
    height: 2px;
    background-color: #315e81;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}

.lectures-Style .flow .item .image {
    width: 340px;
    margin-top: 40px;
    margin-left: 60px;
    float: right;
}

.lectures-Style .flow .item p {
    width: calc(100% - 400px);
    font-size: 16px;
    line-height: 2;
    float: left;
}

.lectures-Style .flow .item p + p {
    margin-top: 20px;
}

.lectures-Style .flow .item .btn {
    width: calc(100% - 400px);
    margin-top: 30px;
    float: left;
}

.lectures-Style .flow .item  .page-Btn a {
    max-width: 420px;
}

.lectures-Style .flow .item .tel-Box {
    width: calc(100% - 400px);
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid #bebebe;
    float: left;
}

.lectures-Style .flow .item .tel-Box dl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.lectures-Style .flow .item .tel-Box dl dt {
    color: #234798;
    font-size: 18px;
    font-weight: bold;
    margin-right: 10px;
}

.lectures-Style .flow .item .tel-Box dl dt::after {
    content: "\FF1A";
}

.lectures-Style .flow .item .tel-Box dl dd {
    padding-left: 30px;
    position: relative;
}

.lectures-Style .flow .item .tel-Box dl dd::before {
    content: "";
    display: block;
    width: 25px;
    height: 16px;
    background-image: url(../images/styles/freedial_icon.png);
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 18px;
    left: 0;
    z-index: 1;
}

.lectures-Style .flow .item .tel-Box dl dd a {
    color: #234798;
    font-size: 30px;
    font-weight: bold;
}

/*===== .faq =====*/

.lectures-Style .faq .outer {
    background-color: #e9f2ff;
    padding: 100px 0;
}

.lectures-Style .faq .item + .item {
    margin-top: 60px;
}

.lectures-Style .faq .item dt {
    font-size: 22px;
    font-weight: bold;
    border-bottom: 1px solid #333333;
    padding: 0 50px 10px;
    cursor: pointer;
    position: relative;
}

.lectures-Style .faq .item dt::before {
    content: "Q.";
    color: #315e81;
    position: absolute;
    top: 0;
    left: 20px;
    z-index: 1;
}

.lectures-Style .faq .item dt::after {
    content: "+";
    font-size: 26px;
    line-height: 1;
    position: absolute;
    top: 5px;
    right: 20px;
    z-index: 1;
    transition: .6s all;
}

.lectures-Style .faq .item dt.active::after {
    transform: rotate(45deg);
}

.lectures-Style .faq .item dd {
    display: none;
    font-size: 16px;
    line-height: 1.8;
    background-color: #ffffff;
    padding: 30px 50px;
    position: relative;
}

.lectures-Style .faq .item dd div {
    position: relative;
}

.lectures-Style .faq .item dd div::before {
    content: "A.";
    color: #8e7225;
    font-size: 22px;
    font-weight: bold;
    position: absolute;
    top: -5px;
    left: -27px;
    z-index: 1;
}


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

    .lectures-Style .sc-Col {
        padding-top: 60px;
        margin-top: -60px;
    }

    .lectures-Style .column-Ttl {
        font-size: 30px;
        margin-bottom: 40px;
    }

    /*===== .intro =====*/

    .lectures-Style .intro {
        margin-bottom: 60px;
    }

    .lectures-Style .intro .txt-Box dt {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .lectures-Style .intro .txt-Box dd {
        font-size: 16px;
    }


    /*===== .page-Menu =====*/

    .lectures-Style .page-Menu {
        padding: 0;
    }

    .lectures-Style .page-Menu .list {
        flex-wrap: wrap;
        justify-content: normal;
        border-top: 1px solid #ffffff;
    }

    .lectures-Style .page-Menu .list li {
        width: calc(100% / 3);
        flex: auto;
        border-top: 1px solid #ffffff;
        box-sizing: border-box;
    }

    .lectures-Style .page-Menu .list li:nth-of-type(1),
    .lectures-Style .page-Menu .list li:nth-of-type(2),
    .lectures-Style .page-Menu .list li:nth-of-type(3) {
        border-top: 0;
    }

    .lectures-Style .page-Menu .list li:nth-of-type(3n) {
        border-right: 1px solid #ffffff;
    }


    /*===== .features =====*/

    .lectures-Style .features .outer {
        padding: 100px 0;
    }

    .lectures-Style .features .column-Ttl {
        margin-bottom: 80px;
    }

    .lectures-Style .features .item + .item {
        margin-top: 80px;
    }

    .lectures-Style .features .item h3 {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .lectures-Style .features .item .image {
        padding-right: 40px;
    }

    .lectures-Style .features .item .image::before {
        font-size: 90px;
        top: -40px;
    }


    /*===== .time-Table =====*/

    .lectures-Style .time-Table .txt-Box {
        margin-bottom: 60px;
    }

    .lectures-Style .time-Table .txt-Box p {
        font-size: 16px;
        margin-top: 15px;
    }

    .lectures-Style .time-Table .txt-Box dl dt {
        font-size: 16px;
    }

    .lectures-Style .time-Table .txt-Box dl dd {
        font-size: 16px;
    }

    .lectures-Style .time-Table .caps-List {
        margin-top: 30px;
    }

    .lectures-Style .time-Table .caps-List li {
        font-size: 17px;
    }


    /*===== .note =====*/

    .lectures-Style .note .outer {
        padding: 80px 0;
    }

    .lectures-Style .note .list li {
        font-size: 17px;
    }


    /*===== .flow =====*/

    .lectures-Style .flow .item h3 {
        width: calc(100% - 320px);
        font-size: 24px;
        margin-bottom: 20px;
    }

    .lectures-Style .flow .item .image {
        width: 280px;
        margin-left: 40px;
    }

    .lectures-Style .flow .item p {
        width: calc(100% - 320px);
        font-size: 16px;
    }

    .lectures-Style .flow .item .btn {
        width: calc(100% - 320px);
    }

    .lectures-Style .flow .item .page-Btn a span {
        font-size: 16px;
    }

    .lectures-Style .flow .item .tel-Box {
        width: calc(100% - 320px);
        padding-top: 20px;
        margin-top: 20px;
    }

    .lectures-Style .flow .item .tel-Box dl dt {
        font-size: 16px;
    }

    .lectures-Style .flow .item .tel-Box dl dd::before {
        top: 15px;
    }

    .lectures-Style .flow .item .tel-Box dl dd a {
        font-size: 28px;
    }


    /*===== .flow =====*/

    .lectures-Style .faq .outer {
        padding: 80px 0;
    }

    .lectures-Style .faq .item + .item {
        margin-top: 50px;
    }

    .lectures-Style .faq .item dt {
        font-size: 20px
    }

    .lectures-Style .faq .item dt::after {
        font-size: 24px;
        top: 3px;
    }


    /*===== .course-Link =====*/

    .course-Link .ttl {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .course-Link dt {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .course-Link .image {
        padding-right: 40px;
    }

    .course-Link .page-Btn {
        width: 100%;
        margin-top: 30px;
    }


}

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

    .lectures-Style .column-Ttl {
        font-size: 28px;
        padding-left: 35px;
    }

    .lectures-Style .column-Ttl::before {
        top: 9px;
    }

    /*===== .intro =====*/

    .lectures-Style .intro .txt-Box dt {
        font-size: 20px;
    }

    
    /*===== .page-Menu =====*/

    .lectures-Style .page-Menu .list {
        padding: 0;
    }

    .lectures-Style .page-Menu .list li {
        width: 100%;
        border-left: 0;
        padding: 0 20px;
    }

    .lectures-Style .page-Menu .list li:nth-of-type(2), 
    .lectures-Style .page-Menu .list li:nth-of-type(3) {
        border-top: 1px solid #ffffff;
    }

    .lectures-Style .page-Menu .list li:nth-of-type(3n),
    .lectures-Style .page-Menu .list li:last-of-type {
        border-right: 0;
    }

    .lectures-Style .page-Menu .list li a {
        padding: 20px 0;
    }


    /*===== .features =====*/

    .lectures-Style .features .outer {
        padding: 80px 0;
    }

    .lectures-Style .features .column-Ttl {
        margin-bottom: 40px;
    }

    .lectures-Style .features .item + .item {
        margin-top: 60px;
    }

    .lectures-Style .features .item h3 {
        width: 100%;
        padding-left: 40px;
        margin-bottom: 20px;
        border-bottom: 0;
        box-sizing: border-box;
        position: relative;
    }

    .lectures-Style .features .item h3::before {
        display: block;
        color: #aecfff;
        font-size: 30px;
        line-height: 1;
        font-family: "Urbanist", sans-serif;
        position: absolute;
        top: 5px;
        left: 0;
        z-index: 1;
    }

    .lectures-Style .features .item:nth-child(1) h3::before {
        content: "01";
    }

    .lectures-Style .features .item:nth-child(2) h3::before {
        content: "02";
    }

    .lectures-Style .features .item:nth-child(3) h3::before {
        content: "03";
    }

    .lectures-Style .features .item .image {
        width: 100%;
        padding-right: 0;
    }

    .lectures-Style .features .item:nth-child(1) .image::before,
    .lectures-Style .features .item:nth-child(2) .image::before,
    .lectures-Style .features .item:nth-child(3) .image::before {
        content: none;
    }

    .lectures-Style .features .item.reverse .image {
        padding-left: 0;
    }

    .lectures-Style .features .item .txt-Box {
        width: 100%;
        margin-top: 20px;
    }


    /*===== .time-Table =====*/

    .lectures-Style .time-Table .txt-Box {
        margin-bottom: 40px;
    }

    .lectures-Style .time-Table table th {
        font-size: 16px;
    }

    .lectures-Style .time-Table table td {
        font-size: 16px;
    }

    .lectures-Style .time-Table .caps-List {
        padding: 40px 20px;
    }

    .lectures-Style .time-Table .caps-List li {
        font-size: 16px;
    }


    /*===== .note =====*/

    .lectures-Style .note .outer {
        padding: 70px 0;
    }

    .lectures-Style .note .list {
        padding: 30px 20px;
    }


    /*===== .flow =====*/

    .lectures-Style .flow .item {
        padding: 40px 20px;
    }

    .lectures-Style .flow .item + .item::before {
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
    }

    .lectures-Style .flow .item h3 {
        width: 100%;
        font-size: 22px;
    }

    .lectures-Style .flow .item .image {
        width: 100%;
        margin-top: 0;
        margin-left: 0;
        margin-bottom: 20px;
    }

    .lectures-Style .flow .item p {
        width: 100%;
    }

    .lectures-Style .flow .item .btn {
        width: 100%;
    }

    .lectures-Style .flow .item .tel-Box {
        width: 100%;
    }


    /*===== .faq =====*/

    .lectures-Style .faq .outer {
        padding: 70px 0;
    }

    .lectures-Style .faq .item + .item {
        margin-top: 40px;
    }

    .lectures-Style .faq .item dt {
        font-size: 18px;
        padding: 0 25px 10px;
    }

    .lectures-Style .faq .item dt::before {
        left: 0;
    }

    .lectures-Style .faq .item dt::after {
        font-size: 20px;
        top: 4px;
        right: 10px;
    }

    .lectures-Style .faq .item dd {
        padding: 30px 40px;
    }

    .lectures-Style .faq .item dd div::before {
        font-size: 20px;
        top: -4px;
        left: -25px;
    }


    /*===== .course-Link =====*/

    .course-Link .ttl {
        width: 100%;
        font-size: 30px;
    }

    .course-Link .image {
        width: 100%;
        padding-right: 0;
        margin-top: 0;
        margin-bottom: 20px;
    }

    .course-Link dl {
        width: 100%;
    }
    
    .course-Link .page-Btn a {
        width: 100%;
    }

}


/*==============================
 distance-learning
==============================*/

.distance-learning .page-Ttl {
    background-image: linear-gradient(90deg, #1bb53f 0%, #0f6222 100%);
    border-left: 15px solid #207526;
}

.distance-learning .column-Ttl::before {
    background-image: url(../images/common/c_label_icon.png);
}

.distance-learning .page-Menu {
    background-image: linear-gradient(90deg, #1bb53f 0%, #0f6222 100%);
}

.distance-learning .page-Menu .list li a:hover {
    background-color: #49e76f;
}

.distance-learning .features .outer {
    background-color: #ecfff0;
}

.distance-learning .features .item .image::before {
    color: #a9ffbd;
}

.distance-learning .time-Table table th {
    background-color: #d5ffd6;
}

.distance-learning .time-Table table td {
    background-color: #ebffe9;
}

.distance-learning .time-Table .caps-List {
    border: 2px solid #76d578;
}

.distance-learning .note .outer {
    background-color: #ecfff0;
}

.distance-learning .flow .item {
    border: 2px solid #76d578;
}

.distance-learning .flow .item h3 span {
    color: #358131;
}

.distance-learning .flow .item h3 span::before {
    background-color: #358131;
}

.distance-learning .flow .item + .item::before {
    border-top: 40px solid #358131;
}

.distance-learning .faq .outer {
    background-color: #ecfff0;
}

.distance-learning .faq .item dt::before {
    color: #358131;
}


/*==============================
 online-Learning
==============================*/

.online-Learning .page-Ttl {
    background-image: linear-gradient(90deg, #ff9000 0%, #ed9349 100%);
    border-left: 15px solid #ffc171;
}

.online-Learning .column-Ttl::before {
    background-image: url(../images/common/o_label_icon.png);
}

.online-Learning .page-Menu {
    background-image: linear-gradient(90deg, #ff9000 0%, #ed9349 100%);
}

.online-Learning .page-Menu .list li a:hover {
    background-color: #ffb557;
}

.online-Learning .features .outer {
    background-color: #ffead9;
}

.online-Learning .features .item .image::before {
    color: #ffd089;
}

.online-Learning .time-Table table th {
    background-color: #ffcaa0;
}

.online-Learning .time-Table table td {
    background-color: #ffead9;
}

.online-Learning .time-Table .caps-List {
    border: 2px solid #ffd28d;
}

.online-Learning .note .outer {
    background-color: #ffead9;
}

.online-Learning .flow .item {
    border: 2px solid #ffd28d;
}

.online-Learning .flow .item h3 span {
    color: #ed9349;
}

.online-Learning .flow .item h3 span::before {
    background-color: #ed9349;
}

.online-Learning .flow .item + .item::before {
    border-top: 40px solid #ed9349;
}

.online-Learning .faq .outer {
    background-color: #ffead9;
}

.online-Learning .faq .item dt::before {
    color: #ed9421;
}


/*==============================
 styles
==============================*/

/*===== .intro =====*/

.styles .intro .txt-Box {
    padding: 0 20px;
    margin-bottom: 80px;
}

.styles .intro .txt-Box dt {
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}

.styles .intro .txt-Box dd {
    font-size: 18px;
    line-height: 2;
}

.styles .intro .list {
    display: flex;
    flex-wrap: wrap;
}

.styles .intro .list .item {
    width: calc(100% / 3 - 20px);
    margin-right: 30px;
}

.styles .intro .list .item:nth-child(3n) {
    margin-right: 0;
}

.styles .intro .list .item a {
    display: block;
    border-bottom: 2px solid #315e81;
    padding-bottom: 30px;
    position: relative;
    transition: .6s all;
}

.styles .intro .list .d-Item a {
    border-bottom: 2px solid #1bb53f;
}

.styles .intro .list .o-Item a {
    border-bottom: 2px solid #ed9349;
}

.styles .intro .list .item a:hover {
    background-color: #dddddd;
}

.styles .intro .list .item a::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-right: 2px solid #315e81;
    border-bottom: 2px solid #315e81;
    transform: rotate(45deg);
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    margin: auto;
    z-index: 1;
    transition: .6s all;
}

.styles .intro .list .d-Item a::after {
    border-right: 2px solid #1bb53f;
    border-bottom: 2px solid #1bb53f;
}

.styles .intro .list .o-Item a::after {
    border-right: 2px solid #ed9349;
    border-bottom: 2px solid #ed9349;
}

.styles .intro .list .item .image {
    margin-bottom: 10px;
}

.styles .intro .list .item h2 {
    color: #315e81;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.styles .intro .list .d-Item h2 {
    color: #1bb53f;
}

.styles .intro .list .o-Item h2 {
    color: #ed9349;
}

/*===== .ly-Item =====*/

.styles .ly-Item {
    padding-top: 140px;
    margin-top: -140px;
}

.styles .ly-Item .outer {
    background-color: #e9f2ff;
    padding: 140px 0;
}

.styles .ly-Item h2 {
    color: #ffffff;
    font-size: 32px;
    font-weight: bold;
    background-color: #315e81;
    text-align: center;
    border-radius: 10px;
    padding: 10px 0 10px;
    margin-bottom: 40px;
    position: relative;
}

.styles .ly-Item .txt {
    font-size: 24px;
    font-weight: bold;
    padding: 0 20px;
    margin-bottom: 60px;
}

.styles .ly-Item .box {
    display: flex;
    background-color: #ffffff;
    flex-wrap: wrap;
    border: 2px solid #e3e3e3;
    border-radius: 10px;
    padding: 50px 30px;
    margin: 0 20px;
}

.styles .ly-Item .box .image {
    width: 50%;
    padding-right: 40px;
    box-sizing: border-box;
}

.styles .ly-Item .box .unit {
    width: 50%;
}

.styles .ly-Item .box .unit dl + dl {
    margin-top: 30px;
}

.styles .ly-Item .box .unit dt {
    color: #12568c;
    font-size: 20px;
    font-weight: bold;
    padding-left: 25px;
    margin-bottom: 10px;
    position: relative;
}

.styles .ly-Item .box .unit dt::before {
    content: "\2605";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.styles .ly-Item .box .unit .btn {
    margin-top: 30px;
}

.styles .ly-Item .box .unit .btn a {
    display: block;
    max-width: 320px;
    position: relative;
}

.styles .ly-Item .box .unit .btn a::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #aec3f1;
    border-radius: 10px;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 0;
    transition: .6s all;
}

.styles .ly-Item .box .unit .btn a:hover::after {
    background-color: #315e81;
}

.styles .ly-Item .box .unit .btn a span {
    display: block;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    background-color: #315e81;
    border: 1px solid #315e81;
    padding: 20px 0;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    transition: .6s all;
}

.styles .ly-Item .box .unit .btn a:hover span {
    color: #315e81;
    background-color: #ffffff;
}

.styles .ly-Item .box .unit .btn a span::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    margin: auto;
    z-index: 1;
    transition: .6s all;
}

.styles .ly-Item .box .unit .btn a:hover span::after {
    border-top: 2px solid #315e81;
    border-right: 2px solid #315e81;
}

/*===== .ly-Distance =====*/

.styles .ly-Distance .outer {
    background-color: #ecfff0;
}

.styles .ly-Distance h2 {
    background-color: #1bb53f;
}

.styles .ly-Distance .box .unit dt {
    color: #117f2b;
}

.styles .ly-Distance .box .unit .btn a::after {
    background-color: #8cfaa6;
}

.styles .ly-Distance .box .unit .btn a:hover::after {
    background-color: #1bb53f;
}

.styles .ly-Distance .box .unit .btn a span {
    background-color: #1bb53f;
    border: 1px solid #1bb53f;
}

.styles .ly-Distance .box .unit .btn a:hover span {
    color: #1bb53f;
}

.styles .ly-Distance .box .unit .btn a:hover span::after {
    border-top: 2px solid #1bb53f;
    border-right: 2px solid #1bb53f;
}

/*===== .ly-online =====*/

.styles .ly-online .outer {
    background-color: #fff5e6;
}

.styles .ly-online .box .unit dt {
    color: #e9791c;
}

.styles .ly-online .box .unit .btn a:hover::after {
    background-color: #ed9349;
}

.styles .ly-online h2 {
    background-color: #ed9349;
}

.styles .ly-online .box .unit .btn a::after {
    background-color: #ffc494;
}

.styles .ly-online .box .unit .btn a span {
    background-color: #ed9349;
    border: 1px solid #ed9349;
}

.styles .ly-online .box .unit .btn a:hover span {
    color: #ed9349;
}

.styles .ly-online .box .unit .btn a:hover span::after {
    border-top: 2px solid #ed9349;
    border-right: 2px solid #ed9349;
}

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

    /*===== .intro =====*/

    .styles .intro .txt-Box {
        margin-bottom: 60px;
    }

    .styles .intro .txt-Box dt {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .styles .intro .txt-Box dd {
        font-size: 16px;
    }

    .styles .intro .list .item a {
        padding-bottom: 30px;
    }

    /*===== .ly-Item =====*/

    .styles .ly-Item {
        padding-top: 60px;
        margin-top: -60px;
    }

    .styles .ly-Item .outer {
        padding: 100px 0;
    }

    .styles .ly-Item h2 {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .styles .ly-Item .txt {
        font-size: 22px;
        margin-bottom: 40px;
    }

    .styles .ly-Item .box .unit dt {
        font-size: 18px;
        padding-left: 23px;
    }


}


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

    /*===== .intro =====*/

    .styles .intro .txt-Box {
        margin-bottom: 40px;
    }

    .styles .intro .txt-Box dt {
        font-size: 20px;
    }

    .styles .intro .list .item {
        width: 100%;
        margin-right: 0;
    }

    .styles .intro .list .item + .item {
        margin-top: 40px;
    }

    .styles .intro .list .item .image {
        margin-bottom: 20px;
    }

    /*===== .ly-Item =====*/

    .styles .ly-Item .outer {
        padding: 80px 0;
    }

    .styles .ly-Item h2 {
        font-size: 26px;
    }

    .styles .ly-Item .txt {
        font-size: 20px;
        padding: 0;
        margin-bottom: 30px;
    }

    .styles .ly-Item .box {
        padding: 40px 20px;
        margin: 0;
    }

    .styles .ly-Item .box .image {
        width: 100%;
        padding-right: 0;
        margin-bottom: 30px;
    }

    .styles .ly-Item .box .unit {
        width: 100%;
    }

    .styles .ly-Item .box .unit .btn a span {
        font-size: 16px;
    }


}



/*==============================
 voice
==============================*/

.voice .item + .item {
    border-top: 2px dotted #034374;
    padding-top: 100px;
    margin-top: 100px;
}

.voice .profile-Col {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 60px;
}

.voice .profile-Col .image {
    width: 160px;
    margin-right: 30px;
}

.voice .profile-Col .image figcaption {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding-top: 5px;
}

.voice .profile-Col .box {
    width: calc(100% - 190px);
    background-color: #e9f2ff;
    border-radius: 10px;
    padding: 40px;
    box-sizing: border-box;
}

.voice .profile-Col h2 {
    color: #012352;
    font-size: 22px;
    font-weight: bold;
    border-bottom: 1px solid #012352;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.voice .profile-Col .list dl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.voice .profile-Col .list dl + dl {
    margin-top: 5px;
}

.voice .profile-Col .list dl dt {
    width: 110px;
    font-size: 18px;
    font-weight: bold;
    margin-right: 10px;
    position: relative;
}

.voice .profile-Col .list dl dt::after {
    content: "\FF1A";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.voice .profile-Col .list dl dd {
    width: calc(100% - 120px);
    font-size: 18px;
    font-weight: bold;
}

.voice .interview-Col {
    padding: 0 40px;
}

.voice .interview-Col dl + dl {
    margin-top: 40px;
}

.voice .interview-Col dl dt {
    color: #034374;
    font-size: 18px;
    font-weight: bold;
    padding-left: 60px;
    margin-bottom: 20px;
    position: relative;
}

.voice .interview-Col dl dt::before {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background-color: #034374;
    position: absolute;
    top: 14px;
    left: 0;
    z-index: 1;
}

.voice .interview-Col dl dd {
    font-size: 17px;
    padding-left: 60px;
}

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

    .voice .item + .item {
        padding-top: 80px;
        margin-top: 80px;
    }

    .voice .profile-Col {
        margin-bottom: 50px;
    }
    
    .voice .profile-Col .image {
        width: 150px;
    }

    .voice .profile-Col .image figcaption {
        font-size: 15px;
    }

    .voice .profile-Col .box {
        width: calc(100% - 180px);
        padding: 30px;
    }

    .voice .profile-Col h2 {
        font-size: 20px;
    }

    .voice .profile-Col .list dl dt {
        width: 105px;
        font-size: 17px;
    }

    .voice .profile-Col .list dl dd {
        width: calc(100% - 115px);
        font-size: 17px;
    }

    .voice .interview-Col dl dt {
        font-size: 17px;
        padding-left: 40px;
    }

    .voice .interview-Col dl dt::before {
        width: 30px;
        top: 13px;
    }

    .voice .interview-Col dl dd {
        font-size: 16px;
        padding-left: 40px;
    }
    

}

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

    .voice .item + .item {
        padding-top: 60px;
        margin-top: 60px;
    }

    .voice .profile-Col {
        display: block;
        margin-bottom: 40px;
    }

    .voice .profile-Col .box {
        width: 100%;
        padding: 30px 20px;
    }

    .voice .profile-Col .image {
        width: 140px;
        margin: 0 auto 20px;
    }

    .voice .profile-Col .image figcaption {
        font-size: 14px;
    }

    .voice .profile-Col h2 {
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    .voice .profile-Col .list dl {
        display: block;
    }

    .voice .profile-Col .list dl + dl {
        margin-top: 10px;
    }

    .voice .profile-Col .list dl dt {
        width: 100%;
        font-size: 17px;
        padding-left: 15px;
        margin-right: 0;
    }

    .voice .profile-Col .list dl dt::after {
        content: "\30FB";
        position: absolute;
        top: 0;
        right: auto;
        left: 0;
    }

    .voice .profile-Col .list dl dd {
        width: 100%;
        font-size: 17px;
        padding-left: 15px;
    }

    .voice .interview-Col {
        padding: 0;
    }

    .voice .interview-Col dl dt {
        padding-left: 30px;
    }

    .voice .interview-Col dl dt::before {
        width: 20px;
    }

    .voice .interview-Col dl dd {
        padding-left: 30px;
    }

}


/*==============================
 qa
==============================*/

.qa .column-Ttl {
    font-size: 32px;
    font-weight: bold;
    padding-left: 38px;
    margin-bottom: 60px;
    position: relative;
}

.qa .column-Ttl::before {
    content: "";
    width: 28px;
    height: 30px;
    background-image: url(../images/common/label_icon.png);
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 11px;
    left: 0;
    z-index: 1;
}

/*===== .intro =====*/

.qa .intro {
    margin-bottom: 140px;
}

.qa .intro .list {
    display: flex;
    flex-wrap: wrap;
}

.qa .intro .list li {
    width: calc(100% / 4 - 22.5px);
    margin-right: 30px;
}

.qa .intro .list li:nth-of-type(4n) {
    margin-right: 0;
}

.qa .intro .list li a {
    display: block;
    position: relative;
}

.qa .intro .list li a::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #6087bd;
    border-radius: 10px;
    position: absolute;
    top: 10px;
    right: -10px;
    z-index: 1;
    transition: .6s all;
}

.qa .intro .list li a:hover::before {
    background-color: #315e81;
}

.qa .intro .list li.schooling-Item a::before {
    background-color: #6087bd;
}

.qa .intro .list li.schooling-Item a:hover::before {
    background-color: #315e81;
}

.qa .intro .list li.distance-Item a::before {
    background-color: #6dc682;
}

.qa .intro .list li.distance-Item a:hover::before {
    background-color: #1bb53f;
}

.qa .intro .list li.online-Item a::before {
    background-color: #f0ad75;
}

.qa .intro .list li.online-Item a:hover::before {
    background-color: #ed9349;
}

.qa .intro .list li span {
    display: block;
    color: #315e81;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #315e81;
    border-radius: 10px;
    padding: 30px 0;
    position: relative;
    z-index: 2;
    transition: .6s all;
}

.qa .intro .list li a:hover span {
    color: #ffffff;
    background-color: #6087bd;
}

.qa .intro .list li.schooling-Item a:hover span {
    background-color: #6087bd;
}

.qa .intro .list li.distance-Item a:hover span {
    background-color: #6dc682;
}
.qa .intro .list li.online-Item a:hover span {
    background-color: #f0ad75;
}

.qa .intro .list li span::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-right: 2px solid #315e81;
    border-bottom: 2px solid #315e81;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    margin: auto;
    z-index: 2;
    transition: .6s all;
}

.qa .intro .list li a:hover span::after {
    border-bottom: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
}

.qa .intro .list li.schooling-Item span {
    color: #315e81;
    border: 1px solid #315e81;
}

.qa .intro .list li.schooling-Item span::after {
    border-bottom: 2px solid #315e81;
    border-right: 2px solid #315e81;
}

.qa .intro .list li.distance-Item span {
    color: #1bb53f;
    border: 1px solid #1bb53f;
}

.qa .intro .list li.distance-Item span::after {
    border-bottom: 2px solid #1bb53f;
    border-right: 2px solid #1bb53f;
}

.qa .intro .list li.online-Item span {
    color: #ed9349;
    border: 1px solid #ed9349;
}

.qa .intro .list li.online-Item span::after {
    border-bottom: 2px solid #ed9349;
    border-right: 2px solid #ed9349;
}

.qa .intro.out .list li span::after {
    border-top: 2px solid #315e81;
    border-right: 0;
    border-bottom: 0;
    border-left: 2px solid #315e81;
    top: 5px;
}

.qa .intro.out .list li a:hover span::after {
    border-top: 2px solid #ffffff;
    border-right: 0;
    border-bottom: 0;
    border-left: 2px solid #ffffff;
}

.qa .intro.out .list li.schooling-Item span::after {
    border-top: 2px solid #315e81;
    border-right: 0;
    border-bottom: 0;
    border-left: 2px solid #315e81;
}

.qa .intro.out .list li.distance-Item span::after {
    border-top: 2px solid #1bb53f;
    border-right: 0;
    border-bottom: 0;
    border-left: 2px solid #1bb53f;
}

.qa .intro.out .list li.online-Item span::after {
    border-top: 2px solid #ed9349;
    border-right: 0;
    border-bottom: 0;
    border-left: 2px solid #ed9349;
}


/*===== .qa-Column =====*/

.qa-Column {
    padding-top: 140px;
    margin-top: -140px;
}

.qa-Column .list .item + .item {
    margin-top: 60px;
}

.qa-Column .list .item dt {
    font-size: 22px;
    font-weight: bold;
    border-bottom: 1px solid #333333;
    padding: 0 50px 10px;
    cursor: pointer;
    position: relative;
}

.qa-Column .list .item dt::before {
    content: "Q.";
    color: #315e81;
    position: absolute;
    top: 0;
    left: 20px;
    z-index: 1;
}

.qa-Column .list .item dt::after {
    content: "+";
    font-size: 26px;
    line-height: 1;
    position: absolute;
    top: 5px;
    right: 20px;
    z-index: 1;
    transition: .6s all;
}

.qa-Column .list .item dt.active::after {
    transform: rotate(45deg);
}

.qa-Column .list .item dd {
    display: none;
    font-size: 16px;
    line-height: 1.8;
    background-color: #ffffff;
    padding: 30px 50px;
    position: relative;
}

.qa-Column .list .item div {
    position: relative;
}

.qa-Column .list .item div::before {
    content: "A.";
    color: #8e7225;
    font-size: 22px;
    font-weight: bold;
    position: absolute;
    top: -5px;
    left: -27px;
    z-index: 1;
}

/*===== .qa-General =====*/

.qa-General {
    padding-bottom: 140px;
}


/*===== .qa-Schooling =====*/

.qa-Schooling .outer {
    background-color: #e9f2ff;
    padding: 140px 0;
}

/*===== .qa-Distance =====*/

.qa-Distance .column-Ttl::before {
    background-image: url(../images/common/c_label_icon.png);
}

.qa-Distance .outer {
    background-color: #ecfff0;
    padding: 140px 0;
}

.qa-Distance .list .item dt::before {
    color: #358131;
}

/*===== .qa-Online =====*/

.qa-Online .column-Ttl::before {
    background-image: url(../images/common/o_label_icon.png);
}

.qa-Online .outer {
    background-color: #ffead9;
    padding: 140px 0;
}

.qa-Online .list .item dt::before {
    color: #ed9421;
}


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

    /*===== .intro =====*/

    .qa .intro {
        margin-bottom: 120px;
    }

    .qa .intro .list li {
        width: calc(100% / 2 - 20px);
        margin-top: 30px;
        margin-right: 40px;
    }

    .qa .intro .list li:nth-of-type(2n) {
        margin-right: 0;
    }

    .qa .intro .list li:nth-of-type(1),
    .qa .intro .list li:nth-of-type(2) {
        margin-top: 0;
    }

    .qa .intro .list li span {
        font-size: 18px;
        padding: 20px 0;
    }

    /*===== .qa-Column =====*/

    .qa-Column {
        padding-top: 60px;
        margin-top: -60px;
    }

    .qa .column-Ttl {
        font-size: 28px;
        padding-left: 32px;
        margin-bottom: 40px;
    }

    .qa .column-Ttl::before {
        width: 26px;
        height: 28px;
    }

    .qa-Column .list .item + .item {
        margin-top: 40px;
    }

    .qa-Column .list .item dt {
        font-size: 20px;
        font-weight: bold;
        border-bottom: 1px solid #333333;
        padding: 0 50px 10px;
        cursor: pointer;
        position: relative;
    }


    /*===== .qa-General =====*/

    .qa-General {
        padding-bottom: 120px;
    }

    /*===== .qa-Schooling =====*/

    .qa-Schooling .outer {
        padding: 120px 0;
    }

    /*===== .qa-Distance =====*/

    .qa-Distance .outer {
        padding: 120px 0;
    }

    /*===== .qa-Online =====*/

    .qa-Online .outer {
        padding: 120px 0;
    }

}

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

    /*===== .intro =====*/

    .qa .intro {
        margin-bottom: 80px;
    }

    .qa .intro .list li {
        width: 100%;
        margin-right: 0;
    }

    .qa .intro .list li:nth-of-type(2) {
        margin-top: 30px;
    }


    /*===== .qa-Column =====*/

    .qa .column-Ttl {
        font-size: 26px;
        margin-bottom: 30px;
    }

    .qa .column-Ttl::before {
        top: 9px;
    }

    .qa-Column .list .item dt {
        font-size: 18px;
        padding: 0 25px 10px;
    }

    .qa-Column .list .item dt::before {
        left: 0;
    }

    .qa-Column .list .item dt::after {
        font-size: 20px;
        top: 4px;
        right: 10px;
    }

    .qa-Column .list .item dd {
        padding: 30px 40px;
    }

    .qa-Column .list .item dd div::before {
        font-size: 20px;
        top: -4px;
        left: -25px;
    }
    
    /*===== .qa-General =====*/

    .qa-General {
        padding-bottom: 80px;
    }

    /*===== .qa-Schooling =====*/

    .qa-Schooling .outer {
        padding: 80px 0;
    }

    /*===== .qa-Distance =====*/

    .qa-Distance .outer {
        padding: 80px 0;
    }

    /*===== .qa-Online =====*/

    .qa-Online .outer {
        padding: 80px 0;
    }

}



/*==============================
 access
==============================*/

/*===== .overview =====*/

.access .overview .txt-Box {
    margin-bottom: 80px;
}

.access .overview .txt-Box h2 {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 1.4;
    margin-bottom: 40px;
}

.access .overview .txt-Box h2 span {
    display: block;
    color: #315b95;
    font-size: 46px;
    font-weight: normal;
}

.access .overview .txt-Box dt {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}

.access .overview .txt-Box dd {
    font-size: 17px;
    line-height: 2;
}

/*===== .map-Col =====*/

.access .map-Col .inner {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 80px;
}

.access .map-Col .map-Box {
    width: 50%;
    padding-right: 60px;
    box-sizing: border-box;
}

.access .map-Col .map-Box figure {
    width: 100%;
    height: 400px;
}

.access .map-Col .map-Box iframe {
    width: 100%;
    height: 100%;
}

.access .map-Col .map-Box .g-Btn {
    margin-top: 20px;
}

.access .map-Col .map-Box .g-Btn a {
    display: block;
    max-width: 320px;
    color: #034374;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border: 1px solid #034374;
    border-radius: 5px;
    padding: 10px 0;
    margin: 0 auto;
    transition: .6s all;
}

.access .map-Col .map-Box .g-Btn a:hover {
    color: #ffffff;
    background-color: #034374;
}

.access .map-Col .map-Box .g-Btn a span {
    padding: 0 20px;
    position: relative;
}

.access .map-Col .map-Box .g-Btn a span::before {
    content: "";
    display: block;
    width: 12px;
    height: 10px;
    background-image: url(../images/access/blank_icon_w.png);
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
    opacity: 0;
    transition: .6s all;
}

.access .map-Col .map-Box .g-Btn a:hover span::before {
    opacity: 1;
}

.access .map-Col .map-Box .g-Btn a span::after {
    content: "";
    display: block;
    width: 12px;
    height: 10px;
    background-image: url(../images/access/blank_icon.png);
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
    transition: .6s all;
}

.access .map-Col .map-Box .g-Btn a:hover span::after {
    opacity: 0;
}

.access .map-Col .txt-Box {
    width: 50%;
}

.access .map-Col .txt-Box dl + dl {
    margin-top: 30px;
}

.access .map-Col .txt-Box dl dt {
    color: #034374;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 15px;
}

.access .map-Col .txt-Box dl dd {
    font-size: 17px;
    letter-spacing: 1px;
}

.access .map-Col .btn-Box {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.access .map-Col .btn-Box div {
    width: calc(100% / 2 - 30px);
    margin-right: 60px;
}

.access .map-Col .btn-Box div:last-of-type {
    margin-right: 0;
}

.access .map-Col .btn-Box div a {
    text-align: center;
    position: relative;
    transition: .6s all;
}

.access .map-Col .btn-Box div a::before {
    content: "";
    display: block;
    width: calc(100% - 10px);
    height: 100%;
    border-radius: 20px;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: -1;
    transition: .6s all;
}

.access .map-Col .btn-Box .cv-Btn a::before {
    background-color: #dba6ff;
}

.access .map-Col .btn-Box .cv-Btn a:hover::before {
    background-color: #ab39fa;
}

.access .map-Col .btn-Box .tel-Btn a::before {
    background-color: #619fcf;
}

.access .map-Col .btn-Box .tel-Btn a:hover::before {
    background-color: #315e81;
}

.access .map-Col .btn-Box div a span {
    display: flex;
    height: 100%;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    line-height: 1.4;
    padding: 20px;
    margin-right: 10px;
    border-radius: 20px;
    box-sizing: border-box;
    position: relative;
    transition: .6s all;
}

.access .map-Col .btn-Box div a:hover span {
    background-color: #ffffff;
}

.access .map-Col .btn-Box .cv-Btn a span {
    background-color: #ab39fa;
    border: 1px solid #ab39fa;
}

.access .map-Col .btn-Box .cv-Btn a span::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    margin: auto;
    z-index: 1;
    transition: .6s all;
}

.access .map-Col .btn-Box .cv-Btn a:hover span::after {
    border-top: 3px solid #ab39fa;
    border-right: 3px solid #ab39fa;
}

.access .map-Col .btn-Box .cv-Btn a:hover span {
    color: #ab39fa;
}

.access .map-Col .btn-Box .tel-Btn a span {
    font-size: 18px;
    background-color: #315e81;
    border: 1px solid #315e81;
}

.access .map-Col .btn-Box .tel-Btn a:hover span {
    color: #315e81;
}

.access .map-Col .btn-Box .tel-Btn a span b {
    font-size: 32px;
    padding-left: 35px;
    position: relative;
}

.access .map-Col .btn-Box .tel-Btn a span b::before {
    content: "";
    display: block;
    width: 30px;
    height: 20px;
    background-image: url(../images/common/freedial_icon.png);
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 14px;
    left: 0;
    z-index: 1;
}

.access .map-Col .btn-Box .tel-Btn a span b::after {
    content: "";
    display: block;
    width: 30px;
    height: 20px;
    background-image: url(../images/access/freedial_icon_oc.png);
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 14px;
    left: 0;
    z-index: 1;
    transition: .6s all;
    opacity: 0;
}

.access .map-Col .btn-Box .tel-Btn a:hover span b::after {
    opacity: 1;
}

/*===== .course-Link =====*/

.access .course-Link {
    background-color: #e9f2ff;
    padding: 120px 0;
}

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

    /*===== .overview =====*/

    .access .overview .txt-Box {
        margin-bottom: 60px;
    }

    .access .overview .txt-Box h2 {
        margin-bottom: 30px;
    }

    .access .overview .txt-Box dt {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .access .overview .txt-Box dd {
        font-size: 16px;
    }

    /*===== .map-Col =====*/

    .access .map-Col .inner {
        margin-bottom: 60px;
    }

    .access .map-Col .map-Box {
        padding-right: 40px;
    }

    .access .map-Col .map-Box figure {
        height: 320px;
    }

    .access .map-Col .txt-Box dl + dl {
        margin-top: 20px;
    }

    .access .map-Col .txt-Box dl dt {
        margin-bottom: 5px;
    }

    .access .map-Col .txt-Box dl dd {
        letter-spacing: normal;
    }

    .access .map-Col .btn-Box div {
        width: calc(100% / 2 - 20px);
        margin-right: 40px;
    }

    .access .map-Col .btn-Box div a span {
        font-size: 18px;
    }

    .access .map-Col .btn-Box .tel-Btn a span b {
        font-size: 28px;
    }

    .access .map-Col .btn-Box .tel-Btn a span b::before,
    .access .map-Col .btn-Box .tel-Btn a span b::after {
        top: 11px;
    }

    /*===== .course-Link =====*/

    .access .course-Link {
        padding: 100px 0;
    }

}

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

    /*===== .overview =====*/

    .access .overview .txt-Box {
        margin-bottom: 40px;
    }

    .access .overview .txt-Box h2 {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .access .overview .txt-Box h2 span {
        font-size: 42px;
    }

    /*===== .map-Col =====*/

    .access .map-Col .inner {
        margin-bottom: 50px;
    }

    .access .map-Col .map-Box {
        width: 100%;
        padding-right: 0;
        margin-bottom: 30px;
    }

    .access .map-Col .map-Box figure {
        height: 280px;
    }

    .access .map-Col .map-Box .g-Btn a {
        max-width: 220px;
        padding: 5px 0;
    }

    .access .map-Col .txt-Box {
        width: 100%;
    }

    .access .map-Col .txt-Box dl + dl {
        margin-top: 25px;
    }

    .access .map-Col .txt-Box dl dt {
        margin-bottom: 10px;
    }

    .access .map-Col .btn-Box div {
        width: 100%;
        margin-right: 0;
    }

    .access .map-Col .btn-Box div a span {
        padding: 15px 0;
    }

    .access .map-Col .btn-Box .cv-Btn a span::after {
        width: 6px;
        height: 6px;
        border-top: 2px solid #ffffff;
        border-right: 2px solid #ffffff;
    }
    
    .access .map-Col .btn-Box .cv-Btn a:hover span::after {
        border-top: 2px solid #ab39fa;
        border-right: 2px solid #ab39fa;
    }    

    .access .map-Col .btn-Box .tel-Btn a span {
        font-size: 16px;
    }

    .access .map-Col .btn-Box .tel-Btn a span b {
        font-size: 26px;
    }

    .access .map-Col .btn-Box .tel-Btn a span b::before,
    .access .map-Col .btn-Box .tel-Btn a span b::after {
        width: 25px;
        height: 16px;
        top: 12px;
    }

    .access .map-Col .btn-Box .cv-Btn {
        margin-top: 30px;
    }

    .access .map-Col .btn-Box .cv-Btn a span {
        padding: 20px 0;
    }

    /*===== .course-Link =====*/

    .access .course-Link {
        padding: 80px 0;
    }

}


/*==============================
 alliance
==============================*/

/*===== .overview =====*/

.alliance .overview .txt-Box {
    padding: 0 20px;
    margin-bottom: 60px;
}

.alliance .overview .txt-Box p {
    font-size: 17px;
    line-height: 2;
}

.alliance .overview .txt-Box p + p {
    margin-top: 20px;
}

.alliance .overview .txt-Box ul {
    margin-top: 30px;
}

.alliance .overview .txt-Box ul li {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    position: relative;
}

.alliance .overview .txt-Box ul li::after {
    content: "/";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.alliance .overview .txt-Box ul li:first-of-type::after {
    content: none;
}

.alliance .overview .txt-Box ul li + li {
    padding-left: 10px;
}

.alliance .overview .partnership {
    max-width: 768px;
    background-color: #e9f2ff;
    padding: 40px;
    margin: 0 auto 60px;
}

.alliance .overview .partnership dt {
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #333333;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.alliance .overview .partnership dd {
    font-size: 16px;
    text-align: center;
}

.alliance .overview .partnership dd + dd {
    margin-top: 5px;
}

.alliance .overview .w-Box {
    display: flex;
    flex-wrap: wrap;
}

.alliance .overview .w-Box .chs {
    width: 50%;
}

.alliance .overview .w-Box .child-Unit {
    width: 50%;
    padding-left: 80px;
    box-sizing: border-box;
}

.alliance .overview .w-Box .child-Unit figure + figure {
    margin-top: 20px;
}

.alliance .overview .w-Box .child-Unit figure:last-of-type img {
    max-width: 200px;
}

.alliance .overview .w-Box .child-Unit figcaption {
    font-size: 17px;
    margin-bottom: 5px;
}

/*===== .c-Col =====*/

.alliance .c-Col {
    background-color: #ebebeb;
    padding: 60px 0;
}

.alliance .c-Col h3 {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}

.alliance .c-Col .btn-Box {
    display: flex;
    flex-wrap: wrap;
}

.alliance .c-Col .btn-Box div {
    width: 50%;
    box-sizing: border-box;
}

.alliance .c-Col .btn-Box .tel-Btn {
    border-right: 1px solid #333333;
}

.alliance .c-Col .btn-Box .tel-Btn {
    text-align: center;
}

.alliance .c-Col .btn-Box .tel-Btn span {
    display: block;
    color: #234798;
    font-size: 20px;
    font-weight: bold;
}

.alliance .c-Col .btn-Box .tel-Btn a {
    color: #234798;
    font-size: 34px;
}

.alliance .c-Col .btn-Box .tel-Btn small {
    display: block;
    font-size: 18px;
    font-weight: bold;
}

.alliance .c-Col .form-Btn a {
    display: block;
    max-width: 320px;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    background-color: #3193c3;
    border: 1px solid #3193c3;
    border-radius: 10px;
    padding: 15px 0;
    margin: 0 auto;
    position: relative;
    transition: .6s all;
}

.alliance .c-Col .form-Btn a:hover {
    color: #3193c3;
    background-color: #ffffff;
}

.alliance .c-Col .form-Btn a::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    margin: auto;
    transform: rotate(45deg);
    z-index: 1;
    transition: .6s all;
}

.alliance .c-Col .form-Btn a:hover::after {
    border-top: 3px solid #3193c3;
    border-right: 3px solid #3193c3;
}

/*===== .other-Company =====*/

.alliance .other-Company dl {
    padding: 0 20px;
    margin-bottom: 30px;
}

.alliance .other-Company dl dt {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}

.alliance .other-Company dl dd {
    font-size: 17px;
    line-height: 2;
}

.alliance .other-Company .link-Box {
    padding-left: 40px;
    position: relative;
}

.alliance .other-Company .link-Box::before {
    content: "\21D2";
    position: absolute;
    top: 0;
    left: 20px;
    z-index: 1;
}

.alliance .other-Company .link-Box a {
    font-size: 17px;
    font-weight: bold;
    text-decoration: underline;
}

.alliance .other-Company .link-Box a:hover {
    color: #959595;
}

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

    /*===== .overview =====*/

    .alliance .overview .txt-Box {
        margin-bottom: 50px;
    }

    .alliance .overview .txt-Box p {
        font-size: 16px;
    }

    .alliance .overview .txt-Box ul li {
        font-size: 16px;
    }

    .alliance .overview .partnership dt {
        font-size: 16px;
    }

    .alliance .overview .partnership dd {
        font-size: 15px;
        text-align: center;
    }

    .alliance .overview .partnership {
        max-width: 500px;
        padding: 30px;
        margin: 0 auto 50px;
    }

    .alliance .overview .w-Box {
        max-width: 560px;
        margin: 0 auto;
    }

    .alliance .overview .w-Box .child-Unit {
        padding-left: 20px;
    }

    .alliance .overview .w-Box .child-Unit figure:last-of-type img {
        max-width: 125px;
    }

    /*===== .c-Col =====*/

    .alliance .c-Col {
        padding: 50px 0;
    }

    .alliance .c-Col h3 {
        font-size: 22px;
    }

    .alliance .c-Col .btn-Box .tel-Btn span {
        font-size: 18px;
    }

    .alliance .c-Col .btn-Box .tel-Btn a {
        font-size: 30px;
    }

    .alliance .c-Col .btn-Box .tel-Btn small {
        font-size: 16px;
    }

    .alliance .c-Col .form-Btn a {
        max-width: 320px;
    }

    /*===== .other-Company =====*/

    .alliance .other-Company dl dt {
        font-size: 22px;
    }

    .alliance .other-Company dl dd {
        font-size: 16px;
    }

    .alliance .other-Company .link-Box a {
        font-size: 16px;
    }

}

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

    /*===== .overview =====*/

    .alliance .overview .txt-Box {
        padding: 0;
        margin-bottom: 40px;
    }

    .alliance .overview .partnership {
        padding: 30px 20px;
        margin: 0 auto 40px;
    }

    .alliance .overview .partnership dt {
        font-size: 16px;
        margin-bottom: 15px;
    }

    .alliance .overview .partnership dd {
        font-size: 14px;
        text-align: center;
    }

    .alliance .overview .w-Box .chs {
        width: 100%;
        margin-bottom: 20px;
    }

    .alliance .overview .w-Box .child-Unit {
        width: 100%;
        padding-left: 0;
    }

    .alliance .overview .w-Box .child-Unit figure:last-of-type img {
        max-width: 160px;
    }

    /*===== .c-Col =====*/

    .alliance .c-Col h3 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .alliance .c-Col .btn-Box div {
        width: 100%;
    }

    .alliance .c-Col .btn-Box .tel-Btn {
        border-right: 0;
        border-bottom: 1px solid #333333;
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

    /*===== .other-Company =====*/

    .alliance .other-Company dl {
        padding: 0;
        margin-bottom: 20px;
    }

    .alliance .other-Company dl dt {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .alliance .other-Company .link-Box {
        padding-left: 20px;
    }

    .alliance .other-Company .link-Box::before {
        left: 0;
    }


}


/*==============================
 franchise
==============================*/

.franchise .psub-Ttl {
    color: #205075;
    font-size: 28px;
    font-weight: bold;
    border-bottom: 1px solid #333333;
    padding-bottom: 10px;
    padding-left: 20px;
    margin-bottom: 40px;
    position: relative;
}

.franchise .psub-Ttl::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 8px solid #205075;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    position: absolute;
    top: 15px;
    left: 0;
    z-index: 1;
}

.franchise .txt-Box {
    padding: 0 20px;
    margin-bottom: 60px;
}

.franchise .txt-Box p {
    font-size: 17px;
    line-height: 2;
}

.franchise .txt-Box p + p {
    margin-top: 20px;
}

.franchise .txt-Box dl {
    background-color: #e7e7e7;
    padding: 30px;
    margin: 30px 0;
}

.franchise .txt-Box dl dt {
    font-size: 17px;
    margin-bottom: 20px;
}

.franchise .txt-Box dl dd {
    font-size: 17px;
    padding-left: 20px;
    position: relative;
}

.franchise .txt-Box dl dd::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.franchise .txt-Box dl dd:nth-of-type(1)::before {
    content: "\2460";
}

.franchise .txt-Box dl dd:nth-of-type(2)::before {
    content: "\2461";
}

.franchise .txt-Box dl dd + dd {
    margin-top: 10px;
}

.franchise .img-Box {
    display: flex;
    max-width: 768px;
    flex-wrap: wrap;
    padding: 0 20px;
    margin: 0 auto;
}

.franchise .img-Box figure {
    width: 50%;
    box-sizing: border-box;
}

.franchise .img-Box figure:first-of-type {
    padding-right: 20px;
}

.franchise .img-Box figure:last-of-type {
    padding-left: 20px;
}

/*===== .know-How =====*/

.franchise .know-How .btn {
    margin-top: 60px;
}

.franchise .know-How .btn a {
    display: block;
    max-width: 320px;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    background-color: #3193c3;
    border: 1px solid #3193c3;
    border-radius: 10px;
    padding: 15px 0;
    margin: 0 auto;
    position: relative;
    transition: .6s all;
}

.franchise .know-How .btn a:hover {
    color: #3193c3;
    background-color: #ffffff;
}

.franchise .know-How .btn a::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    margin: auto;
    transform: rotate(45deg);
    z-index: 1;
    transition: .6s all;
}

.franchise .know-How .btn a:hover::after {
    border-top: 3px solid #3193c3;
    border-right: 3px solid #3193c3;
}

/*===== .text-Col =====*/

.franchise .text-Col .box {
    padding: 0 20px;
}

.franchise .text-Col .box figure {
    max-width: 680px;
    margin: 0 auto;
}

/*===== .certification =====*/

.franchise .certification .box {
    padding: 0 20px;
}

.franchise .certification .box figure {
    max-width: 680px;
    margin: 0 auto;
}

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

    .franchise .psub-Ttl {
        font-size: 26px;
        margin-bottom: 30px;
    }

    .franchise .psub-Ttl::before {
        top: 13px;
    }

    .franchise .txt-Box {
        margin-bottom: 50px;
    }

    .franchise .txt-Box p {
        font-size: 16px;
    }

    .franchise .txt-Box dl dt {
        font-size: 16px;
    }

    .franchise .txt-Box dl dd {
        font-size: 16px;
    }

    .franchise .img-Box {
        max-width: 520px;
    }

    .franchise .img-Box figure:first-of-type {
        padding-right: 10px;
    }

    .franchise .img-Box figure:last-of-type {
        padding-left: 10px;
    }

    /*===== .know-How =====*/

    .franchise .know-How .btn {
        margin-top: 50px;
    }

    /*===== .text-Col =====*/

    .franchise .text-Col .box figure {
        max-width: 480px;
    }

    /*===== .certification =====*/

    .franchise .certification .box figure {
        max-width: 480px;
    }

}

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

    .franchise .txt-Box {
        padding: 0;
        margin-bottom: 40px;
    }

    .franchise .txt-Box dl {
        margin: 20px 0;
    }

    .franchise .txt-Box dl dt {
        margin-bottom: 10px;
    }
    
    .franchise .txt-Box dl dd + dd {
        margin-top: 5px;
    }

    .franchise .img-Box {
        padding: 0;
    }

    /*===== .text-Col =====*/

    .franchise .text-Col .box {
        padding: 0;
    }

    /*===== .text-Col =====*/

    .franchise .certification .box {
        padding: 0;
    }

}



/*==============================
 contact
==============================*/

/*===== .intro =====*/

.contact .intro dl {
    border: 1px solid #cecece;
    padding: 40px 60px;
}

.contact .intro dl dt {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}

.contact .intro dl dd {
    font-size: 16px;
    line-height: 1.8;
}

.contact .intro dl dd a {
    font-weight: bold;
    text-decoration: underline;
}

/*===== .form-Col =====*/

.contact .form-Col form {
    padding-top: 140px;
    margin-top: -140px;
}

.contact .form-Col .item {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid #cccccc;
}

.contact .form-Col .item dt {
    width: 250px;
    font-size: 17px;
    font-weight: bold;
    position: relative;
}

.contact .form-Col .item.required dt::after {
    content: "\5FC5\9808";
    display: block;
    color: #ffffff;
    font-size: 15px;
    background-color: #d9534f;
    padding: 5px 10px;
    border-radius: 5px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.contact .form-Col .item dd {
    width: calc(100% - 290px);
    margin-left: 40px;
}

.contact .form-Col input,
.contact .form-Col textarea {
    font-size: 16px;
    padding: 5px;
    box-sizing: border-box;
}

.contact .form-Col .txt-Type input,
.contact .form-Col textarea {
    width: 100%;
}

.contact .form-Col .type-Box .mwform-radio-field {
    display: block;
    font-size: 17px;
}

.contact .form-Col .type-Box .mwform-radio-field + .mwform-radio-field {
    margin-top: 5px;
}

.contact .form-Col .name-Box input,
.contact .form-Col .furigana-Box input {
    max-width: 400px;
}

.contact .form-Col .seibetu-Box .mwform-radio-field + .mwform-radio-field {
    margin-left: 10px;
}

.contact .form-Col .postcode-Box span input:first-of-type {
    max-width: 65px;
}

.contact .form-Col .postcode-Box span input:last-of-type {
    max-width: 75px;
}

.contact .form-Col .phone-Box input {
    max-width: 65px;
}

.contact .form-Col .counselingday-Box input {
    max-width: 180px;
}

.contact .form-Col .counselingday-Box select,
.contact .form-Col .course-Box select {
    font-size: 16px;
    padding: 8px 5px;
    box-sizing: border-box;
}

.contact .form-Col .item small {
    display: block;
    color: #454444;
    font-size: 16px;
    margin-top: 10px;
}

.contact .form-Col .item dd small.cap {
    padding-left: 20px;
    box-sizing: border-box;
    position: relative;
}

.contact .form-Col .item dd small.cap::before {
    content: "\203B";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.contact .form-Col textarea {
    height: 360px;
}

.contact .form-Col .btn input {
    display: block;
    max-width: 280px;
    width: 100%;
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    background-color: #234798;
    border: 1px solid #234798;
    padding: 15px 0;
    margin: 0 auto;
    transition: .6s all;
}

.contact .form-Col .btn input:hover {
    color: #234798;
    background-color: #ffffff;
}

.contact .form-Col .mw_wp_form .horizontal-item + .horizontal-item {
    margin-left: 0;
}

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

    .contact .form-Col form {
        padding-top: 60px;
        margin-top: -60px;
    }

}

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

    .contact .wrapper {
        padding: 0 40px;
    }

    .contact .form-Col .item dt {
        width: 220px;
        font-size: 16px;
    }

    .contact .form-Col .item.required dt::after {
        font-size: 14px;
        padding: 5px 7px;
    }

    .contact .form-Col .item dd {
        width: calc(100% - 250px);
        margin-left: 30px;
    }

}

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

    .contact .wrapper {
        padding: 0 20px;
    }

    .contact .intro dl {
        padding: 30px 20px;
        margin-bottom: 20px;
    }

    .contact .form-Col .item {
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

    .contact .form-Col .item dt {
        width: 100%;
        margin-bottom: 20px;
    }

    .contact .form-Col .item.required dt::after {
        display: inline-block;
        margin-left: 15px;
        position: static;
    }

    .contact .form-Col .counselingday-Box.required dt::after {
        display: block;
        margin-left: 0;
        position: absolute;
        right: auto;
        left: 180px;
    }

    .contact .form-Col .item dd {
        width: 100%;
        margin-left: 0;
    }

    .contact .form-Col .item dd small {
        font-size: 14px;
    }

    .contact .form-Col .item dd small.cap {
        padding-left: 18px;
    }

    .contact .form-Col .course-Box select {
        width: 100%;
    }

    .contact .form-Col textarea {
        height: 260px;
    }

}


/*==============================
 thanks
==============================*/

.thanks h1 {
    font-size: 38px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 60px;
}

.thanks .txt-Box {
    margin-bottom: 80px;
}

.thanks .txt-Box p {
    font-size: 17px;
    text-align: center;
    line-height: 2;
}

.thanks .note-Box {
    margin-bottom: 80px;
}

.thanks .note-Box dt {
    font-size: 24px;
    font-weight: bold;
    background-color: #e9f2ff;
    border-left: 10px solid #234798;
    padding: 15px 20px;
    margin-bottom: 40px;
}

.thanks .note-Box dd {
    font-size: 17px;
    line-height: 2;
}

.thanks .btn a {
    display: block;
    max-width: 320px;
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    background-color: #593ddd;
    border: 1px solid #593ddd;
    border-radius: 10px;
    padding: 20px 0;
    margin: 0 auto;
    transition: .6s all;
}

.thanks .btn a:hover {
    color: #593ddd;
    background-color: #ffffff;
}

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

    .thanks h1 {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .thanks .txt-Box {
        margin-bottom: 60px;
    }

    .thanks .txt-Box p {
        font-size: 16px;
    }

    .thanks .note-Box {
        padding: 0 20px;
        margin-bottom: 60px;
    }

    .thanks .note-Box dt {
        font-size: 22px;
        margin-bottom: 30px;
    }

    .thanks .note-Box dd {
        font-size: 16px;
    }

}

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

    .thanks h1 {
        font-size: 24px;
        margin-bottom: 30px;
        letter-spacing: -0.8px;
    }

    .thanks .txt-Box {
        margin-bottom: 50px;
    }

    .thanks .txt-Box p {
        font-size: 16px;
        text-align: left;
    }

    .thanks .note-Box {
        padding: 0;
        margin-bottom: 40px;
    }

    .thanks .note-Box dt {
        font-size: 20px;
    }

}


/*==============================
 company
==============================*/

.company .table-Col .box {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.company .table-Col .box dl {
    display: flex;
    flex-wrap: wrap;
}

.company .table-Col .box dt {
    width: 180px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background-color: #d5e7ff;
    border: 1px solid #ffffff;
    padding: 20px 30px;
    box-sizing: border-box;
}

.company .table-Col .box dd {
    width: calc(100% - 180px);
    font-size: 16px;
    background-color: #e9f2ff;
    border: 1px solid #ffffff;
    padding: 20px 30px;
    box-sizing: border-box;
}

.company .table-Col .box dd a {
    color: #00345c;
    text-decoration: underline;
}

.company .table-Col .box dd a:hover {
    color: #9e9e9e;
}

.company .table-Col .box dd small {
    font-size: 16px;
    padding-right: 10px;
}

.company .table-Col .box dd span {
    display: block;
    padding-left: 20px;
    position: relative;
}

.company .table-Col .box dd span::before {
    content: "\30FB";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.company .table-Col .box dd span + span {
    margin-top: 10px;
}

.company .course-Link {
    background-color: #e9f2ff;
    padding: 120px 0;
}

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

    .company .course-Link {
        padding: 100px 0;
    }

}

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

    .company .table-Col .box dl + dl {
        margin-top: 20px;
    }

    .company .table-Col .box dt {
        width: 100%;
        padding: 20px;
    }

    .company .table-Col .box dd {
        width: 100%;
        padding: 30px 20px;
    }

    .company .table-Col .box dd small {
        display: block;
        padding-right: 0;
    }

    .company .course-Link {
        padding: 80px 0;
    }

}


/*==============================
 greet
==============================*/

.greet .ly-Scroll {
    padding-top: 140px;
    margin-top: -140px;
}

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

    .greet .ly-Scroll {
        padding-top: 80px;
        margin-top: -80px;
    }

}


/*===== .p-Navi =====*/

.greet .p-Navi {
    margin-bottom: 80px;
}

.greet .p-Navi ul {
    display: flex;
    justify-content: center;
}

.greet .p-Navi ul li {
    border-left: 1px solid #205075;
    padding: 5px 20px;
}

.greet .p-Navi ul li:last-of-type {
    border-right: 1px solid #205075;
}

.greet .p-Navi ul li a {
    color: #205075;
    font-weight: bold;
}

.greet .p-Navi ul li a:hover {
    color: #9e9e9e;
    text-decoration: underline;
}

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

    .greet .p-Navi {
        margin-bottom: 60px;
    }

    .greet .p-Navi ul {
        display: block;
    }

    .greet .p-Navi ul li {
        border-left: 0;
        padding: 0;
    }

    .greet .p-Navi ul li + li {
        margin-top: 20px;
    }

    .greet .p-Navi ul li:last-of-type {
        border-right: 0;
    }

    .greet .p-Navi ul li a {
        display: block;
        text-align: center;
        border: 1px solid #205075;
        padding: 20px;
        position: relative;
    }
    
    .greet .p-Navi ul li a::before {
        content: "";
        display: block;
        width: 6px;
        height: 6px;
        border-right: 2px solid #234798;
        border-bottom: 2px solid #234798;
        position: absolute;
        top: 0;
        right: 20px;
        bottom: 0;
        margin: auto;
        transform: rotate(45deg);
        z-index: 2;
    }

}


/*===== .philosophy =====*/

.greet .philosophy .txt-Box {
    padding: 0 20px;
    margin-bottom: 60px;
}

.greet .philosophy .txt-Box p {
    font-size: 16px;
    line-height: 2;
}

.greet .philosophy .txt-Box p + p {
    margin-top: 20px;
}

.greet .philosophy .txt-Box small {
    display: block;
    font-size: 16px;
    text-align: right;
    margin-top: 40px;
}

.greet .philosophy .image {
    max-width: 768px;
    margin: 0 auto;
}

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

    .greet .philosophy .txt-Box {
        margin-bottom: 50px;
    }

    .greet .philosophy .image {
        max-width: 560px;
    }

}

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

    .greet .philosophy .txt-Box {
        padding: 0;
    }

}


/*===== .actworld-About =====*/

.greet .actworld-About .txt-Box {
    padding: 0 20px;
}

.greet .actworld-About .txt-Box + .txt-Box {
    margin-top: 80px;
}

.greet .actworld-About .txt-Box h2 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 30px;
}

.greet .actworld-About .txt-Box p {
    font-size: 16px;
    line-height: 2;
}

.greet .actworld-About .txt-Box p + p {
    margin-top: 20px;
}

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

    .greet .actworld-About .txt-Box + .txt-Box {
        margin-top: 60px;
    }

}

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

    .greet .actworld-About .txt-Box {
        padding: 0;
    }

}


/*===== .actworld-Concept =====*/

.greet .actworld-Concept .cols {
    padding: 0 20px;
}

.greet .actworld-Concept .cols h2 {
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
}

.greet .actworld-Concept .box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row-reverse;
}

.greet .actworld-Concept .box.ly-Reserve {
    flex-direction: row;
}

.greet .actworld-Concept .box + .box {
    margin-top: 80px;
}

.greet .actworld-Concept .box .image {
    width: 210px;
    margin-right: 40px;
}

.greet .actworld-Concept .box.ly-Reserve .image {
    width: 300px;
    margin-right: 0;
    margin-left: 40px;
}

.greet .actworld-Concept .box .txt {
    width: calc(100% - 250px);
}

.greet .actworld-Concept .box.ly-Reserve .txt {
    width: calc(100% - 340px);
}

.greet .actworld-Concept .box .txt p {
    font-size: 16px;
    line-height: 2;
}

.greet .actworld-Concept .box .txt p + p {
    margin-top: 20px;
}

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

    .greet .actworld-Concept .box + .box {
        margin-top: 60px;
    }

}

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

    .greet .actworld-Concept .cols {
        padding: 0;
    }

    .greet .actworld-Concept .cols h2 {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .greet .actworld-Concept .box .txt {
        width: 100%;
    }

    .greet .actworld-Concept .box.ly-Reserve .txt {
        width: 100%;
    }

    .greet .actworld-Concept .box .image,
    .greet .actworld-Concept .box.ly-Reserve .image {
        margin-top: 30px;
        margin-right: auto;
        margin-left: auto;
    }

}


/*===== .actworld-Txt =====*/

.greet .actworld-Txt .txt-Box {
    padding: 0 20px;
    margin-bottom: 60px;
}

.greet .actworld-Txt .txt-Box p {
    font-size: 16px;
    line-height: 2;
}

.greet .actworld-Txt .txt-Box p + p {
    margin-top: 20px;
}

.greet .actworld-Txt .image {
    max-width: 768px;
    margin: 0 auto;
}

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

    .greet .actworld-Txt .txt-Box {
        margin-bottom: 50px;
    }

    .greet .actworld-Txt .image {
        max-width: 560px;
    }

}

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

    .greet .actworld-Txt .txt-Box {
        padding: 0;
        margin-bottom: 40px;
    }

}


/*===== .qualification =====*/

.greet .qualification .txt-Box {
    padding: 0 20px;
}

.greet .qualification .txt-Box p {
    font-size: 16px;
    line-height: 2;
}

.greet .qualification .txt-Box p + p {
    margin-top: 20px;
}

.greet .qualification .txt-Box .btn {
    max-width: 768px;
    background-color: #f1f1f1;
    padding: 40px;
    margin: 40px auto 0;
}

.greet .qualification .txt-Box .btn dt {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.greet .qualification .txt-Box .btn dd a {
    display: block;
    max-width: 500px;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    background-color: #2f5aaa;
    border: 1px solid #2f5aaa;
    border-radius: 10px;
    padding: 20px 0;
    margin: 0 auto;
    transition: .6s all;
}

.greet .qualification .txt-Box .btn dd a:hover {
    color: #2f5aaa;
    background-color: transparent;
}

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

    .greet .qualification .txt-Box .btn {
        max-width: 560px;
        padding: 40px 30px;
        margin: 30px auto 0;
    }

    .greet .qualification .txt-Box .btn dd a {
        max-width: 460px;
        font-size: 16px;
    }

}

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

    .greet .qualification .txt-Box {
        padding: 0;
    }

    .greet .qualification .txt-Box .btn {
        padding: 40px 20px;
    }
    
    .greet .qualification .txt-Box .btn dt .br1023 {
        display: none;
    }

    .greet .qualification .txt-Box .btn dd a {
        font-size: 15px;
    }

}


/*===== .course-Link =====*/

.greet .course-Link {
    background-color: #e9f2ff;
    padding: 120px 0;
}

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

    .greet .course-Link {
        padding: 100px 0;
    }

}

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

    .greet .course-Link {
        padding: 80px 0;
    }

}


/*==============================
 works
==============================*/

/*===== .overview =====*/

.works .overview .list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px;
}

.works .overview .list .item {
    display: flex;
    width: calc(100% / 2 - 25px);
    align-items: center;
    flex-wrap: wrap;
    margin-top: 100px;
    margin-right: 50px;
}

.works .overview .list .item:nth-child(1),
.works .overview .list .item:nth-child(2) {
    margin-top: 0;
}

.works .overview .list .item:nth-child(2n) {
    margin-right: 0;
}

.works .overview .list .item figure {
    width: 180px;
}

.works .overview .list .item figcaption {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.works .overview .list .item figcaption span {
    display: block;
    font-size: 14px;
}

.works .overview .list .item .box {
    width: calc(100% - 200px);
    background-color: #e9f2ff;
    padding: 20px;
    margin-left: 20px;
    border-radius: 10px;
    box-sizing: border-box;
}

.works .overview .list .item dl + dl {
    margin-top: 10px;
}

.works .overview .list .item dl dt {
    color: #234798;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 2px;
}

.works .overview .list .item dl dd {
    font-size: 17px;
    padding-left: 8px;
}

/*===== .course-Link =====*/

.works .course-Link {
    background-color: #e9f2ff;
    padding: 120px 0;
}

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

    /*===== .overview =====*/

    .works .overview .list .item {
        flex-direction: column;
        margin-top: 60px;
    }

    .works .overview .list .item .box {
        width: 100%;
        margin-top: 20px;
        margin-left: 0;
    }

    .works .overview .list .item figure {
        width: auto;
        text-align: center;
    }

    .works .overview .list .item figure img {
        width: auto;
        height: 150px;
    }

    .works .overview .list .item dl dt {
        font-size: 16px;
    }

    .works .overview .list .item dl dd {
        font-size: 16px;
    }

    /*===== .course-Link =====*/

    .works .course-Link {
        padding: 100px 0;
    }

}

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

    .works .overview .list .item {
        width: 100%;
        margin-top: 40px;
        margin-right: 0;
    }

    .works .overview .list .item:nth-child(2) {
        margin-top: 40px;
    }

    /*===== .course-Link =====*/

    .works .course-Link {
        padding: 80px 0;
    }

}


/*==============================
 training-Works
==============================*/

/*===== .intro =====*/

.training-Works .intro {
    margin-bottom: 100px;
}

.training-Works .intro .txt-Box p {
    font-size: 17px;
    line-height: 2;
}

.training-Works .intro .txt-Box p + p {
    margin-top: 20px;
}

/*===== .technical-Col =====*/

.training-Works .training-Col h2 {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #333333;
    padding-bottom: 10px;
    margin-bottom: 60px;
}

.training-Works .training-Col .item {
    padding: 0 20px;
}

.training-Works .training-Col .item + .item {
    margin-top: 80px;
}

.training-Works .training-Col h3 {
    font-size: 30px;
    font-weight: bold;
    padding-left: 35px;
    margin-bottom: 30px;
    position: relative;
}

.training-Works .training-Col h3::before {
    content: "";
    width: 28px;
    height: 30px;
    background-image: url(../images/common/label_icon.png);
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 12px;
    left: 0;
    z-index: 1;
}

.training-Works .training-Col .txt-Box {
    margin-bottom: 30px;
}

.training-Works .training-Col .txt-Box p {
    font-size: 17px;
    line-height: 2;
    padding: 0 20px;
}

.training-Works .training-Col .txt-Box p + p {
    margin-top: 20px;
}

.training-Works .training-Col .list {
    background-color: #f2f2f2;
    border-radius: 10px;
    padding: 30px;
    margin: 0 20px;
}

.training-Works .training-Col .list h4 {
    font-size: 18px;
    font-weight: bold;
}

.training-Works .training-Col .list ul li {
    display: inline-block;
    font-size: 17px;
    padding-left: 20px;
    margin-top: 20px;
    margin-right: 20px;
    position: relative;
}

.training-Works .training-Col .list ul li::before {
    content: "\30FB";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/*===== .sub-Corporate =====*/

.training-Works .sub-Corporate {
    background-color: #e9f2ff;
    padding: 120px 0;
}

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

    /*===== .intro =====*/

    .training-Works .intro {
        margin-bottom: 70px;
    }

    .training-Works .intro .txt-Box p {
        font-size: 16px;
    }

    /*===== .training-Col =====*/

    .training-Works .training-Col h2 {
        font-size: 28px;
        margin-bottom: 50px;
    }

    .training-Works .training-Col .item + .item {
        margin-top: 70px;
    }

    .training-Works .training-Col h3 {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .training-Works .training-Col h3 span {
        display: block;
        font-size: 26px;
    }

    .training-Works .training-Col h3::before {
        top: 9px;
    }

    .training-Works .training-Col .txt-Box p {
        font-size: 16px;
    }

    .training-Works .training-Col .list ul li {
        font-size: 16px;
        margin-top: 15px;
    }

    /*===== .sub-Corporate =====*/

    .training-Works .sub-Corporate {
        padding: 100px 0;
    }

}

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

    /*===== .intro =====*/

    .training-Works .intro {
        margin-bottom: 60px;
    }

    /*===== .training-Col =====*/

    .training-Works .training-Col h2 {
        font-size: 26px;
        margin-bottom: 40px;
    }

    .training-Works .training-Col .item {
        padding: 0;
    }

    .training-Works .training-Col .item + .item {
        margin-top: 60px;
    }

    .training-Works .training-Col h3 {
        font-size: 26px;
    }

    .training-Works .training-Col h3 span {
        font-size: 20px;
    }

    .training-Works .training-Col .txt-Box {
        margin-bottom: 20px;
    }

    .training-Works .training-Col .txt-Box p {
        padding: 0;
    }

    .training-Works .training-Col .list {
        margin: 0;
    }

    /*===== .sub-Corporate =====*/

    .training-Works .sub-Corporate {
        padding: 80px 0;
    }

}


/*==============================
 production
==============================*/

/*===== .intro =====*/

.production .intro .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 60px;
}

.production .intro .list li {
    border-right: 1px solid #979797;
    padding: 5px 20px;
    box-sizing: border-box;
}

.production .intro .list li:last-of-type {
    border-right: 0;
}

.production .intro .list li a {
    color: #205075;
    font-size: 17px;
    font-weight: bold;
}

.production .intro .list li a:hover {
    color: #979797;
    text-decoration: underline;
}

/*===== .ly-Prod =====*/

.production .ly-Prod {
    padding-top: 140px;
    margin-top: -140px;
}

.production .ly-Prod .outer {
    background-color: #e9f2ff;
    padding: 120px 0;
}

.production .ly-Prod h2 {
    font-size: 28px;
    font-weight: bold;
    border-left: 10px solid #205075;
    border-bottom: 1px solid #333333;
    padding-left: 20px;
    padding-bottom: 10px;
    margin-bottom: 60px;
}

.production .ly-Prod .list {
    padding: 0 20px;
}

.production .ly-Prod .item + .item {
    margin-top: 100px;
}

.production .ly-Prod h3 {
    margin-bottom: 20px;
}

.production .ly-Prod h3 span {
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    background-color: #5d8ef9;
    border-radius: 5px;
    padding: 10px 20px;
}

.production .ly-Prod .img-Box {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px;
}

.production .ly-Prod .img-Box li img {
    border: 1px solid #9e9d9d;
    box-sizing: border-box;
}

.production .ly-Prod .column-1 li {
    width: 100%;
}

.production .ly-Prod .column-2 li {
    width: calc(100% / 2 - 25px);
    margin-top: 20px;
    margin-right: 30px;
}

.production .ly-Prod .column-2 li:nth-of-type(2n) {
    margin-right: 0;
}

.production .ly-Prod .column-3 li {
    width: calc(100% / 3 - 20px);
    margin-top: 20px;
    margin-right: 30px;
}

.production .ly-Prod .column-3 li:nth-of-type(3n) {
    margin-right: 0;
}

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

    .production .ly-Prod {
        padding-top: 60px;
        margin-top: -60px;
    }

}

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

    /*===== .intro =====*/

    .production .intro .list li a {
        font-size: 16px;
    }

    /*===== .ly-Prod =====*/

    .production .ly-Prod .outer {
        padding: 100px 0;
    }
    
    .production .ly-Prod .item + .item {
        margin-top: 80px;
    }

    .production .ly-Prod h2 {
        font-size: 26px;
        margin-bottom: 50px;
    }

    .production .ly-Prod h3 span {
        font-size: 17px;
    }

    .production .ly-Prod .column-2 li {
        width: calc(100% / 2 - 10px);
        margin-right: 20px;
    }
    
    .production .ly-Prod .column-3 li {
        width: calc(100% / 3 - 14.5px);
        margin-right: 20px;
    }

}

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

    /*===== .intro =====*/

    .production .intro .list {
        justify-content: normal;
        padding: 0 10px;
        margin-bottom: 50px;
    }

    .production .intro .list li {
        width: 50%;
        border-right: 0;
        padding: 0;
        margin-top: 20px;
    }

    .production .intro .list li:nth-of-type(1),
    .production .intro .list li:nth-of-type(2) {
        margin-top: 0;
    }

    /*===== .ly-Prod =====*/

    .production .ly-Prod .outer {
        padding: 80px 0;
    }

    .production .ly-Prod h2 {
        font-size: 24px;
        padding-left: 10px;
        margin-bottom: 40px;
    }

    .production .ly-Prod .list {
        padding: 0;
    }

    .production .ly-Prod .item + .item {
        margin-top: 60px;
    }

    .production .ly-Prod h3 {
        margin-bottom: 15px;
    }

    .production .ly-Prod .img-Box {
        padding: 0;
    }

    .production .ly-Prod .column-2 li {
        width: calc(100% / 2 - 5px);
        margin-right: 10px;
    }

    .production .ly-Prod .column-3 li {
        width: calc(100% / 2 - 5px);
        margin-right: 10px;
    }

    .production .ly-Prod .column-3 li:nth-of-type(3n) {
        margin-right: 10px;
    }

    .production .ly-Prod .column-3 li:nth-of-type(2n) {
        margin-right: 0;
    }

}


/*==============================
 job-Support
==============================*/

.job-Support .page-Ttl {
    background-color: #7d7504;
    background-image: none;
    border-left: 15px solid #534e00;
}

/*===== .intro =====*/

.job-Support .intro figure {
    margin-bottom: 40px;
}

.job-Support .intro .txt-Box {
    padding: 0 20px;
    margin-bottom: 60px;
}

.job-Support .intro .txt-Box h2 {
    font-size: 22px;
    text-align: center;
    margin-bottom: 40px;
}

.job-Support .intro .txt-Box h2 b {
    color: #676001;
    font-size: 28px;
}

.job-Support .intro .txt-Box p {
    font-size: 17px;
    line-height: 2;
}

.job-Support .intro .txt-Box p + p {
    margin-top: 20px;
}

.job-Support .intro .txt-Box ul {
    background-color: #ececec;
    padding: 30px;
    margin: 20px 0;
}

.job-Support .intro .txt-Box ul li {
    font-size: 17px;
    font-weight: bold;
    padding-left: 20px;
    position: relative;
}

.job-Support .intro .txt-Box ul li::before {
    content: "\30FB";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.job-Support .intro .txt-Box ul li + li {
    margin-top: 10px;
}

.job-Support .intro .btn a {
    display: block;
    max-width: 480px;
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    background-color: #6f7708;
    border-radius: 10px;
    padding: 20px 0;
    margin: 0 auto;
    transition: .6s all;
}

.job-Support .intro .btn a:hover {
    color: #efeaa4;
    background-color: #89865c;
}

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

    .job-Support .intro .txt-Box {
        margin-bottom: 50px;
    }

    .job-Support .intro .txt-Box h2 {
        font-size: 20px;
        margin-bottom: 30px;
    }

    .job-Support .intro .txt-Box h2 b {
        font-size: 26px;
    }

    .job-Support .intro .txt-Box p {
        font-size: 16px;
    }

    .job-Support .intro .txt-Box ul li {
        font-size: 16px;
    }

}

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

    .job-Support .intro figure {
        margin-bottom: 30px;
    }

    .job-Support .intro .txt-Box {
        padding: 0;
        margin-bottom: 40px;
    }

    .job-Support .intro .txt-Box h2 {
        font-size: 18px;
        text-align: left;
        margin-bottom: 30px;
    }

    .job-Support .intro .txt-Box h2 b {
        font-size: 24px;
    }

    .job-Support .intro .txt-Box p {
        font-size: 16px;
    }

    .job-Support .intro .txt-Box ul {
        padding: 30px 20px;
    }

    .job-Support .intro .txt-Box ul li {
        font-size: 16px;
    }

}


/*==============================
 pp
==============================*/

.pp .txt-Box dl + dl {
    margin-top: 60px;
}

.pp .txt-Box dl dt {
    font-size: 22px;
    font-weight: bold;
    border-bottom: 1px solid #333333;
    margin-bottom: 30px;
}

.pp .txt-Box dl dd {
    font-size: 16px;
    line-height: 1.8;
}

.pp .txt-Box dl dd + dd {
    margin-top: 20px;
}

.pp .txt-Box dl dd ul {
    padding: 0 20px;
    margin-top: 40px;
}

.pp .txt-Box dl dd ul li:first-of-type {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.pp .txt-Box dl dd ul li + li {
    padding-left: 20px;
    margin-top: 10px;
    position: relative;
}

.pp .txt-Box dl dd ul li + li::before {
    content: "\30FB";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.pp .txt-Box dl dd ul li span {
    display: block;
    font-size: 16px;
    font-weight: normal;
    margin-top: 10px;
}

.pp .txt-Box .txt {
    margin-top: 40px;
}

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

    .pp .txt-Box dl dt {
        font-size: 20px;
    }

    .pp .txt-Box dl dd ul li:first-of-type {
        font-size: 17px;
    }

}

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

    .pp .txt-Box dl + dl {
        margin-top: 50px;
    }

    .pp .txt-Box dl dt {
        margin-bottom: 20px;
    }

    .pp .txt-Box dl dd ul {
        padding: 0 10px;
        margin-top: 30px;
    }

}


/*==============================
 news-List
==============================*/

.news-List .left-Column .list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #959595;
    padding: 0 20px 30px;
    margin-bottom: 30px;
}

.news-List .left-Column .list li time {
    width: 100px;
    font-size: 16px;
}

.news-List .left-Column .list li .cat {
    width: 80px;
    font-size: 14px;
    color: #315e81;
    text-align: center;
    border: 1px solid #315e81;
    padding: 2px 0;
    margin-right: 20px;
    box-sizing: border-box;
}

.news-List .left-Column .list li span {
    width: 100%;
    margin-top: 15px;
}

.news-List .left-Column .list li span a {
    font-size: 17px;
    font-weight: bold;
}

.news-List .left-Column .list li span a:hover {
    color: #bebebe;
    text-decoration: underline;
}

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

    .news-List .left-Column .list li span {
        width: 100%;
        margin-top: 15px;
    }

}

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

    .news-List .left-Column .list li {
        padding: 0 10px 25px;
        margin-bottom: 25px;
    }

}

/*==============================
 single
==============================*/

.single #headerScroll {
    transform: translateY(0);
}

.single .main-Contents {
    padding-top: 180px;
}

.single .left-Column .box {
    margin-bottom: 40px;
}

.single .left-Column .box .ttl {
    font-size: 26px;
    font-weight: bold;
    border-bottom: 1px solid #333333;
    padding-bottom: 10px;
    margin-bottom: 5px;
}

.single .left-Column .box time {
    display: block;
    font-size: 15px;
    text-align: right;
}

.single .left-Column .txt-Box {
    color: #333333;
    padding-bottom: 90px;
    border-bottom: 1px solid #333333;
}

.single .left-Column .txt-Box p {
    font-size: 17px;
    line-height: 1.8;
}

.single .left-Column .txt-Box p + p {
    margin-top: 30px;
}

.single .left-Column .txt-Box img {
    max-width: 100%;
    height: auto;
    padding-bottom: 20px;
}

.single .left-Column .txt-Box .cta {
    margin-top: 60px;
}

.single .left-Column .txt-Box .cta dt {
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

.single .left-Column .txt-Box .cta dd a {
    display: block;
    max-width: 480px;
    margin: 0 auto;
    transition: .6s all;
    position: relative;
}

.single .left-Column .txt-Box .cta dd a::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #dba6ff;
    border-radius: 15px;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: -1;
    transition: .6s all;
}

.single .left-Column .txt-Box .cta dd a:hover:after {
    background-color: #ab39fa;
}

.single .left-Column .txt-Box .cta dd a span {
    display: block;
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    line-height: 1.4;
    background-color: #ab39fa;
    border: 1px solid #ab39fa;
    padding: 20px;
    border-radius: 15px;
    position: relative;
    transition: .6s all;
}

.single .left-Column .txt-Box .cta dd a:hover span {
    color: #ab39fa;
    background-color: #ffffff;
}

.single .left-Column .txt-Box .cta dd a span::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    margin: auto;
    z-index: 1;
    transition: .6s all;
}

.single .left-Column .txt-Box .cta dd a:hover span::after {
    border-top: 4px solid #ab39fa;
    border-right: 4px solid #ab39fa;
}

.single .left-Column .pln-Nav {
    padding-top: 20px;
}

.single .left-Column .pln-Nav ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.single .left-Column .pln-Nav ul li {
    flex: 1;
}

.single .left-Column .pln-Nav ul li a {
    font-size: 17px;
    position: relative;
}

.single .left-Column .pln-Nav ul li.prev a {
    padding-left: 20px;
}

.single .left-Column .pln-Nav ul li.prev a:hover {
    color: #bdbdbd;
}

.single .left-Column .pln-Nav ul li.prev a::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-top: 1px solid #333333;
    border-left: 1px solid #333333;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 1;
    transform: rotate(-45deg);
}

.single .left-Column .pln-Nav ul li.prev a:hover::before {
    border-top: 1px solid #bdbdbd;
    border-left: 1px solid #bdbdbd;
}

.single .left-Column .pln-Nav ul li.back {
    text-align: center;
}

.single .left-Column .pln-Nav ul li.back a {
    display: block;
    max-width: 200px;
    color: #ffffff;
    text-align: center;
    background-color: #234661;
    border: 1px solid #234661;
    padding: 10px 0;
    margin: 0 auto;
    transition: .6s all;
}

.single .left-Column .pln-Nav ul li.back a:hover {
    color: #234661;
    background-color: #ffffff;
}

.single .left-Column .pln-Nav ul li.next {
    text-align: right;
}

.single .left-Column .pln-Nav ul li.next a {
    padding-right: 20px;
}

.single .left-Column .pln-Nav ul li.next a:hover {
    color: #bdbdbd;
}

.single .left-Column .pln-Nav ul li.next a::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-top: 1px solid #333333;
    border-right: 1px solid #333333;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
    transform: rotate(45deg);
}

.single .left-Column .pln-Nav ul li.next a:hover::before {
    border-top: 1px solid #bdbdbd;
    border-right: 1px solid #bdbdbd;
}

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

    .single .main-Contents {
        padding-top: 120px;
    }

}

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

    .single .main-Contents {
        padding-top: 100px;
    }

    .single .left-Column .box {
        margin-bottom: 30px;
    }

    .single .left-Column .box .ttl {
        font-size: 24px;
    }

    .single .left-Column .txt-Box {
        padding-bottom: 80px;
    }

    .single .left-Column .pln-Nav ul li a {
        font-size: 16px;
    }

}

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

    .single .left-Column .box {
        margin-bottom: 20px;
    }

    .single .left-Column .txt-Box {
        padding-bottom: 70px;
    }

    .single .left-Column .txt-Box p {
        font-size: 16px;
    }

    .single .left-Column .pln-Nav ul li a {
        font-size: 15px;
    }

    .single .left-Column .pln-Nav ul li.prev a {
        padding-left: 10px;
    }

    .single .left-Column .pln-Nav ul li.prev a::before {
        width: 10px;
        height: 10px;
    }

    .single .left-Column .pln-Nav ul li.back a {
        padding: 5px 0;
    }

    .single .left-Column .pln-Nav ul li.next a {
        padding-right: 10px;
    }

    .single .left-Column .pln-Nav ul li.next a::before {
        width: 10px;
        height: 10px;
    }

}


/*==============================
 sidebar
==============================*/

.sidebar {
    width: 270px;
    float: right;
}

.sidebar .ttl {
    font-size: 24px;
    font-weight: bold;
    background-color: #e9f2ff;
    border-left: 10px solid #234798;
    padding: 10px 20px;
    margin-bottom: 20px
}

.sidebar .newsingle-List {
    margin-bottom: 60px;
}

.sidebar .newsingle-List .list {
    padding: 0 10px;
}

.sidebar .newsingle-List .list li + li {
    border-top: 1px dotted #333333;
    padding-top: 15px;
    margin-top: 15px;
}

.sidebar .newsingle-List .list li time {
    display: block;
    font-size: 15px;
    margin-bottom: 5px;
}

.sidebar .newsingle-List .list li span a {
    font-size: 16px;
    font-weight: bold;
}

.sidebar .newsingle-List .list li span a:hover {
    color: #bebebe;
    text-decoration: underline;
}

.sidebar .category-List {
    margin-bottom: 60px;
}

.sidebar .category-List ul {
    padding: 0 10px;
}

.sidebar .category-List ul li {
    padding-left: 15px;
    position: relative;
}

.sidebar .category-List ul li::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 6px solid #034374;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}

.sidebar .category-List ul li + li {
    margin-top: 10px;
}

.sidebar .category-List ul li a {
    font-size: 17px;
}

.sidebar .category-List ul li a:hover {
    color: #bebebe;
    text-decoration: underline;
}

.sidebar .archive-List .list {
    padding: 0 20px;
    box-sizing: border-box;
}

.sidebar .archive-List .list li {
    color: #333333;
    position: relative;
}

.sidebar .archive-List .list .item + .item {
    margin-top: 10px;
}

.sidebar .archive-List .list li .drawer {
    font-size: 17px;
    padding-left: 20px;
    cursor: pointer;
    position: relative;
}

.sidebar .archive-List .list li .drawer::before {
    content: "+";
    color: #333333;
    font-size: 20px;
    position: absolute;
    top: -3px;
    left: 0;
    z-index: 1;
    transition: .6s all;
}

.sidebar .archive-List .list li .drawer.open::before {
    transform: rotate(45deg);
}

.sidebar .archive-List .list ul {
    display: none;
    padding-left: 20px;
}

.sidebar .archive-List .list .mini-Item {
    padding-left: 15px;
    margin-top: 5px;
}

.sidebar .archive-List .list .mini-Item::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 7px solid #234798;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}

.sidebar .archive-List .list li a {
    color: #333333;
    font-size: 17px;
}

.sidebar .archive-List .list .mini-Item a:hover {
    color: #bdbdbd;
    text-decoration: underline;
}


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

    .sidebar {
        width: 240px;
    }

    .sidebar .ttl {
        font-size: 22px;
    }

}

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

    .sidebar {
        width: 100%;
        margin-top: 80px;
    }
    
}


/*==============================
 wp-pagenavi
==============================*/

.news-List .wp-pagenavi {
    margin-top: 40px;
}

.news-List .wp-pagenavi .current,
.news-List .wp-pagenavi .page,
.news-List .wp-pagenavi .previouspostslink,
.news-List .wp-pagenavi .nextpostslink {
    display: inline-block;
    color: #234661;
    font-size: 16px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px solid #234661;
    box-sizing: border-box;
    margin-right: 10px;
    margin-bottom: 10px;
}

.news-List .wp-pagenavi .current {
    color: #ffffff;
    background-color: #234661;
}

.news-List .wp-pagenavi a,
.news-List .wp-pagenavi span {
    padding: 0;
}

.news-List .wp-pagenavi a {
    color: #234661;
    transition: .6s all;
}

.news-List .wp-pagenavi a:hover {
    color: #ffffff;
    background-color: #234661;
}

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

    .news-List .wp-pagenavi {
        margin-top: 30px;
    }
    
}


/*==============================
 error-404
==============================*/

.hero-Standard.mainimage-404 .bg-Image {
    background-image: url(../images/common/mainimage404.jpg);
}

.error-404 h2 {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 50px;
}

.error-404 p {
    font-size: 18px;
    text-align: center;
    line-height: 2;
    margin-bottom: 40px;
}

.error-404 .btn a {
    display: block;
    max-width: 280px;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    background-color: #593ddd;
    border: 1px solid #593ddd;
    border-radius: 10px;
    padding: 15px 0;
    margin: 0 auto;
    transition: .6s all;
    position: relative;
}

.error-404 .btn a:hover {
    color: #593ddd;
    background-color: #ffffff;
}

.error-404 .btn a::after {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    margin: auto;
    transform: rotate(45deg);
    z-index: 1;
}

.error-404 .btn a:hover::after {
    border-top: 3px solid #593ddd;
    border-right: 3px solid #593ddd;
}

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

    .error-404 h2 {
        font-size: 28px;
        margin-bottom: 40px;
    }

    .error-404 p {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .error-404 .btn a {
        font-size: 16px;
    }
    
}

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

    .error-404 h2 {
        font-size: 26px;
        margin-bottom: 30px;
    }

    .error-404 p {
        text-align: left;
        letter-spacing: -0.2px;
        margin-bottom: 20px;
    }
    
}


/*==============================
 tlms
==============================*/

.page-id-676 #headerScroll,
.page-id-676 .tutor-page-wrap {
    transform: translateY(0);
}

.page-id-676 .tutor-dashboard,
.page-id-676 .tutor-forgot-password-form,
.page-id-676 .tutor-reset-password-form,
.page-id-676 .tutor-page-wrap {
    margin-top: 160px;
    padding-bottom: 140px;
}

.page-id-676 .tutor-forgot-password-form {
    margin-bottom: 140px;
}

.page-id-678 .tutor-page-wrap,
.page-id-680 #tutor-registration-wrap {
    margin-bottom: 140px;
}