@charset "UTF-8";
@keyframes fadeIn { /*「fadeIn」と名前をそろえる*/
    0% {opacity: 0} /*アニメーション開始時は完全に透過*/
    100% {opacity: 1} /*アニメーション終了時は透過しない*/
}

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

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

/************************************
** 見出しタグのスタイル
************************************/
/*見出しフォント*/
#navi a,
.header-in .tagline,
h1.entry-title,
h2.entry-card-title,
.new-entry-card-title,
.wprm-recipe-container h2,
.wprm-recipe-container h3,
.wprm-recipe-container h4{
	 font-family:游明朝,"YU Mincho",serif !important;
}

/*見出し*/
.article h2,
#sidebar h3{
  background: none;
	font-family:'Major Mono Display', 游明朝,"YU Mincho",serif;
	position:relative;
}
.article h2{
	margin-left:30px;
}
.article h2:before{
    content: '';
    height: 2px;
    width: 25px;
    display: block;
    background-color: #333;
    position: absolute;
    left:-5px;
	bottom: 50%;
    }
h2.wprm-recipe-name:before{
	display:none !important;
}
#sidebar h3{
	text-align:center;
	position:relative;
}
#sidebar h3:after{
    content: '';
    height: 2px;
    width: 30px;
    display: block;
    background-color: #c0b283;
    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translateX(-50%);
}
.article h3,
.taxonomy_title{
	border:none;
}
.article h4{
  font-size:18px;  
  font-weight:100;
	border:none;
}
.article h5{
  font-size:17px;
  padding:0 10px;
  border-left:5px solid #58656e;
  font-weight:100;
}
.archive-title .fa-folder-open:before{
	display:none;
}
/************************************
** 基本設定（General Setting）
************************************/
/*エントリーカードホバー色*/
.a-wrap:hover {
	background-color: #c0b2832e;
}
/* リンク<a>装飾 */
a {
  	text-decoration: none;
}
a:hover{
color:#b56767;
}
/* アイキャッチカテゴリーラベル非表示 */
.entry-card .cat-label,
.related-entry-card .cat-label{
  display: none;
}
/* カテゴリーラベル */
.cat-link{
	background-color:#f6f6f6;
	color:#222;
}
/* ページネーション */
.pagination-next {
  display: none;
}
.page-numbers {
  	border-radius: 50%;
    border: none;
	background: #f6f6f6;
}
.pagination a:hover {
	background-color: #e4ecf2;
}
/* コメントを書き込む */
.comment-btn {
    background-color: #F2F2F2;
    border: none;
    color: #000020;
}
/*記事一覧系ウィジェットの文字サイズと中央揃え解除*/
.new-entry-cards, .widget-related-entry-cards {
    text-align: inherit;
}
.widget-entry-card {
    font-size: 0.8em;
}
/************************************
** ヘッダーナビ
************************************/
#header-in .logo-header img {
    height: auto;
}
/*固定*/
.header-container{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.header-container.fixed
{
    position: fixed;
    top: 0;
    z-index: 10000;
	opacity:0.9;
	padding:20px 0;
}
/*文字サイズ*/
.navi ul.sub-menu li a{
	font-size:14px;
}
/*下線*/
.navi-in a:hover {
    background:none;
	border-bottom:solid 1px #c0b283;
	transition: all .2s ease;
}
.navi-in>ul .sub-menu {
    background-color: #fff;
    opacity: 0.95;
	padding-bottom:3px;
}
/************************************
** 人気ランキングウィジェット表示
************************************/
.widget-entry-cards.ranking-visible .card-thumb::before {
    background-color: transparent !important;
	color:#333;
    font-family: 'ZCOOL XiaoWei';
	font-size: 15px;
	font-style: italic;
	z-index:3
}
.popular-entry-card::before{
	content: "";
    border-bottom: 24px solid transparent;
    border-right: 24px solid transparent;
    border-top: 24px solid #EFECE9;
    border-left: 24px solid #EFECE9;
    opacity: 0.9;
    top: 3px;
    position: absolute;
	z-index:1
}
/************************************
** SNSシェアボタン
************************************/
.sns-buttons a{
	color:#4b4a4a;
	background-color:#fff;
}
.sns-share.ss-high-and-low-lc a .button-caption{
	display:none;
}
/* ホバー時 */
.sns-buttons a:hover{
	color:#4b4a4a;
}
.sns-buttons .icon-twitter:hover{
	color:#55acee;
}
.sns-buttons .icon-facebook:hover{
	color:#3b5998;
}
.sns-buttons .icon-hatena:hover{
 color:#3C7DD1;
}
.sns-buttons .icon-pocket:hover{
 color:#EE4257;
}
.sns-buttons .icon-feedly:hover{
 color:#87bd33;
}
.sns-buttons .icon-line:hover{
 color:#00c300;
}
.sns-buttons .icon-pinterest:hover{
 color:#be0c33;
}
.sns-buttons .copy-button:hover{
 color:#4b4a4a;	
}
/************************************
** カエレバ、ヨメレバ
************************************/
.kaerebalink-box,
.booklink-box{
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
padding:10px;
}
.shoplinkamazon a,
.shoplinkkindle a,
.shoplinkrakuten a,
.shoplinkrakukobo a,
.shoplinkyahoo a{
	color:#fff;
	display:block;
	background:#ccc;
	font-weight:normal;
}
.shoplinkamazon a:hover,
.shoplinkkindle a:hover{
background:#516c8f;
}
.shoplinkrakuten a:hover,
.shoplinkrakukobo a:hover{
background:#cc7980;	
}
.shoplinkyahoo a:hover{
background:#ddb358;
}
.article .kaerebalink-link1 img, .article .booklink-link2 img{
display:block;
margin:0 auto !important;
text-align:center;
}
.kaerebalink-link1 a:hover, .booklink-link2 a:hover, .tomarebalink-link1 a:hover, .product-item-buttons a:hover{
	opacity:1;
}



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

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
.header-container.fixed{
    top: 0;
    z-index: 0;
	opacity:1;
	padding:0;
	display: flex;
    justify-content: space-between;
    width: 100%;
}
.mobile-header-menu-buttons {
	justify-content:space-between;
	opacity:0.85;
}
.mobile-header-menu-buttons .logo-menu-button{
		display:none;
}
.mobile-header-menu-buttons .logo-menu-button.show{
		display:block;
	    animation:fadeIn 2s ease;
}
.logo-header.logo-image.hide{
		display:none;
}
.logo-header.logo-image{
		display:block;
}
	
}
/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
		/*見出しフォント*/
#navi a,
.header-in .tagline,
h1.entry-title,
h2.entry-card-title,
.new-entry-card-title,
.wprm-recipe-container h2,
.wprm-recipe-container h3,
.wprm-recipe-container h4{
	 font-family:游明朝,"YU Mincho",serif !important;
}

/*見出し*/
.article h2:before{
    width: 22px;
    left:-8px;
}
}

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