@charset "UTF-8";

/* ==========================================================================
  UTIILIZE
========================================================================== */

@media all and (min-width: 769px) {
    .utilize {
        margin: 6.25rem 0;
    }
    .utilize__around {
        padding: 3.125rem;
    }
    .utilize__around:last-child {
        padding: 3.125rem 3.125rem 0 3.125rem;
    }
    .utilize__around+.utilize__around {}
    .utilize--area {
        background: #b1081f;
        padding: .7rem 0 .7rem 2.31rem;
        color: #fff;
        border-radius: 5px;
    }
    .utilize--area__ttl {
        letter-spacing: 2px;
    }
    .utilize--block {
        display: flex;
        margin: 0 0 1.75rem;
    }
    .utilize--top {
        display: inline-block;
        text-align: center;
    }
    .utilize--top__txt {
        font-size: .875rem;
        text-align: center;
        line-height: 1.4;
        letter-spacing: 1px;
        display: inline-block;
    }
    .utilize--detail {}
    .utilize--detail__txt {
        line-height: 2;
    }
    .utilize--post {
        display: flex;
        align-items: center;
        margin: 0 0 1.2rem;
    }
    .utilize--post__lead {
        color: #b1081f;
        font-size: 1.125rem;
        font-weight: bold;
        padding: 1.625rem 2.125rem;
        background: #F5F5F5;
        display: inline-block;
        border-radius: 5px;
    }
    .utilize--post__txt {
        font-size: 1.125rem;
        font-weight: bold;
        line-height: 1.6;
        padding: 0 0 0 1.25rem;
    }
    .utilize--top__img-width {
        width: 50%;
    }
    .utilize__caption {
        background: #F5F5F5;
        padding: 1.5rem 1.875rem 1.875rem;
        border-radius: 5px;
    }
    .utilize__center {
        text-align: center;
        color: #b1081f;
        font-size: 1.125rem;
        font-weight: bold;
    }
    .utilize__txt {
        line-height: 1.7;
        margin: 1rem 0 1.31rem;
    }
}

@media all and (max-width: 768px) {
    .utilize {
        margin: 3.125rem 0 2.5rem;
    }
    .utilize__around {
        padding: 0;
        margin: 0 0 2.5rem;
    }
    .utilize__around:last-child {
        margin: 0;
    }
    .utilize__around+.utilize__around {}
    .utilize--area {
        background: #b1081f;
        padding: .7rem 0 .7rem 2.31rem;
        color: #fff;
        border-radius: 5px;
    }
    .utilize--area__ttl {
        letter-spacing: 2px;
    }
    .utilize--block {
        display: block;
        margin: 0 0 1.75rem;
    }
    .utilize--top {
        display: block;
        text-align: center;
        margin: 1.625rem 0;
    }
    .utilize--top__txt {
        font-size: .875rem;
        text-align: center;
        line-height: 1.4;
        letter-spacing: 1px;
        display: inline-block;
    }
    .utilize--top__img-width {
        width: 25%;
    }
    .utilize--detail {}
    .utilize--detail__txt {
        line-height: 2;
        padding: 0 1.25rem;
        font-size: 1.142857143rem;
    }
    .utilize--post {
        display: block;
        align-items: center;
    }
    .utilize--post__lead {
        color: #b1081f;
        font-size: 1.125rem;
        font-weight: bold;
        padding: .75rem 0;
        background: #F5F5F5;
        text-align: center;
        border-radius: 5px;
        width: 100%;
    }
    .utilize--post__txt {
        font-size: 1.142857143rem;
        font-weight: bold;
        line-height: 1.6;
        padding: 1.56rem 1.25rem 1.75rem;
    }
    .utilize__caption {
        background: #F5F5F5;
        padding: .93rem 1.25rem 1.81rem;
        border-radius: 5px;
    }
    .utilize__center {
        text-align: center;
        color: #b1081f;
        font-size: 1.142857143rem;
        font-weight: bold;
    }
    .utilize__txt {
        margin: .875rem 0 1.625rem;
        line-height: 2;
        font-size: 1.142857143rem;
    }
}


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

@media all and (min-width: 769px) {
    .top-course {
        margin-top: 4.5rem;
    }
    .top-course__body {
        display: flex;
        flex-wrap: wrap;
    }
    .top-course__item {
        flex-grow: 0;
        flex-shrink: 1;
    }
    .top-course__item {
        width: calc((100% - 1.5rem) / 2);
    }
    /*.top-course__item:not(:nth-child(3n)) {
      margin-right: 1.5rem;
    }*/
    .top-course__item:nth-child(1) {
        margin-right: 1.5rem;
    }
    .top-course__item:nth-child(n + 4) {
        margin-top: 1.5rem;
    }
    .top-course-card {
        display: block;
        padding: 1.5rem 1.5rem 1.25rem 1.5rem;
        border-radius: 0.625rem;
        box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.12);
        background: #fff;
    }
    .top-course-card__category {
        margin-bottom: 0.625rem;
        padding-left: 0.5rem;
        font-size: 1.125rem;
        line-height: 1;
    }
    .top-course-card__body {
        display: flex;
        align-items: center;
    }
    .top-course-card__ico {
        width: 20%;
    }
    .top-course-card__ico i {
        display: block;
        padding-top: 100%;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: contain;
        border-radius: 999px;
    }
    /************************
    teacher icon css
    ************************/
    .top-course-card__ico.second-icon {
        width: 18%;
        margin-left: .2rem;
    }
    .top-course-card__ico img {
        width: 80px;
        height: 80px;
        overflow: hidden;
        position: relative;
        text-align: center;
        display: block;
        border-radius: 5px;
    }
    .top-course-card__ico.top-course-card__ico--koushi01 i {
        display: block;
        padding-top: 100%;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: contain;
        border-radius: 5px;
    }
    .top-course-card__ico--marketing i {
        background-color: #cc7eb2;
        background-image: url(../../img/common/course_ico_marketing.svg);
    }
    .top-course-card__ico--sougyou i,
    .top-course-card__ico--keiei i {
        background-color: #ffce00;
        background-image: url(../../img/common/course_ico_keiei.svg);
    }
    .top-course-card__ico--soshiki i {
        background-color: #f0841e;
        background-image: url(../../img/common/course_ico_soshiki.svg);
        background-position: 0.25rem;
    }
    .top-course-card__ico--jinji i {
        background-color: #409ad6;
        background-image: url(../../img/common/course_ico_jinji.svg);
    }
    .top-course-card__ico--zaimu i {
        background-color: #004099;
        background-image: url(../../img/common/course_ico_zaimu.svg);
    }
    .top-course-card__ico--seminar i {
        background-color: #92318d;
        background-image: url(../../img/common/course_ico_seminar.svg);
    }
    .top-course-card__ico--seisan i {
        background-color: #5cb531;
        background-image: url(../../img/common/course_ico_seisan.svg);
    }
    .top-course-card__ico--bcp i,
    .top-course-card__ico--kadai i {
        background-color: #aaaaaa;
        background-image: url(../../img/common/course_ico_kadai.svg);
    }
    .top-course-card__ico--koushi01 i {
        background-image: url("../../img/utilize/koushi_1@2x-100.jpg");
    }
    .top-course-card__title {
        width: 88%;
        padding-left: 1rem;
        font-weight: bold;
        font-size: 1rem;
        line-height: 1.5;
        color: #b1081f;
    }
    .top-course-card__title-name {
        line-height: 2;
    }
    .top-course-card__title02 {
        width: 88%;
        padding-left: 1rem;
        font-size: .875rem;
        line-height: 1.5;
    }
    .top-course-card__footer {
        display: flex;
        justify-content: flex-end;
    }
    .top-course-card__date {
        padding: 0.3125rem 1.25rem;
        color: #b1081f;
        font-weight: bold;
        font-size: 0.875rem;
        line-height: 1em;
        border: 1px solid #b1081f;
        border-radius: 999px;
    }
    .top-course-card__status {
        margin-left: 0.5rem;
        padding: 0.3125rem 0.875rem;
        color: #fff;
        font-weight: bold;
        font-size: 0.875rem;
        line-height: 1em;
        background: #b1081f;
        border: 1px solid #b1081f;
        border-radius: 0.1875rem;
    }
    .top-course__footer {
        margin: 7rem 0 6.25rem 0;
        text-align: center;
    }
    .top-course-card__body+.top-course-card__body {
        margin: .75rem 0 0;
    }
}

@media all and (max-width: 768px) {
    .top-course {
        margin-top: 4.5rem;
    }
    .top-course__body {
        display: block;
    }
    .top-course__item {
        flex-grow: 0;
        flex-shrink: 1;
    }
    .top-course__item {
        width: 100%;
    }
    /*.top-course__item:not(:nth-child(3n)) {
        margin-right: 1.5rem;
      }*/
    .top-course__item:nth-child(n+2) {
        margin-top: 1.5rem;
    }
    .top-course-card {
        display: block;
        padding: 1.5rem 1.5rem 1.25rem 1.5rem;
        border-radius: 0.625rem;
        box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.12);
        background: #fff;
    }
    .top-course-card__category {
        margin-bottom: 0.625rem;
        padding-left: 0.5rem;
        font-size: 1.125rem;
        line-height: 1;
    }
    .top-course-card__body {
        display: flex;
        align-items: flex-start;
    }
    .top-course-card__ico {
        width: 20%;
    }
    .top-course-card__ico i {
        display: block;
        padding-top: 100%;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: contain;
        border-radius: 999px;
    }
    /************************
      teacher icon css
      ************************/
    .top-course-card__ico.second-icon {
        width: 18%;
        margin-left: .2rem;
    }
    .top-course-card__ico img {
        width: 47px;
        height: 47px;
        overflow: hidden;
        position: relative;
        text-align: center;
        display: block;
        border-radius: 5px;
    }
    .top-course-card__ico.top-course-card__ico--koushi01 i {
        display: block;
        padding-top: 100%;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: contain;
        border-radius: 5px;
    }
    .top-course-card__ico--marketing i {
        background-color: #cc7eb2;
        background-image: url(../../img/common/course_ico_marketing.svg);
    }
    .top-course-card__ico--keiei i {
        background-color: #ffce00;
        background-image: url(../../img/common/course_ico_keiei.svg);
    }
    .top-course-card__ico--soshiki i {
        background-color: #f0841e;
        background-image: url(../../img/common/course_ico_soshiki.svg);
    }
    .top-course-card__ico--jinji i {
        background-color: #409ad6;
        background-image: url(../../img/common/course_ico_jinji.svg);
    }
    .top-course-card__ico--zaimu i {
        background-color: #004099;
        background-image: url(../../img/common/course_ico_zaimu.svg);
    }
    .top-course-card__ico--seminar i {
        background-color: #92318d;
        background-image: url(../../img/common/course_ico_seminar.svg);
    }
    .top-course-card__ico--seisan i {
        background-color: #5cb531;
        background-image: url(../../img/common/course_ico_seisan.svg);
    }
    .top-course-card__ico--kadai i {
        background-color: #aaaaaa;
        background-image: url(../../img/common/course_ico_kadai.svg);
    }
    .top-course-card__ico--koushi01 i {
        background-image: url("../../img/utilize/koushi_1@2x-100.jpg");
    }
    .top-course-card__title {
        width: 88%;
        padding-left: 1.142857143rem;
        font-weight: bold;
        font-size: 1rem;
        line-height: 1.5;
        color: #b1081f;
    }
    .top-course-card__title-name {
        line-height: 2;
    }
    .top-course-card__title02 {
        width: 88%;
        padding-left: 1rem;
        font-size: .75rem;
        line-height: 1.5;
    }
    .top-course-card__footer {
        display: flex;
        justify-content: flex-end;
    }
    .top-course-card__date {
        padding: 0.3125rem 1.25rem;
        color: #b1081f;
        font-weight: bold;
        font-size: 0.875rem;
        line-height: 1em;
        border: 1px solid #b1081f;
        border-radius: 999px;
    }
    .top-course-card__status {
        margin-left: 0.5rem;
        padding: 0.3125rem 0.875rem;
        color: #fff;
        font-weight: bold;
        font-size: 0.875rem;
        line-height: 1em;
        background: #b1081f;
        border: 1px solid #b1081f;
        border-radius: 0.1875rem;
    }
    .top-course__footer {
        margin: 7rem 0 6.25rem 0;
        text-align: center;
    }
    .top-course-card__body+.top-course-card__body {
        margin: .75rem 0 0;
    }
}

@media all and (min-width: 769px) {
    .c-category {
        border-top: 1px solid #aaa;
        border-bottom: 1px solid #aaa;
        margin: 0 0 3.75rem;
    }
    .c-category__ul {
        display: flex;
        height: 6.875rem;
    }
    .c-category__li:first-child {
        border-left: 1px solid #aaa;
    }
    .c-category__li {
        width: calc(100% / 4);
        border-right: 1px solid #aaa;
    }
    .c-category__link {
        display: block;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media all and (max-width: 768px) {
    .c-category {
        margin: 0 0 3.125rem;
    }
    .c-category__ul {
        display: block;
    }
    .c-category__li:first-child {}
    .c-category__li {
        width: 100%;
        height: 4.875rem;
        border-top: 1px solid #aaa;
    }
    .c-category__li:last-child {
        border-bottom: 1px solid #aaa;
    }
    .c-category__link {
        display: block;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}