/* 
   WEBO ONLINE STORE
   Product Page Stylesheet
   product-new.css  v1.1
    */
/*
  :root（CSS変数） / *（リセット） / body のベース指定は /header.css に集約済み。
  product-new.css 側で上書きすると変数値がずれて header 周りの見た目が
  商品ページだけ変わってしまうため、ここでは商品ページ固有のものだけ残す。
*/
html {
  scroll-behavior: smooth;
  font-size: 16px;
}
body {
  line-height: 1.9;
  overflow-x: hidden;
}
/*  BREADCRUMB — moved to /header.css (unified)  */
/*  PRODUCT HERO  */
.product-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0;
  min-height: 75vh;
  background-color: #fff
}
/* Gallery */
.product-gallery {
  background: #e5e1dc;
  position: relative;
  overflow: hidden;
  max-height: 75vh;
}
.gallery-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  display: block;
  transition: opacity 0.4s;
}
.gallery-badge {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 2;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-dark);
  padding: 6px 16px;
}
/* Gallery thumbnails  Ehorizontal scroll with arrows */
.gallery-thumbs-wrapper {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}
.gallery-thumbs-arrow {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  color: var(--color-dark);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
  backdrop-filter: blur(4px);
}
.gallery-thumbs-arrow:hover {
  background: rgba(255, 255, 255, 0.95);
}
.gallery-thumbs-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.gallery-thumbs-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0 8px;
  max-width: 380px;
}
.gallery-thumbs-scroll::-webkit-scrollbar {
  display: none;
}
.gallery-thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s;
  opacity: 0.6;
  background: var(--color-white);
}
.gallery-thumb:hover, .gallery-thumb.active {
  border-color: var(--color-accent);
  opacity: 1;
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Legacy fallback: .gallery-thumbs without wrapper (for simple pages) */
.gallery-thumbs {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
}
/* Product info panel */
.product-info {
  padding: 56px 56px 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-white);
}
.product-brand {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}
.product-title-en {
  font-family: var(--font-en);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.2;
  margin-bottom: 8px;
}
.product-title-jp {
  font-family: var(--font-jp);
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--color-text-light);
  margin-bottom: 28px;
}
.product-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-divider);
}
.product-meta-row {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-text-light);
  display: flex;
  gap: 12px;
}
.product-meta-label {
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  min-width: 60px;
}
.product-price-area {
  margin-bottom: 26px;
}
.product-price {
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-text);
}
.product-price-tax {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: var(--color-text-light);
  margin-left: 8px;
}
.product-shipping {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  color: var(--color-accent);
  margin-top: 0;
  letter-spacing: 0.08em;
}
.product-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 28px;
}
.qty-selector {
  display: inline-flex;
  align-items: stretch;
  height: 48px;
  border: 1px solid var(--color-divider);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  width: auto;
}
.qty-selector .qty-btn {
  width: 40px;
  min-height: 100%;
  border: none;
  background: var(--color-bg);
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  padding: 0;
  margin: 0;
}
.qty-selector .qty-btn:hover {
  background: var(--color-divider);
}
.qty-selector .qty-display {
  width: 50px;
  min-height: 100%;
  border: none;
  border-left: 1px solid var(--color-divider);
  border-right: 1px solid var(--color-divider);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  background: var(--color-white);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}
/* カード用: 小さめ */
.qty-selector--card {
  height: 38px;
}
.btn-cart {
  flex: 1;
  height: 48px;
  background: var(--color-dark);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: all 0.3s;
  border-radius: 4px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-cart:hover {
  background: var(--color-accent);
}
/* Hero: +/- qty + cart button side by side (JS-injected wrapper) */
.cart-actions-row {
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
}
.cart-actions-row .cartjs_buy, .cart-actions-row .cartjs_cart_in {
  flex: 1;
  min-width: 0;
}
.cart-actions-row .cartjs_buy p {
  margin: 0 !important;
  padding: 0 !important;
}
.cart-actions-row .cartjs_btn, .cart-actions-row .cartjs_cart_in input[type="submit"] {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
}
.product-limited-notice {
  font-family: var(--font-jp);
  font-size: 0.8rem;
  color: #AF5A42;
  padding: 12px 16px;
  background: rgba(184, 90, 60, 0.06);
  border-left: 3px solid #AF5A42;
  border-radius: 0 4px 4px 0;
}
.product-intro {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--color-divider);
}
.product-intro p {
  font-size: 0.88rem;
  line-height: 2;
  color: var(--color-text-light);
  font-weight: 300;
}
.product-intro a {
  color: var(--color-accent);
}
.product-intro-subtitle {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent)!important;
  margin-top: 18px;
  margin-bottom: 4px;
  font-weight: 500;
}
.product-intro-subtitle:first-child {
  margin-top: 0;
}
/*  FEATURE STRIP  */
.features-strip {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 52px 0;
}
.features-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}
.feature-chip {
  text-align: center;
}
.feature-chip-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  color: var(--color-accent-light);
}
.feature-chip-label {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}
.feature-chip-value {
  font-family: var(--font-jp);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 3px;
}
/*  SECTION COMMON  */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 60px;
}
.container-wide {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px;
}
section {
  padding: 110px 0;
}
.section-header {
  text-align: center;
  margin-bottom: 64px;
  display: block
}
.section-number {
  font-family: var(--font-en);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--color-accent);
  margin-bottom: 14px;
}
.section-title-en {
  font-family: var(--font-en);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--color-text);
  margin-bottom: 8px;
  line-height: 1.2;
}
.section-title-jp {
  font-family: var(--font-jp);
  font-size: 0.88rem;
  font-weight: 300;
  letter-spacing: 0.15em;
  color: var(--color-text-light);
}
.section-divider {
  width: 50px;
  height: 1px;
  background: var(--color-accent-light);
  margin: 22px auto 0;
}
/*  FEATURE BLOCKS  */
.feature-section {
  background: var(--color-white);
  padding: 50px 0 0 0;
}
.feature-block, .feature-block1, .feature-block2 {
  max-width: min(100%, 1200px, 180vh);
  margin-left: auto;
  margin-right: auto;
}
.feature-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  margin: 0 auto 2px;
}
.feature-block:last-child, .feature-block2:last-child {
  margin-bottom: 24px;
}
.feature-block a.P_btn, .feature-block1 a.P_btn, .feature-block2 a.P_btn {
  display: block;
  margin: 0.5em auto 0.5em 0;
  max-width: 300px;
  text-align: center;
}
.purchase-section a.P_btn, .purchase-section1 a.P_btn, .purchase-section2 a.P_btn {
  display: block;
  margin: 0.5em 0;
  text-align: center;
}
.feature-block:nth-child(even) .feature-image, .feature-block2:nth-child(even) .feature-image {
  order: 2;
}
.feature-block:nth-child(even) .feature-text, .feature-block2:nth-child(even) .feature-text {
  order: 1;
}
.feature-image {
  min-height: 420px;
  position: relative;
  overflow: hidden;
  background: #e5e1dc;
}
.feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/*  feature-image-double (二列)  */
.feature-image-double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  min-height: 420px;
}
.feature-image-double img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/*  FEATURE-BLOCK1 (full-width image, text always below)  */
.feature-block1 {
  display: block;
  margin: 8px auto;
}
.feature-block1 .feature-image {
  min-height: 300px;
  position: relative;
  overflow: hidden;
  background: #e5e1dc;
}
.feature-block1 .feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.feature-block1 .feature-text {
  padding: 20px 56px 40px;
  background: var(--color-white);
}
/*  FEATURE-BLOCK2 (Do not crop)  */
.feature-block2 .feature-image {
  min-height: inherit; /*cancel*/
}
.feature-block2 .feature-image img {
  height: auto; /*cancel*/
}
/* Photo credit overlay (© Manufacturer) */
.photo-credit {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.03em;
  pointer-events: none;
  line-height: 1;
  z-index: 1;
}
.feature-block1 + .feature-block1 {
  margin-top: 24px;
}
.feature-text {
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-white);
}
.feature-label {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
}
.feature-title {
  font-family: var(--font-jp);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 18px;
  line-height: 1.6;
}
.feature-desc {
  font-size: 0.86rem;
  line-height: 2;
  color: var(--color-text-light);
  font-weight: 300;
}
.feature-sub-caption {
  font-size: 0.8rem;
  color: var(--color-text-light);
  font-weight: 300;
  margin-top: 12px;
  font-style: italic;
}
/*  VIDEO EMBED (YouTube)  */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  background: #e5e1dc;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Video in feature block */
.feature-image .video-container {
  padding-bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.feature-image .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*  PURCHASE  */
.purchase-section {
  background: var(--color-bg);
  padding: 100px 0;
}
.purchase-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 960px;
  margin: 0 auto;
}
/* Variant: 2-column for limited/few variants */
.purchase-cards--2col {
  grid-template-columns: 1fr 1fr;
}
/* Variant: 4-column for many variants */
.purchase-cards--4col {
  grid-template-columns: repeat(4, 1fr);
}
.purchase-card {
  background: var(--color-white);
  border-radius: 8px;
  border: 1px solid var(--color-divider);
  overflow: hidden;
  transition: box-shadow 0.3s;
}
.purchase-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}
.purchase-card.featured {
  border-color: var(--color-accent);
  position: relative;
}
.purchase-card.featured::before {
  content: attr(data-badge);
  position: absolute;
  top: -1px;
  right: 30px;
  font-family: var(--font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  color: var(--color-white);
  background: var(--color-accent);
  padding: 4px 12px;
  z-index: 1;
}
/* Default badge text when data-badge is empty */
.purchase-card.featured:not([data-badge])::before {
  content: 'POPULAR';
}
.purchase-card-img {
  width: 100%;
  object-fit: cover;
  display: block;
}
.purchase-card-body {
  padding: 28px 28px 32px;
}
.purchase-card-name {
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 3px;
}
.purchase-card-sub {
  font-size: 0.78rem;
  color: var(--color-text-light);
  font-weight: 300;
  margin-bottom: 14px;
}
.purchase-card-meta {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: var(--color-text-light);
  margin-bottom: 14px;
  line-height: 1.8;
}
.purchase-card-price {
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 0;
}
.purchase-card-price small {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  color: var(--color-text-light);
  font-weight: 300;
}
.btn-purchase {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  background: var(--color-bg);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--color-divider);
  border-radius: 4px;
  transition: background 0.3s;
  text-align: center;
  text-decoration: none !important;
}
.btn-purchase:hover {
  color: var(--color-dark);
}
.btn-purchase-outline {
  display: block;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--color-divider);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
  text-align: center;
  text-decoration: none;
}
.btn-purchase-outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.purchase-card-note {
  font-size: 0.72rem;
  color: var(--color-text-light);
  margin-top: 12px;
  text-align: left;
}
.purchase-card-note a {
  color: var(--color-accent);
  text-decoration: underline;
}
/* Variant option label (e.g. "mat+box" / "box only")
   ※ラベルは「下の購入カード」を指していることを示すため、
   ::before に ▼ を入れて視覚的に下方向を示す */
.purchase-card-option {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid transparent;
  padding: 4px 4px 3px 12px;
  margin-top: 48px;
  text-align: left;
  font-weight: 400;
	/*ハック*/
	width: calc(100% + 24px); margin-left: -12px;
}
.purchase-card-option::before {
  content: "▼";
  display: inline-block;
  margin-right: 6px;
  font-size: 0.85em;
  color: var(--color-accent);
  vertical-align: middle;
  line-height: 1;
  position: relative;
  top: -1px;
}
.purchase-card-meta + .purchase-card-option {
  margin-top: 12px;
}
/* Separator between cart variants */
.purchase-card-separator {
  border: none;
  border-top: 1px dashed var(--color-divider);
  margin: 16px 0 4px;
}
/*  Shop-Pro Cart Widget (loaded via cartjs script)  */
.cart-widget {
  margin-top: 8px;
  min-height: 40px;
}
/* ヒーロー: cart-widgetをproduct-actions内で幅いっぱいに */
.product-actions .cart-widget {
  flex: 1;
  min-width: 0;
  width: 100%;
}
/* Reset Shop-Pro wrapper styles */
.cart-widget > div[style] {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.cart-widget .cartjs_box {
  margin: 0 !important;
  padding: 0 !important;
}
.cart-widget .cartjs_product_form {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.cart-widget .cartjs_product_table {
  margin: 0 !important;
}
/* Override the inline table styles from Shop-Pro */
.cart-widget .cartjs_product_table table {
  width: 100% !important;
  margin: 0 0 8px !important;
  border: none !important;
  border-collapse: collapse !important;
}
/* PC option label (カラー, 素材 etc.) — block display for vertical stack */
.cart-widget .cartjs_product_table .cartjs_option th {
  background: none !important;
  border: none !important;
  padding: 8px 0 4px !important;
  font-family: var(--font-sans) !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  color: var(--color-text-light) !important;
  text-align: left !important;
  width: auto !important;
  display: block !important;
}
/* PC option value cell */
.cart-widget .cartjs_product_table .cartjs_option td {
  padding: 0 0 10px !important;
  border: none !important;
  width: 100% !important;
  display: block !important;
  font-family: var(--font-jp) !important;
  font-size: 0.82rem !important;
  color: var(--color-text) !important;
}
/* PC option row — no border */
.cart-widget .cartjs_product_table tr {
  border: none !important;
}
/* Quantity input */
.cart-widget .cartjs_product_input_txt, .cart-widget input[name="product_num"] {
  width: 56px !important;
  padding: 9px 8px !important;
  border: 1px solid var(--color-divider) !important;
  border-radius: 4px !important;
  text-align: center !important;
  font-family: var(--font-sans) !important;
  font-size: 0.88rem !important;
  color: var(--color-text) !important;
  background: var(--color-white) !important;
  transition: border-color 0.3s !important;
}
.cart-widget .cartjs_product_input_txt:focus, .cart-widget input[name="product_num"]:focus {
  outline: none !important;
  border-color: var(--color-accent) !important;
}
/* Option selects (形状, チE��スチャ, カラー etc.) */
.cart-widget select, .cart-widget .cartjs_option select {
  width: 100% !important;
  padding: 9px 36px 9px 12px !important;
  border: 1px solid var(--color-divider) !important;
  border-radius: 4px !important;
  background: var(--color-white) !important;
  font-family: var(--font-jp) !important;
  font-size: 0.82rem !important;
  color: var(--color-text) !important;
  height: auto !important;
  line-height: 1.4 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6560' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  cursor: pointer !important;
  transition: border-color 0.3s !important;
}
.cart-widget select:focus {
  outline: none !important;
  border-color: var(--color-accent) !important;
}
.cart-widget select:hover {
  border-color: var(--color-accent-light) !important;
}
/* Cart submit button (カートに入れる) */
.cart-widget .cartjs_cart_in {
  width: 100% !important;
  text-align: center !important;
  margin: 4px auto 0 !important;
}
.cart-widget .cartjs_cart_in input[type="submit"], .cart-widget input[type="submit"], .cart-widget input[type="button"], .cart-widget button[type="submit"] {
  display: block !important;
  width: 100% !important;
  padding: 14px 20px !important;
  border: none !important;
  background: var(--color-dark) !important;
  color: var(--color-white) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.2em !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  transition: all 0.3s !important;
  text-align: center !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 48px !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
}
.cart-widget .cartjs_cart_in input[type="submit"]:hover, .cart-widget input[type="submit"]:hover, .cart-widget input[type="button"]:hover, .cart-widget button[type="submit"]:hover {
  background: var(--color-accent) !important;
}
/* Stock display */
.cart-widget .cartjs_stock, .cart-widget font[color] {
  font-family: var(--font-sans) !important;
  font-size: 0.7rem !important;
  color: var(--color-text-light) !important;
  letter-spacing: 0.04em;
}
/* SOLD OUT state */
.cart-widget .cartjs_soldout, .cart-widget .cartjs_soldout_message {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  border: 1px solid var(--color-divider);
  border-radius: 4px;
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: var(--color-text-light);
  text-align: center;
  cursor: default;
}
/* When the form is hidden (sold out), style the remaining text */
.cart-widget font[color="red"] {
  font-family: var(--font-sans) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.15em !important;
  color: var(--color-text-light) !important;
}
/* ColorMe option table (injected via <style>) override */
.cart-widget .colorme-option-box {
  width: 100% !important;
}
.cart-widget .colorme-option-tbl {
  width: 100% !important;
  border-top: 1px solid var(--color-divider) !important;
  margin-bottom: 12px !important;
}
.cart-widget .colorme-option-tbl tr {
  border-bottom: 1px solid var(--color-divider) !important;
}
.cart-widget .colorme-option-tbl th {
  background: var(--color-bg) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  color: var(--color-text-light) !important;
  padding: 8px 12px !important;
  border-right: none !important;
}
.cart-widget .colorme-option-tbl td {
  font-family: var(--font-jp) !important;
  font-size: 0.82rem !important;
  padding: 8px 10px !important;
  border-right: none !important;
}
/* Hidden form fields */
.cart-widget .cartjs_product_info {
  display: none;
}
/*
   ─── Smartphone cartjs overrides ───
   スマホ版は PC版とクラス名が異なる:
     article.cartjs_box / form.cartjs_form / div.cartjs_block
     table.cartjs_dtl_tbl / tr.cartjs_product_num / tr.cartjs_option
     div.cartjs_buy / input.cartjs_btn
*/
/* Outer box: remove default borders */
.cart-widget article.cartjs_box {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
/* Inner block padding reset
   ※カラーミーは <div class="cartjs_block" style="padding:10px;"> のように
   インラインスタイルを付けてくる。!important で確実に上書き。
   セレクタを少し具体化して特異性を上げる */
.cart-widget .cartjs_block,
.cart-widget article.cartjs_box .cartjs_block,
.cart-widget form.cartjs_form .cartjs_block,
.cart-widget div.cartjs_block[style] {
  padding: 0 !important;
}
/* Table reset */
.cart-widget .cartjs_dtl_tbl {
  width: 100% !important;
  border-spacing: 0 !important;
  border-collapse: collapse !important;
  margin-bottom: 0 !important;
}
/* バリエーションがある場合のみ下マージンを付ける */
.cart-widget .cartjs_dtl_tbl:has(.cartjs_option) {
  margin-bottom: 12px !important;
}
/* 「購入数」row: hide everywhere (replaced by custom +/- selector via JS) */
.cart-widget .cartjs_product_num {
  display: none !important;
}
/* PC版: cartjs_product_table はオプション行があれば表示する（数量行は .cartjs_product_num で個別非表示） */
.cart-widget .cartjs_product_table {
  margin: 0 !important;
  padding: 0 !important;
}
.cart-widget .cartjs_product_table:not(:has(.cartjs_option)) {
  display: none !important;
}
/* ─── Purchase-card +/- selector (smaller variant) ─── */
/* カード用は親 .qty-selector から継承、差分のみ上書き */
.purchase-card .qty-selector--card, .cart-widget--card .qty-selector--card {
  margin-bottom: 10px;
}
.qty-selector--card .qty-btn {
  width: 34px;
  font-size: 0.95rem;
}
.qty-selector--card .qty-display {
  width: 40px;
  font-size: 0.82rem;
}
/* Option rows (バリエーション): label as small-caps, select full-width */
.cart-widget .cartjs_option th {
  background: none !important;
  border: none !important;
  padding: 8px 0 4px !important;
  font-family: var(--font-sans) !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  color: var(--color-text-light) !important;
  width: auto !important;
  display: block !important;
}
.cart-widget .cartjs_option td {
  padding: 0 0 10px !important;
  width: 100% !important;
  display: block !important;
}
.cart-widget .cartjs_option select {
  width: 100% !important;
  height: 42px !important;
  padding: 0 36px 0 12px !important;
  border: 1px solid var(--color-divider) !important;
  border-radius: 4px !important;
  background-color: var(--color-white) !important;
  font-family: var(--font-jp) !important;
  font-size: 0.82rem !important;
  color: var(--color-text) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6560' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  cursor: pointer !important;
  transition: border-color 0.3s !important;
  white-space: normal !important;
}
.cart-widget .cartjs_option select:focus {
  outline: none !important;
  border-color: var(--color-accent) !important;
}
/* Submit button container */
.cart-widget .cartjs_buy {
  margin: 0 !important;
  padding: 0 !important;
}
.cart-widget .cartjs_buy p {
  margin: 0 !important;
  padding: 0 !important;
}
/* Submit button: override orange gradient inline styles */
.cart-widget .cartjs_btn {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 48px !important;
  padding: 14px 20px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 4px !important;
  background: var(--color-dark) !important;
  background-color: var(--color-dark) !important;
  background-image: none !important;
  color: var(--color-white) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  text-align: center !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 1.4 !important;
}
.cart-widget .cartjs_btn:hover {
  background: var(--color-accent) !important;
  background-color: var(--color-accent) !important;
}
/* Sold out 表示 */
form[name="product_form"]:not(:has(.cartjs_cart_in, .cartjs_buy))::before {
  content: "SOLD OUT";
  display: inline-block;
  color: #BB4477;
  margin: 8px auto 16px 0 !important;
  font-family: -apple-system, "BlinkMacSystemFont", Hiragino Kaku Gothic Pro, メイリオ, Meiryo, system-ui, sans-serif;
  text-align: center;
  font-size: 15px;
  line-height: 19px;
}
/* BRAND */
.brand-section {
  background: var(--color-white);
  padding: 40px;
}
.brand-content {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 50px;
  align-items: start;
}
.brand-logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.brand-logo-area img {
  width: 120px;
  height: auto;
}
.brand-name-main {
  font-family: var(--font-en);
  font-size: 1.05rem;
  font-weight: 400;
  text-align: center;
  margin: 0.5em
}
.brand-name-sub {
  font-size: 0.75rem;
  color: var(--color-text-light);
  text-align: center;
  font-weight: 300;
}
.brand-text p {
  font-size: 0.88rem;
  line-height: 2;
  color: var(--color-text-light);
  font-weight: 300;
  margin-bottom: 14px;
}
.viewgiftwrap, .brand-link, .delivery-feature a {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  transition: color 0.3s;
}
/* delivery-featureのみ */
.delivery-feature a {
  border: 1px solid var(--color-divider);
  padding: 0.25em 1em 0.1em 0.6em;
  border-radius: 4px;
}
.viewgiftwrap {
  display: flex;
}
.viewgiftwrap:hover, .brand-link:hover, .delivery-feature a:hover {
  color: var(--color-text);
}
/* delivery-featureのみ */
.delivery-feature a:hover {
  border: 0.8px solid var(--color-accent);
}
.viewgiftwrap::after, .brand-link::after, .delivery-feature a::after {
  content: '\2192';
  transition: transform 0.3s;
}
.viewgiftwrap:hover::after, .brand-link:hover::after, .delivery-feature a:hover::after {
  transform: translateX(4px);
}
/* SPEC / INFORMATION */
.spec-section {
  background: var(--color-bg);
}
.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.spec-block h3 {
  font-family: var(--font-en);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--color-text);
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-divider);
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
}
.spec-table tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.spec-table th {
  font-family: var(--font-jp);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-text-light);
  padding: 11px 0;
  text-align: left;
  width: 110px;
  vertical-align: top;
}
.spec-table td {
  font-size: 0.82rem;
  color: var(--color-text);
  padding: 11px 0;
  font-weight: 300;
}
.delivery-feature {
  display: flex;
  gap: 14px;
  align-items: start;
  margin-bottom: 36px;
}
.delivery-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: rgba(139, 115, 85, 0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.delivery-feature h4 {
  font-family: var(--font-jp);
  font-size: 0.86rem;
  font-weight: 400;
  margin-bottom: 3px;
}
.delivery-feature p {
  font-size: 0.78rem;
  color: var(--color-text-light);
  font-weight: 300;
  line-height: 1.7;
}
/* .delivery-feature a → 上の .brand-link / .viewgiftwrap グループに統合済み */
/* VOICE (Customer Reviews) */
.voice-section {
  background: var(--color-white);
  padding: 90px 0;
}
/* Voice: empty state */
.voice-empty {
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}
.voice-empty p {
  font-size: 0.86rem;
  color: var(--color-text-light);
  font-weight: 300;
  line-height: 2;
  margin-bottom: 22px;
}
.btn-voice {
  display: inline-block;
  padding: 12px 36px;
  border: 1px solid var(--color-divider);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s;
}
.btn-voice:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
/* Voice: review cards */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 900px;
  margin: 0 auto;
}
.voice-card {
  background: var(--color-bg);
  border-radius: 8px;
  padding: 28px 32px;
  position: relative;
}
.voice-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.voice-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-divider);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--color-text-light);
  flex-shrink: 0;
}
.voice-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.voice-card-name {
  font-family: var(--font-jp);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-text);
}
.voice-card-date {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  color: var(--color-text-light);
  margin-top: 2px;
}
.voice-card-stars {
  color: var(--color-accent);
  font-size: 0.85rem;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.voice-card-text {
  font-size: 0.84rem;
  line-height: 1.9;
  color: var(--color-text-light);
  font-weight: 300;
}
.voice-more {
  text-align: center;
  margin-top: 36px;
}
/* RELATED PRODUCTS */
/* ═══ PRODUCT CARD (統一サムネイルカード) ═══ */
.product-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.product-card {
  background: var(--color-white);
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.product-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}
.product-card .image {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.product-card .image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.product-card-body {
  padding: 14px 16px;
}
.product-card-body .name {
  font-family: var(--font-en);
  font-size: 0.85rem;
  font-weight: 400;
  margin-bottom: 2px;
}
.product-card-body .brand {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--color-text-light);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.product-card-body .price {
  font-family: var(--font-en);
  font-size: 0.78rem;
  color: var(--color-text);
}
.related-section {
  background: var(--color-bg);
  padding: 90px 0;
}
/* related-grid/card definitions removed — now using .product-card / .product-card-grid */
/*  purchase-card-link — cross-link button in purchase cards  */
.purchase-card-link {
  display: inline-block;
  padding: 6px 18px;
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  color: var(--color-accent);
  font-family: var(--font-jp);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all 0.3s;
  margin-right: 8px;
}
.purchase-card-link:hover {
  background: var(--color-accent);
  color: var(--color-white);
}
/*  GIFT LINK  */
.gift-link {
  display: block;
  width: 100%;
  border: 1px solid #c8a96e;
  border-radius: 4px;
  padding: 6px 14px;
  color: #8a6a30;
  font-size: 0.78rem;
  text-decoration: none;
  letter-spacing: 0.04em;
  margin: 8px auto 8px 0;
  transition: background 0.2s, color 0.2s;
}
.gift-link:hover {
  background: #c8a96e;
  color: #fff;
}
.gift-link::after {
  content: '\2192';
  transition: transform 0.3s;
}
.gift-link:hover::after {
  transform: translateX(4px);
}
/* ==============================
   PURCHASE SUBSECTION (mags.html etc.)
   ============================== */
.purchase-subsection {
  margin-bottom: 50px;
}
.purchase-type-title {
  font-family: var(--font-en);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
/* ==============================
   SAMPLE KIT
   ============================== */
.sample-kit {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 30px;
  align-items: start;
  padding: 30px;
  background: var(--color-bg);
  border-radius: 4px;
}
.sample-kit-image {
  width: 100%;
}
.sample-kit-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.sample-kit-info h4 {
  font-family: var(--font-en);
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 4px;
}
.sample-kit-subtitle {
  font-size: 0.82rem;
  color: var(--color-text-light);
  margin-bottom: 12px;
}
.sample-kit-desc {
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--color-text);
  font-weight: 300;
  margin-bottom: 14px;
}
.sample-kit-brand {
  font-family: var(--font-en);
  font-size: 0.78rem;
  color: var(--color-text-light);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.sample-kit-pricing {
  font-size: 0.82rem;
  color: var(--color-text-light);
  font-weight: 300;
  margin-bottom: 2px;
}
.sample-kit-price {
  font-family: var(--font-en);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 14px;
}
/* ==============================
   FAQ
   ============================== */
.faq-container {
  max-width: 800px;
  margin: 0 auto;
}
.faq-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
}
.faq-item:first-child {
  padding-top: 0;
}
.faq-question {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 10px;
}
.faq-answer {
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--color-text-light);
}
.faq-answer a {
  margin-left: 8px;
}
/* ==============================
   DELIVERY GRID (mags.html etc.)
   ============================== */
.delivery-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 800px;
  margin: 0 auto;
}
.delivery-highlight {
  font-family: var(--font-en);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 8px;
}
.delivery-desc {
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--color-text-light);
  margin-bottom: 12px;
}
/* ==============================
   COLOR SWATCH GRID (golondrina.html etc.)
   ============================== */
.color-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.color-swatch img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  transition: transform 0.2s;
}
.color-swatch img:hover {
  transform: scale(1.05);
}
.color-swatch span {
  display: block;
  font-family: var(--font-en);
  font-size: 0.68rem;
  color: var(--color-text-light);
  letter-spacing: 0.04em;
  margin-top: 6px;
  line-height: 1.3;
}
/* ==============================
   GALLERY THUMB ARROWS
   ============================== */
.gallery-thumbs-prev, .gallery-thumbs-next {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--color-text-light);
  transition: background 0.2s;
}
.gallery-thumbs-prev:hover, .gallery-thumbs-next:hover {
  background: var(--color-bg);
}
/* RESPONSIVE (max-width: 900px) */
@media (max-width:900px) {
  .product-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .product-gallery {
    max-height: 70vh;
  }
  .product-info {
    padding: 28px 20px 40px;
  }
  .product-title-en {
    font-size: 1.8rem;
  }
  .product-price {
    font-size: 1.6rem;
  }
  .gallery-thumbs-scroll {
    max-width: 280px;
  }
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
  }
  section {
    padding: 60px 0;
  }
  .container, .container-wide {
    padding: 0 16px;
  }
  .section-title-en {
    font-size: 1.5rem;
  }
  .section-header {
    margin-bottom: 40px;
  }
  .feature-block {
    grid-template-columns: 1fr;
  }
  .feature-block:nth-child(even) .feature-image {
    order: 1;
  }
  .feature-block:nth-child(even) .feature-text {
    order: 2;
  }
  .feature-image {
    min-height: 220px;
  }
  .feature-image-double {
    min-height: 180px;
    gap: 1px;
  }
  .feature-text {
    padding: 28px 20px;
  }
  .feature-block1 .feature-text {
    padding: 24px 20px;
  }
  .feature-block1 .feature-image {
    min-height: inherit;
  }
  .feature-title {
    font-size: 1rem;
  }
  .feature-desc {
    font-size: 0.82rem;
  }
  .purchase-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .purchase-card-img {
    height: auto;
  }
  .spec-grid {
    grid-template-columns: 1fr;
  }
  .voice-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sample-kit {
    grid-template-columns: 1fr;
  }
  .delivery-features {
    grid-template-columns: 1fr;
  }
  .color-swatch-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
  }
  .spec-section {
    padding: 24px;
  }
  .related-section {
    padding: 60px 24px 8px;
  }
}
/* RESPONSIVE (max-width: 480px) */
@media (max-width:480px) {
  .feature-label {
    margin-bottom: 12px;
  }
  .product-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .product-gallery {
    max-height: 55vh;
  }
  .product-info {
    padding: 20px 16px 32px;
  }
  .product-title-en {
    font-size: 1.4rem;
  }
  .product-title-jp {
    font-size: 0.82rem;
    margin-bottom: 18px;
  }
  .product-meta-row {
    font-size: 0.7rem;
  }
  .product-price {
    font-size: 1.3rem;
  }
  .product-price-tax {
    font-size: 0.62rem;
  }
  .product-actions {
    flex-direction: column;
    gap: 10px;
  }
  .btn-cart {
    width: 100%;
    height: 44px;
    font-size: 0.7rem;
    padding: 0.8em
  }
  .product-intro {
    margin-top: 20px;
    padding-top: 18px;
  }
  .product-intro p {
    font-size: 0.82rem;
  }
  .product-intro-subtitle {
    font-size: 0.65rem;
  }
  .gallery-thumbs-wrapper {
    bottom: 12px;
    padding: 0 8px;
  }
  .gallery-thumbs-scroll {
    max-width: 220px;
  }
  .gallery-thumb {
    width: 42px;
    height: 42px;
  }
  .gallery-thumbs-arrow {
    width: 26px;
    height: 26px;
    font-size: 0.8rem;
  }
  .gallery-badge {
    top: 16px;
    left: 16px;
    font-size: 0.55rem;
    padding: 4px 10px;
  }
  section {
    padding: 40px 0;
  }
  .purchase-section {
    padding: 24px 18px;
  }
  .container, .container-wide {
    padding: 0;
  }
  .section-number {
    font-size: 2rem;
  }
  .section-title-en {
    font-size: 1.2rem;
  }
  .section-title-jp {
    font-size: 0.72rem;
  }
  .section-header {
    margin-bottom: 28px;
  }
  .feature-text {
    padding: 20px 16px;
  }
  .feature-title {
    font-size: 0.92rem;
  }
  .feature-desc {
    font-size: 0.78rem;
  }
  .brand-section {
    padding: 24px;
  }
  .spec-section {
    padding: 60p 24px 40px;
  }
  .brand-content {
    margin-top: 100px;
    grid-template-columns: 1fr;
  }
  .brand-name-main, .brand-name-sub {
    display: none
  }
  .purchase-cards {
    grid-template-columns: 1fr;
  }
  .purchase-card-img {
    height: auto
  }
  .purchase-card-body {
    padding: 20px 18px 22px;
  }
  .purchase-card-name {
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: 4px;
  }
  .purchase-card-sub {
    font-size: 0.76rem;
    margin-bottom: 12px;
  }
  .purchase-card-meta {
    font-size: 0.7rem;
    line-height: 1.7;
    margin-bottom: 12px;
  }
  .purchase-card-price {
    font-size: 1.4rem;
    margin-bottom: 4px;
  }
  .purchase-card-price small {
    font-size: 0.62rem;
    margin-left: 4px;
  }
  .purchase-card-note {
    font-size: 0.7rem;
    line-height: 1.6;
    margin-top: 10px;
  }
  .spec-table th, .spec-table td {
    padding: 8px 10px;
    font-size: 0.75rem;
  }
  .voice-section {
    padding: 60px 18px;
  }
  .voice-grid {
    grid-template-columns: 1fr;
  }
  .voice-card-text {
    font-size: 0.8rem;
  }
  /* .related-cards / .related-grid removed */
  .product-card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .color-swatch-grid {
    grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    gap: 8px;
  }
  .color-swatch span {
    font-size: 0.6rem;
  }
  .sample-kit {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .faq-question {
    font-size: 0.88rem;
  }
  .faq-answer {
    font-size: 0.8rem;
  }
  .purchase-type-title {
    font-size: 0.9rem;
  }
}
/* =============================================
   Q&A SECTION (Pattern D)
   ============================================= */
.qa-section {
  background: var(--color-white);
  padding: 80px 60px;
}
.qa-list {
  max-width: 720px;
  margin: 0 auto;
}
.qa-item {
  padding: 28px 0;
  border-bottom: 1px solid var(--color-divider);
}
.qa-item:first-child {
  padding-top: 0;
}
.qa-item:last-child {
  border-bottom: none;
}
.qa-q {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 12px;
  line-height: 1.6;
}
.qa-a {
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--color-text-light);
}
/* Q&A responsive */
@media (max-width: 900px) {
  .qa-section {
    padding: 60px 30px;
  }
}
@media (max-width: 768px) {
  .qa-section {
    padding: 60px 20px;
  }
}
@media (max-width: 480px) {
  .qa-q {
    font-size: 0.88rem;
  }
  .qa-a {
    font-size: 0.8rem;
  }
}
/* =============================================
   スマホ版限定: purchase-card 内の
   数量セレクタ + カートに入れるボタンを横並び
   （PC版は変更しない）
   実際のDOM構造（カラーミー生成）：
     .cart-widget
       > article.cartjs_box
         > form.cartjs_form
           > div.cartjs_block          ← ここが flex parent
             > table.cartjs_dtl_tbl    （オプションなしなら非表示）
             > div.qty-selector--card  （webo-product.js が挿入）
             > div.cartjs_buy
               > p
                 > input.cartjs_btn
   ============================================= */
@media (max-width: 480px) {
  /* cartjs_block を flex parent に：qty-selector と cartjs_buy を横並び
     padding を 0 にして (-) ボタンが左端にきっちり揃うように
     row-gap: 0 で縦方向の間延びを防ぎ、column-gap: 14px で
     (+) と「カートに入れる」の間だけ広げる
     ※特異性を最大化してインラインスタイルを確実に殺す */
  .purchase-card .cart-widget .cartjs_block,
  .purchase-card .cart-widget article.cartjs_box form.cartjs_form div.cartjs_block,
  .purchase-card .cart-widget div.cartjs_block[style] {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    row-gap: 0 !important;
    column-gap: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* オプションなしの場合は cartjs_dtl_tbl を非表示にして空行を消す */
  .purchase-card .cart-widget .cartjs_block .cartjs_dtl_tbl:not(:has(.cartjs_option)) {
    display: none !important;
  }
  /* article.cartjs_box の枠線も削除（左端揃えのため） */
  .purchase-card .cart-widget article.cartjs_box {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* form もマージンリセット */
  .purchase-card .cart-widget .cartjs_form {
    margin: 0 !important;
    padding: 0 !important;
  }
  /* オプションテーブルは（あれば）上に1行フル幅で */
  .purchase-card .cart-widget .cartjs_block .cartjs_dtl_tbl {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }
  /* qty-selector は左、自然幅。cartjs ボタンと高さを揃える */
  .purchase-card .cart-widget .qty-selector--card {
    flex: 0 0 auto !important;
    height: 48px !important;
    margin-bottom: 0 !important;
  }
  /* +/- ボタン幅を約10%小さく（34px → 31px、スマホのみ） */
  .purchase-card .cart-widget .qty-selector--card .qty-btn {
    width: 31px;
  }
  /* cartjs_buy が残りの幅を占有 */
  .purchase-card .cart-widget .cartjs_block .cartjs_buy {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .purchase-card .cart-widget .cartjs_block .cartjs_buy p {
    margin: 0 !important;
    padding: 0 !important;
  }
  /* カートに入れるボタンを qty-selector と同じ高さに */
  .purchase-card .cart-widget .cartjs_btn {
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 12px !important;
    width: 100% !important;
    margin: 0 !important;
  }
}