@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: OCTGEAR
Author URI: https://octgear.tokyo
Template:   cocoon-master
Version:    1.1.3
*/

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1023px以下*/
@media screen and (max-width: 1023px){

/* 見出し H1 */
.article h1 {
 color: #5c6b80;
 font-weight: 800;
 font-size: 1.5rem;
 line-height: 1.3;
}
/* 見出し H2 */
.article h2 {
border: none; 
position: relative;
padding: .7em .75em;
margin-bottom: 1.5em;
background-color: #1baa9a;
color: #fff;
border-radius: 6px;
border-bottom: 0px
}
.article h2::after {
position: absolute;
top: 100%;
left: 30px;
content: '';
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 15px solid #1baa9a;
border-bottom: 0px
}
/* 見出し H3 */
.article h3 {
 border: none; 
 padding: 0.7em;/*文字周りの余白*/
 color: #494949;/*文字色*/
 background: #F3FEF1;/*背景色*/
 border-left: solid 10px #69B560;/*左線（実線 太さ 色）*/
}
/* 見出し H4 */
.article h4,
#comment-area h4,
#related-entries h4{
 border: none;
 position: relative;
 padding-bottom: .5em;
 border-bottom: 4px solid #ccc;
}
.article h4::after {
 position: absolute;
 bottom: -4px;
 left: 0;
 z-index: 2;
 content: '';
 width: 20%;
 height: 4px;
 background-color: #69B560;
}
/* 見出し H5 */
.article h5 {
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
border: none; 
padding:0px 30px 10px;
margin-top: 30px !important;
color: #69B560;/*文字色*/
}
.article h5:before {
font-family: FontAwesome;/*アイコンフォント*/
content: "\f138";/*アイコンのユニコード*/
position: absolute;/*絶対配置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #69B560; /*アイコン色*/
}
/* 見出し H6 */
.article h6{
position: relative;
border-top: solid 2px #80c8d1;
border-bottom: solid 2px #80c8d1;
background: #f4f4f4;
line-height: 1.4;
padding: 0.4em 0.5em;
margin: 2em 0 0.5em;
}
h6:after {/*タブ*/
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
content: '\f0a7\ Check';
background: #80c8d1;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em;
}
	
/* TOC もくじのカスタマイズ */
#toc_container{
 margin-top:25px;
 margin-bottom:35px;
 border-radius: 4px; 
 font-size: 16px; /* 文字の大きさ */
 padding-right: 16px;
 padding-left: 16px;
 background-color: #FFFBF4; /* 背景色 */
 border: 2px solid #F89174; /* 外枠の設定 */
}

#toc_container .toc_title{
 font-size: 18px; /* タイトルの文字の大きさ */
 font-weight:bold;
 color: #F89174; /* タイトルの文字色 */
 text-align: left; 
}

/* タイトル前のアイコン　FontAwesomeの設定 */
#toc_container .toc_title:before{
 content: "\f046"; /* FontAwesomeのコード */
 font-family: FontAwesome;
 padding-right: 6px;
 font-size:18px; /* アイコンの大きさ */
 color: #F89174;
}
#toc_container .toc_toggle a{
 color: #F89174; 
}
#toc_container ul{
 counter-reset:number;
 list-style:none;
}
#toc_container ul li{
 line-height: 1.25em;
 margin-bottom: 0.9em;
 margin-top:10px;
}
#toc_container ul li:before{
 counter-increment: number;
 content: counter(number);
 font-weight: bold;
 color: #555555;
 padding-right:12px;
 margin-left:-25px;
}
#toc_container ul li a{
 font-weight: bold;
 color: #555555;
 text-decoration:none;
}
#toc_container ul li a:hover{
 text-decoration:underline
}
#toc_container ul ul{
 margin-top: 0.5em;
}
#toc_container ul ul li{
 line-height: 1.25em;
 margin-bottom: 0.5em;
 font-size:14px;
 margin-left:-50px;
}
#toc_container ul ul li:before{
 content: "\f0da";
 font-family: FontAwesome;
 padding-right: 6px;
 margin-left:0px;
 color: #CCC;
 margin-left:-10px;	
}
#toc_container ul ul li a{
 color: #3D3D3D;
 font-weight: normal;
 padding-right:6px;
	text-decoration:none
}
#toc_container ul ul li a:hover{
 text-decoration:underline
}
	
/* 記事一覧ぼかしフェードイン */
a.entry-card-wrap figure.entry-card-thumb{
  overflow: hidden;
}

a.entry-card-wrap:hover img.entry-card-thumb-image{
  -webkit-filter: blur(2px) brightness(60%);
  filter: blur(2px) brightness(60%);
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
  opacity: 1;
  transition: 0.3s;
}
a.entry-card-wrap figure.entry-card-thumb::before{
  z-index: 1;
  font-family: sans-serif;
  font-weight: bold;
  content: "READ MORE";
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  position: absolute;
  font-size: 100%;
  width: 100%;
  height: 100%;
  color: #fff;
  top: 0;
  left: 0;
  opacity: 0;
  transition: .25s ease;
  -webkit-transition: .4s ease;
  -moz-transition: .4s ease;
  -ms-transition: .4s ease;
}

a.entry-card-wrap:hover figure.entry-card-thumb::before{
  opacity: 0.9;
  font-size: 150%;
}

.entry-card-snippet{
  font-size: 72%;
  line-height: 1.6;
  color: gray;
  text-align: justify;
  text-justify: inter-ideograph;
}
	
}

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

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