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

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

.container table tr {
  background-color: #FFFFFF;
}

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

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

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

/************************************
全体のバランス
************************************/
.entry-content {
padding:1em;
padding-top:0;
margin: 0 auto;
}
@media (max-width: 1023px){
article > .entry-content, aritcle > footer.article-footer {
padding: 0 20px;
}
}
@media screen and (max-width: 880px){
.page-body {
font-size: 16px;
}
}
@media screen and (max-width: 480px){
.page-body {
font-size: 15px;
}
}
img{
box-shadow: none;
}
a {
 -webkit-tap-highlight-color:rgba(0,0,0,0);
}

img.site-logo-image {box-shadow: none;}


/************************************
** ブログカード
***********************************/
.blogcard {/*幅、形*/
padding-bottom:.8%;
border: 0px solid whitesmoke;
border-radius:4px;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 30%);
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf{
transition: all 200ms;
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf:hover,
a.blogcard-wrap.external-blogcard-wrap.a-wrap.cf:hover{/*ブログカードにカーソルを合わせたときの設定*/
background-color: #fafafa;
box-shadow:none;
transform: none;
}
.blogcard-footer {/*ブログURLの設定*/
	padding-top: 2%;
}
.blogcard:before {
display:none;
}
/*この記事を読む*/
.internal-blogcard::after{/*ブログカードの右下に「この記事を読む」ボタンを追加*/
content: "この記事を読む ≫"; 
position: absolute;
bottom: 0.7em;
right: 1em;
font-size: 0.7em;
background-color: #8b968d;/*この記事を読むの背景色変更はこちら*/
padding: 0.2em 2.8em;
font-weight: bold;
color: #fff;
border-radius: 2px;
}
.blogcard-date{/* 日付を非表示にする */
display:none;
}
.blogcard-title {/*タイトルの設定*/
font-size:1em;
padding:.2em .2em 0;
line-height:1.4em;
text-align: justify;
}
.blogcard-snippet {/*抜粋文の設定*/
padding:0em .5em;
color:#7b7b7b;
text-align: justify;
}
/*以下モバイル版の設定*/
@media screen and (max-width: 1023px){
.blogcard-title {
padding:.3em .3em 0em .2em;
line-height:1.5em;
}
.blogcard-snippet {
font-size:.9em;
margin-top:.3em;
}
}
@media screen and (max-width: 960px){
.blogcard-title {
padding:.3em .3em .2em .2em;
line-height:1.5em;
}
.blogcard-snippet{
font-size:.8em;
max-height:15em;
}
}
@media screen and (max-width: 834px){
.blogcard-title {
font-size:1.1em;
padding:.2em .3em .5em .2em;
}
.blogcard-snippet {
font-size:.9em;
}
}
@media screen and (max-width: 740px){
.blogcard-title {
padding:.3em;
}
}
@media screen and (max-width: 673px){
.blogcard-title {
padding:.3em .5em 1em .2em;
line-height:1.8em;
}
.blogcard-snippet {
display:none;
}
}
@media screen and (max-width: 480px){
.blogcard {
padding-bottom: 2%;
}
.blogcard-title {
padding:.1em .4em 0em .1em;
line-height:1.5em;
}
.blogcard-footer {
padding-top: 5%;
}
}
.bct-related .blogcard-label,/*関連記事*/
.bct-reference .blogcard-label,/*参考記事*/
.bct-reference-link .blogcard-label,/*参考リンク*/
.bct-popular .blogcard-label,/*人気記事*/
.bct-together .blogcard-label,/*あわせて読みたい*/
.bct-detail .blogcard-label,/*詳細はこちら*/
.bct-check .blogcard-label,/*チェック*/
.bct-pickup .blogcard-label,/*ピックアップ*/
.bct-official .blogcard-label,/*公式サイト*/
.bct-dl .blogcard-label{/*ダウンロード*/
display: inline !important;
background-color: #ffa500;
margin-left:.5em;
}
@media screen and (max-width: 600px){
.blogcard-label{
margin-left:-0.3em!important;
}
}
/*カードラベルを非表示*/
/* .blogcard-label {
	display: none;
} */
/*　内部ブログカードの説明文を消す*/
/* .internal-blogcard-snippet{
    display: none;
} */
/*外部ブログカードの説明文を消す*/
/* .external-blogcard-snippet{
    display: none;
} */
/*内部ブログカードと外部ブログカードの説明文を消す*/
.blogcard-snippet{
    display: none;
}

/* --------------------------------------------------- */
/*    スマホ表示の時は左右の余白が狭くなるように変更   */
/* --------------------------------------------------- */
/480px以下/
@media screen and (max-width: 480px){
.article{
wedth:95%:
margin:auto;
}
}