:root {
  --top-left-radius: 0%;
  --top-right-radius: 0%;
  --bottom-left-radius: 0%;
  --bottom-right-radius: 0%;
  --window-width-1: 78vw;
  --window-left-1: 11vw;
  --window-left-2: 10vw;
}
p {
  margin: 0;
}
video {
  vertical-align: middle;
}
h2 {
  font-size: 2.34375vw;
  line-height: 1.3;
  color: #000;
  margin: 0;
  padding-bottom: 0.4em;
}
p,
.text {
  font-size: 1.171875vw;
  color: #000;
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.flex {
  display: flex;
}
.nowrap {
  white-space: nowrap;
}
.content {
  margin: 0 auto;
}
.vaal-mix {
  width: 100%;
  background-color: #fff;
}
.vaal-mix-1 {
  width: 100%;
  position: relative;
}
.vaal-mix-1 img {
  width: 100%;
}
.vaal-mix-1 h1 {
  visibility: hidden;
  opacity: 0;
  display: none;
}
.vaal-mix-1 .vaal-mix-1-1 {
  position: absolute;
  left: 19.9609375vw;
  top: 4.296875vw;
  width: 26.6015625vw;
}
.vaal-mix-2 {
  text-align: center;
  background-color: #f8f9f9;
  width: 100%;
}
.vaal-mix-2 .content {
  width: var(--window-width-1);
  padding: 6.640625vw 0 5.46875vw;
}
.vaal-mix-2 .content > p {
  padding-top: 5.46875vw;
  text-align: center;
}
.vaal-mix-2 .content .flex {
  justify-content: space-around;
}
.vaal-mix-2 .content .flex img {
  width: 13.359375vw;
}
.vaal-mix-3 {
  width: 100%;
  background-color: #f8f9f9;
  position: relative;
  padding-bottom: 6.0546875vw;
}
.vaal-mix-3 .content {
  width: var(--window-width-1);
}
.vaal-mix-3 .flex {
  justify-content: space-between;
}
.vaal-mix-3 .vaal-mix-3-1 {
  position: relative;
  width: 11.484375vw;
}
.vaal-mix-3 .vaal-mix-3-1 img {
  width: 100%;
}
.vaal-mix-3 .vaal-mix-3-1 p {
  position: absolute;
  width: 100%;
  bottom: 1.3em;
  left: 0;
  text-align: center;
}
.vaal-mix-3 .vaal-mix-3-1 p span {
  font-size: 0.8em;
  color: #333333;
}
.vaal-mix-3 .vaal-mix-3-1:nth-child(5) p span {
  color: #adadad;
}
.vaal-mix-4 {
  width: 100%;
  position: relative;
}
.vaal-mix-4 img {
  width: 100%;
}
.vaal-mix-4 .vaal-mix-4-1 {
  position: absolute;
  width: 100%;
  left: 0;
  top: 2.9296875vw;
  text-align: center;
}
.vaal-mix-4 .vaal-mix-4-1 h2 {
  padding-bottom: 0.3em;
}
.vaal-mix-5 {
  background-color: #fff;
  width: 100%;
  padding: 5.390625vw var(--window-left-1) 6.0546875vw;
  text-align: center;
}
.vaal-mix-5 p {
  padding-bottom: 2em;
}
.vaal-mix-5 .vaal-mix-5-1 {
  width: 100%;
  position: relative;
  background: #fff;
  height: 38vw;
}
.vaal-mix-5 .vaal-mix-5-1 video {
  border-radius: 1em;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1;
}
.vaal-mix-5 .vaal-mix-5-1 video.active {
  z-index: 2;
}
.vaal-mix-5 .vaal-mix-5-1 .vaal-mix-5-button {
  width: 6.4453125vw;
  height: 2.3828125vw;
  line-height: 2.3828125vw;
  position: absolute;
  background: linear-gradient(to top, #e2e3e7 0%, #c8cbd3 50%, #c8cbd2 100%);
  border-radius: 0.5em;
  padding: 0;
  cursor: pointer;
  z-index: 5;
}
.vaal-mix-5 .vaal-mix-5-1 .vaal-mix-5-button.active {
  background: linear-gradient(67deg, #aa67e4 20%, #60e4de 80%);
}
.vaal-mix-5 .vaal-mix-5-1 .vaal-mix-5-1-1 {
  left: 11.328125vw;
  top: 13.28125vw;
}
.vaal-mix-5 .vaal-mix-5-1 .vaal-mix-5-1-2 {
  right: 11.328125vw;
  top: 13.28125vw;
}
.vaal-mix-5 .vaal-mix-5-1 .vaal-mix-5-1-3 {
  left: 11.328125vw;
  top: 19.53125vw;
}
.vaal-mix-5 .vaal-mix-5-1 .vaal-mix-5-1-4 {
  right: 11.328125vw;
  top: 19.53125vw;
}
.vaal-mix-6 {
  width: 100%;
  position: relative;
}
.vaal-mix-6 img {
  width: 100%;
}
.vaal-mix-6 .vaal-mix-6-1 {
  position: absolute;
  width: 100%;
  left: 0;
  top: 2.9296875vw;
}
.vaal-mix-6 .vaal-mix-6-1 h2 {
  color: #fff;
  text-align: center;
}
.vaal-mix-7 {
  width: 100%;
  position: relative;
}
.vaal-mix-7 img {
  width: 100%;
}
.vaal-mix-7 .vaal-mix-7-1 {
  position: absolute;
  width: 100%;
  left: 0;
  top: 4.8828125vw;
}
.vaal-mix-7 .vaal-mix-7-1 h2,
.vaal-mix-7 .vaal-mix-7-1 p {
  color: #010000;
  text-align: center;
}
.vaal-mix-8 {
  position: relative;
  width: 100%;
  padding: 6.640625vw var(--window-left-1) 7.03125vw;
}
.vaal-mix-8 .vaal-mix-8-1 {
  position: relative;
}
.vaal-mix-8 .vaal-mix-8-1 img {
  width: 100%;
}
.vaal-mix-8 .vaal-mix-8-1 .vaal-mix-8-2 {
  position: absolute;
  left: 10.3125vw;
  top: 8.9453125vw;
}
.vaal-mix-8 .vaal-mix-8-1 .vaal-mix-8-2 h2 {
  padding-bottom: 1em;
}
.vaal-mix-8 .vaal-mix-8-1 .vaal-mix-8-2 .vaal-mix-8-2-1 {
  display: flex;
  justify-content: left;
}
.vaal-mix-8 .vaal-mix-8-1 .vaal-mix-8-2 .vaal-mix-8-2-1 img {
  width: 8.8671875vw;
  margin-right: 1.5vw;
}
.vaal-mix-8 .vaal-mix-8-1 .vaal-mix-8-2 .vaal-mix-8-2-1 .vaal-mix-8-2-2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.vaal-mix-8 .vaal-mix-8-1 .vaal-mix-8-2 .vaal-mix-8-2-1 .vaal-mix-8-2-2 p {
  padding: 0;
}
.vaal-mix-09 {
  width: 100%;
  position: relative;
  background-color: #fcf1e2;
  padding-bottom: 5.859375vw;
  padding-top: 5.6640625vw;
}
.vaal-mix-09 h2 {
  text-align: center;
  color: #000000;
  padding-bottom: 2.734375vw;
}
.vaal-mix-09 .content {
  width: var(--window-width-1);
  position: relative;
}
.vaal-mix-09 .content img {
  width: 100%;
}
.vaal-mix-10 {
  width: 100%;
  position: relative;
  background: url(VAAL-MIX-10-bg.jpg) no-repeat;
  background-size: cover;
  padding: 4.4921875vw 0 3.6328125vw;
}
.vaal-mix-10 h2 {
  text-align: left;
  padding-left: 14.140625vw;
  padding-bottom: 3.125vw;
  color: #191919;
}
.vaal-mix-10 img {
  width: 82.109375vw;
  margin-left: 9.765625vw;
}
.vaal-mix-11 {
  width: 100%;
  position: relative;
  background-color: #f7f7f7;
  padding-bottom: 5.6640625vw;
  padding-top: 4.8828125vw;
}
.vaal-mix-11 h2 {
  text-align: center;
  color: #191919;
  padding-bottom: 2.9296875vw;
}
.vaal-mix-11 .content {
  width: var(--window-width-1);
  position: relative;
}
.vaal-mix-11 .content .vaal-mix-11-1 {
  padding-bottom: 2.34375vw;
  justify-content: space-between;
}
.vaal-mix-11 .content .vaal-mix-11-1 .vaal-mix-11-1-L {
  width: calc(25% - 0.5vw);
  background-color: #fff;
  text-align: center;
  border-radius: 1em;
}
.vaal-mix-11 .content .vaal-mix-11-1 .vaal-mix-11-1-L img {
  width: 7.2265625vw;
  margin: 2vw auto;
}
.vaal-mix-11 .content .vaal-mix-11-1 .vaal-mix-11-1-R {
  width: calc(75% - 0.5vw);
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.vaal-mix-11 .content .vaal-mix-11-1 .vaal-mix-11-1-R-1 {
  width: calc(25% - 0.5vw);
  background-color: #fff;
  text-align: center;
  height: calc(50% - 0.5vw);
  display: flex;
  justify-content: center;
  flex-direction: column;
  border-radius: 1em;
}
.vaal-mix-11 .content .vaal-mix-11-1 .vaal-mix-11-1-R-1 img {
  width: 3.59375vw;
  margin: 0 auto 0.5vw;
}
.vaal-mix-11 .content .vaal-mix-11-1 .vaal-mix-11-1-R-1 p span:first-child {
  font-size: 0.87em;
  color: #858585;
}
.vaal-mix-11 .content .vaal-mix-11-1 .vaal-mix-11-1-R-1 p span:last-child {
  font-size: 1.13em;
  color: #191919;
  font-weight: bold;
}
.vaal-mix-11 .content .vaal-mix-11-1 .vaal-mix-11-1-R-top {
  margin-bottom: 1vw;
  width: calc(33.3% - 0.5vw);
}
.vaal-mix-12 {
  width: 100%;
  position: relative;
}
.vaal-mix-12 img {
  width: 100%;
}
.vaal-mix-12 .vaal-mix-12-1 {
  position: absolute;
  left: var(--window-left-1);
  top: 20%;
  text-align: left;
}
.vaal-mix-12 .vaal-mix-12-1 p {
  color: #272727;
  padding-top: 1.6em;
}
.vaal-mix-12 .vaal-mix-12-1 p b {
  color: #000000;
  font-size: 1.2em;
  display: block;
  padding-bottom: 0.4em;
}
.vaal-mix-13 {
  position: relative;
  width: 100%;
}
.vaal-mix-13 img {
  width: 100%;
}
.vaal-mix-13 .vaal-mix-13-1 {
  position: absolute;
  left: 45.703125vw;
  top: 10.546875vw;
  width: 43.9453125vw;
}
.vaal-mix-13 .vaal-mix-13-1 h2 {
  color: #000000;
  padding-bottom: 1em;
}
.vaal-mix-13 .vaal-mix-13-1 img {
  width: 100%;
}
@media (max-width: 767px) {
  :root {
    --window-width-1: 80%;
    --window-left-1: 10%;
    --window-left-2: 5%;
  }
  h2 {
    font-size: 4.6875vw;
    font-weight: bold;
  }
  p,
  .text {
    font-size: 3.90625vw;
  }
  .vaal-mix-1 .vaal-mix-1-1 {
    left: 8.07291667vw;
    width: 52.60416667vw;
    top: 5.078125vw;
  }
  .vaal-mix-1 .vaal-mix-1-1 img {
    width: 100%;
  }
  .vaal-mix-2 {
    padding-top: 10vw;
    background-color: #fff;
  }
  .vaal-mix-2 .content .flex {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .vaal-mix-2 .content .flex img {
    width: 42%;
    margin-bottom: 5.46875vw;
  }
  .vaal-mix-2 .content p {
    text-align: left;
  }
  .vaal-mix-3 {
    background-color: #fff;
  }
  .vaal-mix-3 .flex {
    flex-wrap: wrap;
    justify-content: center;
  }
  .vaal-mix-3 .flex .vaal-mix-3-1 {
    width: 31.333%;
    padding-bottom: 1.5em;
  }
  .vaal-mix-3 .flex .vaal-mix-3-1 p {
    bottom: 2em;
  }
  .vaal-mix-3 .flex .vaal-mix-3-1:nth-child(1) {
    margin-right: 1%;
  }
  .vaal-mix-3 .flex .vaal-mix-3-1:nth-child(2) {
    margin-left: 0.5%;
    margin-right: 0.5%;
  }
  .vaal-mix-3 .flex .vaal-mix-3-1:nth-child(3) {
    margin-left: 1%;
  }
  .vaal-mix-3 .flex .vaal-mix-3-1:nth-child(4) {
    margin-right: 1%;
  }
  .vaal-mix-3 .flex .vaal-mix-3-1:nth-child(5) {
    margin-left: 1%;
  }
  .vaal-mix-4 .vaal-mix-4-1 {
    position: relative;
    top: auto;
    padding: 5vw var(--window-left-2) 1em;
  }
  .vaal-mix-5 {
    padding: 10vw 0;
  }
  .vaal-mix-5 p {
    padding-bottom: 0.5em;
  }
  .vaal-mix-5 .vaal-mix-5-1 {
    height: 48vw;
  }
  .vaal-mix-5 .vaal-mix-5-1 video {
    border-radius: 0;
  }
  .vaal-mix-6 .vaal-mix-6-1 {
    position: relative;
    top: auto;
  }
  .vaal-mix-6 .vaal-mix-6-1 h2 {
    color: #000;
  }
  .vaal-mix-7 .vaal-mix-7-1 {
    top: 6vw;
    padding: 0 var(--window-left-2);
  }
  .vaal-mix-8 {
    padding: 0;
  }
  .vaal-mix-8 .vaal-mix-8-1 .vaal-mix-8-2 {
    left: 5vw;
    top: 15vw;
  }
  .vaal-mix-8 .vaal-mix-8-1 .vaal-mix-8-2 .vaal-mix-8-2-1 img {
    width: 25vw;
  }
  .vaal-mix-13 {
    background: linear-gradient(to top, #d3fbfb, #fbdd97);
    padding: 10vw 5vw 14.32291667vw;
  }
  .vaal-mix-13 .vaal-mix-13-1 {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }
  .vaal-mix-13 .vaal-mix-13-1 h2 {
    text-align: center;
    padding-bottom: 3.90625vw;
  }
  .vaal-mix-09 {
    padding: 10vw var(--window-left-2) 5vw;
    background: linear-gradient(to top, #f9f7df, #ebe3f5);
  }
  .vaal-mix-09 h2 {
    padding-bottom: 3.90625vw;
  }
  .vaal-mix-09 .content {
    width: 100%;
  }
  .vaal-mix-10 {
    padding: 10vw var(--window-left-1) 5vw;
  }
  .vaal-mix-10 h2 {
    padding: 0 0 2em;
    text-align: center;
  }
  .vaal-mix-10 img {
    width: 100%;
    margin: 0;
  }
  .vaal-mix-11 {
    background-color: #eeeeee;
  }
  .vaal-mix-11 .content {
    width: 100%;
    padding: 0 var(--window-left-2);
  }
  .vaal-mix-11 .content .vaal-mix-11-1 .vaal-mix-11-1-L {
    display: flex;
    align-items: center;
    width: calc(33.3% - 1vw);
  }
  .vaal-mix-11 .content .vaal-mix-11-1 .vaal-mix-11-1-L img {
    width: 70%;
  }
  .vaal-mix-11 .content .vaal-mix-11-1 .vaal-mix-11-1-R {
    display: flex;
    flex-direction: column;
    width: calc(33.3% - 1vw);
  }
  .vaal-mix-11 .content .vaal-mix-11-1 .vaal-mix-11-2-R {
    display: flex !important;
    flex-direction: column;
    width: calc(33.3% - 1vw);
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
  }
  .vaal-mix-11 .content .vaal-mix-11-1 .vaal-mix-11-1-R .vaal-mix-11-1-R-1 {
    height: calc(33.3% - 1vw);
    width: 100%;
  }
  .vaal-mix-11 .content .vaal-mix-11-1 .vaal-mix-11-2-R .vaal-mix-11-1-R-1 {
    height: calc(25% - 1vw);
    padding: 0.5em 0;
    width: 100%;
  }
  .vaal-mix-11 .content .vaal-mix-11-1 .vaal-mix-11-1-R-1 img {
    width: 3em;
  }
  .vaal-mix-11 .content .vaal-mix-11-1 .vaal-mix-11-1-R-1 p span:last-child {
    font-size: 0.8em;
  }
  .vaal-mix-12 > h2 {
    position: absolute;
    width: 100%;
    top: 10vw;
    left: 0;
    text-align: center;
  }
  .vaal-mix-12 .vaal-mix-12-1 {
    width: calc(100% - var(--window-left-2));
    left: var(--window-left-2);
    display: flex;
    justify-content: space-between;
    top: 55%;
  }
  .vaal-mix-12 .vaal-mix-12-1 .p1 {
    width: 44%;
  }
  .vaal-mix-12 .vaal-mix-12-1 .p2 {
    width: 56%;
  }
}