@charset "utf-8";

/* ++++++++++++++++++++++++++++++++++++++++

	for Smart Devices

++++++++++++++++++++++++++++++++++++++++ */

@media (max-width: 767px) {

	/* ----------------------------------------
		Common Settings
	---------------------------------------- */

	body {
		max-width: 100%;
	}
	.pc { display: none; }
	.sp { display: block; }


	body {
		font-size: 16px;
		line-height: 1.6;
	}

	img {
		width: 100%;
	}

	header {
		width: 95.4%;
		padding: 2.3%;
		background: url(/3c/img/bg_header.jpg) repeat;
	}
	header>div {
		width: 100%;
		margin: 0 auto;
	}
	#logo {
		width: 25.6%;
		margin-right: 2.3%;
	}
	#sns {
		width: 38.1%;
		padding-left: 99px;
	}
	#sns li {
		margin-left: 5.14%;
	}
	#sns li img {
		vertical-align: middle;
	}
	#sns li:nth-child(1) {
		width: 15%;
	}
	#sns li:nth-child(2) {
		width: 17.79%;
	}
	#sns li:nth-child(3) {
		width: 51.8%;
	}


	/* ----------------------------------------
					form
	---------------------------------------- */

	#form>div {
		width: 72.1%;
		height: 9.375%;
		margin-left: 27.9%;
	}
	
	#form #form1st {
		padding-top: 6.3%;
	}
	.ver2 #form #form1st {
		padding-top: 1.3%;
	}
	#form #form1st form {
		background: url(/3c/img/sp/form_1st.png) no-repeat;
		background-size: contain;
	}
	#form #form2nd {
		padding-top: 0;
	}
	#form #form2nd form {
		margin-top: 0;
		background: url(/3c/img/sp/form_2nd.png) no-repeat;
		background-size: contain;
	}
	input[type="text"] {
		padding: 1.2% 2.5%;
		font-size: 11px;
		line-height: 1.1em;
		border: none;
	}
	input[type="submit"] {
		cursor: pointer;
	}
	input::placeholder {
		color: #c9caca;
	}
	#form #form1st input[type="text"] {
		width: 36%;
		margin: 6.8% 19% 0 13%;
	}
	#form #form2nd input[type="text"] {
		width: 67%;
		margin: 7.3% 0 0 1.3%;
	}
	#form .btn_answer {
		width: 23%;
		height: 0;
		padding-top: 8%;
		margin: 1.5% 0 0;
		background: url("/3c/img/sp/btn_answer.png") no-repeat;
		background-size: contain;
	}


	/* ----------------------------------------
					contents
	---------------------------------------- */

	#bg1, #bg2, #bg3, #bg4, #bg5, #bg6, #bg7 {
		display: none;
	}

	#container {
		width: 93.75%;
		padding: 3.125%;
	}

	#contents {
		padding-top: 27.5%;
		position: relative;
	}

	article {		
		width: 100%;
		margin: 0 auto;
		position: relative;
		top: 0;
		left: 0;
	}
	article nav {
		position: absolute;
		top: 0%;
		left: 3%;
	}
	article nav ul {
		width: 94%;
	}
	article nav li:nth-child(1),
	article nav li:nth-child(3) {
		width: 32.2%;
	}
	article nav li:nth-child(2) {
		width: 35.6%;
	}
	article #kv a {
		width: 34.9%;
		bottom: 28.6%;
		right: 2.35%;	
	}
	article>div {
		background: url(/3c/img/sp/bg_main.jpg) repeat-y center;
		background-position-y: 47%;
		background-size: contain;
		padding: 0 0 22.34%;
	}

	article div>section {
		width: 93.75%;
		margin: 0 auto;
		text-align: center;
	}
	section h2 {
		margin: 0 auto 6.4%;
	}
	section h3 {
		margin: 8.2% auto 6.4%;
	}
	section#cmp,
	section#exam,
	section#about {
		margin: -47% auto 12.8%;
		padding: 47% 0 0;
	}
	section#cmp h3 {
		margin-top: 12.8%;
	}
	section#exam #examarea {
		width: 91%;
		background: #fff;
		margin: -3.43% auto 0;
		padding: 3.43% 1.56% 11.25%;
		border-radius: 0 0 24px 24px;
	}
	section#exam #exam1st {
		margin-top: 3.7%;
		padding-top: 11.2%;
		position: relative;
	}
	section#exam #exam1st a img {
		width: 91.29%;
	}
	section#exam #exam1st .exam1mark {
		width: 26.29%;
	}
	section#exam #exam1st .exam1txt {
		margin: 3.14% auto 8%;
	}
	section#exam #exam2nd_2 {
		margin-top: 3.7%;
		padding-top: 11.2%;
		position: relative;
	}
	section#exam #exam2nd_2 a img {
		width: 91.29%;
	}
	section#exam #exam2nd_2 .exam2mark {
		width: 26.29%;
		left: 0;
	}
	section#exam #exam2nd_2 .exam2txt {
		margin: 5.14% auto 0;
	}
	section#exam #examarea #exam2nd {
		margin-top: 7.4%;
	}
	section#exam h3+div {
		width: 100%;
		margin: 0 auto;
	}
	section#exam p,
	section#about div>div {
		float: none;
		line-height: 1.6;
	}
	section#exam .left,
	section#exam .right,
	section#about .left,
	section#about .right {
		width: 91%;
		margin: 0 auto;
	}
	section#about h3 {
		margin-top: 0;
	}
	section#about .left p {
		margin: 3.66% 0 0;
	}
	section#about .left p+img {
		width: 67.3%;
		margin: 7.3% auto;
	}
	section#about .left a img {
		width: 94.6%;
		margin: 0 2.7% 13.39%;
	}
	section#about .right p {
		margin: 5.5% 0 0;
	}
	section#about .right #msg {
		border: 1px solid #fff;
		text-align: center;
		border-radius: 5px;
		padding: 10.5% 7.5%;
		margin-top: 5.5%;
	}
	section#about .right #msg p {
		text-align: left;
	}
	section#info {
		margin: 7.8% auto 0;
	}
	section#info div {
		float: none;
		text-align: center;
	}
	section#info .left {
		width: 91%;
		margin: 0 auto 5.46%;
	}
	section#info .right {
		width: 91%;
		margin: 0 auto;
	}
	section#info div a img {
		width: 80.1%;
		margin: 3.59% auto;
	}
	section#info div p {
		text-align: left;
	}


	/* ----------------------------------------
					footer
	---------------------------------------- */

	footer {
		padding: 1.875% 0;
	}

	#page_top {
		width: 10.93%;
		position: fixed;
		bottom: 11.71%;
		left: 50%;
		margin-left: 35.15%;
	}
	

	/* ----------------------------------------
					popup
	---------------------------------------- */
	
	#inline-wrap,
	#inline-wrap2 {
		width: 87.2%;
		padding: 12.5% 3.9%;
		margin: 5% auto;
	}
	#inline-wrap .popupTxt {
		width: 71%;
		margin: 6.7% auto 3.4%;
	}
	#inline-wrap2 .popupTxt {
		width: 90%;
		margin: 6.7% auto;
	}
	#inline-wrap .popupClose, 
	#inline-wrap2 .popupClose {
		width: 13.6%;
	}
	
	
	/* ----------------------------------------
					countdown
	---------------------------------------- */

	#countdown {
		width: 50%;
		top: 36.9%;
		right: 26.6%;
	}
	.yycountdown-box {
		font-size: 7.5vw;
	}
	.yycountdown-box>div {
		width: 25%;
	}
	.yyc-hou {
		margin-left: 14.5%;
	}
	.yyc-min {
		margin-left: 5.5%;
	}
	
	
	/* ----------------------------------------
					sub
	---------------------------------------- */

	.sub article>div {
		padding: 0 0 22.18%;
		background-position-y: 0%;
	}
	.sub article div>section {
		width: 82%;
	}
	.step {
		margin: 6.718% auto 15.625%;
	}
	.step img,
	.course img {
		margin: 0 auto 9.375%;
	}
	.step img:last-child,
	.course img:last-child {
		margin: 0 auto;
	}
	.cptop {
		width: 81.9%;
		margin: 12.2% auto;
	}
	.hsac {
		position: relative;
	}
	.hsac a {
		width: 79.3%;
		position: absolute;
		bottom: 8.2%;
		right: 10.3%;
	}
	.step0 #page_top {
		bottom: 12%;
	}
	.step0 .cptop {
		margin: 15.625% auto 6.5625%;
	}
	.step0 section {
		padding-bottom: 0;
	}
	.step0 article>div {
		padding-bottom: 13.4375%;
	}
	.step1 #bg5,
	.step3 #bg5 {
		display: none;
	}
	.step2 .cptop {
		margin: 11.25% auto 13.125%;
	}
	.step2 article>div {
		padding-bottom: 16.4%;
	}
	.step3 #page_top {
		bottom: 12.5%;
	}
	.step3 .entry {
		margin: 11.4% auto 9.9%;
	}
	.step3 .step {
		margin: 6.875% auto 17.97%;
	}
	.step3 section {
		padding: 0;
	}
		

	/* ----------------------------------------
					end
	---------------------------------------- */

	.end #contents {
		padding-top: 34%;
	}
	.end article {
		margin: 0 auto;
	}
	.end #bg7 {
		display: none;
	}
	.end #sns {
		top: 18%;
	}
	.end #form {
		padding-top: 2%;
	}
	.end #formend {
		font-size: 2.8vw;
		margin-bottom: 2%;
	}
	.end #present {
		width: 96%;
		margin: 0 auto 9%;
	}
	.end #end {
		padding: 0 0 9%;
	}
	.end section#info .right {
		margin-top: 0;
	}
	.end_sub .step2_4 article>div {
		padding-top: 15%;
	}
	.end_sub #present {
		width: 118%;
		margin: 0 -9% 9%;
	}
	.end_sub #end {
		margin: 0 auto 18%;
	}
	.end_sub #toplink {
		margin: 15% auto 2%;
	}
	.end_sub #bg4 {
		display: none;
	}

}