.mokuji-content{
width:100%;
display:block;
margin:1em 0;
padding:0;
}
.mokuji-content ul{
width:100%;
margin:0 auto;
padding:0;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
list-style:none;
}

.mokuji-content ul li{
width:24vw;
height:24vw;
margin:1em .5em;
background: #fff;
white-space:normal;
border-radius:50%;
display: flex;
justify-content: center;
text-align:center;

}
@media screen and (min-width:913px) {
	.mokuji-content ul{
	width:100%;
	margin:1em 0;
	justify-content: center;
	}
	.mokuji-content ul li{
	width:20vw;
	height:20vw;
	justify-content: center;
	}
}

@media screen and (max-width:767.98px) {
	.mokuji-content ul{
	display:block;
	justify-content: center;
	list-style:none;
	}
	.mokuji-content ul li{
	width:90%;
	height:auto;
	min-height:15%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}
}

.mokuji-content ul li a{
width:100%;
height:100%;
border-radius:50%;
padding:0 1em;
color:#fff;
display:block;
font-weight:bold;
text-shadow: 1px 1px 1px #222, -1px 1px 1px #222, 1px -1px 1px #222, -1px -1px 1px #222, 1px 1px 1px #222, -1px 1px 1px #222, 1px -1px 1px #222, -1px -1px 1px #222;
transition-duration: .4s;
line-height:1.5em;
}

.mokuji-content ul li:first-child a{
background:#f19805;}
.mokuji-content ul li:nth-child(2) a{
background:#ed87b4;}
.mokuji-content ul li:nth-child(3) a{
background:#0081cd;}
.mokuji-content ul li:nth-child(4) a{
background:#bb8cbe;}
.mokuji-content ul li:nth-child(5) a{
background:#70b72c;}
.mokuji-content ul li:nth-child(6) a{
background:#009da4;}
.mokuji-content ul li:nth-child(7) a{
background:#e20112;}
.mokuji-content ul li:nth-child(8) a{
background:#009a44;}
.mokuji-content ul li:nth-child(9) a{
background:#ed6c01;}
.mokuji-content ul li:nth-child(10) a{
background:#a7841f;}
.mokuji-content ul li:nth-child(11) a{
background:#e2efc4;}
.mokuji-content ul li:nth-child(12) a{
background:#e2efc4;}

.mokuji-content > ul > li > a > p.mokuji-number{
border-bottom: 1px solid #555;
}

.mokuji-content ul li p.mokuji-number{
display:block;
margin:0 0 10px 0;
}

.mokuji-content ul li:hover{
}

.mokuji-content ul li a:hover{
text-decoration:none;
transform: scale(1.1, 1.1);
}

@media screen and (min-width:1098px) {
	.mokuji-content ul li a{
	padding-top:15%;
	font-size:145%;
	}
	.mokuji-content ul li p.mokuji-number{
	font-size:180%;
	line-height:150%;
	}
}

@media screen and (max-width:1097px) {
	.mokuji-content ul li a{
	padding-top:7%;
	font-size:125%;
	}
	.mokuji-content ul li br{
	margin-right:5px;
	display:none;}
	.mokuji-content ul li p.mokuji-number{
	font-size:150%;
	line-height:150%;
	}
}


@media screen and (max-width:767.98px) {
	.mokuji-content ul li a{
	border-radius:15px;
	padding:1em 1em;
	padding-top:.5em;
	font-size:100%;
	display:inline;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	line-height:2.5em;
	white-space:nowrap;
	}

	.mokuji-content ul li br{
	display:none;}
	.mokuji-content ul li p.mokuji-number{
	font-size:120%;
	margin:0;
	line-height:1.5em;
	margin-right:5%;
	}
}