ズラしデザイン01

//ズラしデザイン01
&.demo01_sec {
  .inner {
    counter-reset: number 0;
    max-width: 100%;
    padding: 20px 0;
    .row {
      &.column2_row {
        padding: 30px 0 60px;
        @include breakpoint-sp {
          padding-bottom: 0;
        }
        @include breakpoint-pro_s {
          display: block;
          padding: 15px 0 30px;
        }
        &.reverse {
          @include breakpoint-pro_s {
            display: flex;
            flex-flow: wrap-reverse;
          }
        }
        .col {
          padding: 0;
          @include breakpoint-pro_s {
            display: block;
            width: 100%;
          }
          //余白調整
          &.textL_col,
          &.textR_col {
            display: block;
            background: #fff;
            position: relative;
            width: 54vw !important;
            box-shadow: 0 3px 8px var(--fo-shadow-color); //新CMSの設定なので各アカウントの定義を設定してください
            padding: 30px 50px 30px 20px;
            z-index: 1;
            @include breakpoint-sp {
              width: 100% !important;
              padding: 20px;
            }
            @include breakpoint-pro_s {
              width: 100% !important;
              padding: 20px;
            }
            //ナンバー
            &::before {
              counter-increment: number 1;
              content: "0"counter(number);
              color: #EFF4F1;
              font-size: 160px;
              line-height: 1;
              position: absolute;
              right: 27vw;
              bottom: 0;
              z-index: -1;
              @include breakpoint-sp {
                right: 0;
              }
              @include breakpoint-pro {
                right: auto;
                left: 0;
              }
              @include breakpoint-pro_s {
                right: 0;
                left: auto;
              }
            }
            .component {
              max-width: calc(530px - 50px - 20px);
              width: 100%;
              margin-left: auto;

              @include breakpoint-sp {
                max-width: 100%;
              }
              @include breakpoint-pro_s {
                max-width: 100%;
              }
            }
          }
          &.textR_col {
            z-index: 1;
            margin-left: -4vw;
            padding: 30px 20px 30px 50px;

            @include breakpoint-sp {
              padding: 20px;
              margin-left: 0;
            }
            @include breakpoint-pro_s {
              padding: 20px;
              margin-left: 0;
            }
            &::before {
              right: auto;
              left: 31vw;
              @include breakpoint-sp {
                right: 0;
                left: auto;
              }
              @include breakpoint-pro {
                left: auto;
                right: 0;
              }
            }
            .component {
              max-width: 540px;
              margin-left: 0;
              margin-right: auto;

              @include breakpoint-sp {
                max-width: 100%;
              }
              @include breakpoint-pro_s {
                max-width: 100%;
              }
            }
          }
          &.img_col {
            @include breakpoint-sp {
              width: 100% !important;
            }
            @include breakpoint-pro {
              width: 50% !important;
            }
            @include breakpoint-pro_s {
              width: 100% !important;
            }
          }
          .component {
            &.image {
              margin: 0;
            }
          }
        }
      }
    }
  }
}

//ズラしデザイン01 編集画面用
&.demo01_sec {
  .inner {
    .row {
      &.column2_row {
        .col {
          &.textL_col,
          &.textR_col {
            display: table-cell !important;
          }
        }
      }
    }
  }
}