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

/* --- ベーススタイル・カラー --- */
  :root {
    --primary-color: #003366; /* 信頼感を示すネイビー */
    --accent-color: #d35400; /* 行動を促すオレンジ */
    --bg-light: #f8f9fa;
    --text-main: #333333;
  }
  .fp-wrapper {
    font-family: "Noto Sans JP", sans-serif;
    color: var(--text-main);
    line-height: 1.6;
    max-width: 1000px;
    margin: 0 auto;
  }
  .fp-section {
    margin-bottom: 40px;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }
  .fp-section-title {
    font-size: 1.4rem;
    font-weight: bold;
    border-bottom: 3px solid var(--primary-color);
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: var(--primary-color);
  }

  /* --- ① EEAT（権威性）証明エリア --- */
  .eeat-badge-area {
    display: flex;
    align-items: center;
    background: var(--bg-light);
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 30px;
  }
  .eeat-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-right: 20px;
  }
  .eeat-text h2 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
  }
  .eeat-text p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
  }

  /* --- ② AIO特化ツール群（ファーストビュー） --- */
  .hero-tools {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .tool-btn {
    display: block;
    background: var(--accent-color);
    color: #fff !important;
    text-decoration: none;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    transition: 0.3s;
    box-shadow: 0 4px 6px rgba(211, 84, 0, 0.3);
  }
  .tool-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(211, 84, 0, 0.4);
    opacity: 0.9;
  }
  .tool-btn span.badge {
    display: block;
    font-size: 0.8rem;
    background: #fff;
    color: var(--accent-color);
    width: fit-content;
    margin: 0 auto 10px;
    padding: 3px 10px;
    border-radius: 20px;
  }

  /* --- ③ ニッチペイン別のルーティング --- */
  .niche-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
  }
  .niche-card {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-main);
    display: block;
    background: #fafafa;
    transition: 0.2s;
  }
  .niche-card:hover {
    background: #f0f4f8;
    border-color: var(--primary-color);
  }
  .niche-card h3 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    color: var(--primary-color);
  }
  .niche-card p {
    margin: 0;
    font-size: 0.85rem;
    color: #555;
  }

  /* --- ④ SEO優位記事フィード --- */
  .seo-feed-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .seo-feed-list li {
    border-bottom: 1px dashed #ccc;
    padding: 10px 0;
  }
  .seo-feed-list li:last-child {
    border-bottom: none;
  }
  .seo-feed-list a {
    text-decoration: none;
    color: #0056b3;
    font-weight: bold;
  }
  .seo-feed-list a:hover {
    text-decoration: underline;
  }
  .date-badge {
    font-size: 0.8rem;
    color: #888;
    margin-right: 10px;
  }

  /* --- ⑤ フッター・ボット用サイトマップ --- */
  .bot-sitemap {
    background: #e9ecef;
    padding: 15px;
    border-radius: 6px;
    text-align: center;
    font-size: 0.9rem;
  }
  .bot-sitemap a {
    color: var(--primary-color);
    text-decoration: underline;
  }




/* ===================================
 * ロゴのサイズ調整
 * =================================== */

/* ▼ 1. スマホでのサイズ（デフォルトの制限を解除して自由に設定） */
#logo {
    max-width: none !important; /* 元の300px制限を破壊 */
}
#logo a img {
    width: 250px !important; /* ★スマホでのサイズ（ここをお好みで変更） */
    height: auto !important; /* 縦横比を維持 */
}

/* ▼ 2. PC（画面幅900px以上）でのサイズ */
@media screen and (min-width: 900px) {
    #logo a img {
        width: 550px !important; /* ★PCでのサイズ（ここをお好みで変更） */
    }
}



















/* ===================================================
   【最終修正版】すべてを上書きする絶対的CSS
=================================================== */

/* 1. スマホ版メイン画像：絶対に縦幅を確保する */
@media screen and (max-width: 800px) {
    body #mainimg-box {
        padding-top: 0 !important; 
        height: 60vh !important; /* 画面の高さの60%を強制確保 */
        min-height: 350px !important; /* 最低でも350pxは確保 */
    }
    body .vegas-slide-inner {
        background-size: cover !important;
        background-position: center top !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* 2. スマホ版メニュー：閉じないバグを直し、黒背景・全開にする */
@media screen and (max-width: 800px) {
    /* JSの開閉処理を邪魔しないように display 指定を排除 */
    html body #menubar {
        background: rgba(0,0,0,0.95) !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow-y: auto !important;
        padding-top: 80px !important;
        z-index: 1000 !important;
    }
    html body #menubar ul li ul {
        display: block !important;
        position: static !important;
        background: transparent !important;
    }
    html body #menubar ul li:hover > a, 
    html body #menubar ul li a:hover {
        background: transparent !important;
        color: #fff !important;
    }
    html body #menubar ul li a {
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        color: #fff !important;
        padding: 15px 20px !important;
        text-align: left !important;
    }
    html body #menubar ul li ul li a {
        padding-left: 45px !important;
    }
}

/* 3. F078 文字化け解消 */
body a.ddmenu::before {
    font-family: "Font Awesome 6 Free" !important;
    content: "\f078" !important;
    font-weight: 900 !important;
    display: inline-block !important;
}

/* 4. メインブロックが半分になるバグを粉砕（完全1カラム化） */
body main.c2, 
body main.c2 .main {
    display: block !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    float: none !important;
    box-sizing: border-box !important;
}
body main.c2 {
    padding: 40px 20px !important;
}
/* 余計なサイドバーの枠を完全に消滅させる */
body main.c2 .sub {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- 横幅バグ・右側の余白を物理的に抹殺する --- */

/* 1. サイト全体の「器」を画面幅に固定 */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}

/* 2. 全要素のサイズ計算を「内側」に固定（はみ出し防止） */
*, *::before, *::after {
    box-sizing: border-box !important;
    max-width: 100% !important; /* ←これが重要：全要素を画面内に封じ込める */
    overflow-wrap: break-word;   /* 長い英数字の改行を強制 */
}

/* 3. コンテナとメインブロックの幅をリセット */
#container, #mainimg-box, main, main.c2, .main, .wp-editor-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

/* 4. プロフィールやセクションの過剰なパディングをスマホ用に絞る */
@media screen and (max-width: 800px) {
    /* 左右の余白を「15px」に統一 */
    section, 
    .profile-card, 
    .wp-editor-content > *,
    div[style*="padding"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* 代表プロフィール内のmission部分などもはみ出さないように */
    .profile-mission, 
    div[style*="border-left"] {
        margin: 1rem 0 !important;
        padding: 1rem !important;
    }
    
    /* マップや動画の横幅固定を解除 */
    iframe, video, table {
        width: 100% !important;
    }
}

/* --- 横幅オーバーフロー（横揺れ・白い余白）を物理的に停止 --- */

/* 1. サイトの「一番外側」を画面幅に強制固定 */
html, body {
    overflow-x: hidden !important; /* 横スクロールを禁止 */
    width: 100vw !important;       /* パーセントではなくViewport幅で固定 */
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. PC版の1000px設定をスマホで完全に無効化 */
@media screen and (max-width: 800px) {
    #container, 
    header, 
    #menubar, 
    #mainimg-box, 
    main, 
    main.c2, 
    main.c2 .main, 
    footer, 
    #footermenu {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;   /* ←意外とこれが悪さをする */
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
    }

    /* 3. プロフィールカード（flex）を縦一列に強制 */
    .profile-card {
        display: block !important; /* 横並びを強制解除 */
        width: 100% !important;
        padding: 20px 15px !important;
        margin: 0 0 3rem 0 !important;
    }
    .profile-img-wrap, 
    .profile-text-wrap {
        width: 100% !important;
        border: none !important;
        padding: 10px 0 !important;
    }

    /* 4. 診断ツールやボタンの「横幅固定」を破壊 */
    section, div, a, p, span {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 5. 表（table）のスマホ対応（はみ出し防止） */
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important; /* テーブルだけははみ出したら横スクロールさせる */
        white-space: nowrap;
    }
}

/* 6. 画像が枠を突き抜けるのを防ぐ（全デバイス共通） */
img {
    max-width: 100% !important;
    height: auto !important;
}




/* ===================================================
   LP用カスタマイズCSS（エラー修正版）
=================================================== */

/* 1. LP用1カラム強制中央揃え */
main.c2 {
    display: block !important;
    max-width: 1000px !important;
    margin: 40px auto !important; /* 左右中央寄せ */
    padding: 0 20px !important;
    box-sizing: border-box !important;
}
main.c2 .main {
    width: 100% !important;
    float: none !important;
}
main.c2 .sub {
    display: none !important; /* 幽霊サイドバー完全消去 */
}

/* 2. スマホ版メイン画像の高さ確保 */
#mainimg-box {
    width: 100% !important;
    height: 0 !important;
    padding-top: 36% !important; /* PC用比率 */
    position: relative !important;
    z-index: -1 !important;
}
.vegas-slide-inner {
    background-size: cover !important;
    background-position: center center !important;
}
@media screen and (max-width: 800px) {
    #mainimg-box {
        padding-top: 70% !important; /* スマホ用に縦幅を確保 */
    }
}

/* 3. メニューのF078文字化け解消 */
a.ddmenu::before {
    font-family: "Font Awesome 6 Free" !important;
    content: "\f078" !important;
    font-weight: 900 !important;
}

/* 4. スマホ版メニューの表示バグ修正（緑色排除） */
@media screen and (max-width: 800px) {
    #menubar.display-block {
        background: rgba(0,0,0,0.95) !important;
    }
    #menubar ul li ul {
        display: block !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    #menubar ul li:hover > a, 
    #menubar ul li a:hover {
        background: transparent !important;
        color: #fff !important;
    }
    #menubar ul li a {
        text-align: left !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
}

/* 5. はみ出し（スマホの横揺れ）防止 */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
}
img, iframe, video {
    max-width: 100% !important;
}
/* 固定ページ内の「padding: 3rem」等がスマホ画面をぶち破るのを防ぐ */
@media screen and (max-width: 800px) {
    section, div[style*="padding"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
}















/* スマホ版：左右の余白を完全消滅させ、限界ギリギリまで広げる */
@media screen and (max-width: 800px) {
    body,
    body #container,
    body main.c2,
    body main.c2 .main,
    body .wp-editor-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        /* ↓左右の余白を「0」にしてスマホのベゼル（枠）に完全密着させる */
        padding-left: 0.5px !important; 
        padding-right: 0.5px !important;
        box-sizing: border-box !important;
        float: none !important;
    }
}






















/* ===================================
 * 1. ヘッダーの余白調整
 * =================================== */
header {
    /* 上の余白は詰めたまま */
    padding-top: 0px !important; 
    
    /* ★下の余白を増やしました（好みに合わせて数値を変更してください） */
    padding-bottom: 35px !important; 
}


/****************** * 
 * ロゴのリンク(aタグ)のみをピンポイントで無効化 
 * **************************/
h1#logo > a {
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none !important;
    display: block !important; 
}

/* ロゴリンクの擬似要素だけを確実に封殺 */
h1#logo > a::before,
h1#logo > a::after {
    display: none !important;
    content: none !important;
}

/* ロゴ画像のみ */
h1#logo > a > img {
    display: block;
    vertical-align: bottom;
}






/* サムネイルが潰れるバグを強制ブロック */
.custom-category-grid .cat-thumb img {
    height: 100% !important;
    object-fit: cover !important;
}