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

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

/* スタイルの基本設定 */
.sidebar ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

/* 親カテゴリアイテム */
.sidebar .cat-item > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px; /* パディングを狭める */
  text-decoration: none;
  color: #000;
}

/* 子カテゴリのリスト */
.sidebar ul.children {
    display: none; /* 初期状態は非表示 */
    padding-left: 20px; /* 子要素のインデントを増やす */
}

/* 親カテゴリアイテム */
.sidebar .cat-item > a {
  justify-content: left;
}

.cat-item > a .post-count {
    margin-left: auto;
}

.cat-item > a .expand-collapse-icon {
    margin-left: auto;
}

/* 親カテゴリアイテムの前にアイコンを表示 */
.sidebar .cat-item > a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f07c"; /* フォルダアイコン */
  margin-right: 5px;
}

/* 子カテゴリアイテムの前にアイコンを表示 */
.sidebar .cat-item .children .cat-item > a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f07c";
  margin-right: 5px;
}

/* 展開/折り畳みアイコン */
.sidebar .expand-collapse-icon {
  user-select: none; 
}

/* "＋" アイコンを右に寄せるためのスタイル */
.expand-collapse-icon {
    float: right;
    cursor: pointer;
}

/* リンクのクリック領域拡大 */
.cat-item > a {
    display: block;
}

/* 子要素がない場合の"＋" アイコンを非表示 */
.cat-item:not(:has(ul.children)) .expand-collapse-icon {
    display: none;
}

/* アコーディオンの開閉記号のスタイル */
.sidebar .accordion-toggle {
    cursor: pointer;
    float: right; /* 右側に配置 */
    user-select: none; /* テキスト選択を無効にする */
}

/* カテゴリー名がクリック可能であることを示すスタイル */
.category-name {
  cursor: pointer;
  text-align: left;
}
.category-name span::before {
  cursor: pointer;
  text-align: left;
}

/* WordPress による自動生成スタイルをオーバーライド */
.cat-item > span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  text-decoration: none;
  color: #000;
}

/* 子リスト要素は初期状態で非表示 */
.children {
  display: none;
}

/* アイコンの表示 */
.cat-item > a::before,
.cat-item > span::before {
  font-family: "Font Awesome 5 Free";
  padding-right: 5px;
  font-weight: 900;
}

.cat-item [class*="cat-item-"] > a::before,
.cat-item [class*="cat-item-"] > span::before {
  content: "\f07c"; /* フォルダアイコン */
}
.cat-item-46 > a::before,
.cat-item-46 > span::before {
  font-family: "Font Awesome 5 Free";
  content: "\f02d"; /* ブックアイコン */
  padding-right: 5px;
  font-weight: 900;
}
.cat-item-5 > a::before,
.cat-item-5 > span::before {
  content: "\f11b"; /* ゲームアイコン */
}

.cat-item-12 > a::before,
.cat-item-12 > span::before {
  content: "\f5fc"; /* ディスプレイアイコン */
}
.cat-item-17 > a::before,
.cat-item-17 > span::before {
  content: "\f2e7"; /* 食事アイコン */
}
.cat-item-39 > a::before,
.cat-item-39 > span::before {
  content: "\f290"; /* 鞄アイコン */
}
.cat-item-3 > a::before,
.cat-item-3 > span::before {
  font-family: "Font Awesome 5 Free";
  content: "\f201"; /* チャートアイコン */
  padding-right: 5px;
  font-weight: 900;
}

/* 親カテゴリー名 */
.sidebar .category-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  cursor: pointer;
  color: #000;
  width: 100%;
	flex-grow: 1;
}

/* アコーディオンの開閉記号 */
.sidebar .accordion-toggle {
  cursor: pointer;
  user-select: none;
 margin-left: auto;
}

/* 子リストの初期表示を非表示にする */
ul.children {
    display: none;
}

.accordion-toggle {
    cursor: pointer;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
article > .entry-content, aritcle > footer.article-footer {/*本文左右の空白*/
padding: 0 20px;
}
}

/*834px以下*/
@media screen and (max-width: 834px){
.page-body {
font-size: 16px;
}
}

/*480px以下*/
@media screen and (max-width: 480px){
.page-body {
font-size: 15px;
}
}

/************************************
****　全体のバランス
************************************/
.entry-content {/*本文下の空白を削除*/
padding-bottom: 0;
margin-bottom: 0;
}

img{
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}
a {
 -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.body .article {/*本文SNSフォロー下の空白*/
margin-bottom: 0;
}