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

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

/* ========= ヘッダー全体 ========= */
.header-container-in{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:flex-end !important;
  max-width:1200px;
  margin:0 auto;
  padding:24px 20px 0;
}

/* ロゴを上段左に固定 */
.logo-header,
.site-logo,
.header-logo{
  width:100% !important;
  text-align:left !important;
  margin:0 0 18px 0 !important;
}

/* ロゴ画像・文字サイズ */
.site-logo a,
.header-logo a{
  display:inline-block;
}

.header-logo-image img,
.site-logo-image img,
.logo-image img{
  max-height:88px !important;
  width:auto;
}

/* ========= ナビを下段いっぱいに ========= */
#navi,
.navi{
  width:100% !important;
  background:#f3f3f1;
  border-top:1px solid #e3e3df;
  border-bottom:1px solid #e3e3df;
}

.navi-in > ul{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:space-between !important;
  align-items:center !important;
  margin:0 !important;
  padding:0 !important;
}

.navi-in > ul > li{
  flex:1 1 0 !important;
  text-align:center !important;
  border-left:1px solid #e3e3df;
}

.navi-in > ul > li:first-child{
  border-left:none;
}

.navi-in > ul > li > a{
  display:block !important;
  padding:18px 10px !important;
  font-size:16px !important;
  letter-spacing:0.04em;
  text-decoration:none;
}

/* ホバー */
.navi-in > ul > li > a:hover{
  background:#ecece8;
}

/* 現在地 */
.navi-in > ul > li.current-menu-item > a,
.navi-in > ul > li.current_page_item > a{
  background:#e8e8e3;
}

/* ========= 下層ページの混在感を軽減 ========= */
.page .content,
.page #content,
.single .content,
.single #content{
  padding-top:24px;
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* ナビ背景を全幅に */
#navi,
.navi{
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  background:#f3f3f1;
  border-top:1px solid #e3e3df;
  border-bottom:1px solid #e3e3df;
}

/* 中身は中央幅 */
#navi .navi-in{
  max-width:1200px;
  margin:0 auto;
}
/* 左端の線 */
.navi-in > ul{
  border-left:1px solid #e3e3df;
}

/* 右端の線 */
.navi-in > ul > li:last-child{
  border-right:1px solid #e3e3df;
}