@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.wrap {
	margin-right: 50px;
    width: auto;
}

/** グローバルナビメニューの高さを修正 **/
#navi .navi-in > ul li{
	height: 50px;
	line-height: 50px;
}

/* メニュー(skin)のカラーの設定 */
:root {
	/* --secondary-color: 164, 234, 143; */
	--primary-color: 127, 191, 133;
	--secondary-color: 127, 191, 133;
}

.user-h2 {
  font-size: 25px !important;/*文字のサイズ*/
  background: rgba(50,50,50,.07);/*背景色*/
  border-bottom: 3px solid #323232;/*下線*/
  color: #323232;
  padding: .5em .7em;
  margin-bottom: 15px;
  border-top: none;
}
/** 固定ページの投稿日,更新日を非表示にする **/
.page .date-tags {
display: none;
}


/** Naviカードのカスタマイズ **/
.navi-entry-card:hover { /*マウスオン時*/
/* background-color: #e5f2ff; 背景色*/
background-color: rgba(164,234,143,0.3); /*背景色*/
-webkit-transform: translateY(-3px);
-ms-transform: translateY(-3px);
transform: translateY(-3px);
box-shadow: 0 0 10px #3d5069; /*影の色*/
}
/*オンマウスで傾ける*/
.navi-entry-cards img {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.navi-entry-card img:hover {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}

/** Naviエリア「おすすめの記事」の下の空白が多すぎるので詰める(16px→0px) **/
.widget_navi_entries {
	padding-bottom: 0px;
}







/** エントリーカードのカスタマイズ **/
.new-entry-card:hover { /*マウスオン時*/
/* background-color: #e5f2ff; 背景色*/
background-color: rgba(164,234,143,0.3); /*背景色*/
-webkit-transform: translateY(-3px);
-ms-transform: translateY(-3px);
transform: translateY(-3px);
box-shadow: 0 0 10px #3d5069; /*影の色*/
}
/*オンマウスで傾ける 0.5 to 4.0 */
.new-entry-cards img {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.new-entry-card img:hover {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.entry-card:hover { /*マウスオン時*/
/* background-color: #afc5dc; 背景色*/
background-color: rgba(164,234,143,0.3); /*背景色*/
-webkit-transform: translateY(-3px);
-ms-transform: translateY(-3px);
transform: translateY(-3px);
box-shadow: 0 0 10px #3d5069; /*影の色*/
}
/*オンマウスで傾ける*/
.entry-cards img {
-webkit-transition: all 3.0s ease;
transition: all 3.0s ease;
}
.entry-card img:hover {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.prev-post:hover { /*マウスオン時*/
/* background-color: #afc5dc; 背景色*/
background-color: rgba(164,234,143,0.3); /*背景色*/
-webkit-transform: translateY(-3px);
-ms-transform: translateY(-3px);
transform: translateY(-3px);
box-shadow: 0 0 10px #3d5069; /*影の色*/
}
/*オンマウスで傾ける*/
.prev-post img {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.prev-post img:hover {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.next-post:hover { /*マウスオン時*/
background-color: rgba(164,234,143,0.3); /*背景色*/
/* background-color: #afc5dc; 背景色*/
-webkit-transform: translateY(-3px);
-ms-transform: translateY(-3px);
transform: translateY(-3px);
box-shadow: 0 0 10px #3d5069; /*影の色*/
}
/*オンマウスで傾ける*/
.next-post img {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.next-post img:hover {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}

/*見出し(H2レベル)Topマージン
 *スマホでは間が空きすぎのため
 *2.4em→1.0emへ修正
*/
.article h2 {
    margin-top: 1.0em;
}

/* 見出し(H2レベル)のマージンBottomを半分へ */
.article h2 {
    margin-bottom: 0.81em;
}

/* Cocoonトグル設定の変更
 左揃え, (0.7→0.3ms) */
.toggle-button { text-align: left;
}
.toggle-wrap .toggle-content {
transition: all 0.3s ease;
}
.toggle-checkbox:checked ~ .toggle-content {
transition: all 0.3s ease;
}

/* ロゴ上下余白の修正(縦位置を中央にする) */
.logo-header {
	/** text-align: left; **/
	/* padding: 15px 0 15px 0;
	margin: 15px 0 15px 0; */
}

/* サイドバー(画像ウィジェット)の表示位置をセンターへ変更 ← スマホ表示のとき左詰めになるため */
.widget_media_image {
	text-align: center;
}

/* 固定ページのアイキャッチ画像の上に余白を設定 */
.article.article {
    padding-top: 10px;
}

/*見出し(H1レベル)上のスペースを縮める (30px 0px 15px)→(5px 0px 5px) */
h1.entry-title{
 Padding: 5px 0px 5px;
}

/** アーカイブウィジェットのカスタマイズ **/
#archive-title{ 
  padding-bottom:8px; /*下に余白*/
  font-size: 24px; /*フォントサイズ*/
  text-align: center; /*文字位置中央*/
  letter-spacing: 2px; /*文字間隔*/
}

/** アーカイブ本文(年月、件数)の文字サイズ変更(14px→20px) **/
.sidebar .widget li a {
    font-size: 20px;
}
#sidebar select {
  border-width: 3px;
}

/** 検索ボックス **/
.search-edit, input[type="text"] {
 border-width: 3px ; 
}

/** アーカイブのタイトル(下線削除) **/
h3.widget-sidebar-title.widget-title::before {
	  display: none;
}
.sidebar h3 {
  background-color:#99ffcc;
	color: #000000;
  padding: 0px 0px;
  margin: 0px 0px;
	border-radius: 5px;
}

/** フッター部のＡ要素のアンダーラインを消す **/
#footer a {
	text-decoration-line: none;
}
/** フッター部のＡ要素のホバー時のカバー色設定 **/
#footer .widget a:hover {
	background-color: rgba(240,240,232,0.7);
}
/** フッター余白を削除 **/
.footer-bottom {
	 margin-top: 0px;
}

/** スマホ表示のとき、メニュー表示を変更する **/
.menu-drawer a{
    font-size: 1.3em;
    /* color: #fff; */
    color: #000000;
    height: 2em;
}
.menu-drawer a:hover{
    /* color: rgba(255,255,255,0.7); */
    color: rgba(0,0,0,0.7);
    /* background-color: rgba(30,124,209,0); */
}


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

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

/*480px以下*/
/** スマホ表示のスペース調整＆ロゴサイズ調整 **/
@media screen and (max-width: 480px){
	#main {
		margin: 0px 0px 0px 0px;
		padding: 16px 16px 16px 16px;
	}
	#sidebar {
		margin: 0px 0px 0px 0px;
		padding: 0px 10px 0px 10px;
	} 
	#breadcrumb {
		margin: 10px 5.2px 5px 5.2px;
	} 
	.logo-header img {
		height: 56px;
		width: auto;
	}
}