@charset "UTF-8";

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

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

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

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

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

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


/* ==================================================================================================== */


/**************************************************
サイド　カテゴリー枠タイトル
**************************************************/

.sidebar h3 {
    background: none;
    font-size: 18px;
    letter-spacing: 2px;
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 0;
    text-align: center;
}
.sidebar h3::before, .sidebar h3::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28%; /*ラインの長さ*/
    border-top: 3px solid #444d53; /*ラインの色*/
}
.sidebar h3::before {
    left: 0;
}
.sidebar h3::after {
    right: 0;
}

/**************************************************
サイド　ウィジェット　カテゴリー
**************************************************/
/*
 * .widget_categories ul li span  {
  visibility:hidden;
}
*/
.widget_categories ul.children li span  {
  visibility:visible;
}

.widget_categories ul li a {
    font-size: 18px;
    color: #333;
    text-decoration: none;
    padding: 8px 0;
    display: block;
    padding-right: 4px;
    padding-left: 14px;
    border-top: 1px dotted #ccc;
    position: relative;
}
.widget_categories ul li a::before {
    font-family: FontAwesome;
    content: "\f0da";
    position: absolute;
	left: 0px;
}

.widget_categories ul.children li a {
    font-size: 14px;
    color: #333;
    text-decoration: none;
    padding: 3px 0;
    display: block;
    padding-right: 4px;
    padding-left: 0px;
    border-top: 1px dotted #ccc;
    position: relative;
}
.widget_categories ul.children li a::before {
    font-family: FontAwesome;
    content: "";
    position: absolute;
	left: 0px;
}

.widget_categories > ul > li > a:first-child {
    border-top: none;
}
.widget_categories > ul > li > a:last-child {
    border-bottom: 1px dotted #ccc;
}
.widget_categories ul li a:hover {
    background: #444d53;
    transition: 0.5s;
    color: #fff;
}

.widget_categories .cf::after {
    display:inline
}


/**************************************************
サイド　ウィジェット　アーカイブ
**************************************************/
#sidebar select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  border: 1px solid #333; /* ボーダーの指定 */
  border-radius: 10px; /* 角丸の指定 */
  padding: 6px 14px; /* 余白の指定 */
  font-size: 14px; /* 文字サイズ */
  color: #333; /* 文字色 */
}
#sidebar select::-ms-expand {
  display: none;
}
#sidebar .widget_archive {
  position: relative;
}
#sidebar .widget_archive::after {
  font-family: FontAwesome;
  content: '\f0d7'; /* アイコンの指定 */
  position: absolute;
  bottom: 0px; /* アイコンの位置 */
  right: 12px; /* アイコンの位置 */
  color: #333; /* アイコンの色 */
}

/* ==================================================================================================== */

/**************************************************
タグクラウド
**************************************************/
.tagcloud a {
    background: none; /*背景を消す*/
    border: 1px solid #ccc; 
    border-radius: 20px; /*角の丸み*/
    color: #555; /*文字色*/
    display: inline-block;
    padding: 3px 10px;
    text-decoration: none;
    font-size: 13px;
    margin: 2px;
    flex: 1 1 auto;
    display: flex;
    justify-content: space-between;
}
.tagcloud a .tag-caption::before {
    content: ""; /*アイコンの変更*/
    padding-right: 3px;
}
.tagcloud a:hover { /*マウスホバー時*/
    background: #444d53;
    border: 1px solid #444d53;
    color: #fff;
    transition: 0.5s; /*アニメーションの時間*/
}
/*
.tag-caption .fa-tag {
    display: none;
}
*/

/**************************************************
サイド　広告枠タイトル
**************************************************/
.sidebar .ad-label {
    background: none;
    font-size: 16px;
    letter-spacing: 2px;
	position: relative;
    width: 100%;
    padding: 0;
    text-align: center;
    margin:10px 0;
}
.sidebar .ad-label::before, .sidebar .ad-label::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 20%; /*ラインの長さ*/
    border-top: 3px solid #444d53; /*ラインの色*/
}
.sidebar .ad-label::before {
    left: 0;
}
.sidebar .ad-label::after {
    right: 0;
}

.ad-area {
	margin-bottom: 0px;
}

/* ==================================================================================================== */

/**************************************************
ページネーション
**************************************************/
/* 次のページ */
.pagination-next-link {
	background-color: #444d53; /*背景色*/
	color: #fff; /*文字色*/
	border: none; /*ボーダーを消す*/
}
.pagination-next-link:hover { /*マウスホバー時*/
	background-color: #aaa;
	color: #fff;
}

.pagination-next-link {
	background-color: #444d53;
	color: #fff;
	border: none;
	border-radius: 30px;
}
.pagination-next-link:hover {
	background-color: #aaa;
	transition: all 0.5s ease;
	color: #fff;
}

/* 数字の部分 */
.page-numbers { /*通常時*/
	color: #444d53;
	border: 1px solid #444d53;
}
.pagination .current { /*現在のページ*/
	background-color: #444d53;
	color: #fff;
}
.page-numbers.dots { /*ドット「…」の部分*/
	opacity: 1;
	background: none;
}
.pagination a:hover { /*マウスホバー時*/
	background-color: #444d53;
	color: #fff;
}

.page-numbers {
	color: #444d53;
	border: 1px solid #444d53;
	border-radius: 50%;
}
.pagination .current {
	background-color: #444d53;
	color: #fff;
}
.page-numbers.dots {
	opacity: 1;
	background: none;
}
.pagination a:hover {
	background-color: #444d53;
	color: #fff;
}
.page-numbers {
  height: 48px;
  line-height: 48px;
  min-width: 48px;
}

@media screen and (max-width: 768px) {
	.page-numbers {
		width: 48px;
		height: 48px;
		line-height: 48px;
	}
}

/* ==================================================================================================== */

/**************************************************
メニューデザインをマテリアル風
**************************************************/
nav#navi, .menu-header .sub-menu{
	background-color: #414f6d;
    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.2);
}
.menu-header .sub-menu .item-label{
    font-size: 80%;
}
.menu-header .item-label{
    color: #fff !important;
}
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
    color: #000 !important;
    border-bottom: 3px solid #1e90ff;
    transition: all .2s ease;
}

.menu-header .sub-menu .menu-item,
.menu-header .sub-menu .menu-item:hover{
    border-bottom: none;
}
.menu-header .current-menu-item>a .item-label,
.menu-header .current-post-item>a .item-label,
.menu-header .current-menu-ancestor>a .item-label,
.menu-header .current-post-ancestor>a .item-label,
.menu-header .item-label:hover{
    color: #fff !important;
    transition: all .2s ease;
}

/* ==================================================================================================== */

/**************************************************
目次タイトルにFontAwesomeアイコン
**************************************************/
.toc .toc-title::before{
	font-family: FontAwesome;
	content: '\f0f6';
	margin-right: .5em;
}

/* ==================================================================================================== */

/* サムネイル画像のサイズ統一化 */
.carousel-entry-card-thumb img { width:180px; height:120px; } /* トップページ：カルーセル画像 */
/* 
.new-entry-card-thumb img { width:120px; height:68px; */ }       /* トップページ：カテゴリごと（2カラム）画像 */

.entry-card-thumb img { width:380px; height:254px; }          /* トップページ&カテゴリーページ：サムネイル画像 */

/* ==================================================================================================== */
/************************/
/*お勧めカード*/
/************************/
#recommended .navi-entry-card-thumb img{
}
#recommended .card-content {
	color: #fff; /*タイトル文字色*/
	background-color: rgba( 0, 0, 0, 0.55 );
}