#new_system .illust {
  max-width: 707px;
  margin: var(--space4) auto 0 auto; }

.section_page .boxes {
  display: flex;
  flex-direction: column;
  --boxColumnGap:var(--space4);
  --boxRowGap:var(--space5);
  grid-gap: var(--boxRowGap) var(--boxColumnGap);
  align-items: center; }
  .section_page .boxes .box {
    position: relative; }
    .section_page .boxes .box:not(:first-child)::before {
      width: 30px;
      height: 18px;
      background: url("../images/common/icon_arrow_down.png") no-repeat center center;
      background-size: contain;
      content: "";
      position: absolute;
      bottom: calc( 100% + ( var(--boxRowGap) - 18px ) / 2 );
      left: 0;
      right: 0;
      margin: auto; }
  @media (min-width: 768px) {
    .section_page .boxes {
      flex-direction: row;
      align-items: flex-start; }
      .section_page .boxes .box {
        flex: 1; }
        .section_page .boxes .box:not(:first-child)::before {
          height: 30px;
          width: 18px;
          background-image: url("../images/common/icon_arrow_left.png");
          right: calc( 100% + ( var(--boxColumnGap) - 18px ) / 2 );
          left: auto;
          bottom: 0;
          top: 0; } }
  .section_page .boxes.boxes_visualize {
    --boxColumnGap:166px;
    --boxRowGap:120px; }
    .section_page .boxes.boxes_visualize .box {
      background: var(--colorLightGray);
      max-width: 300px;
      position: relative;
      box-sizing: border-box;
      padding: var(--space2);
      border-radius: 20px;
      height: 250px;
      display: flex;
      justify-content: center;
      align-items: flex-end; }
      .section_page .boxes.boxes_visualize .box .illust {
        position: absolute;
        bottom: calc( var(--space5) + var(--space1) );
        left: 0;
        right: 0;
        margin: auto; }
      .section_page .boxes.boxes_visualize .box:not(:first-child)::before {
        width: 77px;
        height: 77px;
        background-image: url("../images/common/icon_plus.png");
        bottom: calc( 100% + ( var(--boxRowGap) - 77px ) / 2 ); }
      .section_page .boxes.boxes_visualize .box:nth-child(1) .illust {
        width: 130px; }
      .section_page .boxes.boxes_visualize .box:nth-child(2) .illust {
        width: 196px; }
    @media (min-width: 768px) {
      .section_page .boxes.boxes_visualize .box {
        flex: 1;
        max-width: none; }
        .section_page .boxes.boxes_visualize .box:not(:first-child)::before {
          right: calc( 100% + ( var(--boxColumnGap) - 77px ) / 2 );
          bottom: 0; } }