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

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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;
}
}

/*——————-
おすすめカード
———————-*/
div#recommended-in.recommended-in.wrap.cf{/*おすすめカード上にスキマをつくる*/
margin-top: 20px;
max-height:220px;
}
@media screen and (min-width: 1024px){
div#recommended-in.recommended-in.wrap.cf{/*おすすめカード左右にスキマをつくる*/
padding:0 2em;
}}
div#content.content.cf{/*メインカラムの上５ミリ、おすすめカードの↓*/
margin-top:0;
}
.widget-entry-cards .a-wrap:hover {
transform: translateY(-1px);
transition: all .3s;
}
figure.navi-entry-card-thumb.widget-entry-card-thumb.card-thumb{
opacity:.8;
}
.recommended.rcs-center-white-title .a-wrap:hover .card-content {
transition: all .1s;
opacity: 1;
}
.widget-entry-cards.large-thumb-on .card-content{/*写真の上に若干黒かかってる*/
background: rgba(151, 151, 151, 0);
}
a.navi-entry-card-link.widget-entry-card-link.a-wrap{/*影*//*retina対応にしたら余白ができたので、高さ上限設定*/
border-radius:10px!important;
margin:1em .5em;
background-color:#EFF1F5;/*Cocoon設定の「サイト背景色」に合わせる*/
}
div.navi-entry-card-title.widget-entry-card-title.card-title{/*おすすめカード上の文字*/
color:#333333;
font-weight:bold;
font-size:.8em;
background-color: rgba(255, 255, 255, 0.8);
padding: .6em .5em;
border-radius:30px;
}
@media (max-width:834px){
a.navi-entry-card-link.widget-entry-card-link.a-wrap{/*影*//*retina対応にしたら余白ができたので、高さ上限設定*/
margin:.3em 0em;
}
div.navi-entry-card.widget-entry-card.e-card.cf{/*高さ上限設定*/
border-radius:10px!important;
overflow:hidden;
max-height:100px;
margin:0 .3em 0;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1)!important;
}
.widget-entry-cards.large-thumb-on .a-wrap:hover {
box-shadow:none;
}
}
@media (max-width:834px){
div.navi-entry-card-title.widget-entry-card-title.card-title{/*おすすめカード上の文字*/
font-size:.6em;
padding: .5em;
}
div#recommended-in.recommended-in.wrap.cf{/*おすすめカードサイドにスキマをつくる*/
margin: .7em .2em .3em;
}
.widget-entry-cards.large-thumb-on .card-content{/*写真の上に若干黒かかってる*/
background: rgba(151, 151, 151, 0.2);
}
}
main#main.main{/*新着記事の真上空白をへらす*/
margin:0;
}

/************************************
****　インデックス
************************************/
a.entry-card-wrap.a-wrap.border-element.cf{/*カード本体*/
padding:0 0 .5em;
border-radius:10px;
width:48%;
margin-bottom:2em;
}
a.entry-card-wrap.a-wrap:hover {
transform: translateY(-1px);
transition: all .3s;
background-color: #fff;
}
figure.entry-card-thumb.card-thumb.e-card-thumb{/*サムネイル大きさ*/
max-height:150px;
border-radius:10px 10px 0 0/ 10px 10px 0 0;
overflow:hidden;
display: flex;/*位置をflexで中心に*/
justify-content: center;
align-items: center;
}
.e-card-thumb .cat-label{/*カテゴリラベルを右に寄せる*/
margin-left:.8em;
}
@media screen and (max-width: 1100px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:120px;
}}
@media screen and (max-width: 1023px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:180px;
}}
@media screen and (max-width: 900px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:160px;
}}
@media screen and (max-width: 750px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:130px;
}}
@media screen and (max-width: 600px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:250px;
}
a.entry-card-wrap.a-wrap.border-element.cf{/*画面幅600pxまで、1カラムにする*/
margin:.5em 1em!important;
}
.ect-vertical-card .entry-card-wrap {
width: 95%!important;
}
}
@media screen and (max-width: 480px){/*カード本体*/
.e-card-thumb .cat-label{/*カテゴリラベルを右に寄せる*/
margin-left:1em;
}}
@media screen and (max-width: 1023px){/*画面幅1023未満はカード本体に影を表示*/
div#list a {
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}
}
@media screen and (min-width: 601px) and (max-width: 834px){/*通常記事本文の周囲の空白にも影響している*/
div#content.content.cf{
margin:1em;
}}
h2.entry-card-title.card-title.e-card-title{/*カードタイトル*/
font-size:18px;
color:#7b7b7b;
font-weight:bold;
text-align:center;
line-height:1.8em;
margin-top:3em;
margin-bottom:1em;
padding: 0 1.5em 0;
}
.entry-card-snippet.card-snippet.e-card-snippet{/*スニペット*/
font-size:14px;
color:#7b7b7b;
text-align:center;
border-top:3px dotted #aaa;
line-height:1.8em;
padding-top:0.6em;
margin-left:2em;
margin-right:2em;
margin-bottom:4em;
max-height:20em;
}
@media (max-width:834px){
h2.entry-card-title.card-title.e-card-title{/*カードタイトル*/
font-size: 1.15em;
font-weight:bold;
line-height:1.7em;
padding: 1.5em .8em 1em;
margin:0;
}
.entry-card-snippet.card-snippet.e-card-snippet{/*スニペット*/
font-size:13px;
text-align:center;
border-top:3px dotted #aaa;
line-height:1.8em;
padding:1em 0.5em 0;
margin: 0 1em 1.5em;
}
main.main, div.sidebar {/*モバイル表示などの本文全体の周りの空白にも影響している*/
padding:0;
}
}
a.entry-card-wrap.a-wrap.border-element.cf .post-date,
a.entry-card-wrap.a-wrap.border-element.cf .post-update{/*日付・更新日*/
margin-right:1.5em!important;
color:#7b7b7b;
font-size:.86em;
}
.eye-catch .cat-label, .cat-label{/*カテゴリラベル全体デザイン→display:noneで隠している*/
font-size:.7em;
border-radius:10px;
margin:0.5em;
padding:0 0.5em 0;
background-color:#333;
color:#fff;
display:none;
}
div.admin-pv{/*閲覧数を非表示*/
display:none;
}

/* アピールエリア---------------------------------------------- *
/*全体*/
.appeal-in {
       min-height: 800px;/*パソコンでの高さ調整*/
	min-width:100%;/*幅を最大に*/	
	background-color:rgba(250,250,250,.50);/*背景色、白を透過させる*/
	backdrop-filter: blur(0px);/*ぼかし*/
}
/*コンテンツエリア*/
.appeal-content {
width:100%;/*幅を最大に*/
padding:2em 1em;/*内側余白調整*/
background-color:transparent;/*コンテンツエリアの背景無効化*/
color: #000; /*テキストの色*/
font-size: 1.3em;/*テキストサイズ*/
}

/*アイコンを追加*/
.appeal-button:before{
display:block;
font-family: "Font Awesome 5 Free";
color: #000;/*テキストの色*/
content: "\f078";/*アイコン指定*/
font-size: 1.1em;/*アイコンの大きさ*/
animation: move 1s infinite alternate ease-in-out;/*以下、アイコンを動かすアニメーション*/
}
/*アピールボタンエリア*/
.appeal-button {
	color: #000;/*テキストの色*/
	font-size: 0.7em;/*テキストの大きさ*/
	background-color:transparent;/*ボタンの背景色無効化*/
}

@keyframes move{
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}

/*スムーズにスクロール*/
html { scroll-behavior: smooth;}

/*カテゴリートップページのアイキャッチ画像とカテゴリーの見出しアイコン*/
img.eye-catch-image.wp-category-image{
	display:none;
}


/*下部の矢印アイコン*/
.go-to-top-button {
  color: rgba(100,100,100,50); /*アイコンフォントの色*/
  background-color:#fff; /*背景色*/
  border-radius: 50%; /*丸くする*/
  width: 50px; /*横幅*/
  height: 50px; /*高さ*/
  opacity:0.9; /*透明度*/
  font-size: 35px; /*アイコンフォントのサイズ*/
}
/*ホバー時*/
.go-to-top-button:hover {
  color: rgba(100,100,100,60); /*アイコンフォントの色*/
  background-color:#ddd; /*背景色*/
  opacity:0.6; /*透明度*/
}