/* ===============================
   全体設定
================================ */
body{
    font-family: "Segoe UI", "Meiryo", sans-serif;
    text-align:center;
    background:#f4f6f9;
    margin:0;
}

/* タイトル */
h1{
    margin-top:25px;
    color:#333;
}

/* ===============================
   メニュー・ボタン
================================ */
.btn-main{
    display:inline-block;
    padding:12px 28px;
    margin:10px;
    border:none;
    border-radius:8px;
    background:#4CAF50;
    color:#fff;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    text-decoration:none;
    transition:0.2s;
}

/* hoverで少し暗く */
.btn-main:hover{
    background:#43a047;
}

.btn{
    display:block;
    padding:14px;
    margin:10px auto;
    width:220px;
    background:#3b82f6;
    color:#fff;
    text-decoration:none;
    border:none;
    border-radius:10px;
    font-size:16px;
    cursor:pointer;
    transition:0.2s;
}

.btn:hover{
    background:#2563eb;
}

/* =========================
   共通ボタン
========================= */

/* サブボタン */
.btn-sub{
    background:#9e9e9e;
}

.btn-sub:hover{
    background:#7e7e7e;
}

/* サブボタン */
.btn-sub{
    background:#9ca3af;
}

.btn-sub:hover{
    background:#6b7280;
}

/* ===============================
   カードUI
================================ */
.card{
    background:#fff;
    margin:15px auto;
    padding:18px;
    border-radius:12px;
    width:90%;
    max-width:700px;
    box-shadow:0 5px 15px rgba(0,0,0,0.08);
    text-align:left;
}

/* ===============================
   フォーム（登録ページ用）
================================ */
.form-area{
    width:90%;
    max-width:800px;
    margin:20px auto;
}

.form-grid{
    display:grid;
    grid-template-columns: 180px 1fr;
    gap:12px;
    align-items:center;
}

/* ラベル */
label{
    font-weight:bold;
    color:#444;
}

/* 入力欄 */
input, select{
    height:38px;
    padding:8px;
    border:1px solid #ccc;
    border-radius:6px;
    font-size:15px;
}

input:focus, select:focus{
    border-color:#3b82f6;
    outline:none;
    box-shadow:0 0 3px rgba(59,130,246,0.3);
}

/* ===============================
   メッセージ表示
================================ */
.msg{
    color:#16a34a;
    font-weight:bold;
    margin-top:10px;
}

/* ===============================
   消費期限カラー
================================ */
.expired{
    background:#fecaca;
}

.danger{
    background:#fed7aa;
}

.warning{
    background:#fef3c7;
}

.safe{
    background:#dcfce7;
}

/* ===============================
   テーブル風（検索結果など）
================================ */
.result-row{
    padding:10px;
    border-bottom:1px solid #eee;
}

/* ===============================
   スマホ対応
================================ */
@media(max-width:700px){

.form-grid{
    grid-template-columns:1fr;
}

.btn{
    width:90%;
}

.card{
    width:95%;
}

}