デザイン見本１

ボックス

ボックスの中に2カラムを入れる

/*★★★★★★★★★★
テーブルの装飾1
★★★★★★★★★★★*/

.decoTB1 td:nth-of-type(1){
	border-left:solid 6px #e88a95!important;
	padding-left:30px;
	vertical-align:top;
}
.decoTB1 td:nth-of-type(2){
	border-left:solid 1px #e88a95!important;
}
@media screen and (max-width: 481px)  {/*SP*/
.decoTB1 td:nth-of-type(1){
	width:25%;
	border-left:none!important;
	padding-left:0px;
}
.accsess_box{margin-left:-15px!important; margin-right:-15px!important;}	
}

.accsess_box iframe{
	width:95%!important;
	margin-left:20px!important;
	height:400px;
}
.accsess_box {padding-bottom:20px!important;}

コンテナーに背景入れて、HTMLでタグを入れる

★サンプルDL

【 HTML 】
<div class="style1-box">
<p class="s80">ペット葬儀や火葬において、弊社で依頼されたご家族様がペット葬儀社や霊園に依頼する時にご希望される例です。</p>
<ul>
<li>ペット葬儀や火葬料金と実際のクオリティが見合っている</li>
<li>経験豊富なペット葬儀社や霊園を探している</li>
<li>安心して依頼出来る良心的で信頼出来るペット葬儀サービス</li>
<li>ペット火葬後になるべく綺麗なお骨に出来る技術を持ったスタッフがいるペット葬儀社<br>
<span class="text">※ペットの年齢や健康状態により、お骨が綺麗に残りにくい場合もあります</span></li>
<li>市区町村のペット焼却炉で火葬をしたくない</li>
</ul>
<p>大阪・和歌営業所を中心とした関西においてペットがお亡くなりになった場合に、葬儀社選びにお悩みの場合には、ペット葬儀うたたね関西までご連絡をお願い致します。</p>
<p>長年の経験からご家族様の希望に合わせたペット葬儀及び火葬をさせて頂いております。<br>弊社オリジナルのフラワーペットセレモニーカーで訪問をさせて頂いております。</p>
<img class="img_center" src="/wp-content/plugins/my-snow-monkey/img/border1-bottom.gif">
</div>


【 CSS 】
.style1-box{
	width:1000px!important;
	max-width:100%;
	margin-left:auto!important;
	margin-right:auto!important;
	background-image:url(img/border1.gif);
	background-repeat:no-repeat;
	background-size:cover;
}
.style1-box p, .style1-box ul{
	width:80%!important;
	margin-left:auto!important;
	margin-right:auto!important;
	margin-top:20px;
}
.style1-box ul{
	font-size:1.3em;
	color:#146789;
	list-style:none;
	margin-bottom:20px;
	font-weight:bold;
}
.style1-box .text{
	font-size:70%!important;
	color:#999999;
	font-weight:normal;
}
.style1-box li:before {
	font-family: 'FontAwesome';
	content: "\f00c";
	padding-right: 5px;
}
.style1-box li{text-indent:-1em; padding-left:1em;}
.style1-box p:first-of-type{padding-top:90px!important;}
@media screen and (max-width: 481px)  {/*mobile*/
.style1-box{background-size:contain; font-size:90%!important;}
.style1-box p, .style1-box ul{width:95%!important;}
.style1-box ul{font-size:1.2em;}
.style1-box p:first-of-type{padding-top:30px!important;}
}

スマホの時だけ文字小さく

/*フォントサイズ調整*/
@media screen and (max-width: 481px)  {/*mobile*/
.boxstyle1 .smb-section__title{font-size:1.2em!important;}
}