@charset "utf-8";
/*原則pc表示が先*/
/*===============================

	Shufoo AI

================================*/


.flex-list-all-half-item-inner {
  height: 100%;
}

.text-larger {
  margin-bottom: 40px;
}
.ttl-large {
  font-size: clamp(22px,4.4vw,44px)
}
.ttl-medium {
  margin-top: 5.6%;
  margin-bottom: 4.3%;
  font-size: clamp(18px,3.4vw,34px);
  line-height: 1.35;
}

.cont-text_img-row {
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-flow: column nowrap;
}

.cont-text_img-row .function-3-img {
  width: 100%;
  max-width: var(--width-img-max);
  margin-top: auto;
  margin-bottom : 0;
  border: 1px solid #d9d9d9;
}
.function-3-img img{
  width: 100%;
}


@media (min-width:769px) {
  .flex-list-all-half-item:nth-child(2) {
    border-top: none;
  }
  .item-chatbot + .flex-list-all-half-item {
    border-top: 3px solid var(--color-light-gray3);
  }
}


/*===============================

	Shufoo-ai-mainvisual

================================*/

.l-section.mainvisual {
  background-image: url(/biz/assets/solution/images/solution_ai_mainvisual_bg.webp);
  background-color: #FFECEC;
}

.mv-title-prefix {
  padding: 20px 20px 20px 20px;
  margin-bottom: 3.2%;
}

.mv-text-inner {
  max-width: 500px;
  width: 50%;
}

.mv-title-catch-wrap {
  line-height: 1.58;
}

.mv-title-main {
  font-size: clamp(24px, 3.4vw, 35px);
}

.mv-title-sub {
  font-size: clamp(20px, 3.2vw, 32px);
}

.mv-title-prefix {
  max-width: 318px;
  width: 63.6%;
}

.mv-title-prefix img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(24deg) brightness(104%) contrast(101%);
}

.mv-img-inner {
  position: static;
  width: 49.77%;
}

.mv-cta-btn .btn-default:last-child {
    margin-top: min(4vw, 50px);
}

@media all and (min-width: 1400px) {
  .l-section.mainvisual {
    background-size:auto 100%;
  }
}
@media (min-width: 769px) {
  .mv-img-inner {
    margin-top: 3%;
  }
}

@media all and (max-width: 768px) {
   .mv-title-prefix {
    margin-top: 7.2%;
    margin-bottom: 7.2%;
    padding: 10px 18px 10px 15px;
   }
  .mv-title-sub {
    margin-top: 0;
  }
  .mv-text-inner {
      max-width: 500px;
      width: 100%;
  }
  .mv-img-inner {
    width: 76.53%;
    max-width: 380px;
    margin: 0 auto 4.5%;
  }
}/*media*/

/*===============================

	ai-problem

================================*/

.ai-problem {
background: var(--color-light-gray);
}

.ai-problem .ttl-large {
  font-size: clamp(18px,3.4vw,34px);
}

.ai-problem .ttl-large-sub {
  margin-bottom: 0.2em;
}

.cardlist .cardlist-inner {
  gap: min(0.5vw, 20px);
}

.cardlist-inner-item {
  width: 25%;
  padding-top: 0;
  padding-bottom: 0;
}

.cardlist .cardlist-inner-item .title {
    font-size:18px;
}

.tag {
  width: fit-content;
  min-width: 100px;
  display: block;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  padding: 4px 8px;
  border-radius: 3px;
  background: var(--color-main);
}

@media all and (max-width: 768px) {
  .tag {
    margin-bottom: 8px;
  }

  .cardlist-inner-item {
    width: 100%;
    padding: 0;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
  }
  .retail-problem .card-thumbnail img{
    max-width: 300px;
    width: 68%;
    margin-right: auto;
    margin-left: auto;
  }
}


/*===============================

	sec-can

================================*/
.sec-can .fig-bg {
  padding: min(7%, 76px) 40px min(8.4%, 84px);
  background: var(--color-light-beige);
}
.sec-can .confirm-img {
  max-width: 1000px;
  margin: 0 auto;
  border: 1px solid var(--color-font);
}

.confirm-img {
  margin-top: 30px;
}

.confirm-img img {
  width: 100%;
}
@media (max-width: 768px) {
  .sec-can .fig-bg {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/*===============================

	sec-follow

================================*/
.sec-follow {
  background: var(--color-light-beige);
}
.item-chatbot .cont-img {
  border: 1px solid #d9d9d9;
}

@media (min-width: 769px) {
  .item-chatbot .cont-img {
    width: 46.4%;
    max-width: 100%;
  }

  .item-chatbot .cont-text {
    width: 46.4%;
    max-width: 464px;
  }
}/*media*/



.area-cta .ttl-large {
  font-size: clamp(18px,3.4vw,34px);
}

@media (max-width: 768px) {
    .area-cta .ttl-large .icon img {
        margin: 10px auto 8px;
    }
}