/* Custom styles */

body { background-color: #F9F7F3; }

body {font-family: Rubik, sans-serif;}

.text-wafuu-pink { color: #FF1493; }

.bg-wafuu-orange { background: linear-gradient(257.2deg, #FF5E51 21.09%, #FFAB6F 100%); }

.text-wafuu-brown { color: #4A3933; }

.bg-wafuu-beige { background-color: #D7C2A7; }

.league-spartan-<uniquifier> {
  font-family: "League Spartan", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.f-light {
  color: #52526C;
  opacity: 0.8;
}

.landing-title {
  font-size: calc(16px + 4 * (100vw - 300px) / 1620);
  color: #52526C;
  opacity: 0.8;
　margin-bottom: 30px;
}

.landing-title .gradient-2 {
    background: linear-gradient(90deg, #FF6A5B 4.44%, #1E52B9 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-5 {
  background: linear-gradient(90deg, #6A2FE7 2%, #46B7D0 40%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-7 {
  background: linear-gradient(90deg, #FF7A00 20%, #D72695 89.68%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-8 {
  background: linear-gradient(257.2deg, #FF5E51 21.09%, #FFAB6F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sub-title {
  font-size: calc(18px + 8 * (100vw - 300px) / 1620);
  font-weight: 700;
  font-family: "Caveat", cursive;
  color: #FFB905;
}

.content-title {
  position: relative;
  display: inline-block;
}

.arrow-decore {
  position: absolute;
  left: -203px;
  top: -25px;
}

.slider {
  overflow: hidden;
}

.slide-track {
  display: flex;
  animation: scroll 80s linear infinite;
  width: calc(200vw * 2); /* 変更: 幅を200vwに調整 */
}

.slide-track {
  display: flex;
  animation: scroll 80s linear infinite;
  width: calc(200vw * 2); /* 変更: 幅を200vwに調整 */
}

.slide {
  width: 70vw;
  display: flex;
}

@media (max-width:767px) {
	.slide {
	  width: 100vw;
	  display: flex;
	}
}

.slide img {
  width: 100%; /* 変更: 幅を100%に設定 */
  height: auto;
  object-fit: cover;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100vw * 2)); /* 変更: translateXの値を調整 */
  }
}
.count {
    text-align: center;
    position: relative;
    margin-bottom: 50px;
}

.count .couting {
    margin-bottom: -10px;
    margin-top: calc(-15px + -17*(100vw - 300px) / 1620);
}

.count .couting h2 {
    color: var(--theme-deafult);
    font-weight: 500;
    font-size: calc(100px + 150 * (100vw - 300px) / 1620);
    background: linear-gradient(180deg, #5456AA 0%, rgba(0, 2, 72, 0) 88.85%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0;
    line-height: 1;
    opacity: 0.1;
}

.landing-title h2 {
    font-size: calc(25px + 27 * (100vw - 300px) / 1620);
}

@media (max-width: 768px) {
  body {
    padding: 0 20px;
  }
}