/* ============================================
   c-btn-01 - Button (共通ボタン)
   wp-block-button 構造対応:
   div.c-btn-01 > a.wp-block-button__link
   ============================================ */
.c-btn-01 {
  display: inline-flex;
}

.c-btn-01 .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding-block: var(--space-sm);
  /* 矢印がある分、右パディングだけ狭めて矢印を右端へ寄せる（左は据え置き） */
  padding-inline: var(--space-4-xl) var(--space-2-xl);
  background-color: var(--wp--preset--color--primary); /* 素のc-btn-01でも塗りを自前で持つ（theme.json link色の混入を防ぐ） */
  color: var(--wp--preset--color--white, #fff);
  border: 1px solid var(--wp--preset--color--primary);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--transition-normal);
  width: 100%;
}

/* hover/focus: 下線を出さない・文字色は据え置き・暗転は opacity のみ。
   グローバル link スタイル(色変化・下線)の混入を !important で確実に打ち消す */
.c-btn-01 .wp-block-button__link:hover,
.c-btn-01 .wp-block-button__link:focus {
  color: var(--wp--preset--color--white) !important;
  text-decoration: none !important;
  opacity: 0.8;
}

/* outline は文字色が primary のため、hover でも primary を維持 */
.c-btn-01--outline .wp-block-button__link:hover,
.c-btn-01--outline .wp-block-button__link:focus {
  color: var(--wp--preset--color--primary) !important;
}

.c-btn-01--primary .wp-block-button__link {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white, #fff);
  border-color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.c-btn-01--outline .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.c-btn-01--line .wp-block-button__link {
  background: var(--color-cta-line);
  color: var(--color-white);
  border-color: var(--color-cta-line);
  text-decoration: none;
}

/* LINE アイコンボタン（丸） */
.c-btn-01--line .wp-block-button__link {
  width: var(--space-7-xl);
  height: var(--space-7-xl);
  padding: 0;
  background: var(--color-cta-line);
  border-color: var(--color-cta-line);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.c-btn-01--line .wp-block-button__link img {
  width: var(--space-3-xl);
  height: auto;
}

/* テキスト「LINE」→ アイコン画像に置換 */
.c-btn-01--line .wp-block-button__link {
  font-size: 0;
  overflow: hidden;
}

/* LINE テキストボタン（緑塗り＋白文字＋ロゴ） */
.c-btn-01--line-text .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--color-cta-line);
  color: var(--color-white);
  border-color: var(--color-cta-line);
  text-decoration: none;
}

.c-btn-01--line-text .wp-block-button__link::before {
  content: "";
  flex-shrink: 0;
  width: var(--font-size-2-xl);
  height: var(--font-size-2-xl);
  background: url("../../images/icon/icon--line-white.svg") center / contain no-repeat;
}

.c-btn-01--line .wp-block-button__link::before {
  content: "";
  display: block;
  position:absolute;
  width: var(--space-3-xl);
  height: var(--space-3-xl);
  background: url("../../images/icon/icon--line-white.svg") center / contain no-repeat;
}

/* --- 矢印オーナメント (icon--ot-g-01 流れ星) ---
   マークアップは変えず ::after で文字の右側に追加。
   メインボタン(塗り)=白オーナメント / サブボタン(--outline)=色付き(primary)。
   丸LINEアイコンボタン(--line)はテキストなしのため除外。 */
.c-btn-01 .wp-block-button__link::after {
  content: "";
  flex-shrink: 0;
  /* 隣接テキストに追従させるため em 指定（::after の寸法はハードコーディング許可） */
  width: 0.9em;
  height: 0.9em;
  /* ボタン右側へ寄せる（幅に余裕があれば右端、文字幅ボタンでは文字の隣） */
  margin-left: auto;
  background: url("../../images/icon/icon--ot-g-01-white.svg") center / contain no-repeat;
}

/* サブボタン(outline)は文字色 primary に合わせた色付きオーナメント */
.c-btn-01--outline .wp-block-button__link::after {
  background-image: url("../../images/icon/icon--ot-g-01-primary.svg");
}

/* 丸LINEアイコンボタンは矢印を出さない */
.c-btn-01--line .wp-block-button__link::after {
  content: none;
}

.c-btn-01--full {
  width: 100%;
}

.c-btn-01--sm .wp-block-button__link {
  padding-block: var(--space-xs);
  padding-inline: var(--space-2-xl) var(--space-md);
  font-size: var(--font-size-xs);
}

.c-btn-01--lg .wp-block-button__link {
  padding-block: var(--space-2-xl);
  padding-inline: var(--space-7-xl) var(--space-4-xl);
  font-size: var(--font-size-xl);
}