@charset "UTF-8";
:root {
  --viewport-width: min(100vw, 1600px);
  --b: calc(var(--viewport-width) / 160);
}

/*
Theme Name: Twenty Twenty-one Child
Version: 1.6
Template: twentytwentyone
*/
#requirements {
  background: linear-gradient(0deg, #E8FDF0, transparent);
}
#requirements .breadcrumb {
  margin-bottom: max(6.2rem, 50px);
}
#requirements .requirements__outer {
  background-color: #FFFFFF;
  border-radius: max(1rem, 10px);
  filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.16));
  padding: max(6rem, 40px) max(7.8rem, 25px);
  margin-bottom: max(16.8rem, 100px);
}
#requirements .requirements__outer .situation {
  line-height: 2;
  padding: max(0.7rem, 7px) max(1.4rem, 14px);
  border-radius: max(1rem, 10px);
  display: flex;
  align-items: center;
  gap: max(1.6rem, 10px);
  width: max(13.4rem, 120px);
  min-width: 100px;
  color: #fff;
  font-size: max(1.4rem, 12px);
  line-height: 1.5;
}
@media screen and (max-width: 1000px) {
  #requirements .requirements__outer .situation {
    margin-top: max(2rem, 20px);
  }
}
#requirements .requirements__outer .situation span {
  flex: 1;
  text-align: center;
}
#requirements .requirements__outer .situation::before {
  content: "⚫︎";
  width: max(0.8rem, 8px);
  aspect-ratio: 1/1;
  color: #fff;
}
#requirements .requirements__outer .situation.on {
  background-color: #008062;
}
#requirements .requirements__outer .situation.off {
  background-color: #939393;
}
#requirements .requirements__outer .situationbtm {
  color: #008062;
  font-size: max(1.6rem, 14px);
  margin-top: max(1.7rem, 15px);
  margin-bottom: max(3.9rem, 20px);
}
#requirements .requirements__outer .title {
  border-bottom: 1px solid #008062;
}
#requirements .requirements__outer h3.title {
  margin-bottom: max(1.7rem, 15px);
}
#requirements .requirements__outer h4 {
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  color: #008062;
  font-size: max(2.5rem, 20px);
  font-weight: 500;
}
#requirements .requirements__outer h4.title {
  margin-top: max(6.6rem, 50px);
  margin-bottom: max(2rem, 20px);
  padding-bottom: max(1rem, 10px);
}
#requirements .requirements__outer h5 {
  color: #008062;
  font-size: max(1.6rem, 14px);
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  font-weight: 400;
  margin-bottom: max(2rem, 15px);
}
#requirements .requirements__outer .category {
  display: flex;
  gap: max(0.5rem, 5px);
  margin-bottom: max(2rem, 15px);
}
#requirements .requirements__outer .category p {
  color: #008062;
  border: 1px solid;
  padding: 0 max(1rem, 10px);
}
#requirements .requirements__outer .grid {
  grid-template-columns: repeat(2, 1fr);
  gap: max(2rem, 20px);
}
@media screen and (max-width: 768px) {
  #requirements .requirements__outer .grid {
    grid-template-columns: 1fr;
  }
}
#requirements .requirements__outer .grid li a {
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 2.5;
}
#requirements .requirements__outer ul {
  margin-top: max(3.7rem, 20px);
}
#requirements .requirements__outer ul li.flex {
  display: flex;
  align-items: center;
  gap: max(1rem, 10px);
  border-top: 1px solid #008062;
  padding: max(2rem, 20px) 0;
}
@media screen and (max-width: 1000px) {
  #requirements .requirements__outer ul li.flex {
    flex-direction: row;
  }
}
@media screen and (max-width: 550px) {
  #requirements .requirements__outer ul li.flex {
    flex-direction: column;
    align-items: start;
  }
}
#requirements .requirements__outer ul li.flex:last-of-type {
  border-bottom: 1px solid #008062;
}
#requirements .requirements__outer ul li.flex h5 {
  width: 20%;
  text-align: center;
  min-width: 150px;
  margin-bottom: 0;
}
@media screen and (max-width: 550px) {
  #requirements .requirements__outer ul li.flex h5 {
    text-align: start;
  }
}
#requirements .requirements__outer .mt10 {
  margin-top: max(10rem, 100px);
}
#requirements .requirements__outer .processbox {
  position: relative;
  margin-top: max(5.8rem, 30px);
}
#requirements .requirements__outer .processbox .process {
  display: flex;
  gap: max(2rem, 20px);
  margin-bottom: max(4.8rem, 20px);
  position: relative;
  align-items: center;
}
@media screen and (max-width: 768px) {
  #requirements .requirements__outer .processbox .process {
    flex-direction: column;
    padding-left: max(7rem, 70px);
    gap: max(0.5rem, 5px);
    align-items: flex-start;
  }
}
@media screen and (max-width: 768px) {
  #requirements .requirements__outer .processbox .process::before {
    width: max(5rem, 50px);
    height: fit-content;
    aspect-ratio: 1/1;
    background: linear-gradient(0deg, #F4FCFF, #E8FDF0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #008062;
    font-family: YakuHanJP, "Noto Sans JP", sans-serif;
    font-size: max(1.2rem, 10px);
    font-weight: 400;
    position: absolute;
    left: 0;
  }
}
@media screen and (max-width: 768px) {
  #requirements .requirements__outer .processbox .process:nth-of-type(1)::before {
    content: "STEP1";
  }
}
@media screen and (max-width: 768px) {
  #requirements .requirements__outer .processbox .process:nth-of-type(2)::before {
    content: "STEP2";
  }
}
@media screen and (max-width: 768px) {
  #requirements .requirements__outer .processbox .process:nth-of-type(3)::before {
    content: "STEP3";
  }
}
@media screen and (max-width: 768px) {
  #requirements .requirements__outer .processbox .process:nth-of-type(4)::before {
    content: "STEP4";
  }
}
#requirements .requirements__outer .processbox .process:nth-of-type(5) {
  background: linear-gradient(180deg, transparent 50%, #fff 50%);
}
@media screen and (max-width: 768px) {
  #requirements .requirements__outer .processbox .process:nth-of-type(5) {
    background: #fff;
  }
}
@media screen and (max-width: 768px) {
  #requirements .requirements__outer .processbox .process:nth-of-type(5)::before {
    content: "STEP5";
  }
}
#requirements .requirements__outer .processbox .process .img {
  width: 24%;
  min-width: 24%;
}
@media screen and (max-width: 768px) {
  #requirements .requirements__outer .processbox .process .img {
    display: none;
  }
}
#requirements .requirements__outer .processbox .process h5 {
  margin: 0;
  font-size: max(2.5rem, 16px);
  width: max(16rem, 100px);
}
@media screen and (max-width: 550px) {
  #requirements .requirements__outer .processbox .process h5 {
    margin-top: max(1rem, 10px);
  }
}
#requirements .requirements__outer .processbox .process h5::before {
  content: "⚫︎";
  width: max(2rem, 14px);
  aspect-ratio: 1/1;
  margin-right: max(1.8rem, 10px);
}
@media screen and (max-width: 768px) {
  #requirements .requirements__outer .processbox .process h5::before {
    content: "";
    margin: 0;
  }
}
#requirements .requirements__outer .processbox .process p {
  color: #008062;
  font-size: max(1.6rem, 14px);
  flex: 1;
  line-height: 1.5;
}
#requirements .requirements__outer .processbox .process p.kome {
  color: #505050;
  font-size: max(1.4rem, 12px);
  margin-top: max(1rem, 10px);
}
#requirements .requirements__outer .processbox .process .pbox {
  flex: 1;
}
#requirements .requirements__outer .processbox .process-line {
  position: absolute;
  z-index: -1;
  border-right: 2px dotted #008062;
  top: max(4rem, 14px);
  left: calc(24% + max(2rem, 20px) + max(1.25rem, 7.5px));
  transform: translateX(-50%);
  width: max(0.2rem, 2px);
  height: 100%;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #requirements .requirements__outer .processbox .process-line {
    left: max(2.5rem, 25px);
  }
}