@charset "UTF-8";

/* visual */
#visual {
  height: 600px;
  position: relative;
  width: 100%;
  background-image: url(../img/c_visual_bg.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
#visual .visual-inner {
  width: 1050px;
  margin: auto;
}
#visual .con-box {
  position: absolute;
  width: 850px;
  left: 50%;
  top: 150px;
  transform: translateX(-50%);
  color: #fff;
}
#visual .pic {
  float: left;
}
#visual .text {
  float: left;
  margin-top: 30px;
  margin-left: 70px;
}
#visual .text h2 {
  font-family: "base-b";
  line-height: 1.3;
  font-size: 2.2em;
}
#visual .text p {
  font-size: 1.2em;
  margin-top: 30px;
  line-height: 1.4;
}

/* section-1 */
#section-1 {
  background-image: url(../img/c_section-1.png);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
#section-1 .con {
  width: 90%;
  margin: auto;
  text-align: center;
}
#section-1 h2 {
  font-family: "base-eb";
  font-size: 1.8rem;
  line-height: 1.2;
}
#section-1 p {
  margin-top: 15px;
  font-size: 1.1rem;
  line-height: 1.3;
}
#section-1 .data {
  margin-top: 50px;
}
#section-1 .data img {
  width: 100%;
}

#usage {
 height:180px;
}
@media (max-width: 767px) {
 #usage {
   height:665px;
 }
}

 /* section2-5 */
#section-2,
#section-4 {
  background: #fff;}
#section-3,
#section-5 {
  background: #F2F6F5;
}
[id ^= "section"] .con {
  width: 850px;
  margin: auto;
}
[id ^= "section"] .pic {
  float: left;
}
[id ^= "section"] .mobile {
  display: none;
}
[id ^= "section"] .pic img {
  height: 220px;
}
#section-2 .text-box,
#section-4 .text-box {
  float: left;
  margin-left: 100px;
  margin-top: 20px;
}
#section-3 .text-box,
#section-5 .text-box {
  float: left;
  margin-right: 50px;
}
[id ^= "section"] .title {
  font-family: "base-eb";
  font-size: 2em;
}
[id ^= "section"] .detail {
  margin-top: 10px;
  font-size: 1.3em;
  line-height: 1.4;
}
[id ^= "section"] ul {
  margin-top: 10px;
  padding-left: 20px;
}
[id ^= "section"] li {
  list-style: disc;
  line-height: 1.5;
}

/* customer */
#customer .title-box {
  text-align: center;
}
#customer .title-box .title {
  display:inline-block;
  font-size: 1.6em;
  background: #123238;
  color: #fff;
  padding: 12px 150px;
}
#customer .title-box .text{
  margin-top: 20px;
  font-size: 1.1em;
  line-height: 1.3;
}
#customer .con {
  width: 100%;
  height: 220px;
  overflow: hidden;
  margin-top: 50px;
}
#customer ul {
  width: 100%;
}
#customer li {
  float: left;
  width: 30%;
  height: 220px;
}
#customer li:not(:nth-child(3n)) {
  margin-right: 5%;
}
#customer .year {
  display: inline-block;
  font-size: 1.3em;
  font-family: "base-b";
  padding: 10px 15px 7px;
  color: #fff;
}
#customer .label {
  margin-top: 15px;
  font-size: 1.2em;
  font-family: "base-b";
}
#customer .text {
  margin-top: 10px;
  font-size: 0.9em;
  line-height: 1.3;
}
#customer li span {
  display: block;
  margin-top: 10px;
}
#customer li span::first-letter {
  font-family: "base-eb";
}
#customer .red {
  color: #E63A46;
}
#customer .orange {
  color: #F79C35;
}
#customer .yellow {
  color: #F9C04C;
}
#customer .skyblue {
  color: #63C8D0;
}
#customer .blue {
  color: #5EA2C1;
}
#customer .red_bg {
  background-color: #E63A46;
}
#customer .orange_bg {
  background-color: #F79C35;
}
#customer .yellow_bg {
  background-color: #F9C04C;
}
#customer .skyblue_bg {
  background-color: #63C8D0;
}
#customer .blue_bg {
  background-color: #5EA2C1;
}

@media screen and (max-width:767px) {
  #header {
    color: #fff;
  }
  .section-inner {
    width: 100%;
  }
  #visual .con-box {
    width: 100%;
  }
  #visual .pic {
    float: none;
    text-align: center;
  }
  #visual .pic img {
    height: 150px;
  }
  #visual .text {
    float: none;
    text-align: center;
    margin: 30px 0;
  }

  /* section-1 */
  #section-1 .con {
    margin-top: 50px;
  }

  /* section-2-5 */
  [id ^= "section"] .con {
    width: 95%;
  }
  [id ^= "section"] .pic {
    display: block;
    float: none;
    text-align: center;
  }
  [id ^= "section"] .pic img {
    height: 150px;
  }
  [id ^= "section"] .pc {
    display: none;
  }
  #section-2 .text-box,
  #section-4 .text-box {
    float: none;
    width: 80%;
    margin: 50px auto 0;
    text-align: center;
  }
  #section-3 .text-box,
  #section-5 .text-box {
    float: none;
    width: 80%;
    margin: 50px auto 0px;
    text-align: center;
  }
  [id ^= "section"] ul {
    margin: 30px auto 0;
  }
  [id ^= "section"] li {
    font-size: 1.1em;
    text-align: left;
  }

  /* customer */
  #customer .title-box .title {
    padding: 12px 70px;
  }
  #customer .title-box .text {
    width: 90%;
    margin: 20px auto 0;
  }
  #customer .con {
    width: 90%;
    margin: 30px auto 0;
    overflow: hidden;
  }
  #customer li {
    float: left;
    width: 100%;
    height: 220px;
  }
  #customer li:not(:nth-child(3n)) {
    margin-right: 0;
  }
  
  /* comment */
  #comment .pic {
    float: none;
    text-align: center;
  }
  #comment .text {
    float: none;
    width: 90%;
    margin: auto;
  }
  #comment .ceo-1 .pic,
  #comment .ceo-2 .pic {
    margin: 0 0 30px ;
  }
  #comment .ceo-2 .mobile {
    display: block
  }
  #comment .ceo-2 .pc {
    display: none;
  }
  #comment .ceo-2 .text {
    float: none;
    width: 90%;
    margin: auto;
  }
}