/* ============================================================
   姫野不動産 — トップページ (home.css)
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(130% 100% at 80% 0%, rgba(184,145,80,.22), transparent 55%),
    linear-gradient(155deg, var(--green-700) 0%, var(--green-800) 45%, var(--green-900) 100%);
  color: #fff;
  overflow: hidden;
}
.hero__overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    radial-gradient(60% 80% at 100% 100%, rgba(0,0,0,.25), transparent 60%);
  background-size: 100% 8px, 100% 100%;
  pointer-events: none;
}
.hero__content {
  position: relative;
  padding-top: var(--header-h);
  z-index: 1;
}
.hero__label {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 22px;
  display: inline-block;
  padding-left: 56px;
  position: relative;
}
.hero__label::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 40px; height: 1.5px;
  background: var(--gold-400);
}
.hero__title {
  font-size: clamp(38px, 7vw, 76px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .01em;
  margin-bottom: 24px;
}
.hero__subtitle {
  font-size: clamp(15px, 2.2vw, 20px);
  color: rgba(255,255,255,.82);
  line-height: 1.85;
  max-width: 540px;
  margin-bottom: 40px;
}
.hero__buttons { display: flex; gap: 16px; flex-wrap: wrap; }

/* hero scroll cue */
.hero__scroll {
  position: absolute;
  left: 50%; bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.6);
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  z-index: 1;
}
.hero__scroll-line {
  width: 1px; height: 46px;
  background: linear-gradient(rgba(255,255,255,.5), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute; top: -50%; left: 0;
  width: 100%; height: 50%;
  background: var(--gold-400);
  animation: heroScroll 2.2s var(--ease) infinite;
}
@keyframes heroScroll {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(300%); }
}

/* ---------- Testimonials ---------- */
.testimonial { display: flex; flex-direction: column; }
.testimonial__stars { display: flex; gap: 3px; margin-bottom: 18px; }
.testimonial__text {
  font-size: 15px;
  color: var(--text);
  line-height: 1.95;
  flex: 1;
  position: relative;
  padding-top: 14px;
}
.testimonial__text::before {
  content: "“";
  position: absolute;
  top: -18px; left: -4px;
  font-family: Georgia, serif;
  font-size: 56px;
  line-height: 1;
  color: var(--gold-tint);
  z-index: 0;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
}
.testimonial__avatar {
  width: 48px; height: 48px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green-700);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 15px;
}
.testimonial__info { display: flex; flex-direction: column; line-height: 1.5; }
.testimonial__name { font-weight: 700; color: var(--ink); font-size: 15px; }
.testimonial__detail { font-size: 12.5px; color: var(--faint); }

@media (max-width: 768px) {
  .hero { min-height: 88svh; }
  .hero__buttons .btn { flex: 1; }
  .hero__scroll { display: none; }
}
@media (max-width: 480px) {
  .hero__buttons { flex-direction: column; }
  .hero__buttons .btn { width: 100%; }
  .hero__label { padding-left: 0; }
  .hero__label::before { display: none; }
}