/* c-button-001: CTAボタン */

.c-button-001 {
  --_btn-color: var(--wp--preset--color--primary, #76c576);
  --_btn-text: var(--wp--preset--color--white, #fff);
  --_btn-outline-color: var(--_btn-color);
}

.c-button-001 .wp-block-button__link {
  background-color: var(--_btn-color);
  color: var(--_btn-text);
  border: 2px solid var(--_btn-color);
  padding: var(--wp--preset--spacing--xs, 0.75rem) var(--wp--preset--spacing--lg, 2rem);
  border-radius: var(--wp--custom--border--radius--md, 0.5rem);
  font-size: var(--wp--preset--font-size--base, 1.6rem);
  transition: opacity 300ms ease, transform 300ms ease, box-shadow 300ms ease, filter 300ms ease;
}
.c-button-001 .wp-block-button__link:hover {
  opacity: 0.85;
}

/* ── ボタンサイズ ── */

/** @element root  @group ボタンサイズ  @label 極小  @order 1 */
.c-button-001--size-xs .wp-block-button__link {
  padding: var(--wp--preset--spacing--3-xs, 0.25rem) var(--wp--preset--spacing--sm, 1rem);
  font-size: var(--wp--preset--font-size--xs, 1.2rem);
}

/** @element root  @group ボタンサイズ  @label 小  @order 2 */
.c-button-001--size-sm .wp-block-button__link {
  padding: var(--wp--preset--spacing--3-xs, 0.25rem) var(--wp--preset--spacing--md, 1.5rem);
  font-size: var(--wp--preset--font-size--sm, 1.4rem);
}

/** @element root  @group ボタンサイズ  @label 大  @order 3 */
.c-button-001--size-lg .wp-block-button__link {
  padding: var(--wp--preset--spacing--sm, 1rem) var(--wp--preset--spacing--xl, 3rem);
  font-size: var(--wp--preset--font-size--lg, 1.8rem);
}

/** @element root  @group ボタンサイズ  @label 特大  @order 4 */
.c-button-001--size-xl .wp-block-button__link {
  padding: var(--wp--preset--spacing--md, 1.5rem) var(--wp--preset--spacing--2-xl, 4rem);
  font-size: var(--wp--preset--font-size--xl, 2.0rem);
}

/* ══════════════════════════════════════════════════
   カラー＆スタイル
   - カラー: --_btn-color, --_btn-text, --_btn-outline-color を一括設定
   - スタイル: 塗りつぶし（デフォルト）→ アウトラインに切替
   - 塗りつぶし: bg=btn-color, text=btn-text, border=btn-color
   - アウトライン: bg=transparent, text=outline-color, border=outline-color
   ══════════════════════════════════════════════════ */

/* ── カラー ── */

/** @element root  @group カラー  @label プライマリ  @order 1 */
.c-button-001--primary {
  --_btn-color: var(--wp--preset--color--primary, #76c576);
}

/** @element root  @group カラー  @label セカンダリ  @order 2 */
.c-button-001--secondary {
  --_btn-color: var(--wp--preset--color--secondary, #db57a5);
}

/** @element root  @group カラー  @label テキストカラー  @order 3 */
.c-button-001--text-color {
  --_btn-color: var(--wp--preset--color--basic-text, #413838);
}

/** @element root  @group カラー  @label グレー  @order 4 */
.c-button-001--gray {
  --_btn-color: var(--wp--preset--color--gray-dark, #616161);
}

/** @element root  @group カラー  @label グレー薄  @order 5 */
.c-button-001--gray-light {
  --_btn-color: var(--wp--preset--color--gray-lighter, #F5F5F5);
  --_btn-text: var(--wp--preset--color--basic-text, #413838);
  --_btn-outline-color: var(--wp--preset--color--gray, #9E9E9E);
}

/* ── スタイル ── */

/** @element root  @group スタイル  @label アウトライン  @order 1 */
.c-button-001--outline .wp-block-button__link {
  background-color: transparent;
  color: var(--_btn-outline-color);
  border-color: var(--_btn-outline-color);
}

/* ── 形状 ── */

/** @element root  @group 形状  @label 丸型  @order 1 */
.c-button-001--round .wp-block-button__link {
  border-radius: var(--wp--custom--border--radius--full, 9999px);
}

/* ── アイコン ── */

/** @element root  @group アイコン  @label 矢印 →  @order 1 */
.c-button-001--icon-arrow { --c-btn-icon: '\2192'; }

/** @element root  @group アイコン  @label シェブロン ›  @order 2 */
.c-button-001--icon-chevron { --c-btn-icon: '\203A'; }

/** @element root  @group アイコン  @label 外部リンク ↗  @order 3 */
.c-button-001--icon-external { --c-btn-icon: '\2197'; }

/** @element root  @group アイコン  @label ダウンロード ↓  @order 4 */
.c-button-001--icon-download { --c-btn-icon: '\2193'; }

/** @element root  @group アイコン  @label メール ✉  @order 5 */
.c-button-001--icon-mail { --c-btn-icon: '\2709'; }

/** @element root  @group アイコン  @label 電話 ☎  @order 6 */
.c-button-001--icon-phone { --c-btn-icon: '\260E'; }

/** @element root  @group アイコン  @label チェック ✓  @order 7 */
.c-button-001--icon-check { --c-btn-icon: '\2713'; }

/** @element root  @group アイコン  @label ハート ♥  @order 8 */
.c-button-001--icon-heart { --c-btn-icon: '\2665'; }

/** @element root  @group アイコン  @label 星 ★  @order 9 */
.c-button-001--icon-star { --c-btn-icon: '\2605'; }

/** @element root  @group アイコン  @label 再生 ▶  @order 10 */
.c-button-001--icon-play { --c-btn-icon: '\25B6'; }

/** @element root  @group アイコン  @label 編集 ✎  @order 11 */
.c-button-001--icon-edit { --c-btn-icon: '\270E'; }

/** @element root  @group アイコン  @label 指差し ☞  @order 12 */
.c-button-001--icon-point { --c-btn-icon: '\261E'; }

/** @element root  @group アイコン  @label 二重矢印 ⇒  @order 13 */
.c-button-001--icon-double-arrow { --c-btn-icon: '\21D2'; }

/** @element root  @group アイコン  @label ダブルアングル »  @order 14 */
.c-button-001--icon-angle { --c-btn-icon: '\00BB'; }

/** @element root  @group アイコン  @label プラス ＋  @order 15 */
.c-button-001--icon-plus { --c-btn-icon: '\FF0B'; }

/** @element root  @group アイコン  @label ダイヤ ◆  @order 16 */
.c-button-001--icon-diamond { --c-btn-icon: '\25C6'; }

/* アイコン共通: デフォルト右配置 (::after) */
[class*="c-button-001--icon-"] .wp-block-button__link::after {
  content: var(--c-btn-icon, '');
  font-size: var(--c-btn-icon-size, 1em);
  margin-left: var(--c-btn-icon-gap, 0.5rem);
  transition: margin-left 150ms ease, margin-right 150ms ease, transform 150ms ease;
}

/* ── アイコン位置 ── */

/** @element root  @group アイコン位置  @label 左  @order 1 */
.c-button-001--iconpos-left .wp-block-button__link::after {
  content: none;
}
.c-button-001--iconpos-left .wp-block-button__link::before {
  content: var(--c-btn-icon, '');
  font-size: var(--c-btn-icon-size, 1em);
  margin-right: var(--c-btn-icon-gap, 0.5rem);
  transition: margin-left 150ms ease, margin-right 150ms ease, transform 150ms ease;
}

/* ── アイコンサイズ ── */

/** @element root  @group アイコンサイズ  @label 小  @order 1 */
.c-button-001--iconsize-sm { --c-btn-icon-size: 0.75em; }

/** @element root  @group アイコンサイズ  @label 大  @order 2 */
.c-button-001--iconsize-lg { --c-btn-icon-size: 1.25em; }

/** @element root  @group アイコンサイズ  @label 特大  @order 3 */
.c-button-001--iconsize-xl { --c-btn-icon-size: 1.5em; }

/* ── アイコン間隔 ── */

/** @element root  @group アイコン間隔  @label 狭い  @order 1 */
.c-button-001--icongap-narrow { --c-btn-icon-gap: 0.25rem; }

/** @element root  @group アイコン間隔  @label 広い  @order 2 */
.c-button-001--icongap-wide { --c-btn-icon-gap: 1rem; }

/** @element root  @group アイコン間隔  @label 特広い  @order 3 */
.c-button-001--icongap-wider { --c-btn-icon-gap: 1.5rem; }

/* ══════════════════════════════════════════════════
   ホバーエフェクト（4グループ: 形・影・色・アイコン）
   グループ間は組み合わせ可能
   ══════════════════════════════════════════════════ */

/* ── ホバー：形 ── */

/** @element root  @group ホバー：形  @label フェード（薄）  @order 1 */
.c-button-001--hover-fade-light .wp-block-button__link:hover { opacity: 0.7; }

/** @element root  @group ホバー：形  @label 拡大  @order 2 */
.c-button-001--hover-scale-up .wp-block-button__link:hover { opacity: 1; transform: scale(1.05); }

/** @element root  @group ホバー：形  @label 縮小  @order 3 */
.c-button-001--hover-scale-down .wp-block-button__link:hover { opacity: 1; transform: scale(0.95); }

/** @element root  @group ホバー：形  @label 浮き上がり  @order 4 */
.c-button-001--hover-float .wp-block-button__link:hover { opacity: 1; transform: translateY(-3px); }

/** @element root  @group ホバー：形  @label 沈み込み  @order 5 */
.c-button-001--hover-sink .wp-block-button__link:hover { opacity: 1; transform: translateY(2px); }

/** @element root  @group ホバー：形  @label なめらか浮上  @order 6 */
.c-button-001--hover-lift .wp-block-button__link:hover { opacity: 1; transform: translateY(-2px) scale(1.02); }

/* ── ホバー：影 ── */

/** @element root  @group ホバー：影  @label 影付き  @order 1 */
.c-button-001--hover-shadow .wp-block-button__link:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.25); }

/** @element root  @group ホバー：影  @label 枠線ハイライト  @order 2 */
.c-button-001--hover-glow .wp-block-button__link:hover { box-shadow: 0 0 0 3px rgba(118,197,118,0.4); }

/** @element root  @group ホバー：影  @label 浮き影  @order 3 */
.c-button-001--hover-float-shadow .wp-block-button__link:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.15); }

/** @element root  @group ホバー：影  @label 大影  @order 4 */
.c-button-001--hover-deep-shadow .wp-block-button__link:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.12); }

/* ── ホバー：色 ── */

/** @element root  @group ホバー：色  @label 明るく  @order 1 */
.c-button-001--hover-brighten .wp-block-button__link:hover { opacity: 1; filter: brightness(1.15); }

/** @element root  @group ホバー：色  @label 暗く  @order 2 */
.c-button-001--hover-darken .wp-block-button__link:hover { opacity: 1; filter: brightness(0.85); }

/* ── ホバー：アイコン ── */

/** @element root  @group ホバー：アイコン  @label スライド  @order 1 */
.c-button-001--hovicon-slide .wp-block-button__link:hover::after {
  margin-left: calc(var(--c-btn-icon-gap, 0.5rem) + 0.25rem);
}
.c-button-001--hovicon-slide.c-button-001--iconpos-left .wp-block-button__link:hover::before {
  margin-right: calc(var(--c-btn-icon-gap, 0.5rem) + 0.25rem);
}

/** @element root  @group ホバー：アイコン  @label 拡大  @order 2 */
.c-button-001--hovicon-grow .wp-block-button__link:hover::after,
.c-button-001--hovicon-grow .wp-block-button__link:hover::before {
  transform: scale(1.3);
}

/** @element root  @group ホバー：アイコン  @label 回転  @order 3 */
.c-button-001--hovicon-rotate .wp-block-button__link:hover::after,
.c-button-001--hovicon-rotate .wp-block-button__link:hover::before {
  transform: rotate(90deg);
}

/** @element root  @group ホバー：アイコン  @label バウンス  @order 4 */
.c-button-001--hovicon-bounce .wp-block-button__link:hover::after,
.c-button-001--hovicon-bounce .wp-block-button__link:hover::before {
  animation: jjp-icon-bounce 400ms ease;
}
@keyframes jjp-icon-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
  60% { transform: translateY(-2px); }
}