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

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

/* header */
.tagline {
  text-align: right;
}

.logo {
  text-align: left;
}

.navi-in > ul {
  flex-wrap: nowrap;
  /* padding: 20px 10px; */
}
.menu-header .item-label {
  font-size: 16px;
}
#navi .navi-in > ul > li > a {
  padding: 0 15px;
}

#header-container .navi .item-label::after {
  content: "";
  width: 80%;
  height: 2px;
  border-radius: 1px;
  background: #2277d8;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

#header-container .navi .item-label:hover::after {
  opacity: 1;
  transform: translateY(-5px);
  transition: 0.4s;
}

/* フロントページ */
#post-5393 .entry-header{
  display: none;
}

.new-entry-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.new-entry-card-link {
  width: 32%;
}

.new-entry-card-date {
  display: block;
}
.widget-entry-card-date::before{ /*投稿日のアイコンの変更*/
	font-family: "Font Awesome 5 Free";
	content: "\f017"; /*fa-clockアイコン*/
	font-weight: 400; /*アイコンの種類regular*/
	padding-right: 0px; /*右余白*/
	font-size: 14px; /*フォントサイズ*/
}
.widget-entry-card-update-date::before{ /*更新日のアイコンの変更*/
	font-family: "Font Awesome 5 Free";
	content: "\f1da"; /*fa-historyアイコン*/
	font-weight: 900; /*アイコンの種類solid*/
	padding-right: 5px; /*右余白*/
	font-size: 14px; /*フォントサイズ*/
}

.entry-footer {
  display: none;
}

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

  .slicknav_menu {
    background: #2277d8;
  }
  .slicknav_btn {
    background-color: #2277d8;
  }
}

/*834px以下*/
@media screen and (max-width: 834px) {
  
  /*必要ならばここにコードを書く*/
  .new-entry-card-link {
    width: 48%;
  }
}

/*480px以下*/
@media screen and (max-width: 480px) {
  /*必要ならばここにコードを書く*/
  
  .new-entry-card-link {
    width: 90%;
  }
  .new-entry-cards {
    justify-content: center;
  }

}