/* index.phpのデザイン */
@charset "UTF-8";
/* body {
	background-color:fuchsia;
	background-image: url(logo.png);
	background-size: 70px 70px;
	background-repeat: repeat-y;
	
	padding-left: 70px;
} */

/* 検索ボタンのスタイル */
.btn-search {
    /* ログアウトボタン（.btn-logout）と同じデザインベースを適用 */
    
    /* 【色を区別】: 例として緑色系を使用 */
    color: #FFFFFF; /* 白文字 */
    background-color: #57c370; /* 緑色 */
    border: 1px solid #57c370; /* 枠線を緑色にする */
    
    /* 大きさ・形状はログアウトボタンと同じにする */
    font-size: 0.9rem; 
    padding: 5px 10px; 
    border-radius: 4px; 
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s;
    
    /* Flexアイテムとしてのサイズ制御 */
    flex-shrink: 0; 
}

/* マウスオーバー時のスタイル（UX向上） */
.btn-search:hover {
    /* 濃い緑色 */
    background-color: #1e7e34; 
    border-color: #1e7e34;
}

.header-content {
    /* 子要素（ロゴとH1）を横並びにする */
    display: flex;
    /* 【★★★ 修正・追加 ★★★】要素間に均等な空間を作り、右端にログアウトボタンを寄せる */
    /* justify-content: space-between;  */
    /* 垂直方向の中央に配置する */
    /* align-items: center; */
    /* ロゴとH1の間に少し隙間を空ける */
    gap: 20px; 
    /* 必要に応じて背景色やパディングを設定 */
    padding: 10px 20px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #ddd;
}

.header-content img {
    /* ロゴのサイズを調整 */
    height: 50px; 
    width: auto;
}

.header-content h1 {
    /* H1の余白をリセットして、Flexboxで制御しやすくする */
    margin: 0;
    /* テキストのフォントサイズ調整など */
    font-size: 24px; 
    color: #333;
}

/* ログアウトボタンの配置（ヘッダーと独立して右上固定） */
.logout-area {
    position: fixed; 
    top: 15px;      /* 画面上端から15px下 */
    right: 20px;    /* 画面右端から20px左 */
    z-index: 1100;  /* ヘッダーよりも手前に表示 */
}


.logout-area .btn-logout {
    /* ログインボタンと同様の色を適用 */
    color: #FFFFFF;
    background-color: #007bff;
    border: 1px solid #007bff; /* 枠線をメインカラーにする */
    --darker-main-color: #0056b3; /* 例: 青色の濃い色（ホバー用） */
    
    /* 大きさ調整：ログインボタンより少し小さくする */
    font-size: 0.9rem; /* フォントサイズを小さく */
    padding: 5px 10px; /* パディング（内側の余白）を小さく */
    
    /* その他の標準的なボタンスタイル */
    border-radius: 4px; /* 角を丸くする */
    cursor: pointer; /* マウスオーバー時にカーソルをポインターにする */
    text-decoration: none; /* テキストの装飾を解除（不要な場合もあるが念のため） */
    display: inline-block; /* インラインブロック要素にする */
    transition: background-color 0.2s; /* ホバー時のアニメーション効果 */
}

/* マウスオーバー時のスタイル（UX向上） */
.btn-logout:hover {
    background-color: #0056b3; /* メインカラーより少し濃い色など */
    border-color: #0056b3;
}

/* 文書一覧のタイトル（index.phpのH2タグ）のスタイル */
.manual-list-title {
    width: 80%;       /* テーブルと同じ幅（80%）を設定 */
    margin: 30px auto 15px auto; /* 上下30px、左右autoでテーブルと同じ位置に中央寄せ */
    text-align: left; /* 中央寄せされたブロック内で文字を左寄せ */
}

.search-container {
    /* 検索フォームの幅を内容物の幅に限定 */
    width: fit-content; 
    /* 左側マージンをautoにすることで、コンテナ全体を右端に寄せる */
    margin-left: 100px; 
    /* 既存のヘッダーとの重なりを避けるため、上部に少しマージンを設ける */
    margin-top: 20px;
    /* 右端に寄せすぎないように、右側に少し余白を設ける（任意） */
    margin-right: 20px; 
}

/* 検索フォーム 子要素を横並びにする */
.search-container form {
    display: flex;
    /* 子要素（入力欄とボタン）を垂直方向の中央に揃える */
    align-items: center; 
    /* 要素間の隙間を設定しても良い */
    gap: 8px;
}

/* 検索ボタンの幅を固定する場合 */
.search-container button {
    /* 検索ボタンがFlexアイテムとして適切に表示されるようにする */
    flex-shrink: 0; 
}

/* テーブル全体の基本設定 */
table {
    width: 80%; /* テーブルの幅を画面の80%に設定（中央配置と相性が良い） */
    margin: 30px auto; /* 上下に30px、左右にautoで中央配置 */
    border-collapse: collapse;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 浮き出し効果 */
}

/* ヘッダーセルとデータセルの基本スタイル */
table th, table td {
    border: 1px solid #ddd;
    padding: 12px 15px; 
    text-align: left;
    vertical-align: top; /* rowspan使用時の文字位置調整 */
}

/* 部署名（<th>）のスタイルを強調 */
table th {
    background-color: #f5f5f5; /* 落ち着いた背景色 */
    font-weight: 600;
    color: #333;
    width: 25%; /* 部署名の幅を確保 */
}

/* 行のゼブラストライプ */
table tr:nth-child(odd) {
    background-color: #fafafa;
}

/* ホバーエフェクト */
table tr:hover {
    background-color: #e0f7fa;
    transition: background-color 0.3s;
}

/* リンクテキストの色を統一し、下線をなくすなど */
table a {
    color: #007bff; /* メインカラーを使用 */
    text-decoration: none; /* リンクの下線をなくす */
}

table a:hover {
    text-decoration: underline; /* ホバー時に下線を表示 */
}
/* footer{

} */