.page--home { --page-image: url("../images/hero.jpg"); }

/* トップページのメッセージ */
.home-message {
  margin-top: clamp(76px, 10.5vh, 126px);
  color: var(--ink);
  font-size: clamp(27px, 2.45vw, 44px);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: .02em;
}

.home-message__line { display: block; white-space: nowrap; }

.home-message__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(.35em);
}

.is-panel-visible .home-message__char,
.is-menu-open .home-message__char {
  animation: home-message-char-in .42s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: calc(1.7s + var(--char-index) * .075s);
}

.home-message__square {
  display: block;
  width: clamp(25px, 3.7vw, 40px);
  aspect-ratio: 1;
  margin-top: clamp(23px, 3vh, 36px);
  background: var(--tiffany-blue);
  opacity: 0;
  transform: scale(.65);
  transform-origin: left top;
}

.is-panel-visible .home-message__square,
.is-menu-open .home-message__square {
  animation: home-message-square-in .52s cubic-bezier(.22, 1, .36, 1) 3.1s forwards;
}

@keyframes home-message-char-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes home-message-square-in {
  0% { opacity: 0; transform: scale(.65); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 700px) {
  .home-message {
    margin-top: clamp(46px, 8vh, 72px);
    font-size: clamp(27px, 8.2vw, 34px);
  }

  .home-message__square { width: 36px; margin-top: 24px; }
}

@media (max-width: 700px) and (max-height: 650px) {
  .home-message { margin-top: 34px; font-size: 27px; }
  .home-message__square { width: 28px; margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-message__char,
  .home-message__square {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}