:root {
  --color-main: #fc685a;
  --color-white: #fff;
  --color-accent01: #0097f4;
  --color-accent02: #4c5a6c;
  --color-accent03: #004fc4;
  --color-accent04: #31cfeb;
  --color-accent05: #e5f4fd;
  --color-accent06: #79ccff;
  --color-accent07: #dbff12;
  --color-accent08: #3ddec6;
  --color-plan01: #178962;
  --color-plan01-bg: #eafff7;
  --color-plan02: #87d951;
  --color-plan02-bg: #f0ffe6;
  --color-black: #2c3540;
  --color-txt: #222;
  --color-gray: #ddd;
  --color-gray02: #929dac;
  --color-link: #00f;
}

/* =======================================================
fv
======================================================= */
.bl-fv {
  background: url("../images/ai-personnel/mv-bg.jpg") top center/cover no-repeat;
}
.bl-fv-hgroup .bl-hgroup-ttl-deco::after {
  right: -112px;
  bottom: -11px;
  width: 96px;
  height: 114px;
  background: url("../images/ai-personnel/mv-robot.png") top center/contain no-repeat;
}

@media screen and (width <= 750px) {
  .bl-fv {
    background: url("../images/ai-personnel/mv-bg-sp.jpg") top center/cover no-repeat;
  }
  .bl-fv-item:first-of-type::after {
    top: -134px;
    left: -12px;
    width: 123px;
    height: 145px;
    background: url("../images/ai-personnel/mv-robot-sp.png") top center/contain no-repeat;
  }
}
/* =======================================================
about
======================================================= */
.bl-about .bl-unlimited-intro {
  margin-bottom: 40px;
  text-align: center;
}
.bl-about .bl-unlimited-def {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.bl-about .bl-unlimited-dttl {
  padding: 4px 0 7px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-white);
  text-align: center;
  background: var(--color-accent01);
  border-radius: 16px 16px 0 0;
}
.bl-about .bl-unlimited-ditem {
  padding: 14px 0 16px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  background: var(--color-accent05);
}
.bl-about .bl-column {
  margin-bottom: 64px;
}
.bl-about .bl-sample {
  margin-bottom: 40px;
}
.bl-about .bl-sample-ttl {
  margin-bottom: 24px;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
}
.bl-about .bl-sample-movie {
  width: 708px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid var(--color-gray);
}
.bl-about .bl-sample-movie > iframe {
  width: 100%;
  height: 100%;
}
.bl-about .bl-volume-ttl {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}
.bl-about .bl-volume-def {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.bl-about .bl-volume-dwrap {
  position: relative;
  padding: 16px 0 14px;
  text-align: center;
  background: var(--color-accent05);
  border: 1px solid var(--color-accent01);
  border-radius: 8px;
}
.bl-about .bl-volume-dwrap::after {
  position: absolute;
  top: 50%;
  right: 24px;
  width: 88px;
  height: 88px;
  content: "";
  transform: translateY(-50%);
}
.bl-about .bl-volume-dwrap.--problem::after {
  background: url("../images/ai-personnel/about-problem-icon.svg") top center/contain no-repeat;
}
.bl-about .bl-volume-dwrap.--text::after {
  background: url("../images/ai-personnel/about-text-icon.svg") top center/contain no-repeat;
}
.bl-about .bl-volume-dttl {
  font-size: 18px;
  font-weight: 700;
}
.bl-about .bl-volume-ditem {
  font-size: 40px;
  font-weight: 700;
  color: var(--color-accent01);
}
.bl-about .bl-volume-ditem-deco {
  font-size: 20px;
}
.bl-about .bl-volume-btn {
  width: 320px;
  margin: 0 auto;
}
.bl-about .bl-volume-btn-wrapper {
  text-align: center;
}
.bl-about .bl-volume-btn .el-btn-arrow {
  justify-self: end;
}

@media screen and (width <= 750px) {
  .bl-about .bl-unlimited-def {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 64px;
  }
  .bl-about .bl-unlimited-dttl {
    padding: 6px 0 9px;
    font-size: 30px;
    border-radius: 24px 24px 0 0;
  }
  .bl-about .bl-unlimited-ditem {
    padding: 21px 0 24px;
    font-size: 28px;
  }
  .bl-about .bl-column {
    margin-bottom: 80px;
  }
  .bl-about .bl-sample {
    margin-bottom: 64px;
  }
  .bl-about .bl-sample-ttl {
    margin-bottom: 32px;
    font-size: 36px;
  }
  .bl-about .bl-sample-movie {
    width: 100%;
    height: 388px;
    border-width: 2px;
  }
  .bl-about .bl-volume-ttl {
    margin-bottom: 32px;
    font-size: 36px;
  }
  .bl-about .bl-volume-def {
    grid-template-columns: auto;
    gap: 24px;
    margin-bottom: 40px;
  }
  .bl-about .bl-volume-dwrap {
    padding: 24px 21px;
    border-width: 2px;
    border-radius: 12px;
  }
  .bl-about .bl-volume-dwrap::after {
    right: 36px;
    width: 132px;
    height: 132px;
  }
  .bl-about .bl-volume-dttl {
    font-size: 30px;
  }
  .bl-about .bl-volume-ditem {
    font-size: 64px;
  }
  .bl-about .bl-volume-ditem-deco {
    font-size: 30px;
  }
  .bl-about .bl-volume-btn {
    width: 480px;
  }
}
/* =======================================================
plan
======================================================= */
.bl-plan .bl-coupon {
  margin-bottom: 16px;
  background: url("../images/ai-personnel/coupon-bg01.png") top center/cover no-repeat;
}

@media screen and (width <= 750px) {
  .bl-plan .bl-coupon {
    display: grid;
    place-content: center;
    height: 518px;
    padding: 0;
    margin-bottom: 24px;
    background: url("../images/ai-personnel/coupon-bg01-sp.png") top center/cover no-repeat;
  }
  .bl-plan .bl-price {
    margin-bottom: 0;
  }
}
/* =======================================================
reskill
======================================================= */
.bl-reskill {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 24px;
  place-content: center;
  align-items: center;
  width: 640px;
  padding: 12px 36px;
  margin: 0 auto;
  background: var(--color-white);
  border: 1px solid var(--color-accent01);
}
.bl-reskill-txt {
  text-align: left;
}

@media screen and (width <= 750px) {
  .bl-reskill {
    grid-template-columns: 110px 1fr;
    gap: 40px;
    width: 100%;
    padding: 24px 52px;
    font-size: 24px;
    border-width: 2px;
  }
}
/* =======================================================
feature
======================================================= */
.bl-feature {
  padding: 64px 0;
}
.bl-feature-ttl {
  margin-bottom: 24px;
}
.bl-feature-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.bl-feature-item .bl-item-ttl {
  padding: 7px 0 8px;
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  background: var(--color-accent05);
}
.bl-feature-item .bl-item-txt {
  font-size: 16px;
}

@media screen and (width <= 750px) {
  .bl-feature {
    padding: 80px 0;
  }
  .bl-feature-ttl {
    margin-bottom: 40px;
  }
  .bl-feature-list {
    grid-template-columns: auto;
    gap: 40px;
  }
  .bl-feature-item .bl-item-ttl {
    padding: 12px 0 16px;
    margin-bottom: 24px;
    font-size: 32px;
  }
  .bl-feature-item .bl-item-txt {
    font-size: 28px;
  }
}