@charset "utf-8";

/* CSS Document */

/***********
mv
************/

.mv {
  --mv-font-size: clamp(15px,1vw, 9999px);
  --mv-min-height: 600px;
  font-size: var(--mv-font-size);
  opacity: 0;
}
.l-wrapper {
  opacity: 0;
}
body.is-loaded .mv ,
body.is-loaded .l-wrapper {
  opacity: 1;
  transition: 0.2s;
}


.mv-flip {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
}
.mv-flip-inner {
  translate: 0 100%;
}
body.is-loaded .mv-flip-inner {
  translate: 0 0;
  transition: translate 0.8s linear 0.2s;
}


.mv-upper {
  overflow: hidden;
  position: relative;
  background-color: var(--color-base);
}
.mv-lower {
  overflow: hidden;
  position: relative;
  background-color: var(--color-base);
}

.mv-slider {
  position: relative;
  overflow: hidden;
  width: 140vw;
  margin-left: -40vw;
}
.mv-slider-track {
  position: relative;
}
.mv-slider-item {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: calc(100vw / 3.5);
  height: calc(100svh - 5em);
  min-height: var(--mv-min-height)
}
.mv-slider-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mv-slider-text {
  position: absolute;
  left: 0;
  z-index: 9;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--font-family-gothic-en);
  font-weight: 800;
  font-size: 95%;
  letter-spacing: 0;
  color: var(--color-base);
  width: 100%;
  text-align: center;
  line-height: 1;
}
.mv-slider-text::before {
  content: "［"
}
.mv-slider-text::after {
  content: "］"
}
.mv-slider-text.-upper {
  top: 2em;
}
.mv-slider-text.-lower {
  bottom: 2em;
}


.mv-ticker {
  background-color: var(--color-purple);
  overflow: hidden;
  border-block: 1px solid var(--color-main);
}
.mv-slider-word {
  position: absolute;
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
  padding: 0.15em 0.2em;
  font-size: 4em;
  font-family: var(--font-family-accent);
  font-weight: 400;
}
.mv-slider-word span {
  display: inline-block;
  scale: 1 0.8;
}

/*
container
*/

.mv-container {
  font-size: clamp(10px,1vw, 9999px);
  position: absolute;
  width: 100%;
  height: 100svh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  letter-spacing: 0;
  z-index: 999;
  color: var(--color-base);
  user-select: none;
  pointer-events: none !important;
  overflow: hidden;
}
.mv-inner {
}
.mv-catch {
  margin-left: -3vw;
  margin-right: -3vw;
  position: relative;
}
.mv-catch-text {
  font-size: 9.85em;
  font-family: var(--font-family-gothic-en);
  font-weight: 700;
  opacity: 0.8;
  line-height: 1;
  white-space: nowrap;
}

.mv-balloon {
  font-size: 1.6em;
  padding: 4em;
  aspect-ratio: 1 / 1;
  background: url(../../img/balloon_em.png) no-repeat center center / 100% auto;;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: absolute;
  z-index: 2;
  left: calc(50% + 2em);
  bottom: calc(100% - 3em);
  opacity: 0;
  scale: 1.3;
  rotate: 3deg;
}
body.is-loaded .mv-balloon {
  opacity: 1;
  scale: 1;
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
  animation: anim-quake 5s steps(1, end) 1s infinite;
}
.mv-balloon-text {
  font-family: var(--font-family-serif-en);
  font-weight: 400;
  color: var(--color-main);
  rotate: 10deg;
  scale: 1 1.2;
}

.mv-lead {
  font-size: 1.8em;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.mv-logo {
  padding-top: 1em;
  width: 11em;
  margin: 0 auto;
  opacity: 0.8;
}
.pin-spacer {
  pointer-events: none !important;
}

@media screen and (max-width:1024px) {

  .mv-slider-item {
    width: calc(100vw / 2.5);
    height: calc(100svh - 5em);
  }

  /*
  container
  */

  .mv-container {
    font-size: clamp(10px,1.5vw, 9999px);
  }
  .mv-catch {
    position: relative;
  }
  .mv-catch-text {
    font-size: 6.6em;
  }

}

@media screen and (max-width:520px) {

  .mv {
    --mv-font-size: clamp(12px,3vw, 15px);
  }

  .mv-slider {
    width: 200vw;
    margin-left: -100vw;
  }

  .mv-slider-item {
    width: 80vw;
    height: calc(100svh - 5em);
  }

  /*
  container
  */

  .mv-container {
    font-size: clamp(10px,1.5vw, 9999px);
  }
  .mv-catch {
    margin-left: 0;
    margin-right: 0;
  }
  .mv-catch-text {
    font-size: 6.6em;
    white-space: wrap;
    line-height: 0.9;
  }

  .mv-balloon {
    white-space: nowrap;
    font-size: 1.6em;
    padding: 3em;
    left: calc(50% + 1em);
    bottom: calc(100% - 1em);
  }

  .mv-lead {
    font-size: 1.7em;
  }
  .mv-logo {
    width: 8em;
  }

}

/***********
xxxxx
************/

/***********
xxxxx
************/

/***********
xxxxx
************/

/***********
xxxxx
************/

/***********
xxxxx
************/

/***********
xxxxx
************/

/***********
xxxxx
************/

/***********
xxxxx
************/

/***********
xxxxx
************/