@media (max-width: 710px) {
    body {
        overflow: hidden
    }
}

@media (max-width: 710px) {
    #contents #contentsbox {
        width: 100%
    }
    #contents #contentsbox #topicPath {
        padding-left: 2.66667vw;
        padding-right: 2.66667vw
    }
}

@media (min-width: 711px) {
    #contents #contentsbox {
        width: 100%
    }
    #contents #contentsbox #topicPath {
        width: 960px;
        margin: 0 auto
    }
}

.p-online {
    color: #333030;
    letter-spacing: .05em
}

.p-online img {
    width: 100%;
    height: auto
}

@media (min-width: 711px) {
    .p-online .sp {
        display: none
    }
}

@media (max-width: 710px) {
    .p-online .pc {
        display: none
    }
    
}

.p-online_title {
    background: #a8fbc5;
    font-family: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "MS PMincho", serif
}

.p-online_title_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media (max-width: 710px) {
    .p-online_title_inner {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        height: 21.33333vw;
        font-size: 6.93333vw
    }
}

@media (min-width: 711px) {
    .p-online_title {
        margin-top: 15px
    }
    .p-online_title_inner {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        height: 100px;
        font-size: 26px
    }
}

@media (max-width: 710px) {
    .p-online_content {
        padding-left: 5.33333vw;
        padding-right: 5.33333vw
    }
}

@media (min-width: 711px) {
    .p-online_content {
        width: 960px;
        margin: 0 auto
    }
}

.p-online_intro {
    background: #a8fbc5;
    color: #333030
}

.p-online_intro_title {
    font-family: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "MS PMincho", serif
}

.p-online_intro_lead {
    line-height: 2
}

@media (max-width: 710px) {
    .p-online_intro {
        padding-bottom: 6.66667vw
    }
    .p-online_intro_image {
        margin-left: -5.33333vw;
        margin-right: -5.33333vw
    }
    .p-online_intro_title {
        margin-top: 6.66667vw;
        font-size: 5.86667vw;
        text-align: center
    }
    .p-online_intro_lead {
        margin-top: 4vw;
        font-size: 3.73333vw
    }
}

@media (min-width: 711px) {
    .p-online_intro {
        padding: 40px 0 36px
    }
    .p-online_intro_body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-top: 40px
    }
    .p-online_intro_title {
        width: 266px;
        font-size: 22px
    }
    .p-online_intro_lead {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        position: relative;
        padding-left: 55px;
        font-size: 14px
    }
    .p-online_intro_lead:before {
        content: '';
        position: absolute;
        top: 8px;
        bottom: 8px;
        left: 0;
        width: 2px;
        background: #333030
    }
}

.p-online_marker {
    padding-bottom: .2em;
    font-weight: bold;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(54%, transparent), color-stop(54.1%, #ffff30));
    background: linear-gradient(transparent 54%, #c8ff05 54.1%)
}

.p-online_class_title {
    position: relative;
    padding-bottom: .7em;
    font-family: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "MS PMincho", serif;
    text-align: center
}

.p-online_class_title:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    background: #005C3F;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.online_school_support{
    padding: 40px 20px;
    margin:15px;
    background-color: #e8fdef;
}

.online_school_support>ol {
    counter-reset: classpoint
}

.online_school_support>ol>li {
    counter-increment: classpoint
}

.online_school_support>ol>li>div {
    position: relative
}

/*.online_school_support>ol>li>div:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #005C3F;
    -webkit-transform: translate(3%, 4%);
    transform: translate(3%, 4%)
}*/

.online_school_support>ol>li>div>img {
    position: relative
}

.online_school_support>ol>li>h4 {
    color: #005C3F;
    /*font-family: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "MS PMincho", serif*/
}

/*.online_school_support>ol>li>h4:before {
    content: counter(classpoint)
}*/

.online_school_support>ol>li>p {
    line-height: 1.7
}

.online_school_content{
    margin-top: 10vw;
}

@media (min-width: 711px) {
    .online_school_content{
        width: 960px;
        margin: 0 auto;
    }
}

.online_school_subtitle{
    font-size: 25px;
    color: #464545;
    font-weight: bold;
    background: linear-gradient(to bottom, #fff 60%, #a8fbc5 );
}
@media (max-width: 711px) {
    .online_school_subtitle{
            font-size: 5.5vw;
    }
}

.online_school_point>ol {
    counter-reset: classpoint
}

.online_school_point>ol>li {
    counter-increment: classpoint;
    padding-top: 30px;
    
}

.online_school_point>ol>li>div {
    position: relative;
    float: left;
    padding-right: 20px;
}
@media (max-width: 710px) {
    .online_school_point>ol>li>div {
    width:100%;
    }
}

.online_school_point>ol>li>div>img {
    position: relative;
    width: 450px;
}

.online_school_point>ol>li>h4 {
    color: #005C3F;
    font-family: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "MS PMincho", serif
}

.online_school_point>ol>li>p {
    line-height: 1.7
}

@media (max-width: 710px) {
    .online_school_point {
        margin: 80px 15px;
    }
    .online_school_point>ol>li>h4 {
            margin-top: 70vw;
            font-size: 5.86667vw
    }
    .online_school_point>ol>li>p {
            margin-top: 2.66667vw;
            margin-bottom: 2vw;
            font-size: 3.73333vw
    }
    .online_school_point>ol>li:nth-of-type(even)>div:before {
            -webkit-transform: translate(-3%, 4%);
            transform: translate(-3%, 4%)
    }
    .online_school_point>ol>li>div>img {
            width: 95%;
            text-align: center;
            margin: auto;
            padding: 20px;
    } 
}

@media (min-width: 711px) {
    .online_school_point {
        margin: 50px 15px
    }
    .online_school_point>ol {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
    /*.online_school_point>ol>li {
        width: 280px;
        padding: px;
    }*/
    .online_school_point>ol>li>h4 {
        font-size: 22px;
        padding: 10px 20px
    }
    .online_school_point>ol>li>p {
        margin-top: 10px;
        /*margin-right: -5px;*/
        font-size: 16px
    }
}



@media (max-width: 710px) {
    .p-online_class {
        padding: 10.66667vw 0 13.33333vw
    }
    .p-online_inner_covid{
        padding: 10.66667vw 0 13.33333vw;
        text-align: center;
    }
    .p-online_class_title {
        font-size: 5.86667vw
    }
    .p-online_class_title:before {
        width: 5.33333vw;
        height: 1.06667vw;
    }
    .online_school_support>ol>li {
        margin-top: 8vw
    }
    .online_school_support>ol>li>h4 {
        margin-top: 8vw;
        font-size: 5.86667vw;
    }
    .online_school_support>ol>li>p {
        margin-top: 2.66667vw;
        font-size: 3.73333vw;
    }
    /*.online_school_support>ol>li:nth-of-type(even)>div:before {
        -webkit-transform: translate(-3%, 4%);
        transform: translate(-3%, 4%)
    }*/
    
}

@media (min-width: 711px) {
    .p-online_class {
        padding: 50px 0 60px
    }
    .p-online_inner_covid{
        padding: 50px 0 60px
    }
    .p-online_class_title {
        font-size: 22px
    }
    .p-online_class_title:before {
        width: 20px;
        height: 4px
    }
    .online_school_support {
        margin-top: 40px
    }
    .online_school_support>ol {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        /*flex-wrap: wrap;*/
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
    .online_school_support>ol>li {
        width: 450px;
        padding: 15px;
    }
    .online_school_support>ol>li>h4 {
        margin-top: 30px;
        font-size: 22px
    }
    .online_school_support>ol>li>p {
        margin-top: 10px;
        margin-right: -5px;
        font-size: 16px
    }
    
}

.comments{
    width: 800px;
    margin: 15px auto 0;
} 

@media (max-width: 710px){
    .comments{
        font-size: 25px;
        width: 100%;
    }
}

/*table*/
.detail{
    line-height: 2em;
    margin-top: 80px;
    
}

.online_school_detail th {
    padding: 7px;
    background: #0b5606;
    color: #fff;
    font-weight: bold;
    width: 33%;
}
.online_school_detail td {
    padding: 7px;
}

@media (min-width: 711px){
    .online_school_detail {
        width: 80%;
        border-collapse: collapse;
        text-align: center;
        margin: auto;
        margin-top: 50px;
        margin-bottom: 30px;
        border-color: darkgray;
    }
}

@media (max-width: 710px){
    .online_school_detail {
        width: 100%;
        border-collapse: collapse;
        margin: 35px 0;
        font-size: 30px;
        border-color: darkgray;
    }
    .online_school_detail th {
        padding: 15px;
        width: 36%;
    }
    .online_school_detail td{
        padding: 15px;
    }
}

/*MyET*/
.online_school_myet{
    padding: 30px 30px;
    background: #f9dae2;
    border-radius: 30px;
    margin-top: 50px;
}
.online_school_myet_title{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #f0f8ff;
    background: #da466d;
    border-radius: 26px;
    font-size: 27px;
    text-align: center;
    font-weight: bold;
}
.online_school_myet_img{
    width: 80%;
    text-align: center;
    margin: auto;
    padding: 20px 0;
}
.myet_hi {
    color: #6b6a6a;
}
@media (max-width: 710px) {
    .online_school_myet_img{
        width:100%;
        padding: 0px 0px 30px 0px;
    }
    .online_school_myet_logo {
        width: 55%;
        padding: 0px 0px 30px 0px;
    }
    .myet_hi {
        font-size: 25px;
        font-weight: bold;
    }
}
@media (min-width: 711px){
    .online_school_myet_logo {
        width: 30%;
        float: left;
    }
    .myet_hi {
        padding: 40px 0px 0px 300px;
        font-size: 20px;
        font-weight: bold;
    }
}


/*体験の流れ*/
.onlineflow {
    text-align: center;
    padding-top: 50px;
}
/*@media (min-width: 711px) {
    .onlineflow img {
        width: 70%;
    }
}*/

.p-online_cta {
    position: relative
}

.p-online_cta:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #005C3F;
    -webkit-transform: skewY(-3deg);
    transform: skewY(-3deg)
}

.p-online_cta_inner {
    position: relative;
    color: #fff
}

.p-online_cta_inner>h3 {
    display: inline-block;
    position: relative;
    font-family: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "MS PMincho", serif
}

.p-online_cta_inner>h3:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/cta_title.svg) bottom center no-repeat;
    background-size: 100% auto
}

.p-online_cta_inner>div>a {
    display: block;
    position: relative;
    text-decoration: none
}

.p-online_cta_inner>div>a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/cta_shadow.png) center no-repeat;
    background-size: contain
}

.p-online_cta_inner>div>a>span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: url(../img/cta_btn.png) center no-repeat;
    background-size: contain;
    color: #005C3F;
    font-weight: bold;
    letter-spacing: .1em
}

@media (max-width: 710px) {
    .p-online_cta {
        padding: 9.33333vw 0 16vw
    }
    .p-online_cta_inner {
        width: 80vw;
        margin: 0 auto
    }
    .p-online_cta_inner>h3 {
        margin-bottom: 3.46667vw;
        padding-bottom: 8vw;
        font-size: 4.26667vw
    }
    .p-online_cta_inner>div>a:before {
        -webkit-transform: translate(2.66667vw, 2.66667vw);
        transform: translate(2.66667vw, 2.66667vw)
    }
    .p-online_cta_inner>div>a>span {
        width: 80vw;
        height: 21.33333vw;
        padding-left: 17.86667vw;
        font-size: 5.86667vw;
        -webkit-box-shadow: 0 .53333vw 2.66667vw rgba(0, 0, 0, 0.3);
        box-shadow: 0 .53333vw 2.66667vw rgba(0, 0, 0, 0.3)
    }
}

@media (min-width: 711px) {
    .p-online_cta {
        padding: 40px 0 60px
    }
    .p-online_cta_inner {
        width: 310px
    }
    .p-online_cta_inner>h3 {
        margin-bottom: 13px;
        padding-bottom: 30px;
        font-size: 16px
    }
    .p-online_cta_inner>div>a:before {
        -webkit-transform: translate(10px, 10px);
        transform: translate(10px, 10px);
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s, -webkit-transform .3s
    }
    .p-online_cta_inner>div>a>span {
        width: 300px;
        height: 80px;
        padding-left: 67px;
        font-size: 22px;
        -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        -webkit-transition: -webkit-transform .3s, -webkit-box-shadow .3s;
        transition: -webkit-transform .3s, -webkit-box-shadow .3s;
        transition: transform .3s, box-shadow .3s;
        transition: transform .3s, box-shadow .3s, -webkit-transform .3s, -webkit-box-shadow .3s
    }
    .p-online_cta_inner>div>a:hover:before {
        -webkit-transform: translate(7px, 7px);
        transform: translate(7px, 7px)
    }
    .p-online_cta_inner>div>a:hover>span {
        -webkit-box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.6);
        box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.6);
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px)
    }
}

.online_point_title {
    position: relative;
    padding-bottom: .7em;
    font-family: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "MS PMincho", serif;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 100px;
}



@media (min-width: 711px) {
    .p-online_class_title_covid {
      position: relative;
      padding-bottom: .7em;
      font-family: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "MS PMincho", serif;
      text-align: center;
      margin-top: 40px;
    }
    .p-online_class_title_covid {
      font-size: 22px
    }
    .covid_online {
      text-align: center;
    }
    .covid_online img {
        padding: 15px;
      text-align: center;
      width: 50%;
    }
}
@media (max-width: 710px) {
    .covid_online img {
      padding: 15px;
      width: 94%;
    }
}

@media (max-width: 710px) {
    .p-online_class_title_covid {
      font-size: 5.86667vw;
    }
    .p-online_class_title_covid {
      position: relative;
      padding-bottom: .7em;
      font-family: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "MS PMincho", serif;
      text-align: center;
      margin-top: 40px;
     }
}



.p-online_information_title {
    text-align: center;
    margin-top: 30px;
}

.p-online_information_title>i {
    color: #005C3F
}

.p-online_information_title>span {
    display: block;
    margin-top: .5em
}

.p-online_information_movie>div {
    position: relative;
    padding-top: 56.25%
}

.p-online_information_movie>div>iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.p-online_information_faq>h4 {
    font-family: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "MS PMincho", serif
}

.p-online_information_faq>h4:before {
    content: '◆';
    display: inline-block;
    color: #005C3F;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    -webkit-transform-origin: left center;
    transform-origin: left center
}

.p-online_information_faq>ul>li>dl>dt,
.p-online_information_faq>ul>li>dl>dd {
    position: relative;
    margin: 0;
    padding: 0
}

.p-online_information_faq>ul>li>dl>dt:before,
.p-online_information_faq>ul>li>dl>dd:before {
    position: absolute;
    top: 0;
    left: 0
}

.p-online_information_faq>ul>li>dl>dt {
    font-weight: bold
}

.p-online_information_faq>ul>li>dl>dt:before {
    content: 'Q.'
}

.p-online_information_faq>ul>li>dl>dd {
    margin-top: .5em;
    padding-top: .7em;
    border-top: 1px solid #D6D6D6
}

.p-online_information_faq>ul>li>dl>dd:before {
    content: 'A.';
    top: .8em;
    left: .05em
}

.p-online_information_faq>ul>li>dl>dd>p {
    line-height: 1.7
}

.p-online_information_faq>ul>li>dl>dd .indent1 {
    padding-left: 1em;
    text-indent: -1em
}

@media (max-width: 710px) {
    .p-online_information {
        padding-bottom: 8vw
    }
    .p-online_information_title>i {
        font-size: 8vw
    }
    .p-online_information_title>span {
        font-size: 5.86667vw
    }
    .p-online_information_movie {
        margin-top: 10.66667vw
    }
    .p-online_information_faq {
        margin-top: 9.33333vw
    }
    .p-online_information_faq>h4 {
        font-size: 4.8vw
    }
    .p-online_information_faq>ul>li>dl>dt,
    .p-online_information_faq>ul>li>dl>dd {
        padding-left: 5.33333vw
    }
    .p-online_information_faq>ul>li>dl>dt {
        font-size: 4vw
    }
    .p-online_information_faq>ul>li>dl>dd {
        font-size: 3.73333vw
    }
    .p-online_information_faq>ul>li+li {
        margin-top: 6.66667vw
    }
}

@media (min-width: 711px) {
    .p-online_information_title>i {
        font-size: 30px
    }
    .p-online_information_title>span {
        font-size: 22px
    }
    .p-online_information_movie {
        width: 636px;
        margin: 40px auto 0;
        background: #EEF0ED
    }
    .p-online_information_faq {
        margin-top: 55px
    }
    .p-online_information_faq>h4 {
        font-size: 18px
    }
    .p-online_information_faq>ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
    .p-online_information_faq>ul>li {
        width: 470px
    }
    .p-online_information_faq>ul>li>dl>dt,
    .p-online_information_faq>ul>li>dl>dd {
        padding-left: 20px
    }
    .p-online_information_faq>ul>li>dl>dt {
        font-size: 15px
    }
    .p-online_information_faq>ul>li>dl>dd {
        font-size: 14px
    }
    .p-online_information_faq>ul>li:nth-of-type(n+3) {
        margin-top: 25px
    }
}