/*以下にスタイルシートを記入してください*/

/* ========================================================================= */
/* サイト全体フォント設定 (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;
}
*/
@font-face {
    font-family: 'Hina Mincho';
    src: url('/wp-content/uploads/fonts/HinaMincho-Regular_s.woff2') 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;
}

/* =========================================
   OOPARTS オリジナル・ボックスメニュー 0607
========================================= */
.ooparts-box-menu-wrap {
    display: grid;
    /* PC表示：4列均等配置 */
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 2em 0;
}

.ooparts-box-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px 10px;
    text-decoration: none !important;
    color: #333333;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ホバー時のブランドカラー展開（パライバネオンブルーグリーン） */
.ooparts-box-menu-item:hover {
    border-color: #00E3FF;
    background-color: #f5fcff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 227, 255, 0.15);
}

.ooparts-box-menu-icon {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px; /* アイコンエリアの統一高 */
    width: 100%;
}

/* アイコンフォント使用時の装飾 */
.ooparts-box-menu-icon i {
    font-size: 36px;
    color: #00E3FF;
    transition: transform 0.3s ease;
}

.ooparts-box-menu-item:hover .ooparts-box-menu-icon i {
    transform: scale(1.1);
}

/* 画像使用時の最適化 */
.ooparts-box-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* 両方空欄時のフェイルセーフ */
.ooparts-box-spacer {
    width: 36px;
    height: 36px;
}

.ooparts-box-menu-title {
    font-size: 0.95em;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    word-break: auto-phrase;
}

/* スマホ表示（768px以下）：2列配置へ自動変形 */
@media screen and (max-width: 768px) {
    .ooparts-box-menu-wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .ooparts-box-menu-item {
        padding: 15px 5px;
    }
    
    .ooparts-box-menu-icon {
        height: 50px;
        margin-bottom: 8px;
    }
    
    .ooparts-box-menu-icon i {
        font-size: 30px;
    }
    
    .ooparts-box-menu-title {
        font-size: 0.85em;
    }
}
/* =========================================
   OOPARTS オリジナル・ボックスメニュー ここんまで 0607
========================================= */