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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/*ヘッダーの文字と背景の色を変える*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #627535;
	color: #FFFFFF;
}

.logo-menu-button.menu-button{
	background-color: #627535;
}/*必要ならばここにコードを書く*/

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

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

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









/* モバイルビューのときにヘッダーのロゴを画面幅一杯に表示_240428追加*/
/* モバイルビューのときにヘッダーのロゴを画面幅一杯に表示 */
@media screen and (max-width: 767px) {
  .header-container-in.hlt-top-menu {
    display: flex;
    flex-direction: column;
  }

  .header-container-in.hlt-top-menu .logo-header {
    max-width: 100% !important;
    width: 100% !important;
    text-align: center;
    margin: 0 auto 15px !important;
    padding: 0 10px;
  }

  .header-container-in.hlt-top-menu .logo-header img {
    max-width: 100% !important;
    height: auto;
  }

  .header-container-in.hlt-top-menu .navi-in > ul,
  .header-container-in.hlt-top-menu .search-box {
    justify-content: center;
    margin-top: 15px !important;
  }
}





/* 240428追加 */
/* モバイルビューのときにヘッダーのロゴを画面幅一杯に表示 */
@media screen and (max-width: 767px) {
    .header-container-in.hlt-top-menu .site-name-text-link {
        display: block;
        max-width: 100%;
        width: 100%;
        text-align: center;
        margin: 0 auto 15px;
        padding: 0 10px;
    }

    .header-container-in.hlt-top-menu .site-name-text-link img {
        max-width: 100%;
        height: auto;
    }

    .header-container-in.hlt-top-menu .navi,
    .header-container-in.hlt-top-menu .search-box {
        display: block;
        margin-top: 15px;
        text-align: center;
    }
}





/* 240428_1515追加_モバイル版のグローバルメニューを一列にする */
@media screen and (max-width: 768px) {
  #navi .navi-in > .menu-mobile {
    display: flex; /* Flexboxを利用してメニュー項目を整列させます */
    flex-wrap: wrap; /* 項目が多い場合に次の行に折り返すようにします */
    justify-content: space-between; /* 項目間の余白を均等にします */
  }

  #navi .navi-in > .menu-mobile li {
    flex-grow: 1; /* すべての項目が均等に幅を取るようにします */
    max-width: 50%; /* 最初の2つの項目は50%の幅、3つ目以降は25%の幅を持つように調整 */
  }

  #navi .navi-in > .menu-mobile li:nth-child(n+3) {
    max-width: 25%; /* 3番目以降のメニュー項目の最大幅を25%に設定 */
  }

  #navi .navi-in > .menu-mobile li a {
    font-size: 14px; /* フォントサイズを14pxに設定 */
  }
}




/* 240428_1542追加グローバルメニューを枠で囲んで、角を丸く */






/* 240428_19:25追加 */
.metaslider-above-menu {
    /* 必要に応じてスタイルを調整 */
    margin-bottom: 20px;
}



/* 親テーマのスタイルを上書き */
#spotlight .footer {
    background-color: transparent !important; /* 背景を透明に */
}

/* 既存のスタイルを上書き */
body:has(#spotlight.show) .header,
#spotlight .header {
    background-color: transparent; /* または rgba(0, 0, 0, 0) */
}