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

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

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

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

/* Cocoonのラッパー要素とコンテンツエリアにも背景色を強制適用 */
#container, #main, #main-in, .entry-content {
    background-color: var(--color-primary-bg) !important;
}

/* フルワイド表示のためのレイアウト要素の強制リセットを強化 */
.main, .wrap, .content, .container, .site-container { /* site-container を追加 */
    max-width: none !important; /* コンテンツ幅を最大化 */
    width: 100% !important; /* 幅を100%に設定 */
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.content-section {
    padding: 4rem 1rem;
    max-width: 1200px; /* カスタムコンテンツの最大幅を維持 */
    margin: 0 auto; /* コンテンツの中央寄せを維持 */
    background-color: var(--color-primary-bg); /* 背景色を統一 */
}


h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    color: var(--color-accent);
}

/* フッター用CSSの整理 */
.footer{
    margin:0 !important;
    padding:0 !important;
    background-color: var(--color-primary-bg) !important; 
}

/* ★修正点: footer-widgets内のコンテンツを均等配置にする★ */
.footer-widgets, .footer-widgets-mobile {
    margin: 0;
    display: flex; /* Flexboxを有効にする */
    justify-content: space-evenly; /* アイテムを均等に配置 */
    width: 100%; /* 幅を確保 */
    padding: 20px 0; /* 上下の余白を追加 */
}
/* ★修正点: 競合する可能性のある古いフッターウィジェットのスタイルを削除★ */
.footer-left, .footer-center, .footer-right {
    /* これらのクラスは、元のデザインには存在しないため、レイアウトを壊さないようにリセット */
    width: auto;
    text-align: center;
}

.text-neon { color: var(--color-accent); }
.border-neon { border-color: var(--color-accent); }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Cocoonのヘッダー/ナビゲーション調整 */
.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;
}
.navi{
    background-color: rgba(0, 0, 0, 0) !important;
}
.navi-in {
    background: transparent !important;
}
.header-container-in.hlt-top-menu {
    background-color: rgb(0, 0, 0) !important;
}
.header-container {
    border-top: 0 !important;
	opacity:.5;
}
 
/* ★★★ room_index.html & room_archive.html からコピーしたCSSを全てここに貼り付け ★★★ */
.hero-slide {
    position: absolute;
    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;
}
.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;
}

/* ショート動画スライダー用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クラスに依存するため、カスタムのメディアクエリは不要 */