@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.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.text-box-1 {
    border: 2px solid #da4035;
    border-radius: 4px;
    margin: 1em ;
    padding: 1.5em;
    position: relative;
}
.text-box-1:before {
    background-color: #fff;
    color: #da4035;
    font-size: 1.2em;
    content: "こちらもチェック！";
    font-weight: bold;
    left: 1em;
    padding: 0 0.5em;
    position: absolute;
    top: -1em;
}

.text-box-a {
    border: 2px solid #da4035;
    border-radius: 4px;
    margin: 1em ;
    padding: 1.5em;
    position: relative;
}
.text-box-a:before {
    background-color: #fff;
    color: #da4035;
    font-size: 1.2em;
    content: "Amazonで見る";
    font-weight: bold;
    left: 1em;
    padding: 0 0.5em;
    position: absolute;
    top: -1em;
}

.text-box-r {
    border: 2px solid #da4035;
    border-radius: 4px;
    margin: 1em ;
    padding: 1.5em;
    position: relative;
}
.text-box-r:before {
    background-color: #fff;
    color: #da4035;
    font-size: 1.2em;
    content: "楽天で見る";
    font-weight: bold;
    left: 1em;
    padding: 0 0.5em;
    position: absolute;
    top: -1em;
}
/*蛍光マーカー*/
.keiko_blue {
  background: linear-gradient(transparent 50%, #dbedff 50%);
}
.keiko_yellow {
  background: linear-gradient(transparent 50%, #fffc98 50%);
}
.keiko_green {
  background: linear-gradient(transparent 50%, #b7efb9 50%);
}
.keiko_red {
  background: linear-gradient(transparent 50%, #ffd6d6 50%);
}

/*ブログカードのスニペット非表示*/
.blogcard-snippet {
 display: none;
}
/*テキストリンク装飾*/
.arrow:before {
    content: "\f138";
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    color:#4f96f6;
    margin-right:9px;
}
/*リンクタイトル*/
.plink{
  display: inline-block;
  font-size: 0.9em;
  color: #FFFF;
  background-color: #4f96f6;
  border: solid 1px #7777CC;
  padding: 0.1em 1.0em 0em;
  border-radius: 0.5em;
  margin-bottom: 0.1em;
}
.plink:before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  position: relative;
  right: 0.5em;
  color: #ffff;
  font-weight: 900;
}
/*内部リンクタイトル*/
.naib{
  display: inline-block;
  font-size: 0.9em;
  color: #FFFF;
  background-color: #0095D9;
  padding: 0.1em 1.2em 0em;
  border-radius: 0.5em;
  margin-bottom: 0.1em;
}
.naib:before {
  font-family: "Font Awesome 5 Free";
  content: "\f024";
  position: relative;
  right: 0.5em;
  color: #ffff;
  font-weight: 900;
}
/*キャプション*/
figcaption {
    font-size: 15px;
    color: gray;
    margin-top: -25px;
    text-align: center;
}
.box01 {/*関連記事用*/
max-width:90%;
list-style:none;/*これはリストの・を消すという意味*/
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 3em;/*上のテキストとの被りを防止*/
　　margin-bottom:1.5em;
    padding: 0.5em;
    position:  relative;
    border: solid 3px #62c1ce;
    border-radius:0 5px 5px 5px ;
    }
.box01 .box-title {
    position:  absolute;
    display: inline-block;
    top: -15px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px;
    } 


/*ここからパルス*/
@-webkit-keyframes pulse {
  0%, 100% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(0.8);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(0.8);
  }
}

.faa-pulse.animated,
.faa-pulse.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-pulse {
  -webkit-animation: pulse 2s linear infinite;
          animation: pulse 2s linear infinite;
}

.faa-pulse.animated.faa-fast,
.faa-pulse.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-pulse.faa-fast {
  -webkit-animation: pulse 1s linear infinite;
          animation: pulse 1s linear infinite;
}

.faa-pulse.animated.faa-slow,
.faa-pulse.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-pulse.faa-slow {
  -webkit-animation: pulse 3s linear infinite;
          animation: pulse 3s linear infinite;
}
/*ここまでパルスの追加*
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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