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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* 固定ページの日付非表示 */
.page .date-tags{
	display: none;
}

/* 固定ページのタイトルを中央寄せ */
.entry-title {
	margin-bottom: 2em;
	text-align: center;
}
/************************************
** グローバルナビメニュー
************************************/

/*マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
  position: absolute;		/*線の位置を絶対配置に*/
  content: "";				/*文字はなし*/
  left: 0px;				/*線の位置*/
  bottom: 1px;				/*線の位置*/
  height: 2px;				/*線の高さ*/
  width: 100%;				/*幅いっぱいに線を引く*/
  background: #ffff00;		/*線の色*/
  transform: scale(0,1);	/*マウスオーバーの前は線を消す*/
  transition: 0.3s;			/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
  transform: scale(1);		/*マウスオーバー後、線を100%出す*/
}

/*選択中のカテゴリーにアンダーライン*/
.current-menu-item:not(:first-child):after{
  position: absolute;		/*線の位置を絶対配置に*/
  content: "";				/*文字はなし*/
  left: 0px;				/*線の位置*/
  bottom: 1px;				/*線の位置*/
  height: 2px;				/*線の高さ*/
  width: 100%;				/*幅いっぱいに線を引く*/
  background: #ffff00;		/*線の色*/
}

/*マウスオーバー時のメニューの色を変更*/
#navi .navi-in a:hover{
	color: #000000!important;
	background:	#FFBFB1;
	transition: all 0.2s ease;
}

/************************************
** 見出しのスタイル
************************************/

.article h2 {
  padding: 0.5em 1em;				/*文字の上下 左右の余白*/
  color: #494949;					/*文字色*/
  background: #FFF8F4;				/*背景色*/
  border-left: solid 5px #ffaf58;	/*左線*/
}

.article h3 {
  padding: 0.5em 1em;				/*文字の上下 左右の余白*/
  color: #494949;					/*文字色*/
  border-top: solid 2px #ffaf58;	/*上線*/
  border-right: solid 2px #ffaf58;	/*左線*/
  border-left: solid 5px #ffaf58;	/*左線*/
  border-bottom: solid 2px #ffaf58;	/*下線*/
}

.article h4 {
  padding: 0.5em 1em;				/*文字の上下 左右の余白*/
  color: #494949;					/*文字色*/
  border-top: solid 2px #ffaf58;	/*上線*/
  border-bottom: solid 2px #ffaf58;	/*下線*/
}

.article h5 {
  padding: 0.5em 1em;				/*文字の上下 左右の余白*/
  color: #494949;					/*文字色*/
  border-bottom: solid 2px #ffaf58;	/*下線*/
}

.article h6 {
  padding: 0.5em 1em;				/*文字の上下 左右の余白*/
  color: #494949;					/*文字色*/
  border-bottom: solid 1px #ffaf58;	/*下線*/
}

/************************************
** サイドバー見出しのスタイル
************************************/

.sidebar h3 {
  padding: 0.5em 1em;				/*文字の上下 左右の余白*/
  margin-top: 5px;
  color: #494949;					/*文字色*/
  background: #FFF8F4;				/*背景色*/
  border-left: solid 3px #ffaf58;	/*左線*/
  font-size: 16px; 					/*文字サイズを小さく*/
  letter-spacing: 2px; 				/*文字の間隔を少し広く*/
}

/************************************
** サイドバーSNSボタンのスタイル
************************************/
.sidebar .sns-follow-buttons a {
  width: 70px;
  height: 35px;
}
.sidebar .sns-follow {
  margin: 0 0 24px 0;
}
.sidebar .sns-follow-buttons a {
  border-radius: 5px;
}

/**********************************************
** 固定ページの新着記事一覧(new_list)を
** 2カラム表示にする
**********************************************/
.new-entry-cards.fp-new-entry-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
}

.fp-new-entry-cards .new-entry-card-link.a-wrap {
    display: inline-block;
    width: 49.5%;
}

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

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

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