/* COMMON */
.toolBox01 {
  background: #000;
}

.top-kv {
  width: 100%;
  background: url(/-/Media/com/hepasoft/top/bg01_kv.jpg) 0 0 repeat-x;
  border-bottom: 10px solid #000;
}
.top-kv--inner {
  width: 940px;
  background: url(/-/Media/com/hepasoft/top/bg02_kv.jpg) center 0 no-repeat;
  margin: 0 auto;
}
.top-kv--inner:after {
  content: "";
  display: block;
  clear: both;
}
.top-kv--plus {
  float: left;
  margin: 0 0 0 -28px;
  padding: 20px 0 8px 0;
}
.top-kv--item {
  float: left;
  margin: 0 -108px 0 -105px;
  padding: 228px 0 0 0;
}
.top-kv--item > div {
  text-align: center;
}
.top-kv--item > div > img {
  display: inline;
}

.top-kv--item-logo {
  margin: 0 0 -23px 0;
}

.top-kv--lotion {
  float: left;
  margin: 0 -39px 0 0;
  padding: 20px 0 0 0;
}

.catch--inner {
  width: 940px;
  margin: 0 auto 58px;
}
.catch--inner:after {
  content: "";
  display: block;
  clear: both;
}

.catch--plus,
.catch--lotion {
  background: url(/-/Media/com/hepasoft/top/arrow_black.png) center 0 no-repeat;
  padding: 34px 0 0 0;
}

.catch--plus {
  float: left;
}
.catch--lotion {
  float: right;
}

@media screen and (max-width: 768px) {
  .top-kv--inner {
    width: 100%;
    background-position: center bottom;
    overflow: hidden;
    position: relative;
  }
  .top-kv--plus {
    width: 42%;
    margin: 0 0 0 0;
  }
  .top-kv--item {
    position: absolute;
    width: 42%;
    margin: auto;
    top: 28vw;
    right: 0;
    left: 0;
    padding: 0;
    float: none;
  }
  .top-kv--item-logo {
    margin: 0 0 -10px 0;
  }
  .top-kv--lotion {
    width: 42%;
    margin: 0 0 0 0;
    float: right;
  }

  .catch--inner {
    width: 100%;
  }
  .catch--plus,
  .catch--lotion {
    width: 48%;
    margin: 0 1%;
  }
}
@media screen and (max-width: 568px) {
  .top-kv--item-logo {
    margin: 0 0 0 0;
  }
  .top-kv--item {
    width: 46%;
    margin: auto;
    top: 30vw;
  }
}

#hepasoft a {
  display: block;
  transition: opacity 0.3s;
}
#hepasoft a:hover {
  opacity: 0.8;
}