/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

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

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

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

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

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




/* ヘッダーのブログタイトルを透明化 */
.site-name-text{
  opacity:0;
}
 



/* COCOONのテキスト装飾をこれでリセットする */
a{
	text-decoration: none; /* テキストの装飾を無くす、装飾の種類には下線、上線、取り消し線、点滅 */
	color: #000000;
}




/* 何でもセンターにしたい時に使う */
.text_align_center {
	text-align: center;
}


/************************************
** SNSシェアボタン&SNSフォローボタン
************************************/

/* SNSシェア文字の装飾 */
.sns-share-message{
font-weight: bold; /* 太字 */
color: #875d5b; /* 文字色 */
}


/* SNSシェアボタンを一列にする */
.sns-share-buttons {
flex-wrap: nowrap; /* 折り返さない */
justify-content: center; /* 中央寄せ */
}


/* SNSシェアボタンを丸くする */
.sns-share-buttons a {
border-radius: 50%; /* 丸くする */
font-size: 20px; /* アイコンのサイズ */
margin: 0 8px; /* ボタン同士の間隔 */
}


/* SNSシェアボタンの形を整える */
#main .sns-share a {
width: 40px; /* ボタンの横幅 */
height: 40px; /* ボタンの高さ */
}


/* SNSシェアボタンに影をつける */
.sns-share-buttons a {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 10); /* 影 */
}


/* ページ上部のSNSシェアをアイコンだけにする */
.ss-top .button-caption {
  display: none !important;
}


/* ページ下部のSNSシェアをアイコンだけにする */
.ss-bottom .button-caption {
  display: none;
}



/* SNSフォロー文字の装飾 */
.sns-follow-message{
font-weight: bold; /* 太字 */
color: #875d5b; /* 文字色 */
}


/* SNSフォローボタンを一列にする */
.sns-follow-buttons {
justify-content: center; /* 中央寄せ */
}


/* SNSフォローボタンを丸くする */
.sns-follow-buttons a {
border-radius: 50%; /* 丸くする */
font-size: 20px; /* アイコンのサイズ */
margin: 0 10px; /* ボタン同士の間隔 */
}


/* SNSフォローボタンの形を整える */
#main .sns-follow a {
width: 40px; /* ボタンの横幅 */
height: 40px; /* ボタンの高さ */
}


/* SNSフォローボタンに影をつける */
.sns-follow-buttons a {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 10); /* 影 */
}




/************************************
** サイドバー
************************************/
.sidebar h3 {
	background: none;
	font-size: 16px;
	letter-spacing: 2px;
	display: inline-block;
	position: relative;
	width: 100%;
	padding: 0;
	text-align: center;
	color: #ffc679; /* サイドバータイトルの色を指定 */
}

.sidebar h3::before,.sidebar h3::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 28%;
	border-top: 3px solid #ffc679; /* サイドバータイトル横のバーの色を指定 */
}

.sidebar h3::before {
	left: 0;
}

.sidebar h3::after {
	right: 0;
}

.widget_categories ul li a {
	color: #333;
	text-decoration: none;
	padding: 6px 0;
	display: block;
	padding-right: 4px;
	padding-left: 4px;
	border-top: 1px dotted #ccc;
	font-size: 16px;
}

.widget_categories ul li a::before {
	font-family: "Font Awesome 5 Free";
	content: "\f07b";
	padding-right: 10px;
}

.widget_categories > ul > li > a:first-child {
	border-top: none;
}

.widget_categories > ul > li > a:last-child {
	border-bottom: 1px dotted #ffc679;
}

.widget_categories ul li a .post-count {
	display: block;
	float: right;
	background: #fff;
	padding: 0 1em;
	font-size: 14px;
	margin-top: 0.2em;
	border-radius: 4px;
}

.widget_categories ul li a:hover {
	background: none;
	transition: 0.5s;
	color: #ffc679;
}

.widget_categories ul li a:hover .post-count {
	background: #ffc679;
	color: #fff;
	transition: 0.5s;
}

.widget_categories ul li ul {
	border-bottom: 1px dotted #ccc;
}

.widget_categories ul li ul li a {
	color: #333;
	text-decoration: none;
	padding: 0 4px 4px 4px;
	display: block;
	border: none;
}

.widget_categories ul li ul li a::before {
	font-family: "Font Awesome 5 Free";
	content: "\f105";
	padding-right: 0.45em;
	font-weight: bold;
}

.author-box .sns-follow-buttons a.follow-button {
	background-color: #fff;
	color: black;
	border: 0px;
}

.author-box {
	border: 0px;
}

.author-box p {
	margin-top: 0.3em;
	line-height: 1.6;
}

.author-box p a {
	text-decoration: none;
}

.author-box p a:hover {
	text-decoration: underline;
	color: #008cee; /* プロフィールにリンクを貼っている場合, ホバーした際の色指定 */
}

/* スマホサイドバー設定 */
#sidebar .author-box {
	border: none;
	border-radius: 4px;
	margin: 1em 0;
	line-height: 1.4;
	position: relative;
	padding: 1.4% 2% 1.8%;
}

#sidebar .author-thumb {
	float: none;
	width: 100%;
	margin: 9px auto 0;
	height: 0;
	padding-top: 75px;
	position: relative;
}

#sidebar .author-thumb img {
	border: 3px dashed #ffc679;
	width: 35%;
	padding: 6px;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -25%;
}

#sidebar .author-content {
	margin-top: 16%;
	font-size: 0.9em;
}




/************************************
** もくじ
************************************/

/* もくじ囲み枠にテキストに合わせる */
.toc_display {
	display: inline-block;
}


/* もくじの設定 */
.table_of_contents {
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 5px 20px 0px 31px; /* 囲み枠とテキストとの余白 */
	background: #fffff9; /* 背景の色 */
	border: solid 1px #ff3333; /* 囲み枠の線の種類・線の太さ・線の色 */
	border-radius: 10px; /* 角の丸み */
	box-shadow: 0px 0px 10px silver; /* 5px=影の広がり具合 */
	z-index: 1; /* safari用 */
}


/*全体*/
.hidden_box {
	order: 1;
	padding: 0px 0px 0px 0px; /* もくじとラベルまとめての余白 */
	margin: 0px 0px 0px 0px; /* もくじとラベルまとめての余白 */
}


/* もくじとひらく文字を中央寄り */
toc_mokuji_open {
	display:flex;
	justify-content: center;
	align-items: center;
}


/* ひらく、とじるボタンまとめて装飾 */
.hidden_box label {
	font-size: 15px; /* 文字の大きさ */
	font-weight: bold;
    border: none;
    cursor :pointer;
}


/* ひらく、とじるボタンホバー時 */
.hidden_box label:hover {
    background: none;
	opacity: 0.5; /* ホバーで不透明 */
	transition: 0.3s; /* 透過又は不透過する時間 */
}


/* ボタンのチェックを見えなくする */
.hidden_box input {
	display: none;
}


/* とじる時のもくじ文字装飾 */
.mokujimoji-close {
	color: #000000; /* 文字の色 */
	font-size: 20px; /* 文字の大きさ */
	font-weight: bolder; /* 文字の太さ */
	line-height: 5em; /* 文の行高 */
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	/* position: -webkit-relative; */
}


/* ひらく時のもくじ文字装飾 */
.mokujimoji-open {
	color: #000000; /* 文字の色 */
	font-size: 20px; /* 文字の大きさ */
	font-weight: bolder; /* 文字の太さ */
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}


/* とじるボタン設定 */
.toc-close {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	line-height: 5em; /* 文の行高 */
	white-space: nowrap;　/* 文を折り返ししない */
}
	

/* ひらくボタン設定 */
.toc-open {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	white-space: nowrap; /* 文を折り返ししない */
}


/* とじるを押したらもくじを消す */
.hidden_box #label-close:checked ~ .mokujimoji-close {
	display: none;
}
/* ひらくを押したらもくじを消す */
.hidden_box #label-open:checked ~ .mokujimoji-open {
    display: none;
}
/* とじるを押したらとじるボタンを消す */
.hidden_box #label-close:checked ~ .toc-close {
	display: none;
}
/* ひらくを押したらひらくボタンを消す */
.hidden_box #label-open:checked ~ .toc-open {
    display: none;
}
/* とじるボタンを押したら目次内容を非表示 */
.hidden_box #label-close:checked ~ .hidden_show {
    display: none;
}
/* ひらくボタンを押したら目次内容を表示 */
.hidden_boxl #label-open:checked ~ .hidden_show {
    display: block;
}


/* もくじ内のulに対する設定 */
.table_of_contents ul{
	order: 2;
	list-style-type: none; /* マーカーは非表示 */
	text-align: left; /* BOX内の文字を左寄せ */
	/* font-size: 15px; /* 文字の大きさ */
	/* font-weight: bolder; /* 文字の太さ */
	/* color: #000000; /* 文字の色 */
	padding: 0px 10px 0px 9px; /* ul内テキストを上下左右移動指定 */
	line-height: 2.7em; /* 文の行高 */
	/* margin: 0px 0px 0px 0px; /* ul内テキストを上下左右移動指定 */
}


/* もくじH1の設定 */
.toch1{
	/* color: #000000; /* 文字の色 */
	font-size: 18px; /* 文字の大きさ */
	font-weight: bolder; /* 文字の太さ */
	/* opacity: 0.1; /* 通常を半透明にする */
	transition: .3s; /* 透過又は不透過する時間 */
}


/* もくじH1にマウスカーソルを置いた時の設定 */
.toch1:hover{
	/* border-bottom: 2px dotted #ffb7a1; /* 下線の太さ 下線の種類 下線の色 */
	/* padding-bottom: 0px; /* テキストと下線との距離 */
	opacity: 0.5; /*ホバーで不透明*/
	/* color: #000000; /* 文字の色 */
}


/* もくじH2の設定 */
.toch2{
	/* opacity: 0.1; /* 通常を半透明にする */
	font-size: 15px; /* 文字の大きさ */
	font-weight: bolder; /* 文字の太さ */
	transition: .3s; /* 透過又は不透過する時間 */
	padding-left: 30px; /* h2の段差度合い */
	/* color: #000000; /* 文字の色 */
}

/* もくじH2にマウスカーソルを置いた時の設定 */
.toch2:hover{
	/* border-bottom: 2px dotted #ffb7a1; /* 線の太さ 線の種類 線の色 */
	/* padding-bottom: 0px; /* テキストと下線との距離 */
	opacity: 0.5; /*ホバーで不透明*/
	/* color: #000000; /* 文字の色 */
}




/************************************
** 見出し
************************************/

/* 見出しのデザインリセット */
/* H2 */
.entry-content h2{
border:none;
background:none;
padding: 0;
}

/* H3 */
.entry-content h3{
border:none;
background:none;
padding: 0;
}

/* H4 */
.entry-content h4{
border:none;
background:none;
padding: 0;
}

/* H5 */
.entry-content h5{
border:none;
background:none;
padding: 0;
}

/* H6 */
.entry-content h6{
border:none;
background:none;
padding: 0;
}





.entry-content h2{ /* .entry-contentは記事の見出しのみ設定するため（サイドバーの見出し等に反映させないため） */
color: #292929; /* 文字色 */
background-color: #fffacd; /* 背景色*/
border-left: 50px solid #ff3333; /* 左側背景色 */
border-radius: 100vh; /* 角丸デザイン(数値を変えれば丸みが変わる) */
box-shadow: 0 5px 6px rgba(0, 0, 0, .5); /* 見出しデザインの影 */
padding: 10px; /* 文字から見出しデザインまでの幅 */
}


.entry-content h3 {
  position: relative;
  padding: 1rem 2rem;
  border-bottom: 6px solid #fffacd;
  border-radius: 4px;
}

.entry-content h3:before {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 20%;
  height: 6px;
  content: '';
  background: #ff3333;
  border-radius: 4px;
}




/************************************
** 記事下の関連記事
************************************/
/* 関連記事文字装飾 */
.main .related-entry-heading {
	position: relative;
	text-align: center;
	letter-spacing: 2px;
	font-size: 20px;
	font-weight: bold;
	color: #e95464;
}

/* 関連記事文字下線を表示&装飾 */
.related-entry-heading:after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -1px;/* 線の上下位置 */
	display: inline-block;
	width: 60px;/* 線の長さ */
	height: 3px;/* 線の太さ */
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);/* 位置調整 */
	background-color: #a9a9a9;/* 線の色 */
	border-radius: 2px;/* 線の丸み */
}



/************************************
** 記事下のコメント
************************************/
/* タイトル装飾 */
.comment-title { /*タイトルの装飾*/
	position: relative;
	text-align: center;
	letter-spacing: 2px;
	font-size: 20px;
	font-weight: bold;
	color: #e95464;
}

/* コメント文字下線を表示&装飾 */
.comment-title:after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -1px;/* 線の上下位置 */
	display: inline-block;
	width: 60px;/* 線の長さ */
	height: 3px;/* 線の太さ */
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);/* 位置調整 */
	background-color: #a9a9a9;/* 線の色 */
	border-radius: 2px;/* 線の丸み */
}

/* コメントボタン */
.comment-btn {
	background-color: #e95464;
	color: #fff;
	border: none;
	border-radius: 25px;
	font-size: 20px;
	transition: 0.5s;
}
.comment-btn:hover {
	background-color: #a9a9a9;
	color: #fff;
	transition: 0.5s;
}


/* コメント前のアイコンを装飾 */
.comment-respond .comment-form-comment label::before {
	font-family: "Font Awesome 5 Free"; /* Font Awesome 5に設定 */
	content: "\f304"; /* アイコン */
	color: #dc143c; /* アイコンカラー */
	font-size: 20px; /* 文字サイズ */
	font-weight: 900; /* 文字太さ */
	padding-right: 5px; /* 文字との隙間 */
}

.comment-respond .comment-form-comment label::after { /*コメント欄ラベルに変更*/
  color: #191919; /*フォントカラー*/
  font-size: 50px; /*フォントサイズ*/
  font-weight: 700; /*フォント太さ*/
}




/* コメント入力欄の背景色装飾 */
#commentform .comment-form-comment #comment{
	background-color:#ddd;
}


/* コメント送信ボタンの文字色・背景色装飾 */
#submit {
	background-color: #e95464;
	color: #fff;
	border: none;
	border-radius: 25px;
}
#submit:hover {
	background-color: #a9a9a9;
	color: #fff;
	transition: 0.5s;
}