@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.1
*/

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


/*カテゴリーウィジェットからぴよ吉４コマ漫画と犬猫１コマを非表示*/
.cat-item.cat-item-10,.cat-item-XX{display:none;}


/* スパム対策のreCAPTCHAのロゴを非表示 */
.grecaptcha-badge { visibility: hidden; }


/* 画像の枠線 */
.sen {
border: solid 1px #2c2c2e; /* 枠線のスタイル 太さ 色 */
}

/* サイドバー 文字サイズ */
.widget-sidebar ul li a {
font-size: 0.8em;
}

.widget p {
	font-size: 16px;
}



/* ヘッダーのタイトル位置変更 */
.header-in {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.header-in .tagline {
text-align:center;
	padding-top: 1em;
	margin-bottom: 0;
}

.header-in .logo {
text-align: center;
	padding-top: 0;
	margin-top: 0;
	
}



/************************************
** 目次
************************************/

.toc {
  display: block;
  padding: 0px;
  max-width: 600px;
  border: 1.2px #e6e1e1 solid !important;
  font-family: 'Noto Sans JP', sans-serif;
}
.toc-title {
  position: relative;
  padding: 10px 0;
  background: #e6e1e1;
  color: #fff;
  font-weight: bold;
}
.toc .toc-content {
  padding: 15px 20px;
  background-color: #ffffff;
}
.toc-list > li li a {
  font-weight: normal;
  font-size: 95%;
  color: #828282;
  margin-left: -10px;
}
.toc-list > li li ::before {
  content: '';
  width: 5px;
  height: 5px;
  display: inline-block;
  left: -15px;
  border-radius: 100%;
  background: #cdcdcd;
  position: relative;
  margin-bottom: 2px;
}
.article .toc-list > li li {
  list-style: none;
}

/************************************
** 見出し
************************************/
.entry-content h2 {
padding: 1em;/*文字周りの余白*/
color: #fff9f9;/*文字色*/
background: #f5b4a9;/*背景色*/
border-left: solid 5px #f5b4a9;/*左線（実線 太さ 色）*/
}

.entry-content h3 {
padding: 0.5em 0;/*上下の余白*/
padding-left: 0.5em;/*文字左側の余白*/
border-top: solid 3px #de7676;/*上線*/
border-bottom: solid 3px #de7676;/*下線*/
border-left: none;/*左線（実線 太さ 色）*/
}


.entry-content h4 {
/*線の種類（二重線）太さ 色*/
border-bottom: double 5px #de7676;
border-top: none;/*上線*/
}

.entry-content h5 {
/*線の種類（点線）2px 線色*/
border-bottom: dashed 2px #de7676;
}


/************************************
** サイドバー 見出し
************************************/

.sidebar h3{
background-color:#f5b4a9;/*好きな背景色にする*/
padding:16px 10px;
margin:16px 0;
color: #fff9f9;/*文字色*/
}




/************************************
**　コンテンツ上部 ボックスナビ メニュー
************************************/

/* 横並びにするための幅の設定 */
.wwa .box-menu {
    width: calc(100%/6); /* メニューの数 */
}


/* オンマウス時の設定 */
.box-menu:hover{
    box-shadow: none; /* 枠線を消す */
    background: #F2F0EE; /* 背景色 */
}


.box-menu-label{
	font-size: 14px; /* 文字サイズ */
	}

/* 文字色の設定 */
.box-menu-label {
color:#858483;
}



/************************************
**　ヘッダーメニュー
************************************/

/*３DCGカテゴリーのみヘッダーメニュー非表示*/
.category-8 nav,
.category-1484 nav,
.category-1160 nav,
.category-1381 nav,
.category-962 nav,
.category-1382 nav { display:none; } 


/*３DCGカテゴリー内の各ページで ヘッダーメニュー非表示*/
.categoryid-8 nav,
.categoryid-1484 nav,
.categoryid-1160 nav,
.categoryid-1381 nav,
.categoryid-962 nav,
.categoryid-1382 nav { display:none; }




#navi .navi-in a:hover{/*ヘッダーメニュー ホバー時の色*/
	color: #bc8f8f!important;
	background: #f8f8ff;
	border-bottom:solid 2px #87d6d6;
	transition: all 0.5s ease-in;
	font-weight:bold;
}

.navi-in>ul li {/*ヘッダーメニューの高さ*/
line-height: 50px;
height: 50px;
}

.navi-in a{/*ヘッダーメニューのフォントサイズ*/
font-size:15px;
}


.sub-menu{/*サブメニュー*/
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
.sub-menu .caption-wrap {/*サブメニューを仕切る点線*/
color:#a9a9a9;
border-top: dotted #dddddd;
padding:0 0 0 1em;
margin:0;
}

.navi-in > ul .sub-menu a:hover {
transform: none!important;
background: #f8f8ff;	
}

div.item-label{/*メニューの文字を太字に*/
font-weight:bold;
}


/************************************
****　インデックス ここから
************************************/
.entry-card-wrap {
  background-color: #fff!important; /* カード背景色*/
}


a.entry-card-wrap.a-wrap.border-element.cf{/*カード本体*/
padding:0 0.0em;
border-radius:200px;
width:48.8%;
margin-bottom:2em;
}
a.entry-card-wrap.a-wrap:hover {
transform: translateY(-1px);
transition: all .3s;
background-color: #fff;
}

@media screen and (max-width: 600px){/*モバイルではカードを四角に*/
a.entry-card-wrap.a-wrap.border-element.cf{/*カード本体*/
padding:0 0.0em;
border-radius:20px;
width:48.8%;
margin-bottom:2em;
}
}

figure.entry-card-thumb.card-thumb.e-card-thumb{/*サムネイル大きさ*/
max-height:450px;
border-radius:10px 10px 0 0/ 10px 10px 0 0;
overflow:hidden;
display: flex;/*位置をflexで中心に*/
justify-content: center;
align-items: center;
}

@media screen and (max-width: 1100px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:450px;
}}
@media screen and (max-width: 1023px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:450px;
}}
@media screen and (max-width: 900px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:450px;
}}
@media screen and (max-width: 750px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:450px;
}}
@media screen and (max-width: 600px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:450px;
}
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: 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:1em;
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:4px dotted #b59e96;
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 #7b7b7b;
line-height:1.8em;
padding:1em 0.5em 0;
margin: 0 1em 1.5em;
}
main.main, div.sidebar {/*モバイル表示などの本文全体の周りの空白にも影響している*/
padding:0 0.5em 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{/*カテゴリラベル全体デザイン*/

font-size:.8em;
border-radius:20px;
margin:0em;
padding:0 0.5em 0;
background-color:#ffffff;
color:#4d5063;
}
div.admin-pv{/*閲覧数を非表示*/	
display:none;
}
/************************************
****　インデックス ここまで
************************************/






/*エントリーカードのドロップシャドウ */
.entry-card-wrap {
	border-radius: 2px;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
	transition-duration: 0.3s;
}

.a-wrap {
	border-radius: 2px;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
	transition-duration: 0.3s;
}



/************************/
/*エントリーカード*/
/************************/

/* エントリーカード ホバー時に半透明表示 */
.entry-card-wrap:hover{
	background-color: transparent!important;
	opacity: 0.4;
}




/************************/
/*ブログカード『続きを読む』*/
/************************/

.blogcard {
	padding: 1rem;
	color: #666; /* 内部ブログカードの文字色 */
	position: relative;
	border-color: #dfebed!important; /* 内部ブログカード 枠線の色 */
}

a.blogcard-wrap:hover{
	background-color: transparent!important; /* 内部ブログカード ホバー時に明るく（透明表示） */
	opacity: 0.8;
}

a.blogcard-wrap:hover img.blogcard-thumb-image{
	transform: scale(1.2); /* 内部ブログカード ホバー時にアイキャッチ画像を拡大表示 */
	transition: .3s; /* 内部ブログカード ホバー時に浮かせる */
}

.blogcard-thumbnail {
	line-height: 0;
	margin-right: 1rem;
	overflow: hidden;
}

.blogcard-title{
	margin-bottom: .5rem;
}

.blogcard-snipet{
	font-size: 70%;
	line-height: 1.7;
	padding-right: 10%;
}


.internal-blogcard-footer{
	display: none; /* 内部ブログカードのアイコンとURLを非表示 */
}



.internal-blogcard::after{
	content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 70%;
	background-color: #9fc9c9; /* 内部リンク右下の続きを読むの背景色 */
	padding: .4em 3em;
	font-weight: bold;
	color: #fff; /* 内部リンク右下の続きを読むの文字色 */
	border-radius: 2px;
}





/************************
/ ブログカード
/************************/
.a-wrap {background-color: #ffffff;} /* 内部ブログカードの背景色 */
.a-wrap .blogcard {border-color: #b8c2d9;} /* 内部ブログカードの枠線の色 */

.a-wrap:hover {
background-color: #fcf6f0; /* ナビカード ホバー時の色 */
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
box-shadow: 0 0 8px #d1d7e8;
}

.ecb-entry-border
.entry-card-wrap,
.recb-entry-border
.related-entry-card-wrap,
.tagcloud a,
.author-box,
.comment-reply-link,
.ranking-item{
  border-color: #506185;
}

/* ブログカード拡張 */
.blogcard-label::after {
color: #ffffff!important; /* 内部ブログカード ラベル文字色 */
}
.blogcard-label.internal-blogcard-label {
background-color: #708090!important; /* 内部ブログカード ラベル背景色 */
}



/* ------------------------------------- */
/*  もしも　かんたんリンク カスタマイズ  */
/* ------------------------------------- */

/*　文字サイズ変更　*/
div.easyLink-box div.easyLink-info p.easyLink-info-btn a{
	 font-size: 11px !important;
}

/*　PC　画像サイズ変更　*/
div.easyLink-box div.easyLink-img,
div.easyLink-box div.easyLink-img p.easyLink-img-box,
div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht{
         max-width: 160px !important;
         max-height: 130px !important;
         margin: auto;
}

/*　モバイル　画像サイズ変更　*/
@media screen and (max-width: 480px) {
.easyLink-img {
    overflow: hidden !important;
    height: 260px !important;
}
}


/*　ボタンの色指定　*/
.easyLink-info-btn-amazon {
    color: #fff !important;
    background: #333e48 !important;
  }
  .easyLink-info-btn-rakuten {
    color: #fff !important;
    background: #bf0000 !important;
  }
  .easyLink-info-btn-yahoo {
    color: #ff0027 !important;
    background: #fff !important;
    border: solid 1.4px #ccc !important;
  }

/* ボタン色_マウスオーバー時 */
a:hover.easyLink-info-btn-amazon {
    opacity: 1 !important; /* 透明度 */
    background: #b8b8b8 !important; /* 背景色 */
}
a:hover.easyLink-info-btn-rakuten {
    opacity: 1 !important; /* 透明度 */
    background: #eb8f8f !important; /* 背景色 */
}
a:hover.easyLink-info-btn-yahoo {
    opacity: 1 !important; /* 透明度 */
    background: #f0f0f0 !important; /* 背景色 */
    color: #51a7e8 !important; /* 文字色 */
}



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

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

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



	
/* アピールエリアをモバイルで非表示 */
@media screen and (max-width: 769px) {
	div.appeal-in {
		display: none;
	}				

	
/* モバイル用　ボックスナビの設定 */

    .box-menus .box-menu {
	width: calc(100%/2); /* メニューの数 */
	}
    .box-menu-label{
	font-size: 14px; /* 文字サイズ */
	}

	
	
	
		
/*モバイル　キャッチフレーズ テキストサイズ変更*/
  .tagline {
      font-size: 12px;
	  color: #ffffff;
	  padding-top: 12px;
	  padding-bottom: -6px;
}	
	
	
/* モバイル 見出し2 フォントサイズ変更 */
.article h2 {
font-size: 10pt;
}

}	



/* --------- モバイル用　ヘッダースクロールメニュー --------- */
@media screen and (max-width: 480px){
	/* モバイルトップメニュー */
	ul.menu-mobile{
		overflow-x: auto;
		overflow-y: hidden;
		display: flex !important;
		flex-wrap: nowrap;
		font-size: 14px;
		justify-content: flex-start;
		padding: 0 0em;
		-webkit-overflow-scrolling: touch;
		position: relative;
	}

	ul.menu-mobile > li{
		padding-right: 0em;
		white-space: nowrap;
	}
	ul.menu-mobile　.item-label{
		white-space: nowrap;
		font-size: 14px;
	}

}

/************************************
** ヘッダー・フッターモバイルボタン
************************************/

/* モバイル用 サイドバーの文字色指定 */
.sidebar{
	color:#94918e !important;
}


/*背景色・文字色変更*/
.mobile-menu-buttons,
.mobile-menu-buttons .menu-button > a {
    background-color:#918e8f;
    color: #ffffff;
}


/*モバイル ボタンの位置を下げる（ヘッダーのみ）*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	height: 60px;
	padding-top: 12px;
}

/* モバイル タイトルロゴの高さ テキストサイズ指定 */
.logo-menu-button.menu-button{
	height: 60px;
	font-size: 16px;
}