@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){
  /*必要ならばここにコードを書く*/
}
/* =========================
   ヘッダーメニュー区切り
========================= */

/* PC表示：縦線 */
#navi .menu-item a {
  border-right: 1px solid rgba(0,0,0,0.2);
}

#navi .menu-item:last-child a {
  border-right: none;
}

#navi .menu-item a:hover {
  background-color: #f5f5f5;
}

/* =========================
   スマホ表示：ボタン感を強化
========================= */
@media screen and (max-width: 767px) {
  #navi .menu-item a {
    border-bottom: 1px solid #ddd;
    margin: 4px 6px;
    padding: 12px 10px;
    background-color: #f9f9f9;
    border-radius: 6px;
  }

  #navi .menu-item a:active {
    background-color: #eaeaea;
  }
}

@media screen and (max-width: 767px) {
  #navi .current-menu-item > a {
    background-color: #e0e7ff; /* 薄い強調色 */
    font-weight: bold;
  }
}

/* ===== スマホ用 ナビ操作性の微調整 ===== */

/* ① タップ時の反応を出す */
@media screen and (max-width: 767px) {
  #navi .menu-item a:active {
    transform: scale(0.98);
  }
}

/* ② 現在地をより明確にする */
@media screen and (max-width: 767px) {
  #navi .current-menu-item > a {
    border: 1px solid #c7d2fe;
  }
}