.oof_form{max-width:820px;margin:2rem auto;}
.oof_ttl ttl_hana{margin:1rem 0 .5rem}
.oof_list{list-style:none;margin:0;padding:0}
.oof_item,.oof_row{display:grid;grid-template-columns:1fr auto auto auto;gap:.5rem;align-items:center;padding:.5rem 0;border-bottom:1px dotted #ddd}
.oof_item:last-child,.oof_row:last-child{border-bottom:none}
.oof_name{font-weight:600}
.oof_price{opacity:.8}
.oof_qty input[type="number"],.oof_num{width:6em}
.oof_subtotal{justify-self:end}
.oof_total{margin:1rem 0;font-weight:700;text-align:right}
.oof_actions{display:flex;gap:.5rem;justify-content:flex-end}
.oof_btn{padding:.6rem 1rem;border:1px solid #666;border-radius:8px;background:#fff;cursor:pointer}
.oof_grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.oof_grid .oof_colspan2{grid-column:1/-1}
.oof_errors ul{margin:.5rem 0 0 1.2rem}
.oof_ck{display:inline-flex;align-items:center;gap:.4rem;margin-right:1rem;margin-bottom:.4rem}
.oof_fac_other label{display:block;margin:.25rem 0}
.oof_block{margin:.5rem 0}
/* images */
.oof_item.has_img,.oof_row.has_img{grid-template-columns:120px 1fr auto auto auto}
.oof_img{width:120px}
.oof_img img{width:100%;height:auto;border-radius:8px}
.description{font-size:.85em;opacity:.8}
.oof_honeypot {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

input[type="number"] {
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.number_btns button {
  width: 24px;
  height: 20px;
  border: 1px solid #ccc;
  background: #f5f5f5;
  cursor: pointer;
  line-height: 1;
}

label.is_required::after{
  content:"必須";
  display:inline-block;
  margin-left:.5rem;
  font-size:.85em;
  padding:.05rem .4rem;
  border-radius:.4rem;
  background:#b00020;
  color:#fff;
  width: fit-content;
}
label{position: relative;}
.oof_err_msg{
  position: absolute;top: 99%;
  left: 1em;  width: 120px;
  height: 1em;
  z-index: 2;
}
.oof_err_msg::before{
  content: "未入力・または入力に誤りがあります。";
  position: absolute;
  color: #b00020;
  font-size: 1.2rem;
  white-space: nowrap;
}
.oof_invalid{
  border-color:#c62828 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(198,40,40,.15);
}

.oof_btn.oof_btn_confirm.is_disabled{
  opacity: 0.3;background: gray;cursor: not-allowed;}

.oof_btn.oof_btn_submit.is_disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

/* ボタン内スピナー */
.oof_btn {
  position: relative;
}

.oof_btn.is_loading {
  pointer-events: none;
  opacity: .85;
}

.oof_btn .oof_btn_spin {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: .5em;
  vertical-align: -0.15em;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: rgba(255,255,255,.95);
  animation: oof_spin .8s linear infinite;
}

@keyframes oof_spin { to { transform: rotate(360deg); } }

/* submit用フルオーバーレイ */
.oof_loading_overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.72);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.oof_loading_overlay.is_show { display:flex; }

.oof_loading_box {
  display:flex; flex-direction:column; gap:.75rem;
  align-items:center;
  padding:1.25rem 1.5rem;
  border-radius:12px;
  background:#fff;
  box-shadow:0 6px 30px rgba(0,0,0,.12);
}
.oof_spinner {
  width:44px; height:44px;
  border-radius:50%;
  border:4px solid rgba(0,0,0,.12);
  border-top-color: rgba(0,0,0,.65);
  animation:oof_spin .9s linear infinite;
}
.oof_loading_text { font-size:14px; opacity:.8; }