@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.1
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
span[id^="toc"] {
	padding-top: 3.6em;
}

/************************************
 ** もしもアフィリエイト かんたんリンクのデザイン（自作） START 2020/10/26
 ************************************/
/* --- 商品リンク タイトル --- */
p.easyLink-info-name a {
    color: #3296d2 !important; /* 文字色 */
}

/* --------- ボタン色 --------- */
a.easyLink-info-btn-amazon {
    background: #fff !important; /* 背景色 */
    border: 2px solid #f6a306 !important; /* 外枠 */
    color: #f6a306 !important; /* 文字色 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}

a.easyLink-info-btn-rakuten {
    background: #fff !important; /* 背景色 */
    border: 2px solid #cf4944 !important; /* 外枠 */
    color: #cf4944 !important; /* 文字色 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}

a.easyLink-info-btn-yahoo {
    background: #fff !important; /* 背景色 */
    border: 2px solid #51a7e8 !important; /* 外枠 */
    color: #51a7e8 !important; /* 文字色 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}

/* --- マウスオーバー時のボタン色 --- */
a:hover.easyLink-info-btn-amazon {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #f6a306 !important; /* 背景色 */
    color: #fff !important; /* 文字色 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}

a:hover.easyLink-info-btn-rakuten {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #cf4944 !important; /* 背景色 */
    color: #fff !important; /* 文字色 */
}

a:hover.easyLink-info-btn-yahoo {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #51a7e8 !important; /* 背景色 */
    color: #fff !important; /* 文字色 */
}
/************************************
 ** もしもアフィリエイト かんたんリンクのデザイン（自作） END
 ************************************/

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

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

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