@import  url(https://fonts.googleapis.com/css?family=M+PLUS+1p);

.base {
	line-height: 0px;
	width: 100%;
	max-width: 660px;
	margin: 0 auto;
}

.nomark {
	list-style-type: none;
}

.flex {
	display: flex;
}

img.sized {
	max-width: 200px;
	max-height: 200px;
	width: calc(100vw / 36 * 10);
	height: calc(100vw / 36 * 10);
}

div.name {
	width: calc(100vw / 36 * 22);
	height: calc(100vw / 36 * 10);
	max-width: 440px;
	max-height: 200px;
	position: relative;
}

div.name_inner {
	position: absolute;
	bottom: 0;
	font-size: calc(100vw / 9);
	line-height: calc(1000vw / 72);
}

div.name_inner > span {
	font-size: calc(100vw / 18);
	color: #bbb;
	font-style: italic;
}

.wf-mplus1p {
	font-family: "M PLUS 1p";
}

.margined {
	margin: calc(100vw / 36);
}

img.rank3 {
	opacity: 0.4;
}
img.rank2 {
	opacity: 0.7;
}
img.rank1 {
	opacity: 1;
}

img.fullwidth {
	max-width: 680px;
	/* max-height: 680px; */
	width: calc(100vw / 36 * 34);
	/* height: calc(100vw / 36 * 34); */
}
@media (min-width: calc(20px * 36)) {
	.margined {
		margin: 20px;
	}
	div.name_inner {
		font-size: 80px;
		line-height: 100px;
	}
	div.name_inner > span {
		font-size: 40px;
	}
}