.header-text {
  color: #fff;
}

header .boxed-text-1 {
  padding: 0.26vw 1.67vw 1.2vw 1.51vw;

  position: absolute;
  top: 10.1vw;
  left: 11.72vw;
}

header .boxed-text-1 .glitch-0 {
  position: absolute;

  width: 39.69vw;
  height: 8.54vw;

  background: #000000;

  left: 0;
  top: 0;
}

header .boxed-text-1 .glitch-1 {
  position: absolute;

  width: 15.78vw;
  height: 2.66vw;

  background: #000000;

  left: 3.7vw;
  top: -1.35vw;
}

header .boxed-text-1 .glitch-2 {
  position: absolute;

  width: 19.06vw;
  height: 1.72vw;

  background: #000000;

  right: 4vw;
  bottom: 2vw;
}

header .boxed-text-1 .glitch-3 {
  position: absolute;

  width: 10.21vw;
  height: 2.24vw;

  background: #000000;

  left: 2.34vw;
  bottom: -1.61vw;
}

header .boxed-text-1 .glitch-4 {
  position: absolute;

  width: 4.32vw;
  height: 4.95vw;

  background: #000000;

  left: -3.13vw;
  top: 2.46vw;
}

header .boxed-text-1 .glitch-5 {
  width: 18.23vw;
  height: 3.49vw;

  position: absolute;

  background: #000000;

  left: 0;
  bottom: 0;
}

header .boxed-text-2 {
  padding: 1.2vw 1.2vw 1.67vw;

  position: absolute;
  bottom: 3.23vw;
  right: 8.96vw;
}


header .boxed-text-2 .glitch-0 {
  position: absolute;

  width: 10.52vw;
  height: 2.4vw;

  right: 5.05vw;
  top: -1.61vw;

  background: #000;
}

header .boxed-text-2 .glitch-1 {
  position: absolute;

  width: 100%;
  height: 5.26vw;

  left: 0;
  top: 0;

  background: #000;
}

header .boxed-text-2 .glitch-2 {
  position: absolute;

  width: 112%;
  height: 5.26vw;

  left: -2.24vw;
  top: 3.49vw;

  background: #000;
}

header .boxed-text-2 .glitch-3 {
  position: absolute;

  width: 84%;
  height: 5.26vw;

  left: 0.36vw;
  bottom: 0;

  background: #000;
}

header .boxed-text-2 .glitch-4 {
  position: absolute;

  width: 5.52vw;
  height: 2.4vw;

  left: 5.42vw;
  bottom: -1.41vw;

  background: #000;
}

main {
  padding: 3.65vw 5.21vw;

  background: #ffffff;

  display: flex;
  flex-direction: column;
  gap: 3.65vw;
}

main .about {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 1.04vw;
}

main .about .book-info {
  display: flex;
  flex-direction: column;
  gap: 0.78vw;
}

main .about .book-info .book-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1.04vw;
}

main .about .book-info .book-features .book-feature-text {
  color: #000;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 1.56vw;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.078vw;
  text-transform: lowercase;
}

main .about .button {
  align-self: flex-end;
}

main .book {
  height: 64.69vw;
}

main .book img {
  height: 64.69vw;

  object-fit: contain;
}

.mobile {
  display: none !important;
}

.popup-container {
  width: 100vw;
  height: 100vh;

  background: rgba(0, 0, 0, 0.65);

  z-index: 12;

  position: fixed;
  top: 0;
  left: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  visibility: hidden;

  transition: opacity 250ms ease-in-out;
}

.popup-container.visible {
  opacity: 1;
  visibility: visible;
}

.popup-container .form-container {
  border-radius: 0.52vw;
  background: url('../images/book/stroke-form.png') no-repeat center center/cover, #000;

  padding: 2.86vw;

  display: flex;
  flex-direction: column;
  gap: 3.44vw;

  position: relative;

  transform: translateY(-100%) scale(0.75);
}

.popup-container.visible .form-container {
  animation: popup-in 500ms ease-in forwards;
}

.popup-container .form-container .bubble-1,
.popup-container .form-container .bubble-2,
.popup-container .form-container .bubble-3,
.popup-container .form-container .bubble-4 {
  width: 2.4vw;
  height: 2.4vw;
  border-radius: 100%;
  background: #F5DA24;
}

.popup-container .form-container .bubble-1 {
  position: absolute;
  left: 0.47vw;
  top: 0.42vw;
}

.popup-container .form-container .bubble-2 {
  position: absolute;
  right: 0.47vw;
  top: 0.42vw;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  
  color: #000;

  font-family: "Helvetica Neue", sans-serif;
  font-size: 1.84vw;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -0.12vw;
}

.popup-container .form-container .bubble-3 {
  position: absolute;
  left: 0.47vw;
  bottom: 0.36vw;
}

.popup-container .form-container .bubble-4 {
  position: absolute;
  right: 0.47vw;
  bottom: 0.36vw;
}

.popup-container .form-container .form-wrapper {
  padding: 2.34vw;

  background: #ffffff;

  display: flex;
  flex-direction: column;
  gap: 1.56vw;
}

.popup-container .form-container .form-wrapper .form-items {
  display: flex;
  flex-direction: column;
  gap: 1.56vw;
}

.popup-container .form-container .form-wrapper .form-items .form-items-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2.08vw;
}

.popup-container .form-container .form-wrapper .form-items .form-input-container {
  display: flex;
  flex-direction: column;
  gap: 0.31vw;
}

.popup-container .form-container .form-wrapper .form-items .form-input-container label {
  color: #888;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 1.04vw;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.05vw;
}

.popup-container .form-container .form-wrapper .form-items .select-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.04vw;
}

.popup-container .form-container .form-wrapper .form-items .form-input-container select {
  appearance: none;
  position: relative;
}

.popup-container .form-container .form-wrapper .form-items .form-input-container .select-container {
  position: relative;
  width: 100%;
}

.popup-container .form-container .form-wrapper .form-items .form-input-container .select-container select {
  width: 100%;
}
.popup-container .form-container .form-wrapper .form-items .checkbox-container {
  position: relative;

  padding: 0.36vw 0 0.36vw 2.4vw;

  color: #000;

  font-family: "Helvetica Neue", sans-serif;
  font-size: 1.04vw;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -0.05vw;

}

.popup-container .form-container .form-wrapper .form-items .checkbox-container .checkmark {
  position: absolute;

  left: 0;
  top: 0;
  width: 1.77vw;
  height: 1.77vw;

  border-radius: 100%;

  border: 0.16vw solid #D0D0D0;
  transition: border-color 250ms ease-in-out;
}

.popup-container .form-container .form-wrapper .form-items .checkbox-container .checkmark::before {
  width: 0.83vw;
  height: 0.83vw;

  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  content: '';

  margin: auto;

  background: #F5DA24;

  border-radius: 100%;

  opacity: 0;
  transition: opacity 250ms ease-in-out;
}

.popup-container .form-container .form-wrapper .form-items .checkbox-container input {
  opacity: 0;
}

.popup-container .form-container .form-wrapper .form-items .checkbox-container input:checked + .checkmark {
  border-color: #F5DA24;
}

.popup-container .form-container .form-wrapper .form-items .checkbox-container input:checked + .checkmark::before {
  opacity: 1;
}

.popup-container .form-container .form-wrapper .form-items .form-input-container .select-container::after {
  position: absolute;

  width: 1.09vw;
  height: 1.61vw;

  content: '';

  right: 0.63vw;
  top: 0;
  bottom: 0;
  margin: auto 0;

  background: url("../images/book/arrow.svg") no-repeat center center/contain;
}

.popup-container .form-container .form-wrapper .form-items .form-input-container input,
.popup-container .form-container .form-wrapper .form-items .form-input-container select,
.popup-container .form-container .form-wrapper .form-items .form-input-container textarea {
  display: flex;
  padding: 0.78vw 0.63vw;
  align-items: center;
  gap: 0.52vw;

  border-radius: 0.26vw;
  border: 0.16vw solid #D0D0D0;
  background: #F8F8F8;

  color: #000;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 1.35vw;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.07vw;
}

.popup-container .form-container .form-wrapper .form-items .form-input-container input,
.popup-container .form-container .form-wrapper .form-items .form-input-container textarea {
  width: 32.08vw;
}

.popup-container .form-container .form-wrapper .form-title {
  color: #000;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 2.34vw;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.12vw;
}

@media (max-width: 768px) {
  .mobile {
    display: block !important;
  }

  .desktop {
      display: none !important;
  }

  header .header-text {
      color: #F5DA24;
  }

  header .header-text#menu-open {
      background: #F5DA24;
  }

  header .boxed-text-1 {
      padding: 0.725vw 4.830vw;

      left: 7.487vw;
      top: 25.121vw;
  }

  header .boxed-text-1 .glitch-0 {
      width: 78.743vw;
      height: 17.632vw;
  }

  header .boxed-text-1 .glitch-1 {
      width: 61.594vw;
      height: 5.556vw;
      top: -3.140vw;
      left: 2.899vw;
  }

  header .boxed-text-1 .glitch-2 {
      width: 38.888vw;
      height: 3.623vw;

      bottom: 0;
      right: 7.729vw;
  }

  header .boxed-text-1 .glitch-4 {
      width: 9.178vw;
      height: 10.145vw;
  }

  header .boxed-text-1 .glitch-5 {
      width: 38.647vw;
      height: 7.246vw;

      bottom: -2.415vw;
      left: -3.623vw;
  }

  header .boxed-text-2 {
      padding: 3.382vw 3.864vw 4.348vw;

      right: 6.763vw;
      bottom: 27.777vw;
  }

  header .boxed-text-2 .glitch-0 {
      width: 12.319vw;
      height: 13.043vw;

      top: -4.830vw;
      right: 9.661vw;
  }

  header .boxed-text-2 .glitch-1 {
      height: 10.628vw;
      width: 48.309vw;
  }

  header .boxed-text-2 .glitch-2 {
      width: 77.777vw;
      height: 10.628vw;

      top: 8.212vw;
      left: -4.830vw;
  }

  header .boxed-text-2 .glitch-3 {
      width: 57.246vw;
      height: 10.628vw;

      left: 0;
  }

  header .boxed-text-2 .glitch-4 {
      width: 11.111vw;
      height: 4.830vw;
      bottom: -3.382vw;
  }

  main {
      padding: 7.246vw 4.830vw;
      gap: 7.246vw;
  }

  main .about {
      grid-template-columns: 1fr;
      grid-gap: 3.623vw;
  }

  main .book, main .book img {
      height: 140.096vw;
      object-fit: cover;
  }

  main .about .book-info {
      gap: 2.899vw;
  }

  main .about .book-info .book-features {
      grid-template-columns: 1fr;
      grid-gap: 0.966vw;
  }

  main .about .book-info .book-features .book-feature-text {
      font-size: 3.623vw;
      line-height: 120%;
      letter-spacing: -0.181vw;
  }

  .popup-container .form-container {
      padding: 5.314vw;
      gap: 2.415vw;

      width: 95vw;
  }

  .popup-container .form-container .bubble-1,
  .popup-container .form-container .bubble-2,
  .popup-container .form-container .bubble-3,
  .popup-container .form-container .bubble-4 {
      width: 4.591vw;
      height: 4.591vw;
  }

  .popup-container .form-container .form-wrapper {
      padding: 5.314vw;
      gap: 2.899vw;
  }

  .popup-container .form-container .form-wrapper .form-items {
      gap: 2.899vw;
  }

  .popup-container .form-container .form-wrapper .form-title {
      font-size: 5.072vw;
      font-weight: 500;
      line-height: normal;
      letter-spacing: -0.253vw;
  }

  .popup-container .form-container .form-wrapper .form-items .form-items-group {
      grid-template-columns: 1fr;
      gap: 2.899vw;
  }

  .popup-container .form-container .form-wrapper .form-items .form-input-container {
      gap: 0.725vw;
  }

  .popup-container .form-container .form-wrapper .form-items .form-input-container label {
      font-size: 2.415vw;
      line-height: normal;
      letter-spacing: -0.117vw;
  }

  .popup-container .form-container .form-wrapper .form-items .form-input-container input,
  .popup-container .form-container .form-wrapper .form-items .form-input-container textarea {
      width: 100%;
  }

  .popup-container .form-container .form-wrapper .form-items .form-input-container input,
  .popup-container .form-container .form-wrapper .form-items .form-input-container select,
  .popup-container .form-container .form-wrapper .form-items .form-input-container textarea {
      padding: 1.690vw 1.449vw;

      border-radius: 0.483vw;
      border: 0.242vw solid #D0D0D0;

      font-size: 3.140vw;
      line-height: normal;
      letter-spacing: -0.157vw;
  }

  .popup-container .form-container .form-wrapper .form-items .checkbox-container {
      padding: 0.725vw 0 0.725vw 5.797vw;

      font-size: 3.140vw;
      line-height: 100%;
      letter-spacing: -0.157vw;
  }

  .popup-container .form-container .form-wrapper .form-items .checkbox-container .checkmark {
      width: 4.348vw;
      height: 4.348vw;

      border-width: 0.483vw;
  }

  .popup-container .form-container .form-wrapper .form-items .checkbox-container .checkmark::before {
      width: 1.932vw;
      height: 1.932vw;
  }

}