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


/************************************
** Header navigation compact layout
************************************/
@media screen and (min-width: 1024px){
  #navi{
    background:#f6fbfa;
    border-top:1px solid #d7e2df;
    border-bottom:1px solid #d7e2df;
  }
  #navi .navi-in.wrap{
    max-width:1180px;
  }
  #navi .menu-header{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:nowrap;
    gap:6px;
    height:60px;
  }
  #navi .menu-header > .menu-item{
    width:auto;
    flex:0 0 auto;
  }
  #navi .menu-header > .menu-item > a{
    box-sizing:border-box;
    height:42px;
    padding:0 10px;
    border:1px solid #cfdeda;
    border-radius:6px;
    background:#fff;
    color:#245f5a;
    font-size:13px;
    font-weight:700;
    line-height:1.25;
    white-space:nowrap;
    box-shadow:0 1px 2px rgba(36,95,90,.08);
    transition:background-color .16s ease,color .16s ease,border-color .16s ease;
  }
  #navi .menu-header > .menu-item.current-menu-item > a,
  #navi .menu-header > .menu-item.current-menu-parent > a,
  #navi .menu-header > .menu-item.current-post-ancestor > a,
  #navi .menu-header > .menu-item > a:hover{
    background:#245f5a;
    border-color:#245f5a;
    color:#fff;
    text-decoration:none;
  }
  #navi .menu-header .caption-wrap{
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  #navi .menu-header .item-label{
    white-space:nowrap;
  }
}