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


/* より強力なセレクタでスマホのメニュー高さを調整 */
@media (max-width: 768px) {
    body .mean-container .mean-nav ul li a,
    body .mean-container .mean-nav ul li span.pre,
    body .mean-container .mean-nav ul span {
        padding: 1em !important;
        display: block !important;
    }
    
    body .mean-container .mean-nav ul li li a {
        padding: 1em 10% !important;
    }
}

/* スマホでのメニュー項目の高さと文字サイズを調整 */
@media (max-width: 768px) {
    body .mean-container .mean-nav ul li a,
    body .mean-container .mean-nav ul li span.pre,
    body .mean-container .mean-nav ul span {
        padding: 1.5em 1em !important;
        font-size: 13px !important; /* または 4vw */
        display: block !important;
    }
    
    body .mean-container .mean-nav ul li li a {
        padding: 0.8em 10% !important;
        font-size: 17px !important;
    }
}

/* フッターを固定しない（通常フロー） */
#footer {
    position: relative !important;
    bottom: auto !important;
}

/* 横はみ出しを防止 */
body,
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

#content,
.content,
main,
article {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* 画像の横はみ出しを防止 */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* テーブルの横はみ出しを防止 */
table {
    max-width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
}

/* アピールエリアの横はみ出し防止とz-index */
#appeal {
    max-width: 100vw !important;
    overflow: hidden !important;
    z-index: 1 !important;
    position: relative !important;
}
/* ヘッダーとメニューのz-index調整 */
#header {
    z-index: 9999 !important;
}

/* ヘッダーロゴを表示 */
#header .h_logo {
    z-index: 10000 !important;
    position: relative !important;
}

/* ハンバーガーメニューボタンを表示 */
.meanmenu-reveal {
    z-index: 10000 !important;
    position: relative !important;
}

.mean-container {
    z-index: 9999 !important;
}

.mean-container .mean-bar {
    z-index: 9999 !important;
}

.mean-container .mean-nav {
    z-index: 9998 !important; /* メニュー本体は少し下に */
}

/* アピールエリアを下に */
#appeal {
    max-width: 100vw !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

#footer .category-link {
    margin-bottom: 14 !important;
}

footer#footer .category-link a {
    margin-bottom: 0 !important;
}

div.fa-chevron-left::before {
    content: "\f053" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

div.fa-chevron-right::before {
    content: "\f054" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

@media screen and (max-width: 768px) {
  .category-link {
    line-height: 2.4;
  }
}

/* スマホ表示（768px以下）の時だけ、Cocoonの干渉を上書きする */
@media only screen and (max-width: 768px) {
    
    /* 1. 親コンテナ：横並びを許可し、横幅を調整 */
    #footer#footer .footer-btn-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        width: 90% !important;
        margin: 40px auto !important;
    }

    /* 2. aタグ：Cocoonが勝手につける margin-bottom: 8px を 0 にして枠サイズを actual と合わせる */
    #footer#footer .footer-btn-container a {
        flex: none !important;
        width: 50% !important;
        margin-right: 0 !important;
        margin-bottom: 10px !important; /* バナー間の縦の隙間 */
        padding: 0 !important;
        display: block !important;
    }

    /* 3. 中身のボタン：枠内の余白を actual に合わせる */
    #footer#footer .footer-btn-container .footer-btn {
        padding: 14px 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        height: auto !important;
    }

    /* 5個目が右に伸びないようにする設定 */
    #footer#footer .footer-btn-container::after {
        content: "" !important;
        width: 50% !important;
        display: block !important;
    }
}