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

/************************************
** 記事一覧レイアウト崩れの修正のみ
************************************/

.mainBlock dl, 
.mainBlock dl dt, 
.mainBlock dl dd {
    float: none !important;
    width: auto !important; 
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mainBlock dl dt img {
    width: 100% !important; 
    height: auto !important;
    max-width: 120px !important;
}

#main_container,
#container {
    float: none !important;
    width: auto !important;
}

/* ============================
   WordPress側のヘッダーを130pxに強制 (最優先)
   ============================ */
@media screen and (min-width: 768px) {
    /* ヘッダー全体 */
    body.blog header.nav_2,
    body.archive header.nav_2,
    body.single header.nav_2,
    body.page header.nav_2,
    body.search header.nav_2,
    body.category header.nav_2,
    body.tag header.nav_2,
    header.nav_2 {
        min-height: 130px !important;
        height: auto !important;
        margin-bottom: 10px !important;
    }
    
    /* head_in */
    body.blog header.nav_2 #head_in,
    body.archive header.nav_2 #head_in,
    body.single header.nav_2 #head_in,
    body.page header.nav_2 #head_in,
    header.nav_2 #head_in {
        height: auto !important;
        min-height: 130px !important;
        position: relative !important;
        background-color: #F9F8F4 !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* head_m */
    body.blog header.nav_2 #head_in #head_m,
    body.archive header.nav_2 #head_in #head_m,
    body.single header.nav_2 #head_in #head_m,
    body.page header.nav_2 #head_in #head_m,
    header.nav_2 #head_in #head_m {
        min-height: 130px !important;
        padding: 10px 20px !important;
        max-width: 1170px !important;
        width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    
    /* 左側エリア */
    body.blog header.nav_2 #head_in #head_l,
    body.archive header.nav_2 #head_in #head_l,
    body.single header.nav_2 #head_in #head_l,
    body.page header.nav_2 #head_in #head_l,
    header.nav_2 #head_in #head_l {
        display: block !important;
        float: left !important;
        width: 35% !important;
        min-width: 300px !important;
        margin-top: 10px !important;
    }
    
    header.nav_2 #head_in #head_l h1 {
        font-size: 15px !important;
        color: #1D2088 !important;
        font-weight: normal !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }
    
    header.nav_2 #head_in #head_l h2 {
        font-size: 11px !important;
        color: #666 !important;
        font-weight: normal !important;
        line-height: 1.5em !important;
        margin: 5px 0 0 0 !important;
    }
    
    /* 中央ロゴ */
    body.blog header.nav_2 #head_in #head_c,
    body.archive header.nav_2 #head_in #head_c,
    body.single header.nav_2 #head_in #head_c,
    body.page header.nav_2 #head_in #head_c,
    header.nav_2 #head_in #head_c {
        display: block !important;
        float: left !important;
        width: 25% !important;
        min-width: 200px !important;
        text-align: center !important;
        margin-top: 15px !important;
    }
    
    header.nav_2 #head_in #head_c img {
        width: 90% !important;
        max-width: 310px !important;
    }
    
    /* 右側エリア */
    body.blog header.nav_2 #head_in #head_r,
    body.archive header.nav_2 #head_in #head_r,
    body.single header.nav_2 #head_in #head_r,
    body.page header.nav_2 #head_in #head_r,
    header.nav_2 #head_in #head_r {
        display: block !important;
        float: left !important;
        width: 35% !important;
        min-width: 300px !important;
        text-align: right !important;
        font-size: 11px !important;
        margin-top: 10px !important;
    }
    
    /* グローバルナビ */
    body.blog header.nav_2 .nav_bb,
    body.archive header.nav_2 .nav_bb,
    body.single header.nav_2 .nav_bb,
    body.page header.nav_2 .nav_bb,
    header.nav_2 .nav_bb {
        display: block !important;
    }
    
    body.blog header.nav_2 .h_nav,
    body.archive header.nav_2 .h_nav,
    body.single header.nav_2 .h_nav,
    body.page header.nav_2 .h_nav,
    header.nav_2 .h_nav {
        display: block !important;
    }
    
    /* ボタン */
    body.blog header.nav_2 .btn_head,
    body.archive header.nav_2 .btn_head,
    body.single header.nav_2 .btn_head,
    body.page header.nav_2 .btn_head,
    header.nav_2 .btn_head {
        display: flex !important;
    }
}
/* ============================
   WordPress側のロゴ画像を静的サイトと同じ高さに
   ============================ */
@media screen and (min-width: 768px) {
    /* ロゴ画像を90pxに固定 */
    body header.nav_2 #head_in #head_c img,
    body.blog header.nav_2 #head_in #head_c img,
    body.single header.nav_2 #head_in #head_c img,
    body.archive header.nav_2 #head_in #head_c img,
    body.page header.nav_2 #head_in #head_c img,
    header.nav_2 #head_in #head_c img {
        height: 60px !important;
        width: auto !important;
        max-width: none !important;
    }
    
    /* ロゴを囲むdivの高さも調整 */
    body header.nav_2 #head_in #head_c,
    body.blog header.nav_2 #head_in #head_c,
    body.single header.nav_2 #head_in #head_c,
    body.archive header.nav_2 #head_in #head_c,
    body.page header.nav_2 #head_in #head_c,
    header.nav_2 #head_in #head_c {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 110px !important;
    }
    
    /* ヘッダー全体の最小高さ */
    body header.nav_2 #head_in,
    body.blog header.nav_2 #head_in,
    body.single header.nav_2 #head_in,
    body.archive header.nav_2 #head_in,
    body.page header.nav_2 #head_in,
    header.nav_2 #head_in {
        min-height: 110px !important;
    }
    
    body header.nav_2 #head_in #head_m,
    body.blog header.nav_2 #head_in #head_m,
    body.single header.nav_2 #head_in #head_m,
    body.archive header.nav_2 #head_in #head_m,
    body.page header.nav_2 #head_in #head_m,
    header.nav_2 #head_in #head_m {
        min-height: 110px !important;
    }
}

/* 🎯 PC版グローバルナビゲーションのフォントサイズを大きく */
@media screen and (min-width: 768px) {
    /* ナビゲーションリンクのフォントサイズ */
    body header.nav_2 ul.h_nav_1 li,
    body.blog header.nav_2 ul.h_nav_1 li,
    body.single header.nav_2 ul.h_nav_1 li,
    header.nav_2 ul.h_nav_1 li {
        font-size: 16px !important;  /* 👈 13px → 16px に変更 */
    }
    
    body header.nav_2 ul.h_nav_1 li a,
    body.blog header.nav_2 ul.h_nav_1 li a,
    body.single header.nav_2 ul.h_nav_1 li a,
    header.nav_2 ul.h_nav_1 li a {
        font-size: 16px !important;  /* 👈 13px → 16px に変更 */
        padding: 8px 12px !important;  /* 👈 余白も少し広げる */
    }
    
    /* アイコンサイズも少し大きく */
    header.nav_2 .h_nav_1 li:nth-child(1):before,
    header.nav_2 .h_nav_1 li:nth-child(2):before,
    header.nav_2 .h_nav_1 li:nth-child(3):before,
    header.nav_2 .h_nav_1 li:nth-child(4):before {
        width: 24px !important;  /* 👈 20px → 24px に変更 */
        height: 24px !important;  /* 👈 20px → 24px に変更 */
        margin-right: 6px !important;
    }
    
    /* ナビゲーション全体の高さも調整 */
    body header.nav_2 .nav_bb,
    header.nav_2 .nav_bb {
        padding: 2px 0 !important;  /* 上下の余白を少し追加 */
    }
    
    body header.nav_2 ul.h_nav_1,
    header.nav_2 ul.h_nav_1 {
        padding: 4px 0 !important;  /* 👈 10px → 12px に変更 */
    }
}
/* 🎯 PC版ヘッダー全体をコンパクトに */
@media screen and (min-width: 768px) {
    /* ヘッダー全体の高さを小さく */
    body header.nav_2,
    body.blog header.nav_2,
    body.single header.nav_2,
    header.nav_2 {
        min-height: 100px !important;  /* 👈 ヘッダー全体を80pxに */
        margin-bottom: 0px !important;
    }
    
    body header.nav_2 #head_in,
    body.blog header.nav_2 #head_in,
    body.single header.nav_2 #head_in,
    header.nav_2 #head_in {
        min-height: 100px !important;  /* 👈 内側も80pxに */
        height: auto !important;
    }
    
    body header.nav_2 #head_in #head_m,
    body.blog header.nav_2 #head_in #head_m,
    body.single header.nav_2 #head_in #head_m,
    header.nav_2 #head_in #head_m {
        min-height: 100px !important;  /* 👈 コンテンツエリアも80pxに */
        padding: 20px 20px !important;  /* 👈 上下の余白を減らす */
    }
    
    /* ロゴ画像を小さく */
    body header.nav_2 #head_in #head_c img,
    body.blog header.nav_2 #head_in #head_c img,
    body.single header.nav_2 #head_in #head_c img,
    header.nav_2 #head_in #head_c img {
        height: 60px !important;  /* 👈 ロゴを45pxに縮小 */
        width: auto !important;
        max-width: none !important;
    }
    
    /* ロゴエリアの高さも調整 */
    body header.nav_2 #head_in #head_c,
    body.blog header.nav_2 #head_in #head_c,
    body.single header.nav_2 #head_in #head_c,
    header.nav_2 #head_in #head_c {
        height: 80px !important;  /* 👈 ロゴエリアを60pxに */
        margin-top: 5px !important;
    }
    
    /* 左側(店舗名)と右側(ボタン)も調整 */
    body header.nav_2 #head_in #head_l,
    header.nav_2 #head_in #head_l {
        margin-top: 5px !important;  /* 👈 上の余白を減らす */
    }
    
    body header.nav_2 #head_in #head_r,
    header.nav_2 #head_in #head_r {
        margin-top: 5px !important;  /* 👈 上の余白を減らす */
    }
    
    /* 店舗名のフォントサイズも少し調整 */
    body header.nav_2 #head_in #head_l h1,
    header.nav_2 #head_in #head_l h1 {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }
    
    body header.nav_2 #head_in #head_l h2,
    header.nav_2 #head_in #head_l h2 {
        font-size: 10px !important;
        margin: 3px 0 0 0 !important;
    }
}
/* 🎯 スマホ版ヘッダーをコンパクトに (最優先版) */
@media screen and (max-width: 767px) {
    /* ヘッダー全体を小さく */
    body header.nav_2,
    body.blog header.nav_2,
    body.single header.nav_2,
    body.archive header.nav_2,
    header.nav_2 {
        min-height: 20px !important;  /* 👈 130px → 50px に変更 */
        max-height: 20px !important;
        height: 50px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* #head_in を小さく */
    body header.nav_2 #head_in,
    body.blog header.nav_2 #head_in,
    body.single header.nav_2 #head_in,
    header.nav_2 #head_in {
        min-height: 50px !important;  /* 👈 50pxに固定 */
        max-height: 50px !important;
        height: 50px !important;
        padding: 0 !important;
        margin: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 9999 !important;
    }
    
    /* #head_m を小さく */
    body header.nav_2 #head_in #head_m,
    body.blog header.nav_2 #head_in #head_m,
    body.single header.nav_2 #head_in #head_m,
    header.nav_2 #head_m,
    header.nav_2 div#head_m {
        min-height: 50px !important;  /* 👈 50pxに固定 */
        max-height: 50px !important;
        height: 50px !important;
        padding: 3px 60px !important;  /* 👈 左右60pxは維持(ハンバーガーメニュー分) */
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* ロゴエリアを小さく */
    body header.nav_2 #head_c,
    body.blog header.nav_2 #head_c,
    body.single header.nav_2 #head_c,
    header.nav_2 #head_m #head_c,
    header.nav_2 #head_in #head_c {
        max-height: 44px !important;  /* 👈 44pxに縮小 */
        height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* ロゴ画像を小さく */
    body header.nav_2 #head_c img,
    body.blog header.nav_2 #head_c img,
    body.single header.nav_2 #head_c img,
    header.nav_2 #head_in #head_c img {
        max-height: 25px !important;  /* 👈 40pxに縮小 */
        height: 25px !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* 店舗名を非表示 */
    body header.nav_2 #head_l,
    body.blog header.nav_2 #head_l,
    body.single header.nav_2 #head_l,
    header.nav_2 #head_in #head_l {
        display: none !important;
    }
    
    /* 右側要素を非表示 */
    body header.nav_2 #head_r,
    body.blog header.nav_2 #head_r,
    body.single header.nav_2 #head_r,
    header.nav_2 #head_in #head_r {
        display: none !important;
    }
    
    /* ナビゲーションバー */
    body header.nav_2 .nav_bb,
    header.nav_2 .nav_bb {
        display: block !important;
        border-top: 1px solid #019BD9 !important;
    }
}