.ModifierLabelRow{
    display: flex;
}
.Modifier div {
  font-size: 15px;
  font-weight: var(--tmo-online-font-system-body-weight, 700);
  /* vertical-align: middle; */
}
/* .Modifier input {
  display: none;
  z-index: -9999;
} */
.ModifierLabelRowInputWrapper {
  margin: 0px 0px 0px 45px;
}
.ModifierLabelRowInputLabel {
  font-family: var(--tmo-online-font-system-small-family, inherit);
  font-weight: var(--tmo-online-font-system-small-weight, inherit);
  font-size: 10px;
}
.ModifierLabelRowInput {
  width: calc(100% - 15px);
}
.Modifier label {
  width: 100%;
  margin-bottom: 0rem;
  display: block;
}
.ModifierBorder {
  display: flex;
  justify-content: space-between;
}
.ModifierBorderLeft{
  width: 14px;
  height: 1px;
}
.ModifierBorderCenter {
  width: calc(100% - 28px);
  border-bottom: 1px solid #424242;
  height: 1px;
}
.ModifierBorderRight {
  width: 14px;
  height: 1px;
}


.Modifier input[type="checkbox"] + label .icon-checkbox::before {
  display: inline-block;
  content: '';
  width: 20px;
  height: 20px;
  border: 1px solid #c4c4c4;
  /* border-radius: 3px; */
  margin-right: 10px;
  vertical-align: middle;
}
.Modifier .icon-checkbox:hover {
    border-color: #545454;
}
.Modifier input[type="checkbox"]:checked + label .icon-checkbox::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect x='6' y='6' width='8' height='8' style='fill:%23FFFFFF;stroke:pink;stroke-width:0;fill-opacity:1.0;stroke-opacity:1.0' /%3E%3C/svg%3E ");
  background-repeat: no-repeat;
  background-position: -1px -1px;
  /* background-color: #434343; */
  background-color: var(--backgroundcolor, rgb(94, 94, 94));
  border: var(--border, 1px solid #545454);
  display: inline-block;
  content: '';
  width: 20px;
  height: 20px;
  /* border-radius: 3px; */
  /* margin-right: 0.8rem; */
  vertical-align: middle;
}
.Modifier input[type="checkbox"] + label .ModifierLabelTable {
    background-color: var(--tmo-online-bg-page, #ffffff);
}
.Modifier input[type="checkbox"]:checked + label .ModifierLabelTable {
    background-color: #e0e0e0;
}
.ModifierLabelTable {
    display: table;
    /* justify-content: space-between; */
    /* border-top: 1px solid #cecece;
    border-right: 1px solid #cecece;
    border-left: 1px solid #cecece; */
    /* border-collapse: collapse; */
    width: 100%;
}
.ModifierLabelRow {
  min-height: 44px;
  position: relative;
  display: flex;
  /* border: 1px solid #b1b1b1; */
  cursor: pointer;
}
.ModifierLabelRow .left{
    width: 45px;
    /* padding: 0 0 0 14px; */
}
.ModifierLabelCellIconCheckbox {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
}
.ModifierLabelRow .center{
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
}
.ModifierLabelRow .right{
  width: 100%;
  padding: 12px 14px 12px 0;
  text-align: right;
}
.ModifierLabelCell {
  /* display: table-cell; */
  vertical-align: top;
  position: relative;
  /* line-height: 1.42857143; */
  padding: 12px 0px 12px 14px;
  /* left: 20px; */
  /* transform: translate(0, -50%); */
  /* height: 44px; */
  width: 45px;
}
.ModifierLabelCell.Numberselect {
  width: 120px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.ModifierLabelCell.NumberselectRight {
  margin: 0px 0px 0px 120px;
}


.ModifierLabelCell.Right {
  /* line-height: 1.42857143; */
  display: table-row;
  /* border: 1px solid #434343; */
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
  cursor: pointer;
}
.ModifierLabelCellRight {    
  width: calc(100% - 45px);
  padding: 12px 14px 12px 0;
  text-align: right;
  margin-left: 45px;
}
.ModifierLabelCell2Wrapper {
  display: flex;
  justify-content: flex-end;
  position: relative;
  padding: 0px 3px 0px 3px;
}
.ModifierLabelCell3Wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.ModifierLabelCell2 {
  display: table-cell;
  vertical-align: top;
  /* line-height: 1.42857143; */
}
.ModifierLabelCell2Left {
  /* position: absolute; */
  left: 48px;
  top: 50%;
  /* transform: translateY(-50%); */
  text-align: left;
}
/* The modifier option name and its price follow the product-name settings
   (2026-08-07). The blanket `.Modifier div` rule above is 15px/700 — the same as
   the product-name token defaults, so nothing moves for a shop on Default — but
   it outranks a single class selector, hence the `.Modifier` prefix here. The
   24x24 `.ModifierNumber` box is deliberately left out: it has fixed geometry a
   larger font would burst. The allergen badges inside the name cell carry an
   inline font-size, so they keep their 12px either way. */
.Modifier .ModifierLabelCell2Left,
.Modifier .ModifierLabelCell3Left,
.Modifier .ModifierLabelCell2Right,
.Modifier .ModifierLabelCell3Right {
  font-family: var(--tmo-online-font-name-family, inherit);
  font-size: var(--tmo-online-font-name-size, 15px);
  font-weight: var(--tmo-online-font-name-weight, 700);
  letter-spacing: var(--tmo-online-font-name-spacing, inherit);
}
/* Modifier 名 + オプション画像を並べる行 (画像がある行だけ data 属性が付く)。
   - flex-wrap + row-gap: row-gap は折り返して 2 行になったときしか効かないので、
     横並びのときは行が高くならず、折り返したときだけタイトルと画像の間が空く。
   - margin-block -6px: 親 (.ModifierLabelCellRight) の上下 padding 12px から
     6px ずつ借りる。画像 32px なら行の高さは従来と同じ 44px のまま収まり、
     画像がそれより大きくなっても「はみ出しは常に 6px 固定」で行自体が素直に
     伸びるので、上下の行とぶつかることはない。
   class ではなく data 属性で判定しているのは、Application.js の呼び出し元が
   この要素の className を後から上書きする箇所があるため。 */
.ModifierLabelCell2Left[data-has-mod-image],
.ModifierLabelCell3Left[data-has-mod-image] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 6px;
  margin-block: -6px;
}
.ModifierImage {
  display: inline-block;
  height: 32px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  flex: none;
}
.ModifierLabelCell2Right {
  /* width:60%; */
  text-align: right;
  display: flex;
  justify-content: flex-end;
}
.ModifierLabelCell3 {
  display: table-cell;
  vertical-align: top;
  /* line-height: 1.42857143; */
}
.ModifierLabelCell3Left {
  /* position: absolute; */
  left: 48px;
  top: 50%;
  /* transform: translateY(-50%); */
  text-align: left;
  max-width: 60%;
}
.ModifierLabelCell3Left.Numberselect {
  left: 0px;
}
.ModifierLabelCell3Right {
  /* width:60%; */
  text-align: right;
  display: flex;
  justify-content: flex-end;
}
.ModifierLabelCell3Right.Numberselect {
}

.MenuModList > :first-child .ModifierLabelTable{
  /* border-top-left-radius: 3px;
  border-top-right-radius: 3px; */
}
.MenuModList > :last-child .ModifierLabelTable{
  /* border-bottom: 1px solid #cecece; */
  /* border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px; */
}
.ModifierPrice {
  display: flex;
  justify-content: flex-end;
}
.ModifierPriceWithGst {
  display: inline-block;
}


@media (min-width: 300px) and (max-width: 400px) {
  .ModifierLabelCell2Right {
    display: block;
    width: 100%;
  }
  .ModifierLabelCell3Right {
    display: block;
  }
  .ModifierLabelCell3Left {
    /* margin-top: 10px; */
  }  
}
@media (max-width: 300px) {
  .ModifierLabelCell2Wrapper {
    display: block;
  }
  .ModifierLabelCell2Right {
    display: block;
    width: 100%;
  }
  .ModifierLabelCell2.right {
    width: 100%;
  }  
  .ModifierLabelCell2.left {
    position: relative !important;
    top: none !important;
    left: none !important;
    transform: none !important;
    width: 100%;
    padding: 12px 14px 12px 0;
  }
  .ModifierLabelCell3Wrapper {
    display: block;
  }
  .ModifierLabelCell3Right {
    display: block;
    width: 100%;
  }
  .ModifierLabelCell3Right {
    width: 100%;
  }  
  .ModifierLabelCell3Left {
    /* position: relative !important; */
    /* top: none !important; */
    /* left: none !important; */
    /* transform: none !important; */
    width: 100%;
    max-width: 100%;
  }
}



@media (min-width: 350px) and (max-width: 450px) {
  .ModifierLabelCell3Right.Numberselect {
    display: block;
  }
}
@media (max-width: 350px) {
  .ModifierLabelCell3Wrapper.Numberselect {
    display: block;
  }
  .ModifierLabelCell3Right.Numberselect {
    display: block;
    width: 100%;
  }
  .ModifierLabelCell3Left.Numberselect {
    position: relative !important;
    top: none !important;
    left: none !important;
    transform: none !important;
    width: 100%;
    max-width: 100%;
  }
}