リグパーツ

<div class="tl_titbgbox res_mb">
	<div class="tltb_bgco">
		<div class="tltb_pccontainer"><h2 class="tltb_tit"><span>PASSIVE DESIGN</span>室温にコミットする家づくり</h2></div>
	</div>
	<div class="tltb_inner">
	<div class="tltb_resimg"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/passive_main.png" alt=""></div>
	<p class="tltb_minitit">LIG STYLE COMPANY の<br class="br-sp">パッシブデザイン</p>
	<p>断熱をしっかり施せば、快適な家になると思っていませんか？<br>実は、断熱だけでは快適な家にはなりません。<br>夏涼しく、冬暖かく、明るくて、風が通り抜ける快適な家にするために、<br>私たちが重要だと考えているのが『パッシブデザイン』です。 </p>
	</div>
</div>

<div class="tltb_pccontainer"><h2 class="tltb_tit"><span>PASSIVE DESIGN</span>室温にコミットする家づくり</h2></div>

</div>

<p class="tltb_minitit">LIG STYLE COMPANY の<br class="br-sp">パッシブデザイン</p>

<p>断熱をしっかり施せば、快適な家になると思っていませんか？<br>実は、断熱だけでは快適な家にはなりません。<br>夏涼しく、冬暖かく、明るくて、風が通り抜ける快適な家にするために、<br>私たちが重要だと考えているのが『パッシブデザイン』です。 </p>

</div>

PASSIVE見出し

991px以下では中央揃え、992px以上では右側に画像を入れるため右マージン45%・左中央揃えになります。
1200px以上では最大幅1140pxで「container」クラスと同じ幅になります。

このテキストを入力している欄と下のPASSIVE DESIGN部分は同じ幅になっているのにそろっていないように見えるのは、この欄が「col」のクラスで左右に15px分のパディングが入っているためです。

PASSIVE DESIGN室温にコミットする家づくり

html

	<div class="tltb_bgco">
		<div class="tltb_pccontainer"><h2 class="tltb_tit"><span>PASSIVE DESIGN</span>室温にコミットする家づくり</h2></div>
	</div>

<div class="tltb_pccontainer"><h2 class="tltb_tit"><span>PASSIVE DESIGN</span>室温にコミットする家づくり</h2></div>

</div>

css

/*見出し*/
.tltb_bgco{
	background-color: #222;
	padding-top: 3rem;
	padding-bottom: 7rem;
}
.tltb_tit{
	color: #fff;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}
.tltb_tit span{
	display: block;
	font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */
	font-size: 2.8rem;
	letter-spacing: 0.15rem;
}
@media screen and (min-width: 768px){
	.tltb_tit{
		font-size: 1.4rem;
	}
	.tltb_tit span{
		font-size: 4.8rem;
	}
}
@media screen and (min-width: 992px){
	.tltb_bgco{
		padding-right: 45%;
		padding-bottom: 3rem;
		text-align: left;
		padding-left: 5%;
	}
	.tltb_tit{
		display: inline-block;
	}
}
@media screen and (min-width: 1200px){
	.tltb_bgco{
		padding-right: 0;
		text-align: left;
		padding-left: 0;
	}
	.tltb_tit{
		display: inline-block;
	}
	.tltb_pccontainer{
		max-width: 1140px;
		margin-right: auto;
		margin-left: auto;
	}
}

/*見出し*/

.tltb_bgco{

background-color: #222;

padding-top: 3rem;

padding-bottom: 7rem;

}

.tltb_tit{

color: #fff;

font-size: 1rem;

font-weight: bold;

line-height: 1.4;

text-align: center;

}

.tltb_tit span{

display: block;

font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */

font-size: 2.8rem;

letter-spacing: 0.15rem;

}

@media screen and (min-width: 768px){

.tltb_tit{

font-size: 1.4rem;

}

.tltb_tit span{

font-size: 4.8rem;

}

@media screen and (min-width: 992px){

.tltb_bgco{

padding-right: 45%;

padding-bottom: 3rem;

text-align: left;

padding-left: 5%;

}

.tltb_tit{

display: inline-block;

}

@media screen and (min-width: 1200px){

.tltb_bgco{

padding-right: 0;

text-align: left;

padding-left: 0;

}

.tltb_tit{

display: inline-block;

}

.tltb_pccontainer{

max-width: 1140px;

margin-right: auto;

margin-left: auto;

}

PASSIVE画像

崩れているように見えますが、上の見出しや横のテキストが無い分高さが足りないため、このような状態になっています。
必要な高さ分のテキスト、もしくは必要な高さになるくらいにパディングなどを追加して高さを取るか、画像のサイズ自体を調整すればうまく使えるかと思います。

991px以下では上の見出し背景色に被せるために上マージンをマイナス、992px以上では画像を右側に配置するためポジションabsoluteで位置を指定しています。

html

<div class="tl_titbgbox res_mb">
	<div class="tltb_inner">
	<div class="tltb_resimg"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/passive_main.png" alt=""></div>
	</div>
</div>

</div>

css

/*共通*/
.tl_titbgbox{
	position: relative;
}
.tltb_inner{
	padding-right: 5%;
	padding-left: 5%;
}
@media screen and (min-width: 1200px){
	.tltb_inner{
		padding-right: 0;
		padding-left: 0;
		max-width: 1140px;
		margin-right: auto;
		margin-left: auto;
	}
}
/*画像*/
.tltb_resimg{
	margin-top: -5.5rem;
	max-width: 500px;
	margin-right: auto;
	margin-left: auto;
}
.tltb_resimg img{
	max-width: 100%;
	height: auto;
}
@media screen and (min-width: 992px){
	.tltb_resimg{
		position: absolute;
		margin-top: 0;
		top: 3.8rem;
		right: 10%;
		width: 33%;
		max-width: 600px;
	}
}

/*共通*/

.tl_titbgbox{

position: relative;

}

.tltb_inner{

padding-right: 5%;

padding-left: 5%;

}

@media screen and (min-width: 1200px){

.tltb_inner{

padding-right: 0;

padding-left: 0;

max-width: 1140px;

margin-right: auto;

margin-left: auto;

}

/*画像*/

.tltb_resimg{

margin-top: -5.5rem;

max-width: 500px;

margin-right: auto;

margin-left: auto;

}

.tltb_resimg img{

max-width: 100%;

height: auto;

}

@media screen and (min-width: 992px){

.tltb_resimg{

position: absolute;

margin-top: 0;

top: 3.8rem;

right: 10%;

width: 33%;

max-width: 600px;

}

PASSIVEタイトル

PASSIVE用に作ったタイトルです。

LIG STYLE COMPANY の
パッシブデザイン

html

<p class="tltb_minitit">LIG STYLE COMPANY の<br class="br-sp">パッシブデザイン</p>

1	<p class="tltb_minitit">LIG STYLE COMPANY の<br class="br-sp">パッシブデザイン</p>

css

/*テキスト*/
.tltb_minitit{
	font-weight: bold;
	font-size: 1.4rem;
	margin-top: 3rem;
}

/*テキスト*/

.tltb_minitit{

font-weight: bold;

font-size: 1.4rem;

margin-top: 3rem;

}

背景画像テキスト入れ替え

背景画像部分の高さは991px以下では最小200px、992px以上では最小400pxです。
もしテキスト側の高さが400px以内で収まるなら全部の高さが揃って見えて見栄えが良いかと思います。

順番の入れ替えはbootstrap4の順番入れ替えクラスで行っています。
スマホで画像とテキストの順番を逆にもできます。

高性能な家

夏は涼しく、冬は暖かく。
1年中快適な生活が送れる高断熱高気密な住宅です。
断熱性を高めることで省エネにも繋がり、光熱費の節約にも。

安心のメンテナンスプラン

経年劣化によるトラブルが発生しにくい方法で設計し、
素材の選択基準として20年30年後も現状復帰しやすい家を提案しています。

html

<div class="tl_order_bgimg">
	<div class="tl_ob1 tlob_img1"></div>
	<div class="tl_ob2">
		<h3 class="tl_obtit">高性能な家</h3>
		<p>夏は涼しく、冬は暖かく。<br>1年中快適な生活が送れる高断熱高気密な住宅です。<br>断熱性を高めることで省エネにも繋がり、光熱費の節約にも。</p>
		<p class="txt-right"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/trip_feat01.png" alt=""></p>
	</div>
</div>

<div class="tl_order_bgimg">
	<div class="tl_ob1 tlob_img2 order-lg-2"></div>
	<div class="tl_ob2 order-lg-1">
		<h3 class="tl_obtit">安心のメンテナンスプラン</h3>
		<p>経年劣化によるトラブルが発生しにくい方法で設計し、<br>素材の選択基準として20年30年後も現状復帰しやすい家を提案しています。</p>
		<p class="txt-right"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/trip_feat02.png" alt=""></p>
	</div>
</div>

<h3 class="tl_obtit">高性能な家</h3>

<p>夏は涼しく、冬は暖かく。<br>1年中快適な生活が送れる高断熱高気密な住宅です。<br>断熱性を高めることで省エネにも繋がり、光熱費の節約にも。</p>

</div>

<h3 class="tl_obtit">安心のメンテナンスプラン</h3>

<p>経年劣化によるトラブルが発生しにくい方法で設計し、<br>素材の選択基準として20年30年後も現状復帰しやすい家を提案しています。</p>

</div>

css

/*共通*/
.tl_order_bgimg{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}
@media screen and (min-width: 992px){
	.tl_order_bgimg{
		margin-bottom: 3rem;
	}
}
/*背景画像*/
.tl_ob1{
	width: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	min-height: 200px;
}
@media screen and (min-width: 992px){
	.tl_ob1{
		width: 50%;
		min-height: 400px;
	}
}
/*画像指定*/
.tlob_img1{
	background-image: url("../images/page/trip-01.jpg");
}
.tlob_img2{
	background-image: url("../images/page/trip-02.jpg");
}
/*テキスト*/
.tl_ob2{
	padding: 2rem 5%;
	width: 100%;
}
.tl_obtit{
	font-weight: bold;
	font-size: 1.4rem;
	margin-bottom: 1rem;
}
@media screen and (min-width: 992px){
	.tl_ob2{
		width: 50%;
		display: flex;
		align-items: center;
		align-content: center;
		flex-wrap: wrap;
	}
	.tl_obtit{
		width: 100%;
	}
	.tl_ob2 p{
		width: 100%;
	}
}

/*共通*/

.tl_order_bgimg{

display: flex;

flex-wrap: wrap;

margin-bottom: 1rem;

}

@media screen and (min-width: 992px){

.tl_order_bgimg{

margin-bottom: 3rem;

}

/*背景画像*/

.tl_ob1{

width: 100%;

background-repeat: no-repeat;

background-position: center;

background-size: cover;

min-height: 200px;

}

@media screen and (min-width: 992px){

.tl_ob1{

width: 50%;

min-height: 400px;

}

/*画像指定*/

.tlob_img1{

}

.tlob_img2{

}

/*テキスト*/

.tl_ob2{

padding: 2rem 5%;

width: 100%;

}

.tl_obtit{

font-weight: bold;

font-size: 1.4rem;

margin-bottom: 1rem;

}

@media screen and (min-width: 992px){

.tl_ob2{

width: 50%;

display: flex;

align-items: center;

align-content: center;

flex-wrap: wrap;

}

.tl_obtit{

width: 100%;

}

.tl_ob2 p{

width: 100%;

}

背景画像見出し

背景画像の上に見出しがあります。

デザインプラン

html

<h2 class="tl_bg_box_tit"><span>デザインプラン</span></h2>

1	<h2 class="tl_bg_box_tit"><span>デザインプラン</span></h2>

css

.tl_bg_box_tit {
  background-image: url("../images/page/trip-info.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  padding-top: 4rem;
  padding-bottom: 4rem;
	text-align: center;
	font-weight: bold;
	font-size: 1.8rem;
	position: relative;
}
.tl_bg_box_tit span{
	display: inline-block;
	position: relative;
}
@media screen and (min-width: 992px){
	.tl_bg_box_tit{
		padding-top: 8rem;
		padding-bottom: 8rem;
		font-size: 2.4rem;
	}
}

.tl_bg_box_tit {

background-repeat: no-repeat;

background-size: cover;

background-position: center;

width: 100%;

padding-top: 4rem;

padding-bottom: 4rem;

text-align: center;

font-weight: bold;

font-size: 1.8rem;

position: relative;

}

.tl_bg_box_tit span{

display: inline-block;

position: relative;

}

@media screen and (min-width: 992px){

.tl_bg_box_tit{

padding-top: 8rem;

padding-bottom: 8rem;

font-size: 2.4rem;

}

ついでにオプションのクラスも作成しました。
「tl_bg_box_tit」に「tl_bbt_cw」を追記します。
背景画像上に半透明の黒背景色を追加、テキストの色を白に、見出し下に白のボーダーを追加しています。
下の白ボーダーは要らなければafterを消してください。

デザインプラン

html

<h2 class="tl_bg_box_tit tl_bbt_cw"><span>デザインプラン</span></h2>

1	<h2 class="tl_bg_box_tit tl_bbt_cw"><span>デザインプラン</span></h2>

css

/*飾りテキスト白*/
.tl_bg_box_tit.tl_bbt_cw{
	color: #fff;
}
.tl_bg_box_tit.tl_bbt_cw::before{
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.50)
}
.tl_bg_box_tit.tl_bbt_cw span{
	padding-top: 1rem;
}
.tl_bg_box_tit.tl_bbt_cw span::after{
	content: " ";
	display: block;
	height: 1px;
	width: 80px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	background-color: #fff;
	margin-top: 1rem;
}

/*飾りテキスト白*/

.tl_bg_box_tit.tl_bbt_cw{

color: #fff;

}

.tl_bg_box_tit.tl_bbt_cw::before{

content: " ";

display: block;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0,0,0,0.50)

}

.tl_bg_box_tit.tl_bbt_cw span{

padding-top: 1rem;

}

.tl_bg_box_tit.tl_bbt_cw span::after{

content: " ";

display: block;

height: 1px;

width: 80px;

text-align: center;

margin-right: auto;

margin-left: auto;

background-color: #fff;

margin-top: 1rem;

}

オプションのクラス2です。
「tl_bg_box_tit」に「tl_bbt_cb」を追記します。
背景画像上に半透明の白背景色を追加、見出し下に黒のボーダーを追加しています。
下の黒ボーダーは要らなければafterを消してください。

デザインプラン

html

<h2 class="tl_bg_box_tit tl_bbt_cb"><span>デザインプラン</span></h2>

1	<h2 class="tl_bg_box_tit tl_bbt_cb"><span>デザインプラン</span></h2>

css

/*飾りテキスト黒*/
.tl_bg_box_tit.tl_bbt_cb{
	color: #000;
}
.tl_bg_box_tit.tl_bbt_cb::before{
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.50)
}
.tl_bg_box_tit.tl_bbt_cb span{
	padding-top: 1rem;
}
.tl_bg_box_tit.tl_bbt_cb span::after{
	content: " ";
	display: block;
	height: 1px;
	width: 80px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	background-color: #000;
	margin-top: 1rem;
}

/*飾りテキスト黒*/

.tl_bg_box_tit.tl_bbt_cb{

color: #000;

}

.tl_bg_box_tit.tl_bbt_cb::before{

content: " ";

display: block;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(255,255,255,0.50)

}

.tl_bg_box_tit.tl_bbt_cb span{

padding-top: 1rem;

}

.tl_bg_box_tit.tl_bbt_cb span::after{

content: " ";

display: block;

height: 1px;

width: 80px;

text-align: center;

margin-right: auto;

margin-left: auto;

background-color: #000;

margin-top: 1rem;

}

連動スライダー

メインの画像とサムネイル画像が連動します。
使用するには対応するjsを読み込んでください。
サムネイルの選択されている画像は元の色になります。

CLEAR
SMOKE
LATTE
R GRAY

html

<div class="tl_linkage_slider res_mb">
  <ul class="slider tl_thumb-item">
    <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_clear.jpg" alt=""></li>
    <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_smoke.jpg" alt=""></li>
    <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_latte.jpg" alt=""></li>
    <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_rgray.jpg" alt=""></li>
  </ul>
<ul class="slider tl_thumb-item-nav">
    <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_clear2.jpg" alt="">
	<p>CLEAR</p></li>
    <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_smoke2.jpg" alt="">
	<p>SMOKE</p></li>
    <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_latte2.jpg" alt="">
	<p>LATTE</p></li>
    <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_rgray2.jpg" alt="">
	<p>R GRAY</p></li>
</ul>
</div>

</ul>

<p>CLEAR</p></li>

<p>SMOKE</p></li>

<p>LATTE</p></li>

</ul>

</div>

.tl_linkage_slider{
	width: 100%;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
/*メイン*/	
.tl_thumb-item{
	margin-bottom: 2rem;
}
.tl_thumb-item li{
	margin-right: 1rem;
	margin-left: 1rem;
}
.tl_thumb-item li{
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}
@media screen and (min-width: 992px){
	.tl_thumb-item{
		margin-bottom: 3rem;
	}
	.tl_thumb-item li{
		margin-right: 1.5rem;
		margin-left: 1.5rem;
	}
}
/*サムネイル*/
.tl_thumb-item-nav{
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}
.tl_thumb-item-nav li{
	margin-right: 0.5rem;
	margin-left: 0.5rem;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}
.tl_thumb-item-nav li.slick-current{
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}
@media screen and (min-width: 992px){
	.tl_thumb-item-nav li{
		margin-right: 1rem;
		margin-left: 1rem;
	}
}

.tl_linkage_slider{

width: 100%;

max-width: 1000px;

margin-right: auto;

margin-left: auto;

}

/*メイン*/

.tl_thumb-item{

margin-bottom: 2rem;

}

.tl_thumb-item li{

margin-right: 1rem;

margin-left: 1rem;

}

.tl_thumb-item li{

-webkit-filter: grayscale(0);

filter: grayscale(0);

}

@media screen and (min-width: 992px){

.tl_thumb-item{

margin-bottom: 3rem;

}

.tl_thumb-item li{

margin-right: 1.5rem;

margin-left: 1.5rem;

}

/*サムネイル*/

.tl_thumb-item-nav{

width: 80%;

margin-right: auto;

margin-left: auto;

}

.tl_thumb-item-nav li{

margin-right: 0.5rem;

margin-left: 0.5rem;

-webkit-filter: grayscale(100%);

filter: grayscale(100%);

}

.tl_thumb-item-nav li.slick-current{

-webkit-filter: grayscale(0);

filter: grayscale(0);

}

@media screen and (min-width: 992px){

.tl_thumb-item-nav li{

margin-right: 1rem;

margin-left: 1rem;

}

カスタマイズ

3-STEP PLANで選んだデザインで建てたモデルハウスを2邸ご紹介！
あなたのライフスタイルに合う最適なプラン・断熱性能・カタチをお選びください。

TYPE:C-2

スタンダード

シカク

家族との将来を考えた
変化に柔軟な間取りに

リビングに家族が自然と集まるような家を作りたい。
子供の成長に合わせて柔軟に変化できる家にしたい。
そんな思いからリビングがメインの間取り「TYPE:C-2」をチョイス。
リビングとキッチンが繋がっているので、1階のどこにいても家族の会話を感じることができます。

本体価格

（例）1,670万円〜

（税込価格）1,837万円〜

TYPE:A-5

スタンダード

シカク

吹抜と大開口による
非日常的な空間

ベースとなる間取りは「TYPE:A-5」。連続窓が特徴的な外観。
1陪から2階まで繋がる吹抜により、非日常的な解放感と採光を確保。
また、2階に設けたサンルームは、日々の家事負担を軽減。
ついつい人を招きたくなるような、そんな家です。

本体価格

（例）1,830万円〜

（税込価格）2,013万円〜

html

<div class="tl_bgimgbox_co bdt_arrow">
	<div class="container2">
		<div class="row">
			<div class="col-12">
				<h3 class="tl_rl_linetit"><span>カスタマイズ</span></h3>
				<p class="txt-center m40-bottom">3-STEP PLANで選んだデザインで建てた モデルハウスを2邸ご紹介！<br>あなたのライフスタイルに合う最適なプラン・断熱性能・カタチをお選びください。</p>
			</div>
		</div>
		
		<div class="tl_bgimgbox tlb_l">
			<div class="tl_bgi_i tl_bgii1"></div>
			<div class="tl_bgi_tw">
				<div class="tl_formula">
					<div class="tl_fwaku">TYPE:C-2</div>
					<div class="tl_fkigo">&times;</div>
					<div class="tl_fwaku">スタンダード</div>
					<div class="tl_fkigo">&times;</div>
					<div class="tl_fwaku">シカク</div>
				</div>
				<p class="tl_obtit">家族との将来を考えた<br class="br-sp">変化に柔軟な間取りに</p>
				<p>リビングに家族が自然と集まるような家を作りたい。<br>子供の成長に合わせて柔軟に変化できる家にしたい。<br>そんな思いからリビングがメインの間取り「TYPE:C-2」をチョイス。<br>リビングとキッチンが繋がっているので、1階のどこにいても家族の会話を感じることができます。</p>
				<div class="tl_bgi_kakaku">
					<p class="tl_bgik_tit">本体価格</p>
					<p class="tl_bgik_txt">（例）<span>1,670</span>万円〜</p>
				</div>
				<p class="txt-right">（税込価格）1,837万円〜</p>
			</div>
		</div>
		
		<div class="tl_bgimgbox tlb_r mb-0">
			<div class="tl_bgi_i tl_bgii2"></div>
			<div class="tl_bgi_tw">
				<div class="tl_formula">
					<div class="tl_fwaku">TYPE:A-5</div>
					<div class="tl_fkigo">&times;</div>
					<div class="tl_fwaku">スタンダード</div>
					<div class="tl_fkigo">&times;</div>
					<div class="tl_fwaku">シカク</div>
				</div>
				<p class="tl_obtit">吹抜と大開口による<br class="br-sp">非日常的な空間</p>
				<p>ベースとなる間取りは「TYPE:A-5」。連続窓が特徴的な外観。<br>1陪から2階まで繋がる吹抜により、非日常的な解放感と採光を確保。<br>また、2階に設けたサンルームは、日々の家事負担を軽減。<br>ついつい人を招きたくなるような、そんな家です。</p>
				<div class="tl_bgi_kakaku">
					<p class="tl_bgik_tit">本体価格</p>
					<p class="tl_bgik_txt">（例）<span>1,830</span>万円〜</p>
				</div>
				<p class="txt-right">（税込価格）2,013万円〜</p>
			</div>
		</div>
	</div>
</div>

<h3 class="tl_rl_linetit"><span>カスタマイズ</span></h3>

<p class="txt-center m40-bottom">3-STEP PLANで選んだデザインで建てたモデルハウスを2邸ご紹介！<br>あなたのライフスタイルに合う最適なプラン・断熱性能・カタチをお選びください。</p>

</div>

<div class="tl_fwaku">スタンダード</div>

</div>

<p class="tl_obtit">家族との将来を考えた<br class="br-sp">変化に柔軟な間取りに</p>

<p>リビングに家族が自然と集まるような家を作りたい。<br>子供の成長に合わせて柔軟に変化できる家にしたい。<br>そんな思いからリビングがメインの間取り「TYPE:C-2」をチョイス。<br>リビングとキッチンが繋がっているので、1階のどこにいても家族の会話を感じることができます。</p>

</div>

</div>

<div class="tl_fwaku">スタンダード</div>

</div>

<p class="tl_obtit">吹抜と大開口による<br class="br-sp">非日常的な空間</p>

<p>ベースとなる間取りは「TYPE:A-5」。連続窓が特徴的な外観。<br>1陪から2階まで繋がる吹抜により、非日常的な解放感と採光を確保。<br>また、2階に設けたサンルームは、日々の家事負担を軽減。<br>ついつい人を招きたくなるような、そんな家です。</p>

</div>

</div>

下before

全体を囲む枠のクラス（今回はtl_bgimgbox_co）に「bdt_arrow」を追記してください。
「bdt_arrow」のbeforeで作成しています。
beforeの上ボーダーの色は、枠の上のコンテンツの背景色と同じにしてください。

html

<div class="tl_bgimgbox_co bdt_arrow">
</div>

1 2	<div class="tl_bgimgbox_co bdt_arrow"> </div>

css

.bdt_arrow{
	position: relative;
	overflow: hidden;
	padding-top: 6rem!important;
}
.bdt_arrow::before{
	content: " ";
	display: inline-block;
	width: 100%;
	border-top: 3rem #fff solid;
	border-right: 50.5vw transparent solid;
	border-bottom: 0 transparent solid;
	border-left: 50.5vw transparent solid;
	position: absolute;
	top: -1px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
}
.bdt_arrow *{
	position: relative;
	z-index: 1;
}
@media screen and (min-width: 992px){
	.bdt_arrow{
		padding-top: 14rem!important;
	}
	.bdt_arrow::before{
		border-top: 8rem #fff solid;
	}
}

.bdt_arrow{

position: relative;

overflow: hidden;

padding-top: 6rem!important;

}

.bdt_arrow::before{

content: " ";

display: inline-block;

width: 100%;

border-top: 3rem #fff solid;

border-right: 50.5vw transparent solid;

border-bottom: 0 transparent solid;

border-left: 50.5vw transparent solid;

position: absolute;

top: -1px;

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

.bdt_arrow *{

position: relative;

z-index: 1;

}

@media screen and (min-width: 992px){

.bdt_arrow{

padding-top: 14rem!important;

}

.bdt_arrow::before{

border-top: 8rem #fff solid;

}

カスタマイズ見出し

カスタマイズ部分用に作成した見出しです。
左右のボーダーはbeforeとafterで作成しています。

カスタマイズ

html

<h3 class="tl_rl_linetit"><span>カスタマイズ</span></h3>

1	<h3 class="tl_rl_linetit"><span>カスタマイズ</span></h3>

css

.tl_rl_linetit{
	text-align: center;
	font-weight: bold;
	font-size: 1.4rem;
	margin-bottom: 2rem;
}
.tl_rl_linetit span{
	position: relative;
	display: inline-block;
	margin-right: auto;
	margin-left: auto;
	padding-right: 2rem;
	padding-left: 2rem;
}
.tl_rl_linetit span::before,.tl_rl_linetit span::after{
	content: " ";
	display: block;
	position: absolute;
	background-color: #000;
	height: 1px;
	width: 1rem;
	top: 50%;
}
.tl_rl_linetit span::before{
	left: 0;
}
.tl_rl_linetit span::after{
	right: 0;
}
@media screen and (min-width: 992px){
	.tl_rl_linetit{
		font-size: 1.6rem;
	}
}

.tl_rl_linetit{

text-align: center;

font-weight: bold;

font-size: 1.4rem;

margin-bottom: 2rem;

}

.tl_rl_linetit span{

position: relative;

display: inline-block;

margin-right: auto;

margin-left: auto;

padding-right: 2rem;

padding-left: 2rem;

}

.tl_rl_linetit span::before,.tl_rl_linetit span::after{

content: " ";

display: block;

position: absolute;

background-color: #000;

height: 1px;

width: 1rem;

top: 50%;

}

.tl_rl_linetit span::before{

left: 0;

}

.tl_rl_linetit span::after{

right: 0;

}

@media screen and (min-width: 992px){

.tl_rl_linetit{

font-size: 1.6rem;

}

カスタマイズ背景画像とテキスト

背景画像とテキストが互い違いに並んでいきます。
画像を左に配置する場合は「tlb_l」、画像を右に配置する場合は「tlb_r」を「tl_bgimgbox」に追記してください。

背景画像は「tl_bgi_i」のクラスに別のクラスを付けて指定してください。

一番下の「tl_bgimgbox」の下マージンが要らない場合は「mb-0」を追記してください。
bootstrap4に搭載されている下マージンを0にするクラスです。

TYPE:C-2

スタンダード

シカク

家族との将来を考えた
変化に柔軟な間取りに

本体価格

（例）1,670万円〜

（税込価格）1,837万円〜

TYPE:A-5

スタンダード

シカク

吹抜と大開口による
非日常的な空間

本体価格

（例）1,830万円〜

（税込価格）2,013万円〜

html

<div class="tl_bgimgbox_co">
	<div class="container2">
		<div class="tl_bgimgbox tlb_l">
			<div class="tl_bgi_i tl_bgii1"></div>
			<div class="tl_bgi_tw">
				<div class="tl_formula">
					<div class="tl_fwaku">TYPE:C-2</div>
					<div class="tl_fkigo">&times;</div>
					<div class="tl_fwaku">スタンダード</div>
					<div class="tl_fkigo">&times;</div>
					<div class="tl_fwaku">シカク</div>
				</div>
				<p class="tl_obtit">家族との将来を考えた<br class="br-sp">変化に柔軟な間取りに</p>
				<p>リビングに家族が自然と集まるような家を作りたい。<br>子供の成長に合わせて柔軟に変化できる家にしたい。<br>そんな思いからリビングがメインの間取り「TYPE:C-2」をチョイス。<br>リビングとキッチンが繋がっているので、1階のどこにいても家族の会話を感じることができます。</p>
				<div class="tl_bgi_kakaku">
					<p class="tl_bgik_tit">本体価格</p>
					<p class="tl_bgik_txt">（例）<span>1,670</span>万円〜</p>
				</div>
				<p class="txt-right">（税込価格）1,837万円〜</p>
			</div>
		</div>
		
		<div class="tl_bgimgbox tlb_r mb-0">
			<div class="tl_bgi_i tl_bgii2"></div>
			<div class="tl_bgi_tw">
				<div class="tl_formula">
					<div class="tl_fwaku">TYPE:A-5</div>
					<div class="tl_fkigo">&times;</div>
					<div class="tl_fwaku">スタンダード</div>
					<div class="tl_fkigo">&times;</div>
					<div class="tl_fwaku">シカク</div>
				</div>
				<p class="tl_obtit">吹抜と大開口による<br class="br-sp">非日常的な空間</p>
				<p>ベースとなる間取りは「TYPE:A-5」。連続窓が特徴的な外観。<br>1陪から2階まで繋がる吹抜により、非日常的な解放感と採光を確保。<br>また、2階に設けたサンルームは、日々の家事負担を軽減。<br>ついつい人を招きたくなるような、そんな家です。</p>
				<div class="tl_bgi_kakaku">
					<p class="tl_bgik_tit">本体価格</p>
					<p class="tl_bgik_txt">（例）<span>1,830</span>万円〜</p>
				</div>
				<p class="txt-right">（税込価格）2,013万円〜</p>
			</div>
		</div>
	</div>
</div>

<div class="tl_fwaku">スタンダード</div>

</div>

<p class="tl_obtit">家族との将来を考えた<br class="br-sp">変化に柔軟な間取りに</p>

</div>

</div>

<div class="tl_fwaku">スタンダード</div>

</div>

<p class="tl_obtit">吹抜と大開口による<br class="br-sp">非日常的な空間</p>

</div>

</div>

css

/*共通*/
.tl_bgimgbox_co{
	padding-bottom: 4rem;
	padding-top: 4rem;
	background-color: #e3e3e2;
}
.tl_bgimgbox{
	width: 100%;
	padding-top: 145px;
	position: relative;
	margin-bottom: 3rem;
}
.tl_bgi_i{
	position: absolute;
	top: 0;
	width: 100%;
	min-height: 190px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.tl_bgi_tw{
	background-color: #fff;
	padding: 5%;
	width: 90%;
	position: relative;
}
@media screen and (min-width: 768px){
	.tl_bgimgbox{
		padding-top: 280px;
	}
	.tl_bgi_i{
		min-height: 340px;
	}
}
@media screen and (min-width: 992px){
	.tl_bgimgbox_co{
		padding-bottom: 7rem;
		padding-top: 7rem;
	}
	.tl_bgimgbox{
		padding-top: 3rem;
		padding-bottom: 3rem;
		margin-bottom: 4.5rem;
	}
	.tl_bgi_i{
		min-height: 340px;
		height: 100%;
		width: 70%;
	}
	.tl_bgi_tw{
		width: 60%;
		padding: 3rem 5% 2rem;
	}
}
@media screen and (min-width: 1200px){
	.tl_bgimgbox{
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	.tl_bgi_i{
		min-height: 340px;
		height: 100%;
		width: 60%;
	}
	.tl_bgi_tw{
		width: 46%;
	}
}
/*背景画像指定*/
.tl_bgii1{
	background-image: url("../images/page/customize_01_00.jpg");
}
.tl_bgii2{
	background-image: url("../images/page/customize_02_00.jpg");
}
/*画像左配置*/
.tlb_l .tl_bgi_i{
	left: 0;
}
@media screen and (min-width: 992px){
	.tlb_l .tl_bgi_tw{
		margin-left: auto;
	}
}
/*画像右配置*/
.tlb_r .tl_bgi_i{
	right: 0;
}
.tlb_r .tl_bgi_tw{
	margin-left: auto;
}
@media screen and (min-width: 992px){
	.tlb_r .tl_bgi_tw{
		margin-left: 0;
		margin-right: auto;
	}
}
/*計算式のような*/
.tl_formula{
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
	max-width: 300px;
}
.tl_fwaku{
	width: 28.333%;
	border: 1px #000 solid;
	text-align: center;
	font-size: 0.7rem;
}
.tl_fkigo{
	width: 7.5%;
	text-align: center;
	font-size: 1rem;
}
@media screen and (min-width: 992px){
	.tl_formula{
		max-width: 400px;
	}
	.tl_fwaku{
		font-size: 1rem;
	}
}
/*価格*/
.tl_bgi_kakaku{
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	border-bottom: 2px #000 solid;
	padding-bottom: 0.8rem;
	margin-bottom: 0.5rem;
	padding-top: 1rem;
}
.tl_bgi_kakaku p{
	margin-bottom: 0;
}
.tl_bgik_tit{
	background-color: #000;
	color: #fff;
	padding-right: 0.5rem;
	padding-left: 0.5rem;
}
.tl_bgik_txt{
	line-height: 1;
}
.tl_bgik_txt span{
	font-weight: bold;
	font-size: 2.6rem;
}
@media screen and (min-width: 992px){
	.tl_bgik_txt span{
		font-size: 3.6rem;
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

/*共通*/

.tl_bgimgbox_co{

padding-bottom: 4rem;

padding-top: 4rem;

background-color: #e3e3e2;

}

.tl_bgimgbox{

width: 100%;

padding-top: 145px;

position: relative;

margin-bottom: 3rem;

}

.tl_bgi_i{

position: absolute;

top: 0;

width: 100%;

min-height: 190px;

background-repeat: no-repeat;

background-position: center;

background-size: cover;

}

.tl_bgi_tw{

background-color: #fff;

padding: 5%;

width: 90%;

position: relative;

}

@media screen and (min-width: 768px){

.tl_bgimgbox{

padding-top: 280px;

}

.tl_bgi_i{

min-height: 340px;

}

@media screen and (min-width: 992px){

.tl_bgimgbox_co{

padding-bottom: 7rem;

padding-top: 7rem;

}

.tl_bgimgbox{

padding-top: 3rem;

padding-bottom: 3rem;

margin-bottom: 4.5rem;

}

.tl_bgi_i{

min-height: 340px;

height: 100%;

width: 70%;

}

.tl_bgi_tw{

width: 60%;

padding: 3rem 5% 2rem;

}

@media screen and (min-width: 1200px){

.tl_bgimgbox{

padding-top: 3rem;

padding-bottom: 3rem;

}

.tl_bgi_i{

min-height: 340px;

height: 100%;

width: 60%;

}

.tl_bgi_tw{

width: 46%;

}

/*背景画像指定*/

.tl_bgii1{

}

.tl_bgii2{

}

/*画像左配置*/

.tlb_l .tl_bgi_i{

left: 0;

}

@media screen and (min-width: 992px){

.tlb_l .tl_bgi_tw{

margin-left: auto;

}

/*画像右配置*/

.tlb_r .tl_bgi_i{

right: 0;

}

.tlb_r .tl_bgi_tw{

margin-left: auto;

}

@media screen and (min-width: 992px){

.tlb_r .tl_bgi_tw{

margin-left: 0;

margin-right: auto;

}

/*計算式のような*/

.tl_formula{

display: flex;

align-items: center;

margin-bottom: 1rem;

max-width: 300px;

}

.tl_fwaku{

width: 28.333%;

border: 1px #000 solid;

text-align: center;

font-size: 0.7rem;

}

.tl_fkigo{

width: 7.5%;

text-align: center;

font-size: 1rem;

}

@media screen and (min-width: 992px){

.tl_formula{

max-width: 400px;

}

.tl_fwaku{

font-size: 1rem;

}

/*価格*/

.tl_bgi_kakaku{

display: flex;

align-items: flex-end;

justify-content: flex-end;

border-bottom: 2px #000 solid;

padding-bottom: 0.8rem;

margin-bottom: 0.5rem;

padding-top: 1rem;

}

.tl_bgi_kakaku p{

margin-bottom: 0;

}

.tl_bgik_tit{

background-color: #000;

color: #fff;

padding-right: 0.5rem;

padding-left: 0.5rem;

}

.tl_bgik_txt{

line-height: 1;

}

.tl_bgik_txt span{

font-weight: bold;

font-size: 2.6rem;

}

@media screen and (min-width: 992px){

.tl_bgik_txt span{

font-size: 3.6rem;

}

スクロールスライダー

ずっとスクロールし続けるスライダーです。
使用する場合は対応するjsを読み込んでください。
js側での設定枚数よりhtml側の画像枚数が少ないと動きません。

html

        <ul class="scroll-slider">
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_clear.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_smoke.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_latte.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_rgray.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_clear.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_smoke.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_latte.jpg" alt=""></li>
          <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_rgray.jpg" alt=""></li>
        </ul>

</ul>

css

.scroll-slider{
	margin-bottom: 0;
	width: 100%;
}
.scroll-slider li img{
	max-width: 100%;
	height: auto;
}

.scroll-slider{

margin-bottom: 0;

width: 100%;

}

.scroll-slider li img{

max-width: 100%;

height: auto;

}

部分的に背景色

部分的に背景色がかかります。
「background-size」を調整すれば背景色のかかる部分を変更できます。

大切な家族と
笑いあって過ごせる暮らし

家族が毎日笑顔で暮らしていくために、
日々の暮らしを守る家は
見た目はもちろん、構造にもこだわりたい。
私たちはそんな家を造っています。

html

<div class="tl_bgco_half">
	<div class="container">
		<div class="row">
			<div class="col-12 col-md-6 m20-bottom"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/color_clear.jpg" alt=""></div>
			<div class="col-12 col-md-6">
				<div class="row h-100 align-items-center">
					<div class="col">
				<p class="tl_obtit">大切な家族と<br>笑いあって過ごせる暮らし</p>
				<p>家族が毎日笑顔で暮らしていくために、<br>日々の暮らしを守る家は<br>見た目はもちろん、構造にもこだわりたい。<br>私たちはそんな家を造っています。</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<p class="tl_obtit">大切な家族と<br>笑いあって過ごせる暮らし</p>

<p>家族が毎日笑顔で暮らしていくために、<br>日々の暮らしを守る家は<br>見た目はもちろん、構造にもこだわりたい。<br>私たちはそんな家を造っています。</p>

</div>

css

.tl_bgco_half{
	padding-bottom: 2rem;
	background-image: linear-gradient(#eee,#eee);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 100% 85%;
}
@media screen and (min-width: 992px){
	.tl_bgco_half{
		padding-bottom: 3rem;
	}
}

.tl_bgco_half{

padding-bottom: 2rem;

background-position: center bottom;

background-repeat: no-repeat;

background-size: 100% 85%;

}

@media screen and (min-width: 992px){

.tl_bgco_half{

padding-bottom: 3rem;

}

背景色見出しとテキスト

見出し下の英字はafterで入れています。
afterではなくても、「tl_bt_tit」の中に「span」とかで囲んで英字を入れてafterに使っている「content」以外のプロパティを指定すれば同じような状態にできます。

家づくりはバランスが大事

家を建てるとき、外観や内装・・・こだわりたいことはたくさんありますよね。
でも、それで予算がオーバーして住み始めてからの暮らしが圧迫されては元も子もありません。
自分たちのこだわりはあるていど残しつつ、価格はリーズナブルに。
そんな家づくりをご提案します。

html

<div class="tl_bgco_titcon">
	<div class="container">
	<h2 class="tl_bt_tit">家づくりはバランスが大事</h2>
	<p>家を建てるとき、外観や内装・・・こだわりたいことはたくさんありますよね。<br>でも、それで予算がオーバーして住み始めてからの暮らしが圧迫されては元も子もありません。<br>自分たちのこだわりはあるていど残しつつ、価格はリーズナブルに。<br>そんな家づくりをご提案します。</p>
	</div>
</div>

<h2 class="tl_bt_tit">家づくりはバランスが大事</h2>

<p>家を建てるとき、外観や内装・・・こだわりたいことはたくさんありますよね。<br>でも、それで予算がオーバーして住み始めてからの暮らしが圧迫されては元も子もありません。<br>自分たちのこだわりはあるていど残しつつ、価格はリーズナブルに。<br>そんな家づくりをご提案します。</p>

</div>

css

.tl_bgco_titcon{
	background-color: #e0ddd6;
	padding-top: 3rem;
	padding-bottom: 2rem;
	text-align: center;
	margin-bottom: 3rem;
}
.tl_bt_tit{
	font-weight: bold;
	font-size: 1.4rem;
	position: relative;
	display: inline-block;
	margin-bottom: 2rem;
	z-index: 1;
}
.tl_bt_tit::after{
	content: "Important things";
	font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */
	color: #d4cebf;
	position: absolute;
	bottom: -1.5rem;
	right: -1.5rem;
	font-size: 1.6rem;
	z-index: -1;
}
@media screen and (min-width: 992px){
	.tl_bgco_titcon{
		padding-top: 4rem;
		padding-bottom: 3rem;
		margin-bottom: 4rem;
	}
	.tl_bt_tit{
		font-size: 1.8rem;
	}
}

.tl_bgco_titcon{

background-color: #e0ddd6;

padding-top: 3rem;

padding-bottom: 2rem;

text-align: center;

margin-bottom: 3rem;

}

.tl_bt_tit{

font-weight: bold;

font-size: 1.4rem;

position: relative;

display: inline-block;

margin-bottom: 2rem;

z-index: 1;

}

.tl_bt_tit::after{

content: "Important things";

font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */

color: #d4cebf;

position: absolute;

bottom: -1.5rem;

right: -1.5rem;

font-size: 1.6rem;

z-index: -1;

}

@media screen and (min-width: 992px){

.tl_bgco_titcon{

padding-top: 4rem;

padding-bottom: 3rem;

margin-bottom: 4rem;

}

.tl_bt_tit{

font-size: 1.8rem;

}

英字と日本語見出し

「container2」で囲んでいるだけでこれと同じです。
cssは見出しのcssです。

MY HOME CONCEPT01高性能な家

夏は涼しく、冬は暖かく。
1年中快適な生活が送れる高断熱高気密な住宅です。
断熱性を高めることで省エネにも繋がり、光熱費の節約にも。

MY HOME CONCEPT02安心のメンテナンスプラン

経年劣化によるトラブルが発生しにくい方法で設計し、
素材の選択基準として20年30年後も現状復帰しやすい家を提案しています。

html

<div class="container2">
<div class="tl_order_bgimg">
	<div class="tl_ob1 tlob_img1"></div>
	<div class="tl_ob2">
		<p class="tl_contit"><span>MY HOME CONCEPT01</span>高性能な家</p>
		<p>夏は涼しく、冬は暖かく。<br>1年中快適な生活が送れる高断熱高気密な住宅です。<br>断熱性を高めることで省エネにも繋がり、光熱費の節約にも。</p>
	</div>
</div>

<div class="tl_order_bgimg">
	<div class="tl_ob1 tlob_img2 order-lg-2"></div>
	<div class="tl_ob2 order-lg-1">
		<p class="tl_contit"><span>MY HOME CONCEPT02</span>安心のメンテナンスプラン</p>
		<p>経年劣化によるトラブルが発生しにくい方法で設計し、<br>素材の選択基準として20年30年後も現状復帰しやすい家を提案しています。</p>
	</div>
</div>
</div>

<p class="tl_contit"><span>MY HOME CONCEPT01</span>高性能な家</p>

</div>

<p class="tl_contit"><span>MY HOME CONCEPT02</span>安心のメンテナンスプラン</p>

<p>経年劣化によるトラブルが発生しにくい方法で設計し、<br>素材の選択基準として20年30年後も現状復帰しやすい家を提案しています。</p>

</div>

css

.tl_contit{
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: 0.15rem;
}
.tl_contit span{
	font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */
	color: #ccc;
	font-size: 1rem;
	display: block;
	font-weight: normal;
	letter-spacing: 0.1rem;
}
@media screen and (min-width: 992px){
	.tl_contit{
		font-size: 2rem;
	}
	.tl_contit span{
		font-size: 1.1rem;
	}
}

.tl_contit{

font-size: 1.4rem;

font-weight: bold;

line-height: 1.4;

letter-spacing: 0.15rem;

}

.tl_contit span{

font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */

color: #ccc;

font-size: 1rem;

display: block;

font-weight: normal;

letter-spacing: 0.1rem;

}

@media screen and (min-width: 992px){

.tl_contit{

font-size: 2rem;

}

.tl_contit span{

font-size: 1.1rem;

}

テンプレート振り分けページへ戻る

トップへ戻る

その他の下層用クラス