セクションレイアウト | モジュール一覧

t-sl_bp

.t-sl_bp {
	padding: 0 calc((100vw - #{$base_width}) / 2) 0 0;
	@include sp {
		padding: 0;
	}
	&.-reverse {
		padding: 0 0 0 calc((100vw - #{$base_width}) / 2);
	}
}

フルワイズで基本幅の右側に揃う余白

			<section class="l-section u-bg_trans" id="">
				<div class="l-fullwidth">

					<div class="l-block">		
						<div class="l-lrbox js-scroll_fadeup_order">
							<div class="l-lrbox__item -sp_clear">
								<div class="l-lrbox__l js-fadeup_child">
									<figure><img src="<?=HOME?>dist/img/dummy-p3.jpg" alt=""></figure>
								</div>
								<div class="l-lrbox__r js-fadeup_child">
									<div class="t-sl_bp">
										<h2 class="u-h2">フルワイズで基本幅の右側に揃う余白</h2>
										<div class="u-texts">
											<p>句読点を入て拾文字、ここまでで二拾文字。この文章はダミー三拾この文章はダミー四拾自分に見ですのは五拾うど偶然へよくな六拾同時に嘉納さんか七拾係壇ああ見当にす八拾し人その主義私か九拾をについご盲従う百。句読点込み百拾文字、ここまで百二拾文字。この文章はダミ百三拾この文章はダミ百四拾自分に見ですの百五拾うど偶然へよく百六拾同時に嘉納さん百七拾係壇ああ見当に百八拾し人その主義私百九拾をについご盲従弐百。</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>
			</section>

句読点を入て拾文字、ここまでで二拾文字。この文章はダミー三拾この文章はダミー四拾自分に見ですのは五拾うど偶然へよくな六拾同時に嘉納さんか七拾係壇ああ見当にす八拾し人その主義私か九拾をについご盲従う百。句読点込み百拾文字、ここまで百二拾文字。この文章はダミ百三拾この文章はダミ百四拾自分に見ですの百五拾うど偶然へよく百六拾同時に嘉納さん百七拾係壇ああ見当に百八拾し人その主義私百九拾をについご盲従弐百。

t-sl_bp -reverse

.t-sl_bp {
	padding: 0 calc((100vw - #{$base_width}) / 2) 0 0;
	@include sp {
		padding: 0;
	}
	&.-reverse {
		padding: 0 0 0 calc((100vw - #{$base_width}) / 2);
	}
}

フルワイズで基本幅の左側に揃う余白

			<section class="l-section u-bg_trans u-pt0" id="">
				<div class="l-fullwidth">

					<div class="l-block">		
						<div class="l-lrbox js-scroll_fadeup_order">
							<div class="l-lrbox__item"></div>
							<div class="l-lrbox__item -sp_clear">
								<div class="l-lrbox__l js-fadeup_child">
									<figure><img src="<?=HOME?>dist/img/dummy-p3.jpg" alt=""></figure>
								</div>
								<div class="l-lrbox__r js-fadeup_child">
									<div class="t-sl_bp -reverse">
										<h2 class="u-h2">フルワイズで基本幅の左側に揃う余白</h2>
										<div class="u-texts">
											<p>句読点を入て拾文字、ここまでで二拾文字。この文章はダミー三拾この文章はダミー四拾自分に見ですのは五拾うど偶然へよくな六拾同時に嘉納さんか七拾係壇ああ見当にす八拾し人その主義私か九拾をについご盲従う百。句読点込み百拾文字、ここまで百二拾文字。この文章はダミ百三拾この文章はダミ百四拾自分に見ですの百五拾うど偶然へよく百六拾同時に嘉納さん百七拾係壇ああ見当に百八拾し人その主義私百九拾をについご盲従弐百。</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>
			</section>