@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800&display=swap');
/*font-family: 'Noto Sans JP', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');
/*font-family: 'Noto Serif JP', serif;*/

html{
    padding: 0;
    margin: 0;
}
body{
    padding: 0;
    margin: 0;
    color: #2E4053;
    overflow: auto;
}

.tentative{
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    margin-top: 60px;
    padding-bottom: 60px;
}

/* ヘッダー */
header{
    width: 100%;
}
.header_wrap{
    position: fixed;
    top: 0;
    width: 100%;
    height: 150px;
    z-index: 5;
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #fff;
    margin: 0 auto;
}
.header_title{
    position: relative;
    /* width: 100%; */
    max-width: 1280px;
    /* width: 1280px; */
    margin: 0 auto;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0px 1px 0px #00000028;
    box-sizing: border-box;
}
.header_title a{
    text-decoration: none;
    color: inherit;
}
.header_title a{
    text-decoration: none;
    color: inherit;
}
.logo{
    height: 30px;
}
.header_menue{
    width: 100%;
    /* width: 1280px; */
    margin: 0 auto;
    background-color: #2e3e77;
    height: 62px;
    display: inline-block;
    padding: 0 40px;
    box-sizing: border-box;
}
.menue{
    display: flex;
    height: 62px;
    align-items: center;
    width: auto;
    max-width: 1280px;
    /* width: 1280px; */
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.separater{
    height: 20px;
    border: 1px solid #7E87AB;
}
.menue img{
    width: 100%;
}
.menue li{
    /* padding: 5px 0; */
    height: 70px;
    width: 100%;
    text-align: center;
}
.menue li a {
    width: 100%;
    text-decoration: none;
    color: white;
    font-size: 18px;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
    display: block;
}
.menue li a p{
    padding: 0;
    margin: 0;
    font-size: 14px;
}



/* main */
main{
    padding-top: 150px;
}
.main-contents{

}
.bold{
    font-weight: bold;
}
.medium{
    font-weight: 500;
}
.regular{
    font-weight: 400;
}
.content_tit{
    width: 478px;
    height: 130px;
    margin: 0 auto;
}
/* このサイトについて */
.site_exp_wrapper{
    height: 556px;
    background-image:url('../img/main_bg.png');
    background-repeat: repeat-x;
    background-position: center;
    background-size: contain;
    font-family: 'Noto Sans JP', sans-serif;
}
.main_fm{
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
    background-image: url(../img/main_fm.png);
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 1086px;
    /* width: 1086px; */
    height: 447px;

}
.site_exp_contents{
    position: absolute;
    width: 100%;
    padding: 50px 90px;
    /* padding: 33px 90px; */
    /* padding: 4% 6%; */
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    box-sizing: border-box;
    height: 100%;
}
.site_exp_txt_wrap{
    width: 70%;
}
.index_bar{
    width: 70px;
    border: 3px solid #4AAC7E;
}
.site_exp_title{
    font-size: 26px;
    /* font-size: min(2.03vw,26px); */
    padding-bottom: 14px;
    /* padding-bottom: 6px; */
}
.site_exp_text{
    font-size: 20px;
    /* font-size:min(1.56vw,20px); */
}
.exp_text1{
    padding: 28px 0 5px 0;
    /* padding: 9px 0 5px 0; */
}
.exp_text2{
    padding-bottom: 5px;
}
.exp_text4{
    font-size: 20px;
    padding-top: 5px;
    font-weight: bold;
    background-color: #44b991;
    width: fit-content;
    color: #fff;
    padding: 10px;
    position: relative;
    top: -5px;
    display: none;
}
.site_exp_book{
    width: 30%;
}
.img_book{
    height: 100%;
    /* width: 90%; */
    display: inherit;
    margin: 0 auto;
}

/* 動画 */
.movie_wrapper{
    height: auto;
    font-family: 'Noto Sans JP', sans-serif;
}
.movie_text{
    text-align: center;
    padding-top: 15px;
    font-size: 18px;
    line-height: 34px;
}
.movie_fm{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-image: url(../img/waku_1.png);
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 45px;
    /* max-width: 1200px; */
    width: 1200px;
    height: 187px;
}
.movie_text2{
    padding: 22px 25px 34px 25px;
    line-height: 34px;
    font-size: 16px;
    position: absolute;
    box-sizing: border-box;
}
.movie_text2_ipad_column{
    line-height: 29px;
    padding-top : 18px;
}
.movie_text2_parag_ipad_column{
    padding-left:16px;
    text-indent:-12px;
}
.movie_contents{
    display: flex;
    flex-wrap: wrap;
    /* max-width: 1200px; */
    width: 1200px;
    margin: 0 auto;
    padding: 0;
    padding-top: 42px;
}
.movie{
    width: 25%;
    text-align: center;
    margin-bottom: 30px;
    list-style: none;
}
.movie a{
    text-decoration: none;
}
.movie_img{
    width: 90%;
    cursor: pointer;
}
.movie_cap{
    text-align: left;
    font-size: 16px;
    width: 90%;
    margin: 0 auto;
    color: #2E4053;
}
.more_view , .more_view_t,.more_view_s{
    width: 220px;
    height: 44px;
    margin: 0 auto;
    margin-top: 28px;
    margin-bottom: 76px;
    cursor: pointer;
}
.more_view_s{
    margin-bottom: 0;
}
#more_view,#more_view_t,#more_view_s{
    width: 100%;
}

.movie_text2_parag{
    display: block;
}


/* スマレク */
.smart-lec_wrapper{
    background-color: #FCFCEB;
    /* height: 1150px; */
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
}
.smalec_text{
    padding-top: 28px;
    font-size: 18px;
    padding-bottom: 14px;
}
.smalec_text2{
    padding-top: 45px;
    padding-bottom: 14px;
    font-size: 18px;
}
.smalec_text2 a{
    /* text-decoration: none; */
    color: inherit;
}
.smalec_link{
    width: 626px;
    height: 112px;
    margin: 0 auto;
    padding-top: 25px;
    padding-bottom: 76px;
}
.smalec_link img{
    width: 100%;
}
.smalec_text3{
    padding-top: 10px;
    padding-bottom: 28px;
}
.smalec_sample{
    width: 626px;
    height: 75px;
    margin: 0 auto;
}
.smalec_sample_t{
    /* font-size: 18px; */
    font-size: 28px;
    margin-bottom: 7px;
}
.smalec_movie_wrap{
    display: flex;
    flex-wrap: wrap;
    /* max-width: 1200px; */
    width: 910px;
    margin: 0 auto;
    padding: 0;
    padding-top: 10px;
    justify-content: flex-start;
}
.smalec_movie{
    width: 33%;
    list-style: none;
    margin-bottom: 30px;
}
.smalec_movie a{
    text-decoration: none;
    color: #2E4053;
}
.smalec_movie_img{
    width: 90%;
    cursor: pointer;
}
/* webテスト */
.web-test_wrapper{
    background-color: #EEFFF7;
    height: 636px;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
}
.test_text{
    padding-top: 15px;
    padding-bottom: 48px;
    font-size: 18px;
}
.test_text_parag{
    display: block;
}
.test_link{
    display: flex;
    width: 626px;
    height: 90px;
    background-color: #4AAC7E;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    margin: 0 auto;
}
.ico_web-test{
    width: 44px;
    margin-right: 22px;
}
.test_link_text{
    font-size: 20px;
    color: #fff;
}

/* 自動採点 */
.auto-score-web-app_wrapper{
    height: auto;
    font-family: 'Noto Sans JP', sans-serif;
    text-align: center;
}
.auto_score_text{
    padding-top: 11px;
    padding-bottom: 50px;
    font-size: 18px;
}
.auto_score_text_parag{
    display: block;
}
.test_list{
    /* max-width: 968px; */
    width: 968px;
    margin: 0 auto;
    border-top: 1px solid #acacac;
    border-bottom: 1px solid #acacac;
    border-collapse: collapse;
    margin-bottom: 50px;
}
.test_list tr{
    height: 80px;
}
.test_name_link{
    width: 38%;
    height: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: left;
    border-top: 1px solid #acacac;
    border-bottom: 1px solid #acacac;
}
.ico_test{
    width: 32px;
    margin-right: 18.44px;
}
.test_name_link a{
    text-decoration: none;
    /* pointer-events: none; */
    /* display: inline-flex;
    align-items: center;
    justify-content: left; */
}
.test_name{
    font-size: 18px;
    color: #3867c7;
    text-align: left;
}
.reference_link{
    width: 20%;
    height: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: left;
    border-top: 1px solid #acacac;
    border-bottom: 1px solid #acacac;
}
.ico_link{
    width: 24px;
    margin-right: 12.02px;
}
.reference_link a{
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: left;
}

.reference_link div{
    display: flex;
    flex-direction: column;
}
.reference_name ,.reference_name_s{
    font-size: 16px;
    color: #3867c7;
    text-align: left;
    display: block;
}
.nolink{
    color: #2E4053;
    padding-left: 36.02px;
}
.reference_name_s{
    font-size: 14px;
}
.answer_sheet_pdf{
    width: 20%;
    height: inherit;
    display: inline-block;
    border-top: 1px solid #acacac;
    border-bottom: 1px solid #acacac;
    
}
.answer_sheet_pdf a{
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: right;
}
.answer_sheet_pdf img{
    width: 90%;
    padding-top: 4%;
}

.bunseki_link{
    width: 20%;
    height: inherit;
    display: inline-block;
    border-top: 1px solid #acacac;
    border-bottom: 1px solid #acacac;
}

.bunseki_link a{
    display: inline-block;
    width: 100%;
    height: 100%;
}
.bunseki_link img{
    width: 90%;
    padding-top: 4%;
}



/* footer */
footer{
    height: 70px;
    background-color: #2e3e77;
    text-align: center;
    margin-top: 97px;
}
footer p{
    height: 70px;
    line-height: 70px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #fff;
    padding:0;
    margin: 0;
}

.sc_top{
    display: none;
}
.hamburger{
    display: none;
}

.test_name .new-badge {
  background-color: #c7383b;
  color: white;
  font-size: 0.8em;
  padding: 2px 6px;
  border-radius: 10px;
  margin-right: 3px;
  font-weight: bold;
}

/* お知らせ */
.news_wrapper{
    background-color: #EEFFF7;
    height: auto;
    font-family: 'Noto Sans JP', sans-serif;
    padding-bottom: 80px;
}

.news_list{
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
    font-size: 16px;
    font-weight: 500;
}

.news_list li{
    border-bottom: 1px solid #acacac;
    padding: 20px 10px;
    list-style: none;
    margin: 0 20px;
}

.news_list a{
    text-decoration: none;
    cursor: pointer;
    color:#3867c7;
}

/* タブレット　縦 */
@media screen and (min-width:760px) and (max-width:1279px) {
    .site_exp_wrapper{
        height: 43vw;
    }
    .site_exp_contents{
        padding: 5% 8%;
        padding: 2% 8%;
    }
    .site_exp_title{
        font-size: min(2.03vw,26px);
        padding-bottom: 0.2%;
    }
    .site_exp_text{
        font-size:min(1.56vw,20px);
        padding-top: 0.22%;
    }
    .exp_text1{
        padding: 3% 0 1% 0;
        padding: 2% 0 1% 0;
    }
    .exp_text4{
        font-size: min(1.56vw,20px);
    }
    .img_book{
        height: auto;
        width: 93%;
    }
    .movie_tit{
        padding-top: 0!important;
    }
    .header_title{
        max-width: none;
        width: 90%;
        margin: 0 auto;
    }
    .menue{
        max-width: none;
        width: 90%;
        margin: 0 auto;
    }
    .menue li a {
        font-size: min(1.4vw,18px);
    }
    .menue li a p{
        font-size: min(1.1vw,14px);
    }
    .main_fm{
        width: 86%;
        height: 80%;
    }
    .content_tit{
        width: 37%;
        padding-top:5%!important;
        height: auto;
    }
    .movie_text{
        font-size: min(1.4vw,18px);
        line-height: 2.6vw;
    }
    .movie_fm{        
        width: 94%;
        aspect-ratio: 1200 / 187;
        height: auto;
        margin: 45px auto 0;
        left: 0;
        transform: none;
        line-height: 2.6vw;
    }
    .movie_text2{
        font-size: min(1.2vw , 16px);
        line-height: 2.6vw!important;
        width: 100%;
        padding: 2% 1%;
    }
    .movie_text2_parag{
        padding-left: 1.2vw;
        text-indent: -0.8vw;
    }
    .movie_contents{
        width: 94%;
    }
    .movie_cap{
        font-size: min(1.2vw , 16px);
    }
    .test_list{
        width: 90%;
    }
    .more_view,.more_view_t ,.more_view_s{
        width: 17%;
        /* width: vw; */
    }
    .smart-lec_wrapper{
        /* height:90vw; */
    }
    .smalec_text,.smalec_text2{
        font-size: min(1.4vw,18px);
    }
    .smalec_sample_t{
        font-size: min(2.1vw,28px);
    }
    .smalec_text3{
        font-size: min(1.25vw,16px);
    }
    .smalec_text2{
        padding-top: 3.4vw;
        padding-bottom: 0.7vw;
    }
    .smalec_text3{
        padding-top: 0.7vw;
        padding-bottom: 2.1vw;
    }
    .smalec_link{
        width: 49%;
        height: auto;
    }
    .smalec_sample{
        width: 49%;
        height: auto;
    }
    .smalec_movie_wrap{
        width:70%;
        padding-top: 1%;
    }
    .test_text{
        font-size: min(1.4vw,18px);
        padding-top: 1.1vw;
        padding-bottom: 3.7vw;
    }
    .ico_web-test{
        width: 6%;
    }
    .web-test_wrapper{
        height: 48vw;
    }
    .test_link_text{
        font-size: min(1.7vw,20px);
    }
    .test_link{
        width: 49%;
        height: 12%;
    }
    .auto_score_text{
        font-size: min(1.4vw,18px);
    }
    .test_name{
        font-size: min(1.4vw,18px);
    }
    .reference_name{
        font-size: min(1.25vw,16px);
    }
    .reference_name_s{
        font-size: min(1.1vw,14px);
    }
    .answer_sheet_pdf img {
        width: 85%;
        padding-top: 3%;
    }
    .bunseki_link img {
        width: 85%;
        padding-top: 3%;
    }
}

/* スマホ */
@media screen and (max-width:760px) {
    main{
        padding-top: 64px;
    }
    /* ハンバーガーメニュー */
    .hamburger{
        display: block;
        width: 30px;
        height: 30px;
        border: none;
        background-color: white;
        padding: 0;
        width: 30px;
        height: 30px;
    }
    
    .hamburger.active span:nth-child(1) {
        top: 5px;
        transform: rotate(45deg);
    }
    
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger.active span:nth-child(3) {
        top: -13px;
        transform: rotate(-45deg);
    }
    
    .hamburger span {
    width: 100%;
    height: 1px;
    background-color: #2E3E77;
    position: relative;
    transition: ease .4s; /*ハンバーガーメニュークリック時の三本線の動きを遅延*/
    display: block;    
    }
    
    .hamburger span:nth-child(1) {
    top: 0;
    }
    
    .hamburger span:nth-child(2) {
    margin: 8px 0;
    }
    
    .hamburger span:nth-child(3) {
    top: 0;
    }
    /*ハンバーガーここまで*/
    
    .header_wrap{
        height: 64px;
    }
    .header_title{
        max-width: none;
        padding: 0 18px;
        height: 64px; 
        justify-content: space-between;
        width: 100%!important;
        border-top: 4px solid #2E3E77;
    }
    #header_txt{
        height: 34px;
    }

    .sitename{
        width: 178px;
    }

    .header_menue {
        position: absolute;
        width: 100%;
        right: -120%;
        margin: 0;
        background-color: #2e3e77;
        height: 100vh!important;
        transition: ease .4s;
    }
    .header_menue.active{
        right: 0;
        z-index: 999;
    }
    .separater{
        height: 0;
        width: 100%;
    }
   
    .menue li{
        /* padding: 5px 0; */
        height: 70px;
        width: 100%;
    }
    .menue li a {
        width: 100%;
        text-decoration: none;
        color: white;
        font-size: 18px;
        top: 50%;
        position: relative;
        transform: translateY(-50%);
        display: block;
    }
    .menue li a p{
        padding: 0;
        margin: 0;
        font-size: 14px;
    }

    .logo{
        width: 92px;
    }
    .menue{
        height: auto;
        max-width: none;
        flex-direction: column;
        justify-content: stretch;
        list-style: none;
        text-align: center;
        width: 100%;
    }
    img {
        width: 100%;
    }
    .movie_contents{
        padding: 0;
    }
    .main_fm ,.movie_fm ,.movie_contents, .smalec_sample ,
    .smalec_link ,.test_link, .test_list {
        width: 100%;
    }
        
    /* このサイトについて */
    .index_bar{
        display: none;
    }

    .site_exp_wrapper{
        background-size: cover;
        /* height: 720px; */
        height: 820px;
        font-size: 14px;
        text-align: center;
        padding-top: 27px;
        background-image: url("../img/sp_main_bg.png");
    }
    .site_exp_title{
        width: 162px;
        margin: 0 auto;
        padding: 0;
    }
    .main_fm{
        position: relative;
        height: 518px;
        width: 304px;
        border: 1.5px solid var(--unnamed-color-2e4053);
        background: #44B991 0% 0% no-repeat padding-box;
        border: 2px solid #2E4053;
        border-radius: 14px;
        left: 0;
        top: 0;
        transform: none;
        margin: 0 auto;
    }
    .site_exp_contents{
        width: calc(100% - 6px);
        padding: 6px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        height: calc(100% - 6px);
        background-color: #fff;
        border-radius: 10px;
        border: 2px solid #2E4053;
    }
    .site_exp_txt_wrap {
        margin: 0 auto;
        width: 95%;
    }
    .site_exp_text {
        font-size: 14px;
    }
    .site_exp_book{
        width: 182px;
        height: 260px;
        margin: 0 auto;
    }
    .exp_text1{
        padding: 21px 0;
    }
    .site_exp_text{
        text-align: left;
        padding: 23px 0 ;
        /* padding: 4px 0 ; */
    }
    .exp_text4{
        font-size: 16px;
        width: 80%;
        margin-bottom: 25px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .indent{
        padding-left: 1em;
        text-indent: -1em;
    }

    /* 動画 */
    .movie_wrapper{
        padding: 0 18px;
    }
    .content_tit{
        width: 314px;
        height: auto;
        padding-top: 52px!important;
    }
    .movie_text{
        font-size: 14px;
        text-align: left;
        padding-top: 26px;
        line-height: 24px;
    }
    .movie_fm{
        background-image: url(../img/sp_waku_1.png);
        width: 354px;
        height: 348px;
    }
    .movie_text2{
        font-size: 13px;
        text-align: left;
        line-height: 23px;
        padding: 18px 25px 21px 25px;
    }
    .movie_text2_parag{
        margin-bottom: 10px;
        
    }
    .movie_contents{
        margin-top: 30px;
    }
    .movie{
        width: 50%;
    }
    .movie_cap{
        width: 82%;
        font-size: 13px;
    }
    .more_view,.more_view_t,.more_view_s{
        width: 161px;
    }

    /* スマレク */
    .smart-lec_wrapper{
        padding: 0 18px;
        /* min-height: 510px; */
        min-height: 930px;
        /* max-height: 580px; */
        /* max-height:1280px;
        height: 200vw; */
    }
    .sma_lec_title{
        padding-top: 46px!important;
    }
    .smalec_text{
        font-size: 14px;
    }
    .smalec_sample_t{
        font-size: 18px;
    }
    .smalec_text2{
        font-size: 13px;
        padding-top: 33px;
        padding-bottom: 10px;
    }
    .smalec_text3{
        font-size: 12px;
        padding-top: 10px;
        padding-bottom: 25px;
    }
    .smalec_link{
        height: auto;
    }
    .smalec_sample{
        height: auto;
    }
    .smalec_movie_wrap{
        width: 100%;
    }
    .smalec_movie{
        width: 50%;
    }

    /* webtest */
    .web-test_wrapper{
        padding: 0 18px;
        height: 429px;
    }
    .web_test_title{
        padding-top: 43px!important;
    }
    .test_text{
        font-size: 14px;
        padding-top: 10px;
        padding-bottom: 28px;
    }
    .test_text_parag_sp{
        display: block;
    }
    .test_link{
        height: 58px;
    }
    .test_link_text{
        font-size: 14px;
    }

    /* 自動採点 */
    .auto-score-web-app_wrapper{
        padding: 0 18px;
    }
    .auto_score_title{
        padding-top: 43px!important;
        height: 70px;
    }
    .auto_score_text{
        font-size: 14px;
        padding-top: 15px;
        padding-bottom: 35px;
    }
    .auto_score_text_parag_sp{
        display: block;
    }
    .test_list{
        border-top: none;
    }
    .test_list tr{
        display: grid;
        height: auto;
        grid-template-columns: 45% 27% 27%;
    }
    .test_name_link{
        /* width: 40%; */
        grid-column-start: 1;
        grid-column-end: 4;
        width: 100%;
        border-bottom: none;
        padding-top: 10px;
    }
    .reference_link{
        grid-row-start: 2;
        grid-column-end: 2;
        width: 70%;
        border: none;
        padding-left: 43px;
        padding-bottom: 6px;
    }
    .nolink{
        padding-left: 26.24px;
    }
    .answer_sheet_pdf{
        grid-row-start: 2;
        grid-column-start: 2;
        /* grid-column-end: 3; */
        width: 100%;
        border: none;
        text-align: right;
        padding-bottom: 6px;
    }

    .bunseki_link{
        grid-row-start: 2;
        grid-column-start: 3;
        /* grid-column-end: 3; */
        width: 100%;
        border: none;
        text-align: right;
        padding-bottom: 6px;
    }

    .ico_test{
        width: 25px;
    }
    .test_name{
        font-size:14px;
    }
    .reference_name {
        font-size: 14px;
    }
    .reference_name_s {
        font-size: 11px;
    }
    .ico_link{
        width: 20px;
        margin-right: 6.24px;
    }

    .answer_sheet_pdf img{
        width: 94%;
    }

    .bunseki_link img{
        width: 94%;
    }

    /* フッター */
    footer{
        position: relative;
    }
    footer p{
        font-size: 10px;
    }
    .sc_top{
        display: block;
        position: absolute;
        top: -30px;
        right: 0;
        margin-right: 18px;
        width: 50px;
        height: 50px;
    }

    .news_list{
        font-size: 14px;
    }
}