.button-pattern-selector {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 25px 0 0;
}

.button-pattern-item {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: 8px;
  position: relative;
  padding: 12px;
  border-radius: 0px;
  /* border: 1px solid #d7dde6; */
  background: #ffffff;
  /* box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 10px rgba(16, 24, 40, 0.08); */
}

.button-pattern-preview {
  /* 削除 - 不要 */
}

.pattern-name {
  /* 削除 - 不要 */
}

.pattern-preview-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  cursor: pointer;
  transition: opacity 0.2s ease;
  position: relative;
  height: auto;
}

.pattern-preview-wrapper:hover {
  opacity: 0.8;
}

.pattern-preview-wrapper > * {
  pointer-events: none;
}

/* パターン内のボタン要素のスタイルを保持 */
.pattern-preview-wrapper .wp-block-zenblocks-button-basic {
  display: inline-block !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  /* CSS変数によるマージンも無効化 */
  --spacing-margin-top-pc: 0 !important;
  --spacing-margin-right-pc: 0 !important;
  --spacing-margin-bottom-pc: 0 !important;
  --spacing-margin-left-pc: 0 !important;
  --spacing-margin-top-sp: 0 !important;
  --spacing-margin-right-sp: 0 !important;
  --spacing-margin-bottom-sp: 0 !important;
  --spacing-margin-left-sp: 0 !important;

  a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

.pattern-preview-wrapper .button-basic-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.pattern-preview-wrapper .button-basic-bg-color,
.pattern-preview-wrapper .button-basic-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pattern-preview-wrapper .button-content {
  position: relative;
  z-index: 1;
}

.button-icon-preview {
  display: inline-flex !important;
  align-items: center !important;
  width: 1em !important;
  height: 1em !important;
}

.button-icon-preview svg {
  width: 100% !important;
  height: 100% !important;
}

.button-pattern-selector .pattern-meta-row {
  position: absolute;
  z-index: 10;
  top: -20px;

  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  gap: 0;
  width: 100%;
  min-height: 24px;
  padding: 0;
}

.button-pattern-selector .pattern-id-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  height: 20px;
  padding: 0 8px !important;
  border-radius: 1px;
  border: 0;
  color: black !important;
  background: #ffffff;
  font-size: 10px;
  line-height: 1;
  /* font-weight: 700; */
  letter-spacing: 0.5px;
  box-shadow: none;
  /* border-left: 1px solid #d7dde6;
  border-top: 1px solid #d7dde6;
  border-right: 1px solid #d7dde6; */
}

.button-pattern-selector .pattern-pro-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 1px;
  border: 0;
  background: #18253d;
  color: #ffffff;
  font-size: 10px;
  line-height: 1;
  /* font-weight: 700; */
  letter-spacing: 0.5px;
  box-shadow: none;
}

/* 円形画像ボタンのスタイル調整 */
.pattern-preview-wrapper .is-custom-position-pc,
.pattern-preview-wrapper .is-custom-position-sp {
  position: relative !important;
}

/* ButtonPatternPreview: HTML直接表示用スタイル */
.button-pattern-preview-inner {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  zoom: 0.428;
}

.button-pattern-preview-inner.is-fit-content .wp-block-zenblocks-button-basic > a,
.button-pattern-preview-inner.is-fit-content .wp-block-zenblocks-button-basic > button {
  width: 100% !important;
}

.button-pattern-preview-inner .wp-block-zenblocks-button-basic {
  margin: 0 !important;
  --spacing-margin-top-pc: 0 !important;
  --spacing-margin-right-pc: 0 !important;
  --spacing-margin-bottom-pc: 0 !important;
  --spacing-margin-left-pc: 0 !important;
}

/* プレビュー内でのCSS変数適用（エディタCSSの複製） */
.button-pattern-preview-inner .wp-block-zenblocks-button-basic > a,
.button-pattern-preview-inner .wp-block-zenblocks-button-basic > button {
  display: inline-flex !important;
  align-items: center;
  justify-content: var(--button-content-justify, center);
  position: relative;
  text-decoration: none !important;
  font-size: var(--font-size-pc, inherit) !important;
  font-family: var(--font-family, inherit) !important;
  color: var(--text-color, inherit) !important;
  padding-top: var(--spacing-padding-top-pc, 0) !important;
  padding-right: var(--spacing-padding-right-pc, 0) !important;
  padding-bottom: var(--spacing-padding-bottom-pc, 0) !important;
  padding-left: var(--spacing-padding-left-pc, 0) !important;
  height: var(--layout-height-pc, auto) !important;
  min-height: var(--layout-height-min-pc, auto) !important;
  max-height: var(--layout-height-max-pc, none) !important;
  border-width: var(--styling-border-width-pc, 0) !important;
  border-style: var(--styling-border-style-pc, none) !important;
  border-color: var(--styling-border-color-pc, transparent) !important;
  /* 外側の角丸 = 設定値 + ボーダー幅 */
  border-top-left-radius: calc(var(--styling-radius-top-left-pc, 0px) + var(--styling-border-width-pc, 0px)) !important;
  border-top-right-radius: calc(var(--styling-radius-top-right-pc, 0px) + var(--styling-border-width-pc, 0px)) !important;
  border-bottom-right-radius: calc(var(--styling-radius-bottom-right-pc, 0px) + var(--styling-border-width-pc, 0px)) !important;
  border-bottom-left-radius: calc(var(--styling-radius-bottom-left-pc, 0px) + var(--styling-border-width-pc, 0px)) !important;
  box-shadow: var(--styling-shadow-pc, none) !important;
  opacity: var(--styling-opacity-pc, 1) !important;
  mix-blend-mode: var(--styling-mix-blend-mode-pc, normal) !important;
  overflow: hidden;
  white-space: var(--button-white-space, nowrap);
  width: var(--layout-width-pc, auto) !important;
  min-width: auto !important;
  max-width: none !important;
  box-sizing: border-box;
  transition: all var(--style-transition-duration, 300ms) var(--style-transition-easing, ease) var(--style-transition-delay, 0ms);
}

/* テキストスタイル */
.button-pattern-preview-inner .wp-block-zenblocks-button-basic-text {
  position: relative;
  z-index: 10;
}

.button-pattern-preview-inner .wp-block-zenblocks-button-basic-text-main {
  position: relative;
  display: block;
  width: 100%;
  height: var(--text-main-height-pc, 1.6em);
}

.button-pattern-preview-inner .wp-block-zenblocks-button-basic-text-main .default {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  display: block;
  opacity: 1;
  visibility: visible;
  font-family: var(--font-family, inherit);
  font-size: var(--font-size-pc, inherit);
  font-weight: var(--font-weight-pc, normal);
  line-height: var(--line-height-pc, 1.2);
  letter-spacing: var(--letter-spacing-pc, 0px);
  color: var(--text-color, inherit);
  text-shadow: var(--text-shadow, none);
}

.button-pattern-preview-inner .wp-block-zenblocks-button-basic-text-main .hover {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  display: block;
  opacity: 0;
  visibility: hidden;
  font-family: var(--font-family-hover, var(--font-family, inherit));
  font-size: var(--font-size-pc-hover, var(--font-size-pc, inherit));
  font-weight: var(--font-weight-pc-hover, var(--font-weight-pc, normal));
  line-height: var(--line-height-pc-hover, var(--line-height-pc, 1.2));
  letter-spacing: var(--letter-spacing-pc-hover, var(--letter-spacing-pc, 0px));
  color: var(--text-color-hover, var(--text-color, inherit));
  text-shadow: var(--text-shadow-hover, var(--text-shadow, none));
}

/* 背景レイヤー */
.button-pattern-preview-inner .wp-block-zenblocks-button-basic-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}

.button-pattern-preview-inner .wp-block-zenblocks-button-basic-bg-color {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: var(--background-color-pc, transparent) !important;
  opacity: var(--background-color-opacity-pc, 1) !important;
  mix-blend-mode: var(--background-color-mix-blend-mode-pc, normal) !important;
  transition: all var(--background-transition-duration, 150ms) var(--background-transition-easing, ease) var(--background-transition-delay, 0ms);
}

.button-pattern-preview-inner .wp-block-zenblocks-button-basic-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-image: var(--background-image-pc, none) !important;
  background-position: var(--background-image-position-pc, center) !important;
  background-size: var(--background-image-size-pc, cover) !important;
  background-repeat: var(--background-image-repeat-pc, no-repeat) !important;
}

/* アイコンスタイル */
.button-pattern-preview-inner .wp-block-zenblocks-button-basic-icon {
  position: absolute;
  top: calc(50% + var(--icon-offset-y-pc, 0px));
  left: calc(50% + var(--icon-offset-x-pc, 0px));
  transform: translate(-50%, -50%);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--icon-size-pc, 25px);
  height: var(--icon-size-pc, 25px);
  transition: all 200ms 200ms;
}

.button-pattern-preview-inner .wp-block-zenblocks-button-basic-icon.wrap_icon::before {
  content: "";
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  overflow: hidden;
  width: var(--icon-frame-width-pc, 40px);
  height: var(--icon-frame-height-pc, 40px);
  background: var(--icon-frame-bg-color, transparent);
  border-radius: var(--icon-frame-radius-pc, 0);
  border-style: var(--icon-frame-border-style-pc, solid);
  border-top-width: var(--icon-frame-border-top-width-pc, 0);
  border-right-width: var(--icon-frame-border-right-width-pc, 0);
  border-bottom-width: var(--icon-frame-border-bottom-width-pc, 0);
  border-left-width: var(--icon-frame-border-left-width-pc, 0);
  border-color: var(--icon-frame-border-color-pc, var(--icon-frame-border-color, transparent));
  transition: all var(--icon-frame-transition-duration, 300ms) var(--icon-frame-transition-easing, ease) var(--icon-frame-transition-delay, 200ms);
}

.button-pattern-preview-inner .wp-block-zenblocks-button-basic-icon > .default,
.button-pattern-preview-inner .wp-block-zenblocks-button-basic-icon > .hover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-pattern-preview-inner .wp-block-zenblocks-button-basic-icon > .hover {
  opacity: 0;
}

.button-pattern-preview-inner .wp-block-zenblocks-button-basic-icon svg {
  position: relative;
  z-index: 99;
  width: 100% !important;
  height: 100% !important;
  display: block;
  vertical-align: top;
}

/* レスポンシブアイコン（PC以外非表示） */
.button-pattern-preview-inner .wp-block-zenblocks-button-basic-icon .icon-md,
.button-pattern-preview-inner .wp-block-zenblocks-button-basic-icon .icon-tb,
.button-pattern-preview-inner .wp-block-zenblocks-button-basic-icon .icon-sp {
  display: none !important;
}

.button-pattern-preview-inner .wp-block-zenblocks-button-basic-icon .icon-pc {
  display: flex !important;
}

/* コンテンツ */
.button-pattern-preview-inner .wp-block-zenblocks-button-basic-content {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: var(--button-content-justify, center);
  width: 100%;
}

/* ホバー強制適用 - テキスト色 */
.button-pattern-preview-inner.force-hover .wp-block-zenblocks-button-basic > a,
.button-pattern-preview-inner.force-hover .wp-block-zenblocks-button-basic > button {
  color: var(--text-color-hover, var(--text-color)) !important;
  border-width: var(--styling-border-width-pc-hover, var(--styling-border-width-pc)) !important;
  border-style: var(--styling-border-style-pc-hover, var(--styling-border-style-pc)) !important;
  border-color: var(--styling-border-color-pc-hover, var(--styling-border-color-pc)) !important;
  /* 外側の角丸 = 設定値 + ボーダー幅 */
  border-radius: calc(var(--styling-radius-pc-hover, var(--styling-radius-pc, 0px)) + var(--styling-border-width-pc-hover, var(--styling-border-width-pc, 0px))) !important;
  box-shadow: var(--styling-shadow-pc-hover, var(--styling-shadow-pc)) !important;
  opacity: var(--styling-opacity-pc-hover, var(--styling-opacity-pc)) !important;
}

/* ホバー強制適用 - 背景色 */
.button-pattern-preview-inner.force-hover .wp-block-zenblocks-button-basic-bg-color {
  background: var(--background-color-pc-hover, var(--background-color-pc)) !important;
  opacity: var(--background-color-opacity-pc-hover, var(--background-color-opacity-pc)) !important;
}

/* ホバー強制適用 - 背景画像 */
.button-pattern-preview-inner.force-hover .wp-block-zenblocks-button-basic-bg-image {
  background-image: var(--background-image-pc-hover, var(--background-image-pc)) !important;
  background-position: var(--background-image-position-pc-hover, var(--background-image-position-pc)) !important;
  background-size: var(--background-image-size-pc-hover, var(--background-image-size-pc)) !important;
}

/* ホバー強制適用 - アイコンフレーム */
.button-pattern-preview-inner.force-hover .wp-block-zenblocks-button-basic-icon.wrap_icon::before {
  width: var(--icon-frame-width-pc-hover, var(--icon-frame-width-pc, 40px)) !important;
  height: var(--icon-frame-height-pc-hover, var(--icon-frame-height-pc, 40px)) !important;
  background: var(--icon-frame-bg-color-hover, var(--icon-frame-bg-color, transparent)) !important;
  border-radius: var(--icon-frame-radius-pc-hover, var(--icon-frame-radius-pc, 0)) !important;
  border-top-width: var(--icon-frame-border-top-width-pc-hover, var(--icon-frame-border-top-width-pc, 0)) !important;
  border-right-width: var(--icon-frame-border-right-width-pc-hover, var(--icon-frame-border-right-width-pc, 0)) !important;
  border-bottom-width: var(--icon-frame-border-bottom-width-pc-hover, var(--icon-frame-border-bottom-width-pc, 0)) !important;
  border-left-width: var(--icon-frame-border-left-width-pc-hover, var(--icon-frame-border-left-width-pc, 0)) !important;
  border-color: var(--icon-frame-border-color-pc-hover, var(--icon-frame-border-color-pc, var(--icon-frame-border-color, transparent))) !important;
}

/* ホバー強制適用 - アイコン位置・サイズ */
.button-pattern-preview-inner.force-hover .wp-block-zenblocks-button-basic-icon {
  width: var(--icon-size-pc-hover, var(--icon-size-pc, 25px)) !important;
  height: var(--icon-size-pc-hover, var(--icon-size-pc, 25px)) !important;
  top: calc(50% + var(--icon-offset-y-pc-hover, var(--icon-offset-y-pc, 0px))) !important;
  left: calc(50% + var(--icon-offset-x-pc-hover, var(--icon-offset-x-pc, 0px))) !important;
  transform: translate(-50%, -50%) !important;
}

/* ホバー強制適用 - テキスト切替（アニメーションなし） */
.button-pattern-preview-inner.force-hover .wp-block-zenblocks-button-basic-text-main .default {
  opacity: 0 !important;
  visibility: hidden !important;
}

.button-pattern-preview-inner.force-hover .wp-block-zenblocks-button-basic-text-main .hover {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ホバー強制適用 - アイコン表示切替 */
.button-pattern-preview-inner.force-hover .wp-block-zenblocks-button-basic-icon > .default.icon-pc {
  display: none !important;
}

.button-pattern-preview-inner.force-hover .wp-block-zenblocks-button-basic-icon > .hover.icon-pc {
  display: flex !important;
  opacity: 1 !important;
}