section {
}

section h2{
	text-align: center;
	margin-bottom: 10px;
}

section #lead{
	font-size: 15px;
	line-height: 160%;
}

section h3{
	border-left: 8px solid #462d14;
	padding-left: 13px;
	line-height: 24px;
	font-weight: bold;
	font-size: 22px;
	margin-top: 30px;
	margin-bottom: 10px;
}

section h3 + p,
section p.link{
	font-size: 13px;
	margin-bottom: 12px;
	line-height: 160%;
}

section .box{
	width: 228px;
	margin-right: 18px;
	float: left;
}

section .box.no1{
	border: 2px solid #be9136;
}

section .box.no2{
	border: 2px solid #888888;
}

section .box.no3{
	border: 2px solid #7f4f21;
	margin-right: 0;
}

section .box .rank{
	text-align: center;
	line-height: 0;
	padding: 8px;
	margin-bottom:14px;
}

section .box.no1 .rank{
	background-color: #be9136;
}

section .box.no2 .rank{
	background-color: #888888;
}

section .box.no3 .rank{
	background-color: #7f4f21;
}

section .box .image{
	text-align: center;
}

section .box h4{
	font-size: 18px;
	font-weight: bold;
	padding: 0 16px;
}

section .box p{
	font-size: 13px;
	padding: 0 16px 12px;
	line-height: 160%;
}


/*--------------------------------------
Smartphone 
----------------------------------------*/

@media screen and (max-width: 767px) {

section h3{
	font-size: 1.2rem;
}

section .box{
	position: relative;
	display: table;
	width: 100%;
	float: none;
	margin: 30px 0 0;
}

section .box .rank{
	position: absolute;
	height: 20px;
	top: -21px;
	left: -2px;
	display: inline-block;
	padding: 4px 10px;
}

section .box .rank img{
	width: 45px;
}

section .box .image{
	display: table-cell;
	width: 40%;
	vertical-align: middle;
	padding: 10px;
	line-height: 0;
}

section .box .text{
	display: table-cell;
	width: 60%;
	vertical-align: middle;
	padding: 10px 0;
}

section .box p{
	padding-bottom: 0;
	line-height: 150%;
}

}