.scardwrap{
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}

.scardwrap2{
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
  position: absolute;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.7);
  border: solid 2px #999999;
  display: none;
}

.shead{
  color: #5abfe5;
  font-weight: bold;
  font-size: 150%;
  position: absolute;
  top: 5%;
  width: 95%;
  padding: 1%;
  left: 2.5%;
  text-align: center;
  background-color: #5abfe5;
  color: #ffffff;
  border-radius: 0.2em;
}

.snextbtn{
  font-size: 120%;
  font-weight: bold;
  background-color: #5abfe5;
  color: #ffffff;
  width: 9%;
  text-align: center;
  border-radius: 4px;
  box-shadow: 5px 5px 10px #666666;
  cursor: pointer;
  transition: all 200ms 0s ease;
  top: 85%;
  left: 85%;
  position: absolute;
  padding: 1%;
  height: 9%;
}

.snextbtn:hover{
  opacity: 0.8;
  box-shadow: 5px 5px 10px #333333;
  box-shadow: none;
  vertical-align: middle;
}

.under{
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  position: absolute;
}

#suggest {
  position: absolute;
  background-color: #FFFFFF;
  border: 1px solid #CCCCFF;
  font-size: 90%;
  width: 300px;
  z-index: 100;
  top: 60%;
  left: 80%;
}

#suggest div {
  display: block;
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
}

#suggest div.select{ /* キー上下で選択した場合のスタイル */
  color: #FFFFFF;
  background-color: #3366FF;
}

#suggest div.over{ /* マウスオーバ時のスタイル */
  background-color: #99CCFF;
}

label{
  position: relative;
  cursor: pointer;
  transition: all 200ms 0s ease;
}

label:hover{
  text-shadow: 0px 0px 10px #888888;
}

input{
  cursor: pointer;
}

.answer-area {
  width: 90%;
  position: absolute;
  top: 40%;
  right: 0;
  left: 0;
  margin: auto;
}

.answer-btn {
  width: 47%;
  padding: 5%;
  text-align: center;
  border-radius: 5em;
  box-shadow: 3px 3px 5px #bbb;
  cursor: pointer;
  transition: all 200ms 0s ease;
  display: inline-block;
}

.answer-btn:hover {
  opacity: 0.8;
  box-shadow: none;
}

.btn-word {
  font-size: 120%;
  font-weight: bold;
}

.btn-infoword {
  margin-top: 3%;
  font-size: 90%;
}

.q1 {
  background-color: #5B9BD5;
  color: #002060;
}

.q2 {
  float: right;
  background-color: #FFD966;
  color: #7F6000;
}

.question {
  width: 90%;
  padding: 2%;
  text-align: center;
  border-radius: 0.5em;
  border: 1px solid #ffffff;
  font-weight: bold;
  font-size: 120%;
  position: absolute;
  top: 10%;
  right: 0;
  left: 0;
  margin: auto; 
}

.c1aten{
  height: 90%;
  font-size: 70%;
  top: 80%;
  left: 6%;
  position: absolute;
}

.serror{
  color: #ff0000;
  left: 6%;
  top: 85%;
  position: absolute;
  font-size: 70%;
  line-height: 120%;
}

.c1qt{
  font-weight: bold;
}

.cardlock{
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #333333;
  opacity: 0.1;
  display: none;
}

.answer-transparent-btn {
  width: 45%;
  padding: 5%;
  text-align: center;
  border-radius: 0.7em;
  cursor: pointer;
  transition: all 200ms 0s ease;
  display: inline-block;
}

.answer-transparent-btn:hover {
  background-color: #fff;
  opacity: 0.2;
}

.viewlock {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: 100%;
  z-index: 100;
}
#in30and80under {
  width: 100%;
  height: 100%;
  background-size: 100%;
}
#in70under {
  width: 100%;
  height: 100%;
  background-size: 100%;
}
#in60under {
  width: 100%;
  height: 100%;
  background-size: 100%;
}
#chapterchoice_scard{
  width: 100%;
  height: 100%;
  background-size: 100%;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.title{
  font-weight: bold;
  font-size: 95%;
  position: absolute;
  top: 7%;
  width: 40%;
  padding: 1%;
}

#playall:hover{
  opacity: 0.8;
  box-shadow: none;
}

.alllabeltextplayallimg{
  background: url(6da5e8f4/images/allbuttonimg.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  width: 40%;
  height: 15%;
  margin-left: 43%;
  top: 3%;
  cursor: pointer;
}

#playend:hover{
  opacity: 0.8;
  box-shadow: none;
}

.endlabeltextplayallimg{
  background: url(6da5e8f4/images/endbuttonimg.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  width: 40%;
  height: 15%;
  margin-left: 70%;
  top: -12%;
  cursor: pointer;
}

.alllabeltextbtn{
  color: #ffffff;
  text-align: center;
  margin-right: 35%;
  position: relative;
  top:37%;
}

.endlabeltextbtn{
  color: #ffffff;
  text-align: center;
  margin-right: 20%;
  position: relative;
  top:37%;
}

#maineria{
  position: relative;
  /*position: absolute;*/
  top: -10%;
  width: 100%;
  height: 85%;
/*  overflow-y: scroll; */
  overflow-y: auto;
}

#chapterchoice_btnarea {
  width: 100%;
  height: 100%;
  margin: auto;
}

#chaptertable{
  table-layout: fixed;
  height: 170%;
  width: 100%;
  background-color: #d5ebf6;
}

.chapterchoice{
  display: table-cell;
  vertical-align: middle;
  height: 20%;
}

.chaptertime {
  position: absolute;
  text-align: center;
  width: 8%;
  height: 7%;
  color: #fff;
  background-color: #333333;
  opacity: 0.55;
}

.chaptertimetexit {
  position: relative;
  top: 22%;
}
#chaptertimeposi1 {
  top: 7.3%;
  margin-left: 22.5%;
  margin-right: 9%;
}

#chaptertimeposi2 {
  top: 64.1%;
  margin-left: 22.5%;
  margin-right: 9%;
}

#chaptertimeposi3 {
  top: 120.7%;
  margin-left: 22.5%;
  margin-right: 9%;
}

.chapterchoice_btn {
  font-size: 0.6em;
  float: left;
  border: 1px solid #d5ebf6;
  width: 85%;
  height: 75%;
  cursor: pointer;
  margin-left: 7%;
}

.chapterchoice_btn:hover{
  opacity: 0.7;
}

.chapter_img{
  width: 100%;
  height: 80%;
  z-index: 30;
  border: 1px solid #d5ebf6;
}

#chapter10img{
  /*background: url(6da5e8f4/images/chapter10.jpg) no-repeat;*/
  background: url(6da5e8f4/images/chapter10img.jpg) no-repeat;
  background-size: cover;
}

#chapter20img{
  /*background: url(6da5e8f4/images/chapter20.jpg) no-repeat;*/
  background: url(6da5e8f4/images/chapter20img.jpg) no-repeat;
  background-size: cover;
}

#chapter30img{
  /*background: url(6da5e8f4/images/chapter30.jpg) no-repeat;*/
  background: url(6da5e8f4/images/chapter30img.jpg) no-repeat;
  background-size: cover;
}

#chapter40img{
  /*background: url(6da5e8f4/images/chapter40.jpg) no-repeat;*/
  background: url(6da5e8f4/images/chapter40img.jpg) no-repeat;
  background-size: cover;
}

#chapter50img{
  /*background: url(6da5e8f4/images/chapter50.jpg) no-repeat;*/
  background: url(6da5e8f4/images/chapter50img.jpg) no-repeat;
  background-size: cover;
}

#chapter60img{
  /*background: url(6da5e8f4/images/chapter60.jpg) no-repeat;*/
  background: url(6da5e8f4/images/chapter60img.jpg) no-repeat;
  background-size: cover;
}

#chapter70img{
  /*background: url(6da5e8f4/images/chapter70.jpg) no-repeat;*/
  background: url(6da5e8f4/images/chapter70img.jpg) no-repeat;
  background-size: cover;
}

#chapter80img{
  /*background: url(6da5e8f4/images/chapter80.jpg) no-repeat;*/
  background: url(6da5e8f4/images/chapter80img.jpg) no-repeat;
  background-size: cover;
}

.chapter_txt{
  height: 20%;
  background-color: #59addb;
  color: #ffffff;
  text-align: left;
}

.labeltext{
  position: relative;
  margin-left: 3%;
  top:30%;
  font-size: 90%;
}

/*スクロールバー全体*/
.scrollarea::-webkit-scrollbar {
    background-color: #d5ebf6;
    width: 5px;
}

/*スクロールバーの動く部分*/
.scrollarea::-webkit-scrollbar-thumb {
  background-color: #3373ba;
}
#in80scard {
  background: url(6ec2a71f/images/i_bunki_50.jpg) no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: 100%;
  z-index: 0;
}

#in80btn1 {
  position: absolute;
  top: 36%;
  width: 28.6%;
  left: 19.8%;
  height: 30.5%;
}

#in80btn2 {
  position: absolute;
  top: 36%;
  width: 28.6%;
  left: 51.5%;
  height: 30.5%;
}
#in50under {
  width: 100%;
  height: 100%;
  background-size: 100%;
}
#in20under {
  width: 100%;
  height: 100%;
  background-size: 100%;
}
#scard5{
  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HGP平成丸ｺﾞｼｯｸ体W4","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}

@media all and (-ms-high-contrast:none){
  #c5q1label{
    padding: 0.1em 0.3em 0.1em;
  }
  #c5q2label{
    padding: 0.1em 0.3em 0.1em;
  }
  #c5q3label{
    padding: 0.1em 0.3em 0.1em;
  }
  #c5q4label{
    padding: 0.1em 0.3em 0.1em;
  }
}

#inendunder{
  background: url(End/images/end.jpg) no-repeat;
  width: 100%;
  height: 100%;
  background-size: 100%;
  display: none;
}

#scard5 .shead{
  font-size: 120%;
  line-height: 120%;
}

#c5q1wrap{
  position: absolute;
  top: 25%;
  left: 6%;
  font-size: 70%;
  width: 100%;
  height: 7%;
}

#c5q2wrap{
  position: absolute;
  top: 34%;
  left: 6%;
  font-size: 70%;
  width: 100%;
  height: 7%;
}

#c5q3wrap{
  position: absolute;
  top: 43%;
  left: 6%;
  font-size: 70%;
  width: 100%;
  height: 7%;
}

#c5q4wrap{
  position: absolute;
  top: 50%;
  left: 6%;
  font-size: 60%;
  width: 100%;
  height: 7%;
}

#c5q1{
  margin-top: -0.1%;
  position: absolute;
  margin-left: -5%;
  width: 6%;
  height: 40%;
}

#c5q2{
  margin-top: -0.1%;
  position: absolute;
  margin-left: -5%;
  width: 6%;
  height: 40%;
}

#c5q3{
  margin-top: -0.1%;
  position: absolute;
  margin-left: -5%;
  width: 6%;
  height: 40%;
}
#c5q4{
  margin-top: -0.1%;
  position: absolute;
  margin-left: -5%;
  width: 6%;
  height: 40%;
  
}

#c5q5t{
  font-weight: bold;
  font-size: 100%;
  position: absolute;
  color: #555555;
  top: 60%;
  left: 3%;
  
}

#c5q5{
  font-size: 200%;
  transform: scale(0.5);
  border: solid;
  
  width: 186%;
  height: 30%;
  position: absolute;
  top: 60%;
  left: -42%;
  line-height: 120%;
}

#c5returnbtn{
  font-size:130%;
  font-weight:bold;
  width:23%;
  left:9%;
  height:8%;
}

#c5nextbtn{
  font-size: 130%;
  font-weight: bold;
  width: 18%;
  left: 75%;
  height: 8%;
}

#endaten{
  height: 20%;
  width: 52%;
  position: absolute;
  top: 23%;
  left: 40%;
  font-size: 70%;
  line-height: 120%;
  white-space: nowrap;
  padding: 1%;
}

#endlink{
  height: 20%;
  width: 52%;
  position: absolute;
  top: 100%;
  left: -0.0001%;
  font-size: 87%;
  line-height: 120%;
  white-space: nowrap;
  padding: 1%;
}
#scard1_1{
  background: url(a2ec1fe8/images/in1.jpg) no-repeat;
  background-size: 101%;
}

#scard1_2{
  display: none;
  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HGP平成丸ｺﾞｼｯｸ体W4","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}

#c1q1{
  position: absolute;
  top: 17%;
  left: 5%;
  line-height: 120%;
  color: #5abfe5;
  font-weight: bold;
  font-size: 100%;
  position: absolute;
}

.c1qt{
  height: 10%;
  width: 20%;
  position: absolute; 
}

.c1q2_1{
  top: 60%;
  left: 6%;
  color: #5abfe5;
}

.c1q2_2{
  top: 60%;
  left: 27%;
}

.c1q3{
  top: 70%;
  left: 6%;
  color: #5abfe5;
}

#c1q2_1select{
  top: 58%;
  left: 18%;
  position: absolute;
}

#c1q3se1{
  top: 70%;
  left: 25%;
  position: absolute;
}

#c1q3se2{
  top: 70%;
  left: 40%;
  position: absolute;
}

#c1q3se3{
  top: 70%;
  left: 55%;
  position: absolute;
}

#c1q3se4{
  top: 70%;
  left: 70%;
  position: absolute;
}

label{
  position: relative;
  cursor: pointer;
  transition: all 200ms 0s ease;
}

label:hover{
  text-shadow: 0px 0px 10px #888888;
}

#c1q3ma{
  margin-left: -30%;
  margin-top: 0;
  height: 40%;
  width: 30%;
}

#c1q3uma{
  margin-left: -30%;
  margin-top: 0;
  height: 40%;
  width: 30%;
}

#c1q3oth{
  margin-left: -30%;
  margin-top: 0;
  height: 40%;
  width: 30%;
}

#c1q3no{
  margin-left: -30%;
  margin-top: 0;
  height: 40%;
  width: 30%;
}

#c1q1ki{
  margin-left: -30%;
  margin-top: 0;
  height: 40%;
  width: 30%;
}

#c1q1ho{
  margin-left: -30%;
  margin-top: 0;
  height: 40%;
  width: 30%;
}

#c1q1so{
  margin-left: -30%;
  margin-top: 0;
  height: 40%;
  width: 30%;
}

#c1q1se1{
  top: 32%;
  left: 10%;
}

#c1q1se2{
  top: 32%;
  left: 30%;
}

#c1q1se3{
  top: 32%;
  left: 55%;
}

.c1q1se3aten{
  height: 90%;
  font-size: 70%;
  top: 80%;
  left: 8%;
  position: absolute;
}

#c1q1ti{
  top: 42%;
  left: 12%;
  position: absolute;
  display: none;
  transition: all 200ms 0s ease;
}

#c1q1gi{
  top: 42%;
  left: 52%;
  position: absolute;
  display: none;
  transition: all 200ms 0s ease;
}

#c1q1sho{
  width: 40%;
  height: 7%;
  // position: absolute;
  top: 42%;
  left: 12%;
  display: none;
}

#scard1_1next{
  top: 60%;
}

#c1q1_1text{
  cursor: text;
}

#c1q1se3aten{
  top: 31%;
  left: 65%;
}
#in70scard {
  background: url(a550ac21/images/i_bunki_40.jpg) no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: 100%;
  z-index: 0;
}

#in70btn1 {
  position: absolute;
  top: 36%;
  width: 28.6%;
  left: 19.8%;
  height: 30.5%;
}

#in70btn2 {
  position: absolute;
  top: 36%;
  width: 28.6%;
  left: 51.5%;
  height: 30.5%;
}
#in10under {
  width: 100%;
  height: 100%;
  background-size: 100%;
}
#in40under {
  width: 100%;
  height: 100%;
  background-size: 100%;
}