/* モバイルの隙間を強制削除（最優先） */
@media screen and (max-width: 1023px) {
  html, body { margin-top: 0 !important; padding-top: 0 !important; }
  #mobile-header, .mobile-header { display: none !important; height: 0 !important; }
  .entry-content { margin-top: -50px !important; }
}
/* -------------------------------------- */


@charset "UTF-8";
/* --- サイト全体の隙間ゼロ化コード --- */

/* 1. 全体の余白と幅制限を解除 */
.wrap, #content, #main, .entry-content {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* 2. ヘッダー・メニュー・情報エリアを非表示 */
#header, .header-container, .mobile-header,
.mobile-menu-buttons, .mobile-header-menu-buttons,
.article-header, .date-tags, .breadcrumb, .breadcrumb-div {
  display: none !important;
  height: 0 !important;
}

/* 3. 最初の要素の上余白削除 */
.entry-content > *:first-child {
  margin-top: 0 !important;
}

/* 4. モバイル用調整 */
@media screen and (max-width: 1023px) {
  #content, .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  #main {
    margin-top: -1px !important;
  }
  .vk_mobile_nav {
    display: none !important;
  }
}

/* 5. 横スクロール防止 */
body {
  overflow-x: hidden;
}

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.5
*/

/************************************
** 基本スタイル
************************************/

/*ヘッダーモバイルボタンの文字色と背景色を変更*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
    background: transparent; /* 修正 */
    color: #fff; /* 修正 */
}

.logo-menu-button.menu-button{
    background: transparent;
}

.mobile-menu-buttons{
    background: transparent;
}

/*ナビゲーションメニュー背景透明化*/
.navi {
    background-color: transparent;
}

#main, #footer {
    background: transparent;
}

/* 全幅指定の調整 */
.full-width {
    margin: 0 calc(50% - 50vw) !important;
    padding: 0 calc(50vw - 50%) !important;
    width: 100vw;
}

/* yoko100の調整 */
.yoko100 {
    position: relative;
}
.yoko100::after {
    content: "";
    background: pink;
    width: 100vw;
    height: 100%;
    display: block;
    position: absolute;
    left: calc(-50vw + 50%);
    top: 0;
    z-index: -1;
}

/************************************
** PC向けレイアウト (1024px以上)
************************************/
@media screen and (min-width: 1024px) {
    #footer {
        background-position: 0 15%;
        height: 100px;
    }
}

/************************************
** タブレット・スマホ向け (1023px以下)
************************************/
@media screen and (max-width: 1023px){
    
    /*モバイルメニュー 文字消す*/
    .mobile-menu-buttons .menu-caption{
        display: none;
    }
    .mobile-menu-buttons{
        align-items: center;  
    }

    /*モバイルメニュー背景色*/
    .navi-menu-content {
        background-color: #000000;
    }

    /*×アイコンを移動*/
    .menu-close-button {
        padding-top: 15px;
        padding-left: 25px;
        padding-bottom: 30px;
        text-align: left;
        font-size: 1.3em;
    }
    
    .menu-drawer a {
        font-size: 0.9em;
        line-height: 1.6em;
        border-bottom: solid 1px #e6e6e6;
    }
    .menu-drawer a:hover {
        background-color:#ffc0cb; /*マウスオーバー時の背景色*/
    }
    .sub-menu li {
        margin-left:-3px;
        font-size: 0.9em;
        color: #e6e6e6;
    }

    /*スライドインメニューをカスタマイズ*/
    .navi-menu-content{
        left: auto;
        right: 0;
        background-color: rgba(30,124,209,0.5);
        transform: translateX(101%);
    }

    .menu-drawer a{
        font-size: 1.1em;
        color: #ffffff;
        height: 3em;
    }

    .menu-drawer a:hover{
        color: rgba(255,255,255,0.7);
        background-color: rgba(30,124,209,0);
    }
    
    .vk-mobile-nav-menu-btn {
        left:auto;
        right:5px;
    }

} 

/* =========================================
   PCとスマホで表示を切り替える設定
   ========================================= */

/* PCのみ表示するクラス（スマホでは消す） */
@media screen and (max-width: 1023px) {
    .pc-only {
        display: none !important;
    }
}

/* スマホのみ表示するクラス（PCでは消す） */
/* まずPCサイズでは消しておく */
.sp-only {
    display: none !important;
}

/* スマホサイズになったら復活させる */
@media screen and (max-width: 1023px) {
    .sp-only {
        display: block !important;
    }
}




/* 1. 元々の三本線（SVG）を消す */
.custom-hamburger-icon .wp-block-navigation__responsive-container-open svg {
    display: none !important;
}

/* 2. 代わりに好きな画像を表示する */
.custom-hamburger-icon .wp-block-navigation__responsive-container-open {
    /* ↓ここにURLを貼る（カッコの中に引用符 ' ' は残してください） */
    background-image: url('https://toycap-c.com/wp-content/uploads/2025/12/f4e0cc019d1e6d50f1eebc4289222f61.png');
    
    background-size: contain; /* 画像全体を表示 */
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent !important; /* 背景色を透明に */
    
    /* ↓アイコンのサイズ調整（お好みで数字を変えてください） */
    width: 40px !important; 
    height: 40px !important;
}

/* ナビゲーションメニューの背景を「すりガラス」にする */
.wp-block-navigation__responsive-container {
    background-color: rgba(0, 0, 0, 0.6) !important; /* 黒の半透明（0.6をいじると濃さが変わる） */
    backdrop-filter: blur(10px) !important; /* すりガラスのようなぼかし効果 */
}

/* メニューの文字を白く、太くする（見やすくするため） */
.wp-block-navigation__responsive-container .wp-block-navigation-item__content {
    color: #ffffff !important;
    font-weight: bold !important;
}

/* =================================================== */
/* 【修正版】メニューが開いた時だけ全画面＆中央にする */
/* =================================================== */

/* 1. 普段（閉じている時）は絶対に表示させない */
.wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
}

/* 2. 「開いた時（is-menu-open）」だけ全画面・中央表示にする */
.wp-block-navigation__responsive-container.is-menu-open {
    display: flex !important; /* フレックスボックスで配置 */
    flex-direction: column !important; /* 縦並び */
    justify-content: center !important; /* 上下の真ん中 */
    align-items: center !important; /* 左右の真ん中 */
    
    position: fixed !important; /* 画面全体に固定 */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    z-index: 100000 !important; /* 最前面に持ってくる */
    
    padding: 20px !important; /* 端っこの余白確保 */
    margin: 0 !important;
    
    /* 背景色（もしCSSで指定する場合） */
    /* background-color: rgba(0, 0, 0, 0.9) !important; */
}

/* 3. 中身のリストも中央揃えにする */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* 4. メニュー項目ごとの調整 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 0px !important; /* 項目同士の間隔 */
}

/* 5. 閉じるボタン（×）の位置調整 */
.wp-block-navigation__responsive-container-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 100001 !important;
}

/* メニュー全体を「上の方」に配置し直す */
.wp-block-navigation__responsive-container.is-menu-open {
    justify-content: flex-start !important; /* 「真ん中」をやめて「上」に詰める */
    padding-top: 0px !important;          /* 上からこの分だけ下げる（★ここを調整） */
}

/* メニューのリスト全体を、さらに上にズラす設定 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    margin-top: -20px !important; /* ★この数字を調整 */
    padding-top: 0 !important;
}