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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/************************************
背景
************************************/
body {
	font-family: 'Noto Serif JP', serif;
	color: #dddddd;
	background-color: #666666;
}
a{
	color: #ADA354;
}
a:hover {
	color: #948B47;
}

/************************************
ヘッダー
************************************/
.header-container {
	background-color: #111111;
}
.header div.header-in {
	min-height: 90px; /* ヘッダーの高さ */
}
/* サイト名とキャッチコピーの設定 */
#header-in {
	position: relative; /* サイト名・descriptionはメイン領域に合わた位置 */
	display: grid !important;
	grid-template-columns: max-content 1fr !important;
	grid-template-rows: auto auto !important;
	align-content: center !important;
	align-items: end !important;
}
/*ヘッダータイトルの設定*/
#header .site-name-text {
	font-size: 52px;
	color: #dddddd;
}
#header .site-name-text:hover {
	color: #eeeeee;
}
.logo-text {
	padding: 0;
	text-align: left; /* 文字左寄せ */
	position: relative !important;
	left: auto !important;
	bottom: auto !important;
	grid-column: 1;
	grid-row: 1;
	align-self: end;
	margin: 0 !important;
	line-height: 1;
}
.tagline {
	position: relative !important;
	left: auto !important;
	bottom: auto !important;
	width: auto !important;
	grid-column: 1;
	grid-row: 2;
	justify-self: end;
	margin: -2px 0 0 !important;
	line-height: 1;
	text-align: right !important;
}

@media screen and (max-width: 480px){
	.header div.header-in {
		min-height: 50px; /* 変更時：以下ほとんど微調整として変更しなきゃダメ */
	}
	.logo-text {
		left: auto !important;
		bottom: auto !important;
	}
	#header .site-name-text {
		font-size: 30px;
		color: #dddddd;
		margin: 0;
	}
	.tagline {
		color: #dddddd;
		font-size: 8px;
		left: auto !important;
		bottom: auto !important;
		width: auto !important;
		text-align: right !important;
	}
}

/************************************
グローバルメニュー
************************************/
.navi {
	background-color: #222222;
	border-top: 1px solid #dddddd;
}
.navi-in a {
	color: #dddddd;
	text-decoration: none;
	display: block;
	font-size: 16px;
	transition: all 0.3s ease-in-out;
}
.navi-in a:hover {
	background-color: #777777;
	transition: all 0.3s ease-in-out;
	color: #ffffff;
}
.navi-in a:hover > ul {
	display: block;
}

#navi .navi-in > ul li{
	height: 40px;
	line-height: 40px;
}

.navi-in > ul .sub-menu {
	background-color: #222222;
	border-top: 1px solid #dddddd;
}

/************************************
本文部分
************************************/
.main {
	background-color: #444444;
	color: #dddddd;
}
/************************************
投稿タイトル
************************************/
main h1.entry-title{
	font-weight: 600;
	font-size: 40px;
	color: #dddddd;
	border-bottom: 4px solid #ddd;
}
@media screen and (max-width: 834px){
	main h1.entry-title{
		font-size: 25px;
		padding: 0.1em;
		border-bottom: 3px solid #ddd;
	}
}
@media screen and (max-width: 480px){
	main h1.entry-title{
		font-size: 20px;
		padding: 0.1em;
		border-bottom: 2px solid #ddd;
	}
}

/************************************
引用元
************************************/
.content blockquote {
	background-color: #333333;
	border: 1px solid #ddd;
}
.content blockquote::before, .content blockquote::after {
	color: #ddd;
	font-family: 'Noto Serif JP', serif;
	position: absolute;
	font-size: 300%;
}

/************************************
整形済みテキスト
************************************/
.content pre{
	font-family: 'Noto Serif JP', serif;
	color: #dddddd;/*文字色*/
	background: #444444;/*背景色*/
	font-size: 15px;/*文字の大きさ*/
	border: 1px solid #dddddd;
	line-height: 140%;
}
@media screen and (max-width: 480px){
	.content pre{
		font-size: 12px;/*文字の大きさ*/
		border: 0.5px solid #dddddd;
	}
}

/************************************
見出し
************************************/
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
	line-height: 1;
	font-weight: bold;
}
@media screen and (max-width: 480px){
	.article h1{
		font-size: 18px;/*文字の大きさ*/
	}
}
.article h2 {
	background: #444444;
	border-radius: 0px;
	border-left: 6px solid #dddddd;
	border-right: 2px solid #dddddd;
	border-top: 2px solid #dddddd;
	border-bottom: 2px solid #dddddd;
	font-size: 24px;
	padding: 9px 10px;
}
@media screen and (max-width: 480px){
	.article h2 {
		background: #444444;
		border-radius: 0px;
		font-size: 18px;/*文字の大きさ*/
		border-left: 4px solid #dddddd;
		border-right: 1px solid #dddddd;
		border-top: 1px solid #dddddd;
		border-bottom: 1px solid #dddddd;
	}
}
/*.article h2 {
	font-size: 24px;
	padding: 12px;
	background-color: #333333;
	border-radius: 2px;
	border: 2px solid #dddddd;
}
@media screen and (max-width: 480px){
	.article h2{
		font-size: 18px;
		border: 1px solid #dddddd;
		padding: 9px 10px;
	}
}*/
.article h4,
.article h5,
.article h6 {
	font-size: 20px;
	padding: 9px 10px;
}
/*.article h3 {
	border-left: 5px solid #dddddd;
	border-right: 2px solid #dddddd;
	border-top: 2px solid #dddddd;
	border-bottom: 2px solid #dddddd;
	font-size: 22px;
	padding: 9px 10px;
}
@media screen and (max-width: 480px){
	.article h3{
		font-size: 18px;
		border-left: 3px solid #dddddd;
		border-right: 1px solid #dddddd;
		border-top: 1px solid #dddddd;
		border-bottom: 1px solid #dddddd;
	}
}*/
.article h3 {
	background: #444444;
	border-radius: 0px;
	border-left: 0px solid #dddddd;
	border-right: 0px solid #dddddd;
	border-top: 2px solid #dddddd;
	border-bottom: 2px solid #dddddd;
	font-size: 22px;
	padding: 9px 10px;
}
@media screen and (max-width: 480px){
	.article h3 {
		background: #444444;
		border-radius: 0px;
		font-size: 18px;/*文字の大きさ*/
		border-left: 0px solid #dddddd;
		border-right: 0px solid #dddddd;
		border-top: 1px solid #dddddd;
		border-bottom: 1px solid #dddddd;
	}
}

.article h4 {
	border-top: 0px solid #dddddd;
	border-bottom: 2px solid #ddd;
}
@media screen and (max-width: 480px){
	.article h4 {
		font-size: 18px;/*文字の大きさ*/
		border-top: 0px solid #dddddd;
		border-bottom: 1px solid #ddd;
	}
}
.article h5 {
	border-bottom: 1px solid #ddd;
}
@media screen and (max-width: 480px){
	.article h5 {
		font-size: 18px;/*文字の大きさ*/
		border-bottom: 0.5px solid #ddd;
	}
}
.article h6 {
	border-bottom: 0px solid #ddd;
}
@media screen and (max-width: 480px){
	.article h6 {
		font-size: 18px;/*文字の大きさ*/
		border-bottom: 0px solid #ddd;
	}
}
.article .column-wrap h1, .article .column-wrap h2, .article .column-wrap h3, .article .column-wrap h4, .article .column-wrap h5, .article .column-wrap h6 {
	margin-top: 0;
}

/************************************
/*リンク*/
/*a {
color: #dddddd;
}
a:hover {
color: #F0E68C;
}

/************************************
highcharts
************************************/
/*highcharts内のテーブル用*/
.highcharts-table{
	margin:0px;
	background: #222222;
	font-size: 15px;
}
.highcharts-table tr {
	border: none;
}
.highcharts-table td {
	border: none;
	background: #222222;
	padding: 0px;
	line-height: 1.1;
	font-size: 15px;
}

.highcharts-smalltable{
	margin:0px;
	background: #222222;
	font-size: 15px;
}
.highcharts-smalltable tr {
	border: none;
}
.highcharts-smalltable td {
	border: none;
	background: #222222;
	padding: 0px;
	line-height: 1.1;
}

/************************************/
/*chartを横に並べて表示するためのスタイル*/
.chart {
	margin:0px;
	flex: 1;
}
.flex-container {
	margin:0px;
	height: 100%;
	display: flex;
}

.map-container {
	margin:0px;
	height: 100%;
	display: flex;
	flex-direction: row;
}
@media screen and (max-width: 480px){
	.map-container{
		flex-direction: column;
	}
}

/************************************
エントリーカードの設定
************************************/
a.entry-card-wrap.a-wrap {
	padding: 0 0 .5em;
	width:48%;
	margin-bottom:2em;
}

.a-wrap {
	background-color: #333333;
	color: #dddddd;
}
.a-wrap:hover {
	background-color: #777777;
	transition: all 0.3s ease-in-out;
	color: #ffffff;
}
figure.entry-card-thumb.card-thumb.e-card-thumb{
	overflow:hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.e-card-thumb .cat-label{
	margin:0;
	background-color: #555555;
	color: #dddddd;
	border: 0px;
}
.e-card-thumb .cat-label:hover {
	background-color: #777777;
	color: #ffffff;
}

h2.entry-card-title.card-title.e-card-title{
	font-weight:bold;
	margin-top:0.5em;
	margin-bottom:0.5em;
	padding: 0 0.5em 0;
}
.entry-card-snippet.card-snippet.e-card-snippet{
	font-size:15px;
	line-height:1.2em;
	padding: 0 0.5em 0;
	margin-top:0.5em;
	margin-bottom:0.5em;
}
.entry-card .admin-pv {
	margin: 0.4em 0 1.4em;
	padding: 0 0.5em 0;
	border-width: 0;
	font-size: 0.8em;
}

a.entry-card-wrap.a-wrap.border-element.cf .post-date,
a.entry-card-wrap.a-wrap.border-element.cf .post-update{
	margin-right:0.5em !important;
	font-size:.86em;
}
.eye-catch .cat-label, .cat-label{
	font-size:.7em;
	margin:0em;
	background-color: #555555;
	border: 0px;
}
@media screen and (max-width: 480px){
	.e-card-thumb .cat-label{
		font-size:12px;
	}
	h2.entry-card-title.card-title.e-card-title{
		font-weight:normal;
	}
}
/************************************
SNSシェア
************************************/
.sns-share-buttons a {
	color: #dddddd;
	background-color: #555555;
}
.sns-share-buttons a:hover {
	transition: all 0.3s ease-in-out;
	opacity: 1;
	background-color: #777777;
	color: #ffffff;
}

/************************************
コメント
************************************/
.comment-btn {
	border-radius: 4px;
	font-family: 'Noto Serif JP', serif;
	color:#dddddd;
	border: none;
	background-color: #555555;
	padding: 10px;
	width: 100%;
	font-size: 15px;
}

.comment-btn:hover {
	background-color: #777777;
	transition: all 0.3s ease-in-out;
	color: #ffffff;
}

#commentform input[type="text"], #commentform textarea { /*入力スペースの装飾*/
	font-family: 'Noto Serif JP', serif;
	padding: 11px;
	border: none;
	border-radius: 4px;
	width: 100%;
	background: #dddddd; /*入力スペースの背景色*/
}

#submit {
	border-radius: 4px;
	font-family: 'Noto Serif JP', serif;
	color:#dddddd;
	border: none;
	background-color: #555555;
	padding: 10px;
	width: 100%;
	font-size: 15px;
}
#submit:hover{
	color:#ffffff;
	border: none;
	background-color: #777777;
	opacity: 1;
	transition: all 0.3s ease-in-out;
}

.tag-link, .comment-reply-link {
	color: #dddddd;
	background-color: #555555;
	text-decoration: none;
	display: inline-block;
	margin-right: 5px;
	padding: 1px 5px;
	font-size: 12px;
	border: 0px;
	border-radius: 2px;
	word-break: break-all;
}
.tag-link:hover, .comment-reply-link:hover {
	background-color: #777777;
	transition: all 0.3s ease-in-out;
	color: #ffffff;
}

/************************************
/*モバイルメニュー*/
.mobile-menu-buttons {
	background: #222222;
	color: #dddddd;
}
.mobile-menu-buttons .menu-button:hover{
	background: #777777;
	color: #ffffff;
}
.mobile-menu-buttons .home-menu-button > a {
	color: #dddddd;
}
.mobile-menu-buttons .top-menu-button > a {
	color: #dddddd;
}
.navi-menu-content {
	background: #333333;
}
.menu-drawer a {
	font-family: 'Noto Serif JP', serif;
	border-bottom: 1px solid #ddd;
	color: #dddddd;
}
.menu-drawer a:hover {
	background-color: #777777;
	color: #ffffff;
}
/************************************
/*パンくずリスト*/
.breadcrumb {
	margin: 1em .4em;
	color: #dddddd;
	font-size: 13px;
}
@media screen and (max-width: 480px){
	.breadcrumb {
		margin: 5px 0;
	}
}

.breadcrumb div {
	display: inline;
}

.breadcrumb .sp {
	margin: 0 10px;
}

.breadcrumb a {
text-decoration: none;
color: #dddddd;
}

/*サイドバーの設定*/
.sidebar {
background-color: #333333;
color: #dddddd;
font-family: 'Noto Serif JP', serif;
}
/************************************
/*カテゴリ選択時のメインエリアの設定*/
.archive .main{
background-color: #444444;

}
/************************************
/*フッターの設定*/
.footer.footer-container.nwa,
.footer-in.wrap.cf,
.footer-bottom.fdt-up-and-down.fnm-text-width.cf
{
height: 40px!important; /*メニュー縦幅設定*/
display: flex; /*並列スタイル指定*/
align-items: flex-end; /*縦中央寄せ*/
justify-content: center; /*横中央寄せ*/
background-color: #222222;
}
.footer {
margin-top: 20px;
padding: 0px;
}
/*
.footer {
background-color: #141414;
color: #dddddd;
font-family: 'Noto Serif JP', serif;
}
.footer-bottom-logo .site-name-text {
font-size: 18px;
color: #dddddd;
}
/*クレジットの文字色*/
.copyright {
margin-top: 0px;
color: #dddddd;
font-family: 'Noto Serif JP', serif;
}
/************************************
/*ウェジェットカテゴリの設定*/
.widget_categories ul li a {
color: #dddddd;
font-family: 'Noto Serif JP', serif;
}
/*ウェジェットカテゴリのホバー時の設定**/
.widget_categories ul li a:hover {
background: #777777;
color: #ffffff;
font-family: 'Noto Serif JP', serif;
}

/************************************
/*カテゴリーラベル*/
.cat-label {
color: #dddddd;
border: 0px;
}

/************************************
/*本文下カテゴリ*/
.cat-link {
color: #dddddd;
}
.cat-link:hover {
opacity: 1;
color: #ffffff;
}

/************************************
/*テーブル用*/
.chart-table {
margin: 0px;
}

.chart-table td {
border: none;
background: #333333;
}

.chart-table h2 {
font-size: 24px;
padding: 0px;
background-color: #333333;
border: 0px solid #dddddd;
padding: 0px;
margin:0px;
}
@media screen and (max-width: 480px){
.chart-table h2{
font-size: 18px;/*文字の大きさ*/
}
}
.chart-table h3 {
font-size: 18px;
padding: 0px;
background-color: #333333;
border: 0px solid #dddddd;
padding: 0px;
margin:0px;
}
@media screen and (max-width: 480px){
.chart-table h3{
font-size: 15px;/*文字の大きさ*/
}
}

.chart-table br {
margin: 0px;
}

/************************************
/*rangeスライダー*/
.chart-table input[type="range"]  {
-webkit-appearance: none; /* 🚩これ無しだとスタイルがほぼ全く反映されないので注意 */
appearance: none;
cursor: pointer; /* カーソルを分かりやすく */
outline: none; /* スライダーのアウトラインは見た目がキツイので消す */
height: 10px; /* バーの高さ */
width: 100%; /* バーの幅 */
background: #555555; /* バーの背景色 */
border-radius: 0px; /* バーの両端の丸み */
border: solid 2px #dddddd; /* バー周囲の線 */
}
/* WebKit向けのつまみ */
.chart-table input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; /*  🚩デフォルトのつまみのスタイルを解除 */
background: #dddddd; /* 背景色 */
width: 15px; /* 幅 */
height: 30px; /* 高さ */
/*border-radius: 100%; /* 円形に */
/*box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); /* 影 */
}
/* Moz向けのつまみ */
.chart-table input[type="range"]::-moz-range-thumb {
background: #dddddd; /* 背景色 */
width: 15px; /* 幅 */
height: 30px; /* 高さ */
/*border-radius: 50%; /* 円形に */
/*box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); /* 影 */
border: none; /* デフォルトの線を消す */
}
:active::-webkit-slider-thumb {
box-shadow: 0 0 0 4px rgba(255, 255, 255, .6);
transition: .4s;
}
/* Firefoxで点線が周りに表示されてしまう問題の解消 */
.chart-table input[type="range"]::-moz-focus-outer {
border: 0;
}
/* つまみをドラッグしているときのスタイル */
.chart-table input[type="range"]:active::-webkit-slider-thumb {
box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.3);
}

table td {
background: #444444;
}

/************************************
ボタン*/
.chart-button {
border-radius: 4px;
font-family: 'Noto Serif JP', serif;
color:#dddddd;
border: none;
line-height: 1em;
background-color: #555555;
padding: 10px;
width: 100%;
font-size: 15px;
}
.active {
background-color: #777777;
color: white;
}
.chart-button:hover {
background-color: #777777;
transition: all 0.3s ease-in-out;
color:#ffffff;
/*border: solid 2px #dddddd;
background-color: #777777 ! important;*/
}
@media screen and (max-width: 480px){
.chart-button {
font-size: 12px;
}
}


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

/*834px以下*/


/*480px以下*/