/* 全体設定 */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin-left: 10%;
    margin-right: 10%;
    padding: 0;
}

h1, h2 {
    color: #333;
}

/* ログイン画面 */
.login-container {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 100%; /* 最大幅を100%に設定 */
    width: 300px; /* 基本的な幅を設定 */
    margin: auto; /* 中央配置 */
}

form div {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

button {
    background-color: #6D352C;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    width: 100%;
}

button:hover {
    background-color: #4d251e;
}

.error-message {
    color: red;
    margin-top: 10px;
    text-align: center;
}

/* 営業時間表示 */
.business-hours {
    margin-top: 15px;
    font-size: 1.2em; /* フォントサイズ */
}

.open {
    color: blue; /* 営業中の色 */
}

.closed {
    color: red; /* 営業外の色 */
}

/* ポップアップ */
#popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 100;
    margin: 5px;
    cursor: pointer;
}

/* スマートフォン用のスタイル */
@media (max-width: 768px) {
    #popup {
        width: 80%;
        height: 80%;
    }
}   

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

/* ポップアップのデザイン */
#popup button {
    display: inline-block; /* ボタンを横に並べる */
    margin: 5px; /* ボタン間のマージンを追加 */
    padding: 10px 15px; /* ボタンのパディングを調整 */
    border: none; /* ボーダーを無しに */
    border-radius: 5px; /* 角を丸くする */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s; /* アニメーションを追加 */
}

#popup img {
    max-width: 100%; /* 画像の幅をポップアップの幅に合わせる */
    height: auto; /* 高さは自動で調整 */
    margin-bottom: 10px;
}

#popup h3 {
    margin: 10px 0;
}

#popup p {
    margin: 5px 0;
}

#itemQuantity {
    display: flex;
    justify-content: center;
    align-items: center; /* 縦方向に中央揃え */
    justify-content: center; /* 水平方向に中央揃え */
    margin: 10px 0; /* 上下のマージン */
    padding: 10px;
}

.quantity-button {
    width: 50px; /* ボタンの幅 */
    height: 30px; /* ボタンの高さ */
    border-radius: 70px; /* 丸くする */
    border: none; /* ボーダーを消す */
    background-color: #5890eb; /* ボタンの色 */
    color: white; /* 文字色 */
    font-size: 15px; /* 文字サイズ */
    cursor: pointer; /* カーソルをポインターに */
    display: flex; /* Flexboxを使用 */
    align-items: center; /* 中央揃え */
    justify-content: center; /* 中央揃え */
    transition: background-color 0.3s; /* アニメーション */
    line-height: 2px;
}


.quantity-button:hover {
    background-color: #085db2; /* ホバー時の色 */
}

/* 戻るボタン */
#closePopup {
    background-color: #ff9999;
    color: white;
    border-radius: 5px;
    margin-top: 3%;
}

#closePopup:hover {
    background-color: #ff3333;
}

#closePopup:active {
    background-color: #ff6666;
    transform: scale(0.95);
}

/* 追加ボタン */
#add {
    background-color: #66b3ff;
    color: white;
    border-radius: 5px;
}

#add:hover {
    background-color: #45a2ff;
}

#add:active {
    background-color: #45a2ff;
    transform: scale(0.95);
}

/* ボタンコンテナ設定 */
#order-container {
    display: flex;
    flex-wrap: wrap; /* 複数の行に折り返す */
    justify-content: space-between; /* 各項目を均等に並べる */
    gap: 10px; /* 項目間の隙間 */
    margin: 20px 0; /* 上下のマージン */
}

.meal-item {
    flex: 1 1 calc(33.333% - 10px); /* 3列表示; 幅を設定し、隙間分を引く */
    box-sizing: border-box; /* パディングとマージンを含める */
    margin-bottom: 20px; /* 各項目の下にマージン */
}

/* スマホ画面で2列表示にする */
@media (max-width: 600px) {
    .meal-item {
        flex: 1 1 calc(50% - 10px); /* 2列表示; 幅を設定し、隙間分を引く */
    }
}

.meal-item button {
    width: 100%; /* ボタンがコンテナの幅に合わせる */
}

#buttonContainer {
    display: flex;           
    justify-content: flex-start; /* ボタンを左に寄せる */
    flex-wrap: wrap; /* 複数段に折り返す */
    gap: 10px; /* ボタン同士の間隔 */
    margin: 20px;
}

#buttonContainer button {
    flex: 0 1 auto; /* ボタンのサイズを自動調整 */
    min-width: 150px; /* ボタンの最小幅 */
    max-width: 200px; /* ボタンの最大幅 */
    margin: 10px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
}

#buttonContainer button:hover {
    background-color: #b44c4c; /* ホバー時の色 */
}

#buttonContainer button:active {
    background-color: #ccc; /* クリック時の色 */
    transform: scale(0.95); /* クリックしたときにボタンのサイズを縮小 */
}

/* カートウィンドウのスタイル */
.fixed-cart-button {
    width: 20%;
    height: 10%;
    position: fixed; /* 固定位置 */
    bottom: 10px; /* 下から10px */
    right: 10px; /* 右から10px */
    background-color: #EFA54B; /* ボタンの背景色 */
    color: white; /* ボタンのテキスト色 */
    border: none; 
    padding: 3px 10px; /* 内側のパディングを小さく */
    border-radius: 5px; 
    font-size: 0.8em; /* フォントサイズを小さく */
    cursor: pointer; 
    z-index: 1000; /* 他の要素の上に表示 */
    transition: background-color 0.3s; /* ホバー時のアニメーション */
}

.fixed-cart-button:hover {
    background-color: #DD5A0F; /* ホバー時の色 */
}

/* .section{
    margin-left: 3%;
    margin-right: ;
} */

.cart {
    position: fixed;
    top: 0;  /* 画面のトップに配置 */
    left: 0; /* 画面の左側に配置 */
    width: 100%; /* 幅を100%に設定 */
    height: 100%; /* 高さを100%に設定 */
    background-color: rgba(255, 255, 255, 1); /* 背景を暗くして焦点を当てる */
    color: #333; /* テキストを白に */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center; /* 中央揃え */
    z-index: 1000;
    padding-left: 10%;
    padding-right: 10%;
    box-sizing: border-box; /* パディングとボーダーを幅に含める */
}

/* カートウィンドウに左右のマージンやパディングを追加 */
.cart-inner {
    max-width: 800px; /* 最大幅を設定 */
    width: 100%; /* コンテナを100%に */
    padding: 0 40px; /* 左右に40pxのパディングを追加 */
    margin: 0 auto; /* 中央揃え */
}

.hidden {
    display: none; /* 非表示 */
}
#cart h2 {
    margin-bottom: 20px; /* 下部余白 */
    font-size: 2em; /* フォントサイズを大きく */
}

#cart ul {
    list-style: none;
    padding: 0;
}

#cart li {
    padding: 10px; /* アイテムの内側余白 */
    border-bottom: 1px solid #ddd; /* アイテム間の境界線 */
}

#cartItems li:last-child {
    border-bottom: none; /* 最後のアイテムには境界線を表示しない */
}

#cart button {
    background-color: #4CAF50; /* カートウィンドウの閉じるボタンの色 */
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
}

#cart button:hover {
    background-color: #45a049;
}

/* カートのアイテムリスト */
#cartItems {
    list-style: none; /* デフォルトのリストスタイルを削除 */
    padding: 0; /* パディングを削除 */
    width: 100%; /* 幅を100%に */
    max-height: 400px; /* 最大高さを設定してスクロール可能にする */
    overflow-y: auto; /* 縦方向のオーバーフローを表示 */
    border: 1px solid #ddd; /* 境界線を追加 */
    border-radius: 8px; /* 角を丸くする */
    background-color:#f9f9f9;; /* 半透明の背景 */
    margin-bottom: 20px; /* 下部余白 */
    padding-bottom: 10px; /* 内側の余白を追加 */

}

#totalQuantity {
    font-size: 1.2em; /* フォントサイズを大きく */
    margin-bottom: 20px; /* 下部余白 */
}


#closeCart {
    width: 20%;
    background-color: #e74c3c; /* ボタンの色を赤に */
    color: white; /* テキストを白に */
    border: none; /* ストロークを削除 */
    padding: 10px 20px; /* 内側の余白 */
    border-radius: 5px; /* 角を丸く */
    cursor: pointer; /* マウスオーバー時のカーソルをポインタに */
    transition: background-color 0.3s; /* ホバー時のアニメーション */
    font-size: 1.2em; /* フォントサイズを大きく */
}

#closeCart:hover {
    background-color: #c0392b; /* ホバー時の色 */
}
/* レスポンシブデザイン */

/* スマートフォン縦 (0-480px) */
@media (max-width: 480px) {
    .login-container {
        width: 90%; /* 幅を90%に */
        padding: 10px; /* パディングを調整 */
    }

    .cart h2, .cart #totalQuantity {
        font-size: 1.5em; /* 文字サイズを調整 */
    }

    button {
        padding: 12px; /* ボタンのパディングを調整 */
    }
}

/* スマートフォン横 (481-670px) */
@media (min-width: 481px) and (max-width: 670px) {
    .login-container {
        width: 80%; /* 幅を80%に */
        padding: 15px; /* パディングを調整 */
    }

    .cart h2, .cart #totalQuantity {
        font-size: 1.7em; /* 文字サイズを調整 */
    }
}

/* タブレット (671-960px) */
@media (min-width: 671px) and (max-width: 960px) {
    .login-container {
        width: 70%; /* 幅を70%に */
        padding: 20px; /* パディングを調整 */
    }

    .cart h2, .cart #totalQuantity {
        font-size: 2em; /* 文字サイズを調整 */
    }

    #cartItems {
        max-height: 350px; /* 高さを調整 */
    }

    #popup {
        width: 90%; /* ポップアップの幅を90%に */
        max-width: 400px; /* 最大幅を400pxに */
    }
}

/* ノートPC (961-1280px) */
@media (min-width: 961px) and (max-width: 1280px) {
    .login-container {
        width: 60%; /* 幅を60%に */
        padding: 25px; /* パディングを調整 */
    }

    .cart h2, .cart #totalQuantity {
        font-size: 1.8em; /* 文字サイズを調整 */
    }

    #cartItems {
        max-height: 400px; /* 高さを調整 */
    }


    #popup {
        width: 70%; /* ポップアップの幅を70%に */
        max-width: 450px; /* 最大幅を450pxに */
    }
}

/* デスクトップ (1281px以上) */
@media (min-width: 1281px) {
    .login-container {
        width: 400px; /* 固定幅に戻す */
        padding: 30px; /* パディングを調整 */
    }

    .cart h2, .cart #totalQuantity {
        font-size: 2.5em; /* 文字サイズを調整 */
    }

    #cartItems {
        max-height: 500px; /* 高さを調整 */
    }

    #popup {
        width: 400px; /* ポップアップの幅を400pxに */
    }
}

#submitOrder {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 10px 0;
    width: 100%;
}

#submitOrder:hover {
    background-color: #45a049;
}