@charset 'UTF-8';
/* ------------------------------------------------

* Style Index
	#. Cores
	#. Layouts    :prefix[l-]
	#. Components :prefix[c-]
	#. Units
	#. Utilities  :prefix[u-]
	// #. Functions :prefix[js-]

------------------------------------------------ */
/* ------------------------------------------------
# Cores
------------------------------------------------ */
/*!
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1;
	font-family: 'dnp-shuei-mgothic-std', sans-serif;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

nav ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	color: #845729;
}
button{
	cursor: pointer;
}

input[type="text"] {
	display: block;
	border: none;
	padding: 0;
	margin: 0;
	width: 96%;
	padding: 2%;
	height: 18px;
	line-height: 18px;
  }

/*生徒用トップページ*/

 #top-student{
	 background-image: url("../images/qs1-student/top-back-img.png");
	 background-size: cover;
     background-repeat: no-repeat;
 }
 #top-student .title{
	 text-align: center;
	 padding-top: 20px;
	 height: 230px;
 }
 #top-student .title img{
	 height: 100%;
	 width: auto;
 }
 #top-student .sub-title{
	 width: 770px;
	 max-width: 100%;
	 height: 230px;
	 text-align: center;
	 margin: 0 auto;
	 position: relative;
 }
 #top-student .back-mas1{
	position: absolute;
	bottom: 0;
	right: -110px;
	height: 320px;
}
#top-student .back-mas1 img{
	height: 100%;
	width: auto;
}
 #top-student .sub-title .title-img{
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 height: 170px;
 }
 #top-student .sub-title .title-img img{
	 width: auto;
	 height: 100%;
 }
 #top-student .sub-title .title-text img,
 #top-student .sub-title .title-text{
	 height: 100%;
	 width: auto;
 }
 #top-student .top-ex{
	 width: 770px;
	 max-width: 100%;
	 margin: 50px auto 0 auto;
 }
 #top-student .top-ex img{
	 width: 100%;
	 height: auto;
 }
 #top-student .top-content-12{
	 width: 770px;
	 max-width: 100%;
	 margin: 55px auto 0 auto;
	 position: relative;
 }
 #top-student .back-mas2{
	 position: absolute;
	 bottom: 0;
	 left: -320px;
	 height: 300px;
 }
 #top-student .back-mas2 img{
	 height: 100%;
	 width: auto;
 }
 #top-student .top-content-12 ul{
	 width: 100%;
	 display: flex;
	 justify-content: space-between;
 }
 #top-student .top-content-12 ul li{
	 width: 370px;
	 max-width: 100%;
	 list-style: none;
	 position: relative;
 }
 #top-student .top-content-12 ul li .workEx{
	 position: absolute;
	 bottom: -50px;
	 font-size: 14px;
	 line-height: 1.5em;
 }
 #top-student .top-content-12 ul li .content-btn{
	 position: absolute;
	 bottom: 30px;
	 left: 0;
	 right: 0;
	 margin: auto;
	 width: 220px;
 }
 #top-student .top-content-12 ul li .content-btn img{
	 height: auto;
	 width: 100%;
 }
 #top-student .top-content-12 ul li img{
	 width: 100%;
	 height: auto;
 }
 #top-student .top-content-3{
	 width: 770px;
	 max-width: 100%;
	 margin: 55px auto 0 auto;
	 position: relative;
 }
 #top-student .top-content-3 img{
	 width: 100%;
	 height: auto;
 }
 #top-student .top-content-3 ul{
	 position: absolute;
	 top: 0;
	 right: 0;
	 padding-top: 95px;
 }
 #top-student .top-content-3 ul li{
	 list-style: none;
	 margin: 0 30px 35px 0;
	 width: 220px;
 }
 #top-student .top-content-3 ul li img{
	 width: 100%;
	 height: auto;
 }
 #top-student .top-content-4 ul li{
	margin: 0 30px 40px 0;
}
#top-student .top-content-4 ul{
	padding-top: 110px;
}
#top-student .top-bottom-text{
	text-align: center;
	font-weight: 600;
	color: #845729;
	font-size: 14px;
	line-height: 27px;
	margin-top: 65px;
	padding-bottom: 50px;
}

#top-student .top-bottom-text span{
	text-decoration: underline;
}
#top-student .footer,
#quest2 .footer{
	background-color: white;
	font-weight: 600;
	font-size: 18px;
	padding: 25px 0;
	text-align: center;
	position: relative;
}
#top-student .footer .back-mas3{
	position: absolute;
	bottom: 0;
	right: 20px;
	height: 350px;
}
#top-student .footer .back-mas3 img{
	height: 100%;
	width: auto;
}
#top-student .img-sp,
#top-student .br-sp{
	display: none;
}
#top-student .totalTopTeacherContent{
	width: 100%;
	overflow: hidden;
	position: relative;
}
#top-student .totalTopTeacherContent .back-mas2{
	position: absolute;
    top: 390px;
    left: -60px;
    height: 300px;
	z-index: 20;
}
#top-student .totalTopTeacherContent .back-mas2 img{
	height: 100%;
	width: auto;
}
#top-student .resultMovi{
	display: flex;
	justify-content: center;
}
#top-student .resultMovi a{
	display: inline-block;
	width: 220px;
}

@media screen and (max-width: 1100px) {
	#top-student .footer .back-mas3,
	#top-student .back-mas2{
		display: none;
	}
}
@media screen and (max-width: 960px) {
	#top-student .top-content-12 ul li .workEx{
		display: none;
	}
	#top-student{
		background-image: url("../images/qs1-student/sp/top-back-sp.png");
	}
	#top-student .img-sp{
		display: inline-block;
	}
	#top-student .img-pc{
		display: none;
	}
	#top-student{
		overflow: hidden;
	}
	#top-student .title{
		width: 65%;
		height: auto;
		margin: 0 auto;
		padding-top: 25px;
	}
	#top-student .title img{
		width: 100%;
		height: auto;
	}
	#top-student .sub-title .title-img{
		width: 20%;
		height: auto;
		top: 40%;
	}
	#top-student .sub-title .title-img img{
		width: 100%;
		height: auto;
	}
	#top-student .sub-title{
		margin:  20px 40px 0 40px;
		width: auto;
		height: auto;
	}
	#top-student .sub-title .title-text img, #top-student .sub-title .title-text{
		width: 62%;
		height: auto;
		margin: 0 auto;
	}
	#top-student .sub-title .title-text img, #top-student .sub-title .title-text img{
		width: 100%;
		height: auto;
	}
	#top-student .back-mas1{
		width: 38%;
		height: auto;
		bottom: 40px;
	}
	#top-student .back-mas1 img{
		width: 100%;
		height: auto;
	}
	#top-student .top-ex{
		width: auto;
		margin: -40px 40px 0 40px;
	}
	#top-student .top-content-12{
		margin: 25px 40px 0 40px;
		width: auto;
	}
	#top-student .top-content-12 ul{
		flex-wrap: wrap;
		width: auto;
	}
	#top-student .top-content-12 ul li{
		width: 100%;
	}
	#top-student .top-content-12 ul li .content-btn{
		width: 55%;
		bottom: 6%;
	}
	#top-student .top-content-12 ul li:nth-child(2){
		margin-top: 25px;
	}
	#top-student .top-content-3{
		width: auto;
		margin: 25px 40px 0 40px;
	}
	#top-student .top-content-3 ul{
		width: 100%;
		height: auto;
		padding-top: 90%;
	}
	#top-student .top-content-3 ul li{
		width: 55%;
		margin: 0 auto 20% auto;
	}
	#top-student .top-content-3 ul li:last-child{
		margin-bottom: 0;
	}
	#top-student .top-content-4 ul{
		padding-top: 40%;
	}
	#top-student .br-sp{
		display: inline-block;
	}
	#top-student .top-bottom-text{
		margin-top: 65px;
		font-size: 25px;
		line-height: 35px;
		padding-bottom: 50px;
	}
	#top-student .footer{
		padding: 20px 0;
		font-size: 25px;
	}
}
@media screen and (max-width: 760px) {
	#top-student .sub-title{
		margin: 10px 20px 0 20px;
	}
	#top-student .back-mas1{
		right: -5%;
		width: 30%;
	}
	#top-student .top-ex{
		margin: -20px 20px 0 20px;
	}
	#top-student .top-content-12,
	#top-student .top-content-3{
		margin: 12px 20px 0 20px;
	}
	#top-student .top-bottom-text{
		margin-top: 32px;
		font-size: 12px;
		line-height: 17px;
		padding-bottom: 32px;
	}
	#top-student .footer{
		padding: 10px 0;
		font-size: 12px;
	}
}


/*クエスト２−２*/
  #quest2 {
	  background-image: url("../images/quest2/quest2-2-back.png");
	  background-size: 100% auto;
	  position: relative;
  }
  #quest2 .logo{
	  position: absolute;
	  top: 5px;
	  left: 5px;
	  height: 100px;
  }
  #quest2 .logo img{
	  height: 100%;
	  width: auto;
  }
  #quest5 .logo{
	position: absolute;
	top: 5px;
	left: 5px;
	height: 100px;
}
  #quest5 .logo img{
	height: 100%;
	width: auto;
}
  #qs5-work2 .logo{
	position: absolute;
	top: 5px;
	left: 5px;
	height: 100px;
}
  #qs5-work2 .logo img{
	height: 100%;
	width: auto;
}
  #quest2 .quest2-wrapper{
	  width: 1000px;
	  max-width: 100%;
	  margin: 0 auto;
	  padding-top: 110px;
  }
  #quest2 .quest2-wrapper .title{
	  width: 33%;
	  margin: 0 auto;
  }
  #quest2 .quest2-wrapper .title img{
	  width: 100%;
	  height: auto;
  }
  #quest2 .quest2-wrapper .content{
	  background-color: white;
	  margin: 60px 0 0 0;
	  position: relative;
	  padding-bottom: 40px;
  }
  #quest2 .quest2-wrapper .content .subtitle1{
	  position: absolute;
	  top: -23px;
	  left: 0;
	  right: 0;
	  margin: auto;
  }
  #quest2 .quest2-wrapper .content .subtitle{
	  width: 73%;
	  margin: 0 auto;
  }
  #quest2 .quest2-wrapper .content .subtitle img{
	  width: 100%;
	  height: auto;
  }
  #quest2 li{
	  list-style: none;
  }
  #quest2 .compurational1{
	  padding: 60px 0 50px 0;
	  display: flex;
	  align-items: center;
	  justify-content: center;
  }
  #quest2 .compurational1 .comp-wrapper{
	  display: flex;
	  justify-content: center;
	  align-items: center;
  }
  #quest2 .compurational1 .comp-wrapper .namber-wrapper{
	  display: flex;
	  align-items: center;
	  justify-content: flex-end;
	  position: relative;
	  border: 4px solid #412b13;
	  padding-right: 15px;
	  letter-spacing: 5px;
  }
  #quest2 .compurational1 .comp-wrapper .namber-wrapper .icon,
  #quest2 .quest2-wrapper .content .game .game-total .namber-wrapper .icon{
	  position: absolute;
	  bottom: -20px;
	  left: -20px;
	  width: 40px;
  }
  #quest2 .compurational1 .comp-wrapper .namber-wrapper .icon img,
  #quest2 .quest2-wrapper .content .game .game-total .namber-wrapper .icon img{
	  width: 100%;
	  height: auto;
  }
  #quest2 .compurational1 .comp-wrapper .namber-wrapper input{
      border: none;
	  font-size: 30px;
	  height: 32px;
	  letter-spacing: 5px;
	  font-weight: 600;
	  width: 70px;
	  padding: 12px 0 12px 15px ;
	  color: #e80002;
	  text-align: right;
	  font-family: 'dnp-shuei-mgothic-std', sans-serif;
  }
  #quest2 .compurational1 .comp-wrapper .long-imput input{
	  width: 90px;
  }
  #quest2 .compurational-farst .comp-wrapper .namber-wrapper .unit,
  #quest2 .compurational2 .comp-wrapper .namber-wrapper .unit{
	  color: #e80002;
  }
  #quest2 .compurational-farst .comp-wrapper li:first-child .namber-wrapper .unit{
	  color: black;
  }
  #quest2 .compurational1 .comp-wrapper li:first-child .namber-wrapper{
	  padding: 12px 15px 12px 15px;
  }
  #quest2 .compurational1 .blance-textNumber li:first-child .namber-wrapper{
	  padding: 0 15px 0 0;
  }
  #quest2 .compurational1 .comp-wrapper .namber-wrapper .unit{
	  font-size: 30px;
	  font-weight: 600;
  }
  #quest2 .compurational1 .comp-wrapper li .cel-text{
	  font-size: 30px;
	  margin: 20px 16px 0 16px;
	  font-weight: 600;
  }
  #quest2 .compurational1 .comp-wrapper li .namber-text{
	  font-size: 15px;
	  text-align: center;
	  margin-bottom: 5px;
	  font-weight: 600;
	  color: #412b13;
  }
  #quest2 .compurational1 .comp-wrapper li{
	  position: relative;
  }
  #quest2 .compurational1 .comp-wrapper li .inputEx{
	  position: absolute;
	  bottom: -32px;
	  left: 0;
	  font-size: 12px;
	  width: 170px;
	  font-weight: 600;
	  color: #412b13;
  }
  #quest2 .compurational1 .comp-wrapper li:last-child .namber-wrapper input{
	  width: 90px;
  }
  #quest2 .compurational1 button{
	  padding: 0 ;
	  margin: 0;
	  background-color: transparent;
	  border: none;
	  width: 120px;
	  margin: 20px 0 0 25px;
  }
  #quest2 .compurational1 button img{
	  width: 100%;
	  height: auto;
  }
  #quest2 .compurational2{
	  padding-top: 35px;
  }
  #quest2 .compurational2 .comp-wrapper li:first-child .namber-wrapper{
	  padding: 0 15px 0 0;
  }
  #quest2 .compurational2 .comp-wrapper .namber-wrapper input{
	  width: 90px;
  }
  #quest2 .compurational2{
	  padding-bottom: 30px;
  }
/*ゲーム内容*/
  #quest2 .quest2-wrapper .content .game{
	  margin: 0 50px;
  }
  #quest2 .quest2-wrapper .content .ex-title{
	  font-size: 15px;
	  line-height: 1.5em;
	  font-weight: 600;
	  color: #412b13;
	  display: inline-block;
	  vertical-align: top;
	  margin-top: 20px;
  }
  #quest2 .quest2-wrapper .content .finish-btn{
	  display: inline-block;
	  width: 140px;
	  position: relative;
	  margin-bottom: 10px;
	  margin-top: 20px;
  }
  #quest2 .quest2-wrapper .content .finish-btn .finish-btn-top{
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  display: none;
  }
  #quest2 .quest2-wrapper .content .finish-btn img{
	  width: 100%;
	  height: auto;
  }
  #quest2 .quest2-wrapper .content .game-content{
	  padding-bottom: 50px;
	  position: relative;
  }
  #quest2 .quest2-wrapper .content .game-content::before{
	  position: absolute;
	  content: "";
	  bottom: 0;
	  left: 0;
	  background-color: #000;
	  width: 100%;
	  height: 4px;
	  border-radius: 20px;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list{
	  display: flex;
	  justify-content: space-between;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list table tbody tr td{
	  width: 160px;
	  padding: 0;
	  margin: 0;
	  position: relative;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list table tbody tr td .card-up{
      position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: auto;
  }
  #cardLids1 tbody tr td .card-up,
  #cardLids2 tbody tr td .card-up,
  #cardLids3 tbody tr td .card-up,
  #cardLids4 tbody tr td .card-up,
  #cardLids5 tbody tr td .card-up,
  #cardLids6 tbody tr td .card-up{
	  display: none;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list table tbody tr .carda-a img,
  #quest2 .quest2-wrapper .content .game-content .game-list table tbody tr .carda-b img,
  #quest2 .quest2-wrapper .content .game-content .game-list table tbody tr .carda-c img{
	  opacity: 0;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list table tbody tr td img{
	  width: 100%;
	  height: auto;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut{
	  margin-top: 50px;
	  text-align: left;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-text{
	  font-size: 15px;
	  line-height: 1.5em;
	  font-weight: 600;
	  color: #412b13;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content{
	  display: flex;
	  align-items: flex-end;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content button,
  #quest2 .quest2-wrapper .content .game .game-total .reclut-namber button{
	  padding: 0;
	  margin: 0;
	  background-color: transparent;
	  border: none;
	  width: 190px;
	  background-image: url("../images/quest2/btn-dice-gray.png");
	  background-size: 100% auto;
	  background-repeat: no-repeat;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content button img,
  #quest2 .quest2-wrapper .content .game .game-total .reclut-namber button img{
	  width: 100%;
	  height: auto;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content button{
	  position: relative;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .dice-btn{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .dice-btn,
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .dice-btn-1,
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .dice-btn-2,
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .dice-btn-3,
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .dice-btn-4,
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .dice-btn-5,
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .dice-btn-6{
	  display: none;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .dice-btn-1 img{
	opacity: 1;
}
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-mark{
	  width: 55px;
	  margin: 0 25px;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-mark img{
	  width: 100%;
	  height: auto;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-namber .namber-text{
	font-size: 15px;
    text-align: center;
    margin-bottom: 5px;
    font-weight: 600;
    color: #412b13;
  }
  #top-student .qs2-top-ste-contet1last{
	  margin-bottom: 20px;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-namber .namber-wrapper,
  #quest2 .quest2-wrapper .content .game .game-total .namber-wrapper{
	display: flex;
    align-items: center;
    position: relative;
    border: 4px solid #412b13;
    padding-right: 15px;
    letter-spacing: 5px;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-namber .namber-wrapper input,
  #quest2 .quest2-wrapper .content .game .game-total .namber-wrapper input{
	  padding: 12px 0 12px 15px;
	  margin: 0;
	  width: 90px;
	  font-weight: 600;
	  font-size: 30px;
	  letter-spacing: 5px;
	  text-align: right;
	  border: none;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-namber .namber-wrapper input{
	  color: #e80002;
	  width: 70px;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-namber .namber-wrapper .unit,
  #quest2 .quest2-wrapper .content .game .game-total .namber-wrapper .unit{
	  font-size: 30px;
	  font-weight: 600;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-namber .namber-wrapper .unit{
	  color: #e80002;
  }
  #quest2 .quest2-wrapper .content .game .game-total{
	  padding: 40px 0 55px 0;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
  }
  #quest2 .quest2-wrapper .content .game .game-total .total-subtitle,
  #quest2 .quest2-wrapper .content .game .game-total .reclut-namber .namber-text{
	  font-size: 15px;
	  font-weight: 600;
	  color: #412b13;
  }
  #quest2 .quest2-wrapper .content .game .game-total .reclut-namber{
	  position: relative;
  }
  #quest2 .quest2-wrapper .content .game .game-total .reclut-namber .namber-text{
	  position: absolute;
	  top: -20px;
	  left: 60px;
  }
  #quest2 .quest2-wrapper .content .game .game-total .reclut-namber,
  #quest2 .quest2-wrapper .content .game .game-total .namber-wrapper{
	  display: flex;
	  flex-wrap: wrap;
	  align-items: center;
  }
  #quest2 .quest2-wrapper .content .game .game-total .namber-wrapper{
	  margin: 0 10px;
  }
  #quest2 .quest2-wrapper .content .game .game-total .reclut-namber button{
	  background-image: none;
	  width: 120px;
  }
  #quest2 .quest2-wrapper .content .subtext{
	  font-size: 18px;
	  line-height: 30px;
	  font-weight: 600;
	  text-align: center;
	  color: #412b13;
	  margin: 15px 0 0 0;
  }
  #quest2 .compurational1 .comp-wrapper li .cel-text-wal{
	  margin-left: 10px;
  }
  #quest2 .compurational1 .comp-wrapper .namber-d{
	  position: relative;
  }
  #quest2 .compurational1 .comp-wrapper .namber-d::before{
	  position: absolute;
	  top: 0;
	  left: -45px;
	  content: "(";
	  font-size: 60px;
	  font-weight: 500;
  }
  #quest2 .compurational1 .comp-wrapper .namber-d::after{
	position: absolute;
	top: 0;
	right: -90px;
	content: ")";
	font-size: 60px;
	font-weight: 500;
}
  #quest2 .compurational1 .comp-wrapper li .comp-text{
	  font-size: 15px;
	  font-weight: 600;
	  color: #412b13;
	  margin-right: 20px;
	  margin-top: 20px;
  }
  #quest2 .compurational4{
	  flex-wrap: wrap;
	  justify-content: flex-end;
	  margin: 0 110px;
  }
  #quest2 .quest2-wrapper .content .bottom-ex{
	  text-align: center;
  }
  #quest2 .quest2-wrapper .content .bottom-ex p{
	  font-weight: 600;
	  font-size: 25px;
	  line-height: 35px;
  }
  #quest2 .quest2-wrapper .content .bottom-ex p span{
	  color: #e80002;
  }
  #quest2 .quest2-wrapper .content .bottom-ex button{
	  margin: 25px 0 0 0;
	  padding: 0;
	  border: 0;
	  background-color: transparent;
	  width: 180px;
  }
  #quest2 .quest2-wrapper .content .bottom-ex button img{
	  width: 100%;
	  height: auto;
  }
  #quest2 .quest2-wrapper .game-bottm-text{
	  width: 370px;
	  margin: 35px auto 0 auto;
	  padding-bottom: 45px;
  }
  #quest2 .quest2-wrapper .game-bottm-text img{
	  width: 100%;
	  height: auto;
  }
  #quest2 .compurational3 .comp-wrapper li:first-child .namber-wrapper{
	  padding: 0 15px 0 0;
  }
  #quest2 .compurational1 .compWrapper-work3 li .cel-text{
	  margin: 20px 10px 0 0;
  }

/*モーダルウィンドウ*/
  #quest2 .modal{
	  display: none;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100vh;
	  background-color: rgba(0,0,0,0.7);
	  z-index: 20;
  }
  #quest2 .modal .modal-content{
	  width: 20%;
	  height: auto;
	  margin: 5% auto auto auto;
	  position: relative;
	  z-index: 20;
  }
  #quest2 .modal .modal-content .dice-gif,
  #quest2 .modal .modal-content button{
	  position: absolute;
	  top: 7%;
	  left: 0;
	  right: 0;
	  margin: 0 auto;
	  width: 50%;
  }
  #quest2 .modal .modal-content .dice-gif{
	z-index: 30;
  }
  #quest2 .modal .modal-content button{
	  top: 40%;
	  border: 0;
	  padding: 0;
	  background-color: transparent;
  }
  #quest2 .modal .modal-content button img{
	  width: 100%;
	  height: auto;
  }
  #quest2 .modal .modal-content .dice-gif img{
	  width: 100%;
	  height: auto;
  }
  #quest2 .modal .modal-content .back-img{
	  width: 100%;
  }
  #quest2 .modal .modal-content .back-img img{
	  width: 100%;
	  height: auto;
  }
  #quest2 .modal .modal-content .result-img{
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  z-index: 40;
	  display: none;
  }
  #quest2 .modal .modal-content .result-img img{
	  width: 100%;
	  height: auto;
  }
  #quest2 .modal .modal-content .dice-stop-btn{
	  z-index: 50;
  }
  #quest2 .modal .modal-content .modal-close-btn{
	  z-index: 45;
  }
  #quest2 .modal-work3 .modal-content .dice-gif{
	  top:5%
  }
  #quest2 .modal-work3 .modal-content button{
	  top: 37%;
  }
  #top-student .workEx{
	  width: 770px;
	  margin: 5px auto;
	  text-align: right;
	  font-size: 12px;
  }
  #top-student .workExnone{
	  display: none;
  }
  #top-student .workEx br{
	  display: none;
  }
  
  @media screen and (max-width: 960px) {
	#top-student .workEx br{
		display: inline-block;
	}
	#top-student .workEx,
	#top-student .workExnone{
		width: 90%;
		font-size: 24px;
		text-align: left;
		margin: 0 auto;
		display: block;
	}
	#quest2 .logo,
	#qs5-work2 .logo{
		height: 100px;
	}
	#quest5 .logo{
		height: 100px;
	}
	#quest2 .compurational1 .comp-wrapper .namber-wrapper input{
		width: 90px;
	}
	#quest2 .modal .modal-content{
		width: 50%;
		margin-top: 20%;
	}
	#quest2{
		background-image: url("../images/qs2-mov1/sp/back.png");
	}
	#quest2 .quest2-wrapper .content{
		margin: 0 40px;
	}
	#quest2 .quest2-wrapper .content .subtitle{
		width: 100%;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list,
	#quest2 .compurational1{
		flex-wrap: wrap;
		justify-content: center;
	}
	#quest2 .compurational1 button{
		margin: 45px auto 0 auto;
		width: 200px;
	}
	#quest2 .compurational1 .comp-wrapper .namber-wrapper .unit{
		font-size: 35px;
	}
	#quest2 .compurational1{
		padding-bottom: 25px;
	}
	#quest2 .quest2-wrapper .content .game{
		padding-top: 35px;
	}
	#quest2 .quest2-wrapper .content .ex-title{
		margin-bottom: 15px;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list table tbody tr td{
		width: 33%;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list table{
		width: 100%;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut{
		margin: 25px 0 40px 0;
		width: 100%;
	}
	#quest2 .quest2-wrapper .content .game{
		margin: 0 15%;
	}
	#quest2 .quest2-wrapper .content .game-content{
		padding-bottom: 0;
	}
	#quest2 .quest2-wrapper .content .game .game-total{
		flex-wrap: wrap;
		justify-content: flex-end;
	}
	#quest2 .quest2-wrapper .content .game .game-total .total-subtitle{
		width: 100%;
	}
	#quest2 .quest2-wrapper .content .game .game-total .reclut-namber button{
		width: 200px;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content button{
		width: 240px;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-namber .namber-wrapper input, 
	#quest2 .quest2-wrapper .content .game .game-total .namber-wrapper input,
	#quest2 .compurational1 .comp-wrapper li .cel-text{
		font-size: 35px;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-namber .namber-wrapper input, 
	#quest2 .quest2-wrapper .content .game .game-total .namber-wrapper input,
	#quest2 .compurational1 .comp-wrapper .namber-wrapper input{
		padding: 15px 0 15px 20px;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-namber .namber-wrapper, #quest2 .quest2-wrapper .content .game .game-total .namber-wrapper{
		padding: 0 15px 0 0;
	}
	#quest2 .compurational1 .comp-wrapper li:first-child .namber-wrapper{
		padding: 15px 20px;
	}
	#quest2 .compurational2 .comp-wrapper li:first-child .namber-wrapper{
		padding: 0 20px 0 0;
	}
	#quest2 .quest2-wrapper .content .game .game-total .reclut-namber{
		margin-top: 40px;
		align-items: center;
	}
	#quest2 .quest2-wrapper .content .game .game-total .total-subtitle, 
	#quest2 .quest2-wrapper .content .game .game-total .reclut-namber .namber-text{
		font-size: 18px;
	}
	#quest2 .compurational1 .comp-wrapper{
		flex-wrap: wrap;
	}
	#quest2 .cel-text-wrapper{
		width: 400px;
		text-align: right;
	}
	#quest2 .compurational1 .comp-wrapper .namber-d::before{
		font-size: 65px;
		left: -60px;
	}
	#quest2 .compurational1 .comp-wrapper .namber-d::after{
		font-size: 65px;
		right: -100px;
	}
	#quest2 .compurational1{
		padding-top: 40px;
	}
	#quest2 .compurational1 .lasttext-btn1{
		margin-top: 15px;
	}
	#quest2 .compurational4{
		margin:  0;
	}
	#quest2 .compurational1 .comp-wrapper li .comp-text{
		font-size: 25px;
	}
	#quest2 .compurational1 .comp-wrapper li:first-child .namber-d{
		padding: 0 15px 0 0;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-namber .namber-wrapper .unit, 
	#quest2 .quest2-wrapper .content .game .game-total .namber-wrapper .unit{
		font-size: 35px;
	}
	#quest2 .last-cel-list{
		margin-top: 10px;
	}
	#quest2 .compurational1 .comp-wrapper li .cel-text span{
		display: none;
	}
	#quest2 .last-cellist-1{
		margin: 30px 110px 0 auto;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-mark{
		width: 60px;
		margin: 0 20px 10px 20px;
	}
  }
  @media screen and (max-width: 760px) {
	#top-student .workEx{
		font-size: 12px;
	}
	#quest2 .quest2-wrapper .content .game .game-total .reclut-namber .namber-text{
		top: -15px;
		left: 30px;
	}
	#quest2 .compurational1 .comp-wrapper li .inputEx{
		font-size: 6px;
		width: 150px;
		bottom: -20px;
		right: -20px;
	}
	#quest2 .quest2-wrapper .content .game{
		margin: 0 9%;
	}
	#quest2 .quest2-wrapper .content .finish-btn{
		width: 40%;
		margin-top: 0;
	}
	#quest2 .logo,
	#qs5-work2 .logo{
		height: 50px;
	}
	#quest5 .logo{
		height: 50px;
	}
	#quest2 .quest2-wrapper{
		padding-top: 50px;
	}
	#quest2 .quest2-wrapper .content .subtitle1{
		position: initial;
	}
	#quest2 .quest2-wrapper .title{
		width: 50%;
		margin-bottom: 20px;
	}
	#quest2 .quest2-wrapper .content{
		margin: 0 10px;
	}
	#quest2 .compurational1 button{
		margin: 22px auto 0 auto;
		width: 100px;
	}
	#quest2 .compurational1 .comp-wrapper .namber-wrapper .unit{
		font-size: 18px;
	}
	#quest2 .compurational1{
		padding-bottom: 12px;
	}
	#quest2 .quest2-wrapper .content .game{
		padding-top: 18px;
	}
	#quest2 .quest2-wrapper .content .ex-title{
		margin-bottom: 8px;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut{
		margin: 12px 0 20px 0;
	}
	#quest2 .quest2-wrapper .content .game .game-total .reclut-namber button{
		width: 100px;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content button{
		width: 120px;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-namber .namber-wrapper input, 
	#quest2 .quest2-wrapper .content .game .game-total .namber-wrapper input,
	#quest2 .compurational1 .comp-wrapper li .cel-text{
		font-size: 18px;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-namber .namber-wrapper input, 
	#quest2 .quest2-wrapper .content .game .game-total .namber-wrapper input,
	#quest2 .compurational1 .comp-wrapper .namber-wrapper input{
		padding: 7px 0 7px 10px;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-namber .namber-wrapper, #quest2 .quest2-wrapper .content .game .game-total .namber-wrapper{
		padding: 0 7px 0 0;
	}
	#quest2 .compurational1 .comp-wrapper li:first-child .namber-wrapper{
		padding: 7px 10px;
	}
	#quest2 .compurational2 .comp-wrapper li:first-child .namber-wrapper{
		padding: 0 10px 0 0;
	}
	#quest2 .quest2-wrapper .content .game .game-total .reclut-namber{
		margin-top: 22px;
	}
	#quest2 .quest2-wrapper .content .game .game-total .total-subtitle, 
	#quest2 .quest2-wrapper .content .game .game-total .reclut-namber .namber-text{
		font-size: 9px;
	}
	#quest2 .cel-text-wrapper{
		width: 200px;
	}
	#quest2 .compurational1 .comp-wrapper .namber-d::before{
		font-size: 32px;
		left: -25px;
	}
	#quest2 .compurational1 .comp-wrapper .namber-d::after{
		font-size: 32px;
		right: -55px;
	}
	#quest2 .compurational1{
		padding-top: 10px;
	}
	#quest2 .compurational1 .lasttext-btn1{
		margin-top: 7px;
	}
	#quest2 .compurational1 .comp-wrapper li .comp-text{
		font-size: 12px;
	}
	#quest2 .compurational1 .comp-wrapper li:first-child .namber-d{
		padding: 0 7px 0 0;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-namber .namber-wrapper .unit, 
	#quest2 .quest2-wrapper .content .game .game-total .namber-wrapper .unit{
		font-size: 18px;
	}
	#quest2 .last-cel-list{
		margin-top: 5px;
	}
	#quest2 .last-cellist-1{
		margin: 15px 55px 0 auto;
	}
	#quest2 .compurational1 .comp-wrapper .namber-wrapper input{
		font-size: 18px;
		height: 18px;
		width: 50px;
		letter-spacing: 2px;
	}
	#quest2 .compurational1 .comp-wrapper .namber-wrapper{
		border: 2px solid #412b13 ;
	}
	#quest2 .compurational1 .comp-wrapper li .namber-text{
		font-size: 8px;
		margin-bottom: 2px;
	}
	#quest2 .compurational1 .comp-wrapper .namber-wrapper .icon, 
	#quest2 .quest2-wrapper .content .game .game-total .namber-wrapper .icon{
		width: 20px;
		left: -10px;
		bottom: -10px;
	}
	#quest2 .compurational1 .comp-wrapper li:last-child .namber-wrapper input{
		width: 50px;
	}
	#quest2 .compurational1 .comp-wrapper .namber-wrapper{
		letter-spacing: 2px;
	}
	#quest2 .compurational1 .comp-wrapper .namber-wrapper{
		padding: 0 7px 0 0;
		margin: 0;
		justify-content: center;
	}
	#quest2 .quest2-wrapper .content .ex-title,
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-text,
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-namber .namber-text{
		font-size: 8px;
	}
	#quest2 .compurational1 .comp-wrapper li .cel-text{
		margin: 10px 7px 0 7px;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-mark{
		width: 30px;
		margin: 0 10px 5px 10px;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-namber .namber-wrapper input{
		width: 35px;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-namber .namber-wrapper, 
	#quest2 .quest2-wrapper .content .game .game-total .namber-wrapper{
		border: 2px solid #412b13;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content .reclut-namber .namber-wrapper input, 
	#quest2 .quest2-wrapper .content .game .game-total .namber-wrapper input{
		width: 45px;
	}
	#quest2 .quest2-wrapper .content .game-content::before{
		height: 2px;
	}
	#quest2 .quest2-wrapper .content .subtext{
		font-size: 12px;
		line-height: 17px;
	}
	#quest2 .compurational1 .comp-wrapper li .comp-text{
		margin: 10px 10px 0 0;
	}
	#quest2 .namber-pos-r{
		position: relative;
		padding-top: 12px;
	}
	#quest2 .namber-pos-r .namber-pos-a{
		position: absolute;
		top: 0;
		left: -20px;
		margin: auto;
		z-index: 10;
		width: 140%;
	}
	#quest2 .quest2-wrapper ul li p{
		font-size: 10px;
		font-weight: 600;
		margin-bottom: 2px;
		color: #412b13;
	}
	#quest2 .quest2-wrapper .content .bottom-ex p{
		font-size: 12px;
		line-height: 17px;
	}
	#quest2 .quest2-wrapper .content .bottom-ex button{
		margin: 12px 0 0 0;
		width: 90px;
	}
	#quest2 .quest2-wrapper .game-bottm-text{
		width: 185px;
	}
	#top-student .footer, #quest2 .footer{
		font-size: 8px;
		padding: 12px 0;
	}
  }
  @media screen and (max-width: 360px) {
	#quest2 .compurational1 .comp-wrapper li .comp-text{
		width: 300px;
		margin: 0 0 10px 10px;
	}
	#quest2 li{
		margin-top: 20px;
	}
	#quest2 .compurational1 .comp-wrapper li span{
		bottom: -15px;
		right: -50px;
	}
  }

/*クエスト１の動画コンテンツ１*/
.qs1-mov1 .title-text{
	text-align: center;
	margin: 50px auto 40px auto;
}
.qs1-mov1 .title-text p{
	font-size: 45px;
	line-height: 60px;
	font-weight: 600;
	color: #412b13;
}
.qs1-mov1 .title-text p span{
	font-size: 30px;
}
#top-student .mov-content12{
	margin: 25px auto 0 auto;
}
#top-student .mov-content12 ul li .content-btn{
	bottom: 25px;
}
#top-student .mov1-content-bottom-text{
	width: 370px;
	margin: 55px auto 45px auto;
}
#top-student .mov1-content-bottom-text img{
	width: 100%;
	height: auto;
}

@media screen and (max-width: 960px) {
	#top-student .qs1-mov1-title-text{
		margin: 0 40px;
	}
	.qs1-mov1 .title-text p{
		font-size: 40px;
		line-height: 55px;
	}
	#top-student .qs1-mov1-title-text iframe{
		height: 400px;
	}
	#top-student .mov-content12{
		margin: 25px 40px 0 40px;
	}
	#top-student .mov-content12 ul li .content-btn{
		bottom: 6%;
	}
	#top-student .mov1-content-bottom-text{
		width: 80%;
	}
}
@media screen and (max-width: 760px) {
	.qs1-mov1 .title-text p{
		font-size: 20px;
		line-height: 27px;
	}
	.qs1-mov1 .title-text p span{
		font-size: 15px;
	}
	#top-student .qs1-mov1-title-text{
		margin: 0 20px;
	}
	#top-student .qs1-mov1-title-text iframe{
		height: 200px;
	}
	#top-student .mov-content12{
		margin: 12px 20px 0 20px;
	}
	.qs1-mov1 .title-text{
		margin: 25px auto 20px auto;
	}
}


/*教員用トップ*/
  #top-student .top-content-3{
	  position: relative;
  }
  #top-student .top-content-3 .ter-content-text{
	  position: absolute;
	  top: 50px;
	  left: 50px;
  }
  #top-student .top-content-3 .ter-content-text p{
	  font-weight: 600;
	  font-size: 25px;
	  color: #002d69;
	  border: none;
  }
  #top-student .top-content-3 .ter-content-text a{
	color: #002d69;
	border-bottom: 2px solid #002d69;
  }
  #top-student .top-ter-content1 ul{
	  padding-top: 25px;
  }
  #top-student .top-ter-content2 ul{
	  padding-top: 55px;
  }
  #top-student .top-ter-content3 ul li{
	  margin-bottom: 50px;
  }
  #top-student .top-terchar-bottom-text{
	  width: 770px;
	  margin: 0 auto;
  }
  #top-student .top-terchar-bottom-text img{
	  width: 100%;
	  height: auto;
  }
  #top-student .top-bottom-text{
	  margin-top: 0;
  }
  #top-student .techerTopBottom{
	margin-top: 65px;
}
  #top-student .ter-back-mas2{
	  bottom: -50px;
  }
  #top-student .ter-ex{
	  margin-top: 0;
	  position: relative;
  }
  #top-student .ter-ex .ter-ex-top{
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
  }
  #top-student .top-terchar-bottom-text .bottomNote{
	  padding: 40px 0;
	  letter-spacing: 0;
 }
 #top-student .top-terchar-bottom-text .bottomCntact{
	 border-bottom: 1px solid #845729;
	 border-top: 1px solid #845729;
	 padding: 20px 0;
	 position: relative;
 }
 #top-student .top-terchar-bottom-text .bottomCntact span{
	 position: absolute;
	 top: -16px;
	 left: 0;
	 right: 0;
	 margin: auto;
	 width: 25%;
	 font-size: 16px;
	 text-decoration: none;
	 background-image: url("../images/qs1-student/top-back-img.png");
	 background-position: 100px 100px;
 }
  #top-student .sub-title .title-text .title-text-top{
	  display: none;
	}
	#top-student .top-content-12 ul li .workEx br{
		display: inline;
	}
	#top-student .top-content-12 ul li .workEx{
		width: auto;
	}
  @media screen and (max-width: 960px) {
	#top-student .ter-ex{
		margin-top: -12%;
	}
	#top-student .sub-title .ter-title-img{
		top: 30%;
	}
	#top-student .sub-title .title-text{
		position: relative;
	}
	#top-student .sub-title .title-text .title-text-top{
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 100%;
		z-index: 10;
	}
	#top-student .top-content-3 .ter-content-text a{
		text-decoration: none;
	}
	#top-student .top-content-3 .ter-content-text p{
		font-size: 40px;
		line-height: 40px;
	}
	#top-student .top-content-3 .ter-content-text{
		top: 20%;
		left: 0;
		right: 0;
		margin: auto;
		width: 41%;
		text-align: center;
	}
	#top-student .top-ter-content1 ul{
		padding-top: 35%;
	}
	#top-student .top-ter-content2 ul{
		padding-top: 85%;
	}
	#top-student .top-ter-content3 ul li{
		margin-bottom: 30%;
	}
	#top-student .top-ter-content3 ul li:first-child{
		margin-bottom: 60%;
	}
	#top-student .top-ter-content3 ul li:nth-child(2){
		margin-bottom: 35%;
	}
	#top-student .top-ter-content3 ul{
		padding-top: 57%;
	}
	#top-student .top-terchar-bottom-text{
		width: 90%;
		font-size: 26px;
	}
	#top-student .top-terchar-bottom-text .bottomNote{
		padding: 60px 0;
	}
	#top-student .top-terchar-bottom-text .bottomCntact{
		padding: 40px 0;
	}
	#top-student .top-terchar-bottom-text .bottomCntact span{
		font-size: 28px;
		width: 40%;
	}
	#top-student .top-content-3 .ter-content-text p{
		line-height: 1.2em;
		border-bottom: 2px solid #002d69;
	}
  }
  @media screen and (max-width: 760px) {
	#top-student .top-content-3 .ter-content-text p{
		font-size: 20px;
		line-height: 20px;
		line-height: 1.2em;
		border-bottom: 2px solid #002d69;
	}
	#top-student .top-content-3 .ter-content-text{
		width: 150px;
	}
	#top-student .top-terchar-bottom-text .bottomNote{
		padding: 30px 0;
	}
	#top-student .top-terchar-bottom-text .bottomCntact{
		padding: 20px 0;
	}
	#top-student .top-terchar-bottom-text .bottomCntact span{
		font-size: 14px;
		width: 40%;
		top: -8px;
	}
	#top-student .top-terchar-bottom-text{
		font-size: 13px;
	}
	#top-student .top-terchar-bottom-text{
		margin-top: 22px;
	}
  }
  @media screen and (max-width: 360px) {
	#top-student .top-content-3 .ter-content-text{
		width: 55%;
	}
	#top-student .top-terchar-bottom-text .bottomCntact span{
		font-size: 10px;
	}
	
  }

/*全体トップ生徒用*/
  #top-student .student-title{
	  height: 100px;
	  margin: 30px auto;
  }
  #top-student .student-title .back-mas1{
	  bottom: -120px;
  }
  #top-student .student-contet1{
	  margin: 0 auto 15px auto;
  }
  #top-student .student-contet1 ul{
	  padding-top: 120px;
  }
  #top-student .student-contet1 ul li{
	  margin-bottom: 0;
  }
  @media screen and (max-width: 960px) {
	#top-student .student-title .student-mas1{
		display: none;
	}
	#top-student .student-title{
		height: auto;
	}
	#top-student .student-title .title-text{
		width: auto;
		margin: 0 40px;
	}
	#top-student .student-contet1{
		margin: 0 40px 15px 40px;
	}
	#top-student .student-contet1 ul li{
		width: 28%;
	}
	#top-student .student-contet1 ul{
		padding-top: 15%;
	}
	#top-student .student-contet1 ul li{
		margin: 0 15px 0 auto;
	}
  }
  @media screen and (max-width: 760px) {
	#top-student .student-title{
		margin: 15px auto;
	}
	#top-student .student-contet1{
		margin: 0 20px 7px 20px;
	}
	#top-student .student-contet1 ul li{
		margin: 0 7px 0 auto;
	}
  }

/*全体トップページ教員*/
    #top-student .teacher-title{
		width: 770px;
		max-width: 100%;
		height: auto;
		margin: 25px auto;
	}
    #top-student .teacher-title .title-text img, 
	#top-student .teacher-title .title-text{
		width: 100%;
		height: auto;
	}
	#top-student .teacher-title .back-mas1{
		bottom: -120px;
	}
@media screen and (max-width: 960px) {
	#top-student .teacher-title{
		margin: 25px 40px;
		width: auto;
	}
	#top-student .teacher-title .back-mas1{
		display:none;
	}
}
@media screen and (max-width: 960px) {
	#top-student .teacher-title{
		margin: 12px 20px;
	}
}

/*サイトご利用注意事項*/
#top-student .caution-title{
	width: 440px;
}
#top-student .caution-title .back-mas1{
	right: -280px;
	bottom: -150px;
}
#top-student .student-contet1{
	position: relative;
}
#top-student .student-contet1 .caution-content2-text{
	position: absolute;
	top: 90px;
	left: 0;
	right: 0;
	margin: auto;
}
#top-student .student-contet1 .caution-content2-text p{
	font-size: 18px;
	line-height: 30px;
	font-weight: 600;
	color: #845729;
	text-align: center;
}
#top-student .student-contet1 .caution-content2-text p span{
	font-size: 25px;
}
#top-student .student-contet1 .caution-content2-text p a{
	color: #845729;
}
@media screen and (max-width: 960px) {
	#top-student .caution-title{
		width: 50%;
		margin: 35px auto 25px auto;
	}
	#top-student .student-contet1 .caution-content2-text{
		top: 100px;
	}
}
@media screen and (max-width: 960px) {
	#top-student .caution-title{
		margin: 17px auto 12px auto;
	}
	#top-student .student-contet1 .caution-content2-text{
		top: 100px;
	}
	#top-student .student-contet1 .caution-content2-text p{
		font-size: 10px;
		line-height: 15px;
	}
	#top-student .student-contet1 .caution-content2-text p span{
		font-size: 13px;
	}
	#top-student .student-contet1 .caution-content2-text{
		top: 50%;
	}
}
@media screen and (max-width: 360px) {
	#top-student .student-contet1 .caution-content2-text{
		top: 40%;
	}
}

/*クエスト１のワークトップ*/
  #qs1-work .qs1-work-wrapper{
	  background-image: url("../images/qs1-work/qs1-work-back.png");
	  background-size: 100% auto;
	  background-repeat: no-repeat;
	  position: relative;
	  padding-bottom: 15%;
  }
  #qs1-work .qs1-work-wrapper .title{
	  position: absolute;
	  top: 5px;
	  left: 5px;
	  height: 100px;
  }
  #top-student{
	  position: relative;
  }
  #top-student .moveTitle{
	position: absolute;
	top: 5px;
	left: 5px;
	height: 100px;
  }
  #qs1-work .qs1-work-wrapper .title img,
  #top-student .moveTitle img{
	  height: 100%;
	  width: auto;
  }
  #top-student .title-text{
	  padding-top: 200px;
	  margin-top: 0;
  }
  #top-student .sub-title .title-text{
	padding-top: 0;
	margin-top: 0;
}
  #qs1-work .qs1-work-wrapper .sub-title{
	  width: 400px;
	  margin: 0 auto 60px auto;
	  padding-top: 100px;
  }
  #qs1-work .qs1-work-wrapper .sub-title img{
	  width: 100%;
	  height: auto;
  }
  #qs1-work .qs1-work-wrapper .top-content{
	  width: 900px;
	  max-width: 90%;
	  margin: 0 auto;
  }
  #qs1-work .qs1-work-wrapper .top-content ul{
	display: flex;
	justify-content: space-between;
  }
  #qs1-work .qs1-work-wrapper .top-content ul li{
	  width: 32%;
	  list-style: none;
  }
  #qs1-work .qs1-work-wrapper .top-content ul li img{
	  width: 100%;
	  height: auto;
  }
  #qs1-work .footer{
	font-weight: 600;
    font-size: 18px;
    padding: 25px 0;
    text-align: center;
	background-color: white;
  }
  @media screen and (max-width: 1100px) {
	#qs1-work .qs1-work-wrapper .top-content{
		width: 80%;
	}
	#qs1-work{
		height: 100vh;
		background-image: url("../images/qs1-work/back-sp.png");
	}
	#qs1-work .qs1-work-wrapper{
		background-image: url("../images/qs1-work/back-sp.png");
		padding: 0;
	}
	#qs1-work .qs1-work-wrapper .sub-title,
	#qs1-work .qs1-work-wrapper .top-content{
		width: auto;
		margin: 0 40px 60px 40px;
	}
	#qs1-work .qs1-work-wrapper .top-content{
		margin-bottom: 0;
	}
	#qs1-work .qs1-work-wrapper .title,
	#top-student .moveTitle{
		height: 100px;
	}
	#qs1-work .footer{
		font-size: 9px;
		padding: 12px 0;
	  }
	#qs1-work .qs1-work-wrapper .sub-title,
	#qs1-work .qs1-work-wrapper .top-content{
		margin: 0 auto 30px auto;
	}
	#qs1-work .qs1-work-wrapper .sub-title{
		width: 80%;
	}
	#qs1-work .qs1-work-wrapper .sub-title{
		padding-top: 130px;
	}

  }
  @media screen and (max-width: 760px) {
	#qs1-work{
		background-image: url("../images/qs4-news/sp/back.png");
	}
	#qs1-work .qs1-work-wrapper .title,
	#top-student .moveTitle{
		height: 60px;
	}
	#qs1-work .qs1-work-wrapper .top-content ul{
		flex-wrap: wrap;
		justify-content: center;
		margin: 0;
	}
	#qs1-work .qs1-work-wrapper .top-content ul li{
		width: 60%;
		margin-bottom: 10px;
	}
	#qs1-work{
		height: auto;
	}
	#top-student .title-text{
		padding-top: 100px;
		margin-top: 0;
	}

  }

/*ワークA*/
  #qs1-work{
	  background-image: url("../images/qs1-work/back-sp.png");
	  background-size: cover
  }
  #qs1-work .qs1-work-wrapper .work-a-content{
	  width: 45vw;
  }
  #qs1-work .qs1-work-wrapper .work-a-content ul{
	  flex-wrap: wrap;
	  justify-content: space-between;
	  margin-bottom: 130px;
  }
  #qs1-work .qs1-work-wrapper .work-a-content ul li{
	  width: 46%;
	  margin-bottom: 54px;
  }
  #qs1-work .qs1-work-wrapper .work-a-content ul li img{
	transition: 1s ease-in-out;
  }
  #qs1-work .qs1-work-wrapper .work-a-content ul li{
	  background-image: url("../images/qs1-work/pran1-a-card/pran1-a-1.png");
	  background-size: 100% auto;
  }
  #qs1-work .qs1-work-wrapper .work-a-content ul li:nth-child(2){
	background-image: url("../images/qs1-work/pran1-a-card/pran1-a-2.png");
  }
  #qs1-work .qs1-work-wrapper .work-a-content ul li:nth-child(3){
	background-image: url("../images/qs1-work/pran1-a-card/pran1-a-3.png");
  }
  #qs1-work .qs1-work-wrapper .work-a-content ul li:nth-child(4){
	background-image: url("../images/qs1-work/pran1-a-card/pran1-a-4.png");
  }

  #qs1-work .qs1-work-modal{
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100vh;
	  background-color: rgba(0,0,0,0.8);
	  display: none;
	  justify-content: center;
	  align-items: center;
	  z-index: 10;
  }
  #qs1-work .qs1-work-modal .modal-content{
	  width: 28vw;
	  text-align: center;
  }
  #qs1-work .qs1-work-modal .modal-content .contento-img{
	position: relative;
  }
  #qs1-work .qs1-work-modal .modal-content .contento-img .card_surface,
  #qs1-work .qs1-work-modal .modal-content .contento-img .card_reverse{
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: auto;
	  z-index: 15;
  }
  #qs1-work .qs1-work-modal .modal-content .contento-img .card_surface{
	  z-index: 20;
  }
  /* 表面の表示 */
  #qs1-work .qs1-work-modal .modal-content .is-surface .card_surface {
    opacity: 1;
    transform: rotateY(0deg);
    transition:
        opacity 100ms 150ms,
        transform 300ms 150ms;
}
#qs1-work .qs1-work-modal .modal-content .is-surface .card_reverse {
    opacity: 0;
    transform: rotateY(90deg);
    transition:
        opacity 50ms 200ms,
        transform 300ms;
}
 
/* 裏面の表示 */
#qs1-work .qs1-work-modal .modal-content .is-reverse .card_surface {
	opacity: 0;
    transform:rotateY(90deg);
    transition:
        opacity 50ms 200ms,
        transform 300ms;

}
#qs1-work .qs1-work-modal .modal-content .is-reverse .card_reverse {
    opacity: 1;
    transform:rotateY(0deg);
    transition:
        opacity 100ms 150ms,
        transform 300ms 150ms;
}

  #qs1-work .qs1-work-modal .modal-content .contento-img,
  #qs1-work .qs1-work-modal .modal-content .contento-img img,
  #qs1-work .qs1-work-modal .modal-content .modal-text img,
  #qs1-work .qs1-work-modal .modal-content .modal-close-btn img{
	  width: 100%;
	  height: auto;
  }
  #qs1-work .qs1-work-modal .modal-content .modal-text,
  #qs1-work .qs1-work-modal .modal-content .modal-close-btn{
	  width: 80%;
	  margin: 15px auto;
  }
  #qs1-work .qs1-work-modal .modal-content .modal-close-btn{
	  width: 50%;
	  margin: 0 auto;
  }
  #qs1-work button{
	  margin: 0;
	  padding: 0;
	  border: none;
	  background-color: transparent;
  }
#qs1-work .qs3-work-wrapper .work-a-content ul{
	  margin-bottom: 80px;
  }
@media screen and (max-width: 960px) {
	#qs1-work.work-a{
		height: 100%;
	}
	#qs1-work .qs1-work-wrapper .work-a-content ul li .card-namber{
		font-size: 30px;
	}
	#qs1-work .qs1-a-wrapper .sub-title{
		width: 60%;
		margin: 0 auto 60px auto;
	}
	#qs1-work .qs1-work-wrapper .work-a-content{
		width: auto;
		margin: 0 40px 30px 40px;
	}
	#qs1-work.work-a .footer {
		position: initial;
	}  
  }
  @media screen and (max-width: 760px) {
	#qs1-work .qs1-work-wrapper{
		padding-bottom: 20px;
	}
	#qs1-work .qs1-a-wrapper .sub-title{
		padding-top: 90px;
	}
	#qs1-work .qs1-work-wrapper .work-a-content ul li{
		margin-bottom: 27px;
	}
	#qs1-work .qs1-work-wrapper .work-a-content{
		width: auto;
		margin: 0 20px 15px 20px;
	}
	#qs1-work .qs1-work-modal .modal-content{
		width: 70%;
	}
	#qs1-work .qs1-work-wrapper .top-content{
		margin-bottom: 0;
	}
  }

/*ワークB*/
#qs1-work .qs1-work-wrapper .work-b-content ul li{
	background-image: url("../images/qs1-work/pran2-b-card/pran2-b-1.png");
}
#qs1-work .qs1-work-wrapper .work-b-content ul li:nth-child(2){
  background-image: url("../images/qs1-work/pran2-b-card/pran2-b-2.png");
}
#qs1-work .qs1-work-wrapper .work-b-content ul li:nth-child(3){
  background-image: url("../images/qs1-work/pran2-b-card/pran2-b-3.png");
}
#qs1-work .qs1-work-wrapper .work-b-content ul li:nth-child(4){
  background-image: url("../images/qs1-work/pran2-b-card/pran2-b-4.png");
}

/*ワークC*/
#qs1-work .qs1-work-wrapper .work-c-content ul li{
	background-image: url("../images/qs1-work/pran3-c-card/pran3-c-1.png");
}
#qs1-work .qs1-work-wrapper .work-c-content ul li:nth-child(2){
  background-image: url("../images/qs1-work/pran3-c-card/pran3-c-2.png");
}
#qs1-work .qs1-work-wrapper .work-c-content ul li:nth-child(3){
  background-image: url("../images/qs1-work/pran3-c-card/pran3-c-3.png");
}
#qs1-work .qs1-work-wrapper .work-c-content ul li:nth-child(4){
  background-image: url("../images/qs1-work/pran3-c-card/pran3-c-4.png");
}

/*クエスト２のトップ*/
  #top-student .sub-title .qs2-stu-title-img{
	  left: -30px;
	  height: 150px;
  }
  #top-student .qs2-top-ste-contet1 ul{
	  position: absolute;
	  right: 25px;
	  bottom: 30px;
	  top: auto;
  }
  #top-student .qs2-top-ste-contet1 ul li{
	  margin: 0;
  }
  #top-student .qs2-top-ste-contet1 .qs2-vid li{
	  margin-bottom: 30px;
  }
  #top-student .qs2-top-ste-contet1 .qs2-vid li:last-child{
	  margin-bottom: 5px;
  }
  #top-student .qs2-top-ste-contet1 .qs2-vid li:nth-child(3){
	  margin-bottom: 65px;
  }
  #qs1-work .qs3-work-wrapper{
	  padding-bottom: 0;
  }

  @media screen and (max-width: 960px) {
	#top-student .sub-title .qs2-stu-title-img{
		width: 23%;
	}
	#top-student .qs2-top-ste-contet1 ul{
		bottom: 8%;
		left: 0;
		margin: auto;
	}
	#top-student .qs2-top-ste-contet1 ul li{
		margin: 0 auto;
	}
	#top-student .qs2-top-ste-contet1 .qs2-vid li,
	#top-student .qs2-top-ste-contet1 .qs2-vid li:nth-child(3),
	#top-student .qs2-top-ste-contet1 .qs2-vid li:nth-child(2),
	#top-student .qs2-top-ste-contet1 .qs2-vid li:first-child{
		margin-bottom: 21%;
	}
	#top-student .qs2-top-ste-contet1 .qs2-vid li:last-child{
		margin-bottom: 0;
	}
	#top-student .qs2-top-ste-contet1 .qs2-vid li:nth-child(2){
		margin-bottom: 28%;
	}
	#top-student .qs2-top-ste-contet1 .qs2-vid{
		bottom: 2%;
	}
  }

/*クエスト２の先生用*/
   #top-student .qs2-tea-topex{
	   margin-top: 20px;
   }
@media screen and (max-width: 960px) {
	#top-student .qs2-tea-content1 .ter-content-text{
		top:15%;
	}
	#top-student .qs2-top-ex{
		margin-top: 20px;
	}
	#top-student .qs2-teaconent3 ul{
		padding-top: 45%;
	}
}

/*クエスト３の生徒用*/
  #top-student .sub-title .qs3-title-img{
	  left: -90px;
  }
  #top-student .top-content-3 .qs3-content-btn li,
  #top-student .top-content-3 .qs3-content-btn li:first-child{
	  margin-bottom: 40px;
  }
  #top-student .top-content-3 .qs3-content-btn li:first-child{
	  margin-bottom: 30px;
  }
  #top-student .top-content-3 .qs3-content-btn li:nth-child(2){
	margin-bottom: 55px;
}
  #top-student .top-content-3 .qs3-content-btn li:nth-child(3){
	  margin-bottom: 65px;
  }
  @media screen and (max-width: 960px) {
	#top-student .top-content-3 .qs3-content-btn li,
	#top-student .top-content-3 .qs3-content-btn li:first-child,
	#top-student .top-content-3 .qs3-content-btn li:nth-child(2){
		margin-bottom: 27%;
	}
	#top-student .top-content-3 .qs3-content-btn li:nth-child(3){
		margin-bottom: 19%;
	}
	#top-student .sub-title .qs3-title-img{
		left: -45px;
		top: 30%;
		width: 25%;
	}
  }
  @media screen and (max-width: 760px) {
	#top-student .sub-title .qs3-title-img{
		left: -40px;
		top: 30%;
		width: 30%;
	}
  }

 /*クエスト３の教師用*/
    #top-student .qs3-top-ex{
		margin-top: 0;
	}
/*クエスト３のワーク*/
  #qs1-work .qs1-work-wrapper .qs3-workcontent ul{
	  justify-content: center;
  }
  #qs1-work .qs1-work-wrapper .qs3-workcontent ul li{
	  margin-bottom: 25px;
  }
  #qs1-work .qs1-work-wrapper .qs3-workcontent ul li:nth-child(2){
	  background-image: none;
	  width: 100%;
	  display: flex;
	  justify-content: center;
  }
  #qs1-work .qs1-work-wrapper .qs3-workcontent ul li:nth-child(2) a{
	  display: inline-block;
	  width: 23%;
  }
  #qs1-work .qs1-work-wrapper .qs3-sub-title{
	  width: 460px;
	  margin-bottom: 40px;
  }
  #qs1-work .qs3-work-modal .modal-content .modal-text{
	  width: 120%;
	  margin-left: -10%;
  }
@media screen and (max-width: 1100px){
	#qs1-work{
		position: relative;
	}
	  #qs1-work .qs3-footer {
		  position: absolute;
		  bottom: 0;
		  left: 0;
		  width: 100%;
	  }
	}
@media screen and (max-width: 960px){
	#qs1-work .qs1-work-wrapper .qs3-workcontent{
		margin-bottom: 25%;
	}
	#qs1-work .qs1-work-wrapper .qs3-sub-title{
		width: 80%;
	}
}
@media screen and (max-width: 760px){
	#qs1-work .qs1-work-wrapper .qs3-workcontent{
		margin-bottom: 40%;
	}
	#qs1-work .qs1-work-wrapper .qs3-workcontent ul li{
		width: 80%;
	}
	#qs1-work .qs1-work-wrapper .qs3-workcontent ul li:nth-child(2) a{
		width: 50%;
	}
}

/*クエスト４トップページの生徒用*/
  #top-student .qs4-stu-content ul{
	  padding-top: 70px;
  }
  #top-student .top-content-3{
	  position: relative;
  }
  #top-student .qs4-content-mov .qs4-mov-btnlist{
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: flex-end;
  }
  #top-student .qs4-content-mov .qs4-mov-btnlist ul{
	  position: initial;
	  width: 100%;
  }
  #top-student .qs4-content-mov .qs4-mov-btnlist .qs4-content-btn1 li{
	  width: 220px;
	  margin: 0 30px 20px auto;
  }
  #top-student .qs4-content-mov .qs4-mov-btnlist .qs4-content-btn2{
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: flex-end;
	  padding-top: 130px;
  }
  #top-student .qs4-content-mov .qs4-mov-btnlist .qs4-content-btn2 li{
	  margin: 0 70px 45px 0;
	  width: 170px;
  }
  #top-student .qs4-content-mov .qs4-mov-btnlist .qs4-content-btn2 li:nth-child(even){
	  margin-left: 80px;
  }
  #top-student .qs4-content-mov .qs4-mov-btnlist .qs4-content-btn2 li:last-child{
	margin-right: 390px;
  }
  #top-student .qs4-content-mov .qs4-mov-btnlist .qs4-content-btn3{
	  display: flex;
	  justify-content: flex-end;
	  padding-top: 65px;
  }
  #top-student .qs4-stu-content .back-mas2{
	  bottom: -150px;
  }
  @media screen and (max-width: 960px){
	#top-student .qs4-content-mov .qs4-mov-btnlist .qs4-content-btn3{
		padding-top: 40%;
	}
	#top-student .qs4-sub-title .title-img{
		width: 25%;
		left: -30px;
		top: 25%;
	}
	#top-student .qs4-stu-content ul{
		padding-top: 85%;
	}
	#top-student .qs4-content-mov .qs4-mov-btnlist ul{
		padding-top: 90%;
	}
	#top-student .qs4-content-mov .qs4-mov-btnlist .qs4-content-btn1 li{
		width: 55%;
		margin: 0 auto 30%;
	}
	#top-student .qs4-content-mov .qs4-mov-btnlist .qs4-content-btn2{
		justify-content: center;
		padding-top: 17%;
	}
	#top-student .qs4-content-mov .qs4-mov-btnlist .qs4-content-btn2 li:nth-child(even),
	#top-student .qs4-content-mov .qs4-mov-btnlist .qs4-content-btn2 li:last-child{
		margin-left: auto;
		margin-right: auto;
	}
	#top-student .qs4-content-mov .qs4-mov-btnlist .qs4-content-btn2 li{
		margin: 0 auto 18% auto;
		width: 56%;
	}
	#top-student .qs4-content-mov .qs4-mov-btnlist .qs4-content-btn2 li:nth-child(2),
	#top-student .qs4-content-mov .qs4-mov-btnlist .qs4-content-btn2 li:nth-child(4),
	#top-student .qs4-content-mov .qs4-mov-btnlist .qs4-content-btn2 li:nth-child(6){
		margin-bottom: 20%;
	}
  }

/*クエスト４の動画*/
  #top-student .qs4-mov1-subtitle{
	  width: 770px;
	  max-width: 100%;
	  margin: 60px auto 0 auto;
  }
  #top-student .qs4-mov1-subtitle p{
	  font-size: 30px;
	  font-weight: 600;
  }
@media screen and (max-width: 960px){
	#top-student .qs4-mov1-subtitle{
		text-align: center;
	}
}
@media screen and (max-width: 760px){
	#top-student .qs4-mov1-subtitle p{
		font-size: 14px;
	}
	#top-student .qs4-mov1-subtitle{
		margin: 30px auto 0 auto;
	}
}

/*クエスト４のニュース動画*/
  #top-student .qs4-news-content img{
	  width: 100%;
	  height: auto;
	  position: relative;
  }
  #top-student .qs4-news-content ul{
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: flex-start;
	  padding-top: 140px;
  }
  #top-student .qs4-news-content ul li{
	  width: 220px;
	  margin-bottom: 55px;
  }
  #top-student .qs4-news-content ul li:nth-child(odd){
	  margin-left: 260px;
  }
  #top-student .qs4-news-content ul li:nth-child(even){
	margin-left: 25px;
}
@media screen and (max-width: 960px){
	#top-student .resultMovi a{
		width: 55%;
		margin-top: 40px;
	}
	#top-student .qs4-news-content ul li{
		width: 55%;
		margin: 0 auto;
		margin-bottom: 11%;
	}
	#top-student .qs4-news-content ul li:nth-child(odd){
		margin-left: auto;
	}
	#top-student .qs4-news-content ul li:nth-child(even){
	  margin-left: auto;
	  margin-bottom: 23%;
   }
   #top-student .qs4-news-content ul li:nth-child(3),
   #top-student .qs4-news-content ul li:nth-child(5),
   #top-student .qs4-news-content ul li:nth-child(7){
	   margin-bottom: 16%;
   }
   #top-student .qs4-news-content ul li:nth-child(4),
   #top-student .qs4-news-content ul li:nth-child(6){
	 margin-bottom: 23%;
	}
   #top-student .qs4-news-content ul{
	   padding-top: 19%;
   }
}
@media screen and (max-width: 760px){
	#top-student .qs4-news-content ul li:nth-child(1){
		margin-bottom: 7%;
	}
	#top-student .qs4-news-content ul li:nth-child(7){
		margin-bottom: 13%;
	   }
}

/*クエスト５の生徒用*/
  #top-student .qs5-content  ul{
	  padding-top: 90px;
  }
  #top-student .qs5-content1 ul{
	  top: 0;
  }
  #top-student .qs5-content1 ul li:nth-child(2){
	  margin-bottom: 55px;
	}
	#top-student .qs5-content1 .qs2-vid li:nth-child(3){
	  margin-bottom: 50px;
  }
@media screen and (max-width: 960px){
	#top-student .qs5-content ul{
		padding-top: 85%;
	}
	#top-student .qs5-content1 ul{
		padding-top: 90%;
	}
	#top-student .qs5-content1 .qs2-vid li, 
	#top-student .qs5-content1 .qs2-vid li:nth-child(3), 
	#top-student .qs5-content1 .qs2-vid li:nth-child(2), 
	#top-student .qs5-content1 .qs2-vid li:first-child{
		margin-bottom: 27%;
	}
	#top-student .qs5-content1 .qs2-vid li:nth-child(3){
		margin-bottom: 20%;
	}
}

/*クエスト５の診断ゲーム*/
  #quest5 li{
	  list-style: none;
  }
  #quest5{
	  background-image: url("../images/qs5-work1/quest5-work.png");
	  background-repeat: no-repeat;
	  background-size: 100% auto;
	  padding-top: 120px;
  }
  #quest5 .quest5-wrapper{
	  width: 1000px;
	  max-width: 100%;
	  margin: 0 auto;
	  text-align: center;
  }
  #quest5 .quest5-wrapper .title .title-item{
	  display: flex;
	  justify-content: center;
  }
  #quest5 .quest5-wrapper .title .title-item li{
	  width: 150px;
  }
  #quest5 .quest5-wrapper .title .title-item li:nth-child(2){
	  width: 510px;
	  margin: 0 15px;
  }
  #quest5 .quest5-wrapper .title .title-item li img{
	  width: 100%;
	  height: auto;
  }
  #quest5 .quest5-wrapper .title .title-item li:last-child img{
	  opacity: 0;
  }
  #quest5 .quest5-wrapper .qs5-content{
	  background-color: white;
	  padding-top: 40px;
	  margin-top: -30px;
  }
  #quest5 .quest5-wrapper .qs5-content .sub-title{
	  margin: 0 40px 45px 40px;
  }
  #quest5 .quest5-wrapper .qs5-content .sub-title img,
  #quest5 .quest5-wrapper .qs5-content .questionTitle img,
  #quest5 .quest5-wrapper .qs5-content .questionItem li .click-icon img,
  #quest5 .quest5-wrapper .qs5-content .questionItem li .items-text img,
  #quest5 .quest5-wrapper .qs5-content .diagnosis-btn .btn img,
  #quest5 .quest5-wrapper .result-contnet .result-item img,
  #quest5 .quest5-wrapper .game-bottm-text img{
	  width: 100%;
	  height: auto;
  }
  #quest5 .quest5-wrapper .qs5-content .questionTitle,
  #quest5 .quest5-wrapper .qs5-content .questionItem{
	  width: 600px;
	  margin: 0 auto;
  }
  #quest5 .quest5-wrapper .qs5-content .questionItem{
	  display: flex;
	  justify-content: space-between;
	  margin: 20px auto 50px auto;
  }
  #quest5 .quest5-wrapper .qs5-content .questionItem li{
	  width: 50%;
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
  }
  #quest5 .quest5-wrapper .qs5-content .questionItem li .click-icon{
	  width: 50px;
	  margin-right: 10px;
  }
  #quest5 .quest5-wrapper .qs5-content .questionItem li .click-icon img{
	  opacity: 0;
  }
  #quest5 .quest5-wrapper .qs5-content .questionItem li .items-text{
	  width: 230px;
  }
  #quest5 .quest5-wrapper .qs5-content .questionItem li .click-icon-a{
	  background-image: url("../images/qs5-work1/icon-a-back.png");
	  background-size: cover;
  }
  #quest5 .quest5-wrapper .qs5-content .questionItem li .click-icon-b{
	background-image: url("../images/qs5-work1/icon-b-back.png");
	background-size: cover;
  }
  #quest5 .quest5-wrapper .qs5-content .diagnosis-btn{
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  padding: 20px 0;
  }
  #quest5 .quest5-wrapper .qs5-content .diagnosis-btn .btn{
	  width: 190px;
	  margin: 0 20px;
  }
  #quest5 .img-sp{
	  display: none;
  }
  #quest5 .quest5-wrapper .result-contnet{
	  width: 840px;
	  margin: 0 auto;
  }
  #quest5 .quest5-wrapper .result-contnet .result-item{
	  height: 100vh;
	  width: 100%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  position: relative;
  }
  #quest5 .quest5-wrapper .result-contnet .result-item .game-bottm-text{
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  margin: auto;
	  width: 40%;
	  padding: 0;
  }
  #quest5 .quest5-wrapper .game-bottm-text{
	  width: 310px;
	  margin: 0 auto;
	  padding: 50px 0;
  }
  footer{
	  font-size: 12px;
	  padding: 25px 0;
	  text-align: center;
	  font-weight: 600;
  }
  @media screen and (max-width: 960px){
	#quest5 .quest5-wrapper .result-contnet .result-item .game-bottm-text{
		bottom: 20%;
	}
	#quest5 .img-pc{
		display: none;
	}
	#quest5 .img-sp{
		display: inline-block;
	}
	#quest5 .quest5-wrapper .qs5-content{
		margin: 0 40px 0 40px;
		width: auto;
		padding: 0;
	}
	#quest5{
		background-image: url("../images/qs5-work1/sp/back.png");
	}
	#quest5 .quest5-wrapper .title .title-item{
		flex-wrap: wrap;
		margin-bottom: 45px;
	}
	#quest5 .quest5-wrapper .title .title-item li:nth-child(1){
		width: 21%;
		margin-bottom: 30px;
	}
	#quest5 .quest5-wrapper .title .title-item li:nth-child(2){
		width: 78%;
	}
	#quest5 .quest5-wrapper .title .title-item li:nth-child(3){
		display: none;
	}
	#quest5 .quest5-wrapper .qs5-content .sub-title{
		margin: 0 0 50px 0;
	}
	#quest5 .quest5-wrapper .qs5-content .questionTitle{
		width: 93%;
	}
	#quest5 .quest5-wrapper .qs5-content .questionItem{
		width:57%;
		flex-wrap: wrap;
		margin: 40px auto 40px auto;
	}
	#quest5 .quest5-wrapper .qs5-content .questionItem li{
		width: 100%;
		justify-content: space-between;
		margin-bottom: 30px;
	}
	#quest5 .quest5-wrapper .qs5-content .questionItem li .click-icon{
		width: 15%;
		margin: 0;
	}
	#quest5 .quest5-wrapper .qs5-content .questionItem li .items-text{
		width: 83%;
	}
	#quest5 .quest5-wrapper .qs5-content .diagnosis-btn{
		padding: 0;
	}
	#quest5 .quest5-wrapper .qs5-content .diagnosis-btn .btn{
		width: 31%;
	}
	#quest5 .quest5-wrapper .result-contnet{
		width: auto;
		margin: 0 40px;
	}
	#quest5 .quest5-wrapper .game-bottm-text{
		width: 77%;
		padding: 90px 0 70px 0;
	}
  }
  @media screen and (max-width: 760px){
	#top-student .resultMovi a{
		margin-top: 20px;
	}
	#quest5 .quest5-wrapper .result-contnet .result-item .game-bottm-text{
		bottom: 29%;
	}
	#quest5{
		padding-top: 60px;
	}
	#quest5 .quest5-wrapper .title .title-item li:nth-child(1),
	#quest5 .quest5-wrapper .qs5-content .questionItem li{
		margin-bottom: 15px;
	}
	#quest5 .quest5-wrapper .title .title-item{
		margin-bottom: 22px;
	}
	#quest5 .quest5-wrapper .qs5-content{
		margin: 0 20px;
	}
	#quest5 .quest5-wrapper .qs5-content .sub-title{
		margin-bottom: 25px;
	}
	#quest5 .quest5-wrapper .qs5-content .questionItem{
		margin: 20px auto;
	}
	#quest5 .quest5-wrapper .qs5-content .diagnosis-btn .btn{
		margin: 0 10px;
	}
	#quest5 .quest5-wrapper .result-contnet{
		margin: 0 10px;
	}
	#quest5 .quest5-wrapper .game-bottm-text{
		padding: 45px 0 35px 0;
	}
	footer {
		padding: 12px 0;
	}
  }

/*クエスト５のワーク２*/
  #quest5 .quest5-wrapper .work2-title .title-item li{
	  width: 470px;
	  margin: 0 auto 40px auto;
  }
  #quest5 .quest5-wrapper .work2-title .title-item li img,
  #quest5 .quest5-wrapper .qs5-content .work2-ex img{
	  width: 100%;
	  height: auto;
  }
  #quest5 .quest5-wrapper .qs5-content{
	  margin-top: 0;
  }
  #quest5 .quest5-wrapper .qs5-content .work2-ex{
	  width: 770px;
	  margin: 0 auto 55px auto;
  }

  /*クエスト２のワーク１*/
  #quest2 .compurational1 .comp-wrapper .top-cel .namber-wrapper input,
  #quest2 .compurational1 .comp-wrapper .top-cel .namber-wrapper .unit{
	  color: #412b13;
  }
  #quest2 .compurational1 .comp-wrapper .top-cel .namber-wrapper input,
  #quest2 .compurational1 .comp-wrapper li.top-cel:last-child .namber-wrapper input{
	  width: 45px;
  }
  #quest2 .compurational1 .comp-wrapper .topCel-red .namber-wrapper input,
  #quest2 .compurational1 .comp-wrapper .topCel-red .namber-wrapper .unit{
	  color: #e80002;
  }
  #cardLids1 tbody tr td{
	  position: relative;
  }
  #cardLids1 tbody tr td .card-top, 
  #cardLids2 tbody tr td .card-top{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }
  #cardLids1 tbody tr .card3 .card-top, 
  #cardLids2 tbody tr .card3 .card-top{
	  display: none;
  }
  #quest2 .compurational6{
	  padding: 0 30px 40px 0;
  }
  #quest2 .compurational6 .total-subtitle{
	  font-size: 15px;
	  line-height: 1.5em;
	  font-weight: 600;
	  margin-right: 45px;
	  color: #412b13;
	  padding-top: 15px;
  }
  #quest2 .compurational6 .comp-wrapper .namber-d::before{
	  content: "";
  }
  #quest2 .compura12 .comp-wrapper .namber-wrapper{
	  padding: 12px 15px;
	  justify-content: center;
	  margin: 0 10px;
  }
  #quest2 .compura12 .comp-wrapper li .cel-text-wal,
  #quest2 .compura12 .comp-wrapper li .cel-text{
	  margin: 20px 5px 0 5px;
  }
  #quest2 .oziPosition{
	  position: relative;
  }
  #quest2 .oziPosition::before{
	  content: "";
	  position: absolute;
	  top: -140px;
	  right: -110px;
	  height: 160px;
	  width: 120px;
	  background-image: url("../images/qs2-work1/ozi-icon.png");
	  background-size: auto 100%;
	  background-repeat: no-repeat;
  }
  #quest2 .compura12 .comp-wrapper{
	  margin-right: -140px;
  }
  #quest2 .compura12 button{
	  margin-left: 5px;
  }
  #quest2 .compura12 .comp-wrapper .numberWrapper{
	  padding: 0 15px 0 0;
  }
  #quest2 .conpraBottom{
	  padding: 25px 50px 65px 0;
  }
  #quest2 .conpraBottom .comp-wrapper li:first-child .namber-wrapper .namber-text{
	  font-size: 15px;
	  letter-spacing: 2px;
	  font-weight: 600;
	  margin-bottom: 0;
  }
  #quest2 .conpraBottom .comp-wrapper li:first-child .namber-wrapper{
	  padding: 0 15px;
  }
  #quest2 .conpraBottom .comp-wrapper li:last-child .namber-wrapper input{
	  width: 220px;
  }
  .br-sp{
	  display: none;
  }

  @media screen and (max-width: 960px){
	.br-sp{
		display: inline-block;
	}
	#quest2 .celTextWrapper{
		width: auto;
	}
	#quest2 .compurational6 .total-subtitle br{
		display: none;
	}
	#quest2 .compurational6 .total-subtitle{
		font-size: 18px;
		width: auto;
		text-align: left;
		margin-bottom: 10px;
	}
	#quest2 .compura12 .comp-wrapper{
		margin-right: 0;
	}
	#quest2 .compura12 .comp-wrapper li:first-child .namber-wrapper{
		padding: 0 15px 0 0;
	}
	#quest2 .celTextWrapper1{
		width: auto;
	}
	#quest2 .compura12 li{
		margin-bottom: 10px;
	}
	#quest2 .compura12 li:nth-child(1){
	margin-left: 10%;
}
	#quest2 .compura12 li:nth-child(5){
		margin-right: 10%;
	}
	#quest2 .compura12 button{
		margin: 0 30%;
	}
	#quest2 .oziPosition::before{
		top: 0;
		right: -130px;
	}
	#quest2 .conpraBottom .comp-wrapper .last-cellist-1{
		margin: 30px 100px;
	}
	#quest2 .conpraBottom button{
		margin-top: 0;
	}
  }
  @media screen and (max-width: 760px){
	#quest2 .compurational6 .total-subtitle{
		font-size: 10px;
	}
	#quest2 .compurational6{
		padding: 0 0 20px 0;
	}
	#quest2 .compura12 li:nth-child(5){
		margin-right: 0;
	}
	#quest2 .compura12 .comp-wrapper .namber-wrapper{
		padding: 7px 10px;
	}
	#quest2 .compura12 .comp-wrapper .numberWrapper{
		padding: 0;
	}
	#quest2 .compura12 li:nth-child(1){
		margin-left: 2%;
	}
	#quest2 .compura12 li:nth-child(5){
		margin-right: 2%
	}
	#quest2 .oziPosition::before{
		right: -65px;
		height: 80px;
		width: 60px;
	}
	#quest2 .conpraBottom{
		padding: 12px 0 30px 0;
	}
	#quest2 .conpraBottom .comp-wrapper li:first-child .namber-wrapper .namber-text{
		font-size: 10px;
	}
	#quest2 .conpraBottom .comp-wrapper li:last-child .namber-wrapper input{
		width: 50%;
	}
	#quest2 .conpraBottom .comp-wrapper li:first-child .namber-wrapper{
		width: 80%;
		margin: 0 auto;
	}
	#quest2 .conpraBottom .comp-wrapper .last-cellist-1{
		margin: 15px auto;
	}
	#quest2 .compura12 .comp-wrapper .numberWrapper .unit{
		padding-right: 10px;
	}
  }

/*クエスト２のワーク３*/
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content1{
	  display: block;
	  margin: 10px 0 0 0;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut1{
	  margin: 0 40px;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content1 .reclut-namber .namber-wrapper input{
	  width: 110px;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content1 .reclut-mark{
	  height: 55px;
	  margin: 10px auto;
  }
  #quest2 .quest2-wrapper .content .game-content .game-list1 table tbody tr td{
	  width: 200px;
  }

  @media screen and (max-width: 960px){
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content1{
		display: flex;
	}
	#quest2 .quest2-wrapper .content .game1{
		margin: 0 5%;
	}
	#quest2 .quest2-wrapper .content .game-content .game-list .reclut1{
		margin-bottom: 20px;
	}
  }

/*ニュースワーク*/
  #qs5-work2{
	  background-image: url("../images/quest2/quest2-2-back.png");
	  background-size: 100% auto;
  }
  #qs5-work2 .qs5-work2-wrapper{
	  width: 1000px;
	  max-width: 100%;
	  margin: 0 auto;
  }
  #qs5-work2 .qs5-work2-wrapper .top-title{
	  width: 46%;
	  margin: 0 auto 40px auto;
	  padding-top: 120px;
  }
  #qs5-work2 .qs5-work2-wrapper .top-title img{
	  width: 100%;
	  height: auto;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent{
	  background-color: white;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper{
	  margin: 0 40px;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .contentEx{
	  width: 78%;
	  margin: 0 auto 60px auto;
	  padding-top: 40px;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .contentEx img{
	  width: 100%;
	  height: auto;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .contentTitle{
	  width: 100%;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .contentTitle img{
	  width: 100%;
	  height: auto;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .card-select{
	  display: flex;
	  justify-content: flex-end;
	  align-items: center;
	  margin: 40px 0 20px 0;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .card-select {
	  list-style: none;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .card-select .conent-title p{
	  margin-right: 50px;
	  font-size: 20px;
	  font-weight: 600;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .card-select .card{
	  width: 160px;
	  position: relative;
	  margin-right: 25px;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .card-select .card .card-top{
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: auto;
	  cursor: pointer;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .card-select .card img{
	  width: 100%;
	  height: auto;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .costContent{
	  display: flex;
	  align-items: center;
	  justify-content: flex-end;
	  margin-bottom: 20px;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .costContent li{
	  list-style: none;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .costContent .word{
	  width: 50px; 
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .costContent .word .word-a img{
	width: 100%;
	height: auto;
}
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .costContent .cost{
	  width: 160px;
	  text-align: center;
	  font-size: 20px;
	  font-weight: 600;
	  color: #412b13;
	  margin-right: 25px;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .costContent .costTitle{
	  margin: 0 0 0 18px;
	  width: 110px;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .costContent .costTitle{
	  font-size: 20px;
	  font-weight: 600;
	  color: #412b13;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .costContent li:last-child{
	  position: relative;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .costContent li:last-child::before{
	  position: absolute;
	  bottom: -25px;
	  right: 0;
	  content: "(単位:円)";
	  font-size: 18px;
	  font-weight: 100;
  }
  #qs5-work2 .qs5-work2-wrapper .newsContent,
  #qs5-work2 .qs5-work2-wrapper .newsTotal{
	  padding-left: 70px;
	  border-top: 4px solid #412b13;
	  width: 100%;
	  position: relative;
  }
  #qs5-work2 .qs5-work2-wrapper .newsContent::before{
	  position: absolute;
	  top: 20px;
	  left: 0;
	  content: "";
	  height: 93%;
	  width: 50px;
	  background-image: url("../images/qs5-work2/set-i.png");
	  background-size: auto 100%;
	  background-repeat: no-repeat;
  }
  #qs5-work2 .qs5-work2-wrapper .newsContent .newsWrapper .news-list,
  #qs5-work2 .qs5-work2-wrapper .newsTotal .newsTotalWrapper .news-list{
	  display: flex;
	  justify-content: space-between;
	  border-bottom: 2px solid #412b13;
  }
  #qs5-work2 .qs5-work2-wrapper .newsTotal .newsTotalWrapper .news-list{
	  border-bottom: none;
  }
  #qs5-work2 .qs5-work2-wrapper .newsContent .newsWrapper tr:last-child{
	  border: none;
  }
  #qs5-work2 .qs5-work2-wrapper .newsContent .newsWrapper .news-list .news-item,
  #qs5-work2 .qs5-work2-wrapper .newsTotal .newsTotalWrapper .news-list .news-item{
	  width: 20%;
	  height: 95px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  position: relative;
	  font-size: 24px;
	  font-weight: 600;
  }
  #qs5-work2 .qs5-work2-wrapper .newsContent .newsWrapper .news-list .news-item .newsBtn{
	  position: absolute;
	  top: 15%;
	  left: 0;
	  width: 100%;
	  height: auto;
	  cursor: pointer;
  }
  #qs5-work2 .qs5-work2-wrapper .newsContent .newsWrapper .news-list .news-item img{
	  width: 100%;
	  height: auto;
  }
  #qs5-work2 .qs5-work2-wrapper .newsTotal{
	border-top:double 7px #412b13; 
	border-bottom: 2px solid #412b13;
	position: relative;
  }
  #qs5-work2 .qs5-work2-wrapper .newsTotal::before{
	  content: "";
	  position: absolute;
	  top: 20px;
	  left: 0;
	  width: 50px;
	  height: 50px;
	  background-image: url("../images/qs5-work2/set-u.png");
	  background-size: auto 100%;
	  background-repeat: no-repeat;
  } 
  #qs5-work2 .qs5-work2-wrapper .newsTotal .newsTotalWrapper .news-list .news-item{
	  height: 80px;
  }
  #qs5-work2 .qs5-work2-wrapper .reportBtnContent{
	  height: 110px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
  }
  #qs5-work2 .qs5-work2-wrapper .reportBtnContent button{
	  width: 30%;
	  background-color: initial;
	  border: none;
	  margin: 0;
	  padding: 0;
	  position: relative;
  }
  #qs5-work2 .qs5-work2-wrapper .reportBtnContent button .reportBtn-top{
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: auto;
  }
  #qs5-work2 .qs5-work2-wrapper .reportBtnContent button img{
	  width: 100%;
	  height: auto;
  }
  #qs5-work2 .qs5-work2-wrapper .newsTotal .newsTotalWrapper .news-list .news-btn6{
	  color: #412b13;
	  text-align: left;
	  justify-content: flex-start;
  }
  #qs5-work2 .qs5-work2-wrapper .newsTotalBottom::before{
	  background-image: none;
  }
  #qs5-work2 .qs5-work2-wrapper .newsTotalBottom .newsTotalWrapper .newsList7{
	  position: relative;
  }
  #qs5-work2 .qs5-work2-wrapper .newsTotalBottom .newsTotalWrapper .newsList7::before{
	position: absolute;
	content: "";
	top: 20px;
	left: -70px;
	width: 50px;
	height: 50px;
	background-image: url("../images/qs5-work2/set-e.png");
	background-size: auto 100%;
}
#qs5-work2 .qs5-work2-wrapper .newsTotalBottom .newsTotalWrapper .newsList8{
	position: relative;
}
#qs5-work2 .qs5-work2-wrapper .newsTotalBottom .newsTotalWrapper .newsList8::before{
  position: absolute;
  content: "";
  top: 20px;
  left: -70px;
  width: 50px;
  height: 50px;
  background-image: url("../images/qs5-work2/set-o.png");
  background-size: auto 100%;
}
  #qs5-work2 .qs5-work2-wrapper .finalPrice{
	  height: 190px;
	  display: flex;
	  justify-content: flex-end;
	  align-items: center;
  }
  #qs5-work2 .qs5-work2-wrapper .finalPrice .price-text p,
  #qs5-work2 .qs5-work2-wrapper .finalPrice .priceNumber p{
	  font-size: 35px;
	  font-weight: bold;
	  color: #412b13;
	  margin-right: 15px;
	  position: relative;
  }
  #qs5-work2 .qs5-work2-wrapper .finalPrice .price-text p::after{
	  position: absolute;
	  content: "(１つ目の商品オ＋２つ目の商品オ)";
	  bottom: -30px;
	  right: 0;
	  font-size: 18px;
	  font-weight: 600;
	  width: 290px;
  }
  #qs5-work2 .qs5-work2-wrapper .finalPrice .priceNumber{
	  display: flex;	
	  border: 8px solid #412b13;  
	  padding: 15px;
	  align-items: flex-end;
  }
  #qs5-work2 .qs5-work2-wrapper .finalPrice .priceNumber input{
	  font-size: 43px;
	  height: 43px;
	  line-height: 43px;
	  width: 320px;
	  color: #0073b9;
	  border: none;
	  text-align: right;
	  font-weight: 600;
	  letter-spacing: 8px;
	  padding: 0;
	  opacity: 0;
  }
  #qs5-work2 .topRink{
	  padding: 35px 0;
	  text-align: center;
  }
  #qs5-work2 .topRink .rinkImg{
	  width: 300px;
	  margin: 0 auto;
  }
  #qs5-work2 .topRink .rinkImg img{
	  width: 100%;
	  height: auto;
  }
  #qs5-work2 .js-modal{
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100vh;
	  background-color: rgba(0,0,0,0.7);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  display: none;
  }
  #qs5-work2 .js-modal .modal-content{
	  width: 30%;
	  position: relative;
  }
  #qs5-work2 .js-modal .modal-content .cardContent{
	  position: absolute;
	  top: 15%;
	  left: 0;
	  right: 0;
	  margin: auto;
	  width: 80%;
  }
  #qs5-work2 .js-modal .modal-content .cardContent .contento-img{
	  position: relative;
  }
  #qs5-work2 .js-modal .modal-content .contento-img .card_surface,
  #qs5-work2 .js-modal .modal-content .contento-img .card_reverse{
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: auto;
	  z-index: 20;
  }
  #qs5-work2 .js-modal .modal-content .contento-img .card_surface{
	  z-index: 30;
  }

  /* 表面の表示 */
  #qs5-work2 .js-modal .modal-content .cardContent .is-surface .card_surface {
    opacity: 1;
    transform: rotateY(0deg);
    transition:
        opacity 100ms 150ms,
        transform 300ms 150ms;
}
#qs5-work2 .js-modal .modal-content .cardContent .is-surface .card_reverse {
    opacity: 0;
    transform: rotateY(90deg);
    transition:
        opacity 50ms 200ms,
        transform 300ms;
}
 
/* 裏面の表示 */
#qs5-work2 .js-modal .modal-content .cardContent .is-reverse .card_surface {
	opacity: 0;
    transform:rotateY(90deg);
    transition:
        opacity 50ms 200ms,
        transform 300ms;

}
#qs5-work2 .js-modal .modal-content .cardContent .is-reverse .card_reverse {
    opacity: 1;
    transform:rotateY(0deg);
    transition:
        opacity 100ms 150ms,
        transform 300ms 150ms;
}


  #qs5-work2 .js-modal .modal-content .contento-img img{
	  width: 100%;
	  height: auto;
  }
  #qs5-work2 .js-modal .modal-content button{
	  border: none;
	  padding: 0;
	  width: 40%;
	  position: absolute;
	  bottom: 4%;
	  left: 0;
	  right: 0;
	  margin: auto;
	  background-color: initial;
  }
  #qs5-work2 .js-modal .modal-content .result-img img,
  #qs5-work2 .js-modal .modal-content button img{
	  width: 100%;
	  height: auto;
  }

  #quest2 .work3Content .comp-wrapper li:last-child .namber-wrapper input,
  #quest2 .work3Content .comp-wrapper .namber-wrapper #TotalProfit1{
	  width: 100px;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .card-select .card{
	  background-image: url("../images/qs5-work2/select-card-back1.png");
	  background-size: 100% auto;
	  background-repeat: no-repeat;
  }
  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .card-select .card2{
	background-image: url("../images/qs5-work2/select-card-back2.png");
}
#qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .card-select .card3{
	background-image: url("../images/qs5-work2/select-card-back3.png");
}
#qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .card-select .card4{
	background-image: url("../images/qs5-work2/select-card-back4.png");
}
#qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .card-select .card .card-top{
	opacity: 0;
}
#qs5-work2 .qs5-work2-wrapper .newsContent .newsWrapper .news-list .news-item .newsBtn{
	display: none;
}
#qs5-work2 .qs5-work2-wrapper .newsContent .newsWrapper .news-list .news-item span,
#qs5-work2 .qs5-work2-wrapper .newsTotal .newsTotalWrapper .news-list .news-item span{
	display: none;
}
#qs5-work2 .qs5-work2-wrapper .reportBtnContent button .reportBtn-top{
	display: none;
}
#qs5-work2 .img-sp,
#qs5-work2 .br-sp{
	display: none;
}
@media screen and (max-width: 960px){
	#qs5-work2{
		background-image: url("../images/qs4-news/sp/back.png");
	}
	#qs5-work2 .img-pc{
		display: none;
	}
	#qs5-work2 .img-sp,
	#qs5-work2 .br-sp{
		display: inline-block;
	}
	#qs5-work2 .qs5-work2-wrapper .qsContent{
		margin: 0 40px;
	}
	#qs5-work2 .qs5-work2-wrapper .top-title{
		width: 65%;
	}
	#qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .contentEx{
		width: 85%;
	}
	#qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper{
		margin: 0;
	}
	#qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .contentEx{
		margin-bottom: 40px;
	}
	#qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .card-select .card,
	#qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .costContent .cost{
		margin-right: 15px;
		width: 110px;
	}
	#qs5-work2 .qs5-work2-wrapper .newsContent{
		padding-left: 60px;
	}
	#qs5-work2 .qs5-work2-wrapper .newsContent .newsWrapper .news-list .news-item{
		width: 20%;
	}
	#qs5-work2 .qs5-work2-wrapper .newsContent .newsWrapper .news-list .news-item .newsBtn{
		top: 25%;
	}
	#qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .card-select .conent-title p{
		margin: 0;
		width: 140px;
		text-align: center;
	}
	#qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .costContent .costTitle{
		margin-left: 30px;
		width: 110px;
	}
	#qs5-work2 .js-modal .modal-content{
		width: 70%;
	}
	#qs5-work2 .qs5-work2-wrapper .newsContent .newsWrapper .news-list .news-item, 
	#qs5-work2 .qs5-work2-wrapper .newsTotal .newsTotalWrapper .news-list .news-item{
		font-size: 17px;
	}
	#qs5-work2 .qs5-work2-wrapper .finalPrice .priceNumber input{
		width: 200px;
	}
	#qs5-work2 .qs5-work2-wrapper .finalPrice .priceNumber{
		margin-right: 20px;
	}
}

@media screen and (max-width: 760px){
	#qs5-work2 .js-modal .modal-content{
		width: 100%;
	}
	#quest2 .quest2Work3-rapper .content .game-content .game-list .reclut .reclut-content1 .reclut-mark{
		height: 20px;
		margin: 10px;
	}
	#quest2 .quest2Work3-rapper .content .game-content .game-list .reclut .reclut-content1{
		margin-top: 0;
	}
	#quest2 .quest2Work3-rapper .content .game-content .game-list .reclut .reclut-text{
		margin-top: 20px;
	}
	#quest2 .quest2Work3-rapper .content .game .game-total .namber-wrapper input{
		width: 60px;
	}
	#quest2 .work3Content .comp-wrapper li:last-child .namber-wrapper input, 
	  #quest2 .work3Content .comp-wrapper .namber-wrapper #TotalProfit1,
	  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content1 .reclut-namber .namber-wrapper input{
		  width: 60px;
	  }
	  #quest2 .quest2-wrapper .content .game-content .game-list .reclut .reclut-content1{
		  align-items: bottom;
	  }
	  #qs5-work2 .qs5-work2-wrapper .top-title{
		  padding-top: 60px;
		  margin-bottom: 20px;
	  }
	  #qs5-work2 .qs5-work2-wrapper .qsContent{
		  margin: 0 20px;
	  }
	  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .contentEx{
		  padding-top: 20px;
		  margin-bottom: 20px;
	  }
	  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .card-select{
		  margin: 20px 0 10px 0;
	  }
	  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .card-select .conent-title p{
		  width: 80px;
		  font-size: 10px;
	  }
	  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .card-select .card, #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .costContent .cost{
		  width: 60px;
		  margin-right: 7px;
		  font-size: 10px;
	  }
	  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .costContent .costTitle{
		  margin-left: 7px;
		  width: 50px;
		  font-size: 10px;
	  }
	  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .costContent .word{
		  width: 25px;
	  }
	  #qs5-work2 .qs5-work2-wrapper .qsContent .contentWrapper .costContent li:last-child::before{
		  bottom: -12px;
		  font-size: 9px;
	  }
	  #qs5-work2 .qs5-work2-wrapper .newsContent, #qs5-work2 .qs5-work2-wrapper .newsTotal{
		  padding-left: 35px;
		  border-top: 2px solid #412b13;
	  }
	  #qs5-work2 .qs5-work2-wrapper .newsContent .newsWrapper .news-list .news-item, #qs5-work2 .qs5-work2-wrapper .newsTotal .newsTotalWrapper .news-list .news-item{
		  font-size: 8px;
	  }
	  #qs5-work2 .qs5-work2-wrapper .newsContent .newsWrapper .news-list .news-item, #qs5-work2 .qs5-work2-wrapper .newsTotal .newsTotalWrapper .news-list .news-item{
		  height: 45px;
	  }
	  #qs5-work2 .qs5-work2-wrapper .newsTotal::before,
	  #qs5-work2 .qs5-work2-wrapper .newsTotalBottom .newsTotalWrapper .newsList7::before,
	  #qs5-work2 .qs5-work2-wrapper .newsTotalBottom .newsTotalWrapper .newsList8::before{
		  top: 10px;
		  width: 25px;
		  height: 25px;
	  }
	  #qs5-work2 .qs5-work2-wrapper .newsContent .newsWrapper .news-list .news-item, #qs5-work2 .qs5-work2-wrapper .newsTotal .newsTotalWrapper .news-list .news-item{
		  font-size: 8px;
	  }
	  #qs5-work2 .qs5-work2-wrapper .reportBtnContent{
		  height: 50px;
	  }
	  #qs5-work2 .qs5-work2-wrapper .newsTotalBottom .newsTotalWrapper .newsList7::before,
	  #qs5-work2 .qs5-work2-wrapper .newsTotalBottom .newsTotalWrapper .newsList8::before{
		  left: -35px;
	  }
	  #qs5-work2 .qs5-work2-wrapper .finalPrice .priceNumber{
		  border: 4px solid #412b13;
		  padding: 7px;
	  }
	  #qs5-work2 .qs5-work2-wrapper .finalPrice .priceNumber input{
		  width: 100px;
		  font-size: 20px;
		  line-height: 20px;
		  height: 20px;
		  letter-spacing: 4px;
	  }
	  #qs5-work2 .qs5-work2-wrapper .finalPrice .price-text p, #qs5-work2 .qs5-work2-wrapper .finalPrice .priceNumber p{
		  font-size: 18px;
		  margin-right: 7;
	  }
	  #qs5-work2 .qs5-work2-wrapper .finalPrice .price-text p::after{
		  bottom: -30px;
		  font-size: 9px;
		  line-height: 1.5em;
		  width: 120px;
	  }

  }

  .game-list1{
	  position: relative;
  }
  .game-list1 .secretContent1{
	  position: absolute;
	  width: 50%;
	  height: 100%;
	  top: 0;
	  left: 0;
	  z-index: 10;
	  display: none;
  }
.game-list2{
	position: relative;
}
.game-list2 .secretContent2{
	position: absolute;
	width: 50%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10;
	display: none;
}
.game-list3{
	position: relative;
}
.game-list3 .secretContent3{
	position: absolute;
	width: 50%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10;
	display: none;
}
.game-list4{
	position: relative;
}
.game-list4 .secretContent4{
	position: absolute;
	width: 50%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10;
	display: none;
}

.quest2Work3-rapper .game-list1{
	position: relative;
}
.quest2Work3-rapper .game-list1 .secretContent1-1{
	position: absolute;
	width: 70%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10;
	display: none;
}
.quest2Work3-rapper .game-list2{
  position: relative;
}
.quest2Work3-rapper .game-list2 .secretContent2{
  position: absolute;
  width: 70%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  display: none;
}
.quest2Work3-rapper .game-list3{
  position: relative;
}
.quest2Work3-rapper .game-list3 .secretContent3{
  position: absolute;
  width: 70%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  display: none;
}
.quest2Work3-rapper .game-list4{
  position: relative;
}
.quest2Work3-rapper .game-list4 .secretContent4{
  position: absolute;
  width: 70%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  display: none;
}

.quest2Work3-rapper .game-list5{
  position: relative;
}
.quest2Work3-rapper .game-list5 .secretContent5{
  position: absolute;
  width: 70%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  display: none;
}

.quest2Work3-rapper .game-list6{
  position: relative;
}
.quest2Work3-rapper .game-list6 .secretContent6{
  position: absolute;
  width: 70%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  display: none;
}

  @media screen and (max-width: 960px){
	.game-list1 .secretContent1,
	.game-list2 .secretContent2,
	.game-list3 .secretContent3,
	.game-list4 .secretContent4{
		width: 100%;
		height: 60%;
	}

	.quest2Work3-rapper .game-list1 .secretContent1{
		width: 100%;
		height: 70%;
	}
	.quest2Work3-rapper .game-list2 .secretContent2{
		width: 100%;
		height: 70%;
	}
	.quest2Work3-rapper .game-list3 .secretContent3{
		width: 100%;
		height: 70%;
	}
	.quest2Work3-rapper .game-list4 .secretContent4{
		width: 100%;
		height: 70%;
	}
	.quest2Work3-rapper .game-list5 .secretContent5{
		width: 100%;
		height: 70%;
	}
	.quest2Work3-rapper .game-list6 .secretContent6{
		width: 100%;
		height: 70%;
	}
  }


  /*===========
inview
===========*/

.fadeIn_right {
	opacity: 0;
	transform: translate(50%, 0);
	transition: 2s;
  }
  .fadeIn_right.is-show {
	transform: translate(0, 0);
	opacity: 1;
  }
  
  /*===========
  .imgBox
  ===========*/
  
  .imgBox {
	text-align: center;
	margin: 50px 0;
  }
  .imgBox img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
  }
  
  /*===========
  .txtBox
  ===========*/
  
  .txtBox {
	text-align: center;
  }
  .txtBox p {
	font-size: 60px;
	font-weight: bold;
	padding: 2em 0;
	margin: 0;
  }
  
  /*===========
  base
  ===========*/
  .fadeIn_right {
	opacity: 0;
	transform: translate(50%, 0);
	transition: 2s;
  }
  .fadeIn_right.is-show {
	transform: translate(0, 0);
	opacity: 1;
  }

  #top-student .topContent{
	width: 770px;
    max-width: 100%;
    margin: 55px auto 40px auto;
	background-color: white;
	border: 4px solid #002d69;
	font-weight: 600;
	font-size: 20px;
	padding-bottom: 50px;
  }
  #top-student .topContent .contentTitle{
	  margin: 40px 0 30px 50px;
  }
  #top-student .topContent .contentTitle p{
	  width: 170px;
	  border-radius: 20px;
	  height: 35px;
	  color: #e80002;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 20px;
	  border: 3px solid #e80002;
  }
  #top-student .topContent .contentItemTiile{
	margin: 20px 0 30px 50px;
  }
  #top-student .topContent .contentBtn{
	  display: flex;
	  justify-content: center;
  }
  #top-student .topContent .contentBtn li{
	list-style: none;
	margin: 0 25px;
	width: 220px;
}
  #top-student .topContent .contentBtn li img{
	  width: 100%;
	  height: auto;
  }

  @media screen and (max-width: 960px){
	#top-student .topContent{
		width: auto;
        margin: 25px 40px 40px 40px;
		border: 10px solid #002d69;
	  }
	  #top-student .topContent .contentTitle{
		  display: flex;
		  justify-content: center;
		  margin: 40px 0;
	  }
	  #top-student .topContent .contentTitle p{
		  width: 300px;
		  border-radius: 40px;
		  height: 70px;
		  font-size: 34px;
		  border: 6px solid #e80002;
	  }
	  #top-student .topContent .contentItemTiile{
		display: flex;
		justify-content: center;
		font-size: 28px;
		margin: 20px 0 30px 0;
	  }
	  #top-student .topContent .contentBtn{
		  display: flex;
		  flex-wrap: wrap;
		  justify-content: center;
	  }
	  #top-student .topContent .contentBtn li{
		width: 55%;
		margin: 20px 0 60px 0;
	}
  }

  @media screen and (max-width: 760px){
	#top-student .topContent{
        margin: 25px 20px 20px 20px;
		border: 5px solid #002d69;
		padding-bottom: 20px;
	  }
	  #top-student .topContent .contentTitle{
		  margin: 40px 0 20px 0;
	  }
	  #top-student .topContent .contentTitle p{
		  width: 150px;
		  border-radius: 20px;
		  height: 35px;
		  font-size: 18px;
		  border: 3px solid #e80002;
	  }
	  #top-student .topContent .contentItemTiile{
		font-size: 14px;
		margin: 10px 0 15px 0;
	  }
	  #top-student .topContent .contentBtn li{
		width: 55%;
		margin: 10px 0 30px 0;
	}
  }

  #qs1-work .qs1-work-wrapper .work-a-content ul li{
	  position: relative;
  }
  #qs1-work .qs1-work-wrapper .work-a-content ul li .card-namber{
	  position: absolute;
	  top: -30px;
	  left: 0;
	  right: 0;
	  display: flex;
	  justify-content: center;
	  color: #845729;
	  font-weight: 600;
	  font-size: 24px;
		}

		@media screen and (max-width: 760px) {
			#qs1-work .qs1-work-wrapper .work-a-content ul li .card-namber{
				font-size: 14px;
				top: -15px;
			}
		}
		input[type=text] {
			line-height: normal; 
		  }