.fixedFooter{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #ddd;
    padding: 12px 0; /* 左右のパディングを0にして中央寄せを確実にする */
    text-align: center;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    z-index: 999;
    /* ★追加：フレックスボックスで要素を中央に配置 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.footerBtn{
    display: inline-block;
    padding: 12px 30px;
    background: #9e9e9e;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    /* ★追加：マージンをリセットしてズレを防止 */
    margin: 0 auto;
}

.footerBtn:hover{
    filter:brightness(0.9);
}

body{
    padding-bottom: 90px;
}

/* 並び替えUI */
.sortBox{
    text-align:center;
    margin-bottom:15px;
}

.sortBox select{
    padding:8px 12px;
    border-radius:6px;
    border:1px solid #ccc;
}

/* カード */
.card{
    background:#fff;
    margin:12px auto;
    padding:14px;
    width:90%;
    max-width:600px;
    border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.card:hover{
    filter: brightness(0.92);
    transition: 0.15s;
    cursor: pointer;
}

/* 期限色 */
.expired{ background:#ffd6d6; }
.danger{ background:#ffe5e5; }
.warning{ background:#fff5cc; }
.safe{ background:#e8f5e9; }

/* レイアウト */
.itemTitle{
    font-weight:bold;
    font-size:16px;
    margin-bottom:6px;
}

.itemInfo{
    font-size:14px;
}
/* PCでは横並び */
.infoTop{
    display:inline;
}

.infoTop .qty {
    margin-left: 3%; 
}

.infoExpiry{
    margin-left: 3%;
    display:inline;
}

/* ===== スマホのみ期限を下に ===== */
@media screen and (max-width:768px){

    .infoTop {
        display: block;
        margin-bottom: 4px; 
    }

    .infoTop .qty {
        margin-left: 10%;
    }

    .infoExpiry {
        display: block;
        margin-left: 0;  
        font-weight: bold;
    }

}