/**
 * baserCMS :  Based Website Development Project <https://basercms.net>
 * Copyright (c) NPO baser foundation <https://baserfoundation.org/>
 *
 * @copyright     Copyright (c) NPO baser foundation
 * @link          https://basercms.net baserCMS Project
 * @since         5.0.0
 * @license       https://basercms.net/license/index.html MIT License
 */

/**
 * テーマ設定用CSS
 * 呼出箇所：全てのページ
 */

.bs-header__nav,
.bs-footer{
	background-color:MAIN!important;
}
.bs-pagination a,
.bs-top-post-to-list a,
.bs-widget-local-navi h2{
	background-color:SUB;
}
.bs-main-contents a:link,
.bs-main-contents a:visited,
.bge-contents a:link,
.bge-contents a:visited,
.cke_editable a:link,
.cke_editable a:visited {
	color:LINK;
}
.bs-main-contents a:hover,
.bge-contents a:hover,
.cke_editable a:hover {
	color:HOVER;
}

/* 1. 全体を囲むラッパーを画面上部に固定 */
#HeaderWrap {
    position: fixed; /* ヘッダー固定 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 背景色は各行（Row1, Row2）で個別に指定するため、Wrapからは削除 */
}

/* 2. 1行目（ロゴ、検索、ログイン）のレイアウト */
#HeaderRow1 {
    width: 100%; /* 幅を100%に固定 */
    float: none !important; /* 回り込みを強制解除 */
    background-color: #fff; /* 1行目の背景色 */
}
#HeaderRow1 .bs-container {
    display: flex;
    justify-content: space-between; /* 両端に配置 (ロゴ / ツール) */
    align-items: flex-start; /* 上揃えに変更 */
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 150px; /* ヘッダーの最低の高さを確保 (任意) */
}

#HeaderRow1 #Logo {
    flex-grow: 0;
    flex-shrink: 0;
    float: none !important;
}

/* 2-1. 検索・ログインツールのレイアウト */
#HeaderTools {
    display: flex;
    align-items: center;
    flex-shrink: 1;
    margin-left: 20px;
}
#HeaderTools > div {
    margin-left: 15px;
}
#HeaderTools .site-search {
    /* (検索フォームの調整) */
}
#HeaderTools .login-button {
    flex-shrink: 0;
}

/* 2-2. ログイン/ログアウトボタンのスタイル */
#HeaderTools .login-button a.bs-button-sm {
    /* ▼ デザインを自由に変更してください ▼ */
    background-color: #007bff; /* ボタンの背景色 (例: 青) */
    color: #ffffff !important; /* 文字色 (白) */
    /* ▲ デザインを自由に変更してください ▲ */

    padding: 8px 16px; /* ボタンの余白 (上下8px, 左右16px) */
    text-decoration: none; /* テキストの下線を削除 */
    font-weight: bold; /* 文字を太く */
    font-size: 0.9em;
    line-height: 1.5;
    border: none; /* BaserCMSのデフォルト枠線を削除 */
    border-radius: 5px; /* 角を丸くする */
    white-space: nowrap; /* ボタンが改行しないように */
    transition: background-color 0.2s ease; /* ホバー時のアニメーション */
}

/* ログインボタンのホバー（マウスを乗せた時） */
#HeaderTools .login-button a.bs-button-sm:hover {
    background-color: #0056b3; /* ホバー時の背景色 (少し濃い青) */
    color: #ffffff !important;
}

/* 2-3. サイト内検索フォームのスタイル (site_search_form.php) */

/* フォーム全体をFlexboxにして、入力欄とボタンを横並びに */
#HeaderTools .site-search form {
    display: flex;
    /* align-items: stretch; 高さを揃える */
}

/* BaserCMS/CakePHPが生成する .input ラッパーの余白をリセット */
#HeaderTools .site-search .input {
    margin: 0;
    padding: 0;
    flex-grow: 1; /* 入力欄が伸びるように */
}

/* テキスト入力欄のスタイル */
#HeaderTools .site-search input[name="q"] {
    width: 100%; /* ラッパーいっぱいに広げる */
    padding: 8px 12px; /* ボタンと高さを合わせる */
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-radius: 5px;
    /* ボタンと連結するため、右側の角丸を解除 */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    line-height: 1.5; /* ボタンと line-height を合わせる */
    margin-right: -1px; /* ボタンと連結させる */
    box-sizing: border-box; /* paddingを含めて幅を計算 */
    height: 100%; /* 高さを親(form)に合わせる */
}

/* 検索ボタンのスタイル (ログインボタンとデザインを統一) */
#HeaderTools .site-search .submit_button.bs-button {
    /* ▼ ログインボタンとデザインを合わせる ▼ */
    background-color: #007bff; /* ボタンの背景色 (例: 青) */
    color: #ffffff !important; /* 文字色 (白) */
    /* ▲ ログインボタンとデザインを合わせる ▲ */
    
    padding: 8px 16px; /* ボタンの余白 */
    font-weight: bold; /* 文字を太く */
    font-size: 0.9em;
    line-height: 1.5; /* テキスト入力欄と高さを合わせる */
    border: none;
    border-radius: 5px;
    /* テキスト入力欄と連結するため、左側の角丸を解除 */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    
    white-space: nowrap; /* ボタンが改行しないように */
    cursor: pointer; /* マウスカーソルを指に */
    transition: background-color 0.2s ease;
    flex-shrink: 0; /* ボタンが縮まないように */
}

/* 検索ボタンのホバー（マウスを乗せた時） */
#HeaderTools .site-search .submit_button.bs-button:hover {
    background-color: #0056b3; /* ホバー時の背景色 (少し濃い青) */
    color: #ffffff !important;
}

/* 3. 2行目（グローバルメニュー）のレイアウト */
#HeaderRow2 {
    width: 100%; /* 幅を100%に固定 */
    float: none !important; /* 回り込みを強制解除 */
    background-color: #f0f0f0; /* 2行目の背景色 (例) */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #ddd;
}
#HeaderRow2 #GlobalMenu {
    float: none !important;
}

/* 3-1. メニュー（global_menu.php）を横並びにする */
#HeaderWrap #GlobalMenu ul.bs-global-menu {
    margin: 0;
    padding: 0;
    display: flex; 
    flex-wrap: wrap; 
    list-style: none;
}
#HeaderWrap #GlobalMenu ul.bs-global-menu > li.bs-global-menu-item {
    display: block;
    float: none;
    margin-left: 0; 
}
#HeaderWrap #GlobalMenu ul.bs-global-menu > li.bs-global-menu-item a {
    padding: 10px 15px; 
    display: block;
}

/* 4. パンくずリストのラッパー（crumbs.php） */
#CrumbsWrap {
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
    /* font-size は li 側に移動 */
    width: 100%; 
    float: none !important; 
}
#CrumbsWrap .bs-container {
    padding-top: 8px;
    padding-bottom: 8px;
}
#CrumbsWrap .bs-crumbs {
    margin: 0;
}

/* ▼▼▼ パンくずを横並びにするためのスタイル (ここから追加) ▼▼▼ */

/* ulタグの余白とリストマーカーをリセット */
#CrumbsWrap .bs-crumbs ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.5; /* 他のテキストと高さを合わせる */
}

/* liタグをインライン要素（横並び）に変更 */
#CrumbsWrap .bs-crumbs ul li {
    display: inline; /* liを横並びにする */
    font-size: 0.9em; /* 文字サイズを指定 */
}

/* (もしリンク色を変えたい場合) */
#CrumbsWrap .bs-crumbs ul li a {
    text-decoration: none;
}
#CrumbsWrap .bs-crumbs ul li a:hover {
    text-decoration: underline;
}

/* 5. 【最重要】コンテンツの開始位置をずらす */
#PageContainer {
    /* 固定ヘッダーの高さ分、コンテンツの上部に余白を作る */
    /* 120px よりも大きい値 (例: 180px) に調整してください。*/
    padding-top: 180px; /* ← 必ずヘッダーの実際の高さに合わせて調整してください */
}


/* ========================================
   ログイン画面のスタイル
   ======================================== */

/* タイトルと全体枠 */
#LoginParams {
    padding: 60px 0;
    max-width: 800px; /* 全体の幅 */
    margin: 0 auto;
}
.bs-login-title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2rem;
}

/* ログインラッパー（ソーシャルと通常フォームを横並びにする場合） */
.bs-login-wrapper {
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    flex-wrap: wrap; /* スマホで縦並びにする */
}

/* エリア共通 */
.bs-login-social,
.bs-login-form {
    flex: 1; /* 均等に分割 */
    min-width: 300px; /* 最低幅 */
}

.bs-login-wrapper h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-align: center;
    color: #555;
    border-bottom: none;
}

/* --- ソーシャルログインボタン --- */
.social-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 20px;
}

.bs-btn-social {
    display: block;
    text-align: center;
    padding: 12px;
    color: #fff !important;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: opacity 0.2s;
    position: relative;
}
.bs-btn-social:hover {
    opacity: 0.8;
    color: #fff !important;
    text-decoration: none;
}
.bs-btn-social .icon {
    position: absolute;
    left: 20px;
    font-weight: bold;
}

/* 各サービスのブランドカラー */
.btn-google { background-color: #DB4437; }
.btn-facebook { background-color: #4267B2; }
.btn-github { background-color: #333; }
.btn-line { background-color: #06C755; }


/* --- 区切り線 --- */
.bs-login-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    position: relative;
}
.bs-login-separator span {
    background: #eee;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #999;
}
/* スマホ対応: 縦並びのときは横線にする */
@media (max-width: 768px) {
    .bs-login-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    .bs-login-separator {
        width: 100%;
        height: 20px;
        border-bottom: 1px solid #eee;
        margin-bottom: 20px;
    }
    .bs-login-separator span {
        background: #fff;
        position: absolute;
        top: 10px;
    }
}

/* --- 通常フォーム --- */
.bs-login-form form {
    padding: 0 20px;
}
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.form-submit {
    text-align: center;
    margin-top: 30px;
}
.bs-btn-login {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
}
.login-links {
    text-align: center;
    margin-top: 15px;
    font-size: 0.9rem;
}

/* ソーシャルログイン同意文のスタイル */
.bs-login-social {
    /* 既存のスタイル */
    /* flex: 1; */
    /* min-width: 300px; */
    
    padding-bottom: 20px; /* 同意文エリアとの間にスペースを設ける */
}

.bs-social-agreement {
    margin-top: 30px;
    padding: 15px;
    background-color: #f7f7f7;
    border: 1px solid #eee;
    border-radius: 5px;
    font-size: 0.8rem; /* 小さめの文字サイズ */
    line-height: 1.5;
    color: #666;
    text-align: center;
}

.bs-social-agreement p {
    margin: 0 0 5px 0;
}
.bs-social-agreement a {
    font-weight: bold;
    color: #007bff;
    text-decoration: underline;
}
.bs-social-agreement a:hover {
    color: #0056b3;
}

/* --- 用語集（リファレンス）のスタイル --- */

.bs-blog-reference {
    padding: 20px 0;
}

/* 検索ボックス周り */
.reference-search {
    margin-bottom: 30px;
    background: #f5f5f5;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

/* リスト全体の枠 */
.reference-list dl {
    border-top: 1px solid #eee;
}

/* 各用語のブロック */
.reference-item {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}

/* 用語名 (DT) */
.reference-item dt {
    font-size: 1.4rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* カテゴリバッジ */
.reference-category a {
    font-size: 0.7rem;
    background-color: #e9ecef;
    color: #495057;
    padding: 3px 8px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: normal;
    vertical-align: middle;
}

/* 定義文 (DD) */
.reference-item dd {
    margin-left: 0; /* ブラウザのデフォルトインデントを削除 */
    font-size: 1rem;
    color: #555;
    line-height: 1.8;
}

/* 詳細リンク */
.reference-more {
    margin-top: 10px;
    text-align: right;
}
.reference-more a {
    font-size: 0.9rem;
    color: #007bff;
    text-decoration: none;
}
.reference-more a:hover {
    text-decoration: underline;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .reference-item dt {
        font-size: 1.2rem;
    }
}

/* --- 用語集専用検索フォーム --- */
.reference-search-box .reference-search-inner {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.reference-search-box input[type="text"],
.reference-search-box select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 200px;
}

.reference-search-box button {
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.reference-search-box button:hover {
    background-color: #555;
}

@media (max-width: 600px) {
    .reference-search-box .reference-search-inner {
        flex-direction: column;
    }
    .reference-search-box input[type="text"],
    .reference-search-box select,
    .reference-search-box button {
        width: 100%;
    }
}

/* --- トップページ 新着情報リスト --- */

.bs-top-content {
    padding: 40px 0;
}

.top-headline {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
    color: #333;
}

/* リスト全体の枠 */
.top-news-list {
    border-top: 1px solid #ddd;
}

/* 個別の記事行 */
.news-item {
    border-bottom: 1px solid #ddd;
    transition: background-color 0.2s;
}
.news-item:hover {
    background-color: #f9f9f9; /* ホバー時の色 */
}

/* リンク全体をブロックにして押しやすく */
.news-link {
    display: flex;
    align-items: center; /* 上下中央揃え */
    padding: 15px 10px;
    text-decoration: none;
    color: #333;
    flex-wrap: wrap; /* スマホで折り返す設定 */
}

/* 1. 更新日時 */
.news-date {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #777;
    margin-right: 15px;
    font-size: 0.9rem;
    white-space: nowrap; /* 改行させない */
}

/* 2. カテゴリラベル */
.news-category {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.75rem;
    color: #fff;
    background-color: #999;
    border-radius: 3px;
    margin-right: 15px;
    min-width: 80px;
    text-align: center;
    white-space: nowrap;
}
/* カテゴリ別の色（ダミーデータで設定したクラス） */
.news-category.cat-news { background-color: #007bff; } /* お知らせ: 青 */
.news-category.cat-press { background-color: #28a745; } /* プレス: 緑 */

/* 3. トピックタイトル */
.news-title {
    flex: 1; /* 残りの幅いっぱいを使う */
    font-size: 1rem;
    line-height: 1.4;
    
    /* 長すぎる場合に「...」にする設定 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 200px; /* スマホで潰れすぎないように */
}

/* 一覧ボタン */
.top-more-btn {
    margin-top: 30px;
    text-align: center;
}

/* --- レスポンシブ対応 (スマホ表示) --- */
@media (max-width: 768px) {
    .news-link {
        display: block; /* 縦積みに変更 */
        padding: 12px;
    }
    .news-date {
        display: inline-block;
        margin-bottom: 5px;
        font-size: 0.8rem;
    }
    .news-category {
        display: inline-block;
        margin-bottom: 5px;
    }
    .news-title {
        display: block;
        white-space: normal; /* 折り返して全文表示 */
        margin-top: 5px;
    }
}

/* --- ツリー検索レイアウト (2カラム) --- */

.bs-tree-layout {
    padding: 20px 0;
}

.bs-tree-container {
    display: flex;
    gap: 30px; /* 左右の余白 */
    align-items: flex-start; /* 上揃え */
}

/* --- [左側] サイドバー --- */
.bs-tree-sidebar {
    width: 250px; /* サイドバーの幅 */
    flex-shrink: 0; /* 幅を縮めない */
    background: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
}
.tree-title {
    font-size: 1.1rem;
    margin-bottom: 15px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}

/* カテゴリツリーの装飾 */
ul.category-tree, 
ul.category-tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.category-tree ul {
    margin-left: 15px; /* インデント */
}
ul.category-tree li {
    margin-bottom: 5px;
}
ul.category-tree li a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 5px;
    transition: background 0.2s;
}
ul.category-tree li a:hover {
    background: #e0e0e0;
}
ul.category-tree li.current > a {
    font-weight: bold;
    color: #007bff;
}

/* --- [右側] メインエリア --- */
.bs-tree-main {
    flex-grow: 1; /* 残りの幅を使用 */
    min-width: 0; /* Flexboxのはみ出し防止 */
}

/* 検索窓エリア (右側上部) */
.tree-search-area {
    margin-bottom: 20px;
    text-align: right; /* 右寄せ */
}
.tree-search-area form {
    display: inline-flex;
    gap: 5px;
}
.tree-search-area input[type="text"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 250px;
}

/* 一覧リスト (右側下部) */
.bs-blog-post {
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}
.post-meta {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 5px;
}
.post-category a {
    background: #eee;
    padding: 2px 8px;
    border-radius: 4px;
    text-decoration: none;
    color: #555;
    margin-left: 10px;
}
.post-title {
    font-size: 1.2rem;
    margin: 0;
}
.post-title a {
    text-decoration: none;
    color: #333;
}

/* レスポンシブ対応 (スマホ) */
@media (max-width: 768px) {
    .bs-tree-container {
        flex-direction: column; /* 縦並びにする */
    }
    .bs-tree-sidebar {
        width: 100%; /* 全幅に */
    }
    .tree-search-area input[type="text"] {
        width: 100%; /* 検索窓も全幅に */
    }
}