@charset "UTF-8";

#eJaLangTeacherTraining #contents {
    font-size: 16px;
    margin: 0;
    padding: 0;
    color: #555;
    line-height: 1.5;
}
/*** adjust styles in common ***/
@media(min-width: 769px) {
    #header.fixed {
        height: 51px;
    }
}
#contents {
    margin: 0 auto;
    width: 100%;
}
.article p {
    font-size: 16px;
    margin-bottom: 2rem;
    line-height: 1.75;
}
/* .br768 {
    display: none;
} */
.bg_gray {
    background-color: #eee;
}
.text_red {
    color: #f00;
}
/* .text_green {
    color: #1ea84a;
} */
.mv_img {
    background-image: url(/wp-content/themes/arc_test/images/ja-lang-teacher-training/e-ja-lang-teacher-training-mv-s.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 2.5rem 0;
    position: relative;
    margin-bottom: 3rem;
    border-top: 7px solid #999;
}
.mv_img::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 66%)
}
.mv_text {
    text-align: center;
}
.mv_h2 {
    font-size: 1.375rem;
    color: #fff;
    text-shadow: 1px 1px 3px #336;
    font-weight: bold;
    position: relative;
}
.mv_h2_lead {
    color: #fff;
    text-shadow: 1px 1px 3px #336;
    font-weight: bold;
    position: relative;
    margin-bottom: 0;
}
.mv_h2_after {
    color: #fff;
    text-shadow: 1px 1px 3px #336;
    position: relative;
    font-size: 0.75rem;
}
.article_content {
    padding: 0 1rem;
}
.title_h3 {
    font-size: 1.25rem;
    border-left: 0.75rem double #1ea84a;
    margin: 3rem 0;
    padding: 1rem;
    color: #333;
    background-color: #f6f6f6;
}
.title_h3::before {
    content: "\f0f3";
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    margin-right: 1rem;
    color: #1ea84a;
    transform: rotate(-7deg);
    display: inline-block;
}
.title_h4 {
    color: #333;
    padding: 1rem;
    margin: 3rem 0;
    border-top: 0.25rem solid #1ea84a;
    border-bottom: 1px solid #ccc;
    font-size: 1.25rem;
}
.content_inside {
    margin: auto;
}
.surrounded_gray {
    padding: 1rem;
    background-color: #eee;
    font-size: 0.875rem;
    display: inline-block;
}
.surrounded_wrapper {
    position: relative;
}
.surrounded_border_green {
    padding: 1rem 1.5rem;
    border: 2px solid #1ea84a;
    display: inline-block;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
}
.surrounded_border_gray {
    padding: 1rem 1.5rem;
    border: 2px solid #999;
    display: inline-block;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
}
.surrounded_border_gray_n {
    padding: 1rem 1.5rem;
    border: 1px solid #ccc;
    margin-bottom: 2rem;
    border-radius: 0.25rem;
}
.arrow_down::after {
    content: "\f0ab";
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    display: block;
    position: absolute;
    top: calc(100% - 2rem);
    left: 70px;
    line-height: 1;
    font-size: 2rem;
    color: #1ea84a;
}
.surrounded_border_orange {
    padding: 1rem 1.5rem;
    border: 7px solid #f90;
    border-radius: 1.5rem;
}
.surrounded_border_dotted_green {
    padding: 3rem 1.5rem 1rem;
    border: 5px dotted #6c9;/*#1ea84a*/;
    border-radius: 0 2rem 0 2rem;
    position: relative;
    max-width: 240px;
}
.small_header {
    color: #000;
    font-weight: bold;
    font-size: 18px !important;
    padding-bottom: 0.25rem;
    margin-bottom: 0.75rem !important;
    border-bottom: 7px solid #ccc;
}
.small_header.not_bold {
    font-weight: inherit;
}
.small_header.extra {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0 !important;
}
p.annotation {
    font-size: 0.75rem;
}
p.annotation-lg {
    font-size: 0.875rem;
}
/* .conclusion {
    background-color: #fff !important;
    border-top: 3px solid #999;
} */
p.badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid #0071be;
    background-color: #0071be;
    border-radius: 1.5rem;
    margin-bottom: 0.5rem;
    color: #fff;
    font-size: 0.875rem;
    line-height: 1;
}
.badge2 {
    position: absolute;
    top: -5px;
    left: -5px;
    background-color: #1ea84a;
    color: #fff;
    padding: 0.5rem;
    border-radius: 0 0 2rem 0;
}
.badge3 {
    background-color: #0071be;
    color: #fff;
    border-radius: 0.25rem;
    display: inline-block;
    vertical-align: top;
    padding: 0.5rem 1rem;
}
.common_table {
    margin-bottom: 2rem;
    width: auto;
    max-width: 100%;
    border: 3px solid #eee;
}
.common_table tr:nth-child(even) {
    background-color: #f6f6f6;
}
.common_table.plus_span tr:nth-child(even) {
    background-color: inherit;
}
.common_table tr th,
.common_table tr td {
    padding: 0.75rem 1rem;
    text-align: center;
    border-left: 1px solid #eee;
}
.common_table.plus_span tr th,
.common_table.plus_span tr td {
    border: 1px solid #eee;
}
.common_table tr th:first-child {
    border-left: 1px solid #eee;
}
/* .desc_in_table {
    width: 40%;
    text-align: left !important;
} */
.flex {
    display: flex;
}
.flex.flex-wrap {
    flex-wrap: wrap;
}
.flex.justify-content-evenly {
    justify-content: space-evenly;
}
.flex.justify-content-between {
    justify-content: space-between;
}
.flex.align-items-center {
    align-items: center;
}
.flex_l {
    width: 400px;
    max-width: 100%;
}
.flex_r {
    width: 400px;
    max-width: 100%;
    padding-left: 2rem;
    border-left: 7px dotted #eee;
}
.btn0 {
    padding: 1rem 1.5rem;
    color: #fff !important;
    background-color: #f60;
    border: 1px solid #f60;
    border-radius: 0.5rem;
    display: inline-block;
}
.btn0:hover {
    color: #f60 !important;
    background-color: #fff;
    text-decoration: none;
    transition: all 0.5s 0s ease;
}
.btn1 {
    padding: 1rem 1.5rem;
    color: #fff !important;
    background-color: #0071bd;
    border: 1px solid #0071bd;
    border-radius: 0.5rem;
    display: inline-block;
}
.btn1:hover {
    color: #0071bd !important;
    background-color: #fff;
    text-decoration: none;
    transition: all 0.5s 0s ease;
}
/* .attention_border {
    border: 5px solid #ccc;
    padding: 1rem;
    border-radius: 0.5rem;
} */
/* .point_content {
    width: 100%;
    margin-bottom: 0;
} */
.recommend_point {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: calc(-3rem - 71px / 2);
}
.each_point {
    width: 142px;
    height: 142px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.9);
    border: 3px solid #1ea84a;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    padding: 1rem 0;
}
.point_num {
    color: #1ea84a;
    font-weight: bold;
    font-size: 1.25rem;
    margin: 0;
    display: block;
}
.point_catch {
    color: #1ea84a;
    font-size: 0.875rem;
    display: block;
    margin-top: 0.25rem;
}
.point_catch::after {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    display: block;
    margin-top: 0.25rem;
}
.check_icon::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    margin-right: 0.5rem;
    color: #1ea84a;
    margin-left: -30px;
}
.check_square_icon::before {
    content: "\f14a";
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    margin-right: 0.5rem;
    color: #1ea84a;
}
.question {
    padding: 0.5rem 0;
}
.question::before {
    content: "Q";
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1.75;
    color: #fff;
    background-color: #369;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    margin-right: 0.5rem;
}
.answer {
    padding: 0.5rem 0;
}
.answer::before {
    content: "A";
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5;
    color: #fff;
    background-color: #f60;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    margin-right: 0.5rem;
}
@media(min-width: 576px) {
    .mv_h2 {
        font-size: 2rem;
        padding: 1rem 0;
    }
}

@media(min-width: 768px) {
    /* .br768 {
        display: block;
    } */
    /* .d-md-none {
        display: none;
    } */
    .mv_img {
        background-image: url(/wp-content/themes/arc_test/images/ja-lang-teacher-training/e-ja-lang-teacher-training-mv.jpg);
        padding: 4rem 0;
    }
    .mv_h2 {
        font-size: 2.5rem;
        padding-top: 1.5rem;
    }
    .mv_h2_lead {
        font-size: 1.25rem;
    }
    .mv_h2_after {
        font-size: 1.125rem;
    }
    /* .point_content {
        width: calc(100% - 300px - 1rem);
        margin-right: 1rem;
    } */
    .content_inside {
        padding: 0 2rem;
    }
    .title_h3 {
        font-size: 1.375rem;
    }
    /* .flex_content1 {
        width: calc(100% - 250px - 40px);
    } */
}
@media(min-width: 992px) {
    .mv_h2 {
        font-size: 3rem;
    }
    .mv_h2_lead {
        font-size: 1.5rem;
    }
    .mv_h2_after {
        font-size: 1.25rem;
    }
    .content_inside {
        padding: 0 3rem;
    }
    .title_h3 {
        font-size: 1.5rem;
    }
    .title_h4 {
        font-size: 1.375rem;
    }
    .badge2 {
        font-size: 1.25rem;
    }
}
@media(min-width: 1037px) {
    .recommend_point {
        margin-top: calc(-3rem - 90px / 2);
        margin-left: -10px;
        margin-right: -10px;
    }
    .each_point {
        width: 180px;
        height: 180px;
        border: 5px solid #1ea84a;
    }
    .point_num {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    .point_catch {
        font-size: 1.125rem;
    }
    .point_catch::after {
        margin-top: 0.5rem;
    }
}
@media(min-width: 1200px) {
    .mv_h2 {
        font-size: 3.75rem;
    }
    .mv_h2_lead {
        font-size: 1.75rem;
    }
    .title_h3 {
        font-size: 1.75rem;
    }
    .title_h4 {
        font-size: 1.5rem;
    }
    .mx-n4 {
        margin-left: -4rem;
        margin-right: -4rem;
    }
}