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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*======================
   common
======================*/
.mt1 {margin-top: 1em;}
.mt2 {margin-top: 2em;}
.mt3 {margin-top: 3em;}
.mt4 {margin-top: 4em;}
.mt5 {margin-top: 5em;}

span.attention {
    font-size: large;
    font-weight: bold;
    color: #FF0000;
}

/*======================
    目次設定
======================*/
div#toc {margin-bottom: 1em;}

/*======================
    見出し設定
======================*/
h2 {margin-top: 3em;}
h3 {margin-top: 1em;}
h4 {margin-top: 1em;}
h5 {margin-top: 1em;}
h6 {margin-top: 1em;}

/* h2：fa-pencil-square-o */
.article h2:before{
    font-family:"FontAwesome";
    content:"\f044";
    font-size: 1.2em;  
    margin-right: 15px;
}
/* h3：fa-check-circle */
.article h3:before{
    font-family: "FontAwesome";
    content: "\f058"; 
    margin-right: 15px;
}

/*======================
    出典
======================*/
cite {
    font-size: x-small;
}

/*======================
    プロフィール
======================*/
ul.profile {
    width: 80%;
    font-size: medium;
    padding: 1em;
    margin-top: -1em;
    margin-left: 25px;
    border-left: solid 2px #CCC;
    background-color: #f9f9f9;
    list-style: none;
}
ul.profile li {line-height: 1.5em;}

/*======================
    WP QUADS
======================*/
div.quads-ad-label {
    color: #C0C0C0;
}

/*======================
    会話バルーン設定
======================*/
/* 吹き出し領域 */
div.ico-bln-wrapper {
    margin-bottom: 3em;
    padding-left: 25px;
}
div.ico-bln-wrapper::after {
    clear: both;
    content: "";
    display: block;
    line-height: 0;
}
/* アイコン */
img.ico-bln-left,
img.ico-bln-right {                 
    clear: both;
	margin: 15px 0px;
}
/* 吹き出し本体 */
p.ico-bln-left,
p.ico-bln-right {
    position: relative;
    min-width: 10%;
    max-width: 70%;
    margin: 15px 0;
    padding: 13px;
    border-radius: 10px;
}
/* 吹き出し三角部分 */
p.ico-bln-left::before,
p.ico-bln-right::before {
    content: "";
    display: block;
    position: absolute;
    top: 10px;
    width: 0;
    height: 0;
    border: 12px solid transparent;
}
/* 左：吹き出し設定 */
img.ico-bln-left {
    float: left;
    margin-right: 10px;
}
/* 左：吹き出し本体 */
p.ico-bln-left {
    float: left;
    background-color: #AFEEEE;
}
/* 左：吹き出しの三角部分
   ※border で三角を作るハック */
p.ico-bln-left::before {
    left: -22px;
    border-right: 12px solid #AFEEEE;
}
/* 右：吹き出しの設定 */
img.ico-bln-right {
    float: right;
    margin-left: 10px;
}
/* 右：吹き出し本体 */
p.ico-bln-right {
    float: right;
    background-color: #aad;
}
/* 右：吹き出しの三角部分
   ※border で三角を作るハック */
p.ico-bln-right::before {
    right: -22px;
    border-left: 12px solid #aad;
}

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

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

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