@charset "utf-8";
/* CSS Document */

.spTop{
	display:none;
}

.topTtl br{
	display:none;
}

#header .spSub{
	display:none;
}

#header .menu_link{
	display:none;
}

#footer #btnPC{
	display:none;
}

#header .spMenu{
	display:none;
}

#overlay{
	display:none;
}

.nameBody br{
	display:none;
}

@media screen and (min-width: 1101px) and (max-width: 9999px) {
	#spNav{
		display:none !important;/*スマホMENUを消す*/
	}
}

@media screen and (min-width: 481px) and (max-width: 1100px) {

	body{
		background:none;
	}

	#wrapper{
		width:870px;
		background:url(../images/headBack.png) no-repeat center top;
	}

	#main{
		width:545px;
	}

	#main img{
		max-width:100%;
	}

	#gNav li a{
		line-height:1.2;
		height:16px;
		padding-top:88px;
		color:#000;
		font-size:14px;
	}

	#gNav li:nth-child(1) a{
		width:172px;
		background:url(../images/gNav01s_off.gif) no-repeat center top;
	}

	#gNav li:nth-child(1) a:hover{
		background:url(../images/gNav01s_on.gif) no-repeat center top;
	}

	#gNav li:nth-child(2) a{
		width:172px;
		background:url(../images/gNav02s_off.gif) no-repeat center top;
	}

	#gNav li:nth-child(2) a:hover{
		background:url(../images/gNav02s_on.gif) no-repeat center top;
	}

	#gNav li:nth-child(3) a{
		width:172px;
		background:url(../images/gNav03s_off.gif) no-repeat center top;
	}

	#gNav li:nth-child(3) a:hover{
		background:url(../images/gNav03s_on.gif) no-repeat center top;
	}

	#gNav li:nth-child(4) a{
		width:172px;
		background:url(../images/gNav04s_off.gif) no-repeat center top;
	}

	#gNav li:nth-child(4) a:hover{
		background:url(../images/gNav04s_on.gif) no-repeat center top;
	}

	#gNav li:nth-child(5) a{
		width:172px;
		background:url(../images/gNav05s_off.gif) no-repeat center top;
	}

	#gNav li:nth-child(5) a:hover{
		background:url(../images/gNav05s_on.gif) no-repeat center top;
	}

	#gNav br{
		display:inline;
	}

	#spNav{
		display:none !important;/*スマホMENUを消す*/
	}

	#wrapper #header #gNav .gnaviacctive01{
		background:url(../images/gNav01s_on.gif) no-repeat center top;
	}
	#wrapper #header #gNav .gnaviacctive02{
		background:url(../images/gNav02s_on.gif) no-repeat center top;
	}
	#wrapper #header #gNav .gnaviacctive03{
		background:url(../images/gNav03s_on.gif) no-repeat center top;
	}
	#wrapper #header #gNav .gnaviacctive04{
		background:url(../images/gNav04s_on.gif) no-repeat center top;
	}
	#wrapper #header #gNav .gnaviacctive05{
		background:url(../images/gNav05s_on.gif) no-repeat center top;
	}

	.index .mainCnt .nameForm .nameBody{
		padding:10px 5px;
	}

	.index .mainCnt .nameForm{
		background:url(../images/nameFormS.gif) no-repeat left top;
		height:370px;
	}

	.index .mainCnt .nameForm table{
		margin-bottom:20px;
	}

	.index .mainCnt .lessonList ol li a{
		width:410px;
	}

}


@media screen and (max-width: 480px) and (orientation:portrait){

	/*全体*/

	img{
		max-width:100%;
	}

	body{
		background:url(../images/headBack_sp.png) no-repeat center top;
		background-size:contain;
	}

	#wrapper{
		width:100%;
		margin:auto auto;
		padding-bottom:30px;
	}

	#contents{
		margin-bottom:30px;
	}

	#main{
		float:none;
		width:100%;
		margin-left:auto;
		margin-right:auto;
	}

	#sidebar{
		float:none;
		width:100%;
		padding:0 3.125%;
		box-sizing:border-box;
	}

	#footer{
		width:100%;
		padding:0 3.125%;
		box-sizing:border-box;
	}

	/*header*/

	#header .logo{
		width:61%;
		left:0;
		margin-left:19.5%;
	}

	#header .spMenu{
		float:right;
		display:block;
		margin-right:3.125%;
		padding-top:24px;
		background:url(../images/spMenu.png) no-repeat center top;
		background-size:24px;
		font-size:11px;
		font-weight:bold;
	}

	#overlay{
		width: 100%;
		height:100%;
		text-align: center;
		position:fixed;
		top: 0;
		z-index: 100;
		background:#fff;
		background: rgba(0,0,0,0.7);
	}

	#close{
		background: #eeeeee;
		color: #717171;
		width: 70px;
		margin: auto;
		text-align: center;
		font-size: 15px;
		padding:5px 10px;
		border-radius: 3px;
		cursor: pointer;
	}

	#header #subMenu{
		width:8%;
		margin-left:3.125%;
	}

	#header #subMenu li:first-child {
		width:100%;
	}

	#header #subMenu li:first-child a{
		padding-top:25px;
		background:url(../images/icoHome_sp.png) no-repeat left top;
		background-size:contain;
	}

	#header #subMenu li:first-child a:hover{
		background:url(../images/icoHome_sp.png) no-repeat left top;
		background-size:contain;
	}

	#header #subMenu li:nth-child(1) {
		display:none;
	}

	#header .siteSearch{
		display:none;
	}

	#header #gNav{
		padding-top:0;
		margin-bottom: 5px;/*スマホの隙間*/
	}

	#gNav{
		display:none;/*パソコンMENUを消す*/
	}

	#spNav{
		margin-bottom:20px;
		background-color:#fff;
	}

/*	.second #header #gNav{
		display:none;
	}*/

	#header #spNav li{
		width:100%;
		float:none;
		padding-left:3.125%;
		padding-right:3.125%;
		border-bottom:solid 1px #000;
		border-left:none;
		box-sizing:border-box;
	}

/*	#header #gNav li img{
		display:none;
	}*/

	#header #spNav li:nth-child(1){
		border-top:solid 1px #000;
	}

	#header #spNav li:nth-child(1) a{
		background:url(../images/gNavi01_sp.gif) no-repeat 3.125% center;
		background-size:120px;
	}

	#header #spNav li:nth-child(2) a{
		background:url(../images/gNavi02_sp.gif) no-repeat 3.125% center;
		background-size:120px;
	}

	#header #spNav li:nth-child(3) a{
		background:url(../images/gNavi03_sp.gif) no-repeat 3.125% center;
		background-size:120px;
	}

	#header #spNav li:nth-child(4) a{
		background:url(../images/gNavi04_sp.gif) no-repeat 3.125% center;
		background-size:120px;
	}

	#header #spNav li:nth-child(5) a{
		background:url(../images/gNavi05_sp.gif) no-repeat 3.125% center;
		background-size:120px;
	}

	#header #spNav li a{
		display:block;
		padding:5.25% 0 5.25% 120px;
		text-align:left;
	}

	#spNav li a br{
		display:none;
	}

	#wrapper #header .gnaviacctive01,
	#spNav li:nth-child(1) a{
		background:url(../images/gNavi01_sp.gif) no-repeat 3.125% center;
		background-size:120px;
	}
	#wrapper #header .gnaviacctive02,
	#spNav li:nth-child(1) a{
		background:url(../images/gNav02_sp.gif) no-repeat 3.125% center;
		background-size:120px;
	}
	#wrapper #header .gnaviacctive03,
	#spNav li:nth-child(1) a{
		background:url(../images/gNav03_sp.gif) no-repeat 3.125% center;
		background-size:120px;
	}
	#wrapper #header .gnaviacctive04,
	#spNav li:nth-child(1) a{
		background:url(../images/gNav04_sp.gif) no-repeat 3.125% center;
		background-size:120px;
	}
	#wrapper #header .gnaviacctive05,
	#spNav li:nth-child(1) a{
		background:url(../images/gNav05_sp.gif) no-repeat 3.125% center;
		background-size:120px;
	}

	#header .spSub{
		overflow:hidden;
		display:block;
		width:100%;
		margin-bottom:5px;
		padding:17% 0 5px 0;
	}

/*	.second #header .spSub{
		margin-bottom:10px;
		border-bottom:solid 1px #000;
		}*/

	#header .spSub  li{
/*		width:28%;*/
		padding-left:25px;
		font-size:13px;
		line-height:1.5;
	}

	#header .spSub  li:nth-child(1){
		float:left;
		background:url(../images/spSub01.png) no-repeat left center;
		background-size:20px 19px;
		margin-left:3.125%;
	}

	#header .spSub  li:nth-child(2){
		float:right;
		background:url(../images/spSub02.png) no-repeat left center;
		background-size:20px 19px;
		margin-right:3.125%;
	}

	#header .spSub a{
		color:#000;
	}

	#header .menu_link{
		display:block;
		float:right;
		width:7.5%;
		margin-right:3.125%;
	}

	/*footer*/

	#pageTop{
		display:none !important;
	}

	#footer ul li{
		display:block;
		padding:5px;
		border-bottom:dotted 1px #000;
	}

	#footer .spTop{
		display:block;
		float:right;
		margin-bottom:10px;
		padding-top:5px;
		text-align:right;
		color:#000;
	}

	#footer .spTop a{
		padding-left:20px;
		background:url(../images/spTop.png) no-repeat left center;
		background-size:15px;
		color:#000;
	}

	#footer #btnSP{
		display:none;
	}

	#footer #btnPC{
		display:block;
		float:left;
		margin-bottom:10px;
		padding:5px;
		background:url(../images/changeBtn.png) no-repeat left center;
		background-size:contain;
		width:40%;
		color:#fff;
		font-size:15px;
		text-align:center;
	}

	#footer .copy{
		clear:both;
		padding-top:10px;
	}

	/*sidebar*/

	#sidebar h3{
		width:100%;
		background:url(../images/sideSpBody.png) repeat-y left center;
		background-size:100%;
	}

	#sidebar h3:before{
		width:100%;
		background:url(../images/sideSpTop.png) no-repeat left top;
		background-size:contain;
	}

	#sidebar h3:after{
		width:100%;
		background:url(../images/sideSpUnder.png) no-repeat left bottom;
		background-size:contain;
	}

	#sidebar .sideTop{
		background:url(../images/sideTopSp.png) no-repeat center top;
		background-size:contain;
	}

	/*名前検索*/
	.index .mainCnt .nameForm{
		width:100%;
		height:auto;
		margin-bottom:25px;
		padding:0 3.125%;
		box-sizing:border-box;
		background:none;
	}

	.index .mainCnt .nameForm > p:first-child{
		float:none;
		width:auto;
		margin-bottom:10px;
		padding:0;
		font-size:16px;
	}

	.index .mainCnt .nameForm .nameBody{
		padding:0;
	}

	.index .mainCnt .nameForm .nameBody input[type="text"]{
		width:100%;
		margin-bottom:10px;
		box-sizing:border-box;
	}

	.index .mainCnt .nameForm .nameBody input[type="submit"]{
		display:block;
		width:60%;
		height:auto;
		padding:5% 0;
		margin:0 auto 10px auto;
		background-position:center;
		background-size:contain;
		font-size:17px;
		line-height:1;
	}

	.index .mainCnt .nameForm div .blueVoice{
		margin-left:3.125%;
	}

	.index .mainCnt .nameForm table{
		width:100%;
		margin-bottom:15px;
	}

	.index .mainCnt .nameForm table td{
		box-sizing:border-box;
	}

	.index .mainCnt .sBtn{
		float:none;
		margin:0 0 20px 0;
	}

	/*main topTtl*/
	.index .mainCnt .topTtl{
		line-height:1.2;
		font-size:22px;
	}

	.index .mainCnt .topTtl br{
		display:inline;
	}

	/*lessonList*/
	.index #main .mainCnt .update{
		width:100%;
		padding:0 3.125%;
		box-sizing:border-box;
		text-align:left;
	}

	.index .mainCnt .topTtl{
		background:url(../images/ttlUnderSp.png) repeat-x left bottom;
	}

	.index .mainCnt .lessonList ol {
		width:100%;
		padding:0 3.125%;
		box-sizing:border-box;
	}

	.index .mainCnt .lessonList ol li{
		overflow:hidden;
		margin-bottom:15px;
		padding:0 0 5px 0;
	}

	.index .mainCnt .lessonList ol li > span:first-child{
		display:block;
		float:left;
		width:20%;
		max-width:3.5em;
	}

	.index .mainCnt .lessonList ol li a{
		float:left;
		display:block;
		width:80%;
		margin-left:5px;
	}

	.index .mainCnt .lessonList ol li span:nth-child(3){
		clear:both;
		display:none;/*♪消した*/
/*		float:none;
		width:100%;
		padding-top:5px;
		background-position:left 5px;*/
	}

	/*中国語って漢字？*/

	.index .mainCnt #know p{
		width:100%;
		padding:0 3.125%;
		box-sizing:border-box;
	}

	/*更新情報*/

	.index .mainCnt div#topics{
		width:93.75%;
		margin:0 3.125% 30px 3.125%;
		box-sizing:border-box;
	}

	.index .mainCnt #topics dl dt{
		float:none;
		width:100%;
	}

	.index .mainCnt #topics dl dd{
		float:none;
		width:95%;
	}

	.secondCnt{
		width:100%;
		padding:0 3.125%;
		box-sizing:border-box;
	}

	.lessonList{
		width:100%;
		padding:0 3.125%;
		box-sizing:border-box;
	}

	.bnrUnder{
		width:100%;
		padding:0 3.125%;
		box-sizing:border-box;
	}

	.nameBody br{
		display:inline;

	}
}


@media screen and (min-width: 420px) and (max-width: 480px) and (orientation:portrait){

	#overlay{
		position:absolute;
		padding-bottom:100%;
	}

	#header .spSub li:nth-child(2){
		background:none;
		text-align:right;
	}

	#header .spSub li:nth-child(2) a{
		display:inline-block;
		line-height:20px;
		background:url(../images/spSub02.png) no-repeat left center;
		padding-left:25px;
		background-size:20px 19px;
	}

	#footer #btnPC{
		width:133px;
	}

	#sidebar h3 span.sideTtl{
		padding-left:60px;
	}

	#header .spSub{
		padding-top:22%;
	}

	#sidebar .sidePlay dl{
		width:80%;
	}

	#sidebar .sideTop{
		height:auto;
		background-size:cover;
		padding:20% 0 30% 0;
	}

}


@media screen and (max-width: 359px) and (orientation:portrait){

	.index .mainCnt .lessonList ol li > span:first-child{
		width:3.5em;
	}

	.index .mainCnt .lessonList ol li a{
		width:17em;
	}
}