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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
#comments {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}
section.comment-list {
    display: none !important;
}

.comment-list {
    display: none !important;
}






























/* ============================================
   メインカラム（#main）内の要素のみに限定し、
   サイドバー（#sidebar）への干渉を完全遮断
   ============================================ */

/* 1. 中央インレックスタブ（新着記事、エキスパンション等） */
#main .index-tab-buttons .index-tab-button {
    background-color: #0c151b !important; /* 画像512の濃紺 */
    background-image: 
        linear-gradient(45deg, rgba(0, 168, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 168, 255, 0.1) 50%, rgba(0, 168, 255, 0.1) 75%, transparent 75%, transparent) !important;
    background-size: 8px 8px !important; /* グリッドパターン */
    color: #ffffff !important;
    font-family: 'Chakra Petch', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border: none !important;
    border-left: 6px solid #00e5ff !important; /* 左ネオンブルー */
    
    /* 形状：文字が絶対に潰れないように調整 */
    clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 10px) !important;
    padding: 12px 10px !important;
    margin: 0 !important;
    flex: 1;
    text-align: center;
    transition: none !important;
    box-shadow: none !important;
}

/* アクティブ時のオレンジ切り替え */
#main .index-tab-buttons .index-tab-button.active {
    border-left-color: #ff8a00 !important;
    background-color: #1a2a35 !important;
}

/* 2. 中央記事カードのタイトル（人気記事等のサイドバーには影響させない） */
#main .entry-card-title {
    background-color: #0c151b !important;
    background-image: 
        linear-gradient(45deg, rgba(0, 168, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 168, 255, 0.1) 50%, rgba(0, 168, 255, 0.1) 75%, transparent 75%, transparent) !important;
    background-size: 8px 8px !important;
    color: #ffffff !important;
    border: none !important;
    border-left: 5px solid #00e5ff !important;
    
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 0 10px 0 !important;
    
    /* 文字欠け防止形状 */
    clip-path: polygon(0 0, 98% 0, 100% 100%, 0 100%) !important;
}

#main .entry-card-title a {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* 3. 白い空白箇所の装飾（メインカードのみ） */
#main .entry-card-content {
    background-color: #f4faff !important;
    /* 画像513のような薄い方眼グリッドを敷く */
    background-image: 
        linear-gradient(rgba(0, 168, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 168, 255, 0.08) 1px, transparent 1px) !important;
    background-size: 15px 15px !important;
    border: 1px solid #00a8ff !important;
    border-top: none !important;
    padding: 15px !important;
}

/* 4. 統計データ（PV等）の装飾 */
#main .entry-card-meta {
    font-family: 'JetBrains Mono', monospace !important;
    color: #2c3e50 !important;
    font-size: 11px !important;
    border-top: 1px dashed #00a8ff !important;
    padding-top: 8px !important;
    margin-top: 8px !important;
}

/* ============================================
   サイドバー干渉を完全にクリアにするリセット
   ============================================ */
#sidebar .entry-card-title,
#sidebar .widget-title {
    clip-path: none !important;
    /* サイドバーには上記デザインを適用させない */
}






























/*
Theme Name: Cocoon Child Tactical Advanced Final
Description: 幾何学模様・グリッド強化版（フッター幅・高さ統一・検索削除・ライトモード）
Template: cocoon-master
Version: 9.0.0
*/

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;700&family=JetBrains+Mono:wght@400;700&display=swap');

/* ============================================
   CSS変数
   ============================================ */
:root {
    --ui-main: #00a8ff;
    --ui-accent: #ff8a00;
    --ui-bg: #0a0e14;
    --ui-card-bg: rgba(16, 24, 32, 0.85);
    --ui-border: rgba(0, 168, 255, 0.4);
    --ui-text: #e0e6ed;
    --grid-line: rgba(0, 168, 255, 0.1);
}

/* ============================================
   全体背景：精密グリッド（完全維持）
   ============================================ */
body {
    font-family: 'Chakra Petch', sans-serif !important;
    background-color: var(--ui-bg) !important;
    color: var(--ui-text) !important;
    background-image: 
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
        linear-gradient(rgba(0, 168, 255, 0.05) 2px, transparent 2px),
        linear-gradient(90deg, rgba(0, 168, 255, 0.05) 2px, transparent 2px) !important;
    background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px !important;
    background-attachment: fixed !important;
}

/* ============================================
   メインコンテンツエリア（完全維持）
   ============================================ */
#content { background: transparent !important; padding: 10px !important; }
#main { background: transparent !important; padding: 0 !important; }

/* ============================================
   タブナビゲーション（完全維持）
   ============================================ */
.index-tab-buttons { display: flex !important; gap: 5px !important; margin: 0 0 15px 0 !important; }
.index-tab-button {
    background: rgba(0, 168, 255, 0.1) !important;
    border-left: 4px solid var(--ui-main) !important;
    color: #fff !important;
    padding: 12px 30px !important;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%) !important;
}
.index-tab-button.active { background: var(--ui-main) !important; color: #000 !important; font-weight: 900 !important; }

/* ============================================
   記事カード：幾何学装飾（完全維持）
   ============================================ */
.entry-card, .ect-vertical-card {
    background: var(--ui-card-bg) !important;
    border: 1px solid var(--ui-border) !important;
    margin-bottom: 25px !important;
    position: relative !important;
    overflow: visible !important;
    backdrop-filter: blur(4px);
}
.entry-card::before, .entry-card::after {
    content: "" !important;
    position: absolute !important;
    width: 20px !important; height: 20px !important;
    border: 3px solid var(--ui-main) !important;
}
.entry-card::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.entry-card::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }

/* ============================================
   フッター：コンテンツ幅・高さ統一 & ライトモード
   ============================================ */
#footer {
    background-color: #ffffff !important; 
    color: #2c3e50 !important;
    border-top: 4px solid var(--ui-main) !important;
    padding: 40px 20px !important;
    background-image: repeating-linear-gradient(45deg, rgba(0, 168, 255, 0.05) 0px, rgba(0, 168, 255, 0.05) 1px, transparent 1px, transparent 10px) !important;
}

#footer-in {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 20px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    align-items: stretch !important; /* 高さを揃える */
}

/* 各コンテンツブロックの幅を統一 */
#footer-in > * {
    flex: 1 1 300px !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* フッター見出し */
#footer h3, #footer .widget-title {
    background: #eef7ff !important;
    color: var(--ui-main) !important;
    border-left: 6px solid var(--ui-main) !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 10px !important;
}

/* コンテンツ内部背景：ここで高さを揃える */
#footer .widget-in, 
#footer ul, 
#footer div:not(.widget-title):not(.nwa) {
    background: #f5f8fa !important;
    border: 1px solid rgba(0, 168, 255, 0.1) !important;
    padding: 15px !important;
    flex-grow: 1 !important; /* 高さ統一の鍵 */
}

#footer li {
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 168, 255, 0.05) !important;
    padding: 8px 0 !important;
    list-style: none !important;
}

#footer a { color: #0077cc !important; font-weight: 600 !important; text-decoration: none !important; }

/* フッター検索フォーム：完全排除 */
#footer .search-box, #footer .search-form, #footer form, #footer .wp-block-search {
    display: none !important;
}

#footer .nwa {
    flex: 0 0 100% !important;
    text-align: center !important;
    margin-top: 30px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(0, 168, 255, 0.1) !important;
}

/* ============================================
   共通設定（完全維持）
   ============================================ */
::-webkit-scrollbar { width: 8px !important; }
::-webkit-scrollbar-track { background: var(--ui-bg) !important; }
::-webkit-scrollbar-thumb { background: var(--ui-main) !important; }

@media (max-width: 768px) {
    #footer-in > * { flex: 1 1 100% !important; }
}






















































/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}