/* -------------------------------------
 * SWELL「ノーマル」ボタン 
 * ------------------------------------- */

/* 1. 変数の定義と対象の絞り込み */
.is-style-btn_normal:not(:is(.red_, .blue_, .green_, .orange_, .yellow_, .pink_, .purple_, .gray_, .black_, .white_, [class*="has-"])) {
  /* ▼ 運用・保守用変数 ▼ */
  --btn-grad-color: linear-gradient(90deg, #2af598 0%, #009efd 100%);
  --btn-anim-speed: 0.4s;
  
  /* サブピクセル問題を回避するため枠線はpxを維持 */
  --btn-border-width: 2px; 
  
  /* ▼ ここを修正：アイコンの色をグラデーションの始点（緑）に合わせて自然な繋がりに ▼ */
  --btn-icon-hover-color: #2af598;
  
  /* シャドウはremを採用 (1rem=16px想定) */
  --btn-shadow-default: 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.1);
  --btn-shadow-hover: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
}

/* 2. ベースのボタンスタイル */
.is-style-btn_normal:not(:is(.red_, .blue_, .green_, .orange_, .yellow_, .pink_, .purple_, .gray_, .black_, .white_, [class*="has-"])) a {
  position: relative;
  transform: skew(-15deg);
  background-color: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: var(--btn-shadow-default) !important;
  transition: transform var(--btn-anim-speed) ease, box-shadow var(--btn-anim-speed) ease !important;
  z-index: 1;
}

/* 3. 最背面：グラデーションのベース */
.is-style-btn_normal:not(:is(.red_, .blue_, .green_, .orange_, .yellow_, .pink_, .purple_, .gray_, .black_, .white_, [class*="has-"])) a::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: var(--btn-grad-color);
  z-index: -2;
}

/* 4. 中間層：ホバー時に広がる「白抜き」レイヤー */
.is-style-btn_normal:not(:is(.red_, .blue_, .green_, .orange_, .yellow_, .pink_, .purple_, .gray_, .black_, .white_, [class*="has-"])) a::after {
  content: "";
  position: absolute;
  top: var(--btn-border-width); 
  left: var(--btn-border-width); 
  right: var(--btn-border-width); 
  bottom: var(--btn-border-width); 
  background-color: #fff;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--btn-anim-speed) cubic-bezier(0.25, 1, 0.5, 1);
}

/* 5. 最前面：アイコン要素（.__icon）初期設定 */
.is-style-btn_normal:not(:is(.red_, .blue_, .green_, .orange_, .yellow_, .pink_, .purple_, .gray_, .black_, .white_, [class*="has-"])) a .__icon {
  position: relative;
  z-index: 2;
  fill: #fff !important;
  transition: fill var(--btn-anim-speed) ease;
}

/* 6. 最前面：テキスト要素（span）初期設定 */
.is-style-btn_normal:not(:is(.red_, .blue_, .green_, .orange_, .yellow_, .pink_, .purple_, .gray_, .black_, .white_, [class*="has-"])) a span {
  position: relative;
  z-index: 2;
  color: #fff !important;
  display: inline-block;
  transition: all var(--btn-anim-speed) ease;
}

/* ---- ホバー時のアクション ---- */

.is-style-btn_normal:not(:is(.red_, .blue_, .green_, .orange_, .yellow_, .pink_, .purple_, .gray_, .black_, .white_, [class*="has-"])) a:hover {
  transform: skew(0);
  box-shadow: var(--btn-shadow-hover) !important;
}

.is-style-btn_normal:not(:is(.red_, .blue_, .green_, .orange_, .yellow_, .pink_, .purple_, .gray_, .black_, .white_, [class*="has-"])) a:hover::after {
  transform: scaleX(1);
}

/* アイコン要素（.__icon）ホバー時 */
.is-style-btn_normal:not(:is(.red_, .blue_, .green_, .orange_, .yellow_, .pink_, .purple_, .gray_, .black_, .white_, [class*="has-"])) a:hover .__icon {
  fill: var(--btn-icon-hover-color) !important;
}

/* テキスト要素（span）ホバー時（グラデーション） */
.is-style-btn_normal:not(:is(.red_, .blue_, .green_, .orange_, .yellow_, .pink_, .purple_, .gray_, .black_, .white_, [class*="has-"])) a:hover span {
  background-image: var(--btn-grad-color);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}