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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* 背景色を変える */
.main{
    background-color: #1d2327;
}
.a-wrap {
    color: #e5e7eb;
}

/* サイドバーの背景色を変える */
#sidebar {
  background-color: #1d2327;
}
/* .sidebar 内の h3 をバッジ風に */
.sidebar h3 {
  display: inline-block;              /* コンテンツ幅にフィット */
  color: #9ca3af;                     /* 文字色 */
  background: #1d2327;                /* 背景色 */
  padding: 0.1em 0.6em;               /* 枠線と文字の隙間は狭く */
  line-height: 1.2;
  transition: 
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}
/* メニュー項目：控えめな丸・小文字・余白あり */
.menu-item a {
  display: inline-block;              /* コンテンツ幅にフィット */
  border: 1px solid #9ca3af;          /* 細めの枠線 */
  color: #9ca3af !important;                     /* 文字色 */
  background: #1d2327;                /* 背景色 */
  border-radius: 6px;                 /* 控えめな角丸（過度に丸くない） */
  padding: 0.01em 0.6em;              /* 枠線と文字の隙間は狭め */
  font-size: 0.8rem;                  /* 小さめの文字 */
  line-height: 1.3;
  margin: 4px;                        /* 枠線の外側に少し余白 */
  transition: 
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
  cursor: pointer;                    /* ホバー可能な見た目に */
}

/* ホバー（およびフォーカス）時の色変化 */
.menu-item:hover,
.menu-item:focus-visible {
  color: #e5e7eb;                     /* 文字を少し明るく */
  background: #22282d;                /* 背景を少し明るく */
  border-color: #cbd5e1;              /* 枠線も少し明るく */
  outline: none;
}

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

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

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