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

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

/*------------------------------------
**全ページ
-------------------------------------*/
.article table tr td { padding: 0.8em; }
.t-border tr td,
.t-border tr th { border: 1px solid black; }
.center { margin:0 auto; }

summary {
	display: inline-block;
	cursor: pointer;
	color: darkgray;
	border-bottom: 1px solid darkgray;
	}
summary:hover { color: black; border-bottom: 1px solid black; }
details[open] summary { color: gainsboro; border: none; }

/*コンテンツ背景*/
.main { background: none; }

/*パンくずリストアイコンまとめて非表示(Font Awesome 4)*/
.breadcrumb .fa-home,
.breadcrumb .fa-folder,
.breadcrumb .fa-file-o { display: none; }

/*ブログカード枠*/
.a-wrap .blogcard { border-color: #bbb; }

/*エントリーカードのアイキャッチラベル非表示*/ 
.entry-card .cat-label { display: none; }
.cat-label { display: none; }

/*h*/
.article h2 {
    position: relative;
	line-height: 1;
    background-color: #fff;
	border: 6px double #000;
	padding: 0.8em;
    text-align: center;
	}
.article h2:before,
.article h2:after {
    position: absolute;
	top: 50%;
    margin-top: -0.5em;
    content: "\f111";
    font-family: "FontAwesome";
    font-weight: 900;
    font-size: 12px;
    }
.article h2:before {
    left: 24px;
    }
.article h2:after {
    right: 24px;
    }

.article h3 { 
	margin: 2em 0 1em; /*out*/
	padding: 0.6em 0.4em; /*in*/
	font-size: 18px; 
	border: none; /*干渉回避*/
	border-bottom: solid 2px #000; 
	}

.article h4 {
	margin: 0 0.8em 0.6em;
	padding: 0.6em 1em;
	font-size: 16px;
	border-top: solid 2px #000; 
	border-bottom: solid 2px #000; 
	}

.article h5 {
	margin: 0 0 0.6em;
	padding: 0.6em 0.4em 0.3em;
	font-size: 16px;
	border: none; /*干渉回避*/
	border-bottom: solid 1px #000; 
	}

/*カラムブロック*/
.wp-block-column: not(:first-child) {
    margin-left: 0.2em;

	}
@media (min-width: 782px)
	.wp-block-column:not(:first-child) {
		margin-left: 0.2em;
		}

/*ラベル*/
.blogcard-type .blogcard-label {
	background-color: #a2a2a2;
	}
.blogcard-label {
	padding: .4em .8em;
	bottom: .6em;
	right: .6em;
	top: auto;
	left: auto;
	}

/*タブ見出しボックス(?)*/
.tab_question .tab-caption-box-label {
	padding: 0.4em 1em 0;
	color: #fff;
	background-color: #949494;
	}
.tab_question .tab-caption-box-label span { font-weight: bold; }
.tab_question .tab-caption-box-content {
	padding: 1em;
	font-size: 14px;
	color: #fff;
	background-color: #949494;
	border-color: #949494;
	}

/*目次*/
.article .toc {
	display:block;
	width: 99%;
	max-width: 660px;
	border: 1px solid #777;
	border-radius: 4px;
    box-shadow: 1px 1px #777;
    background-color: aliceblue;
	}
.toc-title { 
	margin: 0 auto;
	padding-bottom: .8em;
	width: 10em;
	border-bottom: 1px solid #777;
	}
.toc-content {
	margin: 0 auto;
	max-width: 500px;
	}
.toc-content ol li,
.toc-content ul li {
	padding: 0.2em 0.4em;
	}

/*Item box*/
.amazon-item-box, /*Amazonボックス用*/
.rakuten-item-box  /*楽天ボックス用*/
	{
	width: 100%;
	border-radius: 4px;
    border: 1px solid #aaa;
	}

/*------------------------------------
**Sidebar
------------------------------------*/
#sidebar-scroll { top: 10px; }
#sidebar {
	padding: 0;
	background: none;
	}
#sidebar .widget {
	padding: .4rem .8rem .6rem;
	margin-bottom: 10px;
	border-radius: 4px;
	border: 1px solid #2A2829;
	background-color: white;
	}

/*sidebar - title*/
#sidebar .widget-title {
    background: none;
	padding:0;
	margin: 0 .6rem .6rem;
	border-bottom: 1px solid #2A2829;
	font-weight: bolder;
    /*letter-spacing: .1em;*/
	}
#sidebar .widget-title:first-letter {
    font-size: 1.4em;
	}

/*sidebar - author*/
.author1 {
	padding: .6em;
	line-height: 1.6;
	}

/*sidebar - search*/
#sidebar #search-2 {
	border: none;
	background: none;
	}
#sidebar .search-box {
	margin: 0;
	}
#sidebar .search-edit { border: 1px solid #2A2829; }

/*sidebar - ad*/
#sidebar #common_ad-2 {
	background: none;
	}
#sidebar .ad-area { margin-bottom: -3px; }


/*sidebar - toc*/
#sidebar #toc-2 {
	padding-right: .6rem;
	background-color: aliceblue;
	}
#sidebar .toc {
	margin: 0;
	padding: .2em 0 .2em .4em;
	width: 100%;
	}
#sidebar .toc-content {
	/*overflow-y: scroll;*/
	overflow-y: auto;
	max-height: 320px;
	}

/*sidebar - entry-cards*/
#sidebar .widget-entry-cards { margin-bottom: 0; }
#sidebar .widget-entry-cards a { margin-bottom: 0; }

/*------------------------------------
**Header
------------------------------------*/
div.header-container-in { /* border: 1px solid hotpink; テスト*/ }
div.header-container-in.hlt-top-menu .logo-header { /* border: 1px solid red; テスト*/ }

#header { /* border: 1px solid lightsalmon;テスト*/ }

#header-in .logo {
	display: inline-block;
	vertical-align: middle;
	padding: 6px 0 0;
	/*border: 1px solid powderblue;テスト*/
	}
#header-in .logo img {
	/*border: 1px solid yellowgreen;テスト*/
	}

/*header navi*/
/*#navi { background: #CCCECA; }*/
#navi { background: none; }
.navi-in > ul {
	margin: 2em;
    padding: 1em 0 0;
    }
.navi-in > ul li {
    display: inline-block;
    height: 102px;
    margin: 0.4em;
	}
.navi-in > ul li a {
    display: block;
    height: 100%;
	width: 100%;
	padding-right: 2.2em;
	border-radius: 4px;
    border: 1px solid #534f50;
    background: #534f50;
	}
.navi-in > ul li a:hover {
	border: 1px solid black;
	background: black!important;
	}
.navi-in > ul li a .caption-wrap {
    display: inline-block;
    height: 88px!important;
    vertical-align: middle;
    margin: 6px;
	border-radius: 4px;
    /*border: 1px solid white;*/
    }
.item-label,.item-description {
    margin: 0 12px;
    padding: 4px;
	letter-spacing: .1em;
    }
.item-label {
    padding-top: 1rem;
    border-bottom: 1px solid #bbb;
    }

/*------------------------------------
**Footer
------------------------------------*/
/*footer menu*/
#footer-in { 
	border: 1px solid #fff;
	border-radius: 4px;
	}
.footer-bottom { 
	margin: 4px;
	padding-top: 12px;
	border: 2px solid #fff;
	border-radius: 4px;
	}
#navi-footer-in ul li { 
	padding: 0 0.4em;
	border: none;
	}
#navi-footer-in a {
	position: relative;
	padding: 0.2em 1em;
	border-bottom: 1px solid #fff;
	}
#navi-footer-in a::before,
#navi-footer-in a::after {
	position: absolute;
    content: "・";
	font-size: 0.7em;
    }
#navi-footer-in a::before {
    left: 0;
    }
#navi-footer-in a::after {
    right: 0;
    }

#navi-footer-in a:hover {
	border-bottom: 1px solid #534f50;
	background: none;
	}

@media screen and (max-width: 834px){ /*834px以下*/
	#navi-footer-in ul li {
		line-height: 2em;
		width: 100%;
		margin: 0.4em 3em;
		}
	}

/*------------------------------------
**非表示
------------------------------------*/
.home.page .entry-title, /*Home-title*/
/*全固定page*/
.page .sns-share,
.page .sns-follow,
.page .author-info,
.internal-blogcard-footer, /*内部ブログカード下部URL*/
 /*投稿日・更新日*/
.post-13 .date-tags,
.post-46 .date-tags,
.post-54 .date-tags,
.post-905 .date-tags,
.post-1635 .date-tags,
.post-3 .post-date { display: none; }

/*------------------------------------
**Privacy-policy
------------------------------------*/
/*更新日前*/
.post-3 .date-tags:before {
	content: "最終更新日";
	font-size:12px;
	}

/*------------------------------------
**Profile
------------------------------------*/
div.prof {
    margin-left: auto;
    margin-right: auto;
     padding: 1em 1em 0em 1em;
    width: 50%;
    max-width: 380px;
    min-width: 320px;
    border: 1px solid #000;
    border-radius: 4px;
    box-shadow: 1px 1px #666;
    background-color: aliceblue;
    }
div.prof table { 
    border-spacing: 0.6em;
	border: none;
    }
div.prof table tr td {
    line-height: 2.2em;
    padding-bottom: 0.4em;
	border: none;
	background-color: aliceblue; /*干渉回避*/
    }
div.prof td.ttl {
    width: 5em;
    line-height: 2.2em;
    padding-right: 0.8em;
    text-align: right;
    }
div.prof td.ttl:after {
     position: absolute;
     content: '：';
    }

div.prof [data-ruby] {
    position: relative;
    }
div.prof [data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: 2.6em;
    left: 1em;
    right: 1.2em;
    margin: auto;
    font-size: 0.7em;
    color: maroon;
    }

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

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

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