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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*グローバルナビが固定された場合ロゴを非表示にする*/
.fixed-header .logo {
	display: none;
}

/* おすすめカードの下に点線 */
.recommended .navi-entry-cards {
	border-bottom: 2px dotted #8dcc10;
	padding-bottom: 20px;
}

/* メニューのホバー時の色を黄色っぽく */
#navi .navi-in a:hover {
    background-color: #bfdbbd;
}

/* 全ての文字をzen marunに */
p, h1, h2, h3, h4, a {
	font-family: "Zen Maru Gothic", sans-serif;
}


/* カテゴリーのマークを緑の丸に */
.widget_categories ul li a::before {
	content: "\f111";
    font-size: 8px;
    color: #8dcc10;
}

/* 本文h2をシンプルに */
.article h2 {
	border-width: 0 0 2px 0;
	border-color: rgb(46 46 46 / 80%);
}

/* 本文h2の先頭の数字を削除・アンダーラインの色削除 */
.article h2::before,
.article h2::after {
	content: none;
}

/* サイドバーのH3をシンプルなデザインに */
.sidebar h3 {
	color:#484848;
	border: none;
	background: #fff;
	font-family: "Outfit", sans-serif;
}

/* ヘッダーの上に余白をつける */
.header-container {
	padding-top: 20px;
}

/* ヘッダーメニューを右揃えにして位置を調整 */
.navi-in > ul {
    padding: 0 10px 0 0;
	justify-content: flex-end;
}

/* カードのカテゴリ名のポジション調整 */
.eye-catch .cat-label {
    top: 1em;
    left: 1em;
}

/* 記事カードとカテゴリ名の文字太さ調節・カードの角を丸める */
.entry-card-title,
.archive-title {
	font-weight: 500;
}
.ect-vertical-card .a-wrap {
	border-radius: 18px;
    overflow: hidden;
}

/* 本文の目次の先頭のマーク変更 */
.tnt-none ul.toc-list > li:before {
  content: "■";
}
.tnt-none ul.toc-list ul li::before {
	content: "・";
}

/* ブログカードの幅が狭かったので変更 元はmax-width:480px; */
.is-style-normal-card .blogcard-wrap {
    max-width: 90%;
}

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

/*834px以下*/
@media screen and (max-width: 834px){
	.header-container {
		padding-top: 10px;
	}
	.navi-in > ul {
		padding: 0;
	}


}

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