@charset "utf-8";
/* CSS Document */

.br1140 {
    display: none;
}

@media screen and (max-width:1140px) {
    .br1140 {
        display: block;
    }
}

/* 　/model/ only
******************************************/

.box-title {
    text-align: center;
    font-size: 24px;
    position: relative;
    border-bottom: solid 1px #222;
    margin-bottom: 2.3em;
}

.box-title .title-inner {
    display: inline-block;
    padding: 10px 20px;
    border: solid 1px #111;
    position: relative;
    bottom: -2em;
    background: #fff;
}

.box-title .desc {
    font-size: 14px;
    display: block;
}

.box-title+p {
    margin-bottom: 30px;
}

@media screen and (max-width:640px) {
    .box-title {
        font-size: 20px;
    }

    .box-title .desc {
        font-size: 12px;
    }

    .box-title+p {
        font-size: 12px;
    }
}

/* 　limited
******************************************/
@keyframes anime1 {
    0% {
        left: 100%;
    }

    20% {
        left: 0;
    }

    90% {
        left: 0;
    }

    100% {
        left: -100%;
    }
}

.limited {
    background: #124b68;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
    max-width: 100%;
}

.limited-inner {
    padding: 0;
    max-width: 1200px;
    margin: auto;
    position: relative;
}

.limited-inner>div {
    display: inline-block;
    vertical-align: bottom;
}

.limited-month {
    background: #fff;
    color: #124b68;
    padding: 7px 20px;
    position: relative;
    z-index: 10;
}

.limited .num {
    font-size: 16px;
    line-height: 1;
}

.limited-body {
    max-width: 100%;
    position: relative;
    animation-name: anime1;
    animation-duration: 10s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

.limited-body .num {
    color: #ff0;
    font-size: 30px;
}

.limited-body img {
    margin-right: 3px;
    margin-left: 3px;
    max-width: 60px;
}

.limited-body .btn {
    font-size: 12px;
    text-shadow: none;
    border: solid 1px rgba(0, 0, 0, .1);
    margin-top: -15px;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .1);
    padding: 7px 20px;
}

@media screen and (max-width:1080px) {
    .limited {
        font-size: 110%;
    }

    .limited-body .btn {
        display: none;
    }
}

@media screen and (max-width:730px) {
    .limited {
        font-size: 100%;
    }

    .limited .num {
        font-size: 140%;
    }

    .limited-month {
        width: 28%;
        float: left;
        padding: 5px;
    }

    .limited-body {
        width: 72%;
        float: right;
        font-size: 70%;
        line-height: 1.1;
        padding: 3px;
    }

    .limited-body img {
        width: 20%;
        float: left;
        margin-right: 5px;
    }
}

@media screen and (max-width:640px) {
    .limited .num {
        font-family: 'Roboto', sans-serif;
    }
}

/* 　mainimg
******************************************/
.mainimg {
    background: #fff left 0 no-repeat;
    background-size: cover;
    position: relative;
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
}

.mainimg h1 {
    overflow: hidden;
    max-width: 1200px;
    margin: auto;
    margin-bottom: 85px;
}

.has-notice .mainimg h1 {
    margin-bottom: 10px;
}

.mainimg .header-label {
    position: absolute;
    max-width: 300px;
    top: 0;
    left: 58%;
}

@media screen and (max-width:1320px) {
    .mainimg {
        background-position: 80% top;
    }

    .mainimg .header-label {
        max-width: 250px;
    }
}

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

    /*.mainimg .header-label{max-width: 350px;position: static;clear: both;margin-right: auto;display: block;margin-left: 10px;margin-bottom: 10px;}*/
    .mainimg .header-label {
        max-width: 600px;
        position: static;
        clear: both;
        display: block;
        margin-bottom: 10px;
        width: 83%;
    }
}

@media screen and (max-width:900px) {
    .mainimg {
        background-position: 86% -30px;
    }
}

@media screen and (max-width:800px) {
    .mainimg {
        border-top: 0;
    }
}

@media screen and (max-width:640px) {
    .mainimg {
        background-position: 84% 0px;
        background-size: 180%;
    }

    .mainimg h1 {
        margin-bottom: 55px;
        padding-top: 5px;
    }

    .mainimg .header-main {
        width: 90%;
    }
}

/* 　sele end
******************************************/
.sale-end {
    margin: 80px 0;
}

.sale-end .section-inner {
    text-align: center;
}

.sale-end .box-message {
    display: inline-block;
    margin: 0 auto;
    border: #ddd solid 4px;
    padding: 30px 40px;
    font-size: 18px;
}

@media screen and (max-width:640px) {
    .sale-end {
        margin: 40px 0;
    }

    .sale-end .box-message {
        display: block;
        margin: 0 20px;
        padding: 20px;
        font-size: 14px;
    }
}


/* 　plan
******************************************/
#plan .section-inner {
    padding-top: 0;
}

.price {
    text-align: center;
}

.price dt {
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    border: solid 1px #111;
    font-weight: bold;
}

.price dt .number, .price dt .course {
    display: inline-block;
    padding: 0 5px;
}

.price dt .number {
    color: #fff;
    margin-left: -3px;
    border-left: solid 1px #111;
}

.price dt .course {}

.price dd {
    font-size: 18px;
    padding-top: 5px;
}

.price dd .price-inner {
    display: inline-block;
    position: relative;
}

.price dd .num {
    font-size: 40px;
    margin-right: -2px;
}

.price-low dt, .price-low dd .num {
    color: #e4007d;
}

.price .tax {
    position: absolute;
    font-size: 9px;
    top: 0;
    right: 7px;
    color: #666;
    font-weight: normal;
}

.nav-year {
    border: 0;
    position: relative;
    z-index: 2;
    margin: -87px auto -5px;
}

.nav-year ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 2%;
}

.nav-year li {
    text-align: center;
    box-shadow: 1px -5px 8px 0 rgb(0, 0, 0, .2);
    position: relative;
    flex: auto;
}

.nav-year li:first-child {
    border-left: solid 1px #ddd;
    border-top-left-radius: 10px;
}

.nav-year li:last-child {
    border-top-right-radius: 10px;
}

.nav-year li:first-child a {
    border-top-left-radius: 10px;
}

.nav-year li:last-child a {
    border-top-right-radius: 10px;
}

.nav-year li.active {
    border-bottom: 0;
}

.nav-year li .come {
    display: block;
    margin-bottom: -2px;
    color: #666;
}

.nav-year li a {
    display: block;
    border-top: solid 10px #eee;
    background: #eee;
    padding: 10px 10px 15px;
    transition: all .1s linear 0s;
    border-left: solid 1px #999;
    border-right: solid 1px #999;
    border-bottom: solid 1px #ddd !important;
}

.nav-year li.active a {
    background: #fff !important;
    border-bottom: solid 1px #fff !important;
}

.nav-year li a:hover, .nav-year li a:active {
    text-decoration: none;
    background: #eee;
    z-index: 3;
    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, .2);
}

.nav-year li a:focus {
    text-decoration: none;
}

.nav-year li.active a:hover, .nav-year li.active a:active, .nav-year li.active a:focus {
    transform: none;
    box-shadow: none;
}

.nav-year li .num {
    font-size: 30px;
    line-height: 1;
    display: inline-block;
    margin-right: 2px;
}

.nav-year li .label-number {
    color: #fff;
    font-size: 12px;
    border-radius: 30px;
    padding: 0 10px;
    position: relative;
    top: -3px;
    /*margin-left: 10px;*/
}

@media screen and (max-width:900px) {
    #plan .section-inner {
        padding: 0;
    }

    .nav-year {
        margin-top: -80px;
    }
}

@media screen and (max-width:640px) {
    .nav-year {
        margin-top: -60px;
    }

    .nav-year li a {
        padding: 5px 5px 10px;
    }

    .nav-year li a:hover, .nav-year li a:active {}

    .nav-year li .come {
        font-size: 9px;
        line-height: 1.2;
        margin-bottom: 0;
    }

    .nav-year li {
        font-size: 80%;
    }

    .nav-year li .num {
        font-size: 24px;
    }

    .nav-year li .label-number {
        font-size: 10px;
        top: 0px;
        padding: 0 10px;
        display: block;
        max-width: 7em;
        margin: 3px auto 0;
    }
}

@media screen and (max-width:500px) {
    .nav-year {
        margin-top: -55px;
    }

    .nav-year li a {
        padding: 5px;
    }
}

.nav-year li a, .nav-grade li.active a, .plan-gradelist .tag {
    border-color: #00a0e9;
}

.nav-year li .num, .plan-gradelist .tag, .year5-content strong {
    color: #00a0e9;
}

.price dt .number, .nav-year li .label-number, .year5-content .nav-grade .grade-num {
    background: #00a0e9;
}

.year5-content .nav-grade a {
    background: rgb(0, 198, 255);
    border: solid 1px rgba(4, 147, 212, 1);
    background: linear-gradient(180deg, rgba(0, 198, 255, 1) 0%, rgba(4, 147, 212, 1) 100%);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.year5-content .nav-grade a:hover, .year5-content .nav-grade a:active, .year5-content .nav-grade a:focus {
    background: rgba(4, 147, 212, 1);
    color: #fff;
}

.nav-year .tab-year3 a, .year3-content .nav-grade li.active a, .year3-content .plan-gradelist .tag {
    border-color: #0fbe7a;
}

.nav-year .tab-year3 .num, .year3-content .plan-gradelist .tag, .year3-content strong {
    color: #0fbe7a;
}

.year3-content .price dt .number, .nav-year .tab-year3 .label-number, .year3-content .nav-grade .grade-num {
    background: #0fbe7a;
}

.year3-content .nav-grade a {
    background: rgb(15, 217, 120);
    border: solid 1px rgba(9, 170, 107, 1);
    background: linear-gradient(180deg, rgba(15, 217, 120, 1) 0%, rgba(9, 170, 107, 1) 100%);
}

.year3-content .nav-grade a:hover, .year3-content .nav-grade a:active, .year3-content .nav-grade a:focus {
    background: rgba(9, 170, 107, 1);
    color: #fff;
}

.nav-year .tab-year9 a, .year9-content .nav-grade li.active a, .year9-content .plan-gradelist .tag {
    border-color: #ffb200;
}

.nav-year .tab-year9 .num, .year9-content .plan-gradelist .tag, .year9-content strong {
    color: #ffb200;
}

.year9-content .price dt .number, .nav-year .tab-year9 .label-number, .year9-content .nav-grade .grade-num {
    background: #ffb200;
}

.year3-content .nav-grade a {
    background: rgb(15, 217, 120);
    border: solid 1px rgba(9, 170, 107, 1);
    background: linear-gradient(180deg, rgba(15, 217, 120, 1) 0%, rgba(9, 170, 107, 1) 100%);
}

.year3-content .nav-grade a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.year3-content .nav-grade a:hover, .year3-content .nav-grade a:active, .year3-content .nav-grade a:focus {
    background: rgba(9, 170, 107, 1);
    color: #fff;
}

.year9-content .nav-grade a {
    background: rgb(255, 178, 0);
    border: solid 1px rgba(227, 118, 0, 1);
    background: linear-gradient(180deg, rgba(255, 178, 0, 1) 0%, rgba(227, 118, 0, 1) 100%);
}

.year9-content .nav-grade a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.year9-content .nav-grade a:hover, .year9-content .nav-grade a:active, .year9-content .nav-grade a:focus {
    background: rgba(227, 118, 0, 1);
    color: #fff;
}

/* 　plan-single
******************************************/

.plan-header {
    padding: 30px 0;
}

.plan-header .price-main {
    width: 68%;
    float: left;
}

.plan-header .model-data {
    width: 30%;
    float: right;
}

.plan-header .price-main .model-img {
    width: 40%;
    float: left;
}

.plan-header .price-main .text {
    width: 55%;
    float: right;
}

.plan-header .model {
    line-height: 1;
}

.plan-header .grade {
    margin-bottom: 10px;
    line-height: 1;
}

.plan-header .grade li {
    display: inline;
    font-size: 12px;
    margin-bottom: 3px;
}

.plan-header .grade li:before {
    content: "/";
    display: inline-block;
    margin-right: 3px;
}

.plan-header .grade li:first-child:before {
    display: none;
}

.plan-header .price {
    width: 50%;
    float: left;
}

.plan-header .price .tax {
    top: 5px;
}

.plan-header .model-data tr {
    border-bottom: solid 1px #ddd;
}

.plan-header .model-data th {
    font-size: 14px;
}

.plan-header .model-data td {
    font-weight: bold;
}

.plan-header .model-data td .num {
    font-size: 18px;
}

.plan-header .model-data td .unit {
    font-size: 12px;
}

.plan-gradelist h3 {
    text-align: center;
    margin-bottom: 20px;
}

.plan-gradelist .single {
    float: left;
    text-align: center;
    border: solid 1px #ddd;
}

.plan-gradelist .gradelist-name {
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    padding: 5px 0;
    line-height: 1;
}

.plan-gradelist .model {
    font-size: 12px;
    color: #999;
    display: block;
    margin-bottom: 7px;
}

.plan-gradelist .gradelist-price {
    border-bottom: solid 1px #ddd;
    padding: 10px 0;
}

.plan-gradelist .price dt {
    font-size: 16px;
}

.plan-gradelist .price dd {
    font-size: 12px;
}

.plan-gradelist .price dd .num {
    font-size: 36px;
}

.plan-gradelist .price .tax {
    top: 3px;
    right: -3px;
}

.plan-gradelist.col-5 .single {
    width: 20%;
}

.plan-gradelist.col-4 .single {
    width: 25%;
}

.plan-gradelist.col-3 .single {
    width: 33.33%;
}

.plan-gradelist.col-2 .single {
    width: 50%;
}

@media screen and (max-width:900px) {
    .tab-content-year {
        padding: 10px;
    }

    .plan-header .price-main, .plan-header .model-data {
        width: 100%;
        float: none;
    }

    .plan-header .model-data th, .plan-header .model-data td {
        padding: 5px;
        text-align: center;
    }

    .plan-gradelist .model {
        font-size: 10px;
        margin-bottom: 3px;
    }

    .plan-gradelist .grade {
        font-size: 12px;
    }

    .plan-gradelist .price dt {
        font-size: 12px;
    }

    .plan-gradelist .price dd {
        font-size: 10px;
    }

    .plan-gradelist .price dd .num {
        font-size: 24px;
    }

    .plan-gradelist .price .tax {
        top: -2px;
        right: -5px;
        font-size: 8px;
    }

    .plan-gradelist.col-5 .single {
        width: 33.33%;
    }

    .plan-gradelist.col-5 .single:nth-child(5), .plan-gradelist.col-5 .single:nth-child(6) {
        width: 50%;
    }
}

@media screen and (max-width:640px) {
    .plan-header {
        padding: 10px 0;
    }

    .plan-header .grade li {
        font-size: 10px;
    }

    .plan-gradelist .gradelist-name {
        padding: 2px 2px 3px;
    }

    .plan-header .make {
        font-size: 12px;
        color: #999;
    }

    .plan-header .model {
        font-size: 20px;
    }

    .plan-header .grade {
        margin: 5px 0 10px;
    }

    .plan-header .price-main {
        text-align: center;
    }

    .plan-header .price-main .model-img {
        width: 100%;
        max-width: 200px;
        float: none;
    }

    .plan-header .price-main .text {
        width: 100%;
        float: none;
    }

    .plan-header .price dt {
        font-size: 14px;
    }

    .plan-header .price dd .num {
        font-size: 30px;
    }

    .plan-header .price .tax {
        top: -2px;
        right: -5px;
        font-size: 8px;
    }

    .plan-gradelist .gradelist-price {
        padding-top: 5px;
    }

    .plan-gradelist .model {
        font-size: 8px;
        margin-top: 2px;
        margin-bottom: 1px;
    }

    .plan-gradelist .grade {
        font-size: 10px;
    }

    .plan-gradelist .price dd .num {
        font-size: 20px;
    }

    .plan-gradelist .price dd {
        font-size: 8px;
    }

    .plan-header .model-data th, .plan-header .model-data td {
        font-size: 12px;
    }
}

/* 　grade
******************************************/

.nav-grade {
    border: 0;
    margin: 20px 0;
}

.nav-grade ul {
    display: flex;
    flex-wrap: wrap;
}

.nav-grade li {
    width: 20%;
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
    position: relative;
    padding: 2px;
}

.nav-grade li:last-child {
    margin-right: 0;
}

.nav-grade li .come {
    display: block;
    margin-bottom: -5px;
}

.nav-grade li a {
    display: block;
    padding: 10px;
    transition: all .2s linear 0s;
    border-radius: 3px;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .2);
    border: solid 1px #ddd;
    color: #fff;
    background: rgb(0, 241, 255);
    background: linear-gradient(180deg, rgba(0, 241, 255, 1) 0%, rgba(4, 147, 212, 1) 100%);
    border-radius: 30px;
}

.nav-grade li.active a {
    background: #fff;
}

.nav-grade li a:hover, .nav-grade li a:active, .nav-grade li a:focus {
    text-decoration: none;
    background: #f6f6f6;
    color: #111;
}

.nav-grade .grade-num {
    position: absolute;
    top: -20px;
    font-size: 11px;
    left: 0.2em;
    line-height: 1;
    color: rgba(0, 0, 0, .7);
    padding: 2px 7px;
    border-radius: 3px 3px 0 0;
    z-index: 1;
    background: transparent !important;
}

.nav-grade .grade-num .num {
    font-size: 16px;
}

.nav-grade .model {
    font-size: 11px;
    display: block;
    margin-bottom: 3px;
}

.nav-grade .grade {
    font-size: 16px;
    line-height: 1.2;
}

.nav-grade li {
    display: flex;
}

.nav-grade.col-4 li {
    width: 25%;
}

.nav-grade.col-3 li {
    width: 33.33%;
}

.nav-grade.col-2 li {
    width: 50%;
}

.nav-grade.col-1 li {
    width: 100%;
    float: none;
}

@media screen and (max-width:900px) {
    .nav-grade li a {
        padding: 7px 3px;
    }
}

@media screen and (max-width:640px) {
    .nav-grade {
        margin: 10px 0;
    }

    /*.nav-grade .model{display: none;}*/
    .nav-grade.col-5 li {
        width: 33.33%;
    }

    .nav-grade.col-5 li:nth-child(4), .nav-grade.col-5 li:nth-child(5) {
        width: 50%;
    }

    .nav-grade .model {
        font-size: 9px;
    }

    .nav-grade .grade {
        font-size: 10px;
    }

    .nav-grade li a {
        border-radius: 10px;
    }
}

@media screen and (max-width:500px) {
    .nav-grade li {
        font-size: 10px;
    }

    .nav-grade li a {
        padding: 10px 2px;
    }
}

.tab-content-grade {
    border-top: solid 1px #ddd;
}

.grade-title {
    /*box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, .2);*/
}

.grade-body {
    table-layout: fixed;
    clear: both;
}

.grade-body .cell-plan {
    width: 33.33%;
    position: relative;
    overflow: hidden;
}

.grade-body .cell-course {
    width: 70%;
    padding: 0;
    padding-left: 10px;
}

.grade-body thead {
    background: #eee;
    display: none;
}

.grade-body thead .cell-plan {
    border-right: solid 1px #ddd;
}

.grade-body tr {
    border-top: solid 10px #fff;
}

.grade-body .plan-title {}

.grade-body .desc {
    font-size: 13px;
    color: #333;
}

.grade-body .plan-title .model {
    font-size: 12px;
    background: #333;
    color: #fff;
    border-radius: 30px;
    padding: 5px 10px;
    display: inline-block;
    line-height: 1.4;
    max-width: 80%;
}

.grade-body .planname {
    font-size: 30px;
    line-height: 1;
    letter-spacing: -2px;
    display: block;
    margin-bottom: 5px;
}

.grade-body .planname .unit {
    font-size: 12px;
}

.grade-body .plan-discount {
    background: #ed1c8f;
    color: #fff;
    display: inline-block;
    line-height: 1;
    ;
    padding: 5px 20px;
    margin-bottom: 10px;
    margin-top: -10px;
}

.grade-body .plan-discount .dt {
    font-size: 12px;
    display: block;
    position: absolute;
    top: -10px;
    right: 0;
    background: #fff;
    color: #f00;
    padding: 3px 7px;
    font-weight: bold;
}

.grade-body .plan-discount .dd {
    font-size: 18px;
}

.grade-body .plan-discount .dd .num {
    font-family: 'Roboto', sans-serif;
    font-size: 36px;
    margin-right: 2px;
    color: #ff0;
}

.grade-body .plan-discount:before {
    border-right-color: #b20062;
}

.grade-body .plan-discount:after {
    border-left-color: #b20062;
}

.grade-body .price dt {
    font-size: 14px;
    display: block;
    padding: 10px;
}

.grade-body .course-price li {
    width: 28%;
    float: left;
    border: solid 1px #ccc;
    border-right: 0;
}

.grade-body .course-price li:last-child {
    margin-right: 0;
    border-right: solid 1px #ccc;
}

.grade-body .course-price-col2 li {
    width: 42%;
}

.grade-body .course-price-col1 li {
    width: 84%;
    float: none;
    margin-right: 0;
    border-right: 0;
}

.grade-body .course-price .price {}

.grade-body .course-price .price .num {
    font-size: 40px;
}

.grade-body .course-price .price .tax {
    right: -10px;
}

.grade-body .price .taxin, .grade-body .price .bonus {
    font-size: 12px;
}

.grade-body .price .bonus {
    height: 40px;
    padding-top: 10px;
    vertical-align: middle;
}

.grade-body .monthly .count, .grade-body .bonus .count {
    border-radius: 30px;
    padding: 1px 5px 0;
    display: inline-block;
    color: #fff;
    font-size: 12px;
    position: relative;
    top: -1px;
}

.grade-body .bonus .count {
    top: 2px;
}

.grade-body .course-price .price .monthly {
    padding-top: 10px;
    height: 67px;
}

.grade-body .course-price .price .monthly .num {
    color: #f2005c;
}

.grade-body .course-price .price .taxin {
    border-bottom: solid 1px #ddd;
    padding-bottom: 10px;
}

.grade-body .course-price li:first-child {
    width: 16%;
}

.grade-body .course-price li:first-child dt {
    color: #fff;
}

.grade-body .course-price li:first-child dd .text {
    display: block;
    font-size: 12px;
    line-height: 1;
}

.grade-body .course-price li:first-child {
    width: 16%;
}

.grade-body .course-price li:first-child .bonus {
    padding: 5px;
    background: #f6f6f6;
}

.grade-body .course-price li:first-child .monthly {
    height: 100px;
    border-bottom: solid 1px #ddd;
    padding-top: 30px;
    background: #f6f6f6;
}

#year5 .grade-body .course-price .price .monthly {
    height: 115px;
}

#year5 .grade-body .course-price li:first-child .monthly {
    height: 148px;
    padding-top: 50px;
}

#year9 .grade-body .course-price .price .monthly {
    height: 47px;
}

#year9 .grade-body .course-price li:first-child .monthly {
    height: 80px;
    padding-top: 20px;
}

.grade-body .course-price .price .monthly .old, .grade-body .course-price .price .monthly .cp, .grade-body .course-price .price .monthly .new {
    display: block;
}

.grade-body .course-price .price .monthly .old {
    font-size: 12px;
    color: #aaa;
}

.grade-body .course-price .price .monthly .old i {
    color: #f2005c;
    margin-left: 3px;
    margin-right: 0;
}

.grade-body .course-price .price .monthly .old .num {
    text-decoration: line-through;
    font-size: 14px;
    color: #999;
}

.grade-body .course-price .price .monthly .cp {
    font-size: 12px;
    color: #f2005c;
}

.grade-body .course-price .price .monthly .cp i {
    color: #f2005c;
    margin-left: 3px;
    margin-right: 0;
}

.grade-body .course-price .price .monthly .cp .num {
    text-decoration: line-through;
    font-size: 14px;
    color: #f2005c;
}

.grade-body .course-price .price .monthly .new {
    position: relative;
}

.grade-body .course-price .price .monthly .cp+.new {
    padding-top: 0;
}

.grade-body .course-price .price .monthly .new .ribbon {
    font-size: 12px;
    display: block;
    background: #f2005c;
    color: #fff;
    padding: 2px 5px;
    margin-bottom: 4px;
}

.grade-body .course-price .price .monthly .new .ribbon:before {
    border-right-color: #c60048;
}

.grade-body .course-price .price .monthly .new .ribbon:after {
    border-left-color: #c60048;
}

.grade-body .course-price .price .monthly .new .tax {
    color: #fff;
    position: static;
    font-size: 8px;
}

.pulse {
    animation-duration: 3s;
}

.ribbon {
    display: inline-block;
    position: relative;
}

.ribbon:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-right: solid 10px #a02653;
    /*折り返し部分*/
}

.ribbon:after {
    position: absolute;
    content: '';
    top: 100%;
    right: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-left: solid 10px #a02653;
    /*折り返し部分*/
}

.grade-body .cell-plan.cell-stoporder {}

.grade-body .cell-plan .stop-order {
    margin: 10px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 14px;
    z-index: 2;
    padding: 10px 5px;
    border-radius: 30px;
}

.grade-body .cell-plan .stop-order a {
    color: #FEFF01;
    text-decoration: underline;
}

.grade-body .cell-plan .stop-order a:hover {
    text-decoration: none;
}

@media screen and (max-width:900px) {
    .grade-body, .grade-body thead, .grade-body tbody, .grade-body tfoot, .grade-body tr, .grade-body th, .grade-body td {
        display: block;
        width: 100%;
    }

    .grade-body thead {
        display: none;
    }

    .grade-body td {
        overflow: hidden;
    }

    .grade-body .cell-plan, .grade-body .cell-course {
        width: 100%;
    }

    .grade-body .cell-course {
        padding: 0;
        padding-top: 10px;
        margin-bottom: 20px;
    }

    .grade-body .planname {
        font-size: 24px;
    }

    .grade-body .price .bonus {
        height: 3em;
    }
}

@media screen and (max-width:780px) {
    .grade-body .course-price .price .num {
        font-size: 30px;
    }

    .grade-body .course-price .price .monthly {
        height: 37px;
    }

    .grade-body .course-price li.has-discount .price .monthly {
        height: 57px;
    }

    .grade-body .course-price li:first-child .monthly {
        height: 70px;
    }

    .grade-body .course-price li:first-child.has-discount .monthly {
        height: 90px;
    }

    #year5 .grade-body .course-price .price .monthly {
        height: 104px;
    }

    #year5 .grade-body .course-price li:first-child .monthly {
        height: 137px;
    }
}

@media screen and (max-width:640px) {
    .grade-body {
        margin: 0;
    }

    .grade-body .course-price .price dd .num {
        font-size: 30px;
    }

    .grade-body .course-price .price .tax {
        top: -2px;
        font-size: 7px;
        right: -14px;
    }

    .grade-body .course-price .price .cp+.new .tax {
        right: -5px;
    }

    .grade-body .cell-plan {
        line-height: 1.2;
    }

    .grade-body .desc {
        font-size: 11px;
        margin-bottom: 6px;
    }

    .grade-body .planname {
        font-size: 24px;
        letter-spacing: 0;
    }

    .grade-body .after {
        font-size: 9px;
    }

    .grade-body .plan-title .model {
        font-size: 10px;
    }

    .grade-body .course-price .price .monthly {
        padding-top: 10px;
    }

    .grade-body .course-price .price .monthly .old {
        font-size: 8px;
    }

    .grade-body .course-price .price .monthly .old .text {
        font-size: 8px;
    }

    .grade-body .course-price .price .monthly .old .num {
        font-size: 10px;
    }

    .grade-body .course-price .price .monthly .cp {
        font-size: 8px;
        margin-bottom: 2px;
    }

    .grade-body .course-price .price .monthly .cp .text {
        font-size: 8px;
    }

    .grade-body .course-price .price .monthly .cp .num {
        font-size: 10px;
    }

    .grade-body .course-price .price .monthly {
        height: 32px;
    }

    .grade-body .course-price li.has-discount .price .monthly {
        height: 52px;
    }

    .grade-body .course-price li:first-child .monthly {
        height: 65px;
    }

    .grade-body .course-price li:first-child.has-discount .monthly {
        height: 85px;
    }

    .grade-body .course-price li:first-child dd .text {
        font-size: 9px;
    }

    #year5 .grade-body .course-price .price .monthly {
        height: 98px;
    }

    #year5 .grade-body .course-price li:first-child .monthly {
        height: 131.5px;
    }

    #year9 .grade-body .course-price .price .monthly {
        height: 32px;
    }

    #year9 .grade-body .course-price li:first-child .monthly {
        height: 55px;
        padding-top: 15px;
    }
}

@media screen and (max-width:500px) {
    .grade-body .price dt {
        padding: 5px;
        font-size: 12px;
    }

    .grade-body .course-price .price dd {
        font-size: 8px;
    }

    .grade-body .bonus .count {
        top: 0;
        padding-top: 0;
    }

    .grade-body .monthly .count, .grade-body .bonus .count {
        font-size: 8px;
    }

    .grade-body .course-price .price dd .num {
        font-size: 20px;
    }

    .grade-body .course-price .price dd.monthly .new .num {
        letter-spacing: -0.5px;
    }

    .grade-body .course-price .price dd.taxin {
        font-size: 9px;
        padding-top: 3px;
        padding-bottom: 5px;
    }

    .grade-body .price .bonus {
        padding-top: 15px;
        height: 45px;
    }

    .grade-body .course-price li:first-child dd .text {
        margin-bottom: 2px;
    }

    .grade-body .course-price li:first-child .bonus {
        padding-top: 5px;
    }

    .grade-body .course-price .price .monthly {
        height: 27px;
    }

    .grade-body .course-price li.has-discount .price .monthly {
        height: 45px;
    }

    .grade-body .course-price li:first-child .monthly {
        height: 48px;
        padding-top: 10px;
    }

    .grade-body .course-price li:first-child.has-discount .monthly {
        height: 66px;
        padding-top: 20px;
    }

    .grade-body .course-price .price .monthly .old i, .grade-body .course-price .price .monthly .cp i {
        display: none;
    }

    #year5 .grade-body .course-price .price .monthly {
        height: 82px;
    }

    #year5 .grade-body .course-price li:first-child .monthly {
        height: 103px;
    }

    #year9 .grade-body .course-price li:first-child .monthly {
        height: 53px;
    }
}

.grade-body .row-plan1 .cell-plan {
    background: #f6ebd6;
}

.grade-body .row-plan1 .monthly .count, .grade-body .row-plan1 .bonus .count, .grade-body .row-plan1 .equipments li.equip-title {
    background: #f29f00;
}

.grade-body .row-plan1 .planname, .grade-body .row-plan1 .after, .grade-body .row-plan1 .course, .grade-body .row-plan1 .bonus, .grade-body .row-plan1 .li-course3 .num, .grade-body .row-plan1 .equipments li.equip-title .number {
    color: #f29f00;
}

.grade-body .row-plan1 .price dt {
    border-color: #f29f00;
}

.grade-body .row-plan2 .cell-plan {
    background: #dbe7f4;
}

.grade-body .row-plan2 .monthly .count, .grade-body .row-plan2 .bonus .count, .grade-body .row-plan2 .equipments li.equip-title, .grade-body .equipments .only-plan2 a:after {
    background: #3a86d3;
}

.grade-body .row-plan2 .planname, .grade-body .row-plan2 .after, .grade-body .row-plan2 .course, .grade-body .row-plan2 .bonus, .grade-body .row-plan2 .li-course3 .num, .grade-body .row-plan2 .equipments li.equip-title .number {
    color: #3a86d3;
}

.grade-body .row-plan2 .price dt {
    border-color: #3a86d3;
}

.grade-body .row-plan3 .cell-plan {
    background: #f8e9ee;
}

.grade-body .row-plan3 .monthly .count, .grade-body .row-plan3 .bonus .count, .grade-body .row-plan3 .equipments li.equip-title, .grade-body .equipments .only-plan3 a:after {
    background: #e8638f;
}

.grade-body .row-plan3 .planname, .grade-body .row-plan3 .after, .grade-body .row-plan3 .course, .grade-body .row-plan3 .bonus, .grade-body .row-plan3 .li-course3 .num, .grade-body .row-plan3 .equipments li.equip-title .number {
    color: #e8638f;
}

.grade-body .row-plan3 .price dt {
    border-color: #e8638f;
}

/* 　equipments
******************************************/
.equipments {
    padding-top: 20px;
}

.equipments li {
    width: 24.4%;
    float: left;
    margin-right: 0.8%;
    margin-bottom: 5px;
    overflow: hidden;
    position: relative;
    border: solid 1px #111;
    border-radius: 3px;
    box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, .2);
}

.equipments li:nth-child(4n) {
    margin-right: 0;
}

.equipments li a, .equipments .img, .equipments li.equip-title {
    height: 100px;
}

.equipments li a {
    overflow: hidden;
    display: block;
    transition: all .2s linear 0s;
}

.equipments li a .img {
    transition: all .2s linear 0s;
}

.equipments li a:hover, .equipments li a:active, .equipments li a:focus {
    text-decoration: none;
    background: #eee;
}

.equipments li a:hover .img, .equipments li a:active .img, .equipments li a:focus .img {
    transform: scale(1.05);
}

.equipments .img, .equipments .name {
    display: block;
    vertical-align: middle;
}

.equipments .img {
    /*width: 42%;float: left;*/
    width: 100%;
    background-size: cover;
    background-position: center top;
}

.equipments .name {
    width: 100%;
    /*float: right;*/
    font-size: 10px;
    line-height: 1.3;
    font-weight: normal;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    background: rgba(0, 0, 0, .5);
}

.equipments .name-inner {
    overflow: hidden;
    display: block;
    padding: 5px;
    font-weight: bold;
}

.equipments .only a:after {
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    background: #eee;
    bottom: -10px;
    right: -10px;
}

.equipments li.equip-title {
    color: #fff;
    overflow: hidden;
    font-size: 12px;
    padding: 30px 10px;
    line-height: 1;
    border-radius: 3px;
    text-align: center;
}

.equipments li.equip-title .number {
    background: #fff;
    border-radius: 30px;
    padding: 0 5px;
    display: inline-block;
    line-height: 1;
    margin-top: 5px;
    text-align: center;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
}

#cboxCurrent, #cboxTitle {
    bottom: 3px;
    font-size: 70%;
    color: #333;
}

#cboxTitle {
    left: -30px;
    text-align: right;
}

.equipments .come {
    font-size: 11px;
    margin-bottom: 2px;
    display: inline-block;
    margin-right: 5px;
}

@media screen and (max-width:640px) {
    .equipments {
        padding-top: 10px;
    }

    .equipments li {
        width: 32.8%;
        margin-right: 0.8%
    }

    .equipments li:nth-child(4n) {
        margin-right: 0.8%;
    }

    .equipments li:nth-child(3n) {
        margin-right: 0;
    }

    .equipments li.equip-title {
        padding-top: 20px;
        text-align: center;
        font-size: 9px;
    }

    .equipments li.equip-title .number {
        font-size: 12px;
    }

    #cboxCurrent, #cboxTitle {
        font-size: 50%;
    }
}

@media screen and (max-width:500px) {
    .equipments li a, .equipments .img, .equipments li.equip-title {
        height: 70px;
    }

    .equipments li {
        background: #000;
    }

    .equipments li a {
        overflow: hidden;
        /*padding: 5px;*/
    }

    .equipments .img {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
    }

    .equipments .name {
        width: 100%;
        color: #fff;
        position: relative;
        z-index: 10;
        font-weight: bold;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 9px;
    }

    .equipments .name:before {}

    .equipments .name-inner {
        padding: 2px;
    }

    .equipments .only a:after {
        bottom: -12px;
        right: -12px;
    }
}

/* 　option
******************************************/

.option-box {
    margin-bottom: 20px;
    display: table;
    width: 100%;
}

.option-title, .option-body {
    display: table-cell;
    vertical-align: middle;
}

.option-title {
    width: 30%;
    background: #049DDE;
    color: #fff;
    margin-right: 2%;
    text-align: center;
    font-size: 24px;
    border: solid 1px #999;
    border-radius: 5px;
}

.option-title .desc {
    font-size: 12px;
    display: block;
}

.option-body {
    width: 70%;
    padding-left: 20px;
}

.option-body .single {
    border: solid 1px #999;
    text-align: center;
    padding: 5px;
    border-radius: 5px;
    position: relative;
}

.option-body .single:last-child {
    margin-right: 0;
}

.option-body .single a {
    display: block;
}

.option-body h6 {
    line-height: 1.2;
}

.option-body .desc {
    font-size: 12px;
    color: #999;
    display: block;
}

.option-body .price {
    font-size: 18px;
}

.option-body .price .num {
    font-size: 30px;
    color: #e4007d;
    line-height: 1;
}

.option-body a {
    text-decoration: none !important;
}

.option-body a img {
    transition: all .2s linear 0s;
}

.option-body a:hover img, .option-body a:active img, .option-body a:focus img {
    transform: scale(1.02);
}

.option-body .more {
    position: absolute;
    right: 24px;
    bottom: 4px;
    z-index: 2;
    font-size: 14px;
    line-height: 1em;
    color: #011e54;
}

.option-body i.fa-arrow-down {
    margin-right: 0;
    transform: rotate(-45deg);
    position: absolute;
    right: 3px;
    bottom: 3px;
    z-index: 2;
}

.option-body .option-price-year {
    display: flex;
    background: #f6f6f6;
    padding: 5px;
    border-radius: 0 0 5px 5px;
}

.option-body .option-price-year>div {
    flex: auto;
    line-height: 1;
}

.option-body .option-price-year dt, .option-body .option-price-year dd {
    display: inline-block;
}

.option-body .option-price-year dt {
    color: #fff;
    padding: 2px 5px 0;
    font-size: 11px;
    border-radius: 30px;
    position: relative;
    top: -1px;
}

.option-body .option-price-year .unit, .option-body .option-price-year .desc {
    font-size: 10px;
}

.option-body .option-price-year .unit {
    position: relative;
    left: -2px;
}

.option-body .option-price-year .desc {
    display: none;
}

.option-body .price-3year dt {
    background: #0fbe7a;
}

.option-body .price-3year .num {
    color: #0fbe7a;
}

.option-body .price-9year dt {
    background: #ffb200;
}

.option-body .price-9year .num {
    color: #ffb200;
}

.option-col3 .single {
    width: 32%;
    float: left;
    margin-right: 2%;
}

.option-col2 .single {
    width: 49%;
    float: left;
    margin-right: 2%;
}

.option-col1 .single {
    width: 100%;
}

.option-maintenance h5 img {
    max-width: 250px;
    width: 80%;
}

.option-maintenance .option-title, .option-maintenance-ev .option-title {
    background: yellow;
    position: relative;
}

.option-maintenance .option-title img {
    position: relative;
    top: -20px;
    left: -20px;
}

.option-maintenance-ev .option-title img {
    top: 0;
    left: 0;
}

.option-record img {
    max-width: 300px;
}

.option-maintenance-ev h5 img {
    width: 45%;
    float: left;
}

.option-smoke img, .option-monitor img {
    width: 30%;
    float: left;
}

.option-maintenance-ev .option-price {
    width: 53%;
    float: right;
    padding-top: 12%;
}

.option-smoke .option-price, .option-monitor .option-price {
    width: 68%;
    float: right;
    padding-top: 7%;
}

.option-kaeseru .option-title {
    background: #d8e7b2;
}

.option-kaeseru .option-title img {
    /*
position: relative;
top: -20px;
left: -20px;
*/
}

.option-kaeseru .option-price {
    padding-top: 20px;
    padding-bottom: 10px !important;
}

.option-coating .option-heading {
    padding: 5px 10px 20px 10px;
}

.option-kaeseru .option-heading h6, .option-kaeseru .option-heading p {
    color: #333;
}

.option-kaeseru .option-heading h6 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
}

.option-kaeseru .option-heading h6>span {
    display: block;
    margin: 0 0 10px 0;
    font-size: 18px !important;
}

.option-kaeseru .option-heading h6 .green-txt {
    color: #009b63;
}

.option-kaeseru .option-heading h6 .green-bg {
    background: #009b63;
    border-radius: 6px;
    margin: 0 5px;
    padding: 5px 10px;
    color: #f8d734;
}

.option-kaeseru .option-heading h6 .green-bg i {
    font-style: normal;
    color: #fff;
}

.option-kaeseru .option-heading p {
    display: block;
    background: #f8d734;
    margin: 10px 0 0 0;
    padding: 5px 20px;
    line-height: 1.3em;
}

.option-kaeseru .option-heading p .blue-txt {
    color: #3983c9;
}

.option-kaeseru .option-heading p .red-txt {
    color: #d92247;
}

.option-kaeseru .price {
    margin: 10px 0 0 0;
}

@media screen and (max-width:1000px) {
    .option-box {
        margin-bottom: 10px;
    }

    .option-title {
        font-size: 18px;
    }

    .option-body {
        padding-left: 10px;
    }

    .option-body .desc {
        font-size: 10px;
    }

    .option-maintenance-ev .option-price, .option-smoke .option-price, .option-monitor .option-price {
        padding-top: 10px;
    }

    .option-coating h6 {
        font-size: 14px;
    }
}

@media screen and (max-width:800px) {
    .option-coating .single {
        width: 100%;
        float: none;
        margin-right: 0;
        margin-bottom: 5px;
    }

    .option-coating img {
        width: 30%;
        float: left;
    }

    .option-coating .option-price {
        width: 68%;
        float: right;
    }

    .option-coating .option-heading {
        padding-top: 0;
    }
}

@media screen and (max-width:640px) {
    .option-box {
        display: block;
    }

    .option-title, .option-body {
        display: block;
        width: 100%;
        float: none;
        padding-left: 0;
    }

    .option-title {
        margin-bottom: 10px;
        line-height: 1.2;
        padding: 10px;
    }

    .option-body .price .unit {
        font-size: 12px;
    }

    .option-maintenance .option-title img {
        max-width: 300px;
    }

    .option-maintenance-ev h5 img, .option-maintenance-ev .option-price {
        width: 100%;
        float: none;
        padding: 0;
    }

    .option-maintenance-ev h6, .option-smoke h6, .option-monitor h6 {
        font-size: 14px;
    }

    .option-coating h6 {
        margin: 10px 0;
    }

    .option-body .option-price-year {
        padding: 3px;
    }

    .option-body .option-price-year dt {
        font-size: 9px;
    }

    .option-kaeseru .option-title img {
        max-width: 300px;
    }
}

@media screen and (max-width:500px) {
    .option-coating img {
        width: 35%;
    }

    .option-coating .option-price {
        width: 65%;
    }

    .option-body .price .num {
        font-size: 24px;
        letter-spacing: 0;
        margin-right: -3px;
    }

    .option-smoke h6, .option-monitor h6 {
        font-size: 12px;
    }

    .option-coating h6 {
        font-size: 12px;
        margin: 1px 0;
    }

    .option-body a:focus {
        outline: 0;
    }

    .option-kaeseru .option-price {
        padding-top: 10px;
        padding-bottom: 0px !important;
    }

    .option-coating .option-heading {
        padding: 5px 10px 20px 10px;
    }

    .option-kaeseru .option-heading h6, .option-kaeseru .option-heading p {
        color: #333;
    }

    .option-kaeseru .option-heading h6>span {
        display: block;
        margin: 0 0 10px 0;
        font-size: 16px !important;
    }

    .option-kaeseru .option-heading p {
        font-size: 12px;
    }

    .option-body .more {
        right: 22px;
        bottom: 5px;
        font-size: 12px;
    }
}

/* 　.model-desc
******************************************/
.model-desc {
    background: #eee no-repeat left center;
    background-size: contain;
    position: relative;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .2);
    border-top: solid 1px #ddd;
}

.model-desc .text {
    float: right;
    width: 50%;
    font-size: 90%;
    background: #eee;
    color: #000;
    padding: 20px;
}

.model-desc .text strong {
    color: #049DDE;
}

@media screen and (min-width:1600px) {
    .model-desc {
        background-size: 50%;
    }
}

@media screen and (max-width:1000px) {
    .model-desc {
        background-size: contain;
        padding-top: 40%;
        background-position: center top;
    }

    .model-desc .text {
        float: none;
        width: 100%;
        font-size: 80%;
    }
}

/* 　.modal-option
******************************************/
#modal-maintenance .modal-body {
    padding: 0;
}

.modal-option .modal-body .modal-main {
    display: flex;
    align-items: center;
    gap: 60px;
    background: #0f1012;
    margin:0 0 40px 0;
    padding: 0 60px 60px 60px;
}

.modal-option .modal-body .modal-main .main-title {
    width: 60%;
    margin:60px 0 0 0;
}

.modal-option .modal-body .modal-main h5 {
    font-size: 30px;
    color: #fff;
}

.modal-option .modal-body .modal-main p {
    margin:15px 0 0 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    color: #fff;
}

.modal-option .modal-body .modal-main picture {
    display: flex;
    justify-content: center;
    width: 40%;
}

.modal-option .modal-body .modal-main picture img {
    max-width: 300px;
    margin: 0 auto;
}


.modal-option .modal-body .box {
    margin-bottom: 20px;
    font-size: 14px;
}

.modal-option .modal-body img {
    width: auto;
    max-width: 100%;
}

.modal-option .modal-body h6 {
    border-bottom: solid 1px #999;
    margin: 10px 0;
    font-size: 20px;
}

.modal-option .modal-body p {
    text-align: left;
}

.modal-option .modal-body .modal-title {
    font-weight: bold;
    font-size: 16px;
    border-bottom: 0;
    text-align: center;
    background: #eee;
    padding: 5px 10px;
}

.modal-option .modal-body .col3 li {
    text-align: center;
}

.modal-option .modal-body dd {
    margin-bottom: 10px;
}

/* 　.discount
******************************************/
.plan-body-title {
    text-align: center;
    padding-top: 30px;
    margin-bottom: 10px;
}

.plan-body-title img {
    max-width: 800px;
}

.grade-title {
    position: relative;
}

.grade-title .grade-title-discount {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 24px;
    line-height: 1;
    color: #110064;
    border: solid 1px #ff0;
    background: rgba(255, 240, 0, .8) no-repeat;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .2);
    width: 300px;
}

.grade-title .grade-title-discount:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #ff0;
}

.grade-title .grade-title-discount .now {
    font-size: 11px;
    position: absolute;
    left: 0;
    top: -15px;
    background: yellow;
    color: #110064;
    padding: 3px 10px;
}

.grade-title .grade-title-discount .num {
    font-size: 40px;
    line-height: 1;
    color: #ed1c8f;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
}

.grade-title .grade-title-discount .body {
    padding: 5px;
    display: block;
    overflow: visible;
}

.grade-title .grade-title-discount .body img:first-child {
    margin-bottom: -3px;
}

.grade-title .grade-title-discount .body .text {
    width: 70%;
    float: left;
    text-align: center;
}

.grade-title .grade-title-discount .discount-img {
    width: 30%;
    float: right;
}

.grade-title .grade-title-discount .after {
    clear: both;
    font-size: 16px;
    display: block;
    text-align: center;
    border-top: solid 1px #19ccff;
    padding: 7px 5px 3px;
    background: rgba(0, 0, 0, .1);
    color: yellow;
}

/*2021冬*/
.grade-title .grade-title-discount {
    color: #fff;
    border: solid 1px #0e3255;
    background: #ff7200 no-repeat;
}

.grade-title .grade-title-discount:after {
    border-top: 15px solid #0e3255;
}

.grade-title .grade-title-discount .now {
    background: #d2180a;
    color: #fff;
    font-size: 18px;
    margin-left: -1px;
}

.grade-title .grade-title-discount .num {
    color: #ebd478;
    text-shadow: none;
    font-weight: bold;
}

@media screen and (max-width:640px) {
    .plan-body-title {
        padding-top: 10px;
        margin-bottom: 0;
    }

    .grade-title {
        padding: 0 0 60px 0;
    }

    body.model .grade-title {
        padding: 10px 0;
    }

    .grade-title .grade-title-discount {
        font-size: 18px;
        bottom: 10px;
        left: 10px;
        width: 250px;
    }

    .grade-title .grade-title-discount .now {
        font-size: 12px;
    }

    .grade-title .grade-title-discount .num {
        font-size: 28px;
    }

    .grade-title .grade-title-discount .body img:first-child {
        margin-bottom: 0;
    }

    .grade-title .grade-title-discount .body .text {
        font-size: 10px;
    }
}

@media screen and (max-width:480px) {
    .grade-title .grade-title-discount {
        font-size: 14px;
        bottom: 5px;
        left: 5px;
        width: 150px;
    }

    .grade-title .grade-title-discount .num {
        font-size: 20px;
    }

    .grade-title .grade-title-discount .after {
        font-size: 10px;
    }
}

.grade-title .grade-title-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 280px;
}

@media screen and (max-width:640px) {
    .grade-title .grade-title-badge {
        bottom: 10px;
        right: 10px;
        width: 180px;
    }
}



.grade-body .row-plan1 .bonus, .grade-body .row-plan2 .bonus, .grade-body .row-plan3 .bonus {
    color: #666;
}

.grade-body .row-plan1 .price dt {
    background: #f29f00;
}

.grade-body .row-plan2 .price dt {
    background: #3a86d3;
}

.grade-body .row-plan3 .price dt {
    background: #e8638f;
}

.grade-body .row-plan1 .course, .grade-body .row-plan2 .course, .grade-body .row-plan3 .course {
    color: #fff;
}

.limited-discount {
    background: #053953;
    color: #fff;
}

.limited-discount .limited-body {
    vertical-align: middle;
}

.limited-discount .limited-body .text {
    display: inline-block;
    float: left;
    padding: 2px;
}

.limited-discount .limited-body .model {
    max-width: 90px;
    float: left;
}

.limited-discount .limited-body .sale {
    max-width: 100px;
    display: block;
    position: relative;
    margin-bottom: -10px;
}

.limited-discount .limited-month {
    margin-top: 0;
    vertical-align: middle;
    color: #fff;
    padding: 16px 5px;
    background: #ba0000;
}

.limited-discount .limited-body .num {
    letter-spacing: 0;
    color: #f0d56b;
}

.limited-discount .limited-body .btn {
    float: right;
    padding: 15px;
    margin-top: 2px;
    color: #fff;
    background: rgb(201, 0, 0);
    background: linear-gradient(180deg, rgba(201, 0, 0, 1) 0%, rgba(186, 0, 0, 1) 100%);
}

.limited-discount .limited-body .btn:hover, .limited-discount .limited-body .btn:active, .limited-discount .limited-body .btn:focus {
    background: rgb(201, 0, 0);
    background: linear-gradient(0deg, rgba(201, 0, 0, 1) 0%, rgba(186, 0, 0, 1) 100%);
}

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

@media screen and (max-width:730px) {
    .limited-discount .limited-body img {
        width: 100%;
        float: none;
        display: block;
        text-align: center;
    }

    .limited-discount .limited-month {
        width: 20%;
        float: left;
        font-size: 14px;
    }

    .limited-discount .limited-body {
        width: 80%;
        float: right;
        padding: 0;
    }

    .limited-discount .limited-body .text {
        padding-left: 10px;
        padding-bottom: 5px;
        display: block;
        width: 100%;
    }

    .limited-discount .limited-body .sale {
        margin-bottom: 0;
    }

    .limited-discount .limited-body .model {
        width: 18%;
    }

    .limited-discount .limited-body .right {
        width: 78%;
        float: right;
        display: block;
    }
}

@media screen and (max-width:480px) {
    .limited-discount .limited-body .model {
        position: absolute;
        top: 5px;
        right: 0;
    }

    .limited-discount .limited-body .right {
        width: 100%;
    }
}

.mainimg h1 {
    position: relative;
}

.mainimg.has-sale h1 {
    position: relative;
}

.mainimg-sale {
    display: block;
    max-width: 400px;
    position: absolute;
    right: 0;
    bottom: 10px;
    background: #fff;
}

.mainimg-sale a {
    transition: all .2s linear 0s;
    display: block;
}

@media screen and (max-width:1080px) {
    .mainimg.has-sale h1 {
        padding-bottom: 50px;
    }

    .mainimg-sale {
        right: 30px;
    }
}

@media screen and (max-width:810px) {
    .mainimg.has-sale h1 {
        padding-bottom: 0;
    }

    .mainimg-sale {
        position: static;
        margin: auto;
        max-width: 600px;
        padding: 10px;
        background-color: transparent;
    }

    .mainimg.has-sale .header-label {
        margin-top: 0;
        display: none;
    }
}

/* sale
********************/
.grade-body .cell-plan {
    overflow: visible;
}

.badge-limited {
    display: none;
    position: absolute;
    left: -10px;
    top: -10px;
    animation-duration: 2s;
    max-width: 100px;
}

@media screen and (max-width:480px) {
    .badge-limited {
        max-width: 80px;
    }
}

/* EV
********************/
.plan-ev .nav-subsidy {
    border: 0;
}

.plan-ev .nav-subsidy li {
    width: 49.5%;
    float: left;
}

.plan-ev .nav-subsidy li:first-child {
    margin-right: 1%;
}

.plan-ev .nav-subsidy li a {
    border-radius: 10px 10px 0 0;
    border: solid 1px #ddd;
    display: block;
    padding: 2px 10px;
    text-align: center;
    background: #eee;
    border-bottom: 0 !important;
    background: rgb(245, 245, 245);
    background: linear-gradient(180deg, rgba(245, 245, 245, 1) 0%, rgba(219, 219, 219, 1) 100%);
}

.plan-ev .nav-subsidy li.nav-subsidy1.active a {
    border-color: #156dff;
    background: rgb(0, 35, 212);
    background: linear-gradient(180deg, rgba(0, 35, 212, 1) 0%, rgba(0, 27, 166, 1) 100%);
}

.plan-ev .nav-subsidy li.nav-subsidy2.active a {
    border-color: #0078d4;
    background: rgb(0, 120, 212);
    background: linear-gradient(180deg, rgba(0, 120, 212, 1) 0%, rgba(0, 87, 215, 1) 100%);
}

.plan-ev .nav-subsidy li img {
    max-width: 250px;
    filter: grayscale(100%);
    opacity: 1 !important;
}

.plan-ev .nav-subsidy li.active img {
    filter: grayscale(0%);
}

.plan-ev .cell-plan .come {
    margin-bottom: 0;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    margin-top: 5px;
    font-weight: normal;
    color: #666;
}

.plan-ev .cell-course .come {
    margin-bottom: 0;
    font-size: 10px;
    line-height: 1.2;
    text-align: right;
    font-weight: normal;
    color: #666;
}

.plan-ev .tab-subsidy1 .come-blue {
    margin-bottom: 0;
    color: #156dff;
    text-align: right;
    font-size: 12px;
}

.plan-ev .tab-subsidy1 .course-price {
    border: solid 5px #156dff;
}

.plan-ev .tab-subsidy2 .course-price {
    border: solid 5px #0078d4;
}

.plan-ev #year5 .grade-body .course-price .price .monthly {
    height: 90px;
}

.plan-ev #year5 .grade-body .course-price li:first-child .monthly {
    height: 123px;
}

/*
.plan-ev .grade-title .grade-title-discount {
background-color: transparent;
border: 0;
text-align: center;
box-shadow: none;
}
*/

.plan-ev .grade-title .grade-title-discount {
    display: none !important;
}

.plan-ev .grade-title .grade-title-discount:after {
    border-top-color: #156dff;
}

.plan-ev .grade-title .grade-title-discount .body .text {
    width: 100%;
    background: #156dff;
    padding: 10px 5px;
}

.plan-ev .grade-title .grade-title-discount .num {
    color: #ff0;
}

.plan-ev .course-price .price .monthly .old {
    margin-bottom: 2px;
}

.plan-ev .tab-subsidy1 .course-price .price .monthly .new .ribbon {
    background: #156dff;
    color: #ff0;
}

.plan-ev .tab-subsidy1 .course-price .price .monthly .new .ribbon:before {
    border-right-color: #00178c;
}

.plan-ev .tab-subsidy1 .course-price .price .monthly .new .ribbon:after {
    border-left-color: #00178c;
}

.plan-ev .tab-subsidy2 .course-price .price .monthly .new .ribbon {
    background: #0078d4;
    color: #ff0;
}

.plan-ev .tab-subsidy2 .course-price .price .monthly .new .ribbon:before {
    border-right-color: #005ba0;
}

.plan-ev .tab-subsidy2 .course-price .price .monthly .new .ribbon:after {
    border-left-color: #005ba0;
}

.plan-ev .grade-body .course-price .li-course1 .price .monthly .old, .plan-ev .grade-body .course-price .li-course2 .price .monthly .old {
    visibility: hidden;
}

.plan-ev .grade-body .course-price .price .bonus {
    height: 55px;
}

.plan-ev .grade-body .course-price .li-course0 .price .bonus {
    height: 55px;
    padding-top: 10px;
}

.plan-ev .grade-body .course-price .li-course3 .price .bonus {
    padding-top: 20px;
}

.plan-ev .grade-body .course-price .price .bonus .old {
    font-size: 12px;
    color: #aaa;
    display: block;
}

.plan-ev .grade-body .course-price .price .bonus .old .num {
    text-decoration: line-through;
    font-size: 12px;
    color: #999;
}

.plan-ev .grade-body .course-price .price .bonus .old i {
    color: #f2005c;
    margin-right: 0;
}

.plan-ev .grade-body .course-price .price .bonus .new {
    font-size: 14px;
    display: inline-block;
}

.plan-ev .grade-body .course-price .price .bonus .new .num {
    font-size: 14px;
    display: inline-block;
    margin-right: 2px;
}

@media screen and (max-width:640px) {
    .plan-ev .grade-title .grade-title-discount .body .text {
        padding: 5px;
    }

    .plan-ev .course-price .price .monthly .new .ribbon {
        font-size: 11px;
    }

    .plan-ev #year5 .grade-body .course-price .price .monthly {
        height: 85px;
    }

    .plan-ev #year5 .grade-body .course-price li:first-child .monthly {
        height: 118px;
    }

    .plan-ev .grade-title .grade-title-discount .body img:first-child {
        margin-bottom: -2px;
    }

    .plan-ev .tab-subsidy1 .course-price+p {
        font-size: 10px;
    }

    .plan-ev .grade-body .course-price .price .bonus {
        padding-top: 10px;
    }

    .plan-ev .grade-body .course-price .li-course0 .price .bonus {
        height: 55px;
        padding-top: 10px;
    }
}

@media screen and (max-width:500px) {
    .plan-ev #year5 .grade-body .course-price .price .monthly {
        height: 70px;
    }

    .plan-ev #year5 .grade-body .course-price li:first-child .monthly {
        height: 92px;
        padding-top: 27px;
    }

    .plan-ev .grade-body .course-price .price .monthly .old i {
        display: inline-block;
    }
}

/* year9
********************/

.outer-year9 {
    background: #FFF1D2;
    padding: 30px;
    border-radius: 10px;
    margin-top: 30px;
}

.merit-year9 h2 {
    display: block;
    margin: 0 auto 20px;
    text-align: center;
}

.merit-year9 h2 img {
    max-width: 600px;
}

.merit-year9 .list-all {
    display: flex;
}

.merit-year9 .single {
    width: 32%;
    margin-right: 2%;
}

.merit-year9 .single:last-child {
    margin-right: 0;
}

.merit-year9 .single p {
    text-align: center;
    background: #FF9000;
    width: 100%;
    padding: 10px 5px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
}

.merit-year9 .single p:before {
    border-right: solid 20px #bf6900;
}

.merit-year9 .single p:after {
    border-left: solid 20px #bf6900;
}

@media screen and (max-width:900px) {
    .merit-year9 .single p {
        font-size: 12px;
    }
}

@media screen and (max-width:640px) {
    .outer-year9 {
        padding: 20px 10px;
        margin-top: 20px;
    }

    .merit-year9 .single p {
        font-size: 12px;
        padding: 5px;
        line-height: 1.4;
    }

    /*.merit-year9 .list-all{display: block;}
.merit-year9 h2{margin-bottom: 10px;}
.merit-year9 .single{width: 100%;margin-right: 0;overflow: hidden;margin-bottom: 10px;}
.merit-year9 .single .img{width: 35%;float: left;}
.merit-year9 .single p{width: 62%;float: right;margin-top: 20px;}*/
}

.compare-year9 {
    margin: 20px auto;
    text-align: center;
    margin: auto;
}

.compare-year9 h2 {
    padding: 10px;
    display: block;
}

.compare-year9 h2 .num {
    font-size: 36px;
    line-height: 1;
    display: inline-block;
    margin: 0 2px;
}

.compare-year9 h2 .num5 {
    color: #00a0e9;
}

.compare-year9 h2 .num9 {
    color: #ffb200;
}

.table-year9 {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    font-weight: bold;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .2);
    border: solid 3px #111;
}

.table-year9, .table-year9 tr, .table-year9 th, .table-year9 td {
    border-color: #111 !important;
    vertical-align: middle;
}

.table-year9 th, .table-year9 td {
    padding: 5px;
}

.table-year9 thead th:nth-child(1) {
    width: 30%;
}

.table-year9 thead th:nth-child(2), .table-year9 thead th:nth-child(3) {
    width: 35%;
    border-left: solid 1px #ddd;
}

.table-year9 thead {
    color: #fff;
}

.table-year9 thead th {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
}

.table-year9 thead .num {
    font-size: 24px;
}

.table-year9 thead .cell-year5 {
    background: #00a0e9;
}

.table-year9 thead .cell-year9 {
    background: #ffb200;
}

.table-year9 tbody th {
    background: #f9f9f9;
    color: #333;
    font-size: 14px;
}

.table-year9 tbody th i {
    display: block;
    text-align: center;
    color: #ccc;
    font-size: 16px;
    margin: 0;
}

.table-year9 tbody .come {
    color: #111;
}

.table-year9 tbody .cell-year5 {
    color: #00a0e9;
    background: #e8f4f9;
}

.table-year9 tbody .cell-year9 {
    color: #ff9d00;
    background: #fff6e5;
}

.table-year9 tbody .cell-check {
    background: #ffd6e8;
    color: #ff0084;
}

.table-year9 tbody .cell-option {
    background: #fff;
    color: #111;
}

@media screen and (max-width:640px) {
    .compare-year9 h2 {
        font-size: 14px;
    }

    .compare-year9 h2 .num {
        font-size: 24px;
    }

    .table-year9 tbody th {
        font-size: 12px;
    }

    .table-year9 tbody td {
        border-left: solid 1px #ddd;
    }
}

.new-used {
    position: absolute;
    bottom: 30px;
    right: 20px;
    width: 30%;
}

.new-used .btn {
    border-radius: 10px;
    position: relative;
    justify-content: center;
    display: flex;
    align-items: center;
    box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, .3);
    transition: all .1s linear 0s;
    padding: 0;
    color: #fff;
    border: solid 2px #fff;
}

.new-used .btn:hover {
    transform: scale(1.03);
}

.new-used .btn i {
    font-size: 24px;
    height: 100%;
    position: absolute;
    left: 0;
    display: inline-block;
    display: flex;
    align-items: center;
    padding: 10px 10px 10px 15px;
    border-radius: 10px 0 0 10px;
    margin: 0;
}

.new-used .btn .img {
    max-width: 100px;
    opacity: 1 !important;
}

.new-used .btn .text {
    font-size: 14px;
    line-height: 1.4;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
    padding: 10px;
}

.new-used .btn .model {
    display: block;
    font-size: 18px;
    color: #ff0;
}

.new-used .btn {
    background: #29c59d;
    background: linear-gradient(0deg, rgba(11, 159, 121, 1) 0%, rgba(41, 197, 157, 1) 100%);
}

.new-used .btn i {
    background: #058462;
}

.used .new-used .btn {
    background: #3a86d3;
    background: linear-gradient(0deg, rgba(58, 134, 211, 1) 0%, rgba(0, 187, 230, 1) 100%);
}

.used .new-used .btn i {
    background: #0d5aa8;
}

@media screen and (max-width:640px) {
    .new-used {
        position: static;
        display: block;
        padding: 10px 10px 20px;
        width: 100%;
    }

    .new-used .btn {
        width: 100%;
        height: auto;
    }

    .new-used .btn .img {
        position: static;
        width: 80px;
    }

    .new-used .btn .text {
        font-size: 14px;
        padding: 20px 10px;
    }

    .new-used .btn .model {
        font-size: 14px;
        display: inline-block;
    }
}