@charset "UTF-8";

#view {
  display: flex;
  width: 100%;
  overflow: hidden;

  position: sticky;
  top: 0;
  z-index: 0;
}

.view01 {
  position: relative;
  margin: 0;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

.view01 h3 {
  position: absolute;
  z-index: 5;

  font-family: var(--font03);
  font-size: clamp(42px, 4vw, 72px);
  font-weight: 400;
  line-height: 1;

  color: #cbb8a0;

  opacity: 0;
  transform: translateY(20px);

  transition:
    opacity 1s ease,
    transform 1s ease;
}

.view01.is-show h3 {
  opacity: 1;
  transform: translateY(0);
}

.strip {
  flex: 1;

  opacity: 0;
  overflow: hidden;

  transform: translateY(70px);

  transition:
    opacity 1s ease,
    transform 1.2s cubic-bezier(.22, 1, .36, 1);

  background-repeat: no-repeat;
  background-position: center;
}

.strip.from-top {
  transform: translateY(-70px);
}

.view01.is-show .strip {
  opacity: 1;
  transform: translateY(0);
}

.view01.is-show .strip:nth-of-type(1) {
  transition-delay: .1s;
}

.view01.is-show .strip:nth-of-type(2) {
  transition-delay: .25s;
}

.view01.is-show .strip:nth-of-type(3) {
  transition-delay: .4s;
}

.view01.is-show .strip:nth-of-type(4) {
  transition-delay: .55s;
}

/* =====================================================
PC
===================================================== */

@media (min-width: 769px) {

  #view {
    flex-direction: row;
    height: 90dvh;
    --strip-h: 50dvh;
  }

  .view01 {
    width: 50%;
    height: 100%;
    padding: 0 2%;
  }

  .strip {
    height: var(--strip-h);

    background-position-y: 50%;
  }

  .business h3 {
    left: 7%;

    bottom:
      calc((90dvh - var(--strip-h)) / 2 - 40px);
  }

  .leisure h3 {
    right: 7%;

    top:
      calc((90dvh - var(--strip-h)) / 2 - 40px);
  }

}



/* =====================================================
SP
===================================================== */

@media (max-width: 768px) {

  #view {
    flex-direction: column-reverse;
    height: auto;
    gap: 0;
    padding: 8dvh 0 30dvh;
  }

  .view01 {
    width: 100%;
    height: 30dvh;
    /* min-height: 420px; */
    padding: 0 4%;
  }

  .strip {
    height: 78%;

    background-position-y: 50%;
  }

  .view01 h3 {
    font-size: 42px;
  }

  .business h3 {
    left: 6%;
    bottom: -40px;
  }

  .leisure h3 {
    right: 6%;
    top: -20px;
  }

}