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

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


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

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

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

/* 以下からカスタム記載 ------------------------------------------------------------------------- */

.logo-text {
	padding: 0px;
}

/*サイトロゴのフォント変更*/
.logo-header a span{
	font-family: "Darumadrop One", sans-serif;
	font-size: 50px;
    /* font-weight: bold; */
}

/* アイコンとメニューに空白追加 */
.menu-item i {
	margin-right: 5px;
}

.tagline {
	margin: 0px;
}

#navi .navi-in > ul > li,
#navi .navi-in a {
  height: 40px; /* お好みの高さに変更 */
  line-height: 40px; /* 高さに合わせる */
}

/* グローバルメニューのフォントサイズ等変更 */
.navi-in .menu-header .item-label{
	font-size: 16px;
}

/* 固定ページの背景色設定 */
.main{
    background-color: #FFFFFF;
}


/* メインカラム ------------------------------------------------------------------- */
/* メインカラムの角を丸くする */
#main{
  border-radius: 12px;　/* 数値を変えたら丸みが変わる */
}


/* サイドバー ------------------------------------------------------------------- */
/* サイドバーの角を丸くする */
#sidebar{
	border-radius: 12px; /* 数値を変えたら丸みが変わる */
}


/* 見出し ------------------------------------------------------------------------- */
/* Cocoon見出しデザインのリセット */
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
	background: none; /* 背景色を削除 */
	border: none;     /* 枠線を削除 */
	border-radius: 0; /* 角丸を削除 */
	
	--text-light-color1: #b8b1ae; /* テキストカラーを薄くした色 */
	--text-light-color2: #ebe9e9; /* テキストカラーを更に薄くした色 */
}

/* H2 */
.article h2 {
	position: relative;
	z-index: 1;
	
	counter-increment: heading-counter;
  	padding: .5em; /* 内側余白　上下・左右*/ 
	margin-top: 4rem;
}

.article h2:before{
	content: counter(heading-counter, decimal-leading-zero);
	bottom: 0;
	z-index: -1;
	position: absolute;
	font-family: "Caveat";
	font-style: italic;
	font-size: 6rem;
	color: var(--text-light-color1);
}

.article h2:after{
   
   position:absolute;
   content: "";
   width: 100%;
   height: .5em;
   bottom:0;
   left:0;
   background: linear-gradient(135deg, transparent 25%,var(--text-light-color1)  25%,var(--text-light-color1)  50%,transparent 50%,transparent 75%,var(--text-light-color1) 75%,var(--text-light-color1));
   background-size: 4px 4px;
}

.article h3{
    /* margin-top: 5em; */
    padding: .7em 13.44px 1em;
    color: var(--main-color);
    font-size: 1.2em;
    border-left: 3px solid var(--text-light-color1);
    background: linear-gradient(-45deg, transparent 25%, var(--text-light-color2) 25%, var(--text-light-color2) 50%, transparent 50%, transparent 75%, var(--text-light-color2) 75%, var(--text-light-color2));
    background-size: 4px 4px;
}

/* H6 */
.article h6 {
   background:none;
   color: #333;
   position: relative;
   padding: 12px 0px 5px 36px;
  }

h6::before,
h6::after{
   position: absolute;
   content: '';
   border-radius: 100%;
}

h6::before {
   top: .6em;
   left: .10em;
   z-index: 2;
   width: 22px;
   height: 22px;
   background: #f4d896;
   opacity: .5;
}
h6::after{
   top: 1.1em;
   left: .7em;
   width: 15px;
   height: 15px;
   background: #f4d896;
   opacity: .5;
}


/* タブ見出しボックス ------------------------------------------------------------------------- */
/* タブ見出しボックス全体のカスタマイズ */
.tab-caption-box-label {

}

/* タブ（見出し部分）の背景色と文字色 */
.tab-caption-box-content  {
    
}

.posts-not-found {
  display: none;
}