.alignwide { //left: 50%; transform: translateX(-50%);を使いたいけど、background-attachment: fixed;との併用ができない。 position: relative; max-width: 100vw; //initialにしたいが、IEで効かない // 広いディスプレイの時 @media (min-width: 1480px) { left: calc(50% - 700px); width: 1400px; } @include pc { left: calc(50% - 50vw + 4vw); width: calc(100vw - 8vw); [data-sidebar="on"] & { left: -16px; width: calc(100% + 32px); } } } .alignfull { position: relative; left: calc(50% - 50vw); width: 100vw; max-width: 100vw; & + .alignfull { margin-top: 0; } // サイドバー有りの時、コンテンツエリアでは幅を制限 [data-sidebar="on"] .l-content__main & { @include pc { left: -16px; width: calc(100% + 32px); } } // グループ・カバーブロックの余白量を大きく。SP表示はコンテンツ幅に揃える。 &.wp-block-group, &.wp-block-cover { padding: 4em 48px; @include sp { padding-right: 4vw; padding-left: 4vw; } } // メディアと文章ブロック &.wp-block-media-text .wp-block-media-text__content { @include pc { padding-right: 2.5em; padding-left: 2.5em; } } // グループ・カバーブロックのインナーコンテンツの最大幅を他のコンテンツと揃える。 & > .wp-block-group__inner-container, & > .wp-block-cover__inner-container { max-width: var(--ark-article_width); margin: 0 auto; } }