/* s-hero-001: ヒーローセクション */

.s-hero-001 {
  min-height: 500px;
  padding-top: var(--wp--preset--spacing--3-xl);
  padding-bottom: var(--wp--preset--spacing--3-xl);
  text-align: center;
}

.s-hero-001__title {
  font-size: var(--wp--preset--font-size--4-xl);
  margin-bottom: var(--wp--preset--spacing--sm);
}

.s-hero-001__catch {
  font-size: var(--wp--preset--font-size--xl);
  margin-bottom: var(--wp--preset--spacing--sm);
}

.s-hero-001__description {
  margin-bottom: var(--wp--preset--spacing--lg);
}

.s-hero-001__cta .wp-block-button__link {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xl);
  border-radius: var(--wp--custom--border--radius--md);
  font-size: var(--wp--preset--font-size--base);
}

/* ══════════════════════════════════════════════════
   高さ
   ══════════════════════════════════════════════════ */

/** @element root  @group 高さ  @label 低め  @order 1 */
.s-hero-001--height-short {
  min-height: 350px;
  padding-top: var(--wp--preset--spacing--2-xl);
  padding-bottom: var(--wp--preset--spacing--2-xl);
}

/** @element root  @group 高さ  @label 高め  @order 2 */
.s-hero-001--height-tall {
  min-height: 80vh;
}

/** @element root  @group 高さ  @label 全画面  @order 3 */
.s-hero-001--height-full {
  min-height: 100vh;
}

/* ══════════════════════════════════════════════════
   配置
   ══════════════════════════════════════════════════ */

/** @element root  @group 配置  @label 左寄せ  @order 1 */
.s-hero-001--align-left {
  text-align: left;
}

/* ══════════════════════════════════════════════════
   タイトルサイズ
   ══════════════════════════════════════════════════ */

/** @element root  @group タイトルサイズ  @label 小  @order 1 */
.s-hero-001--title-sm .s-hero-001__title {
  font-size: var(--wp--preset--font-size--2-xl);
}

/** @element root  @group タイトルサイズ  @label 特大  @order 2 */
.s-hero-001--title-xl .s-hero-001__title {
  font-size: clamp(3rem, 5vw, 5rem);
}

/* ══════════════════════════════════════════════════
   オーバーレイ
   ══════════════════════════════════════════════════ */

/** @element root  @group オーバーレイ  @label 暗め  @order 1 */
.s-hero-001--overlay-dark .wp-block-cover__background {
  opacity: 0.7;
}

/** @element root  @group オーバーレイ  @label 薄め  @order 2 */
.s-hero-001--overlay-light .wp-block-cover__background {
  opacity: 0.3;
}