@charset "utf-8";
/* CSS Document */
/*　@カリキュラムCSS　*/




/*=======================================================================
カリキュラム　配色
=======================================================================*/
#CurriculumClass.course1 .BgInclined::before { background: var(--cc_01); }
#CurriculumClass.course2 .BgInclined::before { background: var(--cc_02); }
#CurriculumClass.course3 .BgInclined::before { background: var(--cc_03); }
#CurriculumClass.course4 .BgInclined::before { background: var(--cc_04); }
#CurriculumClass.course5 .BgInclined::before { background: var(--cc_05); }
#CurriculumClass.course6 .BgInclined::before { background: var(--cc_06); }
#CurriculumClass.course7 .BgInclined::before { background: var(--cc_07); }
#CurriculumClass.course8 .BgInclined::before { background: var(--cc_08); }
#CurriculumClass.course9 .BgInclined::before { background: var(--cc_09); }
#CurriculumClass.course10 .BgInclined::before { background: var(--cc_10); }

#CurriculumClass.course1 h3 {color: var(--cc_01);}
#CurriculumClass.course2 h3 {color: var(--cc_02);}
#CurriculumClass.course3 h3 {color: var(--cc_03);}
#CurriculumClass.course4 h3 {color: var(--cc_04);}
#CurriculumClass.course5 h3 {color: var(--cc_05);}
#CurriculumClass.course6 h3 {color: var(--cc_06);}
#CurriculumClass.course7 h3 {color: var(--cc_07);}
#CurriculumClass.course8 h3 {color: var(--cc_08);}
#CurriculumClass.course9 h3 {color: var(--cc_09);}
#CurriculumClass.course10 h3 {color: var(--cc_10);}

#CurriculumClass.course1 h3::after {border-bottom: solid 3px var(--cc_01);}
#CurriculumClass.course2 h3::after {border-bottom: solid 3px var(--cc_02);}
#CurriculumClass.course3 h3::after {border-bottom: solid 3px var(--cc_03);}
#CurriculumClass.course4 h3::after {border-bottom: solid 3px var(--cc_04);}
#CurriculumClass.course5 h3::after {border-bottom: solid 3px var(--cc_05);}
#CurriculumClass.course6 h3::after {border-bottom: solid 3px var(--cc_06);}
#CurriculumClass.course7 h3::after {border-bottom: solid 3px var(--cc_07);}
#CurriculumClass.course8 h3::after {border-bottom: solid 3px var(--cc_08);}
#CurriculumClass.course9 h3::after {border-bottom: solid 3px var(--cc_09);}
#CurriculumClass.course10 h3::after {border-bottom: solid 3px var(--cc_10);}


/*****見出し3*****************/
#CurriculumClass h3 {
    line-height: 1.1;
    text-align: center;
  font-weight: bold;
    letter-spacing: 0.05em;
}
#CurriculumClass h3::after {
    content: "";
    display: block;
    height: 5px;
}
#CurriculumClass h3 span {display: inline-block}
@media screen and (max-width: 440px) {/*ここにSP用スタイルを記述*/
  #CurriculumClass h3 {
    font-size: 5.5vw;
    margin: 2rem 0 1rem;
  }
}/*SP用スタイルここまで*/
@media screen and (min-width: 441px) {
/*ここにPC用スタイルを記述*/
    #CurriculumClass h3 {
        font-size: 24px;
        margin: 2rem 0;
    }
    #CurriculumClass h3::after {
        width: 460px;
        margin: auto;
    }
}/*PC用スタイルここまで*/





/*====================================================================
カリキュラム一覧（2+～10+が一列に並んでいるナビ部分）
====================================================================*/
.ClassNav_attention {
    font-size: 0.7rem;
    text-align: right;
}
.ClassNav {
    display: flex;
    justify-content: space-between;
}
.ClassNav li {
    list-style: none;
    margin: 0;
    line-height: 1;
  display: flex;
}
.ClassNav li:not(:last-of-type) {border-right: solid 1px #FFF}
.ClassNav a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    height: 40px;
  width: 100%;
}
.ClassNav .Class06 a { color: #000000; }

.ClassNav .ClassAbbre {
    font-weight: bold;
    margin-bottom: 3px;
}
.ClassNav a { background: var(--cc_01); }
.ClassNav .course2 a { background: var(--cc_02); }
.ClassNav .course3 a { background: var(--cc_03); }
.ClassNav .course4 a { background: var(--cc_04); }
.ClassNav .course5 a { background: var(--cc_05); }
.ClassNav .course6 a { background: var(--cc_06); }
.ClassNav .course7 a { background: var(--cc_07); }
.ClassNav .course8 a { background: var(--cc_08); }
.ClassNav .course9 a { background: var(--cc_09); }
.ClassNav .course10 a { background: var(--cc_10); }


  .ClassNav li.now a{height: 50px}

@media screen and (max-width: 440px) {
/*ここにSP用スタイルを記述*/
  .ClassNav_attention {margin: 1.75rem 0 0;}
  .ClassNav {
    flex-wrap: wrap;
    margin: 0 0 10px;
  }
  .ClassNav .ClassAbbre { font-size: 1rem; }
  .ClassNav .ClassTarget { font-size: 0.75rem; }
  .ClassNav li {width: calc((100% - 4px) / 5);margin-bottom: 1px;}
  .ClassNav li:nth-of-type(5) {border: none}
  .ClassNav li a {width: 100%}
  .ClassNav li.course1,.ClassNav li.course2,.ClassNav li.course3,.ClassNav li.course4,.ClassNav li.course5 {align-items: flex-end}
}/*SP用スタイルここまで*/

@media screen and (min-width: 441px) {
/*ここにPC用スタイルを記述*/
    .ClassNav_attention {margin: 30px 0 0;}
    .ClassNav { margin: 0 0 10px; }
    .ClassNav .ClassAbbre { font-size: 14px; }
    .ClassNav .ClassTarget { font-size: 10px; }
  .ClassNav li {width: calc((100% - 7px) / 8);}
  .ClassNav li {align-items: flex-end}
}/*PC用スタイルここまで*/




/*=======================================================================
カリキュラム　タイトル (四角い塗りつぶしBOXの部分)
=======================================================================*/
#CurriculumClass .ClassLabel {
    padding: 10px;
    line-height: 1;
    margin-bottom: 2rem;
}
@media screen and (min-width: 441px) {/*ここにPC用スタイルを記述*/
    .ClassLabel {
        display: flex;
        justify-content: space-between;
    }
}/*PC用スタイルここまで*/

/*カリキュラム名エリア
**********************************/
.ClassLabel h2 {
    margin: initial;
    line-height: 1;
    text-align: initial;
    color: initial;
}
.ClassLabel h2::after {
    width: 100%;
    background-image: none;
    border-bottom-color: #FFFFFF;
    margin: 2px 0 5px 0;
}
.ClassLabel .CTTitleArea h2.ClassTitle {
    font-family: 'cerapro-bold','Noto Sans JP', sans-serif;
    letter-spacing: 0;
    margin: 0;
}
.ClassLabel .CTTitleArea h2.ClassTitle,
.ClassLabel .CTTitleArea .Class_sub {
    color: #FFFFFF;
    font-weight: bold;
}
@media screen and (max-width: 440px) {/*ここにSP用スタイルを記述*/

    .ClassLabel .CTTitleArea .ClassTitleTarget { display: none; }
    
    .ClassLabel .CTTitleArea h2.ClassTitle,
    .ClassLabel .CTTitleArea .Class_sub {
        text-align: center;
    }
    .ClassLabel .CTTitleArea h2.ClassTitle {
        font-size: 10vw;
    }
    .ClassLabel .CTTitleArea .Class_sub {
        font-size: 1.45rem;
        margin-top: 0.5rem;
    }
}/*SP用スタイルここまで*/
@media screen and (min-width: 441px) {/*ここにPC用スタイルを記述*/
    .ClassLabel .CTTitleArea {
        display: flex;
        width: 650px;
    }
    .ClassLabel .CTTitleArea .ClassTitleTarget {
        background: #FFFFFF;
        height: 100px;
        width: 100px;
        margin-right: 20px;
    }
    .ClassLabel .CTTitleArea .ClassTitleTarget .ClassAbbre {
        font-size: 30px;
    }
    .ClassLabel .CTTitleArea .ClassTitleTarget .ClassTarget {
        font-size: 18px;
        margin-top: 5px;
    }
  .ClassLabel .CTTitleArea .ClassTitleTarget .ClassTarget span {
    display : inline-block;
    transform: scale(0.7, 1);}

  /***color設定***/
    #CurriculumClass.course1 .ClassLabel .CTTitleArea .ClassTitleTarget { color: var(--cc_01);}
    #CurriculumClass.course2 .ClassLabel .CTTitleArea .ClassTitleTarget { color: var(--cc_02);}
    #CurriculumClass.course3 .ClassLabel .CTTitleArea .ClassTitleTarget { color: var(--cc_03);}
    #CurriculumClass.course4 .ClassLabel .CTTitleArea .ClassTitleTarget { color: var(--cc_04);}
    #CurriculumClass.course5 .ClassLabel .CTTitleArea .ClassTitleTarget { color: var(--cc_05);}
    #CurriculumClass.course6 .ClassLabel .CTTitleArea .ClassTitleTarget { color: var(--cc_06);}
    #CurriculumClass.course7 .ClassLabel .CTTitleArea .ClassTitleTarget { color: var(--cc_07);}
    #CurriculumClass.course8 .ClassLabel .CTTitleArea .ClassTitleTarget { color: var(--cc_08);}
    #CurriculumClass.course9 .ClassLabel .CTTitleArea .ClassTitleTarget { color: var(--cc_09);}
    #CurriculumClass.course10 .ClassLabel .CTTitleArea .ClassTitleTarget { color: var(--cc_10);}
  
    .ClassLabel .CTTitleArea .ClassTitleBox {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 530px;        
    }
    .ClassLabel .CTTitleArea h2.ClassTitle {
        font-size: 48px;
    }
    #WSA .ClassLabel .CTTitleArea h2.ClassTitle {
        font-size: 44px;
    }
    .ClassLabel .CTTitleArea .Class_sub {
        font-size: 20px;
    }
    .ClassLabel .CTTitleArea h2.ClassTitle::before,
    .ClassLabel .CTTitleArea .Class_sub::before {
        display: inline-block;
        content: "";
        width: 10px;
    }
}/*PC用スタイルここまで*/
@media all and (-ms-high-contrast: none){/*IEハック*/
    .ClassLabel .CTTitleArea h2.ClassTitle {
        line-height: 20px;
        margin-top: 20px;
        text-align: left;
    }

}

/*ターゲット
************************************************/
.ClassLabel .CTCommentaryArea {
    display: flex;
    align-items: center;
}
.ClassLabel .CTCommentaryArea span {
    display: block;
}
.ClassLabel .CTCommentaryArea .CTCommentary {
    text-align: right;
}
.ClassLabel .CTCommentaryArea .CTCommentary .CTCmain {
    font-weight: bold;
}
.ClassLabel .CTCommentaryArea .CTCommentary .CTCsub {
    line-height: 1.2;
    margin-top: 3px;
}
.ClassLabel .ClassTitleTarget {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-align: center;
}

@media screen and (max-width: 440px) {/*ここにSP用スタイルを記述*/
  .ClassLabel .CTCommentaryArea {
      display: flex;;
      justify-content: space-between;
      align-items: center;
      background: #FFFFFF;
      margin-top: 10px;
      padding: 10px;
  }
  .ClassLabel .CTCommentaryArea .ClassTitleTarget .ClassAbbre {
      font-size: 1.7rem;
      margin-bottom: 5px;
  }

  #CurriculumClass.course2 .ClassLabel .CTCommentaryArea .ClassTitleTarget,
  #CurriculumClass.course3 .ClassLabel .CTCommentaryArea .ClassTitleTarget,
  #CurriculumClass.course4 .ClassLabel .CTCommentaryArea .ClassTitleTarget,
  #CurriculumClass.course5 .ClassLabel .CTCommentaryArea .ClassTitleTarget,
  #CurriculumClass.course6 .ClassLabel .CTCommentaryArea .ClassTitleTarget   
  #CurriculumClass.course7 .ClassLabel .CTCommentaryArea .ClassTitleTarget,
  #CurriculumClass.course8 .ClassLabel .CTCommentaryArea .ClassTitleTarget{
      width: 8.5rem;
  }    
  #CurriculumClass.course10 .ClassLabel .CTCommentaryArea .ClassTitleTarget{
      width: 9.5rem;
  }
  /***color設定***/
  #CurriculumClass.course1 .ClassLabel .CTCommentaryArea { color: var(--cc_01);}
  #CurriculumClass.course2 .ClassLabel .CTCommentaryArea { color: var(--cc_02);}
  #CurriculumClass.course3 .ClassLabel .CTCommentaryArea { color: var(--cc_03);}
  #CurriculumClass.course4 .ClassLabel .CTCommentaryArea { color: var(--cc_04);}
  #CurriculumClass.course5 .ClassLabel .CTCommentaryArea { color: var(--cc_05);}
  #CurriculumClass.course6 .ClassLabel .CTCommentaryArea { color: var(--cc_06);}
  #CurriculumClass.course7 .ClassLabel .CTCommentaryArea { color: var(--cc_07);}
  #CurriculumClass.course8 .ClassLabel .CTCommentaryArea { color: var(--cc_08);}
  #CurriculumClass.course9 .ClassLabel .CTCommentaryArea { color: var(--cc_09);}
  #CurriculumClass.course10 .ClassLabel .CTCommentaryArea { color: var(--cc_10);}
}/*SP用スタイルここまで*/

@media screen and (min-width: 441px) {/*ここにPC用スタイルを記述*/
  .ClassLabel .CTCommentaryArea { color: var(--color_white); }
  .ClassLabel .CTCommentaryArea .ClassTitleTarget { display: none; }
}/*PC用スタイルここまで*/

/***color設定***/
#CurriculumClass.course1 .ClassLabel { background: var(--cc_01); }
#CurriculumClass.course2 .ClassLabel { background: var(--cc_02); }
#CurriculumClass.course3 .ClassLabel { background: var(--cc_03); }
#CurriculumClass.course4 .ClassLabel { background: var(--cc_04); }
#CurriculumClass.course5 .ClassLabel { background: var(--cc_05); }
#CurriculumClass.course6 .ClassLabel { background: var(--cc_06); }
#CurriculumClass.course7 .ClassLabel { background: var(--cc_07); }
#CurriculumClass.course8 .ClassLabel { background: var(--cc_08); }
#CurriculumClass.course9 .ClassLabel { background: var(--cc_09); }
#CurriculumClass.course10 .ClassLabel { background: var(--cc_10); }




/*=======================================================================
このコースは現在はまだ開講しておりません
=======================================================================*/
.not_course {
  border: solid 3px #999999;
  background: #eeeeee;
  padding: 1rem;
  margin: -1rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.not_course h2 {
  font-weight: bold;
  margin: 0 0 1rem;
color: var(--color_base);
}
.not_course h2::after {border-color: var(--color_base); }

@media screen and (max-width: 440px) {/*ここにSP用スタイルを記述*/
  .not_course h2 {font-size: 4vw}
}/*SP用スタイルここまで*/
@media screen and (min-width: 441px) {/*ここにPC用スタイルを記述*/
}/*PC用スタイルここまで*/



/*=======================================================================
カリキュラム　概要
=======================================================================*/
.ClassAbout .ClassAbout_text .TxtBox {padding-top: 0;}

/***おもに高めるスキル***/
#CurriculumClass .MainLearning h3 {margin: 0 0 1.5rem}
.MainLearning {
  border: solid 3px var(--color_white);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 5;
}
.MainLearning::before,.MainLearning::after {
  content: "";
  position: absolute;
  top: 0;bottom: 0;left: 0;right: 0; 
}
.MainLearning::before {background: var(--color_white);z-index: -5;}
.MainLearning::after {z-index: -4}
.MainLearning .MainLearning_List li {
  text-indent: -1.5em;
  margin-left: 1.5em;
}
.MainLearning .MainLearning_List li::before {
  content: "\f14a";
  font:var(--fa-font-solid);
  margin-right: 0.5em;
}

@media screen and (max-width: 440px) {
/*ここにSP用スタイルを記述*/
  .ClassAbout .ClassAbout_text { margin-top: 2rem; }
}/*SP用スタイルここまで*/
@media screen and (min-width: 441px) {
/*ここにPC用スタイルを記述*/
    .ClassAbout {
        display: flex;
        justify-content: space-between;
    }
    .ClassAbout .ClassAbout_text {
        width: calc(100% - 470px);
        margin-left: 20px;
    }
  .ClassAbout figure {width: 450px}
}/*PC用スタイルここまで*/

/***color設定***/
#CurriculumClass.course1 .MainLearning::after {background: var(--cc_01_light);}
#CurriculumClass.course2 .MainLearning::after {background: var(--cc_02_light);}
#CurriculumClass.course3 .MainLearning::after {background: var(--cc_03_light);}
#CurriculumClass.course4 .MainLearning::after {background: var(--cc_04_light);}
#CurriculumClass.course5 .MainLearning::after {background: var(--cc_05_light);}
#CurriculumClass.course6 .MainLearning::after {background: var(--cc_06_light);}
#CurriculumClass.course7 .MainLearning::after {background: var(--cc_07_light);}
#CurriculumClass.course8 .MainLearning::after {background: var(--cc_08_light);}
#CurriculumClass.course9 .MainLearning::after {background: var(--cc_09_light);}
#CurriculumClass.course10 .MainLearning::after {background: var(--cc_10_light);}




/*=======================================================================
レッスン内容・指定教材
=======================================================================*/
.FlexItem {background: var(--color_white);}

/***見出し***/
.ClassFlex h4 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--color_white);
  font-weight: bold;
  line-height: 1.3;
    padding: 0.5rem 1.5rem;
}
.ClassFlex h4 span span {display: inline-block}
.ClassFlex h4::before ,
.ClassFlex h4::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.ClassFlex h4::before {
    background:
        linear-gradient(315deg, var(--color_white) 1.3rem, transparent 1.3rem);
    background-position: top left;
    background-size: 100%;
    background-repeat: no-repeat;
}
.ClassFlex h4::after {
    background:
        linear-gradient(135deg, var(--color_white) 1.3rem, transparent 1.3rem);
    background-position: bottom right;
    background-size: 100%;
    background-repeat: no-repeat;
}

.ClassFlex .FlexItem .FlexImg {
  text-align: center;
  margin: 10px 0 ;
}

/***ユニット***/
.ClassFlex .FlexItem .unit span {
  display: inline-block;
  font-weight: bold;
  padding: 0.5rem 1rem;
  line-height: 1;
  color: var(--color_white);
}

/***箇条書き***/
.ClassFlex .FlexTxt ul {text-align: center; margin: 0.5em 0;}
.ClassFlex .FlexTxt ul li {
  display: inline-block;
  font-weight: bold;
}
.ClassFlex .FlexTxt ul li::before {content: "・"}
.ClassFlex .FlexTxt ul li:nth-child(n+2) {margin-left:0.5em}

/*6+7+など「カリキュラムとテーマ」が１カリキュラム2テーマで構成されているイレギュラー対応*/
.ClassFlex .FlexItem .unit.col1 span {
  display: block;
  text-align: center;
  font-size: 1.3;
  padding: 1rem;
  margin-bottom: 1rem;
}
.ClassFlex .FlexItem .inner_flex p + h4 {margin-top: 2rem}
.ClassFlex .FlexItem .inner_flex h4 + p {margin-top: 1rem}


/***補足説明***/
.ClassFlex dl.about {
  padding: 1rem;
}
.ClassFlex dl.about dt {
  font-weight: bold;
  margin-bottom: 1rem;
}

@media screen and (max-width: 440px) {/*ここにSP用スタイルを記述*/
  .ClassFlex .FlexItem { margin-bottom: 1rem; }
  .ClassFlex h4 { font-size: 4.5vw; }
  .ClassFlex .FlexTxt { padding: 0 10px 10px; }
}/*SP用スタイルここまで*/
@media screen and (min-width: 441px) {/*ここにPC用スタイルを記述*/
  .ClassFlex {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: -20px;
  }
  .ClassFlex .FlexItem {
      width: calc((100% - 20px) / 2);
      margin-bottom: 20px;
    display: flex;
    flex-direction: column;
  }
  
  .ClassFlex h4 { font-size: 20px; }
  .ClassFlex .FlexTxt {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 0 15px 15px;
  }
  .ClassFlex .FlexTxt .grow1{flex-grow: 1;}/*余白調節用/course10で使用してます*/
  
  /*１列で表示するとき*/
  .ClassFlex .FlexItem.col1 {width: 100%}
  .ClassFlex .FlexItem.col1 .inner_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .ClassFlex .FlexItem.col1:nth-child(2n) .inner_flex {flex-direction: row-reverse}
  .ClassFlex .FlexItem.col1 .inner_flex .FlexImg,
  .ClassFlex .FlexItem.col1 .inner_flex .FlexTxt {width: calc((100% - 20px) / 2);}
  .ClassFlex .FlexItem.col1 .inner_flex .FlexImg {text-align: center;}

}/*PC用スタイルここまで*/

/***color設定**/
#CurriculumClass.course1 .ClassFlex h4 { background:var(--cc_01); }
#CurriculumClass.course2 .ClassFlex h4 { background:var(--cc_02); }
#CurriculumClass.course3 .ClassFlex h4 { background:var(--cc_03); }
#CurriculumClass.course4 .ClassFlex h4 { background:var(--cc_04); }
#CurriculumClass.course5 .ClassFlex h4 { background:var(--cc_05); }
#CurriculumClass.course6 .ClassFlex h4 { background:var(--cc_06); }
#CurriculumClass.course7 .ClassFlex h4 { background:var(--cc_07); }
#CurriculumClass.course8 .ClassFlex h4 { background:var(--cc_08); }
#CurriculumClass.course9 .ClassFlex h4 { background:var(--cc_09); }
#CurriculumClass.course10 .ClassFlex h4 { background:var(--cc_10); }

#CurriculumClass .ClassFlex .FlexItem .unit.Inventor span {background: var(--inventor);}
#CurriculumClass .ClassFlex .FlexItem .unit.WS span {background: var(--world_science);}
#CurriculumClass .ClassFlex .FlexItem .unit.WC1 span {background: var(--world_coding_1);}
#CurriculumClass .ClassFlex .FlexItem .unit.WC2 span {background: var(--world_coding_2); color: var(--color_black);}
#CurriculumClass .ClassFlex .FlexItem .unit.SP span {background: var(--spike_python); color: var(--color_black);}

#CurriculumClass.course6 .ClassFlex .FlexTxt ul li {color: var(--world_science);}
#CurriculumClass.course7 .ClassFlex .FlexTxt ul li {color: var(--world_science);}
#CurriculumClass.course8 .ClassFlex .FlexTxt ul li {color: var(--color_orange);}

#CurriculumClass.course1 .ClassFlex dl.about { background:var(--cc_01_light); }
#CurriculumClass.course2 .ClassFlex dl.about { background:var(--cc_02_light); }
#CurriculumClass.course3 .ClassFlex dl.about { background:var(--cc_03_light); }
#CurriculumClass.course4 .ClassFlex dl.about { background:var(--cc_04_light); }
#CurriculumClass.course5 .ClassFlex dl.about { background:var(--cc_05_light); }
#CurriculumClass.course6 .ClassFlex dl.about { background:var(--cc_06_light); }
#CurriculumClass.course7 .ClassFlex dl.about { background:var(--cc_07_light); }
#CurriculumClass.course8 .ClassFlex dl.about { background:var(--cc_08_light); }
#CurriculumClass.course9 .ClassFlex dl.about { background:var(--cc_09_light); }
#CurriculumClass.course10 .ClassFlex dl.about { background:var(--cc_10_light); }