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

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



.apdt-pc-only {
	display:none;
}
#wpadminbar  {
	display:none;
}

:root{
	--my-bk: #1a1a1a;
	--my-color: #bbb;
	--my-linkhover:#ddd;
	--my-deflinkcolor:#99b9e5;
	--my-deflinkhovercolor:#edaa53;
}
html {
	height:100%;
}

body {
	background-color:var(--my-bk);
	color: var(--my-color);
	min-height:100%;
	display:flex;
	flex-direction:column;
}
#container {
	flex:1;
}
#footer {
	position:sticky;
	top:100vh;
}
a{
	text-decoration:none;
	color:var(--my-deflinkcolor);
}
a:hover{
	color:var(--my-deflinkhovercolor);
}

blockquote{
	background:#0a0a0a;
	border-color:#2a2a2a;
}

table th{
	background-color:transparent;
}


table tr:nth-of-type(2n+1) {
	background-color:transparent;
}
table:not(.has-border-color) :where(th, td){
	border:none;
	border: 1px solid #2a2a2a;
}
table thead tr{
	background-color:#3a3a3a !important;
}
thead th{
	background-color:transparent;
}
tbody tr:nth-of-type(2n) {
	background-color:#0a0a0a;
}

pre {
	background-color: #0a0a0a;
	border-color:#2a2a2a;
}
ol,ul{
	padding-left:20px;
}

#container input[type=text],
#container input[type=password],
#container input[type=date],
#container input[type=datetime],
#container input[type=email],
#container input[type=number],
#container input[type=search],
#container input[type=tel],
#container input[type=time],
#container input[type=url],
#container textarea,
#container select,
#container .search-edit,
#container input[type=search] {
	border:none;
	background: #2a2a2a;
	outline:none;
	border: 1px solid #3a3a3a;
	color: var(--my-color);
}
#container input[type=text]:hover,
#container input[type=password]:hover,
#container input[type=date]:hover,
#container input[type=datetime]:hover,
#container input[type=email]:hover,
#container input[type=number]:hover,
#container input[type=search]:hover,
#container input[type=tel]:hover,
#container input[type=time]:hover,
#container input[type=url]:hover,
#container textarea:hover,
#container select:hover,
#container .search-edit:hover,
#container input[type=search]:hover {
	background: #3a3a3a;
}

#container input[type=text]:focus-visible,
#container input[type=password]:focus-visible,
#container input[type=date]:focus-visible,
#container input[type=datetime]:focus-visible,
#container input[type=email]:focus-visible,
#container input[type=number]:focus-visible,
#container input[type=search]:focus-visible,
#container input[type=tel]:focus-visible,
#container input[type=time]:focus-visible,
#container input[type=url]:focus-visible,
#container textarea:focus-visible,
#container select:focus-visible,
#container .search-edit:focus-visible,
#container input[type=search]:focus-visible {
	outline:none;
	background: #3a3a3a;
	border-color:var(--my-linkhover);
}
#container input[type=submit],
#container button,
#container .wp-block-search__button {
	border:none;
	background: #2a2a2a;
	outline:none;
	border: 1px solid #3a3a3a;
	color: var(--my-color);
}
#container button:hover,
#container button:focus,
#container input[type=submit]:hover,
#container input[type=submit]:focus,
#container .wp-block-search__button:focus,
#container .wp-block-search__button:hover {
	outline:none;
	background: #3a3a3a;
}

button:active,
input[type=submit]:active,
.wp-block-search__button:active {
	outline:none;
	background: #0a0a0a;
	border-color:#3a3a3a;
}

button {
	font-size: 1rem;
	padding: 11px;
}

#main, #sidebar,#header, #footer {
	background-color:var(--my-bk);
}

.wrap {
	width: 100%;
	max-width: 1736px;
	margin: 0 auto;
}

#navi {
 background-color: #2a2a2a;
}
.navi-in a,
.navi-in > ul .sub-menu,
.navi {
	background-color: #2a2a2a;
	color: var(--my-color);
	font-size: 14px;
}
.navi-in a:hover,
.navi-in > ul .sub-menu:hover {
	background-color: #0a0a0a;
	color: var(--my-linkhover);
}

.navi-footer-in > .menu-footer li,
.navi-footer-in > .menu-footer li:last-child
{
	border-color: #3a3a3a;
}
.navi-footer-in a:hover {
	color: var(--my-linkhover);
	background-color: #3a3a3a;
}
.navi-footer-in a,
.site-name-text-link {
	color: var(--my-color);
}
.site-name-text-link:hover {
	color: var(--my-linkhover);
}


.a-wrap{
	color:var(--my-color);
}
.a-wrap:hover{
	background-color:rgba(0, 0, 0, .1);
	background-color:#2a2a2a;
	color:var(--my-linkhover);
}

.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
	border:none;
	padding: 0;
	padding-top: 4rem;
	padding-bottom:1rem;
	background-color: transparent;
	margin-bottom: 1rem;
	
}

.sidebar h2, .sidebar h3 {
	background-color:transparent;
	background-color:rgba(0, 0, 0, .1);
	color: var(--my-color);
	user-select:none;
	border-left:.5rem solid #2a2a2a;
	border-top: 1px solid #2a2a2a;
}
.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, .widget_block ul li a{
	color:var(--my-color);
	padding-left:.5rem;
}
.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, .widget_block ul li a:hover{
	color:var(--my-linkhover);
	background-color:#3a3a3a;
	background-color:rgba(0, 0, 0, .1);
	
}

.body .wp-block-group,
.body .wp-block-search {
	margin-bottom: 2rem;
}

.wp-block-latest-posts__list li {
	margin: .5rem 0;
}
.wp-block-latest-posts__list a {
	border-left: .25rem solid #2a2a2a;
}
.wp-block-latest-posts__list a:hover {
	border-left-color:#3a3a3a;
}

#sidebar-menu-input:checked ~ #sidebar-menu-content {
	overflow:auto;
}
.menu-content {
	background:#1a1a1a;
}
.sidebar {
	background-color: transparent;
	color: var(--my-color);
}


.entry-content>*, .mce-content-body>*, .article p, .demo .entry-content p, .article dl, .article ul, .article ol, .article blockquote, .article pre, .article table, .article .toc, .body .article, .body .column-wrap, .body .new-entry-cards, .body .popular-entry-cards, .body .navi-entry-cards, .body .box-menus, .body .ranking-item, .body .rss-entry-cards, .body .widget, .body .author-box, .body .blogcard-wrap, .body .login-user-only, .body .information-box, .body .question-box, .body .alert-box, .body .information, .body .question, .body .alert, .body .memo-box, .body .comment-box, .body .common-icon-box, .body .blank-box, .body .button-block, .body .micro-bottom, .body .caption-box, .body .tab-caption-box, .body .label-box, .body .toggle-wrap, .body .wp-block-image, .body .booklink-box, .body .kaerebalink-box, .body .tomarebalink-box, .body .product-item-box, .body .speech-wrap, .body .wp-block-categories, .body .wp-block-archives, .body .wp-block-archives-dropdown, .body .wp-block-calendar, .body .ad-area, .body .wp-block-gallery, .body .wp-block-audio, .body .wp-block-cover, .body .wp-block-file, .body .wp-block-media-text, .body .wp-block-video, .body .wp-block-buttons, .body .wp-block-columns, .body .wp-block-separator, .body .components-placeholder, .body .wp-block-search, .body .wp-block-social-links, .body .timeline-box, .body .blogcard-type, .body .btn-wrap, .body .btn-wrap a, .body .block-box, .body .wp-block-embed, .body .wp-block-group, .body .wp-block-table, .body .scrollable-table, .body .wp-block-separator, .body .wp-block, .body .video-container, .comment-area, .related-entries, .pager-post-navi, .comment-respond{
	margin-bottom: 1.5rem;
}
.entry-content p {
	line-height: 1.8;
}
.related-entry-card-snippet,
.entry-card-snippet {
	line-height: 1.6;
	font-size: .9em;
}

.pagination-next-link, .comment-btn {
	background-color:#2a2a2a;
	color:var(--my-color);
	border-color:transparent;
}
.pagination-next-link:hover, .comment-btn:hover {
	background-color:#3a3a3a;
	color:var(--my-linkhover);
	border-color:transparent;
}

.page-numbers,
.pager-links a span {
	color: var(--my-color);
	border-color:transparent;
	background-color: #2a2a2a;
}
.pagination a:hover,
.pager-links a:hover span{
	background-color:#3a3a3a;
	color:var(--my-linkhover);
}
.pagination .current,
.pager-links span {
	background-color:transparent;
	border-color:transparent;
	user-select:none;
}
.page-numbers.dots {
	background-color: transparent;
	opacity:1.0;
	border-color:transparent;
	user-select:none;
}


.cat-link {
	color:var(--my-color);
	background-color:#2a2a2a;
}
.cat-link:hover{
	opacity:1.0;
}
.comment-reply-link {
	color:var(--my-color);
	background-color:#2a2a2a;
	border:none;
}
.tag-link, .tagcloud a {
	color:var(--my-color);
	border:none;
	background-color: var(--my-bk);
}
.tag-link:hover, .tagcloud a:hover, .comment-reply-link:hover{
	background-color: #3a3a3a;
	color:var(--my-linkhover);
}

.toc {
	border:1px solid #2a2a2a;
}
.toc a{
	color:var(--my-color);
}
.toc a:hover {
	color:var(--my-deflinkhovercolor);
}

.wp-caption {
	background-color: #0a0a0a;
	border-color:#2a2a2a;
}
.wp-caption .wp-caption-text{
	font-size:.8rem;
	padding: .5rem .2rem;
	color:#999;
}

.hcb_wrap.hcb_wrap>pre, .hcb_wrap.hcb_wrap>pre>code {
	background: #2a2a2a !important;
	tab-size: 2 !important;
}
.token.constant, .token.deleted, .token.important, .token.property, .token.symbol, .token.tag {
    color: #ffbf76 !important;
}
.token.keyword, .token.operator {
    color: #ffbf76 !important;
}

.go-to-top-button {
	border: 1px solid #3a3a3a;
	background-color:#2a2a2a;
	color:var(--my-color);
}
.go-to-top-button:hover {
	border-color: #0a0a0a;
	color:var(--my-linkhover);
}

.mobile-menu-buttons,
.mobile-menu-buttons .menu-button > a,
.mobile-menu-buttons .menu-caption {
	color: var(--my-color);
	opacity:1;
}
.mobile-menu-buttons .menu-button:hover .menu-button-in {
	color: var(--my-linkhover);
	opacity:1;
}
#navi-menu-input:checked ~ #navi-menu-close, #sidebar-menu-input:checked ~ #sidebar-menu-close, #search-menu-input:checked ~ #search-menu-close, #share-menu-input:checked ~ #share-menu-close, #follow-menu-input:checked ~ #follow-menu-close {
	opacity: .8;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1280px以下*/
@media screen and (max-width: 1280px){
  /*必要ならばここにコードを書く*/
	.container {
		padding-left: calc(60px + .8rem);
	}
	.main {
		width: 100%;
		max-width:1024px;
		margin-right: auto;
		margin-left:auto;
		
		padding-left: 0px;
		padding-right: 0;
	}
	.content-in {
		display:block;
		padding-left: 1rem;
		padding-right: 2rem;
	}
	.go-to-top {
		display:none;
	}
	.mobile-menu-buttons {
		display:flex;
		justify-content:space-around;
		
		height: 100%;
		max-width: calc(60px + .8rem);
		flex-direction: column;
		justify-content: flex-start;
		padding-top: calc(20px + .6em);
		top:0;
		
		background-color: transparent;
		background: transparent;
		box-shadow:none;
		transition: none;
	}
	.mobile-menu-buttons .menu-button {
		height: 60px;
	}
	.no-mobile-sidebar .sidebar {
		width: 100%;
		margin:0;
		padding-left: 0;
		padding-right: 0;
		display:none;
	}
	#slide-in-sidebar {
		padding: 2rem 1rem;
	}
	.sidebar-menu-content {
		width: 60%;
		max-width: none;
		margin: 0 auto;
	}
	
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.container {
		padding-left: 0;
		padding-top: calc(60px);
	}
	.content-in {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.main {
		padding-left: 0;
	}
	.mobile-menu-buttons {
		display:flex;
		justify-content:space-around;
		
		
		width: 100%;
		height: 50px;
		max-width: none;
		flex-direction: row;
		justify-content: space-around;
		padding-top: 0;

		background-color: rgba(0, 0, 0, .9);
		border-bottom: 1px solid #3a3a3a;
		
	}
	.mobile-menu-buttons .menu-button {
		height: 50px;
		margin: 0;
	}
	.sidebar-menu-content {
		width: 80%;
		max-width: none;
		margin: 0 auto;
	}
}

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