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

/* ==========================================================================
   Cocoonスマホメニュー：余白完全排除・天然回帰スタイル
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* 1. 外枠のパディングを強制的にゼロにする */
    #flyout-menu, 
    #flyout-menu .menu-drawer,
    #flyout-menu .menu-drawer ul {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        background-color: #ffffff !important;
    }

    /* 2. 閉じるボタンを右上に配置（重なり回避） */
    .menu-close-button {
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        font-size: 22px !important;
        color: #bbb !important;
        z-index: 9999;
    }

    /* 3. 上部メニューリスト：左端からの余白を調整 */
    #flyout-menu .menu-drawer li a {
        padding-left: 30px !important; /* リストは少し右に寄せて美しく */
        border-bottom: 1px solid #f8f8f8 !important;
        font-family: "Yu Mincho", serif !important;
        font-size: 15px !important;
        letter-spacing: 0.15em !important;
        color: #222 !important;
    }

    /* 4. カスタムグリッド：ここが最重要（左右の隙間を消す） */
    /* 親の li 自体が持っている余白を消す */
    #flyout-menu .menu-drawer li:has(.menu-custom-grid) {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .menu-custom-grid {
        display: block !important;
        width: 100% !important;
        margin: 50px 0 0 0 !important; /* 上のメニューと距離を空ける */
        padding: 0 !important;
        border-top: 1px solid #f2f2f2 !important;
    }

    .grid-row {
        display: flex !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #f2f2f2 !important;
    }

    .grid-row a {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 80px !important;
        margin: 0 !important;
        padding: 0 !important; /* 余計なパディングをすべて削除 */
        color: #888 !important;
        font-size: 11px !important;
        font-family: "Yu Mincho", serif !important;
        border-right: 1px solid #f2f2f2 !important;
        letter-spacing: 0.1em !important;
        white-space: nowrap !important;
    }

    .grid-row a:last-child {
        border-right: none !important;
    }

    /* 不要なアイコン・矢印を完全に隠す */
    #flyout-menu .fa, #flyout-menu .fas, #flyout-menu a::after {
        display: none !important;
    }
}