/* ./css/page_style.css */

/* 親要素のIDセレクタを追加して詳細度を上げる */

/* 共通のホバー効果 */
#template-list button.template-button {
    transition: all 0.2s ease-in-out;
}
#template-list button.template-button:hover {
    opacity: 0.8;
}

/* アレルギーと宗教は赤系 */
#template-list button.allergy_list_v3, 
#template-list button.religion_list_v3 {
    background-color: #ffcccc; /* 淡い赤 */
    border-bottom: 3px solid #e66767;
    color: #333;
}
#template-list button.allergy_list_v3.selected-template, 
#template-list button.religion_list_v3.selected-template {
    box-shadow: inset 0 0 0 3px #e66767;
}

/* 調達と種別はブルー系 */
#template-list button.procurement_list_v3, 
#template-list button.type_list_v3 {
    background-color: #cceeff; /* 淡い青 */
    border-bottom: 3px solid #6699ff;
    color: #333;
}
#template-list button.procurement_list_v3.selected-template, 
#template-list button.type_list_v3.selected-template {
    box-shadow: inset 0 0 0 3px #6699ff;
}

/* その他の内容に合わせた色味 */
#template-list button.vegetable_list_v3, 
#template-list button.mushroom_list_v3 {
    background-color: #ccffcc; /* 淡い緑 */
    border-bottom: 3px solid #66b266;
    color: #333;
}
#template-list button.vegetable_list_v3.selected-template, 
#template-list button.mushroom_list_v3.selected-template {
    box-shadow: inset 0 0 0 3px #66b266;
}

#template-list button.meat_list_v3 {
    background-color: #ffdddd; /* 淡いピンク */
    border-bottom: 3px solid #e68a8a;
    color: #333;
}
#template-list button.meat_list_v3.selected-template {
    box-shadow: inset 0 0 0 3px #e68a8a;
}

#template-list button.seafood_list_v3 {
    background-color: #cceeee; /* 淡い水色 */
    border-bottom: 3px solid #66b2b2;
    color: #333;
}
#template-list button.seafood_list_v3.selected-template {
    box-shadow: inset 0 0 0 3px #66b2b2;
}

#template-list button.fruit_list_v3 {
    background-color: #ffffcc; /* 淡い黄色 */
    border-bottom: 3px solid #cccc66;
    color: #333;
}
#template-list button.fruit_list_v3.selected-template {
    box-shadow: inset 0 0 0 3px #cccc66;
}

#template-list button.egg_dairy_list_v3 {
    background-color: #fffacd; /* クリーム色 */
    border-bottom: 3px solid #e6b3b3;
    color: #333;
}
#template-list button.egg_dairy_list_v3.selected-template {
    box-shadow: inset 0 0 0 3px #e6b3b3;
}

#template-list button.soy_products_list_v3 {
    background-color: #e6e6fa; /* 薄い紫色 */
    border-bottom: 3px solid #9999cc;
    color: #333;
}
#template-list button.soy_products_list_v3.selected-template {
    box-shadow: inset 0 0 0 3px #9999cc;
}

#template-list button.grains_noodles_list_v3 {
    background-color: #f5f5dc; /* ベージュ */
    border-bottom: 3px solid #cc9966;
    color: #333;
}
#template-list button.grains_noodles_list_v3.selected-template {
    box-shadow: inset 0 0 0 3px #cc9966;
}

#template-list button.dried_goods_seaweed_list_v3 {
    background-color: #d3d3d3; /* 薄い灰色 */
    border-bottom: 3px solid #808080;
    color: #333;
}
#template-list button.dried_goods_seaweed_list_v3.selected-template {
    box-shadow: inset 0 0 0 3px #808080;
}

#template-list button.seasoning_list_v3 {
    background-color: #d2b48c; /* 淡い茶色 */
    border-bottom: 3px solid #8b4513;
    color: #333;
}
#template-list button.seasoning_list_v3.selected-template {
    box-shadow: inset 0 0 0 3px #8b4513;
}

#template-list button.other_ingredients_list_v3 {
    background-color: #f8f9fa;
    border-bottom: 3px solid #ced4da;
    color: #333;
}
#template-list button.other_ingredients_list_v3.selected-template {
    box-shadow: inset 0 0 0 3px #ced4da;
}

#template-list button.quantity_lim_list_v3 {
    background-color: #e6e6fa; /* ラベンダー */
    border-bottom: 3px solid #9933cc;
    color: #333;
}
#template-list button.quantity_lim_list_v3.selected-template {
    box-shadow: inset 0 0 0 3px #9933cc;
}