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

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


/*見出し初期化*/
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
	padding: 0;
	margin: 0;
	background:none;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 0;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
	line-height: normal;
	position:relative;
}

/*H1見出し*/
#main .entry-header h1.entry-title {
	color: #000000; /*文字色*/
	background: transparent; /*背景透明に*/
	border-left: solid 10px #8a7f79; /*左線*/
	margin-bottom: 1.3em;
	padding-left: 1em;
}

/*H2見出し*/
#main .entry-content h2 {
    margin-bottom: 1.3em;
	font-size: 23px; /*文字サイズ*/
	padding: 0.5em; /*文字周りの余白*/
	color: #000000; /*文字色*/
	background: #edebe6; /*背景色*/
	position: relative;
	padding-left: 2.1em; /*アイコン分のスペース*/
	line-height: 1.4;
}
#main .entry-content h2:before {
	font-family: "Font Awesome 5 Free";
	content: "\f1b0"; /*アイコンのユニコード*/
	font-weight: 900;
	position: absolute; /*絶対位置*/
	font-size: 1.1em; /*サイズ*/
	left: 15px; /*アイコンの位置*/
	top: 9px; /*アイコンの位置*/
	color: #8a7f79; /*アイコン色*/
	font-weight: 900;
}

/*H3見出し*/
#main .entry-content h3 {
	margin-bottom: 1.2em;
    font-size: 21px; /*文字サイズ*/
	padding: 0.5em; /*文字周りの余白*/
	color: #000000; /*文字色*/
	border-bottom: dotted 4px #8a7f79;
	position: relative;
	padding-left: 2.3em; /*アイコン分のスペース*/
	line-height: 1.4;
}
#main .entry-content h3:before {
	font-family: "Font Awesome 5 Free";
	content: "\f578"; /*アイコンのユニコード*/
	font-weight: 900;
	position: absolute; /*絶対位置*/
	font-size: 1em; /*サイズ*/
	left: 16px; /*アイコンの位置*/
	top: 11px; /*アイコンの位置*/
	color: #8a7f79; /*アイコン色*/
	font-weight: 900;
}

/*H4見出し*/
#main .entry-content h4 {
    font-size: 19px; /*文字サイズ*/
	padding: 0.5em; /*文字周りの余白*/
	color: #000000; /*文字色*/
	position: relative;
	padding-left: 2.5em; /*アイコン分のスペース*/
	line-height: 1.4;
}
#main .entry-content h4:before {
	font-family: "Font Awesome 5 Free";
	content: "\f00c"; /*アイコンのユニコード*/
	font-weight: 900;
	position: absolute; /*絶対位置*/
	font-size: 1em; /*サイズ*/
	left: 19px; /*アイコンの位置*/
	top: 11px; /*アイコンの位置*/
	color: #8a7f79; /*アイコン色*/
	font-weight: 900;
}

/*プロフィールのテキスト改行*/
.author-box p {
	margin-bottom: 1.3em;
}

/*目次デザイン*/
#toc{
	border: dotted 4px #8a7f79;
	background: #ffffff;
	font-size: 15px;
	padding: auto 2.5em;
	margin-bottom: 5em;
}
.toc-title {
	font-weight: bold;
	border-bottom: solid 1px #8a7f79;
	margin-bottom: 15px;
	padding-bottom: 15px;
}
.toc-title:before {
	font-family: "Font Awesome 5 Free";
	content: "\f0ca";
	margin-right: 5px;
	margin-left: 5px;
}
.toc-list > li{
	font-weight: bold;
}
.toc-list > li li{
	font-weight: normal;
	list-style:none;
}
.toc-list > li li:before {
	font-family: "Font Awesome 5 Free";
	content: "\f0da";
	margin-right: 5px;
	margin-left: 5px;
}

/*reCAPTCHA非表示*/
.grecaptcha-badge {
	visibility: hidden;
}

/*お問い合わせ*/
.wpcf7 input.wpcf7-submit {
	background-color:#8a7f79; /*送信ボタン*/
	border:0;
	color:#fff;
	font-size:1.2em;
	font-weight:bold;
	margin:0 auto;
}
.wpcf7 form input[type="text"],
.wpcf7 form input[type="email"],
.wpcf7 form textarea {
	border-color: #8a7f79; /*枠の色*/
}

/*固定ページの投稿日・更新日の非表示*/
.page .date-tags {
	display: none;
}

/*タブ見出しボックスのカスタマイズ*/
.tab-caption-box-label{
	padding: 6px 16px; /*タブ内側余白*/
	font-size: 16px; /*タイトル文字の大きさ*/
	font-weight: bold; /*タイトル文字の太さ*/
	border-radius: 4px 4px 0px 0px; /*タブ角丸*/
}

.tab-caption-box-content {
	position: relative; /*配置に関するもの（ここを基準に）*/
	border: 3px solid; /*ボックス線*/
	padding: 24px; /*ボックス内側余白*/
	border-radius: 4px; /*ボックス角丸*/
	border-top-left-radius: 0px; /*ボックス左上角丸*/
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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