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

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



/*--------------------------------
	全体
--------------------------------*/
@font-face {
	font-family: 'fontsans';
	src: url('./LINESeedJP_OTF_Rg.woff2') format('woff2');
	font-display: swap;
}

:root {
	--color_key: #55bc83;
	--color_font: #202124;
	--color_link: #1D9BF0;
	--color_line: #888;
	--color_speech: #fdf5f3;
	--color_shadow: 0px 4px 8px -2px rgba(0,0,0,0.2);
	--font_sans: 'fontsans';
	--font_serif: 'fontserif';
}

body {
	color: var(--color_font);
	font-family: "fontsans", sans-serif;
}
blockquote {
	padding: 1.5em 1em;
}
.article ul {
	padding-left: 26px;
}
.article ul li {
	margin-bottom: 0.5em;
}
table {
	border: solid 1px var(--color_line);
}
table th {
	background-color: #EFFAF3;
}
/*リンク背景色を無効化（メニューやサイドバー）*/
a, a:hover {
	color: var(--color_link) ;
	background: transparent;
}
.fa-external-link-alt::before {
    font-size: 0.6em;
}
/*ルビの間隔調整（Chrome表示崩れ用）*/
ruby {
	padding-top: 1em;
}
rt {
	transform: translatey(0.8em);
}
/*次のページ非表示*/
.pagination-next-link {
  display: none;
}


/*--------------------------------
	フロントページ
--------------------------------*/
body.page .date-tags {
	display: none;
}
/*h2見出しデザインを解除*/
body.page h2 {
	position: relative;
	color: var(--color_key);
	font-size: 1.5rem;
	padding: unset;
	margin: unset;
	margin: 1rem -16px 2.5rem;
	text-align: center;
}
body.page h2,
body.page h2::before,
body.page h2::after {
	background: transparent;
	border: unset;
}


/*--------------------------------
	インライン
--------------------------------*/
.small {
	font-size: 0.8em;
}
.bold {
	background: linear-gradient(transparent 60%, rgba(255,255,0,0.4) 60%);
}
.bold.red {
	background: unset;
}
.large {
	font-size: 1.5em;
	font-weight: bold;
}


/*--------------------------------
	ヘッダー・サイトタイトル
--------------------------------*/
.logo {
	padding-bottom: 8px;
}
.site-name-text {
	position: relative;
	margin-left: 20px;
}
.site-name-text::before {
	position: absolute;
    content: "";
    display: inline-block;
    width: 64px;
    height: 64px;
    background-image: url('https://hwmemo.com/wp-content/uploads/titleimage.png');
    background-position: center;
    background-size: contain;
	background-repeat: no-repeat;
	z-index: 1;
	top: -20px;
	left: -64px;
}


/*--------------------------------
	パンくず
--------------------------------*/
#breadcrumb .fa-home,
#breadcrumb .fa-folder {
	display: none;
}


/*--------------------------------
	タグ・カテゴリー
--------------------------------*/
.fas.external-icon::before {
	font-size: 0.6em;
}
.entry-categories-tags span.fas,
.archive-title span.fas {
	display: none;
}
.entry-categories-tags a.cat-link,
.entry-categories-tags a.tag-link {
	color: var(--color_link);
	background-color: var(--color_bg);
	border: unset;
	opacity: unset;
}
.entry-categories-tags a.cat-link::before,
.entry-categories-tags a.tag-link::before {
	content: "#";
	font-size: 1.3em;
	margin-right: 2px;
}


/*--------------------------------
	タイトル
--------------------------------*/
h1.entry-title {
	margin-left: -8px;
	margin-right: -8px;
}
.date-tags {
	position: absolute;
	top: 180px;
	right: 16px;
}


/*--------------------------------
	タググループ
--------------------------------*/
/*タググループ*/
/*.tagcloud-taggroup,
.widget-below-single-content-title {
	margin-bottom: 1rem !important;
}
[class^='tagcloud'] a {
	display: inline-block;
	font: normal 0.9em var(--font_sans);
	margin: 0.1em 0.4em;
	text-decoration: unset;
}*/
.tagcloud-taggroup {
	margin-top: 50px;
}
[class^='tagcloud'] a::before {
	content: "#";
	font-size: 1.2em;
}
[class^='tagcloud'] a {
	display: inline-block;
	/*border: solid 1px var(--color_link);*/
	border-radius: 2em;
	background: #E8F5FD;
	color: var(--color_link);
	font: normal 0.85em var(--font_sans);
	padding: 0.1em 0.7em 0.2em;
	margin: 0.4em;
	text-decoration: unset;
}
.tagcloud-alltags {
	text-align: center;
}

/*--------------------------------
	記事トップのmemo
--------------------------------*/
.entry-content > ul:first-child {
	/*margin-left: -8px;
	margin-right: -8px;*/
	margin: 3rem auto;
	max-width: 360px;
}
.entry-content > ul:first-child {
	position: relative;
	border: solid 2px var(--color_line);
	border-radius: 4px;
	/*border-top-width: 40px;*/
	padding-top: 40px;
}
.entry-content > ul:first-child::before {
	position: absolute;
	content: "memo";
	color: var(--color_key);
	font-size: 1.2rem;
	font-weight: bold;
	padding-left: 0.5em;
	padding-right: 0.5em;
	top: 0.3rem;
	left: 2rem;
}
.entry-content > ul:first-child::after {
	position: absolute;
    content: "";
    display: inline-block;
    width: 48px;
    height: 48px;
    background-image: url('https://hwmemo.com/wp-content/uploads/pen.png');
    background-position: center;
    background-size: contain;
	background-repeat: no-repeat;
	z-index: 1;
	top: -20px;
	right: 20px;
}
.entry-content > ul:first-child li {
	margin-right: 0.8em;
	margin-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.entry-content > ul:first-child li:not(:last-child) {
	border-bottom: solid 1px var(--color_line);
}


/*--------------------------------
	目次
--------------------------------*/
/*Cocoon目次デザイン変更*/
#toc_container {
	background: linear-gradient(135deg, transparent 25%, rgba(73, 94, 105, 0.05 ) 25%, rgba(73, 94, 105, 0.05 ) 50%, transparent 50%, transparent 75%, rgba(73, 94, 105, 0.05 ) 75%, rgba(73, 94, 105, 0.05 )) !important;
	background-size: 4px 4px !important;
	background-clip: padding-box !important;
	border: unset !important;
	border-top: 4px double #E2E2E2 !important;
	border-bottom: 4px double #E2E2E2 !important;
	margin-bottom: 2rem;
	width: 100% !important;
}
#toc_container p.toc_title {
	color: gray;
	font: bold 18px var(--font_sans) !important;
	margin-left: 0.5rem !important;
	text-align: unset !important;
}
#toc_container a {
	font-size: 15px;
	text-decoration: none !important;
}
#toc_container > ul {
	list-style: none;
	padding-left: unset !important;
}
#toc_container > ul > li {
	position: relative;
	list-style: none;
	padding-left: 1.5em !important;
}
#toc_container > ul > li::before {
	position: absolute;
	content: '\25bc';
	color: var(--color_key);
	display: inline-block;
	font-size: 0.7em;
	font-weight: bold;
	margin-right: 0.25em;
	/*transform: rotate(90deg);*/
	top: 0.4em;
	left: 0;
}
#toc_container ul ul {
	padding-left: 1em;
	margin-left: unset !important;
}
#toc_container ul ul > li {
	list-style: disc !important;
}
#toc_container .toc_depth_2 {
	display: none;
}


/*--------------------------------
	見出し
--------------------------------*/
.single .article h2 {
	position: relative;
	background-color: unset;
	border-bottom: 2px solid var(--color_key);
	border-radius: unset;
	text-indent: 1em;
	padding: unset;
	padding-bottom: 0.3em;
	margin-top: 10rem;
}
.single .article h2::before {
	position: absolute;
    content: "";
    display: inline-block;
    width: 64px;
    height: 64px;
    background-image: url('https://hwmemo.com/wp-content/uploads/titleimage.png');
    background-position: center;
    background-size: contain;
	background-repeat: no-repeat;
	z-index: -1;
	top: -54px;
	left: -22px;
}
.single .article h3 {
	background-color: unset;
	border: unset;
	border-left: 4px solid var(--color_key);
	padding: unset;
	padding: 0.3em;
}


/*--------------------------------
	リスト
--------------------------------*/
ul li {
	margin-top: 0.7em !important;
}
ul li::marker {
	color: var(--color_key);
	font-size: 1.2em;
}
/*h2見出しのすぐあとは枠線で装飾する*/
h2 + ul {
	border: dashed 2px var(--color_key);
	background-color: #EFFAF3;
	padding: 0.5em;
}


/*--------------------------------
	divボックス豆知識
--------------------------------*/
.mame, 
.otoku {
	position: relative;
	background-color: #f0f0f0;
	border: solid 1px #ddd;
	padding: 8px;
	margin-top: 3rem;
}
.mame,
.otoku {
	font-size: 0.95em;
	line-height: 1.6;
}
.mame::before,
.otoku::before {
	position: absolute;
	background: #ddd;
	border-radius: 8px 8px 0 0;
	font-size: 0.9rem;
	padding: 4px 8px 0;
	top: -28px;
	left: -1px;
}
.mame ul,
.otoku ul {
	margin-bottom: unset;
}
.mame::before {
	content: "豆知識";
}
.otoku::before {
	content: "お得情報";
}



.bc-brand-color-white a {
	border: unset;
}


/*--------------------------------
	ブログカード
--------------------------------*/
[class*="blogcard-wrap"] {
	margin: unset;
	padding: unset;
	max-width: 440px;
}
[class*="card-wrap"]:hover {
	background: transparent;
}
.cat-label {
	display: none;
}
.blogcard {
	box-shadow: var(--color_shadow);
	padding: 6px;
}
figure[class*="card-thumb"] {
	width: 96px;
}
figure[class*="card-thumb"] img {
	margin: 0 8px 0 0 !important;
	width: 96px;
	height: 96px;
}
[class*="card-content"] {
	text-align: left;
	margin: 0;
	padding: 0;
}
[class*="card-title"] {
	color: var(--color_font);
	font: normal 15px var(--font_sans) !important;
	font-weight: normal;
	line-height: 1.5;
	margin: 0 0 0.5em 0;
}
[class*="card-snippet"] {
	color: var(--color_font) !important;
	line-height: 1.5;
}
[class*="card-footer"] {
	padding: unset;
}
/*エントリーカード*/
.entry-card-content {
	margin-left: unset;
}
/*内部ブログカード*/
.internal-blogcard {
	text-align: center;
}
/*外部ブログカード*/
.internal-blogcard,
.external-blogcard {
	position: relative;
	min-height: 116px;
}
.external-blogcard::before {
	position: absolute;
		top: -2rem;
		left: 50%;
	content: "▼";
	transform: scale(2, 1) translateX(-20%);/*位置調整*/
	-webkit-transform: scale(2, 1) translateX(-20%);
}
.internal-blogcard::after,
.external-blogcard::after {
	position: absolute;
		right: 5px;
		bottom: 2px;
	content: "この記事を読む≫";
	border-radius: 2em;
	background: #E8F5FD;
	color: var(--color_link);
	font-size: 0.7rem;
	padding: 0.1em 0.7em;
}
.external-blogcard-title {
	margin-bottom: 8px;
}
.external-blogcard-site {
	display: none;
}


/*--------------------------------
	番号付きリスト黒丸
--------------------------------*/
: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.2em var(--font_sans);
	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';}



/*--------------------------------------
	ボタンリンク
--------------------------------------*/
.buttonlink {
	text-align: center;
}
.buttonlink a {
	display: block;
	box-shadow: 0px 6px 4px -2px rgba(0,0,0,0.3);
	background: linear-gradient(to right, var(--color_key) 20%, var(--color_link) 100%) !important;
	/*border: 1px solid var(--color_link);*/
	border-radius: 64px;
	color: #FFF !important;
	line-height: 1.5;
	text-align: center;
	text-decoration: unset;
	padding: 0.5em 1.5em;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
}
@media screen and (max-width: 599px) {
	.buttonlink a {
		font-size: 0.85em;
		width: 95%;
	}
}
.buttonlink .fas::before,
.buttonlink a::after {
	content: none;
}


/*--------------------------------
	スピーチ
--------------------------------*/
div.speech-wrap {
	max-width: 440px;
}
div.speech-balloon {
	background-color: var(--color_speech);
	border-color: #EDE6E4;
	font-size: 0.95em;
	line-height: 1.6;
}
/*三角部分の背景*/
.speech-balloon::after {
	border-right-color: var(--color_speech);
}
/*三角部分のボーダー*/
.speech-balloon::before {
	border-right-color: #EDE6E4;
}


/*--------------------------------
	tx内部リンク
--------------------------------*/
.entry-content .tx {
	display: block;
	line-height: 1.7;
	margin-bottom: 1rem;
}
.entry-content > .tx-wrap .tx::before {
	content: "関連記事";
	background: #EFFAF3;
	border-radius: 3px;
	color: var(--color_key);
	font-size: 0.9em;
	padding: 0.2em 0.4em 0.1em;
	margin-right: 4px;
}



/*--------------------------------
	フッター
--------------------------------*/
.footer-bottom-content {
	margin-top: 16px;
}


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

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

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