/* members common */
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


#main{
	padding-top:40px;
}
#main div.inner{
	width: 100%;
	margin: 0 auto;
	padding: 25px 15px;
}
h1.page-title {
	margin-top:30px;
	color: #333;
	font-size: 28px;
	letter-spacing: 0.07em;
	text-align: center;
}

.lead {
	text-align:center;
	font-size: 14px;
	line-height: 180%;
	margin:50px auto;
}
.content-inner{
	padding: 0 10px;
	text-align: center;
}

#niimembers .about h2{
	font-size: 22px;
	margin-top: 80px;
	margin-bottom:50px;
}

#niimembers .about p{
	font-size: 14px;
	line-height: 200%;
}

#niimembers .about a{
	display: inline-block;
	padding: 20px 50px;
	border: 1px solid #ddd;
	min-width: 300px;
	margin: 20px 0 40px;
}

#niimembers .change{
	padding: 40px 0 80px;
}

#niimembers .tokuten{
	position: relative;
	border: 3px solid #9fa0a0;
	padding: 30px 30px 30px;
    max-width: 560px;
    margin: 0 auto;
}

#niimembers .tokuten h3{
	position: absolute;
	left: 50%;
	margin-left: -70px;
	width: 160px;
	background-color: #9fa0a0;
	padding: 7px 0 3px;
	text-align: center;
	top: -27px;
	font-size: 24px;
	color: #fff;
	letter-spacing: 3px;
}

#niimembers .tokuten .rows{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 25px 0;
}

#niimembers .tokuten .rows .rank{
	width: 90px;
}

#niimembers .tokuten .rows .text{
	position: relative;
	flex: 1;
	padding-left: 20px;
	text-align: left;
}

#niimembers .tokuten .rows .text .image{
	position: absolute;
	right: 0;
	top: 0px;
}

#niimembers .tokuten .rows.rank1 .text .image img{
	width: 80px;
}
#niimembers .tokuten .rows.rank2 .text .image img{
	width: 80px;
}

#niimembers .tokuten .rows .text h4{
	font-weight: bold;
	margin-bottom: 0.5rem;
}

#niimembers .tokuten .rows.rank1 .text h4{ color: #009944; }
#niimembers .tokuten .rows.rank2 .text h4{ color: #2a3f8c; }
#niimembers .tokuten .rows.rank3 .text h4{ color: #e5006e; }

#niimembers .tokuten .rows .text span.r{
	font-weight: bold;
	padding-right: 2ex;
}

#niimembers .tokuten .rows.rank1 .text span.r{ color: #009944; }
#niimembers .tokuten .rows.rank2 .text span.r{ color: #2a3f8c; }
#niimembers .tokuten .rows.rank3 .text span.r{ color: #e5006e; }

#niimembers .tokuten .rows .text span.a{
	display: block;
	font-size: 12px;
	padding-left: 4ex;
}



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

#niimembers .tokuten{
	padding: 30px 20px;
}

#niimembers .tokuten .lead{
	padding: 10px 0 20px;
	margin: 0;
}

#niimembers .tokuten .rows{
	display: block;
	padding:15px 0 25px;
	border-top:1px dotted #ccc;
}

#niimembers .tokuten .rows .rank{
	width: 100%;
}
#niimembers .tokuten .rows .text{
	padding-left:0;
}

#niimembers .tokuten .rows .text h4{
	text-align: center;
}

#niimembers .tokuten .rows .text .image{
	position : static;
	text-align: center;
	padding: 15px 0;
}

#niimembers .tokuten .rows .text p{
	text-align: center;
}

#niimembers .tokuten .rows .text p .a{
	margin-bottom: 0.5rem;
}

#niimembers .change{
	padding-bottom: 60px;
}

}