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

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

/*文字の間隔を広げる*/
p {
letter-spacing: 0.05em;
}

/*---------------------------------
複数の固定ページの日付を非表示にする
--------------------------------*/

.post-672.date-tags,
.post-674.date-tags,
.post-2310.date-tags,
.post-5132.date-tags {
  display: none;
}

/*更新日を非表示にする*/
.post-update{
  display: none;
}

/*広告表示*/
.pr-label-l:before {
padding-right: 10px;
font-family: "Font Awesome 5 Free";
content: "\f1b0";/*アイコンのユニコード*/
color: #606060; /*アイコン色*/
}

/*区切り線*/
.article hr {
position: relative;

}

/* 見出し */
.article h1 {
font-size: 20px;
padding: 0.5em 0;/*上下の余白*/
border-top: solid 1px #333333;/*上線*/
border-bottom: solid 1px #333333;/*下線*/
font-family: "游ゴシック";
}
.article h2 {
background: #edecea;
box-shadow: 0px 0px 0px 5px #edecea;
border: dashed 1px #ffffff;
margin-top: 40px;
padding: 6px 10px;
color: #666666;/*文字色*/
position: relative;/*相対位置*/
padding-left: 40px;/*アイコン分のスペース*/
font-size: 20px;/*文字サイズ*/
}
.article h2:before {
font-family: "Font Awesome 5 Free";
content: "\f1b0";/*アイコンのユニコード*/
font-weight: 900;
position: absolute;/*絶対位置*/
font-size: 22px;/*サイズ*/
left: 10px;/*アイコンの位置*/
top: 5px;/*アイコンの位置*/
color: #666666; /*アイコン色*/
}
.article h3 {
padding: 0.5rem 1rem 0.5rem 1.5rem;
margin-top: 30px;
margin-bottom: 1rem;
background-image:linear-gradient(#a7a7a7 50%, #6c6c6c 50%);
background-repeat: no-repeat;
background-size: 0.5rem 100%;
border-top: none!important;
border-left: none!important;
border-right: none!important;
border-bottom: 1px solid #6c6c6c!important;
font-size: 18px;
line-height: 18px;
}
.article h4{
font-size: 16px; /* 文字サイズ */
padding: 10px;
padding: 10px;
border-top: none;
border-bottom: dotted 3px #999999;/* 下側に点線・色*/
}
.article h5{
font-size: 16px; /* 文字サイズ */
position: relative;
text-align:center;
border-bottom: none;
margin-bottom: 1.5em;
}
.article h5:before {
content: '';
position: absolute;
border-bottom: 20px dotted #a5c9c1;
width: 100px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}

.sidebar{
font-size: 14px;
}

/* プロフィール文 */
.author-description{
margin-bottom: 16px;
}
.author-description p{
margin: 0 0 0.5em 0;
text-align: left;
line-height: 1.7;
}

/* ブログカード */
.blogcard {
position: relative;
margin: 2em 0;
padding: 1em 1em;
font-size: 15px;
border: solid 1px #000000!important;
border-radius: 8px;
}
.blogcard-title {
font-size: 16px;
padding: 0.2em 1em;
}
.blogcard-snippet {
padding: 0em 1em;
}
.internal-blogcard-footer{
 display: none;
}
.blogcard-label{
position: absolute;
top: -10px;
left: 30px;
padding: 0 15px;
line-height: 1;
font-size: 14px;
background: #FFF!important;
color: #000000!important;
}
/*あわせて読みたい*/
.bct-together .blogcard-label .fa::before{
font-size: 14px!important;
font-family: "Font Awesome 5 Free";
content: "\f00c"!important;
}
/*参考記事*/
.bct-reference .blogcard-label .fa::before{
font-size: 14px!important;
font-family: "Font Awesome 5 Free";
content: "\f1b0"!important;
}
/*参考リンク*/
.bct-reference-link .blogcard-label .fa::before{
font-size: 14px!important;
font-family: "Font Awesome 5 Free";
content: "\f0c1"!important;
}
/*人気記事*/
.bct-popular .blogcard-label .fa::before{
font-size: 14px!important;
font-family: "Font Awesome 5 Free";
content: "\f02e"!important;
}
/*詳細はこちら*/
.bct-detail .blogcard-label .fa::before{
font-size: 14px!important;
font-family: "Font Awesome 5 Free";
content: "\f1b0"!important;
}
/*チェック*/
.bct-check .blogcard-label .fa::before{
font-size: 14px!important;
font-family: "Font Awesome 5 Free";
content: "\f0a6"!important;
}
/*ピックアップ*/
.bct-pickup .blogcard-label .fa::before{
font-size: 14px!important;
font-family: "Font Awesome 5 Free";
content: "\f005"!important;
}
/*公式サイト*/
.bct-official .blogcard-label .fa::before{
font-size: 14px!important;
font-family: "Font Awesome 5 Free";
content: "\f1b0"!important;
}
/*ダウンロード*/
.bct-dl .blogcard-label .fa::before{
font-size: 14px!important;
font-family: "Font Awesome 5 Free";
content: "\f019"!important;
}



@media screen and (max-width: 768px) {
.blogcard-title {
font-size: 13px;
}
.blogcard-snippet{
font-size: 11px;
}
}


/*数字のリスト*/
.list-1{
counter-reset:number; 
list-style-type: none; 
padding:0;
margin:0;
}
.list-1 li { 
position: relative;
margin:0.2em 0.5em !important;
padding-left: 1.5em;
}
.list-1 li:before {
counter-increment: number;
content: counter(number);
background-color: #a8bf93; /* 文字背景色 */
color: #fff; /* 文字色 */
position: absolute;
font-weight:bold;
font-size: 12px;
border-radius: 50%;
left: 0;
right:1em;
top:0.2em;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
}

/*チェックアイコンのリスト*/
.list-2{
list-style: none;
padding:0;
margin:0;
}
.list-2 li { 
position: relative;
margin:0.2em 0.5em !important;
padding-left: 1.5em;
}
.list-2 li:before {
font-family: "Font Awesome 5 Free";
content: "\f058"; /*アイコン*/
color:  #a8bf93; /* 色 */
position: absolute;
left:0;
}

/*肉球アイコンのリスト*/
.list-3{
list-style: none;
padding:0;
margin:0;
}
.list-3 li { 
position: relative;
margin:0.2em 0.5em !important;
padding-left: 1.5em;
}
.list-3 li:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f1b0"; /*アイコン*/
color: #a8bf93; /* 色 */
position: absolute;
left:0;
}

@media screen and (max-width: 768px){
.article ul, .article ol {
padding-left: 0px; /* スマホ閲覧時の余白リセット(cocoon) */
}
}
/*ここまでアイコンのリスト*/

.check-list {
list-style: none;
padding-left: 1.3em !important;
text-indent: -1.5em !important;
}
.check-list:before {
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f058"; /*アイコン*/
color: #786058; /* 色 */
position: relative;/*相対位置*/
padding-left: 0em;/*アイコン分のスペース*/
padding-right: 0.5em;/*アイコン分のスペース*/
}

/*記事一覧アイキャッチ画像の角丸め*/
.ect-entry-card img{border-radius: 10px;}


/* 商品リンク用 */
.ads {
width: 60%; /*横幅*/
}

/* トグルボックス */
.toggle-button {
background-color: #edecea; /* 見出しの背景色 */
color: #666666; /* 見出しの文字色 */
border: none; /* 見出しのボーダーを消す */
text-align:left;/*文字を左に寄せる*/
border-radius:10px;
display: inline-block;
padding:10px 20px;
}
.toggle-checkbox:checked ~ .toggle-content {
border: none; /* ボックスのボーダーを消す */
background: ; /* ボックスの背景色 */
}

/*トグルアイコン*/
.toggle-button::before {
color: #666666;
font-family: FontAwesome;
content:'\f103';
}

/*---SNSボタンを丸くする---*/
#main .button-caption {
display: none; /*キャプション非表示*/
}

/*SNSシェアボタン*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/*SNSフォローボタン*/
.sns-follow-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-follow-buttons {
	justify-content: center; /*中央寄せ*/
}
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/*引用*/
.entry-content blockquote{
font-size: 12px;
border-radius: 5px; /*角を丸める*/
}

/*ホーム画面タイトル*/
.entry-card-title {
 font-size: 14px;
 font-family:"ヒラギノ角ゴシック";
 letter-spacing: 0.1em;
} 


/* 吹き出し共通 */
 
.balloon-simple {
 width: 100%;
 margin: 20px 0;
 overflow: hidden;　
}
 
.balloon-simple .icon-right img,
.balloon-simple .icon-left img{
 width: 100%;
 border-radius: 50%;　//アイコンの形を変更できます
 background-size:cover;
}
 
.icon-right p,
.icon-left p{
 text-align: center;
 top: -10px;
 position: relative;
}
 
.balloon-simple .balloon {
 width: 100%; 
}
 
.serif-right,
.serif-left {
 position: relative;
 padding: 30px 30px 30px 30px;
 border-radius: 100px;　//吹き出しの形を変更できます
}
 
.serif-right:after,
.serif-left:after {
 content: "";
 position: absolute;
 top: 50px;
 border-top: 10px solid transparent;
 border-bottom: 5px solid transparent;
 border-left: 5px solid transparent;
}
 
.serif-right p,
.serif-left p  {
 margin: 0;
 padding: 0;
 color: #fff;　//吹き出しのセリフの文字色を変更できます
}
 
/* 共通 end */
 
/* 右の吹き出し */
 
.balloon-simple .icon-right {
 float: right;
 width: 100px;
 margin-right: 10px;
}
 
.balloon-simple .icon-right img{
 border: solid 4px #85e3ff;　//右の吹き出しのアイコンの枠の種類・色・太さを変更できます
}
 
.serif-right {
 margin: 0 40px 0 0px;
 background: #85e3ff;　//右の吹き出しの背景色を変更できます
 float: right;
}
 
.serif-right:after {
 transform: scale(-1, 1);
 right: -22px;
 border-right: 30px solid #85e3ff;　//右の吹き出しの三角部分の色を変更できます
 position: absolute;
 height: 0;
 width: 0;
}
 
/* 右の吹き出し end */
 
/* 左の吹き出し */
 
.balloon-simple .icon-left {
 float: left;
 width: 100px;
 margin-left: 10px;
}
 
.balloon-simple .icon-left img{
 border: solid 4px #da9e5b;　//左の吹き出しのアイコンの枠の種類・色・太さを変更できます
}
 
.serif-left{
 display: inline-block;
 margin: 0 0 0 45px;
 background: #da9e5b;　//左の吹き出しの背景色を変更できます
}
 
.serif-left:after{
 left: -22px;
 border-right: 30px solid #da9e5b;　//左の吹き出しの三角部分の色を変更できます
 position: absolute;
 height: 0;
 width: 0;
}
 
/* 左の吹き出し end */




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

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

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