: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/generation-ai/mv-bg.jpg") top center/cover no-repeat;
}
.bl-fv-hgroup .bl-hgroup-ttl-deco::after {
  right: -176px;
  bottom: -3px;
  width: 148px;
  height: 104px;
  background: url("../images/generation-ai/mv-robot.png") top center/contain no-repeat;
}
.bl-fv-item .bl-item-conts {
  font-size: 20px;
}

@media screen and (width <= 750px) {
  .bl-fv {
    background: url("../images/generation-ai/mv-bg-sp.jpg") top center/cover no-repeat;
  }
  .bl-fv-txt {
    margin-bottom: 44px;
  }
  .bl-fv-hgroup {
    margin-bottom: 125px;
  }
  .bl-fv-item:first-of-type::after {
    top: -102px;
    left: -30px;
    width: 176px;
    height: 123px;
    background: url("../images/generation-ai/mv-robot-sp.png") top center/contain no-repeat;
  }
  .bl-fv-item .bl-item-conts {
    font-size: 36px;
  }
}
/* =======================================================
about
======================================================= */
.bl-about .bl-column-head .bl-head-list {
  display: grid;
  gap: 4px;
}
.bl-about .bl-column-head .bl-head-item {
  padding: 8px 24px 11px;
  background: var(--color-white);
}

@media screen and (width <= 750px) {
  .bl-about .bl-column-head .bl-head-list {
    gap: 6px;
  }
  .bl-about .bl-column-head .bl-head-item {
    padding: 12px 32px 16px;
  }
}
/* =======================================================
plan
======================================================= */
.bl-plan-tbl-outer {
  margin-bottom: 0;
}

/* =======================================================
feature
======================================================= */
.bl-feature {
  padding: 64px 0;
}
.bl-feature-ttl {
  margin-bottom: 36px;
}
.bl-feature-list {
  display: grid;
  gap: 40px;
  margin-bottom: 40px;
}
.bl-feature-item {
  display: grid;
  grid-template: "head ttl" "head txt";
  grid-template-rows: auto 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 32px;
}
.bl-feature-item .bl-item-head {
  grid-area: head;
  padding: 20px 16px 24px;
  background: var(--color-accent05);
}
.bl-feature-item .bl-item-head .bl-head-dwrap {
  display: grid;
  grid-template-columns: 190px 1fr;
}
.bl-feature-item .bl-item-head .bl-head-dwrap:not(:last-of-type) .bl-head-dttl {
  border-bottom: 2px solid var(--color-white);
}
.bl-feature-item .bl-item-head .bl-head-dwrap:not(:last-of-type) .bl-head-ditem {
  border-bottom: 2px solid var(--color-accent05);
}
.bl-feature-item .bl-item-head .bl-head-dttl {
  display: grid;
  place-content: center;
  padding: 10px 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-accent07);
  background: var(--color-accent01);
}
.bl-feature-item .bl-item-head .bl-head-ditem {
  display: flex;
  align-items: center;
  padding-left: 12px;
  background: var(--color-white);
}
.bl-feature-item .bl-item-img-wrapper {
  grid-area: head;
}
.bl-feature-item .bl-item-ttl {
  grid-area: ttl;
  padding-bottom: 16px;
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 700;
  border-bottom: 1px solid var(--color-gray);
}
.bl-feature-item .bl-item-txt {
  grid-area: txt;
}
.bl-feature .bl-example-ttl {
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 44px;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--color-accent01);
}
.bl-feature .bl-example-ttl::after {
  position: absolute;
  bottom: -20px;
  left: 50%;
  width: 0;
  height: 0;
  content: "";
  border-color: var(--color-accent01) transparent transparent transparent;
  border-style: solid;
  border-width: 20px 40px 0;
  transform: translateX(-50%);
}
.bl-feature .bl-example-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.bl-feature .bl-example-item .bl-eitem-ttl {
  padding: 12px 0 15px;
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  background: var(--color-accent05);
}

@media screen and (width <= 750px) {
  .bl-feature {
    padding: 80px 0;
  }
  .bl-feature-ttl {
    margin-bottom: 48px;
  }
  .bl-feature-list {
    gap: 64px;
    margin-bottom: 64px;
  }
  .bl-feature-item {
    grid-template: "head" "ttl" "txt";
    grid-template-rows: auto;
    grid-template-columns: auto;
    gap: 0;
  }
  .bl-feature-item .bl-item-head {
    padding: 24px;
    margin-bottom: 24px;
  }
  .bl-feature-item .bl-item-head .bl-head-dwrap {
    grid-template-columns: 240px 1fr;
  }
  .bl-feature-item .bl-item-head .bl-head-dwrap:not(:last-of-type) .bl-head-dttl {
    border-width: 3px;
  }
  .bl-feature-item .bl-item-head .bl-head-dwrap:not(:last-of-type) .bl-head-ditem {
    border-width: 3px;
  }
  .bl-feature-item .bl-item-head .bl-head-dttl {
    padding: 15px 0 19px;
    font-size: 30px;
  }
  .bl-feature-item .bl-item-head .bl-head-ditem {
    padding-left: 18px;
  }
  .bl-feature-item .bl-item-img-wrapper {
    margin-bottom: 24px;
  }
  .bl-feature-item .bl-item-ttl {
    padding-bottom: 24px;
    margin-bottom: 24px;
    font-size: 36px;
    text-align: center;
    border-width: 2px;
  }
  .bl-feature .bl-example-ttl {
    padding-bottom: 24px;
    margin-bottom: 66px;
    font-size: 36px;
    border-width: 2px;
  }
  .bl-feature .bl-example-ttl::after {
    bottom: -30px;
    border-width: 30px 60px 0;
  }
  .bl-feature .bl-example-list {
    grid-template-columns: auto;
    gap: 48px;
  }
  .bl-feature .bl-example-item .bl-eitem-ttl {
    padding: 16px 0 20px;
    margin-bottom: 18px;
    font-size: 32px;
  }
}
/* =======================================================
application
======================================================= */
.bl-application-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.bl-application-item {
  width: calc((100% - 32px) / 2);
}
.bl-application-item .bl-item-txt.el-att {
  justify-content: center;
  font-size: 17px;
}

@media screen and (width <= 750px) {
  .bl-application-item {
    width: 100%;
  }
  .bl-application-item .bl-item-txt.el-att {
    font-size: 28px;
  }
}
/* =======================================================
detail
======================================================= */
.bl-detail .bl-sample-ttl {
  margin-bottom: 24px;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.06em;
}
.bl-detail .bl-sample-movie {
  width: 708px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid #707070;
}
.bl-detail .bl-sample-movie > iframe {
  width: 100%;
  height: 100%;
}
.bl-detail .bl-support-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.bl-detail .bl-support-item .bl-sitem-txt {
  font-size: 18px;
}
.bl-detail .bl-support-item:first-of-type .bl-sitem-txt::after {
  background: url("../images/common/icon-support04.svg") top center/contain no-repeat;
}
.bl-detail .bl-support-item:nth-of-type(2) .bl-sitem-txt::after {
  background: url("../images/common/icon-support01.svg") top center/contain no-repeat;
}
.bl-detail .bl-support-item:nth-of-type(3) .bl-sitem-txt::after {
  background: url("../images/common/icon-support02.svg") top center/contain no-repeat;
}
.bl-detail .bl-support-item:nth-of-type(4) .bl-sitem-num {
  background: var(--color-accent08);
}
.bl-detail .bl-support-item:nth-of-type(4) .bl-sitem-txt {
  border-color: var(--color-accent08);
}
.bl-detail .bl-support-item:nth-of-type(4) .bl-sitem-txt::after {
  background: url("../images/common/icon-support03.svg") top center/contain no-repeat;
}

@media screen and (width <= 750px) {
  .bl-detail .bl-sample-ttl {
    margin-bottom: 32px;
    font-size: 36px;
  }
  .bl-detail .bl-sample-movie {
    width: 100%;
    height: 388px;
    border-width: 2px;
  }
  .bl-detail .bl-support-list {
    grid-template-columns: auto;
    gap: 48px;
  }
  .bl-detail .bl-support-item .bl-sitem-txt {
    font-size: 30px;
  }
}