/* 全体設定 */
/* ■全体のフォントサイズを小さくする */
html {
    font-size: 14px; /* 標準の16pxから縮小 */
}
body {
    font-size: 0.95rem;
    line-height: 1.5;
    background-color: #000000;  /* 背景色は黒 */    
    color: #ffffff;  /*文字色の基本は白 */    
}

/* ■ヘッダ */
/* 3. h1～h4 の個別設定 (カラーとボールド) */
h1, h2, h3, h4 {
    font-weight: bold; /* ボールドに統一 (個別に変更可) */
}

h1 {
    font-size: 1.8rem;
    color: #ffffff;       /* foreground whiteに設定 */
    border-width: 2px;
    border-style: solid;
    border-color: #00ff00; /* background */
    padding: 5px;
}

h2 {
    font-size: 1.5rem;
    border-bottom: 2px solid #00ff00;
    border-left : 7px solid #00ff00;
    padding: 3px;
}

h3 {
    font-size: 1.25rem;
    color: #ffffff;
    border-bottom: 2px solid #00ff00;
}

h4 {
    font-size: 1.1rem;
    color: #ffffff;
    background-color: transparent;
}

/************* ヘッダー部分 ************/
/* ■ホーム（ロゴ）と検索窓のある行（ヘッダー全体）の設定 */
#portal-top header {
    background-color: #000000; /* ヘッダー行の背景色 */
    color: #ffffff;           /* テキストの基本表示色 */
    padding-top: 2px;
    padding-bottom: 2px;
}

/* ヘッダー内のコンテナ幅の調整 */
/* 標準は .container ですが、さらに狭くしたり広くしたりする場合 */
#portal-top header .container {
    max-width: 1200px; /* お好みの幅に調整 */
    margin: 0 auto;
}

/* 検索窓（Searchbox）の表示色・スタイル調整 */
#portal-searchbox {
    margin-top: 5px;
}

#portal-searchbox input[type="text"],
#portal-searchbox input[type="search"] {
    background-color: rgba(255, 255, 255, 0.9); /* 入力欄の背景を少し透過 */
    color: #333;                               /* 入力文字の色 */
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* 検索ボタンの調整 */
#portal-searchbox .searchSection {
    color: #ffffff; /* 「現在のセクションのみ」等のテキスト色 */
}


/* ■ナビゲーションバー */
/* 1. ナビゲーションバー全体の背景色 */
.navbar-barceloneta {
    /* 大元の変数自体を、設定したい背景色に変更する */
    --bs-navbar-background: #000000 !important; 
    
    /* これまでの設定も維持 */
    background-color: #000000 !important;
    border-top: 1px solid #00ff00 !important;
    border-bottom: 1px solid #00ff00 !important;    /* border: none; */ /* 境界線が不要な場合 */
}
/* 念のため、中のコンテナや行に隙間ができないように補正 */
.navbar-barceloneta .container,
.navbar-barceloneta .navbar-nav {
    background-color: transparent !important;
}

/* 2. メニュー項目のフォントの色と上下幅（高さ） */
.navbar-barceloneta .navbar-nav .nav-link {
    color: #ffffff !important;      /* 文字の色 */
    padding-top: 8px !important;    /* 上側の余白：これで高さを調整 */
    padding-bottom: 8px !important; /* 下側の余白：これで高さを調整 */
    font-weight: normal;             /* 必要に応じてboldに変更 */
    font-size: 1rem;
}

/* 3. マウスホバー時や現在地の項目の色 */
.navbar-barceloneta .navbar-nav .nav-link:hover,
.navbar-barceloneta .navbar-nav .active > .nav-link {
    color: #ffcc00 !important;      /* ホバー時・選択中の文字色 */
    background-color: rgba(255, 255, 255, 0.1); /* ホバー時の背景（薄い白） */
}

/* 4. ドロップダウンメニュー（サブメニュー）がある場合の色 */
.navbar-barceloneta .dropdown-menu {
    background-color: #ffffff;      /* サブメニューの背景色 */
}
.navbar-barceloneta .dropdown-item {
    color: #333333;                 /* サブメニューの文字色 */
}
.navbar-barceloneta .dropdown-item:hover {
    background-color: #f8f9fa;      /* サブメニューホバー時の背景 */
}

/* 5. モバイル表示時のハンバーガーアイコンの色 */
/* 背景が濃い色の場合は white、薄い色の場合は dark を検討 */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}
.navbar-toggler-icon {
    /* アイコンの色が背景と同化して見えない場合に調整 */
}

/* 6. ホームボタンの基本スタイル（サイズ、色、背景） */
.navbar-nav .nav-item:first-child .nav-link,
#portalsmartnavigation-home {
    /* サイズ設定 */
    padding-left: 5px !important;   /* 左右の幅を広げる場合 */
    padding-right: 5px !important;
    font-weight: bold;               /* ホームだけ太字にする場合 */
    
    /* 色の設定 */
    color: #ffffff !important;       /* 文字の色 */
    background-color: #000000 !important; /* ホームボタン専用の背景色 */
    
    border-style: solid;
    border-color: #00ff00;
    border-width: 1px;
    
    /* 角の丸み */
    border-radius: 4px;
    margin-right: 5px;               /* 隣のボタンとの隙間 */
}

/* 7. ホームボタンのホバー（マウスを置いた時）の設定 */
.navbar-nav .nav-item:first-child .nav-link:hover,
#portalsmartnavigation-home:hover {
    color: #ffffff !important;       /* ホバー時の文字色 */
    background-color: #00ff00 !important; /* ホバー時の背景色 */
    text-decoration: none !important;
}

/* 8. ホームボタンが「アクティブ（現在地）」の時の設定 */
.navbar-nav .nav-item:first-child.active .nav-link,
.navbar-nav .nav-item:first-child .nav-link.active {
    background-color: #ffcc00 !important; /* アクティブ時の背景色 */
    color: #333333 !important;           /* アクティブ時の文字色 */
}



/* ■パンくずリスト (Breadcrumbs) の設定 */
#portal-breadcrumbs {
    background-color: #000000; /* パンくずリスト行の背景色 */
    color: #ffffff;
    margin-bottom: 0;          /* 下の要素との隙間調整 */
    padding: 0px 0px;         /* 内部の余白 */
    border-radius: 0;          /* 角の丸みが必要なら数値を変更 */
}

/* パンくずリスト内のテキストとリンクの色 */
#portal-breadcrumbs .breadcrumb {
    font-size: 0.9rem;
    color: #ffffff;
}

/* パンくずリストの区切り文字（/）を白にする */
#portal-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    color: #ffffff !important;
}

/* 各リンクの表示色 */
#portal-breadcrumbs .breadcrumb-item a {
    color: #00ff00; /* リンクの色 */
    text-decoration: none;
}

/* ホバー時の色 */
#portal-breadcrumbs .breadcrumb-item a:hover {
    color: #000000;
    background-color: #00ff00;
    text-decoration: underline;
}

/* 現在地（リンクになっていない最後の項目）の色 */
#portal-breadcrumbs .breadcrumb-item.active {
    color: #ffffff;
    font-weight: normal;
}

/* ヘッダー内ナビゲーション（メニューバー）との境界線を消す・調整する場合 */
.navbar-barceloneta {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}



/* ■ポートレット */
/* ==========================================================================
   1. カラム幅およびポートレット全体の基本レイアウト設定
   ========================================================================== */

/* デスクトップ表示（800px以上）でのカラム幅とコンテンツ幅の調整 */
@media (min-width: 800px) {
    /* 左サイドバーがある場合：幅を15%に制限 */
    body.col-one.col-content #portal-column-one {
        flex: 0 0 auto !important;
        width: 15% !important;
    }

    /* 右サイドバーがある場合：幅を15%に制限 */
    body.col-content.col-two #portal-column-two {
        flex: 0 0 auto !important;
        width: 15% !important;
    }

    /* 中央メインコンテンツ：左だけある場合は 85% */
    body.col-one.col-content #portal-column-content {
        flex: 0 0 auto !important;
        width: 85% !important;
    }

    /* 左右両サイドバーがある場合：中央は 70% */
    body.col-one.col-content.col-two #portal-column-content {
        width: 70% !important;
    }
}

/* ポートレット（Bootstrap 5カード）の基本コンポーネント変数調整 */
.portlet.card {
    --bs-card-spacer-y: 0.5rem;      /* 内部上下余白を半分に */
    --bs-card-spacer-x: 0.75rem;     /* 内部左右余白を詰める */
    --bs-card-cap-padding-y: 0.3rem; /* タイトル部分を薄くする */
    --bs-card-border-radius: 0;      /* 角を直角にしてカッチリさせる */
    --bs-card-cap-bg: #000000;       /* タイトルヘッダー背景：黒 */
    --bs-card-bg: #000000;           /* カード本体背景：黒 */
    --bs-card-color: #ffffff;        /* 標準の文字色：白 */
}

/* ==========================================================================
   2. 全ポートレット共通設定（ナビゲーション / コレクション 共通）
   ========================================================================== */

/* ポートレットの外枠とボックス設定 */
.portlet {
    border: 1px solid #008000 !important; /* 外枠を緑に */
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 3px;
    background-color: #000000 !important; /* ベース背景は一律黒 */
}

/* ポートレットヘッダー・アイテム・フッターの一括パディング設定 */
.portletheader, .portletItem, .portletFooter, .portlet .card-header {
    padding: 3px 3px !important;
}

/* 各項目の底面区切り線 */
.portletItem, .portlet .list-group-item, .portletNavigationTree .navTreeItem {
    border-bottom: 1px solid #008000 !important; /* 緑の区切り線 */
    background-color: #000000 !important;       /* 通常時背景：黒 */
}
.portletItem:last-child, .portlet .list-group-item:last-child {
    border-bottom: none !important;              /* 最後の項目は線を消す */
}

/* 通常時のリンク共通設定 */
.portlet a, .portlet .list-group-item a {
    color: #00ff00 !important;              /* 通常リンク色：明るい緑 */
    font-size: 0.7rem !important;
    text-decoration: underline !important;   /* 常にアンダーラインを表示 */
}

/* 通常時のアイコン共通設定（フォルダやファイルアイコンなど） */
.portlet a::before, .portlet i, .portlet .icon-folder {
    color: #00ff00 !important;              /* アイコン色：明るい緑 */
    font-size: 0.7rem !important;
    margin-right: 8px;
}

/* --------------------------------------------------------------------------
   共通ホバー・フォーカス時の挙動（反転エフェクト：背景緑、文字黒）
   -------------------------------------------------------------------------- */
.portlet a:hover, .portlet a:focus,
.portlet .list-group-item:hover, .portlet .list-group-item:hover a {
    color: #000000 !important;              /* 文字色を黒に反転 */
    background-color: #00ff00 !important;   /* 背景色を明るい緑に反転 */
    text-decoration: underline !important;
}

/* ホバー時のアイコン色連動 */
.portlet .list-group-item:hover a::before,
.portlet a:hover::before {
    color: #000000 !important;              /* アイコン色も黒に反転 */
}

/* ==========================================================================
   3. ナビゲーション・ポートレット限定設定
   ========================================================================== */

/* 1階層目（ルート項目）の余白調整 */
.portletNavigationTree .card-body ul li a,
.portletNavigationTree .nav-link {
    padding: 3px 3px !important;
}

/* 2階層目（親フォルダの中）のインデント設定 */
.portletNavigationTree .card-body ul li ul li a {
    padding-left: 0.8rem !important;
}

/* 3階層目 */
.portletNavigationTree .card-body ul li ul li ul li a {
    padding-left: 1.6rem !important;
}

/* 4階層目 */
.portletNavigationTree .card-body ul li ul li ul li ul li a {
    padding-left: 2.4rem !important;
}

/* --------------------------------------------------------------------------
   ナビゲーションの「現在位置（アクティブ・カレント項目）」の設定
   -------------------------------------------------------------------------- */
.navTreeCurrentNode, 
.portletItem.navTreeCurrentItem,
.portletNavigationTree .selected,
.portletNavigationTree .nav-link.active {
    background-color: #006400 !important; /* 現在位置の背景：深緑 */
    color: #ffffff !important;            /* 文字色：白 */
    border: 1px solid #00ff00 !important;
}

.navTreeCurrentNode > a,
.portletNavigationTree .selected > a,
.portletNavigationTree .nav-link.active a {
    color: #ffffff !important;            /* リンク文字色：白 */
}

.navTreeCurrentNode > a::before,
.portletNavigationTree .selected > a::before {
    color: #ffffff !important;            /* アイコン色：白 */
}

/* ==========================================================================
   4. コレクション・ポートレット限定設定
   ========================================================================== */

/* コレクション内の各アイテム（行）の設定 */
.portletCollection .portletItem,
.portlet-collection-tile .list-group-item {
    background-color: #000000 !important; /* 通常時背景：黒 */
}

/* コレクション内の日付（Details / プレーンテキスト）の設定 */
.portletCollection .portletItemDetails,
.portlet-collection-tile .text-muted,
.portlet-collection-tile time {
    color: #ffffff !important;            /* 通常時の日付：白 */
    font-size: 0.65rem !important;
    display: inline-block;
    margin-left: 5px;
}

/* --------------------------------------------------------------------------
   コレクションアイテムのホバー挙動（日付消失問題の解決）
   -------------------------------------------------------------------------- */
/* 各行にホバーした際、背景が明るくなりすぎないように調整 */
.portletCollection .portletItem:hover,
.portlet-collection-tile .list-group-item:hover {
    background-color: #003300 !important; /* ホバー時は「深緑」にして白文字とのコントラストを維持 */
    border-color: #00ff00 !important;     /* ホバー時の境界線を強調 */
}

/* コレクションの行ホバー時の、内部リンクと日付の明度補正 */
.portletCollection .portletItem:hover a,
.portlet-collection-tile .list-group-item:hover a {
    color: #00ff00 !important;            /* リンク色は明るい緑を維持 */
    background-color: transparent !important; /* 行全体が深緑なので単体背景は透明に */
}

.portletCollection .portletItem:hover .portletItemDetails,
.portlet-collection-tile .list-group-item:hover .text-muted,
.portlet-collection-tile .list-group-item:hover time {
    color: #ffffff !important;            /* ホバー時も日付の「白」を完全に維持 */
}






/************* 本文 *****************/
/* ==========================================================================   
   ■ 著者名（クリエイター）表示ボックスのカスタム（Bootstrap 5 ユーティリティ上書き）
   ========================================================================== */

/* 著者名リンク要素のクラスをピンポイントで強制指定 */
#content a.badge.rounded-pill.bg-light.text-dark {
    /* 1. 文字色と背景色の変更 */
    color: #00ff00 !important;            /* 文字色：明るい緑 */
    background-color: #000000 !important; /* 背景色：白(light)から「黒」に変更 */
    
    /* 2. 枠線（border）の設定 */
    border: 1px solid #008000 !important; /* 枠線：緑色の細い線を追加 */
    
    /* 3. 角の丸み（.rounded-pill）の打ち消し */
    border-radius: 0px !important;        /* 角丸を完全に「直角」にする */

    /* 4. 余白とフォントの微調整（お好みで調整してください） */
    padding: 0.25rem 0.5rem !important;
    font-size: 1rem !important;         /* ポートレット等のサイズに合わせるなら0.7rem */
}

/* 著者名ボックスにホバー（マウスを乗せた）した時の挙動 */
#content a.badge.rounded-pill.bg-light.text-dark:hover,
#content a.badge.rounded-pill.bg-light.text-dark:focus {
    color: #000000 !important;            /* 文字色を黒に反転 */
    background-color: #00ff00 !important; /* 背景色を明るい緑に反転 */
    text-decoration: none !important;     /* ホバー時に下線は不要な場合 */
}

/* ■タイトル下の「説明 (Description)」部分 */
#content .lead {
    font-size: 0.85rem !important;
    font-weight: bold !important;
}



/* ■blockquote のカスタマイズ */
blockquote {
    width: 80%;           /* 幅を狭くする */
    margin: 20px auto;    /* 中央寄せ */
    padding: 15px;
    background-color: transparent; /* 背景色 */
    border: 2px solid #3cb371; /* 色のついた枠 */
    border-radius: 4px;
    font-style: italic;
    color: #555;
}

/* ■文章内リンクの見た目を変える */
#content a:not(.btn):not(.nav-link) {
    color: #00ff00; /* 通常時の文字色 */
    text-decoration: underline; /* 視認性向上のため下線（好みで none に変更可） */
}

#content a:not(.btn):not(.nav-link):hover,
#content a:not(.btn):not(.nav-link):focus {
    color: #000000; /* ホバー・フォーカス時の文字色 */
    background-color: #00ff00;
    text-decoration: underline;
}

/* ==========================================================================
   ■本文内テーブル（table）の区切り線カスタム
   ========================================================================== */

/* 本文領域（#content）の中にあるすべてのテーブルに格子状の区切り線を強制する */
#content table, 
#content table th, 
#content table td {
    /* 外枠および行と列の間すべてに 1px の実線を引く */
    border: 1px solid #ffffff !important; /* 線色：落ち着いた緑#008000（お好みで #00ff00 に変更可） */
}

/* テーブル全体のレイアウトを調整（任意ですが、綺麗に見せるための推奨設定） */
#content table {
    border-collapse: collapse !important; /* 隣り合う枠線を重ねて1本の細い線にする */
    background-color: #000000 !important;  /* テーブル内背景：黒 */
    color: #ffffff !important;             /* テーブル内文字色：白 */
    margin-bottom: 1rem;                  /* テーブルの下に適切な余白を空ける */
    width: 100%;                           /* 横幅をコンテンツ領域に合わせる場合 */
}

/* セル内の文字の周りに適度な余白（パディング）を持たせる */
#content table th, 
#content table td {
    padding: 6px 8px !important;
    font-size: 0.85rem;                    /* 文字サイズを本文より少しだけスマートに */
}

/* テーブルのヘッダー行（th）を少し強調する（必要に応じて） */
#content table th {
    background-color: #001a00 !important;  /* ヘッダー背景を非常に濃い緑に */
    color: #00ff00 !important;             /* ヘッダー文字を明るい緑に */
    font-weight: bold;
}


/* ==========================================================================
   ■ 本文内区切り線（hr）のカスタム
   ========================================================================== */

/* 本文領域（#content）の中にあるすべての hr を対象にする */
#content hr {
    background-color: #008000 !important; /* 線の色：落ち着いた緑（目立たせたいなら #00ff00） */
    border: none !important;              /* 標準の枠線を消す */
    height: 1px !important;               /* 線の太さ */
    opacity: 1 !important;                /* ★重要：Bootstrapの不透明度(0.25)を1にして完全に発色させる */
    margin-top: 1.5rem !important;        /* 上の余白 */
    margin-bottom: 1.5rem !important;     /* 下の余白 */
}

/* パターンB：少し太めのしっかりした緑の線 */
/*
#content hr {
    background-color: #008000 !important;
    border: none !important;
    height: 3px !important;               /* 太さを 3px に */
    opacity: 0.7 !important;              /* 少しだけ透けさせる */
}
*/

/* パターンC：ドット（点線・破線）の緑の線にしたい場合 */
/*
#content hr {
    background: none !important;          /* 背景色指定をクリア */
    border-top: 1px dashed #008000 !important; /* 1pxの破線（点線なら dotted） */
    opacity: 1 !important;
    height: 0 !important;
}
*/






/* 補足：スマホ閲覧時にカラム幅を戻す設定 */
@media (max-width: 768px) {
    #column1-container, #column2-container, #content-container {
        flex-basis: 100%;
        max-width: 100%;
    }
}