@charset "utf-8";
/* CSS Document */

.p-bllow {
  text-align: center;
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 70%;
}

.p-bllow2 {
      color: #666;
    text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 70%;
}

.price-underline-container {
     text-align: center;
  margin: 0 0 5px; /* pタグの上下の余白を調整 */
  font-weight: bold;
  /* white-space: normal; がデフォルトなので、特に指定は不要 */
}

.price-underline {
   border-bottom: 2px solid #8B4513; /* 太さ1px、破線、下線の色 solid:実線 dotted:点線 dashed:破線 */
   padding-bottom: 1px; /* テキストと下線の間の隙間 */
  /* spanはデフォルトでinline要素なので、display: inline-block; は不要 */
  /* inline要素にborder-bottomを適用すると、テキストの幅に合わせて線が引かれ、
     テキストが改行されれば、その行ごとに下線が引かれます。 */
   line-height: 1.5; /* 行間を適切に設定（0だとテキストが重なる可能性） */
   font-size: 125%; /* HTMLのstyle属性から移動 */
}

  .p-mini-menu {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    padding: 5px 0;
    border-bottom: 1px dotted #ddd; /* 各行の下に点線を入れて見やすく */
    font-weight: bold;
  }

 /* メニュー全体のブロック */
  .menu-block {
    max-width: 80%;
    margin: 20px auto;
    padding: 10px;
    border: 1px solid #ddd; /* 各カテゴリを囲む枠線 */
    border-radius: 5px; /* 角を少し丸くする */
    background-color: #f9f9f9; /* 背景色を薄いグレーに */
  }

 /* 左右のカラム分け */
  .menu-item {
    flex: 1; /* 商品名は残りのスペースを埋めるように成長 */
    text-align: left;
    padding-right: 10px; /* 商品名と価格の間に少し隙間 */
  }

  .menu-price {
    flex: 0 0 30%; /* 価格の幅を100pxに固定 */
    text-align: left;
    font-weight: bold; /* 価格を太字に */
    color: #333;
  }

.menu-note {
  font-size: 0.7em; /* 補足文を少し小さめに */
  color: #666; /* 薄いグレーで控えめに表示 */
  margin: -5px 0 10px 20px; /* 上下の余白を調整し、少しインデント */
  line-height: 1.4; /* 読みやすい行間 */
}

 /* １行分空間を空ける */
.add-gap-after {
  margin-bottom: 1em; /* 1行分の高さを目安に余白を追加 */
  /* または、より具体的なピクセル値で指定することもできます。例: margin-bottom: 20px; */
}