@charset "UTF-8";
/*----------------------------
 #main-img
 ----------------------------*/
 #main-img {
  width:100%;
  height:auto;
  position:relative;
 }
 .main-img {
  width:100%;
  height:auto;
 }
 /*----------------------------
 #about
 ----------------------------*/
 #about {
  width:100%;
  height:auto;
  position:relative;
  background:none;
 }
 .about {
  width:100%;
  height:auto;
  position:relative;
  z-index: 1;
 }
 .about-bottom {
  width:100%;
  height:auto;
  margin-top:-17.5%;
 }
/*----------------------------
 #line
----------------------------*/
#line {
  width:100%;
  height:auto;
  position:absolute;
  top:92.5%;
  left:50%;
  transform:translate(-50%,0);
  z-index:1;
 }
 .line {
  width:80%;
  height:auto;
  margin:0 auto;
  animation: bound 2s ease-out infinite;
  filter: drop-shadow(5px 10px 5px rgba(0,0,0,.4));
 }
 @keyframes bound {
  0%, 40%, 60%, 80% {
    transform: scale(1);
    transform-origin:center;
}
50%, 70% {
    transform: scale(1.01);
    transform-origin:center;
}
 }
/*----------------------------
 #feature
----------------------------*/
#feature {
  width:100%;
  height:auto;
  position:relative;
}
.feature {
  width:100%;
  height:auto;
}
.feature-bottom {
  width:100%;
  height:auto;
  padding:30px 2.5% 0 2.5%;
  box-sizing:border-box;
  background:#565656;
}
.feature-line {
  width:100%;
  height:auto;
  background:#565656;
  padding:150px 0;
  box-sizing:border-box;
  position:relative;
}
.feature-line-text_top {
  width:70%;
  height:auto;
  opacity:.1;
  position:absolute;
  top:20px;left:0;
}
.feature-line-text_bottom {
  width:95%;
  height:auto;
  opacity:.1;
  position:absolute;
  bottom:20px;right:0;
}
.feature-line-img {
  width:90%;
  margin:0 auto;
  animation: bound 2s ease-out infinite;
  filter: drop-shadow(5px 10px 5px rgba(0,0,0,.4));
  position:relative;
  z-index:1;
}
.feature-line-img > a {
  width:100%;
  height:auto;
  margin:0 auto;
 }
/*----------------------------
#point
----------------------------*/
#feature {
 width:100%;
 height:auto;
 position:relative;
}
.point {
 width:100%;
 height:auto;
}
/*----------------------------
 #case
----------------------------*/
#case {
  width:100%;
  height:auto;
  position:relative;
  padding:100px 0;
}
#case::after {
  display:block;
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;left:0;
  background:url('../img/top/bg.png');
  background-position:top center;
  opacity:.4;
}
.case {
  width:95%;
  height:auto;
  margin:0 auto;
  position:relative;
  z-index:1;
}
#case-line {
  width:100%;
  margin:0 auto;
  padding-top:80px;
  position:relative;
  z-index:1;
}
#case-line {
  display:block;
  width:100%;
  height:auto;
}
/*----------------------------
 #voice
----------------------------*/
#voice {
  width:100%;
  height:auto;
  position:relative;
  padding:100px 0;
}
.voice {
  width:100%;
  height:auto;
}
/*----------------------------
 #company
----------------------------*/
#company {
  width:100%;
  height:auto;
  position:relative;
  padding:100px 0;
  background:#1a1a1a;
  color:#fff;
  font-size:1.8rem;
}
#company a {
  color:#fff!important;
}
.company {
  width:100%;
  max-width:896px;
  margin:0 auto;
}
.company > dl {
  width:100%;
  height:auto;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.company > dl > dt {
  width:30%;
  padding:10px 5px;
  box-sizing:border-box;
  display:flex;
  justify-content:flex-end;
}
.company > dl > dd {
  width:65%;
  padding:10px 5px;
  box-sizing:border-box;
}
.company > dl > dd > ul {
  padding-left:20px;
  box-sizing:border-box;
}
@media screen and (max-width:1024px) {
  .company {
    width:90%;
  }
  .company > dl > dt {
    width:20%;
  }
  .company > dl > dd {
    width:75%;
  }
}
@media screen and (max-width:896px) {
  .feature-line {
    padding:80px 0;
  }
}
@media screen and (max-width:680px) {
  #case,#voice {
    padding:50px 0;
  }
  #case-line {
    padding-top:30px;
  }
  .line {
    width:90%;
  }
  .feature-line {
    padding:50px 0;
  }
}
@media screen and (max-width:480px) {
  .feature-line {
    padding:50px 0;
  }
  .feature-line-img {
    width:90%;
  }
  .feature-bottom {
    width:100%;
    padding:0;
    margin-top:-10%;
  }
  #case {
    padding-bottom:80px;
  }
  .case {
    width:100%;
  }
  #line {
    top:95%;
  }
  .line {
    width:94.5%;
  }
  #company {
    padding:50px 0;
  }
  .company {
    width:85%;
  }
  .company > dl {
    font-size:1.4rem;
  }
  .company > dl > dt {
    width:100%;
    font-weight:bold;
    justify-content:flex-start;
    padding:5px 5px 8px 5px;
    border-bottom:1px solid #565656;
    position:relative;
  }
  .company > dl > dt::after {
    display:block;
    content:'';
    width:10%;height:1.5px;
    background:#696969;
    position:absolute;
    bottom:-0.75px;
    left:0;
  }
  .company > dl > dd {
    width:100%;
    padding-left:10px;
  }
}