@charset "UTF-8";

.concept {
  margin-top: 70px;
}

.concept__item {
  position: relative;
  margin-bottom: 100px;
}

.concept__item:last-child {
  margin-bottom: 0;
}

.concept__item:nth-of-type(even) .concept__text {
  flex-direction: row-reverse;
}

.concept__text {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.concept__text .text {
  margin-top: 20px;
}

.concept__textBox {
  width: 75%;
}

.concept__textNumber {
  padding-right: 20px;
  line-height: 1;
  font-size: 17rem;
  font-family: 'Oswald', sans-serif;
  font-style: italic;
  color: #f0f0f0;
}

.concept__item:nth-of-type(1) .concept__textNumber {
  transform: translateY(-10px);
}

.concept__item:nth-of-type(2) .concept__textNumber {
  transform: translateX(-30px) translateY(-10px);
}

.concept__item:nth-of-type(3) .concept__textNumber {
  transform: translateY(-10px);
}

.concept__item:nth-of-type(4) .concept__textNumber {
  transform: translateX(-30px) translateY(-10px);
}

.concept__item:nth-of-type(5) .concept__textNumber {
  transform: translateY(-10px);
}

.concept__item:nth-of-type(6) .concept__textNumber {
  transform: translateX(-30px);
}


@media screen and (max-width:767px) {
  .concept {
    margin-top: 50px;
  }

  .concept__item {
    margin-bottom: 50px;
  }

  .concept__text {
    position: relative;
    margin-top: 30px
  }

  .concept__textBox {
    width: 100%;
    z-index: 1;
  }

  .concept__textBox .title.-style01 {
    width: 70%;
  }

  .concept__textNumber {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
    padding-right: 15px;
    font-size: 7rem;
  }

  .concept__item:nth-of-type(1) .concept__textNumber {
    transform: translateY(-30px);
  }

  .concept__item:nth-of-type(2) .concept__textNumber {
    transform: translateX(0px) translateY(-30px);
  }

  .concept__item:nth-of-type(3) .concept__textNumber {
    transform: translateY(-5px);
  }

  .concept__item:nth-of-type(4) .concept__textNumber {
    transform: translateY(-30px);
  }

  .concept__item:nth-of-type(5) .concept__textNumber {
    transform: translateY(-15px);
  }

  .concept__item:nth-of-type(6) .concept__textNumber {
    transform: translateY(-15px);
  }
}