.takeout-order-wrapper .takeout-order-title {
    position: relative;
    margin-bottom: 20px;
    margin-top: 20px;
}

.takeout-order-title-back {
    position: absolute;
    top: 0;
    left: 0;
}

.takeout-order-title-back i {
    margin-right: 5px;
}

.takeout-order-title-text {
    font-size: 16px;
    text-align: center;
}

.takeout-order-title-text i {
    margin-right: 10px;
}

.takeout-order-text {
    margin-bottom: 20px;
    font-size: 13px;
}

.takeout-order-date {
    margin-bottom: 5px;
    font-weight: 600;
    color: #d81b60;
}

.takeout-order-date-title {
    font-size: 15px;
}

.takeout-order-date-title i {
    margin-right: 10px;
}

.takeout-order-date-text {
    font-size: 15px;
    margin-left: 25px;
    margin-bottom: 20px;
    color: red;
    font-weight: 600;
}

.takeout-order-item-name {
    margin-left: 20px;
}

.takeout-order-item-price {
    text-align: right;
}

.takeout-order-item-total {
    border-top: solid 1px #dddddd;
    margin-top: 10px;
    padding-top: 4px;
    text-align: right;
    color: red;
    font-weight: 600;
}

.takeout-order-form-title {
    font-size: 15px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.takeout-order-form-title i {
    margin-right: 10px;
}

.takeout-order-form-notice {
    color: #d81b60;
    font-size: 12px;
}

/* menu */

.takeout-menu-text {
    font-size: smaller;
    color: #888888;
    text-align: left;
}

.takeout-menu-box {
    position: relative;
    text-align: left;
    margin-bottom: 10px;
    min-height: 80px;
}

.takeout-menu-box-img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.takeout-menu-box-img img {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
    object-fit: cover;
    float: left;
}

.takeout-menu-box .takeout-menu-box-name {
    margin-left: 90px;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.0;
}

.takeout-menu-box .takeout-menu-box-name i {
    margin-left: 5px;
    color: #d81b60;
}

.takeout-menu-box .takeout-menu-box-price {
    position: absolute;
    bottom: 2px;
    left: 90px;
    font-weight: 600;
    font-size: 15px;
    color: #d81b60;
}

.takeout-menu-box .takeout-menu-box-quantity {
    position: absolute;
    top: 14px;
    right: 0;
    font-size: 14px;
}

.takeout-menu-box .takeout-menu-box-quantity_limit {
    position: absolute;
    top: 60px;
    right: 0;
    color: #d81b60;
    font-size: 12px;
}

.takeout-menu-box .takeout-menu-box-notice {
    position: absolute;
    bottom: 0;
    right: 0;
    color: #d81b60;
    font-size: 12px;
}

/* モーダルCSS */
.takeout-menu-box-detail-modal-open {
    background-color: #fff;
    color: #ed7483;
    text-decoration: underline;
    margin-top: 4px;
    font-size: 11px;
    margin-left: 90px;
}

.takeout-menu-box-detail-modal-area {
    display: none;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.takeout-menu-box-detail-modal-bg {
    width: 100%;
    height: 100%;
    background-color: rgba(30,30,30,0.9);
}

.takeout-menu-box-detail-modal-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 70%;
    max-width: 500px;
    padding-bottom: 10px;
    background-color: #fff;
    border-radius: 4px;
    line-height: 1.2;
}

.takeout-menu-box-detail-modal-content {
    font-size: 13px;
}

.takeout-menu-box-detail-modal-content-img img {
    width: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.takeout-menu-box-detail-modal-content-txt {
    margin-top: 15px;
    padding: 0 10px;
}

.takeout-menu-box-detail-modal-open a {
    cursor: pointer;
}

.takeout-menu-box-detail-modal-close {
    position: absolute;
    top: 0.2rem;
    right: 0.5rem;
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
}

.takeout-bottom-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(205,92,92,0.9);
    z-index: 100;
    height: 50px;
    width: 100%;
    text-align: center;
	display: flex;
    margin: auto;
}

.takeout-bottom-btn ul {
	display: flex;
    width: 100%;
}

.takeout-bottom-btn li {
    width: 50%;
    list-style: none;
}

.takeout-bottom-btn-price {
    color: #fff;
    margin-top: 13px;
    font-size: 16px;
}

.takeout-bottom-btn-price i {
    margin-right: 10px;
}

.takeout-bottom-btn-box {
    margin-top: 15px;
}

.takeout-bottom-btn-box-text {
    color: #444444;
    background-color: #fff;
    border-radius: 5px;
    padding: 8px 15px;
}

/* ===== option modal: inputs must be visible ===== */
#optionModal .optm-input{
  display: inline-block !important;
  opacity: 1 !important;
  position: static !important;
  pointer-events: auto !important;
  width: 18px;
  height: 18px;
  margin: 0;
  -webkit-appearance: auto !important;
  appearance: auto !important;
}

/* 行デザイン（押しやすく、おしゃれに） */
#optionModal .optm-choice{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  margin: 8px 0;
  background: #fff;
}

/* チェックされた時に行が分かる */
#optionModal .optm-choice:has(.optm-input:checked){
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 8px 18px rgba(37,99,235,.12);
}

/* グループ見出し */
#optionModal .optm-group{ margin-bottom: 16px; }
#optionModal .optm-group-head{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-bottom: 6px;
}
/* 共通：ピル */
#optionModal .optm-required,
#optionModal .optm-optional{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
}

/* 必須 */
#optionModal .optm-required{
  color:#d81b60;
  background: rgba(216, 27, 96, 0.10);
}

/* 任意 */
#optionModal .optm-optional{
  color:#6c757d;
  background:#f1f3f5;
}

#optionModal .optm-group.is-error{
  outline: 2px solid rgba(216, 27, 96, 0.25);
  border-radius: 10px;
  padding: 8px;
}

#optionModal .optm-error{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #d81b60;
}

/* 価格差分 */
#optionModal .optm-delta{
  margin-left: 6px;
  color:#6b7280;
  font-size: 12px;
}

/* 数量のselectを右寄せ＆カード内で整える */
#optionModal .optm-choice--qty{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

#optionModal .optm-qty-select{
  width: 120px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 14px;
}

/* =========================
   Takeout: Modern add button
   ========================= */

.takeout-menu-box-quantity{
  display: flex;
  justify-content: flex-end;
}

/* 角丸・淡い枠・控えめシャドウで “今っぽい” */
.takeout-addbtn{
  appearance: none;
  border: 1px solid rgba(17, 24, 39, .14);
  background: rgba(255, 255, 255, .92);

  color: #111827;
  font-weight: 700;
  letter-spacing: .01em;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 8px 12px;
  border-radius: 999px;

  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  cursor: pointer;
  white-space: nowrap;
}

/* ちょい浮く */
.takeout-addbtn:hover{
  transform: translateY(-1px);
  background: #fff;
  border-color: rgba(17, 24, 39, .22);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

.takeout-addbtn:active{
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

/* 左の＋：小さめの丸、控えめアクセント */
.takeout-addbtn__icon{
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
}

.takeout-addbtn__icon i{
  font-size: 14px;
  line-height: 1;
}

/* テキスト */
.takeout-addbtn__text{
  font-size: 13px;
}

/* disabled */
.takeout-addbtn--disabled{
  cursor: not-allowed;
  opacity: .55;
  box-shadow: none;
  background: rgba(243, 244, 246, .9);
}
.takeout-addbtn--disabled:hover{
  transform: none;
  border-color: rgba(17, 24, 39, .14);
}

/* =========================
   Option modal (modern)
   ========================= */

.optm-modal{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none; /* JSで block にする */
}

/* 画面全体の暗幕 */
.optm-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(17,24,39,.38);
}

/* 中身パネル */
.optm-modal__panel{
  position: relative;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: 16px auto;

  display: flex;
  flex-direction: column;
  overflow: hidden;

  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
}

/* ヘッダ */
.optm-modal__header{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(17,24,39,.10);
}

.optm-modal__title{
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #111827;
}

/* 閉じるボタン */
.optm-iconbtn{
  margin-left: auto;
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(17,24,39,.04);
  color: #111827;

  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.optm-iconbtn:hover{
  background: rgba(17,24,39,.06);
  border-color: rgba(17,24,39,.18);
  transform: translateY(-1px);
}

.optm-iconbtn:active{
  transform: translateY(0);
}

/* 本文 */
.optm-modal__body{
  padding: 16px 18px;
  overflow: auto;
}

/* フッタ */
.optm-modal__footer{
  margin-top: auto;
  padding: 14px 18px;

  display: flex;
  justify-content: flex-end;
  gap: 10px;

  border-top: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.94);
}

/* ボタン */
.optm-btn{
  appearance: none;
  border: 1px solid rgba(17,24,39,.14);
  background: #fff;
  color: #111827;

  font-weight: 800;
  font-size: 13px;
  letter-spacing: .01em;

  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;

  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

.optm-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(17,24,39,.22);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

.optm-btn:active{
  transform: translateY(0);
}

.optm-btn--ghost{
  background: rgba(17,24,39,.04);
}

.optm-btn--primary{
  border-color: rgba(37,99,235,.25);
  background: rgba(37,99,235,.10);
  color: #1d4ed8;
}

.optm-btn--primary:hover{
  border-color: rgba(37,99,235,.35);
  background: rgba(37,99,235,.14);
}

/* Quantity select + optm group minimal styles (scoped to modal) */
.optm-modal .optm-choice--qty{
  display: flex;
  align-items: center;
}

.optm-modal .optm-qty-select{
  width: 140px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.14);
  background: #fff;
  font-size: 14px;
}

.optm-modal .optm-group{
  margin-top: 14px;
}

.optm-modal .optm-group-head{
  margin-bottom: 8px;
}

.optm-modal .optm-group-name{
  font-weight: 800;
}

/* モバイル最適化 */
@media (max-width: 480px){
  .optm-modal__footer{
    justify-content: stretch;
  }
  .optm-btn{
    width: 100%;
  }
}

/* === Cart Modal === */
.takeout-cart-hidden{
  display:none !important;
}

/* 背景固定（モーダル中スクロール抑止） */
body.is-modal-open{
  overflow:hidden;
}

.cartm-overlay{
  position:fixed;
  inset:0;
  background:rgba(10, 12, 16, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display:none;
  align-items:flex-end;
  justify-content:center;
  z-index:9999;
  padding:16px;
}

.cartm-overlay.is-open{
  display:flex;
}

.cartm-panel{
  width:min(720px, 100%);
  max-height: calc(100dvh - 32px);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow:hidden;
  transform: translateY(12px);
  animation: cartmIn .18s ease-out forwards;
}

@keyframes cartmIn{
  to{ transform: translateY(0); }
}

.cartm-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(0,0,0,.07);
  background: linear-gradient(180deg, rgba(250,250,252,1), rgba(255,255,255,1));
}

.cartm-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.02em;
}

.cartm-close{
  border:none;
  background:transparent;
  width:40px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: background .15s ease;
}

.cartm-close:hover{
  background: rgba(0,0,0,.06);
}

.cartm-body{
  padding:14px 16px;
  overflow:auto;
  max-height: calc(100dvh - 32px - 56px - 72px);
}

/* cart_items.html の見た目をちょい上品に（必要に応じて class に合わせて調整） */
.cartm-body .cart-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 10px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  background:#fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  margin-bottom:10px;
}

.cartm-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  border-top:1px solid rgba(0,0,0,.07);
  background: #fff;
}

.cartm-total{
  font-weight:900;
  font-size: 18px;
}

.cartm-yen{
  opacity:.7;
  margin-right:2px;
}

.cartm-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.cartm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 14px;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition: transform .06s ease, filter .15s ease, background .15s ease;
}

.cartm-btn:active{
  transform: translateY(1px);
}

.cartm-btn-ghost{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.06);
  color:#222;
}

.cartm-btn-primary{
  background: #111827;
  color: #fff;
}

.cartm-btn-primary:hover{
  opacity: .9;
  color: #fff;
}

.cartm-btn-primary.is-disabled{
  opacity:.45;
  pointer-events:none;
}

/* 下部ボタン（カート確認）をリンクからボタンに変えた分の見た目 */
.takeout-bottom-btn-open-cart{
  width:100%;
  border:none;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
}

/* === cart modal footer: mobile optimize === */
@media (max-width: 420px){
  .cartm-footer{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .cartm-total{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 16px; /* 少し小さく */
  }

  .cartm-actions{
    width: 100%;
    gap: 10px;
  }

  .cartm-btn{
    flex: 1;                 /* 2ボタンを均等幅に */
    height: 42px;
    font-size: 14px;         /* 文字を小さく */
    padding: 0 10px;         /* 横paddingも少し縮める */
    white-space: nowrap;     /* ★絶対に改行させない */
  }

  /* 閉じる：枠線/背景を消して軽くする */
  .cartm-btn-ghost{
    background: transparent;
    border: none;
    color: #374151;
  }

  .cartm-btn-ghost:hover{
    background: rgba(0,0,0,.05);
  }
}

/* === Cart modal: qty +/- / delete を上品に === */
#cartModal .js-item-inc,
#cartModal .js-item-dec{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;
  border-radius: 999px;

  background: rgba(0,0,0,.035);
  border: 1px solid rgba(0,0,0,.06);
  color: rgba(17,24,39,.75);

  font-weight: 700;
  font-size: 16px;
  line-height: 1;

  cursor: pointer;
  user-select: none;

  transition: background .15s ease, border-color .15s ease, transform .06s ease, color .15s ease, opacity .15s ease;
  opacity: .85;
}

#cartModal .js-item-inc:hover,
#cartModal .js-item-dec:hover{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.10);
  opacity: 1;
}

#cartModal .js-item-inc:active,
#cartModal .js-item-dec:active{
  transform: translateY(1px);
}

#cartModal .js-item-inc:focus-visible,
#cartModal .js-item-dec:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(17,24,39,.12);
}

/* 削除ボタン：目立たせず“リンク風”の控えめデザイン */
#cartModal .js-item-del{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  height: 32px;
  padding: 0 10px;
  border-radius: 999px;

  background: transparent;
  border: 1px solid transparent;
  color: rgba(17,24,39,.55);

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
  opacity: .9;
}

#cartModal .js-item-del:hover{
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.18);
  color: rgba(239,68,68,.9);
  opacity: 1;
}

#cartModal .js-item-del:active{
  transform: translateY(1px);
}

#cartModal .js-item-del:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(239,68,68,.18);
}

/* もしボタンが <a> の場合も見た目統一 */
#cartModal a.js-item-inc,
#cartModal a.js-item-dec,
#cartModal a.js-item-del{
  text-decoration: none;
}

.takeout-order-item-options{
  margin: 6px 0 8px 14px;
  padding-left: 10px;
  border-left: 2px solid rgba(0,0,0,.08);
}

.takeout-order-item-option{
  font-size: 13px;
  color: rgba(17,24,39,.75);
  margin-top: 2px;
}

/* === Takeout Order Detail (tod-) === */
.tod-wrap{
  max-width: 820px;
  margin: 0 auto;
  padding: 10px 0 30px;
}

.tod-hero{
  padding: 14px 14px 6px;
}

.tod-hero-title{
  font-weight: 900;
  font-size: 22px;
  letter-spacing: .02em;
  display:flex;
  gap:10px;
  align-items:center;
}

.tod-hero-title.is-success{
  color: #0a7a2e;
}

.tod-hero-sub{
  margin-top: 6px;
  color: rgba(17,24,39,.75);
  font-size: 14px;
}

.tod-card{
  background:#fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 14px;
  margin-top: 12px;
}

.tod-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.tod-card-title{
  font-weight: 900;
  display:flex;
  gap:10px;
  align-items:center;
}

.tod-badge{
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  color: rgba(17,24,39,.8);
}

.tod-grid{
  display:grid;
  gap: 10px;
}

.tod-row{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.04);
}

.tod-label{
  color: rgba(17,24,39,.65);
  font-weight: 800;
  font-size: 13px;
}

.tod-value{
  font-weight: 700;
  color: rgba(17,24,39,.92);
}

.tod-value.is-accent{
  color: #b00020;
}

.tod-link{
  text-decoration: none;
  font-weight: 800;
}

.tod-link:hover{
  text-decoration: underline;
}

.tod-items{
  display:grid;
  gap: 10px;
}

.tod-item{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

.tod-item-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
}

.tod-item-name{
  font-weight: 900;
  letter-spacing: .01em;
}

.tod-item-qty{
  font-weight: 900;
  color: rgba(17,24,39,.7);
}

.tod-item-opts{
  margin-top: 8px;
  padding-left: 10px;
  border-left: 2px solid rgba(0,0,0,.08);
}

.tod-item-opt{
  font-size: 13px;
  color: rgba(17,24,39,.78);
  margin-top: 2px;
}

.tod-item-bottom{
  margin-top: 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top: 1px dashed rgba(0,0,0,.10);
  padding-top: 10px;
}

.tod-item-sub{
  color: rgba(17,24,39,.6);
  font-weight: 800;
  font-size: 13px;
}

.tod-item-price{
  font-weight: 900;
}

.tod-total{
  margin-top: 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background: rgba(17,24,39,.04);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 12px;
}

.tod-total-label{
  font-weight: 900;
  color: rgba(17,24,39,.78);
}

.tod-total-value{
  font-weight: 900;
  font-size: 18px;
}

.tod-request{
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.04);
  border-radius: 14px;
  padding: 12px;
  color: rgba(17,24,39,.9);
  white-space: pre-wrap;
}

.tod-note{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 243, 205, .6);
  border: 1px solid rgba(255, 193, 7, .35);
  color: rgba(17,24,39,.85);
  font-size: 14px;
}

.tod-deadline{
  color: #b00020;
}

.tod-actions{
  margin-top: 10px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.tod-btn{
  border-radius: 12px;
  font-weight: 900;
}

/* mobile */
@media (max-width: 520px){
  .tod-row{
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* owner daily: order item option styling */
/* owner daily: order item option styling (REPLACE) */
.own-oi-line{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 8px;
}

.own-oi-dot{
  margin-right: 2px;
  opacity: .7;
}

.own-oi-name{
  font-weight: 800;
  color:#444;
  letter-spacing: .1px;
}

/* ★右端へ飛ばさない。商品名のすぐ横に“ピル”で表示 */
.own-oi-qty{
  margin-left: 2px;                 /* auto をやめる */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  background: #faf9f8;
  font-size: 12px;
  font-weight: 900;
  color: rgba(17,24,39,.72);
}

/* ★単価/小計を同じ行に。読みやすく少しだけ小さめ */
.own-oi-subtotal{
  margin-left: 18px;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color:#444;
}

.own-oi-opts{
  margin: 6px 0 8px 18px;
  padding-left: 10px;
  border-left: 2px solid rgba(0,0,0,.08);
}

.own-oi-opt{
  font-size: 12px;
  color: rgba(17,24,39,.75);
  margin-top: 2px;
}

.own-oi-total{
  margin-top: 10px;
  font-weight: 900;
  color: #d81b60;
}

/* ===== Order actions (owner) ===== */
.order-actions{
  margin-top: 10px;
}

.order-actions__grid{
  display: grid;
  gap: 12px;
}

/* 1段目：2列でピタッと揃える */
.order-actions__grid--primary{
  grid-template-columns: 1fr 1fr;
}

/* 2段目：3列でピタッと揃える */
.order-actions__grid--secondary{
  grid-template-columns: 1fr 1fr 1fr;
}

/* スマホ：全部2列に統一して “面” を揃える */
@media (max-width: 575.98px){
  .order-actions__grid--primary{
    grid-template-columns: 1fr 1fr;
  }
  .order-actions__grid--secondary{
    grid-template-columns: 1fr 1fr;
  }
  .order-actions__grid--secondary .order-actions__cell--cancel{
    grid-column: 1 / -1;
  }
}

/* =========================
   Owner daily: modern orders UI
   ========================= */

.wc-orders{
  --wc-col-check: 22px;
  --wc-col-time: 110px;
  --wc-col-chev: 18px;
}

.wc-orders__row{
  display: grid;
  grid-template-columns: var(--wc-col-check) var(--wc-col-time) 1fr var(--wc-col-chev);
  align-items: center;
  column-gap: 10px;
}

/* header */
.wc-orders__head{
  padding: 9px 12px;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 14px;

  background: rgba(250,249,248,.92);
  color: rgba(17,24,39,.70);

  font-size: 11.5px;  /* 少し小さめ */
  font-weight: 800;

  /* “表ヘッダ”感：下のリストにくっついて見える */
  box-shadow: 0 1px 0 rgba(17,24,39,.06);
}

.wc-orders__cell--check,
.wc-orders__cell--chev{
  opacity: .0; /* 空欄扱い（余白だけ確保） */
}

.wc-orders__list{
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

/* card */
.wc-order{
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(17,24,39,.06);
}

.wc-order[open]{
  box-shadow: 0 12px 30px rgba(17,24,39,.10);
}

/* summary */
.wc-order__summary{
  display: grid;
  grid-template-columns: var(--wc-col-check) var(--wc-col-time) 1fr var(--wc-col-chev);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
}

.wc-order__summary::-webkit-details-marker{ display: none; }
.wc-order__summary::marker{ content:""; }

.wc-order[open] .wc-order__summary{
  background: #faf9f8;
}

/* check badge (左) */
.wc-order__check{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(17,24,39,.12);
  background: #fff;
  display: grid;
  place-items: center;
  color: rgba(17,24,39,.65);
  font-size: 14px;
  line-height: 1;
}

.wc-order__check.is-on{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.30);
  color: rgba(21,128,61,.95);
}

.wc-order__time{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(17,24,39,.88);
}

.wc-order__name{
  font-size: 13px;
  font-weight: 700;
  color: rgba(17,24,39,.80);
}

/* chevron (右) */
.wc-order__chev{
  width: 18px;
  height: 18px;
  position: relative;
  opacity: .7;
}

.wc-order__chev::before{
  content:"";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(17,24,39,.55);
  border-bottom: 2px solid rgba(17,24,39,.55);
  transform: rotate(45deg);
  transition: transform .16s ease;
}

.wc-order[open] .wc-order__chev::before{
  transform: rotate(-135deg);
}

/* body */
.wc-order__body{
  padding: 12px 12px 14px;
  border-top: 1px solid rgba(17,24,39,.08);

  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(17,24,39,.78);
}

/* meta（注文ID/作成日時） */
.wc-order__meta{
  font-size: 12px;
  color: rgba(17,24,39,.58);
  display: grid;
  gap: 3px;
}

/* pickup 表示 */
.wc-order__okline{
  margin-top: 10px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(21,128,61,.95);
}

/* sections */
.wc-order__section{
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(17,24,39,.08);
}

.wc-order__sectionTitle{
  font-size: 12px;
  font-weight: 800;
  color: rgba(17,24,39,.78);
  display: flex;
  align-items: center;
  gap: 8px;
}

.wc-order__sectionBody{
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(17,24,39,.74);
}

.wc-order__muted{
  color: rgba(17,24,39,.52);
}

/* responsive */
@media (max-width: 575.98px){
  .wc-order__summary{ grid-template-columns: 22px 96px 1fr 18px; }
  .wc-order__time{ font-size: 17px; }
}

/* ==========================================================================
   Order confirm (wc-*) only
   ========================================================================== */

/* page layout */
.wc-page{
  --wc-bg: #faf9f8;
  --wc-text: #2f2a2a;
  --wc-sub: #6b6464;
  --wc-muted: rgba(47, 42, 42, .55);
  --wc-border: rgba(47, 42, 42, .10);

  --wc-accent: #d81b60;
  --wc-accent-soft: rgba(216, 27, 96, .10);
  --wc-accent-soft-2: rgba(216, 27, 96, .06);

  --wc-warn-soft: rgba(245, 158, 11, .16);
  --wc-warn-text: #6b3a14;
  --wc-warn-title: #7c2d12;

  --wc-radius: 14px;
  --wc-max: 860px;

  background: var(--wc-bg);
  padding: 26px 14px 44px;
  font-size: 12px;
}

.wc-narrow{
  max-width: var(--wc-max);
  margin: 0 auto;
}

/* hero */
.wc-hero{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 6px 0 14px;
  border-bottom: 1px solid var(--wc-border);
}

.wc-hero__icon{
  width: 44px;
  height: 44px;
  border-radius: var(--wc-radius);
  display: grid;
  place-items: center;
  background: var(--wc-accent-soft);
  color: var(--wc-accent);
  flex: 0 0 auto;
}

.wc-hero__text{ min-width: 0; }

.wc-hero__title{
  margin: 2px 0 6px;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--wc-text);
}

.wc-hero__lead{
  margin: 0;
  color: var(--wc-sub);
  line-height: 1.85;
}

.wc-hero__lead b{
  color: var(--wc-text);
  font-weight: 800;
}

/* info blocks */
.wc-info{
  padding: 10px 0 0;
}

.wc-info__block{
  padding: 14px 0;
  border-bottom: 1px solid var(--wc-border);
}

.wc-info__title{
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
  color: var(--wc-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.wc-info__title i{
  color: var(--wc-accent);
}

.wc-info__text{
  margin: 0;
  color: var(--wc-sub);
  line-height: 1.85;
}

/* warn band (docomo) */
.wc-warn{
  margin-top: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(180, 83, 9, .18);
  border-bottom: 1px solid rgba(180, 83, 9, .18);
  background: linear-gradient(90deg, var(--wc-warn-soft), rgba(245,158,11,0));
}

.wc-warn__title{
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.3;
  color: var(--wc-warn-title);
  display: flex;
  align-items: center;
  gap: 8px;
}

.wc-warn__text{
  margin: 0;
  color: var(--wc-warn-text);
  line-height: 1.85;
}

.wc-warn__text b{
  color: #5a2f10;
  font-weight: 900;
}

/* link */
.wc-link{
  color: var(--wc-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 27, 96, .35);
  padding-bottom: 1px;
}

.wc-link:hover{
  border-bottom-color: rgba(216, 27, 96, .85);
}

/* actions */
.wc-actions{
  padding-top: 18px;
}

.wc-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;

  font-weight: 800;
  text-decoration: none;
  user-select: none;

  color: var(--wc-accent);
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(216, 27, 96, .30);

  transition: background-color .12s ease, border-color .12s ease, transform .04s ease;
}

.wc-btn:hover{
  background: var(--wc-accent-soft-2);
  border-color: rgba(216, 27, 96, .45);
}

.wc-btn:active{ transform: translateY(1px); }

.wc-note{
  margin: 10px 2px 0;
  font-size: 12px;
  color: var(--wc-muted);
  line-height: 1.6;
}

/* responsive */
@media (max-width: 720px){
  .wc-hero__title{ font-size: 19px; }
  .wc-flow__list{ gap: 8px; }
  .wc-flow__item{
    width: 100%;
    justify-content: flex-start;
    border-radius: var(--wc-radius);
  }
}

/* takeout menu_choice: 画像左 / 中央に名前+ボタン / 右に価格（重なり防止） */
.mi.takeout-mi{
  display: grid;
  grid-template-columns: 62px 1fr auto; /* ★3列に戻す（右=価格） */
  grid-template-rows: auto auto;        /* 上=名前 / 下=ボタン */
  column-gap: 10px;
  row-gap: 6px;
  align-items: start;

  padding: 12px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid rgba(48, 52, 58, .10);
}

/* 左：画像は2行ぶち抜き */
.mi.takeout-mi .mi__thumb{
  grid-column: 1;
  grid-row: 1 / 3;
}

/* 中：名前（上段） */
.mi.takeout-mi .mi__main{
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding-bottom: 2px;
}

/* takeout: menu name 2-line clamp */
.mi.takeout-mi .mi__name{
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* ★2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;

  white-space: normal;          /* ★nowrap禁止 */
  line-height: 1.25;
  max-height: calc(1.25em * 2); /* 念のため */
  word-break: break-word;
}

/* 右：価格（上段・独立列） */
.mi.takeout-mi .mi__price{
  grid-column: 3;     /* ★右列へ */
  grid-row: 1;
  justify-self: end;
  align-self: start;
  white-space: nowrap;
}

/* 下段：アクション（詳細/追加） */
.mi.takeout-mi .takeout-mi__actions{
  grid-column: 2;     /* ★中央列に置く */
  grid-row: 2;
  display: inline-flex;
  gap: 10px;
  align-self: center;
  justify-self: start;
}

/* frame_settings_daily actions */
.fsd-actions{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 危険ボタン風スタイル（margin-left:auto は削除済み） */

/* 危険ボタン風（既存op-btnを崩さずに色だけ） */
.fsd-danger-btn{
  border-color: #d12c2c;
  color: #d12c2c;
}

.fsd-danger-btn:hover{
  background: rgba(209, 44, 44, 0.08);
}

/* SPでは右寄せ解除して自然に折り返し */
@media (max-width: 768px){
  .fsd-danger-btn{
    margin-left: 0;
  }
}

/* --- takeout frame table: mobile card --- */
@media (max-width: 768px){
  .fsd-table-wrap{
    overflow: visible;
  }

  .fsd-table{
    border: 0;
  }

  .fsd-table thead{
    display: none;
  }

  .fsd-table,
  .fsd-table tbody,
  .fsd-table tr,
  .fsd-table td{
    display: block;
    width: 100%;
  }

  .fsd-table tr{
    border: 1px solid #e8e2da;
    border-radius: 12px;
    padding: 12px;
    margin: 12px 0;
    background: #fff;
    line-height: normal;
  }

  .fsd-table td{
    border: 0;
    padding: 6px 0;
  }

  /* 商品名：先頭を強調 */
  .fsd-table td.fsd-cell-name{
    padding-left: 0;
    font-weight: 600;
    margin-bottom: 6px;
  }

  /* 残りの項目を2列グリッドに */
  .fsd-table tr td:nth-child(n+2){
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px;
    align-items: center;
  }

  /* ラベルを擬似的に出す（列順に対応） */
  .fsd-table tr td:nth-child(2)::before{ content:"在庫"; color:#7a6f66; font-size:12px; }
  .fsd-table tr td:nth-child(3)::before{ content:"上限"; color:#7a6f66; font-size:12px; }
  .fsd-table tr td:nth-child(4)::before{ content:"注文"; color:#7a6f66; font-size:12px; }
  .fsd-table tr td:nth-child(5)::before{ content:"状態"; color:#7a6f66; font-size:12px; }

  /* 入力は横幅100%に */
  .fsd-table input,
  .fsd-table select{
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px){
  /* カード化したテーブル全体の枠線を消す */
  .fsd-table{
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* tableを包む枠（order-listやwrapper側）も消す */
  .order-list{
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .fsd-table-wrap{
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* =========================
   Takeout Notice (modern banner)
========================= */
.takeout-notice{
  margin: 14px 0 12px;
  padding: 14px 14px 12px;
  border-radius: 14px;

  background: #faf9f8;               /* クリーム系 */
  border: 1px solid rgba(0,0,0,0.08); /* 薄い枠 */
  box-shadow: 0 10px 26px rgba(0,0,0,0.06); /* ほんのり立体 */
}

.takeout-notice__row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.takeout-notice__badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;

  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(0,0,0,0.08);

  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,0.76);
}

.takeout-notice__badge i{
  font-size: 13px;
  opacity: 0.85;
}

.takeout-notice__sub{
  font-size: 12px;
  color: rgba(0,0,0,0.55);
}

.takeout-notice__text{
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(0,0,0,0.84);
  word-break: break-word;
}

.takeout-notice__text b,
.takeout-notice__text strong{
  font-weight: 800;
}

.takeout-notice__text a{
  color: rgba(0,0,0,0.78);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 480px){
  .takeout-notice{
    padding: 12px 12px 10px;
    border-radius: 13px;
  }
  .takeout-notice__text{
    font-size: 12.8px;
  }
}

.takeout-captcha{
  margin: 14px 0 8px;
  display: flex;
  justify-content: flex-start;
}

.takeout-captcha .errorlist{
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  color: #c0392b;
  font-size: 13px;
}