画像と文字

タイプ１

左右配置の繰り返し

• なんでか画像の下に余白が空くので、ぴったりくっつける為に画像自体にマイナスマージンを充てる
• ボックスの中のPタグ（本文）とHタグを左に50移動させる

/*サービス*/
.service-box{
	box-shadow:0px 0px 10px #CCCCCC;
}
.service-box h2{color:#808026!important;}
@media screen and (min-width: 482px) {/*PC*/
/*サービス*/
.wp-image-1627, .wp-image-1628, .wp-image-1629, .wp-image-1630, .wp-image-1631{
	padding-bottom:-29px!important;
	margin-bottom:-29px!important;
}
.service-box:nth-of-type(odd){padding-left:20px!important; }/*奇数*/
.service-box:nth-of-type(even){padding-right:20px!important;}/*遇数*/
.service-box .smb-media-text__body, .service-box  .smb-media-text__title{padding-left:50px!important;}
}
@media screen and (max-width: 481px)  {/*SP*/
	.service-box{
		margin-left:-15px!important;
		margin-right:-15px!important;
		padding:15px 10px 0px 10px!important;}
	.service-box h2{font-size:1.4em;}
	.spase_service{width:30%!important; margin-bottom:-20px!important;}
	.service-box h2, .service-box p{
		width:90%;
		margin-left:auto!important;
		margin-right:auto!important;
	}
}

タイプ２

メディアと画像：alignfull　で全画面幅にする

/*プラン*/
.box-plan1{
	border-top:solid 1px #FFFFFF;
}
.box-plan2{
	border-top:solid 1px #FFFFFF;
	border-bottom:solid 1px #FFFFFF;
}
.box-plan1 p, .box-plan1 h3, .img-style1{padding-right:200px;}
.box-plan2 p, .box-plan2 h3, .img-style2{padding-left:200px;}

タイプ３

１）コンテナーで1000px幅設定。CSS付与ナシ。

２）メディアとテキスト。CSS:box-type

• ※border:solid 1px #062d57; 罫線を入れないと下とくっついてしまう。
• margin-right:-20px!important;margin-left:-20px!important;　スマホ時左右の余白を消す。

/*タイプ*/
.box-type{
	background-image:url(img/bg-type.jpg);
	border:solid 1px #062d57;
	color:#fdecca;
	box-shadow:0px 0px 10px #555555;
}
.box-type h2{color:#facd8a;}
@media screen and (min-width: 482px) {/*PC*/
.box-type:nth-of-type(1){padding-left:30px;}
.box-type:nth-of-type(2){padding-right:30px;}
}
@media screen and (max-width: 481px)  {/*mobile*/
.box-type{
	padding:20px;
	margin-right:-20px!important;
	margin-left:-20px!important;
}
}