@charset "UTF-8";

#lead {
	text-align: center;
	margin: 0 auto 100px;
}
#lead div {
	margin: 0 auto 20px;
}


#shurui {
	margin: 0 auto 100px;
}
#shurui > ul {
	margin: 0 100px;
}
#shurui > ul > li {
	border: solid 2px #000;
	margin: 0 0 20px;
	padding: 20px;
	box-sizing: border-box;
}
#shurui li.gold { border-color: #FFD700; }
#shurui li.silver { border-color: #C0C0C0; }
#shurui li.bronze { border-color: #C47222; }

#shurui > ul > li h3 {
	font-size: 120%;
	font-weight: bold;
	margin: 0 0 10px;
}
#shurui > ul > li ul {
	list-style: disc;
	margin: 0 0 0 20px;
}


#howto {
}
#howto h3 {
	font-size: 160%;
	text-align: center;
	margin: 60px 0 15px;
}
#howto p {
	text-align: center;
	margin: 0 0 30px;
}


#form {
}
#form h2 {
	color: #2F80C2;
	font-size: 20px;
	text-align: center;
	margin: 0 0 40px;
}
#form dl dt {
	width: 200px;
	float: left;
}
#form dl dd {
	margin: 0 0 20px;
	padding: 0 0 0 220px;
}

/* FOR smartphone landscape
***************************************************************************/
@media screen and (max-width:700px) {

	#lead {
		text-align: left;
		margin: 0 auto 50px;
	}
	#lead div {
		margin: 0 auto 20px;
	}


	#shurui {
		margin: 0 auto 50px;
	}
	#shurui ul {
		margin: 0;
	}
	#shurui li {
		width: 100%;
		height: auto;
		text-align: center;
		border: solid 2px #000;
		margin: 0 0 15px;
		padding: 15px;
		box-sizing: border-box;
		float: none;
	}


	#howto {
	}
	#howto h3 {
		font-size: 130%;
		margin: 30px 0 10px;
	}
	#howto p {
		text-align: center;
		margin: 0 0 20px;
	}

	#form {
	}
	#form h2 {
		color: #2F80C2;
		font-size: 16px;
		text-align: left;
		margin: 0 0 20px;
	}
	#form dl dt {
		width: 100%;
		float: none;
	}
	#form dl dd {
		margin: 5px 0 20px;
		padding: 0;
	}

}