@charset "UTF-8";
#main_copy_text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#main_copy_text h1 {
  translate: 0 20%;
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: 80%;
  max-width: 650px;
}
#main_copy_text h1 span {
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
#main_copy_text h1 span:nth-child(1) {
  width: 70%;
  animation: copy_animation 0.5s ease-in 2.5s 1 forwards;
}
#main_copy_text h1 span:nth-child(2) {
  animation: copy_animation 0.5s ease-in 2.7s 1 forwards;
}
#main_copy_text h1 span:nth-child(3) {
  animation: copy_animation 0.5s ease-in 2.9s 1 forwards;
}
#main_copy_text h1 span:nth-child(4) {
  width: 30%;
  margin: 0 auto;
  translate: 20% 0;
  animation: copy_animation 0.5s ease-in 3.6s 1 forwards;
}
#main_copy_text h1 span svg {
  width: 100%;
}
#main_copy_text h1 span svg path {
  fill: #ffffff;
}
#main_copy_text > section {
  position: sticky;
  bottom: 0;
  left: 0;
  padding: 1% 0 0;
}
#main_copy_text > section div.wrapper {
  display: flex;
  justify-content: center;
  gap: 2%;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  transform: translateX(100%);
  opacity: 0;
  animation: anime_right 2s ease-out 1.5s 1 forwards;
}
#main_copy_text > section div.wrapper svg {
  width: 100%;
  filter: drop-shadow(0px 3px 10px rgba(255, 255, 255, 0.5));
}
#main_copy_text > section div.wrapper svg path {
  fill: #ffffff;
}
#main_copy_text > section div.wrapper h2 {
  width: 60%;
}
#main_copy_text > section div.wrapper div {
  width: 35%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 2%;
}
#main_copy_text > section div.wrapper div h3 {
  width: 100%;
}
#main_copy_text > section div.wrapper div p.cta_btn a {
  font-size: clamp(1.2rem, 1.7vw, 2.4rem);
}
#main_copy_text > section div.wrapper div p.cta_btn a svg {
  width: 10%;
}
@keyframes link_anime {
  0% {
    transform: scale(0.95);
    opacity: 1;
  }
  90% {
    opacity: 0.1;
  }
  to {
    transform: scale(1.1, 1.2);
    opacity: 0;
  }
}
@keyframes arrow_anime {
  0% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1.08, 1.14);
  }
}
@keyframes anime_right {
  0% {
    transform: translateX(100%);
  }
  60% {
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
section#key_visual {
  height: 100vh;
  max-width: 92%;
  margin: 0 auto;
  contain: paint;
  position: relative;
}
.completed section#key_visual:before {
  content: "";
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 190;
}
section#key_visual div.kv_wrap {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
}
section#key_visual div.kv_wrap #main_copy_bg {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
section#key_visual div.kv_wrap #main_copy_bg::before {
  content: "";
  display: block;
  width: 100%;
  height: 60%;
}
section#key_visual div.kv_wrap #main_copy_bg::after {
  content: "";
  clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);
  background: #00a99d;
  width: 0;
  height: 18%;
  opacity: 0;
  animation: anime_left 1s ease-out 1.5s 1 forwards;
  position: sticky;
  bottom: 0;
}
@keyframes anime_left {
  0% {
    width: 0;
  }
  60% {
    opacity: 0;
  }
  100% {
    width: 100%;
    opacity: 1;
  }
}
section#key_visual div.kv_wrap div.main video {
  min-width: 100%;
  min-height: 100vh;
  position: absolute;
}
section#key_visual div.kv_wrap div.main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}
section#key_visual div.kv_wrap div.main img.webp, section#key_visual div.kv_wrap div.main img.hide, section#key_visual div.kv_wrap div.main img.webp_big {
  display: none;
}
section#key_visual div.kv_wrap img.bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section#key_visual div.kv_wrap img.line {
  mix-blend-mode: multiply;
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
section#key_visual div.kv_wrap img.multiply {
  mix-blend-mode: color;
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
section#key_visual div.kv_wrap img.adjustment {
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
section#key_visual div.kv_wrap img.flower {
  position: absolute;
  opacity: 0;
  top: 50%;
  left: 50%;
  width: 690px;
  top: -14%;
  left: 50%;
  transform: translateX(-50%) rotate(11deg) scale(0.1);
  transform-origin: bottom center;
}
.completed section#key_visual div.kv_wrap img.flower {
  animation: flower_animation 120s ease-out 0s 1 forwards;
}
section#key_visual div.kv_wrap div#clock {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 550px;
  height: 260px;
  transform-origin: bottom right;
}
.completed section#key_visual div.kv_wrap div#clock {
  animation: clock_animation 120s ease-out 0s 1 forwards;
}
section#key_visual div.kv_wrap div#clock div.clock_wrap {
  background: url("../images/collage/clock/clock_body.webp") no-repeat center/100%;
  width: 100%;
  height: 100%;
}
section#key_visual div.kv_wrap div#clock div.clock_wrap div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: -3.9%;
  left: 2.5%;
}
section#key_visual div.kv_wrap div#clock div.clock_wrap div#hour {
  background: url("../images/collage/clock/hour.webp") no-repeat center top 33%/9%;
}
section#key_visual div.kv_wrap div#clock div.clock_wrap div#long {
  background: url("../images/collage/clock/long.webp") no-repeat center top 0%/1.3%;
}
section#key_visual div.kv_wrap div#clock div.clock_wrap div#second {
  background: url("../images/collage/clock/second.webp") no-repeat left 50.2% top 39.5%/2.1%;
}
section#key_visual div.kv_wrap div#circle {
  width: 900px;
  height: 900px;
  border-radius: 50%;
  mix-blend-mode: hard-light;
  background: #E3BC1E;
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-20%, -50%) scale(0);
  transform-origin: bottom center;
}
.completed section#key_visual div.kv_wrap div#circle {
  animation: circle_animation 120s ease-out 0s 1 forwards;
}

@keyframes copy_animation {
  1.8% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
  }
}
@keyframes flower_animation {
  4% {
    transform: translateX(-10%) rotate(11deg) scale(0.1);
    opacity: 0;
  }
  4.2% {
    opacity: 1;
  }
  4.3% {
    transform: translateX(-10%) rotate(11deg) scale(1.1);
  }
  4.4% {
    transform: translateX(-10%) rotate(11deg) scale(0.9);
  }
  4.5% {
    transform: translateX(-10%) rotate(11deg) scale(1.05);
  }
  4.6% {
    transform: translateX(-10%) rotate(11deg) scale(0.95);
  }
  4.7% {
    transform: translateX(-10%) rotate(11deg) scale(1.02);
  }
  4.8% {
    transform: translateX(-10%) rotate(11deg) scale(0.99);
  }
  4.9% {
    transform: translateX(-10%) rotate(11deg) scale(1);
  }
  100% {
    transform: translateX(-10%) rotate(11deg) scale(1);
    opacity: 1;
  }
}
@keyframes circle_animation {
  3.2% {
    transform: translate(-20%, -50%) scale(0);
  }
  3.3% {
    transform: translate(-20%, -50%) scale(1.1);
  }
  3.4% {
    transform: translate(-20%, -50%) scale(0.9);
  }
  3.5% {
    transform: translate(-20%, -50%) scale(1.05);
  }
  3.6% {
    transform: translate(-20%, -50%) scale(0.95);
  }
  3.7% {
    transform: translate(-20%, -50%) scale(1.02);
  }
  3.8% {
    transform: translate(-20%, -50%) scale(0.99);
  }
  100% {
    transform: translate(-20%, -50%) scale(1);
  }
}
/*動画よりも画面が横に長くなるとき用*/
@media (aspect-ratio: 16 / 9), (min-aspect-ratio: 16 / 9) {
  section#key_visual {
    height: 96vh;
  }
  section#key_visual div.kv_wrap div.main video {
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
  }
  section#key_visual div.kv_wrap div#clock {
    transform: translate(-46.5%, -217.7%) rotate(-22.5deg) scale(0);
    transform-origin: bottom right;
    width: 30.4vw;
    height: 13.8vw;
  }

  @keyframes clock_animation {
    3% {
      left: 50%;
      transform: translate(-46.5%, -217.7%) rotate(39deg) scale(0);
      transform-origin: bottom right;
    }
    3.2% {
      transform: translate(-46.5%, -217.7%) rotate(-29.5deg) scale(1);
    }
    3.3% {
      transform: translate(-46.5%, -217.7%) rotate(-19.5deg) scale(1);
    }
    3.35% {
      transform: translate(-46.5%, -217.7%) rotate(-25.5deg) scale(1);
    }
    3.4% {
      transform: translate(-46.5%, -217.7%) rotate(-20.5deg) scale(1);
    }
    3.5% {
      transform: translate(-46.5%, -217.7%) rotate(-22.5deg) scale(1);
      transform-origin: bottom right;
    }
    3.6% {
      transform: translate(-39%, -131.7%) rotate(-22.5deg) scale(1);
      transform-origin: bottom left;
    }
    100% {
      transform: translate(-39%, -131.7%) rotate(-22.5deg) scale(1);
      transform-origin: bottom left;
    }
  }
}
/*動画よりも画面が縦に長くなるとき用*/
@media (max-aspect-ratio: 16 / 9) {
  section#key_visual div.kv_wrap div.main video {
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
  section#key_visual div.kv_wrap div.main img {
    left: 0;
  }
  section#key_visual div.kv_wrap div#clock {
    transform: translate(-38%, -122.7%) rotate(-22.5deg) scale(0);
    width: 64vh;
    height: 30.2vh;
  }

  @keyframes clock_animation {
    3% {
      left: 50%;
      transform: translate(-45.5%, -204%) rotate(39deg) scale(0);
      transform-origin: bottom right;
    }
    3.2% {
      transform: translate(-45.5%, -204%) rotate(-29.5deg) scale(1);
    }
    3.3% {
      transform: translate(-45.5%, -204%) rotate(-19.5deg) scale(1);
    }
    3.35% {
      transform: translate(-45.5%, -204%) rotate(-25.5deg) scale(1);
    }
    3.4% {
      transform: translate(-45.5%, -204%) rotate(-20.5deg) scale(1);
    }
    3.5% {
      transform: translate(-45.5%, -204%) rotate(-22.5deg) scale(1);
      transform-origin: bottom right;
    }
    3.6% {
      transform: translate(-38%, -122.7%) rotate(-22.5deg) scale(1);
      transform-origin: bottom left;
    }
    100% {
      transform: translate(-38%, -122.7%) rotate(-22.5deg) scale(1);
      transform-origin: bottom left;
    }
  }
}
@media screen and (max-width: 768px) {
  #main_copy_text > section {
    padding: 1% 3% 3%;
  }
  #main_copy_text > section div.wrapper {
    flex-direction: column;
  }
  #main_copy_text > section div.wrapper h2 {
    width: 100%;
  }
  #main_copy_text > section div.wrapper div {
    width: 100%;
  }
  #main_copy_text > section div.wrapper div p a {
    font-size: clamp(1.5rem, 4.3vw, 2.4rem);
  }

  section#key_visual {
    margin: 0;
  }
  section#key_visual div.kv_wrap #main_copy_bg::before {
    height: 50%;
  }
  section#key_visual div.kv_wrap #main_copy_bg::after {
    height: 25%;
  }
}