/* ABISU-622 ソムリエレシピ 材料欄ノーマライズ表示（dokodemo-recipe-detail-materials.js とセット）
 * 既存: .materials は黄色地×白文字、.materials > ul > li::before に '●'
 * 点線はベタ打ち「・」をやめ、CSSリーダー（.up-d_mat-dots）で自動伸縮させる */

/* 通常の行（材料行・プレーン行） */
.materials > ul > li.up-d_mat-item,
.materials > ul > li.up-d_mat-plain {
  font-size: 16px;
  font-weight: 400;
  color: rgb(255, 255, 255);
  letter-spacing: 0.05em;
  line-height: 1.875;
}

/* 「材料名 ……… 分量」の行 */
.materials > ul > li.up-d_mat-item {
  display: flex;
  align-items: baseline;
}
.materials .up-d_mat-name {
  flex: 0 1 auto;
}
.materials .up-d_mat-dots {
  flex: 0 0 45px; /* ・5個ぶんの固定幅（③要望「最大5つ程度」、9px間隔×5） */
  align-self: center;
  height: 1.2em;
  margin-left: 0.6em;
  background-image: radial-gradient(circle, currentColor 1.5px, transparent 1.6px);
  background-repeat: repeat-x;
  background-position: left center;
  background-size: 9px 9px;
}
.materials .up-d_mat-qty {
  flex: 0 1 auto;
  margin-left: 0.6em;
}

/* 【調味料】＜ソース＞ 等のグループ見出し行 */
.materials > ul > li.up-d_mat-head {
  margin-top: 1.2em;
  font-size: 16px;
  font-weight: 700;
  color: rgb(255, 255, 255);
  letter-spacing: 0.08em;
  line-height: 1.875;
}
.materials > ul > li.up-d_mat-head::before {
  content: none;
}

/* ＊補足・注記の行 */
.materials > ul > li.up-d_mat-note {
  font-size: 13px;
  font-weight: 400;
  color: rgb(255, 255, 255);
  letter-spacing: 0.05em;
  line-height: 1.7;
}
.materials > ul > li.up-d_mat-note::before {
  content: none;
}

/* サブ項目（グループ内の材料・手打ち「・」行） */
.materials > ul > li.up-d_mat-sub {
  margin-left: 1em;
}
.materials > ul > li.up-d_mat-sub::before {
  content: '・';
}
.materials > ul > li.up-d_mat-sub2 {
  margin-left: 2em;
}

/* 元データの空行に由来するグループ間の余白 */
.materials > ul > li.up-d_mat-gap {
  margin-top: 1em;
}

/* 見出し・補足はサブ階層でも行頭記号を出さない（.up-d_mat-sub::before より後に置いて優先させる） */
.materials > ul > li.up-d_mat-head::before,
.materials > ul > li.up-d_mat-note::before {
  content: none;
}

@media (max-width: 750px) {
  .materials > ul > li.up-d_mat-item,
  .materials > ul > li.up-d_mat-plain,
  .materials > ul > li.up-d_mat-head {
    font-size: 14px;
  }
  .materials > ul > li.up-d_mat-note {
    font-size: 12px;
  }
  /* SPは列揃え(flex)をやめて自然な文章折り返しに（点線5個・統一フォントは維持） */
  .materials > ul > li.up-d_mat-item {
    display: block;
  }
  .materials .up-d_mat-dots {
    display: inline-block;
    width: 40px; /* ・5個ぶん（8px間隔×5） */
    height: 0.9em;
    margin-left: 0.4em;
    background-size: 8px 8px;
    vertical-align: baseline;
  }
  .materials .up-d_mat-qty {
    margin-left: 0.4em;
  }
}