/* 全体設定 */
/* ■全体のフォントサイズを小さくする */
html {
    font-size: 15px; /* 標準の16pxから縮小 */
}
body {
    font-size: 0.95rem;
    line-height: 1.5;
}

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

h1 {
    font-size: 1.8rem;
    color: #ffffff;       /* foreground whiteに設定 */
    background-color: #0000cd; /* background */
    padding: 5px;
}

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

h3 {
    font-size: 1.25rem;
    color: #555555;
    border-bottom: 2px solid #0000cd;
}

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

/************* ヘッダー部分 ************/
/* ■ホーム（ロゴ）と検索窓のある行（ヘッダー全体）の設定 */
#portal-top header {
    background-color: #b0c4de; /* ヘッダー行の背景色（例：濃い紺色）#004080 */
    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: #e9ecef !important; 
    
    /* これまでの設定も維持 */
    background-color: #e9ecef !important;
    border-top: 1px solid #008000 !important;
    border-bottom: 1px solid #008000 !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: 2px !important;    /* 上側の余白：これで高さを調整 */
    padding-bottom: 2px !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: #696969 !important; /* ホームボタン専用の背景色 */
    
    /* 角の丸み */
    border-radius: 4px;
    margin-right: 5px;               /* 隣のボタンとの隙間 */
}

/* 7. ホームボタンのホバー（マウスを置いた時）の設定 */
.navbar-nav .nav-item:first-child .nav-link:hover,
#portalsmartnavigation-home:hover {
    color: #ffcc00 !important;       /* ホバー時の文字色 */
    background-color: #003d80 !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: #f5f5f5; /* パンくずリスト行の背景色 */
    margin-bottom: 0;          /* 下の要素との隙間調整 */
    padding: 0px 0px;         /* 内部の余白 */
    border-radius: 0;          /* 角の丸みが必要なら数値を変更 */
}

/* パンくずリスト内のテキストとリンクの色 */
#portal-breadcrumbs .breadcrumb {
    font-size: 0.9rem;
    color: #666666; /* 階層の区切り文字（/）などの色 */
}

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

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

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

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



/* ■ポートレット */
/* ポートレットの幅を狭くし、余白を減らす */
/* 左カラム・右カラムの幅調整 */
/* デスクトップ表示（800px以上）でのカラム幅上書き */
@media (min-width: 800px) {
    /* 左カラムがある場合の左カラム自体の幅 */
    body.col-one.col-content #portal-column-one {
        flex: 0 0 auto !important;
        width: 15% !important;
    }

    /* 右カラムがある場合の右カラム自体の幅 */
    body.col-content.col-two #portal-column-two {
        flex: 0 0 auto !important;
        width: 15% !important;
    }

    /* 中央コンテンツの幅を自動調整（100% - サイドバー幅） */
    /* 左だけある場合は 85%、両方ある場合は 70% になります */
    body.col-one.col-content #portal-column-content {
        flex: 0 0 auto !important;
        width: 85% !important; /* 左15% + 中85% = 100% */
    }

    /* 左右両方ある場合の設定（必要に応じて） */
    body.col-one.col-content.col-two #portal-column-content {
        width: 70% !important; /* 左15% + 中70% + 右15% = 100% */
    }
}
/* ポートレット（カード）の外観をまとめて微調整 */
.portlet.card {
    --bs-card-spacer-y: 0.5rem;      /* 内部の上下余白を半分に */
    --bs-card-spacer-x: 0.75rem;     /* 内部の左右余白を少し詰める */
    --bs-card-cap-padding-y: 0.3rem; /* タイトル部分を薄くする */
    --bs-card-border-color: #0000cd; /* 枠線を緑に */
    --bs-card-border-radius: 0;      /* 角を直角にしてカッチリさせる */
    --bs-card-cap-bg: #e9ecef;       /* タイトル背景を少し濃いグレーに */
}

.portletheader, .portletItem, .portletFooter {
    padding: 3px 3px !important; /* 上下左右のパディングを詰め */
    font-size: 0.7rem !important;
}

/* 1. ポートレットの外枠 (Border) の色の変更 */
.portlet {
    border: 1px solid #008000 !important; /* 枠線の太さと色 */
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 3px;    /* ポートレット内部の余白削減 */
}

/* 2. ポートレット内タイトルの設定 (リンクになっている場合) */
.portletheader a {
    color: #333333 !important;       /* タイトルリンクの色 */
    border-bottom: 1px solid #0000cd !important;
    text-decoration: none;
}

.portletheader a:hover {
    color: #0056b3 !important;       /* タイトルホバー時の色 */
    border-bottom: 1px solid #0000cd !important;
    text-decoration: underline;
}

/* ナビゲーションポートレット内のリンクを特定して上書き paddingはこの指定でないと反映されない*/
/* 1階層目（ルート）の余白設定（現在の設定） */
.portletNavigationTree .card-body ul li a {
/*    color: #444444 !important;  */
/*    display: block; */
    padding: .2rem .2rem !important; /* ここで標準の .75rem 1rem を打ち消す */
/*    text-decoration: none;  */
}
/* このpaddingの指定で、サブアイテムがインデント表示されなくなるのでインデントのみを指定 */
/* 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;
}

/* ナビゲーションポートレット内のリンク文字サイズを強制的に変更 */
.portletNavigationTree .card-body ul li a {
    font-size: 0.7rem !important;
    padding: 3px 3px !important; /* 文字の周りの余白も詰める */
}

/* もしフォルダアイコン（Before要素など）も小さくしたい場合 */
.portletNavigationTree .card-body ul li a::before {
    font-size: 0.7rem !important;
}

/* 他のポートレット（静的ポートレット等）も一括で変えたい場合 */
.portletItem a, 
.portletItem span {
    font-size: 0.7rem !important;
}

/* フォルダアイコン等のアイコンの色変更 */
/* Plone 6 (Classic) では通常 FontAwesome または画像アイコンが使われます */
.portletItem a::before, 
.portletItem i, 
.portletItem .icon-folder {
    color: #ffcc00 !important;       /* アイコン（フォルダ等）の色 */
    margin-right: 8px;
}

/* ホバー時の挙動もこちらで指定 */
.portletNavigationTree .card-body ul li a:hover {
    background-color: #f0f4f8 !important;
    color: #0056b3 !important;
}
.portletItem a:hover::before {
    color: #0056b3 !important;            /* ホバー時のアイコン色 */
}

/* 5. 選択済み (カレント/アクティブ) の項目の色の変更 */
/* ナビゲーションツリーで現在表示しているページ */
.navTreeCurrentNode, 
.portletItem.navTreeCurrentItem,
.portletNavigationTree .selected {
    background-color: #e0ffff !important; /* 選択済み項目の背景色 */
    border: 1px solid #0000cd !important;
}

.navTreeCurrentNode > a,
.portletItem.navTreeCurrentItem > a,
.portletNavigationTree .selected > a {
    color: #000000 !important;            /* 選択済み項目の文字色 */
    border: 1px solid #0000cd !important;
}

/* 選択済み項目のアイコン色 */
.navTreeCurrentNode > a::before,
.portletItem.navTreeCurrentItem > a::before {
    color: #000000 !important;
    border: 1px solid #0000cd !important;
}

/* ポートレット内の項目を区切る線（ボーダー）の色の変更 */
.portletItem {
    border-bottom: 1px solid #0000cd !important; /* 区切り線の太さと色 */
}

/* 最後の項目だけ区切り線を消したい場合（枠線との重複回避） */
.portletItem:last-child {
    border-bottom: none !important;
}

/* ナビゲーションツリー（入れ子構造）の区切り線も調整する場合 */
.portletNavigationTree .navTreeItem {
    border-bottom: 1px solid #0000cd !important; /* 少し薄めの色にする例 */
}

/* （オプション）ホバーした時に区切り線の色を強調する */
.portletItem:hover {
    border-bottom-color: #006400 !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;
}


/*****************　水ヲチ専用 *****************************/
/* 「wwatch」フォルダ以下のページにのみ適用 */
.section-wwatch #content .sred {
    color: #d9534f;
    font-weight: bold;
    font-style: normal;
    display: block;
    padding: 10px;
    border: 1px solid #d9534f;
    border-radius: 4px;
}

/* 宣伝の引用ブロック */
.section-wwatch #content blockquote.book {
    border-left: 5px solid #007bb1;
    background-color: #f0f7fa;
    padding: 10px 20px;
}

/* 他人のコメント引用 (div.wcom) */
.section-wwatch #content .wcom {
    background-color: #f9f9f9;
    border: 1px dashed #ccc;
    padding: 15px;
    margin: 10px 0;
}

/* 批判的引用 (blockquote.bwat) */
.section-wwatch #content blockquote.bwat {
    border-left: 5px solid #cc0000;
    background-color: #fff5f5;
    padding: 10px 20px;
}

/* インラインの引用 (q.book) */
.section-wwatch #content q.book {
    background-color: #ffffcc;
    border-bottom: 1px solid #ffcc00;
}

/* 赤い★マーク (span.fred) */
.section-wwatch #content .fred {
    color: #ff0000;
    font-weight: bold;
    margin-right: 5px;
}
/*****************　水ヲチ専用ここまで *****************************/




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