/* ===== お取り寄せバナー ===== */
:root{
  --bo-red:     #e50012;
  --bo-ink:     #1a1a1a;
  --bo-text:    #1e3135;
  --bo-border:  #786961;
  --bo-divider: #ddd;
}

.backorder-banner{
  max-width:500px;
  margin:0 auto;
  line-height:1.6;
  color:var(--bo-text);
}
.backorder-banner *{ box-sizing:border-box; }

/* ── ヘッダー行 ── */
.backorder-header{
  display:flex;
  align-items:center;
  border:2px solid var(--bo-border);
  border-radius:6px;
  overflow:hidden;
}
.banner-icon-box{
  flex:0 0 auto;
  width:62px;
  align-self:stretch;
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bo-red);
}
.banner-icon-box svg{ display:block; }
.banner-text{
  flex:1 1 auto;
  padding:0 16px;
  font-size:35px;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--bo-ink);
}

/* ── 詳細ボックス ── */
.backorder-details{
  margin-top:12px;
  padding:18px 20px;
  border:2px solid var(--bo-border);
  border-radius:6px;
  background:#fff;
}
.details-title,
.details-lead{            /* ← 2行目「発送までに」も太字にするなら .details-lead を残す */
  font-size:22px;
  font-weight:700;
  line-height:1.5;
  color:var(--bo-ink);
}
.details-divider{
  border:0;
  border-top:2px solid var(--bo-border);
  margin:12px 0;
}
.details-text{
  margin:0 0 10px;
  font-size:16px;
  font-weight:500;
  line-height:1.7;
}
.details-note-red{
  margin:10px 0 0;
  font-size:16px;
  font-weight:700;
  color:var(--bo-red);
}