:root {
  /* PC */
  --pc-padding-1titlesubtitle: 8px;
  --pc-padding-1titletext: 24px;
  --pc-padding-1textnote: 16px;
  --pc-padding-1textpicture: 40px;
  --pc-padding-2titlesubtitle: 6px;
  --pc-padding-2titletext: 16px;
  --pc-padding-2textnote: 8px;
  --pc-padding-2textpicture: 24px;
  /* component */
  --pc-large-size-component-padding-top-and-bottom: 128px;
  --pc-medium-size-component-padding-top-and-bottom: 32px;
  --pc-small-size-component-padding-top-and-bottom: 16px;
  --pc-large-size-component-margin-top-and-bottom: 0;
  --pc-medium-size-component-margin-top-and-bottom: 96px;
  --pc-small-size-component-margin-top-and-bottom: 112px;
  /* chapter */
  --pc-large-size-chapter-padding-top: 256px;
  --pc-medium-size-chapter-padding-top: 192px;
  --pc-small-size-chapter-padding-top: 96px;
  --pc-large-size-chapter-padding-bottom: 128px;
  --pc-medium-size-chapter-padding-bottom: 96px;
  --pc-small-size-chapter-padding-bottom: 48px;
  /* padding aside */
  --pc-large-size-text-aside: 200px;
  --pc-medium-size-text-aside: 160px;
  --pc-small-size-text-aside: 80px;

  /* MOB */
  --mob-padding-1titlesubtitle: 4px;
  --mob-padding-1titletext: 16px;
  --mob-padding-1textnote: 8px;
  --mob-padding-1textpicture: 32px;
  --mob-padding-2titlesubtitle: 4px;
  --mob-padding-2titletext: 16px;
  --mob-padding-2textnote: 8px;
  --mob-padding-2textpicture: 20px;
  --mob-large-size-component-padding-top-and-bottom: 64px;
  --mob-medium-size-component-padding-top-and-bottom: 32px;
  --mob-small-size-component-padding-top-and-bottom: 16px;
  --mob-large-size-component-margin-top-and-bottom: 0;
  --mob-medium-size-component-margin-top-and-bottom: 16px;
  --mob-small-size-component-margin-top-and-bottom: 24px;
  /* chapter */
  --mob-large-size-chapter-padding-top: 128px;
  --mob-medium-size-chapter-padding-top: 96px;
  --mob-small-size-chapter-padding-top: 72px;
  --mob-large-size-chapter-padding-bottom: 64px;
  --mob-medium-size-chapter-padding-bottom: 48px;
  --mob-small-size-chapter-padding-bottom: 36px;
  /* padding aside */
  --mob-large-size-text-aside: 0;
  --mob-medium-size-text-aside: 0;
  --mob-small-size-text-aside: 0;
}

.padding-1titlesubtitle {
  padding-bottom: var(--pc-padding-1titlesubtitle, 8px);

  @media screen and (max-width: 767px) {
    padding-bottom: var(--mob-padding-1titlesubtitle, 4px);
  }
}

.padding-1titletext {
  padding-bottom: var(--pc-padding-1titletext, 24px);

  @media screen and (max-width: 767px) {
    padding-bottom: var(--mob-padding-1titletext, 16px);
  }
}

.padding-1textnote {
  padding-bottom: var(--pc-padding-1textnote, 16px);

  @media screen and (max-width: 767px) {
    padding-bottom: var(--mob-padding-1textnote, 8px);
  }
}

.padding-1textpicture {
  padding-bottom: var(--pc-padding-1textpicture, 40px);

  @media screen and (max-width: 767px) {
    padding-bottom: var(--mob-padding-1textpicture, 32px);
  }
}

.padding-2titlesubtitle {
  padding-bottom: var(--pc-padding-2titlesubtitle, 6px);

  @media screen and (max-width: 767px) {
    padding-bottom: var(--mob-padding-2titlesubtitle, 4px);
  }
}

.padding-2titletext {
  padding-bottom: var(--pc-padding-2titletext, 16px);

  @media screen and (max-width: 767px) {
    padding-bottom: var(--mob-padding-2titletext, 16px);
  }
}

.padding-2textnote {
  padding-bottom: var(--pc-padding-2textnote, 8px);

  @media screen and (max-width: 767px) {
    padding-bottom: var(--mob-padding-2textnote, 8px);
  }
}

.padding-2textpicture {
  padding-bottom: var(--pc-padding-2textpicture, 24px);

  @media screen and (max-width: 767px) {
    padding-bottom: 10px;
  }
}

.padding-component-large {
  padding: var(--pc-large-size-component-padding-top-and-bottom, 128px) 0;

  &.with-margin-top {
    margin-top: var(--pc-large-size-component-margin-top-and-bottom, 0);
  }

  &.with-margin-bottom {
    margin-bottom: var(--pc-large-size-component-margin-top-and-bottom, 0);
  }

  @media screen and (max-width: 767px) {
    padding: var(--mob-large-size-component-padding-top-and-bottom, 64px) 0;

    &.with-margin-top {
      margin-top: var(--mob-large-size-component-margin-top-and-bottom, 0);
    }

    &.with-margin-bottom {
      margin-bottom: var(--mob-large-size-component-margin-top-and-bottom, 0);
    }
  }
}

.padding-component-medium {
  padding: var(--pc-medium-size-component-padding-top-and-bottom, 32px) 0;

  &.with-margin-top {
    margin-top: var(--pc-medium-size-component-margin-top-and-bottom, 96px);
  }

  &.with-margin-bottom {
    margin-bottom: var(--pc-medium-size-component-margin-top-and-bottom, 96px);
  }

  @media screen and (max-width: 767px) {
    padding: var(--mob-medium-size-component-padding-top-and-bottom, 32px) 0;

    &.with-margin-top {
      margin-top: var(--mob-medium-size-component-margin-top-and-bottom, 32px);
    }

    &.with-margin-bottom {
      margin-bottom: var(
        --mob-medium-size-component-margin-top-and-bottom,
        32px
      );
    }
  }
}

.padding-component-small {
  padding: var(--pc-small-size-component-padding-top-and-bottom, 16px) 0;

  &.with-margin-top {
    margin-top: var(--pc-small-size-component-margin-top-and-bottom, 112px);
  }

  &.with-margin-bottom {
    margin-bottom: var(--pc-small-size-component-margin-top-and-bottom, 112px);
  }

  @media screen and (max-width: 767px) {
    padding: var(--mob-small-size-component-padding-top-and-bottom, 16px) 0;

    &.with-margin-top {
      margin-top: var(--mob-small-size-component-margin-top-and-bottom, 48px);
    }

    &.with-margin-bottom {
      margin-bottom: var(
        --mob-small-size-component-margin-top-and-bottom,
        48px
      );
    }
  }
}

.padding-chapter-large {
  padding: var(--pc-large-size-chapter-padding-top, 256px) 0
    var(--pc-large-size-chapter-padding-bottom, 128px);

  @media screen and (max-width: 767px) {
    padding: var(--mob-large-size-chapter-padding-top, 128px) 0
      var(--mob-large-size-chapter-padding-bottom, 64px);
  }
}

.padding-chapter-medium {
  padding: var(--pc-medium-size-chapter-padding-top, 192px) 0
    var(--pc-medium-size-chapter-padding-bottom, 96px);

  @media screen and (max-width: 767px) {
    padding: var(--mob-medium-size-chapter-padding-top, 96px) 0
      var(--mob-medium-size-chapter-padding-bottom, 48px);
  }
}

.padding-chapter-small {
  padding: var(--pc-small-size-chapter-padding-top, 96px) 0
    var(--pc-small-size-chapter-padding-bottom, 48px);

  @media screen and (max-width: 767px) {
    padding: var(--mob-small-size-chapter-padding-top, 72px) 0
      var(--mob-small-size-chapter-padding-bottom, 36px);
  }
}
.padding-component-large .padding-text-aside,
.padding-chapter-large .padding-text-aside {
  padding-left: var(--pc-large-size-text-aside, 200px);
  padding-right: var(--pc-large-size-text-aside, 200px);
  &.no-padding-left {
    padding-left: 0;
  }
  &.no-padding-right {
    padding-left: 0;
  }

  @media screen and (max-width: 767px) {
    padding-left: var(--mob-large-size-text-aside, 0);
    padding-right: var(--mob-large-size-text-aside, 0);
  }
}

.padding-component-medium .padding-text-aside,
.padding-chapter-medium .padding-text-aside {
  padding-left: var(--pc-medium-size-text-aside, 160px);
  padding-right: var(--pc-medium-size-text-aside, 160px);
  &.no-padding-left {
    padding-left: 0;
  }
  &.no-padding-right {
    padding-left: 0;
  }

  @media screen and (max-width: 767px) {
    padding-left: var(--mob-medium-size-text-aside, 0);
    padding-right: var(--mob-medium-size-text-aside, 0);
  }
}

.padding-component-small .padding-text-aside,
.padding-chapter-small .padding-text-aside {
  padding-left: var(--pc-small-size-text-aside, 80px);
  padding-right: var(--pc-small-size-text-aside, 80px);
  &.no-padding-left {
    padding-left: 0;
  }
  &.no-padding-right {
    padding-left: 0;
  }

  @media screen and (max-width: 767px) {
    padding-left: var(--mob-small-size-text-aside, 0);
    padding-right: var(--mob-small-size-text-aside, 0);
  }
}