/**
 * BackgroundBasic コンポーネントのスタイル
 *
 * このスタイルシートは、BackgroundBasicコンポーネントの表示に必要なスタイルを定義します。
 * 使用するブロックのスタイルシートでインポートするか、
 * WordPress のエンキューシステムを使用して読み込みます。
 */

/* 背景関連スタイル */
.background-basic {
  &__bg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; // コンテンツの下に表示
    overflow: hidden;

    /* 各レイヤー共通設定 */
    &_color,
    &_image,
    &_pattern {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    /* レイヤーの重なり順 */
    &_pattern {
      z-index: 30; // 一番上に表示
    }

    &_color {
      z-index: 20; // 下から2番目に表示

      // PC (1141px以上)
      @media (min-width: 1141px) {
        background-color: transparent;
        background-image: none;

        &:not([data-use-gradient-pc="true"]) {
          background-color: var(--background-color-pc);
          background-image: none;
        }

        &[data-use-gradient-pc="true"] {
          background-color: transparent;
          background-image: var(--background-gradient-pc);
        }

        opacity: calc(var(--background-color-opacity-pc) * 1);
        mix-blend-mode: var(--background-color-mix-blend-mode-pc);
      }

      // MD (841px〜1140px)
      @media (min-width: 841px) and (max-width: 1140px) {
        background-color: transparent;
        background-image: none;

        &:not([data-use-gradient-md="true"]) {
          background-color: var(--background-color-md, var(--background-color-pc));
          background-image: none;
        }

        &[data-use-gradient-md="true"] {
          background-color: transparent;
          background-image: var(--background-gradient-md, var(--background-gradient-pc));
        }

        opacity: calc(var(--background-color-opacity-md, var(--background-color-opacity-pc)) * 1);
        mix-blend-mode: var(--background-color-mix-blend-mode-md, var(--background-color-mix-blend-mode-pc));
      }

      // TB (541px〜840px)
      @media (min-width: 541px) and (max-width: 840px) {
        background-color: transparent;
        background-image: none;

        &:not([data-use-gradient-tb="true"]) {
          background-color: var(--background-color-tb, var(--background-color-md, var(--background-color-pc)));
          background-image: none;
        }

        &[data-use-gradient-tb="true"] {
          background-color: transparent;
          background-image: var(--background-gradient-tb, var(--background-gradient-md, var(--background-gradient-pc)));
        }

        opacity: calc(var(--background-color-opacity-tb, var(--background-color-opacity-md, var(--background-color-opacity-pc))) * 1);
        mix-blend-mode: var(--background-color-mix-blend-mode-tb, var(--background-color-mix-blend-mode-md, var(--background-color-mix-blend-mode-pc)));
      }

      // SP (540px以下)
      @media (max-width: 540px) {
        background-color: transparent;
        background-image: none;

        &:not([data-use-gradient-sp="true"]) {
          background-color: var(--background-color-sp, var(--background-color-tb, var(--background-color-md, var(--background-color-pc))));
          background-image: none;
        }

        &[data-use-gradient-sp="true"] {
          background-color: transparent;
          background-image: var(--background-gradient-sp, var(--background-gradient-tb, var(--background-gradient-md, var(--background-gradient-pc))));
        }

        opacity: calc(var(--background-color-opacity-sp, var(--background-color-opacity-tb, var(--background-color-opacity-md, var(--background-color-opacity-pc)))) * 1);
        mix-blend-mode: var(--background-color-mix-blend-mode-sp, var(--background-color-mix-blend-mode-tb, var(--background-color-mix-blend-mode-md, var(--background-color-mix-blend-mode-pc))));
      }
    }

    &_image {
      z-index: 10; // 真ん中に表示

      // PC (1141px以上)
      @media (min-width: 1141px) {
        background-image: var(--background-image-pc);
        background-position: var(--background-position-pc);
        background-size: var(--background-size-pc);
        background-repeat: var(--background-repeat-pc);
        display: block;
      }

      // MD (841px〜1140px)
      @media (min-width: 841px) and (max-width: 1140px) {
        background-image: var(--background-image-md, var(--background-image-pc));
        background-position: var(--background-position-md, var(--background-position-pc));
        background-size: var(--background-size-md, var(--background-size-pc));
        background-repeat: var(--background-repeat-md, var(--background-repeat-pc));
        display: block;
      }

      // TB (541px〜840px)
      @media (min-width: 541px) and (max-width: 840px) {
        background-image: var(--background-image-tb, var(--background-image-md, var(--background-image-pc)));
        background-position: var(--background-position-tb, var(--background-position-md, var(--background-position-pc)));
        background-size: var(--background-size-tb, var(--background-size-md, var(--background-size-pc)));
        background-repeat: var(--background-repeat-tb, var(--background-repeat-md, var(--background-repeat-pc)));
        display: block;
      }

      // SP (540px以下)
      @media (max-width: 540px) {
        background-image: var(--background-image-sp, var(--background-image-tb, var(--background-image-md, var(--background-image-pc))));
        background-position: var(--background-position-sp, var(--background-position-tb, var(--background-position-md, var(--background-position-pc))));
        background-size: var(--background-size-sp, var(--background-size-tb, var(--background-size-md, var(--background-size-pc))));
        background-repeat: var(--background-repeat-sp, var(--background-repeat-tb, var(--background-repeat-md, var(--background-repeat-pc))));
        display: block;
      }
    }

    &_pattern {
      // PC (1141px以上)
      @media (min-width: 1141px) {
        opacity: calc(var(--background-pattern-opacity-pc) * 1);
        transform: rotate(var(--background-pattern-rotate-pc) deg);

        &[data-pattern-pc="diagonal"],
        &[data-pattern-pc="diagonal-lines"] {
          background-image: linear-gradient(45deg, var(--background-pattern-color-pc) 25%, transparent 25%), linear-gradient(-45deg, var(--background-pattern-color-pc) 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, var(--background-pattern-color-pc) 75%), linear-gradient(-45deg, transparent 75%, var(--background-pattern-color-pc) 75%);
          background-size: var(--background-pattern-size-pc) var(--background-pattern-size-pc);
          background-position:
            0 0,
            0 calc(var(--background-pattern-size-pc) / 2),
            calc(var(--background-pattern-size-pc) / 2) calc(-1 * var(--background-pattern-size-pc) / 2),
            calc(-1 * var(--background-pattern-size-pc) / 2) 0px;
        }

        &[data-pattern-pc="dots"] {
          background-image: radial-gradient(var(--background-pattern-color-pc) 2px, transparent 2px);
          background-size: var(--background-pattern-size-pc) var(--background-pattern-size-pc);
          background-position: 0 0;
        }

        &[data-pattern-pc="grid"] {
          background-image: linear-gradient(to right, var(--background-pattern-color-pc) 1px, transparent 1px), linear-gradient(to bottom, var(--background-pattern-color-pc) 1px, transparent 1px);
          background-size: var(--background-pattern-size-pc) var(--background-pattern-size-pc);
        }

        &[data-pattern-pc="cross-lines"] {
          background-image: linear-gradient(45deg, var(--background-pattern-color-pc) 1px, transparent 1px), linear-gradient(-45deg, var(--background-pattern-color-pc) 1px, transparent 1px);
          background-size: var(--background-pattern-size-pc) var(--background-pattern-size-pc);
        }

        &[data-pattern-pc="horizontal-lines"] {
          background-image: linear-gradient(to bottom, var(--background-pattern-color-pc) 1px, transparent 1px);
          background-size: var(--background-pattern-size-pc) var(--background-pattern-size-pc);
        }

        &[data-pattern-pc="vertical-lines"] {
          background-image: linear-gradient(to right, var(--background-pattern-color-pc) 1px, transparent 1px);
          background-size: var(--background-pattern-size-pc) var(--background-pattern-size-pc);
        }

        &[data-pattern-pc="circles"] {
          background-image: radial-gradient(circle, var(--background-pattern-color-pc) 3px, transparent 3px);
          background-size: var(--background-pattern-size-pc) var(--background-pattern-size-pc);
        }

        &[data-pattern-pc="triangles"] {
          background-image: linear-gradient(45deg, var(--background-pattern-color-pc) 50%, transparent 50%);
          background-size: calc(var(--background-pattern-size-pc) / 2) calc(var(--background-pattern-size-pc) / 2);
        }

        &[data-pattern-pc="none"] {
          display: none;
        }
      }

      // MD (841px〜1140px)
      @media (min-width: 841px) and (max-width: 1140px) {
        opacity: calc(var(--background-pattern-opacity-md, var(--background-pattern-opacity-pc)) * 1);
        transform: rotate(var(--background-pattern-rotate-md, var(--background-pattern-rotate-pc)) deg);

        &[data-pattern-md="diagonal"],
        &[data-pattern-md="diagonal-lines"] {
          background-image: linear-gradient(45deg, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 25%, transparent 25%), linear-gradient(-45deg, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 75%), linear-gradient(-45deg, transparent 75%, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 75%);
          background-size: var(--background-pattern-size-md, var(--background-pattern-size-pc)) var(--background-pattern-size-md, var(--background-pattern-size-pc));
          background-position:
            0 0,
            0 calc(var(--background-pattern-size-md, var(--background-pattern-size-pc)) / 2),
            calc(var(--background-pattern-size-md, var(--background-pattern-size-pc)) / 2) calc(-1 * var(--background-pattern-size-md, var(--background-pattern-size-pc)) / 2),
            calc(-1 * var(--background-pattern-size-md, var(--background-pattern-size-pc)) / 2) 0px;
        }

        &[data-pattern-md="dots"] {
          background-image: radial-gradient(var(--background-pattern-color-md, var(--background-pattern-color-pc)) 2px, transparent 2px);
          background-size: var(--background-pattern-size-md, var(--background-pattern-size-pc)) var(--background-pattern-size-md, var(--background-pattern-size-pc));
          background-position: 0 0;
        }

        &[data-pattern-md="grid"] {
          background-image: linear-gradient(to right, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 1px, transparent 1px), linear-gradient(to bottom, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 1px, transparent 1px);
          background-size: var(--background-pattern-size-md, var(--background-pattern-size-pc)) var(--background-pattern-size-md, var(--background-pattern-size-pc));
        }

        &[data-pattern-md="cross-lines"] {
          background-image: linear-gradient(45deg, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 1px, transparent 1px), linear-gradient(-45deg, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 1px, transparent 1px);
          background-size: var(--background-pattern-size-md, var(--background-pattern-size-pc)) var(--background-pattern-size-md, var(--background-pattern-size-pc));
        }

        &[data-pattern-md="horizontal-lines"] {
          background-image: linear-gradient(to bottom, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 1px, transparent 1px);
          background-size: var(--background-pattern-size-md, var(--background-pattern-size-pc)) var(--background-pattern-size-md, var(--background-pattern-size-pc));
        }

        &[data-pattern-md="vertical-lines"] {
          background-image: linear-gradient(to right, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 1px, transparent 1px);
          background-size: var(--background-pattern-size-md, var(--background-pattern-size-pc)) var(--background-pattern-size-md, var(--background-pattern-size-pc));
        }

        &[data-pattern-md="circles"] {
          background-image: radial-gradient(circle, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 3px, transparent 3px);
          background-size: var(--background-pattern-size-md, var(--background-pattern-size-pc)) var(--background-pattern-size-md, var(--background-pattern-size-pc));
        }

        &[data-pattern-md="triangles"] {
          background-image: linear-gradient(45deg, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 50%, transparent 50%);
          background-size: calc(var(--background-pattern-size-md, var(--background-pattern-size-pc)) / 2) calc(var(--background-pattern-size-md, var(--background-pattern-size-pc)) / 2);
        }

        &[data-pattern-md="none"] {
          display: none;
        }

        &:not([data-pattern-md]) {
          &[data-pattern-pc="diagonal"],
          &[data-pattern-pc="diagonal-lines"] {
            background-image: linear-gradient(45deg, var(--background-pattern-color-pc) 25%, transparent 25%), linear-gradient(-45deg, var(--background-pattern-color-pc) 25%, transparent 25%),
              linear-gradient(45deg, transparent 75%, var(--background-pattern-color-pc) 75%), linear-gradient(-45deg, transparent 75%, var(--background-pattern-color-pc) 75%);
            background-size: var(--background-pattern-size-pc) var(--background-pattern-size-pc);
            background-position:
              0 0,
              0 calc(var(--background-pattern-size-pc) / 2),
              calc(var(--background-pattern-size-pc) / 2) calc(-1 * var(--background-pattern-size-pc) / 2),
              calc(-1 * var(--background-pattern-size-pc) / 2) 0px;
          }

          &[data-pattern-pc="dots"] {
            background-image: radial-gradient(var(--background-pattern-color-pc) 2px, transparent 2px);
            background-size: var(--background-pattern-size-pc) var(--background-pattern-size-pc);
            background-position: 0 0;
          }

          &[data-pattern-pc="grid"] {
            background-image: linear-gradient(to right, var(--background-pattern-color-pc) 1px, transparent 1px), linear-gradient(to bottom, var(--background-pattern-color-pc) 1px, transparent 1px);
            background-size: var(--background-pattern-size-pc) var(--background-pattern-size-pc);
          }

          &[data-pattern-pc="cross-lines"] {
            background-image: linear-gradient(45deg, var(--background-pattern-color-pc) 1px, transparent 1px), linear-gradient(-45deg, var(--background-pattern-color-pc) 1px, transparent 1px);
            background-size: var(--background-pattern-size-pc) var(--background-pattern-size-pc);
          }

          &[data-pattern-pc="horizontal-lines"] {
            background-image: linear-gradient(to bottom, var(--background-pattern-color-pc) 1px, transparent 1px);
            background-size: var(--background-pattern-size-pc) var(--background-pattern-size-pc);
          }

          &[data-pattern-pc="vertical-lines"] {
            background-image: linear-gradient(to right, var(--background-pattern-color-pc) 1px, transparent 1px);
            background-size: var(--background-pattern-size-pc) var(--background-pattern-size-pc);
          }

          &[data-pattern-pc="circles"] {
            background-image: radial-gradient(circle, var(--background-pattern-color-pc) 3px, transparent 3px);
            background-size: var(--background-pattern-size-pc) var(--background-pattern-size-pc);
          }

          &[data-pattern-pc="triangles"] {
            background-image: linear-gradient(45deg, var(--background-pattern-color-pc) 50%, transparent 50%);
            background-size: calc(var(--background-pattern-size-pc) / 2) calc(var(--background-pattern-size-pc) / 2);
          }

          &[data-pattern-pc="none"] {
            display: none;
          }
        }
      }

      // TB (541px〜840px)
      @media (min-width: 541px) and (max-width: 840px) {
        opacity: calc(var(--background-pattern-opacity-tb, var(--background-pattern-opacity-md, var(--background-pattern-opacity-pc))) * 1);
        transform: rotate(var(--background-pattern-rotate-tb, var(--background-pattern-rotate-md, var(--background-pattern-rotate-pc))) deg);

        &[data-pattern-tb="diagonal"],
        &[data-pattern-tb="diagonal-lines"] {
          background-image: linear-gradient(45deg, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 25%, transparent 25%), linear-gradient(-45deg, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 75%), linear-gradient(-45deg, transparent 75%, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 75%);
          background-size: var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)));
          background-position:
            0 0,
            0 calc(var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) / 2),
            calc(var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) / 2) calc(-1 * var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) / 2),
            calc(-1 * var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) / 2) 0px;
        }

        &[data-pattern-tb="dots"] {
          background-image: radial-gradient(var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 2px, transparent 2px);
          background-size: var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)));
          background-position: 0 0;
        }

        &[data-pattern-tb="grid"] {
          background-image: linear-gradient(to right, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 1px, transparent 1px), linear-gradient(to bottom, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 1px, transparent 1px);
          background-size: var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)));
        }

        &[data-pattern-tb="cross-lines"] {
          background-image: linear-gradient(45deg, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 1px, transparent 1px), linear-gradient(-45deg, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 1px, transparent 1px);
          background-size: var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)));
        }

        &[data-pattern-tb="horizontal-lines"] {
          background-image: linear-gradient(to bottom, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 1px, transparent 1px);
          background-size: var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)));
        }

        &[data-pattern-tb="vertical-lines"] {
          background-image: linear-gradient(to right, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 1px, transparent 1px);
          background-size: var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)));
        }

        &[data-pattern-tb="circles"] {
          background-image: radial-gradient(circle, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 3px, transparent 3px);
          background-size: var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)));
        }

        &[data-pattern-tb="triangles"] {
          background-image: linear-gradient(45deg, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 50%, transparent 50%);
          background-size: calc(var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) / 2) calc(var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) / 2);
        }

        &[data-pattern-tb="none"] {
          display: none;
        }

        &:not([data-pattern-tb]) {
          &[data-pattern-md="diagonal"],
          &[data-pattern-md="diagonal-lines"],
          &[data-pattern-pc="diagonal"],
          &[data-pattern-pc="diagonal-lines"] {
            background-image: linear-gradient(45deg, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 25%, transparent 25%), linear-gradient(-45deg, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 25%, transparent 25%),
              linear-gradient(45deg, transparent 75%, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 75%), linear-gradient(-45deg, transparent 75%, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 75%);
            background-size: var(--background-pattern-size-md, var(--background-pattern-size-pc)) var(--background-pattern-size-md, var(--background-pattern-size-pc));
            background-position:
              0 0,
              0 calc(var(--background-pattern-size-md, var(--background-pattern-size-pc)) / 2),
              calc(var(--background-pattern-size-md, var(--background-pattern-size-pc)) / 2) calc(-1 * var(--background-pattern-size-md, var(--background-pattern-size-pc)) / 2),
              calc(-1 * var(--background-pattern-size-md, var(--background-pattern-size-pc)) / 2) 0px;
          }

          &[data-pattern-md="dots"],
          &[data-pattern-pc="dots"] {
            background-image: radial-gradient(var(--background-pattern-color-md, var(--background-pattern-color-pc)) 2px, transparent 2px);
            background-size: var(--background-pattern-size-md, var(--background-pattern-size-pc)) var(--background-pattern-size-md, var(--background-pattern-size-pc));
            background-position: 0 0;
          }

          &[data-pattern-md="grid"],
          &[data-pattern-pc="grid"] {
            background-image: linear-gradient(to right, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 1px, transparent 1px), linear-gradient(to bottom, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 1px, transparent 1px);
            background-size: var(--background-pattern-size-md, var(--background-pattern-size-pc)) var(--background-pattern-size-md, var(--background-pattern-size-pc));
          }

          &[data-pattern-md="cross-lines"],
          &[data-pattern-pc="cross-lines"] {
            background-image: linear-gradient(45deg, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 1px, transparent 1px), linear-gradient(-45deg, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 1px, transparent 1px);
            background-size: var(--background-pattern-size-md, var(--background-pattern-size-pc)) var(--background-pattern-size-md, var(--background-pattern-size-pc));
          }

          &[data-pattern-md="horizontal-lines"],
          &[data-pattern-pc="horizontal-lines"] {
            background-image: linear-gradient(to bottom, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 1px, transparent 1px);
            background-size: var(--background-pattern-size-md, var(--background-pattern-size-pc)) var(--background-pattern-size-md, var(--background-pattern-size-pc));
          }

          &[data-pattern-md="vertical-lines"],
          &[data-pattern-pc="vertical-lines"] {
            background-image: linear-gradient(to right, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 1px, transparent 1px);
            background-size: var(--background-pattern-size-md, var(--background-pattern-size-pc)) var(--background-pattern-size-md, var(--background-pattern-size-pc));
          }

          &[data-pattern-md="circles"],
          &[data-pattern-pc="circles"] {
            background-image: radial-gradient(circle, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 3px, transparent 3px);
            background-size: var(--background-pattern-size-md, var(--background-pattern-size-pc)) var(--background-pattern-size-md, var(--background-pattern-size-pc));
          }

          &[data-pattern-md="triangles"],
          &[data-pattern-pc="triangles"] {
            background-image: linear-gradient(45deg, var(--background-pattern-color-md, var(--background-pattern-color-pc)) 50%, transparent 50%);
            background-size: calc(var(--background-pattern-size-md, var(--background-pattern-size-pc)) / 2) calc(var(--background-pattern-size-md, var(--background-pattern-size-pc)) / 2);
          }

          &[data-pattern-md="none"],
          &[data-pattern-pc="none"] {
            display: none;
          }
        }
      }

      // SP (540px以下)
      @media (max-width: 540px) {
        opacity: calc(var(--background-pattern-opacity-sp, var(--background-pattern-opacity-tb, var(--background-pattern-opacity-md, var(--background-pattern-opacity-pc)))) * 1);
        transform: rotate(var(--background-pattern-rotate-sp, var(--background-pattern-rotate-tb, var(--background-pattern-rotate-md, var(--background-pattern-rotate-pc)))) deg);

        &[data-pattern-sp="diagonal"],
        &[data-pattern-sp="diagonal-lines"] {
          background-image: linear-gradient(45deg, var(--background-pattern-color-sp, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc)))) 25%, transparent 25%), linear-gradient(-45deg, var(--background-pattern-color-sp, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc)))) 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, var(--background-pattern-color-sp, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc)))) 75%), linear-gradient(-45deg, transparent 75%, var(--background-pattern-color-sp, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc)))) 75%);
          background-size: var(--background-pattern-size-sp, var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)))) var(--background-pattern-size-sp, var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))));
          background-position:
            0 0,
            0 calc(var(--background-pattern-size-sp, var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)))) / 2),
            calc(var(--background-pattern-size-sp, var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)))) / 2) calc(-1 * var(--background-pattern-size-sp, var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)))) / 2),
            calc(-1 * var(--background-pattern-size-sp, var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)))) / 2) 0px;
        }

        &[data-pattern-sp="dots"] {
          background-image: radial-gradient(var(--background-pattern-color-sp, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc)))) 2px, transparent 2px);
          background-size: var(--background-pattern-size-sp, var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)))) var(--background-pattern-size-sp, var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))));
          background-position: 0 0;
        }

        &[data-pattern-sp="grid"] {
          background-image: linear-gradient(to right, var(--background-pattern-color-sp, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc)))) 1px, transparent 1px), linear-gradient(to bottom, var(--background-pattern-color-sp, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc)))) 1px, transparent 1px);
          background-size: var(--background-pattern-size-sp, var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)))) var(--background-pattern-size-sp, var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))));
        }

        &[data-pattern-sp="cross-lines"] {
          background-image: linear-gradient(45deg, var(--background-pattern-color-sp, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc)))) 1px, transparent 1px), linear-gradient(-45deg, var(--background-pattern-color-sp, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc)))) 1px, transparent 1px);
          background-size: var(--background-pattern-size-sp, var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)))) var(--background-pattern-size-sp, var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))));
        }

        &[data-pattern-sp="horizontal-lines"] {
          background-image: linear-gradient(to bottom, var(--background-pattern-color-sp, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc)))) 1px, transparent 1px);
          background-size: var(--background-pattern-size-sp, var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)))) var(--background-pattern-size-sp, var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))));
        }

        &[data-pattern-sp="vertical-lines"] {
          background-image: linear-gradient(to right, var(--background-pattern-color-sp, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc)))) 1px, transparent 1px);
          background-size: var(--background-pattern-size-sp, var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)))) var(--background-pattern-size-sp, var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))));
        }

        &[data-pattern-sp="circles"] {
          background-image: radial-gradient(circle, var(--background-pattern-color-sp, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc)))) 3px, transparent 3px);
          background-size: var(--background-pattern-size-sp, var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)))) var(--background-pattern-size-sp, var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))));
        }

        &[data-pattern-sp="triangles"] {
          background-image: linear-gradient(45deg, var(--background-pattern-color-sp, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc)))) 50%, transparent 50%);
          background-size: calc(var(--background-pattern-size-sp, var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)))) / 2) calc(var(--background-pattern-size-sp, var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)))) / 2);
        }

        &[data-pattern-sp="none"] {
          display: none;
        }

        &:not([data-pattern-sp]) {
          &[data-pattern-tb="diagonal"],
          &[data-pattern-tb="diagonal-lines"],
          &[data-pattern-md="diagonal"],
          &[data-pattern-md="diagonal-lines"],
          &[data-pattern-pc="diagonal"],
          &[data-pattern-pc="diagonal-lines"] {
            background-image: linear-gradient(45deg, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 25%, transparent 25%), linear-gradient(-45deg, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 25%, transparent 25%),
              linear-gradient(45deg, transparent 75%, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 75%), linear-gradient(-45deg, transparent 75%, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 75%);
            background-size: var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)));
            background-position:
              0 0,
              0 calc(var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) / 2),
              calc(var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) / 2) calc(-1 * var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) / 2),
              calc(-1 * var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) / 2) 0px;
          }

          &[data-pattern-tb="dots"],
          &[data-pattern-md="dots"],
          &[data-pattern-pc="dots"] {
            background-image: radial-gradient(var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 2px, transparent 2px);
            background-size: var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)));
            background-position: 0 0;
          }

          &[data-pattern-tb="grid"],
          &[data-pattern-md="grid"],
          &[data-pattern-pc="grid"] {
            background-image: linear-gradient(to right, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 1px, transparent 1px), linear-gradient(to bottom, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 1px, transparent 1px);
            background-size: var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)));
          }

          &[data-pattern-tb="cross-lines"],
          &[data-pattern-md="cross-lines"],
          &[data-pattern-pc="cross-lines"] {
            background-image: linear-gradient(45deg, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 1px, transparent 1px), linear-gradient(-45deg, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 1px, transparent 1px);
            background-size: var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)));
          }

          &[data-pattern-tb="horizontal-lines"],
          &[data-pattern-md="horizontal-lines"],
          &[data-pattern-pc="horizontal-lines"] {
            background-image: linear-gradient(to bottom, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 1px, transparent 1px);
            background-size: var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)));
          }

          &[data-pattern-tb="vertical-lines"],
          &[data-pattern-md="vertical-lines"],
          &[data-pattern-pc="vertical-lines"] {
            background-image: linear-gradient(to right, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 1px, transparent 1px);
            background-size: var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)));
          }

          &[data-pattern-tb="circles"],
          &[data-pattern-md="circles"],
          &[data-pattern-pc="circles"] {
            background-image: radial-gradient(circle, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 3px, transparent 3px);
            background-size: var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc)));
          }

          &[data-pattern-tb="triangles"],
          &[data-pattern-md="triangles"],
          &[data-pattern-pc="triangles"] {
            background-image: linear-gradient(45deg, var(--background-pattern-color-tb, var(--background-pattern-color-md, var(--background-pattern-color-pc))) 50%, transparent 50%);
            background-size: calc(var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) / 2) calc(var(--background-pattern-size-tb, var(--background-pattern-size-md, var(--background-pattern-size-pc))) / 2);
          }

          &[data-pattern-tb="none"],
          &[data-pattern-md="none"],
          &[data-pattern-pc="none"] {
            display: none;
          }
        }
      }
    }
  }
}

/* 他のブロックでの実際の適用 */
.ctaBasic,
.heroBasic,
.cardBasic,
.card-basic {
  /* 背景コンテナの基本スタイル */
  &__bg {
    @extend .background-basic__bg;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
  }

  /* 各レイヤーのスタイル */
  &__bg_color {
    @extend .background-basic__bg_color;
  }

  &__bg_image {
    @extend .background-basic__bg_image;
  }

  &__bg_pattern {
    @extend .background-basic__bg_pattern;
  }
}
