@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{background:transparent;}
.header-container, .main, .sidebar, .footer {
background-color: transparent;}
#header-in{background-color:transparent;}
.logo-text {
padding: 0px;
}
/* Header 非表示
#header-in{display:none;}
*/
/* 日付非表示 */
.date-tags{display:none;}
/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{display: none;}
/*フロント固定ページの投稿日を非表示*/
/*フロント固定ページの更新日を非表示*/
.page-id-2 .article-header .date-tags {display: none;}
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info, .author-info{display: none;}
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/* h1 */
.site-name-text {font-size:1.1em;text-shadow: 0px 0px 3px #ffffff, 0px 0px 1px #326693, 0px 0px 1px #326693, 0px 0px 1px #31a9ee, 0px 0px 10px #31a9ee;}

/* h2 */
.article h2{font-size: 22px;padding:5px 10px 5px 35px;position:relative;background:transparent;position:relative;}
.article h2:before {font-family: "Font Awesome 5 Free";content: "\f5a7 ";font-size: 1.0em;font-weight: 900;margin-right:30px;position:absolute;top:0px;       
left:0;}
.article h2::after {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 8px;background-image: repeating-linear-gradient(45deg, #bbb 0px, #555 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);background-size: 8px 8px;}
/* h3 */
.article h3:before {font-family: "Font Awesome 5 Free";content: "\f06c ";font-size: 1.0em;font-weight: 900;margin-right:8px;}
.article h3 {font-size: 20px;border:none;background:transparent;border-bottom: solid 3px #ccc;position: relative;padding: 12px 0px;}
.article h3:after {position: absolute;content: " ";display: block;border-bottom: solid 3px #555;bottom: -2px;width: 20%;}
/* h4 */
.article h4 {border-top: 2px solid #05450e;border-bottom: 2px solid #98ab94;background-color: #fff;}
.article h5 {border-bottom: 2px solid #552d2d;}
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/* タブ付きbox */
.boxsys1 {
margin: 2em 0;
background: #f1f1f1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.boxsys1 .box-title {
font-size: 1.2em;
background: #7fa2b4;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.boxsys1 p {
padding: 15px 20px;
margin: 0;
}
/*  */
/************************/
/*目次デザイン*/
/************************/
.toc {
display: block !important;
width: 95%;
padding: 7px 32px 7px !important;
margin-bottom: 5% !important;
background: #f9f9f9 !important;
border: 0 !important;
border-top: 5px solid !important;
border-top-color: #1c023a !important;
border-radius: 10px;
box-shadow: 0 2px 2px rgb(0 0 0 / 20%) !important;
}
@media screen and (min-width: 600px) {
.toc {
width: 70%;
padding: 20px 35px 15px !important;
}
}

.toc-title {
margin: 0 0px 0px -10px !important;
font-size: 20px !important;
font-weight: 700 !important;
color: #1c023a !important;
background-color: initial;
}

.toc-title::before {
padding: 14px;
margin-right:10px;
font-family: "Font Awesome 5 Free";
font-size: 14px;
font-weight: 900 !important;
color: #fff;
content: "\f03a";
background-color: #1c023a;
border-radius: 50%;
}
.toc-title::after {
font-size: .7em;
}
.toc a {
display: block;
padding-top: 0 !important; /* 下の点線との間 */
padding-bottom: 0.5em; /* 下の点線との間 */
color: #333;
border-bottom: dashed 1px silver;
font-size:.9em;
}

.toc ul li {
position: relative;
padding: 0 0 0.4em 1.4em;
font-weight: 700;
line-height: 1.5;
}

.toc ul li::before {
position: absolute !important;
left: -0.3em !important;
font-family: "Font Awesome 5 Free" !important;
font-weight: 900;
color: #1c023a;
content: "\f0a9";
}

.toc li li {
padding-top: 0.5em;
margin-top: 0 !important;
font-weight: 400;
}
.toc li li::before {
position: absolute !important;
left: -0.3em !important;
font-family: "Font Awesome 5 Free" !important;
font-weight: 900;
color: #433851;
content: "\f138";
}
.toc_list li {
margin-top: -5% !important;
}
@media screen and (min-width: 834px) {
.toc_list li {
/* PCでは目次のh2同士の間隔は抑えめに */
margin-top: -1.8% !important;
}
}
/*  */
/* 補足ライン */
.hosoku4 {margin-left: 10px;padding-left: 10px;margin-bottom: 15px;font-size: .85em;border-left: #81b1a7 2px solid;line-height: 1.2em;display: block;}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
main.main, div.sidebar {padding: 5px 16px;}
}

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