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

/* 展開/折り畳みアイコン */
.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;
}

/* アイコンの表示 */
/* Unityチュートリアルのアイコン */
.cat-item-4 > .category-name::before {
  font-family: "Font Awesome 5 Brands";
  content: "\e049";
  padding-right: 5px;
  font-weight: 400;
  display: inline-block;
}

/* 開発ツールのアイコン */
.cat-item-13 > .category-name::before {
  font-family: "Font Awesome 5 Free";
  content: "\f7d9";
  padding-right: 5px;
  font-weight: 900;
  display: inline-block;
}

/* 親カテゴリー名 */
.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;
}

/************************************
****　タイトルフォント
************************************/

.logo-header a span{
font-family: 'DotGothic16','Helvetica Neue';
font-weight: bold;
font-size:60px;
text-shadow:2px 2px 0 #333333, -2px -2px 0 #333333,
              -2px 2px 0 #333333, 2px -2px 0 #333333,
              0px 2px 0 #333333,  0 -2px 0 #333333,
              -2px 0 0 #333333, 2px 0 0 #333333;
}

/*キャッチフレーズのフォント変更-文字黒*/
.tagline{
font-family: 'Avenir','Helvetica Neue';
font-weight: bold;
font-size:24px;
text-shadow:1px 1px 0 #333, -1px -1px 0 #333,
              -1px 1px 0 #333, 1px -1px 0 #333,
              0px 1px 0 #333,  0 -1px 0 #333,
              -1px 0 0 #333, 1px 0 0 #333;
}


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

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

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

/************************************
****　全体のバランス
************************************/
.entry-content {/*本文下の空白を削除*/
padding-bottom: 0;
margin-bottom: 0;
}
@media (max-width: 1023px){
article > .entry-content, aritcle > footer.article-footer {/*本文左右の空白*/
padding: 0 20px;
}
}
@media screen and (max-width: 880px){
.page-body {
font-size: 16px;
}
}
@media screen and (max-width: 480px){
.page-body {
font-size: 15px;
}
}
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;
}