@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-header a span{
  font-family: "Caveat", cursive;
  /* font-weight: bold; */
}

.logo-text {
	padding: 0px 0px 10px;
	background-color: transparent;
}

/* ここには z-index を書かない（背景に潜り込むのを防ぐ） */
#header .site-name-text {
    font-size: clamp(30px, 10vw, 60px);
    position: relative;
}

/* ここを「重ねの起点」にする！ */
a.site-name-text-link {
    position: relative;
    display: inline-block;
    z-index: 1; /* これが新しい「起点」の目印 */
}

a.site-name-text-link::before {
    content: "";
    position: absolute;
    
    /* 起点（z-index: 1）の中での「最背面」にする */
    z-index: -1; 

    /* 位置：中央より少し上 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 2つ目の値で上に調整 */

    /* サイズ：土台を広げて安定させる */
    width: 100%; 
    height: 100%;
    
    background-image: url(https://tkna-studio.com/wp-content/uploads/2024/03/ファビコンヘッダー用_縁着色.png);
    background-size: min(33%, 120px) min(95%, 100px);
    background-repeat: no-repeat;
    background-position: center;
    
    opacity: 0.5;
    pointer-events: none;
}


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

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

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

/* 見出し ------------------------------------------------------------------------- */
/* 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;
}