.container{
    margin: 40px auto;
}
h2{
    text-align: center;
    margin-bottom: 20px;
}
.js-modal{
    display: none;
}
.js-modal-open{
    cursor: pointer;
    text-align: center;
}
.js-modal-content{
    display: none;
}
.modal{
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 999999;
}
.modal__content{
    left: 50%;
    top: 50%;
    padding: 10px;
    position: fixed;
    transform: translate(-50%,-50%);
    display: block;
    overflow-y: scroll;
    background-color: #fff;
}
.js-modal-close {
    color: #525252;
    position: absolute;
    top: 10px;
    font-size: 70px;
    right: 10%;
    cursor: pointer;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    font-weight: bold;
    box-shadow: 0 0 5px #525252;
    z-index: 10;
}
.js-tab-button{
    list-style: none;
    cursor: pointer;
}
.js-tab-content{
    display: none;
    list-style: none;
    padding: 1vw;
}
.js-tab-content[data-visibility="true"]{
    display: block;
}
.js-tab-button{
    opacity: 0.3;
}
.js-tab-button[data-selected="true"]{
    opacity: 1;
    font-weight: bold;
}
.top-content{
    background-color: #0057d9;
    /*text-shadow: 2px 2px 2px #888;*/
    text-align: center;
    color: #fff;
    font-weight: bold;
    margin-bottom: 0;
    font-size: 28px;
    padding: 8px 0;
    margin-bottom: 10px;
}
.title-main{
    width: 1000px;
    margin: 0 auto;
}
.present-ttl{
	text-align: left;
    width: 900px;
    margin: 0 auto 25px;
    color: #000;
    font-size: 28px;
    border-bottom: solid #037cd3 5px;
    line-height: 1.4;
}
.about-sentence-container{
    padding: 10px 5px;
    position: relative;
    background-color: #fff;
}
.about-sentence-container::before{
    content: "";
    width: 101%;
    height: 101%;
    position: absolute;
    top: -0.5%;
    left: -0.5%;
    background: linear-gradient(to bottom, #a3dbfd, #037cd3);
    z-index: -1;
}
.about-sentence-container img{
    width: 90%;
    display: block;
    margin: 0 auto 20px;
}
.text-center{
    text-align: center;
}
.js-menu__item__link{
    cursor: pointer;
}
#acButton {
    border: none;
    color: #00E;
    text-decoration: underline;
}
.txt_a_ac {
    display: none;
}

.present-text{
	width: 920px;
    margin: 0 auto 20px;
    font-size: 18px;
    font-weight: normal;
    line-height: 1.5;
    letter-spacing: -0.5;
}
.present-text span {
    letter-spacing: -1.3px;
    font-size: 18px;
    color: #000;
}
.present-ttl span{
    color: #000;
}
.movie{
    width: 800px;
    margin: 0 auto;
}

#global-footer {
    margin-bottom: 100px;
}
.container-wrap{
    background-image: url(../img/back_pc.png);
	background-repeat: repeat-x;
}


#feature {
    background: #ddfbf6;
}
.feature-box{
	background-color: #D8E8F7;
    padding: 20px;
    /*float: left;*/
}
.feature-flex{
	display: flex;
	justify-content: space-around;
}
.feature1,.feature2,.feature3{
	position: relative;
	border: solid 2px #222;
	/*width: 280px;*/
	background-color: #fff;
}
.feature-text-box{
	position: absolute;
    background-color: #35529E;
    /*width: 255px;*/
    top: 185px;
    left: 8px;
    border-radius: 5px;
    box-shadow: 2px 2px 3px 2px #777;
}
.feature-text{
	color: #fff;
    letter-spacing: -1px;
    font-weight: bold;
    font-size: 26px;
    margin: 0;
    text-align: center;
    line-height: 20px;
    padding: 14px 0;
}
.feature-content-ttl{
    margin-bottom: 0;
    width: 95%;
    margin: 0 auto;
    margin-top: 65px;
    font-size: 18px;
    font-weight: bold;
    line-height: 21px;
    letter-spacing: -1px;
    text-align: center;
}
.feature-content{
	margin-top: 0;
	margin-bottom: 0;
	padding: 8px;
	font-size: 15px;
    letter-spacing: -1px;
    color: #000;
}

.features_box {
    padding: 10px;
    box-shadow: 2px 2px 4px grey;
    position: relative;
    border: 5px solid #009380;
    background-color: white;
    width: 950px;
  	margin: 10px;
  	align-items: center;
}
.hidden_box label {
    padding: 15px;
    font-weight: bold;
    cursor :pointer;
}
.card_ttl {
    color: #009380;
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 10px;
}
.card_ttl span {
    font-size: 1.4em;
}
.card_subttl {
    text-align: center;
    color: black;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.2;
    height: 75px;
}
.features_box img{
    width: 96%;
    margin: 2%;
}
#feature{
    margin-bottom:30px;
}
.feature-modal{
    width: 600px;
    padding: 30px;
    border: solid 4px #009380;
}
.card_modal_txt{
    font-size: 16px;
    font-weight: bold;
    width: 350px;
  	margin-bottom: 0;
}
/*features*/
.features_box{
  width: 950px;
  margin: 10px;
  align-items: center;
}
.card_ttl{
  width: 30px;
  text-align: center;
  line-height: 1.2em;
  background: linear-gradient(transparent 65% , #FFFF00 65%, #FFFF00 90% , transparent 90%);
}
.card_ttl span {
    font-size: 1.6em;
}
.card_subttl{
  width: 250px;
    line-height: 1em;
}
.features_box img{
  width: 240px;
}
.card_modal_txt{
}
.features_box div{
  margin-left: 15px;
}
.subttlspecial{
  display: flex;
  align-items: center;
  justify-content: center;
}
/*toitsutest*/
.toitsu-text {
    margin-left: 20px;
}
.toitsu-ttl {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.2;
}
.toitsu-con {
    line-height: 1.3;
    margin-top: 20px;
    color: #000;
    font-size: 17px;
}
.toitsu-under {
    border:3px solid red;
    font-weight: bold;
    margin-top: 10px;
    padding: 2px 10px;
    background-color: #fff;
}
.toitsu-box {
    width: 950px;
    margin: 0 auto;
    padding: 20px;
    margin-top: 20px;
    background-color: #fff;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.newtest-over {
    position: relative;
}
.newtest-ttl {
    text-align: center;
    background-color: #b1e0ff;
    padding: 10px 0;
    position: relative;
}
.newtest-ttl img {
    width: 1000px;
}
.newtest-ttl::after{
    content: "";
    position: absolute;
    bottom: -100px;
    left: 50%;
    border: solid 500px transparent;
    border-top: solid 100px #b1e0ff;
    border-bottom: none;
    transform: translate(-50%, 0);
    z-index: 1;
}
.newtest-top {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    position: relative;
}
.newtest-top::after {
    content: "";
    background-color: #fdff00;
    height: 20px;
    position: absolute;
    width: 411px;
    top: 46px;
    z-index: -1;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
}
.newtest-container{
    width: 1000px;
    margin: 0 auto;
    padding-top: 100px;
}
.newtest-main {
    position: relative;
    background-color: #d9f0fe;
}
.buttons{
    margin: 50px auto 0;
    position: relative;
}
.new-test-modal{
/*    width: 1000px;
*/    max-height: 800px;
}
.modal__content img {
    width: 1000px;
}
.modal__content .content3 img {
    width: 745px;
}
.newtest-comment {
    text-align: center;
    font-size: 40px;
    font-weight: bold;
}
.newtest-comment span {
    font-size: 60px;
    color: red;
}
.future-main{
    background-color: #fff;
    position: relative;
    padding-top: 40px;
}
.future-main::before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    border: solid 50px transparent;
    border-top: solid 50px #d9f0fe;
    border-bottom: none;
    transform: translate(-50%, 0);
}
.future-main-block{
    text-align: center;
}
/*teacher-intro*/
.teacher-ttl {
	font-size: 34px;
	text-align: center;
	color: #35529E;
}
.teacher-intro {
    width: 900px;
    margin: 0 auto;
    margin-bottom: 65px;
}
.example_flex {
    display: flex;
    flex: 0 1 490px;
    margin-bottom: 20px;
}
.example_box {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
}
.example_flex:nth-child(2n+1) {
    margin-right: 20px;
}
.example_box_left {
    margin-right: 10px;
}
.example_box_left img {
    width: 130px;
}
.ex_subject {
    font-weight: bold;
    color: #FFF;
    font-size: 20px;
    padding: 0 0.5em;
}
.ex_subject_eng {
    background-color: #009380;
}
.ex_subject_math {
    background-color: #0079b5;
}
.ex_teacher {
    font-size: 20px;
    font-weight: bold;
}
.ex_content {
    font-size: 16px;
    letter-spacing: normal;
    line-height: 1.4em;
}
.container-number{
    font-size: 42px;
}
.tab-group{
    margin-bottom: 0;
    display: flex;
    justify-content: space-around;
    padding: 0;
    margin: 0 auto;
}

ul{
    padding: 0;
}

.is-active {
    opacity: 1!important;
}
.tab{
    width: 450px;
    padding:5px;
    list-style:none;
    text-align:center;
    cursor:pointer;
    color: #fff;
    font-size: 26px;
    line-height: 28px;
    font-weight: bold;
}
.panel-group{
    margin: 0 auto 20px;
    border-top:none;
    background:#fff;
    width: 950px;
}
.panel{
    display: none;
    margin-top: 70px;
    background-color: #fffadd;
}
.panel.is-show{
    display:block;
}
.tab-box{
    background-color: #FFFADD;
    padding: 60px 0;
}
.tab1{
    position: relative;
    background-color: #0057d9;
}
.tab2{
    position: relative;
    background-color: #009380;
}
.tab1::before{
    position: absolute;
    /*content: "＼小学生はこちら／";*/
    top: -35px;
    left: 110px;
    color: #000;
    font-size: 24px;
}
.tab2::before{
    position: absolute;
    /*content: "＼中学生はこちら／";*/
    top: -35px;
    left: 110px;
    color: #000;
    font-size: 24px;
}
.tab1::after{
    position: absolute;
    content: "";
    top: 66px;
    right: 0;
    border-style: solid;
    border-width: 30px 225px 0 225px;
    border-color: #0057d9 transparent transparent transparent;
}
.tab2::after{
    position: absolute;
    content: "";
    top: 66px;
    right: 0;
    border-style: solid;
    border-width: 30px 225px 0 225px;
    border-color: #009380 transparent transparent transparent;
}
.youkou-ttl{
    text-align: center;
    padding-top: 20px;
    font-size: 32px;
    font-weight: bold;
}
.youkou-ele-box{
    width: 900px;
    padding: 10px 0;
    margin: 0 auto 30px;
    border: solid 2px #0057d9;
    background-color: #fff;
}
.youkou-left{
    background-color: #0057d9;
    color: #fff;
    /* padding: 15px; */
    font-size: 24px;
    font-weight: bold;
    width: 200px;
    height: 45px;
    text-align: center;
    padding: 5px 0;
    margin: 10px 40px;
}
.youkou-right{
    width: 700px;
    margin: 0;
    line-height: 1.2;
}
.youkou-left-2{
    background-color: #009380;
    color: #fff;
    /* padding: 15px; */
    font-size: 24px;
    font-weight: bold;
    width: 200px;
    height: 45px;
    text-align: center;
    padding: 5px 0;
    margin: 10px 40px;
}
.youkou-right-2{
    width: 700px;
    margin: 0;
    line-height: 1.2;
}
.youkou-small{
    font-size: 16px;
    display: block;
    line-height: 1.2;
}
.youkou-ele-ttl{
    font-size: 28px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}
.youkou-jun-box{
    width: 900px;
    padding: 10px 0;
    margin: 0 auto 30px;
    border: solid 2px #009380;
    background-color: #fff;
}
.youkou-kouza{
    margin-bottom: 40px;
}
.youkou-flex{
    display: flex;
    align-items: center;
}
.flow-box{
    margin: 20px 0 50px;
    position: relative;
}
.flex-box{
    display: flex;
    justify-content: space-around;
}
.flow-mail{
    position: absolute;
    left: 272px;
    width: 210px;
    bottom: 15px;
    color: #d00000;
    font-size: 14px;
}
.flow-ttl{
    text-align: center;
    position: relative;
}
.flow-ttl::after{
    position: absolute;
    content: "";
    bottom: 0;
    left: 200px;
    width: 570px;
    border-bottom: solid 2px #213A7D;
}
.flow-ttl::before{
    position: absolute;
    content: "";
    top: 45px;
    left: 240px;
    width: 570px;
    border-bottom: solid 2px #213A7D;
}
.flow-content{
    border: solid 2px #213A7D;
    width: 210px;
    position: relative;
}
.flow-content img{
    display: block;
    margin: 0 auto;
}
.flow-content-last{
    border: solid 2px #213A7D;
    width: 210px;
}
.flow-content-last img{
    display: block;
    margin: 0 auto;
}
.flow-content::after{
    position: absolute;
    content: "";
    top: 83px;
    left: 219px;
    border-style: solid;
    border-width: 25px 0 25px 20px;
    border-color: transparent transparent transparent #213a7d;
}
.number{
    text-align: center;
    font-size: 36px;
    color: #213A7D;
    font-weight: bold;
    margin-bottom: 0;
}
.flow-content-ttl{
    text-align: center;
    color: #213a7d;
    font-weight: bold;
    border-bottom: dotted 2px #213a7d;
    width: 195px;
    margin: 0 auto;
}
.flow-2{
    padding: 13px 0;
}
.flow-text{
    font-size: 16px;
    margin: 0;
    padding: 5px;
    letter-spacing: -1px;
    line-height: 18px;
    color: #000;
}
.flow-note{
    width: 950px;
    margin: 65px auto 10px;
    text-align: left;
}
.step-subttl{
    font-size: 24px;
    background-color: #1CC1D5;
    font-weight: bold;
    color: #fff;
    padding: 2px;
}
.step-ttl{
    font-size: 24px;
    margin-bottom: 0;
}
#ss-step{
    background-color: #E4FBFF;
    border-top: solid 20px #1cc1d5;
    padding: 5px;
}
.ac-btn {
    text-align: center;
    text-decoration: underline;
   }

.ac-cnt {
    display: none;
}
.ss-ttl-content{
    margin: 20px 0;
}
.step-con p {
    font-size: 18px;
}
.step-maintext{
    color: #E9072C;
    text-decoration: underline;
}
.ac-cnt p {
    font-size: 18px;
}
/*東進POS動作環境*/
.pos-active {
    font-size: 25px;
    font-weight: 500;
    padding-left: 10px;
    margin-top: 30px;
    letter-spacing: -1px;
}
.pos-active span {
    font-size: 18px;
    margin-left: 10px;
}
.pos-intro {
    text-align: left;
    margin-left: 10px;
    border-bottom: 2px solid #E5E5E5;
    font-weight: 500;
    margin-bottom: 30px;
}
.pos-con {
    margin-top: 0;
    padding:0;
    counter-reset: my-counter;
}
.pos-con li:before {
        content: counter(my-counter);
    counter-increment: my-counter;
    background-color: #f5f5f5;
    border: 1px solid;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 18px;
    width: 18px;
    color: #333;
    font-size: 60%;
    line-height: 1;
    position: absolute;
    left: 20px;
    top: 13px;
}
.pos-con li {
    font-weight: 500;
    background: #F5F5F5;
    border: 1px solid #E5E5E5;
    padding: 10px;
    font-size: .9em;
    list-style: none;
    margin-bottom: 5px;
    position: relative;
    padding-left: 50px;
}

.course {
    width: 900px;
    margin: 30px auto 10px;
    padding-bottom: 30px;
    border: solid 2px #FF141B;
    padding: 10px 0;
    background-color: #fff;
}

.before-course-ele {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    padding: 10px 0;
    background-color: #ffc1c3;
    width: 900px;
    margin: 10px auto;
}

.before-course-juni {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    padding: 10px 0;
    background-color: #97d2c8;
    width: 900px;
    margin: 10px auto;
}

.course-ttl {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
}

.course-tab-group{
    display: flex;
    justify-content: center;
    color: #ff141c;
    margin: 10px auto 0;
    width: 800px;
}
.course-tab{
    flex-grow: 1;
    padding:5px;
    list-style:none;
    border:solid 1px #ff141c;
    text-align:center;
    cursor:pointer;
    border-radius: 1vw 1vw 0 0;
    background-color: #fff1f0;
}
.course-panel-group{
    height:auto;
    border:solid 1px #ff141c;
    border-top:none;
    margin:0 2vw;
    margin-bottom: 3vw;
    background-color: #fff;
    width: 800px;
    margin: 0 auto;
}
.course-panel{
    display:none;
    padding: 20px;
}
.course-tab.course-is-active{
    background:#F00;
    color:#FFF;
    transition: all 0.2s ease-out;
}
.course-panel.course-is-show{
    display:block;
}

.course-j-tab-group{
    display: flex;
    justify-content: center;
    padding: 0 2vw;
    color: #009380;
     margin-bottom: 0;
     margin-top: 10px;
}
.course-j-tab{
    flex-grow: 1;
    padding:5px;
    list-style:none;
    border:solid 1px #009380;
    text-align:center;
    cursor:pointer;
    border-radius: 1vw 1vw 0 0;
    background-color: #fff1f0;
}
.course-j-panel-group{
    height:auto;
    border:solid 1px #009380;
    border-top:none;
    margin:0 2vw;
    margin-bottom: 3vw;
    background-color: #fff;
}
.course-j-panel{
    display:none;
    padding: 20px;
}
.course-j-tab.course-j-is-active{
    background:#009380;
    color:#FFF;
    transition: all 0.2s ease-out;
}
.course-j-panel.course-j-is-show{
    display:block;
}

.course-ele {
    margin: 0 auto;
}

.course-ele td {
    border: solid 1px #000;
    font-size: 14px;
    padding: 3px 5px;
    text-align: center;
    font-size: 22px;
}

.couse-ele table {
    margin:0 auto;
}

.course-top {
    color: #fff;
    font-weight: bold;
}

.grade-ele-1 {
    background-color: #e1626b;
}

.grade-ele-2 {
    background-color: #ff9326;
}

.grade-ele-3 {
    background-color: #dcc80d;
}

.grade-ele-4 {
    background-color: #7fc69a;
}

.grade-ele-5 {
    background-color: #8eb2d2;
}

.grade-ele-6 {
    background-color: #909bc8;
}

.course-juni {
    width: 900px;
    margin: 30px auto 10px;
    padding-bottom: 30px;
    border: solid 2px #009380;
    padding: 10px 0;
    background-color: #fff;
}

.ele-1 td {
    padding: 0 3vw;
}

.ele-3 td {
    padding: 0 3vw;
}

.ele-4 td {
    padding: 0 3vw;
}

.ele-5 td {
    padding: 0 3vw;
}

.ele-6 td {
    padding: 0 3vw;
}
.teacher-btn-box{
    width: 1000px;
    margin: 0 auto;
}
.teacher-btn img{
    display: block;
    margin: 0 auto;
}
.teacher-message{
    width: 63vw;
    margin: 3vh auto;
    font-size: 16px;
    text-align: center;
}
.teacher-btn-container{
    display: flex;
    justify-content: space-around;
    width: 700px;
    margin: 0 auto;
}
.teacher-btn-container a{
    display: block;
    background-color: #201f86;
    color: #fff;
    padding: 15px 20px;
	font-size: 32px;
    border-radius: 10px;
    line-height: 36px;
    box-shadow: 3px 3px 3px #777;
    font-weight: bold;
}
.junior-teacher-button:hover{
    opacity: .8;
}
.ele-teacher-button:hover{
    opacity: .8;
}

/*easy modal*/
.modal-btn{
    cursor: pointer;
}
.modal-btn img{
    display: block;
    margin: 5% auto;
    width: 90%;
}
.modal-overlay{
    display: none;
    cursor: pointer;
}
.modal-close{
    position: fixed;
    top: 37%;
    right: 17%;
    color: #000;
    font-size: 60px;
    cursor: pointer;
    z-index: 2;
}
.modal-overlay.open{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0000009c;
    z-index: 100000;
}
.modal-overlay.open .modal-content{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    border: solid 2px #2e2e2e;
    background: #fff;
    cursor: default;
}
.modal-box{
    display: flex;
    margin: 0px auto;
}
/*kankyo*/
/* 点滅 */
.kankyo-news {
    display: block;
    -webkit-animation:blink 9s linear infinite;
    -moz-animation:blink 9s linear infinite;
    animation:blink 9s linear infinite;
}

@-webkit-keyframes blink{
    0% {opacity:0;}
    10% {opacity:1;}
    20% {opacity:0;}
    30% {opacity:1;}
    40% {opacity:0;}
    50% {opacity:1;}
    90% {opacity:1;}
    100% {opacity:0;}
}

@-moz-keyframes blink{
    0% {opacity:0;}
    10% {opacity:1;}
    20% {opacity:0;}
    30% {opacity:1;}
    40% {opacity:0;}
    50% {opacity:1;}
    90% {opacity:1;}
    100% {opacity:0;}
}

@keyframes blink{
    0% {opacity:0;}
    10% {opacity:1;}
    20% {opacity:0;}
    30% {opacity:1;}
    40% {opacity:0;}
    50% {opacity:1;}
    90% {opacity:1;}
    100% {opacity:0;}
}

.kankyo-news{
    display: flex;
    width: 750px;
    margin: 0 auto;
}
.kankyo-news-text{
    position: relative;
    font-size: 28px;
    padding-top: 20px;
    padding-left: 25px;
    margin-bottom: 0;
    font-weight: bold;
}
.kankyo-news-text::after{
    position: absolute;
    content: "";
    top: 45px;
    left: 22px;
    width: 620px;
    height: 15px;
    background-color: #fff93e;
    z-index: -2;
}
/* for Microsoft Edge */
@supports (-ms-ime-align:auto){
  .modal-overlay.open{
    background: #aaa;
  }
}

#speed-area{}

#speed-banner{
    text-align: center;
    cursor: pointer;
    animation: sizeScale 2s ease-in-out 0s infinite alternate;
}

#speed-area article{
    display: none;
    text-align: center;
}

#speed-area .next-class{
        width: 900px;
    text-align: center;
    border: 3px solid #d44f4f;
    padding: 10px;
    font-size: 2em;
    font-weight: bold;
    margin: 60px auto 0 auto;
}

@keyframes sizeScale {
    0% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1.05);
    }
}

h3{
    text-align: center;
    font-weight: bold;
    font-size: 35px;
    margin-bottom: 25px;
    margin-top: 20px;
    background-color: #009380;
    color: #fff;
    padding: 15px 0;
}

.movie{
    display: flex;
    width: 880px;
    border: dashed 4px #f6cd61;
}

.movie h3{
    width: 400px;
    margin: 40px 40px;
    font-size: 25px;
    justify-content: center;
}

.movie iframe{
    margin: 20px;
}

.bold{
    font-weight: bold;
}

/*tests-tab*/

#tests{
    width: 1000px;
    margin: 0 auto;
}

.tab-button-group{
    display: flex;
}
.tab-button{
    flex: 1;
    opacity: .5;
    list-style: none;
    color: #fff;
    font-size: 1.6rem;
    text-align: center;
    padding: 1vw 0;
}
.tab-button[data-selected="true"]{
    opacity: 1;
    font-weight: bold;
}
.tab-button[data-test="飛び級"]{
    background-color: #870000;
}
.tab-button[data-test="スキップ"]{
    background-color: #004F87;
}
.tab-button[data-test="月例"]{
    background-color: #09592C;
}
.tab-body{

}
.tab-content{
    display: none;
    list-style: none;
    padding: 1vw;
}
.tab-content[data-visibility="true"]{
    display: block;
}
.tab-content[data-test="飛び級"]{
    border: solid 2px #870000;
}
.tab-content[data-test="スキップ"]{
    border: solid 2px #004F87;
}
.tab-content[data-test="月例"]{
    border: solid 2px #09592C;
}
.tab-content-title{
    display: flex;
    align-items: center;
}
.tab-content-title h3{
    font-weight: bold;
    font-size: 1.6rem;
    margin: 0;
    flex: 1;
}
.tab-content-sub-title{
    font-size: 1.4rem;
    flex: 1.8;
    margin-bottom: 0;
    text-align: center;
}
.tab-content[data-test="飛び級"] .tab-content-title{
    border-bottom: solid 2px #870000;
}
.tab-content[data-test="スキップ"] .tab-content-title{
    border-bottom: solid 2px #004F87;
}
.tab-content[data-test="月例"] .tab-content-title{
    border-bottom: solid 2px #09592C;
}
#tests img{
    width: 98%;
}


#future{
    width: 1000px;
    margin: 0 auto;
}

#future img{
    position: relative;
    z-index: 0;
    margin: 0 auto;
    display: block;
    cursor: pointer;
}
.future-modal{
    height: 800px;
    overflow: scroll;
}

#future img:after{
    content: "クリックして詳細を見る";
    width: 100%;
    height: 60px;
    background-color: #0070c0;
    color: white;
    font-size: 24px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}

/*feature*/

.fe-attention{
    text-align: center;
}

.feature_box{
    width: 27%;
    margin: 0 3%;
  padding: 10px;
  box-shadow: 2px 2px 4px gray;
  position: relative;
  border: 5px solid #009380;
  background-color:white;
}
.feature_card{
}

.feature_card p{
  text-align: center;
}
.feature_card .card_ttl{
  color: #009380;
  font-size: 30px;
  font-weight: 900;
  margin-bottom: 10px;
}
.feature_card .card_ttl span{
  font-size: 1.4em;
}
.feature_card .card_subttl{
    text-align: center;
  color: black;
  font-weight: bold;
  font-size: 20px;
}
.card_subttl span{
  background: linear-gradient(transparent 65% , #FFFF00 65%, #FFFF00 90% , transparent 90%);
}
.feature_big{
  font-size: 1.1em;
}
.feature_red{
  color: #D1232A;
}
.card_modal{
    text-align: left;
    font-size: 16px;
    font-weight: bold;
}
.card_modal_txt{
}


/*about*/
.popup-box.present-box{
    height: 65vh;
}

.about-message{
    border: solid 2px #00053a;
    text-align: center;
    position: absolute;
    right: 10px;
    bottom: 5px;
    font-weight: bold;
    font-size: 20px;
    padding: 5px;
    margin: 0;
}

.about-message:hover{
    border-radius: 15px;
}

/*common*/
section{
    margin-top: 30px;
}



/*アコーディオン*/
/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 11px 12px;
    font-weight: bold;
    cursor :pointer;
    transition: all 0.5s;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
    display: none;
}

/*クリックで中身表示*/
.cssacc:checked + .accshow {
    height: auto;
    padding: 5px;
    opacity: 1;
    display: inline-block;
}

/*curriculum*/
[v-cloak]{
    display: none;
}
li{
    list-style: none;
}
.curriculum-category-tab-button-group{
    display: flex;
    justify-content: space-around;
    margin-bottom: 60px;
    background-color: #eee;
    border-radius: 30px;
    position: relative;
}
.curriculum-category-tab-button{
    flex: 1;
    text-align: center;
    padding: 10px 0;
    color: #fff;
    font-size: 26px;
    position: relative;
    border-radius: 30px;
    margin: 0 10px;
    z-index: 1;
    font-weight: bold;
    cursor: pointer;
}
.curriculum-category-tab-button-group::before{
    content: "";
    position: absolute;
    top: 50%;
    width: 48%;
    height: 90%;
    border-radius: 30px;
    transform: translate(0, -50%);
    transition: .5s;
    box-shadow: 1px 1px 5px 0px #474747;
}
.curriculum-category-tab-button::before{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -25px;
    height: 15px;
    border-radius: 5px;
    width: 300px;
    transform: translate(-50%, 0);
    opacity: .3;
}
.curriculum-category-tab-button::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -35px;
    border: solid 150px transparent;
    border-bottom: none;
    transform: translate(-50%, 0);
    opacity: .3;
}
.curriculum-category-tab-button[data-category="中学生"]::before{
    background-color: #009380;
}
.curriculum-category-tab-button[data-category="中学生"]::after{
    border-top: solid 10px #009380;
}
.curriculum-category-tab-button[data-category="小学生"]::before{
    background-color: #0057d9;
}
.curriculum-category-tab-button[data-category="小学生"]::after{
    border-top: solid 10px #0057d9;
}
.curriculum-category-tab-button[data-selected='true']::before{
    opacity: 1;
}
.curriculum-category-tab-button[data-selected='true']::after{
    opacity: 1;
}
.curriculum-category-tab-button[data-category="小学生"][data-selected='false']{
    color: #0057d9;
}
.curriculum-category-tab-button[data-category="中学生"][data-selected='false']{
    color: #009380;
}
.curriculum-category-tab-button-group[data-current="小学生"]::before{
    background-color: #0057d9;
    left: 51%;
}
.curriculum-category-tab-button-group[data-current="中学生"]::before{
    background-color: #009380;
    left: 1%;
}
.curriculum-tab-button-group{
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    margin-bottom: 0;
}
.curriculum-tab-button{
    padding: 5px;
    opacity: .3;
    font-size: 40px;
    color: #fff;
    font-size: 20px;
    width: 200px;
    text-align: center;
    border-radius: 0 10px 0 0;
    box-shadow: 1px 0px 5px 0px #9d9d9d;
    cursor: pointer;
}
.curriculum-tab-button[data-selected="true"]{
    padding: 10px;
    font-weight: bold;
    opacity: 1;
}
.curriculum-tab-button[data-category="jh"]{
    background-color: #009380;
}
.curriculum-tab-button[data-category="el"]{
    background-color: #0057d9;
}
.curriculum-tab-body{
    margin-top: 0;
    background-color: #fff;
}
.curriculum-tab-body[data-category="jh"]{
    border: solid 5px #009380;
}
.curriculum-tab-body[data-category="el"]{
    border: solid 5px #0057d9;
}
.curriculum-tab-content{
    padding: 20px 20px 0 20px;
}
.curriculum-swiper-title{
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    position: relative;
}
.curriculum-swiper-title[data-category="jh"]{
    color: #009380;
}
.curriculum-swiper-title[data-category="el"]{
    color: #0057d9;
}
.curriculum-swiper-title-bg{
    display: inline-block;
    position: relative;
    width: 60px;
    height: 60px;
}
.curriculum-swiper-title-bg::before{
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #fff;
    transform: translate(-50%, -25%);
    top: 50%;
    left: 50%;
    z-index: 1;
}
.curriculum-swiper-title-bg::after{
    content: "";
    position: absolute;
    border: solid 15px transparent;
    border-top: none;
}
.curriculum-swiper-title[data-category="jh"] .curriculum-swiper-title-bg::after{
    border-bottom: solid 15px #009380;
}
.curriculum-swiper-title[data-category="el"] .curriculum-swiper-title-bg::after{
    border-bottom: solid 15px #0057d9;
}
.curriculum-swiper-title-left::after{
    top: 14px;
    left: -9px;
    transform: rotate(-45deg);
}
.curriculum-swiper-title-right::after{
    bottom: -17px;
    right: -9px;
    transform: rotate(135deg);
}
.curriculum-item-block{
    display: flex;
    flex-wrap: wrap;
}
.curriculum-item{
    width: 48%;
    border-radius: 0 5px 5px 0;
    margin: 0 auto 1vw;
    border: solid 1px #ececec;
}
.curriculum-item-shadow[data-done="true"]{
    box-shadow: 0px 2px 3px #4c4c4c;
    cursor: pointer;
}
.curriculum-item-inner{
    width: 99%;
    height: 98%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0 5px 5px 0;
    display: flex;
    align-items: stretch;
    position: relative;
}
.curriculum-link{
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 20px;
}
.curriculum-link[data-category="中学生"]{
    color: #009380;
}
.curriculum-link[data-category="小学生"]{
    color: #0057d9;
}
.curriculum-item[data-category="中学生"] .curriculum-item-inner{
    border: solid 2px #009380;
}
.curriculum-item[data-category="小学生"] .curriculum-item-inner{
    border: solid 2px #0057d9;
}
.curriculum-item[data-current="true"]{
    background: #f7e3d6;
    position: relative;
}
.curriculum-item[data-current="true"]::after{
    content: "今週配信";
    font-size: 16px;
    color: red;
    top: 15px;
    left: 12px;
    font-weight: bold;
    position: absolute;
    background-color: #fff;
}
.curriculum-item-number{
    font-size: 20px;
    margin: 0;
    flex: 1;
    color: #fff;
    padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.curriculum-item[data-current="true"] .curriculum-item-number{
    padding: 50px 0 20px;
}
.curriculum-item[data-category="中学生"] .curriculum-item-number{
    background-color: #009380;
}
.curriculum-item[data-category="小学生"] .curriculum-item-number{
    background-color: #0057d9;
}
.curriculum-item-title{
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    margin: 0;
    flex: 4;
    display: flex;
    align-items: center;
    justify-content: center;
}
.button-prev{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    z-index: 100;
    cursor: pointer;
}
.button-next{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    z-index: 100;
    cursor: pointer;
}
.swiper-arrow{
    font-size: 50px;
    color: #2b2b2b;
}
.button-prev:focus{
    border: none;
    outline: none;
}
.button-next:focus{
    border: none;
    outline: none;
}
#curriculum .swiper-container{
    padding-bottom: 30px;
}
#curriculum .swiper-slide{
    height: auto!important;
    padding: 0 30px 10px;
    overflow: hidden;
}
#curriculum .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: .2;
    margin: 0 15px;
}
#curriculum .curriculum-tab-body[data-category="jh"] .swiper-pagination-bullet-active {
    opacity: 1;
    background: #009380;
}
#curriculum .curriculum-tab-body[data-category="el"] .swiper-pagination-bullet-active {
    opacity: 1;
    background: #0057d9;
}
#curriculum .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: -5px;
    left: 50%;
    width: 60%;
    transform: translate(-50%, 0);
    border: solid 1px #949494;
    border-radius: 10px 10px 0 0;
    padding: 10px 0;
    background: #fff;
    box-shadow: 0px 0px 5px 0px #949494;
}
.curriculum-modal{
    position: fixed;
    top: 0;
    left: 0;
    background-color: #6d6d6dd4;
    width: 100%;
    height: 100%;
    z-index: 100;
    cursor: pointer;
}
.curriculum-modal-body{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 50px 20px;
    border: solid 2px #2b2b2b;
    width: 700px;
    cursor: default;
}
.curriculum-date{
    font-size: 30px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 20px;
}
.curriculum-text{
    margin-top: 20px;
}
.curriclum-close{
    position: absolute;
    top: 100px;
    right: 100px;
    color: #fff;
    font-size: 70px;
    cursor: pointer;
}
.modal-curriculum-item-inner{
    border-radius: 0 5px 5px 0;
    display: flex;
    align-items: stretch;
}
.curriculum-item[data-category="中学生"] .modal-curriculum-item-inner{
    border: solid 2px #009380;
}
.curriculum-item[data-category="小学生"] .modal-curriculum-item-inner{
    border: solid 2px #0057d9;
}

.next-year p{
        font-size: 1.2em;
    font-weight: bold;
    color: #fff;
        margin-top: -60px;
}

.next-year p span{
    font-size: 1.5em;
    color: yellow;
}

#lecture{
    background-color: #ddfbf6;
    padding: 40px 0;
}
#lecture > img{
    margin:0 auto;
    display: block;
}
#lecture p{
    margin: 0;
    color: #000;
}
.lecture{
    width: 915px;
    margin: 0 auto;
}
.lecture-title{
    border: solid 10px #009380;
    background-color: #fff;
    padding: 30px;
    margin: 40px 0;
    position: relative;
}
.lecture-title p{
    text-align: center;
    font-size: 50px;
    font-weight: bolder;
    line-height: 55px;
}
.lecture-title:after{
    content: "";
    background-color: #009380;
    display: block;
    width: 120px;
    height: 35px;
    position: absolute;
    top: 6px;
    left: -34px;
    transform: rotate(-45deg);
}
.lecture-title:before{
    content: "";
    background-color: #009380;
    display: block;
    width: 120px;
    height: 35px;
    position: absolute;
    top: 201px;
    left: 813px;
    transform: rotate(-45deg);
    z-index: 3;
}
.font-toshin{
    color: #009380;
    text-shadow: 0.5px 0.5px 0 #009380, -0.5px -0.5px 0 #009380, -0.5px 0.5px 0 #009380, 0.5px -0.5px 0 #009380, 0 0.5px 0 #009380, 0 -0.5px 0 #009380, -0.5px 0 0 #009380, 0.5px 0 0 #009380;
}
.font-yotuya{
    color: #003cf0;
    text-shadow: 0.5px 0.5px 0 #003cf0, -0.5px -0.5px 0 #003cf0, -0.5px 0.5px 0 #003cf0, 0.5px -0.5px 0 #003cf0, 0 0.5px 0 #003cf0, 0 -0.5px 0 #003cf0, -0.5px 0 0 #003cf0, 0.5px 0 0 #003cf0;
}
.font-big{
    font-size: 60px;
    text-shadow: 0.5px 0.5px 0 #000, -0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px -0.5px 0 #000, 0 0.5px 0 #000, 0 -0.5px 0 #000, -0.5px 0 0 #000, 0.5px 0 0 #000;
    position: relative;
    z-index: 1;
}
.underline{
    position: relative;
}
.underline:after{
    content: "";
    background-color: #ff9999;
    display: block;
    width: 680px;
    height: 20px;
    position: absolute;
    top: 105px;
    left: 70px;
}
.underline:before{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 760px 30px 10px;
    border-color: transparent transparent #fff transparent;
    position: absolute;
    transform: rotate(178.5deg);
    top: 115px;
    left: 64px;
    z-index: 2;
}
.lecture-content p{
    font-size: 20px;
    text-shadow: 0.2px 0.2px 0 #000, -0.2px -0.2px 0 #000, -0.2px 0.2px 0 #000, 0.2px 0.2px 0 #000, 0 0.2px 0 #000, 0 -0.2px 0 #000, -0.2px 0 0 #000, 0.2px 0 0 #000;
}
.font-bold{
    font-weight: bolder;
}
.emphasize{
    font-size: 27px;
}
.lecture-image{
    text-align: center;
    margin: 50px;
}

.stepup-block{
    margin:25px 45px;
    width: 875px;
    background-color: #D8E5ED;
}
.stepup-title{
    display: flex;
}
.stepup-title-right{
}
.stepup-title-right p{
    font-weight: bold;
    letter-spacing: 0px;
    font-size: 24px;
    margin: 50px 0;
    color: #000;
}
.stepup-content{
    margin:0 2vw;
    width: 815px;
}
.stepup-content p{
    font-size: 18px;
    line-height: 35px;
    letter-spacing: -1px;
    font-weight: bold;
}
.font-blue{
    color: #00457e;
}
}
.font11{
    font-size: 11px;
}
.img{
    margin:10px 25px;
}

/*summer*/
.summer-container {
    width: 1050px;
    margin: 0 auto 30px;
}
.buttons[data-name="summer"] {
    margin: 10px auto;
}
.js-modal-open[data-name="skiptest"] {
    margin: 20px auto;
}
/* .summer-ttl {
    border-bottom: solid #037cd3 5px;
    background: #037cd3;
    color: #fff;
    font-size: 36px;
    margin: 0;
} */
.summer-modal{
/*    width: 1000px;*/
    max-height: 800px;
}

.apply_container{
    margin: 0 auto;
}