.message {
  > div {
    display: flex;
    align-items: baseline;
    gap: 0.5em;

    p {
      font-weight: bold;
    }

    img:nth-child(1) {
      width: 5.5em;
    }

    img:nth-child(2) {
      width: 6.75em;
      margin-right: 0.5em;
    }
  }

  > p {
    font-size: 0.8125rem;
    font-weight: bold;
    line-height: 1.9em;
    max-width: 34em;
    margin-top: 1em;
  }
}

.sm-cards {
  position: relative;
  display: grid;
  margin-top: 3rem;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem 1rem;


  .card {
    display: flex;
    flex-direction: column;

    .card-header {
      flex-grow: none;
      margin-bottom: 1.5em;
      border-bottom: 4px solid var(--color-mediumblue-500);

      > div {
        font-size: 0.625rem;
        display: flex;
        align-items: start;
        gap: 1rem;
      }

      p.bold.quicksand {
        padding-top: 1rem;

      }


      > p {
        font-size: 0.8125rem;
        font-weight: bold;
        margin-top: 1em;
        margin-bottom: 0.5em;
      }

      img {
        width: auto;
        height: 4rem;
      }
    }
  }

  .hands {
    > div {
      font-size: 0.8125rem;
      max-width: 13em;
      margin-right: 0;
      margin-left: auto;
      transform: translateY(-1rem);

      > div {
        display: flex;
      }
    }

    .dotline-pride {
      font-weight: bold;
      text-decoration: underline;
    }
  }
}

.new-card {
  padding: 2em;
  border: 5px solid var(--border-color);
  border-radius: 20px;
  box-shadow: var(--shadow-size) var(--shadow-size) var(--shadow-color);

  --border-color: var(--color-red-100);
  --shadow-color: var(--color-red-100);
  --shadow-size: 1.5rem;

  .title {
    font-size: 1.25rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 1em;

    img {
      width: 3em;
    }
  }

  .message {
    font-size: 0.75rem;
    margin-top: 2em;
  }

  &.transparent {
    position: relative;
    --transparent-color: #FFE6E6;

    &:after {
      position: absolute;
      z-index: -1;
      top: calc(var(--shadow-size) - 5px);
      right: 0;
      bottom: 0;
      left: calc(var(--shadow-size) - 5px);
      content: "";
      border-top-left-radius: 20px;
      background-color: var(--transparent-color);
    }
  }
}

.top {
  position: relative;
  margin-bottom: 7rem;

  .about-dotty {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(max(35%, calc(50vw - 540px + 35%)), 35%);


    > img:first-child {
      transform: translateX(-35%);
    }

    a:first-child > img:first-child {
      transform: translateX(-35%);
    }

    .dotty {
      display: inline-block;

      &.anim {
        animation: dotty 3s ease-out infinite;
        animation-direction: alternate;
      }

      &:not(.anim) {
        animation: dotty-bound 1s both;
      }
    }
  }

  .dotline-social {
    font-size: 0.625rem;
    font-weight: bold;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    transform: rotate(90deg) translate(2rem, -150%);
    gap: 1em;

    img {
      transform: rotate(-90deg);
    }
  }
}

.about-page-top-grid {
  display: grid;
  grid-template-columns: auto min(65%, 647px);

  .quicksand {
    font-size: 0.625rem;
    line-height: 1.9em;
    max-width: 13em;
    margin-top: 1em;
  }

  .message2 {
    font-size: 3.75rem;
    font-weight: bold;
    margin-top: 0.25em;
  }

  .message3 {
    font-size: 1.375rem;
    font-weight: bold;
    margin-top: 1.5em;
  }

  .message4 {
    font-size: 0.875rem;
    margin-top: 2em;
  }

  span {
    font-size: 0.625rem;
    display: inline-block;
    margin-top: 15px;
    padding: 0.5em 2em;
    text-decoration: none;
    color: var(--color-white);
    border-radius: 20px;
    background-color: var(--color-mediumblue-500);

    &:hover {
      opacity: 0.8;
    }
  }
}

.story {
  position: relative;

  .message {
    > div {
      display: flex;
      align-items: baseline;
      gap: 0.5em;

      img:nth-child(1) {
        width: 9em;
      }

      img:nth-child(2) {
        width: 5em;
        margin-right: 0.5em;
        transform: translateY(0.5em);
      }
    }
  }
}

.lg-cards {
  display: flex;
  flex-direction: column;
  margin-top: 8rem;
  margin-bottom: 6rem;
  gap: 8rem;

  .card {
    position: relative;
    padding: 6rem 1.5rem;
    border: 5px solid var(--color-mediumblue-300);
    border-radius: 20px;
    box-shadow: 2rem 2rem var(--color-mediumblue-300);

    .number {
      font-family: "Quicksand", sans-serif;
      font-size: 3.125rem;
      font-weight: bold;
      position: absolute;
      top: 0;
      left: 50%;
      padding: 0.1em 0.5em;
      transform: translate(-50%, -50%);
      color: var(--color-mediumblue-500);
      border-radius: 40px;
      background: none;
    }

    .title {
      font-size: 3.75rem;
      font-weight: bold;
      margin-bottom: 0.5em;
    }

    .card-body > div {
      font-size: 0.875rem;
      line-height: 1.6rem;;
      display: grid;
      align-items: start;
      grid-template-columns: 1fr 1fr;
      gap: 2.2rem;

      .image {
        padding: 1.5rem;
        border: 2px solid var(--color-mediumblue-500);
        border-radius: 15px;

        img {
          width: 100%;
        }
      }
    }

    .pagination {
      font-family: "Quicksand", sans-serif;
      font-size: 0.875rem;
      font-weight: bold;
      display: flex;
      align-items: end;
      gap: 1rem;

      div {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 1rem;
      }

      a {
        text-decoration: none;
        color: black;
      }

      .current {
        color: #707070;
      }
    }
  }
}

.top-right-block {
  img {
    margin-right: auto;
    margin-left: auto;
  }

  p {
    font-size: 0.9375rem;
    font-weight: bold;
    line-height: 2;
    margin-top: 5rem;
  }
}

.identify {
  .frame {
    font-weight: bold;
    position: relative;
    margin-top: -2.4rem;
    padding: 5rem 2rem 6rem;

    .corner {
      position: absolute;
      width: 3.5em;

      &:first-of-type {
        top: 0;
        left: 0;
      }

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

    *:nth-child(2) {
      font-size: 0.75rem;
    }

    *:nth-child(3) {
      font-size: 1.5rem;
      margin-top: 2.5rem;
    }

    *:nth-child(4) {
      font-size: 1.1rem;
      margin-top: 1rem;
    }
  }

  .lg-cards {
    gap: 10rem;

    .card {
      position: relative;
      padding: 6rem 4rem;

      &:after {
        position: absolute;
        z-index: -1;
        top: calc(2rem - 5px);
        right: 0;
        bottom: 0;
        left: calc(2rem - 5px);
        content: "";
        border-top-left-radius: 20px;
        background-color: #E8E6FA;
      }

      .number {
        padding: 0;
        border: none;
      }

      .card-body {
        > div {
          > p {
            font-weight: bold;
            line-height: 2em;
          }
        }
      }

      &.vision {
        .number {
          left: 20%;
        }

        .frame {
          *:nth-child(4) {
            margin-top: 2rem;
          }
        }

        .card-body {
          > div:nth-child(2) {
            margin-top: 2rem;

            a {
              display: inline-block;
              width: 100%;
              margin-top: 2em;
              text-align: center;
              color: var(--color-black);
            }
          }
        }
      }

      &.value {
        .number {
          left: 80%;
        }

        .frame {
          *:nth-child(4) {
            margin-top: 2rem;
          }
        }

        .card-body {
          > div:nth-child(2) {
            display: block;

            img {
              margin-top: 4em;
              margin-right: auto;
              margin-left: auto;
            }

            a {
              display: inline-block;
              width: 100%;
              margin-top: 2em;
              text-align: center;
              color: var(--color-black);
            }
          }
        }
      }
    }
  }

  .icon-logo {
    margin-top: 4rem;

    img {
      margin-right: auto;
      margin-left: auto;
    }

    &.dotline {
      margin-top: 12rem;
      margin-bottom: 12rem;
    }
  }

  .message1 {
    .frame {
      max-width: 630px;
      margin-top: 2rem;
      padding-left: 7rem;
      /* 2504追加 */
      margin-inline: auto;
    }

    > p {
      font-size: 0.9375rem;
      font-weight: bold;
      line-height: 2;
      margin-top: 5rem;
    }
  }
}

.message-grid {
  display: grid;
  margin-top: 2em;
  grid-template-columns: repeat(2, 1fr);

  > div:first-child {
    margin-top: 1em;


    p {
      font-size: 0.9rem;
      font-weight: bold;
      line-height: 1.8em;
      padding-right: 8em;
    }
  }

  > div:last-child {
    display: flex;
    align-items: end;
    justify-content: end;
    gap: 1rem;
  }
}

.basic8 {
  position: relative;

  .message-grid {
    & > div:first-child {
      p {
        font-size: 0.9rem;
        font-weight: bold;
        line-height: 1.8em;
        padding-right: 4rem;
      }
    }
  }

  .message {
    > div {
      img:nth-child(1) {
        width: 7em;
      }
    }
  }

  .about-page-top-grid {
    > div:first-child {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    p:last-child {
      font-size: 1.375rem;
      font-weight: bold;
    }

    .basic8 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;

      > div {
        padding: 1em;
        border: 5px solid var(--color-mediumblue-500);

        img {
          margin-right: auto;
          margin-left: auto;
        }
      }
    }
  }

  .sm-cards {
    margin-top: 10rem;
    margin-bottom: 6rem;
    grid-template-columns: repeat(2, 1fr);

    .card-header {
      max-width: 440px;
      border: none;

      > div {
        align-items: center;

        p {
          font-size: 1.2rem;
          font-weight: bold;
          margin-left: 1em;
        }
      }
    }

    .card-body {
      .thumb {
        display: flex;
        align-items: center;
        width: 150px;
        max-width: 100vw;
        height:150px;
        max-height: 100vw;
        border: 5px solid var(--color-mediumblue-500);
        border-radius: 20px;
        box-shadow: .5rem .5rem var(--color-mediumblue-100);
margin-left:25%;

        img {
          width: 100%;
          max-width: 370px;
          margin-right: auto;
          margin-left: auto;
        }
      }

      ul {
        font-size: 0.9375rem;
        max-width: 440px;
        margin-top: 2em;
        padding-left: 1.5em;

        li {
          margin-bottom: 1rem;
        }
      }
    }
  }
}

.strategies {
  position: relative;

  .image-set {
    position: relative;

    > img:nth-child(2) {
      position: absolute;
      bottom: 0;
      left: 0;
      transform: translate(-5%, 0);
    }
  }

  .message {
    font-size: .9rem;
    line-height: 1.8;

    > div {
      img:nth-child(1) {
        width: 10em;
      }
    }
  }

  .about-page-top-grid {
    .animation {
      position: relative;
      z-index: -10;
      bottom: 130px;
      left: -20vw;
      max-width: 500px;
    }

    > div:first-child {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .quicksand {
      font-size: 0.625rem;
      max-width: 15em;
    }

    img {
      margin-left: auto;
      transform: translateY(2rem);
    }

    .about-page-top-grid {
      display: grid;
      grid-template-columns: auto min(55%, 534px);

      .quicksand {
        font-size: 0.625rem;
        line-height: 1.9em;
        max-width: 13em;
        margin-top: 1em;
      }

      .message2 {
        font-size: 3.75rem;
        margin-top: 0.25em;
      }

      .message3 {
        font-size: 1.375rem;
        margin-top: 1.5em;
      }

      .message4 {
        font-size: 0.875rem;
        margin-top: 2em;
      }

      span {
        font-size: 0.625rem;
        display: inline-block;
        margin-top: 15px;
        padding: 0.5em 2em;
        text-decoration: none;
        color: var(--color-white);
        border-radius: 20px;
        background-color: var(--color-mediumblue-500);

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }

  .message-grid {
    margin-top: 0.5em;

    > div:first-child {
      margin-top: 0;
    }
  }

  .sm-cards {
    margin-bottom: 6rem;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 1.5rem;
  }

  .dots_1line {
    margin-bottom: 6rem;

    .new-card {
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-width: 650px;
      margin-right: auto;
      margin-left: auto;
      padding-top: 5em;
      padding-bottom: 5em;

      --border-color: #1300C4;
      --shadow-color: var(--color-mediumblue-300);

      img {
        width: 480px;
        margin-right: auto;
        margin-left: auto;
      }

      a {
        font-size: 1.25rem;
        margin-top: 2.5em;
        margin-left: 2.5em;
        color: black;
      }
    }
  }
}

.dna {
  .hero-img-text {
    transform-origin: 50% 44%;
  }

  .about-page-top-grid {
    grid-template-columns: auto min(55%, 535px);

    > div:first-child {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .message2 {
      line-height: 1.3;
      max-width: 5em;
      transform: translateY(-2rem);
    }

    .message3 {
      transform: translateY(-4rem);
    }


    img {
      transform: translateY(2rem);
    }
  }

  .message-grid {
    margin-top: 0;
    transform: translateY(-4rem);
  }

  .dna-card {
    font-weight: bold;
    position: relative;
    max-width: 786px;
    margin-top: 10rem;
    margin-right: auto;
    margin-left: auto;
    padding: 2.5rem;

    --border-color: #1300C4;
    --shadow-color: var(--color-mediumblue-300);
    --transparent-color: #E8E6FA;

    img {
      position: absolute;
      top: 0;
      left: 50%;
      width: 5rem;
      transform: translate(-50%, -50%);
    }

    p:nth-of-type(1) {
      font-size: 0.75rem;
    }

    p:nth-of-type(2) {
      font-size: 1.875rem;
      margin-top: 1em;
    }

    p:nth-of-type(3) {
      font-size: 0.875rem;
      margin-top: 0.3em;
    }

    p:nth-of-type(4) {
      font-size: 0.9375rem;
      font-weight: normal;
      line-height: 2em;
      margin-top: 1.5em;
    }
  }

  .hero-grid {
    font-weight: bold;
    display: grid;
    overflow: visible;
    align-items: center;
    margin-top: 8rem;
    grid-template-columns: auto min(80%, 750px);

    > div:first-child {
      p:nth-of-type(1) {
        font-size: 0.8125rem;
      }

      p:nth-of-type(2) {
        font-size: 2.125rem;
        margin-top: 0.75em;
      }

      p:nth-of-type(3) {
        font-size: 0.9375rem;
        margin-top: 0.5em;
      }
    }

    .center {
      svg {
        overflow: visible;
      }
    }
  }

  .cards {
    display: grid;
    margin-top: 5rem;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;

    .new-card {
      .message {
        font-size: 0.9375rem;
        line-height: 1.8;
      }
    }
  }

  .recruit {
    max-width: 316px;
    margin: 8rem auto;
    padding: 2rem 3rem;
    border-radius: 15px;
    background-color: var(--color-mediumblue-500);

    img {
      margin-right: auto;
      margin-left: auto;
    }
  }
}

.story {
  .recruit {
    max-width: 316px;
    margin: 8rem auto;
    padding: 2rem 3rem;
    border-radius: 15px;
    background-color: var(--color-mediumblue-500);

    img {
      margin-right: auto;
      margin-left: auto;
    }
  }
}

.culture {
  .top-right-block {
    position: relative;
    padding-top: 10rem;
    padding-left: 8rem;

    > div {
      img:last-of-type {
        margin-top: 1em;
      }
    }

    p {
      font-size: 3.75rem;
      line-height: 1.3em;
      position: absolute;
      bottom: 0;
      left: 0;
      transform: translate(-10%, 50%);
      color: var(--color-red);
    }
  }

  .dotty-message {
    display: flex;
    align-items: end;
    justify-content: center;
    margin-top: 15rem;
    gap: 2rem;
  }

  .culture-list {
    max-width: 629px;
    margin-top: 8rem;
    margin-right: auto;
    margin-left: auto;

    .title {
      border: 5px solid var(--color-mediumblue-500);
      border-radius: 15px;
      box-shadow: 6px 6px var(--color-mediumblue-500);
    }

    ul {
      margin-top: 4rem;
      list-style: none;

      li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 1.25em;
        gap: 1.5em;

        img:first-child {
          width: 2rem;
        }

        p {
          font-weight: bold;
          flex-grow: 2;
        }

        img:last-child {
          width: 0.8rem;
        }
      }
    }
  }

  .lg-cards {
    .card {
      box-shadow: 1rem 1rem var(--color-mediumblue-300);

      .number {
        padding: 0;
        color: var(--color-mediumblue-500);
        border: none;


        img {
          width: 3rem;
        }
      }

      .title {
        font-size: 5.625rem;
        font-weight: bold;
        line-height: 1.2em;
        position: relative;
        margin-bottom: 0.5em;
        margin-left: auto;
        padding-left: calc((100% - 652px) / 2);
        color: var(--color-red);

        img {
          position: absolute;
          z-index: -1;
          right: 0;
          bottom: 0;
        }
      }

      .card-body {
        > div {
          display: block;

          &:nth-child(2) {
            display: flex;
            max-width: 652px;
            margin-top: 5rem;
            margin-right: auto;
            margin-left: auto;
            gap: 1em;

            img {
              width: 232px;
            }

            p {
              line-height: 2em;
              flex-grow: 1;
            }
          }

          &:nth-child(3) {
            display: grid;
            max-width: 652px;
            margin-top: 4rem;
            margin-right: auto;
            margin-left: auto;
            grid-template-columns: repeat(2, 1fr);
            gap: 4rem 2rem;

            > div {
              > div {
                height: 3em;
                border-left: 5px solid var(--color-mediumblue-500);

                p {
                  font-size: 1.375rem;
                  font-weight: bold;
                  margin-left: 0.5em;
                }
              }

              > p {
                margin-top: 1em;
              }
            }
          }
        }
      }
    }
  }
}

.dotty {
  font-weight: bold;
  position: relative;
  overflow: hidden;

  .inner {
    max-width: 402px;
  }

  .description {
    margin-top: 28rem;
  }

  .about-parent {
    font-size: 0.625rem;
    width: 20em;
    margin-top: 3rem;
    margin-bottom: 6rem;
    padding: 1em 2em;
    cursor: pointer;
    color: white;
    border-radius: 20px;
    background-color: var(--color-mediumblue-500);
  }

  .modal-wrapper {
    .new-card {
      width: 90vw;
      max-width: 924px;
      margin-right: auto;
      margin-left: auto;
      padding: 3rem 5rem;
      background-color: var(--color-white);
      --border-color: #1300C4;
      --shadow-color: var(--color-mediumblue-300);
      --shadow-size: 1rem;

      > div:first-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--color-mediumblue-500);

        > div:first-child {
          padding: 0 4em;
          border: 5px solid var(--color-mediumblue-500);
          border-radius: 20px;
          box-shadow: 4px 4px var(--color-mediumblue-100);
        }

        img {
          width: 1.5rem;
        }
      }

      > div:nth-of-type(3) {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2rem;
        gap: 2rem;

        img {
          flex-shrink: 0;
          width: 464px;

        }

        p {
          flex-grow: 2;
          width: 50%;
        }
      }
    }
  }

  .dotty-container {
    position: absolute;
    top: 15rem;
    right: -10%;

    &.anim {
      animation: dotty-bound-2 1s both;

      .half {
        cursor: default !important;
      }
    }

    .dotty-container-inner {
      position: relative;

      img {
        width: min(450px, 45vw);
      }

      .half {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 50%;
        cursor: help;
      }

      .nose {
        position: absolute;
        top: 60%;
        left: 50%;
        width: min(50px, 5vw);
        height: min(50px, 5vw);
        transform: translate(-50%, -50%);
      }
    }
  }

  .left-top-block {
    position: absolute;
    top: 0;
  }
}

.ceo_message {
  > div:first-child {
    position: relative;

    .dotty-icon {
      position: absolute;
      width: 7%;
      top: 72.9%;
      left: 28.8%;
      transform: rotate(-15deg);
    }
  }

  & div img {
    width: 100%;
  }

  .message1 {
    div:first-child {
      align-items: start;

      p {
        font-size: 3.75rem;
        font-weight: bold;
      }

    }

    p + img {
      width: 7em;

    }

    img {
      width: 10em;
      margin-left: auto;
    }
  }

  .card {
    position: relative;
    margin-top: 6rem;
    padding: 2rem;
    border-radius: 20px;
    background-color: var(--color-whitesmoke);

    img {
      flex-shrink: 0;
      width: 320px;
    }

    div:nth-child(2) {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      max-width: 400px;

      a {
        color: var(--color-black);
      }
    }

    .badge {
      font-size: 0.625rem;
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      max-width: 18em;
      transform: rotate(90deg) translate(50%, -60%);
      gap: 2em;

      img {
        width: 3em;
        transform: rotate(-90deg);
      }
    }
  }

  .interviews {
    max-width: 650px;
    margin-top: 5rem;
    margin-right: auto;
    margin-left: auto;

    .title {
      font-weight: bold;
      max-width: 10em;
      margin-bottom: 1em;
      padding-bottom: 1em;
      border-bottom: 1px solid #707070;
    }

    .videos {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 3em 1em;

      .youtube {
        width: 100%;
        aspect-ratio: 16 / 9;

        iframe {
          width: 100%;
          height: 100%;
        }
      }

      .names {
        font-size: .7rem;
        line-height: 1.75em;
        display: flex;
        flex-direction: column;
        margin-top: 1em;
      }

      span.mdate {
        font-size: .6rem;
      }
    }

    .sns {
      align-items: center;
      justify-content: space-evenly;
      max-width: 10em;
      margin-bottom: 6rem;

      img {
        width: 3em;

        &.facebook {
          width: 2.5em;
        }
      }
    }
  }
}

.data {
  .left-top-block {
    max-width: 300px;

    p:nth-of-type(1) {
      max-width: 130px;
    }

    p:nth-of-type(2) {
      max-width: 130px;
    }

    p:nth-of-type(3) {
      font-size: 0.75rem;
      margin-top: 3rem;
    }
  }

  .shadow-box {
    font-size: 0.875rem;
    max-width: 20em;
    margin-bottom: 0;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    text-align: center;
    color: var(--color-mediumblue-500);
    --shadow-size: 6px;

    p {
      font-weight: bold;
    }
  }

  .data-number {
    font-family: "Quicksand", sans-serif;
    font-size: 6.25rem;
    font-weight: bold;
    line-height: 1.2em;
    margin-right: 0.75em;
    letter-spacing: -0.05em;
    color: var(--color-mediumblue-500);

    &.half {
      font-size: 3.125rem;
      margin-bottom: -.8rem;
    }
  }

  .data-grid {
    position: relative;
    align-items: end;
    margin-top: 16rem;
    color: var(--color-mediumblue-500);

    > div:first-child {
      margin-bottom: 0;

      > p {
        font-size: 1.25rem;

        .number {
          font-size: 5rem;
          font-weight: bold;
          line-height: 1.25em;
          margin-right: 0.5rem;
          letter-spacing: -0.05em;
			margin-left: .5em;
        }
      }
    }

    > div:last-child {
      display: flex;
      align-items: end;
      flex-direction: column;
      justify-content: end;

      div:first-child {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        justify-content: end;
        margin-bottom: 0;
      }
    }

    .arrow {
      position: absolute;
      z-index: -1;
      bottom: 7em;
      left: 15%;
      width: min(8vw, 80px);
      transform-origin: left bottom;
    }
  }

  .data-grid2 {
    display: grid;
    margin-top: 4rem;
    color: var(--color-mediumblue-500);
    grid-template-columns: 55% 45%;
    gap: 5rem;

    > div:first-child {
      position: relative;
      display: flex;
      align-items: end;

      img {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 665px;
        margin-right: -3rem;
        margin-bottom: -2rem;
        margin-left: -9rem;
        translate: 0 2rem;
      }

      div:not(:has(img)) {
        margin-right: 0;
        margin-left: auto;
      }
    }

    > div:last-child {
      .persons {
        display: flex;
        flex-direction: column;
        margin-top: 2em;
        gap: 2rem;

        > div {
          display: flex;
          align-items: end;
          gap: 3rem;
        }
      }
    }
  }

  .data-grid3 {
    position: relative;
    display: grid;
    margin-top: 6rem;
    color: var(--color-mediumblue-500);
    grid-template-columns: 55% 45%;
    gap: 5rem;

    > div:first-child {
      .shadow-box {
        margin-top: 0.5rem;
        margin-right: auto;
        margin-left: auto;
      }

      .data-number {
        font-size: 5rem;
        margin-top: 1rem;
        margin-right: 0;
        text-align: center;

        span {
          font-size: 1.25rem;
        }

        + p {
          padding-left: 1rem;
        }
      }
    }

    > div:nth-of-type(2) {
      z-index: -1;
      display: flex;
      align-items: end;
      margin-bottom: 2rem;

      img {
        width: 75%;
        margin-right: auto;
        margin-left: auto;
      }
    }

    .fresh {
      position: absolute;
      z-index: -1;
      bottom: 0;
      left: 0;
      opacity: .7;
    }
  }

  .professions {
    position: relative;
    margin-top: 6rem;
    color: var(--color-mediumblue-500);

    > .shadow-box {
      width: 100%;
      max-width: unset;
    }

    .data-grid4 {
      display: grid;
      margin-top: 5rem;
      grid-template-columns: 1fr 1fr;

      .shadow-box {
        max-width: 10em;
      }

      .sub-grid {
        display: grid;
        margin-top: 3rem;
        grid-template-columns: 1fr 1fr;
        gap: 4em 1.5em;

        > div {
          display: flex;
          gap: 0.5em;

          > div {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            p:nth-of-type(1) {
              font-size: 0.75rem;
              font-weight: bold;
            }

            p:nth-of-type(2) {
              span {
                font-family: "Quicksand", sans-serif;
                font-size: 3.125rem;
                font-weight: bold;
                line-height: 1em;
              }
            }
          }
        }
      }
    }
  }

  .recruit {
    position: relative;
    max-width: 20em;
    margin-right: auto;
    margin-bottom: 10rem;
    margin-left: auto;

    p {
      margin-bottom: 1.75em;
      padding-bottom: 0.75em;
      border-bottom: 1px solid #707070;
    }

    .button {
      padding: 1rem 2rem;
      opacity: .9;
    }

    .join_us {
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      width: 15rem;
      transform: translate(65%, 25%);
    }
  }

  p.data_data {
    font-size: .8em;
    font-weight: bold;
    position: absolute;
    right: -4em;
    bottom: 3em;
    transform: rotate(90deg);
  }


}

.symbol {
  .cover-container {
    position: relative;
    height: 600px;
    background-color: #101480;

    video {
      display: flex;
      width: 100%;
      height: 100%;
    }

    img {
      width: 1080px;
      margin-right: auto;
      margin-left: auto;
    }

    .button {
      position: absolute;
      bottom: 4rem;
      left: 2rem;
      padding: 0.5em 2em;
      color: white;
      border: 2px solid white;
    }
  }

  .message1 {
    margin-top: 0;

    div:first-child {
      align-items: start;

      p {
        font-size: 3.75rem;
      }

      img {
        width: 7em;
      }
    }

    div:last-child {
      align-items: end;
      justify-content: flex-end;

      > picture:nth-of-type(1) {
        width: 25em;
      }

      > img:nth-of-type(1) {
        width: 10em;
      }
    }
  }

  .dot-hero {
    margin-top: 6rem;
    margin-bottom: 6rem;
    --shadow-size: 1rem;

    .title {
      display: grid;
      grid-template-columns: min(335px, 40%) auto;

      img {
        width: 8rem;
      }

      img.dhero {
        width: 14rem;
      }

      > div:nth-child(1) {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      > div:nth-child(2) {
        p:nth-child(1) {
          font-size: 2.6875rem;
          font-weight: bold;
        }

        p:nth-child(2) {
          font-size: 0.8rem;
          font-weight: bold;
        }

        p:nth-child(3) {
          font-size: 0.9375rem;
          line-height: 2em;
          margin-top: 3rem;
        }
      }
    }

    > div:nth-of-type(2) {
      img {
        margin-top: 6rem;
        margin-bottom: 3rem;
      }
    }

    img {
      margin-right: auto;
      margin-left: auto;
    }

    .inner {
      max-width: 478px;
      margin-right: auto;
      margin-left: auto;

      img:nth-of-type(1) {
        margin-top: 2rem;
        margin-left: 0;
      }

      img:nth-of-type(2) {
        margin-top: 3rem;
      }

      img:nth-of-type(3) {
        margin-top: 5rem;
        margin-bottom: 2rem;
      }

      p:nth-of-type(1) {
        font-size: 2.3125rem;
        font-weight: bold;
        margin-top: 1.8em;
      }

      p:nth-of-type(2) {
        font-size: 0.9375rem;
        line-height: 1.8;
        margin-top: 1.5em;
      }
    }
  }
}

.office {
  .slider {
    img {
      aspect-ratio: 580 / 370;
    }
  }

  .cover {
    display: flex;
    justify-content: flex-end;

    img {
      margin-right: 0;
      margin-left: auto;
    }
  }

  .message1 {
    div:first-child {
      align-items: start;

      p {
        font-size: 3.75rem;
      }

      img {
        width: 7em;
      }
    }

    div:last-child {
      align-items: end;
      justify-content: flex-end;

      > picture:nth-of-type(1) {
        width: 25em;
      }

      > img:nth-of-type(1) {
        width: 10em;
      }
    }
  }

  .new-card {
    position: relative;
    margin-top: 8rem;
    --shadow-size: 1.5rem;

    .title {
      position: absolute;
      top: 0;
      left: 8%;
      transform: translate(-50%, -50%);
    }

    > div:not(.title) {
      max-width: 652px;
      margin-right: auto;
      margin-left: auto;

      p:first-child {
        font-size: 1.875rem;
        font-weight: bold;
        margin-top: 1rem;
      }

      .slider {
        margin-top: 2em;
        padding: 2em;
        border: 2px solid var(--border-color);
        border-radius: 15px;
        background-color: #fff;
      }

      p:last-child {
        font-size: 0.9375rem;
        line-height: 1.8;
        margin-top: 4rem;
      }
    }

    &.office-work {
      --border-color: var(--color-deeppink);
      --shadow-color: var(--color-deeppink);
      --transparent-color: #FFE6F2;
    }

    &.office-collab {
      --border-color: var(--color-forestgreen);
      --shadow-color: var(--color-forestgreen);
      --transparent-color: #E6F5EC;
    }

    &.office-communication {
      --border-color: var(--color-darkorange);
      --shadow-color: var(--color-darkorange);
      --transparent-color: #FFF2E6;
    }

    &.office-entrance {
      --border-color: var(--color-dodgerblue);
      --shadow-color: var(--color-dodgerblue);
      --transparent-color: #E6F5FF;
    }
  }

  .address {
    margin-top: 6rem;
    margin-bottom: 5rem;

    p {
      font-size: 0.9rem;
      max-width: 100%;
      margin-top: 2rem;
      margin-right: auto;
      margin-left: auto;
    }
  }

  .access_btm p {
    font-size: 1rem;
    margin-top: .5rem;
  }

  .access_btm p.title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 2rem;
  }

  .access_btm ul {

    display: grid;
    margin: 1rem 0 3rem;
    padding-left: 0;
    list-style: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

.falling_objects {
  opacity: 0.5;
}

.hero-top {
  display: grid;
  grid-template-columns: auto min(60%, 652px);

  .hero-image {
    position: relative;

    .photo {
      -webkit-mask-size: 150%;
      mask-image: url(../images/heromask.svg);
      mask-size: 100%;
      mask-repeat: no-repeat;
      mask-position: 100% 0;
    }

    .icon, .badge {
      position: absolute;
      top: 0;
      right: 0;
      transform: translateY(-25%);

      &.pc {
        width: 95px;
      }
    }
  }
}

.heroes {
  .section {
    right: 0;
    left: 0;
    top: 10rem;
    /*opacity: 0.2;*/

    .inner {
      width: 100%;
      max-width: var(--container-width);
      margin: 0 auto;
    }

    &.section0 {
      position: absolute;
      z-index: 50;

      .hero-top {
        .icon {
          position: absolute;
          top: 6.5rem;
        }
      }

      &.section0-1 {
        z-index: 25;
      }
    }

    &.section1 {
      .hero-top {
        .prof.pc {
          margin-top: 10rem;
        }
      }
    }

    &.section2, &.section3, &.section4 {
      position: relative;
      margin: 16rem 0 -35rem;
      padding-top: calc(10rem + 10vw);
      padding-bottom: 50rem;
      clip-path: polygon(0 21vw, 100% 0%, 100% 100%, 0% 100%);
      top: calc(9.85rem - max(0.5rem, (100vw - var(--container-width)) * 0.109));
    }

    &.section2 {
      z-index: 20;
      background-color: #da0063;

      > div {
        > div:last-child {
          p {
            font-family: "DotGothic16", sans-serif;
            font-size: 1.1rem;
            line-height: 1.8;
            position: absolute;
            top: 0;
            right: 10%;
            left: 10%;
            max-width: 80%;
          }
        }

        .inn_grid {
          display: grid;
          justify-content: center;
          width: 100%;
          gap: 1em;
          grid-template-columns: 1fr 1.5fr;

          div + div {
            position: relative;
            padding: 2rem;
          }

          div:nth-child(2):after {
            position: absolute;
            z-index: -1;
            top: 0;
            right: 0;
            width: 90%;
            height: 100%;
            content: "";
            border: 5px solid #000;
            background-color: #FFF;
            clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
          }
        }
      }

      .inner {
        display: grid;
        max-width: var(--container-width);
        gap: 1em;
        grid-template-columns: auto min(60%, 652px);
      }

      .infos {
        line-height: 1.75em;
        flex-grow: 1;

        p {
          max-width: 250px;
        }
      }

      .message-frame {
        line-height: 1.75em;
        position: relative;

        img {
          margin-top: -12rem;
          margin-right: 0;
          margin-left: auto;
        }
      }
    }

    &.section3 {
      z-index: 30;
      background-color: #ff0000;

      img {
        margin: auto;
      }
    }

    &.section4 {
      z-index: 40;
      background-color: #0000c8;

      img {
        margin: auto;
      }

      a {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 4rem;
        text-align: center;
        color: #fff;
      }
    }
  }
}

.story div#about-parent {
  position: relative;
}

.story img.close {
  position: absolute;
  top: 2rem;
  right: 3rem;
}

.ytp-large-play-button {
  position: absolute;
  z-index: 63;
  top: 50%;
  left: 50% !important;
  width: 30px !important;
  height: 30px !important;
  margin-top: -15px !important;
  margin-left: -15px;
  -webkit-transition: opacity .25s cubic-bezier(0, 0, .2, 1);
  transition: opacity .25s cubic-bezier(0, 0, .2, 1);
}

.basic8 .about-page-top-grid {

  background: none;

}

.dna {
  .about-page-top-grid {
    background: none;
  }
}


@keyframes dotty {
  from {
    transform: translateX(-10%) rotate(-10deg);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes dotty-bound {
  0% {
    transform: translate(-7%, 0)
  }
  5% {
    transform: translate(-20%, 0)
  }
  10% {
    transform: translate(-35%, 0)
  }
  20% {
    transform: translate(-45%, -25px)
  }
  25% {
    transform: translate(-55%, 0)
  }
  30% {
    transform: translate(-65%, -15px)
  }
  50% {
    transform: translate(-70%, 0)
  }
  100% {
    transform: translate(-73%, 0)
  }
}

@keyframes dotty-bound-2 {
  0% {
    transform: translate(-3.5%, 0)
  }
  5% {
    transform: translate(-10%, 0)
  }
  10% {
    transform: translate(-17.5%, 0)
  }
  20% {
    transform: translate(-22.5%, -25px)
  }
  25% {
    transform: translate(-27.5%, 0)
  }
  30% {
    transform: translate(-32.5%, -15px)
  }
  50% {
    transform: translate(-35%, 0)
  }
  100% {
    transform: translate(-36.5%, 0)
  }
}

.culture {
  & .culture-list {
    .title {
      font-weight: bold;
    }
  }

}

/*06251800???*/
.dotty {
  .left-top-block {
    position: absolute;
    top: 3rem;
  }
}

img.llogcu {
  position: absolute;
  top: 2.4em;
  right: 3.4em;
  width: 16em;
  opacity: .84;
}


.bg1::after {
  position: absolute;
  z-index: -1;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  content: '';
  transform: skewY(-12.5deg);
  background: #DA0063;
}

.bg1 .inn_grid div + div {
  position: relative;
  padding: 2rem;

}

.bg1 .inn_grid div:nth-child(2):after {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 90%;
  height: 100%;
  content: "";
  border: 5px solid #000;
  background-color: #FFF;
  clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.generalbg.bg2 {
  position: relative;
  margin: 0 0 0;
  padding: 15em 0 14em;
}

.generalbg.bg3 {
  position: relative;
  margin: 0 0;
  padding: 12em 0 15em;
}

.generalbg .inner {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;

  img {
    margin: auto;
  }
}

.generalbg a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4rem;
  text-align: center;
  color: #fff;
}

.generalbg::after {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  transform: skewY(-12.5deg);
  background: #0000C8;
}

.generalbg.bg2::after {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  transform: skewY(-12.5deg);
  background: #FF0000;
}

.generalbg.bg3::before {
  position: absolute;
  z-index: -1;
  top: 80%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  transform: skewY(-12.5deg);
  background: #0000C8;
}

/*0627*/
.ceo_message {
  & .interviews {
    .videos {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

.lg-cards {
  #card13 {

    & .card-body > div {
      display: flex;

      .image {
        display: none;
        padding: 1.5rem;
        border: none;
        border-radius: 15px;

      }
    }
  }
}

.story {
  .about-page-top-grid {
    .message2 {
      margin-right: .5em;
    }
  }

  & .lg-cards {
    & .card {
      .card-body > div.story_ttl {
        font-size: 2.4em;
        font-weight: bold;
        line-height: 1.6rem;
        display: block;
        margin-bottom: 0;
        margin-left: .3em;
        color: #000000;
      }
    }
  }
}

.symbol {
  & .dot-hero {
    &.dotheroes {
      & .title {
        grid-template-columns: 50% 50%;

        img {
          width: 25rem;

        }

        div:nth-child(2) {
          width: 100%;
        }
      }

    }
  }
}

.symbol {
  & .cover-container {
    .button#musicButton {
      position: absolute;
      bottom: 1rem;
      left: 2rem;
      display: grid;
      padding: 0.5em 2em;
      color: white;
      border: 2px solid white;
      grid-template-columns: 1fr 4fr;

      img {
        display: block;
        width: 25px;
      }

      span {
        display: block;
        margin-left: 5px;
      }

    }
  }
}

header.videos-header {
  padding: 10px 0 0;
}

.videos-ttl {
  font-size: 1rem;
  font-weight: bold;
  position: absolute;
  z-index: 2;
  bottom: 8rem;
  left: 2rem;
  color: #fff;
}

.office {
  & .slider {
    img {
      aspect-ratio: 580 / 400;
      object-fit: cover;
      width: 100% !important;
      height: auto !important;
    }
  }
}

.dna {
  & .about-page-top-grid {
    .message2 {
      line-height: 1.3;
      max-width: 7.5em;
      transform: translateY(-2rem);
    }
  }
}

.strategies {
  & .about-page-top-grid {
    .animation {
      z-index: -100;
      bottom: 100px;
    }
  }
}

.culture {
  .top-right-block {

    padding-left: 20rem;
  }
}

.culture {
  & .top-right-block {
    p {
      font-size: 3.75rem;
      line-height: 1.3em;
      position: absolute;
      top: 3.5rem;
      bottom: auto;
      left: 0;
      transform: translate(-10%, 50%);
      color: var(--color-red);
    }
  }
}


.identify {
  & .lg-cards {
    & .card {
      &.value {
        & .frame {
          *:nth-child(4) {
            margin-top: 2rem;
            width: 10em;
          }
        }
      }
    }
  }
}

/*??X*/
.story {
    & .about-page-top-grid {
        .message2 {
                    font-size: 3.5rem;
letter-spacing:-1px;
        }
    }
}
.about-page-top-grid {
    display: grid;
    grid-template-columns: auto min(65%, 480px);
}

.dna {
    .about-page-top-grid {
        grid-template-columns: auto min(60%, 400px);
    }
}

.dna {
    & .about-page-top-grid {
        .message2 {
            line-height: 1.3;
            max-width: 100%;
            transform: translateY(-2rem);
            margin-top: 1em;
            letter-spacing: -1px;
            font-size: 3.45rem;
margin-bottom:.5em;
        }
    }
}
.dna {
    & .about-page-top-grid {
        span {
            font-size: 1.6rem;
            display: inline;
            margin-top: 0;
            padding: 0;
            text-decoration: none;
            color: inherit;
            border-radius: 0;
            background: none;
            display: inline-flex;
            align-content: stretch;
            width: auto;
            flex-direction: row;
            align-items: flex-start;
            flex-wrap: nowrap;
        }
    }
}

.culture {
    & .lg-cards {
        & .card {
            .title {
font-size: 3.5rem;
            }
        }
    }
}

.culture {
    & .lg-cards {
        & .card {
            & .title {
text-shadow: 
    -2px -2px 0 white,
     2px -2px 0 white,
    -2px  2px 0 white,
     2px  2px 0 white;
                img {
                    position: relative;
                    z-index: -1;
                    right: auto;
                    bottom: 0;
                    left: 0;
margin-top:.5em;
                }
            }
        }
    }
}

.culture {
    & .lg-cards {
        & .card {
            & .card-body {
                & > div {
                    &:nth-child(3) {
                        & > div {
                            & > div {
                                p {
                                    font-size: 1.2rem;
                                    font-weight: bold;
                                    margin-left: 0.5em;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}


.identify {
    & .lg-cards {
        & .card {
            &.mission {
                & .frame {
text-align:center;
                    *:nth-child(3) {
                        font-size:2.6em;
                    }
        *:nth-child(4) {
            font-size: 1.4rem;
margin-top:1.5em;
        }
                }
            }
        }
    }
}

.identify {
    & .lg-cards {
        & .card {
            &.vision {
                & .frame {
text-align:center;

 *:nth-child(3) {
font-size:2em;
line-height:1.4;
                    }
                    *:nth-child(4) {
margin: 1.5rem auto 0;
                    }
                }
            }
        }
    }
}

.identify {
    & .lg-cards {
        & .card {
            &.value {
                & .frame {
text-align:center;
 *:nth-child(3) {
font-size:2em;
line-height:1.4;
                    }
                    *:nth-child(5) {
                        margin: 1.5rem auto 0;
                        width: 15em;
                    }
                }
            }
        }
    }
}

.identify {
    .message1 {
.frame {
        *:nth-child(3) {
            width:18rem;
        }
    }
    }
     
}
.identify{
.lg-cards {
    & .card {
        .card-body > div {
            grid-template-columns: 1fr;
        }
    }
}
}

@media screen and (min-width: 500px) and (max-width: 768px) {
    .data {
        & .data-grid2 {
            & > div:first-child {
                img {
                    transform: scale(1) translateX(-15%) translateY(5%) !important;
                }
            }
        }
    }
}

.ceo_message .shadow-box{
margin:4em auto;
    max-width: 650px;
.msg-grid {
    display: grid;
    gap: 1em;
    justify-content: center;
    grid-template-columns: 40% 50%;
padding:1em 1em 0;
.interviews{
margin-top:2em;
.font-12{
font-size:1.1em;
}
        .title {
            font-weight: bold;
            max-width: 100%;
            margin-bottom: 1em;
            padding-bottom: 1em;
            border-bottom: 1px solid #707070;
        }
        .sns {
            align-items: center;
            justify-content: center;
            max-width: 100%;
            margin-bottom: 2rem;
            img {
                width: 2em;
            }
        }
}
}
}
.story {
    .lg-cards {
        .card {
            .card-body > div.story_ttl {
                font-size: 2em;
                font-weight: bold;
                line-height: 1.6rem;
                margin-bottom: 0;
                margin-left: .3em;
                color: var(--color-mediumblue-500);
                display: inline-block;
                position: relative;
                padding: .3em 1em;
            }
        }
    }
}

/* �A�j���[�V���� */
.story_ttl {
    position: relative;
    overflow: hidden;
                color: var(--color-mediumblue-500);
}

.story_ttl::before {
   content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 4px;
    background-color: var(--color-mediumblue-500);
    transform: translateY(-50%);
    z-index: -1;
    bottom: 0;
    top: 50%;
}

.story_ttl.bgappearTrigger::before {
    /*animation: slideIn 0.4s forwards;*/
}

@keyframes slideIn {
    to {
        transform: translateX(0);
    }
}


.graph-data-wrap {
    width: 100%;
}


/* 2503数字で知るドットラインリニューアル */

.data2 {
  & .message1 {
    margin-top: var(--margin-5-0);
    & div:first-child {
      align-items: center;
        p {
            font-size: 3.1rem;
        }
    }
  }

  .data-wrap {
    display: flex;
    margin-left: 200px;
    justify-content: space-between;
    flex-wrap: wrap;

    .data {
      width: 47%;
      display: flex;
      flex-direction: column;
      margin-bottom: 3em;

      .data-title {
        align-items: center;
        gap: 8px;
        line-height: 1.3;

        span.data-title-num {
          font-size: 60px;
        }
      }

      .data-img-num-wrap {

        margin-top: 1em;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;

        min-height: 251px;


        figure {            
  
          img {
            margin-inline: auto;
          }
        }
  
        .data-number-wrap {
          font-weight: 500;
          flex-grow: 1; 
          width: 40%;
  
          p.data-number2 {
            font-size: 80px;
            font-weight: 700;
            line-height: 0.9;
  
            span {
              font-size: 0.7em;
            }
          }

          .persons {
            margin-top: 15px;
            font-weight: bold;

            >div {
              margin-top: 3px;
            }

          }
        }

        .pc-dataimg {
          margin-top: 30px;
          
          img {
            width: 300px;
          }
        }

      }

      > p {
        line-height: 1.8;
      }

      .data-h {
        min-height: 369px;
      }

      .data-number3 {
        font-size: 40px;
        font-weight: bold;

        span {
          font-size: 0.8em;
        }
      }

      .data-number4 {
        font-size: 35px;
        font-weight: bold;
        margin-top: 5px;

        span {
          font-size: 0.8em;
        }
      }

      .managerage-wrap {
        justify-content: space-between;

        .managerage {
          width: 49%;
        }
      }

    }
    
    .d-block {
      display: block;
    }

    
  }
}


@media screen and (min-width: 768px) and (max-width: 1350px) {

  .data2 {
    & .data-wrap {
        & .data {
            & .data-img-num-wrap {
                & .data-number-wrap {
                    p.data-number2 {
                        font-size: 60px;
                    }
                }
            }
        }
    }

    .left-top-block {
      max-width: 200px;
    }
  }
}