@charset "utf-8";
/*------------------------------------------------------------
	導入事例 ページ
------------------------------------------------------------*/
#gNavi > ul > .navi04 > a {
	border-bottom: 4px solid #A5A5A5;
}

#main {
  margin-bottom: 0;
}

#main .mainImg .textBox .comLink a {
  width: 400px;
  text-align: center;
  margin-top: 10px;
  box-sizing: border-box;
}

#pagePath {
  margin-bottom: 0;
}

/*------------------------------------------------------------
  caseBox
------------------------------------------------------------*/

.caseBox {
  padding: 50px 0;
}

.caseBox .whiteBox .title {
	text-align: center;
}
.caseBox .retailUl li img {
	max-width: 100%;
}

.caseBox .catch {
  margin: 0 0 24px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
.caseBox .phoBox {
  width: 1000px;
  margin: 24px auto;
}
.caseBox .phoBox img,
.caseBox .phoBox800 img {
  width: 100%;
}
.caseBox .phoBox800 {
  width: 800px;
  margin: 24px auto;
}

.caseBox01 ul {
  width: 840px;
  margin: 0 auto;
}
.caseBox01 ul li {
  margin-top: 15px;
  position: relative;
}
.caseBox01 ul li span {
  font-weight: bold;
  display: inline-block;
  margin: 0 0 10px 0;
}
.caseBox01 ul li:before{
    content: "●";
    font-size: 6px;
    left: -18px;
    position: absolute;
    top: 10px;
    left: -18px;
}

.whiteBox {
  padding: 50px 0 16px;
}

.caseBox#sec03 .mainBox {
  width: 1100px;
  margin: 0 auto;
}

.caseBox .mainBox .caseSec {
  margin: 0 0 50px 0;
  padding: 0;
}
#main .caseBox .mainBox .caseSec .photoBox {
  width: 550px;
}
#main .caseBox .mainBox .caseSec .photoBox.pht400 {
  width: 400px;
}
#main .caseBox .mainBox .caseSec .textBox.txt750 {
  width: 750px;
}
.caseBox .mainBox .caseSec .photoBox img {
  width: 100%;
}
#main .caseBox .mainBox .caseSec .textBox {
  padding: 10px 0 0 0;
}

#main .caseBox .mainBox .caseSec2 .photoBox {
  width: 220px;
  text-align: center;
}
.caseBox .mainBox .caseSec2 .photoBox img {
  width: 100%;
}
#main .caseBox .mainBox .caption {
  margin: 10px 0 30px 0;
  font-size: 14px;
}
#main .caseBox .mainBox .caseSec2 .textBox {
  padding: 10px 0 0 0;
  width: 930px;
}
#main .caseBox .mainBox .caseSec2 .textBox p {
    margin-bottom: 2em;
}
.caseBox .mainBox .caseSec .textBox p,
.caseBox .mainBox .caseSec2 .textBox p {
  margin: 0 0 2em 0;
}
.caseBox .mainBox .caseSec .textBox p .name,
.caseBox .mainBox .caseSec2 .textBox p .name {
  font-weight: bold;
  margin-right: 10px;
}

#main .caseBox .mainBox .caseSec3 .comImgBoxR .photoBox {
  margin: 0 0 30px 50px;
}
#main .caseBox .mainBox .caseSec3 .comImgBoxL .photoBox {
  margin: 0 50px 30px 0;
}
#main .caseBox .mainBox .caseSec3 .comImgBoxR .photoBox2,
#main .caseBox .mainBox .caseSec3 .comImgBoxR .photoBox3 {
    margin: 0 0 30px 50px;
}
#main .caseBox .mainBox .caseSec3 .comImgBoxL .photoBox2,
#main .caseBox .mainBox .caseSec3 .comImgBoxL .photoBox3 {
    margin: 0 50px 30px 0;
}
#main .caseBox .mainBox .caseSec3 .photoBox3 {
  width: 320px;
  text-align: center;
}
.caseBox .mainBox .caseSec3 .photoBox3 img {
  width: 100%;
}
#main .caseBox .mainBox .caseSec p,
#main .caseBox .mainBox .caseSec2 p {
  margin-bottom: 32px;
  padding: 10px 0 0 0;
  line-height: 1.75;
}

#main .caseBox .mainBox .caseSec4 {
margin-top: 20px;
}
#main .caseBox .mainBox .caseSec4 .photoBox {
  width: 320px;
  text-align: center;
}
.caseBox .mainBox .caseSec4 .photoBox img {
  width: 100%;
}
#main .caseBox .mainBox .caseSec4 .textBox {
  padding: 10px 0 0 0;
  width: 830px;
}
#main .caseBox .mainBox .caseSec4 .textBox .catch {
  text-align: left;
}

#main .caseBox .mainBox .caseSec5 .catch {
  margin-bottom: 30px;
  font-size: 22px;
  text-align: center;
}
#main .caseBox .mainBox .headLineBgNavy {
  padding: 3px 10px;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: bold;
  background-color: #1e32a5;
  color: #fff;
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1.75;
}
#main .caseBox .mainBox .caseSec5 .photoBox {
  display: flex;
  width: 100%;
}
#main .caseBox .mainBox .caseSec5 .photoBox .pht {
  margin: 0 30px;
  width: calc((100% - 240px)/4);
  text-align: center;
}
#main .caseBox .mainBox .caseSec5 .photoBox .pht p {
  margin: 0;
}
#main .caseBox .mainBox .caseSec5 .photoBox .pht p img {
  width: 220px;
}

#main .caseBox02 .mainBox .photoBox {
  width: 400px;
  text-align: center;
}
.caseBox02 .mainBox .photoBox img {
  width: 100%;
}
#main .caseBox02 .mainBox .textBox {
  padding: 10px 0 0 0;
  width: 750px;
}

#main .caseBox02 .mainBox .textBox table {
    border-spacing: 0;
    border-collapse: collapse;
}
#main .caseBox02 .mainBox .textBox table th,
#main .caseBox02 .mainBox .textBox table td {
    padding: 12px 20px 10px;
    background: #fff;
    border: 1px solid #bbb;
    font-size: 16px;
    word-wrap: break-word;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#main .caseBox02 .mainBox .textBox table th {
    background: #F2F2F2;
    white-space: nowrap;
}

.caseBox03 {
  padding: 50px 0;
  background-color: #C3E6EA;
}
.caseBox03 .headLine {
  margin-bottom: 30px;
  font-size: 24px;
  text-align: center;
}
.caseBox03 .caseSec {
  display: flex;
}
.caseBox03 .caseSec .photoBox {
  display: flex;
}
.caseBox03 .caseSec .photoBox .pht {
  width: 300px;
  margin-right: 30px;
}
.caseBox03 .caseSec .photoBox img {
  width: 100%;
}
.caseBox03 .caseSec .textBox {
  line-height: 1.75;
}
.caseBox03 .caseSec .textBox dl {
  display: flex;
}
.caseBox03 .caseSec .textBox dl dt {
  font-weight: bold;
  white-space: nowrap;
  min-width: 4em;
}


.icn {
    margin: 0 10px 0 0;
    vertical-align:  middle;
}


.dlBox {
  padding: 50px 0;
}
#main .dlBox .mainBox {
  display: flex;
  width: 1000px;
}
.dlBox .imgBox {
  width:  350px;
  margin-right: 20px;
}
.dlBox .imgBox img {
  width:  100%;
}
.dlBox .txtBox {
  margin-left: 20px;
}
.dlBox .txtBox .title {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: bold;
}
.dlBox .txtBox .comLink {
  margin-top: 20px;
}

.contactBox {
  padding: 50px 0;
  text-align: center;
}
.contactBox .comLink {
  margin: 20px auto 0;
}


@media all and (min-width: 0px) and (max-width: 767px) {

  #main .mainImg .textBox .comLink {
    max-width: 100%;
  }

  #main .mainImg .textBox .comLink a {
    width: 100%;
  }

  /*------------------------------------------------------------
    caseBox
  ------------------------------------------------------------*/

  .caseBox {
    padding: 30px 0;
  }
  .caseBox .catch {
    margin: 0 0 18px;
    font-size: 18px;
  }
  .caseBox .phoBox,
  .caseBox .phoBox800 {
    width: 100%;
    margin: 12px auto;
  }

  .caseBox ul {
    width: 90%;
  }
  #main .retailUl {
    width: 100%;
  }
  .whiteBox {
    padding: 30px 0 16px;
  }

  #main .caseBox .mainBox .caseSec p,
  #main .caseBox .mainBox .caseSec2 p {
    margin: 0 0 10px 0;
  }

  .caseBox#sec03 .mainBox {
    margin: 0 15px;
    width: auto;
  }

  .caseBox .mainBox .caseSec {
    margin: 0 0 30px 0;
  }
  #main .caseBox .mainBox .caseSec .photoBox {
    width: 100%;
  }
  #main .caseBox .mainBox .caseSec .photoBox.pht400 {
    width: 100%;
  }
  #main .caseBox .mainBox .caseSec .textBox.txt750 {
    width: 100%;
  }


  #main .caseBox .mainBox .caseSec2 .photoBox {
    width: 60%;
    margin: 0 auto;
  }
  #main .caseBox .mainBox .caption {
    font-size: 12px;
  }
  #main .caseBox .mainBox .caseSec2 .textBox {
    width: 100%;
  }

  #main .caseBox02 .mainBox .photoBox {
    width: 100%;
  }

  #main .caseBox02 .mainBox .textBox {
    width: 100%;
  }

  #main .caseBox02 .mainBox .textBox table th,
  #main .caseBox02 .mainBox .textBox table td {
    font-size: 12px;
  }


.caseBox03 {
  padding: 30px 0;
}
.caseBox03 .headLine {
  margin-bottom: 20px;
  font-size: 15px;
}
.caseBox03 .caseSec {
  display: block;
}
.caseBox03 .caseSec .photoBox {
  display: block;
}
.caseBox03 .caseSec .photoBox .pht {
  width: 100%;
  margin-right: 0;
  margin-bottom: 20px;
}


  .dlBox {
    padding: 30px 0;
  }
  #main .dlBox .mainBox {
    display: block;
    width: auto;
  }
  .dlBox .imgBox {
    width:  80%;
    margin: 0 auto 20px;
  }
  .dlBox .txtBox {
    margin-left: 0;
  }
  .dlBox .txtBox .title {
    font-size: 18px;
  }

  .contactBox {
    padding: 30px 0;
  }

  .caseBox01#sec01 .headLine01 img {
    width: 50px;
  }
  .caseBox01#sec02 .headLine01 img {
    width: 40px;
  }
  .caseBox#sec04 .headLine01 img {
    width: 40px;
  }
  .caseBox .headLine01.profile img {
    width: 35px;
  }
  .whiteBox .headLine01 img {
    width: 40px;
  }







#main .caseBox .mainBox .caseSec3 .comImgBoxR .photoBox {
  margin: 0 0 10px 0;
}
#main .caseBox .mainBox .caseSec3 .comImgBoxL .photoBox {
  margin: 0 0 10px 0;
}
#main .caseBox .mainBox .caseSec3 .comImgBoxR .photoBox2,
#main .caseBox .mainBox .caseSec3 .comImgBoxR .photoBox3 {
  margin: 0 auto 10px;
}
#main .caseBox .mainBox .caseSec3 .comImgBoxL .photoBox2,
#main .caseBox .mainBox .caseSec3 .comImgBoxL .photoBox3 {
    margin: 0 auto 10px;
}
#main .caseBox .mainBox .caseSec3 .photoBox3 {
  width: 100%;
}


#main .caseBox .mainBox .caseSec4 {
  margin-top: 20px;
}
#main .caseBox .mainBox .caseSec4 .photoBox {
  width: 60%;
  margin: 0 auto;
}
#main .caseBox .mainBox .caseSec4 .textBox {
  width: 100%;
  text-align: center;
}

#main .caseBox .mainBox .caseSec5 .catch {
  margin-bottom: 30px;
  font-size: 15px;
  text-align: center;
}
#main .caseBox .mainBox .headLineBgNavy {
  font-size: 14px;
}
#main .caseBox .mainBox .caseSec5 .photoBox {
  display: block;
  width: 100%;
}
#main .caseBox .mainBox .caseSec5 .photoBox .pht {
  margin: 0 0 20px;
  width: 100%;
}
#main .caseBox .mainBox .caseSec5 .photoBox .pht p {
  margin: 0;
}
#main .caseBox .mainBox .caseSec5 .photoBox .pht p img {
  width: 60%;
}





  .icn {
    width: auto;
}

}