body {
  font-family: "Noto Sans JP", "Noto Sans", "Zen Maru Gothic";
}

.illustration-1 {
  position: absolute;
  left: 0px;
  top: 0px;

  flex: none;
  order: 1;
  flex-grow: 0;
  z-index: -1;
}

.illustration-2 {
  position: absolute;
  right: 0px;
  top: 0px;

  flex: none;
  order: 0;
  flex-grow: 0;
  z-index: -1;
}

.head-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;

  width: 1368px;
  height: 1179px;

  flex: none;
  order: 2;
  align-self: stretch;
  flex-grow: 0;
  z-index: 2;
}

.header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0px 64px;
  gap: 24px;

  width: 1368px;
  height: 188px;

  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  gap: 16px;

  width: 1240px;
  height: 39px;

  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.title-recycle {
  width: 280px;
  height: 39px;

  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 400;
  font-size: 56px;
  line-height: 81px;

  color: #619938;

  flex: none;
  order: 0;
  flex-grow: 0;
}

.title-passport {
  width: 280px;
  height: 39px;

  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 700;
  font-size: 56px;
  line-height: 81px;

  color: #619938;

  flex: none;
  order: 1;
  flex-grow: 0;
}

.sub-title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  gap: 16px;

  width: 1240px;
  height: 17px;

  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.sub-title-text {
  height: 17px;

  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 35px;

  color: #619938;

  flex: none;
  order: 0;
  flex-grow: 0;
}

.product {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 24px 64px 56px;
  gap: 36px;

  width: 1368px;
  height: 640px;

  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.product-inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  isolation: isolate;
  position: relative;

  width: 1240px;
  height: 560px;

  background: #619938;
  border-radius: 16px 32px 32px 32px;

  flex: none;
  order: 0;
  flex-grow: 1;
}

.product-inner-photo {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0px;

  width: 620px;
  height: 560px;

  background: url(../images/planter.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 35% center;
  border-radius: 8px 0px 0px 32px;

  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 1;
  z-index: 0;
}

.product-inner-data {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px;
  gap: 32px;

  width: 620px;
  height: 560px;

  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 1;
  z-index: 1;
}

.product-inner-data-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 20px;

  width: 540px;
  height: 236px;

  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.product-inner-data-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;

  width: 540px;
  height: 72px;

  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.eco-planter-sub-title {
  width: 540px;
  height: 24px;

  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;

  color: #ffffff;

  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.eco-planter-title {
  width: 540px;
  height: 48px;

  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 150%;

  color: #ffffff;

  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.eco-planter-detail {
  width: 540px;
  height: 144px;

  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 150%;

  color: #ffffff;

  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.table-rouneded-corner {
  border: 1px solid #ffffff;
  background-color: #fff;
  border-radius: 4px;
  width: 100%;

  order: 2;
}

.rounded-table {
  border-collapse: collapse;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  margin: 0;
  border: 1px solid #ffffff;
  font-family: "Zen Maru Gothic";
}

.rounded-table th,
.rounded-table td {
  padding: 8px;
  background: #619938;
  color: #ffffff;
  border-bottom: 1px solid #ffffff;
  text-align: center;
  vertical-align: middle;
  font-weight: normal;
}

.rounded-table tr:last-child td {
  border-bottom: none;
}

.arrow {
  position: absolute;
  width: 84px;
  height: 84px;
  left: calc(50% - 84px / 2);
  bottom: -42px;

  flex: none;
  order: 2;
  flex-grow: 0;
  z-index: 2;
}

.recycle-area {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 24px 64px;
  gap: 24px;

  width: 1368px;
  height: 351px;

  flex: none;
  order: 2;
  align-self: stretch;
  flex-grow: 0;
}

.recycle-area-inner {
  box-sizing: border-box;

  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 32px;
  gap: 64px;

  width: 1240px;
  height: 303px;

  background: #ffffff;
  border: 5px solid #619938;
  border-radius: 8px 32px 32px 32px;

  flex: none;
  order: 0;
  flex-grow: 1;
}

.recycle {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 16px;

  width: 416px;
  height: 232px;

  font-family: "Zen Maru Gothic";
  font-size: 18px;

  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 1;
}

.eco {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 16px;

  width: 416px;
  height: 232px;

  font-family: "Zen Maru Gothic";
  font-size: 18px;

  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 1;
}

.action-title {
  width: 100%;
}

.trace {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 64px 32px;
  gap: 30px;

  width: 1368px;
  height: 1255px;

  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  z-index: 1;

  position: relative;
}

.illustration-2b {
  position: absolute;
  width: 400px;
  height: 320px;
  left: -70.99px;
  bottom: 0px;

  flex: none;
  order: 1;
  flex-grow: 0;
  z-index: -1;
}

.illustration-2c {
  position: absolute;
  width: 320px;
  height: 300px;
  right: 0.01px;
  bottom: 0px;

  flex: none;
  order: 1;
  flex-grow: 0;
  z-index: -1;
}

.illustration-3 {
  position: absolute;
  width: 260px;
  height: 250px;
  right: 0.01px;
  top: 0px;

  flex: none;
  order: 2;
  flex-grow: 0;
  z-index: 2;
}

.diagram-back {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px;

  width: 1240px;
  height: 1207px;

  background: #619938;
  border-radius: 8px 400px 400px 400px;

  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.diagram-title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  gap: 8px;

  width: 964px;

  flex: none;
  order: 0;
  flex-grow: 0;
}

.diagram-title-text {
  height: 28px;

  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 58px;

  color: #eef0ed;

  flex: none;
  order: 0;
  flex-grow: 0;
}

.diagram {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 24px 64px 128px;

  width: 1240px;
  height: 1116px;

  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.diagram-inner {
  position: absolute;
  width: 964px;
  height: 964px;

  flex: none;
  order: 0;
  flex-grow: 0;
}

.diagram-svg {
  position: absolute;
  width: 954.46px;
  height: 954.45px;
  left: calc(50% - 954.46px / 2 + 0px);
  top: calc(50% - 954.45px / 2);
}

.diagram-dat {
  position: absolute;
  width: 964px;
  height: 964px;
  left: 0px;
  top: 0px;
}

.diagram-reuse {
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  gap: 32px;

  position: absolute;
  width: 320px;
  min-width: 320px;
  min-height: 200px;
  left: -38.52px;
  top: 463.12px;

  background: #ffffff;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

.diagram-producting {
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  gap: 32px;

  position: absolute;
  width: 320px;
  min-width: 320px;
  min-height: 200px;
  left: 302px;
  top: 779px;

  background: #ffffff;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

.diagram-resourcing {
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  gap: 32px;

  position: absolute;
  width: 320px;
  min-width: 320px;
  min-height: 200px;
  left: 681px;
  top: 485.12px;

  background: #ffffff;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

.diagram-dividing-by-color {
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  gap: 32px;

  position: absolute;
  width: 320px;
  min-width: 320px;
  min-height: 200px;
  left: 565px;
  top: 43.78px;

  background: #ffffff;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

.diagram-collection {
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  gap: 32px;

  position: absolute;
  width: 320px;
  min-width: 320px;
  min-height: 200px;
  left: 32px;
  top: 32px;

  background: #ffffff;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

.diagram-center {
  position: absolute;
  width: 320px;
  height: 320px;
  left: calc(50% - 320px / 2);
  top: calc(50% - 320px / 2);

  background: url(../images/planter.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 38% center;
  border-radius: 500px;
}

.illustration-4 {
  position: absolute;
  width: 134.44px;
  height: 111px;
  left: -109px;
  top: -22px;
}

.illustration-5 {
  position: absolute;
  width: 130.46px;
  height: 82.78px;
  left: 390.92px;
  top: 150.24px;
}

.illustration-6 {
  position: absolute;
  width: 192.34px;
  height: 97.98px;
  left: 842.89px;
  top: 283.8px;
}

.illustration-7 {
  position: absolute;
  width: 192.8px;
  height: 133.21px;
  left: 779.35px;
  top: 765.66px;
}

.illustration-8 {
  position: absolute;
  width: 129.8px;
  height: 151.01px;
  right: 177.48px;
  top: 873.18px;
}

.illustration-9 {
  position: absolute;
  width: 286.91px;
  height: 170.9px;
  left: -21.19px;
  top: 755.59px;
}

.diagram-process {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  gap: 8px;

  min-width: 96px;
  height: 32px;

  background: #619938;
  border-radius: 60px;

  flex: none;
  order: 0;
  flex-grow: 0;
}

.diagram-process-square {
  width: 18px;
  height: 18px;

  background: #ffffff;
  border-radius: 4px;

  flex: none;
  order: 0;
  flex-grow: 0;
}

.diagram-process-title {
  height: 13px;

  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 26px;

  text-align: center;

  color: #ffffff;

  flex: none;
  order: 0;
  flex-grow: 1;
}

.diagram-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 16px;

  /* width: 288px; */

  font-family: "Noto Sans JP";

  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.diagram-process-images {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 10px;

  width: inherit;
  height: 100px;

  flex: none;
  order: 1;
  flex-grow: 0;
}

.diagram-collection-image-1 {
  width: 100px;
  height: 100px;

  background: url(../images/collection_1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 8px;

  flex: none;
  order: 0;
  flex-grow: 0;
}

.diagram-collection-image-2 {
  width: 100px;
  height: 100px;

  background: url(../images/collection_2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 8px;

  flex: none;
  order: 1;
  flex-grow: 0;
}

.diagram-dividing-by-color-image-1 {
  width: 100px;
  height: 100px;

  background: url(../images/dividing_by_color_1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 8px;

  flex: none;
  order: 1;
  flex-grow: 0;
}

.diagram-dividing-by-color-image-2 {
  width: 100px;
  height: 100px;

  background: url(../images/dividing_by_color.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 8px;

  flex: none;
  order: 1;
  flex-grow: 0;
}

.diagram-resourcing-image-1 {
  width: 100px;
  height: 100px;

  background: url(../images/resourcing_1.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 8px;

  flex: none;
  order: 0;
  flex-grow: 0;
}

.diagram-resourcing-image-2 {
  width: 100px;
  height: 100px;

  background: url(../images/resourcing_2.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 8px;

  flex: none;
  order: 1;
  flex-grow: 0;
}

.diagram-producting-image-1 {
  width: 100px;
  height: 100px;

  background: url(../images/producting_1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 8px;

  flex: none;
  order: 0;
  flex-grow: 0;
}

.diagram-producting-image-2 {
  width: 100px;
  height: 100px;

  background: url(../images/producting_2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 8px;

  flex: none;
  order: 1;
  flex-grow: 0;
}

.diagram-reuse-image-1 {
  width: 100px;
  height: 100px;

  background: url(../images/reuse_1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 8px;

  flex: none;
  order: 0;
  flex-grow: 0;
}

.diagram-reuse-image-2 {
  width: 100px;
  height: 100px;

  background: url(../images/reuse_2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 8px;

  flex: none;
  order: 1;
  flex-grow: 0;
}

.graph-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 64px 32px;
}

.graph-iframe {
  margin-top: 16px;

  border: 5px solid #619938;
  border-radius: 8px 32px 32px 32px;
}

.footer-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 16px 64px 32px;
  gap: 47px;

  width: 1368px;

  flex: none;
  order: 4;
  align-self: stretch;
  flex-grow: 0;
  z-index: 4;
}

.footer-content-inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 27px;

  width: 929px;
  height: 475px;

  font-family: "Zen Maru Gothic";

  flex: none;
  order: 1;
  flex-grow: 1;
}

.text-align-center {
  text-align: center;
}

.news {
  display: flex;
  flex-direction: column;
  padding: 32px;
  gap: 16px;

  width: 608px;
  height: 100%;

  background: #ffffff;
  border: 5px solid #619938;
  border-radius: 8px 32px 32px 32px;

  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 1;
}

.news-items {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  padding: 0px;
  gap: 8px;

  width: 544px;
  /* height: 397px; */

  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 1;
}

.news-item {
  box-sizing: border-box;

  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 8px 0px;
  gap: 16px;

  width: 544px;
  /* height: 198.5px; */
}

.news-item-texts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 0px;
  gap: 16px;

  width: 100%;
  /* height: 80px; */

  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.news-text {
  /* height: 48px; */

  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;

  color: #000000;

  flex: none;
  order: 0;
  flex-grow: 1;
}

.news-sub-text {
  color: #798273;

  flex: none;
  order: 1;
  flex-grow: 0;
}

.news-image {
  box-sizing: border-box;

  width: 130.74px;
  height: 182.5px;

  background: url(../images/add.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border: 1px solid #000000;

  flex: none;
  order: 1;
  flex-grow: 0;
}

.scrap-way {
  display: flex;
  flex-direction: column;
  padding: 32px;
  gap: 16px;

  width: 608px;
  height: 100%;

  background: #ffffff;
  border: 5px solid #619938;
  border-radius: 8px 32px 32px 32px;

  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 1;
}

.scrap-way-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: left;
  padding: 0px;
  gap: 8px;

  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 1;
}

.scrap-way-text {
  width: 100%;

  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  text-align: left;

  color: #000000;

  flex: none;
  order: 0;
  flex-grow: 0;
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding: 64px 64px 150px;
  gap: 47px;

  width: 1368px;
  height: 276px;

  flex: none;
  order: 3;
  align-self: stretch;
  flex-grow: 0;
  z-index: 3;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 16px;

  height: 62px;

  flex: none;
  order: 0;
  flex-grow: 0;
}

.copy-right {
  height: 22px;

  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 22px;

  color: #000000;

  flex: none;
  order: 1;
  flex-grow: 0;
}

.border-line {
  border-bottom: 1px solid #8f8f83;
}

.pie {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: auto;
  margin-left: auto;
  width: 180px;
  height: 180px;
  background-image: radial-gradient(#ffffff 55%, transparent 31%),
    conic-gradient(#619938 0% 100%, #b4c6a6 60% 100%);
  border-radius: 50%;

  font-family: "Noto Sans";
}

.pie-70 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: auto;
  margin-left: auto;
  width: 180px;
  height: 180px;
  background-image: radial-gradient(#ffffff 53%, transparent 31%),
    conic-gradient(#619938 0% 70%, #b4c6a6 60% 100%);
  border-radius: 50%;

  font-family: "Noto Sans";
}

.minw-1368px {
  min-width: 1368px;
}

.maxh-380px {
  max-height: 380px;
}

.position-relative {
  position: relative;
}

.btn {
  width: 216px;
  font-size: 24px;
  line-height: 34.75px;
  border-radius: 32px;
  border: 3px solid;
  border-color: #619938;
  padding: 4px 32px 4px 32px;
  background-color: white;
  color: #619938;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));

  &:hover {
    background-color: #c9e6b0 !important;
    border-color: #619938 !important;
    color: #619938 !important;
  }

  &:focus {
    background-color: white !important;
    border-color: #ffe500 !important;
    color: #619938 !important;
  }

  &:active {
    background-color: #619938 !important;
    border-color: #619938 !important;
    color: white !important;
  }
}

.button {
  display: block;
  width: 224px;
  height: 57px;
  background: transparent url("../button.svg") no-repeat center center / contain;
}

.button:hover {
  background: transparent url("../button_hover.svg") no-repeat center center /
    contain;
}

.button:active {
  background: transparent url("../button_pressed.svg") no-repeat center center /
    contain;
}

.button:focus {
  background: transparent url("../button_focus.svg") no-repeat center center /
    contain;
}

.width-100per {
  width: 100%;
}
.width-auto {
  width: auto;
}

/* .cv-button {
  width: 224px;
  height: 57px;
  fill: #ffffff;
  stroke: #619938;
}

.cv-button:hover {
  fill: #c9e6b0;
  stroke: #619938;
}

.cv-button:pressed {
  fill: #619938;
  stroke: #ffffff;
}

.cv-button:focus {
  fill: #ffffff;
  stroke: #ffe500;
} */