/* =========================================================================
   HERO — Apprate Arches (per design_handoff_apprate_hero)
   ========================================================================= */

.hero-arches {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #f6efe4;
  isolation: isolate;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
}

/* Layer 1: ベース背景グラデーション（画像フォールバック） */
.hero-arches-bg {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(160deg, #fdfaf5 0%, #f7f0e5 42%, #f1e7d8 72%, #ece0cd 100%);
}

/* Layer 2: メインビジュアル */
.hero-arches-visual {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right center;
  pointer-events: none;
  user-select: none;
}

/* Layer 3: コピー可読性用ベール */
.hero-arches-veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(253,250,245,0.86) 0%,
    rgba(253,250,245,0.5) 28%,
    rgba(253,250,245,0) 52%
  );
}

/* Layer 4: コピーブロック */
.hero-arches-copy {
  position: absolute; z-index: 4;
  left: clamp(24px, 6vw, 100px);
  top: 44%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 660px;
  animation: hero-arches-rise 1.2s ease-out both;
}
@keyframes hero-arches-rise {
  from { opacity: 0; transform: translate(0, calc(-50% + 18px)); }
  to   { opacity: 1; transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-arches-copy { animation: none; }
}

.hero-arches-accent {
  width: 54px; height: 1px;
  background: rgba(58, 116, 172, 0.6);
  display: block;
}

.hero-arches-title {
  margin: 0;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.5;
  color: #263440;
  text-wrap: pretty;
}

.hero-arches-body {
  margin: 0;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 2.1;
  color: rgba(38, 52, 64, 0.72);
  text-wrap: pretty;
}

.hero-arches-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.hero-arches-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.24em;
  border-radius: 0;
  text-decoration: none;
  padding: 17px 42px;
  min-height: 44px;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}
.hero-arches-cta--primary {
  background: #263440;
  color: #fbf7f0;
}
.hero-arches-cta--primary:hover,
.hero-arches-cta--primary:focus-visible {
  background: #8a6a45;
  color: #fbf7f0;
}
.hero-arches-cta--ghost {
  padding: 17px 28px;
  background: transparent;
  border: 1px solid rgba(38, 52, 64, 0.28);
  color: rgba(38, 52, 64, 0.85);
}
.hero-arches-cta--ghost:hover,
.hero-arches-cta--ghost:focus-visible {
  border-color: #8a6a45;
  color: #8a6a45;
}
.hero-arches-cta:focus-visible {
  outline: 2px solid #3a74ac;
  outline-offset: 3px;
}

/* Layer 5: SCROLL インジケーター */
.hero-arches-scroll {
  position: absolute; z-index: 4;
  left: clamp(24px, 6vw, 100px);
  bottom: 46px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.hero-arches-scroll-line {
  width: 46px; height: 1px;
  background: rgba(38, 52, 64, 0.35);
  display: block;
}
.hero-arches-scroll-label {
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: rgba(38, 52, 64, 0.45);
}
.hero-arches-scroll:hover .hero-arches-scroll-label {
  color: #8a6a45;
}

/* ===== サイトヘッダー =====
   全ページ共通のヘッダーになったため、指定は css/site-chrome.css に移動した。 */


/* ===== レスポンシブ ===== */
@media (max-width: 1024px) {
  .hero-arches-copy { top: 46%; max-width: 90%; gap: 22px; }
  .hero-arches-visual { object-position: right 30% center; opacity: 0.85; }
  /* ベールを縦方向に切り替え */
  .hero-arches-veil {
    background: linear-gradient(
      180deg,
      rgba(253,250,245,0.9) 0%,
      rgba(253,250,245,0.55) 45%,
      rgba(253,250,245,0.2) 100%
    );
  }
}

@media (max-width: 767px) {
  .hero-arches {
    min-height: 640px;
  }
  .hero-arches-copy {
    left: 24px; right: 24px; max-width: none;
    top: 42%; gap: 18px;
  }
  .hero-arches-title { letter-spacing: 0.08em; }
  .hero-arches-body { letter-spacing: 0.04em; }
  .hero-arches-actions { gap: 12px; }
  .hero-arches-cta { padding: 15px 24px; font-size: 13px; }
  .hero-arches-cta--primary { padding: 15px 30px; }
  .hero-arches-scroll { left: 24px; bottom: 30px; }
  .hero-arches-visual { object-position: right 20% center; opacity: 0.7; }
}