@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/


.bb-point .bb-label::after{
  content: "この記事で理解できること" !important;
}


/* ------------------------------------
ボタンの基本スタイル
------------------------------------*/
/* ボタン自体のスタイル */
.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;		/* ボタンの外の領域は非表示 */
}
/* ボタン内のリンクのスタイル 
（リンク自体でボタンを作る場合には不要） */
.shine-button a {
display: block;	/* 形状はblock */
width: 100%;		/* 外側のボックスに対して横幅いっぱいに*/
padding: 1em;		/* 上下左右1文字分の余白 */
color: white;			/* 文字色は白 */
text-decoration:none;	/* 下線など文字装飾は無し */
}
/* リンク自体でボタンを作る場合の追加のスタイル
（ボックス＋その中にリンクのあるボタンの場合には不要）*/
a.shine-button {
padding: 1em;	/* 上下左右に1文字分の余白を設ける */
color: white;	/* 文字色を白色に指定*/
text-decoration: none;	/* リンクの下線は非表示 */
}
/* ------------------------------------
ボタンの外側にボックス作成
（疑似要素「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;
/* 全透過になるようにして、徐々に消えるような変化を付ける */
}
}





.button-10 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 400px;
    margin: 0 auto;
    padding: 1em 2em;
    overflow: hidden;
    border: none;
    border-radius: 25px;
    background-color: #30d025;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

.button-10::before {
    display: block;
    position: absolute;
    top: -50%;
    left: -30%;
    transform: rotate(30deg);
    width: 70px;
    height: 100px;
    content: '';
    background-image: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
    animation: animation-button-10 2s infinite linear;
}

@keyframes animation-button-10 {
    17% {
        left: 120%;
    }
    100% {
        left: 120%;
    }
}

.button-10::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
}

.button-10:hover {
    background-color: #20c015;
}







/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}