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

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

/*Youtube動画の最大幅を650→950に*/
.video-container{
  max-width: 950px;
}

/*niconico埋め込み動画レスポンシブル*/
.niconico_player {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.niconico_player iframe {
  width: 100%;
  height: 100%;
}

/* ページネーション-------------------------------------------------- */
#main .pagination .page-numbers {
  display: inline-block;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  font-size: 17.5px;
  font-weight: bold;
  text-decoration: none;
  line-height: 46px;
  border: unset;
  color: #bfbfbf;
}

#main .pagination .current {
  color: #fff;
  background-color: #e56177; /* 背景色 */
}

#main .pagination a:hover {
  background-color: #efefef; /* ホバー時の背景色 */
}
.pagination-next {
 display: none;
}
/* バッジ-------------------------------------------------- */
.badge-grey {
  background-color: #c8c8c8;
}
/* カテゴリーラベル-------------------------------------------------- */
.cat-label {
	border: none;
	top: -6px;
	left: 6px;
	padding: 3px 5px 2px 5px;
	margin: -5px 0 0 -12px;
	border-radius: 4px 4px 4px 4px;
	overflow: visible;
}
.cat-label::after { 
	position: absolute;
	content: '';
	top: 0;
	right: -4px;
	border: none;
	border-right: solid 4px transparent;
}
/* タグクラウド-------------------------------------------------- */
.tag-caption .fa-tag {
	display: none;
}
.tagcloud a {
	background: none; /*背景を消す*/
	border: 1px solid #ccc; 
	border-radius: 9px 3px; /*角の丸み*/
	color: #555; /*文字色*/
	display: inline-block;
	padding: 3px 10px;
	text-decoration: none;
	font-size: 13px;
	margin: 2px;
	flex: 0 1 auto;
	display: flex;
	justify-content: space-between;
}

.tagcloud a .tag-caption::before {
	content: "#"; /*アイコンの変更*/
	padding-right: 3px;
}
.tagcloud a:hover { /*マウスホバー時*/
	background: #e56177;
	color: #fff;
	transition: 0.3s; /*アニメーションの時間*/
}
/* 折り畳み月別アーカイブのデザイン---------------------------------------------- */

.widget_archive a.year{ /*各年*/
	cursor: pointer;
}

/*各年右横のアイコン*/
.widget_archive a.year::after{ 
font-family: "Font Awesome 5 Free";
content: '\f107'; /* アイコンの指定 */
position: relative; /* 相対配置 */
left: 5px; /* アイコンの位置 */
font-weight: bold;
}

/*各月*/
.widget_archive .years ul { 
display:block;
margin-left: 20px; /*インデント*/
font-size: 1em;
-webkit-transition: 300ms ease;
  transition: 300ms ease-out;
}

.widget_archive ul.years li {
border-bottom: 2px dotted #ccc;
}

/*マウスホバー時*/
#sidebar .widget_archive ul.years li :hover {
	background: none;
}

 /*各年をクリックすると開閉*/
.widget_archive ul.years .hide {
	margin: 0;
	height: 0;
	opacity: 0;
	visibility: hidden;
}
/* 記事レイアウト---------------------------------------------- */
.appeal-message {
	text-align: left;
}
.mobile-menu-buttons {
	background: #bfbfbf;
}

.entry-content p{
	margin-top:1em;
}
.article h1 {
	margin-bottom: 0.8rem;
	margin-top: 10px;
	padding: 10px;
	font-size: 20px;
}

.article h2 {
	text-align: left;
	margin-top:0;
	padding: 10px 0 8px 0.2rem;
	border-top:none;
	border-bottom: 2px dotted #F57388;
	font-size: 18px;
	font-weight: 800;
	color: brown;
	background: none;
}

.article h3 {
	font-size: 16px;
	font-weight: bold;
	border-top: none;
	border-bottom: none;
	border-left: none;
	border-right: none;
	padding: 0;
	border-left: 6px solid #83e2e2;
	padding: 9px 10px;align-content;
	background: none;
	margin: 0;
}

.article h4 {
	font-size: 15px;
	background: #83e2e2;
	box-shadow: 0px 0px 0px 5px #83e2e2;
	border: dashed 1px #fffbe5;
	padding: 0.1em 0.3em;
}

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

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

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