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

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


/* --- グローバルメニューのホバーエフェクト　2026/8/5追加　お試し --- */

/* 1. 親メニューの配置を基準にする */
.navi-in > ul > li {
  position: relative;
}

/* 2. サブメニューの初期状態（非表示・透明） */
.navi-in > ul li ul {
  position: absolute;
  top: 100%; /* 親メニューの真下に配置 */
  left: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  visibility: hidden; /* 通常時は見えないようにする */
  opacity: 0;         /* 透明度0 */
  transition: all 0.3s ease; /* 0.3秒かけてふわっと表示 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* 影をつけて境界をわかりやすく */
  z-index: 999;
}

/* 3. 親メニューにホバーしたとき（サブメニューを表示する） */
.navi-in > ul li:hover > ul {
  visibility: visible;
  opacity: 1;
}

/* 4. サブメニュー内のリンクの通常時（背景：白 / 文字：濃いグレー） */
.navi-in > ul li ul li a {
  display: block;
  white-space: nowrap; /* 文字の折り返しを防ぐ */
  padding: 12px 20px;
/*   background-color: #4a90e2; /* 通常時の背景は「薄い青」で見やすく */ 
  color: #333333;            /* 文字色は「濃いグレー」で視認性を確保 */
  text-decoration: none;
  transition: all 0.2s ease;
}

/* 5. サブメニュー内のリンクをホバーしたとき（背景：薄い青 / 文字：白） */
.navi-in > ul li ul li a:hover {
/*   background-color: #ffffff; /* ★ここにお好みの「薄い青色」を指定します */ 
  color: #ffffff;            /* ホバー時は文字を「白」にしてくっきり見せる */
}

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

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

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