@charset "UTF-8";

/* =========================================================
 調整
========================================================= */
ul li,
figcaption.bold {
  font-size: 15px;
}
@media (max-width: 767px) {
  ul li,
  figcaption.bold {
    font-size: 14px;
  }
}

.article {
  margin-bottom: 0;
}


/* =========================================================
 アイコン
========================================================= */
.business-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
}
.business-icon.square {
  width: 46px;
  min-width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.business-icon.circle {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
}
@media (max-width: 767px) {
  .business-icon img {
    width: 100%;
    height: 100%;
  }
  .business-icon.square {
    width: 43px;
    min-width: 43px;
    height: 43px;
  }
  .business-icon.square.type-1,
  .business-icon.square.type-2 {
    padding: 8px;
  }
  .business-icon.square.type-3 {
    padding: 6px;
  }
  .business-icon.square.type-4 {
    padding: 8px 4px;
  }

  .business-icon.circle.type-1,
  .business-icon.circle.type-2,
  .business-icon.circle.type-3 {
    padding: 10px 0;
  }
  .business-icon.circle.type-4 {
    padding: 0 8px;
  }
}

/* =========================================================
 4つの役割
========================================================= */
.core-roles-anchor {
  width: fit-content;
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  cursor: pointer;
}
.core-roles-anchor h3 {
  line-height: 1.4;
}
.core-roles-anchor h3 span:first-child {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
}
.core-roles-anchor h3 span:last-child {
  position: relative;
  padding-right: 24px;  
  border-bottom: 1px solid transparent;
  transition: border 0.2s;
}
.core-roles-anchor h3 span:last-child::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  width: 16px;
  height: 12px;
  background: no-repeat center / contain;
  transition: background-image 0.2s;
  background-image: url(/common/img/icon_arrow_d.svg);
  rotate: 90deg;
}
.core-roles-anchor:hover {
  h3 span:last-child {
    border-bottom: 1px solid var(--color-primary);
  }
  h3 span:last-child::after {
    background-image: url(/common/img/icon_arrow_h.svg);
  }
}
@media (max-width: 767px) {
  .core-roles-anchor {
    gap: 12px;
  }
  .core-roles-anchor h3 span:last-child {
    padding-right: 20px;
  }
  .core-roles-anchor h3 span:last-child::after {
    top: 7px;
  }
}
/* スクロール追従コンテンツ
--------------------------------------------------------- */
.business-scroll-wrap {
  display: flex;
  gap: 68px;
}

/* ------------ サイド追従コンテンツ ------------ */
.business-scroll-side {
  width: 40%;
  max-width: 356px;
}
.business-scroll-side aside {
  position: sticky;
  top: 90px;
  transition: all 0.3s ease;
}
.business-side-nav-images {
  position: relative;
  height: 353px;
}
.business-side-nav-images::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  width: 100%;
  height: 100%;
  background: url(/business/img/img_03.svg) no-repeat center top/contain;
}
.business-side-nav-images img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.business-side-nav-images img.first-img.show,
.business-side-nav-images img.active {
  opacity: 1;
}
.business-side-nav-images .scroll-box01 {z-index: 1;}
.business-side-nav-images .scroll-box02 {z-index: 2;}
.business-side-nav-images .scroll-box03 {z-index: 3;}
.business-side-nav-images .scroll-box04 {z-index: 4;}



/* ------------ スクロールコンテンツ ------------ */
.business-scroll-contents {
  width: calc(60% - 68px);
  min-width: calc(100% - 356px - 68px);
}

@media (max-width: 767px) {
  .business-scroll-side {
    display: none;
  }
  .business-scroll-contents {
    width: 100%;
  }
}


/* スクロールコンテンツ内
--------------------------------------------------------- */
.business-scroll-contents section + section {
  margin-top: 160px;
}
.arrow-flex-box {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  background: var(--color-gray1);
}
.arrow-flex-box h3 {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 215px;
  height: stretch;
  min-height: 70px;
  padding: 13px 20px 13px 11px;
  line-height: 1.4;
  background: var(--color-primary);
  clip-path: polygon(
    0 0,
    calc(100% - 20px) 0, 100% 50%,
    calc(100% - 20px) 100%,
    0 100%
  );
}
.arrow-flex-box h3 + p {
  margin-top: 0;
  padding: 8px 20px 8px 16px;
}

.sp-only-title {
  display: none;
}

@media (max-width: 1024px) {
  .arrow-flex-box {
    flex-direction: column;
  }
  .arrow-flex-box h3 {
    justify-content: center;
    width: 100%;
    min-width: auto;
    min-height: 50px;
    padding: 13px 16px 20px;
    text-align: center;
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - 16px),
      50% 100%,
      0 calc(100% - 16px)
    );
  }
  .arrow-flex-box h3 + p {
    padding: 8px 16px 16px;
  }
}
@media (max-width: 767px) {
  .business-scroll-contents section + section {
    margin-top: 64px;
  }

  .sp-only-title {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 14px;
  }
}