@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ポチップ｜インラインボタン色個別設定----------------------------------------------*/

.-amazon.pochipp-inline__btnwrap>.pochipp-inline__btn{
	 background-color:var(--pchpp-color-amazon)!important;
}

.-rakuten.pochipp-inline__btnwrap>.pochipp-inline__btn{
	background-color:var(--pchpp-color-rakuten)!important;
}

.-yahoo.pochipp-inline__btnwrap>.pochipp-inline__btn{
	background-color:var(--pchpp-color-yahoo)!important;
}

.-custom.pochipp-inline__btnwrap>.pochipp-inline__btn{
	background-color:var(--pchpp-color-custom)!important;
}

/* -----------------------------------------------------
  ポチップ｜カスタムインラインボタンだけをキラッと光らせるCSS
  - 光の通過：超高速（0.5秒）
  - 光る間隔：やや空けた（2.5秒）
  - 適用対象：-custom.pochipp-inline__btnwrap 内のボタンのみ
------------------------------------------------------ */

.pochipp-inline__btn {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background-color: #dddddd;
  color: black;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
  z-index: 0;
}

/* カスタムボタン内のみに限定した光アニメーション */
.-custom.pochipp-inline__btnwrap .pochipp-inline__btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  transform: skewX(-25deg);
  animation: pochipp-shine 2.5s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

/* 上記の続き（カスタムボタン）テキストや要素は光より前に表示 */
.pochipp-inline__btn * {
  position: relative;
  z-index: 2;
}

/* 上記の続き（カスタムボタン）アニメーション定義（速く通過して、間隔を空ける） */
@keyframes pochipp-shine {
  0% {
    left: -100%;
  }
  20% {
    left: -100%;
  }
  40% {
    left: 130%;
  }
  100% {
    left: 130%;
  }
}