/* =========================================
   基本
========================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
}


/* =========================================
   Garden Hero
========================================= */

.gardenHero {
  margin: 40px auto 0px auto;

  position: relative;

  width: 100%;
  max-width: 1120px;

  aspect-ratio: 1120 / 480;

  margin-inline: auto;

  overflow: hidden;

  background: #fff;
}


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

  .gardenHero {
    aspect-ratio: 84 / 78;
  }

}


/* =========================================
   背景（時間帯別の実画像をクロスフェードで切り替え）
========================================= */

.gardenHero__bg {
  position: absolute;

  inset: 0;

  z-index: 1;

  display: block;

  opacity: 0;

  transition: opacity 1.5s ease;

  pointer-events: none;
}

.gardenHero__bg img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.gardenHero[data-time="morning"] .gardenHero__bg--morning,
.gardenHero[data-time="day"]     .gardenHero__bg--day,
.gardenHero[data-time="evening"] .gardenHero__bg--evening,
.gardenHero[data-time="night"]   .gardenHero__bg--night {
  opacity: 1;
}


/* =========================================
   夜だけ：星がチラチラする明滅レイヤー
   (bg_night.jpgの上に、明るさ違いのbg_night_blink.pngを重ねる)
========================================= */

.gardenHero__bgBlink {
  position: absolute;

  inset: 0;

  z-index: 2;

  display: block;

  opacity: 0;

  transition: opacity 1.5s ease;

  pointer-events: none;
}

.gardenHero__bgBlink img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  animation: starBlink 0.25s ease-in-out infinite;
}

@keyframes starBlink {
  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 1;
  }
}

.gardenHero[data-time="night"] .gardenHero__bgBlink {
  opacity: 1;
}


/* =========================================
   タイトル
========================================= */

.gardenHero__title {
  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 6;

  width: 44%;
  max-width: 560px;
  height: auto;

  pointer-events: none;
}

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

  .gardenHero__title {
    width: 85%;
  }

}