.business__bg {
  position: relative;
  overflow-x: clip;
}

/* =================== */
/* リード文セクション */
/* COMPANYページ参照 */
/* =================== */
.pageCompany__lead {
  padding-block: 7.3vw 10rem;
}
.pageCompany__lead-title {
  font-weight: 700;
  line-height: 181.818%;
  font-size: clamp(1.375rem, 1.155rem + 0.94vw, 2rem);
}
.pageCompany__lead-text {
  margin-top: 1.25rem;
  font-weight: 400;
  line-height: 2;
  font-size: 1rem;
}
@media screen and (max-width: 768px) {
  .pageCompany__lead {
    width: fit-content;
    padding-block: 3.5rem 5rem;
  }
  .pageCompany__lead-container {
    padding-inline: 1.2rem;
  }
  .pageCompany__lead-title {
    line-height: 154.545%;
  }
  .pageCompany__lead-text {
    margin-top: 0.25rem;
  }
}

/* =================== */
/* 変革エコシステム */
/* =================== */
.echo__contents {
  display: grid;
  grid-template-columns: auto 32rem;
  row-gap: 1.875rem;
  column-gap: 8.75%;
}
.eco .SectionLead__text-jp {
  font-size: 2rem;
  display: block;
  line-height: 168.75%;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
.eco__details {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  
}
.eco__img {
  align-self: flex-end;
  grid-row: 1 / 3;
  grid-column: 2 / 3;
  img {
    width: 100%;
  }
}

.eco__title {
  font-size: 1.375rem;
  line-height: 181.818%;
  font-weight: 700;
}
.eco__text {
  font-size: 1rem;
  line-height: 2;
  font-weight: 400;
  margin-top: 1.875rem;
}
.eco__img {
  position: relative;
  height: fit-content;
  img {
    width: 100%;
  }
}
.eco-img__item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 10.75rem;
  height: 4.375rem;
  background-color: #fff;
  border: 1px solid var(--textRed-2);
  border-radius: 6px;
  position: absolute;
  transition: transform .25s;

  .en {
    background: linear-gradient(244deg, #E7211A 46.97%, #FFA530 95.68%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.375rem;
    line-height: 1.4;
  }
  .text {
    background: linear-gradient(244deg, #E7211A 46.97%, #FFA530 95.68%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: var(--font-size-Label-Micro, 0.75rem);
    line-height: 2;
    margin-top: -0.375rem;
  }
}
.eco-img__item:nth-of-type(1) {
  top: 4.5rem;
  left: 0;
}
.eco-img__item:nth-of-type(2) {
  top: 4.5rem;
  right: 0;
}
.eco-img__item:nth-of-type(3) {
  bottom: 4.5rem;
  right: 0;
}
.eco-img__item:nth-of-type(4) {
  bottom: 4.5rem;
  left: 0%;
}


@media (hover:hover) {
  .eco-img__item:nth-of-type(1):hover,
  .eco-img__item:nth-of-type(2):hover,
  .eco-img__item:nth-of-type(3):hover,
  .eco-img__item:nth-of-type(4):hover {
    transform: scale(1.4);
  }
}
.eco-img__item:nth-of-type(1):focus-visible,
.eco-img__item:nth-of-type(2):focus-visible,
.eco-img__item:nth-of-type(3):focus-visible,
.eco-img__item:nth-of-type(4):focus-visible {
  transform: scale(1.4);
}

@media screen and (max-width: 1080px) {
  .echo__contents {
    column-gap: 0;
    grid-template-columns: auto 25.6rem;
  }
  .eco__img,
  .eco-img__item {
    transform: scale(0.8);
  }
  .eco-img__item:nth-of-type(1) {
    top: 2.5rem;
  }
  .eco-img__item:nth-of-type(2) {
    top: 2.5rem;
  }
  .eco-img__item:nth-of-type(3) {
    bottom: 2.5rem;
  }
  .eco-img__item:nth-of-type(4) {
    bottom: 2.5rem;
  }
}

@media screen and (max-width: 768px) {
  .echo__contents {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .eco .SectionLead__text-jp {
    font-size: clamp(1.5rem, 0.972rem + 2.25vw, 3rem);
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }
  .eco__details {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
  }
  .eco__img {
    transform: none;
    text-align: center;
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    margin-inline: auto;
  }
  .eco__img img {
    width: 26.25rem;  
  }

  .eco-img__item {
    transform: scale(1);
    height: min(12.7vw, 3.6rem);
    width: min(30vw, 9.01rem);
    
    .en {
      font-size: min(3.84vw, 1.13rem);
      line-height: 1.3;
    }
  
    .text {
      font-size: min(2.1vw, 0.62rem);
      margin-top: 0;
    }
  }
}
/* =================== */
/* 事業紹介 */
/* TOP一部参照 */
/* =================== */
.section__businessList {
  padding-block: 10rem 0;
  overflow-x: clip;
}
.businessList {
  border-top: 1px solid var(--colorBlack);
  position: relative;
  transition: padding-block .3s;
  background-color: #fff;
  overflow: hidden;
}
.businessList a {
  display: block;
  padding-block: 4rem;
}
.businessList a::before {
  content: "";
  width: 100%;
  height: 0;
  background: linear-gradient(244deg, #E7211A 46.97%, #FFA530 95.68%);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .3s, height .3s;
  z-index: 1;
  pointer-events: none;
}
.businessList a::after {
  content: "";
  width: 100%;
  height: 0;
  background: linear-gradient(244deg, #E7211A 46.97%, #FFA530 95.68%);
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: opacity .3s, height .3s;
  z-index: 1;
  pointer-events: none;
}

.businessList:first-of-type {
  border-top: 1px solid var(--colorBlack);
}
.businessList__container {
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
}
.businessList__icon {
  width: 19.0625%;
  aspect-ratio: 1 / 1;
  margin-right: 5.625%;
}
.businessList__details {
  flex: 1;
  position: relative;
}

/* 青丸アイコン　PCのみ */
.businessList__icon-arrow {
  display: inline-grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  aspect-ratio: 1 / 1;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.businessList__icon-arrow svg {
  color: #fff;
  width: 1rem;
  height: 1rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all .3s;
  z-index: 2;
  path {
    stroke: #fff;
  }
}
/* 青丸用 */
.businessList-icon__bg {
  display: inline-block;
  width: 3.5rem;
  height: 3.5rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: var(--linkBlue);
  border: 1px solid var(--linkBlue);
  transform: scale(1.0);
  transition:
  background-color 0.3s,
  transform .3s;
  position: relative;
  overflow: hidden;
}
/* ホバー用 white */
.businessList-icon__bg::before {
  background: #fff;
  content: "";
  pointer-events: none;
  position: absolute;
  right: 0%;
  bottom: 0%;
  width: 200%;
  height: 200%;
  transform: rotate(-45deg) translate(30%, 110%);
  transform-origin: right bottom;
  transition: transform .5s ease;
  z-index: 1;
}

.businessList__number {
  font-family: var(--familyPoppins);
  font-size: clamp(0.75rem, 0.574rem + 0.75vw, 1.25rem);
  font-weight: 600;
  line-height: 100%;
  height: fit-content;
  position: absolute;
  top: 0;
  left: -1rem;
  transform: translateX(-100%);
}
.businessList__en {
  font-family: var(--familyPoppins);
  font-size: clamp(1.5rem, 0.972rem + 2.25vw, 3rem);
  font-weight: 600;
  line-height: 100%;
  width: fit-content;
  padding-bottom: 1rem;
}
.businessList__title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.889;
}
.businessList__text {
  color: var(--colorBlack-2);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.71429;
  margin-top: 0.25rem;
}
.businessList__products {
  min-height: 8.25rem;
}
.businessList__check {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 185.714%;
  padding-left: 1.5rem;
  margin-top: 1rem;
  position: relative;
}
.businessList__check::before {
  content: "";
  background: url(../../images/business/icon-check.svg) no-repeat center center / contain;
  width: 1rem;
  height: 1rem;
  aspect-ratio: 1 / 1;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* 文章内リスト */
.businessList-check-item {
  font-size: 0.875rem;
  line-height: 171.429%;
  padding-left: 1.5rem;
  position: relative;
}
.businessList-check-item::before {
  content: "";
  background-color: var(--colorBlack);
  width: 0.1875rem;
  height: 0.1875rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
}

@keyframes flashShadowTop {
  0% {
    opacity: 0;
    height: 0;
    transform: scale(1);
  }
  20% {
    opacity: .7;
  }
  100% {
    opacity: 0;
    height: 1.5rem;
    transform: scale(2);
  }
}

@keyframes flashShadowBottom {
  0% {
    opacity: 0;
    height: 0;
    transform: scale(1);
  }
  20% {
    opacity: .7;
  }
  100% {
    opacity: 0;
    height: 1rem;
    transform: scale(2);
  }
}

@media (hover:hover) {
  .businessList a:hover .businessList__number,
  .businessList a:hover .businessList__en {
    background: linear-gradient(244deg, #E7211A 46.97%, #FFA530 95.68%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .businessList a:hover::before {
    animation: flashShadowTop .4s ease-out;
  }
  .businessList a:hover::after {
    animation: flashShadowBottom .4s ease-out;
  }

  /* PC青アイコン */
  .businessList a:hover .businessList-icon__bg {
    transform: scale(1.4286);
  }
  .businessList a:hover .businessList__icon-arrow svg {
    transform: translate(-50%, -50%) scale(1.4286);
    path {
      stroke: var(--linkBlue);
    }
  }
  .businessList a:hover .businessList-icon__bg::before {
    transform: rotate(-45deg) translate(50%, 10%);
  }
}

.businessList a:focus-visible .businessList__number,
.businessList a:focus-visible .businessList__en {
  background: linear-gradient(244deg, #E7211A 46.97%, #FFA530 95.68%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.businessList a:focus-visible::before {
  animation: flashShadowTop .4s ease-out;
}
.businessList a:focus-visible::after {
  animation: flashShadowBottom .4s ease-out;
}

/* PC青アイコン */
.businessList a:focus-visible .businessList-icon__bg {
  transform: scale(1.4286);
}
.businessList a:focus-visible .businessList__icon-arrow svg {
  transform: translate(-50%, -50%) scale(1.4286);
  path {
    stroke: var(--linkBlue);
  }
}
.businessList a:focus-visible .businessList-icon__bg::before {
  transform: rotate(-45deg) translate(50%, 10%);
}

@media screen and (max-width: 768px) {
  .section__businessList {
    padding-block: 5rem 0;
  }
  .businessList__container {
    display: block;
    padding-inline: 1rem 1.25rem;
    gap: 0.5rem;
  }
  .businessList__container::after {
    content: "";
    width: 5.8125rem;
    height: 3.5rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: -1rem;
    right: 1.2rem;
    opacity: 1;
  }
  .businessList:nth-of-type(1) .businessList__container::after {
    background-image: url(../../images/top/business-arrow-01-sp.png);
  }
  .businessList:nth-of-type(2) .businessList__container::after {
    background-image: url(../../images/top/business-arrow-02-sp.png);
  }
  .businessList:nth-of-type(3) .businessList__container::after {
    background-image: url(../../images/top/business-arrow-03-sp.png);
  }
  .businessList:nth-of-type(4) .businessList__container::after {
    background-image: url(../../images/top/business-arrow-04-sp.png);
  }
  
  .businessList a {
    padding-block: 2rem;
  }
  .businessList__en {
    padding-bottom: 0.125rem;
  }
  .businessList__number {
    transform: none;
    left: 0;
  }
  .businessList__title {
    font-size: 1rem;
    margin-top: 1.5rem;
    line-height: 2;
  }
  .businessList__text {
    margin-top: 0.125rem;
  }
  .businessList__products {
    min-height: auto;
  }
  .businessList__check {
    margin-top: 1.5rem;
  }
  .businessList__icon-arrow.for-pc {
    display: none;
  }
}

/* 背景の曲線とアイテム */
.pageBusiness .business__bg {
  position: relative;
  overflow-x: clip;
  padding-bottom: 1vw;

  .business__ring {
    position: absolute;
    img {
      width: 100%;
    }
  }
  .item-1 {
    width: min(8px, 0.56vw);
    top: 5vw;
    left: 10vw;
    z-index: var(--indexRingTop);
  }
  .item-2 {
    width: 5.5vw;
    top: 4vw;
    right: 11vw;
    z-index: var(--indexRingBottom);
  }
  .item-3 {
    width: 5.5vw;
    top: 4vw;
    right: 11vw;
    z-index: var(--indexRingTop);
  }
  .item-4 {
    width: min(16px, 1.11vw);
    top: 3.5vw;
    right: 7.5vw;
    z-index: var(--indexRingTop);
  }
}
@media screen and (max-width: 768px) {
/* 背景の曲線とアイテム */
  .pageBusiness .business__bg {
    .item-1 {
      width: min(4.176px, 1.1136vw);
    }
    .item-2,
    .item-3 {
      width: 9.5vw;
      top: 2vw;
    }
    .item-4 {
      width: min(7.354px, 1.96107vw);
    }
  }
}
/* ===================== */
/* 個人向けCTA */
/* ===================== */
.individualCTA {
  margin-block: 5rem 10rem;
}
.individualCTA__contents {
  background-color: #F7F7F7;
  border-radius: 8px;
  padding: 2rem 2rem 2rem 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.individualCTA__lead {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 181.818%;
}
.individualCTA__bannars {
  display: flex;
  gap: 1rem;
}
.individualCTA__bannar {
  display: block;
  max-width: 274px;
}

@media (hover:hover) {
  .individualCTA__bannar:hover {
    opacity: .7;
  }
}
.individualCTA__bannar:focus-visible {
  opacity: .7;
}

@media screen and (max-width: 768px) {
  .individualCTA {
    margin-block: 3.5rem 4.5rem;
  }
  .individualCTA__contents {
    padding: 1.25rem 1.90625rem 2rem 1.90625rem;
    flex-direction: column;
    gap: 1rem;
  }
  .individualCTA__lead {
    font-size: 1.25rem;
    line-height: 2;
  }
  .individualCTA__bannars {
    flex-direction: column;
  }
}