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


/*  サイト全体のフォント */
body {
    font-family: "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans CJK JP", "Original Yu Gothic", YuGothic, "Yu Gothic", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Sans Emoji", -apple-system, BlinkMacSystemFont, system-ui !important;
    
    /* ✨ フォントをより美しく見せる魔法（おまけ） */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}





/* 1. ヘッダー全体の背景をグレーにして、枠線や影を全消去 */
#header {
    background-color: #f4f4f4 !important; /* Game8っぽい薄グレー */

}



/* 3. ついでにページ全体の背景も同じグレーに合わせると馴染むよ */
body {
    background-color: #f4f4f4 !important;
}








/* 2. PCの時はモバイル用メニューを隠す */
@media screen and (min-width: 1024px) {
    .menu-mobile {
        display: none !important;
    }
}

/* 3. スマホの時はPC用メニューを隠す */
@media screen and (max-width: 1023px) {
    .menu-pc {
        display: none !important;
    }
}

















/* 1. サイト全体を中央に寄せる */
body {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1200px !important; /* 👈 ここで「Wikiの横幅」を固定するのがポイント！ */
    padding: 0 !important;
}


/* サイトの最上部に黄色いラインを引く */
#header {
    background-color: #333333 !important; /* Game8っぽいダークグレー */
    border-top: 4px solid #ffdb00 !important; /* 黄色い線はそのままキープ✨ */
	padding: 0 0px !important; /* 上下の隙間を0にする */
    margin: 0 !important;
	
}


/* ロゴとホームページタイトル */
.logo-header a {
    color: #ffffff !important; /* 文字を真っ白にする */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.5em; /* 大きさはお好みで調整してね💕 */
    margin: 0 !important;
    padding: 0 !important;

}




/* ロゴとホームページタイトルの隙間 　機能しない？*/
.logo-header{
  margin:0px !important;
  padding:0 !important;
  line-height:0 !important;
}



/* キャッチコピー消す */
.tagline{
  margin:0 !important;
  padding:0 !important;
  line-height:0 !important;
  display:none;           /* ← 見せる必要がなければコレで完全に封印 */
}

/* 1. 消された文字を疑似要素で復活させる */
.site-name-text::after {
    content: "ハイパーゲーム速報"; /* ここに表示したい文字を書く✨ */
    color: #ffffff !important;
    font-weight: bold;
    font-size: 1.5rem; /* サイズはお好みで！ */
    margin-left: 15px; /* アイコンとの距離 */
    white-space: nowrap; /* 改行させない */
}





/* 2. 画像と復活した文字を綺麗に横並びにする */
.logo-header a {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

/* 3. アイコン画像のサイズを調整 */
.header-site-logo-image {
    width: auto !important;
    height: 50px !important; /* Game8っぽくするならこれくらい！ */
    max-height: 50px !important;
}









/* 1. メニューの文字にマウスを置いた時の演出 */
#navi .navi-in a:hover {
    text-decoration: none !important; /* デフォルトのダサい下線は消す */

    border-bottom: 3px solid #ffdb00 !important; /* 黄色い下線を召喚✨ */
    padding-bottom: 2px !important; /* 文字と線の間の絶妙な隙間 */
    transition: all 0 ease; /* スッと出すためのアニメーション💕 */
	
background-color: transparent !important; /* 背景色を変えない！ */

	
}

/* 2. マウスを置いてない時は透明な線を引いておく（ガタつき防止） */
#navi .navi-in a {
	margin:0 10px;
    border-bottom: 3px solid transparent !important;
    padding-bottom: 2px !important;
    transition: all 0s ease;
	
}

/* メニューの文字を絶対に縮ませない設定 */
#navi .navi-in a {
    white-space: nowrap !important; /* 文字を絶対に改行させない */
    flex-shrink: 0 !important;      /* 箱が縮むのを禁止する！最強の呪文🔑 */
    min-width: fit-content !important; /* 文字の幅に合わせて箱の大きさをキープ */
}

/* メニューの並び */
#navi-in {
    display: flex !important;
    flex-wrap: nowrap !important; /* 折り返しも禁止して横に突き抜けさせる（スクロールさせるため） */
    overflow-x: auto; /* 画面からはみ出したら横スクロールできるようにする */
}







.navi-in a .item-label {
    width: auto !important;     /* 100%をやめて、文字の長さに合わせる 💎 */
    display: inline-block !important; /* 横並びの性質を強める */
}



#navi ul li {
    width: auto !important;          /* 固定幅があれば打ち消す */
    flex: 0 0 auto !important;       /* flexで均等幅にされてるのも拒否 */

}


/* ナビ文字のサイズと太さを強制上書き */
#navi .navi-in a,
#navi .navi-in a .item-label {
    font-size: 1.2rem !important;  /* 好きなサイズに調整してOK */
    font-weight: 700 !important;
}


#navi ul {
    margin-left: 0 !important;
    padding-left: 0 !important;
}












/* カテゴリページのフォルダとカテゴリ名非表示 */
.archive-title {
    display: none !important;
	margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}




/* 念のため、もっと正確に「カテゴリ」だけを狙い撃ちする場合 */
.category #navi,
.single #navi {
    display: none !important;
}


















/* カテゴリページ限定で、メインカラム内のアイキャッチを抹消するよ💅 */
.category .article-header.category-header .eye-catch-wrap {
    display: none !important;
}



/* 画像を「黄金比率」で守り抜く！ */
.wiki-full-width-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 5 !important; /* ★ここが重要！Game8っぽい横長比率をキープ */
    object-fit: cover !important;   /* 比率を守りつつ、はみ出た分を綺麗にカット */
    object-position: center !important; /* 常にロゴがある真ん中を映す */
}

/* スマホの時はもう少し高さを出して見やすくする💅 */
@media screen and (max-width: 768px) {
    .wiki-full-width-img {
        aspect-ratio: 16 / 7 !important; /* スマホでは少し縦に厚みをもたせる */
    }
}


/* 1. 記事（メインカラム）の一番上の隙間を消す */
.main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 2. 記事（article）自体の上の隙間を消す */
article.category-content, 
article.post {
    padding-top: 0 !important;
    margin-top: 0 !important;
}



/* ウィジェットエリアと中身の隙間を物理的に抹殺する 🧨 */
#content-top,
.content-top-in,
.widget-content-top,
.custom-html-widget,
.textwidget {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important; /* 念のため枠線も消す */
}

/* 画像を囲っているaタグの隙間も念押し */
.wiki-full-width-box a {
    display: block !important;
    line-height: 0 !important;
}