:root {
  --mns-page-gutter: clamp(24px, 5vw, 72px);
  --mns-container: 1280px;
  --mns-font-heading: "Archivo", "Noto Sans JP", sans-serif;
  --mns-font-body: "Noto Sans JP", Arial, sans-serif;
  --mns-header-height: clamp(56px, 5.2svh, 72px);
  --mns-announcement-height: clamp(38px, 4.5svh, 46px);
  --mns-header-total-height: var(--mns-header-height);
}

.home {
  color: #2E2F2F;
  font-family: var(--mns-font-body);
  line-height: 1.6;
}

/* Header chrome lives in header-parity.css (site-wide). */

/*
 * PC / 平板：73.6svh 锁定高度；背景 cover + 字段焦点裁切。
 * 手机：85svh。
 * !important 覆盖 theme.css 遗留 80svh / 72svh。
 */
.home .mns-home-hero {
  --mns-home-hero-vh: 73.6vh;
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  height: var(--mns-home-hero-vh) !important;
  min-height: var(--mns-home-hero-vh) !important;
  max-height: var(--mns-home-hero-vh) !important;
  overflow: hidden;
  transform: none;
  -webkit-transform: none;
  background: #f7f4ed;
  color: #2E2F2F;
}

@supports (height: 100svh) {
  .home .mns-home-hero {
    --mns-home-hero-vh: 73.6svh;
  }
}

@supports (overflow: clip) {
  .home .mns-home-hero {
    overflow: clip;
  }
}

@media (max-width: 767px) {
  .home .mns-home-hero {
    --mns-home-hero-vh: 85vh;
  }

  @supports (height: 100svh) {
    .home .mns-home-hero {
      --mns-home-hero-vh: 85svh;
    }
  }
}

.home .mns-home-hero__accent {
  display: inline-flex;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.64);
  color: #343733;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
}

.home .mns-home-hero__category {
  margin: 1.25rem 0 0;
  color: #5f625f;
  font-family: var(--mns-font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.55;
  text-transform: uppercase;
}

.home .mns-home-hero__product {
  margin: 0.75rem 0 0;
  color: #343733;
  font-family: var(--mns-font-heading);
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.home .mns-home-hero__title,
.home .mns-home-hero h2 {
  max-width: 760px;
  margin: 1rem 0 0;
  color: #2E2F2F;
  font-family: var(--mns-font-heading);
  font-size: clamp(2rem, 2.35vw, 2.5rem);
  font-weight: 600;
  line-height: 1.16;
}

/*
 * Copy rail: layout boxes (h2 / p / clip wrappers) stay put.
 * Inner .copy-rise / .copy-fade use ONE compositor animation (not GSAP per-frame
 * transform writes). Tiny rotate keeps GPU bilinear filtering so glyphs do not crawl.
 * Do not rewrite transform with a rest class — leave animation-fill: both.
 */
.home .mns-home-hero__copy-clip {
  --i: 0;
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow: visible;
}

.home .mns-home-hero__title .mns-home-hero__copy-clip {
  width: auto;
}

.home .mns-home-hero__slide--centerText .mns-home-hero__copy-clip {
  margin-inline: auto;
}

.home .mns-home-hero__copy-rise,
.home .mns-home-hero__copy-fade {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  transition: none;
  will-change: transform, opacity;
}

.home .mns-home-hero__copy-rise {
  display: block;
}

.home .mns-home-hero__slide.is-active [data-hero-copy] .mns-home-hero__copy-rise,
.home .mns-home-hero__slide.is-active [data-hero-copy] .mns-home-hero__copy-fade {
  opacity: 0;
  transform: translate3d(0, 24px, 0) rotate(0.001deg);
}

.home .mns-home-hero__slide.is-active [data-hero-product-motion] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

.home .mns-home-hero__slide.is-active.is-copy-playing [data-hero-copy] .mns-home-hero__copy-rise,
.home .mns-home-hero__slide.is-active.is-copy-playing [data-hero-copy] .mns-home-hero__copy-fade {
  animation: mns-hero-copy-rise 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) both;
  animation-delay: calc(var(--i, 0) * 0.1s);
}

.home .mns-home-hero__slide.is-active.is-copy-playing [data-hero-product-motion] {
  animation: mns-hero-product-rise 0.55s cubic-bezier(0.215, 0.61, 0.355, 1) both;
  animation-delay: calc(var(--mns-hero-product-i, 0) * 0.06s);
}

.home .mns-home-hero__slide.is-active.is-copy-ready [data-hero-copy] .mns-home-hero__copy-rise,
.home .mns-home-hero__slide.is-active.is-copy-ready [data-hero-copy] .mns-home-hero__copy-fade {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0.001deg);
  animation: none;
}

.home .mns-home-hero__slide.is-active.is-copy-ready [data-hero-product-motion] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  animation: none;
}

@keyframes mns-hero-copy-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0) rotate(0.001deg);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0.001deg);
  }
}

@keyframes mns-hero-product-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home .mns-home-hero__slide.is-active [data-hero-copy] .mns-home-hero__copy-rise,
  .home .mns-home-hero__slide.is-active [data-hero-copy] .mns-home-hero__copy-fade {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0.001deg);
    animation: none;
  }

  .home .mns-home-hero__slide.is-active [data-hero-product-motion] {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation: none;
  }
}

@media (scripting: none) {
  .home .mns-home-hero__slide.is-active [data-hero-copy] .mns-home-hero__copy-rise,
  .home .mns-home-hero__slide.is-active [data-hero-copy] .mns-home-hero__copy-fade {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0.001deg);
    animation: none;
  }

  .home .mns-home-hero__slide.is-active [data-hero-product-motion] {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation: none;
  }
}

.home .mns-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.home .mns-home-hero__cta {
  display: inline-flex;
  min-height: 3rem;
  min-width: clamp(7.5rem, 9vw, 9.25rem);
  align-items: center;
  justify-content: center;
  padding: 0 clamp(1rem, 1.5vw, 1.375rem);
  border: 0;
  border-radius: 4px;
  background: #2E2F2F;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 14px 34px rgba(31, 37, 32, 0.16);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.home .mns-home-hero__cta:hover {
  background: #2d302d;
  color: #fff;
}

.home .mns-home-hero__cta--light,
.home .mns-home-hero__cta--white {
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.92);
  color: #2E2F2F;
  box-shadow: 0 14px 34px rgba(31, 37, 32, 0.12);
}

.home .mns-home-hero__cta--light:hover,
.home .mns-home-hero__cta--white:hover {
  background: #fff;
  color: #2E2F2F;
}

.home .mns-home-hero__cta--gray,
.home .mns-home-hero__cta--neutral {
  background: #6f7370;
  color: #fff;
}

.home .mns-home-hero__cta--outline {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.home .mns-home-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.home .mns-home-hero__tags span {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  color: #343733;
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(126, 89, 37, 0.08);
}

/* textTone=dark → light text on dark photography */
.home .mns-home-hero__slide.is-tone-dark {
  color: #fff;
}

.home .mns-home-hero__slide.is-tone-dark .mns-home-hero__accent {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.82);
}

.home .mns-home-hero__slide.is-tone-dark .mns-home-hero__category {
  color: rgba(255, 255, 255, 0.76);
}

.home .mns-home-hero__slide.is-tone-dark .mns-home-hero__product {
  color: rgba(255, 255, 255, 0.88);
}

.home .mns-home-hero__slide.is-tone-dark .mns-home-hero__title,
.home .mns-home-hero__slide.is-tone-dark h2 {
  color: #fff;
}

.home .mns-home-hero__slide.is-tone-dark .mns-home-hero__tags span {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.82);
  box-shadow: none;
}

/* 自定义字色（SCF text_color，与 Bento textColor 同源） */
.home .mns-home-hero__content[data-custom-color="1"] .mns-home-hero__accent,
.home .mns-home-hero__content[data-custom-color="1"] .mns-home-hero__category,
.home .mns-home-hero__content[data-custom-color="1"] .mns-home-hero__product,
.home .mns-home-hero__content[data-custom-color="1"] .mns-home-hero__title,
.home .mns-home-hero__content[data-custom-color="1"] h2 {
  color: inherit;
}
.home .mns-home-hero__content[data-custom-color="1"] .mns-home-hero__accent {
  border-color: color-mix(in srgb, currentColor 28%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.home .mns-home-hero__content[data-custom-color="1"] .mns-home-hero__category,
.home .mns-home-hero__content[data-custom-color="1"] .mns-home-hero__product {
  opacity: 0.9;
}

/*
 * MV 文案可读性（与 Bento textLayer legibility 同源）：
 * plain | shadow（轻光晕 + 反白时描边）| localScrim | chip
 */
.home .mns-home-hero__content[data-legibility="localScrim"],
.home .mns-home-hero__content[data-legibility="chip"] {
  position: relative;
  isolation: isolate;
}
.home .mns-home-hero__content[data-legibility="localScrim"]::before,
.home .mns-home-hero__content[data-legibility="chip"]::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 4px;
}

/* 深色字（text_tone=light）+ 轻光晕：浅色光晕 */
.home .mns-home-hero__slide:not(.is-tone-dark) .mns-home-hero__content[data-legibility="shadow"] .mns-home-hero__title,
.home .mns-home-hero__slide:not(.is-tone-dark) .mns-home-hero__content[data-legibility="shadow"] h2,
.home .mns-home-hero__slide:not(.is-tone-dark) .mns-home-hero__content[data-legibility="shadow"] .mns-home-hero__product,
.home .mns-home-hero__slide:not(.is-tone-dark) .mns-home-hero__content[data-legibility="shadow"] .mns-home-hero__category {
  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.72),
    2px 2px 3px rgba(255, 255, 255, 0.38);
}

/* 浅色字（text_tone=dark）+ 轻光晕：深色描边 + 阴影（与 Bento inverse+shadow 一致） */
.home .mns-home-hero__slide.is-tone-dark .mns-home-hero__content[data-legibility="shadow"] .mns-home-hero__title,
.home .mns-home-hero__slide.is-tone-dark .mns-home-hero__content[data-legibility="shadow"] h2,
.home .mns-home-hero__slide.is-tone-dark .mns-home-hero__content[data-legibility="shadow"] .mns-home-hero__product,
.home .mns-home-hero__slide.is-tone-dark .mns-home-hero__content[data-legibility="shadow"] .mns-home-hero__category {
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.5);
  paint-order: stroke fill;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.8),
    0 5px 16px rgba(0, 0, 0, 0.5);
}

.home .mns-home-hero__content[data-legibility="localScrim"] {
  padding: 0.35em 0.25em;
}
.home .mns-home-hero__content[data-legibility="localScrim"]::before {
  inset: -0.55em -0.75em;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.32) 52%,
    rgba(255, 255, 255, 0) 78%
  );
}
.home .mns-home-hero__slide.is-tone-dark .mns-home-hero__content[data-legibility="localScrim"]::before {
  background: radial-gradient(
    ellipse at center,
    rgba(12, 12, 12, 0.58) 0%,
    rgba(12, 12, 12, 0.24) 52%,
    rgba(12, 12, 12, 0) 78%
  );
}

.home .mns-home-hero__content[data-legibility="chip"] {
  padding: 0.75em 1em;
  border-radius: 4px;
  background: color-mix(in srgb, #f4f4f2 40%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(46, 47, 47, 0.04);
}
.home .mns-home-hero__slide.is-tone-dark .mns-home-hero__content[data-legibility="chip"] {
  background: color-mix(in srgb, #2e2f2f 32%, transparent);
  box-shadow: none;
}
.home .mns-home-hero__content[data-legibility="chip"]::before {
  display: none;
}

.home .mns-blog-showcase-button {
  white-space: nowrap;
}

.home .mns-blog-guide-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home .mns-home-hero__content,
.home .mns-new-products-inner,
.home .mns-product-classifications-inner,
.home .mns-blog-showcase-inner {
  width: min(100%, 1280px);
  margin-inline: auto;
}

.home .mns-home-hero__content,
.home .mns-new-products-title,
.home .mns-product-classifications-title,
.home .mns-blog-showcase-heading h2,
.home .mns-product-card__name,
.home .mns-classification-card-name,
.home .mns-news-title,
.home .mns-blog-guide-title {
  font-family: var(--mns-font-heading);
}

/*
 * MV text rail = 新商品 inner (see .mns-new-products-section pad + .mns-new-products-inner width).
 * Logo (header__inner) uses the same width formula so left edges lock together.
 */
.home .mns-home-hero__frame {
  box-sizing: border-box;
  width: min(100% - (var(--mns-page-gutter) * 2), var(--mns-container, 1280px));
  max-width: none;
  margin-inline: auto;
  /* hero-inset = full chrome so copy clears the transparent bar over MV */
  padding-top: calc(var(--mns-header-hero-inset, var(--mns-header-total-height)) + clamp(16px, 3svh, 28px));
  padding-right: 0;
  padding-left: 0;
}

.home .mns-home-hero__content {
  margin: 0;
  width: auto;
  max-width: min(100%, 660px);
}

/* Explicit: new-products inner is the reference rail */
.home .mns-new-products-inner {
  box-sizing: border-box;
  width: min(100%, var(--mns-container, 1280px));
  margin-inline: auto;
}

.home .mns-home-hero__slide--productFocus .mns-home-hero__content,
.home .mns-home-hero__slide--productCenter .mns-home-hero__content { max-width: 520px; }
.home .mns-home-hero__slide--productRight .mns-home-hero__content { max-width: 480px; }
.home .mns-home-hero__slide--rightText .mns-home-hero__content { max-width: 620px; }
.home .mns-home-hero__slide--centerText .mns-home-hero__content { max-width: 760px; }

/*
 * Product overlay — absolute cluster, no rotation.
 * Few items: wider spread; more items: tighter bunch.
 * GSAP: [data-hero-product][data-index]
 */
.home .mns-home-hero__products {
  --mns-hero-product-count: 1;
  /* Base step for formula path (5–6 items); presets handle 2–4 */
  --mns-hero-cluster-x: clamp(28px, calc(96px - (var(--mns-hero-product-count) - 1) * 12px), 96px);
  --mns-hero-cluster-y: clamp(10px, calc(36px - (var(--mns-hero-product-count) - 1) * 4px), 36px);
  --mns-hero-cluster-scale-step: 0.035;
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  box-sizing: border-box;
  padding:
    calc(var(--mns-header-hero-inset, var(--mns-header-total-height, 72px)) + 20px)
    var(--mns-page-gutter, clamp(24px, 5vw, 72px))
    clamp(72px, 10vh, 120px);
}

.home .mns-home-hero__product-layer {
  --mns-hero-product-i: 0;
  --mns-hero-fan: calc(var(--mns-hero-product-i) - (var(--mns-hero-product-count) - 1) * 0.5);
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(
    40vw,
    calc(368px - (var(--mns-hero-product-count) - 1) * 28px)
  );
  max-width: 42%;
  z-index: calc(20 - var(--mns-hero-product-i));
  /* Translate only — no rotate */
  transform:
    translate(-50%, -50%)
    translate(
      calc(var(--mns-hero-fan) * var(--mns-hero-cluster-x)),
      calc(var(--mns-hero-product-i) * var(--mns-hero-cluster-y) * 0.35)
    )
    scale(calc(1 - var(--mns-hero-product-i) * var(--mns-hero-cluster-scale-step)));
  transform-origin: center 70%;
}

/*
 * Shrink-wrap the product bitmap so LCD % coords track the visible cutout
 * at every viewport. Do NOT use width:100% + max-height + object-fit:contain —
 * that letterboxes inside a wider box and drifts the digit overlay.
 */
.home .mns-home-hero__product-motion {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.home .mns-home-hero__product-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(53vh, 480px);
  filter: drop-shadow(0 20px 44px rgba(21, 23, 22, 0.2));
  user-select: none;
}

/*
 * Generic LCD digit overlay — absolute on product cutout.
 * left/top/width % come from SCF (px on product canvas → %).
 * Containing block = product-motion (= rendered image box).
 */
.home .mns-home-hero__lcd {
  --mns-hero-lcd-left: 32.4%;
  --mns-hero-lcd-top: 53.6%;
  --mns-hero-lcd-width: 33.7%;
  position: absolute;
  left: var(--mns-hero-lcd-left);
  top: var(--mns-hero-lcd-top);
  width: var(--mns-hero-lcd-width);
  z-index: 2;
  pointer-events: none;
  overflow: visible;
  line-height: 0;
}

.home .mns-home-hero__lcd-digit {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left top;
  opacity: 0;
  visibility: hidden;
  user-select: none;
}

.home .mns-home-hero__lcd-digit.is-active {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .home .mns-home-hero__product-motion,
  .home .mns-home-hero__lcd,
  .home .mns-home-hero__copy-rise,
  .home .mns-home-hero__copy-fade {
    transition: none !important;
    animation: none !important;
  }
}

/* 2–4 items: wider offsets when few, still clustered (no rotation) */
.home .mns-home-hero__products[data-count="2"] .mns-home-hero__product-layer[data-index="0"] {
  transform: translate(-50%, -50%) translate(-14%, 2%) scale(1);
  z-index: 22;
}
.home .mns-home-hero__products[data-count="2"] .mns-home-hero__product-layer[data-index="1"] {
  transform: translate(-50%, -50%) translate(16%, 0) scale(0.96);
  z-index: 21;
}

.home .mns-home-hero__products[data-count="3"] .mns-home-hero__product-layer[data-index="0"] {
  transform: translate(-50%, -50%) translate(0, 3%) scale(1.02);
  z-index: 23;
}
.home .mns-home-hero__products[data-count="3"] .mns-home-hero__product-layer[data-index="1"] {
  transform: translate(-50%, -50%) translate(-20%, -2%) scale(0.94);
  z-index: 21;
}
.home .mns-home-hero__products[data-count="3"] .mns-home-hero__product-layer[data-index="2"] {
  transform: translate(-50%, -50%) translate(20%, -1%) scale(0.94);
  z-index: 22;
}

.home .mns-home-hero__products[data-count="4"] .mns-home-hero__product-layer[data-index="0"] {
  transform: translate(-50%, -50%) translate(-2%, 4%) scale(1);
  z-index: 24;
}
.home .mns-home-hero__products[data-count="4"] .mns-home-hero__product-layer[data-index="1"] {
  transform: translate(-50%, -50%) translate(-18%, -3%) scale(0.92);
  z-index: 21;
}
.home .mns-home-hero__products[data-count="4"] .mns-home-hero__product-layer[data-index="2"] {
  transform: translate(-50%, -50%) translate(16%, -2%) scale(0.93);
  z-index: 22;
}
.home .mns-home-hero__products[data-count="4"] .mns-home-hero__product-layer[data-index="3"] {
  transform: translate(-50%, -50%) translate(3%, -10%) scale(0.86);
  z-index: 20;
}

/* 产品居中：簇在画面中央，文案左下 */
.home .mns-home-hero__slide--productCenter .mns-home-hero__frame {
  align-items: flex-end;
  justify-content: flex-start;
  padding-bottom: clamp(48px, 8vh, 96px);
}

.home .mns-home-hero__slide--productCenter .mns-home-hero__products {
  /* cluster anchor stays center of full stage */
}

/* 产品右侧：簇锚点偏右，文案左 */
.home .mns-home-hero__slide--productRight .mns-home-hero__frame {
  justify-content: flex-start;
  align-items: center;
}

.home .mns-home-hero__slide--productRight .mns-home-hero__products {
  left: 38%;
  right: 0;
}

.home .mns-home-hero__slide--productRight .mns-home-hero__product-layer {
  /* Anchor slightly left of zone center so bunch sits in right half */
  left: 48%;
}

.home .mns-home-hero__slide--productRight .mns-home-hero__content {
  position: relative;
  z-index: 2;
}

/* Copy stays above products */
.home .mns-home-hero__frame {
  z-index: 2;
}

@media (max-width: 900px) {
  .home .mns-home-hero__products {
    --mns-hero-cluster-x: clamp(18px, 7vw, 40px);
    --mns-hero-cluster-y: clamp(8px, 2.5vw, 18px);
    padding-bottom: clamp(100px, 18vh, 140px);
  }

  .home .mns-home-hero__product-layer {
    width: min(48vw, 220px);
    max-width: 54%;
    top: 42%;
  }

  .home .mns-home-hero__product-image {
    max-height: min(36vh, 276px);
  }

  /* Mobile: no rotation, wider few-item spread */
  .home .mns-home-hero__products[data-count="2"] .mns-home-hero__product-layer[data-index="0"] {
    transform: translate(-50%, -50%) translate(-12%, 2%) scale(1);
  }
  .home .mns-home-hero__products[data-count="2"] .mns-home-hero__product-layer[data-index="1"] {
    transform: translate(-50%, -50%) translate(13%, 0) scale(0.95);
  }
  .home .mns-home-hero__products[data-count="3"] .mns-home-hero__product-layer[data-index="0"] {
    transform: translate(-50%, -50%) translate(0, 3%) scale(1);
  }
  .home .mns-home-hero__products[data-count="3"] .mns-home-hero__product-layer[data-index="1"] {
    transform: translate(-50%, -50%) translate(-16%, -1%) scale(0.92);
  }
  .home .mns-home-hero__products[data-count="3"] .mns-home-hero__product-layer[data-index="2"] {
    transform: translate(-50%, -50%) translate(16%, 0) scale(0.92);
  }

  .home .mns-home-hero__slide--productRight .mns-home-hero__products {
    left: 0;
    right: 0;
  }

  .home .mns-home-hero__slide--productRight .mns-home-hero__product-layer {
    left: 50%;
  }

  .home .mns-home-hero__slide--productCenter .mns-home-hero__frame,
  .home .mns-home-hero__slide--productRight .mns-home-hero__frame {
    align-items: flex-end;
    justify-content: flex-start;
  }
}

/* Home MV controls — inside Splide root (Swiper tree), overlay track */
.mns-home-hero {
  position: relative;
  overflow: hidden;
}

/*
 * Structure (Swiper-equivalent):
 *   .mns-home-hero__splide  ≈ .swiper          (fills shell)
 *     .splide__track        ≈ .swiper-wrapper  (full-bleed media)
 *     .mns-home-hero__controls ≈ .slideshow-controls (absolute on THIS box)
 *
 * Absolute is OK when the containing block is the locked-height stage,
 * not a separate shell sibling of an inset:0 layer.
 */
.home .mns-home-hero__splide {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Explicit height chain (svh shell → stage → track → slides), same idea as Swiper full-bleed. */
.home .mns-home-hero__splide .splide__track,
.home .mns-home-hero__splide .splide__list,
.home .mns-home-hero__splide .splide__slide {
  height: 100%;
}

.mns-home-hero__controls,
.home .mns-home-hero__controls {
  position: absolute;
  z-index: 20;
  top: auto;
  right: max(2.5rem, calc((100vw - 1280px) / 2 + 2.5rem));
  bottom: 5rem;
  left: auto;
  display: flex !important;
  align-items: center;
  width: max-content;
  max-width: calc(100% - 2rem);
  margin: 0;
  gap: 0.75rem;
  transform: none;
  -webkit-transform: none;
  pointer-events: auto;
}

.mns-home-hero__arrow,
.home .mns-home-hero__arrow,
.mns-home-hero__controls > button.mns-home-hero__arrow {
  display: grid !important;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  /* Default high-contrast look so controls never disappear on light slides */
  background: rgba(94, 111, 103, 0.78);
  color: #fff;
  box-shadow: 0 12px 28px rgba(31, 37, 32, 0.2);
  cursor: pointer;
  outline: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.mns-home-hero__arrow:hover,
.mns-home-hero__arrow:focus-visible,
.home .mns-home-hero__arrow:hover,
.home .mns-home-hero__arrow:focus-visible {
  background: rgba(94, 111, 103, 0.92);
  color: #fff;
}

.mns-home-hero__arrow-icon,
.home .mns-home-hero__arrow-icon {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
  flex: none;
}

/* Desktop: hide dots (Next.js HeroSection shows arrows only on PC) */
.mns-home-hero__dots,
.home .mns-home-hero__dots {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
}

.mns-home-hero__dots button,
.home .mns-home-hero__dots button {
  width: 0.625rem;
  height: 0.625rem;
  min-width: 0.625rem;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(94, 111, 103, 0.35);
  cursor: pointer;
  outline: none;
  transition: width 0.35s ease, background-color 0.35s ease;
}

.mns-home-hero__dots button[aria-current="true"],
.mns-home-hero__dots button[aria-current],
.home .mns-home-hero__dots button[aria-current="true"],
.home .mns-home-hero__dots button[aria-current] {
  width: 2.5rem;
  background: rgba(94, 111, 103, 0.85);
}

/* headerTheme=dark → translucent white controls on dark photography */
.mns-home-hero__controls.is-light-controls .mns-home-hero__arrow,
.home .mns-home-hero__controls.is-light-controls .mns-home-hero__arrow {
  background: rgba(255, 255, 255, 0.72);
  color: #2E2F2F;
  box-shadow: 0 12px 28px rgba(31, 37, 32, 0.18);
}

.mns-home-hero__controls.is-light-controls .mns-home-hero__arrow:hover,
.mns-home-hero__controls.is-light-controls .mns-home-hero__arrow:focus-visible,
.home .mns-home-hero__controls.is-light-controls .mns-home-hero__arrow:hover,
.home .mns-home-hero__controls.is-light-controls .mns-home-hero__arrow:focus-visible {
  background: rgba(255, 255, 255, 0.92);
  color: #2E2F2F;
}

.mns-home-hero__controls.is-light-controls .mns-home-hero__dots button,
.home .mns-home-hero__controls.is-light-controls .mns-home-hero__dots button {
  background: rgba(255, 255, 255, 0.5);
}

.mns-home-hero__controls.is-light-controls .mns-home-hero__dots button[aria-current="true"],
.mns-home-hero__controls.is-light-controls .mns-home-hero__dots button[aria-current],
.home .mns-home-hero__controls.is-light-controls .mns-home-hero__dots button[aria-current="true"],
.home .mns-home-hero__controls.is-light-controls .mns-home-hero__dots button[aria-current] {
  background: #fff;
}

@media (max-width: 900px) {
  .mns-home-hero__controls,
  .home .mns-home-hero__controls {
    right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1.1rem);
    left: 0;
    margin-inline: auto;
    gap: 0.5rem;
  }

  /* Mobile: keep dots visible; hide only arrows to save space */
  .mns-home-hero__arrow,
  .home .mns-home-hero__arrow,
  .mns-home-hero__controls > button.mns-home-hero__arrow {
    display: none !important;
  }

  .mns-home-hero__dots,
  .home .mns-home-hero__dots {
    display: flex !important;
  }
}

.mns-new-products-section,
.mns-product-classifications-section,
.mns-blog-showcase {
  padding-right: var(--mns-page-gutter);
  padding-left: var(--mns-page-gutter);
}

/* Results module owns its own rail padding via .mns-results__inner. */

.mns-new-products-header,
.mns-product-classifications-header,
.mns-blog-showcase-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.mns-new-products-title,
.mns-product-classifications-title,
.mns-blog-showcase-heading h2 {
  margin: 0;
  color: #2E2F2F;
  font-size: var(--mns-fs-h2, 1.25rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0;
}

.mns-new-products-button,
.mns-product-classifications-button {
  white-space: nowrap;
}

.mns-new-products-grid,
.mns-blog-guide-grid {
  display: grid;
}

.mns-new-products-section[data-mns-new-products] .mns-new-products-card {
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

/* Match product-card corner-tag safe zone (media-pad-top), not the old tight pad. */
.mns-new-products-section[data-mns-new-products] .mns-product-card__media {
  padding: var(--mns-product-card-media-pad-top, clamp(32px, 3.2vw, 40px))
    var(--mns-product-card-media-pad, clamp(14px, 1.5vw, 20px))
    var(--mns-product-card-media-pad, clamp(14px, 1.5vw, 20px));
}

.mns-new-products-section[data-mns-new-products] .mns-product-card__body {
  padding-top: 8px;
  gap: 8px;
}

.mns-product-classifications-section {
  padding-top: clamp(72px, 8vw, 120px);
  padding-bottom: clamp(72px, 8vw, 120px);
}

.mns-home-eyebrow {
  margin: 0 0 8px;
  color: rgba(21, 23, 22, 0.52);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.mns-blog-showcase {
  position: relative;
  padding-top: clamp(58px, 6.6vw, 96px);
  padding-bottom: clamp(58px, 6.6vw, 96px);
  background: #f7f6f3;
}

.mns-news.mns-blog-showcase {
  background: transparent;
}

.mns-blog-showcase::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: rgba(21, 23, 22, 0.08);
  content: "";
}

.mns-blog-showcase-inner {
  display: grid;
  gap: var(--mns-title-content-gap, 40px);
}

.mns-blog-showcase-heading > div > span {
  display: block;
  margin-top: 8px;
  color: rgba(21, 23, 22, 0.55);
  font-size: 0.875rem;
}

/* Home News: 2-up text list on widescreen, stacked on tablet/phone */
.mns-news-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 3.2vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(21, 23, 22, 0.12);
}

.mns-news-item {
  margin: 0;
  min-width: 0;
  border-bottom: 1px solid rgba(21, 23, 22, 0.12);
}

.mns-news-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 22px 0;
  color: #2E2F2F;
  text-decoration: none;
  text-align: left;
  transition: opacity 180ms ease;
}

.mns-news-link:hover {
  opacity: 0.62;
}

.mns-news-date {
  /* Longest Y/n/j is YYYY/MM/DD (10 glyphs); ch = "0" width + letter-spacing gaps. */
  --mns-news-date-span: calc(10ch + 9 * 0.02em);
  flex: 0 0 var(--mns-news-date-span);
  width: var(--mns-news-date-span);
  margin-right: 1.5rem;
  color: rgba(21, 23, 22, 0.48);
  font-family: var(--mns-font-heading, "Archivo", "Noto Sans JP", sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.45;
  white-space: nowrap;
}

.mns-news-date--empty {
  min-height: 1em;
}

.mns-news-category {
  flex: 0 0 auto;
  margin-right: 0.75rem;
  padding: 0 0.36rem;
  border: 1px solid rgba(21, 23, 22, 0.16);
  border-radius: 4px;
  color: #2E2F2F;
  /* Latin-first: Noto Sans JP drops Latin glyphs below the visual midline. */
  font-family: "Archivo", Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  line-height: 1.45;
  white-space: nowrap;
}

.mns-news-title {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.55;
}

/* Home 読みもの: original NEWS image-card grid (blog / magazine) */
.mns-magazine.mns-blog-showcase {
  background: #fff;
}

.mns-blog-guide-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 20px);
}

.mns-blog-guide-item {
  display: grid;
  align-content: start;
  gap: 14px;
}

.mns-blog-guide-card,
.mns-blog-guide-placeholder {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(21, 23, 22, 0.1);
  border-radius: 4px;
  background: linear-gradient(145deg, #e9e7de, #f4f2ec);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.mns-blog-guide-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(21, 23, 22, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.mns-blog-guide-card:hover {
  border-color: rgba(21, 23, 22, 0.28);
  box-shadow: 0 12px 28px rgba(21, 23, 22, 0.08);
}

.mns-blog-guide-card:hover::after {
  opacity: 1;
}

.mns-blog-guide-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #2E2F2F;
  font-size: clamp(1rem, 1.08vw, 1.12rem);
  font-weight: 700;
  line-height: 1.32;
  /* Always reserve 2 lines so card rows share the same title block height */
  min-height: calc(1.32em * 2);
  text-decoration: none;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.mns-blog-guide-title:hover {
  text-decoration: underline;
}

.mns-blog-guide-item > p {
  margin: 0;
  color: rgba(21, 23, 22, 0.55);
  font-size: 0.875rem;
  line-height: 1.5;
}

@media (max-width: 1180px) {
  .mns-blog-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .mns-news-list {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}

@media (max-width: 768px) {
  :root { --mns-page-gutter: 20px; }
  .mns-new-products-section,
  .mns-product-classifications-section,
  .mns-blog-showcase { padding-top: 44px; padding-bottom: 44px; }
  .mns-new-products-header,
  .mns-product-classifications-header { align-items: center; margin-bottom: var(--mns-title-content-gap, 20px); padding-bottom: 0; gap: 12px; }
  .mns-new-products-section[data-mns-new-products] .mns-new-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mns-blog-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mns-news-link {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
    padding: 18px 0;
  }
  .mns-news-date {
    margin-right: 0;
  }
  .mns-news-category {
    margin-right: 0;
  }
  .mns-news-title {
    flex-basis: 100%;
    font-size: 0.92rem;
    text-align: left;
  }
  .home .mns-home-hero__frame {
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding-top: calc(var(--mns-header-hero-inset, var(--mns-header-total-height)) + 8svh);
    padding-right: 20px;
    padding-bottom: 6rem;
    padding-left: 20px;
    text-align: left !important;
  }
  .home .mns-home-hero__category { margin-top: 0.75rem; font-size: 0.75rem; }
  .home .mns-home-hero__product { margin-top: 0.5rem; font-size: 1rem; }
  .home .mns-home-hero__title,
  .home .mns-home-hero h2 { margin-top: 0.75rem; font-size: var(--mns-fs-h1, 1.75rem); }
  .home .mns-home-hero__actions { margin-top: 1rem; gap: 0.5rem; }
  .home .mns-home-hero__cta { min-width: clamp(7.25rem, 46vw, 9rem); }
  .home .mns-home-hero__tags { margin-top: 0.75rem; }
}

@media (max-width: 420px) {
  .mns-new-products-section[data-mns-new-products] .mns-new-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mns-new-products-section[data-mns-new-products] .mns-product-card__body { padding: 12px; gap: 8px; }
  .mns-new-products-section[data-mns-new-products] .mns-product-card__variants { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mns-new-products-button,
  .mns-product-classifications-button,
  .mns-blog-guide-card,
  .mns-blog-guide-card::after { transition: none; }
}