@charset "utf-8";

h3 {
    padding: 0;
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック", "ヒラギノ角ゴ Pro W3", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
}
.h2Main {
    display: block;
    font-size: 2.4rem;
    font-size: max(2.4rem, min(5.4vw, 3.8rem));
    font-weight: 900;
    line-height: 1.3;
    -webkit-font-feature-settings: "halt";
    font-feature-settings: "halt";
    font-family: YakuHanMP, 'Noto Serif JP', serif;
}

.h3Main {
    display: block;
    font-size: 2rem;
    font-size: max(1.8rem, min(5.333vw, 2.4rem));
    font-weight: 700;
    line-height: 1.3;
    -webkit-font-feature-settings: "halt";
    font-feature-settings: "halt";
    font-family: YakuHanJP, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'YuGothic', 'Yu Gothic', sans-serif;
}
.featuresBox_ttl {
    margin-bottom: min(4.667vw, 25px);
}
.featuresCont_box p {
    margin-bottom: 20px;
}
@media screen and (min-width: 835px) {
    .h2Main {
        font-size: 4.2rem;
    }
    .h3Main {
        font-size: 2.8rem;
    }
}


/* Mainview
----------------------------------------- */
.mainView {
    position: relative;
    padding: 10px 13px 12px;
    padding: min(2.667vw,13px) min(3.467vw,17px) min(3.2vw,15px);
    background-color: #fff9eb;
}
.mainView_txt {
    margin-bottom: 9px;
    margin-bottom: min(2.4vw,12px);
}
.mainViewTxt_sub {
    margin-bottom: 3px;
    margin-bottom: min(.8vw,4px);
    color: #d11717;
    font: 700 1.9rem/1.2 YakuHanMP, 'Noto Serif JP', serif;
    font-size: min(5.067vw,2.4rem);
}
.mainViewTxt_main {
    margin-bottom: 0;
    font: 700 3rem/1.2 'YuGothic', 'Yu Gothic', YakuHanJP, 'Noto Sans JP', sans-serif;
    font-size: min(8vw,3.8rem);
}
.mainView_movie {
    margin: 0 auto;
    width: 210px;
    width: min(56vw,269px);
    height: 118px;
    height: min(31.467vw,151px);
}
.mainView video {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #908D85;
    background-color: #908D85;
}
@media screen and (min-width: 700px){
    .mainView {
        display: flex;
        justify-content: center;
        padding-top: 35px;
        padding-top: min(3.5vw,35px);
        height: 310px;
        height: min(31vw,310px);
    }
    .mainView_txt {
        flex-shrink: 0;
        margin-left: auto;
    }
    .mainViewTxt_sub {
        margin-bottom: 14px;
        margin-bottom: min(1.4vw,14px);
        font-size: 2.9rem;
        font-size: min(2.9vw,2.9rem);
    }
    .mainViewTxt_main {
        font-size: 5rem;
        font-size: min(5vw,5rem);
    }
    .mainView_movie {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin-left: 49px;
        margin-left: min(4.9vw,49px);
        width: 400px;
        width: min(40vw,400px);
        height: 225px;
        height: min(22.5vw,225px);
    }
}
.ie .mainView {
    justify-content: flex-start;
}


/* featuresWrap
----------------------------------------- */
.featuresWrapper {
    background: #FCEEEA;
}
.featuresCont_ttl {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    padding: 0;
    background:
        url(/wp/wp-content/themes/teacher/images/online/onlineTtlR.png) right -40vw top 50%/auto 42.667vw repeat-y,
        url(/wp/wp-content/themes/teacher/images/online/onlineTtlL.png) left -13.333vw top 50%/auto 42.667vw repeat-y,
        #fdf7eb;
    box-shadow: 0 .267vw .533vw rgba(0, 0, 0, .2);
}
.featuresCont_ttl::before,
.featuresCont_ttl::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
}
.featuresCont_ttl::before {
    background: linear-gradient(to right, #083A8B 0%, #083A8B 50%, #D19D2F 50%, #D19D2F 100%);
}
.featuresCont_ttl::after {
    background: linear-gradient(to right, #D19D2F 0%, #D19D2F 50%, #083A8B 50%, #083A8B 100%);
}
.featuresCont_ttl span {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1010px;
    padding: 4vw 2vw;
    padding: min(4vw, 15px) min(2vw, 15px);
    color: #D11717;
}
.featuresCont_ttl span::after {
    content: "";
    position: absolute;
    background: 0 0/contain no-repeat;
    top: -8.875vw;
    left: calc(100% - 33.067vw);
    width: 33.067vw;
    height: 33.067vw;
    z-index: 2;
    background: url(/wp/wp-content/themes/teacher/images/online/onlineTtl1.png) 0 0/contain no-repeat;
}
.featuresCont_ttl.cont2 span::after {
    background: url(/wp/wp-content/themes/teacher/images/online/onlineTtl2.png) 0 0/contain no-repeat;
}
.featuresCont_box {
    position: relative;
    z-index: 0;
    margin: 0 auto 70px;
    margin-bottom: min(16vw,70px);
    padding: 30px 25px 50px;
    padding: min(5.333vw, 30px) min(4.4vw, 25px) min(10.667vw, 50px);
    max-width: 980px;
    width: calc(100% - 10.133vw);
    background-color: #fff;
}
.featuresBox_ttl {
    margin-bottom: 25px;
    margin-bottom: min(5.333vw, 25px);
}
.featuresCont_box p {
    margin-bottom: 20px;
}
.featuresCont_box p:last-of-type {
    margin-bottom: 0;
}
.featuresCont_box p + .imgLazy {
    margin-top: 30px;
    margin-bottom: 40px;
}
.featuresBox_wrap:not(:last-of-type) {
    margin-bottom: 30px;
    margin-bottom: min(5.333vw, 30px);
    padding-bottom: 50px;
    padding-bottom: min(10.667vw, 50px);
    border-bottom: 1px solid #002D77;
}
.featuresBox_wrap .imgLazy:last-child {
    margin-bottom: 0;
}
@media screen and (min-width: 835px) {
    .featuresWrap {
        margin-bottom: 60px;
    }
    .featuresCont_ttl {
        position: relative;
        background-position:
            left calc( 50% + 304px) top 50%,
            right calc( 50% + 552px) top 50%;
        background-size: auto;
    }
    .featuresCont_ttl::before,
    .featuresCont_ttl::after {
        height: 4px;
    }
    .featuresCont_ttl span {
        position: relative;
        margin: 0 auto;
        padding-top: 15px;
        padding-bottom: 15px;
        min-height: 155px;
    }
    .featuresCont_ttl span::after {
        content: "";
        position: absolute;
        top: auto;
        bottom: 0;
        left: calc(100% - 174px);
        width: 174px;
        height: 174px;
        z-index: 2;
    }
    .featuresCont_box {
        padding: 30px 50px 50px;
    }
}
@media screen and (min-width: 1366px){
    .featuresCont_ttl {
        background-position: 100% 50%,0 50%;
    }
}


/* onlineMov
----------------------------------------- */
.onlineMovWrap {
    width: calc(100% - 40px);
    margin: 50px auto 70px;
    margin: min(10.667vw,50px) auto min(16vw,70px);
    padding: 20px;
    width: calc( 100% - (6.25% * 2) );
    max-width: 800px;
    border: 2px solid #000610;
}
.onlineMovBox_ttl {
    margin-bottom: 1rem;
    font-size: 1.9rem;
    font-size: max(1.4rem, min(4.3vw, 2.4rem));
    text-align: center;
}
.onlineMovBoxCont_movie {
    position: relative;
    display: block;
    margin: 0 auto;
    max-width: 570px;
    width: 100%;
    cursor: pointer;
    border: solid 1px #333;
}
.onlineMovBoxCont_movie::before {
    content: '';
    position: absolute;
    transform: translate(-50%, -50%);
}
.onlineMovBoxCont_movie::before {
    top: 50%;
    left: 50%;
    width: 18.6%;
    height: 22%;
    background: url(https://www.online-mega.com/mega/wp-content/themes/site/images/common/movIcon.svg) 50% 50%/contain no-repeat;
}
.onlineMovBoxTxt_bal {
    position: relative;
    display: flex;
    margin-top: 10px;
    justify-content: center;
    text-align: left;
    line-height: 1.3;
    font-weight: 900;
    font-size: 1.4rem;
    font-size: max(1.2rem, min(3.3vw, 2.4rem));
}
.onlineMovBoxTxt_bal span {
    position: relative;
    padding-left: 5.333vw;
}
.onlineMovBoxTxt_bal span:before {
    position: absolute;
    content: "";
    left: 0;
    width: 3.733vw;
    height: 8vw;
    background: url(/wp/wp-content/themes/teacher/images/online/movieIcon.svg) 0 0 / contain;
}
@media screen and (min-width: 835px) {
    .onlineMovWrap {
        padding: 20px 0;
    }
    .onlineMovBox_ttl {
        font-size: 2.5rem;
        margin-bottom: 10px;
        text-align: center;
    }
    .onlineMovBoxTxt_bal {
        font-size: 1.7rem
    }
    .onlineMovBoxTxt_bal span {
        padding-left: 30px;
    }
    .onlineMovBoxTxt_bal span:before {
        width: 19px;
        height: 40px;
    }
}


/* passWrap (sp base)
----------------------------------------- */
.passWrap {
    margin-top: 40px;
    padding: 0;
}
.passWrap_cont {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 5.333vw;
    margin: 0 auto;
    max-width: 1038px;
}
.passWrapCont_box {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto 1fr;
    padding-top: min(5.067vw, 31px);
    width: 100%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
    overflow: hidden;
    border: solid 1px #FEE6DA;
}
.passWrapCont_box::before {
    content: '';
    grid-column: 2;
    grid-row: 1/3;
    margin: 0 5px 0 5px;
    margin-right: min(3.467vw, 20px);
    background: 50% 50%/contain no-repeat;
}
.passWrapCont_box.voice::before {
    width: 70px;
    height: 72px;
    background-image: url(/wp/wp-content/themes/teacher/images/online/congrats.svg);
}
.passWrapCont_box.pass::before {
    width: 70px;
    height: 67px;
    background-image: url(/wp/wp-content/themes/teacher/images/online/congrats_k.svg);
}
.passWrapBox_catch,
.passWrapBox_dtl {
    line-height: 1.3;
}
.passWrapBox_catch {
    color: #d8002e;
    margin-left: 10px;
    margin-bottom: 14px;
    margin-bottom: min(14px, 20px);
    font-size: 2.1rem;
    font-size: max(1.8rem, min(5vw, 2.2rem));
}
.passWrapBox_catch span {
    display: block;
    padding-left: .5em;
    text-indent: -.5em;
}
.passWrapBox_catch span:first-of-type {
    margin-bottom: 3px;
}
.passWrapCont_box .passWrapBox_dtl {
    grid-column: 1/3;
    padding: 0 13px 20px;
    padding: 0 min(3.467vw, 20px) 20px;
    font-size: 1.5rem;
    font-size: max(1.3rem, min(4vw, 1.7rem));
    font-weight: 900;
}
.passWrapBox_mov {
    position: relative;
    grid-column: 1/3;
    margin-top: auto;
    padding-top: 56.25%;
}
.passWrapBox_mov iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ie .passWrap_cont {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 0;
}
.ie .passWrapCont_box {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    width: 100%;
}
.ie .passWrapCont_box::before {
    position: absolute;
    top: 31px;
    right: 0;
}
.ie .passWrapBox_catch,
.ie .passWrapBox_dtl {
    padding-right: 115px;
}
.edge .passWrapBox_mov {
    padding-top: 0;
}
.edge .passWrapBox_mov::before {
    content: '';
    display: block;
    padding-top: 56.25%;
}
@media screen and (min-width: 651px) {
    .passWrap_cont {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px 30px;
        grid-gap: min(3vw, 30px) min(4vw, 20px);
    }
    .ie .passWrapCont_box {
        width: calc( (100% - 20px) / 2 );
    }
    .ie .passWrapCont_box:nth-of-type(2n-1) {
        margin-right: 20px;
    }
}
@media screen and (min-width: 835px) {
    .passWrap {
        padding: 20px;
        background: #FEE6DA;
    }
    .passWrap_ttl {
        margin-bottom: 41px;
    }
    .passWrapCont_box {
        padding-top: 15px;
    }
    .passWrapCont_box::before {
        margin-right: 5px;
    }
    .passWrapBox_catch {
        margin-bottom: 20px;
        padding-left: 5px;
        font-size: 2.4rem;
        font-feature-settings: "palt";
    }
    .passWrapBox_dtl {
        padding: 0 20px;
        font-size: 1.7rem;
    }
    .passWrapCont_box.voice::before {
        width: 80px;
        height: 83px;
    }
    .passWrapCont_box.pass::before {
        width: 80px;
        height: 77px;
    }
}


/* teacherVoice
----------------------------------------- */
.teacherVoice {
    margin-bottom: 21.067vw;
    margin-bottom: min(21.067vw, 50px);
    padding-top: 7.2vw;
    padding-top: min(7.2vw, 40px);
    background-color: #f9f9f3;
}
.teacherVoice_ttl {
    text-align: center;
    margin-bottom: 0;
    font-weight: 900;
    line-height: 1.3;
}
.teacherVoiceTtl_sub {
    display: block;
    color: #D11717;
    font-size: 2rem;
    font-size: max(2rem, min(3.333vw, 3.6rem));
}
.teacherVoiceTtl_main {
    font-size: 2.4rem;
    font-size: max(2.4rem, min(5.4vw, 4rem));
    display: block;
    font-family: YakuHanMP, 'Noto Serif JP', serif;
}
@media screen and (min-width: 835px) {
    .teacherVoice {
        margin-bottom: 50px;
        padding-top: 40px;
    }
    .teacherVoiceTtl_sub {
        font-size: 3.6rem
    }
    .teacherVoiceTtl_main{
        font-size: 4rem;
    }
}


/* online_pros
----------------------------------------- */
.online_pros li {
    position: relative;
    display: flex;
    align-items: center;
    padding: 5px 0 5px 60px;
    padding-left: min(18.667vw,80px);
    max-width: 800px;
    min-height: 80px;
    font-size: 1.7rem;
    line-height: 1.3;
    border-bottom: solid 1px #9d9d9d;
}
.online_pros li:last-child {
    border-bottom: none;
}
.online_pros li::before {
    content: "";
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: 20px;
    left: min(2.667vw,20px);
    background: 0 0/contain no-repeat;
}
.online_pros li:nth-child(1)::before {
    width: 47px;
    height: 42px;
    background-image: url(/wp/wp-content/themes/teacher/images/online/meritIcon1.svg);
}
.online_pros li:nth-child(2)::before {
    width: 37px;
    height: 38px;
    background-image: url(/wp/wp-content/themes/teacher/images/online/meritIcon2.svg);
}
.online_pros li:nth-child(3)::before {
    width: 47px;
    height: 49px;
    background-image: url(/wp/wp-content/themes/teacher/images/online/meritIcon3.svg);
}
.online_pros li:nth-child(4)::before {
    width: 43px;
    height: 43px;
    background-image: url(/wp/wp-content/themes/teacher/images/online/meritIcon4.svg);
}
.online_pros li:nth-child(5)::before {
    width: 44px;
    height: 41px;
    background-image: url(/wp/wp-content/themes/teacher/images/online/meritIcon5.svg);
}
.ie .online_pros li {
    padding-top: 15px;
    padding-bottom: 15px;
}
@media screen and (min-width: 835px) {
    .online_pros li {
        font-size: 2rem;
    }
}


/* accdWrap
----------------------------------------- */
.accdWrap_inner {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 800px;
}
.accdWrap_inner div {
    margin-top: 30px;
}
.accdWrap_inner p {
    margin-bottom: 15px;
}
.accdWrap_inner img {
    margin: 15px auto 20px;
}
.aboutPC {
    display: table;
    margin-bottom: 30px;
    width: 100%;
}
.aboutPC th:first-child {
    background-color: #eee;
}
.aboutPC th,
.aboutPC td {
    font-size: 14px;
    border: 1px solid #ddd;
    text-indent: 0;
    padding: 5px 60px 5px 10px;
}
@media screen and (max-width: 834px){
    .accdWrap_inner p {
        font-size: 1.6rem;
    }
    .aboutPC th,
    .aboutPC td {
        font-size: 14px;
        padding: 5px 10px 5px 10px;
    }
}