@charset "utf-8";

/* キラリンボタン
* ======================================================= */

/* ------------------------------------
ボタンの基本スタイル
------------------------------------*/
/* ボタン自体のスタイル */
.shine-button {
/*background: red;		 背景色 */
/*margin: 1.5em auto;
 上下に1emの余白, 左右は中央揃えにするために auto */
text-align: center;	/* 内部のリンクテキストは中央揃え */
display: block;		/* 形状は block */
/*width: 100%;			 横幅は一杯に伸ばす */
/* max-width: 500px;		その中でも最大幅は500pxに制限 */
/*border-radius: 100px;	 角は丸く */
cursor: pointer;		/* リンクがあれば不要 */
/* ボタンを光らせるために必要 */
position: relative;
/* ボタンの位置を基準にするため relative指定 */
overflow:hidden;		/* ボタンの外の領域は非表示 */
}

/* ------------------------------------
ボタンの外側にボックス作成
（疑似要素「before」を使う）
------------------------------------*/
.shine-button::before {
content: "";			/* 文字は表示しないので中身無しを指定 */
position: absolute;	/* ボタンの位置を基準に絶対値指定する */
display: block;		/* 形式はblock */
background: linear-gradient(to right,rgba(255,255,255,0), rgba(255,255,255,0.9));
/* 背景色は透明から白になるグラデーション */
width: 50px;	/* 横幅 */
height: 50px;	/* 縦幅 */
top: -60px;	/* ボタン左上を基準に上へ60pxの位置 */
left: -60px;	/* ボタン左上を基準に左へ60pxの位置 */
/* アニメーションの動作指定 */
animation-name:shine-run;	/* アニメーション名の指定 */
animation-delay:0s;		/* アニメーションの開始時間指定 */
animation-duration: 3s;	/* アニメーション動作時間の指定 */
animation-timing-function: ease-in;
/* アニメーションの動き指定（徐々に早く）*/
animation-iteration-count: infinite;
/* アニメーションの無限繰り返しの指定 */
}
/* ------------------------------------
アニメーションのタイミングとボックスの
拡大率、角度、透過率の指定
------------------------------------*/
@keyframes shine-run {
0% {
transform: scale(0) rotate(50deg);
/* アニメ開始時は大きさ0、50度の傾き */
opacity: 0;
/* アニメ開始時は全透過 */
}
40% {
transform: scale(1) rotate(50deg);
/* 40%まで進む間に大きさを等倍に。傾きは50度のまま*/
opacity: 1;
/* 透過しない（しっかり表示される）ように1を設定 */
}
100% {
transform: scale(250) rotate(50deg);
/* 最後は元の大きさの250倍になるようにする。傾きは50度のまま*/
opacity: 0;
/* 全透過になるようにして、徐々に消えるような変化を付ける */
}
}
.shine-button a{background: #b30000!important;}
/* 背景色 */
