@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* 見出しリセット */

h3{
  position: relative;
  padding: 5px 5px 5px 42px;
  background: #77c3df;
  font-size: 20px;
  color: white;
  margin-left: -33px;
  line-height: 1.3;
  z-index:-1;
}

h3:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index:-2
}

/* 見出し2 */
.article h2{
background:none;
padding: 0;
}

/* 見出し3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}
.article h2 {
  padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #FFFFF0;/*背景色*/
  border-left: solid 5px #87CEFA;/*左線（実線 太さ 色）*/
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

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

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

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

/************************************
** マーカーの色
************************************/

.marker { /*黄色マーカー*/
 background-color: #F0E68C;
}
.marker-red { /*赤色マーカー*/
 background-color: #FA8072;
}
.marker-blue { /*青色マーカー*/
  background-color: #75A9FF;
}
.marker-under { /*黄色アンダーラインマーカー*/
 background: linear-gradient(transparent 80%, #F0E68C 70%);
}
.marker-under-red { /*赤色アンダーラインマーカー*/
 background: linear-gradient(transparent 80%, #FA8072 70%);
}
.marker-under-blue { /*青色アンダーラインマーカー*/
 background: linear-gradient(transparent 80%, #75A9FF 80%);
}