h2{
		text-align:center;
		background:#4a84b5;
		padding:24px;
		color:#fff;
		position:relative;
		margin:0px;
		border-radius:4px 4px 0px 0px;
	}
	h3{
		color:#4a84b5;
		font-size:1.2em;
		border-top:1px solid #4a84b5;
		border-bottom:1px solid #4a84b5;
		padding:16px;
	}
	
	body{
    background: linear-gradient(-45deg, #d0dbf3 49%, #ffffff 50%, #ffffff 51%, #d0dbf3 51%);
    background-size: 8px 8px;
    margin:0 auto;
    font-size:14px;
    box-sizing:border-box;
	}
	
	/*--【ログイン】--*/
	#login {
		text-align:center;
		padding:16px;
	}
	#login input[type="text"]{
		padding:16px;
		width:100%;
		border-radius:3px;
		max-width:400px;
		display:block;
		border:1px solid #333;
		font-size:1.5em;
		margin-bottom:8px;
	}
	#login input[type="submit"]{
		background-color:#F08C00;
		font-size:1.5em;
		border-radius:5px;
		max-width:400px;
		width:100%;
		display:block;
		marign:0 auto;
		color:#fff;
		padding:8px;
		border:0px;
	}
	form{
		width:100%;
		max-width:400px;
		margin:0 auto;
	}
	audio{
		width:100%;
		max-width:400px;
		margin:0 auto 16px auto;
		display:block;
	}
	p{
		width:100%;
		max-width:400px;
		margin:0 auto;
		padding-bottom:5px;
	}
	
	input[type="checkbox"]{
		display:none;
	}
	
	
	/*##学習のしかた##*/
	#howto{
		padding:16px;
		max-width:432px;
		margin:0 auto;
	}
	#howto h4{
		color:#4a84b5;
		font-size:1.2em;
		font-weight:bold;
		padding:16px 0px 16px 0px;
		margin:0px;
	}
	#howto h4:before{
		content:""attr(data-attr);
		width:24px;
		height:24px;
		line-height:24px;
		background-color:#4a84b5;
		color:#fff;
		text-align:center;
		display:inline-block;
		border-radius:100%;
		margin-right:8px;
		font-size:1.1em;
	}
	#howto > div{
		margin-top:16px;
		font-size:1.1em;
		color:#fff;
		background-color:#4a84b5;
		padding:16px;
		border-radius:8px;
		position:relative;
		margin-left:110px;
	}
	#howto > div:before{
		content:"";
		width:100px;
		height:100%;
		background-image:url(../img/eiken5-library-owl.png);
		background-size:contain;
		background-repeat:no-repeat;
		background-position:center bottom;
		display:inline-block;
		position:absolute;
		left:-110px;
		bottom:0px;
	}
	#howto > div:after{
		content:"";
		border-right:10px solid #4a84b5;
		border-top:8px solid transparent;
		border-left:10px solid transparent;
		border-bottom:8px solid transparent;
		position:absolute;
		left:0px;
		bottom:10px;
		transform:translateX(-100%);
	}
	section{
		width:100%;
		max-width:640px;
		margin:0 auto;
		background:#fff;
		border-radius:0px 0px 4px 4px;
	}
	
	section  a.btn{
		display:block;
		text-decoration:none;
		border-radius:100px;
		padding:16px 0px;
		width:100%;
		max-width:320px;
		margin:24px auto;
		position:relative;
		background:#F08C00;
		color:#fff;
		text-align:center;
		font-size:1.1em;
		letter-spacing:1px;
		box-shadow:2px 2px 5px #ddd;
	}
	section  a.btn--gray{
		background:#aaa;
	}	
	section  a.btn:after{
		content:'';
		width:6px;
		height:6px;
		border-top:2px solid #fff;
		border-right:2px solid #fff;
		position:absolute;right:16px;
		top:50%;
		transform:translateY(-50%) rotate(45deg);
	}
	section  a.btn.new:before{
		content:"NEW!";
		display:inline-block;
		padding:0px 4px;
		font-size:0.8em;
		border:1px solid;
		margin-right:8px;
		color:#ff0;
	}