@charset "UTF-8";
/*!
  Skin Name: OOPARTS-Paraiba-α
  Description: pokemonzukan for paraiba
  Skin URI: https://www.pokemon.dolphinarium.jp/
  Author: VATSHU 21G
  Author URI: https://www.pokemon.dolphinarium.jp/
  Screenshot URI: 
  Version: 0.0.3
  Priority: 9999000000
  License: GNU General Public License
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  Cocoon Style:
*/
/*以下にスタイルシートを記入してください*/

/* ========================================================================= */
/* サイト全体フォント設定 (Montserrat + Noto Sans JP) - 強制版 */
/* ========================================================================= */
/* ========================================================================= */
/* サイト全体フォント設定 (Montserrat + Noto Sans JP) - 強制版 */
/* ========================================================================= */

/* ========================================================================= */
/* 1. フォントの定義（画像で確認した真名） */
/* ========================================================================= */
@font-face {
    font-family: 'Hina Mincho';
    src: url('/wp-content/uploads/fonts/HinaMincho-Regular.ttf') format('truetype');
    font-display: swap;
}

/* ========================================================================= */
/* 2. 基礎ルール：柔軟な全体指定（!important によるロックオンの排除） */
/* ========================================================================= */
/* ここから !important を外すことで、タグがガチガチに固まるのを防ぎます */
body, 
h1, h2, h3, h4, h5, h6,
.entry-content, 
.widget, 
#sidebar, 
#footer,
input, textarea, button, select {
    font-family: "Montserrat", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* 図鑑モードのアクティブ時も同様に !important を排除します */
body.zukan-ui-active {
    font-family: "Montserrat", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ========================================================================= */
/* Cocoonスキン流儀：特定クラスへの「ひな明朝」適用 */
/* ========================================================================= */

/* 1. 汎用クラス単体（span, div, p などに付けた場合） */
.vento-italiano,
.italian-wind,
.zukan-welcome-msg,

/* 2. 見出し（H2）に直接付与した場合（Cocoonの .article を利用して詳細度で勝つ） */
.article h2.vento-italiano,
.article h2.italian-wind,
.article h2.zukan-welcome-msg,

/* 3. テーブルセル（TD）に直接付与した場合 */
.article td.vento-italiano,
.article td.italian-wind,
.article td.zukan-welcome-msg {
    font-family: "Montserrat", "Hina Mincho", serif !important;
}



/* 独自カラー設定 */

/*===================================================================
** スキン基本骨組みCSS
**===================================================================*/

/* サイト全体の背景色 */
body {
  background-color: #F7F7F7;
}

/* 記事コンテンツ部分の文字色（黒系のまま維持） */
.entry-content {
  color: #333333;
}

/* リンクの色（全体設定：シルバー） */
a {
  color: #C0C0C0;
  text-decoration: none;
}
a:hover {
  color: #A9A9A9; /* ホバー時は少し濃いシルバーに */
}

/*===================================================================
** サイドバー：ウィジェット本文の背景色を統一
**===================================================================*/
#sidebar .widget {
  background-color: #e8e8e8 !important; 
  padding: 10px; 
  margin-bottom: 20px; 
  border: none; 
}

#sidebar {
  background-color: #e8e8e8;
}

/*===================================================================
** ヘッダーカスタマイズ
**===================================================================*/

/* ヘッダー全体（PC表示） */
#header-container {
  /* シルバー #C0C0C0 (RGB: 192,192,192) をRGBA形式（透明度0.3）で指定 */
  background-color: rgba(192, 192, 192, 0.3) !important; 
}

/*===================================================================
** グローバルナビゲーション（メニューバー）のカスタマイズ
**===================================================================*/

/* ナビゲーションバー全体の背景色 */
#navi {
  background-color: rgba(192, 192, 192, 0.3) !important; /* ヘッダーと同じ透明シルバー */
  border-top: 1px solid #C0C0C0; /* 上下の境界線をシルバーで強調 */
  border-bottom: 1px solid #C0C0C0;
}

/* ナビゲーションメニューの文字色を「黒」に固定 */
#navi .navi-in a {
  color: #333333 !important; /* 文字は黒で見やすく */
  font-weight: 600; /* 少し太字にして存在感を出す */
}

/* マウスを乗せた時の背景色と文字色 */
#navi .navi-in a:hover {
  background-color: #C0C0C0 !important; /* 背景を濃いシルバーに */
  color: #FFFFFF !important; /* 文字を白に */
  transition: all 0.3s ease;
}

/* 現在表示しているページのナビメニュー背景 */
#navi .navi-in .current-menu-item > a,
#navi .navi-in .current-menu-ancestor > a {
  background-color: rgba(192, 192, 192, 0.5); /* 現在地は少し濃い透明シルバー */
}


#main {
    background-color: #fffff028 !important; /* アイボリー */
}

/*===================================================================
** JavaScript制御によるタブレット・モバイル固定ヘッダー
**===================================================================*/
#header-container.custom-fixed-active {
    height: 39px !important;
    min-height: 39px !important;
    
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    
    /* 透過度を適用 -> シルバーに変更 */
    background-color: rgba(192, 192, 192, 0.3) !important; 
    
    transition: all 0.3s ease-in-out;
}

#header-container.custom-fixed-active .header-in,
#header-container.custom-fixed-active .site-title a,
#header-container.custom-fixed-active #mobile-menu-buttons {
    line-height: 39px !important; 
    height: 39px !important;
    min-height: 39px !important;
}

/* モバイルメニュー（ハンバーガーメニュー）のアイコン色 */
.mobile-menu-buttons .menu-button {
    color: #333333 !important; /* アイコンは黒 */
}
.mobile-menu-buttons .menu-button:hover {
    color: #C0C0C0 !important;
}

/*===================================================================
** 関連記事のカスタマイズ (PC:3カラム、SP:2カラムの横スクロール版)
**===================================================================*/
#related-entries .related-list {
  overflow-x: auto; 
  overflow-y: hidden; 
  white-space: nowrap; 
  padding-bottom: 10px; 
  display: flex; 
  flex-wrap: nowrap; 
}

#related-entries .related-list::-webkit-scrollbar {
  display: none;
}
#related-entries .related-list {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#related-entries .related-list .related-entry-card-wrap {
  flex-shrink: 0; 
  width: calc(33.333% - 16px); 
  margin: 8px; 
  white-space: normal; 
  box-sizing: border-box;
}

@media screen and (max-width: 834px) {
  #related-entries .related-list .related-entry-card-wrap {
    width: calc(50% - 16px); 
  }
}

/*===================================================================
** フッターのカスタマイズ (ヘッダー・ナビと同色)
**===================================================================*/

/* フッター全体 */
#footer {
  /* ヘッダーと同じシルバー（透過あり） */
  background-color: rgba(192, 192, 192, 0.3) !important;
  
  /* 文字色は黒で見やすく */
  color: #333333 !important;
  
  /* 上部にシルバーの境界線を入れて引き締める */
  border-top: 1px solid #C0C0C0;
}

/* フッター内のすべてのリンク */
#footer a {
  color: #333333 !important; /* リンクも黒 */
  text-decoration: none;
}

/* フッターリンクのホバー時 */
#footer a:hover {
  color: #666666 !important; /* ホバー時はダークグレーに */
  opacity: 0.8;
}

/* フッターウィジェットのタイトル（もし使用している場合） */
#footer .footer-widget-title {
  color: #333333 !important;
  border-bottom: 1px solid #C0C0C0; /* タイトル下線も合わせる */
}

/* コピーライト（最下部） */
.copyright {
  color: #333333 !important;
}