.ctrl-box {
  background-color: #fff5de;
  width: calc(950 / 1620 * 100cqw);
  margin: 0 auto;
  padding: calc(45 / 1620 * 100cqw) 0;
}
.ctrl-box-title {
  aspect-ratio: 855/145;
  width: calc(855 / 1620 * 100cqw);
  background-color: #fff;
  border: calc(6 / 1620 * 100cqw) solid #f0b323;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.4;
  font-size: calc(26 / 1620 * 100cqw);
  margin: 0 auto;
}
.ctrl-box-title > span > span {
  font-size: calc(45 / 1620 * 100cqw);
}
.ctrl-box-text {
  font-weight: bold;
  text-align: center;
  font-size: calc(20 / 1620 * 100cqw);
  margin-top: calc(30 / 1620 * 100cqw);
}
.ctrl-box-text::after {
  content: "";
  display: block;
  aspect-ratio: 58/28;
  width: calc(58 / 1620 * 100cqw);
  margin: calc(15 / 1620 * 100cqw) auto 0;
  background-image: url(/assets/img/control/arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
.ctrl-box-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(30 / 1620 * 100cqw);
  width: calc(830 / 1620 * 100cqw);
  margin: calc(20 / 1620 * 100cqw) auto 0;
}
.ctrl-box-list > li {
  background-color: #1acfc9;
  height: calc(155 / 1620 * 100cqw);
  display: flex;
  align-items: center;
  border-radius: 100vw;
  gap: calc(20 / 1620 * 100cqw);
  padding-left: calc(15 / 1620 * 100cqw);
}
.ctrl-box-list > li:last-of-type .ctrl-box-list-text {
  font-size: calc(18 / 1620 * 100cqw);
}
.ctrl-box-list > li:last-of-type .ctrl-box-list-text > span {
  font-size: calc(24 / 1620 * 100cqw);
}
.ctrl-box-list-icon {
  aspect-ratio: 1;
  width: calc(130 / 1620 * 100cqw);
  background-color: #34ded8;
  border-radius: 100%;
}
.ctrl-box-list-text {
  color: #fff;
  font-weight: bold;
  font-size: calc(26 / 1620 * 100cqw);
  line-height: 1.3;
}
.ctrl-box-list-text > span {
  font-size: calc(34 / 1620 * 100cqw);
}
.ctrl-box-notice {
  text-align: center;
  font-size: calc(15 / 1620 * 100cqw);
  margin-top: calc(30 / 1620 * 100cqw);
  line-height: 2;
}
.ctrl-box-foot {
  text-align: center;
  font-size: calc(15 / 1620 * 100cqw);
  margin-top: calc(20 / 1620 * 100cqw);
}
.ctrl-advice {
  margin-top: calc(40 / 1620 * 100cqw);
  text-align: center;
  line-height: 2;
}
.ctrl-btn {
  margin: calc(30 / 1620 * 100cqw) auto 0;
  aspect-ratio: 530/80;
  width: calc(530 / 1620 * 100cqw);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0b323;
  color: #fff;
  font-weight: bold;
  font-size: calc(24 / 1620 * 100cqw);
  border: calc(5 / 1620 * 100cqw) solid #ffcb50;
  border-radius: calc(5 / 1620 * 100cqw);
  background-image: url(/assets/img/common/arrow_link_wh.svg);
  background-repeat: no-repeat;
  background-position: right calc(15 / 1620 * 100cqw) center;
  background-size: calc(14 / 1620 * 100cqw);
}
@media screen and (max-width: 767.98px) {
  .ctrl-box {
    width: 100%;
    padding: calc(30 / 750 * 100vw) 0;
  }
  .ctrl-box-title {
    font-size: calc(28 / 750 * 100vw);
    aspect-ratio: 625/190;
    width: calc(625 / 750 * 100vw);
    border-width: calc(6 / 750 * 100vw);
  }
  .ctrl-box-title > span > span {
    font-size: calc(42 / 750 * 100vw);
  }
  .ctrl-box-text {
    margin-top: calc(30 / 750 * 100vw);
    font-size: calc(26 / 750 * 100vw);
  }
  .ctrl-box-text::after {
    margin-top: calc(20 / 750 * 100vw);
    width: calc(85 / 750 * 100vw);
  }
  .ctrl-box-list {
    margin-top: calc(30 / 750 * 100vw);
    width: calc(625 / 750 * 100vw);
    grid-template-columns: repeat(1, 1fr);
    gap: calc(20 / 750 * 100vw);
  }
  .ctrl-box-list > li {
    height: calc(125 / 750 * 100vw);
    padding-left: calc(13 / 750 * 100vw);
    gap: calc(20 / 750 * 100vw);
  }
  .ctrl-box-list > li:last-of-type .ctrl-box-list-text {
    font-size: calc(24 / 750 * 100vw);
  }
  .ctrl-box-list > li:last-of-type .ctrl-box-list-text > span {
    font-size: calc(28 / 750 * 100vw);
  }
  .ctrl-box-list-icon {
    width: calc(105 / 750 * 100vw);
  }
  .ctrl-box-list-text {
    font-size: calc(26 / 750 * 100vw);
  }
  .ctrl-box-list-text > span {
    font-size: calc(34 / 750 * 100vw);
  }
  .ctrl-box-notice {
    margin-top: calc(40 / 750 * 100vw);
    font-size: calc(22 / 750 * 100vw);
  }
  .ctrl-box-foot {
    margin-top: calc(20 / 750 * 100vw);
    font-size: calc(22 / 750 * 100vw);
  }
  .ctrl-advice {
    margin-top: calc(50 / 750 * 100vw);
    text-align: left;
  }
  .ctrl-btn {
    width: calc(620 / 750 * 100vw);
    aspect-ratio: 620/105;
    margin-top: calc(40 / 750 * 100vw);
    border-width: calc(8 / 750 * 100vw);
    border-radius: calc(10 / 750 * 100vw);
    font-size: calc(28 / 750 * 100vw);
    background-position: right calc(10 / 750 * 100vw) center;
    background-size: calc(16 / 750 * 100vw);
  }
}
@media (any-hover: hover) and (pointer: fine) {
  .ctrl-btn {
    transition: scale 0.3s;
  }
  .ctrl-btn:hover {
    scale: 1.05;
  }
}