@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-container-in.hlt-top-menu .logo-header img {
    vertical-align: middle;
}

.new-entry-card-date {
  display: block;
}

/*トップページのみアイキャッチ画像を非表示*/
.home .eye-catch{
display:none;
}

/*ボックスメニューのアイコンの色変更*/
.box-menu-icon{
	color: #27a26b;
}

.box-menu{
	background: #E6FFF2;
}

/* スライドイン背景色（モバイル） */
.mobile-menu-buttons {
background: #3cb371; /* カラーコード */
}

/*スライドインメニューをカスタマイズ*/
.navi-menu-content{
	background-color: rgba(39,162,107,0.9);
}

.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(39,162,107,0);
}

/*モバイルメニューアイコン*/
.mobile-menu-buttons {
//background: ;
color: white;
}

.mobile-menu-buttons .menu-button > a {
color: white;
}

/*スマホのサイドバーメニューを左から右に表示*/
.sidebar-menu-content {
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
  right: auto;
  left: 0;
} 

/************************************
** ■メニュー／サイドバーのCLOSEボタンのカスタマイズ（常時表示対応）
************************************/
.menu-close-button { /*サイドバー*/
  overflow: visible!important; /*ボックス範囲内指定*/
  position: sticky!important; /*スクロール追従*/
  z-index: 99999!important; /*最前面に指定*/
  top: 50px; /*表示位置*/
  background: rgba(0,0,0,0.2); /*背景色*/
//  background: rgba(255,238,247,0.2); /*背景色*/
  width: 91%; /*横幅*/
  transform: scale(1.2); /*拡大表示*/
}
.menu-content .menu-drawer { /*メニュー*/
  padding:90px 1em 30px; /*上マージン調整*/
}
.menu-content .fas.fa-times { /*×アイコン*/
  padding-left: 30px; /*左側間隔調整*/
}


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

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

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