/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 29 2025 | 05:38:07 */
/* 設定: はみ出し量（デバイスごとの親コンテナPaddingに合わせる） */
.pretech-heading-tech-sonic {
  --sonic-expand: 30px; /* PC・タブレット (padding: 30px) */
}

/* モバイル縦向き (max-width: 767px) */
@media (max-width: 767px) {
  .pretech-heading-tech-sonic {
    --sonic-expand: 20px; /* スマホ (padding: 20px) */
  }
}

/* 3. Sonic Line風アニメーション (::afterを使用) */
/* 背景画像を2層重ねることで「ライン」と「走る点」を1つの要素で表現 */
.pretech-heading-tech-sonic .elementor-heading-title::after {
  content: '';
  position: absolute;
  bottom: -4px; /* 点の中心がラインに合うように位置調整 */
  
  /* 左右にはみ出す計算（変数を適用） */
  left: calc(var(--sonic-expand) * -1);
  width: calc(100% + (var(--sonic-expand) * 2));
  
  height: 12px; /* 点と光彩が収まる高さ */

  /* 1.走る点(円形グラデーション), 2.ベースのライン(線形グラデーション) */
  background-image: 
    radial-gradient(circle closest-side, #78C414 40%, rgba(120, 196, 20, 0) 100%),
    linear-gradient(90deg, #78C414 0%, #55A51C 40%, rgba(120, 196, 20, 0.1) 100%);
    
  background-size: 
    10px 10px,   /* 点のサイズ */
    100% 2px;    /* ラインのサイズ */
  
  background-repeat: no-repeat;
  
  /* 初期位置 */
  background-position: 
    0 50%,       /* 点: 左端, 上下中央 */
    0 50%;       /* ライン: 左端, 上下中央 */

  /* 右端に行くにつれて薄くなるマスク処理 */
  -webkit-mask-image: linear-gradient(90deg, black 80%, transparent 100%);
  mask-image: linear-gradient(90deg, black 80%, transparent 100%);

  /* 描画最適化 */
  will-change: background-position;
    
  /* 点を動かすアニメーション: 8sにしてさらにゆったりと、自然なイージングで */
  animation: tech-sonic-run 8s cubic-bezier(0.3, 0, 0.3, 1) infinite;
}

@keyframes tech-sonic-run {
  0% { 
    /* 点は左端(0%) */
    background-position: 0 50%, 0 50%; 
  }
  100% { 
    /* 点は右端(100%)まで移動 */
    background-position: 100% 50%, 0 50%; 
  }
}

/* --- [.white] クラス追加時のカラー変更 (暗い背景用) --- */

/* アニメーションの点とラインを白ベースに変更 */
.pretech-heading-tech-sonic.white .elementor-heading-title::after {
  background-image: 
    radial-gradient(circle closest-side, #ffffff 40%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.1) 100%);
}