/* ベースリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* font-family: "Helvetica Neue", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif; */
  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
  line-height: 1.65;
  color: #333;
  background-color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0.03em;
  font-weight: 500;
}

a {
  color: inherit;
}

/* カスタム要素は HTML 上のデフォルトが inline のため block 化する */
category-card,
product-card {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

section-label,
filter-group,
custom-button,
quantity-stepper,
add-cart,
nav-label {
  display: block;
  min-width: 0;
}

/* woocommerce */
.woocommerce-notices-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0.75rem auto 0;
  padding-inline: 2rem;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .woocommerce-notices-wrapper {
    padding-inline: 1rem;
  }
}

@media (max-width: 768px) {
  .woocommerce-notices-wrapper {
    margin: 1rem auto 0;
    padding-inline: 0.75rem;
  }
}

@media (max-width: 480px) {
  .woocommerce-notices-wrapper {
    margin: 0.75rem auto 0;
    padding-inline: 0.5rem;
  }
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  list-style: none;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  border: 1px solid transparent;
  background: #fff;
}

.woocommerce-message {
  color: #0f5132;
  background: #e9f7ef;
  border-color: #badbcc;
}

.woocommerce-error {
  color: #842029;
  background: #f8d7da;
  border-color: #f5c2c7;
}

.woocommerce-info {
  color: #055160;
  background: #cff4fc;
  border-color: #b6effb;
}

.woocommerce-message a.button,
.woocommerce-message a.wc-forward,
.woocommerce-message a.restore-item,
.woocommerce-error a.button,
.woocommerce-error a.wc-forward,
.woocommerce-error a.restore-item,
.woocommerce-info a.button,
.woocommerce-info a.wc-forward,
.woocommerce-info a.restore-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid #009cc1;
  background: #009cc1;
  color: #fff !important;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}

.woocommerce-message a.button:hover,
.woocommerce-message a.wc-forward:hover,
.woocommerce-message a.restore-item:hover,
.woocommerce-error a.button:hover,
.woocommerce-error a.wc-forward:hover,
.woocommerce-error a.restore-item:hover,
.woocommerce-info a.button:hover,
.woocommerce-info a.wc-forward:hover,
.woocommerce-info a.restore-item:hover {
  background: #0082a1;
  border-color: #0082a1;
  color: #fff !important;
}

.jof-notice-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.woocommerce-message a.jof-notice-checkout {
  border-color: #fe6883;
  background: #fe6883;
}

.woocommerce-message a.jof-notice-checkout:hover {
  border-color: #e84d6f;
  background: #e84d6f;
}

@media (max-width: 768px) {
  .jof-notice-actions {
    display: flex;
    width: 100%;
  }

  .woocommerce-message a.button,
  .woocommerce-message a.wc-forward,
  .woocommerce-message a.restore-item,
  .woocommerce-error a.button,
  .woocommerce-error a.wc-forward,
  .woocommerce-error a.restore-item,
  .woocommerce-info a.button,
  .woocommerce-info a.wc-forward,
  .woocommerce-info a.restore-item {
    width: 100%;
  }
}