<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">
        /* Bowls 蝠�刀繝輔ぅ繝ｫ繧ｿ繝ｼ 窶� 繝溘ル繝槭Ν CSS
   Tailwind 萓晏ｭ倥ｒ謗帝勁縺励∽ｻ雁屓縺ｮ繝�Δ縺ｧ菴ｿ逕ｨ縺励※縺�ｋ繧ｯ繝ｩ繧ｹ縺ｮ縺ｿ繧貞�螳夂ｾｩ
   ----------------------------- */

:root {
  --green-600: #16A34A;          /* tailwind green-600 */
  --gray-50:  #F9FAFB;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-600: #4B5563;
  --gray-800: #1F2937;
}

/* 窶披披� 蝓ｺ譛ｬ濶ｲ / 繝�く繧ｹ繝� 窶披披� */
.bg-gray-50 { background-color: var(--gray-50); }
.text-gray-800 { color: var(--gray-800); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-400 { color: var(--gray-400); }
.text-white    { color: #fff; }

/* 窶披披� 閭梧勹濶ｲ繝ｦ繝ｼ繝�ぅ繝ｪ繝�ぅ 窶披披� */
.bg-white\/90 { background-color: rgba(255,255,255,.9); }
.bg-green-600  { background-color: var(--green-600); }
.bg-gray-200   { background-color: var(--gray-200); }
.bg-gray-300   { background-color: var(--gray-300); }

/* 窶披披� 繝ｬ繧､繧｢繧ｦ繝医Θ繝ｼ繝�ぅ繝ｪ繝�ぅ 窶披披� */
.sticky { position: sticky; }
.top-0  { top: 0; }
.z-10   { z-index: 10; }
.flex   { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.grid   { display: grid; }
.overflow-x-auto { overflow-x: auto; }
.text-center { text-align: center; }
.cursor-not-allowed { cursor: not-allowed; }

/* gap utilities */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }

/* padding &amp; margin */
.px-2 { padding-left: 0.5rem;  padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-1 { padding-top: 0.25rem; padding-bottom:0.25rem; }
.py-2 { padding-top: 0.5rem;  padding-bottom:0.5rem; }
.p-4  { padding: 1rem; }
.mt-2 { margin-top: 0.5rem; }

/* width */
.w-full { width:100%; }
.w-1\/2 { width:50%; }

/* rounded */
.rounded      { border-radius: 0.25rem; }
.rounded-lg   { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }

/* shadow */
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.05); }

/* font */
.font-semibold { font-weight: 600; }
.text-sm       { font-size: 0.875rem; line-height: 1.25rem; }

/* backdrop blur */
.backdrop-blur { backdrop-filter: blur(4px); }

/* 窶披披� 繝√ャ繝励ヰ繝ｼ / Chip 窶披披� */
#chipBar {
  margin: 0px 0px 20px 0px;
  /*display: flex;*/
  gap: 0.5rem;
  overflow-x:auto; padding: 0.5rem 0.75rem;
  background: rgba(255,255,255,.9); backdrop-filter: blur(4px);
    position:relative;
    z-index: 1000000;
}

#chipBar .n01,
#chipBar .n02,
#chipBar .n03{
    margin: 0px 0px 10px 0px;
}

.chip {
 margin: 0px 0px 5px 0px; 
縲display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.25rem 0.75rem; font-size: 0.875rem;
  border: 1px solid var(--gray-300); border-radius: 9999px;
  white-space: nowrap; cursor: pointer; user-select: none;
}

/* active state via JS: add .bg-green-600 &amp; .text-white */

/* 窶披披� 繝斐Ν (驕ｩ逕ｨ貂医∩譚｡莉ｶ陦ｨ遉ｺ) 窶披披� */
#pillBar {
    margin: 0px 0px 20px 0px;
    display:flex; flex-wrap:wrap; gap:0.5rem; padding:0.5rem 0.75rem; 
}

#pillBar span {
  display:flex; align-items:center; gap:0.25rem;
  background: var(--gray-200); font-size:0.875rem;
  padding:0.25rem 0.75rem; border-radius:9999px;
}
#pillBar button { background:none; border:none; cursor:pointer; }

/* 窶披披� 蝠�刀繧ｫ繝ｼ繝� 窶披披� */
.card {
  background:#fff; border:1px solid var(--gray-200); border-radius:0.75rem;
  padding:0.75rem; display:flex; flex-direction:column; gap:0.5rem;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.card img { width:100%; border-radius:0.5rem; object-fit:cover; height:auto; }

.btnOnce { background: var(--gray-200); border-radius:0.25rem; padding:0.5rem; font-size:0.875rem; display:block; text-decoration:none; color:var(--gray-800); }

.btnSub  { background: var(--green-600); border-radius:0.25rem; padding:0.5rem; font-size:0.875rem; display:block; text-decoration:none; color:#fff; }

.btnSub.cursor-not-allowed { background: var(--gray-300); color: var(--gray-400); cursor:not-allowed; }

/* 窶披披� 繧ｰ繝ｪ繝�ラ繧ｫ繝ｩ繝�  (responsive) 窶披披� */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}




/* item-filter.css (霑ｽ險�) */
.chip[data-state="active"][data-exc]{
  background:#dc2626;   /* red-600 */
  color:#fff;
}







.listBox{
    margin: 0px auto 30px;
    
}


.listBox ul{
    display:flex;
    flex-wrap: wrap;
}


.listBox ul li{
    margin: 0px auto 20px;
    width: 46%;
}


.listBox ul li:last-child{
    margin: 0px 2% 20px 2%;
}


#contents.list-raw-materials .listrmBox ul li .buyArea .pbox{
    width: 100%;
}



.label-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 0.5rem;
}

.label-bar span {
  background-color: #FDE68A;
  color: #374151;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}


#contents.allitems .listrmBox h2,
#contents.allitems .listRecipeBox h2{
    margin: 0px 0px 20px 20px;
    text-align:left;
    font-size: 24px;
    font-weight: bold;
    max-width: 100%;
}


@media (max-width: 767px){
    
    #contents.allitems .listrmBox h2,
    #contents.allitems .listRecipeBox h2{
        margin: 0px auto 10px;
        width: 96%;
        text-align:left;
        font-size: 7vw;
        font-weight: bold;
        max-width: 100%;
    }  
    
    
}


#chipBar .n02 .chip-list {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease;
  }

 #chipBar .n02.open .chip-list {
    max-height: 300px; /* 荳ｭ縺ｫ蜈･繧矩ｫ倥＆繧医ｊ縺｡繧�▲縺ｨ螟ｧ縺阪ａ縺ｫ縺励※縺翫￥ */
    opacity: 1;
  }

 #chipBar .n02 .chip {
    margin: 4px 6px;
    display: inline-block;
  }

 #chipBar .n02 p {
    cursor: pointer;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
  }




</pre></body></html>