:root {
  --vw: 1vw;
}


/* ---------------------------------------------------------
#sec-intro
----------------------------------------------------------*/
#sec-intro .lead {
  font-size: min(1.25 * var(--vw), 24px);
  line-height: 1.8333333333;
}
@media screen and (max-width: 768px) {
  #sec-intro .lead {
    font-size: calc(4.26 * var(--vw));
  }
}

/* ---------------------------------------------------------
#sec-feature
----------------------------------------------------------*/
#sec-feature .ttl-green-dotborder {
  margin-top: min(2.08 * var(--vw), 40px);
}
@media screen and (max-width: 768px) {
  #sec-feature .ttl-green-dotborder {
    margin-top: calc(8 * var(--vw));
  }
}
#sec-feature .wrapper {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-top: min(1.56 * var(--vw), 30px);
}
@media screen and (max-width: 768px) {
  #sec-feature .wrapper {
    display: block;
    margin-top: calc(5.33 * var(--vw));
  }
}
#sec-feature .wrapper .ill {
  position: relative;
  width: min(11.45 * var(--vw), 220px);
  margin: 0 auto;
  aspect-ratio: 1/1;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #sec-feature .wrapper .ill {
    width: 50%;
    margin: 0 auto;
  }
}
#sec-feature .wrapper .ill img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2);
}
#sec-feature .wrapper .txt {
  width: min(43.9 * var(--vw), 843px);
}
@media screen and (max-width: 768px) {
  #sec-feature .wrapper .txt {
    width: 100%;
  }
}

/* ---------------------------------------------------------
#sec-flow
----------------------------------------------------------*/
#sec-flow .list-flow-side {
  display: flex;
  justify-content: space-between;
  margin-top: min(1.56 * var(--vw), 30px);
}
@media screen and (max-width: 768px) {
  #sec-flow .list-flow-side {
    flex-wrap: wrap;
    gap: calc(10.66 * var(--vw)) 0;
    margin-top: calc(5.33 * var(--vw));
  }
}
#sec-flow .list-flow-side li {
  position: relative;
  width: min(13.22 * var(--vw), 254px);
  background-color: #ecf4f2;
}
@media screen and (max-width: 768px) {
  #sec-flow .list-flow-side li {
    width: calc(40 * var(--vw));
  }
}
#sec-flow .list-flow-side li:last-child::after {
  content: none;
}
@media screen and (max-width: 768px) {
  #sec-flow .list-flow-side li:nth-child(2)::after {
    top: auto;
    right: auto;
    bottom: calc(-7.47 * var(--vw));
    left: calc(-5.87 * var(--vw));
    transform: rotate(135deg);
  }
}
#sec-flow .list-flow-side li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: min(-2.71 * var(--vw), -52px);
  width: 0;
  height: 0;
  border-style: solid;
  border-top: min(1.61 * var(--vw), 31px) solid transparent;
  border-bottom: min(1.61 * var(--vw), 31px) solid transparent;
  border-left: min(1.45 * var(--vw), 28px) solid #00B13F;
  border-right: 0;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  #sec-flow .list-flow-side li::after {
    right: calc(-6.67 * var(--vw));
    border: none;
    width: calc(4.8 * var(--vw));
    height: auto;
    aspect-ratio: 18/16;
    background: url("/assets/img/common/icon_arrow_green.png") no-repeat;
    background-size: 100% auto;
  }
}
#sec-flow .list-flow-side li .ttl {
  font-size: min(1.04 * var(--vw), 20px);
  font-weight: 700;
  color: #00B13F;
  padding: min(0.83 * var(--vw), 16px) min(1.04 * var(--vw), 20px) 0;
}
@media screen and (max-width: 768px) {
  #sec-flow .list-flow-side li .ttl {
    font-size: calc(4.8 * var(--vw));
    font-weight: 700;
    padding: calc(4.26 * var(--vw)) calc(4.26 * var(--vw)) 0;
  }
}
#sec-flow .list-flow-side li .txt {
  font-size: min(0.83 * var(--vw), 16px);
  line-height: 1.4782608696;
  padding: min(0.52 * var(--vw), 10px) min(1.04 * var(--vw), 20px) min(1.04 * var(--vw), 20px);
}
@media screen and (max-width: 768px) {
  #sec-flow .list-flow-side li .txt {
    font-size: calc(4.26 * var(--vw));
    padding: calc(2.66 * var(--vw)) calc(4.26 * var(--vw)) calc(4.26 * var(--vw));
  }
}

/* ---------------------------------------------------------
#sec-effect
----------------------------------------------------------*/
#sec-effect .bg-green {
  margin-top: min(1.56 * var(--vw), 30px);
}
#sec-effect .wrapper {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}
#sec-effect .wrapper .ill {
  position: relative;
  width: min(11.45 * var(--vw), 220px);
  margin: 0 auto;
  aspect-ratio: 1/1;
  overflow: hidden;
  margin: min(-1.05 * var(--vw), -20px) auto;
}
@media screen and (max-width: 768px) {
  #sec-effect .wrapper .ill {
    width: 50%;
    margin: 0 auto;
  }
}
#sec-effect .wrapper .ill img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2);
}
#sec-effect .wrapper .list-disc {
  display: flex;
  flex-wrap: wrap;
  width: min(45.52 * var(--vw), 874px);
  gap: min(0.52 * var(--vw), 10px) min(1.56 * var(--vw), 30px);
  margin-top: 0;
}