.alignfull { position: relative; left: calc(50% - ( 50vw - var(--ark-scrollbar_width) / 2 )); width: calc(100vw - var(--ark-scrollbar_width)); max-width: 100vw !important; // embedなどの max100% のものを上書き + .alignfull { margin-top: 0; } // div中の全幅は、内部に収まるように。(ネスト内でも広げたいケースはそれぞれ明示的に指定する) :where(.c-postContent > div) & { left: 0; width: 100%; } // サイドバーありの時、コンテンツエリアでは幅を制限 [data-sidebar="on"] .l-main & { @include pc { left: 0 !important; width: 100% !important; } } // 背景色ありグループ・カバーブロックの余白量を大きく。 &.wp-block-cover, &.wp-block-group.has-background { padding: 4em var(--ark-padding--container, 48px); } // インナーコンテンツの最大幅を記事幅に維持する > .wp-block-cover__inner-container, &.has-background > .wp-block-group__inner-container { max-width: var(--ark-width--article); margin: 0 auto; } // 全幅の中の記事幅コンテンツの中の、さらに幅広なコンテンツの挙動 > .wp-block-cover__inner-container, &.has-background > .wp-block-group__inner-container, > .ark-block-container__inner, &:not([data-inner="full"]) > .ark-block-section__body > .ark-block-section__bodyInner { // さらにその中の全幅は、左右のpaddingまでに収まるように。 > .alignfull { left: calc(50% - ( 50vw - var(--ark-padding--container) )); width: calc(100vw - var(--ark-padding--container) * 2); } > .alignwide { --ark-alignwide_ex_width: revert; } } }