/* レイアウトを縦に並べる（スマホ用） */
@media screen and (max-width: 768px) {

	.mobile-display {
		display: none;
	}
}

#material-table {
  border-collapse: separate; /* 丸角にするために必要 */
  border-spacing: 0;       /* セル間の隙間をなくす */
  border-radius: 10px;       /* 角丸 */
  overflow: hidden;          /* 角丸を反映させるため */
  border: 1px solid #27ae60; /* 薄い枠線（お好みで） */
}

#material-table {
	table-layout: fixed;
}

#material-table th,#material-table td {
  border: 1px solid #27ae60;
}

.search-box {
  border: 2px solid green;    /* 緑の枠線 */
  border-radius: 10px;        /* 角を10px丸くする */
  padding: 5px;              /* 内側の余白 */
}

.search-box table, .search-box th, .search-box td {
  border: 1px solid #4CAF50; /* 緑色の線 */
  border-collapse: collapse; /* 線を重ねず1本にする */
}

button.selected {
	background-color: #4CAF50;
	color: white;
	border: 2px solid #388E3C;
}

/* 大枠：カテゴリグループを横並びにする */
.ingredient-group-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* カテゴリグループ全体の枠 */
.ingredient-group {
	border: 1px solid #ccc;
	border-radius: 8px;
	min-width: 180px;
}

/* 小見出しスタイル（牛肉など） */
.ingredient-sub {
	background-color: white;
	color: gray;
	border: 1px solid #b2d8cc;
}