/* トップページ（常夜燈ホーム）専用スタイル */

.nav-links a:not(.nav-cta) {
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
}

.nav-links .num {
  font-family: var(--serif-jp);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

.hero {
  position: relative;
  min-height: 100vh;
  margin-top: calc(-1 * var(--nav-h));
  padding-top: var(--nav-h);
  overflow: hidden;
  color: #f1ede2;
  background: #0a0d16;
}

.hero .bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/forhero_web.jpg');
  background-size: cover;
  background-position: 50% 60%;
  filter: brightness(0.7) saturate(0.85);
}

.hero .bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
        rgba(8,10,18,0.55) 0%,
        rgba(8,10,18,0.35) 30%,
        rgba(8,10,18,0.55) 70%,
        rgba(8,10,18,0.92) 100%);
}

.hero .bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
        rgba(8,10,18,0) 0%,
        rgba(8,10,18,0.55) 80%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 100%;
  min-height: calc(100vh - var(--nav-h));
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: clamp(64px, 12vw, 144px);
  padding-bottom: clamp(40px, 6vw, 64px);
}

.hero-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(20px, 3vw, 32px);
  color: #f1ede2;
}

.hero-center::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(380px, 50vw, 720px);
  height: clamp(380px, 50vw, 720px);
  transform: translate(-50%, -52%);
  background: radial-gradient(closest-side,
      rgba(8,10,18,0.55) 0%,
      rgba(8,10,18,0.30) 45%,
      rgba(8,10,18,0) 78%);
  pointer-events: none;
  z-index: -1;
}

.hero-lantern {
  color: #f4f0e4;
  width: clamp(120px, 14vw, 200px);
  height: clamp(120px, 14vw, 200px);
  filter: drop-shadow(0 0 40px rgba(8,10,18,0.65))
      drop-shadow(0 0 18px rgba(8,10,18,0.55))
      drop-shadow(0 0 32px rgba(241, 220, 160, 0.22));
}

.hero-name {
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: clamp(56px, 8.5vw, 124px);
  line-height: 1;
  letter-spacing: 0.18em;
  margin-left: 0.18em;
  color: #f4f0e4;
}

.hero-en {
  font-family: var(--serif-en);
  font-weight: 400;
  font-size: clamp(14px, 1.4vw, 18px);
  letter-spacing: 0.42em;
  color: rgba(241,237,226,0.65);
  margin-left: 0.42em;
}