/* screen - oonai */

.oonai {
  align-items: center;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  min-height: 4498px;
  width: 980px;
}

.oonai .huge-text-copy-2 {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  margin-top: -1px;
  min-width: 980px;
  transition: all 0.2s ease-in-out;
}

.oonai .huge-text-copy-2:hover {
  opacity: 0.7;
}

.oonai .ux {
  font-weight: 900;
  height: 439px;
  letter-spacing: 0;
  line-height: 439px;
  opacity: 0;
  text-align: center;
  white-space: nowrap;
  width: 980px;
}

.oonai .ux.bp1-animate-enter4 {
  animation: bp1-animate-enter4-frames 0.50s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
}

@keyframes bp1-animate-enter4-frames {
  from{opacity: 0;
}
to{opacity: 1;
}
}

.oonai .title-text-copy {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin-top: 1px;
  min-height: 1412px;
  width: 692px;
}

.oonai .title {
  font-weight: 700;
  height: 124px;
  letter-spacing: 0;
  line-height: 38px;
  text-align: center;
  width: 692px;
}

.oonai .text {
  font-weight: 500;
  letter-spacing: 0;
  line-height: 28px;
  min-height: 1288px;
  text-align: justify;
  width: 692px;
}

.oonai .text.bp1-animate-enter1 {
  animation: bp1-animate-enter1-frames 0.20s ease-in-out 0.00s 1 normal forwards;
}

@keyframes bp1-animate-enter1-frames {
  from{}
to{}
}

.oonai .title-text-copy-3 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  min-height: 656px;
  width: 692px;
}

.oonai .text-1 {
  font-weight: 500;
  letter-spacing: 0;
  line-height: 28px;
  min-height: 532px;
  text-align: justify;
  width: 692px;
}

.oonai .text-1.bp1-animate-enter2 {
  animation: bp1-animate-enter2-frames 0.20s ease-in-out 0.00s 1 normal forwards;
}

@keyframes bp1-animate-enter2-frames {
  from{}
to{}
}

.oonai .overlap-group {
  height: 1990px;
  position: relative;
  width: 980px;
}

.oonai .title-text-copy-4 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  left: 144px;
  min-height: 1552px;
  position: absolute;
  top: 0;
  width: 692px;
}

.oonai .text-2 {
  font-weight: 500;
  letter-spacing: 0;
  line-height: 28px;
  min-height: 1428px;
  text-align: justify;
  width: 692px;
}

.oonai .text-2.bp1-animate-enter3 {
  animation: bp1-animate-enter3-frames 0.20s ease-in-out 0.00s 1 normal forwards;
}

@keyframes bp1-animate-enter3-frames {
  from{}
to{}
}

.oonai .o-end {
  cursor: pointer;
  height: 439px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 1551px;
  transition: all 0.2s ease-in-out;
  width: 980px;
}

.oonai .o-end.bp1-animate-enter6 {
  animation: bp1-animate-enter6-frames 0.30s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
}

@keyframes bp1-animate-enter6-frames {
  from{opacity: 0;
}
to{opacity: 1;
}
}

.oonai .o-end:hover {
  opacity: 0.7;
}

.oonai .ux-1 {
  font-weight: 900;
  height: 439px;
  left: 0;
  letter-spacing: 0;
  line-height: 439px;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 0;
  white-space: nowrap;
  width: 980px;
}

.oonai .ux-1.bp1-animate-enter5 {
  animation: bp1-animate-enter5-frames 0.50s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
}

@keyframes bp1-animate-enter5-frames {
  from{opacity: 0;
}
to{opacity: 1;
}
}
/* screen - oonaimobile-all-breakpoints */

.oonaimobile-all-breakpoints {
  align-items: center;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  min-height: 7201px;
  width: 390px;
}

.oonaimobile-all-breakpoints .huge-text-copy-3 {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  min-width: 390px;
  transition: all 0.2s ease-in-out;
}

.oonaimobile-all-breakpoints .huge-text-copy-3:hover {
  opacity: 0.7;
}

.oonaimobile-all-breakpoints .ux-2 {
  font-weight: 900;
  height: 175px;
  letter-spacing: 0;
  line-height: 174.7px;
  opacity: 0;
  text-align: center;
  white-space: nowrap;
  width: 390px;
}

.oonaimobile-all-breakpoints .ux-2.bp2-animate-enter1 {
  animation: bp2-animate-enter1-frames 0.50s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
}

@keyframes bp2-animate-enter1-frames {
  from{opacity: 0;
}
to{opacity: 1;
}
}

.oonaimobile-all-breakpoints .titleheadertext-12 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  min-height: 1167px;
  width: 346px;
}

.oonaimobile-all-breakpoints .type-something {
  font-weight: 700;
  height: 32px;
  letter-spacing: 0;
  line-height: 38px;
  margin-bottom: -6px;
  text-align: center;
  white-space: nowrap;
  width: 346px;
}

.oonaimobile-all-breakpoints .random-sample-no-or {
  font-weight: 600;
  height: 23px;
  letter-spacing: 0;
  line-height: 23px;
  margin-top: 13px;
  text-align: center;
  white-space: nowrap;
  width: 346px;
}

.oonaimobile-all-breakpoints .o-ask-you-a-simple {
  font-weight: 500;
  letter-spacing: 0;
  line-height: 28px;
  margin-left: 1px;
  margin-top: 35px;
  min-height: 1064px;
  width: 345px;
}

.oonaimobile-all-breakpoints .titleheadertext-12-1 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin-top: 93px;
  min-height: 2903px;
  width: 346px;
}

.oonaimobile-all-breakpoints .o-ask-you-a-simple-1 {
  font-weight: 500;
  letter-spacing: 0;
  line-height: 28px;
  margin-left: 1px;
  margin-top: 35px;
  min-height: 2800px;
  width: 345px;
}

.oonaimobile-all-breakpoints .titleheadertext-12-2 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin-top: 93px;
  min-height: 2595px;
  width: 346px;
}

.oonaimobile-all-breakpoints .o-ask-you-a-simple-2 {
  font-weight: 500;
  letter-spacing: 0;
  line-height: 28px;
  margin-left: 1px;
  margin-top: 35px;
  min-height: 2492px;
  width: 345px;
}

.oonaimobile-all-breakpoints .ux-3 {
  font-weight: 900;
  height: 175px;
  letter-spacing: 0;
  line-height: 174.7px;
  opacity: 0;
  text-align: center;
  white-space: nowrap;
  width: 390px;
}

.oonaimobile-all-breakpoints .ux-3.bp2-animate-enter {
  animation: bp2-animate-enter-frames 0.50s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
}

@keyframes bp2-animate-enter-frames {
  from{opacity: 0;
}
to{opacity: 1;
}
}
@media screen and (max-width: 979px) {
  .screen.oonai { 
    display: none;
   }
}
@media screen and (min-width: 980px) {
  .screen.oonaimobile-all-breakpoints { 
    display: none;
   }
}