@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 h2 {
	margin-top: 3.25rem;
	margin-bottom: 1.5rem;
}
.article h3 {
	margin-top: 3.0rem;
	margin-bottom: 1.25rem;
}
.article h4 {
	margin-top: 2.75rem;
	margin-bottom: 1rem;
}
.article h5 {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}
.article p {
	padding: 0 .5rem;
}

/* 打ち消し線が適用されている文字列の文字色を変更 */
.article s {
	color: #626262;
}

/* リストの2階層目以降の記号を白丸にする */
ul ul {
	list-style-type: circle;
}

/* テーブルのヘッダーの文字色をデフォルトに戻す */
table th,
.scrollable-table th {
	color: inherit;
}

/* レビュー内訳用テーブルの1列目の横幅を変更 */
.custom-table-breakdown td:first-child {
	width: 3rem;
}

/* YouTube埋め込みブロックの横幅と余白を調整 */
.video-container {
	max-width: 100%;
	margin-top: -.8rem;
}

/* 投稿本文と投稿本文ウィジェットの余白を調整 */
.entry-content,
.widget-single-content-top,
.widget-single-content-bottom {
	margin-bottom: 1.9rem !important;
}

/* ページネーションの背景色を変更 */
.pagination .current {
	background-color: #007bbb;
	color: #fff;
}

/* ブログカードのタイトルと抜粋の行間を調整 */
.blogcard-title {
	margin-bottom: .5rem;
}

/* ブログカードのタイトルの行数を変更 */
.blogcard-title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

/* ブログカードの抜粋の行数を変更 */
.blogcard-snippet {
	-webkit-line-clamp: 2;
}

/* 内部ブログカードのアイコンとURLを非表示 */
.internal-blogcard-footer {
	display: none;
}

/* 内部ブログカードの右下に枠を表示 */
.internal-blogcard::after {
	content: 'ページを開く \00bb';
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 70%;
	background-color: #007bbb;
	padding: .3rem 2rem;
	font-weight: bold;
	color: #fff;
	border-radius: 2px;
}

/* モバイルヘッダーの文字色と背景色を変更 */
.navi-menu-button.menu-button {
	color: #fff;
}
.menu-button-in {
	color: #fff !important;
}
.mobile-menu-buttons {
	background-color: #007bbb;
}

/* スライドインメニューをカスタマイズ */
.navi-menu-content {
	left: auto;
	right: 0;
	transform: translateX(101%);
	background-color: rgba(0, 123, 187, 0.5);
}
.menu-drawer a {
	font-size: 1.25rem;
	color: #fff;
	height: 3rem;
}
.menu-drawer a:hover {
	background-color: rgba(0, 123, 187, 0);
	color: rgba(255, 255, 255, 0.7);
}

/* エントリーカード、ページの投稿日と更新日の並び順を入れ替え */
/* .entry-card-info,
.date-tags {
	display: flex;
	flex-direction: row-reverse;
} */

/* 目次をカスタマイズ */
.toc .toc-content a {
	display: block;
}
.toc .toc-content a:hover {
	background-color: #eaf4fc;
}
.toc .toc-list {
	counter-reset: li;
}
.toc .toc-list > li > a:before {
	counter-increment: li;
	content: counter(li, decimal) ". ";
}
.toc .toc-list > li ul > li > a:before,
.toc .toc-list > li ol > li > a:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f105";
	color: #007bbb;
	margin-right: .4rem;
}
.toc .toc-list > li ul > li ul > li > a:before,
.toc .toc-list > li ul > li ol > li > a:before,
.toc .toc-list > li ol > li ul > li > a:before,
.toc .toc-list > li ol > li ol > li > a:before {
	content: "\f101";
	color: #e83929;
}

/* サイドバーの目次をカスタマイズ */
.sidebar .toc {
	background-color: #eaf4fc;
	width: 100%;
	font-size: 1rem;
}
.sidebar .toc .toc-content a:hover {
	background-color: #ffffff;
}
.sidebar .toc .toc-content {
	overflow-y: scroll;
	max-height: 500px;
}
.sidebar .toc .toc-content::-webkit-scrollbar {
	-webkit-appearance: none;
	width: .5rem;
}
.sidebar .toc .toc-content::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, .4);
}

/* 目次のページ内リンク押下時のジャンプ位置を調整 */
span[id^="toc"] {
	padding-top: 1rem;
}

/* ギャラリー内の画像を中央揃えにする */
.wp-block-gallery .wp-block-image img {
	margin: 0 auto;
}

/* 自作動画を含む記事(動画ページ含む)のラベルを青色にする */
.category-online-post .cat-label,
.category-console-post .cat-label,
.category-indie-post .cat-label,
.tag-video-available-post .cat-label {
	background-color: #007bbb;
}

/* レビュー記事のラベルを緑色にする */
.category-review-post .cat-label {
	background-color: #028760;
}

/* 成人向けコンテンツを含む記事(動画ページ含む)のラベルを赤色にする */
.category-adult-post .cat-label,
.tag-adult-available-post .cat-label {
	background-color: #e83929;
}

/* ラベル色変え用のタグを非表示にする */
.entry-tags .tag-link-57,
.entry-tags .tag-link-58 {
	display: none;
}

/* ブログカードのチェックのラベルを変更 */
.bct-check .internal-blogcard {
	margin-top: 2rem;
}
.bct-check .blogcard-label {
	background-color: #e83929;
	color: #eaf4fc;
}
.bct-check .blogcard-label::after {
	content: "成人向けコンテンツあり";
}
.block-editor-block-list__block.bct-check {
	margin-top: 1rem;
}

/* 引用ブロックの引用元のフォントサイズを変更 */
blockquote cite {
	font-size: .9rem;
}

/* アピールエリアをカスタマイズ */
.appeal {
	padding: .25rem 0;
	box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, .1);
}
div#appeal-in.appeal-in.wrap {
	padding: 0;
	min-height: 0px;
}
.appeal-content {
	background-color: #eaf4fc;
	margin: auto;
	padding: 0;
	width: 100%;
	max-width: 100%;
	opacity: 1;
	line-height: 1.6;
}
a.appeal-button {
	color: #007bbb !important;
	font-size: .9rem;
	padding: 0 2rem 0;
	margin: 0;
	width: 100%;
	max-width: 100%;
	box-shadow: none;
}
.appeal-button:hover {
	transform: none;
	box-shadow: none;
}

/* カスタムブロックの埋め込み動画をカスタマイズ */
.embedded {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.embedded iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border: none;
}
.emb-thumb {
	position: absolute;
	width: 100%;
	height: auto;
	top: 0;
}
.emb-thumb img {
	width: 100%;
	height: auto;
}
.emb-thumb::before {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f144";
	cursor: pointer;
	font-weight: 400;
	color: #e83929;
	font-size: 70px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	opacity: .90;
	transition: .5s;
}
.emb-thumb img:hover {
	cursor: pointer;
	width: 100%;
	height: auto;
	box-sizing: border-box;
}
.emb-thumb:hover::before {
	color: #dcdddd;
	transition: .5s;
}

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

	/* サイドバーの目次を非表示 */
	.sidebar .widget_toc {
	 	display: none;
	}

	/* 目次のページ内リンク押下時のジャンプ位置を調整 */
	span[id^="toc"] {
		padding-top: 4rem;
	}
	html {
		--wp-admin--admin-bar--height: 0;
	}
}

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

	/* 段落の余白を調整 */
	.article p {
		padding: 0;
	}
	
	/* テーブルの文字サイズを変更 */
	table th,
	table td {
		font-size: 1rem;
	}

	/* レビュー内訳用テーブルの1列目の横幅を変更 */
	.custom-table-breakdown td:first-child {
		width: 2rem;
	}

	/* ブログカードのタイトルの文字サイズと行数を変更 */
	.blogcard-title {
		font-size: .85rem;
		-webkit-line-clamp: 2;
	}

	/* ブログカードの抜粋を非表示 */
	.blogcard-snippet {
		display: none;
	}
	
	/* アピールエリアをカスタマイズ */
	a.appeal-button {
		padding: 0 1rem 0 ;
	}
}

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