: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;
}

/* =======================================================
lower-mv
======================================================= */
.bl-lower-mv-ttl {
  gap: 10px;
}
.bl-lower-mv-ttl-wrapper::after {
  right: -92px;
  width: 92px;
  height: 102px;
  background: url("../images/faq/lower-mv-robot.png") top center/contain no-repeat;
}
.bl-lower-mv-ttl::before {
  width: 36px;
  height: 14px;
  background: url("../images/faq/lower-mv-faq.svg") top center/contain no-repeat;
}

@media screen and (width <= 750px) {
  .bl-lower-mv-ttl-wrapper::after {
    right: -126px;
    width: 126px;
    height: 140px;
    background: url("../images/faq/lower-mv-robot-sp.png") top center/contain no-repeat;
  }
  .bl-lower-mv-ttl::before {
    width: 62px;
    height: 22px;
  }
}
/* =======================================================
faq
======================================================= */
.bl-faq {
  padding: 64px 0 96px;
}
.bl-faq .bl-change {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}
.bl-faq .bl-change-btn {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 22px 0 21px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-white);
  border-radius: 16px;
}
.bl-faq .bl-change-btn::before {
  position: absolute;
  top: 50%;
  left: 24px;
  width: 48px;
  height: 48px;
  content: "";
  transform: translateY(-50%);
}
.bl-faq .bl-change-btn-inner {
  position: relative;
  z-index: 2;
}
.bl-faq .bl-change-btn.--current:hover {
  opacity: 1;
}
.bl-faq .bl-change-btn.--ai-personnel {
  background: var(--color-accent03);
}
.bl-faq .bl-change-btn.--ai-personnel::before {
  background: url("../images/faq/icon-ai-personnel.svg") top center/contain no-repeat;
}
.bl-faq .bl-change-btn.--generation-ai {
  background: var(--color-accent01);
}
.bl-faq .bl-change-btn.--generation-ai::before {
  background: url("../images/faq/icon-generation-ai.svg") top center/contain no-repeat;
}
.bl-faq .bl-change-btn.--other {
  background: var(--color-accent04);
}
.bl-faq .bl-change-btn.--other::before {
  background: url("../images/faq/icon-other.svg") top center/contain no-repeat;
}
.bl-faq-list {
  display: grid;
  gap: 40px;
}
.bl-faq-item {
  display: none;
  overflow: hidden;
  border: 1px solid;
  border-radius: 16px 16px 0 0;
}
.bl-faq-item.--active {
  display: block;
}
.bl-faq-item .bl-item-ttl {
  padding: 8px 0 11px;
  font-size: 32px;
  font-weight: 700;
  color: var(--color-white);
  text-align: center;
  letter-spacing: 0.06em;
}
.bl-faq-item .bl-item-def {
  display: grid;
  gap: 40px;
  padding: 40px;
}
.bl-faq-item .bl-item-dwrap {
  display: grid;
  gap: 16px;
}
.bl-faq-item .bl-item-dttl {
  position: relative;
  padding: 10px 64px 11px 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-white);
  cursor: pointer;
  background: var(--color-accent02);
}
.bl-faq-item .bl-item-dttl::before {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 30px;
  height: 30px;
  content: "";
  background: var(--color-white);
  border-radius: 5px;
  transform: translateY(-50%);
}
.bl-faq-item .bl-item-dttl::after {
  position: absolute;
  top: 50%;
  right: 25px;
  width: 0;
  height: 0;
  content: "";
  border-color: var(--color-accent02) transparent transparent;
  border-style: solid;
  border-width: 10px 6px 0;
  transform: translateY(-50%);
}
.bl-faq-item .bl-item-dttl.--open::after {
  border-color: transparent transparent var(--color-accent02) transparent;
  border-width: 0 6px 10px;
}
.bl-faq-item .bl-item-dttl-inner {
  position: relative;
  display: block;
  padding-left: 64px;
}
.bl-faq-item .bl-item-dttl-inner::before {
  position: absolute;
  top: -3px;
  left: 16px;
  width: 40px;
  height: 40px;
  content: "";
  background: var(--color-white);
  border-radius: 50%;
}
.bl-faq-item .bl-item-dttl-inner::after {
  position: absolute;
  top: -4px;
  left: 26px;
  font-size: 26px;
  font-weight: 700;
  line-height: calc(38/26);
  color: var(--color-accent02);
  letter-spacing: 0.06em;
  content: "Q";
}
.bl-faq-item .bl-item-ditem {
  display: none;
}
.bl-faq-item.--ai-personnel {
  border-color: var(--color-accent03);
}
.bl-faq-item.--ai-personnel .bl-item-ttl {
  background: var(--color-accent03);
}
.bl-faq-item.--generation-ai {
  border-color: var(--color-accent01);
}
.bl-faq-item.--generation-ai .bl-item-ttl {
  background: var(--color-accent01);
}
.bl-faq-item.--other {
  border-color: var(--color-accent04);
}
.bl-faq-item.--other .bl-item-ttl {
  background: var(--color-accent04);
}

@media screen and (width <= 750px) {
  .bl-faq {
    padding: 80px 0 96px;
  }
  .bl-faq .bl-change {
    grid-template-columns: auto;
    gap: 48px;
    width: 630px;
    margin: 0 auto;
    margin-bottom: 64px;
  }
  .bl-faq .bl-change-btn {
    padding: 32px 0;
    font-size: 30px;
  }
  .bl-faq .bl-change-btn::before {
    left: 36px;
    width: 72px;
    height: 72px;
  }
  .bl-faq-list {
    gap: 64px;
  }
  .bl-faq-item {
    border-width: 2px;
  }
  .bl-faq-item .bl-item-ttl {
    padding: 12px 0 16px;
    font-size: 40px;
  }
  .bl-faq-item .bl-item-dwrap {
    gap: 24px;
  }
  .bl-faq-item .bl-item-dttl {
    padding: 18px 96px 24px 0;
    font-size: 30px;
  }
  .bl-faq-item .bl-item-dttl::before {
    right: 24px;
    width: 45px;
    height: 45px;
  }
  .bl-faq-item .bl-item-dttl::after {
    right: 37px;
    border-width: 15px 9px 0;
  }
  .bl-faq-item .bl-item-dttl.--open::after {
    border-width: 0 9px 15px;
  }
  .bl-faq-item .bl-item-dttl-inner {
    padding-left: 96px;
  }
  .bl-faq-item .bl-item-dttl-inner::before {
    top: -4.5px;
    left: 24px;
    width: 60px;
    height: 60px;
  }
  .bl-faq-item .bl-item-dttl-inner::after {
    top: -6px;
    left: 39px;
    font-size: 36px;
  }
}