html{
	font-size: 16px;
}

html,body,ul,li{
	margin: 0;
	padding: 0;
}



div,ul,li,img{
box-sizing: border-box;
}

main{

	max-width: 820px;
	margin: 0 auto;
	padding-top: 1em;
}

h1{
	font-size: 2.4em;
	text-align: center;
}

li{
	list-style: none;
}

li a{
	text-decoration: none;
}

.index__list{
	display: flex;
	justify-content:space-between;
	flex-wrap: wrap;
}

.index__list li{
	border: solid gray 1px;
	margin-bottom: 1em;
	margin-bottom: 4%;
    max-width: 48%;

    max-width: 23.5%;
    margin-bottom: 2%;
}

.index__name{
	font-size: 1.5rem;
	border-bottom: solid gray 1px;
	text-align: center;
	padding: 0.2em 0.5em;
	font-size: 0.9rem;
	
}

.index6 .index__name,
.index9 .index__name,
.index14 .index__name,
.index16 .index__name,
.index59 .index__name,
.index60 .index__name{
	font-size: 0.8rem;
	    line-height: 1.7;
	    line-height: 1.4;
}

.index11 .index__name,
.index20 .index__name,
.index21 .index__name,
.index24 .index__name{
	font-size: 0.75rem;
	    line-height: 1.83;
	    line-height: 1.6;

}
.index__img{
	max-width: 400px;
	width:100%;
	height:auto;
	display: block;
}

body header{
	position: relative;
}

body footer{
	position: relative;
}

li.empty{
	width:23.5%;
	border: none;
}

@media screen and (max-width: 800px) {
	html{
		font-size: 2vw;
	}

	h1{
		    font-size: 2.3em;
	}
}

@media screen and (max-width: 768px) {
	html{
		font-size: 4.7vw;
	}

	main{
		max-width:92vw;
	}

	h1{
		font-size: 1.8em;
	}

	.index__list{
		margin-bottom: 2em;
	}

	.index__name{
		font-size: 0.7rem;
	}

	.index6 .index__name,
		.index9 .index__name,
	.index14 .index__name,
	.index16 .index__name,
	.index59 .index__name,
	.index60 .index__name{
		font-size: 0.62rem;
		line-height: 1.37;
		line-height: 1.4;
	}

	.index11 .index__name,
	.index20 .index__name,
	.index21 .index__name,
	.index24 .index__name{
		font-size: 0.58rem;
			line-height: 1.6;

	}

	.index__list li{
		max-width: 48%;
		margin-bottom: 4vw;
	}

	.index__img{
		max-width: 100%;
	}
}