@import url(./_global.css);

/* 
--------------------------------------------------------------
top > hero
 */

.top-hero {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 250vh;
  margin-bottom: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.top-hero-text {
  font-family: "Dela Gothic One", sans-serif;
  font-size: 2vw;
  line-height: 2;
}

.top-hero-text span {
  color: var(--black);
  background-color: var(--blue);
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

.top-hero-imagebordera {
  position: absolute;
  top: 5%;
  left: -5%;
  z-index: -1;
  width: 70%;
  aspect-ratio: 16/9;
  border: 2px solid var(--blue);
  background-color: transparent;
  filter: url(#turbulent-displace);
}

.top-hero-imagea {
  position: absolute;
  width: 70%;
  height: auto;
  top: 5%;
  left: -5%;
  z-index: -2;
  border: 2px solid var(--blue);
}

.top-hero-imageborderb {
  position: absolute;
  top: 55%;
  left: 55%;
  z-index: -1;
  width: 60%;
  aspect-ratio: 16/9;
  border: 2px solid var(--blue);
  background-color: transparent;
  filter: url(#turbulent-displace);
}

.top-hero-imageb {
  position: absolute;
  width: 60%;
  height: auto;
  top: 55%;
  left: 55%;
  z-index: -2;
  border: 2px solid var(--blue);
}

.top-hero-imageborderc {
  position: absolute;
  top: 67%;
  left: 10%;
  z-index: -1;
  width: 20%;
  height: 30%;
  border: 2px solid var(--blue);
  background-color: transparent;
  filter: url(#turbulent-displace);
}

.top-hero-imagec {
  position: absolute;
  object-fit: cover;
  width: 20%;
  height: 30%;
  top: 67%;
  left: 10%;
  z-index: -2;
  border: 2px solid var(--blue);
}

/* 
--------------------------------------------------------------
top > part
 */

.top-part {
  position: relative;
  margin-bottom: 200px;
  color: var(--main);
  color: var(--yellow);
}

.top-part-background {
  width: 100%;
  height: 120%;
  background-color: var(--main);
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: -100;
  filter: url(#blur-y);
}

.top-part-titlebox {
  border-bottom: 1px solid var(--black);
}

.top-part-list-item {
  width: 100%;
  height: 60vh;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.top-part-list-item-image {
  width: 60%;
  clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
  background-color: #ccc;
}

.top-part-list-item-image-video {
  width: 110%;
  height: 100%;
  object-fit: cover;
}

.top-part-list-item-text {
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: right;
}

.top-part-list-item:nth-of-type(2n) .top-part-list-item-text {
  padding-right: 0;
  padding-left: 20px;
}

.top-part-list-item-sentence {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1vw;
  margin-bottom: 5%;
}

.top-part-list-item-jtitle {
  color: var(--pink);
  display: inline-block;
  font-family: "Dela Gothic One", sans-serif;
  font-size: 4vw;
  text-shadow: 0 0 2px var(--yellow), 0 0 1px var(--yellow),
    0 0 15px var(--blue), 0 0 40px var(--yellow);
}

.top-part-list-item-title {
  display: inline-block;
  font-size: 8vw;
  line-height: 1;
  text-shadow: 0 0 2px var(--yellow), 0 0 1px var(--yellow),
    0 0 15px var(--blue), 0 0 40px var(--yellow);
}

.top-part-list-item:nth-of-type(2n) {
  flex-direction: row-reverse;
}

.top-part-list-item:nth-of-type(2n)>.top-part-list-item-image {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 20% 100%);
}

.top-part-list-item:nth-of-type(2n)>.top-part-list-item-text {
  text-align: left;
}

/* 
--------------------------------------------------------------
top > message
 */

.top-message {
  position: relative;
  width: 100%;
  height: 300vh;
  margin-bottom: 100px;
  overflow: hidden;
}

.top-message-image {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  display: flex;
  gap: 20px;
  justify-content: flex-start;
}

.top-message-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.top-message-box-text {
  font-family: "Dela Gothic One", sans-serif;
  color: var(--black);
  -webkit-text-stroke: 1px var(--main);
  text-shadow: 0 0 10px var(--blue);
  font-size: 2vw;
  line-height: 2.5;
  text-align: center;
}

/* 
--------------------------------------------------------------
top > message > image
 */

.image {
  width: 25%;
  aspect-ratio: 1/1;
  transform-origin: 50 50;
  transform-style: preserve-3d;
  border-radius: 10px;
  animation: rotate 15s infinite linear;
  flex-shrink: 0;
}

.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.image:nth-of-type(1) {
  animation: rotate 30s infinite linear;
}

.image:nth-of-type(2) {
  animation: rotate 30s infinite linear;
}

.image:nth-of-type(3) {
  animation: rotate 30s infinite linear;
}

.image:nth-of-type(4) {
  animation: rotate 30s infinite linear;
}

.image:nth-of-type(5) {
  animation: rotate 30s infinite linear;
}

.image:nth-of-type(6) {
  animation: rotate 30s infinite linear;
}

.image:nth-of-type(7) {
  animation: rotate 30s infinite linear;
}

.image:nth-of-type(8) {
  animation: rotate 30s infinite linear;
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}