// 資料庫
@import './partials/variable';
@import './partials/mixin';

.htmlPage {
  .blockTitle {
    text-align: center;
    font-weight: 800;
    font-size: Rem(56);
    margin-bottom: 40px;

    @include screen('tablet') {
      font-size: Rem(40);
    }

    @include screen('mobile') {
      font-size: Rem(30);
    }
  }

  .editor {
    color: #999999;
    font-size: var(--clamp21);
    padding: 50px 70px;
    position: relative;

    @include screen('tablet') {
      padding: 40px;
    }

    @include screen('mobile') {
      padding: 0px;
    }

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      border: #3D3C3A 1px solid;
      border-width: 1px 0 0 1px;
      max-width: 695px;
      max-height: 476px;
      width: 100%;
      height: 100%;
      z-index: -1;
      mask: linear-gradient(135deg, rgba(#000, 1) 0%, rgba(#000, 0) 100%);
      background: transparent;

      @include screen('mobile') {
        display: none;
      }
    }

    span.title {
      color: $secColor;
      font-weight: 700;
    }

    ul.style {
      li {
        position: relative;
        padding: 5px 0 5px 20px;

        &::before {
          content: '◆';
          color: $mainColor;
          position: absolute;
          left: 0;
        }
      }
    }
  }
}