@charset "UTF-8";

/* ================================================
  FV - Wrapper & Layout
================================================ */
#wrapper {
  width: 100%;
  overflow: hidden;
}

.c-inner {
  width: 1240px;
  max-width: 95%;
  margin: 0 auto;
  position: relative;
}

@media screen and (max-width: 767px) {
  .c-inner {
    width: calc(100% - 40px);
  }
}

/* PC/SP display helpers */
@media screen and (max-width: 767px) {
  .c-pc {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .c-sp {
    display: none !important;
  }
}

/* ================================================
  FV - Main Visual
================================================ */
.top-mv {
  width: 100%;
  padding: 0 40px 300px;
  position: relative;
  overflow: hidden;
  /* Background overlay for text readability - will be updated by JavaScript on scroll */
  --overlay-opacity: 0;
}

.top-mv::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: var(--overlay-opacity);
  transition: opacity 0.1s ease;
  z-index: 1;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  .top-mv {
    padding: 0 0 128px;
  }
}

.top-mv .c-inner {
  max-width: 1320px;
  z-index: 2;
  position: relative;
}

/* H1 Title */
.top-mv h1 {
  padding: calc(50lvh - 176px) 0 20vw;
  transition: all 0.4s ease;
}

@media screen and (max-width: 767px) {
  .top-mv h1 {
    height: 100lvh;
    padding: 50lvh 0 0;
  }
}

.top-mv h1 small {
  display: block;
  margin-top: 16px;
  font-size: clamp(1rem, 0.5536rem + 2.2321vw, 1.625rem);
  color: #fff;
  text-shadow: 4px 4px 2px #00000040;
  letter-spacing: -0.05em;
  font-style: italic;
}

.top-mv h1 img {
  display: block;
}

.top-mv h1 img:first-child {
  width: min(710px, 45.859375vw);
}

@media screen and (max-width: 767px) {
  .top-mv h1 img:first-child {
    width: min(265px, 70.67vw);
  }
}

.top-mv h1 img:nth-child(2) {
  margin-top: 32px;
  width: min(611px, 41.64vw);
}

@media screen and (max-width: 767px) {
  .top-mv h1 img:nth-child(2) {
    width: min(238px, 63.47vw);
  }
}

/* Body text spacing */
.top-mv p + p {
  margin-top: 25px;
}

.top-mv p small {
  font-size: 0.75em;
  letter-spacing: -0.08em;
}

/* ================================================
  FV - Fade Animation Elements
================================================ */
.top-mv-fade {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.is-mv-animated .top-mv-fade {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for sequential animation */
.is-mv-animated .top-mv-fade:nth-child(1) {
  transition-delay: 0.1s;
}
.is-mv-animated .top-mv-fade:nth-child(2) {
  transition-delay: 0.2s;
}
.is-mv-animated .top-mv-fade:nth-child(3) {
  transition-delay: 0.3s;
}
.is-mv-animated .top-mv-fade:nth-child(4) {
  transition-delay: 0.4s;
}
.is-mv-animated .top-mv-fade:nth-child(5) {
  transition-delay: 0.5s;
}
.is-mv-animated .top-mv-fade:nth-child(6) {
  transition-delay: 0.6s;
}
.is-mv-animated .top-mv-fade:nth-child(7) {
  transition-delay: 0.7s;
}

/* ================================================
  FV - Background & Staff Images
================================================ */
.top-mv .__cover {
  width: 100%;
  height: 100lvh;
  position: absolute;
  left: 0;
}

.top-mv .__bg {
  width: 100%;
  height: 100lvh;
  position: fixed;
  z-index: 0;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.top-mv .__bg_img img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: left center;
  transition: transform 0.3s ease, filter 0.1s ease;
  transform: scale(1.6);
  will-change: transform, filter;
  /* Initial filter values - will be updated by JavaScript on scroll */
  filter: brightness(1) grayscale(0);
}

.top-mv .__staff {
  z-index: 6;
  perspective: 900px;
  right: 0;
  bottom: 0;
  left: auto;
  height: min(100%, 110vw);
  will-change: transform;
  transition: transform 0.3s ease;
}

@media (max-width: 1025px) and (min-height: 1000px) {
  .top-mv .__staff {
    width: 110%;
    height: min(100%, 125vw);
  }
}

@media screen and (max-width: 767px) {
  .top-mv .__staff {
    height: 100%;
    width: auto;
    left: 0;
  }
}

.top-mv .__staff img {
  width: auto;
  max-width: none;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.5s ease;
  will-change: transform, opacity;
}

@media (max-width: 1025px) and (min-height: 1000px) {
  .top-mv .__staff img {
    top: 0;
  }
}

@media screen and (max-width: 767px) {
  .top-mv .__staff img {
    height: min(100%, 190vw);
    top: auto;
    bottom: 0;
    right: -5%;
    left: auto;
    transform: translateX(0);
  }
}

.top-mv .__staff img.__01 {
  opacity: 1;
}

.top-mv .__staff img.__02 {
  opacity: 0;
}

/* ================================================
  FV - Line Animation (scoped to top-mv)
================================================ */
.top-mv .mv-line {
  pointer-events: none;
}

.top-mv .mv-line .__lines {
  position: absolute;
  left: 50%;
  z-index: 5;
  transition: transform 0.3s ease;
}

.top-mv .mv-line .__line {
  width: 237px;
  height: 14px;
  position: absolute;
}

.top-mv .mv-line .__line div {
  width: 0;
  height: 100%;
}

.top-mv .mv-line .__line.--orange div {
  background-color: var(--color-accent);
}

.top-mv .mv-line .__line.--yellow div {
  background-color: #fdbe4c;
}

.top-mv .mv-line .__line.--grey div {
  background-color: #acacac;
}

.top-mv .mv-line .__line.--white div {
  background-color: #fff;
}

.top-mv .mv-line .__line.--dark div {
  background-color: #333;
}

.top-mv .mv-line .--right .__line {
  transform: rotate(-6deg);
}

.top-mv .mv-line .--right .__line div {
  margin: 0 0 0 auto;
}

.top-mv .mv-line .--left .__line {
  transform: rotate(6deg);
}

/* Line animation keyframes */
@keyframes toLeft {
  from {
    width: 0;
    transform: translateX(200px);
  }
  to {
    width: 100%;
    transform: translateX(0);
  }
}

@keyframes toRight {
  from {
    width: 0;
    transform: translateX(-200px);
  }
  to {
    width: 100%;
    transform: translateX(0);
  }
}

.top-mv .mv-line .is-animated.--right .__line div {
  animation: toLeft 0.8s ease forwards;
}

.top-mv .mv-line .is-animated.--left .__line div {
  animation: toRight 0.8s ease forwards;
}

/* Staggered delays */
.top-mv .mv-line .__line:nth-child(2) div {
  animation-delay: 0.3s !important;
}
.top-mv .mv-line .__line:nth-child(3) div {
  animation-delay: 0.5s !important;
}
.top-mv .mv-line .__line:nth-child(4) div {
  animation-delay: 0.7s !important;
}

/* ================================================
  FV - Line Positions (Top MV specific)
================================================ */
.top-mv .mv-line .__lines {
  top: 0;
  width: 100%;
  height: 100%;
}

/* Lines group 1 - Right side */
.top-mv .mv-line .__lines:nth-child(1) .__line {
  transform: rotate(300deg);
  width: 11vw;
  height: min(8px, 1vw);
}

.top-mv .mv-line .__lines:nth-child(1) .__line div {
  animation-play-state: paused;
}

.is-mv-animated .top-mv .mv-line .__lines:nth-child(1) .__line div {
  animation-play-state: running;
}

.top-mv .mv-line .__lines:nth-child(1) .__line:nth-child(1) {
  top: 33%;
  margin-left: 32.5vw;
}

.top-mv .mv-line .__lines:nth-child(1) .__line:nth-child(1) div {
  animation-delay: 0.3s;
}

.top-mv .mv-line .__lines:nth-child(1) .__line:nth-child(2) {
  top: 20%;
  margin-left: 38vw;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .top-mv .mv-line .__lines:nth-child(1) .__line:nth-child(1) {
    top: 14%;
    margin-left: 25vw;
  }

  .top-mv .mv-line .__lines:nth-child(1) .__line:nth-child(2) {
    top: 9%;
    margin-left: 34vw;
  }
}

/* Lines group 2 - Left side */
.top-mv .mv-line .__lines:nth-child(2) .__line {
  transform: rotate(12deg);
  width: 11vw;
  height: min(8px, 1vw);
}

.top-mv .mv-line .__lines:nth-child(2) .__line div {
  animation-play-state: paused;
}

.is-mv-animated .top-mv .mv-line .__lines:nth-child(2) .__line div {
  animation-play-state: running;
}

.top-mv .mv-line .__lines:nth-child(2) .__line:nth-child(1) {
  top: 27%;
  margin-left: -15vw;
}

.top-mv .mv-line .__lines:nth-child(2) .__line:nth-child(2) {
  top: 22%;
  margin-left: -23vw;
}

.top-mv .mv-line .__lines:nth-child(2) .__line:nth-child(2) div {
  animation-delay: 0.3s;
}

.top-mv .mv-line .__lines:nth-child(2) .__line:nth-child(3) {
  top: 8%;
  margin-left: -41vw;
  width: min(260px, 30vw);
}

.top-mv .mv-line .__lines:nth-child(2) .__line:nth-child(4) {
  top: 6%;
  margin-left: -50vw;
}

.top-mv .mv-line .__lines:nth-child(2) .__line:nth-child(4) div {
  animation-delay: 0.5s;
}

@media screen and (max-width: 767px) {
  .top-mv .mv-line .__lines:nth-child(2) .__line:nth-child(1) {
    top: 41%;
    margin-left: -49.33vw;
  }

  .top-mv .mv-line .__lines:nth-child(2) .__line:nth-child(2) {
    top: 40%;
    margin-left: -66.67vw;
  }

  .top-mv .mv-line .__lines:nth-child(2) .__line:nth-child(3),
  .top-mv .mv-line .__lines:nth-child(2) .__line:nth-child(4) {
    display: none;
  }
}

/* Lines group 3 - Bottom left (PC only) */
@media screen and (max-width: 767px) {
  .top-mv .mv-line .__lines:nth-child(3) {
    display: none;
  }
}

.top-mv .mv-line .__lines:nth-child(3) .__line {
  transform: rotate(-4.5deg);
  width: 15.625vw;
  height: min(8px, 1vw);
}

.top-mv .mv-line .__lines:nth-child(3) .__line div {
  animation-play-state: paused;
}

.is-mv-animated .top-mv .mv-line .__lines:nth-child(3) .__line div {
  animation-play-state: running;
}

.top-mv .mv-line .__lines:nth-child(3) .__line:nth-child(1) {
  top: 94%;
  margin-left: -34vw;
}

.top-mv .mv-line .__lines:nth-child(3) .__line:nth-child(2) {
  top: 96.5%;
  margin-left: -38vw;
  z-index: 1;
  width: 160px;
  height: 8px;
}

.top-mv .mv-line .__lines:nth-child(3) .__line:nth-child(2) div {
  animation-delay: 0.5s;
}

.top-mv .mv-line .__lines:nth-child(3) .__line:nth-child(3) {
  top: 81%;
  margin-left: -13vw;
}

.top-mv .mv-line .__lines:nth-child(3) .__line:nth-child(3) div {
  animation-delay: 0.3s;
}

.top-mv .mv-line .__lines:nth-child(3) .__line:nth-child(4) {
  top: 83.5%;
  margin-left: -17vw;
  width: 160px;
  height: 8px;
}

.top-mv .mv-line .__lines:nth-child(3) .__line:nth-child(4) div {
  animation-delay: 0.3s;
}

/* ================================================
  FV - Decorative SVG Lines
================================================ */
.top-mv .__anime {
  position: absolute;
  transition: transform 0.3s ease;
}

.top-mv .__anime img {
  width: 100%;
  transition: transform 0.3s ease;
}

.top-mv .__anime.__anime1 {
  width: 100%;
  bottom: 0;
  left: -10%;
  transform: translate(-100%, -80%);
}

.is-mv-animated .top-mv .__anime.__anime1 {
  animation: anime1mv 1s ease forwards;
}

@media screen and (max-width: 767px) {
  .top-mv .__anime.__anime1 {
    transform: translate(-65%, 35%);
  }

  .is-mv-animated .top-mv .__anime.__anime1 {
    animation: anime1mv_sp 1s ease forwards;
  }
}

@keyframes anime1mv {
  from {
    transform: translate(-100%, -80%);
  }
  to {
    transform: translate(0, 0);
  }
}

@keyframes anime1mv_sp {
  from {
    transform: translate(-85%, -10%);
  }
  to {
    transform: translate(0, 0);
  }
}

.top-mv .__anime.__anime2 {
  width: 100%;
  bottom: 0;
  left: 14%;
  transform: translate(-100%, 100%);
}

.is-mv-animated .top-mv .__anime.__anime2 {
  animation: anime2mv 1s ease forwards;
}

@media screen and (max-width: 767px) {
  .top-mv .__anime.__anime2 {
    width: 108%;
    left: 0;
    transform: translate(-65%, 35%);
  }

  .is-mv-animated .top-mv .__anime.__anime2 {
    animation: anime2mv_sp 1s ease forwards;
  }
}

@keyframes anime2mv {
  from {
    transform: translate(-100%, 100%);
  }
  to {
    transform: translate(0, 0);
  }
}

@keyframes anime2mv_sp {
  from {
    transform: translate(-65%, 35%);
  }
  to {
    transform: translate(0, 0);
  }
}