.content-body {
  position: relative;
  padding: 184px 280px 80px;
}

.underline-main,
.underline-section {
  display: inline;
}

.section-title-wrapper {
  padding: 80px 0 48px 0;
  flex-grow: 1;
}

.content-body p,
.content-body a:not(.link) {
  font-size: 20px;
  margin: 0;
  text-decoration: none;
}

.content-body a {
  color: #2572a2;
}

.content-body a:hover:not(.step-container a) {
  opacity: 50%;
}

.step-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin-bottom: 40px;
  align-items: start;
}

.step {
  height: 100%;
  background-color: #f1f8fe;
  position: relative;
  padding: 24px;
  color: #2572a2;
}

.step.bg-color-2,
.step.bg-color-3,
.step.bg-color-4 {
  padding-left: 68px;
  padding-right: 0;
}

.step.bg-color-4 {
  padding-right: 24px;
}

p.button-text {
  margin-top: 28px;
}

.button {
  border-radius: 20px;
  padding: 8px 16px 4px;
  background-color: #fff;
  margin-right: 8px;
}

p.step-text {
  color: #2572a2;
  font-size: 24px;
  padding-bottom: 16px;
}

p.step-text-number {
  color: #2572a2;
  font-size: 40px;
}

p.step-content {
  padding-top: 19px;
  margin-bottom: 28px;
  font-size: 32px;
}

.triangle {
  position: absolute;
  top: 0;
  right: -39px;
  height: 100%;
  width: 40px;
  background-color: #f1f8fe;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  z-index: 1;
}

.bg-color-2 {
  background-color: #ccebff;
}

.bg-color-3 {
  background-color: #b9e4ff;
}

.bg-color-4 {
  background-color: #83cbf8;
}

table {
  padding-top: 40px;
  border-spacing: 0;
  width: 100%;
}

th,
td {
  font-size: 20px;
  font-weight: normal;
  border: 1px solid #5bacde;
}

th,
td.first-col {
  padding: 16px 24px 12px;
}

th {
  color: #fff;
  background-color: #2572a2;
  font-size: 24px;
}

.th-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.small-text {
  font-size: 12px;
}

.white-bg {
  background-color: #fff;
}

.blue-bg {
  background-color: #f1f8fe;
}

.progress-container {
  width: 100%;
  height: 32px;
  position: relative;
}

.progress {
  height: 100%;
  background-color: #2572a2;
}

.half {
  position: relative;
  width: 50%;
  right: -2px;
  margin-left: auto;
}

.full {
  position: relative;
  width: calc(100% + 6px);
  left: -3px;
}

.schedule-table {
  padding-bottom: 184px;
}

.flowchart,
.step-1,
.step-2,
.step-3,
.step-4 {
  position: relative;
  padding-bottom: 284px;
}

.step-other {
  position: relative;
}

.flowchart::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #a8d5fc;
  z-index: -1;
  margin: -10px -280px -40px;
}

.flowchart-img {
  width: 100%;
  height: auto;
}

.light-blue-wave-bg,
.blue-wave-bg,
.blue-wave-step-2-bg,
.blue-wave-step-3-bg,
.blue-wave-bg-2,
.white-wave-bg,
.form-bg {
  position: absolute;
  left: -280px;
  width: calc(100% + 560px);
  height: auto;
  z-index: -1;
}

.blue-wave-bg {
  top: -5%;
}

.light-blue-wave-bg {
  top: -11%;
}

.blue-wave-step-2-bg {
  top: -19%;
}

.blue-wave-step-3-bg {
  top: -17%;
}

.blue-wave-bg-2 {
  top: -15%;
}

.white-wave-bg {
  top: -13%;
}

.step-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f1f8fe;
  z-index: -1;
  margin: -20px -280px -20px;
}

.step-2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccebff;
  z-index: -1;
  margin: -20px -280px -20px;
}

.step-3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #b9e4ff;
  z-index: -1;
  margin: -40px -280px -40px;
}

.step-4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #a8d5fc;
  z-index: -1;
  margin: -40px -280px -40px;
}

.step-other::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: -1;
  margin: 40px -280px -5px;
}

.step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.step-number {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.bullet-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.bullet-list li {
  position: relative;
  padding-left: 32px;
  font-size: 20px;
}

.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5%;
  width: 16px;
  height: 16px;
  background-color: #2572a2;
  border-radius: 50%;
}

.framed-list {
  padding-top: 40px;
}

.framed-list li {
  background-color: #fff;
  border-radius: 20px;
  padding: 6px 56px;
  margin-bottom: 16px;
}

.framed-list li:last-child {
  margin-bottom: 0;
}

.framed-list li::before {
  top: 30%;
  left: 24px;
}

.top-pad {
  padding-top: 40px;
}

.top-pad-small {
  padding-top: 16px;
}

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

.center {
  color: #2572a2;
  text-align: center;
  padding-top: 260px;
}

.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 80px;
  position: relative;
}

.form-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f1f8fe;
  z-index: -1;
  margin: -150px -280px -648px;
}

.form-bg {
  top: -103%;
}

.active,
.challenge {
  width: 684px;
  height: 288px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  text-align: center;
  font-family: "Noto Serif JP", serif;
}

.active {
  background-color: #fff;
  color: #2572a2;
}

.challenge {
  background-color: #387195;
  color: #fff;
}

.challenge a {
  color: #fff;
}

.icon {
  font-size: 24px;
}

.framed-text-container {
  padding-bottom: 8px;
}

.framed-text {
  background-color: #fff;
  border-radius: 20px;
  padding: 6px 56px;
  margin-bottom: 16px;
  display: inline-block;
  margin-right: 40px;
  font-size: 20px;
}

.bot-pad {
  padding-bottom: 160px;
}

.step-container-2 {
  display: none;
}

.link {
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 1px;
  color: inherit;
}

@media (max-width: 1536px) {
  .content-body {
    padding: 160px 200px 64px;
  }

  .section-title-wrapper {
    padding: 64px 0 32px 0;
  }

  .content-body p,
  .content-body a:not(.link) {
    font-size: 16px;
  }

  .step-container {
    margin-bottom: 32px;
  }

  .step {
    padding: 20px;
  }

  .step.bg-color-2,
  .step.bg-color-3,
  .step.bg-color-4 {
    padding-left: 54px;
  }

  .step.bg-color-4 {
    padding-right: 20px;
  }

  p.button-text {
    margin-top: 24px;
  }

  .button {
    padding: 6px 14px 4px;
  }

  p.step-text {
    font-size: 20px;
    padding-bottom: 12px;
  }

  p.step-text-number {
    font-size: 32px;
  }

  p.step-content {
    padding-top: 16px;
    margin-bottom: 24px;
    font-size: 24px;
  }

  table {
    padding-top: 32px;
  }

  th,
  td {
    font-size: 16px;
  }

  th,
  td.first-col {
    padding: 8px 16px;
  }

  th {
    font-size: 20px;
  }

  .small-text {
    font-size: 10px;
  }

  .progress-container {
    height: 28px;
  }

  .schedule-table {
    padding-bottom: 166px;
  }

  .flowchart,
  .step-1,
  .step-2,
  .step-3,
  .step-4 {
    padding-bottom: 252px;
  }

  .light-blue-wave-bg,
  .blue-wave-bg,
  .blue-wave-step-2-bg,
  .blue-wave-step-3-bg,
  .blue-wave-bg-2,
  .white-wave-bg,
  .form-bg {
    left: -200px;
    width: calc(100% + 400px);
  }

  .blue-wave-bg {
    top: -5%;
  }

  .light-blue-wave-bg {
    top: -11%;
  }

  .blue-wave-step-2-bg {
    top: -18%;
  }

  .blue-wave-step-3-bg {
    top: -16%;
  }

  .blue-wave-bg-2 {
    top: -16%;
  }

  .white-wave-bg {
    top: -12%;
  }

  .form-bg {
    top: -84%;
  }

  .flowchart::before {
    margin: 0px -200px -40px;
  }

  .step-1::before,
  .step-2::before,
  .step-3::before,
  .step-4::before {
    margin: -45px -200px -20px;
  }

  .step-other::before {
    margin: 40px -200px -5px;
  }

  .form-container::before {
    margin: -140px -200px -648px;
  }

  .step-header {
    gap: 32px;
  }

  .bullet-list li {
    padding-left: 28px;
    font-size: 16px;
  }

  .bullet-list li::before {
    top: 23%;
    width: 14px;
    height: 14px;
  }

  .list {
    padding: 32px 0;
  }

  .list li {
    padding-left: 28px;
  }

  .framed-list {
    padding-top: 32px;
  }

  .framed-list li {
    padding: 6px 52px;
    margin-bottom: 14px;
  }

  .framed-list li::before {
    top: 30%;
  }

  .top-pad {
    padding-top: 32px;
  }

  .top-pad-small {
    padding-top: 12px;
  }

  .center {
    padding-top: 220px;
  }

  .form-container {
    margin-top: 72px;
  }

  .active,
  .challenge {
    width: 16em;
    height: 9em;
    font-size: 32px;
  }

  .framed-text-container {
    padding-bottom: 6px;
  }

  .framed-text {
    padding: 6px 40px;
    margin-bottom: 14px;
    margin-right: 32px;
    font-size: 16px;
  }

  .bot-pad {
    padding-bottom: 120px;
  }
}

@media (max-width: 1124px) {
  .step-1::before,
  .step-2::before,
  .step-3::before,
  .step-4::before {
    margin: -60px -200px -20px;
  }
}

@media (max-width: 1024px) {
  .content-body {
    padding: 100px 160px 56px;
  }

  .section-title-wrapper {
    padding: 48px 0 24px 0;
  }

  .content-body p,
  .content-body a:not(.link) {
    font-size: 14px;
  }

  .step-container {
    margin-bottom: 28px;
  }

  .step {
    padding: 16px;
  }

  .step.bg-color-2,
  .step.bg-color-3,
  .step.bg-color-4 {
    padding-left: 32px;
  }

  .step.bg-color-4 {
    padding-right: 16px;
  }

  p.button-text {
    margin-top: 20px;
  }

  .button {
    padding: 4px 12px 2px;
  }

  p.step-text {
    font-size: 16px;
    padding-bottom: 8px;
  }

  p.step-text-number {
    font-size: 28px;
  }

  p.step-content {
    padding-top: 12px;
    margin-bottom: 20px;
    font-size: 20px;
  }

  table {
    padding-top: 28px;
  }

  th,
  td {
    font-size: 14px;
  }

  th,
  td.first-col {
    padding: 6px 12px;
  }

  th {
    font-size: 16px;
  }

  .small-text {
    font-size: 8px;
  }

  .progress-container {
    height: 24px;
  }

  .schedule-table {
    padding-bottom: 126px;
  }

  .flowchart,
  .step-1,
  .step-2,
  .step-3,
  .step-4 {
    padding-bottom: 212px;
  }

  .light-blue-wave-bg,
  .blue-wave-bg,
  .blue-wave-step-2-bg,
  .blue-wave-step-3-bg,
  .blue-wave-bg-2,
  .white-wave-bg,
  .form-bg {
    left: -160px;
    width: calc(100% + 320px);
  }

  .blue-wave-bg {
    top: -4%;
  }

  .light-blue-wave-bg {
    top: -7%;
  }

  .blue-wave-step-2-bg {
    top: -13%;
  }

  .blue-wave-step-3-bg {
    top: -13%;
  }

  .blue-wave-bg-2 {
    top: -12%;
  }

  .white-wave-bg {
    top: -8%;
  }

  .form-bg {
    top: -98%;
  }

  .flowchart::before {
    margin: 20px -160px -40px;
  }

  .step-1::before,
  .step-2::before,
  .step-3::before,
  .step-4::before {
    margin: -20px -160px -60px;
  }

  .step-other::before {
    margin: 30px -160px -5px;
  }

  .form-container::before {
    margin: -120px -160px -648px;
  }

  .step-header {
    gap: 28px;
  }

  .bullet-list li {
    padding-left: 24px;
    font-size: 14px;
  }

  .list {
    padding: 28px 0;
  }

  .list li {
    padding-left: 24px;
  }

  .framed-list {
    padding-top: 28px;
  }

  .framed-list li {
    padding: 6px 48px;
    margin-bottom: 14px;
  }

  .top-pad {
    padding-top: 28px;
  }

  .top-pad-small {
    padding-top: 10px;
  }

  .center {
    padding-top: 180px;
  }

  .form-container {
    margin-top: 56px;
  }

  .active,
  .challenge,
  .icon {
    font-size: 20px;
  }

  .framed-text-container {
    padding-bottom: 0px;
  }

  .framed-text {
    padding: 4px 36px;
    margin-bottom: 12px;
    margin-right: 28px;
    font-size: 14px;
  }

  .bot-pad {
    padding-bottom: 100px;
  }

  .triangle {
    right: -20px;
    width: 20px;
  }
}

@media (max-width: 834px) {
  .content-body {
    padding: 60px 80px 40px;
  }

  .section-title-wrapper {
    padding: 40px 0 20px 0;
  }

  .content-body p,
  .content-body a:not(.link) {
    font-size: 12px;
  }

  .step-container {
    margin-bottom: 20px;
  }

  .step {
    padding: 12px;
  }

  .step.bg-color-2,
  .step.bg-color-3,
  .step.bg-color-4 {
    padding-left: 28px;
  }

  .step.bg-color-4 {
    padding-right: 12px;
  }

  p.button-text {
    margin-top: 16px;
  }

  .button {
    padding: 4px 10px;
  }

  p.step-text,
  .step-text {
    font-size: 14px;
    padding-bottom: 4px;
  }

  p.step-text-number,
  .step-text-number {
    font-size: 24px;
  }

  p.step-content {
    padding-top: 8px;
    margin-bottom: 16px;
    font-size: 16px;
  }

  table {
    padding-top: 24px;
  }

  th,
  td {
    font-size: 10px;
  }

  th,
  td.first-col {
    padding: 4px;
  }

  th {
    font-size: 12px;
  }

  .full {
    width: calc(100% + 4px);
  }

  .small-text {
    font-size: 6px;
  }

  .progress-container {
    height: 20px;
  }

  .schedule-table {
    padding-bottom: 104px;
  }

  .flowchart,
  .step-1,
  .step-2,
  .step-3,
  .step-4 {
    padding-bottom: 176px;
  }

  .light-blue-wave-bg,
  .blue-wave-bg,
  .blue-wave-step-2-bg,
  .blue-wave-step-3-bg,
  .blue-wave-bg-2,
  .white-wave-bg,
  .form-bg {
    left: -80px;
    width: calc(100% + 160px);
  }

  .blue-wave-bg {
    top: -4%;
  }

  .light-blue-wave-bg {
    top: -7%;
  }

  .blue-wave-step-2-bg {
    top: -13%;
  }

  .blue-wave-step-3-bg {
    top: -12%;
  }

  .blue-wave-bg-2 {
    top: -11%;
  }

  .white-wave-bg {
    top: -9%;
  }

  .form-bg {
    top: -102%;
  }

  .flowchart::before {
    margin: 0 -80px -40px;
  }

  .step-1::before,
  .step-2::before,
  .step-3::before,
  .step-4::before {
    margin: -20px -80px -60px;
  }

  .step-other::before {
    margin: 10px -80px -5px;
  }

  .form-container::before {
    margin: -90px -80px -648px;
  }

  .step-header {
    gap: 24px;
  }

  .bullet-list li {
    padding-left: 22px;
    font-size: 12px;
  }

  .bullet-list li::before {
    width: 12px;
    height: 12px;
  }

  .list {
    padding: 24px 0;
  }

  .list li {
    padding-left: 20px;
  }

  .framed-list {
    padding-top: 24px;
  }

  .framed-list li {
    padding: 6px 44px;
    margin-bottom: 12px;
  }

  .top-pad {
    padding-top: 24px;
  }

  .top-pad-small {
    padding-top: 8px;
  }

  .center {
    padding-top: 140px;
  }

  .form-container {
    margin-top: 48px;
  }

  .active,
  .challenge,
  .icon {
    font-size: 16px;
  }

  .framed-text {
    padding: 4px 28px;
    margin-bottom: 10px;
    margin-right: 24px;
    font-size: 12px;
  }

  .bot-pad {
    padding-bottom: 80px;
  }

  .step-container {
    display: none;
  }

  .step-container-2 {
    display: block;
    text-align: center;
  }

  .step {
    height: auto;
    padding: 24px;
  }

  .triangle {
    bottom: -39px;
    top: unset;
    right: 0;
    height: 40px;
    width: 100%;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
  }

  .step.bg-color-2,
  .step.bg-color-3,
  .step.bg-color-4 {
    padding: 40px 28px 24px;
  }
}

@media (max-width: 595px) {
  .flowchart::before {
    margin: 30px -80px -40px;
  }

  .step-1::before,
  .step-2::before,
  .step-3::before,
  .step-4::before {
    margin: -10px -80px -60px;
  }

  .step-other::before {
    margin: 20px -80px -5px;
  }

  .form-container::before {
    margin: -110px -80px -648px;
  }

  .step.bg-color-2,
  .step.bg-color-3,
  .step.bg-color-4 {
    padding-left: 24px;
  }

  p.button-text {
    font-size: 10px;
  }

  .button {
    padding: 4px 4px;
  }

  .blue-wave-bg {
    top: -2%;
  }

  .light-blue-wave-bg {
    top: -4%;
  }

  .blue-wave-step-2-bg {
    top: -7%;
  }

  .blue-wave-step-3-bg {
    top: -7%;
  }

  .blue-wave-bg-2 {
    top: -6%;
  }

  .white-wave-bg {
    top: -3%;
  }
}

@media (max-width: 462px) {
  .step-1::before,
  .step-3::before {
    margin: -20px -80px -60px;
  }
}

@media (max-width: 430px) {
  .content-body {
    padding: 24px 40px;
  }

  .section-title-wrapper {
    padding: 28px 0 20px 0;
  }

  .step-container {
    margin-bottom: 16px;
  }

  .step {
    padding: 8px;
  }

  .step.bg-color-2,
  .step.bg-color-3,
  .step.bg-color-4 {
    padding-left: 24px;
  }

  .step.bg-color-4 {
    padding-right: 8px;
  }

  p.button-text {
    margin-top: 16px;
  }

  .button {
    padding: 4px 10px;
  }

  p.step-text,
  .step-text {
    font-size: 12px;
  }

  p.step-text-number,
  .step-text-number {
    font-size: 18px;
  }

  p.step-content {
    font-size: 12px;
  }

  table {
    padding-top: 20px;
  }

  th,
  td {
    font-size: 8px;
  }

  th,
  td.first-col {
    padding: 2px;
  }

  th {
    font-size: 10px;
  }

  .small-text {
    font-size: 4px;
  }

  .progress-container {
    height: 16px;
  }

  .schedule-table {
    padding-bottom: 80px;
  }

  .flowchart,
  .step-1,
  .step-2,
  .step-3,
  .step-4 {
    padding-bottom: 120px;
  }

  .light-blue-wave-bg,
  .blue-wave-bg,
  .blue-wave-step-2-bg,
  .blue-wave-step-3-bg,
  .blue-wave-bg-2,
  .white-wave-bg,
  .form-bg {
    left: -40px;
    width: calc(100% + 80px);
  }

  .blue-wave-bg {
    top: -2%;
  }

  .light-blue-wave-bg {
    top: -2%;
  }

  .blue-wave-step-2-bg {
    top: -5%;
  }

  .blue-wave-step-3-bg {
    top: -4%;
  }

  .blue-wave-bg-2 {
    top: -4%;
  }

  .white-wave-bg {
    top: -2%;
  }

  .form-bg {
    top: -106%;
  }

  .flowchart::before {
    margin: 10px -40px -40px;
  }

  .step-1::before,
  .step-2::before,
  .step-3::before,
  .step-4::before {
    margin: 8px -40px -60px;
  }

  .step-other::before {
    margin: 15px -40px -5px;
  }

  .form-container::before {
    margin: -90px -40px -448px;
  }

  .step-header {
    gap: 20px;
  }

  .bullet-list li {
    padding-left: 22px;
    font-size: 12px;
  }

  .framed-list li {
    padding: 6px 44px;
    margin-bottom: 12px;
  }

  .top-pad {
    padding-top: 20px;
  }

  .top-pad-small {
    padding-top: 4px;
  }

  .center {
    padding-top: 120px;
  }

  .form-container {
    margin-top: 40px;
  }

  .framed-text {
    padding: 4px 20px;
    margin-right: 20px;
  }

  .bot-pad {
    padding-bottom: 60px;
  }

  .active,
  .challenge,
  .icon {
    font-size: 12px;
  }

  .link {
    text-underline-offset: 4px;
  }
}

@media (max-width: 363px) {
  .step-1::before,
  .step-2::before,
  .step-3::before,
  .step-4::before {
    margin: -5px -40px -60px;
  }
}

@media (max-width: 320px) {
  .section-title-wrapper {
    margin: 24px 0 16px 0;
  }

  .step {
    font-size: 12px;
  }

  .step-header {
    font-size: 14px;
  }

  .step-text {
    font-size: 10px;
  }

  .circle {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .line {
    margin: 0 8px 0 12px;
  }

  .top-pad {
    padding-top: 16px;
  }

  table {
    padding-top: 16;
  }

  .circle-symbol-lb {
    font-size: 12px;
  }

  .circle-symbol-db {
    font-size: 12px;
  }

  .content-body p,
  .content-body a:not(.link) {
    font-size: 10px;
  }

  .list li {
    padding-left: 16px;
    font-size: 10px;
  }

  .number-list {
    font-size: 10px;
    padding-left: 10px;
  }

  .bullet-list li {
    font-size: 10px;
  }

  .bullet-list li::before {
    width: 10px;
    height: 10px;
  }

  .framed-list li::before {
    left: 12px;
  }

  .framed-list li {
    padding: 6px 28px;
    margin-bottom: 12px;
  }

  .form-container {
    padding-top: 40px;
  }

  .active,
  .challenge,
  .icon {
    font-size: 10px;
  }

  .bottom-bg {
    bottom: -16px;
  }

  .form-bg {
    top: -86%;
  }

  .link {
    text-underline-offset: 2px;
  }
}