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

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

/* tablet  */
@media only screen and (min-width: 641px) and (max-width: 960px){
	.recommended .navi-entry-cards {
  flex-wrap: nowrap;
}
.recommended .navi-entry-cards a {
  width: auto;
}
}

/* パンくずリストの背景色 */
#breadcrumb.breadcrumb {
	background-color: rgba(90,50,30,0.5);
  color: #fff;
}
/* 「HOME」を消す */
#breadcrumb.breadcrumb .breadcrumb-home a span{
	font-size: 0px;
}
/* 「HOME」を挿入 */
#breadcrumb.breadcrumb .breadcrumb-home a span::before{
	font-size: 13px;
	content: "HOME";
	color: #fff;
}
/* ホームのアイコンを消す */
#breadcrumb.breadcrumb .breadcrumb-home .fa.fa-home.fa-fw{
	display: none;
}
/* 「取材メモ」を消す */
#breadcrumb.breadcrumb .breadcrumb-item a span{
	font-size: 0px;
}
/* 「取材メモ」を挿入 */
#breadcrumb.breadcrumb .breadcrumb-item a span::before{
	font-size: 13px;
	content: "取材メモ";
	color: #fff;
}
/* 取材メモのアイコンを消す */
#breadcrumb.breadcrumb .breadcrumb-item .fa.fa-file-o.fa-fw{
	display: none;
}
/* カテゴリのアイコンを消す */
#breadcrumb.breadcrumb .fa.fa-folder.fa-fw{
	display: none;
}


/* PCグローバルナビメニュー背景色 */
/* グラデーション 表示 */
#navi .navi-in > ul { 
   background: linear-gradient(to bottom, #5e4131, #3e2111);
}

/*ヘッダーの色と高さ、アイコンの位置を調整*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: rgba(71,50,35,1);
	color: #FFFFFF;
	height: 58px;
	padding-top: 8px;
}

.logo-menu-button.menu-button{
	background-color: rgba(71,50,35,1);
	height: 58px;
}
/*768px以下でロゴの大きさ変更*/
@media screen and (max-width: 768px){
img.site-logo-image{
	width: auto-flow;
	margin: 8px auto 0;
}
}
/*スライドインメニューをカスタマイズ*/
.navi-menu-content{
	left: auto;
	right: 0;
	background-color: rgba(71,50,35,0.5);
	transform: translateX(101%);
}

.menu-drawer a{
	font-size: 1.1em;/*文字の大きさ*/
	color: #fff;/*文字の色*/
	height: 3em;/*行の高さ*/
}

.menu-drawer a:hover{
	color: rgba(255,255,255,0.7);
	background-color: rgba(71,50,35,0);
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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