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

/*アドミンバーを半透明に*/
#wpadminbar {
	background: rgba(29, 35, 39, 0.8);
}

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
@font-face {
	font-family: 'fontmono';
	src: url('./PixelMplus12-Regular.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'fonttitle';
	src: url('./RampartOne.woff2') format('woff2');
	font-display: swap;
}

:root {
	--color_key: #56D6A6;
	--color_font: #4D5156;
	--color_bg: #2A2A2A;
	--color_link: #1B95E0;
	--color_line: #EEE;
	/*--color_shadow: 0px 2px 6px -2px rgba(27,149,224,0.2);*/
	--color_shadow: 0px 0px 8px 6px rgba(27,149,224,0.2);
	--font_mono: "fontmono"; /*font-size 22pxが適切*/
	--font_serif: "fontserif", serif;
	--font_title: "fonttitle";
	--listspace: 0.5em; /*番号と文字の隙間*/
}



/*--------------------------------
	全体
--------------------------------*/
body {
	overflow-x: hidden;
}
/*固定ページ横幅*/
.no-sidebar .wrap {
    width: 860px;
}
@media screen and (max-width: 1023px){
    .no-sidebar .wrap {
        width: auto;
    }
}
.breadcrumb[class^="sbp-"], .breadcrumb[class^="pbp-"] {
	padding-left: 1rem;
	padding-right: 1rem;
}
/*背景色*/
#main.main,
#sidebar.sidebar {
	background-color: inherit;
}
/*リンク*/
a,
a:hover {
	color: var(--color_link);
	outline: unset;
	text-decoration: none !important;
}
a[href*="https://yametaru.com/to"]::after {
	font-family: 'Font Awesome 5 Free';
		content: '\f35d';
		font-weight: 900;
	margin: 0 0.3em;
	font-size: 0.5em;
}
.entry-content a[href^="https://yametaru.com"] {
	text-shadow: 0px 0px 3px var(--color_link);
}
/*リンク背景色を無効化（メニューやサイドバー）*/
.cf a:hover {
	background: transparent;
}
table, table tr, table th, table td,
table tr:nth-of-type(2n+1) {
	border: unset;
	background-color: unset;
}
table tr th, table tr td {
	border-bottom: 1px solid var(--color_key);
}
.anchor-icon::before {
	font-size: 0.6em;
	margin-right: 2px;
}
/*カテゴリーラベルを非表示*/
.cat-label {
	display: none;
}
del {
	text-decoration-line: line-through;
	text-decoration-style: double;
	text-decoration-color: #000;
	text-decoration-thickness: 1px;
}


/*--------------------------------
	フロントページ
--------------------------------*/
/*アピールエリア*/
.appeal-in {
    min-height: unset;
	padding: unset;
}
.appeal-content {
    margin: 0 auto;
}
.appeal-button,
.appeal-button:hover {
	border: solid 1px var(--color_font);
	border-radius: 3px;
	color: inherit;
	background-color: unset;
}
/*カラム*/
@media screen and (max-width: 599px) {
	.container .column-wrap {
		flex-direction: unset;
	}
}
/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
	display: none;
}
/*フロント固定ページの日付を非表示*/
.home.page .entry-title,
.home.page .post-date,
.home.page .post-update,
.home.page .author-info {
	display: none;
}



/*--------------------------------
	ヘッダー
--------------------------------*/
/*480px以下*/
@media screen and (min-width: 480px){
	.logo {
		text-align: left;
		margin-left: 32px;
	}
}
/*ロゴ*/
#header .logo-text {
	text-align: unset;
	padding: unset;
}
@media screen and (max-width: 480px) {
	#header .logo-text {	
		padding: 0 16px;
	}
}
#header .site-name-text,
#footer .site-name-text {
	/*background: linear-gradient(to right, var(--color_key) 40%, #000 40%);*/
	background: #FFF;
	font-family: "fonttitle";
	font-size: 3em;
	font-style: italic;
	letter-spacing: -0.1em;
	padding-left: 0.1em;
	/*background-clip: text;*/
	-webkit-background-clip: text;
	color: transparent;
}
@media screen and (max-width: 480px) {
	#header .site-name-text {
    	font-size: 2em;
	}
}



/*--------------------------------
	タイトル周り
--------------------------------*/
/*h1見出しデザイン*/
h1.entry-title {
	font-family: var(--font_serif);
	font-weight: normal;
	line-height: initial;
	padding: unset;
}
@media screen and (max-width: 480px){
	h1.entry-title {
		font-size: 1.4rem;
	}
}
/*投稿日、更新日*/
.date-tags {
	border-bottom: 4px solid #FFF; /*var(--color_link);*/
	box-shadow: 0px 10px 10px -5px rgba(27,149,224,0.2);
	font-family: var(--font_mono);
	margin: 0 -16px 1.5rem;
	padding-bottom: 0.5rem;
	text-align: right;
}
.date-tags [class*="fa"]::before {
	content: none;
}
.post-date,
.post-update {
	color: var(--color_key);
	font-size: 1rem;
}



/*--------------------------------
	目次
--------------------------------*/
/*目次デザイン変更*/
#toc_container {
	border: none !important;
	padding: unset !important;
}
#toc_container a {
	color: var(--color_link);
	font-size: 15px !important;
}
/*目次マーカー変更*/
#toc_container > ul,
#toc_container > ul > li {
	position: relative;
	list-style: none;
	padding-left: 1.25em !important;
}
#toc_container > ul > li::before {
	position: absolute;
	font-family: 'Font Awesome 5 Free';
		content: '\f0d7';
		font-weight: 900;
	margin-right: 0.5em;
	left: 0;
}
#toc_container ul ul {
	padding-left: 1em;
	margin-left: unset !important;
	margin-bottom: unset !important;
}
#toc_container ul ul li {
	list-style: none;
}
#toc_container .toc_depth_2 {
	display: none;
}


/*--------------------------------
	見出し
--------------------------------*/
/*カテゴリーページ*/
h1.archive-title {
	color: inherit;
	font: normal 20px var(--font_serif);
	text-align: center;
}
.archive-title span::before {
	content: '';
}
.article h2 {
	position: relative;
	border-bottom: 4px solid var(--color_line);
	border-radius: unset;
	background-color: unset;
	font: normal 24px var(--font_serif);
	padding: 0.7em;
	margin: 12rem -16px 2rem;
}
.article h2:before {
	position: absolute;
	content: '';
	border-width: 21px 21px 0 0;
	border-style: solid;
	border-color: var(--color_line) transparent transparent transparent;
	left: 16px;
	bottom: -21px;
	width: 0;
	height: 0;
}
.article h2:after {
	position: absolute;
	content: '';
	border-width: 14px 14px 0 0;
	border-style: solid;
	border-color: var(--color_bg) transparent transparent transparent;
	left: 20px;
	bottom: -11px;
	width: 0;
	height: 0;
}

/*h3見出しデザイン*/
.article h3 {
	border: unset;
	border-left: solid 4px var(--color_line);
	background-color: unset;
	font: normal 22px var(--font_serif);
	padding: 0.4em 0.8em;
}


/*--------------------------------
	スピーチバルーン
--------------------------------*/
div.speech-balloon,
.sbp-r .speech-balloon {
	background-color: #000;
}
div.speech-balloon p {
	font: normal 16px var(--font_mono) !important;
}
div.speech-balloon p:not(:last-child) {
	margin-bottom: 0.25rem;
}
.speech-balloon::after {
	border-right: 12px solid #000;
}
.sbp-r .speech-balloon::after {
	border-left: 12px solid #000;
}




/*--------------------------------
	インライン
--------------------------------*/
/*赤色の修正（赤字、太赤字）*/
.bold {
	color: #FFF;
}
.red {
	/*color: #FF2E34;*/
	color: var(--color_key);
}
.blue {
	color: inherit;
	font-size: 12px;
}
.bold.blue {
	color: inherit;
	font-size: 1.2rem;
}
.big {
	font-size: 1.2em;
}
.small {
	font-size: 0.8em;
}


/*--------------------------------
	ボックス
--------------------------------*/
/*引用・blockquote*/
blockquote {
	background-color: transparent;
	border: 1px solid var(--color_line);
	/*border: unset;*/
	padding: 0.6em;
}
blockquote::before {
	color: var(--color_key);
	line-height: 0;
    left: -7px;
    top: 12px;
}
blockquote::after {
	color: var(--color_key);
	line-height: 0;
    right: -7px;
    bottom: -14px;
}
/*スタイル > ボックス（案内） > プライマリー*/
.primary-box {
	background: transparent;
	border: 1px solid var(--color_key);
	color: inherit;
	padding: 0.5rem
}
/*プライマリーボックスの中のリストは装飾*/
.primary-box ul {
	list-style: none;
	/*margin-left: var(--listspace);*/
}
.primary-box ul li {
	text-indent: calc(-1em - var(--listspace));
}
.primary-box ul li::before {
	padding-right: var(--listspace);
}
.primary-box :not(ul li){
	text-indent: initial;
}
.primary-box ul li::before {
	font-family: 'Font Awesome 5 Free';
		content: '\f00c';
		font-weight: 900;
	color: var(--color_key);
}
/*スタイル > ボックス（案内） > セカンダリー*/
.secondary-box {
	background: var(--color_bg);
	border: solid 1px #aaa;
	color: #aaa;
}
.secondary-box p:first-child {
	background-color: var(--color_bg);
	border: solid 1px #aaa;
	border-radius: 3px 3px 0 0;
	color: var(--color_key);
	font-weight: bold;
	padding: 0.5em 1em;
	margin: -16px -16px 8px -16px;
}
/*スタイル > ボックス（案内） > サクセス*/
.success-box {
	background: transparent;
	border: 1px dashed var(--color_line);
	color: inherit;
	padding: 0.5rem;
}


/*--------------------------------
	カード
--------------------------------*/
/*カードのフッター部分を非表示*/
[class*='card-footer'] {
	display: none;
}

/*ブログカードの装飾*/
.blogcard {
	border: unset;
	margin: 0 8px;
	padding: unset;
}
.blogcard-wrap {
	margin: unset;
	padding: unset;
	width: unset;
}
/*カードのサムネイル画像の大きさを調整
エントリー・関連・新着・人気に共通*/
[class*='card-thumb'] {
	/*margin: 0 8px 0 0;
	width: 100px !important;
	height: 100px !important;*/
	display: none;
}
[class*='card-content'] {
	margin: 0;
	padding: 0;
}
[class*='card-title'] {
	color: #FFF;
	font: normal initial var(--font_serif);
	line-height: 1.5;
	margin: 0 0 0.5em 0;
}
[class*='card-snippet'] {
	color: #FFF !important;
	font-size: 0.95em;
	line-height: 1.5;
}
@media screen and (max-width: 560px){
	[class*='card-title'] {
		font-size: 0.95rem;	
	}
	[class*='card-snippet'] {
		display: none;
	}
}
/*内部ブログカード*/
.internal-blogcard-wrap {
	background-color: var(--color_bg);
	border: 2px solid var(--color_link);
	box-shadow: var(--color_shadow);
	border-radius: 4px;
	max-width: 320px;
}
.internal-blogcard {
	position: relative;
	border: unset;
	border-radius: 4px;
	/*box-shadow: 1px 1px 4px rgba(0,0,0,0.1);*/
	padding: 0.5rem;
	padding-left: 100px;
	word-wrap: break-word;
}
.internal-blogcard::before {
	position: absolute;
	content: "かいしんの いちげき！";
	color: var(--color_link);
	font-family: var(--font_mono);
	padding: 8px;
	width: 80px;
	left: 0px;
	bottom: 25px;
}
.internal-blogcard::after {
	position: absolute;
	content: "よむ >";
	color: var(--color_link);
	font-family: var(--font_mono);
	margin-top: 4px;
	right: 0px;
	bottom: 0px;
}
.internal-blogcard-title {
	font-family: var(--font_serif);
	line-height: 1.3;
}
.internal-blogcard-snippet {
	display: none;
}
/*タイトルリンクの装飾*/
.tx {
	display: block;
}
.tx a{
	font: normal 1rem var(--font_serif);
}
.tx::before {
	content: "≫";
	margin-right: 0.5rem;
}



.entry-card-wrap {
	border: 2px solid var(--color_link);
	border-radius: 4px;
	box-shadow: var(--color_shadow);
	margin-left: 16px;
	margin-right: 16px;
}
.entry-card-title {
	font: normal 1.2em var(--font_serif);
}



/*--------------------------------
	番号付きリスト黒丸
--------------------------------*/
:root {
	--listspace: 0.5em; /*番号と文字の隙間*/
}
ol {
	list-style: none;
}
ol li {
	text-indent: calc(-1.3em - var(--listspace));
}
ol li::before {
	color: var(--color_key);
	font: 1.1em serif;
	padding-right: var(--listspace);
}
ol :not(li){
	text-indent: initial;
}
ol > li:nth-of-type(1)::before {content: '\2776';}
ol > li:nth-of-type(2)::before {content: '\2777';}
ol > li:nth-of-type(3)::before {content: '\2778';}
ol > li:nth-of-type(4)::before {content: '\2779';}
ol > li:nth-of-type(5)::before {content: '\277a';}
ol > li:nth-of-type(6)::before {content: '\277b';}
ol > li:nth-of-type(7)::before {content: '\277c';}
ol > li:nth-of-type(8)::before {content: '\277d';}
ol > li:nth-of-type(9)::before {content: '\277e';}
ol > li:nth-of-type(10)::before {content: '\277f';}



/*--------------------------------
	ページネーション
--------------------------------*/
/*ページネーション「次のページ」*/
.pagination-next {
	display: none;
}
/*ページネーショントップページのページ番号*/
.page-numbers,
.page-numbers:hover,
.page-numbers.dots {
	border: none;
	background-color: transparent;
	color: var(--color_link) !important;
}
.pagination .current {
	background: none;
	color: inherit !important;
	font-size: 1.3em;
	text-shadow: 0px 0px 3px var(--color_link);
}


/*--------------------------------
	タググループ
--------------------------------*/
.tagcloud-taggroup a,
.tagcloud-taggroup a:hover {
	/*border: 1px solid var(--color_link);*/
	/*border-radius: 1em;*/
	font-size: 15px;
	/*padding: 0.1em 0.4em;*/
	margin-left: 0.5em;
}
.tagcloud-taggroup a::before {
	content: "#";
}


/*--------------------------------
	タググループ
--------------------------------*/
.tagposts .tx-text {
	display: block;
	font-family: serif;
	margin-bottom: 0.5rem;
}


/*--------------------------------
	ASSY広告
--------------------------------*/
[id$="assy"] table tr td {
	border-bottom: 1px solid var(--color_line);
}

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

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

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