@charset "utf-8";
/* CSS Document */

body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 95%;
  color: #444444;
  margin: 0px;
  padding: 0px;
}

h4 {
  font-size: 110%;
  margin-bottom: 10px;
}

section {
  margin-bottom: 5px;
}

/**パッケージの概要**/

.aboutService img {
  float: right;
}

.aboutService_text {
  margin: 0px 20px 0px 0px;
  width: 430px;
  float: right;
}

.aboutService_text h4 {
  font-size: 130%;
}

.aboutService_text strong {
  color: #db4254;
  font-size: 110%;
}

.aboutService_text dl dt {
  font-weight: bold;
}
.aboutService_text dl dd{
  margin-bottom:5px;
}
/**パッケージの機能**/

.pointService {
  margin-bottom: 20px;
}
@media screen and (max-width: 480px){
  .pointService {
  
  }
  .pointService .F_l {
    text-align: center;
  }
}
@media screen and (min-width: 481px){
.pointService .F_l {
  float: left;
}
}

.pointService_text {
  margin: 0px 0px 0px 20px;
  max-width: 490px;
  float: left;
}


.pointService_text h4 {
  font-size: 120%;
}

section hr {
  border-top: 1px dashed #bbb;
  border-bottom: none;
  margin-bottom: 20px;
}


/**お客様の声**/
section table {
  margin-top: 20px;
  height: 205px;
  position: relative;
}

section table tr td b {
  font-size: 120%;
}

section table tbody tr .voice_title {
  vertical-align: text-top;
  padding-left: 10px;
  height: 35px;
}

section table tbody tr .voice_package {
  padding-left: 10px;
  vertical-align: text-top;
  height: 40px;
}

section table tbody tr .voice_text {
  padding: 0px 10px 5px 10px;
  position: relative;
}

section table tbody tr .voice_text span {
  color: #a0a0a0;
  margin-bottom: 10px;
}

section table tbody tr .voice_detail {
  position: absolute;
  color: #25acc7;
  font-size: 100%;
  border: 1px #25acc7 solid;
  padding: 5px 10px;
  border-radius: 5px;
  margin-top: 5px;
  width: 160px;
  right: 0px;
  bottom: 0px;
}

section table tbody tr .voice_detail span {
  color: #25acc7;
  margin-right: 5px;
}

section table tr td strong {
  color: #db4254;
}

section hr {
  border-top: 1px dashed #bbb;
  border-bottom: none;
  margin-top: 20px;
}

/**事例一覧**/

section .caseBox {
  width: 220px;
  margin-right: 15px;
  float: left;
}

section .last {
  margin-right: 0px;
}

section .caseBox table th {
  width: 130px;
  padding-bottom: 5px;
}

section .caseBox table td {
  padding-bottom: 3px;
}

section .caseBox table td img {
  padding: 2px;
  border: 1px solid #d9d9d9;
}

section .caseBox a {
  display: block;
  color: #333333;
  text-decoration: none;
}

section .caseBox a:hover {
  opacity: 0.7;
}

section .caseBox p {
  margin-top: 5px;
}

.case_detail {
  font-size: 125%;
  color: #25acc7;
  border: 1px #25acc7 solid;
  padding: 5px;
  margin: 0 5px;
  border-radius: 5px;
  text-align: center;
}

.case_detail span {
  margin-right: 5px;
}

section .caseBox table .case_text {
  font-size: 90%;
  color: #5a5a5a;
  padding-bottom: 10px;
  width: 215px;
}

@media screen and (max-width: 480px) {
  section .caseBox{
    width: 100%;
  }
  section table{
    padding:10px;
    box-sizing: border-box;
    width: 100%;
  }
  section .caseBox table td img{
    width: 100%;
  }
}

/*機能一覧*/
.function-list{
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  
}
.function{
  width: 50%;
  padding: 2.5%;
  box-sizing: border-box;
}
.function img{
  width: 43px;
  height: 43px;
}
.function>div>div{
  width: 43px;
  height: 43px;
}
.function>div{
  display: flex;
    margin-bottom: 10px;
}
.function div h4{
  margin-bottom: 0;
  margin-left: 3px;
}
.function div{}
.function strong{
  color:#db4254; 
}

@media screen and (max-width: 480px) {

  .function{
    width: 80%;
    margin:5px auto;
  }
}
/*レスポンシブ対応*/
@media screen and (max-width: 480px) {

	.aboutService img{
		float: none;
		display: block;
		margin: auto;
	}
	.aboutService_text{
    float:none;
    width: auto;
  }
  .contactBtn {
		width: 80.33%;
		margin: 0 auto 0;
		padding: 9.822% 5.147% 5.147%;
	}
	.cf:before, .cf:after {
		content: " ";
		display: table;
	}
	.contactBtn .requestBtn {
		width: 47.13%;
		margin: 0 4.652% 0 0;
	}
	.contactBtn .telBtn {
		width: 48.176%;
	}
	.contactBtn li {
		float: left;
	}

.mainVisual-sp{
    margin-bottom: 0px;
}
.aboutService_text {
  margin: 0px 10px 0px;
}
}