/** * 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; } }