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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
}*/


/* 変数定義：:rootに書く */
:root {
    --color-primary:   #f5b700;   /* メインカラー（黄） */
    --color-white:     #ffffff;
    --color-text:      #1C0F08;   /* 本文（赤みがかった黒） */
    --color-text-sub:  #5C3010;   /* サブテキスト */
    --color-link:      #c49200;   /* リンク */
    --color-link-hover:#F0C040;
    --color-link-visited: #a07800;
    --cocoon-tab-label-active-color: #f5b700; /* タブのアクティブカラー */
}

body {
    color: var(--color-text);
}

a {
    color: var(--color-link);
}

a:hover {
    color: var(--color-link-hover);
}

.tab-label-group .tab-label.is-active {
    background-color: var(--cocoon-tab-label-active-color);
    color: var(--cocoon-white-color);
}



/* 目次のスタイル　*/

.toc {
	background:rgba(0,0,0,0.01)!important;
	color:var(--color-text)!important;
	border-color:rgba(0,0,0,0.04)!important;
	border:1px dashed  #888!important;
	font-size:0.8em!important;
}

.toc a{
		color:#888!important;
}

.toc-title {
	text-align:left;
}


/* PC navi search box */
.header-search {
    width: 200px !important;
}

.header-search .search-box {
    margin: 3px;
}

.header-search input[type="text"] {
    padding: 3px 14px;
    font-size: 14px;
    border-radius: 14px 14px 14px 14px / 50% 50% 50% 50%;
}

.header-search .search-submit {
    /*background-color: var(--color-white);*/
    color: var(--color-primary);
    border: none;
}

.search-submit {
	top:calc(50% - 8px)!important;
}


/* ロゴサイズ */
.site-logo-image {
	max-width:130px;
}

/* PCのロゴの位置 を 右上に*/
.header-in {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.home .logo {
    text-align: right;
}


.cf::after {
	clear: none!important;
    content: none!important;
    display: none!important;
}


.tagline {
	color: var(--color-primary);
	font-weight:bold;
	font-size:1.0rem;
}

/** ヘッダー画像 **/
/* トップページ以外はトップ画像表示させない */
body:not(.home) #header,
.single #header,
.blog #header {
	display:block;
	background-image:none;
	background-color:unset;
	height:60px;
}

/* トップページ以外は キャッチフレーズ表示しない */
body:not(.home) .tagline {
	display:none;
}


/* モバイルの場合 */
@media screen and (max-width: 480px){
	.home #header {
		height:400px;
	}
	body:not(.home) #header{
		display:none;
	}
}

#navi .caption-wrap {
	color:var(--color-white);
}

/* 引用のブログカード */
.blogcard-footer.internal-blogcard-footer.cf {
	height:1.6em;
}

.blogcard-wrap {
	margin-left:0;
	margin-right:0;
	width:100%;
}

/* モバイルのヘッダ部分 */
ul.mobile-header-menu-buttons  {
	background-color:rgba(245, 183, 0,1);
 color:var(--color-white)f;
}

/* モバイルのメニュー */
.navi-menu-content { 
	background-color:rgba(255,255,255,0.6);
	-webkit-backdrop-filter: blur(20px);
		backdrop-filter: blur(20px);
}

/* モバイルメニューの後ろのオーバレイ */
#navi-menu-close {
	background:var(--color-white);
}

.navi-menu-close-button { /* クローズボタン */
	color:var(--color-primary);
	opacity:0.6;
}


.menu-close-button {
    display: block;
    cursor: pointer;
    text-align: right;
    font-size: 2em;
    padding: 0em 30px;
}


@media screen and (max-width: 480px) {
    .menu-content {
        max-width: 70%;
    }
}

#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 {
    display: block;
    opacity: 0;
}


.menu-drawer a { /* メニューアイテム */
	color:var(--color-text);
	font-size:16px;
	font-weight:700;
}
.menu-drawer a:hover { 
	background:none;
}

/* モバイルメニューアイコン*/
.mobile-menu-buttons .menu-icon {
	font-size:25px;
	opacity:0.7;
    color:var(--color-white);
}

/* モバイルメニューアイコンの下の文字*/
.mobile-menu-buttons .menu-caption {
	display:none;
}



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

.header-in { 
	min-height: 400px;
	}
	
}

/*834px以下*/
@media screen and (max-width: 834px){

  /* --- 1階層目 --- */
  .navi-menu-content .menu-drawer > .menu-item > a {
    font-weight: 700;              /* 太字 */
    font-size: 16px;             /* やや大きく */
    color: var(--color-text);                /* 濃い文字色 */
    text-transform: none;          /* 必要なら大文字化を防止 */
    border-bottom: 1px solid rgba(0,0,0,0.1); /* 区切り線を追加（任意） */
    padding: 12px 20px;            /* 余白を広く */
  }

  /* --- 2階層目 --- */
  .navi-menu-content .menu-drawer .sub-menu > .menu-item > a {
    font-weight: 400;              /* 標準 */
    font-size: 15px;               /* 少し小さく */
	line-height:0.5em;
    color: var(--color-text-light);                /* やや淡い文字色 */
    padding: 10px 30px;            /* インデントを少し右へ */
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
		.entry-title, .article h2 {
		padding:0.6em 1em;
	}

}