.manzokudo {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 2.773;
	background-color: #dcd1be;
}
.manzokudo .layer1 {
	top: -0.2%;
}
.manzokudo .layer2 {
	top: 3.1%;
	left: 0;
}
.manzokudo .layer2 .img img {
	width: 107.2vw;
	max-width: 804px;
}
.manzokudo .layer3 {
	width: 23.9%;
	height: auto;
	top: 10%;
	left: 3%;
}
.manzokudo .info-data {
	width: 50%;
	bottom: min(36%, 100vw);
	left: 15%;
	text-align: right;
}
.manzokudo .info-data span {
	color: #c64626;
	font-size: min(38vw, 18rem);
}
.manzokudo .layer5 {
	width: 86.7%;
	bottom: 6.4%;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.manzokudo ul li {
	margin-top: 2%;
}
.nagare {
	transition: 0.6s;
	animation: nagareAnime 2s ease forwards;
}
@keyframes nagareAnime {
  from {
    clip-path: inset(0% 0% 0% 100%);
  }
  to {
    clip-path: inset(0%);
  }
}
.graph {
  position: absolute;
  top: 41.7%;
  left: 9.8%;
  width: 80.4%;
  aspect-ratio: 1 / 1;
}
.graph svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: rotate(-90deg);
}
.graph svg circle {
  fill: transparent;
  stroke: #c64626;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-dasharray: 1820 1820;
  stroke-dashoffset: 1820;
}
.graphDraw {
	animation: 1.2s therefore_graph ease-in-out forwards;
}
@keyframes therefore_graph {
  from {
    stroke-dashoffset: 1820;
  }
  to {
    stroke-dashoffset: 50;
  }
}