/* --- ボックス --- */
div.section {
width: 90％; /* ボックスの幅 */
background-color: #ffffff; /* ボックスの背景色 */
border: 1px #c0c0c0 solid; /* ボックスの境界線 */
font-size: 90%; /* ボックスの文字サイズ */
}
/* --- 見出し --- */
div.section h3 {
margin: 0; /* 見出しのマージン */
padding: 5px 10px; /* 見出しのパディング（上下、左右） */
background-color: #f5f5f5; /* 見出しの背景色 */
border-bottom: 1px #c0c0c0 dotted; /* 見出しの下境界線 */
font-size: 100%; /* 見出しの文字サイズ */
}

/* --- 本文領域 --- */
div.section div.textArea {
height: 120px; /* 本文領域の高さ */
overflow: auto;
}

/* --- 本文領域内の段落 --- */
div.section div.textArea p {
margin: 1em 10px; /* 段落のマージン（上下、左右） */
}



<!-- レンタルのメリット -->

.topserviceBox {
     display:block;
  margin: 8% 0 14%;
  }
.topserviceBox div {
	 margin: 0 2% 6%;
  overflow: hidden;
}
.topserviceBox .h3tit {
		border-left: 6px solid #000000;
    border-bottom: 2px solid #000000;
    padding: 0.8% 0 0.4% 1%;
}
.topserviceBox dl{
      margin-bottom: 0;
}
.topserviceBox dl dt { 
		width: 46%;
    display: inline-block;
    float: left;
}
.topserviceBox dl dd {
		width: 51%;
    display: inline-block;
    margin-left: 3%;
}
.topserviceBox dl dd ul {
      list-style: none;
      margin: 0;
}
.topserviceBox dl dd ul li {
      margin-bottom: 3%;
}
.topserviceBox dl dd p {
		margin-bottom: 10%;
}
.topserviceBox dl dd p span {
		color: #f00;
 }
 .topserviceBox dl dd a {
 		display: block;
    margin-top: 4%;
    background: #333;
    color: #fff;
    padding: 4%;
    text-align: center;
    width: auto;
 }
 .topserviceBox dl dd a:hover {
       opacity: 0.8;
}
.mgb0 {
  margin-bottom:0 !important;
}

@media (max-width: 768px){
   .topserviceBox {

  }
  .topserviceBox dl dt{
    padding-right: 10px;
  }
  .topserviceBox dl dd{
    width: 94%;
    display: unset;
    margin-left: 3%;
  }
}

<!-- レンタルのメリット -->


2
3
4
5
6
7
8
9
10
11
12
13
14
/* スマホ用 */
@media screen and (max-width: 767px) {
	.fb-container {
		width: 100%;
		max-width: 500px;
	}
}
 
/* PC用 */
@media screen and (min-width: 768px) {
	.fb-container {
		width: 500px;
	}
}