/* ============================================================
   11月版で新設するセクションのスタイル
   A案：既存 #onlinenotice の語彙をそのまま踏襲（控えめ）
   B案：骨格は同一のまま、罫線と紙色で組み直す
   ============================================================ */

/* ---------- セクション共通 ---------- */
.vcol {
  width: 540px;
  margin: 0 0 0 8px;
}
.vcol--list { margin-top: 26px; }

.nov-sec {
  width: 540px;
  margin: 0 auto 26px;
  text-align: left;
}
.nov-sec__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--ochre-line);
}
.nov-sec__head h2 {
  margin: 0;
  font-size: 15pt;
  line-height: 1.3;
  font-weight: bold;
  color: #3B2C1C;
  letter-spacing: .04em;
}
.nov-sec__head .sub {
  font-size: 9pt;
  color: #7A6A52;
  letter-spacing: .04em;
}
.nov-sec__head--list {
  width: 508px;
  margin: 0 auto 6px;
}

/* ---------- A案：お知らせ（黄色い箱の縦積み） ---------- */
.nov-a__box {
  width: 508px;
  margin: 0 auto 10px;
  padding: 9px 14px 11px;
  border: 1px solid #FFFFBB;
  border-radius: 7px;
  background: #FFFF66;
  font-size: 9.5pt;
  line-height: 1.65;
  color: #6B3410;
}
.nov-a__box--wide { margin-bottom: 0; }
.nov-a__box h3 {
  margin: 0 0 5px;
  font-size: 10pt;
  font-weight: bold;
  color: #CE0000;
  line-height: 1.5;
}
.nov-a__box p { margin: 0 0 5px; }
.nov-a__box p:last-child { margin-bottom: 0; }

.nov-a__rows {
  width: 100%;
  margin: 6px 0 3px;
  border-collapse: collapse;
  font-size: 9.5pt;
}
.nov-a__rows th,
.nov-a__rows td {
  padding: 3px 0;
  text-align: left;
  font-weight: normal;
  vertical-align: top;
}
.nov-a__rows th {
  width: 96px;
  color: #A03A0C;
  white-space: nowrap;
}
.nov-a__rows td strong { color: #6B3410; letter-spacing: .02em; }
.nov-a__rows tr + tr th,
.nov-a__rows tr + tr td { border-top: 1px dotted #E2B96A; }

.nov-a__foot {
  margin: 7px 0 0;
  font-size: 8.5pt;
  line-height: 1.65;
  color: #8A6A45;
}

/* ---------- B案：お知らせ（日付ガター付きの告知面） ---------- */
.nov-b__panel {
  width: 508px;
  margin: 0 auto;
  border-top: 2px solid #6B4F2A;
  background: #FBF8F0;
}
.nov-b__panel--wide { width: 508px; }
.nov-b__row {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 0 14px;
  padding: 13px 16px 14px 14px;
}
.nov-b__row + .nov-b__row { border-top: 1px solid #E4D9C2; }
.nov-b__date {
  font-size: 8.5pt;
  line-height: 1.45;
  color: #8A6A45;
  letter-spacing: .02em;
  padding-top: 3px;
  white-space: nowrap;
}
.nov-b__date b {
  display: block;
  font-size: 12.5pt;
  color: #6B4F2A;
  letter-spacing: .01em;
  line-height: 1.3;
}
.nov-b__body { min-width: 0; }
.nov-b__body h3 {
  margin: 0 0 5px;
  font-size: 10.5pt;
  font-weight: bold;
  color: #3B2C1C;
  line-height: 1.5;
}
.nov-b__body p {
  margin: 0 0 5px;
  font-size: 9.5pt;
  line-height: 1.7;
  color: #4A4034;
}
.nov-b__body p:last-child { margin-bottom: 0; }

.nov-b__spec {
  display: flex;
  margin: 8px 0 0;
  border: 1px solid #DED2B8;
  background: #FFFFFF;
}
.nov-b__spec div {
  flex: 1 1 0;
  padding: 6px 8px 7px;
  font-size: 8.5pt;
  line-height: 1.4;
  color: #8A6A45;
}
.nov-b__spec div + div { border-left: 1px solid #DED2B8; }
.nov-b__spec strong {
  display: block;
  margin-top: 2px;
  font-size: 10pt;
  color: #3B2C1C;
  letter-spacing: .02em;
}
.nov-b__spec .is-new strong { color: #B4470E; }

/* セールなし、の一行 */
.nov-quiet {
  width: 508px;
  margin: 0 auto;
  padding: 10px 14px;
  border-left: 3px solid #C9A227;
  background: #FCFAF2;
  font-size: 9.5pt;
  line-height: 1.7;
  color: #5C4A32;
}
.nov-quiet b { color: #8A4B16; }

/* ---------- 定番豆 A案（既存カードの語彙） ---------- */
.bean__lead {
  width: 508px;
  margin: 0 auto 12px;
  font-size: 9.5pt;
  line-height: 1.75;
  color: #4E4438;
}
.bean__lead--foot {
  margin: 14px auto 0;
  font-size: 9pt;
  color: #6B5A42;
  text-align: left;
}

.beanlist { width: 508px; margin: 0 auto; }
.bean {
  position: relative;
  margin: 0 0 12px;
  padding: 11px 78px 12px 14px;
  border: 1px solid #E0C9A8;
  background: #FFFFFF;
  box-shadow: 0 0 6px -3px #000;
}
.bean:last-child { margin-bottom: 0; }
.bean__name {
  display: block;
  margin: 0 0 2px;
  font-size: 12pt;
  font-weight: bold;
  line-height: 1.4;
  color: #7A4A18;
  text-decoration: none;
}
.bean__name:hover { text-decoration: underline; }
.bean__origin {
  display: block;
  margin-bottom: 6px;
  font-size: 8.5pt;
  color: #8A7A62;
  letter-spacing: .02em;
}
.bean__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 8.5pt;
  color: #6B5A42;
}
.bean__meta img { display: block; }
.bean__meta b { color: var(--brown); font-size: 9.5pt; }
.bean__note {
  margin: 0;
  font-size: 9pt;
  line-height: 1.6;
  color: #4E4438;
}
.bean__price {
  position: absolute;
  right: 12px;
  bottom: 12px;
  text-align: right;
  font-size: 8pt;
  color: #8A6A45;
  line-height: 1.35;
}
.bean__price b {
  display: block;
  font-size: 15pt;
  font-weight: bold;
  color: #3B2C1C;
}

/* ---------- 定番豆 B案（値札リスト） ---------- */
.beanlist--b {
  width: 508px;
  margin: 0 auto;
}
.beanlist--b table {
  width: 100%;
  border-collapse: collapse;
}
.beanlist--b th {
  padding: 0 6px 5px;
  border-bottom: 1px solid #6B4F2A;
  font-size: 8.5pt;
  font-weight: normal;
  color: #8A7A62;
  text-align: left;
  letter-spacing: .04em;
}
.beanlist--b th.num { text-align: right; }
.beanlist--b td {
  padding: 11px 6px;
  vertical-align: middle;
  border-bottom: 1px solid #E4D9C2;
}
.beanlist--b tbody tr:hover td { background: #FCFAF2; }
.beanlist--b .n {
  font-size: 11.5pt;
  font-weight: bold;
  color: #3B2C1C;
  line-height: 1.35;
}
.beanlist--b .n a { color: inherit; text-decoration: none; }
.beanlist--b .n a:hover { text-decoration: underline; }
.beanlist--b .n small {
  display: block;
  margin-top: 2px;
  font-size: 8.5pt;
  font-weight: normal;
  color: #8A7A62;
  letter-spacing: .02em;
}
.beanlist--b .r { white-space: nowrap; }
.beanlist--b .r img { display: block; }
.beanlist--b .r span {
  display: block;
  margin-top: 3px;
  font-size: 8.5pt;
  color: #6B5A42;
}
.beanlist--b td.num {
  text-align: right;
  white-space: nowrap;
  font-size: 13pt;
  font-weight: bold;
  color: #3B2C1C;
}
.beanlist--b td.num small {
  display: block;
  margin-top: 1px;
  font-size: 8pt;
  font-weight: normal;
  color: #8A7A62;
}

/* ---------- お買い得ページ ---------- */
.okaidoku-banner {
  display: block;
  margin: 0 auto 14px;
}

.ordlist { width: 508px; margin: 0 auto; }
.ord {
  border-top: 1px solid #E4D9C2;
  padding: 13px 4px 15px;
}
.ord--a {
  border: 1px solid #E0C9A8;
  box-shadow: 0 0 6px -3px #000;
  padding: 12px 14px 13px;
  margin-bottom: 12px;
}
.ordlist .ord:last-child { border-bottom: 1px solid #E4D9C2; }

.ord__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ord__name {
  font-size: 11.5pt;
  font-weight: bold;
  color: #3B2C1C;
  text-decoration: none;
  line-height: 1.4;
}
.ord--a .ord__name { font-size: 12pt; color: #7A4A18; }
.ord__name:hover { text-decoration: underline; }
.ord__origin {
  font-size: 8.5pt;
  color: #8A7A62;
  white-space: nowrap;
}
.ord__roast {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 7px 0 6px;
}
.ord__roast img { display: block; }
.ord__roast b { font-size: 9.5pt; color: var(--brown); }
.ord__note {
  margin: 0 0 9px;
  font-size: 9pt;
  line-height: 1.6;
  color: #4E4438;
}

.ord__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
.ord__form {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.ord__form label {
  display: block;
  font-size: 8pt;
  color: #666;
  line-height: 1.3;
}
.ord__form label span { display: block; }
.ord__form select {
  margin-top: 2px;
  font-family: inherit;
  font-size: 9pt;
  padding: 1px 2px;
}
.ord__price {
  text-align: right;
  line-height: 1.2;
  white-space: nowrap;
}
.ord__price span {
  display: block;
  font-size: 7.5pt;
  color: #8A6A45;
}
.ord__price b {
  display: block;
  font-size: 16pt;
  font-weight: bold;
  color: #3B2C1C;
}
.ord__price b i {
  font-style: normal;
  font-size: 9pt;
  font-weight: normal;
}

/* ---------- 下部の既存要素 ---------- */
.cardnotice {
  width: 480px;
  margin: 0 auto 12px;
  border: 1px solid #CC0000;
  border-collapse: collapse;
}
.cardnotice td {
  border: 1px solid #FFCC00;
  background: #FFFF99;
  padding: 10px;
  text-align: center;
  font-size: 9pt;
}
.cardnotice__t {
  color: #FF0000;
  font-size: 14pt;
  font-weight: bold;
  line-height: 1.5;
}
.cardnotice img { display: block; margin: 4px auto 0; }

.vship .alt { background: #e6fbfb; color: #325F27; }

.foot { width: 540px; }
.foot__pay {
  text-align: center;
  font-size: 9pt;
  color: #003399;
  margin: 10px 0 0;
}