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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/*ADD メインとサイドバーの透過*/
#main, #sidebar {
  background: rgba(255,255,255,0.6);
}

/*ADD YouTube動画センター表示*/
.video-container {margin: 0px auto;}

/*ADD ページタイトル非表示*/
.entry-title {
display: none;
}

/*カテゴリーページタイトル非表示*/
.archive-title {
display: none;
}


/* 新着記事表示３列横並び*/

.new-entry-cards.large-thumb {
display: flex;
flex-wrap: wrap;
}

.new-entry-cards.large-thumb a {
width: 33.333%;
}

/768px以下/
@media screen and (max-width: 768px){
.new-entry-cards.large-thumb a {
width: 50%;
}
}

/480px以下/
@media screen and (max-width: 480px){
.new-entry-cards.large-thumb a {
width: 100%;
}
}

/* 新着記事のフォントサイズ */
.new-entry-card-title {
 font-size: 14px;
} 

/* マウスオーバー */
.sk1{
color: #1b8b01;
background-color: white;
text-decoration: underline;	
}.eth04:hover{
color: #7eb272;
background-color: #cdfad3;
}

.sk2:hover img{
opacity: 0.6;
transition-duration: 0.3s;
}

/* サイドバー・カスタムHTMLの画像 */
.sk3 img{
  border-radius: 8px;
}

/* アイキャッチ画像の角を丸く */
figure > img{
  border-radius: 8px;
}

/* 白抜きボックス　コピーして各ページに貼り付け */
.blank-box-sk0{
  boarder-style: dotted;/*線の種類*/
  boarder-width: 10px;/*線の太さ*/
  boarder-radius: 10px;/*角の丸み*/
  border-color: #000000;/*微妙な色*/
  margin: 0 10px 0 10px;/*上右下左*/
  padding: 20px 20px 20px 20px; 	
}

/*タブ見出しボックス　お父さんお母さんへ*/

.tab-caption-box {
margin: 0 18px 0 18px; 
}
.tab-caption-box-label {
	font-size: 15px;
}
.tab-caption-box-content {
	border-width: 1px;
	font-size: 15px;
	padding: 20px;
}


/************************************
** スキンCSSの上書き
************************************/

/*ナビゲーションの色*/
#navi .navi-in a {
	color: #fff;
	background-color: #655426;
}

#navi .navi-in a::after {
	background-color: #fbb057;
}

/*サイドバーH3*/
.sidebar h2{
border-radius: 6px;
}

/*見出しH2*/

.article h2 {
	padding: 0.7em 0.8em 0.7em 1.8em;
	background: #655426;
	color: #fff;
    border-radius: 8px;
}

@media screen and (max-width: 480px) {
	.article h2 {
        background: #655426;
        border-radius: 8px;
	}
}

/*見出しH3*/

.article h3 {
	padding: 0.4em 0.7em;
	border-top: solid 3px #655426;
	border-bottom: solid 3px #655426;
}

/*見出しH4*/

.article h4 {
	padding: 0.4em 0.6em;
	color: #fff;
	background: #655426;
	border-radius: 8px;
	border-left: solid 5px #facfa5;
	border-bottom: solid 3px #fc840f;
}

/*見出しH5　使わない*/

.article h5 {
	position: relative;
	padding: 0.4em 0.5em;
	color: #fd780c;
	background: #e9e9e9;
	border-left: solid 5px #afecde;
	border-bottom: solid 3px #655426;
}

/*見出しH6*/

.article h6 {
	border-bottom: 1px solid #655426;
}

/*エントリーカード*/
/*333333を655426*/

.entry-card-wrap.a-wrap,
.related-entry-card-wrap.a-wrap,
.prev-post.a-wrap,
.next-post.a-wrap {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
}

.entry-card-wrap.a-wrap:nth-of-type(3n + 1),
.related-entry-card-wrap.a-wrap:nth-of-type(3n + 1) {
	background-color: #fff;
	border: solid 2px #655426;
}
.entry-card-wrap.a-wrap:nth-of-type(3n + 2),
.related-entry-card-wrap.a-wrap:nth-of-type(3n + 2) {
	background-color: #fff;
	border: solid 2px #655426;
}
.entry-card-wrap.a-wrap:nth-of-type(3n + 3),
.related-entry-card-wrap.a-wrap:nth-of-type(3n + 3) {
	background-color: #fff;
	border: solid 2px #655426;
}

/*目次*/

.toc-title {
	color: #e9e9e9;
	border-radius: 6px;
	font-size: 120%;
	background-color: #fd780c;
}
.toc a {
	color: #8b5a40;
}

.toc-content ul li a:hover,
.toc-content ol li a:hover {
	background-color: #fbcdb4;
}

.toc a:hover {
	text-decoration: none;
}

.article .toc {
	margin: 15px auto;
	min-width: 60%;
	position: relative;
	border: none;
}

.toc-content {
	color: #333333;
	margin: 1px 0;
	padding: 0.2em 1.2em;
	border-radius: 6px;
	border: 2px solid #fd780c;
}

/*見出しボックス　カスタムCSSに貼り付ける

.box-sk-toukou{
border-width: 2px;
border-radius: 17px;
margin: 0 20px 0 20px;
padding: 20px;
}

.box-label {
border-hight: 40px;
border-radius: 10px;
margin-bottom: 10px;
}
*/


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

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

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