@charset "utf-8";

/* ========================================================
	hs_student.css => hs-student用CSS
======================================================== */

/* body
============================================================================================================ */
@media screen and (max-width: 1200px) {
	body	{
		width:1200px;
		overflow-x:scroll;
	}
}
@media screen and (max-width: 640px) {
	body	{
		width:auto;
		overflow-x:none;
	}
}

/* bg
============================================================================================================ */
.bg01	{
	background:url(../images/bg01.png) no-repeat center 260px;
}
.bg02	{
	background:url(../images/bg02.png) no-repeat center 230px;
}
.bg03	{
	background:url(../images/bg03.png) no-repeat 20% 1100px;
}
.bg04	{
	background:url(../images/bg04.png) no-repeat 78% 100px;
}
.bg05	{
	background:url(../images/bg05.png) no-repeat 85% 60px;
}
@media screen and (max-width: 640px) {
	.bg01,.bg02,.bg03,.bg04,.bg05	{
		background:none;
	}
}

/* restart_tit
============================================================================================================ */
.restart_tit {
    height: 490pxpx;
    position: relative;
		background:url(../images/bg_restart_main.png) center top no-repeat #d7efff;
}
@media screen and (max-width: 640px) {
	.restart_tit {
			height:auto;
			background: #none;
	}
}

/* qa_cont
============================================================================================================ */
.qa_tit	{
	margin-bottom:60px;
	text-align:center;
}
.qa_cont_fitst	{
	background:url(../images/bg_restart_top.png) top center no-repeat;
}
.qa_cont	{
	margin-bottom:60px;
	position:relative;
	padding-bottom:80px;
}
.qa_cont:after	{
	position: absolute;
	bottom:0;
  z-index: 1;
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  background-color: #e5e5e5;
}
.qa_cont_none:after	{
  height: 0;
}
.qa_cont > h1	{
	background:url(../images/bg_qa.png) center center no-repeat;
	width:607px;
	height:355px;
	margin:0 auto 20px;
	position:relative;
}
.qa_cont h1 > span	{
	width:607px;
	height:355px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	font-size:3rem;
	line-height:4rem;
}
.qa_cont > h1:before	{
	background:url(../images/ico_qa01.png) center center no-repeat;
	height:106px;
	width:106px;
	position:absolute;
	content:"";
	left:140px;
	top:0;
}
.qa_cont h1.qa2:before	{
	background:url(../images/ico_qa02.png) center center no-repeat;
}
.qa_cont h1.qa3:before	{
	background:url(../images/ico_qa03.png) center center no-repeat;
}
.qa_cont h1.qa4:before	{
	background:url(../images/ico_qa04.png) center center no-repeat;
}
.qa_cont h1.qa5:before	{
	background:url(../images/ico_qa05.png) center center no-repeat;
}
.qa_cont h1.qa6:before	{
	background:url(../images/ico_qa06.png) center center no-repeat;
}
.qa_cont h1.qa7:before	{
	background:url(../images/ico_qa07.png) center center no-repeat;
}
.qa_cont_inner:after	{
	content: "."; display: block; height: 0; clear: both; visibility: hidden; line-height: 0; overflow: hidden;
}
.qa_cont .qa_answer	{
	background:url(../images/bg_answer.png) center center no-repeat;
	width:650px;
	height:364px;
	margin:0 auto 20px;
	position:relative;
	color:#333;
}
.qa_cont .qa_answer > p	{
	width:650px;
	height:364px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	font-size:3rem;
	line-height:4rem;
	font-weight:bold;
	color:#38a300;
	padding-top:15px;
	box-sizing:border-box;
}
.qa_cont .qa_answer:before	{
	background:url(../images/ico_answer01.png) center center no-repeat;
	height:106px;
	width:106px;
	position:absolute;
	content:"";
	right:180px;
	top:0;
}
.qa_cont .qa_answer02:before	{
	background:url(../images/ico_answer02.png) center center no-repeat;
}
.qa_cont .qa_answer03:before	{
	background:url(../images/ico_answer03.png) center center no-repeat;
}
.qa_cont .qa_answer04:before	{
	background:url(../images/ico_answer04.png) center center no-repeat;
}
.qa_cont .qa_answer05:before	{
	background:url(../images/ico_answer05.png) center center no-repeat;
}
.qa_cont_inner	{
	width:750px;
	margin:0 auto 40px;
}
.qa_cont_inner dl	{
	float:left;
	width:calc(750px - 222px - 40px);
	padding-top:10px;
}
.qa_cont_inner dl.nofl	{
	float:none;
	width:auto;
	text-align:left;
	width:750px;
	margin:0 auto;
}
.qa_cont_inner dl dt	{
	font-size:2.4rem;
	line-height:3.4rem;
	color:#39a4d4;
	font-weight:bold;
	margin-bottom:15px;
}
.qa_cont_inner dl dd	{
	font-size:1.7rem;
}
.qa_cont_inner dl + img	{
	margin-top:30px;
}
.qa_cont_inner img.fl	{
	margin-right:40px;
}
.qa5_cont dl	{
	float:left;
	width:calc(750px - 84px - 40px);
	padding-top:10px;
}
.support_wrap	{
	width:750px;
	margin:40px auto 0;
}
.support_wrap h1	{
	font-size:2.4rem;
	line-height:3.4rem;
	color:#39a4d4;
	font-weight:bold;
	margin-bottom:-25px;
}
.support_wrap p	{
	margin-top:15px;
}
.qa_cont .know_cont	{
	width:750px;
	margin:0 auto 50px;
}
.qa_cont .know_cont .know_tit	{
  position: relative;
  text-align: center;
	color:#39a4d4;
	font-size:3.8rem;
	font-weight:bold;
	margin:0 0 10px;
}
.qa_cont .know_cont .know_tit span {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 0 .5em;
  padding: 0 .5em;
  background-color: #fff;
  text-align: left;
}
.qa_cont .know_cont .know_tit:before {
  position: absolute;
  top: 50%;
  z-index: 1;
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #39a4d4;
}
.qa_cont .know_cont .know_txt	{
	color:#39a4d4;
	font-size:2.8rem;
	line-height:3.8rem;
	font-weight:bold;
	margin:0;
	padding-left:30px;
	padding-right:30px;
	text-align:center;
}
.qa_cont .know_cont .know_txt + .know_img,
.qa_cont .know_cont .know_img + .know_img	{
	margin-top:30px;
}
.qa_cont .know_cont .know_img + .know_tit	{
	margin-top:40px;
}
.qa_cont .know_cont .know_img	{
	text-align:center;
}
.qa_cont .af_soshite	{
	background:url(../images/img_soshite.png) center bottom no-repeat;
	padding-bottom:150px;
	margin-bottom:10px;
}
.qa_cont .be_sarani	{
	margin:0 auto 50px;
	padding-top:90px;
	width:900px;
	text-align:center;
	background:url(../images/img_sarani.png) top center no-repeat;
}
.qa_cont .be_sarani2	{
	margin:30px auto 50px;
	padding-top:90px;
	width:auto;
	text-align:center;
	background:url(../images/img_sarani.png) top center no-repeat;
}
.qa_cont .matome	{
	text-align:center;
}
.qa_cont .ans03_txt,
.qa_cont .ans04_txt{
	font-size:2.8rem;
	line-height:3.5rem;
	color:#39a4d4;
	font-weight:bold;
	padding-top:45px;
	text-align:left;
}
@media screen and (max-width: 640px) {
	.qa_tit	{
		margin-bottom:0;
	}
	.qa_cont_fitst	{
		background:url(../images/bg_restart_top.png) top center no-repeat;
		background-size:contain;
		padding-top:20px;
	}
	.qa_cont	{
		margin:0 10px 30px;
		padding-bottom:35px;
	}
	.qa_cont:after	{
		height: 2px;
	}
	.qa_cont > h1	{
		background:url(../images/bg_qa.png) center center no-repeat;
		background-size:auto 175px;
		width:300px;
		height:200px;
		margin:0 auto 10px;
	}
	.qa_cont h1 > span	{
		width:300px;
		height:200px;
		font-size:1.8rem;
		line-height:2.8rem;
	}
	.qa_cont > h1:before	{
		background:url(../images/ico_qa01.png) center center no-repeat;
		background-size:auto 50px;
		height:50px;
		width:50px;
		left:80px;
	}
	.qa_cont .qa_answer	{
		background:url(../images/bg_answer.png) center center no-repeat;
		background-size:auto 180px;
		width:300px;
		height:200px;
		margin:0 auto 10px;
	}
	.qa_cont .qa_answer > p	{
		width:300px;
		height:200px;
		font-size:1.8rem;
		line-height:2.5rem;
	}
	.qa_cont .qa_answer:before	{
		background:url(../images/ico_answer01.png) center center no-repeat;
		background-size:auto 50px;
		height:50px;
		width:50px;
		right:80px;
	}
	.qa_cont .qa_answer02:before	{
		background:url(../images/ico_answer02.png) center center no-repeat;
		background-size:auto 50px;
	}
	.qa_cont .qa_answer03:before	{
		background:url(../images/ico_answer03.png) center center no-repeat;
		background-size:auto 50px;
	}
	.qa_cont .qa_answer04:before	{
		background:url(../images/ico_answer04.png) center center no-repeat;
		background-size:auto 50px;
	}
	.qa_cont .qa_answer05:before	{
		background:url(../images/ico_answer05.png) center center no-repeat;
		background-size:auto 50px;
	}
	.qa_cont h1.qa2:before	{
		background:url(../images/ico_qa02.png) center center no-repeat;
		background-size:auto 50px;
	}
	.qa_cont h1.qa3:before	{
		background:url(../images/ico_qa03.png) center center no-repeat;
		background-size:auto 50px;
	}
	.qa_cont h1.qa4:before	{
		background:url(../images/ico_qa04.png) center center no-repeat;
		background-size:auto 50px;
	}
	.qa_cont h1.qa5:before	{
		background:url(../images/ico_qa05.png) center center no-repeat;
		background-size:auto 50px;
	}
	.qa_cont h1.qa6:before	{
		background:url(../images/ico_qa06.png) center center no-repeat;
		background-size:auto 50px;
	}
	.qa_cont h1.qa7:before	{
		background:url(../images/ico_qa07.png) center center no-repeat;
		background-size:auto 50px;
	}
	.qa_cont_inner	{
		width:100%;
		margin:0 auto 20px;
		text-align:center;
	}
	.qa_cont_inner dl	{
		float:none;
		width:100%;
	}
	.qa_cont_inner dl dt	{
		font-size:1.8rem;
		line-height:2.6rem;
		margin-bottom:10px;
		text-align:left;
	}
	.qa_cont_inner dl dd	{
		font-size:1.4rem;
		text-align:left;
	}
	.qa_cont_inner dl + img	{
		margin-top:15px;
	}
	.qa_cont_inner img.fl	{
		margin-right:0;
		float:left;
		height:auto;
		width:40%;
	}
	.qa5_cont dl	{
		float:none;
		width:100%;
	}
	.support_wrap	{
		width:100%;
	}
	.support_wrap h1	{
		font-size:1.5rem;
		line-height:2.6rem;
		text-align:center;
		margin-bottom:0;
	}
	.support_wrap p	{
		margin-top:5px;
	}
	.qa_cont .know_cont	{
		width:100%;
		margin:0 auto 25px;
	}
	.qa_cont .know_cont .know_tit	{
		font-size:2rem;
		margin:0 0 5px;
	}
	.qa_cont .know_cont .know_txt	{
		font-size:1.7rem;
		line-height:2.4rem;
		padding-left:20px;
		padding-right:20px;
	}
	.qa_cont .know_cont .know_txt + .know_img,
	.qa_cont .know_cont .know_img + .know_img	{
		margin-top:15px;
	}
	.qa_cont .know_cont .know_img_sp > img	{
		height:60px;
		width:auto;
	}
	.qa_cont .af_soshite	{
		background:url(../images/img_soshite.png) center bottom no-repeat;
		background-size:auto 50px;
		padding-bottom:70px;
		margin-bottom:0;
	}
	.qa_cont .be_sarani{
		margin:0 auto 20px;
		padding-top:40px;
		width:100%;
		background:url(../images/img_sarani.png) top center no-repeat;
		background-size:auto 30px;
	}
	.qa_cont .be_sarani2{
		margin:20px auto;
		padding-top:40px;
		width:100%;
		background:url(../images/img_sarani.png) top center no-repeat;
		background-size:auto 30px;
	}
	.qa_cont .ans03_txt,
	.qa_cont .ans04_txt{
		font-size:1.5rem;
		line-height:2.5rem;
		padding-top:7px;
	}
	.qa_cont_inner dl.nofl	{
		float:none;
		width:auto;
		text-align:left;
		width:100%;
		margin:0 auto;
	}
}

/* oc
============================================================================================================ */
.oc_wrap	{
	margin-bottom:80px;
	width:1000px;
}
.oc_wrap:after	{
	content: "."; display: block; height: 0; clear: both; visibility: hidden; line-height: 0; overflow: hidden;
}
.oc_wrap h1	{
	width:426px;
	float:left;
	margin-right:44px;
}
.oc_txt	{
	float:left;
	width:530px;
	font-size:1.6rem;
	margin-top:20px;
}
.oc_txt > .stit	{
	font-size:3rem;
	color:#39a4d4;
	margin-bottom:10px;
	line-height:3.5rem;
}
@media screen and (max-width: 640px) {
	.oc_wrap	{
		margin:0 0 30px;
		width:100%;
		padding:0 10px 0;
		box-sizing:border-box;
	}
	.oc_wrap h1	{
		width:80%;
		float:none;
		margin:0 auto 15px;
	}
	.oc_txt	{
		float:none;
		width:100%;
		margin-top:0;
		font-size:1.4rem;
	}
	.oc_txt > .stit	{
		font-size:2rem;
		margin-bottom:5px;
		line-height:2.5rem;
		text-align:center;
	}
}

/* restart_bt
============================================================================================================ */
.restart_bt a[href]	{
	background:#ed6c74;
	text-align:center;
	color:#FFF;
	font-size:2rem;
	display:block;
	width:480px;
	margin:0 auto;
	padding:10px 0;
	position:relative;
}
.restart_bt a[href]:hover	{
	opacity:0.7;
}
.restart_bt a[href]:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 8px;
	height: 8px;
	margin-top: -5px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
@media screen and (max-width: 640px) {
	.restart_bt a[href]	{
			font-size:1.8rem;
			width:80%;
			padding:10px 0;
			font-size:1.4rem;
	}
}

/* underline
============================================================================================================ */
p span.underline{
    display:inline-block;
    box-shadow:0 -10px 0 -4px rgba(255,241,0,0.4) inset;
}