ズラしデザイン05

.theme-fo-base .wrapper .contents {
  section {
    &.demo05_sec {
      --set-color: var(--fo-main-color);
      .inner {
        max-width: 1440px;
        div {
          &:nth-child(1 of .demo05_row) {
            &::after {
              content: "";
              width: 10px;
              height: 10px;
              background-color: var(--set-color);
              position: absolute;
              top: 0;
              transform: translate(0,-50%);
              border-radius: 50vh;
              @include breakpoint-sp {
                top: 1px;
              }
            }
            .col {
              &.number_col {
                &::before {
                  @include breakpoint-sp {
                    content: "";
                    width: 50%;
                    height: 2px;
                    background-color: var(--set-color);
                    position: absolute;
                    top: 0;
                    left: 0;
                  }
                }
              }
            }
          }
          &:nth-last-child(1 of .demo05_row) {
            &::after {
              content: "";
              width: 10px;
              height: 10px;
              background-color: var(--set-color);
              position: absolute;
              top: 100%;
              transform: translate(0,-50%);
              border-radius: 50vh;
              @include breakpoint-sp {
                top: calc(100% + 1px);
              }
            }
            .col {
              &.text_col {
                &::before {
                  @include breakpoint-sp {
                    content: "";
                    width: 50%;
                    height: 2px;
                    background-color: var(--set-color);
                    position: absolute;
                    top: 100%;
                    left: 0;
                  }
                }
              }
            }
          }
        }
        .row {
          &.demo05_row {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 20px 0;
            @include breakpoint-sp {
              flex-direction: column;
            }
            &::before {
              content: "";
              width: 2px;
              height: 100%;
              background-color: var(--set-color);
              position: absolute;
              top: 0;
              left: 50%;
              z-index: -1;
              transform: translate(-50%,0);
              @include breakpoint-sp {
                left: 0;
                transform: none;
              }
            }
            .col {
              padding: 0 10px;
              @include breakpoint-sp {
                padding-left: 20px;
              }
              &.text_col {
                @include breakpoint-pc {
                  flex: 1;
                }
                @include breakpoint-sp {
                  order: 3;
                }
              }
              &.img_col {
                @include breakpoint-pc {
                  flex: 1;
                }
                @include breakpoint-sp {
                  order: 2;
                }
              }
              &.number_col {
                @include breakpoint-pc {
                  width: 100px !important;
                }
                @include breakpoint-sp {
                  order: 1;
                }
                .component {
                  &.richtext {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: #fff;
                    width: 80px;
                    height: 80px;
                    color: var(--set-color);
                    border-radius: 50vh;
                    border: 2px solid var(--set-color);
                    @include breakpoint-sp {
                      border-radius: 0 50vh 50vh 0;
                      margin-left: -20px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.theme-fo-base .wrapper .contents {
  section {
    &.demo05_sec {
      .inner {
        .row {
          &.demo05_row {
            .col {
              &.number_col {
                .col-panel-global {
                  flex-direction: column;
                  top: -70px;
                }
              }
            }
          }
        }
      }
    }
  }
}