/* 共通のcss */

.kiwi-maru-light {
    font-family: "Kiwi Maru", serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .kiwi-maru-regular {
    font-family: "Kiwi Maru", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .kiwi-maru-medium {
    font-family: "Kiwi Maru", serif;
    font-weight: 500;
    font-style: normal;
  }

/* 背景のスタイル */
body {
    font-family: 'Kiwi Maru', sans-serif !important;
    background-image: url('/images/background-image.jpg'); /* 画像のパスを指定 */
    background-size: cover; /* 画面全体を覆う */
    background-position: center; /* 画像の位置を中央に */
    background-repeat: no-repeat; /* 繰り返さない */
    background-attachment: fixed; /* スクロールしても背景が固定 */
    height: 100%; /* 高さを100%に */
    margin: 0; /* 余白を削除 */
    padding: 0; /* 余白を削除 */
    display: flex; /* フレックスボックスを使用して中央揃え */
    flex-direction: column;
    justify-content: flex-start; /* コンテンツが上に寄るように */
}

/* コンテンツセクションのスタイル */
.action-buttons {
    flex: 1; /* コンテンツが伸縮してスクロール可能に */
    overflow-y: auto; /* コンテンツ部分がスクロール可能に */
    padding: 20px;
}

/* システムタイトルの文字デザイン*/
.system-title {
    font-size: 2.5rem;
    color: black !important;
    font-weight: 700;
    text-shadow: /* 文字回りの白い縁取り */
        -1px -1px 0 white,  
        1px -1px 0 white,
        -1px 1px 0 white,
        1px 1px 0 white !important;
        margin-top: 40px !important; /* タイトル上下の空間 */
        margin-bottom: 40px !important;    
}

/* カードの色を変更 */
.card-body {
    background-color: #eedcb3; /* ベージュ */
    display: flex; /* フレックスボックスを使用 */
    flex-direction: column; /* 縦方向に並べる */
    /* justify-content: flex-start; */ /* コンテンツを上から配置 */
    /* height: auto; */ /* 高さを自動にする */
}

/* 入力欄の上の空間を追加 */
.mb-3 {
    margin-top: 100px !important;
}

/* 入力欄の上の空間を追加 */
.mb-2 {
    margin-top: 30px !important; /* お好みの値に調整 */
}

/* メールアドレスとパスワード入力欄の線を黒色に変更 */
input[type="text"],input[type="email"], input[type="password"], select[name="role"] {
    border: 2px solid black !important; /* ボーダーを黒にして、少し太く */
}

/* チェックボックスを大きくする */
.form-check-input {
    transform: scale(1.5); /* 1.5倍に拡大 */
    margin-right: 0.5rem; /* チェックボックスとラベルの間にスペースを追加 */
}

/* ラベルのフォントサイズを変更 */
.form-check-label {
    font-size: 1.25rem; /* フォントサイズを大きく */
}

/* 共通のボタンスタイル */
button.custom-button {
    width: 50%; /* 幅を50%に */
    background-color: #6f5436; /* 背景色:バーントアンバー */
    border: 2px solid #6f5436; /* ボーダー色:バーントアンバー */
    color: white; /* テキスト色:白 */
    margin-bottom: 0; /* ボタンの下の余白を調整 */
    font-size: 16px; /* ボタンの文字サイズを調整 */
    padding: 10px; /* ボタンの内側の余白を追加 */
}

/* ホバー時の色:オーカー */
button.custom-button:hover {
    background-color: #ba8b40; /* ホバー時の背景色 */
}

/* パスワードリセットリンクのデザイン変更 */
.custom-link {
    font-size: 1.2rem !important; /* フォントサイズを大きく */
    color: #000000 !important; /* テキストの色を変更（セピアの色に） */
}

.custom-link:hover {
    color: #665a1a !important; /* ホバー時の色（少し暗いセピア） */
}

/* サイドメニューのデザイン */
body .sidebar {
    background-color: #eedcb3 !important; /* より具体的なセレクタを使って上書き */
}

.sidebar {
    padding: 20px; /* パディングを追加 */
    position: fixed; /* サイドメニューを固定表示 */
    top: 0; /* 上からの位置を0に設定 */
    left: 0; /* 左からの位置を0に設定 */
    width: 250px; /* 幅を設定 */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* 軽いシャドウを追加 */
    overflow-y: auto; /* 縦スクロールを有効にする */
}
/* サイドバー内のユーザーネームとリンクのスタイル */
.sidebar h4 {
    text-align: center; /* 中央揃え */
    font-size: 30px; /* フォントサイズを大きくする（調整可） */
    margin-top: 20px;
    margin-bottom: 20px; /* 下のマージンを追加 */
}

/* サイドメニューのリンクスタイル */
.sidebar .nav a {
    text-align: center; /* 中央揃え */
    font-size: 25px; /* フォントサイズを大きくする */
    display: block; /* リンクをブロック要素にして全幅を占める */
    margin: 20px 0; /* 上下のマージンを追加 */
    color: black; /* リンクの色を黒に */
    text-decoration: none; /* 下線を削除 */
}

.sidebar .nav a:hover {
    color: white; /* ホバー時の文字色 */
    background-color: olive; /* ホバー時の背景色 */
}

/* 検索ボタンのスタイル */
.search-form .search-link {
    display: block; /* ブロック要素にすることで幅全体を占める */
    text-align: center; /* テキストを中央揃え */
    font-size: 20px; /* フォントサイズ */
    color: black; /* リンクのテキストカラー */
    text-decoration: none; /* 下線を消す */
    padding: 10px 20px; /* 内側の余白 */
    border: none; /* ボーダーを消す */
    border-radius: 5px; /* 角を丸くする */
    cursor: pointer; /* ホバー時のポインター表示 */
    background-color: transparent; /* 背景を透明に */
    margin: 10px auto; /* ボタンを中央揃え */
    width: auto; /* ボタン幅を内容に合わせる */
    transition: all 0.3s ease; /* スムーズな変化 */
}

/* ホバー時のスタイル */
.search-form .search-link:hover {
    color: white; /* ホバー時の文字色 */
    background-color: olive; /* ホバー時の背景色 */
}

/* フォーム全体のスタイル */
.search-form {
    text-align: center; /* フォーム全体の中央揃え */
    margin-top: 15px; /* 上の要素からの余白 */
}

/* 検索ワード入力欄の調整 */
.search-form .form-control {
    margin-bottom: 10px; /* 下のボタンとの間に余白を追加 */
    display: block; /* ブロック要素として幅を調整 */
    margin-left: auto; /* 左側余白を自動に */
    margin-right: auto; /* 右側余白を自動に */
}

/* ログアウトボタンのコンテナのスタイル */
.logout-button-container {
    display: flex; /* フレックスボックスを使用 */
    justify-content: center; /* 中央に配置 */
    margin-top: auto; /* コンテナを下部に配置 */
    width: 100%;
}

/* ログアウトボタンのデザイン変更 */
button.logout-button {
    width: 100%; /* 幅を100%に設定 */
    background-color: #6f5436; /* 背景色:バーントアンバー */
    border: 2px solid #6f5436; /* ボーダー色:バーントアンバー */
    color: white; /* テキスト色:白 */
    font-size: 25px; /* フォントサイズを調整 */
    text-align: center; /* テキストを中央揃え */
    border-radius: 5%;
    bottom: 20px; 
    border-radius: 5px;
}

/* ログアウトボタン:ホバー時 */
button.logout-button:hover{
    background-color: #ba8b40; /* ホバー時の背景色 */
}

/* ホバー時の色:オーカー */
button.custom-button:hover {
    background-color: #ba8b40; /* ホバー時の背景色 */
}

/* お知らせ欄 */
.notification-section {
    background-color: #f5f5f5;
    padding: 10px;
    margin-bottom: 50px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%; /* 幅を80%に設定 */
    max-width: 1000px; /* 最大幅を600pxに設定 */
    margin-left: auto; /* 左右中央に配置 */
    margin-right: auto; /* 左右中央に配置 */
    min-height: 200px;
}

/* お知らせのタイトルを中央に表示 */
.notification-title {
    text-align: center; /* タイトルを中央に揃える */
    font-size: 1.8em; /* フォントサイズを大きめに設定 */
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 10px; /* 下部の余白 */
    font-weight: bold; /* 太字に設定 */
    color: #333; /* タイトルの色を設定 */
}

/* 下部のエリア */
.bottom-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.buttons-and-selectors {
    display: flex;
    gap: 10px;
    align-items: center;
}

.additional-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.search-area {
    display: flex;
    gap: 10px;
}

.search-input {
    padding: 5px;
    width: 200px;
}

/* 新規登録ボタン、カテゴリー追加ボタンのスタイル */
button.register-button,
button.add-category-button {
    width: 300px; /* 幅を固定 */
    padding: 10px; /* 上下のパディング */
    background-color: #6f5436; /* 背景色: バーントアンバー */
    border: 2px solid #6f5436; /* ボーダー色: バーントアンバー */
    color: white; /* テキスト色: 白 */
    font-size: 30px; /* フォントサイズ */
    margin-top: 50px;
    margin-right: 30px; /* ボタン間のスペース */
    margin-left: 110px;
    border-radius: 5px; /* ボーダーの角を丸く */
    cursor: pointer; /* カーソルをポインターに */
}

button.register-button:hover,
button.add-category-button:hover {
    background-color: #ba8b40; /* ホバー時の色: オーカー */
}

/* GOボタンと検索ボタンのスタイル */
button.go-button,
button.search-button {
    width: 100px; /* 幅を固定 */
    padding: 5px; /* 上下のパディング */
    background-color: #6f5436; /* 背景色: バーントアンバー */
    border: 2px solid #6f5436; /* ボーダー色: バーントアンバー */
    color: white; /* テキスト色: 白 */
    font-size: 30px; /* フォントサイズを少し小さく設定 */
    margin-top: 50px;
    margin-right: 50px; /* ボタン間のスペース */
    border-radius: 5px; /* ボーダーの角を丸く */
    cursor: pointer; /* カーソルをポインターに */
}

button.go-button:hover,
button.search-button:hover {
    background-color: #ba8b40; /* ホバー時の色: オーカー */
}

/* スピンセレクターと検索ワード欄のスタイル */
.category-selector,
.search-input {
    width: 500px; /* 幅をボタンと合わせる */
    padding: 0px; /* 上下のパディング */
    font-size: 30px; /* フォントサイズをボタンと同じに */
    border: 2px solid #6f5436; /* ボーダー色をボタンと同じに */
    border-radius: 5px; /* ボーダーの角を丸く */
    margin-top: 50px;
    margin-right: 30px; /* ボタンとの間隔 */
}

.category-selector {
    height: 70px; /* 高さをボタンに合わせる */
}

.search-input {
    height: 70px; /* 高さをボタンに合わせる */
}

/* 一般ユーザーのホーム画面専用のスタイル */
.user-home .action-buttons {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央に配置 */
}

.user-home .category-selector {
    margin-bottom: 10px; /* スピンセレクターの下にマージンを追加 */
}

/* アドミンネームのホバー時の色変更 */
.sidebar h2:hover {
    color: #5f6527; /* オリーブグリーン */
    cursor: pointer; /* ポインターを表示 */
}

/* 特定のモーダルにスタイルを適用 */
#accountModal .modal-content {
    background-color: #eedcb3 !important; /* サイドメニューと同じ色 */
    border-radius: 15px !important; /* 角を丸める */
    max-width: 500px !important; /* 幅を調整 */
     /* 幅を100%に設定 */
    width: 85% !important;
    height: 70% !important; /* 自動で高さを調整 */
    max-height: 80vh !important; /* 最大の高さを制限 */
    overflow-y: auto !important; /* コンテンツが多いときはスクロール */
}

/* モーダルを中央に表示 */
.modal-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* 縦の中央配置 */
}

/* モーダルのテキストを中央に揃える */
.modal-header, .modal-footer {
    justify-content: center; /* ボタンを中央に配置 */
}

.modal-title {
    font-size: 1.5em; /* タイトルのフォントサイズを大きく */
    margin-bottom: 20px; /* タイトルと内容の間にスペースを追加 */
}

.modal-header {
    border-bottom: 2px solid #6f5436 !important; /* 下線の色を濃くする */
}

/* モーダル全体のフォントサイズを大きくする */
#accountModal .modal-body,
#accountModal .modal-title {
    font-size: 1.5rem; /* お好みのサイズに調整 */
}

#accountModal .modal-footer button {
    font-size: 1rem; /* ボタンのサイズも調整 */
}

/* モーダルのタイトルを中央に配置 */
#accountModal .modal-header .modal-title {
    text-align: center; /* テキストを中央に */
    width: 100%; /* 幅を100%に設定して中央配置を効果的に */
}

.modal-footer {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: center; /* 中央揃え */
    margin-top: 2%; /* 上部のスペースを追加 */
    border: none !important; /* フッターのボーダーを削除 */
}

.modal-footer .btn {
    width: 200px; /* ボタンを幅いっぱいに */
    max-width: 200px; /* 最大幅を指定 */
    padding: 10px; /* 内側のスペースを調整 */
    font-size: 1.5em; /* フォントサイズを大きく */
    margin-top: 15px; /* ボタンの上にスペースを追加 */
}

.btn-primary {
    background-color: #5f6527 !important; /* オリーブグリーン */
    border: none !important; /* ボーダーをなくす */
    /* margin-bottom: 20px; */
}

.btn-danger {
    background-color: #b33e5c !important; /* ワインレッド */
    border: none !; /* ボーダーをなくす */
}

.btn:hover {
    opacity: 0.9; /* ホバー時の透明度を少し変更 */
}

/* 削除確認モーダルの背景色 */
.modal-content {
    background-color: #c9caca !important; /* ベージュの色 */
    border-radius: 10px; /* 角を少し丸める */
}

/* はいボタンの色 */
#deleteConfirmationModal .btn-primary {
    background-color: #800000; /* ワインレッドの色 */
    border: none; /* ボーダーを削除 */
}

/* いいえボタンの色をオリーブグリーンに */
#deleteConfirmationModal .btn-secondary {
    background-color: #6B8E23; /* オリーブグリーンの色 */
    color: white; /* 文字色を白に */
    border: none; /* ボーダーを削除 */
}

/* New Item 画面のスタイル */
.form-label {
    font-size: 25px; /* ラベルのフォントサイズを大きく */
    text-shadow: 
        -1px -1px 0 white,  
        1px -1px 0 white,
        -1px 1px 0 white,
        1px 1px 0 white; /* 白い縁取り */
}

.form-group select {
    width: 200px; /* 適切な幅に調整 */
    margin: 0 auto; /* 中央に配置 */
    display: block; /* ブロック要素にして中央寄せ */
}

/* デフォルトの真四角の枠 */
.image-placeholder {
    width: 250px; /* 真四角の幅 */
    height: 250px; /* 真四角の高さ */
    background-color: #ffffff; /* 背景色を白に変更 */
    border: 2px dashed #ccc; /* 点線の枠 */
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を真四角に収める */
}

.form-group {
    text-align: left; /* ラベルと入力欄を中央揃え */
}

/* ラベルを中央寄せ */
.form-group label {
    text-align: center;  /* ラベルのテキストを中央に */
    display: block;      /* ラベルをブロック要素にして中央に配置 */
}

 /* アイテムの名前の記入欄の幅調整 */
.input-field {
    width: 40% !important; /* お好みの幅に調整 */
    margin: 0 auto; /* 中央揃え */
}

/* 詳細の記入欄の幅調整 */
.description-textarea {
    width: 60% !important; /* 必要に応じて調整 */
    margin: 0 auto; /* 中央揃え */
    display: block; /* ブロック要素として表示 */
    height: auto; /* 内容に合わせて高さを自動調整 */
}

/* 物品登録ボタンのスタイル */
.item-input {
    padding: 12px 24px; /* ボタンの内側の余白 */
    font-size: 20px !important; /* フォントサイズ */
    margin-right: 20px !important; /* ボタン間の余白 */
}

/* キャンセルボタンのスタイル */
.item-cancel {
    padding: 12px 24px;
    font-size: 20px !important;
    margin-left: 20px !important;
    background-color: #800000 !important; /* ワインレッドの色 */

}

/* アイテム一覧画面 */
/* 画像のスタイル */
.card-img, .card-img-top {
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
}

.card-img, .card-img-top, .card-img-bottom {
    width: 100%;
}

.card-img-top {
    height: 250px; /* 高さを固定 */
    width: 250px !important; /* 幅も固定して正方形にする */
    object-fit: cover; /* 画像を枠にフィットさせる */
    display: block; /* ブロック要素にする */
    margin: 0 auto; /* 左右のマージンを自動にして中央寄せ */
}

img, svg {
    vertical-align: middle;
}

/* アイテムモーダルのスタイル */
.item-modal .modal-content {
    background-color: beige !important; /* モーダルカードの背景色をベージュに */
}

.item-detail {
    font-size: 1.2em; /* 詳細文のフォントサイズを大きくする */
}

.modal-body img {
    display: block; /* 画像を中央に寄せる */
    margin-left: auto;
    margin-right: auto;
}

.item-modal-footer {
    display: flex !important; /* フレックスボックスを強制 */
    flex-direction: row !important; /* 横並びにする */
    justify-content: center !important; /* ボタンを横並びに */
    align-items: center !important; /* 縦の中央揃え */
    margin-top: 2% !important; /* 上の余白 */
    border: none !important; /* ボーダーを消す */
    padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5) !important; /* パディングの調整 */
    background-color: var(--bs-modal-footer-bg) !important; /* 背景色の維持 */
}

.item-danger {
    display: block;
    width: 100%;
    background-color: #800000 !important; /* ワインレッド */
    color: white !important; /* 文字色を白に */
    border: none;
}

/* ページネーションのスタイル */
.pagination {
    position: fixed; /* 画面下部に固定 */
    bottom: 10px; /* 下からの距離を調整 */
    left: 60%; /* 中央に配置 */
    transform: translateX(-50%); /* 左右中央揃え */
    font-size: 1em; /* 文字の大きさを調整 */
    background-color: white; /* 背景色を白に設定 */
    border-radius: 5px; /* 角を丸める */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 影を付ける */
    list-style: none; /* デフォルトのリストスタイルを解除 */
    display: flex; /* 横並びにするためにフレックスボックスを使用 */
    justify-content: center; /* 中央に配置 */
    align-items: center; /* 垂直方向に中央揃え */
}

/* Category Tool 画面のスタイル */
.category-links {
    position: relative; /* 必要 */
    height: 300px; /* 必要 */
    margin-top: 20px; /* 上にスペースを追加 */
}

.category-link {
    background-color: #eedcb3; /* ベージュ */
    border-radius: 50px; /* 楕円形にするための半径 */
    padding: 15px 25px; /* パディングを大きく */
    font-size: 20px; /* フォントサイズを大きく */
    font-weight: 500; /* 太字 */
    text-decoration: none; /* 下線をなくす */
    color: #333; /* 文字の色 */
    position: absolute; /* 各リンクの位置を絶対指定 */
    transition: background-color 0.3s; /* ホバー時のアニメーション */
}

.category-link:hover {
    color: white; /* ホバー時 文字白 */
    background-color: olive; /* ホバー時 背景オリーブグリーン */
}

/* カテゴリー編集モーダルのスタイル */
.category-modal {
    background-color: beige !important;
}

/* ハンバーガーメニューボタン */
#menuIcon {
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
    z-index: 1000; /* サイドメニューよりも前に表示されるように */
    background-color: transparent; /* 背景を透明にしてボタンの背景を消す */
    border: none; /* ボーダーを削除 */
    padding: 10px; /* ボタン内のパディングを調整 */
    width: auto; /* 横幅を自動調整 */
    height: auto; /* 高さを自動調整 */
}

/* モバイル時の表示調整 */
@media (max-width: 768px) {
    .modal-dialog {
        max-width: 90%;
    }

    .search-form {
        width: 100%; /* フォームの幅を画面幅に調整 */
        display: flex;
        flex-direction: column; /* 縦並びに変更 */
        align-items: center; /* 中央揃え */
        margin-top: 10px; /* 上部の余白 */
    }

    .search-form .form-control {
        width: 90%; /* 入力欄の幅を画面幅に調整 */
            }

    /* モバイル時にハンバーガーメニューを表示 */
    #menuIcon {
        display: block;
    }

    /* サイドバーを非表示にする */
    .sidebar {
        transform: translateX(-100%); /* 初期状態で画面外に隠す */
        transition: transform 0.3s ease; /* アニメーションで表示 */
        position: fixed; /* 画面上に固定 */
        top: 0; /* 上端に固定 */
        left: 0; /* 左端に固定 */
        height: 100vh; /* 高さを画面いっぱいにする */
        z-index: 999; /* コンテンツの後ろではなく前に表示 */
    }

    /* サイドバーがアクティブな場合に表示 */
    .sidebar.active {
        transform: translateX(0); /* アクティブ時に画面内に表示 */
    }

    /* レスポンシブ対応 */
    .top-actions,
    .bottom-actions {
        flex-direction: column; /* 縦並びに変更 */
        align-items: stretch; /* 横幅を全体に */
    }

    .category-selector,
    .search-input,
    .add-category-button,
    .go-button,
    .search-button {
        width: 100%; /* 入力欄とボタンの幅を100%に */
    }

    .action-buttons {
        padding: 0 15px; /* サイドの余白を調整 */
    }

    /* 検索ボタンを中央揃えに */
    .search-button {
        display: block; /* ブロック要素にする */
        margin: 10px auto !important; /* 左右中央に揃える */
    }
}

/* さらに小さなスクリーン（最大480px）に対応 */
@media (max-width: 480px) {
    .category-selector,
    .search-input {
        font-size: 16px; /* 入力欄のフォントサイズを小さく */
        margin: 15px;
    }

    .top-actions button,
    .bottom-actions button {
        font-size: 16px; /* ボタンのフォントサイズを調整 */
        padding: 8px 15px; /* ボタンのパディングを小さく */
        margin: 5px;
    }
}