.pg-custom-button {
  --pg-btn-color:#000000;
  --pg-btn-text-color:#ffffff;
  --pg-btn-tone-text:#000000;
  --pg-btn-rgb:0,0,0;
  --pg-btn-radius:0px;
  --pg-btn-font-size:1em;
  --pg-btn-icon-size:1.1em;
  --pg-btn-width:auto;
  --pg-btn-min-width:64%;
  --pg-btn-padding:.75em 1.5em;
  display:block;
  position:relative;
  margin:0 auto 2em;
  font-size:var(--pg-btn-font-size);
  text-align:center;
}
.pg-custom-button[data-align="left"] { text-align:left; }
.pg-custom-button[data-align="center"] { text-align:center; }
.pg-custom-button[data-align="right"] { text-align:right; }
.pg-custom-button[data-align="auto"].pg-custom-button--more,
.pg-custom-button[data-align="auto"].pg-custom-button--more2 { text-align:right; }

.pg-custom-button__link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  box-sizing:border-box;
  min-width:var(--pg-btn-min-width);
  width:var(--pg-btn-width);
  padding:var(--pg-btn-padding);
  line-height:1.5;
  letter-spacing:1px;
  text-align:center;
  text-decoration:none !important;
  cursor:pointer;
}
.pg-custom-button--size-small {
  --pg-btn-font-size:.9em;
  --pg-btn-min-width:40%;
}
.pg-custom-button--size-large {
  --pg-btn-min-width:100%;
  --pg-btn-padding:1em 1.5em;
}
.pg-custom-button--size-custom { --pg-btn-min-width:0; }

.pg-custom-button__icon {
  width:var(--pg-btn-icon-size);
  height:var(--pg-btn-icon-size);
  flex:0 0 var(--pg-btn-icon-size);
  color:currentColor;
}
.pg-custom-button__tracking-img { display:none !important; width:1px !important; height:1px !important; border:0 !important; }

/* Primary */
.pg-custom-button--primary .pg-custom-button__link,
.pg-custom-button--normal .pg-custom-button__link,
.pg-custom-button--solid .pg-custom-button__link,
.pg-custom-button--shiny .pg-custom-button__link {
  color:var(--pg-btn-text-color,#fff) !important;
  background:var(--pg-btn-color) !important;
  border:1px solid var(--pg-btn-color);
  border-radius:var(--pg-btn-radius,0px);
  font-weight:700;
  opacity:1 !important;
  filter:none !important;
  box-shadow:0 2px 2px rgba(0,0,0,.08),0 4px 8px -4px rgba(0,0,0,.18);
  transition:transform .22s ease,box-shadow .22s ease;
}
.pg-custom-button--primary .pg-custom-button__link:hover,
.pg-custom-button--normal .pg-custom-button__link:hover,
.pg-custom-button--solid .pg-custom-button__link:hover,
.pg-custom-button--shiny .pg-custom-button__link:hover {
  color:var(--pg-btn-text-color,#fff) !important;
  background:var(--pg-btn-color) !important;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.10),0 12px 24px -12px rgba(0,0,0,.24);
  opacity:1 !important;
  filter:none !important;
}

/* Outline */
.pg-custom-button--outline .pg-custom-button__link {
  color:var(--pg-btn-color) !important;
  background:#fff !important;
  border:1px solid var(--pg-btn-color);
  border-radius:var(--pg-btn-radius,0px);
  box-shadow:none !important;
  transform:none !important;
  opacity:1 !important;
  filter:none !important;
  font-weight:500;
  transition:color .2s ease,background-color .2s ease,border-color .2s ease;
}
.pg-custom-button--outline .pg-custom-button__link:hover {
  color:var(--pg-btn-text-color,#fff) !important;
  background:var(--pg-btn-color) !important;
  border-color:var(--pg-btn-color);
  box-shadow:none !important;
  transform:none !important;
  opacity:1 !important;
  filter:none !important;
}

/* Soft */
.pg-custom-button--soft .pg-custom-button__link {
  color:var(--pg-btn-tone-text,var(--pg-btn-color)) !important;
  background:rgba(var(--pg-btn-rgb),.10) !important;
  border:1px solid rgba(var(--pg-btn-rgb),.12);
  border-radius:var(--pg-btn-radius,0px);
  box-shadow:none !important;
  opacity:1 !important;
  filter:none !important;
  font-weight:600;
  transition:background-color .2s ease,border-color .2s ease;
}
.pg-custom-button--soft .pg-custom-button__link:hover {
  color:var(--pg-btn-tone-text,var(--pg-btn-color)) !important;
  background:rgba(var(--pg-btn-rgb),.16) !important;
  border-color:rgba(var(--pg-btn-rgb),.20);
  box-shadow:none !important;
  transform:none !important;
  opacity:1 !important;
  filter:none !important;
}

/* Glass — プレビューと同じ「明るい透明ガラス」を実寸へ展開。
 * 選択色はTintとして残し、Hoverでは色を変えず反射光だけを走らせる。 */
.pg-custom-button--glass .pg-custom-button__link {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  /* 選択色に寄せた少し柔らかい文字色。
   * --pg-btn-tone-text は白など極端に明るい色では濃色へ自動フォールバックする。 */
  color:var(--pg-btn-tone-text,var(--pg-btn-color)) !important;
  color:color-mix(in srgb,var(--pg-btn-tone-text,var(--pg-btn-color)) 86%,#5f6470 14%) !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.08)),
    rgba(var(--pg-btn-rgb),.18) !important;
  border:1px solid rgba(255,255,255,.78);
  border-radius:var(--pg-btn-radius,0px);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  backdrop-filter:blur(18px) saturate(125%);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.74),
    inset -1px -1px 0 rgba(126,140,153,.18),
    0 8px 20px rgba(19,31,48,.08);
  opacity:1 !important;
  filter:none !important;
  font-weight:600;
  text-shadow:none;
  transform:none !important;
  transition:none;
}
/* Hover時に横切る細い反射光。色/Tint自体は変更しない。 */
.pg-custom-button--glass .pg-custom-button__link::before {
  content:"";
  position:absolute;
  top:-58%;
  left:-50%;
  width:36%;
  height:216%;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(
    104deg,
    transparent 0%,
    rgba(255,255,255,.10) 22%,
    rgba(255,255,255,.78) 49%,
    rgba(255,255,255,.24) 64%,
    transparent 84%
  );
  opacity:.32;
  transform:skewX(-14deg) translate3d(0,0,0);
  transition:transform .48s cubic-bezier(.22,.61,.36,1),opacity .18s ease;
  will-change:transform,opacity;
}
.pg-custom-button--glass .pg-custom-button__link > * {
  position:relative;
  z-index:1;
}
/* プレビューと同じ常設の上面反射とガラス縁。 */
.pg-custom-button--glass .pg-custom-button__link::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(120% 95% at 16% -10%,rgba(255,255,255,.62),transparent 55%),
    linear-gradient(112deg,rgba(255,255,255,.18),transparent 32%,transparent 72%,rgba(255,255,255,.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -1px 0 rgba(255,255,255,.12);
}
/* 本体は hover/focus/active/visited でも完全固定。 */
.pg-custom-button--glass .pg-custom-button__link:hover,
.pg-custom-button--glass .pg-custom-button__link:focus,
.pg-custom-button--glass .pg-custom-button__link:active,
.pg-custom-button--glass .pg-custom-button__link:visited {
  color:var(--pg-btn-tone-text,var(--pg-btn-color)) !important;
  color:color-mix(in srgb,var(--pg-btn-tone-text,var(--pg-btn-color)) 86%,#5f6470 14%) !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.08)),
    rgba(var(--pg-btn-rgb),.18) !important;
  border-color:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  backdrop-filter:blur(18px) saturate(125%);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.74),
    inset -1px -1px 0 rgba(126,140,153,.18),
    0 8px 20px rgba(19,31,48,.08);
  transform:none !important;
  opacity:1 !important;
  filter:none !important;
}
.pg-custom-button--glass .pg-custom-button__link:hover::before,
.pg-custom-button--glass .pg-custom-button__link:focus-visible::before {
  opacity:.78;
  transform:skewX(-14deg) translate3d(390%,0,0);
}
@media (prefers-reduced-motion:reduce) {
  .pg-custom-button--glass .pg-custom-button__link::before {
    transition:none;
  }
  .pg-custom-button--glass .pg-custom-button__link:hover::before,
  .pg-custom-button--glass .pg-custom-button__link:focus-visible::before {
    transform:skewX(-14deg) translate3d(0,0,0);
    opacity:.48;
  }
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
  .pg-custom-button--glass .pg-custom-button__link,
  .pg-custom-button--glass .pg-custom-button__link:hover,
  .pg-custom-button--glass .pg-custom-button__link:focus,
  .pg-custom-button--glass .pg-custom-button__link:active,
  .pg-custom-button--glass .pg-custom-button__link:visited {
    background:
      linear-gradient(135deg,rgba(255,255,255,.60),rgba(255,255,255,.24)),
      rgba(var(--pg-btn-rgb),.18) !important;
  }
}

/* More = 旧PRIME GEAR独自「もっと見る」 */
.pg-custom-button--more .pg-custom-button__link,
.pg-custom-button--more2 .pg-custom-button__link {
  position:relative;
  min-width:0;
  width:var(--pg-btn-width);
  padding:0 2.5em .5em .5em;
  color:var(--pg-btn-color) !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-weight:inherit;
  transition:none;
}
.pg-custom-button--more .pg-custom-button__link::before,
.pg-custom-button--more2 .pg-custom-button__link::before {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:12px;
  border-bottom:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:skewX(50deg);
  transition:left .3s ease;
  z-index:1;
  pointer-events:none;
}
.pg-custom-button--more .pg-custom-button__link:hover::before,
.pg-custom-button--more2 .pg-custom-button__link:hover::before { left:10%; }
.pg-custom-button--more .pg-custom-button__link:hover,
.pg-custom-button--more2 .pg-custom-button__link:hover { color:var(--pg-btn-color) !important; background:transparent !important; transform:none; box-shadow:none; }

.pg-custom-button--html .pg-custom-button__tracking-img { display:none !important; }

@media (min-width:600px) {
  .pg-custom-button { --pg-btn-min-width:40%; }
  .pg-custom-button.pg-custom-button--size-small { --pg-btn-min-width:20%; }
  .pg-custom-button.pg-custom-button--size-large { --pg-btn-min-width:80%; }
  .pg-custom-button.pg-custom-button--size-custom { --pg-btn-min-width:0; }
}

@media (max-width:599px) {
  .pg-custom-button { --pg-btn-min-width:64%; }
  .pg-custom-button.pg-custom-button--size-small { --pg-btn-min-width:40%; }
  .pg-custom-button.pg-custom-button--size-large { --pg-btn-min-width:100%; }
  .pg-custom-button.pg-custom-button--size-custom { --pg-btn-min-width:0; }
  .pg-custom-button__link { max-width:100%; }
}
