@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){
  /*必要ならばここにコードを書く*/
}


/* ==========================================
   スマホ表示調整（ナビ横スクロール ＋ メニュー白背景化）
   ========================================== */
@media screen and (max-width: 768px) {

  /* 1. ヘッダーナビの横スクロール（左端「くらし」から表示） */
  #navi,
  #navi .navi-in,
  #navi .menu-header-container,
  .navi-in {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #navi .navi-in > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    width: max-content !important;
    margin: 0 !important;
    padding: 0 15px !important;
  }

  #navi .navi-in > ul > li {
    flex: 0 0 auto !important;
  }

  #navi .navi-in > ul > li a {
    font-size: 14px !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }

  /* 2. MENUボタン開閉時の背景（白）と文字色（濃いグレー） */
  #navi-menu-content,
  .navi-menu-content,
  #drawer-menu,
  .drawer-menu-content,
  .menu-header-container {
    background-color: #ffffff !important;
  }

  #navi-menu-content a,
  .navi-menu-content a,
  #drawer-menu a,
  .drawer-menu-content a,
  .menu-header-container a {
    color: #222222 !important;
    font-size: 16px !important;
    font-weight: bold !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid #eeeeee !important;
    background-color: #ffffff !important;
    display: block !important;
  }

}

/* スマホのMENU展開時：背景白・文字黒に強制的変更 */
@media screen and (max-width: 768px) {

  /* 1. メニュー内の全要素（枠・リスト・文字）の背景を白にする */
  #navi-menu-content,
  #navi-menu-content *,
  .navi-menu-content,
  .navi-menu-content *,
  .menu-content,
  .menu-content * {
    background-color: #ffffff !important;
    background: #ffffff !important;
  }