@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){
  /* ヘッダー下のモバイルメニュー
     Cocoon標準は #navi .navi-in > .menu-mobile li { width: 50% } の2列。
     項目が6つあると2列×3行＝120pxのオレンジの帯になり、ヘッダー(250px)と
     合わせてファーストビューの4割超を占めてしまう。3列×2行＝80pxに詰める。
     ※親テーマ側の詳細度が (1,2,2) なのでセレクタを合わせないと効かない。
     ※下部固定バーは別メニュー「モバイルボタン」(主要4つ)が担当。 */
  #navi .navi-in > .menu-mobile {
    flex-wrap: wrap;
  }
  #navi .navi-in > .menu-mobile li {
    width: 33.3333%;
  }
}

/*834px以下*/
@media screen and (max-width: 834px){
  /* ヘッダーの高さ
     Cocoonの「ヘッダー高さ」設定がカスタマイザーから
     .header div.header-in { min-height: 250px } を出力している。
     モバイルではロゴの実寸が136px(画像116px＋上下padding10px)しかないため、
     114pxがまるまる余白になりファーストビューを圧迫していた。
     PCはロゴが大きく250pxを超えるので設定は生きたまま。上書きはモバイル限定。
     ※親テーマ側の詳細度が (0,2,1) なのでセレクタを合わせる。 */
  .header div.header-in {
    min-height: 0;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  /* 3列にすると1セル約120px。「Web参考書」が折り返さないよう少しだけ詰める */
  #navi .navi-in > .menu-mobile li a {
    font-size: 13px;
  }
}