デザイン見本２

綺麗なボックス

【 HTML 】
<div class="alignfull sme-hidden-md sme-hidden-sm">
<div class="box-tokutyo1">
	<h2>前のめりでその場で<br />アポが取れるようになる</h2>
	<p>あなたのビジネスに興味がある方から<br />
	「ぜひ話が聞きたい！」とその場で打ち合わせや相談のアポを<br />
	取ることができるようになります。</p>
</div></div>
<div class="box-tokutyo-sp1 sme-hidden-lg-up">
	<img src="https://cyp-design.com/brandingmeishi-lp/wp-content/plugins/my-snow-monkey/img/tokuten-sp-top.png">
	<div class="box-content">
	<h2>前のめりでその場で<br />アポが取れるようになる</h2>
	<p>あなたのビジネスに興味がある方から「ぜひ話が聞きたい！」とその場で打ち合わせや相談のアポを取ることができるようになります。</p>
	</div>
	<img src="https://cyp-design.com/brandingmeishi-lp/wp-content/plugins/my-snow-monkey/img/tokuten-sp1-foot.png">
</div>



【 CSS 】
/*特徴ボックスPC用*/
.box-tokutyo1{
	background-image:url(https://cyp-design.com/brandingmeishi-lp/wp-content/plugins/my-snow-monkey/img/tokutyou1.jpg);
	background-repeat:no-repeat;
	height:550px;
	padding-left:450px;
}
.box-tokutyo2{
	background-image:url(https://cyp-design.com/brandingmeishi-lp/wp-content/plugins/my-snow-monkey/img/tokutyou2.jpg);
	background-repeat:no-repeat;
	height:550px;
	padding-left:600px;
}
.box-tokutyo3{
	background-image:url(https://cyp-design.com/brandingmeishi-lp/wp-content/plugins/my-snow-monkey/img/tokutyou3.jpg);
	background-repeat:no-repeat;
	height:638px;
	padding-left:450px;
}
.box-tokutyo1 h2, .box-tokutyo2 h2, .box-tokutyo3 h2{
	color:#2e8bd0;
	font-weight:normal;
	font-size:2.2em;
	padding-bottom:40px!important;	
}
.box-tokutyo1 h2{
	padding-top:100px!important;
	padding-left:220px!important;
}
.box-tokutyo2 h2{
	padding-top:100px!important;
	padding-left:220px!important;
}
.box-tokutyo3 h2{
	padding-top:120px!important;
	padding-left:220px!important;
}
/*特徴ボックスSP用*/
.box-tokutyo-sp1{background-image:url(https://cyp-design.com/brandingmeishi-lp/wp-content/plugins/my-snow-monkey/img/tokuten-sp1.jpg);}
.box-tokutyo-sp2{background-image:url(https://cyp-design.com/brandingmeishi-lp/wp-content/plugins/my-snow-monkey/img/tokuten-sp2.jpg);}
.box-tokutyo-sp3{background-image:url(https://cyp-design.com/brandingmeishi-lp/wp-content/plugins/my-snow-monkey/img/tokuten-sp3.jpg);}
.box-tokutyo-sp1 h2, .box-tokutyo-sp2 h2, .box-tokutyo-sp3 h2{
	color:#2e8bd0;
	font-weight:normal;
	font-size:1.2em;
	padding-bottom:20px!important;	
	padding-left:100px!important;
	background-repeat:no-repeat;
}
.box-tokutyo-sp1, .box-tokutyo-sp2, .box-tokutyo-sp3{
	background-repeat:no-repeat;
	background-size:contain;
	padding-top:80px;
}
.box-content{
	background-image:url(https://cyp-design.com/brandingmeishi-lp/wp-content/plugins/my-snow-monkey/img/tokuten-sp1-back.png);
	background-repeat:repeat-y;
	background-size:contain;
	padding:0px 40px 20px 30px!important;
}
.box-tokutyo-sp1 img, .box-tokutyo-sp2 img, .box-tokutyo-sp3 img{display:block!important;}

.box-tokutyo-sp1 h2{background-image:url(https://cyp-design.com/brandingmeishi-lp/wp-content/plugins/my-snow-monkey/img/tokuten-sp1-no1.gif);}
.box-tokutyo-sp2 h2{background-image:url(https://cyp-design.com/brandingmeishi-lp/wp-content/plugins/my-snow-monkey/img/tokuten-sp1-no2.gif);}
.box-tokutyo-sp3 h2{background-image:url(https://cyp-design.com/brandingmeishi-lp/wp-content/plugins/my-snow-monkey/img/tokuten-sp1-no3.gif);}