/** @format */

@charset "UTF-8";
/**
 * Skin Name: クリエイターツールのダークテーマみたいな
 *   Description: CSSのみ
 *   Skin URI: https://wp-cocoon.com/
 *   Author: sp8999
 *   Author URI: https://sp8999.log/
 *   Screenshot URI: https://im-cocoon.net/wp-content/uploads/skin-template.png
 *   Version: 0.0.1
 *   Priority: 9999008999
 *
 * @format
 */

/*以下にスタイルシートを記入してください*/

:root {
	--keyCol: #1473e6;
	--text-keyCol: #fff;
	--text-linkCol: #ffaf69;
	--text-main: #faf8f7;
	--lineCol: #2e2e2e;
	--lineColLite: #dddddd95;
	--bg4: #333333f1;
	--bg3: #424242d7;
	--bg2: #535353;
	--bg1: #686868;
	--bg1-on: #848484;
	--underline-blue: #08559c;
	--underline: rgba(160, 160, 37, 0.801);
	--underline-red: #7e2438;
	--cocoon-basic-border-color: var(--lineCol);
	--btnBackAni1: linear-gradient(
		155deg,
		var(--keyCol) 70%,
		var(--bg2) 70%,
		var(--bg2) 100%
	);
	--btnBackAni2: linear-gradient(
		155deg,
		var(--bg2) 70%,
		var(--keyCol) 70%,
		var(--keyCol) 100%
	);
	--transitionAll: all 0.4s ease-out !important;
	--borderDot: 1px dotted var(--bg1-on);
}
/*リンクの色変更*/
a {
	color: var(--text-linkCol);
}
a:hover {
	cursor: pointer;
	color: var(--text-keyCol);
}
/* SNSボタン1色にする場合 */
/* .sns-buttons a {
	color: var(--text-main);
	background-color: #4b7e8f !important;
}
.sns-buttons a:hover {
	color: var(--text-keyCol) !important;
	background-color: var(--keyCol) !important;
} */
/* トップ戻るボタン */
.go-to-top-button {
	background-color: var(--bg2);
	color: var(--text-keyCol);
}
:root :where(.wp-element-button, .wp-block-button__link) {
	background-color: var(--keyCol);
	color: var(--text-keyCol);
}

body {
	background-color: var(--bg4);
	/* font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
		"Hiragino Sans", "Meiryo", sans-serif; */
}
div#content {
	background-color: #333333a1;
	backdrop-filter: blur(6px) !important;
}
.no-scrollable-sidebar .sidebar {
	height: 100%;
}
.no-scrollable-main .main {
	height: 100%;
}

/* 画像のドロップシャドウ */
.wp-block-image img {
	box-shadow: 0px 2px 15px -5px #000000;
	border-radius: var(--cocoon-basic-border-radius);
}
/* メディアギャラリーキャプション */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	background: var(--bg3);
	padding: 0.1em 0;
	margin-bottom: 0.4em;
}

/*トップページ*/
.list-title-in:before,
.list-title-in:after {
	background-color: var(--text-main);
}

a.new-entry-card-link.widget-entry-card-link.a-wrap {
	margin-top: 10px;
}

#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"],
#index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"],
#index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"],
#index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"] {
	background: none var(--bg1);
	border: 1px solid var(--bg1);
	color: var(--text-main);
}

.index-tab-buttons .index-tab-button {
	background-color: var(--bg1);
	border-color: var(--bg1);
}

/*続きを読む*/
.list-more-button {
	background-color: var(--bg2);
	color: var(--text-main);
}

.list-more-button:hover {
	color: var(--text-main);
	background-color: var(--bg1-on);
}

/* ページ送り */
.page-numbers {
	font-size: 1.2em;
}
.pagination-next-link,
.page-numbers {
	border-color: var(--lineCol);
	background: var(--btnBackAni1);
	border-radius: var(--cocoon-middle-border-radius);
	color: var(--text-main);
	transition: var(--transitionAll);
}
.pagination-next-link:hover {
	color: var(--text-keyCol) !important;
	background: linear-gradient(155deg, var(--keyCol) 0%, var(--keyCol) 100%);
}
.page-numbers.current {
	background: var(--bg1);
}

.page-numbers:not(.current):hover {
	color: var(--text-keyCol);
	background: var(--btnBackAni2);
	color: var(--text-keyCol) !important;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.pagination .page-numbers,
.pager-numbers .page-numbers {
	border-radius: var(--cocoon-badge-border-radius);
	width: 1.8em;
	height: 2.4em;
	padding-bottom: 2.6em;
}

.page-numbers.dots {
	background: none;
}

.main {
	background-color: var(--bg4);
	color: var(--text-main);
	backdrop-filter: blur(10px) !important; /*背景ぼかし */
}
/*サイドバー*/
.sidebar {
	background-color: var(--bg4);
	color: var(--text-main);
	backdrop-filter: blur(6px) !important; /*背景ぼかし */
}
.sidebar h2,
.sidebar h3 {
	background: none;
	border-bottom: 1px solid var(--lineColLite);
}

#sidebar ul li a,
a.popular-entry-card-link {
	margin: 10px;
}

.widget_recent_entries ul li a,
.widget_categories ul li a,
.widget_archive ul li a,
.widget_pages ul li a,
.widget_meta ul li a,
.widget_rss ul li a,
.widget_nav_menu ul li a,
.wp-block-group ul li a {
	border-bottom: 1px solid var(--bg3);
	padding-right: 15px;
	padding-left: 15px;
}

.author-box .sns-follow-buttons a.follow-button {
	color: var(--text-main);
}

.sidebar-menu-content,
.widget-entry-cards .a-wrap {
	color: var(--text-main);
	background-color: var(--bg2);
}

/*コメントウィジェット*/
div.recent-comment-content {
	background-color: var(--bg1);
	color: var(--text-main);
}

.recent-comment-content::after {
	border-bottom-color: var(--bg1);
}

/*検索ボックス*/
.wp-block-search__label {
	display: none;
}
input[type="search"] {
	border: 1px solid var(--bg1-on);
	background: var(--bg1);
	color: var(--text-keyCol);
}
input[type="search"]:focus {
	border: 1px solid var(--keyCol);
	outline: none;
}
.wp-block-search__button {
	background: var(--keyCol);
	transition: var(--transitionAll);
}
.wp-block-search__button:hover {
	background: var(--btnBackAni2);
}

.a-wrap,
.widget_recent_entries ul li a,
.widget_categories ul li a,
.widget_archive ul li a,
.widget_pages ul li a,
.widget_meta ul li a,
.widget_rss ul li a,
.widget_nav_menu ul li a,
.wp-block-group ul li a {
	color: var(--text-main);
	background-color: var(--bg2);
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
	border-radius: 4px;
	transition-duration: 0.3s;
}

.a-wrap:hover,
.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.wp-block-group ul li a:hover {
	color: var(--text-main);
	background-color: var(--bg1-on);
	transform: translateY(-4px);
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.24);
	transition-duration: 0.3s;
}

.a-wrap > div {
	border: none;
}

/*カルーセル*/
div #carousel-in {
	background-color: var(--bg3);
}

/*ナビ*/
.navi {
	background-color: var(--bg3);
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
	font-weight: bold;
}

.navi a {
	color: var(--text-main);
}

.navi a:hover {
	color: var(--text-main);
	background-color: var(--bg1-on);
}

.navi ul .sub-menu {
	background-color: var(--bg2);
	opacity: 0.95;
}

.navi ul .sub-menu a {
	color: var(--text-main);
}

.navi ul .sub-menu a:hover {
	background-color: var(--bg1-on);
}

.navi ul .sub-menu a .sub-caption {
	opacity: 0.8;
}

.navi-in > ul .sub-menu {
	display: block;
}

.navi-in > ul .sub-menu li {
	visibility: hidden;
	transition: all 0.2s ease;
	height: 0;
	opacity: 0;
}

.navi-in > ul li:hover > ul > li {
	transition: all 0.2s ease;
	visibility: visible;
	height: 60px;
	opacity: 1;
}

.navi-in > ul .sub-menu .sub-menu li {
	display: none;
}

.navi-in > ul .sub-menu li:hover > ul > li {
	display: block;
}

.navi-in > ul > li:last-of-type .sub-menu {
	right: 0;
}

/*ヘッダー*/
.fixed-header .header {
	background-color: transparent;
}

.fixed-header .navi {
	box-shadow: none;
}

.toc {
	min-width: 70%;
	border: var(--borderDot);
	padding: 1em 2em;
}
.toc a {
	color: var(--text-linkCol);
	display: block;
}

.rating-number {
	color: var(--text-main);
}

/*フッター*/
#footer {
	background-color: var(--bg4);
}

div .footer-bottom-content {
	color: var(--text-main);
}

.navi-footer-in a {
	color: var(--text-main);
}

.navi-footer-in a:hover {
	background-color: var(--bg1-on);
}

/*---
記事
---*/
/*表*/
tr {
	background-color: var(--bg2);
}

table tr:nth-of-type(2n + 1) {
	background-color: var(--bg3);
}

table th,
.scrollable-table th {
	background-color: var(--bg1);
}
table td {
	border: 1px dotted var(--lineCol) !important;
}

/*ソースコード*/
.hcb_wrap > .prism.line-numbers {
	padding-left: calc(var(--hcb--pX) + var(--hcb--linenumW) + 1em) !important;
}
.hcb_wrap {
	--hcb-clipbtn-opacity: 100 !important;
}
.hcb-clipboard:hover {
	background-color: var(--keyCol);
}

/* スクロールバー */
/* .hcb_wrap pre::-webkit-scrollbar {
	height: 1em !important;
} */

/*パンくずリスト*/
.breadcrumb,
.breadcrumb-caption {
	color: var(--text-main);
}

/*snsボタン*/
.sns-share-message,
.sns-follow-message {
	color: var(--text-main);
}

/*コメント*/
.comment-btn {
	background-color: var(--bg1);
	color: var(--text-main);
}

.comment-btn:hover {
	background-color: var(--bg1-on);
	color: var(--text-main);
}

textarea {
	background-color: var(--bg3);
	color: var(--text-main);
}

/*引用*/
blockquote {
	background: linear-gradient(
		150deg,
		var(--bg1) 0%,
		var(--bg1) 8%,
		var(--bg2) 8%,
		var(--bg2) 92%,
		var(--bg1) 92%,
		var(--bg1) 100%
	);
	padding: 2em;
	border: 1px solid var(--bg1-on);
	border-radius: var(--cocoon-basic-border-radius);
}
blockquote::before,
blockquote::after {
	color: var(--text-keyCol);
}
/*吹き出し*/
.speech-balloon {
	background-color: var(--bg2);
}
.speech-balloon::after {
	border-right-color: var(--bg1-on);
}

.cocoon-block-balloon.not-nested-style {
	--cocoon-custom-background-color: var(--bg1);
}
/*キーボードキー*/
.keyboard-key {
	background-color: var(--bg2);
	color: var(--text-main);
	box-shadow: 1px 2px 2px #6e6e6e;
}

/*アンダーライン*/
.marker-under {
	background: linear-gradient(transparent 70%, var(--underline) 0%);
}
.marker-under-blue {
	background: linear-gradient(transparent 60%, var(--underline-blue) 0%);
}

.marker-under-red {
	background: linear-gradient(transparent 60%, var(--underline-red) 0%);
}
.marker {
	background: var(--underline);
	color: var(--text-keyCol);
}
.marker-blue {
	background: var(--underline-blue);
	color: var(--text-main);
}

.marker-red {
	background: var(--underline-red);
	color: var(--text-main);
}

/*アイコンボックス*/
.is-style-information-box,
.information-box,
.information,
.is-style-question-box,
.question-box,
.question,
.is-style-alert-box,
.alert-box,
.alert,
.is-style-memo-box,
.memo-box,
.memo,
.is-style-comment-box,
.comment-box,
.comment,
.is-style-good-box,
.good-box,
.good,
.is-style-bad-box,
.bad-box,
.bad,
.is-style-ok-box,
.ok-box,
.ok,
.is-style-ng-box,
.ng-box,
.is-style-profile-box,
.profile-box {
	background-color: var(--bg3);
	border-width: 2px;
}

/*付箋風・プライマリーボックス*/
.blank-box.sticky,
.sticky.is-style-blank-box-red,
.sticky.is-style-blank-box-navy,
.sticky.is-style-blank-box-blue,
.sticky.is-style-blank-box-yellow,
.sticky.is-style-blank-box-green,
.sticky.is-style-blank-box-pink,
.sticky.is-style-blank-box-orange,
.is-style-sticky-gray,
.is-style-sticky-yellow,
.is-style-sticky-red,
.is-style-sticky-blue,
.is-style-sticky-green,
.is-style-primary-box,
.primary-box,
.sp-primary,
.primary {
	color: #1c1a1a;
}

/*ラベルボックス*/
.label-box-label {
	text-shadow: var(--bg3) 3px 0 0, var(--bg3) 2px 1px 0, var(--bg3) 2px 2px 0,
		var(--bg3) 2px 3px 0, var(--bg3) 1px 3px 0, var(--bg3) 0 3px 0,
		var(--bg3) -1px 3px 0, var(--bg3) -2px 2px 0, var(--bg3) -3px 1px 0,
		var(--bg3) -3px 0 0, var(--bg3) -3px -1px 0, var(--bg3) -3px -2px 0,
		var(--bg3) -2px -2px 0, var(--bg3) -1px -3px 0, var(--bg3) 0 -3px 0,
		var(--bg3) 1px -3px 0, var(--bg3) 2px -2px 0, var(--bg3) 2px -2px 0,
		var(--bg3) 3px -1px 0;
}

/*見出しボックス、タブ見出しボックス、アコーディオンボックス*/
.toggle-button::before,
.caption-box:not(.has-border-color, [class*="cb-"]) .caption-box-label {
	color: var(--text-keyCol);
}

.tab-caption-box:not(.has-border-color, [class*="tcb-"])
	span.tab-caption-box-label-text {
	color: var(--text-keyCol);
}

.toggle-box:not(.has-border-color, [class*="tb-"]) label.toggle-button {
	color: var(--text-keyCol);
	background-color: var(--bg1);
}
.toggle-checkbox:checked ~ .toggle-content {
	background-color: var(--bg2);
}

/*マイクロバルーン*/
.micro-balloon {
	background-color: var(--bg3);
}

.micro-balloon::after {
	border-top-color: var(--bg3);
}

.micro-bottom.micro-balloon::after {
	border-bottom-color: var(--bg3);
}

/*検索案内*/
.search-form div.sform {
	background-color: var(--bg3);
}

.search-form div.sbtn::after {
	color: var(--text-main);
}

.search-form div.sbtn:hover {
	color: var(--text-main);
	background-color: var(--bg1-on);
}

/*faq*/
.faq-item-label {
	font-size: 26px;
}

.faq-answer-label {
	font-size: 20px;
	margin-left: 4px;
}

.faq-answer-content.faq-item-content p {
	font-size: 16px;
}

/* 見出しのフォーマット変更 */
.article h2,
.article h3,
.article h4,
.article h5 {
	margin-top: 3em;
	margin-bottom: 1.5em;
}
.article h2 {
	margin-top: 5em !important;
}
.article .entry-content h2 {
	width: calc(100% + 60px);
	background-color: var(--bg1);
	margin-left: -30px;
}
.article .entry-content h2 span {
	padding-left: 0.2em;
	font-size: 30px;
}
.article .entry-content h3 {
	margin-left: -10px;
	border-top: none;
	border-right: none;
}
.article .entry-content h4 {
	border-top: 1px dotted var(--lineColLite);
	border-bottom: 1px dotted var(--lineColLite);
}

.article .entry-content h5,
.article .entry-content h6 {
	border: none;
	margin-top: 0.5em;
	margin-bottom: 0.3em;
}

/* カスタム色対応 */
.speech-wrap,
.toggle-box,
.timeline-box,
.iconlist-box,
.faq-wrap,
.caption-box,
.tab-caption-box,
.label-box,
.micro-balloon,
.micro-text {
	--cocoon-custom-text-color: var(--text-main);
}

.info-list,
.info-list .info-list-item-content-link,
.widget_info_list {
	color: var(--text-main);
}

.breadcrumb.sbp-main-before,
.breadcrumb.sbp-footer-before,
.breadcrumb.pbp-main-before,
.breadcrumb.pbp-footer-before {
	background-color: transparent;
}

.toggle-box {
	--cocoon-custom-background-color: transparent;
}

.has-box-style,
.has-border {
	--cocoon-box-border-color: #ccc;
}

.is-style-border-thin-and-thick,
.is-style-border-radius-s-thin-and-thick,
.is-style-border-radius-l-thin-and-thick {
	border-color: rgba(255, 255, 255, 0.1);
}

.is-style-light-background-box {
	background-color: rgba(255, 255, 255, 0.1);
}

.is-style-stripe-box {
	background-image: repeating-linear-gradient(
		-45deg,
		#333 0,
		#333 3px,
		transparent 3px,
		transparent 6px
	);
}

.is-style-checkered-box {
	background-image: linear-gradient(
			90deg,
			rgba(232, 238, 236, 0.1) 50%,
			transparent 50%
		),
		linear-gradient(rgba(234, 236, 238, 0.1) 50%, transparent 50%);
}

.is-style-stitch-box {
	background-color: rgba(255, 255, 255, 0.2);
	box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0.2);
}

.is-style-border-top-box {
	box-shadow: 0 3px 5px rgba(255, 255, 255, 0.22);
}

.is-style-border-left-box {
	box-shadow: 0px 2px 3px rgba(255, 255, 255, 0.33);
}

[class^="is-style-balloon-"],
[class*=" is-style-balloon-"] {
	--cocoon-white-color: var(--bg3);
	background: var(--cocoon-white-color);
	border: 1px solid var(--cocoon-box-border-color);
}

/* ヘッダーメニュー */
/* .header-container, */
#header-container-in #navi #navi-in ul li {
	border: 1px dotted var(--text-main);
	font-weight: bolder;
	color: #dddddd;
	margin-top: -0.1em;
}

/* ヘッダーロゴと説明テキスト */
.logo-text a,
.tagline {
	color: var(--text-main) !important;
	text-shadow: 0 0 1em black, 0 0 0.4em black;
}
.header-container {
	background-color: #00000000 !important;
}
.header {
	border-top-left-radius: 40% 20%;
	border-top-right-radius: 40% 20%;
	/* 画像光彩 */
	box-shadow: inset 0 0 25px 15px #dfffff44;
	/* 画像左右グラデマスク */
	mask-image: linear-gradient(
		to right,
		transparent 1%,
		black 20%,
		black 80%,
		transparent 99%
	);
	margin-bottom: -24px;
}
/* 画像のシャドウヘッダー */
.eye-catch {
	box-shadow: none !important;
}
/* 本文ヘッダー画像と日付の順番入れ替え */
.article-header {
	display: flex;
	flex-flow: column;
}
.entry-title {
	order: 1;
}
.eye-catch-wrap {
	order: 3;
}
.sns-share {
	order: 4;
}
.date-tags {
	order: 2;
	text-align: left;
	margin-top: -10px;
	margin-bottom: 5px;
}

/* HRバー */
hr.wp-block-separator {
	border-top: 1px solid var(--bg1) !important;
	margin: 2em 0 !important;
}
hr.wp-block-separator::after {
	background: none;
}
/* テーブルの右に背景色が漏れているのを消す */
.has-cocoon-white-background-color {
	background-color: transparent !important;
}

/* ブログカード */
.blogcard-type {
	margin-top: 2em !important;
}
/* タグクラウド */
.tagcloud a,
.entry-tags a {
	border: var(--borderDot);
	color: var(--text-main);
	background-color: var(--bg2);
}
.tagcloud a:hover,
.entry-tags a:hover {
	color: var(--text-keyCol);
	background-color: var(--bg1-on);
}

/* mobile */
body .mobile-menu-buttons {
	background-color: var(--bg4);
}
body .mobile-menu-buttons .menu-button:hover {
	background-color: var(--bg4);
}
body .mobile-menu-buttons .menu-button .menu-button-in {
	color: var(--text-keyCol);
}
body .mobile-menu-buttons .navi-menu-button .navi-menu-content {
	background-color: var(--bg3);
}
body .mobile-menu-buttons .navi-menu-button .navi-menu-content a {
	color: var(--text-keyCol);
	margin: 0.5em 0 0.5em 0;
	border-bottom: solid var(--keyCol);
}
body .mobile-menu-buttons .navi-menu-button .navi-menu-content a:hover {
	background-color: var(--bg1);
}
body .mobile-menu-buttons .navi-menu-button .navi-menu-content .fa {
	color: var(--text-keyCol);
}
body .mobile-menu-buttons .search-menu-button .search-edit {
	border-width: 0 0 2px 0;
	border-radius: 4px;
	border-bottom: 2px solid var(--keyCol);
	background-color: var(--bg1);
}
body .mobile-menu-buttons .search-menu-button .search-submit {
	color: var(--text-keyCol);
}
/* コードを６行表示にする */
.codeHCBshort {
	max-height: 6em;
	overflow-y: auto;
}