/* page-hero.css - 下層ページの見出し（お知らせ・技術記事と同じ形） */
/* 制作実績、デザインサンプル、プライバシーポリシーなどで共通して使う */

.page-hero {
  padding-top: 120px;
  padding-bottom: 60px;
  position: relative;
  overflow: hidden;
}

/* 背景の大きな英字。文字は data-bg 属性で指定する */
.page-hero::before {
  content: attr(data-bg);
  position: absolute;
  top: 50%;
  right: -10%;
  transform: translateY(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: 20vw;
  font-weight: 300;
  color: var(--accent-gold);
  opacity: 0.03;
  white-space: nowrap;
  pointer-events: none;
}

.page-hero .page-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  animation: slideIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.page-hero .page-label::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--accent-gold);
}

.page-hero .page-title {
  animation: fadeInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.06s both;
}

.page-hero .page-description {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
  max-width: 500px;
  animation: fadeInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.12s both;
}