見出しの装飾

スマホの時だけ背景を画面MAXに設定

@media screen and (max-width: 481px)  {/*SP*/
.moji2{
	width: 100vw!important;/*画面100%vwはブラウザ表示幅の単位*/
	position: relative!important;
	left: 50%!important;
	transform: translateX(-50%)!important;
}
}

https://jajaaan.co.jp/css/css-headline/

https://saruwakakun.com/html-css/reference/h-design

https://pulpxstyle.com/heading-design/

https://miyu-info.com/midashi/

/*webフォント*/
.moji{font-size:2.2em; color:#156fc8;}
.moji2{
	font-size:1.8em;
	position: relative!important;
	padding: 0.5rem 1rem calc(0.5rem + 5px)!important;
	background: #e8f3f9!important;
}
.moji2:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border:2px solid #2b98ce;
}
@media screen and (max-width: 481px)  {/*SP*/
.moji{font-size:1.6em;}
.moji2{font-size:1.4em;}
}

文字中央揃えで、左右に罫線を引く

.service-box h3 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.4em;
	text-align: center;
}

.service-box h3::before,
.service-box h3::after {
	content: '';
	width: 50px;
	height: 3px;
	background-color: #e3bf00;
}

.service-box h3::before {
	margin-right: 10px;
}
.service-box h3::after {
	margin-left: 10px;
}

<h2 class="plan-title"><span>02</span>一任ペット火葬プラン</h2>


h2.plan-title {
	position: relative!important;
	overflow: hidden!important;
	padding: 1.5rem 2rem 1.5rem 130px!important;
	word-break: break-all!important;
	border-top: 3px solid #000!important;
	border-radius: 12px 0 0 0!important;
}

h2.plan-title span {
	font-size: 3rem!important;
	position: absolute!important;
	top: 0!important;
	left: 0!important;
	display: block!important;
	padding: 3px 20px!important;
	color: #fff;
	border-radius: 10px 0 20px 10px!important;
	background: #000;
}