@charset "utf-8";
.under-text-box-text-1 {
  position: relative;
  z-index: 10;
  font-weight: 600;
  background: linear-gradient(to top, #f8ff4d 50%, transparent 50%);
  text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white,
    2px 2px 0 white, 0 -2px 0 white, -2px 0 0 white, 2px 0 0 white,
    0 2px 0 white;
  width: 120px;
  margin-bottom: 0px;
  font-size: 1rem;
}

.under-text-box-text {
  position: relative;
  z-index: 10;
  font-weight: 600;
  background: linear-gradient(to top, #f8ff4d 50%, transparent 50%);
  text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white,
    2px 2px 0 white, 0 -2px 0 white, -2px 0 0 white, 2px 0 0 white,
    0 2px 0 white;
  width: 240px;
  margin-bottom: 0px;
  font-size: 1rem;
}

.under-text-box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-left: 0px;
  position: relative !important;
  left: 10px !important;
  bottom: 0px !important;
}

.polygon-arrow-sp {
  margin: 0 auto;
  text-align: center;
  position: relative;
  /* margin-top: 70px; */
  height: 120px;
  width: 200px;
  clip-path: polygon(
    20% 0%,
    20% 60%,
    0% 60%,
    50% 100%,
    100% 60%,
    80% 60%,
    80% 0%
  );
  background-color: #ff544a;
  z-index: 1;
  margin-top: -30px !important;
}

.polygon-text-sp {
  position: relative;
  margin-top: -90px !important;
  width: 160px;
  margin: 0 auto;
  font-size: 1.4rem !important;
  z-index: 10;
  color: white;
  font-weight: 600;
  text-shadow: -2px -2px 0 #ff544a, 2px -2px 0 #ff544a, -2px 2px 0 #ff544a,
    2px 2px 0 #ff544a, 0 -2px 0 #ff544a, -2px 0 0 #ff544a, 2px 0 0 #ff544a,
    0 2px 0 #ff544a;
  letter-spacing: 1px;
  line-height: 1.8rem;
  text-align: center;
}

.under-title-invs {
  color: #002b52;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 5px;
  text-align: center;
}

.text-wrapper-new {
  text-align: center;
  margin-top: 4rem;
  margin-top: 4rem;
}

.main-title-invs {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: anchor-center;
  gap: 1rem;
  padding-left: 0px;
  padding-right: 0px;
}

.pin-sticks-left {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.3rem;
  align-items: baseline;
  rotate: -30deg;
}

.pin-sticks-right {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.3rem;
  align-items: baseline;
  rotate: 30deg;
}

.pin-sticks-left-main {
  background-color: #db0062;
  height: 40px;
  width: 3px;
}

.pin-sticks-left-small {
  background-color: #db0062;
  height: 23px;
  width: 3px;
}

.pin-sticks-right-main {
  background-color: #db0062;
  height: 40px;
  width: 3px;
}

.pin-sticks-right-small {
  background-color: #db0062;
  height: 25px;
  width: 3px;
}

.main-title-invs-title {
  color: #db0062;
  font-size: 2.3rem;
  font-weight: 700;
  margin: 0px;
  letter-spacing: 2px;
}

.actual-text-text {
  font-size: 1.35rem;
  line-height: 1.7;
  letter-spacing: 1px;
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

.actual-text-text span {
  background: linear-gradient(to top, #f8ff4d 70%, transparent 50%);
  display: inline;
}

.images-and-boxes {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1.2rem;
  padding: 0.5rem;
  justify-content: center;
  margin-bottom: 4rem;
}

.grey-box-invs {
  background-color: #eeeeee;
  padding: 1.4rem;
  text-align: center;
  position: relative;
  z-index: 10;
}

.grey-box-title {
  margin-top: 0px;
  color: white;
  font-weight: 600;
  font-size: 1.3rem;
  background-color: #909090;
  border-radius: 5px;
  padding: 0.6rem;
  text-align: center;
}

.arrow-thick-text {
  position: relative;
}

.polygon-arrow {
  position: relative;
  margin-top: 50px;
  height: 110px;
  width: 200px;
  clip-path: polygon(
    0% 20%,
    60% 20%,
    60% 0%,
    100% 50%,
    60% 100%,
    60% 80%,
    0% 80%
  );
  background-color: #ff544a;
  z-index: 1;
}

.polygon-text {
  position: absolute;
  z-index: 10;
  text-align: center;
  bottom: 170px;
  left: 16px;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 2px;
}

.light-blue-box-invs {
  background-color: #effaff;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  margin-top: 0px;
}

.light-blue-box-title {
  margin-top: 0px;
  color: white;
  font-weight: 600;
  font-size: 1.2rem;
  background-color: #002b52;
  border-radius: 5px;
  padding: 0.7rem;
  text-align: center;
  margin-bottom: 0px;
  margin-bottom: 20px;
}

.light-blue-inner-box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: start;
  gap: 0.7rem;
}

ul.points-list {
  padding-left: 15px;
  margin-bottom: 0px;
  list-style: disc;
}

li.points-li-items {
  font-weight: 600;
  padding-bottom: 0.7rem;
}

.background-pic-blue {
  position: relative;
  z-index: 1;
  margin-left: -20px;
}

.new-under-under-text {
  margin-top: 3rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  align-items: anchor-center;
}

.red-stick-left {
  background-color: #ff544a;
  height: 25px;
  width: 3px;
  rotate: -20deg;
}

.red-stick-right {
  background-color: #ff544a;
  height: 25px;
  width: 3px;
  rotate: 20deg;
}

.text-under-under {
  font-weight: 800;
  font-size: 1.3rem;
  color: black;
  margin-bottom: 0px;
}

.text-under-under span {
  font-weight: 800;
  font-size: 1.3rem;
  color: #ff544a;
}

@media (max-width: 600px) {
  .light-blue-box-invs {
    padding-bottom: 0px;
    margin-top: 8.53vw; /* 2rem → 32px → 8.53vw */
  }

  .text-wrapper-new {
    margin-top: 8.53vw !important; /* 2rem → 32px → 8.53vw */
  }
  .new-under-under-text {
    flex-wrap: nowrap;
  }
  .text-under-under {
    font-size: 3.6vw; /* 1.1rem → 17.6px → 4.69vw */
    text-align: center;
    margin-bottom: 3vw; /* 10px → 2.67vw */
  }
  .text-under-under span {
    font-size: 4vw; /* 1.1rem → 17.6px → 4.69vw */
  }

  .under-text-box {
    margin-left: 5.33vw; /* 20px → 5.33vw */
    margin-top: 4.27vw; /* 1rem → 16px → 4.27vw */
  }

  li.points-li-items {
    font-size: 5.12vw; /* 1.2rem → 19.2px → 5.12vw */
  }

  .light-blue-box-title {
    background-color: black;
    font-size: 5.12vw; /* 1.2rem → 19.2px → 5.12vw */
    padding: 0.85vw; /* 0.2rem → 3.2px → 0.85vw */
  }

  .grey-box-title {
    font-size: 5.12vw; /* 1.2rem → 19.2px → 5.12vw */
    padding: 0.85vw; /* 0.2rem → 3.2px → 0.85vw */
  }

  .images-and-boxes {
    flex-direction: column;
  }

  .light-blue-inner-box {
    flex-direction: column;
  }

  .actual-text-text {
    font-size: 4vw !important; /* 1.1rem → 17.6px → 4.69vw */
  }

  .main-title-invs-title {
    text-align: center;
    font-size: 4.8vw !important; /* 1.5rem → 24px → 6.4vw */
    line-height: 1.3;
  }

  .under-title-invs {
    font-size: 6.4vw !important; /* 1.5rem → 24px → 6.4vw */
  }

  .main-title-invs {
    padding-left: 4vw !important; /* 15px → 4vw */
    padding-right: 4vw !important; /* 15px → 4vw */
  }

  .pin-sticks-left-small {
    background-color: #db0062;
    height: 11.47vw; /* 43px → 11.47vw */
    width: 0.8vw; /* 3px → 0.8vw */
  }

  .pin-sticks-left-main {
    background-color: #db0062;
    height: 17.33vw; /* 65px → 17.33vw */
    width: 0.8vw; /* 3px → 0.8vw */
  }

  .pin-sticks-right-small {
    background-color: #db0062;
    height: 11.47vw; /* 43px → 11.47vw */
    width: 0.8vw; /* 3px → 0.8vw */
  }

  .pin-sticks-right-main {
    background-color: #db0062;
    height: 17.33vw; /* 65px → 17.33vw */
    width: 0.8vw; /* 3px → 0.8vw */
  }

  .red-stick-left {
    height: 12vw; /* 45px → 12vw */
  }

  .red-stick-right {
    height: 12vw; /* 45px → 12vw */
  }

  .new-under-under-text {
    gap: 5.55vw; /* 1.3rem → 20.8px → 5.55vw */
    margin-bottom: 1vw;
  }

  .under-text-box-text-1 {
    /* width: 103px; */
  }
}