/*
 * CMS 版で足した見た目（旧サイトの style.css・shop.css はそのまま。足りないものだけここに）
 * - お問い合わせの結果の表示（旧サイトでは管理画面の admin.css にあった .admin-alert）
 * - 在庫の「手続き中」の表示
 * - 管理画面の本文ブロック（表・要点・よくある質問）
 */
.admin-alert {
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: 6px;
  font-size: 13px;
}
.admin-alert--error {
  background-color: #fbe9e7;
  color: #a33a2c;
  border: 1px solid #f0c4bf;
}
.admin-alert--success {
  background-color: #eef4ea;
  color: #3f6b34;
  border: 1px solid #cfe1c4;
}

/* 手続き中（ほかのお客様がお支払い中）。売り切れの帯と同じ形で色だけ変える */
.products__badge--reserved {
  background-color: rgba(166, 138, 91, 0.82);
}
.products__item.is-reserved .products__price,
.product-detail__price.is-reserved {
  opacity: 0.7;
}
.product-detail__status {
  margin: 8px 0 0;
  font-family: var(--font-gothic);
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-text-sub);
}
.cart__item-status {
  margin-top: 4px;
  font-family: var(--font-gothic);
  font-size: 11px;
  color: #a33a2c;
}

/* 本文ブロック（管理画面で足せる部品） */
.rich-content .kh-table {
  overflow-x: auto;
  margin: 1.5em 0;
}
.rich-content .kh-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.rich-content .kh-table th,
.rich-content .kh-table td {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.rich-content .kh-points {
  margin: 1.5em 0;
  padding: 16px 20px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.4);
}
.rich-content .kh-points__title {
  font-weight: 600;
  margin: 0 0 8px;
}
.rich-content .kh-faq dt {
  font-weight: 600;
  margin-top: 1em;
}
.rich-content .kh-faq dd {
  margin: 0.4em 0 0;
}
.rich-content figure img,
.rich-content p > img {
  max-width: 100%;
  height: auto;
}
.c_video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 1.5em 0;
}
.c_video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== 管理画面の本文ブロック（新しいエディタ）の余白・配置・大きさ =====
   本文の書式は .rich-content。ここは足りないところだけ :where で優しく付ける */
:where(.kh-body) > :is(figure, .kh-img, .kh-btn, hr, .c_gallery, .c_video) { margin-block: 2em; }
:where(.kh-body) hr { border: 0; border-top: 1px solid var(--color-border, #ddd); }
:where(.kh-body) figcaption { margin-top: .6em; font-size: .85em; line-height: 1.6; color: var(--color-text-sub, #666); text-align: center; }
.kh-body .kh-a-left { text-align: left; }
.kh-body .kh-a-center { text-align: center; }
.kh-body .kh-a-right { text-align: right; }
.kh-body .kh-img img { display: block; max-width: 100%; height: auto; }
.kh-body .kh-img.kh-a-center img { margin-inline: auto; }
.kh-body .kh-img.kh-a-right img { margin-left: auto; }
.kh-body .kh-w-full img { width: 100%; }
.kh-body .kh-w-m img { width: 66%; }
.kh-body .kh-w-s img { width: 40%; }
@media (max-width: 600px) { .kh-body .kh-w-m img { width: 100%; } .kh-body .kh-w-s img { width: 60%; } }
.kh-body .kh-sp { margin: 0 !important; padding: 0; }
.kh-body .kh-sp--s { height: 1em; }
.kh-body .kh-sp--m { height: 2.5em; }
.kh-body .kh-sp--l { height: 5em; }
.kh-anchor { scroll-margin-top: 120px; } /* ページ内リンクの目印：固定ヘッダーに隠れないよう少し上で止める */