ul {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	list-style: inside decimal-leading-zero;
	display: flex;
	flex-flow: wrap;
}

li {

  padding: 1em 0 0;
	display: flex;
	margin: 1px;
}

p {
  padding: 10px;
}

h3 {
	padding: 1em 0 0;
	font-size: 16px;
	margin: 0;
	display: flow-root list-item;
}

figure img {
	max-height: initial;
	max-width: initial;
	height: auto;
	width: auto;
	object-fit: cover;
}

@media (min-width : 980px) and (max-width : 1024px){
  :root  {
    --square-image: calc((100VW - 95px) / 3);
  }

  li {
    max-width: var(--square-image);
  }
  figure img {
		min-width: var(--square-image);
  	height: var(--square-image);
  	width: var(--square-image);
  }
}
@media (min-width : 580px) and (max-width : 980px){
  :root  {
    --square-image: calc((100VW - 21px) / 2);
  }

  li {
    max-width: var(--square-image);
  }
  figure img {
		min-width: var(--square-image);
  	height: var(--square-image);
  	width: var(--square-image);
  }
}
@media  (min-width : 1024px){
  :root  {
  --square-image: calc((100VW - 95px) / 4);
  }

  li {
    max-width: var(--square-image);
  }
	figure img {
		min-width: var(--square-image);
  	height: var(--square-image);
  	width: var(--square-image);
  }
}
.subnavi h3 {
  display: none;
  visibility: hidden;
}