@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 ul li {
  position: relative;
}

#navi ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  z-index: 9999;
  width: max-content;
  min-width: 100%;
  white-space: nowrap;
  box-sizing: border-box;

  /* ▼ スクロール対応（修正） */
  max-height: 300px;           /* 表示領域の高さを制限 */
  overflow-y: auto !important; /* 強制的に縦スクロール */
  overscroll-behavior: contain; /* スクロールの外溢れ防止（スマホ） */
}

#navi ul li.menu-item-has-children > a::after {
  content: " ▼";
  font-size: 0.7em;
  margin-left: 0.3em;
}

#navi ul li.open > ul {
  display: block;
}

#navi ul li a {
  display: flex;
  align-items: center;
  padding: 10px;
}


/* ▼ スマホ用のオーバーライド */
@media screen and (max-width: 767px) {
  #navi ul li ul {
    width: 100vw;
    max-width: 100vw;
    overflow-x: auto;
  }

  #navi ul li a {
    white-space: nowrap;
  }
	
	#navi {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  z-index: 9999;
	  background: #84172F; /* メニューの背景色。透明だと下が透けるので注意 */
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 任意：影を付けて浮かせる */
	}

	/* メニューが固定されたぶん、コンテンツを下に押し下げる */
	body {
	  padding-top: 50px; /* naviの高さに応じて調整。例：50px */
	}	
	
}