@charset "UTF-8";
/* parts css file */


#contants_bg {
  background: url(../../images/demo/bg.gif);
  position: relative;
  width: 100%;
  padding-top: 220px;
}

.long {
  max-width: 100%;
  margin: 0 auto;
}

.long.sp {
  width: 320px;
}

.long img {
  width: 100%;
  height: auto;
}

/* --- header --- */
header {
  box-shadow: none;
}

#header {
  width: 100%;
  font-size: .875rem;
  position: fixed;
  z-index: 3;
  top: 90px;
}

header nav[role="navigation"] a {
  text-decoration: none;
}

.headerTop {
  width: 100%;
  height: 65px;
  background: #333;
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.headerBtn li {
  display: inline-block;
  color: #52AB7F;
  font-size: 20px;
  font-weight: bold;
  vertical-align: middle;
}

.headerBtn li i {
  font-size: 1rem;
  vertical-align: middle;
}

.headerBtn li.action a {
  color: #56a57d;
  font-size: 1rem;
  text-align: left;
  padding: 0 10px 0 0;
  text-decoration: none;
  display: block;
}

.headerBtn li.action span {
  color: #fff;
  font-size: .75rem;
  font-weight: normal;
  padding: 3px;
  display: block;
}

/* --------------------------------

BUTTON

-------------------------------- */

.btn_container {
  margin: 2em auto;
  width: 100%;
  text-align: center;
}

.btn {
  width: 400px;
  height: 70px;
  line-height: 70px;
  border-radius: 10px;
  display: inline-block;
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
  margin: 0 1em;
  text-decoration: none;
}

.btn.round {
  width: 240px;
  height: 50px;
  line-height: 50px;
  border-radius: 25px;
  font-size: 1rem;
}

.btn.small {
  padding: 0 10px;
  width: auto;
  min-width: 180px;
  height: 40px;
  line-height: 40px;
  border-radius: 18px;
  font-size: .875rem;
}

.btn.large {
  width: 360px;
  height: 80px;
  line-height: 80px;
  border-radius: 40px;
  font-size: 1.25rem;
}

.btn.important {
  color: #fff;
  background: #ff8400;
  background: linear-gradient(#ff8400, #fb744a);
}

.btn.important:hover {
  background: #e74a19;
  background: linear-gradient(#fb744a, #e74a19);
}

.btn.primary {
  color: #fff;
  background: #56a57d;
  background: linear-gradient(#90c075, #56a57d);
  box-shadow: 0 3px 7px 0 #56a57d;
}

.btn.primary:hover {
  background: #3e8662;
  background: linear-gradient(#56a57d, #71aa53);
}

.btn img {
  vertical-align: middle;
  padding-right: 5px;
}

/*--------------- PC my ---------------*/
#wrapper {
  display: none;
  position: absolute;
  top: 0;
  width: 950px;
  margin: 0 auto;
  padding-left: 38px;
}

#columnL {
  float: left;
  width: 610px;
  position: relative;
  z-index: 2;
}

#columnR {
  float: left;
  width: 270px;
  position: relative;
  z-index: 2;
}

#head {
  top: 0;
  width: 950px;
  height: 475px;
}

.headerMenu,
.footerMenu {
  width: 100%;
  max-width: 1000px;
  height: 50px;
  margin: 0 auto;
  line-height: 50px !important;
  display: table;
  table-layout: fixed;
}

.headerMenu li,
.footerMenu li {
  background: #424242;
  border-right: 1px solid #66624f;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.headerMenu li:first-child,
.footerMenu li:first-child {
  border-left: 1px solid #66624f;
}

.headerMenu li a,
.footerMenu li a {
  color: #fff;
  text-decoration: none;
  display: block;
}

.headerMenu li a i,
.footerMenu li a i {
  vertical-align: middle;
  padding-right: 10px;
}

.headerMenu li a.selected,
.footerMenu li a.selected {
  background: #b9a551;
  color: #fff;
  position: relative;
  line-height: 50px;
}

.headerMenu li a.selected:after {
  content: "";
  position: absolute;
  top: 44px;
  left: 50%;
  z-index: 4;
  border-top: 7px solid #b9a551;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  margin-left: -7px;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.headerMenu li a:hover,
.footerMenu li a:hover {
  background: #c9b35c;
  line-height: 50px;
}

.headerMenu a.selected .icon-magic-wand,
.headerMenu a.selected .icon-display,
.headerMenu a.selected .icon-mobile,
.headerMenu a.selected .icon-cog,
.footerMenu a.selected .icon-magic-wand,
.footerMenu a.selected .icon-display,
.footerMenu a.selected .icon-mobile,
.footerMenu a.selected .icon-cog {
  margin-right: 10px;
  color: #444;
  font-size: 25px;
  vertical-align: middle;
}

.headerMenu .icon-magic-wand,
.headerMenu .icon-display,
.headerMenu .icon-mobile,
.headerMenu .icon-cog,
.footerMenu .icon-magic-wand,
.footerMenu .icon-display,
.footerMenu .icon-mobile,
.footerMenu .icon-cog {
  margin-right: 10px;
  color: #fff;
  font-size: 25px;
  vertical-align: middle;
}

.headerInnerWrap,
.footerInnerWrap {
  width: 100%;
  background: #b5ab81;
}

.headerInner,
.footerInner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: table;
  table-layout: fixed;
}


.headerInner li,
.footerInner li {
  display: table-cell;
  padding: 1em;
}

.headerInner li a,
.footerInner li a {
  color: #fff;
  display: block;
  text-decoration: none;
}

.headerInner li.active {
  border-bottom: 4px solid #424242;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.headerInner li.active a {
  color: #fff;
}

.headerInner li a:hover,
.footerInner li a:hover {
  color: #c4c4c4;
}

.headerMenuWrap {
  width: 100%;
  background: #424242;
}

#tab4 {
  font-size: 12px;
}

#logo {
  float: left;
  display: block;
  background: url(../../images/demo/home.png) no-repeat 40px 0;
  width: 150px;
  height: 0;
  margin: 15px 0 0 100px;
  padding: 38px 0 0 0;
  overflow: hidden;
}

/* --- footer --- */
#footer {
  width: 100%;
  z-index: 3;
  font-size: 14px;
  background: #000;
  text-align: center;
  height: 60px;
  line-height: 60px;
}

#footer p {
  padding: 10px;
  text-align: center;
  color: #777;
  background: #333;
  font-size: 12px;
  line-height: 60px;
}

.footerMenu li a.selected:after {
  content: "";
  position: absolute;
  bottom: 44px;
  left: 50%;
  z-index: 3;
  border-top: 7px solid #b9a551;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  margin-left: -7px;
}

.footerInner li.active {
  height: 50px;
  padding: 0 20px 4px;
  color: #fff;
  border-top: 4px solid #a74a79;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.footerMenuWrap {
  width: 100%;
  background: #424242;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.7);
}

@media (max-width: 768px) {

  .headerTop {
    height: auto;
    display: block;
  }

  .headerTop p {
    padding: 10px;
  }

  .headerBtn {
    padding: 10px 0 10px 10px;
    border-top: 1px solid #222;
    text-align: right;
  }

  .headerMenu li a span,
  .footerMenu li a span {
    display: none;
  }

  .headerInner li,
  .footerInner li {
    font-size: .75rem;
  }

  .btn.small {
    width: auto;
  }

}

/*--------------- TOP ---------------*/

#head-top {
  top: 0;
  width: 950px;
  height: 352px;
}

#course {
  border: dashed 3px #FF7B1A;
  width: 605px;
  height: 340px;
  transition: opacity .5s;
  opacity: 0.2;
  margin-top: 11px;
}

#course:hover {
  opacity: 1;
}

#news {
  border: dashed 3px #FF7B1A;
  width: 295px;
  height: 340px;
  transition: opacity .5s;
  opacity: 0.2;
  margin-top: 11px;
}

#news:hover {
  opacity: 1;
}

#groupTraining {
  /*background: green;*/
  border: dashed 3px #FF7B1A;
  width: 295px;
  height: 95px;
  margin-top: 11px;
  transition: opacity .5s;
  opacity: 0.2;
}

#groupTraining:hover {
  opacity: 1;
}

#otherRecture {
  /*background: green;*/
  border: dashed 3px #FF7B1A;
  width: 295px;
  height: 165px;
  transition: opacity .5s;
  opacity: 0.2;
}

#otherRecture:hover {
  opacity: 1;
}

#status {
  border: dashed 3px #FF7B1A;
  width: 605px;
  height: 365px;
  margin-bottom: 30px;
  transition: opacity .5s;
  opacity: 0.2;
}

#status:hover {
  opacity: 1;
}

#message {
  /*background: cyan;*/
  border: dashed 3px #FF7B1A;
  width: 295px;
  height: 660px;
  transition: opacity .5s;
  opacity: 0.2;
}

#message:hover {
  opacity: 1;
}

#score {
  /* background: white; */
  /* float: left; */
  border: dashed 3px #FF7B1A;
  width: 605px;
  height: 360px;
  transition: opacity .5s;
  opacity: 0.2;
  margin-top: 50px;
}

#score:hover {
  opacity: 1;
}

#rival {
  /*background: black;*/
  float: left;
  border: dashed 3px #FF7B1A;
  width: 315px;
  height: 524px;
  transition: opacity .5s;
  opacity: 0.2;
}

#rival:hover {
  opacity: 1;
}

#groupTraining2 {
  border: dashed 3px #FF7B1A;
  width: 605px;
  height: 590px;
  margin-top: 50px;
  transition: opacity .5s;
  opacity: 0.2;
}

#groupTraining2:hover {
  opacity: 1;
}


/*--------------- PC lecture ---------------*/

#columnL a.inline {
  display: block;
  position: relative;
  z-index: 2;
}

#pcLecture {
  border: dashed 3px #FF7B1A;
  margin: 100px 0 0 0;
  width: 605px;
  height: 550px;
  transition: opacity .5s;
  opacity: 0.2;
  z-index: 0;
}

#pcLecture:hover {
  opacity: 1;
}

#pcLecture_comment {
  border: dashed 3px #FF7B1A;
  margin: 77px 0 0 0;
  width: 605px;
  height: 318px;
  transition: opacity .5s;
  opacity: 0.2;
}

#pcLecture_comment:hover {
  opacity: 1;
}

#pcLecture_start {
  border: dashed 3px #FF7B1A;
  margin: 64px 0 0 16px;
  width: 245px;
  height: 60px;
  transition: opacity .5s;
  opacity: 0.2;
}

#pcLecture_start:hover {
  opacity: 1;
}

#pcLecture_test {
  border: dashed 3px #FF7B1A;
  margin: 34px 0 0 16px;
  width: 245px;
  height: 48px;
  transition: opacity .5s;
  opacity: 0.2;
}

#pcLecture_test:hover {
  opacity: 1;
}

#pcLecture_next {
  border: dashed 3px #FF7B1A;
  margin: 16px 0 0 0;
  width: 295px;
  height: 130px;
  transition: opacity .5s;
  opacity: 0.2;
}

#pcLecture_next:hover {
  opacity: 1;
}




/*--------------- PC test ---------------*/

#pcTest_score {
  border: dashed 3px #FF7B1A;
  width: 605px;
  height: 290px;
  transition: opacity .5s;
  opacity: 0.2;
}

#pcTest_score:hover {
  opacity: 1;
}


#pcTest_list {
  border: dashed 3px #FF7B1A;
  margin-top: 50px;
  width: 605px;
  height: 390px;
  transition: opacity .5s;
  opacity: 0.2;
}

#pcTest_list:hover {
  opacity: 1;
}


#pcTest_graph {
  border: dashed 3px #FF7B1A;
  margin-top: 40px;
  width: 605px;
  height: 475px;
  transition: opacity .5s;
  opacity: 0.2;
}

#pcTest_graph:hover {
  opacity: 1;
}







/*--------------- SmartPhone my ---------------*/
#smWrapper {
  position: absolute;
  top: 0;
  width: 320px;
  height: 1500px;
  margin: 0 auto;
  z-index: 2;
}

#smWrapper2 {
  position: absolute;
  top: 0;
  width: 353px;
  height: 1500px;
  margin: 0 auto;
  z-index: 2;
}

#smHead {
  width: 320px;
  height: 120px;
  top: 0;
  margin-top: 178px;
}

#smAchievement {
  border: dashed 3px #FF7B1A;
  width: 315px;
  height: 75px;
  margin-top: 155px;
  transition: opacity .5s;
  opacity: 0.2;
}

#smAchievement:hover {
  opacity: 1;
}


#smStatus {
  border: dashed 3px #FF7B1A;
  width: 210px;
  height: 40px;
  margin-left: 105px;
  transition: opacity .5s;
  opacity: 0.2;
}

#smStatus:hover {
  opacity: 1;
}

#smOtherRecture {
  border: dashed 3px #FF7B1A;
  width: 315px;
  height: 325px;
  transition: opacity .5s;
  opacity: 0.2;
}

#smOtherRecture:hover {
  opacity: 1;
}

#smOtherRecture2 {
  border: dashed 3px #FF7B1A;
  width: 315px;
  height: 35px;
  margin-top: 33px;
  transition: opacity .5s;
  opacity: 0.2;
}

#smOtherRecture2:hover {
  opacity: 1;
}

#smWeak {
  border: dashed 3px #FF7B1A;
  width: 315px;
  height: 36px;
  transition: opacity .5s;
  opacity: 0.2;
}

#smWeak:hover {
  opacity: 1;
}

#smScore {
  border: dashed 3px #FF7B1A;
  width: 315px;
  height: 36px;
  transition: opacity .5s;
  opacity: 0.2;
}

#smScore:hover {
  opacity: 1;
}

#smRival {
  border: dashed 3px #FF7B1A;
  width: 315px;
  height: 36px;
  transition: opacity .5s;
  opacity: 0.2;
}

#smRival:hover {
  opacity: 1;
}

#smQuestion {
  border: dashed 3px #FF7B1A;
  width: 315px;
  height: 36px;
  transition: opacity .5s;
  opacity: 0.2;
}

#smQuestion:hover {
  opacity: 1;
}

#smAnswer {
  border: dashed 3px #FF7B1A;
  width: 315px;
  height: 45px;
  transition: opacity .5s;
  opacity: 0.2;
}

#smAnswer:hover {
  opacity: 1;
}






/*--------------- SmartPhone lecture ---------------*/
#smLecture_video {
  border: dashed 3px #FF7B1A;
  margin-top: 95px;
  width: 315px;
  height: 45px;
  transition: opacity .5s;
  opacity: 0.2;
}

#smLecture_video:hover {
  opacity: 1;
}

#smLecture_download {
  border: dashed 3px #FF7B1A;
  margin-top: 474px;
  width: 315px;
  height: 30px;
  transition: opacity .5s;
  opacity: 0.2;
}

#smLecture_download:hover {
  opacity: 1;
}

#smLecture_test {
  border: dashed 3px #FF7B1A;
  margin: 0;
  width: 315px;
  height: 55px;
  transition: opacity .5s;
  opacity: 0.2;
}

#smLecture_test:hover {
  opacity: 1;
}

#smLecture_comment {
  border: dashed 3px #FF7B1A;
  margin-top: 0;
  width: 315px;
  height: 35px;
  transition: opacity .5s;
  opacity: 0.2;
}

#smLecture_comment:hover {
  opacity: 1;
}

#smLecture_ask {
  border: dashed 3px #FF7B1A;
  margin-top: 76px;
  width: 315px;
  height: 35px;
  transition: opacity .5s;
  opacity: 0.2;
}

#smLecture_ask:hover {
  opacity: 1;
}




/*--------------- SmartPhone test ---------------*/

#smTest_testlist {
  border: dashed 3px #FF7B1A;
  margin: 90px 0 0 155px;
  width: 160px;
  height: 45px;
  transition: opacity .5s;
  opacity: 0.2;
}

#smTest_testlist:hover {
  opacity: 1;
}

#smTest_score {
  border: dashed 3px #FF7B1A;
  margin-top: 90px;
  width: 315px;
  height: 1290px;
  transition: opacity .5s;
  opacity: 0.2;
}

#smTest_score:hover {
  opacity: 1;
}





/*--------------- PC user admin ---------------*/

#head_admin {
  top: 0;
  width: 950px;
  height: 319px;
}

#columnL_admin {
  float: left;
  width: 210px;
  min-height: 10px;
  position: relative;
  z-index: 2;
}

#columnR_admin {
  float: left;
  width: 710px;
  min-height: 10px;
  position: relative;
  z-index: 2;
}

#userAdmin_question {
  border: dashed 3px #FF7B1A;
  margin-top: 150px;
  width: 210px;
  height: 41px;
  transition: opacity .5s;
  opacity: 0.2;
}

#userAdmin_question:hover {
  opacity: 1;
}

#userAdmin_answer {
  border: dashed 3px #FF7B1A;
  width: 210px;
  height: 40px;
  transition: opacity .5s;
  opacity: 0.2;
}

#userAdmin_answer:hover {
  opacity: 1;
}

#userAdmin_tweet {
  border: dashed 3px #FF7B1A;
  width: 210px;
  height: 40px;
  transition: opacity .5s;
  opacity: 0.2;
}

#userAdmin_tweet:hover {
  opacity: 1;
}

#userAdmin_comment {
  border: dashed 3px #FF7B1A;
  width: 210px;
  height: 40px;
  transition: opacity .5s;
  opacity: 0.2;
}

#userAdmin_comment:hover {
  opacity: 1;
}

#userAdmin_new {
  border: dashed 3px #FF7B1A;
  margin: 120px 0 0 23px;
  width: 210px;
  height: 35px;
  transition: opacity .5s;
  opacity: 0.2;
}

#userAdmin_new:hover {
  opacity: 1;
}

#userAdmin_search {
  border: dashed 3px #FF7B1A;
  margin: 7px 0 0 23px;
  width: 657px;
  height: 225px;
  transition: opacity .5s;
  opacity: 0.2;
}

#userAdmin_search:hover {
  opacity: 1;
}

#userAdmin_result {
  border: dashed 3px #FF7B1A;
  margin: 152px 0 0 23px;
  width: 657px;
  height: 1450px;
  transition: opacity .5s;
  opacity: 0.2;
}

#userAdmin_result:hover {
  opacity: 1;
}




/*--------------- lecture admin pc ---------------*/

#lectureAdmin_setting {
  border: dashed 3px #FF7B1A;
  margin-top: 16px;
  width: 210px;
  height: 42px;
  transition: opacity .5s;
  opacity: 0.2;
}

#lectureAdmin_setting:hover {
  opacity: 1;
}

#lectureAdmin_course {
  border: dashed 3px #FF7B1A;
  width: 210px;
  height: 39px;
  transition: opacity .5s;
  opacity: 0.2;
}

#lectureAdmin_course:hover {
  opacity: 1;
}

#lectureAdmin_category {
  border: dashed 3px #FF7B1A;
  width: 210px;
  height: 40px;
  transition: opacity .5s;
  opacity: 0.2;
}

#lectureAdmin_category:hover {
  opacity: 1;
}

#lectureAdmin_new {
  border: dashed 3px #FF7B1A;
  margin: 145px 0 0 28px;
  width: 208px;
  height: 36px;
  transition: opacity .5s;
  opacity: 0.2;
}

#lectureAdmin_new2 {
  border: dashed 3px #FF7B1A;
  margin: 128px 0 0 25px;
  width: 208px;
  height: 36px;
  transition: opacity .5s;
  opacity: 0.2;
}

#lectureAdmin_new:hover,
#lectureAdmin_new2:hover {
  opacity: 1;
}

#lectureAdmin_title {
  float: left;
  border: dashed 3px #FF7B1A;
  margin: 405px 0 0 105px;
  width: 160px;
  height: 2155px;
  transition: opacity .5s;
  opacity: 0.2;
}

#lectureAdmin_title:hover {
  opacity: 1;
}

#lectureAdmin_comment {
  float: left;
  border: dashed 3px #FF7B1A;
  margin: 405px 0 0 122px;
  width: 35px;
  height: 2155px;
  transition: opacity .5s;
  opacity: 0.2;
}

#lectureAdmin_comment:hover {
  opacity: 1;
}

#lectureAdmin_test {
  float: left;
  border: dashed 3px #FF7B1A;
  margin: 405px 0 0 0;
  width: 40px;
  height: 2155px;
  transition: opacity .5s;
  opacity: 0.2;
}

#lectureAdmin_test:hover {
  opacity: 1;
}

#lectureAdmin_entry {
  border: dashed 3px #FF7B1A;
  margin: 18px 0 0 22px;
  width: 660px;
  height: 264px;
  transition: opacity .5s;
  opacity: 0.2;
}

#lectureAdmin_entry:hover {
  opacity: 1;
}

/*--------------- test admin pc ---------------*/

#testAdmin_entry {
  border: dashed 3px #FF7B1A;
  margin: 118px 0 0 257px;
  width: 660px;
  height: 180px;
  transition: opacity .5s;
  opacity: 0.2;
}

#testAdmin_entry:hover {
  opacity: 1;
}

#testAdmin_image {
  border: dashed 3px #FF7B1A;
  margin: 24px 0 0 200px;
  width: 305px;
  height: 33px;
  transition: opacity .5s;
  opacity: 0.2;
}

#testAdmin_image:hover {
  opacity: 1;
}

#testAdmin_type {
  border: dashed 3px #FF7B1A;
  margin: 35px 0 0 180px;
  width: 120px;
  height: 20px;
  transition: opacity .5s;
  opacity: 0.2;
}

#testAdmin_type:hover {
  opacity: 1;
}

#testAdmin_answers {
  float: left;
  border: dashed 3px #FF7B1A;
  margin: 35px 0 0 180px;
  width: 225px;
  height: 215px;
  transition: opacity .5s;
  opacity: 0.2;
}

#testAdmin_answers:hover {
  opacity: 1;
}

#testAdmin_RoW {
  float: left;
  border: dashed 3px #FF7B1A;
  margin: 35px 0 0 0;
  width: 65px;
  height: 215px;
  transition: opacity .5s;
  opacity: 0.2;
}

#testAdmin_RoW:hover {
  opacity: 1;
}

#testAdmin_exp {
  border: dashed 3px #FF7B1A;
  margin: 295px 0 0 180px;
  width: 400px;
  height: 130px;
  transition: opacity .5s;
  opacity: 0.2;
}

#testAdmin_exp:hover {
  opacity: 1;
}

#testAdmin_score {
  border: dashed 3px #FF7B1A;
  margin: 40px 0 0 180px;
  width: 50px;
  height: 25px;
  transition: opacity .5s;
  opacity: 0.2;
}

#testAdmin_score:hover {
  opacity: 1;
}

#testAdmin_num {
  border: dashed 3px #FF7B1A;
  margin: 35px 0 0 180px;
  width: 35px;
  height: 25px;
  transition: opacity .5s;
  opacity: 0.2;
}

#testAdmin_num:hover {
  opacity: 1;
}

/*@media (max-width: 768px) {

	#wrapper {
		display: none;
	}

}*/

/* --------------------------------

【デモ画面】グッドデザイン賞のアイコン

-------------------------------- */
#demo-gd {
  width: 60px;
  height: auto;
  position: fixed;
  left: 50px;
  bottom: 20px;
}