:root {
  --wc-v2-font-sans: "Noto Sans JP", sans-serif;
  --wc-v2-text: #24272a;
  --wc-v2-muted: #6f7680;
  --wc-v2-border: #d9dde3;
  --wc-v2-border-strong: #c7cdd6;
  --wc-v2-surface: #ffffff;
  --wc-v2-surface-alt: #f7f9fc;
  --wc-v2-brand: #1f9dd9;
  --wc-v2-brand-deep: #0f7fbc;
  --wc-v2-accent: #f45b00;
  --wc-v2-success: #7bc043;
  --wc-v2-danger: #ff3b30;
  --wc-v2-shadow: 0 18px 40px rgba(15, 41, 66, 0.12);
  --wc-v2-radius-lg: 22px;
  --wc-v2-radius-md: 16px;
  --wc-v2-radius-sm: 12px;
  --wc-v2-max-width: 1280px;
}

.wc-v2-page {
  margin: 0;
  font-family: var(--wc-v2-font-sans);
  color: var(--wc-v2-text);
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.wc-v2-page *,
.wc-v2-page *::before,
.wc-v2-page *::after {
  box-sizing: border-box;
}

.wc-v2-page a {
  color: inherit;
}

.wc-v2-page button,
.wc-v2-page input,
.wc-v2-page textarea {
  font: inherit;
}

.wc-v2-page main {
  display: block;
}

/* v2ページ専用の全画面ヘッダーは自前でレイアウトするため、レガシーlayout_pctb.cssの#wrapper{padding-top:150px}を打ち消す */
body.wc-v2-page #wrapper {
  padding-top: 0;
}

/*
 * layout_pctb.cssの body { min-width: 1280px; } (min-width:768pxで適用)により、
 * 768〜1279px幅の画面ではbody/#wrapper/mainが1280pxに固定され横に溢れていた
 * (ヘッダー・shellの幅計算もこの1280pxを基準にずれていた)。v2ページはこの幅でも
 * 素直に画面幅へ追従させたいので打ち消す。
 */
body.wc-v2-page {
  min-width: 0;
}

.wc-v2-shell {
  width: min(var(--wc-v2-max-width), calc(100% - 32px));
  margin: 0 auto;
}

@media (max-width: 767px) {
  .wc-v2-shell {
    width: min(100%, calc(100% - 16px));
  }
}