/* ===== LP TOP (Hero decoration & non-critical) ===== */

/* ヒーローのグリーン斜め背景（重めなので外出し） */
.heroContainer::after {
  content:"";
  background-color:#00aa2c;
  opacity:0.5;
  width:100%;
  height:60%;
  -webkit-clip-path:polygon(0 0, 100% 0, 100% 52%, 0 100%);
  clip-path:polygon(0 0, 100% 0, 100% 52%, 0 100%);
  position:absolute;
  top:0;
  left:0;
}
@media (min-width:1024px) {
  .heroContainer::after {
    width:80%;
    height:100%;
    -webkit-clip-path:polygon(0 0, 60% 0, 100% 100%, 0 100%);
    clip-path:polygon(0 0, 60% 0, 100% 100%, 0 100%);
  }
}

/* タイトルの装飾 */
.hero_info-ttl {
  font-family:"notosans-b";
  text-shadow:0 0.93vw 0.93vw rgba(0,0,0,.5);
}
@media (min-width:1024px) {
  .hero_info-ttl {
    text-shadow:0 0.3125vw 0.3125vw rgba(0,0,0,.5);
    padding-left:1.875vw;
  }
}
.hero_info-ttl span {
  color:#fff82a;
}

/* SP用ヒーロー画像（.hero_info-img を使わず、common.css の定義に合わせて img で指定） */
.hero_info img {
  width:70vw;
  margin:3vw auto 0;
}
@media (min-width:1024px) {
  .hero_info img { display:none; }
}

/* 箇条書きカード */
.hero_info_det {
  background-color:#fff;
  border-radius:2.325vw;
  margin-top:3vw;
  padding:2.79vw 3.953vw;
}
@media (min-width:1024px) {
  .hero_info_det {
    border-radius:0.78vw;
    padding:1.25vw 1.796vw;
  }
}
.hero_info_detItem{ 
  color:#15a93b;
  font-family:"notosans-b";
  font-weight:600;
  font-size:3.488372093vw;
  line-height:1.66;
}
@media (min-width:1024px) {
  .hero_info_detItem {
    font-size:1.71875vw;
    line-height:1.818;
  }
}
.hero_info_detItem span {
  font-size:2.3255813953vw;
}
@media (min-width:1024px) {
  .hero_info_detItem span { font-size:1.171875vw; }
}

/* ヒーローボタン */
.hero_info_btn {
  background-color:#dd6b15;
  border-radius:10vw;
  width:63.95vw;
  margin:5.58vw auto 0;
  -webkit-box-shadow:0 0.465vw 0.93vw #414143;
  box-shadow:0 0.465vw 0.93vw #414143;
}
@media (min-width:1024px) {
  .hero_info_btn {
    width:21.48vw;
    -webkit-box-shadow:0 0.3125vw 0.3125vw #414143;
    box-shadow:0 0.3125vw 0.3125vw #414143;
    margin-top:2.1vw;
  }
}
.hero_info_btn a {
  color:#fff;
  font-family:"notosans-b";
  font-size:4.6511627907vw;
  letter-spacing:0;
  display:block;
  width:100%;
  text-align:center;
  padding:2vw 0;
}
@media (min-width:1024px){
  .hero_info_btn a {
    font-size:1.5625vw;
    padding:0.78vw 0;
  }
}

/* PC用ヒーロー画像 */
@media (min-width:1024px){
  .hero_img img {
    width:38.28vw;
    margin:0 auto;
  }
}

/* 導入実績の注意書き */
.company-caution p {
  color: #414143;
  font-size:3vw;
  line-height:1.66;
}
@media (min-width:1024px){
  .company-caution p {
    font-size:1.8vw;
    line-height:1.66;
  }
}

/* JCIS WEB DBの注意書き 右側に配置 */
.jcis-web-db {
  color: #414143;
  font-family:"notosans-b";
  font-weight:600;
  font-size:3.488372093vw;
  line-height:1.66;
  text-align:right;
  margin-top: 1vw;
}
@media (min-width:1024px){
  .jcis-web-db {
    font-size:1.71875vw;
    line-height:1.818;
  }
}

/* ヒーロー内だけ黒半透明＋白文字 */
.jcis-web-db-hero {
  display: inline-block;
  background: rgba(0, 0, 0, 0.6);
  font-family: "notosans-b";
  font-weight: 600;
  font-size: 1.8vw;
  line-height: 1.66;
  padding: 0.8vw 1.4vw;
  border-radius: 0.6vw;
  margin-top: 5vw;
  margin-left: 5vw;
  text-align: center;
}

.jcis-web-db-hero,
.jcis-web-db-hero p {
  color: #fff;
  text-align: center;
}

@media (min-width:1024px){
  .jcis-web-db-hero {
    font-size: 1.2vw;
    padding: 0.4vw 0.8vw;
  }
}

.function{
  background-image: url("../../img/function_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: unset;
}