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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* * 📜 roomデザイン原則 (Strict Design Protocol)
* 1. roomのイメージ（ネオンサイバーパンク、ダークトーン、クールな質感）を常に念頭に入れる。
* 2. ベース１をroomのイメージデザインの基本形として、指示以外は変更しない。
*/

/* サイト全体の基本設定（ダークモード）を統合 */
:root {
    --color-primary-bg: #1A1A1A; /* メイン背景：チャコールグレー */
    --color-text: #E0E0E0; /* メインテキスト：明るいグレー */
    --color-accent: #00FFFF; /* ネオンシアン */
    --color-accent-b: #75daed; /* 薄いネオンシアン */
    --color-subtle-bg: #2C2C2C; /* サブtleな背景：濃いグレー */
    --color-border: #444444; /* ボーダー色 */
    --font-main: 'Noto Sans JP', sans-serif;
    --font-title: 'Orbitron', sans-serif;
}

/* グローバルリンクのデフォルト設定 */
a { color: var(--color-accent); text-decoration: none; }
a:hover { 	text-decoration: none !important;
}

/* Cocoonの基本スタイルと背景色を上書き */
body {
    background-color: var(--color-primary-bg) !important;
    color: var(--color-text);
    line-height: 1.8;
    width: 100% !important;
}

/* 全見出しのフォント設定 */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    color: var(--color-accent);
}

/* カスタムテキストカラー */
.text-neon { color: var(--color-accent); }
.border-neon { border-color: var(--color-accent); }


/* ========================================================================= */
/* II. レイアウトリセットとフルワイド化 */
/* ========================================================================= */

/* ★ フルワイド表示のためのCocoonラッパーリセット ★ */
#container, #main, #main-in, .site-container {
    background-color: var(--color-primary-bg) !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh; /* ★修正点: メインビジュアルの表示のために最小高さを保証★ */
}
.main, .wrap, .content, .entry-content {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
}
body .container {
    max-width: 100% !important;
}

/* コンテンツセクションの幅制御 (中央寄せ) */
.content-section {
    padding: 4rem 1rem;
    max-width: 1500px;
    margin: 0 auto;
    background-color: var(--color-primary-bg);
}
.content-section .gap-8{
	justify-content: center;
    grid-template-columns: repeat(3, minmax(0, 350px));
}


/* ========================================================================= */
/* III. ヘッダー/ナビゲーションのスタイル */
/* ========================================================================= */

.header-container {
    position: fixed !important;
    width: 100% !important;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.7) !important;
    border-top: 0 !important;
}

.navi, .navi-in {
    background: transparent !important;
}
.header-container-in.hlt-top-menu {
    background-color: rgba(0, 0, 0, 0.7) !important; 
}
.entry-title, .h2, h2.h-undelined {
    font-family: var(--font-title);
    color: var(--color-accent) !important;
}

/* ★★★ ヘッダーサイト名とナビゲーションのホバーグロー効果 ★★★ */

.header-container-in.hlt-top-menu .site-name-text {
    font-size: 30px;
    font-weight: bold;
    color: var(--color-accent-b) !important;
    transition: text-shadow 0.3s, color 0.3s;
}

/* サイト名ホバー */
.header-container-in header .site-name-text a:hover {
    text-decoration: none !important;
}
.header-container-in header .site-name-text:hover {
	color: var(--color-accent) !important; /* 濃いネオンシアンに */
    text-shadow: 0 0 8px var(--color-accent), 0 0 15px rgba(0, 255, 255, 0.5); /* グロー効果追加 */
    /* ★ベース１から継続: ホバー時の下線を非表示にする★ */
    text-decoration: none !important;
}

/* ナビゲーション基本色 */
.navi ul li a {
    color: var(--color-accent-b) !important; /* 薄いネオンシアンを基本色とする */
    transition: all 0.2s;
}

/* 4. ナビゲーション項目のホバーグロー (テキスト色変更とグロー) */
.navi ul li a:hover {
    color: var(--color-accent) !important; /* ホバー時に濃いネオンシアンに */
    background-color: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    /* 控えめなグロー効果 */
    text-shadow: 0 0 3px var(--color-accent), 0 0 5px rgba(0, 255, 255, 0.3);
}

/* アクティブ/現在のページ */
#navi ul li.current-menu-item a {
    color: var(--color-accent) !important; 
    text-shadow: 0 0 3px var(--color-accent), 0 0 5px rgba(0, 255, 255, 0.3);
    background-color: transparent !important; /* ★追加: アクティブなページの背景も透明に★ */
}

/* 不要な背景色の変更を削除 */
#navi ul li:hover, #navi ul li.current-menu-item {
    background-color: transparent !important; /* ★修正: li要素のホバー/アクティブ背景も透明に★ */
}


/* ========================================================================= */
/* IV-A. メインビジュアル / スライドショーのサイズ強制保証 */
/* ========================================================================= */

/* .hero-slide は position: absolute; なので、サイズが 0x0 になりやすい。
   絶対的なサイズ指定を追加し、画像が正しく表示されるようにします。 */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 親要素のセクションの高さに合わせる */
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    background-size: cover;
    background-position: center;
    filter: brightness(0.7) grayscale(0.2);
}
.hero-slide.active {
    opacity: 1;
}

/* ========================================================================= */
/* IV. カードデザイン (レポート/動画) */
/* ========================================================================= */

.card {
    background-color: var(--color-subtle-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0;
    position: relative;
    overflow: hidden;
    z-index: 10;
}
.card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}
.card-overlay-bg, .card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.07;
    filter: grayscale(100%);
    transition: opacity 0.5s;
    z-index: 1;
}
.card:hover .card-overlay-bg, .card:hover .card-overlay {
    opacity: 0.12;
}
.card-content {
    position: relative;
    z-index: 2;
    padding: 1.5rem;
}

/* ★★★ ネオングローアイコンのスタイル (シアンの光を維持) ★★★ */
.neon-glow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(0, 255, 255, 0.1);
    color: var(--color-accent);
    box-shadow: 0 0 5px var(--color-accent), 0 0 10px rgba(0, 255, 255, 0.4);
    transform: scale(1);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}

.neon-glow-icon:hover {
    transform: scale(1.1);
    color: var(--color-accent);
    background: rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 10px var(--color-accent), 0 0 20px rgba(0, 255, 255, 0.8);
}
.card-content .flex .neon-glow-icon {
    opacity: 1; 
}


/* ========================================================================= */
/* V. フッターとSNSアイコン */
/* ========================================================================= */

.footer{
    margin:0 !important;
    padding:0 !important;
    background-color: var(--color-primary-bg) !important; 
}
.footer-widgets, .footer-widgets-mobile {
    margin: 0;
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding: 20px 0;
}
.footer-widgets-mobile .widget { 
    width: auto;
}
.footer-left, .footer-center, .footer-right {
    width: auto;
    font-size: 1rem;
    text-align: center;
}

/* SNSアイコンの基本色とホバーグロー */
.footer a {
    color: var(--color-accent-b)!important;
    transition: 0.4s;
}
.footer-left h3 {
    display: none;
}
.footer a:hover {
    color: var(--color-accent);
    text-shadow: 0 0 5px var(--color-accent), 0 0 10px rgba(0, 255, 255, 0.4);
}


/* ========================================================================= */
/* VI. ページネーションとその他 */
/* ========================================================================= */

/* ページネーションに関するカスタムCSS */
.pagination-next {
display:none;
}

/* ★★★ ページネーション完成版用CSSを適用 ★★★ */
.pagination a, .wp-pagenavi a {
    /* リンク（数字および Prev/Next）の通常時スタイル */
    color: var(--color-accent) !important;  
    background-color: rgba(0, 255, 255, 0.1);  
    box-shadow: 0 0 5px var(--color-accent), 0 0 10px rgba(0, 255, 255, 0.4);  
    border-color: var(--color-accent);  
}

.pagination a:hover, .wp-pagenavi a:hover {
    /* ホバー時のスタイル */
	transform: scale(1.1); /* スケールアップアニメーション */
    color: var(--color-accent) !important;  
    background-color: rgba(0, 255, 255, 0.1);  
    background: rgba(0, 255, 255, 0.3); /* 背景色を濃く */
    box-shadow: 0 0 10px var(--color-accent), 0 0 20px rgba(0, 255, 255, 0.8); /* グローを強化 */
}

/* アクティブなページ (現在ページ) */
.pagination a,.pagination .current {
	background: rgba(0, 255, 255, 0.1);
    color: var(--color-accent);
    box-shadow: 0 0 5px var(--color-accent), 0 0 10px rgba(0, 255, 255, 0.4);
    border-color: var(--color-accent);
}
/* ★★★ ページネーション完成版用CSSを適用ここまで ★★★ */


/* ショート動画スライダー用CSS */
.slider-container {
    overflow: hidden;
    white-space: nowrap;
    padding-bottom: 1rem;
}
.slider-wrapper {
    display: inline-flex;
    animation: slide-slowly 60s linear infinite;
}
.slider-item {
    flex-shrink: 0;
    width: 12rem;
    height: 16rem;
    margin-right: 1rem;
}
@keyframes slide-slowly {
    from { transform: translateX(0%); }
    to { transform: translateX(-50%); }
}

/* Tailwindクラスに依存するため、カスタムのメディアクエリは不要 */