:root {
  --maxWidth: 800px;
}
.tab_bx {
  /*  */
  & button {
    width: calc(100% / 8);
    min-width: 10rem;
  }
}

.tab-content #contentA1 {
  /*  */
  & section {
    max-width: var(--maxWidth);
    margin-top: 40px;
    margin: 40px auto 0;

    & h4 {
      margin-bottom: 1.25rem;
      color: var(--ai_02-500);
      font-weight: 700;

      &::before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-top: 5px;
        margin-right: 12px;
        vertical-align: top;
        background-color: var(--ai_02-500);
        border: 3px solid var(--ai_02-50);
        border-radius: 10px;
        box-sizing: content-box;
      }
    }

    & p {
      text-indent: 1rem;
    }
  }

  & > p {
    max-width: var(--maxWidth);
    text-indent: 1rem;
    margin: 0 auto 1.5rem;
    word-break: keep-all;

    &:first-of-type { 
        text-indent: 0; 
    } 
  }
  & .legal {
    /*  */
    & ul {
      padding: calc(1.25rem + 2px);
      border: 1px solid var(--ai_primary-500);
      border-radius: 1rem;

      & li {
        margin-bottom: 0.5rem;

        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }
  }
}

.tab-content #contentA2 {
  /*  */
  & .listBx {
    /*  */
    & li strong {
      display: block;
      font-weight: 900;
      text-align: center;

      & em {
        color: var(--ai_primary-500);
        font-style: normal;
      }
    }
    & .process0 {
      padding: calc(3rem) 7rem calc(3rem - 1px);
      border: 1px solid var(--ai_primary-500);
      border-radius: 9999px;

      & .mission,
      & .vision {
        padding: 1.5rem 2rem;
        text-align: center;
        border-radius: 9999px;

        & strong {
        }
        & p {
          margin-top: 0.25rem;
          font-size: calc(1.5rem);
          word-break: keep-all;
        }
      }
      & .mission {
        color: var(--ai_primary-500);
        background-color: var(--ai_primary-50);
      }
      & .vision {
        margin-top: 1.25rem;
        color: var(--ai_primary-50);
        background-color: var(--ai_primary-500);
      }
    }
    & .process1 {
      margin-top: 2rem;

      &::before {
        content: '';
        display: block;
        background: url(/images/img_arrow_vission.png) no-repeat 50% 50% / auto
          48px;
        width: 200px;
        height: 48px;
        margin: 0 auto 2rem;
      }

      & ol {
        margin-top: 2rem;
        counter-reset: numbering;

        & > li {
          display: flex;
          padding: 1rem 1rem 1rem;
          margin-bottom: 0;
          border-bottom: 1px solid var(--ai_primary-500);

          & span {
            flex-shrink: 0;
            width: 40%;
            padding-right: 1rem;
            padding-left: 2.5rem;
            font-weight: 600;
            font-size: calc(1em + 1px);
            text-indent: -2.5rem;
            word-break: keep-all;

            &::before {
              counter-increment: numbering;
              content: counter(numbering, decimal-leading-zero) '. ';
              display: inline-block;
              width: 2.5rem;
              text-indent: 0;
            }
          }
          & ul {
            width: 100%;
            padding: 0 1rem;

            & li {
              margin-bottom: 0;

              &:not(:first-child) {
                margin-top: 0.25rem;
              }
            }
          }
        }
      }
    }
    & .process2 {
      /*  */
      margin-top: 2rem;

      &::before {
        content: '';
        display: block;
        background: url(/images/img_arrow_vission.png) no-repeat 50% 50% / auto
          48px;
        width: 200px;
        height: 48px;
        margin: 0 auto 2rem;
      }
      & ul {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: 2rem;
      }
      & li {
        width: calc((100% - (1rem * 3)) / 4);
        margin-bottom: 0;
        background: var(--blue-light-active);

        & p {
          position: relative;
          padding: 1.5rem 1.25rem 2rem 1.5rem;
          border-top: 3px solid var(--dark-normal);
          line-height: 1.25;
          display: flex;
          flex-flow: column wrap;
          height: 100%;

          &::after {
            content: 'D';
            position: absolute;
            bottom: 0;
            right: 0;
            font-weight: 900;
            font-style: normal;
            font-size: 3rem;
            margin-right: 8px;
            color: #fff;
            opacity: 0.75;
            line-height: 1;
            text-shadow: 2px 2px var(--dark-light-hover);
          }

          & em {
            font-style: normal;
          }
        }

        &.item1 p::after {
          content: 'D';
        }
        &.item2 p::after {
          content: 'AI';
          letter-spacing: -1px;
        }
        &.item3 p::after {
          content: 'L';
        }
        &.item4 p::after {
          content: 'Y';
        }
        &.item5 p::after {
          content: 'S';
        }
        &.item6 p::after {
          content: 'P';
        }
        &.item7 p::after {
          content: 'N';
        }
        &.item8 p::after {
          content: 'P';
        }

        & p span:first-of-type {
          margin-bottom: 1rem;
          font-weight: 700;
          letter-spacing: -0.05rem;
        }
        & p span:last-of-type {
          display: block;
          position: relative;
          margin-top: 1rem;
          margin-top: auto;
          z-index: 1;
        }

        &:nth-of-type(3n + 1) {
          background-color: var(--bs-gray-300);
          border-color: var(--bs-gray-700);
        }
        &:nth-of-type(3n + 2) {
          background-color: var(--info-light-active);
          border-color: var(--info-normal);
        }
        &.item4 {
          & p {
            & em {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1100px) {
  .tab-content #contentA2 .listBx .process0 {
    padding-right: 6rem;
    padding-left: 6rem;
    border-radius: 6rem;
  }
  .tab-content #contentA2 .listBx .process2 li {
    width: calc((100% - (1rem * 2)) / 3);
  }
}
@media screen and (max-width: 900px) {
}
@media screen and (max-width: 700px) {
  .tab-content #contentA2 {
    & .listBx {
      & .process0 {
        padding: 2rem;
      }
    }
  }
}
@media screen and (max-width: 500px) {
  .tab-content #contentA2 .listBx .process0 {
    /*  */
    & .mission,
    & .vision {
      & p {
        font-size: 1rem;
      }
    }
  }
  .tab-content #contentA2 .listBx .process1 ol > li {
    flex-flow: column wrap;
  }
  .tab-content #contentA2 .listBx .process1 ol > li span {
    width: 100%;
  }
  .tab-content #contentA2 .listBx .process1 ol > li ul {
    margin-top: 1rem;
  }
  .tab-content #contentA2 .listBx .process2 li {
    width: calc((100% - (1rem * 1)) / 2);
  }
  .tab-content #contentA2 .listBx .process2 li p::after {
    opacity: 0.4;
  }
  .tab-content #contentA2 .listBx .process2 li p span:first-of-type {
    word-break: break-word;
  }
}